@whitekiwi/tokens 0.2.1 → 0.2.3

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 (3) hide show
  1. package/README.md +10 -7
  2. package/package.json +1 -1
  3. package/src/theme.css +10 -10
package/README.md CHANGED
@@ -49,7 +49,7 @@ body {
49
49
  For an unbundled page, copy the exported CSS to your public assets and load it
50
50
  with a stylesheet link. Browsers do not resolve npm package names themselves.
51
51
 
52
- ## Light, dark, or the system
52
+ ## Light, dark, or auto
53
53
 
54
54
  Set the theme on the root `<html>` element:
55
55
 
@@ -57,12 +57,15 @@ Set the theme on the root `<html>` element:
57
57
  | --- | --- |
58
58
  | Light | `<html data-theme="light">` |
59
59
  | Dark | `<html data-theme="dark">` |
60
- | System | `<html>` with no `data-theme` attribute |
61
-
62
- For system mode, remove the attribute; `data-theme="auto"` does **not** enable
63
- system detection. Theme colors follow `prefers-color-scheme` only when the
64
- attribute is absent. Apply a saved explicit preference before first paint to
65
- avoid a light/dark flash. Theme storage and switching belong to your app.
60
+ | Auto | `<html>` with no `data-theme` attribute |
61
+
62
+ Auto removes the attribute. `data-theme="auto"` does **not** select a theme.
63
+ Colors follow `prefers-color-scheme` only when the attribute is absent. Apply a
64
+ saved `light` or `dark` value before first paint to avoid a flash. The app
65
+ chooses the localStorage key and stores only those two values. The early
66
+ `pip-theme-bootstrap` script and `ThemeControl` live in
67
+ [@whitekiwi/ui](../ui/README.md#screen-theme). This package still has no
68
+ JavaScript runtime.
66
69
 
67
70
  ## Use roles, not raw colors
68
71
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whitekiwi/tokens",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "private": false,
5
5
  "sideEffects": [
6
6
  "**/*.css"
package/src/theme.css CHANGED
@@ -6,10 +6,10 @@
6
6
  --kiwi-milk: #fbfcf8;
7
7
  --kiwi-ink: #11140f;
8
8
  --kiwi-ash: #62685e;
9
- --kiwi-carbon: #0e100e;
10
- --kiwi-carbon-raised: #181a18;
11
- --kiwi-fog: #a5ab9f;
12
- --kiwi-chalk: #f1f4eb;
9
+ --kiwi-carbon: #0e0e0e;
10
+ --kiwi-carbon-raised: #181818;
11
+ --kiwi-fog: #a8a8a6;
12
+ --kiwi-chalk: #f2f2f0;
13
13
  --kiwi-signal: #c6ff4a;
14
14
  --kiwi-soft: #e9f8c9;
15
15
  --kiwi-line: #668b15;
@@ -84,7 +84,7 @@
84
84
  color-scheme: dark;
85
85
  --kiwi-color-canvas: var(--kiwi-carbon);
86
86
  --kiwi-color-surface: var(--kiwi-carbon-raised);
87
- --kiwi-color-surface-raised: #202320;
87
+ --kiwi-color-surface-raised: #202020;
88
88
  --kiwi-color-text: var(--kiwi-chalk);
89
89
  --kiwi-color-text-muted: var(--kiwi-fog);
90
90
  --kiwi-color-control-border: var(--kiwi-fog);
@@ -104,8 +104,8 @@
104
104
  --kiwi-color-interactive: var(--kiwi-signal);
105
105
  --kiwi-color-interactive-hover: #d8ff84;
106
106
  --kiwi-color-interactive-active: #b7ef3f;
107
- --kiwi-color-control-hover: #29321e;
108
- --kiwi-color-control-active: #344325;
107
+ --kiwi-color-control-hover: #2a2a2a;
108
+ --kiwi-color-control-active: #333333;
109
109
  --kiwi-color-disabled-surface: color-mix(
110
110
  in srgb,
111
111
  var(--kiwi-chalk) 8%,
@@ -133,7 +133,7 @@
133
133
  color-scheme: dark;
134
134
  --kiwi-color-canvas: var(--kiwi-carbon);
135
135
  --kiwi-color-surface: var(--kiwi-carbon-raised);
136
- --kiwi-color-surface-raised: #202320;
136
+ --kiwi-color-surface-raised: #202020;
137
137
  --kiwi-color-text: var(--kiwi-chalk);
138
138
  --kiwi-color-text-muted: var(--kiwi-fog);
139
139
  --kiwi-color-control-border: var(--kiwi-fog);
@@ -153,8 +153,8 @@
153
153
  --kiwi-color-interactive: var(--kiwi-signal);
154
154
  --kiwi-color-interactive-hover: #d8ff84;
155
155
  --kiwi-color-interactive-active: #b7ef3f;
156
- --kiwi-color-control-hover: #29321e;
157
- --kiwi-color-control-active: #344325;
156
+ --kiwi-color-control-hover: #2a2a2a;
157
+ --kiwi-color-control-active: #333333;
158
158
  --kiwi-color-disabled-surface: color-mix(
159
159
  in srgb,
160
160
  var(--kiwi-chalk) 8%,