@putdotio/design 1.3.0 → 1.5.0

package/dist/tokens.dtcg.json

@@ -215,6 +215,28 @@
         }
       },
       "info": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.neutral.light.solid}",
+          "$description": "Neutral solid command background in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-info-bg",
+              "mode": "light"
+            }
+          }
+        },
+        "backgroundDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.solid}",
+          "$description": "Neutral solid command background in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-info-bg",
+              "mode": "dark"
+            }
+          }
+        },
         "backgroundHover": {
           "$type": "color",
           "$value": "{color.neutral.light.solidHover}",
@@ -236,13 +258,103 @@
               "mode": "dark"
             }
           }
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{component.alias.solidForeground}",
+          "$description": "Label on the neutral solid — mode-aware for AA contrast on the gray fill.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-info-fg",
+              "mode": "light"
+            }
+          }
+        },
+        "foregroundDark": {
+          "$type": "color",
+          "$value": "{component.alias.solidForegroundDark}",
+          "$description": "Label on the neutral solid in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-info-fg",
+              "mode": "dark"
+            }
+          }
+        }
+      },
+      "default": {
+        "background": {
+          "$type": "color",
+          "$value": "{color.neutral.light.componentBg}",
+          "$description": "Quiet default button fill in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-default-bg",
+              "mode": "light"
+            }
+          }
+        },
+        "backgroundDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.componentBg}",
+          "$description": "Quiet default button fill in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-default-bg",
+              "mode": "dark"
+            }
+          }
+        },
+        "backgroundHover": {
+          "$type": "color",
+          "$value": "{color.neutral.light.componentBgHover}",
+          "$description": "Default button hover fill in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-default-bg-hover",
+              "mode": "light"
+            }
+          }
+        },
+        "backgroundHoverDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.componentBgHover}",
+          "$description": "Default button hover fill in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-default-bg-hover",
+              "mode": "dark"
+            }
+          }
+        },
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.neutral.light.text}",
+          "$description": "Default button label in light mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-default-fg",
+              "mode": "light"
+            }
+          }
+        },
+        "foregroundDark": {
+          "$type": "color",
+          "$value": "{color.neutral.dark.text}",
+          "$description": "Default button label in dark mode.",
+          "$extensions": {
+            "putio": {
+              "cssName": "button-default-fg",
+              "mode": "dark"
+            }
+          }
         }
       }
     },
     "input": {
       "background": {
         "$type": "color",
-        "$value": "{surface.light.appBg}",
+        "$value": "{component.field.background}",
         "$extensions": {
           "putio": {
             "cssName": "input-bg",
@@ -252,7 +364,7 @@
       },
       "backgroundDark": {
         "$type": "color",
-        "$value": "{surface.dark.appBg}",
+        "$value": "{component.field.backgroundDark}",
         "$extensions": {
           "putio": {
             "cssName": "input-bg",
@@ -262,7 +374,7 @@
       },
       "border": {
         "$type": "color",
-        "$value": "{color.neutral.light.border}",
+        "$value": "{component.field.border}",
         "$extensions": {
           "putio": {
             "cssName": "input-border",
@@ -272,7 +384,7 @@
       },
       "borderDark": {
         "$type": "color",
-        "$value": "{color.neutral.dark.border}",
+        "$value": "{component.field.borderDark}",
         "$extensions": {
           "putio": {
             "cssName": "input-border",
@@ -282,13 +394,114 @@
       },
       "radius": {
         "$type": "dimension",
-        "$value": "{radius.default}",
+        "$value": "{component.field.radius}",
         "$extensions": {
           "putio": {
             "cssName": "input-radius",
             "mode": "global"
           }
         }
+      },
+      "borderHover": {
+        "$type": "color",
+        "$value": "{component.field.borderHover}",
+        "$description": "shadcn-friendly alias of --field-border-hover. Always aliases the field token so the two name systems cannot drift.",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-border-hover",
+            "mode": "light"
+          }
+        }
+      },
+      "borderHoverDark": {
+        "$type": "color",
+        "$value": "{component.field.borderHoverDark}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-border-hover",
+            "mode": "dark"
+          }
+        }
+      },
+      "borderFocus": {
+        "$type": "color",
+        "$value": "{component.field.borderFocus}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-border-focus",
+            "mode": "light"
+          }
+        }
+      },
+      "borderFocusDark": {
+        "$type": "color",
+        "$value": "{component.field.borderFocusDark}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-border-focus",
+            "mode": "dark"
+          }
+        }
+      },
+      "ring": {
+        "$type": "string",
+        "$value": "{component.field.ring}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-ring",
+            "mode": "light"
+          }
+        }
+      },
+      "ringDark": {
+        "$type": "string",
+        "$value": "{component.field.ringDark}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-ring",
+            "mode": "dark"
+          }
+        }
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{component.field.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-text",
+            "mode": "light"
+          }
+        }
+      },
+      "textDark": {
+        "$type": "color",
+        "$value": "{component.field.textDark}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "placeholder": {
+        "$type": "color",
+        "$value": "{component.field.placeholder}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-placeholder",
+            "mode": "light"
+          }
+        }
+      },
+      "placeholderDark": {
+        "$type": "color",
+        "$value": "{component.field.placeholderDark}",
+        "$extensions": {
+          "putio": {
+            "cssName": "input-placeholder",
+            "mode": "dark"
+          }
+        }
       }
     },
     "field": {
@@ -460,6 +673,18 @@
           }
         }
       },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.default}",
