@lateralus-ai/shipping-ui 1.4.16 → 2.0.0-dev.10

package/src/style.css

@@ -1,2 +1,169 @@
-@import url(https://tools-static.wmflabs.org/fontcdn/css?family=Work+Sans:400,500,600);
-@import url(https://tools-static.wmflabs.org/fontcdn/css?family=Alex+Brush);
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");
+
+:root {
+  /* Color scales */
+  --grey-50: #fdfdfc;
+  --grey-100: #f4f2ea;
+  --grey-200: #e1ddce;
+  --grey-300: #bfb9a5;
+  --grey-400: #969080;
+  --grey-500: #6e6960;
+  --grey-600: #524e47;
+  --grey-700: #3a3733;
+  --grey-800: #312e2a;
+  --grey-900: #262420;
+  --white: #ffffff;
+
+  --green-50: #f5f8f2;
+  --green-100: #dde6d2;
+  --green-700: #304624;
+
+  --blue-50: #eef1f8;
+  --blue-100: #dae0ef;
+  --blue-400: #5274ae;
+  --blue-600: #154199;
+  --blue-700: #103480;
+
+  --red-100: #f0d3cc;
+  --red-300: #c97a6b;
+  --red-500: #a0392a;
+  --red-600: #802c20;
+  --red-700: #621f16;
+
+  --orange-50: #faf1de;
+  --orange-700: #5a3d0d;
+
+  --purple-100: #e2d9e8;
+  --purple-700: #3d2e4a;
+
+  /* Semantic: Action */
+  --action-primary-idle: var(--grey-900);
+  --action-primary-on-idle: var(--white);
+  --action-primary-hover: var(--blue-600);
+  --action-primary-on-hover: var(--white);
+  --action-primary-disabled: var(--grey-500);
+  --action-primary-on-disabled: var(--grey-200);
+
+  --action-secondary-idle: var(--grey-50);
+  --action-secondary-on-idle: var(--grey-900);
+  --action-secondary-hover: var(--grey-100);
+  --action-secondary-on-hover: var(--grey-900);
+  --action-secondary-disabled: var(--grey-50);
+  --action-secondary-on-disabled: var(--grey-400);
+
+  --action-tertiary-idle: var(--white);
+  --action-tertiary-on-idle: var(--blue-600);
+  --action-tertiary-hover: var(--blue-50);
+  --action-tertiary-on-hover: var(--blue-700);
+  --action-tertiary-disabled: var(--white);
+  --action-tertiary-on-disabled: var(--grey-400);
+
+  --action-quaternary-idle: var(--white);
+  --action-quaternary-on-idle: var(--grey-700);
+  --action-quaternary-hover: var(--grey-100);
+  --action-quaternary-on-hover: var(--grey-900);
+  --action-quaternary-disabled: var(--white);
+  --action-quaternary-on-disabled: var(--grey-400);
+
+  --action-destructive-idle: var(--red-500);
+  --action-destructive-on-idle: var(--white);
+  --action-destructive-hover: var(--red-700);
+  --action-destructive-on-hover: var(--white);
+  --action-destructive-disabled: var(--red-100);
+  --action-destructive-on-disabled: var(--red-300);
+
+  /* Semantic: Background */
+  --background-primary: var(--grey-50);
+  --background-secondary: var(--grey-100);
+  --background-tertiary: var(--grey-200);
+  --background-hover: var(--grey-900);
+  --background-selected: var(--grey-900);
+  --background-overlay: rgba(38, 36, 32, 0.5);
+
+  /* Semantic: Display */
+  --display-on-light-primary: var(--grey-900);
+  --display-on-light-secondary: var(--grey-700);
+  --display-on-light-tertiary: var(--grey-500);
+  --display-on-light-quaternary: var(--grey-400);
+  --display-on-dark-primary: var(--white);
+  --display-on-dark-secondary: var(--grey-200);
+  --display-on-dark-tertiary: var(--grey-400);
+  --display-on-dark-quaternary: var(--grey-500);
+
+  /* Semantic: Accent */
+  --accent-on-light: var(--blue-600);
+  --accent-on-dark: var(--blue-400);
+  --accent-bg-light: var(--blue-100);
+  --accent-bg-lighter: var(--blue-50);
+
+  /* Semantic: Divider */
+  --divider-primary: var(--grey-200);
+  --divider-secondary: var(--grey-300);
+
+  /* Semantic: Meta */
+  --meta-green: var(--green-100);
+  --meta-on-green: var(--green-700);
+  --meta-orange: var(--orange-50);
+  --meta-on-orange: var(--orange-700);
+  --meta-red: var(--red-100);
+  --meta-on-red: var(--red-600);
+  --meta-blue: var(--blue-100);
+  --meta-on-blue: var(--blue-700);
+  --meta-purple: var(--purple-100);
+  --meta-on-purple: var(--purple-700);
+
+  /* Semantic: Control */
+  --semantic-control: 8px;
+
+  /* Elevation */
+  --raise-1: 0 1px 2px rgba(38, 36, 32, 0.06), 0 1px 3px rgba(38, 36, 32, 0.04);
+  --raise-2: 0 2px 8px rgba(38, 36, 32, 0.08), 0 1px 2px rgba(38, 36, 32, 0.04);
+  --raise-3: 0 8px 24px rgba(38, 36, 32, 0.12), 0 2px 8px rgba(38, 36, 32, 0.06);
+
+  /* Legacy aliases for migration */
+  --text-primary: var(--display-on-light-primary);
+  --text-secondary: var(--display-on-light-secondary);
+  --text-tertiary: var(--display-on-light-tertiary);
+  --surface-primary: var(--background-primary);
+  --surface-secondary: var(--background-secondary);
+  --surface-hover: var(--background-secondary);
+  --border-light: var(--divider-primary);
+  --border-medium: var(--divider-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Sidebar nav scroll — minimal thumb, flush right (shipping-ai pattern) */
+.sidebar-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.sidebar-scroll:hover {
+  scrollbar-color: rgba(38, 36, 32, 0.12) transparent;
+}
+
+.sidebar-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 9999px;
+}
+
+.sidebar-scroll:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(38, 36, 32, 0.12);
+}

package/src/tailwind-theme.ts

@@ -1,258 +1,182 @@
+import { colorScales } from "./tokens/colors";
+import { elevation, borderRadius } from "./tokens/elevation";
+
+const toTailwindFontSize = (
+  size: string,
+  opts: { lineHeight: string; letterSpacing: string; fontWeight?: number },
+) =>
+  [
+    size,
+    {
+      lineHeight: opts.lineHeight,
+      letterSpacing: opts.letterSpacing,
+      ...(opts.fontWeight ? { fontWeight: String(opts.fontWeight) } : {}),
+    },
+  ] as const;
+
 export const theme = {
   fontFamily: {
-    sans: ["Work Sans", "sans-serif"],
+    heading: ['"TRY Vesterbro"', "Libre Baskerville", "Georgia", "serif"],
+    sans: ['"Matter-TRIAL"', "DM Sans", "system-ui", "sans-serif"],
     mono: ["Roboto Mono", "monospace"],
-    signature: ["Alex Brush", "Lucida Handwriting", "cursive"],
   },
   fontSize: {
-    title: [
-      "28px",
-      {
-        lineHeight: "34px",
-        letterSpacing: "-0.02em",
-      },
-    ],
-    "title-em": [
-      "28px",
-      {
-        lineHeight: "34px",
-        letterSpacing: "-0.02em",
-        fontWeight: "600",
-      },
-    ],
-    subheader: [
-      "18px",
-      {
-        lineHeight: "28px",
-        letterSpacing: "-0.01em",
-      },
-    ],
-    "subheader-em": [
-      "18px",
-      {
-        lineHeight: "28px",
-        letterSpacing: "-0.01em",
-        fontWeight: "500",
-      },
-    ],
-    body: [
-      "16px",
-      {
-        lineHeight: "24px",
-        letterSpacing: "-0.01em",
-      },
-    ],
-    "body-em": [
-      "16px",
-      {
-        lineHeight: "24px",
-        letterSpacing: "-0.01em",
-        fontWeight: "500",
-      },
-    ],
-    "caption-1": [
-      "16px",
-      {
-        lineHeight: "22px",
-      },
-    ],
-    "caption-1-em": [
-      "16px",
-      {
-        lineHeight: "22px",
-        fontWeight: "500",
+    title: toTailwindFontSize("28px", { lineHeight: "34px", letterSpacing: "-0.02em" }),
+    "title-em": toTailwindFontSize("28px", {
+      lineHeight: "34px",
+      letterSpacing: "-0.02em",
+      fontWeight: 500,
+    }),
+    heading: toTailwindFontSize("22px", {
+      lineHeight: "28px",
+      letterSpacing: "0",
+      fontWeight: 500,
+    }),
+    subheader: toTailwindFontSize("18px", { lineHeight: "28px", letterSpacing: "-0.01em" }),
+    "subheader-em": toTailwindFontSize("18px", {
+      lineHeight: "28px",
+      letterSpacing: "-0.01em",
+      fontWeight: 500,
+    }),
+    body: toTailwindFontSize("16px", { lineHeight: "24px", letterSpacing: "-0.01em" }),
+    "body-em": toTailwindFontSize("16px", {
+      lineHeight: "24px",
+      letterSpacing: "-0.01em",
+      fontWeight: 500,
+    }),
+    "caption-1": toTailwindFontSize("16px", { lineHeight: "22px", letterSpacing: "0.02em" }),
+    "caption-1-em": toTailwindFontSize("16px", {
+      lineHeight: "22px",
+      letterSpacing: "0.02em",
+      fontWeight: 500,
+    }),
+    "caption-2": toTailwindFontSize("14px", { lineHeight: "20px", letterSpacing: "0.01em" }),
+    "caption-2-em": toTailwindFontSize("14px", {
+      lineHeight: "20px",
+      letterSpacing: "0.01em",
+      fontWeight: 500,
+    }),
+    footnote: toTailwindFontSize("13px", { lineHeight: "17px", letterSpacing: "0" }),
+    "footnote-em": toTailwindFontSize("13px", {
+      lineHeight: "17px",
+      letterSpacing: "0",
+      fontWeight: 500,
+    }),
+  },
+  boxShadow: {
+    raise1: elevation.raise1,
+    raise2: elevation.raise2,
+    raise3: elevation.raise3,
+  },
+  borderRadius: {
+    control: borderRadius.control,
+    lg: borderRadius.lg,
+    md: borderRadius.md,
+    sm: borderRadius.sm,
+  },
+  colors: {
+    grey: colorScales.grey,
+    gray: colorScales.grey,
+    green: colorScales.green,
+    blue: colorScales.blue,
+    red: colorScales.red,
+    orange: colorScales.orange,
+    purple: colorScales.purple,
+    white: "#ffffff",
+    action: {
+      primary: {
+        idle: "var(--action-primary-idle)",
+        "on-idle": "var(--action-primary-on-idle)",
+        hover: "var(--action-primary-hover)",
+        "on-hover": "var(--action-primary-on-hover)",
+        disabled: "var(--action-primary-disabled)",
+        "on-disabled": "var(--action-primary-on-disabled)",
       },
-    ],
-    "caption-2": [
-      "14px",
-      {
-        lineHeight: "20px",
+      secondary: {
+        idle: "var(--action-secondary-idle)",
+        "on-idle": "var(--action-secondary-on-idle)",
+        hover: "var(--action-secondary-hover)",
+        "on-hover": "var(--action-secondary-on-hover)",
+        disabled: "var(--action-secondary-disabled)",
+        "on-disabled": "var(--action-secondary-on-disabled)",
       },
-    ],
-    "caption-2-em": [
-      "14px",
-      {
-        lineHeight: "20px",
-        fontWeight: "500",
+      tertiary: {
+        idle: "var(--action-tertiary-idle)",
+        "on-idle": "var(--action-tertiary-on-idle)",
+        hover: "var(--action-tertiary-hover)",
+        "on-hover": "var(--action-tertiary-on-hover)",
+        disabled: "var(--action-tertiary-disabled)",
+        "on-disabled": "var(--action-tertiary-on-disabled)",
       },
-    ],
-    footnote: [
-      "13px",
-      {
-        lineHeight: "17px",
+      quaternary: {
+        idle: "var(--action-quaternary-idle)",
+        "on-idle": "var(--action-quaternary-on-idle)",
+        hover: "var(--action-quaternary-hover)",
+        "on-hover": "var(--action-quaternary-on-hover)",
+        disabled: "var(--action-quaternary-disabled)",
+        "on-disabled": "var(--action-quaternary-on-disabled)",
       },
-    ],
-    "footnote-em": [
-      "13px",
-      {
-        lineHeight: "17px",
-        fontWeight: "500",
+      destructive: {
+        idle: "var(--action-destructive-idle)",
+        "on-idle": "var(--action-destructive-on-idle)",
+        hover: "var(--action-destructive-hover)",
+        "on-hover": "var(--action-destructive-on-hover)",
+        disabled: "var(--action-destructive-disabled)",
+        "on-disabled": "var(--action-destructive-on-disabled)",
       },
-    ],
-  },
-  width: {
-    authPageWidth: "370px",
-  },
-  keyframes: {
-    "accordion-down": {
-      from: { height: 0 },
-      to: { height: "var(--radix-accordion-content-height)" },
     },
-    "accordion-up": {
-      from: { height: "var(--radix-accordion-content-height)" },
-      to: { height: 0 },
+    background: {
+      primary: "var(--background-primary)",
+      secondary: "var(--background-secondary)",
+      tertiary: "var(--background-tertiary)",
+      hover: "var(--background-hover)",
+      selected: "var(--background-selected)",
+      overlay: "var(--background-overlay)",
     },
-  },
-  animation: {
-    "accordion-down": "accordion-down 0.2s ease-out",
-    "accordion-up": "accordion-up 0.2s ease-out",
-  },
-  colors: {
-    brand: {
-      50: "#e0fff2",
-      100: "#adf0d3",
-      200: "#8aeac1",
-      300: "#67e4ae",
-      400: "#45de9c",
-      500: "#26d489",
-      600: "#1da56a",
-      700: "#15754c",
-      800: "#0c452d",
-      900: "#04160e",
-    },
-    gray: {
-      50: "#fafafa",
-      100: "#f0f0f0",
-      200: "#d6d6d6",
-      300: "#bdbdbd",
-      400: "#a3a3a3",
-      500: "#8a8a8a",
-      600: "#6e6e6e",
-      700: "#525252",
-      800: "#363636",
-      900: "#1a1a1a",
-    },
-    green: {
-      50: "#f0f5f3",
-      100: "#e4f0ea",
-      200: "#bbead4",
-      300: "#7be4b3",
-      400: "#50de9c",
-      500: "#2fd487",
-      600: "#1ea566",
-      700: "#15754c",
-      800: "#0c452d",
-      900: "#04160e",
-    },
-    blue: {
-      50: "#f5f8fa",
-      100: "#e6f0f5",
-      200: "#d0eaf7",
-      300: "#b5e0f5",
-      400: "#7fc7eb",
-      500: "#4eb2e4",
-      600: "#3f98cc",
-      700: "#2b75ab",
-      800: "#1b5587",
-      900: "#0f3966",
-    },
-    red: {
-      50: "#f9dcdc",
-      100: "#f6cbcb",
-      200: "#f0a8a8",
-      300: "#ea8686",
-      400: "#e36363",
-      500: "#dd4040",
-      600: "#c32222",
-      700: "#931a1a",
-      800: "#641212",
-      900: "#340909",
-    },
-    orange: {
-      50: "#fef7ec",
-      100: "#fdecd4",
-      200: "#fad7a3",
-      300: "#f8c373",
-      400: "#f5ae42",
-      500: "#f39912",
-      600: "#c77c0a",
-      700: "#975e08",
-      800: "#663f05",
-      900: "#362103",
-    },
-    purple: {
-      50: "#f9f5fb",
-      100: "#f1e6f5",
-      200: "#e1c9ea",
-      300: "#d1acde",
-      400: "#bb84ce",
-      500: "#a55cbe",
-      600: "#8840a1",
-      700: "#663079",
-      800: "#442051",
-      900: "#231029",
-    },
-    "brand-purple": "#ab68ff",
-    presentation: "var(--presentation)",
-    "text-primary": "var(--text-primary)",
-    "text-secondary": "var(--text-secondary)",
-    "text-secondary-alt": "var(--text-secondary-alt)",
-    "text-tertiary": "var(--text-tertiary)",
-    "ring-primary": "var(--ring-primary)",
-    "header-primary": "var(--header-primary)",
-    "header-hover": "var(--header-hover)",
-    "header-button-hover": "var(--header-button-hover)",
-    "surface-active": "var(--surface-active)",
-    "surface-active-alt": "var(--surface-active-alt)",
-    "surface-hover": "var(--surface-hover)",
-    "surface-primary": "var(--surface-primary)",
-    "surface-primary-alt": "var(--surface-primary-alt)",
-    "surface-primary-contrast": "var(--surface-primary-contrast)",
-    "surface-secondary": "var(--surface-secondary)",
-    "surface-secondary-alt": "var(--surface-secondary-alt)",
-    "surface-tertiary": "var(--surface-tertiary)",
-    "surface-tertiary-alt": "var(--surface-tertiary-alt)",
-    "surface-dialog": "var(--surface-dialog)",
-    "surface-submit": "var(--surface-submit)",
-    "border-light": "var(--border-light)",
-    "border-medium": "var(--border-medium)",
-    "border-medium-alt": "var(--border-medium-alt)",
-    "border-heavy": "var(--border-heavy)",
-    "border-xheavy": "var(--border-xheavy)",
-    border: "hsl(var(--border))",
-    input: "hsl(var(--input))",
-    ["switch-unchecked"]: "hsl(var(--switch-unchecked))",
-    ring: "hsl(var(--ring))",
-    background: "hsl(var(--background))",
-    foreground: "hsl(var(--foreground))",
-    primary: {
-      DEFAULT: "hsl(var(--primary))",
-      foreground: "hsl(var(--primary-foreground))",
-    },
-    secondary: {
-      DEFAULT: "hsl(var(--secondary))",
-      foreground: "hsl(var(--secondary-foreground))",
-    },
-    destructive: {
-      DEFAULT: "hsl(var(--destructive))",
-      foreground: "hsl(var(--destructive-foreground))",
-    },
-    muted: {
-      DEFAULT: "hsl(var(--muted))",
-      foreground: "hsl(var(--muted-foreground))",
+    display: {
+      "on-light": {
+        primary: "var(--display-on-light-primary)",
+        secondary: "var(--display-on-light-secondary)",
+        tertiary: "var(--display-on-light-tertiary)",
+        quaternary: "var(--display-on-light-quaternary)",
+      },
+      "on-dark": {
+        primary: "var(--display-on-dark-primary)",
+        secondary: "var(--display-on-dark-secondary)",
+        tertiary: "var(--display-on-dark-tertiary)",
+        quaternary: "var(--display-on-dark-quaternary)",
+      },
     },
     accent: {
-      DEFAULT: "hsl(var(--accent))",
-      foreground: "hsl(var(--accent-foreground))",
+      "on-light": "var(--accent-on-light)",
+      "on-dark": "var(--accent-on-dark)",
+      "bg-light": "var(--accent-bg-light)",
+      "bg-lighter": "var(--accent-bg-lighter)",
     },
-    card: {
-      DEFAULT: "hsl(var(--card))",
-      foreground: "hsl(var(--card-foreground))",
+    divider: {
+      primary: "var(--divider-primary)",
+      secondary: "var(--divider-secondary)",
     },
-  },
-  borderRadius: {
-    lg: "8px",
-    md: "calc(8px - 2px)",
-    sm: "calc(8px - 4px)",
+    meta: {
+      green: "var(--meta-green)",
+      onGreen: "var(--meta-on-green)",
+      orange: "var(--meta-orange)",
+      onOrange: "var(--meta-on-orange)",
+      red: "var(--meta-red)",
+      onRed: "var(--meta-on-red)",
+      blue: "var(--meta-blue)",
+      onBlue: "var(--meta-on-blue)",
+      purple: "var(--meta-purple)",
+      onPurple: "var(--meta-on-purple)",
+    },
+    /* Legacy aliases */
+    "text-primary": "var(--display-on-light-primary)",
+    "text-secondary": "var(--display-on-light-secondary)",
+    "text-tertiary": "var(--display-on-light-tertiary)",
+    "surface-primary": "var(--background-primary)",
+    "surface-secondary": "var(--background-secondary)",
+    "surface-hover": "var(--background-secondary)",
+    "border-light": "var(--divider-primary)",
+    "border-medium": "var(--divider-secondary)",
   },
 };

package/src/theme-entry.ts

@@ -0,0 +1,2 @@
+export { theme as tailwindTheme } from "./tailwind-theme";
+export { theme } from "./tailwind-theme";

package/src/tokens/colors.ts

@@ -0,0 +1,82 @@
+/** AskChief rebrand color scales — sourced from Figma Style Guide */
+export const grey = {
+  50: "#fdfdfc",
+  100: "#f4f2ea",
+  200: "#e1ddce",
+  300: "#bfb9a5",
+  400: "#969080",
+  500: "#6e6960",
+  600: "#524e47",
+  700: "#3a3733",
+  800: "#312e2a",
+  900: "#262420",
+} as const;
+
+export const green = {
+  50: "#f5f8f2",
+  100: "#dde6d2",
+  200: "#c5d4b3",
+  300: "#a8bf8f",
+  400: "#7a9a5e",
+  500: "#5a7a42",
+  600: "#456332",
+  700: "#304624",
+  800: "#223018",
+  900: "#141c0e",
+} as const;
+
+export const blue = {
+  50: "#eef1f8",
+  100: "#dae0ef",
+  200: "#b8c4e0",
+  300: "#8fa3cc",
+  400: "#5274ae",
+  500: "#3a5d96",
+  600: "#154199",
+  700: "#103480",
+  800: "#0c2860",
+  900: "#081c42",
+} as const;
+
+export const red = {
+  50: "#faf3f1",
+  100: "#f0d3cc",
+  200: "#e4b0a5",
+  300: "#c97a6b",
+  400: "#b85a48",
+  500: "#a0392a",
+  600: "#802c20",
+  700: "#621f16",
+  800: "#45150f",
+  900: "#2a0c08",
+} as const;
+
+export const orange = {
+  50: "#faf1de",
+  100: "#f5e4c0",
+  200: "#efd49a",
+  300: "#e4bc6a",
+  400: "#d9a03e",
+  500: "#c48820",
+  600: "#8f6318",
+  700: "#5a3d0d",
+  800: "#3d2a09",
+  900: "#261a05",
+} as const;
+
+export const purple = {
+  50: "#f6f2f8",
+  100: "#e2d9e8",
+  200: "#cbbad6",
+  300: "#b09bc3",
+  400: "#957cb0",
+  500: "#7a5d9d",
+  600: "#5e4680",
+  700: "#3d2e4a",
+  800: "#2a2033",
+  900: "#18121c",
+} as const;
+
+export const white = "#ffffff";
+
+export const colorScales = { grey, green, blue, red, orange, purple } as const;