lutra 0.1.68 → 0.1.70

package/dist/css/1-props.css

@@ -37,11 +37,15 @@
 @property --space-900 { syntax: "<length>"; inherits: true; initial-value: 120px; }
 @property --space-1000 { syntax: "<length>"; inherits: true; initial-value: 128px; }
 
+@property --space-xxs { syntax: "<length>"; inherits: true; initial-value: 4px; }
 @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; }
+@property --space-lg { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --space-xl { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --space-xxl { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --space-xxxl { syntax: "<length>"; inherits: true; initial-value: 64px; }
+@property --space-xxxxl { syntax: "<length>"; inherits: true; initial-value: 80px; }
 
 /**
  * Fonts
@@ -54,17 +58,17 @@
 @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; }
+@property --font-size-xs { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --font-size-sm { syntax: "<length>"; inherits: true; initial-value: 14px; }
+@property --font-size-p  { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --font-size-h6 { syntax: "<length>"; inherits: true; initial-value: 20px; }
+@property --font-size-h5 { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --font-size-h4 { syntax: "<length>"; inherits: true; initial-value: 28px; }
+@property --font-size-h3 { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --font-size-h2 { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --font-size-h1 { syntax: "<length>"; inherits: true; initial-value: 48px; }
+@property --font-size-hero { syntax: "<length>"; inherits: true; initial-value: 64px; }
+@property --font-size-jumbo { syntax: "<length>"; inherits: true; initial-value: 80px; }
 
 /* font weight */
 @property --font-weight-thin { syntax: "<number>"; inherits: true; initial-value: 300; }
@@ -108,8 +112,8 @@
 
 /* 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-text-decoration       { syntax: "*"; inherits: true; initial-value: none; }
+@property --link-text-decoration-hover { syntax: "*"; inherits: true; initial-value: underline; }
 
 @property --link-color                 { syntax: "*"; inherits: true; initial-value: #2563eb; }
 @property --link-color-visited         { syntax: "*"; inherits: true; initial-value: #7c3aed; }
@@ -156,13 +160,22 @@
  * Forms
  */
 
-@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-background { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --form-background-actions { syntax: "*"; 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-color { syntax: "*"; 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; }
 
+@property --form-field-gap { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --form-label-gap { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --form-section-gap { syntax: "<length>"; inherits: true; initial-value: 32px; }
+@property --form-title-gap { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --form-title-padding-block-end { syntax: "<length>"; inherits: true; initial-value: 8px; }
+@property --form-field-inside-gap { syntax: "<length>"; inherits: true; initial-value: 4px; }
+@property --form-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --form-padding-inline { syntax: "<length>"; inherits: true; initial-value: 32px; }
+
 /**
  * Fields
  */
@@ -183,50 +196,51 @@
 @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-color          { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-active    { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-inactive  { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-disabled  { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --field-border-color-focus     { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-invalid   { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-valid     { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-success   { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-border-color-danger    { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-border-color-warn      { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --field-border-color-info      { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-selected  { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-border-color-interest  { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --field-border-color-loading   { syntax: "<color>"; 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-color                { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+@property --field-color-active         { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-inactive       { syntax: "<color>"; inherits: true; initial-value: #666666; }
+@property --field-color-disabled       { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
+@property --field-color-focus          { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-invalid        { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-color-valid          { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-color-success        { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --field-color-danger         { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --field-color-warn           { syntax: "<color>"; inherits: true; initial-value: #ca8a04; }
+@property --field-color-info           { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-selected       { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --field-color-interest       { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+@property --field-color-loading        { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
+
+@property --field-label-color          { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --field-label-font-size      { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --field-label-font-weight    { syntax: "<number>"; inherits: true; initial-value: 600; }
 
-@property --field-placeholder-color    { syntax: "*"; inherits: true; initial-value: #999999; }
+@property --field-placeholder-color    { syntax: "<color>"; 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; }
+@property --field-group-gap            { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 /**
  * Checkbox and Radio
@@ -236,93 +250,107 @@
 @property --checkbox-border-radius { syntax: "<length>"; inherits: true; initial-value: 4px; }
 @property --checkbox-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --checkbox-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
-@property --checkbox-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
-@property --checkbox-border-color-checked { syntax: "*"; inherits: true; initial-value: #2563eb; }
+@property --checkbox-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --checkbox-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
 @property --checkbox-indicator-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 
+/**
+ * Toggle
+ */
+
+@property --toggle-width { syntax: "<length>"; inherits: true; initial-value: 44px; }
+@property --toggle-height { syntax: "<length>"; inherits: true; initial-value: 24px; }
+@property --toggle-background { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --toggle-background-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --toggle-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --toggle-border-color-checked { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --toggle-thumb-size { syntax: "<length>"; inherits: true; initial-value: 18px; }
+@property --toggle-thumb-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --toggle-thumb-shadow { syntax: "*"; inherits: true; initial-value: 0 1px 3px rgba(0, 0, 0, 0.2); }
+
 /**
  * Button Component
  */
 
-@property --button-base-color { syntax: "*"; inherits: true; initial-value: #ffffff; }
-@property --button-base-color-hover { syntax: "*"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-base-color-hover { syntax: "<color>"; 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-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-submit-color-disabled { syntax: "<color>"; inherits: true; initial-value: #cccccc; }
+@property --button-submit-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-color-loading { syntax: "<color>"; 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-background { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-submit-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-background-loading { syntax: "<color>"; 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; }
+@property --button-submit-border-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
+@property --button-submit-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-submit-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-submit-border-color-loading { syntax: "<color>"; 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; }
+@property --button-action-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-hover { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-disabled { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-focus { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --button-action-color-loading { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+
+@property --button-action-background { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-background-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-action-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-action-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-action-border-color { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #111111; }
+@property --button-action-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-action-border-color-loading { syntax: "<color>"; 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; }
+@property --button-danger-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-disabled { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-focus { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-color-loading { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+
+@property --button-danger-background { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-danger-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-danger-border-color { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
+@property --button-danger-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-danger-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-danger-border-color-loading { syntax: "<color>"; 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-success-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-disabled { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-focus { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-color-loading { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+
+@property --button-success-background { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --button-success-background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-success-background-loading { syntax: "<color>"; inherits: true; initial-value: #f0f9ff; }
+
+@property --button-success-border-color { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-hover { syntax: "<color>"; inherits: true; initial-value: #16a34a; }
+@property --button-success-border-color-disabled { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
+@property --button-success-border-color-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --button-success-border-color-loading { syntax: "<color>"; 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; }
@@ -330,7 +358,7 @@
 
 @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-padding { syntax: "<length>"; 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; }
@@ -342,16 +370,16 @@
  * Shadows
  */
 
-@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); }
+@property --shadow-color { syntax: "<color>"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
+@property --shadow-base { syntax: "*"; inherits: true; initial-value: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
 
 /**
  * Code
  */
 
-@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-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+@property --code-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+@property --code-border-color { syntax: "<color>"; 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; }
@@ -363,18 +391,18 @@
  * Backgrounds
  */
 
-@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-body { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --background-main { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
+@property --background-main-subtle { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
+
+@property --background-active { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --background-inactive { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --background-disabled { syntax: "<color>"; inherits: true; initial-value: #f3f4f6; }
+@property --background-focus { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --background-invalid { syntax: "<color>"; inherits: true; initial-value: #fef2f2; }
+@property --background-valid { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --background-success { syntax: "<color>"; inherits: true; initial-value: #dcfce7; }
+@property --background-danger { syntax: "<color>"; 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; }
@@ -404,8 +432,8 @@
 
 @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-color { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
+@property --focus-ring-color-invalid { syntax: "<color>"; inherits: true; initial-value: #dc2626; }
 @property --focus-ring-offset { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 /**
@@ -422,10 +450,10 @@
  */
 
 @property --tooltip-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --tooltip-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --tooltip-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
 @property --tooltip-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); }
+@property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 8px rgba(0, 0, 0, 0.15); }
 
 /**
  * Toast (inherits from surface system)
@@ -434,17 +462,17 @@
 @property --toast-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --toast-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --toast-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --toast-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
-@property --toast-padding-inline { syntax: "<length>"; inherits: true; initial-value: 1rem; }
-@property --toast-padding-block { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
-@property --toast-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
-@property --toast-min-width { syntax: "<length>"; inherits: true; initial-value: 20rem; }
-@property --toast-max-width { syntax: "<length>"; inherits: true; initial-value: 28rem; }
+@property --toast-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
+@property --toast-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
+@property --toast-padding-block { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --toast-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --toast-min-width { syntax: "<length>"; inherits: true; initial-value: 320px; }
+@property --toast-max-width { syntax: "<length>"; inherits: true; initial-value: 448px; }
 @property --toast-title-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
 @property --toast-title-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
 @property --toast-text-color { syntax: "*"; inherits: true; initial-value: #666666; }
-@property --toast-icon-size { syntax: "<length>"; inherits: true; initial-value: 1.25rem; }
-@property --toast-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
+@property --toast-icon-size { syntax: "<length>"; inherits: true; initial-value: 20px; }
+@property --toast-offset { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
 /**
  * Menu
@@ -472,36 +500,42 @@
 @property --table-cell-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
 
 @property --table-header-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
-@property --table-header-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-header-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
 @property --table-header-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
 
 @property --table-row-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
 @property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
 @property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
 
-@property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
+@property --table-cell-color { syntax: "<color>"; inherits: true; initial-value: #1a1a1a; }
+
+/**
+ * Data List
+ */
+
+@property --data-list-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
 
 /**
  * Modal
  */
 
 @property --modal-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
-@property --modal-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
 @property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
 @property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --modal-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
+@property --modal-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
 
 @property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
 @property --modal-width { syntax: "*"; inherits: true; initial-value: fit-content; }
 @property --modal-min-width { syntax: "*"; inherits: true; initial-value: auto; }
-@property --modal-max-width { syntax: "*"; inherits: true; initial-value: 40rem; }
-@property --modal-max-height { syntax: "*"; inherits: true; initial-value: 80svh; }
+@property --modal-max-width { syntax: "<length>"; inherits: true; initial-value: 640px; }
+@property --modal-max-height { syntax: "<length>"; inherits: true; initial-value: 600px; }
 @property --modal-gap { syntax: "<length>"; inherits: true; initial-value: 0px; }
 
 @property --modal-actions-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
-@property --modal-actions-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
+@property --modal-actions-border-color { syntax: "<color>"; inherits: true; initial-value: #d1d5db; }
 @property --modal-actions-padding-inline { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --modal-actions-padding-block { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
@@ -513,7 +547,7 @@
 @property --surface-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --surface-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --surface-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
+@property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
 
 /**
  * Popover Component
@@ -522,18 +556,18 @@
 @property --popover-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
 @property --popover-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
 @property --popover-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
-@property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
+@property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 4px 16px rgba(0, 0, 0, 0.15); }
 @property --popover-width { syntax: "*"; inherits: true; initial-value: max-content; }
-@property --popover-max-width { syntax: "<length>"; inherits: true; initial-value: calc(100vw - 2rem); }
-@property --popover-max-height { syntax: "<length>"; inherits: true; initial-value: calc(100vh - 2rem); }
+@property --popover-max-width { syntax: "*"; inherits: true; initial-value: 1024px; }
+@property --popover-max-height { syntax: "*"; inherits: true; initial-value: 768px; }
 
 /**
  * Overlay System
  */
 
 @property --overlay-z-index { syntax: "<integer>"; inherits: true; initial-value: 1000; }
-@property --overlay-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
-@property --overlay-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
+@property --overlay-gap { syntax: "<length>"; inherits: true; initial-value: 12px; }
+@property --overlay-offset { syntax: "<length>"; inherits: true; initial-value: 16px; }
 
 /**
  * Scrim/Backdrop (shared across overlays)