@ardium-ui/ui 5.0.0-alpha.27 → 5.0.0-alpha.29

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 (11) hide show
  1. package/lib/slider/range-slider/range-slider.component.d.ts +1 -1
  2. package/package.json +1 -1
  3. package/prebuilt-themes/default/buttons/button.css +3 -3
  4. package/prebuilt-themes/default/buttons/fab.css +3 -3
  5. package/prebuilt-themes/default/buttons/icon-button.css +3 -3
  6. package/prebuilt-themes/default/slider.css +2 -2
  7. package/prebuilt-themes/default/tabber.css +27 -11
  8. package/prebuilt-themes/default/tabber.css.map +1 -1
  9. package/themes/default/buttons/_button-mixins.scss +3 -3
  10. package/themes/default/slider.scss +2 -2
  11. package/themes/default/tabber.scss +27 -12
package/lib/slider/range-slider/range-slider.component.d.ts CHANGED
@@ -26,7 +26,7 @@ export declare class ArdiumRangeSliderComponent extends _AbstractSlider<SliderRa
26
26
  onTrackHitboxPointerDown(event: MouseEvent | TouchEvent): void;
27
27
  onPointerMove(event: MouseEvent | TouchEvent): void;
28
28
  protected _percentValueToValue(percent: number, handleId: number): SliderRange;
29
- readonly currentHandle: import("@angular/core").WritableSignal<2 | 1 | null>;
29
+ readonly currentHandle: import("@angular/core").WritableSignal<1 | 2 | null>;
30
30
  onHandleFocus(event: FocusEvent, handleId: 1 | 2): void;
31
31
  onBlur(event: FocusEvent): void;
32
32
  static ɵfac: i0.ɵɵFactoryDeclaration<ArdiumRangeSliderComponent, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.27",
3
+ "version": "5.0.0-alpha.29",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/prebuilt-themes/default/buttons/button.css CHANGED
@@ -251,9 +251,9 @@ ard-button {
251
251
  color: var(--ard-cmpcl--on-bg-colored);
252
252
  }
253
253
  .ard-button.ard-appearance-flat, .ard-button.ard-appearance-raised-strong {
254
- background: var(--ard-cmpcl--bg);
255
- color: var(--ard-cmpcl--on-bg);
256
- border: 1px solid var(--ard-cmpcl--bg);
254
+ background: var(--ard-cmpcl--bg-colored);
255
+ color: var(--ard-cmpcl--on-bg-colored);
256
+ border: 1px solid var(--ard-cmpcl--bg-colored);
257
257
  }
258
258
  .ard-button.ard-appearance-flat .ard-focus-overlay, .ard-button.ard-appearance-raised-strong .ard-focus-overlay {
259
259
  background: var(--ard-cmpcl--on-bg);
package/prebuilt-themes/default/buttons/fab.css CHANGED
@@ -243,9 +243,9 @@ ard-fab {
243
243
  color: var(--ard-cmpcl--on-bg-colored);
244
244
  }
245
245
  .ard-fab.ard-appearance-flat, .ard-fab.ard-appearance-raised-strong {
246
- background: var(--ard-cmpcl--bg);
247
- color: var(--ard-cmpcl--on-bg);
248
- border: 1px solid var(--ard-cmpcl--bg);
246
+ background: var(--ard-cmpcl--bg-colored);
247
+ color: var(--ard-cmpcl--on-bg-colored);
248
+ border: 1px solid var(--ard-cmpcl--bg-colored);
249
249
  }
250
250
  .ard-fab.ard-appearance-flat .ard-focus-overlay, .ard-fab.ard-appearance-raised-strong .ard-focus-overlay {
251
251
  background: var(--ard-cmpcl--on-bg);
package/prebuilt-themes/default/buttons/icon-button.css CHANGED
@@ -248,9 +248,9 @@ ard-icon-button {
248
248
  color: var(--ard-cmpcl--on-bg-colored);
249
249
  }
250
250
  .ard-icon-button.ard-appearance-flat, .ard-icon-button.ard-appearance-raised-strong {
251
- background: var(--ard-cmpcl--bg);
252
- color: var(--ard-cmpcl--on-bg);
253
- border: 1px solid var(--ard-cmpcl--bg);
251
+ background: var(--ard-cmpcl--bg-colored);
252
+ color: var(--ard-cmpcl--on-bg-colored);
253
+ border: 1px solid var(--ard-cmpcl--bg-colored);
254
254
  }
255
255
  .ard-icon-button.ard-appearance-flat .ard-focus-overlay, .ard-icon-button.ard-appearance-raised-strong .ard-focus-overlay {
256
256
  background: var(--ard-cmpcl--on-bg);
package/prebuilt-themes/default/slider.css CHANGED
@@ -385,8 +385,8 @@
385
385
  .ard-range-slider-container-master .ard-slider-container:focus-within .ard-slider-handle:not(:focus) + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
386
386
  transform: scale(0);
387
387
  }
388
- .ard-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always .ard-slider-tooltip,
389
- .ard-range-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always .ard-slider-tooltip {
388
+ .ard-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper .ard-slider-tooltip.ard-tooltip-always,
389
+ .ard-range-slider-container-master .ard-slider-handle .ard-slider-tooltip-wrapper .ard-slider-tooltip.ard-tooltip-always {
390
390
  transform: scale(1) !important;
391
391
  }
392
392
 
package/prebuilt-themes/default/tabber.css CHANGED
@@ -1,3 +1,18 @@
1
+ :root {
2
+ --ard-tabber-tab-height: 2.5em;
3
+ --ard-tabber-tab-font-size: 0.875rem;
4
+ --ard-tabber-tab-font-weight: 500;
5
+ --ard-tabber-tab-border: none;
6
+ --ard-tabber-tab-background: none;
7
+ --ard-tabber-tab-padding: 0 1.5rem;
8
+ --ard-tabber-tab-gap: 0;
9
+ --ard-tabber-separator-border: 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%));
10
+ --ard-tabber-tab-overlay-color: var(--ard-bg-alt, black);
11
+ --ard-tabber-tab-hover-opacity: 4%;
12
+ --ard-tabber-tab-active-opacity: 12%;
13
+ --ard-tabber-tab-focus-visible-opacity: 18%;
14
+ }
15
+
1
16
  ard-tabber {
2
17
  max-width: 100%;
3
18
  }
@@ -147,7 +162,8 @@ ard-tabber {
147
162
  max-width: 100%;
148
163
  display: flex;
149
164
  flex-wrap: wrap;
150
- border-bottom: 1px solid var(--ard-detail-ultralight);
165
+ gap: var(--ard-tabber-tab-gap, 0);
166
+ border-bottom: var(--ard-tabber-separator-border, 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 0.12)));
151
167
  }
