@lumx/core 3.9.5 → 3.9.6-alpha.1

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 (14) hide show
  1. package/css/design-tokens.css +52 -28
  2. package/js/constants/design-tokens.js +381 -39
  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 +195 -39
  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 +116 -28
  10. package/scss/components/chip/_index.scss +75 -30
  11. package/scss/components/list/_mixins.scss +10 -6
  12. package/scss/components/navigation/_index.scss +43 -134
  13. package/scss/components/side-navigation/_index.scss +1 -1
  14. package/scss/core/state/_mixins.scss +35 -8
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.5",
43
+ "version": "3.9.6-alpha.1",
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 Tue, 19 Mar 2024 13:36:08 GMT
5
+ * Generated on Tue, 03 Dec 2024 14:32:53 GMT
6
6
  */
7
7
 
8
8
  $lumx-button-height: 36px !default;
@@ -80,29 +80,44 @@ $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-c
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
82
  $lumx-button-emphasis-selected-state-default-padding-horizontal: var(--lumx-spacing-unit-big) !default;
83
- $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
84
- $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
83
+ $lumx-button-emphasis-selected-state-default-border-width: 1px !default;
84
+ $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
85
85
  $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
86
- $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
86
+ $lumx-button-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
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
- $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
89
+ $lumx-button-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
90
90
  $lumx-button-emphasis-selected-state-hover-padding-horizontal: var(--lumx-spacing-unit-big) !default;
91
- $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
92
- $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
91
+ $lumx-button-emphasis-selected-state-hover-border-width: 1px !default;
92
+ $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
93
93
  $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
94
- $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
94
+ $lumx-button-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
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
- $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
97
+ $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
98
98
  $lumx-button-emphasis-selected-state-active-padding-horizontal: var(--lumx-spacing-unit-big) !default;
99
- $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
100
- $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
99
+ $lumx-button-emphasis-selected-state-active-border-width: 1px !default;
100
+ $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
101
101
  $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
102
- $lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
102
+ $lumx-button-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
103
103
  $lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
104
104
  $lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
105
- $lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
105
+ $lumx-button-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
106
+ $lumx-chip-emphasis-selected-state-default-border-width: 1px !default;
107
+ $lumx-chip-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
108
+ $lumx-chip-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
109
+ $lumx-chip-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
110
+ $lumx-chip-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
111
+ $lumx-chip-emphasis-selected-state-hover-border-width: 1px !default;
112
+ $lumx-chip-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
113
+ $lumx-chip-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
114
+ $lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
115
+ $lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
116
+ $lumx-chip-emphasis-selected-state-active-border-width: 1px !default;
117
+ $lumx-chip-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
118
+ $lumx-chip-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
119
+ $lumx-chip-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
120
+ $lumx-chip-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
106
121
  $lumx-material-button-text-transform: none !default;
107
122
  $lumx-material-checkbox-wrapper-size: 20px !default;
108
123
  $lumx-material-checkbox-control-size: 16px !default;
@@ -189,11 +204,11 @@ $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lum
189
204
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
190
205
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
191
206
  $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-L1) !default;
192
- $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0 !default;
193
- $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0 !default;
194
- $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0 !default;
195
- $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0 !default;
196
- $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
207
+ $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 1px !default;
208
+ $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 1px !default;
209
+ $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 1px !default;
210
+ $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 1px !default;
211
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
197
212
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
198
213
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
199
214
  $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -205,11 +220,11 @@ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var
205
220
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
206
221
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent !default;
207
222
  $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
208
- $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0 !default;
209
- $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0 !default;
210
- $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0 !default;
211
- $lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0 !default;
212
- $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
223
+ $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 1px !default;
224
+ $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 1px !default;
225
+ $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 1px !default;
226
+ $lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 1px !default;
227
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
213
228
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
214
229
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
215
230
  $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -221,11 +236,11 @@ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(-
221
236
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
222
237
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L4) !default;
223
238
  $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
224
- $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0 !default;
225
- $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0 !default;
226
- $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0 !default;
227
- $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0 !default;
228
- $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
239
+ $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 1px !default;
240
+ $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 1px !default;
241
+ $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 1px !default;
242
+ $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 1px !default;
243
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4) !default;
229
244
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
230
245
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
231
246
  $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2) !default;
