@david-richard/notify-ds 1.0.0

package/tokens.json

@@ -0,0 +1,285 @@
+{
+  "$schema": "https://tr.designtokens.org/format/",
+  "$metadata": {
+    "product": "Qu Notify",
+    "version": "1.0.0",
+    "format": "W3C DTCG",
+    "tiers": "primitives → semantic → component"
+  },
+
+  "primitive": {
+
+    "color": {
+      "brand": {
+        "tech-blue":    { "$value": "#40CCF2", "$type": "color", "$description": "Primary CTA: active buttons, input focus, checkboxes, filter active states. Never use as large background fill." },
+        "teal":         { "$value": "#339FB8", "$type": "color", "$description": "Secondary interactive: secondary button outline/text, link text, action labels, check numbers." },
+        "red":          { "$value": "#EF2149", "$type": "color", "$description": "Error borders, error text, required asterisk, toast background. Also 'Beyond Red' brand color." },
+        "confidence":   { "$value": "#B4002F", "$type": "color", "$description": "Strong destructive — reserved." },
+        "stable-blue":  { "$value": "#0D2A4B", "$type": "color", "$description": "Reserved — Kitchen Intelligence dark gradient anchor." },
+        "quick-serve":  { "$value": "#E4ECEF", "$type": "color", "$description": "Reserved." },
+        "gray-300":     { "$value": "#6B7280", "$type": "color", "$description": "Secondary/inactive text, helper text, unselected nav labels." }
+      },
+      "neutral": {
+        "black":        { "$value": "#000000", "$type": "color", "$description": "Primary text, selected tab/nav fill, metric values." },
+        "near-black":   { "$value": "#0A0A0A", "$type": "color", "$description": "Reserved." },
+        "white":        { "$value": "#FFFFFF", "$type": "color", "$description": "Card/tile backgrounds, selected-state text." },
+        "gray-50":      { "$value": "#F4F4F4", "$type": "color", "$description": "App screen background. Always use for page-level background." },
+        "gray-100":     { "$value": "#DEDEDE", "$type": "color", "$description": "Inactive button bg, tab/switcher container bg, disabled surfaces." },
+        "gray-200":     { "$value": "#C9C9C9", "$type": "color", "$description": "Input field border (normal), disabled borders." },
+        "gray-400":     { "$value": "#B1B1B1", "$type": "color", "$description": "Placeholder text, captions." }
+      },
+      "accent": {
+        "green":        { "$value": "#16A34A", "$type": "color", "$description": "Success foreground." },
+        "green-soft":   { "$value": "#B3F5D1", "$type": "color", "$description": "Success background tint (Mint)." },
+        "green-vivid":  { "$value": "#00C16A", "$type": "color", "$description": "Vivid success (Confirmed)." },
+        "blue":         { "$value": "#2F80ED", "$type": "color", "$description": "Link color, info foreground." },
+        "blue-soft":    { "$value": "#BEDBFF", "$type": "color", "$description": "Info background tint (Mist)." },
+        "red-soft":     { "$value": "#FFC9C9", "$type": "color", "$description": "Error background tint (Rose)." },
+        "yellow":       { "$value": "#EDC948", "$type": "color", "$description": "Warning foreground." },
+        "yellow-soft":  { "$value": "#FFF085", "$type": "color", "$description": "Warning background tint (Pollen)." },
+        "orange":       { "$value": "#FA6A0A", "$type": "color", "$description": "Alert foreground." },
+        "orange-soft":  { "$value": "#EAC1C3", "$type": "color", "$description": "Alert background tint (Peel)." }
+      }
+    },
+
+    "radius": {
+      "xs":   { "$value": "2px",    "$type": "dimension", "$description": "Subtle rounding." },
+      "sm":   { "$value": "4px",    "$type": "dimension" },
+      "md":   { "$value": "6px",    "$type": "dimension", "$description": "Icon-only button corners." },
+      "lg":   { "$value": "8px",    "$type": "dimension", "$description": "Switcher container and segments." },
+      "xl":   { "$value": "12px",   "$type": "dimension", "$description": "Filters, selectors." },
+      "2xl":  { "$value": "16px",   "$type": "dimension", "$description": "Metric tiles, nav icon labels." },
+      "3xl":  { "$value": "24px",   "$type": "dimension", "$description": "Modals, card containers." },
+      "menu": { "$value": "60px",   "$type": "dimension", "$description": "Menu bottom sheet, bottom nav pill." },
+      "full": { "$value": "9999px", "$type": "dimension", "$description": "Inputs, buttons, pills, tags, selectors, bottom nav." }
+    },
+
+    "spacing": {
+      "xs":   { "$value": "4px",  "$type": "dimension" },
+      "sm":   { "$value": "8px",  "$type": "dimension" },
+      "md":   { "$value": "10px", "$type": "dimension", "$description": "Compact UI exception." },
+      "lg":   { "$value": "16px", "$type": "dimension", "$description": "Standard horizontal screen padding." },
+      "xl":   { "$value": "18px", "$type": "dimension" },
+      "2xl":  { "$value": "22px", "$type": "dimension" },
+      "3xl":  { "$value": "24px", "$type": "dimension" },
+      "4xl":  { "$value": "26px", "$type": "dimension" },
+      "5xl":  { "$value": "30px", "$type": "dimension" },
+      "6xl":  { "$value": "40px", "$type": "dimension" },
+      "7xl":  { "$value": "48px", "$type": "dimension" },
+      "8xl":  { "$value": "60px", "$type": "dimension" }
+    },
+
+    "font-family": {
+      "primary":   { "$value": "Inter, system-ui, sans-serif",                          "$type": "fontFamily", "$description": "Body, data labels, metric values, buttons." },
+      "secondary": { "$value": "'Red Hat Text', 'Red Hat Display', system-ui, sans-serif", "$type": "fontFamily", "$description": "Page headers, input labels, button labels, uppercase section titles." },
+      "display":   { "$value": "'Zilla Slab', Georgia, serif",                          "$type": "fontFamily", "$description": "Display headings, pull quotes, splash screen. NEVER body copy." },
+      "system":    { "$value": "-apple-system, 'SF Pro', system-ui, sans-serif",        "$type": "fontFamily", "$description": "iOS-native contexts only (status bar, system dialogs)." }
+    },
+
+    "font-size": {
+      "2xs":   { "$value": "10px", "$type": "dimension", "$description": "Nav item labels." },
+      "xs":    { "$value": "12px", "$type": "dimension", "$description": "Help text, pills, tag labels, captions." },
+      "sm":    { "$value": "14px", "$type": "dimension", "$description": "Filters, tabs, table items, small buttons, menu items." },
+      "md":    { "$value": "16px", "$type": "dimension", "$description": "Body text, placeholder text." },
+      "lg":    { "$value": "18px", "$type": "dimension", "$description": "Page headers, input labels, medium buttons." },
+      "xl":    { "$value": "20px", "$type": "dimension", "$description": "Rarely used in app." },
+      "2xl":   { "$value": "24px", "$type": "dimension", "$description": "Metric tile values, login headers." },
+      "3xl":   { "$value": "26px", "$type": "dimension", "$description": "Modal headers." },
+      "4xl":   { "$value": "30px", "$type": "dimension", "$description": "Rarely used." },
+      "5xl":   { "$value": "34px", "$type": "dimension", "$description": "Day-part selector (Kitchen Intelligence)." },
+      "6xl":   { "$value": "40px", "$type": "dimension", "$description": "Display." },
+      "7xl":   { "$value": "72px", "$type": "dimension", "$description": "Kitchen Intelligence score." }
+    },
+
+    "font-weight": {
+      "light":      { "$value": 300, "$type": "fontWeight" },
+      "normal":     { "$value": 400, "$type": "fontWeight" },
+      "medium":     { "$value": 500, "$type": "fontWeight" },
+      "semibold":   { "$value": 600, "$type": "fontWeight" },
+      "bold":       { "$value": 700, "$type": "fontWeight" },
+      "extrabold":  { "$value": 800, "$type": "fontWeight" }
+    },
+
+    "shadow": {
+      "card":   { "$value": "0px 4px 4px 0px rgba(0,0,0,0.06)",  "$type": "shadow", "$description": "Metric tiles, data cards." },
+      "nav":    { "$value": "0px 4px 4px 0px rgba(0,0,0,0.14)",  "$type": "shadow", "$description": "Bottom nav pill." },
+      "modal":  { "$value": "0px 4px 4px 0px rgba(0,0,0,0.25)",  "$type": "shadow", "$description": "Modal sheets." }
+    },
+
+    "gradient": {
+      "ki-bg":          { "$value": "linear-gradient(180deg, #252934 0%, #16171A 100%)", "$type": "color",      "$description": "Kitchen Intelligence dark background." },
+      "nav-glass":      { "$value": "linear-gradient(180deg, rgba(220,220,220,0.2) 0%, rgba(118,118,118,0.2) 87%)", "$type": "color", "$description": "Bottom nav glass pill fill." },
+      "glass":          { "$value": "linear-gradient(180deg, rgba(255,255,255,0.10) 10%, rgba(153,153,153,0.10) 100%)", "$type": "color", "$description": "Menu/modal glass overlay." },
+      "brand-divider":  { "$value": "linear-gradient(90deg, #40CCF2 0%, #EF2149 100%)", "$type": "color",      "$description": "Brand accent divider line." }
+    },
+
+    "opacity": {
+      "disabled": { "$value": 0.5, "$type": "number", "$description": "Applied to entire component when disabled. Color values underneath do not change." }
+    },
+
+    "duration": {
+      "fast":   { "$value": "120ms", "$type": "duration", "$description": "Color transitions, hover states." },
+      "medium": { "$value": "180ms", "$type": "duration", "$description": "Toggle slide, tab selection." }
+    },
+
+    "easing": {
+      "standard": { "$value": "cubic-bezier(0.2, 0, 0, 1)", "$type": "cubicBezier" }
+    }
+  },
+
+  "semantic": {
+
+    "color": {
+      "background":          { "$value": "{primitive.color.neutral.white}",    "$type": "color", "$description": "Card and sheet backgrounds." },
+      "background-app":      { "$value": "{primitive.color.neutral.gray-50}",  "$type": "color", "$description": "App screen background. Always gray-50, never white at page level." },
+      "foreground":          { "$value": "{primitive.color.neutral.black}",    "$type": "color" },
+      "muted":               { "$value": "{primitive.color.neutral.gray-50}",  "$type": "color" },
+      "muted-foreground":    { "$value": "{primitive.color.brand.gray-300}",   "$type": "color" },
+      "border":              { "$value": "{primitive.color.neutral.gray-200}", "$type": "color", "$description": "Default input border, card dividers." },
+      "ring":                { "$value": "{primitive.color.brand.tech-blue}",  "$type": "color", "$description": "Focus ring." },
+
+      "primary":             { "$value": "{primitive.color.brand.tech-blue}",  "$type": "color", "$description": "Primary CTA button fill, context selector fill." },
+      "primary-foreground":  { "$value": "{primitive.color.neutral.black}",    "$type": "color", "$description": "Text on cyan background." },
+      "primary-hover":       { "$value": "{primitive.color.brand.teal}",       "$type": "color" },
+      "primary-pressed":     { "$value": "{primitive.color.brand.stable-blue}","$type": "color" },
+
+      "secondary-border":    { "$value": "{primitive.color.brand.teal}",       "$type": "color" },
+      "secondary-foreground":{ "$value": "{primitive.color.brand.teal}",       "$type": "color" },
+      "secondary-hover":     { "$value": "rgba(51,159,184,0.08)",              "$type": "color" },
+      "secondary-pressed":   { "$value": "rgba(51,159,184,0.16)",              "$type": "color" },
+
+      "tertiary-foreground": { "$value": "{primitive.color.brand.teal}",       "$type": "color" },
+      "tertiary-hover":      { "$value": "rgba(51,159,184,0.06)",              "$type": "color" },
+
+      "link":                { "$value": "{primitive.color.accent.blue}",      "$type": "color" },
+
+      "nav-selected":        { "$value": "{primitive.color.neutral.black}",    "$type": "color", "$description": "Tab/nav selected-state fill. Distinct from primary CTA (cyan)." },
+      "nav-selected-text":   { "$value": "{primitive.color.neutral.white}",    "$type": "color" },
+
+      "inactive":            { "$value": "{primitive.color.neutral.gray-100}", "$type": "color" },
+      "inactive-foreground": { "$value": "{primitive.color.brand.gray-300}",   "$type": "color" },
+      "inactive-border":     { "$value": "{primitive.color.neutral.gray-200}", "$type": "color" },
+
+      "destructive":         { "$value": "{primitive.color.brand.red}",        "$type": "color" },
+      "destructive-strong":  { "$value": "{primitive.color.brand.confidence}", "$type": "color" },
+
+      "success":             { "$value": "{primitive.color.accent.green}",     "$type": "color" },
+      "success-soft":        { "$value": "{primitive.color.accent.green-soft}","$type": "color" },
+      "info":                { "$value": "{primitive.color.accent.blue}",      "$type": "color" },
+      "info-soft":           { "$value": "{primitive.color.accent.blue-soft}", "$type": "color" },
+      "error":               { "$value": "{primitive.color.brand.red}",        "$type": "color" },
+      "error-soft":          { "$value": "{primitive.color.accent.red-soft}",  "$type": "color" },
+      "warning":             { "$value": "{primitive.color.accent.yellow}",    "$type": "color" },
+      "warning-soft":        { "$value": "{primitive.color.accent.yellow-soft}","$type": "color" },
+      "alert":               { "$value": "{primitive.color.accent.orange}",    "$type": "color" },
+      "alert-soft":          { "$value": "{primitive.color.accent.orange-soft}","$type": "color" },
+
+      "text-primary":        { "$value": "{primitive.color.neutral.black}",    "$type": "color" },
+      "text-secondary":      { "$value": "{primitive.color.brand.gray-300}",   "$type": "color" },
+      "text-tertiary":       { "$value": "{primitive.color.brand.gray-300}",   "$type": "color" },
+      "text-disabled":       { "$value": "{primitive.color.neutral.gray-400}", "$type": "color" },
+      "text-inverse":        { "$value": "{primitive.color.neutral.white}",    "$type": "color" },
+      "text-on-brand":       { "$value": "{primitive.color.neutral.black}",    "$type": "color", "$description": "Text on cyan background." },
+
+      "input-border":        { "$value": "{primitive.color.neutral.gray-200}", "$type": "color" },
+      "input-border-active": { "$value": "{primitive.color.brand.tech-blue}",  "$type": "color" },
+      "input-border-error":  { "$value": "{primitive.color.brand.red}",        "$type": "color" },
+      "input-bg":            { "$value": "{primitive.color.neutral.white}",    "$type": "color" },
+      "input-bg-disabled":   { "$value": "{primitive.color.neutral.gray-50}",  "$type": "color" },
+      "input-placeholder":   { "$value": "{primitive.color.neutral.gray-400}", "$type": "color" },
+      "input-icon":          { "$value": "{primitive.color.neutral.gray-400}", "$type": "color" },
+      "input-icon-active":   { "$value": "{primitive.color.brand.tech-blue}",  "$type": "color" },
+      "input-icon-error":    { "$value": "{primitive.color.brand.red}",        "$type": "color" }
+    }
+  },
+
+  "component": {
+
+    "button": {
+      "radius":       { "$value": "{primitive.radius.full}", "$type": "dimension" },
+      "icon-radius":  { "$value": "{primitive.radius.md}",   "$type": "dimension", "$description": "Icon-only square button corners." },
+      "font-family":  { "$value": "{primitive.font-family.secondary}", "$type": "fontFamily" },
+      "font-weight":  { "$value": "{primitive.font-weight.medium}",    "$type": "fontWeight" },
+      "xsm": {
+        "height":     { "$value": "24px", "$type": "dimension" },
+        "padding-x":  { "$value": "12px", "$type": "dimension" },
+        "gap":        { "$value": "4px",  "$type": "dimension" },
+        "font-size":  { "$value": "{primitive.font-size.xs}", "$type": "dimension" }
+      },
+      "sm": {
+        "height":     { "$value": "32px", "$type": "dimension" },
+        "padding-x":  { "$value": "14px", "$type": "dimension" },
+        "gap":        { "$value": "6px",  "$type": "dimension" },
+        "font-size":  { "$value": "{primitive.font-size.sm}", "$type": "dimension" }
+      },
+      "md": {
+        "height":     { "$value": "40px", "$type": "dimension" },
+        "padding-x":  { "$value": "16px", "$type": "dimension" },
+        "gap":        { "$value": "8px",  "$type": "dimension" },
+        "font-size":  { "$value": "{primitive.font-size.sm}", "$type": "dimension" }
+      },
+      "lg": {
+        "height":     { "$value": "48px", "$type": "dimension" },
+        "padding-x":  { "$value": "20px", "$type": "dimension" },
+        "gap":        { "$value": "8px",  "$type": "dimension" },
+        "font-size":  { "$value": "{primitive.font-size.md}", "$type": "dimension" }
+      }
+    },
+
+    "input": {
+      "height":       { "$value": "48px",                        "$type": "dimension" },
+      "radius":       { "$value": "{primitive.radius.full}",     "$type": "dimension" },
+      "padding-x":    { "$value": "16px",                        "$type": "dimension" },
+      "border-width": { "$value": "1.5px",                       "$type": "dimension" },
+      "font-family":  { "$value": "{primitive.font-family.primary}", "$type": "fontFamily" },
+      "font-size":    { "$value": "{primitive.font-size.md}",    "$type": "dimension" },
+      "font-weight":  { "$value": "{primitive.font-weight.normal}", "$type": "fontWeight" },
+      "label-font-family": { "$value": "{primitive.font-family.secondary}", "$type": "fontFamily" },
+      "label-font-size":   { "$value": "{primitive.font-size.lg}", "$type": "dimension" },
+      "label-font-weight": { "$value": "{primitive.font-weight.medium}", "$type": "fontWeight" }
+    },
+
+    "tile": {
+      "radius":       { "$value": "{primitive.radius.2xl}",      "$type": "dimension" },
+      "padding":      { "$value": "16px",                        "$type": "dimension" },
+      "shadow":       { "$value": "{primitive.shadow.card}",     "$type": "shadow" },
+      "background":   { "$value": "{semantic.color.background}", "$type": "color" }
+    },
+
+    "bottom-nav": {
+      "height":       { "$value": "72px",                        "$type": "dimension" },
+      "radius":       { "$value": "{primitive.radius.menu}",     "$type": "dimension" },
+      "max-width":    { "$value": "360px",                       "$type": "dimension" },
+      "shadow":       { "$value": "{primitive.shadow.nav}",      "$type": "shadow" },
+      "item-font-size":    { "$value": "{primitive.font-size.2xs}", "$type": "dimension" },
+      "item-font-selected":{ "$value": "{primitive.font-weight.semibold}", "$type": "fontWeight" }
+    },
+
+    "tab-bar": {
+      "radius":        { "$value": "{primitive.radius.full}",    "$type": "dimension" },
+      "padding":       { "$value": "4px",                        "$type": "dimension" },
+      "tab-radius":    { "$value": "{primitive.radius.full}",    "$type": "dimension" },
+      "tab-padding-x": { "$value": "16px",                       "$type": "dimension" },
+      "tab-padding-y": { "$value": "7px",                        "$type": "dimension" },
+      "font-size":     { "$value": "{primitive.font-size.sm}",   "$type": "dimension" },
+      "font-weight":   { "$value": "{primitive.font-weight.medium}", "$type": "fontWeight" }
+    },
+
+    "switcher": {
+      "radius":        { "$value": "{primitive.radius.lg}",      "$type": "dimension" },
+      "padding":       { "$value": "3px",                        "$type": "dimension" },
+      "segment-radius":{ "$value": "{primitive.radius.md}",      "$type": "dimension" },
+      "font-size":     { "$value": "{primitive.font-size.sm}",   "$type": "dimension" },
+      "font-weight":   { "$value": "{primitive.font-weight.medium}", "$type": "fontWeight" }
+    },
+
+    "selector": {
+      "radius":        { "$value": "{primitive.radius.full}",    "$type": "dimension" },
+      "padding-x":     { "$value": "14px",                       "$type": "dimension" },
+      "padding-y":     { "$value": "8px",                        "$type": "dimension" },
+      "border-width":  { "$value": "1.5px",                      "$type": "dimension" },
+      "font-size":     { "$value": "{primitive.font-size.sm}",   "$type": "dimension" },
+      "font-weight":   { "$value": "{primitive.font-weight.medium}", "$type": "fontWeight" }
+    }
+  }
+}