lutra 0.0.33 → 0.1.4

package/dist/css/1-props.css

@@ -0,0 +1,440 @@
+/**
+ * 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
+ */
+
+
+/**
+ * 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-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; }
+
+/**
+ * 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-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; }
+
+/**
+ * Fields
+ */
+
+@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; }
+
+/**
+ * Button Component
+ */
+
+@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; }
+
+/**
+ * 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); }
+
+/**
+ * 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-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; }
+
+/**
+ * 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-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; }
+
+/**
+ * Status Colors
+ */
+
+@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; }
+
+/**
+ * Focus
+ */
+
+@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-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); }
+
+/**
+ * Tooltips
+ */
+
+@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; }
+
+/**
+ * Notifications
+ */
+
+@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; }
+
+/**
+ * Menu
+ */
+
+@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; }