chore(color): limit soft dark to wanted components

Author: matmkian

packages/lumx-core/src/css/design-tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 18 Nov 2021 15:14:46 GMT
+ * Generated on Tue, 30 Nov 2021 09:20:09 GMT
  */
 
 :root {
@@ -53,7 +53,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
         255,
@@ -76,7 +76,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
         255,
@@ -99,7 +99,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
         255,
@@ -117,7 +117,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
     --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -130,7 +130,7 @@
         0,
         0.12
     ); /* Base dark color with 12% opacity */
-    --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 80% opacity */
+    --lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
     --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
         255,
@@ -153,7 +153,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
         255,
@@ -256,20 +256,20 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
         0,
         0,
         0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+        0.87
+    ); /* Neutral dark color */
     --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent;
     --lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
         0,
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
     --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
         255,
@@ -302,13 +302,13 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
         0,
         0,
         0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+        0.87
+    ); /* Neutral dark color */
     --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
         0,
         0,
@@ -320,7 +320,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
         255,
         255,
@@ -363,13 +363,13 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
         0,
         0,
         0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+        0.87
+    ); /* Neutral dark color */
     --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
         0,
         0,
@@ -381,7 +381,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
         255,
         255,
@@ -507,7 +507,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
         0,
         0,
@@ -537,7 +537,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
         0,
         0,
@@ -572,7 +572,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
         0,
         0,
@@ -602,7 +602,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
     --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -622,7 +622,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
         255,
@@ -647,7 +647,7 @@
         0,
         0,
         0.7
-    ); /* Base dark color with 80% opacity */
+    ); /* Base dark color with 70% opacity */
     --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
         255,
@@ -782,7 +782,7 @@
     ); /* Base light color with 80% opacity */
     --lumx-border-radius: 4px;
     --lumx-color-dark-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
-    --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 80% opacity */
+    --lumx-color-dark-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
     --lumx-color-dark-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
     --lumx-color-dark-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
     --lumx-color-dark-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */
@@ -866,7 +866,7 @@
     --lumx-color-accent-L5: rgba(76, 175, 80, 0.1); /* Base green color with 10% opacity */
     --lumx-color-accent-L6: rgba(76, 175, 80, 0.05); /* Base green color with 5% opacity */
     --lumx-color-black-N: rgba(0, 0, 0, 0.87); /* Neutral dark color */
-    --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 80% opacity */
+    --lumx-color-black-L1: rgba(0, 0, 0, 0.7); /* Base dark color with 70% opacity */
     --lumx-color-black-L2: rgba(0, 0, 0, 0.54); /* Base dark color with 54% opacity */
     --lumx-color-black-L3: rgba(0, 0, 0, 0.38); /* Base dark color with 38% opacity */
     --lumx-color-black-L4: rgba(0, 0, 0, 0.2); /* Base dark color with 20% opacity */