diff --git a/CHANGELOG.md b/CHANGELOG.md
index db8ed9f43..5bd517eb5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `@lumx/icons`: override & alias system in place. now custom icon fonts are now generated from MDI fonts we extend.
 -   `@lumx/icons`: override Twitter logo to use the new X logo.
+-   `@lumx/core`: make component spacing styles default to CSS variables.
+-   `@lumx/core`: make component border styles default to CSS variables.
+-   `@lumx/core`: change text-field background to transparent.
+-   `@lumx/core`: minor change on tabs color.
+-   `@lumx/core`: minor change on navigation colors.
+-   `@lumx/core`: minor change on button colors.
 
 ## [3.5.5][] - 2023-11-13
 
diff --git a/packages/lumx-core/src/css/design-tokens.css b/packages/lumx-core/src/css/design-tokens.css
index fb791eac9..1ce83de87 100644
--- a/packages/lumx-core/src/css/design-tokens.css
+++ b/packages/lumx-core/src/css/design-tokens.css
@@ -2,13 +2,13 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 16:19:23 GMT
+ * Generated on Fri, 01 Dec 2023 09:07:37 GMT
  */
 
 :root {
     --lumx-button-height: 36px;
-    --lumx-button-border-radius: 4px;
-    --lumx-button-emphasis-high-state-default-padding-horizontal: 16px;
+    --lumx-button-border-radius: var(--lumx-border-radius);
+    --lumx-button-emphasis-high-state-default-padding-horizontal: var(--lumx-spacing-unit-big);
     --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);
@@ -16,7 +16,7 @@
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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);
@@ -24,7 +24,7 @@
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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);
@@ -32,55 +32,55 @@
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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-color: var(--lumx-color-light-L1);
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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-color: var(--lumx-color-light-L1);
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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-color: var(--lumx-color-light-L1);
     --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-padding-horizontal: var(--lumx-spacing-unit-regular);
     --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-color: var(--lumx-color-light-L1);
     --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-padding-horizontal: var(--lumx-spacing-unit-regular);
     --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-color: var(--lumx-color-light-L1);
     --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-padding-horizontal: var(--lumx-spacing-unit-regular);
     --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-color: var(--lumx-color-light-L1);
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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);
@@ -88,7 +88,7 @@
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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);
@@ -96,7 +96,7 @@
     --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-padding-horizontal: var(--lumx-spacing-unit-big);
     --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);
@@ -139,57 +139,57 @@
     --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-padding-horizontal: var(--lumx-spacing-unit-regular);
     --lumx-navigation-item-min-height: 36px;
-    --lumx-navigation-item-border-radius: 4px;
+    --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: var(--lumx-color-dark-L5);
+    --lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4);
     --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-border-color: var(--lumx-color-light-L4);
+    --lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-L1);
     --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-default-theme-dark-chevron-color: var(--lumx-color-light-L1);
     --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-border-color: var(--lumx-color-dark-L4);
     --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-border-color: var(--lumx-color-light-L4);
+    --lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-L1);
     --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-hover-theme-dark-chevron-color: var(--lumx-color-light-L1);
     --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-border-color: var(--lumx-color-dark-L4);
     --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-border-color: var(--lumx-color-light-L4);
+    --lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-L1);
     --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-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1);
     --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;
@@ -201,7 +201,7 @@
     --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-border-color: var(--lumx-color-light-N);
     --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;
@@ -217,7 +217,7 @@
     --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-border-color: var(--lumx-color-light-N);
     --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);
@@ -233,7 +233,7 @@
     --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-border-color: var(--lumx-color-light-N);
     --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);
@@ -246,30 +246,30 @@
     --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-light-border-color: var(--lumx-color-dark-L4);
     --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-default-theme-dark-color: var(--lumx-color-light-L1);
+    --lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L4);
     --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-light-border-color: var(--lumx-color-dark-L4);
     --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-hover-theme-dark-color: var(--lumx-color-light-L1);
+    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L4);
     --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-light-border-color: var(--lumx-color-dark-L4);
     --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-low-state-active-theme-dark-color: var(--lumx-color-light-L1);
+    --lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L4);
     --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;
@@ -278,7 +278,7 @@
     --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-color: var(--lumx-color-light-L1);
     --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;
