@lumx/core 3.0.7 → 3.1.0

package/src/css/design-tokens.css

@@ -0,0 +1,544 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Oct 2022 13:20:02 GMT
+ */
+
+:root {
+    --lumx-button-height: 36px;
+    --lumx-button-border-radius: 4px;
+    --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: var(--lumx-color-light-N);
+    --lumx-button-emphasis-high-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-high-state-default-theme-dark-background-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-N);
+    --lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1);
+    --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: var(--lumx-color-light-N);
+    --lumx-button-emphasis-high-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2);
+    --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: var(--lumx-color-dark-L5);
+    --lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
+    --lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5);
+    --lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L4);
+    --lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4);
+    --lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L3);
+    --lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3);
+    --lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L1);
+    --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: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L5);
+    --lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
+    --lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
+    --lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L4);
+    --lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
+    --lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
+    --lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-L3);
+    --lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-L4);
+    --lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-L5);
+    --lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --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: 4px;
+    --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: var(--lumx-color-dark-L5);
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1);
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N);
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1);
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L5);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L4);
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5);
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1);
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N);
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(--lumx-color-dark-L4);
+    --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-L3);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent;
+    --lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-L4);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(
+        --lumx-color-light-L4
+    );
+    --lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N);
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(
+        --lumx-color-light-L5
+    );
+    --lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L1);
+    --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5);
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent;
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5);
+    --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: var(--lumx-color-dark-L5);
+    --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5);
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5);
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5);
+    --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: var(--lumx-color-dark-L4);
+    --lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1);
+    --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5);
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4);
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5);
+    --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: var(--lumx-color-dark-L1);
+    --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: var(--lumx-color-light-N);
+    --lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L5);
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1);
+    --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: var(--lumx-color-light-L5);
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-L4);
+    --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1);
+    --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: var(--lumx-color-light-L4);
+    --lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N);
+    --lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N);
+    --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: var(--lumx-color-dark-N);
+    --lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6);
+    --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4);
+    --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
+    --lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
+    --lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-default-theme-dark-input-background-color: var(--lumx-color-light-L6);
+    --lumx-text-field-state-default-theme-dark-input-border-color: var(--lumx-color-light-L4);
+    --lumx-text-field-state-default-theme-dark-input-content-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-default-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
+    --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-header-label-color: var(--lumx-color-dark-N);
+    --lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5);
+    --lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L4);
+    --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
+    --lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
+    --lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-hover-theme-dark-input-background-color: var(--lumx-color-light-L5);
+    --lumx-text-field-state-hover-theme-dark-input-border-color: var(--lumx-color-light-L4);
+    --lumx-text-field-state-hover-theme-dark-input-content-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-hover-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
+    --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: var(--lumx-color-dark-N);
+    --lumx-text-field-state-focus-theme-light-input-background-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N);
+    --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
+    --lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2);
+    --lumx-text-field-state-focus-theme-dark-header-label-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
+    --lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N);
+    --lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2);
+    --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.7); /* Base dark color with 70% opacity */
+    --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
+    --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
+    --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
+    --lumx-color-dark-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
+    --lumx-color-dark-L6: rgba(0, 0, 0, 0.05); /* Base dark color with 5% opacity */
+    --lumx-color-light-N: rgb(255, 255, 255); /* Neutral light color */
+    --lumx-color-light-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
+    --lumx-color-light-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
+    --lumx-color-light-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
+    --lumx-color-light-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
+    --lumx-color-light-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
+    --lumx-color-light-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
+    --lumx-color-blue-D2: rgb(21, 70, 193); /* Darkest blue color */
+    --lumx-color-blue-D1: rgb(24, 78, 216); /* Dark blue color */
+    --lumx-color-blue-N: rgb(36, 91, 231); /* Neutral blue color */
+    --lumx-color-blue-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
+    --lumx-color-blue-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
+    --lumx-color-blue-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
+    --lumx-color-blue-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
+    --lumx-color-blue-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
+    --lumx-color-blue-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
+    --lumx-color-green-D2: rgb(26, 110, 89); /* Darkest green color */
+    --lumx-color-green-D1: rgb(23, 122, 97); /* Dark green color */
+    --lumx-color-green-N: rgb(19, 134, 105); /* Neutral green color */
+    --lumx-color-green-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
+    --lumx-color-green-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
+    --lumx-color-green-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
+    --lumx-color-green-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
+    --lumx-color-green-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
+    --lumx-color-green-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
+    --lumx-color-yellow-D2: rgb(255, 161, 37); /* Darkest yellow color */
+    --lumx-color-yellow-D1: rgb(255, 179, 37); /* Dark yellow color */
+    --lumx-color-yellow-N: rgb(255, 196, 37); /* Neutral yellow color */
+    --lumx-color-yellow-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
+    --lumx-color-yellow-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
+    --lumx-color-yellow-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
+    --lumx-color-yellow-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
+    --lumx-color-yellow-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
+    --lumx-color-yellow-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
+    --lumx-color-red-D2: rgb(190, 30, 70); /* Darkest red color */
+    --lumx-color-red-D1: rgb(212, 33, 72); /* Dark red color */
+    --lumx-color-red-N: rgb(223, 48, 80); /* Neutral red color */
+    --lumx-color-red-L1: rgba(223, 48, 80, 0.8); /* Base red color with 80% opacity */
+    --lumx-color-red-L2: rgba(223, 48, 80, 0.6); /* Base red color with 60% opacity */
+    --lumx-color-red-L3: rgba(223, 48, 80, 0.4); /* Base red color with 40% opacity */
+    --lumx-color-red-L4: rgba(223, 48, 80, 0.2); /* Base red color with 20% opacity */
+    --lumx-color-red-L5: rgba(223, 48, 80, 0.1); /* Base red color with 10% opacity */
+    --lumx-color-red-L6: rgba(223, 48, 80, 0.05); /* Base red color with 5% opacity */
+    --lumx-color-grey-N: rgb(117, 117, 117); /* Neutral grey color */
+    --lumx-color-grey-L1: rgba(117, 117, 117, 0.8); /* Base grey color with 80% opacity */
+    --lumx-color-grey-L2: rgba(117, 117, 117, 0.6); /* Base grey color with 60% opacity */
+    --lumx-color-grey-L3: rgba(117, 117, 117, 0.4); /* Base grey color with 40% opacity */
+    --lumx-color-grey-L4: rgba(117, 117, 117, 0.2); /* Base grey color with 20% opacity */
+    --lumx-color-grey-L5: rgba(117, 117, 117, 0.1); /* Base grey color with 10% opacity */
+    --lumx-color-grey-L6: rgba(117, 117, 117, 0.05); /* Base grey color with 5% opacity */
+    --lumx-color-primary-D2: rgb(21, 70, 193); /* Darkest blue color */
+    --lumx-color-primary-D1: rgb(24, 78, 216); /* Dark blue color */
+    --lumx-color-primary-N: rgb(36, 91, 231); /* Neutral blue color */
+    --lumx-color-primary-L1: rgba(36, 91, 231, 0.8); /* Base blue color with 80% opacity */
+    --lumx-color-primary-L2: rgba(36, 91, 231, 0.6); /* Base blue color with 60% opacity */
+    --lumx-color-primary-L3: rgba(36, 91, 231, 0.4); /* Base blue color with 40% opacity */
+    --lumx-color-primary-L4: rgba(36, 91, 231, 0.2); /* Base blue color with 20% opacity */
+    --lumx-color-primary-L5: rgba(36, 91, 231, 0.1); /* Base blue color with 10% opacity */
+    --lumx-color-primary-L6: rgba(36, 91, 231, 0.05); /* Base blue color with 5% opacity */
+    --lumx-color-secondary-D2: rgb(26, 110, 89); /* Darkest green color */
+    --lumx-color-secondary-D1: rgb(23, 122, 97); /* Dark green color */
+    --lumx-color-secondary-N: rgb(19, 134, 105); /* Neutral green color */
+    --lumx-color-secondary-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
+    --lumx-color-secondary-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
+    --lumx-color-secondary-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
+    --lumx-color-secondary-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
+    --lumx-color-secondary-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
+    --lumx-color-secondary-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
+    --lumx-color-accent-D2: rgb(26, 110, 89); /* Darkest green color */
+    --lumx-color-accent-D1: rgb(23, 122, 97); /* Dark green color */
+    --lumx-color-accent-N: rgb(19, 134, 105); /* Neutral green color */
+    --lumx-color-accent-L1: rgba(19, 134, 105, 0.8); /* Base green color with 80% opacity */
+    --lumx-color-accent-L2: rgba(19, 134, 105, 0.6); /* Base green color with 60% opacity */
+    --lumx-color-accent-L3: rgba(19, 134, 105, 0.4); /* Base green color with 40% opacity */
+    --lumx-color-accent-L4: rgba(19, 134, 105, 0.2); /* Base green color with 20% opacity */
+    --lumx-color-accent-L5: rgba(19, 134, 105, 0.1); /* Base green color with 10% opacity */
+    --lumx-color-accent-L6: rgba(19, 134, 105, 0.05); /* Base green color with 5% opacity */
+    --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
+    --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
+    --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
+    --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
+    --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
+    --lumx-color-black-L5: rgba(0, 0, 0, 0.12); /* Base dark color with 12% opacity */
+    --lumx-color-black-L6: rgba(0, 0, 0, 0.05); /* Base dark color with 5% opacity */
+    --lumx-color-white-N: rgb(255, 255, 255); /* Neutral light color */
+    --lumx-color-white-L1: rgba(255, 255, 255, 0.9); /* Base light color with 90% opacity */
+    --lumx-color-white-L2: rgba(255, 255, 255, 0.8); /* Base light color with 80% opacity */
+    --lumx-color-white-L3: rgba(255, 255, 255, 0.6); /* Base light color with 60% opacity */
+    --lumx-color-white-L4: rgba(255, 255, 255, 0.4); /* Base light color with 40% opacity */
+    --lumx-color-white-L5: rgba(255, 255, 255, 0.2); /* Base light color with 20% opacity */
+    --lumx-color-white-L6: rgba(255, 255, 255, 0.1); /* Base light color with 10% opacity */
+    --lumx-color-orange-D2: rgb(255, 161, 37); /* Darkest yellow color */
+    --lumx-color-orange-D1: rgb(255, 179, 37); /* Dark yellow color */
+    --lumx-color-orange-N: rgb(255, 196, 37); /* Neutral yellow color */
+    --lumx-color-orange-L1: rgba(255, 196, 37, 0.9); /* Base yellow color with 80% opacity */
+    --lumx-color-orange-L2: rgba(255, 196, 37, 0.8); /* Base yellow color with 70% opacity */
+    --lumx-color-orange-L3: rgba(255, 196, 37, 0.6); /* Base yellow color with 60% opacity */
+    --lumx-color-orange-L4: rgba(255, 196, 37, 0.48); /* Base yellow color with 40% opacity */
+    --lumx-color-orange-L5: rgba(255, 196, 37, 0.24); /* Base yellow color with 20% opacity */
+    --lumx-color-orange-L6: rgba(255, 196, 37, 0.12); /* Base yellow color with 10% opacity */
+    --lumx-size-xxs: 14px;
+    --lumx-size-xs: 20px;
+    --lumx-size-s: 24px;
+    --lumx-size-m: 36px;
+    --lumx-size-l: 64px;
+    --lumx-size-xl: 128px;
+    --lumx-size-xxl: 256px;
+    --lumx-spacing-unit-tiny: 4px;
+    --lumx-spacing-unit-regular: 8px;
+    --lumx-spacing-unit-medium: 12px;
+    --lumx-spacing-unit-big: 16px;
+    --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-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-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-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-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-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-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-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-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-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-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-size: 16px;
+    --lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular);
+    --lumx-typography-custom-quote-font-style: italic;
+    --lumx-typography-custom-quote-line-height: 24px;
+    --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-size: 14px;
+    --lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-typography-custom-button-size-s-font-size: 12px;
+    --lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold);
+}

