lutra 0.1.0 → 0.1.4

package/dist/css/1-props.css

@@ -1,775 +1,440 @@
 /**
- * Form fields
+ * Design Token System for Lutra Components
+ * 
+ * Naming Pattern: --{component}-{css-property}[-{state}][--{modifier}]
+ * 
+ * Colors: subtlest, subtler, subtle, normal, strong, stronger, strongest
+ * States: selected, checked, disabled, invalid, valid, success, danger, warn, info, loading
+ * Modifiers (double-dash): --hover, --focus, --active, --visited
  */
 
-@property --field-radius {
-    syntax: "<length-percentage>";
-    inherits: true;
-    initial-value: 6px;
-}
-
-@property --field-padding {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 8px;
-}
-
-@property --field-border-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 1px;
-}
-
-@property --field-border-style {
-    syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
-    inherits: true;
-    initial-value: solid;
-}
-
-@property --field-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ccc;
-}
-
-@property --field-border-color-error {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #dc3545;
-}
-
-@property --field-border-color-success {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #28a745;
-}
-
-@property --field-border-color-warning {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ffc107;
-}
-
-@property --field-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: black;
-}
-
-@property --field-placeholder-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ddd;
-}
-
-@property --field-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: transparent;
-}
+
+/**
+ * Spacing Scale
+ */
+
+@property --base-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
+
+@property --space-025 { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --space-050 { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --space-075 { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --space-100 { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --space-125 { syntax: "<length>"; inherits: true; initial-value: 20px; }
+@property --space-150 { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --space-175 { syntax: "<length>"; inherits: true; initial-value: 28px; }
+@property --space-200 { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --space-225 { syntax: "<length>"; inherits: true; initial-value: 36px; }
+@property --space-250 { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --space-300 { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --space-350 { syntax: "<length>"; inherits: true; initial-value: 56px; }
+@property --space-400 { syntax: "<length>"; inherits: true; initial-value: 64px; }
+@property --space-450 { syntax: "<length>"; inherits: true; initial-value: 72px; }
+@property --space-500 { syntax: "<length>"; inherits: true; initial-value: 80px; }
+@property --space-550 { syntax: "<length>"; inherits: true; initial-value: 88px; }
+@property --space-600 { syntax: "<length>"; inherits: true; initial-value: 96px; }
+@property --space-700 { syntax: "<length>"; inherits: true; initial-value: 104px; }
+@property --space-800 { syntax: "<length>"; inherits: true; initial-value: 112px; }
+@property --space-900 { syntax: "<length>"; inherits: true; initial-value: 120px; }
+@property --space-1000 { syntax: "<length>"; inherits: true; initial-value: 128px; }
+
+@property --space-xs { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --space-sm { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --space-md { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --space-lg { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --space-xl { syntax: "<length>"; inherits: true; initial-value: 64px; }
+
+/**
+ * Fonts
+ */
+
+@property --font-family         { syntax: "<string>#"; inherits: true; initial-value: "sans-serif"; }
+@property --font-family-heading { syntax: "<string>#"; inherits: true; initial-value: "sans-serif"; }
+@property --font-family-mono    { syntax: "<string>#"; inherits: true; initial-value: "monospace"; }
+@property --font-scale          { syntax: "<number>"; inherits: true; initial-value: 1.2; }
+@property --font-size-base      { syntax: "<length>"; inherits: true; initial-value: 16px; }
+
+/* font size */
+@property --font-size-xs { syntax: "<length>"; inherits: true; initial-value: 0.75em; }
+@property --font-size-sm { syntax: "<length>"; inherits: true; initial-value: 0.875em; }
+@property --font-size-p  { syntax: "<length>"; inherits: true; initial-value: 1em; }
+@property --font-size-h6 { syntax: "<length>"; inherits: true; initial-value: 1.25em; }
+@property --font-size-h5 { syntax: "<length>"; inherits: true; initial-value: 1.5em; }
+@property --font-size-h4 { syntax: "<length>"; inherits: true; initial-value: 1.75em; }
+@property --font-size-h3 { syntax: "<length>"; inherits: true; initial-value: 2em; }
+@property --font-size-h2 { syntax: "<length>"; inherits: true; initial-value: 2.5em; }
+@property --font-size-h1 { syntax: "<length>"; inherits: true; initial-value: 3em; }
+@property --font-size-hero { syntax: "<length>"; inherits: true; initial-value: 4em; }
+@property --font-size-jumbo { syntax: "<length>"; inherits: true; initial-value: 5em; }
+
+/* font weight */
+@property --font-weight-thin { syntax: "<number>"; inherits: true; initial-value: 300; }
+@property --font-weight-light { syntax: "<number>"; inherits: true; initial-value: 400; }
+@property --font-weight-normal { syntax: "<number>"; inherits: true; initial-value: 500; }
+@property --font-weight-medium { syntax: "<number>"; inherits: true; initial-value: 600; }
+@property --font-weight-semibold { syntax: "<number>"; inherits: true; initial-value: 700; }
+@property --font-weight-bold { syntax: "<number>"; inherits: true; initial-value: 800; }
+@property --font-weight-black { syntax: "<number>"; inherits: true; initial-value: 900; }
+
+@property --font-weight-p    { syntax: "<number>"; inherits: true; initial-value: 400; }
+@property --font-weight-h6   { syntax: "<number>"; inherits: true; initial-value: 500; }
+@property --font-weight-h5   { syntax: "<number>"; inherits: true; initial-value: 600; }
+@property --font-weight-h4   { syntax: "<number>"; inherits: true; initial-value: 600; }
+@property --font-weight-h3   { syntax: "<number>"; inherits: true; initial-value: 600; }
+@property --font-weight-h2   { syntax: "<number>"; inherits: true; initial-value: 700; }
+@property --font-weight-h1   { syntax: "<number>"; inherits: true; initial-value: 800; }
+@property --font-weight-hero { syntax: "<number>"; inherits: true; initial-value: 800; }
+
+/* line height */
+@property --font-line-height         { syntax: "<number>"; inherits: true; initial-value: 1.5; }
+@property --font-line-height-tight   { syntax: "<number>"; inherits: true; initial-value: 1.2; }
+@property --font-line-height-heading { syntax: "<number>"; inherits: true; initial-value: 1.2; }
+@property --font-line-height-mono    { syntax: "<number>"; inherits: true; initial-value: 1.5; }
+
+/* text color */
+@property --text-color-p         { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-p-subtle    { syntax: "*"; inherits: true; initial-value: #666666; }
+@property --text-color-p-subtler   { syntax: "*"; inherits: true; initial-value: #999999; }
+@property --text-color-p-subtlest  { syntax: "*"; inherits: true; initial-value: #cccccc; }
+
+@property --text-color-heading   { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-h6        { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-h5        { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-h4        { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-h3        { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-h2        { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-h1        { syntax: "*"; inherits: true; initial-value: #333333; }
+@property --text-color-hero      { syntax: "*"; inherits: true; initial-value: #333333; }
+
+/* links */
+
+@property --link-text-decoration       { syntax: "<string>"; inherits: true; initial-value: none; }
+@property --link-text-decoration-hover { syntax: "<string>"; inherits: true; initial-value: underline; }
+
+@property --link-color                 { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --link-color-visited         { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --link-color-active          { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
+@property --link-color-hover           { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
+@property --link-color-disabled        { syntax: "*"; inherits: true; initial-value: #cccccc; }
+@property --link-color-loading         { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+@property --link-icon-size             { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --link-icon-order            { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**
  * Borders
  */
 
-@property --border-radius {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 8px;
-}
-
-@property --border-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 1px;
-}
-
-@property --border-style {
-    syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
-    inherits: true;
-    initial-value: solid;
-}
-
-@property --border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ccc;
-}
+@property --border-radius-scale    { syntax: "<number>"; inherits: true; initial-value: 1.2; }
+@property --border-radius-base     { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --border-radius-sm       { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --border-radius-lg       { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --border-size-thin       { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --border-size-thick      { syntax: "<length>"; inherits: true; initial-value: 2px; }
+@property --border-style           { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+
+@property --border-color           { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --border-color-subtle    { syntax: "*"; inherits: true; initial-value: #e2e8f0; }
+@property --border-color-strong    { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --border-color-stronger  { syntax: "*"; inherits: true; initial-value: #111111; }
+
+@property --border-color-active    { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --border-color-inactive  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --border-color-disabled  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --border-color-focus     { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --border-color-invalid   { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --border-color-valid     { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --border-color-success   { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --border-color-danger    { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --border-color-warn      { syntax: "*"; inherits: true; initial-value: #ca8a04; }
+@property --border-color-info      { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --border-color-selected  { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --border-color-interest  { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --border-color-loading   { syntax: "*"; inherits: true; initial-value: #7c3aed; }
 
 /**
- * Icons
+ * Forms
  */
 
-@property --icon-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 24px;
-}
+@property --form-background { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
+@property --form-background-actions { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
+@property --form-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --form-border-color { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #d1d5db; }
+@property --form-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --form-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 
 /**
- * Focus
+ * Fields
  */
-@property --focus-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 2px;
-}
-
-@property --focus-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: oklch(0.5 0.2 280);
-}
+
+@property --field-background            { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+
+@property --field-background-active    { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-background-inactive  { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --field-background-disabled  { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --field-background-focus     { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-background-invalid   { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
+@property --field-background-valid     { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --field-background-success   { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --field-background-danger    { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
+@property --field-background-warn      { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
+@property --field-background-info      { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
+@property --field-background-selected  { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
+@property --field-background-interest  { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+@property --field-background-loading   { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --field-border-color          { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-active    { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-inactive  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-disabled  { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-focus     { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-invalid   { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-valid     { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-success   { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-danger    { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-warn      { syntax: "*"; inherits: true; initial-value: #ca8a04; }
+@property --field-border-color-info      { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-selected  { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-interest  { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --field-border-color-loading   { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+@property --field-border-size          { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --field-border-style         { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --field-border-radius        { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+@property --field-color                { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --field-color-active         { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-color-inactive       { syntax: "*"; inherits: true; initial-value: #666666; }
+@property --field-color-disabled       { syntax: "*"; inherits: true; initial-value: #cccccc; }
+@property --field-color-focus          { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-color-invalid        { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --field-color-valid          { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --field-color-success        { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --field-color-danger         { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --field-color-warn           { syntax: "*"; inherits: true; initial-value: #ca8a04; }
+@property --field-color-info           { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-color-selected       { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --field-color-interest       { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+@property --field-color-loading        { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+@property --field-label-color          { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --field-label-font-size      { syntax: "<length>"; inherits: true; initial-value: 1em; }
+@property --field-label-font-weight    { syntax: "<number>"; inherits: true; initial-value: 600; }
+
+@property --field-placeholder-color    { syntax: "*"; inherits: true; initial-value: #999999; }
+@property --field-padding-inline       { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --field-padding-block        { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+@property --field-icon-size            { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --field-icon-order           { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**
- * Spaces (margins and padding)
+ * Button Component
  */
-@property --space-base {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 16px;
-}
-
-@property --space-ratio {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1.2;
-}
+
+@property --button-base-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
+
+/* primary */
+
+@property --button-submit-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-disabled { syntax: "*"; inherits: true; initial-value: #cccccc; }
+@property --button-submit-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+@property --button-submit-background { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
+@property --button-submit-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-submit-border-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-hover { syntax: "*"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --button-submit-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+/* action */
+@property --button-action-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-disabled { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-focus { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-loading { syntax: "*"; inherits: true; initial-value: #ffffff; }
+
+@property --button-action-background { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --button-action-background-hover { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --button-action-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
+@property --button-action-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-action-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-action-border-color { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-hover { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-disabled { syntax: "*"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-action-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+/* danger */
+@property --button-danger-color { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-disabled { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-focus { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-loading { syntax: "*"; inherits: true; initial-value: #dc2626; }
+
+@property --button-danger-background { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
+@property --button-danger-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-danger-border-color { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-hover { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --button-danger-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+/* success */
+@property --button-success-color { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-disabled { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-focus { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-loading { syntax: "*"; inherits: true; initial-value: #16a34a; }
+
+@property --button-success-background { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-disabled { syntax: "*"; inherits: true; initial-value: #f3f4f6; }
+@property --button-success-background-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-success-background-loading { syntax: "*"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-success-border-color { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-hover { syntax: "*"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-disabled { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --button-success-border-color-focus { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --button-success-border-color-loading { syntax: "*"; inherits: true; initial-value: #7c3aed; }
+
+@property --button-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --button-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --button-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+@property --button-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --button-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --button-padding { syntax: "*"; inherits: true; initial-value: 8px; }
+@property --button-border { syntax: "*"; inherits: true; initial-value: none; }
+
+@property --button-font-weight { syntax: "<number>"; inherits: true; initial-value: 500; }
+
+@property --button-icon-size { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --button-icon-order { syntax: "<number>"; inherits: true; initial-value: 1; }
 
 /**
- * Typography
+ * Shadows
  */
 
-@property --font-size-base {
-    syntax: "<length-percentage>";
-    inherits: true;
-    initial-value: 16px;
-}
-
-@property --font-size-ratio {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1.2;
-}
-
-@property --font-family {
-    syntax: "<string>#";
-    inherits: true;
-    initial-value: "Helvetica", "sans-serif";
-}
-
-@property --font-family-mono {
-    syntax: "<string>#";
-    inherits: true;
-    initial-value: "monospace";
-}
-
-@property --font-weight-regular {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 400;
-}
-
-@property --font-weight-medium {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 500;
-}
-
-@property --font-weight-semibold {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 600;
-}
-
-@property --font-weight-bold {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 700;
-}
-
-@property --line-height {
-    syntax: "<length-percentage> | <number>";
-    inherits: true;
-    initial-value: 1.5;
-}
-
-@property --text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #333;
-}
-
-@property --text-color-subtle {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #666;
-}
-
-@property --text-color-subtler {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ccc;
-}
-
-@property --text-color-subtlest {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ddd;
-}
-
-@property --text-color-heading {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: black;
-}
-
-@property --text-color-link {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007bff;
-}
-
-@property --text-color-link-hover {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-@property --text-color-link-active {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-@property --text-color-link-visited {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-@property --text-link-decoration {
-    syntax: "<string>";
-    inherits: true;
-    initial-value: none;
-}
-
-@property --text-link-decoration-hover {
-    syntax: "<string>";
-    inherits: true;
-    initial-value: underline;
-}
+@property --shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
+@property --shadow-base { syntax: "<shadow>"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
 
 /**
- * Preformatted text
+ * Code
  */
 
-@property --code-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #000;
-}
-
-@property --code-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #f8f9fa;
-}
-
-@property --code-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #ccc;
-}
-
-@property --code-border-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 1px;
-}
+@property --code-background { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f8fafc; }
+@property --code-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --code-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --code-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
+@property --code-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --code-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+
+@property --code-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --code-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 /**
- * Buttons
+ * Backgrounds
  */
 
-@property --button-radius {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 8px;
-}
-
-@property --button-padding {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 16px;
-}
-
-@property --button-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: white;
-}
-
-@property --button-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007bff;
-}
-
-@property --button-border-size {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 1px;
-}
-
-@property --button-border-style {
-    syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
-    inherits: true;
-    initial-value: solid;
-}
-
-@property --button-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007bff;
-}
-
-@property --button-hover-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: white;
-}
-
-@property --button-hover-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-@property --button-hover-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-/* Active */
-
-@property --button-active-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: white;
-}
-
-@property --button-active-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-@property --button-active-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0056b3;
-}
-
-/* Secondary */
-
-@property --button-secondary-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007bff;
-}
-
-@property --button-secondary-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #f8f9fa;
-}
-
-@property --button-secondary-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #f8f9fa;
-}
-
-@property --button-secondary-hover-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007bff;
-}
-
-@property --button-secondary-hover-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #e9ecef;
-}
-
-@property --button-secondary-active-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007bff;
-}
-
-@property --button-secondary-active-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #e9ecef;
-}
-
-/* Warning button */
-
-@property --button-warning-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFC107;
-}
-
-@property --button-warning-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFF3CD;
-}
-
-@property --button-warning-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFC107;
-}
-
-@property --button-warning-hover-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFC107;
-}
-
-@property --button-warning-hover-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFC107;
-}
-
-@property --button-warning-hover-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFC107;
-}
-
-@property --button-warning-active-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #212529;
-}
-
-@property --button-warning-active-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #E0A800;
-}
-
-@property --button-warning-active-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #D39E00;
-}
-
-/* Danger/Error button */
-
-@property --button-danger-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: white;
-}
-
-@property --button-danger-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: var(--state-error-color);
-}
-
-@property --button-danger-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: var(--state-error-color);
-}
-
-@property --button-danger-hover-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: white;
-}
-
-@property --button-danger-hover-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #C82333;
-}
-
-@property --button-danger-hover-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #BD2130;
-}
-
-@property --button-danger-active-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: white;
-}
-
-@property --button-danger-active-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #BD2130;
-}
-
-@property --button-danger-active-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #B21F2D;
-}
-
-/* Tertiary/Ghost button */
-
-@property --button-tertiary-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: var(--text-color-link);
-}
-
-@property --button-tertiary-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: transparent;
-}
-
-@property --button-tertiary-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: transparent;
-}
-
-@property --button-tertiary-hover-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: var(--text-color-link-hover);
-}
-
-@property --button-tertiary-hover-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: rgba(0, 0, 0, 0.05);
-}
-
-@property --button-tertiary-hover-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: transparent;
-}
-
-@property --button-tertiary-active-text-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: var(--text-color-link-active);
-}
-
-@property --button-tertiary-active-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: rgba(0, 0, 0, 0.1);
-}
-
-@property --button-tertiary-active-border-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: transparent;
-}
+@property --background-body { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
+@property --background-main { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
+@property --background-main-subtle { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f8fafc; }
+
+@property --background-active { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #2563eb; }
+@property --background-inactive { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f3f4f6; }
+@property --background-disabled { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #f3f4f6; }
+@property --background-focus { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #2563eb; }
+@property --background-invalid { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #fef2f2; }
+@property --background-valid { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #dcfce7; }
+@property --background-success { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #dcfce7; }
+@property --background-danger { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #fef2f2; }
+@property --background-warn { syntax: "<color>"; inherits: true; initial-value: #fefce8; }
+@property --background-info { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
+@property --background-selected { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
+@property --background-interest { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+@property --background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
 
 /**
- * Overlays
+ * Status Colors
  */
 
-@property --overlay-bg-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #000;
-}
+@property --status-default-background { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --status-default-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --status-ok-background { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --status-ok-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --status-alert-background { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --status-alert-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --status-warn-background { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --status-warn-color { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --status-info-background { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --status-info-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --status-task-background { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --status-task-color { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
 
-@property --overlay-backdrop-filter {
-    syntax: "<filter-function>";
-    inherits: true;
-    initial-value: blur(10px);
-}
+/**
+ * Focus
+ */
 
-@property --overlay-control-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #fff;
-}
+@property --focus-ring { syntax: "*"; inherits: true; initial-value: 2px solid #2563eb; }
+@property --focus-ring-size { syntax: "<length>"; inherits: true; initial-value: 2px; }
+@property --focus-ring-color { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --focus-ring-color-invalid { syntax: "*"; inherits: true; initial-value: #dc2626; }
+@property --focus-ring-offset { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 /**
  * Transitions
  */
 
-@property --transition-speed-base {
-    syntax: "<time>";
-    inherits: true;
-    initial-value: 0.3s;
-}
+@property --transition-duration-fast { syntax: "<time>"; inherits: true; initial-value: 0.15s; }
+@property --transition-duration-base { syntax: "<time>"; inherits: true; initial-value: 0.3s; }
+@property --transition-duration-slow { syntax: "<time>"; inherits: true; initial-value: 0.5s; }
+@property --transition-timing-function { syntax: "*"; inherits: true; initial-value: cubic-bezier(0.4, 0, 0.2, 1); }
 
-@property --transition-speed-fast {
-    syntax: "<time>";
-    inherits: true;
-    initial-value: 0.1s;
-}
+/**
+ * Tooltips
+ */
 
-@property --transition-speed-slow {
-    syntax: "<time>";
-    inherits: true;
-    initial-value: 0.5s;
-}
+@property --tooltip-background { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
+@property --tooltip-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --tooltip-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --tooltip-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
+@property --tooltip-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --tooltip-shadow-color { syntax: "*"; inherits: true; initial-value: #000000; }
 
 /**
- * States
+ * Notifications
  */
 
-@property --state-warn-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFC107; /* Vibrant Yellow */
-}
-
-@property --state-warn-bg {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFF3CD; /* Light Yellow */
-}
-
-@property --state-warn-border {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FFEEBA; /* Darker Yellow */
-}
-
-@property --state-warn-text {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #856404; /* Dark Yellow/Brown text */
-}
-
-@property --state-info-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #007BFF; /* Bright Blue */
-}
-
-@property --state-info-bg {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #E0F2FE; /* Light Blue */
-}
-
-@property --state-info-border {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #7DD3FC; /* Medium Blue */
-}
-
-@property --state-info-text {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #0C4A6E; /* Dark Blue */
-}
-
-@property --state-success-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #28A745; /* Green */
-}
-
-@property --state-success-bg {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #DCFCE7; /* Light Green */
-}
-
-@property --state-success-border {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #86EFAC; /* Medium Green */
-}
-
-@property --state-success-text {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #166534; /* Dark Green */
-}
-
-@property --state-error-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #DC3545; /* Red */
-}
-
-@property --state-error-bg {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FEE2E2; /* Light Red */
-}
-
-@property --state-error-border {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #FCA5A5; /* Medium Red */
-}
-
-@property --state-error-text {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #991B1B; /* Dark Red */
-}
-
-@property --state-processing-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #6F42C1; /* Purple */
-}
-
-@property --state-processing-bg {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #EDE9FE; /* Light Purple */
-}
-
-@property --state-processing-border {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #C4B5FD; /* Medium Purple */
-}
-
-@property --state-processing-text {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #5B21B6; /* Dark Purple */
-}
+@property --notification-background-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --notification-border-color { syntax: "*"; inherits: true; initial-value: #cccccc; }
+@property --notification-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --notification-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --notification-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 /**
- * Shadows
+ * Menu
  */
 
-@property --shadow-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #000;
-}
-
-@property --shadow-opacity {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0.1;
-}
-
-@property --shadow-blur {
-    syntax: "<length>";
-    inherits: true;
-    initial-value: 10px;
-}
+@property --menu-background-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --menu-background-color-hover { syntax: "<color>"; inherits: true; initial-value: #dde8f2; }
+@property --menu-text-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --menu-text-color-subtle { syntax: "*"; inherits: true; initial-value: #666666; }
+@property --menu-border-color { syntax: "*"; inherits: true; initial-value: #cccccc; }
+@property --menu-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
+@property --menu-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
+@property --menu-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }