@terpjs/contract 0.1.0 → 0.3.0
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.
- package/package.json +1 -1
- package/scripts/build-tokens.mjs +6 -0
- package/src/tokens.css +6 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@terpjs/contract",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Terp frontend contract \u2014 the OpenAPI-generated TypeScript client, design tokens, and the stack-agnostic module/route/nav + auth types.",
|
|
6
6
|
"exports": {
|
package/scripts/build-tokens.mjs
CHANGED
|
@@ -60,17 +60,23 @@ const output = `/**
|
|
|
60
60
|
*/
|
|
61
61
|
|
|
62
62
|
:root {
|
|
63
|
+
/* Opts native chrome (scrollbars, the <select> option popup, form controls,
|
|
64
|
+
text-field carets) into the light palette so it never renders as foreign
|
|
65
|
+
OS-light chrome. The dark blocks below flip it to dark. */
|
|
66
|
+
color-scheme: light;
|
|
63
67
|
${light}
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
/* Dark theme: an explicit user/app choice via <html data-theme="dark">. */
|
|
67
71
|
[data-theme='dark'] {
|
|
72
|
+
color-scheme: dark;
|
|
68
73
|
${dark}
|
|
69
74
|
}
|
|
70
75
|
|
|
71
76
|
/* Dark theme: the OS preference, unless the app pinned light explicitly. */
|
|
72
77
|
@media (prefers-color-scheme: dark) {
|
|
73
78
|
:root:not([data-theme='light']) {
|
|
79
|
+
color-scheme: dark;
|
|
74
80
|
${dark.replace(/^ {2}/gm, " ")}
|
|
75
81
|
}
|
|
76
82
|
}
|
package/src/tokens.css
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
+
/* Opts native chrome (scrollbars, the <select> option popup, form controls,
|
|
7
|
+
text-field carets) into the light palette so it never renders as foreign
|
|
8
|
+
OS-light chrome. The dark blocks below flip it to dark. */
|
|
9
|
+
color-scheme: light;
|
|
6
10
|
--color-brand-primary: #2563eb;
|
|
7
11
|
--color-brand-primary-contrast: #ffffff;
|
|
8
12
|
--color-brand-primary-hover: #1d4ed8;
|
|
@@ -56,6 +60,7 @@
|
|
|
56
60
|
|
|
57
61
|
/* Dark theme: an explicit user/app choice via <html data-theme="dark">. */
|
|
58
62
|
[data-theme='dark'] {
|
|
63
|
+
color-scheme: dark;
|
|
59
64
|
--color-brand-primary: #3b82f6;
|
|
60
65
|
--color-brand-primary-contrast: #ffffff;
|
|
61
66
|
--color-brand-primary-hover: #60a5fa;
|
|
@@ -85,6 +90,7 @@
|
|
|
85
90
|
/* Dark theme: the OS preference, unless the app pinned light explicitly. */
|
|
86
91
|
@media (prefers-color-scheme: dark) {
|
|
87
92
|
:root:not([data-theme='light']) {
|
|
93
|
+
color-scheme: dark;
|
|
88
94
|
--color-brand-primary: #3b82f6;
|
|
89
95
|
--color-brand-primary-contrast: #ffffff;
|
|
90
96
|
--color-brand-primary-hover: #60a5fa;
|