@altinn/altinn-components 0.3.0 → 0.4.1

package/.storybook/main.ts

@@ -1,7 +1,7 @@
 import { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../lib/components/**/*.stories.@(ts|tsx)"],
+  stories: ["../lib/components/**/*.stories.@(ts|tsx)", "../lib/stories/**/*.stories.@(ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.4.1](https://github.com/Altinn/altinn-components/compare/v0.4.0...v0.4.1) (2024-11-11)
+
+
+### Bug Fixes
+
+* css changes to dialog ([#43](https://github.com/Altinn/altinn-components/issues/43)) ([79e3287](https://github.com/Altinn/altinn-components/commit/79e3287dc2efbce8ba7a9c0b94f955514289c0d3))
+
+## [0.4.0](https://github.com/Altinn/altinn-components/compare/v0.3.0...v0.4.0) (2024-11-08)
+
+
+### Features
+
+* add footer component ([#40](https://github.com/Altinn/altinn-components/issues/40)) ([bdf5c0c](https://github.com/Altinn/altinn-components/commit/bdf5c0cd68c374ac5fe83536033074289f379abe))
+
 ## [0.3.0](https://github.com/Altinn/altinn-components/compare/v0.2.2...v0.3.0) (2024-11-08)
 
 

package/lib/components/Dialog/DialogListItem.tsx

@@ -84,7 +84,6 @@ export const DialogListItem = ({
   attachmentsCount,
   title,
   summary,
-  onClick,
   ...rest
 }: DialogListItemProps) => {
   return (

package/lib/components/Dialog/DialogNav.tsx

@@ -6,7 +6,7 @@ import { ContextMenu, type ContextMenuProps } from '../ContextMenu/ContextMenu.t
 import { MetaTimestamp } from '../Meta';
 import { DialogStatus, type DialogStatusProps } from './DialogStatus';
 import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
-import styles from './dialog.module.css';
+import styles from './dialogNav.module.css';
 
 export interface DialogBackButtonProps {
   as?: ElementType;

package/lib/components/Dialog/dialogNav.module.css

@@ -0,0 +1,12 @@
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+}
+
+.action {
+  display: flex;
+  align-items: center;
+  column-gap: .5rem;
+}

package/lib/components/Footer/Footer.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+
+const meta = {
+  title: 'Footer/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    address: 'Postboks 1382 Vika, 0114 Oslo.',
+    menu: {
+      items: [
+        {
+          id: '1',
+          title: 'Om Altinn',
+        },
+        {
+          id: '2',
+          title: 'Driftsmeldinger',
+        },
+        {
+          id: '3',
+          title: 'Personvern',
+        },
+        {
+          id: '4',
+          title: 'Tilgjengelighet',
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import { FooterAddress } from './FooterAddress';
+import { FooterBase } from './FooterBase';
+import { FooterLogo } from './FooterLogo';
+import { FooterMenu, type FooterMenuProps } from './FooterMenu';
+
+export interface FooterProps {
+  address: string;
+  menu: FooterMenuProps;
+}
+
+export const Footer = ({ address, menu }: FooterProps) => {
+  return (
+    <FooterBase>
+      <FooterAddress>
+        <FooterLogo />
+        {address}
+      </FooterAddress>
+      <FooterMenu {...menu} />
+    </FooterBase>
+  );
+};

package/lib/components/Footer/FooterAddress.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerAddress.module.css';
+
+export interface FooterAddressProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterAddress = ({ className, children }: FooterAddressProps) => {
+  return <address className={cx(styles.address, className)}>{children}</address>;
+};

package/lib/components/Footer/FooterBase.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerBase.module.css';
+
+export interface FooterBaseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterBase = ({ className, children }: FooterBaseProps) => {
+  return (
+    <footer className={cx(styles.footer, className)}>
+      <div className={styles.grid}>{children} </div>
+    </footer>
+  );
+};

package/lib/components/Footer/FooterLogo.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import { DigdirLogomark } from '../Header/DigdirLogomark.tsx';
+import styles from './footerLogo.module.css';
+
+export interface FooterLogoProps {
+  className?: string;
+  title?: string;
+}
+
+export const FooterLogo = ({ className, title = 'Digdir' }: FooterLogoProps) => {
+  return (
+    <div className={cx(styles.logo, className)}>
+      <DigdirLogomark className={styles.symbol} />
+      <span>{title}</span>
+    </div>
+  );
+};

package/lib/components/Footer/FooterMenu.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+import { MenuBase } from '../Menu/';
+import styles from './footerMenu.module.css';
+
+export interface FooterMenuProps {
+  className?: string;
+  items: FooterLinkProps[];
+}
+
+export interface FooterLinkProps {
+  as?: ElementType;
+  id?: string;
+  href?: string;
+  title?: string;
+  className?: string;
+}
+
+export const FooterLink = ({ as, className, title, ...rest }: FooterLinkProps) => {
+  const Component = as || 'a';
+
+  return (
+    <Component className={cx(styles.link, className)} {...rest}>
+      {title}
+    </Component>
+  );
+};
+
+export const FooterMenu = ({ className, items = [] }: FooterMenuProps) => {
+  return (
+    <MenuBase className={cx(styles.menu, className)}>
+      <ul className={styles.list}>
+        {items.map((item) => {
+          return (
+            <li key={item.id}>
+              <FooterLink {...item} />
+            </li>
+          );
+        })}
+      </ul>
+    </MenuBase>
+  );
+};

package/lib/components/Footer/footerAddress.module.css

@@ -0,0 +1,8 @@
+.address {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  font-style: normal;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}

package/lib/components/Footer/footerBase.module.css

@@ -0,0 +1,28 @@
+.footer {
+  border-top: 1px solid;
+  border-color: var(--theme-border-subtle);
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+
+  padding: 1rem 0;
+  margin: 2rem 1rem;
+}
+
+.grid {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    padding: 0 1rem;
+    flex-direction: row;
+  }
+}

package/lib/components/Footer/footerLogo.module.css

@@ -0,0 +1,12 @@
+.logo {
+  display: inline-flex;
+  align-items: center;
+  column-gap: .5em;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.symbol {
+  width: 1rem;
+  height: 1rem;
+}

package/lib/components/Footer/footerMenu.module.css

@@ -0,0 +1,30 @@
+.menu {
+  position: relative;
+  font-size: .875rem;
+  line-height: 1.5;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .list {
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    column-gap: .5rem;
+    width: auto;
+  }
+}
+
+.list .item:hover {
+  background-color: var(--global-base-hover);
+}
+
+.link {
+  color: inherit;
+  text-decoration: underline;
+}

package/lib/components/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/lib/components/Header/Header.tsx

@@ -12,11 +12,6 @@ import styles from './header.module.css';
 
 export type HeaderExpandedType = 'search' | 'menu' | null;
 
-export interface HeaderAccountProps {
-  type?: string;
-  name?: string;
-}
-
 export interface HeaderProps {
   menu: GlobalMenuProps;
   search?: HeaderSearchProps;

package/lib/components/History/HistoryAttachments.tsx

@@ -0,0 +1,22 @@
+import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
+import { MetaItem } from '../Meta';
+
+export interface HistoryAttachmentsProps {
+  title?: string;
+  items?: AttachmentLinkProps[];
+}
+
+export const HistoryAttachments = ({ title = 'Attachments', items }: HistoryAttachmentsProps) => {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <section>
+      <MetaItem as="h2" size="xs">
+        {title}
+      </MetaItem>
+      <AttachmentList size="lg" items={items} />
+    </section>
+  );
+};

package/lib/components/History/HistoryItem.stories.ts

@@ -9,7 +9,8 @@ const meta = {
   tags: ['autodocs'],
   parameters: {},
   args: {
-    createdAt: '2004-09-22 13:34',
+    createdAt: '2024-09-22 13:34',
+    createdAtLabel: '22. september 2024 kl 13.34',
     createdBy: {
       name: 'Eirik Horneland',
     },
@@ -26,22 +27,30 @@ export const Default: Story = {
 
 export const Attachments: Story = {
   args: {
-    attachments: [
-      {
-        label: '1-0 Castro.pdf',
-      },
-      {
-        label: '2-0 Kornvig.pdf',
-      },
-      {
-        label: '3-0 Kartum.pdf',
-      },
-      {
-        label: '3-1 Zinkernagel.pdf',
-      },
-      {
-        label: '4-1 Castro.pdf',
-      },
-    ],
+    attachments: {
+      title: '6 vedlegg',
+      items: [
+        {
+          href: '#',
+          label: '1-0 Castro.pdf',
+        },
+        {
+          href: '#',
+          label: '2-0 Kornvig.pdf',
+        },
+        {
+          href: '#',
+          label: '3-0 Kartum.pdf',
+        },
+        {
+          href: '#',
+          label: '3-1 Zinkernagel.pdf',
+        },
+        {
+          href: '#',
+          label: '4-1 Castro.pdf',
+        },
+      ],
+    },
   },
 };

package/lib/components/History/HistoryItem.tsx

@@ -1,7 +1,7 @@
-import { type AttachmentLinkProps, AttachmentList } from '../Attachment';
 import { Avatar } from '../Avatar/';
-import { MetaBase, MetaItem, MetaTimestamp } from '../Meta/';
+import { MetaBase, MetaTimestamp } from '../Meta/';
 import { Typography } from '../Typography';
+import { HistoryAttachments, type HistoryAttachmentsProps } from './HistoryAttachments';
 import { HistoryBorder } from './HistoryBorder';
 import styles from './historyItem.module.css';
 
@@ -14,8 +14,9 @@ export interface CreatedByProps {
 export interface HistoryItemProps {
   createdBy?: CreatedByProps;
   createdAt?: string;
+  createdAtLabel?: string;
   summary?: string;
-  attachments?: AttachmentLinkProps[];
+  attachments?: HistoryAttachmentsProps;
 }
 
 export const HistoryItem = ({
@@ -23,11 +24,10 @@ export const HistoryItem = ({
     type: 'person',
   },
   createdAt,
+  createdAtLabel,
   summary,
   attachments,
 }: HistoryItemProps) => {
-  const title = attachments?.length + ' vedlegg';
-
   return (
     <section className={styles.item}>
       <header className={styles.header}>
@@ -42,20 +42,12 @@ export const HistoryItem = ({
         <article className={styles.body}>
           <MetaBase>
             <MetaTimestamp datetime={createdAt} size="xs">
-              {createdBy?.name + ', '}
-              {createdAt}
+              {[createdBy?.name, createdAtLabel].join(', ')}
             </MetaTimestamp>
           </MetaBase>
           <Typography size="lg">
             <p>{summary}</p>
-            {attachments ? (
-              <section>
-                <MetaItem size="xs">{title}</MetaItem>
-                <AttachmentList items={attachments} />
-              </section>
-            ) : (
-              ''
-            )}
+            {attachments && <HistoryAttachments {...attachments} />}
           </Typography>
         </article>
       </HistoryBorder>

package/lib/components/History/HistoryList.stories.ts

@@ -16,23 +16,31 @@ const meta = {
           name: 'Eirik Horneland',
         },
         summary: 'Brann slo Glimt 4-1 på Stadion.',
-        attachments: [
-          {
-            label: '1-0 Castro.pdf',
-          },
-          {
-            label: '2-0 Kornvig.pdf',
-          },
-          {
-            label: '3-0 Kartum.pdf',
-          },
-          {
-            label: '3-1 Zinkernagel.pdf',
-          },
-          {
-            label: '4-1 Castro.pdf',
-          },
-        ],
+        attachments: {
+          title: '6 vedlegg',
+          items: [
+            {
+              href: '#',
+              label: '1-0 Castro.pdf',
+            },
+            {
+              href: '#',
+              label: '2-0 Kornvig.pdf',
+            },
+            {
+              href: '#',
+              label: '3-0 Kartum.pdf',
+            },
+            {
+              href: '#',
+              label: '3-1 Zinkernagel.pdf',
+            },
+            {
+              href: '#',
+              label: '4-1 Castro.pdf',
+            },
+          ],
+        },
       },
       {
         createdAt: '2004-09-09 13:34',
@@ -40,11 +48,15 @@ const meta = {
           name: 'Eirik Horneland',
         },
         summary: 'Brann vant 1-0 i Haugesund.',
-        attachments: [
-          {
-            label: 'Målet til Heggebø.pdf',
-          },
-        ],
+        attachments: {
+          title: '1 vedlegg',
+          items: [
+            {
+              href: '#',
+              label: 'Målet til Heggebø.pdf',
+            },
+          ],
+        },
       },
     ],
   },

package/lib/components/Layout/Layout.stories.tsx

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { ActionFooter, ActionHeader, ActionMenu, DialogListItem, ListBase, Snackbar } from '../';
-import type { HeaderProps } from '../Header';
-import type { MenuProps } from '../Menu';
+import type { FooterProps, HeaderProps, MenuProps } from '../';
 import { Layout } from './Layout';
 
 const header: HeaderProps = {
@@ -21,6 +20,34 @@ const header: HeaderProps = {
   },
 };
 
+const footer: FooterProps = {
+  address: 'Postboks 1382 Vika, 0114 Oslo.',
+  menu: {
+    items: [
+      {
+        id: '1',
+        href: '#',
+        title: 'Om Altinn',
+      },
+      {
+        id: '2',
+        href: '#',
+        title: 'Driftsmeldinger',
+      },
+      {
+        id: '3',
+        href: '#',
+        title: 'Personvern',
+      },
+      {
+        id: '4',
+        href: '#',
+        title: 'Tilgjengelighet',
+      },
+    ],
+  },
+};
+
 const menu: MenuProps = {
   groups: {},
   items: [
@@ -76,6 +103,7 @@ const meta = {
   },
   args: {
     header,
+    footer,
     sidebar: {
       menu,
     },

package/lib/components/Layout/Layout.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { LayoutBase, LayoutBody, LayoutContent, LayoutSidebar, type LayoutTheme } from '.';
+import { Footer, type FooterProps } from '../Footer';
 import { Header, type HeaderProps } from '../Header';
 import { Menu, type MenuProps } from '../Menu';
 
@@ -17,12 +18,13 @@ interface ContentProps {
 export interface LayoutProps {
   theme?: LayoutTheme;
   header?: HeaderProps;
+  footer?: FooterProps;
   sidebar: SidebarProps;
   content: ContentProps;
   children: ReactNode;
 }
 
-export const Layout = ({ theme = 'global', header, sidebar = {}, content = {}, children }: LayoutProps) => {
+export const Layout = ({ theme = 'global', header, footer, sidebar = {}, content = {}, children }: LayoutProps) => {
   const { menu, ...sideRestProps } = sidebar;
   return (
     <LayoutBase theme={theme}>
@@ -32,11 +34,11 @@ export const Layout = ({ theme = 'global', header, sidebar = {}, content = {}, c
           <LayoutSidebar hidden={sidebar?.hidden} theme={sidebar?.theme} {...sideRestProps}>
             {menu && <Menu {...menu} />}
             {sidebar?.children}
-            {sidebar?.hidden && 'HIDDEN'}
           </LayoutSidebar>
         )}
         <LayoutContent theme={content?.theme}>{children}</LayoutContent>
       </LayoutBody>
+      {footer && <Footer {...footer} />}
     </LayoutBase>
   );
 };

package/lib/components/Layout/LayoutBase.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import styles from './layoutBase.module.css';
 
-export type LayoutTheme = 'global' | 'neutral' | 'company' | 'person';
+export type LayoutTheme = 'global' | 'global-dark' | 'neutral' | 'company' | 'person';
 
 export interface LayoutBaseProps {
   theme?: LayoutTheme;

package/lib/components/Layout/index.tsx

@@ -2,3 +2,4 @@ export * from './LayoutBase';
 export * from './LayoutBody';
 export * from './LayoutContent';
 export * from './LayoutSidebar';
+export * from './Layout';

package/lib/components/Layout/layoutBase.module.css

@@ -6,18 +6,6 @@
   overflow: hidden;
 }
 
-.base[data-theme="global"] {
-  background-color: var(--neutral-background-default);
-}
-
-.base[data-theme="neutral"] {
-  background-color: var(--neutral-background-subtle);
-}
-
-.base[data-theme="person"] {
-  background-color: var(--person-background-subtle);
-}
-
-.base[data-theme="company"] {
-  background-color: var(--company-background-subtle);
+.base[data-theme] {
+  background-color: var(--theme-background-subtle);
 }

package/lib/components/Layout/layoutContent.module.css

@@ -3,6 +3,11 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 992px;
   margin: 0 auto;
 }
+
+@media (min-width: 1024px) {
+  [aria-hidden="true"] + .content {
+    padding: 0 112px;
+  }
+}

package/lib/components/Layout/layoutSidebar.module.css

@@ -8,6 +8,7 @@
 
 @media (min-width: 1024px) {
   .sidebar {
+    flex-shrink: 0;
     display: flex;
     flex-direction: column;
     width: 224px;

package/lib/components/LayoutAction/ActionFooter.stories.tsx

@@ -63,7 +63,7 @@ export const MenuAndSnackbar: Story = {
     children: (
       <>
         <Snackbar message="Snack 1" />
-        <ActionMenu {...menu} />
+        <ActionMenu {...menu} theme="global-dark" />
       </>
     ),
   },

package/lib/components/LayoutAction/ActionHeader.tsx

@@ -11,7 +11,7 @@ export interface ActionHeaderProps {
 
 export const ActionHeader = ({ hidden = false, title, dismissable = true, onDismiss }: ActionHeaderProps) => {
   return (
-    <header className={styles.header} aria-hidden={hidden}>
+    <header className={styles.header} aria-hidden={hidden} data-theme="global-dark">
       <h2 className={styles.title}>{title}</h2>
       {dismissable && <IconButton icon="x-mark" onClick={onDismiss} className={styles.dismiss} />}
     </header>

package/lib/components/LayoutAction/ActionMenu.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   tags: ['autodocs'],
   parameters: {},
   args: {
+    theme: 'global-dark',
     items: [
       {
         id: '1',

package/lib/components/LayoutAction/ActionMenu.tsx

@@ -1,13 +1,16 @@
 import { MenuBase, MenuItem, type MenuItemProps } from '../Menu';
 import styles from './actionMenu.module.css';
 
+type ActionMenuTheme = 'inherit' | 'global-dark';
+
 export interface ActionMenuProps {
+  theme?: ActionMenuTheme;
   items?: MenuItemProps[];
 }
 
-export const ActionMenu = ({ items = [] }: ActionMenuProps) => {
+export const ActionMenu = ({ theme = 'inherit', items = [] }: ActionMenuProps) => {
   return (
-    <MenuBase className={styles.menu}>
+    <MenuBase theme={theme} className={styles.menu}>
       <ul className={styles.list}>
         {items.map((item) => {
           return (

package/lib/components/LayoutAction/actionMenu.module.css

@@ -1,10 +1,16 @@
 .menu {
-  background-color: var(--global-base-default);
-  color: white;
   padding: 0 .5rem;
   border-radius: 0.375rem;
 }
 
+.menu[data-theme] {
+  background-color: var(--theme-background-subtle);
+}
+
+.menu[data-theme="inherit"] {
+  background-color: inherit;
+}
+
 .list {
   display: flex;
   flex-direction: column;
@@ -19,7 +25,3 @@
     width: auto;
   }
 }
-
-.list .item:hover {
-  background-color: var(--global-base-hover);
-}

package/lib/components/Menu/{MenuItem.stories.ts → MenuItem.stories.tsx}

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { LayoutBase, LayoutSidebar, type LayoutTheme } from '../Layout';
+import { MetaItem } from '../Meta';
+import { MenuBase } from './MenuBase';
 import { MenuItem } from './MenuItem';
+import type { MenuItemColor } from './MenuItemBase';
 
 const meta = {
   title: 'Menu/MenuItem',
@@ -130,3 +134,31 @@ export const CompanyAccount: Story = {
     description: 'Org nr.: XX.XX.XXXX',
   },
 };
+
+export const ThemesAndColors = () => {
+  const themes: LayoutTheme[] = ['global', 'neutral', 'company', 'person', 'global-dark'];
+  const colors: MenuItemColor[] = ['neutral', 'subtle', 'strong', 'company', 'person'];
+
+  return (
+    <div style={{ display: 'flex', width: '100%' }}>
+      {themes.map((theme) => {
+        return (
+          <div key={theme} style={{ flexGrow: 1 }}>
+            <LayoutBase theme={theme}>
+              <MenuBase>
+                {colors.map((color) => {
+                  return (
+                    <div key={color}>
+                      <MenuItem icon="inbox" title="Title" color={color} id="inbox" />
+                      <MetaItem>{theme + '/' + color}</MetaItem>
+                    </div>
+                  );
+                })}
+              </MenuBase>
+            </LayoutBase>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/lib/components/Menu/MenuItemBase.tsx

@@ -4,7 +4,7 @@ import { Badge, type BadgeProps } from '../Badge';
 import { Icon, type IconName } from '../Icon';
 import styles from './menuItemBase.module.css';
 
-export type MenuItemColor = 'default' | 'subtle' | 'strong' | 'company' | 'person';
+export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
 export type MenuItemSize = 'sm' | 'md' | 'lg';
 
 export interface MenuItemBaseProps {

package/lib/components/Menu/{menuItem.module.css → __menuItem.module.css}

@@ -87,8 +87,6 @@
   color: var(--theme-text-subtle);
 }
 
-/* colors */
-
 .item:hover {
   background-color: var(--theme-surface-default);
 }
@@ -107,8 +105,6 @@
   color: var(--theme-background-default);
 }
 
-/* company */
-
 .item[data-color="company"]:hover {
   background-color: var(--company-background-subtle);
 }
@@ -121,8 +117,6 @@
   background-color: var(--company-surface-default);
 }
 
-/* person */
-
 .item[data-color="person"]:hover {
   background-color: var(--person-background-subtle);
 }

package/lib/components/Menu/menuItemBase.module.css

@@ -1,5 +1,4 @@
 .item {
-  background-color: transparent;
   display: flex;
   align-items: center;
   column-gap: 4px;
@@ -43,30 +42,25 @@
 
 /* colors */
 
+.item {
+  background-color: transparent;
+  color: var(--theme-text-default);
+}
+
 .item:hover {
-  background-color: var(--theme-background-default);
+  background-color: var(--theme-surface-hover);
 }
 
 .item[aria-selected="true"] {
   background-color: var(--theme-background-default);
 }
 
-/* company */
-
-.item[data-color="company"]:hover {
-  background-color: var(--company-background-subtle);
-}
-
-.item[data-color="company"][aria-selected="true"] {
-  background-color: var(--company-surface-default);
-}
-
-/* person */
-
-.item[data-color="person"]:hover {
-  background-color: var(--person-background-subtle);
+.media[data-color="subtle"] {
+  background-color: var(--theme-background-default);
+  color: var(--theme-text-default);
 }
 
-.item[data-color="person"][aria-selected="true"] {
-  background-color: var(--person-surface-default);
+.media[data-color="strong"] {
+  background-color: var(--theme-base-default);
+  color: var(--theme-background-default);
 }

package/lib/components/Menu/menuItemMedia.module.css

@@ -29,8 +29,10 @@
 
 .media[data-color="company"] {
   background-color: var(--company-surface-default);
+  color: var(--company-text-default);
 }
 
 .media[data-color="person"] {
   background-color: var(--person-surface-default);
+  color: var(--person-text-default);
 }

package/lib/components/index.ts

@@ -6,6 +6,7 @@ export * from './Button';
 export * from './ContextMenu';
 export * from './Dialog';
 export * from './Dropdown';
+export * from './Footer';
 export * from './GlobalMenu';
 export * from './Header';
 export * from './History';

package/lib/css/global.css

@@ -2,6 +2,7 @@
 @import "./colors.css";
 @import "./shadows.css";
 @import "./theme-global.css";
+@import "./theme-global-dark.css";
 @import "./theme-article.css";
 @import "./theme-neutral.css";
 @import "./theme-company.css";

package/lib/css/theme-global-dark.css

@@ -0,0 +1,19 @@
+[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);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {