@swr-data-lab/components 2.11.1 → 2.12.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.
- package/dist/ChartHeader/ChartHeader.svelte +1 -1
- package/dist/Copy/Copy.svelte +1 -0
- package/dist/DesignTokens/DesignTokens.svelte +24 -7
- package/dist/DesignTokens/Tokens.d.ts +2 -1
- package/dist/DesignTokens/Tokens.js +28 -2
- package/dist/Headline/Headline.svelte +2 -2
- package/dist/Logotype/Logotype.svelte +1 -1
- package/dist/Middot/Middot.svelte +3 -3
- package/dist/Note/Note.svelte +4 -4
- package/dist/Switcher/Switcher.svelte +5 -12
- package/package.json +2 -1
package/dist/Copy/Copy.svelte
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
<script lang="ts">import { shades } from './Tokens';
|
|
1
|
+
<script lang="ts">import { shades, semantics } from './Tokens';
|
|
2
2
|
let { children } = $props();
|
|
3
|
+
const colours = { ...shades, ...semantics };
|
|
3
4
|
const rules = [
|
|
4
|
-
...Object.keys(
|
|
5
|
-
return Object.entries(
|
|
5
|
+
...Object.keys(colours).map((key) => {
|
|
6
|
+
return Object.entries(colours[key])
|
|
6
7
|
.map(([shade, value]) => {
|
|
7
8
|
const [ldb, index] = shade.split(/(\d+)/);
|
|
8
9
|
return ldb === 'base'
|
|
9
10
|
? `--${key}-${ldb}: ${value}`
|
|
10
|
-
: `--${key}-${ldb}
|
|
11
|
+
: `--${key}-${ldb}${index ? `-${index}` : ''}: ${value}`;
|
|
11
12
|
})
|
|
12
13
|
.join(';');
|
|
13
14
|
})
|
|
@@ -33,6 +34,22 @@ const rules = [
|
|
|
33
34
|
--br-large: 8px;
|
|
34
35
|
--br-small: 4px;
|
|
35
36
|
--input-height: 2.5rem;
|
|
37
|
+
--colour-copyPrimary: var(--copyPrimary-light);
|
|
38
|
+
--colour-copySecondary: var(--copySecondary-light);
|
|
39
|
+
--colour-copySecondaryHover: var(--copySecondaryHover-light);
|
|
40
|
+
--colour-logoFill: var(--logoFill-light);
|
|
41
|
+
--colour-surfaceFill: var(--surfaceFill-light);
|
|
42
|
+
}
|
|
43
|
+
@media (prefers-color-scheme: dark) {
|
|
44
|
+
.container {
|
|
45
|
+
--colour-logoFill: var(--logoFill-dark);
|
|
46
|
+
--colour-surfaceFill: var(--surfaceFill-dark);
|
|
47
|
+
--colour-copyPrimary: var(--copyPrimary-dark);
|
|
48
|
+
--colour-copySecondary: var(--copySecondary-dark);
|
|
49
|
+
--colour-copySecondaryHover: var(--copySecondaryHover-dark);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
.container {
|
|
36
53
|
--swr-text: "SWR-VAR-Text", sans-serif;
|
|
37
54
|
--swr-sans: "SWR-VAR-Sans", sans-serif;
|
|
38
55
|
--fs-small-3: 0.75rem;
|
|
@@ -41,10 +58,10 @@ const rules = [
|
|
|
41
58
|
--fs-base: 1.125rem;
|
|
42
59
|
--fs-large-1: 1.25rem;
|
|
43
60
|
--fs-large-2: 1.5rem;
|
|
44
|
-
--fs-large-3:
|
|
61
|
+
--fs-large-3: 2rem;
|
|
45
62
|
--fs-large-4: 2.25rem;
|
|
46
63
|
}
|
|
47
|
-
@media (min-width:
|
|
64
|
+
@media (min-width: 1024px) {
|
|
48
65
|
.container {
|
|
49
66
|
--fs-small-3: 0.75rem;
|
|
50
67
|
--fs-small-2: 0.875rem;
|
|
@@ -52,7 +69,7 @@ const rules = [
|
|
|
52
69
|
--fs-base: 1.25rem;
|
|
53
70
|
--fs-large-1: 1.5rem;
|
|
54
71
|
--fs-large-2: 2rem;
|
|
55
|
-
--fs-large-3:
|
|
72
|
+
--fs-large-3: 3rem;
|
|
56
73
|
--fs-large-4: 3.5rem;
|
|
57
74
|
}
|
|
58
75
|
}</style>
|
|
@@ -8,6 +8,7 @@ interface ColourList {
|
|
|
8
8
|
[index: number]: string;
|
|
9
9
|
}
|
|
10
10
|
declare const shades: ColourMap;
|
|
11
|
+
declare const semantics: ColourMap;
|
|
11
12
|
declare const scales: ColourMap;
|
|
12
13
|
declare const typography: {
|
|
13
14
|
wide: {
|
|
@@ -23,4 +24,4 @@ declare const typography: {
|
|
|
23
24
|
};
|
|
24
25
|
};
|
|
25
26
|
};
|
|
26
|
-
export { shades, scales, typography };
|
|
27
|
+
export { shades, scales, typography, semantics };
|
|
@@ -143,6 +143,32 @@ const shades = {
|
|
|
143
143
|
dark5: '#0d0d0d'
|
|
144
144
|
}
|
|
145
145
|
};
|
|
146
|
+
const semantics = {
|
|
147
|
+
copyPrimary: {
|
|
148
|
+
light: '#0c0c0c',
|
|
149
|
+
dark: '#f8f7f5'
|
|
150
|
+
},
|
|
151
|
+
copySecondary: {
|
|
152
|
+
light: shades.gray.base,
|
|
153
|
+
dark: '#a3a3a3'
|
|
154
|
+
},
|
|
155
|
+
copySecondaryHover: {
|
|
156
|
+
light: shades.gray.dark1,
|
|
157
|
+
dark: '#b4b4b4'
|
|
158
|
+
},
|
|
159
|
+
logoFill: {
|
|
160
|
+
light: shades.gray.light3,
|
|
161
|
+
dark: shades.gray.base
|
|
162
|
+
},
|
|
163
|
+
surfaceFill: {
|
|
164
|
+
dark: '#222325',
|
|
165
|
+
light: '#f1eeeb'
|
|
166
|
+
},
|
|
167
|
+
pageFill: {
|
|
168
|
+
dark: '#0C0C0C',
|
|
169
|
+
light: '#fff'
|
|
170
|
+
}
|
|
171
|
+
};
|
|
146
172
|
const scales = {
|
|
147
173
|
red_blue: [...Object.values(shades.red).reverse(), ...Object.values(shades.blue)],
|
|
148
174
|
red_violet: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
|
|
@@ -167,9 +193,9 @@ const typography = {
|
|
|
167
193
|
'fs-base': '1.25rem',
|
|
168
194
|
'fs-large-1': '1.5rem',
|
|
169
195
|
'fs-large-2': '2rem',
|
|
170
|
-
'fs-large-3': '
|
|
196
|
+
'fs-large-3': '3rem',
|
|
171
197
|
'fs-large-4': '3.5rem'
|
|
172
198
|
}
|
|
173
199
|
}
|
|
174
200
|
};
|
|
175
|
-
export { shades, scales, typography };
|
|
201
|
+
export { shades, scales, typography, semantics };
|
package/dist/Note/Note.svelte
CHANGED
|
@@ -10,10 +10,10 @@ export {};
|
|
|
10
10
|
|
|
11
11
|
<style>.container {
|
|
12
12
|
font-family: var(--swr-sans);
|
|
13
|
-
font-size: var(--fs-small-2);
|
|
13
|
+
font-size: calc(var(--fs-small-2) * 0.9);
|
|
14
14
|
line-height: 1.4;
|
|
15
|
-
letter-spacing: 0.
|
|
16
|
-
color: var(--
|
|
15
|
+
letter-spacing: 0.0015em;
|
|
16
|
+
color: var(--colour-copySecondary);
|
|
17
17
|
}
|
|
18
18
|
.container :global(*) {
|
|
19
19
|
color: inherit;
|
|
@@ -28,5 +28,5 @@ export {};
|
|
|
28
28
|
.container :global(a):hover, .container :global(a):focus-visible,
|
|
29
29
|
.container :global(summary):hover,
|
|
30
30
|
.container :global(summary):focus-visible {
|
|
31
|
-
color: var(--
|
|
31
|
+
color: var(--colour-copySecondaryHover);
|
|
32
32
|
}</style>
|
|
@@ -40,8 +40,9 @@ ul {
|
|
|
40
40
|
overflow: hidden;
|
|
41
41
|
padding: 0;
|
|
42
42
|
margin: 0;
|
|
43
|
-
border: 1px solid
|
|
44
|
-
|
|
43
|
+
border: 1px solid var(--colour-copySecondary);
|
|
44
|
+
color: var(--colour-copyPrimary);
|
|
45
|
+
background: var(--colour-surfaceFill);
|
|
45
46
|
border-radius: var(--br-small);
|
|
46
47
|
}
|
|
47
48
|
@media (min-width: 425px) {
|
|
@@ -85,7 +86,6 @@ label {
|
|
|
85
86
|
position: relative;
|
|
86
87
|
transition: var(--fast);
|
|
87
88
|
text-underline-offset: 0.2em;
|
|
88
|
-
border-bottom: 1px solid currentColor;
|
|
89
89
|
height: 2.25em;
|
|
90
90
|
}
|
|
91
91
|
@media (min-width: 425px) {
|
|
@@ -94,7 +94,6 @@ label {
|
|
|
94
94
|
padding: 0 1em;
|
|
95
95
|
flex-basis: 0;
|
|
96
96
|
flex-grow: 1;
|
|
97
|
-
border-right: 1px solid currentColor;
|
|
98
97
|
border-bottom: 0;
|
|
99
98
|
}
|
|
100
99
|
}
|
|
@@ -107,12 +106,6 @@ label:hover, label:focus-visible {
|
|
|
107
106
|
text-decoration: underline;
|
|
108
107
|
}
|
|
109
108
|
.is-selected label {
|
|
110
|
-
background:
|
|
111
|
-
font-weight:
|
|
112
|
-
box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
|
|
113
|
-
}
|
|
114
|
-
@media (min-width: 425px) {
|
|
115
|
-
.is-selected label {
|
|
116
|
-
box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
|
|
117
|
-
}
|
|
109
|
+
background: var(--colour-copySecondary);
|
|
110
|
+
font-weight: 700;
|
|
118
111
|
}</style>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@swr-data-lab/components",
|
|
3
3
|
"description": "SWR Data Lab component library",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.12.0",
|
|
5
5
|
"author": "SWR Data Lab",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"type": "module",
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"@versatiles/style": "^5.7.0",
|
|
54
54
|
"@vitest/browser": "^3.2.4",
|
|
55
55
|
"@vitest/coverage-v8": "^3.2.4",
|
|
56
|
+
"@vueless/storybook-dark-mode": "^9.0.8",
|
|
56
57
|
"concurrently": "^9.2.1",
|
|
57
58
|
"http-server": "^14.1.1",
|
|
58
59
|
"mdx-mermaid": "^2.0.3",
|