@riebeckite/theme-gruvbox 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 +182 -182
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@riebeckite/theme-gruvbox",
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,182 +1,182 @@
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: #fbf1c7;
18
- --rb-color-surface: #fff4d6;
19
- --rb-color-surface-hover: #f2e5b0;
20
- --rb-color-ink: #282828;
21
- --rb-color-muted: #928374;
22
- --rb-color-accent: #d65d0e;
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: #9d0006;
26
- --rb-color-success: #79740e;
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-gruvbox-contrast="soft"] {
52
- --rb-color-paper: #f2e5bc;
53
- --rb-color-surface: #f7ecd0;
54
- --rb-color-surface-hover: #e8dba8;
55
- }
56
-
57
- :root[data-gruvbox-contrast="hard"] {
58
- --rb-color-paper: #f9f5d7;
59
- --rb-color-surface: #fffbe3;
60
- --rb-color-surface-hover: #efe7bf;
61
- }
62
-
63
- :root[data-theme="dark"] {
64
- color-scheme: dark;
65
- --rb-color-paper: #282828;
66
- --rb-color-surface: #313131;
67
- --rb-color-surface-hover: #3a3a3a;
68
- --rb-color-ink: #ebdbb2;
69
- --rb-color-muted: #928374;
70
- --rb-color-accent: #fe8019;
71
- --rb-color-danger: #fb4934;
72
- --rb-color-success: #b8bb26;
73
- --rb-color-code-background: color-mix(
74
- in srgb,
75
- var(--rb-color-ink) 12%,
76
- transparent
77
- );
78
- --rb-color-overlay: rgb(0 0 0 / 0.6);
79
- }
80
-
81
- :root[data-theme="dark"][data-gruvbox-contrast="soft"] {
82
- --rb-color-paper: #32302f;
83
- --rb-color-surface: #3a3837;
84
- --rb-color-surface-hover: #444140;
85
- }
86
-
87
- :root[data-theme="dark"][data-gruvbox-contrast="hard"] {
88
- --rb-color-paper: #1d2021;
89
- --rb-color-surface: #262a2b;
90
- --rb-color-surface-hover: #303536;
91
- }
92
-
93
- @media (prefers-color-scheme: dark) {
94
- :root:not([data-theme]) {
95
- color-scheme: dark;
96
- --rb-color-paper: #282828;
97
- --rb-color-surface: #313131;
98
- --rb-color-surface-hover: #3a3a3a;
99
- --rb-color-ink: #ebdbb2;
100
- --rb-color-muted: #928374;
101
- --rb-color-accent: #fe8019;
102
- --rb-color-danger: #fb4934;
103
- --rb-color-success: #b8bb26;
104
- --rb-color-code-background: color-mix(
105
- in srgb,
106
- var(--rb-color-ink) 12%,
107
- transparent
108
- );
109
- --rb-color-overlay: rgb(0 0 0 / 0.6);
110
- }
111
-
112
- :root:not([data-theme])[data-gruvbox-contrast="soft"] {
113
- --rb-color-paper: #32302f;
114
- --rb-color-surface: #3a3837;
115
- --rb-color-surface-hover: #444140;
116
- }
117
-
118
- :root:not([data-theme])[data-gruvbox-contrast="hard"] {
119
- --rb-color-paper: #1d2021;
120
- --rb-color-surface: #262a2b;
121
- --rb-color-surface-hover: #303536;
122
- }
123
- }
124
-
125
- :root[data-typography="serif"] {
126
- --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
127
- --rb-font-heading:
128
- ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
129
- sans-serif;
130
- }
131
-
132
- :root[data-typography="sans"] {
133
- --rb-font-body:
134
- ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
135
- sans-serif;
136
- --rb-font-heading: var(--rb-font-body);
137
- }
138
-
139
- html {
140
- background: var(--rb-color-paper);
141
- color: var(--rb-color-ink);
142
- font-family: var(--rb-font-body);
143
- accent-color: var(--rb-color-accent);
144
- caret-color: var(--rb-color-accent);
145
- }
146
-
147
- body {
148
- margin: 0;
149
- background: var(--rb-color-paper);
150
- color: var(--rb-color-ink);
151
- }
152
-
153
- ::selection {
154
- background: var(--rb-color-accent);
155
- color: var(--rb-color-paper);
156
- }
157
-
158
- :focus-visible {
159
- outline: 2px solid var(--rb-color-accent);
160
- outline-offset: 2px;
161
- }
162
-
163
- * {
164
- scrollbar-color: var(--rb-color-muted) transparent;
165
- scrollbar-width: thin;
166
- }
167
-
168
- ::-webkit-scrollbar {
169
- width: 10px;
170
- height: 10px;
171
- }
172
-
173
- ::-webkit-scrollbar-thumb {
174
- background: var(--rb-color-muted);
175
- border-radius: 10px;
176
- border: 2px solid var(--rb-color-paper);
177
- }
178
-
179
- ::-webkit-scrollbar-track {
180
- background: transparent;
181
- }
182
- }
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: #fbf1c7;
18
+ --rb-color-surface: #fff4d6;
19
+ --rb-color-surface-hover: #f2e5b0;
20
+ --rb-color-ink: #282828;
21
+ --rb-color-muted: #928374;
22
+ --rb-color-accent: #d65d0e;
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: #9d0006;
26
+ --rb-color-success: #79740e;
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-gruvbox-contrast="soft"] {
52
+ --rb-color-paper: #f2e5bc;
53
+ --rb-color-surface: #f7ecd0;
54
+ --rb-color-surface-hover: #e8dba8;
55
+ }
56
+
57
+ :root[data-gruvbox-contrast="hard"] {
58
+ --rb-color-paper: #f9f5d7;
59
+ --rb-color-surface: #fffbe3;
60
+ --rb-color-surface-hover: #efe7bf;
61
+ }
62
+
63
+ :root[data-theme="dark"] {
64
+ color-scheme: dark;
65
+ --rb-color-paper: #282828;
66
+ --rb-color-surface: #313131;
67
+ --rb-color-surface-hover: #3a3a3a;
68
+ --rb-color-ink: #ebdbb2;
69
+ --rb-color-muted: #928374;
70
+ --rb-color-accent: #fe8019;
71
+ --rb-color-danger: #fb4934;
72
+ --rb-color-success: #b8bb26;
73
+ --rb-color-code-background: color-mix(
74
+ in srgb,
75
+ var(--rb-color-ink) 12%,
76
+ transparent
77
+ );
78
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
79
+ }
80
+
81
+ :root[data-theme="dark"][data-gruvbox-contrast="soft"] {
82
+ --rb-color-paper: #32302f;
83
+ --rb-color-surface: #3a3837;
84
+ --rb-color-surface-hover: #444140;
85
+ }
86
+
87
+ :root[data-theme="dark"][data-gruvbox-contrast="hard"] {
88
+ --rb-color-paper: #1d2021;
89
+ --rb-color-surface: #262a2b;
90
+ --rb-color-surface-hover: #303536;
91
+ }
92
+
93
+ @media (prefers-color-scheme: dark) {
94
+ :root:not([data-theme]) {
95
+ color-scheme: dark;
96
+ --rb-color-paper: #282828;
97
+ --rb-color-surface: #313131;
98
+ --rb-color-surface-hover: #3a3a3a;
99
+ --rb-color-ink: #ebdbb2;
100
+ --rb-color-muted: #928374;
101
+ --rb-color-accent: #fe8019;
102
+ --rb-color-danger: #fb4934;
103
+ --rb-color-success: #b8bb26;
104
+ --rb-color-code-background: color-mix(
105
+ in srgb,
106
+ var(--rb-color-ink) 12%,
107
+ transparent
108
+ );
109
+ --rb-color-overlay: rgb(0 0 0 / 0.6);
110
+ }
111
+
112
+ :root:not([data-theme])[data-gruvbox-contrast="soft"] {
113
+ --rb-color-paper: #32302f;
114
+ --rb-color-surface: #3a3837;
115
+ --rb-color-surface-hover: #444140;
116
+ }
117
+
118
+ :root:not([data-theme])[data-gruvbox-contrast="hard"] {
119
+ --rb-color-paper: #1d2021;
120
+ --rb-color-surface: #262a2b;
121
+ --rb-color-surface-hover: #303536;
122
+ }
123
+ }
124
+
125
+ :root[data-typography="serif"] {
126
+ --rb-font-body: Georgia, Cambria, "Times New Roman", Times, serif;
127
+ --rb-font-heading:
128
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
129
+ sans-serif;
130
+ }
131
+
132
+ :root[data-typography="sans"] {
133
+ --rb-font-body:
134
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
135
+ sans-serif;
136
+ --rb-font-heading: var(--rb-font-body);
137
+ }
138
+
139
+ html {
140
+ background: var(--rb-color-paper);
141
+ color: var(--rb-color-ink);
142
+ font-family: var(--rb-font-body);
143
+ accent-color: var(--rb-color-accent);
144
+ caret-color: var(--rb-color-accent);
145
+ }
146
+
147
+ body {
148
+ margin: 0;
149
+ background: var(--rb-color-paper);
150
+ color: var(--rb-color-ink);
151
+ }
152
+
153
+ ::selection {
154
+ background: var(--rb-color-accent);
155
+ color: var(--rb-color-paper);
156
+ }
157
+
158
+ :focus-visible {
159
+ outline: 2px solid var(--rb-color-accent);
160
+ outline-offset: 2px;
161
+ }
162
+
163
+ * {
164
+ scrollbar-color: var(--rb-color-muted) transparent;
165
+ scrollbar-width: thin;
166
+ }
167
+
168
+ ::-webkit-scrollbar {
169
+ width: 10px;
170
+ height: 10px;
171
+ }
172
+
173
+ ::-webkit-scrollbar-thumb {
174
+ background: var(--rb-color-muted);
175
+ border-radius: 10px;
176
+ border: 2px solid var(--rb-color-paper);
177
+ }
178
+
179
+ ::-webkit-scrollbar-track {
180
+ background: transparent;
181
+ }
182
+ }