+        "$description": "Shared form-control radius.",
+        "$extensions": {
+          "putio": {
+            "cssName": "field-radius",
+            "mode": "global",
+            "figma": false
+          }
+        }
+      },
       "ring": {
         "$type": "string",
         "$value": "0 0 0 1px {color.neutral.light.borderHover}",
@@ -1023,9 +1248,51 @@
           }
         }
       },
+      "activeBackground": {
+        "$type": "color",
+        "$value": "{surface.light.listItemBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "file-row-bg-active",
+            "mode": "light"
+          }
+        }
+      },
+      "activeBackgroundDark": {
+        "$type": "color",
+        "$value": "{surface.dark.listItemBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "file-row-bg-active",
+            "mode": "dark"
+          }
+        }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{surface.light.listItemBorder}",
+        "$description": "Row divider. File lists divide with a hairline, never zebra stripes or per-row cards.",
+        "$extensions": {
+          "putio": {
+            "cssName": "file-row-border",
+            "mode": "light"
+          }
+        }
+      },
+      "borderDark": {
+        "$type": "color",
+        "$value": "{surface.dark.listItemBorder}",
+        "$extensions": {
+          "putio": {
+            "cssName": "file-row-border",
+            "mode": "dark"
+          }
+        }
+      },
       "icon": {
         "$type": "color",
         "$value": "{color.brand.yellow}",
+        "$description": "Every file kind takes this, not just the folder — folder, video, audio, image, archive, generic file alike. Utility and chrome icons stay neutral.",
         "$extensions": {
           "putio": {
             "cssName": "file-row-icon",
@@ -1074,57 +1341,708 @@
             "mode": "dark"
           }
         }
-      }
-    }
-  },
-  "context": {
-    "tv": {
-      "surface": {
-        "0": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 0%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-0",
-              "mode": "tv"
-            }
-          }
-        },
-        "1": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 3.9%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-1",
-              "mode": "tv"
-            }
-          }
-        },
-        "2": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 8.6%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-2",
-              "mode": "tv"
-            }
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBg}",
+        "$description": "Default toast / inline notification surface.",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-bg",
+            "mode": "light"
           }
-        },
-        "3": {
-          "$type": "color",
-          "$value": "hsl(0, 0%, 12.2%)",
-          "$extensions": {
-            "putio": {
-              "cssName": "surf-3",
-              "mode": "tv"
-            }
+        }
+      },
+      "backgroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-bg",
+            "mode": "dark"
           }
         }
       },