@@ -288,7 +288,7 @@
     --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-color: var(--lumx-color-light-L1);
     --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;
@@ -298,11 +298,11 @@
     --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-color: var(--lumx-color-light-L1);
     --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-input-padding-horizontal: var(--lumx-spacing-unit-medium);
+    --lumx-text-field-input-border-radius: var(--lumx-border-radius);
     --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;
@@ -336,7 +336,7 @@
     --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-background-color: transparent;
     --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);
diff --git a/packages/lumx-core/src/js/constants/design-tokens.ts b/packages/lumx-core/src/js/constants/design-tokens.ts
index 3a2ff9100..f73c08de3 100644
--- a/packages/lumx-core/src/js/constants/design-tokens.ts
+++ b/packages/lumx-core/src/js/constants/design-tokens.ts
@@ -1,15 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 16:19:23 GMT
+ * Generated on Fri, 01 Dec 2023 09:07:37 GMT
  */
 
 export const DESIGN_TOKENS = {
     button: {
         height: { value: '36px', $aliasedFrom: 'size.m' },
-        'border-radius': { value: '4px', $aliasedFrom: 'border-radius' },
+        'border-radius': { value: 'var(--lumx-border-radius)', $aliasedFrom: 'border-radius' },
         'emphasis-high': {
             'state-default': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -39,7 +39,7 @@ export const DESIGN_TOKENS = {
                 },
             },
             'state-hover': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -69,7 +69,7 @@ export const DESIGN_TOKENS = {
                 },
             },
             'state-active': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -101,7 +101,7 @@ export const DESIGN_TOKENS = {
         },
         'emphasis-medium': {
             'state-default': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -123,15 +123,15 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L5',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
             },
             'state-hover': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -153,15 +153,15 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L4',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
             },
             'state-active': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -183,9 +183,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L3',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -193,7 +193,9 @@ export const DESIGN_TOKENS = {
         },
         'emphasis-low': {
             'state-default': {
-                padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+                padding: {
+                    horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
+                },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': { value: 'transparent' },
@@ -207,15 +209,17 @@ export const DESIGN_TOKENS = {
                 'theme-dark': {
                     'background-color': { value: 'transparent' },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
             },
             'state-hover': {
-                padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+                padding: {
+                    horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
+                },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -237,15 +241,17 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L5',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
             },
             'state-active': {
-                padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+                padding: {
+                    horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
+                },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -267,9 +273,9 @@ export const DESIGN_TOKENS = {
                         $aliasedFrom: 'color.light.L4',
                     },
                     color: {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
+                        value: 'var(--lumx-color-light-L1)',
+                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                        $aliasedFrom: 'color.light.L1',
                     },
                     'border-color': { value: 'transparent' },
                 },
@@ -277,7 +283,7 @@ export const DESIGN_TOKENS = {
         },
         'emphasis-selected': {
             'state-default': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -307,7 +313,7 @@ export const DESIGN_TOKENS = {
                 },
             },
             'state-hover': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -337,7 +343,7 @@ export const DESIGN_TOKENS = {
                 },
             },
             'state-active': {
-                padding: { horizontal: { value: '16px', $aliasedFrom: 'spacing.unit.big' } },
+                padding: { horizontal: { value: 'var(--lumx-spacing-unit-big)', $aliasedFrom: 'spacing.unit.big' } },
                 'border-width': { value: '0' },
                 'theme-light': {
                     'background-color': {
@@ -425,9 +431,11 @@ export const DESIGN_TOKENS = {
     },
     navigation: {
         item: {
-            padding: { horizontal: { value: '8px', $aliasedFrom: 'spacing.unit.regular' } },
+            padding: {
+                horizontal: { value: 'var(--lumx-spacing-unit-regular)', $aliasedFrom: 'spacing.unit.regular' },
+            },
             'min-height': { value: '36px', $aliasedFrom: 'size.m' },
-            'border-radius': { value: '4px', $aliasedFrom: 'border-radius' },
+            'border-radius': { value: 'var(--lumx-border-radius)', $aliasedFrom: 'border-radius' },
             'emphasis-low': {
                 'state-default': {
                     border: {
@@ -439,9 +447,9 @@ export const DESIGN_TOKENS = {
                     'theme-light': {
                         'background-color': { value: 'transparent' },
                         'border-color': {
-                            value: 'var(--lumx-color-dark-L5)',
-                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
-                            $aliasedFrom: 'color.dark.L5',
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
                         },
                         'icon-color': {
                             value: 'var(--lumx-color-dark-L1)',
@@ -463,14 +471,14 @@ export const DESIGN_TOKENS = {
                     'theme-dark': {
                         'background-color': { value: 'transparent' },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
                         },
                         'icon-color': {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'label-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -479,9 +487,9 @@ export const DESIGN_TOKENS = {
                         },
                         'chevron-background-color': { value: 'transparent' },
                         'chevron-color': {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                     },
                 },
@@ -499,9 +507,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.dark.L5',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-dark-L5)',
-                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
-                            $aliasedFrom: 'color.dark.L5',
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
                         },
                         'icon-color': {
                             value: 'var(--lumx-color-dark-L1)',
@@ -531,14 +539,14 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L5',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
                         },
                         'icon-color': {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'label-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -551,9 +559,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L5',
                         },
                         'chevron-color': {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                     },
                 },
@@ -571,9 +579,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.dark.L4',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-dark-L5)',
-                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
-                            $aliasedFrom: 'color.dark.L5',
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
                         },
                         'icon-color': {
                             value: 'var(--lumx-color-dark-L1)',
@@ -603,14 +611,14 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L4',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
                         },
                         'icon-color': {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'label-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -623,9 +631,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L4',
                         },
                         'chevron-color': {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                     },
                 },
@@ -673,9 +681,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L3',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
                         },
                         'icon-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -741,9 +749,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L4',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
                         },
                         'icon-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -813,9 +821,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L5',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-N)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
+                            $aliasedFrom: 'color.light.N',
                         },
                         'icon-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -862,22 +870,22 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.dark.L1',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-dark-L5)',
-                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
-                            $aliasedFrom: 'color.dark.L5',
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
                         },
                     },
                     'theme-dark': {
                         'background-color': { value: 'transparent' },
                         color: {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
                         },
                     },
                 },
@@ -900,9 +908,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.dark.L1',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-dark-L5)',
-                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
-                            $aliasedFrom: 'color.dark.L5',
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
                         },
                     },
                     'theme-dark': {
@@ -912,14 +920,14 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L5',
                         },
                         color: {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
                         },
                     },
                 },
