invensys-ng 22.1.6 → 22.2.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 (15) hide show
  1. package/fesm2022/invensys-ng.mjs +269 -159
  2. package/fesm2022/invensys-ng.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/themes/_native-select.scss +34 -9
  5. package/src/lib/themes/_option-field.scss +183 -40
  6. package/src/lib/themes/body.theme.scss +2 -2
  7. package/src/lib/themes/color-palette.scss +13 -13
  8. package/src/lib/themes/color-variables.scss +2 -3
  9. package/src/lib/themes/colors.theme.scss +25 -25
  10. package/src/lib/themes/get-color.scss +2 -2
  11. package/src/lib/themes/scrollbar-mixins.scss +2 -5
  12. package/src/lib/themes/theme.scss +4 -4
  13. package/src/lib/themes/typography.theme.scss +7 -7
  14. package/src/lib/themes/whisper-layout.scss +3 -1
  15. package/types/invensys-ng.d.ts +35 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "invensys-ng",
3
- "version": "22.1.6",
3
+ "version": "22.2.1",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/ulbrichFrauendorf/invensys-ng"
package/src/lib/themes/_native-select.scss CHANGED
@@ -2,15 +2,32 @@
2
2
 
3
3
  // Keep native elements out of desktop keyboard and accessibility navigation.