+      "border": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-border",
+            "mode": "light"
+          }
+        }
+      },
+      "borderDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.neutral.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-fg",
+            "mode": "light"
+          }
+        }
+      },
+      "foregroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-fg",
+            "mode": "dark"
+          }
+        }
+      },
+      "icon": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "iconDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBackground": {
+        "$type": "color",
+        "$value": "{color.green.light.bgSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-success-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "successBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.bgSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-success-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBorder": {
+        "$type": "color",
+        "$value": "{color.green.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-success-border",
+            "mode": "light"
+          }
+        }
+      },
+      "successBorderDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-success-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "successForeground": {
+        "$type": "color",
+        "$value": "{color.green.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-success-fg",
+            "mode": "light"
+          }
+        }
+      },
+      "successForegroundDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-success-fg",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBorder": {
+        "$type": "color",
+        "$value": "{color.red.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-danger-border",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBorderDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-danger-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerForeground": {
+        "$type": "color",
+        "$value": "{color.red.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-danger-fg",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerForegroundDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-danger-fg",
+            "mode": "dark"
+          }
+        }
+      }
+    },
+    "menu": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBg}",
+        "$description": "Floating menu surface.",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "backgroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-border",
+            "mode": "light"
+          }
+        }
+      },
+      "borderDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.md}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-radius",
+            "mode": "global"
+          }
+        }
+      },
+      "shadow": {
+        "$type": "string",
+        "$value": "{elevation.lg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-shadow",
+            "mode": "light"
+          }
+        }
+      },
+      "shadowDark": {
+        "$type": "string",
+        "$value": "{surface.dark.shadowLg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-shadow",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBackgroundHover": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-bg-hover",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBackgroundHoverDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-bg-hover",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemText": {
+        "$type": "color",
+        "$value": "{color.neutral.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-text",
+            "mode": "light"
+          }
+        }
+      },
+      "itemTextDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemIcon": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "itemIconDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemShortcut": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-shortcut",
+            "mode": "light"
+          }
+        }
+      },
+      "itemShortcutDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-shortcut",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemDangerText": {
+        "$type": "color",
+        "$value": "{color.red.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-danger-text",
+            "mode": "light"
+          }
+        }
+      },
+      "itemDangerTextDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-danger-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemDangerBackgroundHover": {
+        "$type": "color",
+        "$value": "{color.red.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-danger-bg-hover",
+            "mode": "light"
+          }
+        }
+      },
+      "itemDangerBackgroundHoverDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-danger-bg-hover",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemHeight": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-item-height",
+            "mode": "global"
+          }
+        }
+      },
+      "separator": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-separator",
+            "mode": "light"
+          }
+        }
+      },
+      "separatorDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-separator",
+            "mode": "dark"
+          }
+        }
+      },
+      "label": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-label",
+            "mode": "light"
+          }
+        }
+      },
+      "labelDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "menu-label",
+            "mode": "dark"
+          }
+        }
+      }
+    },
+    "palette": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBg}",
+        "$description": "Command palette surface.",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "backgroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-border",
+            "mode": "light"
+          }
+        }
+      },
+      "borderDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "shadow": {
+        "$type": "string",
+        "$value": "{elevation.lg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-shadow",
+            "mode": "light"
+          }
+        }
+      },
+      "shadowDark": {
+        "$type": "string",
+        "$value": "{surface.dark.shadowLg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-shadow",
+            "mode": "dark"
+          }
+        }
+      },
+      "scrim": {
+        "$type": "color",
+        "$value": "{surface.light.overlayFull}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-scrim",
+            "mode": "light"
+          }
+        }
+      },
+      "scrimDark": {
+        "$type": "color",
+        "$value": "{surface.dark.overlayFull}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-scrim",
+            "mode": "dark"
+          }
+        }
+      },
+      "width": {
+        "$type": "dimension",
+        "$value": "560px",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-width",
+            "mode": "global"
+          }
+        }
+      },
+      "inputHeight": {
+        "$type": "dimension",
+        "$value": "48px",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-input-height",
+            "mode": "global"
+          }
+        }
+      },
+      "itemHeight": {
+        "$type": "dimension",
+        "$value": "36px",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-item-height",
+            "mode": "global"
+          }
+        }
+      },
+      "itemBackgroundActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-item-bg-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBackgroundActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-item-bg-active",
+            "mode": "dark"
+          }
+        }
+      },
+      "groupLabel": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-group-label",
+            "mode": "light"
+          }
+        }
+      },
+      "groupLabelDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-group-label",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemMeta": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-item-meta",
+            "mode": "light"
+          }
+        }
+      },
+      "itemMetaDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "palette-item-meta",
+            "mode": "dark"
+          }
+        }
+      }
+    },
+    "sheet": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBg}",
+        "$description": "Right-side detail panel surface.",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "backgroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-border",
+            "mode": "light"
+          }
+        }
+      },
+      "borderDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "shadow": {
+        "$type": "string",
+        "$value": "{elevation.lg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-shadow",
+            "mode": "light"
+          }
+        }
+      },
+      "shadowDark": {
+        "$type": "string",
+        "$value": "{surface.dark.shadowLg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-shadow",
+            "mode": "dark"
+          }
+        }
+      },
+      "scrim": {
+        "$type": "color",
+        "$value": "{surface.light.overlayFull}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-scrim",
+            "mode": "light"
+          }
+        }
+      },
+      "scrimDark": {
+        "$type": "color",
+        "$value": "{surface.dark.overlayFull}",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-scrim",
+            "mode": "dark"
+          }
+        }
+      },
+      "width": {
+        "$type": "dimension",
+        "$value": "380px",
+        "$description": "Fixed on web. Touch surfaces use a bottom sheet instead.",
+        "$extensions": {
+          "putio": {
+            "cssName": "sheet-width",
+            "mode": "global"
+          }
+        }
+      }
+    }
+  },
+  "context": {
+    "tv": {
       "text": {
+        "$description": "TV uses two semantic text roles. The tertiary name remains as a deprecated alias of secondary so existing consumers keep working; TV text is solid.",
         "primary": {
           "$type": "color",
-          "$value": "hsl(0, 0%, 95.7%)",
+          "$value": "{color.neutral.dark.text}",
+          "$description": "Row titles, modal option labels, and button labels.",
           "$extensions": {
             "putio": {
               "cssName": "text-1",
@@ -1134,7 +2052,8 @@
         },
         "secondary": {
           "$type": "color",
-          "$value": "hsla(0, 0%, 95.7%, 0.62)",
+          "$value": "{color.neutral.dark.textSecondary}",
+          "$description": "Row sublines, modal titles, section headers, and accessories.",
           "$extensions": {
             "putio": {
               "cssName": "text-2",
@@ -1144,174 +2063,334 @@
         },
         "tertiary": {
           "$type": "color",
-          "$value": "hsla(0, 0%, 95.7%, 0.38)",
+          "$value": "{context.tv.text.secondary}",
+          "$description": "Deprecated compatibility alias. Use context.tv.text.secondary.",
           "$extensions": {
             "putio": {
               "cssName": "text-3",
-              "mode": "tv"
+              "mode": "tv",
+              "deprecated": true
             }
           }
         }
       },
-      "glass": {
-        "1": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.06)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-1-bg",
-              "mode": "tv"
+      "channelArt": {
+        "production": {
+          "posterBackground": {
+            "$type": "color",
+            "$value": "hsl(0, 0%, 20%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-production-poster-bg",
+                "mode": "tv"
+              }
             }
-          }
-        },
-        "2": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.10)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-2-bg",
-              "mode": "tv"
+          },
+          "splashBackground": {
+            "$type": "color",
+            "$value": "{color.neutral.dark.bg}",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-production-splash-bg",
+                "mode": "tv"
+              }
             }
           }
         },
