cetec-design-system 0.0.7 → 0.0.8

package/src/recipes/text.ts

@@ -0,0 +1,193 @@
+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%',
+  outlineWidth: '2',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  outlineOffset: '1',
+  width: 'fit-content',
+  cursor: 'pointer',
+  _hover: {
+    color: { base: 'blue.40', _dark: 'blue.30' },
+    backgroundImage: 'linear-gradient(90deg, currentColor 0% 100%)',
+  },
+  _focus: {
+    borderRadius: '4',
+    outlineColor: { base: 'slate.90', _dark: 'slate.0' },
+  },
+};
+
+const linkVariants = {
+  ...textVariants,
+  _disabled: {
+    true: {
+      cursor: 'not-allowed',
+      opacity: 0.4,
+      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,78 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const textareaBase = {
+  position: 'relative',
+  width: 'full',
+  color: { base: 'slate.90', _dark: 'slate.0' },
+  borderWidth: '1',
+  borderStyle: 'solid',
+  borderColor: 'slate.30',
+  borderRadius: '4',
+  lineHeight: 'tight',
+  outlineWidth: '1',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  resize: 'both',
+  _focus: {
+    outlineColor: { base: 'slate.90', _dark: 'slate.0' },
+    borderColor: { base: 'slate.90', _dark: 'slate.0' },
+  },
+  _error: {
+    display: 'inline-grid',
+    borderColor: 'error.default',
+    _focus: {
+      borderColor: { base: 'error.default', _dark: 'error.default' },
+      outlineColor: { base: 'error.default', _dark: 'error.default' },
+    },
+  },
+  _placeholder: {
+    color: {
+      base: 'slate.50',
+      _dark: 'slate.40',
+    },
+  },
+  _disabled: {
+    opacity: 0.4,
+  },
+  '&[data-error]:focus': {
+    borderColor: 'error.default',
+  },
+};
+
+const textareaVariants = {
+  size: {
+    small: {
+      py: '0',
+      px: '8',
+      minHeight: '48',
+      fontSize: '14',
+    },
+    medium: {
+      py: '3',
+      px: '10',
+      fontSize: '16',
+      minHeight: '64',
+    },
+    large: {
+      py: '7',
+      px: '12',
+      fontSize: '16',
+      minHeight: '80',
+    },
+  },
+  autoSize: {
+    true: {
+      fieldSizing: 'content',
+    },
+  },
+};
+
+export const textareaRecipe = defineRecipe({
+  className: 'textarea',
+  jsx: ['Textarea'],
+  base: textareaBase,
+  variants: textareaVariants,
+  defaultVariants: {
+    size: 'medium',
+  },
+});

package/src/recipes/textinput.ts

@@ -0,0 +1,76 @@
+import { defineRecipe } from '@pandacss/dev';
+
+const textInputVariants = {
+  size: {
+    medium: {
+      py: 3,
+      px: 10,
+      fontSize: '16',
+    },
+    small: {
+      py: 0,
+      px: 8,
+      fontSize: '14',
+    },
+    large: {
+      py: 7,
+      px: 12,
+      fontSize: '16',
+    },
+  },
+  autoSize: {
+    true: {
+      fieldSizing: 'content',
+    },
+  },
+};
+
+const textInputBase = {
+  position: 'relative',
+  width: 'full',
+  borderWidth: '1',
+  borderColor: 'slate.30',
+  borderStyle: 'solid',
+  borderRadius: '4',
+  lineHeight: 'default',
+  fontFamily: 'body',
+  outlineWidth: '1',
+  outlineStyle: 'solid',
+  outlineColor: 'transparent',
+  color: {
+    base: 'slate.90',
+    _dark: 'slate.0',
+  },
+  _placeholder: {
+    color: {
+      base: 'slate.50',
+      _dark: 'slate.40',
+    },
+  },
+  _disabled: {
+    opacity: 0.4,
+  },
+
+  _focus: {
+    outlineColor: { base: 'slate.90', _dark: 'slate.0' },
+    borderColor: { base: 'slate.90', _dark: 'slate.0' },
+  },
+  _error: {
+    display: 'inline-grid',
+    borderColor: 'error.default',
+    _focus: {
+      borderColor: { base: 'error.default', _dark: 'error.default' },
+      outlineColor: { base: 'error.default', _dark: 'error.default' },
+    },
+  },
+};
+
+export const textinputRecipe = defineRecipe({
+  className: 'textinput',
+  jsx: ['TextInput'],
+  base: textInputBase,
+  variants: textInputVariants,
+  defaultVariants: {
+    size: 'medium',
+  },
+});

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>