mirror of
https://github.com/navikt/aksel.git
synced 2026-10-16 10:42:03 +00:00
Compare commits
22
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]andgithub-actions[bot]
|
09c44edccb | ||
|
Ken
|
2fab45f757 | ||
|
Ken
|
1ba5d9b5a2 | ||
|
Ken
|
5a749690c6 | ||
|
KenandJulian Nymark
|
2f7873d3e7 | ||
|
Ken
|
e5dc975c44 | ||
|
Ken
|
1cc24c2998 | ||
|
Ken
|
636eb05bf5 | ||
|
Ken
|
c6424eda70 | ||
|
Ken
|
90f76498d6 | ||
|
Julian Nymark
|
6201d87a1a | ||
|
Ken
|
4dcb4efeea | ||
|
Ken
|
5586d42096 | ||
|
Ken
|
94e3bd7191 | ||
|
Ken
|
0d886b12bf | ||
|
Vegard Haugstvedt
|
dfbec997fc | ||
|
Julian Nymark
|
1ec34524e7 | ||
|
Ken
|
36f84458a5 | ||
|
Julian Nymark
|
2271072d1c | ||
|
Ken
|
0c22de8c61 | ||
|
github-actions[bot]andgithub-actions[bot]
|
1b20ad54de | ||
|
Ken
|
8576400263 |
No files matched your search
@@ -4,14 +4,6 @@ import { Markdown, Meta } from "@storybook/blocks";
|
||||
|
||||
# Migration
|
||||
|
||||
## Missing features
|
||||
|
||||
Some components are not yet implemented in the new system. These are:
|
||||
|
||||
- ConfirmationPanel
|
||||
- Panel
|
||||
- Dropdown
|
||||
|
||||
## Tokens
|
||||
|
||||
[See tokens docs here](https://main--66b4b3beb91603ed0ab5c45e.chromatic.com/?path=/docs/docs-become-a-pilot-team-4-tokens--docs).
|
||||
@@ -40,6 +32,15 @@ All component-spesific tokens are no longer supported. That means all tokens lik
|
||||
|
||||
All component-based tokens are prefixed with `--ac`, so a global search in your codebase should find all of them.
|
||||
|
||||
## Tailwind CSS
|
||||
|
||||
Since our Tailwind CSS config is tied to our tokens, most changes made to the tokens will affect the Tailwind CSS config.
|
||||
We have decided to prefix all our classes with `ax-` in the new config, so it should be possible to use both packages at the same time. We will develop tooling to hopefuly make the migrations easier in the future.
|
||||
|
||||
### Removed classes
|
||||
|
||||
z-index, maxWidth and spacing classes are removed from the new config.
|
||||
|
||||
## React
|
||||
|
||||
We have made some updates to `@navikt/ds-react` that you should be aware of before testing.
|
||||
|
||||
@@ -6,18 +6,18 @@ import { Markdown, Meta } from "@storybook/blocks";
|
||||
|
||||
## Clean project
|
||||
|
||||
For new projects, setup is just as easy as before, but now requires `Theme`-component to be wrapped around your app.
|
||||
For new projects, setup is just as easy as before, but now requires a `Theme`-component to be wrapped around your app.
|
||||
The component acts as a local feature-flag for the new implementation, with the added benefit of being able to switch between light and dark mode for you.
|
||||
|
||||
Steps:
|
||||
|
||||
- 1. Import new CSS `@navikt/ds-css/darkside`
|
||||
- 2. Import `Theme`-component from `@navikt/ds-react`
|
||||
- 2. Import `Theme`-component from `@navikt/ds-react/Theme`
|
||||
- 3. Wrap your app in the `Theme`-component. You do not have to set the theme, but it defaults to `light`.
|
||||
|
||||
```tsx
|
||||
import "@navikt/ds-css/darkside";
|
||||
import { Theme } from "@navikt/ds-react";
|
||||
import { Theme } from "@navikt/ds-react/Theme";
|
||||
|
||||
export const App = () => (
|
||||
<Theme theme="light">
|
||||
@@ -32,7 +32,7 @@ If you are not using any of our React-components, you can still switch between t
|
||||
|
||||
## Theme switching
|
||||
|
||||
The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark`, and the rest is handled by the CSS.
|
||||
The `Theme`-component has a `theme`-prop that can be set to either `light` or `dark`. This only sets a `class` on the element of `light` or `dark` (in addition to a `navds-theme` class), and the rest is handled by the CSS.
|
||||
|
||||
You have the option of using `hasBackground` (defaults to true) to make `Theme` include a built on default background.
|
||||
|
||||
@@ -87,7 +87,7 @@ For the new system to work with our components, you will have to use the new `Th
|
||||
|
||||
```tsx
|
||||
import "@navikt/ds-css/darkside;";
|
||||
import { Theme } from "@navikt/ds-react";
|
||||
import { Theme } from "@navikt/ds-react/Theme";
|
||||
|
||||
export const App = () => (
|
||||
<Theme theme="light">
|
||||
@@ -117,3 +117,12 @@ Since our implementation is based on CSS, you can easily make custom adjustments
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Tailwind CSS
|
||||
|
||||
```
|
||||
// Tailwind v3
|
||||
module.exports = {
|
||||
presets: [require("@navikt/ds-tailwind/darkside-tw3")],
|
||||
}
|
||||
```
|
||||
@@ -44,6 +44,7 @@ We welcome all forms of feedback:
|
||||
- **Design tokens**: A complete re-write of our design tokens to allow for dark mode.
|
||||
- **Dark mode**: A new dark mode implementation.
|
||||
- **Updated CSS**: Now uses new tokens, built-in CSS-layers support and most components are re-written.
|
||||
- **Updated Tailwind CSS config**: Now uses new tokens, now comes with built-in `ax`-prefix for easier separation between Aksel and your own config.
|
||||
- **Updated components**: Components use the new tokens and CSS.
|
||||
- **New Theme-component**: A new `<Theme/>`-component to handle the theming-switch locally.
|
||||
- **Updated documentation**: Updated documentation for the new implementation.
|
||||
@@ -54,9 +55,14 @@ As we go, we will add more documentation to help you get started with the new im
|
||||
|
||||
- [Design i light og dark-mode](https://aksel.nav.no/god-praksis/artikler/design-i-dark-mode-og-light-mode)
|
||||
|
||||
### Demo page
|
||||
|
||||
We have a demo page to show off some of the new features and tokens. [You can find it here](https://aksel-referansesider.ansatt.dev.nav.no/aktivitetsplan/).
|
||||
We recommend using "inspect-tool" in browser to get a feel for the new tokens and CSS.
|
||||
|
||||
## How testing could affect your application
|
||||
|
||||
All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all inn.
|
||||
All the changes are **opt in**, meaning you can choose to use nothing, some parts of the new implementation, or go all-in.
|
||||
You will still be able to recieve updates to the old implementation while we are in the testing phase.
|
||||
|
||||
### Tokens
|
||||
@@ -67,7 +73,7 @@ This includes new backgrounds, text-colors, border-colors and updated spacing-to
|
||||
- All tokens have a new prefix `--ax` to avoid conflicts with old tokens.
|
||||
- You will be able to use the new tokens at the same time as the old tokens.
|
||||
- All background, text-colors and border-colors have new names and "concepts" to learn. Migration will not be a quick one to one with old system.
|
||||
- New spacing tokens are now named `space` and based on `px` values.
|
||||
- New spacing tokens are now named `space` and based on `px` values (most devs think and deal in `px` values first, no more on-the-fly mental arithmetic! WYSIWYG).
|
||||
|
||||
### CSS
|
||||
|
||||
@@ -78,6 +84,11 @@ We have updated our CSS to be based on the new tokens for theming.
|
||||
- You will not be able to use the old CSS and the new CSS at the same time.
|
||||
- Component-based tokens are no longer avaliable.
|
||||
|
||||
### Tailwind CSS
|
||||
|
||||
We have made a new Tailwind CSS config based on the new tokens. Based on previous iterations, we have decided to try prefixing all our classes with `ax-`.
|
||||
While this will be a little more verbose, it makes it easier to separate your own config from ours, and hopefully makes it easier to maintain.
|
||||
|
||||
### React components
|
||||
|
||||
We have made some prop-changes to some components to facilitate the new theming and updated CSS. You can read more about them under `migration` in the sidebar.
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/aksel-icons
|
||||
|
||||
## 7.13.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- Icons: :tada: New icons `ExpandVertical` and `QuestionmarkCircle` ([#3583](https://github.com/navikt/aksel/pull/3583))
|
||||
|
||||
## 7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
## 7.12.0
|
||||
|
||||
@@ -12,5 +12,5 @@ keywords:
|
||||
- struktur
|
||||
- innhold
|
||||
variant: Stroke
|
||||
updated_at: 05.01.2024
|
||||
updated_at: 10.02.2025
|
||||
created_at: 07.03.2023
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 2.21967C12.2374 1.92678 11.7626 1.92678 11.4697 2.21967L7.46967 6.21967C7.17678 6.51256 7.17678 6.98744 7.46967 7.28033C7.76256 7.57322 8.23744 7.57322 8.53033 7.28033L11.25 4.56066L11.25 10C11.25 10.4142 11.5858 10.75 12 10.75C12.4142 10.75 12.75 10.4142 12.75 10L12.75 4.56066L15.4697 7.28033C15.7626 7.57322 16.2374 7.57322 16.5303 7.28033C16.8232 6.98744 16.8232 6.51256 16.5303 6.21967L12.5303 2.21967ZM11.4697 21.7803C11.7626 22.0732 12.2374 22.0732 12.5303 21.7803L16.5303 17.7803C16.8232 17.4874 16.8232 17.0126 16.5303 16.7197C16.2374 16.4268 15.7626 16.4268 15.4697 16.7197L12.75 19.4393L12.75 14C12.75 13.5858 12.4142 13.25 12 13.25C11.5858 13.25 11.25 13.5858 11.25 14L11.25 19.4393L8.53033 16.7197C8.23744 16.4268 7.76256 16.4268 7.46967 16.7197C7.17678 17.0126 7.17678 17.4874 7.46967 17.7803L11.4697 21.7803Z" fill="#23262A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1003 B |
@@ -0,0 +1,13 @@
|
||||
name: ExpandVertical
|
||||
category: Arrows
|
||||
sub_category: Arrow
|
||||
keywords:
|
||||
- arrows
|
||||
- piler
|
||||
- fullscreen
|
||||
- fullskjerm
|
||||
- open
|
||||
- åpne
|
||||
variant: Stroke
|
||||
updated_at: 30.01.2025
|
||||
created_at: 29.01.2025
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C7.44365 3.75 3.75 7.44365 3.75 12C3.75 16.5563 7.44365 20.25 12 20.25C16.5563 20.25 20.25 16.5563 20.25 12C20.25 7.44365 16.5563 3.75 12 3.75ZM2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9ZM10.25 9.5C10.25 8.5335 11.0335 7.75 12 7.75H12.1361C13.0274 7.75 13.75 8.47255 13.75 9.36387C13.75 9.85413 13.5271 10.3178 13.1443 10.6241L12.7028 10.9773C11.7845 11.7119 11.25 12.8241 11.25 14C11.25 14.4142 11.5858 14.75 12 14.75C12.4142 14.75 12.75 14.4142 12.75 14C12.75 13.2797 13.0774 12.5985 13.6398 12.1486L14.0814 11.7954C14.82 11.2045 15.25 10.3098 15.25 9.36387C15.25 7.64413 13.8559 6.25 12.1361 6.25H12C10.2051 6.25 8.75 7.70507 8.75 9.5C8.75 9.91421 9.08579 10.25 9.5 10.25C9.91421 10.25 10.25 9.91421 10.25 9.5Z" fill="#23262A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,17 @@
|
||||
name: QuestionmarkCircle
|
||||
category: Status
|
||||
sub_category: Guidance
|
||||
keywords:
|
||||
- assistance
|
||||
- support
|
||||
- information
|
||||
- guidance
|
||||
- question mark
|
||||
- hjelp
|
||||
- støtte
|
||||
- informasjon
|
||||
- veiledning
|
||||
- spørsmålstegn
|
||||
variant: Stroke
|
||||
updated_at: 29.01.2025
|
||||
created_at: 29.01.2025
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.75C17.3848 21.75 21.75 17.3848 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 17.3848 6.61522 21.75 12 21.75ZM12 7.75C11.0335 7.75 10.25 8.5335 10.25 9.5C10.25 9.91421 9.91421 10.25 9.5 10.25C9.08579 10.25 8.75 9.91421 8.75 9.5C8.75 7.70507 10.2051 6.25 12 6.25H12.1361C13.8559 6.25 15.25 7.64413 15.25 9.36387C15.25 10.3098 14.82 11.2045 14.0814 11.7954L13.6398 12.1486C13.0774 12.5985 12.75 13.2797 12.75 14C12.75 14.4142 12.4142 14.75 12 14.75C11.5858 14.75 11.25 14.4142 11.25 14C11.25 12.8241 11.7845 11.7119 12.7028 10.9773L13.1443 10.6241C13.5271 10.3178 13.75 9.85413 13.75 9.36387C13.75 8.47255 13.0274 7.75 12.1361 7.75H12ZM11.0498 16.9C11.0498 16.3753 11.4751 15.95 11.9998 15.95C12.5245 15.95 12.9498 16.3753 12.9498 16.9C12.9498 17.4247 12.5245 17.85 11.9998 17.85C11.4751 17.85 11.0498 17.4247 11.0498 16.9Z" fill="#23262A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,17 @@
|
||||
name: QuestionmarkCircleFill
|
||||
category: Status
|
||||
sub_category: Guidance
|
||||
keywords:
|
||||
- assistance
|
||||
- support
|
||||
- information
|
||||
- guidance
|
||||
- question mark
|
||||
- hjelp
|
||||
- støtte
|
||||
- informasjon
|
||||
- veiledning
|
||||
- spørsmålstegn
|
||||
variant: Fill
|
||||
updated_at: 29.01.2025
|
||||
created_at: 29.01.2025
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-icons",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"author": "Aksel | Nav",
|
||||
"homepage": "https://aksel.nav.no/ikoner",
|
||||
"repository": {
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/aksel-stylelint
|
||||
|
||||
## 7.13.0
|
||||
|
||||
## 7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
## 7.12.0
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel-stylelint",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"author": "Aksel | Nav",
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/stylelint",
|
||||
"repository": {
|
||||
@@ -35,8 +35,8 @@
|
||||
"dev": "yarn watch:lint"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-css": "^7.12.1",
|
||||
"@navikt/ds-tokens": "^7.12.1",
|
||||
"@navikt/ds-css": "^7.13.0",
|
||||
"@navikt/ds-tokens": "^7.13.0",
|
||||
"concurrently": "9.0.1",
|
||||
"postcss-selector-parser": "^6.0.13",
|
||||
"postcss-value-parser": "^4.2.0",
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
# @navikt/aksel
|
||||
|
||||
## 7.13.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [[`1ba5d9b`](https://github.com/navikt/aksel/commit/1ba5d9b5a2fb74ee2c1fdb8d498520ad85323a12)]:
|
||||
- @navikt/ds-css@7.13.0
|
||||
|
||||
## 7.12.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-css@7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/aksel",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"description": "Aksel command line interface. Handles css-imports, codemods and more",
|
||||
"author": "Aksel | Nav designsystem team",
|
||||
"license": "MIT",
|
||||
@@ -29,7 +29,7 @@
|
||||
},
|
||||
"homepage": "https://aksel.nav.no/grunnleggende/kode/kommandolinje",
|
||||
"dependencies": {
|
||||
"@navikt/ds-css": "^7.12.1",
|
||||
"@navikt/ds-css": "^7.13.0",
|
||||
"axios": "1.7.4",
|
||||
"chalk": "4.1.0",
|
||||
"clipboardy": "^2.3.0",
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-css
|
||||
|
||||
## 7.13.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
|
||||
|
||||
## 7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
## 7.12.0
|
||||
|
||||
@@ -6,7 +6,7 @@ import { describe, expect, test } from "vitest";
|
||||
* Darkside config might have some new files added. We can skip these when checking for equality.
|
||||
*/
|
||||
const newFiles = ["theme"];
|
||||
const deprecatedFiles = ["linkpanel"];
|
||||
const deprecatedFiles: string[] = [];
|
||||
|
||||
describe("Check that old and new (darkside) bundle matches", () => {
|
||||
test("Darkside includes the same files as old bundle", () => {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
.navds-dropdown__menu {
|
||||
overflow: hidden;
|
||||
padding: var(--a-spacing-2) 0;
|
||||
color: var(--ac-dropdown-text, var(--a-text-default));
|
||||
padding: var(--ax-space-8);
|
||||
color: var(--ax-text-neutral);
|
||||
width: 27ch;
|
||||
max-height: 616px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.navds-dropdown__divider {
|
||||
margin: var(--a-spacing-3) 0;
|
||||
margin: var(--ax-space-12) 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--a-border-divider);
|
||||
border-bottom: 1px solid var(--ax-border-neutral-subtle);
|
||||
}
|
||||
|
||||
.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
|
||||
margin: 0 var(--a-spacing-4) var(--a-spacing-3);
|
||||
margin: 0 var(--ax-space-16) var(--ax-space-12);
|
||||
}
|
||||
|
||||
.navds-dropdown__list {
|
||||
@@ -28,7 +28,8 @@
|
||||
}
|
||||
|
||||
.navds-dropdown__list-heading {
|
||||
margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
|
||||
margin-block: var(--ax-space-4) var(--ax-space-12);
|
||||
margin-inline: var(--ax-space-4);
|
||||
}
|
||||
|
||||
.navds-dropdown__item {
|
||||
@@ -36,7 +37,6 @@
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
background: transparent;
|
||||
color: var(--ac-dropdown-item-text, var(--a-text-action));
|
||||
font: inherit;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
@@ -44,39 +44,29 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--a-spacing-2);
|
||||
padding: var(--a-spacing-1) var(--a-spacing-4);
|
||||
}
|
||||
gap: var(--ax-space-8);
|
||||
padding: var(--ax-space-4);
|
||||
border-radius: var(--ax-border-radius-medium);
|
||||
color: var(--ax-text-neutral);
|
||||
|
||||
.navds-dropdown__item:hover {
|
||||
background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
|
||||
color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
|
||||
}
|
||||
|
||||
.navds-dropdown__item:active {
|
||||
background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
|
||||
color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
|
||||
}
|
||||
|
||||
.navds-dropdown__item:focus-visible {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
.navds-dropdown__item:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: -2px;
|
||||
box-shadow: inset 0 0 0 2px var(--a-border-focus);
|
||||
&:hover {
|
||||
background-color: var(--ax-bg-accent-moderate-hoverA);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-dropdown__item:disabled {
|
||||
color: var(--ac-dropdown-item-text, var(--a-text-action));
|
||||
opacity: var(--ax-opacity-disabled);
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
&:active {
|
||||
background-color: var(--ax-bg-accent-moderate-pressedA);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--ax-border-focus);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: var(--ax-opacity-disabled);
|
||||
background: transparent;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.navds-confirmation-panel__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--a-spacing-3);
|
||||
padding: var(--a-spacing-4);
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
|
||||
background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
|
||||
gap: var(--ax-space-12);
|
||||
padding: var(--ax-space-16);
|
||||
border-radius: var(--ax-border-radius-large);
|
||||
border: 1px solid var(--ax-border-default);
|
||||
background-color: var(--ax-bg-moderate);
|
||||
transition: background-color linear 100ms;
|
||||
justify-self: stretch;
|
||||
position: relative;
|
||||
@@ -15,20 +15,6 @@
|
||||
max-width: 80ch;
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked .navds-confirmation-panel__inner {
|
||||
border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
|
||||
background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--error .navds-confirmation-panel__inner {
|
||||
border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
|
||||
background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--error .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label {
|
||||
color: var(--a-text-default);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.navds-confirmation-panel__inner::before {
|
||||
content: "";
|
||||
@@ -39,8 +25,8 @@
|
||||
border-left: 8px solid;
|
||||
border-color: orange;
|
||||
forced-color-adjust: none;
|
||||
border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
|
||||
border-end-start-radius: calc(var(--a-border-radius-medium) - 1px);
|
||||
border-start-start-radius: calc(var(--ax-border-radius-large) - 1px);
|
||||
border-end-start-radius: calc(var(--ax-border-radius-large) - 1px);
|
||||
}
|
||||
|
||||
.navds-confirmation-panel--checked .navds-confirmation-panel__inner::before {
|
||||
|
||||
@@ -36,6 +36,7 @@
|
||||
@import "./help-text.darkside.css" layer(aksel.components);
|
||||
@import "./internalheader.darkside.css" layer(aksel.components);
|
||||
@import "./link.darkside.css" layer(aksel.components);
|
||||
@import "./link-panel.darkside.css" layer(aksel.components);
|
||||
@import "./loader.darkside.css" layer(aksel.components);
|
||||
@import "./modal.darkside.css" layer(aksel.components);
|
||||
@import "./pagination.darkside.css" layer(aksel.components);
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
.navds-link-panel {
|
||||
text-decoration: none;
|
||||
color: var(--ax-text-neutral);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--ax-space-16);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--ax-border-accent);
|
||||
|
||||
& .navds-link-panel__title {
|
||||
text-decoration: underline;
|
||||
color: var(--ax-text-accent-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--ax-border-focus);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.navds-link-panel__chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.5rem;
|
||||
transition: transform 200ms;
|
||||
}
|
||||
|
||||
.navds-link-panel:hover > .navds-link-panel__chevron,
|
||||
.navds-link-panel:focus-within > .navds-link-panel__chevron {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.navds-link-panel__description {
|
||||
margin-top: var(--a-space-4);
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
.navds-panel {
|
||||
background-color: var(--ac-panel-bg, var(--a-surface-default));
|
||||
padding: var(--a-spacing-4);
|
||||
border-radius: var(--a-border-radius-small);
|
||||
background-color: var(--ax-bg-default);
|
||||
padding: var(--ax-space-16);
|
||||
border-radius: var(--ax-border-radius-small);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navds-panel--border {
|
||||
border-color: var(--ac-panel-border, var(--a-border-default));
|
||||
border-color: var(--ax-border-neutral);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"description": "CSS for Nav Designsystem",
|
||||
"author": "Aksel | Nav designsystem team",
|
||||
"keywords": [
|
||||
@@ -28,7 +28,7 @@
|
||||
"test": "yarn build && vitest run"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^7.12.1",
|
||||
"@navikt/ds-tokens": "^7.13.0",
|
||||
"@types/clean-css": "4.2.11",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"browserslist": "^4.24.2",
|
||||
|
||||
@@ -1,5 +1,25 @@
|
||||
# @navikt/ds-react
|
||||
|
||||
## 7.13.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
|
||||
|
||||
- Updated dependencies [[`636eb05`](https://github.com/navikt/aksel/commit/636eb05bf56ba2c8513704c61882fde369c2e67b)]:
|
||||
- @navikt/aksel-icons@7.13.0
|
||||
- @navikt/ds-tokens@7.13.0
|
||||
|
||||
## 7.12.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Box: Added export for `BoxNew`. ([`8576400`](https://github.com/navikt/aksel/commit/857640026368153b64171f1cf954b9abac493ee8))
|
||||
|
||||
- Updated dependencies []:
|
||||
- @navikt/ds-tokens@7.12.2
|
||||
- @navikt/aksel-icons@7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"description": "React components from the Norwegian Labour and Welfare Administration.",
|
||||
"author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
|
||||
"license": "MIT",
|
||||
@@ -620,13 +620,13 @@
|
||||
"build": "yarn i18n-jsdoc && concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" && yarn i18n-jsdoc --cleanup",
|
||||
"watch": "tsc --watch -p tsconfig.esm.json",
|
||||
"test": "TZ=UTC vitest run -c tests/vitest.config.ts",
|
||||
"test:watch": "vitest watch"
|
||||
"test:watch": "TZ=UTC vitest watch -c tests/vitest.config.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "0.25.4",
|
||||
"@floating-ui/react-dom": "^2.0.9",
|
||||
"@navikt/aksel-icons": "^7.12.1",
|
||||
"@navikt/ds-tokens": "^7.12.1",
|
||||
"@navikt/aksel-icons": "^7.13.0",
|
||||
"@navikt/ds-tokens": "^7.13.0",
|
||||
"clsx": "^2.1.0",
|
||||
"date-fns": "^3.0.0",
|
||||
"react-day-picker": "8.10.1"
|
||||
|
||||
@@ -57,6 +57,12 @@ export const ConfirmationPanel = forwardRef<
|
||||
|
||||
const id = useId();
|
||||
|
||||
const currentRole = hasError
|
||||
? "danger"
|
||||
: props.checked
|
||||
? "success"
|
||||
: "warning";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl("navds-confirmation-panel", "navds-form-field", className, {
|
||||
@@ -64,6 +70,7 @@ export const ConfirmationPanel = forwardRef<
|
||||
"navds-confirmation-panel--error": hasError,
|
||||
"navds-confirmation-panel--checked": !!props.checked,
|
||||
})}
|
||||
data-color-role={currentRole}
|
||||
>
|
||||
<div className="navds-confirmation-panel__inner">
|
||||
{children && (
|
||||
|
||||
@@ -36,7 +36,7 @@ export {
|
||||
type InternalHeaderUserProps,
|
||||
} from "./internal-header";
|
||||
export { Bleed, type BleedProps } from "./layout/bleed";
|
||||
export { Box, type BoxProps } from "./layout/box";
|
||||
export { Box, type BoxProps, BoxNew, type BoxNewProps } from "./layout/box";
|
||||
export { HGrid, type HGridProps } from "./layout/grid";
|
||||
export { Page, type PageBlockProps, type PageProps } from "./layout/page";
|
||||
export { Hide, Show, type ResponsiveProps } from "./layout/responsive";
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
export { default as Box, type BoxProps } from "./Box";
|
||||
|
||||
/* TODO: Uncomment this when ready to expose darkmode-support. Remember to update top-level `index.ts` at the same time. */
|
||||
/* export { default as BoxNew, type BoxNewProps } from "./Box.darkside"; */
|
||||
export { default as BoxNew, type BoxNewProps } from "./Box.darkside";
|
||||
+4
@@ -1,4 +1,5 @@
|
||||
import "react";
|
||||
import type { GlobalColorRoles } from "@navikt/ds-tokens/types";
|
||||
|
||||
declare module "react" {
|
||||
interface CSSProperties {
|
||||
@@ -7,4 +8,7 @@ declare module "react" {
|
||||
[key: `--axc-${string}`]: string | number | undefined;
|
||||
[key: `--__axc-${string}`]: string | number | undefined;
|
||||
}
|
||||
interface HTMLAttributes {
|
||||
"data-color-role"?: GlobalColorRoles;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { compositeClassFunction } from "./Theme";
|
||||
|
||||
const start = "navds-accordion testclass navds-heading endclass";
|
||||
const end =
|
||||
"startclass navds-accordion navds-heading endclass navds-accordion__header";
|
||||
|
||||
const both = start + " " + end;
|
||||
|
||||
describe("RenameCSS", () => {
|
||||
test("String starts with navds", () => {
|
||||
expect(compositeClassFunction(start)).toBe(
|
||||
"aksel-accordion testclass aksel-heading endclass",
|
||||
);
|
||||
});
|
||||
|
||||
test("String ends with navds", () => {
|
||||
expect(compositeClassFunction(end)).toBe(
|
||||
"startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
|
||||
);
|
||||
});
|
||||
|
||||
test("String starts and ends with navds", () => {
|
||||
expect(compositeClassFunction(both)).toBe(
|
||||
"aksel-accordion testclass aksel-heading endclass startclass aksel-accordion aksel-heading endclass aksel-accordion__header",
|
||||
);
|
||||
});
|
||||
|
||||
test("String does not contain navds", () => {
|
||||
expect(compositeClassFunction("startclass endclass")).toBe(
|
||||
"startclass endclass",
|
||||
);
|
||||
});
|
||||
|
||||
test("String is empty", () => {
|
||||
expect(compositeClassFunction("")).toBe("");
|
||||
});
|
||||
|
||||
test("String contains navds as a substring", () => {
|
||||
expect(compositeClassFunction("startclass test-navds-class endclass")).toBe(
|
||||
"startclass test-navds-class endclass",
|
||||
);
|
||||
});
|
||||
|
||||
test("String contains multiple navds occurrences", () => {
|
||||
const input = "navds-button navds-icon navds-label";
|
||||
const expected = "aksel-button aksel-icon aksel-label";
|
||||
expect(compositeClassFunction(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test("String contains navds with special characters", () => {
|
||||
const input = "navds-button! navds-icon@ navds-#label navds#-label";
|
||||
const expected = "aksel-button! aksel-icon@ aksel-#label navds#-label";
|
||||
expect(compositeClassFunction(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test("String contains mixed navds and non-navds classes", () => {
|
||||
const input = "navds-button custom-class navds-icon";
|
||||
const expected = "aksel-button custom-class aksel-icon";
|
||||
expect(compositeClassFunction(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test("String contains only navds", () => {
|
||||
const input = "navds";
|
||||
const expected = "navds";
|
||||
expect(compositeClassFunction(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test("String contains navds with numbers", () => {
|
||||
const input = "navds-1 navds-2 navds-3";
|
||||
const expected = "aksel-1 aksel-2 aksel-3";
|
||||
expect(compositeClassFunction(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test("String contains different casings", () => {
|
||||
const input = "Navds-button NAVds-icon NAVDS-label navDS-component";
|
||||
const expected = "Navds-button NAVds-icon NAVDS-label navDS-component";
|
||||
expect(compositeClassFunction(input)).toBe(expected);
|
||||
});
|
||||
});
|
||||
@@ -4,6 +4,41 @@ import { Slot } from "../slot/Slot";
|
||||
import { createContext } from "../util/create-context";
|
||||
import { AsChildProps } from "../util/types";
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* CSS Trsnalation */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
type RenameCSSContext = {
|
||||
cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
|
||||
};
|
||||
|
||||
const [RenameCSSProvider, useRenameCSS] = createContext<RenameCSSContext>({
|
||||
hookName: "useRenameCSS",
|
||||
name: "RenameCSS",
|
||||
providerName: "RenameCSSProvider",
|
||||
defaultValue: { cn: cl },
|
||||
});
|
||||
|
||||
export const compositeClassFunction = (
|
||||
...inputs: Parameters<typeof cl>
|
||||
): string => {
|
||||
const classes = cl(inputs)
|
||||
/* Replaces only if start of string "navds- navds-"*/
|
||||
.replace(/^navds-/g, "aksel-")
|
||||
/* Replaces all " navds-" hits */
|
||||
.replace(/\snavds-/g, " aksel-");
|
||||
|
||||
return classes.trim();
|
||||
};
|
||||
|
||||
const RenameCSS = ({ children }: { children: React.ReactNode }) => {
|
||||
/* Replace function with this when implementation is complete and CSS is updated */
|
||||
/* <RenameCSSProvider cn={compositeClassFunction}> */
|
||||
return <RenameCSSProvider cn={cl}>{children}</RenameCSSProvider>;
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* Theme provider */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
type ThemeContext = {
|
||||
/**
|
||||
* Color theme
|
||||
@@ -45,16 +80,18 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<SlotElement
|
||||
ref={ref}
|
||||
className={cl("navds-theme", className, theme)}
|
||||
data-background={hasBackground}
|
||||
>
|
||||
{children}
|
||||
</SlotElement>
|
||||
<RenameCSS>
|
||||
<SlotElement
|
||||
ref={ref}
|
||||
className={cl("navds-theme", className, theme)}
|
||||
data-background={hasBackground}
|
||||
>
|
||||
{children}
|
||||
</SlotElement>
|
||||
</RenameCSS>
|
||||
</ThemeProvider>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export { Theme, useThemeInternal };
|
||||
export { Theme, useRenameCSS, useThemeInternal };
|
||||
@@ -1,2 +1,2 @@
|
||||
"use client";
|
||||
export { Theme, ThemeProps } from "./Theme";
|
||||
export { Theme, type ThemeProps } from "./Theme";
|
||||
@@ -1,5 +1,13 @@
|
||||
# @navikt/ds-tailwind
|
||||
|
||||
## 7.13.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Tailwind: Added `darkside`-support with import `@navikt/ds-tailwind/darkside-tw3`. ([#3580](https://github.com/navikt/aksel/pull/3580))
|
||||
|
||||
## 7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
## 7.12.0
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { breakpointsTokenConfig } from "../tokens/darkside/tokens/breakpoints";
|
||||
import { config, extractTokensForCategory } from "./darkside";
|
||||
import { config } from "./darkside";
|
||||
|
||||
describe("Darkside tailwind config", () => {
|
||||
test("should have correct color tokens", () => {
|
||||
@@ -14,50 +13,4 @@ describe("Darkside tailwind config", () => {
|
||||
expect(colorKeys).not.toContain("border-radius");
|
||||
expect(colorKeys).not.toContain("breakpoint");
|
||||
});
|
||||
|
||||
test("should have correct screen breakpoints", () => {
|
||||
expect(config.theme.screens.sm).toBe(
|
||||
breakpointsTokenConfig.breakpoint.sm.value,
|
||||
);
|
||||
expect(config.theme.screens.md).toBe(
|
||||
breakpointsTokenConfig.breakpoint.md.value,
|
||||
);
|
||||
expect(config.theme.screens.lg).toBe(
|
||||
breakpointsTokenConfig.breakpoint.lg.value,
|
||||
);
|
||||
expect(config.theme.screens.xl).toBe(
|
||||
breakpointsTokenConfig.breakpoint.xl.value,
|
||||
);
|
||||
expect(config.theme.screens["2xl"]).toBe(
|
||||
breakpointsTokenConfig.breakpoint["2xl"].value,
|
||||
);
|
||||
});
|
||||
|
||||
test("should have correct extended properties", () => {
|
||||
expect(config.theme.extend.shadow).toEqual(
|
||||
extractTokensForCategory("shadow"),
|
||||
);
|
||||
expect(config.theme.extend.fontWeight).toEqual(
|
||||
extractTokensForCategory("font-weight"),
|
||||
);
|
||||
expect(config.theme.extend.fontSize).toEqual(
|
||||
extractTokensForCategory("font-size"),
|
||||
);
|
||||
expect(config.theme.extend.lineHeight).toEqual(
|
||||
extractTokensForCategory("font-line-height"),
|
||||
);
|
||||
expect(config.theme.extend.fontFamily).toEqual(
|
||||
extractTokensForCategory("font-family"),
|
||||
);
|
||||
expect(config.theme.extend.borderRadius).toEqual(
|
||||
extractTokensForCategory("border-radius"),
|
||||
);
|
||||
});
|
||||
|
||||
test("should extract tokens correctly for a given category", () => {
|
||||
const spacingTokens = extractTokensForCategory("spacing");
|
||||
Object.entries(spacingTokens).forEach(([key]) => {
|
||||
expect(key).not.toContain("spacing-");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,7 @@
|
||||
import { writeFileSync } from "fs";
|
||||
import * as TokensBuild from "@navikt/ds-tokens/darkside-js";
|
||||
import { kebabCaseForAlpha } from "../tokens/config/kebabCase";
|
||||
import { breakpointsTokenConfig } from "../tokens/darkside/tokens/breakpoints";
|
||||
import { breakpointTokenConfig } from "../tokens/darkside/tokens/breakpoint";
|
||||
|
||||
const transformedTokens = Object.fromEntries(
|
||||
Object.entries(TokensBuild)
|
||||
@@ -29,26 +29,26 @@ const nonColorTokens = [
|
||||
const colorTokensEntries = Object.entries(transformedTokens).filter(([key]) => {
|
||||
return !nonColorTokens.find((prefix) => key.toLowerCase().includes(prefix));
|
||||
});
|
||||
const colors = Object.fromEntries(colorTokensEntries);
|
||||
const colors = Object.fromEntries(colorTokensEntries) as Record<string, string>;
|
||||
|
||||
export const config = {
|
||||
theme: {
|
||||
colors,
|
||||
screens: {
|
||||
sm: breakpointsTokenConfig.breakpoint.sm.value,
|
||||
md: breakpointsTokenConfig.breakpoint.md.value,
|
||||
lg: breakpointsTokenConfig.breakpoint.lg.value,
|
||||
xl: breakpointsTokenConfig.breakpoint.xl.value,
|
||||
"2xl": breakpointsTokenConfig.breakpoint["2xl"].value,
|
||||
},
|
||||
colors: prefixTokens(colors),
|
||||
screens: prefixTokens({
|
||||
sm: breakpointTokenConfig.breakpoint.sm.value,
|
||||
md: breakpointTokenConfig.breakpoint.md.value,
|
||||
lg: breakpointTokenConfig.breakpoint.lg.value,
|
||||
xl: breakpointTokenConfig.breakpoint.xl.value,
|
||||
"2xl": breakpointTokenConfig.breakpoint["2xl"].value,
|
||||
}),
|
||||
extend: {
|
||||
shadow: extractTokensForCategory("shadow"),
|
||||
fontWeight: extractTokensForCategory("font-weight"),
|
||||
fontSize: extractTokensForCategory("font-size"),
|
||||
lineHeight: extractTokensForCategory("font-line-height"),
|
||||
fontFamily: extractTokensForCategory("font-family"),
|
||||
borderRadius: extractTokensForCategory("border-radius"),
|
||||
opacity: extractTokensForCategory("opacity"),
|
||||
boxShadow: prefixTokens(extractTokensForCategory("shadow")),
|
||||
fontWeight: prefixTokens(extractTokensForCategory("font-weight")),
|
||||
fontSize: prefixTokens(extractTokensForCategory("font-size")),
|
||||
lineHeight: prefixTokens(extractTokensForCategory("font-line-height")),
|
||||
fontFamily: prefixTokens(extractTokensForCategory("font-family")),
|
||||
borderRadius: prefixTokens(extractTokensForCategory("border-radius")),
|
||||
opacity: prefixTokens(extractTokensForCategory("opacity")),
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -70,3 +70,16 @@ export function extractTokensForCategory(tokenName: string) {
|
||||
|
||||
return Object.fromEntries(tokens);
|
||||
}
|
||||
|
||||
/**
|
||||
* Prefixes all keys in a token object with "ax-" to avoid conflicts with TailwindCSS
|
||||
* While making the token more verbose, it communicates better that the token is from Aksel and not locally defined.
|
||||
*/
|
||||
function prefixTokens(tokens: Record<string, string>) {
|
||||
const withPrefix: Record<string, string> = {};
|
||||
|
||||
for (const [key, value] of Object.entries(tokens)) {
|
||||
withPrefix[`ax-${key}`] = value;
|
||||
}
|
||||
return withPrefix;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"description": "Tailwind config based on @navikt/ds-tokens",
|
||||
"author": "Aksel | Nav designsystem team",
|
||||
"keywords": [
|
||||
@@ -10,7 +10,8 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"tailwind.config.js",
|
||||
"tailwind.config.d.ts"
|
||||
"tailwind.config.d.ts",
|
||||
"tailwind.darkside.config.js"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsx ./src && yarn build:darkside",
|
||||
@@ -24,7 +25,7 @@
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^7.12.1",
|
||||
"@navikt/ds-tokens": "^7.13.0",
|
||||
"color": "4.2.3",
|
||||
"lodash": "^4.17.21",
|
||||
"tailwindcss": "^3.3.3",
|
||||
@@ -48,6 +49,16 @@
|
||||
"types": "./tailwind.config.d.ts",
|
||||
"default": "./tailwind.config.js"
|
||||
}
|
||||
},
|
||||
"./darkside-tw3": {
|
||||
"import": {
|
||||
"types": "./tailwind.config.d.ts",
|
||||
"default": "./tailwind.darkside.config.js"
|
||||
},
|
||||
"require": {
|
||||
"types": "./tailwind.config.d.ts",
|
||||
"default": "./tailwind.darkside.config.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,9 @@
|
||||
# @navikt/ds-tokens
|
||||
|
||||
## 7.13.0
|
||||
|
||||
## 7.12.2
|
||||
|
||||
## 7.12.1
|
||||
|
||||
## 7.12.0
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import fs from "fs";
|
||||
import { bundle } from "lightningcss";
|
||||
import StyleDictionary from "style-dictionary";
|
||||
import { DesignTokens, Filter } from "style-dictionary/types";
|
||||
import { ColorRolesList } from "../types";
|
||||
import {
|
||||
formatCJS,
|
||||
formatES6,
|
||||
@@ -13,210 +15,242 @@ import {
|
||||
darkModeTokens,
|
||||
lightModeTokens,
|
||||
rootTokens,
|
||||
semanticRoleTokensWithGlobalReference,
|
||||
} from "./tokens.config";
|
||||
import { mergeConfigs, tokensWithPrefix } from "./tokens.util";
|
||||
import {
|
||||
globalDarkTokens,
|
||||
globalLightTokens,
|
||||
} from "./tokens/colors/global.tokens";
|
||||
import { semanticTokensForRole } from "./tokens/colors/semantic-role.tokens";
|
||||
import { semanticThemedBaseTokens } from "./tokens/colors/semantic-themed-base.tokens";
|
||||
|
||||
/* Temporary project location */
|
||||
const DARKSIDE_DIST = "./dist/darkside/";
|
||||
|
||||
const filenames = {
|
||||
light: {
|
||||
css: "light-tokens.css",
|
||||
js: "tokens.js",
|
||||
ts: "tokens.d.ts",
|
||||
},
|
||||
dark: {
|
||||
css: "dark-tokens.css",
|
||||
},
|
||||
root: {
|
||||
css: "root-tokens.css",
|
||||
},
|
||||
};
|
||||
/* Global accumulator for built CSS-files */
|
||||
const bundledCSSFiles: string[] = [];
|
||||
|
||||
main();
|
||||
|
||||
/**
|
||||
* StyleDictionary configuration
|
||||
* This configuration will generate tokens for CSS, JS and TS.
|
||||
* This build will generate tokens for CSS, JS and TS.
|
||||
* The CSS tokens will be exported as CSS variables.
|
||||
* The JS and TS tokens will be exported as an object with the token name as key and the CSS variable as value.
|
||||
*
|
||||
* Future additions (not needed for testing):
|
||||
* - Shadows
|
||||
* - Typography
|
||||
* - Breakpoints
|
||||
*
|
||||
*
|
||||
* @note We currrently avoid exporting 'static' tokens, as this step might not be needed.
|
||||
* In the current implementation we don't account for light and dark mode for static exports. This will need to be added if we want static exports.
|
||||
*/
|
||||
const SDictionaryLightMode = new StyleDictionary({
|
||||
tokens: lightModeTokens(),
|
||||
platforms: {
|
||||
css: {
|
||||
transformGroup: "css",
|
||||
transforms: ["name/alpha-suffix"],
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "light-tokens.css",
|
||||
format: "css/variables",
|
||||
options: {
|
||||
outputReferences: true,
|
||||
selector: ":root, :host, .light, .light-theme",
|
||||
async function main() {
|
||||
/**
|
||||
* Global tokens only for "light"-mode
|
||||
* We set this to :root and :host as to make this the fallback and default.
|
||||
*/
|
||||
await buildCSSBundleForTokens({
|
||||
tokens: tokensWithPrefix(globalLightTokens),
|
||||
filename: "light-tokens.css",
|
||||
selector: ":root, :host, .light",
|
||||
});
|
||||
|
||||
/**
|
||||
* Global tokens only for "dark"-mode
|
||||
*/
|
||||
await buildCSSBundleForTokens({
|
||||
tokens: tokensWithPrefix(globalDarkTokens),
|
||||
filename: "dark-tokens.css",
|
||||
selector: ".dark",
|
||||
});
|
||||
|
||||
/**
|
||||
* Semantic "root" tokens for "light"-mode
|
||||
* This includes shadows, default backgrounds etc
|
||||
*/
|
||||
await buildCSSBundleForTokens({
|
||||
tokens: lightModeTokens(false),
|
||||
filename: "semantic-light-tokens.css",
|
||||
selector: ":root, :host, .light",
|
||||
filter: async (token) => token.type !== "global-color",
|
||||
});
|
||||
|
||||
/**
|
||||
* Semantic "root" tokens for "dark"-mode
|
||||
* This includes shadows, default backgrounds etc
|
||||
*/
|
||||
await buildCSSBundleForTokens({
|
||||
tokens: darkModeTokens(false),
|
||||
filename: "semantic-dark-tokens.css",
|
||||
selector: ".dark, .dark-theme",
|
||||
filter: async (token) => token.type !== "global-color",
|
||||
});
|
||||
|
||||
/**
|
||||
* Semantic tokens for all modes.
|
||||
* Since the "global" layers is updated based on light/dark, we set this to also updated with
|
||||
* `.light, .dark` selectors so that they inherit the correct values.
|
||||
*/
|
||||
await buildCSSBundleForTokens({
|
||||
tokens: semanticRoleTokensWithGlobalReference(),
|
||||
filename: "semantic-tokens.css",
|
||||
selector: ":root, :host, .light, .dark",
|
||||
filter: async (token) => token.type !== "global-color",
|
||||
});
|
||||
|
||||
/**
|
||||
* Non-themable tokens like space, typo and breakpoints
|
||||
*/
|
||||
await buildCSSBundleForTokens({
|
||||
tokens: rootTokens(),
|
||||
filename: "root-tokens.css",
|
||||
selector: ":root, :host",
|
||||
});
|
||||
|
||||
await buildThemedRolesCSS();
|
||||
await buildOtherTokenFormats();
|
||||
|
||||
fs.writeFileSync(
|
||||
`${DARKSIDE_DIST}tokens.css`,
|
||||
bundledCSSFiles.map((path) => `@import "${path}";`).join("\n"),
|
||||
);
|
||||
|
||||
const { code } = bundle({
|
||||
filename: `${DARKSIDE_DIST}tokens.css`,
|
||||
minify: false,
|
||||
});
|
||||
|
||||
fs.writeFileSync(`${DARKSIDE_DIST}tokens.css`, code);
|
||||
|
||||
/* Cleanup temp-files */
|
||||
bundledCSSFiles.forEach((path) => fs.unlinkSync(`${DARKSIDE_DIST}${path}`));
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates smaller bundles for each role
|
||||
* ```
|
||||
* [data-color-role="accent"] {
|
||||
* --ax-bg-soft: var(--ax-bg-accent-soft);
|
||||
* --ax-bg-softA: var(--ax-bg-accent-softA);
|
||||
* --ax-bg-moderate: var(--ax-bg-accent-moderate);
|
||||
* ...
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
async function buildThemedRolesCSS() {
|
||||
for (const role of ColorRolesList) {
|
||||
const config = [
|
||||
globalLightTokens,
|
||||
semanticTokensForRole(role),
|
||||
semanticThemedBaseTokens(role),
|
||||
];
|
||||
|
||||
await buildCSSBundleForTokens({
|
||||
/* mergeConfigs is strictly typed, so we use any until we potentially update types */
|
||||
tokens: tokensWithPrefix(mergeConfigs(config as any)),
|
||||
filename: `role-${role}.css`,
|
||||
selector: `[data-color-role=${role}]`,
|
||||
filter: async (token) => token.type === "themed-role",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function buildOtherTokenFormats() {
|
||||
const SDDictionaryNonCSSFormats = new StyleDictionary({
|
||||
tokens: allTokens(),
|
||||
platforms: {
|
||||
/* We don't want to build any files with CSS here, but have to add this for the formatting support */
|
||||
css: {
|
||||
transformGroup: "css",
|
||||
transforms: ["name/alpha-suffix"],
|
||||
files: [
|
||||
{
|
||||
format: "css/variables",
|
||||
options: {
|
||||
outputReferences: true,
|
||||
outputReferenceFallbacks: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const SDictionaryDarkMode = new StyleDictionary({
|
||||
tokens: darkModeTokens(),
|
||||
platforms: {
|
||||
css: {
|
||||
transformGroup: "css",
|
||||
transforms: ["name/alpha-suffix"],
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "dark-tokens.css",
|
||||
format: "css/variables",
|
||||
options: {
|
||||
outputReferences: true,
|
||||
selector: ".dark, .dark-theme",
|
||||
],
|
||||
},
|
||||
js: {
|
||||
transformGroup: "js",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.js",
|
||||
format: "format-ES6",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const SDRootTokens = new StyleDictionary({
|
||||
tokens: rootTokens(),
|
||||
platforms: {
|
||||
css: {
|
||||
transformGroup: "css",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "root-tokens.css",
|
||||
format: "css/variables",
|
||||
options: {
|
||||
outputReferences: true,
|
||||
outputReferenceFallbacks: true,
|
||||
selector: ":root, :host",
|
||||
{
|
||||
destination: "tokens-cjs.js",
|
||||
format: "format-CJS",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const SDDictionaryNonCSSFormats = new StyleDictionary({
|
||||
tokens: allTokens(),
|
||||
platforms: {
|
||||
/* We don't want to build any files with CSS here, only add the formatting support */
|
||||
css: {
|
||||
transformGroup: "css",
|
||||
transforms: ["name/alpha-suffix"],
|
||||
files: [
|
||||
{
|
||||
format: "css/variables",
|
||||
options: {
|
||||
outputReferences: true,
|
||||
outputReferenceFallbacks: true,
|
||||
{
|
||||
destination: "tokens.d.ts",
|
||||
format: "format-ES6",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
js: {
|
||||
transformGroup: "js",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.js",
|
||||
format: "format-ES6",
|
||||
},
|
||||
{
|
||||
destination: "tokens-cjs.js",
|
||||
format: "format-CJS",
|
||||
},
|
||||
{
|
||||
destination: "tokens.d.ts",
|
||||
format: "format-ES6",
|
||||
},
|
||||
],
|
||||
},
|
||||
// jsStatic: {
|
||||
// transformGroup: "js",
|
||||
// buildPath: `${DARKSIDE_DIST}static/`,
|
||||
// files: [
|
||||
// {
|
||||
// destination: "tokens.js",
|
||||
// format: "format-ES6-static",
|
||||
// },
|
||||
// {
|
||||
// destination: "tokens-cjs.js",
|
||||
// format: "format-CJS-static",
|
||||
// },
|
||||
// {
|
||||
// destination: "tokens.d.ts",
|
||||
// format: "format-ES6-static",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
scss: {
|
||||
transformGroup: "scss",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
],
|
||||
},
|
||||
// jsStatic: {
|
||||
// transformGroup: "js",
|
||||
// buildPath: `${DARKSIDE_DIST}static/`,
|
||||
// files: [
|
||||
// {
|
||||
// destination: "tokens.js",
|
||||
// format: "format-ES6-static",
|
||||
// },
|
||||
// {
|
||||
// destination: "tokens-cjs.js",
|
||||
// format: "format-CJS-static",
|
||||
// },
|
||||
// {
|
||||
// destination: "tokens.d.ts",
|
||||
// format: "format-ES6-static",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
scss: {
|
||||
transformGroup: "scss",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.scss",
|
||||
format: "format-SCSS",
|
||||
},
|
||||
],
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.scss",
|
||||
format: "format-SCSS",
|
||||
},
|
||||
],
|
||||
},
|
||||
// scssStatic: {
|
||||
// transformGroup: "scss",
|
||||
// buildPath: `${DARKSIDE_DIST}static/`,
|
||||
// files: [
|
||||
// {
|
||||
// destination: "tokens.scss",
|
||||
// format: "scss/variables",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
less: {
|
||||
transformGroup: "less",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.less",
|
||||
format: "format-LESS",
|
||||
},
|
||||
],
|
||||
},
|
||||
// lessStatic: {
|
||||
// transformGroup: "less",
|
||||
// buildPath: `${DARKSIDE_DIST}static/`,
|
||||
// files: [
|
||||
// {
|
||||
// destination: "tokens.less",
|
||||
// format: "less/variables",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
},
|
||||
// scssStatic: {
|
||||
// transformGroup: "scss",
|
||||
// buildPath: `${DARKSIDE_DIST}static/`,
|
||||
// files: [
|
||||
// {
|
||||
// destination: "tokens.scss",
|
||||
// format: "scss/variables",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
less: {
|
||||
transformGroup: "less",
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.less",
|
||||
format: "format-LESS",
|
||||
},
|
||||
],
|
||||
},
|
||||
// lessStatic: {
|
||||
// transformGroup: "less",
|
||||
// buildPath: `${DARKSIDE_DIST}static/`,
|
||||
// files: [
|
||||
// {
|
||||
// destination: "tokens.less",
|
||||
// format: "less/variables",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const main = async () => {
|
||||
await Promise.all([
|
||||
SDictionaryLightMode.hasInitialized,
|
||||
SDictionaryDarkMode.hasInitialized,
|
||||
SDRootTokens.hasInitialized,
|
||||
SDDictionaryNonCSSFormats.hasInitialized,
|
||||
]);
|
||||
await Promise.all([SDDictionaryNonCSSFormats.hasInitialized]);
|
||||
|
||||
SDictionaryLightMode.registerTransform(transformCSS);
|
||||
SDictionaryDarkMode.registerTransform(transformCSS);
|
||||
SDDictionaryNonCSSFormats.registerTransform(transformCSS);
|
||||
|
||||
/**
|
||||
@@ -254,28 +288,50 @@ const main = async () => {
|
||||
format: formatLESS,
|
||||
});
|
||||
|
||||
await Promise.all([
|
||||
SDictionaryLightMode.buildAllPlatforms(),
|
||||
SDictionaryDarkMode.buildAllPlatforms(),
|
||||
SDRootTokens.buildAllPlatforms(),
|
||||
SDDictionaryNonCSSFormats.buildAllPlatforms(),
|
||||
]);
|
||||
await SDDictionaryNonCSSFormats.buildAllPlatforms();
|
||||
}
|
||||
|
||||
const importPaths = Object.values(filenames)
|
||||
.map((scope) => scope.css)
|
||||
.filter(Boolean);
|
||||
|
||||
fs.writeFileSync(
|
||||
`${DARKSIDE_DIST}tokens.css`,
|
||||
importPaths.map((path) => `@import "${path}";`).join("\n"),
|
||||
);
|
||||
|
||||
const { code } = bundle({
|
||||
filename: `${DARKSIDE_DIST}tokens.css`,
|
||||
minify: false,
|
||||
/**
|
||||
* Utility function to build a CSS bundle for a given set of tokens.
|
||||
*/
|
||||
async function buildCSSBundleForTokens({
|
||||
tokens,
|
||||
filename,
|
||||
selector,
|
||||
filter,
|
||||
}: {
|
||||
filename: string;
|
||||
selector: string;
|
||||
tokens: DesignTokens;
|
||||
filter?: Filter["filter"];
|
||||
}) {
|
||||
const SDictionary = new StyleDictionary({
|
||||
tokens,
|
||||
/* Since we end up filtering out references for some tokens, we filter out warnings */
|
||||
log: { warnings: "disabled" },
|
||||
platforms: {
|
||||
[filename]: {
|
||||
transformGroup: "css",
|
||||
transforms: ["name/alpha-suffix"],
|
||||
buildPath: DARKSIDE_DIST,
|
||||
files: [
|
||||
{
|
||||
destination: filename,
|
||||
format: "css/variables",
|
||||
filter,
|
||||
options: {
|
||||
outputReferences: true,
|
||||
selector,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
fs.writeFileSync(`${DARKSIDE_DIST}tokens.css`, code);
|
||||
};
|
||||
await Promise.all([SDictionary.hasInitialized]);
|
||||
|
||||
main();
|
||||
SDictionary.registerTransform(transformCSS);
|
||||
await SDictionary.buildAllPlatforms();
|
||||
bundledCSSFiles.push(filename);
|
||||
}
|
||||
@@ -92,7 +92,7 @@ function createTokenValue(token: TransformedToken): string {
|
||||
/*
|
||||
* Breakpoints can in most cases not be used as variables, so we need to return the value directly.
|
||||
*/
|
||||
if ((token.type as TokenTypes) === "global-breakpoints") {
|
||||
if ((token.type as TokenTypes) === "global-breakpoint") {
|
||||
return token.value ?? token.$value;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import { describe, expect, test } from "vitest";
|
||||
import { radiusTokenConfig } from "../tokens/border-radius";
|
||||
import {
|
||||
globalColorDarkModeConfig,
|
||||
globalColorLightModeConfig,
|
||||
} from "../tokens/global";
|
||||
import { radiusTokenConfig } from "../tokens/radius";
|
||||
import { semanticTokenConfig } from "../tokens/semantic";
|
||||
import { semanticTokensForAllRolesConfig } from "../tokens/semantic-roles";
|
||||
globalDarkTokens,
|
||||
globalLightTokens,
|
||||
} from "../tokens/colors/global.tokens";
|
||||
import { semanticTokensForAllRoles } from "../tokens/colors/semantic-role.tokens";
|
||||
import { semanticRootTokens } from "../tokens/colors/semantic-root.tokens";
|
||||
import { spaceTokenConfig } from "../tokens/space";
|
||||
import { textContrastTokenConfig } from "../tokens/text-contrast";
|
||||
|
||||
const configKeysWithGroup = ["value", "type", "group"];
|
||||
const configKeys = ["value", "type"];
|
||||
@@ -15,44 +14,28 @@ const configKeys = ["value", "type"];
|
||||
describe("Validate token configurations", () => {
|
||||
test(`Semantic tokens lightmode`, () => {
|
||||
expect(
|
||||
validateConfig(semanticTokenConfig("light"), configKeysWithGroup),
|
||||
validateConfig(semanticRootTokens("light"), configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Semantic tokens darkmode`, () => {
|
||||
expect(
|
||||
validateConfig(semanticTokenConfig("dark"), configKeysWithGroup),
|
||||
validateConfig(semanticRootTokens("dark"), configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Semantic tokens for all roles: Lightmode`, () => {
|
||||
test(`Semantic tokens for all roles`, () => {
|
||||
expect(
|
||||
validateConfig(semanticTokensForAllRolesConfig(), configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Semantic tokens for all roles: Darkmode`, () => {
|
||||
expect(
|
||||
validateConfig(semanticTokensForAllRolesConfig(), configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Text-contrast tokens`, () => {
|
||||
expect(
|
||||
validateConfig(textContrastTokenConfig, configKeysWithGroup),
|
||||
validateConfig(semanticTokensForAllRoles(), configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Global lightmode scale`, () => {
|
||||
expect(
|
||||
validateConfig(globalColorLightModeConfig, configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
expect(validateConfig(globalLightTokens, configKeysWithGroup)).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Global darkmode scale`, () => {
|
||||
expect(
|
||||
validateConfig(globalColorDarkModeConfig, configKeysWithGroup),
|
||||
).toBeTruthy();
|
||||
expect(validateConfig(globalDarkTokens, configKeysWithGroup)).toBeTruthy();
|
||||
});
|
||||
|
||||
test(`Space scale`, () => {
|
||||
|
||||
@@ -1,87 +1,70 @@
|
||||
import _ from "lodash";
|
||||
import { mergeConfigs, tokensWithPrefix } from "./tokens.util";
|
||||
import { radiusTokenConfig } from "./tokens/border-radius";
|
||||
import { breakpointTokenConfig } from "./tokens/breakpoint";
|
||||
import {
|
||||
StyleDictionaryTokenConfig,
|
||||
TokenTypes,
|
||||
tokensWithPrefix,
|
||||
} from "./tokens.util";
|
||||
import { breakpointsTokenConfig } from "./tokens/breakpoints";
|
||||
globalDarkTokens,
|
||||
globalLightTokens,
|
||||
} from "./tokens/colors/global.tokens";
|
||||
import { semanticTokensForAllRoles } from "./tokens/colors/semantic-role.tokens";
|
||||
import { semanticRootTokens } from "./tokens/colors/semantic-root.tokens";
|
||||
import { fontTokenConfig } from "./tokens/font";
|
||||
import {
|
||||
globalColorDarkModeConfig,
|
||||
globalColorLightModeConfig,
|
||||
} from "./tokens/global";
|
||||
import { opacityTokenConfig } from "./tokens/opacity";
|
||||
import { radiusTokenConfig } from "./tokens/radius";
|
||||
import { semanticTokenConfig } from "./tokens/semantic";
|
||||
import { semanticTokensForAllRolesConfig } from "./tokens/semantic-roles";
|
||||
import { shadowTokenConfig } from "./tokens/shadow";
|
||||
import { spaceTokenConfig } from "./tokens/space";
|
||||
import { textContrastTokenConfig } from "./tokens/text-contrast";
|
||||
|
||||
const mergeConfigs = (
|
||||
configs: StyleDictionaryTokenConfig<TokenTypes>[],
|
||||
): StyleDictionaryTokenConfig<TokenTypes> => {
|
||||
return configs.reduce((acc, config) => _.merge(acc, config), {});
|
||||
export const lightModeTokens = (withSemanticRoles = true) => {
|
||||
const config = [
|
||||
shadowTokenConfig("light"),
|
||||
opacityTokenConfig("light"),
|
||||
withSemanticRoles ? semanticTokensForAllRoles() : {},
|
||||
semanticRootTokens("light"),
|
||||
globalLightTokens,
|
||||
];
|
||||
|
||||
return tokensWithPrefix(mergeConfigs(config));
|
||||
};
|
||||
|
||||
export const darkModeTokens = (withSemanticRoles = true) => {
|
||||
const config = [
|
||||
shadowTokenConfig("dark"),
|
||||
opacityTokenConfig("dark"),
|
||||
withSemanticRoles ? semanticTokensForAllRoles() : {},
|
||||
semanticRootTokens("dark"),
|
||||
globalDarkTokens,
|
||||
];
|
||||
|
||||
return tokensWithPrefix(mergeConfigs(config));
|
||||
};
|
||||
|
||||
export const semanticRoleTokensWithGlobalReference = () => {
|
||||
const config = [globalLightTokens, semanticTokensForAllRoles()];
|
||||
|
||||
return tokensWithPrefix(mergeConfigs(config));
|
||||
};
|
||||
|
||||
/**
|
||||
* Collection of configs for:
|
||||
* - Global lightmode colors
|
||||
* - Semantic tokens for each color-role
|
||||
* - Semantic tokens for standalone colors
|
||||
*/
|
||||
export const lightModeTokens = () => {
|
||||
return tokensWithPrefix(
|
||||
mergeConfigs([
|
||||
shadowTokenConfig("light"),
|
||||
opacityTokenConfig("light"),
|
||||
semanticTokensForAllRolesConfig(),
|
||||
textContrastTokenConfig,
|
||||
semanticTokenConfig("light"),
|
||||
globalColorLightModeConfig,
|
||||
]),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Collection of configs for:
|
||||
* - Global darkmode colors
|
||||
*/
|
||||
export const darkModeTokens = () => {
|
||||
return tokensWithPrefix(
|
||||
mergeConfigs([
|
||||
shadowTokenConfig("dark"),
|
||||
opacityTokenConfig("dark"),
|
||||
semanticTokensForAllRolesConfig(),
|
||||
textContrastTokenConfig,
|
||||
semanticTokenConfig("dark"),
|
||||
globalColorDarkModeConfig,
|
||||
]),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Collection of configs for:
|
||||
* - Space
|
||||
* - Radius
|
||||
* We deliberately extract space and border-radius tokens from other "root" tokens like breakline, font etc
|
||||
* so we can use the fuction for creating Figma-variables
|
||||
*/
|
||||
export const scaleTokens = () => {
|
||||
return tokensWithPrefix(mergeConfigs([spaceTokenConfig, radiusTokenConfig]));
|
||||
const config = [spaceTokenConfig, radiusTokenConfig];
|
||||
|
||||
return tokensWithPrefix(mergeConfigs(config));
|
||||
};
|
||||
|
||||
export const rootTokens = () => {
|
||||
return tokensWithPrefix(
|
||||
mergeConfigs([scaleTokens().ax, breakpointsTokenConfig, fontTokenConfig]),
|
||||
);
|
||||
const config = [scaleTokens().ax, breakpointTokenConfig, fontTokenConfig];
|
||||
|
||||
return tokensWithPrefix(mergeConfigs(config));
|
||||
};
|
||||
|
||||
export const allTokens = () => {
|
||||
return tokensWithPrefix(
|
||||
mergeConfigs([
|
||||
lightModeTokens().ax,
|
||||
scaleTokens().ax,
|
||||
breakpointsTokenConfig,
|
||||
fontTokenConfig,
|
||||
]),
|
||||
);
|
||||
const config = [
|
||||
lightModeTokens().ax,
|
||||
scaleTokens().ax,
|
||||
breakpointTokenConfig,
|
||||
fontTokenConfig,
|
||||
];
|
||||
|
||||
return tokensWithPrefix(mergeConfigs(config));
|
||||
};
|
||||
@@ -1,3 +1,4 @@
|
||||
import _ from "lodash";
|
||||
import type { GlobalColorRoles, SemanticColorRoles } from "../types";
|
||||
|
||||
export type GlobalColorEntry = {
|
||||
@@ -13,7 +14,7 @@ export type TokenTypes =
|
||||
| "global-color"
|
||||
| "global-radius"
|
||||
| "global-space"
|
||||
| "global-breakpoints"
|
||||
| "global-breakpoint"
|
||||
| "global-font";
|
||||
|
||||
export type SemanticTokenGroups = "background" | "border" | "text";
|
||||
@@ -85,3 +86,9 @@ export type StyleDictionaryTokenConfig<T extends TokenTypes> = {
|
||||
export const tokensWithPrefix = <T>(input: T): Record<"ax", T> => {
|
||||
return { ax: input };
|
||||
};
|
||||
|
||||
export const mergeConfigs = (
|
||||
configs: StyleDictionaryTokenConfig<TokenTypes>[],
|
||||
): StyleDictionaryTokenConfig<TokenTypes> => {
|
||||
return configs.reduce((acc, config) => _.merge(acc, config), {});
|
||||
};
|
||||
File renamed without changes.
@@ -0,0 +1,20 @@
|
||||
import { type BreakPointKeys } from "../../types";
|
||||
import { type StyleDictionaryToken } from "../tokens.util";
|
||||
|
||||
export const breakpointTokenConfig = {
|
||||
breakpoint: {
|
||||
xs: { value: "0", type: "global-breakpoint" },
|
||||
sm: { value: "480px", type: "global-breakpoint" },
|
||||
"sm-down": { value: "479px", type: "global-breakpoint" },
|
||||
md: { value: "768px", type: "global-breakpoint" },
|
||||
"md-down": { value: "767px", type: "global-breakpoint" },
|
||||
lg: { value: "1024px", type: "global-breakpoint" },
|
||||
"lg-down": { value: "1023px", type: "global-breakpoint" },
|
||||
xl: { value: "1280px", type: "global-breakpoint" },
|
||||
"xl-down": { value: "1279px", type: "global-breakpoint" },
|
||||
"2xl": { value: "1440px", type: "global-breakpoint" },
|
||||
"2xl-down": { value: "1439px", type: "global-breakpoint" },
|
||||
},
|
||||
} satisfies {
|
||||
breakpoint: Record<BreakPointKeys, StyleDictionaryToken<"global-breakpoint">>;
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
import { type BreakPointKeys } from "../../types";
|
||||
import { type StyleDictionaryToken } from "../tokens.util";
|
||||
|
||||
export const breakpointsTokenConfig = {
|
||||
breakpoint: {
|
||||
xs: { value: "0", type: "global-breakpoints" },
|
||||
sm: { value: "480px", type: "global-breakpoints" },
|
||||
"sm-down": { value: "479px", type: "global-breakpoints" },
|
||||
md: { value: "768px", type: "global-breakpoints" },
|
||||
"md-down": { value: "767px", type: "global-breakpoints" },
|
||||
lg: { value: "1024px", type: "global-breakpoints" },
|
||||
"lg-down": { value: "1023px", type: "global-breakpoints" },
|
||||
xl: { value: "1280px", type: "global-breakpoints" },
|
||||
"xl-down": { value: "1279px", type: "global-breakpoints" },
|
||||
"2xl": { value: "1440px", type: "global-breakpoints" },
|
||||
"2xl-down": { value: "1439px", type: "global-breakpoints" },
|
||||
},
|
||||
} satisfies {
|
||||
breakpoint: Record<
|
||||
BreakPointKeys,
|
||||
StyleDictionaryToken<"global-breakpoints">
|
||||
>;
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
import { GlobalColorRoles, GlobalColorScale } from "../../../types";
|
||||
import { GlobalColorEntry } from "../../tokens.util";
|
||||
|
||||
export type GlobalConfigWithAlpha = Record<
|
||||
Extract<GlobalColorRoles, "neutral">,
|
||||
Record<GlobalColorScale, GlobalColorEntry>
|
||||
> &
|
||||
Record<
|
||||
Exclude<GlobalColorRoles, "neutral">,
|
||||
Record<Exclude<GlobalColorScale, "000">, GlobalColorEntry>
|
||||
>;
|
||||
|
||||
export type GlobalConfigWithoutAlpha = Record<
|
||||
GlobalColorRoles,
|
||||
Record<
|
||||
Exclude<GlobalColorScale, "000" | "100A" | "200A" | "300A" | "400A">,
|
||||
GlobalColorEntry
|
||||
>
|
||||
> & {
|
||||
neutral: {
|
||||
[key in Extract<GlobalColorScale, "000">]: GlobalColorEntry;
|
||||
};
|
||||
};
|
||||
+13
-25
@@ -1,23 +1,8 @@
|
||||
import Color from "colorjs.io";
|
||||
import {
|
||||
type ColorTheme,
|
||||
type GlobalColorRoles,
|
||||
type GlobalColorScale,
|
||||
} from "../../types";
|
||||
import { type GlobalColorEntry } from "../tokens.util";
|
||||
import { globalColorDarkModeConfigWithoutAlpha } from "./global-dark";
|
||||
import { globalColorLightModeConfigWithoutAlpha } from "./global-light";
|
||||
import { semanticTokenConfig } from "./semantic";
|
||||
|
||||
export const globalColorDarkModeConfig = globalColorConfigWithAlphaTokens(
|
||||
globalColorDarkModeConfigWithoutAlpha,
|
||||
"dark",
|
||||
);
|
||||
|
||||
export const globalColorLightModeConfig = globalColorConfigWithAlphaTokens(
|
||||
globalColorLightModeConfigWithoutAlpha,
|
||||
"light",
|
||||
);
|
||||
import { ColorTheme, GlobalColorRoles, GlobalColorScale } from "../../../types";
|
||||
import { GlobalColorEntry } from "../../tokens.util";
|
||||
import { GlobalConfigWithoutAlpha } from "./colors.types";
|
||||
import { semanticRootTokens } from "./semantic-root.tokens";
|
||||
|
||||
type GlobalConfigWithAlpha = Record<
|
||||
Extract<GlobalColorRoles, "neutral">,
|
||||
@@ -32,10 +17,13 @@ type GlobalConfigWithAlpha = Record<
|
||||
* To avoid having to use 3rd party websites for generating alpha tokens,
|
||||
* we add alpha tokens by calulating them ourselves.
|
||||
*/
|
||||
function globalColorConfigWithAlphaTokens(
|
||||
globalConfig: typeof globalColorLightModeConfigWithoutAlpha,
|
||||
theme: ColorTheme,
|
||||
): GlobalConfigWithAlpha {
|
||||
export function globalConfigWithAlphaTokens({
|
||||
config: globalConfig,
|
||||
theme,
|
||||
}: {
|
||||
config: GlobalConfigWithoutAlpha;
|
||||
theme: ColorTheme;
|
||||
}): GlobalConfigWithAlpha {
|
||||
const localConfig = structuredClone(globalConfig) as GlobalConfigWithAlpha;
|
||||
|
||||
Object.keys(globalConfig).forEach((key) => {
|
||||
@@ -63,8 +51,8 @@ function globalColorConfigWithAlphaTokens(
|
||||
return localConfig;
|
||||
}
|
||||
|
||||
export function createAlphaColor(targetColor: string, theme: ColorTheme) {
|
||||
const backgroundColor = semanticTokenConfig(theme).bg.default.value;
|
||||
function createAlphaColor(targetColor: string, theme: ColorTheme) {
|
||||
const backgroundColor = semanticRootTokens(theme).bg.default.value;
|
||||
|
||||
const [r, g, b, a] = getAlphaColor(
|
||||
new Color(targetColor).to("srgb").coords,
|
||||
@@ -0,0 +1,299 @@
|
||||
import { GlobalConfigWithoutAlpha } from "./colors.types";
|
||||
import { globalConfigWithAlphaTokens } from "./create-alpha";
|
||||
|
||||
/**
|
||||
* Global token-layer for light mode
|
||||
*/
|
||||
const globalLightTokensNoAlpha: GlobalConfigWithoutAlpha = {
|
||||
neutral: {
|
||||
"000": {
|
||||
value: "white",
|
||||
type: "global-color",
|
||||
group: "neutral",
|
||||
},
|
||||
"100": { value: "#f5f6f7", type: "global-color", group: "neutral" },
|
||||
"200": { value: "#ecedef", type: "global-color", group: "neutral" },
|
||||
"300": { value: "#e1e3e7", type: "global-color", group: "neutral" },
|
||||
"400": { value: "#cfd3d8", type: "global-color", group: "neutral" },
|
||||
"500": { value: "#818997", type: "global-color", group: "neutral" },
|
||||
"600": { value: "#6f7785", type: "global-color", group: "neutral" },
|
||||
"700": { value: "#5d6573", type: "global-color", group: "neutral" },
|
||||
"800": { value: "#555d6a", type: "global-color", group: "neutral" },
|
||||
"900": { value: "#49515e", type: "global-color", group: "neutral" },
|
||||
"1000": { value: "#202733", type: "global-color", group: "neutral" },
|
||||
},
|
||||
accent: {
|
||||
"100": { value: "#f1f7ff", type: "global-color", group: "accent" },
|
||||
"200": { value: "#e4eeff", type: "global-color", group: "accent" },
|
||||
"300": { value: "#d4e5fd", type: "global-color", group: "accent" },
|
||||
"400": { value: "#bad5fb", type: "global-color", group: "accent" },
|
||||
"500": { value: "#428ae3", type: "global-color", group: "accent" },
|
||||
"600": { value: "#2277d5", type: "global-color", group: "accent" },
|
||||
"700": { value: "#0063c1", type: "global-color", group: "accent" },
|
||||
"800": { value: "#005bb6", type: "global-color", group: "accent" },
|
||||
"900": { value: "#004ea3", type: "global-color", group: "accent" },
|
||||
"1000": { value: "#002459", type: "global-color", group: "accent" },
|
||||
},
|
||||
success: {
|
||||
"100": { value: "#e2fde8", type: "global-color", group: "success" },
|
||||
"200": { value: "#d5f6db", type: "global-color", group: "success" },
|
||||
"300": { value: "#c4edcd", type: "global-color", group: "success" },
|
||||
"400": { value: "#a8dfb4", type: "global-color", group: "success" },
|
||||
"500": { value: "#199d4f", type: "global-color", group: "success" },
|
||||
"600": { value: "#00893c", type: "global-color", group: "success" },
|
||||
"700": { value: "#007629", type: "global-color", group: "success" },
|
||||
"800": { value: "#006c1f", type: "global-color", group: "success" },
|
||||
"900": { value: "#005e0f", type: "global-color", group: "success" },
|
||||
"1000": { value: "#002e00", type: "global-color", group: "success" },
|
||||
},
|
||||
warning: {
|
||||
"100": { value: "#fff5e4", type: "global-color", group: "warning" },
|
||||
"200": { value: "#ffebc7", type: "global-color", group: "warning" },
|
||||
"300": { value: "#ffdea5", type: "global-color", group: "warning" },
|
||||
"400": { value: "#ffcb6f", type: "global-color", group: "warning" },
|
||||
"500": { value: "#e75e01", type: "global-color", group: "warning" },
|
||||
"600": { value: "#c95100", type: "global-color", group: "warning" },
|
||||
"700": { value: "#ac4400", type: "global-color", group: "warning" },
|
||||
"800": { value: "#a03e00", type: "global-color", group: "warning" },
|
||||
"900": { value: "#8c3500", type: "global-color", group: "warning" },
|
||||
"1000": { value: "#481700", type: "global-color", group: "warning" },
|
||||
},
|
||||
danger: {
|
||||
"100": { value: "#fff2f7", type: "global-color", group: "danger" },
|
||||
"200": { value: "#ffe8f0", type: "global-color", group: "danger" },
|
||||
"300": { value: "#ffd9e6", type: "global-color", group: "danger" },
|
||||
"400": { value: "#ffc2d7", type: "global-color", group: "danger" },
|
||||
"500": { value: "#ec526e", type: "global-color", group: "danger" },
|
||||
"600": { value: "#e22a49", type: "global-color", group: "danger" },
|
||||
"700": { value: "#cb0035", type: "global-color", group: "danger" },
|
||||
"800": { value: "#bc002a", type: "global-color", group: "danger" },
|
||||
"900": { value: "#a60017", type: "global-color", group: "danger" },
|
||||
"1000": { value: "#560000", type: "global-color", group: "danger" },
|
||||
},
|
||||
info: {
|
||||
"100": { value: "#eef6fc", type: "global-color", group: "info" },
|
||||
"200": { value: "#e3eff7", type: "global-color", group: "info" },
|
||||
"300": { value: "#d7e6f0", type: "global-color", group: "info" },
|
||||
"400": { value: "#c0d6e4", type: "global-color", group: "info" },
|
||||
"500": { value: "#5a8fae", type: "global-color", group: "info" },
|
||||
"600": { value: "#417da0", type: "global-color", group: "info" },
|
||||
"700": { value: "#246b91", type: "global-color", group: "info" },
|
||||
"800": { value: "#156389", type: "global-color", group: "info" },
|
||||
"900": { value: "#00557d", type: "global-color", group: "info" },
|
||||
"1000": { value: "#002942", type: "global-color", group: "info" },
|
||||
},
|
||||
"brand-magenta": {
|
||||
"100": { value: "#fbf3f6", type: "global-color", group: "brand-magenta" },
|
||||
"200": { value: "#f8eaef", type: "global-color", group: "brand-magenta" },
|
||||
"300": { value: "#f3dde5", type: "global-color", group: "brand-magenta" },
|
||||
"400": { value: "#eccad6", type: "global-color", group: "brand-magenta" },
|
||||
"500": { value: "#c26f92", type: "global-color", group: "brand-magenta" },
|
||||
"600": { value: "#b65781", type: "global-color", group: "brand-magenta" },
|
||||
"700": { value: "#a93d70", type: "global-color", group: "brand-magenta" },
|
||||
"800": { value: "#a33069", type: "global-color", group: "brand-magenta" },
|
||||
"900": { value: "#98185d", type: "global-color", group: "brand-magenta" },
|
||||
"1000": { value: "#52002b", type: "global-color", group: "brand-magenta" },
|
||||
},
|
||||
"brand-beige": {
|
||||
"100": { value: "#fff4ee", type: "global-color", group: "brand-beige" },
|
||||
"200": { value: "#fdebe0", type: "global-color", group: "brand-beige" },
|
||||
"300": { value: "#fcddcd", type: "global-color", group: "brand-beige" },
|
||||
"400": { value: "#f8c8b1", type: "global-color", group: "brand-beige" },
|
||||
"500": { value: "#c0765d", type: "global-color", group: "brand-beige" },
|
||||
"600": { value: "#a9654e", type: "global-color", group: "brand-beige" },
|
||||
"700": { value: "#915541", type: "global-color", group: "brand-beige" },
|
||||
"800": { value: "#874e3b", type: "global-color", group: "brand-beige" },
|
||||
"900": { value: "#764332", type: "global-color", group: "brand-beige" },
|
||||
"1000": { value: "#3c1f15", type: "global-color", group: "brand-beige" },
|
||||
},
|
||||
"brand-blue": {
|
||||
"100": { value: "#eef6fc", type: "global-color", group: "brand-blue" },
|
||||
"200": { value: "#e3eff7", type: "global-color", group: "brand-blue" },
|
||||
"300": { value: "#d7e6f0", type: "global-color", group: "brand-blue" },
|
||||
"400": { value: "#c0d6e4", type: "global-color", group: "brand-blue" },
|
||||
"500": { value: "#5a8fae", type: "global-color", group: "brand-blue" },
|
||||
"600": { value: "#417da0", type: "global-color", group: "brand-blue" },
|
||||
"700": { value: "#246b91", type: "global-color", group: "brand-blue" },
|
||||
"800": { value: "#156389", type: "global-color", group: "brand-blue" },
|
||||
"900": { value: "#00557d", type: "global-color", group: "brand-blue" },
|
||||
"1000": { value: "#002942", type: "global-color", group: "brand-blue" },
|
||||
},
|
||||
"meta-purple": {
|
||||
"100": { value: "#f7f5f9", type: "global-color", group: "meta-purple" },
|
||||
"200": { value: "#f0edf4", type: "global-color", group: "meta-purple" },
|
||||
"300": { value: "#e6e1ed", type: "global-color", group: "meta-purple" },
|
||||
"400": { value: "#d7cfe3", type: "global-color", group: "meta-purple" },
|
||||
"500": { value: "#9580b1", type: "global-color", group: "meta-purple" },
|
||||
"600": { value: "#846ca4", type: "global-color", group: "meta-purple" },
|
||||
"700": { value: "#725a91", type: "global-color", group: "meta-purple" },
|
||||
"800": { value: "#6a5289", type: "global-color", group: "meta-purple" },
|
||||
"900": { value: "#5e467c", type: "global-color", group: "meta-purple" },
|
||||
"1000": { value: "#331a4d", type: "global-color", group: "meta-purple" },
|
||||
},
|
||||
"meta-lime": {
|
||||
"100": { value: "#f4f9d1", type: "global-color", group: "meta-lime" },
|
||||
"200": { value: "#ebf4a9", type: "global-color", group: "meta-lime" },
|
||||
"300": { value: "#e0ec6b", type: "global-color", group: "meta-lime" },
|
||||
"400": { value: "#d0dc00", type: "global-color", group: "meta-lime" },
|
||||
"500": { value: "#878f00", type: "global-color", group: "meta-lime" },
|
||||
"600": { value: "#757c00", type: "global-color", group: "meta-lime" },
|
||||
"700": { value: "#646900", type: "global-color", group: "meta-lime" },
|
||||
"800": { value: "#5c6100", type: "global-color", group: "meta-lime" },
|
||||
"900": { value: "#515400", type: "global-color", group: "meta-lime" },
|
||||
"1000": { value: "#2a2800", type: "global-color", group: "meta-lime" },
|
||||
},
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Global token-layer for dark mode
|
||||
*/
|
||||
const globalDarkTokensNoAlpha: GlobalConfigWithoutAlpha = {
|
||||
neutral: {
|
||||
"000": {
|
||||
value: "black",
|
||||
type: "global-color",
|
||||
group: "neutral",
|
||||
},
|
||||
"100": { value: "#161d28", type: "global-color", group: "neutral" },
|
||||
"200": { value: "#1c232f", type: "global-color", group: "neutral" },
|
||||
"300": { value: "#242b37", type: "global-color", group: "neutral" },
|
||||
"400": { value: "#2e3641", type: "global-color", group: "neutral" },
|
||||
"500": { value: "#656d7b", type: "global-color", group: "neutral" },
|
||||
"600": { value: "#767e8c", type: "global-color", group: "neutral" },
|
||||
"700": { value: "#8a92a0", type: "global-color", group: "neutral" },
|
||||
"800": { value: "#949ba8", type: "global-color", group: "neutral" },
|
||||
"900": { value: "#a5acb6", type: "global-color", group: "neutral" },
|
||||
"1000": { value: "#dfe1e5", type: "global-color", group: "neutral" },
|
||||
},
|
||||
accent: {
|
||||
"100": { value: "#101d2d", type: "global-color", group: "accent" },
|
||||
"200": { value: "#152436", type: "global-color", group: "accent" },
|
||||
"300": { value: "#1a2c41", type: "global-color", group: "accent" },
|
||||
"400": { value: "#23374f", type: "global-color", group: "accent" },
|
||||
"500": { value: "#2e6db8", type: "global-color", group: "accent" },
|
||||
"600": { value: "#447fc9", type: "global-color", group: "accent" },
|
||||
"700": { value: "#5f94d8", type: "global-color", group: "accent" },
|
||||
"800": { value: "#6d9ddd", type: "global-color", group: "accent" },
|
||||
"900": { value: "#84aee6", type: "global-color", group: "accent" },
|
||||
"1000": { value: "#b0caf1", type: "global-color", group: "accent" },
|
||||
},
|
||||
success: {
|
||||
"100": { value: "#00230b", type: "global-color", group: "success" },
|
||||
"200": { value: "#032911", type: "global-color", group: "success" },
|
||||
"300": { value: "#0b3118", type: "global-color", group: "success" },
|
||||
"400": { value: "#183d24", type: "global-color", group: "success" },
|
||||
"500": { value: "#207c41", type: "global-color", group: "success" },
|
||||
"600": { value: "#368e52", type: "global-color", group: "success" },
|
||||
"700": { value: "#4ca265", type: "global-color", group: "success" },
|
||||
"800": { value: "#5eab72", type: "global-color", group: "success" },
|
||||
"900": { value: "#78ba87", type: "global-color", group: "success" },
|
||||
"1000": { value: "#a4d4ad", type: "global-color", group: "success" },
|
||||
},
|
||||
warning: {
|
||||
"100": { value: "#371100", type: "global-color", group: "warning" },
|
||||
"200": { value: "#3e1704", type: "global-color", group: "warning" },
|
||||
"300": { value: "#471f0c", type: "global-color", group: "warning" },
|
||||
"400": { value: "#542b18", type: "global-color", group: "warning" },
|
||||
"500": { value: "#af5122", type: "global-color", group: "warning" },
|
||||
"600": { value: "#c46233", type: "global-color", group: "warning" },
|
||||
"700": { value: "#de753c", type: "global-color", group: "warning" },
|
||||
"800": { value: "#e78040", type: "global-color", group: "warning" },
|
||||
"900": { value: "#ed974b", type: "global-color", group: "warning" },
|
||||
"1000": { value: "#f5bf6d", type: "global-color", group: "warning" },
|
||||
},
|
||||
danger: {
|
||||
"100": { value: "#410409", type: "global-color", group: "danger" },
|
||||
"200": { value: "#490b10", type: "global-color", group: "danger" },
|
||||
"300": { value: "#521517", type: "global-color", group: "danger" },
|
||||
"400": { value: "#5f2021", type: "global-color", group: "danger" },
|
||||
"500": { value: "#c8343f", type: "global-color", group: "danger" },
|
||||
"600": { value: "#dd4a50", type: "global-color", group: "danger" },
|
||||
"700": { value: "#eb6772", type: "global-color", group: "danger" },
|
||||
"800": { value: "#ee7685", type: "global-color", group: "danger" },
|
||||
"900": { value: "#f28ea2", type: "global-color", group: "danger" },
|
||||
"1000": { value: "#f6b7cd", type: "global-color", group: "danger" },
|
||||
},
|
||||
/* Info is currently just a copy of brandBlue */
|
||||
info: {
|
||||
"100": { value: "#071e2d", type: "global-color", group: "info" },
|
||||
"200": { value: "#0d2534", type: "global-color", group: "info" },
|
||||
"300": { value: "#122d3e", type: "global-color", group: "info" },
|
||||
"400": { value: "#19394c", type: "global-color", group: "info" },
|
||||
"500": { value: "#43718d", type: "global-color", group: "info" },
|
||||
"600": { value: "#5a839b", type: "global-color", group: "info" },
|
||||
"700": { value: "#7396ab", type: "global-color", group: "info" },
|
||||
"800": { value: "#7f9fb3", type: "global-color", group: "info" },
|
||||
"900": { value: "#93afc0", type: "global-color", group: "info" },
|
||||
"1000": { value: "#b7cbd7", type: "global-color", group: "info" },
|
||||
},
|
||||
"brand-magenta": {
|
||||
"100": { value: "#321220", type: "global-color", group: "brand-magenta" },
|
||||
"200": { value: "#3a1827", type: "global-color", group: "brand-magenta" },
|
||||
"300": { value: "#42202e", type: "global-color", group: "brand-magenta" },
|
||||
"400": { value: "#4e2a39", type: "global-color", group: "brand-magenta" },
|
||||
"500": { value: "#a35276", type: "global-color", group: "brand-magenta" },
|
||||
"600": { value: "#b06886", type: "global-color", group: "brand-magenta" },
|
||||
"700": { value: "#be7f99", type: "global-color", group: "brand-magenta" },
|
||||
"800": { value: "#c58aa2", type: "global-color", group: "brand-magenta" },
|
||||
"900": { value: "#cf9eb1", type: "global-color", group: "brand-magenta" },
|
||||
"1000": { value: "#e1c0cc", type: "global-color", group: "brand-magenta" },
|
||||
},
|
||||
"brand-beige": {
|
||||
"100": { value: "#2d160e", type: "global-color", group: "brand-beige" },
|
||||
"200": { value: "#351d15", type: "global-color", group: "brand-beige" },
|
||||
"300": { value: "#3d241c", type: "global-color", group: "brand-beige" },
|
||||
"400": { value: "#493027", type: "global-color", group: "brand-beige" },
|
||||
"500": { value: "#975e4a", type: "global-color", group: "brand-beige" },
|
||||
"600": { value: "#ab6f5b", type: "global-color", group: "brand-beige" },
|
||||
"700": { value: "#c0836e", type: "global-color", group: "brand-beige" },
|
||||
"800": { value: "#c78e79", type: "global-color", group: "brand-beige" },
|
||||
"900": { value: "#d1a08c", type: "global-color", group: "brand-beige" },
|
||||
"1000": { value: "#e3c2b1", type: "global-color", group: "brand-beige" },
|
||||
},
|
||||
"brand-blue": {
|
||||
"100": { value: "#071e2d", type: "global-color", group: "brand-blue" },
|
||||
"200": { value: "#0d2534", type: "global-color", group: "brand-blue" },
|
||||
"300": { value: "#122d3e", type: "global-color", group: "brand-blue" },
|
||||
"400": { value: "#19394c", type: "global-color", group: "brand-blue" },
|
||||
"500": { value: "#43718d", type: "global-color", group: "brand-blue" },
|
||||
"600": { value: "#5a839b", type: "global-color", group: "brand-blue" },
|
||||
"700": { value: "#7396ab", type: "global-color", group: "brand-blue" },
|
||||
"800": { value: "#7f9fb3", type: "global-color", group: "brand-blue" },
|
||||
"900": { value: "#93afc0", type: "global-color", group: "brand-blue" },
|
||||
"1000": { value: "#b7cbd7", type: "global-color", group: "brand-blue" },
|
||||
},
|
||||
"meta-purple": {
|
||||
"100": { value: "#221a2c", type: "global-color", group: "meta-purple" },
|
||||
"200": { value: "#272032", type: "global-color", group: "meta-purple" },
|
||||
"300": { value: "#2f273a", type: "global-color", group: "meta-purple" },
|
||||
"400": { value: "#3a3245", type: "global-color", group: "meta-purple" },
|
||||
"500": { value: "#776491", type: "global-color", group: "meta-purple" },
|
||||
"600": { value: "#8876a1", type: "global-color", group: "meta-purple" },
|
||||
"700": { value: "#9b8bb0", type: "global-color", group: "meta-purple" },
|
||||
"800": { value: "#a495b7", type: "global-color", group: "meta-purple" },
|
||||
"900": { value: "#b2a7c3", type: "global-color", group: "meta-purple" },
|
||||
"1000": { value: "#cdc5d9", type: "global-color", group: "meta-purple" },
|
||||
},
|
||||
"meta-lime": {
|
||||
"100": { value: "#1c1f00", type: "global-color", group: "meta-lime" },
|
||||
"200": { value: "#222500", type: "global-color", group: "meta-lime" },
|
||||
"300": { value: "#292d00", type: "global-color", group: "meta-lime" },
|
||||
"400": { value: "#343900", type: "global-color", group: "meta-lime" },
|
||||
"500": { value: "#6a7200", type: "global-color", group: "meta-lime" },
|
||||
"600": { value: "#7c8400", type: "global-color", group: "meta-lime" },
|
||||
"700": { value: "#8f9800", type: "global-color", group: "meta-lime" },
|
||||
"800": { value: "#99a200", type: "global-color", group: "meta-lime" },
|
||||
"900": { value: "#a9b325", type: "global-color", group: "meta-lime" },
|
||||
"1000": { value: "#c5d14c", type: "global-color", group: "meta-lime" },
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const globalLightTokens = globalConfigWithAlphaTokens({
|
||||
config: globalLightTokensNoAlpha,
|
||||
theme: "light",
|
||||
});
|
||||
|
||||
export const globalDarkTokens = globalConfigWithAlphaTokens({
|
||||
config: globalDarkTokensNoAlpha,
|
||||
theme: "dark",
|
||||
});
|
||||
+15
-9
@@ -1,12 +1,13 @@
|
||||
import _ from "lodash";
|
||||
import { ColorRolesList, type SemanticColorRoles } from "../../types";
|
||||
import { type StyleDictionaryTokenConfig } from "../tokens.util";
|
||||
import { type SemanticColorRoles } from "../../../types";
|
||||
import { ColorRolesList } from "../../../types";
|
||||
import { type StyleDictionaryTokenConfig } from "../../tokens.util";
|
||||
|
||||
/**
|
||||
* Gray colors are percieved a little lighter than other colored versions,
|
||||
* so we make some adjustments for neutral colors.
|
||||
* Maps the semantic colors to the global color layer for a given role.
|
||||
* @note Gray is handled a little differently, as it is visually perceived a little lighter than other colors.
|
||||
*/
|
||||
const configForRole = (role: SemanticColorRoles) => {
|
||||
export function semanticTokensForRole(role: SemanticColorRoles) {
|
||||
return {
|
||||
bg: {
|
||||
[`${role}-soft`]: {
|
||||
@@ -93,6 +94,11 @@ const configForRole = (role: SemanticColorRoles) => {
|
||||
type: "color",
|
||||
group: `text.${role}`,
|
||||
},
|
||||
[`${role}-contrast`]: {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: `text.${role}`,
|
||||
},
|
||||
},
|
||||
border: {
|
||||
[role]: {
|
||||
@@ -117,14 +123,14 @@ const configForRole = (role: SemanticColorRoles) => {
|
||||
},
|
||||
},
|
||||
} satisfies StyleDictionaryTokenConfig<"color">;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* We need to deep merge the token config for each role to get the complete token config for all roles.
|
||||
*/
|
||||
export const semanticTokensForAllRolesConfig = () => {
|
||||
export const semanticTokensForAllRoles = () => {
|
||||
return ColorRolesList.reduce(
|
||||
(acc, role) => _.merge(acc, configForRole(role)),
|
||||
{} as ReturnType<typeof configForRole>,
|
||||
(acc, role) => _.merge(acc, semanticTokensForRole(role)),
|
||||
{} as ReturnType<typeof semanticTokensForRole>,
|
||||
);
|
||||
};
|
||||
+7
-3
@@ -3,10 +3,14 @@ import {
|
||||
type ColorTheme,
|
||||
type DefaultTextColorKeys,
|
||||
type StaticDefaultBgKeys,
|
||||
} from "../../types";
|
||||
import { type StyleDictionaryToken } from "../tokens.util";
|
||||
} from "../../../types";
|
||||
import { type StyleDictionaryToken } from "../../tokens.util";
|
||||
|
||||
export function semanticTokenConfig(theme: ColorTheme) {
|
||||
/**
|
||||
* Static root-layer for semantic tokens.
|
||||
* These tokens are the "root"-layer in the sense that they are the only "unique" tokens in the semantic layer.
|
||||
*/
|
||||
export function semanticRootTokens(theme: ColorTheme) {
|
||||
return {
|
||||
text: {
|
||||
logo: {
|
||||
@@ -0,0 +1,106 @@
|
||||
import { type SemanticColorRoles } from "../../../types";
|
||||
|
||||
/**
|
||||
* This utility sets the semantic "role"-tokens for a given color role on the "base"-layer.
|
||||
* This allows us themable to create themable CSS in this format:
|
||||
* @example
|
||||
* ```css
|
||||
* [data-color-role="accent"] {
|
||||
* --ax-bg-soft: var(--ax-bg-accent-soft);
|
||||
* --ax-bg-softA: var(--ax-bg-accent-softA);
|
||||
* --ax-bg-moderate: var(--ax-bg-accent-moderate);
|
||||
* }
|
||||
*
|
||||
* [data-color-role="success"] {
|
||||
* --ax-bg-soft: var(--ax-bg-success-soft);
|
||||
* --ax-bg-softA: var(--ax-bg-success-softA);
|
||||
* --ax-bg-moderate: var(--ax-bg-success-moderate);
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
export function semanticThemedBaseTokens(role: SemanticColorRoles) {
|
||||
return {
|
||||
bg: {
|
||||
soft: {
|
||||
value: `{ax.bg.${role}-soft.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
softA: {
|
||||
value: `{ax.bg.${role}-softA.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
moderate: {
|
||||
value: `{ax.bg.${role}-moderate.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
moderateA: {
|
||||
value: `{ax.bg.${role}-moderateA.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
"moderate-hover": {
|
||||
value: `{ax.bg.${role}-moderate-hover.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
"moderate-hoverA": {
|
||||
value: `{ax.bg.${role}-moderate-hoverA.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
"moderate-pressed": {
|
||||
value: `{ax.bg.${role}-moderate-pressed.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
"moderate-pressedA": {
|
||||
value: `{ax.bg.${role}-moderate-pressedA.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
strong: {
|
||||
value: `{ax.bg.${role}-strong.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
"strong-hover": {
|
||||
value: `{ax.bg.${role}-strong-hover.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
"strong-pressed": {
|
||||
value: `{ax.bg.${role}-strong-pressed.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
},
|
||||
text: {
|
||||
default: {
|
||||
value: `{ax.text.${role}.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
subtle: {
|
||||
value: `{ax.text.${role}-subtle.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
icon: {
|
||||
value: `{ax.text.${role}-icon.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
contrast: {
|
||||
value: `{ax.text.${role}-contrast.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
},
|
||||
border: {
|
||||
default: {
|
||||
value: `{ax.border.${role}.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
subtle: {
|
||||
value: `{ax.border.${role}-subtle.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
subtleA: {
|
||||
value: `{ax.border.${role}-subtleA.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
strong: {
|
||||
value: `{ax.border.${role}-strong.value}`,
|
||||
type: "themed-role",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
import { type GlobalColorRoles, type GlobalColorScale } from "../../types";
|
||||
import { type GlobalColorEntry } from "../tokens.util";
|
||||
|
||||
export const globalColorDarkModeConfigWithoutAlpha: Record<
|
||||
GlobalColorRoles,
|
||||
Record<
|
||||
Exclude<GlobalColorScale, "000" | "100A" | "200A" | "300A" | "400A">,
|
||||
GlobalColorEntry
|
||||
>
|
||||
> & {
|
||||
neutral: {
|
||||
[key in Extract<GlobalColorScale, "000">]: GlobalColorEntry;
|
||||
};
|
||||
} = {
|
||||
neutral: {
|
||||
"000": {
|
||||
value: "black",
|
||||
type: "global-color",
|
||||
group: "neutral",
|
||||
},
|
||||
"100": { value: "#161d28", type: "global-color", group: "neutral" },
|
||||
"200": { value: "#1c232f", type: "global-color", group: "neutral" },
|
||||
"300": { value: "#242b37", type: "global-color", group: "neutral" },
|
||||
"400": { value: "#2e3641", type: "global-color", group: "neutral" },
|
||||
"500": { value: "#656d7b", type: "global-color", group: "neutral" },
|
||||
"600": { value: "#767e8c", type: "global-color", group: "neutral" },
|
||||
"700": { value: "#8a92a0", type: "global-color", group: "neutral" },
|
||||
"800": { value: "#949ba8", type: "global-color", group: "neutral" },
|
||||
"900": { value: "#a5acb6", type: "global-color", group: "neutral" },
|
||||
"1000": { value: "#dfe1e5", type: "global-color", group: "neutral" },
|
||||
},
|
||||
accent: {
|
||||
"100": { value: "#101d2d", type: "global-color", group: "accent" },
|
||||
"200": { value: "#152436", type: "global-color", group: "accent" },
|
||||
"300": { value: "#1a2c41", type: "global-color", group: "accent" },
|
||||
"400": { value: "#23374f", type: "global-color", group: "accent" },
|
||||
"500": { value: "#2e6db8", type: "global-color", group: "accent" },
|
||||
"600": { value: "#447fc9", type: "global-color", group: "accent" },
|
||||
"700": { value: "#5f94d8", type: "global-color", group: "accent" },
|
||||
"800": { value: "#6d9ddd", type: "global-color", group: "accent" },
|
||||
"900": { value: "#84aee6", type: "global-color", group: "accent" },
|
||||
"1000": { value: "#b0caf1", type: "global-color", group: "accent" },
|
||||
},
|
||||
success: {
|
||||
"100": { value: "#00230b", type: "global-color", group: "success" },
|
||||
"200": { value: "#032911", type: "global-color", group: "success" },
|
||||
"300": { value: "#0b3118", type: "global-color", group: "success" },
|
||||
"400": { value: "#183d24", type: "global-color", group: "success" },
|
||||
"500": { value: "#207c41", type: "global-color", group: "success" },
|
||||
"600": { value: "#368e52", type: "global-color", group: "success" },
|
||||
"700": { value: "#4ca265", type: "global-color", group: "success" },
|
||||
"800": { value: "#5eab72", type: "global-color", group: "success" },
|
||||
"900": { value: "#78ba87", type: "global-color", group: "success" },
|
||||
"1000": { value: "#a4d4ad", type: "global-color", group: "success" },
|
||||
},
|
||||
warning: {
|
||||
"100": { value: "#371100", type: "global-color", group: "warning" },
|
||||
"200": { value: "#3e1704", type: "global-color", group: "warning" },
|
||||
"300": { value: "#471f0c", type: "global-color", group: "warning" },
|
||||
"400": { value: "#542b18", type: "global-color", group: "warning" },
|
||||
"500": { value: "#af5122", type: "global-color", group: "warning" },
|
||||
"600": { value: "#c46233", type: "global-color", group: "warning" },
|
||||
"700": { value: "#de753c", type: "global-color", group: "warning" },
|
||||
"800": { value: "#e78040", type: "global-color", group: "warning" },
|
||||
"900": { value: "#ed974b", type: "global-color", group: "warning" },
|
||||
"1000": { value: "#f5bf6d", type: "global-color", group: "warning" },
|
||||
},
|
||||
danger: {
|
||||
"100": { value: "#410409", type: "global-color", group: "danger" },
|
||||
"200": { value: "#490b10", type: "global-color", group: "danger" },
|
||||
"300": { value: "#521517", type: "global-color", group: "danger" },
|
||||
"400": { value: "#5f2021", type: "global-color", group: "danger" },
|
||||
"500": { value: "#c8343f", type: "global-color", group: "danger" },
|
||||
"600": { value: "#dd4a50", type: "global-color", group: "danger" },
|
||||
"700": { value: "#eb6772", type: "global-color", group: "danger" },
|
||||
"800": { value: "#ee7685", type: "global-color", group: "danger" },
|
||||
"900": { value: "#f28ea2", type: "global-color", group: "danger" },
|
||||
"1000": { value: "#f6b7cd", type: "global-color", group: "danger" },
|
||||
},
|
||||
/* Info is currently just a copy of brandBlue */
|
||||
info: {
|
||||
"100": { value: "#071e2d", type: "global-color", group: "info" },
|
||||
"200": { value: "#0d2534", type: "global-color", group: "info" },
|
||||
"300": { value: "#122d3e", type: "global-color", group: "info" },
|
||||
"400": { value: "#19394c", type: "global-color", group: "info" },
|
||||
"500": { value: "#43718d", type: "global-color", group: "info" },
|
||||
"600": { value: "#5a839b", type: "global-color", group: "info" },
|
||||
"700": { value: "#7396ab", type: "global-color", group: "info" },
|
||||
"800": { value: "#7f9fb3", type: "global-color", group: "info" },
|
||||
"900": { value: "#93afc0", type: "global-color", group: "info" },
|
||||
"1000": { value: "#b7cbd7", type: "global-color", group: "info" },
|
||||
},
|
||||
"brand-magenta": {
|
||||
"100": { value: "#321220", type: "global-color", group: "brand-magenta" },
|
||||
"200": { value: "#3a1827", type: "global-color", group: "brand-magenta" },
|
||||
"300": { value: "#42202e", type: "global-color", group: "brand-magenta" },
|
||||
"400": { value: "#4e2a39", type: "global-color", group: "brand-magenta" },
|
||||
"500": { value: "#a35276", type: "global-color", group: "brand-magenta" },
|
||||
"600": { value: "#b06886", type: "global-color", group: "brand-magenta" },
|
||||
"700": { value: "#be7f99", type: "global-color", group: "brand-magenta" },
|
||||
"800": { value: "#c58aa2", type: "global-color", group: "brand-magenta" },
|
||||
"900": { value: "#cf9eb1", type: "global-color", group: "brand-magenta" },
|
||||
"1000": { value: "#e1c0cc", type: "global-color", group: "brand-magenta" },
|
||||
},
|
||||
"brand-beige": {
|
||||
"100": { value: "#2d160e", type: "global-color", group: "brand-beige" },
|
||||
"200": { value: "#351d15", type: "global-color", group: "brand-beige" },
|
||||
"300": { value: "#3d241c", type: "global-color", group: "brand-beige" },
|
||||
"400": { value: "#493027", type: "global-color", group: "brand-beige" },
|
||||
"500": { value: "#975e4a", type: "global-color", group: "brand-beige" },
|
||||
"600": { value: "#ab6f5b", type: "global-color", group: "brand-beige" },
|
||||
"700": { value: "#c0836e", type: "global-color", group: "brand-beige" },
|
||||
"800": { value: "#c78e79", type: "global-color", group: "brand-beige" },
|
||||
"900": { value: "#d1a08c", type: "global-color", group: "brand-beige" },
|
||||
"1000": { value: "#e3c2b1", type: "global-color", group: "brand-beige" },
|
||||
},
|
||||
"brand-blue": {
|
||||
"100": { value: "#071e2d", type: "global-color", group: "brand-blue" },
|
||||
"200": { value: "#0d2534", type: "global-color", group: "brand-blue" },
|
||||
"300": { value: "#122d3e", type: "global-color", group: "brand-blue" },
|
||||
"400": { value: "#19394c", type: "global-color", group: "brand-blue" },
|
||||
"500": { value: "#43718d", type: "global-color", group: "brand-blue" },
|
||||
"600": { value: "#5a839b", type: "global-color", group: "brand-blue" },
|
||||
"700": { value: "#7396ab", type: "global-color", group: "brand-blue" },
|
||||
"800": { value: "#7f9fb3", type: "global-color", group: "brand-blue" },
|
||||
"900": { value: "#93afc0", type: "global-color", group: "brand-blue" },
|
||||
"1000": { value: "#b7cbd7", type: "global-color", group: "brand-blue" },
|
||||
},
|
||||
"meta-purple": {
|
||||
"100": { value: "#221a2c", type: "global-color", group: "meta-purple" },
|
||||
"200": { value: "#272032", type: "global-color", group: "meta-purple" },
|
||||
"300": { value: "#2f273a", type: "global-color", group: "meta-purple" },
|
||||
"400": { value: "#3a3245", type: "global-color", group: "meta-purple" },
|
||||
"500": { value: "#776491", type: "global-color", group: "meta-purple" },
|
||||
"600": { value: "#8876a1", type: "global-color", group: "meta-purple" },
|
||||
"700": { value: "#9b8bb0", type: "global-color", group: "meta-purple" },
|
||||
"800": { value: "#a495b7", type: "global-color", group: "meta-purple" },
|
||||
"900": { value: "#b2a7c3", type: "global-color", group: "meta-purple" },
|
||||
"1000": { value: "#cdc5d9", type: "global-color", group: "meta-purple" },
|
||||
},
|
||||
"meta-lime": {
|
||||
"100": { value: "#1c1f00", type: "global-color", group: "meta-lime" },
|
||||
"200": { value: "#222500", type: "global-color", group: "meta-lime" },
|
||||
"300": { value: "#292d00", type: "global-color", group: "meta-lime" },
|
||||
"400": { value: "#343900", type: "global-color", group: "meta-lime" },
|
||||
"500": { value: "#6a7200", type: "global-color", group: "meta-lime" },
|
||||
"600": { value: "#7c8400", type: "global-color", group: "meta-lime" },
|
||||
"700": { value: "#8f9800", type: "global-color", group: "meta-lime" },
|
||||
"800": { value: "#99a200", type: "global-color", group: "meta-lime" },
|
||||
"900": { value: "#a9b325", type: "global-color", group: "meta-lime" },
|
||||
"1000": { value: "#c5d14c", type: "global-color", group: "meta-lime" },
|
||||
},
|
||||
} as const;
|
||||
@@ -1,152 +0,0 @@
|
||||
import { type GlobalColorRoles, type GlobalColorScale } from "../../types";
|
||||
import { type GlobalColorEntry } from "../tokens.util";
|
||||
|
||||
export const globalColorLightModeConfigWithoutAlpha: Record<
|
||||
GlobalColorRoles,
|
||||
Record<
|
||||
Exclude<GlobalColorScale, "000" | "100A" | "200A" | "300A" | "400A">,
|
||||
GlobalColorEntry
|
||||
>
|
||||
> & {
|
||||
neutral: {
|
||||
[key in Extract<GlobalColorScale, "000">]: GlobalColorEntry;
|
||||
};
|
||||
} = {
|
||||
neutral: {
|
||||
"000": {
|
||||
value: "white",
|
||||
type: "global-color",
|
||||
group: "neutral",
|
||||
},
|
||||
"100": { value: "#f5f6f7", type: "global-color", group: "neutral" },
|
||||
"200": { value: "#ecedef", type: "global-color", group: "neutral" },
|
||||
"300": { value: "#e1e3e7", type: "global-color", group: "neutral" },
|
||||
"400": { value: "#cfd3d8", type: "global-color", group: "neutral" },
|
||||
"500": { value: "#818997", type: "global-color", group: "neutral" },
|
||||
"600": { value: "#6f7785", type: "global-color", group: "neutral" },
|
||||
"700": { value: "#5d6573", type: "global-color", group: "neutral" },
|
||||
"800": { value: "#555d6a", type: "global-color", group: "neutral" },
|
||||
"900": { value: "#49515e", type: "global-color", group: "neutral" },
|
||||
"1000": { value: "#202733", type: "global-color", group: "neutral" },
|
||||
},
|
||||
accent: {
|
||||
"100": { value: "#f1f7ff", type: "global-color", group: "accent" },
|
||||
"200": { value: "#e4eeff", type: "global-color", group: "accent" },
|
||||
"300": { value: "#d4e5fd", type: "global-color", group: "accent" },
|
||||
"400": { value: "#bad5fb", type: "global-color", group: "accent" },
|
||||
"500": { value: "#428ae3", type: "global-color", group: "accent" },
|
||||
"600": { value: "#2277d5", type: "global-color", group: "accent" },
|
||||
"700": { value: "#0063c1", type: "global-color", group: "accent" },
|
||||
"800": { value: "#005bb6", type: "global-color", group: "accent" },
|
||||
"900": { value: "#004ea3", type: "global-color", group: "accent" },
|
||||
"1000": { value: "#002459", type: "global-color", group: "accent" },
|
||||
},
|
||||
success: {
|
||||
"100": { value: "#e2fde8", type: "global-color", group: "success" },
|
||||
"200": { value: "#d5f6db", type: "global-color", group: "success" },
|
||||
"300": { value: "#c4edcd", type: "global-color", group: "success" },
|
||||
"400": { value: "#a8dfb4", type: "global-color", group: "success" },
|
||||
"500": { value: "#199d4f", type: "global-color", group: "success" },
|
||||
"600": { value: "#00893c", type: "global-color", group: "success" },
|
||||
"700": { value: "#007629", type: "global-color", group: "success" },
|
||||
"800": { value: "#006c1f", type: "global-color", group: "success" },
|
||||
"900": { value: "#005e0f", type: "global-color", group: "success" },
|
||||
"1000": { value: "#002e00", type: "global-color", group: "success" },
|
||||
},
|
||||
warning: {
|
||||
"100": { value: "#fff5e4", type: "global-color", group: "warning" },
|
||||
"200": { value: "#ffebc7", type: "global-color", group: "warning" },
|
||||
"300": { value: "#ffdea5", type: "global-color", group: "warning" },
|
||||
"400": { value: "#ffcb6f", type: "global-color", group: "warning" },
|
||||
"500": { value: "#e75e01", type: "global-color", group: "warning" },
|
||||
"600": { value: "#c95100", type: "global-color", group: "warning" },
|
||||
"700": { value: "#ac4400", type: "global-color", group: "warning" },
|
||||
"800": { value: "#a03e00", type: "global-color", group: "warning" },
|
||||
"900": { value: "#8c3500", type: "global-color", group: "warning" },
|
||||
"1000": { value: "#481700", type: "global-color", group: "warning" },
|
||||
},
|
||||
danger: {
|
||||
"100": { value: "#fff2f7", type: "global-color", group: "danger" },
|
||||
"200": { value: "#ffe8f0", type: "global-color", group: "danger" },
|
||||
"300": { value: "#ffd9e6", type: "global-color", group: "danger" },
|
||||
"400": { value: "#ffc2d7", type: "global-color", group: "danger" },
|
||||
"500": { value: "#ec526e", type: "global-color", group: "danger" },
|
||||
"600": { value: "#e22a49", type: "global-color", group: "danger" },
|
||||
"700": { value: "#cb0035", type: "global-color", group: "danger" },
|
||||
"800": { value: "#bc002a", type: "global-color", group: "danger" },
|
||||
"900": { value: "#a60017", type: "global-color", group: "danger" },
|
||||
"1000": { value: "#560000", type: "global-color", group: "danger" },
|
||||
},
|
||||
info: {
|
||||
"100": { value: "#eef6fc", type: "global-color", group: "info" },
|
||||
"200": { value: "#e3eff7", type: "global-color", group: "info" },
|
||||
"300": { value: "#d7e6f0", type: "global-color", group: "info" },
|
||||
"400": { value: "#c0d6e4", type: "global-color", group: "info" },
|
||||
"500": { value: "#5a8fae", type: "global-color", group: "info" },
|
||||
"600": { value: "#417da0", type: "global-color", group: "info" },
|
||||
"700": { value: "#246b91", type: "global-color", group: "info" },
|
||||
"800": { value: "#156389", type: "global-color", group: "info" },
|
||||
"900": { value: "#00557d", type: "global-color", group: "info" },
|
||||
"1000": { value: "#002942", type: "global-color", group: "info" },
|
||||
},
|
||||
"brand-magenta": {
|
||||
"100": { value: "#fbf3f6", type: "global-color", group: "brand-magenta" },
|
||||
"200": { value: "#f8eaef", type: "global-color", group: "brand-magenta" },
|
||||
"300": { value: "#f3dde5", type: "global-color", group: "brand-magenta" },
|
||||
"400": { value: "#eccad6", type: "global-color", group: "brand-magenta" },
|
||||
"500": { value: "#c26f92", type: "global-color", group: "brand-magenta" },
|
||||
"600": { value: "#b65781", type: "global-color", group: "brand-magenta" },
|
||||
"700": { value: "#a93d70", type: "global-color", group: "brand-magenta" },
|
||||
"800": { value: "#a33069", type: "global-color", group: "brand-magenta" },
|
||||
"900": { value: "#98185d", type: "global-color", group: "brand-magenta" },
|
||||
"1000": { value: "#52002b", type: "global-color", group: "brand-magenta" },
|
||||
},
|
||||
"brand-beige": {
|
||||
"100": { value: "#fff4ee", type: "global-color", group: "brand-beige" },
|
||||
"200": { value: "#fdebe0", type: "global-color", group: "brand-beige" },
|
||||
"300": { value: "#fcddcd", type: "global-color", group: "brand-beige" },
|
||||
"400": { value: "#f8c8b1", type: "global-color", group: "brand-beige" },
|
||||
"500": { value: "#c0765d", type: "global-color", group: "brand-beige" },
|
||||
"600": { value: "#a9654e", type: "global-color", group: "brand-beige" },
|
||||
"700": { value: "#915541", type: "global-color", group: "brand-beige" },
|
||||
"800": { value: "#874e3b", type: "global-color", group: "brand-beige" },
|
||||
"900": { value: "#764332", type: "global-color", group: "brand-beige" },
|
||||
"1000": { value: "#3c1f15", type: "global-color", group: "brand-beige" },
|
||||
},
|
||||
"brand-blue": {
|
||||
"100": { value: "#eef6fc", type: "global-color", group: "brand-blue" },
|
||||
"200": { value: "#e3eff7", type: "global-color", group: "brand-blue" },
|
||||
"300": { value: "#d7e6f0", type: "global-color", group: "brand-blue" },
|
||||
"400": { value: "#c0d6e4", type: "global-color", group: "brand-blue" },
|
||||
"500": { value: "#5a8fae", type: "global-color", group: "brand-blue" },
|
||||
"600": { value: "#417da0", type: "global-color", group: "brand-blue" },
|
||||
"700": { value: "#246b91", type: "global-color", group: "brand-blue" },
|
||||
"800": { value: "#156389", type: "global-color", group: "brand-blue" },
|
||||
"900": { value: "#00557d", type: "global-color", group: "brand-blue" },
|
||||
"1000": { value: "#002942", type: "global-color", group: "brand-blue" },
|
||||
},
|
||||
"meta-purple": {
|
||||
"100": { value: "#f7f5f9", type: "global-color", group: "meta-purple" },
|
||||
"200": { value: "#f0edf4", type: "global-color", group: "meta-purple" },
|
||||
"300": { value: "#e6e1ed", type: "global-color", group: "meta-purple" },
|
||||
"400": { value: "#d7cfe3", type: "global-color", group: "meta-purple" },
|
||||
"500": { value: "#9580b1", type: "global-color", group: "meta-purple" },
|
||||
"600": { value: "#846ca4", type: "global-color", group: "meta-purple" },
|
||||
"700": { value: "#725a91", type: "global-color", group: "meta-purple" },
|
||||
"800": { value: "#6a5289", type: "global-color", group: "meta-purple" },
|
||||
"900": { value: "#5e467c", type: "global-color", group: "meta-purple" },
|
||||
"1000": { value: "#331a4d", type: "global-color", group: "meta-purple" },
|
||||
},
|
||||
"meta-lime": {
|
||||
"100": { value: "#f4f9d1", type: "global-color", group: "meta-lime" },
|
||||
"200": { value: "#ebf4a9", type: "global-color", group: "meta-lime" },
|
||||
"300": { value: "#e0ec6b", type: "global-color", group: "meta-lime" },
|
||||
"400": { value: "#d0dc00", type: "global-color", group: "meta-lime" },
|
||||
"500": { value: "#878f00", type: "global-color", group: "meta-lime" },
|
||||
"600": { value: "#757c00", type: "global-color", group: "meta-lime" },
|
||||
"700": { value: "#646900", type: "global-color", group: "meta-lime" },
|
||||
"800": { value: "#5c6100", type: "global-color", group: "meta-lime" },
|
||||
"900": { value: "#515400", type: "global-color", group: "meta-lime" },
|
||||
"1000": { value: "#2a2800", type: "global-color", group: "meta-lime" },
|
||||
},
|
||||
} as const;
|
||||
@@ -1,68 +0,0 @@
|
||||
import { type SemanticColorRoles } from "../../types";
|
||||
import { type StyleDictionaryToken } from "../tokens.util";
|
||||
|
||||
export const textContrastTokenConfig = {
|
||||
text: {
|
||||
/* core */
|
||||
"neutral-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: `text.accent`,
|
||||
},
|
||||
"accent-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: `text.accent`,
|
||||
},
|
||||
/* Status */
|
||||
"danger-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.danger",
|
||||
},
|
||||
"info-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.info",
|
||||
},
|
||||
"success-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.success",
|
||||
},
|
||||
"warning-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.warning",
|
||||
},
|
||||
/* Brand */
|
||||
"brand-magenta-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.brand-magenta",
|
||||
},
|
||||
"brand-beige-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.brand-beige",
|
||||
},
|
||||
"brand-blue-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.brand-blue",
|
||||
},
|
||||
/* Meta */
|
||||
"meta-purple-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.meta-purple",
|
||||
},
|
||||
"meta-lime-contrast": {
|
||||
value: "{ax.neutral.000.value}",
|
||||
type: "color",
|
||||
group: "text.meta-lime",
|
||||
},
|
||||
},
|
||||
} satisfies {
|
||||
text: Record<`${SemanticColorRoles}-contrast`, StyleDictionaryToken<"color">>;
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "7.12.1",
|
||||
"version": "7.13.0",
|
||||
"description": "Design-tokens for Nav designsystem",
|
||||
"author": "Aksel | Nav designsystem team",
|
||||
"keywords": [
|
||||
@@ -14,7 +14,9 @@
|
||||
"/dist",
|
||||
"/src",
|
||||
"types.ts",
|
||||
"docs.json"
|
||||
"docs.json",
|
||||
"!/dist/darkside",
|
||||
"/dist/darkside/tokens*"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsx ./config/build.ts > /dev/null && yarn build:darkside && tsx ./config/version-tag.ts",
|
||||
|
||||
+214
-194
@@ -1,27 +1,47 @@
|
||||
# Changelog
|
||||
|
||||
## 7.13
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Tailwind: Added `darkside`-support with import `@navikt/ds-tailwind/darkside-tw3`. ([#3580](https://github.com/navikt/aksel/pull/3580))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Darkside: Added support for `ConfirmationpPanel`, `Linkpanel`, `Panel` and `Dropdown`. Note that all of these will be deprecated in the future. ([#3581](https://github.com/navikt/aksel/pull/3581))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: :tada: New icons `ExpandVertical` and `QuestionmarkCircle` ([#3583](https://github.com/navikt/aksel/pull/3583))
|
||||
|
||||
## 7.12
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Theme: Theme-prop is now optional. ([`f269311`](https://github.com/navikt/aksel/commit/f269311dbbeb09e8fa0ba93a19aa430f0dd17255))
|
||||
- Box: Added export for `BoxNew`. ([`8576400`](https://github.com/navikt/aksel/commit/857640026368153b64171f1cf954b9abac493ee8))
|
||||
|
||||
* List: Marked `title`, `headingTag` and `description` properties as deprecated. These will not be supported in future versions and should be migrated from when possible. ([#3537](https://github.com/navikt/aksel/pull/3537))
|
||||
* Theme: Theme-prop is now optional. ([`f269311`](https://github.com/navikt/aksel/commit/f269311dbbeb09e8fa0ba93a19aa430f0dd17255))
|
||||
|
||||
- Table: Updated sorting icons for ascending and descending. ([#3536](https://github.com/navikt/aksel/pull/3536))
|
||||
- List: Marked `title`, `headingTag` and `description` properties as deprecated. These will not be supported in future versions and should be migrated from when possible. ([#3537](https://github.com/navikt/aksel/pull/3537))
|
||||
|
||||
* Table: Updated sorting icons for ascending and descending. ([#3536](https://github.com/navikt/aksel/pull/3536))
|
||||
|
||||
## 7.11
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: Added new icons 'SortUp' and 'SortDown' 🎉. ([#3528](https://github.com/navikt/aksel/pull/3528))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- ExpansionCard: Removed dynamic padding on button-element. ([#3532](https://github.com/navikt/aksel/pull/3532))
|
||||
|
||||
- Modal: Defaults to `margin: auto` for tailwind 4 support. ([#3532](https://github.com/navikt/aksel/pull/3532))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: Added new icons 'SortUp' and 'SortDown' 🎉. ([#3528](https://github.com/navikt/aksel/pull/3528))
|
||||
|
||||
## 7.10
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -68,10 +88,6 @@
|
||||
|
||||
## 7.8
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Combobox: Only open dropdown-list onClick, not onFocus. ([#3440](https://github.com/navikt/aksel/pull/3440))
|
||||
@@ -106,6 +122,10 @@
|
||||
|
||||
- CSS: Resolved regression where the complete stylesheet was included in scoped 'components.css' file. ([#3427](https://github.com/navikt/aksel/pull/3427))
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Combobox: Removed clear button, removed tokens staring with `--ac-combobox-clear`, deprecated props `clearButton`/`clearButtonLabel`. ([#3433](https://github.com/navikt/aksel/pull/3433))
|
||||
|
||||
## 7.7
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -122,10 +142,6 @@
|
||||
|
||||
## 7.6
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ActionMenu: Added 'align'-prop to 'ActionMenu.Content'. This allows menu to 'start' or 'end' align in reference to anchor. ([#3414](https://github.com/navikt/aksel/pull/3414))
|
||||
@@ -150,15 +166,11 @@
|
||||
|
||||
* Combobox: Single-select now shows cursor closer to selected item. ([#3384](https://github.com/navikt/aksel/pull/3384))
|
||||
|
||||
## 7.5
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
|
||||
- Icons: Added new icons 'TruckPercent' and 'ShieldCheckmark' 🎉. ([#3416](https://github.com/navikt/aksel/pull/3416))
|
||||
|
||||
## 7.5
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -174,6 +186,14 @@
|
||||
|
||||
- Combobox: Fix issue where using arrow keys in list would make the entire page scroll ([#3364](https://github.com/navikt/aksel/pull/3364))
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Chore: Manually bump version to sync npm and github-releases ([`aa7c2d9`](https://github.com/navikt/aksel/commit/aa7c2d9598434d6304432daa20e0a1eeedd03b1b))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: 🎉 Added FileJpeg, FilePng and MedicalThermometer. ([#3332](https://github.com/navikt/aksel/pull/3332))
|
||||
|
||||
## 7.4
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -248,12 +268,6 @@
|
||||
|
||||
## 7.1
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- List: :boom: Removed class names "navds-list--nested" and "navds-list\_\_item-content" ([#3184](https://github.com/navikt/aksel/pull/3184))
|
||||
|
||||
* Pagination: :boom: Added some classNames to list of deprecated (removed) classes. ([#3164](https://github.com/navikt/aksel/pull/3164))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- List: Add indentation and remove overly verbose aria attributes ([#3184](https://github.com/navikt/aksel/pull/3184))
|
||||
@@ -278,12 +292,14 @@
|
||||
|
||||
- Accordion: Remove 'relative' positioning when focused. This resolves some issues where floating elements like popover ended up clipping. ([`9c1eba445`](https://github.com/navikt/aksel/commit/9c1eba44508f295cc6261ff96822b18557bd7ddc))
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- List: :boom: Removed class names "navds-list--nested" and "navds-list\_\_item-content" ([#3184](https://github.com/navikt/aksel/pull/3184))
|
||||
|
||||
* Pagination: :boom: Added some classNames to list of deprecated (removed) classes. ([#3164](https://github.com/navikt/aksel/pull/3164))
|
||||
|
||||
## 7.0
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: Removed renamed icons. [See migration guide for changes](https://aksel.nav.no/grunnleggende/kode/migrering#194b60833d9e). ([#3139](https://github.com/navikt/aksel/pull/3139))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Combobox: Fix issue with whitespace in the ID of options with multiple spaces ([#3162](https://github.com/navikt/aksel/pull/3162))
|
||||
@@ -294,35 +310,31 @@
|
||||
|
||||
- ErrorSummary: Focus heading instead of container for improved experience with screen reader. ([#3139](https://github.com/navikt/aksel/pull/3139))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Tailwind: Extended 'screens'-config in theme to match Aksel breakpoints. Tailwind and Primitives can now be used side by side with matching dynamic breakpoints. [See migration guide for potential issues when adopting](https://aksel.nav.no/grunnleggende/kode/migrering#3a2340f6f69b). ([#3139](https://github.com/navikt/aksel/pull/3139))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- List: :lipstick: make icons 24x24px large ([#3148](https://github.com/navikt/aksel/pull/3148))
|
||||
|
||||
* ErrorSummary: Focus heading instead of container for improved experience with screen reader. ([#3139](https://github.com/navikt/aksel/pull/3139))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Tailwind: Extended 'screens'-config in theme to match Aksel breakpoints. Tailwind and Primitives can now be used side by side with matching dynamic breakpoints. [See migration guide for potential issues when adopting](https://aksel.nav.no/grunnleggende/kode/migrering#3a2340f6f69b). ([#3139](https://github.com/navikt/aksel/pull/3139))
|
||||
|
||||
## 6.17
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New 'face' icons for 'Engagement'-category. ([#3134](https://github.com/navikt/aksel/pull/3134))
|
||||
- Icons: Removed renamed icons. [See migration guide for changes](https://aksel.nav.no/grunnleggende/kode/migrering#194b60833d9e). ([#3139](https://github.com/navikt/aksel/pull/3139))
|
||||
|
||||
## 6.17
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Combobox: Add support for `onBlur`, and omit props that have no effect. ([#3125](https://github.com/navikt/aksel/pull/3125))
|
||||
|
||||
## 6.16
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Aksel-CLI: Bump jscodeshift-add-imports to 1.0.11. ([#3099](https://github.com/navikt/aksel/pull/3099))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: Updated Clipboard icons. ([#3113](https://github.com/navikt/aksel/pull/3113))
|
||||
- Icons: New 'face' icons for 'Engagement'-category. ([#3134](https://github.com/navikt/aksel/pull/3134))
|
||||
|
||||
## 6.16
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -360,11 +372,15 @@
|
||||
|
||||
- Modal: Added scroll shadows ([#3083](https://github.com/navikt/aksel/pull/3083))
|
||||
|
||||
## 6.15
|
||||
### @navikt/aksel
|
||||
|
||||
- Aksel-CLI: Bump jscodeshift-add-imports to 1.0.11. ([#3099](https://github.com/navikt/aksel/pull/3099))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New icon-series for 'SplitHorizontal' and 'SplitVertical' ([#3072](https://github.com/navikt/aksel/pull/3072))
|
||||
- Icons: Updated Clipboard icons. ([#3113](https://github.com/navikt/aksel/pull/3113))
|
||||
|
||||
## 6.15
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -372,6 +388,10 @@
|
||||
|
||||
- Refactored Combobox FilteredOptions ([#3073](https://github.com/navikt/aksel/pull/3073))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New icon-series for 'SplitHorizontal' and 'SplitVertical' ([#3072](https://github.com/navikt/aksel/pull/3072))
|
||||
|
||||
## 6.14
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -410,12 +430,6 @@
|
||||
|
||||
## 6.12
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New icon ChildHairEyes ([#3020](https://github.com/navikt/aksel/pull/3020))
|
||||
|
||||
* Icons: FigureCombination icon adjusted ([#3031](https://github.com/navikt/aksel/pull/3031))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Primitives: Added support for padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink to Box, HGrid and Stack. ([#3003](https://github.com/navikt/aksel/pull/3003))
|
||||
@@ -430,6 +444,12 @@
|
||||
|
||||
* Alert: Fix alignment, add prop for toggling content max-width, and adjust title on close icon. ([#3007](https://github.com/navikt/aksel/pull/3007))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New icon ChildHairEyes ([#3020](https://github.com/navikt/aksel/pull/3020))
|
||||
|
||||
* Icons: FigureCombination icon adjusted ([#3031](https://github.com/navikt/aksel/pull/3031))
|
||||
|
||||
## 6.11
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -454,10 +474,6 @@
|
||||
|
||||
## 6.10
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: Added back support for sourcemapping. ([#2978](https://github.com/navikt/aksel/pull/2978))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ✨ Modal: add small version ([#2909](https://github.com/navikt/aksel/pull/2909))
|
||||
@@ -468,11 +484,11 @@
|
||||
|
||||
* ✨ Modal: add small version ([#2909](https://github.com/navikt/aksel/pull/2909))
|
||||
|
||||
## 6.9
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New icons for geometric shapes ([#2927](https://github.com/navikt/aksel/pull/2927))
|
||||
- Icons: Added back support for sourcemapping. ([#2978](https://github.com/navikt/aksel/pull/2978))
|
||||
|
||||
## 6.9
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -490,6 +506,10 @@
|
||||
|
||||
- Fixed Combobox small sizing to align with other form fields ([#2801](https://github.com/navikt/aksel/pull/2801))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Icons: New icons for geometric shapes ([#2927](https://github.com/navikt/aksel/pull/2927))
|
||||
|
||||
## 6.8
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -528,10 +548,6 @@
|
||||
|
||||
## 6.6
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Aksel CLI: Fjernet deprecated komponenter fra css oversikt. ([#2860](https://github.com/navikt/aksel/pull/2860))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Spacer: Er nå `span` (tidligere `div`). ([#2874](https://github.com/navikt/aksel/pull/2874))
|
||||
@@ -544,6 +560,10 @@
|
||||
|
||||
- :sparkles: Ny komponent FormSummary ([#2802](https://github.com/navikt/aksel/pull/2802))
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Aksel CLI: Fjernet deprecated komponenter fra css oversikt. ([#2860](https://github.com/navikt/aksel/pull/2860))
|
||||
|
||||
## 6.5
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -604,16 +624,16 @@
|
||||
|
||||
## 6.2
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Select: Fjern 'multiple' fra SelectProps ([#2782](https://github.com/navikt/aksel/pull/2782))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Nytt ikon `archive` ([#2772](https://github.com/navikt/aksel/pull/2772))
|
||||
|
||||
- Ikoner: Nytt ikon `opensource` ([#2787](https://github.com/navikt/aksel/pull/2787))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Select: Fjern 'multiple' fra SelectProps ([#2782](https://github.com/navikt/aksel/pull/2782))
|
||||
|
||||
## 6.1
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -636,20 +656,6 @@
|
||||
|
||||
## 6.0
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
* SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
@@ -672,6 +678,10 @@
|
||||
|
||||
* SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
@@ -690,9 +700,19 @@
|
||||
|
||||
- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
### @navikt/aksel
|
||||
|
||||
- Tokens: La til nytt brekkpunkt `2xl` for `1440px`. Alle primitives er oppdatert for å reflektere oppdateringen. Brukere av Tailwind vil måtte sjekke at overskriving av `screen: "2xl"` ikke brekker app. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
- Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Textarea: Fjernet div med klassen navds-textarea\_\_wrapper ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- ESM: ds-react og aksel-icons støtter nå native ESM 🎉 ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
* SSR: ds-react og aksel-icons støtter nå `use client` og kan brukes i nextjs app-router uten lokal re-eksportering. ([#2623](https://github.com/navikt/aksel/pull/2623))
|
||||
|
||||
## 5.18
|
||||
|
||||
@@ -734,32 +754,32 @@
|
||||
|
||||
## 5.16
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Tailwind: La til ny `maxWidth` for text ([#2652](https://github.com/navikt/aksel/pull/2652))
|
||||
|
||||
## 5.15
|
||||
### @navikt/ds-css
|
||||
|
||||
- :sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta ([#2260](https://github.com/navikt/aksel/pull/2260))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Synket ikoner med Figma. Lagt til nytt ikon `FigureChild` ([#2629](https://github.com/navikt/aksel/pull/2629))
|
||||
- Ikoner: Nytt ikon `LocationPin` ✨ ([#2672](https://github.com/navikt/aksel/pull/2672))
|
||||
|
||||
## 5.15
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- HelpText: HelpText-state ble ikke riktig oppdatert ved klikk ([#2643](https://github.com/navikt/aksel/pull/2643))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Synket ikoner med Figma. Lagt til nytt ikon `FigureChild` ([#2629](https://github.com/navikt/aksel/pull/2629))
|
||||
|
||||
## 5.14
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -800,14 +820,6 @@
|
||||
|
||||
## 5.12
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke ([#2538](https://github.com/navikt/aksel/pull/2538))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- MonthPicker: MonthCaption satt forrige/neste-knapper til `disabled` når de skulle være `enabled`. ([#2601](https://github.com/navikt/aksel/pull/2601))
|
||||
@@ -824,11 +836,15 @@
|
||||
|
||||
- ExpansionCard: Divider mellom header og innhold ([#2566](https://github.com/navikt/aksel/pull/2566))
|
||||
|
||||
## 5.11
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Stylelint: Støtter nå stylelint v16 ([#2591](https://github.com/navikt/aksel/pull/2591))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
|
||||
- Ikoner: Oppdatert ikonpakke med diverse bugdfixes og oppdateringer av stroke ([#2538](https://github.com/navikt/aksel/pull/2538))
|
||||
|
||||
## 5.11
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -870,6 +886,10 @@
|
||||
|
||||
* :wheelchair: Textarea: Forsinkelse ved live-opplesning av gjenstående tegn ([#2502](https://github.com/navikt/aksel/pull/2502))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Nytt ikon `PushPin` ([#2503](https://github.com/navikt/aksel/pull/2503))
|
||||
|
||||
## 5.10
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -888,6 +908,10 @@
|
||||
|
||||
- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- :bug: Textarea: Teller flyttet ut av tekstfeltet for å unngå overlapp og misforståelser ([#2483](https://github.com/navikt/aksel/pull/2483))
|
||||
@@ -896,10 +920,6 @@
|
||||
|
||||
- Primitives: Ny komponent `Page` og `Page.Block` ([#2456](https://github.com/navikt/aksel/pull/2456))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- typescript types for tailwind preset ([#2486](https://github.com/navikt/aksel/pull/2486))
|
||||
|
||||
## 5.9
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -946,10 +966,6 @@
|
||||
|
||||
## 5.7
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- :lipstick: Chips.Toggle: Ikon i uvalgt tilstand ([#2395](https://github.com/navikt/aksel/pull/2395))
|
||||
@@ -990,15 +1006,11 @@
|
||||
|
||||
- :lipstick: CopyButton: Justert padding, gap og animasjon ([#2355](https://github.com/navikt/aksel/pull/2355))
|
||||
|
||||
## 5.6
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
|
||||
- Ikoner: Nye ikoner `ChevronLeftFirstCircle` og `ChevronRightLastCircle` ([#2365](https://github.com/navikt/aksel/pull/2365))
|
||||
|
||||
- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
|
||||
|
||||
* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
|
||||
## 5.6
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -1050,6 +1062,14 @@
|
||||
|
||||
- MonthPicker: Tilpasset padding og sizing på mobil. ([#2311](https://github.com/navikt/aksel/pull/2311))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`. ([#2300](https://github.com/navikt/aksel/pull/2300))
|
||||
|
||||
- Ikoner: Nye ikoner `book` og `books` ([#2313](https://github.com/navikt/aksel/pull/2313))
|
||||
|
||||
* Ikoner: Nye ikoner `ClipboardCheckmark` og `ClipboardLink` ([#2307](https://github.com/navikt/aksel/pull/2307))
|
||||
|
||||
## 5.5
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1090,10 +1110,6 @@
|
||||
|
||||
## 5.3
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- :bug: Popover: sjekk at det er et HTML-element som får fokus ([#2258](https://github.com/navikt/aksel/pull/2258))
|
||||
@@ -1130,11 +1146,11 @@
|
||||
|
||||
- Typography: Oppdatert med typo-klasser for `textColor`, `weight`, `align`, `visuallyHidden` og `truncated`. ([#2211](https://github.com/navikt/aksel/pull/2211))
|
||||
|
||||
## 5.2
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
|
||||
- :bug: SVG import map er nå riktig path ([#2250](https://github.com/navikt/aksel/pull/2250))
|
||||
|
||||
## 5.2
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -1152,6 +1168,10 @@
|
||||
|
||||
* Hovering over combobox dropdown will move selection/focus in the list, so we don't end up with a split focus, and reversely when moving focus while hovering ([#2193](https://github.com/navikt/aksel/pull/2193))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Ikoner: Oppdatert ikonpakke ([#2197](https://github.com/navikt/aksel/pull/2197))
|
||||
|
||||
## 5.1
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1367,6 +1387,12 @@
|
||||
|
||||
* Fikset klassenavn brukt for popover i Datepicker og Monthpicker ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Shadow-tokens er oppdatert til mer tydeligere varianter ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
@@ -1377,12 +1403,6 @@
|
||||
|
||||
* Shadow-tokens er oppdatert: Datepicker har nå ikke border, Modal bruker shadow-xlarge, LinkCard bruker shadow-xsmall ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Shadow-tokens er oppdatert ([PR](https://github.com/navikt/aksel/pull/2041))
|
||||
|
||||
- Oppdatert text-subtle og icon-subtle tokens til 700-skala (tidligere 600). ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
## 4.3
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1407,14 +1427,6 @@
|
||||
|
||||
## 4.1
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Fikset JSDom-problemer ved testing av Timeline
|
||||
@@ -1439,6 +1451,10 @@
|
||||
|
||||
- Accordion: La til `indent`-prop ([PR](https://github.com/navikt/aksel/pull/2027))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
|
||||
@@ -1455,18 +1471,16 @@
|
||||
|
||||
- Alle description-felter på fieldsets har nå `text-subtle` som farge. ([PR](https://github.com/navikt/aksel/pull/2036))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- :tada: Fargetokens for datavisualisering. ([PR](https://github.com/navikt/aksel/pull/2032))
|
||||
- Deprecated klassenavn `navds-chips--icon-left` ([PR](https://github.com/navikt/aksel/pull/2035))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Nye ikoner `ChevronRightLast` og `ChevronLeftLast` ([PR](https://github.com/navikt/aksel/pull/2054))
|
||||
|
||||
## 4.0
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Datepicker og Monthpicker er ute av beta. [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h4ef68ae743b0) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
@@ -1483,16 +1497,14 @@
|
||||
|
||||
- Styling for flyttede komponenter finnes nå på CDN [Guide](https://aksel.nav.no/grunnleggende/kode/css-import)
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- Codemod for migrering av Datepicker/Monthpicker ut av Beta. `npx @navikt/aksel codemod v4-date` ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
- Codemods for migrering fra `@navikt/ds-react-internal` til `@navikt/ds-react` [Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h3b8538e1981d) ([PR](https://github.com/navikt/aksel/pull/2026))
|
||||
|
||||
## 3.4
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))
|
||||
|
||||
* Inkluderer nå dist-mappe i release
|
||||
|
||||
- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
|
||||
@@ -1501,6 +1513,14 @@
|
||||
|
||||
- Tag: `moderate`-variant ([PR](https://github.com/navikt/aksel/pull/2010))
|
||||
|
||||
### @navikt/aksel-stylelint
|
||||
|
||||
- La til riktige dependencies ([PR](https://github.com/navikt/aksel/pull/2017))
|
||||
|
||||
* Inkluderer nå dist-mappe i release
|
||||
|
||||
- Stylelint-pakke for Aksel ([PR](https://github.com/navikt/aksel/pull/1973))
|
||||
|
||||
## 3.3
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1511,10 +1531,6 @@
|
||||
|
||||
## 3.2
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- Search: Støtter nå htmlSize-prop ([PR](https://github.com/navikt/aksel/pull/2000))
|
||||
@@ -1533,6 +1549,10 @@
|
||||
|
||||
- CopyButton: `xsmall`-size for bruk i tabeller ([PR](https://github.com/navikt/aksel/pull/1994))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Nye ikoner `FileParagraph` og `FilePlus` ([PR](https://github.com/navikt/aksel/pull/1998))
|
||||
|
||||
## 3.1
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1565,6 +1585,14 @@
|
||||
|
||||
## 2.9
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
|
||||
|
||||
### @navikt/aksel
|
||||
|
||||
- :truck: Flyttet Codemods fra `@navikt/ds-codemods` -> `@navikt/aksel`. `@navikt/ds-codemods` regnes nå som deprecated ([PR](https://github.com/navikt/aksel/pull/1952))
|
||||
@@ -1579,28 +1607,8 @@
|
||||
|
||||
* Nye ikoner `BulletList` og `NumberList` ([PR](https://github.com/navikt/aksel/pull/1950))
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ExpansionCard: Støtter nå `aria-labelledby` i tillegg til `aria-label` ([PR](https://github.com/navikt/aksel/pull/1944))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- CSS nå tilgjengelig som separate filer: Kan lastest fra CDN, minified-versjoner tilgjengelig ([PR](https://github.com/navikt/aksel/pull/1941))
|
||||
|
||||
## 2.8
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
|
||||
|
||||
* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
|
||||
|
||||
- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
|
||||
|
||||
* Nye ikoner `VideoSlash` og `VideoSlashFill`
|
||||
|
||||
- Fikset Sourcemap-bug
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
- ExpansionCard: ExpansionCard.Content sendte ikke `className` videre
|
||||
@@ -1635,8 +1643,26 @@
|
||||
|
||||
- ExpansioCard: Oppdatert typografi ([PR](https://github.com/navikt/aksel/pull/1870))
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- :tada: Nye ikoner `HandKnot` og `HandKnotFilled` ([PR](https://github.com/navikt/aksel/pull/1928))
|
||||
|
||||
* Oppdatert `InformationSquare`-ikon ([PR](https://github.com/navikt/aksel/pull/1921))
|
||||
|
||||
- Oppdatert `VideoSlack`, `Questionmark` og `Information`-ikoner ([PR](https://github.com/navikt/aksel/pull/1909))
|
||||
|
||||
* Nye ikoner `VideoSlash` og `VideoSlashFill`
|
||||
|
||||
- Fikset Sourcemap-bug
|
||||
|
||||
## 2.7
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
|
||||
|
||||
* ToggleGroup: Fikset token-bug
|
||||
|
||||
### @navikt/aksel-icons
|
||||
|
||||
- Nye ikoner `CaretUpDownFilledDown`, `CaretUpDownFilledUp`, `CloudDown`, `CloudDownFill`, `CloudUp`, `CloudUpFill`, `HddDown`, `HddDownFill`, `HddUp`, `HddUpFill`, `Inbox`, `InboxDown`, `InboxDownFill`, `InboxFill`, `InboxUp`, `InboxUpFill`, `ShoppingBasket`, `ShoppingBasketFill`
|
||||
@@ -1645,12 +1671,6 @@
|
||||
|
||||
- Ny ikonpakke med for core icons 3! `@navikt/aksel-icons` ([PR](https://github.com/navikt/aksel/pull/1847))
|
||||
|
||||
### @navikt/ds-css
|
||||
|
||||
- Tabs: La til focus-markering for Tabs.Panel ([PR](https://github.com/navikt/aksel/pull/1863))
|
||||
|
||||
* ToggleGroup: Fikset token-bug
|
||||
|
||||
## 2.6
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1665,14 +1685,14 @@
|
||||
|
||||
- List: Refaktorert nestede lister
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Breakpoint-tokens er lagt til. Overskriver native tailwind-breakpoints ([PR](https://github.com/navikt/aksel/pull/1832))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Breakpoint-tokens lagt til ([PR](https://github.com/navikt/aksel/pull/1832))
|
||||
|
||||
## 2.4
|
||||
|
||||
### @navikt/ds-react
|
||||
@@ -1765,6 +1785,10 @@
|
||||
|
||||
* Fonter blir bruk i all typografi blir nå lastet fra CDN
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
|
||||
|
||||
### @navikt/ds-tokens
|
||||
|
||||
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
|
||||
@@ -1781,10 +1805,6 @@
|
||||
|
||||
* Tokens: Alle komponenter bruker nå semantiske tokens for som standard, med innebygd støtte for komponent-spesifikke tokens.
|
||||
|
||||
### @navikt/ds-tailwind
|
||||
|
||||
- Alle token er oppdatert til nytt format. ([Guide](https://aksel.nav.no/grunnleggende/kode/migrering#h76f47744d112))
|
||||
|
||||
## 1.5
|
||||
|
||||
### @navikt/ds-react
|
||||
|
||||
@@ -15,10 +15,10 @@
|
||||
"playroom"
|
||||
],
|
||||
"dependencies": {
|
||||
"@navikt/aksel-icons": "^7.12.1",
|
||||
"@navikt/ds-css": "^7.12.1",
|
||||
"@navikt/ds-react": "^7.12.1",
|
||||
"@navikt/ds-tailwind": "^7.12.1",
|
||||
"@navikt/ds-tokens": "^7.12.1"
|
||||
"@navikt/aksel-icons": "^7.13.0",
|
||||
"@navikt/ds-css": "^7.13.0",
|
||||
"@navikt/ds-react": "^7.13.0",
|
||||
"@navikt/ds-tailwind": "^7.13.0",
|
||||
"@navikt/ds-tokens": "^7.13.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.menuSection {
|
||||
padding: var(--a-spacing-2);
|
||||
border-radius: var(--a-border-radius-medium);
|
||||
}
|
||||
|
||||
.menuSection[data-type="darkside"] {
|
||||
background-color: var(--ax-bg-brand-magenta-moderate);
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { Box, Show } from "@navikt/ds-react";
|
||||
import { SidebarT } from "@/types";
|
||||
import { StatusTag } from "@/web/StatusTag";
|
||||
import { Menu, MenuHeading, MenuLi, MenuLink, MenuUl } from "@/web/menu/Menu";
|
||||
import styles from "./Sidebar.module.css";
|
||||
|
||||
const Sidebar = ({
|
||||
kategori,
|
||||
@@ -21,7 +22,7 @@ const Sidebar = ({
|
||||
className="w-sidebar shrink-0 self-start"
|
||||
>
|
||||
<Menu loggingContext="meny" variant="action">
|
||||
<ul className="space-y-6">
|
||||
<ul className="space-y-4">
|
||||
{links.map((section) => (
|
||||
<Section key={section.value} section={section} />
|
||||
))}
|
||||
@@ -38,8 +39,12 @@ function Section({ section }: { section: SidebarT[number] }) {
|
||||
const isActive = (slug: string) => {
|
||||
return asPath.split("#")[0] === `/${slug}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<li>
|
||||
<li
|
||||
className={styles.menuSection}
|
||||
data-type={section.value === "darkside" ? "darkside" : undefined}
|
||||
>
|
||||
<MenuHeading as="div">{section.title}</MenuHeading>
|
||||
<MenuUl>
|
||||
{section.pages.map((page) => (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { HourglassBottomFilledIcon } from "@navikt/aksel-icons";
|
||||
import { BodyLong, Button, Heading } from "@navikt/ds-react";
|
||||
import { BodyLong, Button, Heading, Link } from "@navikt/ds-react";
|
||||
import { useSanityData } from "@/hooks/useSanityData";
|
||||
|
||||
export default function OutdatedAlert() {
|
||||
@@ -20,9 +20,10 @@ export default function OutdatedAlert() {
|
||||
</BodyLong>
|
||||
{ctx?.validUser && (
|
||||
<>
|
||||
<BodyLong className="mb-2">
|
||||
Du ser også dette fordi du kan redigere denne artikkelen. Har du
|
||||
lyst til å kontrollere innholdet nå?
|
||||
<BodyLong className="mb-2 mt-2">
|
||||
<Link href="https://aksel.nav.no/side/skriv-for-aksel#a5b79ddd59da">
|
||||
Hvordan oppdaterer man innhold i Sanity?
|
||||
</Link>
|
||||
</BodyLong>
|
||||
<Button
|
||||
as="a"
|
||||
@@ -31,7 +32,7 @@ export default function OutdatedAlert() {
|
||||
size="small"
|
||||
variant="secondary-neutral"
|
||||
>
|
||||
Kontroller innholdet
|
||||
Har du lyst til å kontrollere innholdet nå?
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -10,11 +10,17 @@ function Footer() {
|
||||
|
||||
const MILJO_URL = "https://www.nav.no/dekoratoren";
|
||||
|
||||
function Env() {
|
||||
function Env({ languages }: { languages?: { locale: string; url: string }[] }) {
|
||||
return (
|
||||
<div
|
||||
id="decorator-env"
|
||||
data-src={`${MILJO_URL}/env?context=privatperson&simple=true`}
|
||||
data-src={`${MILJO_URL}/env?context=privatperson&simple=true${
|
||||
languages
|
||||
? `&availableLanguages=[${languages
|
||||
.map((language) => JSON.stringify(language))
|
||||
.join(",")}]`
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,14 +43,22 @@ export const categorizeIcons = (
|
||||
};
|
||||
|
||||
const noFill = (icon: (typeof meta)[1], icons: (typeof meta)[1][]) => {
|
||||
const foundFill = icons.find(
|
||||
(x) => x.name.endsWith("Fill") && x.name.replace("Fill", "") === icon.name,
|
||||
);
|
||||
const foundFill = icons.find((x) => {
|
||||
if (x.name.endsWith("Fill") || x.name.endsWith("Filled")) {
|
||||
return (
|
||||
x.name.replace("Fill", "") === icon.name ||
|
||||
x.name.replace("Filled", "") === icon.name
|
||||
);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return !foundFill;
|
||||
};
|
||||
|
||||
/* Some icons are mistakenly labeled with "filled", so we need to handle both "fill" and "filled" */
|
||||
export const getFillIcon = (icons: (typeof meta)[1][]) => {
|
||||
return icons.filter(
|
||||
(x, _, z) => x.variant.toLowerCase() === "fill" || noFill(x, z),
|
||||
(x, _, z) => x.variant.toLowerCase().startsWith("fill") || noFill(x, z),
|
||||
);
|
||||
};
|
||||
@@ -5,3 +5,39 @@
|
||||
.menuList .menuList .menuListItem {
|
||||
padding-inline-start: var(--a-spacing-5);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="action"][data-current="true"] {
|
||||
color: var(--a-deepblue-700);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="action"][data-current="true"] > span {
|
||||
background-color: var(--a-surface-selected);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="action"][data-current="true"]::before {
|
||||
background-color: var(--a-deepblue-700);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="neutral"][data-current="true"] {
|
||||
color: var(--a-text-default);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="neutral"][data-current="true"] > span {
|
||||
background-color: var(--a-surface-neutral-subtle);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="neutral"][data-current="true"]::before {
|
||||
background-color: var(--a-gray-700);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="darkside"][data-current="true"] {
|
||||
color: var(--ax-text-brand-magenta);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="darkside"][data-current="true"]::before {
|
||||
background-color: var(--ax-bg-brand-magenta-strong-pressed);
|
||||
}
|
||||
|
||||
.menuListItem[data-type="darkside"][data-current="true"] > span {
|
||||
background-color: var(--ax-bg-brand-magenta-moderate-pressedA);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "clsx";
|
||||
import Link from "next/link";
|
||||
import { createContext, useContext } from "react";
|
||||
import { HTMLAttributes, createContext, useContext } from "react";
|
||||
import { BodyShort, Label } from "@navikt/ds-react";
|
||||
import { amplitudeLogNavigation } from "@/logging";
|
||||
import styles from "./Menu.module.css";
|
||||
@@ -52,10 +52,10 @@ export function MenuUl({ children, id, className }: MenuListProps) {
|
||||
|
||||
type MenuLiProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
} & HTMLAttributes<HTMLLIElement>;
|
||||
|
||||
export function MenuLi({ children }: MenuLiProps) {
|
||||
return <li className="group">{children}</li>;
|
||||
export function MenuLi(props: MenuLiProps) {
|
||||
return <li className="group" {...props} />;
|
||||
}
|
||||
|
||||
type MenuLinkProps = {
|
||||
@@ -79,10 +79,13 @@ export function MenuLink({
|
||||
throw new Error("MenuListItem must be used inside a Menu component");
|
||||
}
|
||||
|
||||
const isDarksideOverride = href.includes("/darkside/");
|
||||
|
||||
return (
|
||||
<div className="relative scroll-m-6 border-l border-border-subtle" id={id}>
|
||||
<BodyShort
|
||||
data-type={ctx.variant}
|
||||
data-type={isDarksideOverride ? "darkside" : ctx.variant}
|
||||
data-current={selected}
|
||||
size="small"
|
||||
as={Link}
|
||||
prefetch={false}
|
||||
@@ -102,24 +105,10 @@ export function MenuLink({
|
||||
"text-text-subtle before:w-0 before:bg-gray-400 before:duration-100 before:ease-linear hover:text-text-default hover:before:w-1":
|
||||
!selected,
|
||||
"before:w-1": selected,
|
||||
"text-deepblue-700 before:bg-deepblue-700":
|
||||
selected && ctx.variant === "action",
|
||||
"text-text-default before:bg-gray-700":
|
||||
selected && ctx.variant === "neutral",
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cl(
|
||||
"w-full rounded px-2 py-1 transition-colors duration-100 ease-out",
|
||||
{
|
||||
"bg-surface-selected": selected && ctx.variant === "action",
|
||||
"bg-surface-neutral-subtle":
|
||||
selected && ctx.variant === "neutral",
|
||||
"bg-transparent": !selected,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<span className="w-full rounded px-2 py-1 transition-colors duration-100 ease-out">
|
||||
{children}
|
||||
</span>
|
||||
</BodyShort>
|
||||
|
||||
@@ -3,8 +3,8 @@ import { expect, test } from "@playwright/test";
|
||||
test.describe("Check website search", () => {
|
||||
test("Check newest article list", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/");
|
||||
await page.waitForLoadState("networkidle");
|
||||
await page.waitForTimeout(3000);
|
||||
await page.waitForLoadState("domcontentloaded");
|
||||
await page.waitForTimeout(5000);
|
||||
await page.getByRole("button", { name: "Søk" }).click();
|
||||
|
||||
/* Check that we have more than 0 "nyeste artikler" */
|
||||
@@ -17,8 +17,8 @@ test.describe("Check website search", () => {
|
||||
|
||||
test("Test searching for 'link'", async ({ page }) => {
|
||||
await page.goto("http://localhost:3000/");
|
||||
await page.waitForLoadState("networkidle");
|
||||
await page.waitForTimeout(3000);
|
||||
await page.waitForLoadState("domcontentloaded");
|
||||
await page.waitForTimeout(5000);
|
||||
await page.getByRole("button", { name: "Søk" }).click();
|
||||
|
||||
await page.getByPlaceholder("Søk på artikler, f.eks. Button").fill("link");
|
||||
|
||||
@@ -66,7 +66,6 @@
|
||||
"react-markdown": "^9.0.1",
|
||||
"react-responsive-masonry": "2.2.0",
|
||||
"react-rx": "^2.1.3",
|
||||
"react-snowfall": "^2.2.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"sanity": "3.59.0",
|
||||
"sanity-plugin-iframe-pane": "^3.1.6",
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { AppProps } from "next/app";
|
||||
import { useEffect } from "react";
|
||||
import "@navikt/ds-tokens/darkside-css";
|
||||
import { useCheckAuth } from "@/hooks/useCheckAuth";
|
||||
import { useHashScroll } from "@/hooks/useHashScroll";
|
||||
import { SanityDataContext } from "@/hooks/useSanityData";
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { SanityImageSource } from "@sanity/image-url/lib/types/types";
|
||||
import cl from "clsx";
|
||||
import { groq } from "next-sanity";
|
||||
import Link from "next/link";
|
||||
import { GetStaticProps } from "next/types";
|
||||
import { useState } from "react";
|
||||
import Snowfall from "react-snowfall";
|
||||
import {
|
||||
CompassIcon,
|
||||
ComponentIcon,
|
||||
@@ -198,17 +198,15 @@ const Forside = ({ page, tema, blocks }: PageProps["props"]) => {
|
||||
/>
|
||||
<Header />
|
||||
<main tabIndex={-1} id="hovedinnhold" className="focus:outline-none">
|
||||
{!pause && (
|
||||
<div aria-hidden>
|
||||
<Snowfall
|
||||
style={{ zIndex: 1 }}
|
||||
color="rgba(230, 241, 248, 0.9)"
|
||||
speed={reducedMotion || pause ? [0, 0] : [0.1, 0.2]}
|
||||
wind={reducedMotion || pause ? [0, 0] : [-0.2, 0.2]}
|
||||
snowflakeCount={600}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-violet-600 p-4 text-center text-xl text-white">
|
||||
<Link
|
||||
href="/darkside"
|
||||
target="_blank"
|
||||
className="rounded p-1 underline hover:decoration-2 focus:shadow-focus-inverted focus:outline-none"
|
||||
>
|
||||
Vi trenger testere fra team i Nav for darkmode og theming!
|
||||
</Link>
|
||||
</div>
|
||||
<div className="z-20 pb-28">
|
||||
<div className="relative mx-auto mb-12 mt-20 grid w-full place-items-center px-4 text-center sm:mt-36 sm:max-w-[632px] sm:px-6">
|
||||
<Heading
|
||||
|
||||
@@ -206,7 +206,12 @@ function Example() {
|
||||
</div>
|
||||
</VStack>
|
||||
</Page.Block>
|
||||
<Env />
|
||||
<Env
|
||||
languages={[
|
||||
{ locale: "nb", url: "https://www.nav.no" },
|
||||
{ locale: "en", url: "https://www.nav.no/en" },
|
||||
]}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
+6
-1
@@ -218,7 +218,12 @@ function Example() {
|
||||
</div>
|
||||
</VStack>
|
||||
</Page.Block>
|
||||
<Env />
|
||||
<Env
|
||||
languages={[
|
||||
{ locale: "nb", url: "https://www.nav.no" },
|
||||
{ locale: "en", url: "https://www.nav.no/en" },
|
||||
]}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -200,7 +200,12 @@ function Example() {
|
||||
</div>
|
||||
</VStack>
|
||||
</Page.Block>
|
||||
<Env />
|
||||
<Env
|
||||
languages={[
|
||||
{ locale: "nb", url: "https://www.nav.no" },
|
||||
{ locale: "en", url: "https://www.nav.no/en" },
|
||||
]}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -156,7 +156,12 @@ function Example() {
|
||||
<FormNavigation />
|
||||
</VStack>
|
||||
</Page.Block>
|
||||
<Env />
|
||||
<Env
|
||||
languages={[
|
||||
{ locale: "nb", url: "https://www.nav.no" },
|
||||
{ locale: "en", url: "https://www.nav.no/en" },
|
||||
]}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -53,6 +53,7 @@ export const grunnleggendeKategorier = [
|
||||
{ title: "Introduksjon", value: "introduksjon" },
|
||||
{ title: "Brand", value: "brand" },
|
||||
{ title: "Styling", value: "styling" },
|
||||
{ title: "Darkside", value: "darkside" },
|
||||
{ title: "Guider", value: "guider" },
|
||||
{ title: "Kode", value: "kode" },
|
||||
];
|
||||
|
||||
@@ -3668,7 +3668,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@navikt/aksel-icons@npm:^7.12.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
"@navikt/aksel-icons@npm:^7.13.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
|
||||
dependencies:
|
||||
@@ -3699,8 +3699,8 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
|
||||
dependencies:
|
||||
"@navikt/ds-css": "npm:^7.12.1"
|
||||
"@navikt/ds-tokens": "npm:^7.12.1"
|
||||
"@navikt/ds-css": "npm:^7.13.0"
|
||||
"@navikt/ds-tokens": "npm:^7.13.0"
|
||||
concurrently: "npm:9.0.1"
|
||||
postcss-selector-parser: "npm:^6.0.13"
|
||||
postcss-value-parser: "npm:^4.2.0"
|
||||
@@ -3715,7 +3715,7 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/aksel@workspace:@navikt/aksel"
|
||||
dependencies:
|
||||
"@navikt/ds-css": "npm:^7.12.1"
|
||||
"@navikt/ds-css": "npm:^7.13.0"
|
||||
axios: "npm:1.7.4"
|
||||
chalk: "npm:4.1.0"
|
||||
clipboardy: "npm:^2.3.0"
|
||||
@@ -3736,11 +3736,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-css@npm:*, @navikt/ds-css@npm:^7.12.1, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
"@navikt/ds-css@npm:*, @navikt/ds-css@npm:^7.13.0, @navikt/ds-css@workspace:@navikt/core/css":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-css@workspace:@navikt/core/css"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": "npm:^7.12.1"
|
||||
"@navikt/ds-tokens": "npm:^7.13.0"
|
||||
"@types/clean-css": "npm:4.2.11"
|
||||
autoprefixer: "npm:^10.4.20"
|
||||
browserslist: "npm:^4.24.2"
|
||||
@@ -3760,14 +3760,14 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.12.1, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
"@navikt/ds-react@npm:*, @navikt/ds-react@npm:^7.13.0, @navikt/ds-react@workspace:@navikt/core/react":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-react@workspace:@navikt/core/react"
|
||||
dependencies:
|
||||
"@floating-ui/react": "npm:0.25.4"
|
||||
"@floating-ui/react-dom": "npm:^2.0.9"
|
||||
"@navikt/aksel-icons": "npm:^7.12.1"
|
||||
"@navikt/ds-tokens": "npm:^7.12.1"
|
||||
"@navikt/aksel-icons": "npm:^7.13.0"
|
||||
"@navikt/ds-tokens": "npm:^7.13.0"
|
||||
"@testing-library/dom": "npm:10.4.0"
|
||||
"@testing-library/jest-dom": "npm:^6.6.3"
|
||||
"@testing-library/react": "npm:^16.1.0"
|
||||
@@ -3798,11 +3798,11 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tailwind@npm:^7.12.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
"@navikt/ds-tailwind@npm:^7.13.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
|
||||
dependencies:
|
||||
"@navikt/ds-tokens": "npm:^7.12.1"
|
||||
"@navikt/ds-tokens": "npm:^7.13.0"
|
||||
color: "npm:4.2.3"
|
||||
lodash: "npm:^4.17.21"
|
||||
tailwindcss: "npm:^3.3.3"
|
||||
@@ -3812,7 +3812,7 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@navikt/ds-tokens@npm:^7.12.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
"@navikt/ds-tokens@npm:^7.13.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
|
||||
dependencies:
|
||||
@@ -7614,11 +7614,11 @@ __metadata:
|
||||
version: 0.0.0-use.local
|
||||
resolution: "aksel.nav.no@workspace:aksel.nav.no"
|
||||
dependencies:
|
||||
"@navikt/aksel-icons": "npm:^7.12.1"
|
||||
"@navikt/ds-css": "npm:^7.12.1"
|
||||
"@navikt/ds-react": "npm:^7.12.1"
|
||||
"@navikt/ds-tailwind": "npm:^7.12.1"
|
||||
"@navikt/ds-tokens": "npm:^7.12.1"
|
||||
"@navikt/aksel-icons": "npm:^7.13.0"
|
||||
"@navikt/ds-css": "npm:^7.13.0"
|
||||
"@navikt/ds-react": "npm:^7.13.0"
|
||||
"@navikt/ds-tailwind": "npm:^7.13.0"
|
||||
"@navikt/ds-tokens": "npm:^7.13.0"
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
@@ -19708,7 +19708,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-fast-compare@npm:^3.1.1, react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
|
||||
"react-fast-compare@npm:^3.1.1, react-fast-compare@npm:^3.2.0":
|
||||
version: 3.2.2
|
||||
resolution: "react-fast-compare@npm:3.2.2"
|
||||
checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c
|
||||
@@ -19991,18 +19991,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-snowfall@npm:^2.2.0":
|
||||
version: 2.2.0
|
||||
resolution: "react-snowfall@npm:2.2.0"
|
||||
dependencies:
|
||||
react-fast-compare: "npm:^3.2.2"
|
||||
peerDependencies:
|
||||
react: ^16.8 || 17.x || 18.x
|
||||
react-dom: ^16.8 || 17.x || 18.x
|
||||
checksum: 10/ef9945ec75294e44ff17ec2b90f3e6ab9ec07f2a04804b253fc5737e9838baa20085351d019dc6a366f24874f0c58e8360d23b38a08242a022ff86e3a68ed22c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-style-proptype@npm:^3.2.2":
|
||||
version: 3.2.2
|
||||
resolution: "react-style-proptype@npm:3.2.2"
|
||||
@@ -24800,7 +24788,6 @@ __metadata:
|
||||
react-markdown: "npm:^9.0.1"
|
||||
react-responsive-masonry: "npm:2.2.0"
|
||||
react-rx: "npm:^2.1.3"
|
||||
react-snowfall: "npm:^2.2.0"
|
||||
remark-gfm: "npm:^4.0.0"
|
||||
rss: "npm:^1.2.2"
|
||||
sanity: "npm:3.59.0"
|
||||
|
||||
Reference in new issue
Block a user