cetec-design-system 0.0.4 → 0.0.6

package/src/recipes/text.ts

@@ -0,0 +1,185 @@
+import { defineRecipe } from '@pandacss/dev';
+import {
+  fontSizes as fontSizeTokens,
+  fontWeights as fontWeightTokens,
+} from '~/styles/tokens';
+
+const textBase = {
+  margin: '0',
+  lineHeight: 'default',
+  fontWeight: 'normal',
+  fontSize: '16',
+  color: { base: 'slate.60', _dark: 'slate.30' },
+};
+
+type FontSizeKey = keyof typeof fontSizeTokens;
+const fontSizes = (Object.keys(fontSizeTokens) as FontSizeKey[]).reduce(
+  (accumulator, currentKey) => {
+    accumulator[currentKey] = { fontSize: fontSizeTokens[currentKey].value };
+    return accumulator;
+  },
+  {} as Record<FontSizeKey, Record<'fontSize', string>>,
+);
+
+type FontWeightKey = keyof typeof fontWeightTokens;
+const fontWeights = (Object.keys(fontWeightTokens) as FontWeightKey[]).reduce(
+  (accumulator, currentKey) => {
+    accumulator[currentKey] = {
+      fontWeight: fontWeightTokens[currentKey].value,
+    };
+    return accumulator;
+  },
+  {} as Record<FontWeightKey, Record<'fontWeight', number>>,
+);
+
+const textVariants = {
+  textStyle: {
+    'display-lg': { textStyle: 'display.lg' },
+    'display-md': { textStyle: 'display.md' },
+    'display-sm': { textStyle: 'display.sm' },
+    'display-xs': { textStyle: 'display.xs' },
+    'heading-lg': { textStyle: 'heading.lg' },
+    'heading-md': { textStyle: 'heading.md' },
+    'heading-sm': { textStyle: 'heading.sm' },
+    'heading-xs': { textStyle: 'heading.xs' },
+    'body-lg': { textStyle: 'body.lg' },
+    'body-md': { textStyle: 'body.md' },
+    'body-sm': { textStyle: 'body.sm' },
+    'body-xs': { textStyle: 'body.xs' },
+    'mono-lg': { textStyle: 'mono.lg' },
+    'mono-md': { textStyle: 'mono.md' },
+    'mono-sm': { textStyle: 'mono.sm' },
+    'mono-xs': { textStyle: 'mono.xs' },
+  },
+  family: {
+    heading: { fontFamily: 'heading' },
+    body: { fontFamily: 'body' },
+    mono: {
+      fontFamily: 'mono',
+      fontVariationSettings: '"CRSV" 0, "CASL" 0, "MONO" 1',
+    },
+  },
+  bold: {
+    true: {
+      fontWeight: 'bold',
+    },
+  },
+  italic: {
+    true: {
+      fontStyle: 'italic',
+      fontVariationSettings: '"CRSV" 0, "CASL" 0, "slnt" -15',
+    },
+  },
+  underline: {
+    true: {
+      textDecoration: 'underline',
+    },
+  },
+  size: fontSizes,
+  weight: fontWeights,
+};
+
+const headingBase = {
+  fontFamily: 'heading',
+  fontWeight: 'black',
+  color: { base: 'slate.90', _dark: 'slate.5' },
+  lineHeight: 'default',
+};
+
+const headingVariants = {
+  level: {
+    h1: { textStyle: 'heading.lg' },
+    h2: { textStyle: 'heading.md' },
+    h3: { textStyle: 'heading.sm' },
+    h4: { textStyle: 'heading.xs' },
+  },
+};
+
+const linkBase = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  fontWeight: 'medium',
+  gap: '1',
+  color: { base: 'blue.50', _dark: 'blue.40' },
+  textDecoration: 'none',
+  backgroundImage: 'linear-gradient(90deg, transparent 0% 100%)',
+  backgroundSize: '100% 1px',
+  backgroundRepeat: 'no-repeat',
+  backgroundPositionY: '100%',
+  width: 'fit-content',
+  cursor: 'pointer',
+  _hover: {
+    color: { base: 'blue.40', _dark: 'blue.30' },
+    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+  },
+};
+
+const linkVariants = {
+  ...textVariants,
+  _disabled: {
+    true: {
+      cursor: 'not-allowed',
+      opacity: 0.7,
+      pointerEvents: 'none',
+    },
+  },
+};
+
+const labelBase = {
+  fontSize: '14',
+  fontWeight: 'normal',
+  lineHeight: 'normal',
+  cursor: 'default',
+};
+
+//Copied linkvarients, don't have styles defined for this yet
+const labelVariants = {
+  ...textVariants,
+  _disabled: {
+    true: {
+      cursor: 'not-allowed',
+      opacity: 0.7,
+      pointerEvents: 'none',
+    },
+  },
+};
+
+export const textRecipe = defineRecipe({
+  className: 'text',
+  jsx: ['Text'],
+  base: textBase,
+  variants: textVariants,
+  defaultVariants: {
+    textStyle: 'body-md',
+  },
+});
+
+export const headingRecipe = defineRecipe({
+  className: 'heading',
+  jsx: ['Heading'],
+  base: headingBase,
+  variants: headingVariants,
+  defaultVariants: {
+    level: 'h2',
+  },
+});
+
+export const linkRecipe = defineRecipe({
+  className: 'link',
+  jsx: ['Link'],
+  base: linkBase,
+  variants: linkVariants,
+  defaultVariants: {
+    family: 'body',
+  },
+});
+
+export const labelRecipe = defineRecipe({
+  className: 'label',
+  jsx: ['Label'],
+  base: labelBase,
+  variants: labelVariants,
+  defaultVariants: {
+    family: 'body',
+  },
+});

