@lumx/core 3.6.6-alpha.2 → 3.6.7-alpha.0

package/package.json

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

package/scss/_design-tokens.scss

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 04 Jan 2024 13:59:14 GMT
+ * Generated on Tue, 19 Mar 2024 13:36:08 GMT
  */
 
 $lumx-button-height: 36px !default;
@@ -368,7 +368,7 @@ $lumx-color-blue-L3: rgb(36 91 231 / 0.4) !default; // Base blue color with 40%
 $lumx-color-blue-L4: rgb(36 91 231 / 0.2) !default; // Base blue color with 20% opacity
 $lumx-color-blue-L5: rgb(36 91 231 / 0.1) !default; // Base blue color with 10% opacity
 $lumx-color-blue-L6: rgb(36 91 231 / 0.05) !default; // Base blue color with 5% opacity
-$lumx-color-green-D2: rgb(26 110 89) !default; // Darkest green color
+$lumx-color-green-D2: rgb(25 109 88) !default; // Darkest green color
 $lumx-color-green-D1: rgb(23 122 97) !default; // Dark green color
 $lumx-color-green-N: rgb(19 134 105) !default; // Neutral green color
 $lumx-color-green-L1: rgb(19 134 105 / 0.8) !default; // Base green color with 80% opacity
@@ -386,15 +386,15 @@ $lumx-color-yellow-L3: rgb(255 196 37 / 0.6) !default; // Base yellow color with
 $lumx-color-yellow-L4: rgb(255 196 37 / 0.48) !default; // Base yellow color with 40% opacity
 $lumx-color-yellow-L5: rgb(255 196 37 / 0.24) !default; // Base yellow color with 20% opacity
 $lumx-color-yellow-L6: rgb(255 196 37 / 0.12) !default; // Base yellow color with 10% opacity
-$lumx-color-red-D2: rgb(190 30 70) !default; // Darkest red color
+$lumx-color-red-D2: rgb(188 9 48) !default; // Darkest red color
 $lumx-color-red-D1: rgb(212 33 72) !default; // Dark red color
-$lumx-color-red-N: rgb(223 48 80) !default; // Neutral red color
-$lumx-color-red-L1: rgb(223 48 80 / 0.8) !default; // Base red color with 80% opacity
-$lumx-color-red-L2: rgb(223 48 80 / 0.6) !default; // Base red color with 60% opacity
-$lumx-color-red-L3: rgb(223 48 80 / 0.4) !default; // Base red color with 40% opacity
-$lumx-color-red-L4: rgb(223 48 80 / 0.2) !default; // Base red color with 20% opacity
-$lumx-color-red-L5: rgb(223 48 80 / 0.1) !default; // Base red color with 10% opacity
-$lumx-color-red-L6: rgb(223 48 80 / 0.05) !default; // Base red color with 5% opacity
+$lumx-color-red-N: rgb(223 42 75) !default; // Neutral red color
+$lumx-color-red-L1: rgb(223 42 75 / 0.8) !default; // Base red color with 80% opacity
+$lumx-color-red-L2: rgb(223 42 75 / 0.6) !default; // Base red color with 60% opacity
+$lumx-color-red-L3: rgb(223 42 75 / 0.4) !default; // Base red color with 40% opacity
+$lumx-color-red-L4: rgb(223 42 75 / 0.2) !default; // Base red color with 20% opacity
+$lumx-color-red-L5: rgb(223 42 75 / 0.1) !default; // Base red color with 10% opacity
+$lumx-color-red-L6: rgb(223 42 75 / 0.05) !default; // Base red color with 5% opacity
 $lumx-color-grey-N: rgb(117 117 117) !default; // Neutral grey color
 $lumx-color-grey-L1: rgb(117 117 117 / 0.8) !default; // Base grey color with 80% opacity
 $lumx-color-grey-L2: rgb(117 117 117 / 0.6) !default; // Base grey color with 60% opacity

package/scss/components/button/_index.scss

@@ -30,7 +30,7 @@
                 }
             }
 
-            &.#{$lumx-base-prefix}-button--emphasis-medium {
+            &.#{$lumx-base-prefix}-button--emphasis-medium:not(.#{$lumx-base-prefix}-button--is-selected) {
                 &.#{$lumx-base-prefix}-button--variant-button {
                     @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key);
                 }
@@ -40,6 +40,16 @@
                 }
             }
 
+            &.#{$lumx-base-prefix}-button--emphasis-medium.#{$lumx-base-prefix}-button--is-selected {
+                &.#{$lumx-base-prefix}-button--variant-button {
+                    @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "button", $key);
+                }
+
+                &.#{$lumx-base-prefix}-button--variant-icon {
+                    @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "icon", $key);
+                }
+            }
+
             &.#{$lumx-base-prefix}-button--emphasis-low {
                 &.#{$lumx-base-prefix}-button--variant-button {
                     @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key);

package/scss/components/date-picker/_index.scss

