@dybo-ai/design 1.2.0 → 2.0.0

package/tokens.mjs

@@ -1,124 +1,124 @@
 // DYBO design tokens — flat, resolved values for programmatic use (JS/TS).
 // Source of truth: tokens.json. Keep in sync when tokens.json changes.
+//
+// `color` is HSL-channel triplets ("H S% L%", no hsl() wrapper) so values
+// compose the same way in JS as they do in CSS (`hsl(${color.light.card})`,
+// or with alpha `hsl(${color.light.card} / 0.7)`).
+
 export const color = {
-  brand: {
-    logo: "#1d335c",
-    blue: "#5878a7",
-    darkOrb: "#141927",
-    cultured: "#f3f6fa",
-    gainsboro: "#dbdfe5",
-    dandelion: "#e9d72f",
-  },
-  text: {
-    primary: "#0a1323",
-    secondary: "#f4f4f6",
-    muted: "#545f74",
-    gray: "#868686",
-  },
-  neutral: {
-    black: "#000000",
-    white: "#ffffff",
-    grayishBlue50: "#f4f4f6",
-    grayishBlue300: "#c2c7cf",
-    midnightSky300: "#e6e7f7",
-    midnightSky700: "#48495d",
-  },
-  surface: {
-    page: "#e6eaf0",
-    card: "rgba(240,241,244,0.70)",
-    cardSolid: "rgba(240,241,244,0.90)",
-    input: "rgba(244,244,246,0.70)",
+  light: {
+    background: "216 25% 92%",
+    foreground: "218 56% 9%",
+    card: "214 41% 97%",
+    cardForeground: "218 56% 9%",
+    popover: "0 0% 100%",
+    popoverForeground: "218 56% 9%",
+    primary: "218 56% 9%",
+    primaryForeground: "0 0% 100%",
+    secondary: "0 0% 100%",
+    secondaryForeground: "218 56% 9%",
+    muted: "216 16% 88%",
+    mutedForeground: "216 31% 50%",
+    accent: "219 52% 24%",
+    accentForeground: "214 41% 97%",
+    destructive: "355 95% 60%",
+    destructiveForeground: "0 0% 100%",
+    border: "0 0% 100%",
+    input: "240 14% 96%",
+    ring: "219 52% 24%",
+    success: "150 68% 74%",
+    successForeground: "218 56% 9%",
+    successBackground: "151 45% 89%",
+    warning: "30 100% 40%",
+    warningForeground: "218 56% 9%",
+    warningBackground: "30 100% 95%",
+    error: "30 100% 40%",
+    errorForeground: "0 0% 100%",
+    errorBackground: "30 100% 95%",
+    info: "216 31% 50%",
+    infoForeground: "218 56% 9%",
+    infoBackground: "216 31% 89%",
+    tagAmberBackground: "35 100% 95%",
+    tagAmberForeground: "30 100% 24%",
+    tagPurpleBackground: "269 100% 95%",
+    tagPurpleForeground: "273 67% 39%",
+    tagRedBackground: "355 100% 95%",
+    tagRedForeground: "353 78% 32%",
+    overlayScrim: "224 32% 12%",
+    brandDarkOrb: "224 32% 12%",
+    brandIndigo: "219 52% 24%",
+    brandBlueYonder: "216 31% 50%",
+    brandGainsboro: "216 16% 88%",
+    brandCultured: "214 41% 97%",
+    brandDandelion: "54 81% 55%",
+    brandBlack: "0 0% 0%",
+    brandWhite: "0 0% 100%",
+    operatorBackground: "0 0% 89.4%",
   },
-  line: { stroke: "#ffffff" },
-  semantic: {
-    success: { solid: "#20a156", bright: "#28ca6b", bg: "#eafbf1" },
-    warning: { solid: "#f16c24", bg: "#ffe5d8" },
-    danger: { solid: "#a21a17", bg: "#fffbfb" },
-  },
-  status: {
-    resolved: { fg: "#0399ae", bg: "#d3f7fc" },
-    highPriority: { fg: "#682a5d", bg: "#eee0ec" },
-    mediumPriority: { fg: "#f16c24", bg: "#ffe5d8" },
-    brand: { fg: "#0a1323", bg: "#d0d3fe" },
+  dark: {
+    background: "218 56% 9%",
+    foreground: "244 20% 96%",
+    card: "218 35% 13%",
+    cardForeground: "244 20% 96%",
+    popover: "218 15% 12%",
+    popoverForeground: "244 20% 96%",
+    primary: "244 20% 96%",
+    primaryForeground: "218 56% 9%",
+    secondary: "218 35% 13%",
+    secondaryForeground: "244 20% 96%",
+    muted: "210 15% 30%",
+    mutedForeground: "244 20% 80%",
+    accent: "216 31% 50%",
+    accentForeground: "244 20% 96%",
+    destructive: "0 78% 55%",
+    destructiveForeground: "244 20% 96%",
+    border: "210 15% 30%",
+    input: "218 35% 13%",
+    ring: "244 20% 96%",
+    successBackground: "150 68% 26%",
+    warningBackground: "30 100% 22%",
+    errorBackground: "30 100% 22%",
+    infoBackground: "216 31% 28%",
+    tagAmberBackground: "37 64% 18%",
+    tagAmberForeground: "34 100% 83%",
+    tagPurpleBackground: "274 53% 22%",
+    tagPurpleForeground: "269 100% 92%",
+    tagRedBackground: "352 63% 18%",
+    tagRedForeground: "354 100% 88%",
   },
 };
 
-export const portal = {
-  surface: {
-    operatorPage: "#e4e4e4",
-    cardHighOpacity: "rgba(240,241,244,0.92)",
-    cardHighOpacityDark: "rgba(18,26,45,0.92)",
-  },
-  shadow: {
-    level1: "0px 4px 8px #1419271f",
-    level2: "0px 8px 28px #14192729",
-  },
-  feedback: {
-    successLight: "#90eabd",
-    successBackground: "#d6f0e3",
-    warningSolid: "#cc6600",
-    warningBackground: "#fff2e5",
-    destructiveBright: "#fa3848",
-    infoBackground: "#d9e3f0",
-  },
-  priority: {
-    urgent: {
-      bg: "rgba(250,56,72,0.12)",
-      fg: "#c81e2c",
-      darkBg: "rgba(230,57,57,0.22)",
-      darkFg: "#f9a0a0",
-    },
-    high: {
-      bg: "rgba(255,128,0,0.15)",
-      fg: "#a85400",
-      darkBg: "rgba(230,115,0,0.22)",
-      darkFg: "#ffb366",
-    },
-    medium: {
-      bg: "rgba(242,185,13,0.20)",
-      fg: "#9d6607",
-      darkBg: "rgba(242,185,13,0.16)",
-      darkFg: "#f5d56a",
-    },
-    low: {
-      bg: "rgba(151,163,180,0.24)",
-      fg: "#50627c",
-      darkBg: "rgba(140,155,175,0.20)",
-      darkFg: "#b8c4d4",
-    },
-    none: {
-      bg: "rgba(192,198,206,0.35)",
-      fg: "#677283",
-      darkBg: "rgba(115,125,140,0.25)",
-      darkFg: "#b0b8c4",
-    },
-  },
-  ticketStatus: {
-    open: {
-      bg: "#d9e3f2",
-      fg: "#2e5b9e",
-      darkBg: "#2a3d52",
-      darkFg: "#a8c4e8",
-    },
-    pending: {
-      bg: "#e9dff6",
-      fg: "#7146aa",
-      darkBg: "#3d2f4d",
-      darkFg: "#d4b8f0",
-    },
-    snoozed: {
-      bg: "#d7dde5",
-      fg: "#58687e",
-      darkBg: "#3a424c",
-      darkFg: "#b8c4d4",
-    },
-    resolved: {
-      bg: "#d6f0e3",
-      fg: "#1a6640",
-      darkBg: "#1f4a32",
-      darkFg: "#a8e0c0",
-    },
-  },
+export const priority = {
+  urgent: { bg: "355 95% 60% / 0.12", fg: "355 74% 45%", darkBg: "0 78% 55% / 0.22", darkFg: "0 90% 78%" },
+  high: { bg: "30 100% 50% / 0.15", fg: "30 100% 33%", darkBg: "30 100% 45% / 0.22", darkFg: "30 100% 72%" },
+  medium: { bg: "45 90% 50% / 0.20", fg: "38 92% 32%", darkBg: "45 90% 50% / 0.16", darkFg: "45 92% 70%" },
+  low: { bg: "216 16% 65% / 0.24", fg: "216 22% 40%", darkBg: "216 20% 60% / 0.20", darkFg: "216 25% 82%" },
+  none: { bg: "216 12% 78% / 0.35", fg: "216 12% 46%", darkBg: "216 12% 50% / 0.25", darkFg: "216 15% 75%" },
+};
+
+export const ticketStatus = {
+  open: { bg: "216 48% 90%", fg: "216 55% 40%", darkBg: "216 40% 26%", darkFg: "216 60% 82%" },
+  pending: { bg: "266 55% 92%", fg: "266 42% 47%", darkBg: "266 32% 30%", darkFg: "266 60% 85%" },
+  snoozed: { bg: "215 22% 87%", fg: "215 18% 42%", darkBg: "215 18% 30%", darkFg: "215 25% 80%" },
+  resolved: { bg: "151 45% 89%", fg: "150 60% 25%", darkBg: "150 45% 22%", darkFg: "150 60% 80%" },
+};
+
+export const surface = {
+  operatorPage: "0 0% 89.4%",
+  cardHighOpacity: "rgba(240,241,244,0.92)",
+  cardHighOpacityDark: "rgba(18,26,45,0.92)",
+  drawerBackdrop: "224 32% 12% / 0.3",
+};
+
+export const feedback = {
+  successBackground: "151 45% 89%",
+  warningBackground: "30 100% 95%",
+  infoBackground: "216 31% 89%",
+};
+
+export const shadow = {
+  level1: "0px 4px 8px #1419271f",
+  level2: "0px 8px 28px #14192729",
 };
 
 export const font = {
@@ -130,7 +130,7 @@ export const fontSize = { xs: 12, sm: 14, md: 16, lg: 18, xl: 24 };
 
 export const space = { 0: 0, 50: 4, 100: 8, 150: 12, 200: 16, 250: 20, 400: 32 };
 
-export const radius = { small: 12, alt: 16, medium: 20, full: 999 };
+export const radius = { none: 0, small: 12, alt: 16, medium: 20, full: 999 };
 
 export const opacity = {
   light: 0.16,
@@ -140,24 +140,99 @@ export const opacity = {
   semiTransparent: 0.08,
 };
 
-export const shadow = {
-  card: "0 8px 24px rgba(10,19,35,0.10), 0 2px 8px rgba(170,180,192,0.35)",
-  drop: "0 4px 4px rgba(10,19,35,0.10)",
-  portalLevel1: "0px 4px 8px #1419271f",
-  portalLevel2: "0px 8px 28px #14192729",
-};
-
 export const effect = { glassBlur: 4 };
 
+/** @deprecated promoted to root in 2.0.0 — same objects, kept one major version. */
+export const portal = { surface, shadow, feedback, priority, ticketStatus };
+
+/** @deprecated superseded by `color`/`font`/etc. above — the pre-2.0 default system. */
+export const legacy = {
+  color: {
+    brand: {
+      logo: "#1d335c",
+      blue: "#5878a7",
+      darkOrb: "#141927",
+      cultured: "#f3f6fa",
+      gainsboro: "#dbdfe5",
+      dandelion: "#e9d72f",
+    },
+    text: {
+      primary: "#0a1323",
+      secondary: "#f4f4f6",
+      muted: "#545f74",
+      gray: "#868686",
+    },
+    neutral: {
+      black: "#000000",
+      white: "#ffffff",
+      grayishBlue50: "#f4f4f6",
+      grayishBlue300: "#c2c7cf",
+      midnightSky300: "#e6e7f7",
+      midnightSky700: "#48495d",
+    },
+    surface: {
+      page: "#e6eaf0",
+      card: "rgba(240,241,244,0.70)",
+      cardSolid: "rgba(240,241,244,0.90)",
+      input: "rgba(244,244,246,0.70)",
+    },
+    line: { stroke: "#ffffff" },
+    semantic: {
+      success: { solid: "#20a156", bright: "#28ca6b", bg: "#eafbf1" },
+      warning: { solid: "#f16c24", bg: "#ffe5d8" },
+      danger: { solid: "#a21a17", bg: "#fffbfb" },
+    },
+    status: {
+      resolved: { fg: "#0399ae", bg: "#d3f7fc" },
+      highPriority: { fg: "#682a5d", bg: "#eee0ec" },
+      mediumPriority: { fg: "#f16c24", bg: "#ffe5d8" },
+      brand: { fg: "#0a1323", bg: "#d0d3fe" },
+    },
+  },
+  typography: {
+    mediumTitle: { family: "Urbanist", weight: 400, size: 24, lineHeight: 1.35, letterSpacing: 1 },
+    subtitle: { family: "Urbanist", weight: 400, size: 18, lineHeight: 1.35, letterSpacing: 1 },
+    bodyText: { family: "Urbanist", weight: 500, size: 16, lineHeight: 1.5, letterSpacing: 0 },
+    link: { family: "Urbanist", weight: 500, size: 16, lineHeight: 1.5, letterSpacing: 1 },
+    smallBodyText: { family: "Urbanist", weight: 500, size: 14, lineHeight: 1.15, letterSpacing: 0 },
+    smallLink: { family: "Urbanist", weight: 700, size: 14, lineHeight: 1.5, letterSpacing: 0 },
+    headingH6Semibold: { family: "Urbanist", weight: 600, size: 14, lineHeight: 1.5, letterSpacing: 1 },
+    headingH6Regular: { family: "Urbanist", weight: 400, size: 14, lineHeight: 1.5, letterSpacing: 1 },
+    placeholder: { family: "Urbanist", weight: 400, size: 14, lineHeight: 1.7, letterSpacing: 1 },
+    tinySemibold: { family: "Urbanist", weight: 600, size: 12, lineHeight: 1.5, letterSpacing: 1 },
+    uppercase: { family: "Urbanist", weight: 500, size: 12, lineHeight: 1.35, letterSpacing: 1, textTransform: "uppercase" },
+  },
+  shadow: {
+    card: "0 8px 24px rgba(10,19,35,0.10), 0 2px 8px rgba(170,180,192,0.35)",
+    drop: "0 4px 4px rgba(10,19,35,0.10)",
+  },
+  effect: { dropShadow: "0 4px 4px rgba(10,19,35,0.10)" },
+  component: {
+    button: {
+      primary: { bg: "#0a1323", text: "#ffffff", radius: 12, paddingY: 12, paddingX: 32 },
+      secondary: { bg: "#f4f4f6", text: "#0a1323", radius: 12, paddingY: 12, paddingX: 32 },
+    },
+    input: {
+      bg: "rgba(244,244,246,0.70)", border: "1px solid #ffffff", radius: 12,
+      shadow: "0 4px 4px rgba(10,19,35,0.10)", text: "#0a1323",
+    },
+  },
+};
+
 export const tokens = {
   color,
-  portal,
+  priority,
+  ticketStatus,
+  surface,
+  feedback,
+  shadow,
   font,
   fontSize,
   space,
   radius,
   opacity,
-  shadow,
   effect,
+  portal,
+  legacy,
 };
 export default tokens;