npm - @lumx/core - Versions diffs - 2.1.8 → 2.1.9-alpha-thumbnail4 - Mend

@lumx/core 2.1.8 → 2.1.9-alpha-thumbnail4

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 (26) hide show

package/css/design-tokens.css +82 -27
package/js/constants/design-tokens.js +21 -21
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 +21 -21
package/js/custom-colors.min.js.map +1 -1
package/js/date-picker.min.js.map +1 -1
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/_components.scss +1 -0
package/scss/_design-tokens.scss +87 -27
package/scss/components/chip/_index.scss +6 -0
package/scss/components/flag/_index.scss +8 -3
package/scss/components/icon/_mixins.scss +5 -1
package/scss/components/image-block/_index.scss +2 -0
package/scss/components/list/_mixins.scss +2 -1
package/scss/components/side-navigation/_mixins.scss +0 -1
package/scss/components/skeleton/_index.scss +4 -7
package/scss/components/skeleton/_mixins.scss +10 -0
package/scss/components/thumbnail/_index.scss +100 -60
package/scss/components/thumbnail/_variables.scss +1 -1
package/scss/components/uploader/_index.scss +2 -2
package/scss/components/user-block/_index.scss +1 -1
package/scss/core/state/_mixins.scss +0 -4

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 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 */

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 Tue, 30 Nov 2021 09:20:10 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% 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 70% opacity',
               attributes: {
                 category: 'tabs',
                 type: 'link',
@@ -3227,7 +3227,7 @@ var DESIGN_TOKENS = {
       },
       L1: {
         version: '0.22',
-        comment: 'Base dark color with 80% opacity',
+        comment: 'Base dark color with 70% opacity',
         attributes: {
           category: 'color',
           type: 'dark',
@@ -4591,7 +4591,7 @@ var DESIGN_TOKENS = {
       },
       L1: {
         version: '0.22',
-        comment: 'Base dark color with 80% opacity',
+        comment: 'Base dark color with 70% opacity',
         attributes: {
           category: 'color',
           type: 'black',