From a58bcee037ba984356404cecdb063cea1512b7f7 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Fri, 24 Nov 2023 16:06:31 +0100 Subject: [PATCH 01/20] Move all css source code to /src --- packages/css/package.json | 4 ++-- packages/css/{utils => src/common}/breakpoint.scss | 0 .../css/{utils => src/common}/calculate-fluid-style.scss | 0 packages/css/src/{ => components}/accordion/README.md | 0 packages/css/src/{ => components}/accordion/accordion.scss | 2 +- packages/css/src/{ => components}/alert/README.md | 0 packages/css/src/{ => components}/alert/alert.scss | 2 +- packages/css/src/{ => components}/aspect-ratio/README.md | 0 .../css/src/{ => components}/aspect-ratio/aspect-ratio.scss | 0 packages/css/src/{ => components}/blockquote/README.md | 0 .../css/src/{ => components}/blockquote/blockquote.scss | 2 +- packages/css/src/{ => components}/breadcrumb/README.md | 0 .../css/src/{ => components}/breadcrumb/breadcrumb.scss | 2 +- packages/css/src/{ => components}/button/README.md | 0 packages/css/src/{ => components}/button/button-css.md | 0 packages/css/src/{ => components}/button/button.scss | 4 ++-- packages/css/src/{ => components}/card/README.md | 0 packages/css/src/{ => components}/card/card.scss | 0 packages/css/src/{ => components}/checkbox/README.md | 0 packages/css/src/{ => components}/checkbox/checkbox-css.md | 0 packages/css/src/{ => components}/checkbox/checkbox.scss | 2 +- packages/css/src/{ => components}/dialog/README.md | 0 packages/css/src/{ => components}/dialog/dialog.scss | 2 +- packages/css/src/{ => components}/footer/README.md | 0 packages/css/src/{ => components}/footer/footer-css.md | 0 packages/css/src/{ => components}/footer/footer.scss | 2 +- packages/css/src/{ => components}/form-label/README.md | 0 .../css/src/{ => components}/form-label/form-label.scss | 2 +- packages/css/src/{ => components}/grid/README.grid-cell.md | 0 packages/css/src/{ => components}/grid/README.grid.md | 0 packages/css/src/{ => components}/grid/grid-cell.scss | 2 +- packages/css/src/{ => components}/grid/grid.scss | 2 +- packages/css/src/{ => components}/heading/README.md | 0 packages/css/src/{ => components}/heading/heading-css.md | 0 packages/css/src/{ => components}/heading/heading.scss | 2 +- packages/css/src/{ => components}/highlight/README.md | 0 packages/css/src/{ => components}/highlight/highlight.scss | 0 packages/css/src/{ => components}/icon/README.md | 0 packages/css/src/{ => components}/icon/icon.scss | 2 +- packages/css/src/{ => components}/image/README.md | 0 packages/css/src/{ => components}/image/image.scss | 0 packages/css/src/{ => components}/index.scss | 0 packages/css/src/{ => components}/link/README.md | 0 packages/css/src/{ => components}/link/link.scss | 2 +- packages/css/src/{ => components}/logo/README.md | 0 packages/css/src/{ => components}/logo/logo.scss | 0 packages/css/src/{ => components}/ordered-list/README.md | 0 .../css/src/{ => components}/ordered-list/ordered-list.scss | 2 +- packages/css/src/{ => components}/page-heading/README.md | 0 .../css/src/{ => components}/page-heading/page-heading.scss | 2 +- packages/css/src/{ => components}/page-menu/README.md | 0 packages/css/src/{ => components}/page-menu/page-menu.scss | 2 +- packages/css/src/{ => components}/pagination/README.md | 0 .../css/src/{ => components}/pagination/pagination.scss | 2 +- packages/css/src/{ => components}/paragraph/README.md | 0 .../css/src/{ => components}/paragraph/paragraph-css.md | 0 packages/css/src/{ => components}/paragraph/paragraph.scss | 2 +- packages/css/src/{ => components}/screen/README.md | 0 packages/css/src/{ => components}/screen/screen.scss | 0 packages/css/src/{ => components}/switch/README.md | 0 packages/css/src/{ => components}/switch/switch.scss | 0 packages/css/src/{ => components}/top-task-link/README.md | 0 .../src/{ => components}/top-task-link/top-task-link.scss | 2 +- packages/css/src/{ => components}/unordered-list/README.md | 0 .../src/{ => components}/unordered-list/unordered-list.scss | 2 +- packages/css/src/{ => components}/visually-hidden/README.md | 0 .../{ => components}/visually-hidden/visually-hidden.scss | 0 plop-templates/storybook.docs.mdx.hbs | 2 +- plopfile.mjs | 6 +++--- storybook/storybook-react/src/Accordion/Accordion.docs.mdx | 2 +- storybook/storybook-react/src/Alert/Alert.docs.mdx | 2 +- .../storybook-react/src/AspectRatio/AspectRatio.docs.mdx | 2 +- .../storybook-react/src/Blockquote/Blockquote.docs.mdx | 2 +- .../storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx | 2 +- storybook/storybook-react/src/Button/Button.docs.mdx | 2 +- storybook/storybook-react/src/Card/Card.docs.mdx | 2 +- storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx | 2 +- storybook/storybook-react/src/Dialog/Dialog.docs.mdx | 2 +- storybook/storybook-react/src/Footer/Footer.docs.mdx | 2 +- storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx | 2 +- storybook/storybook-react/src/Grid/Grid.docs.mdx | 2 +- storybook/storybook-react/src/GridCell/GridCell.docs.mdx | 2 +- storybook/storybook-react/src/Heading/Heading.docs.mdx | 2 +- storybook/storybook-react/src/Highlight/Highlight.docs.mdx | 2 +- storybook/storybook-react/src/Icon/Icon.docs.mdx | 2 +- storybook/storybook-react/src/Image/Image.docs.mdx | 2 +- storybook/storybook-react/src/Link/Link.docs.mdx | 2 +- storybook/storybook-react/src/Logo/Logo.docs.mdx | 2 +- .../storybook-react/src/OrderedList/OrderedList.docs.mdx | 2 +- .../storybook-react/src/PageHeading/PageHeading.docs.mdx | 2 +- storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx | 2 +- .../storybook-react/src/Pagination/Pagination.docs.mdx | 2 +- storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx | 2 +- storybook/storybook-react/src/Screen/Screen.docs.mdx | 2 +- storybook/storybook-react/src/Switch/Switch.docs.mdx | 2 +- .../storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx | 2 +- .../storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx | 2 -- .../src/UnorderedList/UnorderedList.docs.mdx | 2 +- .../src/VisuallyHidden/VisuallyHidden.docs.mdx | 2 +- .../src/VisuallyHidden/VisuallyHidden.stories.tsx | 2 -- 100 files changed, 57 insertions(+), 61 deletions(-) rename packages/css/{utils => src/common}/breakpoint.scss (100%) rename packages/css/{utils => src/common}/calculate-fluid-style.scss (100%) rename packages/css/src/{ => components}/accordion/README.md (100%) rename packages/css/src/{ => components}/accordion/accordion.scss (97%) rename packages/css/src/{ => components}/alert/README.md (100%) rename packages/css/src/{ => components}/alert/alert.scss (98%) rename packages/css/src/{ => components}/aspect-ratio/README.md (100%) rename packages/css/src/{ => components}/aspect-ratio/aspect-ratio.scss (100%) rename packages/css/src/{ => components}/blockquote/README.md (100%) rename packages/css/src/{ => components}/blockquote/blockquote.scss (96%) rename packages/css/src/{ => components}/breadcrumb/README.md (100%) rename packages/css/src/{ => components}/breadcrumb/breadcrumb.scss (97%) rename packages/css/src/{ => components}/button/README.md (100%) rename packages/css/src/{ => components}/button/button-css.md (100%) rename packages/css/src/{ => components}/button/button.scss (91%) rename packages/css/src/{ => components}/card/README.md (100%) rename packages/css/src/{ => components}/card/card.scss (100%) rename packages/css/src/{ => components}/checkbox/README.md (100%) rename packages/css/src/{ => components}/checkbox/checkbox-css.md (100%) rename packages/css/src/{ => components}/checkbox/checkbox.scss (99%) rename packages/css/src/{ => components}/dialog/README.md (100%) rename packages/css/src/{ => components}/dialog/dialog.scss (98%) rename packages/css/src/{ => components}/footer/README.md (100%) rename packages/css/src/{ => components}/footer/footer-css.md (100%) rename packages/css/src/{ => components}/footer/footer.scss (82%) rename packages/css/src/{ => components}/form-label/README.md (100%) rename packages/css/src/{ => components}/form-label/form-label.scss (94%) rename packages/css/src/{ => components}/grid/README.grid-cell.md (100%) rename packages/css/src/{ => components}/grid/README.grid.md (100%) rename packages/css/src/{ => components}/grid/grid-cell.scss (96%) rename packages/css/src/{ => components}/grid/grid.scss (98%) rename packages/css/src/{ => components}/heading/README.md (100%) rename packages/css/src/{ => components}/heading/heading-css.md (100%) rename packages/css/src/{ => components}/heading/heading.scss (97%) rename packages/css/src/{ => components}/highlight/README.md (100%) rename packages/css/src/{ => components}/highlight/highlight.scss (100%) rename packages/css/src/{ => components}/icon/README.md (100%) rename packages/css/src/{ => components}/icon/icon.scss (99%) rename packages/css/src/{ => components}/image/README.md (100%) rename packages/css/src/{ => components}/image/image.scss (100%) rename packages/css/src/{ => components}/index.scss (100%) rename packages/css/src/{ => components}/link/README.md (100%) rename packages/css/src/{ => components}/link/link.scss (98%) rename packages/css/src/{ => components}/logo/README.md (100%) rename packages/css/src/{ => components}/logo/logo.scss (100%) rename packages/css/src/{ => components}/ordered-list/README.md (100%) rename packages/css/src/{ => components}/ordered-list/ordered-list.scss (98%) rename packages/css/src/{ => components}/page-heading/README.md (100%) rename packages/css/src/{ => components}/page-heading/page-heading.scss (95%) rename packages/css/src/{ => components}/page-menu/README.md (100%) rename packages/css/src/{ => components}/page-menu/page-menu.scss (98%) rename packages/css/src/{ => components}/pagination/README.md (100%) rename packages/css/src/{ => components}/pagination/pagination.scss (97%) rename packages/css/src/{ => components}/paragraph/README.md (100%) rename packages/css/src/{ => components}/paragraph/paragraph-css.md (100%) rename packages/css/src/{ => components}/paragraph/paragraph.scss (97%) rename packages/css/src/{ => components}/screen/README.md (100%) rename packages/css/src/{ => components}/screen/screen.scss (100%) rename packages/css/src/{ => components}/switch/README.md (100%) rename packages/css/src/{ => components}/switch/switch.scss (100%) rename packages/css/src/{ => components}/top-task-link/README.md (100%) rename packages/css/src/{ => components}/top-task-link/top-task-link.scss (97%) rename packages/css/src/{ => components}/unordered-list/README.md (100%) rename packages/css/src/{ => components}/unordered-list/unordered-list.scss (98%) rename packages/css/src/{ => components}/visually-hidden/README.md (100%) rename packages/css/src/{ => components}/visually-hidden/visually-hidden.scss (100%) diff --git a/packages/css/package.json b/packages/css/package.json index 12dafa14f6..742f57c361 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -14,8 +14,8 @@ "directory": "packages/css" }, "scripts": { - "build": "sass src/:dist/ --style=compressed", - "build:watch": "sass src/:dist/ --watch", + "build": "sass src/components:dist/ --style=compressed", + "build:watch": "sass src/components:dist/ --watch", "clean": "rimraf dist/" }, "devDependencies": { diff --git a/packages/css/utils/breakpoint.scss b/packages/css/src/common/breakpoint.scss similarity index 100% rename from packages/css/utils/breakpoint.scss rename to packages/css/src/common/breakpoint.scss diff --git a/packages/css/utils/calculate-fluid-style.scss b/packages/css/src/common/calculate-fluid-style.scss similarity index 100% rename from packages/css/utils/calculate-fluid-style.scss rename to packages/css/src/common/calculate-fluid-style.scss diff --git a/packages/css/src/accordion/README.md b/packages/css/src/components/accordion/README.md similarity index 100% rename from packages/css/src/accordion/README.md rename to packages/css/src/components/accordion/README.md diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss similarity index 97% rename from packages/css/src/accordion/accordion.scss rename to packages/css/src/components/accordion/accordion.scss index ee17a369a0..c8f6fc2b02 100644 --- a/packages/css/src/accordion/accordion.scss +++ b/packages/css/src/components/accordion/accordion.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-accordion__header { display: flex; diff --git a/packages/css/src/alert/README.md b/packages/css/src/components/alert/README.md similarity index 100% rename from packages/css/src/alert/README.md rename to packages/css/src/components/alert/README.md diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/components/alert/alert.scss similarity index 98% rename from packages/css/src/alert/alert.scss rename to packages/css/src/components/alert/alert.scss index 92a5ac54b9..4a3470d53a 100644 --- a/packages/css/src/alert/alert.scss +++ b/packages/css/src/components/alert/alert.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-alert { align-items: flex-start; diff --git a/packages/css/src/aspect-ratio/README.md b/packages/css/src/components/aspect-ratio/README.md similarity index 100% rename from packages/css/src/aspect-ratio/README.md rename to packages/css/src/components/aspect-ratio/README.md diff --git a/packages/css/src/aspect-ratio/aspect-ratio.scss b/packages/css/src/components/aspect-ratio/aspect-ratio.scss similarity index 100% rename from packages/css/src/aspect-ratio/aspect-ratio.scss rename to packages/css/src/components/aspect-ratio/aspect-ratio.scss diff --git a/packages/css/src/blockquote/README.md b/packages/css/src/components/blockquote/README.md similarity index 100% rename from packages/css/src/blockquote/README.md rename to packages/css/src/components/blockquote/README.md diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss similarity index 96% rename from packages/css/src/blockquote/blockquote.scss rename to packages/css/src/components/blockquote/blockquote.scss index 5aa9d9c53b..df9ec4eefd 100644 --- a/packages/css/src/blockquote/blockquote.scss +++ b/packages/css/src/components/blockquote/blockquote.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { box-sizing: border-box; diff --git a/packages/css/src/breadcrumb/README.md b/packages/css/src/components/breadcrumb/README.md similarity index 100% rename from packages/css/src/breadcrumb/README.md rename to packages/css/src/components/breadcrumb/README.md diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss similarity index 97% rename from packages/css/src/breadcrumb/breadcrumb.scss rename to packages/css/src/components/breadcrumb/breadcrumb.scss index 13ad8a8555..7b4c0a9892 100644 --- a/packages/css/src/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { box-sizing: border-box; diff --git a/packages/css/src/button/README.md b/packages/css/src/components/button/README.md similarity index 100% rename from packages/css/src/button/README.md rename to packages/css/src/components/button/README.md diff --git a/packages/css/src/button/button-css.md b/packages/css/src/components/button/button-css.md similarity index 100% rename from packages/css/src/button/button-css.md rename to packages/css/src/components/button/button-css.md diff --git a/packages/css/src/button/button.scss b/packages/css/src/components/button/button.scss similarity index 91% rename from packages/css/src/button/button.scss rename to packages/css/src/components/button/button.scss index b026d87054..c03dc823a1 100644 --- a/packages/css/src/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -3,8 +3,8 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../node_modules/@utrecht/components/button/css"; -@import "../../utils/breakpoint"; +@import "../../../node_modules/@utrecht/components/button/css"; +@import "../../common/breakpoint"; @mixin reset { -webkit-text-size-adjust: 100%; diff --git a/packages/css/src/card/README.md b/packages/css/src/components/card/README.md similarity index 100% rename from packages/css/src/card/README.md rename to packages/css/src/components/card/README.md diff --git a/packages/css/src/card/card.scss b/packages/css/src/components/card/card.scss similarity index 100% rename from packages/css/src/card/card.scss rename to packages/css/src/components/card/card.scss diff --git a/packages/css/src/checkbox/README.md b/packages/css/src/components/checkbox/README.md similarity index 100% rename from packages/css/src/checkbox/README.md rename to packages/css/src/components/checkbox/README.md diff --git a/packages/css/src/checkbox/checkbox-css.md b/packages/css/src/components/checkbox/checkbox-css.md similarity index 100% rename from packages/css/src/checkbox/checkbox-css.md rename to packages/css/src/components/checkbox/checkbox-css.md diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss similarity index 99% rename from packages/css/src/checkbox/checkbox.scss rename to packages/css/src/components/checkbox/checkbox.scss index fc9afd555e..5b42c5c6f6 100644 --- a/packages/css/src/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-checkbox__input { appearance: none; diff --git a/packages/css/src/dialog/README.md b/packages/css/src/components/dialog/README.md similarity index 100% rename from packages/css/src/dialog/README.md rename to packages/css/src/components/dialog/README.md diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss similarity index 98% rename from packages/css/src/dialog/dialog.scss rename to packages/css/src/components/dialog/dialog.scss index 7259222b25..8c3ae5376b 100644 --- a/packages/css/src/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-dialog { background-color: var(--amsterdam-dialog-background-color); diff --git a/packages/css/src/footer/README.md b/packages/css/src/components/footer/README.md similarity index 100% rename from packages/css/src/footer/README.md rename to packages/css/src/components/footer/README.md diff --git a/packages/css/src/footer/footer-css.md b/packages/css/src/components/footer/footer-css.md similarity index 100% rename from packages/css/src/footer/footer-css.md rename to packages/css/src/components/footer/footer-css.md diff --git a/packages/css/src/footer/footer.scss b/packages/css/src/components/footer/footer.scss similarity index 82% rename from packages/css/src/footer/footer.scss rename to packages/css/src/components/footer/footer.scss index 5059ca70ca..38ad637751 100644 --- a/packages/css/src/footer/footer.scss +++ b/packages/css/src/components/footer/footer.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-footer__top { background-color: var(--amsterdam-footer-top-background-color); diff --git a/packages/css/src/form-label/README.md b/packages/css/src/components/form-label/README.md similarity index 100% rename from packages/css/src/form-label/README.md rename to packages/css/src/components/form-label/README.md diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss similarity index 94% rename from packages/css/src/form-label/form-label.scss rename to packages/css/src/components/form-label/form-label.scss index c9a7682f16..be9290b066 100644 --- a/packages/css/src/form-label/form-label.scss +++ b/packages/css/src/components/form-label/form-label.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { -webkit-text-size-adjust: 100%; diff --git a/packages/css/src/grid/README.grid-cell.md b/packages/css/src/components/grid/README.grid-cell.md similarity index 100% rename from packages/css/src/grid/README.grid-cell.md rename to packages/css/src/components/grid/README.grid-cell.md diff --git a/packages/css/src/grid/README.grid.md b/packages/css/src/components/grid/README.grid.md similarity index 100% rename from packages/css/src/grid/README.grid.md rename to packages/css/src/components/grid/README.grid.md diff --git a/packages/css/src/grid/grid-cell.scss b/packages/css/src/components/grid/grid-cell.scss similarity index 96% rename from packages/css/src/grid/grid-cell.scss rename to packages/css/src/components/grid/grid-cell.scss index b60ffe67bb..9f14189af2 100644 --- a/packages/css/src/grid/grid-cell.scss +++ b/packages/css/src/components/grid/grid-cell.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-grid-cell--full-width { grid-column: 1 / -1; diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/components/grid/grid.scss similarity index 98% rename from packages/css/src/grid/grid.scss rename to packages/css/src/components/grid/grid.scss index 86713c9c96..a10c8c8b54 100644 --- a/packages/css/src/grid/grid.scss +++ b/packages/css/src/components/grid/grid.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-grid { --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap); diff --git a/packages/css/src/heading/README.md b/packages/css/src/components/heading/README.md similarity index 100% rename from packages/css/src/heading/README.md rename to packages/css/src/components/heading/README.md diff --git a/packages/css/src/heading/heading-css.md b/packages/css/src/components/heading/heading-css.md similarity index 100% rename from packages/css/src/heading/heading-css.md rename to packages/css/src/components/heading/heading-css.md diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/components/heading/heading.scss similarity index 97% rename from packages/css/src/heading/heading.scss rename to packages/css/src/components/heading/heading.scss index e147ae61ff..7770e1237a 100644 --- a/packages/css/src/heading/heading.scss +++ b/packages/css/src/components/heading/heading.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { box-sizing: border-box; diff --git a/packages/css/src/highlight/README.md b/packages/css/src/components/highlight/README.md similarity index 100% rename from packages/css/src/highlight/README.md rename to packages/css/src/components/highlight/README.md diff --git a/packages/css/src/highlight/highlight.scss b/packages/css/src/components/highlight/highlight.scss similarity index 100% rename from packages/css/src/highlight/highlight.scss rename to packages/css/src/components/highlight/highlight.scss diff --git a/packages/css/src/icon/README.md b/packages/css/src/components/icon/README.md similarity index 100% rename from packages/css/src/icon/README.md rename to packages/css/src/components/icon/README.md diff --git a/packages/css/src/icon/icon.scss b/packages/css/src/components/icon/icon.scss similarity index 99% rename from packages/css/src/icon/icon.scss rename to packages/css/src/components/icon/icon.scss index 3a7288b66c..2b3d4ccfee 100644 --- a/packages/css/src/icon/icon.scss +++ b/packages/css/src/components/icon/icon.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-icon { align-items: center; diff --git a/packages/css/src/image/README.md b/packages/css/src/components/image/README.md similarity index 100% rename from packages/css/src/image/README.md rename to packages/css/src/components/image/README.md diff --git a/packages/css/src/image/image.scss b/packages/css/src/components/image/image.scss similarity index 100% rename from packages/css/src/image/image.scss rename to packages/css/src/components/image/image.scss diff --git a/packages/css/src/index.scss b/packages/css/src/components/index.scss similarity index 100% rename from packages/css/src/index.scss rename to packages/css/src/components/index.scss diff --git a/packages/css/src/link/README.md b/packages/css/src/components/link/README.md similarity index 100% rename from packages/css/src/link/README.md rename to packages/css/src/components/link/README.md diff --git a/packages/css/src/link/link.scss b/packages/css/src/components/link/link.scss similarity index 98% rename from packages/css/src/link/link.scss rename to packages/css/src/components/link/link.scss index 3634ceab37..1f2ee03ce4 100644 --- a/packages/css/src/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { -webkit-text-size-adjust: 100%; diff --git a/packages/css/src/logo/README.md b/packages/css/src/components/logo/README.md similarity index 100% rename from packages/css/src/logo/README.md rename to packages/css/src/components/logo/README.md diff --git a/packages/css/src/logo/logo.scss b/packages/css/src/components/logo/logo.scss similarity index 100% rename from packages/css/src/logo/logo.scss rename to packages/css/src/components/logo/logo.scss diff --git a/packages/css/src/ordered-list/README.md b/packages/css/src/components/ordered-list/README.md similarity index 100% rename from packages/css/src/ordered-list/README.md rename to packages/css/src/components/ordered-list/README.md diff --git a/packages/css/src/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss similarity index 98% rename from packages/css/src/ordered-list/ordered-list.scss rename to packages/css/src/components/ordered-list/ordered-list.scss index 4510415e4e..039b82af77 100644 --- a/packages/css/src/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; /** Apply border box sizing, reset whitespace and list styles. */ @mixin reset { diff --git a/packages/css/src/page-heading/README.md b/packages/css/src/components/page-heading/README.md similarity index 100% rename from packages/css/src/page-heading/README.md rename to packages/css/src/components/page-heading/README.md diff --git a/packages/css/src/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss similarity index 95% rename from packages/css/src/page-heading/page-heading.scss rename to packages/css/src/components/page-heading/page-heading.scss index dac2c86b4d..9904f825e1 100644 --- a/packages/css/src/page-heading/page-heading.scss +++ b/packages/css/src/components/page-heading/page-heading.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { box-sizing: border-box; diff --git a/packages/css/src/page-menu/README.md b/packages/css/src/components/page-menu/README.md similarity index 100% rename from packages/css/src/page-menu/README.md rename to packages/css/src/components/page-menu/README.md diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss similarity index 98% rename from packages/css/src/page-menu/page-menu.scss rename to packages/css/src/components/page-menu/page-menu.scss index 9781286a1a..49be761a8e 100644 --- a/packages/css/src/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset-list { box-sizing: border-box; diff --git a/packages/css/src/pagination/README.md b/packages/css/src/components/pagination/README.md similarity index 100% rename from packages/css/src/pagination/README.md rename to packages/css/src/components/pagination/README.md diff --git a/packages/css/src/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss similarity index 97% rename from packages/css/src/pagination/pagination.scss rename to packages/css/src/components/pagination/pagination.scss index 0ee17e2c3e..4379e03be4 100644 --- a/packages/css/src/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin list-reset { list-style-type: none; diff --git a/packages/css/src/paragraph/README.md b/packages/css/src/components/paragraph/README.md similarity index 100% rename from packages/css/src/paragraph/README.md rename to packages/css/src/components/paragraph/README.md diff --git a/packages/css/src/paragraph/paragraph-css.md b/packages/css/src/components/paragraph/paragraph-css.md similarity index 100% rename from packages/css/src/paragraph/paragraph-css.md rename to packages/css/src/components/paragraph/paragraph-css.md diff --git a/packages/css/src/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss similarity index 97% rename from packages/css/src/paragraph/paragraph.scss rename to packages/css/src/components/paragraph/paragraph.scss index 1384d49cbe..f2afc92eb0 100644 --- a/packages/css/src/paragraph/paragraph.scss +++ b/packages/css/src/components/paragraph/paragraph.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; @mixin reset { box-sizing: border-box; diff --git a/packages/css/src/screen/README.md b/packages/css/src/components/screen/README.md similarity index 100% rename from packages/css/src/screen/README.md rename to packages/css/src/components/screen/README.md diff --git a/packages/css/src/screen/screen.scss b/packages/css/src/components/screen/screen.scss similarity index 100% rename from packages/css/src/screen/screen.scss rename to packages/css/src/components/screen/screen.scss diff --git a/packages/css/src/switch/README.md b/packages/css/src/components/switch/README.md similarity index 100% rename from packages/css/src/switch/README.md rename to packages/css/src/components/switch/README.md diff --git a/packages/css/src/switch/switch.scss b/packages/css/src/components/switch/switch.scss similarity index 100% rename from packages/css/src/switch/switch.scss rename to packages/css/src/components/switch/switch.scss diff --git a/packages/css/src/top-task-link/README.md b/packages/css/src/components/top-task-link/README.md similarity index 100% rename from packages/css/src/top-task-link/README.md rename to packages/css/src/components/top-task-link/README.md diff --git a/packages/css/src/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss similarity index 97% rename from packages/css/src/top-task-link/top-task-link.scss rename to packages/css/src/components/top-task-link/top-task-link.scss index 8efcc6461f..8d97f8a80c 100644 --- a/packages/css/src/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; .amsterdam-top-task-link { break-inside: avoid; diff --git a/packages/css/src/unordered-list/README.md b/packages/css/src/components/unordered-list/README.md similarity index 100% rename from packages/css/src/unordered-list/README.md rename to packages/css/src/components/unordered-list/README.md diff --git a/packages/css/src/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss similarity index 98% rename from packages/css/src/unordered-list/unordered-list.scss rename to packages/css/src/components/unordered-list/unordered-list.scss index 746eb70808..d41c4380bf 100644 --- a/packages/css/src/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../utils/breakpoint"; +@import "../../common/breakpoint"; /** Apply border box sizing, reset whitespace and list styles. */ @mixin reset { diff --git a/packages/css/src/visually-hidden/README.md b/packages/css/src/components/visually-hidden/README.md similarity index 100% rename from packages/css/src/visually-hidden/README.md rename to packages/css/src/components/visually-hidden/README.md diff --git a/packages/css/src/visually-hidden/visually-hidden.scss b/packages/css/src/components/visually-hidden/visually-hidden.scss similarity index 100% rename from packages/css/src/visually-hidden/visually-hidden.scss rename to packages/css/src/components/visually-hidden/visually-hidden.scss diff --git a/plop-templates/storybook.docs.mdx.hbs b/plop-templates/storybook.docs.mdx.hbs index 0d5d4e1460..aea68c1a86 100644 --- a/plop-templates/storybook.docs.mdx.hbs +++ b/plop-templates/storybook.docs.mdx.hbs @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as {{pascalCase name}}Stories from "./{{pascalCase name}}.stories.tsx"; -import README from "../../../../packages/css/src/{{kebabCase name}}/README.md?raw"; +import README from "../../../../packages/css/src/components/{{kebabCase name}}/README.md?raw"; diff --git a/plopfile.mjs b/plopfile.mjs index 8cc735b28e..5eaf2b3111 100644 --- a/plopfile.mjs +++ b/plopfile.mjs @@ -17,17 +17,17 @@ export default function (plop) { }, { type: 'add', - path: 'packages/css/src/{{kebabCase name}}/{{kebabCase name}}.scss', + path: 'packages/css/src/components/{{kebabCase name}}/{{kebabCase name}}.scss', templateFile: 'plop-templates/style.scss.hbs', }, { type: 'add', - path: 'packages/css/src/{{kebabCase name}}/README.md', + path: 'packages/css/src/components/{{kebabCase name}}/README.md', templateFile: 'plop-templates/style.docs.md.hbs', }, { type: 'append', - path: 'packages/css/src/index.scss', + path: 'packages/css/src/components/index.scss', pattern: `/* Append here */`, template: `@import "./{{kebabCase name}}/{{kebabCase name}}";`, }, diff --git a/storybook/storybook-react/src/Accordion/Accordion.docs.mdx b/storybook/storybook-react/src/Accordion/Accordion.docs.mdx index b43de02ec8..7d2cf58bd1 100644 --- a/storybook/storybook-react/src/Accordion/Accordion.docs.mdx +++ b/storybook/storybook-react/src/Accordion/Accordion.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as AccordionStories from "./Accordion.stories.tsx"; -import README from "../../../../packages/css/src/accordion/README.md?raw"; +import README from "../../../../packages/css/src/components/accordion/README.md?raw"; diff --git a/storybook/storybook-react/src/Alert/Alert.docs.mdx b/storybook/storybook-react/src/Alert/Alert.docs.mdx index 507c714911..37730ed441 100644 --- a/storybook/storybook-react/src/Alert/Alert.docs.mdx +++ b/storybook/storybook-react/src/Alert/Alert.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as AlertStories from "./Alert.stories.tsx"; -import README from "../../../../packages/css/src/alert/README.md?raw"; +import README from "../../../../packages/css/src/components/alert/README.md?raw"; diff --git a/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx b/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx index 5547f45b97..1aea862b0e 100644 --- a/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx +++ b/storybook/storybook-react/src/AspectRatio/AspectRatio.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as AspectRatioStories from "./AspectRatio.stories.tsx"; -import README from "../../../../packages/css/src/aspect-ratio/README.md?raw"; +import README from "../../../../packages/css/src/components/aspect-ratio/README.md?raw"; diff --git a/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx b/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx index bae44877d1..a1fb56f12c 100644 --- a/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx +++ b/storybook/storybook-react/src/Blockquote/Blockquote.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as BlockquoteStories from "./Blockquote.stories.tsx"; -import README from "../../../../packages/css/src/blockquote/README.md?raw"; +import README from "../../../../packages/css/src/components/blockquote/README.md?raw"; diff --git a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx index 643ff294e2..aff2caebee 100644 --- a/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx +++ b/storybook/storybook-react/src/Breadcrumb/Breadcrumb.docs.mdx @@ -1,6 +1,6 @@ import { Markdown, Meta, Primary } from "@storybook/blocks"; import * as BreadcrumbStories from "./Breadcrumb.stories.tsx"; -import README from "../../../../packages/css/src/breadcrumb/README.md?raw"; +import README from "../../../../packages/css/src/components/breadcrumb/README.md?raw"; diff --git a/storybook/storybook-react/src/Button/Button.docs.mdx b/storybook/storybook-react/src/Button/Button.docs.mdx index 1b2a6bb74a..64a9d60f7c 100644 --- a/storybook/storybook-react/src/Button/Button.docs.mdx +++ b/storybook/storybook-react/src/Button/Button.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ButtonStories from "./Button.stories.tsx"; -import README from "../../../../packages/css/src/button/README.md?raw"; +import README from "../../../../packages/css/src/components/button/README.md?raw"; diff --git a/storybook/storybook-react/src/Card/Card.docs.mdx b/storybook/storybook-react/src/Card/Card.docs.mdx index 82409d6d03..c185f25a62 100644 --- a/storybook/storybook-react/src/Card/Card.docs.mdx +++ b/storybook/storybook-react/src/Card/Card.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as CardStories from "./Card.stories.tsx"; -import README from "../../../../packages/css/src/card/README.md?raw"; +import README from "../../../../packages/css/src/components/card/README.md?raw"; diff --git a/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx b/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx index ff7c074327..30ccbffe68 100644 --- a/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx +++ b/storybook/storybook-react/src/Checkbox/Checkbox.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as CheckboxStories from "./Checkbox.stories.tsx"; -import README from "../../../../packages/css/src/checkbox/README.md?raw"; +import README from "../../../../packages/css/src/components/checkbox/README.md?raw"; diff --git a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx index e66babdd53..4054f0fcd0 100644 --- a/storybook/storybook-react/src/Dialog/Dialog.docs.mdx +++ b/storybook/storybook-react/src/Dialog/Dialog.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as DialogStories from "./Dialog.stories.tsx"; -import README from "../../../../packages/css/src/dialog/README.md?raw"; +import README from "../../../../packages/css/src/components/dialog/README.md?raw"; diff --git a/storybook/storybook-react/src/Footer/Footer.docs.mdx b/storybook/storybook-react/src/Footer/Footer.docs.mdx index 0645874d1d..43f41cd32b 100644 --- a/storybook/storybook-react/src/Footer/Footer.docs.mdx +++ b/storybook/storybook-react/src/Footer/Footer.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as FooterStories from "./Footer.stories.tsx"; -import README from "../../../../packages/css/src/footer/README.md?raw"; +import README from "../../../../packages/css/src/components/footer/README.md?raw"; diff --git a/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx b/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx index 7d15969b0c..c87d6f911d 100644 --- a/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx +++ b/storybook/storybook-react/src/FormLabel/FormLabel.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as FormLabelStories from "./FormLabel.stories.tsx"; -import README from "../../../../packages/css/src/form-label/README.md?raw"; +import README from "../../../../packages/css/src/components/form-label/README.md?raw"; diff --git a/storybook/storybook-react/src/Grid/Grid.docs.mdx b/storybook/storybook-react/src/Grid/Grid.docs.mdx index 72ce1a2e03..62d89bac75 100644 --- a/storybook/storybook-react/src/Grid/Grid.docs.mdx +++ b/storybook/storybook-react/src/Grid/Grid.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as GridStories from "./Grid.stories.tsx"; -import README from "../../../../packages/css/src/grid/README.grid.md?raw"; +import README from "../../../../packages/css/src/components/grid/README.grid.md?raw"; diff --git a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx index 6804ed62f6..1f4eab4b59 100644 --- a/storybook/storybook-react/src/GridCell/GridCell.docs.mdx +++ b/storybook/storybook-react/src/GridCell/GridCell.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as GridCellStories from "./GridCell.stories.tsx"; -import README from "../../../../packages/css/src/grid/README.grid-cell.md?raw"; +import README from "../../../../packages/css/src/components/grid/README.grid-cell.md?raw"; diff --git a/storybook/storybook-react/src/Heading/Heading.docs.mdx b/storybook/storybook-react/src/Heading/Heading.docs.mdx index 340a8c4660..ee9ebe2279 100644 --- a/storybook/storybook-react/src/Heading/Heading.docs.mdx +++ b/storybook/storybook-react/src/Heading/Heading.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as HeadingStories from "./Heading.stories.tsx"; -import README from "../../../../packages/css/src/heading/README.md?raw"; +import README from "../../../../packages/css/src/components/heading/README.md?raw"; diff --git a/storybook/storybook-react/src/Highlight/Highlight.docs.mdx b/storybook/storybook-react/src/Highlight/Highlight.docs.mdx index cfdea721a2..f16e9c86a9 100644 --- a/storybook/storybook-react/src/Highlight/Highlight.docs.mdx +++ b/storybook/storybook-react/src/Highlight/Highlight.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as HighlightStories from "./Highlight.stories.tsx"; -import README from "../../../../packages/css/src/highlight/README.md?raw"; +import README from "../../../../packages/css/src/components/highlight/README.md?raw"; diff --git a/storybook/storybook-react/src/Icon/Icon.docs.mdx b/storybook/storybook-react/src/Icon/Icon.docs.mdx index e30722582e..087836ab99 100644 --- a/storybook/storybook-react/src/Icon/Icon.docs.mdx +++ b/storybook/storybook-react/src/Icon/Icon.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as IconStories from "./Icon.stories.tsx"; -import README from "../../../../packages/css/src/icon/README.md?raw"; +import README from "../../../../packages/css/src/components/icon/README.md?raw"; diff --git a/storybook/storybook-react/src/Image/Image.docs.mdx b/storybook/storybook-react/src/Image/Image.docs.mdx index 359093682a..78ec3e86ea 100644 --- a/storybook/storybook-react/src/Image/Image.docs.mdx +++ b/storybook/storybook-react/src/Image/Image.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ImageStories from "./Image.stories.tsx"; -import README from "../../../../packages/css/src/image/README.md?raw"; +import README from "../../../../packages/css/src/components/image/README.md?raw"; diff --git a/storybook/storybook-react/src/Link/Link.docs.mdx b/storybook/storybook-react/src/Link/Link.docs.mdx index 9a255e9ad9..016a909259 100644 --- a/storybook/storybook-react/src/Link/Link.docs.mdx +++ b/storybook/storybook-react/src/Link/Link.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as LinkStories from "./Link.stories.tsx"; -import README from "../../../../packages/css/src/link/README.md?raw"; +import README from "../../../../packages/css/src/components/link/README.md?raw"; diff --git a/storybook/storybook-react/src/Logo/Logo.docs.mdx b/storybook/storybook-react/src/Logo/Logo.docs.mdx index ddd0285322..07614ef939 100644 --- a/storybook/storybook-react/src/Logo/Logo.docs.mdx +++ b/storybook/storybook-react/src/Logo/Logo.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as LogoStories from "./Logo.stories.tsx"; -import README from "../../../../packages/css/src/logo/README.md?raw"; +import README from "../../../../packages/css/src/components/logo/README.md?raw"; diff --git a/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx b/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx index d1ef6e593f..3485b2088b 100644 --- a/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx +++ b/storybook/storybook-react/src/OrderedList/OrderedList.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from "@storybook/blocks"; import * as OrderedListStories from "./OrderedList.stories.tsx"; -import README from "../../../../packages/css/src/ordered-list/README.md?raw"; +import README from "../../../../packages/css/src/components/ordered-list/README.md?raw"; diff --git a/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx b/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx index 5ab92c89ad..0fa07bfd13 100644 --- a/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx +++ b/storybook/storybook-react/src/PageHeading/PageHeading.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PageHeadingStories from "./PageHeading.stories.tsx"; -import README from "../../../../packages/css/src/page-heading/README.md?raw"; +import README from "../../../../packages/css/src/components/page-heading/README.md?raw"; diff --git a/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx b/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx index a4e440a733..5a86ea965a 100644 --- a/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx +++ b/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PageMenuStories from "./PageMenu.stories.tsx"; -import README from "../../../../packages/css/src/page-menu/README.md?raw"; +import README from "../../../../packages/css/src/components/page-menu/README.md?raw"; diff --git a/storybook/storybook-react/src/Pagination/Pagination.docs.mdx b/storybook/storybook-react/src/Pagination/Pagination.docs.mdx index 7baea8c290..5d6b37723f 100644 --- a/storybook/storybook-react/src/Pagination/Pagination.docs.mdx +++ b/storybook/storybook-react/src/Pagination/Pagination.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as PaginationStories from "./Pagination.stories.tsx"; -import README from "../../../../packages/css/src/pagination/README.md?raw"; +import README from "../../../../packages/css/src/components/pagination/README.md?raw"; diff --git a/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx b/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx index 7098140e7d..3ee7b454a1 100644 --- a/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx +++ b/storybook/storybook-react/src/Paragraph/Paragraph.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ParagraphStories from "./Paragraph.stories.tsx"; -import README from "../../../../packages/css/src/paragraph/README.md?raw"; +import README from "../../../../packages/css/src/components/paragraph/README.md?raw"; diff --git a/storybook/storybook-react/src/Screen/Screen.docs.mdx b/storybook/storybook-react/src/Screen/Screen.docs.mdx index fe576d7e0c..eb70263af7 100644 --- a/storybook/storybook-react/src/Screen/Screen.docs.mdx +++ b/storybook/storybook-react/src/Screen/Screen.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks"; import * as ScreenStories from "./Screen.stories.tsx"; -import README from "../../../../packages/css/src/screen/README.md?raw"; +import README from "../../../../packages/css/src/components/screen/README.md?raw"; diff --git a/storybook/storybook-react/src/Switch/Switch.docs.mdx b/storybook/storybook-react/src/Switch/Switch.docs.mdx index f6c73e7e6c..0f33f5acca 100644 --- a/storybook/storybook-react/src/Switch/Switch.docs.mdx +++ b/storybook/storybook-react/src/Switch/Switch.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as SwitchStories from "./Switch.stories.tsx"; -import README from "../../../../packages/css/src/switch/README.md?raw"; +import README from "../../../../packages/css/src/components/switch/README.md?raw"; diff --git a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx index e8ba62d4a0..177082eea7 100644 --- a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx +++ b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as TopTaskLinkStories from "./TopTaskLink.stories.tsx"; -import README from "../../../../packages/css/src/top-task-link/README.md?raw"; +import README from "../../../../packages/css/src/components/top-task-link/README.md?raw"; diff --git a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx index 4ee414efb5..b7be8d8514 100644 --- a/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx +++ b/storybook/storybook-react/src/TopTaskLink/TopTaskLink.stories.tsx @@ -6,8 +6,6 @@ import { Grid, TopTaskLink } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -import '@amsterdam/design-system-css/src/top-task-link/top-task-link.scss' - const meta = { title: 'Navigation/Top Task Link', component: TopTaskLink, diff --git a/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx b/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx index cae760cd50..441b035303 100644 --- a/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx +++ b/storybook/storybook-react/src/UnorderedList/UnorderedList.docs.mdx @@ -1,6 +1,6 @@ import { Canvas, Markdown, Meta } from "@storybook/blocks"; import * as UnorderedListStories from "./UnorderedList.stories.tsx"; -import README from "../../../../packages/css/src/unordered-list/README.md?raw"; +import README from "../../../../packages/css/src/components/unordered-list/README.md?raw"; diff --git a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx index 7525aba567..4c8821f1c5 100644 --- a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx +++ b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.docs.mdx @@ -1,6 +1,6 @@ import { Controls, Markdown, Meta, Primary } from "@storybook/blocks"; import * as VisuallyHiddenStories from "./VisuallyHidden.stories.tsx"; -import README from "../../../../packages/css/src/visually-hidden/README.md?raw"; +import README from "../../../../packages/css/src/components/visually-hidden/README.md?raw"; diff --git a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx index dcdde95bf3..6b89586a27 100644 --- a/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx +++ b/storybook/storybook-react/src/VisuallyHidden/VisuallyHidden.stories.tsx @@ -6,8 +6,6 @@ import { VisuallyHidden } from '@amsterdam/design-system-react' import { Meta, StoryObj } from '@storybook/react' -import '@amsterdam/design-system-css/src/visually-hidden/visually-hidden.scss' - const meta = { title: 'Containers/Visually Hidden', component: VisuallyHidden, From fb51c69410ef96813f8f1d0467ead02fd1f6c704 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Fri, 24 Nov 2023 16:25:31 +0100 Subject: [PATCH 02/20] Add initial common link tokens --- .../common/amsterdam/link-type.tokens.json | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 proprietary/tokens/src/common/amsterdam/link-type.tokens.json diff --git a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json new file mode 100644 index 0000000000..4cd4d0f248 --- /dev/null +++ b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json @@ -0,0 +1,52 @@ +{ + "amsterdam": { + "regular": { + "color": { "value": "{amsterdam.color.primary-blue}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "underline" }, + "text-underline-offset": { "value": "3px" }, + "hover": { + "color": { "value": "{amsterdam.color.primary-blue}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "underline" }, + "text-underline-offset": { "value": "3px" } + }, + "on-background-dark": { + "color": { "value": "{amsterdam.color.primary-white}" }, + "hover": { + "color": { "value": "{amsterdam.color.primary-white}" } + } + }, + "on-background-light": { + "color": { "value": "{amsterdam.color.primary-black}" }, + "hover": { + "color": { "value": "{amsterdam.color.primary-black}" } + } + } + }, + "apparent": { + "color": { "value": "{amsterdam.color.primary-blue}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "underline" }, + "text-underline-offset": { "value": "3px" }, + "hover": { + "color": { "value": "{amsterdam.color.primary-blue}" }, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "underline" }, + "text-underline-offset": { "value": "3px" } + }, + "on-background-dark": { + "color": { "value": "{amsterdam.color.primary-white}" }, + "hover": { + "color": { "value": "{amsterdam.color.primary-white}" } + } + }, + "on-background-light": { + "color": { "value": "{amsterdam.color.primary-black}" }, + "hover": { + "color": { "value": "{amsterdam.color.primary-black}" } + } + } + } + } +} From 84fc4c5cce4611e0d2c9a12c7a573c3d0529c623 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Fri, 24 Nov 2023 18:04:16 +0100 Subject: [PATCH 03/20] Restyle links, clean up stories --- packages/css/src/components/link/link.scss | 38 +++++-------- .../common/amsterdam/link-type.tokens.json | 47 ++++++++-------- .../src/components/amsterdam/link.tokens.json | 54 +++++++++---------- .../storybook-react/src/Link/Link.stories.tsx | 22 +++----- 4 files changed, 64 insertions(+), 97 deletions(-) diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss index 1f2ee03ce4..cc5481a67b 100644 --- a/packages/css/src/components/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -26,6 +26,7 @@ display: inline-block; font-size: var(--amsterdam-link-standalone-narrow-font-size); line-height: var(--amsterdam-link-standalone-line-height); + text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line); text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset); @@ -43,11 +44,12 @@ font-family: var(--amsterdam-link-inline-font-family); font-size: var(--amsterdam-link-inline-font-size); line-height: var(--amsterdam-link-inline-line-height); - text-decoration: var(--amsterdam-link-inline-text-decoration); + text-decoration-line: var(--amsterdam-link-inline-text-decoration-line); text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness); + text-underline-offset: var(--amsterdam-link-inline-text-underline-offset); &:hover { - text-decoration: var(--amsterdam-link-inline-hover-text-decoration); + text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness); text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset); } @@ -62,12 +64,12 @@ font-size: var(--amsterdam-link-in-list-narrow-font-size); gap: var(--amsterdam-link-in-list-gap); line-height: var(--amsterdam-link-in-list-line-height); - text-decoration: var(--amsterdam-link-in-list-text-decoration); + text-decoration-line: var(--amsterdam-link-in-list-text-decoration-line); + text-decoration-thickness: var(--amsterdam-link-in-list-text-decoration-thickness); + text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset); &:hover { - text-decoration: var(--amsterdam-link-in-list-hover-text-decoration); - text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness); - text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset); + text-decoration-line: var(--amsterdam-link-in-list-hover-text-decoration-line); } @media screen and (min-width: $amsterdam-breakpoint-typography) { @@ -86,33 +88,17 @@ .amsterdam-link--on-background-dark { color: var(--amsterdam-link-on-background-dark-color); - &:hover { - color: var(--amsterdam-link-on-background-dark-hover-color); - } - + &:hover, &:visited { - color: var(--amsterdam-link-on-background-dark-visited-color); + color: var(--amsterdam-link-on-background-dark-hover-color); } } .amsterdam-link--on-background-light { color: var(--amsterdam-link-on-background-light-color); - &:hover { - color: var(--amsterdam-link-on-background-light-hover-color); - } - + &:hover, &:visited { - color: var(--amsterdam-link-on-background-light-visited-color); - } -} - -.amsterdam-link--inline.amsterdam-link--on-background-dark, -.amsterdam-link--inline.amsterdam-link--on-background-light { - text-decoration: var(--amsterdam-link-inline-hover-text-decoration); - text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset); - - &:hover { - text-decoration: var(--amsterdam-link-inline-text-decoration); + color: var(--amsterdam-link-on-background-light-hover-color); } } diff --git a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json index 4cd4d0f248..9d8466d435 100644 --- a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json @@ -1,15 +1,9 @@ { "amsterdam": { - "regular": { + "link-type": { "color": { "value": "{amsterdam.color.primary-blue}" }, - "text-decoration": { "value": "underline" }, - "text-decoration-thickness": { "value": "underline" }, - "text-underline-offset": { "value": "3px" }, "hover": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "text-decoration": { "value": "underline" }, - "text-decoration-thickness": { "value": "underline" }, - "text-underline-offset": { "value": "3px" } + "color": { "value": "{amsterdam.color.dark-blue}" } }, "on-background-dark": { "color": { "value": "{amsterdam.color.primary-white}" }, @@ -22,29 +16,30 @@ "hover": { "color": { "value": "{amsterdam.color.primary-black}" } } - } - }, - "apparent": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "text-decoration": { "value": "underline" }, - "text-decoration-thickness": { "value": "underline" }, - "text-underline-offset": { "value": "3px" }, - "hover": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "text-decoration": { "value": "underline" }, - "text-decoration-thickness": { "value": "underline" }, - "text-underline-offset": { "value": "3px" } }, - "on-background-dark": { - "color": { "value": "{amsterdam.color.primary-white}" }, + "regular": { + "text-decoration-line": { "value": "underline" }, + "text-decoration-thickness": { "value": "2px" }, + "text-underline-offset": { "value": "6px" }, "hover": { - "color": { "value": "{amsterdam.color.primary-white}" } + "text-decoration-thickness": { "value": "3px" }, + "text-underline-offset": { "value": "5px" } } }, - "on-background-light": { - "color": { "value": "{amsterdam.color.primary-black}" }, + "apparent": { + "text-decoration-line": { "value": "none" }, + "text-decoration-thickness": { "value": "3px" }, + "text-underline-offset": { "value": "3px" }, "hover": { - "color": { "value": "{amsterdam.color.primary-black}" } + "text-decoration-line": { "value": "underline" } + } + }, + "in-list": { + "text-decoration-line": { "value": "none" }, + "text-decoration-thickness": { "value": "2px" }, + "text-underline-offset": { "value": "6px" }, + "hover": { + "text-decoration-line": { "value": "underline" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 408a360649..44245db866 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -1,22 +1,21 @@ { "amsterdam": { "link": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "color": { "value": "{amsterdam.link-type.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "hover": { - "color": { "value": "{amsterdam.color.dark-blue}" } + "color": { "value": "{amsterdam.link-type.hover.color}" } }, "inline": { - "hover": { - "text-decoration": { "value": "underline" }, - "text-underline-offset": { "value": "3px" } - }, + "text-decoration-line": { "value": "{amsterdam.link-type.regular.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.regular.text-underline-offset}" }, "font-family": { "value": "inherit" }, @@ -26,21 +25,23 @@ "line-height": { "value": "inherit" }, - "text-decoration": { "value": "none" }, - "text-decoration-thickness": { "value": "2px" }, + "hover": { + "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.hover.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.regular.hover.text-underline-offset}" } + }, "visited": { "color": { "value": "{amsterdam.color.purple}" } } }, "in-list": { "gap": { "value": "0.5em" }, + "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.in-list.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.in-list.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.in-list.text-underline-offset}" }, "hover": { - "text-decoration": { "value": "underline" }, - "text-decoration-thickness": { "value": "2px" }, - "text-underline-offset": { "value": "7px" } + "text-decoration-line": { "value": "{amsterdam.link-type.in-list.hover.text-decoration-line}" } }, - "text-decoration": { "value": "none" }, - "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" } }, @@ -49,13 +50,14 @@ } }, "standalone": { - "text-underline-offset": { "value": "8px" }, - "text-decoration-thickness": { "value": "2px" }, + "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.regular.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.regular.text-underline-offset}" }, "hover": { - "text-decoration-thickness": { "value": "3px" }, - "text-underline-offset": { "value": "7px" } + "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.hover.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.regular.hover.text-underline-offset}" } }, - "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" } }, @@ -64,21 +66,15 @@ } }, "on-background-dark": { - "color": { "value": "{amsterdam.color.primary-white}" }, + "color": { "value": "{amsterdam.link-type.on-background-dark.color}" }, "hover": { - "color": { "value": "{amsterdam.color.primary-white}" } - }, - "visited": { - "color": { "value": "{amsterdam.color.primary-white}" } + "color": { "value": "{amsterdam.link-type.on-background-dark.hover.color}" } } }, "on-background-light": { - "color": { "value": "{amsterdam.color.primary-black}" }, + "color": { "value": "{amsterdam.link-type.on-background-light.color}" }, "hover": { - "color": { "value": "{amsterdam.color.primary-black}" } - }, - "visited": { - "color": { "value": "{amsterdam.color.primary-black}" } + "color": { "value": "{amsterdam.link-type.on-background-light.hover.color}" } } } } diff --git a/storybook/storybook-react/src/Link/Link.stories.tsx b/storybook/storybook-react/src/Link/Link.stories.tsx index 1231f6e4f0..c058718a02 100644 --- a/storybook/storybook-react/src/Link/Link.stories.tsx +++ b/storybook/storybook-react/src/Link/Link.stories.tsx @@ -22,11 +22,10 @@ const meta = { }, }, onBackground: { - control: { type: 'select', labels: { default: 'default', light: 'light', dark: 'dark' } }, - options: ['default', 'light', 'dark'], + control: { type: 'select', labels: { undefined: 'default', light: 'light', dark: 'dark' } }, + options: [undefined, 'light', 'dark'], table: { category: 'API', - defaultValue: { summary: 'default' }, }, }, variant: { @@ -68,23 +67,20 @@ const meta = { args: { children: 'Linktekst', href: '#', + onBackground: undefined, // Workaround to avoid 'onBackground' being set to an empty function }, } satisfies Meta export default meta -export const Standalone: Story = { - args: { - onBackground: undefined, // Workaround to avoid 'onBackground' being set to an empty function - }, -} +export const Default: Story = {} + +export const Standalone: Story = {} export const Inline: Story = { args: { children: 'typograaf', - href: '#', variant: 'inline', - onBackground: undefined, }, decorators: [ (Story) => ( @@ -97,19 +93,13 @@ export const Inline: Story = { export const InList: Story = { args: { - children: 'Linktekst', - href: '#', variant: 'inList', - onBackground: undefined, }, } export const InListWithIcon: Story = { args: { - children: 'Linktekst', - href: '#', variant: 'inList', - onBackground: undefined, icon: Icons.EmailIcon, }, } From 94cd6932eb4cb579f593e3e63dc427c70562daff Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 10:11:50 +0100 Subject: [PATCH 04/20] Update card link styling --- packages/css/src/components/card/card.scss | 8 ++++---- .../tokens/src/components/amsterdam/card.tokens.json | 8 ++++++-- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss index 4968b8793c..3181dcb213 100644 --- a/packages/css/src/components/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -45,12 +45,12 @@ .amsterdam-card__link { color: var(--amsterdam-card-link-color); - text-decoration: none; - text-decoration-thickness: 2px; - text-underline-offset: 3px; + text-decoration-line: var(--amsterdam-card-link-text-decoration-line); + text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness); + text-underline-offset: var(--amsterdam-card-link-text-underline-offset); &:hover { color: var(--amsterdam-card-link-hover-color); - text-decoration: underline; + text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line); } } diff --git a/proprietary/tokens/src/components/amsterdam/card.tokens.json b/proprietary/tokens/src/components/amsterdam/card.tokens.json index bcd33529c2..46707b0e8d 100644 --- a/proprietary/tokens/src/components/amsterdam/card.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/card.tokens.json @@ -2,9 +2,13 @@ "amsterdam": { "card": { "link": { - "color": { "value": "{amsterdam.color.primary-blue}" }, + "color": { "value": "{amsterdam.link-type.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, "hover": { - "color": { "value": "{amsterdam.color.dark-blue}" } + "color": { "value": "{amsterdam.link-type.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } } }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } From 179d86e610d96681ab420bc5766201b69606038d Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 10:22:35 +0100 Subject: [PATCH 05/20] Update top task link styling --- .../top-task-link/top-task-link.scss | 7 ++- .../amsterdam/top-task-link.tokens.json | 60 ++++++------------- 2 files changed, 22 insertions(+), 45 deletions(-) diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index 8d97f8a80c..a54d3a7a27 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -25,6 +25,9 @@ font-size: var(--amsterdam-top-task-link-label-narrow-font-size); font-weight: var(--amsterdam-top-task-link-label-font-weight); line-height: var(--amsterdam-top-task-link-label-line-height); + text-decoration-line: var(--amsterdam-top-task-link-label-text-decoration-line); + text-decoration-thickness: var(--amsterdam-top-task-link-label-text-decoration-thickness); + text-underline-offset: var(--amsterdam-top-task-link-label-text-underline-offset); @media screen and (min-width: $amsterdam-breakpoint-typography) { font-size: var(--amsterdam-top-task-link-label-wide-font-size); @@ -35,9 +38,7 @@ .amsterdam-top-task-link:hover .amsterdam-top-task-link__label { color: var(--amsterdam-top-task-link-label-hover-color); - text-decoration: underline; - text-decoration-thickness: 3px; - text-underline-offset: 0.5rem; + text-decoration-line: var(--amsterdam-top-task-link-label-hover-text-decoration-line); } .amsterdam-top-task-link__description { diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index 1a1ddf6710..b43f1cecae 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -2,61 +2,37 @@ "amsterdam": { "top-task-link": { "description": { - "color": { - "value": "{amsterdam.color.primary-black}" - }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.normal}" - }, - "line-height": { - "value": "{amsterdam.typography.text-level.7.line-height}" - }, + "color": { "value": "{amsterdam.color.primary-black}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, "narrow": { - "font-size": { - "value": "{amsterdam.typography.text-level.7.narrow.font-size}" - } + "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" } }, "wide": { - "font-size": { - "value": "{amsterdam.typography.text-level.7.wide.font-size}" - } + "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" } } }, "label": { - "color": { - "value": "{amsterdam.color.primary-blue}" - }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.bold}" - }, + "color": { "value": "{amsterdam.link-type.color}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, + "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, "hover": { - "color": { - "value": "{amsterdam.color.dark-blue}" - } - }, - "line-height": { - "value": "{amsterdam.typography.text-level.4.line-height}" + "color": { "value": "{amsterdam.color.dark-blue}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } }, "narrow": { - "font-size": { - "value": "{amsterdam.typography.text-level.4.narrow.font-size}" - } + "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" } }, "wide": { - "font-size": { - "value": "{amsterdam.typography.text-level.4.wide.font-size}" - } + "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" } } }, - "outline-offset": { - "value": "{amsterdam.focus.outline-offset}" - } + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } } } } From a02bbf0e65a4e6da161987bf0b4b8d8f38480f7a Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 10:41:52 +0100 Subject: [PATCH 06/20] Update Breadcrumb link styling --- .../src/components/breadcrumb/breadcrumb.scss | 17 ++++---- .../amsterdam/breadcrumb.tokens.json | 42 ++++++------------- 2 files changed, 21 insertions(+), 38 deletions(-) diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 7b4c0a9892..f4a03a33f1 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -40,20 +40,21 @@ } .amsterdam-breadcrumb-item:not(:last-child)::after { - background-color: var(--amsterdam-breadcrumb-color); + background-color: var(--amsterdam-breadcrumb-seperator-background-color); clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z"); content: ""; display: inline-block; - height: 16px; + height: 1rem; margin-inline-start: 1rem; - width: 16px; + width: 1rem; } .amsterdam-breadcrumb-item__link { - color: var(--amsterdam-breadcrumb-color); - cursor: pointer; + color: var(--amsterdam-breadcrumb-item-link-color); outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset); - text-decoration: none; + text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line); + text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness); + text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset); &::first-letter { text-transform: capitalize; @@ -61,8 +62,6 @@ &:hover { color: var(--amsterdam-breadcrumb-item-link-hover-color); - text-decoration: underline; - text-decoration-thickness: 2px; - text-underline-offset: 3px; + text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line); } } diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index 578321256d..f37e63ef52 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -1,43 +1,27 @@ { "amsterdam": { "breadcrumb": { - "color": { - "value": "{amsterdam.color.primary-blue}" - }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.normal}" - }, - "line-height": { - "value": "{amsterdam.typography.text-level.7.line-height}" - }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, + "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" } }, "wide": { "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" } }, + "seperator": { + "background-color": { "value": "{amsterdam.color.primary-blue}" } + }, "item-link": { - "outline-offset": { - "value": "{amsterdam.focus.outline-offset}" - }, + "color": { "value": "{amsterdam.link-type.color}" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, "hover": { - "color": { - "value": "{amsterdam.color.dark-blue}" - }, - "box-shadow": { - "value": "inset 0 -2px 0 0 {amsterdam.color.dark-blue}" - } - }, - "focus": { - "color": { - "value": "{amsterdam.color.dark-blue}" - }, - "text-decoration": { - "value": "underline" - } + "color": { "value": "{amsterdam.color.dark-blue}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } } } } From f7b4a854562617f81fdfc02efe378ca1f0dcc57e Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 10:56:45 +0100 Subject: [PATCH 07/20] Update PageMenu link styling --- packages/css/src/components/page-menu/page-menu.scss | 8 +++++--- .../src/components/amsterdam/page-menu.tokens.json | 11 +++++++---- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss index 49be761a8e..3ea1e499a0 100644 --- a/packages/css/src/components/page-menu/page-menu.scss +++ b/packages/css/src/components/page-menu/page-menu.scss @@ -44,9 +44,11 @@ font-weight: var(--amsterdam-page-menu-item-font-weight); gap: var(--amsterdam-page-menu-item-gap); line-height: var(--amsterdam-page-menu-item-line-height); - outline-offset: var(--amsterdam-focus-outline-offset); + outline-offset: var(--amsterdam-page-menu-item-outline-offset); text-align: center; - text-decoration: var(--amsterdam-page-menu-item-text-decoration); + text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line); + text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness); + text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset); touch-action: manipulation; @media screen and (min-width: $amsterdam-breakpoint-typography) { @@ -70,7 +72,7 @@ .amsterdam-page-menu__link:hover, .amsterdam-page-menu__button:hover { color: var(--amsterdam-page-menu-item-hover-color); - text-decoration: var(--amsterdam-page-menu-item-hover-text-decoration); + text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line); } .amsterdam-page-menu__link svg, diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index e4013a7ea2..47070c051b 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -4,12 +4,15 @@ "column-gap": { "value": "2.5rem" }, "row-gap": { "value": "0.5rem" }, "item": { - "color": { "value": "{amsterdam.color.primary-black}" }, + "color": { "value": "{amsterdam.link-type.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.5rem" }, "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, - "text-decoration": { "value": "none" }, + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.in-list.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.in-list.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.in-list.text-underline-offset}" }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" } }, @@ -17,8 +20,8 @@ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" } }, "hover": { - "color": { "value": "{amsterdam.color.primary-black}" }, - "text-decoration": { "value": "underline" } + "color": { "value": "{amsterdam.link-type.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.in-list.hover.text-decoration-line}" } } } } From ca16fe6fc1aa846bc82cfcb3f19e8c5df2b632c7 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 11:00:19 +0100 Subject: [PATCH 08/20] Update PageMenu docs --- packages/css/src/components/page-menu/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/css/src/components/page-menu/README.md b/packages/css/src/components/page-menu/README.md index 7f5674db39..4478954e1c 100644 --- a/packages/css/src/components/page-menu/README.md +++ b/packages/css/src/components/page-menu/README.md @@ -13,3 +13,5 @@ Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uits ## Relevante WCAG eisen - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html) + +PageMenu is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor. From eeb6e8689aae03b7c913a65854f8c66c4ea3dad2 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 11:13:01 +0100 Subject: [PATCH 09/20] Update Pagination styling --- .../src/components/pagination/pagination.scss | 7 +++--- .../amsterdam/pagination.tokens.json | 24 +++++++++---------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss index 4379e03be4..06ea1dfd3b 100644 --- a/packages/css/src/components/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -45,13 +45,14 @@ gap: 0.5rem; outline-offset: var(--amsterdam-pagination-button-outline-offset); padding-inline: 0.75rem; - text-decoration-thickness: 2px; - text-underline-offset: 3px; + text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line); + text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness); + text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset); touch-action: manipulation; &:hover { color: var(--amsterdam-pagination-button-hover-color); - text-decoration: underline; + text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line); } &:disabled { diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index 800f245ec7..84b262fe61 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -1,13 +1,9 @@ { "amsterdam": { "pagination": { - "color": { "value": "{amsterdam.color.primary-blue}" }, - "font-family": { - "value": "{amsterdam.typography.font-family}" - }, - "font-weight": { - "value": "{amsterdam.typography.font-weight.normal}" - }, + "color": { "value": "{amsterdam.link-type.color}" }, + "font-family": { "value": "{amsterdam.typography.font-family}" }, + "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" } @@ -16,15 +12,17 @@ "font-size": { "value": "{amsterdam.typography.text-level.6.wide.font-size}" } }, "button": { + "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, "current": { - "font-weight": { - "value": "{amsterdam.typography.font-weight.bold}" - } + "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, "hover": { - "color": { "value": "{amsterdam.color.dark-blue}" } - }, - "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } + "color": { "value": "{amsterdam.link-type.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } + } } } } From 54f21c9ec69e4723d97c90bf009c22772cd5175a Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 17:12:56 +0100 Subject: [PATCH 10/20] Fix typo --- CONTRIBUTING.md | 2 +- packages/css/src/components/breadcrumb/breadcrumb.scss | 2 +- .../tokens/src/components/amsterdam/breadcrumb.tokens.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dc8ea8bd4b..b8930c1924 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -68,7 +68,7 @@ If you need to link your local version of this library (to test your unpublished - Go to the root directory of the packages you want to link to (i.e. where its package.json is) - Run `npm link`. Do this for all packages you want to link. - Go to the root of the project in which you want to consume the packages -- Run `npm link `. If you want to link multiple packages, seperate the package names with a space. For example: `npm link @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-react @amsterdam/design-system-react-icons`. Be careful: you have to link all packages in the same namespace together. Doing it one at a time will only link the last one. +- Run `npm link `. If you want to link multiple packages, separate the package names with a space. For example: `npm link @amsterdam/design-system-tokens @amsterdam/design-system-assets @amsterdam/design-system-react @amsterdam/design-system-react-icons`. Be careful: you have to link all packages in the same namespace together. Doing it one at a time will only link the last one. - Sometimes the local link is severed. Run `npm link @amsterdam/...` again if this happens. ## Licensing diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index f4a03a33f1..9a9ea57ca1 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -40,7 +40,7 @@ } .amsterdam-breadcrumb-item:not(:last-child)::after { - background-color: var(--amsterdam-breadcrumb-seperator-background-color); + background-color: var(--amsterdam-breadcrumb-separator-background-color); clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z"); content: ""; display: inline-block; diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index f37e63ef52..510e7d4ce6 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -10,7 +10,7 @@ "wide": { "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" } }, - "seperator": { + "separator": { "background-color": { "value": "{amsterdam.color.primary-blue}" } }, "item-link": { From c8c46db49b3e605fba9e5ce6a21463a8ac343c74 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Mon, 27 Nov 2023 17:23:15 +0100 Subject: [PATCH 11/20] Rename link-type to link-appearance --- .../common/amsterdam/link-type.tokens.json | 2 +- .../amsterdam/breadcrumb.tokens.json | 10 ++--- .../src/components/amsterdam/card.tokens.json | 12 ++--- .../src/components/amsterdam/link.tokens.json | 44 ++++++++++--------- .../amsterdam/page-menu.tokens.json | 12 ++--- .../amsterdam/pagination.tokens.json | 12 ++--- .../amsterdam/top-task-link.tokens.json | 10 ++--- 7 files changed, 53 insertions(+), 49 deletions(-) diff --git a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json index 9d8466d435..a3286683b6 100644 --- a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json @@ -1,6 +1,6 @@ { "amsterdam": { - "link-type": { + "link-appearance": { "color": { "value": "{amsterdam.color.primary-blue}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" } diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index 510e7d4ce6..00e5bd570e 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -14,14 +14,14 @@ "background-color": { "value": "{amsterdam.color.primary-blue}" } }, "item-link": { - "color": { "value": "{amsterdam.link-type.color}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/card.tokens.json b/proprietary/tokens/src/components/amsterdam/card.tokens.json index 46707b0e8d..31a0b4e4ae 100644 --- a/proprietary/tokens/src/components/amsterdam/card.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/card.tokens.json @@ -2,13 +2,13 @@ "amsterdam": { "card": { "link": { - "color": { "value": "{amsterdam.link-type.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, "hover": { - "color": { "value": "{amsterdam.link-type.hover.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } } }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 44245db866..5d7afad350 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -1,7 +1,7 @@ { "amsterdam": { "link": { - "color": { "value": "{amsterdam.link-type.color}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, @@ -10,12 +10,12 @@ }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "hover": { - "color": { "value": "{amsterdam.link-type.hover.color}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" } }, "inline": { - "text-decoration-line": { "value": "{amsterdam.link-type.regular.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.regular.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.regular.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.text-underline-offset}" }, "font-family": { "value": "inherit" }, @@ -26,8 +26,10 @@ "value": "inherit" }, "hover": { - "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.hover.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.regular.hover.text-underline-offset}" } + "text-decoration-thickness": { + "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}" + }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" } }, "visited": { "color": { "value": "{amsterdam.color.purple}" } @@ -36,11 +38,11 @@ "in-list": { "gap": { "value": "0.5em" }, "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.in-list.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.in-list.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.in-list.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.in-list.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.in-list.text-underline-offset}" }, "hover": { - "text-decoration-line": { "value": "{amsterdam.link-type.in-list.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.hover.text-decoration-line}" } }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" } @@ -51,12 +53,14 @@ }, "standalone": { "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.regular.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.regular.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.regular.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.text-underline-offset}" }, "hover": { - "text-decoration-thickness": { "value": "{amsterdam.link-type.regular.hover.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.regular.hover.text-underline-offset}" } + "text-decoration-thickness": { + "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}" + }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.hover.text-underline-offset}" } }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.6.narrow.font-size}" } @@ -66,15 +70,15 @@ } }, "on-background-dark": { - "color": { "value": "{amsterdam.link-type.on-background-dark.color}" }, + "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }, "hover": { - "color": { "value": "{amsterdam.link-type.on-background-dark.hover.color}" } + "color": { "value": "{amsterdam.link-appearance.on-background-dark.hover.color}" } } }, "on-background-light": { - "color": { "value": "{amsterdam.link-type.on-background-light.color}" }, + "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }, "hover": { - "color": { "value": "{amsterdam.link-type.on-background-light.hover.color}" } + "color": { "value": "{amsterdam.link-appearance.on-background-light.hover.color}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index 47070c051b..b0a1643a1b 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -4,15 +4,15 @@ "column-gap": { "value": "2.5rem" }, "row-gap": { "value": "0.5rem" }, "item": { - "color": { "value": "{amsterdam.link-type.color}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.5rem" }, "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.in-list.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.in-list.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.in-list.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.in-list.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.in-list.text-underline-offset}" }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.7.narrow.font-size}" } }, @@ -20,8 +20,8 @@ "font-size": { "value": "{amsterdam.typography.text-level.7.wide.font-size}" } }, "hover": { - "color": { "value": "{amsterdam.link-type.hover.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.in-list.hover.text-decoration-line}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.hover.text-decoration-line}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index 84b262fe61..2088ae1f89 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -1,7 +1,7 @@ { "amsterdam": { "pagination": { - "color": { "value": "{amsterdam.link-type.color}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "line-height": { "value": "{amsterdam.typography.text-level.6.line-height}" }, @@ -13,15 +13,15 @@ }, "button": { "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, "current": { "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, "hover": { - "color": { "value": "{amsterdam.link-type.hover.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } + "color": { "value": "{amsterdam.link-appearance.hover.color}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index b43f1cecae..d94760046f 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -14,16 +14,16 @@ } }, "label": { - "color": { "value": "{amsterdam.link-type.color}" }, + "color": { "value": "{amsterdam.link-appearance.color}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-type.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-type.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, - "text-decoration-line": { "value": "{amsterdam.link-type.apparent.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" } From 62d513b25b9d505d9d1ba3e15f96bb7b1a931e97 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 09:29:52 +0100 Subject: [PATCH 12/20] Use correct BEM classes --- packages/css/src/components/breadcrumb/breadcrumb.scss | 6 +++--- packages/react/src/Breadcrumb/Breadcrumb.test.tsx | 2 +- packages/react/src/Breadcrumb/Breadcrumb.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 9a9ea57ca1..943a04920a 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -34,12 +34,12 @@ @include reset; } -.amsterdam-breadcrumb-item { +.amsterdam-breadcrumb__item { align-items: center; display: flex; } -.amsterdam-breadcrumb-item:not(:last-child)::after { +.amsterdam-breadcrumb__item:not(:last-child)::after { background-color: var(--amsterdam-breadcrumb-separator-background-color); clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z"); content: ""; @@ -49,7 +49,7 @@ width: 1rem; } -.amsterdam-breadcrumb-item__link { +.amsterdam-breadcrumb__link { color: var(--amsterdam-breadcrumb-item-link-color); outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset); text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line); diff --git a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx index f3ace33ec4..d5420454df 100644 --- a/packages/react/src/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/react/src/Breadcrumb/Breadcrumb.test.tsx @@ -22,7 +22,7 @@ describe('Breadcrumb', () => { ) const breadcrumb = screen.getByRole('navigation') - const breadcrumbs = container.querySelectorAll('.amsterdam-breadcrumb-item') + const breadcrumbs = container.querySelectorAll('.amsterdam-breadcrumb__item') expect(breadcrumb).toBeInTheDocument() expect(breadcrumbs.length).toBe(3) diff --git a/packages/react/src/Breadcrumb/Breadcrumb.tsx b/packages/react/src/Breadcrumb/Breadcrumb.tsx index 164bb1af1a..07cb4eeac9 100644 --- a/packages/react/src/Breadcrumb/Breadcrumb.tsx +++ b/packages/react/src/Breadcrumb/Breadcrumb.tsx @@ -31,8 +31,8 @@ export interface BreadcrumbItemProps extends PropsWithChildren) => { return ( -
  • - +
  • + {children}
    • From 7a8d846db16dd454bf592f90ed5e008759d78d2d Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 09:39:52 +0100 Subject: [PATCH 13/20] Split up hover and visited link styles --- packages/css/src/components/link/link.scss | 14 ++++++++++---- .../src/common/amsterdam/link-type.tokens.json | 10 ++-------- .../src/components/amsterdam/link.tokens.json | 10 ++++++++-- 3 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/css/src/components/link/link.scss b/packages/css/src/components/link/link.scss index cc5481a67b..3ec2ad6bba 100644 --- a/packages/css/src/components/link/link.scss +++ b/packages/css/src/components/link/link.scss @@ -88,17 +88,23 @@ .amsterdam-link--on-background-dark { color: var(--amsterdam-link-on-background-dark-color); - &:hover, - &:visited { + &:hover { color: var(--amsterdam-link-on-background-dark-hover-color); } + + &:visited { + color: var(--amsterdam-link-on-background-dark-visited-color); + } } .amsterdam-link--on-background-light { color: var(--amsterdam-link-on-background-light-color); - &:hover, - &:visited { + &:hover { color: var(--amsterdam-link-on-background-light-hover-color); } + + &:visited { + color: var(--amsterdam-link-on-background-light-visited-color); + } } diff --git a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json index a3286683b6..06ea8b5405 100644 --- a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-type.tokens.json @@ -6,16 +6,10 @@ "color": { "value": "{amsterdam.color.dark-blue}" } }, "on-background-dark": { - "color": { "value": "{amsterdam.color.primary-white}" }, - "hover": { - "color": { "value": "{amsterdam.color.primary-white}" } - } + "color": { "value": "{amsterdam.color.primary-white}" } }, "on-background-light": { - "color": { "value": "{amsterdam.color.primary-black}" }, - "hover": { - "color": { "value": "{amsterdam.color.primary-black}" } - } + "color": { "value": "{amsterdam.color.primary-black}" } }, "regular": { "text-decoration-line": { "value": "underline" }, diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 5d7afad350..b5f5c34ddb 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -72,13 +72,19 @@ "on-background-dark": { "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" }, "hover": { - "color": { "value": "{amsterdam.link-appearance.on-background-dark.hover.color}" } + "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" } + }, + "visited": { + "color": { "value": "{amsterdam.link-appearance.on-background-dark.color}" } } }, "on-background-light": { "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" }, "hover": { - "color": { "value": "{amsterdam.link-appearance.on-background-light.hover.color}" } + "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" } + }, + "visited": { + "color": { "value": "{amsterdam.link-appearance.on-background-light.color}" } } } } From d4153040b153e157b6b0f16fda40a87c9228fd29 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 09:40:48 +0100 Subject: [PATCH 14/20] Rename link appearance token file --- .../{link-type.tokens.json => link-appearance.tokens.json} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename proprietary/tokens/src/common/amsterdam/{link-type.tokens.json => link-appearance.tokens.json} (100%) diff --git a/proprietary/tokens/src/common/amsterdam/link-type.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json similarity index 100% rename from proprietary/tokens/src/common/amsterdam/link-type.tokens.json rename to proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json From 8b34b70018c5b412dc322f7e17adaea67aaceec5 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 10:01:52 +0100 Subject: [PATCH 15/20] Convert pixel values to rems --- .../common/amsterdam/link-appearance.tokens.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json index 06ea8b5405..22e9e3a2f7 100644 --- a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json @@ -13,25 +13,25 @@ }, "regular": { "text-decoration-line": { "value": "underline" }, - "text-decoration-thickness": { "value": "2px" }, - "text-underline-offset": { "value": "6px" }, + "text-decoration-thickness": { "value": "0.125rem" }, + "text-underline-offset": { "value": "0.375rem" }, "hover": { - "text-decoration-thickness": { "value": "3px" }, - "text-underline-offset": { "value": "5px" } + "text-decoration-thickness": { "value": "0.1875rem" }, + "text-underline-offset": { "value": "0.3125rem" } } }, "apparent": { "text-decoration-line": { "value": "none" }, - "text-decoration-thickness": { "value": "3px" }, - "text-underline-offset": { "value": "3px" }, + "text-decoration-thickness": { "value": "0.1875rem" }, + "text-underline-offset": { "value": "0.1875rem" }, "hover": { "text-decoration-line": { "value": "underline" } } }, "in-list": { "text-decoration-line": { "value": "none" }, - "text-decoration-thickness": { "value": "2px" }, - "text-underline-offset": { "value": "6px" }, + "text-decoration-thickness": { "value": "0.125rem" }, + "text-underline-offset": { "value": "0.375rem" }, "hover": { "text-decoration-line": { "value": "underline" } } From 72e28834d56c2e02ea954e006262bd294abc1221 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 11:00:26 +0100 Subject: [PATCH 16/20] Rename apparent to subtle --- .../src/common/amsterdam/link-appearance.tokens.json | 2 +- .../src/components/amsterdam/breadcrumb.tokens.json | 8 ++++---- .../tokens/src/components/amsterdam/card.tokens.json | 8 ++++---- .../src/components/amsterdam/pagination.tokens.json | 8 ++++---- .../src/components/amsterdam/top-task-link.tokens.json | 8 ++++---- 5 files changed, 17 insertions(+), 17 deletions(-) diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json index 22e9e3a2f7..9bdd0e225a 100644 --- a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json @@ -20,7 +20,7 @@ "text-underline-offset": { "value": "0.3125rem" } } }, - "apparent": { + "subtle": { "text-decoration-line": { "value": "none" }, "text-decoration-thickness": { "value": "0.1875rem" }, "text-underline-offset": { "value": "0.1875rem" }, diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index 00e5bd570e..39d2aca8c1 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -16,12 +16,12 @@ "item-link": { "color": { "value": "{amsterdam.link-appearance.color}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/card.tokens.json b/proprietary/tokens/src/components/amsterdam/card.tokens.json index 31a0b4e4ae..a046e4af1f 100644 --- a/proprietary/tokens/src/components/amsterdam/card.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/card.tokens.json @@ -3,12 +3,12 @@ "card": { "link": { "color": { "value": "{amsterdam.link-appearance.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" } diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index 2088ae1f89..eb78e4d3ae 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -13,15 +13,15 @@ }, "button": { "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, "current": { "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index d94760046f..140545ded7 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -18,12 +18,12 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.apparent.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.apparent.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.apparent.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, "narrow": { "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" } From d3e9f6138ca3c0e47f32a83c53d0eb1d314381ef Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 11:19:21 +0100 Subject: [PATCH 17/20] Give subtle links 6px underline offset as well --- .../tokens/src/common/amsterdam/link-appearance.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json index 9bdd0e225a..d385e87e4e 100644 --- a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json @@ -23,7 +23,7 @@ "subtle": { "text-decoration-line": { "value": "none" }, "text-decoration-thickness": { "value": "0.1875rem" }, - "text-underline-offset": { "value": "0.1875rem" }, + "text-underline-offset": { "value": "0.375rem" }, "hover": { "text-decoration-line": { "value": "underline" } } From 79abb1452f1c6cd24aebc58a22ce3468b06db7eb Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Wed, 29 Nov 2023 12:02:49 +0100 Subject: [PATCH 18/20] Fix import, remove unused token --- packages/css/src/components/button/button.scss | 2 +- .../tokens/src/components/amsterdam/top-task-link.tokens.json | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss index 424f61a73f..205df7d0d0 100644 --- a/packages/css/src/components/button/button.scss +++ b/packages/css/src/components/button/button.scss @@ -3,7 +3,7 @@ * Copyright (c) 2023 Gemeente Amsterdam */ -@import "../../node_modules/@utrecht/components/button/css"; +@import "../../../node_modules/@utrecht/components/button/css"; @mixin reset { -webkit-text-size-adjust: 100%; diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index 8fb067438f..ed48127695 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -5,7 +5,6 @@ "color": { "value": "{amsterdam.color.primary-black}" }, "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, - "line-height": { "value": "{amsterdam.typography.text-level.7.line-height}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" } From 1eb9821f13cd082250ab93820e269e872f896e7e Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Thu, 30 Nov 2023 09:30:53 +0100 Subject: [PATCH 19/20] Remove 'in-list' variant --- .../src/common/amsterdam/link-appearance.tokens.json | 8 -------- .../tokens/src/components/amsterdam/link.tokens.json | 8 ++++---- .../tokens/src/components/amsterdam/page-menu.tokens.json | 8 ++++---- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json index d385e87e4e..cf65aaf64d 100644 --- a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json @@ -21,14 +21,6 @@ } }, "subtle": { - "text-decoration-line": { "value": "none" }, - "text-decoration-thickness": { "value": "0.1875rem" }, - "text-underline-offset": { "value": "0.375rem" }, - "hover": { - "text-decoration-line": { "value": "underline" } - } - }, - "in-list": { "text-decoration-line": { "value": "none" }, "text-decoration-thickness": { "value": "0.125rem" }, "text-underline-offset": { "value": "0.375rem" }, diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 73f1b22599..7220427314 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -37,11 +37,11 @@ }, "in-list": { "gap": { "value": "0.5em" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.in-list.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.in-list.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, "hover": { - "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index 76ea903fb2..05ed719f32 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -9,9 +9,9 @@ "font-weight": { "value": "{amsterdam.typography.font-weight.normal}" }, "gap": { "value": "0.5rem" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.in-list.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.in-list.text-underline-offset}" }, + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" } @@ -22,7 +22,7 @@ }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, - "text-decoration-line": { "value": "{amsterdam.link-appearance.in-list.hover.text-decoration-line}" } + "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } } } } From c27cdcc612a07b369a99ae48c39f453d2307cfa8 Mon Sep 17 00:00:00 2001 From: Aram Limpens Date: Thu, 30 Nov 2023 09:35:26 +0100 Subject: [PATCH 20/20] Move text-decoration-thickness and text-underline-offset to root of link-appearance --- .../src/common/amsterdam/link-appearance.tokens.json | 6 ++---- .../src/components/amsterdam/breadcrumb.tokens.json | 4 ++-- .../tokens/src/components/amsterdam/card.tokens.json | 4 ++-- .../tokens/src/components/amsterdam/link.tokens.json | 12 ++++++------ .../src/components/amsterdam/page-menu.tokens.json | 4 ++-- .../src/components/amsterdam/pagination.tokens.json | 4 ++-- .../components/amsterdam/top-task-link.tokens.json | 4 ++-- 7 files changed, 18 insertions(+), 20 deletions(-) diff --git a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json index cf65aaf64d..bfa9049bf7 100644 --- a/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json +++ b/proprietary/tokens/src/common/amsterdam/link-appearance.tokens.json @@ -2,6 +2,8 @@ "amsterdam": { "link-appearance": { "color": { "value": "{amsterdam.color.primary-blue}" }, + "text-decoration-thickness": { "value": "0.125rem" }, + "text-underline-offset": { "value": "0.375rem" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" } }, @@ -13,8 +15,6 @@ }, "regular": { "text-decoration-line": { "value": "underline" }, - "text-decoration-thickness": { "value": "0.125rem" }, - "text-underline-offset": { "value": "0.375rem" }, "hover": { "text-decoration-thickness": { "value": "0.1875rem" }, "text-underline-offset": { "value": "0.3125rem" } @@ -22,8 +22,6 @@ }, "subtle": { "text-decoration-line": { "value": "none" }, - "text-decoration-thickness": { "value": "0.125rem" }, - "text-underline-offset": { "value": "0.375rem" }, "hover": { "text-decoration-line": { "value": "underline" } } diff --git a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json index a846de0392..87714582e7 100644 --- a/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/breadcrumb.tokens.json @@ -10,8 +10,8 @@ "color": { "value": "{amsterdam.link-appearance.color}" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } diff --git a/proprietary/tokens/src/components/amsterdam/card.tokens.json b/proprietary/tokens/src/components/amsterdam/card.tokens.json index a046e4af1f..bbc37d2fd8 100644 --- a/proprietary/tokens/src/components/amsterdam/card.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/card.tokens.json @@ -4,8 +4,8 @@ "link": { "color": { "value": "{amsterdam.link-appearance.color}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.link-appearance.hover.color}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } diff --git a/proprietary/tokens/src/components/amsterdam/link.tokens.json b/proprietary/tokens/src/components/amsterdam/link.tokens.json index 7220427314..7439b4c81a 100644 --- a/proprietary/tokens/src/components/amsterdam/link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/link.tokens.json @@ -14,8 +14,8 @@ }, "inline": { "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.regular.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "font-family": { "value": "inherit" }, @@ -38,8 +38,8 @@ "in-list": { "gap": { "value": "0.5em" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" } }, @@ -54,8 +54,8 @@ }, "standalone": { "text-decoration-line": { "value": "{amsterdam.link-appearance.regular.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.regular.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.regular.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { "text-decoration-thickness": { "value": "{amsterdam.link-appearance.regular.hover.text-decoration-thickness}" diff --git a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json index 05ed719f32..0626af2b90 100644 --- a/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/page-menu.tokens.json @@ -10,8 +10,8 @@ "gap": { "value": "0.5rem" }, "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "spacious": { "font-size": { "value": "{amsterdam.typography.spacious.text-level.7.font-size}" }, "line-height": { "value": "{amsterdam.typography.spacious.text-level.7.line-height}" } diff --git a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json index ce240517db..b3b6cef8d1 100644 --- a/proprietary/tokens/src/components/amsterdam/pagination.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/pagination.tokens.json @@ -15,8 +15,8 @@ "button": { "outline-offset": { "value": "{amsterdam.focus.outline-offset}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "current": { "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" } }, diff --git a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json index ed48127695..f772433a64 100644 --- a/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/top-task-link.tokens.json @@ -19,8 +19,8 @@ "font-family": { "value": "{amsterdam.typography.font-family}" }, "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.text-decoration-line}" }, - "text-decoration-thickness": { "value": "{amsterdam.link-appearance.subtle.text-decoration-thickness}" }, - "text-underline-offset": { "value": "{amsterdam.link-appearance.subtle.text-underline-offset}" }, + "text-decoration-thickness": { "value": "{amsterdam.link-appearance.text-decoration-thickness}" }, + "text-underline-offset": { "value": "{amsterdam.link-appearance.text-underline-offset}" }, "hover": { "color": { "value": "{amsterdam.color.dark-blue}" }, "text-decoration-line": { "value": "{amsterdam.link-appearance.subtle.hover.text-decoration-line}" }