152
168
  .ard-tabber .ard-tabber-tabs.ard-tab-align-left {
153
169
  justify-content: left;
@@ -165,13 +181,13 @@ ard-tabber {
165
181
  flex-grow: 1;
166
182
  }
167
183
  .ard-tabber .ard-tabber-tabs .ard-tab-button {
168
- height: 2.5em;
169
- font-size: 0.875rem;
170
- font-weight: 500;
184
+ height: var(--ard-tabber-tab-height, 2.5em);
185
+ font-size: var(--ard-tabber-tab-font-size, 0.875rem);
186
+ font-weight: var(--ard-tabber-tab-font-weight, 500);
171
187
  position: relative;
172
- border: none;
173
- background: none;
174
- padding: 0 1.5rem;
188
+ border: var(--ard-tabber-tab-border, none);
189
+ background: var(--ard-tabber-tab-background, none);
190
+ padding: var(--ard-tabber-tab-padding, 0 1.5rem);
175
191
  cursor: pointer;
176
192
  outline: none;
177
193
  font-family: inherit;
@@ -186,16 +202,16 @@ ard-tabber {
186
202
  border-radius: inherit;
187
203
  pointer-events: none;
188
204
  transition: opacity 0.2s ease;
189
- background: var(--ard-bg-alt);
205
+ background: var(--ard-tabber-tab-overlay-color, var(--ard-bg-alt, black));
190
206
  }
191
207
  .ard-tabber .ard-tabber-tabs .ard-tab-button:hover .ard-focus-overlay, .ard-tabber .ard-tabber-tabs .ard-tab-button:focus .ard-focus-overlay {
192
- opacity: 4%;
208
+ opacity: var(--ard-tabber-tab-hover-opacity, 4%);
193
209
  }
194
210
  .ard-tabber .ard-tabber-tabs .ard-tab-button.ard-active .ard-focus-overlay, .ard-tabber .ard-tabber-tabs .ard-tab-button:active .ard-focus-overlay {
195
- opacity: 12%;
211
+ opacity: var(--ard-tabber-tab-active-opacity, 12%);
196
212
  }
197
213
  .ard-tabber .ard-tabber-tabs .ard-tab-button:focus-visible .ard-focus-overlay {
198
- opacity: 18%;
214
+ opacity: var(--ard-tabber-tab-focus-visible-opacity, 18%);
199
215
  }
200
216
  .ard-tabber .ard-tabber-tabs .ard-tab-button.ard-tab-active::after {
201
217
  content: "";
package/prebuilt-themes/default/tabber.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/tabber.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;ACZA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADrHF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEvCJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgCM,YGrDC;;AH0DD;EACE;;AAKF;EACE;;AAIF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"tabber.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/tabber.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA;;AC1BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADvGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EEtDJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EF+CM;;AAKA;EACE;;AAKF;EACE;;AAIF;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"tabber.css"}
package/themes/default/buttons/_button-mixins.scss CHANGED
@@ -107,9 +107,9 @@
107
107
  }
108
108
  &.ard-appearance-flat,
109
109
  &.ard-appearance-raised-strong {
110
- background: var(--ard-cmpcl--bg);
111
- color: var(--ard-cmpcl--on-bg);
112
- border: 1px solid var(--ard-cmpcl--bg);
110
+ background: var(--ard-cmpcl--bg-colored);
111
+ color: var(--ard-cmpcl--on-bg-colored);
112
+ border: 1px solid var(--ard-cmpcl--bg-colored);
113
113
 
114
114
  .ard-focus-overlay {
115
115
  background: var(--ard-cmpcl--on-bg);
package/themes/default/slider.scss CHANGED
@@ -251,8 +251,8 @@
251
251
  }
252
252
  }
253
253
  //make a way to force-show a tooltip
254
- .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always {
255
- .ard-slider-tooltip {
254
+ .ard-slider-handle .ard-slider-tooltip-wrapper {
255
+ .ard-slider-tooltip.ard-tooltip-always {
256
256
  transform: scale(1) !important;
257
257
  }
258
258
  }
package/themes/default/tabber.scss CHANGED
@@ -1,6 +1,20 @@
1
1
  @use './coloring' as CM;
2
2
  @use './mixins' as M;
3
- @use '../variables' as ARD;
3
+
4
+ :root {
5
+ --ard-tabber-tab-height: 2.5em;
6
+ --ard-tabber-tab-font-size: 0.875rem;
7
+ --ard-tabber-tab-font-weight: 500;
8
+ --ard-tabber-tab-border: none;
9
+ --ard-tabber-tab-background: none;
10
+ --ard-tabber-tab-padding: 0 1.5rem;
11
+ --ard-tabber-tab-gap: 0;
12
+ --ard-tabber-separator-border: 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%));
13
+ --ard-tabber-tab-overlay-color: var(--ard-bg-alt, black);
14
+ --ard-tabber-tab-hover-opacity: 4%;
15
+ --ard-tabber-tab-active-opacity: 12%;
16
+ --ard-tabber-tab-focus-visible-opacity: 18%;
17
+ }
4
18
 
5
19
  ard-tabber {
6
20
  max-width: 100%;
@@ -19,7 +33,8 @@ ard-tabber {
19
33
  max-width: 100%;
20
34
  display: flex;
21
35
  flex-wrap: wrap;
22
- border-bottom: 1px solid ARD.$detail-ultralight;
36
+ gap: var(--ard-tabber-tab-gap, 0);
37
+ border-bottom: var(--ard-tabber-separator-border, 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%)));
23
38
 
24
39
  &.ard-tab-align-left {
25
40
  justify-content: left;
@@ -39,37 +54,37 @@ ard-tabber {
39
54
  }
40
55
 
41
56
  .ard-tab-button {
42
- height: 2.5em;
43
- font-size: 0.875rem;
44
- font-weight: 500;
57
+ height: var(--ard-tabber-tab-height, 2.5em);
58
+ font-size: var(--ard-tabber-tab-font-size, 0.875rem);
59
+ font-weight: var(--ard-tabber-tab-font-weight, 500);
45
60
  position: relative;
46
- border: none;
47
- background: none;
48
- padding: 0 1.5rem;
61
+ border: var(--ard-tabber-tab-border, none);
62
+ background: var(--ard-tabber-tab-background, none);
63
+ padding: var(--ard-tabber-tab-padding, 0 1.5rem);
49
64
  cursor: pointer;
50
65
  outline: none;
51
66
  font-family: inherit;
52
67
 
53
68
  .ard-focus-overlay {
54
69
  @include M.focus-overlay();
55
- background: ARD.$bg-alt;
70
+ background: var(--ard-tabber-tab-overlay-color, var(--ard-bg-alt, black));
56
71
  }
57
72
 
58
73
  &:hover,
59
74
  &:focus {
60
75
  .ard-focus-overlay {
61
- opacity: 4%;
76
+ opacity: var(--ard-tabber-tab-hover-opacity, 4%);
62
77
  }
63
78
  }
64
79
  &.ard-active,
65
80
  &:active {
66
81
  .ard-focus-overlay {
67
- opacity: 12%;
82
+ opacity: var(--ard-tabber-tab-active-opacity, 12%);
68
83
  }
69
84
  }
70
85
  &:focus-visible {
71
86
  .ard-focus-overlay {
72
- opacity: 18%;
87
+ opacity: var(--ard-tabber-tab-focus-visible-opacity, 18%);
73
88
  }
74
89
  }
75
90