@putdotio/design 1.0.0 → 1.2.0

package/dist/figma/putio.tokens.json

@@ -4,12 +4,17 @@
       "primary": {
         "background": {
           "$type": "color",
-          "$value": "#FDCE45",
+          "$value": "hsl(44.7, 97.9%, 63.1%)",
           "$description": "Primary command background."
         },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(45, 89%, 58%)",
+          "$description": "Primary command hover background in light mode."
+        },
         "foreground": {
           "$type": "color",
-          "$value": "#0A0A0A",
+          "$value": "hsl(38, 65%, 10%)",
           "$description": "Text or icon color on the yellow primary button."
         },
         "radius": {
@@ -26,12 +31,53 @@
           "$type": "color",
           "$value": "hsl(0, 0%, 9.0%)"
         }
+      },
+      "success": {
+        "background": {
+          "$type": "color",
+          "$value": "hsl(151, 55%, 41.5%)",
+          "$description": "Success command background in light mode."
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(151, 58%, 37%)",
+          "$description": "Success command hover background in light mode. Step-10 hover companion to the green solid fill."
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 100%)",
+          "$description": "Text or icon color on success command backgrounds."
+        }
+      },
+      "danger": {
+        "background": {
+          "$type": "color",
+          "$value": "hsl(358, 75%, 59%)",
+          "$description": "Destructive command background in light mode."
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(357, 66%, 53%)",
+          "$description": "Destructive command hover background in light mode. Step-10 hover companion to the red solid fill."
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 100%)",
+          "$description": "Text or icon color on destructive command backgrounds."
+        }
+      },
+      "info": {
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "hsl(0, 0%, 52.3%)",
+          "$description": "Neutral solid command hover background in light mode."
+        }
       }
     },
     "input": {
       "background": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "border": {
         "$type": "color",
@@ -45,7 +91,7 @@
     "fileRow": {
       "background": {
         "$type": "color",
-        "$value": "transparent"
+        "$value": "hsla(0, 0%, 0%, 0)"
       },
       "hoverBackground": {
         "$type": "color",
@@ -53,7 +99,7 @@
       },
       "icon": {
         "$type": "color",
-        "$value": "#FDCE45"
+        "$value": "hsl(44.7, 97.9%, 63.1%)"
       }
     },
     "notification": {
@@ -63,7 +109,7 @@
       },
       "dangerBackground": {
         "$type": "color",
-        "$value": "hsl(360, 100%, 96.8%)"
+        "$value": "hsl(2, 100%, 96%)"
       }
     }
   },
@@ -71,8 +117,8 @@
     "brand": {
       "yellow": {
         "$type": "color",
-        "$value": "#FDCE45",
-        "$description": "Sacred put.io brand yellow. Do not change or tint."
+        "$value": "hsl(44.7, 97.9%, 63.1%)",
+        "$description": "put.io brand yellow (canonical hex #FDCE45). The resting brand fill is the same in light and dark modes."
       }
     },
     "neutral": {
@@ -131,51 +177,51 @@
       "light": {
         "bg": {
           "$type": "color",
-          "$value": "hsl(136, 50.0%, 98.9%)"
+          "$value": "hsl(140, 60%, 99%)"
         },
         "bgSecondary": {
           "$type": "color",
-          "$value": "hsl(138, 62.5%, 96.9%)"
+          "$value": "hsl(140, 41%, 97%)"
         },
         "componentBg": {
           "$type": "color",
-          "$value": "hsl(139, 55.2%, 94.5%)"
+          "$value": "hsl(135, 53%, 93%)"
         },
         "componentBgHover": {
           "$type": "color",
-          "$value": "hsl(140, 48.7%, 91.0%)"
+          "$value": "hsl(138, 58%, 89%)"
         },
         "componentBgActive": {
           "$type": "color",
-          "$value": "hsl(141, 43.7%, 86.0%)"
+          "$value": "hsl(140, 50%, 84%)"
         },
         "line": {
           "$type": "color",
-          "$value": "hsl(143, 40.3%, 79.0%)"
+          "$value": "hsl(141, 47%, 77%)"
         },
         "border": {
           "$type": "color",
-          "$value": "hsl(146, 38.5%, 69.0%)"
+          "$value": "hsl(140, 39%, 68%)"
         },
         "borderHover": {
           "$type": "color",
-          "$value": "hsl(151, 40.2%, 54.1%)"
+          "$value": "hsl(146, 39%, 55%)"
         },
         "solid": {
           "$type": "color",
-          "$value": "hsl(151, 55.0%, 41.5%)"
+          "$value": "hsl(151, 55%, 41.5%)"
         },
         "solidHover": {
           "$type": "color",
-          "$value": "hsl(152, 57.5%, 37.6%)"
+          "$value": "hsl(151, 58%, 37%)"
         },
         "textSecondary": {
           "$type": "color",
-          "$value": "hsl(153, 67.0%, 28.5%)"
+          "$value": "hsl(155, 100%, 25%)"
         },
         "text": {
           "$type": "color",
-          "$value": "hsl(155, 40.0%, 14.0%)"
+          "$value": "hsl(146, 35%, 17%)"
         }
       }
     },
@@ -183,51 +229,51 @@
       "light": {
         "bg": {
           "$type": "color",
-          "$value": "hsl(359, 100%, 99.4%)"
+          "$value": "hsl(0, 100%, 99%)"
         },
         "bgSecondary": {
           "$type": "color",
-          "$value": "hsl(359, 100%, 98.6%)"
+          "$value": "hsl(0, 100%, 98%)"
         },
         "componentBg": {
           "$type": "color",
-          "$value": "hsl(360, 100%, 96.8%)"
+          "$value": "hsl(2, 100%, 96%)"
         },
         "componentBgHover": {
           "$type": "color",
-          "$value": "hsl(360, 97.9%, 94.8%)"
+          "$value": "hsl(4, 100%, 93%)"
         },
         "componentBgActive": {
           "$type": "color",
-          "$value": "hsl(360, 90.2%, 91.9%)"
+          "$value": "hsl(3, 100%, 89%)"
         },
         "line": {
           "$type": "color",
-          "$value": "hsl(360, 81.7%, 87.8%)"
+          "$value": "hsl(3, 97%, 86%)"
         },
         "border": {
           "$type": "color",
-          "$value": "hsl(359, 74.2%, 81.7%)"
+          "$value": "hsl(2, 81%, 80%)"
         },
         "borderHover": {
           "$type": "color",
-          "$value": "hsl(359, 69.5%, 74.3%)"
+          "$value": "hsl(2, 71%, 73%)"
         },
         "solid": {
           "$type": "color",
-          "$value": "hsl(358, 75.0%, 59.0%)"
+          "$value": "hsl(358, 75%, 59%)"
         },
         "solidHover": {
           "$type": "color",
-          "$value": "hsl(358, 69.4%, 55.2%)"
+          "$value": "hsl(357, 66%, 53%)"
         },
         "textSecondary": {
           "$type": "color",
-          "$value": "hsl(358, 65.0%, 48.7%)"
+          "$value": "hsl(355, 64%, 49%)"
         },
         "text": {
           "$type": "color",
-          "$value": "hsl(354, 50.0%, 14.6%)"
+          "$value": "hsl(358, 62%, 24%)"
         }
       }
     },
@@ -235,47 +281,48 @@
       "light": {
         "bg": {
           "$type": "color",
-          "$value": "hsl(60, 54.0%, 98.5%)"
+          "$value": "hsl(45, 60%, 99%)"
         },
         "bgSecondary": {
           "$type": "color",
-          "$value": "hsl(52, 100%, 95.5%)"
+          "$value": "hsl(53, 100%, 96%)"
         },
         "componentBg": {
           "$type": "color",
-          "$value": "hsl(55, 100%, 90.9%)"
+          "$value": "hsl(52, 100%, 88%)"
         },
         "componentBgHover": {
           "$type": "color",
-          "$value": "hsl(54, 100%, 86.6%)"
+          "$value": "hsl(50, 100%, 82%)"
         },
         "componentBgActive": {
           "$type": "color",
-          "$value": "hsl(52, 97.9%, 82.0%)"
+          "$value": "hsl(48, 100%, 76%)"
         },
         "line": {
           "$type": "color",
-          "$value": "hsl(50, 89.4%, 76.1%)"
+          "$value": "hsl(46, 87%, 73%)"
         },
         "border": {
           "$type": "color",
-          "$value": "hsl(47, 80.4%, 68.0%)"
+          "$value": "hsl(45, 67%, 67%)"
         },
         "borderHover": {
           "$type": "color",
-          "$value": "hsl(48, 100%, 46.1%)"
+          "$value": "hsl(44, 58%, 56%)"
         },
         "solidHover": {
           "$type": "color",
-          "$value": "#FDCE45"
+          "$value": "hsl(45, 89%, 58%)",
+          "$description": "Primary-button hover yellow for light mode."
         },
         "textSecondary": {
           "$type": "color",
-          "$value": "hsl(42, 100%, 29.0%)"
+          "$value": "hsl(46, 100%, 29%)"
         },
         "text": {
           "$type": "color",
-          "$value": "hsl(40, 55.0%, 13.5%)"
+          "$value": "hsl(43, 32%, 21%)"
         }
       }
     },
@@ -508,15 +555,15 @@
       },
       "appBg": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "navBg": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "navItemBg": {
         "$type": "color",
-        "$value": "transparent"
+        "$value": "hsla(0, 0%, 0%, 0)"
       },
       "navItemBgHover": {
         "$type": "color",
@@ -528,7 +575,7 @@
       },
       "listItemBg": {
         "$type": "color",
-        "$value": "transparent"
+        "$value": "hsla(0, 0%, 0%, 0)"
       },
       "listItemBgHover": {
         "$type": "color",
@@ -548,7 +595,7 @@
       },
       "segmentedControlBgActive": {
         "$type": "color",
-        "$value": "white"
+        "$value": "hsl(0, 0%, 100%)"
       },
       "transferListItemCompletingBg": {
         "$type": "color",
@@ -576,7 +623,7 @@
       },
       "transparent": {
         "$type": "color",
-        "$value": "transparent"
+        "$value": "hsla(0, 0%, 0%, 0)"
       },
       "overlayInline": {
         "$type": "color",

package/dist/tokens.d.ts

@@ -1,6 +1,6 @@
 // Do not edit directly. Generated from tokens/**/*.tokens.json.
 
-export type PutioTokenName = "component.button.primary.background" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "context.tv.surface.0" | "context.tv.surface.1" | "context.tv.surface.2" | "context.tv.surface.3" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.glass.1" | "context.tv.glass.2" | "context.tv.glass.3" | "context.tv.glass.border" | "context.tv.glass.borderStrong" | "context.tv.focus.ring" | "context.tv.focus.liftShadow" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.uiMono" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
+export type PutioTokenName = "component.button.primary.background" | "component.button.primary.backgroundHover" | "component.button.primary.backgroundHoverDark" | "component.button.primary.foreground" | "component.button.primary.radius" | "component.button.secondary.background" | "component.button.secondary.backgroundDark" | "component.button.secondary.foreground" | "component.button.secondary.foregroundDark" | "component.button.success.background" | "component.button.success.backgroundDark" | "component.button.success.backgroundHover" | "component.button.success.backgroundHoverDark" | "component.button.success.foreground" | "component.button.danger.background" | "component.button.danger.backgroundDark" | "component.button.danger.backgroundHover" | "component.button.danger.backgroundHoverDark" | "component.button.danger.foreground" | "component.button.info.backgroundHover" | "component.button.info.backgroundHoverDark" | "component.input.background" | "component.input.backgroundDark" | "component.input.border" | "component.input.borderDark" | "component.input.radius" | "component.field.background" | "component.field.backgroundDark" | "component.field.backgroundDisabled" | "component.field.backgroundDisabledDark" | "component.field.border" | "component.field.borderDark" | "component.field.borderHover" | "component.field.borderHoverDark" | "component.field.borderFocus" | "component.field.borderFocusDark" | "component.field.text" | "component.field.textDark" | "component.field.placeholder" | "component.field.placeholderDark" | "component.field.ring" | "component.field.ringDark" | "component.panel.background" | "component.panel.backgroundDark" | "component.panel.border" | "component.panel.borderDark" | "component.panel.radius" | "component.panel.shadow" | "component.panel.shadowDark" | "component.alias.background" | "component.alias.backgroundDark" | "component.alias.foreground" | "component.alias.foregroundDark" | "component.alias.foregroundMuted" | "component.alias.foregroundMutedDark" | "component.alias.primary" | "component.alias.primaryForeground" | "component.alias.success" | "component.alias.successDark" | "component.alias.successForeground" | "component.alias.destructive" | "component.alias.destructiveDark" | "component.alias.destructiveForeground" | "component.alias.invertForeground" | "component.alias.invertForegroundDark" | "component.alias.solidForeground" | "component.alias.solidForegroundDark" | "component.alias.muted" | "component.alias.mutedDark" | "component.alias.mutedForeground" | "component.alias.mutedForegroundDark" | "component.alias.accent" | "component.alias.accentDark" | "component.alias.accentForeground" | "component.alias.accentForegroundDark" | "component.alias.card" | "component.alias.cardDark" | "component.alias.cardForeground" | "component.alias.cardForegroundDark" | "component.alias.popover" | "component.alias.popoverDark" | "component.alias.popoverForeground" | "component.alias.popoverForegroundDark" | "component.alias.input" | "component.alias.inputDark" | "component.alias.ring" | "component.fileRow.background" | "component.fileRow.backgroundDark" | "component.fileRow.hoverBackground" | "component.fileRow.hoverBackgroundDark" | "component.fileRow.icon" | "component.notification.infoBackground" | "component.notification.infoBackgroundDark" | "component.notification.dangerBackground" | "component.notification.dangerBackgroundDark" | "context.tv.surface.0" | "context.tv.surface.1" | "context.tv.surface.2" | "context.tv.surface.3" | "context.tv.text.primary" | "context.tv.text.secondary" | "context.tv.text.tertiary" | "context.tv.glass.1" | "context.tv.glass.2" | "context.tv.glass.3" | "context.tv.glass.border" | "context.tv.glass.borderStrong" | "context.tv.focus.ring" | "context.tv.focus.liftShadow" | "context.tv.channelArt.production.posterBackground" | "context.tv.channelArt.production.splashBackground" | "context.tv.channelArt.development.background" | "context.tv.channelArt.development.accent" | "context.tv.channelArt.development.grid" | "context.tv.channelArt.lab.background" | "context.tv.channelArt.lab.foreground" | "context.tv.channelArt.lab.accent" | "color.brand.yellow" | "color.neutral.light.bg" | "color.neutral.light.bgSecondary" | "color.neutral.light.componentBg" | "color.neutral.light.componentBgHover" | "color.neutral.light.componentBgActive" | "color.neutral.light.line" | "color.neutral.light.border" | "color.neutral.light.borderHover" | "color.neutral.light.solid" | "color.neutral.light.solidHover" | "color.neutral.light.textSecondary" | "color.neutral.light.text" | "color.neutral.dark.bg" | "color.neutral.dark.bgSecondary" | "color.neutral.dark.componentBg" | "color.neutral.dark.componentBgHover" | "color.neutral.dark.componentBgActive" | "color.neutral.dark.line" | "color.neutral.dark.border" | "color.neutral.dark.borderHover" | "color.neutral.dark.solid" | "color.neutral.dark.solidHover" | "color.neutral.dark.textSecondary" | "color.neutral.dark.text" | "color.green.light.bg" | "color.green.light.bgSecondary" | "color.green.light.componentBg" | "color.green.light.componentBgHover" | "color.green.light.componentBgActive" | "color.green.light.line" | "color.green.light.border" | "color.green.light.borderHover" | "color.green.light.solid" | "color.green.light.solidHover" | "color.green.light.textSecondary" | "color.green.light.text" | "color.green.dark.bg" | "color.green.dark.bgSecondary" | "color.green.dark.componentBg" | "color.green.dark.componentBgHover" | "color.green.dark.componentBgActive" | "color.green.dark.line" | "color.green.dark.border" | "color.green.dark.borderHover" | "color.green.dark.solid" | "color.green.dark.solidHover" | "color.green.dark.textSecondary" | "color.green.dark.text" | "color.red.light.bg" | "color.red.light.bgSecondary" | "color.red.light.componentBg" | "color.red.light.componentBgHover" | "color.red.light.componentBgActive" | "color.red.light.line" | "color.red.light.border" | "color.red.light.borderHover" | "color.red.light.solid" | "color.red.light.solidHover" | "color.red.light.textSecondary" | "color.red.light.text" | "color.red.dark.bg" | "color.red.dark.bgSecondary" | "color.red.dark.componentBg" | "color.red.dark.componentBgHover" | "color.red.dark.componentBgActive" | "color.red.dark.line" | "color.red.dark.border" | "color.red.dark.borderHover" | "color.red.dark.solid" | "color.red.dark.solidHover" | "color.red.dark.textSecondary" | "color.red.dark.text" | "color.yellow.light.bg" | "color.yellow.light.bgSecondary" | "color.yellow.light.componentBg" | "color.yellow.light.componentBgHover" | "color.yellow.light.componentBgActive" | "color.yellow.light.line" | "color.yellow.light.border" | "color.yellow.light.borderHover" | "color.yellow.light.solidHover" | "color.yellow.light.textSecondary" | "color.yellow.light.text" | "color.yellow.dark.bg" | "color.yellow.dark.bgSecondary" | "color.yellow.dark.componentBg" | "color.yellow.dark.componentBgHover" | "color.yellow.dark.componentBgActive" | "color.yellow.dark.line" | "color.yellow.dark.border" | "color.yellow.dark.borderHover" | "color.yellow.dark.solidHover" | "color.yellow.dark.textSecondary" | "color.yellow.dark.text" | "color.transfer.light.lime3" | "color.transfer.dark.lime3" | "elevation.shadowColor" | "elevation.color" | "elevation.sm" | "elevation.md" | "elevation.lg" | "elevation.focusColor" | "elevation.focus" | "typography.fontFamily.sans" | "typography.fontFamily.display" | "typography.fontFamily.uiMono" | "typography.fontFamily.mono" | "typography.fontSize.xs" | "typography.fontSize.sm" | "typography.fontSize.base" | "typography.fontSize.md" | "typography.fontSize.lg" | "typography.fontSize.xl" | "typography.fontSize.2xl" | "typography.fontSize.3xl" | "typography.fontSize.4xl" | "typography.fontSize.display" | "typography.lineHeight.tight" | "typography.lineHeight.snug" | "typography.lineHeight.normal" | "typography.lineHeight.loose" | "typography.fontWeight.regular" | "typography.fontWeight.medium" | "typography.fontWeight.bold" | "typography.fontWeight.black" | "typography.letterSpacing.tight" | "typography.letterSpacing.normal" | "typography.letterSpacing.wide" | "typography.letterSpacing.uppercase" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "radius.sm" | "radius.default" | "radius.md" | "radius.lg" | "radius.pill" | "border.width" | "motion.easing.out" | "motion.easing.inOut" | "motion.duration.fast" | "motion.duration.base" | "motion.duration.slow" | "surface.light.htmlBg" | "surface.light.appBg" | "surface.light.navBg" | "surface.light.navItemBg" | "surface.light.navItemBgHover" | "surface.light.navItemBgActive" | "surface.light.listItemBg" | "surface.light.listItemBgHover" | "surface.light.listItemBgActive" | "surface.light.listItemBorder" | "surface.light.segmentedControlBg" | "surface.light.segmentedControlBgActive" | "surface.light.transferListItemCompletingBg" | "surface.light.transferListItemDownloadingBg" | "surface.light.transferListItemFinishedBg" | "surface.light.transferListItemPassiveBg" | "surface.light.hiContrast" | "surface.light.loContrast" | "surface.light.transparent" | "surface.light.overlayInline" | "surface.light.overlayFull" | "surface.dark.htmlBg" | "surface.dark.appBg" | "surface.dark.navBg" | "surface.dark.navItemBg" | "surface.dark.navItemBgHover" | "surface.dark.navItemBgActive" | "surface.dark.listItemBg" | "surface.dark.listItemBgHover" | "surface.dark.listItemBgActive" | "surface.dark.listItemBorder" | "surface.dark.segmentedControlBg" | "surface.dark.segmentedControlBgActive" | "surface.dark.transferListItemCompletingBg" | "surface.dark.transferListItemDownloadingBg" | "surface.dark.transferListItemFinishedBg" | "surface.dark.transferListItemPassiveBg" | "surface.dark.hiContrast" | "surface.dark.loContrast" | "surface.dark.overlayInline" | "surface.dark.overlayFull" | "surface.dark.shadowColor" | "surface.dark.shadow" | "surface.dark.shadowSm" | "surface.dark.shadowMd" | "surface.dark.shadowLg";
 
 export type PutioToken = {
   readonly cssName: string;