@trebired/frontend 7.1.16 → 7.1.18
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.
- package/CHANGELOG.md +4 -0
- package/dist/actions/styles/index.scss +45 -45
- package/dist/config/scss.d.ts.map +1 -1
- package/dist/config/scss.js +3 -5
- package/dist/config/scss.js.map +1 -1
- package/dist/flash/styles/index.scss +19 -19
- package/dist/inputs/advanced/checkbox/styles.scss +11 -11
- package/dist/inputs/advanced/dropdown/styles/base.scss +4 -4
- package/dist/inputs/advanced/dropdown/styles/portaled.scss +3 -3
- package/dist/inputs/advanced/input/styles/file.scss +3 -3
- package/dist/inputs/advanced/radio/styles.scss +8 -8
- package/dist/inputs/advanced/tabs/styles.scss +21 -21
- package/dist/inputs/advanced/toggle/styles.scss +4 -4
- package/dist/inputs/styles/cropper-internals.scss +28 -28
- package/dist/inputs/styles/cropper.scss +27 -27
- package/dist/inputs/styles/upload.scss +40 -40
- package/dist/language/styles/index.scss +3 -3
- package/dist/logs/styles.scss +2 -2
- package/dist/modal/styles/index.scss +20 -20
- package/dist/namespace/css-var.d.ts +6 -0
- package/dist/namespace/css-var.d.ts.map +1 -0
- package/dist/namespace/css-var.js +47 -0
- package/dist/namespace/css-var.js.map +1 -0
- package/dist/namespace/index.d.ts.map +1 -1
- package/dist/namespace/index.js +2 -1
- package/dist/namespace/index.js.map +1 -1
- package/dist/popover/styles/index.scss +17 -17
- package/dist/primitives/styles/_card.scss +16 -16
- package/dist/primitives/styles/_controls.scss +58 -58
- package/dist/primitives/styles/_display.scss +12 -12
- package/dist/primitives/styles/_indicators.scss +5 -5
- package/dist/src/config/scss.d.ts.map +1 -1
- package/dist/src/config/scss.js +3 -5
- package/dist/src/config/scss.js.map +1 -1
- package/dist/src/namespace/css-var.d.ts +6 -0
- package/dist/src/namespace/css-var.d.ts.map +1 -0
- package/dist/src/namespace/css-var.js +47 -0
- package/dist/src/namespace/css-var.js.map +1 -0
- package/dist/src/namespace/index.d.ts.map +1 -1
- package/dist/src/namespace/index.js +2 -1
- package/dist/src/namespace/index.js.map +1 -1
- package/dist/surface/styles/index.scss +57 -57
- package/dist/theme/styles/index.scss +3 -3
- package/dist/tooltip/styles/index.scss +32 -32
- package/package.json +4 -4
|
@@ -3,15 +3,15 @@
|
|
|
3
3
|
position: fixed;
|
|
4
4
|
display: flex;
|
|
5
5
|
flex-direction: column;
|
|
6
|
-
gap: var(--tbf-
|
|
6
|
+
gap: var(--tbf-overlay-popover-panel-gap, 2px);
|
|
7
7
|
min-width: 220px;
|
|
8
8
|
max-width: min(320px, calc(100vw - 24px));
|
|
9
|
-
padding: var(--tbf-
|
|
10
|
-
border: var(--tbf-
|
|
11
|
-
border-radius: var(--tbf-
|
|
12
|
-
color: var(--tbf-
|
|
13
|
-
background: var(--tbf-
|
|
14
|
-
box-shadow: var(--tbf-
|
|
9
|
+
padding: var(--tbf-overlay-popover-panel-padding, 8px);
|
|
10
|
+
border: var(--tbf-overlay-popover-panel-border, var(--tbf-border-width, 1px) solid var(--tbf-border, #000));
|
|
11
|
+
border-radius: var(--tbf-overlay-popover-panel-radius, var(--tbf-radius, 0));
|
|
12
|
+
color: var(--tbf-overlay-popover-panel-color, var(--tbf-text, #000));
|
|
13
|
+
background: var(--tbf-overlay-popover-panel-bg, var(--tbf-surface, #fff));
|
|
14
|
+
box-shadow: var(--tbf-overlay-popover-panel-shadow, var(--tbf-shadow, 0 0 0 1px #000));
|
|
15
15
|
visibility: hidden;
|
|
16
16
|
opacity: 0;
|
|
17
17
|
pointer-events: none;
|
|
@@ -40,16 +40,16 @@
|
|
|
40
40
|
[data-tbf-popover] > :where(a, button) {
|
|
41
41
|
display: flex;
|
|
42
42
|
width: 100%;
|
|
43
|
-
height: var(--tbf-
|
|
44
|
-
min-height: var(--tbf-
|
|
43
|
+
height: var(--tbf-overlay-popover-item-root-height, 35px);
|
|
44
|
+
min-height: var(--tbf-overlay-popover-item-root-height, 35px);
|
|
45
45
|
align-items: center;
|
|
46
|
-
gap: var(--tbf-
|
|
47
|
-
padding: var(--tbf-
|
|
46
|
+
gap: var(--tbf-overlay-popover-item-root-gap, 10px);
|
|
47
|
+
padding: var(--tbf-overlay-popover-item-root-padding, 5px 10px);
|
|
48
48
|
overflow: hidden;
|
|
49
|
-
border: var(--tbf-
|
|
50
|
-
border-radius: var(--tbf-
|
|
51
|
-
color: var(--tbf-
|
|
52
|
-
background: var(--tbf-
|
|
49
|
+
border: var(--tbf-overlay-popover-item-root-border, 0);
|
|
50
|
+
border-radius: var(--tbf-overlay-popover-item-root-radius, var(--tbf-radius-sm, var(--tbf-radius, 0)));
|
|
51
|
+
color: var(--tbf-overlay-popover-item-root-color, var(--tbf-text-muted, #666));
|
|
52
|
+
background: var(--tbf-overlay-popover-item-root-bg, transparent);
|
|
53
53
|
cursor: pointer;
|
|
54
54
|
font: inherit;
|
|
55
55
|
line-height: 1.2;
|
|
@@ -71,6 +71,6 @@
|
|
|
71
71
|
[data-tbf-popover] :where(a, button).popover-item:focus,
|
|
72
72
|
[data-tbf-popover] > :where(a, button):hover,
|
|
73
73
|
[data-tbf-popover] > :where(a, button):focus {
|
|
74
|
-
color: var(--tbf-
|
|
75
|
-
background: var(--tbf-
|
|
74
|
+
color: var(--tbf-overlay-popover-item-state-hover-color, var(--tbf-text, #000));
|
|
75
|
+
background: var(--tbf-overlay-popover-item-state-hover-bg, var(--tbf-surface-muted, #f4f4f4));
|
|
76
76
|
}
|
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
.card {
|
|
2
|
-
min-height: var(--tbf-
|
|
3
|
-
border-radius: var(--tbf-
|
|
4
|
-
border: var(--tbf-
|
|
5
|
-
background: var(--tbf-
|
|
6
|
-
padding: var(--tbf-
|
|
2
|
+
min-height: var(--tbf-surf-card-root-min-h, var(--height-xs4, 35px));
|
|
3
|
+
border-radius: var(--tbf-surf-card-root-radius, var(--radius-lg, var(--tbf-radius, 0)));
|
|
4
|
+
border: var(--tbf-surf-card-root-border, var(--border-width) solid var(--border-surface-1));
|
|
5
|
+
background: var(--tbf-surf-card-root-bg, var(--background-page));
|
|
6
|
+
padding: var(--tbf-surf-card-root-padding, 14px 14px 12px 14px);
|
|
7
7
|
overflow: hidden;
|
|
8
8
|
|
|
9
9
|
h2 {
|
|
10
|
-
margin: var(--tbf-
|
|
11
|
-
font-size: var(--tbf-
|
|
12
|
-
font-weight: var(--tbf-
|
|
10
|
+
margin: var(--tbf-surf-card-title-margin, 0 0 10px 0);
|
|
11
|
+
font-size: var(--tbf-surf-card-title-font-size, 15px);
|
|
12
|
+
font-weight: var(--tbf-surf-card-title-font-weight, 700);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.card-row {
|
|
17
17
|
min-height: 0;
|
|
18
|
-
border-radius: var(--tbf-
|
|
19
|
-
border: var(--tbf-
|
|
20
|
-
background: var(--tbf-
|
|
18
|
+
border-radius: var(--tbf-surf-card-row-radius, var(--radius-lg, var(--tbf-radius, 0)));
|
|
19
|
+
border: var(--tbf-surf-card-row-border, var(--border-width) solid var(--border-surface-1));
|
|
20
|
+
background: var(--tbf-surf-card-row-bg, transparent);
|
|
21
21
|
overflow: hidden;
|
|
22
22
|
display: flex;
|
|
23
23
|
flex-direction: column;
|
|
24
24
|
min-width: 0;
|
|
25
|
-
padding: var(--tbf-
|
|
25
|
+
padding: var(--tbf-surf-card-row-padding, 9px 12px);
|
|
26
26
|
transition: all var(--transition-2) ease;
|
|
27
27
|
|
|
28
28
|
&.excluded {
|
|
29
|
-
border-color: var(--tbf-
|
|
29
|
+
border-color: var(--tbf-surf-card-row-state-excluded-border, var(--border-surface-1));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
&.selected {
|
|
33
|
-
background: var(--tbf-
|
|
33
|
+
background: var(--tbf-surf-card-row-state-selected-bg, var(--background-surface-1));
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
> * {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
@media (hover: hover) and (pointer: fine) {
|
|
42
42
|
.card-row:hover {
|
|
43
|
-
background: var(--tbf-
|
|
43
|
+
background: var(--tbf-surf-card-row-state-hover-bg, var(--background-surface-1, transparent));
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
flex: 0 0 auto;
|
|
78
78
|
width: 1px;
|
|
79
79
|
min-width: 1px;
|
|
80
|
-
background: var(--tbf-
|
|
80
|
+
background: var(--tbf-surf-card-body-divider-bg, var(--border-surface-1));
|
|
81
81
|
border-radius: 999px;
|
|
82
82
|
opacity: 0.9;
|
|
83
83
|
}
|
|
@@ -2,30 +2,30 @@
|
|
|
2
2
|
@use "./variables" as *;
|
|
3
3
|
|
|
4
4
|
.btn {
|
|
5
|
-
--button-icon-color: var(--tbf-
|
|
5
|
+
--button-icon-color: var(--tbf-ui-btn-slot-icon, currentColor);
|
|
6
6
|
box-sizing: border-box;
|
|
7
|
-
height: var(--tbf-
|
|
8
|
-
min-height: var(--tbf-
|
|
7
|
+
height: var(--tbf-ui-btn-root-height, 28px);
|
|
8
|
+
min-height: var(--tbf-ui-btn-root-height, 28px);
|
|
9
9
|
width: auto;
|
|
10
10
|
max-width: 100%;
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
align-items: center;
|
|
13
13
|
justify-content: center;
|
|
14
|
-
gap: var(--tbf-
|
|
15
|
-
padding: var(--tbf-
|
|
16
|
-
padding-block: var(--tbf-
|
|
17
|
-
border-radius: var(--tbf-
|
|
18
|
-
border: var(--tbf-
|
|
19
|
-
background: var(--tbf-
|
|
20
|
-
color: var(--tbf-
|
|
14
|
+
gap: var(--tbf-ui-btn-root-gap, 8px);
|
|
15
|
+
padding: var(--tbf-ui-btn-root-padding, 0 12px);
|
|
16
|
+
padding-block: var(--tbf-ui-btn-root-py, 0);
|
|
17
|
+
border-radius: var(--tbf-ui-btn-root-radius, var(--radius-md, var(--tbf-radius, 0)));
|
|
18
|
+
border: var(--tbf-ui-btn-root-border, var(--border-width) solid var(--border-surface-2));
|
|
19
|
+
background: var(--tbf-ui-btn-root-bg, transparent);
|
|
20
|
+
color: var(--tbf-ui-btn-root-color, var(--text-color));
|
|
21
21
|
cursor: pointer;
|
|
22
22
|
appearance: none;
|
|
23
23
|
-webkit-appearance: none;
|
|
24
24
|
font-family: inherit;
|
|
25
25
|
white-space: nowrap;
|
|
26
26
|
text-decoration: none;
|
|
27
|
-
font-size: var(--tbf-
|
|
28
|
-
font-weight: var(--tbf-
|
|
27
|
+
font-size: var(--tbf-ui-btn-root-font-size, 12px);
|
|
28
|
+
font-weight: var(--tbf-ui-btn-root-font-weight, 600);
|
|
29
29
|
line-height: 1.15;
|
|
30
30
|
vertical-align: middle;
|
|
31
31
|
transition:
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
&:hover,
|
|
38
38
|
&[aria-pressed="true"],
|
|
39
39
|
&[data-tbf-active="true"] {
|
|
40
|
-
--button-icon-color: var(--tbf-
|
|
41
|
-
background: var(--tbf-
|
|
42
|
-
border-color: var(--tbf-
|
|
43
|
-
color: var(--tbf-
|
|
40
|
+
--button-icon-color: var(--tbf-ui-btn-state-hover-icon, currentColor);
|
|
41
|
+
background: var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent));
|
|
42
|
+
border-color: var(--tbf-ui-btn-state-hover-border, currentColor);
|
|
43
|
+
color: var(--tbf-ui-btn-state-hover-color, currentColor);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
&:disabled,
|
|
47
47
|
&[disabled],
|
|
48
48
|
&.disabled {
|
|
49
|
-
opacity: var(--tbf-
|
|
49
|
+
opacity: var(--tbf-ui-btn-state-disabled-opacity, 0.55);
|
|
50
50
|
pointer-events: none;
|
|
51
51
|
}
|
|
52
52
|
|
|
@@ -62,79 +62,79 @@
|
|
|
62
62
|
|
|
63
63
|
@each $name, $size in $tbf-primitive-button-sizes {
|
|
64
64
|
&.#{$name} {
|
|
65
|
-
height: var(--tbf-
|
|
66
|
-
min-height: var(--tbf-
|
|
67
|
-
padding-inline: var(--tbf-
|
|
65
|
+
height: var(--tbf-ui-btn-sizes-#{$name}-height, #{list.nth($size, 1)});
|
|
66
|
+
min-height: var(--tbf-ui-btn-sizes-#{$name}-height, #{list.nth($size, 1)});
|
|
67
|
+
padding-inline: var(--tbf-ui-btn-sizes-#{$name}-px, #{list.nth($size, 2)});
|
|
68
68
|
padding-block: 0;
|
|
69
|
-
font-size: var(--tbf-
|
|
69
|
+
font-size: var(--tbf-ui-btn-sizes-#{$name}-font-size, #{list.nth($size, 3)});
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&.highlight {
|
|
75
|
-
--button-icon-color: var(--tbf-
|
|
76
|
-
background: var(--tbf-
|
|
77
|
-
color: var(--tbf-
|
|
78
|
-
border-color: var(--tbf-
|
|
75
|
+
--button-icon-color: var(--tbf-ui-btn-tone-highlight-icon, currentColor);
|
|
76
|
+
background: var(--tbf-ui-btn-tone-highlight-bg, var(--tbf-ui-btn-root-bg, transparent));
|
|
77
|
+
color: var(--tbf-ui-btn-tone-highlight-color, currentColor);
|
|
78
|
+
border-color: var(--tbf-ui-btn-tone-highlight-border, currentColor);
|
|
79
79
|
|
|
80
80
|
&:hover,
|
|
81
81
|
&[aria-pressed="true"],
|
|
82
82
|
&[data-tbf-active="true"] {
|
|
83
|
-
--button-icon-color: var(--tbf-
|
|
83
|
+
--button-icon-color: var(--tbf-ui-btn-tone-highlight-state-hover-icon, currentColor);
|
|
84
84
|
background: var(
|
|
85
|
-
--tbf-
|
|
86
|
-
var(--tbf-
|
|
85
|
+
--tbf-ui-btn-tone-highlight-state-hover-bg,
|
|
86
|
+
var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))
|
|
87
87
|
);
|
|
88
|
-
border-color: var(--tbf-
|
|
89
|
-
color: var(--tbf-
|
|
88
|
+
border-color: var(--tbf-ui-btn-tone-highlight-state-hover-border, currentColor);
|
|
89
|
+
color: var(--tbf-ui-btn-tone-highlight-state-hover-color, currentColor);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
&.red {
|
|
94
|
-
border-inline-color: var(--tbf-
|
|
94
|
+
border-inline-color: var(--tbf-ui-btn-tone-red-inline-border, currentColor);
|
|
95
95
|
|
|
96
96
|
&:hover,
|
|
97
97
|
&[aria-pressed="true"],
|
|
98
98
|
&[data-tbf-active="true"] {
|
|
99
99
|
background: var(
|
|
100
|
-
--tbf-
|
|
101
|
-
var(--tbf-
|
|
100
|
+
--tbf-ui-btn-tone-red-state-hover-bg,
|
|
101
|
+
var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))
|
|
102
102
|
);
|
|
103
|
-
border-color: var(--tbf-
|
|
104
|
-
color: var(--tbf-
|
|
105
|
-
--button-icon-color: var(--tbf-
|
|
103
|
+
border-color: var(--tbf-ui-btn-tone-red-state-hover-border, currentColor);
|
|
104
|
+
color: var(--tbf-ui-btn-tone-red-state-hover-color, currentColor);
|
|
105
|
+
--button-icon-color: var(--tbf-ui-btn-tone-red-state-hover-icon, currentColor);
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
&.yellow {
|
|
110
|
-
border-inline-color: var(--tbf-
|
|
110
|
+
border-inline-color: var(--tbf-ui-btn-tone-yellow-inline-border, currentColor);
|
|
111
111
|
|
|
112
112
|
&:hover,
|
|
113
113
|
&[aria-pressed="true"],
|
|
114
114
|
&[data-tbf-active="true"] {
|
|
115
|
-
--button-icon-color: var(--tbf-
|
|
115
|
+
--button-icon-color: var(--tbf-ui-btn-tone-yellow-state-hover-icon, currentColor);
|
|
116
116
|
background: var(
|
|
117
|
-
--tbf-
|
|
118
|
-
var(--tbf-
|
|
117
|
+
--tbf-ui-btn-tone-yellow-state-hover-bg,
|
|
118
|
+
var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))
|
|
119
119
|
);
|
|
120
|
-
border-color: var(--tbf-
|
|
121
|
-
color: var(--tbf-
|
|
120
|
+
border-color: var(--tbf-ui-btn-tone-yellow-state-hover-border, currentColor);
|
|
121
|
+
color: var(--tbf-ui-btn-tone-yellow-state-hover-color, currentColor);
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
&.green {
|
|
126
|
-
border-inline-color: var(--tbf-
|
|
126
|
+
border-inline-color: var(--tbf-ui-btn-tone-green-inline-border, currentColor);
|
|
127
127
|
|
|
128
128
|
&:hover,
|
|
129
129
|
&[aria-pressed="true"],
|
|
130
130
|
&[data-tbf-active="true"] {
|
|
131
|
-
--button-icon-color: var(--tbf-
|
|
131
|
+
--button-icon-color: var(--tbf-ui-btn-tone-green-state-hover-icon, currentColor);
|
|
132
132
|
background: var(
|
|
133
|
-
--tbf-
|
|
134
|
-
var(--tbf-
|
|
133
|
+
--tbf-ui-btn-tone-green-state-hover-bg,
|
|
134
|
+
var(--tbf-ui-btn-state-hover-bg, var(--tbf-ui-btn-root-bg, transparent))
|
|
135
135
|
);
|
|
136
|
-
border-color: var(--tbf-
|
|
137
|
-
color: var(--tbf-
|
|
136
|
+
border-color: var(--tbf-ui-btn-tone-green-state-hover-border, currentColor);
|
|
137
|
+
color: var(--tbf-ui-btn-tone-green-state-hover-color, currentColor);
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
|
|
@@ -142,13 +142,13 @@
|
|
|
142
142
|
display: inline-flex;
|
|
143
143
|
align-items: center;
|
|
144
144
|
justify-content: center;
|
|
145
|
-
width: var(--tbf-
|
|
146
|
-
height: var(--tbf-
|
|
147
|
-
min-width: var(--tbf-
|
|
148
|
-
min-height: var(--tbf-
|
|
145
|
+
width: var(--tbf-ui-btn-slot-icon-size, 28px);
|
|
146
|
+
height: var(--tbf-ui-btn-slot-icon-size, 28px);
|
|
147
|
+
min-width: var(--tbf-ui-btn-slot-icon-size, 28px);
|
|
148
|
+
min-height: var(--tbf-ui-btn-slot-icon-size, 28px);
|
|
149
149
|
gap: 0;
|
|
150
150
|
padding: 0;
|
|
151
|
-
font-size: var(--tbf-
|
|
151
|
+
font-size: var(--tbf-ui-btn-slot-icon-font-size, 15px);
|
|
152
152
|
line-height: 1;
|
|
153
153
|
text-align: center;
|
|
154
154
|
position: relative;
|
|
@@ -180,11 +180,11 @@
|
|
|
180
180
|
|
|
181
181
|
@each $name, $size in $tbf-primitive-icon-sizes {
|
|
182
182
|
&.#{$name} {
|
|
183
|
-
width: var(--tbf-
|
|
184
|
-
height: var(--tbf-
|
|
185
|
-
min-width: var(--tbf-
|
|
186
|
-
min-height: var(--tbf-
|
|
187
|
-
font-size: var(--tbf-
|
|
183
|
+
width: var(--tbf-ui-btn-slot-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
|
|
184
|
+
height: var(--tbf-ui-btn-slot-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
|
|
185
|
+
min-width: var(--tbf-ui-btn-slot-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
|
|
186
|
+
min-height: var(--tbf-ui-btn-slot-icon-sizes-#{$name}-size, #{list.nth($size, 1)});
|
|
187
|
+
font-size: var(--tbf-ui-btn-slot-icon-sizes-#{$name}-font-size, #{list.nth($size, 2)});
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
|
|
@@ -61,27 +61,27 @@
|
|
|
61
61
|
.tbf-text-link,
|
|
62
62
|
.text-link {
|
|
63
63
|
color: var(
|
|
64
|
-
--tbf-
|
|
64
|
+
--tbf-ui-link-root-color,
|
|
65
65
|
var(--text-color-muted, var(--tbf-text-muted, var(--tbf-text, currentColor)))
|
|
66
66
|
);
|
|
67
|
-
font-weight: var(--tbf-
|
|
68
|
-
text-decoration-line: var(--tbf-
|
|
69
|
-
text-decoration-color: var(--tbf-
|
|
70
|
-
text-decoration-style: var(--tbf-
|
|
71
|
-
text-decoration-thickness: var(--tbf-
|
|
72
|
-
text-underline-offset: var(--tbf-
|
|
73
|
-
transition: var(--tbf-
|
|
67
|
+
font-weight: var(--tbf-ui-link-root-font-weight, inherit);
|
|
68
|
+
text-decoration-line: var(--tbf-ui-link-root-decoration-line, underline);
|
|
69
|
+
text-decoration-color: var(--tbf-ui-link-root-decoration-color, currentColor);
|
|
70
|
+
text-decoration-style: var(--tbf-ui-link-root-decoration-style, solid);
|
|
71
|
+
text-decoration-thickness: var(--tbf-ui-link-root-decoration-thickness, 1px);
|
|
72
|
+
text-underline-offset: var(--tbf-ui-link-root-underline-offset, 3px);
|
|
73
|
+
transition: var(--tbf-ui-link-root-transition, none);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.tbf-text-link:hover,
|
|
77
77
|
.tbf-text-link:focus,
|
|
78
78
|
.text-link:hover,
|
|
79
79
|
.text-link:focus {
|
|
80
|
-
color: var(--tbf-
|
|
81
|
-
text-decoration-color: var(--tbf-
|
|
80
|
+
color: var(--tbf-ui-link-state-hover-color, var(--text-color, var(--tbf-text, currentColor)));
|
|
81
|
+
text-decoration-color: var(--tbf-ui-link-state-hover-decoration-color, currentColor);
|
|
82
82
|
text-decoration-style: var(
|
|
83
|
-
--tbf-
|
|
84
|
-
var(--tbf-
|
|
83
|
+
--tbf-ui-link-state-hover-decoration-style,
|
|
84
|
+
var(--tbf-ui-link-root-decoration-style, solid)
|
|
85
85
|
);
|
|
86
86
|
}
|
|
87
87
|
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
padding: 3px 5px;
|
|
9
9
|
border: var(--border-width) solid transparent;
|
|
10
10
|
border-radius: var(--radius-lg, var(--tbf-radius, 0));
|
|
11
|
-
background-color: var(--tbf-
|
|
11
|
+
background-color: var(--tbf-ui-pill-bg, var(--background-surface-1, transparent));
|
|
12
12
|
color: var(--text-color);
|
|
13
13
|
font-size: 13px;
|
|
14
14
|
line-height: 1;
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.dot {
|
|
41
|
-
--dot-color: var(--tbf-
|
|
41
|
+
--dot-color: var(--tbf-ui-dot-color, currentColor);
|
|
42
42
|
--dot-size: 10px;
|
|
43
43
|
width: var(--dot-size);
|
|
44
44
|
height: var(--dot-size);
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
aspect-ratio: 1;
|
|
79
79
|
border-radius: 50%;
|
|
80
80
|
border: calc(var(--border-width) * 8) solid;
|
|
81
|
-
border-color: var(--tbf-
|
|
81
|
+
border-color: var(--tbf-ui-loader-color, currentColor) transparent;
|
|
82
82
|
animation: tbf-primitive-loader-spin 1s infinite;
|
|
83
83
|
|
|
84
84
|
&.xs {
|
|
@@ -112,8 +112,8 @@
|
|
|
112
112
|
margin-top: 6px;
|
|
113
113
|
height: 6px;
|
|
114
114
|
border-radius: var(--radius-sm, var(--tbf-radius-sm, 0));
|
|
115
|
-
--progress-color: var(--tbf-
|
|
116
|
-
--progress-track: var(--tbf-
|
|
115
|
+
--progress-color: var(--tbf-ui-progress-color, currentColor);
|
|
116
|
+
--progress-track: var(--tbf-ui-progress-track, color-mix(in srgb, var(--progress-color) 22%, transparent));
|
|
117
117
|
--progress-percent: 0%;
|
|
118
118
|
color: var(--progress-color);
|
|
119
119
|
background: var(--progress-track);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scss.d.ts","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"scss.d.ts","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,wBAAwB,EAExB,cAAc,EAEf,MAAM,YAAY,CAAC;AAyJpB,iBAAS,oBAAoB,CAC3B,WAAW,EAAE,cAAc,GAAG,wBAAwB,GACrD,MAAM,CAkBR;AAED,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
package/dist/src/config/scss.js
CHANGED
|
@@ -2,6 +2,7 @@ import path from "node:path";
|
|
|
2
2
|
import { fileURLToPath } from "node:url";
|
|
3
3
|
import { renderFontsCss } from "./fonts.js";
|
|
4
4
|
import { cssComment, cssString } from "./shared.js";
|
|
5
|
+
import { componentGroupCssName, componentTokenCssName } from "../../namespace/css-var.js";
|
|
5
6
|
import { SYSTEM_ORDER, THEME_MODE_ATTRIBUTE, normalizeFrontendConfig, } from "./normalize.js";
|
|
6
7
|
import { findPaletteMode, paletteModeScaleDeclarations, paletteSemanticDeclarations, paletteSuffixedDeclarations, } from "./palette.js";
|
|
7
8
|
import { renderScalesCss } from "./scales-css.js";
|
|
@@ -47,15 +48,12 @@ function isNormalizedConfig(value) {
|
|
|
47
48
|
function tokenDeclarations(prefix, tokens) {
|
|
48
49
|
return flattenThemeTokens(tokens).map(([key, value]) => ` --${prefix}-${key}: ${String(value)};`);
|
|
49
50
|
}
|
|
50
|
-
function cssTokenKey(value) {
|
|
51
|
-
return value.replace(/([a-z0-9])([A-Z])/gu, "$1-$2").toLowerCase();
|
|
52
|
-
}
|
|
53
51
|
function componentTokenDeclarations(config) {
|
|
54
52
|
const lines = [];
|
|
55
53
|
for (const [componentGroup, tokens] of Object.entries(config.components)) {
|
|
56
|
-
const componentKey =
|
|
54
|
+
const componentKey = componentGroupCssName(componentGroup);
|
|
57
55
|
for (const [key, value] of flattenThemeTokens(tokens)) {
|
|
58
|
-
lines.push(` --${config.prefix}-${componentKey}-${
|
|
56
|
+
lines.push(` --${config.prefix}-${componentKey}-${componentTokenCssName(key)}: ${String(value)};`);
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
59
|
return lines;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scss.js","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EACL,YAAY,EACZ,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,eAAe,EACf,4BAA4B,EAC5B,2BAA2B,EAC3B,2BAA2B,GAC5B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAQhD,MAAM,kBAAkB,GAAoC;IAC1D,OAAO,EAAE,2BAA2B;IACpC,IAAI,EAAE,wBAAwB;IAC9B,MAAM,EAAE,0BAA0B;IAClC,QAAQ,EAAE,4BAA4B;IACtC,KAAK,EAAE,yBAAyB;IAChC,KAAK,EAAE,yBAAyB;IAChC,KAAK,EAAE,yBAAyB;IAChC,MAAM,EAAE,0BAA0B;IAClC,QAAQ,EAAE,4BAA4B;IACtC,KAAK,EAAE,yBAAyB;IAChC,MAAM,EAAE,0BAA0B;IAClC,IAAI,EAAE,wBAAwB;IAC9B,KAAK,EAAE,yBAAyB;IAChC,OAAO,EAAE,2BAA2B;IACpC,UAAU,EAAE,8BAA8B;IAC1C,QAAQ,EAAE,4BAA4B;IACtC,OAAO,EAAE,2BAA2B;IACpC,OAAO,EAAE,2BAA2B;IACpC,KAAK,EAAE,yBAAyB;IAChC,OAAO,EAAE,2BAA2B;IACpC,UAAU,EAAE,8BAA8B;CAC3C,CAAC;AAEF,SAAS,gBAAgB,CAAC,YAAoB;IAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAC/D,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAC1E,CAAC;AAED,SAAS,gBAAgB,CAAC,YAAoB;IAC5C,OAAO,0BAA0B,SAAS,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC;AACjF,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAc;IACxC,IAAI,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAC9E,MAAM,MAAM,GAAG,KAA0C,CAAC;IAC1D,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;QAClD,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC;QAC3C,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;AACjD,CAAC;AAED,SAAS,iBAAiB,CAAC,MAAc,EAAE,MAA2B;IACpE,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,OAAO,MAAM,IAAI,GAAG,KAAK,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACrG,CAAC;AAED,SAAS,
|
|
1
|
+
{"version":3,"file":"scss.js","sourceRoot":"","sources":["../../../src/config/scss.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare function cssTokenKey(value: string): string;
|
|
2
|
+
declare function componentGroupCssName(value: string): string;
|
|
3
|
+
declare function componentTokenCssName(value: string): string;
|
|
4
|
+
declare function frontendCssTokenName(name: string): string;
|
|
5
|
+
export { componentGroupCssName, componentTokenCssName, cssTokenKey, frontendCssTokenName, };
|
|
6
|
+
//# sourceMappingURL=css-var.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css-var.d.ts","sourceRoot":"","sources":["../../../src/namespace/css-var.ts"],"names":[],"mappings":"AA4BA,iBAAS,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE1C;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGpD;AAED,iBAAS,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKpD;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOlD;AAED,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,oBAAoB,GACrB,CAAC"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
const TOKEN_GROUP_ALIASES = {
|
|
2
|
+
overlays: "overlay",
|
|
3
|
+
primitives: "ui",
|
|
4
|
+
surfaces: "surf",
|
|
5
|
+
};
|
|
6
|
+
const TOKEN_KEY_REPLACEMENTS = [
|
|
7
|
+
[/\baction-control\b/gu, "action"],
|
|
8
|
+
[/\btext-link\b/gu, "link"],
|
|
9
|
+
[/\bbutton\b/gu, "btn"],
|
|
10
|
+
[/\bresponsive\b/gu, "resp"],
|
|
11
|
+
[/\bhas-files\b/gu, "files"],
|
|
12
|
+
[/\bborder-inline-color\b/gu, "inline-border"],
|
|
13
|
+
[/\bborder-color\b/gu, "border"],
|
|
14
|
+
[/\bicon-color\b/gu, "icon"],
|
|
15
|
+
[/\btext-decoration\b/gu, "decoration"],
|
|
16
|
+
[/\btext-underline\b/gu, "underline"],
|
|
17
|
+
[/\bpadding-inline\b/gu, "px"],
|
|
18
|
+
[/\bpadding-block\b/gu, "py"],
|
|
19
|
+
[/\bbackground\b/gu, "bg"],
|
|
20
|
+
[/\bline-height\b/gu, "line-h"],
|
|
21
|
+
[/\bmax-height\b/gu, "max-h"],
|
|
22
|
+
[/\bmin-height\b/gu, "min-h"],
|
|
23
|
+
[/\bstates\b/gu, "state"],
|
|
24
|
+
[/\btones\b/gu, "tone"],
|
|
25
|
+
[/\bslots\b/gu, "slot"],
|
|
26
|
+
];
|
|
27
|
+
function cssTokenKey(value) {
|
|
28
|
+
return value.replace(/([a-z0-9])([A-Z])/gu, "$1-$2").toLowerCase();
|
|
29
|
+
}
|
|
30
|
+
function componentGroupCssName(value) {
|
|
31
|
+
const key = cssTokenKey(value);
|
|
32
|
+
return TOKEN_GROUP_ALIASES[key] || key;
|
|
33
|
+
}
|
|
34
|
+
function componentTokenCssName(value) {
|
|
35
|
+
return TOKEN_KEY_REPLACEMENTS.reduce((result, [pattern, replacement]) => result.replace(pattern, replacement), cssTokenKey(value));
|
|
36
|
+
}
|
|
37
|
+
function frontendCssTokenName(name) {
|
|
38
|
+
const key = cssTokenKey(name);
|
|
39
|
+
const [group = "", ...rest] = key.split("-");
|
|
40
|
+
if (!rest.length)
|
|
41
|
+
return componentGroupCssName(group);
|
|
42
|
+
return [componentGroupCssName(group), componentTokenCssName(rest.join("-"))]
|
|
43
|
+
.filter(Boolean)
|
|
44
|
+
.join("-");
|
|
45
|
+
}
|
|
46
|
+
export { componentGroupCssName, componentTokenCssName, cssTokenKey, frontendCssTokenName, };
|
|
47
|
+
//# sourceMappingURL=css-var.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css-var.js","sourceRoot":"","sources":["../../../src/namespace/css-var.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAA2B;IAClD,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,sBAAsB,GAA4B;IACtD,CAAC,sBAAsB,EAAE,QAAQ,CAAC;IAClC,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC3B,CAAC,cAAc,EAAE,KAAK,CAAC;IACvB,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC5B,CAAC,iBAAiB,EAAE,OAAO,CAAC;IAC5B,CAAC,2BAA2B,EAAE,eAAe,CAAC;IAC9C,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IAChC,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC5B,CAAC,uBAAuB,EAAE,YAAY,CAAC;IACvC,CAAC,sBAAsB,EAAE,WAAW,CAAC;IACrC,CAAC,sBAAsB,EAAE,IAAI,CAAC;IAC9B,CAAC,qBAAqB,EAAE,IAAI,CAAC;IAC7B,CAAC,kBAAkB,EAAE,IAAI,CAAC;IAC1B,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAC/B,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC7B,CAAC,kBAAkB,EAAE,OAAO,CAAC;IAC7B,CAAC,cAAc,EAAE,OAAO,CAAC;IACzB,CAAC,aAAa,EAAE,MAAM,CAAC;IACvB,CAAC,aAAa,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,SAAS,WAAW,CAAC,KAAa;IAChC,OAAO,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;AACrE,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAa;IAC1C,MAAM,GAAG,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAC/B,OAAO,mBAAmB,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;AACzC,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAa;IAC1C,OAAO,sBAAsB,CAAC,MAAM,CAClC,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,WAAW,CAAC,EACxE,WAAW,CAAC,KAAK,CAAC,CACnB,CAAC;AACJ,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,MAAM,GAAG,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,MAAM;QAAE,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACtD,OAAO,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;SAC3E,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AACb,CAAC;AAED,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,WAAW,EACX,oBAAoB,GACrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AASjD,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,iBAAS,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAED,iBAAS,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,iBAAS,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FRONTEND_PREFIX } from "./generated.js";
|
|
2
|
+
import { frontendCssTokenName } from "./css-var.js";
|
|
2
3
|
function prefixedName(name) {
|
|
3
4
|
const normalized = String(name || "").trim();
|
|
4
5
|
if (!normalized)
|
|
@@ -15,7 +16,7 @@ function frontendDataSelector(name) {
|
|
|
15
16
|
return `[${frontendDataAttr(name)}]`;
|
|
16
17
|
}
|
|
17
18
|
function frontendCssVar(name) {
|
|
18
|
-
return `--${prefixedName(name)}`;
|
|
19
|
+
return `--${prefixedName(frontendCssTokenName(name))}`;
|
|
19
20
|
}
|
|
20
21
|
function frontendEventName(name) {
|
|
21
22
|
const normalized = String(name || "").trim();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/namespace/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,SAAS,YAAY,CAAC,IAAY;IAChC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC9E,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3E,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAY;IACpC,OAAO,QAAQ,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;AACtC,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,OAAO,IAAI,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC;AACvC,CAAC;AAED,SAAS,cAAc,CAAC,IAAY;IAClC,OAAO,KAAK,YAAY,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;AACzD,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,IAAI,CAAC,UAAU;QAAE,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;IAC1E,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,eAAe,IAAI,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AAC3E,CAAC;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,CAAC"}
|