@ardium-ui/ui 5.0.0-alpha.28 → 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 (4) hide show
  1. package/package.json +1 -1
  2. package/prebuilt-themes/default/tabber.css +27 -11
  3. package/prebuilt-themes/default/tabber.css.map +1 -1
  4. package/themes/default/tabber.scss +27 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "5.0.0-alpha.28",
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/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/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