@putdotio/design 1.3.0 → 1.4.0

package/dist/tokens.js

@@ -148,6 +148,22 @@ export const tokens = {
     "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",
@@ -164,6 +180,70 @@ export const tokens = {
     "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",
@@ -1182,7 +1262,7 @@ export const tokens = {
     "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",
@@ -1350,7 +1430,7 @@ export const tokens = {
     "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",
@@ -1512,7 +1592,7 @@ export const tokens = {
     "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": {
@@ -1555,7 +1635,8 @@ export const tokens = {
     "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",
@@ -1604,7 +1685,7 @@ export const tokens = {
     "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",
@@ -1618,7 +1699,7 @@ export const tokens = {
     "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",
@@ -1631,64 +1712,73 @@ export const tokens = {
     "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",
@@ -1914,12 +2004,69 @@ export const tokens = {
     "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",
@@ -1933,7 +2080,7 @@ export const tokens = {
     "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",
@@ -1947,14 +2094,14 @@ export const tokens = {
     "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",
@@ -1968,14 +2115,14 @@ export const tokens = {
     "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",
@@ -1989,35 +2136,35 @@ export const tokens = {
     "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",
@@ -2031,14 +2178,14 @@ export const tokens = {
     "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",
@@ -2080,7 +2227,7 @@ export const tokens = {
     "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",
@@ -2094,14 +2241,14 @@ export const tokens = {
     "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",
@@ -2115,14 +2262,14 @@ export const tokens = {
     "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",
@@ -2136,14 +2283,14 @@ export const tokens = {
     "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",
@@ -2164,7 +2311,7 @@ export const tokens = {
     "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",
@@ -2178,14 +2325,14 @@ export const tokens = {
     "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",
@@ -2213,7 +2360,8 @@ export const tokens = {
     "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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",
@@ -66,6 +66,7 @@
     "dev": "node scripts/serve-system.ts",
     "tokens:build": "node scripts/build-tokens.ts",
     "tokens:check": "node scripts/check-generated-tokens.ts && node scripts/verify-design-system.ts",
+    "design:mirror": "node scripts/export-design-mirror.ts",
     "typecheck:scripts": "tsc --noEmit --ignoreConfig --skipLibCheck --module ESNext --moduleResolution Bundler --target ES2022 --strict --types node scripts/*.ts playwright.config.ts tests/e2e/*.ts sst.config.ts infra/*.ts",
     "smoke": "node scripts/smoke-static.ts",
     "html:check": "html-validate \"system/**/*.html\"",
@@ -78,7 +79,7 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.60.0",
-    "@types/node": "^25.9.1",
+    "@types/node": "^26.0.0",
     "html-validate": "^11.2.0",
     "sst": "^4.14.3",
     "style-dictionary": "^5.4.1",