@rathkit/rte-themes 0.1.0-alpha.4 → 0.1.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +2 -2
  2. package/css/auto.css +75 -75
  3. package/css/dark.css +37 -37
  4. package/css/density.css +15 -15
  5. package/css/high-contrast.css +37 -37
  6. package/css/light.css +37 -37
  7. package/dist/tokens.d.ts +1 -1
  8. package/dist/tokens.js +35 -35
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @rathkit/rte-themes
2
2
 
3
- > **Alpha** (0.1.0-alpha.0). Not for production: the APIs will change between releases. Published to the `next` tag only.
3
+ > **Alpha.** Not for production: the APIs will change between releases. Published to the `next` tag only.
4
4
 
5
- Preset themes (light, dark, auto, high contrast) and a density setting, as CSS files of `--rk-*` custom properties, with tests that every pair of colors meets its contrast ratio.
5
+ Preset themes (light, dark, auto, high contrast) and a density setting, as CSS files of `--rte-*` custom properties, with tests that every pair of colors meets its contrast ratio.
6
6
 
7
7
  ## Install
8
8
 
package/css/auto.css CHANGED
@@ -1,86 +1,86 @@
1
1
  /* Rathkit RTE theme: auto. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
2
- Scope: any element with data-rk-theme="auto" (normally the .rk-root of an editor), never :root. */
3
- :where([data-rk-theme="auto"]) {
4
- --rk-space-1: 4px;
5
- --rk-space-2: 8px;
6
- --rk-space-3: 12px;
7
- --rk-space-4: 16px;
8
- --rk-control-size: 32px;
9
- --rk-radius-s: 4px;
10
- --rk-radius-m: 8px;
11
- --rk-border-width: 1px;
12
- --rk-focus-width: 2px;
13
- --rk-focus-offset: 2px;
14
- --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
- --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
- --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
- --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
- --rk-font-size: 16px;
19
- --rk-line-height: 1.55;
20
- --rk-motion-duration: 120ms;
21
- --rk-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
22
- --rk-bg: #ffffff;
23
- --rk-surface: #f4f6f9;
24
- --rk-surface-raised: #ffffff;
25
- --rk-fg: #14181f;
26
- --rk-fg-muted: #505b6b;
27
- --rk-border: #78849a;
28
- --rk-border-subtle: #d4dae3;
29
- --rk-accent: #17408b;
30
- --rk-accent-fg: #ffffff;
31
- --rk-accent-subtle: #e3ecfa;
32
- --rk-danger: #b3261e;
33
- --rk-selection-bg: #cddffa;
34
- --rk-control-hover: #e6ebf3;
35
- --rk-control-active: #d3dcec;
36
- --rk-brand: #b9812a;
37
- --rk-brand-text: #86590f;
38
- --rk-focus-color: #17408b;
2
+ Scope: any element with data-rte-theme="auto" (normally the .rte-root of an editor), never :root. */
3
+ :where([data-rte-theme="auto"]) {
4
+ --rte-space-1: 4px;
5
+ --rte-space-2: 8px;
6
+ --rte-space-3: 12px;
7
+ --rte-space-4: 16px;
8
+ --rte-control-size: 32px;
9
+ --rte-radius-s: 4px;
10
+ --rte-radius-m: 8px;
11
+ --rte-border-width: 1px;
12
+ --rte-focus-width: 2px;
13
+ --rte-focus-offset: 2px;
14
+ --rte-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
+ --rte-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
+ --rte-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
+ --rte-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
+ --rte-font-size: 16px;
19
+ --rte-line-height: 1.55;
20
+ --rte-motion-duration: 120ms;
21
+ --rte-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
22
+ --rte-bg: #ffffff;
23
+ --rte-surface: #f4f6f9;
24
+ --rte-surface-raised: #ffffff;
25
+ --rte-fg: #14181f;
26
+ --rte-fg-muted: #505b6b;
27
+ --rte-border: #78849a;
28
+ --rte-border-subtle: #d4dae3;
29
+ --rte-accent: #17408b;
30
+ --rte-accent-fg: #ffffff;
31
+ --rte-accent-subtle: #e3ecfa;
32
+ --rte-danger: #b3261e;
33
+ --rte-selection-bg: #cddffa;
34
+ --rte-control-hover: #e6ebf3;
35
+ --rte-control-active: #d3dcec;
36
+ --rte-brand: #b9812a;
37
+ --rte-brand-text: #86590f;
38
+ --rte-focus-color: #17408b;
39
39
  color-scheme: light dark;
40
40
  }
41
41
 
42
42
  @media (prefers-color-scheme: dark) {
43
- :where([data-rk-theme="auto"]:not([data-rk-scheme="light"])) {
44
- --rk-bg: #10151d;
45
- --rk-surface: #171e29;
46
- --rk-surface-raised: #1d2633;
47
- --rk-fg: #eaeef4;
48
- --rk-fg-muted: #a9b4c3;
49
- --rk-border: #6b7789;
50
- --rk-border-subtle: #2b3646;
51
- --rk-accent: #6fa0e8;
52
- --rk-accent-fg: #0b1a33;
53
- --rk-accent-subtle: #1d3257;
54
- --rk-danger: #ff8f86;
55
- --rk-selection-bg: #294a80;
56
- --rk-control-hover: #243044;
57
- --rk-control-active: #2f3e57;
58
- --rk-brand: #e0a850;
59
- --rk-brand-text: #e0a850;
60
- --rk-focus-color: #9bc0f5;
61
- --rk-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
43
+ :where([data-rte-theme="auto"]:not([data-rte-scheme="light"])) {
44
+ --rte-bg: #10151d;
45
+ --rte-surface: #171e29;
46
+ --rte-surface-raised: #1d2633;
47
+ --rte-fg: #eaeef4;
48
+ --rte-fg-muted: #a9b4c3;
49
+ --rte-border: #6b7789;
50
+ --rte-border-subtle: #2b3646;
51
+ --rte-accent: #6fa0e8;
52
+ --rte-accent-fg: #0b1a33;
53
+ --rte-accent-subtle: #1d3257;
54
+ --rte-danger: #ff8f86;
55
+ --rte-selection-bg: #294a80;
56
+ --rte-control-hover: #243044;
57
+ --rte-control-active: #2f3e57;
58
+ --rte-brand: #e0a850;
59
+ --rte-brand-text: #e0a850;
60
+ --rte-focus-color: #9bc0f5;
61
+ --rte-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
62
62
  color-scheme: dark;
63
63
  }
64
64
  }
65
65
 
66
- :where([data-rk-theme="auto"][data-rk-scheme="dark"]) {
67
- --rk-bg: #10151d;
68
- --rk-surface: #171e29;
69
- --rk-surface-raised: #1d2633;
70
- --rk-fg: #eaeef4;
71
- --rk-fg-muted: #a9b4c3;
72
- --rk-border: #6b7789;
73
- --rk-border-subtle: #2b3646;
74
- --rk-accent: #6fa0e8;
75
- --rk-accent-fg: #0b1a33;
76
- --rk-accent-subtle: #1d3257;
77
- --rk-danger: #ff8f86;
78
- --rk-selection-bg: #294a80;
79
- --rk-control-hover: #243044;
80
- --rk-control-active: #2f3e57;
81
- --rk-brand: #e0a850;
82
- --rk-brand-text: #e0a850;
83
- --rk-focus-color: #9bc0f5;
84
- --rk-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
66
+ :where([data-rte-theme="auto"][data-rte-scheme="dark"]) {
67
+ --rte-bg: #10151d;
68
+ --rte-surface: #171e29;
69
+ --rte-surface-raised: #1d2633;
70
+ --rte-fg: #eaeef4;
71
+ --rte-fg-muted: #a9b4c3;
72
+ --rte-border: #6b7789;
73
+ --rte-border-subtle: #2b3646;
74
+ --rte-accent: #6fa0e8;
75
+ --rte-accent-fg: #0b1a33;
76
+ --rte-accent-subtle: #1d3257;
77
+ --rte-danger: #ff8f86;
78
+ --rte-selection-bg: #294a80;
79
+ --rte-control-hover: #243044;
80
+ --rte-control-active: #2f3e57;
81
+ --rte-brand: #e0a850;
82
+ --rte-brand-text: #e0a850;
83
+ --rte-focus-color: #9bc0f5;
84
+ --rte-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
85
85
  color-scheme: dark;
86
86
  }
package/css/dark.css CHANGED
@@ -1,40 +1,40 @@
1
1
  /* Rathkit RTE theme: dark. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
2
- Scope: any element with data-rk-theme="dark" (normally the .rk-root of an editor), never :root. */
3
- :where([data-rk-theme="dark"]) {
4
- --rk-space-1: 4px;
5
- --rk-space-2: 8px;
6
- --rk-space-3: 12px;
7
- --rk-space-4: 16px;
8
- --rk-control-size: 32px;
9
- --rk-radius-s: 4px;
10
- --rk-radius-m: 8px;
11
- --rk-border-width: 1px;
12
- --rk-focus-width: 2px;
13
- --rk-focus-offset: 2px;
14
- --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
- --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
- --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
- --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
- --rk-font-size: 16px;
19
- --rk-line-height: 1.55;
20
- --rk-motion-duration: 120ms;
21
- --rk-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
22
- --rk-bg: #10151d;
23
- --rk-surface: #171e29;
24
- --rk-surface-raised: #1d2633;
25
- --rk-fg: #eaeef4;
26
- --rk-fg-muted: #a9b4c3;
27
- --rk-border: #6b7789;
28
- --rk-border-subtle: #2b3646;
29
- --rk-accent: #6fa0e8;
30
- --rk-accent-fg: #0b1a33;
31
- --rk-accent-subtle: #1d3257;
32
- --rk-danger: #ff8f86;
33
- --rk-selection-bg: #294a80;
34
- --rk-control-hover: #243044;
35
- --rk-control-active: #2f3e57;
36
- --rk-brand: #e0a850;
37
- --rk-brand-text: #e0a850;
38
- --rk-focus-color: #9bc0f5;
2
+ Scope: any element with data-rte-theme="dark" (normally the .rte-root of an editor), never :root. */
3
+ :where([data-rte-theme="dark"]) {
4
+ --rte-space-1: 4px;
5
+ --rte-space-2: 8px;
6
+ --rte-space-3: 12px;
7
+ --rte-space-4: 16px;
8
+ --rte-control-size: 32px;
9
+ --rte-radius-s: 4px;
10
+ --rte-radius-m: 8px;
11
+ --rte-border-width: 1px;
12
+ --rte-focus-width: 2px;
13
+ --rte-focus-offset: 2px;
14
+ --rte-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
+ --rte-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
+ --rte-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
+ --rte-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
+ --rte-font-size: 16px;
19
+ --rte-line-height: 1.55;
20
+ --rte-motion-duration: 120ms;
21
+ --rte-shadow-popover: 0 6px 24px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
22
+ --rte-bg: #10151d;
23
+ --rte-surface: #171e29;
24
+ --rte-surface-raised: #1d2633;
25
+ --rte-fg: #eaeef4;
26
+ --rte-fg-muted: #a9b4c3;
27
+ --rte-border: #6b7789;
28
+ --rte-border-subtle: #2b3646;
29
+ --rte-accent: #6fa0e8;
30
+ --rte-accent-fg: #0b1a33;
31
+ --rte-accent-subtle: #1d3257;
32
+ --rte-danger: #ff8f86;
33
+ --rte-selection-bg: #294a80;
34
+ --rte-control-hover: #243044;
35
+ --rte-control-active: #2f3e57;
36
+ --rte-brand: #e0a850;
37
+ --rte-brand-text: #e0a850;
38
+ --rte-focus-color: #9bc0f5;
39
39
  color-scheme: dark;
40
40
  }
package/css/density.css CHANGED
@@ -1,18 +1,18 @@
1
- /* Density: set data-rk-density="compact" or "comfortable" on the root. It changes space and control size only, whatever the theme. */
2
- :where([data-rk-density="compact"]) {
3
- --rk-space-1: 2px;
4
- --rk-space-2: 4px;
5
- --rk-space-3: 8px;
6
- --rk-space-4: 12px;
7
- --rk-control-size: 28px;
8
- --rk-font-size: 15px;
9
- --rk-line-height: 1.5;
1
+ /* Density: set data-rte-density="compact" or "comfortable" on the root. It changes space and control size only, whatever the theme. */
2
+ :where([data-rte-density="compact"]) {
3
+ --rte-space-1: 2px;
4
+ --rte-space-2: 4px;
5
+ --rte-space-3: 8px;
6
+ --rte-space-4: 12px;
7
+ --rte-control-size: 28px;
8
+ --rte-font-size: 15px;
9
+ --rte-line-height: 1.5;
10
10
  }
11
11
 
12
- :where([data-rk-density="comfortable"]) {
13
- --rk-space-1: 6px;
14
- --rk-space-2: 10px;
15
- --rk-space-3: 14px;
16
- --rk-space-4: 20px;
17
- --rk-control-size: 40px;
12
+ :where([data-rte-density="comfortable"]) {
13
+ --rte-space-1: 6px;
14
+ --rte-space-2: 10px;
15
+ --rte-space-3: 14px;
16
+ --rte-space-4: 20px;
17
+ --rte-control-size: 40px;
18
18
  }
package/css/high-contrast.css CHANGED
@@ -1,40 +1,40 @@
1
1
  /* Rathkit RTE theme: high-contrast. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
2
- Scope: any element with data-rk-theme="high-contrast" (normally the .rk-root of an editor), never :root. */
3
- :where([data-rk-theme="high-contrast"]) {
4
- --rk-space-1: 4px;
5
- --rk-space-2: 8px;
6
- --rk-space-3: 12px;
7
- --rk-space-4: 16px;
8
- --rk-control-size: 32px;
9
- --rk-radius-s: 4px;
10
- --rk-radius-m: 8px;
11
- --rk-border-width: 2px;
12
- --rk-focus-width: 3px;
13
- --rk-focus-offset: 2px;
14
- --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
- --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
- --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
- --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
- --rk-font-size: 16px;
19
- --rk-line-height: 1.55;
20
- --rk-motion-duration: 0ms;
21
- --rk-shadow-popover: none;
22
- --rk-bg: #000000;
23
- --rk-surface: #000000;
24
- --rk-surface-raised: #000000;
25
- --rk-fg: #ffffff;
26
- --rk-fg-muted: #e6e6e6;
27
- --rk-border: #ffffff;
28
- --rk-border-subtle: #ffffff;
29
- --rk-accent: #ffd54a;
30
- --rk-accent-fg: #000000;
31
- --rk-accent-subtle: #2a2a00;
32
- --rk-danger: #ff9a9a;
33
- --rk-selection-bg: #0a3cff;
34
- --rk-control-hover: #1f1f1f;
35
- --rk-control-active: #3a3a3a;
36
- --rk-brand: #ffd54a;
37
- --rk-brand-text: #ffd54a;
38
- --rk-focus-color: #ffd54a;
2
+ Scope: any element with data-rte-theme="high-contrast" (normally the .rte-root of an editor), never :root. */
3
+ :where([data-rte-theme="high-contrast"]) {
4
+ --rte-space-1: 4px;
5
+ --rte-space-2: 8px;
6
+ --rte-space-3: 12px;
7
+ --rte-space-4: 16px;
8
+ --rte-control-size: 32px;
9
+ --rte-radius-s: 4px;
10
+ --rte-radius-m: 8px;
11
+ --rte-border-width: 2px;
12
+ --rte-focus-width: 3px;
13
+ --rte-focus-offset: 2px;
14
+ --rte-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
+ --rte-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
+ --rte-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
+ --rte-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
+ --rte-font-size: 16px;
19
+ --rte-line-height: 1.55;
20
+ --rte-motion-duration: 0ms;
21
+ --rte-shadow-popover: none;
22
+ --rte-bg: #000000;
23
+ --rte-surface: #000000;
24
+ --rte-surface-raised: #000000;
25
+ --rte-fg: #ffffff;
26
+ --rte-fg-muted: #e6e6e6;
27
+ --rte-border: #ffffff;
28
+ --rte-border-subtle: #ffffff;
29
+ --rte-accent: #ffd54a;
30
+ --rte-accent-fg: #000000;
31
+ --rte-accent-subtle: #2a2a00;
32
+ --rte-danger: #ff9a9a;
33
+ --rte-selection-bg: #0a3cff;
34
+ --rte-control-hover: #1f1f1f;
35
+ --rte-control-active: #3a3a3a;
36
+ --rte-brand: #ffd54a;
37
+ --rte-brand-text: #ffd54a;
38
+ --rte-focus-color: #ffd54a;
39
39
  color-scheme: dark;
40
40
  }
package/css/light.css CHANGED
@@ -1,40 +1,40 @@
1
1
  /* Rathkit RTE theme: light. Token values only: no rules for any part. Load it after the base styles of @rathkit/rte-ui.
2
- Scope: any element with data-rk-theme="light" (normally the .rk-root of an editor), never :root. */
3
- :where([data-rk-theme="light"]) {
4
- --rk-space-1: 4px;
5
- --rk-space-2: 8px;
6
- --rk-space-3: 12px;
7
- --rk-space-4: 16px;
8
- --rk-control-size: 32px;
9
- --rk-radius-s: 4px;
10
- --rk-radius-m: 8px;
11
- --rk-border-width: 1px;
12
- --rk-focus-width: 2px;
13
- --rk-focus-offset: 2px;
14
- --rk-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
- --rk-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
- --rk-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
- --rk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
- --rk-font-size: 16px;
19
- --rk-line-height: 1.55;
20
- --rk-motion-duration: 120ms;
21
- --rk-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
22
- --rk-bg: #ffffff;
23
- --rk-surface: #f4f6f9;
24
- --rk-surface-raised: #ffffff;
25
- --rk-fg: #14181f;
26
- --rk-fg-muted: #505b6b;
27
- --rk-border: #78849a;
28
- --rk-border-subtle: #d4dae3;
29
- --rk-accent: #17408b;
30
- --rk-accent-fg: #ffffff;
31
- --rk-accent-subtle: #e3ecfa;
32
- --rk-danger: #b3261e;
33
- --rk-selection-bg: #cddffa;
34
- --rk-control-hover: #e6ebf3;
35
- --rk-control-active: #d3dcec;
36
- --rk-brand: #b9812a;
37
- --rk-brand-text: #86590f;
38
- --rk-focus-color: #17408b;
2
+ Scope: any element with data-rte-theme="light" (normally the .rte-root of an editor), never :root. */
3
+ :where([data-rte-theme="light"]) {
4
+ --rte-space-1: 4px;
5
+ --rte-space-2: 8px;
6
+ --rte-space-3: 12px;
7
+ --rte-space-4: 16px;
8
+ --rte-control-size: 32px;
9
+ --rte-radius-s: 4px;
10
+ --rte-radius-m: 8px;
11
+ --rte-border-width: 1px;
12
+ --rte-focus-width: 2px;
13
+ --rte-focus-offset: 2px;
14
+ --rte-font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
15
+ --rte-font-content: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
16
+ --rte-font-heading: "Archivo", "Instrument Sans", system-ui, sans-serif;
17
+ --rte-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
18
+ --rte-font-size: 16px;
19
+ --rte-line-height: 1.55;
20
+ --rte-motion-duration: 120ms;
21
+ --rte-shadow-popover: 0 6px 24px rgb(20 24 31 / 0.18), 0 1px 3px rgb(20 24 31 / 0.12);
22
+ --rte-bg: #ffffff;
23
+ --rte-surface: #f4f6f9;
24
+ --rte-surface-raised: #ffffff;
25
+ --rte-fg: #14181f;
26
+ --rte-fg-muted: #505b6b;
27
+ --rte-border: #78849a;
28
+ --rte-border-subtle: #d4dae3;
29
+ --rte-accent: #17408b;
30
+ --rte-accent-fg: #ffffff;
31
+ --rte-accent-subtle: #e3ecfa;
32
+ --rte-danger: #b3261e;
33
+ --rte-selection-bg: #cddffa;
34
+ --rte-control-hover: #e6ebf3;
35
+ --rte-control-active: #d3dcec;
36
+ --rte-brand: #b9812a;
37
+ --rte-brand-text: #86590f;
38
+ --rte-focus-color: #17408b;
39
39
  color-scheme: light;
40
40
  }
package/dist/tokens.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const TOKENS: readonly ["--rk-accent", "--rk-accent-fg", "--rk-accent-subtle", "--rk-bg", "--rk-border", "--rk-border-subtle", "--rk-border-width", "--rk-brand", "--rk-brand-text", "--rk-control-active", "--rk-control-hover", "--rk-control-size", "--rk-danger", "--rk-fg", "--rk-fg-muted", "--rk-focus-color", "--rk-focus-offset", "--rk-focus-width", "--rk-font-content", "--rk-font-heading", "--rk-font-mono", "--rk-font-size", "--rk-font-ui", "--rk-line-height", "--rk-motion-duration", "--rk-radius-m", "--rk-radius-s", "--rk-selection-bg", "--rk-shadow-popover", "--rk-space-1", "--rk-space-2", "--rk-space-3", "--rk-space-4", "--rk-surface", "--rk-surface-raised"];
1
+ export declare const TOKENS: readonly ["--rte-accent", "--rte-accent-fg", "--rte-accent-subtle", "--rte-bg", "--rte-border", "--rte-border-subtle", "--rte-border-width", "--rte-brand", "--rte-brand-text", "--rte-control-active", "--rte-control-hover", "--rte-control-size", "--rte-danger", "--rte-fg", "--rte-fg-muted", "--rte-focus-color", "--rte-focus-offset", "--rte-focus-width", "--rte-font-content", "--rte-font-heading", "--rte-font-mono", "--rte-font-size", "--rte-font-ui", "--rte-line-height", "--rte-motion-duration", "--rte-radius-m", "--rte-radius-s", "--rte-selection-bg", "--rte-shadow-popover", "--rte-space-1", "--rte-space-2", "--rte-space-3", "--rte-space-4", "--rte-surface", "--rte-surface-raised"];
2
2
  export type TokenName = (typeof TOKENS)[number];
3
3
  /** Themes that ship as CSS files in this package. */
4
4
  export declare const THEMES: readonly ["light", "dark", "auto", "high-contrast"];
package/dist/tokens.js CHANGED
@@ -1,38 +1,38 @@
1
1
  export const TOKENS = [
2
- "--rk-accent",
3
- "--rk-accent-fg",
4
- "--rk-accent-subtle",
5
- "--rk-bg",
6
- "--rk-border",
7
- "--rk-border-subtle",
8
- "--rk-border-width",
9
- "--rk-brand",
10
- "--rk-brand-text",
11
- "--rk-control-active",
12
- "--rk-control-hover",
13
- "--rk-control-size",
14
- "--rk-danger",
15
- "--rk-fg",
16
- "--rk-fg-muted",
17
- "--rk-focus-color",
18
- "--rk-focus-offset",
19
- "--rk-focus-width",
20
- "--rk-font-content",
21
- "--rk-font-heading",
22
- "--rk-font-mono",
23
- "--rk-font-size",
24
- "--rk-font-ui",
25
- "--rk-line-height",
26
- "--rk-motion-duration",
27
- "--rk-radius-m",
28
- "--rk-radius-s",
29
- "--rk-selection-bg",
30
- "--rk-shadow-popover",
31
- "--rk-space-1",
32
- "--rk-space-2",
33
- "--rk-space-3",
34
- "--rk-space-4",
35
- "--rk-surface",
36
- "--rk-surface-raised",
2
+ "--rte-accent",
3
+ "--rte-accent-fg",
4
+ "--rte-accent-subtle",
5
+ "--rte-bg",
6
+ "--rte-border",
7
+ "--rte-border-subtle",
8
+ "--rte-border-width",
9
+ "--rte-brand",
10
+ "--rte-brand-text",
11
+ "--rte-control-active",
12
+ "--rte-control-hover",
13
+ "--rte-control-size",
14
+ "--rte-danger",
15
+ "--rte-fg",
16
+ "--rte-fg-muted",
17
+ "--rte-focus-color",
18
+ "--rte-focus-offset",
19
+ "--rte-focus-width",
20
+ "--rte-font-content",
21
+ "--rte-font-heading",
22
+ "--rte-font-mono",
23
+ "--rte-font-size",
24
+ "--rte-font-ui",
25
+ "--rte-line-height",
26
+ "--rte-motion-duration",
27
+ "--rte-radius-m",
28
+ "--rte-radius-s",
29
+ "--rte-selection-bg",
30
+ "--rte-shadow-popover",
31
+ "--rte-space-1",
32
+ "--rte-space-2",
33
+ "--rte-space-3",
34
+ "--rte-space-4",
35
+ "--rte-surface",
36
+ "--rte-surface-raised",
37
37
  ];
38
38
  export const THEMES = ["light", "dark", "auto", "high-contrast"];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rathkit/rte-themes",
3
- "version": "0.1.0-alpha.4",
3
+ "version": "0.1.0-alpha.5",
4
4
  "description": "Preset themes for the Rathkit RTE interface: design token values, as plain CSS.",
5
5
  "keywords": [
6
6
  "rich-text",