-        "3": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.14)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-3-bg",
-              "mode": "tv"
+        "development": {
+          "background": {
+            "$type": "color",
+            "$value": "hsl(206.7, 78.8%, 52%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-development-bg",
+                "mode": "tv"
+              }
             }
-          }
-        },
-        "border": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.12)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-border",
-              "mode": "tv"
+          },
+          "accent": {
+            "$type": "color",
+            "$value": "hsl(206.3, 100%, 81.2%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-development-accent",
+                "mode": "tv"
+              }
+            }
+          },
+          "grid": {
+            "$type": "color",
+            "$value": "hsla(0, 0%, 100%, 0.18)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-development-grid",
+                "mode": "tv"
+              }
             }
           }
         },
-        "borderStrong": {
-          "$type": "color",
-          "$value": "hsla(0, 0%, 100%, 0.22)",
-          "$extensions": {
-            "putio": {
-              "cssName": "glass-border-strong",
-              "mode": "tv"
+        "lab": {
+          "background": {
+            "$type": "color",
+            "$value": "hsl(120, 20%, 4.9%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-lab-bg",
+                "mode": "tv"
+              }
+            }
+          },
+          "foreground": {
+            "$type": "color",
+            "$value": "hsl(111.1, 100%, 94.7%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-lab-fg",
+                "mode": "tv"
+              }
+            }
+          },
+          "accent": {
+            "$type": "color",
+            "$value": "hsl(110.6, 100%, 53.9%)",
+            "$extensions": {
+              "putio": {
+                "cssName": "tv-channel-art-lab-accent",
+                "mode": "tv"
+              }
             }
           }
         }
