@crystallize/design-system 1.2.0 → 1.2.1

package/src/button/button.tsx

@@ -0,0 +1,136 @@
+import { ComponentPropsWithRef, forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import './button.css';
+import { Spinner } from '../spinner';
+
+export const buttonTokens = {
+  variant: {
+    default: 'c-btn',
+    elevate: 'c-btn-elevate',
+  },
+  intent: {
+    default: 'c-btn',
+    action: 'c-btn-action',
+    danger: 'c-btn-danger',
+  },
+  size: {
+    xs: 'c-btn-xs',
+    sm: 'c-btn-sm',
+    md: 'c-btn-md',
+    lg: 'c-btn-lg',
+  },
+} as const;
+
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva('c-btn', {
+  variants: {
+    intent: {
+      default: '',
+      action: '',
+      danger: '',
+    },
+    variant: {
+      default: '',
+      elevate: '',
+    },
+    status: {
+      loading: 'c-btn-loading',
+    },
+    size: {
+      xs: 'c-btn-xs',
+      sm: 'c-btn-sm',
+      md: 'c-btn-md',
+      lg: 'c-btn-lg',
+    },
+  },
+  compoundVariants: [
+    {
+      intent: 'default',
+      variant: 'elevate',
+      class: 'c-btn-elevate',
+    },
+    {
+      intent: 'action',
+      variant: 'default',
+      class: 'c-btn-action',
+    },
+    {
+      intent: 'danger',
+      variant: 'default',
+      class: 'c-btn-danger',
+    },
+    {
+      intent: 'danger',
+      variant: 'elevate',
+      class: 'c-btn-danger c-btn-elevate',
+    },
+  ],
+  defaultVariants: {
+    intent: 'default',
+    variant: 'default',
+    size: 'sm',
+  },
+});
+
+export type ButtonProps = ComponentPropsWithRef<'button'> &
+  ButtonStylesProps & {
+    prepend?: React.ReactNode;
+    append?: React.ReactNode;
+    as?: React.ElementType;
+    // To support this button being used as a link
+    to?: string;
+    href?: string;
+  };
+
+const spinnerSizeMap: Record<NonNullable<ButtonProps['size']>, number> = {
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      type = 'button',
+      as: El = 'button',
+      size,
+      variant,
+      intent,
+      prepend,
+      append,
+      status,
+      ...delegated
+    },
+    ref,
+  ) => {
+    let isAnchor = false;
+
+    if ('to' in delegated || 'href' in delegated) {
+      isAnchor = true;
+    }
+
+    return (
+      <El
+        ref={ref}
+        type={isAnchor ? undefined : type}
+        className={buttonStyles({ size, variant, intent, status, className })}
+        {...delegated}
+      >
+        {!prepend ? null : <span className="c-btn__prepend">{prepend}</span>}
+        {children}
+        {status !== 'loading' ? null : (
+          <span className="c-btn__loading-spinner">
+            <Spinner size={size ? spinnerSizeMap[size] : spinnerSizeMap.md} />
+          </span>
+        )}
+        {!append ? null : <span className="c-btn__append">{append}</span>}
+      </El>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export { Button, buttonTokens } from './button';
+
+export type { ButtonProps } from './button';

package/src/card/card.css

@@ -0,0 +1,7 @@
+.c-card {
+  @apply rounded-lg bg-gray-50-900 p-4 sm:p-8;
+}
+
+.c-card-elevate {
+  @apply bg-elevate;
+}

package/src/card/card.stories.tsx

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { Card } from '.';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    children: 'Hello World 🌍',
+  },
+};
+
+export const WhiteCard: Story = {
+  name: 'Elevated Card',
+  args: {
+    children: 'Hello World 🌍',
+    variant: 'elevate',
+  },
+};

