cetec-design-system 0.0.2

package/src/styles/font-imports.css

@@ -0,0 +1,35 @@
+/* 
+--------------------
+	Font imports
+--------------------
+*/
+
+@layer base {
+  /* ruda-latin-wght-normal */
+  @font-face {
+    font-family: 'Ruda Variable';
+    font-style: normal;
+    font-display: swap;
+    font-weight: 400 900;
+    src: url(@fontsource-variable/ruda/files/ruda-latin-wght-normal.woff2)
+      format('woff2-variations');
+    unicode-range:
+      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+      U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+  /* recursive-latin-wght-normal */
+  /* https://www.recursive.design/ */
+  @font-face {
+    font-family: 'Recursive Variable';
+    font-style: oblique 0deg 15deg;
+    font-display: swap;
+    font-weight: 300 1000;
+    src: url(@fontsource-variable/recursive/files/recursive-latin-full-normal.woff2)
+      format('woff2-variations');
+    unicode-range:
+      U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+      U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+      U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+}

package/src/styles/globalStyle.ts

@@ -0,0 +1,85 @@
+import { defineGlobalStyles } from '@pandacss/dev';
+
+// includes some normalize styles from:
+// https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css
+
+export const globalCss = defineGlobalStyles({
+  '*, *::before, *::after': {
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    _focusVisible: {
+      outlineColor: { base: 'slate.80', _dark: 'slate.5' },
+    },
+  },
+  html: {
+    fontSize: '16',
+    lineHeight: 'calc(1em + 0.5rem)',
+    '-webkit-text-size-adjust': '100%',
+    tabSize: '4',
+  },
+  body: {
+    fontFamily: 'body',
+    fontVariationSettings: '"CRSV" 0, "CASL" 0',
+    bg: { base: 'slate.0', _dark: 'slate.90' },
+    color: { base: 'slate.60', _dark: 'slate.20' },
+    fontWeight: 'normal',
+  },
+  'h1, h2, h3, h4, h5, h6': {
+    color: { base: 'slate.90', _dark: 'slate.5' },
+    fontWeight: 'black',
+    lineHeight: 'calc(1em + 0.5rem)',
+  },
+  p: {
+    marginBottom: '0.5rem',
+  },
+  'b, strong': {
+    fontWeight: 'bold',
+  },
+  'i, em': {
+    fontStyle: 'italic',
+    fontVariationSettings: '"CRSV" 0, "CASL" 0, "slnt" -15',
+  },
+  u: {
+    textDecoration: 'underline',
+  },
+  'code, kbd, samp, pre': {
+    fontFamily: 'mono',
+    fontSize: '1em',
+  },
+  table: {
+    borderColor: 'currentcolor',
+  },
+  'button, input, optgroup, select, textarea': {
+    fontFamily: 'inherit',
+    fontSize: '100%',
+    lineHeight: '1.15',
+    margin: '0',
+  },
+  'button, [type="button"], [type="reset"], [type="submit"]': {
+    '-webkit-appearance': 'button',
+  },
+  legend: {
+    padding: '0',
+  },
+  progress: {
+    verticalAlign: 'baseline',
+  },
+  '::-webkit-inner-spin-button, ::-webkit-outer-spin-button': {
+    height: 'auto',
+  },
+  '[type="search"]': {
+    '-webkit-appearance': 'textfield',
+    outlineOffset: '-2px',
+  },
+  '::-webkit-search-decoration': {
+    '-webkit-appearance': 'none',
+  },
+  '::-webkit-file-upload-button': {
+    '-webkit-appearance': 'button',
+    font: 'inherit',
+  },
+  summary: {
+    display: 'list-item',
+  },
+});

package/src/styles/index.css

@@ -0,0 +1,3 @@
+@layer reset, base, tokens, recipes, utilities;
+
+@import 'font-imports.css';

package/src/styles/semanticTokens.ts

@@ -0,0 +1,110 @@
+export const colors = {
+  brand: {
+    slate: { value: '{colors.slate.90}' },
+    gold: { value: '{colors.gold.20}' },
+  },
+  success: {
+    lighter: {
+      value: {
+        base: '{colors.green.2}',
+        _dark: '{colors.green.5}',
+      },
+    },
+    light: {
+      value: {
+        base: '{colors.green.10}',
+        _dark: '{colors.green.20}',
+      },
+    },
+    default: {
+      value: {
+        base: '{colors.green.40}',
+        _dark: '{colors.green.30}',
+      },
+    },
+    dark: {
+      value: {
+        base: '{colors.green.60}',
+        _dark: '{colors.green.60}',
+      },
+    },
+    darker: {
+      value: {
+        base: '{colors.green.70}',
+        _dark: '{colors.green.70}',
+      },
+    },
+  },
+  warning: {
+    lighter: {
+      value: {
+        base: '{colors.yellow.2}',
+        _dark: '{colors.yellow.2}',
+      },
+    },
+    light: {
+      value: {
+        base: '{colors.yellow.10}',
+        _dark: '{colors.yellow.10}',
+      },
+    },
+    default: {
+      value: {
+        base: '{colors.yellow.30}',
+        _dark: '{colors.yellow.20}',
+      },
+    },
+    dark: {
+      value: {
+        base: '{colors.yellow.60}',
+        _dark: '{colors.yellow.60}',
+      },
+    },
+    darker: {
+      value: {
+        base: '{colors.yellow.70}',
+        _dark: '{colors.yellow.70}',
+      },
+    },
+  },
+  error: {
+    lighter: {
+      value: {
+        base: '{colors.red.2}',
+        _dark: '{colors.red.5}',
+      },
+    },
+    light: {
+      value: {
+        base: '{colors.red.10}',
+        _dark: '{colors.red.20}',
+      },
+    },
+    default: {
+      value: {
+        base: '{colors.red.50}',
+        _dark: '{colors.red.40}',
+      },
+    },
+    dark: {
+      value: {
+        base: '{colors.red.60}',
+        _dark: '{colors.red.60}',
+      },
+    },
+    darker: {
+      value: {
+        base: '{colors.red.70}',
+        _dark: '{colors.red.70}',
+      },
+    },
+  },
+  utility: {
+    shadowColor: {
+      value: {
+        base: '{colors.slate.90/20}',
+        _dark: '{colors.slate.100/40}',
+      },
+    },
+  },
+};