TypeScript Tokens

Preview

/**
 * Generated by UI Archive — ui-archive.com
 * Domain: css-tricks.com
 * Snapshot: 2026-11-15
 * Format: W3C DTCG compatible
 * Token names preserve original CSS variable names
 */

export const tokens = {
  "color": {
    "ld-color-primitives-blue-100": "#f3f8ff",
    "ld-color-primitives-blue-150": "#d6defb",
    "ld-color-primitives-blue-175": "#b6c7f7",
    "ld-color-primitives-blue-200": "#98acf5",
    "ld-color-primitives-blue-500": "#235af3",
    "ld-color-primitives-blue-800": "#0e2a90",
    "ld-color-primitives-green-100": "#eef7f1",
    "ld-color-primitives-green-250": "#7cd09d",
    "ld-color-primitives-green-300": "#3eab6a",
    "ld-color-primitives-green-500": "#2b7f4d",
    "ld-color-primitives-green-800": "#055224",
    "ld-color-primitives-grey-150": "#d2d7e2",
    "ld-color-primitives-grey-200": "#a7adc2",
    "ld-color-primitives-grey-350": "#8d90a7",
    "ld-color-primitives-grey-500": "#73738c",
    "ld-color-primitives-grey-800": "#4a4a68",
    "ld-color-primitives-grey-900": "#0e0e2c",
    "ld-color-primitives-red-100": "#faeeee",
    "ld-color-primitives-red-200": "#f6cfcf",
    "ld-color-primitives-red-250": "#ee8b8d",
    "ld-color-primitives-red-300": "#e65255",
    "ld-color-primitives-red-500": "#db0000",
    "ld-color-primitives-red-800": "#8f0000",
    "ld-color-primitives-yellow-100": "#fdf8ec",
    "ld-color-primitives-yellow-200": "#f9d99e"
  },
  "fontSize": {
    "dashicons": "20px",
    "blanco": "var(--font-size-body)",
    "md-primer-bold": "clamp(2rem,2rem + 1.2vw,3rem)",
…

All Tokens