+      }
+    }
+  },
+  "tv": {
+    "$description": "The portable 10-foot scale. These mode \"tv\" tokens are graph data for platform adapters and are not emitted into web CSS; preview support CSS declares matching --tv-* properties under .tv. TV has no mono face, and its z-order is distinct from the web stack.",
+    "text": {
+      "heading": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$description": "text.heading · GTAmerica-Md.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-text-heading",
+            "mode": "tv"
+          }
+        }
+      },
+      "label": {
+        "$type": "dimension",
+        "$value": "48px",
+        "$description": "text.label · GTAmerica-Md. Screen titles, and the file-row icon size.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-text-label",
+            "mode": "tv"
+          }
+        }
+      },
+      "body": {
+        "$type": "dimension",
+        "$value": "36px",
+        "$description": "text.body · GTAmerica-Rg. The file-row title.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-text-body",
+            "mode": "tv"
+          }
+        }
+      },
+      "caption": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "text.caption · GTAmerica-Rg. Row subline and button icons. TV has no mono face — the size subline renders in GT America with tabular figures, so the Berkeley Mono numeric rule is web and mobile only.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-text-caption",
+            "mode": "tv"
+          }
+        }
+      },
+      "smol": {
+        "$type": "dimension",
+        "$value": "24px",
+        "$description": "text.smol · GTAmerica-Rg. Button labels, rendered uppercase.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-text-smol",
+            "mode": "tv"
+          }
+        }
+      }
+    },
+    "fontWeight": {
+      "regular": {
+        "$type": "fontWeight",
+        "$value": "400",
+        "$description": "GTAmerica-Rg.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-fw-regular",
+            "mode": "tv"
+          }
+        }
+      },
+      "medium": {
+        "$type": "fontWeight",
+        "$value": "500",
+        "$description": "GTAmerica-Md.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-fw-medium",
+            "mode": "tv"
+          }
+        }
+      }
+    },
+    "space": {
+      "xxs": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-xxs",
+            "mode": "tv"
+          }
+        }
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "8px",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-xs",
+            "mode": "tv"
+          }
+        }
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "16px",
+        "$description": "Button padding at size=\"sm\".",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-sm",
+            "mode": "tv"
+          }
+        }
+      },
+      "md": {
+        "$type": "dimension",
+        "$value": "32px",
+        "$description": "The workhorse step: uniform list-row padding, row gap, and header padding-bottom.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-md",
+            "mode": "tv"
+          }
+        }
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "64px",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-lg",
+            "mode": "tv"
+          }
+        }
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "128px",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-xl",
+            "mode": "tv"
+          }
+        }
+      },
+      "xxl": {
+        "$type": "dimension",
+        "$value": "256px",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-space-xxl",
+            "mode": "tv"
+          }
+        }
+      }
+    },
+    "overscan": {
+      "x": {
+        "$type": "number",
+        "$value": 0.04,
+        "$description": "Horizontal safe-area ratio. Platform adapters multiply this value by viewport width.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-overscan-x",
+            "mode": "tv",
+            "basis": "viewport-width"
+          }
+        }
       },
-      "focus": {
-        "ring": {
-          "$type": "color",
-          "$value": "hsla(44.7, 97.9%, 63.1%, 0.18)",
-          "$extensions": {
-            "putio": {
-              "cssName": "focus-ring",
-              "mode": "tv"
-            }
+      "y": {
+        "$type": "number",
+        "$value": 0.02,
+        "$description": "Vertical safe-area ratio. Platform adapters multiply this value by viewport height.",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-overscan-y",
+            "mode": "tv",
+            "basis": "viewport-height"
           }
-        },
-        "liftShadow": {
-          "$type": "string",
-          "$value": "0 14px 30px hsla(0, 0%, 0%, 0.45)",
-          "$extensions": {
-            "putio": {
-              "cssName": "focus-shadow",
-              "mode": "tv"
-            }
+        }
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.tv}",
+      "$description": "radii.default — one radius for every 10-foot surface.",
+      "$extensions": {
+        "putio": {
+          "cssName": "tv-radius",
+          "mode": "tv"
+        }
+      }
+    },
+    "z": {
+      "$description": "zIndices. NOT the web --z-* order: on TV, overlay sits ABOVE toast. Emit the two scales separately and never fold TV into the web stack order.",
+      "modal": {
+        "$type": "number",
+        "$value": 100,
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-z-modal",
+            "mode": "tv",
+            "category": "other"
           }
         }
       },
-      "channelArt": {
-        "production": {
-          "posterBackground": {
-            "$type": "color",
-            "$value": "hsl(0, 0%, 20%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-production-poster-bg",
-                "mode": "tv"
-              }
-            }
-          },
-          "splashBackground": {
-            "$type": "color",
-            "$value": "{color.neutral.dark.bg}",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-production-splash-bg",
-                "mode": "tv"
-              }
-            }
-          }
-        },
-        "development": {
-          "background": {
-            "$type": "color",
-            "$value": "hsl(206.7, 78.8%, 52%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-development-bg",
-                "mode": "tv"
-              }
-            }
-          },
-          "accent": {
-            "$type": "color",
-            "$value": "hsl(206.3, 100%, 81.2%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-development-accent",
-                "mode": "tv"
-              }
-            }
-          },
-          "grid": {
-            "$type": "color",
-            "$value": "hsla(0, 0%, 100%, 0.18)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-development-grid",
-                "mode": "tv"
-              }
-            }
+      "toast": {
+        "$type": "number",
+        "$value": 200,
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-z-toast",
+            "mode": "tv",
+            "category": "other"
           }
