@lumx/core 3.1.1 → 3.1.3-alpha.0

package/package.json

@@ -40,7 +40,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.1.1",
+    "version": "3.1.3-alpha.0",
     "devDependencies": {
         "@babel/core": "^7.20.2",
         "@babel/plugin-proposal-class-properties": "^7.18.6",

package/{src/scss → scss}/components/grid-column/_index.scss

@@ -1,3 +1,5 @@
+@use "sass:string";
+
 /* ==========================================================================
    Grid Column
    ========================================================================== */
@@ -10,9 +12,13 @@
     $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}));
+
+    // Using `unquote` to make sure the `calc()` function is not removed at compile time.
+    $column-max-width: string.unquote(
+        "max(min(" + $min-width + ", 100%), calc((100% - (" + $columns + " - 1) * " + $gap + ") / " + $columns + "))"
+    );
 
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(#{$column-max-width}, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax($column-max-width, 1fr));
     gap: var(--lumx-grid-column-gap);
 }

package/{src/scss → 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/dist/package.json

@@ -1,81 +0,0 @@
-{
-    "author": {
-        "name": "LumApps"
-    },
-    "bugs": {
-        "url": "https://github.com/lumapps/design-system/issues"
-    },
-    "dependencies": {
-        "classnames": "^2.2.6",
-        "focus-visible": "^5.0.2",
-        "lodash": "4.17.21",
-        "sass-mq": "^6.0.0"
-    },
-    "description": "LumX core",
-    "engines": {
-        "node": ">= 12.0.0",
-        "npm": ">= 4.0.0",
-        "yarn": ">= 1.3.0"
-    },
-    "homepage": "https://github.com/lumapps/design-system",
-    "keywords": [
-        "Design System",
-        "LumApps",
-        "LumX"
-    ],
-    "license": "MIT",
-    "name": "@lumx/core",
-    "publishConfig": {
-        "directory": "dist"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/lumapps/design-system.git"
-    },
-    "scripts": {
-        "generate:design-tokens": "yarn node style-dictionary",
-        "build": "webpack && yarn clean:unwanted-dist",
-        "clean:unwanted-dist": "rm -rf ./dist/*.js ./dist/*.js.map",
-        "prepare": "install-peers || exit 0",
-        "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
-    },
-    "sideEffects": false,
-    "version": "3.1.1",
-    "devDependencies": {
-        "@babel/core": "^7.20.2",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-export-default-from": "^7.18.10",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-typescript": "^7.18.6",
-        "autoprefixer": "^9.7.4",
-        "clean-webpack-plugin": "^3.0.0",
-        "copy-webpack-plugin": "^5.1.1",
-        "core-js": "^3.6.4",
-        "css-loader": "^3.4.2",
-        "extract-css-chunks-webpack-plugin": "^4.7.4",
-        "fork-ts-checker-webpack-plugin": "^4.0.3",
-        "friendly-errors-webpack-plugin": "^1.7.0",
-        "glob": "^7.1.6",
-        "install-peers-cli": "^2.2.0",
-        "is-ci": "^2.0.0",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
-        "postcss-loader": "^3.0.0",
-        "sass": "^1.54.0",
-        "sass-loader": "^10.3.1",
-        "style-dictionary": "^2.10.0",
-        "tinycolor2": "^1.4.1",
-        "unminified-webpack-plugin": "^2.0.0",
-        "version-changelog": "^3.1.1",
-        "webpack": "^4.44.1",
-        "webpack-notifier": "^1.8.0",
-        "webpackbar": "^4.0.0"
-    },
-    "peerDependencies": {
-        "moment": "^2.24.0",
-        "moment-range": "^4.0.2"
-    }
-}

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

@@ -1,18 +0,0 @@
-/* ==========================================================================
-   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/dist/scss/components/tabs/_index.scss

@@ -1,111 +0,0 @@
-/* ==========================================================================
-   Tabs
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-tabs {
-    $self: &;
-
-    &__links {
-        #{$self}--theme-light & {
-            @include lumx-tabs-links;
-        }
-
-        #{$self}--theme-dark & {
-            @include lumx-tabs-links;
-        }
-    }
-
-    &__link {
-        &:not(&--is-active) {
-            @include lumx-tabs-link(lumx-base-const("emphasis", "LOW"));
-
-            #{$self}--theme-light & {
-                @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "LIGHT"));
-            }
-
-            #{$self}--theme-dark & {
-                @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "DARK"));
-            }
-        }
-
-        &--is-active {
-            @include lumx-tabs-link(lumx-base-const("emphasis", "SELECTED"));
-
-            #{$self}--theme-light & {
-                @include lumx-tabs-link-color(
-                    lumx-base-const("emphasis", "SELECTED"),
-                    lumx-base-const("theme", "LIGHT")
-                );
-            }
-
-            #{$self}--theme-dark & {
-                @include lumx-tabs-link-color(
-                    lumx-base-const("emphasis", "SELECTED"),
-                    lumx-base-const("theme", "DARK")
-                );
-            }
-        }
-    }
-}
-
-/* Tabs layout
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-tabs--layout-fixed {
-    .#{$lumx-base-prefix}-tabs__link {
-        @include lumx-tabs-link-layout("fixed");
-    }
-}
-
-/* Tabs position
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-left {
-    .#{$lumx-base-prefix}-tabs__links {
-        @include lumx-tabs-links-position(lumx-base-const("position", "LEFT"));
-    }
-}
-
-.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-center {
-    .#{$lumx-base-prefix}-tabs__links {
-        @include lumx-tabs-links-position(lumx-base-const("position", "CENTER"));
-    }
-}
-
-.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-right {
-    .#{$lumx-base-prefix}-tabs__links {
-        @include lumx-tabs-links-position(lumx-base-const("position", "RIGHT"));
-    }
-}
-
-/* Tabs link states
-   ========================================================================== */
-
-// Disabled state
-.#{$lumx-base-prefix}-tabs__link--is-disabled {
-    .#{$lumx-base-prefix}-tabs--theme-light & {
-        @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT"));
-    }
-
-    .#{$lumx-base-prefix}-tabs--theme-dark & {
-        @include lumx-state-disabled-text(lumx-base-const("theme", "DARK"));
-    }
-}
-
-/* Tab panel
-   ========================================================================== */
-
-.#{$lumx-base-prefix}-tab-panel {
-    display: none;
-    outline: none;
-
-    // Focus state
-    &[data-focus-visible-added] {
-        @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark");
-    }
-
-    // Active state
-    &--is-active {
-        display: block;
-    }
-}