learn-dev/docs/design/mockups/css/theme-catppuccin.css at dev · ebouchut/learn-dev · 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
/*
  learn-dev theme: Catppuccin (DEFAULT)
  Palette: Catppuccin Latte (light) / Mocha (dark), official values from
  https://github.com/catppuccin/palette
  Values marked "adjusted" are darkened from upstream to reach the WCAG 2.1
  AA contrast ratio of 4.5:1 on every background they sit on as text:
  --color-bg AND the slightly darker --color-surface (header, flash alerts,
  cards). Every pair is documented with its computed ratio in
  docs/design/theme-exploration.md
  Both themes define the SAME token names: switching theme = swapping the
  <link> to theme-soft-paper.css (no runtime switcher in v1).
*/

:root {
  color-scheme: light dark;

  /* Latte (light) */
  --color-bg: #eff1f5;            /* base */
  --color-surface: #e6e9ef;       /* mantle */
  --color-surface-deep: #dce0e8;  /* crust */
  --color-border: #ccd0da;        /* surface0 */
  --color-text: #4c4f69;          /* text, 7.06:1 */
  --color-text-muted: #5c5f77;    /* subtext1, 5.53:1 */
  --color-primary: #8230e8;       /* adjusted from mauve #8839ef, 4.88:1 on surface */
  --color-on-primary: #ffffff;    /* 5.94:1 on primary */
  --color-link: #1a5cd7;          /* adjusted from blue #1e66f5, 4.86:1 on surface */
  --color-success: #2c721d;       /* adjusted from green #40a02b, 4.89:1 on surface */
  --color-warning: #8f5b08;       /* adjusted from yellow #df8e1d, 4.71:1 on surface */
  --color-error: #c80e37;         /* adjusted from red #d20f39, 4.83:1 on surface */
  --color-focus: #1e66f5;         /* blue, UI 3:1 requirement */
  --color-primary-soft: #eadcfd;  /* decorative wash behind hero art */

  /* Decorative syntax colors (code card is aria-hidden eye candy) */
  --code-bg: #1e1e2e;
  --code-text: #cdd6f4;
  --code-keyword: #cba6f7;
  --code-string: #a6e3a1;
  --code-function: #89b4fa;
  --code-comment: #9399b2;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Mocha (dark), all upstream values pass AA */
    --color-bg: #1e1e2e;           /* base */
    --color-surface: #181825;      /* mantle */
    --color-surface-deep: #11111b; /* crust */
    --color-border: #313244;       /* surface0 */
    --color-text: #cdd6f4;         /* text, 11.34:1 */
    --color-text-muted: #bac2de;   /* subtext1, 9.26:1 */
    --color-primary: #cba6f7;      /* mauve, 8.07:1 */
    --color-on-primary: #11111b;   /* crust, 9.23:1 on primary */
    --color-link: #89b4fa;         /* blue, 7.79:1 */
    --color-success: #a6e3a1;      /* green, 11.03:1 */
    --color-warning: #f9e2af;      /* yellow, 12.91:1 */
    --color-error: #f38ba8;        /* red, 7.08:1 */
    --color-focus: #89b4fa;        /* blue */
    --color-primary-soft: #2b2440;

    --code-bg: #11111b;
    --code-text: #cdd6f4;
    --code-keyword: #cba6f7;
    --code-string: #a6e3a1;
    --code-function: #89b4fa;
    --code-comment: #9399b2;
  }
}