@veeqo/ui 0.0.3 → 0.0.6

package/src/theme/modules/colors.ts

@@ -1,116 +0,0 @@
-export const colors = {
-  brand: {
-    blue: {
-      lightest: '#E4F0F9',
-      light: '#93C6E8',
-      base: '#4CA1D9',
-      dark: '#3878A2',
-      darkest: '#1A384B',
-    },
-    peach: {
-      lightest: '#FDECE9',
-      light: '#F8B2A9',
-      base: '#F48070',
-      dark: '#B65F53',
-      darkest: '#562D27',
-    },
-  },
-  neutral: {
-    ink: {
-      lightest: '#959FA8',
-      light: '#637381',
-      base: '#37424D',
-      dark: '#1B2126',
-    },
-    grey: {
-      lightest: '#FAFAFB',
-      light: '#F2F3F5',
-      base: '#DFE3E8',
-      dark: '#CDD1D5',
-    },
-    greyBlue: {
-      lightest: '#AAC5D8',
-      light: '#558BB1',
-      base: '#406885',
-      dark: '#1E313E',
-    },
-  },
-  secondary: {
-    red: {
-      lightest: '#FDEEEE',
-      light: '#F7BCBC',
-      base: '#EB5757',
-      dark: '#A53D3D',
-      darkest: '#5E2323',
-    },
-    yellow: {
-      lightest: '#FFF6D9',
-      light: '#FFE999',
-      base: '#FFC900',
-      dark: '#BF9600',
-      darkest: '#594600',
-    },
-    green: {
-      lightest: '#E9F7EF',
-      light: '#BEE7CF',
-      base: '#27AE60',
-      dark: '#1B7A43',
-      darkest: '#104626',
-    },
-    lime: {
-      lightest: '#F6FAEB',
-      light: '#DBEBAE',
-      base: '#A5CD35',
-      dark: '#7B9927',
-      darkest: '#394712',
-    },
-    teal: {
-      lightest: '#E5F8F5',
-      light: '#99E5D7',
-      base: '#00BD9A',
-      dark: '#00715C',
-      darkest: '#00392E',
-    },
-    aqua: {
-      lightest: '#EEFAFE',
-      light: '#BBEBFA',
-      base: '#56CCF2',
-      dark: '#3C8FA9',
-      darkest: '#225261',
-    },
-    purple: {
-      lightest: '#F6EFFC',
-      light: '#D9C0F1',
-      base: '#A162DD',
-      dark: '#694090',
-      darkest: '#38224D',
-    },
-    blue: {
-      lightest: '#D9EBF8',
-      light: '#80BCE8',
-      base: '#0079D1',
-      dark: '#005A9C',
-      darkest: '#003053',
-    },
-    pink: {
-      lightest: '#FFF1FC',
-      light: '#FFC7F3',
-      base: '#FFA3EB',
-      dark: '#BF7AB0',
-      darkest: '#593852',
-    },
-    orange: {
-      lightest: '#FEF5ED',
-      light: '#FAD6B7',
-      base: '#F2994A',
-      dark: '#9D6330',
-      darkest: '#613D1E',
-    },
-  },
-  system: {
-    scrollbar: {
-      thumb: 'rgba(99, 115, 129, .5)',
-      background: 'transparent',
-    },
-  },
-};

package/src/theme/modules/layers.ts

@@ -1,6 +0,0 @@
-export const layers = {
-  base: 0,
-  popup: 1000,
-  modal: 2000,
-  tooltip: 3000,
-};

package/src/theme/modules/radius.ts

@@ -1,7 +0,0 @@
-export const radius = {
-  sm: '0.125rem',
-  base: '0.25rem',
-  md: '0.5rem',
-  lg: '0.75rem',
-  full: '50%',
-};

package/src/theme/modules/shadows.ts

@@ -1,6 +0,0 @@
-export enum Shadows {
-  sm = '0px 1px 3px rgba(55, 66, 77, 0.15)',
-  base = '0px 4px 6px rgba(27, 33, 38, 0.2)',
-  md = '0px 10px 15px rgba(27, 33, 38, 0.2)',
-  lg = '0px 20px 25px rgba(27, 33, 38, 0.2)',
-}

package/src/theme/modules/sizes.ts

