@lumx/core 2.0.1 → 2.1.0-alpha-css-test2

package/css/design-tokens.css

@@ -1,106 +1,730 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 May 2021 08:43:34 GMT
+ * Generated on Thu, 23 Sep 2021 06:47:16 GMT
  */
 
 :root {
-    --lumx-button-font-weight: 700;
-    --lumx-button-text-transform: none;
-    --lumx-button-variant-icon-border-radius: 4px;
-    --lumx-button-size-m-font-size: 14px;
-    --lumx-button-size-s-font-size: 12px;
-    --lumx-checkbox-wrapper-size: 20px;
-    --lumx-checkbox-control-size: 16px;
-    --lumx-chip-size-m-height: 36px;
-    --lumx-chip-size-m-border-radius: 18px;
-    --lumx-chip-size-m-padding-vertical: 16px;
-    --lumx-chip-size-s-height: 24px;
-    --lumx-chip-size-s-border-radius: 12px;
-    --lumx-chip-size-s-padding-vertical: 12px;
-    --lumx-input-helper-font-size: 12px;
-    --lumx-input-helper-font-weight: 400;
-    --lumx-input-helper-line-height: 16px;
-    --lumx-input-label-font-size: 14px;
-    --lumx-input-label-font-weight: 400;
-    --lumx-input-label-line-height: 20px;
-    --lumx-radio-button-wrapper-size: 20px;
-    --lumx-radio-button-control-size: 16px;
-    --lumx-radio-button-indicator-size: 8px;
-    --lumx-switch-wrapper-width: 30px;
-    --lumx-switch-wrapper-height: 20px;
-    --lumx-switch-control-width: 30px;
-    --lumx-switch-control-height: 16px;
-    --lumx-switch-indicator-size: 8px;
-    --lumx-switch-indicator-offset: 4px;
-    --lumx-text-field-padding-top: 0;
-    --lumx-text-field-padding-bottom: 0;
-    --lumx-text-field-header-margin-bottom: 8px;
-    --lumx-text-field-label-font-size: 14px;
-    --lumx-text-field-label-font-weight: 400;
-    --lumx-text-field-label-line-height: 20px;
-    --lumx-text-field-wrapper-min-height: 36px;
-    --lumx-text-field-wrapper-border-radius: 4px;
-    --lumx-text-field-wrapper-padding-vertical: 8px;
-    --lumx-text-field-wrapper-padding-horizontal: 12px;
-    --lumx-text-field-state-default-border-top-width: 1px;
-    --lumx-text-field-state-default-border-right-width: 1px;
-    --lumx-text-field-state-default-border-bottom-width: 1px;
-    --lumx-text-field-state-default-border-left-width: 1px;
-    --lumx-text-field-state-default-theme-light-background-color: rgba(
+    --lumx-button-height: 36px;
+    --lumx-button-border-radius: var(--lumx-border-radius);
+    --lumx-button-emphasis-high-state-default-padding-horizontal: 16px;
+    --lumx-button-emphasis-high-state-default-border-width: 0;
+    --lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N);
+    --lumx-button-emphasis-high-state-default-theme-light-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-high-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-high-state-default-theme-dark-background-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N);
+    --lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-high-state-hover-padding-horizontal: 16px;
+    --lumx-button-emphasis-high-state-hover-border-width: 0;
+    --lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1);
+    --lumx-button-emphasis-high-state-hover-theme-light-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-high-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.9
+    ); /* Base light color with 90% opacity */
+    --lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N);
+    --lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-high-state-active-padding-horizontal: 16px;
+    --lumx-button-emphasis-high-state-active-border-width: 0;
+    --lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2);
+    --lumx-button-emphasis-high-state-active-theme-light-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-high-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-high-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.8
+    ); /* Base light color with 80% opacity */
+    --lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N);
+    --lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-medium-state-default-padding-horizontal: 16px;
+    --lumx-button-emphasis-medium-state-default-border-width: 0;
+    --lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-button-emphasis-medium-state-default-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px;
+    --lumx-button-emphasis-medium-state-hover-border-width: 0;
+    --lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-button-emphasis-medium-state-hover-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-medium-state-active-padding-horizontal: 16px;
+    --lumx-button-emphasis-medium-state-active-border-width: 0;
+    --lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.38
+    ); /* Base dark color with 38% opacity */
+    --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.6
+    ); /* Base light color with 60% opacity */
+    --lumx-button-emphasis-medium-state-active-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
+    --lumx-button-emphasis-low-state-default-border-width: 0;
+    --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
+    --lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
+    --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-low-state-hover-padding-horizontal: 8px;
+    --lumx-button-emphasis-low-state-hover-border-width: 0;
+    --lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-button-emphasis-low-state-hover-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-low-state-active-padding-horizontal: 8px;
+    --lumx-button-emphasis-low-state-active-border-width: 0;
+    --lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-button-emphasis-low-state-active-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-selected-state-default-padding-horizontal: 16px;
+    --lumx-button-emphasis-selected-state-default-border-width: 0;
+    --lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
+    --lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2);
+    --lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-selected-state-default-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.6
+    ); /* Base light color with 60% opacity */
+    --lumx-button-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px;
+    --lumx-button-emphasis-selected-state-hover-border-width: 0;
+    --lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
+    --lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2);
+    --lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-button-emphasis-selected-state-hover-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent;
+    --lumx-button-emphasis-selected-state-active-padding-horizontal: 16px;
+    --lumx-button-emphasis-selected-state-active-border-width: 0;
+    --lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
+    --lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2);
+    --lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-selected-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-button-emphasis-selected-state-active-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent;
+    --lumx-material-button-text-transform: none;
+    --lumx-material-checkbox-wrapper-size: 20px;
+    --lumx-material-checkbox-control-size: 16px;
+    --lumx-material-chip-size-m-height: 36px;
+    --lumx-material-chip-size-m-border-radius: 18px;
+    --lumx-material-chip-size-m-padding-vertical: 16px;
+    --lumx-material-chip-size-s-height: 24px;
+    --lumx-material-chip-size-s-border-radius: 12px;
+    --lumx-material-chip-size-s-padding-vertical: 12px;
+    --lumx-material-input-helper-font-size: 12px;
+    --lumx-material-input-helper-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-material-input-helper-line-height: 16px;
+    --lumx-material-input-label-font-size: 14px;
+    --lumx-material-input-label-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-material-input-label-line-height: 20px;
+    --lumx-material-progress-bounce: block;
+    --lumx-material-progress-rotate: none;
+    --lumx-material-radio-button-wrapper-size: 20px;
+    --lumx-material-radio-button-control-size: 16px;
+    --lumx-material-radio-button-indicator-size: 8px;
+    --lumx-material-switch-wrapper-width: 30px;
+    --lumx-material-switch-wrapper-height: 20px;
+    --lumx-material-switch-control-width: 30px;
+    --lumx-material-switch-control-height: 16px;
+    --lumx-material-switch-indicator-size: 8px;
+    --lumx-material-switch-indicator-offset: 4px;
+    --lumx-material-text-field-padding-top: 0;
+    --lumx-material-text-field-padding-bottom: 0;
+    --lumx-material-text-field-header-wrapper-margin-bottom: 8px;
+    --lumx-material-text-field-header-label-font-size: 14px;
+    --lumx-material-text-field-header-label-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-material-text-field-header-label-line-height: 20px;
+    --lumx-material-text-field-input-content-font-size: 14px;
+    --lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-material-text-field-input-content-line-height: 20px;
+    --lumx-navigation-item-padding-horizontal: 8px;
+    --lumx-navigation-item-min-height: 36px;
+    --lumx-navigation-item-border-radius: var(--lumx-border-radius);
+    --lumx-navigation-item-emphasis-low-state-default-border-top-width: 0;
+    --lumx-navigation-item-emphasis-low-state-default-border-right-width: 0;
+    --lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0;
+    --lumx-navigation-item-emphasis-low-state-default-border-left-width: 0;
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0;
+    --lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0;
+    --lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0;
+    --lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0;
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-active-border-top-width: 0;
+    --lumx-navigation-item-emphasis-low-state-active-border-right-width: 0;
+    --lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0;
+    --lumx-navigation-item-emphasis-low-state-active-border-left-width: 0;
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
+        0,
+        0,
+        0,
+        0.87
+    ); /* Neutral dark color */
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.6
+    ); /* Base light color with 60% opacity */
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(
+        --lumx-color-primary-L4
+    );
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0;
+    --lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(
+        --lumx-color-primary-L3
+    );
+    --lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: #fff; /* Neutral light color */
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-height: 48px;
+    --lumx-tabs-link-border-radius: 0;
+    --lumx-tabs-link-emphasis-low-state-default-border-top-width: 0;
+    --lumx-tabs-link-emphasis-low-state-default-border-right-width: 0;
+    --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
+    --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
+    --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
+    --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent;
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0;
+    --lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0;
+    --lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px;
+    --lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0;
+    --lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-tabs-link-emphasis-low-state-active-border-top-width: 0;
+    --lumx-tabs-link-emphasis-low-state-active-border-right-width: 0;
+    --lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px;
+    --lumx-tabs-link-emphasis-low-state-active-border-left-width: 0;
+    --lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
+    --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
+    --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
+    --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px;
+    --lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.12
+    ); /* Base dark color with 12% opacity */
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.2
+    ); /* Base light color with 20% opacity */
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px;
+    --lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0;
+    --lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
+    --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: #fff; /* Neutral light color */
+    --lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: #fff; /* Neutral light color */
+    --lumx-text-field-input-min-height: 36px;
+    --lumx-text-field-input-padding-horizontal: 12px;
+    --lumx-text-field-input-border-radius: 4px;
+    --lumx-text-field-state-default-input-border-top-width: 1px;
+    --lumx-text-field-state-default-input-border-right-width: 1px;
+    --lumx-text-field-state-default-input-border-bottom-width: 1px;
+    --lumx-text-field-state-default-input-border-left-width: 1px;
+    --lumx-text-field-state-default-theme-light-header-label-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-text-field-state-default-theme-light-input-background-color: rgba(
         0,
         0,
         0,
         0.05
     ); /* Base dark color with 5% opacity */
