@maggioli-design-system/styles 16.0.0 → 17.0.0

package/dist/css/globals.css

@@ -2,40 +2,49 @@
   Accessibility features
   They are used by Magma web-components to adapt to user preferences
   regarding theme, animation, contrast, and consumption.
+
+  Every registration in this file is `inherits: true`. With `false` a value
+  declared on `:root` (or written on `<html>` by a preference component) reaches
+  NOBODY: every other element resolves the initial value below, so a consumer
+  could neither retune a token nor read a preference from inside a shadow tree.
 */
 
-@property --magma-pref-theme {
-  inherits: false;
+/* Written on <html> by mds-pref-mode: the mode the user picked. */
+@property --magma-pref-mode {
+  inherits: true;
   initial-value: light;
   syntax: 'light | dark | system';
 }
 
 @property --magma-pref-theme-scheme {
-  inherits: false;
+  inherits: true;
   initial-value: light;
   syntax: 'light | dark | all';
 }
 
-@property --magma-pref-theme-name {
-  inherits: false;
-  initial-value: 'magma';
-  syntax: '<string>';
+/* Written on <html> by mds-pref-theme as a bare name (`default`,
+ * `business`), never a quoted string: a `<string>` syntax rejects it, and the
+ * computed value silently stays on the initial one. `*` admits any name. */
+@property --magma-pref-theme {
+  inherits: true;
+  initial-value: default;
+  syntax: '*';
 }
 
 @property --magma-pref-consumption {
-  inherits: false;
+  inherits: true;
   initial-value: high;
   syntax: 'high | medium | low';
 }
 
 @property --magma-pref-animation {
-  inherits: false;
+  inherits: true;
   initial-value: no-preference;
   syntax: 'reduce | no-preference | system';
 }
 
 @property --magma-pref-contrast {
-  inherits: false;
+  inherits: true;
   initial-value: no-preference;
   syntax: 'more | no-preference | system';
 }
@@ -43,13 +52,13 @@
 /* Animations */
 
 @property --magma-backdrop-animation-duration {
-  inherits: false;
+  inherits: true;
   initial-value: 300ms;
   syntax: '<time>';
 }
 
 @property --magma-outline-animation-duration {
-  inherits: false;
+  inherits: true;
   initial-value: 1.5s;
   syntax: '<time>';
 }
@@ -77,19 +86,19 @@
 /* Blur */
 
 @property --magma-backdrop-blur {
-  inherits: false;
+  inherits: true;
   initial-value: 4px;
   syntax: '<length>';
 }
 
 @property --magma-outline-blur-offset {
-  inherits: false;
+  inherits: true;
   initial-value: 6px;
   syntax: '<length>';
 }
 
 @property --magma-outline-focus-offset {
-  inherits: false;
+  inherits: true;
   initial-value: 2px;
   syntax: '<length>';
 }
@@ -102,6 +111,16 @@
   syntax: '<integer>+';
 }
 
+/* The ink drawn on the backdrop / overlay scrim (the modal close icon). The
+   scrim is black in BOTH modes, so this is a fixed light ink, not a role that
+   flips with the mode (a flipping ink measured 7.4 Lc on it in dark, #731).
+   Override it together with --magma-backdrop-color. */
+@property --magma-on-backdrop {
+  inherits: true;
+  initial-value: 252 252 252;
+  syntax: '<integer>+';
+}
+
 @property --magma-outline-blur-color {
   inherits: true;
   initial-value: transparent;
@@ -135,61 +154,78 @@
 /*
  * corner-shape
  * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape
- * also supports superellipse(-1.0 to 1.0) method
+ *
+ * `inherits: true` is what makes this token deviable. With `false` the value a
+ * consumer declares on `:root` reaches NOBODY - every element keeps seeing the
+ * initial value below - so neither the documented escape hatch nor a per-subtree
+ * override can work. Measured on Chromium 151: with `false` a wrapper declaring
+ * `round` still leaves its children on `squircle`; with `true` they follow.
+ *
+ * `syntax: '*'` is the only way to admit the functional shapes, `superellipse()`
+ * included: there is no `<superellipse()>` type to list next to the keywords, and
+ * an enumerated syntax REJECTS the function and silently falls back to the initial
+ * value. The cost is the lost safety net - with `*` a typo is no longer rejected
+ * either, it invalidates `corner-shape` and the element renders the CSS default
+ * `round` instead of staying on the design system default.
  */
 
+/* The DEFAULT shape is not declared here: it is emitted with its radius scale by
+ * projects/styles/scripts/corner.ts (build/css/corner.css, appended to the
+ * published globals.css), so shape and scale cannot drift apart. This
+ * registration only fixes the type and the value an unstyled element resolves. */
+
 @property --magma-corner-shape {
-  inherits: false;
+  inherits: true;
   initial-value: squircle;
-  syntax: 'bevel | notch | round | scoop | square | squircle';
+  syntax: '*';
 }
 
 /* z-index */
 
 @property --magma-header-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 1000;
   syntax: '<integer>';
 }
 
 @property --magma-notification-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 2000;
   syntax: '<integer>';
 }
 
 @property --magma-modal-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 3000;
   syntax: '<integer>';
 }
 
 @property --magma-backdrop-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 4000;
   syntax: '<integer>';
 }
 
 @property --magma-dropdown-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 5000;
   syntax: '<integer>';
 }
 
 @property --magma-tooltip-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 6000;
   syntax: '<integer>';
 }
 
 @property --magma-theme-overlay-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 7000;
   syntax: '<integer>';
 }
 
 @property --magma-context-menu-z-index {
-  inherits: false;
+  inherits: true;
   initial-value: 8000;
   syntax: '<integer>';
 }
@@ -199,19 +235,19 @@
  */
 
 @property --magma-view-transition-navigation {
-  inherits: false;
+  inherits: true;
   initial-value: auto;
   syntax: 'auto | traverse | push | replace';
 }
 
 :root {
+
   /*
     For browser compatibility reasons we add defaults
     to avoid issues with older browsers that do not support houdini @property
     (can be removed once support is more widespread)
   */
   --magma-backdrop-animation-duration: 300ms;
-  --magma-corner-shape: squircle;
   --magma-backdrop-blur: 4px;
   --magma-backdrop-color: 0 0 0;
   --magma-backdrop-opacity: 0.1;
@@ -222,6 +258,7 @@
   --magma-header-z-index: 1000;
   --magma-modal-z-index: 3000;
   --magma-notification-z-index: 2000;
+  --magma-on-backdrop: 252 252 252;
   --magma-outline-animation-duration: 1.5s;
   --magma-outline-blur-color: transparent;
   --magma-outline-blur-offset: 6px;
@@ -242,3 +279,3094 @@
   --magma-overlay-color: var(--magma-backdrop-color);
   --magma-overlay: rgb(var(--magma-overlay-color) / var(--magma-overlay-opacity));
 }
