@veeqo/ui 0.0.1

package/src/theme/modules/sizes.ts

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

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

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

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

package/src/theme/storybook/ShadowDocs.mdx

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

package/src/theme/storybook/SizesDocs.mdx

@@ -0,0 +1,104 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import { colors } from '../modules/colors';
+import { sizes, sizeScale, sizeAliases } from '../modules/sizes';
+
+import { Stack } from '../../components';
+import { theme } from '../';
+
+<Meta title="Theme/Sizes" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
+
+# Sizes
+
+## Usage
+
+```jsx
+import { theme } from '@veeqo/components';
+
+theme.sizes.base; // alias
+theme.sizes[4]; // scale value
+```
+
+## Aliases
+
+<Stack direction="horizontal" alignY="end">
+  <Stack alignX="center" spacing="sm">
+    <span style={{ fontWeight: 'bold' }}>Scale</span>
+    <span>Value</span>
+    <span>Alias</span>
+  </Stack>
+  {Object.keys(sizeAliases).map((size) => {
+    return (
+      <Stack alignX="center" spacing="sm" key={size}>
+        <div
+          style={{
+            width: sizes[size],
+            height: sizes[size],
+            backgroundColor: colors.neutral.ink.lightest,
+          }}
+        />
+        <span style={{ fontWeight: 'bold' }}>{size}</span>
+        <span>{sizes[size]}</span>
+      </Stack>
+    );
+  })}
+</Stack>
+
+## Scale values
+
+<Stack direction="horizontal" alignY="start">
+  <Stack direction="vertical">
+    <Stack direction="horizontal" alignY="end">
+      <Stack alignX="center" spacing="sm">
+        <span style={{ fontWeight: 'bold' }}>Scale</span>
+        <span>Value</span>
+        <span>Alias</span>
+      </Stack>
+
+      {Object.keys(sizeScale)
+        .slice(0, 10)
+        .map((size, index) => (
+          <>
+            <Stack alignX="center" spacing="sm" key={size}>
+              <div
+                style={{
+                  width: sizes[size],
+                  height: sizes[size],
+                  backgroundColor: colors.neutral.ink.lightest,
+                }}
+              />
+              <span style={{ fontWeight: 'bold' }}>{size}</span>
+              <span>{sizes[size]}</span>
+            </Stack>
+          </>
+        ))}
+    </Stack>
+
+  <Stack direction="horizontal" alignY="end">
+    <Stack alignX="center" spacing="sm">
+      <span style={{ fontWeight: 'bold' }}>Scale</span>
+      <span>Value</span>
+      <span>Alias</span>
+    </Stack>
+
+    {Object.keys(sizeScale)
+      .slice(10)
+      .map((size, index) => (
+        <>
+          <Stack alignX="center" spacing="sm" key={size}>
+            <div
+              style={{
+                width: sizes[size],
+                height: sizes[size],
+                backgroundColor: colors.neutral.ink.lightest,
+              }}
+            />
+            <span style={{ fontWeight: 'bold' }}>{size}</span>
+            <span>{sizes[size]}</span>
+          </Stack>
+        </>
+      ))}
+    </Stack>
+
+  </Stack>
+</Stack>

package/src/theme/storybook/components.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { theme } from '..';
+
+export const Swatch = ({ color }: any) => (
+  <div
+    style={{ backgroundColor: color, padding: theme.sizes.base, borderRadius: theme.radius.base }}
+  >
+    <span
+      style={{
+        fontWeight: 'bold',
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        padding: theme.sizes.line,
+        borderRadius: theme.radius.base,
+      }}
+    >
+      {color}
+    </span>
+  </div>
+);