@riebeckite/theme-rerurate 0.0.1 → 0.0.5

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 +167 -167
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/theme-rerurate",
3
- "version": "0.0.1",
3
+ "version": "0.0.5",
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.5"
20
20
  },
21
21
  "publishConfig": {
22
22
  "access": "public"
package/styles/theme.css CHANGED
@@ -1,167 +1,167 @@
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
- --rr-color-paper: #f6efe2;
17
- --rr-color-ink: #171717;
18
- --rr-color-orange: #f66620;
19
- --rr-space-1: 0.5rem;
20
- --rr-space-2: 1rem;
21
- --rr-space-3: 1.5rem;
22
- --rr-space-4: 2rem;
23
- --rr-rule-width: 1px;
24
-
25
- color-scheme: light;
26
- --rb-color-paper: #f6efe2;
27
- --rb-color-surface: #fdf8ee;
28
- --rb-color-surface-hover: #eae0cd;
29
- --rb-color-ink: #171717;
30
- --rb-color-muted: #6e6659;
31
- --rb-color-accent: #f66620;
32
- --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
33
- --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
34
- --rb-color-danger: #b3261e;
35
- --rb-color-success: #3e7c4f;
36
- --rb-color-code-background: color-mix(
37
- in srgb,
38
- var(--rb-color-ink) 8%,
39
- transparent
40
- );
41
- --rb-color-overlay: rgb(0 0 0 / 0.4);
42
- --rb-font-body:
43
- Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
44
- "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
45
- --rb-font-heading: var(--rb-font-body);
46
- --rb-font-mono:
47
- "SFMono-Regular", Consolas, "Liberation Mono", "Noto Sans Mono CJK JP",
48
- monospace;
49
- --rb-space-1: 0.5rem;
50
- --rb-space-2: 1rem;
51
- --rb-space-3: 1.5rem;
52
- --rb-space-4: 2rem;
53
- --rb-space-6: 3rem;
54
- --rb-space-8: 4rem;
55
- --rb-rule-width: 1px;
56
- --rb-layout-page-max: 80rem;
57
- --rb-layout-article-max: 48rem;
58
- --rb-layout-sidebar: 14rem;
59
- --rb-layout-gap: 2rem;
60
- }
61
-
62
- :root[data-theme="dark"] {
63
- color-scheme: dark;
64
- --rb-color-paper: #1c1a17;
65
- --rb-color-surface: #26231f;
66
- --rb-color-surface-hover: #312d28;
67
- --rb-color-ink: #f6efe2;
68
- --rb-color-muted: #a79e8c;
69
- --rb-color-accent: #f66620;
70
- --rb-color-danger: #ff6b61;
71
- --rb-color-success: #74b386;
72
- --rb-color-code-background: color-mix(
73
- in srgb,
74
- var(--rb-color-ink) 12%,
75
- transparent
76
- );
77
- --rb-color-overlay: rgb(0 0 0 / 0.6);
78
- }
79
-
80
- @media (prefers-color-scheme: dark) {
81
- :root:not([data-theme]) {
82
- color-scheme: dark;
83
- --rb-color-paper: #1c1a17;
84
- --rb-color-surface: #26231f;
85
- --rb-color-surface-hover: #312d28;
86
- --rb-color-ink: #f6efe2;
87
- --rb-color-muted: #a79e8c;
88
- --rb-color-accent: #f66620;
89
- --rb-color-danger: #ff6b61;
90
- --rb-color-success: #74b386;
91
- --rb-color-code-background: color-mix(
92
- in srgb,
93
- var(--rb-color-ink) 12%,
94
- transparent
95
- );
96
- --rb-color-overlay: rgb(0 0 0 / 0.6);
97
- }
98
- }
99
-
100
- :root[data-typography="serif"] {
101
- --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
102
- --rb-font-heading:
103
- Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
104
- "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
105
- }
106
-
107
- :root[data-typography="sans"] {
108
- --rb-font-body:
109
- Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
110
- "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
111
- --rb-font-heading: var(--rb-font-body);
112
- }
113
-
114
- html {
115
- background: var(--rb-color-paper);
116
- color: var(--rb-color-ink);
117
- font-family: var(--rb-font-body);
118
- accent-color: var(--rb-color-accent);
119
- caret-color: var(--rb-color-accent);
120
- }
121
-
122
- body {
123
- margin: 0;
124
- background: var(--rb-color-paper);
125
- color: var(--rb-color-ink);
126
- }
127
-
128
- ::selection {
129
- background: var(--rb-color-accent);
130
- color: var(--rr-color-paper, #f6efe2);
131
- }
132
-
133
- :focus-visible {
134
- outline: 2px solid var(--rb-color-accent);
135
- outline-offset: 2px;
136
- }
137
-
138
- :root[data-rerurate-initial="on"]
139
- .rb-article-body
140
- p:first-of-type::first-letter {
141
- float: left;
142
- margin: 0.02em 0.12em 0 0;
143
- color: var(--rb-color-accent);
144
- font-size: 3.2em;
145
- font-weight: 700;
146
- line-height: 0.85;
147
- }
148
-
149
- * {
150
- scrollbar-color: var(--rb-color-muted) transparent;
151
- scrollbar-width: thin;
152
- }
153
-
154
- ::-webkit-scrollbar {
155
- width: 10px;
156
- height: 10px;
157
- }
158
-
159
- ::-webkit-scrollbar-thumb {
160
- background: var(--rb-color-muted);
161
- border: 2px solid var(--rb-color-paper);
162
- }
163
-
164
- ::-webkit-scrollbar-track {
165
- background: transparent;
166
- }
167
- }
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
+ --rr-color-paper: #f6efe2;
17
+ --rr-color-ink: #171717;
18
+ --rr-color-orange: #f66620;
19
+ --rr-space-1: 0.5rem;
20
+ --rr-space-2: 1rem;
21
+ --rr-space-3: 1.5rem;
22
+ --rr-space-4: 2rem;
23
+ --rr-rule-width: 1px;
24
+
25
+ color-scheme: light;
26
+ --rb-color-paper: #f6efe2;
27
+ --rb-color-surface: #fdf8ee;
28
+ --rb-color-surface-hover: #eae0cd;
29
+ --rb-color-ink: #171717;
30
+ --rb-color-muted: #6e6659;
31
+ --rb-color-accent: #f66620;
32
+ --rb-color-border: color-mix(in srgb, currentColor 18%, transparent);
33
+ --rb-color-border-strong: color-mix(in srgb, currentColor 28%, transparent);
34
+ --rb-color-danger: #b3261e;
35
+ --rb-color-success: #3e7c4f;
36
+ --rb-color-code-background: color-mix(
37
+ in srgb,
38
+ var(--rb-color-ink) 8%,
39
+ transparent
40
+ );
41
+ --rb-color-overlay: rgb(0 0 0 / 0.4);
42
+ --rb-font-body:
43
+ Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
44
+ "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
45
+ --rb-font-heading: var(--rb-font-body);
46
+ --rb-font-mono:
47
+ "SFMono-Regular", Consolas, "Liberation Mono", "Noto Sans Mono CJK JP",
48
+ monospace;
49
+ --rb-space-1: 0.5rem;
50
+ --rb-space-2: 1rem;
51
+ --rb-space-3: 1.5rem;
52
+ --rb-space-4: 2rem;
53
+ --rb-space-6: 3rem;
54
+ --rb-space-8: 4rem;
55
+ --rb-rule-width: 1px;
56
+ --rb-layout-page-max: 80rem;
57
+ --rb-layout-article-max: 48rem;
58
+ --rb-layout-sidebar: 14rem;
59
+ --rb-layout-gap: 2rem;
60
+ }
61
+
62
+ :root[data-theme="dark"] {
63
+ color-scheme: dark;
64
+ --rb-color-paper: #1c1a17;
65
+ --rb-color-surface: #26231f;
66
+ --rb-color-surface-hover: #312d28;
67
+ --rb-color-ink: #f6efe2;
68
+ --rb-color-muted: #a79e8c;
69
+ --rb-color-accent: #f66620;
70
+ --rb-color-danger: #ff6b61;
71
+ --rb-color-success: #74b386;
72
+ --rb-color-code-background: color-mix(
73
+ in srgb,
74
+ var(--rb-color-ink) 12%,
75
+ transparent
76
+ );
77
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
78
+ }
79
+
80
+ @media (prefers-color-scheme: dark) {
81
+ :root:not([data-theme]) {
82
+ color-scheme: dark;
83
+ --rb-color-paper: #1c1a17;
84
+ --rb-color-surface: #26231f;
85
+ --rb-color-surface-hover: #312d28;
86
+ --rb-color-ink: #f6efe2;
87
+ --rb-color-muted: #a79e8c;
88
+ --rb-color-accent: #f66620;
89
+ --rb-color-danger: #ff6b61;
90
+ --rb-color-success: #74b386;
91
+ --rb-color-code-background: color-mix(
92
+ in srgb,
93
+ var(--rb-color-ink) 12%,
94
+ transparent
95
+ );
96
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
97
+ }
98
+ }
99
+
100
+ :root[data-typography="serif"] {
101
+ --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
102
+ --rb-font-heading:
103
+ Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
104
+ "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
105
+ }
106
+
107
+ :root[data-typography="sans"] {
108
+ --rb-font-body:
109
+ Futura, "Futura PT", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans",
110
+ "Noto Sans JP", "Yu Gothic", system-ui, sans-serif;
111
+ --rb-font-heading: var(--rb-font-body);
112
+ }
113
+
114
+ html {
115
+ background: var(--rb-color-paper);
116
+ color: var(--rb-color-ink);
117
+ font-family: var(--rb-font-body);
118
+ accent-color: var(--rb-color-accent);
119
+ caret-color: var(--rb-color-accent);
120
+ }
121
+
122
+ body {
123
+ margin: 0;
124
+ background: var(--rb-color-paper);
125
+ color: var(--rb-color-ink);
126
+ }
127
+
128
+ ::selection {
129
+ background: var(--rb-color-accent);
130
+ color: var(--rr-color-paper, #f6efe2);
131
+ }
132
+
133
+ :focus-visible {
134
+ outline: 2px solid var(--rb-color-accent);
135
+ outline-offset: 2px;
136
+ }
137
+
138
+ :root[data-rerurate-initial="on"]
139
+ .rb-article-body
140
+ p:first-of-type::first-letter {
141
+ float: left;
142
+ margin: 0.02em 0.12em 0 0;
143
+ color: var(--rb-color-accent);
144
+ font-size: 3.2em;
145
+ font-weight: 700;
146
+ line-height: 0.85;
147
+ }
148
+
149
+ * {
150
+ scrollbar-color: var(--rb-color-muted) transparent;
151
+ scrollbar-width: thin;
152
+ }
153
+
154
+ ::-webkit-scrollbar {
155
+ width: 10px;
156
+ height: 10px;
157
+ }
158
+
159
+ ::-webkit-scrollbar-thumb {
160
+ background: var(--rb-color-muted);
161
+ border: 2px solid var(--rb-color-paper);
162
+ }
163
+
164
+ ::-webkit-scrollbar-track {
165
+ background: transparent;
166
+ }
167
+ }