@hirobius/design-system 0.13.0 → 0.13.1

package/hirobius.tokens.json

@@ -195,7 +195,7 @@
         },
         "500": {
           "$value": "#6f3fd4",
-          "$description": "Lilac Bonds accent rest — AA for white text on page and card surfaces."
+          "$description": "Lilac accent rest — AA for white text on page and card surfaces."
         },
         "600": {
           "$value": "#5f33c0",
@@ -213,7 +213,7 @@
           "$value": "#2a1659",
           "$description": "Specific value within the lilac range at a defined lightness step."
         },
-        "$description": "Discrete values within the lilac range at defined lightness steps. Mirrors the blue ramp's stop set; consumed by the lilac-bonds tenant overlay."
+        "$description": "Discrete values within the lilac range at defined lightness steps. Mirrors the blue ramp's stop set; available to downstream brand overlays."
       },
       "amber": {
         "50": {
@@ -550,17 +550,17 @@
           }
         },
         "5xl": {
-          "$value": {
-            "value": 80,
-            "unit": "px"
-          }
-        },
-        "7xl": {
           "$value": {
             "value": 72,
             "unit": "px"
           },
           "$description": "Swiss-canon display size. Static desktop value; fluid in theme.css."
+        },
+        "6xl": {
+          "$value": {
+            "value": 80,
+            "unit": "px"
+          }
         }
       },
       "weight": {
@@ -1037,25 +1037,85 @@
           }
         },
         "accent": {
-          "$value": "{primitive.color.blue.500}",
-          "$description": "Accent-colored background",
+          "$value": "{primitive.color.neutral.900}",
+          "$description": "Accent-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).",
           "$extensions": {
             "com.figma.variables": {
               "modes": {
-                "Light": "{primitive.color.blue.500}",
-                "Dark": "{primitive.color.blue.500}"
+                "Light": "{primitive.color.neutral.900}",
+                "Dark": "{primitive.color.neutral.100}"
               }
             }
           }
         },
         "accentSubtle": {
-          "$value": "{primitive.color.blue.50}",
+          "$value": "{primitive.color.neutral.100}",
           "$description": "Faint accent tint for hover states or highlights",
           "$extensions": {
             "com.figma.variables": {
               "modes": {
-                "Light": "{primitive.color.blue.50}",
-                "Dark": "{primitive.color.blue.900}"
+                "Light": "{primitive.color.neutral.100}",
+                "Dark": "{primitive.color.neutral.900}"
+              }
+            }
+          }
+        },
+        "hover": {
+          "$value": "{primitive.color.neutral.100}",
+          "$description": "Background for a hovered interactive surface (menu items, chips, tertiary buttons).",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.neutral.100}",
+                "Dark": "{primitive.color.neutral.900}"
+              }
+            }
+          }
+        },
+        "pressed": {
+          "$value": "{primitive.color.neutral.50}",
+          "$description": "Background for an actively pressed interactive surface.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.neutral.50}",
+                "Dark": "{primitive.color.neutral.950}"
+              }
+            }
+          }
+        },
+        "selected": {
+          "$value": "{primitive.color.neutral.200}",
+          "$description": "Background for a persistently selected item (active tab, checked row).",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.neutral.200}",
+                "Dark": "{primitive.color.neutral.800}"
+              }
+            }
+          }
+        },
+        "muted": {
+          "$value": "{primitive.color.neutral.100}",
+          "$description": "Muted background for low-emphasis content blocks.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.neutral.100}",
+                "Dark": "{primitive.color.neutral.900}"
+              }
+            }
+          }
+        },
+        "sunken": {
+          "$value": "{primitive.color.neutral.200}",
+          "$description": "Recessed background for inset wells (inputs, code blocks, nested panels).",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.neutral.200}",
+                "Dark": "{primitive.color.neutral.850}"
               }
             }
           }
