@xaroth.nl/design 0.1.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.
Files changed (4) hide show
  1. package/dist/themes/eve-online.css +8 -8
  2. package/dist/themes/xaroth.css +18 -30
  3. package/dist/themes.css +26 -38
  4. package/package.json +9 -9
package/dist/themes/eve-online.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
- @import '@fontsource-variable/oxanium/index.css';
3
- @import '@fontsource-variable/ibm-plex-sans/index.css';
4
- @import '@fontsource-variable/jetbrains-mono/index.css';
2
+ @import '@fontsource-variable/saira/index.css';
3
+ @import '@fontsource-variable/sofia-sans/index.css';
4
+ @import '@fontsource-variable/azeret-mono/index.css';
5
5
  @layer x.reset, x.core, x.theme, x.utility;
6
6
  @layer x.reset {
7
7
  *,
@@ -190,11 +190,11 @@
190
190
  @layer x.theme {
191
191
  :where(:root:not([data-x-theme])),
192
192
  [data-x-theme=eve-online] {
193
- --x-font-display: 'Oxanium Variable', 'Oxanium', system-ui, sans-serif;
193
+ --x-font-display: 'Saira Variable', 'Saira', system-ui, sans-serif;
194
194
  --x-font-heading: var(--x-font-display);
195
- --x-font-body: 'IBM Plex Sans Variable', 'IBM Plex Sans', system-ui, sans-serif;
195
+ --x-font-body: 'Sofia Sans Variable', 'Sofia Sans', system-ui, sans-serif;
196
196
  --x-font-ui: var(--x-font-display);
197
- --x-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
197
+ --x-font-mono: 'Azeret Mono Variable', 'Azeret Mono', ui-monospace, monospace;
198
198
  --x-track-display: 0.01em;
199
199
  --x-track-heading: 0.01em;
200
200
  --x-track-label: 0.16em;
@@ -497,7 +497,7 @@
497
497
  --x-description-list-value-font: var(--x-font-mono);
498
498
  --x-description-list-value-fs: var(--x-fs-small);
499
499
  }
500
- :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list a {
500
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list a:not([class]) {
501
501
  color: var(--x-color-accent);
502
502
  }
503
503
  :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list--columns {
@@ -914,7 +914,7 @@
914
914
  :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose > :is(h2, h3, h4) {
915
915
  color: var(--x-color-text);
916
916
  }
917
- :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(a) {
917
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(a:not([class])) {
918
918
  color: var(--x-color-accent);
919
919
  }
920
920
  :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(em) {
package/dist/themes/xaroth.css CHANGED
@@ -1,26 +1,13 @@
1
- @import '@fontsource-variable/cinzel/index.css';
2
- @import '@fontsource/spectral/400.css';
3
- @import '@fontsource/spectral/400-italic.css';
4
- @import '@fontsource/spectral/600.css';
5
- @import '@fontsource/ibm-plex-mono/400.css';
6
- @import '@fontsource-variable/manrope/index.css';
1
+ @import '@fontsource/alegreya-sc/400.css';
2
+ @import '@fontsource/alegreya-sc/500.css';
3
+ @import '@fontsource/alegreya-sc/700.css';
4
+ @import '@fontsource-variable/alegreya/wght.css';
5
+ @import '@fontsource-variable/alegreya/wght-italic.css';
6
+ @import '@fontsource/alegreya-sans/400.css';
7
+ @import '@fontsource/alegreya-sans/500.css';
8
+ @import '@fontsource/alegreya-sans/700.css';
9
+ @import '@fontsource-variable/red-hat-mono/index.css';
7
10
  @layer x.reset, x.core, x.theme, x.utility;
8
- @font-face {
9
- font-family: "xaroth numerals";
10
- font-style: normal;
11
- font-weight: 400;
12
- font-display: swap;
13
- src: url("@fontsource/spectral/files/spectral-latin-400-normal.woff2") format("woff2");
14
- unicode-range: U+0030-0039;
15
- }
16
- @font-face {
17
- font-family: "xaroth numerals";
18
- font-style: normal;
19
- font-weight: 600;
20
- font-display: swap;
21
- src: url("@fontsource/spectral/files/spectral-latin-600-normal.woff2") format("woff2");
22
- unicode-range: U+0030-0039;
23
- }
24
11
  @layer x.reset {
25
12
  *,
26
13
  *::before,
@@ -208,11 +195,11 @@
208
195
  @layer x.theme {
209
196
  :where(:root:not([data-x-theme])),
210
197
  [data-x-theme=xaroth] {
211
- --x-font-display: 'xaroth numerals', 'Cinzel Variable', 'Cinzel', 'Times New Roman', serif;
198
+ --x-font-display: 'Alegreya SC', 'Times New Roman', serif;
212
199
  --x-font-heading: var(--x-font-display);
213
- --x-font-body: 'Spectral', Georgia, serif;
214
- --x-font-ui: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
215
- --x-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
200
+ --x-font-body: 'Alegreya Variable', 'Alegreya', Georgia, serif;
201
+ --x-font-ui: 'Alegreya Sans', system-ui, sans-serif;
202
+ --x-font-mono: 'Red Hat Mono Variable', 'Red Hat Mono', ui-monospace, monospace;
216
203
  --x-fs-body: 1.125rem;
217
204
  --x-track-display: 0.06em;
218
205
  --x-track-heading: 0.02em;
@@ -529,7 +516,7 @@
529
516
  --x-description-list-term-width: 6rem;
530
517
  --x-description-list-line: var(--x-color-line-strong);
531
518
  }
532
- :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list a {
519
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list a:not([class]) {
533
520
  color: var(--x-color-accent-strong);
534
521
  }
535
522
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list--columns .x-description-list__item {
@@ -899,7 +886,7 @@
899
886
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__summary {
900
887
  font-family: var(--x-font-ui);
901
888
  font-weight: 600;
902
- font-variant-numeric: tabular-nums;
889
+ font-variant-numeric: lining-nums tabular-nums;
903
890
  }
904
891
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link:where(a):not([aria-current=page]):hover {
905
892
  color: var(--x-color-sand);
@@ -1024,11 +1011,11 @@
1024
1011
  font-weight: 600;
1025
1012
  letter-spacing: 0;
1026
1013
  }
1027
- :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a) {
1014
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a:not([class])) {
1028
1015
  color: var(--x-color-accent-strong);
1029
1016
  text-decoration-color: var(--x-color-bronze);
1030
1017
  }
1031
- :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a):hover {
1018
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a:not([class])):hover {
1032
1019
  color: var(--x-color-sand);
1033
1020
  text-decoration-color: var(--x-color-accent);
1034
1021
  }
@@ -1144,6 +1131,7 @@
1144
1131
  font-family: var(--x-font-body);
1145
1132
  font-size: var(--x-fs-h2);
1146
1133
  font-weight: 400;
1134
+ font-variant-numeric: lining-nums;
1147
1135
  }
1148
1136
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat__label {
1149
1137
  font-family: var(--x-font-display);
package/dist/themes.css CHANGED
@@ -1,30 +1,17 @@
1
1
  @charset "UTF-8";
2
- @import '@fontsource-variable/cinzel/index.css';
3
- @import '@fontsource/spectral/400.css';
4
- @import '@fontsource/spectral/400-italic.css';
5
- @import '@fontsource/spectral/600.css';
6
- @import '@fontsource/ibm-plex-mono/400.css';
7
- @import '@fontsource-variable/manrope/index.css';
8
- @import '@fontsource-variable/oxanium/index.css';
9
- @import '@fontsource-variable/ibm-plex-sans/index.css';
10
- @import '@fontsource-variable/jetbrains-mono/index.css';
2
+ @import '@fontsource/alegreya-sc/400.css';
3
+ @import '@fontsource/alegreya-sc/500.css';
4
+ @import '@fontsource/alegreya-sc/700.css';
5
+ @import '@fontsource-variable/alegreya/wght.css';
6
+ @import '@fontsource-variable/alegreya/wght-italic.css';
7
+ @import '@fontsource/alegreya-sans/400.css';
8
+ @import '@fontsource/alegreya-sans/500.css';
9
+ @import '@fontsource/alegreya-sans/700.css';
10
+ @import '@fontsource-variable/red-hat-mono/index.css';
11
+ @import '@fontsource-variable/saira/index.css';
12
+ @import '@fontsource-variable/sofia-sans/index.css';
13
+ @import '@fontsource-variable/azeret-mono/index.css';
11
14
  @layer x.reset, x.core, x.theme, x.utility;
12
- @font-face {
13
- font-family: "xaroth numerals";
14
- font-style: normal;
15
- font-weight: 400;
16
- font-display: swap;
17
- src: url("@fontsource/spectral/files/spectral-latin-400-normal.woff2") format("woff2");
18
- unicode-range: U+0030-0039;
19
- }
20
- @font-face {
21
- font-family: "xaroth numerals";
22
- font-style: normal;
23
- font-weight: 600;
24
- font-display: swap;
25
- src: url("@fontsource/spectral/files/spectral-latin-600-normal.woff2") format("woff2");
26
- unicode-range: U+0030-0039;
27
- }
28
15
  @layer x.reset {
29
16
  *,
30
17
  *::before,
@@ -212,11 +199,11 @@
212
199
  @layer x.theme {
213
200
  :where(:root:not([data-x-theme])),
214
201
  [data-x-theme=xaroth] {
215
- --x-font-display: 'xaroth numerals', 'Cinzel Variable', 'Cinzel', 'Times New Roman', serif;
202
+ --x-font-display: 'Alegreya SC', 'Times New Roman', serif;
216
203
  --x-font-heading: var(--x-font-display);
217
- --x-font-body: 'Spectral', Georgia, serif;
218
- --x-font-ui: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
219
- --x-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
204
+ --x-font-body: 'Alegreya Variable', 'Alegreya', Georgia, serif;
205
+ --x-font-ui: 'Alegreya Sans', system-ui, sans-serif;
206
+ --x-font-mono: 'Red Hat Mono Variable', 'Red Hat Mono', ui-monospace, monospace;
220
207
  --x-fs-body: 1.125rem;
221
208
  --x-track-display: 0.06em;
222
209
  --x-track-heading: 0.02em;
@@ -533,7 +520,7 @@
533
520
  --x-description-list-term-width: 6rem;
534
521
  --x-description-list-line: var(--x-color-line-strong);
535
522
  }
536
- :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list a {
523
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list a:not([class]) {
537
524
  color: var(--x-color-accent-strong);
538
525
  }
539
526
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-description-list--columns .x-description-list__item {
@@ -903,7 +890,7 @@
903
890
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__summary {
904
891
  font-family: var(--x-font-ui);
905
892
  font-weight: 600;
906
- font-variant-numeric: tabular-nums;
893
+ font-variant-numeric: lining-nums tabular-nums;
907
894
  }
908
895
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-pagination__link:where(a):not([aria-current=page]):hover {
909
896
  color: var(--x-color-sand);
@@ -1028,11 +1015,11 @@
1028
1015
  font-weight: 600;
1029
1016
  letter-spacing: 0;
1030
1017
  }
1031
- :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a) {
1018
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a:not([class])) {
1032
1019
  color: var(--x-color-accent-strong);
1033
1020
  text-decoration-color: var(--x-color-bronze);
1034
1021
  }
1035
- :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a):hover {
1022
+ :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-prose :where(a:not([class])):hover {
1036
1023
  color: var(--x-color-sand);
1037
1024
  text-decoration-color: var(--x-color-accent);
1038
1025
  }
@@ -1148,6 +1135,7 @@
1148
1135
  font-family: var(--x-font-body);
1149
1136
  font-size: var(--x-fs-h2);
1150
1137
  font-weight: 400;
1138
+ font-variant-numeric: lining-nums;
1151
1139
  }
1152
1140
  :where(:root:not([data-x-theme]), [data-x-theme=xaroth]) .x-stat__label {
1153
1141
  font-family: var(--x-font-display);
@@ -2164,11 +2152,11 @@
2164
2152
  @layer x.theme {
2165
2153
  :where(:root:not([data-x-theme])),
2166
2154
  [data-x-theme=eve-online] {
2167
- --x-font-display: 'Oxanium Variable', 'Oxanium', system-ui, sans-serif;
2155
+ --x-font-display: 'Saira Variable', 'Saira', system-ui, sans-serif;
2168
2156
  --x-font-heading: var(--x-font-display);
2169
- --x-font-body: 'IBM Plex Sans Variable', 'IBM Plex Sans', system-ui, sans-serif;
2157
+ --x-font-body: 'Sofia Sans Variable', 'Sofia Sans', system-ui, sans-serif;
2170
2158
  --x-font-ui: var(--x-font-display);
2171
- --x-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
2159
+ --x-font-mono: 'Azeret Mono Variable', 'Azeret Mono', ui-monospace, monospace;
2172
2160
  --x-track-display: 0.01em;
2173
2161
  --x-track-heading: 0.01em;
2174
2162
  --x-track-label: 0.16em;
@@ -2471,7 +2459,7 @@
2471
2459
  --x-description-list-value-font: var(--x-font-mono);
2472
2460
  --x-description-list-value-fs: var(--x-fs-small);
2473
2461
  }
2474
- :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list a {
2462
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list a:not([class]) {
2475
2463
  color: var(--x-color-accent);
2476
2464
  }
2477
2465
  :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-description-list--columns {
@@ -2888,7 +2876,7 @@
2888
2876
  :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose > :is(h2, h3, h4) {
2889
2877
  color: var(--x-color-text);
2890
2878
  }
2891
- :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(a) {
2879
+ :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(a:not([class])) {
2892
2880
  color: var(--x-color-accent);
2893
2881
  }
2894
2882
  :where(:root:not([data-x-theme]), [data-x-theme=eve-online]) .x-prose :where(em) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xaroth.nl/design",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Shared design system for xaroth.nl and eve-online.tools: CSS core, themes, Astro and React parts.",
5
5
  "license": "MIT",
6
6
  "author": "Xaroth Brook <xaroth+github@xaroth.nl>",
@@ -43,13 +43,13 @@
43
43
  "directory": "packages/design"
44
44
  },
45
45
  "dependencies": {
46
- "@fontsource-variable/cinzel": "^5.3.0",
47
- "@fontsource-variable/ibm-plex-sans": "^5.3.0",
48
- "@fontsource-variable/jetbrains-mono": "^5.3.0",
49
- "@fontsource-variable/manrope": "^5.3.0",
50
- "@fontsource-variable/oxanium": "^5.3.0",
51
- "@fontsource/ibm-plex-mono": "^5.3.0",
52
- "@fontsource/spectral": "^5.3.0",
46
+ "@fontsource-variable/alegreya": "^5.3.0",
47
+ "@fontsource-variable/azeret-mono": "^5.3.0",
48
+ "@fontsource-variable/red-hat-mono": "^5.3.0",
49
+ "@fontsource-variable/saira": "^5.3.0",
50
+ "@fontsource-variable/sofia-sans": "^5.3.0",
51
+ "@fontsource/alegreya-sans": "^5.3.0",
52
+ "@fontsource/alegreya-sc": "^5.3.0",
53
53
  "clsx": "^2.1.1"
54
54
  },
55
55
  "peerDependencies": {
@@ -68,7 +68,7 @@
68
68
  "@types/node": "^24.12.0",
69
69
  "@types/react": "^19",
70
70
  "astro": "^7.3.5",
71
- "react": "19.2.4",
71
+ "react": "19.3.0",
72
72
  "sass": "^1.105.0",
73
73
  "typescript": "6.0.2"
74
74
  },