package/src/css/material.css

@@ -0,0 +1,62 @@
+:root {
+    --lumx-border-radius: 2px;
+    --lumx-typography-font-family: 'Roboto', sans-serif;
+    --lumx-typography-font-weight-bold: 500;
+    --lumx-typography-custom-button-size-s-font-size: 10px;
+    --lumx-button-border-radius: var(--lumx-border-radius);
+    --lumx-navigation-item-border-radius: var(--lumx-border-radius);
+    --lumx-text-field-input-min-height: 32px;
+    --lumx-text-field-input-padding-horizontal: 0;
+    --lumx-text-field-input-border-radius: 0;
+    --lumx-text-field-state-default-input-border-top-width: 0;
+    --lumx-text-field-state-default-input-border-right-width: 0;
+    --lumx-text-field-state-default-input-border-bottom-width: 1px;
+    --lumx-text-field-state-default-input-border-left-width: 0;
+    --lumx-text-field-state-default-theme-light-input-background-color: transparent;
+    --lumx-text-field-state-default-theme-light-input-border-color: rgba(0, 0, 0, 0.12);
+    --lumx-text-field-state-default-theme-dark-input-background-color: transparent;
+    --lumx-text-field-state-default-theme-dark-input-border-color: rgba(255, 255, 255, 0.2);
+    --lumx-text-field-state-hover-input-border-top-width: 0;
+    --lumx-text-field-state-hover-input-border-right-width: 0;
+    --lumx-text-field-state-hover-input-border-bottom-width: 1px;
+    --lumx-text-field-state-hover-input-border-left-width: 0;
+    --lumx-text-field-state-hover-theme-light-input-background-color: transparent;
+    --lumx-text-field-state-hover-theme-light-input-border-color: rgba(0, 0, 0, 0.12);
+    --lumx-text-field-state-hover-theme-dark-input-background-color: transparent;
+    --lumx-text-field-state-hover-theme-dark-input-border-color: rgba(255, 255, 255, 0.2);
+    --lumx-text-field-state-focus-input-border-top-width: 0;
+    --lumx-text-field-state-focus-input-border-right-width: 0;
+    --lumx-text-field-state-focus-input-border-bottom-width: 2px;
+    --lumx-text-field-state-focus-input-border-left-width: 0;
+    --lumx-text-field-state-focus-theme-light-input-background-color: transparent;
+    --lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N);
+    --lumx-text-field-state-focus-theme-dark-input-background-color: transparent;
+    --lumx-text-field-state-focus-theme-dark-input-border-color: #ffffff;
+    --lumx-material-button-text-transform: uppercase;
+    --lumx-material-button-variant-icon-border-radius: 50%;
+    --lumx-material-checkbox-wrapper-size: 24px;
+    --lumx-material-checkbox-control-size: 18px;
+    --lumx-material-chip-size-m-height: 32px;
+    --lumx-material-chip-size-m-border-radius: 16px;
+    --lumx-material-chip-size-m-padding-vertical: 12px;
+    --lumx-material-chip-size-s-height: 20px;
+    --lumx-material-chip-size-s-border-radius: 2px;
+    --lumx-material-chip-size-s-padding-vertical: 8px;
+    --lumx-material-input-label-font-size: 16px;
+    --lumx-material-input-label-line-height: 24px;
+    --lumx-material-input-helper-font-size: 14px;
+    --lumx-material-input-helper-line-height: 20px;
+    --lumx-material-progress-bounce: none;
+    --lumx-material-progress-rotate: block;
+    --lumx-material-radio-button-wrapper-size: 24px;
+    --lumx-material-radio-button-control-size: 20px;
+    --lumx-material-radio-button-indicator-size: 10px;
+    --lumx-material-switch-wrapper-height: 24px;
+    --lumx-material-text-field-padding-top: 20px;
+    --lumx-material-text-field-padding-bottom: 8px;
+    --lumx-material-text-field-header-wrapper-margin-bottom: 0;
+    --lumx-material-text-field-header-label-font-size: 12px;
+    --lumx-material-text-field-header-label-line-height: 14px;
+    --lumx-material-text-field-input-content-font-size: 16px;
+    --lumx-material-text-field-input-content-line-height: 24px;
+}