@putdotio/design 1.2.1 → 1.4.0

package/dist/tokens.flat.json

@@ -146,6 +146,22 @@
     "originalValue": "{component.alias.destructiveForeground}",
     "description": "Text or icon color on destructive command backgrounds."
   },
+  "component.button.info.background": {
+    "cssName": "--button-info-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 56.1%)",
+    "originalValue": "{color.neutral.light.solid}",
+    "description": "Neutral solid command background in light mode."
+  },
+  "component.button.info.backgroundDark": {
+    "cssName": "--button-info-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 43.9%)",
+    "originalValue": "{color.neutral.dark.solid}",
+    "description": "Neutral solid command background in dark mode."
+  },
   "component.button.info.backgroundHover": {
     "cssName": "--button-info-bg-hover",
     "type": "color",
@@ -162,6 +178,70 @@
     "originalValue": "{color.neutral.dark.solidHover}",
     "description": "Neutral solid command hover background in dark mode."
   },
+  "component.button.info.foreground": {
+    "cssName": "--button-info-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "{component.alias.solidForeground}",
+    "description": "Label on the neutral solid — mode-aware for AA contrast on the gray fill."
+  },
+  "component.button.info.foregroundDark": {
+    "cssName": "--button-info-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "{component.alias.solidForegroundDark}",
+    "description": "Label on the neutral solid in dark mode."
+  },
+  "component.button.default.background": {
+    "cssName": "--button-default-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}",
+    "description": "Quiet default button fill in light mode."
+  },
+  "component.button.default.backgroundDark": {
+    "cssName": "--button-default-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}",
+    "description": "Quiet default button fill in dark mode."
+  },
+  "component.button.default.backgroundHover": {
+    "cssName": "--button-default-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.light.componentBgHover}",
+    "description": "Default button hover fill in light mode."
+  },
+  "component.button.default.backgroundHoverDark": {
+    "cssName": "--button-default-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 15.8%)",
+    "originalValue": "{color.neutral.dark.componentBgHover}",
+    "description": "Default button hover fill in dark mode."
+  },
+  "component.button.default.foreground": {
+    "cssName": "--button-default-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}",
+    "description": "Default button label in light mode."
+  },
+  "component.button.default.foregroundDark": {
+    "cssName": "--button-default-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}",
+    "description": "Default button label in dark mode."
+  },
   "component.input.background": {
     "cssName": "--input-bg",
     "type": "color",
@@ -1180,7 +1260,7 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(151, 55%, 41.5%)",
-    "originalValue": "hsl(151, 55%, 41.5%)"
+    "originalValue": "{color.green.light.solid}"
   },
   "color.green.dark.solidHover": {
     "cssName": "--green-solid-hover",
@@ -1348,7 +1428,7 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(358, 75%, 59%)",
-    "originalValue": "hsl(358, 75%, 59%)"
+    "originalValue": "{color.red.light.solid}"
   },
   "color.red.dark.solidHover": {
     "cssName": "--red-solid-hover",
@@ -1510,7 +1590,7 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(45, 89%, 58%)",
-    "originalValue": "hsl(45, 89%, 58%)",
+    "originalValue": "{color.yellow.light.solidHover}",
     "description": "Primary-button hover yellow for dark mode."
   },
   "color.yellow.dark.textSecondary": {
@@ -1553,7 +1633,8 @@
     "type": "color",
     "mode": "global",
     "value": "hsl(0, 0%, 78.0%)",
-    "originalValue": "hsl(0, 0%, 78.0%)"
+    "originalValue": "{elevation.shadowColor}",
+    "description": "Compat name kept for existing web consumers — alias of elevation.shadowColor so the two can never drift."
   },
   "elevation.sm": {
     "cssName": "--shadow-sm",
@@ -1586,18 +1667,9 @@
   "elevation.focus": {
     "cssName": "--shadow-focus",
     "type": "string",
-    "mode": "light",
-    "value": "0 0 0 2px hsla(47, 100%, 65%, 0.35), 0 0 0 3.5px hsl(0, 0%, 9.0%)",
-    "originalValue": "0 0 0 2px {elevation.focusColor}, 0 0 0 3.5px hsl(0, 0%, 9.0%)",
-    "description": "Focus ring: brand-yellow inner band + high-contrast text-color outer edge so the indicator clears WCAG 1.4.11 (3:1) on any surface. Light-mode edge."
-  },
-  "elevation.focusDark": {
-    "cssName": "--shadow-focus",
-    "type": "string",
-    "mode": "dark",
-    "value": "0 0 0 2px hsla(47, 100%, 65%, 0.35), 0 0 0 3.5px hsl(0, 0%, 93.0%)",
-    "originalValue": "0 0 0 2px {elevation.focusColor}, 0 0 0 3.5px hsl(0, 0%, 93.0%)",
-    "description": "Dark-mode focus ring: brand-yellow inner band + high-contrast text-color outer edge (WCAG 1.4.11)."
+    "mode": "global",
+    "value": "0 0 0 3px hsla(47, 100%, 65%, 0.35)",
+    "originalValue": "0 0 0 3px {elevation.focusColor}"
   },
   "typography.fontFamily.sans": {
     "cssName": "--font-sans",
@@ -1611,7 +1683,7 @@
     "type": "fontFamily",
     "mode": "global",
     "value": "\"GT America\", sans-serif",
-    "originalValue": "\"GT America\", sans-serif"
+    "originalValue": "{typography.fontFamily.sans}"
   },
   "typography.fontFamily.uiMono": {
     "cssName": "--font-ui-mono",
@@ -1625,7 +1697,7 @@
     "type": "fontFamily",
     "mode": "global",
     "value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
-    "originalValue": "\"Berkeley Mono\", \"GT America Mono\", monospace"
+    "originalValue": "\"Berkeley Mono\", {typography.fontFamily.uiMono}"
   },
   "typography.fontSize.xs": {
     "cssName": "--fs-xs",
@@ -1638,64 +1710,73 @@
     "cssName": "--fs-sm",
     "type": "dimension",
     "mode": "global",
-    "value": "0.8125rem",
-    "originalValue": "0.8125rem"
+    "value": "0.875rem",
+    "originalValue": "0.875rem",
+    "description": "Caption and button labels — production fontSize 0."
   },
   "typography.fontSize.base": {
     "cssName": "--fs-base",
     "type": "dimension",
     "mode": "global",
-    "value": "0.875rem",
-    "originalValue": "0.875rem"
+    "value": "1rem",
+    "originalValue": "1rem",
+    "description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg)."
   },
   "typography.fontSize.md": {
     "cssName": "--fs-md",
     "type": "dimension",
     "mode": "global",
-    "value": "1rem",
-    "originalValue": "1rem"
+    "value": "1.125rem",
+    "originalValue": "1.125rem",
+    "description": "Subheading."
   },
   "typography.fontSize.lg": {
     "cssName": "--fs-lg",
     "type": "dimension",
     "mode": "global",
-    "value": "1.125rem",
-    "originalValue": "1.125rem"
+    "value": "1.5rem",
+    "originalValue": "1.5rem",
+    "description": "Heading."
   },
   "typography.fontSize.xl": {
     "cssName": "--fs-xl",
     "type": "dimension",
     "mode": "global",
-    "value": "1.5rem",
-    "originalValue": "1.5rem"
+    "value": "2rem",
+    "originalValue": "2rem",
+    "description": "Page title."
   },
   "typography.fontSize.2xl": {
     "cssName": "--fs-2xl",
     "type": "dimension",
     "mode": "global",
-    "value": "2rem",
-    "originalValue": "2rem"
+    "value": "48px",
+    "originalValue": "48px",
+    "description": "Fixed display tier — does not scale with the responsive root."
   },
   "typography.fontSize.3xl": {
     "cssName": "--fs-3xl",
     "type": "dimension",
     "mode": "global",
-    "value": "3rem",
-    "originalValue": "3rem"
+    "value": "64px",
+    "originalValue": "64px",
+    "description": "Fixed display tier — does not scale with the responsive root."
   },
   "typography.fontSize.4xl": {
     "cssName": "--fs-4xl",
     "type": "dimension",
     "mode": "global",
-    "value": "4rem",
-    "originalValue": "4rem"
+    "value": "64px",
+    "originalValue": "{typography.fontSize.3xl}",
+    "description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display."
   },
   "typography.fontSize.display": {
     "cssName": "--fs-display",
     "type": "dimension",
     "mode": "global",
-    "value": "6rem",
-    "originalValue": "6rem"
+    "value": "96px",
+    "originalValue": "96px",
+    "description": "Fixed display tier for brand display moments."
   },
   "typography.lineHeight.tight": {
     "cssName": "--lh-tight",
@@ -1921,12 +2002,69 @@
     "value": "320ms",
     "originalValue": "320ms"
   },
+  "z.dropdown": {
+    "cssName": "--z-dropdown",
+    "type": "number",
+    "mode": "global",
+    "value": 1000,
+    "originalValue": 1000
+  },
+  "z.sticky": {
+    "cssName": "--z-sticky",
+    "type": "number",
+    "mode": "global",
+    "value": 1100,
+    "originalValue": 1100
+  },
+  "z.modal": {
+    "cssName": "--z-modal",
+    "type": "number",
+    "mode": "global",
+    "value": 1300,
+    "originalValue": 1300
+  },
+  "z.notification": {
+    "cssName": "--z-notification",
+    "type": "number",
+    "mode": "global",
+    "value": 1400,
+    "originalValue": 1400
+  },
+  "z.tooltip": {
+    "cssName": "--z-tooltip",
+    "type": "number",
+    "mode": "global",
+    "value": 1500,
+    "originalValue": 1500
+  },
+  "breakpoint.sm": {
+    "cssName": "--bp-sm",
+    "type": "dimension",
+    "mode": "global",
+    "value": "640px",
+    "originalValue": "640px"
+  },
+  "breakpoint.md": {
+    "cssName": "--bp-md",
+    "type": "dimension",
+    "mode": "global",
+    "value": "768px",
+    "originalValue": "768px"
+  },
+  "breakpoint.lg": {
+    "cssName": "--bp-lg",
+    "type": "dimension",
+    "mode": "global",
+    "value": "1280px",
+    "originalValue": "1280px",
+    "description": "The root font-size steps from 14px to 15px at this width."
+  },
   "surface.light.htmlBg": {
     "cssName": "--html-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.appBg": {
     "cssName": "--app-bg",
@@ -1940,7 +2078,7 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "hsl(0, 0%, 100%)"
+    "originalValue": "{surface.light.appBg}"
   },
   "surface.light.navItemBg": {
     "cssName": "--nav-item-bg",
@@ -1954,14 +2092,14 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 95.1%)",
-    "originalValue": "hsl(0, 0%, 95.1%)"
+    "originalValue": "{color.neutral.light.componentBg}"
   },
   "surface.light.navItemBgActive": {
     "cssName": "--nav-item-bg-active",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 95.1%)",
-    "originalValue": "hsl(0, 0%, 95.1%)"
+    "originalValue": "{color.neutral.light.componentBg}"
   },
   "surface.light.listItemBg": {
     "cssName": "--list-item-bg",
@@ -1975,14 +2113,14 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.listItemBgActive": {
     "cssName": "--list-item-bg-active",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.listItemBorder": {
     "cssName": "--list-item-border",
@@ -1996,35 +2134,35 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 95.1%)",
-    "originalValue": "hsl(0, 0%, 95.1%)"
+    "originalValue": "{color.neutral.light.componentBg}"
   },
   "surface.light.segmentedControlBgActive": {
     "cssName": "--segmented-control-bg-active",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 100%)",
