Skip to content

FAST-Computing/fast-graphics

Repository files navigation

@fast-graphics

Design tokens + MUI theme factory + branded React components for FAST-Computing and Simplifica.

packages/
  tokens/       → design tokens (brand colors, fonts)
  mui-theme/    → createThemeFromTokens()
  components/   → branded components
  playground/   → local testing via Vite

Quick Start

Install

npm install @fast/tokens @fast/mui-theme @fast/components \
  @mui/material @emotion/react @emotion/styled

Provider

// app/layout.tsx
import { FastThemeProvider } from '@fast/components';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <FastThemeProvider brand="fast_core">
          {children}
        </FastThemeProvider>
      </body>
    </html>
  );
}

Use a component

'use client';
import { FastButton } from '@fast/components';

<FastButton label="Click me" color="primary" width={180} height={40} animated />

Fallback to MaterialUI components

import { IconButton } from "@mui/material";

<IconButton
  sx={{
    color: theme.palette.primary.main,
    p: "10px",
    fontSize: "1.75rem",
  }}
    onClick={onUpdateRender}
  >
    <PlayArrowIcon fontSize="inherit" />
</IconButton>

Brands

Brand Name
FAST Computing Core fast_core
FAST Computing Argos fast_argos
FAST Computing Atlas fast_atlas
Simplifica Core simplifica_core
Simplifica Burlo simplifica_burlo

Components

All 14 components live in @fast/components. See COMPONENTS.md for full API.

Development

# dev server (Vite playground)
npm run dev

# build all packages
npm run build

Versioning

  • Major — core package changes (affects all apps)
  • Minor — new tokens or components
  • Fix — localized fixes

Tag commits and push to trigger GitHub Packages publish:

git tag v<version>
git push origin v<version>

About

Static file, CSS, everything for aesthetic stuff

Resources

Stars

0 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors