@putdotio/design 0.1.0-alpha.0

package/dist/tokens.js

@@ -0,0 +1,1624 @@
+// Do not edit directly. Generated from tokens/**/*.tokens.json.
+
+export const tokens = {
+  "component.button.primary.background": {
+    "cssName": "--button-primary-bg",
+    "type": "color",
+    "mode": "global",
+    "value": "#FDCE45",
+    "originalValue": "{color.brand.yellow}",
+    "description": "Primary command background."
+  },
+  "component.button.primary.foreground": {
+    "cssName": "--button-primary-fg",
+    "type": "color",
+    "mode": "global",
+    "value": "#0A0A0A",
+    "originalValue": "#0A0A0A",
+    "description": "Text or icon color on the yellow primary button."
+  },
+  "component.button.primary.radius": {
+    "cssName": "--button-radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "6px",
+    "originalValue": "{radius.default}"
+  },
+  "component.button.secondary.background": {
+    "cssName": "--button-secondary-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "{color.neutral.light.componentBg}"
+  },
+  "component.button.secondary.backgroundDark": {
+    "cssName": "--button-secondary-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.button.secondary.foreground": {
+    "cssName": "--button-secondary-fg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "{color.neutral.light.text}"
+  },
+  "component.button.secondary.foregroundDark": {
+    "cssName": "--button-secondary-fg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "{color.neutral.dark.text}"
+  },
+  "component.input.background": {
+    "cssName": "--input-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "white",
+    "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}"
+  },
+  "component.input.border": {
+    "cssName": "--input-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 85.8%)",
+    "originalValue": "{color.neutral.light.border}"
+  },
+  "component.input.borderDark": {
+    "cssName": "--input-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 24.3%)",
+    "originalValue": "{color.neutral.dark.border}"
+  },
+  "component.input.radius": {
+    "cssName": "--input-radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "6px",
+    "originalValue": "{radius.default}"
+  },
+  "component.fileRow.background": {
+    "cssName": "--file-row-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "transparent",
+    "originalValue": "{surface.light.listItemBg}"
+  },
+  "component.fileRow.backgroundDark": {
+    "cssName": "--file-row-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "transparent",
+    "originalValue": "{surface.dark.listItemBg}"
+  },
+  "component.fileRow.hoverBackground": {
+    "cssName": "--file-row-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{surface.light.listItemBgHover}"
+  },
+  "component.fileRow.hoverBackgroundDark": {
+    "cssName": "--file-row-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "{surface.dark.listItemBgHover}"
+  },
+  "component.fileRow.icon": {
+    "cssName": "--file-row-icon",
+    "type": "color",
+    "mode": "global",
+    "value": "#FDCE45",
+    "originalValue": "{color.brand.yellow}"
+  },
+  "component.notification.infoBackground": {
+    "cssName": "--notification-info-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "{color.neutral.light.bgSecondary}"
+  },
+  "component.notification.infoBackgroundDark": {
+    "cssName": "--notification-info-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "{color.neutral.dark.componentBg}"
+  },
+  "component.notification.dangerBackground": {
+    "cssName": "--notification-danger-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(360, 100%, 96.8%)",
+    "originalValue": "{color.red.light.componentBg}"
+  },
+  "component.notification.dangerBackgroundDark": {
+    "cssName": "--notification-danger-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(356, 43.4%, 16.4%)",
+    "originalValue": "{color.red.dark.componentBg}"
+  },
+  "context.tv.surface.0": {
+    "cssName": "--surf-0",
+    "type": "color",
+    "mode": "tv",
+    "value": "#000",
+    "originalValue": "#000"
+  },
+  "context.tv.surface.1": {
+    "cssName": "--surf-1",
+    "type": "color",
+    "mode": "tv",
+    "value": "#0a0a0a",
+    "originalValue": "#0a0a0a"
+  },
+  "context.tv.surface.2": {
+    "cssName": "--surf-2",
+    "type": "color",
+    "mode": "tv",
+    "value": "#161616",
+    "originalValue": "#161616"
+  },
+  "context.tv.surface.3": {
+    "cssName": "--surf-3",
+    "type": "color",
+    "mode": "tv",
+    "value": "#1f1f1f",
+    "originalValue": "#1f1f1f"
+  },
+  "context.tv.text.primary": {
+    "cssName": "--text-1",
+    "type": "color",
+    "mode": "tv",
+    "value": "#f4f4f4",
+    "originalValue": "#f4f4f4"
+  },
+  "context.tv.text.secondary": {
+    "cssName": "--text-2",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(244,244,244,0.62)",
+    "originalValue": "rgba(244,244,244,0.62)"
+  },
+  "context.tv.text.tertiary": {
+    "cssName": "--text-3",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(244,244,244,0.38)",
+    "originalValue": "rgba(244,244,244,0.38)"
+  },
+  "context.tv.glass.1": {
+    "cssName": "--glass-1-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(255,255,255,0.06)",
+    "originalValue": "rgba(255,255,255,0.06)"
+  },
+  "context.tv.glass.2": {
+    "cssName": "--glass-2-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(255,255,255,0.10)",
+    "originalValue": "rgba(255,255,255,0.10)"
+  },
+  "context.tv.glass.3": {
+    "cssName": "--glass-3-bg",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(255,255,255,0.14)",
+    "originalValue": "rgba(255,255,255,0.14)"
+  },
+  "context.tv.glass.border": {
+    "cssName": "--glass-border",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(255,255,255,0.12)",
+    "originalValue": "rgba(255,255,255,0.12)"
+  },
+  "context.tv.glass.borderStrong": {
+    "cssName": "--glass-border-strong",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(255,255,255,0.22)",
+    "originalValue": "rgba(255,255,255,0.22)"
+  },
+  "context.tv.focus.ring": {
+    "cssName": "--focus-ring",
+    "type": "color",
+    "mode": "tv",
+    "value": "rgba(253,206,69,0.18)",
+    "originalValue": "rgba(253,206,69,0.18)"
+  },
+  "context.tv.focus.liftShadow": {
+    "cssName": "--focus-shadow",
+    "type": "string",
+    "mode": "tv",
+    "value": "0 14px 30px rgba(0,0,0,0.45)",
+    "originalValue": "0 14px 30px rgba(0,0,0,0.45)"
+  },
+  "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."
+  },
+  "color.neutral.light.bg": {
+    "cssName": "--bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 99.0%)",
+    "originalValue": "hsl(0, 0%, 99.0%)"
+  },
+  "color.neutral.light.bgSecondary": {
+    "cssName": "--bg-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "hsl(0, 0%, 97.3%)"
+  },
+  "color.neutral.light.componentBg": {
+    "cssName": "--component-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "hsl(0, 0%, 95.1%)"
+  },
+  "color.neutral.light.componentBgHover": {
+    "cssName": "--component-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "hsl(0, 0%, 93.0%)"
+  },
+  "color.neutral.light.componentBgActive": {
+    "cssName": "--component-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 90.9%)",
+    "originalValue": "hsl(0, 0%, 90.9%)"
+  },
+  "color.neutral.light.line": {
+    "cssName": "--line",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 88.7%)",
+    "originalValue": "hsl(0, 0%, 88.7%)"
+  },
+  "color.neutral.light.border": {
+    "cssName": "--border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 85.8%)",
+    "originalValue": "hsl(0, 0%, 85.8%)"
+  },
+  "color.neutral.light.borderHover": {
+    "cssName": "--border-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "hsl(0, 0%, 78.0%)"
+  },
+  "color.neutral.light.solid": {
+    "cssName": "--solid",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 56.1%)",
+    "originalValue": "hsl(0, 0%, 56.1%)"
+  },
+  "color.neutral.light.solidHover": {
+    "cssName": "--solid-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 52.3%)",
+    "originalValue": "hsl(0, 0%, 52.3%)"
+  },
+  "color.neutral.light.textSecondary": {
+    "cssName": "--text-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 43.5%)",
+    "originalValue": "hsl(0, 0%, 43.5%)"
+  },
+  "color.neutral.light.text": {
+    "cssName": "--text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "hsl(0, 0%, 9.0%)"
+  },
+  "color.neutral.dark.bg": {
+    "cssName": "--bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "hsl(0, 0%, 8.5%)"
+  },
+  "color.neutral.dark.bgSecondary": {
+    "cssName": "--bg-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "hsl(0, 0%, 11.0%)"
+  },
+  "color.neutral.dark.componentBg": {
+    "cssName": "--component-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "hsl(0, 0%, 13.6%)"
+  },
+  "color.neutral.dark.componentBgHover": {
+    "cssName": "--component-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 15.8%)",
+    "originalValue": "hsl(0, 0%, 15.8%)"
+  },
+  "color.neutral.dark.componentBgActive": {
+    "cssName": "--component-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 17.9%)",
+    "originalValue": "hsl(0, 0%, 17.9%)"
+  },
+  "color.neutral.dark.line": {
+    "cssName": "--line",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 20.5%)",
+    "originalValue": "hsl(0, 0%, 20.5%)"
+  },
+  "color.neutral.dark.border": {
+    "cssName": "--border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 24.3%)",
+    "originalValue": "hsl(0, 0%, 24.3%)"
+  },
+  "color.neutral.dark.borderHover": {
+    "cssName": "--border-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 31.2%)",
+    "originalValue": "hsl(0, 0%, 31.2%)"
+  },
+  "color.neutral.dark.solid": {
+    "cssName": "--solid",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 43.9%)",
+    "originalValue": "hsl(0, 0%, 43.9%)"
+  },
+  "color.neutral.dark.solidHover": {
+    "cssName": "--solid-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 49.4%)",
+    "originalValue": "hsl(0, 0%, 49.4%)"
+  },
+  "color.neutral.dark.textSecondary": {
+    "cssName": "--text-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 62.8%)",
+    "originalValue": "hsl(0, 0%, 62.8%)"
+  },
+  "color.neutral.dark.text": {
+    "cssName": "--text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "hsl(0, 0%, 93.0%)"
+  },
+  "color.green.light.bg": {
+    "cssName": "--green-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(136, 50.0%, 98.9%)",
+    "originalValue": "hsl(136, 50.0%, 98.9%)"
+  },
+  "color.green.light.bgSecondary": {
+    "cssName": "--green-bg-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(138, 62.5%, 96.9%)",
+    "originalValue": "hsl(138, 62.5%, 96.9%)"
+  },
+  "color.green.light.componentBg": {
+    "cssName": "--green-component-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(139, 55.2%, 94.5%)",
+    "originalValue": "hsl(139, 55.2%, 94.5%)"
+  },
+  "color.green.light.componentBgHover": {
+    "cssName": "--green-component-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(140, 48.7%, 91.0%)",
+    "originalValue": "hsl(140, 48.7%, 91.0%)"
+  },
+  "color.green.light.componentBgActive": {
+    "cssName": "--green-component-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(141, 43.7%, 86.0%)",
+    "originalValue": "hsl(141, 43.7%, 86.0%)"
+  },
+  "color.green.light.line": {
+    "cssName": "--green-line",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(143, 40.3%, 79.0%)",
+    "originalValue": "hsl(143, 40.3%, 79.0%)"
+  },
+  "color.green.light.border": {
+    "cssName": "--green-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(146, 38.5%, 69.0%)",
+    "originalValue": "hsl(146, 38.5%, 69.0%)"
+  },
+  "color.green.light.borderHover": {
+    "cssName": "--green-border-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(151, 40.2%, 54.1%)",
+    "originalValue": "hsl(151, 40.2%, 54.1%)"
+  },
+  "color.green.light.solid": {
+    "cssName": "--green-solid",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(151, 55.0%, 41.5%)",
+    "originalValue": "hsl(151, 55.0%, 41.5%)"
+  },
+  "color.green.light.solidHover": {
+    "cssName": "--green-solid-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(152, 57.5%, 37.6%)",
+    "originalValue": "hsl(152, 57.5%, 37.6%)"
+  },
+  "color.green.light.textSecondary": {
+    "cssName": "--green-text-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(153, 67.0%, 28.5%)",
+    "originalValue": "hsl(153, 67.0%, 28.5%)"
+  },
+  "color.green.light.text": {
+    "cssName": "--green-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(155, 40.0%, 14.0%)",
+    "originalValue": "hsl(155, 40.0%, 14.0%)"
+  },
+  "color.green.dark.bg": {
+    "cssName": "--green-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(146, 30.0%, 7.4%)",
+    "originalValue": "hsl(146, 30.0%, 7.4%)"
+  },
+  "color.green.dark.bgSecondary": {
+    "cssName": "--green-bg-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(155, 44.2%, 8.4%)",
+    "originalValue": "hsl(155, 44.2%, 8.4%)"
+  },
+  "color.green.dark.componentBg": {
+    "cssName": "--green-component-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(155, 46.7%, 10.9%)",
+    "originalValue": "hsl(155, 46.7%, 10.9%)"
+  },
+  "color.green.dark.componentBgHover": {
+    "cssName": "--green-component-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(154, 48.4%, 12.9%)",
+    "originalValue": "hsl(154, 48.4%, 12.9%)"
+  },
+  "color.green.dark.componentBgActive": {
+    "cssName": "--green-component-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(154, 49.7%, 14.9%)",
+    "originalValue": "hsl(154, 49.7%, 14.9%)"
+  },
+  "color.green.dark.line": {
+    "cssName": "--green-line",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(154, 50.9%, 17.6%)",
+    "originalValue": "hsl(154, 50.9%, 17.6%)"
+  },
+  "color.green.dark.border": {
+    "cssName": "--green-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(153, 51.8%, 21.8%)",
+    "originalValue": "hsl(153, 51.8%, 21.8%)"
+  },
+  "color.green.dark.borderHover": {
+    "cssName": "--green-border-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(151, 51.7%, 28.4%)",
+    "originalValue": "hsl(151, 51.7%, 28.4%)"
+  },
+  "color.green.dark.solid": {
+    "cssName": "--green-solid",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(151, 55.0%, 41.5%)",
+    "originalValue": "hsl(151, 55.0%, 41.5%)"
+  },
+  "color.green.dark.solidHover": {
+    "cssName": "--green-solid-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(151, 49.3%, 46.5%)",
+    "originalValue": "hsl(151, 49.3%, 46.5%)"
+  },
+  "color.green.dark.textSecondary": {
+    "cssName": "--green-text-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(151, 50.0%, 53.2%)",
+    "originalValue": "hsl(151, 50.0%, 53.2%)"
+  },
+  "color.green.dark.text": {
+    "cssName": "--green-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(137, 72.0%, 94.0%)",
+    "originalValue": "hsl(137, 72.0%, 94.0%)"
+  },
+  "color.red.light.bg": {
+    "cssName": "--red-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(359, 100%, 99.4%)",
+    "originalValue": "hsl(359, 100%, 99.4%)"
+  },
+  "color.red.light.bgSecondary": {
+    "cssName": "--red-bg-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(359, 100%, 98.6%)",
+    "originalValue": "hsl(359, 100%, 98.6%)"
+  },
+  "color.red.light.componentBg": {
+    "cssName": "--red-component-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(360, 100%, 96.8%)",
+    "originalValue": "hsl(360, 100%, 96.8%)"
+  },
+  "color.red.light.componentBgHover": {
+    "cssName": "--red-component-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(360, 97.9%, 94.8%)",
+    "originalValue": "hsl(360, 97.9%, 94.8%)"
+  },
+  "color.red.light.componentBgActive": {
+    "cssName": "--red-component-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(360, 90.2%, 91.9%)",
+    "originalValue": "hsl(360, 90.2%, 91.9%)"
+  },
+  "color.red.light.line": {
+    "cssName": "--red-line",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(360, 81.7%, 87.8%)",
+    "originalValue": "hsl(360, 81.7%, 87.8%)"
+  },
+  "color.red.light.border": {
+    "cssName": "--red-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(359, 74.2%, 81.7%)",
+    "originalValue": "hsl(359, 74.2%, 81.7%)"
+  },
+  "color.red.light.borderHover": {
+    "cssName": "--red-border-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(359, 69.5%, 74.3%)",
+    "originalValue": "hsl(359, 69.5%, 74.3%)"
+  },
+  "color.red.light.solid": {
+    "cssName": "--red-solid",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(358, 75.0%, 59.0%)",
+    "originalValue": "hsl(358, 75.0%, 59.0%)"
+  },
+  "color.red.light.solidHover": {
+    "cssName": "--red-solid-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(358, 69.4%, 55.2%)",
+    "originalValue": "hsl(358, 69.4%, 55.2%)"
+  },
+  "color.red.light.textSecondary": {
+    "cssName": "--red-text-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(358, 65.0%, 48.7%)",
+    "originalValue": "hsl(358, 65.0%, 48.7%)"
+  },
+  "color.red.light.text": {
+    "cssName": "--red-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(354, 50.0%, 14.6%)",
+    "originalValue": "hsl(354, 50.0%, 14.6%)"
+  },
+  "color.red.dark.bg": {
+    "cssName": "--red-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(353, 23.0%, 9.8%)",
+    "originalValue": "hsl(353, 23.0%, 9.8%)"
+  },
+  "color.red.dark.bgSecondary": {
+    "cssName": "--red-bg-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(357, 34.4%, 12.0%)",
+    "originalValue": "hsl(357, 34.4%, 12.0%)"
+  },
+  "color.red.dark.componentBg": {
+    "cssName": "--red-component-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(356, 43.4%, 16.4%)",
+    "originalValue": "hsl(356, 43.4%, 16.4%)"
+  },
+  "color.red.dark.componentBgHover": {
+    "cssName": "--red-component-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(356, 47.6%, 19.2%)",
+    "originalValue": "hsl(356, 47.6%, 19.2%)"
+  },
+  "color.red.dark.componentBgActive": {
+    "cssName": "--red-component-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(356, 51.1%, 21.9%)",
+    "originalValue": "hsl(356, 51.1%, 21.9%)"
+  },
+  "color.red.dark.line": {
+    "cssName": "--red-line",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(356, 55.2%, 25.9%)",
+    "originalValue": "hsl(356, 55.2%, 25.9%)"
+  },
+  "color.red.dark.border": {
+    "cssName": "--red-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(357, 60.2%, 31.8%)",
+    "originalValue": "hsl(357, 60.2%, 31.8%)"
+  },
+  "color.red.dark.borderHover": {
+    "cssName": "--red-border-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(358, 65.0%, 40.4%)",
+    "originalValue": "hsl(358, 65.0%, 40.4%)"
+  },
+  "color.red.dark.solid": {
+    "cssName": "--red-solid",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(358, 75.0%, 59.0%)",
+    "originalValue": "hsl(358, 75.0%, 59.0%)"
+  },
+  "color.red.dark.solidHover": {
+    "cssName": "--red-solid-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(358, 85.3%, 64.0%)",
+    "originalValue": "hsl(358, 85.3%, 64.0%)"
+  },
+  "color.red.dark.textSecondary": {
+    "cssName": "--red-text-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(358, 100%, 69.5%)",
+    "originalValue": "hsl(358, 100%, 69.5%)"
+  },
+  "color.red.dark.text": {
+    "cssName": "--red-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(351, 89.0%, 96.0%)",
+    "originalValue": "hsl(351, 89.0%, 96.0%)"
+  },
+  "color.yellow.light.bg": {
+    "cssName": "--yellow-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(60, 54.0%, 98.5%)",
+    "originalValue": "hsl(60, 54.0%, 98.5%)"
+  },
+  "color.yellow.light.bgSecondary": {
+    "cssName": "--yellow-bg-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(52, 100%, 95.5%)",
+    "originalValue": "hsl(52, 100%, 95.5%)"
+  },
+  "color.yellow.light.componentBg": {
+    "cssName": "--yellow-component-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(55, 100%, 90.9%)",
+    "originalValue": "hsl(55, 100%, 90.9%)"
+  },
+  "color.yellow.light.componentBgHover": {
+    "cssName": "--yellow-component-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(54, 100%, 86.6%)",
+    "originalValue": "hsl(54, 100%, 86.6%)"
+  },
+  "color.yellow.light.componentBgActive": {
+    "cssName": "--yellow-component-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(52, 97.9%, 82.0%)",
+    "originalValue": "hsl(52, 97.9%, 82.0%)"
+  },
+  "color.yellow.light.line": {
+    "cssName": "--yellow-line",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(50, 89.4%, 76.1%)",
+    "originalValue": "hsl(50, 89.4%, 76.1%)"
+  },
+  "color.yellow.light.border": {
+    "cssName": "--yellow-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(47, 80.4%, 68.0%)",
+    "originalValue": "hsl(47, 80.4%, 68.0%)"
+  },
+  "color.yellow.light.borderHover": {
+    "cssName": "--yellow-border-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(48, 100%, 46.1%)",
+    "originalValue": "hsl(48, 100%, 46.1%)"
+  },
+  "color.yellow.light.solidHover": {
+    "cssName": "--yellow-solid-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "#FDCE45",
+    "originalValue": "{color.brand.yellow}"
+  },
+  "color.yellow.light.textSecondary": {
+    "cssName": "--yellow-text-secondary",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(42, 100%, 29.0%)",
+    "originalValue": "hsl(42, 100%, 29.0%)"
+  },
+  "color.yellow.light.text": {
+    "cssName": "--yellow-text",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(40, 55.0%, 13.5%)",
+    "originalValue": "hsl(40, 55.0%, 13.5%)"
+  },
+  "color.yellow.dark.bg": {
+    "cssName": "--yellow-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 100%, 5.5%)",
+    "originalValue": "hsl(45, 100%, 5.5%)"
+  },
+  "color.yellow.dark.bgSecondary": {
+    "cssName": "--yellow-bg-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(46, 100%, 6.7%)",
+    "originalValue": "hsl(46, 100%, 6.7%)"
+  },
+  "color.yellow.dark.componentBg": {
+    "cssName": "--yellow-component-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 100%, 8.7%)",
+    "originalValue": "hsl(45, 100%, 8.7%)"
+  },
+  "color.yellow.dark.componentBgHover": {
+    "cssName": "--yellow-component-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(45, 100%, 10.4%)",
+    "originalValue": "hsl(45, 100%, 10.4%)"
+  },
+  "color.yellow.dark.componentBgActive": {
+    "cssName": "--yellow-component-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(47, 100%, 12.1%)",
+    "originalValue": "hsl(47, 100%, 12.1%)"
+  },
+  "color.yellow.dark.line": {
+    "cssName": "--yellow-line",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(49, 100%, 14.3%)",
+    "originalValue": "hsl(49, 100%, 14.3%)"
+  },
+  "color.yellow.dark.border": {
+    "cssName": "--yellow-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(49, 90.3%, 18.4%)",
+    "originalValue": "hsl(49, 90.3%, 18.4%)"
+  },
+  "color.yellow.dark.borderHover": {
+    "cssName": "--yellow-border-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(50, 100%, 22.0%)",
+    "originalValue": "hsl(50, 100%, 22.0%)"
+  },
+  "color.yellow.dark.solidHover": {
+    "cssName": "--yellow-solid-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "#FDCE45",
+    "originalValue": "{color.brand.yellow}"
+  },
+  "color.yellow.dark.textSecondary": {
+    "cssName": "--yellow-text-secondary",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(48, 100%, 47.0%)",
+    "originalValue": "hsl(48, 100%, 47.0%)"
+  },
+  "color.yellow.dark.text": {
+    "cssName": "--yellow-text",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(53, 100%, 91.0%)",
+    "originalValue": "hsl(53, 100%, 91.0%)"
+  },
+  "color.transfer.light.lime3": {
+    "cssName": "--lime-3",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(85, 76.0%, 92.3%)",
+    "originalValue": "hsl(85, 76.0%, 92.3%)"
+  },
+  "color.transfer.dark.lime3": {
+    "cssName": "--lime-3",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(85, 45%, 12%)",
+    "originalValue": "hsl(85, 45%, 12%)"
+  },
+  "elevation.shadowColor": {
+    "cssName": "--shadow-color",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "hsl(0, 0%, 78.0%)"
+  },
+  "elevation.color": {
+    "cssName": "--shadow",
+    "type": "color",
+    "mode": "global",
+    "value": "hsl(0, 0%, 78.0%)",
+    "originalValue": "hsl(0, 0%, 78.0%)"
+  },
+  "elevation.sm": {
+    "cssName": "--shadow-sm",
+    "type": "string",
+    "mode": "global",
+    "value": "0 1px 2px hsla(0, 0%, 0%, 0.05)",
+    "originalValue": "0 1px 2px hsla(0, 0%, 0%, 0.05)"
+  },
+  "elevation.md": {
+    "cssName": "--shadow-md",
+    "type": "string",
+    "mode": "global",
+    "value": "0 4px 12px hsla(0, 0%, 0%, 0.08)",
+    "originalValue": "0 4px 12px hsla(0, 0%, 0%, 0.08)"
+  },
+  "elevation.lg": {
+    "cssName": "--shadow-lg",
+    "type": "string",
+    "mode": "global",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.12)",
+    "originalValue": "0 16px 40px hsla(0, 0%, 0%, 0.12)"
+  },
+  "elevation.focusColor": {
+    "cssName": "--shadow-focus-color",
+    "type": "color",
+    "mode": "global",
+    "value": "hsla(47, 100%, 65%, 0.35)",
+    "originalValue": "hsla(47, 100%, 65%, 0.35)"
+  },
+  "elevation.focus": {
+    "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)"
+  },
+  "typography.fontFamily.sans": {
+    "cssName": "--font-sans",
+    "type": "fontFamily",
+    "mode": "global",
+    "value": "\"GT America\", sans-serif",
+    "originalValue": "\"GT America\", sans-serif"
+  },
+  "typography.fontFamily.display": {
+    "cssName": "--font-display",
+    "type": "fontFamily",
+    "mode": "global",
+    "value": "\"GT America\", sans-serif",
+    "originalValue": "\"GT America\", sans-serif"
+  },
+  "typography.fontFamily.uiMono": {
+    "cssName": "--font-ui-mono",
+    "type": "fontFamily",
+    "mode": "global",
+    "value": "\"GT America Mono\", monospace",
+    "originalValue": "\"GT America Mono\", monospace"
+  },
+  "typography.fontFamily.mono": {
+    "cssName": "--font-mono",
+    "type": "fontFamily",
+    "mode": "global",
+    "value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
+    "originalValue": "\"Berkeley Mono\", \"GT America Mono\", monospace"
+  },
+  "typography.fontSize.xs": {
+    "cssName": "--fs-xs",
+    "type": "dimension",
+    "mode": "global",
+    "value": "0.75rem",
+    "originalValue": "0.75rem"
+  },
+  "typography.fontSize.sm": {
+    "cssName": "--fs-sm",
+    "type": "dimension",
+    "mode": "global",
+    "value": "0.8125rem",
+    "originalValue": "0.8125rem"
+  },
+  "typography.fontSize.base": {
+    "cssName": "--fs-base",
+    "type": "dimension",
+    "mode": "global",
+    "value": "0.875rem",
+    "originalValue": "0.875rem"
+  },
+  "typography.fontSize.md": {
+    "cssName": "--fs-md",
+    "type": "dimension",
+    "mode": "global",
+    "value": "1rem",
+    "originalValue": "1rem"
+  },
+  "typography.fontSize.lg": {
+    "cssName": "--fs-lg",
+    "type": "dimension",
+    "mode": "global",
+    "value": "1.125rem",
+    "originalValue": "1.125rem"
+  },
+  "typography.fontSize.xl": {
+    "cssName": "--fs-xl",
+    "type": "dimension",
+    "mode": "global",
+    "value": "1.5rem",
+    "originalValue": "1.5rem"
+  },
+  "typography.fontSize.2xl": {
+    "cssName": "--fs-2xl",
+    "type": "dimension",
+    "mode": "global",
+    "value": "2rem",
+    "originalValue": "2rem"
+  },
+  "typography.fontSize.3xl": {
+    "cssName": "--fs-3xl",
+    "type": "dimension",
+    "mode": "global",
+    "value": "3rem",
+    "originalValue": "3rem"
+  },
+  "typography.fontSize.4xl": {
+    "cssName": "--fs-4xl",
+    "type": "dimension",
+    "mode": "global",
+    "value": "4rem",
+    "originalValue": "4rem"
+  },
+  "typography.fontSize.display": {
+    "cssName": "--fs-display",
+    "type": "dimension",
+    "mode": "global",
+    "value": "6rem",
+    "originalValue": "6rem"
+  },
+  "typography.lineHeight.tight": {
+    "cssName": "--lh-tight",
+    "type": "number",
+    "mode": "global",
+    "value": "1.1",
+    "originalValue": "1.1"
+  },
+  "typography.lineHeight.snug": {
+    "cssName": "--lh-snug",
+    "type": "number",
+    "mode": "global",
+    "value": "1.25",
+    "originalValue": "1.25"
+  },
+  "typography.lineHeight.normal": {
+    "cssName": "--lh-normal",
+    "type": "number",
+    "mode": "global",
+    "value": "1.45",
+    "originalValue": "1.45"
+  },
+  "typography.lineHeight.loose": {
+    "cssName": "--lh-loose",
+    "type": "number",
+    "mode": "global",
+    "value": "1.6",
+    "originalValue": "1.6"
+  },
+  "typography.fontWeight.regular": {
+    "cssName": "--fw-regular",
+    "type": "fontWeight",
+    "mode": "global",
+    "value": "400",
+    "originalValue": "400"
+  },
+  "typography.fontWeight.medium": {
+    "cssName": "--fw-medium",
+    "type": "fontWeight",
+    "mode": "global",
+    "value": "500",
+    "originalValue": "500"
+  },
+  "typography.fontWeight.bold": {
+    "cssName": "--fw-bold",
+    "type": "fontWeight",
+    "mode": "global",
+    "value": "700",
+    "originalValue": "700"
+  },
+  "typography.fontWeight.black": {
+    "cssName": "--fw-black",
+    "type": "fontWeight",
+    "mode": "global",
+    "value": "900",
+    "originalValue": "900"
+  },
+  "typography.letterSpacing.tight": {
+    "cssName": "--tracking-tight",
+    "type": "dimension",
+    "mode": "global",
+    "value": "-0.02em",
+    "originalValue": "-0.02em"
+  },
+  "typography.letterSpacing.normal": {
+    "cssName": "--tracking-normal",
+    "type": "number",
+    "mode": "global",
+    "value": "0",
+    "originalValue": "0"
+  },
+  "typography.letterSpacing.wide": {
+    "cssName": "--tracking-wide",
+    "type": "dimension",
+    "mode": "global",
+    "value": "0.02em",
+    "originalValue": "0.02em"
+  },
+  "typography.letterSpacing.uppercase": {
+    "cssName": "--tracking-uppercase",
+    "type": "dimension",
+    "mode": "global",
+    "value": "0.08em",
+    "originalValue": "0.08em"
+  },
+  "spacing.0": {
+    "cssName": "--space-0",
+    "type": "dimension",
+    "mode": "global",
+    "value": "0",
+    "originalValue": "0"
+  },
+  "spacing.1": {
+    "cssName": "--space-1",
+    "type": "dimension",
+    "mode": "global",
+    "value": "4px",
+    "originalValue": "4px"
+  },
+  "spacing.2": {
+    "cssName": "--space-2",
+    "type": "dimension",
+    "mode": "global",
+    "value": "8px",
+    "originalValue": "8px"
+  },
+  "spacing.3": {
+    "cssName": "--space-3",
+    "type": "dimension",
+    "mode": "global",
+    "value": "16px",
+    "originalValue": "16px"
+  },
+  "spacing.4": {
+    "cssName": "--space-4",
+    "type": "dimension",
+    "mode": "global",
+    "value": "32px",
+    "originalValue": "32px"
+  },
+  "spacing.5": {
+    "cssName": "--space-5",
+    "type": "dimension",
+    "mode": "global",
+    "value": "64px",
+    "originalValue": "64px"
+  },
+  "spacing.6": {
+    "cssName": "--space-6",
+    "type": "dimension",
+    "mode": "global",
+    "value": "128px",
+    "originalValue": "128px"
+  },
+  "spacing.7": {
+    "cssName": "--space-7",
+    "type": "dimension",
+    "mode": "global",
+    "value": "256px",
+    "originalValue": "256px"
+  },
+  "spacing.8": {
+    "cssName": "--space-8",
+    "type": "dimension",
+    "mode": "global",
+    "value": "512px",
+    "originalValue": "512px"
+  },
+  "radius.sm": {
+    "cssName": "--radius-sm",
+    "type": "dimension",
+    "mode": "global",
+    "value": "4px",
+    "originalValue": "4px"
+  },
+  "radius.default": {
+    "cssName": "--radius",
+    "type": "dimension",
+    "mode": "global",
+    "value": "6px",
+    "originalValue": "6px"
+  },
+  "radius.md": {
+    "cssName": "--radius-md",
+    "type": "dimension",
+    "mode": "global",
+    "value": "8px",
+    "originalValue": "8px"
+  },
+  "radius.lg": {
+    "cssName": "--radius-lg",
+    "type": "dimension",
+    "mode": "global",
+    "value": "10px",
+    "originalValue": "10px"
+  },
+  "radius.pill": {
+    "cssName": "--radius-pill",
+    "type": "dimension",
+    "mode": "global",
+    "value": "999px",
+    "originalValue": "999px"
+  },
+  "border.width": {
+    "cssName": "--border-width",
+    "type": "dimension",
+    "mode": "global",
+    "value": "1px",
+    "originalValue": "1px"
+  },
+  "motion.easing.out": {
+    "cssName": "--ease-out",
+    "type": "cubicBezier",
+    "mode": "global",
+    "value": "cubic-bezier(0.22, 1, 0.36, 1)",
+    "originalValue": "cubic-bezier(0.22, 1, 0.36, 1)"
+  },
+  "motion.easing.inOut": {
+    "cssName": "--ease-in-out",
+    "type": "cubicBezier",
+    "mode": "global",
+    "value": "cubic-bezier(0.65, 0, 0.35, 1)",
+    "originalValue": "cubic-bezier(0.65, 0, 0.35, 1)"
+  },
+  "motion.duration.fast": {
+    "cssName": "--dur-fast",
+    "type": "duration",
+    "mode": "global",
+    "value": "120ms",
+    "originalValue": "120ms"
+  },
+  "motion.duration.base": {
+    "cssName": "--dur-base",
+    "type": "duration",
+    "mode": "global",
+    "value": "200ms",
+    "originalValue": "200ms"
+  },
+  "motion.duration.slow": {
+    "cssName": "--dur-slow",
+    "type": "duration",
+    "mode": "global",
+    "value": "320ms",
+    "originalValue": "320ms"
+  },
+  "surface.light.htmlBg": {
+    "cssName": "--html-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "hsl(0, 0%, 97.3%)"
+  },
+  "surface.light.appBg": {
+    "cssName": "--app-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "white",
+    "originalValue": "white"
+  },
+  "surface.light.navBg": {
+    "cssName": "--nav-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "white",
+    "originalValue": "white"
+  },
+  "surface.light.navItemBg": {
+    "cssName": "--nav-item-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "transparent",
+    "originalValue": "transparent"
+  },
+  "surface.light.navItemBgHover": {
+    "cssName": "--nav-item-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "hsl(0, 0%, 95.1%)"
+  },
+  "surface.light.navItemBgActive": {
+    "cssName": "--nav-item-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "hsl(0, 0%, 95.1%)"
+  },
+  "surface.light.listItemBg": {
+    "cssName": "--list-item-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "transparent",
+    "originalValue": "transparent"
+  },
+  "surface.light.listItemBgHover": {
+    "cssName": "--list-item-bg-hover",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "hsl(0, 0%, 97.3%)"
+  },
+  "surface.light.listItemBgActive": {
+    "cssName": "--list-item-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 97.3%)",
+    "originalValue": "hsl(0, 0%, 97.3%)"
+  },
+  "surface.light.listItemBorder": {
+    "cssName": "--list-item-border",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 90.9%)",
+    "originalValue": "hsl(0, 0%, 90.9%)"
+  },
+  "surface.light.segmentedControlBg": {
+    "cssName": "--segmented-control-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 95.1%)",
+    "originalValue": "hsl(0, 0%, 95.1%)"
+  },
+  "surface.light.segmentedControlBgActive": {
+    "cssName": "--segmented-control-bg-active",
+    "type": "color",
+    "mode": "light",
+    "value": "white",
+    "originalValue": "white"
+  },
+  "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%)"
+  },
+  "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%)"
+  },
+  "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%)"
+  },
+  "surface.light.transferListItemPassiveBg": {
+    "cssName": "--transfer-list-item-passive-bg",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 99.0%)",
+    "originalValue": "hsl(0, 0%, 99.0%)"
+  },
+  "surface.light.hiContrast": {
+    "cssName": "--hi-contrast",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 9.0%)",
+    "originalValue": "hsl(0, 0%, 9.0%)"
+  },
+  "surface.light.loContrast": {
+    "cssName": "--lo-contrast",
+    "type": "color",
+    "mode": "light",
+    "value": "hsl(0, 0%, 99.0%)",
+    "originalValue": "hsl(0, 0%, 99.0%)"
+  },
+  "surface.light.transparent": {
+    "cssName": "--transparent",
+    "type": "color",
+    "mode": "light",
+    "value": "transparent",
+    "originalValue": "transparent"
+  },
+  "surface.light.overlayInline": {
+    "cssName": "--overlay-inline",
+    "type": "color",
+    "mode": "light",
+    "value": "hsla(0, 0%, 0%, 0.047)",
+    "originalValue": "hsla(0, 0%, 0%, 0.047)"
+  },
+  "surface.light.overlayFull": {
+    "cssName": "--overlay-full",
+    "type": "color",
+    "mode": "light",
+    "value": "hsla(0, 0%, 0%, 0.439)",
+    "originalValue": "hsla(0, 0%, 0%, 0.439)"
+  },
+  "surface.dark.htmlBg": {
+    "cssName": "--html-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "black",
+    "originalValue": "black"
+  },
+  "surface.dark.appBg": {
+    "cssName": "--app-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "hsl(0, 0%, 8.5%)"
+  },
+  "surface.dark.navBg": {
+    "cssName": "--nav-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "hsl(0, 0%, 8.5%)"
+  },
+  "surface.dark.navItemBg": {
+    "cssName": "--nav-item-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "transparent",
+    "originalValue": "transparent"
+  },
+  "surface.dark.navItemBgHover": {
+    "cssName": "--nav-item-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "hsl(0, 0%, 13.6%)"
+  },
+  "surface.dark.navItemBgActive": {
+    "cssName": "--nav-item-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "hsl(0, 0%, 13.6%)"
+  },
+  "surface.dark.listItemBg": {
+    "cssName": "--list-item-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "transparent",
+    "originalValue": "transparent"
+  },
+  "surface.dark.listItemBgHover": {
+    "cssName": "--list-item-bg-hover",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "hsl(0, 0%, 11.0%)"
+  },
+  "surface.dark.listItemBgActive": {
+    "cssName": "--list-item-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "hsl(0, 0%, 11.0%)"
+  },
+  "surface.dark.listItemBorder": {
+    "cssName": "--list-item-border",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 17.9%)",
+    "originalValue": "hsl(0, 0%, 17.9%)"
+  },
+  "surface.dark.segmentedControlBg": {
+    "cssName": "--segmented-control-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "hsl(0, 0%, 8.5%)"
+  },
+  "surface.dark.segmentedControlBgActive": {
+    "cssName": "--segmented-control-bg-active",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "hsl(0, 0%, 13.6%)"
+  },
+  "surface.dark.transferListItemCompletingBg": {
+    "cssName": "--transfer-list-item-completing-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "hsl(0, 0%, 13.6%)"
+  },
+  "surface.dark.transferListItemDownloadingBg": {
+    "cssName": "--transfer-list-item-downloading-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 13.6%)",
+    "originalValue": "hsl(0, 0%, 13.6%)"
+  },
+  "surface.dark.transferListItemFinishedBg": {
+    "cssName": "--transfer-list-item-finished-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "hsl(0, 0%, 11.0%)"
+  },
+  "surface.dark.transferListItemPassiveBg": {
+    "cssName": "--transfer-list-item-passive-bg",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 11.0%)",
+    "originalValue": "hsl(0, 0%, 11.0%)"
+  },
+  "surface.dark.hiContrast": {
+    "cssName": "--hi-contrast",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 93.0%)",
+    "originalValue": "hsl(0, 0%, 93.0%)"
+  },
+  "surface.dark.loContrast": {
+    "cssName": "--lo-contrast",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsl(0, 0%, 8.5%)",
+    "originalValue": "hsl(0, 0%, 8.5%)"
+  },
+  "surface.dark.overlayInline": {
+    "cssName": "--overlay-inline",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsla(0, 0%, 0%, 0.439)",
+    "originalValue": "hsla(0, 0%, 0%, 0.439)"
+  },
+  "surface.dark.overlayFull": {
+    "cssName": "--overlay-full",
+    "type": "color",
+    "mode": "dark",
+    "value": "hsla(0, 0%, 0%, 0.565)",
+    "originalValue": "hsla(0, 0%, 0%, 0.565)"
+  },
+  "surface.dark.shadowColor": {
+    "cssName": "--shadow-color",
+    "type": "color",
+    "mode": "dark",
+    "value": "black",
+    "originalValue": "black"
+  },
+  "surface.dark.shadow": {
+    "cssName": "--shadow",
+    "type": "color",
+    "mode": "dark",
+    "value": "black",
+    "originalValue": "black"
+  },
+  "surface.dark.shadowSm": {
+    "cssName": "--shadow-sm",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 1px 2px hsla(0, 0%, 0%, 0.4)",
+    "originalValue": "0 1px 2px hsla(0, 0%, 0%, 0.4)"
+  },
+  "surface.dark.shadowMd": {
+    "cssName": "--shadow-md",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 4px 12px hsla(0, 0%, 0%, 0.5)",
+    "originalValue": "0 4px 12px hsla(0, 0%, 0%, 0.5)"
+  },
+  "surface.dark.shadowLg": {
+    "cssName": "--shadow-lg",
+    "type": "string",
+    "mode": "dark",
+    "value": "0 16px 40px hsla(0, 0%, 0%, 0.6)",
+    "originalValue": "0 16px 40px hsla(0, 0%, 0%, 0.6)"
+  }
+};