npm - @lumx/core - Versions diffs - 2.1.3 → 2.1.4 - Mend

@lumx/core 2.1.3 → 2.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/css/design-tokens.css +88 -33
package/js/constants/design-tokens.js +22 -22
package/js/constants/design-tokens.min.js +1 -1
package/js/constants/design-tokens.min.js.map +1 -1
package/js/constants/design-tokens.ts +22 -22
package/js/utils.min.js.map +1 -1
package/lumx.css +1 -1
package/lumx.min.css +1 -1
package/package.json +2 -2
package/scss/_design-tokens.scss +93 -33
package/scss/components/flag/_index.scss +8 -3
package/scss/components/list/_mixins.scss +2 -1
package/scss/components/side-navigation/_mixins.scss +0 -1
package/scss/components/thumbnail/_variables.scss +1 -1
package/scss/components/uploader/_index.scss +2 -2
package/scss/core/state/_mixins.scss +12 -2

package/css/design-tokens.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 19 Oct 2021 08:35:24 GMT
+ * Generated on Thu, 18 Nov 2021 15:14:46 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 80% 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 80% 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 80% 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 80% 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 80% 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 80% 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,21 +255,21 @@
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --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.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% 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,14 +301,14 @@
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
         0,
         0,
@@ -294,8 +319,8 @@
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
         255,
         255,
@@ -337,14 +362,14 @@
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% opacity */
     --lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
         0,
         0,
@@ -355,8 +380,8 @@
         0,
         0,
         0,
-        0.87
-    ); /* Neutral dark color */
+        0.7
+    ); /* Base dark color with 80% 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 80% 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 80% 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 80% 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 80% 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 80% 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 80% 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 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 */
@@ -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 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 */

package/js/constants/design-tokens.js CHANGED Viewed

@@ -94,7 +94,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DESIGN_TOKENS", function() { return DESIGN_TOKENS; });
 /**
  * Do not edit directly
- * Generated on Tue, 19 Oct 2021 08:35:25 GMT
+ * Generated on Thu, 18 Nov 2021 15:14:46 GMT
  */
 var DESIGN_TOKENS = {
   button: {
@@ -346,7 +346,7 @@ var DESIGN_TOKENS = {
           },
           color: {
             version: '0.22',
-            comment: 'Neutral dark color',
+            comment: 'Base dark color with 80% opacity',
             attributes: {
               category: 'button',
               type: 'emphasis-medium',
@@ -418,7 +418,7 @@ var DESIGN_TOKENS = {
           },
           color: {
             version: '0.22',
-            comment: 'Neutral dark color',
+            comment: 'Base dark color with 80% opacity',
             attributes: {
               category: 'button',
               type: 'emphasis-medium',
@@ -490,7 +490,7 @@ var DESIGN_TOKENS = {
           },
           color: {
             version: '0.22',
-            comment: 'Neutral dark color',
+            comment: 'Base dark color with 80% opacity',
             attributes: {
               category: 'button',
               type: 'emphasis-medium',
@@ -562,7 +562,7 @@ var DESIGN_TOKENS = {
           },
           color: {
             version: '0.22',
-            comment: 'Neutral dark color',
+            comment: 'Base dark color with 80% opacity',
             attributes: {
               category: 'button',
               type: 'emphasis-low',
@@ -632,7 +632,7 @@ var DESIGN_TOKENS = {
           },
           color: {
             version: '0.22',
-            comment: 'Neutral dark color',
+            comment: 'Base dark color with 80% opacity',
             attributes: {
               category: 'button',
               type: 'emphasis-low',
@@ -704,7 +704,7 @@ var DESIGN_TOKENS = {
           },
           color: {
             version: '0.22',
-            comment: 'Neutral dark color',
+            comment: 'Base dark color with 80% opacity',
             attributes: {
               category: 'button',
               type: 'emphasis-low',
@@ -1326,7 +1326,7 @@ var DESIGN_TOKENS = {
             },
             'icon-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1335,7 +1335,7 @@ var DESIGN_TOKENS = {
             },
             'label-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1351,7 +1351,7 @@ var DESIGN_TOKENS = {
             },
             'chevron-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1472,7 +1472,7 @@ var DESIGN_TOKENS = {
             },
             'icon-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1481,7 +1481,7 @@ var DESIGN_TOKENS = {
             },
             'label-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1499,7 +1499,7 @@ var DESIGN_TOKENS = {
             },
             'chevron-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1624,7 +1624,7 @@ var DESIGN_TOKENS = {
             },
             'icon-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1633,7 +1633,7 @@ var DESIGN_TOKENS = {
             },
             'label-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -1651,7 +1651,7 @@ var DESIGN_TOKENS = {
             },
             'chevron-color': {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'navigation',
                 type: 'item',
@@ -2205,7 +2205,7 @@ var DESIGN_TOKENS = {
             },
             color: {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',
@@ -2301,7 +2301,7 @@ var DESIGN_TOKENS = {
             },
             color: {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',
@@ -2399,7 +2399,7 @@ var DESIGN_TOKENS = {
             },
             color: {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',
@@ -2497,7 +2497,7 @@ var DESIGN_TOKENS = {
             },
             color: {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',
@@ -2591,7 +2591,7 @@ var DESIGN_TOKENS = {
             },
             color: {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',
@@ -2687,7 +2687,7 @@ var DESIGN_TOKENS = {
             },
             color: {
               version: '0.22',
-              comment: 'Neutral dark color',
+              comment: 'Base dark color with 80% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',