+
+/*
+  GENERATED - do not edit.
+  Source: the <component>/css/<component>-property.css files under
+  projects/stencil/src/components, with every initial-value resolved to a
+  literal by projects/styles/scripts/properties.ts.
+*/
+/* mds-accordion-item */
+@property --mds-accordion-item-border-color {
+  inherits: true;
+  initial-value: rgb(196 196 196);
+  syntax: '<color>';
+}
+
+@property --mds-accordion-item-border-width {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-accordion-item-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-accordion-item-description-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-accordion-item-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-accordion-item-padding-selected {
+  inherits: true;
+  initial-value: 16px 0 32px 0;
+  syntax: '<length>+';
+}
+
+@property --mds-accordion-item-padding-unselected {
+  inherits: true;
+  initial-value: 16px 0 16px 0;
+  syntax: '<length>+';
+}
+
+/* mds-accordion-timer-item */
+@property --mds-accordion-timer-item-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-accordion-timer-item-duration {
+  inherits: true;
+  initial-value: 500ms;
+  syntax: '<time>';
+}
+
+@property --mds-accordion-timer-item-progress-bar-background {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-accordion-timer-item-progress-bar-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-accordion-timer-item-progress-bar-thickness {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+/* mds-avatar-stack-item */
+@property --mds-avatar-stack-item-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-avatar-stack-item-count-background-color {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-avatar-stack-item-count-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+/* mds-avatar-stack */
+@property --mds-avatar-stack-lg-border {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-avatar-stack-lg-offset {
+  inherits: true;
+  initial-value: 2;
+  syntax: '<integer>';
+}
+
+@property --mds-avatar-stack-lg-size {
+  inherits: true;
+  initial-value: 60px;
+  syntax: '<length>';
+}
+
+@property --mds-avatar-stack-sm-border {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-avatar-stack-sm-offset {
+  inherits: true;
+  initial-value: 1.5;
+  syntax: '<number>';
+}
+
+@property --mds-avatar-stack-sm-size {
+  inherits: true;
+  initial-value: 36px;
+  syntax: '<length>';
+}
+
+/* mds-avatar */
+@property --mds-avatar-background-color {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-avatar-background-color-pending {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-avatar-color {
+  inherits: true;
+  initial-value: rgb(236 237 240);
+  syntax: '<color>';
+}
+
+@property --mds-avatar-initials-padding {
+  inherits: true;
+  initial-value: 20%;
+  syntax: '<percentage>';
+}
+
+@property --mds-avatar-radius {
+  inherits: true;
+  initial-value: 1000px;
+  syntax: '<length>';
+}
+
+/* mds-badge */
+@property --mds-badge-background {
+  inherits: true;
+  initial-value: rgb(185 231 251);
+  syntax: '<color>';
+}
+
+@property --mds-badge-border-color {
+  inherits: true;
+  initial-value: rgb(47 182 243);
+  syntax: '<color>';
+}
+
+@property --mds-badge-border-width {
+  inherits: true;
+  initial-value: 1px;
+  syntax: '<length>';
+}
+
+@property --mds-badge-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-badge-radius {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+/* mds-banner */
+@property --mds-banner-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-banner-cockade-background {
+  inherits: true;
+  initial-value: rgb(220 224 231);
+  syntax: '<color>';
+}
+
+@property --mds-banner-cockade-distance {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-banner-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-banner-content-gap {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>+';
+}
+
+@property --mds-banner-headline-color {
+  inherits: true;
+  initial-value: rgb(0 57 163);
+  syntax: '<color>';
+}
+
+@property --mds-banner-icon-color {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-banner-radius {
+  inherits: true;
+  initial-value: 40px;
+  syntax: '<length>';
+}
+
+@property --mds-banner-transition-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+/* mds-bibliography */
+@property --mds-bibliography-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-bibliography-text-decoration {
+  inherits: true;
+  initial-value: rgb(140 140 140);
+  syntax: '<color>';
+}
+
+@property --mds-bibliography-text-decoration-hover {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+/* mds-breadcrumb-item */
+@property --mds-breadcrumb-item-arrow-depth-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-item-button-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-item-button-background-hover {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-item-button-background-selected {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-item-button-border-radius {
+  inherits: true;
+  initial-value: 1000px;
+  syntax: '<length>';
+}
+
+@property --mds-breadcrumb-item-button-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-item-button-color-hover {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-item-button-color-selected {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+/* mds-breadcrumb */
+@property --mds-breadcrumb-button-background-disabled {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-button-color-current {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-breadcrumb-current-button-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+/* mds-button-dropdown */
+@property --mds-button-dropdown-radius {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-button-dropdown-window-radius {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+/* mds-button */
+@property --mds-button-await-duration {
+  inherits: true;
+  initial-value: 0.725s;
+  syntax: '<time>';
+}
+
+@property --mds-button-background {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-button-border-color-rgb {
+  inherits: true;
+  initial-value: 36 103 231;
+  syntax: '<number>+';
+}
+
+@property --mds-button-border-default-opacity {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<number>';
+}
+
+@property --mds-button-border-high-contrast-hover-width {
+  inherits: true;
+  initial-value: 3px;
+  syntax: '<length>';
+}
+
+@property --mds-button-border-high-contrast-width {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-button-border-hover-opacity {
+  inherits: true;
+  initial-value: 0.75;
+  syntax: '<number>';
+}
+
+@property --mds-button-border-opacity {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<number>';
+}
+
+@property --mds-button-border-tone-outline-hover-width {
+  inherits: true;
+  initial-value: 3px;
+  syntax: '<length>';
+}
+
+@property --mds-button-border-tone-strong-hover-width {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-button-border-tone-weak-hover-width {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-button-border-width {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-button-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-button-gap {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-button-line-clamp {
+  inherits: true;
+  initial-value: 1;
+  syntax: '<integer>';
+}
+
+@property --mds-button-radius {
+  inherits: true;
+  initial-value: 40px;
+  syntax: '<length>';
+}
+
+/* mds-calendar-cell */
+@property --mds-calendar-cell-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-boundaries-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-boundaries-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-boundaries-padding {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-cell-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-disabled-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-disabled-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-other-month-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-other-month-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-current-month-background {
+  inherits: true;
+  initial-value: rgb(204 212 226);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-current-month-boundaries-background {
+  inherits: true;
+  initial-value: rgb( 236 237 240 );
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-current-month-boundaries-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-current-month-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-other-month-background {
+  inherits: true;
+  initial-value: rgb(220 224 231);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-other-month-boundaries-background {
+  inherits: true;
+  initial-value: rgb(248 248 248);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-other-month-boundaries-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-other-month-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-today-background {
+  inherits: true;
+  initial-value: rgb(220 224 231);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-preselection-today-color {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-boundaries-border-radius {
+  inherits: true;
+  initial-value: 200px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-cell-selection-current-month-background {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-boundaries-background {
+  inherits: true;
+  initial-value: rgb(248 248 248);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-boundaries-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-weekend-background {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-weekend-boundaries-background {
+  inherits: true;
+  initial-value: rgb( 7 76 204 );
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-weekend-boundaries-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-current-month-weekend-color {
+  inherits: true;
+  initial-value: rgb(148 172 218);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-other-month-background {
+  inherits: true;
+  initial-value: rgb(204 212 226);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-other-month-boundaries-background {
+  inherits: true;
+  initial-value: rgb(236 237 240);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-other-month-boundaries-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-other-month-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-selection-week-boundaries-border-radius {
+  inherits: true;
+  initial-value: 200px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-cell-size {
+  inherits: true;
+  initial-value: 48px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-cell-weekend-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-calendar-cell-weekend-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+/* mds-calendar */
+@property --mds-calendar-background {
+  inherits: true;
+  initial-value: rgb(248 248 248);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-border-radius {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-day-number-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-calendar-max-width {
+  inherits: true;
+  initial-value: 480px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-padding {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-select-month-or-year-height {
+  inherits: true;
+  initial-value: 36px;
+  syntax: '<length>';
+}
+
+@property --mds-calendar-select-month-or-year-width {
+  inherits: true;
+  initial-value: 224px;
+  syntax: '<length>';
+}
+
+/* mds-card */
+@property --mds-card-gap {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-card-padding {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+/* mds-chip */
+@property --mds-chip-background {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-chip-border {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-chip-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-chip-icon-background {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-chip-icon-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-chip-opacity-disabled {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
+/* mds-details */
+@property --mds-details-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-details-helper-icon-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-details-icon-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+/* mds-dropdown */
+@property --mds-dropdown-arrow-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-dropdown-backdrop-duration {
+  inherits: true;
+  initial-value: 200ms;
+  syntax: '<time>';
+}
+
+@property --mds-dropdown-backdrop-z-index {
+  inherits: true;
+  initial-value: 4000;
+  syntax: '<integer>';
+}
+
+@property --mds-dropdown-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-dropdown-drop-shadow-color-rgb {
+  inherits: true;
+  initial-value: 5 5 5;
+  syntax: '<number>+';
+}
+
+@property --mds-dropdown-duration {
+  inherits: true;
+  initial-value: 0.5s;
+  syntax: '<time>';
+}
+
+@property --mds-dropdown-mouseover-delay {
+  inherits: true;
+  initial-value: 0.5s;
+  syntax: '<time>';
+}
+
+@property --mds-dropdown-transform-from {
+  inherits: true;
+  initial-value: scale(0.9) translateY(-3%);
+  syntax: '<transform-list>';
+}
+
+@property --mds-dropdown-transform-to {
+  inherits: true;
+  initial-value: scale(1) translate(0, 0);
+  syntax: '<transform-list>';
+}
+
+@property --mds-dropdown-z-index {
+  inherits: true;
+  initial-value: 5000;
+  syntax: '<integer>';
+}
+
+/* mds-emoji */
+@property --mds-emoji-expression-follow-mouse-head-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-emoji-expression-follow-mouse-traits-duration {
+  inherits: true;
+  initial-value: 200ms;
+  syntax: '<time>';
+}
+
+@property --mds-emoji-expression-max-rotation {
+  inherits: true;
+  initial-value: 16deg;
+  syntax: '<angle>';
+}
+
+@property --mds-emoji-offset-ears {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-offset-eyebrows {
+  inherits: true;
+  initial-value: 10px;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-offset-eyes {
+  inherits: true;
+  initial-value: 1px;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-offset-gadget {
+  inherits: true;
+  initial-value: 1px;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-offset-hands {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-offset-head {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-offset-mouth {
+  inherits: true;
+  initial-value: 1px;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-perspective {
+  inherits: true;
+  initial-value: 400px;
+  syntax: '<length>';
+}
+
+@property --mds-emoji-simi-eye {
+  inherits: true;
+  initial-value: #40281b;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-eye-light {
+  inherits: true;
+  initial-value: #ffffff;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-eyebrow {
+  inherits: true;
+  initial-value: #feefd8;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-gadget {
+  inherits: true;
+  initial-value: #2b1c15;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-mouth {
+  inherits: true;
+  initial-value: #2b1c15;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-mouth-teeth {
+  inherits: true;
+  initial-value: #ffffff;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-mouth-throat {
+  inherits: true;
+  initial-value: #c3481b;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-nose {
+  inherits: true;
+  initial-value: #2b1c15;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-nose-light {
+  inherits: true;
+  initial-value: #7e695f;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-outline {
+  inherits: true;
+  initial-value: #2b1c15;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-skin {
+  inherits: true;
+  initial-value: #f36320;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-skin-dark {
+  inherits: true;
+  initial-value: #c3481b;
+  syntax: '<color>';
+}
+
+@property --mds-emoji-simi-skin-light {
+  inherits: true;
+  initial-value: #feefd8;
+  syntax: '<color>';
+}
+
+/* mds-entity */
+@property --mds-entity-background {
+  inherits: true;
+  initial-value: rgb(248 248 248);
+  syntax: '<color>';
+}
+
+@property --mds-entity-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-entity-detail-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-entity-icon-background {
+  inherits: true;
+  initial-value: rgb(216 222 254);
+  syntax: '<color>';
+}
+
+@property --mds-entity-icon-color {
+  inherits: true;
+  initial-value: rgb(63 94 248);
+  syntax: '<color>';
+}
+
+@property --mds-entity-icon-radius {
+  inherits: true;
+  initial-value: 12px;
+  syntax: '<length>';
+}
+
+/* mds-file-preview */
+@property --mds-file-preview-background-color {
+  inherits: true;
+  initial-value: rgb(248 248 248);
+  syntax: '<color>';
+}
+
+@property --mds-file-preview-border-radius {
+  inherits: true;
+  initial-value: 40px;
+  syntax: '<length>';
+}
+
+@property --mds-file-preview-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-file-preview-icon-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+/* mds-filter-item */
+@property --mds-filter-item-count-background-default {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-filter-item-count-background-selected {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-filter-item-count-color-default {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-filter-item-count-color-selected {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+/* mds-filter */
+@property --mds-filter-items-background {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-filter-items-background-active {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-filter-items-gap {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-filter-items-padding {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-filter-items-radius {
+  inherits: true;
+  initial-value: 1000px;
+  syntax: '<length>';
+}
+
+@property --mds-filter-items-scroll-behavior {
+  inherits: true;
+  initial-value: smooth;
+  syntax: 'smooth | auto';
+}
+
+@property --mds-filter-label-padding {
+  inherits: true;
+  initial-value: 0 24px;
+  syntax: '<length>+';
+}
+
+@property --mds-filter-wrapper-shadow-color {
+  inherits: true;
+  initial-value: rgb(196 196 196);
+  syntax: '<color>';
+}
+
+@property --mds-filter-wrapper-shadow-opacity {
+  inherits: true;
+  initial-value: 0.1;
+  syntax: '<number>';
+}
+
+/* mds-header-bar */
+@property --mds-header-bar-hamburger-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+/* mds-header */
+@property --mds-header-backdrop-blur-strength {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-header-backdrop-height {
+  inherits: true;
+  initial-value: 64px;
+  syntax: '<length>';
+}
+
+@property --mds-header-backdrop-show {
+  inherits: true;
+  initial-value: true;
+  syntax: 'true | false';
+}
+
+@property --mds-header-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-header-icon-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-header-inline-margin {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-header-inline-margin-mobile {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+@property --mds-header-modal-icon-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+/* mds-help */
+@property --mds-help-tooltip-delay {
+  inherits: true;
+  initial-value: 0.25s;
+  syntax: '<time>';
+}
+
+@property --mds-help-tooltip-max-width {
+  inherits: true;
+  initial-value: 300px;
+  syntax: '<length>';
+}
+
+@property --mds-help-tooltip-min-width {
+  inherits: true;
+  initial-value: 200px;
+  syntax: '<length>';
+}
+
+/* mds-horizontal-scroll */
+@property --mds-horizontal-scroll-behavior {
+  inherits: true;
+  initial-value: smooth;
+  syntax: "auto | smooth";
+}
+
+@property --mds-horizontal-scroll-contents-padding {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-contents-scroll-padding {
+  inherits: true;
+  initial-value: 0 24px;
+  syntax: '<length>+';
+}
+
+@property --mds-horizontal-scroll-controls-margin {
+  inherits: true;
+  initial-value: 48px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-dot-area-background {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-horizontal-scroll-dot-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-horizontal-scroll-dot-size {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-dots-gap {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-gap {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-max-width {
+  inherits: true;
+  initial-value: 1280px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-scrollbar-margin {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-scrollbar-radius {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-scrollbar-size {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-horizontal-scroll-scrollbar-thumb-background {
+  inherits: true;
+  initial-value: rgb(42 42 42 / 0.3);
+  syntax: '<color>';
+}
+
+@property --mds-horizontal-scroll-scrollbar-track-background {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+/* mds-img */
+@property --mds-img-background {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-img-color {
+  inherits: true;
+  initial-value: rgb(220 224 231);
+  syntax: '<color>';
+}
+
+@property --mds-img-error-background {
+  inherits: true;
+  initial-value: rgb(255 214 211);
+  syntax: '<color>';
+}
+
+@property --mds-img-error-color {
+  inherits: true;
+  initial-value: rgb(89 0 0);
+  syntax: '<color>';
+}
+
+@property --mds-img-error-icon-color {
+  inherits: true;
+  initial-value: rgb(89 0 0);
+  syntax: '<color>';
+}
+
+@property --mds-img-icon-color {
+  inherits: true;
+  initial-value: rgb(148 172 218);
+  syntax: '<color>';
+}
+
+/* mds-input-date-range-preselection */
+@property --mds-date-range-preselection-default-background {
+  inherits: true;
+  initial-value: rgb(208 208 208 / 0);
+  syntax: '<color>';
+}
+
+@property --mds-date-range-preselection-default-border {
+  inherits: true;
+  initial-value: 196 196 196;
+  syntax: '<number>+';
+}
+
+@property --mds-date-range-preselection-default-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-date-range-preselection-hover-background {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-date-range-preselection-hover-border {
+  inherits: true;
+  initial-value: 237 237 237;
+  syntax: '<number>+';
+}
+
+@property --mds-date-range-preselection-hover-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-date-range-preselection-selected-background {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-date-range-preselection-selected-border {
+  inherits: true;
+  initial-value: 7 76 204;
+  syntax: '<number>+';
+}
+
+@property --mds-date-range-preselection-selected-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+/* mds-input-date-range */
+@property --mds-input-date-range-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-date-range-calendar-width {
+  inherits: true;
+  initial-value: 352px;
+  syntax: '<length>';
+}
+
+@property --mds-input-date-range-fields-firefox-justify-content {
+  inherits: true;
+  initial-value: start;
+  syntax: 'start | end | center | left | right | flex-start | flex-end';
+}
+
+@property --mds-input-date-range-fields-gap {
+  inherits: true;
+  initial-value: 0 8px;
+  syntax: '<length>+';
+}
+
+@property --mds-input-date-range-icon-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-date-range-variant-color-rgb {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+/* mds-input-date */
+@property --mds-input-date-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-date-field-background-empty {
+  inherits: true;
+  initial-value: rgb(255 232 230);
+  syntax: '<color>';
+}
+
+@property --mds-input-date-field-color-empty {
+  inherits: true;
+  initial-value: rgb(89 0 0);
+  syntax: '<color>';
+}
+
+@property --mds-input-date-icon-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-date-icon-color-rgb {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+@property --mds-input-date-variant-color-rgb {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+/* mds-input-field */
+@property --mds-input-field-message-background {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-input-field-message-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+/* mds-input-select */
+@property --mds-input-select-arrow-icon-background-color {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-input-select-arrow-icon-blur-background-color {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-input-select-arrow-icon-blur-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-select-arrow-icon-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-select-arrow-icon-hover-background-color {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-input-select-arrow-icon-hover-color {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-input-select-variant-color-rgb {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+/* mds-input-switch */
+@property --mds-input-switch-animation-timing-adjust {
+  inherits: true;
+  initial-value: 1.4;
+  syntax: '<number>';
+}
+
+@property --mds-input-switch-box-color-disabled-checked {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-box-color-disabled-unchecked {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-box-color-enabled-checked {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-box-color-enabled-unchecked {
+  inherits: true;
+  initial-value: rgb(140 140 140);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-box-padding {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-box-padding-lg {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-box-padding-md {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-box-padding-sm {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-input-switch-icon-color-checked {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-icon-color-checked-disabled {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-icon-color-indeterminate {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-icon-color-indeterminate-disabled {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-icon-color-unchecked {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-icon-color-unchecked-disabled {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-icon-explicit-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-toggle-color-disabled-checked {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-toggle-color-disabled-unchecked {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-toggle-color-enabled-checked {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-toggle-color-enabled-unchecked {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-input-switch-toggle-container-size {
+  inherits: true;
+  initial-value: calc( calc(24px * 2) + calc(4px * 2) );
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-toggle-size {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-toggle-size-lg {
+  inherits: true;
+  initial-value: 32px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-toggle-size-md {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-input-switch-toggle-size-sm {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+/* mds-input-tip-item */
+@property --mds-input-tip-item-background {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-input-tip-item-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-tip-item-icon-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+/* mds-input-tip */
+@property --mds-input-tip-active-translate {
+  inherits: true;
+  initial-value: translate(0, 0);
+  syntax: '<transform-function>';
+}
+
+@property --mds-input-tip-horizontal-offset {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+@property --mds-input-tip-horizontal-offset-focused {
+  inherits: true;
+  initial-value: 0px;
+  syntax: '<length>';
+}
+
+@property --mds-input-tip-vertical-offset {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+/* mds-input-upload */
+@property --mds-input-upload-drag-area-background-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-upload-drag-area-background-color-on-drag {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-input-upload-min-cols {
+  inherits: true;
+  initial-value: 3;
+  syntax: '<integer>';
+}
+
+/* mds-input */
+@property --mds-input-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-input-icon-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-input-placeholder-default-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-placeholder-focus-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-placeholder-hover-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-input-textarea-field-sizing {
+  inherits: true;
+  initial-value: content;
+  syntax: 'content | fixed';
+}
+
+@property --mds-input-textarea-max-height {
+  inherits: true;
+  initial-value: 256px;
+  syntax: '<length>';
+}
+
+@property --mds-input-textarea-min-height {
+  inherits: true;
+  initial-value: 96px;
+  syntax: '<length>';
+}
+
+@property --mds-input-textarea-resize {
+  inherits: true;
+  initial-value: none;
+  syntax: 'none | vertical';
+}
+
+@property --mds-input-variant-color-rgb {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<integer>+';
+}
+
+/* mds-keyboard-key */
+@property --mds-keyboard-key-illumination-dark-size {
+  inherits: true;
+  initial-value: 6px;
+  syntax: '<length>';
+}
+
+@property --mds-keyboard-key-illumination-light-size {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-keyboard-key-padding {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-keyboard-key-transition-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+/* mds-keyboard */
+@property --mds-keyboard-background {
+  inherits: true;
+  initial-value: rgb(201 208 219);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-background-default {
+  inherits: true;
+  initial-value: rgb(201 208 219);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-background-fail {
+  inherits: true;
+  initial-value: rgb(255 214 211);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-background-pass {
+  inherits: true;
+  initial-value: rgb(191 233 205);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-fill-fail {
+  inherits: true;
+  initial-value: rgb(89 0 0);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-fill-pass {
+  inherits: true;
+  initial-value: rgb(0 53 0);
+  syntax: '<color>';
+}
+
+@property --mds-keyboard-illumination-dark-opacity {
+  inherits: true;
+  initial-value: 0.05;
+  syntax: '<number>';
+}
+
+@property --mds-keyboard-illumination-dark-size {
+  inherits: true;
+  initial-value: 6px;
+  syntax: '<length>';
+}
+
+@property --mds-keyboard-illumination-light-opacity {
+  inherits: true;
+  initial-value: 0.075;
+  syntax: '<number>';
+}
+
+@property --mds-keyboard-illumination-light-size {
+  inherits: true;
+  initial-value: 1px;
+  syntax: '<length>';
+}
+
+@property --mds-keyboard-padding {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-keyboard-spinner-duration {
+  inherits: true;
+  initial-value: 1s;
+  syntax: '<time>';
+}
+
+/* mds-label */
+@property --mds-label-background {
+  inherits: true;
+  initial-value: rgb(200 210 253);
+  syntax: '<color>';
+}
+
+@property --mds-label-button-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-label-button-background-hover {
+  inherits: true;
+  initial-value: rgb(200 210 253);
+  syntax: '<color>';
+}
+
+@property --mds-label-button-icon-color {
+  inherits: true;
+  initial-value: rgb(63 94 248);
+  syntax: '<color>';
+}
+
+@property --mds-label-color {
+  inherits: true;
+  initial-value: rgb(7 39 192);
+  syntax: '<color>';
+}
+
+@property --mds-label-icon-color {
+  inherits: true;
+  initial-value: rgb(7 39 192);
+  syntax: '<color>';
+}
+
+@property --mds-label-selection-background {
+  inherits: true;
+  initial-value: rgb(149 166 251);
+  syntax: '<color>';
+}
+
+@property --mds-label-selection-color {
+  inherits: true;
+  initial-value: rgb(233 236 254);
+  syntax: '<color>';
+}
+
+/* mds-list-item */
+@property --mds-list-item-icon-margin {
+  inherits: true;
+  initial-value: 0 8px 0 0;
+  syntax: '<length>+';
+}
+
+/* mds-mention */
+@property --mds-mention-icon-size {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+/* mds-modal */
+@property --mds-modal-custom-closed-transform {
+  inherits: true;
+  initial-value: rotateX(10deg) rotateY(0) scale(1.25) translate(0, 10%);
+  syntax: '<transform-function>+';
+}
+
+@property --mds-modal-custom-window-distance {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-modal-overlay-color {
+  inherits: true;
+  initial-value: 0 0 0;
+  syntax: '<number>+';
+}
+
+@property --mds-modal-overlay-opacity {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
+@property --mds-modal-transition-duration {
+  inherits: true;
+  initial-value: 500ms;
+  syntax: '<time>';
+}
+
+@property --mds-modal-window-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-modal-window-distance {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-modal-window-max-width {
+  inherits: true;
+  initial-value: 33%;
+  syntax: '<length> | <percentage>';
+}
+
+@property --mds-modal-window-min-width {
+  inherits: true;
+  initial-value: 400px;
+  syntax: '<length>';
+}
+
+@property --mds-modal-window-overflow {
+  inherits: true;
+  initial-value: auto;
+  syntax: 'auto | clip | hidden | scroll | visible';
+}
+
+@property --mds-modal-window-radius {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-modal-z-index {
+  inherits: true;
+  initial-value: 3000;
+  syntax: '<integer>';
+}
+
+/* mds-note */
+@property --mds-note-background {
+  inherits: true;
+  initial-value: rgb(253 236 186);
+  syntax: '<color>';
+}
+
+@property --mds-note-color {
+  inherits: true;
+  initial-value: rgb(87 67 3);
+  syntax: '<color>';
+}
+
+@property --mds-note-fold-color {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-note-fold-size {
+  inherits: true;
+  initial-value: 40px;
+  syntax: '<length>';
+}
+
+@property --mds-note-selection-background {
+  inherits: true;
+  initial-value: rgb(185 231 251);
+  syntax: '<color>';
+}
+
+@property --mds-note-selection-color {
+  inherits: true;
+  initial-value: rgb(4 48 68);
+  syntax: '<color>';
+}
+
+/* mds-notification */
+@property --mds-notification-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-notification-dot-background {
+  inherits: true;
+  initial-value: rgb(196 64 65);
+  syntax: '<color>';
+}
+
+@property --mds-notification-dot-padding {
+  inherits: true;
+  initial-value: 6px;
+  syntax: '<length>';
+}
+
+@property --mds-notification-min-width {
+  inherits: true;
+  initial-value: 20px;
+  syntax: '<length>';
+}
+
+@property --mds-notification-ring-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-notification-ring-size {
+  inherits: true;
+  initial-value: 2px;
+  syntax: '<length>';
+}
+
+@property --mds-notification-size {
+  inherits: true;
+  initial-value: 20px;
+  syntax: '<length>';
+}
+
+@property --mds-notification-transition-duration {
+  inherits: true;
+  initial-value: 200ms;
+  syntax: '<time>';
+}
+
+@property --mds-notification-translate {
+  inherits: true;
+  initial-value: translate( calc(20px / -1.75), calc(20px / -2) );
+  syntax: '<transform-function>';
+}
+
+@property --mds-notification-translate-offset-x {
+  inherits: true;
+  initial-value: -1.75;
+  syntax: '<number>';
+}
+
+@property --mds-notification-translate-offset-y {
+  inherits: true;
+  initial-value: -2;
+  syntax: '<number>';
+}
+
+/* mds-paginator-item */
+@property --mds-paginator-item-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-background-disabled {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-background-hover {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-background-selected {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-color-disabled {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-color-hover {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-color-selected {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-item-radius {
+  inherits: true;
+  initial-value: 200px;
+  syntax: '<length>';
+}
+
+@property --mds-paginator-item-size {
+  inherits: true;
+  initial-value: 36px;
+  syntax: '<length>';
+}
+
+/* mds-paginator */
+@property --mds-paginator-background {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-paginator-scroll-behavior {
+  inherits: true;
+  initial-value: smooth;
+  syntax: 'smooth | auto';
+}
+
+/* mds-pref-mode */
+@property --mds-pref-mode-overlay-fadeout-duration {
+  inherits: true;
+  initial-value: 200ms;
+  syntax: '<time>';
+}
+
+@property --mds-pref-mode-overlay-show-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-pref-mode-overlay-z-index {
+  inherits: true;
+  initial-value: 7000;
+  syntax: '<integer>';
+}
+
+/* mds-pref-theme-item */
+@property --mds-pref-theme-item-color-background {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-pref-theme-item-color-status-error {
+  inherits: true;
+  initial-value: rgb(196 64 65);
+  syntax: '<color>';
+}
+
+@property --mds-pref-theme-item-color-status-success {
+  inherits: true;
+  initial-value: rgb(0 128 57);
+  syntax: '<color>';
+}
+
+@property --mds-pref-theme-item-color-status-warning {
+  inherits: true;
+  initial-value: rgb(142 106 0);
+  syntax: '<color>';
+}
+
+@property --mds-pref-theme-item-color-variant-primary {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+/* mds-price-table-features-cell */
+@property --mds-price-table-features-cell-border-color {
+  inherits: true;
+  initial-value: rgb(219 219 219);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-features-cell-icon-supported-color {
+  inherits: true;
+  initial-value: rgb(34 195 93);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-features-cell-icon-unsupported-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-features-cell-padding {
+  inherits: true;
+  initial-value: 12px;
+  syntax: '<length>';
+}
+
+/* mds-price-table-features-row */
+@property --mds-price-table-features-row-background {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-price-table-features-row-background-hover {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-features-row-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-features-row-color-hover {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+/* mds-price-table-features */
+@property --mds-price-table-features-border-color {
+  inherits: true;
+  initial-value: rgb(219 219 219);
+  syntax: '<color>';
+}
+
+/* mds-price-table-list-item */
+@property --mds-price-table-list-item-supported-icon-color {
+  inherits: true;
+  initial-value: rgb(34 195 93);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-list-item-supported-icon-color-hover {
+  inherits: true;
+  initial-value: rgb(26 148 71);
+  syntax: '<color>';
+}
+
+@property --mds-price-table-list-item-unsupported-icon-color {
+  inherits: true;
+  initial-value: rgb(119 119 119);
+  syntax: '<color>';
+}
+
+/* mds-price-table-list */
+@property --mds-price-table-list-separator-color {
+  inherits: true;
+  initial-value: rgb(73 73 73 / 0.5);
+  syntax: '<color>';
+}
+
+/* mds-progress */
+@property --mds-progress-background {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-progress-color {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+@property --mds-progress-duration {
+  inherits: true;
+  initial-value: 750ms;
+  syntax: '<time>';
+}
+
+@property --mds-progress-radius {
+  inherits: true;
+  initial-value: 28px;
+  syntax: '<length>';
+}
+
+@property --mds-progress-thickness {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+/* mds-push-notification-item */
+@property --mds-push-notification-item-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-push-notification-item-icon-background-color {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-push-notification-item-icon-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-push-notification-item-message-line-clamp {
+  inherits: true;
+  initial-value: 2;
+  syntax: '<integer>';
+}
+
+@property --mds-push-notification-item-subject-line-clamp {
+  inherits: true;
+  initial-value: 1;
+  syntax: '<integer>';
+}
+
+/* mds-push-notification */
+@property --mds-push-notification-fadeout-delay {
+  inherits: true;
+  initial-value: 0s;
+  syntax: '<time>';
+}
+
+@property --mds-push-notification-gap {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-push-notification-items-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-push-notification-items-intro-delay {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-push-notification-items-outro-delay {
+  inherits: true;
+  initial-value: 0ms;
+  syntax: '<time>';
+}
+
+/* mds-radial-menu-item */
+@property --mds-radial-menu-item-transition-duration {
+  inherits: true;
+  initial-value: 500ms;
+  syntax: '<time>';
+}
+
+/* mds-radial-menu */
+@property --mds-radial-menu-angle-end {
+  inherits: true;
+  initial-value: 360deg;
+  syntax: '<angle>';
+}
+
+@property --mds-radial-menu-angle-start {
+  inherits: true;
+  initial-value: 0deg;
+  syntax: '<angle>';
+}
+
+@property --mds-radial-menu-context-menu-z-index {
+  inherits: true;
+  initial-value: 8000;
+  syntax: '<integer>';
+}
+
+@property --mds-radial-menu-delay {
+  inherits: true;
+  initial-value: 0.01s;
+  syntax: '<time>';
+}
+
+@property --mds-radial-menu-direction {
+  inherits: true;
+  initial-value: -1;
+  syntax: '<integer>';
+}
+
+@property --mds-radial-menu-disc-background {
+  inherits: true;
+  initial-value: rgb(255 255 255 / 0.5);
+  syntax: '<color>';
+}
+
+@property --mds-radial-menu-disc-size {
+  inherits: true;
+  initial-value: calc(80px * 2);
+  syntax: '<length>';
+}
+
+@property --mds-radial-menu-radius {
+  inherits: true;
+  initial-value: 80px;
+  syntax: '<length>';
+}
+
+/* mds-radial-progress */
+@property --mds-radial-progress {
+  inherits: true;
+  initial-value: 0%;
+  syntax: '<length-percentage>';
+}
+
+/* mds-separator */
+@property --mds-separator-background {
+  inherits: true;
+  initial-value: rgb(196 196 196);
+  syntax: '<color>';
+}
+
+/* mds-spinner */
+@property --mds-spinner-duration {
+  inherits: true;
+  initial-value: 0.725s;
+  syntax: '<time>';
+}
+
+/* mds-status-bar */
+@property --mds-status-bar-backdrop {
+  inherits: true;
+  initial-value: rgb(5 5 5 / 0.1);
+  syntax: '<color>';
+}
+
+@property --mds-status-bar-max-width {
+  inherits: true;
+  initial-value: 500px;
+  syntax: '<length>';
+}
+
+/* mds-stepper-bar-item */
+@property --mds-stepper-bar-item-color {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-duration {
+  inherits: true;
+  initial-value: 250ms;
+  syntax: '<time>';
+}
+
+@property --mds-stepper-bar-item-icon-background {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-icon-background-current {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-icon-background-done {
+  inherits: true;
+  initial-value: rgb(0 128 57);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-icon-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-icon-color-current {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-icon-color-done {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-min-width {
+  inherits: true;
+  initial-value: 180px;
+  syntax: '<length>';
+}
+
+@property --mds-stepper-bar-item-progress-background {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-progress-color {
+  inherits: true;
+  initial-value: rgb(0 128 57);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-item-progress-thickness {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+/* mds-stepper-bar */
+@property --mds-stepper-bar-offset-margin {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-stepper-bar-scroll-behavior {
+  inherits: true;
+  initial-value: smooth;
+  syntax: 'smooth | auto';
+}
+
+@property --mds-stepper-bar-scrollbar-margin {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-stepper-bar-scrollbar-radius {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-stepper-bar-scrollbar-size {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-stepper-bar-scrollbar-thumb-background {
+  inherits: true;
+  initial-value: rgb(140 140 140);
+  syntax: '<color>';
+}
+
+@property --mds-stepper-bar-scrollbar-track-background {
+  inherits: true;
+  initial-value: rgb(208 208 208);
+  syntax: '<color>';
+}
+
+/* mds-tab-bar-item */
+@property --mds-tab-bar-item-background {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-tab-bar-item-background-selected {
+  inherits: true;
+  initial-value: transparent;
+  syntax: '<color>';
+}
+
+@property --mds-tab-bar-item-color {
+  inherits: true;
+  initial-value: rgb(99 99 99);
+  syntax: '<color>';
+}
+
+@property --mds-tab-bar-item-color-selected {
+  inherits: true;
+  initial-value: rgb(7 76 204);
+  syntax: '<color>';
+}
+
+/* mds-tab */
+@property --mds-tab-direction-vertical-columns {
+  inherits: true;
+  initial-value: auto auto;
+  syntax: '<length>+ | auto+';
+}
+
+@property --mds-tab-scroll-scrollbar-margin {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-tab-scroll-scrollbar-radius {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-tab-scroll-scrollbar-size {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-tab-scroll-scrollbar-thumb-background {
+  inherits: true;
+  initial-value: rgb(42 42 42 / 0.3);
+  syntax: '<color>';
+}
+
+@property --mds-tab-scroll-scrollbar-track-background {
+  inherits: true;
+  initial-value: rgb(225 225 225);
+  syntax: '<color>';
+}
+
+@property --mds-tab-slide-delay {
+  inherits: true;
+  initial-value: 0.125s;
+  syntax: '<time>';
+}
+
+@property --mds-tab-tabs-background {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-tab-tabs-gap {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-tab-tabs-overflow-shadow-size {
+  inherits: true;
+  initial-value: 24px;
+  syntax: '<length>';
+}
+
+@property --mds-tab-tabs-padding {
+  inherits: true;
+  initial-value: 8px;
+  syntax: '<length>';
+}
+
+@property --mds-tab-tabs-radius {
+  inherits: true;
+  initial-value: 40px;
+  syntax: '<length>';
+}
+
+@property --mds-tab-tabs-wrapper-margin {
+  inherits: true;
+  initial-value: 0;
+  syntax: '<length>';
+}
+
+@property --mds-tab-tabs-wrapper-outline-opacity {
+  inherits: true;
+  initial-value: 0.7;
+  syntax: '<number>';
+}
+
+@property --mds-tab-tabs-wrapper-shadow-color {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-tab-transition-duration {
+  inherits: true;
+  initial-value: 0.5s;
+  syntax: '<time>';
+}
+
+/* mds-table-body */
+@property --mds-table-body-background {
+  inherits: true;
+  initial-value: rgb(242 242 242);
+  syntax: '<color>';
+}
+
+@property --mds-table-body-background-alt {
+  inherits: true;
+  initial-value: rgb(248 248 248);
+  syntax: '<color>';
+}
+
+@property --mds-table-body-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-table-body-color-alt {
+  inherits: true;
+  initial-value: rgb(73 73 73);
+  syntax: '<color>';
+}
+
+/* mds-table-row */
+@property --mds-table-row-actions-gap {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+@property --mds-table-row-background-hover {
+  inherits: true;
+  initial-value: rgb(242 242 242);
+  syntax: '<color>';
+}
+
+@property --mds-table-row-color-hover {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+/* mds-table */
+@property --mds-table-border-color {
+  inherits: true;
+  initial-value: rgb(196 196 196);
+  syntax: '<color>';
+}
+
+/* mds-text */
+@property --mds-text-animation-placeholder-char {
+  inherits: true;
+  initial-value: ' ';
+  syntax: '<string>';
+}
+
+@property --mds-text-animation-speed {
+  inherits: true;
+  initial-value: 0.5;
+  syntax: '<number>';
+}
+
+@property --mds-text-line-clamp {
+  inherits: true;
+  initial-value: 3;
+  syntax: '<integer>';
+}
+
+@property --mds-text-selection-background {
+  inherits: true;
+  initial-value: rgb(185 231 251);
+  syntax: '<color>';
+}
+
+@property --mds-text-selection-color {
+  inherits: true;
+  initial-value: rgb(4 48 68);
+  syntax: '<color>';
+}
+
+/* mds-toast */
+@property --mds-toast-background {
+  inherits: true;
+  initial-value: rgb(42 42 42);
+  syntax: '<color>';
+}
+
+@property --mds-toast-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-toast-duration {
+  inherits: true;
+  initial-value: 300ms;
+  syntax: '<time>';
+}
+
+@property --mds-toast-icon-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-toast-width {
+  inherits: true;
+  initial-value: auto;
+  syntax: '<length> | auto';
+}
+
+/* mds-tooltip */
+@property --mds-tooltip-arrow-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-tooltip-background {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-tooltip-delay {
+  inherits: true;
+  initial-value: 1s;
+  syntax: '<time>';
+}
+
+@property --mds-tooltip-dot-padding {
+  inherits: true;
+  initial-value: 4px;
+  syntax: '<length>';
+}
+
+@property --mds-tooltip-duration {
+  inherits: true;
+  initial-value: 0.5s;
+  syntax: '<time>';
+}
+
+@property --mds-tooltip-transform-from {
+  inherits: true;
+  initial-value: scale(0.9) translateY(calc(16px * -1));
+  syntax: '<transform-list>';
+}
+
+@property --mds-tooltip-transform-to {
+  inherits: true;
+  initial-value: scale(1) translate(0, 0);
+  syntax: '<transform-list>';
+}
+
+@property --mds-tooltip-z-index {
+  inherits: true;
+  initial-value: 6000;
+  syntax: '<integer>';
+}
+
+/* mds-tree-item */
+@property --mds-tree-item-branch-border-radius {
+  inherits: true;
+  initial-value: 16px;
+  syntax: '<length>';
+}
+
+/* mds-tree */
+@property --mds-tree-branch-use-rounded-border {
+  inherits: true;
+  initial-value: true;
+  syntax: 'true | false';
+}
+
+@property --mds-tree-toggle-icon-chevron-expanded-background {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+@property --mds-tree-toggle-icon-chevron-expanded-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+@property --mds-tree-toggle-icon-folder-expanded-color {
+  inherits: true;
+  initial-value: rgb(36 103 231);
+  syntax: '<color>';
+}
+
+/* mds-url-view */
+@property --mds-url-view-background {
+  inherits: true;
+  initial-value: rgb(237 237 237);
+  syntax: '<color>';
+}
+
+@property --mds-url-view-color {
+  inherits: true;
+  initial-value: rgb(5 5 5);
+  syntax: '<color>';
+}
+
+@property --mds-url-view-radius {
+  inherits: true;
+  initial-value: 12px;
+  syntax: '<length>';
+}
+
+/* mds-usage */
+@property --mds-usage-border-color {
+  inherits: true;
+  initial-value: rgb(18 154 196);
+  syntax: '<color>';
+}
+
+@property --mds-usage-header-background {
+  inherits: true;
+  initial-value: rgb(18 154 196);
+  syntax: '<color>';
+}
+
+@property --mds-usage-header-color {
+  inherits: true;
+  initial-value: rgb(255 255 255);
+  syntax: '<color>';
+}
+
+/* mds-video-wall */
+@property --mds-video-wall-noise-background-color {
+  inherits: true;
+  initial-value: rgb(7 76 204 / 0.8);
+  syntax: '<color>';
+}
+
+@property --mds-video-wall-noise-background-size {
+  inherits: true;
+  initial-value: auto;
+  syntax: 'auto | <length>';
+}
+
+@property --mds-video-wall-video-fit {
+  inherits: true;
+  initial-value: cover;
+  syntax: 'contain | cover | fill | none | scale-down';
+}
+
+/* mds-zero */
+@property --mds-zero-contents-max-width {
+  inherits: true;
+  initial-value: 400px;
+  syntax: '<length> | none';
+}
+
+/*
+  GENERATED by projects/styles/scripts/corner.ts - do not edit.
+
+  The corner axis: one block per shape, each carrying the shape and the radius
+  scale tuned for it. The default sits on a bare :root, so nothing has to be
+  written to get it; the deviation blocks carry no :root prefix, so
+  data-corner-shape works on any element and inherits into its subtree.
+
+  --magma-radius-full is the same under every shape on purpose: the pill is out
+  of the axis (see corner.ts).
+*/
+:root {
+  --magma-corner-shape: squircle;
+
+  --magma-radius-none: var(--radius-none);
+  --magma-radius-3xs: var(--radius-squircle-3xs);
+  --magma-radius-2xs: var(--radius-squircle-2xs);
+  --magma-radius-xs: var(--radius-squircle-xs);
+  --magma-radius-sm: var(--radius-squircle-sm);
+  --magma-radius-md: var(--radius-squircle-md);
+  --magma-radius-lg: var(--radius-squircle-lg);
+  --magma-radius-xl: var(--radius-squircle-xl);
+  --magma-radius-2xl: var(--radius-squircle-2xl);
+  --magma-radius-3xl: var(--radius-squircle-3xl);
+  --magma-radius-4xl: var(--radius-squircle-4xl);
+  --magma-radius-5xl: var(--radius-squircle-5xl);
+  --magma-radius-full: var(--radius-full);
+}
+
+[data-corner-shape='round'] {
+  --magma-corner-shape: round;
+
+  --magma-radius-none: var(--radius-none);
+  --magma-radius-3xs: var(--radius-3xs);
+  --magma-radius-2xs: var(--radius-2xs);
+  --magma-radius-xs: var(--radius-xs);
+  --magma-radius-sm: var(--radius-sm);
+  --magma-radius-md: var(--radius-md);
+  --magma-radius-lg: var(--radius-lg);
+  --magma-radius-xl: var(--radius-xl);
+  --magma-radius-2xl: var(--radius-2xl);
+  --magma-radius-3xl: var(--radius-3xl);
+  --magma-radius-4xl: var(--radius-4xl);
+  --magma-radius-5xl: var(--radius-5xl);
+  --magma-radius-full: var(--radius-full);
+}
+
+[data-corner-shape='squircle'] {
+  --magma-corner-shape: squircle;
+
+  --magma-radius-none: var(--radius-none);
+  --magma-radius-3xs: var(--radius-squircle-3xs);
+  --magma-radius-2xs: var(--radius-squircle-2xs);
+  --magma-radius-xs: var(--radius-squircle-xs);
+  --magma-radius-sm: var(--radius-squircle-sm);
+  --magma-radius-md: var(--radius-squircle-md);
+  --magma-radius-lg: var(--radius-squircle-lg);
+  --magma-radius-xl: var(--radius-squircle-xl);
+  --magma-radius-2xl: var(--radius-squircle-2xl);
+  --magma-radius-3xl: var(--radius-squircle-3xl);
+  --magma-radius-4xl: var(--radius-squircle-4xl);
+  --magma-radius-5xl: var(--radius-squircle-5xl);
+  --magma-radius-full: var(--radius-full);
+}