Skip to content

Commit 5f15c93

Browse files
chrisfalaskachrisfalaska
committed
fix: separate consumer-facing tokens
1 parent 7fb7177 commit 5f15c93

File tree

5 files changed

+175
-240
lines changed

5 files changed

+175
-240
lines changed

‎docs/partials/api.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,17 @@ Certain properties are not available for all `<auto-tail>` sizes. See the table
7979

8080
## Tail
8181
82-
Set the `tail` attribute to insert a tail graphic from the `<auro-icon>` repository with the corresponding icon code. The `tail` attribute is required.
82+
Set the `tail` attribute to insert a tail graphic from the `<auro-icon>` repository with the corresponding icon code.
83+
8384

8485
Tail codes from `<auro-icon>` are expected to be UPPERCASE (e.g., `AS`, not `as`).
8586

8687
> For a full list of available tail graphics & corresponding codes, click here.
8788
8889
Certain properties are not available for all `tail` codes. See the table below for details.
8990

91+
The `tail` attribute is required.
92+
9093
<div class="exampleWrapper">
9194
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/tail.html) -->
9295
<!-- AURO-GENERATED-CONTENT:END -->

‎src/styles/_private-tokens.scss‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@use 'sass:map';
2+
3+
/* Size config */
4+
$sizes: (
5+
'xs': (container-w: 24px, tail-w: 19px, tail-offset-y: 3px),
6+
'sm': (container-w: 32px, tail-w: 26px, tail-offset-y: 4px),
7+
'md': (container-w: 48px, tail-w: 39px, tail-offset-y: 6px, href-label-gap: 2px, badge-w: 11px, badge-offset-x: 2px, badge-offset-y: -7px),
8+
'lg': (container-w: 60px, tail-w: 48px, tail-offset-y: 7px, href-label-gap: 4px, badge-w: 14px, badge-offset-x: 2px, badge-offset-y: -4px),
9+
'xl': (container-w: 96px, tail-w: 77px, tail-offset-y: 13px, href-label-gap: 6px, badge-w: 22px),
10+
'2xl': (container-w: 134px, tail-w: 107px, tail-offset-y: 17px, href-label-gap: 8px, badge-w: 31px)
11+
);
12+
13+
/* Group config */
14+
$groups: (
15+
'xs': (group-diag-w: 42px, group-horiz-border-w: 3px, group-horiz-overlap: -2px),
16+
'sm': (group-diag-w: 56px, group-horiz-border-w: 3px, group-horiz-overlap: -2px),
17+
'md': (group-diag-w: 84px, group-horiz-border-w: 4px, group-horiz-overlap: -6px),
18+
'lg': (group-diag-w: 105px, group-horiz-border-w: 4px, group-horiz-overlap: -10px)
19+
);
20+
21+
/* Carrier gradients */
22+
$gradients: (
23+
'as': linear-gradient(180deg, #6899C6 0%, #CFE0EF 100%),
24+
'ha': linear-gradient(181deg, #CCB7ED -6.38%, #F9C2E7 99.46%),
25+
'oa': linear-gradient(181deg, #C5D0D9 -6.38%, #E8F1F8 99.46%)
26+
);
27+
28+
:host {
29+
display: inline-block;
30+
width: var(--container-w);
31+
height: var(--container-w);
32+
min-width: var(--container-w);
33+
min-height: var(--container-w);
34+
35+
/* Defaults (lg size + oa carrier type) */
36+
--container-w: var(--container-w-lg);
37+
--container-gradient: var(--gradient-oa);
38+
--tail-w: var(--tail-w-lg);
39+
--tail-offset-y: var(--tail-offset-y-lg);
40+
--href-label-gap: var(--href-label-gap-lg);
41+
--badge-w: var(--badge-w-lg);
42+
43+
/* Border */
44+
--border-color-default: rgba(88, 94, 103, 1);
45+
--border-color-white: #ffffff;
46+
--border-w-default: 4px;
47+
--border-display: none;
48+
--border-padding: 0;
49+
--border-radius-full: 999px;
50+
51+
/* Tail outline */
52+
--tail-outline-color: var(--border-color-default);
53+
--tail-outline-w: 1px;
54+
55+
/* Shadows & z-index */
56+
--tail-drop-shadow: drop-shadow(0 3px 3px rgba(0,0,0,.24)) drop-shadow(0 6px 14px rgba(0,0,0,.24));
57+
--z-index-border: 1;
58+
--z-index-badge: 2;
59+
--z-index-group-back: 1;
60+
--z-index-group-front: 2;
61+
62+
/* Badge offset defaults */
63+
--badge-offset-x: 0;
64+
--badge-offset-y: 0;
65+
66+
/* Generate size tokens */
67+
@each $size, $props in $sizes {
68+
@each $prop, $value in $props {
69+
--#{$prop}-#{$size}: #{$value};
70+
}
71+
}
72+
73+
/* Generate group tokens */
74+
@each $size, $props in $groups {
75+
@each $prop, $value in $props {
76+
--#{$prop}-#{$size}: #{$value};
77+
}
78+
}
79+
80+
/* Generate gradient tokens */
81+
@each $tail, $gradient in $gradients {
82+
--gradient-#{$tail}: #{$gradient};
83+
}
84+
}
85+
86+
/* Apply size-specific tokens */
87+
@each $size, $props in $sizes {
88+
:host([size="#{$size}"]) {
89+
--container-w: var(--container-w-#{$size});
90+
--tail-w: var(--tail-w-#{$size});
91+
--tail-offset-y: var(--tail-offset-y-#{$size});
92+
93+
@if map.has-key($props, badge-w) {
94+
--badge-w: var(--badge-w-#{$size});
95+
--badge-offset-x: var(--badge-offset-x-#{$size}, 0);
96+
--badge-offset-y: var(--badge-offset-y-#{$size}, 0);
97+
}
98+
@if map.has-key($props, href-label-gap) {
99+
--href-label-gap: var(--href-label-gap-#{$size});
100+
}
101+
}
102+
}
103+
104+
/* Apply tail gradients (case-insensitive) */
105+
@each $tail, $gradient in $gradients {
106+
:host([tail="#{$tail}" i]) {
107+
--container-gradient: var(--gradient-#{$tail});
108+
}
109+
}

‎src/styles/auro-tail-group.scss‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
@use './tokens.scss' as tokens;
1+
@use 'sass:map';
2+
@use './tokens.scss';
3+
@use './private-tokens.scss' as private;
24

3-
/* Get group sizes from tokens */
4-
$group-sizes: tokens.$tail-group-sizes;
5+
/* Get group sizes from $groups map keys */
6+
$group-sizes: map.keys(private.$groups);
57

68
/*
79
* Horizontal Layout
@@ -11,26 +13,26 @@ $group-sizes: tokens.$tail-group-sizes;
1113
:host([layout="horizontal"][size="#{$size}"]) {
1214
/* Account for container widths, border on each tail, and overlap */
1315
width: calc(
14-
2 * var(--ds-auro-tail-container-width-#{$size}) +
15-
2 * var(--ds-auro-tail-group-horizontal-border-width-#{$size}) +
16-
var(--ds-auro-tail-group-horizontal-overlap-#{$size})
16+
2 * var(--container-w-#{$size}) +
17+
2 * var(--group-horiz-border-w-#{$size}) +
18+
var(--group-horiz-overlap-#{$size})
1719
);
18-
height: calc(var(--ds-auro-tail-container-width-#{$size}) + 2 * var(--ds-auro-tail-group-horizontal-border-width-#{$size}));
19-
min-height: calc(var(--ds-auro-tail-container-width-#{$size}) + 2 * var(--ds-auro-tail-group-horizontal-border-width-#{$size}));
20+
height: calc(var(--container-w-#{$size}) + 2 * var(--group-horiz-border-w-#{$size}));
21+
min-height: calc(var(--container-w-#{$size}) + 2 * var(--group-horiz-border-w-#{$size}));
2022
}
2123
}
2224

2325
:host {
2426
/* Allow border-color to be set on the group and inherited by child tails */
25-
--ds-auro-tail-group-border-color: var(--ds-auro-tail-border-color);
27+
--group-border-color: var(--ds-auro-tail-border-color);
2628
}
2729

2830
.group {
2931
display: inline-flex;
3032
position: relative;
3133
}
3234

33-
.group.horizontal {
35+
.group.horizontal {
3436
/* Remove gap to control visual overlap */
3537
gap: 0;
3638
}
@@ -43,33 +45,33 @@ $group-sizes: tokens.$tail-group-sizes;
4345
:host([layout="horizontal"]) .group.horizontal ::slotted(auro-tail),
4446
:host([layout="horizontal"]) .group.horizontal ::slotted([auro-tail]) {
4547
position: relative;
46-
/* Inherit border-color from group if set, otherwise use white default */
47-
--ds-auro-tail-border-color: var(--ds-auro-tail-group-border-color, var(--ds-auro-tail-border-color-white));
48+
/* Inherit border-color from group if set, otherwise use default */
49+
--ds-auro-tail-border-color: var(--group-border-color, var(--border-color-white));
4850
}
4951

5052
/* Apply size-specific border widths and overlaps */
5153
@each $size in $group-sizes {
5254
:host([layout="horizontal"][size="#{$size}"]) .group.horizontal ::slotted(auro-tail),
5355
:host([layout="horizontal"][size="#{$size}"]) .group.horizontal ::slotted([auro-tail]) {
54-
--ds-auro-tail-border-width: var(--ds-auro-tail-group-horizontal-border-width-#{$size});
56+
--ds-auro-tail-border-width: var(--group-horiz-border-w-#{$size});
5557
/* Expand host width to include borders on both sides */
56-
width: calc(var(--ds-auro-tail-container-width-#{$size}) + 2 * var(--ds-auro-tail-group-horizontal-border-width-#{$size}));
57-
min-width: calc(var(--ds-auro-tail-container-width-#{$size}) + 2 * var(--ds-auro-tail-group-horizontal-border-width-#{$size}));
58+
width: calc(var(--container-w-#{$size}) + 2 * var(--group-horiz-border-w-#{$size}));
59+
min-width: calc(var(--container-w-#{$size}) + 2 * var(--group-horiz-border-w-#{$size}));
5860
}
5961

6062
:host([layout="horizontal"][size="#{$size}"]) .group.horizontal ::slotted(auro-tail:first-child),
6163
:host([layout="horizontal"][size="#{$size}"]) .group.horizontal ::slotted([auro-tail]:first-child) {
6264
/* Compensate overlap for expanded tail widths (borders on both sides of both tails) */
63-
margin-right: calc(var(--ds-auro-tail-group-horizontal-overlap-#{$size}) - 2 * var(--ds-auro-tail-group-horizontal-border-width-#{$size}));
65+
margin-right: calc(var(--group-horiz-overlap-#{$size}) - 2 * var(--group-horiz-border-w-#{$size}));
6466
/* First tail above second */
65-
z-index: var(--ds-auro-tail-z-index-group-front);
67+
z-index: var(--z-index-group-front);
6668
}
6769
}
6870

6971
/* Second tail below first */
7072
:host([layout="horizontal"]) .group.horizontal ::slotted(auro-tail:last-child),
7173
:host([layout="horizontal"]) .group.horizontal ::slotted([auro-tail]:last-child) {
72-
z-index: var(--ds-auro-tail-z-index-group-back);
74+
z-index: var(--z-index-group-back);
7375
}
7476

7577
/*
@@ -80,13 +82,13 @@ $group-sizes: tokens.$tail-group-sizes;
8082
/* Apply size-specific host dimensions for diagonal groups */
8183
@each $size in $group-sizes {
8284
:host([layout="diagonal"][size="#{$size}"]) {
83-
width: var(--ds-auro-tail-group-diagonal-width-#{$size});
84-
height: var(--ds-auro-tail-group-diagonal-width-#{$size});
85+
width: var(--group-diag-w-#{$size});
86+
height: var(--group-diag-w-#{$size});
8587
}
8688

8789
:host([layout="diagonal"][size="#{$size}"]) .group.diagonal {
88-
width: var(--ds-auro-tail-group-diagonal-width-#{$size});
89-
height: var(--ds-auro-tail-group-diagonal-width-#{$size});
90+
width: var(--group-diag-w-#{$size});
91+
height: var(--group-diag-w-#{$size});
9092
}
9193
}
9294

@@ -96,21 +98,21 @@ $group-sizes: tokens.$tail-group-sizes;
9698
position: absolute;
9799
--ds-auro-tail-border-color: transparent;
98100
--ds-auro-tail-border-width: 0;
99-
--ds-auro-tail-border-padding: 0;
101+
--border-padding: 0;
100102
}
101103

102104
/* Position first tail */
103105
.group.diagonal ::slotted(auro-tail:first-child),
104106
.group.diagonal ::slotted([auro-tail]:first-child) {
105107
top: 0;
106108
left: 0;
107-
z-index: var(--ds-auro-tail-z-index-group-front);
109+
z-index: var(--z-index-group-front);
108110
}
109111

110112
/* Position second tail */
111113
.group.diagonal ::slotted(auro-tail:nth-child(2)),
112114
.group.diagonal ::slotted([auro-tail]:nth-child(2)) {
113115
bottom: 0;
114116
right: 0;
115-
z-index: var(--ds-auro-tail-z-index-group-back);
117+
z-index: var(--z-index-group-back);
116118
}

0 commit comments

Comments
 (0)