@icoms-detection/ui/src/stitches.config.ts

This is the OFFICIAL UI library created by Icoms Detection to design their apps.

import { mediaQueries } from "./utils/constants";
import { createStitches } from "@stitches/react";

export const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config } = createStitches({
  theme: {
    fonts: {
      header: "SF-New-Republic",
      content: "Frutiger",
    },
    fontSizes: {
      xs: "0.75rem",
      sm: "0.875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
    },
    lineHeights: {
      xs: "1rem",
      sm: "1.25rem",
      base: "1.5rem",
      lg: "1.75rem",
      xl: "2rem",
    },
    colors: {
      primary_50: "#FFF9F7",
      primary_100: "#FEE4D9",
      primary_200: "#FDB99D",
      primary_300: "#FB8E61",
      primary_400: "#FA6325",
      primary_500: "#DD4405",
      primary_600: "#AB3504",
      primary_700: "#792503",
      primary_800: "#471602",
      primary_900: "#160700",
      secondary_50: "#FFF8E9",
      secondary_100: "#FFF0CF",
      secondary_200: "#FFDF9C",
      secondary_300: "#FFCF69",
      secondary_400: "#FFBE36",
      secondary_500: "#FFAE03",
      secondary_600: "#CF8C00",
      secondary_700: "#9C6A00",
      secondary_800: "#694700",
      secondary_900: "#362500",
      neutral_50: "#F0F0F1",
      neutral_100: "#E0E1E2",
      neutral_200: "#C0C2C4",
      neutral_300: "#A1A3A7",
      neutral_400: "#818589",
      neutral_500: "#63666A",
      neutral_600: "#4A4D50",
      neutral_700: "#323335",
      neutral_800: "#191A1B",
      neutral_900: "#000001",
    },
    shadows: {
      base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);",
    },
  },
  media: {
    sm: `(min-width: ${mediaQueries.sm}px)`,
    md: "(min-width: 768px)",
    lg: "(min-width: 1024px)",
  },
  utils: {
    ringColor: (value: any) => ({
      // Uses default "color" property to set box-shadow color
      boxShadow: `inset 0 0 0 1px $colors${value}`,
    }),
    text: (value: any) => ({
      fontSize: `$${value}`,
      lineHeight: `$${value}`,
    }),
  },
});