package/src/card/card.tsx

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import './card.css';
+
+type CardStylesProps = VariantProps<typeof cardStyles>;
+const cardStyles = cva('c-card', {
+  variants: {
+    variant: {
+      default: 'c-card',
+      elevate: 'c-card-elevate',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+type CardProps = HTMLAttributes<HTMLDivElement> & CardStylesProps;
+
+export function Card({ children, className, variant, ...delegated }: CardProps) {
+  return (
+    <section className={cardStyles({ variant, className })} {...delegated}>
+      {children}
+    </section>
+  );
+}

package/src/card/index.ts

@@ -0,0 +1,3 @@
+export { Card } from './card';
+
+export const cardToken = 'c-card';

package/src/checkbox/checkbox.css

@@ -0,0 +1,30 @@
+.c-checkbox {
+  @apply flex h-3.5 w-3.5 cursor-pointer items-center justify-center rounded-sm border border-solid border-gray-100-800 bg-elevate;
+
+  &[aria-checked='true'] {
+    @apply border-cyan-700-200 bg-cyan-200-700;
+  }
+
+  &:focus {
+    @apply outline-none ring-1 ring-cyan-700-200 ring-offset-1;
+  }
+
+  &:disabled {
+    @apply cursor-default opacity-40;
+  }
+
+  &:readonly {
+    @apply cursor-default;
+  }
+
+  &__svg {
+    @apply h-2 w-2;
+
+    &-p1 {
+      @apply fill-cyan-700-200;
+    }
+    &-p2 {
+      @apply stroke-cyan-700-200;
+    }
+  }
+}

package/src/checkbox/checkbox.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Label } from '../label';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Example: Story = {
+  render: () => {
+    return <Checkbox defaultChecked={true} />;
+  },
+};
+
+export const Uncontrolled: Story = {
+  render: () => {
+    return <Checkbox defaultChecked={true} />;
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox checked={checked} onCheckedChange={c => setChecked(Boolean(c))} />;
+  },
+};
+
+export const WithLabel: Story = {
+  render: () => {
+    return (
+      <div className="flex items-center space-x-2">
+        <Checkbox id="with-label-c1" defaultChecked={true} />
+        <Label htmlFor="with-label-c1">Accept terms and conditions.</Label>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-c1" defaultChecked={true} disabled />
+          <Label htmlFor="disabled-c1">Accept terms and conditions.</Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="disabled-c2" defaultChecked={false} disabled />
+          <Label htmlFor="disabled-c2">Accept terms and conditions.</Label>
+        </div>
+      </div>
+    );
+  },
+};

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { ComponentProps, forwardRef } from 'react';
+
+import './checkbox.css';
+
+export type CheckboxRef = HTMLButtonElement;
+export type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
+
+export const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
+  return (
+    <CheckboxPrimitive.Root {...props} ref={ref} className="c-checkbox">
+      <CheckboxPrimitive.Indicator>
+        <svg viewBox="0 0 9 9" fill="none" className="c-checkbox__svg">
+          <path
+            className="c-checkbox__svg-p1"
+            d="M1.12 5.51a.559.559 0 01.832-.101l2.201 1.953-.427.624a.326.326 0 01-.486.06L1.21 6.245a.559.559 0 01-.09-.734z"
+          />
+          <path
+            className="c-checkbox__svg-p2"
+            d="M7.883 1.087c.043.03.053.09.023.132L3.669 7.132l-.154-.105L7.754 1.11a.093.093 0 01.129-.023z"
+          />
+        </svg>
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/src/colors/Colors.stories.tsx

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { cx } from 'class-variance-authority';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import rawColors from './colors.json';
+import colorPairing from './color-pairing.json';
+import colorDefaults from './color-defaults.json';
+import type { Color, ColorName, Colors } from './types';
+
+const meta: Meta = {
+  title: 'Colors',
+};
+
+const colors: Colors = rawColors;
+
+// The application for colors coming from Figma
+const applications: {
+  colorName: ColorName;
+  shade: number; // Defaults to light mode
+  application: string;
+}[] = [
+  {
+    colorName: 'pink',
+    shade: 300,
+    application: 'pricelist-bg',
+  },
+  {
+    colorName: 'pink',
+    shade: 600,
+    application: 'error',
+  },
+  {
+    colorName: 'gray',
+    shade: 50,
+    application: 'bg-gray',
+  },
+  {
+    colorName: 'gray',
+    shade: 100,
+    application: 'gutter',
+  },
+  {
+    colorName: 'gray',
+    shade: 500,
+    application: 'label',
+  },
+  {
+    colorName: 'gray',
+    shade: 700,
+    application: 'text, btn-text',
+  },
+  {
+    colorName: 'purple',
+    shade: 50,
+    application: 'btn-bg',
+  },
+  {
+    colorName: 'purple',
+    shade: 700,
+    application: 'pricelist-text',
+  },
+];
+
+export default meta;
+
+function ColorItem({ colorName, color }: { colorName: ColorName; color: Color }) {
+  const shades = Object.keys(color);
+
+  const isDark = useDarkMode();
+
+  // @ts-expect-error
+  const applicationsForMode = !isDark ? applications : applications.map(a => ({ ...a, shade: colorPairing[a.shade] }));
+
+  return (
+    <div>
+      <h2 className="text-gray">{colorName}</h2>
+      <div className="grid grid-cols-10">
+        {shades.map(shade => {
+          // @ts-expect-error
+          const def = color[shade] as string;
+
+          const applicatedAt = applicationsForMode.filter(a => a.colorName === colorName && a.shade == shade);
+          const isDefault = colorDefaults[colorName] == shade;
+
+          const textColor = parseInt(shade) > 400 ? '#fff' : `rgb(var(--c-color-${colorName}-900))`;
+
+          return (
+            <div>
+              <div
+                style={{ background: def, color: textColor }}
+                className={cx('relative flex h-24 flex-1 items-center justify-center')}
+              >
+                {!isDefault ? null : (
+                  <div
+                    className="h-[8px] w-[8px] rounded"
+                    style={{
+                      backgroundColor: 'currentColor',
+                    }}
+                  />
+                )}
+                <div className="absolute top-2 left-2 right-2 text-center text-sm">{shade}</div>
+              </div>
+              <div className={cx('p-4 text-center text-sm text-gray')}>
+                {applicatedAt.map(a => (
+                  <div key={a.application}>{a.application}</div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const colorNames = Object.keys(colors) as ColorName[];
+
+export const Default: StoryObj = {
+  args: {},
+  render: () => (
+    <div>
+      {colorNames.map(colorName => (
+        <ColorItem key={colorName} colorName={colorName} color={colors[colorName]} />
+      ))}
+    </div>
+  ),
+};

package/src/colors/color-defaults.json

@@ -0,0 +1,15 @@
+{
+  "cyan": "200",
+  "pink": "300",
+  "gray": "700",
+  "purple": "50",
+  "green": "400",
+  "orange": "200",
+  "s-red": "400",
+  "s-orange": "300",
+  "s-yellow": "200",
+  "s-green": "300",
+  "s-blue": "400",
+  "s-purple": "400",
+  "s-pink": "300"
+}

package/src/colors/color-pairing.json

@@ -0,0 +1,12 @@
+{
+  "50": 900,
+  "100": 800,
+  "200": 700,
+  "300": 600,
+  "400": 500,
+  "500": 400,
+  "600": 300,
+  "700": 200,
+  "800": 100,
+  "900": 50
+}

package/src/colors/colors.json

@@ -0,0 +1,158 @@
+{
+  "cyan": {
+    "50": "#eefdfc",
+    "100": "#bff6f8",
+    "200": "#acf1f5",
+    "300": "#73e5ed",
+    "400": "#33d0dd",
+    "500": "#17b3c3",
+    "600": "#1690a4",
+    "700": "#197385",
+    "800": "#1d5e6d",
+    "900": "#1c4e5d"
+  },
+  "pink": {
+    "50": "#fef1f9",
+    "100": "#fee5f4",
+    "200": "#ffccec",
+    "300": "#ffa1db",
+    "400": "#ff66c0",
+    "500": "#fb39a4",
+    "600": "#eb1782",
+    "700": "#cd0966",
+    "800": "#a90b54",
+    "900": "#8d0e49"
+  },
+  "gray": {
+    "50": "#f5f5f6",
+    "100": "#e4e5e9",
+    "200": "#cccfd5",
+    "300": "#a9aeb7",
+    "400": "#7e8592",
+    "500": "#626778",
+    "600": "#545866",
+    "700": "#4c4f5a",
+    "800": "#40424a",
+    "900": "#393a40"
+  },
+  "purple": {
+    "50": "#f7f6f9",
+    "100": "#eeecf2",
+    "200": "#d8d5e2",
+    "300": "#b6b0c9",
+    "400": "#8e85ab",
+    "500": "#706691",
+    "600": "#5b5178",
+    "700": "#4b4262",
+    "800": "#403953",
+    "900": "#393347"
+  },
+  "green": {
+    "50": "#f3f8f8",
+    "100": "#dfebee",
+    "200": "#c3dade",
+    "300": "#9abfc6",
+    "400": "#699ca7",
+    "500": "#528693",
+    "600": "#436a77",
+    "700": "#3b5863",
+    "800": "#374b53",
+    "900": "#314148"
+  },
+  "orange": {
+    "50": "#fff9eb",
+    "100": "#ffedc6",
+    "200": "#ffde99",
+    "300": "#ffbf4a",
+    "400": "#ffa520",
+    "500": "#f98107",
+    "600": "#dd5c02",
+    "700": "#b73d06",
+    "800": "#942e0c",
+    "900": "#7a270d"
+  },
+  "s-red": {
+    "50": "#fef2f2",
+    "100": "#ffe1e1",
+    "200": "#ffc8c8",
+    "300": "#ffadad",
+    "400": "#fd6c6c",
+    "500": "#f53e3e",
+    "600": "#e22020",
+    "700": "#be1717",
+    "800": "#9d1717",
+    "900": "#821a1a"
+  },
+  "s-orange": {
+    "50": "#fff7ed",
+    "100": "#ffedd5",
+    "200": "#ffd6a5",
+    "300": "#ffbb72",
+    "400": "#fd943a",
+    "500": "#fc7513",
+    "600": "#ed5909",
+    "700": "#c4420a",
+    "800": "#9c3410",
+    "900": "#7d2d11"
+  },
+  "s-yellow": {
+    "50": "#fefee8",
+    "100": "#fdffb6",
+    "200": "#fffe88",
+    "300": "#fff744",
+    "400": "#fee911",
+    "500": "#eecf04",
+    "600": "#cda201",
+    "700": "#a47404",
+    "800": "#875b0c",
+    "900": "#734a10"
+  },
+  "s-green": {
+    "50": "#f2ffee",
+    "100": "#deffd8",
+    "200": "#caffbf",
+    "300": "#8dfd78",
+    "400": "#53f236",
+    "500": "#2cdb0c",
+    "600": "#1eb603",
+    "700": "#1b8e07",
+    "800": "#1a700b",
+    "900": "#165b0c"
+  },
+  "s-blue": {
+    "50": "#eff5ff",
+    "100": "#dae7ff",
+    "200": "#bed5ff",
+    "300": "#a0c4ff",
+    "400": "#5d96fd",
+    "500": "#376ffa",
+    "600": "#214fef",
+    "700": "#193adc",
+    "800": "#1b31b2",
+    "900": "#1c2f8c"
+  },
+  "s-purple": {
+    "50": "#f4f3ff",
+    "100": "#ebe8ff",
+    "200": "#d9d5ff",
+    "300": "#bdb2ff",
+    "400": "#9d88fd",
+    "500": "#7e58fa",
+    "600": "#6f35f2",
+    "700": "#6023de",
+    "800": "#501dba",
+    "900": "#431a98"
+  },
+  "s-pink": {
+    "50": "#fff4ff",
+    "100": "#ffe7ff",
+    "200": "#ffc6ff",
+    "300": "#fea9fa",
+    "400": "#fc76f4",
+    "500": "#f342e7",
+    "600": "#d722c8",
+    "700": "#b219a1",
+    "800": "#921684",
+    "900": "#771869"
+  }
+}

package/src/colors/index.ts

@@ -0,0 +1 @@
+export { default as colors } from './colors.json';

package/src/colors/old-to-new.txt

@@ -0,0 +1,19 @@
+## Names
+
+text-dark = dark (shade 700)
+neptune = cyan (shade 100)
+astroid = blue (shade 500)
+cosmos = grey (shade 50)
+glacier = green (shade 200)
+jupiter = grey-two-do-we-need-this (shade 100)
+error = pink (shade 600)
+galaxy = blue-two-do-we-need-this (shade 800)
+success = green-two-do-we-need-this (shade 200)
+
+Duplicates:
+density = text-dark
+
+
+## Classes
+
+text-dark-text = text-gray