@altinn/altinn-components 0.24.6 → 0.24.8

package/dist/tokens/support-color/article.json

@@ -5,14 +5,18 @@
         "$type": "color",
         "$value": "{color.article.background-default}"
       },
-      "background-subtle": {
+      "background-tinted": {
         "$type": "color",
-        "$value": "{color.article.background-subtle}"
+        "$value": "{color.article.background-tinted}"
       },
       "surface-default": {
         "$type": "color",
         "$value": "{color.article.surface-default}"
       },
+      "surface-tinted": {
+        "$type": "color",
+        "$value": "{color.article.surface-tinted}"
+      },
       "surface-hover": {
         "$type": "color",
         "$value": "{color.article.surface-hover}"
@@ -33,6 +37,14 @@
         "$type": "color",
         "$value": "{color.article.border-strong}"
       },
+      "text-subtle": {
+        "$type": "color",
+        "$value": "{color.article.text-subtle}"
+      },
+      "text-default": {
+        "$type": "color",
+        "$value": "{color.article.text-default}"
+      },
       "base-default": {
         "$type": "color",
         "$value": "{color.article.base-default}"
@@ -45,21 +57,13 @@
         "$type": "color",
         "$value": "{color.article.base-active}"
       },
-      "text-subtle": {
-        "$type": "color",
-        "$value": "{color.article.text-subtle}"
-      },
-      "text-default": {
-        "$type": "color",
-        "$value": "{color.article.text-default}"
-      },
-      "contrast-default": {
+      "base-contrast-subtle": {
         "$type": "color",
-        "$value": "{color.article.contrast-default}"
+        "$value": "{color.article.base-contrast-subtle}"
       },
-      "contrast-subtle": {
+      "base-contrast-default": {
         "$type": "color",
-        "$value": "{color.article.contrast-subtle}"
+        "$value": "{color.article.base-contrast-default}"
       }
     }
   }

package/dist/tokens/themes/altinn-ds.json

@@ -53,13 +53,17 @@
         "$type": "color",
         "$value": "{altinn-ds.company.13}"
       },
-      "contrast-1": {
+      "14": {
         "$type": "color",
-        "$value": "{altinn-ds.company.contrast-1}"
+        "$value": "{altinn-ds.company.14}"
       },
-      "contrast-2": {
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.company.contrast-2}"
+        "$value": "{altinn-ds.company.15}"
+      },
+      "16": {
+        "$type": "color",
+        "$value": "{altinn-ds.company.16}"
       }
     },
     "person": {
@@ -115,13 +119,17 @@
         "$type": "color",
         "$value": "{altinn-ds.person.13}"
       },
-      "contrast-1": {
+      "14": {
+        "$type": "color",
+        "$value": "{altinn-ds.person.14}"
+      },
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.person.contrast-1}"
+        "$value": "{altinn-ds.person.15}"
       },
-      "contrast-2": {
+      "16": {
         "$type": "color",
-        "$value": "{altinn-ds.person.contrast-2}"
+        "$value": "{altinn-ds.person.16}"
       }
     },
     "neutral": {
@@ -177,13 +185,17 @@
         "$type": "color",
         "$value": "{altinn-ds.neutral.13}"
       },
-      "contrast-1": {
+      "14": {
         "$type": "color",
-        "$value": "{altinn-ds.neutral.contrast-1}"
+        "$value": "{altinn-ds.neutral.14}"
       },
-      "contrast-2": {
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.neutral.contrast-2}"
+        "$value": "{altinn-ds.neutral.15}"
+      },
+      "16": {
+        "$type": "color",
+        "$value": "{altinn-ds.neutral.16}"
       }
     },
     "article": {
@@ -239,13 +251,17 @@
         "$type": "color",
         "$value": "{altinn-ds.article.13}"
       },
-      "contrast-1": {
+      "14": {
+        "$type": "color",
+        "$value": "{altinn-ds.article.14}"
+      },
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.article.contrast-1}"
+        "$value": "{altinn-ds.article.15}"
       },
-      "contrast-2": {
+      "16": {
         "$type": "color",
-        "$value": "{altinn-ds.article.contrast-2}"
+        "$value": "{altinn-ds.article.16}"
       }
     },
     "alert": {
@@ -301,63 +317,69 @@
         "$type": "color",
         "$value": "{altinn-ds.alert.13}"
       },
