From b9971354cf586c3c8b04fa48ea693dc828987572 Mon Sep 17 00:00:00 2001 From: Inge Fossland Date: Thu, 9 Jan 2025 10:57:20 +0100 Subject: [PATCH] feat: colors and themes - New theming and colour system - Demo fixes and enhancements - Start documenting usage and patterns - Fix visual bugs across components - Remove unused components --- .storybook/StoryDecorator.tsx | 28 +- .storybook/ThemeProvider.tsx | 16 - .storybook/preview.tsx | 88 +- .storybook/theme.module.css | 3 - examples/inboxMenu.tsx | 3 +- examples/loginMenu.tsx | 2 +- .../AccessAreaList/AccessAreaList.tsx | 8 +- .../AccessPackageList/AccessPackageList.tsx | 2 +- .../Attachment/attachmentLink.module.css | 4 +- .../Autocomplete/Autocomplete.stories.tsx | 2 +- .../Autocomplete/AutocompleteItem.tsx | 10 +- .../Autocomplete/autocompleteBase.module.css | 2 +- .../Autocomplete/autocompleteGroup.module.css | 4 +- lib/components/Badge/Badge.stories.ts | 3 + lib/components/Badge/Badge.tsx | 18 +- lib/components/Badge/badge.module.css | 6 +- .../Bookmarks/BookmarksListItem.tsx | 7 +- lib/components/Bookmarks/BookmarksSection.tsx | 2 +- .../Bookmarks/queryLabel.module.css | 2 +- lib/components/Button/Button.tsx | 2 +- lib/components/Button/ButtonBase.tsx | 3 +- lib/components/Button/ComboButton.tsx | 2 +- lib/components/Button/IconButton.tsx | 2 +- lib/components/Button/buttonBase.module.css | 66 +- lib/components/Button/iconButton.module.css | 7 + lib/components/Byline/Byline.tsx | 14 +- lib/components/Byline/byline.module.css | 4 +- .../ContextMenu/ContextMenu.stories.ts | 2 +- lib/components/ContextMenu/ContextMenu.tsx | 6 +- .../ContextMenu/contextMenu.module.css | 19 - .../Datepicker/datepickerTable.module.css | 10 +- lib/components/Dialog/Dialog.tsx | 76 +- lib/components/Dialog/DialogActions.tsx | 11 +- lib/components/Dialog/DialogAttachments.tsx | 7 +- lib/components/Dialog/DialogContent.tsx | 4 +- lib/components/Dialog/DialogHistoryItem.tsx | 3 +- lib/components/Dialog/DialogList.tsx | 2 +- lib/components/Dialog/DialogListGroup.tsx | 6 +- lib/components/Dialog/DialogListItem.tsx | 11 +- lib/components/Dialog/DialogSection.tsx | 2 +- lib/components/Dialog/DialogTimelineItem.tsx | 6 +- lib/components/Dialog/DraftDialog.tsx | 19 +- lib/components/Dialog/dialog.module.css | 5 +- .../Dialog/dialogHistory.module.css | 2 +- .../Dialog/dialogListItem.module.css | 8 +- lib/components/Dialog/dialogSelect.module.css | 4 +- lib/components/Dropdown/Backdrop.tsx | 2 +- lib/components/Dropdown/DrawerBase.tsx | 8 +- lib/components/Dropdown/DropdownBase.tsx | 3 + lib/components/Dropdown/drawerBase.module.css | 1 - .../Dropdown/drawerHeader.module.css | 2 +- .../Dropdown/dropdownBase.module.css | 2 - lib/components/Footer/footerBase.module.css | 2 +- lib/components/Footer/footerMenu.module.css | 8 +- .../GlobalMenu/AccountMenu.stories.tsx | 2 +- lib/components/GlobalMenu/AccountMenu.tsx | 9 +- .../GlobalMenu/GlobalMenu.stories.tsx | 2 +- lib/components/GlobalMenu/GlobalMenuBase.tsx | 2 +- .../GlobalMenu/globalMenuBase.module.css | 1 - lib/components/Header/Header.tsx | 2 + lib/components/Header/HeaderBase.tsx | 2 +- lib/components/Header/HeaderButton.stories.ts | 2 +- lib/components/Header/HeaderButton.tsx | 10 +- lib/components/Header/HeaderLogo.stories.ts | 2 +- lib/components/Header/headerButton.module.css | 2 - lib/components/Header/mobileMenu.module.css | 28 - lib/components/Icon/Icon.tsx | 16 +- lib/components/Icon/checkboxIcon.module.css | 23 - lib/components/Icon/icon.module.css | 38 + lib/components/Icon/progressIcon.module.css | 4 +- lib/components/Icon/radioIcon.module.css | 8 +- lib/components/Layout/Layout.stories.tsx | 4 +- lib/components/Layout/Layout.tsx | 26 +- lib/components/Layout/LayoutBase.stories.ts | 2 +- lib/components/Layout/LayoutBase.tsx | 10 +- lib/components/Layout/LayoutBody.stories.ts | 2 +- .../Layout/LayoutContent.stories.ts | 2 +- lib/components/Layout/LayoutContent.tsx | 4 +- .../Layout/LayoutSidebar.stories.ts | 2 +- lib/components/Layout/LayoutSidebar.tsx | 8 +- lib/components/Layout/layoutBase.module.css | 20 +- .../LayoutAction/ActionFooter.stories.tsx | 45 - .../LayoutAction/ActionHeader.stories.ts | 20 - lib/components/LayoutAction/ActionHeader.tsx | 24 +- lib/components/LayoutAction/ActionMenu.tsx | 23 - .../LayoutAction/LayoutAction.stories.tsx | 63 + lib/components/LayoutAction/LayoutAction.tsx | 42 + .../LayoutAction/actionHeader.module.css | 25 +- .../LayoutAction/actionMenu.module.css | 30 - lib/components/LayoutAction/index.ts | 2 +- lib/components/List/List.tsx | 22 +- lib/components/List/ListBase.tsx | 22 +- lib/components/List/ListItem.stories.tsx | 35 +- lib/components/List/ListItemBase.tsx | 18 +- .../List/ListItemHeader.stories.tsx | 10 +- lib/components/List/ListItemMedia.tsx | 8 +- lib/components/List/listBase.module.css | 29 - lib/components/List/listItemBase.module.css | 39 +- lib/components/List/listItemHeader.module.css | 18 +- lib/components/List/listItemLabel.module.css | 13 +- lib/components/List/listItemMedia.module.css | 6 + lib/components/List/listItemSelect.module.css | 4 +- lib/components/Menu/Menu.stories.ts | 16 +- lib/components/Menu/Menu.tsx | 13 +- lib/components/Menu/MenuBase.tsx | 4 +- lib/components/Menu/MenuItem.stories.tsx | 45 +- lib/components/Menu/MenuItem.tsx | 16 +- lib/components/Menu/MenuItemBase.tsx | 13 +- lib/components/Menu/MenuItemMedia.tsx | 17 +- lib/components/Menu/MenuItems.stories.ts | 352 ---- lib/components/Menu/MenuItems.tsx | 7 +- lib/components/Menu/MenuSearch.tsx | 11 +- lib/components/Menu/menu.module.css | 4 +- lib/components/Menu/menuBase.module.css | 2 +- lib/components/Menu/menuHeader.module.css | 2 +- lib/components/Menu/menuInputField.module.css | 14 +- lib/components/Menu/menuItemBase.module.css | 35 +- lib/components/Menu/menuItemLabel.module.css | 6 +- lib/components/Menu/menuItemMedia.module.css | 42 +- lib/components/Menu/menuOption.module.css | 2 +- lib/components/Menu/menuSearch.module.css | 47 +- lib/components/Meta/metaItemBase.module.css | 18 +- .../Page/BreadcrumbsLink.module.css | 4 +- lib/components/Page/Examples.stories.tsx | 160 -- lib/components/Page/Flex.tsx | 32 +- lib/components/Page/Grid.tsx | 27 +- lib/components/Page/PageBase.tsx | 17 +- lib/components/Page/PageHeader.stories.tsx | 2 +- lib/components/Page/PageHeader.tsx | 6 +- .../PageMenu.stories.tsx} | 17 +- lib/components/Page/PageMenu.tsx | 27 + lib/components/Page/PageNav.stories.tsx | 2 +- lib/components/Page/PageNav.tsx | 17 +- lib/components/Page/Section.tsx | 25 +- lib/components/Page/breadcrumbs.module.css | 2 +- lib/components/Page/flex.module.css | 104 +- lib/components/Page/grid.module.css | 41 +- lib/components/Page/index.ts | 1 + lib/components/Page/pageMenu.module.css | 40 + lib/components/Page/section.module.css | 41 - .../ResourceList/ResourceList.stories.tsx | 1 - lib/components/Searchbar/SearchField.tsx | 1 - .../Searchbar/Searchbar.stories.tsx | 8 +- lib/components/Searchbar/SearchbarBase.tsx | 2 +- .../Searchbar/searchField.module.css | 2 +- lib/components/Snackbar/Snackbar.stories.tsx | 4 +- .../Snackbar/SnackbarItem.stories.tsx | 4 +- lib/components/TextField/fieldBase.module.css | 4 +- lib/components/TextField/inputBase.module.css | 4 +- lib/components/TextField/textField.module.css | 2 +- lib/components/Timeline/TimelineSection.tsx | 12 +- .../Timeline/timelineSection.module.css | 27 +- lib/components/Toolbar/ToolbarAdd.tsx | 2 +- lib/components/Toolbar/ToolbarButton.tsx | 4 +- lib/components/Toolbar/ToolbarMenu.tsx | 2 +- lib/components/Toolbar/ToolbarOptions.tsx | 2 +- lib/components/Toolbar/ToolbarSearch.tsx | 11 +- .../Toolbar/toolbarDaterange.module.css | 2 +- .../Toolbar/toolbarSearch.module.css | 4 +- .../Transmission/TransmissionItem.stories.ts | 2 +- .../Transmission/TransmissionItem.tsx | 8 +- .../Transmission/TransmissionList.stories.ts | 2 +- lib/components/Typography/Typography.tsx | 15 +- .../Typography/typography.module.css | 17 +- lib/components/index.ts | 2 + lib/css/altinn-ds-overrides.css | 38 + lib/css/altinn-ds.css | 1484 +++++++++++++++++ lib/css/altinn-theme.css | 46 + lib/css/colors.css | 113 -- lib/css/global.css | 15 +- lib/css/padding.css | 23 + lib/css/shadow.css | 19 + lib/css/shadows.css | 7 - lib/css/spacing.css | 31 + lib/css/theme-article.css | 15 - lib/css/theme-company.css | 15 - lib/css/theme-global-dark.css | 19 - lib/css/theme-global.css | 15 - lib/css/theme-neutral.css | 15 - lib/css/theme-person.css | 15 - lib/css/theme.css | 22 - lib/stories/Color/MenuItem.stories.tsx | 41 - lib/stories/Color/Swatches.stories.tsx | 19 - lib/stories/Color/Swatches.tsx | 42 - lib/stories/Color/colors.json | 62 - lib/stories/Color/swatches.module.css | 14 - lib/stories/Demo/ActivityLogPage.tsx | 58 - lib/stories/Demo/AdminLayout.tsx | 38 - lib/stories/Demo/AdminPage.tsx | 19 - lib/stories/Demo/App.stories.tsx | 112 -- lib/stories/Demo/AppLayout.tsx | 73 - lib/stories/Demo/AppPage.tsx | 29 - lib/stories/Demo/CategoryArticle.tsx | 68 - lib/stories/Demo/CategoryHome.tsx | 66 - lib/stories/Demo/CategoryLayout.tsx | 53 - lib/stories/Demo/CategorySection.tsx | 73 - lib/stories/Demo/ColorsPage.tsx | 37 - lib/stories/Demo/Demo.stories.tsx | 175 ++ lib/stories/Demo/InboxDialog.tsx | 30 - lib/stories/Demo/InboxLayout.tsx | 33 - lib/stories/Demo/InboxSection.tsx | 57 - lib/stories/Demo/InboxToolbar.tsx | 87 - lib/stories/Demo/ProfileLayout.tsx | 38 - lib/stories/Demo/ProfilePage.tsx | 19 - lib/stories/Demo/{ => app}/App.tsx | 7 +- lib/stories/Demo/app/AppLayout.tsx | 35 + lib/stories/Demo/app/AppPage.tsx | 23 + lib/stories/Demo/{ => app}/AppProvider.tsx | 41 +- lib/stories/Demo/app/index.ts | 4 + lib/stories/Demo/category/CategoryArticle.tsx | 39 + lib/stories/Demo/category/CategoryGrid.tsx | 11 + lib/stories/Demo/category/CategoryLayout.tsx | 62 + .../Demo/{ => category}/CategoryPage.tsx | 9 +- lib/stories/Demo/category/CategorySection.tsx | 73 + lib/stories/Demo/category/HomePage.tsx | 37 + lib/stories/Demo/category/index.ts | 6 + lib/stories/Demo/dashboard/AccountHeader.tsx | 33 + .../Demo/dashboard/AccountListItem.tsx | 54 + lib/stories/Demo/dashboard/AccountPage.tsx | 24 + .../Demo/dashboard/AccountsSection.tsx | 63 + .../Demo/dashboard/ActivityLogPage.tsx | 50 + .../Demo/dashboard/AddressSettings.tsx | 19 + .../Demo/dashboard/CompanyDashboard.tsx | 57 + lib/stories/Demo/dashboard/CompanyLayout.tsx | 45 + lib/stories/Demo/dashboard/CompanyPage.tsx | 24 + .../Demo/dashboard/CompanySettings.tsx | 13 + lib/stories/Demo/dashboard/CompanyUserId.tsx | 28 + lib/stories/Demo/dashboard/CompanyUsers.tsx | 41 + .../Demo/dashboard/DashboardHeader.tsx | 25 + .../Demo/dashboard/DashboardSection.tsx | 9 + .../Demo/dashboard/NotificationsItem.tsx | 43 + .../Demo/dashboard/NotificationsSection.tsx | 14 + lib/stories/Demo/dashboard/SettingsPage.tsx | 52 + .../Demo/dashboard/SettingsSection.tsx | 9 + lib/stories/Demo/dashboard/UserAccountId.tsx | 28 + lib/stories/Demo/dashboard/UserAccounts.tsx | 36 + lib/stories/Demo/dashboard/UserDashboard.tsx | 36 + lib/stories/Demo/dashboard/UserFavourites.tsx | 12 + lib/stories/Demo/dashboard/UserLayout.tsx | 45 + .../Demo/dashboard/UserNotifications.tsx | 34 + lib/stories/Demo/dashboard/UserPage.tsx | 32 + lib/stories/Demo/dashboard/UserSettings.tsx | 34 + lib/stories/Demo/dashboard/index.ts | 37 + .../dashboard/notificationsItem.module.css | 3 + lib/stories/Demo/data/accountMenu.tsx | 2 +- lib/stories/Demo/data/companies.tsx | 27 + ...dminMenuItems.tsx => companyMenuItems.tsx} | 24 +- .../Demo/data/dialog/reportingDialog.tsx | 4 +- lib/stories/Demo/data/dialogs.ts | 62 +- lib/stories/Demo/data/docsMenuItems.tsx | 18 + lib/stories/Demo/data/inboxMenu.tsx | 2 +- lib/stories/Demo/data/inboxMenuItems.tsx | 4 +- lib/stories/Demo/data/index.ts | 12 +- lib/stories/Demo/data/loginMenu.tsx | 4 +- lib/stories/Demo/data/profileMenuItems.tsx | 34 - lib/stories/Demo/data/services.tsx | 36 + lib/stories/Demo/data/sitemap.tsx | 18 +- lib/stories/Demo/data/userMenuItems.tsx | 40 + lib/stories/Demo/data/users.tsx | 23 + lib/stories/Demo/docs/Avatars.tsx | 11 + lib/stories/Demo/docs/Buttons.tsx | 48 + lib/stories/Demo/docs/Colors.tsx | 48 + lib/stories/Demo/docs/Default.tsx | 59 + lib/stories/Demo/docs/DocsPage.tsx | 15 + lib/stories/Demo/docs/Elements.tsx | 45 + lib/stories/Demo/docs/Icons.tsx | 11 + lib/stories/Demo/docs/Theming.tsx | 29 + lib/stories/Demo/docs/index.ts | 4 + lib/stories/Demo/hooks/index.ts | 5 +- lib/stories/Demo/hooks/useBulk.tsx | 12 + lib/stories/Demo/hooks/useLayout.tsx | 38 + lib/stories/Demo/hooks/useNavigation.tsx | 95 ++ lib/stories/Demo/hooks/useSearch.tsx | 25 +- .../Demo/{ => inbox}/BookmarksPage.tsx | 18 +- lib/stories/Demo/inbox/InboxDialog.tsx | 34 + lib/stories/Demo/inbox/InboxLayout.tsx | 53 + lib/stories/Demo/{ => inbox}/InboxPage.tsx | 3 +- lib/stories/Demo/inbox/InboxSection.tsx | 80 + lib/stories/Demo/inbox/InboxToolbar.tsx | 99 ++ lib/stories/Demo/inbox/index.ts | 6 + lib/stories/Demo/index.ts | 32 +- lib/stories/Demo/user/index.ts | 25 + lib/stories/Inbox/BookmarksPage.tsx | 44 - lib/stories/Inbox/DialogPage.tsx | 15 - lib/stories/Inbox/Inbox.stories.tsx | 55 - lib/stories/Inbox/Inbox.tsx | 12 - lib/stories/Inbox/InboxLayout.tsx | 49 - lib/stories/Inbox/InboxPage.tsx | 51 - lib/stories/Inbox/InboxProvider.tsx | 136 -- lib/stories/Inbox/InboxSection.tsx | 39 - lib/stories/Inbox/InboxToolbar.tsx | 103 -- lib/stories/Inbox/ProfilePage.tsx | 36 - lib/stories/Inbox/SettingsPage.tsx | 19 - lib/stories/Inbox/accounts/accounts.ts | 24 - lib/stories/Inbox/accounts/index.ts | 1 - lib/stories/Inbox/actionMenu.ts | 24 - .../Inbox/dialogs/brreg-completed.json | 35 - lib/stories/Inbox/dialogs/brreg-draft.json | 41 - .../Inbox/dialogs/enova-in-progress.json | 35 - lib/stories/Inbox/dialogs/index.ts | 57 - lib/stories/Inbox/dialogs/skatt-2023.json | 33 - .../Inbox/dialogs/sykmelding-referat.json | 41 - lib/stories/Inbox/groupBy.ts | 19 - lib/stories/Inbox/inboxSection.module.css | 19 - lib/stories/Inbox/index.ts | 15 - lib/stories/Inbox/layout/footer.ts | 27 - lib/stories/Inbox/layout/header.ts | 11 - lib/stories/Inbox/layout/index.ts | 3 - lib/stories/Inbox/layout/menu.ts | 64 - lib/tokens/README.md | 2 +- .../modes/color-scheme/light/altinn-ds.json | 28 +- .../primitives/modes/size/global.json | 96 ++ .../primitives/modes/size/large.json | 16 + .../primitives/modes/size/medium.json | 16 + .../primitives/modes/size/small.json | 16 + .../modes/typography/size/large.json | 100 ++ .../modes/typography/size/medium.json | 100 ++ .../modes/typography/size/small.json | 100 ++ .../semantic/modes/main-color/accent.json | 66 + lib/types/color.ts | 14 + lib/types/index.ts | 4 + lib/types/range.ts | 3 + lib/types/shadow.ts | 1 + lib/types/size.ts | 9 + package.json | 10 +- 325 files changed, 5596 insertions(+), 4127 deletions(-) delete mode 100644 .storybook/ThemeProvider.tsx delete mode 100644 .storybook/theme.module.css delete mode 100644 lib/components/Header/mobileMenu.module.css delete mode 100644 lib/components/Icon/checkboxIcon.module.css delete mode 100644 lib/components/LayoutAction/ActionFooter.stories.tsx delete mode 100644 lib/components/LayoutAction/ActionHeader.stories.ts delete mode 100644 lib/components/LayoutAction/ActionMenu.tsx create mode 100644 lib/components/LayoutAction/LayoutAction.stories.tsx create mode 100644 lib/components/LayoutAction/LayoutAction.tsx delete mode 100644 lib/components/LayoutAction/actionMenu.module.css delete mode 100644 lib/components/List/listBase.module.css delete mode 100644 lib/components/Menu/MenuItems.stories.ts delete mode 100644 lib/components/Page/Examples.stories.tsx rename lib/components/{LayoutAction/ActionMenu.stories.tsx => Page/PageMenu.stories.tsx} (74%) create mode 100644 lib/components/Page/PageMenu.tsx create mode 100644 lib/components/Page/pageMenu.module.css delete mode 100644 lib/components/Page/section.module.css create mode 100644 lib/css/altinn-ds-overrides.css create mode 100644 lib/css/altinn-ds.css create mode 100644 lib/css/altinn-theme.css delete mode 100644 lib/css/colors.css create mode 100644 lib/css/padding.css create mode 100644 lib/css/shadow.css delete mode 100644 lib/css/shadows.css create mode 100644 lib/css/spacing.css delete mode 100644 lib/css/theme-article.css delete mode 100644 lib/css/theme-company.css delete mode 100644 lib/css/theme-global-dark.css delete mode 100644 lib/css/theme-global.css delete mode 100644 lib/css/theme-neutral.css delete mode 100644 lib/css/theme-person.css delete mode 100644 lib/css/theme.css delete mode 100644 lib/stories/Color/MenuItem.stories.tsx delete mode 100644 lib/stories/Color/Swatches.stories.tsx delete mode 100644 lib/stories/Color/Swatches.tsx delete mode 100644 lib/stories/Color/colors.json delete mode 100644 lib/stories/Color/swatches.module.css delete mode 100644 lib/stories/Demo/ActivityLogPage.tsx delete mode 100644 lib/stories/Demo/AdminLayout.tsx delete mode 100644 lib/stories/Demo/AdminPage.tsx delete mode 100644 lib/stories/Demo/App.stories.tsx delete mode 100644 lib/stories/Demo/AppLayout.tsx delete mode 100644 lib/stories/Demo/AppPage.tsx delete mode 100644 lib/stories/Demo/CategoryArticle.tsx delete mode 100644 lib/stories/Demo/CategoryHome.tsx delete mode 100644 lib/stories/Demo/CategoryLayout.tsx delete mode 100644 lib/stories/Demo/CategorySection.tsx delete mode 100644 lib/stories/Demo/ColorsPage.tsx create mode 100644 lib/stories/Demo/Demo.stories.tsx delete mode 100644 lib/stories/Demo/InboxDialog.tsx delete mode 100644 lib/stories/Demo/InboxLayout.tsx delete mode 100644 lib/stories/Demo/InboxSection.tsx delete mode 100644 lib/stories/Demo/InboxToolbar.tsx delete mode 100644 lib/stories/Demo/ProfileLayout.tsx delete mode 100644 lib/stories/Demo/ProfilePage.tsx rename lib/stories/Demo/{ => app}/App.tsx (61%) create mode 100644 lib/stories/Demo/app/AppLayout.tsx create mode 100644 lib/stories/Demo/app/AppPage.tsx rename lib/stories/Demo/{ => app}/AppProvider.tsx (65%) create mode 100644 lib/stories/Demo/app/index.ts create mode 100644 lib/stories/Demo/category/CategoryArticle.tsx create mode 100644 lib/stories/Demo/category/CategoryGrid.tsx create mode 100644 lib/stories/Demo/category/CategoryLayout.tsx rename lib/stories/Demo/{ => category}/CategoryPage.tsx (53%) create mode 100644 lib/stories/Demo/category/CategorySection.tsx create mode 100644 lib/stories/Demo/category/HomePage.tsx create mode 100644 lib/stories/Demo/category/index.ts create mode 100644 lib/stories/Demo/dashboard/AccountHeader.tsx create mode 100644 lib/stories/Demo/dashboard/AccountListItem.tsx create mode 100644 lib/stories/Demo/dashboard/AccountPage.tsx create mode 100644 lib/stories/Demo/dashboard/AccountsSection.tsx create mode 100644 lib/stories/Demo/dashboard/ActivityLogPage.tsx create mode 100644 lib/stories/Demo/dashboard/AddressSettings.tsx create mode 100644 lib/stories/Demo/dashboard/CompanyDashboard.tsx create mode 100644 lib/stories/Demo/dashboard/CompanyLayout.tsx create mode 100644 lib/stories/Demo/dashboard/CompanyPage.tsx create mode 100644 lib/stories/Demo/dashboard/CompanySettings.tsx create mode 100644 lib/stories/Demo/dashboard/CompanyUserId.tsx create mode 100644 lib/stories/Demo/dashboard/CompanyUsers.tsx create mode 100644 lib/stories/Demo/dashboard/DashboardHeader.tsx create mode 100644 lib/stories/Demo/dashboard/DashboardSection.tsx create mode 100644 lib/stories/Demo/dashboard/NotificationsItem.tsx create mode 100644 lib/stories/Demo/dashboard/NotificationsSection.tsx create mode 100644 lib/stories/Demo/dashboard/SettingsPage.tsx create mode 100644 lib/stories/Demo/dashboard/SettingsSection.tsx create mode 100644 lib/stories/Demo/dashboard/UserAccountId.tsx create mode 100644 lib/stories/Demo/dashboard/UserAccounts.tsx create mode 100644 lib/stories/Demo/dashboard/UserDashboard.tsx create mode 100644 lib/stories/Demo/dashboard/UserFavourites.tsx create mode 100644 lib/stories/Demo/dashboard/UserLayout.tsx create mode 100644 lib/stories/Demo/dashboard/UserNotifications.tsx create mode 100644 lib/stories/Demo/dashboard/UserPage.tsx create mode 100644 lib/stories/Demo/dashboard/UserSettings.tsx create mode 100644 lib/stories/Demo/dashboard/index.ts create mode 100644 lib/stories/Demo/dashboard/notificationsItem.module.css create mode 100644 lib/stories/Demo/data/companies.tsx rename lib/stories/Demo/data/{adminMenuItems.tsx => companyMenuItems.tsx} (62%) create mode 100644 lib/stories/Demo/data/docsMenuItems.tsx delete mode 100644 lib/stories/Demo/data/profileMenuItems.tsx create mode 100644 lib/stories/Demo/data/services.tsx create mode 100644 lib/stories/Demo/data/userMenuItems.tsx create mode 100644 lib/stories/Demo/data/users.tsx create mode 100644 lib/stories/Demo/docs/Avatars.tsx create mode 100644 lib/stories/Demo/docs/Buttons.tsx create mode 100644 lib/stories/Demo/docs/Colors.tsx create mode 100644 lib/stories/Demo/docs/Default.tsx create mode 100644 lib/stories/Demo/docs/DocsPage.tsx create mode 100644 lib/stories/Demo/docs/Elements.tsx create mode 100644 lib/stories/Demo/docs/Icons.tsx create mode 100644 lib/stories/Demo/docs/Theming.tsx create mode 100644 lib/stories/Demo/docs/index.ts create mode 100644 lib/stories/Demo/hooks/useBulk.tsx create mode 100644 lib/stories/Demo/hooks/useLayout.tsx create mode 100644 lib/stories/Demo/hooks/useNavigation.tsx rename lib/stories/Demo/{ => inbox}/BookmarksPage.tsx (68%) create mode 100644 lib/stories/Demo/inbox/InboxDialog.tsx create mode 100644 lib/stories/Demo/inbox/InboxLayout.tsx rename lib/stories/Demo/{ => inbox}/InboxPage.tsx (77%) create mode 100644 lib/stories/Demo/inbox/InboxSection.tsx create mode 100644 lib/stories/Demo/inbox/InboxToolbar.tsx create mode 100644 lib/stories/Demo/inbox/index.ts create mode 100644 lib/stories/Demo/user/index.ts delete mode 100644 lib/stories/Inbox/BookmarksPage.tsx delete mode 100644 lib/stories/Inbox/DialogPage.tsx delete mode 100644 lib/stories/Inbox/Inbox.stories.tsx delete mode 100644 lib/stories/Inbox/Inbox.tsx delete mode 100644 lib/stories/Inbox/InboxLayout.tsx delete mode 100644 lib/stories/Inbox/InboxPage.tsx delete mode 100644 lib/stories/Inbox/InboxProvider.tsx delete mode 100644 lib/stories/Inbox/InboxSection.tsx delete mode 100644 lib/stories/Inbox/InboxToolbar.tsx delete mode 100644 lib/stories/Inbox/ProfilePage.tsx delete mode 100644 lib/stories/Inbox/SettingsPage.tsx delete mode 100644 lib/stories/Inbox/accounts/accounts.ts delete mode 100644 lib/stories/Inbox/accounts/index.ts delete mode 100644 lib/stories/Inbox/actionMenu.ts delete mode 100644 lib/stories/Inbox/dialogs/brreg-completed.json delete mode 100644 lib/stories/Inbox/dialogs/brreg-draft.json delete mode 100644 lib/stories/Inbox/dialogs/enova-in-progress.json delete mode 100644 lib/stories/Inbox/dialogs/index.ts delete mode 100644 lib/stories/Inbox/dialogs/skatt-2023.json delete mode 100644 lib/stories/Inbox/dialogs/sykmelding-referat.json delete mode 100644 lib/stories/Inbox/groupBy.ts delete mode 100644 lib/stories/Inbox/inboxSection.module.css delete mode 100644 lib/stories/Inbox/index.ts delete mode 100644 lib/stories/Inbox/layout/footer.ts delete mode 100644 lib/stories/Inbox/layout/header.ts delete mode 100644 lib/stories/Inbox/layout/index.ts delete mode 100644 lib/stories/Inbox/layout/menu.ts create mode 100644 lib/tokens/design-tokens/primitives/modes/size/global.json create mode 100644 lib/tokens/design-tokens/primitives/modes/size/large.json create mode 100644 lib/tokens/design-tokens/primitives/modes/size/medium.json create mode 100644 lib/tokens/design-tokens/primitives/modes/size/small.json create mode 100644 lib/tokens/design-tokens/primitives/modes/typography/size/large.json create mode 100644 lib/tokens/design-tokens/primitives/modes/typography/size/medium.json create mode 100644 lib/tokens/design-tokens/primitives/modes/typography/size/small.json create mode 100644 lib/tokens/design-tokens/semantic/modes/main-color/accent.json create mode 100644 lib/types/color.ts create mode 100644 lib/types/index.ts create mode 100644 lib/types/range.ts create mode 100644 lib/types/shadow.ts create mode 100644 lib/types/size.ts diff --git a/.storybook/StoryDecorator.tsx b/.storybook/StoryDecorator.tsx index ae2fc23a..81b6fe4f 100644 --- a/.storybook/StoryDecorator.tsx +++ b/.storybook/StoryDecorator.tsx @@ -1,6 +1,6 @@ -import {ReactNode} from "react"; +import { ReactNode } from "react"; import styles from "./storyDecorator.module.css"; -import {RootProvider} from "../lib"; +import { RootProvider } from "../lib"; interface StoryDecoratorProps { tags: string[]; @@ -8,15 +8,21 @@ interface StoryDecoratorProps { children: ReactNode; } -export const StoryDecorator = ({ - theme, - children, -}: StoryDecoratorProps) => { +export const StoryDecorator = ({ theme, children }: StoryDecoratorProps) => { + const layoutColor = theme === "global" ? "neutral" : theme; + const layoutTheme = theme === "global" ? "default" : "subtle"; + return ( - -
-
{children}
-
- + +
+
+ {children} +
+
+ ); }; diff --git a/.storybook/ThemeProvider.tsx b/.storybook/ThemeProvider.tsx deleted file mode 100644 index 459f19af..00000000 --- a/.storybook/ThemeProvider.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { ReactNode } from "react"; -import styles from "./theme.module.css"; - -export const ThemeProvider = ({ - children, - theme, -}: { - children?: ReactNode; - theme?: Theme; -}) => { - return ( -
- {children} -
- ); -}; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a6f83960..10b1bd6d 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -2,62 +2,66 @@ import { withThemeByDataAttribute } from "@storybook/addon-themes"; import { Preview, StoryFn } from "@storybook/react"; import { StoryDecorator } from "./StoryDecorator"; import "../lib/css/global.css"; -import {A11yParameters} from "@storybook/addon-a11y"; +import { A11yParameters } from "@storybook/addon-a11y"; import { Rule, getRules } from "axe-core"; /** @type { import('@storybook/react').Preview } */ const enabledTags = [ - "wcag2a", - "wcag2aa", - "wcag21a", - "wcag21aa", - "wcag22aa", - "best-practice", + "wcag2a", + "wcag2aa", + "wcag21a", + "wcag21aa", + "wcag22aa", + "best-practice", ]; const enabledRules: Rule[] = getRules(enabledTags).map((ruleMetadata) => ({ - id: ruleMetadata.ruleId, - enabled: true + id: ruleMetadata.ruleId, + enabled: true, })); const a11y: A11yParameters = { - config: { - rules: enabledRules, - }, - element: '#story-in-story-decorator-root', + config: { + rules: enabledRules, + }, + element: "#story-in-story-decorator-root", }; const preview: Preview = { - parameters: { - a11y, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, + parameters: { + a11y, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + options: { + storySort: { + order: ["Layout", "Search", "Menu", "List"], + }, }, - decorators: [ - (Story: StoryFn, data) => { - const { tags, globals } = data; - return ( - - - - ); - }, - withThemeByDataAttribute({ - themes: { - global: "global", - neutral: "neutral", - company: "company", - person: "person", - }, - defaultTheme: "neutral", - }), - ], + }, + decorators: [ + (Story: StoryFn, data) => { + const { tags, globals } = data; + return ( + + + + ); + }, + withThemeByDataAttribute({ + themes: { + global: "global", + neutral: "neutral", + company: "company", + person: "person", + }, + defaultTheme: "company", + }), + ], }; - -export default preview; \ No newline at end of file +export default preview; diff --git a/.storybook/theme.module.css b/.storybook/theme.module.css deleted file mode 100644 index ab7ac6fa..00000000 --- a/.storybook/theme.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.theme[data-theme] { - background: var(--theme-background-subtle); -} diff --git a/examples/inboxMenu.tsx b/examples/inboxMenu.tsx index 3ad8ad3d..e55e74b6 100644 --- a/examples/inboxMenu.tsx +++ b/examples/inboxMenu.tsx @@ -8,9 +8,10 @@ export const inboxMenu: MenuProps = { groupId: '1', size: 'lg', icon: 'inbox', + iconVariant: 'solid', selected: true, title: 'Innboks', - color: 'strong', + theme: 'base', badge: { label: '12', }, diff --git a/examples/loginMenu.tsx b/examples/loginMenu.tsx index f989964d..bf7cdb64 100644 --- a/examples/loginMenu.tsx +++ b/examples/loginMenu.tsx @@ -6,7 +6,7 @@ export const loginMenu: MenuProps = { id: 'login', groupId: 'login', size: 'lg', - color: 'strong', + theme: 'base', icon: 'padlock-locked', title: 'Logg inn', }, diff --git a/lib/components/AccessAreaList/AccessAreaList.tsx b/lib/components/AccessAreaList/AccessAreaList.tsx index 1c9849cf..63a48a44 100644 --- a/lib/components/AccessAreaList/AccessAreaList.tsx +++ b/lib/components/AccessAreaList/AccessAreaList.tsx @@ -1,14 +1,14 @@ -import { ListBase, type ListTheme } from '../List'; +import { ListBase, type ListItemColor } from '../List'; import { AccessAreaListItem, type AccessAreaListItemProps } from './AccessAreaListItem'; export interface AccessAreaListProps { items: AccessAreaListItemProps[]; - theme?: ListTheme; + color?: ListItemColor; } -export const AccessAreaList = ({ items, theme }: AccessAreaListProps) => { +export const AccessAreaList = ({ items, color }: AccessAreaListProps) => { return ( - + {items.map((item) => ( ))} diff --git a/lib/components/AccessPackageList/AccessPackageList.tsx b/lib/components/AccessPackageList/AccessPackageList.tsx index dcdcde6a..d12f3899 100644 --- a/lib/components/AccessPackageList/AccessPackageList.tsx +++ b/lib/components/AccessPackageList/AccessPackageList.tsx @@ -5,7 +5,7 @@ export interface AccessPackageListProps extends Pick { +export const AccessPackageList = ({ items, spacing = 2, ...props }: AccessPackageListProps) => { return ( {items.map((item) => ( diff --git a/lib/components/Attachment/attachmentLink.module.css b/lib/components/Attachment/attachmentLink.module.css index 46454fc6..235a17e0 100644 --- a/lib/components/Attachment/attachmentLink.module.css +++ b/lib/components/Attachment/attachmentLink.module.css @@ -2,11 +2,11 @@ display: inline-flex; align-items: start; column-gap: 0.25em; - color: var(--theme-base-default); + color: var(--ds-color-base-default); } .link:hover { - color: var(--theme-base-hover); + color: var(--ds-color-base-hover); } .label { diff --git a/lib/components/Autocomplete/Autocomplete.stories.tsx b/lib/components/Autocomplete/Autocomplete.stories.tsx index c3c9905d..2687b171 100644 --- a/lib/components/Autocomplete/Autocomplete.stories.tsx +++ b/lib/components/Autocomplete/Autocomplete.stories.tsx @@ -3,7 +3,7 @@ import { Autocomplete } from './Autocomplete'; import type { AutocompleteItemProps } from './AutocompleteItem.tsx'; const meta = { - title: 'Header/Autocomplete', + title: 'Search/Autocomplete', component: Autocomplete, tags: ['autodocs'], parameters: {}, diff --git a/lib/components/Autocomplete/AutocompleteItem.tsx b/lib/components/Autocomplete/AutocompleteItem.tsx index 544c3e0e..408412db 100644 --- a/lib/components/Autocomplete/AutocompleteItem.tsx +++ b/lib/components/Autocomplete/AutocompleteItem.tsx @@ -39,14 +39,14 @@ export type AutocompleteItemProps = export const AutocompleteItem = ({ type, ...props }: AutocompleteItemProps) => { switch (type) { case 'scope': - return ; + return ; case 'bookmark': - return ; + return ; case 'dialog': - return ; + return ; case 'information': - return ; + return ; default: - return ; + return ; } }; diff --git a/lib/components/Autocomplete/autocompleteBase.module.css b/lib/components/Autocomplete/autocompleteBase.module.css index 77fddf94..79217c37 100644 --- a/lib/components/Autocomplete/autocompleteBase.module.css +++ b/lib/components/Autocomplete/autocompleteBase.module.css @@ -2,7 +2,7 @@ width: 100%; border: 2px solid; border-radius: 0.25rem; - background-color: var(--theme-background-default); + background-color: var(--ds-color-background-default); } .autocomplete ul { diff --git a/lib/components/Autocomplete/autocompleteGroup.module.css b/lib/components/Autocomplete/autocompleteGroup.module.css index cc194805..03366faf 100644 --- a/lib/components/Autocomplete/autocompleteGroup.module.css +++ b/lib/components/Autocomplete/autocompleteGroup.module.css @@ -3,7 +3,7 @@ } .group + .group { - border-top: 1px solid var(--theme-border-subtle); + border-top: 1px solid var(--ds-color-border-subtle); } .header { @@ -14,6 +14,6 @@ font-size: 0.875rem; font-weight: normal; line-height: 1.25rem; - color: var(--theme-text-subtle); + color: var(--ds-color-text-subtle); margin: 0; } diff --git a/lib/components/Badge/Badge.stories.ts b/lib/components/Badge/Badge.stories.ts index 11acfc48..584c6a69 100644 --- a/lib/components/Badge/Badge.stories.ts +++ b/lib/components/Badge/Badge.stories.ts @@ -21,6 +21,7 @@ export const Default: Story = { export const Alert: Story = { args: { color: 'alert', + variant: 'strong', }, }; @@ -28,6 +29,7 @@ export const AlertXs: Story = { args: { ...Alert.args, size: 'xs', + variant: 'strong', }, }; @@ -42,5 +44,6 @@ export const UnreadCountXs: Story = { args: { ...UnreadCount.args, size: 'xs', + variant: 'strong', }, }; diff --git a/lib/components/Badge/Badge.tsx b/lib/components/Badge/Badge.tsx index 50dcf1d1..b3173cf2 100644 --- a/lib/components/Badge/Badge.tsx +++ b/lib/components/Badge/Badge.tsx @@ -1,21 +1,31 @@ import cx from 'classnames'; import type { ReactNode } from 'react'; +import type { Color } from '..'; import styles from './badge.module.css'; -export type BadgeColor = 'neutral' | 'alert'; +export type BadgeColor = Color; +export type BadgeVariant = 'subtle' | 'strong'; export type BadgeSize = 'sm' | 'xs'; export interface BadgeProps { label?: string | number; - color?: BadgeColor; + color?: Color; + variant?: BadgeVariant; size?: BadgeSize; className?: string; children?: ReactNode; } -export const Badge = ({ label, color = 'neutral', size = 'sm', className, children }: BadgeProps) => { +export const Badge = ({ + label, + color = 'neutral', + variant = 'subtle', + size = 'sm', + className, + children, +}: BadgeProps) => { return ( - + {label || children} ); diff --git a/lib/components/Badge/badge.module.css b/lib/components/Badge/badge.module.css index 3882612b..d291f372 100644 --- a/lib/components/Badge/badge.module.css +++ b/lib/components/Badge/badge.module.css @@ -27,12 +27,12 @@ border-radius: 2em; } -.badge[data-color="neutral"] { +.badge[data-variant="subtle"] { background-color: var(--ds-color-surface-default); color: var(--ds-color-text-subtle); } -.badge[data-color="alert"] { +.badge[data-variant="strong"] { background-color: var(--ds-color-base-default); - color: white; + color: var(--ds-color-contrast-default); } diff --git a/lib/components/Bookmarks/BookmarksListItem.tsx b/lib/components/Bookmarks/BookmarksListItem.tsx index 5ef664bf..56cea08f 100644 --- a/lib/components/Bookmarks/BookmarksListItem.tsx +++ b/lib/components/Bookmarks/BookmarksListItem.tsx @@ -44,7 +44,7 @@ interface FormData { export const BookmarksListItem = ({ size = 'sm', - icon = 'bookmark', + icon, expanded, loading, title, @@ -74,17 +74,16 @@ export const BookmarksListItem = ({ size={size} title={title || untitled} loading={loading} - icon={icon} onClick={onToggle} controls={} {...rest} /> {expanded && ( -
+
{titleField && } {(saveButton || removeButton) && ( - + {saveButton &&
); }; diff --git a/lib/components/Dialog/DialogContent.tsx b/lib/components/Dialog/DialogContent.tsx index cebb9aa2..cd4285b9 100644 --- a/lib/components/Dialog/DialogContent.tsx +++ b/lib/components/Dialog/DialogContent.tsx @@ -23,8 +23,8 @@ export interface DialogContentProps { export const DialogContent = ({ updatedAt, updatedAtLabel, seenBy, activityLog, children }: DialogContentProps) => { return ( - -
+ +
{updatedAtLabel} {children} diff --git a/lib/components/Dialog/DialogHistoryItem.tsx b/lib/components/Dialog/DialogHistoryItem.tsx index 08248b4b..7f76f191 100644 --- a/lib/components/Dialog/DialogHistoryItem.tsx +++ b/lib/components/Dialog/DialogHistoryItem.tsx @@ -32,13 +32,14 @@ export const DialogHistoryItem = ({ }: DialogHistoryItemProps) => { return ( - + {summary &&

{summary}

} {children} diff --git a/lib/components/Dialog/DialogList.tsx b/lib/components/Dialog/DialogList.tsx index 9d1c2b09..cc6f1bcc 100644 --- a/lib/components/Dialog/DialogList.tsx +++ b/lib/components/Dialog/DialogList.tsx @@ -16,7 +16,7 @@ export const DialogList = ({ items, groups = {} }: DialogListProps) => { }); return ( -
+
{menu?.map((group, groupIndex) => { const groupProps = group.props || {}; diff --git a/lib/components/Dialog/DialogListGroup.tsx b/lib/components/Dialog/DialogListGroup.tsx index d07a5715..17585355 100644 --- a/lib/components/Dialog/DialogListGroup.tsx +++ b/lib/components/Dialog/DialogListGroup.tsx @@ -9,16 +9,16 @@ export interface DialogListGroupProps { export const DialogListGroup = ({ title, children }: DialogListGroupProps) => { return ( -
+
{title && ( - + {title} )} - {children} + {children}
); }; diff --git a/lib/components/Dialog/DialogListItem.tsx b/lib/components/Dialog/DialogListItem.tsx index 462427b0..ab9463e8 100644 --- a/lib/components/Dialog/DialogListItem.tsx +++ b/lib/components/Dialog/DialogListItem.tsx @@ -18,6 +18,7 @@ import { export type DialogListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; export type DialogListItemState = 'normal' | 'trashed' | 'archived'; +export type DialogListItemTheme = 'default' | 'subtle' | 'transparent'; import styles from './dialogListItem.module.css'; @@ -78,6 +79,8 @@ export interface DialogListItemProps extends ListItemBaseProps, ListItemLinkProp attachmentsCount?: number; /** Group id */ groupId?: string; + /** Theme */ + theme?: DialogListItemTheme; } /** @@ -91,6 +94,7 @@ export const DialogListItem = ({ state = 'normal', loading, select, + selected, status, sender, recipient, @@ -112,13 +116,16 @@ export const DialogListItem = ({ title, description, summary, + theme, ...rest }: DialogListItemProps) => { const applicableState = trashedAt ? 'trashed' : archivedAt ? 'archived' : state; + const applicableTheme = theme || selected ? 'subtle' : 'default'; + if (size === 'xs' || size === 'sm' || size === 'md') { return ( - +
@@ -130,7 +137,7 @@ export const DialogListItem = ({ } return ( - +
diff --git a/lib/components/Dialog/DialogSection.tsx b/lib/components/Dialog/DialogSection.tsx index 392f8c7c..2f94154d 100644 --- a/lib/components/Dialog/DialogSection.tsx +++ b/lib/components/Dialog/DialogSection.tsx @@ -12,7 +12,7 @@ export const DialogSection = ({ title, children }: DialogSectionProps) => { } return ( -
+
{title && {title}} {children}
diff --git a/lib/components/Dialog/DialogTimelineItem.tsx b/lib/components/Dialog/DialogTimelineItem.tsx index 2e43b36c..e8975d94 100644 --- a/lib/components/Dialog/DialogTimelineItem.tsx +++ b/lib/components/Dialog/DialogTimelineItem.tsx @@ -12,13 +12,13 @@ export interface DialogTimelineItemProps { export const DialogTimelineItem = ({ updatedAt, updatedAtLabel, summary, items }: DialogTimelineItemProps) => { return ( - + {summary &&

{summary}

} {items && ( - + {items.map((item, index) => ( - + ))} )} diff --git a/lib/components/Dialog/DraftDialog.tsx b/lib/components/Dialog/DraftDialog.tsx index cff0c5dc..631e225d 100644 --- a/lib/components/Dialog/DraftDialog.tsx +++ b/lib/components/Dialog/DraftDialog.tsx @@ -7,6 +7,7 @@ import { DialogMetadata, type DialogProps, DialogSection, + Flex, Heading, PageBase, PageNav, @@ -38,23 +39,23 @@ export const DraftDialog = ({ contactInfo, }: DialogProps) => { return ( - - + + -
-
-
- - {title} -
+
+
+ + + {title} + {recipient?.name} {recipientLabel + ' ' + sender?.name + ', '} {updatedAtLabel}
-
+

{summary}

{body} diff --git a/lib/components/Dialog/dialog.module.css b/lib/components/Dialog/dialog.module.css index 08176427..720a8c67 100644 --- a/lib/components/Dialog/dialog.module.css +++ b/lib/components/Dialog/dialog.module.css @@ -1,9 +1,9 @@ +/* .dialog { - background-color: var(--theme-background-default); + background-color: var(--ds-background-default); display: flex; flex-direction: column; row-gap: 1.5em; - box-shadow: var(--ds-shadow-xs); } .nav { @@ -19,3 +19,4 @@ row-gap: 1.5em; margin-bottom: 1.5rem; } +*/ diff --git a/lib/components/Dialog/dialogHistory.module.css b/lib/components/Dialog/dialogHistory.module.css index aae64d1f..98f5d2b8 100644 --- a/lib/components/Dialog/dialogHistory.module.css +++ b/lib/components/Dialog/dialogHistory.module.css @@ -1,5 +1,5 @@ .section { - border-color: var(--neutral-surface-active); + /* border-color: var(--neutral-surface-active); */ display: flex; flex-direction: column; margin-bottom: 1.5rem; diff --git a/lib/components/Dialog/dialogListItem.module.css b/lib/components/Dialog/dialogListItem.module.css index fc1c03d4..e969286e 100644 --- a/lib/components/Dialog/dialogListItem.module.css +++ b/lib/components/Dialog/dialogListItem.module.css @@ -22,17 +22,17 @@ .border { position: relative; border-left: 0.25rem solid; - border-color: var(--theme-surface-active); + border-color: var(--ds-color-surface-active); display: flex; flex-direction: column; } .border[data-seen="true"] { - border-color: var(--neutral-surface-default); + border-color: var(--ds-color-surface-default); } .border[data-loading="true"] { - border-color: var(--neutral-surface-default); + border-color: var(--ds-color-surface-default); } .border[data-size="xs"], @@ -81,7 +81,7 @@ font-size: 1rem; font-weight: 400; line-height: 1.25; - color: var(--theme-text-default); + color: var(--ds-color-text-default); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; diff --git a/lib/components/Dialog/dialogSelect.module.css b/lib/components/Dialog/dialogSelect.module.css index 01635baf..975792a1 100644 --- a/lib/components/Dialog/dialogSelect.module.css +++ b/lib/components/Dialog/dialogSelect.module.css @@ -9,7 +9,7 @@ } .label:hover { - background-color: var(--theme-surface-default); + background-color: var(--ds-color-surface-default); } .input { @@ -22,7 +22,7 @@ } .icon { - color: var(--theme-base-default); + color: var(--ds-color-base-default); } .icon [data-hover="true"] { diff --git a/lib/components/Dropdown/Backdrop.tsx b/lib/components/Dropdown/Backdrop.tsx index 053112ce..ff69bc1d 100644 --- a/lib/components/Dropdown/Backdrop.tsx +++ b/lib/components/Dropdown/Backdrop.tsx @@ -2,7 +2,7 @@ import cx from 'classnames'; import type { MouseEventHandler } from 'react'; import styles from './backdrop.module.css'; -export type BackdropColor = 'transparent' | 'theme'; +export type BackdropColor = 'transparent' | 'inherit'; export interface BackdropProps { className?: string; diff --git a/lib/components/Dropdown/DrawerBase.tsx b/lib/components/Dropdown/DrawerBase.tsx index 0100d492..c5b47360 100644 --- a/lib/components/Dropdown/DrawerBase.tsx +++ b/lib/components/Dropdown/DrawerBase.tsx @@ -13,7 +13,13 @@ export interface DrawerBaseProps { export const DrawerBase = ({ placement = 'inline', open = false, className, children }: DrawerBaseProps) => { return ( -
+
{children}
); diff --git a/lib/components/Dropdown/DropdownBase.tsx b/lib/components/Dropdown/DropdownBase.tsx index c8994817..14d0e19c 100644 --- a/lib/components/Dropdown/DropdownBase.tsx +++ b/lib/components/Dropdown/DropdownBase.tsx @@ -29,6 +29,9 @@ export const DropdownBase = ({
0 ? filteredAccountMenu : [{ id: 'search', groupId: 'search', hidden: true }]), ]; - return ( - - ); + return ; }; diff --git a/lib/components/GlobalMenu/GlobalMenu.stories.tsx b/lib/components/GlobalMenu/GlobalMenu.stories.tsx index 34cdc6a8..9ff536f9 100644 --- a/lib/components/GlobalMenu/GlobalMenu.stories.tsx +++ b/lib/components/GlobalMenu/GlobalMenu.stories.tsx @@ -5,7 +5,7 @@ import type { Account } from './AccountButton.tsx'; import { GlobalMenu, type GlobalMenuProps } from './GlobalMenu'; const meta = { - title: 'GlobalMenu/GlobalMenu', + title: 'Menu/GlobalMenu', component: GlobalMenu, tags: ['autodocs'], parameters: {}, diff --git a/lib/components/GlobalMenu/GlobalMenuBase.tsx b/lib/components/GlobalMenu/GlobalMenuBase.tsx index b738045b..37283e64 100644 --- a/lib/components/GlobalMenu/GlobalMenuBase.tsx +++ b/lib/components/GlobalMenu/GlobalMenuBase.tsx @@ -15,7 +15,7 @@ export interface GlobalMenuFooterProps { export const GlobalMenuBase = ({ children }: GlobalMenuBaseProps) => { return ( -
diff --git a/lib/components/Searchbar/searchField.module.css b/lib/components/Searchbar/searchField.module.css index be7ed51b..07ce2bba 100644 --- a/lib/components/Searchbar/searchField.module.css +++ b/lib/components/Searchbar/searchField.module.css @@ -35,7 +35,7 @@ .input:focus, .input[value] { - background-color: var(--theme-background-default); + background-color: var(--ds-color-background-default); } .dismiss { diff --git a/lib/components/Snackbar/Snackbar.stories.tsx b/lib/components/Snackbar/Snackbar.stories.tsx index 5d31146c..1252e2d9 100644 --- a/lib/components/Snackbar/Snackbar.stories.tsx +++ b/lib/components/Snackbar/Snackbar.stories.tsx @@ -5,7 +5,7 @@ import { Snackbar } from './Snackbar.tsx'; import { useSnackbar } from './useSnackbar.tsx'; const meta = { - title: 'Snackbar/Snackbar', + title: 'Layout/Snackbar', component: Snackbar, tags: ['autodocs', 'beta'], parameters: {}, @@ -19,7 +19,7 @@ export const Default = () => { return (
- + ); @@ -53,7 +52,6 @@ export const ToolbarButton = ({ return (
); }; diff --git a/lib/components/Toolbar/toolbarDaterange.module.css b/lib/components/Toolbar/toolbarDaterange.module.css index b9d6c660..46a65ed0 100644 --- a/lib/components/Toolbar/toolbarDaterange.module.css +++ b/lib/components/Toolbar/toolbarDaterange.module.css @@ -1,5 +1,5 @@ .datepicker { - border-top: 1px solid var(--theme-border-subtle); + border-top: 1px solid var(--ds-color-border-subtle); padding: 0 0.5rem; } diff --git a/lib/components/Toolbar/toolbarSearch.module.css b/lib/components/Toolbar/toolbarSearch.module.css index e1420c4d..98aaac03 100644 --- a/lib/components/Toolbar/toolbarSearch.module.css +++ b/lib/components/Toolbar/toolbarSearch.module.css @@ -7,7 +7,7 @@ top: 0; left: 0; font-size: 1.25rem; - color: var(--theme-text-subtle); + color: var(--ds-color-text-subtle); margin: 8px; } @@ -19,7 +19,7 @@ padding: 9px 32px; border-radius: 2px; border: 1px solid; - border-color: var(--theme-border-default); + border-color: var(--ds-color-border-default); } .input[type="search"]::-webkit-search-decoration, diff --git a/lib/components/Transmission/TransmissionItem.stories.ts b/lib/components/Transmission/TransmissionItem.stories.ts index 5b0594e4..1e440fc7 100644 --- a/lib/components/Transmission/TransmissionItem.stories.ts +++ b/lib/components/Transmission/TransmissionItem.stories.ts @@ -4,7 +4,7 @@ import { TransmissionItem } from './TransmissionItem'; const meta = { title: 'Transmission/TransmissionItem', component: TransmissionItem, - tags: ['autodocs'], + tags: ['autodocs', 'beta'], parameters: {}, args: { createdAt: '2024-09-22 13:34', diff --git a/lib/components/Transmission/TransmissionItem.tsx b/lib/components/Transmission/TransmissionItem.tsx index 3fde919a..ec8f2770 100644 --- a/lib/components/Transmission/TransmissionItem.tsx +++ b/lib/components/Transmission/TransmissionItem.tsx @@ -2,13 +2,15 @@ import { useState } from 'react'; import type { AvatarProps } from '../Avatar'; import type { BadgeProps } from '../Badge'; import { DialogAttachments, type DialogAttachmentsProps } from '../Dialog'; -import { ListItem } from '../List'; +import { ListItem, type ListItemColor, type ListItemTheme } from '../List'; import { MetaTimestamp } from '../Meta'; import { Typography } from '../Typography'; import type { TransmissionTypeProps } from './TransmissionType'; import styles from './transmissionItem.module.css'; export interface TransmissionItemProps { + color?: ListItemColor; + theme?: ListItemTheme; type?: TransmissionTypeProps; loading?: boolean; expanded?: boolean; @@ -23,6 +25,7 @@ export interface TransmissionItemProps { } export const TransmissionItem = ({ + theme, type, loading, sender, @@ -43,7 +46,7 @@ export const TransmissionItem = ({ return ( { +export const Typography = ({ as = 'div', size = 'md', color, className, children, ...restProps }: TypographyProps) => { const Component = as; return ( - + {children} ); diff --git a/lib/components/Typography/typography.module.css b/lib/components/Typography/typography.module.css index a806e7a5..5cc0c1fc 100644 --- a/lib/components/Typography/typography.module.css +++ b/lib/components/Typography/typography.module.css @@ -37,7 +37,11 @@ } .typography a { - color: var(--theme-base-default); + color: var(--ds-color-base-default); +} + +.typography a:hover { + color: var(--ds-color-base-hover); } .typography > p { @@ -45,6 +49,13 @@ margin: 1em 0; } +.typography > h1 { + font-size: 1.5rem; + font-weight: 500; + margin-top: 1.5em; + margin-bottom: 0; +} + .typography > h2 { font-size: 1.25rem; font-weight: 600; @@ -72,12 +83,12 @@ .typography > h6 { font-weight: 500; - color: var(--theme-text-subtle); + color: var(--ds-color-text-subtle); } .typography > h6 { font-weight: 400; - color: var(--theme-text-subtle); + color: var(--ds-color-text-subtle); } .typography > h5 + *, diff --git a/lib/components/index.ts b/lib/components/index.ts index 7f13378c..eb29bad1 100644 --- a/lib/components/index.ts +++ b/lib/components/index.ts @@ -1,3 +1,5 @@ +export * from '../types/'; + export * from './Attachment'; export * from './Autocomplete'; export * from './Avatar'; diff --git a/lib/css/altinn-ds-overrides.css b/lib/css/altinn-ds-overrides.css new file mode 100644 index 00000000..af878586 --- /dev/null +++ b/lib/css/altinn-ds-overrides.css @@ -0,0 +1,38 @@ +:root { + /* COMPANY */ + + --ds-color-company-background-subtle: #e9f5ff; + --ds-color-company-surface-default: #d3eafd; + --ds-color-company-surface-hover: #a5d6fb; + --ds-color-company-surface-active: #78c1f9; + + /* PERSON */ + + --ds-color-person-background-subtle: #eaf7ef; + --ds-color-person-surface-default: #a8f3d0; + --ds-color-person-surface-hover: #6ee7b7; + --ds-color-person-surface-active: #34d399; + + /* ALERT */ + + --ds-color-alert-contrast-default: var(--ds-color-neutral-contrast-default); + --ds-color-alert-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + + /* ACCENT = COMPANY */ + + --ds-color-accent-background-default: var(--ds-color-company-background-default); + --ds-color-accent-background-subtle: var(--ds-color-company-background-subtle); + --ds-color-accent-surface-default: var(--ds-color-company-surface-default); + --ds-color-accent-surface-hover: var(--ds-color-company-surface-hover); + --ds-color-accent-surface-active: var(--ds-color-company-surface-active); + --ds-color-accent-border-default: var(--ds-color-company-border-default); + --ds-color-accent-border-subtle: var(--ds-color-company-border-subtle); + --ds-color-accent-border-strong: var(--ds-color-company-border-strong); + --ds-color-accent-base-default: var(--ds-color-company-base-default); + --ds-color-accent-base-hover: var(--ds-color-company-base-hover); + --ds-color-accent-base-active: var(--ds-color-company-base-active); + --ds-color-accent-text-subtle: var(--ds-color-company-text-subtle); + --ds-color-accent-text-default: var(--ds-color-company-text-default); + --ds-color-accent-contrast-default: var(--ds-color-company-contrast-default); + --ds-color-accent-contrast-subtle: var(--ds-color-company-contrast-subtle); +} diff --git a/lib/css/altinn-ds.css b/lib/css/altinn-ds.css new file mode 100644 index 00000000..9e7ea687 --- /dev/null +++ b/lib/css/altinn-ds.css @@ -0,0 +1,1484 @@ +@charset "UTF-8"; + +@layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components; + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-scheme.light { + :root, + [data-color-scheme="light"] { + --ds-color-company-background-default: #ffffff; + --ds-color-company-background-subtle: #f3f3f6; + --ds-color-company-surface-default: #e0e2e7; + --ds-color-company-surface-hover: #cfd1da; + --ds-color-company-surface-active: #bfc2cd; + --ds-color-company-border-subtle: #b8bbc8; + --ds-color-company-border-default: #777e95; + --ds-color-company-border-strong: #58607d; + --ds-color-company-base-default: #111d46; + --ds-color-company-base-hover: #242f55; + --ds-color-company-base-active: #384264; + --ds-color-company-text-subtle: #58607d; + --ds-color-company-text-default: #1e2950; + --ds-color-company-contrast-default: #ffffff; + --ds-color-company-contrast-subtle: #adb1bf; + --ds-color-person-background-default: #ffffff; + --ds-color-person-background-subtle: #f1f4f2; + --ds-color-person-surface-default: #dbe4df; + --ds-color-person-surface-hover: #c6d5cd; + --ds-color-person-surface-active: #b3c7bc; + --ds-color-person-border-subtle: #abc1b5; + --ds-color-person-border-default: #5e8771; + --ds-color-person-border-strong: #386b50; + --ds-color-person-base-default: #084826; + --ds-color-person-base-hover: #215a3c; + --ds-color-person-base-active: #3b6e53; + --ds-color-person-text-subtle: #386b50; + --ds-color-person-text-default: #06331b; + --ds-color-person-contrast-default: #ffffff; + --ds-color-person-contrast-subtle: #cfdbd4; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-subtle: #f3f4f4; + --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-surface-hover: #cfd2d5; + --ds-color-neutral-surface-active: #bfc3c7; + --ds-color-neutral-border-subtle: #b8bcc1; + --ds-color-neutral-border-default: #777f89; + --ds-color-neutral-border-strong: #59626f; + --ds-color-neutral-base-default: #1e2b3c; + --ds-color-neutral-base-hover: #313d4d; + --ds-color-neutral-base-active: #444f5d; + --ds-color-neutral-text-subtle: #59626f; + --ds-color-neutral-text-default: #1f2c3d; + --ds-color-neutral-contrast-default: #ffffff; + --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-article-background-default: #ffffff; + --ds-color-article-background-subtle: #eef4fa; + --ds-color-article-surface-default: #d3e4f3; + --ds-color-article-surface-hover: #bad5ec; + --ds-color-article-surface-active: #a3c6e6; + --ds-color-article-border-subtle: #99c0e3; + --ds-color-article-border-default: #3582c8; + --ds-color-article-border-strong: #0061b8; + --ds-color-article-base-default: #0062ba; + --ds-color-article-base-hover: #004f96; + --ds-color-article-base-active: #003d75; + --ds-color-article-text-subtle: #0061b8; + --ds-color-article-text-default: #002c54; + --ds-color-article-contrast-default: #ffffff; + --ds-color-article-contrast-subtle: #dbe9f5; + --ds-color-alert-background-default: #ffffff; + --ds-color-alert-background-subtle: #fdf1f2; + --ds-color-alert-surface-default: #fadbdf; + --ds-color-alert-surface-hover: #f6c5cd; + --ds-color-alert-surface-active: #f3b1bb; + --ds-color-alert-border-subtle: #f2a8b3; + --ds-color-alert-border-default: #e3425b; + --ds-color-alert-border-strong: #b9263c; + --ds-color-alert-base-default: #e02f4a; + --ds-color-alert-base-hover: #e75c71; + --ds-color-alert-base-active: #ec7f90; + --ds-color-alert-text-subtle: #b9263c; + --ds-color-alert-text-default: #55121c; + --ds-color-alert-contrast-default: #000000; + --ds-color-alert-contrast-subtle: #000000; + --ds-color-success-background-default: #ffffff; + --ds-color-success-background-subtle: #ecf6ee; + --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-surface-hover: #b4dbba; + --ds-color-success-surface-active: #9bcfa2; + --ds-color-success-border-subtle: #8fc997; + --ds-color-success-border-default: #1d922d; + --ds-color-success-border-strong: #057114; + --ds-color-success-base-default: #068718; + --ds-color-success-base-hover: #057014; + --ds-color-success-base-active: #045a10; + --ds-color-success-text-subtle: #057114; + --ds-color-success-text-default: #023409; + --ds-color-success-contrast-default: #ffffff; + --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-danger-background-default: #ffffff; + --ds-color-danger-background-subtle: #fbf1f1; + --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-surface-hover: #f0c8c8; + --ds-color-danger-surface-active: #ebb5b5; + --ds-color-danger-border-subtle: #e8adad; + --ds-color-danger-border-default: #d15757; + --ds-color-danger-border-strong: #bf1b1b; + --ds-color-danger-base-default: #bf1b1b; + --ds-color-danger-base-hover: #9b1616; + --ds-color-danger-base-active: #791111; + --ds-color-danger-text-subtle: #bf1b1b; + --ds-color-danger-text-default: #590d0d; + --ds-color-danger-contrast-default: #ffffff; + --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-info-background-default: #ffffff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9fc7e6; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2a83c8; + --ds-color-info-border-strong: #0964a9; + --ds-color-info-base-default: #0a71bf; + --ds-color-info-base-hover: #085d9f; + --ds-color-info-base-active: #074a7e; + --ds-color-info-text-subtle: #0964a9; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-warning-background-default: #ffffff; + --ds-color-warning-background-subtle: #f9f4e1; + --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-surface-hover: #e6d184; + --ds-color-warning-surface-active: #ddc159; + --ds-color-warning-border-subtle: #d9b945; + --ds-color-warning-border-default: #957c21; + --ds-color-warning-border-strong: #736019; + --ds-color-warning-base-default: #b7581d; + --ds-color-warning-base-hover: #994918; + --ds-color-warning-base-active: #7b3b13; + --ds-color-warning-text-subtle: #9b4a18; + --ds-color-warning-text-default: #46220b; + --ds-color-warning-contrast-default: #ffffff; + --ds-color-warning-contrast-subtle: #fdf9f8; + --ds-color-focus-inner: #ffffff; + --ds-color-focus-outer: #1e2950; + --ds-global-blue-1: #ffffff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d2e5f3; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9fc7e6; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2a83c8; + --ds-global-blue-8: #0964a9; + --ds-global-blue-9: #0a71bf; + --ds-global-blue-10: #085d9f; + --ds-global-blue-11: #074a7e; + --ds-global-blue-12: #0964a9; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #eff6fb; + --ds-global-green-1: #ffffff; + --ds-global-green-2: #ecf6ee; + --ds-global-green-3: #d0e8d3; + --ds-global-green-4: #b4dbba; + --ds-global-green-5: #9bcfa2; + --ds-global-green-6: #8fc997; + --ds-global-green-7: #1d922d; + --ds-global-green-8: #057114; + --ds-global-green-9: #068718; + --ds-global-green-10: #057014; + --ds-global-green-11: #045a10; + --ds-global-green-12: #057114; + --ds-global-green-13: #023409; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #fafdfb; + --ds-global-orange-1: #ffffff; + --ds-global-orange-2: #faf2ee; + --ds-global-orange-3: #f1dfd3; + --ds-global-orange-4: #e9ccba; + --ds-global-orange-5: #e2baa2; + --ds-global-orange-6: #dfb398; + --ds-global-orange-7: #bf6732; + --ds-global-orange-8: #9b4a18; + --ds-global-orange-9: #b7581d; + --ds-global-orange-10: #994918; + --ds-global-orange-11: #7b3b13; + --ds-global-orange-12: #9b4a18; + --ds-global-orange-13: #46220b; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fdf9f8; + --ds-global-purple-1: #ffffff; + --ds-global-purple-2: #f6f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cde6; + --ds-global-purple-5: #cdbcdd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #936fb7; + --ds-global-purple-8: #794ca6; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2776; + --ds-global-purple-11: #371b53; + --ds-global-purple-12: #794ca6; + --ds-global-purple-13: #3a1d57; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #ffffff; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c8c8; + --ds-global-red-5: #ebb5b5; + --ds-global-red-6: #e8adad; + --ds-global-red-7: #d15757; + --ds-global-red-8: #bf1b1b; + --ds-global-red-9: #bf1b1b; + --ds-global-red-10: #9b1616; + --ds-global-red-11: #791111; + --ds-global-red-12: #bf1b1b; + --ds-global-red-13: #590d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f7e1e1; + --ds-global-yellow-1: #ffffff; + --ds-global-yellow-2: #f9f4e1; + --ds-global-yellow-3: #efe2b2; + --ds-global-yellow-4: #e6d184; + --ds-global-yellow-5: #ddc159; + --ds-global-yellow-6: #d9b945; + --ds-global-yellow-7: #957c21; + --ds-global-yellow-8: #736019; + --ds-global-yellow-9: #d4b12f; + --ds-global-yellow-10: #bb9c2a; + --ds-global-yellow-11: #a38824; + --ds-global-yellow-12: #736019; + --ds-global-yellow-13: #332b0b; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #282209; + + color-scheme: light; + } + + @media (prefers-color-scheme: light) { + [data-color-scheme="auto"] { + --ds-color-company-background-default: #ffffff; + --ds-color-company-background-subtle: #f3f3f6; + --ds-color-company-surface-default: #e0e2e7; + --ds-color-company-surface-hover: #cfd1da; + --ds-color-company-surface-active: #bfc2cd; + --ds-color-company-border-subtle: #b8bbc8; + --ds-color-company-border-default: #777e95; + --ds-color-company-border-strong: #58607d; + --ds-color-company-base-default: #111d46; + --ds-color-company-base-hover: #242f55; + --ds-color-company-base-active: #384264; + --ds-color-company-text-subtle: #58607d; + --ds-color-company-text-default: #1e2950; + --ds-color-company-contrast-default: #ffffff; + --ds-color-company-contrast-subtle: #adb1bf; + --ds-color-person-background-default: #ffffff; + --ds-color-person-background-subtle: #f1f4f2; + --ds-color-person-surface-default: #dbe4df; + --ds-color-person-surface-hover: #c6d5cd; + --ds-color-person-surface-active: #b3c7bc; + --ds-color-person-border-subtle: #abc1b5; + --ds-color-person-border-default: #5e8771; + --ds-color-person-border-strong: #386b50; + --ds-color-person-base-default: #084826; + --ds-color-person-base-hover: #215a3c; + --ds-color-person-base-active: #3b6e53; + --ds-color-person-text-subtle: #386b50; + --ds-color-person-text-default: #06331b; + --ds-color-person-contrast-default: #ffffff; + --ds-color-person-contrast-subtle: #cfdbd4; + --ds-color-neutral-background-default: #ffffff; + --ds-color-neutral-background-subtle: #f3f4f4; + --ds-color-neutral-surface-default: #e0e2e4; + --ds-color-neutral-surface-hover: #cfd2d5; + --ds-color-neutral-surface-active: #bfc3c7; + --ds-color-neutral-border-subtle: #b8bcc1; + --ds-color-neutral-border-default: #777f89; + --ds-color-neutral-border-strong: #59626f; + --ds-color-neutral-base-default: #1e2b3c; + --ds-color-neutral-base-hover: #313d4d; + --ds-color-neutral-base-active: #444f5d; + --ds-color-neutral-text-subtle: #59626f; + --ds-color-neutral-text-default: #1f2c3d; + --ds-color-neutral-contrast-default: #ffffff; + --ds-color-neutral-contrast-subtle: #babec4; + --ds-color-article-background-default: #ffffff; + --ds-color-article-background-subtle: #eef4fa; + --ds-color-article-surface-default: #d3e4f3; + --ds-color-article-surface-hover: #bad5ec; + --ds-color-article-surface-active: #a3c6e6; + --ds-color-article-border-subtle: #99c0e3; + --ds-color-article-border-default: #3582c8; + --ds-color-article-border-strong: #0061b8; + --ds-color-article-base-default: #0062ba; + --ds-color-article-base-hover: #004f96; + --ds-color-article-base-active: #003d75; + --ds-color-article-text-subtle: #0061b8; + --ds-color-article-text-default: #002c54; + --ds-color-article-contrast-default: #ffffff; + --ds-color-article-contrast-subtle: #dbe9f5; + --ds-color-alert-background-default: #ffffff; + --ds-color-alert-background-subtle: #fdf1f2; + --ds-color-alert-surface-default: #fadbdf; + --ds-color-alert-surface-hover: #f6c5cd; + --ds-color-alert-surface-active: #f3b1bb; + --ds-color-alert-border-subtle: #f2a8b3; + --ds-color-alert-border-default: #e3425b; + --ds-color-alert-border-strong: #b9263c; + --ds-color-alert-base-default: #e02f4a; + --ds-color-alert-base-hover: #e75c71; + --ds-color-alert-base-active: #ec7f90; + --ds-color-alert-text-subtle: #b9263c; + --ds-color-alert-text-default: #55121c; + --ds-color-alert-contrast-default: #000000; + --ds-color-alert-contrast-subtle: #000000; + --ds-color-success-background-default: #ffffff; + --ds-color-success-background-subtle: #ecf6ee; + --ds-color-success-surface-default: #d0e8d3; + --ds-color-success-surface-hover: #b4dbba; + --ds-color-success-surface-active: #9bcfa2; + --ds-color-success-border-subtle: #8fc997; + --ds-color-success-border-default: #1d922d; + --ds-color-success-border-strong: #057114; + --ds-color-success-base-default: #068718; + --ds-color-success-base-hover: #057014; + --ds-color-success-base-active: #045a10; + --ds-color-success-text-subtle: #057114; + --ds-color-success-text-default: #023409; + --ds-color-success-contrast-default: #ffffff; + --ds-color-success-contrast-subtle: #fafdfb; + --ds-color-danger-background-default: #ffffff; + --ds-color-danger-background-subtle: #fbf1f1; + --ds-color-danger-surface-default: #f5dcdc; + --ds-color-danger-surface-hover: #f0c8c8; + --ds-color-danger-surface-active: #ebb5b5; + --ds-color-danger-border-subtle: #e8adad; + --ds-color-danger-border-default: #d15757; + --ds-color-danger-border-strong: #bf1b1b; + --ds-color-danger-base-default: #bf1b1b; + --ds-color-danger-base-hover: #9b1616; + --ds-color-danger-base-active: #791111; + --ds-color-danger-text-subtle: #bf1b1b; + --ds-color-danger-text-default: #590d0d; + --ds-color-danger-contrast-default: #ffffff; + --ds-color-danger-contrast-subtle: #f7e1e1; + --ds-color-info-background-default: #ffffff; + --ds-color-info-background-subtle: #edf5fa; + --ds-color-info-surface-default: #d2e5f3; + --ds-color-info-surface-hover: #b7d5ed; + --ds-color-info-surface-active: #9fc7e6; + --ds-color-info-border-subtle: #94c1e3; + --ds-color-info-border-default: #2a83c8; + --ds-color-info-border-strong: #0964a9; + --ds-color-info-base-default: #0a71bf; + --ds-color-info-base-hover: #085d9f; + --ds-color-info-base-active: #074a7e; + --ds-color-info-text-subtle: #0964a9; + --ds-color-info-text-default: #042d4d; + --ds-color-info-contrast-default: #ffffff; + --ds-color-info-contrast-subtle: #eff6fb; + --ds-color-warning-background-default: #ffffff; + --ds-color-warning-background-subtle: #f9f4e1; + --ds-color-warning-surface-default: #efe2b2; + --ds-color-warning-surface-hover: #e6d184; + --ds-color-warning-surface-active: #ddc159; + --ds-color-warning-border-subtle: #d9b945; + --ds-color-warning-border-default: #957c21; + --ds-color-warning-border-strong: #736019; + --ds-color-warning-base-default: #b7581d; + --ds-color-warning-base-hover: #994918; + --ds-color-warning-base-active: #7b3b13; + --ds-color-warning-text-subtle: #9b4a18; + --ds-color-warning-text-default: #46220b; + --ds-color-warning-contrast-default: #ffffff; + --ds-color-warning-contrast-subtle: #fdf9f8; + --ds-color-focus-inner: #ffffff; + --ds-color-focus-outer: #1e2950; + --ds-global-blue-1: #ffffff; + --ds-global-blue-2: #edf5fa; + --ds-global-blue-3: #d2e5f3; + --ds-global-blue-4: #b7d5ed; + --ds-global-blue-5: #9fc7e6; + --ds-global-blue-6: #94c1e3; + --ds-global-blue-7: #2a83c8; + --ds-global-blue-8: #0964a9; + --ds-global-blue-9: #0a71bf; + --ds-global-blue-10: #085d9f; + --ds-global-blue-11: #074a7e; + --ds-global-blue-12: #0964a9; + --ds-global-blue-13: #042d4d; + --ds-global-blue-contrast-1: #ffffff; + --ds-global-blue-contrast-2: #eff6fb; + --ds-global-green-1: #ffffff; + --ds-global-green-2: #ecf6ee; + --ds-global-green-3: #d0e8d3; + --ds-global-green-4: #b4dbba; + --ds-global-green-5: #9bcfa2; + --ds-global-green-6: #8fc997; + --ds-global-green-7: #1d922d; + --ds-global-green-8: #057114; + --ds-global-green-9: #068718; + --ds-global-green-10: #057014; + --ds-global-green-11: #045a10; + --ds-global-green-12: #057114; + --ds-global-green-13: #023409; + --ds-global-green-contrast-1: #ffffff; + --ds-global-green-contrast-2: #fafdfb; + --ds-global-orange-1: #ffffff; + --ds-global-orange-2: #faf2ee; + --ds-global-orange-3: #f1dfd3; + --ds-global-orange-4: #e9ccba; + --ds-global-orange-5: #e2baa2; + --ds-global-orange-6: #dfb398; + --ds-global-orange-7: #bf6732; + --ds-global-orange-8: #9b4a18; + --ds-global-orange-9: #b7581d; + --ds-global-orange-10: #994918; + --ds-global-orange-11: #7b3b13; + --ds-global-orange-12: #9b4a18; + --ds-global-orange-13: #46220b; + --ds-global-orange-contrast-1: #ffffff; + --ds-global-orange-contrast-2: #fdf9f8; + --ds-global-purple-1: #ffffff; + --ds-global-purple-2: #f6f2f9; + --ds-global-purple-3: #e7dfef; + --ds-global-purple-4: #d9cde6; + --ds-global-purple-5: #cdbcdd; + --ds-global-purple-6: #c7b4da; + --ds-global-purple-7: #936fb7; + --ds-global-purple-8: #794ca6; + --ds-global-purple-9: #663299; + --ds-global-purple-10: #4f2776; + --ds-global-purple-11: #371b53; + --ds-global-purple-12: #794ca6; + --ds-global-purple-13: #3a1d57; + --ds-global-purple-contrast-1: #ffffff; + --ds-global-purple-contrast-2: #eee8f3; + --ds-global-red-1: #ffffff; + --ds-global-red-2: #fbf1f1; + --ds-global-red-3: #f5dcdc; + --ds-global-red-4: #f0c8c8; + --ds-global-red-5: #ebb5b5; + --ds-global-red-6: #e8adad; + --ds-global-red-7: #d15757; + --ds-global-red-8: #bf1b1b; + --ds-global-red-9: #bf1b1b; + --ds-global-red-10: #9b1616; + --ds-global-red-11: #791111; + --ds-global-red-12: #bf1b1b; + --ds-global-red-13: #590d0d; + --ds-global-red-contrast-1: #ffffff; + --ds-global-red-contrast-2: #f7e1e1; + --ds-global-yellow-1: #ffffff; + --ds-global-yellow-2: #f9f4e1; + --ds-global-yellow-3: #efe2b2; + --ds-global-yellow-4: #e6d184; + --ds-global-yellow-5: #ddc159; + --ds-global-yellow-6: #d9b945; + --ds-global-yellow-7: #957c21; + --ds-global-yellow-8: #736019; + --ds-global-yellow-9: #d4b12f; + --ds-global-yellow-10: #bb9c2a; + --ds-global-yellow-11: #a38824; + --ds-global-yellow-12: #736019; + --ds-global-yellow-13: #332b0b; + --ds-global-yellow-contrast-1: #000000; + --ds-global-yellow-contrast-2: #282209; + + color-scheme: light; + } + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.secondary { + [data-ds-typography="secondary"] { + --ds-font-family: Inter; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 500; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-body-xl-font-weight: 400; + --ds-body-xl-line-height: 1.5; + --ds-body-xl-font-size: 1.5rem; + --ds-body-xl-letter-spacing: 0.5%; + --ds-body-lg-font-weight: 400; + --ds-body-lg-line-height: 1.5; + --ds-body-lg-font-size: 1.3125rem; + --ds-body-lg-letter-spacing: 0.5%; + --ds-body-md-font-weight: 400; + --ds-body-md-line-height: 1.5; + --ds-body-md-font-size: 1.125rem; + --ds-body-md-letter-spacing: 0.5%; + --ds-body-sm-font-weight: 400; + --ds-body-sm-line-height: 1.5; + --ds-body-sm-font-size: 1rem; + --ds-body-sm-letter-spacing: 0.25%; + --ds-body-xs-font-weight: 400; + --ds-body-xs-line-height: 1.5; + --ds-body-xs-font-size: 0.875rem; + --ds-body-xs-letter-spacing: 0.15%; + --ds-body-short-xl-font-weight: 400; + --ds-body-short-xl-line-height: 1.3; + --ds-body-short-xl-font-size: 1.5rem; + --ds-body-short-xl-letter-spacing: 0.5%; + --ds-body-short-lg-font-weight: 400; + --ds-body-short-lg-line-height: 1.3; + --ds-body-short-lg-font-size: 1.3125rem; + --ds-body-short-lg-letter-spacing: 0.5%; + --ds-body-short-md-font-weight: 400; + --ds-body-short-md-line-height: 1.3; + --ds-body-short-md-font-size: 1.125rem; + --ds-body-short-md-letter-spacing: 0.5%; + --ds-body-short-sm-font-weight: 400; + --ds-body-short-sm-line-height: 1.3; + --ds-body-short-sm-font-size: 1rem; + --ds-body-short-sm-letter-spacing: 0.25%; + --ds-body-short-xs-font-weight: 400; + --ds-body-short-xs-line-height: 1.3; + --ds-body-short-xs-font-size: 0.875rem; + --ds-body-short-xs-letter-spacing: 0.15%; + --ds-body-long-xl-font-weight: 400; + --ds-body-long-xl-line-height: 1.7; + --ds-body-long-xl-font-size: 1.5rem; + --ds-body-long-xl-letter-spacing: 0.5%; + --ds-body-long-lg-font-weight: 400; + --ds-body-long-lg-line-height: 1.7; + --ds-body-long-lg-font-size: 1.3125rem; + --ds-body-long-lg-letter-spacing: 0.5%; + --ds-body-long-md-font-weight: 400; + --ds-body-long-md-line-height: 1.7; + --ds-body-long-md-font-size: 1.125rem; + --ds-body-long-md-letter-spacing: 0.5%; + --ds-body-long-sm-font-weight: 400; + --ds-body-long-sm-line-height: 1.7; + --ds-body-long-sm-font-size: 1rem; + --ds-body-long-sm-letter-spacing: 0.25%; + --ds-body-long-xs-font-weight: 400; + --ds-body-long-xs-line-height: 1.7; + --ds-body-long-xs-font-size: 0.875rem; + --ds-body-long-xs-letter-spacing: 0.15%; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + --ds-altinn-ds-main: Inter; + --ds-altinn-ds-bold: 500; + --ds-altinn-ds-extra-bold: 600; + --ds-altinn-ds-regular: 400; + } +} +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.semantic { + :root { + --ds-border-radius-1: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 1); + --ds-border-radius-2: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 2); + --ds-border-radius-3: min(var(--ds-border-radius-base), var(--ds-border-radius-scale) * 5); + --ds-border-radius-4: var(--ds-border-radius-base); + --ds-border-radius-5: 624.9375rem; + --ds-border-radius-base: 0.25rem; + --ds-border-radius-scale: 0.25rem; + --ds-border-radius-sm: var(--ds-border-radius-1); + --ds-border-radius-md: var(--ds-border-radius-2); + --ds-border-radius-lg: var(--ds-border-radius-3); + --ds-border-radius-default: var(--ds-border-radius-4); + --ds-border-radius-full: var(--ds-border-radius-5); + --ds-disabled-opacity: 30%; + --ds-spacing-0: calc(var(--ds-spacing-scale) * 0); + --ds-spacing-1: calc(var(--ds-spacing-scale) * 1); + --ds-spacing-2: calc(var(--ds-spacing-scale) * 2); + --ds-spacing-3: calc(var(--ds-spacing-scale) * 3); + --ds-spacing-4: calc(var(--ds-spacing-scale) * 4); + --ds-spacing-5: calc(var(--ds-spacing-scale) * 5); + --ds-spacing-6: calc(var(--ds-spacing-scale) * 6); + --ds-spacing-7: calc(var(--ds-spacing-scale) * 7); + --ds-spacing-8: calc(var(--ds-spacing-scale) * 8); + --ds-spacing-9: calc(var(--ds-spacing-scale) * 9); + --ds-spacing-10: calc(var(--ds-spacing-scale) * 10); + --ds-spacing-11: calc(var(--ds-spacing-scale) * 11); + --ds-spacing-12: calc(var(--ds-spacing-scale) * 12); + --ds-spacing-13: calc(var(--ds-spacing-scale) * 13); + --ds-spacing-14: calc(var(--ds-spacing-scale) * 14); + --ds-spacing-15: calc(var(--ds-spacing-scale) * 15); + --ds-spacing-18: calc(var(--ds-spacing-scale) * 18); + --ds-spacing-22: calc(var(--ds-spacing-scale) * 22); + --ds-spacing-26: calc(var(--ds-spacing-scale) * 26); + --ds-spacing-30: calc(var(--ds-spacing-scale) * 30); + --ds-spacing-scale: 0.25rem; + --ds-sizing-0: calc(var(--ds-sizing-scale) * 0); + --ds-sizing-1: calc(var(--ds-sizing-scale) * 1); + --ds-sizing-2: calc(var(--ds-sizing-scale) * 2); + --ds-sizing-3: calc(var(--ds-sizing-scale) * 3); + --ds-sizing-4: calc(var(--ds-sizing-scale) * 4); + --ds-sizing-5: calc(var(--ds-sizing-scale) * 5); + --ds-sizing-6: calc(var(--ds-sizing-scale) * 6); + --ds-sizing-7: calc(var(--ds-sizing-scale) * 7); + --ds-sizing-8: calc(var(--ds-sizing-scale) * 8); + --ds-sizing-9: calc(var(--ds-sizing-scale) * 9); + --ds-sizing-10: calc(var(--ds-sizing-scale) * 10); + --ds-sizing-11: calc(var(--ds-sizing-scale) * 11); + --ds-sizing-12: calc(var(--ds-sizing-scale) * 12); + --ds-sizing-13: calc(var(--ds-sizing-scale) * 13); + --ds-sizing-14: calc(var(--ds-sizing-scale) * 14); + --ds-sizing-15: calc(var(--ds-sizing-scale) * 15); + --ds-sizing-18: calc(var(--ds-sizing-scale) * 18); + --ds-sizing-22: calc(var(--ds-sizing-scale) * 22); + --ds-sizing-26: calc(var(--ds-sizing-scale) * 26); + --ds-sizing-30: calc(var(--ds-sizing-scale) * 30); + --ds-sizing-scale: 0.25rem; + --ds-border-width-default: 1px; + --ds-border-width-highlight: 2px; + --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12); + --ds-shadow-sm: 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); + --ds-shadow-md: 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); + --ds-shadow-lg: 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); + --ds-shadow-xl: 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); + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color-scheme.dark { + [data-color-scheme="dark"] { + --ds-color-company-background-default: #0f1a3f; + --ds-color-company-background-subtle: #16224a; + --ds-color-company-surface-default: #222e54; + --ds-color-company-surface-hover: #313b5f; + --ds-color-company-surface-active: #3f496a; + --ds-color-company-border-subtle: #475070; + --ds-color-company-border-default: #747b93; + --ds-color-company-border-strong: #9ca1b2; + --ds-color-company-base-default: #a6abba; + --ds-color-company-base-hover: #9096a9; + --ds-color-company-base-active: #7a8197; + --ds-color-company-text-subtle: #9ca1b2; + --ds-color-company-text-default: #e3e4e9; + --ds-color-company-contrast-default: #000000; + --ds-color-company-contrast-subtle: #1b1c1e; + --ds-color-person-background-default: #042212; + --ds-color-person-background-subtle: #052b17; + --ds-color-person-surface-default: #06371d; + --ds-color-person-surface-hover: #084625; + --ds-color-person-surface-active: #195535; + --ds-color-person-border-subtle: #225b3d; + --ds-color-person-border-default: #5a856e; + --ds-color-person-border-strong: #8ba999; + --ds-color-person-base-default: #96b1a3; + --ds-color-person-base-hover: #7c9e8c; + --ds-color-person-base-active: #618a74; + --ds-color-person-text-subtle: #8ba999; + --ds-color-person-text-default: #dee7e2; + --ds-color-person-contrast-default: #000000; + --ds-color-person-contrast-subtle: #181c1a; + --ds-color-neutral-background-default: #141d29; + --ds-color-neutral-background-subtle: #1a2534; + --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-surface-hover: #323e4d; + --ds-color-neutral-surface-active: #404b5a; + --ds-color-neutral-border-subtle: #475260; + --ds-color-neutral-border-default: #747c87; + --ds-color-neutral-border-strong: #9da2aa; + --ds-color-neutral-base-default: #a6acb2; + --ds-color-neutral-base-hover: #90979f; + --ds-color-neutral-base-active: #7a828c; + --ds-color-neutral-text-subtle: #9da2aa; + --ds-color-neutral-text-default: #e3e5e7; + --ds-color-neutral-contrast-default: #000000; + --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-article-background-default: #001e38; + --ds-color-article-background-subtle: #002547; + --ds-color-article-surface-default: #00305c; + --ds-color-article-surface-hover: #003d74; + --ds-color-article-surface-active: #004b8d; + --ds-color-article-border-subtle: #00519a; + --ds-color-article-border-default: #307fc7; + --ds-color-article-border-strong: #70a7d8; + --ds-color-article-base-default: #4c91cf; + --ds-color-article-base-hover: #6fa6d8; + --ds-color-article-base-active: #92bce1; + --ds-color-article-text-subtle: #70a7d8; + --ds-color-article-text-default: #d7e7f4; + --ds-color-article-contrast-default: #000000; + --ds-color-article-contrast-subtle: #0d1924; + --ds-color-alert-background-default: #3a0c13; + --ds-color-alert-background-subtle: #490f18; + --ds-color-alert-surface-default: #5d131e; + --ds-color-alert-surface-hover: #751826; + --ds-color-alert-surface-active: #8f1d2e; + --ds-color-alert-border-subtle: #9b2032; + --ds-color-alert-border-default: #e23b55; + --ds-color-alert-border-strong: #ec8292; + --ds-color-alert-base-default: #e02f4a; + --ds-color-alert-base-hover: #e75e73; + --ds-color-alert-base-active: #ec8191; + --ds-color-alert-text-subtle: #ec8292; + --ds-color-alert-text-default: #fadee2; + --ds-color-alert-contrast-default: #000000; + --ds-color-alert-contrast-subtle: #000000; + --ds-color-success-background-default: #022306; + --ds-color-success-background-subtle: #022c08; + --ds-color-success-surface-default: #03380a; + --ds-color-success-surface-hover: #03470d; + --ds-color-success-surface-active: #04570f; + --ds-color-success-border-subtle: #045f11; + --ds-color-success-border-default: #178f28; + --ds-color-success-border-strong: #62b36d; + --ds-color-success-base-default: #138d24; + --ds-color-success-base-hover: #3ca14b; + --ds-color-success-base-active: #66b571; + --ds-color-success-text-subtle: #62b36d; + --ds-color-success-text-default: #d4ead7; + --ds-color-success-contrast-default: #000000; + --ds-color-success-contrast-subtle: #010501; + --ds-color-danger-background-default: #3d0909; + --ds-color-danger-background-subtle: #4c0b0b; + --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-surface-hover: #7a1111; + --ds-color-danger-surface-active: #941515; + --ds-color-danger-border-subtle: #a11717; + --ds-color-danger-border-default: #cf5252; + --ds-color-danger-border-strong: #df8b8b; + --ds-color-danger-base-default: #d76e6e; + --ds-color-danger-base-hover: #df8b8b; + --ds-color-danger-base-active: #e7a8a8; + --ds-color-danger-text-subtle: #df8b8b; + --ds-color-danger-text-default: #f6dfdf; + --ds-color-danger-contrast-default: #000000; + --ds-color-danger-contrast-subtle: #271414; + --ds-color-info-background-default: #031e33; + --ds-color-info-background-subtle: #032641; + --ds-color-info-surface-default: #043154; + --ds-color-info-surface-hover: #063f6a; + --ds-color-info-surface-active: #074d82; + --ds-color-info-border-subtle: #07538d; + --ds-color-info-border-default: #2480c7; + --ds-color-info-border-strong: #69a8d8; + --ds-color-info-base-default: #2d85c9; + --ds-color-info-base-hover: #519ad2; + --ds-color-info-base-active: #77b0dc; + --ds-color-info-text-subtle: #69a8d8; + --ds-color-info-text-default: #d6e7f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #050e15; + --ds-color-warning-background-default: #221c08; + --ds-color-warning-background-subtle: #2b240a; + --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-surface-hover: #483c10; + --ds-color-warning-surface-active: #584913; + --ds-color-warning-border-subtle: #5f5015; + --ds-color-warning-border-default: #927a20; + --ds-color-warning-border-strong: #bf9f2a; + --ds-color-warning-base-default: #bc612a; + --ds-color-warning-base-hover: #c87d4f; + --ds-color-warning-base-active: #d39772; + --ds-color-warning-text-subtle: #d2946e; + --ds-color-warning-text-default: #f2e2d7; + --ds-color-warning-contrast-default: #000000; + --ds-color-warning-contrast-subtle: #070301; + --ds-color-focus-inner: #141d29; + --ds-color-focus-outer: #e3e4e9; + --ds-global-blue-1: #031e33; + --ds-global-blue-2: #032641; + --ds-global-blue-3: #043154; + --ds-global-blue-4: #063f6a; + --ds-global-blue-5: #074d82; + --ds-global-blue-6: #07538d; + --ds-global-blue-7: #2480c7; + --ds-global-blue-8: #69a8d8; + --ds-global-blue-9: #2d85c9; + --ds-global-blue-10: #519ad2; + --ds-global-blue-11: #77b0dc; + --ds-global-blue-12: #69a8d8; + --ds-global-blue-13: #d6e7f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #050e15; + --ds-global-green-1: #022306; + --ds-global-green-2: #022c08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #03470d; + --ds-global-green-5: #04570f; + --ds-global-green-6: #045f11; + --ds-global-green-7: #178f28; + --ds-global-green-8: #62b36d; + --ds-global-green-9: #138d24; + --ds-global-green-10: #3ca14b; + --ds-global-green-11: #66b571; + --ds-global-green-12: #62b36d; + --ds-global-green-13: #d4ead7; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #010501; + --ds-global-orange-1: #2f1607; + --ds-global-orange-2: #3b1c09; + --ds-global-orange-3: #4d250c; + --ds-global-orange-4: #612f0f; + --ds-global-orange-5: #773913; + --ds-global-orange-6: #823e14; + --ds-global-orange-7: #bd632d; + --ds-global-orange-8: #d2946e; + --ds-global-orange-9: #bc612a; + --ds-global-orange-10: #c87d4f; + --ds-global-orange-11: #d39772; + --ds-global-orange-12: #d2946e; + --ds-global-orange-13: #f2e2d7; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #070301; + --ds-global-purple-1: #27133a; + --ds-global-purple-2: #31184a; + --ds-global-purple-3: #401f5f; + --ds-global-purple-4: #512879; + --ds-global-purple-5: #633094; + --ds-global-purple-6: #6a379c; + --ds-global-purple-7: #916cb6; + --ds-global-purple-8: #b297cb; + --ds-global-purple-9: #b49acd; + --ds-global-purple-10: #a282c1; + --ds-global-purple-11: #906ab5; + --ds-global-purple-12: #b297cb; + --ds-global-purple-13: #e9e2f0; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18151c; + --ds-global-red-1: #3d0909; + --ds-global-red-2: #4c0b0b; + --ds-global-red-3: #610e0e; + --ds-global-red-4: #7a1111; + --ds-global-red-5: #941515; + --ds-global-red-6: #a11717; + --ds-global-red-7: #cf5252; + --ds-global-red-8: #df8b8b; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #df8b8b; + --ds-global-red-11: #e7a8a8; + --ds-global-red-12: #df8b8b; + --ds-global-red-13: #f6dfdf; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221c08; + --ds-global-yellow-2: #2b240a; + --ds-global-yellow-3: #382f0c; + --ds-global-yellow-4: #483c10; + --ds-global-yellow-5: #584913; + --ds-global-yellow-6: #5f5015; + --ds-global-yellow-7: #927a20; + --ds-global-yellow-8: #bf9f2a; + --ds-global-yellow-9: #4a3e10; + --ds-global-yellow-10: #615115; + --ds-global-yellow-11: #77631a; + --ds-global-yellow-12: #bf9f2a; + --ds-global-yellow-13: #f1e5b9; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #dbd9d0; + + color-scheme: dark; + } + + @media (prefers-color-scheme: dark) { + [data-color-scheme="auto"] { + --ds-color-company-background-default: #0f1a3f; + --ds-color-company-background-subtle: #16224a; + --ds-color-company-surface-default: #222e54; + --ds-color-company-surface-hover: #313b5f; + --ds-color-company-surface-active: #3f496a; + --ds-color-company-border-subtle: #475070; + --ds-color-company-border-default: #747b93; + --ds-color-company-border-strong: #9ca1b2; + --ds-color-company-base-default: #a6abba; + --ds-color-company-base-hover: #9096a9; + --ds-color-company-base-active: #7a8197; + --ds-color-company-text-subtle: #9ca1b2; + --ds-color-company-text-default: #e3e4e9; + --ds-color-company-contrast-default: #000000; + --ds-color-company-contrast-subtle: #1b1c1e; + --ds-color-person-background-default: #042212; + --ds-color-person-background-subtle: #052b17; + --ds-color-person-surface-default: #06371d; + --ds-color-person-surface-hover: #084625; + --ds-color-person-surface-active: #195535; + --ds-color-person-border-subtle: #225b3d; + --ds-color-person-border-default: #5a856e; + --ds-color-person-border-strong: #8ba999; + --ds-color-person-base-default: #96b1a3; + --ds-color-person-base-hover: #7c9e8c; + --ds-color-person-base-active: #618a74; + --ds-color-person-text-subtle: #8ba999; + --ds-color-person-text-default: #dee7e2; + --ds-color-person-contrast-default: #000000; + --ds-color-person-contrast-subtle: #181c1a; + --ds-color-neutral-background-default: #141d29; + --ds-color-neutral-background-subtle: #1a2534; + --ds-color-neutral-surface-default: #243041; + --ds-color-neutral-surface-hover: #323e4d; + --ds-color-neutral-surface-active: #404b5a; + --ds-color-neutral-border-subtle: #475260; + --ds-color-neutral-border-default: #747c87; + --ds-color-neutral-border-strong: #9da2aa; + --ds-color-neutral-base-default: #a6acb2; + --ds-color-neutral-base-hover: #90979f; + --ds-color-neutral-base-active: #7a828c; + --ds-color-neutral-text-subtle: #9da2aa; + --ds-color-neutral-text-default: #e3e5e7; + --ds-color-neutral-contrast-default: #000000; + --ds-color-neutral-contrast-subtle: #1b1c1d; + --ds-color-article-background-default: #001e38; + --ds-color-article-background-subtle: #002547; + --ds-color-article-surface-default: #00305c; + --ds-color-article-surface-hover: #003d74; + --ds-color-article-surface-active: #004b8d; + --ds-color-article-border-subtle: #00519a; + --ds-color-article-border-default: #307fc7; + --ds-color-article-border-strong: #70a7d8; + --ds-color-article-base-default: #4c91cf; + --ds-color-article-base-hover: #6fa6d8; + --ds-color-article-base-active: #92bce1; + --ds-color-article-text-subtle: #70a7d8; + --ds-color-article-text-default: #d7e7f4; + --ds-color-article-contrast-default: #000000; + --ds-color-article-contrast-subtle: #0d1924; + --ds-color-alert-background-default: #3a0c13; + --ds-color-alert-background-subtle: #490f18; + --ds-color-alert-surface-default: #5d131e; + --ds-color-alert-surface-hover: #751826; + --ds-color-alert-surface-active: #8f1d2e; + --ds-color-alert-border-subtle: #9b2032; + --ds-color-alert-border-default: #e23b55; + --ds-color-alert-border-strong: #ec8292; + --ds-color-alert-base-default: #e02f4a; + --ds-color-alert-base-hover: #e75e73; + --ds-color-alert-base-active: #ec8191; + --ds-color-alert-text-subtle: #ec8292; + --ds-color-alert-text-default: #fadee2; + --ds-color-alert-contrast-default: #000000; + --ds-color-alert-contrast-subtle: #000000; + --ds-color-success-background-default: #022306; + --ds-color-success-background-subtle: #022c08; + --ds-color-success-surface-default: #03380a; + --ds-color-success-surface-hover: #03470d; + --ds-color-success-surface-active: #04570f; + --ds-color-success-border-subtle: #045f11; + --ds-color-success-border-default: #178f28; + --ds-color-success-border-strong: #62b36d; + --ds-color-success-base-default: #138d24; + --ds-color-success-base-hover: #3ca14b; + --ds-color-success-base-active: #66b571; + --ds-color-success-text-subtle: #62b36d; + --ds-color-success-text-default: #d4ead7; + --ds-color-success-contrast-default: #000000; + --ds-color-success-contrast-subtle: #010501; + --ds-color-danger-background-default: #3d0909; + --ds-color-danger-background-subtle: #4c0b0b; + --ds-color-danger-surface-default: #610e0e; + --ds-color-danger-surface-hover: #7a1111; + --ds-color-danger-surface-active: #941515; + --ds-color-danger-border-subtle: #a11717; + --ds-color-danger-border-default: #cf5252; + --ds-color-danger-border-strong: #df8b8b; + --ds-color-danger-base-default: #d76e6e; + --ds-color-danger-base-hover: #df8b8b; + --ds-color-danger-base-active: #e7a8a8; + --ds-color-danger-text-subtle: #df8b8b; + --ds-color-danger-text-default: #f6dfdf; + --ds-color-danger-contrast-default: #000000; + --ds-color-danger-contrast-subtle: #271414; + --ds-color-info-background-default: #031e33; + --ds-color-info-background-subtle: #032641; + --ds-color-info-surface-default: #043154; + --ds-color-info-surface-hover: #063f6a; + --ds-color-info-surface-active: #074d82; + --ds-color-info-border-subtle: #07538d; + --ds-color-info-border-default: #2480c7; + --ds-color-info-border-strong: #69a8d8; + --ds-color-info-base-default: #2d85c9; + --ds-color-info-base-hover: #519ad2; + --ds-color-info-base-active: #77b0dc; + --ds-color-info-text-subtle: #69a8d8; + --ds-color-info-text-default: #d6e7f4; + --ds-color-info-contrast-default: #000000; + --ds-color-info-contrast-subtle: #050e15; + --ds-color-warning-background-default: #221c08; + --ds-color-warning-background-subtle: #2b240a; + --ds-color-warning-surface-default: #382f0c; + --ds-color-warning-surface-hover: #483c10; + --ds-color-warning-surface-active: #584913; + --ds-color-warning-border-subtle: #5f5015; + --ds-color-warning-border-default: #927a20; + --ds-color-warning-border-strong: #bf9f2a; + --ds-color-warning-base-default: #bc612a; + --ds-color-warning-base-hover: #c87d4f; + --ds-color-warning-base-active: #d39772; + --ds-color-warning-text-subtle: #d2946e; + --ds-color-warning-text-default: #f2e2d7; + --ds-color-warning-contrast-default: #000000; + --ds-color-warning-contrast-subtle: #070301; + --ds-color-focus-inner: #141d29; + --ds-color-focus-outer: #e3e4e9; + --ds-global-blue-1: #031e33; + --ds-global-blue-2: #032641; + --ds-global-blue-3: #043154; + --ds-global-blue-4: #063f6a; + --ds-global-blue-5: #074d82; + --ds-global-blue-6: #07538d; + --ds-global-blue-7: #2480c7; + --ds-global-blue-8: #69a8d8; + --ds-global-blue-9: #2d85c9; + --ds-global-blue-10: #519ad2; + --ds-global-blue-11: #77b0dc; + --ds-global-blue-12: #69a8d8; + --ds-global-blue-13: #d6e7f4; + --ds-global-blue-contrast-1: #000000; + --ds-global-blue-contrast-2: #050e15; + --ds-global-green-1: #022306; + --ds-global-green-2: #022c08; + --ds-global-green-3: #03380a; + --ds-global-green-4: #03470d; + --ds-global-green-5: #04570f; + --ds-global-green-6: #045f11; + --ds-global-green-7: #178f28; + --ds-global-green-8: #62b36d; + --ds-global-green-9: #138d24; + --ds-global-green-10: #3ca14b; + --ds-global-green-11: #66b571; + --ds-global-green-12: #62b36d; + --ds-global-green-13: #d4ead7; + --ds-global-green-contrast-1: #000000; + --ds-global-green-contrast-2: #010501; + --ds-global-orange-1: #2f1607; + --ds-global-orange-2: #3b1c09; + --ds-global-orange-3: #4d250c; + --ds-global-orange-4: #612f0f; + --ds-global-orange-5: #773913; + --ds-global-orange-6: #823e14; + --ds-global-orange-7: #bd632d; + --ds-global-orange-8: #d2946e; + --ds-global-orange-9: #bc612a; + --ds-global-orange-10: #c87d4f; + --ds-global-orange-11: #d39772; + --ds-global-orange-12: #d2946e; + --ds-global-orange-13: #f2e2d7; + --ds-global-orange-contrast-1: #000000; + --ds-global-orange-contrast-2: #070301; + --ds-global-purple-1: #27133a; + --ds-global-purple-2: #31184a; + --ds-global-purple-3: #401f5f; + --ds-global-purple-4: #512879; + --ds-global-purple-5: #633094; + --ds-global-purple-6: #6a379c; + --ds-global-purple-7: #916cb6; + --ds-global-purple-8: #b297cb; + --ds-global-purple-9: #b49acd; + --ds-global-purple-10: #a282c1; + --ds-global-purple-11: #906ab5; + --ds-global-purple-12: #b297cb; + --ds-global-purple-13: #e9e2f0; + --ds-global-purple-contrast-1: #000000; + --ds-global-purple-contrast-2: #18151c; + --ds-global-red-1: #3d0909; + --ds-global-red-2: #4c0b0b; + --ds-global-red-3: #610e0e; + --ds-global-red-4: #7a1111; + --ds-global-red-5: #941515; + --ds-global-red-6: #a11717; + --ds-global-red-7: #cf5252; + --ds-global-red-8: #df8b8b; + --ds-global-red-9: #d76e6e; + --ds-global-red-10: #df8b8b; + --ds-global-red-11: #e7a8a8; + --ds-global-red-12: #df8b8b; + --ds-global-red-13: #f6dfdf; + --ds-global-red-contrast-1: #000000; + --ds-global-red-contrast-2: #271414; + --ds-global-yellow-1: #221c08; + --ds-global-yellow-2: #2b240a; + --ds-global-yellow-3: #382f0c; + --ds-global-yellow-4: #483c10; + --ds-global-yellow-5: #584913; + --ds-global-yellow-6: #5f5015; + --ds-global-yellow-7: #927a20; + --ds-global-yellow-8: #bf9f2a; + --ds-global-yellow-9: #4a3e10; + --ds-global-yellow-10: #615115; + --ds-global-yellow-11: #77631a; + --ds-global-yellow-12: #bf9f2a; + --ds-global-yellow-13: #f1e5b9; + --ds-global-yellow-contrast-1: #ffffff; + --ds-global-yellow-contrast-2: #dbd9d0; + + color-scheme: dark; + } + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.typography.primary { + :root, + [data-ds-typography="primary"] { + --ds-font-family: Inter; + --ds-font-weight-medium: 500; + --ds-font-weight-semibold: 600; + --ds-font-weight-regular: 400; + --ds-heading-2xl-font-weight: 500; + --ds-heading-2xl-line-height: 1.3; + --ds-heading-2xl-font-size: 3.75rem; + --ds-heading-2xl-letter-spacing: -1%; + --ds-heading-xl-font-weight: 500; + --ds-heading-xl-line-height: 1.3; + --ds-heading-xl-font-size: 3rem; + --ds-heading-xl-letter-spacing: -1%; + --ds-heading-lg-font-weight: 500; + --ds-heading-lg-line-height: 1.3; + --ds-heading-lg-font-size: 2.25rem; + --ds-heading-lg-letter-spacing: -0.5%; + --ds-heading-md-font-weight: 500; + --ds-heading-md-line-height: 1.3; + --ds-heading-md-font-size: 1.875rem; + --ds-heading-md-letter-spacing: -0.25%; + --ds-heading-sm-font-weight: 500; + --ds-heading-sm-line-height: 1.3; + --ds-heading-sm-font-size: 1.5rem; + --ds-heading-sm-letter-spacing: 0%; + --ds-heading-xs-font-weight: 500; + --ds-heading-xs-line-height: 1.3; + --ds-heading-xs-font-size: 1.3125rem; + --ds-heading-xs-letter-spacing: 0.15%; + --ds-heading-2xs-font-weight: 500; + --ds-heading-2xs-line-height: 1.3; + --ds-heading-2xs-font-size: 1.125rem; + --ds-heading-2xs-letter-spacing: 0.15%; + --ds-body-xl-font-weight: 400; + --ds-body-xl-line-height: 1.5; + --ds-body-xl-font-size: 1.5rem; + --ds-body-xl-letter-spacing: 0.5%; + --ds-body-lg-font-weight: 400; + --ds-body-lg-line-height: 1.5; + --ds-body-lg-font-size: 1.3125rem; + --ds-body-lg-letter-spacing: 0.5%; + --ds-body-md-font-weight: 400; + --ds-body-md-line-height: 1.5; + --ds-body-md-font-size: 1.125rem; + --ds-body-md-letter-spacing: 0.5%; + --ds-body-sm-font-weight: 400; + --ds-body-sm-line-height: 1.5; + --ds-body-sm-font-size: 1rem; + --ds-body-sm-letter-spacing: 0.25%; + --ds-body-xs-font-weight: 400; + --ds-body-xs-line-height: 1.5; + --ds-body-xs-font-size: 0.875rem; + --ds-body-xs-letter-spacing: 0.15%; + --ds-body-short-xl-font-weight: 400; + --ds-body-short-xl-line-height: 1.3; + --ds-body-short-xl-font-size: 1.5rem; + --ds-body-short-xl-letter-spacing: 0.5%; + --ds-body-short-lg-font-weight: 400; + --ds-body-short-lg-line-height: 1.3; + --ds-body-short-lg-font-size: 1.3125rem; + --ds-body-short-lg-letter-spacing: 0.5%; + --ds-body-short-md-font-weight: 400; + --ds-body-short-md-line-height: 1.3; + --ds-body-short-md-font-size: 1.125rem; + --ds-body-short-md-letter-spacing: 0.5%; + --ds-body-short-sm-font-weight: 400; + --ds-body-short-sm-line-height: 1.3; + --ds-body-short-sm-font-size: 1rem; + --ds-body-short-sm-letter-spacing: 0.25%; + --ds-body-short-xs-font-weight: 400; + --ds-body-short-xs-line-height: 1.3; + --ds-body-short-xs-font-size: 0.875rem; + --ds-body-short-xs-letter-spacing: 0.15%; + --ds-body-long-xl-font-weight: 400; + --ds-body-long-xl-line-height: 1.7; + --ds-body-long-xl-font-size: 1.5rem; + --ds-body-long-xl-letter-spacing: 0.5%; + --ds-body-long-lg-font-weight: 400; + --ds-body-long-lg-line-height: 1.7; + --ds-body-long-lg-font-size: 1.3125rem; + --ds-body-long-lg-letter-spacing: 0.5%; + --ds-body-long-md-font-weight: 400; + --ds-body-long-md-line-height: 1.7; + --ds-body-long-md-font-size: 1.125rem; + --ds-body-long-md-letter-spacing: 0.5%; + --ds-body-long-sm-font-weight: 400; + --ds-body-long-sm-line-height: 1.7; + --ds-body-long-sm-font-size: 1rem; + --ds-body-long-sm-letter-spacing: 0.25%; + --ds-body-long-xs-font-weight: 400; + --ds-body-long-xs-line-height: 1.7; + --ds-body-long-xs-font-size: 0.875rem; + --ds-body-long-xs-letter-spacing: 0.15%; + --ds-line-height-sm: 1.3; + --ds-line-height-md: 1.5; + --ds-line-height-lg: 1.7; + --ds-font-size-1: 0.75rem; + --ds-font-size-2: 0.8125rem; + --ds-font-size-3: 0.875rem; + --ds-font-size-4: 1rem; + --ds-font-size-5: 1.125rem; + --ds-font-size-6: 1.3125rem; + --ds-font-size-7: 1.5rem; + --ds-font-size-8: 1.875rem; + --ds-font-size-9: 2.25rem; + --ds-font-size-10: 3rem; + --ds-font-size-11: 3.75rem; + --ds-letter-spacing-1: -1%; + --ds-letter-spacing-2: -0.5%; + --ds-letter-spacing-3: -0.25%; + --ds-letter-spacing-4: -0.15%; + --ds-letter-spacing-5: 0%; + --ds-letter-spacing-6: 0.15%; + --ds-letter-spacing-7: 0.25%; + --ds-letter-spacing-8: 0.5%; + --ds-letter-spacing-9: 1.5%; + --ds-altinn-ds-main: Inter; + --ds-altinn-ds-bold: 500; + --ds-altinn-ds-extra-bold: 600; + --ds-altinn-ds-regular: 400; + } +} +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color { + :root { + --ds-color-accent-background-default: var(--ds-color-company-background-default); + --ds-color-accent-background-subtle: var(--ds-color-company-background-subtle); + --ds-color-accent-surface-default: var(--ds-color-company-surface-default); + --ds-color-accent-surface-hover: var(--ds-color-company-surface-hover); + --ds-color-accent-surface-active: var(--ds-color-company-surface-active); + --ds-color-accent-border-subtle: var(--ds-color-company-border-subtle); + --ds-color-accent-border-default: var(--ds-color-company-border-default); + --ds-color-accent-border-strong: var(--ds-color-company-border-strong); + --ds-color-accent-base-default: var(--ds-color-company-base-default); + --ds-color-accent-base-hover: var(--ds-color-company-base-hover); + --ds-color-accent-base-active: var(--ds-color-company-base-active); + --ds-color-accent-text-subtle: var(--ds-color-company-text-subtle); + --ds-color-accent-text-default: var(--ds-color-company-text-default); + --ds-color-accent-contrast-default: var(--ds-color-company-contrast-default); + --ds-color-accent-contrast-subtle: var(--ds-color-company-contrast-subtle); + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color { + [data-color="alert"] { + --ds-color-background-default: var(--ds-color-alert-background-default); + --ds-color-background-subtle: var(--ds-color-alert-background-subtle); + --ds-color-surface-default: var(--ds-color-alert-surface-default); + --ds-color-surface-hover: var(--ds-color-alert-surface-hover); + --ds-color-surface-active: var(--ds-color-alert-surface-active); + --ds-color-border-subtle: var(--ds-color-alert-border-subtle); + --ds-color-border-default: var(--ds-color-alert-border-default); + --ds-color-border-strong: var(--ds-color-alert-border-strong); + --ds-color-base-default: var(--ds-color-alert-base-default); + --ds-color-base-hover: var(--ds-color-alert-base-hover); + --ds-color-base-active: var(--ds-color-alert-base-active); + --ds-color-text-subtle: var(--ds-color-alert-text-subtle); + --ds-color-text-default: var(--ds-color-alert-text-default); + --ds-color-contrast-default: var(--ds-color-alert-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-alert-contrast-subtle); + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color { + [data-color="article"] { + --ds-color-background-default: var(--ds-color-article-background-default); + --ds-color-background-subtle: var(--ds-color-article-background-subtle); + --ds-color-surface-default: var(--ds-color-article-surface-default); + --ds-color-surface-hover: var(--ds-color-article-surface-hover); + --ds-color-surface-active: var(--ds-color-article-surface-active); + --ds-color-border-subtle: var(--ds-color-article-border-subtle); + --ds-color-border-default: var(--ds-color-article-border-default); + --ds-color-border-strong: var(--ds-color-article-border-strong); + --ds-color-base-default: var(--ds-color-article-base-default); + --ds-color-base-hover: var(--ds-color-article-base-hover); + --ds-color-base-active: var(--ds-color-article-base-active); + --ds-color-text-subtle: var(--ds-color-article-text-subtle); + --ds-color-text-default: var(--ds-color-article-text-default); + --ds-color-contrast-default: var(--ds-color-article-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-article-contrast-subtle); + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color { + :root, + [data-color-scheme], + [data-color="company"] { + --ds-color-background-default: var(--ds-color-company-background-default); + --ds-color-background-subtle: var(--ds-color-company-background-subtle); + --ds-color-surface-default: var(--ds-color-company-surface-default); + --ds-color-surface-hover: var(--ds-color-company-surface-hover); + --ds-color-surface-active: var(--ds-color-company-surface-active); + --ds-color-border-subtle: var(--ds-color-company-border-subtle); + --ds-color-border-default: var(--ds-color-company-border-default); + --ds-color-border-strong: var(--ds-color-company-border-strong); + --ds-color-base-default: var(--ds-color-company-base-default); + --ds-color-base-hover: var(--ds-color-company-base-hover); + --ds-color-base-active: var(--ds-color-company-base-active); + --ds-color-text-subtle: var(--ds-color-company-text-subtle); + --ds-color-text-default: var(--ds-color-company-text-default); + --ds-color-contrast-default: var(--ds-color-company-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-company-contrast-subtle); + } +} + +/** + * These files are generated from design tokens defind using Token Studio + */ + +@layer ds.theme.color { + [data-color="person"] { + --ds-color-background-default: var(--ds-color-person-background-default); + --ds-color-background-subtle: var(--ds-color-person-background-subtle); + --ds-color-surface-default: var(--ds-color-person-surface-default); + --ds-color-surface-hover: var(--ds-color-person-surface-hover); + --ds-color-surface-active: var(--ds-color-person-surface-active); + --ds-color-border-subtle: var(--ds-color-person-border-subtle); + --ds-color-border-default: var(--ds-color-person-border-default); + --ds-color-border-strong: var(--ds-color-person-border-strong); + --ds-color-base-default: var(--ds-color-person-base-default); + --ds-color-base-hover: var(--ds-color-person-base-hover); + --ds-color-base-active: var(--ds-color-person-base-active); + --ds-color-text-subtle: var(--ds-color-person-text-subtle); + --ds-color-text-default: var(--ds-color-person-text-default); + --ds-color-contrast-default: var(--ds-color-person-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-person-contrast-subtle); + } +} + +@layer ds.theme.color { + [data-color="neutral"] { + --ds-color-background-default: var(--ds-color-neutral-background-default); + --ds-color-background-subtle: var(--ds-color-neutral-background-subtle); + --ds-color-surface-default: var(--ds-color-neutral-surface-default); + --ds-color-surface-hover: var(--ds-color-neutral-surface-hover); + --ds-color-surface-active: var(--ds-color-neutral-surface-active); + --ds-color-border-subtle: var(--ds-color-neutral-border-subtle); + --ds-color-border-default: var(--ds-color-neutral-border-default); + --ds-color-border-strong: var(--ds-color-neutral-border-strong); + --ds-color-base-default: var(--ds-color-neutral-base-default); + --ds-color-base-hover: var(--ds-color-neutral-base-hover); + --ds-color-base-active: var(--ds-color-neutral-base-active); + --ds-color-text-subtle: var(--ds-color-neutral-text-subtle); + --ds-color-text-default: var(--ds-color-neutral-text-default); + --ds-color-contrast-default: var(--ds-color-neutral-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle); + } + [data-color="success"] { + --ds-color-background-default: var(--ds-color-success-background-default); + --ds-color-background-subtle: var(--ds-color-success-background-subtle); + --ds-color-surface-default: var(--ds-color-success-surface-default); + --ds-color-surface-hover: var(--ds-color-success-surface-hover); + --ds-color-surface-active: var(--ds-color-success-surface-active); + --ds-color-border-subtle: var(--ds-color-success-border-subtle); + --ds-color-border-default: var(--ds-color-success-border-default); + --ds-color-border-strong: var(--ds-color-success-border-strong); + --ds-color-base-default: var(--ds-color-success-base-default); + --ds-color-base-hover: var(--ds-color-success-base-hover); + --ds-color-base-active: var(--ds-color-success-base-active); + --ds-color-text-subtle: var(--ds-color-success-text-subtle); + --ds-color-text-default: var(--ds-color-success-text-default); + --ds-color-contrast-default: var(--ds-color-success-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle); + } + [data-color="warning"] { + --ds-color-background-default: var(--ds-color-warning-background-default); + --ds-color-background-subtle: var(--ds-color-warning-background-subtle); + --ds-color-surface-default: var(--ds-color-warning-surface-default); + --ds-color-surface-hover: var(--ds-color-warning-surface-hover); + --ds-color-surface-active: var(--ds-color-warning-surface-active); + --ds-color-border-subtle: var(--ds-color-warning-border-subtle); + --ds-color-border-default: var(--ds-color-warning-border-default); + --ds-color-border-strong: var(--ds-color-warning-border-strong); + --ds-color-base-default: var(--ds-color-warning-base-default); + --ds-color-base-hover: var(--ds-color-warning-base-hover); + --ds-color-base-active: var(--ds-color-warning-base-active); + --ds-color-text-subtle: var(--ds-color-warning-text-subtle); + --ds-color-text-default: var(--ds-color-warning-text-default); + --ds-color-contrast-default: var(--ds-color-warning-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle); + } + [data-color="danger"] { + --ds-color-background-default: var(--ds-color-danger-background-default); + --ds-color-background-subtle: var(--ds-color-danger-background-subtle); + --ds-color-surface-default: var(--ds-color-danger-surface-default); + --ds-color-surface-hover: var(--ds-color-danger-surface-hover); + --ds-color-surface-active: var(--ds-color-danger-surface-active); + --ds-color-border-subtle: var(--ds-color-danger-border-subtle); + --ds-color-border-default: var(--ds-color-danger-border-default); + --ds-color-border-strong: var(--ds-color-danger-border-strong); + --ds-color-base-default: var(--ds-color-danger-base-default); + --ds-color-base-hover: var(--ds-color-danger-base-hover); + --ds-color-base-active: var(--ds-color-danger-base-active); + --ds-color-text-subtle: var(--ds-color-danger-text-subtle); + --ds-color-text-default: var(--ds-color-danger-text-default); + --ds-color-contrast-default: var(--ds-color-danger-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle); + } + [data-color="info"] { + --ds-color-background-default: var(--ds-color-info-background-default); + --ds-color-background-subtle: var(--ds-color-info-background-subtle); + --ds-color-surface-default: var(--ds-color-info-surface-default); + --ds-color-surface-hover: var(--ds-color-info-surface-hover); + --ds-color-surface-active: var(--ds-color-info-surface-active); + --ds-color-border-subtle: var(--ds-color-info-border-subtle); + --ds-color-border-default: var(--ds-color-info-border-default); + --ds-color-border-strong: var(--ds-color-info-border-strong); + --ds-color-base-default: var(--ds-color-info-base-default); + --ds-color-base-hover: var(--ds-color-info-base-hover); + --ds-color-base-active: var(--ds-color-info-base-active); + --ds-color-text-subtle: var(--ds-color-info-text-subtle); + --ds-color-text-default: var(--ds-color-info-text-default); + --ds-color-contrast-default: var(--ds-color-info-contrast-default); + --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle); + } +} diff --git a/lib/css/altinn-theme.css b/lib/css/altinn-theme.css new file mode 100644 index 00000000..3428ad5e --- /dev/null +++ b/lib/css/altinn-theme.css @@ -0,0 +1,46 @@ +[data-theme="default"] { + background-color: var(--ds-color-background-default); +} + +[data-theme="subtle"] { + background-color: var(--ds-color-background-subtle); +} + +[data-theme="surface-default"] { + background-color: var(--ds-color-surface-default); +} + +[data-theme="surface-hover"] { + background-color: var(--ds-color-surface-hover); +} + +[data-theme="surface-active"] { + background-color: var(--ds-color-surface-active); +} + +[data-theme="border-subtle"] { + background-color: var(--ds-color-border-subtle); +} + +[data-theme="border-default"] { + background-color: var(--ds-color-border-default); +} + +[data-theme="border-strong"] { + background-color: var(--ds-color-border-strong); +} + +[data-theme="base-default"] { + background-color: var(--ds-color-base-default); + color: var(--ds-color-contrast-default); +} + +[data-theme="base-hover"] { + background-color: var(--ds-color-base-hover); + color: var(--ds-color-contrast-default); +} + +[data-theme="base-active"] { + background-color: var(--ds-color-base-active); + color: var(--ds-color-contrast-default); +} diff --git a/lib/css/colors.css b/lib/css/colors.css deleted file mode 100644 index afd9dc7c..00000000 --- a/lib/css/colors.css +++ /dev/null @@ -1,113 +0,0 @@ -:root { - --colors-neutral-1: #ffffff; - --colors-neutral-2: #f3f4f5; - --colors-neutral-3: #e2e3e5; - --colors-neutral-4: #cfd1d4; - --colors-neutral-5: #bec1c6; - --colors-neutral-6: #b9bcc1; - --colors-neutral-7: #7c818b; - --colors-neutral-8: #464e5c; - --colors-neutral-9: #212b3b; - --colors-neutral-10: #333c4a; - --colors-neutral-11: #464e5c; - --colors-neutral-12: #5d6470; - --colors-neutral-13: #232c3c; - - --colors-company-1: #ffffff; - --colors-company-2: #e9f5ff; - --colors-company-3: #d3eafd; - --colors-company-4: #a5d6fb; - --colors-company-5: #78c1f9; - --colors-company-6: #4badf7; - --colors-company-7: #1e98f5; - --colors-company-8: #4086d7; - --colors-company-9: #111d46; - --colors-company-10: #364163; - --colors-company-11: #166aac; - --colors-company-12: #5a637f; - --colors-company-13: #1e2950; - - --colors-person-1: #ffffff; - --colors-person-2: #eaf7ef; - --colors-person-3: #a8f3d0; - --colors-person-4: #6ee7b7; - --colors-person-5: #34d399; - --colors-person-6: #10b981; - --colors-person-7: #079669; - --colors-person-8: #347659; - --colors-person-9: #084826; - --colors-person-10: #076046; - --colors-person-11: #3b6d52; - --colors-person-12: #3b6d52; - --colors-person-13: #06331b; - - /* link **/ - - --link-base-default: #2a4dd0; - --link-base-hover: #213ca3; - --link-base-active: #192d7b; - - /* global */ - - --global-background-default: var(--colors-neutral-2); - --global-background-subtle: var(--colors-neutral-1); - --global-base-default: var(--colors-neutral-9); - --global-base-hover: var(--colors-neutral-10); - --global-base-active: var(--colors-neutral-11); - --global-border-default: var(--colors-neutral-7); - --global-border-strong: var(--colors-neutral-8); - --global-border-subtle: var(--colors-neutral-6); - --global-surface-active: var(--colors-neutral-5); - --global-surface-default: var(--colors-neutral-3); - --global-surface-hover: var(--colors-neutral-4); - --global-text-default: var(--colors-neutral-13); - --global-text-subtle: var(--colors-neutral-12); - - /* neutral */ - - --neutral-background-default: var(--colors-neutral-1); - --neutral-background-subtle: var(--colors-neutral-2); - --neutral-base-default: var(--colors-neutral-9); - --neutral-base-hover: var(--colors-neutral-10); - --neutral-base-active: var(--colors-neutral-11); - --neutral-border-default: var(--colors-neutral-7); - --neutral-border-strong: var(--colors-neutral-8); - --neutral-border-subtle: var(--colors-neutral-6); - --neutral-surface-active: var(--colors-neutral-5); - --neutral-surface-default: var(--colors-neutral-3); - --neutral-surface-hover: var(--colors-neutral-4); - --neutral-text-default: var(--colors-neutral-13); - --neutral-text-subtle: var(--colors-neutral-12); - - /* company */ - - --company-background-default: var(--colors-company-1); - --company-background-subtle: var(--colors-company-2); - --company-base-default: var(--colors-company-9); - --company-base-hover: var(--colors-company-10); - --company-base-active: var(--colors-company-11); - --company-border-default: var(--colors-company-7); - --company-border-strong: var(--colors-company-8); - --company-border-subtle: var(--colors-company-6); - --company-surface-active: var(--colors-company-5); - --company-surface-default: var(--colors-company-3); - --company-surface-hover: var(--colors-company-4); - --company-text-default: var(--colors-company-13); - --company-text-subtle: var(--colors-company-12); - - /* person */ - - --person-background-default: var(--colors-person-1); - --person-background-subtle: var(--colors-person-2); - --person-base-default: var(--colors-person-9); - --person-base-hover: var(--colors-person-10); - --person-base-active: var(--colors-person-11); - --person-border-default: var(--colors-person-7); - --person-border-strong: var(--colors-person-8); - --person-border-subtle: var(--colors-person-6); - --person-surface-active: var(--colors-person-5); - --person-surface-default: var(--colors-person-3); - --person-surface-hover: var(--colors-person-4); - --person-text-default: var(--colors-person-13); - --person-text-subtle: var(--colors-person-12); -} diff --git a/lib/css/global.css b/lib/css/global.css index 0f7b359c..42d46a24 100644 --- a/lib/css/global.css +++ b/lib/css/global.css @@ -1,14 +1,11 @@ @import "https://altinncdn.no/fonts/inter/inter.css"; -@import "./colors.css"; -@import "./theme-global.css"; -@import "./theme-global-dark.css"; -@import "./theme-article.css"; -@import "./theme-neutral.css"; -@import "./theme-company.css"; -@import "./theme-person.css"; -@import "./theme.css"; +@import "./altinn-ds.css"; +@import "./altinn-ds-overrides.css"; +@import "./altinn-theme.css"; -@import "../tokens/design-tokens-build/altinn-ds.css"; +@import "./shadow.css"; +@import "./padding.css"; +@import "./spacing.css"; * { font-family: "Inter", sans-serif; diff --git a/lib/css/padding.css b/lib/css/padding.css new file mode 100644 index 00000000..c5b7f036 --- /dev/null +++ b/lib/css/padding.css @@ -0,0 +1,23 @@ +[data-padding="1"] { + padding: var(--ds-spacing-1); +} + +[data-padding="2"] { + padding: var(--ds-spacing-2); +} + +[data-padding="3"] { + padding: var(--ds-spacing-3); +} + +[data-padding="4"] { + padding: var(--ds-spacing-4); +} + +[data-padding="5"] { + padding: var(--ds-spacing-5); +} + +[data-padding="6"] { + padding: var(--ds-spacing-6); +} diff --git a/lib/css/shadow.css b/lib/css/shadow.css new file mode 100644 index 00000000..bd641538 --- /dev/null +++ b/lib/css/shadow.css @@ -0,0 +1,19 @@ +[data-shadow="xs"] { + box-shadow: var(--ds-shadow-xs); +} + +[data-shadow="sm"] { + box-shadow: var(--ds-shadow-sm); +} + +[data-shadow="md"] { + box-shadow: var(--ds-shadow-md); +} + +[data-shadow="lg"] { + box-shadow: var(--ds-shadow-lg); +} + +[data-shadow="xl"] { + box-shadow: var(--ds-shadow-xl); +} diff --git a/lib/css/shadows.css b/lib/css/shadows.css deleted file mode 100644 index aac9ae16..00000000 --- a/lib/css/shadows.css +++ /dev/null @@ -1,7 +0,0 @@ -:root { - --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12); - --ds-shadow-sm: 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); - --ds-shadow-md: 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); - --ds-shadow-lg: 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); - --ds-shadow-xl: 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/lib/css/spacing.css b/lib/css/spacing.css new file mode 100644 index 00000000..c6d3268d --- /dev/null +++ b/lib/css/spacing.css @@ -0,0 +1,31 @@ +[data-spacing="1"] { + gap: var(--ds-spacing-1); +} + +[data-spacing="2"] { + gap: var(--ds-spacing-2); +} + +[data-spacing="3"] { + gap: var(--ds-spacing-3); +} + +[data-spacing="4"] { + gap: var(--ds-spacing-4); +} + +[data-spacing="5"] { + gap: var(--ds-spacing-5); +} + +[data-spacing="6"] { + gap: var(--ds-spacing-6); +} + +[data-spacing="7"] { + gap: var(--ds-spacing-7); +} + +[data-spacing="8"] { + gap: var(--ds-spacing-8); +} diff --git a/lib/css/theme-article.css b/lib/css/theme-article.css deleted file mode 100644 index 9da33b3c..00000000 --- a/lib/css/theme-article.css +++ /dev/null @@ -1,15 +0,0 @@ -[data-theme="article"] { - --theme-background-default: var(--neutral-background-subtle); - --theme-background-subtle: var(--neutral-background-default); - --theme-base-active: var(--link-base-active); - --theme-base-default: var(--link-base-default); - --theme-base-hover: var(--link-base-hover); - --theme-border-default: var(--neutral-border-default); - --theme-border-strong: var(--neutral-border-strong); - --theme-border-subtle: var(--neutral-border-subtle); - --theme-surface-active: var(--company-surface-active); - --theme-surface-default: var(--company-surface-default); - --theme-surface-hover: var(--neutral-surface-hover); - --theme-text-default: var(--neutral-text-default); - --theme-text-subtle: var(--neutral-text-subtle); -} diff --git a/lib/css/theme-company.css b/lib/css/theme-company.css deleted file mode 100644 index 7bca596f..00000000 --- a/lib/css/theme-company.css +++ /dev/null @@ -1,15 +0,0 @@ -[data-theme="company"] { - --theme-background-default: var(--company-background-default); - --theme-background-subtle: var(--company-background-subtle); - --theme-base-active: var(--company-base-active); - --theme-base-default: var(--company-base-default); - --theme-base-hover: var(--company-base-hover); - --theme-border-default: var(--company-border-default); - --theme-border-strong: var(--company-border-strong); - --theme-border-subtle: var(--company-border-subtle); - --theme-surface-active: var(--company-surface-active); - --theme-surface-default: var(--company-surface-default); - --theme-surface-hover: var(--company-surface-hover); - --theme-text-default: var(--company-text-default); - --theme-text-subtle: var(--company-text-subtle); -} diff --git a/lib/css/theme-global-dark.css b/lib/css/theme-global-dark.css deleted file mode 100644 index dd685b7f..00000000 --- a/lib/css/theme-global-dark.css +++ /dev/null @@ -1,19 +0,0 @@ -[data-theme="global-dark"] { - --theme-background-default: var(--company-base-hover); - --theme-background-subtle: var(--company-base-default); - - --theme-base-default: var(--company-background-subtle); - --theme-base-hover: var(--company-base-hover); - --theme-base-active: var(--company-base-active); - - --theme-border-default: var(--neutral-border-default); - --theme-border-strong: var(--neutral-border-strong); - --theme-border-subtle: var(--neutral-border-subtle); - - --theme-surface-default: var(--company-base-default); - --theme-surface-hover: var(--company-base-hover); - --theme-surface-active: var(--company-base-active); - - --theme-text-default: var(--company-background-default); - --theme-text-subtle: var(--company-background-subtle); -} diff --git a/lib/css/theme-global.css b/lib/css/theme-global.css deleted file mode 100644 index 02be4c28..00000000 --- a/lib/css/theme-global.css +++ /dev/null @@ -1,15 +0,0 @@ -[data-theme="global"] { - --theme-background-default: var(--neutral-background-subtle); - --theme-background-subtle: var(--neutral-background-default); - --theme-base-active: var(--company-base-active); - --theme-base-default: var(--company-base-default); - --theme-base-hover: var(--company-base-hover); - --theme-border-default: var(--neutral-border-default); - --theme-border-strong: var(--neutral-border-strong); - --theme-border-subtle: var(--neutral-border-subtle); - --theme-surface-active: var(--neutral-surface-active); - --theme-surface-default: var(--neutral-surface-default); - --theme-surface-hover: var(--neutral-surface-hover); - --theme-text-default: var(--neutral-text-default); - --theme-text-subtle: var(--neutral-text-subtle); -} diff --git a/lib/css/theme-neutral.css b/lib/css/theme-neutral.css deleted file mode 100644 index 49879d1c..00000000 --- a/lib/css/theme-neutral.css +++ /dev/null @@ -1,15 +0,0 @@ -[data-theme="neutral"] { - --theme-background-default: var(--neutral-background-default); - --theme-background-subtle: var(--neutral-background-subtle); - --theme-base-active: var(--neutral-base-active); - --theme-base-default: var(--neutral-base-default); - --theme-base-hover: var(--neutral-base-hover); - --theme-border-default: var(--neutral-border-default); - --theme-border-strong: var(--neutral-border-strong); - --theme-border-subtle: var(--neutral-border-subtle); - --theme-surface-active: var(--neutral-surface-active); - --theme-surface-default: var(--neutral-surface-default); - --theme-surface-hover: var(--neutral-surface-hover); - --theme-text-default: var(--neutral-text-default); - --theme-text-subtle: var(--neutral-text-subtle); -} diff --git a/lib/css/theme-person.css b/lib/css/theme-person.css deleted file mode 100644 index d1f5e045..00000000 --- a/lib/css/theme-person.css +++ /dev/null @@ -1,15 +0,0 @@ -[data-theme="person"] { - --theme-background-default: var(--person-background-default); - --theme-background-subtle: var(--person-background-subtle); - --theme-base-active: var(--person-base-active); - --theme-base-default: var(--person-base-default); - --theme-base-hover: var(--person-base-hover); - --theme-border-default: var(--person-border-default); - --theme-border-strong: var(--person-border-strong); - --theme-border-subtle: var(--person-border-subtle); - --theme-surface-active: var(--person-surface-active); - --theme-surface-default: var(--person-surface-default); - --theme-surface-hover: var(--person-surface-hover); - --theme-text-default: var(--person-text-default); - --theme-text-subtle: var(--person-text-subtle); -} diff --git a/lib/css/theme.css b/lib/css/theme.css deleted file mode 100644 index c81a9800..00000000 --- a/lib/css/theme.css +++ /dev/null @@ -1,22 +0,0 @@ -html { - --theme-background-default: var(--global-background-default); - --theme-background-subtle: var(--global-background-subtle); - --theme-base-active: var(--global-base-active); - --theme-base-default: var(--global-base-default); - --theme-base-hover: var(--global-base-hover); - --theme-border-default: var(--global-border-default); - --theme-border-strong: var(--global-border-strong); - --theme-border-subtle: var(--global-border-subtle); - --theme-surface-active: var(--global-surface-active); - --theme-surface-default: var(--global-surface-default); - --theme-surface-hover: var(--global-surface-hover); - --theme-text-default: var(--global-text-default); - --theme-text-subtle: var(--global-text-subtle); -} -html[data-theme] { - background: var(--theme-background-subtle); - color: var(--neutral-text-default); -} -body { - background-color: inherit; -} diff --git a/lib/stories/Color/MenuItem.stories.tsx b/lib/stories/Color/MenuItem.stories.tsx deleted file mode 100644 index 15613c43..00000000 --- a/lib/stories/Color/MenuItem.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import type { Meta } from '@storybook/react'; -import { LayoutBase, type LayoutTheme, MenuBase, MenuItem, type MenuItemColor, MetaItem } from '../../components'; - -const meta = { - title: 'Demo/Color/MenuItem', - component: MenuItem, - tags: ['autodocs'], - parameters: {}, - args: { - id: 'inbox', - }, -} satisfies Meta; - -export default meta; -export const ThemesAndColors = () => { - const themes: LayoutTheme[] = ['global', 'neutral', 'company', 'person', 'global-dark']; - const colors: MenuItemColor[] = ['neutral', 'subtle', 'strong', 'company', 'person']; - - return ( -
- {themes.map((theme) => { - return ( -
- - - {colors.map((color) => { - return ( -
- - {theme + '/' + color} -
- ); - })} - - -
- ); - })} -
- ); -}; diff --git a/lib/stories/Color/Swatches.stories.tsx b/lib/stories/Color/Swatches.stories.tsx deleted file mode 100644 index 81f5413f..00000000 --- a/lib/stories/Color/Swatches.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { Swatches } from './Swatches'; - -const meta = { - title: 'Demo/Color/Swatches', - component: Swatches, - tags: ['autodocs'], - parameters: { - layout: 'fullscreen', - }, - args: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: {}, -}; diff --git a/lib/stories/Color/Swatches.tsx b/lib/stories/Color/Swatches.tsx deleted file mode 100644 index 524903e1..00000000 --- a/lib/stories/Color/Swatches.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import type { LayoutTheme } from '../../components'; -import colors from './colors.json'; -import styles from './swatches.module.css'; - -const themes = { - neutral: 'Neutral', - person: 'Person', - company: 'Company', -}; - -export interface SwatchesProps { - theme: LayoutTheme; -} - -export const SwatchesList = ({ theme }: SwatchesProps) => { - return ( -
- {Object.keys(colors).map((key) => { - const style = { - backgroundColor: 'var(--theme-' + key + ')', - }; - - return ( -
-
- {key} -
- ); - })} -
- ); -}; - -export const Swatches = ({ theme }: SwatchesProps) => { - return ( -
- {Object.keys(themes).map((key) => { - return ; - })} -
- ); -}; diff --git a/lib/stories/Color/colors.json b/lib/stories/Color/colors.json deleted file mode 100644 index 18eab8e5..00000000 --- a/lib/stories/Color/colors.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "background-default": { - "$type": "color", - "$value": "{color..1}" - }, - "background-subtle": { - "$type": "color", - "$value": "{color..2}" - }, - "surface-default": { - "$type": "color", - "$value": "{color..3}" - }, - "surface-hover": { - "$type": "color", - "$value": "{color..4}" - }, - "surface-active": { - "$type": "color", - "$value": "{color..5}" - }, - "border-subtle": { - "$type": "color", - "$value": "{color..6}" - }, - "border-default": { - "$type": "color", - "$value": "{color..7}" - }, - "border-strong": { - "$type": "color", - "$value": "{color..8}" - }, - "base-default": { - "$type": "color", - "$value": "{color..9}" - }, - "base-hover": { - "$type": "color", - "$value": "{color..10}" - }, - "base-active": { - "$type": "color", - "$value": "{color..11}" - }, - "text-subtle": { - "$type": "color", - "$value": "{color..12}" - }, - "text-default": { - "$type": "color", - "$value": "{color..13}" - }, - "contrast-default": { - "$type": "color", - "$value": "{color..contrast-1}" - }, - "contrast-subtle": { - "$type": "color", - "$value": "{color..contrast-2}" - } -} diff --git a/lib/stories/Color/swatches.module.css b/lib/stories/Color/swatches.module.css deleted file mode 100644 index 42b1cf9d..00000000 --- a/lib/stories/Color/swatches.module.css +++ /dev/null @@ -1,14 +0,0 @@ -.swatch { - width: 4rem; - height: 4rem; - border: 1px solid; -} - -.row { - display: flex; -} - -.col { - display: flex; - flex-direction: column; -} diff --git a/lib/stories/Demo/ActivityLogPage.tsx b/lib/stories/Demo/ActivityLogPage.tsx deleted file mode 100644 index fb8a2b10..00000000 --- a/lib/stories/Demo/ActivityLogPage.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, {useState} from 'react'; -import { PageBase, Toolbar, BookmarksSection, PageHeader, Heading, TimelineBase, TimelineSection, Typography } from '../../components'; -import { useAppContext } from './'; -import { bookmarks } from './data'; -export const ActivityLogPage = () => { - const { accountMenu } = useAppContext(); - - const [expandedId, setExpandedId] = useState(''); - - const onToggle = (id: string) => { - setExpandedId((prevState) => { - if (prevState === id) { - return ''; - } - return id; - }); - }; - - return ( - - - Aktivitetslogg - -

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

 -

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

 -

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

 -

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.

 - - - ); - - return ( - - - - onToggle(expandedId) - }} - removeButton={{ - label: "Slett bokmerke" - }} - items={bookmarks} - expandedId={expandedId} - onToggle={onToggle} - /> - - ); -}; diff --git a/lib/stories/Demo/AdminLayout.tsx b/lib/stories/Demo/AdminLayout.tsx deleted file mode 100644 index 44900d28..00000000 --- a/lib/stories/Demo/AdminLayout.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { LayoutBody, LayoutSidebar, LayoutContent, type LayoutProps, Menu } from '../../components'; -import { sitemap } from './data'; -import { useAppContext } from './'; -export const AdminLayout = ({ children }: LayoutProps) => { - const { currentAccount, pageId, setPageId } = useAppContext(); - - const parentId = 'admin'; - const parent = sitemap.find((item) => item.id === parentId); - const menuItems = parent?.items?.map((item) => { - const id = (parentId === item.id && parentId) || [parentId, item.id].join('/'); - - if (id === parentId) { - return { - ...item, - avatar: currentAccount, - selected: pageId === id, - onClick: () => setPageId(id), - }; - } - - return { - ...item, - id, - selected: pageId === id, - onClick: () => setPageId(id), - }; - }); - - return ( - - - - - {children} - - ); -}; diff --git a/lib/stories/Demo/AdminPage.tsx b/lib/stories/Demo/AdminPage.tsx deleted file mode 100644 index 02b8046f..00000000 --- a/lib/stories/Demo/AdminPage.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { PageBase } from '../../components'; -import { useAppContext, ActivityLogPage } from './'; -export const AdminPage = () => { - const { pageId } = useAppContext(); - - const parents = pageId?.split('/'); - const sectionId = parents?.[1]; - - if (sectionId === "log") { - return - } - - return ( - -

SectionId: {sectionId}

- - ); -}; diff --git a/lib/stories/Demo/App.stories.tsx b/lib/stories/Demo/App.stories.tsx deleted file mode 100644 index 3458b454..00000000 --- a/lib/stories/Demo/App.stories.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { App } from './App'; -import { accounts } from './data'; - -const meta = { - title: 'Demo/Navigation', - component: App, - tags: ['autodocs'], - parameters: { - layout: 'fullscreen', - }, - args: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - theme: 'global', - }, -}; - -export const Categories: Story = { - args: { - theme: 'global', - accounts, - accountId: accounts[0].id, - pageId: 'category', - }, -}; - -export const CategorySection: Story = { - args: { - theme: 'global', - accounts, - accountId: accounts[0].id, - pageId: 'category/personale', - }, -}; - -export const CategoryPage: Story = { - args: { - theme: 'global', - accounts, - accountId: accounts[0].id, - pageId: 'category/personale/lonn', - }, -}; - -export const UserInbox: Story = { - args: { - theme: 'person', - accounts, - accountId: accounts[0].id, - pageId: 'inbox', - }, -}; - -export const UserDialog: Story = { - args: { - theme: 'person', - accounts, - accountId: accounts[0].id, - pageId: 'inbox/inbox/1', - }, -}; - -export const UserBookmarks: Story = { - args: { - theme: 'person', - accounts, - accountId: accounts[0].id, - pageId: 'inbox/bookmarks', - }, -}; - -export const UserProfile: Story = { - args: { - theme: 'person', - accounts, - accountId: accounts[0].id, - pageId: 'profile', - }, -}; - -export const CompanyInbox: Story = { - args: { - theme: 'company', - accounts, - accountId: accounts[1].id, - pageId: 'inbox', - }, -}; - -export const CompanyProfile: Story = { - args: { - theme: 'company', - accounts, - accountId: accounts[1].id, - pageId: 'profile', - }, -}; - -export const CompanyAdmin: Story = { - args: { - theme: 'company', - accounts, - accountId: accounts[1].id, - pageId: 'admin', - }, -}; diff --git a/lib/stories/Demo/AppLayout.tsx b/lib/stories/Demo/AppLayout.tsx deleted file mode 100644 index 184e4efa..00000000 --- a/lib/stories/Demo/AppLayout.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { type ReactNode, useMemo } from 'react'; -import { LayoutBase, LayoutBody, LayoutContent, Header, Footer, type LayoutProps } from '../../components'; -import { InboxLayout, CategoryLayout, ProfileLayout, AdminLayout, useAppContext } from './'; -import { header, footer, sitemap, loginMenu } from './data'; -import { useSearch } from "./hooks" - -interface AppLayoutTypeProps { - parentId: string | undefined; - children: ReactNode; -} - -export const AppLayoutType = ({ parentId, children }: AppLayoutTypeProps) => { - switch (parentId) { - case 'inbox': - return {children}; - case 'profile': - return {children}; - case 'admin': - return {children}; - case 'category': - return {children}; - default: - return ( - - {children} - - ); - } -}; - -export const AppLayout = ({ children }: LayoutProps) => { - const { accounts, currentAccount, setAccountId, pageId, setPageId } = useAppContext(); - - const menuItems = sitemap.map((item) => { - return { - ...item, - onClick: () => setPageId?.(item.id), - }; - }); - - const parents = pageId?.split('/'); - const parentId = parents?.[0]; - - const menu = currentAccount - ? { - items: menuItems, - currentAccount, - accounts, - onSelectAccount: setAccountId, - } - : loginMenu; - - - const theme = useMemo(() => { - if (parentId === 'inbox') { - return currentAccount?.type; - } else if (parentId === 'profile' || parentId === "admin") { - return 'neutral'; - } else { - return 'global'; - } - }, [parentId, currentAccount]); - - const search = useSearch({parentId}) - - return ( - -
- {children} -