@ecopages/radiant-themes 0.2.0-rc.0 → 0.2.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/README.md +8 -6
- package/dist/compiled/themes/macos-classic/compact.css +3 -3
- package/dist/compiled/themes/macos-classic.css +3 -3
- package/dist/compiled/themes/windows95/compact.css +4 -4
- package/dist/compiled/themes/windows95.css +4 -4
- package/dist/tokens/colors/macos-classic.css +3 -3
- package/dist/tokens/colors/windows95.css +4 -4
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -58,18 +58,20 @@ in dark mode. Material Design uses tonal surfaces, a purple accent family, and r
|
|
|
58
58
|
controls. These are original implementations written with Radiant semantic roles, Tailwind `@apply`, and catalog
|
|
59
59
|
selectors; they do not copy third-party CSS.
|
|
60
60
|
|
|
61
|
-
The Cloudflare theme leads with Cloudflare orange on restrained neutral layers inspired by Cloudflare Kumo.
|
|
62
|
-
uses
|
|
63
|
-
contrast
|
|
61
|
+
The Cloudflare theme leads with Cloudflare orange on restrained neutral layers inspired by Cloudflare Kumo. Its
|
|
62
|
+
semantic primary role uses deeper orange `#cc3a00` in light mode and brighter orange `#ff5e1e` in dark mode. Filled
|
|
63
|
+
primary buttons use the contrast-safe `#cc3a00` with white text in both modes. Links and focus stay blue, and warnings
|
|
64
|
+
use a yellow amber that stays distinct from the primary.
|
|
64
65
|
GitHub maps Primer's functional roles: green marks the primary action, blue is for links and focus, the selected tab
|
|
65
66
|
uses Primer's coral underline, and neutral surfaces are used for secondary actions.
|
|
66
67
|
|
|
67
68
|
The Vercel theme uses Background 2 for the light canvas and Background 1 for primary surfaces. Its component colors
|
|
68
69
|
drive hover and active fills, Colors 4–6 drive default, hover, and active borders, and blue stays focused on links and
|
|
69
70
|
keyboard focus. Control boundaries are strengthened for visibility. VS Code maps editor surfaces and accent states,
|
|
70
|
-
with Dark Modern's `#0078d4`
|
|
71
|
-
|
|
72
|
-
|
|
71
|
+
with Dark Modern's `#0078d4` fill for dark-mode filled buttons. Button treatments vary by theme: Cloudflare uses a
|
|
72
|
+
contrast-safe orange primary fill, while Cloudflare, GitHub, and Vercel use saturated fills with white text for
|
|
73
|
+
dark-mode destructive buttons. Other variants follow each theme's semantic roles. These palettes adapt product cues to
|
|
74
|
+
Radiant UI roles without reproducing the products pixel for pixel.
|
|
73
75
|
|
|
74
76
|
## Design references
|
|
75
77
|
|
|
@@ -280,9 +280,9 @@
|
|
|
280
280
|
--macos-classic-container: #3a3a3a;
|
|
281
281
|
--macos-classic-face: #4a4a4a;
|
|
282
282
|
--macos-classic-face-pressed: #2a2a2a;
|
|
283
|
-
--macos-classic-light: #
|
|
284
|
-
--macos-classic-mid: #
|
|
285
|
-
--macos-classic-shadow: #
|
|
283
|
+
--macos-classic-light: #b0b0b0;
|
|
284
|
+
--macos-classic-mid: #858585;
|
|
285
|
+
--macos-classic-shadow: #777777;
|
|
286
286
|
--macos-classic-dark: #000000;
|
|
287
287
|
--macos-classic-titlebar-stripe: #555555;
|
|
288
288
|
--macos-classic-titlebar-line: #1a1a1a;
|
|
@@ -280,9 +280,9 @@
|
|
|
280
280
|
--macos-classic-container: #3a3a3a;
|
|
281
281
|
--macos-classic-face: #4a4a4a;
|
|
282
282
|
--macos-classic-face-pressed: #2a2a2a;
|
|
283
|
-
--macos-classic-light: #
|
|
284
|
-
--macos-classic-mid: #
|
|
285
|
-
--macos-classic-shadow: #
|
|
283
|
+
--macos-classic-light: #b0b0b0;
|
|
284
|
+
--macos-classic-mid: #858585;
|
|
285
|
+
--macos-classic-shadow: #777777;
|
|
286
286
|
--macos-classic-dark: #000000;
|
|
287
287
|
--macos-classic-titlebar-stripe: #555555;
|
|
288
288
|
--macos-classic-titlebar-line: #1a1a1a;
|
|
@@ -270,10 +270,10 @@
|
|
|
270
270
|
:where(.dark), :root.dark[data-rui-theme='windows95'] {
|
|
271
271
|
--windows95-canvas: #2b2b2b;
|
|
272
272
|
--windows95-face: #3a3a3a;
|
|
273
|
-
--windows95-light: #
|
|
274
|
-
--windows95-highlight: #
|
|
275
|
-
--windows95-shadow: #
|
|
276
|
-
--windows95-dark: #
|
|
273
|
+
--windows95-light: #d0d0d0;
|
|
274
|
+
--windows95-highlight: #a5a5a5;
|
|
275
|
+
--windows95-shadow: #858585;
|
|
276
|
+
--windows95-dark: #6f6f6f;
|
|
277
277
|
--windows95-text: #f0f0f0;
|
|
278
278
|
--windows95-muted: #c8c8c8;
|
|
279
279
|
--windows95-field: #1c1c1c;
|
|
@@ -270,10 +270,10 @@
|
|
|
270
270
|
:where(.dark), :root.dark[data-rui-theme='windows95'] {
|
|
271
271
|
--windows95-canvas: #2b2b2b;
|
|
272
272
|
--windows95-face: #3a3a3a;
|
|
273
|
-
--windows95-light: #
|
|
274
|
-
--windows95-highlight: #
|
|
275
|
-
--windows95-shadow: #
|
|
276
|
-
--windows95-dark: #
|
|
273
|
+
--windows95-light: #d0d0d0;
|
|
274
|
+
--windows95-highlight: #a5a5a5;
|
|
275
|
+
--windows95-shadow: #858585;
|
|
276
|
+
--windows95-dark: #6f6f6f;
|
|
277
277
|
--windows95-text: #f0f0f0;
|
|
278
278
|
--windows95-muted: #c8c8c8;
|
|
279
279
|
--windows95-field: #1c1c1c;
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
--macos-classic-container: #3a3a3a;
|
|
39
39
|
--macos-classic-face: #4a4a4a;
|
|
40
40
|
--macos-classic-face-pressed: #2a2a2a;
|
|
41
|
-
--macos-classic-light: #
|
|
42
|
-
--macos-classic-mid: #
|
|
43
|
-
--macos-classic-shadow: #
|
|
41
|
+
--macos-classic-light: #b0b0b0;
|
|
42
|
+
--macos-classic-mid: #858585;
|
|
43
|
+
--macos-classic-shadow: #777777;
|
|
44
44
|
--macos-classic-dark: #000000;
|
|
45
45
|
--macos-classic-titlebar-stripe: #555555;
|
|
46
46
|
--macos-classic-titlebar-line: #1a1a1a;
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
:where(.dark), :root.dark[data-rui-theme='windows95'] {
|
|
26
26
|
--windows95-canvas: #2b2b2b;
|
|
27
27
|
--windows95-face: #3a3a3a;
|
|
28
|
-
--windows95-light: #
|
|
29
|
-
--windows95-highlight: #
|
|
30
|
-
--windows95-shadow: #
|
|
31
|
-
--windows95-dark: #
|
|
28
|
+
--windows95-light: #d0d0d0;
|
|
29
|
+
--windows95-highlight: #a5a5a5;
|
|
30
|
+
--windows95-shadow: #858585;
|
|
31
|
+
--windows95-dark: #6f6f6f;
|
|
32
32
|
--windows95-text: #f0f0f0;
|
|
33
33
|
--windows95-muted: #c8c8c8;
|
|
34
34
|
--windows95-field: #1c1c1c;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ecopages/radiant-themes",
|
|
3
|
-
"version": "0.2.0
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Composable color themes and variants for @ecopages/radiant-ui",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"**/*.css"
|
|
20
20
|
],
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@ecopages/radiant-ui": ">=0.2.0
|
|
22
|
+
"@ecopages/radiant-ui": ">=0.2.0"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
25
|
"@tailwindcss/postcss": "^4.3.3",
|
|
26
26
|
"playwright": "^1.62.1",
|
|
27
27
|
"postcss": "^8.5.24",
|
|
28
28
|
"tailwindcss": "^4.3.0",
|
|
29
|
-
"@ecopages/radiant-ui": "0.2.0
|
|
29
|
+
"@ecopages/radiant-ui": "0.2.0"
|
|
30
30
|
},
|
|
31
31
|
"exports": {
|
|
32
32
|
"./package.json": "./package.json",
|