4
4
  @mixin mobile-picker($prefix) {
5
- .i-native-field { display: none; }
5
+ .i-native-field {
6
+ display: none;
7
+ }
6
8
 
7
9
  @media (max-width: 991px) and (pointer: coarse) {
8
10
  .native-on-mobile {
9
- .#{$prefix}-input-container, .#{$prefix}-dropdown { display: none; }
10
- .i-native-field { display: flex; flex-direction: column; gap: 6px; }
11
+ .#{$prefix}-input-container,
12
+ .#{$prefix}-dropdown {
13
+ display: none;
14
+ }
15
+ .i-native-field {
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: 6px;
19
+ }
20
+ }
21
+ .i-native-field label {
22
+ font-size: 0.875rem;
23
+ color: colors.$color-text-primary;
24
+ }
25
+ .i-native-row {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 4px;
29
+ min-width: 0;
11
30
  }
12
- .i-native-field label { font-size: 0.875rem; color: colors.$color-text-primary; }
13
- .i-native-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
14
31
  .i-native-select {
15
32
  flex: 1;
16
33
  min-width: 0;
@@ -24,8 +41,12 @@
24
41
  border-radius: 6px;
25
42
  color: colors.$color-text-primary;
26
43
  background: colors.$color-component-background;
27
- &[aria-invalid='true'] { border-color: colors.$color-danger; }
28
- &:disabled { opacity: 0.6; }
44
+ &[aria-invalid='true'] {
45
+ border-color: colors.$color-danger;
46
+ }
47
+ &:disabled {
48
+ opacity: 0.6;
49
+ }
29
50
  }
30
51
  .i-native-clear {
31
52
  flex: 0 0 44px;
@@ -35,8 +56,12 @@
35
56
  background: transparent;
36
57
  color: colors.$color-text-primary;
37
58
  }
38
- .i-native-error { color: colors.$color-danger; font-size: 0.875rem; }
39
- .i-native-select:focus-visible, .i-native-clear:focus-visible {
59
+ .i-native-error {
60
+ color: colors.$color-danger;
61
+ font-size: 0.875rem;
62
+ }
63
+ .i-native-select:focus-visible,
64
+ .i-native-clear:focus-visible {
40
65
  outline: 2px solid colors.$color-primary;
41
66
  outline-offset: 2px;
42
67
  }
package/src/lib/themes/_option-field.scss CHANGED
@@ -3,9 +3,18 @@
3
3
  @use './floating-label' as floating;
4
4
 
5
5
  @mixin option-field() {
6
- :host { display: block; min-width: 0; max-width: 100%; }
7
- .i-option-field { position: relative; width: 100%; }
8
- .i-option-field--float { margin-top: floating.$space; }
6
+ :host {
7
+ display: block;
8
+ min-width: 0;
9
+ max-width: 100%;
10
+ }
11
+ .i-option-field {
12
+ position: relative;
13
+ width: 100%;
14
+ }
15
+ .i-option-field--float {
16
+ margin-top: floating.$space;
17
+ }
9
18
  .i-option-control {
10
19
  position: relative;
11
20
  display: flex;
@@ -17,12 +26,28 @@
17
26
  border-radius: vars.$componentBorderRadius;
18
27
  color: colors.$color-text-primary;
19
28
  background: colors.$color-component-background;
20
- &:focus-within { border-color: colors.$color-primary; box-shadow: colors.$color-box-shadow; }
29
+ &:focus-within {
30
+ border-color: colors.$color-primary;
31
+ box-shadow: colors.$color-box-shadow;
32
+ }
33
+ }
34
+ .i-option-value {
35
+ flex: 1;
36
+ min-width: 0;
37
+ padding: 4px 0 4px 12px;
38
+ pointer-events: none;
21
39
  }
22
- .i-option-value { flex: 1; min-width: 0; padding: 4px 0 4px 12px; pointer-events: none; }
23
- .i-option-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
24
- .i-option-placeholder { color: colors.$color-text-secondary; }
25
- .i-option-trigger, .i-native-select {
40
+ .i-option-text {
41
+ display: block;
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ white-space: nowrap;
45
+ }
46
+ .i-option-placeholder {
47
+ color: colors.$color-text-secondary;
48
+ }
49
+ .i-option-trigger,
50
+ .i-native-select {
26
51
  position: absolute;
27
52
  inset: 0;
28
53
  width: 100%;
@@ -35,9 +60,21 @@
35
60
  cursor: pointer;
36
61
  z-index: 1;
37
62
  }
38
- .i-option-trigger:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: 2px; }
39
- .i-native-select { display: none; opacity: 0; font-size: 16px; }
40
- .i-option-actions { display: flex; align-items: center; flex-shrink: 0; pointer-events: none; }
63
+ .i-option-trigger:focus-visible {
64
+ outline: 2px solid colors.$color-primary;
65
+ outline-offset: 2px;
66
+ }
67
+ .i-native-select {
68
+ display: none;
69
+ opacity: 0;
70
+ font-size: 16px;
71
+ }
72
+ .i-option-actions {
73
+ display: flex;
74
+ align-items: center;
75
+ flex-shrink: 0;
76
+ pointer-events: none;
77
+ }
41
78
  .i-option-clear {
42
79
  position: relative;
43
80
  z-index: 2;
@@ -54,46 +91,152 @@
54
91
  background: transparent;
55
92
  color: colors.$color-text-secondary;
56
93
  cursor: pointer;
57
- &:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: -2px; }
94
+ &:focus-visible {
95
+ outline: 2px solid colors.$color-primary;
96
+ outline-offset: -2px;
97
+ }
98
+ }
99
+ .i-option-arrow {
100
+ width: 32px;
101
+ display: inline-flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ font-size: 12px;
105
+ }
106
+ .i-option-arrow i {
107
+ transition: transform 0.15s ease;
108
+ }
109
+ .i-option-arrow .flipped {
110
+ transform: rotate(180deg);
111
+ }
112
+ .i-option-label {
113
+ @include floating.base;
114
+ position: absolute;
115
+ top: 21px;
116
+ left: 12px;
117
+ transform: translateY(-50%);
118
+ pointer-events: none;
119
+ color: colors.$color-text-secondary;
120
+ }
121
+ .i-option-field--open .i-option-label,
122
+ .i-option-field--filled .i-option-label,
123
+ .i-option-field:focus-within .i-option-label {
124
+ @include floating.floated;
58
125
  }
59
- .i-option-arrow { width: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
60
- .i-option-arrow i { transition: transform 0.15s ease; }
61
- .i-option-arrow .flipped { transform: rotate(180deg); }
62
- .i-option-label { @include floating.base; position: absolute; top: 21px; left: 12px; transform: translateY(-50%); pointer-events: none; color: colors.$color-text-secondary; }
63
- .i-option-field--open .i-option-label, .i-option-field--filled .i-option-label, .i-option-field:focus-within .i-option-label { @include floating.floated; }
64
126
  .i-option-field--invalid {
65
- .i-option-control { border-color: colors.$color-danger; }
66
- .i-option-label { color: colors.$color-danger; }
127
+ .i-option-control {
128
+ border-color: colors.$color-danger;
129
+ }
130
+ .i-option-label {
131
+ color: colors.$color-danger;
132
+ }
67
133
  }
68
134
  .i-option-field--disabled {
69
- .i-option-control { background: colors.$color-disabled-background; color: colors.$color-text-disabled; }
70
- .i-option-trigger, .i-native-select { cursor: not-allowed; }
135
+ .i-option-control {
136
+ background: colors.$color-disabled-background;
137
+ color: colors.$color-text-disabled;
138
+ }
139
+ .i-option-trigger,
140
+ .i-native-select {
141
+ cursor: not-allowed;
142
+ }
143
+ }
144
+ .i-option-error {
145
+ margin-top: 4px;
146
+ font-size: 12px;
147
+ color: colors.$color-danger;
71
148
  }
72
- .i-option-error { margin-top: 4px; font-size: 12px; color: colors.$color-danger; }
73
149
  .i-option-panel {
74
- width: 100%; min-width: 0; box-sizing: border-box;
150
+ width: 100%;
151
+ min-width: 0;
152
+ box-sizing: border-box;
75
153
  max-height: min(360px, calc(100dvh - 24px));
76
- display: flex; flex-direction: column; overflow: hidden;
77
- border: 1px solid colors.$color-surface-border; border-radius: vars.$componentBorderRadius;
78
- background: colors.$color-component-background; color: colors.$color-text-primary;
154
+ display: flex;
155
+ flex-direction: column;
156
+ overflow: hidden;
157
+ border: 1px solid colors.$color-surface-border;
158
+ border-radius: vars.$componentBorderRadius;
159
+ background: colors.$color-component-background;
160
+ color: colors.$color-text-primary;
79
161
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
80
162
  }
81
- .i-option-filter { padding: 8px; flex-shrink: 0; }
82
- .i-option-search { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 8px; font: inherit; border: 1px solid colors.$color-surface-border; border-radius: vars.$componentBorderRadius; color: inherit; background: colors.$color-component-background; }
83
- .i-option-search:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: -2px; }
84
- .i-option-list { overflow: auto; min-height: 0; overscroll-behavior: contain; }
85
- .i-option { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px; border: 0; font: inherit; text-align: left; overflow-wrap: anywhere; background: transparent; color: inherit; cursor: pointer; }
86
- .i-option:hover, .i-option.selected { background: colors.$color-surface-hover; }
87
- .i-option:focus-visible { outline: 2px solid colors.$color-primary; outline-offset: -2px; }
88
- .i-option-check { flex-shrink: 0; color: colors.$color-primary; }
89
- .i-option-empty { padding: 12px; color: colors.$color-text-secondary; }
163
+ .i-option-filter {
164
+ padding: 8px;
165
+ flex-shrink: 0;
166
+ }
167
+ .i-option-search {
168
+ box-sizing: border-box;
169
+ width: 100%;
170
+ min-width: 0;
171
+ min-height: 40px;
172
+ padding: 8px;
173
+ font: inherit;
174
+ border: 1px solid colors.$color-surface-border;
175
+ border-radius: vars.$componentBorderRadius;
176
+ color: inherit;
177
+ background: colors.$color-component-background;
178
+ }
179
+ .i-option-search:focus-visible {
180
+ outline: 2px solid colors.$color-primary;
181
+ outline-offset: -2px;
182
+ }
183
+ .i-option-list {
184
+ overflow: auto;
185
+ min-height: 0;
186
+ overscroll-behavior: contain;
187
+ }
188
+ .i-option {
189
+ display: flex;
190
+ align-items: center;
191
+ gap: 8px;
192
+ width: 100%;
193
+ box-sizing: border-box;
194
+ min-height: 40px;
195
+ padding: 8px 12px;
196
+ border: 0;
197
+ font: inherit;
198
+ text-align: left;
199
+ overflow-wrap: anywhere;
200
+ background: transparent;
201
+ color: inherit;
202
+ cursor: pointer;
203
+ }
204
+ .i-option:hover,
205
+ .i-option.selected {
206
+ background: colors.$color-surface-hover;
207
+ }
208
+ .i-option:focus-visible {
209
+ outline: 2px solid colors.$color-primary;
210
+ outline-offset: -2px;
211
+ }
212
+ .i-option-check {
213
+ flex-shrink: 0;
214
+ color: colors.$color-primary;
215
+ }
216
+ .i-option-empty {
217
+ padding: 12px;
218
+ color: colors.$color-text-secondary;
219
+ }
90
220
  @media (pointer: coarse) {
91
- .i-option-control, .i-option { min-height: 44px; }
92
- .i-option-clear { width: 44px; height: 44px; }
93
- .i-option-search { min-height: 44px; font-size: 16px; }
221
+ .i-option-control,
222
+ .i-option {
223
+ min-height: 44px;
224
+ }
225
+ .i-option-clear {
226
+ width: 44px;
227
+ height: 44px;
228
+ }
229
+ .i-option-search {
230
+ min-height: 44px;
231
+ font-size: 16px;
232
+ }
94
233
  }
95
234
  @media (max-width: 991px) and (pointer: coarse) {
96
- .native-on-mobile .i-option-trigger { display: none; }
97
- .native-on-mobile .i-native-select { display: block; }
235
+ .native-on-mobile .i-option-trigger {
236
+ display: none;
237
+ }
238
+ .native-on-mobile .i-native-select {
239
+ display: block;
240
+ }
98
241
  }
99
242
  }
package/src/lib/themes/body.theme.scss CHANGED
@@ -1,8 +1,8 @@
1
- @use "./color-variables.scss" as vars;
1
+ @use './color-variables.scss' as vars;
2
2
 
3
3
  @mixin define-body() {
4
4
  body {
5
- font-family: "Roboto", sans-serif;
5
+ font-family: 'Roboto', sans-serif;
6
6
  background-color: vars.$color-surface-ground;
7
7
  color: vars.$color-text-primary;
8
8
  }
package/src/lib/themes/color-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // This file contains the color variables used throughout the application.
2
2
  $colors: (
3
- "blue": (
3
+ 'blue': (
4
4
  50: #f5f9ff,
5
5
  100: #d0e1fd,
6
6
  200: #abc9fb,
@@ -12,7 +12,7 @@ $colors: (
12
12
  800: #204887,
13
13
  900: #183462,
14
14
  ),
15
- "green": (
15
+ 'green': (
16
16
  50: #f4fcf7,
17
17
  100: #caf1d8,
18
18
  200: #a0e6ba,
@@ -24,7 +24,7 @@ $colors: (
24
24
  800: #136c34,
25
25
  900: #0e4f26,
26
26
  ),
27
- "yellow": (
27
+ 'yellow': (
28
28
  50: #fefbf3,
29
29
  100: #faedc4,
30
30
  200: #f6de95,
@@ -36,7 +36,7 @@ $colors: (
36
36
  800: #816204,
37
37
  900: #5e4803,
38
38
  ),
39
- "cyan": (
39
+ 'cyan': (
40
40
  50: #f3fbfd,
41
41
  100: #c3edf5,
42
42
  200: #94e0ed,
@@ -48,7 +48,7 @@ $colors: (
48
48
  800: #036475,
49
49
  900: #024955,
50
50
  ),
51
- "pink": (
51
+ 'pink': (
52
52
  50: #fef6fa,
53
53
  100: #fad3e7,
54
54
  200: #f7b0d3,
@@ -60,7 +60,7 @@ $colors: (
60
60
  800: #822854,
61
61
  900: #5e1d3d,
62
62
  ),
63
- "indigo": (
63
+ 'indigo': (
64
64
  50: #f7f7fe,
65
65
  100: #dadafc,
66
66
  200: #bcbdf9,
@@ -72,7 +72,7 @@ $colors: (
72
72
  800: #363885,
73
73
  900: #282960,
74
74
  ),
75
- "teal": (
75
+ 'teal': (
76
76
  50: #f3fbfb,
77
77
  100: #c7eeea,
78
78
  200: #9ae0d9,
@@ -84,7 +84,7 @@ $colors: (
84
84
  800: #0b655b,
85
85
  900: #084a42,
86
86
  ),
87
- "orange": (
87
+ 'orange': (
88
88
  50: #fff7ed,
89
89
  100: #ffedd5,
90
90
  200: #fed7aa,
@@ -96,7 +96,7 @@ $colors: (
96
96
  800: #92400e,
97
97
  900: #78350f,
98
98
  ),
99
- "bluegray": (
99
+ 'bluegray': (
100
100
  50: #f7f8f9,
101
101
  100: #dadee3,
102
102
  200: #bcc3cd,
@@ -108,7 +108,7 @@ $colors: (
108
108
  800: #37404c,
109
109
  900: #282e38,
110
110
  ),
111
- "purple": (
111
+ 'purple': (
112
112
  50: #fbf7ff,
113
113
  100: #ead6fd,
114
114
  200: #dab6fc,
@@ -120,7 +120,7 @@ $colors: (
120
120
  800: #5c2f88,
121
121
  900: #432263,
122
122
  ),
123
- "red": (
123
+ 'red': (
124
124
  50: #fff5f5,
125
125
  100: #ffd0ce,
126
126
  200: #ffaca7,
@@ -132,7 +132,7 @@ $colors: (
132
132
  800: #8c221c,
133
133
  900: #661814,
134
134
  ),
135
- "sky": (
135
+ 'sky': (
136
136
  base: #38bdf8,
137
137
  dark: #0ea5e9,
138
138
  darker: #0369a1,
@@ -141,7 +141,7 @@ $colors: (
141
141
  contrast: #fff,
142
142
  contrast-dark: #0f172a,
143
143
  ),
144
- "gray": (
144
+ 'gray': (
145
145
  0: #ffffff,
146
146
  50: #f8fafc,
147
147
  100: #f1f5f9,
package/src/lib/themes/color-variables.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  $color-white: #ffffff;
2
2
  $color-black: #000000;
3
+ $color-shadow: $color-black;
3
4
  $color-primary: var(--color-primary);
4
5
  $color-secondary: var(--color-secondary);
5
6
  $color-tertiary: var(--color-tertiary);
@@ -12,9 +13,7 @@ $color-contrast-inverse: var(--color-contrast-inverse);
12
13
 
13
14
  $color-overlay-background: rgba(0, 0, 0, 0.4);
14
15
  $color-component-background: var(--color-component-background);
15
- $color-component-background-secondary: var(
16
- --color-component-background-secondary
17
- );
16
+ $color-component-background-secondary: var(--color-component-background-secondary);
18
17
  $color-component-background-solid: var(--color-component-background-solid);
19
18
  $color-disabled-background: var(--color-disabled-background);
20
19
  $color-disabled-border: var(--color-disabled-border);
package/src/lib/themes/colors.theme.scss CHANGED
@@ -1,33 +1,33 @@
1
- @use "sass:map";
2
- @use "./color-variables.scss" as vars;
3
- @use "./get-color.scss" as color;
1
+ @use 'sass:map';
2
+ @use './color-variables.scss' as vars;
3
+ @use './get-color.scss' as color;
4
4
 
5
5
  @mixin define-color-palette($mode: light) {
6
6
  @if $mode == light {
7
7
  .light {
8
- --color-primary: #{color.get-color("orange", 500)};
9
- --color-secondary: #{color.get-color("gray", 700)};
10
- --color-tertiary: #{color.get-color("bluegray", 500)};
11
- --color-success: #{color.get-color("green", 500)};
12
- --color-info: #{color.get-color("sky", "dark")};
13
- --color-warning: #{color.get-color("yellow", 500)};
14
- --color-danger: #{color.get-color("red", 500)};
8
+ --color-primary: #{color.get-color('orange', 500)};
9
+ --color-secondary: #{color.get-color('gray', 700)};
10
+ --color-tertiary: #{color.get-color('bluegray', 500)};
11
+ --color-success: #{color.get-color('green', 500)};
12
+ --color-info: #{color.get-color('sky', 'dark')};
13
+ --color-warning: #{color.get-color('yellow', 500)};
14
+ --color-danger: #{color.get-color('red', 500)};
15
15
  --color-contrast: #000;
16
16
  --color-contrast-inverse: #fff;
17
17
 
18
18
  // Text colors
19
- --color-text-primary: #{color.get-color("gray", 700)};
19
+ --color-text-primary: #{color.get-color('gray', 700)};
20
20
  --color-text-contrast: #ffffffde;
21
- --color-text-secondary: #{color.get-color("gray", 600)};
22
- --color-text-tertiary: #{color.get-color("bluegray", 500)};
21
+ --color-text-secondary: #{color.get-color('gray', 600)};
22
+ --color-text-tertiary: #{color.get-color('bluegray', 500)};
23
23
 
24
24
  // Background colors
25
25
  --color-component-background: #ffffff;
26
26
  --color-component-background-secondary: #ffffff;
27
- --color-component-background-solid: #{color.get-color("bluegray", 900)};
27
+ --color-component-background-solid: #{color.get-color('bluegray', 900)};
28
28
 
29
29
  // Border colors
30
- --color-border: #{color.get-color("gray", 300)};
30
+ --color-border: #{color.get-color('gray', 300)};
31
31
 
32
32
  // Disabled state colors
33
33
  --color-disabled-background: #f1f5f9;
@@ -45,26 +45,26 @@
45
45
  }
46
46
  } @else if $mode == dark {
47
47
  .dark {
48
- --color-primary: #{color.get-color("yellow", 500)};
49
- --color-secondary: #{color.get-color("gray", 300)};
50
- --color-tertiary: #{color.get-color("bluegray", 500)};
51
- --color-success: #{color.get-color("green", 400)};
52
- --color-info: #{color.get-color("sky", "base")};
53
- --color-warning: #{color.get-color("yellow", 400)};
54
- --color-danger: #{color.get-color("red", 400)};
48
+ --color-primary: #{color.get-color('yellow', 500)};
49
+ --color-secondary: #{color.get-color('gray', 300)};
50
+ --color-tertiary: #{color.get-color('bluegray', 500)};
51
+ --color-success: #{color.get-color('green', 400)};
52
+ --color-info: #{color.get-color('sky', 'base')};
53
+ --color-warning: #{color.get-color('yellow', 400)};
54
+ --color-danger: #{color.get-color('red', 400)};
55
55
  --color-contrast: #ffffff;
56
56
  --color-contrast-inverse: #000;
57
57
 
58
58
  // Text colors
59
59
  --color-text-primary: #ffffffde;
60
60
  --color-text-contrast: #ffffffde;
61
- --color-text-secondary: #{color.get-color("gray", 300)};
62
- --color-text-tertiary: #{color.get-color("bluegray", 500)};
61
+ --color-text-secondary: #{color.get-color('gray', 300)};
62
+ --color-text-tertiary: #{color.get-color('bluegray', 500)};
63
63
 
64
64
  // Background colors
65
65
  --color-component-background: #0b121c;
66
66
  --color-component-background-secondary: #000510;
67
- --color-component-background-solid: #{color.get-color("bluegray", 900)};
67
+ --color-component-background-solid: #{color.get-color('bluegray', 900)};
68
68
 
69
69
  // Border colors
70
70
  --color-border: #5e564b;
package/src/lib/themes/get-color.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "sass:map";
2
- @use "./color-palette.scss" as colors;
1
+ @use 'sass:map';
2
+ @use './color-palette.scss' as colors;
3
3
 
4
4
  @function get-color($name, $shade) {
5
5
  $shades: map.get(colors.$colors, $name);
package/src/lib/themes/scrollbar-mixins.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "./color-variables.scss" as colors;
1
+ @use './color-variables.scss' as colors;
2
2
 
3
3
  // Mixin for consistent thin scrollbars across components
4
4
  @mixin thin-scrollbar() {
@@ -72,10 +72,7 @@
72
72
  }
73
73
 
74
74
  &::-webkit-scrollbar-track {
75
- background: var(
76
- --scrollbar-track-dropdown,
77
- rgba(0, 0, 0, 0.05)
78
- ); // Subtle track background
75
+ background: var(--scrollbar-track-dropdown, rgba(0, 0, 0, 0.05)); // Subtle track background
79
76
  border-radius: var(--scrollbar-radius, 3px);
80
77
  margin: 2px 0; // Add margin to prevent cutoff
81
78
  }
package/src/lib/themes/theme.scss CHANGED
@@ -1,7 +1,7 @@
1
- @use "./colors.theme.scss" as colors-theme;
2
- @use "./body.theme.scss" as body-theme;
3
- @use "./scrollbar.theme.scss" as scrollbar-theme;
4
- @use "./typography.theme.scss" as typography-theme;
1
+ @use './colors.theme.scss' as colors-theme;
2
+ @use './body.theme.scss' as body-theme;
3
+ @use './scrollbar.theme.scss' as scrollbar-theme;
4
+ @use './typography.theme.scss' as typography-theme;
5
5
 
6
6
  @mixin define-theme($body: true, $typography: true, $scrollbar: true) {
7
7
  @include colors-theme.define-color-palette(light);
package/src/lib/themes/typography.theme.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  h4,
9
9
  h5,
10
10
  h6 {
11
- margin: 24px 0 16px;
11
+ margin: 0;
12
12
  font-family: inherit;
13
13
  font-weight: 500;
14
14
  line-height: 1.2;
@@ -20,27 +20,27 @@
20
20
  }
21
21
 
22
22
  h1 {
23
- font-size: 32px;
23
+ font-size: 24px;
24
24
  }
25
25
 
26
26
  h2 {
27
- font-size: 28px;
27
+ font-size: 20px;
28
28
  }
29
29
 
30
30
  h3 {
31
- font-size: 24px;
31
+ font-size: 18px;
32
32
  }
33
33
 
34
34
  h4 {
35
- font-size: 20px;
35
+ font-size: 16px;
36
36
  }
37
37
 
38
38
  h5 {
39
- font-size: 16px;
39
+ font-size: 14px;
40
40
  }
41
41
 
42
42
  h6 {
43
- font-size: 14px;
43
+ font-size: 12px;
44
44
  }
45
45
 
46
46
  mark {
package/src/lib/themes/whisper-layout.scss CHANGED
@@ -23,7 +23,9 @@
23
23
  justify-content: center;
24
24
  flex-shrink: 0;
25
25
  margin-top: 2px;
26
- i { font-size: 20px; }
26
+ i {
27
+ font-size: 20px;
28
+ }
27
29
  }
28
30
  @mixin text() {
29
31
  flex: 1;