@lumx/core 2.1.4 → 2.1.5

package/lumx.min.js

@@ -0,0 +1,2 @@
+!function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var o in e)t.d(n,o,function(t){return e[t]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=107)}({107:function(e,t,r){}});
+//# sourceMappingURL=lumx.min.js.map

package/lumx.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///webpack/bootstrap"],"names":["__webpack_require__","moduleId","installedModules","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s"],"mappings":"aAIE,SAASA,EAAoBC,GAG5B,GAAGC,EAAiBD,GACnB,OAAOC,EAAiBD,GAAUE,QAGnC,IAAIC,EAASF,EAAiBD,GAAY,CACzCI,EAAGJ,EACHK,GAAG,EACHH,QAAS,IAUV,OANAI,EAAQN,GAAUO,KAAKJ,EAAOD,QAASC,EAAQA,EAAOD,QAASH,GAG/DI,EAAOE,GAAI,EAGJF,EAAOD,QAvBf,IAAID,EAAmB,GA4BvBF,EAAoBS,EAAIF,EAGxBP,EAAoBU,EAAIR,EAGxBF,EAAoBW,EAAI,SAASR,EAASS,EAAMC,GAC3Cb,EAAoBc,EAAEX,EAASS,IAClCG,OAAOC,eAAeb,EAASS,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEb,EAAoBmB,EAAI,SAAShB,GACX,oBAAXiB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeb,EAASiB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeb,EAAS,aAAc,CAAEmB,OAAO,KAQvDtB,EAAoBuB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQtB,EAAoBsB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFA3B,EAAoBmB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOtB,EAAoBW,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIR1B,EAAoB8B,EAAI,SAAS1B,GAChC,IAAIS,EAAST,GAAUA,EAAOqB,WAC7B,WAAwB,OAAOrB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAJ,EAAoBW,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRb,EAAoBc,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzGhC,EAAoBmC,EAAI,GAIjBnC,EAAoBA,EAAoBoC,EAAI,K","file":"lumx.min.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 107);\n"],"sourceRoot":""}

package/package.json

@@ -37,12 +37,11 @@
         "generate:design-tokens": "yarn node style-dictionary",
         "build": "webpack",
         "postbuild": "rm -rf ./dist/*.js ./dist/*.js.map",
-        "postversion": "version-changelog ../../CHANGELOG.md && git add ../../CHANGELOG.md && git commit --amend",
         "prepare": "install-peers || exit 0",
         "prepublishOnly": "yarn build"
     },
     "sideEffects": false,
-    "version": "2.1.4",
+    "version": "2.1.5",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -79,5 +78,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "de78ddf378468c55a56149bcb4568e66a9a88f32"
+    "gitHead": "ad5125402db165c2a7d37fb72327153b80193759"
 }

package/scss/_design-tokens.scss

@@ -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
  */
 
 $lumx-button-height: 36px !default;
@@ -52,7 +52,7 @@ $lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
     255,
@@ -75,7 +75,7 @@ $lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
     255,
@@ -98,7 +98,7 @@ $lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
     255,
@@ -116,7 +116,7 @@ $lumx-button-emphasis-low-state-default-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
 $lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
@@ -134,7 +134,7 @@ $lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
     255,
@@ -157,7 +157,7 @@ $lumx-button-emphasis-low-state-active-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
 $lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
     255,
@@ -260,20 +260,20 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
     0,
     0,
     0,
-    0.7
-) !default; // Base dark color with 80% opacity
+    0.87
+) !default; // Neutral dark color
 $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba(
     0,
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
 $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
     255,
@@ -306,13 +306,13 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
     0,
     0,
     0,
-    0.7
-) !default; // Base dark color with 80% opacity
+    0.87
+) !default; // Neutral dark color
 $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: rgba(
     0,
     0,
@@ -324,7 +324,7 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
     255,
     255,
@@ -367,13 +367,13 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
     0,
     0,
     0,
-    0.7
-) !default; // Base dark color with 80% opacity
+    0.87
+) !default; // Neutral dark color
 $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: rgba(
     0,
     0,
@@ -385,7 +385,7 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
     255,
     255,
@@ -515,7 +515,7 @@ $lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
     0,
     0,
@@ -545,7 +545,7 @@ $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
     0,
     0,
@@ -580,7 +580,7 @@ $lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
     0,
     0,
@@ -610,7 +610,7 @@ $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
 $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
@@ -630,7 +630,7 @@ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
     255,
@@ -655,7 +655,7 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
     0,
     0,
     0.7
-) !default; // Base dark color with 80% opacity
+) !default; // Base dark color with 70% opacity
 $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
 $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
     255,
@@ -790,7 +790,7 @@ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
 ) !default; // Base light color with 80% opacity
 $lumx-border-radius: 4px !default;
 $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
-$lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 80% opacity
+$lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
 $lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
 $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
 $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
@@ -874,7 +874,7 @@ $lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with
 $lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
 $lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
 $lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
-$lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 80% opacity
+$lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
 $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
 $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
 $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity

package/scss/components/chip/_index.scss

@@ -82,6 +82,12 @@
         &.#{$lumx-base-prefix}-chip--is-highlighted {
             @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'MEDIUM'), $key);
         }