-      "contrast-1": {
+      "14": {
+        "$type": "color",
+        "$value": "{altinn-ds.alert.14}"
+      },
+      "15": {
         "$type": "color",
-        "$value": "{altinn-ds.alert.contrast-1}"
+        "$value": "{altinn-ds.alert.15}"
       },
-      "contrast-2": {
+      "16": {
         "$type": "color",
-        "$value": "{altinn-ds.alert.contrast-2}"
+        "$value": "{altinn-ds.alert.16}"
       }
     }
   },
-  "font": {
-    "family": {
-      "$type": "fontFamilies",
-      "$value": "{altinn-ds.main}"
-    }
+  "font-family": {
+    "$type": "fontFamilies",
+    "$value": "{altinn-ds.font-family}"
   },
   "font-weight": {
     "medium": {
       "$type": "fontWeights",
-      "$value": "{altinn-ds.bold}"
+      "$value": "{altinn-ds.font-weight.medium}"
     },
     "semibold": {
       "$type": "fontWeights",
-      "$value": "{altinn-ds.extra-bold}"
+      "$value": "{altinn-ds.font-weight.semibold}"
     },
     "regular": {
       "$type": "fontWeights",
-      "$value": "{altinn-ds.regular}"
+      "$value": "{altinn-ds.font-weight.regular}"
     }
   },
   "border-radius": {
     "1": {
-      "$type": "borderRadius",
-      "$value": "min( {border-radius.base} , {border-radius.scale} *1)"
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*0.5,{border-radius.scale})"
     },
     "2": {
-      "$type": "borderRadius",
-      "$value": "min( {border-radius.base} , {border-radius.scale} *2)"
+      "$type": "dimension",
+      "$value": "min({border-radius.base},{border-radius.scale}*2)"
     },
     "3": {
-      "$type": "borderRadius",
-      "$value": "min( {border-radius.base} , {border-radius.scale} *5)"
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*2,{border-radius.scale}*5)"
     },
     "4": {
-      "$type": "borderRadius",
-      "$value": "{border-radius.base}"
+      "$type": "dimension",
+      "$value": "min({border-radius.base}*3,{border-radius.scale}*7)"
     },
     "5": {
-      "$type": "borderRadius",
+      "$type": "dimension",
+      "$value": "{border-radius.base}"
+    },
+    "6": {
+      "$type": "dimension",
       "$value": "9999"
     },
     "base": {
-      "$type": "borderRadius",
+      "$type": "dimension",
       "$value": "4"
     },
     "scale": {
-      "$type": "borderRadius",
+      "$type": "dimension",
       "$value": "4"
     }
   }

package/dist/tokens/typography/primary/altinn-ds.json

