@dybo-ai/design 1.1.0 → 1.2.0

package/tokens.json

@@ -15,7 +15,8 @@
       "blueYonder":  { "value": "#5878a7", "figmaName": "Brand Colors/Blue Yonder", "desc": "Primary blue accent" },
       "darkOrb":     { "value": "#141927", "figmaName": "Brand Colors/Dark Orb", "desc": "Near-black brand shade" },
       "cultured":    { "value": "#f3f6fa", "figmaName": "Brand Colors/Cultured", "desc": "Lightest brand tint" },
-      "gainsboro":   { "value": "#dbdfe5", "figmaName": "Brand Colors/Gainsboro", "desc": "Light neutral brand tint" }
+      "gainsboro":   { "value": "#dbdfe5", "figmaName": "Brand Colors/Gainsboro", "desc": "Light neutral brand tint" },
+      "dandelion":   { "value": "#e9d72f", "figmaName": "Brand Colors/Dandelion (portal)", "desc": "Yellow accent — client portal / ticket prototype" }
     },
     "text": {
       "primary":   { "value": "#0a1323", "figmaName": "Primary Color / Title / Brand - DYBO", "desc": "Primary text & headings (navy near-black)" },
@@ -106,7 +107,78 @@
   "opacity": {
     "light":   { "value": 0.16, "figmaName": "Appearance/Opacity Level/Light" },
     "medium":  { "value": 0.32, "figmaName": "Appearance/Opacity Level/Medium" },
-    "intense": { "value": 0.64, "figmaName": "Appearance/Opacity Level/Intense" }
+    "intense": { "value": 0.64, "figmaName": "Appearance/Opacity Level/Intense" },
+    "semiOpaque":      { "value": 0.40, "figmaName": "Portal — disabled state" },
+    "semiTransparent": { "value": 0.08, "figmaName": "Portal — subtle overlay" }
+  },
+
+  "portal": {
+    "$source": "ticket-management-export/client/tokens.css + operator/index.html badge CSS",
+    "surface": {
+      "operatorPage":      { "value": "#e4e4e4", "desc": "Operator screens background override" },
+      "cardHighOpacity":   { "value": "rgba(240,241,244,0.92)", "desc": "Upload zones, dense panels" },
+      "cardHighOpacityDark": { "value": "rgba(18,26,45,0.92)", "desc": "Dark mode dense panel" }
+    },
+    "shadow": {
+      "level1": { "value": "0px 4px 8px #1419271f", "desc": "Cards, sidebar pill" },
+      "level2": { "value": "0px 8px 28px #14192729", "desc": "Modals, toasts" }
+    },
+    "feedback": {
+      "successLight":      { "value": "#90eabd", "desc": "Portal success tint (lighter than semantic.success)" },
+      "successBackground": { "value": "#d6f0e3", "desc": "hsl(151 45% 89%)" },
+      "warningSolid":      { "value": "#cc6600", "desc": "Portal warning/error — Figma Feedback/Error orange" },
+      "warningBackground": { "value": "#fff2e5", "desc": "hsl(30 100% 95%)" },
+      "destructiveBright": { "value": "#fa3848", "desc": "Portal destructive — bright red for UI actions" },
+      "infoBackground":    { "value": "#d9e3f0", "desc": "hsl(216 31% 89%)" }
+    },
+    "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" }
+    },
+    "hsl": {
+      "$note": "Shadcn-style HSL components for portal-tokens.css drop-in. Format: 'H S% L%' (no hsl() wrapper).",
+      "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%",
+        "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%"
+      },
+      "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%"
+      }
+    }
   },
 
   "border": {

package/tokens.mjs

@@ -1,10 +1,34 @@
 // DYBO design tokens — flat, resolved values for programmatic use (JS/TS).
 // Source of truth: tokens.json. Keep in sync when tokens.json changes.
 export const color = {
-  brand: { logo: "#1d335c", blue: "#5878a7", darkOrb: "#141927", cultured: "#f3f6fa", gainsboro: "#dbdfe5" },
-  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)" },
+  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" },
@@ -19,7 +43,88 @@ export const color = {
   },
 };
 
-export const font = { family: "Urbanist, sans-serif", weight: { regular: 400, medium: 500, semibold: 600, bold: 700 } };
+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 font = {
+  family: "Urbanist, sans-serif",
+  weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
+};
 
 export const fontSize = { xs: 12, sm: 14, md: 16, lg: 18, xl: 24 };
 
@@ -27,14 +132,32 @@ 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 opacity = { light: 0.16, medium: 0.32, intense: 0.64 };
+export const opacity = {
+  light: 0.16,
+  medium: 0.32,
+  intense: 0.64,
+  semiOpaque: 0.4,
+  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 };
 
-export const tokens = { color, font, fontSize, space, radius, opacity, shadow, effect };
+export const tokens = {
+  color,
+  portal,
+  font,
+  fontSize,
+  space,
+  radius,
+  opacity,
+  shadow,
+  effect,
+};
 export default tokens;