@@ -237,6 +252,15 @@ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(
237
252
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
238
253
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
239
254
  $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
255
+ $lumx-side-navigation-item-emphasis-selected-state-default-border-width: 1px !default;
256
+ $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
257
+ $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6) !default;
258
+ $lumx-side-navigation-item-emphasis-selected-state-hover-border-width: 1px !default;
259
+ $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
260
+ $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5) !default;
261
+ $lumx-side-navigation-item-emphasis-selected-state-active-border-width: 1px !default;
262
+ $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
263
+ $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L5) !default;
240
264
  $lumx-tabs-link-height: 48px !default;
241
265
  $lumx-tabs-link-border-radius: 0 !default;
242
266
  $lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;
@@ -742,6 +766,43 @@ $lumx-design-tokens: (
742
766
  )
743
767
  )
744
768
  ),
769
+ "chip": (
770
+ "emphasis-selected": (
771
+ "state-default": (
772
+ "border-width": $lumx-chip-emphasis-selected-state-default-border-width,
773
+ "theme-light": (
774
+ "border-color": $lumx-chip-emphasis-selected-state-default-theme-light-border-color,
775
+ "background-color": $lumx-chip-emphasis-selected-state-default-theme-light-background-color
776
+ ),
777
+ "theme-dark": (
778
+ "border-color": $lumx-chip-emphasis-selected-state-default-theme-dark-border-color,
779
+ "background-color": $lumx-chip-emphasis-selected-state-default-theme-dark-background-color
780
+ )
781
+ ),
782
+ "state-hover": (
783
+ "border-width": $lumx-chip-emphasis-selected-state-hover-border-width,
784
+ "theme-light": (
785
+ "border-color": $lumx-chip-emphasis-selected-state-hover-theme-light-border-color,
786
+ "background-color": $lumx-chip-emphasis-selected-state-hover-theme-light-background-color
787
+ ),
788
+ "theme-dark": (
789
+ "border-color": $lumx-chip-emphasis-selected-state-hover-theme-dark-border-color,
790
+ "background-color": $lumx-chip-emphasis-selected-state-hover-theme-dark-background-color
791
+ )
792
+ ),
793
+ "state-active": (
794
+ "border-width": $lumx-chip-emphasis-selected-state-active-border-width,
795
+ "theme-light": (
796
+ "border-color": $lumx-chip-emphasis-selected-state-active-theme-light-border-color,
797
+ "background-color": $lumx-chip-emphasis-selected-state-active-theme-light-background-color
798
+ ),
799
+ "theme-dark": (
800
+ "border-color": $lumx-chip-emphasis-selected-state-active-theme-dark-border-color,
801
+ "background-color": $lumx-chip-emphasis-selected-state-active-theme-dark-background-color
802
+ )
803
+ )
804
+ )
805
+ ),
745
806
  "material": (
746
807
  "button": (
747
808
  "text-transform": $lumx-material-button-text-transform,
@@ -1026,6 +1087,33 @@ $lumx-design-tokens: (
1026
1087
  )
1027
1088
  )
1028
1089
  ),
1090
+ "side-navigation": (
1091
+ "item": (
1092
+ "emphasis-selected": (
1093
+ "state-default": (
1094
+ "border-width": $lumx-side-navigation-item-emphasis-selected-state-default-border-width,
1095
+ "theme-light": (
1096
+ "border-color": $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-border-color,
1097
+ "background-color": $lumx-side-navigation-item-emphasis-selected-state-default-theme-light-background-color
1098
+ )
1099
+ ),
1100
+ "state-hover": (
1101
+ "border-width": $lumx-side-navigation-item-emphasis-selected-state-hover-border-width,
1102
+ "theme-light": (
1103
+ "border-color": $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-border-color,
1104
+ "background-color": $lumx-side-navigation-item-emphasis-selected-state-hover-theme-light-background-color
1105
+ )
1106
+ ),
1107
+ "state-active": (
1108
+ "border-width": $lumx-side-navigation-item-emphasis-selected-state-active-border-width,
1109
+ "theme-light": (
1110
+ "border-color": $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-border-color,
1111
+ "background-color": $lumx-side-navigation-item-emphasis-selected-state-active-theme-light-background-color
1112
+ )
1113
+ )
1114
+ )
1115
+ )
1116
+ ),
1029
1117
  "tabs": (
1030
1118
  "link": (
1031
1119
  "height": $lumx-tabs-link-height,
package/scss/components/chip/_index.scss CHANGED
@@ -70,17 +70,16 @@
70
70
  .#{$lumx-base-prefix}-chip--is-unselected.#{$lumx-base-prefix}-chip--color-#{$key} {
71
71
  @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), $key);
72
72
 
