diff --git a/.changeset/curvy-actors-divide.md b/.changeset/curvy-actors-divide.md new file mode 100644 index 00000000..85d595d7 --- /dev/null +++ b/.changeset/curvy-actors-divide.md @@ -0,0 +1,5 @@ +--- +"@nais/ds-svelte-community": patch +--- + +Preview darkside diff --git a/packages/ds-svelte-community/.gitignore b/packages/ds-svelte-community/.gitignore index d53a39a7..b426d1fa 100644 --- a/packages/ds-svelte-community/.gitignore +++ b/packages/ds-svelte-community/.gitignore @@ -12,3 +12,4 @@ vite.config.ts.timestamp-* /storybook-static /src/testlib/*.d.ts !/src/testlib/ambient.d.ts +.vscode diff --git a/packages/ds-svelte-community/src/app.html b/packages/ds-svelte-community/src/app.html index 058203f5..ac867137 100644 --- a/packages/ds-svelte-community/src/app.html +++ b/packages/ds-svelte-community/src/app.html @@ -6,7 +6,7 @@ %sveltekit.head% - +
%sveltekit.body%
diff --git a/packages/ds-svelte-community/src/doclib/Properties.svelte b/packages/ds-svelte-community/src/doclib/Properties.svelte index be5d94e1..8d1276c1 100644 --- a/packages/ds-svelte-community/src/doclib/Properties.svelte +++ b/packages/ds-svelte-community/src/doclib/Properties.svelte @@ -214,14 +214,14 @@ } .title { - font-size: var(--a-font-size-medium); - font-weight: var(--a-font-weight-bold); - background: var(--a-surface-alt-1-subtle); + font-size: var(--ax-font-size-medium, var(--a-font-size-medium)); + font-weight: var(--ax-font-weight-bold, var(--a-font-weight-bold)); + background: var(--ax-bg-meta-purple-moderate, var(--a-surface-alt-1-subtle)); user-select: none; vertical-align: middle; &:hover { - background: var(--a-surface-alt-1-moderate); + background: var(--ax-bg-meta-purple-moderate-hover, var(--a-surface-alt-1-moderate)); cursor: pointer; } } @@ -235,14 +235,14 @@ button { background: none; border: none; - color: var(--a-text-subtle); + color: var(--ax-text-neutral, var(--a-text-subtle)); font-size: 0.9rem; padding: 0.5rem; margin: 0; cursor: pointer; &:hover { - color: var(--a-text-default); + color: var(--ax-text-default, var(--a-text-default)); } } @@ -284,35 +284,35 @@ tbody { tr { td { - border-bottom: 1px solid var(--a-border-default); + border-bottom: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); &:first-of-type { - border-left: 1px solid var(--a-border-default); + border-left: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); } &:last-of-type { - border-right: 1px solid var(--a-border-default); + border-right: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); } } &:first-child td { - border-top: 1px solid var(--a-border-default); + border-top: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); &:first-of-type { - border-left: 1px solid var(--a-border-default); - border-top-left-radius: var(--a-border-radius-medium); + border-left: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); + border-top-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); } &:last-of-type { - border-right: 1px solid var(--a-border-default); - border-top-right-radius: var(--a-border-radius-medium); + border-right: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); + border-top-right-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); } } &:last-child td { &:first-of-type { - border-bottom-left-radius: var(--a-border-radius-medium); + border-bottom-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); } &:last-of-type { - border-bottom-right-radius: var(--a-border-radius-medium); + border-bottom-right-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); } } } @@ -320,36 +320,32 @@ thead { th { - color: var(--a-text-subtle); + color: var(--ax-text-neutral, var(--a-text-subtle)); text-align: left; } } - span.required { - color: var(--a-text-danger); - } - .tags { margin-top: 0.5rem; span { - border: 1px solid var(--a-border-default); - border-radius: var(--a-border-radius-medium); + border: 1px solid var(--ax-border-neutral-subtle, var(--a-border-default)); + border-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); padding: 0.1rem 0.2rem; - font-size: 0.8rem; + font-size: var(--ax-font-size-small, var(--a-font-size-small)); &:not(:first-child) { margin-left: 0.5rem; } &.required { - color: var(--a-text-danger); - border-color: var(--a-text-danger); + color: var(--ax-text-danger, var(--a-text-danger)); + border-color: var(--ax-border-danger-subtle, var(--a-text-danger)); } &.bindable { - color: var(--a-blue-700); - border-color: var(--a-blue-700); + color: var(--ax-text-info, var(--a-blue-700)); + border-color: var(--ax-border-info, var(--a-blue-700)); } } } diff --git a/packages/ds-svelte-community/src/doclib/Renderer.svelte b/packages/ds-svelte-community/src/doclib/Renderer.svelte index 3ed0554d..551c2b6c 100644 --- a/packages/ds-svelte-community/src/doclib/Renderer.svelte +++ b/packages/ds-svelte-community/src/doclib/Renderer.svelte @@ -118,9 +118,9 @@ diff --git a/packages/ds-svelte-community/src/doclib/styles.css b/packages/ds-svelte-community/src/doclib/styles.css index ac065fd7..58f8f8d1 100644 --- a/packages/ds-svelte-community/src/doclib/styles.css +++ b/packages/ds-svelte-community/src/doclib/styles.css @@ -1,8 +1,8 @@ @tailwind utilities; code { - background: var(--a-surface-alt-1-subtle); - border-radius: var(--a-border-radius-small); + background: var(--ax-bg-meta-purple-moderate, var(--a-surface-alt-1-subtle)); + border-radius: var(--ax-border-radius-small, var(--a-border-radius-small)); padding: 0.1rem 0.3rem; font-size: 0.7rem; } diff --git a/packages/ds-svelte-community/src/lib/components/Switch/Switch.svelte b/packages/ds-svelte-community/src/lib/components/Switch/Switch.svelte index 498ec85c..471c13ca 100644 --- a/packages/ds-svelte-community/src/lib/components/Switch/Switch.svelte +++ b/packages/ds-svelte-community/src/lib/components/Switch/Switch.svelte @@ -48,7 +48,7 @@ Read more about this component in the [Aksel documentation](https://aksel.nav.no {#if loading} - + {/if} diff --git a/packages/ds-svelte-community/src/lib/components/Tabs/Tab.svelte b/packages/ds-svelte-community/src/lib/components/Tabs/Tab.svelte index fa6fd17e..a8c4bd3f 100644 --- a/packages/ds-svelte-community/src/lib/components/Tabs/Tab.svelte +++ b/packages/ds-svelte-community/src/lib/components/Tabs/Tab.svelte @@ -71,6 +71,7 @@ )} class:navds-tabs__tab--icon-only={icon && !children} class:unstyled={as === "a"} + data-state={ctx.value == value ? "active" : "inactive"} type="button" role="tab" aria-controls={ctx.idFor("panel", value)} diff --git a/packages/ds-svelte-community/src/lib/components/Tooltip/Tooltip.svelte b/packages/ds-svelte-community/src/lib/components/Tooltip/Tooltip.svelte index e9926a3d..dd9ab6fd 100644 --- a/packages/ds-svelte-community/src/lib/components/Tooltip/Tooltip.svelte +++ b/packages/ds-svelte-community/src/lib/components/Tooltip/Tooltip.svelte @@ -159,6 +159,7 @@ Read more about this component in the [Aksel documentation](https://aksel.nav.no id="r7" class={classes(restProps, "navds-tooltip", "navds-detail", "navds-detail--small")} data-side={placement} + data-state={open ? "open" : "closed"} style="position: absolute; visibility: visible; {tooltipStyles}" bind:clientWidth={tooltipWidth} bind:clientHeight={tooltipHeight} diff --git a/packages/ds-svelte-community/src/lib/components/primitives/Bleed/bleed.test.ts b/packages/ds-svelte-community/src/lib/components/primitives/Bleed/bleed.test.ts index 9c3877a1..3ed044a8 100644 --- a/packages/ds-svelte-community/src/lib/components/primitives/Bleed/bleed.test.ts +++ b/packages/ds-svelte-community/src/lib/components/primitives/Bleed/bleed.test.ts @@ -24,6 +24,16 @@ describe("Bleed", () => { await bunmatch(render(Bleed, props), ReactBleed, { props, children: [React.createElement("span", {}, "Bleed body")], + opts: { + alterAttrValue(name, value) { + // TODO: This is to support darkside styles + if (name === "style") { + const reg = /--__ax[^;]+;/g; + return value.replaceAll(reg, ""); + } + return value; + }, + }, }), ).toBeTrue(); }); diff --git a/packages/ds-svelte-community/src/lib/components/primitives/Box/box.test.ts b/packages/ds-svelte-community/src/lib/components/primitives/Box/box.test.ts index 71c5e4d7..99688b5d 100644 --- a/packages/ds-svelte-community/src/lib/components/primitives/Box/box.test.ts +++ b/packages/ds-svelte-community/src/lib/components/primitives/Box/box.test.ts @@ -29,6 +29,16 @@ describe("Box", () => { await bunmatch(render(Box, props), ReactBox, { props, children: [React.createElement("span", {}, "Box body")], + opts: { + alterAttrValue(name, value) { + // TODO: This is to support darkside styles + if (name === "style") { + const reg = /--__ax[^;]+;/g; + return value.replaceAll(reg, ""); + } + return value; + }, + }, }), ).toBeTrue(); }); diff --git a/packages/ds-svelte-community/src/lib/components/primitives/HGrid/hgrid.test.ts b/packages/ds-svelte-community/src/lib/components/primitives/HGrid/hgrid.test.ts index 721f7c9c..0302eda8 100644 --- a/packages/ds-svelte-community/src/lib/components/primitives/HGrid/hgrid.test.ts +++ b/packages/ds-svelte-community/src/lib/components/primitives/HGrid/hgrid.test.ts @@ -21,6 +21,16 @@ describe("HGrid", () => { React.createElement("div", { key: "1" }), React.createElement("div", { key: "2" }), ], + opts: { + alterAttrValue(name, value) { + // TODO: This is to support darkside styles + if (name === "style") { + const reg = /--__ax[^;]+;/g; + return value.replaceAll(reg, ""); + } + return value; + }, + }, }), ).toBeTrue(); }); diff --git a/packages/ds-svelte-community/src/lib/components/utils/css.ts b/packages/ds-svelte-community/src/lib/components/utils/css.ts index 5d2c1c25..72856e1c 100644 --- a/packages/ds-svelte-community/src/lib/components/utils/css.ts +++ b/packages/ds-svelte-community/src/lib/components/utils/css.ts @@ -32,6 +32,7 @@ const translateExceptionToCSS = (exception: string) => { }; const translateTokenStringToCSS = ( + domain: "a" | "ax", componentProp: string, tokenString: string, tokenSubgroup: string, @@ -46,7 +47,7 @@ const translateTokenStringToCSS = ( return `calc((100vw - ${width}%)/-2)`; } - let output = `var(--a-${tokenSubgroup}-${x})`; + let output = `var(--${domain}-${tokenSubgroup}-${x})`; if (tokenExceptions.includes(x)) { output = translateExceptionToCSS(x); } @@ -76,6 +77,15 @@ export function getResponsiveProps( if (typeof responsiveProp === "string") { return { [`--__ac-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS( + "a", + componentProp, + responsiveProp, + tokenSubgroup, + tokenExceptions, + invert, + ), + [`--__axc-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS( + "ax", componentProp, responsiveProp, tokenSubgroup, @@ -89,6 +99,16 @@ export function getResponsiveProps( Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => { styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] = translateTokenStringToCSS( + "a", + componentProp, + aliasOrScale, + tokenSubgroup, + tokenExceptions, + invert, + ); + styleProps[`--__axc-${componentName}-${componentProp}-${breakpointAlias}`] = + translateTokenStringToCSS( + "ax", componentProp, aliasOrScale, tokenSubgroup, diff --git a/packages/ds-svelte-community/src/lib/css/a.darkside.css b/packages/ds-svelte-community/src/lib/css/a.darkside.css new file mode 100644 index 00000000..af82c0b1 --- /dev/null +++ b/packages/ds-svelte-community/src/lib/css/a.darkside.css @@ -0,0 +1,51 @@ +a:not(.unstyled) { + color: var(--ax-text-accent); + display: inline-flex; + align-items: center; + gap: var(--ax-spacing-05); + text-decoration: underline; + text-underline-offset: 0.1em; + text-decoration-thickness: 0.05em; + + &:hover, + &:active { + text-decoration-thickness: 0.111em; + } + + &:focus-visible { + outline: 2px solid var(--ax-border-focus); + outline-offset: 2px; + } + + &.navds-link--inline-text { + display: inline; + + & > svg { + /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */ + margin: 0.1em 0.1em -0.1em; + transform: translateY(0.05em); + display: inline; + vertical-align: baseline; + } + } + + &.navds-link--remove-underline { + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + & svg { + color: inherit; + flex-shrink: 0; + } +} + +.navds-alert:not(.navds-alert--inline), +.navds-confirmation-panel { + & a:not(.unstyled) { + color: var(--ax-text-default); + } +} diff --git a/packages/ds-svelte-community/src/lib/css/darkside.css b/packages/ds-svelte-community/src/lib/css/darkside.css new file mode 100644 index 00000000..87f0581d --- /dev/null +++ b/packages/ds-svelte-community/src/lib/css/darkside.css @@ -0,0 +1,2 @@ +@import "@navikt/ds-css/darkside"; +@import "a.darkside.css" layer(aksel.components); diff --git a/packages/ds-svelte-community/src/routes/+layout.svelte b/packages/ds-svelte-community/src/routes/+layout.svelte index 80717974..1b9d6bcf 100644 --- a/packages/ds-svelte-community/src/routes/+layout.svelte +++ b/packages/ds-svelte-community/src/routes/+layout.svelte @@ -1,7 +1,11 @@ - - - - - ds-svelte-community - - NAIS docs -
- -
- - - - + + ds-svelte-community + + Nais Docs +
+ { + showSidebar = !showSidebar; + }} + > + Toggle menu + +
+ +
@@ -106,13 +105,13 @@ min-width: 200px; max-width: 200px; padding: 1rem 0; - padding-inline-start: var(--a-spacing-3); - border-right: 1px solid var(--a-border-divider); + padding-inline-start: var(--ax-spacing-3, var(--a-spacing-3)); + border-right: 1px solid var(--ax-border-subtle, var(--a-border-divider)); } .section { & > strong { - font-size: var(--a-font-size-medium); + font-size: var(--ax-font-size-medium, var(--a-font-size-medium)); } ul { @@ -126,54 +125,44 @@ } a { - color: var(--a-grayalpha-800); + color: var(--ax-text-neutral, var(--a-grayalpha-800)); font-feature-settings: normal; - font-size: var(--a-font-size-medium); - line-height: var(--a-font-line-height-large); + font-size: var(--ax-font-size-medium, var(--a-font-size-medium)); + line-height: var(--ax-font-line-height-large, var(--a-font-line-height-large)); padding: 0.125rem 0; - padding-inline: var(--a-spacing-3) var(--a-spacing-2); + padding-inline: var(--ax-spacing-3, var(--a-spacing-3)) + var(--ax-spacing-2, var(--a-spacing-2)); text-decoration: none; text-underline-offset: 2px; width: 100%; display: block; - border-top-left-radius: var(--a-border-radius-medium); - border-bottom-left-radius: var(--a-border-radius-medium); + border-top-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); + border-bottom-left-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); &:hover { - background-color: var(--a-grayalpha-100); - color: var(--a-grayalpha-900); + background-color: var(--ax-bg-neutral, var(--a-grayalpha-100)); + color: var(--ax-text-default, var(--a-grayalpha-900)); } &:active { - background-color: var(--a-surface-alt-1-subtle); + background-color: var(--ax-bg-meta-purple-hover, var(--a-surface-alt-1-subtle)); } &.active { - background-color: var(--a-surface-alt-1); - color: var(--a-text-on-alt-1); + background-color: var(--ax-bg-meta-purple-strong, var(--a-surface-alt-1)); + color: var(--ax-text-meta-purple-contrast, var(--a-text-on-alt-1)); } } } } - .docs-link { - opacity: 0.7; - &:hover { - opacity: 1; - } - } - @media (max-width: 1000px) { - .docs-link { - display: none; - } - .wrapper { flex-direction: column; } .mobile { - display: block; + display: contents; } .sidebar { @@ -181,10 +170,10 @@ min-width: unset; max-width: unset; border: 0; - padding-inline: var(--a-spacing-3); - border-bottom: 2px solid var(--a-border-divider); + padding-inline: var(--ax-spacing-3, var(--a-spacing-3)); + border-bottom: 2px solid var(--ax-border-neutral, var(--a-border-divider)); position: absolute; - background: var(--__ac-page-background); + background: var(--ax-bg-default, var(--__ac-page-background)); display: none; z-index: 100; @@ -198,7 +187,7 @@ a { border-radius: 0; - border-radius: var(--a-border-radius-medium); + border-radius: var(--ax-border-radius-medium, var(--a-border-radius-medium)); } } } diff --git a/packages/ds-svelte-community/src/routes/CSS/+page.svx b/packages/ds-svelte-community/src/routes/CSS/+page.svx index 2f92ba8b..f33948e1 100644 --- a/packages/ds-svelte-community/src/routes/CSS/+page.svx +++ b/packages/ds-svelte-community/src/routes/CSS/+page.svx @@ -22,3 +22,9 @@ If you want unstyled `a`, you can add the class `unstyled` to prevent this styli If you want to use Tailwind, follow the [official guide to configure SvelteKit with Tailwind](https://tailwindcss.com/docs/guides/sveltekit). Although, you might not need to add `@tailwind base;` and `@tailwind components;` to your `.css` file. + +## Darkside + +To preview darkside, import `@nais/ds-svelte-community/css/darkside.css` instead of `@nais/ds-svelte-community/css`. + +Add `navds-theme` as a class to your `body` element, and optionally the `dark` class.