@jig-ui/react 0.1.0

package/dist/tokens-vars.d.ts

@@ -0,0 +1,579 @@
+export const color: {
+  "black": string,
+  "blue": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "button": {
+    "danger": {
+      "activeBg": string,
+      "baseBg": string,
+      "disabledBg": string,
+      "disabledText": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "ghost": {
+      "activeBg": string,
+      "disabledText": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "primary": {
+      "activeBg": string,
+      "baseBg": string,
+      "disabledBg": string,
+      "disabledText": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "secondary": {
+      "activeBg": string,
+      "baseBg": string,
+      "disabledBg": string,
+      "disabledText": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "smoke": {
+      "activeBg": string,
+      "baseBg": string,
+      "disabledBg": string,
+      "disabledText": string,
+      "hoverBg": string,
+      "text": string
+    }
+  },
+  "control": {
+    "activeBorder": string,
+    "baseBg": string,
+    "border": string,
+    "disabledBg": string,
+    "disabledText": string,
+    "hoverBorder": string,
+    "invalidBorder": string,
+    "placeholder": string,
+    "text": string
+  },
+  "cool": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "focus": string,
+  "fuschia": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "gray": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "green": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "lime": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "line": string,
+  "orange": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "purple": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "red": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "scrollbar": {
+    "thumb": string,
+    "thumbHover": string
+  },
+  "slider": {
+    "disabledThumb": string,
+    "disabledTrack": string,
+    "indicator": string
+  },
+  "surfaces": {
+    "body": string,
+    "card": string,
+    "inverse": string,
+    "popover": string,
+    "scrim": string
+  },
+  "teal": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "text": {
+    "accent": string,
+    "accentHover": string,
+    "danger": string,
+    "dangerHover": string,
+    "inverse": string,
+    "inverseHover": string,
+    "muted": string,
+    "mutedHover": string,
+    "primary": string,
+    "primaryHover": string,
+    "secondary": string,
+    "secondaryHover": string
+  },
+  "token": {
+    "blue": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "cool": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "fuschia": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "gray": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "green": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "lime": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "orange": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "purple": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "red": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "teal": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "warm": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    },
+    "yellow": {
+      "baseBg": string,
+      "hoverBg": string,
+      "text": string
+    }
+  },
+  "warm": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  },
+  "white": string,
+  "yellow": {
+    "0": string,
+    "25": string,
+    "50": string,
+    "100": string,
+    "150": string,
+    "200": string,
+    "250": string,
+    "300": string,
+    "350": string,
+    "400": string,
+    "450": string,
+    "500": string,
+    "550": string,
+    "600": string,
+    "650": string,
+    "700": string,
+    "750": string,
+    "800": string,
+    "850": string,
+    "900": string
+  }
+};
+export const elevation: {
+  "hi": string,
+  "lo": string,
+  "med": string
+};
+export const radius: {
+  "100": string,
+  "200": string,
+  "300": string,
+  "400": string,
+  "500": string,
+  "600": string,
+  "700": string,
+  "800": string,
+  "900": string
+};
+export const size: {
+  "control": {
+    "lg": string,
+    "md": string,
+    "sm": string
+  },
+  "dialog": {
+    "lg": string,
+    "md": string,
+    "sm": string
+  }
+};
+export const spacing: {
+  "100": string,
+  "200": string,
+  "300": string,
+  "400": string,
+  "500": string,
+  "600": string,
+  "700": string,
+  "800": string,
+  "900": string
+};
+export const type: {
+  "body01": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "body02": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "caption01": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "caption02": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "code01": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "display01": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "display02": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "display03": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "display04": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "display05": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "display06": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "family": {
+    "display": string,
+    "mono": string,
+    "sans": string
+  },
+  "heading01": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "heading02": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "heading03": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "heading04": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "heading05": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "heading06": {
+    "family": string,
+    "lineHeight": string,
+    "size": string,
+    "weight": string
+  },
+  "scale": {
+    "100": string,
+    "150": string,
+    "200": string,
+    "300": string,
+    "400": string,
+    "500": string,
+    "600": string,
+    "700": string,
+    "800": string,
+    "900": string
+  },
+  "weight": {
+    "400": string,
+    "500": string,
+    "600": string,
+    "700": string
+  }
+};

package/dist/tokens.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The design tokens, as CSS custom property references — `color.text.primary`
+ * is the string `var(--color-text-primary)`, not a colour.
+ *
+ * That means the stylesheet has to be loaded too, since it is what defines the
+ * custom properties these point at. Import `@jig-ui/react/styles.css` once at
+ * the root of the app; without it every token resolves to nothing and paints
+ * nothing. Use these tokens anywhere a CSS value is expected: inline styles,
+ * CSS-in-JS, or a `style` attribute.
+ *
+ * Available groups: `color`, `spacing`, `radius`, `type`, `size`, `elevation`.
+ *
+ * @example
+ * import '@jig-ui/react/styles.css';
+ * import { color, spacing, radius } from '@jig-ui/react/tokens';
+ *
+ * <div style={{
+ *   background: color.surfaces.card,
+ *   borderRadius: radius[400],
+ *   padding: spacing[500],
+ *   color: color.text.primary,
+ * }} />
+ */
+export * from './tokens-vars';