@lumx/core 3.1.4 → 3.2.0

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 (13) hide show
  1. package/css/design-tokens.css +532 -538
  2. package/js/constants/design-tokens.js +28 -17
  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 +22 -17
  6. package/lumx.css +1 -1
  7. package/lumx.min.css +1 -1
  8. package/package.json +1 -1
  9. package/scss/_components.scss +1 -0
  10. package/scss/_design-tokens.scss +1079 -1107
  11. package/scss/components/navigation/_index.scss +234 -0
  12. package/scss/components/navigation/_mixins.scss +23 -0
  13. package/scss/lumx.scss +1 -0
package/scss/components/navigation/_index.scss ADDED
@@ -0,0 +1,234 @@
1
+ /* ==========================================================================
2
+ Navigation
3
+ ========================================================================== */
4
+
5
+ /* Navigation Item
6
+ ========================================================================== */
7
+ .#{$lumx-base-prefix}-navigation-item {
8
+ $self: &;
9
+
10
+ display: flex;
11
+ flex-direction: row;
12
+ align-items: center;
13
+ order: 0;
14
+
15
+ &__link {
16
+ display: flex;
17
+ flex: 1 1 auto;
18
+ flex-direction: row;
19
+ align-items: center;
20
+ max-width: 100%;
21
+ min-height: var(--lumx-navigation-item-min-height);
22
+ padding: 0 var(--lumx-navigation-item-padding-horizontal);
23
+ overflow: hidden;
24
+ text-decoration: none;
25
+ cursor: pointer;
26
+ border-radius: var(--lumx-navigation-item-border-radius);
27
+ outline: none;
28
+
29
+ @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
+ }
41
+
42
+ &:hover,
43
+ &.focus-visible {
44
+ @include lumx-navigation-link-borders(
45
+ lumx-base-const("emphasis", "LOW"),
46
+ lumx-base-const("state", "HOVER")
47
+ );
48
+ }
49
+
50
+ &:active {
51
+ @include lumx-navigation-link-borders(
52
+ lumx-base-const("emphasis", "LOW"),
53
+ lumx-base-const("state", "ACTIVE")
54
+ );
55
+ }
56
+
57
+ &--is-selected {
58
+ @include lumx-navigation-link-borders(
59
+ lumx-base-const("emphasis", "SELECTED"),
60
+ lumx-base-const("state", "DEFAULT")
61
+ );
62
+
63
+ &:hover,
64
+ &:focus {
65
+ @include lumx-navigation-link-borders(
66
+ lumx-base-const("emphasis", "SELECTED"),
67
+ lumx-base-const("state", "HOVER")
68
+ );
69
+ }
70
+
71
+ &:active {
72
+ @include lumx-navigation-link-borders(
73
+ lumx-base-const("emphasis", "SELECTED"),
74
+ lumx-base-const("state", "ACTIVE")
75
+ );
76
+ }
77
+ }
78
+ }
79
+
80
+ &--theme-dark {
81
+ .#{$lumx-base-prefix}-navigation-item__link {
82
+ @include lumx-navigation-link-colors(
83
+ lumx-base-const("emphasis", "LOW"),
84
+ lumx-base-const("state", "DEFAULT"),
85
+ lumx-base-const("theme", "DARK")
86
+ );
87
+
88
+ &:hover,
89
+ &.focus-visible {
90
+ @include lumx-navigation-link-colors(
91
+ lumx-base-const("emphasis", "LOW"),
92
+ lumx-base-const("state", "HOVER"),
93
+ lumx-base-const("theme", "DARK")
94
+ );
95
+ }
96
+
97
+ &:active {
98
+ @include lumx-navigation-link-colors(
99
+ lumx-base-const("emphasis", "LOW"),
100
+ lumx-base-const("state", "ACTIVE"),
101
+ lumx-base-const("theme", "DARK")
102
+ );
103
+ }
104
+
105
+ &--is-selected {
106
+ @include lumx-navigation-link-colors(
107
+ lumx-base-const("emphasis", "SELECTED"),
108
+ lumx-base-const("state", "DEFAULT"),
109
+ lumx-base-const("theme", "DARK")
110
+ );
111
+
112
+ &:hover,
113
+ &:focus {
114
+ @include lumx-navigation-link-colors(
115
+ lumx-base-const("emphasis", "SELECTED"),
116
+ lumx-base-const("state", "HOVER"),
117
+ lumx-base-const("theme", "DARK")
118
+ );
119
+ }
120
+
121
+ &:active {
122
+ @include lumx-navigation-link-colors(
123
+ lumx-base-const("emphasis", "SELECTED"),
124
+ lumx-base-const("state", "ACTIVE"),
125
+ lumx-base-const("theme", "DARK")
126
+ );
127
+ }
128
+ }
129
+ }
130
+ }
131
+
132
+ &--theme-light {
133
+ .#{$lumx-base-prefix}-navigation-item__link {
134
+ @include lumx-navigation-link-colors(
135
+ lumx-base-const("emphasis", "LOW"),
136
+ lumx-base-const("state", "DEFAULT"),
137
+ lumx-base-const("theme", "LIGHT")
138
+ );
139
+
140
+ &:hover,
141
+ &.focus-visible {
142
+ @include lumx-navigation-link-colors(
143
+ lumx-base-const("emphasis", "LOW"),
144
+ lumx-base-const("state", "HOVER"),
145
+ lumx-base-const("theme", "LIGHT")
146
+ );
147
+ }
148
+
149
+ &:active {
150
+ @include lumx-navigation-link-colors(
151
+ lumx-base-const("emphasis", "LOW"),
152
+ lumx-base-const("state", "ACTIVE"),
153
+ lumx-base-const("theme", "LIGHT")
154
+ );
155
+ }
156
+
157
+ &--is-selected {
158
+ @include lumx-navigation-link-colors(
159
+ lumx-base-const("emphasis", "SELECTED"),
160
+ lumx-base-const("state", "DEFAULT"),
161
+ lumx-base-const("theme", "LIGHT")
162
+ );
163
+
164
+ &:hover,
165
+ &:focus {
166
+ @include lumx-navigation-link-colors(
167
+ lumx-base-const("emphasis", "SELECTED"),
168
+ lumx-base-const("state", "HOVER"),
169
+ lumx-base-const("theme", "LIGHT")
170
+ );
171
+ }
172
+
173
+ &:active {
174
+ @include lumx-navigation-link-colors(
175
+ lumx-base-const("emphasis", "SELECTED"),
176
+ lumx-base-const("state", "ACTIVE"),
177
+ lumx-base-const("theme", "LIGHT")
178
+ );
179
+ }
180
+ }
181
+ }
182
+ }
183
+ }
184
+
185
+ /* Navigation Section
186
+ ========================================================================== */
187
+
188
+ .#{$lumx-base-prefix}-navigation-section {
189
+ flex-direction: column;
190
+ align-items: normal;
191
+
192
+ &__drawer {
193
+ padding-left: $lumx-spacing-unit-huge;
194
+ }
195
+
196
+ & &__chevron {
197
+ padding-left: $lumx-spacing-unit;
198
+ margin-right: 0;
199
+ margin-left: auto;
200
+ }
201
+ }
202
+
203
+ /* Navigation
204
+ ========================================================================== */
205
+ .#{$lumx-base-prefix}-navigation {
206
+ padding: 0;
207
+ margin: 0;
208
+ list-style: none;
209
+ outline: none;
210
+
211
+ &--orientation-horizontal {
212
+ .#{$lumx-base-prefix}-navigation__list {
213
+ display: flex;
214
+ flex-direction: row;
215
+ gap: $lumx-spacing-unit;
216
+ overflow: hidden;
217
+ }
218
+
219
+ .#{$lumx-base-prefix}-navigation-item {
220
+ max-width: 216px;
221
+ }
222
+
223
+ .#{$lumx-base-prefix}-navigation-section__drawer--popover {
224
+ flex-direction: column;
225
+ min-width: $lumx-size-xxl;
226
+ max-width: 400px;
227
+ padding: $lumx-spacing-unit-regular;
228
+ .#{$lumx-base-prefix}-navigation-item {
229
+ width: 100%;
230
+ max-width: 100%;
231
+ }
232
+ }
233
+ }
234
+ }
package/scss/components/navigation/_mixins.scss ADDED
@@ -0,0 +1,23 @@
1
+ @use "sass:map";
2
+
3
+ @mixin lumx-navigation-link-borders($emphasis, $state) {
4
+ border-style: solid;
5
+ border-width:
6
+ var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-top-width)
7
+ var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-right-width)
8
+ var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-bottom-width)
9
+ var(--lumx-navigation-item-#{$emphasis}-#{$state}-border-left-width);
10
+ }
11
+
12
+ @mixin lumx-navigation-link-colors($emphasis, $state, $theme) {
13
+ background-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-background-color);
14
+ border-color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-border-color);
15
+
16
+ .#{$lumx-base-prefix}-navigation-item__label {
17
+ color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-label-color);
18
+ }
19
+
20
+ .#{$lumx-base-prefix}-navigation-item__icon {
21
+ color: var(--lumx-navigation-item-#{$emphasis}-#{$state}-#{$theme}-icon-color);
22
+ }
23
+ }
package/scss/lumx.scss CHANGED
@@ -45,6 +45,7 @@
45
45
  @import "./components/list/index";
46
46
  @import "./components/message/index";
47
47
  @import "./components/mosaic/index";
48
+ @import "./components/navigation/index";
48
49
  @import "./components/notification/index";
49
50
  @import "./components/notification-block/index";
50
51
  @import "./components/popover/index";