agent-coordinator/surface-system.css at main · omoios/agent-coordinator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/* ============================================================
   UNIVERSAL SURFACE SYSTEM  —  drop-in, zero component edits.

   Paste this at the END of globals.css (after @theme / @layer base).

   How it works:
   • Hooks into shadcn's `data-slot` attributes, present on every
     component in the Tailwind-v4 build of shadcn. No forking.
   • Rules are intentionally UNLAYERED. In Tailwind v4 the cascade is
     @layer theme, base, components, utilities — and unlayered styles
     outrank every layer, so these override shadcn's built-in
     `shadow-sm` / `rounded-*` utilities with no !important needed.
   • Escape hatch: add `data-flat` to any element to opt it out.
   ============================================================ */

:root {
  /* the "barely-there" gloss — felt, not seen */
  --gloss: linear-gradient(
    180deg,
    oklch(1 0 0 / 6%) 0%,
    oklch(1 0 0 / 2%) 16%,
    oklch(0 0 0 / 3%) 100%
  );
  /* recessed field gloss for inputs */
  --gloss-inset: linear-gradient(180deg, oklch(1 0 0 / 4%), oklch(0 0 0 / 4%));

  --elev-1:
    inset 0 1px 0 oklch(1 0 0 / 9%),
    0 1px 2px oklch(0 0 0 / 14%),
    0 10px 28px oklch(0 0 0 / 12%);
  --elev-2:
    inset 0 1px 0 oklch(1 0 0 / 12%),
    0 1px 2px oklch(0 0 0 / 18%),
    0 22px 60px oklch(0 0 0 / 22%);
  --elev-btn:
    inset 0 1px 0 oklch(1 0 0 / 14%),
    0 1px 2px oklch(0 0 0 / 18%);
}

.dark {
  /* slightly stronger in the dark theme — gloss reads better on black */
  --gloss: linear-gradient(
    180deg,
    oklch(1 0 0 / 7%) 0%,
    oklch(1 0 0 / 2.5%) 16%,
    oklch(0 0 0 / 4%) 100%
  );
  --elev-1:
    inset 0 1px 0 oklch(1 0 0 / 10%),
    0 1px 2px oklch(0 0 0 / 38%),
    0 12px 32px oklch(0 0 0 / 32%);
  --elev-2:
    inset 0 1px 0 oklch(1 0 0 / 12%),
    0 1px 2px oklch(0 0 0 / 45%),
    0 24px 64px oklch(0 0 0 / 48%);
}

/* ── Raised surfaces: cards, panels, alerts, tab strips ──────────── */
[data-slot="card"],
[data-slot="alert"],
[data-slot="tabs-list"],
[data-slot="command"] {
  background-image: var(--gloss);
  box-shadow: var(--elev-1);
}

/* ── Floating / overlay surfaces sit higher ─────────────────────── */
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"],
[data-slot="dialog-content"],
[data-slot="sheet-content"],
[data-slot="hover-card-content"],
[data-slot="menubar-content"],
[data-slot="context-menu-content"],
[data-slot="tooltip-content"] {
  background-image: var(--gloss);
  box-shadow: var(--elev-2);
}

/* ── Fields: recessed, inner-lit ────────────────────────────────── */
[data-slot="input"],
[data-slot="textarea"],
[data-slot="select-trigger"] {
  background-image: var(--gloss-inset);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 6%),
    inset 0 1px 2px oklch(0 0 0 / 22%);
}
[data-slot="input"]:focus-visible,
[data-slot="textarea"]:focus-visible,
[data-slot="select-trigger"]:focus-visible {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 8%),
    0 0 0 3px color-mix(in oklab, var(--ring) 16%, transparent);
}

/* ── Buttons & badges: gloss + gentle lift (variant-safe) ───────────
   No heavy drop shadow here on purpose — a big shadow looks wrong on
   ghost/link buttons. The gloss carries the shine; the lift is subtle. */
[data-slot="button"],
[data-slot="badge"] {
  background-image: var(--gloss);
  box-shadow: var(--elev-btn);
}

/* ── Opt-out: <Card data-flat>, <Button data-flat>, etc. ────────── */
[data-flat] {
  background-image: none !important;
  box-shadow: none !important;
}