-        },
-        "lab": {
-          "background": {
-            "$type": "color",
-            "$value": "hsl(120, 20%, 4.9%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-lab-bg",
-                "mode": "tv"
-              }
-            }
-          },
-          "foreground": {
-            "$type": "color",
-            "$value": "hsl(111.1, 100%, 94.7%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-lab-fg",
-                "mode": "tv"
-              }
-            }
-          },
-          "accent": {
-            "$type": "color",
-            "$value": "hsl(110.6, 100%, 53.9%)",
-            "$extensions": {
-              "putio": {
-                "cssName": "tv-channel-art-lab-accent",
-                "mode": "tv"
-              }
-            }
+        }
+      },
+      "overlay": {
+        "$type": "number",
+        "$value": 300,
+        "$description": "Above toast — the opposite of the web scale, where --z-notification (1400) sits above --z-modal (1300).",
+        "$extensions": {
+          "putio": {
+            "cssName": "tv-z-overlay",
+            "mode": "tv",
+            "category": "other"
           }
         }
       }
@@ -1784,7 +2863,7 @@
         },
         "solid": {
           "$type": "color",
-          "$value": "hsl(151, 55%, 41.5%)",
+          "$value": "{color.green.light.solid}",
           "$extensions": {
             "putio": {
               "cssName": "green-solid",
@@ -2030,7 +3109,7 @@
         },
         "solid": {
           "$type": "color",
-          "$value": "hsl(358, 75%, 59%)",
+          "$value": "{color.red.light.solid}",
           "$extensions": {
             "putio": {
               "cssName": "red-solid",
@@ -2267,7 +3346,7 @@
         },
         "solidHover": {
           "$type": "color",
-          "$value": "hsl(45, 89%, 58%)",
+          "$value": "{color.yellow.light.solidHover}",
           "$description": "Primary-button hover yellow for dark mode.",
           "$extensions": {
             "putio": {
@@ -2339,7 +3418,8 @@
     },
     "color": {
       "$type": "color",
-      "$value": "hsl(0, 0%, 78.0%)",
+      "$value": "{elevation.shadowColor}",
+      "$description": "Compat name kept for existing web consumers — alias of elevation.shadowColor so the two can never drift.",
       "$extensions": {
         "putio": {
           "cssName": "shadow",
@@ -2419,7 +3499,7 @@
       },
       "display": {
         "$type": "fontFamily",
-        "$value": "\"GT America\", sans-serif",
+        "$value": "{typography.fontFamily.sans}",
         "$extensions": {
           "putio": {
             "cssName": "font-display",
@@ -2428,20 +3508,10 @@
           }
         }
       },
-      "uiMono": {
-        "$type": "fontFamily",
-        "$value": "\"GT America Mono\", monospace",
-        "$extensions": {
-          "putio": {
-            "cssName": "font-ui-mono",
-            "mode": "global",
-            "figma": true
-          }
-        }
-      },
       "mono": {
         "$type": "fontFamily",
-        "$value": "\"Berkeley Mono\", \"GT America Mono\", monospace",
+        "$value": "\"Berkeley Mono\", monospace",
+        "$description": "The single mono face: numerics, timestamps, file sizes, ETAs, counts, code, logs, magnet URIs, identifiers, and filenames. Web and mobile only — TV has no mono face.",
         "$extensions": {
           "putio": {
             "cssName": "font-mono",
@@ -2465,7 +3535,8 @@
       },
       "sm": {
         "$type": "dimension",
-        "$value": "0.8125rem",
+        "$value": "0.875rem",
+        "$description": "Caption and button labels — production fontSize 0.",
         "$extensions": {
           "putio": {
             "cssName": "fs-sm",
@@ -2476,7 +3547,8 @@
       },
       "base": {
         "$type": "dimension",
-        "$value": "0.875rem",
+        "$value": "1rem",
+        "$description": "Body, labels, inputs — production fontSize 1; equals the responsive root (14px, 15px at >= breakpoint.lg).",
         "$extensions": {
           "putio": {
             "cssName": "fs-base",
@@ -2487,7 +3559,8 @@
       },
       "md": {
         "$type": "dimension",
-        "$value": "1rem",
+        "$value": "1.125rem",
+        "$description": "Subheading.",
         "$extensions": {
           "putio": {
             "cssName": "fs-md",
@@ -2498,7 +3571,8 @@
       },
       "lg": {
         "$type": "dimension",
-        "$value": "1.125rem",
+        "$value": "1.5rem",
+        "$description": "Heading.",
         "$extensions": {
           "putio": {
             "cssName": "fs-lg",
@@ -2509,7 +3583,8 @@
       },
       "xl": {
         "$type": "dimension",
-        "$value": "1.5rem",
+        "$value": "2rem",
+        "$description": "Page title.",
         "$extensions": {
           "putio": {
             "cssName": "fs-xl",
@@ -2520,7 +3595,8 @@
       },
       "2xl": {
         "$type": "dimension",
-        "$value": "2rem",
+        "$value": "48px",
+        "$description": "Fixed display tier — does not scale with the responsive root.",
         "$extensions": {
           "putio": {
             "cssName": "fs-2xl",
@@ -2531,7 +3607,8 @@
       },
       "3xl": {
         "$type": "dimension",
-        "$value": "3rem",
+        "$value": "64px",
+        "$description": "Fixed display tier — does not scale with the responsive root.",
         "$extensions": {
           "putio": {
             "cssName": "fs-3xl",
@@ -2542,7 +3619,8 @@
       },
       "4xl": {
         "$type": "dimension",
-        "$value": "4rem",
+        "$value": "{typography.fontSize.3xl}",
+        "$description": "Compatibility alias for the former 4xl tier; new surfaces should use fontSize.3xl or fontSize.display.",
         "$extensions": {
           "putio": {
             "cssName": "fs-4xl",
@@ -2553,7 +3631,8 @@
       },
       "display": {
         "$type": "dimension",
-        "$value": "6rem",
+        "$value": "96px",
+        "$description": "Fixed display tier for brand display moments.",
         "$extensions": {
           "putio": {
             "cssName": "fs-display",
@@ -2858,6 +3937,18 @@
           "figma": true
         }
       }
+    },
+    "tv": {
+      "$type": "dimension",
+      "$value": "12px",
+      "$description": "The corner radius for every 10-foot surface — list rows, buttons, sheets, cards, code tiles, and keys. TV uses one radius, not a scale; the only other radii on TV are intentional pills and circles.",
+      "$extensions": {
+        "putio": {
+          "cssName": "radius-tv",
+          "mode": "global",
+          "figma": true
+        }
+      }
     }
   },
   "border": {
@@ -2934,11 +4025,114 @@
       }
     }
   },
+  "z": {
+    "$description": "Stacking scale. Gapped for platform chrome — never invent z-index numbers in apps.",
+    "dropdown": {
+      "$type": "number",
+      "$value": 1000,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-dropdown",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "sticky": {
+      "$type": "number",
+      "$value": 1100,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-sticky",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "modal": {
+      "$type": "number",
+      "$value": 1300,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-modal",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "notification": {
+      "$type": "number",
+      "$value": 1400,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-notification",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "tooltip": {
+      "$type": "number",
+      "$value": 1500,
+      "$extensions": {
+        "putio": {
+          "cssName": "z-tooltip",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    }
+  },
+  "breakpoint": {
+    "$description": "Responsive breakpoints, lifted from app.put.io's BREAKPOINTS. Generator-facing: CSS media queries cannot read custom properties, so emitters bind these as Tailwind screens, StyleX consts, or documented literals.",
+    "sm": {
+      "$type": "dimension",
+      "$value": "640px",
+      "$extensions": {
+        "putio": {
+          "cssName": "bp-sm",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "768px",
+      "$extensions": {
+        "putio": {
+          "cssName": "bp-md",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "1280px",
+      "$description": "The root font-size steps from 14px to 15px at this width.",
+      "$extensions": {
+        "putio": {
+          "cssName": "bp-lg",
+          "mode": "global",
+          "category": "other",
+          "figma": false
+        }
+      }
+    }
+  },
   "surface": {
     "light": {
       "htmlBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 97.3%)",
+        "$value": "{color.neutral.light.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "html-bg",
@@ -2958,7 +4152,7 @@
       },
       "navBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 100%)",
+        "$value": "{surface.light.appBg}",
         "$extensions": {
           "putio": {
             "cssName": "nav-bg",
@@ -2978,7 +4172,7 @@
       },
       "navItemBgHover": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 95.1%)",
+        "$value": "{color.neutral.light.componentBg}",
         "$extensions": {
           "putio": {
             "cssName": "nav-item-bg-hover",
@@ -2988,7 +4182,7 @@
       },
       "navItemBgActive": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 95.1%)",
+        "$value": "{color.neutral.light.componentBg}",
         "$extensions": {
           "putio": {
             "cssName": "nav-item-bg-active",
@@ -3008,7 +4202,7 @@
       },
       "listItemBgHover": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 97.3%)",
+        "$value": "{color.neutral.light.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "list-item-bg-hover",
@@ -3018,7 +4212,7 @@
       },
       "listItemBgActive": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 97.3%)",
+        "$value": "{color.neutral.light.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "list-item-bg-active",
@@ -3038,7 +4232,7 @@
       },
       "segmentedControlBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 95.1%)",
+        "$value": "{color.neutral.light.componentBg}",
         "$extensions": {
           "putio": {
             "cssName": "segmented-control-bg",
@@ -3048,7 +4242,7 @@
       },
       "segmentedControlBgActive": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 100%)",
+        "$value": "{surface.light.appBg}",
         "$extensions": {
           "putio": {
             "cssName": "segmented-control-bg-active",
@@ -3058,7 +4252,7 @@
       },
       "transferListItemCompletingBg": {
         "$type": "color",
-        "$value": "hsl(85, 76.0%, 92.3%)",
+        "$value": "{color.transfer.light.lime3}",
         "$extensions": {
           "putio": {
             "cssName": "transfer-list-item-completing-bg",
@@ -3068,7 +4262,7 @@
       },
       "transferListItemDownloadingBg": {
         "$type": "color",
-        "$value": "hsl(85, 76.0%, 92.3%)",
+        "$value": "{color.transfer.light.lime3}",
         "$extensions": {
           "putio": {
             "cssName": "transfer-list-item-downloading-bg",
@@ -3078,7 +4272,7 @@
       },
       "transferListItemFinishedBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 97.3%)",
+        "$value": "{color.neutral.light.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "transfer-list-item-finished-bg",
@@ -3098,7 +4292,7 @@
       },
       "hiContrast": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 9.0%)",
+        "$value": "{color.neutral.light.text}",
         "$extensions": {
           "putio": {
             "cssName": "hi-contrast",
@@ -3108,7 +4302,7 @@
       },
       "loContrast": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 99.0%)",
+        "$value": "{color.neutral.light.bg}",
         "$extensions": {
           "putio": {
             "cssName": "lo-contrast",
@@ -3170,7 +4364,7 @@
       },
       "navBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 8.5%)",
+        "$value": "{surface.dark.appBg}",
         "$extensions": {
           "putio": {
             "cssName": "nav-bg",
@@ -3190,7 +4384,7 @@
       },
       "navItemBgHover": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 13.6%)",
+        "$value": "{color.neutral.dark.componentBg}",
         "$extensions": {
           "putio": {
             "cssName": "nav-item-bg-hover",
@@ -3200,7 +4394,7 @@
       },
       "navItemBgActive": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 13.6%)",
+        "$value": "{color.neutral.dark.componentBg}",
         "$extensions": {
           "putio": {
             "cssName": "nav-item-bg-active",
@@ -3220,7 +4414,7 @@
       },
       "listItemBgHover": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 11.0%)",
+        "$value": "{color.neutral.dark.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "list-item-bg-hover",
@@ -3230,7 +4424,7 @@
       },
       "listItemBgActive": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 11.0%)",
+        "$value": "{color.neutral.dark.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "list-item-bg-active",
@@ -3250,7 +4444,7 @@
       },
       "segmentedControlBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 8.5%)",
+        "$value": "{surface.dark.appBg}",
         "$extensions": {
           "putio": {
             "cssName": "segmented-control-bg",
@@ -3260,7 +4454,7 @@
       },
       "segmentedControlBgActive": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 13.6%)",
+        "$value": "{color.neutral.dark.componentBg}",
         "$extensions": {
           "putio": {
             "cssName": "segmented-control-bg-active",
@@ -3290,7 +4484,7 @@
       },
       "transferListItemFinishedBg": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 11.0%)",
+        "$value": "{color.neutral.dark.bgSecondary}",
         "$extensions": {
           "putio": {
             "cssName": "transfer-list-item-finished-bg",
@@ -3310,7 +4504,7 @@
       },
       "hiContrast": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 93.0%)",
+        "$value": "{color.neutral.dark.text}",
         "$extensions": {
           "putio": {
             "cssName": "hi-contrast",
@@ -3320,7 +4514,7 @@
       },
       "loContrast": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 8.5%)",
+        "$value": "{color.neutral.dark.bg}",
         "$extensions": {
           "putio": {
             "cssName": "lo-contrast",
@@ -3360,7 +4554,8 @@
       },
       "shadow": {
         "$type": "color",
-        "$value": "hsl(0, 0%, 0%)",
+        "$value": "{surface.dark.shadowColor}",
+        "$description": "Compat name kept for existing web consumers — alias of surface.dark.shadowColor so the two can never drift.",
         "$extensions": {
           "putio": {
             "cssName": "shadow",