@@ -942,9 +950,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.dark.L1',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-dark-L5)',
-                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.12 } },
-                            $aliasedFrom: 'color.dark.L5',
+                            value: 'var(--lumx-color-dark-L4)',
+                            attributes: { hex: '000000', rgb: { r: 0, g: 0, b: 0, a: 0.2 } },
+                            $aliasedFrom: 'color.dark.L4',
                         },
                     },
                     'theme-dark': {
@@ -954,14 +962,14 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L4',
                         },
                         color: {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'border-color': {
-                            value: 'var(--lumx-color-light-L5)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.2 } },
-                            $aliasedFrom: 'color.light.L5',
+                            value: 'var(--lumx-color-light-L4)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.4 } },
+                            $aliasedFrom: 'color.light.L4',
                         },
                     },
                 },
@@ -990,9 +998,9 @@ export const DESIGN_TOKENS = {
                     'theme-dark': {
                         'background-color': { value: 'transparent' },
                         color: {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'border-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -1032,9 +1040,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L5',
                         },
                         color: {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'border-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -1074,9 +1082,9 @@ export const DESIGN_TOKENS = {
                             $aliasedFrom: 'color.light.L4',
                         },
                         color: {
-                            value: 'var(--lumx-color-light-N)',
-                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                            $aliasedFrom: 'color.light.N',
+                            value: 'var(--lumx-color-light-L1)',
+                            attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 0.9 } },
+                            $aliasedFrom: 'color.light.L1',
                         },
                         'border-color': {
                             value: 'var(--lumx-color-light-N)',
@@ -1091,8 +1099,8 @@ export const DESIGN_TOKENS = {
     'text-field': {
         input: {
             'min-height': { value: '36px', $aliasedFrom: 'size.m' },
-            padding: { horizontal: { value: '12px', $aliasedFrom: 'spacing.unit.medium' } },
-            'border-radius': { value: '4px', $aliasedFrom: 'border-radius' },
+            padding: { horizontal: { value: 'var(--lumx-spacing-unit-medium)', $aliasedFrom: 'spacing.unit.medium' } },
+            'border-radius': { value: 'var(--lumx-border-radius)', $aliasedFrom: 'border-radius' },
         },
         'state-default': {
             input: {
@@ -1282,11 +1290,7 @@ export const DESIGN_TOKENS = {
                     },
                 },
                 input: {
-                    'background-color': {
-                        value: 'var(--lumx-color-light-N)',
-                        attributes: { hex: 'ffffff', rgb: { r: 255, g: 255, b: 255, a: 1 } },
-                        $aliasedFrom: 'color.light.N',
-                    },
+                    'background-color': { value: 'transparent' },
                     'border-color': {
                         value: 'var(--lumx-color-primary-N)',
                         attributes: { hex: '245be7', rgb: { r: 36, g: 91, b: 231, a: 1 } },
diff --git a/packages/lumx-core/src/scss/_design-tokens.scss b/packages/lumx-core/src/scss/_design-tokens.scss
index b4e661b25..93f4ad3db 100644
--- a/packages/lumx-core/src/scss/_design-tokens.scss
+++ b/packages/lumx-core/src/scss/_design-tokens.scss
@@ -2,12 +2,12 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 10 Nov 2023 16:19:23 GMT
+ * Generated on Fri, 01 Dec 2023 09:07:37 GMT
  */
 
 $lumx-button-height: 36px !default;
-$lumx-button-border-radius: 4px !default;
-$lumx-button-emphasis-high-state-default-padding-horizontal: 16px !default;
+$lumx-button-border-radius: var(--lumx-border-radius) !default;
+$lumx-button-emphasis-high-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-high-state-default-border-width: 0 !default;
 $lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-high-state-default-theme-light-color: var(--lumx-color-light-N) !default;
@@ -15,7 +15,7 @@ $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) !default;
 $lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-high-state-hover-padding-horizontal: 16px !default;
+$lumx-button-emphasis-high-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-high-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1) !default;
 $lumx-button-emphasis-high-state-hover-theme-light-color: var(--lumx-color-light-N) !default;
@@ -23,7 +23,7 @@ $lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent !de
 $lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-high-state-active-padding-horizontal: 16px !default;
+$lumx-button-emphasis-high-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-high-state-active-border-width: 0 !default;
 $lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2) !default;
 $lumx-button-emphasis-high-state-active-theme-light-color: var(--lumx-color-light-N) !default;
@@ -31,55 +31,55 @@ $lumx-button-emphasis-high-state-active-theme-light-border-color: transparent !d
 $lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2) !default;
 $lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N) !default;
 $lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-medium-state-default-padding-horizontal: 16px !default;
+$lumx-button-emphasis-medium-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-medium-state-default-border-width: 0 !default;
 $lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--lumx-color-dark-L5) !default;
 $lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px !default;