package/src/recipes/textarea.ts

@@ -0,0 +1,77 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const textareaBase = {
+  position: 'relative',
+  display: 'inline-grid',
+  verticalAlign: 'top',
+  alignItems: 'center',
+  padding: '0',
+  fontFamily: 'body',
+  fontSize: '16',
+  fontWeight: 'normal',
+  lineHeight: 'normal',
+  color: { base: 'slate.90', _osDark: 'slate.5' },
+  borderRadius: '8',
+  width: 'full',
+  '&::after, & textarea': {
+    width: 'auto',
+    minWidth: '16',
+    maxWidth: 'full',
+    font: 'inherit',
+    py: '4',
+    px: '8',
+    m: '0',
+    resize: 'none',
+    appearance: 'none',
+    borderWidth: '1',
+    borderStyle: 'solid',
+    borderRadius: '4',
+    borderColor: 'transparent',
+    background: { base: 'slate.0', _osDark: 'slate.90' },
+    _hover: {
+      borderColor: { base: 'slate.20', _osDark: 'slate.30' },
+    },
+    _focus: {
+      borderColor: { base: 'slate.90', _osDark: 'slate.5' },
+    },
+  },
+  _after: {
+    content: 'attr(data-value) " "',
+    outline: '1px solid olive',
+    whiteSpace: 'pre-wrap',
+    transform: 'translate(4px, 4px)',
+    opacity: '0.3',
+  },
+  '& textarea': {},
+  gridTemplateColumns: 'auto 1fr',
+};
+
+const textareaVariants = {
+  variant: {
+    autoGrow: {
+      width: 'fit-content',
+    },
+    stacked: {
+      gridTemplateRows: 'auto 1fr',
+      alignItems: 'stretch',
+      '&::after, & textarea': {
+        gridArea: '2 / 1',
+      },
+      '& textarea': {
+        background: { base: 'slate.0', _osDark: 'slate.90' },
+        borderColor: { base: 'slate.40', _osDark: 'slate.50' },
+      },
+    },
+    internalLabel: {},
+  },
+};
+
+export const textareaRecipe = defineRecipe({
+  className: 'textarea',
+  jsx: ['Textarea'],
+  base: textareaBase,
+  variants: textareaVariants,
+  defaultVariants: {
+    variant: 'autoGrow',
+  },
+});

package/src/styles/conditions.ts