-    --lumx-text-field-state-default-theme-light-border-color: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
-    --lumx-text-field-state-default-theme-dark-background-color: rgba(
+    --lumx-text-field-state-default-theme-light-input-border-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-text-field-state-default-theme-light-input-content-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-text-field-state-default-theme-light-input-placeholder-color: rgba(
+        0,
+        0,
+        0,
+        0.54
+    ); /* Base dark color with 54% opacity */
+    --lumx-text-field-state-default-theme-dark-header-label-color: #fff; /* Neutral light color */
+    --lumx-text-field-state-default-theme-dark-input-background-color: rgba(
         255,
         255,
         255,
         0.1
     ); /* Base light color with 10% opacity */
-    --lumx-text-field-state-default-theme-dark-border-color: rgba(
+    --lumx-text-field-state-default-theme-dark-input-border-color: rgba(
         255,
         255,
         255,
         0.4
     ); /* Base light color with 40% opacity */
-    --lumx-text-field-state-hover-theme-light-background-color: rgba(
+    --lumx-text-field-state-default-theme-dark-input-content-color: #fff; /* Neutral light color */
+    --lumx-text-field-state-default-theme-dark-input-placeholder-color: rgba(
+        255,
+        255,
+        255,
+        0.8
+    ); /* Base light color with 80% opacity */
+    --lumx-text-field-state-hover-input-border-top-width: 1px;
+    --lumx-text-field-state-hover-input-border-right-width: 1px;
+    --lumx-text-field-state-hover-input-border-bottom-width: 1px;
+    --lumx-text-field-state-hover-input-border-left-width: 1px;
+    --lumx-text-field-state-hover-theme-light-input-background-color: rgba(
         0,
         0,
         0,
         0.12
     ); /* Base dark color with 12% opacity */
-    --lumx-text-field-state-hover-theme-dark-background-color: rgba(
+    --lumx-text-field-state-hover-theme-light-input-border-color: rgba(
+        0,
+        0,
+        0,
+        0.2
+    ); /* Base dark color with 20% opacity */
+    --lumx-text-field-state-hover-theme-light-input-content-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-text-field-state-hover-theme-light-input-placeholder-color: rgba(
+        0,
+        0,
+        0,
+        0.54
+    ); /* Base dark color with 54% opacity */
+    --lumx-text-field-state-hover-theme-dark-input-background-color: rgba(
         255,
         255,
         255,
         0.2
     ); /* Base light color with 20% opacity */
-    --lumx-text-field-state-focus-border-top-width: 2px;
-    --lumx-text-field-state-focus-border-right-width: 2px;
-    --lumx-text-field-state-focus-border-bottom-width: 2px;
-    --lumx-text-field-state-focus-border-left-width: 2px;
-    --lumx-text-field-state-focus-theme-light-background-color: #fff; /* Neutral light color */
-    --lumx-text-field-state-focus-theme-light-border-color: rgba(
+    --lumx-text-field-state-hover-theme-dark-input-border-color: rgba(
+        255,
+        255,
+        255,
+        0.4
+    ); /* Base light color with 40% opacity */
+    --lumx-text-field-state-hover-theme-dark-input-content-color: #fff; /* Neutral light color */
+    --lumx-text-field-state-hover-theme-dark-input-placeholder-color: rgba(
+        255,
+        255,
+        255,
+        0.8
+    ); /* Base light color with 80% opacity */
+    --lumx-text-field-state-focus-input-border-top-width: 2px;
+    --lumx-text-field-state-focus-input-border-right-width: 2px;
+    --lumx-text-field-state-focus-input-border-bottom-width: 2px;
+    --lumx-text-field-state-focus-input-border-left-width: 2px;
+    --lumx-text-field-state-focus-theme-light-header-label-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-text-field-state-focus-theme-light-input-background-color: #fff; /* Neutral light color */
+    --lumx-text-field-state-focus-theme-light-input-border-color: rgba(
         33,
         150,
         243,
         0.6
     ); /* Base blue color with 60% opacity */
-    --lumx-text-field-state-focus-theme-dark-background-color: transparent;
-    --lumx-text-field-state-focus-theme-dark-border-color: rgba(
+    --lumx-text-field-state-focus-theme-light-input-content-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-text-field-state-focus-theme-light-input-placeholder-color: rgba(
+        0,
+        0,
+        0,
+        0.54
+    ); /* Base dark color with 54% opacity */
+    --lumx-text-field-state-focus-theme-dark-header-label-color: #fff; /* Neutral light color */
+    --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
+    --lumx-text-field-state-focus-theme-dark-input-border-color: rgba(
+        255,
+        255,
+        255,
+        0.8
+    ); /* Base light color with 80% opacity */
+    --lumx-text-field-state-focus-theme-dark-input-content-color: #fff; /* Neutral light color */
+    --lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
         255,
         255,
         255,
         0.8
     ); /* Base light color with 80% opacity */
-    --lumx-text-field-input-icon-size: 20px;
-    --lumx-text-field-input-font-size: 14px;
-    --lumx-text-field-input-font-weight: 400;
-    --lumx-text-field-input-line-height: 20px;
-    --lumx-text-field-input-validity-size: 14px;
-    --lumx-text-field-input-clear-size: 24px;
     --lumx-border-radius: 4px;
     --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-color-dark-L1: rgba(0, 0, 0, 0.8); /* Base dark color with 80% opacity */
@@ -209,8 +833,6 @@
     --lumx-color-orange-L4: rgba(255, 179, 0, 0.4); /* Base yellow color with 40% opacity */
     --lumx-color-orange-L5: rgba(255, 179, 0, 0.2); /* Base yellow color with 20% opacity */
     --lumx-color-orange-L6: rgba(255, 179, 0, 0.1); /* Base yellow color with 10% opacity */
-    --lumx-progress-bounce: block;
-    --lumx-progress-rotate: none;
     --lumx-size-xxs: 14px;
     --lumx-size-xs: 20px;
     --lumx-size-s: 24px;
@@ -225,31 +847,85 @@
     --lumx-spacing-unit-huge: 24px;
     --lumx-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
         'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    --lumx-typography-style-display1-font-size: 34px;
-    --lumx-typography-style-display1-font-weight: 700;
-    --lumx-typography-style-display1-line-height: 40px;
-    --lumx-typography-style-headline-font-size: 24px;
-    --lumx-typography-style-headline-font-weight: 700;
-    --lumx-typography-style-headline-line-height: 32px;
-    --lumx-typography-style-title-font-size: 20px;
-    --lumx-typography-style-title-font-weight: 700;
-    --lumx-typography-style-title-line-height: 30px;
-    --lumx-typography-style-subtitle2-font-size: 16px;
-    --lumx-typography-style-subtitle2-font-weight: 700;
-    --lumx-typography-style-subtitle2-line-height: 24px;
-    --lumx-typography-style-subtitle1-font-size: 14px;
-    --lumx-typography-style-subtitle1-font-weight: 700;
-    --lumx-typography-style-subtitle1-line-height: 20px;
-    --lumx-typography-style-body2-font-size: 16px;
-    --lumx-typography-style-body2-font-weight: 400;
-    --lumx-typography-style-body2-line-height: 24px;
-    --lumx-typography-style-body1-font-size: 14px;
-    --lumx-typography-style-body1-font-weight: 400;
-    --lumx-typography-style-body1-line-height: 20px;
-    --lumx-typography-style-caption-font-size: 12px;
-    --lumx-typography-style-caption-font-weight: 400;
-    --lumx-typography-style-caption-line-height: 16px;
-    --lumx-typography-style-overline-font-size: 10px;
-    --lumx-typography-style-overline-font-weight: 700;
-    --lumx-typography-style-overline-line-height: 12px;
+    --lumx-typography-font-weight-regular: 400;
+    --lumx-typography-font-weight-bold: 700;
+    --lumx-typography-font-weight-light: 300;
+    --lumx-typography-interface-display1-font-size: 34px;
+    --lumx-typography-interface-display1-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-interface-display1-line-height: 40px;
+    --lumx-typography-interface-headline-font-size: 24px;
+    --lumx-typography-interface-headline-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-interface-headline-line-height: 32px;
+    --lumx-typography-interface-title-font-size: 20px;
+    --lumx-typography-interface-title-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-interface-title-line-height: 30px;
+    --lumx-typography-interface-subtitle2-font-size: 16px;
+    --lumx-typography-interface-subtitle2-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-interface-subtitle2-line-height: 24px;
+    --lumx-typography-interface-subtitle1-font-size: 14px;
+    --lumx-typography-interface-subtitle1-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-interface-subtitle1-line-height: 20px;
+    --lumx-typography-interface-body2-font-size: 16px;
+    --lumx-typography-interface-body2-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-interface-body2-line-height: 24px;
+    --lumx-typography-interface-body1-font-size: 14px;
+    --lumx-typography-interface-body1-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-interface-body1-line-height: 20px;
+    --lumx-typography-interface-caption-font-size: 12px;
+    --lumx-typography-interface-caption-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-interface-caption-line-height: 16px;
+    --lumx-typography-interface-overline-font-size: 10px;
+    --lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-interface-overline-line-height: 12px;
+    --lumx-typography-custom-title1-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-title1-font-size: 40px;
+    --lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-title1-line-height: 50px;
+    --lumx-typography-custom-title2-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-title2-font-size: 30px;
+    --lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-title2-line-height: 40px;
+    --lumx-typography-custom-title3-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-title3-font-size: 24px;
+    --lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-title3-line-height: 32px;
+    --lumx-typography-custom-title4-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-title4-font-size: 20px;
+    --lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-title4-line-height: 30px;
+    --lumx-typography-custom-title5-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-title5-font-size: 16px;
+    --lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-title5-line-height: 24px;
+    --lumx-typography-custom-title6-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-title6-font-size: 14px;
+    --lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-title6-line-height: 20px;
+    --lumx-typography-custom-intro-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-intro-font-size: 18px;
+    --lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-intro-line-height: 30px;
+    --lumx-typography-custom-body-large-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-body-large-font-size: 16px;
+    --lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-custom-body-large-line-height: 24px;
+    --lumx-typography-custom-body-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-body-font-size: 14px;
+    --lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-custom-body-line-height: 20px;
+    --lumx-typography-custom-quote-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-quote-font-size: 16px;
+    --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-light);
+    --lumx-typography-custom-quote-font-style: italic;
+    --lumx-typography-custom-quote-line-height: 24px;
+    --lumx-typography-custom-publish-info-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-publish-info-font-size: 14px;
+    --lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-custom-publish-info-line-height: 20px;
+    --lumx-typography-custom-button-size-m-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-button-size-m-font-size: 14px;
+    --lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-button-size-s-font-family: var(--lumx-typography-font-family);
+    --lumx-typography-custom-button-size-s-font-size: 12px;
+    --lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold);
 }