@@ -14,6 +14,12 @@
         text-align: center;
     }
 
+    &__year {
+        input[type="number"] {
+            width: 4ch; 
+        }
+    }
+
     &__calendar {
         padding: $lumx-spacing-unit * 2;
         padding-top: 0;

package/scss/components/dialog/_index.scss

@@ -40,6 +40,10 @@
         background-color: lumx-color-variant("dark", "L1");
         animation: lumx-dialog-overlay-show $lumx-dialog-transition-duration;
 
+        @include mq($until: desktop) {
+            display: none;
+        }
+
         @media (prefers-reduced-motion: reduce) {
             animation: none;
         }
@@ -51,7 +55,21 @@
         display: flex;
         flex-direction: column;
         transform: translateY(0);
-        animation: lumx-dialog-show $lumx-dialog-transition-duration;
+
+        #{$self}--is-hidden & {
+            @include mq($until: desktop) {
+                transform: translateY(100%);
+            }
+        }
+
+        @include mq($until: desktop) {
+            transition: transform $lumx-dialog-transition-duration cubic-bezier(0.23, 1, 0.32, 1);
+            animation: lumx-dialog-show-mobile $lumx-dialog-transition-duration cubic-bezier(0.23, 1, 0.32, 1);
+        }
+
+        @include mq($from: desktop) {
+            animation: lumx-dialog-show-desktop $lumx-dialog-transition-duration;
+        }
 
         @media (prefers-reduced-motion: reduce) {
             animation: none;
@@ -59,17 +77,26 @@
     }
 
     &__wrapper {
-        @include lumx-elevation(5);
-
         position: relative;
         display: flex;
         flex-direction: column;
-        max-height: 100%;
         background-color: lumx-color-variant("light", "N");
-        border-radius: var(--lumx-border-radius);
+
+        @include mq($until: desktop) {
+            min-height: 100%;
+        }
+
+        @include mq($from: desktop) {
+            @include lumx-elevation(5);
+
+            max-height: 100%;
+            border-radius: var(--lumx-border-radius);
+        }
 
         #{$self}--size-huge & {
-            height: 100%;
+            @include mq($from: desktop) {
+                min-height: 100%;
+            }
         }
     }
 
@@ -118,7 +145,17 @@
     }
 }
 
-@keyframes lumx-dialog-show {
+@keyframes lumx-dialog-show-mobile {
+    0% {
+        transform: translateY(100%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes lumx-dialog-show-desktop {
     0% {
         opacity: 0;
         transform: translateY(-24px);
@@ -136,10 +173,10 @@
 @each $key, $size in $lumx-dialog-sizes {
     .#{$lumx-base-prefix}-dialog--size-#{$key} .#{$lumx-base-prefix}-dialog__container {
         @include mq($until: desktop) {
-            top: $lumx-dialog-offset-portable;
-            right: $lumx-dialog-offset-portable;
-            left: $lumx-dialog-offset-portable;
-            height: calc(100% - 48px);
+            top: 0;
+            right: 0;
+            left: 0;
+            height: 100%;
         }
 
         @include mq($from: desktop) {
@@ -154,10 +191,10 @@
 
 .#{$lumx-base-prefix}-dialog--size-huge .#{$lumx-base-prefix}-dialog__container {
     @include mq($until: desktop) {
-        top: $lumx-dialog-offset-portable;
-        right: $lumx-dialog-offset-portable;
-        bottom: $lumx-dialog-offset-portable;
-        left: $lumx-dialog-offset-portable;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
     }
 
     @include mq($from: desktop) {

package/scss/components/dialog/_variables.scss

@@ -4,5 +4,5 @@ $lumx-dialog-sizes: (
     "big": 800px,
 );
 $lumx-dialog-offset-desktop: 48px;
-$lumx-dialog-offset-portable: 24px;
+$lumx-dialog-offset-portable: 0px;
 $lumx-dialog-transition-duration: 400ms;

package/scss/components/message/_index.scss

@@ -22,6 +22,10 @@
         flex: 1 1 auto;
         color: lumx-color-variant("dark", "N");
     }
+
+    &__close-button {
+        flex-shrink: 0;
+    }
 }
 
 /* Message kind

package/scss/core/state/_mixins.scss

@@ -42,7 +42,7 @@
         @if $color == "yellow" {
             color: lumx-color-variant("dark", "L1");
         } @else {
-            color: lumx-color-variant($color, "N");
+            color: lumx-color-variant($color, "D2");
         }
     } @else if $state == lumx-base-const("state", "HOVER") {
         background-color: lumx-color-variant($color, "L4");
@@ -84,7 +84,7 @@
 
 @mixin lumx-state-low($state, $color) {
     @if $state == lumx-base-const("state", "DEFAULT") {
-        color: lumx-color-variant($color, "N");
+        color: lumx-color-variant($color, "D2");
         background-color: transparent;
     } @else if $state == lumx-base-const("state", "HOVER") {
         background-color: lumx-color-variant($color, "L5");