@riebeckite/theme-sakura 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 +139 -139
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/theme-sakura",
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,139 +1,139 @@
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: #fff8fa;
18
- --rb-color-surface: #ffffff;
19
- --rb-color-surface-hover: #fdf0f5;
20
- --rb-color-ink: #4a2a3a;
21
- --rb-color-muted: #9a7a88;
22
- --rb-color-accent: #e8789f;
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: #0f7b5f;
27
- --rb-color-code-background: color-mix(
28
- in srgb,
29
- var(--rb-color-ink) 8%,
30
- transparent
31
- );
32
- --rb-color-overlay: rgb(0 0 0 / 0.4);
33
- --rb-font-body:
34
- ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
35
- sans-serif;
36
- --rb-font-heading: var(--rb-font-body);
37
- --rb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
38
- --rb-space-1: 0.5rem;
39
- --rb-space-2: 1rem;
40
- --rb-space-3: 1.5rem;
41
- --rb-space-4: 2rem;
42
- --rb-space-6: 3rem;
43
- --rb-space-8: 4rem;
44
- --rb-rule-width: 1px;
45
- --rb-layout-page-max: 80rem;
46
- --rb-layout-article-max: 48rem;
47
- --rb-layout-sidebar: 14rem;
48
- --rb-layout-gap: 2rem;
49
- }
50
-
51
- :root[data-sakura-bloom="vivid"] {
52
- --rb-color-accent: #d8558a;
53
- --rb-color-surface-hover: #fbdce9;
54
- }
55
-
56
- :root[data-theme="dark"] {
57
- color-scheme: dark;
58
- --rb-color-paper: #241520;
59
- --rb-color-surface: #2b1a26;
60
- --rb-color-surface-hover: #382330;
61
- --rb-color-ink: #f9e4ec;
62
- --rb-color-muted: #c9a7b6;
63
- --rb-color-accent: #f4a3c2;
64
- --rb-color-danger: #ff6369;
65
- --rb-color-success: #4ccc9a;
66
- --rb-color-code-background: color-mix(
67
- in srgb,
68
- var(--rb-color-ink) 12%,
69
- transparent
70
- );
71
- --rb-color-overlay: rgb(0 0 0 / 0.6);
72
- }
73
-
74
- :root[data-theme="dark"][data-sakura-bloom="vivid"] {
75
- --rb-color-accent: #f08aae;
76
- --rb-color-surface-hover: #42232f;
77
- }
78
-
79
- @media (prefers-color-scheme: dark) {
80
- :root:not([data-theme]) {
81
- color-scheme: dark;
82
- --rb-color-paper: #241520;
83
- --rb-color-surface: #2b1a26;
84
- --rb-color-surface-hover: #382330;
85
- --rb-color-ink: #f9e4ec;
86
- --rb-color-muted: #c9a7b6;
87
- --rb-color-accent: #f4a3c2;
88
- --rb-color-danger: #ff6369;
89
- --rb-color-success: #4ccc9a;
90
- --rb-color-code-background: color-mix(
91
- in srgb,
92
- var(--rb-color-ink) 12%,
93
- transparent
94
- );
95
- --rb-color-overlay: rgb(0 0 0 / 0.6);
96
- }
97
-
98
- :root:not([data-theme])[data-sakura-bloom="vivid"] {
99
- --rb-color-accent: #f08aae;
100
- --rb-color-surface-hover: #42232f;
101
- }
102
- }
103
-
104
- :root[data-typography="serif"] {
105
- --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
106
- --rb-font-heading:
107
- ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
108
- sans-serif;
109
- }
110
-
111
- :root[data-typography="sans"] {
112
- --rb-font-body:
113
- ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
114
- sans-serif;
115
- --rb-font-heading: var(--rb-font-body);
116
- }
117
-
118
- html {
119
- background: var(--rb-color-paper);
120
- color: var(--rb-color-ink);
121
- font-family: var(--rb-font-body);
122
- }
123
-
124
- body {
125
- margin: 0;
126
- background: var(--rb-color-paper);
127
- color: var(--rb-color-ink);
128
- }
129
-
130
- ::selection {
131
- background: var(--rb-color-accent);
132
- color: var(--rb-color-paper);
133
- }
134
-
135
- :focus-visible {
136
- outline: 2px solid var(--rb-color-accent);
137
- outline-offset: 2px;
138
- }
139
- }
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: #fff8fa;
18
+ --rb-color-surface: #ffffff;
19
+ --rb-color-surface-hover: #fdf0f5;
20
+ --rb-color-ink: #4a2a3a;
21
+ --rb-color-muted: #9a7a88;
22
+ --rb-color-accent: #e8789f;
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: #0f7b5f;
27
+ --rb-color-code-background: color-mix(
28
+ in srgb,
29
+ var(--rb-color-ink) 8%,
30
+ transparent
31
+ );
32
+ --rb-color-overlay: rgb(0 0 0 / 0.4);
33
+ --rb-font-body:
34
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
35
+ sans-serif;
36
+ --rb-font-heading: var(--rb-font-body);
37
+ --rb-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
38
+ --rb-space-1: 0.5rem;
39
+ --rb-space-2: 1rem;
40
+ --rb-space-3: 1.5rem;
41
+ --rb-space-4: 2rem;
42
+ --rb-space-6: 3rem;
43
+ --rb-space-8: 4rem;
44
+ --rb-rule-width: 1px;
45
+ --rb-layout-page-max: 80rem;
46
+ --rb-layout-article-max: 48rem;
47
+ --rb-layout-sidebar: 14rem;
48
+ --rb-layout-gap: 2rem;
49
+ }
50
+
51
+ :root[data-sakura-bloom="vivid"] {
52
+ --rb-color-accent: #d8558a;
53
+ --rb-color-surface-hover: #fbdce9;
54
+ }
55
+
56
+ :root[data-theme="dark"] {
57
+ color-scheme: dark;
58
+ --rb-color-paper: #241520;
59
+ --rb-color-surface: #2b1a26;
60
+ --rb-color-surface-hover: #382330;
61
+ --rb-color-ink: #f9e4ec;
62
+ --rb-color-muted: #c9a7b6;
63
+ --rb-color-accent: #f4a3c2;
64
+ --rb-color-danger: #ff6369;
65
+ --rb-color-success: #4ccc9a;
66
+ --rb-color-code-background: color-mix(
67
+ in srgb,
68
+ var(--rb-color-ink) 12%,
69
+ transparent
70
+ );
71
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
72
+ }
73
+
74
+ :root[data-theme="dark"][data-sakura-bloom="vivid"] {
75
+ --rb-color-accent: #f08aae;
76
+ --rb-color-surface-hover: #42232f;
77
+ }
78
+
79
+ @media (prefers-color-scheme: dark) {
80
+ :root:not([data-theme]) {
81
+ color-scheme: dark;
82
+ --rb-color-paper: #241520;
83
+ --rb-color-surface: #2b1a26;
84
+ --rb-color-surface-hover: #382330;
85
+ --rb-color-ink: #f9e4ec;
86
+ --rb-color-muted: #c9a7b6;
87
+ --rb-color-accent: #f4a3c2;
88
+ --rb-color-danger: #ff6369;
89
+ --rb-color-success: #4ccc9a;
90
+ --rb-color-code-background: color-mix(
91
+ in srgb,
92
+ var(--rb-color-ink) 12%,
93
+ transparent
94
+ );
95
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
96
+ }
97
+
98
+ :root:not([data-theme])[data-sakura-bloom="vivid"] {
99
+ --rb-color-accent: #f08aae;
100
+ --rb-color-surface-hover: #42232f;
101
+ }
102
+ }
103
+
104
+ :root[data-typography="serif"] {
105
+ --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
106
+ --rb-font-heading:
107
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
108
+ sans-serif;
109
+ }
110
+
111
+ :root[data-typography="sans"] {
112
+ --rb-font-body:
113
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
114
+ sans-serif;
115
+ --rb-font-heading: var(--rb-font-body);
116
+ }
117
+
118
+ html {
119
+ background: var(--rb-color-paper);
120
+ color: var(--rb-color-ink);
121
+ font-family: var(--rb-font-body);
122
+ }
123
+
124
+ body {
125
+ margin: 0;
126
+ background: var(--rb-color-paper);
127
+ color: var(--rb-color-ink);
128
+ }
129
+
130
+ ::selection {
131
+ background: var(--rb-color-accent);
132
+ color: var(--rb-color-paper);
133
+ }
134
+
135
+ :focus-visible {
136
+ outline: 2px solid var(--rb-color-accent);
137
+ outline-offset: 2px;
138
+ }
139
+ }