-    "originalValue": "hsl(0, 0%, 100%)"
+    "originalValue": "{surface.light.appBg}"
   },
   "surface.light.transferListItemCompletingBg": {
     "cssName": "--transfer-list-item-completing-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(85, 76.0%, 92.3%)",
-    "originalValue": "hsl(85, 76.0%, 92.3%)"
+    "originalValue": "{color.transfer.light.lime3}"
   },
   "surface.light.transferListItemDownloadingBg": {
     "cssName": "--transfer-list-item-downloading-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(85, 76.0%, 92.3%)",
-    "originalValue": "hsl(85, 76.0%, 92.3%)"
+    "originalValue": "{color.transfer.light.lime3}"
   },
   "surface.light.transferListItemFinishedBg": {
     "cssName": "--transfer-list-item-finished-bg",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 97.3%)",
-    "originalValue": "hsl(0, 0%, 97.3%)"
+    "originalValue": "{color.neutral.light.bgSecondary}"
   },
   "surface.light.transferListItemPassiveBg": {
     "cssName": "--transfer-list-item-passive-bg",
@@ -2038,14 +2176,14 @@
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 9.0%)",
-    "originalValue": "hsl(0, 0%, 9.0%)"
+    "originalValue": "{color.neutral.light.text}"
   },
   "surface.light.loContrast": {
     "cssName": "--lo-contrast",
     "type": "color",
     "mode": "light",
     "value": "hsl(0, 0%, 99.0%)",
-    "originalValue": "hsl(0, 0%, 99.0%)"
+    "originalValue": "{color.neutral.light.bg}"
   },
   "surface.light.transparent": {
     "cssName": "--transparent",
@@ -2087,7 +2225,7 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "hsl(0, 0%, 8.5%)"
+    "originalValue": "{surface.dark.appBg}"
   },
   "surface.dark.navItemBg": {
     "cssName": "--nav-item-bg",
@@ -2101,14 +2239,14 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "hsl(0, 0%, 13.6%)"
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
   "surface.dark.navItemBgActive": {
     "cssName": "--nav-item-bg-active",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "hsl(0, 0%, 13.6%)"
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
   "surface.dark.listItemBg": {
     "cssName": "--list-item-bg",
@@ -2122,14 +2260,14 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "hsl(0, 0%, 11.0%)"
+    "originalValue": "{color.neutral.dark.bgSecondary}"
   },
   "surface.dark.listItemBgActive": {
     "cssName": "--list-item-bg-active",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "hsl(0, 0%, 11.0%)"
+    "originalValue": "{color.neutral.dark.bgSecondary}"
   },
   "surface.dark.listItemBorder": {
     "cssName": "--list-item-border",
@@ -2143,14 +2281,14 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "hsl(0, 0%, 8.5%)"
+    "originalValue": "{surface.dark.appBg}"
   },
   "surface.dark.segmentedControlBgActive": {
     "cssName": "--segmented-control-bg-active",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 13.6%)",
-    "originalValue": "hsl(0, 0%, 13.6%)"
+    "originalValue": "{color.neutral.dark.componentBg}"
   },
   "surface.dark.transferListItemCompletingBg": {
     "cssName": "--transfer-list-item-completing-bg",
@@ -2171,7 +2309,7 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 11.0%)",
-    "originalValue": "hsl(0, 0%, 11.0%)"
+    "originalValue": "{color.neutral.dark.bgSecondary}"
   },
   "surface.dark.transferListItemPassiveBg": {
     "cssName": "--transfer-list-item-passive-bg",
@@ -2185,14 +2323,14 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 93.0%)",
-    "originalValue": "hsl(0, 0%, 93.0%)"
+    "originalValue": "{color.neutral.dark.text}"
   },
   "surface.dark.loContrast": {
     "cssName": "--lo-contrast",
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 8.5%)",
-    "originalValue": "hsl(0, 0%, 8.5%)"
+    "originalValue": "{color.neutral.dark.bg}"
   },
   "surface.dark.overlayInline": {
     "cssName": "--overlay-inline",
@@ -2220,7 +2358,8 @@
     "type": "color",
     "mode": "dark",
     "value": "hsl(0, 0%, 0%)",
-    "originalValue": "hsl(0, 0%, 0%)"
+    "originalValue": "{surface.dark.shadowColor}",
+    "description": "Compat name kept for existing web consumers — alias of surface.dark.shadowColor so the two can never drift."
   },
   "surface.dark.shadowSm": {
     "cssName": "--shadow-sm",