console/app/assets/css/main.css at main · agentruntimecontrolprotocol/console · 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
112
113
114
115
116
117
/* Inter — the Motif (UniFi) body typeface. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

@import "tailwindcss";
@import "@nuxt/ui";

/* -------------------------------------------------------------------------- *
 * Motif design tokens
 *
 * Color scales reconstructed from the UniFi Network design system
 * (extracted-styles/motif-theme.{css,json}). Nuxt UI's color aliases below
 * point at these, so every component's bg / text / border / ring derives from
 * the Motif palette automatically.
 *
 *   motif-blue   primary   hue 214 — global-primary
 *   motif-gray   neutral   hue 214 / 8% — the signature UniFi cool gray
 *   motif-green  success   hue 138 — data-positive
 *   motif-red    error     hue 358 — data-destructive
 *   motif-amber  warning   hue 37  — data-notice
 *   motif-aqua   info      hue 198 — data-down / aqua
 *
 * `static` forces Tailwind v4 to emit every token: Nuxt UI references these
 * via `var(--color-motif-*)` (not utility classes), so usage-based tree-shaking
 * would otherwise drop them and the theme would resolve to empty.
 * -------------------------------------------------------------------------- */
@theme static {
  --font-sans: "Inter", "Lato", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Arial, sans-serif;

  /* primary — Motif blue (global-primary light=500, dark=400) */
  --color-motif-blue-50: hsl(214 100% 97%);
  --color-motif-blue-100: hsl(214 100% 92%);
  --color-motif-blue-200: hsl(214 100% 85%);
  --color-motif-blue-300: hsl(214 100% 75%);
  --color-motif-blue-400: hsl(214 100% 64%);
  --color-motif-blue-500: hsl(214 100% 50%);
  --color-motif-blue-600: hsl(214 100% 42%);
  --color-motif-blue-700: hsl(215 88% 36%);
  --color-motif-blue-800: hsl(213 88% 26%);
  --color-motif-blue-900: hsl(213 88% 16%);
  --color-motif-blue-950: hsl(213 88% 12%);

  /* neutral — Motif cool gray (hue 214 / 8%) */
  --color-motif-gray-50: hsl(214 8% 98%);
  --color-motif-gray-100: hsl(214 8% 96%);
  --color-motif-gray-200: hsl(214 8% 88%);
  --color-motif-gray-300: hsl(214 8% 82%);
  --color-motif-gray-400: hsl(214 8% 65%);
  --color-motif-gray-500: hsl(214 8% 54%);
  --color-motif-gray-600: hsl(214 8% 44%);
  --color-motif-gray-700: hsl(214 8% 34%);
  --color-motif-gray-800: hsl(214 8% 20%);
  --color-motif-gray-900: hsl(214 8% 12%);
  --color-motif-gray-950: hsl(214 8% 8%);

  /* success — Motif green (data-positive) */
  --color-motif-green-50: hsl(138 60% 95%);
  --color-motif-green-100: hsl(138 60% 90%);
  --color-motif-green-200: hsl(138 60% 81%);
  --color-motif-green-300: hsl(138 59% 71%);
  --color-motif-green-400: hsl(138 59% 61%);
  --color-motif-green-500: hsl(138 59% 51%);
  --color-motif-green-600: hsl(138 56% 41%);
  --color-motif-green-700: hsl(138 56% 33%);
  --color-motif-green-800: hsl(138 57% 25%);
  --color-motif-green-900: hsl(138 56% 18%);
  --color-motif-green-950: hsl(138 56% 12%);

  /* error — Motif red (data-destructive) */
  --color-motif-red-50: hsl(357 82% 96%);
  --color-motif-red-100: hsl(359 86% 92%);
  --color-motif-red-200: hsl(358 86% 83%);
  --color-motif-red-300: hsl(359 86% 75%);
  --color-motif-red-400: hsl(358 86% 67%);
  --color-motif-red-500: hsl(359 86% 58%);
  --color-motif-red-600: hsl(358 61% 47%);
  --color-motif-red-700: hsl(359 61% 38%);
  --color-motif-red-800: hsl(359 61% 29%);
  --color-motif-red-900: hsl(358 62% 20%);
  --color-motif-red-950: hsl(358 62% 14%);

  /* warning — Motif amber/orange (data-notice) */
  --color-motif-amber-50: hsl(37 91% 95%);
  --color-motif-amber-100: hsl(37 91% 91%);
  --color-motif-amber-200: hsl(37 91% 82%);
  --color-motif-amber-300: hsl(37 91% 73%);
  --color-motif-amber-400: hsl(37 91% 64%);
  --color-motif-amber-500: hsl(37 91% 55%);
  --color-motif-amber-600: hsl(37 75% 44%);
  --color-motif-amber-700: hsl(37 75% 36%);
  --color-motif-amber-800: hsl(37 74% 27%);
  --color-motif-amber-900: hsl(37 74% 20%);
  --color-motif-amber-950: hsl(37 74% 14%);

  /* info — Motif aqua (data-down) */
  --color-motif-aqua-50: hsl(198 100% 96%);
  --color-motif-aqua-100: hsl(198 100% 93%);
  --color-motif-aqua-200: hsl(198 97% 85%);
  --color-motif-aqua-300: hsl(198 98% 78%);
  --color-motif-aqua-400: hsl(198 97% 71%);
  --color-motif-aqua-500: hsl(198 98% 63%);
  --color-motif-aqua-600: hsl(198 58% 51%);
  --color-motif-aqua-700: hsl(198 56% 41%);
  --color-motif-aqua-800: hsl(198 57% 32%);
  --color-motif-aqua-900: hsl(198 56% 22%);
  --color-motif-aqua-950: hsl(198 56% 16%);
}

/* Motif uses a 4px corner radius across the board (radius-global / -btn). */
:root {
  --ui-radius: 0.25rem;
}

/* Match the UniFi canvas: a faint cool-gray page behind white surfaces. */
body {
  background-color: var(--ui-bg-muted);
}