@@ -1,20 +1,22 @@
 {
   "altinn-ds": {
-    "main": {
+    "font-family": {
       "$type": "fontFamilies",
       "$value": "Inter"
     },
-    "bold": {
-      "$type": "fontWeights",
-      "$value": "Medium"
-    },
-    "extra-bold": {
-      "$type": "fontWeights",
-      "$value": "Semi bold"
-    },
-    "regular": {
-      "$type": "fontWeights",
-      "$value": "Regular"
+    "font-weight": {
+      "medium": {
+        "$type": "fontWeights",
+        "$value": "Medium"
+      },
+      "semibold": {
+        "$type": "fontWeights",
+        "$value": "SemiBold"
+      },
+      "regular": {
+        "$type": "fontWeights",
+        "$value": "Regular"
+      }
     }
   }
 }

package/dist/tokens/typography/primary.css

@@ -4,7 +4,7 @@
 
 @layer ds.theme.typography.primary {
   :root,
-  [data-ds-typography="primary"] {
+  [data-typography="primary"] {
     --ds-font-family: Inter;
     --ds-font-weight-medium: 500;
     --ds-font-weight-semibold: 600;
@@ -101,16 +101,15 @@
     --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-font-size-2: 0.875rem;
+    --ds-font-size-3: 1rem;
+    --ds-font-size-4: 1.125rem;
+    --ds-font-size-5: 1.3125rem;
+    --ds-font-size-6: 1.5rem;
+    --ds-font-size-7: 1.875rem;
+    --ds-font-size-8: 2.25rem;
+    --ds-font-size-9: 3rem;
+    --ds-font-size-10: 3.75rem;
     --ds-letter-spacing-1: -1%;
     --ds-letter-spacing-2: -0.5%;
     --ds-letter-spacing-3: -0.25%;
@@ -120,9 +119,5 @@
     --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;
   }
 }

package/dist/tokens/typography/secondary/altinn-ds.json

@@ -1,20 +1,22 @@
 {
   "altinn-ds": {
-    "main": {
+    "font-family": {
       "$type": "fontFamilies",
       "$value": "Inter"
     },
-    "bold": {
-      "$type": "fontWeights",
-      "$value": "Medium"
-    },
-    "extra-bold": {
-      "$type": "fontWeights",
-      "$value": "Semi bold"
-    },
-    "regular": {
-      "$type": "fontWeights",
-      "$value": "Regular"
+    "font-weight": {
+      "medium": {
+        "$type": "fontWeights",
+        "$value": "Medium"
+      },
+      "semibold": {
+        "$type": "fontWeights",
+        "$value": "SemiBold"
+      },
+      "regular": {
+        "$type": "fontWeights",
+        "$value": "Regular"
+      }
     }
   }
 }

package/dist/tokens/typography/secondary.css

@@ -3,7 +3,7 @@
  */
 
 @layer ds.theme.typography.secondary {
-  [data-ds-typography="secondary"] {
+  [data-typography="secondary"] {
     --ds-font-family: Inter;
     --ds-font-weight-medium: 500;
     --ds-font-weight-semibold: 600;
@@ -100,16 +100,15 @@
     --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-font-size-2: 0.875rem;
+    --ds-font-size-3: 1rem;
+    --ds-font-size-4: 1.125rem;
+    --ds-font-size-5: 1.3125rem;
+    --ds-font-size-6: 1.5rem;
+    --ds-font-size-7: 1.875rem;
+    --ds-font-size-8: 2.25rem;
+    --ds-font-size-9: 3rem;
+    --ds-font-size-10: 3.75rem;
     --ds-letter-spacing-1: -1%;
     --ds-letter-spacing-2: -0.5%;
     --ds-letter-spacing-3: -0.25%;
@@ -119,9 +118,5 @@
     --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;
   }
 }

package/dist/tokens/typography/size/large.json

@@ -19,42 +19,38 @@
       "$value": "13"
     },
     "2": {
-      "$type": "fontSizes",
-      "$value": "14"
-    },
-    "3": {
       "$type": "fontSizes",
       "$value": "16"
     },
-    "4": {
+    "3": {
       "$type": "fontSizes",
       "$value": "18"
     },
-    "5": {
+    "4": {
       "$type": "fontSizes",
       "$value": "21"
     },
-    "6": {
+    "5": {
       "$type": "fontSizes",
       "$value": "24"
     },
-    "7": {
+    "6": {
       "$type": "fontSizes",
       "$value": "30"
     },
-    "8": {
+    "7": {
       "$type": "fontSizes",
       "$value": "36"
     },
-    "9": {
+    "8": {
       "$type": "fontSizes",
       "$value": "48"
     },
-    "10": {
+    "9": {
       "$type": "fontSizes",
       "$value": "60"
     },
-    "11": {
+    "10": {
       "$type": "fontSizes",
       "$value": "72"
     }

package/dist/tokens/typography/size/medium.json

@@ -19,42 +19,38 @@
       "$value": "12"
     },
     "2": {
-      "$type": "fontSizes",
-      "$value": "13"
-    },
-    "3": {
       "$type": "fontSizes",
       "$value": "14"
     },
-    "4": {
+    "3": {
       "$type": "fontSizes",
       "$value": "16"
     },
-    "5": {
+    "4": {
       "$type": "fontSizes",
       "$value": "18"
     },
-    "6": {
+    "5": {
       "$type": "fontSizes",
       "$value": "21"
     },
-    "7": {
+    "6": {
       "$type": "fontSizes",
       "$value": "24"
     },
-    "8": {
+    "7": {
       "$type": "fontSizes",
       "$value": "30"
     },
-    "9": {
+    "8": {
       "$type": "fontSizes",
       "$value": "36"
     },
-    "10": {
+    "9": {
       "$type": "fontSizes",
       "$value": "48"
     },
-    "11": {
+    "10": {
       "$type": "fontSizes",
       "$value": "60"
     }

package/dist/tokens/typography/size/small.json

@@ -19,42 +19,38 @@
       "$value": "11"
     },
     "2": {
-      "$type": "fontSizes",
-      "$value": "12"
-    },
-    "3": {
       "$type": "fontSizes",
       "$value": "13"
     },
-    "4": {
+    "3": {
       "$type": "fontSizes",
       "$value": "14"
     },
-    "5": {
+    "4": {
       "$type": "fontSizes",
       "$value": "16"
     },
-    "6": {
+    "5": {
       "$type": "fontSizes",
       "$value": "18"
     },
-    "7": {
+    "6": {
       "$type": "fontSizes",
       "$value": "21"
     },
-    "8": {
+    "7": {
       "$type": "fontSizes",
       "$value": "24"
     },
-    "9": {
+    "8": {
       "$type": "fontSizes",
       "$value": "30"
     },
-    "10": {
+    "9": {
       "$type": "fontSizes",
       "$value": "36"
     },
-    "11": {
+    "10": {
       "$type": "fontSizes",
       "$value": "48"
     }

package/dist/tokens/warning.css

@@ -0,0 +1,25 @@
+/**
+ * These files are generated from design tokens defind using Token Studio
+ */
+
+@layer ds.theme.color {
+  [data-color="warning"],
+  [data-color-scheme][data-color="warning"] {
+    --ds-color-background-default: var(--ds-color-warning-background-default);
+    --ds-color-background-tinted: var(--ds-color-warning-background-tinted);
+    --ds-color-surface-default: var(--ds-color-warning-surface-default);
+    --ds-color-surface-tinted: var(--ds-color-warning-surface-tinted);
+    --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-text-subtle: var(--ds-color-warning-text-subtle);
+    --ds-color-text-default: var(--ds-color-warning-text-default);
+    --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-base-contrast-subtle: var(--ds-color-warning-base-contrast-subtle);
+    --ds-color-base-contrast-default: var(--ds-color-warning-base-contrast-default);
+  }
+}

package/dist/types/lib/components/Dialog/DialogList.d.ts

@@ -3,5 +3,6 @@ export interface DialogListProps {
     items: DialogListItemProps[];
     groups?: Record<string, DialogListGroupProps>;
     sortGroupBy?: (a: [string, DialogListItemProps[]], b: [string, DialogListItemProps[]]) => number;
+    isLoading?: boolean;
 }
-export declare const DialogList: ({ items, groups, sortGroupBy }: DialogListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogList: ({ items, groups, sortGroupBy, isLoading }: DialogListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogList.stories.d.ts

@@ -1,12 +1,13 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ items, groups, sortGroupBy }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy, isLoading }: import('./DialogList').DialogListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         items: import('./DialogListItem').DialogListItemProps[];
         groups?: Record<string, import('./DialogListGroup').DialogListGroupProps>;
         sortGroupBy?: (a: [string, import('./DialogListItem').DialogListItemProps[]], b: [string, import('./DialogListItem').DialogListItemProps[]]) => number;
+        isLoading?: boolean;
     };
 };
 export default meta;

package/dist/types/lib/components/Menu/Examples.stories.d.ts

@@ -8,6 +8,23 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const InboxMenu: Story;
+export declare const NeutralInboxMenu: {
+    args: {
+        color: string;
+        theme: string;
+        isVirtualized?: boolean;
+        level?: number;
+        expanded?: boolean;
+        search?: import('./MenuSearch').MenuSearchProps;
+        items: import('./MenuItem').MenuItemProps[];
+        groups?: import('./MenuItems').MenuItemGroups;
+        defaultItemSize?: import('./MenuItemBase').MenuItemSize;
+        defaultItemColor?: import('./MenuItemBase').MenuItemColor;
+        defaultItemTheme?: import('./MenuItemBase').MenuItemTheme;
+        defaultIconTheme?: import('..').IconTheme;
+        as?: React.ElementType;
+    };
+};
 export declare const CompanyInboxMenu: {
     args: {
         color: string;

package/dist/types/lib/components/Meta/MetaItemBase.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
 export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'rounded' | 'text';
-export type MetaItemSize = 'xs';
+export type MetaItemSize = 'xs' | 'sm';
 export type MetaItemColor = 'subtle';
 export interface MetaItemBaseProps {
     as?: ElementType;

package/dist/types/lib/components/Meta/{MetaList.d.ts → Metadata.d.ts}

@@ -1,12 +1,14 @@
-import { MetaItemBaseProps, MetaItemSize } from './MetaItemBase';
+import { MetaItemBaseProps, MetaItemProps, MetaItemSize } from '..';
 export type MetaListItemType = 'default' | 'progress' | 'timestamp';
 export interface MetaListItemProps extends MetaItemBaseProps {
     label: string;
     type?: MetaListItemType;
+    icon?: MetaItemProps['icon'];
 }
-export interface MetaListProps {
+export declare const MetaListItem: ({ type, label, ...rest }: MetaListItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface MetadataProps {
+    variant?: 'inline' | 'list';
     items: MetaListItemProps[];
     size?: MetaItemSize;
 }
-export declare const MetaListItem: ({ type, label, ...rest }: MetaListItemProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MetaList: ({ size, items }: MetaListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Metadata: ({ variant, size, items }: MetadataProps) => import("react/jsx-runtime").JSX.Element;