@neo-design/foundations 1.0.0-rc.7 → 1.1.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/README.md +1 -2
- package/css/brand-loader.css +190 -0
- package/css/button.css +1 -1
- package/css/checkbox.css +1 -1
- package/css/chips.css +1 -1
- package/css/combobox.css +0 -6
- package/css/drawer.css +129 -0
- package/css/index.css +6 -3
- package/css/radio-button.css +1 -1
- package/css/select.css +0 -1
- package/css/skeleton.css +42 -0
- package/css/spinner.css +22 -5
- package/css/tabs.css +0 -2
- package/css/text-field.css +0 -1
- package/css/toggle.css +2 -2
- package/css/tooltip.css +13 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -15,5 +15,4 @@ The `css/` sheets resolve their variables against the two token sheets, so those
|
|
|
15
15
|
|
|
16
16
|
**How to mount it, and the full reference, are in [the Neo repository](https://github.com/jzamorano-ui/neo-ds)** —
|
|
17
17
|
[Integration](https://github.com/jzamorano-ui/neo-ds/blob/main/docs/dev/INTEGRATION.md) covers installation and mounting, and `docs/dev/` covers the token dictionary, the layout
|
|
18
|
-
recipe and the composition examples.
|
|
19
|
-
`npm i @neo-design/foundations@next`.
|
|
18
|
+
recipe and the composition examples. Install it with `npm i @neo-design/foundations`.
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/* packages/foundations/css/brand-loader.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
|
|
2
|
+
|
|
3
|
+
.brand-loader-shell {
|
|
4
|
+
container-type: inline-size;
|
|
5
|
+
container-name: brand-loader;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
align-items: center;
|
|
10
|
+
min-height: 100dvh;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.brand-loader {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: var(--neo-space-lg-rem);
|
|
19
|
+
width: 100%;
|
|
20
|
+
max-width: 280px;
|
|
21
|
+
margin-inline: auto;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@container brand-loader (min-width: 720px) {
|
|
25
|
+
.brand-loader { max-width: 400px; }
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.brand-loader__isotype {
|
|
29
|
+
display: block;
|
|
30
|
+
flex: none;
|
|
31
|
+
width: 64px;
|
|
32
|
+
height: 64px;
|
|
33
|
+
overflow: visible;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@container brand-loader (min-width: 720px) {
|
|
37
|
+
.brand-loader__isotype { width: 100px; height: 100px; }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.brand-loader__base { fill: var(--fill--brand--secondary--default); }
|
|
41
|
+
|
|
42
|
+
.brand-loader__fill {
|
|
43
|
+
fill: none;
|
|
44
|
+
stroke: var(--fill--brand--primary--default);
|
|
45
|
+
stroke-width: 10;
|
|
46
|
+
stroke-linecap: butt;
|
|
47
|
+
stroke-linejoin: miter;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.brand-loader__fill mask * { stroke: none; }
|
|
51
|
+
|
|
52
|
+
.brand-loader__messages {
|
|
53
|
+
display: grid;
|
|
54
|
+
width: 100%;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.brand-loader__message {
|
|
58
|
+
grid-area: 1 / 1;
|
|
59
|
+
margin: 0;
|
|
60
|
+
text-align: center;
|
|
61
|
+
color: var(--text--base--secondary);
|
|
62
|
+
font-size: var(--neo-type-title-sm-bold-size-rem);
|
|
63
|
+
font-weight: var(--neo-type-title-sm-bold-weight);
|
|
64
|
+
line-height: var(--neo-type-title-sm-bold-line-height-rem);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@container brand-loader (min-width: 720px) {
|
|
68
|
+
.brand-loader__message {
|
|
69
|
+
font-size: var(--neo-type-title-md-bold-size-rem);
|
|
70
|
+
font-weight: var(--neo-type-title-md-bold-weight);
|
|
71
|
+
line-height: var(--neo-type-title-md-bold-line-height-rem);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.brand-loader__load { stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: neo-brand-loader-lobe 3s linear infinite; }
|
|
76
|
+
.brand-loader__load--e { animation-name: neo-brand-loader-e; }
|
|
77
|
+
.brand-loader__load--bar { animation-name: neo-brand-loader-bar; }
|
|
78
|
+
|
|
79
|
+
@keyframes neo-brand-loader-lobe {
|
|
80
|
+
0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
|
|
81
|
+
46.667%, 53.333% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); }
|
|
82
|
+
96.667%, 100% { stroke-dashoffset: -1; }
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@keyframes neo-brand-loader-e {
|
|
86
|
+
0% { stroke-dashoffset: 1; }
|
|
87
|
+
1.667% { stroke-dashoffset: 0.997; }
|
|
88
|
+
3.333% { stroke-dashoffset: 0.988; }
|
|
89
|
+
5% { stroke-dashoffset: 0.9725; }
|
|
90
|
+
6.667% { stroke-dashoffset: 0.9505; }
|
|
91
|
+
8.333% { stroke-dashoffset: 0.9218; }
|
|
92
|
+
10% { stroke-dashoffset: 0.8862; }
|
|
93
|
+
11.667% { stroke-dashoffset: 0.8438; }
|
|
94
|
+
13.333% { stroke-dashoffset: 0.7947; }
|
|
95
|
+
15% { stroke-dashoffset: 0.7394; }
|
|
96
|
+
16.667% { stroke-dashoffset: 0.6783; }
|
|
97
|
+
18.333% { stroke-dashoffset: 0.6123; }
|
|
98
|
+
20% { stroke-dashoffset: 0.5423; }
|
|
99
|
+
21.667% { stroke-dashoffset: 0.4695; }
|
|
100
|
+
23.333% { stroke-dashoffset: 0.3952; }
|
|
101
|
+
25% { stroke-dashoffset: 0.321; }
|
|
102
|
+
26.667% { stroke-dashoffset: 0.2482; }
|
|
103
|
+
28.333% { stroke-dashoffset: 0.1782; }
|
|
104
|
+
30% { stroke-dashoffset: 0.1121; }
|
|
105
|
+
31.667% { stroke-dashoffset: 0.0511; }
|
|
106
|
+
33.333% { stroke-dashoffset: 0; }
|
|
107
|
+
53.333% { stroke-dashoffset: 0; }
|
|
108
|
+
54.881% { stroke-dashoffset: -0.003; }
|
|
109
|
+
56.429% { stroke-dashoffset: -0.012; }
|
|
110
|
+
57.976% { stroke-dashoffset: -0.0275; }
|
|
111
|
+
59.524% { stroke-dashoffset: -0.0495; }
|
|
112
|
+
61.071% { stroke-dashoffset: -0.0782; }
|
|
113
|
+
62.619% { stroke-dashoffset: -0.1138; }
|
|
114
|
+
64.167% { stroke-dashoffset: -0.1562; }
|
|
115
|
+
65.714% { stroke-dashoffset: -0.2053; }
|
|
116
|
+
67.262% { stroke-dashoffset: -0.2606; }
|
|
117
|
+
68.81% { stroke-dashoffset: -0.3217; }
|
|
118
|
+
70.357% { stroke-dashoffset: -0.3877; }
|
|
119
|
+
71.905% { stroke-dashoffset: -0.4577; }
|
|
120
|
+
73.452% { stroke-dashoffset: -0.5305; }
|
|
121
|
+
75% { stroke-dashoffset: -0.6048; }
|
|
122
|
+
76.548% { stroke-dashoffset: -0.679; }
|
|
123
|
+
78.095% { stroke-dashoffset: -0.7518; }
|
|
124
|
+
79.643% { stroke-dashoffset: -0.8218; }
|
|
125
|
+
81.19% { stroke-dashoffset: -0.8879; }
|
|
126
|
+
82.738% { stroke-dashoffset: -0.9489; }
|
|
127
|
+
84.286% { stroke-dashoffset: -1; }
|
|
128
|
+
100% { stroke-dashoffset: -1; }
|
|
129
|
+
}
|
|
130
|
+
@keyframes neo-brand-loader-bar {
|
|
131
|
+
0% { stroke-dashoffset: 1; }
|
|
132
|
+
30% { stroke-dashoffset: 1; }
|
|
133
|
+
31.667% { stroke-dashoffset: 0.8951; }
|
|
134
|
+
33.333% { stroke-dashoffset: 0.7051; }
|
|
135
|
+
35% { stroke-dashoffset: 0.5366; }
|
|
136
|
+
36.667% { stroke-dashoffset: 0.391; }
|
|
137
|
+
38.333% { stroke-dashoffset: 0.2687; }
|
|
138
|
+
40% { stroke-dashoffset: 0.1699; }
|
|
139
|
+
41.667% { stroke-dashoffset: 0.0943; }
|
|
140
|
+
43.333% { stroke-dashoffset: 0.0413; }
|
|
141
|
+
45% { stroke-dashoffset: 0.0102; }
|
|
142
|
+
46.667% { stroke-dashoffset: 0; }
|
|
143
|
+
81.19% { stroke-dashoffset: 0; }
|
|
144
|
+
82.738% { stroke-dashoffset: -0.1049; }
|
|
145
|
+
84.286% { stroke-dashoffset: -0.2949; }
|
|
146
|
+
85.833% { stroke-dashoffset: -0.4634; }
|
|
147
|
+
87.381% { stroke-dashoffset: -0.609; }
|
|
148
|
+
88.929% { stroke-dashoffset: -0.7313; }
|
|
149
|
+
90.476% { stroke-dashoffset: -0.8301; }
|
|
150
|
+
92.024% { stroke-dashoffset: -0.9057; }
|
|
151
|
+
93.571% { stroke-dashoffset: -0.9587; }
|
|
152
|
+
95.119% { stroke-dashoffset: -0.9898; }
|
|
153
|
+
96.667% { stroke-dashoffset: -1; }
|
|
154
|
+
100% { stroke-dashoffset: -1; }
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
@keyframes neo-brand-loader-message-2 {
|
|
158
|
+
0% { opacity: 0; }
|
|
159
|
+
1.667%, 48.333% { opacity: 1; }
|
|
160
|
+
50%, 100% { opacity: 0; }
|
|
161
|
+
}
|
|
162
|
+
.brand-loader__messages--2 .brand-loader__message { animation: neo-brand-loader-message-2 6s linear infinite both; }
|
|
163
|
+
@keyframes neo-brand-loader-message-3 {
|
|
164
|
+
0% { opacity: 0; }
|
|
165
|
+
1.111%, 32.222% { opacity: 1; }
|
|
166
|
+
33.333%, 100% { opacity: 0; }
|
|
167
|
+
}
|
|
168
|
+
.brand-loader__messages--3 .brand-loader__message { animation: neo-brand-loader-message-3 9s linear infinite both; }
|
|
169
|
+
@keyframes neo-brand-loader-message-4 {
|
|
170
|
+
0% { opacity: 0; }
|
|
171
|
+
0.833%, 24.167% { opacity: 1; }
|
|
172
|
+
25%, 100% { opacity: 0; }
|
|
173
|
+
}
|
|
174
|
+
.brand-loader__messages--4 .brand-loader__message { animation: neo-brand-loader-message-4 12s linear infinite both; }
|
|
175
|
+
@keyframes neo-brand-loader-message-5 {
|
|
176
|
+
0% { opacity: 0; }
|
|
177
|
+
0.667%, 19.333% { opacity: 1; }
|
|
178
|
+
20%, 100% { opacity: 0; }
|
|
179
|
+
}
|
|
180
|
+
.brand-loader__messages--5 .brand-loader__message { animation: neo-brand-loader-message-5 15s linear infinite both; }
|
|
181
|
+
.brand-loader__message:nth-child(2) { animation-delay: 3s; }
|
|
182
|
+
.brand-loader__message:nth-child(3) { animation-delay: 6s; }
|
|
183
|
+
.brand-loader__message:nth-child(4) { animation-delay: 9s; }
|
|
184
|
+
.brand-loader__message:nth-child(5) { animation-delay: 12s; }
|
|
185
|
+
|
|
186
|
+
@media (prefers-reduced-motion: reduce) {
|
|
187
|
+
.brand-loader__load { animation: none; stroke-dashoffset: 0; }
|
|
188
|
+
.brand-loader__messages .brand-loader__message { animation: none; }
|
|
189
|
+
.brand-loader__messages .brand-loader__message:not(:first-child) { visibility: hidden; }
|
|
190
|
+
}
|
package/css/button.css
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
cursor: pointer;
|
|
11
11
|
font-weight: var(--neo-type-body-lg-medium-weight);
|
|
12
12
|
white-space: nowrap;
|
|
13
|
-
transition: background
|
|
13
|
+
transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
14
14
|
text-decoration: none;
|
|
15
15
|
}
|
|
16
16
|
|
package/css/checkbox.css
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
align-items: center;
|
|
37
37
|
justify-content: center;
|
|
38
38
|
flex-shrink: 0;
|
|
39
|
-
transition: background
|
|
39
|
+
transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.checkbox__control svg {
|
package/css/chips.css
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
color: var(--text--base--default);
|
|
18
18
|
cursor: pointer;
|
|
19
19
|
white-space: nowrap;
|
|
20
|
-
transition: background
|
|
20
|
+
transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
|
package/css/combobox.css
CHANGED
|
@@ -48,7 +48,6 @@
|
|
|
48
48
|
border-radius: var(--neo-radius-sm);
|
|
49
49
|
background: var(--fill--base--default);
|
|
50
50
|
width: 100%;
|
|
51
|
-
transition: border-color 100ms ease, box-shadow 100ms ease;
|
|
52
51
|
}
|
|
53
52
|
|
|
54
53
|
.combobox__input {
|
|
@@ -109,11 +108,6 @@
|
|
|
109
108
|
height: var(--neo-icon-size-md-rem);
|
|
110
109
|
fill: var(--icon--base--secondary);
|
|
111
110
|
color: var(--icon--base--secondary);
|
|
112
|
-
transition: transform 150ms ease;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@media (prefers-reduced-motion: reduce) {
|
|
116
|
-
.combobox__chevron { transition: none; }
|
|
117
111
|
}
|
|
118
112
|
|
|
119
113
|
|
package/css/drawer.css
ADDED
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/* packages/foundations/css/drawer.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
|
|
2
|
+
|
|
3
|
+
.drawer {
|
|
4
|
+
position: fixed;
|
|
5
|
+
top: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
z-index: 1300;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
align-items: flex-start;
|
|
12
|
+
width: 540px;
|
|
13
|
+
max-width: 100vw;
|
|
14
|
+
height: 100dvh;
|
|
15
|
+
background: var(--surface--base--default);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
.drawer > * {
|
|
20
|
+
align-self: stretch;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.drawer__header {
|
|
24
|
+
flex: 0 0 auto;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
justify-content: center;
|
|
28
|
+
align-items: flex-end;
|
|
29
|
+
gap: var(--neo-space-md-rem);
|
|
30
|
+
padding-inline: var(--neo-space-xl-rem);
|
|
31
|
+
padding-block: var(--neo-space-lg-rem);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.drawer[data-scroll="top"] .drawer__header,
|
|
35
|
+
.drawer[data-scroll="mid"] .drawer__header,
|
|
36
|
+
.drawer[data-scroll="bottom"] .drawer__header {
|
|
37
|
+
border-bottom: var(--neo-stroke-xs) solid var(--border--base--secondary);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.drawer__header > * {
|
|
41
|
+
align-self: stretch;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.drawer__title-row {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
height: 48px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.drawer__title {
|
|
52
|
+
margin: 0;
|
|
53
|
+
flex: 1 1 auto;
|
|
54
|
+
min-width: 0;
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
text-overflow: ellipsis;
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
color: var(--text--base--default);
|
|
59
|
+
font-size: var(--neo-type-title-sm-bold-size-rem);
|
|
60
|
+
font-weight: var(--neo-type-title-sm-bold-weight);
|
|
61
|
+
line-height: var(--neo-type-title-sm-bold-line-height-rem);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.drawer__close {
|
|
65
|
+
flex: 0 0 auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.drawer__content {
|
|
69
|
+
display: flex;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
flex: 1 1 auto;
|
|
72
|
+
overflow-y: auto;
|
|
73
|
+
padding-inline: var(--neo-space-xl-rem);
|
|
74
|
+
padding-block: 0 var(--neo-space-lg-rem);
|
|
75
|
+
color: var(--text--base--default);
|
|
76
|
+
font-size: var(--neo-type-body-lg-regular-size-rem);
|
|
77
|
+
font-weight: var(--neo-type-body-lg-regular-weight);
|
|
78
|
+
line-height: var(--neo-type-body-lg-regular-line-height-rem);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.drawer__content:focus-visible {
|
|
82
|
+
outline: none;
|
|
83
|
+
box-shadow:
|
|
84
|
+
inset 0 0 0 var(--neo-stroke-focus-ring-width) var(--focus--ring--default),
|
|
85
|
+
inset 0 0 0 calc(var(--neo-stroke-focus-ring-width) * 2) var(--focus--gap--default);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.drawer__image {
|
|
89
|
+
display: block;
|
|
90
|
+
flex: 0 0 auto;
|
|
91
|
+
height: 224px;
|
|
92
|
+
margin-inline: calc(-1 * var(--neo-space-xl-rem));
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
img.drawer__image,
|
|
97
|
+
.drawer__image > img,
|
|
98
|
+
.drawer__image > picture,
|
|
99
|
+
.drawer__image > video {
|
|
100
|
+
width: calc(100% + 2 * var(--neo-space-xl-rem));
|
|
101
|
+
object-fit: cover;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.drawer__image > img,
|
|
105
|
+
.drawer__image > picture,
|
|
106
|
+
.drawer__image > video {
|
|
107
|
+
display: block;
|
|
108
|
+
width: 100%;
|
|
109
|
+
height: 100%;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.drawer__actions {
|
|
113
|
+
flex: 0 0 auto;
|
|
114
|
+
display: flex;
|
|
115
|
+
flex-direction: column;
|
|
116
|
+
gap: var(--neo-space-md-rem);
|
|
117
|
+
padding-inline: var(--neo-space-xl-rem);
|
|
118
|
+
padding-block: var(--neo-space-lg-rem) var(--neo-space-2xl-rem);
|
|
119
|
+
background: var(--surface--base--default);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.drawer__actions .btn {
|
|
123
|
+
width: 100%;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.drawer__actions[data-scroll="top"],
|
|
127
|
+
.drawer__actions[data-scroll="mid"] {
|
|
128
|
+
border-top: var(--neo-stroke-xs) solid var(--border--base--secondary);
|
|
129
|
+
}
|
package/css/index.css
CHANGED
|
@@ -5,12 +5,14 @@
|
|
|
5
5
|
@import './badge.css';
|
|
6
6
|
@import './banner.css';
|
|
7
7
|
@import './bottom-sheet.css';
|
|
8
|
+
@import './brand-loader.css';
|
|
8
9
|
@import './button.css';
|
|
9
10
|
@import './button-icon.css';
|
|
10
11
|
@import './checkbox.css';
|
|
11
12
|
@import './chips.css';
|
|
12
13
|
@import './chips-group.css';
|
|
13
14
|
@import './combobox.css';
|
|
15
|
+
@import './drawer.css';
|
|
14
16
|
@import './empty-state.css';
|
|
15
17
|
@import './link.css';
|
|
16
18
|
@import './menu.css';
|
|
@@ -18,6 +20,7 @@
|
|
|
18
20
|
@import './modal-fullscreen.css';
|
|
19
21
|
@import './radio-button.css';
|
|
20
22
|
@import './select.css';
|
|
23
|
+
@import './skeleton.css';
|
|
21
24
|
@import './snackbar.css';
|
|
22
25
|
@import './spinner.css';
|
|
23
26
|
@import './tabs.css';
|
|
@@ -27,10 +30,10 @@
|
|
|
27
30
|
@import './tooltip.css';
|
|
28
31
|
|
|
29
32
|
.alert, .aspect-ratio, .badge, .notification, .banner, .btn, .checkbox, .checkbox-group,
|
|
30
|
-
.bottom-sheet, .chip, .chips-group, .combobox, .empty-state, .empty-state-shell, .link, .menu-item, .menu-list, .menu-divider, .modal-overlay, .modal-dialog,
|
|
31
|
-
.modal-full, .radio, .radio-group, .select, .snackbar, .spinner, .tabs, .tag, .field, .toggle, .tooltip,
|
|
33
|
+
.bottom-sheet, .brand-loader, .brand-loader-shell, .chip, .chips-group, .combobox, .drawer, .empty-state, .empty-state-shell, .link, .menu-item, .menu-list, .menu-divider, .modal-overlay, .modal-dialog,
|
|
34
|
+
.modal-full, .radio, .radio-group, .select, .skeleton, .snackbar, .spinner, .tabs, .tag, .field, .toggle, .tooltip,
|
|
32
35
|
.alert *, .aspect-ratio *, .badge *, .banner *, .btn *, .checkbox *, .chip *, .combobox *,
|
|
33
|
-
.bottom-sheet *, .empty-state *, .menu-item *, .menu-list *, .modal-dialog *, .modal-full *, .radio *, .select *, .snackbar *, .tabs *,
|
|
36
|
+
.bottom-sheet *, .brand-loader *, .drawer *, .empty-state *, .menu-item *, .menu-list *, .modal-dialog *, .modal-full *, .radio *, .select *, .snackbar *, .tabs *,
|
|
34
37
|
.tag *, .field *, .toggle *, .tooltip *,
|
|
35
38
|
[role="tablist"], [role="tab"] {
|
|
36
39
|
box-sizing: border-box;
|
package/css/radio-button.css
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
align-items: center;
|
|
37
37
|
justify-content: center;
|
|
38
38
|
flex-shrink: 0;
|
|
39
|
-
transition: background
|
|
39
|
+
transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
40
40
|
position: relative;
|
|
41
41
|
}
|
|
42
42
|
|
package/css/select.css
CHANGED
package/css/skeleton.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/* packages/foundations/css/skeleton.css — emitted without comments. The reasoning behind each decision lives in Neo's source repository. */
|
|
2
|
+
|
|
3
|
+
.skeleton {
|
|
4
|
+
display: block;
|
|
5
|
+
position: relative;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
-webkit-mask-image: -webkit-radial-gradient(white, black);
|
|
8
|
+
height: 1.2em;
|
|
9
|
+
background-color: var(--fill--base--medium);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.skeleton--text {
|
|
13
|
+
height: auto;
|
|
14
|
+
margin: 0;
|
|
15
|
+
transform-origin: 0 55%;
|
|
16
|
+
transform: scale(1, 0.6);
|
|
17
|
+
border-radius: var(--neo-radius-xs) / calc(var(--neo-radius-xs) / 0.6);
|
|
18
|
+
}
|
|
19
|
+
.skeleton--text:empty::before { content: '\00a0'; }
|
|
20
|
+
|
|
21
|
+
.skeleton--circular { width: 40px; height: 40px; border-radius: var(--neo-radius-pill); }
|
|
22
|
+
|
|
23
|
+
.skeleton--rounded { height: 60px; border-radius: var(--neo-radius-xs); }
|
|
24
|
+
|
|
25
|
+
.skeleton::after {
|
|
26
|
+
content: '';
|
|
27
|
+
position: absolute;
|
|
28
|
+
inset: 0;
|
|
29
|
+
transform: translateX(-100%);
|
|
30
|
+
background: linear-gradient(90deg, var(--fill--base--medium), var(--fill--base--light), var(--fill--base--medium));
|
|
31
|
+
animation: neo-skeleton-wave 2s linear 0.5s infinite;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@keyframes neo-skeleton-wave {
|
|
35
|
+
0% { transform: translateX(-100%); }
|
|
36
|
+
50% { transform: translateX(100%); }
|
|
37
|
+
100% { transform: translateX(100%); }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-reduced-motion: reduce) {
|
|
41
|
+
.skeleton::after { animation: none; }
|
|
42
|
+
}
|
package/css/spinner.css
CHANGED
|
@@ -2,15 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
.spinner {
|
|
4
4
|
display: inline-block;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
position: relative;
|
|
6
|
+
animation: neo-spin 1.4s linear infinite;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.spinner::before {
|
|
10
|
+
content: '';
|
|
11
|
+
position: absolute;
|
|
12
|
+
inset: 0;
|
|
13
|
+
background-color: var(--icon--base--default);
|
|
14
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 22 44 44'%3E%3Cstyle%3Ecircle%7Bstroke-dasharray:80px,200px;stroke-dashoffset:0;animation:d 1.4s ease-in-out infinite%7D@keyframes d%7B0%25%7Bstroke-dasharray:1px,200px;stroke-dashoffset:0%7D50%25%7Bstroke-dasharray:100px,200px;stroke-dashoffset:-15px%7D100%25%7Bstroke-dasharray:100px,200px;stroke-dashoffset:-125px%7D%7D%3C/style%3E%3Ccircle cx='44' cy='44' r='20.2' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
15
|
+
-webkit-mask-position: center;
|
|
16
|
+
-webkit-mask-size: 100%;
|
|
17
|
+
-webkit-mask-repeat: no-repeat;
|
|
18
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 22 44 44'%3E%3Cstyle%3Ecircle%7Bstroke-dasharray:80px,200px;stroke-dashoffset:0;animation:d 1.4s ease-in-out infinite%7D@keyframes d%7B0%25%7Bstroke-dasharray:1px,200px;stroke-dashoffset:0%7D50%25%7Bstroke-dasharray:100px,200px;stroke-dashoffset:-15px%7D100%25%7Bstroke-dasharray:100px,200px;stroke-dashoffset:-125px%7D%7D%3C/style%3E%3Ccircle cx='44' cy='44' r='20.2' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
19
|
+
mask-position: center;
|
|
20
|
+
mask-size: 100%;
|
|
21
|
+
mask-repeat: no-repeat;
|
|
9
22
|
}
|
|
10
23
|
|
|
11
24
|
.spinner--small { width: 20px; height: 20px; }
|
|
12
25
|
.spinner--medium { width: 24px; height: 24px; }
|
|
13
|
-
.spinner--large { width: 32px; height: 32px;
|
|
26
|
+
.spinner--large { width: 32px; height: 32px; }
|
|
14
27
|
|
|
15
28
|
@keyframes neo-spin {
|
|
16
29
|
to { transform: rotate(360deg); }
|
|
@@ -18,4 +31,8 @@
|
|
|
18
31
|
|
|
19
32
|
@media (prefers-reduced-motion: reduce) {
|
|
20
33
|
.spinner { animation: none; }
|
|
34
|
+
.spinner::before {
|
|
35
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 22 44 44'%3E%3Cstyle%3Ecircle%7Bstroke-dasharray:80px,200px;stroke-dashoffset:0%7D%3C/style%3E%3Ccircle cx='44' cy='44' r='20.2' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
36
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='22 22 44 44'%3E%3Cstyle%3Ecircle%7Bstroke-dasharray:80px,200px;stroke-dashoffset:0%7D%3C/style%3E%3Ccircle cx='44' cy='44' r='20.2' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
37
|
+
}
|
|
21
38
|
}
|
package/css/tabs.css
CHANGED
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
color: var(--text--base--secondary);
|
|
37
37
|
position: relative;
|
|
38
38
|
white-space: nowrap;
|
|
39
|
-
transition: color 100ms ease, background 100ms ease;
|
|
40
39
|
}
|
|
41
40
|
|
|
42
41
|
[role="tab"]:first-child { border-top-left-radius: var(--neo-radius-sm); }
|
|
@@ -69,7 +68,6 @@
|
|
|
69
68
|
right: 0;
|
|
70
69
|
height: var(--neo-stroke-sm);
|
|
71
70
|
background: var(--border--base--default);
|
|
72
|
-
transition: background 100ms ease;
|
|
73
71
|
}
|
|
74
72
|
|
|
75
73
|
[role="tab"]:hover:not([aria-selected="true"]):not([aria-disabled="true"]) {
|
package/css/text-field.css
CHANGED
package/css/toggle.css
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
padding-inline: var(--neo-space-xs-rem);
|
|
21
21
|
border-radius: var(--neo-radius-pill);
|
|
22
22
|
background: var(--fill--base--strong);
|
|
23
|
-
transition: background
|
|
23
|
+
transition: background 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.toggle__thumb {
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
height: 16px;
|
|
29
29
|
border-radius: var(--neo-radius-pill);
|
|
30
30
|
background: var(--fill--base--default);
|
|
31
|
-
transition: transform
|
|
31
|
+
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.toggle[aria-checked="true"] .toggle__track { background: var(--fill--semantic--success--solid); }
|
package/css/tooltip.css
CHANGED
|
@@ -22,11 +22,16 @@
|
|
|
22
22
|
border: 6px solid transparent;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.tooltip--top::before { content: "";
|
|
26
|
-
.tooltip--bottom::before { content: "";
|
|
27
|
-
.tooltip--left::before { content: "";
|
|
28
|
-
.tooltip--right::before { content: "";
|
|
29
|
-
.tooltip--top-start
|
|
30
|
-
.tooltip--
|
|
31
|
-
.tooltip--
|
|
32
|
-
.tooltip--
|
|
25
|
+
.tooltip--top::before { content: ""; top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--fill--semantic--info--solid); }
|
|
26
|
+
.tooltip--bottom::before { content: ""; bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--fill--semantic--info--solid); }
|
|
27
|
+
.tooltip--left::before { content: ""; left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--fill--semantic--info--solid); }
|
|
28
|
+
.tooltip--right::before { content: ""; right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--fill--semantic--info--solid); }
|
|
29
|
+
.tooltip--top, .tooltip--top-start, .tooltip--top-end { margin-bottom: calc(var(--neo-space-sm-rem) + 6px); }
|
|
30
|
+
.tooltip--bottom, .tooltip--bottom-start, .tooltip--bottom-end { margin-top: calc(var(--neo-space-sm-rem) + 6px); }
|
|
31
|
+
.tooltip--left { margin-right: calc(var(--neo-space-sm-rem) + 6px); }
|
|
32
|
+
.tooltip--right { margin-left: calc(var(--neo-space-sm-rem) + 6px); }
|
|
33
|
+
|
|
34
|
+
.tooltip--top-start::before { content: ""; top: 100%; left: var(--neo-space-md-rem); border-top-color: var(--fill--semantic--info--solid); }
|
|
35
|
+
.tooltip--top-end::before { content: ""; top: 100%; right: var(--neo-space-md-rem); border-top-color: var(--fill--semantic--info--solid); }
|
|
36
|
+
.tooltip--bottom-start::before { content: ""; bottom: 100%; left: var(--neo-space-md-rem); border-bottom-color: var(--fill--semantic--info--solid); }
|
|
37
|
+
.tooltip--bottom-end::before { content: ""; bottom: 100%; right: var(--neo-space-md-rem); border-bottom-color: var(--fill--semantic--info--solid); }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo-design/foundations",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Neo — the system foundations: semantic tokens in JS and CSS, icons and the plain CSS layer. It does not depend on React or Material UI.",
|
|
5
5
|
"homepage": "https://github.com/jzamorano-ui/neo-ds/blob/main/docs/dev/INTEGRATION.md",
|
|
6
6
|
"repository": {
|