+$lumx-button-emphasis-medium-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-medium-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4) !default;
 $lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-medium-state-active-padding-horizontal: 16px !default;
+$lumx-button-emphasis-medium-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-medium-state-active-border-width: 0 !default;
 $lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3) !default;
 $lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3) !default;
-$lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
+$lumx-button-emphasis-low-state-default-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-button-emphasis-low-state-default-border-width: 0 !default;
 $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
-$lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-low-state-hover-padding-horizontal: 8px !default;
+$lumx-button-emphasis-low-state-hover-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-button-emphasis-low-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
 $lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-low-state-active-padding-horizontal: 8px !default;
+$lumx-button-emphasis-low-state-active-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-button-emphasis-low-state-active-border-width: 0 !default;
 $lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
 $lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default;
+$lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
 $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
 $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
@@ -87,7 +87,7 @@ $lumx-button-emphasis-selected-state-default-theme-light-border-color: transpare
 $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
 $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default;
+$lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
 $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
 $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
@@ -95,7 +95,7 @@ $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) !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
 $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
-$lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default;
+$lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
 $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
 $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
 $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
@@ -138,57 +138,57 @@ $lumx-material-text-field-header-label-line-height: 20px !default;
 $lumx-material-text-field-input-content-font-size: 14px !default;
 $lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular) !default;
 $lumx-material-text-field-input-content-line-height: 20px !default;
