@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/tokens/color.json

@@ -0,0 +1,1350 @@
+{
+  "color": {
+    "$description": "Colour tokens. Three tiers: scales (primitive), role tokens (semantic), component tokens. Use role tokens in components. Decisions: design-system-decisions/25 v1.0.",
+    "brand": {
+      "$description": "The three brand colours. Same in both themes.",
+      "yellow": {
+        "$type": "color",
+        "$value": "#fcb017",
+        "$description": "Brand yellow. Logo, current-page indicator, highlights. Never text or icons on a light background (1.85:1 on white)."
+      },
+      "graphite": {
+        "$type": "color",
+        "$value": "#2b2a28",
+        "$description": "Brand graphite. Text and the primary button."
+      },
+      "white": {
+        "$type": "color",
+        "$value": "#ffffff",
+        "$description": "Brand white."
+      }
+    },
+    "static": {
+      "$description": "Colours that do not change with the theme.",
+      "white": {
+        "$type": "color",
+        "$value": "#ffffff",
+        "$description": "White in both themes: text on solid status fills."
+      },
+      "black": {
+        "$type": "color",
+        "$value": "#000000",
+        "$description": "Black in both themes."
+      }
+    },
+    "graphite": {
+      "1": {
+        "$type": "color",
+        "$value": "#fdfdfc",
+        "$description": "App background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#181717"
+          }
+        }
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#f8f8f8",
+        "$description": "Subtle background: sidebars, table headers, quiet areas.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#201f1f"
+          }
+        }
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#f2f2f1",
+        "$description": "Component background at rest.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#282827"
+          }
+        }
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#e8e8e7",
+        "$description": "Component background on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#302f2e"
+          }
+        }
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#dfdedd",
+        "$description": "Component background when pressed or selected.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#373735"
+          }
+        }
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#d0cfce",
+        "$description": "Subtle border: dividers, cards.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#434241"
+          }
+        }
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#bcbbb9",
+        "$description": "Border of interactive elements.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#555452"
+          }
+        }
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#a3a29f",
+        "$description": "Strong border. Disabled text and icons (text.disabled, icon.disabled).",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#6b6a67"
+          }
+        }
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#878582",
+        "$description": "Edge of controls (border.bold): 3:1 on every neutral fill, selected rows included.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#878682"
+          }
+        }
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#676663",
+        "$description": "Tertiary text (text.subtlest) and secondary icons (icon.subtle). The primary button when pressed.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#a8a6a3"
+          }
+        }
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#494846",
+        "$description": "Secondary text (text.subtle) and default icons. The primary button on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#cac9c6"
+          }
+        }
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#2b2a28",
+        "$description": "High-contrast text and the primary button. In light it is the brand graphite.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#eeeeed"
+          }
+        }
+      },
+      "$description": "Neutral scale, a warm grey (OKLCH hue 85°, half the chroma of the source warm grey). Steps follow the shared grey lightness ladder; step 12 is the brand graphite in light. Dark steps 1–8 are evenly spaced backgrounds and borders, page at L* 8. Each step has a dark-theme value under the same name."
+    },
+    "yellow": {
+      "1": {
+        "$type": "color",
+        "$value": "#fefdf4",
+        "$description": "App background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#17130d"
+          }
+        }
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#fff9dd",
+        "$description": "Subtle background: sidebars, table headers, quiet areas.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#1d170f"
+          }
+        }
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#fff1bd",
+        "$description": "Component background at rest.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#32210a"
+          }
+        }
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#ffe59c",
+        "$description": "Component background on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#422902"
+          }
+        }
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#ffd87c",
+        "$description": "Component background when pressed or selected.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#513304"
+          }
+        }
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#ffc757",
+        "$description": "Subtle border: dividers, cards.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#61400c"
+          }
+        }
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#fcb017",
+        "$description": "Border of interactive elements.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#74501c"
+          }
+        }
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#d68b00",
+        "$description": "Strong border.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#9a6613"
+          }
+        }
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#a96700",
+        "$description": "Solid fill.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#bd7e1b"
+          }
+        }
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#905600",
+        "$description": "Solid fill on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#db9517"
+          }
+        }
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#764400",
+        "$description": "Low-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#fcb017"
+          }
+        }
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#4a3015",
+        "$description": "High-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#f2dba4"
+          }
+        }
+      },
+      "$description": "Brand scale. Steps follow the lightness of the colour scales; the brand yellow is step 7 in light and step 11 in dark. Each step has a dark-theme value under the same name."
+    },
+    "blue": {
+      "1": {
+        "$type": "color",
+        "$value": "#fbfdff",
+        "$description": "App background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#0d1520"
+          }
+        }
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#f4faff",
+        "$description": "Subtle background: sidebars, table headers, quiet areas.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#111927"
+          }
+        }
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#e6f4fe",
+        "$description": "Component background at rest.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#0d2847"
+          }
+        }
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#d5efff",
+        "$description": "Component background on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#003362"
+          }
+        }
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#c2e5ff",
+        "$description": "Component background when pressed or selected.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#004074"
+          }
+        }
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#acd8fc",
+        "$description": "Subtle border: dividers, cards.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#104d87"
+          }
+        }
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#8ec8f6",
+        "$description": "Border of interactive elements.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#205d9e"
+          }
+        }
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#52a1e6",
+        "$description": "Strong border.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#1b6fc5"
+          }
+        }
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#0077d5",
+        "$description": "Solid fill.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#0088f1"
+          }
+        }
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#0064b5",
+        "$description": "Solid fill on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#3599fa"
+          }
+        }
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#005195",
+        "$description": "Low-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#6bb3fa"
+          }
+        }
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#113264",
+        "$description": "High-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#b8dcf5"
+          }
+        }
+      },
+      "$description": "Info, link and focus scale. Steps 1–8 and 12 follow an open-source blue scale; steps 9–11 are set to shared lightness targets so every text pair reaches WCAG AA (see the Palette page). Each step has a dark-theme value under the same name."
+    },
+    "green": {
+      "1": {
+        "$type": "color",
+        "$value": "#fbfefc",
+        "$description": "App background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#0e1512"
+          }
+        }
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#f4fbf6",
+        "$description": "Subtle background: sidebars, table headers, quiet areas.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#121b17"
+          }
+        }
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#e6f6eb",
+        "$description": "Component background at rest.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#132d21"
+          }
+        }
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#d6f1df",
+        "$description": "Component background on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#113b29"
+          }
+        }
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#c4e8d1",
+        "$description": "Component background when pressed or selected.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#174933"
+          }
+        }
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#adddc0",
+        "$description": "Subtle border: dividers, cards.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#20573e"
+          }
+        }
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#8eceaa",
+        "$description": "Border of interactive elements.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#28684a"
+          }
+        }
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#51ac7d",
+        "$description": "Strong border.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#207d54"
+          }
+        }
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#008753",
+        "$description": "Solid fill.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#1f9962"
+          }
+        }
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#007246",
+        "$description": "Solid fill on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#37a971"
+          }
+        }
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#005c3a",
+        "$description": "Low-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#5ec18a"
+          }
+        }
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#193b2d",
+        "$description": "High-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#a6e5c0"
+          }
+        }
+      },
+      "$description": "Success scale. Steps 1–8 and 12 follow an open-source green scale; steps 9–11 as for blue. Each step has a dark-theme value under the same name."
+    },
+    "orange": {
+      "1": {
+        "$type": "color",
+        "$value": "#fefcfb",
+        "$description": "App background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#17120e"
+          }
+        }
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#fff7ed",
+        "$description": "Subtle background: sidebars, table headers, quiet areas.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#1e160f"
+          }
+        }
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#ffefd6",
+        "$description": "Component background at rest.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#331e0b"
+          }
+        }
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#ffdfb5",
+        "$description": "Component background on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#462100"
+          }
+        }
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#ffd19a",
+        "$description": "Component background when pressed or selected.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#562800"
+          }
+        }
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#ffc182",
+        "$description": "Subtle border: dividers, cards.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#66350c"
+          }
+        }
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#f5ae73",
+        "$description": "Border of interactive elements.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#7e451d"
+          }
+        }
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#df8547",
+        "$description": "Strong border.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#ab5315"
+          }
+        }
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#ba4e00",
+        "$description": "Solid fill.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#db6200"
+          }
+        }
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#a74500",
+        "$description": "Solid fill on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#ef7200"
+          }
+        }
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#8a3600",
+        "$description": "Low-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#f5974e"
+          }
+        }
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#582d1d",
+        "$description": "High-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#f1d2b4"
+          }
+        }
+      },
+      "$description": "Warning scale. Steps 1–8 and 12 follow an open-source orange scale. In light, step 9 is the industry warning orange #BA4E00, the most common orange that carries white text at AA; steps 10–11 and the dark steps 9–11 as for blue. Each step has a dark-theme value under the same name."
+    },
+    "red": {
+      "1": {
+        "$type": "color",
+        "$value": "#fffcfc",
+        "$description": "App background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#191110"
+          }
+        }
+      },
+      "2": {
+        "$type": "color",
+        "$value": "#fff7f6",
+        "$description": "Subtle background: sidebars, table headers, quiet areas.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#201312"
+          }
+        }
+      },
+      "3": {
+        "$type": "color",
+        "$value": "#feebe9",
+        "$description": "Component background at rest.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#3b1310"
+          }
+        }
+      },
+      "4": {
+        "$type": "color",
+        "$value": "#ffdbd7",
+        "$description": "Component background on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#50100f"
+          }
+        }
+      },
+      "5": {
+        "$type": "color",
+        "$value": "#ffcec8",
+        "$description": "Component background when pressed or selected.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#611716"
+          }
+        }
+      },
+      "6": {
+        "$type": "color",
+        "$value": "#fdbeb7",
+        "$description": "Subtle border: dividers, cards.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#722421"
+          }
+        }
+      },
+      "7": {
+        "$type": "color",
+        "$value": "#f4aaa2",
+        "$description": "Border of interactive elements.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#8c3430"
+          }
+        }
+      },
+      "8": {
+        "$type": "color",
+        "$value": "#eb7a71",
+        "$description": "Strong border.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#bc403b"
+          }
+        }
+      },
+      "9": {
+        "$type": "color",
+        "$value": "#d83b39",
+        "$description": "Solid fill.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#ef4c48"
+          }
+        }
+      },
+      "10": {
+        "$type": "color",
+        "$value": "#ba2d2d",
+        "$description": "Solid fill on hover.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#ff615a"
+          }
+        }
+      },
+      "11": {
+        "$type": "color",
+        "$value": "#9b1e20",
+        "$description": "Low-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#ff8e84"
+          }
+        }
+      },
+      "12": {
+        "$type": "color",
+        "$value": "#641817",
+        "$description": "High-contrast text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "#facdc8"
+          }
+        }
+      },
+      "$description": "Danger scale. Steps 1–8 and 12 follow an open-source red scale; steps 9–11 as for blue. Each step has a dark-theme value under the same name."
+    },
+    "text": {
+      "$root": {
+        "$type": "color",
+        "$value": "{color.graphite.12}",
+        "$description": "Default text."
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.graphite.11}",
+        "$description": "Secondary text: descriptions, table secondary columns, navigation."
+      },
+      "subtlest": {
+        "$type": "color",
+        "$value": "{color.graphite.10}",
+        "$description": "Tertiary text: metadata, timestamps, placeholders, helper text, breadcrumbs."
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.graphite.8}",
+        "$description": "Text of disabled controls. Exempt from contrast (WCAG 1.4.3)."
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{color.graphite.1}",
+        "$description": "Text on background.neutral.bold and surface.inverse."
+      },
+      "on-bold": {
+        "$type": "color",
+        "$value": "{color.static.white}",
+        "$description": "Text on the solid status fills (background.*.bold): white in light, graphite 1 in dark.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "{color.graphite.1}"
+          }
+        }
+      },
+      "on-brand": {
+        "$type": "color",
+        "$value": "{color.brand.graphite}",
+        "$description": "Text on the brand yellow (7.76:1)."
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "{color.red.11}",
+        "$description": "Danger text."
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.orange.11}",
+        "$description": "Warning text."
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{color.green.11}",
+        "$description": "Success text."
+      },
+      "info": {
+        "$type": "color",
+        "$value": "{color.blue.11}",
+        "$description": "Info text."
+      }
+    },
+    "icon": {
+      "$root": {
+        "$type": "color",
+        "$value": "{color.graphite.11}",
+        "$description": "Default icon colour."
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.graphite.10}",
+        "$description": "Secondary icons, next to text.subtle or text.subtlest."
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.graphite.8}",
+        "$description": "Icons of disabled controls."
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{color.graphite.1}",
+        "$description": "Icons on background.neutral.bold and surface.inverse."
+      },
+      "on-bold": {
+        "$type": "color",
+        "$value": "{color.static.white}",
+        "$description": "Icons on the solid status fills.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "{color.graphite.1}"
+          }
+        }
+      },
+      "danger": {
+        "$type": "color",
+        "$value": "{color.red.11}",
+        "$description": "Danger icon."
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.orange.11}",
+        "$description": "Warning icon."
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{color.green.11}",
+        "$description": "Success icon."
+      },
+      "info": {
+        "$type": "color",
+        "$value": "{color.blue.11}",
+        "$description": "Info icon."
+      }
+    },
+    "link": {
+      "$root": {
+        "$type": "color",
+        "$value": "{color.blue.11}",
+        "$description": "Link text."
+      },
+      "hover": {
+        "$type": "color",
+        "$value": "{color.blue.12}",
+        "$description": "Link on hover."
+      }
+    },
+    "background": {
+      "neutral": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.graphite.3}",
+          "$description": "Neutral fill at rest: default buttons, tags, inputs on a subtle surface."
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.graphite.4}",
+          "$description": "Neutral fill on hover."
+        },
+        "pressed": {
+          "$type": "color",
+          "$value": "{color.graphite.5}",
+          "$description": "Neutral fill when pressed."
+        },
+        "subtle": {
+          "$root": {
+            "$type": "color",
+            "$value": "transparent",
+            "$description": "Transparent at rest: table rows, menu items, ghost buttons."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.graphite.2}",
+            "$description": "Row, menu item or ghost button on hover. Lighter than selected, so a hovered row never looks selected.",
+            "$extensions": {
+              "design.beehexa": {
+                "dark": "{color.graphite.3}"
+              }
+            }
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.graphite.3}",
+            "$description": "Row, menu item or ghost button when pressed.",
+            "$extensions": {
+              "design.beehexa": {
+                "dark": "{color.graphite.4}"
+              }
+            }
+          }
+        },
+        "bold": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.graphite.12}",
+            "$description": "Primary button. Graphite in light; turns light in dark, so it stays the strongest element."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.graphite.11}",
+            "$description": "Primary button on hover: one step back from graphite 12, as it is the last step."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.graphite.10}",
+            "$description": "Primary button when pressed: two steps back from graphite 12."
+          }
+        }
+      },
+      "selected": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.graphite.3}",
+          "$description": "Selected row or item. Always add a second cue: the yellow indicator, a check or bold text.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.graphite.4}"
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.graphite.4}",
+          "$description": "Selected row or item on hover.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.graphite.5}"
+            }
+          }
+        }
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.graphite.3}",
+        "$description": "Background of disabled controls."
+      },
+      "brand": {
+        "subtle": {
+          "$type": "color",
+          "$value": "{color.yellow.2}",
+          "$description": "Brand surfaces and notes."
+        },
+        "bold": {
+          "$type": "color",
+          "$value": "{color.brand.yellow}",
+          "$description": "Brand yellow fill. Graphite text on top (text.on-brand). No yellow buttons."
+        }
+      },
+      "danger": {
+        "subtle": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.red.3}",
+            "$description": "Danger panel or label background."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.red.4}",
+            "$description": "Danger subtle background on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.red.5}",
+            "$description": "Danger subtle background when pressed."
+          }
+        },
+        "$root": {
+          "$type": "color",
+          "$value": "{color.red.5}",
+          "$description": "Danger background, stronger than subtle."
+        },
+        "bold": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.red.9}",
+            "$description": "Solid danger fill: state labels, the danger button. Text and icons on it use text.on-bold / icon.on-bold (white in light, graphite 1 in dark)."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.red.10}",
+            "$description": "Solid danger fill on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.red.11}",
+            "$description": "Solid danger fill when pressed."
+          }
+        }
+      },
+      "warning": {
+        "subtle": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.orange.3}",
+            "$description": "Warning panel or label background."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.orange.4}",
+            "$description": "Warning subtle background on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.orange.5}",
+            "$description": "Warning subtle background when pressed."
+          }
+        },
+        "$root": {
+          "$type": "color",
+          "$value": "{color.orange.5}",
+          "$description": "Warning background, stronger than subtle."
+        },
+        "bold": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.orange.9}",
+            "$description": "Solid warning fill: state labels, badges. Text and icons on it use text.on-bold / icon.on-bold (white in light, graphite 1 in dark)."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.orange.10}",
+            "$description": "Solid warning fill on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.orange.11}",
+            "$description": "Solid warning fill when pressed."
+          }
+        }
+      },
+      "success": {
+        "subtle": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.green.3}",
+            "$description": "Success panel or label background."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.green.4}",
+            "$description": "Success subtle background on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.green.5}",
+            "$description": "Success subtle background when pressed."
+          }
+        },
+        "$root": {
+          "$type": "color",
+          "$value": "{color.green.5}",
+          "$description": "Success background, stronger than subtle."
+        },
+        "bold": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.green.9}",
+            "$description": "Solid success fill: state labels, badges. Text and icons on it use text.on-bold / icon.on-bold (white in light, graphite 1 in dark)."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.green.10}",
+            "$description": "Solid success fill on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.green.11}",
+            "$description": "Solid success fill when pressed."
+          }
+        }
+      },
+      "info": {
+        "subtle": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.blue.3}",
+            "$description": "Info panel or label background."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.blue.4}",
+            "$description": "Info subtle background on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.blue.5}",
+            "$description": "Info subtle background when pressed."
+          }
+        },
+        "$root": {
+          "$type": "color",
+          "$value": "{color.blue.5}",
+          "$description": "Info background, stronger than subtle."
+        },
+        "bold": {
+          "$root": {
+            "$type": "color",
+            "$value": "{color.blue.9}",
+            "$description": "Solid info fill: state labels, badges. Text and icons on it use text.on-bold / icon.on-bold (white in light, graphite 1 in dark)."
+          },
+          "hover": {
+            "$type": "color",
+            "$value": "{color.blue.10}",
+            "$description": "Solid info fill on hover."
+          },
+          "pressed": {
+            "$type": "color",
+            "$value": "{color.blue.11}",
+            "$description": "Solid info fill when pressed."
+          }
+        }
+      }
+    },
+    "surface": {
+      "$root": {
+        "$type": "color",
+        "$value": "{color.brand.white}",
+        "$description": "Cards, panels, dialogs. One step lighter than the page in dark.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "{color.graphite.2}"
+          }
+        }
+      },
+      "page": {
+        "$type": "color",
+        "$value": "{color.brand.white}",
+        "$description": "Page background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "{color.graphite.1}"
+          }
+        }
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.graphite.2}",
+        "$description": "Sidebars, table headers, quiet areas."
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{color.graphite.12}",
+        "$description": "Inverse surface: tooltips, toasts. Text on top: text.inverse."
+      },
+      "scrim": {
+        "$type": "color",
+        "$value": "rgb(43 42 40 / 40%)",
+        "$description": "Behind dialogs and drawers.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "rgb(0 0 0 / 60%)"
+          }
+        }
+      }
+    },
+    "border": {
+      "$root": {
+        "$type": "color",
+        "$value": "{color.graphite.6}",
+        "$description": "Default border: dividers, cards, tables."
+      },
+      "bold": {
+        "$type": "color",
+        "$value": "{color.graphite.9}",
+        "$description": "Edges of inputs, checkboxes and selects. 3:1 (WCAG 1.4.11) on every surface and neutral fill, selected rows included."
+      },
+      "disabled": {
+        "$type": "color",
+        "$value": "{color.graphite.6}",
+        "$description": "Border of disabled controls."
+      },
+      "focus": {
+        "$type": "color",
+        "$value": "{color.blue.11}",
+        "$description": "Focus ring: 2 px, 2 px away from the control. 3:1 on every surface and selected row."
+      },
+      "selected": {
+        "$type": "color",
+        "$value": "{color.brand.yellow}",
+        "$description": "Indicator bar of the current page or tab. Always with a second cue."
+      },
+      "brand": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.brand.yellow}",
+          "$description": "Brand outline, such as the early-access label."
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{color.yellow.6}",
+          "$description": "Border of brand surfaces and notes."
+        }
+      },
+      "danger": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.red.9}",
+          "$description": "Danger outline: labels. Step 9 in light; step 10 in dark.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.red.10}"
+            }
+          }
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{color.red.7}",
+          "$description": "Border of danger panels."
+        }
+      },
+      "warning": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.orange.9}",
+          "$description": "Warning outline: labels. Step 9 in light; step 10 in dark.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.orange.10}"
+            }
+          }
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{color.orange.7}",
+          "$description": "Border of warning panels."
+        }
+      },
+      "success": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.green.9}",
+          "$description": "Success outline: labels. Step 9 in light; step 10 in dark.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.green.10}"
+            }
+          }
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{color.green.7}",
+          "$description": "Border of success panels."
+        }
+      },
+      "info": {
+        "$root": {
+          "$type": "color",
+          "$value": "{color.blue.9}",
+          "$description": "Info outline: labels. Step 9 in light; step 10 in dark.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "{color.blue.10}"
+            }
+          }
+        },
+        "subtle": {
+          "$type": "color",
+          "$value": "{color.blue.7}",
+          "$description": "Border of info panels."
+        }
+      }
+    },
+    "skeleton": {
+      "$root": {
+        "$type": "color",
+        "$value": "{color.graphite.4}",
+        "$description": "Loading placeholder."
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.graphite.3}",
+        "$description": "Moving sheen on a loading placeholder."
+      }
+    },
+    "code": {
+      "$description": "Component tokens for code blocks, which stay dark in both themes.",
+      "background": {
+        "$type": "color",
+        "$value": "{color.brand.graphite}",
+        "$description": "Code block background.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "{color.graphite.1}"
+          }
+        }
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{color.graphite.2}",
+        "$description": "Code block text.",
+        "$extensions": {
+          "design.beehexa": {
+            "dark": "{color.graphite.12}"
+          }
+        }
+      }
+    }
+  }
+}