Merge pull request #748 from lumapps/chore/fixed-soften-buttons

Chore/fixed soften buttons

Author: gcornut

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   Reverted a11y link improvements (`linkAs` and `linkProps`) on Thumbnail, Avatar and UserBlock introduced in v2.1.5 that introduced a regression on the Thumbnail style.
 
+### Changed
+
+-   Soften dark color on medium / low dark buttons, dark chips, dark flags, dark icons, tabs, navigation items and uploaders.
+
 ## [2.1.8][] - 2021-12-10
 
 ### Fixed

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

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