Revert "feat(color): soften medium and low dark buttons color"

This reverts commit bad3a61.

Author: gcornut

CHANGELOG.md

@@ -38,10 +38,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Slideshow : fixed keyboard navigation, now the right arrow goes to the next slides and the left to the previous one.
 -   Dialog : Focus parent element everytime the dialog closes, not only on escape and clickaway.
 
-### Changed
-
--   Soften medium and low dark buttons color.
-
 ## [2.1.3][] - 2021-11-19
 
 ### Added

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, 19 Oct 2021 08:35:24 GMT
  */
 
 :root {
@@ -48,12 +48,7 @@
         0,
         0.12
     ); /* Base dark color with 12% opacity */
-    --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
         255,
@@ -71,12 +66,7 @@
         0,
         0.2
     ); /* Base dark color with 20% opacity */
-    --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
         255,
@@ -94,12 +84,7 @@
         0,
         0.38
     ); /* Base dark color with 38% opacity */
-    --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent;
     --lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
         255,
@@ -112,12 +97,7 @@
     --lumx-button-emphasis-low-state-default-padding-horizontal: 8px;
     --lumx-button-emphasis-low-state-default-border-width: 0;
     --lumx-button-emphasis-low-state-default-theme-light-background-color: transparent;
-    --lumx-button-emphasis-low-state-default-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent;
     --lumx-button-emphasis-low-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -130,7 +110,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.87); /* Neutral dark color */
     --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
         255,
@@ -148,12 +128,7 @@
         0,
         0.2
     ); /* Base dark color with 20% opacity */
-    --lumx-button-emphasis-low-state-active-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
     --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
         255,
@@ -255,21 +230,21 @@
         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-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 */
+        0.87
+    ); /* Neutral dark color */
     --lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent;
     --lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
         255,
@@ -301,14 +276,14 @@
         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-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,
@@ -319,8 +294,8 @@
         0,
         0,
         0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+        0.87
+    ); /* Neutral dark color */
     --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
         255,
         255,
@@ -362,14 +337,14 @@
         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-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,
@@ -380,8 +355,8 @@
         0,
         0,
         0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+        0.87
+    ); /* Neutral dark color */
     --lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
         255,
         255,
@@ -502,12 +477,7 @@
     --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px;
     --lumx-tabs-link-emphasis-low-state-default-border-left-width: 0;
     --lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent;
-    --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
         0,
         0,
@@ -532,12 +502,7 @@
         0,
         0.12
     ); /* Base dark color with 12% opacity */
-    --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
         0,
         0,
@@ -567,12 +532,7 @@
         0,
         0.2
     ); /* Base dark color with 20% opacity */
-    --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
         0,
         0,
@@ -597,12 +557,7 @@
     --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px;
     --lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0;
     --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent;
-    --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent;
     --lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff; /* Neutral light color */
@@ -617,12 +572,7 @@
         0,
         0.12
     ); /* Base dark color with 12% opacity */
-    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
         255,
@@ -642,12 +592,7 @@
         0,
         0.2
     ); /* Base dark color with 20% opacity */
-    --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
-        0,
-        0,
-        0,
-        0.7
-    ); /* Base dark color with 80% opacity */
+    --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87); /* Neutral dark color */
     --lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N);
     --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
         255,
@@ -782,7 +727,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.8); /* Base dark color with 80% 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 +811,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.8); /* Base dark color with 80% 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 */