From 917ac1f4a90b7ec2f96247ee015ab47224117d86 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 5 Jun 2024 11:29:49 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=A8=20V1=20Release=20candidate?= =?UTF-8?q?=20(#1849)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Lasse Karlsen <33222679+Febakke@users.noreply.github.com> Co-authored-by: Marianne Røsvik Co-authored-by: Tobias Barsnes Co-authored-by: Øyvind Thune Co-authored-by: Tobias Barsnes Co-authored-by: Marianne Røsvik --- .eslintignore | 2 - .eslintrc.cjs | 1 + .github/workflows/build-tokens.yml | 10 +- .github/workflows/theme-deploy.yml | 6 +- .stylelintignore | 4 +- .vscode/settings.json | 2 +- .../tokens.css => apps/legacy-tokens.css | 25 +- .../components/Banner/Banner.module.css | 158 - apps/storefront/components/Banner/Banner.tsx | 40 - apps/storefront/components/Banner/index.ts | 1 - .../components/Blog/Card/BlogCard.module.css | 8 +- .../components/Blog/Card/BlogCard.tsx | 10 +- .../Blog/Contributors/Contributors.module.css | 16 +- .../Blog/Contributors/Contributors.tsx | 4 +- .../components/ClipboardBtn/ClipboardBtn.tsx | 4 +- .../CodeSnippet/CodeSnippet.module.css | 6 +- .../ComponentCard/ComponentCard.module.css | 18 +- .../ComponentCard/ComponentCard.tsx | 2 +- .../components/Footer/Footer.module.css | 31 +- apps/storefront/components/Footer/Footer.tsx | 34 +- .../components/Grid/Grid.module.css | 2 +- .../components/Header/Header.module.css | 30 +- .../components/Image/Image.module.css | 12 +- .../ImageBanner/ImageBanner.module.css | 34 +- .../ImageSection/ImageSection.module.css | 44 +- .../components/Link/Github/GithubLink.tsx | 4 +- .../MdxContent/MdxContent.module.css | 62 +- .../NavigationCard/NavigationCard.module.css | 28 +- .../ResponsiveIframe.module.css | 6 +- .../components/Section/Section.module.css | 16 +- .../storefront/components/Section/Section.tsx | 2 +- .../SidebarMenu/SidebarMenu.module.css | 32 +- .../components/SidebarMenu/SidebarMenu.tsx | 6 +- .../SubPages/Banner/Banner.module.css | 28 +- .../components/SubPages/Banner/Banner.tsx | 2 +- apps/storefront/components/Tag/Tag.module.css | 18 - apps/storefront/components/Tag/Tag.tsx | 21 - apps/storefront/components/Tag/index.ts | 1 - .../Tokens/TokenList/TokenList.module.css | 7 +- .../components/Tokens/TokenList/TokenList.tsx | 73 +- .../Tokens/TokenSize/TokenSize.module.css | 2 +- apps/storefront/components/index.ts | 2 - apps/storefront/globals.css | 12 +- .../BlogArticleLayout.module.css | 40 +- .../BlogArticleLayout/BlogArticleLayout.tsx | 6 +- .../BlogPageLayout/BlogPageLayout.module.css | 8 +- .../ComponentsLayout.module.css | 4 +- .../FrontpageLayout.module.css | 2 +- .../FrontpageLayout/FrontpageLayout.tsx | 2 +- .../MenuPageLayout/MenuPageLayout.module.css | 34 +- .../layouts/MenuPageLayout/MenuPageLayout.tsx | 2 +- .../NavMenuPageLayout.module.css | 4 +- .../NavMenuPageLayout/NavMenuPageLayout.tsx | 2 +- .../NavPageLayout/NavPageLayout.module.css | 4 +- .../NotFoundLayout/NotFoundLayout.module.css | 10 +- .../layouts/PageLayout/PageLayout.module.css | 18 +- .../layouts/PageLayout/PageLayout.tsx | 2 +- apps/storefront/next.config.mjs | 3 + apps/storefront/package.json | 6 +- apps/storefront/pages/_app.tsx | 3 +- .../pages/bloggen/2024/altinn-studio.mdx | 2 +- apps/storefront/pages/bloggen/index.mdx | 2 +- .../god-praksis/tilgjengelighet/kontrast.mdx | 14 +- .../grunnleggende/designelementer/farger.mdx | 8 +- apps/storefront/pages/index.mdx | 6 +- apps/storefront/tokens/altinn.ts | 4993 ------- apps/storefront/tokens/altinn/dark.ts | 10327 ++++++++++++++ apps/storefront/tokens/altinn/light.ts | 10327 ++++++++++++++ apps/storefront/tokens/brreg.ts | 5041 ------- apps/storefront/tokens/brreg/dark.ts | 11271 ++++++++++++++++ apps/storefront/tokens/brreg/light.ts | 11271 ++++++++++++++++ apps/storefront/tokens/digdir.ts | 4987 ------- apps/storefront/tokens/digdir/dark.ts | 10327 ++++++++++++++ apps/storefront/tokens/digdir/light.ts | 10327 ++++++++++++++ apps/storefront/tokens/index.ts | 8 +- apps/storefront/tokens/portal/dark.ts | 10327 ++++++++++++++ apps/storefront/tokens/portal/light.ts | 10327 ++++++++++++++ apps/storefront/tokens/tilsynet.ts | 4939 ------- apps/storefront/tokens/uutilsynet/dark.ts | 10327 ++++++++++++++ apps/storefront/tokens/uutilsynet/light.ts | 10327 ++++++++++++++ apps/storybook/assets/img/avatars/female1.png | Bin 0 -> 40778 bytes apps/storybook/assets/img/avatars/male1.png | Bin 0 -> 35519 bytes apps/storybook/assets/img/avatars/male2.png | Bin 0 -> 48507 bytes apps/storybook/customTheme.ts | 9 +- .../docs-components/DoAndDont/DoAndDont.tsx | 2 +- .../Information/Information.tsx | 2 +- apps/storybook/main.ts | 2 + apps/storybook/preview-head.html | 4 + apps/storybook/preview.tsx | 26 +- apps/theme/{src => }/app/favicon.ico | Bin apps/theme/app/globals.css | 143 + apps/theme/{src => }/app/layout.tsx | 10 +- apps/theme/app/loading.tsx | 4 + .../app/om-verktoyet/page.module.css | 0 apps/theme/app/om-verktoyet/page.tsx | 23 + apps/theme/app/page.module.css | 125 + apps/theme/app/page.tsx | 277 + .../BackgroundSurface.module.css | 35 + .../BackgroundSurface/BackgroundSurface.tsx | 158 + .../Backgrounds/Backgrounds.module.css | 26 + .../app/testside/Backgrounds/Backgrounds.tsx | 114 + .../BaseContrast/BaseContrast.module.css | 61 + .../testside/BaseContrast/BaseContrast.tsx | 120 + .../ContrastBox/ContrastBox.module.css | 30 + .../app/testside/ContrastBox/ContrastBox.tsx | 21 + .../Interaction/Interaction.module.css | 48 + .../app/testside/Interaction/Interaction.tsx | 237 + .../app/dev => app/testside}/page.module.css | 66 +- apps/theme/app/testside/page.tsx | 369 + .../CodeSnippet/CodeSnippet.module.css | 40 + .../components/CodeSnippet/CodeSnippet.tsx | 97 + .../components/Color/Color.module.css | 13 +- apps/theme/components/Color/Color.tsx | 58 + .../ColorModal/ColorModal.module.css | 36 + .../components/ColorModal/ColorModal.tsx | 42 + .../ColorPicker/ColorPicker.module.css | 57 +- .../components/ColorPicker/ColorPicker.tsx | 130 + .../components/Container/Container.module.css | 6 + apps/theme/components/Container/Container.tsx | 12 + apps/theme/components/CopyBtn/CopyBtn.tsx | 31 + .../components/CopyBtn/Copybtn.module.css | 20 + .../components/Group/Group.module.css | 36 +- .../{src/app => }/components/Group/Group.tsx | 32 +- .../components/Header/Header.module.css | 7 +- .../app => }/components/Header/Header.tsx | 13 +- .../Previews/Components/Components.module.css | 185 + .../Previews/Components/Components.tsx | 500 + .../Dashboard/AreaChart/AreaChart.module.css | 0 .../Dashboard/AreaChart/AreaChart.tsx | 0 .../Dashboard/BarChart/BarChart.module.css | 0 .../Previews/Dashboard/BarChart/BarChart.tsx | 0 .../Dashboard/ColorCard/ColorCard.module.css | 0 .../Dashboard/ColorCard/ColorCard.tsx | 51 + .../Previews/Dashboard/Dashboard.module.css | 52 +- .../Previews/Dashboard/Dashboard.tsx | 245 + .../Dashboard/LineCart/LineChart.module.css | 0 .../Previews/Dashboard/LineCart/LineChart.tsx | 0 .../Previews/Landing/Landing.module.css | 2 +- .../components/Previews/Landing/Landing.tsx | 48 +- .../components/Previews/Previews.module.css | 81 + apps/theme/components/Previews/Previews.tsx | 134 + .../components/Scale/Scale.module.css | 0 apps/theme/components/Scale/Scale.tsx | 97 + .../theme/components/Scales/Scales.module.css | 21 + apps/theme/components/Scales/Scales.tsx | 71 + .../ThemeToolbar/ThemeToolbar.module.css | 16 + .../components/ThemeToolbar/ThemeToolbar.tsx | 113 + .../TokenModal/TokenModal.module.css | 62 + .../components/TokenModal/TokenModal.tsx | 285 + apps/theme/components/index.ts | 12 + apps/theme/next.config.mjs | 13 +- apps/theme/package.json | 12 +- apps/theme/public/img/emblem-dark.svg | 6 + apps/theme/public/img/emblem.svg | 6 + apps/theme/settings.ts | 15 + apps/theme/src/app/components/Color/Color.tsx | 63 - .../components/ColorPicker/ColorPicker.tsx | 63 - .../PreviewBox/PreviewBox.module.css | 113 - .../app/components/PreviewBox/PreviewBox.tsx | 141 - .../Previews/Components/Components.tsx | 381 - .../Dashboard/ColorCard/ColorCard.tsx | 42 - .../Previews/Dashboard/Dashboard.tsx | 182 - apps/theme/src/app/components/Scale/Scale.tsx | 124 - .../components/ScaleRow/ScaleRow.module.css | 80 - .../src/app/components/ScaleRow/ScaleRow.tsx | 107 - apps/theme/src/app/dev/page.tsx | 211 - apps/theme/src/app/globals.css | 36 - apps/theme/src/app/om-verktoyet/page.tsx | 48 - apps/theme/src/app/page.module.css | 223 - apps/theme/src/app/page.tsx | 307 - apps/theme/src/app/scale-list/page.module.css | 57 - apps/theme/src/app/scale-list/page.tsx | 106 - apps/theme/src/css/bootstrap-grid.css | 4102 ------ apps/theme/src/utils/ColorUtils.ts | 223 - apps/theme/src/utils/themeUtils.ts | 204 - apps/theme/src/utils/tokenMapping.ts | 89 - apps/theme/store.ts | 73 + apps/theme/tsconfig.json | 2 +- apps/theme/{src => }/types.ts | 0 apps/theme/utils/colorUtils.ts | 347 + apps/theme/utils/themeUtils.ts | 436 + apps/theme/utils/tokenMapping.ts | 96 + commitlint.rules.js => commitlint.rules.cjs | 0 design-tokens/$metadata.json | 32 +- design-tokens/$themes.json | 2644 ++-- design-tokens/Base/Core.json | 551 - design-tokens/Base/Fluid.json | 336 - design-tokens/Base/Semantic.json | 1029 -- design-tokens/Brand/Altinn.json | 405 - design-tokens/Brand/Brreg.json | 402 - design-tokens/Brand/Digdir.json | 402 - design-tokens/Brand/Tilsynet.json | 378 - design-tokens/Figma/components.json | 16 +- design-tokens/Viewport/@1200.json | 8 - design-tokens/Viewport/@1440.json | 8 - design-tokens/Viewport/@320.json | 8 - design-tokens/Viewport/@375.json | 8 - design-tokens/Viewport/@576.json | 8 - design-tokens/Viewport/@768.json | 8 - design-tokens/Viewport/@992.json | 8 - .../primitives/colors/dark/global.json | 376 + .../primitives/colors/dark/theme.json | 314 + .../primitives/colors/dark/theme2.json | 314 + .../primitives/colors/dark/theme3.json | 314 + .../primitives/colors/dark/theme4.json | 314 + .../primitives/colors/light/global.json | 376 + .../primitives/colors/light/theme.json | 314 + .../primitives/colors/light/theme2.json | 314 + .../primitives/colors/light/theme3.json | 314 + .../primitives/colors/light/theme4.json | 314 + design-tokens/primitives/globals.json | 197 + .../primitives/typography/default.json | 86 + design-tokens/semantic/color.json | 562 + design-tokens/semantic/style.json | 549 + design-tokens/themes/theme.json | 314 + design-tokens/themes/theme2.json | 314 + design-tokens/themes/theme3.json | 314 + design-tokens/themes/theme4.json | 314 + package.json | 24 +- packages/cli/bin/designsystemet.ts | 55 + packages/cli/declarations.d.ts | 7 - packages/cli/package.json | 52 +- packages/cli/src/build.ts | 224 - packages/cli/src/formatters.ts | 125 - packages/cli/src/migrations/beta-to-v1.ts | 341 + .../src/migrations/codemods/css/plugins.ts | 59 + .../cli/src/migrations/codemods/css/run.ts | 30 + .../codemods/jsx/classname-prefix.ts | 94 + .../cli/src/migrations/codemods/jsx/run.ts | 30 + packages/cli/src/migrations/index.ts | 7 + .../cli/src/migrations/react-beta-to-v1.ts | 3 + packages/cli/src/test/a.css | 39 + packages/cli/src/test/jsx-test.tsx | 34 + packages/cli/src/tokens/actions.ts | 19 + packages/cli/src/tokens/build.ts | 268 + .../cli/src/tokens/formats/groupedTokens.ts | 42 + .../formats/scopedReferenceVariables.ts | 68 + .../src/tokens/formats/typographyClasses.ts | 48 + packages/cli/src/{ => tokens}/noCase.ts | 0 packages/cli/src/tokens/transformers.ts | 57 + packages/cli/src/transformers.ts | 149 - packages/cli/tsconfig.json | 7 +- packages/css/accordion.css | 105 +- packages/css/alert.css | 70 +- packages/css/box.css | 38 +- packages/css/button.css | 226 +- packages/css/card.css | 184 +- packages/css/checkbox.css | 125 +- packages/css/chip.css | 132 +- packages/css/combobox.css | 153 +- packages/css/divider.css | 8 +- packages/css/dropdownmenu.css | 22 +- packages/css/error-message.css | 24 +- packages/css/error-summary.css | 14 +- packages/css/fieldset.css | 8 +- packages/css/heading.css | 36 +- packages/css/helptext.css | 23 +- packages/css/index.css | 10 +- packages/css/ingress.css | 24 +- packages/css/label.css | 16 +- packages/css/link.css | 56 +- packages/css/list.css | 10 +- packages/css/modal.css | 42 +- packages/css/native-select.css | 79 +- packages/css/package.json | 2 +- packages/css/pagination.css | 38 +- packages/css/paragraph.css | 46 +- packages/css/popover.css | 57 +- packages/css/radio.css | 100 +- packages/css/search.css | 75 +- packages/css/skeleton.css | 10 +- packages/css/skiplink.css | 38 +- packages/css/spinner.css | 20 +- packages/css/switch.css | 116 +- packages/css/table.css | 58 +- packages/css/tabs.css | 54 +- packages/css/tag.css | 66 +- packages/css/textarea.css | 38 +- packages/css/textfield.css | 70 +- packages/css/togglegroup.css | 13 +- packages/css/tooltip.css | 25 +- packages/css/utils.css | 10 +- packages/react-old/package.json | 3 +- packages/react/package.json | 2 +- .../Accordion/Accordion.stories.tsx | 2 +- .../src/components/Accordion/Accordion.tsx | 32 +- packages/react/src/components/Alert/Alert.tsx | 18 +- .../react/src/components/Box/Box.stories.tsx | 4 +- packages/react/src/components/Box/Box.tsx | 31 +- .../react/src/components/Button/Button.mdx | 13 +- .../src/components/Button/Button.stories.tsx | 55 +- .../react/src/components/Button/Button.tsx | 21 +- .../src/components/Card/Card.stories.tsx | 14 +- packages/react/src/components/Card/Card.tsx | 10 +- .../react/src/components/Chip/Group/Group.tsx | 11 +- .../components/Chip/Removable/Removable.tsx | 5 +- .../src/components/Chip/Toggle/Toggle.tsx | 4 +- .../components/DropdownMenu/DropdownMenu.tsx | 11 +- .../ErrorSummary/ErrorSummary.stories.tsx | 2 +- .../ErrorSummary/ErrorSummaryHeading.tsx | 1 + .../src/components/HelpText/HelpText.tsx | 5 +- packages/react/src/components/Link/Link.mdx | 10 +- .../src/components/Link/Link.stories.tsx | 34 +- .../react/src/components/Link/Link.test.tsx | 6 - packages/react/src/components/Link/Link.tsx | 11 +- .../react/src/components/List/ListRoot.tsx | 10 +- .../src/components/Modal/ModalHeader.tsx | 2 +- .../components/Pagination/Pagination.test.tsx | 3 +- .../src/components/Pagination/Pagination.tsx | 10 +- .../Pagination/PaginationButton.tsx | 1 - .../components/Pagination/PaginationRoot.tsx | 8 +- .../components/Popover/Popover.stories.tsx | 4 +- .../react/src/components/Popover/Popover.tsx | 10 +- .../components/SkipLink/SkipLink.stories.tsx | 6 +- .../src/components/SkipLink/SkipLink.tsx | 2 +- .../components/Spinner/Spinner.stories.tsx | 29 +- .../react/src/components/Spinner/Spinner.tsx | 39 +- packages/react/src/components/Table/Table.tsx | 9 +- .../react/src/components/Tabs/Tab/Tab.tsx | 2 +- packages/react/src/components/Tabs/Tabs.tsx | 22 +- .../react/src/components/Tag/Tag.stories.tsx | 6 +- packages/react/src/components/Tag/Tag.tsx | 14 +- .../ToggleGroup/ToggleGroup.stories.tsx | 6 +- .../components/ToggleGroup/ToggleGroup.tsx | 15 +- .../ToggleGroupItem/ToggleGroupItem.tsx | 1 - .../react/src/components/Tooltip/Tooltip.mdx | 4 - .../components/Tooltip/Tooltip.stories.tsx | 27 - .../react/src/components/Tooltip/Tooltip.tsx | 22 +- .../Typography/ErrorMessage/ErrorMessage.tsx | 13 +- .../components/Typography/Heading/Heading.tsx | 20 +- .../components/Typography/Ingress/Ingress.tsx | 10 +- .../src/components/Typography/Label/Label.tsx | 12 +- .../Typography/Paragraph/Paragraph.tsx | 10 +- .../form/Combobox/Combobox.stories.tsx | 95 +- .../src/components/form/Combobox/Combobox.tsx | 6 +- .../form/Combobox/internal/ComboboxInput.tsx | 2 +- .../form/Combobox/useFloatingCombobox.tsx | 2 +- .../form/NativeSelect/NativeSelect.tsx | 39 +- .../form/NativeSelect/useNativeSelect.ts | 6 +- .../components/form/Search/Search.stories.tsx | 4 +- .../src/components/form/Search/Search.tsx | 5 +- .../src/components/form/Search/useSearch.ts | 11 +- .../form/Textarea/Textarea.stories.tsx | 4 +- .../components/form/Textarea/useTextarea.ts | 11 +- .../form/Textfield/Textfield.stories.tsx | 6 +- .../components/form/Textfield/Textfield.tsx | 35 +- .../components/form/Textfield/useTextfield.ts | 12 +- .../react/src/components/form/useFormField.ts | 20 +- packages/react/src/utilities/getSize.ts | 28 - packages/react/stories/showcase.mdx | 7 + .../react/stories/showcase.module.css | 154 +- packages/react/stories/showcase.stories.tsx | 360 + packages/react/stories/testing.stories.tsx | 4 +- packages/theme/brand/altinn.css | 3 + packages/theme/brand/altinn/dark.css | 398 + packages/theme/brand/altinn/light.css | 398 + packages/theme/brand/altinn/tokens.css | 316 - packages/theme/brand/altinn/typography.css | 192 + packages/theme/brand/brreg/tokens.css | 322 - packages/theme/brand/digdir.css | 3 + packages/theme/brand/digdir/dark.css | 398 + packages/theme/brand/digdir/light.css | 397 + packages/theme/brand/digdir/typography.css | 192 + packages/theme/brand/portal.css | 3 + packages/theme/brand/portal/dark.css | 398 + packages/theme/brand/portal/light.css | 398 + packages/theme/brand/portal/typography.css | 192 + packages/theme/brand/tilsynet/tokens.css | 316 - packages/theme/brand/uutilsynet.css | 3 + packages/theme/brand/uutilsynet/dark.css | 398 + packages/theme/brand/uutilsynet/light.css | 398 + .../theme/brand/uutilsynet/typography.css | 192 + packages/theme/package.json | 9 +- prettier.config.mjs | 5 +- tsconfig.json | 3 +- yarn.lock | 2066 ++- 376 files changed, 126663 insertions(+), 36517 deletions(-) rename packages/theme/brand/digdir/tokens.css => apps/legacy-tokens.css (95%) delete mode 100644 apps/storefront/components/Banner/Banner.module.css delete mode 100644 apps/storefront/components/Banner/Banner.tsx delete mode 100644 apps/storefront/components/Banner/index.ts delete mode 100644 apps/storefront/components/Tag/Tag.module.css delete mode 100644 apps/storefront/components/Tag/Tag.tsx delete mode 100644 apps/storefront/components/Tag/index.ts delete mode 100644 apps/storefront/tokens/altinn.ts create mode 100644 apps/storefront/tokens/altinn/dark.ts create mode 100644 apps/storefront/tokens/altinn/light.ts delete mode 100644 apps/storefront/tokens/brreg.ts create mode 100644 apps/storefront/tokens/brreg/dark.ts create mode 100644 apps/storefront/tokens/brreg/light.ts delete mode 100644 apps/storefront/tokens/digdir.ts create mode 100644 apps/storefront/tokens/digdir/dark.ts create mode 100644 apps/storefront/tokens/digdir/light.ts create mode 100644 apps/storefront/tokens/portal/dark.ts create mode 100644 apps/storefront/tokens/portal/light.ts delete mode 100644 apps/storefront/tokens/tilsynet.ts create mode 100644 apps/storefront/tokens/uutilsynet/dark.ts create mode 100644 apps/storefront/tokens/uutilsynet/light.ts create mode 100644 apps/storybook/assets/img/avatars/female1.png create mode 100644 apps/storybook/assets/img/avatars/male1.png create mode 100644 apps/storybook/assets/img/avatars/male2.png rename apps/theme/{src => }/app/favicon.ico (100%) create mode 100644 apps/theme/app/globals.css rename apps/theme/{src => }/app/layout.tsx (64%) create mode 100644 apps/theme/app/loading.tsx rename apps/theme/{src => }/app/om-verktoyet/page.module.css (100%) create mode 100644 apps/theme/app/om-verktoyet/page.tsx create mode 100644 apps/theme/app/page.module.css create mode 100644 apps/theme/app/page.tsx create mode 100644 apps/theme/app/testside/BackgroundSurface/BackgroundSurface.module.css create mode 100644 apps/theme/app/testside/BackgroundSurface/BackgroundSurface.tsx create mode 100644 apps/theme/app/testside/Backgrounds/Backgrounds.module.css create mode 100644 apps/theme/app/testside/Backgrounds/Backgrounds.tsx create mode 100644 apps/theme/app/testside/BaseContrast/BaseContrast.module.css create mode 100644 apps/theme/app/testside/BaseContrast/BaseContrast.tsx create mode 100644 apps/theme/app/testside/ContrastBox/ContrastBox.module.css create mode 100644 apps/theme/app/testside/ContrastBox/ContrastBox.tsx create mode 100644 apps/theme/app/testside/Interaction/Interaction.module.css create mode 100644 apps/theme/app/testside/Interaction/Interaction.tsx rename apps/theme/{src/app/dev => app/testside}/page.module.css (65%) create mode 100644 apps/theme/app/testside/page.tsx create mode 100644 apps/theme/components/CodeSnippet/CodeSnippet.module.css create mode 100644 apps/theme/components/CodeSnippet/CodeSnippet.tsx rename apps/theme/{src/app => }/components/Color/Color.module.css (81%) create mode 100644 apps/theme/components/Color/Color.tsx create mode 100644 apps/theme/components/ColorModal/ColorModal.module.css create mode 100644 apps/theme/components/ColorModal/ColorModal.tsx rename apps/theme/{src/app => }/components/ColorPicker/ColorPicker.module.css (52%) create mode 100644 apps/theme/components/ColorPicker/ColorPicker.tsx create mode 100644 apps/theme/components/Container/Container.module.css create mode 100644 apps/theme/components/Container/Container.tsx create mode 100644 apps/theme/components/CopyBtn/CopyBtn.tsx create mode 100644 apps/theme/components/CopyBtn/Copybtn.module.css rename apps/theme/{src/app => }/components/Group/Group.module.css (51%) rename apps/theme/{src/app => }/components/Group/Group.tsx (55%) rename apps/theme/{src/app => }/components/Header/Header.module.css (82%) rename apps/theme/{src/app => }/components/Header/Header.tsx (81%) create mode 100644 apps/theme/components/Previews/Components/Components.module.css create mode 100644 apps/theme/components/Previews/Components/Components.tsx rename apps/theme/{src/app => }/components/Previews/Dashboard/AreaChart/AreaChart.module.css (100%) rename apps/theme/{src/app => }/components/Previews/Dashboard/AreaChart/AreaChart.tsx (100%) rename apps/theme/{src/app => }/components/Previews/Dashboard/BarChart/BarChart.module.css (100%) rename apps/theme/{src/app => }/components/Previews/Dashboard/BarChart/BarChart.tsx (100%) rename apps/theme/{src/app => }/components/Previews/Dashboard/ColorCard/ColorCard.module.css (100%) create mode 100644 apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.tsx rename apps/theme/{src/app => }/components/Previews/Dashboard/Dashboard.module.css (65%) create mode 100644 apps/theme/components/Previews/Dashboard/Dashboard.tsx rename apps/theme/{src/app => }/components/Previews/Dashboard/LineCart/LineChart.module.css (100%) rename apps/theme/{src/app => }/components/Previews/Dashboard/LineCart/LineChart.tsx (100%) rename apps/theme/{src/app => }/components/Previews/Landing/Landing.module.css (99%) rename apps/theme/{src/app => }/components/Previews/Landing/Landing.tsx (64%) create mode 100644 apps/theme/components/Previews/Previews.module.css create mode 100644 apps/theme/components/Previews/Previews.tsx rename apps/theme/{src/app => }/components/Scale/Scale.module.css (100%) create mode 100644 apps/theme/components/Scale/Scale.tsx create mode 100644 apps/theme/components/Scales/Scales.module.css create mode 100644 apps/theme/components/Scales/Scales.tsx create mode 100644 apps/theme/components/ThemeToolbar/ThemeToolbar.module.css create mode 100644 apps/theme/components/ThemeToolbar/ThemeToolbar.tsx create mode 100644 apps/theme/components/TokenModal/TokenModal.module.css create mode 100644 apps/theme/components/TokenModal/TokenModal.tsx create mode 100644 apps/theme/components/index.ts create mode 100644 apps/theme/public/img/emblem-dark.svg create mode 100644 apps/theme/public/img/emblem.svg create mode 100644 apps/theme/settings.ts delete mode 100644 apps/theme/src/app/components/Color/Color.tsx delete mode 100644 apps/theme/src/app/components/ColorPicker/ColorPicker.tsx delete mode 100644 apps/theme/src/app/components/PreviewBox/PreviewBox.module.css delete mode 100644 apps/theme/src/app/components/PreviewBox/PreviewBox.tsx delete mode 100644 apps/theme/src/app/components/Previews/Components/Components.tsx delete mode 100644 apps/theme/src/app/components/Previews/Dashboard/ColorCard/ColorCard.tsx delete mode 100644 apps/theme/src/app/components/Previews/Dashboard/Dashboard.tsx delete mode 100644 apps/theme/src/app/components/Scale/Scale.tsx delete mode 100644 apps/theme/src/app/components/ScaleRow/ScaleRow.module.css delete mode 100644 apps/theme/src/app/components/ScaleRow/ScaleRow.tsx delete mode 100644 apps/theme/src/app/dev/page.tsx delete mode 100644 apps/theme/src/app/globals.css delete mode 100644 apps/theme/src/app/om-verktoyet/page.tsx delete mode 100644 apps/theme/src/app/page.module.css delete mode 100644 apps/theme/src/app/page.tsx delete mode 100644 apps/theme/src/app/scale-list/page.module.css delete mode 100644 apps/theme/src/app/scale-list/page.tsx delete mode 100644 apps/theme/src/css/bootstrap-grid.css delete mode 100644 apps/theme/src/utils/ColorUtils.ts delete mode 100644 apps/theme/src/utils/themeUtils.ts delete mode 100644 apps/theme/src/utils/tokenMapping.ts create mode 100644 apps/theme/store.ts rename apps/theme/{src => }/types.ts (100%) create mode 100644 apps/theme/utils/colorUtils.ts create mode 100644 apps/theme/utils/themeUtils.ts create mode 100644 apps/theme/utils/tokenMapping.ts rename commitlint.rules.js => commitlint.rules.cjs (100%) delete mode 100644 design-tokens/Base/Core.json delete mode 100644 design-tokens/Base/Fluid.json delete mode 100644 design-tokens/Base/Semantic.json delete mode 100644 design-tokens/Brand/Altinn.json delete mode 100644 design-tokens/Brand/Brreg.json delete mode 100644 design-tokens/Brand/Digdir.json delete mode 100644 design-tokens/Brand/Tilsynet.json delete mode 100644 design-tokens/Viewport/@1200.json delete mode 100644 design-tokens/Viewport/@1440.json delete mode 100644 design-tokens/Viewport/@320.json delete mode 100644 design-tokens/Viewport/@375.json delete mode 100644 design-tokens/Viewport/@576.json delete mode 100644 design-tokens/Viewport/@768.json delete mode 100644 design-tokens/Viewport/@992.json create mode 100644 design-tokens/primitives/colors/dark/global.json create mode 100644 design-tokens/primitives/colors/dark/theme.json create mode 100644 design-tokens/primitives/colors/dark/theme2.json create mode 100644 design-tokens/primitives/colors/dark/theme3.json create mode 100644 design-tokens/primitives/colors/dark/theme4.json create mode 100644 design-tokens/primitives/colors/light/global.json create mode 100644 design-tokens/primitives/colors/light/theme.json create mode 100644 design-tokens/primitives/colors/light/theme2.json create mode 100644 design-tokens/primitives/colors/light/theme3.json create mode 100644 design-tokens/primitives/colors/light/theme4.json create mode 100644 design-tokens/primitives/globals.json create mode 100644 design-tokens/primitives/typography/default.json create mode 100644 design-tokens/semantic/color.json create mode 100644 design-tokens/semantic/style.json create mode 100644 design-tokens/themes/theme.json create mode 100644 design-tokens/themes/theme2.json create mode 100644 design-tokens/themes/theme3.json create mode 100644 design-tokens/themes/theme4.json create mode 100644 packages/cli/bin/designsystemet.ts delete mode 100644 packages/cli/declarations.d.ts delete mode 100644 packages/cli/src/build.ts delete mode 100644 packages/cli/src/formatters.ts create mode 100644 packages/cli/src/migrations/beta-to-v1.ts create mode 100644 packages/cli/src/migrations/codemods/css/plugins.ts create mode 100644 packages/cli/src/migrations/codemods/css/run.ts create mode 100644 packages/cli/src/migrations/codemods/jsx/classname-prefix.ts create mode 100644 packages/cli/src/migrations/codemods/jsx/run.ts create mode 100644 packages/cli/src/migrations/index.ts create mode 100644 packages/cli/src/migrations/react-beta-to-v1.ts create mode 100644 packages/cli/src/test/a.css create mode 100644 packages/cli/src/test/jsx-test.tsx create mode 100644 packages/cli/src/tokens/actions.ts create mode 100644 packages/cli/src/tokens/build.ts create mode 100644 packages/cli/src/tokens/formats/groupedTokens.ts create mode 100644 packages/cli/src/tokens/formats/scopedReferenceVariables.ts create mode 100644 packages/cli/src/tokens/formats/typographyClasses.ts rename packages/cli/src/{ => tokens}/noCase.ts (100%) create mode 100644 packages/cli/src/tokens/transformers.ts delete mode 100644 packages/cli/src/transformers.ts delete mode 100644 packages/react/src/utilities/getSize.ts create mode 100644 packages/react/stories/showcase.mdx rename apps/theme/src/app/components/Previews/Components/Components.module.css => packages/react/stories/showcase.module.css (57%) create mode 100644 packages/react/stories/showcase.stories.tsx create mode 100644 packages/theme/brand/altinn.css create mode 100644 packages/theme/brand/altinn/dark.css create mode 100644 packages/theme/brand/altinn/light.css delete mode 100644 packages/theme/brand/altinn/tokens.css create mode 100644 packages/theme/brand/altinn/typography.css delete mode 100644 packages/theme/brand/brreg/tokens.css create mode 100644 packages/theme/brand/digdir.css create mode 100644 packages/theme/brand/digdir/dark.css create mode 100644 packages/theme/brand/digdir/light.css create mode 100644 packages/theme/brand/digdir/typography.css create mode 100644 packages/theme/brand/portal.css create mode 100644 packages/theme/brand/portal/dark.css create mode 100644 packages/theme/brand/portal/light.css create mode 100644 packages/theme/brand/portal/typography.css delete mode 100644 packages/theme/brand/tilsynet/tokens.css create mode 100644 packages/theme/brand/uutilsynet.css create mode 100644 packages/theme/brand/uutilsynet/dark.css create mode 100644 packages/theme/brand/uutilsynet/light.css create mode 100644 packages/theme/brand/uutilsynet/typography.css diff --git a/.eslintignore b/.eslintignore index fb79cfb2e0..6f0b5f0747 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,5 +5,3 @@ packages/theme/brand/**/* packages/react-old/**/* tsc-build/ .storybook - -apps/theme/** diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 053b6d88d9..2fe964fc1f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -59,6 +59,7 @@ module.exports = { 'import/namespace': ['error', { allowComputed: true }], 'import/no-named-as-default': 'off', '@next/next/no-html-link-for-pages': ['error', 'apps/storefront/pages/'], + '@next/next/no-img-element': 'off', 'jsx-a11y/no-autofocus': 'off', 'import/order': [ 'warn', diff --git a/.github/workflows/build-tokens.yml b/.github/workflows/build-tokens.yml index 4f933dde9b..9d651b5524 100644 --- a/.github/workflows/build-tokens.yml +++ b/.github/workflows/build-tokens.yml @@ -1,11 +1,11 @@ name: Build tokens on: workflow_dispatch: - pull_request: - branches: - - main - paths: - - 'design-tokens/**' + # pull_request: + # branches: + # - main + # paths: + # - 'design-tokens/**' jobs: checks: name: Builds, lints and tests code diff --git a/.github/workflows/theme-deploy.yml b/.github/workflows/theme-deploy.yml index 00d6e45bcd..19c407cd2a 100644 --- a/.github/workflows/theme-deploy.yml +++ b/.github/workflows/theme-deploy.yml @@ -3,9 +3,9 @@ env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_THEME }} on: - push: - branches: - - main + workflow_dispatch: + pull_request: + types: [opened, synchronize] paths: - 'apps/theme/**' jobs: diff --git a/.stylelintignore b/.stylelintignore index b6e9c08f6d..1e8140f469 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,4 +1,4 @@ **/dist/**/*.css -packages/theme/brand/**/*.css +packages/theme/**/*.css packages/css/dist/**/*.css -apps/theme/** +apps/legacy-tokens.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 89e1fb3e85..333c262038 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,7 +6,7 @@ "prettier.prettierPath": "./node_modules/prettier", "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, - "cssvar.files": ["packages/theme/brand/digdir/tokens.css"], + "cssvar.files": ["packages/theme/brand/digdir/light.css"], "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, diff --git a/packages/theme/brand/digdir/tokens.css b/apps/legacy-tokens.css similarity index 95% rename from packages/theme/brand/digdir/tokens.css rename to apps/legacy-tokens.css index 93983022df..7d3b13f131 100644 --- a/packages/theme/brand/digdir/tokens.css +++ b/apps/legacy-tokens.css @@ -1,11 +1,4 @@ -/** - * Do not edit directly - * These files are generated from design tokens defined in Figma using Token Studio - */ - :root { - /** Referenced source tokens */ - /** DO NOT OVERRIDE */ --fds-colors-blue-100: #e6eff8; --fds-colors-blue-200: #b3d0ea; --fds-colors-blue-700: #0062ba; @@ -39,8 +32,6 @@ --fds-colors-grey-400: #bcbfc5; --fds-colors-red-800: #5a121d; --fds-colors-purple-700: #7a1265; - - /** Tokens */ --fds-brand-alt1-100: #feefef; --fds-brand-alt1-200: #fddfe0; --fds-brand-alt1-300: #fbbfc1; @@ -49,7 +40,7 @@ --fds-brand-alt1-600: #f45f63; --fds-brand-alt1-700: #dc5659; --fds-brand-alt1-800: #c34c4f; - --fds-brand-alt1-900: #B83D41; + --fds-brand-alt1-900: #b83d41; --fds-brand-alt2-100: #fcf7e9; --fds-brand-alt2-200: #faeec2; --fds-brand-alt2-300: #f5dda6; @@ -58,7 +49,7 @@ --fds-brand-alt2-600: #e5aa20; --fds-brand-alt2-700: #ce991d; --fds-brand-alt2-800: #b7881a; - --fds-brand-alt2-900: #A17717; + --fds-brand-alt2-900: #a17717; --fds-brand-alt3-100: #e9f5ff; --fds-brand-alt3-200: #d2eafd; --fds-brand-alt3-300: #a5d6fb; @@ -67,7 +58,7 @@ --fds-brand-alt3-600: #1e98f5; --fds-brand-alt3-700: #1b88dd; --fds-brand-alt3-800: #156aac; - --fds-brand-alt3-900: #125A91; + --fds-brand-alt3-900: #125a91; --fds-semantic-surface-first-light: var(--fds-brand-alt1-200); --fds-semantic-surface-first-light-hover: var(--fds-brand-alt1-300); --fds-semantic-surface-first-light-active: var(--fds-brand-alt1-400); @@ -308,9 +299,9 @@ --fds-border_width-default: 1px; --fds-border_width-active: 2px; --fds-border_width-tab_focus: 2px; - --fds-shadow-xsmall: 0 0 1px 0 rgba(0,0,0,0.16), 0 1px 2px 0 rgba(0,0,0,0.12); - --fds-shadow-small: 0 0 1px 0 rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.1); - --fds-shadow-medium: 0 0 1px 0 rgba(0,0,0,0.14), 0 2px 4px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.12); - --fds-shadow-large: 0 0 1px 0 rgba(0,0,0,0.13), 0 3px 5px 0 rgba(0,0,0,0.13), 0 6px 12px 0 rgba(0,0,0,0.14); - --fds-shadow-xlarge: 0 0 1px 0 rgba(0,0,0,0.12), 0 4px 8px 0 rgba(0,0,0,0.16), 0 12px 24px 0 rgba(0,0,0,0.16); + --fds-shadow-xsmall: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12); + --fds-shadow-small: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1); + --fds-shadow-medium: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12); + --fds-shadow-large: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14); + --fds-shadow-xlarge: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16); } diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css deleted file mode 100644 index c96da2206b..0000000000 --- a/apps/storefront/components/Banner/Banner.module.css +++ /dev/null @@ -1,158 +0,0 @@ -.banner { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - gap: var(--fds-spacing-6); - min-height: 460px; - padding-top: var(--fds-spacing-5); - padding-bottom: var(--fds-spacing-12); -} - -.left { - flex-basis: calc(53% - (var(--fds-spacing-6) / 2)); - flex-grow: 1; -} - -.right { - display: flex; - align-items: center; - justify-content: center; - flex-basis: calc(47% - (var(--fds-spacing-6) / 2)); - flex-grow: 1; - height: 275px; -} - -.title { - display: flex; - align-items: center; - margin-bottom: var(--fds-spacing-3); - font: var(--fds-typography-heading-large); -} - -.title > span { - margin-left: var(--fds-spacing-4); -} - -.desc { - padding-right: var(--fds-spacing-7); - margin-bottom: 0; - font: var(--fds-typography-ingress-small); -} - -.shapes { - height: 200px; - width: 200px; - position: relative; - animation: test 1.55s forwards ease-out; -} - -.shape { - height: 92px; - width: 92px; - border-radius: 8px; - border: 5px solid transparent; - position: absolute; -} - -.one { - top: 0; - left: 0; - border-color: var(--fds-brand-alt1-600); - animation: one 1.5s forwards ease-out; -} - -.two { - top: 0; - right: 0; - border-color: var(--fds-brand-alt3-600); - animation: two 1.5s forwards ease-out; -} - -.three { - right: 0; - bottom: 0; - border-color: var(--fds-semantic-border-neutral-default); - animation: three 1.5s forwards ease-out; -} - -.four { - left: 0; - bottom: 0; - border-color: var(--fds-brand-alt2-600); - animation: four 1.5s forwards ease-out; -} - -@keyframes one { - 0% { - top: -100px; - opacity: 0; - } - - 100% { - top: 0; - opacity: 1; - } -} - -@keyframes two { - 0% { - right: -100px; - opacity: 0; - } - - 100% { - right: 0; - opacity: 1; - } -} - -@keyframes three { - 0% { - bottom: -100px; - opacity: 0; - } - - 100% { - bottom: 0; - opacity: 1; - } -} - -@keyframes four { - 0% { - left: -100px; - opacity: 0; - } - - 100% { - left: 0; - opacity: 1; - } -} - -@keyframes test { - 0% { - transform: rotate(0deg) scale(1); - } - - 88% { - transform: rotate(45deg) scale(0.95); - } - - 94% { - transform: rotate(45deg) scale(1.05); - } - - 100% { - transform: rotate(45deg) scale(1); - } -} - -@media (max-width: 991.98px) { - .imgContainer { - height: 300px; - width: 300px; - margin: 0 auto; - } -} diff --git a/apps/storefront/components/Banner/Banner.tsx b/apps/storefront/components/Banner/Banner.tsx deleted file mode 100644 index 4b3a88dd92..0000000000 --- a/apps/storefront/components/Banner/Banner.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import cl from 'clsx'; - -import { Tag } from '../Tag/Tag'; -import { Container } from '../Container/Container'; - -import classes from './Banner.module.css'; - -interface BannerProps { - title: string; - desc: string; -} - -const Banner = ({ title, desc }: BannerProps) => { - return ( - -
-

- {title}{' '} - -

-

{desc}

-
- -
-
-
-
-
-
-
-
- - ); -}; - -export { Banner }; diff --git a/apps/storefront/components/Banner/index.ts b/apps/storefront/components/Banner/index.ts deleted file mode 100644 index f4930c0719..0000000000 --- a/apps/storefront/components/Banner/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Banner } from './Banner'; diff --git a/apps/storefront/components/Blog/Card/BlogCard.module.css b/apps/storefront/components/Blog/Card/BlogCard.module.css index dcabdf567e..8f3648bd01 100644 --- a/apps/storefront/components/Blog/Card/BlogCard.module.css +++ b/apps/storefront/components/Blog/Card/BlogCard.module.css @@ -18,7 +18,7 @@ flex-wrap: wrap; flex-direction: column; justify-content: center; - padding: var(--fds-spacing-8) var(--fds-spacing-10); + padding: var(--ds-spacing-8) var(--ds-spacing-10); } .card[data-featured='true'] .heading { @@ -38,8 +38,8 @@ .meta { display: flex; - gap: var(--fds-spacing-3); - color: var(--fds-semantic-text-neutral-subtle); + gap: var(--ds-spacing-3); + color: var(--ds-color-neutral-text-subtle); font-size: 14px !important; } @@ -48,6 +48,6 @@ height: 7px; transform: rotate(45deg); border-radius: 1px; - background-color: var(--fds-brand-alt1-600); + background-color: var(--ds-color-brand1-6); margin: auto; } diff --git a/apps/storefront/components/Blog/Card/BlogCard.tsx b/apps/storefront/components/Blog/Card/BlogCard.tsx index cc647f19a8..e453529a8e 100644 --- a/apps/storefront/components/Blog/Card/BlogCard.tsx +++ b/apps/storefront/components/Blog/Card/BlogCard.tsx @@ -14,7 +14,7 @@ type BlogCardProps = { href: string; featured?: boolean; tagText?: string; - tagColor?: 'first' | 'second' | 'third'; + tagColor?: 'brand1' | 'brand2' | 'brand3'; level?: 2 | 3; } & Omit, 'color'>; @@ -54,26 +54,26 @@ export const BlogCard = ({ {tagText} )} {title} - {desc} + {desc} {author || (date && ( {date} diff --git a/apps/storefront/components/Blog/Contributors/Contributors.module.css b/apps/storefront/components/Blog/Contributors/Contributors.module.css index 87c5a535e0..63765509b7 100644 --- a/apps/storefront/components/Blog/Contributors/Contributors.module.css +++ b/apps/storefront/components/Blog/Contributors/Contributors.module.css @@ -6,12 +6,12 @@ justify-content: center; align-items: center; max-width: 640px; - gap: var(--fds-spacing-4); + gap: var(--ds-spacing-4); margin: 0 auto; - margin-top: var(--fds-spacing-18); - padding: var(--fds-spacing-10); - border-radius: var(--fds-border_radius-xxlarge); - border: 1px solid var(--fds-semantic-border-neutral-subtle); + margin-top: var(--ds-spacing-18); + padding: var(--ds-spacing-10); + border-radius: var(--ds-border-radius-2xl); + border: 1px solid var(--ds-color-neutral-border-subtle); } .container p, @@ -46,8 +46,8 @@ flex-wrap: wrap; text-wrap: nowrap; justify-content: center; - gap: var(--fds-spacing-3); - color: var(--fds-semantic-text-neutral-subtle); + gap: var(--ds-spacing-3); + color: var(--ds-color-neutral-text-subtle); } .metaSquare { @@ -55,7 +55,7 @@ height: 7px; transform: rotate(45deg); border-radius: 1px; - background-color: var(--fds-brand-alt1-600); + background-color: var(--ds-color-brand1-6); margin: auto 0; break-after: avoid; } diff --git a/apps/storefront/components/Blog/Contributors/Contributors.tsx b/apps/storefront/components/Blog/Contributors/Contributors.tsx index e38b14ffa2..dedbc1ec6e 100644 --- a/apps/storefront/components/Blog/Contributors/Contributors.tsx +++ b/apps/storefront/components/Blog/Contributors/Contributors.tsx @@ -19,12 +19,12 @@ export const Contributors = ({ authors }: ContributorsProps) => { Bidragsytere {authors && diff --git a/apps/storefront/components/ClipboardBtn/ClipboardBtn.tsx b/apps/storefront/components/ClipboardBtn/ClipboardBtn.tsx index 6cc6104737..e8a955655a 100644 --- a/apps/storefront/components/ClipboardBtn/ClipboardBtn.tsx +++ b/apps/storefront/components/ClipboardBtn/ClipboardBtn.tsx @@ -28,8 +28,8 @@ const ClipboardBtn = ({ title, value, text = '' }: ClipboardBtnProps) => { onClick={() => onBtnClick(value)} title={title} variant='tertiary' - color='second' - size='small' + color='neutral' + size='sm' > {text && {text}} diff --git a/apps/storefront/components/CodeSnippet/CodeSnippet.module.css b/apps/storefront/components/CodeSnippet/CodeSnippet.module.css index f2058e8732..b9d09ba116 100644 --- a/apps/storefront/components/CodeSnippet/CodeSnippet.module.css +++ b/apps/storefront/components/CodeSnippet/CodeSnippet.module.css @@ -13,14 +13,14 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--fds-semantic-text-neutral-default); + background-color: var(--ds-color-neutral-text-default); color: white; - border-radius: var(--fds-border_radius-medium); + border-radius: var(--ds-border-radius-md); border: none; transition: 0.15s all; cursor: pointer; } .icon:hover { - background-color: var(--fds-semantic-text-neutral-subtle); + background-color: var(--ds-color-neutral-text-subtle); } diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css index 7464b2cf5c..099e086044 100644 --- a/apps/storefront/components/ComponentCard/ComponentCard.module.css +++ b/apps/storefront/components/ComponentCard/ComponentCard.module.css @@ -2,30 +2,30 @@ display: block; text-align: center; background-color: white; - padding: var(--fds-spacing-10); - border-radius: var(--fds-border_radius-medium); - box-shadow: var(--fds-shadow-xsmall); + padding: var(--ds-spacing-10); + border-radius: var(--ds-border-radius-md); + box-shadow: var(--ds-shadow-xs); text-decoration: none; transition: 0.2s all; } .card:hover { - box-shadow: var(--fds-shadow-medium); + box-shadow: var(--ds-shadow-md); transform: translateY(-4px); } .title { - margin-top: var(--fds-spacing-3); + margin-top: var(--ds-spacing-3); text-decoration: underline; text-underline-offset: 7px; } .card:focus-visible { - --fds-focus-border-width: 3px; + --dsc-focus-border-width: 3px; - box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow); - outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline); - outline-offset: var(--fds-focus-border-width); + box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-neutral-background-default); + outline: var(--dsc-focus-border-width) solid var(--ds-color-neutral-text-default); + outline-offset: var(--dsc-focus-border-width); } .image { diff --git a/apps/storefront/components/ComponentCard/ComponentCard.tsx b/apps/storefront/components/ComponentCard/ComponentCard.tsx index d8722ef24f..5ef27613cf 100644 --- a/apps/storefront/components/ComponentCard/ComponentCard.tsx +++ b/apps/storefront/components/ComponentCard/ComponentCard.tsx @@ -20,7 +20,7 @@ const ComponentCard = ({ title, image, url }: ComponentCardProps) => { className={classes.image} /> diff --git a/apps/storefront/components/Footer/Footer.module.css b/apps/storefront/components/Footer/Footer.module.css index 93fc43c94a..0374a478e7 100644 --- a/apps/storefront/components/Footer/Footer.module.css +++ b/apps/storefront/components/Footer/Footer.module.css @@ -1,6 +1,5 @@ .footer { - background-color: var(--fds-semantic-surface-neutral-inverted); - color: var(--color-text-on_inverted-subtle); + background-color: var(--ds-color-neutral-background-subtle); font-weight: 300; letter-spacing: 0.3px; } @@ -8,26 +7,25 @@ .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); - gap: var(--fds-spacing-10); + gap: var(--ds-spacing-10); } .title { - font: var(--fds-typography-heading-xsmall); - margin-bottom: var(--fds-spacing-4); + margin-bottom: var(--ds-spacing-4); } .footer .logos img { height: 26px; width: auto; - margin-right: var(--fds-spacing-2); + margin-right: var(--ds-spacing-2); } .logos { display: flex; flex-direction: column; align-items: flex-start; - gap: var(--fds-spacing-8); - margin-top: var(--fds-spacing-8); + gap: var(--ds-spacing-8); + margin-top: var(--ds-spacing-8); } .links { @@ -37,7 +35,7 @@ .links li { list-style: none; - margin-bottom: var(--fds-spacing-5); + margin-bottom: var(--ds-spacing-5); } .links li:last-child { @@ -45,14 +43,13 @@ } .top { - padding: var(--fds-spacing-18) 0; + padding: var(--ds-spacing-18) 0; } .bottom { - background-color: var(--color-surface-neutral-inverted-darker); - padding: var(--fds-spacing-7) 0; - color: var(--color-text-on_inverted-subtle); - font: var(--fds-typography-paragraph-short-small); + background-color: var(--ds-color-neutral-background-default); + padding: var(--ds-spacing-7) 0; + font: var(--ds-typography-paragraph-short-sm); } .button { @@ -61,11 +58,11 @@ justify-content: center; text-decoration: none; height: 48px; - padding: 0 var(--fds-spacing-5); - margin-top: var(--fds-spacing-7); + padding: 0 var(--ds-spacing-5); + margin-top: var(--ds-spacing-7); border-radius: 2px; transition: 0.1s all; - font: var(--fds-typography-paragraph-short-small); + font: var(--ds-typography-paragraph-short-sm); color: var(--color-text-on_inverted-subtle); border: 1px dashed var(--color-text-on_inverted-subtle); } diff --git a/apps/storefront/components/Footer/Footer.tsx b/apps/storefront/components/Footer/Footer.tsx index 226145ac63..e070e9c393 100644 --- a/apps/storefront/components/Footer/Footer.tsx +++ b/apps/storefront/components/Footer/Footer.tsx @@ -2,6 +2,7 @@ import type { ReactNode } from 'react'; import Image from 'next/image'; import { EnvelopeClosedIcon } from '@navikt/aksel-icons'; import NextLink from 'next/link'; +import { Heading, Paragraph } from '@digdir/designsystemet-react'; import { Container } from '../Container/Container'; import { Link } from '../Link/Link'; @@ -97,13 +98,20 @@ const LinkList = (links: LinkListItemProps[]) => { const Footer = () => { return ( -