@putdotio/design 2.0.2 → 3.0.0

package/dist/tokens.flat.json

@@ -1229,6 +1229,21 @@
     "value": "hsl(5, 100%, 91%)",
     "originalValue": "{color.red.dark.text}"
   },
+  "component.notification.badgeBackground": {
+    "cssName": "--notification-badge-bg",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(358, 70%, 45%)",
+    "originalValue": "hsl(358, 70%, 45%)",
+    "description": "Unread count disc — darkened red so white numerals clear AA at 9px. Fixed in both modes."
+  },
+  "component.notification.badgeForeground": {
+    "cssName": "--notification-badge-fg",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "{component.alias.destructiveForeground}"
+  },
   "component.menu.background": {
     "cssName": "--menu-bg",
     "type": "color",
@@ -1583,6 +1598,517 @@
     "originalValue": "380px",
     "description": "Fixed on web. Touch surfaces use a bottom sheet instead."
   },
+  "component.avatar.yellow": {
+    "cssName": "--avatar-yellow",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}",
+    "description": "Initial-on-color avatar palette. Fixed in both modes; the chip carries its own contrast."
+  },
+  "component.avatar.green": {
+    "cssName": "--avatar-green",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(151, 55%, 33%)",
+    "originalValue": "hsl(151, 55%, 33%)"
+  },
+  "component.avatar.red": {
+    "cssName": "--avatar-red",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(358, 55%, 46%)",
+    "originalValue": "hsl(358, 55%, 46%)"
+  },
+  "component.avatar.blue": {
+    "cssName": "--avatar-blue",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(211, 55%, 46%)",
+    "originalValue": "hsl(211, 55%, 46%)"
+  },
+  "component.avatar.purple": {
+    "cssName": "--avatar-purple",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(280, 48%, 46%)",
+    "originalValue": "hsl(280, 48%, 46%)"
+  },
+  "component.avatar.teal": {
+    "cssName": "--avatar-teal",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(168, 55%, 33%)",
+    "originalValue": "hsl(168, 55%, 33%)"
+  },
+  "component.avatar.orange": {
+    "cssName": "--avatar-orange",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(28, 80%, 55%)",
+    "originalValue": "hsl(28, 80%, 55%)"
+  },
+  "component.avatar.foreground": {
+    "cssName": "--avatar-fg",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "{component.alias.destructiveForeground}",
+    "description": "White initials — every palette entry except yellow and orange."
+  },
+  "component.avatar.foregroundWarm": {
+    "cssName": "--avatar-fg-warm",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(38, 65%, 10%)",
+    "originalValue": "{component.alias.primaryForeground}",
+    "description": "Warm dark initials on yellow and orange."
+  },
+  "component.alert.radius": {
+    "cssName": "--alert-radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "6px",
+    "originalValue": "{radius.default}",
+    "description": "Inline, in-page messaging. Persists until the condition clears — a toast does not."
+  },
+  "component.alert.infoBackground": {
+    "cssName": "--alert-info-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}"
+  },
+  "component.alert.infoBackgroundDark": {
+    "cssName": "--alert-info-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{color.neutral.dark.bgSecondary}"
+  },
+  "component.alert.infoBorder": {
+    "cssName": "--alert-info-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "{color.neutral.light.line}"
+  },
+  "component.alert.infoBorderDark": {
+    "cssName": "--alert-info-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "{color.neutral.dark.line}"
+  },
+  "component.alert.infoText": {
+    "cssName": "--alert-info-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.alert.infoTextDark": {
+    "cssName": "--alert-info-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.alert.infoBody": {
+    "cssName": "--alert-info-body",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.alert.infoBodyDark": {
+    "cssName": "--alert-info-body",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.alert.infoIcon": {
+    "cssName": "--alert-info-icon",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.alert.infoIconDark": {
+    "cssName": "--alert-info-icon",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.alert.brandBackground": {
+    "cssName": "--alert-brand-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(52, 100%, 88%)",
+    "originalValue": "{color.yellow.light.componentBg}"
+  },
+  "component.alert.brandBackgroundDark": {
+    "cssName": "--alert-brand-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 70%, 9%)",
+    "originalValue": "{color.yellow.dark.componentBg}"
+  },
+  "component.alert.brandBorder": {
+    "cssName": "--alert-brand-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(45, 67%, 67%)",
+    "originalValue": "{color.yellow.light.border}"
+  },
+  "component.alert.brandBorderDark": {
+    "cssName": "--alert-brand-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 53%, 26%)",
+    "originalValue": "{color.yellow.dark.border}"
+  },
+  "component.alert.brandText": {
+    "cssName": "--alert-brand-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(43, 32%, 21%)",
+    "originalValue": "{color.yellow.light.text}"
+  },
+  "component.alert.brandTextDark": {
+    "cssName": "--alert-brand-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(46, 89%, 86%)",
+    "originalValue": "{color.yellow.dark.text}"
+  },
+  "component.alert.brandBody": {
+    "cssName": "--alert-brand-body",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(46, 100%, 27%)",
+    "originalValue": "{color.yellow.light.textSecondary}"
+  },
+  "component.alert.brandBodyDark": {
+    "cssName": "--alert-brand-body",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 100%, 64%)",
+    "originalValue": "{color.yellow.dark.textSecondary}"
+  },
+  "component.alert.brandIcon": {
+    "cssName": "--alert-brand-icon",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(46, 100%, 27%)",
+    "originalValue": "{color.yellow.light.textSecondary}"
+  },
+  "component.alert.brandIconDark": {
+    "cssName": "--alert-brand-icon",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 100%, 64%)",
+    "originalValue": "{color.yellow.dark.textSecondary}"
+  },
+  "component.alert.successBackground": {
+    "cssName": "--alert-success-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(135, 53%, 93%)",
+    "originalValue": "{color.green.light.componentBg}"
+  },
+  "component.alert.successBackgroundDark": {
+    "cssName": "--alert-success-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(151, 35%, 13%)",
+    "originalValue": "{color.green.dark.componentBg}"
+  },
+  "component.alert.successBorder": {
+    "cssName": "--alert-success-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(140, 39%, 68%)",
+    "originalValue": "{color.green.light.border}"
+  },
+  "component.alert.successBorderDark": {
+    "cssName": "--alert-success-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(146, 41%, 29%)",
+    "originalValue": "{color.green.dark.border}"
+  },
+  "component.alert.successText": {
+    "cssName": "--alert-success-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(146, 35%, 17%)",
+    "originalValue": "{color.green.light.text}"
+  },
+  "component.alert.successTextDark": {
+    "cssName": "--alert-success-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(142, 71%, 82%)",
+    "originalValue": "{color.green.dark.text}"
+  },
+  "component.alert.successBody": {
+    "cssName": "--alert-success-body",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(155, 100%, 25%)",
+    "originalValue": "{color.green.light.textSecondary}"
+  },
+  "component.alert.successBodyDark": {
+    "cssName": "--alert-success-body",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(146, 56%, 60%)",
+    "originalValue": "{color.green.dark.textSecondary}"
+  },
+  "component.alert.successIcon": {
+    "cssName": "--alert-success-icon",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(155, 100%, 25%)",
+    "originalValue": "{color.green.light.textSecondary}"
+  },
+  "component.alert.successIconDark": {
+    "cssName": "--alert-success-icon",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(146, 56%, 60%)",
+    "originalValue": "{color.green.dark.textSecondary}"
+  },
+  "component.alert.dangerBackground": {
+    "cssName": "--alert-danger-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(2, 100%, 96%)",
+    "originalValue": "{color.red.light.componentBg}"
+  },
+  "component.alert.dangerBackgroundDark": {
+    "cssName": "--alert-danger-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 55%, 15%)",
+    "originalValue": "{color.red.dark.componentBg}"
+  },
+  "component.alert.dangerBorder": {
+    "cssName": "--alert-danger-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(2, 81%, 80%)",
+    "originalValue": "{color.red.light.border}"
+  },
+  "component.alert.dangerBorderDark": {
+    "cssName": "--alert-danger-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 46%, 38%)",
+    "originalValue": "{color.red.dark.border}"
+  },
+  "component.alert.dangerText": {
+    "cssName": "--alert-danger-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(358, 62%, 24%)",
+    "originalValue": "{color.red.light.text}"
+  },
+  "component.alert.dangerTextDark": {
+    "cssName": "--alert-danger-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(5, 100%, 91%)",
+    "originalValue": "{color.red.dark.text}"
+  },
+  "component.alert.dangerBody": {
+    "cssName": "--alert-danger-body",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(355, 64%, 49%)",
+    "originalValue": "{color.red.light.textSecondary}"
+  },
+  "component.alert.dangerBodyDark": {
+    "cssName": "--alert-danger-body",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(2, 100%, 77%)",
+    "originalValue": "{color.red.dark.textSecondary}"
+  },
+  "component.alert.dangerIcon": {
+    "cssName": "--alert-danger-icon",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(355, 64%, 49%)",
+    "originalValue": "{color.red.light.textSecondary}"
+  },
+  "component.alert.dangerIconDark": {
+    "cssName": "--alert-danger-icon",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(2, 100%, 77%)",
+    "originalValue": "{color.red.dark.textSecondary}"
+  },
+  "component.slider.track": {
+    "cssName": "--slider-track",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 90.9%)",
+    "originalValue": "{color.neutral.light.componentBgActive}",
+    "description": "Seek, volume, stepped numeric. The buffered band is what makes it a scrubber."
+  },
+  "component.slider.trackDark": {
+    "cssName": "--slider-track",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 17.9%)",
+    "originalValue": "{color.neutral.dark.componentBgActive}"
+  },
+  "component.slider.buffer": {
+    "cssName": "--slider-buffer",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 85.8%)",
+    "originalValue": "{color.neutral.light.border}"
+  },
+  "component.slider.bufferDark": {
+    "cssName": "--slider-buffer",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 24.3%)",
+    "originalValue": "{color.neutral.dark.border}"
+  },
+  "component.slider.fill": {
+    "cssName": "--slider-fill",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}"
+  },
+  "component.slider.knob": {
+    "cssName": "--slider-knob",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}"
+  },
+  "component.slider.fillDisabled": {
+    "cssName": "--slider-fill-disabled",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.slider.fillDisabledDark": {
+    "cssName": "--slider-fill-disabled",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.slider.trackHeight": {
+    "cssName": "--slider-track-height",
+    "type": "dimension",
+    "mode": "global",
+    "value": "4px",
+    "originalValue": "4px"
+  },
+  "component.slider.knobSize": {
+    "cssName": "--slider-knob-size",
+    "type": "dimension",
+    "mode": "global",
+    "value": "14px",
+    "originalValue": "14px"
+  },
+  "component.slider.hitHeight": {
+    "cssName": "--slider-hit-height",
+    "type": "dimension",
+    "mode": "global",
+    "value": "20px",
+    "originalValue": "20px",
+    "description": "44px on touch — the knob grows, the track does not."
+  },
+  "component.pagination.itemSize": {
+    "cssName": "--pagination-item-size",
+    "type": "dimension",
+    "mode": "global",
+    "value": "30px",
+    "originalValue": "30px",
+    "description": "Numbered paging. Load-more and infinite scroll carry no chrome of their own."
+  },
+  "component.pagination.itemText": {
+    "cssName": "--pagination-item-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "{color.neutral.light.textSecondary}"
+  },
+  "component.pagination.itemTextDark": {
+    "cssName": "--pagination-item-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "{color.neutral.dark.textSecondary}"
+  },
+  "component.pagination.itemTextActive": {
+    "cssName": "--pagination-item-text-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.pagination.itemTextActiveDark": {
+    "cssName": "--pagination-item-text-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.pagination.itemBackgroundHover": {
+    "cssName": "--pagination-item-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.light.componentBgHover}"
+  },
+  "component.pagination.itemBackgroundHoverDark": {
+    "cssName": "--pagination-item-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 15.8%)",
+    "originalValue": "{color.neutral.dark.componentBgHover}"
+  },
+  "component.pagination.itemBackgroundActive": {
+    "cssName": "--pagination-item-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 90.9%)",
+    "originalValue": "{color.neutral.light.componentBgActive}"
+  },
+  "component.pagination.itemBackgroundActiveDark": {
+    "cssName": "--pagination-item-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 17.9%)",
+    "originalValue": "{color.neutral.dark.componentBgActive}"
+  },
+  "component.pagination.itemBorderActive": {
+    "cssName": "--pagination-item-border-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 85.8%)",
+    "originalValue": "{color.neutral.light.border}"
+  },
+  "component.pagination.itemBorderActiveDark": {
+    "cssName": "--pagination-item-border-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 24.3%)",
+    "originalValue": "{color.neutral.dark.border}"
+  },
   "context.tv.text.primary": {
     "cssName": "--text-1",
     "type": "color",
@@ -1643,6 +2169,46 @@
     "value": "hsla(0, 0%, 100%, 0.18)",
     "originalValue": "hsla(0, 0%, 100%, 0.18)"
   },
+  "context.tv.channelArt.nightly.background": {
+    "cssName": "--tv-channel-art-nightly-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(0, 0%, 2%)",
+    "originalValue": "hsl(0, 0%, 2%)",
+    "description": "True black, one step past production charcoal; carries the star field so a staging build is unmistakable next to the shipping app."
+  },
+  "context.tv.channelArt.nightly.accent": {
+    "cssName": "--tv-channel-art-nightly-accent",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}",
+    "description": "Unlike dev, nightly does not recolor the mark: the accent is the brand yellow and the retro wordmark keeps its yellow drop-shadow. Present so emitters can express the flavor as a complete set rather than a special case."
+  },
+  "context.tv.channelArt.nightly.star": {
+    "cssName": "--tv-channel-art-nightly-star",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)",
+    "description": "Star colour. Stars are scattered, never gridded: three sizes at roughly 36%, 62%, and 95% opacity with the faint ones dominating. Static — never animated, blurred, or glowing."
+  },
+  "context.tv.channelArt.nightly.moon": {
+    "cssName": "--tv-channel-art-nightly-moon",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(44.7, 97.9%, 63.1%)",
+    "originalValue": "{color.brand.yellow}",
+    "description": "Full moon disc in the brand yellow, placed top-left. Its own token so a platform can place the moon without hard-coding the brand value."
+  },
+  "context.tv.channelArt.nightly.moonCrater": {
+    "cssName": "--tv-channel-art-nightly-moon-crater",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(45, 82%, 56%)",
+    "originalValue": "hsl(45, 82%, 56%)",
+    "description": "Craters one step darker than the moon disc. Low contrast on purpose: texture at icon size, not holes."
+  },
   "context.tv.channelArt.lab.background": {
     "cssName": "--tv-channel-art-lab-bg",
     "type": "color",
@@ -1664,6 +2230,38 @@
     "value": "hsl(110.6, 100%, 53.9%)",
     "originalValue": "hsl(110.6, 100%, 53.9%)"
   },