-$lumx-navigation-item-padding-horizontal: 8px !default;
+$lumx-navigation-item-padding-horizontal: var(--lumx-spacing-unit-regular) !default;
 $lumx-navigation-item-min-height: 36px !default;
-$lumx-navigation-item-border-radius: 4px !default;
+$lumx-navigation-item-border-radius: var(--lumx-border-radius) !default;
 $lumx-navigation-item-emphasis-low-state-default-border-top-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-default-border-right-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-default-border-left-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent !default;
-$lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5) !default;
+$lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4) !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N) !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
-$lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
-$lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
+$lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L4) !default;
+$lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-L1) !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent !default;
-$lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
+$lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
 $lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
-$lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5) !default;
+$lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
-$lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
+$lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L4) !default;
+$lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-L1) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
-$lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
+$lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
 $lumx-navigation-item-emphasis-low-state-active-border-top-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-active-border-right-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-active-border-left-width: 0 !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
-$lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
+$lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(--lumx-color-dark-L4) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
-$lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
+$lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L4) !default;
+$lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-L1) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
-$lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
+$lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
 $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0 !default;
 $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0 !default;
 $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0 !default;
@@ -200,7 +200,7 @@ $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: v
 $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent !default;
 $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
 $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
-$lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
+$lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent !default;
@@ -216,7 +216,7 @@ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var
 $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(--lumx-color-primary-L4) !default;
 $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
 $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
+$lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
@@ -232,7 +232,7 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: va
 $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(--lumx-color-primary-L3) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
+$lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
 $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
@@ -245,30 +245,30 @@ $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
 $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
 $lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
-$lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5) !default;
+$lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4) !default;
 $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent !default;
-$lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
-$lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
+$lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-L1) !default;
+$lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L4) !default;
 $lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px !default;
 $lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
 $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
-$lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5) !default;
+$lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L4) !default;
 $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
-$lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
+$lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-L1) !default;
+$lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L4) !default;
 $lumx-tabs-link-emphasis-low-state-active-border-top-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-active-border-right-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px !default;
 $lumx-tabs-link-emphasis-low-state-active-border-left-width: 0 !default;
 $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
 $lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
-$lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
+$lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L4) !default;
 $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
-$lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
+$lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
+$lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L4) !default;
 $lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0 !default;
 $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
 $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
@@ -277,7 +277,7 @@ $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: tr
 $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
-$lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0 !default;
 $lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0 !default;
@@ -287,7 +287,7 @@ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(
 $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
-$lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0 !default;
 $lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0 !default;
@@ -297,11 +297,11 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var
 $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
 $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
-$lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
+$lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
 $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
 $lumx-text-field-input-min-height: 36px !default;
-$lumx-text-field-input-padding-horizontal: 12px !default;
-$lumx-text-field-input-border-radius: 4px !default;
+$lumx-text-field-input-padding-horizontal: var(--lumx-spacing-unit-medium) !default;
+$lumx-text-field-input-border-radius: var(--lumx-border-radius) !default;
 $lumx-text-field-state-default-input-border-top-width: 1px !default;
 $lumx-text-field-state-default-input-border-right-width: 1px !default;
 $lumx-text-field-state-default-input-border-bottom-width: 1px !default;
@@ -335,7 +335,7 @@ $lumx-text-field-state-focus-input-border-right-width: 2px !default;
 $lumx-text-field-state-focus-input-border-bottom-width: 2px !default;
 $lumx-text-field-state-focus-input-border-left-width: 2px !default;
 $lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
-$lumx-text-field-state-focus-theme-light-input-background-color: var(--lumx-color-light-N) !default;
+$lumx-text-field-state-focus-theme-light-input-background-color: transparent !default;
 $lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N) !default;
 $lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
 $lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
diff --git a/packages/lumx-core/style-dictionary/properties/components/button.json b/packages/lumx-core/style-dictionary/properties/components/button.json
index 6c96c37f7..7625d5f01 100644
--- a/packages/lumx-core/style-dictionary/properties/components/button.json
+++ b/packages/lumx-core/style-dictionary/properties/components/button.json
@@ -65,7 +65,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L5}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -81,7 +81,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L4}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -97,7 +97,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L3}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             }
@@ -115,7 +115,7 @@
                 },
                 "theme-dark": {
                     "background-color": { "value": "transparent" },
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -131,7 +131,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L5}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             },
@@ -147,7 +147,7 @@
                 },
                 "theme-dark": {
                     "background-color": "{color.light.L4}",
-                    "color": "{color.light.N}",
+                    "color": "{color.light.L1}",
                     "border-color": { "value": "transparent" }
                 }
             }
