@lumx/core 3.0.7 → 3.1.0

package/dist/package.json

@@ -0,0 +1,81 @@
+{
+    "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.0",
+    "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

@@ -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 → dist/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/dist/scss/components/progress/_variables.scss

@@ -0,0 +1,12 @@
+@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 → dist/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";

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.1.0",
     "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/src/css/_retro-compat-v2.css

@@ -0,0 +1,117 @@
+/**
+ * List of deprecated v2 variables that have been removed or renamed.
+ * Warning: These will be removed in the next major version.
+ */
+:root {
+    --lumx-button-font-weight: var(--lumx-typography-font-weight-bold);
+    --lumx-button-text-transform: var(--lumx-material-button-text-transform);
+    --lumx-button-variant-icon-border-radius: var(--lumx-material-button-variant-icon-border-radius);
+    --lumx-button-size-m-font-size: var(--lumx-typography-custom-button-size-m-font-size);
+    --lumx-button-size-s-font-size: var(--lumx-typography-custom-button-size-s-font-size);
+    --lumx-checkbox-wrapper-size: var(--lumx-material-checkbox-wrapper-size);
+    --lumx-checkbox-control-size: var(--lumx-material-checkbox-control-size);
+    --lumx-chip-size-m-height: var(--lumx-material-chip-size-m-height);
+    --lumx-chip-size-m-border-radius: var(--lumx-material-chip-size-m-border-radius);
+    --lumx-chip-size-m-padding-vertical: var(--lumx-material-chip-size-m-padding-vertical);
+    --lumx-chip-size-s-height: var(--lumx-material-chip-size-s-height);
+    --lumx-chip-size-s-border-radius: var(--lumx-material-chip-size-s-border-radius);
+    --lumx-chip-size-s-padding-vertical: var(--lumx-material-chip-size-s-padding-vertical);
+    --lumx-input-helper-font-size: var(--lumx-material-input-helper-font-size);
+    --lumx-input-helper-font-weight: var(--lumx-material-input-helper-font-weight);
+    --lumx-input-helper-line-height: var(--lumx-material-input-helper-line-height);
+    --lumx-input-label-font-size: var(--lumx-material-input-label-font-size);
+    --lumx-input-label-font-weight: var(--lumx-material-input-label-font-weight);
+    --lumx-input-label-line-height: var(--lumx-material-input-label-line-height);
+    --lumx-radio-button-wrapper-size: var(--lumx-material-radio-button-wrapper-size);
+    --lumx-radio-button-control-size: var(--lumx-material-radio-button-control-size);
+    --lumx-radio-button-indicator-size: var(--lumx-material-radio-button-indicator-size);
+    --lumx-switch-wrapper-width: var(--lumx-material-switch-wrapper-width);
+    --lumx-switch-wrapper-height: var(--lumx-material-switch-wrapper-height);
+    --lumx-switch-control-width: var(--lumx-material-switch-control-width);
+    --lumx-switch-control-height: var(--lumx-material-switch-control-height);
+    --lumx-switch-indicator-size: var(--lumx-material-switch-indicator-size);
+    --lumx-switch-indicator-offset: var(--lumx-material-switch-indicator-offset);
+    --lumx-text-field-padding-top: var(--lumx-material-text-field-padding-top);
+    --lumx-text-field-padding-bottom: var(--lumx-material-text-field-padding-bottom);
+    --lumx-text-field-header-margin-bottom: var(--lumx-material-text-field-header-wrapper-margin-bottom);
+    --lumx-text-field-label-font-size: var(--lumx-material-text-field-header-label-font-size);
+    --lumx-text-field-label-font-weight: var(--lumx-material-text-field-header-label-font-weight);
+    --lumx-text-field-label-line-height: var(--lumx-material-text-field-header-label-line-height);
+    --lumx-text-field-wrapper-min-height: var(--lumx-text-field-input-min-height);
+    --lumx-text-field-wrapper-border-radius: var(--lumx-text-field-input-border-radius);
+    --lumx-text-field-wrapper-padding-vertical: var(--lumx-spacing-unit-tiny);
+    --lumx-text-field-wrapper-padding-horizontal: var(--lumx-text-field-input-padding-horizontal);
+    --lumx-text-field-state-default-border-top-width: var(--lumx-text-field-state-default-input-border-top-width);
+    --lumx-text-field-state-default-border-right-width: var(--lumx-text-field-state-default-input-border-right-width);
+    --lumx-text-field-state-default-border-bottom-width: var(--lumx-text-field-state-default-input-border-bottom-width);
+    --lumx-text-field-state-default-border-left-width: var(--lumx-text-field-state-default-input-border-left-width);
+    --lumx-text-field-state-default-theme-light-background-color: var(
+        --lumx-text-field-state-default-theme-light-input-background-color
+    );
+    --lumx-text-field-state-default-theme-light-border-color: var(
+        --lumx-text-field-state-default-theme-light-input-border-color
+    );
+    --lumx-text-field-state-default-theme-dark-background-color: var(
+        --lumx-text-field-state-default-theme-dark-input-background-color
+    );
+    --lumx-text-field-state-default-theme-dark-border-color: var(
+        --lumx-text-field-state-default-theme-dark-input-border-color
+    );
+    --lumx-text-field-state-hover-theme-light-background-color: var(
+        --lumx-text-field-state-hover-theme-light-input-background-color
+    );
+    --lumx-text-field-state-hover-theme-dark-background-color: var(
+        --lumx-text-field-state-hover-theme-dark-input-background-color
+    );
+    --lumx-text-field-state-focus-border-top-width: var(--lumx-text-field-state-focus-input-border-top-width);
+    --lumx-text-field-state-focus-border-right-width: var(--lumx-text-field-state-focus-input-border-right-width);
+    --lumx-text-field-state-focus-border-bottom-width: var(--lumx-text-field-state-focus-input-border-bottom-width);
+    --lumx-text-field-state-focus-border-left-width: var(--lumx-text-field-state-focus-input-border-left-width);
+    --lumx-text-field-state-focus-theme-light-background-color: var(
+        --lumx-text-field-state-focus-theme-light-input-background-color
+    );
+    --lumx-text-field-state-focus-theme-light-border-color: var(
+        --lumx-text-field-state-focus-theme-light-input-border-color
+    );
+    --lumx-text-field-state-focus-theme-dark-background-color: var(
+        --lumx-text-field-state-focus-theme-dark-input-background-color
+    );
+    --lumx-text-field-state-focus-theme-dark-border-color: var(
+        --lumx-text-field-state-focus-theme-dark-input-border-color
+    );
+    --lumx-text-field-input-icon-size: var(--lumx-size-xs);
+    --lumx-text-field-input-font-size: var(--lumx-material-text-field-input-content-font-size);
+    --lumx-text-field-input-font-weight: var(--lumx-material-text-field-input-content-font-weight);
+    --lumx-text-field-input-line-height: var(--lumx-material-text-field-input-content-line-height);
+    --lumx-text-field-input-validity-size: var(--lumx-size-xxs);
+    --lumx-text-field-input-clear-size: var(--lumx-size-s);
+    --lumx-progress-bounce: var(--lumx-material-progress-bounce);
+    --lumx-progress-rotate: var(--lumx-material-progress-rotate);
+    --lumx-typography-style-display1-font-size: var(--lumx-typography-interface-display1-font-size);
+    --lumx-typography-style-display1-font-weight: var(--lumx-typography-interface-display1-font-weight);
+    --lumx-typography-style-display1-line-height: var(--lumx-typography-interface-display1-line-height);
+    --lumx-typography-style-headline-font-size: var(--lumx-typography-interface-headline-font-size);
+    --lumx-typography-style-headline-font-weight: var(--lumx-typography-interface-headline-font-weight);
+    --lumx-typography-style-headline-line-height: var(--lumx-typography-interface-headline-line-height);
+    --lumx-typography-style-title-font-size: var(--lumx-typography-interface-title-font-size);
+    --lumx-typography-style-title-font-weight: var(--lumx-typography-interface-title-font-weight);
+    --lumx-typography-style-title-line-height: var(--lumx-typography-interface-title-line-height);
+    --lumx-typography-style-subtitle2-font-size: var(--lumx-typography-interface-subtitle2-font-size);
+    --lumx-typography-style-subtitle2-font-weight: var(--lumx-typography-interface-subtitle2-font-weight);
+    --lumx-typography-style-subtitle2-line-height: var(--lumx-typography-interface-subtitle2-line-height);
+    --lumx-typography-style-subtitle1-font-size: var(--lumx-typography-interface-subtitle1-font-size);
+    --lumx-typography-style-subtitle1-font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
+    --lumx-typography-style-subtitle1-line-height: var(--lumx-typography-interface-subtitle1-line-height);
+    --lumx-typography-style-body2-font-size: var(--lumx-typography-interface-body2-font-size);
+    --lumx-typography-style-body2-font-weight: var(--lumx-typography-interface-body2-font-weight);
+    --lumx-typography-style-body2-line-height: var(--lumx-typography-interface-body2-line-height);
+    --lumx-typography-style-body1-font-size: var(--lumx-typography-interface-body1-font-size);
+    --lumx-typography-style-body1-font-weight: var(--lumx-typography-interface-body1-font-weight);
+    --lumx-typography-style-body1-line-height: var(--lumx-typography-interface-body1-line-height);
+    --lumx-typography-style-caption-font-size: var(--lumx-typography-interface-caption-font-size);
+    --lumx-typography-style-caption-font-weight: var(--lumx-typography-interface-caption-font-weight);
+    --lumx-typography-style-caption-line-height: var(--lumx-typography-interface-caption-line-height);
+    --lumx-typography-style-overline-font-size: var(--lumx-typography-interface-overline-font-size);
+    --lumx-typography-style-overline-font-weight: var(--lumx-typography-interface-overline-font-weight);
+    --lumx-typography-style-overline-line-height: var(--lumx-typography-interface-overline-line-height);
+}