@lumx/core 3.0.7 → 3.0.8

package/package.json

@@ -26,8 +26,7 @@
     "license": "MIT",
     "name": "@lumx/core",
     "publishConfig": {
-        "directory": "dist",
-        "prepublishOnly": "yarn build"
+        "directory": "dist"
     },
     "repository": {
         "type": "git",
@@ -38,11 +37,10 @@
         "build": "webpack && yarn clean:unwanted-dist",
         "clean:unwanted-dist": "rm -rf ./dist/*.js ./dist/*.js.map",
         "prepare": "install-peers || exit 0",
-        "prepublishOnly": "yarn build",
-        "version": "yarn version-changelog ../../CHANGELOG.md && yarn changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
+        "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.0.7",
+    "version": "3.0.8",
     "devDependencies": {
         "@babel/core": "^7.20.2",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -54,7 +52,6 @@
         "@babel/preset-env": "^7.20.2",
         "@babel/preset-typescript": "^7.18.6",
         "autoprefixer": "^9.7.4",
-        "changelog-verify": "^1.1.2",
         "clean-webpack-plugin": "^3.0.0",
         "copy-webpack-plugin": "^5.1.1",
         "core-js": "^3.6.4",
@@ -80,6 +77,5 @@
     "peerDependencies": {
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
-    },
-    "gitHead": "4fec43ef3290a9f250767d3bdecf60cfcf02ee75"
+    }
 }

package/scss/components/grid-column/_index.scss

@@ -0,0 +1,18 @@
+/* ==========================================================================
+   Grid Column
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-grid-column {
+    --lumx-grid-column-gap: var(--lumx-spacing-unit-regular);
+    --lumx-grid-column-columns: 1;
+    --lumx-grid-column-item-min-width: 100%;
+
+    $min-width: var(--lumx-grid-column-item-min-width);
+    $gap: var(--lumx-grid-column-gap);
+    $columns: var(--lumx-grid-column-columns);
+    $column-max-width: max(min(#{$min-width}, 100%), calc((100% - (#{$columns} - 1) * #{$gap}) / #{$columns}));
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(#{$column-max-width}, 1fr));
+    gap: var(--lumx-grid-column-gap);
+}

package/scss/components/progress/_index.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 /* ==========================================================================
    Progress
    ========================================================================== */
@@ -29,11 +31,15 @@
         animation: lumx-progress-bounce 2s infinite ease-in-out;
     }
 
+    &--theme-light &__double-bounce1,
+    &--theme-light &__double-bounce2,
     .#{$lumx-base-prefix}-progress--theme-light &__double-bounce1,
     .#{$lumx-base-prefix}-progress--theme-light &__double-bounce2 {
         background-color: lumx-color-variant("primary", "L3");
     }
 
+    &--theme-dark &__double-bounce1,
+    &--theme-dark &__double-bounce2,
     .#{$lumx-base-prefix}-progress--theme-dark &__double-bounce1,
     .#{$lumx-base-prefix}-progress--theme-dark &__double-bounce2 {
         background-color: lumx-color-variant("light", "L3");
@@ -64,13 +70,23 @@
         animation: lumx-progress-dash 1.5s ease-in-out infinite;
     }
 
+    &--theme-light &__path,
     .#{$lumx-base-prefix}-progress--theme-light &__path {
         stroke: lumx-color-variant("primary", "N");
     }
 
+    &--theme-dark &__path,
     .#{$lumx-base-prefix}-progress--theme-dark &__path {
         stroke: lumx-color-variant("light", "N");
     }
+
+    /* Circular sizes */
+    @each $key, $size in $lumx-progress-circular-size-map {
+        &--size-#{$key}, &--size-#{$key} .#{$lumx-base-prefix}-progress-circular__svg {
+            width: $size;
+            height: $size;
+        }
+    }
 }
 
 @keyframes lumx-progress-bounce {
@@ -125,11 +141,15 @@
         left: 0;
     }
 
+    &--theme-light &__line1,
+    &--theme-light &__line2,
     .#{$lumx-base-prefix}-progress--theme-light &__line1,
     .#{$lumx-base-prefix}-progress--theme-light &__line2 {
         background-color: lumx-color-variant("primary", "L3");
     }
 
+    &--theme-dark &__line1,
+    &--theme-dark &__line2,
     .#{$lumx-base-prefix}-progress--theme-dark &__line1,
     .#{$lumx-base-prefix}-progress--theme-dark &__line2 {
         background-color: lumx-color-variant("light", "L3");

package/scss/components/progress/_variables.scss

@@ -1,2 +1,12 @@
-$lumx-progress-circular-size: 40px;
+@use "sass:map";
+
+/** @deprecated: replaced with $lumx-progress-circular-size-map */
+$lumx-progress-circular-size: map.get($lumx-sizes, "m");
+$lumx-progress-circular-size-map: (
+    "xxs": map.get($lumx-sizes, "xxs"),
+    "xs": map.get($lumx-sizes, "xs"),
+    "s": map.get($lumx-sizes, "s"),
+    "m": map.get($lumx-sizes, "m"),
+);
+
 $lumx-progress-linear-size: 4px;

package/scss/components/tabs/_index.scss

@@ -16,7 +16,7 @@
     }
 
     &__link {
-        &:not(&--is-active) {
+        &:not(&--is-active):not(&--is-disabled) {
             @include lumx-tabs-link(lumx-base-const("emphasis", "LOW"));
 
             #{$self}--theme-light & {
@@ -83,11 +83,15 @@
 
 // Disabled state
 .#{$lumx-base-prefix}-tabs__link--is-disabled {
+    @include lumx-tabs-link(lumx-base-const("emphasis", "LOW"));
+
     .#{$lumx-base-prefix}-tabs--theme-light & {
+        @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "LIGHT"));
         @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
     }
 
     .#{$lumx-base-prefix}-tabs--theme-dark & {
+        @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "DARK"));
         @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
     }
 }

package/scss/lumx.scss

@@ -33,6 +33,7 @@
 @import "./components/flex-box/index";
 @import "./components/generic-block/index";
 @import "./components/grid/index";
+@import "./components/grid-column/index";
 @import "./components/icon/index";
 @import "./components/image-block/index";
 @import "./components/inline-list/index";