73
- &.#{$lumx-base-prefix}-chip--is-clickable:hover {
74
- @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), $key);
75
- }
76
-
77
- &.#{$lumx-base-prefix}-chip--is-clickable:active {
78
- @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), $key);
79
- }
73
+ &.#{$lumx-base-prefix}-chip--is-clickable {
74
+ &:hover,
75
+ &[data-lumx-hover] {
76
+ @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), $key);
77
+ }
80
78
 
81
- &.#{$lumx-base-prefix}-chip--is-clickable[data-focus-visible-added],
82
- &.#{$lumx-base-prefix}-chip--is-highlighted {
83
- @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), $key);
79
+ &:active,
80
+ &[data-lumx-active] {
81
+ @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), $key);
82
+ }
84
83
  }
85
84
 
86
85
  @if $key == "dark" {
@@ -89,38 +88,84 @@
89
88
  }
90
89
  }
91
90
  }
91
+
92
+ .#{$lumx-base-prefix}-chip--color-#{$key} {
93
+ &[data-focus-visible-added], &.#{$lumx-base-prefix}-chip--is-highlighted {
94
+ @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), $key);
95
+ }
96
+ }
92
97
  }
93
98
 
94
99
  .#{$lumx-base-prefix}-chip--is-selected {
95
100
  &.#{$lumx-base-prefix}-chip--color-dark {
96
- @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"));
97
-
98
- &.#{$lumx-base-prefix}-chip--is-clickable:hover {
99
- @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
100
- }
101
+ @include lumx-state-as-selected(
102
+ lumx-base-const("state", "DEFAULT"),
103
+ lumx-base-const("theme", "LIGHT"),
104
+ "chip"
105
+ );
106
+
107
+ &.#{$lumx-base-prefix}-chip--is-clickable {
108
+ &:hover,
109
+ &[data-lumx-hover] {
110
+ @include lumx-state-as-selected(
111
+ lumx-base-const("state", "HOVER"),
112
+ lumx-base-const("theme", "LIGHT"),
113
+ "chip"
114
+ );
115
+ }
101
116
 
102
- &.#{$lumx-base-prefix}-chip--is-clickable:active {
103
- @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"));
104
- }
117
+ &:active,
118
+ &[data-lumx-active] {
119
+ @include lumx-state-as-selected(
120
+ lumx-base-const("state", "ACTIVE"),
121
+ lumx-base-const("theme", "LIGHT"),
122
+ "chip"
123
+ );
124
+ }
105
125
 
106
- &.#{$lumx-base-prefix}-chip--is-clickable[data-focus-visible-added] {
107
- @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
126
+ &[data-focus-visible-added] {
127
+ @include lumx-state-as-selected(
128
+ lumx-base-const("state", "FOCUS"),
129
+ lumx-base-const("theme", "LIGHT"),
130
+ "chip"
131
+ );
132
+ }
108
133
  }
109
134
  }
110
135
 
111
136
  &.#{$lumx-base-prefix}-chip--color-light {
112
- @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK"));
113
-
114
- &.#{$lumx-base-prefix}-chip--is-clickable:hover {
115
- @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK"));
116
- }
137
+ @include lumx-state-as-selected(
138
+ lumx-base-const("state", "DEFAULT"),
139
+ lumx-base-const("theme", "DARK"),
140
+ "chip"
141
+ );
142
+
143
+ &.#{$lumx-base-prefix}-chip--is-clickable {
144
+ &:hover,
145
+ &[data-lumx-hover] {
146
+ @include lumx-state-as-selected(
147
+ lumx-base-const("state", "HOVER"),
148
+ lumx-base-const("theme", "DARK"),
149
+ "chip"
150
+ );
151
+ }
117
152
 
118
- &.#{$lumx-base-prefix}-chip--is-clickable:active {
119
- @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "DARK"));
120
- }
153
+ &:active,
154
+ &[data-lumx-active] {
155
+ @include lumx-state-as-selected(
156
+ lumx-base-const("state", "ACTIVE"),
157
+ lumx-base-const("theme", "DARK"),
158
+ "chip"
159
+ );
160
+ }
121
161
 
122
- &.#{$lumx-base-prefix}-chip--is-clickable[data-focus-visible-added] {
123
- @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK"));
162
+ &[data-focus-visible-added] {
163
+ @include lumx-state-as-selected(
164
+ lumx-base-const("state", "FOCUS"),
165
+ lumx-base-const("theme", "DARK"),
166
+ "chip"
167
+ );
168
+ }
124
169
  }
125
170
  }
126
171
  }
package/scss/components/list/_mixins.scss CHANGED
@@ -35,11 +35,13 @@
35
35
  }
