Skip to content

Commit c7b1e02

Browse files
thokra-navthokra-nav
authored
Initial darkside support (#191)
* Initial darkside support * Preview darkside
1 parent 7b1503d commit c7b1e02

File tree

17 files changed

+203
-97
lines changed

17 files changed

+203
-97
lines changed

‎.changeset/curvy-actors-divide.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@nais/ds-svelte-community": patch
3+
---
4+
5+
Preview darkside

‎packages/ds-svelte-community/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ vite.config.ts.timestamp-*
1212
/storybook-static
1313
/src/testlib/*.d.ts
1414
!/src/testlib/ambient.d.ts
15+
.vscode

‎packages/ds-svelte-community/src/app.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
%sveltekit.head%
88
</head>
9-
<body class="doc" data-sveltekit-preload-data="hover">
9+
<body class="doc" data-sveltekit-preload-data="hover" style="background: var(--ax-bg-default)">
1010
<div>%sveltekit.body%</div>
1111
</body>
1212
</html>

‎packages/ds-svelte-community/src/doclib/Properties.svelte

+24-28
Original file line numberDiff line numberDiff line change
@@ -214,14 +214,14 @@
214214
}
215215
216216
.title {
217-
font-size: var(--a-font-size-medium);
218-
font-weight: var(--a-font-weight-bold);
219-
background: var(--a-surface-alt-1-subtle);
217+
font-size: var(--ax-font-size-medium, var(--a-font-size-medium));
218+
font-weight: var(--ax-font-weight-bold, var(--a-font-weight-bold));
219+
background: var(--ax-bg-meta-purple-moderate, var(--a-surface-alt-1-subtle));
220220
user-select: none;
221221
vertical-align: middle;
222222
223223
&:hover {
224-
background: var(--a-surface-alt-1-moderate);
224+
background: var(--ax-bg-meta-purple-moderate-hover, var(--a-surface-alt-1-moderate));
225225
cursor: pointer;
226226
}
227227
}
@@ -235,14 +235,14 @@
235235
button {
236236
background: none;
237237
border: none;
238-
color: var(--a-text-subtle);
238+
color: var(--ax-text-neutral, var(--a-text-subtle));
239239
font-size: 0.9rem;
240240
padding: 0.5rem;
241241
margin: 0;
242242
cursor: pointer;
243243
244244
&:hover {
245-
color: var(--a-text-default);
245+
color: var(--ax-text-default, var(--a-text-default));
246246
}
247247
}
248248
@@ -284,72 +284,68 @@
284284
tbody {
285285
tr {
286286
td {
287-
border-bottom: 1px solid var(--a-border-default);
287+
border-bottom: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
288288
289289
&:first-of-type {
290-
border-left: 1px solid var(--a-border-default);
290+
border-left: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
291291
}
292292
&:last-of-type {
293-
border-right: 1px solid var(--a-border-default);
293+
border-right: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
294294
}
295295
}
296296
297297
&:first-child td {
298-
border-top: 1px solid var(--a-border-default);
298+
border-top: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
299299
300300
&:first-of-type {
301-
border-left: 1px solid var(--a-border-default);
302-
border-top-left-radius: var(--a-border-radius-medium);
301+
border-left: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
302+
border-top-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
303303
}
304304
&:last-of-type {
305-
border-right: 1px solid var(--a-border-default);
306-
border-top-right-radius: var(--a-border-radius-medium);
305+
border-right: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
306+
border-top-right-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
307307
}
308308
}
309309
310310
&:last-child td {
311311
&:first-of-type {
312-
border-bottom-left-radius: var(--a-border-radius-medium);
312+
border-bottom-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
313313
}
314314
&:last-of-type {
315-
border-bottom-right-radius: var(--a-border-radius-medium);
315+
border-bottom-right-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
316316
}
317317
}
318318
}
319319
}
320320
321321
thead {
322322
th {
323-
color: var(--a-text-subtle);
323+
color: var(--ax-text-neutral, var(--a-text-subtle));
324324
text-align: left;
325325
}
326326
}
327327
328-
span.required {
329-
color: var(--a-text-danger);
330-
}
331-
332328
.tags {
333329
margin-top: 0.5rem;
334330
335331
span {
336-
border: 1px solid var(--a-border-default);
337-
border-radius: var(--a-border-radius-medium);
332+
border: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default));
333+
border-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
338334
padding: 0.1rem 0.2rem;
339-
font-size: 0.8rem;
335+
font-size: var(--ax-font-size-small, var(--a-font-size-small));
340336
341337
&:not(:first-child) {
342338
margin-left: 0.5rem;
343339
}
344340
345341
&.required {
346-
color: var(--a-text-danger);
347-
border-color: var(--a-text-danger);
342+
color: var(--ax-text-danger, var(--a-text-danger));
343+
border-color: var(--ax-border-danger-subtle, var(--a-text-danger));
348344
}
349345
350346
&.bindable {
351-
color: var(--a-blue-700);
352-
border-color: var(--a-blue-700);
347+
color: var(--ax-text-info, var(--a-blue-700));
348+
border-color: var(--ax-border-info, var(--a-blue-700));
353349
}
354350
}
355351
}

‎packages/ds-svelte-community/src/doclib/Renderer.svelte

+17-13
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,9 @@
118118

119119
<style>
120120
.preview {
121-
background-color: var(--a-surface-default);
122-
border: 1px solid var(--a-border-default);
123-
border-radius: var(--a-border-radius-medium);
121+
background-color: var(--ax-bg-default, var(--a-surface-default));
122+
border: 1px solid var(--ax-border-default, var(--a-border-default));
123+
border-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
124124
min-height: 250px;
125125
position: relative;
126126
@@ -141,13 +141,16 @@
141141
}
142142
143143
.code-preview {
144-
font-size: var(--a-font-size-small);
144+
font-size: var(--ax-font-size-small, var(--a-font-size-small));
145145
position: relative;
146146
147147
.copy-code {
148-
--ac-copybutton-neutral-text: var(--a-text-on-inverted);
149-
--ac-copybutton-neutral-hover-text: var(--a-surface-alt-1-subtle);
150-
--ac-copybutton-neutral-active-text: var(--a-surface-alt-1-moderate);
148+
--ac-copybutton-neutral-text: var(--ax-text-default, var(--a-text-on-inverted));
149+
--ac-copybutton-neutral-hover-text: var(--ax-text-meta-purple, var(--a-surface-alt-1-subtle));
150+
--ac-copybutton-neutral-active-text: var(
151+
--ax-text-meta-purple-strong,
152+
var(--a-surface-alt-1-moderate)
153+
);
151154
display: none;
152155
153156
position: absolute;
@@ -161,24 +164,25 @@
161164
162165
& :global(pre) {
163166
margin-top: 0;
164-
border-bottom-left-radius: var(--a-border-radius-medium);
165-
border-bottom-right-radius: var(--a-border-radius-medium);
167+
border-bottom-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
168+
border-bottom-right-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
166169
}
167170
}
168171
169172
.toggleCode {
170173
position: absolute;
171174
bottom: -1px;
172175
right: -1px;
173-
font-size: var(--a-font-size-small);
174-
border: 1px solid var(--a-border-default);
176+
font-size: var(--ax-font-size-small, var(--a-font-size-small));
177+
border: 1px solid var(--ax-border-default, var(--a-border-default));
175178
border-radius: 0;
176-
border-top-left-radius: var(--a-border-radius-medium);
179+
border-top-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium));
177180
padding: 0.2rem 0.5rem;
178181
cursor: pointer;
182+
background: var(--ax-bg-default);
179183
180184
&:hover {
181-
background-color: var(--a-surface-alt-1-subtle);
185+
background-color: var(--ax-bg-meta-purple-moderate-hover, var(--a-surface-alt-1-subtle));
182186
}
183187
}
184188
</style>

‎packages/ds-svelte-community/src/doclib/styles.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
@tailwind utilities;
22

33
code {
4-
background: var(--a-surface-alt-1-subtle);
5-
border-radius: var(--a-border-radius-small);
4+
background: var(--ax-bg-meta-purple-moderate, var(--a-surface-alt-1-subtle));
5+
border-radius: var(--ax-border-radius-small, var(--a-border-radius-small));
66
padding: 0.1rem 0.3rem;
77
font-size: 0.7rem;
88
}

‎packages/ds-svelte-community/src/lib/components/Switch/Switch.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Read more about this component in the [Aksel documentation](https://aksel.nav.no
4848
<span class="navds-switch__track">
4949
<span class="navds-switch__thumb">
5050
{#if loading}
51-
<Loader size="xsmall" aria-live="polite" />
51+
<Loader size="xsmall" aria-live="polite" variant={checked ? "interaction" : "inverted"} />
5252
{/if}
5353
<SelectedIcon />
5454
</span>

‎packages/ds-svelte-community/src/lib/components/Tabs/Tab.svelte

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
)}
7272
class:navds-tabs__tab--icon-only={icon && !children}
7373
class:unstyled={as === "a"}
74+
data-state={ctx.value == value ? "active" : "inactive"}
7475
type="button"
7576
role="tab"
7677
aria-controls={ctx.idFor("panel", value)}

‎packages/ds-svelte-community/src/lib/components/Tooltip/Tooltip.svelte

+1
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,7 @@ Read more about this component in the [Aksel documentation](https://aksel.nav.no
159159
id="r7"
160160
class={classes(restProps, "navds-tooltip", "navds-detail", "navds-detail--small")}
161161
data-side={placement}
162+
data-state={open ? "open" : "closed"}
162163
style="position: absolute; visibility: visible; {tooltipStyles}"
163164
bind:clientWidth={tooltipWidth}
164165
bind:clientHeight={tooltipHeight}

‎packages/ds-svelte-community/src/lib/components/primitives/Bleed/bleed.test.ts

+10
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@ describe("Bleed", () => {
2424
await bunmatch(render(Bleed, props), ReactBleed, {
2525
props,
2626
children: [React.createElement("span", {}, "Bleed body")],
27+
opts: {
28+
alterAttrValue(name, value) {
29+
// TODO: This is to support darkside styles
30+
if (name === "style") {
31+
const reg = /--__ax[^;]+;/g;
32+
return value.replaceAll(reg, "");
33+
}
34+
return value;
35+
},
36+
},
2737
}),
2838
).toBeTrue();
2939
});

‎packages/ds-svelte-community/src/lib/components/primitives/Box/box.test.ts

+10
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,16 @@ describe("Box", () => {
2929
await bunmatch(render(Box, props), ReactBox, {
3030
props,
3131
children: [React.createElement("span", {}, "Box body")],
32+
opts: {
33+
alterAttrValue(name, value) {
34+
// TODO: This is to support darkside styles
35+
if (name === "style") {
36+
const reg = /--__ax[^;]+;/g;
37+
return value.replaceAll(reg, "");
38+
}
39+
return value;
40+
},
41+
},
3242
}),
3343
).toBeTrue();
3444
});

‎packages/ds-svelte-community/src/lib/components/primitives/HGrid/hgrid.test.ts

+10
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@ describe("HGrid", () => {
2121
React.createElement("div", { key: "1" }),
2222
React.createElement("div", { key: "2" }),
2323
],
24+
opts: {
25+
alterAttrValue(name, value) {
26+
// TODO: This is to support darkside styles
27+
if (name === "style") {
28+
const reg = /--__ax[^;]+;/g;
29+
return value.replaceAll(reg, "");
30+
}
31+
return value;
32+
},
33+
},
2434
}),
2535
).toBeTrue();
2636
});

‎packages/ds-svelte-community/src/lib/components/utils/css.ts

+21-1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const translateExceptionToCSS = (exception: string) => {
3232
};
3333

3434
const translateTokenStringToCSS = (
35+
domain: "a" | "ax",
3536
componentProp: string,
3637
tokenString: string,
3738
tokenSubgroup: string,
@@ -46,7 +47,7 @@ const translateTokenStringToCSS = (
4647
return `calc((100vw - ${width}%)/-2)`;
4748
}
4849

49-
let output = `var(--a-${tokenSubgroup}-${x})`;
50+
let output = `var(--${domain}-${tokenSubgroup}-${x})`;
5051
if (tokenExceptions.includes(x)) {
5152
output = translateExceptionToCSS(x);
5253
}
@@ -76,6 +77,15 @@ export function getResponsiveProps<T extends string>(
7677
if (typeof responsiveProp === "string") {
7778
return {
7879
[`--__ac-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(
80+
"a",
81+
componentProp,
82+
responsiveProp,
83+
tokenSubgroup,
84+
tokenExceptions,
85+
invert,
86+
),
87+
[`--__axc-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(
88+
"ax",
7989
componentProp,
8090
responsiveProp,
8191
tokenSubgroup,
@@ -89,6 +99,16 @@ export function getResponsiveProps<T extends string>(
8999
Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
90100
styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
91101
translateTokenStringToCSS(
102+
"a",
103+
componentProp,
104+
aliasOrScale,
105+
tokenSubgroup,
106+
tokenExceptions,
107+
invert,
108+
);
109+
styleProps[`--__axc-${componentName}-${componentProp}-${breakpointAlias}`] =
110+
translateTokenStringToCSS(
111+
"ax",
92112
componentProp,
93113
aliasOrScale,
94114
tokenSubgroup,

0 commit comments

Comments
 (0)