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
Altinn · Jan 15, 2025 · 4b33a4d · 4b33a4d
1 parent d47277c
commit 4b33a4d
Show file tree

Hide file tree

Showing 324 changed files with 5,551 additions and 4,042 deletions.
diff --git a/.storybook/StoryDecorator.tsx b/.storybook/StoryDecorator.tsx
@@ -1,22 +1,28 @@
-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[];
   theme: string;
   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 (
-      <RootProvider>
-          <div className={styles.preview} data-theme={theme}>
-              <div id="story-in-story-decorator-root" className={styles.component}>{children}</div>
-          </div>
-      </RootProvider>
+    <RootProvider>
+      <div
+        className={styles.preview}
+        data-color={layoutColor}
+        data-theme={layoutTheme}
+      >
+        <div id="story-in-story-decorator-root" className={styles.component}>
+          {children}
+        </div>
+      </div>
+    </RootProvider>
   );
 };
diff --git a/.storybook/ThemeProvider.tsx b/.storybook/ThemeProvider.tsx
diff --git 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 (
-                <StoryDecorator tags={tags} theme={globals?.theme}>
-                    <Story />
-                </StoryDecorator>
-            );
-        },
-        withThemeByDataAttribute({
-            themes: {
-                global: "global",
-                neutral: "neutral",
-                company: "company",
-                person: "person",
-            },
-            defaultTheme: "neutral",
-        }),
-    ],
+  },
+  decorators: [
+    (Story: StoryFn, data) => {
+      const { tags, globals } = data;
+      return (
+        <StoryDecorator tags={tags} theme={globals?.theme}>
+          <Story />
+        </StoryDecorator>
+      );
+    },
+    withThemeByDataAttribute({
+      themes: {
+        global: "global",
+        neutral: "neutral",
+        company: "company",
+        person: "person",
+      },
+      defaultTheme: "company",
+    }),
+  ],
 };
 
-
-export default preview;
+export default preview;
diff --git a/.storybook/theme.module.css b/.storybook/theme.module.css
diff --git 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
@@ -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
@@ -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 (
-    <ListBase theme={theme} spacing="xs">
+    <ListBase color={color} spacing={1}>
       {items.map((item) => (
         <AccessAreaListItem {...item} key={item.id} {...item} />
       ))}

diff --git a/lib/components/AccessPackageList/AccessPackageList.tsx b/lib/components/AccessPackageList/AccessPackageList.tsx
@@ -5,7 +5,7 @@ export interface AccessPackageListProps extends Pick<ListBaseProps, 'spacing' |
   items: AccessPackageListItemProps[];
 }
 
-export const AccessPackageList = ({ items, spacing = 'sm', ...props }: AccessPackageListProps) => {
+export const AccessPackageList = ({ items, spacing = 2, ...props }: AccessPackageListProps) => {
   return (
     <ListBase spacing={spacing} {...props}>
       {items.map((item) => (

diff --git 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
@@ -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
@@ -39,14 +39,14 @@ export type AutocompleteItemProps =
 export const AutocompleteItem = ({ type, ...props }: AutocompleteItemProps) => {
   switch (type) {
     case 'scope':
-      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} color="transparent" tabIndex={-1} />;
+      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} theme="transparent" tabIndex={-1} />;
     case 'bookmark':
-      return <BookmarksListItem {...(props as BookmarksListItemProps)} color="transparent" size="sm" tabIndex={-1} />;
+      return <BookmarksListItem {...(props as BookmarksListItemProps)} theme="transparent" size="sm" tabIndex={-1} />;
     case 'dialog':
-      return <DialogListItem {...(props as DialogListItemProps)} color="transparent" size="sm" tabIndex={-1} />;
+      return <DialogListItem {...(props as DialogListItemProps)} theme="transparent" size="sm" tabIndex={-1} />;
     case 'information':
-      return <ListItem {...(props as ListItemProps)} color="transparent" tabIndex={-1} disabled />;
+      return <ListItem {...(props as ListItemProps)} theme="transparent" tabIndex={-1} disabled />;
     default:
-      return <ListItem {...(props as ListItemProps)} color="transparent" size="sm" tabIndex={-1} />;
+      return <ListItem {...(props as ListItemProps)} theme="transparent" size="sm" tabIndex={-1} />;
   }
 };
diff --git 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
@@ -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
@@ -21,13 +21,15 @@ export const Default: Story = {
 export const Alert: Story = {
   args: {
     color: 'alert',
+    variant: 'strong',
   },
 };
 
 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
@@ -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 (
-    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+    <span className={cx(styles.badge, className)} data-color={color} data-variant={variant} data-size={size}>
       <span className={styles.label}>{label || children}</span>
     </span>
   );

diff --git 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
@@ -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={<IconButton variant="outline" size="sm" icon="chevron-up" onClick={onToggle} />}
           {...rest}
         />
         {expanded && (
-          <Section padding="lg" spacing="lg">
+          <Section padding={4} spacing={4}>
             <QueryLabel params={params} />
             {titleField && <TextField {...titleField} name="title" value={formData?.title || ''} onChange={onChange} />}
             {(saveButton || removeButton) && (
-              <Flex as="footer" direction="row" spacing="sm">
+              <Flex as="footer" direction="row" spacing={2}>
                 {saveButton && <Button {...saveButton} />}
                 {removeButton && <Button {...removeButton} variant="outline" />}
               </Flex>