@@ -1107,23 +1167,61 @@
           }
         },
         "accent": {
-          "$value": "{primitive.color.blue.500}",
+          "$value": "{primitive.color.neutral.900}",
+          "$description": "Accent-intent text/icon color (monochrome). Pair with underline/weight for link affordance.",
           "$extensions": {
             "com.figma.variables": {
               "modes": {
-                "Light": "{primitive.color.blue.500}",
-                "Dark": "{primitive.color.blue.300}"
+                "Light": "{primitive.color.neutral.900}",
+                "Dark": "{primitive.color.neutral.100}"
               }
             }
           }
         },
         "onAccent": {
           "$value": "{primitive.color.neutral.white}",
+          "$description": "Text/icon color on accent fills. Flips to a dark neutral in dark mode, where the accent fill is a light neutral.",
           "$extensions": {
             "com.figma.variables": {
               "modes": {
                 "Light": "{primitive.color.neutral.white}",
-                "Dark": "{primitive.color.neutral.white}"
+                "Dark": "{primitive.color.neutral.900}"
+              }
+            }
+          }
+        },
+        "success": {
+          "$value": "{primitive.color.green.700}",
+          "$description": "Success-toned text/icon color, independent of feedback banners.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.green.700}",
+                "Dark": "{primitive.color.green.400}"
+              }
+            }
+          }
+        },
+        "warning": {
+          "$value": "{primitive.color.amber.800}",
+          "$description": "Warning-toned text/icon color, independent of feedback banners.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.amber.800}",
+                "Dark": "{primitive.color.amber.400}"
+              }
+            }
+          }
+        },
+        "danger": {
+          "$value": "{primitive.color.red.700}",
+          "$description": "Danger-toned text/icon color, independent of feedback banners.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.red.700}",
+                "Dark": "{primitive.color.red.400}"
               }
             }
           }
@@ -1141,6 +1239,18 @@
             }
           }
         },
