cast-codes/resources/design-tokens.css at main · OpenCoven/cast-codes · 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
/*
 * CastCodes — OpenCoven design tokens.
 *
 * Authoritative source for the public CastCodes brand palette, written as
 * shadcn/ui-style CSS custom properties so non-GPUI surfaces (docs sites,
 * onboarding pages, marketing, the future plugin host's web UI) can
 * consume the same values the native `castcodes_dark` theme uses.
 *
 * Native UI mapping lives in `app/src/themes/default_themes.rs::castcodes_dark`.
 * Values here are kept in sync by hand; see DESIGN-CHANGES.md.
 */

:root,
.castcodes-dark {
  /* Surfaces */
  --color-background: #0f0f12;
  --color-surface: #161619;
  --color-surface-elevated: #1e1e22;
  --color-titlebar: #0a0a0d;
  --color-statusbar: #0a0a0d;
  --color-overlay-subtle: rgba(255, 255, 255, 0.04);
  --color-overlay-hover: rgba(255, 255, 255, 0.06);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.04);

  /* Text */
  --color-foreground: #e8e8ed;
  --color-foreground-secondary: #8e8e9a;
  --color-foreground-muted: #5a5a65;

  /* Accent — primary (purple) */
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-foreground: #ffffff;
  --color-ring: #7c3aed;

  /* Accent — secondary (gold), highlights only */
  --color-accent: #d4a84b;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-destructive: var(--color-error);
  --color-destructive-foreground: #ffffff;

  /* Shape */
  --radius: 0.375rem;            /* 6px — interactive elements */
  --radius-sm: 0.25rem;          /* 4px — small items */
  --radius-md: 0.5rem;           /* 8px — larger interactive surfaces */
  --radius-lg: var(--radius-md);

  /* App chrome */
  --tabbar-height: 2.125rem;      /* 34px */
  --statusbar-height: 1.375rem;   /* 22px */
  --active-indicator-size: 0.125rem;

  /* Motion */
  --motion-duration: 120ms;      /* 100-150ms range from brief */
  --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * shadcn/ui semantic-token aliases, for direct consumption by any
 * shadcn-style component installed into a CastCodes-adjacent web surface.
 */
:root,
.castcodes-dark {
  --background: var(--color-background);
  --foreground: var(--color-foreground);
  --card: var(--color-surface);
  --card-foreground: var(--color-foreground);
  --popover: var(--color-surface-elevated);
  --popover-foreground: var(--color-foreground);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-primary-foreground);
  --secondary: var(--color-surface);
  --secondary-foreground: var(--color-foreground-secondary);
  --muted: var(--color-surface);
  --muted-foreground: var(--color-foreground-muted);
  --accent: var(--color-surface-elevated);
  --accent-foreground: var(--color-foreground);
  --destructive: var(--color-destructive);
  --destructive-foreground: var(--color-destructive-foreground);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-ring);
}