ferro-theme 0.2.87

Semantic theme tokens and intent template schema for Ferro
Documentation 
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
118
119
120
121
122

/* Ferro default theme — plain CSS variables.
 *
 * Injected verbatim into <style> by framework/src/json_ui/mod.rs.
 * MUST NOT contain Tailwind-specific at-rules — those are not standard
 * CSS and browsers ignore the entire block as an unknown at-rule.
 */

:root {
  /* Surface tokens */
  --color-background: oklch(99% 0.004 250);
  --color-surface: oklch(100% 0 0);
  --color-card: oklch(100% 0 0);
  --color-border: oklch(90% 0.012 250);
  --color-text: oklch(20% 0.02 250);
  --color-text-muted: oklch(50% 0.016 250);

  /* Role tokens */
  --color-primary: oklch(20% 0.02 250);
  --color-primary-foreground: oklch(100% 0 0);
  --color-secondary: oklch(70% 0.05 250);
  --color-secondary-foreground: oklch(15% 0 0);
  --color-accent: oklch(70% 0.13 250);
  --color-destructive: oklch(55% 0.22 25);
  --color-success: oklch(55% 0.18 145);
  --color-warning: oklch(70% 0.18 80);

  /* Shape tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadow tokens */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Typography tokens */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* Density token */
  --spacing: 0.25rem;

  /* Motion tokens */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.38, 0.9);

  /* Focus ring token */
  --color-ring: oklch(55% 0.2 250);

  /* Display font token */
  --font-display: var(--font-sans);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: oklch(15% 0.014 250);
    --color-surface: oklch(19% 0.016 250);
    --color-card: oklch(22% 0.018 250);
    --color-border: oklch(31% 0.02 250);
    --color-text: oklch(95% 0.006 250);
    --color-text-muted: oklch(63% 0.016 250);
    --color-primary: oklch(92% 0.008 250);
    --color-primary-foreground: oklch(18% 0.02 250);
    --color-secondary: oklch(53% 0.05 250);
    --color-secondary-foreground: oklch(95% 0 0);
    --color-accent: oklch(68% 0.13 250);
    --color-destructive: oklch(59% 0.22 25);
    --color-success: oklch(60% 0.18 145);
    --color-warning: oklch(65% 0.18 80);

    /* Density token */
    --spacing: 0.25rem;

    /* Motion tokens */
    --motion-duration-fast: 120ms;
    --motion-duration-base: 220ms;
    --motion-duration-slow: 320ms;
    --motion-ease: cubic-bezier(0.2, 0, 0.38, 0.9);

    /* Focus ring token */
    --color-ring: oklch(65% 0.18 250);

    /* Display font token */
    --font-display: var(--font-sans);
  }
}

[data-theme="dark"] {
  --color-background: oklch(15% 0.014 250);
  --color-surface: oklch(19% 0.016 250);
  --color-card: oklch(22% 0.018 250);
  --color-border: oklch(31% 0.02 250);
  --color-text: oklch(95% 0.006 250);
  --color-text-muted: oklch(63% 0.016 250);
  --color-primary: oklch(92% 0.008 250);
  --color-primary-foreground: oklch(18% 0.02 250);
  --color-secondary: oklch(53% 0.05 250);
  --color-secondary-foreground: oklch(95% 0 0);
  --color-accent: oklch(68% 0.13 250);
  --color-destructive: oklch(59% 0.22 25);
  --color-success: oklch(60% 0.18 145);
  --color-warning: oklch(65% 0.18 80);

  /* Density token */
  --spacing: 0.25rem;

  /* Motion tokens */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.38, 0.9);

  /* Focus ring token */
  --color-ring: oklch(65% 0.18 250);

  /* Display font token */
  --font-display: var(--font-sans);
}