@vialiq/flux-ui 0.5.0 → 0.6.0
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/components/_accordion.scss +215 -0
- package/components/_checkbox.scss +5 -5
- package/components/_index.scss +1 -0
- package/components/_input.scss +5 -5
- package/components/_radio.scss +4 -4
- package/components/_tooltip.scss +1 -1
- package/flux-ui.css.map +1 -1
- package/package.json +1 -1
- package/styles/_variables.scss +6 -0
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
|
|
3
|
+
// ============================================================================
|
|
4
|
+
// Accordion variables following three-level cascade strategy
|
|
5
|
+
// ============================================================================
|
|
6
|
+
$accordion-border-color: var(--vi-accordion-border-color, tokens.$outline);
|
|
7
|
+
$accordion-border-radius: var(--vi-accordion-border-radius, tokens.$border-radius-md);
|
|
8
|
+
$accordion-gap: var(--vi-accordion-gap, 0px);
|
|
9
|
+
$accordion-animation-duration: var(--vi-accordion-animation-duration, 200ms);
|
|
10
|
+
|
|
11
|
+
$accordion-item-header-padding: var(--vi-accordion-item-header-padding, 14px 16px);
|
|
12
|
+
$accordion-item-body-padding: var(--vi-accordion-item-body-padding, 0 16px 16px);
|
|
13
|
+
$accordion-item-header-bg: var(--vi-accordion-item-header-bg, transparent);
|
|
14
|
+
$accordion-item-header-bg-hover: var(--vi-accordion-item-header-bg-hover, tokens.$layer-hover-01);
|
|
15
|
+
$accordion-item-header-bg-open: var(--vi-accordion-item-header-bg-open, transparent);
|
|
16
|
+
$accordion-item-label-color: var(--vi-accordion-item-label-color, tokens.$text-primary);
|
|
17
|
+
$accordion-item-label-font-weight: var(--vi-accordion-item-label-font-weight, tokens.$font-weight-medium);
|
|
18
|
+
$accordion-item-chevron-color: var(--vi-accordion-item-chevron-color, tokens.$text-disabled);
|
|
19
|
+
|
|
20
|
+
.accordion {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
gap: $accordion-gap;
|
|
24
|
+
width: 100%;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.accordion-item {
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
width: 100%;
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
|
|
33
|
+
&:not(:last-child) {
|
|
34
|
+
border-bottom: 1px solid $accordion-border-color;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.accordion-header {
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: space-between;
|
|
42
|
+
width: 100%;
|
|
43
|
+
padding: $accordion-item-header-padding;
|
|
44
|
+
background-color: $accordion-item-header-bg;
|
|
45
|
+
color: $accordion-item-label-color;
|
|
46
|
+
font-family: tokens.$font-family-base;
|
|
47
|
+
font-size: var(--vi-accordion-item-header-font-size, tokens.$font-size-base);
|
|
48
|
+
font-weight: $accordion-item-label-font-weight;
|
|
49
|
+
text-align: left;
|
|
50
|
+
border: none;
|
|
51
|
+
outline: none;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
transition: background-color $accordion-animation-duration ease,
|
|
55
|
+
color $accordion-animation-duration ease;
|
|
56
|
+
user-select: none;
|
|
57
|
+
|
|
58
|
+
&:hover:not(:disabled) {
|
|
59
|
+
background-color: $accordion-item-header-bg-hover;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&:disabled {
|
|
63
|
+
cursor: not-allowed;
|
|
64
|
+
opacity: 0.5;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Standard focus ring system
|
|
68
|
+
&:focus-visible {
|
|
69
|
+
outline: 2px solid tokens.$focus;
|
|
70
|
+
outline-offset: -2px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.accordion-header-content {
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: tokens.$spacing-xs;
|
|
78
|
+
flex: 1;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.accordion-label {
|
|
82
|
+
flex: 1;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.accordion-chevron {
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
color: $accordion-item-chevron-color;
|
|
90
|
+
transition: transform $accordion-animation-duration ease;
|
|
91
|
+
margin-inline-start: tokens.$spacing-xs;
|
|
92
|
+
|
|
93
|
+
svg {
|
|
94
|
+
width: 16px;
|
|
95
|
+
height: 16px;
|
|
96
|
+
fill: none;
|
|
97
|
+
stroke: currentColor;
|
|
98
|
+
stroke-width: 2;
|
|
99
|
+
stroke-linecap: round;
|
|
100
|
+
stroke-linejoin: round;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.accordion-panel {
|
|
105
|
+
display: block;
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
max-height: 0;
|
|
108
|
+
opacity: 0;
|
|
109
|
+
transition: max-height $accordion-animation-duration ease-out,
|
|
110
|
+
opacity $accordion-animation-duration ease-out;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.accordion-panel-inner {
|
|
114
|
+
padding: $accordion-item-body-padding;
|
|
115
|
+
font-family: tokens.$font-family-base;
|
|
116
|
+
font-size: tokens.$font-size-sm;
|
|
117
|
+
color: tokens.$text-secondary;
|
|
118
|
+
box-sizing: border-box;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// ============================================================================
|
|
122
|
+
// Variants
|
|
123
|
+
// ============================================================================
|
|
124
|
+
|
|
125
|
+
// Bordered variant: full border wrapper around each item
|
|
126
|
+
.accordion--bordered {
|
|
127
|
+
border: 1px solid $accordion-border-color;
|
|
128
|
+
border-radius: $accordion-border-radius;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
|
|
131
|
+
.accordion-item:last-child {
|
|
132
|
+
border-bottom: none;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
// Flush variant: no outer border, full-width edge-to-edge
|
|
137
|
+
.accordion--flush,
|
|
138
|
+
.accordion-item--flush {
|
|
139
|
+
border: none;
|
|
140
|
+
border-radius: 0;
|
|
141
|
+
|
|
142
|
+
.accordion-item {
|
|
143
|
+
border-inline: none;
|
|
144
|
+
}
|
|
145
|
+
border-inline: none;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Card variant: each item is a card with shadow and gap
|
|
149
|
+
.accordion--card {
|
|
150
|
+
--vi-accordion-gap: 8px;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.accordion-item--card {
|
|
154
|
+
border: 1px solid $accordion-border-color;
|
|
155
|
+
border-radius: $accordion-border-radius;
|
|
156
|
+
background-color: var(--vi-card-bg, tokens.$layer-01);
|
|
157
|
+
box-shadow: var(--vi-shadow-sm, tokens.$shadow-sm);
|
|
158
|
+
overflow: hidden;
|
|
159
|
+
|
|
160
|
+
&:not(:last-child) {
|
|
161
|
+
border-bottom: 1px solid $accordion-border-color;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// ============================================================================
|
|
166
|
+
// Size overrides
|
|
167
|
+
// ============================================================================
|
|
168
|
+
|
|
169
|
+
.accordion--sm,
|
|
170
|
+
.accordion-item--sm {
|
|
171
|
+
--vi-accordion-item-header-padding: 10px 12px;
|
|
172
|
+
--vi-accordion-item-body-padding: 0 12px 12px;
|
|
173
|
+
--vi-accordion-item-header-font-size: #{tokens.$font-size-sm};
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.accordion--md,
|
|
177
|
+
.accordion-item--md {
|
|
178
|
+
--vi-accordion-item-header-padding: 14px 16px;
|
|
179
|
+
--vi-accordion-item-body-padding: 0 16px 16px;
|
|
180
|
+
--vi-accordion-item-header-font-size: #{tokens.$font-size-base};
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.accordion--lg,
|
|
184
|
+
.accordion-item--lg {
|
|
185
|
+
--vi-accordion-item-header-padding: 18px 20px;
|
|
186
|
+
--vi-accordion-item-body-padding: 0 20px 20px;
|
|
187
|
+
--vi-accordion-item-header-font-size: #{tokens.$font-size-lg};
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// ============================================================================
|
|
191
|
+
// Open & Motion states
|
|
192
|
+
// ============================================================================
|
|
193
|
+
|
|
194
|
+
.accordion-item--open {
|
|
195
|
+
.accordion-header {
|
|
196
|
+
background-color: $accordion-item-header-bg-open;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.accordion-chevron {
|
|
200
|
+
transform: rotate(90deg);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.accordion-panel {
|
|
204
|
+
max-height: var(--vi-accordion-panel-height, none);
|
|
205
|
+
opacity: 1;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
@media (prefers-reduced-motion: reduce) {
|
|
210
|
+
.accordion-panel,
|
|
211
|
+
.accordion-chevron,
|
|
212
|
+
.accordion-header {
|
|
213
|
+
transition: none !important;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
font-family: #{tokens.$font-family-base};
|
|
18
18
|
font-size: var(--vi-checkbox-label-font-size, #{tokens.$font-size-base});
|
|
19
19
|
line-height: #{tokens.$line-height-normal};
|
|
20
|
-
color: var(--vi-checkbox-label-color, #{tokens.$
|
|
20
|
+
color: var(--vi-checkbox-label-color, #{tokens.$text-primary});
|
|
21
21
|
position: relative;
|
|
22
22
|
user-select: none;
|
|
23
23
|
align-items: center;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
justify-content: center;
|
|
44
44
|
width: var(--vi-checkbox-size, 18px);
|
|
45
45
|
height: var(--vi-checkbox-size, 18px);
|
|
46
|
-
border: #{tokens.$border-width-base} solid var(--vi-checkbox-border-color, #{tokens.$
|
|
46
|
+
border: #{tokens.$border-width-base} solid var(--vi-checkbox-border-color, #{tokens.$outline});
|
|
47
47
|
border-radius: var(--vi-checkbox-border-radius, 3px);
|
|
48
48
|
background-color: var(--vi-checkbox-background-color, #{tokens.$color-background});
|
|
49
49
|
transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
width: 100%;
|
|
55
55
|
height: 100%;
|
|
56
56
|
fill: none;
|
|
57
|
-
stroke: var(--vi-checkbox-check-color, #
|
|
57
|
+
stroke: var(--vi-checkbox-check-color, #{tokens.$text-primary-inverse});
|
|
58
58
|
stroke-width: 2px;
|
|
59
59
|
stroke-linecap: round;
|
|
60
60
|
stroke-linejoin: round;
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
|
|
94
94
|
// Focus ring
|
|
95
95
|
.checkbox-input:focus-visible ~ .checkbox-box {
|
|
96
|
-
outline: #{tokens.$border-width-base} solid var(--vi-checkbox-focus-ring-color, #{tokens.$
|
|
96
|
+
outline: #{tokens.$border-width-base} solid var(--vi-checkbox-focus-ring-color, #{tokens.$focus});
|
|
97
97
|
outline-offset: 2px;
|
|
98
98
|
box-shadow: 0 0 0 3px var(--vi-checkbox-focus-ring-glow, #{tokens.$color-blue-200});
|
|
99
99
|
}
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
.checkbox-check {
|
|
128
|
-
stroke: #{tokens.$text-inverse}; // White stroke for checks/dashes
|
|
128
|
+
stroke: #{tokens.$text-primary-inverse}; // White stroke for checks/dashes
|
|
129
129
|
}
|
|
130
130
|
|
|
131
131
|
// High contrast background when checked/indeterminate and disabled
|
package/components/_index.scss
CHANGED
package/components/_input.scss
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
width: 100%;
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
min-height: var(--vi-input-sizing-min-height, 40px);
|
|
33
|
-
border: #{tokens.$border-width-thin} solid var(--vi-input-border-color, #{tokens.$
|
|
33
|
+
border: #{tokens.$border-width-thin} solid var(--vi-input-border-color, #{tokens.$outline});
|
|
34
34
|
border-radius: var(--vi-input-shape-border-radius, #{tokens.$border-radius-lg});
|
|
35
35
|
padding: var(--vi-input-spacing-padding-block, #{tokens.$spacing-xs})
|
|
36
36
|
var(--vi-input-spacing-padding-inline, #{tokens.$spacing-sm});
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
font-size: var(--vi-input-typography-font-size, #{tokens.$font-size-base});
|
|
39
39
|
font-weight: #{tokens.$font-weight-normal};
|
|
40
40
|
line-height: var(--vi-input-typography-line-height, #{tokens.$line-height-normal});
|
|
41
|
-
color: var(--vi-input-text-color, #{tokens.$
|
|
41
|
+
color: var(--vi-input-text-color, #{tokens.$text-primary});
|
|
42
42
|
background-color: var(--vi-input-background-color, #{tokens.$color-background});
|
|
43
43
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
44
44
|
|
|
45
45
|
&:hover:not(:focus-visible) {
|
|
46
|
-
border-color: var(--vi-input-border-color-hover, #{tokens.$
|
|
46
|
+
border-color: var(--vi-input-border-color-hover, #{tokens.$text-secondary});
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
// Focus ring — outline + subtle shadow for depth.
|
|
@@ -52,13 +52,13 @@
|
|
|
52
52
|
// For <input> elements, showing the ring on all focus (keyboard + mouse) is correct.
|
|
53
53
|
&:focus-visible,
|
|
54
54
|
&:focus {
|
|
55
|
-
outline: #{tokens.$border-width-base} solid var(--vi-input-focus-ring-color, #{tokens.$
|
|
55
|
+
outline: #{tokens.$border-width-base} solid var(--vi-input-focus-ring-color, #{tokens.$focus});
|
|
56
56
|
outline-offset: 0;
|
|
57
57
|
box-shadow: 0 0 0 3px var(--vi-input-focus-ring-glow, #{tokens.$color-blue-200});
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
&::placeholder {
|
|
61
|
-
color: var(--vi-input-placeholder-color, #{tokens.$
|
|
61
|
+
color: var(--vi-input-placeholder-color, #{tokens.$text-secondary});
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
package/components/_radio.scss
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
font-family: #{tokens.$font-family-base};
|
|
27
27
|
font-size: var(--vi-radio-group-label-font-size, #{tokens.$font-size-base});
|
|
28
28
|
font-weight: #{tokens.$font-weight-semibold};
|
|
29
|
-
color: var(--vi-radio-group-label-color, #{tokens.$
|
|
29
|
+
color: var(--vi-radio-group-label-color, #{tokens.$text-primary});
|
|
30
30
|
padding: 0;
|
|
31
31
|
margin: 0;
|
|
32
32
|
margin-block-end: var(--vi-radio-group-legend-margin-bottom, #{tokens.$spacing-xs});
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
font-family: #{tokens.$font-family-base};
|
|
82
82
|
font-size: var(--vi-radio-label-font-size, #{tokens.$font-size-base});
|
|
83
83
|
line-height: #{tokens.$line-height-normal};
|
|
84
|
-
color: var(--vi-radio-label-color, #{tokens.$
|
|
84
|
+
color: var(--vi-radio-label-color, #{tokens.$text-primary});
|
|
85
85
|
position: relative;
|
|
86
86
|
user-select: none;
|
|
87
87
|
}
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
justify-content: center;
|
|
107
107
|
width: var(--vi-radio-size, 18px);
|
|
108
108
|
height: var(--vi-radio-size, 18px);
|
|
109
|
-
border: #{tokens.$border-width-base} solid var(--vi-radio-border-color, #{tokens.$
|
|
109
|
+
border: #{tokens.$border-width-base} solid var(--vi-radio-border-color, #{tokens.$outline});
|
|
110
110
|
border-radius: 50%;
|
|
111
111
|
background-color: var(--vi-radio-background-color, #{tokens.$color-background});
|
|
112
112
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
|
|
137
137
|
// Focus ring
|
|
138
138
|
.radio-input:focus-visible + .radio-circle {
|
|
139
|
-
outline: #{tokens.$border-width-base} solid var(--vi-radio-focus-ring-color, #{tokens.$
|
|
139
|
+
outline: #{tokens.$border-width-base} solid var(--vi-radio-focus-ring-color, #{tokens.$focus});
|
|
140
140
|
outline-offset: 2px;
|
|
141
141
|
box-shadow: 0 0 0 3px var(--vi-radio-focus-ring-glow, #{tokens.$color-blue-200});
|
|
142
142
|
}
|
package/components/_tooltip.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use '../styles/variables' as tokens;
|
|
2
2
|
|
|
3
3
|
$vi-tooltip-background: var(--vi-tooltip-background, tokens.$layer-inverse);
|
|
4
|
-
$vi-tooltip-color: var(--vi-tooltip-color, tokens.$text-inverse);
|
|
4
|
+
$vi-tooltip-color: var(--vi-tooltip-color, tokens.$text-primary-inverse);
|
|
5
5
|
$vi-tooltip-font-size: var(--vi-tooltip-font-size, 12px);
|
|
6
6
|
$vi-tooltip-border-radius: var(--vi-tooltip-border-radius, 4px);
|
|
7
7
|
$vi-tooltip-padding: var(--vi-tooltip-padding, 6px 10px);
|
package/flux-ui.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECpGF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAkBA,oCCNA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,kZAMF,kIACA,4GAKA,6DACA,6DACA,iEACA,6DACA,6DACA,+DACA,+DAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,wEACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,kVAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECpGF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YF0Ie,8FEzIf,UF8Ia,+BE7Ib,YF0JkB,kCEzJlB,MF+Ee,oCE9Ef,iBF6Ee,oCE5Ef,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YF2Fe,wEE1Ff,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IH+FW,0BG5Fb,QACE,IH4FW,2BGzFb,QACE,IHyFW,2BGtFb,QACE,IHsFW,2BGnFb,QACE,IHmFW,2BGhFb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBC3LJ,+PACE,0GACA,mCACA,kCACA,SAQF,kBAIE,KACE,sIACA,iEACA,wEACA,yEACA,gFACA,mEACA,mCACA,kCAKF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,GAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,EAEE,iEACA,wEACA,yEACA,gFACA,mEAMF,MAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,MAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,SAEE,gDAGF,KAEE,kBAKF,WAEE,+DACA,wEACA,yEACA,kFACA,iEAKF,cAIE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAGF,IAEE,gHACA,4DACA,wEACA,gEACA,4BAKF,WAEE,+DACA,uEACA,2EACA,gFACA,iEACA,kBACA,UAKF,GAEE,gEACA,2EACA,yEACA,mFACA,oEAGF,GAEE,+DACA,wEACA,yEACA,kEAUJ,iBAIE,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,mEACA,6EACA,2EACA,sFACA,sEAKF,eAEE,mEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,eAEE,oEACA,6EACA,4EACA,qFACA,sEAGF,eAEE,kEACA,6EACA,4EACA,qFACA,oEAKF,YAEE,+DACA,wEACA,2EACA,gFACA,mEAGF,YAEE,iEACA,wEACA,yEACA,gFACA,mEAGF,YAEE,+DACA,wEACA,yEACA,gFACA,iEAKF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAGF,aAEE,gEACA,yEACA,yEACA,mFACA,oEAKF,YAEE,+DACA,wEACA,yEACA,kFACA,iEAGF,aAEE,gEACA,2EACA,yEACA,mFACA,yBACA,kEAGF,SACE,gHACA,4DACA,qEACA,sEACA,6EACA,gEACA,4BAKF,uDACA,wDACA,gEACA,0DACA,kCACA,kBACE,gBACA,mBACA,uBAEF,mCAIA,0EACA,wEACA,wEACA,yEACA,2ECjYF,iBAMI,MACE,OLqTQ,0BKlTV,OACE,YLiTQ,0BKhTR,aLgTQ,0BK7SV,OACE,WL4SQ,0BK3SR,cL2SQ,0BKxSV,OACE,WLuSQ,0BKpSV,OACE,aLmSQ,0BKhSV,OACE,cL+RQ,0BK5RV,OACE,YL2RQ,0BKtTV,MACE,OLqTQ,2BKlTV,OACE,YLiTQ,2BKhTR,aLgTQ,2BK7SV,OACE,WL4SQ,2BK3SR,cL2SQ,2BKxSV,OACE,WLuSQ,2BKpSV,OACE,aLmSQ,2BKhSV,OACE,cL+RQ,2BK5RV,OACE,YL2RQ,2BKtTV,MACE,OLqTQ,2BKlTV,OACE,YLiTQ,2BKhTR,aLgTQ,2BK7SV,OACE,WL4SQ,2BK3SR,cL2SQ,2BKxSV,OACE,WLuSQ,2BKpSV,OACE,aLmSQ,2BKhSV,OACE,cL+RQ,2BK5RV,OACE,YL2RQ,2BKtTV,MACE,OLqTQ,2BKlTV,OACE,YLiTQ,2BKhTR,aLgTQ,2BK7SV,OACE,WL4SQ,2BK3SR,cL2SQ,2BKxSV,OACE,WLuSQ,2BKpSV,OACE,aLmSQ,2BKhSV,OACE,cL+RQ,2BK5RV,OACE,YL2RQ,2BKtTV,MACE,OLqTQ,2BKlTV,OACE,YLiTQ,2BKhTR,aLgTQ,2BK7SV,OACE,WL4SQ,2BK3SR,cL2SQ,2BKxSV,OACE,WLuSQ,2BKpSV,OACE,aLmSQ,2BKhSV,OACE,cL+RQ,2BK5RV,OACE,YL2RQ,2BKtTV,OACE,OLqTQ,4BKlTV,QACE,YLiTQ,4BKhTR,aLgTQ,4BK7SV,QACE,WL4SQ,4BK3SR,cL2SQ,4BKxSV,QACE,WLuSQ,4BKpSV,QACE,aLmSQ,4BKhSV,QACE,cL+RQ,4BK5RV,QACE,YL2RQ,4BKtTV,OACE,OLqTQ,4BKlTV,QACE,YLiTQ,4BKhTR,aLgTQ,4BK7SV,QACE,WL4SQ,4BK3SR,cL2SQ,4BKxSV,QACE,WLuSQ,4BKpSV,QACE,aLmSQ,4BKhSV,QACE,cL+RQ,4BK5RV,QACE,YL2RQ,4BKlRV,MACE,QLiRQ,0BK9QV,OACE,aL6QQ,0BK5QR,cL4QQ,0BKzQV,OACE,YLwQQ,0BKvQR,eLuQQ,0BKpQV,OACE,YLmQQ,0BKhQV,OACE,cL+PQ,0BK5PV,OACE,eL2PQ,0BKxPV,OACE,aLuPQ,0BKlRV,MACE,QLiRQ,2BK9QV,OACE,aL6QQ,2BK5QR,cL4QQ,2BKzQV,OACE,YLwQQ,2BKvQR,eLuQQ,2BKpQV,OACE,YLmQQ,2BKhQV,OACE,cL+PQ,2BK5PV,OACE,eL2PQ,2BKxPV,OACE,aLuPQ,2BKlRV,MACE,QLiRQ,2BK9QV,OACE,aL6QQ,2BK5QR,cL4QQ,2BKzQV,OACE,YLwQQ,2BKvQR,eLuQQ,2BKpQV,OACE,YLmQQ,2BKhQV,OACE,cL+PQ,2BK5PV,OACE,eL2PQ,2BKxPV,OACE,aLuPQ,2BKlRV,MACE,QLiRQ,2BK9QV,OACE,aL6QQ,2BK5QR,cL4QQ,2BKzQV,OACE,YLwQQ,2BKvQR,eLuQQ,2BKpQV,OACE,YLmQQ,2BKhQV,OACE,cL+PQ,2BK5PV,OACE,eL2PQ,2BKxPV,OACE,aLuPQ,2BKlRV,MACE,QLiRQ,2BK9QV,OACE,aL6QQ,2BK5QR,cL4QQ,2BKzQV,OACE,YLwQQ,2BKvQR,eLuQQ,2BKpQV,OACE,YLmQQ,2BKhQV,OACE,cL+PQ,2BK5PV,OACE,eL2PQ,2BKxPV,OACE,aLuPQ,2BKlRV,OACE,QLiRQ,4BK9QV,QACE,aL6QQ,4BK5QR,cL4QQ,4BKzQV,QACE,YLwQQ,4BKvQR,eLuQQ,4BKpQV,QACE,YLmQQ,4BKhQV,QACE,cL+PQ,4BK5PV,QACE,eL2PQ,4BKxPV,QACE,aLuPQ,4BKlRV,OACE,QLiRQ,4BK9QV,QACE,aL6QQ,4BK5QR,cL4QQ,4BKzQV,QACE,YLwQQ,4BKvQR,eLuQQ,4BKpQV,QACE,YLmQQ,4BKhQV,QACE,cL+PQ,4BK5PV,QACE,eL2PQ,4BKxPV,QACE,aLuPQ,4BK/OZ,SACE,UL2Fa,6BKxFf,SACE,ULwFa,6BKrFf,WACE,ULqFa,+BKlFf,SACE,ULkFa,6BK/Ef,SACE,UL+Ea,6BK5Ef,UACE,UL4Ea,8BKzEf,UACE,ULyEa,8BKtEf,YACE,YLuEmB,iCKpErB,aACE,YLoEmB,kCKjErB,aACE,YLiEmB,kCK9DrB,eACE,YL8DmB,oCK3DrB,WACE,YL2DmB,gCKxDrB,eACE,YLyDkB,iCKtDpB,gBACE,YLsDkB,kCKnDpB,iBACE,YLmDkB,oCKhDpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,MLwJM,iCKrJR,YACE,iBLoJM,iCKjJR,gBACE,aLgJM,iCKzJR,gBACE,MLwJM,mCKrJR,cACE,iBLoJM,mCKjJR,kBACE,aLgJM,mCKzJR,cACE,MLwJM,iCKrJR,YACE,iBLoJM,iCKjJR,gBACE,aLgJM,iCKzJR,cACE,MLwJM,iCKrJR,YACE,iBLoJM,iCKjJR,gBACE,aLgJM,iCKzJR,YACE,MLwJM,+BKrJR,UACE,iBLoJM,+BKjJR,cACE,aLgJM,+BKzJR,WACE,MLwJM,8BKrJR,SACE,iBLoJM,8BKjJR,aACE,aLgJM,8BKxIN,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,cACE,ML6HO,iCK1HT,YACE,iBLyHO,iCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,gBACE,ML6HO,mCK1HT,cACE,iBLyHO,mCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,eACE,ML6HO,kCK1HT,aACE,iBLyHO,kCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCK9HT,iBACE,ML6HO,oCK1HT,eACE,iBLyHO,oCKlHX,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKxCb,kBACE,MLuCW,kCKpCb,gBACE,iBLmCW,kCKhCb,oBACE,aL+BW,kCKtBb,WACE,WL4HO,qDK7HT,WACE,WL4HO,uDK7HT,WACE,WL4HO,yDK7HT,WACE,WL4HO,yDKpHX,cACE,gBAGF,YACE,cLTe,gCKYjB,YACE,cLZe,gCKejB,YACE,cLfe,gCKkBjB,YACE,cLlBe,iCKqBjB,cACE,qBAOF,aACE,aL1BiB,iCK2BjB,mBAGF,aACE,aL9BiB,iCK+BjB,mBAGF,cACE,aLlCiB,kCKmCjB,mBAQA,QACE,QLuGQ,GKxGV,QACE,QLuGQ,KKxGV,QACE,QLuGQ,EKxGV,YACE,QLuGQ,KKxGV,UACE,QLuGQ,KKxGV,SACE,QLuGQ,KKxGV,YACE,QLuGQ,KKxGV,SACE,QLuGQ,KKxGV,WACE,QLuGQ,KKxGV,WACE,QLuGQ,KK/FZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,QACE,IL7EQ,0BKgFV,UACE,WLjFQ,0BKoFV,UACE,QLrFQ,0BK4EV,QACE,IL7EQ,2BKgFV,UACE,WLjFQ,2BKoFV,UACE,QLrFQ,2BK4EV,QACE,IL7EQ,2BKgFV,UACE,WLjFQ,2BKoFV,UACE,QLrFQ,2BK4EV,QACE,IL7EQ,2BKgFV,UACE,WLjFQ,2BKoFV,UACE,QLrFQ,2BK4EV,QACE,IL7EQ,2BKgFV,UACE,WLjFQ,2BKoFV,UACE,QLrFQ,2BK4EV,SACE,IL7EQ,4BKgFV,WACE,WLjFQ,4BKoFV,WACE,QLrFQ,4BK4EV,SACE,IL7EQ,4BKgFV,WACE,WLjFQ,4BKoFV,WACE,QLrFQ,4BK6FZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}
|
package/package.json
CHANGED
package/styles/_variables.scss
CHANGED
|
@@ -136,9 +136,15 @@ $layer-disabled: var(--vi-layer-disabled, #f3f4f6); // grey-100
|
|
|
136
136
|
$layer-inverse: var(--vi-layer-inverse, #111827); // grey-900
|
|
137
137
|
$layer-inverse-hover: var(--vi-layer-inverse-hover, #1f2937); // grey-800
|
|
138
138
|
|
|
139
|
+
$text-primary: var(--vi-text-primary, #111827); // grey-900
|
|
140
|
+
$text-secondary: var(--vi-text-secondary, #4b5563); // grey-600
|
|
141
|
+
$text-primary-inverse: var(--vi-text-primary-inverse, #ffffff); // white
|
|
142
|
+
$text-secondary-inverse: var(--vi-text-secondary-inverse, #d1d5db); // grey-300
|
|
139
143
|
$text-inverse: var(--vi-text-inverse, #ffffff);
|
|
140
144
|
$text-disabled: var(--vi-text-disabled, #9e9e9e); // grey-500
|
|
141
145
|
$text-helper: var(--vi-text-helper, #9e9e9e); // grey-500
|
|
146
|
+
$focus: var(--vi-focus, #3676d0); // blue-700
|
|
147
|
+
$outline: var(--vi-outline, #e5e7eb); // grey-200
|
|
142
148
|
|
|
143
149
|
// -- Borders -----------------------------------------------------------------
|
|
144
150
|
|