@hypoth-ui/css 0.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/LICENSE +21 -0
- package/README.md +55 -0
- package/dist/index.css +27 -0
- package/package.json +51 -0
- package/src/layers/animations.css +217 -0
- package/src/layers/base.css +148 -0
- package/src/layers/components.css +53 -0
- package/src/layers/high-contrast.css +263 -0
- package/src/layers/index.css +13 -0
- package/src/layers/overrides.css +3 -0
- package/src/layers/reset.css +82 -0
- package/src/layers/tokens.css +3 -0
- package/src/layers/utilities.css +483 -0
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Animation Layer
|
|
3
|
+
*
|
|
4
|
+
* CSS keyframes and utility classes for component enter/exit transitions.
|
|
5
|
+
* All animations reference motion tokens for consistent timing across the system.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* =============================================================================
|
|
9
|
+
Keyframes
|
|
10
|
+
============================================================================= */
|
|
11
|
+
|
|
12
|
+
/* Fade animations */
|
|
13
|
+
@keyframes ds-fade-in {
|
|
14
|
+
from {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
}
|
|
17
|
+
to {
|
|
18
|
+
opacity: 1;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@keyframes ds-fade-out {
|
|
23
|
+
from {
|
|
24
|
+
opacity: 1;
|
|
25
|
+
}
|
|
26
|
+
to {
|
|
27
|
+
opacity: 0;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Scale animations (dialog) */
|
|
32
|
+
@keyframes ds-scale-in {
|
|
33
|
+
from {
|
|
34
|
+
opacity: 0;
|
|
35
|
+
transform: scale(0.95);
|
|
36
|
+
}
|
|
37
|
+
to {
|
|
38
|
+
opacity: 1;
|
|
39
|
+
transform: scale(1);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes ds-scale-out {
|
|
44
|
+
from {
|
|
45
|
+
opacity: 1;
|
|
46
|
+
transform: scale(1);
|
|
47
|
+
}
|
|
48
|
+
to {
|
|
49
|
+
opacity: 0;
|
|
50
|
+
transform: scale(0.95);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Slide animations (popover, menu, tooltip) */
|
|
55
|
+
@keyframes ds-slide-up {
|
|
56
|
+
from {
|
|
57
|
+
opacity: 0;
|
|
58
|
+
transform: translateY(4px);
|
|
59
|
+
}
|
|
60
|
+
to {
|
|
61
|
+
opacity: 1;
|
|
62
|
+
transform: translateY(0);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@keyframes ds-slide-down {
|
|
67
|
+
from {
|
|
68
|
+
opacity: 1;
|
|
69
|
+
transform: translateY(0);
|
|
70
|
+
}
|
|
71
|
+
to {
|
|
72
|
+
opacity: 0;
|
|
73
|
+
transform: translateY(4px);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* =============================================================================
|
|
78
|
+
Animation Utility Classes
|
|
79
|
+
============================================================================= */
|
|
80
|
+
|
|
81
|
+
/* Entry animations */
|
|
82
|
+
.ds-animate-fade-in {
|
|
83
|
+
animation: ds-fade-in var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out) forwards;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.ds-animate-scale-in {
|
|
87
|
+
animation: ds-scale-in var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out) forwards;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.ds-animate-slide-up {
|
|
91
|
+
animation: ds-slide-up var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out) forwards;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Exit animations */
|
|
95
|
+
.ds-animate-fade-out {
|
|
96
|
+
animation: ds-fade-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in) forwards;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.ds-animate-scale-out {
|
|
100
|
+
animation: ds-scale-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in) forwards;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.ds-animate-slide-down {
|
|
104
|
+
animation: ds-slide-down var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in) forwards;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* =============================================================================
|
|
108
|
+
Data Attribute Animations (Component Integration)
|
|
109
|
+
============================================================================= */
|
|
110
|
+
|
|
111
|
+
/* Dialog animations */
|
|
112
|
+
ds-dialog-content[data-state="open"] {
|
|
113
|
+
animation: ds-fade-in var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out),
|
|
114
|
+
ds-scale-in var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
ds-dialog-content[data-state="closed"] {
|
|
118
|
+
animation: ds-fade-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in),
|
|
119
|
+
ds-scale-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Popover animations */
|
|
123
|
+
ds-popover-content[data-state="open"] {
|
|
124
|
+
animation: ds-fade-in var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out),
|
|
125
|
+
ds-slide-up var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
ds-popover-content[data-state="closed"] {
|
|
129
|
+
animation: ds-fade-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in),
|
|
130
|
+
ds-slide-down var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* Tooltip animations */
|
|
134
|
+
ds-tooltip-content[data-state="open"] {
|
|
135
|
+
animation: ds-fade-in var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-out);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
ds-tooltip-content[data-state="closed"] {
|
|
139
|
+
animation: ds-fade-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Menu animations */
|
|
143
|
+
ds-menu-content[data-state="open"] {
|
|
144
|
+
animation: ds-fade-in var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out),
|
|
145
|
+
ds-slide-up var(--ds-motion-duration-normal) var(--ds-motion-easing-ease-out);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
ds-menu-content[data-state="closed"] {
|
|
149
|
+
animation: ds-fade-out var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in),
|
|
150
|
+
ds-slide-down var(--ds-motion-duration-fast) var(--ds-motion-easing-ease-in);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* =============================================================================
|
|
154
|
+
Reduced Motion Support
|
|
155
|
+
============================================================================= */
|
|
156
|
+
|
|
157
|
+
@media (prefers-reduced-motion: reduce) {
|
|
158
|
+
/* Disable all DS animations */
|
|
159
|
+
.ds-animate-fade-in,
|
|
160
|
+
.ds-animate-fade-out,
|
|
161
|
+
.ds-animate-scale-in,
|
|
162
|
+
.ds-animate-scale-out,
|
|
163
|
+
.ds-animate-slide-up,
|
|
164
|
+
.ds-animate-slide-down,
|
|
165
|
+
ds-dialog-content,
|
|
166
|
+
ds-popover-content,
|
|
167
|
+
ds-tooltip-content,
|
|
168
|
+
ds-menu-content {
|
|
169
|
+
animation: none !important;
|
|
170
|
+
transition: none !important;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Ensure elements are visible in their final state */
|
|
174
|
+
ds-dialog-content[data-state="open"],
|
|
175
|
+
ds-popover-content[data-state="open"],
|
|
176
|
+
ds-tooltip-content[data-state="open"],
|
|
177
|
+
ds-menu-content[data-state="open"] {
|
|
178
|
+
opacity: 1;
|
|
179
|
+
transform: none;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* =============================================================================
|
|
184
|
+
Custom Animation Overrides (via data attributes)
|
|
185
|
+
============================================================================= */
|
|
186
|
+
|
|
187
|
+
/* Allow components to specify custom enter animations */
|
|
188
|
+
[data-animate-in~="fade-in"][data-state="open"] {
|
|
189
|
+
animation-name: ds-fade-in;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
[data-animate-in~="scale-in"][data-state="open"] {
|
|
193
|
+
animation-name: ds-scale-in;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
[data-animate-in~="slide-up"][data-state="open"] {
|
|
197
|
+
animation-name: ds-slide-up;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Allow components to specify custom exit animations */
|
|
201
|
+
[data-animate-out~="fade-out"][data-state="closed"] {
|
|
202
|
+
animation-name: ds-fade-out;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
[data-animate-out~="scale-out"][data-state="closed"] {
|
|
206
|
+
animation-name: ds-scale-out;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
[data-animate-out~="slide-down"][data-state="closed"] {
|
|
210
|
+
animation-name: ds-slide-down;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Disable animations per-component */
|
|
214
|
+
[data-no-animation] {
|
|
215
|
+
animation: none !important;
|
|
216
|
+
transition: none !important;
|
|
217
|
+
}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/* Base Element Styles */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
color-scheme: light dark;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
html {
|
|
8
|
+
font-family: var(--ds-font-family-sans);
|
|
9
|
+
font-size: var(--ds-font-size-base, 1rem);
|
|
10
|
+
line-height: var(--ds-font-lineHeight-normal, 1.5);
|
|
11
|
+
color: var(--ds-color-foreground-default);
|
|
12
|
+
background-color: var(--ds-color-background-default);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
min-height: 100dvh;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Typography */
|
|
21
|
+
h1,
|
|
22
|
+
h2,
|
|
23
|
+
h3,
|
|
24
|
+
h4,
|
|
25
|
+
h5,
|
|
26
|
+
h6 {
|
|
27
|
+
font-weight: var(--ds-font-weight-semibold);
|
|
28
|
+
line-height: var(--ds-font-lineHeight-tight, 1.25);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
h1 {
|
|
32
|
+
font-size: var(--ds-font-size-4xl);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
h2 {
|
|
36
|
+
font-size: var(--ds-font-size-3xl);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
h3 {
|
|
40
|
+
font-size: var(--ds-font-size-2xl);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
h4 {
|
|
44
|
+
font-size: var(--ds-font-size-xl);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
h5 {
|
|
48
|
+
font-size: var(--ds-font-size-lg);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
h6 {
|
|
52
|
+
font-size: var(--ds-font-size-base);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
p {
|
|
56
|
+
margin-block: var(--ds-spacing-component-gap-sm);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
strong,
|
|
60
|
+
b {
|
|
61
|
+
font-weight: var(--ds-font-weight-bold);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
small {
|
|
65
|
+
font-size: var(--ds-font-size-sm);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
code,
|
|
69
|
+
kbd,
|
|
70
|
+
samp,
|
|
71
|
+
pre {
|
|
72
|
+
font-family: var(--ds-font-family-mono);
|
|
73
|
+
font-size: 0.875em;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
pre {
|
|
77
|
+
overflow-x: auto;
|
|
78
|
+
padding: var(--ds-spacing-component-padding-md);
|
|
79
|
+
background-color: var(--ds-color-background-muted);
|
|
80
|
+
border-radius: var(--ds-radius-md);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
code {
|
|
84
|
+
padding: 0.125em 0.25em;
|
|
85
|
+
background-color: var(--ds-color-background-muted);
|
|
86
|
+
border-radius: var(--ds-radius-sm);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
pre code {
|
|
90
|
+
padding: 0;
|
|
91
|
+
background-color: transparent;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Links */
|
|
95
|
+
a:not([class]) {
|
|
96
|
+
color: var(--ds-color-primary-default);
|
|
97
|
+
text-decoration: underline;
|
|
98
|
+
text-underline-offset: 0.2em;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
a:not([class]):hover {
|
|
102
|
+
color: var(--ds-color-primary-hover);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Focus styles */
|
|
106
|
+
:focus-visible {
|
|
107
|
+
outline: 2px solid var(--ds-color-focus-ring);
|
|
108
|
+
outline-offset: 2px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Selection */
|
|
112
|
+
::selection {
|
|
113
|
+
background-color: var(--ds-color-primary-subtle);
|
|
114
|
+
color: var(--ds-color-foreground-default);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Horizontal rule */
|
|
118
|
+
hr {
|
|
119
|
+
border: none;
|
|
120
|
+
border-top: 1px solid var(--ds-color-border-default);
|
|
121
|
+
margin-block: var(--ds-spacing-layout-stack-md);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Lists with class styling opt-in */
|
|
125
|
+
ul:where(:not([class])),
|
|
126
|
+
ol:where(:not([class])) {
|
|
127
|
+
padding-left: var(--ds-spacing-component-padding-xl);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
ul:where(:not([class])) {
|
|
131
|
+
list-style-type: disc;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
ol:where(:not([class])) {
|
|
135
|
+
list-style-type: decimal;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
li:where(:not([class])) {
|
|
139
|
+
margin-block: var(--ds-spacing-component-gap-xs);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Blockquote */
|
|
143
|
+
blockquote {
|
|
144
|
+
padding-left: var(--ds-spacing-component-padding-lg);
|
|
145
|
+
border-left: 4px solid var(--ds-color-border-emphasis);
|
|
146
|
+
color: var(--ds-color-foreground-muted);
|
|
147
|
+
font-style: italic;
|
|
148
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/* Components Layer - Design system component styles */
|
|
2
|
+
/* These styles are wrapped in @layer components by their source files */
|
|
3
|
+
|
|
4
|
+
/* Import component styles from @hypoth-ui/wc */
|
|
5
|
+
/* Note: Component CSS files already declare @layer components internally */
|
|
6
|
+
/* postcss-import resolves these through node_modules */
|
|
7
|
+
@import "@hypoth-ui/wc/src/components/button/button.css";
|
|
8
|
+
@import "@hypoth-ui/wc/src/components/input/input.css";
|
|
9
|
+
@import "@hypoth-ui/wc/src/components/link/link.css";
|
|
10
|
+
@import "@hypoth-ui/wc/src/components/text/text.css";
|
|
11
|
+
@import "@hypoth-ui/wc/src/components/icon/icon.css";
|
|
12
|
+
@import "@hypoth-ui/wc/src/components/spinner/spinner.css";
|
|
13
|
+
@import "@hypoth-ui/wc/src/components/visually-hidden/visually-hidden.css";
|
|
14
|
+
@import "@hypoth-ui/wc/src/components/textarea/textarea.css";
|
|
15
|
+
@import "@hypoth-ui/wc/src/components/checkbox/checkbox.css";
|
|
16
|
+
@import "@hypoth-ui/wc/src/components/radio/radio.css";
|
|
17
|
+
@import "@hypoth-ui/wc/src/components/switch/switch.css";
|
|
18
|
+
@import "@hypoth-ui/wc/src/components/popover/popover.css";
|
|
19
|
+
@import "@hypoth-ui/wc/src/components/tooltip/tooltip.css";
|
|
20
|
+
@import "@hypoth-ui/wc/src/components/menu/menu.css";
|
|
21
|
+
|
|
22
|
+
/* Advanced Form Controls */
|
|
23
|
+
@import "@hypoth-ui/wc/src/components/select/select.css";
|
|
24
|
+
@import "@hypoth-ui/wc/src/components/combobox/combobox.css";
|
|
25
|
+
@import "@hypoth-ui/wc/src/components/date-picker/date-picker.css";
|
|
26
|
+
@import "@hypoth-ui/wc/src/components/slider/slider.css";
|
|
27
|
+
@import "@hypoth-ui/wc/src/components/number-input/number-input.css";
|
|
28
|
+
@import "@hypoth-ui/wc/src/components/file-upload/file-upload.css";
|
|
29
|
+
@import "@hypoth-ui/wc/src/components/time-picker/time-picker.css";
|
|
30
|
+
@import "@hypoth-ui/wc/src/components/pin-input/pin-input.css";
|
|
31
|
+
|
|
32
|
+
/* Structure & Navigation Components */
|
|
33
|
+
@import "@hypoth-ui/wc/src/components/card/card.css";
|
|
34
|
+
@import "@hypoth-ui/wc/src/components/separator/separator.css";
|
|
35
|
+
@import "@hypoth-ui/wc/src/components/aspect-ratio/aspect-ratio.css";
|
|
36
|
+
@import "@hypoth-ui/wc/src/components/collapsible/collapsible.css";
|
|
37
|
+
@import "@hypoth-ui/wc/src/components/tabs/tabs.css";
|
|
38
|
+
@import "@hypoth-ui/wc/src/components/accordion/accordion.css";
|
|
39
|
+
@import "@hypoth-ui/wc/src/components/alert-dialog/alert-dialog.css";
|
|
40
|
+
@import "@hypoth-ui/wc/src/components/sheet/sheet.css";
|
|
41
|
+
@import "@hypoth-ui/wc/src/components/drawer/drawer.css";
|
|
42
|
+
@import "@hypoth-ui/wc/src/components/dropdown-menu/dropdown-menu.css";
|
|
43
|
+
@import "@hypoth-ui/wc/src/components/context-menu/context-menu.css";
|
|
44
|
+
@import "@hypoth-ui/wc/src/components/hover-card/hover-card.css";
|
|
45
|
+
@import "@hypoth-ui/wc/src/components/navigation-menu/navigation-menu.css";
|
|
46
|
+
@import "@hypoth-ui/wc/src/components/scroll-area/scroll-area.css";
|
|
47
|
+
@import "@hypoth-ui/wc/src/components/breadcrumb/breadcrumb.css";
|
|
48
|
+
@import "@hypoth-ui/wc/src/components/pagination/pagination.css";
|
|
49
|
+
@import "@hypoth-ui/wc/src/components/stepper/stepper.css";
|
|
50
|
+
@import "@hypoth-ui/wc/src/components/command/command.css";
|
|
51
|
+
|
|
52
|
+
/* Layout Primitives */
|
|
53
|
+
@import "@hypoth-ui/wc/src/components/layout/index.css";
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* High Contrast Mode Support
|
|
3
|
+
*
|
|
4
|
+
* Provides CSS fallbacks for Windows High Contrast Mode (forced-colors).
|
|
5
|
+
* Uses forced-color-adjust to control system color application and
|
|
6
|
+
* ensures focus indicators remain visible.
|
|
7
|
+
*
|
|
8
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/* =============================================================================
|
|
12
|
+
Focus Indicators
|
|
13
|
+
============================================================================= */
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Ensure focus outlines use system colors in high contrast mode.
|
|
17
|
+
* The outline will be visible regardless of background color.
|
|
18
|
+
*/
|
|
19
|
+
@media (forced-colors: active) {
|
|
20
|
+
/* Interactive elements */
|
|
21
|
+
button:focus-visible,
|
|
22
|
+
[role="button"]:focus-visible,
|
|
23
|
+
a:focus-visible,
|
|
24
|
+
input:focus-visible,
|
|
25
|
+
select:focus-visible,
|
|
26
|
+
textarea:focus-visible,
|
|
27
|
+
[tabindex]:focus-visible {
|
|
28
|
+
outline: 2px solid Highlight;
|
|
29
|
+
outline-offset: 2px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Custom components that need visible focus */
|
|
33
|
+
ds-button:focus-visible,
|
|
34
|
+
ds-link:focus-visible,
|
|
35
|
+
ds-input:focus-visible,
|
|
36
|
+
ds-textarea:focus-visible,
|
|
37
|
+
ds-checkbox:focus-visible,
|
|
38
|
+
ds-radio:focus-visible,
|
|
39
|
+
ds-switch:focus-visible,
|
|
40
|
+
ds-select:focus-visible,
|
|
41
|
+
ds-slider:focus-visible,
|
|
42
|
+
ds-tab:focus-visible,
|
|
43
|
+
ds-menu-item:focus-visible,
|
|
44
|
+
ds-tree-item:focus-visible,
|
|
45
|
+
ds-list-item:focus-visible {
|
|
46
|
+
outline: 2px solid Highlight;
|
|
47
|
+
outline-offset: 2px;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* =============================================================================
|
|
52
|
+
Form Controls
|
|
53
|
+
============================================================================= */
|
|
54
|
+
|
|
55
|
+
@media (forced-colors: active) {
|
|
56
|
+
/* Checkbox and radio indicators */
|
|
57
|
+
ds-checkbox [data-indicator],
|
|
58
|
+
ds-radio [data-indicator] {
|
|
59
|
+
forced-color-adjust: none;
|
|
60
|
+
border: 2px solid ButtonText;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
ds-checkbox[checked] [data-indicator],
|
|
64
|
+
ds-radio[checked] [data-indicator] {
|
|
65
|
+
background: Highlight;
|
|
66
|
+
border-color: Highlight;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
ds-checkbox[disabled] [data-indicator],
|
|
70
|
+
ds-radio[disabled] [data-indicator] {
|
|
71
|
+
border-color: GrayText;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Switch track and thumb */
|
|
75
|
+
ds-switch [data-track] {
|
|
76
|
+
forced-color-adjust: none;
|
|
77
|
+
border: 2px solid ButtonText;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
ds-switch[checked] [data-track] {
|
|
81
|
+
background: Highlight;
|
|
82
|
+
border-color: Highlight;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
ds-switch [data-thumb] {
|
|
86
|
+
background: ButtonText;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
ds-switch[checked] [data-thumb] {
|
|
90
|
+
background: HighlightText;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Input and textarea borders */
|
|
94
|
+
ds-input,
|
|
95
|
+
ds-textarea,
|
|
96
|
+
ds-select {
|
|
97
|
+
forced-color-adjust: none;
|
|
98
|
+
border: 2px solid ButtonText;
|
|
99
|
+
background: Field;
|
|
100
|
+
color: FieldText;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
ds-input:focus,
|
|
104
|
+
ds-textarea:focus,
|
|
105
|
+
ds-select:focus {
|
|
106
|
+
border-color: Highlight;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
ds-input[disabled],
|
|
110
|
+
ds-textarea[disabled],
|
|
111
|
+
ds-select[disabled] {
|
|
112
|
+
border-color: GrayText;
|
|
113
|
+
color: GrayText;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* =============================================================================
|
|
118
|
+
Buttons
|
|
119
|
+
============================================================================= */
|
|
120
|
+
|
|
121
|
+
@media (forced-colors: active) {
|
|
122
|
+
ds-button {
|
|
123
|
+
forced-color-adjust: none;
|
|
124
|
+
border: 2px solid ButtonText;
|
|
125
|
+
background: ButtonFace;
|
|
126
|
+
color: ButtonText;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
ds-button[variant="primary"] {
|
|
130
|
+
background: Highlight;
|
|
131
|
+
border-color: Highlight;
|
|
132
|
+
color: HighlightText;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
ds-button[variant="destructive"] {
|
|
136
|
+
/* Use system colors, but add a visual distinction */
|
|
137
|
+
border-width: 3px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
ds-button[disabled] {
|
|
141
|
+
border-color: GrayText;
|
|
142
|
+
color: GrayText;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
ds-button:hover:not([disabled]) {
|
|
146
|
+
border-color: Highlight;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* =============================================================================
|
|
151
|
+
Dialogs and Overlays
|
|
152
|
+
============================================================================= */
|
|
153
|
+
|
|
154
|
+
@media (forced-colors: active) {
|
|
155
|
+
/* Dialog content needs visible border */
|
|
156
|
+
ds-dialog-content,
|
|
157
|
+
ds-drawer-content,
|
|
158
|
+
ds-sheet-content,
|
|
159
|
+
ds-alert-dialog-content {
|
|
160
|
+
forced-color-adjust: none;
|
|
161
|
+
border: 3px solid ButtonText;
|
|
162
|
+
background: Canvas;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* Popover and tooltip */
|
|
166
|
+
ds-popover-content,
|
|
167
|
+
ds-tooltip-content,
|
|
168
|
+
ds-hover-card-content {
|
|
169
|
+
forced-color-adjust: none;
|
|
170
|
+
border: 2px solid ButtonText;
|
|
171
|
+
background: Canvas;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Menu content */
|
|
175
|
+
ds-menu-content,
|
|
176
|
+
ds-dropdown-menu-content,
|
|
177
|
+
ds-context-menu-content {
|
|
178
|
+
forced-color-adjust: none;
|
|
179
|
+
border: 2px solid ButtonText;
|
|
180
|
+
background: Canvas;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* Menu item hover/focus */
|
|
184
|
+
ds-menu-item:hover,
|
|
185
|
+
ds-menu-item:focus {
|
|
186
|
+
background: Highlight;
|
|
187
|
+
color: HighlightText;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* =============================================================================
|
|
192
|
+
Navigation
|
|
193
|
+
============================================================================= */
|
|
194
|
+
|
|
195
|
+
@media (forced-colors: active) {
|
|
196
|
+
/* Tabs */
|
|
197
|
+
ds-tab[aria-selected="true"] {
|
|
198
|
+
forced-color-adjust: none;
|
|
199
|
+
border-bottom: 3px solid Highlight;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
ds-tab:hover:not([aria-selected="true"]) {
|
|
203
|
+
border-bottom: 3px solid ButtonText;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Links */
|
|
207
|
+
ds-link {
|
|
208
|
+
color: LinkText;
|
|
209
|
+
text-decoration: underline;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
ds-link:visited {
|
|
213
|
+
color: VisitedText;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* =============================================================================
|
|
218
|
+
Feedback Components
|
|
219
|
+
============================================================================= */
|
|
220
|
+
|
|
221
|
+
@media (forced-colors: active) {
|
|
222
|
+
/* Progress bar */
|
|
223
|
+
ds-progress [data-track] {
|
|
224
|
+
forced-color-adjust: none;
|
|
225
|
+
border: 2px solid ButtonText;
|
|
226
|
+
background: Field;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
ds-progress [data-indicator] {
|
|
230
|
+
background: Highlight;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* Alert and toast */
|
|
234
|
+
ds-alert,
|
|
235
|
+
ds-toast {
|
|
236
|
+
forced-color-adjust: none;
|
|
237
|
+
border: 2px solid ButtonText;
|
|
238
|
+
background: Canvas;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
ds-alert[variant="destructive"],
|
|
242
|
+
ds-toast[variant="destructive"] {
|
|
243
|
+
border-width: 3px;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Badge */
|
|
247
|
+
ds-badge {
|
|
248
|
+
forced-color-adjust: none;
|
|
249
|
+
border: 1px solid ButtonText;
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* =============================================================================
|
|
254
|
+
Separator
|
|
255
|
+
============================================================================= */
|
|
256
|
+
|
|
257
|
+
@media (forced-colors: active) {
|
|
258
|
+
ds-separator {
|
|
259
|
+
forced-color-adjust: none;
|
|
260
|
+
border-color: ButtonText;
|
|
261
|
+
background: ButtonText;
|
|
262
|
+
}
|
|
263
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/* CSS Layer Order Declaration */
|
|
2
|
+
/* Layers are listed from lowest to highest precedence */
|
|
3
|
+
@layer reset, tokens, base, components, animations, utilities, high-contrast, overrides;
|
|
4
|
+
|
|
5
|
+
/* Import all layer definitions */
|
|
6
|
+
@import "./reset.css" layer(reset);
|
|
7
|
+
@import "./tokens.css" layer(tokens);
|
|
8
|
+
@import "./base.css" layer(base);
|
|
9
|
+
@import "./components.css" layer(components);
|
|
10
|
+
@import "./animations.css" layer(animations);
|
|
11
|
+
@import "./utilities.css" layer(utilities);
|
|
12
|
+
@import "./high-contrast.css" layer(high-contrast);
|
|
13
|
+
@import "./overrides.css" layer(overrides);
|