Mercurial

diff 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
line wrap: on
line diff
--- a/design_system/src/styles/components.css	Tue Aug 04 12:21:19 2026 -0700
+++ b/design_system/src/styles/components.css	Tue Aug 04 15:12:09 2026 -0700
@@ -1,3 +1,5 @@
+@import url("./shadcn.css");
+
 :where(
   zen-button,
   zen-card,
@@ -27,7 +29,7 @@
   border-radius: var(--zen-radius-md);
   box-shadow: var(--zen-shadow-sm);
   background: var(--zen-color-accent);
-  color: #171a21;
+  color: var(--zen-color-on-accent);
   font: 700 var(--zen-font-size-md)/1 var(--zen-font-sans);
   text-decoration: none;
   cursor: pointer;
@@ -40,7 +42,7 @@
 zen-button > :where(button, a):hover {
   background: var(--zen-color-accent-hover);
   transform: translate(-1px, -1px);
-  box-shadow: 5px 5px 0 rgba(23, 26, 33, 0.18);
+  box-shadow: var(--zen-shadow-hover);
 }
 
 zen-button > :where(button, a):active {
@@ -49,12 +51,15 @@
 }
 
 zen-button > :where(button, a):focus-visible,
-zen-alert [data-zen-dismiss]:focus-visible,
-zen-field :where(input, select, textarea):focus-visible {
+zen-alert [data-zen-dismiss]:focus-visible {
   outline: 3px solid var(--zen-color-focus);
   outline-offset: 3px;
 }
 
+zen-field :where(input, select, textarea):focus-visible {
+  outline: none;
+}
+
 zen-button[variant="quiet"] > :where(button, a) {
   background: var(--zen-color-surface);
   color: var(--zen-color-text);
@@ -108,7 +113,7 @@
 
 zen-card[interactive] > :where(article, section):hover {
   transform: translate(-2px, -2px);
-  box-shadow: 10px 10px 0 rgba(23, 26, 33, 0.18);
+  box-shadow: var(--zen-shadow-lifted);
 }
 
 zen-card :where(h2, h3, p) {