@lumx/core 3.9.6-alpha.2 → 3.9.6-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/css/design-tokens.css +4 -4
  2. package/js/constants/design-tokens.js +7 -7
  3. package/js/constants/design-tokens.min.js +1 -1
  4. package/js/constants/design-tokens.min.js.map +1 -1
  5. package/js/constants/design-tokens.ts +4 -4
  6. package/lumx.css +1 -1
  7. package/lumx.min.css +1 -1
  8. package/package.json +1 -1
  9. package/scss/_design-tokens.scss +4 -4
  10. package/scss/components/button/_index.scss +17 -15
  11. package/scss/components/button/_mixins.scss +7 -5
  12. package/scss/components/date-picker/_index.scss +0 -4
package/package.json CHANGED
@@ -40,7 +40,7 @@
40
40
  "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
41
41
  },
42
42
  "sideEffects": false,
43
- "version": "3.9.6-alpha.2",
43
+ "version": "3.9.6-alpha.4",
44
44
  "devDependencies": {
45
45
  "@babel/core": "^7.18.13",
46
46
  "@babel/plugin-proposal-class-properties": "^7.18.6",
package/scss/_design-tokens.scss CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  /**
4
4
  * Do not edit directly
5
- * Generated on Wed, 04 Dec 2024 10:53:03 GMT
5
+ * Generated on Fri, 06 Dec 2024 13:46:59 GMT
6
6
  */
7
7
 
8
8
  $lumx-button-height: 36px !default;
@@ -79,7 +79,7 @@ $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !de
79
79
  $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
80
80
  $lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-L1) !default;
81
81
  $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
82
- $lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
82
+ $lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
83
83
  $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
84
84
  $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
85
85
  $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
@@ -87,7 +87,7 @@ $lumx-button-emphasis-selected-state-default-theme-light-border-color: transpare
87
87
  $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
88
88
  $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
89
89
  $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
90
- $lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
90
+ $lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
91
91
  $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
92
92
  $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
93
93
  $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
@@ -95,7 +95,7 @@ $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent
95
95
  $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
96
96
  $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
97
97
  $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
98
- $lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
98
+ $lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default; // deprecated (use base emphasis padding)
99
99
  $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
100
100
  $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
101
101
  $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
package/scss/components/button/_index.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
  }
32
32
 
33
- &.#{$lumx-base-prefix}-button--emphasis-medium:not(.#{$lumx-base-prefix}-button--is-selected) {
33
+ &.#{$lumx-base-prefix}-button--emphasis-medium {
34
34
  &.#{$lumx-base-prefix}-button--variant-button {
35
35
  @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key);
36
36
  }
@@ -40,16 +40,6 @@
40
40
  }
41
41
  }
42
42
 
43
- &.#{$lumx-base-prefix}-button--emphasis-medium.#{$lumx-base-prefix}-button--is-selected {
44
- &.#{$lumx-base-prefix}-button--variant-button {
45
- @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "button", $key);
46
- }
47
-
48
- &.#{$lumx-base-prefix}-button--variant-icon {
49
- @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"), "icon", $key);
50
- }
51
- }
52
-
53
43
  &.#{$lumx-base-prefix}-button--emphasis-low {
54
44
  &.#{$lumx-base-prefix}-button--variant-button {
55
45
  @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key);
@@ -107,16 +97,28 @@
107
97
 
108
98
  @each $key, $color in $lumx-color-palette {
109
99
  .#{$lumx-base-prefix}-button--color-#{$key} {
110
- &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-medium {
100
+ &.#{$lumx-base-prefix}-button--emphasis-medium {
111
101
  @include lumx-button-color(lumx-base-const("emphasis", "MEDIUM"), $key);
112
102
  }
113
103
 
114
- &:not(.#{$lumx-base-prefix}-button--is-selected).#{$lumx-base-prefix}-button--emphasis-low {
104
+ &.#{$lumx-base-prefix}-button--emphasis-low {
115
105
  @include lumx-button-color(lumx-base-const("emphasis", "LOW"), $key);
116
106
  }
107
+ }
108
+ }
117
109
 
118
- &.#{$lumx-base-prefix}-button--is-selected {
119
- @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
110
+
111
+ /* Button selected
112
+ ========================================================================== */
113
+
114
+ .#{$lumx-base-prefix}-button--is-selected {
115
+ @include lumx-button-size(lumx-base-const("emphasis", "SELECTED"));
116
+
117
+ @each $key, $color in $lumx-color-palette {
118
+ &.#{$lumx-base-prefix}-button--color-#{$key} {
119
+ &.#{$lumx-base-prefix}-button--is-selected {
120
+ @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key);
121
+ }
120
122
  }
121
123
  }
122
124
  }
package/scss/components/button/_mixins.scss CHANGED
@@ -28,11 +28,13 @@
28
28
  }
29
29
  }
30
30
 
31
- @mixin lumx-button-size($emphasis, $variant, $size) {
32
- @if $size == lumx-base-const("size", "M") {
33
- height: var(--lumx-button-height);
34
- } @else if $size == lumx-base-const("size", "S") {
35
- height: calc(var(--lumx-button-height) / 1.5);
31
+ @mixin lumx-button-size($emphasis, $variant: null, $size: null) {
32
+ @if $variant {
33
+ @if $size == lumx-base-const("size", "M") {
34
+ height: var(--lumx-button-height);
35
+ } @else if $size == lumx-base-const("size", "S") {
36
+ height: calc(var(--lumx-button-height) / 1.5);
37
+ }
36
38
  }
37
39
 
38
40
  @if $variant == "button" {
package/scss/components/date-picker/_index.scss CHANGED
@@ -65,9 +65,5 @@
65
65
  &--is-today span {
66
66
  font-weight: var(--lumx-button-font-weight);
67
67
  }
68
-
69
- &--is-selected {
70
- @include lumx-button-is-selected(lumx-base-const("theme", "LIGHT"));
71
- }
72
68
  }
73
69
  }