36
36
 
37
37
  &:hover,
38
+ &[data-lumx-hover],
38
39
  &[data-focus-visible-added] {
39
40
  @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark");
40
41
  }
41
42
 
42
- &:active {
43
+ &:active,
44
+ &[data-lumx-active], {
43
45
  @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark");
44
46
  }
45
47
  }
@@ -54,16 +56,18 @@
54
56
  }
55
57
  }
56
58
 
57
- @mixin lumx-list-item-selected() {
58
- @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"));
59
+ @mixin lumx-list-item-selected($component: null) {
60
+ @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"), $component);
59
61
 
60
62
  &:hover,
63
+ &[data-lumx-hover],
61
64
  &[data-focus-visible-added] {
62
- @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"));
65
+ @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"), $component);
63
66
  }
64
67
 
65
- &:active {
66
- @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"));
68
+ &:active,
69
+ &[data-lumx-active], {
70
+ @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"), $component);
67
71
  }
68
72
  }
69
73
 
package/scss/components/navigation/_index.scss CHANGED
@@ -5,8 +5,6 @@
5
5
  /* Navigation Item
6
6
  ========================================================================== */
7
7
  .#{$lumx-base-prefix}-navigation-item {
8
- $self: &;
9
-
10
8
  display: flex;
11
9
  flex-direction: row;
12
10
  align-items: center;
@@ -27,160 +25,71 @@
27
25
  outline: none;
28
26
 
29
27
  @include lumx-typography("navigation-item", "custom");
30
- @include lumx-navigation-link-borders(lumx-base-const("emphasis", "LOW"), lumx-base-const("state", "DEFAULT"));
31
-
32
- .#{$lumx-base-prefix}-navigation-item__label {
33
- overflow: hidden;
34
- text-overflow: ellipsis;
35
- white-space: nowrap;
36
- }
37
-
38
- .#{$lumx-base-prefix}-navigation-item__icon {
39
- margin-right: $lumx-spacing-unit;
40
- }
28
+ }
41
29
 
42
- &:hover,
43
- &.focus-visible {
44
- @include lumx-navigation-link-borders(
45
- lumx-base-const("emphasis", "LOW"),
46
- lumx-base-const("state", "HOVER")
47
- );
30
+ &__label {
31
+ overflow: hidden;
32
+ text-overflow: ellipsis;
33
+ white-space: nowrap;
34
+ }
48
35
 
49
- &[data-focus-visible-added] {
50
- @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT"));
51
- }
52
- }
36
+ &__icon {
37
+ margin-right: $lumx-spacing-unit;
38
+ }
39
+ }
53
40
 
