bolt-slides/src/styles/tokens.css at main · stackblitz/bolt-slides · 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
/* ===================================================================
   THEME TOKENS — edit ONLY this :root block to re-theme the whole deck.
   The SAME token vocabulary as the `slides` (Slidev) and `webdeck` skills,
   so a brand looks identical across all of them. The values below are a
   "dark product" default — REPLACE them to match the brief or the brand.
   =================================================================== */
:root {
  /* Surfaces */
  --bg: #05070a;
  --bg-grad-1: rgba(79, 229, 176, 0.12);
  --bg-grad-2: rgba(41, 192, 240, 0.08);
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);

  /* Ink */
  --fg: #f4f7fa;
  --fg-muted: #9aa4b2;
  --fg-faint: #626d7d;

  /* Hairlines */
  --hair: rgba(255, 255, 255, 0.1);
  --hair-2: rgba(255, 255, 255, 0.06);

  /* Accent — ONE accent. May be a 2–4 stop gradient within ~80° of hue. */
  --primary: #4fe5b0;
  --accent: linear-gradient(
    115deg,
    #c8f56e 0%,
    #5aeeb0 42%,
    #34dcd8 74%,
    #29c0f0 100%
  );
  --accent-ink: #04140e;

  /* Radius */
  --radius: 22px;
  --radius-sm: 12px;
  --radius-lg: 26px;

  /* Depth */
  --shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9);
  --glow: 0 30px 80px -40px rgba(79, 229, 176, 0.5);

  /* Type */
  --font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
    sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --dur: 0.4s;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Atmosphere */
  --grain: 0.035;
  --vignette: rgba(0, 0, 0, 0.22);

  /* Responsive gutter — fluid side / vertical padding */
  --gutter: clamp(28px, 6vw, 120px);
  --gutter-y: clamp(40px, 8vh, 96px);
}