diff --git a/packages/components-css/side-navigation/README.md b/packages/components-css/side-navigation/README.md new file mode 100644 index 0000000..ddcbf7d --- /dev/null +++ b/packages/components-css/side-navigation/README.md @@ -0,0 +1,3 @@ + + +# Kernteam side-navigation component diff --git a/packages/components-css/side-navigation/index.scss b/packages/components-css/side-navigation/index.scss new file mode 100644 index 0000000..a06dd6f --- /dev/null +++ b/packages/components-css/side-navigation/index.scss @@ -0,0 +1,111 @@ +/** + * @license EUPL-1.2 + * Copyright (c) 2024 Community for NL Design System + */ + +.kernteam-side-navigation { + border-inline-end-color: var(--kernteam-side-navigation-border-inline-end-color); + border-inline-end-style: var(--kernteam-side-navigation-border-inline-end-style); + border-inline-end-width: var(--kernteam-side-navigation-border-inline-end-width); + display: flex; + flex-direction: column; + inline-size: var(--kernteam-side-navigation-inline-size); + transition: inline-size 200ms ease; +} + +.kernteam-side-navigation--hidden { + inline-size: 48px; +} + +.kernteam-side-navigation--hidden .kernteam-side-navigation__content { + overflow-x: hidden; + visibility: hidden; +} + +.kernteam-side-navigation-nav { + flex-grow: 1; +} + +.kernteam-side-navigation__toggle-button { + padding-inline-start: var(--kernteam-side-navigation-toggle-button-padding-inline-start); +} + +.kernteam-menu-list { + --utrecht-link-color: var(--kernteam-menu-list-link-color); + --utrecht-link-text-decoration: none; + --utrecht-button-subtle-color: var(--utrecht-link-color); + --utrecht-button-focus-color: var(--kernteam-focus-color); + --utrecht-button-icon-size: 28px; + + display: block; + list-style: none; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: 0; + padding-inline-start: 0; +} + +.kernteam-menu-list-item__label { + align-items: center; + display: inline-flex; + inline-size: 100%; +} + +.kernteam-menu-list-item__label:hover { + background-color: var(--kernteam-menu-list-link-hover-background-color); +} + +.kernteam-menu-list__icon-button { + cursor: pointer; +} + +.kernteam-menu-list-item__link { + display: flex; + flex: 1; + line-height: 1.5; + margin-inline-start: 4px; + padding-block: 0.75rem; + padding-inline: 0.75rem; +} + +.kernteam-menu-list-item__link--current { + background-color: var(--kernteam-menu-list-link-current-background-color); + border-inline-start-color: var(--kernteam-menu-list-link-border-inline-start-color); + border-inline-start-style: var(--kernteam-menu-list-link-border-inline-start-style); + border-inline-start-width: var(--kernteam-menu-list-link-border-inline-start-width); + margin-inline-start: 0; +} + +.kernteam-menu-list-item__link:hover { + border-inline-start-color: var(--kernteam-menu-list-link-border-inline-start-color); + border-inline-start-style: var(--kernteam-menu-list-link-border-inline-start-style); + border-inline-start-width: var(--kernteam-menu-list-link-border-inline-start-width); + margin-inline-start: 0; +} + +.kernteam-menu-list-item__link:focus-visible { + outline: var(--kernteam-focus-outline-width) var(--kernteam-focus-outline-style) var(--kernteam-focus-outline-color); +} + +.kernteam-menu-list .kernteam-menu-list .kernteam-menu-list-item__link { + padding-inline-start: 24px; +} + +.kernteam-menu-list .kernteam-menu-list .kernteam-menu-list .kernteam-menu-list-item__link { + padding-inline-start: 40px; +} + +/* HACK: these fixes need to be made in utrecht too, or in a button implementation based on Utrecht CSS just for the website */ +.utrecht-button:focus { + background-color: var(--_utrecht-button-background-color) !important; + border-color: var(--_utrecht-button-border-color) !important; + color: var(--_utrecht-button-color) !important; + scale: var(--utrecht-button-scale, 1) !important; +} + +.utrecht-button:focus-visible { + background-color: var(--_utrecht-button-focus-background-color) !important; + border-color: var(--_utrecht-button-focus-border-color) !important; + color: var(--_utrecht-button-focus-color) !important; + scale: var(--utrecht-button-focus-scale, 1) !important; +} diff --git a/packages/components-react/package.json b/packages/components-react/package.json index 8dffdc8..c1a0b89 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -43,6 +43,8 @@ "@babel/preset-typescript": "7.24.7", "@babel/runtime": "7.24.7", "@nl-design-system-kernteam/components-css": "workspace:*", + "@utrecht/component-library-react": "5.0.0", + "@tabler/icons-react": "3.12.0", "@rollup/plugin-babel": "6.0.4", "@rollup/plugin-commonjs": "26.0.1", "@rollup/plugin-node-resolve": "15.2.3", diff --git a/packages/components-react/src/SideNavigation/index.tsx b/packages/components-react/src/SideNavigation/index.tsx new file mode 100644 index 0000000..7051a60 --- /dev/null +++ b/packages/components-react/src/SideNavigation/index.tsx @@ -0,0 +1,87 @@ +import { IconArrowBarToLeft, IconArrowBarToRight, IconChevronDown, IconChevronUp } from '@tabler/icons-react'; +import { Button, Link } from '@utrecht/component-library-react/dist/css-module'; +import clsx from 'clsx'; +import { HTMLAttributes, PropsWithChildren, useState } from 'react'; +import '@nl-design-system-kernteam/components-css/side-navigation/index.scss'; + +export interface SideNavigationProps extends HTMLAttributes { + listItems: MenuListItemProps[]; +} + +export const SideNavigation = ({ className, listItems, ...restProps }: SideNavigationProps) => { + const [open, setOpen] = useState(true); + + const sideNavClassname = clsx(className, 'kernteam-side-navigation', { + ['kernteam-side-navigation--hidden']: !open, + }); + + return ( +
+ +
+ +
+
+ ); +}; + +export interface MenuListItemProps { + label: string; + href: string; + children?: MenuListItemProps[]; +} + +export const MenuListItem = (props: MenuListItemProps) => { + const [open, setOpen] = useState(false); + + return ( +
  • +
    + + {props.label} + + {props.children && ( + + )} +
    + {props.children && open && ( + <> + + {props.children.map((child, index) => ( + + ))} + + + )} +
    • + ); +}; + +export const MenuList = ({ children, ...restProps }: PropsWithChildren) => { + return ( + + ); +}; diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts index fe9c53c..d12b900 100644 --- a/packages/components-react/src/index.ts +++ b/packages/components-react/src/index.ts @@ -1 +1,2 @@ export { Button } from './Button'; +export * from './SideNavigation'; diff --git a/packages/storybook/config/ParameterArgsDecorator.tsx b/packages/storybook/config/ParameterArgsDecorator.tsx index f81f692..d338507 100644 --- a/packages/storybook/config/ParameterArgsDecorator.tsx +++ b/packages/storybook/config/ParameterArgsDecorator.tsx @@ -1,12 +1,15 @@ import type { Decorator } from '@storybook/react'; +import { Document } from '@utrecht/component-library-react/dist/css-module'; export const ParameterArgsDecorator: Decorator = (Story, context) => { // Hack to make current args for a story available in the transformSource of the docs addon context.parameters['args'] = context.args; return ( -
    - +
    + + +
    ); }; diff --git a/packages/storybook/config/preview.ts b/packages/storybook/config/preview.tsx similarity index 95% rename from packages/storybook/config/preview.ts rename to packages/storybook/config/preview.tsx index bbd0332..850629e 100644 --- a/packages/storybook/config/preview.ts +++ b/packages/storybook/config/preview.tsx @@ -1,5 +1,5 @@ // import '@nl-design-system-unstable/voorbeeld-design-tokens/src/font.js'; -import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css'; +import '@nl-design-system-kernteam/design-tokens/dist/index.css'; import type { Preview } from '@storybook/react'; import { ParameterArgsDecorator } from './ParameterArgsDecorator'; diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 1f68ed6..f5568b4 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -37,10 +37,10 @@ "@storybook/react": "8.1.11", "@storybook/react-vite": "8.1.11", "@storybook/theming": "8.1.11", - "@tabler/icons-react": "3.8.0", + "@tabler/icons-react": "3.12.0", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", - "@utrecht/component-library-react": "4.0.0", + "@utrecht/component-library-react": "5.0.0", "@utrecht/web-component-library-react": "1.1.1", "@whitespace/storybook-addon-html": "6.1.1", "react": "18.3.1", diff --git a/packages/storybook/src/css-side-navigation.stories.tsx b/packages/storybook/src/css-side-navigation.stories.tsx new file mode 100644 index 0000000..b14b906 --- /dev/null +++ b/packages/storybook/src/css-side-navigation.stories.tsx @@ -0,0 +1,94 @@ +/* @license CC0-1.0 */ + +import readme from '@nl-design-system-kernteam/components-css/side-navigation/README.md?raw'; +import type { Meta, StoryObj } from '@storybook/react'; +import { SideNavigation } from '../../components-react/src'; + +const meta = { + title: 'CSS Component/Side Navigation', + id: 'css-side-nav', + component: SideNavigation, + argTypes: { + children: { + name: 'Content', + description: 'Button text', + type: { + name: 'string', + required: true, + }, + defaultValue: '', + }, + }, + args: { + children: 'Opslaan en verder', + }, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: readme, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + listItems: [ + { + label: 'Introductie', + href: '/', + }, + { + label: 'Stijl', + href: '/', + }, + { + label: 'Formulieren', + href: '/', + children: [ + { + label: 'Introductie formulieren', + href: '/', + }, + { + label: 'Buttons', + href: '/', + }, + { + label: 'Bevestigingspagina', + href: '/', + children: [ + { + label: 'Voorbeelden', + href: '/', + }, + { + label: 'Uitleg', + href: '/', + }, + ], + }, + ], + }, + { + label: 'WCAG', + href: '/', + children: [ + { + label: 'Introductie WCAG', + href: '/', + }, + { + label: 'Lorum Ipsum', + href: '/', + }, + ], + }, + ], + }, +}; diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json index 941753d..3c1ad3b 100644 --- a/packages/storybook/tsconfig.json +++ b/packages/storybook/tsconfig.json @@ -5,6 +5,6 @@ "skipLibCheck": true }, "extends": "../../tsconfig.json", - "include": ["config/**/*.ts", "src/**/*.ts", "src/**/*.tsx"], + "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"], "exclude": ["**/node_modules/*"] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78bc2bc..7798f06 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -129,6 +129,9 @@ importers: '@rollup/plugin-node-resolve': specifier: 15.2.3 version: 15.2.3(rollup@4.18.0) + '@tabler/icons-react': + specifier: 3.12.0 + version: 3.12.0(react@18.3.1) '@testing-library/dom': specifier: 10.3.0 version: 10.3.0 @@ -150,6 +153,9 @@ importers: '@types/react': specifier: 18.3.3 version: 18.3.3 + '@utrecht/component-library-react': + specifier: 5.0.0 + version: 5.0.0(@babel/runtime@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@vitejs/plugin-react': specifier: 4.3.1 version: 4.3.1(vite@5.3.3(@types/node@20.14.9)(sass@1.77.6)(terser@5.19.0)) @@ -268,8 +274,8 @@ importers: specifier: 8.1.11 version: 8.1.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@tabler/icons-react': - specifier: 3.8.0 - version: 3.8.0(react@18.3.1) + specifier: 3.12.0 + version: 3.12.0(react@18.3.1) '@types/react': specifier: 18.3.3 version: 18.3.3 @@ -277,8 +283,8 @@ importers: specifier: 18.3.0 version: 18.3.0 '@utrecht/component-library-react': - specifier: 4.0.0 - version: 4.0.0(@babel/runtime@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 5.0.0 + version: 5.0.0(@babel/runtime@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@utrecht/web-component-library-react': specifier: 1.1.1 version: 1.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2377,13 +2383,13 @@ packages: resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==} engines: {node: '>=14.16'} - '@tabler/icons-react@3.8.0': - resolution: {integrity: sha512-+M7x4uCmaZlFBuAXKnu7cCvjX48Ml//GJxgGTOoAq8N5R6NkIGV0o7UmGVlb9Vfw2GhJ638MSSJ7mksSjdSXgQ==} + '@tabler/icons-react@3.12.0': + resolution: {integrity: sha512-RnJl3HrCqInuC8JJEUxWuYP4OFNYnY2EUtBqZFSpYatPKY3AnvJBIrShJLHf3fiLPpo6xEYAIoB7Qow93JX0fQ==} peerDependencies: react: '>= 16' - '@tabler/icons@3.8.0': - resolution: {integrity: sha512-SVZSrb0REaTEu+soj+9RTnPpCqIWFYHJ0lhyk+oo6uXr33Ecx2JBcBGeEo/WbIWZg4UF8NIZSVKQgI2PHBokJA==} + '@tabler/icons@3.12.0': + resolution: {integrity: sha512-Im37ar/mQkqLb6XUXsU7nOc4/66VB9/3KLuZ+6tUsJKHHNLaDUkYfCTNG3pnGDI03laByxVf5+umSNK2yPTx8A==} '@testing-library/dom@10.1.0': resolution: {integrity: sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==} @@ -2754,8 +2760,8 @@ packages: '@ungap/structured-clone@1.2.0': resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} - '@utrecht/component-library-react@4.0.0': - resolution: {integrity: sha512-scrPPT3TM1ZGdTUBuQ4L72DW/dZyKacq+lrrjJfNpXB/xnSFeGLWi4gzR6xzg2c6q7ucUt0SKIYi6/W4r7USKg==} + '@utrecht/component-library-react@5.0.0': + resolution: {integrity: sha512-D8wSfBl1rCLA5zNj1wND2QaHBrlW5T5qZjlqvcYmQdvOOF+L+aQ8gxg3uo30FBvugvH2HDfOCc6qD8z7/+R+0A==} peerDependencies: '@babel/runtime': ^7.23.6 date-fns: ^2.30.0 @@ -3435,10 +3441,6 @@ packages: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} engines: {node: '>=0.8'} - clsx@1.2.1: - resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} - engines: {node: '>=6'} - clsx@2.1.1: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} @@ -11463,12 +11465,12 @@ snapshots: dependencies: defer-to-connect: 2.0.1 - '@tabler/icons-react@3.8.0(react@18.3.1)': + '@tabler/icons-react@3.12.0(react@18.3.1)': dependencies: - '@tabler/icons': 3.8.0 + '@tabler/icons': 3.12.0 react: 18.3.1 - '@tabler/icons@3.8.0': {} + '@tabler/icons@3.12.0': {} '@testing-library/dom@10.1.0': dependencies: @@ -11867,10 +11869,10 @@ snapshots: '@ungap/structured-clone@1.2.0': {} - '@utrecht/component-library-react@4.0.0(@babel/runtime@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@utrecht/component-library-react@5.0.0(@babel/runtime@7.24.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.24.7 - clsx: 1.2.1 + clsx: 2.1.1 lodash.chunk: 4.2.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -12686,8 +12688,6 @@ snapshots: clone@1.0.4: {} - clsx@1.2.1: {} - clsx@2.1.1: {} co@4.6.0: {} diff --git a/proprietary/design-tokens/src/brand/example/color.tokens.json b/proprietary/design-tokens/src/brand/example/color.tokens.json deleted file mode 100644 index 3b0a682..0000000 --- a/proprietary/design-tokens/src/brand/example/color.tokens.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "example": { - "color": { - "blue": { - "50": { "value": "cornflowerblue" } - }, - "grey": { - "100": { "value": "white" }, - "0": { "value": "black" } - } - } - } -} diff --git a/proprietary/design-tokens/src/common/example/focus.tokens.json b/proprietary/design-tokens/src/common/example/focus.tokens.json deleted file mode 100644 index 9a2e9c8..0000000 --- a/proprietary/design-tokens/src/common/example/focus.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "example": { - "focus": { - "outline-offset": { "value": "2px" } - } - } -} diff --git a/proprietary/design-tokens/src/common/kernteam/focus.tokens.json b/proprietary/design-tokens/src/common/kernteam/focus.tokens.json new file mode 100644 index 0000000..5706252 --- /dev/null +++ b/proprietary/design-tokens/src/common/kernteam/focus.tokens.json @@ -0,0 +1,27 @@ +{ + "kernteam": { + "focus": { + "background-color": { + "value": "#deff00" + }, + "color": { + "value": "#0D1F2A" + }, + "outline-color": { + "value": "#deff00" + }, + "inverse-outline-color": { + "value": "#0D1F2A" + }, + "outline-style": { + "value": "dotted" + }, + "outline-width": { + "value": "2px" + }, + "outline-offset": { + "value": "0" + } + } + } +} diff --git a/proprietary/design-tokens/src/common/utrecht/focus.tokens.json b/proprietary/design-tokens/src/common/utrecht/focus.tokens.json new file mode 100644 index 0000000..8495d5d --- /dev/null +++ b/proprietary/design-tokens/src/common/utrecht/focus.tokens.json @@ -0,0 +1,27 @@ +{ + "utrecht": { + "focus": { + "outline-width": { + "value": "{kernteam.focus.outline-width}" + }, + "inverse-outline-color": { + "value": "{kernteam.focus.inverse-outline-color}" + }, + "outline-color": { + "value": "{kernteam.focus.outline-color}" + }, + "background-color": { + "value": "{kernteam.focus.background-color}" + }, + "color": { + "value": "{kernteam.focus.color}" + }, + "outline-style": { + "value": "{kernteam.focus.outline-style}" + }, + "outline-offset": { + "value": "{kernteam.focus.outline-offset}" + } + } + } +} diff --git a/proprietary/design-tokens/src/components/example/button.tokens.json b/proprietary/design-tokens/src/components/example/button.tokens.json deleted file mode 100644 index e22c0b1..0000000 --- a/proprietary/design-tokens/src/components/example/button.tokens.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "example": { - "button": { - "background-color": { "value": "{example.color.blue.50}" }, - "color": { "value": "{example.color.grey.100}" } - } - } -} diff --git a/proprietary/design-tokens/src/components/kernteam/menu-list.tokens.json b/proprietary/design-tokens/src/components/kernteam/menu-list.tokens.json new file mode 100644 index 0000000..7da0d36 --- /dev/null +++ b/proprietary/design-tokens/src/components/kernteam/menu-list.tokens.json @@ -0,0 +1,18 @@ +{ + "kernteam": { + "menu-list": { + "link": { + "border-inline-start-color:": { "value": "#148839" }, + "border-inline-start-width": { "value": "4px" }, + "border-inline-start-style": { "value": "solid" }, + "color": { "value": "#0070a3" }, + "current": { + "background-color": { "value": "rgba(0, 0, 0, 0.05)" } + }, + "hover": { + "background-color": { "value": "rgba(0, 0, 0, 0.05)" } + } + } + } + } +} diff --git a/proprietary/design-tokens/src/components/kernteam/side-navigation.tokens.json b/proprietary/design-tokens/src/components/kernteam/side-navigation.tokens.json new file mode 100644 index 0000000..9e0462c --- /dev/null +++ b/proprietary/design-tokens/src/components/kernteam/side-navigation.tokens.json @@ -0,0 +1,13 @@ +{ + "kernteam": { + "side-navigation": { + "border-inline-end-color": { "value": "#dadde1" }, + "border-inline-end-width": { "value": "1px" }, + "border-inline-end-style": { "value": "solid" }, + "inline-size": { "value": "clamp(20rem, 30rem, 30vw)" }, + "toggle-button": { + "padding-inline-start": { "value": "12px" } + } + } + } +} diff --git a/proprietary/design-tokens/src/components/utrecht/button.tokens.json b/proprietary/design-tokens/src/components/utrecht/button.tokens.json new file mode 100644 index 0000000..8fb9b27 --- /dev/null +++ b/proprietary/design-tokens/src/components/utrecht/button.tokens.json @@ -0,0 +1,99 @@ +{ + "utrecht": { + "button": { + "color": { + "value": "#0D1F2A" + }, + "font-weight": { + "value": "600" + }, + "font-size": { + "value": "20px" + }, + "border-radius": { + "value": "0" + }, + "line-height": { + "value": "1" + }, + "padding-block-start": { + "value": "8px" + }, + "padding-block-end": { + "value": "8px" + }, + "padding-inline-start": { + "value": "16px" + }, + "padding-inline-end": { + "value": "16px" + }, + "icon": { + "size": { + "value": "32px" + }, + "gap": { + "value": "8px" + } + }, + "focus": { + "background-color": { + "value": "{kernteam.focus.background-color}" + }, + "color": { + "value": "{kernteam.focus.color}" + } + }, + "primary-action": { + "border-color": { + "value": "#148839" + }, + "background-color": { + "value": "#148839" + }, + "color": { + "value": "#ffffff" + }, + "hover": {}, + "focus": { + "background-color": { + "value": "{kernteam.focus.background-color}" + }, + "color": { + "value": "{kernteam.focus.color}" + } + } + }, + "secondary-action": { + "background-color": { + "value": "#ffffff" + }, + "border-color": { + "value": "#148839" + }, + "color": { + "value": "#148839" + }, + "hover": {}, + "focus": { + "background-color": { + "value": "{kernteam.focus.background-color}" + }, + "color": { + "value": "{kernteam.focus.color}" + } + } + }, + "subtle": { + "focus": { + "background-color": { + "value": "{kernteam.focus.background-color}" + }, + "color": { + "value": "{kernteam.focus.color}" + } + } + } + } + } +} diff --git a/proprietary/design-tokens/src/components/utrecht/document.tokens.json b/proprietary/design-tokens/src/components/utrecht/document.tokens.json new file mode 100644 index 0000000..4ff0396 --- /dev/null +++ b/proprietary/design-tokens/src/components/utrecht/document.tokens.json @@ -0,0 +1,11 @@ +{ + "utrecht": { + "document": { + "background-color": {}, + "color": {}, + "font-family": { "value": "Source Sans Pro, sans-serif" }, + "font-size": { "value": "18px" }, + "line-height": {} + } + } +} diff --git a/proprietary/design-tokens/src/components/utrecht/link.tokens.json b/proprietary/design-tokens/src/components/utrecht/link.tokens.json new file mode 100644 index 0000000..9c111e7 --- /dev/null +++ b/proprietary/design-tokens/src/components/utrecht/link.tokens.json @@ -0,0 +1,31 @@ +{ + "utrecht": { + "link": { + "color": { + "value": "#006FA3" + }, + "text-decoration-color": { + "value": "#52757E" + }, + "text-underline-offset": { + "value": "0.2em" + }, + "text-decoration-thickness": { + "value": "max(1px, .0625rem)" + }, + "hover": { + "text-decoration-thickness": { + "value": "max(1px, .1rem)" + } + }, + "focus": { + "background-color": { + "value": "{kernteam.focus.background-color}" + }, + "color": { + "value": "{kernteam.focus.color}" + } + } + } + } +}