54
- &:active {
55
- @include lumx-navigation-link-borders(
56
- lumx-base-const("emphasis", "LOW"),
57
- lumx-base-const("state", "ACTIVE")
41
+ // Variants on emphasis, theme and states
42
+ @each $emphasis, $selector in (
43
+ "emphasis-low": ".#{$lumx-base-prefix}-navigation-item__link",
44
+ "emphasis-selected": ".#{$lumx-base-prefix}-navigation-item__link--is-selected",
45
+ ) {
46
+ @each $theme in ("theme-light", "theme-dark") {
47
+ .#{$lumx-base-prefix}-navigation-item--#{$theme} > #{$selector} {
48
+ // Default state
49
+ @include lumx-navigation-link-colors(
50
+ $emphasis,
51
+ lumx-base-const("state", "DEFAULT"),
52
+ $theme
58
53
  );
59
- }
60
-
61
- &--is-selected {
62
54
  @include lumx-navigation-link-borders(
63
- lumx-base-const("emphasis", "SELECTED"),
55
+ $emphasis,
64
56
  lumx-base-const("state", "DEFAULT")
65
57
  );
66
58
 
67
- &:hover,
68
- &:focus {
69
- @include lumx-navigation-link-borders(
70
- lumx-base-const("emphasis", "SELECTED"),
71
- lumx-base-const("state", "HOVER")
72
- );
73
- }
74
-
75
- &:active {
76
- @include lumx-navigation-link-borders(
77
- lumx-base-const("emphasis", "SELECTED"),
78
- lumx-base-const("state", "ACTIVE")
59
+ // Focus state
60
+ &[data-focus-visible-added] {
61
+ @include lumx-state-as-selected(
62
+ lumx-base-const("state", "FOCUS"),
63
+ $theme
79
64
  );
80
65
  }
81
- }
82
- }
83
-
84
- &--theme-dark {
85
- .#{$lumx-base-prefix}-navigation-item__link {
86
- @include lumx-navigation-link-colors(
87
- lumx-base-const("emphasis", "LOW"),
88
- lumx-base-const("state", "DEFAULT"),
89
- lumx-base-const("theme", "DARK")
90
- );
91
66
 
67
+ // Hover state
92
68
  &:hover,
93
- &.focus-visible {
69
+ &[data-lumx-hover], {
94
70
  @include lumx-navigation-link-colors(
95
- lumx-base-const("emphasis", "LOW"),
71
+ $emphasis,
96
72
  lumx-base-const("state", "HOVER"),
97
- lumx-base-const("theme", "DARK")
98
- );
99
- }
100
-
101
- &:active {
102
- @include lumx-navigation-link-colors(
103
- lumx-base-const("emphasis", "LOW"),
104
- lumx-base-const("state", "ACTIVE"),
105
- lumx-base-const("theme", "DARK")
73
+ $theme
106
74
  );
107
- }
108
-
109
- &--is-selected {
110
- @include lumx-navigation-link-colors(
111
- lumx-base-const("emphasis", "SELECTED"),
112
- lumx-base-const("state", "DEFAULT"),
113
- lumx-base-const("theme", "DARK")
114
- );
115
-
116
- &:hover,
117
- &:focus {
118
- @include lumx-navigation-link-colors(
119
- lumx-base-const("emphasis", "SELECTED"),
120
- lumx-base-const("state", "HOVER"),
121
- lumx-base-const("theme", "DARK")
122
- );
123
- }
124
-
125
- &:active {
126
- @include lumx-navigation-link-colors(
127
- lumx-base-const("emphasis", "SELECTED"),
128
- lumx-base-const("state", "ACTIVE"),
129
- lumx-base-const("theme", "DARK")
130
- );
131
- }
132
- }
133
- }
134
- }
135
-
136
- &--theme-light {
137
- .#{$lumx-base-prefix}-navigation-item__link {
138
- @include lumx-navigation-link-colors(
139
- lumx-base-const("emphasis", "LOW"),
140
- lumx-base-const("state", "DEFAULT"),
141
- lumx-base-const("theme", "LIGHT")
142
- );
143
-
144
- &:hover,
145
- &.focus-visible {
146
- @include lumx-navigation-link-colors(
147
- lumx-base-const("emphasis", "LOW"),
148
- lumx-base-const("state", "HOVER"),
149
- lumx-base-const("theme", "LIGHT")
75
+ @include lumx-navigation-link-borders(
76
+ $emphasis,
77
+ lumx-base-const("state", "HOVER")
150
78
  );
151
79
  }
152
80
 
153
- &:active {
81
+ // Active state
82
+ &:active,
83
+ &[data-lumx-active] {
154
84
  @include lumx-navigation-link-colors(
155
- lumx-base-const("emphasis", "LOW"),
85
+ $emphasis,
156
86
  lumx-base-const("state", "ACTIVE"),
157
- lumx-base-const("theme", "LIGHT")
87
+ $theme
158
88
  );
159
- }
160
-
161
- &--is-selected {
162
- @include lumx-navigation-link-colors(
163
- lumx-base-const("emphasis", "SELECTED"),
164
- lumx-base-const("state", "DEFAULT"),
165
- lumx-base-const("theme", "LIGHT")
89
+ @include lumx-navigation-link-borders(
90
+ $emphasis,
91
+ lumx-base-const("state", "ACTIVE")
166
92
  );
167
-
168
- &:hover,
169
- &:focus {
170
- @include lumx-navigation-link-colors(
171
- lumx-base-const("emphasis", "SELECTED"),
172
- lumx-base-const("state", "HOVER"),
173
- lumx-base-const("theme", "LIGHT")
174
- );
175
- }
176
-
177
- &:active {
178
- @include lumx-navigation-link-colors(
179
- lumx-base-const("emphasis", "SELECTED"),
180
- lumx-base-const("state", "ACTIVE"),
181
- lumx-base-const("theme", "LIGHT")
182
- );
183
- }
184
93
  }
185
94
  }
186
95
  }
package/scss/components/side-navigation/_index.scss CHANGED
@@ -65,5 +65,5 @@
65
65
  }
66
66
 
67
67
  .#{$lumx-base-prefix}-side-navigation-item--is-selected .#{$lumx-base-prefix}-side-navigation-item__link {
68
- @include lumx-list-item-selected;
68
+ @include lumx-list-item-selected('side-navigation-item');
69
69
  }