@@ -1,52 +0,0 @@
-enum SizeAlias {
-  none = 'none',
-  line = 'line',
-  xs = 'xs',
-  sm = 'sm',
-  base = 'base',
-  md = 'md',
-  lg = 'lg',
-  xl = 'xl',
-  xxl = 'xxl',
-}
-
-export type SizeScaleIndex = number | keyof typeof SizeAlias;
-export type SizeScale = {
-  [index: number]: string;
-  [index: string]: string;
-};
-
-type SizeScaleBuilderConfig = {
-  increment: number;
-  unit: string;
-  count: number;
-};
-
-function buildSizeScale({ increment, unit, count }: SizeScaleBuilderConfig): SizeScale {
-  const sizes: SizeScale = {};
-  /* eslint-disable-next-line no-plusplus */
-  for (let i = 0; i <= count; i++) {
-    const value = i * increment;
-    sizes[i] = `${value}${unit}`;
-  }
-  return sizes;
-}
-
-export const sizeScale = buildSizeScale({ increment: 0.25, unit: 'rem', count: 20 });
-
-export const sizeAliases: SizeScale = {
-  [SizeAlias.none]: '0',
-  [SizeAlias.line]: '1px',
-  [SizeAlias.xs]: sizeScale[1],
-  [SizeAlias.sm]: sizeScale[2],
-  [SizeAlias.base]: sizeScale[4],
-  [SizeAlias.md]: sizeScale[6],
-  [SizeAlias.lg]: sizeScale[8],
-  [SizeAlias.xl]: sizeScale[12],
-  [SizeAlias.xxl]: sizeScale[16],
-};
-
-export const sizes: SizeScale = {
-  ...sizeAliases,
-  ...sizeScale,
-};

package/src/theme/modules/text.ts

@@ -1,319 +0,0 @@
-import { colors } from './colors';
-
-export const common = {
-  fontFamily:
-    'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol',
-};
-
-export const text = {
-  headingXXL: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '40px',
-    lineHeight: '56px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.022rem',
-  },
-  headingXL: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '28px',
-    lineHeight: '40px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.02rem',
-  },
-  headingLarge: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '24px',
-    lineHeight: '32px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.019rem',
-  },
-  headingMedium: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '20px',
-    lineHeight: '28px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.017rem',
-  },
-  headingSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '16px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.011rem',
-  },
-  headingTable: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  subheadingLarge: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '20px',
-    lineHeight: '28px',
-    color: colors.neutral.ink.light,
-    textDecoration: 'none',
-    letterSpacing: '-0.017rem',
-  },
-  subheadingMedium: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '16px',
-    lineHeight: '24px',
-    color: colors.neutral.ink.light,
-    textDecoration: 'none',
-    letterSpacing: '-0.011rem',
-  },
-  subheadingSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.light,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  subheadingSmallBold: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  body: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.006rem',
-  },
-  bodySmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  bodyBold: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.006rem',
-  },
-  bodyBoldDark: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.dark,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  bodySmallBold: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  button: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '16px',
-    lineHeight: '24px',
-    color: colors.secondary.blue.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.011rem',
-  },
-  buttonSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.secondary.blue.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.006rem',
-  },
-  linkLarge: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '20px',
-    lineHeight: '28px',
-    color: colors.secondary.blue.base,
-    textDecoration: 'underline',
-    letterSpacing: '-0.017rem',
-  },
-  linkMedium: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '16px',
-    lineHeight: '24px',
-    color: colors.secondary.blue.base,
-    textDecoration: 'underline',
-    letterSpacing: '-0.011rem',
-  },
-  link: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.secondary.blue.base,
-    textDecoration: 'underline',
-    letterSpacing: '-0.006rem',
-  },
-  linkSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.secondary.blue.base,
-    textDecoration: 'underline',
-    letterSpacing: '0',
-  },
-  inputLabel: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.006rem',
-  },
-  inputLabelSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  hintText: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.light,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  placeholder: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.lightest,
-    textDecoration: 'none',
-    letterSpacing: '-0.006rem',
-  },
-  placeholderSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.lightest,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  placeholderCode: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.neutral.ink.lightest,
-    textDecoration: 'none',
-    letterSpacing: '0.5rem',
-  },
-  placeholderCodeSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.neutral.ink.lightest,
-    textDecoration: 'none',
-    letterSpacing: '0.375rem',
-  },
-  error: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '14px',
-    lineHeight: '20px',
-    color: colors.secondary.red.base,
-    textDecoration: 'none',
-    letterSpacing: '-0.006rem',
-  },
-  errorSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.secondary.red.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-  successSmall: {
-    fontFamily: common.fontFamily,
-    fontStyle: 'normal',
-    fontWeight: 600,
-    fontSize: '12px',
-    lineHeight: '16px',
-    color: colors.secondary.green.base,
-    textDecoration: 'none',
-    letterSpacing: '0',
-  },
-};

