Mercurial

comparison design_system/src/styles/components.css @ 254:2b6e732087ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add complete native component catalog Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 15:12:09 -0700
parents fdf3816959cb
children 60a876c4587a
comparison
equal deleted inserted replaced
253:fdf3816959cb 254:2b6e732087ff
1 @import url("./shadcn.css");
2
1 :where( 3 :where(
2 zen-button, 4 zen-button,
3 zen-card, 5 zen-card,
4 zen-alert, 6 zen-alert,
5 zen-field, 7 zen-field,
25 padding: var(--zen-space-2) var(--zen-space-4); 27 padding: var(--zen-space-2) var(--zen-space-4);
26 border: var(--zen-border-width) solid var(--zen-color-border); 28 border: var(--zen-border-width) solid var(--zen-color-border);
27 border-radius: var(--zen-radius-md); 29 border-radius: var(--zen-radius-md);
28 box-shadow: var(--zen-shadow-sm); 30 box-shadow: var(--zen-shadow-sm);
29 background: var(--zen-color-accent); 31 background: var(--zen-color-accent);
30 color: #171a21; 32 color: var(--zen-color-on-accent);
31 font: 700 var(--zen-font-size-md)/1 var(--zen-font-sans); 33 font: 700 var(--zen-font-size-md)/1 var(--zen-font-sans);
32 text-decoration: none; 34 text-decoration: none;
33 cursor: pointer; 35 cursor: pointer;
34 transition: 36 transition:
35 background var(--zen-motion-fast) ease, 37 background var(--zen-motion-fast) ease,
38 } 40 }
39 41
40 zen-button > :where(button, a):hover { 42 zen-button > :where(button, a):hover {
41 background: var(--zen-color-accent-hover); 43 background: var(--zen-color-accent-hover);
42 transform: translate(-1px, -1px); 44 transform: translate(-1px, -1px);
43 box-shadow: 5px 5px 0 rgba(23, 26, 33, 0.18); 45 box-shadow: var(--zen-shadow-hover);
44 } 46 }
45 47
46 zen-button > :where(button, a):active { 48 zen-button > :where(button, a):active {
47 transform: translate(2px, 2px); 49 transform: translate(2px, 2px);
48 box-shadow: none; 50 box-shadow: none;
49 } 51 }
50 52
51 zen-button > :where(button, a):focus-visible, 53 zen-button > :where(button, a):focus-visible,
52 zen-alert [data-zen-dismiss]:focus-visible, 54 zen-alert [data-zen-dismiss]:focus-visible {
53 zen-field :where(input, select, textarea):focus-visible {
54 outline: 3px solid var(--zen-color-focus); 55 outline: 3px solid var(--zen-color-focus);
55 outline-offset: 3px; 56 outline-offset: 3px;
57 }
58
59 zen-field :where(input, select, textarea):focus-visible {
60 outline: none;
56 } 61 }
57 62
58 zen-button[variant="quiet"] > :where(button, a) { 63 zen-button[variant="quiet"] > :where(button, a) {
59 background: var(--zen-color-surface); 64 background: var(--zen-color-surface);
60 color: var(--zen-color-text); 65 color: var(--zen-color-text);
106 transform var(--zen-motion-fast) ease; 111 transform var(--zen-motion-fast) ease;
107 } 112 }
108 113
109 zen-card[interactive] > :where(article, section):hover { 114 zen-card[interactive] > :where(article, section):hover {
110 transform: translate(-2px, -2px); 115 transform: translate(-2px, -2px);
111 box-shadow: 10px 10px 0 rgba(23, 26, 33, 0.18); 116 box-shadow: var(--zen-shadow-lifted);
112 } 117 }
113 118
114 zen-card :where(h2, h3, p) { 119 zen-card :where(h2, h3, p) {
115 margin-top: 0; 120 margin-top: 0;
116 } 121 }