@@ -0,0 +1,108 @@
+export const conditions = {
+  hover: '&:is(:hover, [data-hover])',
+  focus: '&:is(:focus, [data-focus])',
+  focusWithin: '&:focus-within',
+  focusVisible: '&:is(:focus-visible, [data-focus-visible])',
+  disabled: '&:is(:disabled, [disabled], [data-disabled])',
+  error: '&:is([data-error], [error])',
+  active: '&:is(:active, [data-active])',
+  visited: '&:visited',
+  target: '&:target',
+  readOnly: '&:is(:read-only, [data-read-only])',
+  readWrite: '&:read-write',
+  empty: '&:is(:empty, [data-empty])',
+  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
+//  checked: '&:has(+ input[type=checkbox]:checked)',
+  enabled: '&:enabled',
+  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
+  highlighted: '&[data-highlighted]',
+
+  before: '&::before',
+  after: '&::after',
+  firstLetter: '&::first-letter',
+  firstLine: '&::first-line',
+  marker: '&::marker',
+  selection: '&::selection',
+  file: '&::file-selector-button',
+  backdrop: '&::backdrop',
+
+  first: '&:first-child',
+  last: '&:last-child',
+  only: '&:only-child',
+  even: '&:nth-child(even)',
+  odd: '&:nth-child(odd)',
+
+  firstOfType: '&:first-of-type',
+  lastOfType: '&:last-of-type',
+  onlyOfType: '&:only-of-type',
+
+  peerFocus: '.peer:is(:focus, [data-focus]) ~ &',
+  peerHover: '.peer:is(:hover, [data-hover]) ~ &',
+  peerActive: '.peer:is(:active, [data-active]) ~ &',
+  peerFocusWithin: '.peer:focus-within ~ &',
+  peerFocusVisible: '.peer:is(:focus-visible, [data-focus-visible]) ~ &',
+  peerDisabled: '.peer:is(:disabled, [disabled], [data-disabled]) ~ &',
+  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
+  peerInvalid: '.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &',
+  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
+  peerPlaceholderShown: '.peer:placeholder-shown ~ &',
+
+  groupFocus: '.group:is(:focus, [data-focus]) &',
+  groupHover: '.group:is(:hover, [data-hover]) &',
+  groupActive: '.group:is(:active, [data-active]) &',
+  groupFocusWithin: '.group:focus-within &',
+  groupFocusVisible: '.group:is(:focus-visible, [data-focus-visible]) &',
+  groupDisabled: '.group:is(:disabled, [disabled], [data-disabled]) &',
+  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
+  groupInvalid: '.group:invalid &',
+
+  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])',
+  required: '&:is(:required, [data-required], [aria-required=true])',
+  valid: '&:is(:valid, [data-valid])',
+  invalid: '&:is(:invalid, [data-invalid])',
+  autofill: '&:autofill',
+  inRange: '&:in-range',
+  outOfRange: '&:out-of-range',
+  placeholder: '&::placeholder, &[data-placeholder]',
+  placeholderShown: '&:is(:placeholder-shown, [data-placeholder-shown])',
+  pressed: '&:is([aria-pressed=true], [data-pressed])',
+  selected: '&:is([aria-selected=true], [data-selected])',
+
+  default: '&:default',
+  optional: '&:optional',
+  open: '&:is([open], [data-open], [data-state="open"])',
+  closed: '&:is([closed], [data-closed], [data-state="closed"])',
+  fullscreen: '&:fullscreen',
+  loading: '&:is([data-loading], [aria-busy=true])',
+
+  currentPage: '&[aria-current=page]',
+  currentStep: '&[aria-current=step]',
+
+  motionReduce: '@media (prefers-reduced-motion: reduce)',
+  motionSafe: '@media (prefers-reduced-motion: no-preference)',
+  print: '@media print',
+  landscape: '@media (orientation: landscape)',
+  portrait: '@media (orientation: portrait)',
+
+  dark: '.dark &, [data-color-mode=dark] &',
+  light: '.light &, [data-color-mode=light] &',
+  osDark: '@media (prefers-color-scheme: dark)',
+  osLight: '@media (prefers-color-scheme: light)',
+
+  highContrast: '@media (forced-colors: active)',
+  lessContrast: '@media (prefers-contrast: less)',
+  moreContrast: '@media (prefers-contrast: more)',
+
+  ltr: '[dir=ltr] &',
+  rtl: '[dir=rtl] &',
+
+  scrollbar: '&::-webkit-scrollbar',
+  scrollbarThumb: '&::-webkit-scrollbar-thumb',
+  scrollbarTrack: '&::-webkit-scrollbar-track',
+
+  horizontal: '&[data-orientation=horizontal]',
+  vertical: '&[data-orientation=vertical]',
+
+  starting: '@starting-style',
+}

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}',
+      },
+    },
+  },
+};