@riebeckite/theme-minimal 0.0.1 → 0.0.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 (2) hide show
  1. package/package.json +2 -2
  2. package/styles/theme.css +106 -106
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/theme-minimal",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./dist/src/index.js",
@@ -16,7 +16,7 @@
16
16
  "./styles/theme.css": "./styles/theme.css"
17
17
  },
18
18
  "dependencies": {
19
- "@riebeckite/core": "0.0.1"
19
+ "@riebeckite/core": "0.0.3"
20
20
  },
21
21
  "publishConfig": {
22
22
  "access": "public"
package/styles/theme.css CHANGED
@@ -1,106 +1,106 @@
1
- @theme {
2
- --font-sans: var(--rb-font-body);
3
- --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
4
- --font-mono: var(--rb-font-mono);
5
- --color-rb-paper: var(--rb-color-paper);
6
- --color-rb-ink: var(--rb-color-ink);
7
- --color-rb-muted: var(--rb-color-muted);
8
- --color-rb-accent: var(--rb-color-accent);
9
- --color-rb-surface: var(--rb-color-surface);
10
- --color-rb-danger: var(--rb-color-danger);
11
- --color-rb-success: var(--rb-color-success);
12
- }
13
-
14
- @layer base {
15
- :root {
16
- color-scheme: light;
17
- --rb-color-paper: #ffffff;
18
- --rb-color-surface: #f7f7f7;
19
- --rb-color-surface-hover: #ececec;
20
- --rb-color-ink: #1a1a1a;
21
- --rb-color-muted: #737373;
22
- --rb-color-accent: #1a1a1a;
23
- --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
24
- --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
25
- --rb-color-danger: #b42318;
26
- --rb-color-success: #047857;
27
- --rb-color-code-background: #f2f2f2;
28
- --rb-color-overlay: rgb(0 0 0 / 0.4);
29
- --rb-font-body: ui-sans-serif, system-ui, sans-serif;
30
- --rb-font-heading: var(--rb-font-body);
31
- --rb-font-mono: "SFMono-Regular", Consolas, monospace;
32
- --rb-space-1: 0.5rem;
33
- --rb-space-2: 1rem;
34
- --rb-space-3: 1.5rem;
35
- --rb-space-4: 2rem;
36
- --rb-space-6: 3rem;
37
- --rb-space-8: 4rem;
38
- --rb-rule-width: 1px;
39
- --rb-layout-page-max: 80rem;
40
- --rb-layout-article-max: 48rem;
41
- --rb-layout-sidebar: 14rem;
42
- --rb-layout-gap: 2rem;
43
- }
44
-
45
- :root[data-theme="dark"] {
46
- color-scheme: dark;
47
- --rb-color-paper: #1a1a1a;
48
- --rb-color-surface: #242424;
49
- --rb-color-surface-hover: #2e2e2e;
50
- --rb-color-ink: #e5e5e5;
51
- --rb-color-muted: #9e9e9e;
52
- --rb-color-accent: #e5e5e5;
53
- --rb-color-danger: #e5484d;
54
- --rb-color-success: #30a46c;
55
- --rb-color-code-background: #262626;
56
- --rb-color-overlay: rgb(0 0 0 / 0.6);
57
- }
58
-
59
- @media (prefers-color-scheme: dark) {
60
- :root:not([data-theme]) {
61
- color-scheme: dark;
62
- --rb-color-paper: #1a1a1a;
63
- --rb-color-surface: #242424;
64
- --rb-color-surface-hover: #2e2e2e;
65
- --rb-color-ink: #e5e5e5;
66
- --rb-color-muted: #9e9e9e;
67
- --rb-color-accent: #e5e5e5;
68
- --rb-color-danger: #e5484d;
69
- --rb-color-success: #30a46c;
70
- --rb-color-code-background: #262626;
71
- --rb-color-overlay: rgb(0 0 0 / 0.6);
72
- }
73
- }
74
-
75
- :root[data-typography="serif"] {
76
- --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
77
- --rb-font-heading: ui-sans-serif, system-ui, sans-serif;
78
- }
79
-
80
- :root[data-typography="sans"] {
81
- --rb-font-body: ui-sans-serif, system-ui, sans-serif;
82
- --rb-font-heading: var(--rb-font-body);
83
- }
84
-
85
- html {
86
- background: var(--rb-color-paper);
87
- color: var(--rb-color-ink);
88
- font-family: var(--rb-font-body);
89
- }
90
-
91
- body {
92
- margin: 0;
93
- background: var(--rb-color-paper);
94
- color: var(--rb-color-ink);
95
- }
96
-
97
- ::selection {
98
- background: var(--rb-color-accent);
99
- color: var(--rb-color-paper);
100
- }
101
-
102
- :focus-visible {
103
- outline: 2px solid var(--rb-color-accent);
104
- outline-offset: 2px;
105
- }
106
- }
1
+ @theme {
2
+ --font-sans: var(--rb-font-body);
3
+ --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
4
+ --font-mono: var(--rb-font-mono);
5
+ --color-rb-paper: var(--rb-color-paper);
6
+ --color-rb-ink: var(--rb-color-ink);
7
+ --color-rb-muted: var(--rb-color-muted);
8
+ --color-rb-accent: var(--rb-color-accent);
9
+ --color-rb-surface: var(--rb-color-surface);
10
+ --color-rb-danger: var(--rb-color-danger);
11
+ --color-rb-success: var(--rb-color-success);
12
+ }
13
+
14
+ @layer base {
15
+ :root {
16
+ color-scheme: light;
17
+ --rb-color-paper: #ffffff;
18
+ --rb-color-surface: #f7f7f7;
19
+ --rb-color-surface-hover: #ececec;
20
+ --rb-color-ink: #1a1a1a;
21
+ --rb-color-muted: #737373;
22
+ --rb-color-accent: #1a1a1a;
23
+ --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
24
+ --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
25
+ --rb-color-danger: #b42318;
26
+ --rb-color-success: #047857;
27
+ --rb-color-code-background: #f2f2f2;
28
+ --rb-color-overlay: rgb(0 0 0 / 0.4);
29
+ --rb-font-body: ui-sans-serif, system-ui, sans-serif;
30
+ --rb-font-heading: var(--rb-font-body);
31
+ --rb-font-mono: "SFMono-Regular", Consolas, monospace;
32
+ --rb-space-1: 0.5rem;
33
+ --rb-space-2: 1rem;
34
+ --rb-space-3: 1.5rem;
35
+ --rb-space-4: 2rem;
36
+ --rb-space-6: 3rem;
37
+ --rb-space-8: 4rem;
38
+ --rb-rule-width: 1px;
39
+ --rb-layout-page-max: 80rem;
40
+ --rb-layout-article-max: 48rem;
41
+ --rb-layout-sidebar: 14rem;
42
+ --rb-layout-gap: 2rem;
43
+ }
44
+
45
+ :root[data-theme="dark"] {
46
+ color-scheme: dark;
47
+ --rb-color-paper: #1a1a1a;
48
+ --rb-color-surface: #242424;
49
+ --rb-color-surface-hover: #2e2e2e;
50
+ --rb-color-ink: #e5e5e5;
51
+ --rb-color-muted: #9e9e9e;
52
+ --rb-color-accent: #e5e5e5;
53
+ --rb-color-danger: #e5484d;
54
+ --rb-color-success: #30a46c;
55
+ --rb-color-code-background: #262626;
56
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
57
+ }
58
+
59
+ @media (prefers-color-scheme: dark) {
60
+ :root:not([data-theme]) {
61
+ color-scheme: dark;
62
+ --rb-color-paper: #1a1a1a;
63
+ --rb-color-surface: #242424;
64
+ --rb-color-surface-hover: #2e2e2e;
65
+ --rb-color-ink: #e5e5e5;
66
+ --rb-color-muted: #9e9e9e;
67
+ --rb-color-accent: #e5e5e5;
68
+ --rb-color-danger: #e5484d;
69
+ --rb-color-success: #30a46c;
70
+ --rb-color-code-background: #262626;
71
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
72
+ }
73
+ }
74
+
75
+ :root[data-typography="serif"] {
76
+ --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
77
+ --rb-font-heading: ui-sans-serif, system-ui, sans-serif;
78
+ }
79
+
80
+ :root[data-typography="sans"] {
81
+ --rb-font-body: ui-sans-serif, system-ui, sans-serif;
82
+ --rb-font-heading: var(--rb-font-body);
83
+ }
84
+
85
+ html {
86
+ background: var(--rb-color-paper);
87
+ color: var(--rb-color-ink);
88
+ font-family: var(--rb-font-body);
89
+ }
90
+
91
+ body {
92
+ margin: 0;
93
+ background: var(--rb-color-paper);
94
+ color: var(--rb-color-ink);
95
+ }
96
+
97
+ ::selection {
98
+ background: var(--rb-color-accent);
99
+ color: var(--rb-color-paper);
100
+ }
101
+
102
+ :focus-visible {
103
+ outline: 2px solid var(--rb-color-accent);
104
+ outline-offset: 2px;
105
+ }
106
+ }