diff --git a/packages/lumx-core/style-dictionary/properties/components/navigation.json b/packages/lumx-core/style-dictionary/properties/components/navigation.json
index dceddc071..a7a35000f 100644
--- a/packages/lumx-core/style-dictionary/properties/components/navigation.json
+++ b/packages/lumx-core/style-dictionary/properties/components/navigation.json
@@ -24,7 +24,7 @@
                     },
                     "theme-light": {
                         "background-color": { "value": "transparent" },
-                        "border-color": "{color.dark.L5}",
+                        "border-color": "{color.dark.L4}",
                         "icon-color": "{color.dark.L1}",
                         "label-color": "{color.dark.N}",
                         "chevron-background-color": { "value": "transparent" },
@@ -32,11 +32,11 @@
                     },
                     "theme-dark": {
                         "background-color": { "value": "transparent" },
-                        "border-color": "{color.light.L5}",
-                        "icon-color": "{color.light.N}",
+                        "border-color": "{color.light.L4}",
+                        "icon-color": "{color.light.L1}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": { "value": "transparent" },
-                        "chevron-color": "{color.light.N}"
+                        "chevron-color": "{color.light.L1}"
                     }
                 },
                 "state-hover": {
@@ -56,7 +56,7 @@
                     },
                     "theme-light": {
                         "background-color": "{color.dark.L5}",
-                        "border-color": "{color.dark.L5}",
+                        "border-color": "{color.dark.L4}",
                         "icon-color": "{color.dark.L1}",
                         "label-color": "{color.dark.N}",
                         "chevron-background-color": "{color.dark.L5}",
@@ -64,11 +64,11 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "border-color": "{color.light.L5}",
-                        "icon-color": "{color.light.N}",
+                        "border-color": "{color.light.L4}",
+                        "icon-color": "{color.light.L1}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L5}",
-                        "chevron-color": "{color.light.N}"
+                        "chevron-color": "{color.light.L1}"
                     }
                 },
                 "state-active": {
@@ -88,7 +88,7 @@
                     },
                     "theme-light": {
                         "background-color": "{color.dark.L4}",
-                        "border-color": "{color.dark.L5}",
+                        "border-color": "{color.dark.L4}",
                         "icon-color": "{color.dark.L1}",
                         "label-color": "{color.dark.N}",
                         "chevron-background-color": "{color.dark.L4}",
@@ -96,11 +96,11 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "border-color": "{color.light.L5}",
-                        "icon-color": "{color.light.N}",
+                        "border-color": "{color.light.L4}",
+                        "icon-color": "{color.light.L1}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L4}",
-                        "chevron-color": "{color.light.N}"
+                        "chevron-color": "{color.light.L1}"
                     }
                 }
             },
@@ -130,7 +130,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L3}",
-                        "border-color": "{color.light.L5}",
+                        "border-color": "{color.light.N}",
                         "icon-color": "{color.light.N}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": { "value": "transparent" },
@@ -162,7 +162,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "border-color": "{color.light.L5}",
+                        "border-color": "{color.light.N}",
                         "icon-color": "{color.light.N}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L4}",
@@ -194,7 +194,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "border-color": "{color.light.L5}",
+                        "border-color": "{color.light.N}",
                         "icon-color": "{color.light.N}",
                         "label-color": "{color.light.N}",
                         "chevron-background-color": "{color.light.L5}",