+        "interactive": {
+          "$value": "{primitive.color.neutral.500}",
+          "$description": "Border for interactive control boundaries (inputs, selects, secondary buttons); meets the WCAG 1.4.11 3:1 non-text contrast floor.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.neutral.500}",
+                "Dark": "{primitive.color.neutral.500}"
+              }
+            }
+          }
+        },
         "subdued": {
           "$value": "{primitive.color.neutral.200}",
           "$extensions": {
@@ -1176,12 +1286,37 @@
           }
         },
         "accent": {
-          "$value": "{primitive.color.blue.500}",
+          "$value": "{primitive.color.neutral.900}",
+          "$description": "Accent border (neutral/monochrome; inverts on dark surfaces).",
           "$extensions": {
             "com.figma.variables": {
               "modes": {
-                "Light": "{primitive.color.blue.500}",
-                "Dark": "{primitive.color.blue.500}"
+                "Light": "{primitive.color.neutral.900}",
+                "Dark": "{primitive.color.neutral.100}"
+              }
+            }
+          }
+        },
+        "success": {
+          "$value": "{primitive.color.green.400}",
+          "$description": "Success-toned border for status outlines and success-state inputs.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.green.400}",
+                "Dark": "{primitive.color.green.400}"
+              }
+            }
+          }
+        },
+        "warning": {
+          "$value": "{primitive.color.amber.400}",
+          "$description": "Warning-toned border for status outlines and warning-state inputs.",
+          "$extensions": {
+            "com.figma.variables": {
+              "modes": {
+                "Light": "{primitive.color.amber.400}",
+                "Dark": "{primitive.color.amber.400}"
               }
             }
           }
@@ -1332,7 +1467,7 @@
       "component": {
         "gap": {
           "$value": "{primitive.space.2}",
-          "$description": "8px label\u2194input rhythm and closely coupled control spacing."
+          "$description": "8px label↔input rhythm and closely coupled control spacing."
         },
         "medium": {
           "$value": "{primitive.space.3}",
@@ -1458,11 +1593,11 @@
     },
     "typography": {
       "$type": "typography",
-      "$description": "8-style Swiss-canon type ramp: display, h1\u2013h3, body, small, caption, mono.",
+      "$description": "8-style Swiss-canon type ramp: display, h1–h3, body, small, caption, mono.",
       "display": {
         "$value": {
           "fontFamily": "{primitive.typography.family.display}",
-          "fontSize": "{primitive.typography.size.7xl}",
+          "fontSize": "{primitive.typography.size.5xl}",
           "fontWeight": "{primitive.typography.weight.bold}",
           "letterSpacing": "{primitive.typography.letterSpacing.tight}",
           "lineHeight": "{primitive.typography.lineHeight.none}"
@@ -1471,7 +1606,7 @@
         "$extensions": {
           "com.figma.variables": {
             "fontSize": "clamp(40px, 8vw, 72px)",
-            "note": "Figma stores the 72px desktop-max static value. Browser CSS overrides with fluid scaling (40px min \u2192 72px max). See src/styles/theme.css."
+            "note": "Figma stores the 72px desktop-max static value. Browser CSS overrides with fluid scaling (40px min → 72px max). See src/styles/theme.css."
           }
         }
       },
@@ -1487,7 +1622,7 @@
         "$extensions": {
           "com.figma.variables": {
             "fontSize": "clamp(32px, 6vw, 48px)",
-            "note": "Figma stores the 48px desktop-max static value. Browser CSS overrides with fluid scaling (32px min \u2192 48px max). See src/styles/theme.css."
+            "note": "Figma stores the 48px desktop-max static value. Browser CSS overrides with fluid scaling (32px min → 48px max). See src/styles/theme.css."
           }
         }
       },
@@ -1503,7 +1638,7 @@
         "$extensions": {
           "com.figma.variables": {
             "fontSize": "clamp(24px, 3.5vw, 30px)",
-            "note": "Figma stores the 30px desktop-max static value. Browser CSS overrides with fluid scaling (24px min \u2192 30px max). See src/styles/theme.css."
+            "note": "Figma stores the 30px desktop-max static value. Browser CSS overrides with fluid scaling (24px min → 30px max). See src/styles/theme.css."
           }
         }
       },
@@ -1519,7 +1654,7 @@
         "$extensions": {
           "com.figma.variables": {
             "fontSize": "clamp(18px, 2vw, 20px)",
-            "note": "Figma stores the 20px desktop-max static value. Browser CSS overrides with fluid scaling (18px min \u2192 20px max). See src/styles/theme.css."
+            "note": "Figma stores the 20px desktop-max static value. Browser CSS overrides with fluid scaling (18px min → 20px max). See src/styles/theme.css."
           }
         }
       },
@@ -1603,112 +1738,112 @@
         "$type": "dimension",
         "section": {
           "$value": "{primitive.space.12}",
-          "$description": "48px between H2 sections \u2014 generous section break for doc pages."
+          "$description": "48px between H2 sections — generous section break for doc pages."
         },
         "paragraph": {
           "$value": "{primitive.space.6}",
-          "$description": "24px between paragraphs \u2014 comfortable prose rhythm for long-form doc content."
+          "$description": "24px between paragraphs — comfortable prose rhythm for long-form doc content."
         },
         "inline": {
           "$value": "{primitive.space.2}",
-          "$description": "8px inline cluster spacing \u2014 gap between metadata badges, inline icons, doc-page chips."
+          "$description": "8px inline cluster spacing — gap between metadata badges, inline icons, doc-page chips."
         }
       }
     },
     "accent": {
       "$type": "color",
       "rest": {
-        "$value": "{primitive.color.blue.500}",
-        "$description": "Default accent fill for interactive elements at rest.",
+        "$value": "{primitive.color.neutral.900}",
+        "$description": "Default accent fill for interactive elements at rest. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.500}",
-              "Dark": "{primitive.color.blue.500}"
+              "Light": "{primitive.color.neutral.900}",
+              "Dark": "{primitive.color.neutral.100}"
             }
           }
         }
       },
       "hover": {
-        "$value": "{primitive.color.blue.600}",
+        "$value": "{primitive.color.neutral.800}",
         "$description": "Accent fill on pointer hover.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.600}",
-              "Dark": "{primitive.color.blue.450}"
+              "Light": "{primitive.color.neutral.800}",
+              "Dark": "{primitive.color.neutral.200}"
             }
           }
         }
       },
       "pressed": {
-        "$value": "{primitive.color.blue.700}",
+        "$value": "{primitive.color.neutral.950}",
         "$description": "Accent fill during active press.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.700}",
-              "Dark": "{primitive.color.blue.400}"
+              "Light": "{primitive.color.neutral.950}",
+              "Dark": "{primitive.color.neutral.300}"
             }
           }
         }
       },
       "inactive": {
-        "$value": "{primitive.color.blue.200}",
+        "$value": "{primitive.color.neutral.400}",
         "$description": "Accent fill for inactive or unselected accent elements.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.200}",
-              "Dark": "{primitive.color.blue.200}"
+              "Light": "{primitive.color.neutral.400}",
+              "Dark": "{primitive.color.neutral.600}"
             }
           }
         }
       },
       "disabled": {
-        "$value": "{primitive.color.blue.100}",
+        "$value": "{primitive.color.neutral.300}",
         "$description": "Accent fill for disabled accent elements.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.100}",
-              "Dark": "{primitive.color.blue.100}"
+              "Light": "{primitive.color.neutral.300}",
+              "Dark": "{primitive.color.neutral.700}"
             }
           }
         }
       },
       "content": {
-        "$value": "{primitive.color.blue.500}",
-        "$description": "Text and icon color on neutral surfaces with accent intent.",
+        "$value": "{primitive.color.neutral.900}",
+        "$description": "Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.500}",
-              "Dark": "{primitive.color.blue.300}"
+              "Light": "{primitive.color.neutral.900}",
+              "Dark": "{primitive.color.neutral.100}"
             }
           }
         }
       },
       "contentHover": {
-        "$value": "{primitive.color.blue.600}",
+        "$value": "{primitive.color.neutral.700}",
         "$description": "Accent content color on pointer hover.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.600}",
-              "Dark": "{primitive.color.blue.200}"
+              "Light": "{primitive.color.neutral.700}",
+              "Dark": "{primitive.color.neutral.300}"
             }
           }
         }
       },
       "subtle": {
-        "$value": "{primitive.color.blue.50}",
+        "$value": "{primitive.color.neutral.100}",
         "$description": "Low-emphasis accent tint for hover backgrounds and selection highlights.",
         "$extensions": {
           "com.figma.variables": {
             "modes": {
-              "Light": "{primitive.color.blue.50}",
-              "Dark": "{primitive.color.blue.900}"
+              "Light": "{primitive.color.neutral.100}",
+              "Dark": "{primitive.color.neutral.800}"
             }
           }
         }
@@ -1717,8 +1852,8 @@
     "radius": {
       "action": {
         "$type": "dimension",
-        "$value": "{primitive.radius.12}",
-        "$description": "Corner radius for interactive action elements like buttons and inputs."
+        "$value": "{primitive.radius.8}",
+        "$description": "The shape knob. Corner radius for interactive action elements (buttons, inputs, badges, alerts, segmented items). Tailwind's rounded-md resolves to exactly this value via --role-radius; containers are one step above it at rounded-lg. Override role.radius in a tenant overlay to reshape the whole system from one value."
       }
     },
     "borderWidth": {
@@ -2129,17 +2264,17 @@
         "border": {
           "rest": {
             "$type": "color",
-            "$value": "{semantic.color.border.default}",
+            "$value": "{semantic.color.border.interactive}",
             "$description": "Secondary button border."
           },
           "hover": {
             "$type": "color",
-            "$value": "{semantic.color.border.default}",
+            "$value": "{semantic.color.border.interactive}",
             "$description": "Secondary button hover border."
           },
           "pressed": {
             "$type": "color",
-            "$value": "{semantic.color.border.default}",
+            "$value": "{semantic.color.border.interactive}",
             "$description": "Secondary button pressed border."
           },
           "disabled": {
@@ -2166,7 +2301,7 @@
       },
       "border": {
         "$type": "color",
-        "$value": "{semantic.color.border.default}"
+        "$value": "{semantic.color.border.interactive}"
       },
       "borderError": {
         "$type": "color",
@@ -2306,7 +2441,7 @@
     },
     "input": {
       "$type": "color",
-      "$value": "{semantic.color.border.default}",
+      "$value": "{semantic.color.border.interactive}",
       "$description": "Input field border. shadcn role: input."
     },
     "ring": {