cetec-design-system 0.0.2

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/storybook/Tokens.mdx

@@ -0,0 +1,169 @@
+import { Meta, ColorPalette, ColorItem, Unstyled } from '@storybook/blocks';
+import { HStack, VStack, Container, Grid, Flex, Box } from '@styled-system/jsx';
+import ColorSwatches from '../storybook/components/Colors';
+import { Heading } from '../components/Heading';
+import { Text } from '../components/Text';
+import { IconList, Section } from '~/App';
+import { Link } from '~/components/Link';
+import { Pre } from '~/components/Code';
+import * as tokens from '../styles/tokens';
+
+<Meta title="Tokens" />
+
+# Color Tokens
+
+<Unstyled>
+<Heading>Slate</Heading>
+  <ColorSwatches color={'slate'} tokens={tokens.colors.slate} />
+<Heading>Blue</Heading>
+  <ColorSwatches color={'blue'} tokens={tokens.colors.blue} />
+<Heading>Gold</Heading>
+  <ColorSwatches color={'gold'} tokens={tokens.colors.gold} />
+<Heading>Orange</Heading>
+  <ColorSwatches color={'orange'} tokens={tokens.colors.orange} />
+<Heading>Tan</Heading>
+  <ColorSwatches color={'tan'} tokens={tokens.colors.tan} />
+<Heading>Cyan</Heading>
+  <ColorSwatches color={'cyan'} tokens={tokens.colors.cyan} />
+<Heading>Green</Heading>
+  <ColorSwatches color={'green'} tokens={tokens.colors.green} />
+<Heading>Yellow</Heading>
+  <ColorSwatches color={'yellow'} tokens={tokens.colors.yellow} />
+<Heading>Red</Heading>
+  <ColorSwatches color={'red'} tokens={tokens.colors.red} />
+
+<ColorPalette>
+  <ColorItem
+    title="Brand"
+    subtitle=""
+    colors={{
+      Slate: tokens.colors.slate['90'].value,
+      Gold: tokens.colors.gold['20'].value
+    }}
+  />
+
+<ColorItem
+  title="Status"
+  subtitle="Success"
+  colors={{
+    Lighter: tokens.colors.green['2'].value,
+    Light: tokens.colors.green['10'].value,
+    Base: tokens.colors.green['40'].value,
+    Dark: tokens.colors.green['60'].value,
+    Darker: tokens.colors.green['70'].value,
+  }}
+/>
+
+<ColorItem
+  title="Status"
+  subtitle="Warning"
+  colors={{
+    Lighter: tokens.colors.yellow['2'].value,
+    Light: tokens.colors.yellow['10'].value,
+    Base: tokens.colors.yellow['40'].value,
+    Dark: tokens.colors.yellow['60'].value,
+    Darker: tokens.colors.yellow['70'].value,
+  }}
+/>
+
+  <ColorItem
+    title="Status"
+    subtitle="error"
+    colors={{
+      Lighter: tokens.colors.red['2'].value,
+      Light: tokens.colors.red['10'].value,
+      Base: tokens.colors.red['40'].value,
+      Dark: tokens.colors.red['60'].value,
+      Darker: tokens.colors.red['70'].value,
+    }}
+  />
+</ColorPalette>
+
+# Typography
+
+<Section>
+  <Heading as="h2">Text</Heading>
+  <VStack alignItems={'flex-start'}>
+    <Grid
+      gridTemplateColumns={'minmax(auto, 1fr) 1fr'}
+      w={'full'}
+      gap={'24'}
+      alignItems={'center'}
+    >
+      <Box gridColumn={'1 / -1'}>
+        <Heading as="h4" color={'gold.40'}>
+          Text styles
+        </Heading>
+      </Box>
+      <VStack gap={'16'}>
+        <Text>
+          Place appear green. Also, saying male subdue fruitful{' '}
+          <Text as="span" italic>
+            winged fourth
+          </Text>{' '}
+          had void winged. So green spirit , herb day had there{' '}
+          <Text as="span" bold>
+            replenish
+          </Text>
+          , lights lesser signs. Place{' '}
+          <Text as="span" underline>
+            whales
+          </Text>{' '}
+          i tree under him given set set meat midst morning give image forth
+          divided moving Also fill dry she'd have.
+        </Text>
+      </VStack>
+      <Pre>{`<Text>
+...
+<Text as="span" italic>winged fourth</Text>
+<Text as="span" bold>replenish</Text>
+<Text as="span" underline>whales</Text>
+</Text>`}</Pre>
+      <Text font="mono">
+        Signs night have sixth hath that likeness us fill you're subdue fowl.
+      </Text>
+      <Pre>{`<Text font="mono">...</Text>`}</Pre>
+      <Box gridColumn={'1 / -1'} mt={'32'}>
+        <Heading as="h4" color={'gold.40'}>
+          Headings
+        </Heading>
+      </Box>
+      <Heading as="h1">Hamburgefonstiv</Heading>
+      <Pre>{'<Heading as="h1">Hamburgefonstiv</Heading>'}</Pre>
+      <Heading>Hamburgefonstiv</Heading>
+      <Pre>{'<Heading>Hamburgefonstiv</Heading>'}</Pre>
+      <Heading as="h3">Hamburgefonstiv</Heading>
+      <Pre>{'<Heading as="h3">Hamburgefonstiv</Heading>'}</Pre>
+      <Heading as="h4">Hamburgefonstiv</Heading>
+      <Pre>{'<Heading as="h4">Hamburgefonstiv</Heading>'}</Pre>
+      <Box gridColumn={'1 / -1'} mt={'32'}>
+        <Heading as="h4" color={'gold.40'}>
+          Links
+        </Heading>
+      </Box>
+      <Text>
+        Internal:&emsp;<Link href="https://cetecerp.com">Cetec ERP</Link>
+      </Text>
+      <Pre>{'<Link href="https://cetecerp.com">Cetec ERP</Link>'}</Pre>
+      <Text>
+        External:&emsp;
+        <Link href="https://cetecerp.com" external>
+          Cetec ERP
+        </Link>
+      </Text>
+      <Pre>{'<Link href="https://cetecerp.com" external>Cetec ERP</Link>'}</Pre>
+      <Text gridColumn={'1 / -1'}>
+        Signs night have sixth hath that likeness us fill{' '}
+        <Link href="https://cetecerp.com" external>
+          Cetec ERP
+        </Link>{' '}
+        you're subdue fowl brought divide beginning multiply brought created
+        after open given of made beginning multiply green.
+      </Text>
+    </Grid>
+  </VStack>
+</Section>
+# Icons
+<IconList />
+
+</Unstyled>