+  "tv.video.background": {
+    "cssName": "--tv-video-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(0, 0%, 0%)",
+    "originalValue": "hsl(0, 0%, 0%)",
+    "description": "Letterbox / video plate. True black, not the app background."
+  },
+  "tv.video.heroScrimTop": {
+    "cssName": "--tv-hero-scrim-top",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(30, 18.2%, 8.6%)",
+    "originalValue": "hsl(30, 18.2%, 8.6%)",
+    "description": "Top stop of the warm-black wash behind hero/poster art."
+  },
+  "tv.video.heroScrimBottom": {
+    "cssName": "--tv-hero-scrim-bottom",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(30, 25%, 1.6%)",
+    "originalValue": "hsl(30, 25%, 1.6%)",
+    "description": "Bottom stop of the hero wash. Near-black but warm — never pure black, which reads blue next to the art."
+  },
+  "tv.video.textOnVideo": {
+    "cssName": "--tv-text-on-video",
+    "type": "color",
+    "mode": "tv",
+    "value": "hsl(0, 0%, 100%)",
+    "originalValue": "hsl(0, 0%, 100%)",
+    "description": "Player chrome over video — always white, never a theme token."
+  },
   "tv.text.heading": {
     "cssName": "--tv-text-heading",
     "type": "dimension",