@putdotio/design 2.0.2 → 3.0.0

package/tokens/components.tokens.json

@@ -1813,6 +1813,27 @@
             "mode": "dark"
           }
         }
+      },
+      "badgeBackground": {
+        "$type": "color",
+        "$value": "hsl(358, 70%, 45%)",
+        "$description": "Unread count disc — darkened red so white numerals clear AA at 9px. Fixed in both modes.",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-badge-bg",
+            "mode": "global"
+          }
+        }
+      },
+      "badgeForeground": {
+        "$type": "color",
+        "$value": "{component.alias.destructiveForeground}",
+        "$extensions": {
+          "putio": {
+            "cssName": "notification-badge-fg",
+            "mode": "global"
+          }
+        }
       }
     },
     "menu": {
@@ -2324,6 +2345,741 @@
           }
         }
       }
+    },
+    "avatar": {
+      "yellow": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$description": "Initial-on-color avatar palette. Fixed in both modes; the chip carries its own contrast.",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-yellow",
+            "mode": "global"
+          }
+        }
+      },
+      "green": {
+        "$type": "color",
+        "$value": "hsl(151, 55%, 33%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-green",
+            "mode": "global"
+          }
+        }
+      },
+      "red": {
+        "$type": "color",
+        "$value": "hsl(358, 55%, 46%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-red",
+            "mode": "global"
+          }
+        }
+      },
+      "blue": {
+        "$type": "color",
+        "$value": "hsl(211, 55%, 46%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-blue",
+            "mode": "global"
+          }
+        }
+      },
+      "purple": {
+        "$type": "color",
+        "$value": "hsl(280, 48%, 46%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-purple",
+            "mode": "global"
+          }
+        }
+      },
+      "teal": {
+        "$type": "color",
+        "$value": "hsl(168, 55%, 33%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-teal",
+            "mode": "global"
+          }
+        }
+      },
+      "orange": {
+        "$type": "color",
+        "$value": "hsl(28, 80%, 55%)",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-orange",
+            "mode": "global"
+          }
+        }
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{component.alias.destructiveForeground}",
+        "$description": "White initials — every palette entry except yellow and orange.",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-fg",
+            "mode": "global"
+          }
+        }
+      },
+      "foregroundWarm": {
+        "$type": "color",
+        "$value": "{component.alias.primaryForeground}",
+        "$description": "Warm dark initials on yellow and orange.",
+        "$extensions": {
+          "putio": {
+            "cssName": "avatar-fg-warm",
+            "mode": "global"
+          }
+        }
+      }
+    },
+    "alert": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.default}",
+        "$description": "Inline, in-page messaging. Persists until the condition clears — a toast does not.",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-radius",
+            "mode": "global"
+          }
+        }
+      },
+      "infoBackground": {
+        "$type": "color",
+        "$value": "{color.neutral.light.bgSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "infoBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.bgSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoBorder": {
+        "$type": "color",
+        "$value": "{color.neutral.light.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-border",
+            "mode": "light"
+          }
+        }
+      },
+      "infoBorderDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.line}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoText": {
+        "$type": "color",
+        "$value": "{color.neutral.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-text",
+            "mode": "light"
+          }
+        }
+      },
+      "infoTextDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoBody": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-body",
+            "mode": "light"
+          }
+        }
+      },
+      "infoBodyDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "infoIcon": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "infoIconDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-info-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandBackground": {
+        "$type": "color",
+        "$value": "{color.yellow.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "brandBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandBorder": {
+        "$type": "color",
+        "$value": "{color.yellow.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-border",
+            "mode": "light"
+          }
+        }
+      },
+      "brandBorderDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandText": {
+        "$type": "color",
+        "$value": "{color.yellow.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-text",
+            "mode": "light"
+          }
+        }
+      },
+      "brandTextDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandBody": {
+        "$type": "color",
+        "$value": "{color.yellow.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-body",
+            "mode": "light"
+          }
+        }
+      },
+      "brandBodyDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "brandIcon": {
+        "$type": "color",
+        "$value": "{color.yellow.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "brandIconDark": {
+        "$type": "color",
+        "$value": "{color.yellow.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-brand-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBackground": {
+        "$type": "color",
+        "$value": "{color.green.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "successBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBorder": {
+        "$type": "color",
+        "$value": "{color.green.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-border",
+            "mode": "light"
+          }
+        }
+      },
+      "successBorderDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "successText": {
+        "$type": "color",
+        "$value": "{color.green.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-text",
+            "mode": "light"
+          }
+        }
+      },
+      "successTextDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "successBody": {
+        "$type": "color",
+        "$value": "{color.green.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-body",
+            "mode": "light"
+          }
+        }
+      },
+      "successBodyDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "successIcon": {
+        "$type": "color",
+        "$value": "{color.green.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "successIconDark": {
+        "$type": "color",
+        "$value": "{color.green.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-success-icon",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBackground": {
+        "$type": "color",
+        "$value": "{color.red.light.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-bg",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBackgroundDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.componentBg}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-bg",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBorder": {
+        "$type": "color",
+        "$value": "{color.red.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-border",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBorderDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-border",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerText": {
+        "$type": "color",
+        "$value": "{color.red.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-text",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerTextDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerBody": {
+        "$type": "color",
+        "$value": "{color.red.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-body",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerBodyDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-body",
+            "mode": "dark"
+          }
+        }
+      },
+      "dangerIcon": {
+        "$type": "color",
+        "$value": "{color.red.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-icon",
+            "mode": "light"
+          }
+        }
+      },
+      "dangerIconDark": {
+        "$type": "color",
+        "$value": "{color.red.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "alert-danger-icon",
+            "mode": "dark"
+          }
+        }
+      }
+    },
+    "slider": {
+      "track": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgActive}",
+        "$description": "Seek, volume, stepped numeric. The buffered band is what makes it a scrubber.",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-track",
+            "mode": "light"
+          }
+        }
+      },
+      "trackDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-track",
+            "mode": "dark"
+          }
+        }
+      },
+      "buffer": {
+        "$type": "color",
+        "$value": "{color.neutral.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-buffer",
+            "mode": "light"
+          }
+        }
+      },
+      "bufferDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-buffer",
+            "mode": "dark"
+          }
+        }
+      },
+      "fill": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-fill",
+            "mode": "global"
+          }
+        }
+      },
+      "knob": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-knob",
+            "mode": "global"
+          }
+        }
+      },
+      "fillDisabled": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-fill-disabled",
+            "mode": "light"
+          }
+        }
+      },
+      "fillDisabledDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-fill-disabled",
+            "mode": "dark"
+          }
+        }
+      },
+      "trackHeight": {
+        "$type": "dimension",
+        "$value": "4px",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-track-height",
+            "mode": "global"
+          }
+        }
+      },
+      "knobSize": {
+        "$type": "dimension",
+        "$value": "14px",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-knob-size",
+            "mode": "global"
+          }
+        }
+      },
+      "hitHeight": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "44px on touch — the knob grows, the track does not.",
+        "$extensions": {
+          "putio": {
+            "cssName": "slider-hit-height",
+            "mode": "global"
+          }
+        }
+      }
+    },
+    "pagination": {
+      "itemSize": {
+        "$type": "dimension",
+        "$value": "30px",
+        "$description": "Numbered paging. Load-more and infinite scroll carry no chrome of their own.",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-size",
+            "mode": "global"
+          }
+        }
+      },
+      "itemText": {
+        "$type": "color",
+        "$value": "{color.neutral.light.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text",
+            "mode": "light"
+          }
+        }
+      },
+      "itemTextDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.textSecondary}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemTextActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemTextActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.text}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-text-active",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBackgroundHover": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-hover",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBackgroundHoverDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgHover}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-hover",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBackgroundActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.componentBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBackgroundActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.componentBgActive}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-bg-active",
+            "mode": "dark"
+          }
+        }
+      },
+      "itemBorderActive": {
+        "$type": "color",
+        "$value": "{color.neutral.light.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-border-active",
+            "mode": "light"
+          }
+        }
+      },
+      "itemBorderActiveDark": {
+        "$type": "color",
+        "$value": "{color.neutral.dark.border}",
+        "$extensions": {
+          "putio": {
+            "cssName": "pagination-item-border-active",
+            "mode": "dark"
+          }
+        }
+      }
     }
   }
 }