@putdotio/design 1.0.0 → 1.1.0

package/dist/tokens.js

@@ -5,7 +5,7 @@ export const tokens = {
     "cssName": "--button-primary-bg",
     "type": "color",
     "mode": "global",
-    "value": "#FDCE45",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
     "originalValue": "{color.brand.yellow}",
     "description": "Primary command background."
   },
@@ -13,8 +13,8 @@ export const tokens = {
     "cssName": "--button-primary-fg",
     "type": "color",
     "mode": "global",
-    "value": "#0A0A0A",
-    "originalValue": "#0A0A0A",
+    "value": "hsl(0, 0%, 4.0%)",
+    "originalValue": "hsl(0, 0%, 4.0%)",
     "description": "Text or icon color on the yellow primary button."
   },
   "component.button.primary.radius": {
@@ -56,15 +56,15 @@ export const tokens = {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "light",
-    "value": "white",
+    "value": "hsl(0, 0%, 100%)",
     "originalValue": "{surface.light.appBg}"
   },
   "component.input.backgroundDark": {
     "cssName": "--input-bg",
     "type": "color",
     "mode": "dark",
-    "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "{color.neutral.dark.componentBg}"
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "{surface.dark.appBg}"
   },
   "component.input.border": {
     "cssName": "--input-border",
@@ -87,6 +87,428 @@ export const tokens = {
     "value": "6px",
     "originalValue": "{radius.default}"
   },
+  "component.field.background": {
+    "cssName": "--field-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "{surface.light.appBg}",
+    "description": "Form-control fill. Fields stay on the app background surface, even inside a raised panel."
+  },
+  "component.field.backgroundDark": {
+    "cssName": "--field-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "{surface.dark.appBg}",
+    "description": "Dark-mode form-control fill."
+  },
+  "component.field.backgroundDisabled": {
+    "cssName": "--field-bg-disabled",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}",
+    "description": "Disabled form-control fill."
+  },
+  "component.field.backgroundDisabledDark": {
+    "cssName": "--field-bg-disabled",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}",
+    "description": "Dark-mode disabled form-control fill."
+  },
+  "component.field.border": {
+    "cssName": "--field-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 85.8%)",
+    "originalValue": "{color.neutral.light.border}",
+    "description": "Resting form-control border."
+  },
+  "component.field.borderDark": {
+    "cssName": "--field-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 24.3%)",
+    "originalValue": "{color.neutral.dark.border}",
+    "description": "Dark-mode resting form-control border."
+  },
+  "component.field.borderHover": {
+    "cssName": "--field-border-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "{color.neutral.light.borderHover}",
+    "description": "Hover form-control border."
+  },
+  "component.field.borderHoverDark": {
+    "cssName": "--field-border-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 31.2%)",
+    "originalValue": "{color.neutral.dark.borderHover}",
+    "description": "Dark-mode hover form-control border."
+  },
+  "component.field.borderFocus": {
+    "cssName": "--field-border-focus",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "{color.neutral.light.borderHover}",
+    "description": "Focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+  },
+  "component.field.borderFocusDark": {
+    "cssName": "--field-border-focus",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 31.2%)",
+    "originalValue": "{color.neutral.dark.borderHover}",
+    "description": "Dark-mode focused form-control border. Focus matches hover and does not use the yellow focus shadow."
+  },
+  "component.field.text": {
+    "cssName": "--field-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}",
+    "description": "Form-control text color."
+  },
+  "component.field.textDark": {
+    "cssName": "--field-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}",
+    "description": "Dark-mode form-control text color."
+  },
+  "component.field.placeholder": {
+    "cssName": "--field-placeholder",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}",
+    "description": "Form-control placeholder color."
+  },
+  "component.field.placeholderDark": {
+    "cssName": "--field-placeholder",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}",
+    "description": "Dark-mode form-control placeholder color."
+  },
+  "component.field.ring": {
+    "cssName": "--field-ring",
+    "type": "string",
+    "mode": "light",
+    "value": "0 0 0 1px hsl(0, 0%, 78.0%)",
+    "originalValue": "0 0 0 1px {color.neutral.light.borderHover}",
+    "description": "Quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
+  },
+  "component.field.ringDark": {
+    "cssName": "--field-ring",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 0 0 1px hsl(0, 0%, 31.2%)",
+    "originalValue": "0 0 0 1px {color.neutral.dark.borderHover}",
+    "description": "Dark-mode quiet field focus ring. Brand-yellow shadow focus is reserved for buttons, links, nav, and TV focus."
+  },
+  "component.panel.background": {
+    "cssName": "--panel-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Raised panel background on the app background surface."
+  },
+  "component.panel.backgroundDark": {
+    "cssName": "--panel-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
+    "description": "Dark-mode raised panel background on the app background surface."
+  },
+  "component.panel.border": {
+    "cssName": "--panel-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}",
+    "description": "Raised panel hairline border."
+  },
+  "component.panel.borderDark": {
+    "cssName": "--panel-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}",
+    "description": "Dark-mode raised panel hairline border."
+  },
+  "component.panel.radius": {
+    "cssName": "--panel-radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "10px",
+    "originalValue": "{radius.lg}",
+    "description": "Raised panel radius."
+  },
+  "component.panel.shadow": {
+    "cssName": "--panel-shadow",
+    "type": "string",
+    "mode": "light",
+    "value": "0 4px 12px hsla(0, 0%, 0%, 0.08)",
+    "originalValue": "{elevation.md}",
+    "description": "Raised panel shadow."
+  },
+  "component.panel.shadowDark": {
+    "cssName": "--panel-shadow",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 4px 12px hsla(0, 0%, 0%, 0.5)",
+    "originalValue": "{surface.dark.shadowMd}",
+    "description": "Dark-mode raised panel shadow."
+  },
+  "component.alias.background": {
+    "cssName": "--background",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 99.0%)",
+    "originalValue": "{color.neutral.light.bg}"
+  },
+  "component.alias.backgroundDark": {
+    "cssName": "--background",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "{color.neutral.dark.bg}"
+  },
+  "component.alias.foreground": {
+    "cssName": "--foreground",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.alias.foregroundDark": {
+    "cssName": "--foreground",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.alias.foregroundMuted": {
+    "cssName": "--foreground-muted",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.alias.foregroundMutedDark": {
+    "cssName": "--foreground-muted",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.alias.primary": {
+    "cssName": "--primary",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}"
+  },
+  "component.alias.primaryForeground": {
+    "cssName": "--primary-foreground",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "hsl(0, 0%, 0%)"
+  },
+  "component.alias.success": {
+    "cssName": "--success",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(153, 67.0%, 28.5%)",
+    "originalValue": "{color.green.light.textSecondary}"
+  },
+  "component.alias.successDark": {
+    "cssName": "--success",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(151, 51.7%, 28.4%)",
+    "originalValue": "{color.green.dark.borderHover}"
+  },
+  "component.alias.successForeground": {
+    "cssName": "--success-foreground",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)"
+  },
+  "component.alias.destructive": {
+    "cssName": "--destructive",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(358, 65.0%, 48.7%)",
+    "originalValue": "{color.red.light.textSecondary}"
+  },
+  "component.alias.destructiveDark": {
+    "cssName": "--destructive",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(358, 65.0%, 40.4%)",
+    "originalValue": "{color.red.dark.borderHover}"
+  },
+  "component.alias.destructiveForeground": {
+    "cssName": "--destructive-foreground",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)"
+  },
+  "component.alias.solidForeground": {
+    "cssName": "--solid-foreground",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)"
+  },
+  "component.alias.muted": {
+    "cssName": "--muted",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}"
+  },
+  "component.alias.mutedDark": {
+    "cssName": "--muted",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}"
+  },
+  "component.alias.mutedForeground": {
+    "cssName": "--muted-foreground",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.alias.mutedForegroundDark": {
+    "cssName": "--muted-foreground",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.alias.accent": {
+    "cssName": "--accent",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}"
+  },
+  "component.alias.accentDark": {
+    "cssName": "--accent",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.alias.accentForeground": {
+    "cssName": "--accent-foreground",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.alias.accentForegroundDark": {
+    "cssName": "--accent-foreground",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.alias.card": {
+    "cssName": "--card",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}"
+  },
+  "component.alias.cardDark": {
+    "cssName": "--card",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.alias.cardForeground": {
+    "cssName": "--card-foreground",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.alias.cardForegroundDark": {
+    "cssName": "--card-foreground",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.alias.popover": {
+    "cssName": "--popover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}"
+  },
+  "component.alias.popoverDark": {
+    "cssName": "--popover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.alias.popoverForeground": {
+    "cssName": "--popover-foreground",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.alias.popoverForegroundDark": {
+    "cssName": "--popover-foreground",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.alias.input": {
+    "cssName": "--input",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 85.8%)",
+    "originalValue": "{color.neutral.light.border}"
+  },
+  "component.alias.inputDark": {
+    "cssName": "--input",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 24.3%)",
+    "originalValue": "{color.neutral.dark.border}"
+  },
+  "component.alias.ring": {
+    "cssName": "--ring",
+    "type": "color",
+    "mode": "global",
+    "value": "hsla(47, 100%, 65%, 0.35)",
+    "originalValue": "{elevation.focusColor}"
+  },
   "component.fileRow.background": {
     "cssName": "--file-row-bg",
     "type": "color",
@@ -119,7 +541,7 @@ export const tokens = {
     "cssName": "--file-row-icon",
     "type": "color",
     "mode": "global",
-    "value": "#FDCE45",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
     "originalValue": "{color.brand.yellow}"
   },
   "component.notification.infoBackground": {
@@ -248,13 +670,69 @@ export const tokens = {
     "value": "0 14px 30px rgba(0,0,0,0.45)",
     "originalValue": "0 14px 30px rgba(0,0,0,0.45)"
   },
+  "context.tv.channelArt.production.posterBackground": {
+    "cssName": "--tv-channel-art-production-poster-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "#333333",
+    "originalValue": "#333333"
+  },
+  "context.tv.channelArt.production.splashBackground": {
+    "cssName": "--tv-channel-art-production-splash-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "{color.neutral.dark.bg}"
+  },
+  "context.tv.channelArt.development.background": {
+    "cssName": "--tv-channel-art-development-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "#248FE5",
+    "originalValue": "#248FE5"
+  },
+  "context.tv.channelArt.development.accent": {
+    "cssName": "--tv-channel-art-development-accent",
+    "type": "color",
+    "mode": "tv",
+    "value": "#9FD5FF",
+    "originalValue": "#9FD5FF"
+  },
+  "context.tv.channelArt.development.grid": {
+    "cssName": "--tv-channel-art-development-grid",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(255,255,255,0.18)",
+    "originalValue": "rgba(255,255,255,0.18)"
+  },
+  "context.tv.channelArt.lab.background": {
+    "cssName": "--tv-channel-art-lab-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "#0a0f0a",
+    "originalValue": "#0a0f0a"
+  },
+  "context.tv.channelArt.lab.foreground": {
+    "cssName": "--tv-channel-art-lab-fg",
+    "type": "color",
+    "mode": "tv",
+    "value": "#e8ffe4",
+    "originalValue": "#e8ffe4"
+  },
+  "context.tv.channelArt.lab.accent": {
+    "cssName": "--tv-channel-art-lab-accent",
+    "type": "color",
+    "mode": "tv",
+    "value": "#39FF14",
+    "originalValue": "#39FF14"
+  },
   "color.brand.yellow": {
     "cssName": "--yellow-solid",
     "type": "color",
     "mode": "global",
-    "value": "#FDCE45",
-    "originalValue": "#FDCE45",
-    "description": "Sacred put.io brand yellow. Do not change or tint."
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "hsl(44.7, 97.9%, 63.1%)",
+    "description": "Sacred put.io brand yellow (canonical hex #FDCE45). Do not change or tint."
   },
   "color.neutral.light.bg": {
     "cssName": "--bg",
@@ -820,7 +1298,7 @@ export const tokens = {
     "cssName": "--yellow-solid-hover",
     "type": "color",
     "mode": "light",
-    "value": "#FDCE45",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
     "originalValue": "{color.brand.yellow}"
   },
   "color.yellow.light.textSecondary": {
@@ -897,7 +1375,7 @@ export const tokens = {
     "cssName": "--yellow-solid-hover",
     "type": "color",
     "mode": "dark",
-    "value": "#FDCE45",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
     "originalValue": "{color.brand.yellow}"
   },
   "color.yellow.dark.textSecondary": {
@@ -974,8 +1452,8 @@ export const tokens = {
     "cssName": "--shadow-focus",
     "type": "string",
     "mode": "global",
-    "value": "0 0 0 3px var(--shadow-focus-color)",
-    "originalValue": "0 0 0 3px var(--shadow-focus-color)"
+    "value": "0 0 0 3px hsla(47, 100%, 65%, 0.35)",
+    "originalValue": "0 0 0 3px {elevation.focusColor}"
   },
   "typography.fontFamily.sans": {
     "cssName": "--font-sans",
@@ -1310,15 +1788,15 @@ export const tokens = {
     "cssName": "--app-bg",
     "type": "color",
     "mode": "light",
-    "value": "white",
-    "originalValue": "white"
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)"
   },
   "surface.light.navBg": {
     "cssName": "--nav-bg",
     "type": "color",
     "mode": "light",
-    "value": "white",
-    "originalValue": "white"
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)"
   },
   "surface.light.navItemBg": {
     "cssName": "--nav-item-bg",
@@ -1380,8 +1858,8 @@ export const tokens = {
     "cssName": "--segmented-control-bg-active",
     "type": "color",
     "mode": "light",
-    "value": "white",
-    "originalValue": "white"
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)"
   },
   "surface.light.transferListItemCompletingBg": {
     "cssName": "--transfer-list-item-completing-bg",
@@ -1450,8 +1928,8 @@ export const tokens = {
     "cssName": "--html-bg",
     "type": "color",
     "mode": "dark",
-    "value": "black",
-    "originalValue": "black"
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "hsl(0, 0%, 0%)"
   },
   "surface.dark.appBg": {
     "cssName": "--app-bg",
@@ -1590,15 +2068,15 @@ export const tokens = {
     "cssName": "--shadow-color",
     "type": "color",
     "mode": "dark",
-    "value": "black",
-    "originalValue": "black"
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "hsl(0, 0%, 0%)"
   },
   "surface.dark.shadow": {
     "cssName": "--shadow",
     "type": "color",
     "mode": "dark",
-    "value": "black",
-    "originalValue": "black"
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "hsl(0, 0%, 0%)"
   },
   "surface.dark.shadowSm": {
     "cssName": "--shadow-sm",