+
+        @if $key == 'dark' {
+            .#{$lumx-base-prefix}-chip__label {
+                color: lumx-color-variant('dark', 'L1');
+            }
+        }
     }
 }
 

package/scss/components/icon/_mixins.scss

@@ -16,6 +16,10 @@
         background-color: lumx-color-variant($color, 'L5');
         color: lumx-color-variant($color, 'L2');
     } @else if $has-shape == false {
-        color: lumx-color-variant($color, 'N');
+        @if $color == 'dark' {
+            color: lumx-color-variant('dark', 'L1');
+        } @else {
+            color: lumx-color-variant($color, 'N');
+        }
     }
 }

package/scss/components/thumbnail/_index.scss

@@ -103,8 +103,9 @@
 /* Thumbnail states
    ========================================================================== */
 
-.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+.#{$lumx-base-prefix}-thumbnail--is-clickable {
     position: relative;
+    display: block;
     cursor: pointer;
 
     &::after {
@@ -119,7 +120,8 @@
         pointer-events: none;
     }
 
-    &:hover::after {
+    &:hover::after,
+    &:focus::after {
         @include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
     }
 
@@ -128,19 +130,19 @@
     }
 }
 
-.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail--is-clickable {
     &[data-focus-visible-added]::after {
         border-radius: var(--lumx-border-radius);
     }
 }
 
-.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail--is-clickable {
     &[data-focus-visible-added]::after {
         @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'dark');
     }
 }
 
-.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail[tabindex='0'] {
+.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail--is-clickable {
     &[data-focus-visible-added]::after {
         @include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'light');
     }

package/scss/components/user-block/_index.scss

@@ -49,7 +49,7 @@
             color: lumx-color-variant('light', 'N');
         }
 
-        &[tabindex='0'] {
+        &--is-clickable {
             #{$self}--theme-light & {
                 @include lumx-link('dark');
             }

package/scss/core/state/_mixins.scss

@@ -31,11 +31,12 @@
 @mixin lumx-state-medium($state, $color, $has-focus-inset: false) {
     @if $state == lumx-base-const('state', 'DEFAULT') {
         background-color: lumx-color-variant($color, 'L5');
+        color: lumx-color-variant($color, 'N');
 
         @if $color == 'dark' {
-            color: lumx-color-variant($color, 'L1');
-        } @else {
-            color: lumx-color-variant($color, 'N');
+            .#{$lumx-base-prefix}-icon {
+                color: lumx-color-variant('dark', 'L1');
+            }
         }
     } @else if $state == lumx-base-const('state', 'HOVER') {
         background-color: lumx-color-variant($color, 'L4');
@@ -55,12 +56,14 @@
         @if $state == lumx-base-const('state', 'DEFAULT') {
             background-color: lumx-color-variant('primary', 'L5');
             color: lumx-color-variant('primary', 'D2');
+
+            .#{$lumx-base-prefix}-icon {
+                color: lumx-color-variant('primary', 'D2');
+            }
         } @else if $state == lumx-base-const('state', 'HOVER') {
             background-color: lumx-color-variant('primary', 'L4');
-            color: lumx-color-variant('primary', 'D2');
         } @else if $state == lumx-base-const('state', 'ACTIVE') {
             background-color: lumx-color-variant('primary', 'L3');
-            color: lumx-color-variant('primary', 'D2');
         } @else if $state == lumx-base-const('state', 'FOCUS') {
             @if $has-focus-inset == true {
                 box-shadow: inset 0 0 0 2px lumx-color-variant('primary', 'L3');
@@ -72,12 +75,14 @@
         @if $state == lumx-base-const('state', 'DEFAULT') {
             background-color: lumx-color-variant('light', 'L3');
             color: lumx-color-variant('light', 'N');
+
+            .#{$lumx-base-prefix}-icon {
+                color: lumx-color-variant('light', 'N');
+            }
         } @else if $state == lumx-base-const('state', 'HOVER') {
             background-color: lumx-color-variant('light', 'L4');
-            color: lumx-color-variant('light', 'N');
         } @else if $state == lumx-base-const('state', 'ACTIVE') {
             background-color: lumx-color-variant('light', 'L5');
-            color: lumx-color-variant('light', 'N');
         } @else if $state == lumx-base-const('state', 'FOCUS') {
             @if $has-focus-inset == true {
                 box-shadow: inset 0 0 0 2px lumx-color-variant('light', 'L3');
@@ -91,11 +96,12 @@
 @mixin lumx-state-low($state, $color, $has-focus-inset: false) {
     @if $state == lumx-base-const('state', 'DEFAULT') {
         background-color: transparent;
+        color: lumx-color-variant($color, 'N');
 
         @if $color == 'dark' {
-            color: lumx-color-variant($color, 'L1');
-        } @else {
-            color: lumx-color-variant($color, 'N');
+            .#{$lumx-base-prefix}-icon {
+                color: lumx-color-variant('dark', 'L1');
+            }
         }
     } @else if $state == lumx-base-const('state', 'HOVER') {
         background-color: lumx-color-variant($color, 'L5');