diff --git a/packages/lumx-core/style-dictionary/properties/components/tabs.json b/packages/lumx-core/style-dictionary/properties/components/tabs.json
index f193b93f1..7c5f96b35 100644
--- a/packages/lumx-core/style-dictionary/properties/components/tabs.json
+++ b/packages/lumx-core/style-dictionary/properties/components/tabs.json
@@ -22,12 +22,12 @@
                     "theme-light": {
                         "background-color": { "value": "transparent" },
                         "color": "{color.dark.L1}",
-                        "border-color": "{color.dark.L5}"
+                        "border-color": "{color.dark.L4}"
                     },
                     "theme-dark": {
                         "background-color": { "value": "transparent" },
-                        "color": "{color.light.N}",
-                        "border-color": "{color.light.L5}"
+                        "color": "{color.light.L1}",
+                        "border-color": "{color.light.L4}"
                     }
                 },
                 "state-hover": {
@@ -48,12 +48,12 @@
                     "theme-light": {
                         "background-color": "{color.dark.L5}",
                         "color": "{color.dark.L1}",
-                        "border-color": "{color.dark.L5}"
+                        "border-color": "{color.dark.L4}"
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "color": "{color.light.N}",
-                        "border-color": "{color.light.L5}"
+                        "color": "{color.light.L1}",
+                        "border-color": "{color.light.L4}"
                     }
                 },
                 "state-active": {
@@ -74,12 +74,12 @@
                     "theme-light": {
                         "background-color": "{color.dark.L4}",
                         "color": "{color.dark.L1}",
-                        "border-color": "{color.dark.L5}"
+                        "border-color": "{color.dark.L4}"
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "color": "{color.light.N}",
-                        "border-color": "{color.light.L5}"
+                        "color": "{color.light.L1}",
+                        "border-color": "{color.light.L4}"
                     }
                 }
             },
@@ -106,7 +106,7 @@
                     },
                     "theme-dark": {
                         "background-color": { "value": "transparent" },
-                        "color": "{color.light.N}",
+                        "color": "{color.light.L1}",
                         "border-color": "{color.light.N}"
                     }
                 },
@@ -132,7 +132,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L5}",
-                        "color": "{color.light.N}",
+                        "color": "{color.light.L1}",
                         "border-color": "{color.light.N}"
                     }
                 },
@@ -158,7 +158,7 @@
                     },
                     "theme-dark": {
                         "background-color": "{color.light.L4}",
-                        "color": "{color.light.N}",
+                        "color": "{color.light.L1}",
                         "border-color": "{color.light.N}"
                     }
                 }
diff --git a/packages/lumx-core/style-dictionary/properties/components/text-field.json b/packages/lumx-core/style-dictionary/properties/components/text-field.json
index e27227818..cafdfb68d 100644
--- a/packages/lumx-core/style-dictionary/properties/components/text-field.json
+++ b/packages/lumx-core/style-dictionary/properties/components/text-field.json
@@ -135,7 +135,7 @@
                     }
                 },
                 "input": {
-                    "background-color": "{color.light.N}",
+                    "background-color": { "value": "transparent" },
                     "border-color": "{color.primary.N}",
                     "content": {
                         "color": "{color.dark.N}"
diff --git a/packages/lumx-core/style-dictionary/properties/core/border-radius.json b/packages/lumx-core/style-dictionary/properties/core/border-radius.json
index 5f7087fb2..b6626d625 100644
--- a/packages/lumx-core/style-dictionary/properties/core/border-radius.json
+++ b/packages/lumx-core/style-dictionary/properties/core/border-radius.json
@@ -1,3 +1,3 @@
 {
-    "border-radius": { "value": "4px" }
+    "border-radius": { "value": "4px", "preferCSSVariable": true }
 }
diff --git a/packages/lumx-core/style-dictionary/properties/core/spacing.json b/packages/lumx-core/style-dictionary/properties/core/spacing.json
index 0d9732350..6be781c9c 100644
--- a/packages/lumx-core/style-dictionary/properties/core/spacing.json
+++ b/packages/lumx-core/style-dictionary/properties/core/spacing.json
@@ -1,11 +1,11 @@
 {
     "spacing": {
         "unit": {
-            "tiny": { "value": "4px" },
-            "regular": { "value": "8px" },
-            "medium": { "value": "12px" },
-            "big": { "value": "16px" },
-            "huge": { "value": "24px" }
+            "tiny": { "value": "4px", "preferCSSVariable": true },
+            "regular": { "value": "8px", "preferCSSVariable": true },
+            "medium": { "value": "12px", "preferCSSVariable": true },
+            "big": { "value": "16px", "preferCSSVariable": true },
+            "huge": { "value": "24px", "preferCSSVariable": true }
         }
     }
 }