Mercurial

comparison design_system/src/styles/components.css @ 251:117c4d53c9a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add HTML-first Web Component system Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 09:14:57 -0700
parents
children 7a7581f040e8
comparison
equal deleted inserted replaced
250:745fd127b2a1 251:117c4d53c9a4
1 :where(zen-button, zen-card, zen-alert, zen-field, zen-stack) {
2 box-sizing: border-box;
3 font-family: var(--zen-font-sans);
4 color: var(--zen-color-text);
5 }
6
7 zen-button {
8 display: inline-flex;
9 }
10
11 zen-button > :where(button, a) {
12 appearance: none;
13 display: inline-flex;
14 align-items: center;
15 justify-content: center;
16 gap: var(--zen-space-2);
17 min-height: 2.75rem;
18 padding: var(--zen-space-2) var(--zen-space-4);
19 border: var(--zen-border-width) solid var(--zen-color-border);
20 border-radius: var(--zen-radius-md);
21 box-shadow: var(--zen-shadow-sm);
22 background: var(--zen-color-accent);
23 color: #171a21;
24 font: 700 var(--zen-font-size-md)/1 var(--zen-font-sans);
25 text-decoration: none;
26 cursor: pointer;
27 transition:
28 background var(--zen-motion-fast) ease,
29 box-shadow var(--zen-motion-fast) ease,
30 transform var(--zen-motion-fast) ease;
31 }
32
33 zen-button > :where(button, a):hover {
34 background: var(--zen-color-accent-hover);
35 transform: translate(-1px, -1px);
36 box-shadow: 5px 5px 0 rgba(23, 26, 33, 0.18);
37 }
38
39 zen-button > :where(button, a):active {
40 transform: translate(2px, 2px);
41 box-shadow: none;
42 }
43
44 zen-button > :where(button, a):focus-visible,
45 zen-alert [data-zen-dismiss]:focus-visible,
46 zen-field :where(input, select, textarea):focus-visible {
47 outline: 3px solid var(--zen-color-focus);
48 outline-offset: 3px;
49 }
50
51 zen-button[variant="quiet"] > :where(button, a) {
52 background: var(--zen-color-surface);
53 color: var(--zen-color-text);
54 }
55
56 zen-button[variant="danger"] > :where(button, a) {
57 background: var(--zen-color-danger);
58 color: var(--zen-color-on-danger);
59 }
60
61 zen-button[disabled] > :where(button, a),
62 zen-button[loading] > :where(button, a) {
63 opacity: 0.55;
64 box-shadow: none;
65 cursor: not-allowed;
66 transform: none;
67 }
68
69 zen-button[loading] > :where(button, a)::before {
70 width: 0.85rem;
71 height: 0.85rem;
72 border: 2px solid currentColor;
73 border-right-color: transparent;
74 border-radius: 50%;
75 content: "";
76 animation: zen-spin 700ms linear infinite;
77 }
78
79 @keyframes zen-spin {
80 to { transform: rotate(1turn); }
81 }
82
83 zen-card {
84 display: block;
85 }
86
87 zen-card > :where(article, section) {
88 height: 100%;
89 padding: var(--zen-space-5);
90 border: var(--zen-border-width) solid var(--zen-color-border);
91 border-radius: var(--zen-radius-lg);
92 box-shadow: var(--zen-shadow-md);
93 background: var(--zen-color-surface-raised);
94 }
95
96 zen-card[interactive] > :where(article, section) {
97 transition:
98 box-shadow var(--zen-motion-fast) ease,
99 transform var(--zen-motion-fast) ease;
100 }
101
102 zen-card[interactive] > :where(article, section):hover {
103 transform: translate(-2px, -2px);
104 box-shadow: 10px 10px 0 rgba(23, 26, 33, 0.18);
105 }
106
107 zen-card :where(h2, h3, p) {
108 margin-top: 0;
109 }
110
111 zen-alert {
112 display: grid;
113 grid-template-columns: 0.35rem minmax(0, 1fr) auto;
114 align-items: start;
115 gap: var(--zen-space-3);
116 padding: var(--zen-space-4);
117 border: var(--zen-border-width) solid var(--zen-color-border);
118 border-radius: var(--zen-radius-md);
119 background: var(--zen-color-surface-raised);
120 }
121
122 zen-alert::before {
123 align-self: stretch;
124 border-radius: 999px;
125 background: var(--zen-color-info);
126 content: "";
127 }
128
129 zen-alert[tone="success"]::before { background: var(--zen-color-success); }
130 zen-alert[tone="warning"]::before { background: var(--zen-color-warning); }
131 zen-alert[tone="danger"]::before { background: var(--zen-color-danger); }
132
133 zen-alert > :where(p, div) {
134 margin: 0;
135 }
136
137 zen-alert [data-zen-dismiss] {
138 min-width: 2rem;
139 min-height: 2rem;
140 padding: 0;
141 border: 0;
142 border-radius: 50%;
143 background: transparent;
144 color: inherit;
145 font: 700 1.2rem/1 var(--zen-font-sans);
146 cursor: pointer;
147 }
148
149 zen-field {
150 display: grid;
151 gap: var(--zen-space-2);
152 }
153
154 zen-field > label {
155 font-weight: 750;
156 }
157
158 zen-field > :where(input, select, textarea) {
159 width: 100%;
160 min-height: 2.75rem;
161 box-sizing: border-box;
162 padding: var(--zen-space-3);
163 border: var(--zen-border-width) solid var(--zen-color-border);
164 border-radius: var(--zen-radius-md);
165 background: var(--zen-color-surface);
166 color: var(--zen-color-text);
167 font: inherit;
168 }
169
170 zen-field > textarea {
171 min-height: 7rem;
172 resize: vertical;
173 }
174
175 zen-field > :where(small, [data-help]) {
176 color: var(--zen-color-text-muted);
177 }
178
179 zen-field[data-invalid] > :where(input, select, textarea) {
180 border-color: var(--zen-color-danger);
181 }
182
183 zen-field[data-invalid] > :where(small, [data-help]) {
184 color: var(--zen-color-danger);
185 }
186
187 zen-stack {
188 display: flex;
189 flex-direction: column;
190 gap: var(--zen-stack-gap, var(--zen-space-4));
191 }
192
193 zen-stack[direction="row"] {
194 flex-flow: row wrap;
195 align-items: center;
196 }
197
198 zen-stack[gap="tight"] { --zen-stack-gap: var(--zen-space-2); }
199 zen-stack[gap="loose"] { --zen-stack-gap: var(--zen-space-6); }
200
201 @media (prefers-reduced-motion: reduce) {
202 zen-button > :where(button, a),
203 zen-card > :where(article, section) {
204 transition: none;
205 }
206
207 zen-button[loading] > :where(button, a)::before {
208 animation-duration: 1400ms;
209 }
210 }