package/src/theme/storybook/ColorDocs.mdx

@@ -1,130 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-import { Stack } from '../../components';
-import { colors } from '../modules/colors';
-import { Swatch } from './components';
-
-<Meta title="Theme/Colors" />
-
-# Colors
-
-## Usage
-
-```jsx
-import { theme } from '@veeqo/components';
-
-theme.colors.secondary.blue.base;
-```
-
-## Color palettes
-
-### Neutral
-
-<table>
-  <thead>
-    <tr>
-      <th>Color</th>
-      <th>Lightest</th>
-      <th>Light</th>
-      <th>Base</th>
-      <th>Dark</th>
-      <th>Darkest</th>
-    </tr>
-  </thead>
-  <tbody>
-    {Object.keys(colors.neutral).map((color) => (
-      <tr key={color}>
-        <td>{color}</td>
-        <td>
-          <Swatch color={colors.neutral[color].lightest} />
-        </td>
-        <td>
-          <Swatch color={colors.neutral[color].light} />
-        </td>
-        <td>
-          <Swatch color={colors.neutral[color].base} />
-        </td>
-        <td>
-          <Swatch color={colors.neutral[color].dark} />
-        </td>
-        <td>
-          <Swatch color={colors.neutral[color].darkest} />
-        </td>
-      </tr>
-    ))}
-  </tbody>
-</table>
-
-### Secondary
-
-<table>
-  <thead>
-    <tr>
-      <th>Color</th>
-      <th>Lightest</th>
-      <th>Light</th>
-      <th>Base</th>
-      <th>Dark</th>
-      <th>Darkest</th>
-    </tr>
-  </thead>
-  <tbody>
-    {Object.keys(colors.secondary).map((color) => (
-      <tr key={color}>
-        <td>{color}</td>
-        <td>
-          <Swatch color={colors.secondary[color].lightest} />
-        </td>
-        <td>
-          <Swatch color={colors.secondary[color].light} />
-        </td>
-        <td>
-          <Swatch color={colors.secondary[color].base} />
-        </td>
-        <td>
-          <Swatch color={colors.secondary[color].dark} />
-        </td>
-        <td>
-          <Swatch color={colors.secondary[color].darkest} />
-        </td>
-      </tr>
-    ))}
-  </tbody>
-</table>
-
-### Brand
-
-<table>
-  <thead>
-    <tr>
-      <th>Color</th>
-      <th>Lightest</th>
-      <th>Light</th>
-      <th>Base</th>
-      <th>Dark</th>
-      <th>Darkest</th>
-    </tr>
-  </thead>
-  <tbody>
-    {Object.keys(colors.brand).map((color) => (
-      <tr key={color}>
-        <td>{color}</td>
-        <td>
-          <Swatch color={colors.brand[color].lightest} />
-        </td>
-        <td>
-          <Swatch color={colors.brand[color].light} />
-        </td>
-        <td>
-          <Swatch color={colors.brand[color].base} />
-        </td>
-        <td>
-          <Swatch color={colors.brand[color].dark} />
-        </td>
-        <td>
-          <Swatch color={colors.brand[color].darkest} />
-        </td>
-      </tr>
-    ))}
-  </tbody>
-</table>

package/src/theme/storybook/RadiusDocs.mdx

@@ -1,39 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-import { Stack } from '../../components';
-import { radius } from '../modules/radius';
-import { colors } from '../modules/colors';
-import { sizes } from '../modules/sizes';
-
-<Meta title="Theme/Radius" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
-
-# Corner Radius
-
-## Usage
-
-```jsx
-import { theme } from '@veeqo/components';
-
-theme.radius.base;
-```
-
-## Values
-
-<Stack direction="horizontal" spacing="xxl">
-  {Object.keys(radius).map((value) => (
-    <Stack spacing="base" key={value}>
-      <Stack direction="horizontal" alignY="center">
-        <span style={{ fontWeight: 'bold' }}>{value}</span>
-        <div
-          style={{
-            backgroundColor: colors.neutral.ink.lightest,
-            width: '32px',
-            height: '32px',
-            borderRadius: radius[value],
-          }}
-        />
-      </Stack>
-      <span>{radius[value]}</span>
-    </Stack>
-  ))}
-</Stack>