@vialiq/flux-ui 0.1.2 → 0.2.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/_index.scss +2 -0
- package/components/_radio.scss +176 -0
- package/package.json +1 -1
package/components/_index.scss
CHANGED
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Radio and Radio Group component base styles.
|
|
3
|
+
*
|
|
4
|
+
* Provides the host-agnostic foundation for radio buttons:
|
|
5
|
+
* layout, circle structure, dot animations, state colors, focus styles.
|
|
6
|
+
* Sizing and positioning custom properties are available for overrides.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@use '../styles/variables' as tokens;
|
|
10
|
+
|
|
11
|
+
@layer components {
|
|
12
|
+
// -------------------------------------------------------------------------
|
|
13
|
+
// Radio Group Container
|
|
14
|
+
// -------------------------------------------------------------------------
|
|
15
|
+
.radio-group {
|
|
16
|
+
border: none;
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: var(--vi-radio-group-spacing-field-gap, #{tokens.$spacing-xs});
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.radio-group-legend {
|
|
26
|
+
font-family: #{tokens.$font-family-base};
|
|
27
|
+
font-size: var(--vi-radio-group-label-font-size, #{tokens.$font-size-base});
|
|
28
|
+
font-weight: #{tokens.$font-weight-semibold};
|
|
29
|
+
color: var(--vi-radio-group-label-color, #{tokens.$color-foreground});
|
|
30
|
+
padding: 0;
|
|
31
|
+
margin: 0;
|
|
32
|
+
margin-block-end: var(--vi-radio-group-legend-margin-bottom, #{tokens.$spacing-xs});
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.radio-group-items {
|
|
36
|
+
display: flex;
|
|
37
|
+
gap: var(--vi-radio-group-gap, 8px);
|
|
38
|
+
|
|
39
|
+
&[orientation="vertical"] {
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&[orientation="horizontal"] {
|
|
44
|
+
flex-direction: row;
|
|
45
|
+
flex-wrap: wrap;
|
|
46
|
+
gap: var(--vi-radio-group-gap-horizontal, 24px);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.radio-group-helper {
|
|
51
|
+
display: block;
|
|
52
|
+
font-family: #{tokens.$font-family-base};
|
|
53
|
+
font-size: var(--vi-radio-group-helper-font-size, #{tokens.$font-size-xs});
|
|
54
|
+
color: var(--vi-radio-group-helper-color, #{tokens.$text-disabled});
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.radio-group-validation {
|
|
58
|
+
display: block;
|
|
59
|
+
font-family: #{tokens.$font-family-base};
|
|
60
|
+
font-size: var(--vi-radio-group-validation-font-size, #{tokens.$font-size-xs});
|
|
61
|
+
color: var(--vi-radio-group-validation-color, #{tokens.$text-disabled});
|
|
62
|
+
margin-block-start: var(--vi-radio-group-validation-margin-top, #{tokens.$spacing-xs});
|
|
63
|
+
|
|
64
|
+
&.radio-group-validation--invalid {
|
|
65
|
+
color: var(--vi-radio-group-error-color, #{tokens.$color-error});
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&.radio-group-validation--valid {
|
|
69
|
+
color: var(--vi-radio-group-success-color, #{tokens.$color-success});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// -------------------------------------------------------------------------
|
|
74
|
+
// Individual Radio Component
|
|
75
|
+
// -------------------------------------------------------------------------
|
|
76
|
+
.radio-wrapper {
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: var(--vi-radio-label-gap, 8px);
|
|
80
|
+
cursor: pointer;
|
|
81
|
+
font-family: #{tokens.$font-family-base};
|
|
82
|
+
font-size: var(--vi-radio-label-font-size, #{tokens.$font-size-base});
|
|
83
|
+
line-height: #{tokens.$line-height-normal};
|
|
84
|
+
color: var(--vi-radio-label-color, #{tokens.$color-foreground});
|
|
85
|
+
position: relative;
|
|
86
|
+
user-select: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// Visually hide the native input but keep it keyboard accessible
|
|
90
|
+
.radio-input {
|
|
91
|
+
position: absolute !important;
|
|
92
|
+
clip-path: inset(50%) !important;
|
|
93
|
+
overflow: hidden !important;
|
|
94
|
+
width: 1px !important;
|
|
95
|
+
height: 1px !important;
|
|
96
|
+
margin: -1px !important;
|
|
97
|
+
padding: 0 !important;
|
|
98
|
+
border: 0 !important;
|
|
99
|
+
white-space: nowrap !important;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.radio-circle {
|
|
103
|
+
box-sizing: border-box;
|
|
104
|
+
display: inline-flex;
|
|
105
|
+
align-items: center;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
width: var(--vi-radio-size, 18px);
|
|
108
|
+
height: var(--vi-radio-size, 18px);
|
|
109
|
+
border: #{tokens.$border-width-base} solid var(--vi-radio-border-color, #{tokens.$border-04});
|
|
110
|
+
border-radius: 50%;
|
|
111
|
+
background-color: var(--vi-radio-background-color, #{tokens.$color-background});
|
|
112
|
+
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
113
|
+
flex-shrink: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.radio-dot {
|
|
117
|
+
box-sizing: border-box;
|
|
118
|
+
width: var(--vi-radio-dot-size, 8px);
|
|
119
|
+
height: var(--vi-radio-dot-size, 8px);
|
|
120
|
+
border-radius: 50%;
|
|
121
|
+
background-color: var(--vi-radio-dot-color, #{tokens.$color-primary});
|
|
122
|
+
transform: scale(0);
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms ease;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Checked state
|
|
128
|
+
.radio-input:checked + .radio-circle {
|
|
129
|
+
border-color: var(--vi-radio-border-color-checked, #{tokens.$color-primary});
|
|
130
|
+
|
|
131
|
+
.radio-dot {
|
|
132
|
+
transform: scale(1);
|
|
133
|
+
opacity: 1;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// Focus ring
|
|
138
|
+
.radio-input:focus-visible + .radio-circle {
|
|
139
|
+
outline: #{tokens.$border-width-base} solid var(--vi-radio-focus-ring-color, #{tokens.$color-primary});
|
|
140
|
+
outline-offset: 2px;
|
|
141
|
+
box-shadow: 0 0 0 3px var(--vi-radio-focus-ring-glow, #{tokens.$color-blue-200});
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Hover state (only on non-disabled)
|
|
145
|
+
.radio-wrapper:hover:not(.radio-wrapper--disabled) {
|
|
146
|
+
.radio-circle {
|
|
147
|
+
border-color: var(--vi-radio-border-color-hover, #{tokens.$border-inverse-03});
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.radio-input:checked + .radio-circle {
|
|
151
|
+
border-color: var(--vi-radio-border-color-checked-hover, #{tokens.$color-primary});
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Disabled state
|
|
156
|
+
.radio-wrapper--disabled {
|
|
157
|
+
cursor: not-allowed;
|
|
158
|
+
opacity: var(--vi-radio-disabled-opacity, 0.5);
|
|
159
|
+
|
|
160
|
+
.radio-circle {
|
|
161
|
+
background-color: #{tokens.$layer-disabled};
|
|
162
|
+
border-color: #{tokens.$border-02};
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.radio-dot {
|
|
166
|
+
background-color: #{tokens.$text-disabled};
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
@media (prefers-reduced-motion: reduce) {
|
|
171
|
+
.radio-circle,
|
|
172
|
+
.radio-dot {
|
|
173
|
+
transition: none;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|