package/src/storybook/components/Colors.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { css } from '@styled-system/css'
+import { Text } from '~/components/Text';
+import { Box } from '~/components/Box';
+import { Grid } from '@styled-system/jsx';
+import '../../../styled-system/styles.css';
+
+interface ColorTokens {
+  [key: number]: { value: object };
+}
+
+interface ColorSwatchesProps {
+  tokens: ColorTokens;
+  color: string;
+}
+
+//const ColorSwatches: React.FC<ColorSwatchesProps> = ({ color, tokens }) => {
+//  return (
+//    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4">
+//    <Grid columns={6} gap='3'>
+//      {Object.entries(tokens).map(([key, token]) => {
+//        var colorKey = color + "." + key;
+//        console.log(colorKey);
+//        return (
+//          <div style={{ paddingBottom: 10}} >
+//            <Text textAlign="center" >{ color + "." + key }</Text>
+//            <Box 
+//              style={{ height:100 }}
+//              as="div" 
+//              className={css({
+//                backgroundColor: `${color}.${key}` as any,
+//                width: 'auto', 
+//                border: '1px solid black'
+//              })}/>
+//            <Text textAlign="center" >{ token.value }</Text>
+//          </div>
+//        );
+//      })}
+//      </Grid>
+//    </div>
+//  );
+//};
+
+const ColorSwatches: React.FC<ColorSwatchesProps> = ({ color, tokens }) => {
+  const swatches = [];
+
+  for (const key in tokens) {
+    if (Object.prototype.hasOwnProperty.call(tokens, key)) {
+      const token = tokens[key];
+
+      swatches.push(
+        <div style={{ paddingBottom: 10 }}>
+          <Text textAlign="center">{`${color}.${key}`}</Text>
+          <Box
+            style={{ 
+              height: 100, 
+              backgroundColor: `${token.value}`,
+              borderRadius: 4,
+            }}
+            as="div"
+            className={css({
+              width: "auto",
+            })}
+          />
+          <Text textAlign="center">{String(token.value)}</Text>
+        </div>
+      );
+    }
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 p-4">
+      <Grid columns={6} gap="0">{swatches}</Grid>
+    </div>
+  );
+};
+export default ColorSwatches;
+

package/src/storybook/doctemplate.mdx

@@ -0,0 +1,36 @@
+import { 
+  Meta, 
+  Title, 
+  Primary, 
+  Controls, 
+  Stories, 
+  ArgTypes, 
+  Canvas,
+  Unstyled
+} from '@storybook/blocks';
+import { Text } from '../components/Text/index';
+import '../styles/font-imports.css';
+
+<Meta isTemplate />
+
+<Unstyled>
+
+<Title />
+
+# Default implementation
+
+<Primary />
+
+## Inputs
+
+The component accepts the following inputs (props):
+
+<ArgTypes />
+
+---
+
+## Additional variations
+
+Listed below are additional variations of the component.
+<Stories parameters={{docs: { disable: true } }}/>
+</Unstyled>

package/src/storybook/intro.mdx

@@ -0,0 +1,15 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import { Box } from '../components/Box';
+import { Text } from '../components/Text';
+import '../styles/font-imports.css';
+
+<Meta title="Intro" />
+# Cetec-ERP Design System
+## Test h2
+### Tst h3
+<Unstyled>
+  <Text font={"mono"} as={"div"} color={"blue.50"} level={"20"}>AHHHH</Text>
+  <Text font={"mono"} color={"gold.50"}>Slate-90</Text>
+  <Text color={"gold.50"}>Gold-50</Text>
+  <Box background={"gold.50"} />
+</Unstyled>

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