cetec-design-system 0.0.2 → 0.0.4

package/src/recipes/text.ts

@@ -1,185 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,35 +0,0 @@
-/* 
---------------------
-	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

@@ -1,85 +0,0 @@
-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

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

package/src/styles/semanticTokens.ts

@@ -1,110 +0,0 @@
-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}',
-      },
-    },
-  },
-};