From d7f69a5e5bfe6ff14a0751b3f1e5fd7dba1808f8 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Wed, 23 Oct 2024 16:58:31 +0200
Subject: [PATCH 1/8] update to @next Designsystem version

---
 package.json                                  |  6 +-
 src/components/EditIconButton.tsx             |  2 +-
 src/components/atoms/AltinnAttachment.tsx     | 10 +--
 src/components/form/HelpTextContainer.tsx     |  2 +-
 src/components/form/RadioButton.tsx           |  2 +-
 src/components/label/LabelContent.tsx         |  2 +-
 src/components/presentation/Header.tsx        |  2 +-
 src/components/presentation/NavBar.tsx        | 12 +--
 .../alertOnChange/DeleteWarningPopover.tsx    | 32 ++++----
 src/features/devtools/DevToolsControls.tsx    | 22 +++---
 src/features/devtools/DevToolsPanel.tsx       |  4 +-
 .../DevHiddenFunctionality.tsx                |  2 +-
 .../DevNavigationButtons.tsx                  | 37 +++++----
 .../components/DevToolsLogs/DevToolsLogs.tsx  | 22 +++---
 .../DownloadXMLButton/DownloadXMLButton.tsx   |  4 +-
 .../ExpressionPlayground.tsx                  |  6 +-
 .../FeatureToggles/FeatureToggles.tsx         | 11 ++-
 .../LayoutInspector/ComponentSelector.tsx     |  2 +-
 .../LayoutInspector.module.css                |  4 +
 .../LayoutInspector/LayoutInspector.tsx       | 10 +--
 .../NodeInspector/NodeInspector.tsx           | 14 ++--
 .../OpenDevToolsButton/OpenDevToolsButton.tsx |  4 +-
 .../PDFPreviewButton/PDFGeneratorPreview.tsx  | 18 +++--
 .../PDFPreviewButton/PDFPreviewButton.tsx     |  4 +-
 .../PermissionsEditor/PermissionsEditor.tsx   |  8 +-
 .../VersionSwitcher/VersionSwitcher.tsx       |  2 +-
 .../containers/InvalidSubformLayoutError.tsx  |  2 +-
 .../instantiate/containers/PartySelection.tsx |  2 +-
 .../instantiate/containers/UnknownError.tsx   |  2 +-
 .../selection/InstanceSelection.tsx           | 12 +--
 .../validation/ComponentValidations.tsx       |  8 +-
 src/index.tsx                                 |  2 +-
 src/language/sharedLanguage.ts                | 12 +--
 src/layout/Accordion/AccordionItem.tsx        |  8 +-
 .../ActionButton/ActionButtonComponent.tsx    |  6 +-
 src/layout/Address/AddressComponent.tsx       | 10 +--
 src/layout/Alert/AlertBaseComponent.tsx       |  2 +-
 src/layout/Button/SubmitButton.tsx            |  2 +-
 src/layout/Button/WrappedButton.tsx           |  4 +-
 src/layout/Cards/Cards.tsx                    | 16 ++--
 src/layout/Checkboxes/WrappedCheckbox.tsx     |  4 +-
 .../CustomButton/CustomButtonComponent.tsx    | 24 +++++-
 src/layout/Datepicker/DatePickerInput.tsx     |  4 +-
 src/layout/Datepicker/DatepickerComponent.tsx | 31 ++++----
 src/layout/Datepicker/DropdownCaption.tsx     | 12 +--
 .../FileUploadTable/FileTableButtons.tsx      |  4 +-
 .../FileUploadWithTag/EditWindowComponent.tsx |  2 +-
 src/layout/Grid/GridSummary.tsx               |  6 +-
 src/layout/Group/GroupComponent.tsx           | 10 +--
 src/layout/Group/GroupSummary.tsx             |  2 +-
 src/layout/Header/HeaderComponent.tsx         |  6 +-
 src/layout/Input/InputComponent.tsx           |  4 +-
 .../Summary/LargeLikertSummaryContainer.tsx   | 10 +--
 src/layout/Likert/Summary2/LikertSummary.tsx  |  6 +-
 src/layout/Link/LinkComponent.tsx             |  6 +-
 src/layout/List/ListComponent.tsx             |  5 +-
 src/layout/Map/Summary2/MapSummary.tsx        |  6 +-
 .../NavigationButtonsComponent.tsx            |  6 +-
 src/layout/Payment/PaymentComponent.tsx       | 10 +--
 .../PaymentReceiptDetails.tsx                 | 28 ++-----
 .../Payment/SkeletonLoader/SkeletonLoader.tsx | 25 ++++--
 .../PrintButton/PrintButtonComponent.tsx      |  4 +-
 .../RadioButtons/ControlledRadioGroup.tsx     |  2 +-
 .../RepeatingGroupContainer.module.css        |  4 +
 .../Container/RepeatingGroupContainer.tsx     |  3 +-
 .../RepeatingGroupsEditContainer.tsx          | 18 ++---
 .../Pagination/RepeatingGroupPagination.tsx   | 67 +++++++---------
 .../Summary/LargeGroupSummaryContainer.tsx    | 10 +--
 .../Summary2/RepeatingGroupSummary.tsx        |  6 +-
 .../Table/RepeatingGroupTableRow.tsx          | 10 +--
 .../Subform/SubformComponent.module.css       |  6 +-
 src/layout/Subform/SubformComponent.tsx       | 10 +--
 .../Summary/SubformSummaryComponent2.tsx      |  1 -
 src/layout/Summary/EditButton.tsx             |  4 +-
 .../CommonSummaryComponents/EditButton.tsx    |  2 +-
 .../LayoutSetSummaryAccordion.tsx             |  4 +-
 .../MultipleValueSummary.tsx                  | 28 ++++---
 .../SingleValueSummary.tsx                    |  6 +-
 src/layout/Tabs/Tabs.tsx                      | 14 +++-
 yarn.lock                                     | 78 ++++++++++++-------
 80 files changed, 429 insertions(+), 391 deletions(-)

diff --git a/package.json b/package.json
index 581ffb7c30..af0e435e19 100644
--- a/package.json
+++ b/package.json
@@ -128,9 +128,9 @@
     "@babel/polyfill": "7.12.1",
     "@date-fns/tz": "^1.1.2",
     "@digdir/design-system-react": "0.54.0",
-    "@digdir/designsystemet-css": "0.10.0",
-    "@digdir/designsystemet-react": "0.63.1",
-    "@digdir/designsystemet-theme": "0.15.3",
+    "@digdir/designsystemet-css": "1.0.0-next.35",
+    "@digdir/designsystemet-react": "1.0.0-next.35",
+    "@digdir/designsystemet-theme": "1.0.0-next.35",
     "@material-ui/core": "4.12.4",
     "@material-ui/pickers": "3.3.11",
     "@navikt/aksel-icons": "^7.0.0",
diff --git a/src/components/EditIconButton.tsx b/src/components/EditIconButton.tsx
index 2562be0918..e6d3edd424 100644
--- a/src/components/EditIconButton.tsx
+++ b/src/components/EditIconButton.tsx
@@ -15,7 +15,7 @@ export function EditIconButton({ id, label, onClick }: IEditIconButtonProps) {
   return (
     <Button
       className={classes.editButton}
-      size='small'
+      size='sm'
       id={id}
       variant='tertiary'
       onClick={onClick}
diff --git a/src/components/atoms/AltinnAttachment.tsx b/src/components/atoms/AltinnAttachment.tsx
index 52856cb41b..bbdb6141e1 100644
--- a/src/components/atoms/AltinnAttachment.tsx
+++ b/src/components/atoms/AltinnAttachment.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Link, List } from '@digdir/designsystemet-react';
+import { Heading, Link, List } from '@digdir/designsystemet-react';
 
 import classes from 'src/components/atoms/AltinnAttachment.module.css';
 import { Lang } from 'src/features/language/Lang';
@@ -24,14 +24,14 @@ export function AltinnAttachment({ attachments, id, title }: IAltinnAttachmentPr
     ?.filter((attachment) => attachment.name)
     .sort((a, b) => (a.name && b.name ? a.name.localeCompare(b.name, selectedLanguage, { numeric: true }) : 0));
   return (
-    <List.Root
+    <div
       id={id}
       data-testid='attachment-list'
     >
       {title && (
-        <List.Heading>
+        <Heading>
           <Lang id={title} />
-        </List.Heading>
+        </Heading>
       )}
       <List.Unordered className={classes.attachmentList}>
         {filteredAndSortedAttachments?.map((attachment, index) => (
@@ -51,6 +51,6 @@ export function AltinnAttachment({ attachments, id, title }: IAltinnAttachmentPr
           </List.Item>
         ))}
       </List.Unordered>
-    </List.Root>
+    </div>
   );
 }
diff --git a/src/components/form/HelpTextContainer.tsx b/src/components/form/HelpTextContainer.tsx
index e0cb33a95e..9ce69a03f7 100644
--- a/src/components/form/HelpTextContainer.tsx
+++ b/src/components/form/HelpTextContainer.tsx
@@ -15,7 +15,7 @@ export function HelpTextContainer({ helpText, title }: IHelpTextContainerProps)
   return (
     <div className={classes.helpTextContainer}>
       <HelpText
-        title={
+        aria-label={
           title ? `${langAsString('helptext.button_title_prefix')} ${title}` : langAsString('helptext.button_title')
         }
       >
diff --git a/src/components/form/RadioButton.tsx b/src/components/form/RadioButton.tsx
index d436884b70..878f833b87 100644
--- a/src/components/form/RadioButton.tsx
+++ b/src/components/form/RadioButton.tsx
@@ -51,7 +51,7 @@ export const RadioButton = ({
       {label && (
         <div className={`${hideLabel ? 'sr-only' : ''} ${classes.radioLabelContainer}`}>
           {label}
-          {helpText ? <HelpText title={elementAsString(helpText)}>{helpText}</HelpText> : null}
+          {helpText ? <HelpText aria-label={elementAsString(helpText)}>{helpText}</HelpText> : null}
         </div>
       )}
     </Radio>
diff --git a/src/components/label/LabelContent.tsx b/src/components/label/LabelContent.tsx
index 8849d86feb..754b3e8463 100644
--- a/src/components/label/LabelContent.tsx
+++ b/src/components/label/LabelContent.tsx
@@ -55,7 +55,7 @@ export function LabelContent({
         {help && (
           <HelpText
             id={`${componentId}-helptext`}
-            title={
+            aria-label={
               label ? `${langAsString('helptext.button_title_prefix')} ${label}` : langAsString('helptext.button_title')
             }
           >
diff --git a/src/components/presentation/Header.tsx b/src/components/presentation/Header.tsx
index 5718ab1762..f34bc43ce9 100644
--- a/src/components/presentation/Header.tsx
+++ b/src/components/presentation/Header.tsx
@@ -33,7 +33,7 @@ const InnerHeader = ({ header, aboveHeader, children }: IInnerHeaderProps) => (
         <Grid item>
           <Heading
             level={1}
-            size='medium'
+            size='md'
             data-testid='presentation-heading'
           >
             {header}
diff --git a/src/components/presentation/NavBar.tsx b/src/components/presentation/NavBar.tsx
index f657c04862..9b813a20e9 100644
--- a/src/components/presentation/NavBar.tsx
+++ b/src/components/presentation/NavBar.tsx
@@ -67,8 +67,8 @@ export const NavBar = ({ type }: INavBarProps) => {
             className={classes.buttonMargin}
             onClick={handleBackArrowButton}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             aria-label={langAsString('general.back')}
             icon={true}
           >
@@ -88,8 +88,8 @@ export const NavBar = ({ type }: INavBarProps) => {
             className={cn(classes.buttonMargin, { [classes.hideExpandButtonMaxWidth]: !expandedWidth })}
             onClick={toggleExpandedWidth}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             aria-label={langAsString('general.expand_form')}
             icon={true}
           >
@@ -114,8 +114,8 @@ export const NavBar = ({ type }: INavBarProps) => {
             className={classes.buttonMargin}
             onClick={handleModalCloseButton}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             aria-label={langAsString('general.close_schema')}
             icon={true}
           >
diff --git a/src/features/alertOnChange/DeleteWarningPopover.tsx b/src/features/alertOnChange/DeleteWarningPopover.tsx
index 25fc3c50d3..0a7530fb9a 100644
--- a/src/features/alertOnChange/DeleteWarningPopover.tsx
+++ b/src/features/alertOnChange/DeleteWarningPopover.tsx
@@ -27,20 +27,26 @@ export function DeleteWarningPopover({
   setOpen,
 }: IDeleteWarningPopover) {
   return (
-    <Popover
-      variant='warning'
-      placement={placement}
-      open={open}
-      onOpenChange={() => setOpen(!open)}
-    >
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Content className={classes.popover}>
+    <Popover.Context>
+      <Popover.Trigger
+        asChild
+        onClick={() => setOpen(!open)}
+      >
+        {children}
+      </Popover.Trigger>
+      <Popover
+        className={classes.popover}
+        variant='warning'
+        placement={placement}
+        open={open}
+        onClose={() => setOpen(false)}
+      >
         <div>{messageText}</div>
         <div className={classes.popoverButtonContainer}>
           <Button
             data-testid='warning-popover-delete-button'
             variant='primary'
-            size='small'
+            size='sm'
             color='danger'
             onClick={onPopoverDeleteClick}
           >
@@ -49,14 +55,14 @@ export function DeleteWarningPopover({
           <Button
             data-testid='warning-popover-cancel-button'
             variant='tertiary'
-            size='small'
-            color='second'
+            size='sm'
+            color='neutral'
             onClick={onCancelClick}
           >
             <Lang id={'general.cancel'} />
           </Button>
         </div>
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </Popover.Context>
   );
 }
diff --git a/src/features/devtools/DevToolsControls.tsx b/src/features/devtools/DevToolsControls.tsx
index 1949884dc8..4650268259 100644
--- a/src/features/devtools/DevToolsControls.tsx
+++ b/src/features/devtools/DevToolsControls.tsx
@@ -30,7 +30,7 @@ export const DevToolsControls = () => {
   return (
     <Tabs
       className={classes.tabs}
-      size='small'
+      size='sm'
       value={activeTab}
       onChange={setActiveTab}
     >
@@ -52,7 +52,7 @@ export const DevToolsControls = () => {
         {isInForm && <Tabs.Tab value={DevToolsTab.Expressions}>{DevToolsTab.Expressions}</Tabs.Tab>}
         {/* <Tabs.Tab value={DevToolsTab.FeatureToggles}>{DevToolsTab.FeatureToggles}</Tabs.Tab> */}
       </Tabs.List>
-      <Tabs.Content value={DevToolsTab.General}>
+      <Tabs.Panel value={DevToolsTab.General}>
         <div className={classes.page}>
           <PDFPreviewButton />
           <DevNavigationButtons />
@@ -63,24 +63,24 @@ export const DevToolsControls = () => {
           <DownloadXMLButton />
           <ReactQueryDevtools initialIsOpen={false} />
         </div>
-      </Tabs.Content>
-      <Tabs.Content value={DevToolsTab.Logs}>
+      </Tabs.Panel>
+      <Tabs.Panel value={DevToolsTab.Logs}>
         <DevToolsLogs />
-      </Tabs.Content>
+      </Tabs.Panel>
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Layout}>
+        <Tabs.Panel value={DevToolsTab.Layout}>
           <LayoutInspector />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Components}>
+        <Tabs.Panel value={DevToolsTab.Components}>
           <NodeInspector />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {isInForm && (
-        <Tabs.Content value={DevToolsTab.Expressions}>
+        <Tabs.Panel value={DevToolsTab.Expressions}>
           <ExpressionPlayground />
-        </Tabs.Content>
+        </Tabs.Panel>
       )}
       {
         // <Tabs.Content value={DevToolsTab.FeatureToggles}>
diff --git a/src/features/devtools/DevToolsPanel.tsx b/src/features/devtools/DevToolsPanel.tsx
index 0b09b54cb0..01855430f1 100644
--- a/src/features/devtools/DevToolsPanel.tsx
+++ b/src/features/devtools/DevToolsPanel.tsx
@@ -81,8 +81,8 @@ export const DevToolsPanel = ({ isOpen, close, children }: IDevToolsPanelProps)
               <Button
                 onClick={close}
                 variant='tertiary'
-                color='second'
-                size='small'
+                color='neutral'
+                size='sm'
                 aria-label={'close'}
                 icon={true}
               >
diff --git a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
index 7afd9c10e3..577197ca02 100644
--- a/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
+++ b/src/features/devtools/components/DevHiddenFunctionality/DevHiddenFunctionality.tsx
@@ -30,7 +30,7 @@ function InnerDevHiddenFunctionality() {
       <MarkHiddenComponents />
       <div>
         <ToggleGroup
-          size='small'
+          size='sm'
           onChange={(selectedValue) => setShowHiddenComponents(selectedValue as IDevToolsState['hiddenComponents'])}
           value={state}
         >
diff --git a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
index 0238b817ec..1b21a88151 100644
--- a/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
+++ b/src/features/devtools/components/DevNavigationButtons/DevNavigationButtons.tsx
@@ -73,25 +73,24 @@ const InnerDevNavigationButtons = () => {
 
   return (
     <Fieldset legend='Navigasjon'>
-      <div className={compactView ? classes.hidden : classes.responsiveButtons}>
-        <Chip.Group
-          size='small'
-          className={classes.chipGroup}
-        >
-          {orderedPages.map((page) => (
-            <Chip.Toggle
-              key={page}
-              className={isHidden(page) ? classes.hiddenPage : undefined}
-              title={hiddenText(page)}
-              // TODO(DevTools): Navigate to hidden pages is not working
-              disabled={isHidden(page)}
-              onClick={() => handleChange([page])}
-              selected={pageKey == page}
-            >
-              {page}
-            </Chip.Toggle>
-          ))}
-        </Chip.Group>
+      <div
+        className={cn({ [classes.hidden]: compactView, [classes.responsiveButtons]: !compactView }, classes.chipGroup)}
+      >
+        {orderedPages.map((page) => (
+          <Chip.Radio
+            size='sm'
+            key={page}
+            name='navigasjon'
+            value={page}
+            className={isHidden(page) ? classes.hiddenPage : undefined}
+            title={hiddenText(page)}
+            // TODO(DevTools): Navigate to hidden pages is not working
+            disabled={isHidden(page)}
+            onClick={() => handleChange([page])}
+          >
+            {page}
+          </Chip.Radio>
+        ))}
       </div>
       <div className={cn(classes.dropdown, { [classes.responsiveDropdown]: !compactView })}>
         <Combobox
diff --git a/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx b/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
index 4791a73dab..9c97000b45 100644
--- a/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
+++ b/src/features/devtools/components/DevToolsLogs/DevToolsLogs.tsx
@@ -50,8 +50,8 @@ export const DevToolsLogs = () => {
       <div className={classes.toolbar}>
         <Button
           onClick={clearLogs}
-          color={'second'}
-          size='small'
+          color='neutral'
+          size='sm'
           icon={true}
         >
           <TrashIcon
@@ -61,8 +61,8 @@ export const DevToolsLogs = () => {
         </Button>
         <Button
           onClick={saveLogs}
-          color={'second'}
-          size='small'
+          color='neutral'
+          size='sm'
           icon={true}
         >
           <DownloadIcon
@@ -72,7 +72,7 @@ export const DevToolsLogs = () => {
         </Button>
         <div className={classes.filterField}>
           <Textfield
-            size='small'
+            size='sm'
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
             placeholder='Filtrer logger'
@@ -81,8 +81,8 @@ export const DevToolsLogs = () => {
 
         <Button
           onClick={() => toggleShow('error')}
-          size='small'
-          color='second'
+          size='sm'
+          color='neutral'
           variant={showLevels.error ? 'primary' : 'secondary'}
           icon={true}
         >
@@ -93,8 +93,8 @@ export const DevToolsLogs = () => {
         </Button>
         <Button
           onClick={() => toggleShow('warn')}
-          size='small'
-          color='second'
+          size='sm'
+          color='neutral'
           variant={showLevels.warn ? 'primary' : 'secondary'}
           icon={true}
         >
@@ -105,8 +105,8 @@ export const DevToolsLogs = () => {
         </Button>
         <Button
           onClick={() => toggleShow('info')}
-          size='small'
-          color='second'
+          size='sm'
+          color='neutral'
           variant={showLevels.info ? 'primary' : 'secondary'}
           icon={true}
         >
diff --git a/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx b/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
index 41300ef868..03e2c1e183 100644
--- a/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
+++ b/src/features/devtools/components/DownloadXMLButton/DownloadXMLButton.tsx
@@ -90,7 +90,7 @@ const InnerDownloadXMLButton = () => {
       <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
         <Button
           variant='secondary'
-          size='small'
+          size='sm'
           onClick={downloadXML}
           disabled={disabled}
         >
@@ -113,7 +113,7 @@ const InnerDownloadXMLButton = () => {
                 onClick: (e) => e.preventDefault(),
               })}
               variant='secondary'
-              size='small'
+              size='sm'
               disabled={disabled}
             >
               {
diff --git a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
index adb126729d..425041acc1 100644
--- a/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
+++ b/src/features/devtools/components/ExpressionPlayground/ExpressionPlayground.tsx
@@ -186,7 +186,7 @@ export const ExpressionPlayground = () => {
           {outputs.length > 1 && (
             <div className={classes.outputs}>
               <Tabs
-                size='small'
+                size='sm'
                 value={activeOutputTab}
                 onChange={(outputName) => {
                   setActiveOutputTab(outputName);
@@ -208,7 +208,7 @@ export const ExpressionPlayground = () => {
                 {outputs.map((output, i) => {
                   const { key, value } = getTabKeyAndValue(i, output);
                   return (
-                    <Tabs.Content
+                    <Tabs.Panel
                       value={value}
                       key={key}
                     >
@@ -219,7 +219,7 @@ export const ExpressionPlayground = () => {
                         value={output.value}
                         placeholder={'Resultatet av uttrykket vises her'}
                       />
-                    </Tabs.Content>
+                    </Tabs.Panel>
                   );
                 })}
               </Tabs>
diff --git a/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx b/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
index 9edeff4e56..41fbeba564 100644
--- a/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
+++ b/src/features/devtools/components/FeatureToggles/FeatureToggles.tsx
@@ -60,19 +60,18 @@ export function FeatureToggles() {
                 className={classes.itemContent}
               >
                 <Heading
-                  spacing={true}
-                  size={'small'}
+                  size={'sm'}
                   level={4}
                 >
                   {parseAndCleanText(title)}
                 </Heading>
-                <Label size={'xsmall'}>Nøkkel: {key}</Label>
+                <Label size={'xs'}>Nøkkel: {key}</Label>
                 <br />
-                <Label size={'xsmall'}>
+                <Label size={'xs'}>
                   Verdi: {JSON.stringify(value)} / Standardverdi: {JSON.stringify(defaultValue)}
                 </Label>
                 <br />
-                <Label size={'xsmall'}>Kilde: {sourceMap[source]}</Label>
+                <Label size={'xs'}>Kilde: {sourceMap[source]}</Label>
                 <Paragraph>
                   {parseAndCleanText(description)}
                   {links && links.length && (
@@ -99,7 +98,7 @@ export function FeatureToggles() {
         )}
         <div className={classes.button}>
           <Button
-            size='small'
+            size='sm'
             disabled={Object.keys(overrides).length <= 0}
             onClick={() => {
               const { org, app } = window;
diff --git a/src/features/devtools/components/LayoutInspector/ComponentSelector.tsx b/src/features/devtools/components/LayoutInspector/ComponentSelector.tsx
index d5d10b1223..1849a9f551 100644
--- a/src/features/devtools/components/LayoutInspector/ComponentSelector.tsx
+++ b/src/features/devtools/components/LayoutInspector/ComponentSelector.tsx
@@ -132,7 +132,7 @@ export function ComponentSelector({ type }: ComponentSelectorProps) {
       size='sm'
       onClick={toggle}
       variant={active ? 'primary' : 'tertiary'}
-      color='second'
+      color='neutral'
       style={{
         marginTop: -10,
         marginBottom: -10,
diff --git a/src/features/devtools/components/LayoutInspector/LayoutInspector.module.css b/src/features/devtools/components/LayoutInspector/LayoutInspector.module.css
index 4073ab4ee3..601398ff47 100644
--- a/src/features/devtools/components/LayoutInspector/LayoutInspector.module.css
+++ b/src/features/devtools/components/LayoutInspector/LayoutInspector.module.css
@@ -157,3 +157,7 @@
   width: 100%;
   background-color: white;
 }
+
+.saveButton {
+  width: 100%;
+}
diff --git a/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx b/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
index 5edf503b3d..938f2517c7 100644
--- a/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
+++ b/src/features/devtools/components/LayoutInspector/LayoutInspector.tsx
@@ -127,7 +127,7 @@ export const LayoutInspector = () => {
             {validationErrorsForPage[selectedComponent] && validationErrorsForPage[selectedComponent].length > 0 && (
               <Alert
                 className={classes.errorAlert}
-                severity={'warning'}
+                color={'warning'}
               >
                 <div className={classes.errorList}>
                   <ul>
@@ -145,8 +145,8 @@ export const LayoutInspector = () => {
             <Button
               onClick={() => setSelectedComponent(undefined)}
               variant='tertiary'
-              color='second'
-              size='small'
+              color='neutral'
+              size='sm'
               aria-label={'close'}
               icon={true}
             >
@@ -172,8 +172,8 @@ export const LayoutInspector = () => {
           {error && <span className={classes.error}>Ugyldig JSON</span>}
           {propertiesHaveChanged && (
             <Button
-              fullWidth
-              size='small'
+              className={classes.saveButton}
+              size='sm'
               onClick={handleSave}
             >
               Lagre
diff --git a/src/features/devtools/components/NodeInspector/NodeInspector.tsx b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
index 0a06881798..2d9b918f84 100644
--- a/src/features/devtools/components/NodeInspector/NodeInspector.tsx
+++ b/src/features/devtools/components/NodeInspector/NodeInspector.tsx
@@ -41,9 +41,9 @@ export const NodeInspector = () => {
           <div className={reusedClasses.closeButton}>
             <Button
               onClick={() => setSelected(undefined)}
-              size='small'
+              size='sm'
               variant='tertiary'
-              color='second'
+              color='neutral'
               aria-label={'close'}
               icon={true}
             >
@@ -61,7 +61,7 @@ export const NodeInspector = () => {
             }}
           >
             <Tabs
-              size='small'
+              size='sm'
               defaultValue='properties'
               className={reusedClasses.tabs}
             >
@@ -69,7 +69,7 @@ export const NodeInspector = () => {
                 <Tabs.Tab value='properties'>Egenskaper</Tabs.Tab>
                 {implementsAnyValidation(selectedNode.def) && <Tabs.Tab value='validation'>Validering</Tabs.Tab>}
               </Tabs.List>
-              <Tabs.Content value='properties'>
+              <Tabs.Panel value='properties'>
                 <div className={reusedClasses.properties}>
                   <div className={reusedClasses.headerLink}>
                     <a
@@ -85,12 +85,12 @@ export const NodeInspector = () => {
                   {/*  eslint-disable-next-line @typescript-eslint/no-explicit-any */}
                   {selectedNode.def.renderDevToolsInspector(selectedNode as any)}
                 </div>
-              </Tabs.Content>
-              <Tabs.Content value='validation'>
+              </Tabs.Panel>
+              <Tabs.Panel value='validation'>
                 <div className={reusedClasses.scrollable}>
                   <ValidationInspector node={selectedNode} />
                 </div>
-              </Tabs.Content>
+              </Tabs.Panel>
             </Tabs>
           </NodeInspectorContextProvider>
         </>
diff --git a/src/features/devtools/components/OpenDevToolsButton/OpenDevToolsButton.tsx b/src/features/devtools/components/OpenDevToolsButton/OpenDevToolsButton.tsx
index f2c39a64cc..ce52a10f9c 100644
--- a/src/features/devtools/components/OpenDevToolsButton/OpenDevToolsButton.tsx
+++ b/src/features/devtools/components/OpenDevToolsButton/OpenDevToolsButton.tsx
@@ -49,9 +49,9 @@ export const OpenDevToolsButton = ({ isHidden, onClick }: IOpenDevToolsButtonPro
         )}
         <Button
           tabIndex={-1}
-          size='small'
+          size='sm'
           variant='secondary'
-          color='second'
+          color='neutral'
           onClick={onClick}
           aria-label='åpne utviklerverkøy'
           icon={true}
diff --git a/src/features/devtools/components/PDFPreviewButton/PDFGeneratorPreview.tsx b/src/features/devtools/components/PDFPreviewButton/PDFGeneratorPreview.tsx
index dd3d3572b1..e458af498c 100644
--- a/src/features/devtools/components/PDFPreviewButton/PDFGeneratorPreview.tsx
+++ b/src/features/devtools/components/PDFPreviewButton/PDFGeneratorPreview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button, Modal, Spinner } from '@digdir/designsystemet-react';
+import { Button, Heading, Modal, Spinner } from '@digdir/designsystemet-react';
 import { FilePdfIcon } from '@navikt/aksel-icons';
 
 import classes from 'src/features/devtools/components/PDFPreviewButton/PDFPreview.module.css';
@@ -59,9 +59,9 @@ export function PDFGeneratorPreview() {
     <>
       <Button
         onClick={generatePDF}
-        size='small'
+        size='sm'
         disabled={disabled}
-        color='second'
+        color='neutral'
       >
         {
           <FilePdfIcon
@@ -74,7 +74,7 @@ export function PDFGeneratorPreview() {
       <Modal
         ref={modalRef}
         onClose={() => abortRef.current?.abort()}
-        onInteractOutside={() => modalRef.current?.close()}
+        backdropClose={true}
         className={classes.modal}
       >
         {blobUrl ? (
@@ -85,21 +85,23 @@ export function PDFGeneratorPreview() {
           />
         ) : errorText ? (
           <>
-            <Modal.Header>PDF-generering feilet</Modal.Header>
-            <Modal.Content>
+            <Modal.Block>
+              <Heading>PDF-generering feilet</Heading>
+            </Modal.Block>
+            <Modal.Block>
               {errorText.split('\n').map((line) => (
                 <>
                   {line}
                   <br />
                 </>
               ))}
-            </Modal.Content>
+            </Modal.Block>
           </>
         ) : (
           <div className={classes.loading}>
             <Spinner
               title='Laster...'
-              size='xlarge'
+              size='xl'
             />
           </div>
         )}
diff --git a/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx b/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
index 9ef9170960..8029d79e3b 100644
--- a/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
+++ b/src/features/devtools/components/PDFPreviewButton/PDFPreviewButton.tsx
@@ -33,9 +33,9 @@ export const PDFPreviewButton = () => {
     >
       <Button
         onClick={() => setPdfPreview(true)}
-        size='small'
+        size='sm'
         disabled={taskType !== ProcessTaskType.Data}
-        color='second'
+        color='neutral'
       >
         {
           <FilePdfIcon
diff --git a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
index fe7e59b62c..9deaa4d5fb 100644
--- a/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
+++ b/src/features/devtools/components/PermissionsEditor/PermissionsEditor.tsx
@@ -30,7 +30,7 @@ export const PermissionsEditor = () => {
       className={classes.checkboxWrapper}
     >
       <Checkbox
-        size='small'
+        size='sm'
         checked={Boolean(write)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -43,7 +43,7 @@ export const PermissionsEditor = () => {
         Write
       </Checkbox>
       <Checkbox
-        size='small'
+        size='sm'
         checked={Boolean(actions?.confirm)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -56,7 +56,7 @@ export const PermissionsEditor = () => {
         Confirm
       </Checkbox>
       <Checkbox
-        size='small'
+        size='sm'
         checked={Boolean(actions?.sign)}
         onChange={(e) =>
           handleChange((obj) => {
@@ -69,7 +69,7 @@ export const PermissionsEditor = () => {
         Sign
       </Checkbox>
       <Checkbox
-        size='small'
+        size='sm'
         checked={Boolean(actions?.reject)}
         onChange={(e) =>
           handleChange((obj) => {
diff --git a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
index 2a4f49eb29..40a7cf569f 100644
--- a/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
+++ b/src/features/devtools/components/VersionSwitcher/VersionSwitcher.tsx
@@ -77,7 +77,7 @@ export const VersionSwitcher = () => {
       {selectedVersion && <span>Last inn siden på nytt for å gå tilbake til opprinnelig versjon.</span>}
       <Button
         id='version-switcher-button'
-        size='small'
+        size='sm'
         style={{ width: '100%' }}
         disabled={!selectedVersion}
         onClick={onClick}
diff --git a/src/features/instantiate/containers/InvalidSubformLayoutError.tsx b/src/features/instantiate/containers/InvalidSubformLayoutError.tsx
index 762344861b..51fbf88efd 100644
--- a/src/features/instantiate/containers/InvalidSubformLayoutError.tsx
+++ b/src/features/instantiate/containers/InvalidSubformLayoutError.tsx
@@ -56,7 +56,7 @@ export function InvalidSubformLayoutError({ error }: { error: InvalidSubformLayo
               <br />
               <br />
               <Button
-                size='small'
+                size='sm'
                 onClick={openLog}
               >
                 Vis logg
diff --git a/src/features/instantiate/containers/PartySelection.tsx b/src/features/instantiate/containers/PartySelection.tsx
index b614846c0e..cfb9548e86 100644
--- a/src/features/instantiate/containers/PartySelection.tsx
+++ b/src/features/instantiate/containers/PartySelection.tsx
@@ -135,7 +135,7 @@ export const PartySelection = () => {
             direction='row'
           >
             <Button
-              size='small'
+              size='sm'
               variant='secondary'
               onClick={() => setNumberOfPartiesShown(numberOfPartiesShown + 4)}
             >
diff --git a/src/features/instantiate/containers/UnknownError.tsx b/src/features/instantiate/containers/UnknownError.tsx
index dc47cc5631..6a2256b515 100644
--- a/src/features/instantiate/containers/UnknownError.tsx
+++ b/src/features/instantiate/containers/UnknownError.tsx
@@ -44,7 +44,7 @@ export function UnknownError() {
               <br />
               <br />
               <Button
-                size='small'
+                size='sm'
                 onClick={openLog}
               >
                 Vis logg
diff --git a/src/features/instantiate/selection/InstanceSelection.tsx b/src/features/instantiate/selection/InstanceSelection.tsx
index 3e471cda63..725460daa7 100644
--- a/src/features/instantiate/selection/InstanceSelection.tsx
+++ b/src/features/instantiate/selection/InstanceSelection.tsx
@@ -91,7 +91,7 @@ function InstanceSelection() {
   const renderMobileTable = () => (
     <>
       <Heading
-        size='xsmall'
+        size='xs'
         level={3}
         className={classes.leftOffHeading}
       >
@@ -125,8 +125,8 @@ function InstanceSelection() {
                   <div className={classes.tableButtonWrapper}>
                     <Button
                       variant='tertiary'
-                      size='small'
-                      color='second'
+                      size='sm'
+                      color='neutral'
                       icon={true}
                       onClick={handleOpenInstance}
                       onMouseDown={handleOpenInstance}
@@ -191,8 +191,8 @@ function InstanceSelection() {
                 <div className={classes.tableButtonWrapper}>
                   <Button
                     variant='tertiary'
-                    size='small'
-                    color='second'
+                    size='sm'
+                    color='neutral'
                     onClick={(ev) => {
                       storeCallback(focusMainContent);
                       openInstance(instance.id, ev);
@@ -246,7 +246,7 @@ function InstanceSelection() {
         <div>
           <Heading
             level={2}
-            size='medium'
+            size='md'
             id='instance-selection-header'
           >
             <Lang id={'instance_selection.header'} />
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index d22259df5a..281139ec32 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert as AlertDesignSystem, ErrorMessage } from '@digdir/designsystemet-react';
+import { Alert as AlertDesignSystem, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
@@ -97,13 +97,13 @@ function ErrorValidations({ validations, node }: { validations: BaseValidation<'
     <ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
       {validations.map((validation) => (
         <li key={getUniqueKeyFromObject(validation)}>
-          <ErrorMessage size='small'>
+          <ValidationMessage size='sm'>
             <Lang
               id={validation.message.key}
               params={validation.message.params}
               node={node}
             />
-          </ErrorMessage>
+          </ValidationMessage>
         </li>
       ))}
     </ul>
@@ -125,7 +125,7 @@ function SoftValidations({
     <div style={{ paddingTop: 'var(--fds-spacing-2)' }}>
       <AlertDesignSystem
         style={{ breakInside: 'avoid' }}
-        severity={severity}
+        color={severity}
       >
         <ul style={{ paddingLeft: 0, listStyleType: 'none' }}>
           {validations.map((validation) => (
diff --git a/src/index.tsx b/src/index.tsx
index b3c7909953..847df67912 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,7 @@ import 'src/features/toggles';
 import 'src/features/logging';
 import 'src/features/styleInjection';
 import '@digdir/designsystemet-css';
+import '@digdir/designsystemet-theme';
 
 import { AppWrapper } from '@altinn/altinn-design-system';
 
@@ -41,7 +42,6 @@ import * as queries from 'src/queries/queries';
 
 import 'react-toastify/dist/ReactToastify.css';
 import 'src/index.css';
-import '@digdir/designsystemet-theme/brand/altinn/tokens.css';
 
 const router = createHashRouter([
   {
diff --git a/src/language/sharedLanguage.ts b/src/language/sharedLanguage.ts
index 2a0881eaf7..ab8573ebde 100644
--- a/src/language/sharedLanguage.ts
+++ b/src/language/sharedLanguage.ts
@@ -84,42 +84,42 @@ const parserOptions: HTMLReactParserOptions = {
     if (isElement(domNode) && domNode.name === 'h1') {
       return React.createElement(
         Heading,
-        { level: 1, size: 'large' },
+        { level: 1, size: 'lg' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h2') {
       return React.createElement(
         Heading,
-        { level: 2, size: 'medium' },
+        { level: 2, size: 'md' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h3') {
       return React.createElement(
         Heading,
-        { level: 3, size: 'small' },
+        { level: 3, size: 'sm' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h4') {
       return React.createElement(
         Heading,
-        { level: 4, size: 'xsmall' },
+        { level: 4, size: 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h5') {
       return React.createElement(
         Heading,
-        { level: 5, size: 'xsmall' },
+        { level: 5, size: 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
     if (isElement(domNode) && domNode.name === 'h6') {
       return React.createElement(
         Heading,
-        { level: 6, size: 'xsmall' },
+        { level: 6, size: 'xs' },
         domToReact(domNode.children as DOMNode[], parserOptions),
       );
     }
diff --git a/src/layout/Accordion/AccordionItem.tsx b/src/layout/Accordion/AccordionItem.tsx
index f39b610d42..a747d59a04 100644
--- a/src/layout/Accordion/AccordionItem.tsx
+++ b/src/layout/Accordion/AccordionItem.tsx
@@ -30,14 +30,10 @@ export const AccordionItem = ({
   return (
     <DesignSystemAccordion.Item
       open={isOpen as boolean}
+      onToggle={handleHeaderClick}
       className={cn(className, classes.accordion)}
     >
-      <DesignSystemAccordion.Header
-        level={headingLevel}
-        onHeaderClick={handleHeaderClick}
-      >
-        {title}
-      </DesignSystemAccordion.Header>
+      <DesignSystemAccordion.Heading>{title}</DesignSystemAccordion.Heading>
       <DesignSystemAccordion.Content>{children}</DesignSystemAccordion.Content>
     </DesignSystemAccordion.Item>
   );
diff --git a/src/layout/ActionButton/ActionButtonComponent.tsx b/src/layout/ActionButton/ActionButtonComponent.tsx
index 1f74f243e3..38f3848978 100644
--- a/src/layout/ActionButton/ActionButtonComponent.tsx
+++ b/src/layout/ActionButton/ActionButtonComponent.tsx
@@ -15,8 +15,8 @@ import type { ActionButtonStyle } from 'src/layout/ActionButton/config.generated
 import type { ButtonColor, ButtonVariant } from 'src/layout/Button/WrappedButton';
 
 export const buttonStyles: { [style in ActionButtonStyle]: { color: ButtonColor; variant: ButtonVariant } } = {
-  primary: { variant: 'primary', color: 'success' },
-  secondary: { variant: 'secondary', color: 'first' },
+  primary: { variant: 'primary', color: 'accent' }, //success
+  secondary: { variant: 'secondary', color: 'accent' },
 };
 
 export type IActionButton = PropsFromGenericComponent<'ActionButton'>;
@@ -49,7 +49,7 @@ export function ActionButtonComponent({ node }: IActionButton) {
         }}
       >
         <Button
-          size='small'
+          size='sm'
           id={`action-button-${id}`}
           variant={variant}
           color={color}
diff --git a/src/layout/Address/AddressComponent.tsx b/src/layout/Address/AddressComponent.tsx
index 9c09d3c86c..dffc196694 100644
--- a/src/layout/Address/AddressComponent.tsx
+++ b/src/layout/Address/AddressComponent.tsx
@@ -69,7 +69,7 @@ export function AddressComponent({ node }: IAddressProps) {
               id={`address_address_${id}`}
               data-bindingkey={bindingKeys.address}
               error={hasValidationErrors(bindingValidations?.address)}
-              size={'small'}
+              size={'sm'}
               value={address}
               onChange={(ev) => setValue('address', ev.target.value)}
               onBlur={debounce}
@@ -99,7 +99,7 @@ export function AddressComponent({ node }: IAddressProps) {
                 id={`address_care_of_${id}`}
                 data-bindingkey={bindingKeys.careOf}
                 error={hasValidationErrors(bindingValidations?.careOf)}
-                size={'small'}
+                size={'sm'}
                 value={careOf}
                 onChange={(ev) => setValue('careOf', ev.target.value)}
                 onBlur={debounce}
@@ -130,7 +130,7 @@ export function AddressComponent({ node }: IAddressProps) {
               id={`address_zip_code_${id}`}
               data-bindingkey={bindingKeys.zipCode}
               error={hasValidationErrors(bindingValidations?.zipCode)}
-              size='small'
+              size='sm'
               value={zipCode}
               onChange={(ev) => setValue('zipCode', ev.target.value)}
               onBlur={debounce}
@@ -155,7 +155,7 @@ export function AddressComponent({ node }: IAddressProps) {
               id={`address_post_place_${id}`}
               data-bindingkey={bindingKeys.postPlace}
               error={hasValidationErrors(bindingValidations?.postPlace)}
-              size='small'
+              size='sm'
               value={postPlace}
               readOnly={true}
               required={required}
@@ -184,7 +184,7 @@ export function AddressComponent({ node }: IAddressProps) {
                 id={`address_house_number_${id}`}
                 data-bindingkey={bindingKeys.houseNumber}
                 error={hasValidationErrors(bindingValidations?.houseNumber)}
-                size={'small'}
+                size={'sm'}
                 value={houseNumber}
                 onChange={(ev) => setValue('houseNumber', ev.target.value)}
                 onBlur={debounce}
diff --git a/src/layout/Alert/AlertBaseComponent.tsx b/src/layout/Alert/AlertBaseComponent.tsx
index d353f31830..beff877af1 100644
--- a/src/layout/Alert/AlertBaseComponent.tsx
+++ b/src/layout/Alert/AlertBaseComponent.tsx
@@ -23,7 +23,7 @@ export type AlertBaseComponentProps = {
 export const AlertBaseComponent = ({ title, children, useAsAlert, severity, ariaLabel }: AlertBaseComponentProps) => (
   <AlertDesignSystem
     className={styles.container}
-    severity={severity}
+    color={severity}
     role={useAsAlert ? 'alert' : undefined}
     aria-live={useAsAlert ? calculateAriaLive(severity) : undefined}
     aria-label={useAsAlert ? (ariaLabel ?? title) : undefined}
diff --git a/src/layout/Button/SubmitButton.tsx b/src/layout/Button/SubmitButton.tsx
index d80c299b2b..114346bed9 100644
--- a/src/layout/Button/SubmitButton.tsx
+++ b/src/layout/Button/SubmitButton.tsx
@@ -6,7 +6,7 @@ import type { ButtonProps } from 'src/layout/Button/WrappedButton';
 export const SubmitButton = ({ children, ...props }: ButtonProps) => (
   <WrappedButton
     {...props}
-    color='success'
+    color='accent' //success
     variant='primary'
   >
     {children}
diff --git a/src/layout/Button/WrappedButton.tsx b/src/layout/Button/WrappedButton.tsx
index e5fe39ee85..176144829e 100644
--- a/src/layout/Button/WrappedButton.tsx
+++ b/src/layout/Button/WrappedButton.tsx
@@ -25,7 +25,7 @@ interface Props extends ButtonProps {
 export const WrappedButton = ({
   nodeId,
   variant = 'secondary',
-  color = 'first',
+  color = 'accent',
   onClick,
   children,
   busyWithId,
@@ -45,7 +45,7 @@ export const WrappedButton = ({
       <ButtonLoader isLoading={thisIsLoading}>
         <Button
           data-is-loading={thisIsLoading ? 'true' : 'false'}
-          size='small'
+          size='sm'
           variant={variant}
           color={color}
           onClick={handleClick}
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index d52ee1ffc5..c840f43f18 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -49,14 +49,14 @@ export const Cards = ({ node }: ICardsProps) => {
               />
             )}
             {card.title && (
-              <Card.Header>
+              <Card.Block>
                 <Lang id={card.title} />
-              </Card.Header>
+              </Card.Block>
             )}
             {card.description && (
-              <Card.Content>
+              <Card.Block>
                 <Lang id={card.description} />
-              </Card.Content>
+              </Card.Block>
             )}
             {card.children && card.children.length > 0 && (
               <Grid
@@ -86,9 +86,9 @@ export const Cards = ({ node }: ICardsProps) => {
               </Grid>
             )}
             {card.footer && (
-              <Card.Footer>
+              <Card.Block>
                 <Lang id={card.footer} />
-              </Card.Footer>
+              </Card.Block>
             )}
             {mediaPosition === 'bottom' && (
               <Media
@@ -116,7 +116,7 @@ function Media({ card, node, minMediaHeight }: MediaProps) {
   }
 
   return (
-    <Card.Media>
+    <Card.Block>
       <CardProvider
         node={node}
         renderedInMedia={true}
@@ -134,6 +134,6 @@ function Media({ card, node, minMediaHeight }: MediaProps) {
           />
         </div>
       </CardProvider>
-    </Card.Media>
+    </Card.Block>
   );
 }
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index a5159834e4..960dcca979 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -53,14 +53,14 @@ export function WrappedCheckbox({ id, option, hideLabel, alertOnChange, checked,
         description={option.description && <Lang id={option.description} />}
         value={option.value}
         checked={checked}
-        size='small'
+        size='sm'
         onChange={(e) => handleChange(e.target.checked)}
       >
         {
           <span className={cn({ 'sr-only': hideLabel }, classes.checkboxLabelContainer)}>
             {langAsString(option.label)}
             {option.helpText && (
-              <HelpText title={elementAsString(option.helpText)}>
+              <HelpText aria-label={elementAsString(option.helpText)}>
                 <Lang id={option.helpText} />
               </HelpText>
             )}
diff --git a/src/layout/CustomButton/CustomButtonComponent.tsx b/src/layout/CustomButton/CustomButtonComponent.tsx
index 595965d817..6ffa9c058a 100644
--- a/src/layout/CustomButton/CustomButtonComponent.tsx
+++ b/src/layout/CustomButton/CustomButtonComponent.tsx
@@ -210,8 +210,24 @@ export function useActionAuthorization() {
 }
 
 export const buttonStyles: { [style in CBTypes.ButtonStyle]: { color: ButtonColor; variant: ButtonVariant } } = {
-  primary: { variant: 'primary', color: 'success' },
-  secondary: { variant: 'secondary', color: 'first' },
+  primary: { variant: 'primary', color: 'accent' }, //success
+  secondary: { variant: 'secondary', color: 'accent' },
+};
+
+const sizeMap: Record<string, 'sm' | 'md' | 'lg'> = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+};
+
+const colorMap: Record<string, ButtonColor> = {
+  first: 'accent',
+  second: 'neutral',
+  success: 'accent',
+  danger: 'danger',
 };
 
 export const CustomButtonComponent = ({ node }: Props) => {
@@ -275,8 +291,8 @@ export const CustomButtonComponent = ({ node }: Props) => {
         id={`custom-button-${id}`}
         disabled={disabled}
         onClick={onClick}
-        size={buttonSize}
-        color={buttonColor ?? style.color}
+        size={sizeMap[buttonSize ?? 'medium']}
+        color={colorMap[buttonColor ?? 'accent'] ?? style.color}
         variant={style.variant}
         aria-busy={isPending}
       >
diff --git a/src/layout/Datepicker/DatePickerInput.tsx b/src/layout/Datepicker/DatePickerInput.tsx
index 1591e3febc..bcfb36ad78 100644
--- a/src/layout/Datepicker/DatePickerInput.tsx
+++ b/src/layout/Datepicker/DatePickerInput.tsx
@@ -68,8 +68,8 @@ export const DatePickerInput = forwardRef(
           aria-label={langAsString('date_picker.aria_label_icon')}
           ref={ref}
           disabled={readOnly}
-          color='first'
-          size='small'
+          color='accent'
+          size='sm'
         >
           <CalendarIcon title={langAsString('date_picker.aria_label_icon')} />
         </Button>
diff --git a/src/layout/Datepicker/DatepickerComponent.tsx b/src/layout/Datepicker/DatepickerComponent.tsx
index 745a1f79ff..cf07728b1c 100644
--- a/src/layout/Datepicker/DatepickerComponent.tsx
+++ b/src/layout/Datepicker/DatepickerComponent.tsx
@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 
-import { Modal, Popover } from '@digdir/designsystemet-react';
+import { Button, Modal, Popover } from '@digdir/designsystemet-react';
 import { Grid } from '@material-ui/core';
 import { formatDate, isValid as isValidDate, parse, parseISO } from 'date-fns';
 
@@ -62,35 +62,36 @@ export function DatepickerComponent({ node }: IDatepickerProps) {
         {trigger}
         <Modal
           role='dialog'
+          closeButton={false}
           ref={modalRef}
-          onInteractOutside={() => modalRef.current?.close()}
+          backdropClose={true}
           style={{ width: 'fit-content', minWidth: 'fit-content' }}
         >
-          <Modal.Content>{content}</Modal.Content>
+          {content}
         </Modal>
       </>
     ) : (
-      <Popover
-        portal={false}
-        open={isDialogOpen}
-        onClose={() => setIsDialogOpen(false)}
-        size='lg'
-        placement='top'
-      >
-        <Popover.Trigger
+      <>
+        <Button
           onClick={() => setIsDialogOpen(!isDialogOpen)}
           asChild={true}
+          popovertarget={`datepicker-popover-${id}`}
         >
           {trigger}
-        </Popover.Trigger>
-        <Popover.Content
+        </Button>
+        <Popover
+          id={`datepicker-popover-${id}`}
+          size='lg'
+          placement='top'
+          onClose={() => setIsDialogOpen(false)}
+          open={isDialogOpen}
           className={styles.calendarWrapper}
           aria-modal
           autoFocus={true}
         >
           {content}
-        </Popover.Content>
-      </Popover>
+        </Popover>
+      </>
     );
 
   return (
diff --git a/src/layout/Datepicker/DropdownCaption.tsx b/src/layout/Datepicker/DropdownCaption.tsx
index 857a74bc3e..2fdd00929d 100644
--- a/src/layout/Datepicker/DropdownCaption.tsx
+++ b/src/layout/Datepicker/DropdownCaption.tsx
@@ -43,12 +43,12 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
       <div className={styles.dropdownCaption}>
         <Button
           icon={true}
-          color='second'
+          color='neutral'
           variant='tertiary'
           aria-label={langAsString('date_picker.aria_label_left_arrow')}
           disabled={!previousMonth}
           onClick={() => previousMonth && goToMonth(previousMonth)}
-          size='small'
+          size='sm'
         >
           <ArrowLeftIcon />
         </Button>
@@ -56,7 +56,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
           <Combobox
             style={{ width: '150px' }}
             id={id}
-            size='small'
+            size='sm'
             value={[calendarMonth.date.getMonth().toString()]}
             onValueChange={(months) => handleMonthChange(months[0])}
             aria-label={MonthDropdownLabel}
@@ -79,7 +79,7 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
           <Combobox
             style={{ width: '100px' }}
             id={id}
-            size='small'
+            size='sm'
             value={[calendarMonth.date.getFullYear().toString()]}
             onValueChange={(years) => handleYearChange(years[0])}
             aria-label={yearDropdownLabel}
@@ -102,12 +102,12 @@ export const DropdownCaption = ({ calendarMonth, id }: MonthCaptionProps) => {
         </div>
         <Button
           icon={true}
-          color='second'
+          color='neutral'
           variant='tertiary'
           aria-label={langAsString('date_picker.aria_label_right_arrow')}
           disabled={!nextMonth}
           onClick={() => nextMonth && goToMonth(nextMonth)}
-          size='small'
+          size='sm'
         >
           <ArrowRightIcon />
         </Button>
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx b/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx
index 3110dbc9d2..4b9ef3af4e 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx
+++ b/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx
@@ -76,9 +76,9 @@ export function FileTableButtons({ node, attachment, mobileView, editWindowIsOpe
     >
       <Button
         className={classes.button}
-        size='small'
+        size='sm'
         variant='tertiary'
-        color={showEditButton ? 'second' : 'danger'}
+        color={showEditButton ? 'neutral' : 'danger'}
         onClick={() => (showEditButton ? handleEdit(index) : handleDelete())}
         data-testid={`attachment-delete-${index}`}
         aria-label={langAsString(showEditButton ? 'general.edit_alt' : 'general.delete')}
diff --git a/src/layout/FileUploadWithTag/EditWindowComponent.tsx b/src/layout/FileUploadWithTag/EditWindowComponent.tsx
index 327330aaf5..68b95ea701 100644
--- a/src/layout/FileUploadWithTag/EditWindowComponent.tsx
+++ b/src/layout/FileUploadWithTag/EditWindowComponent.tsx
@@ -215,7 +215,7 @@ export function EditWindowComponent({
                 />
               ) : (
                 <Button
-                  size='small'
+                  size='sm'
                   onClick={handleSave}
                   id={`attachment-save-tag-button-${uniqueId}`}
                 >
diff --git a/src/layout/Grid/GridSummary.tsx b/src/layout/Grid/GridSummary.tsx
index f1e7f3f3d0..ac0672e9c9 100644
--- a/src/layout/Grid/GridSummary.tsx
+++ b/src/layout/Grid/GridSummary.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { JSX, PropsWithChildren } from 'react';
 
-import { ErrorMessage, Heading, Table } from '@digdir/designsystemet-react';
+import { Heading, Table, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { LabelContent } from 'src/components/label/LabelContent';
@@ -348,13 +348,13 @@ function CellWithComponent({
       <div className={cn({ [classes.errorMessage]: errors.length > 0 })}></div>
       {errors.length > 0 &&
         errors.map(({ message }) => (
-          <ErrorMessage key={message.key}>
+          <ValidationMessage key={message.key}>
             <Lang
               id={message.key}
               params={message.params}
               node={node}
             ></Lang>
-          </ErrorMessage>
+          </ValidationMessage>
         ))}
     </CellComponent>
   );
diff --git a/src/layout/Group/GroupComponent.tsx b/src/layout/Group/GroupComponent.tsx
index e443c114eb..448290cdaf 100644
--- a/src/layout/Group/GroupComponent.tsx
+++ b/src/layout/Group/GroupComponent.tsx
@@ -27,11 +27,11 @@ export interface IGroupComponent {
 }
 
 const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+  [2]: 'md',
+  [3]: 'sm',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function GroupComponent({
diff --git a/src/layout/Group/GroupSummary.tsx b/src/layout/Group/GroupSummary.tsx
index e7f7282521..590bad18ea 100644
--- a/src/layout/Group/GroupSummary.tsx
+++ b/src/layout/Group/GroupSummary.tsx
@@ -77,7 +77,7 @@ export const GroupSummary = ({ componentNode, hierarchyLevel = 0, summaryOverrid
       data-testid={dataTestId}
     >
       <Heading
-        size={isNestedGroup ? 'xsmall' : 'small'}
+        size={isNestedGroup ? 'xs' : 'sm'}
         level={headingLevel}
       >
         <Lang
diff --git a/src/layout/Header/HeaderComponent.tsx b/src/layout/Header/HeaderComponent.tsx
index 3c0279a30b..fb5e7d54e3 100644
--- a/src/layout/Header/HeaderComponent.tsx
+++ b/src/layout/Header/HeaderComponent.tsx
@@ -23,14 +23,14 @@ function getHeaderProps(size?: string): HeadingProps {
     case 'h2': {
       return {
         level: 2,
-        size: 'medium',
+        size: 'md',
       };
     }
     case 'M':
     case 'h3': {
       return {
         level: 3,
-        size: 'small',
+        size: 'sm',
       };
     }
     case 'S':
@@ -38,7 +38,7 @@ function getHeaderProps(size?: string): HeadingProps {
     default: {
       return {
         level: 4,
-        size: 'xsmall',
+        size: 'xs',
       };
     }
   }
diff --git a/src/layout/Input/InputComponent.tsx b/src/layout/Input/InputComponent.tsx
index 24efc64dc5..7e02006d8a 100644
--- a/src/layout/Input/InputComponent.tsx
+++ b/src/layout/Input/InputComponent.tsx
@@ -41,7 +41,7 @@ const TextOnly: React.FunctionComponent<TextfieldProps> = ({ className, id, valu
   return (
     <Paragraph
       id={id}
-      size='small'
+      size='sm'
       className={`${classes.textPadding} ${classes.focusable}  ${className}`}
       tabIndex={0}
     >
@@ -62,7 +62,7 @@ const TextfieldWrapped: React.FunctionComponent<InputComponentProps> = (props) =
 
   return (
     <Textfield
-      size={'small'}
+      size={'sm'}
       prefix={prefixText}
       suffix={suffixText}
       {...customProps}
diff --git a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
index b2a8c7bd84..b37f96dcde 100644
--- a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
+++ b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx
@@ -22,11 +22,11 @@ export interface IDisplayLikertContainer {
 }
 
 const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+  [2]: 'md',
+  [3]: 'sm',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function LargeLikertSummaryContainer({
diff --git a/src/layout/Likert/Summary2/LikertSummary.tsx b/src/layout/Likert/Summary2/LikertSummary.tsx
index 320c1c3672..279de6adc2 100644
--- a/src/layout/Likert/Summary2/LikertSummary.tsx
+++ b/src/layout/Likert/Summary2/LikertSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 
 import { Lang } from 'src/features/language/Lang';
 import { useUnifiedValidationsForNode } from 'src/features/validation/selectors/unifiedValidationsForNode';
@@ -66,13 +66,13 @@ export function LikertSummary({ componentNode, emptyFieldText, isCompact }: Like
         />
       ))}
       {errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage key={message.key}>
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           ></Lang>
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/Link/LinkComponent.tsx b/src/layout/Link/LinkComponent.tsx
index f74df59551..43ec471b2e 100644
--- a/src/layout/Link/LinkComponent.tsx
+++ b/src/layout/Link/LinkComponent.tsx
@@ -15,8 +15,8 @@ import type { LinkStyle } from 'src/layout/Link/config.generated';
 export const buttonStyles: {
   [style in Exclude<LinkStyle, 'link'>]: { color: ButtonColor; variant: ButtonVariant };
 } = {
-  primary: { variant: 'primary', color: 'success' },
-  secondary: { variant: 'secondary', color: 'first' },
+  primary: { variant: 'primary', color: 'accent' }, //success
+  secondary: { variant: 'secondary', color: 'accent' }, //first
 };
 
 export type ILinkComponent = PropsFromGenericComponent<'Link'>;
@@ -48,7 +48,7 @@ export function LinkComponent({ node }: ILinkComponent) {
       style={style}
       color={buttonStyles[linkStyle].color}
       variant={buttonStyles[linkStyle].variant}
-      size='small'
+      size='sm'
       onClick={LinkButtonOnClick()}
     >
       <Lang id={textResourceBindings?.title} />
diff --git a/src/layout/List/ListComponent.tsx b/src/layout/List/ListComponent.tsx
index 94cb0b6ffc..3f2df03be6 100644
--- a/src/layout/List/ListComponent.tsx
+++ b/src/layout/List/ListComponent.tsx
@@ -151,9 +151,8 @@ export const ListComponent = ({ node }: IListProps) => {
             {Object.entries(tableHeaders).map(([key, value]) => (
               <Table.HeaderCell
                 key={key}
-                sortable={sortableColumns?.includes(key)}
-                sort={sortColumn === key ? sortDirection : undefined}
-                onSortClick={() => {
+                sort={sortableColumns?.includes(key) && sortColumn === key ? sortDirection : undefined}
+                onClick={() => {
                   if (sortColumn === key) {
                     setSortDirection(sortDirection === 'ascending' ? 'descending' : 'ascending');
                   } else {
diff --git a/src/layout/Map/Summary2/MapSummary.tsx b/src/layout/Map/Summary2/MapSummary.tsx
index 90fc5cca43..aca40ffb20 100644
--- a/src/layout/Map/Summary2/MapSummary.tsx
+++ b/src/layout/Map/Summary2/MapSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage } from '@digdir/designsystemet-react';
+import { ValidationMessage } from '@digdir/designsystemet-react';
 import { Typography } from '@material-ui/core';
 import cn from 'classnames';
 
@@ -83,13 +83,13 @@ export function MapSummary({ componentNode, emptyFieldText, isCompact }: MapSumm
         </Typography>
       )}
       {errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage key={message.key}>
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           ></Lang>
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/NavigationButtons/NavigationButtonsComponent.tsx b/src/layout/NavigationButtons/NavigationButtonsComponent.tsx
index 33fdcd5f76..a7bf96f0fd 100644
--- a/src/layout/NavigationButtons/NavigationButtonsComponent.tsx
+++ b/src/layout/NavigationButtons/NavigationButtonsComponent.tsx
@@ -120,7 +120,7 @@ export function NavigationButtonsComponent({ node }: INavigationButtons) {
             <Button
               disabled={isSaving}
               ref={refNext}
-              size='small'
+              size='sm'
               onClick={onClickBackToSummary}
             >
               <Lang id={returnToViewText} />
@@ -132,7 +132,7 @@ export function NavigationButtonsComponent({ node }: INavigationButtons) {
             <Button
               disabled={isSaving}
               ref={refNext}
-              size='small'
+              size='sm'
               onClick={onClickNext}
               // If we are showing a back to summary button, we want the "next" button to be secondary
               variant={showBackToSummaryButton ? 'secondary' : 'primary'}
@@ -146,7 +146,7 @@ export function NavigationButtonsComponent({ node }: INavigationButtons) {
             <Button
               disabled={isSaving}
               ref={refPrev}
-              size='small'
+              size='sm'
               variant={showNextButton || showBackToSummaryButton ? 'secondary' : 'primary'}
               onClick={onClickPrevious}
             >
diff --git a/src/layout/Payment/PaymentComponent.tsx b/src/layout/Payment/PaymentComponent.tsx
index 98baf67d39..ee6d4fe33b 100644
--- a/src/layout/Payment/PaymentComponent.tsx
+++ b/src/layout/Payment/PaymentComponent.tsx
@@ -59,12 +59,12 @@ export const PaymentComponent = ({ node }: PropsFromGenericComponent<'Payment'>)
         />
         <div className={classes.alertContainer}>
           {(paymentInfo?.status === PaymentStatus.Failed || paymentError) && (
-            <Alert severity='warning'>
+            <Alert color='warning'>
               <Lang id='payment.alert.failed' />
             </Alert>
           )}
           {paymentInfo?.status === PaymentStatus.Paid && (
-            <Alert severity={'info'}>
+            <Alert color={'info'}>
               <Lang id='payment.alert.paid' />
             </Alert>
           )}
@@ -78,10 +78,8 @@ export const PaymentComponent = ({ node }: PropsFromGenericComponent<'Payment'>)
               >
                 <Lang id='general.back' />
               </Button>
-              <Button
-                color='success'
-                onClick={() => performPayment()}
-              >
+              <Button className={classes.payButton}>
+                {/*success*/}
                 <Lang id='payment.pay' />
               </Button>
             </>
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
index 75016754e3..0f759bd7c2 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.tsx
@@ -22,17 +22,13 @@ type PaymentInfoTableRowProps = {
 const PaymentInfoTableRow = ({ labelId, value }: PaymentInfoTableRowProps) => (
   <tr>
     <th>
-      <Paragraph
-        size='small'
-        spacing={false}
-      >
+      <Paragraph size='sm'>
         <Lang id={labelId} />
       </Paragraph>
     </th>
     <td>
       <Label
-        size='small'
-        spacing={false}
+        size='sm'
         asChild
       >
         <span>{value}</span>
@@ -137,34 +133,22 @@ export const PaymentReceiptDetails = ({ title, description }: PaymentReceiptDeta
     <div className={classes.paymentSummaryContainer}>
       <div className={classes.infoDetailsContainer}>
         {paymentInfo?.paymentDetails?.paymentId && (
-          <Paragraph
-            size='small'
-            spacing={false}
-          >
+          <Paragraph size='sm'>
             <Lang id='payment.receipt.payment_id' />: <b>{paymentInfo.paymentDetails.paymentId}</b>
           </Paragraph>
         )}
         {instanceId && (
-          <Paragraph
-            size='small'
-            spacing={false}
-          >
+          <Paragraph size='sm'>
             <Lang id='payment.receipt.altinn_ref' />: <b>{getInstanceReferenceNumber(instanceId)}</b>
           </Paragraph>
         )}
         {paymentInfo?.paymentDetails?.chargedDate && (
-          <Paragraph
-            size='small'
-            spacing={false}
-          >
+          <Paragraph size='sm'>
             <Lang id='payment.receipt.payment_date' />:{' '}
             <b>{formatDateLocale(selectedLanguage, new Date(paymentInfo?.paymentDetails?.chargedDate))}</b>
           </Paragraph>
         )}
-        <Paragraph
-          size='small'
-          spacing={false}
-        >
+        <Paragraph size='sm'>
           <Lang id='payment.receipt.total_amount' />:{' '}
           <b>
             {paymentInfo?.orderDetails.totalPriceIncVat} {paymentInfo?.orderDetails?.currency}
diff --git a/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx b/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
index 52e826d20c..f869176933 100644
--- a/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
+++ b/src/layout/Payment/SkeletonLoader/SkeletonLoader.tsx
@@ -6,24 +6,35 @@ import classes from 'src/layout/Payment/SkeletonLoader/SkeletonLoader.module.css
 
 export const SkeletonLoader = () => (
   <div className={classes.skeletonWrapper}>
-    <Skeleton.Rectangle
+    <Skeleton
+      variant='rectangle'
       width='100%'
       height='150px'
     />
     <div className={classes.titleContainer}>
-      <Skeleton.Circle
+      <Skeleton
+        variant='circle'
         width='30px'
         height='30px'
       />
       <Heading
         asChild
-        size='medium'
+        size='md'
       >
-        <Skeleton.Text>En medium tittel</Skeleton.Text>
+        <Skeleton variant='text'>En medium tittel</Skeleton>
       </Heading>
     </div>
-    <Skeleton.Text width='100%' />
-    <Skeleton.Text width='100%' />
-    <Skeleton.Text width='80%' />
+    <Skeleton
+      variant='text'
+      width='100%'
+    />
+    <Skeleton
+      variant='text'
+      width='100%'
+    />
+    <Skeleton
+      variant='text'
+      width='80%'
+    />
   </div>
 );
diff --git a/src/layout/PrintButton/PrintButtonComponent.tsx b/src/layout/PrintButton/PrintButtonComponent.tsx
index a9520eecd9..efe488d0f8 100644
--- a/src/layout/PrintButton/PrintButtonComponent.tsx
+++ b/src/layout/PrintButton/PrintButtonComponent.tsx
@@ -18,8 +18,8 @@ export const PrintButtonComponent = ({ node }: PropsFromGenericComponent<'PrintB
       <Button
         style={{ marginTop: parentIsPage ? 'var(--button-margin-top)' : undefined }}
         variant='secondary'
-        color='first'
-        size='small'
+        color='accent'
+        size='sm'
         onClick={window.print}
       >
         <Lang id={textResourceBindings?.title ?? 'general.print_button_text'} />
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index 4f69ac8e35..f91e9bdb4b 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -91,7 +91,7 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
               readOnly={readOnly}
               onChange={handleChange}
               hideLabel={hideLabel}
-              size='small'
+              size='sm'
               alertOnChange={alertOnChange}
               alertText={alertText}
               confirmChangeText={confirmChangeText}
diff --git a/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.module.css b/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.module.css
index d32edad85e..fd7a8df0d3 100644
--- a/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.module.css
+++ b/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.module.css
@@ -12,3 +12,7 @@
 .showAllFieldset > * {
   margin-top: 0 !important;
 }
+
+.addButton {
+  width: 100%;
+}
diff --git a/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.tsx b/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.tsx
index 163c806498..91a474f788 100644
--- a/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.tsx
+++ b/src/layout/RepeatingGroup/Container/RepeatingGroupContainer.tsx
@@ -10,6 +10,7 @@ import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper';
 import { Label } from 'src/components/label/Label';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { AllComponentValidations } from 'src/features/validation/ComponentValidations';
+import classes from 'src/layout/RepeatingGroup/Container/RepeatingGroupContainer.module.css';
 import { RepeatingGroupsEditContainer } from 'src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer';
 import { RepeatingGroupPagination } from 'src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination';
 import {
@@ -160,6 +161,7 @@ function AddButton() {
   return (
     <Button
       id={`add-button-${id}`}
+      className={classes.addButton}
       onClick={async () => {
         const newRow = await addRow();
         newRow.index !== undefined && triggerFocus(newRow.index);
@@ -173,7 +175,6 @@ function AddButton() {
       }}
       variant='secondary'
       disabled={currentlyAddingRow}
-      fullWidth
     >
       <AddIcon
         fontSize='1.5rem'
diff --git a/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx b/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx
index aa41908941..f1bc45a5f9 100644
--- a/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx
+++ b/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx
@@ -129,7 +129,7 @@ function RepeatingGroupsEditContainerInternal({
             <Button
               variant='tertiary'
               color='danger'
-              size='small'
+              size='sm'
               disabled={isDeleting(editId)}
               onClick={() => deleteRow({ index: row.index, uuid: row.uuid })}
               data-testid='delete-button'
@@ -182,9 +182,9 @@ function RepeatingGroupsEditContainerInternal({
               {hasPrevMultiPage && (
                 <Grid item={true}>
                   <Button
-                    size='small'
+                    size='sm'
                     variant='tertiary'
-                    color='second'
+                    color='neutral'
                     onClick={() => prevMultiPage()}
                     disabled={!isFresh}
                   >
@@ -199,9 +199,9 @@ function RepeatingGroupsEditContainerInternal({
               {hasNextMultiPage && (
                 <Grid item={true}>
                   <Button
-                    size='small'
+                    size='sm'
                     variant='tertiary'
-                    color='second'
+                    color='neutral'
                     onClick={() => nextMultiPage()}
                     disabled={!isFresh}
                   >
@@ -226,8 +226,8 @@ function RepeatingGroupsEditContainerInternal({
                   id={`next-button-grp-${id}`}
                   onClick={() => openNextForEditing()}
                   variant='primary'
-                  color='first'
-                  size='small'
+                  color='accent'
+                  size='sm'
                   disabled={!isFresh}
                 >
                   <Lang id={texts?.save_and_next_button ? texts?.save_and_next_button : 'general.save_and_next'} />
@@ -240,8 +240,8 @@ function RepeatingGroupsEditContainerInternal({
                   id={`save-button-${id}`}
                   onClick={() => closeForEditing({ index: row.index, uuid: row.uuid })}
                   variant={saveAndNextButtonVisible ? 'secondary' : 'primary'}
-                  color='first'
-                  size='small'
+                  color='accent'
+                  size='sm'
                   disabled={!isFresh}
                 >
                   <Lang id={texts?.save_button ? texts?.save_button : 'general.save_and_close'} />
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 6e37019abd..5cab96506a 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
@@ -89,10 +89,10 @@ function _RepeatingGroupPagination({ inTable = true }: RepeatingGroupPaginationP
         currentPage={currentPage + 1}
         totalPages={totalPages}
         pagesWithErrors={pagesWithErrors}
-        onChange={onChange}
+        onChange={() => onChange}
         compact={isTablet}
         hideLabels={isMobile}
-        size={isMini ? 'small' : 'medium'}
+        size={isMini ? 'sm' : 'md'}
       />
     </ConditionalWrapper>
   );
@@ -107,8 +107,7 @@ type PaginationComponentProps = {
   currentPage: number;
   totalPages: number;
   pagesWithErrors: number[];
-  onChange: Parameters<typeof Pagination>[0]['onChange'];
-} & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
+} & React.HTMLAttributes<HTMLElement>;
 
 const iconSize = {
   small: '1rem',
@@ -128,8 +127,8 @@ function PaginationComponent({
   onChange,
   ...rest
 }: PaginationComponentProps) {
-  const { pages, showNextPage, showPreviousPage } = usePagination({
-    compact,
+  const { pages, prevButtonProps, nextButtonProps, hasPrev, hasNext } = usePagination({
+    onChange,
     currentPage,
     totalPages,
   });
@@ -139,71 +138,59 @@ function PaginationComponent({
   const previousLabel = langAsString(backTextKey);
 
   return (
-    <Pagination.Root
+    <Pagination
       aria-label='Pagination'
       size={size}
-      compact={compact}
       {...rest}
     >
-      <Pagination.Content>
+      <Pagination.List>
         <Pagination.Item>
-          <Pagination.Previous
-            className={!showPreviousPage ? classes.hidden : undefined}
-            onClick={() => {
-              onChange(currentPage - 1);
-            }}
+          <Pagination.Button
+            className={!hasPrev ? classes.hidden : undefined}
             aria-label={previousLabel}
+            {...prevButtonProps}
           >
             <ChevronLeftIcon
               aria-hidden
               fontSize={iconSize[size]}
             />
             {!hideLabels && previousLabel}
-          </Pagination.Previous>
+          </Pagination.Button>
         </Pagination.Item>
-        {pages.map((page, i) => {
+        {pages.map(({ page, buttonProps, itemKey }) => {
           const hasErrors = typeof page === 'number' && pagesWithErrors.includes(page - 1);
           const label = hasErrors
             ? `${langAsString('general.edit_alt_error')}: ${langAsString('general.page_number', [page])}`
             : langAsString('general.page_number', [page]);
 
           return (
-            <Pagination.Item key={`${page}${i}`}>
-              {page === 'ellipsis' ? (
-                <Pagination.Ellipsis />
-              ) : (
-                <Pagination.Button
-                  color={hasErrors ? 'danger' : 'first'}
-                  aria-current={currentPage === page}
-                  isActive={currentPage === page}
-                  aria-label={label}
-                  onClick={() => {
-                    onChange(page);
-                  }}
-                >
-                  {page}
-                </Pagination.Button>
-              )}
+            <Pagination.Item key={itemKey}>
+              <Pagination.Button
+                color={hasErrors ? 'danger' : 'accent'}
+                aria-current={currentPage === page}
+                aria-label={label}
+                {...buttonProps}
+              >
+                {page}
+              </Pagination.Button>
             </Pagination.Item>
           );
         })}
         <Pagination.Item>
-          <Pagination.Next
+          <Pagination.Button
             aria-label={nextLabel}
-            onClick={() => {
-              onChange(currentPage + 1);
-            }}
-            className={!showNextPage ? classes.hidden : undefined}
+            className={!hasNext ? classes.hidden : undefined}
+            {...nextButtonProps}
           >
             {!hideLabels && nextLabel}
             <ChevronRightIcon
               aria-hidden
               fontSize={iconSize[size]}
             />
-          </Pagination.Next>
+          </Pagination.Button>
         </Pagination.Item>
-      </Pagination.Content>
-    </Pagination.Root>
+      </Pagination.List>
+    </Pagination>
   );
 }
 
diff --git a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
index 5e21328c8a..5904e0631a 100644
--- a/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
+++ b/src/layout/RepeatingGroup/Summary/LargeGroupSummaryContainer.tsx
@@ -23,11 +23,11 @@ export interface IDisplayRepAsLargeGroup {
 }
 
 const headingSizes: { [k in HeadingLevel]: Parameters<typeof Heading>[0]['size'] } = {
-  [2]: 'medium',
-  [3]: 'small',
-  [4]: 'xsmall',
-  [5]: 'xsmall',
-  [6]: 'xsmall',
+  [2]: 'md',
+  [3]: 'sm',
+  [4]: 'xs',
+  [5]: 'xs',
+  [6]: 'xs',
 };
 
 export function LargeGroupSummaryContainer({ groupNode, id, restriction, renderLayoutNode }: IDisplayRepAsLargeGroup) {
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
index 521fb5f10a..a43e440dd6 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Heading } from '@digdir/designsystemet-react';
+import { Heading, ValidationMessage } from '@digdir/designsystemet-react';
 import { Grid } from '@material-ui/core';
 import { ExclamationmarkTriangleIcon } from '@navikt/aksel-icons';
 import cn from 'classnames';
@@ -79,7 +79,7 @@ export const RepeatingGroupSummary = ({
         ))}
       </div>
       {errors?.map(({ message }) => (
-        <ErrorMessage
+        <ValidationMessage
           key={message.key}
           className={classes.errorMessage}
         >
@@ -89,7 +89,7 @@ export const RepeatingGroupSummary = ({
             params={message.params}
             node={componentNode}
           ></Lang>
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
     </div>
   );
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
index a031aaf93c..eb674ea816 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
@@ -246,8 +246,8 @@ function _RepeatingGroupTableRow({
                   aria-expanded={isEditingRow}
                   aria-controls={isEditingRow ? `group-edit-container-${id}-${uuid}` : undefined}
                   variant='tertiary'
-                  color='second'
-                  size='small'
+                  color='neutral'
+                  size='sm'
                   onClick={() => toggleEditing({ index: row.index, uuid: row.uuid })}
                   aria-label={`${editButtonText} ${firstCellData ?? ''}`}
                   data-testid='edit-button'
@@ -305,8 +305,8 @@ function _RepeatingGroupTableRow({
                 aria-expanded={isEditingRow}
                 aria-controls={isEditingRow ? `group-edit-container-${id}-${uuid}` : undefined}
                 variant='tertiary'
-                color='second'
-                size='small'
+                color='neutral'
+                size='sm'
                 icon={!isEditingRow && mobileViewSmall}
                 onClick={() => toggleEditing({ index, uuid })}
                 aria-label={`${editButtonText} ${firstCellData ?? ''}`}
@@ -415,7 +415,7 @@ function DeleteElement({
       <Button
         variant='tertiary'
         color='danger'
-        size='small'
+        size='sm'
         disabled={isDeletingRow || disabled}
         onClick={() => handleDelete({ index, uuid })}
         aria-label={`${deleteButtonText}-${firstCellData}`}
diff --git a/src/layout/Subform/SubformComponent.module.css b/src/layout/Subform/SubformComponent.module.css
index 60720f8de1..3d6b1e5ddf 100644
--- a/src/layout/Subform/SubformComponent.module.css
+++ b/src/layout/Subform/SubformComponent.module.css
@@ -81,11 +81,15 @@ Altinn, and making sure they are consistent. */
   background-color: var(--repeating-group-error-color) !important;
 }
 
-.addButton {
+.addButtonWrapper {
   width: 100%;
   margin-bottom: var(--fds-spacing-2);
 }
 
+.addButton {
+  width: 100%;
+}
+
 .emptyField {
   font-style: italic;
   font-size: 1rem;
diff --git a/src/layout/Subform/SubformComponent.tsx b/src/layout/Subform/SubformComponent.tsx
index d70197830e..480fd326e4 100644
--- a/src/layout/Subform/SubformComponent.tsx
+++ b/src/layout/Subform/SubformComponent.tsx
@@ -141,8 +141,9 @@ export function SubformComponent({ node }: PropsFromGenericComponent<'Subform'>)
         </Table>
 
         {showAddButton && (
-          <div className={classes.addButton}>
+          <div className={classes.addButtonWrapper}>
             <Button
+              className={classes.addButton}
               disabled={isAdding}
               id={`subform-${id}-add-button`}
               onClick={async () => await addEntry()}
@@ -153,7 +154,6 @@ export function SubformComponent({ node }: PropsFromGenericComponent<'Subform'>)
                 }
               }}
               variant='secondary'
-              fullWidth
             >
               <AddIcon
                 fontSize='1.5rem'
@@ -253,8 +253,8 @@ function SubformTableRow({
           <Button
             disabled={isDeleting}
             variant='tertiary'
-            color='second'
-            size='small'
+            color='neutral'
+            size='sm'
             onClick={async () => navigate(`${node.id}/${id}${hasErrors ? '?validate=true' : ''}`)}
             aria-label={editButtonText}
             data-testid='edit-button'
@@ -275,7 +275,7 @@ function SubformTableRow({
               disabled={isDeleting}
               variant='tertiary'
               color='danger'
-              size='small'
+              size='sm'
               onClick={async () => await deleteEntry()}
               aria-label={deleteButtonText}
               data-testid='delete-button'
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
index b0036fb08c..1d49c62602 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.tsx
@@ -96,7 +96,6 @@ const DoSummaryWrapper = ({
                 textResourceBindings={{ title }}
               />
               <Heading
-                spacing={false}
                 size={'sm'}
                 level={2}
               >
diff --git a/src/layout/Summary/EditButton.tsx b/src/layout/Summary/EditButton.tsx
index 6d881f03c5..22da635b45 100644
--- a/src/layout/Summary/EditButton.tsx
+++ b/src/layout/Summary/EditButton.tsx
@@ -16,8 +16,8 @@ export function EditButton(props: IEditButtonProps) {
     <Button
       className={classes.editButton}
       variant='tertiary'
-      color='second'
-      size='small'
+      color='neutral'
+      size='sm'
       onClick={props.onClick}
       aria-label={`${props.editText}: ${props.label}`}
     >
diff --git a/src/layout/Summary2/CommonSummaryComponents/EditButton.tsx b/src/layout/Summary2/CommonSummaryComponents/EditButton.tsx
index a6f60aaf85..ae070583bb 100644
--- a/src/layout/Summary2/CommonSummaryComponents/EditButton.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/EditButton.tsx
@@ -74,7 +74,7 @@ export function EditButton({
     <Button
       onClick={onChangeClick}
       variant='tertiary'
-      size='small'
+      size='sm'
       className={className}
     >
       {!isMobile && <Lang id={'general.edit'} />}
diff --git a/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx b/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
index 87f4d3935d..fa133c304d 100644
--- a/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/LayoutSetSummaryAccordion.tsx
@@ -23,13 +23,13 @@ export function LayoutSetSummaryAccordion({ filteredPages }: LayoutSetAccordionS
           key={layoutId}
           defaultOpen={true}
         >
-          <Accordion.Header level={2}>
+          <Accordion.Heading>
             <Label asChild>
               <span>
                 <Lang id={layoutId} />
               </span>
             </Label>
-          </Accordion.Header>
+          </Accordion.Heading>
           <Accordion.Content>
             <Grid
               container={true}
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
index 0383203e17..c5d912dbfe 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Label, List, Paragraph } from '@digdir/designsystemet-react';
+import { Label, List, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Lang } from 'src/features/language/Lang';
@@ -81,18 +81,16 @@ export const MultipleValueSummary = ({
         >
           <Label weight={'regular'}>{title}</Label>
           {displayType === 'list' && (
-            <List.Root>
-              <List.Unordered>
-                {displayValues?.map((item) => (
-                  <List.Item
-                    key={`list-item-${item}`}
-                    className={classes.formValue}
-                  >
-                    {item}
-                  </List.Item>
-                ))}
-              </List.Unordered>
-            </List.Root>
+            <List.Unordered>
+              {displayValues?.map((item) => (
+                <List.Item
+                  key={`list-item-${item}`}
+                  className={classes.formValue}
+                >
+                  {item}
+                </List.Item>
+              ))}
+            </List.Unordered>
           )}
           {displayType === 'inline' && (
             <Paragraph
@@ -115,13 +113,13 @@ export const MultipleValueSummary = ({
         </div>
         {errors.length > 0 &&
           errors.map(({ message }) => (
-            <ErrorMessage key={message.key}>
+            <ValidationMessage key={message.key}>
               <Lang
                 id={message.key}
                 params={message.params}
                 node={componentNode}
               ></Lang>
-            </ErrorMessage>
+            </ValidationMessage>
           ))}
       </div>
       <EditButton
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
index 38b29d2188..369a987ffb 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ErrorMessage, Label, Paragraph } from '@digdir/designsystemet-react';
+import { Label, Paragraph, ValidationMessage } from '@digdir/designsystemet-react';
 import cn from 'classnames';
 
 import { Lang } from 'src/features/language/Lang';
@@ -70,13 +70,13 @@ export const SingleValueSummary = ({
     {errors &&
       errors?.length > 0 &&
       errors?.map(({ message }) => (
-        <ErrorMessage key={message.key}>
+        <ValidationMessage key={message.key}>
           <Lang
             id={message.key}
             params={message.params}
             node={componentNode}
           ></Lang>
-        </ErrorMessage>
+        </ValidationMessage>
       ))}
   </div>
 );
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index 1f4ae85b5c..e6c411d954 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -14,8 +14,14 @@ import { useNodeTraversalSelector } from 'src/utils/layout/useNodeTraversal';
 import { typedBoolean } from 'src/utils/typing';
 import type { PropsFromGenericComponent } from 'src/layout';
 
+const sizeMap: Record<string, 'sm' | 'md' | 'lg'> = {
+  small: 'sm',
+  medium: 'md',
+  large: 'lg',
+};
+
 export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
-  const size = useNodeItem(node, (i) => i.size);
+  const size = useNodeItem(node, (i) => i.size) ?? 'medium';
   const defaultTab = useNodeItem(node, (i) => i.defaultTab);
   const tabs = useNodeItem(node, (i) => i.tabsInternal);
   const [activeTab, setActiveTab] = useState<string | undefined>(defaultTab ?? tabs.at(0)?.id);
@@ -41,7 +47,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
         defaultValue={activeTab}
         value={activeTab}
         onChange={(tabId) => setActiveTab(tabId)}
-        size={size}
+        size={sizeMap[size]}
       >
         <DesignsystemetTabs.List>
           {tabs.map((tab) => (
@@ -55,7 +61,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
           ))}
         </DesignsystemetTabs.List>
         {tabs.map((tab) => (
-          <DesignsystemetTabs.Content
+          <DesignsystemetTabs.Panel
             key={tab.id}
             value={tab.id}
             role='tabpanel'
@@ -73,7 +79,7 @@ export const Tabs = ({ node }: PropsFromGenericComponent<'Tabs'>) => {
                 />
               ))}
             </Grid>
-          </DesignsystemetTabs.Content>
+          </DesignsystemetTabs.Panel>
         ))}
       </DesignsystemetTabs>
     </ComponentStructureWrapper>
diff --git a/yarn.lock b/yarn.lock
index ef0b0a53d0..f2b4d3f3ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1828,25 +1828,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-css@npm:0.10.0":
-  version: 0.10.0
-  resolution: "@digdir/designsystemet-css@npm:0.10.0"
-  checksum: 10c0/695f3bedf73aa440d832bccdf710a7ebb1a0fc05bfce2b4f9a70fb3e8abfae67f3792cfaaaddf1d87f5a2e7cd8edbf2e6f0d3fd020878b731dee5e3f61044935
+"@digdir/designsystemet-css@npm:1.0.0-next.35":
+  version: 1.0.0-next.35
+  resolution: "@digdir/designsystemet-css@npm:1.0.0-next.35"
+  checksum: 10c0/62a620258536cf67c1e335fccb1d172a8699d3c03d0fc75b5a01c63523ebe6bee641ee394b10fa07ff199d735b139c41c2023f84d66930dc6802e732887879d5
   languageName: node
   linkType: hard
 
-"@digdir/designsystemet-react@npm:0.63.1":
-  version: 0.63.1
-  resolution: "@digdir/designsystemet-react@npm:0.63.1"
+"@digdir/designsystemet-react@npm:1.0.0-next.35":
+  version: 1.0.0-next.35
+  resolution: "@digdir/designsystemet-react@npm:1.0.0-next.35"
   dependencies:
-    "@floating-ui/react": "npm:0.26.12"
-    "@navikt/aksel-icons": "npm:^5.12.2"
-    "@radix-ui/react-slot": "npm:^1.0.2"
-    "@tanstack/react-virtual": "npm:^3.2.0"
+    "@floating-ui/dom": "npm:^1.6.10"
+    "@floating-ui/react": "npm:0.26.23"
+    "@navikt/aksel-icons": "npm:^6.14.0"
+    "@radix-ui/react-slot": "npm:^1.1.0"
+    "@tanstack/react-virtual": "npm:^3.10.7"
+    "@u-elements/u-details": "npm:^0.1.0"
+    clsx: "npm:^2.1.1"
   peerDependencies:
     react: ">=18.3.1"
     react-dom: ">=18.3.1"
-  checksum: 10c0/20ad11de9fb0203ff10cffd0966b56a39503a7863db1aa69b772e38b47c3fd98828a60310a4ce8c1d4163d7edc9704341222877286e6a7ad65723b7909e2ac5b
+  checksum: 10c0/8cb68edb73f4aa3f8fd7dc7c671805a4e6c40caf06f7d96235c191935c506d715d02498b8eadbf2951bd24f835d941204f2d1b00d71a5bab50b816d8a5d2f9b2
   languageName: node
   linkType: hard
 
@@ -1857,6 +1860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@digdir/designsystemet-theme@npm:1.0.0-next.35":
+  version: 1.0.0-next.35
+  resolution: "@digdir/designsystemet-theme@npm:1.0.0-next.35"
+  checksum: 10c0/158dc812eb1eb9f7e17b23573f5426f5b236b3b8f251e16cb3a7a99daa621e82f7f259f472c5795354de0fff3dd1a7d5f82df57ccaa604578d13ab9cfdff7d7d
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:^0.5.0":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -2143,7 +2153,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.0.0":
+"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.6.10":
   version: 1.6.11
   resolution: "@floating-ui/dom@npm:1.6.11"
   dependencies:
@@ -2153,7 +2163,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.3":
+"@floating-ui/react-dom@npm:^2.0.0, @floating-ui/react-dom@npm:^2.0.3, @floating-ui/react-dom@npm:^2.1.1":
   version: 2.1.2
   resolution: "@floating-ui/react-dom@npm:2.1.2"
   dependencies:
@@ -2179,17 +2189,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/react@npm:0.26.12":
-  version: 0.26.12
-  resolution: "@floating-ui/react@npm:0.26.12"
+"@floating-ui/react@npm:0.26.23":
+  version: 0.26.23
+  resolution: "@floating-ui/react@npm:0.26.23"
   dependencies:
-    "@floating-ui/react-dom": "npm:^2.0.0"
-    "@floating-ui/utils": "npm:^0.2.0"
+    "@floating-ui/react-dom": "npm:^2.1.1"
+    "@floating-ui/utils": "npm:^0.2.7"
     tabbable: "npm:^6.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/f47e133b9fe5dd404886c4e69e760dc0d6ab30774de82b5547cba83d0cd6e7a3bb4c221587e115a3c0c466ac344578c3db78b5808b5acd70ae5d43d587de9fd1
+  checksum: 10c0/d339c3d760e83c8384a16c8a38fb47f7f855a3db4d19117fd54cccbf871a27b089887202074e9871ffc19ad769bed709ecdd69445a39d2ea9406c84814427f3b
   languageName: node
   linkType: hard
 
@@ -2214,7 +2224,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.8":
+"@floating-ui/utils@npm:^0.2.7, @floating-ui/utils@npm:^0.2.8":
   version: 0.2.8
   resolution: "@floating-ui/utils@npm:0.2.8"
   checksum: 10c0/a8cee5f17406c900e1c3ef63e3ca89b35e7a2ed645418459a73627b93b7377477fc888081011c6cd177cac45ec2b92a6cab018c14ea140519465498dddd2d3f9
@@ -2754,6 +2764,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@navikt/aksel-icons@npm:^6.14.0":
+  version: 6.17.0
+  resolution: "@navikt/aksel-icons@npm:6.17.0"
+  checksum: 10c0/e3b3fd152e3266e23aa6a9a4d69c8c59ace60bc334b2fdbbdc208984fa540875a3469f3e9170e112ed9dc3be9c2b13139760c8e32b49d4a9fe0504ad41615989
+  languageName: node
+  linkType: hard
+
 "@navikt/aksel-icons@npm:^7.0.0":
   version: 7.2.1
   resolution: "@navikt/aksel-icons@npm:7.2.1"
@@ -3358,7 +3375,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.0.2":
+"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/react-slot@npm:1.1.0"
   dependencies:
@@ -3696,7 +3713,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-virtual@npm:^3.2.0":
+"@tanstack/react-virtual@npm:^3.10.7":
   version: 3.10.8
   resolution: "@tanstack/react-virtual@npm:3.10.8"
   dependencies:
@@ -4731,6 +4748,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@u-elements/u-details@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@u-elements/u-details@npm:0.1.0"
+  checksum: 10c0/b4a45ed5a28fedf27688e66f8cc67ba323fe5ceae8625cf39c2b56da07fd1bb7fb666fd54ad42c4906dbf691f6de29844246e6bddf2d591c7220e847a7d9f57a
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.12.1, @webassemblyjs/ast@npm:^1.12.1":
   version: 1.12.1
   resolution: "@webassemblyjs/ast@npm:1.12.1"
@@ -5254,9 +5278,9 @@ __metadata:
     "@babel/runtime-corejs3": "npm:^7.21.0"
     "@date-fns/tz": "npm:^1.1.2"
     "@digdir/design-system-react": "npm:0.54.0"
-    "@digdir/designsystemet-css": "npm:0.10.0"
-    "@digdir/designsystemet-react": "npm:0.63.1"
-    "@digdir/designsystemet-theme": "npm:0.15.3"
+    "@digdir/designsystemet-css": "npm:1.0.0-next.35"
+    "@digdir/designsystemet-react": "npm:1.0.0-next.35"
+    "@digdir/designsystemet-theme": "npm:1.0.0-next.35"
     "@eslint/compat": "npm:^1.1.1"
     "@faker-js/faker": "npm:^9.0.0"
     "@material-ui/core": "npm:4.12.4"
@@ -6508,7 +6532,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.1.0":
+"clsx@npm:^2.1.0, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839

From 7916209d1c683811c4ffbbf1b5c3e37a728a8d84 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 25 Oct 2024 12:28:21 +0200
Subject: [PATCH 2/8] update a buch of css token names

---
 src/components/AltinnAppHeader.module.css     | 10 +++---
 src/components/CircleIcon.module.css          |  2 +-
 .../atoms/AltinnAttachment.module.css         |  2 +-
 src/components/form/Caption.module.css        |  4 +--
 src/components/form/Fieldset.module.css       |  2 +-
 src/components/form/RadioButton.module.css    | 26 +++++++--------
 src/components/label/Label.module.css         |  2 +-
 src/components/label/LabelContent.module.css  |  6 ++--
 .../organisms/AltinnAppHeaderMenu.tsx         |  6 ++--
 src/components/presentation/NavBar.module.css |  2 +-
 .../OrganisationLogo.module.css               |  2 +-
 src/features/footer/Footer.module.css         |  2 +-
 .../selection/InstanceSelection.module.css    |  2 +-
 src/features/pdf/PDFView.module.css           | 10 +++---
 .../validation/ComponentValidations.tsx       |  2 +-
 src/index.css                                 | 16 +++++-----
 .../Accordion/SummaryAccordion.module.css     | 12 +++----
 .../AddressSummary/AddressSummary.module.css  |  4 +--
 .../CheckboxesContainerComponent.module.css   |  4 +--
 .../Checkboxes/CheckboxesSummary.module.css   |  2 +-
 src/layout/Checkboxes/WrappedCheckbox.tsx     |  1 -
 src/layout/Datepicker/Calendar.module.css     | 32 +++++++++----------
 .../FileUploadTable/FileTableButtons.tsx      |  8 ++---
 .../FileTableComponent.module.css             |  8 ++---
 .../FileUploadTable/FileTableRow.module.css   |  4 +--
 src/layout/Grid/Grid.module.css               |  2 +-
 src/layout/Grid/GridSummary.module.css        | 18 +++++------
 src/layout/Group/GroupComponent.module.css    | 24 +++++++-------
 src/layout/Group/GroupSummary.module.css      | 11 +++----
 src/layout/Input/InputComponent.module.css    | 12 +++----
 .../Likert/Summary2/LikertSummary.module.css  |  2 +-
 .../LikertItem/LikertItemComponent.module.css |  4 +--
 src/layout/List/ListComponent.module.css      | 22 ++++++-------
 src/layout/Map/MapComponent.module.css        |  2 +-
 src/layout/Map/Summary2/MapSummary.module.css |  4 +--
 .../NavigationBar/NavigationBarComponent.tsx  |  6 ++--
 .../Payment/PaymentComponent.module.css       |  6 ++--
 .../PaymentReceiptDetails.module.css          |  8 ++---
 .../PaymentDetailsTable.module.css            |  2 +-
 .../RadioButtons/ControlledRadioGroup.tsx     |  1 -
 .../RepeatingGroupsEditContainer.tsx          |  4 +--
 .../RepeatingGroupPagination.module.css       |  2 +-
 .../RepeatingGroup/RepeatingGroup.module.css  |  6 ++--
 .../Summary2/RepeatingGroupSummary.module.css | 18 +++++------
 .../Table/RepeatingGroupTableRow.tsx          |  4 +--
 .../Subform/SubformComponent.module.css       |  2 +-
 .../SubformSummaryComponent2.module.css       | 14 ++++----
 .../MultipleValueSummary.module.css           | 10 +++---
 .../SingleValueSummary.module.css             | 10 +++---
 src/layout/Tabs/Tabs.module.css               |  4 +--
 src/layout/Tabs/TabsSummary.module.css        |  8 ++---
 src/styles/utils.module.css                   |  6 ++--
 52 files changed, 190 insertions(+), 193 deletions(-)

diff --git a/src/components/AltinnAppHeader.module.css b/src/components/AltinnAppHeader.module.css
index dc55afab79..2683e3aa55 100644
--- a/src/components/AltinnAppHeader.module.css
+++ b/src/components/AltinnAppHeader.module.css
@@ -7,7 +7,7 @@
 }
 
 .blueDark {
-  color: var(--fds-semantic-surface-action-default);
+  color: var(--ds-semantic-surface-action-default);
 }
 
 .default {
@@ -15,7 +15,7 @@
 }
 
 .headerLink {
-  color: var(--fds-semantic-surface-action-default);
+  color: var(--ds-semantic-surface-action-default);
   font-size: 1.25rem;
   line-height: 1.5;
   margin-left: 2.25rem;
@@ -30,13 +30,13 @@
   }
 
   & a {
-    color: var(--fds-semantic-surface-action-default);
+    color: var(--ds-semantic-surface-action-default);
     border-bottom: 0;
   }
 
   & a:hover {
-    color: var(--fds-semantic-surface-action-default);
-    border-bottom: 3px solid var(--fds-semantic-surface-action-default);
+    color: var(--ds-semantic-surface-action-default);
+    border-bottom: 3px solid var(--ds-semantic-surface-action-default);
   }
 }
 
diff --git a/src/components/CircleIcon.module.css b/src/components/CircleIcon.module.css
index a8381bd8aa..806fda5e93 100644
--- a/src/components/CircleIcon.module.css
+++ b/src/components/CircleIcon.module.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--fds-semantic-surface-action-default);
+  background-color: var(--ds-semantic-surface-action-default);
   width: calc(var(--icon-size) * 0.75);
   height: calc(var(--icon-size) * 0.75);
   padding: calc(var(--icon-size) * 0.25);
diff --git a/src/components/atoms/AltinnAttachment.module.css b/src/components/atoms/AltinnAttachment.module.css
index 282ca70f0e..228ed79f68 100644
--- a/src/components/atoms/AltinnAttachment.module.css
+++ b/src/components/atoms/AltinnAttachment.module.css
@@ -15,7 +15,7 @@
 
 .attachmentLink:hover {
   border-bottom: none;
-  background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
+  background-color: var(--ds-semantic-surface-action-first-no_fill-hover);
 }
 
 .attachmentIcon {
diff --git a/src/components/form/Caption.module.css b/src/components/form/Caption.module.css
index 58d120d38b..b7c24f36f9 100644
--- a/src/components/form/Caption.module.css
+++ b/src/components/form/Caption.module.css
@@ -1,6 +1,6 @@
 .tableCaption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-spacing-2);
 }
 
 .captionTitle {
@@ -10,5 +10,5 @@
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
diff --git a/src/components/form/Fieldset.module.css b/src/components/form/Fieldset.module.css
index f2a8c6ff86..c3723a8c51 100644
--- a/src/components/form/Fieldset.module.css
+++ b/src/components/form/Fieldset.module.css
@@ -8,5 +8,5 @@
 .description {
   font-size: 1.125rem;
   margin: 0;
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
diff --git a/src/components/form/RadioButton.module.css b/src/components/form/RadioButton.module.css
index 87e4ae3ca6..29f64b6c96 100644
--- a/src/components/form/RadioButton.module.css
+++ b/src/components/form/RadioButton.module.css
@@ -1,6 +1,6 @@
 .radioLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-spacing-1);
   align-items: center;
 }
 
@@ -10,10 +10,10 @@
 
 .card {
   border-radius: 6px;
-  background-color: var(--fds-semantic-background-subtle);
+  background-color: var(--ds-semantic-background-subtle);
   width: 100%;
-  padding: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-3);
+  padding: var(--ds-spacing-2);
+  margin-bottom: var(--ds-spacing-3);
   cursor: pointer;
 }
 
@@ -22,23 +22,23 @@
 }
 
 .card:hover {
-  background: var(--fds-semantic-surface-neutral-subtle-hover);
+  background: var(--ds-semantic-surface-neutral-subtle-hover);
 }
 
 .card:active {
-  background: var(--fds-semantic-border-neutral-subtle);
+  background: var(--ds-semantic-border-neutral-subtle);
 }
 
 .card:is(:checked, :has(:checked)) {
-  background: var(--fds-semantic-surface-neutral-selected);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-first-active);
+  background: var(--ds-semantic-surface-neutral-selected);
+  box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-semantic-border-first-active);
 }
 
 .card:has(:focus-visible) {
-  --fds-focus-border-width: 3px;
-  background: var(--fds-semantic-surface-neutral-selected);
+  --ds-focus-border-width: 3px;
+  background: var(--ds-semantic-surface-neutral-selected);
 
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
+  box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color);
+  outline: var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color);
+  outline-offset: var(--ds-focus-border-width);
 }
diff --git a/src/components/label/Label.module.css b/src/components/label/Label.module.css
index a18230d6ea..cec1a60429 100644
--- a/src/components/label/Label.module.css
+++ b/src/components/label/Label.module.css
@@ -1,6 +1,6 @@
 .fieldWrapper {
   display: grid;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .fullWidth {
diff --git a/src/components/label/LabelContent.module.css b/src/components/label/LabelContent.module.css
index 4aa85c2098..97079ba52e 100644
--- a/src/components/label/LabelContent.module.css
+++ b/src/components/label/LabelContent.module.css
@@ -1,6 +1,6 @@
 .labelContainer {
   display: flex;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
   align-items: center;
 }
 
@@ -11,10 +11,10 @@
 .labelWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-spacing-1);
   align-items: flex-start;
 }
 
 .description {
-  padding-bottom: var(--fds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
diff --git a/src/components/organisms/AltinnAppHeaderMenu.tsx b/src/components/organisms/AltinnAppHeaderMenu.tsx
index cb24302b50..ab4ae5fdcf 100644
--- a/src/components/organisms/AltinnAppHeaderMenu.tsx
+++ b/src/components/organisms/AltinnAppHeaderMenu.tsx
@@ -29,9 +29,9 @@ const useStyles = makeStyles({
   iconButton: {
     padding: 0,
     '&:focus-within': {
-      outline: 'var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color)',
-      outlineOffset: 'var(--fds-focus-border-width)',
-      boxShadow: '0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color)',
+      outline: 'var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color)',
+      outlineOffset: 'var(--ds-focus-border-width)',
+      boxShadow: '0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color)',
     },
   },
 });
diff --git a/src/components/presentation/NavBar.module.css b/src/components/presentation/NavBar.module.css
index ef05496d2e..4837c41739 100644
--- a/src/components/presentation/NavBar.module.css
+++ b/src/components/presentation/NavBar.module.css
@@ -15,7 +15,7 @@
 }
 
 .buttonMargin {
-  margin-top: calc(2 * var(--fds-focus-border-width));
+  margin-top: calc(2 * var(--ds-focus-border-width));
 }
 
 @media only screen and (max-width: 1200px) {
diff --git a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
index 8a74fafe46..13a0fbedf1 100644
--- a/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
+++ b/src/components/presentation/OrganisationLogo/OrganisationLogo.module.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .small {
diff --git a/src/features/footer/Footer.module.css b/src/features/footer/Footer.module.css
index a23ef34326..217f1402f6 100644
--- a/src/features/footer/Footer.module.css
+++ b/src/features/footer/Footer.module.css
@@ -28,7 +28,7 @@
 
 .separator {
   margin: 36px 0;
-  background-color: var(--fds-semantic-surface-neutral-dark);
+  background-color: var(--ds-semantic-surface-neutral-dark);
   height: 1px;
   width: 100%;
 }
diff --git a/src/features/instantiate/selection/InstanceSelection.module.css b/src/features/instantiate/selection/InstanceSelection.module.css
index d2ecf3330a..6a96dbe266 100644
--- a/src/features/instantiate/selection/InstanceSelection.module.css
+++ b/src/features/instantiate/selection/InstanceSelection.module.css
@@ -51,7 +51,7 @@ Altinn, and making sure they are consistent. */
   background-color: #f5f5f5; /* Remove this when upgrading to the new design system component look*/
 }
 tr.tableFooter:hover {
-  background-color: var(--fds-semantic-background-subtle);
+  background-color: var(--ds-semantic-background-subtle);
 }
 
 .startNewButtonContainer {
diff --git a/src/features/pdf/PDFView.module.css b/src/features/pdf/PDFView.module.css
index 2d9dbfb8b1..96fc3368b6 100644
--- a/src/features/pdf/PDFView.module.css
+++ b/src/features/pdf/PDFView.module.css
@@ -15,20 +15,20 @@
 .pdf-wrapper .page {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
-  margin-bottom: var(--fds-spacing-2);
+  gap: var(--ds-spacing-4);
+  margin-bottom: var(--ds-spacing-2);
 }
 
 .pdf-wrapper .instanceInfo {
-  margin-bottom: var(--fds-spacing-4);
+  margin-bottom: var(--ds-spacing-4);
 }
 
 .paymentTitleContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--fds-spacing-6);
-  margin-bottom: var(--fds-spacing-3);
+  gap: var(--ds-spacing-6);
+  margin-bottom: var(--ds-spacing-3);
   h1 {
     margin-bottom: 0;
   }
diff --git a/src/features/validation/ComponentValidations.tsx b/src/features/validation/ComponentValidations.tsx
index 281139ec32..8e2d56ef83 100644
--- a/src/features/validation/ComponentValidations.tsx
+++ b/src/features/validation/ComponentValidations.tsx
@@ -122,7 +122,7 @@ function SoftValidations({
   const getUniqueKeyFromObject = useGetUniqueKeyFromObject();
 
   return (
-    <div style={{ paddingTop: 'var(--fds-spacing-2)' }}>
+    <div style={{ paddingTop: 'var(--ds-spacing-2)' }}>
       <AlertDesignSystem
         style={{ breakInside: 'avoid' }}
         color={severity}
diff --git a/src/index.css b/src/index.css
index e1a6116997..97be040bf9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -41,9 +41,9 @@
   --repeating-group-error-color: var(--colors-red-200);
 
   /* Focus styles */
-  --fds-inner-focus-border-color: #1e2b3c;
-  --fds-outer-focus-border-color: #fadf4b;
-  --fds-focus-border-width: 3px;
+  --ds-inner-focus-border-color: #1e2b3c;
+  --ds-outer-focus-border-color: #fadf4b;
+  --ds-focus-border-width: 3px;
 
   /*Border styles*/
   --border-color-primary: #008fd6;
@@ -55,16 +55,16 @@
   --button-gap: 0.75rem;
 
   /* Toast styles */
-  --toastify-color-info: var(--fds-semantic-surface-action-primary-default);
-  --toastify-color-success: var(--fds-semantic-surface-success-default);
-  --toastify-color-warning: var(--fds-semantic-surface-warning-default);
-  --toastify-color-error: var(--fds-semantic-surface-danger-default);
+  --toastify-color-info: var(--ds-semantic-surface-action-primary-default);
+  --toastify-color-success: var(--ds-semantic-surface-success-default);
+  --toastify-color-warning: var(--ds-semantic-surface-warning-default);
+  --toastify-color-error: var(--ds-semantic-surface-danger-default);
   --toastify-toast-width: 400px;
 }
 
 .Toastify__toast {
   line-height: 1.5rem;
-  padding: var(--fds-spacing-3) var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3);
+  padding: var(--ds-spacing-3) var(--ds-spacing-3) var(--ds-spacing-4) var(--ds-spacing-3);
 }
 
 @media only screen and (min-width: 768px) {
diff --git a/src/layout/Accordion/SummaryAccordion.module.css b/src/layout/Accordion/SummaryAccordion.module.css
index beb1e204af..7fdbd2a49d 100644
--- a/src/layout/Accordion/SummaryAccordion.module.css
+++ b/src/layout/Accordion/SummaryAccordion.module.css
@@ -1,20 +1,20 @@
 .container {
   border-radius: 3px;
-  border: 1px solid var(--fds-semantic-border-neutral-subtle);
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  border: 1px solid var(--ds-semantic-border-neutral-subtle);
+  background-color: var(--ds-semantic-surface-neutral-subtle);
 }
 
 .header {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  border-bottom: 1px solid var(--ds-semantic-border-neutral-subtle);
+  background-color: var(--ds-semantic-surface-neutral-subtle);
 }
 
 .padding {
-  padding: var(--fds-spacing-5);
+  padding: var(--ds-spacing-5);
 }
 
 .paddingSmall {
-  padding: var(--fds-spacing-3) var(--fds-spacing-5);
+  padding: var(--ds-spacing-3) var(--ds-spacing-5);
 }
 
 .container .header > h2,
diff --git a/src/layout/Address/AddressSummary/AddressSummary.module.css b/src/layout/Address/AddressSummary/AddressSummary.module.css
index 425bbd1287..64a42de4fe 100644
--- a/src/layout/Address/AddressSummary/AddressSummary.module.css
+++ b/src/layout/Address/AddressSummary/AddressSummary.module.css
@@ -21,7 +21,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-spacing-4);
 }
 
 .addressSummaryComponentPostplaceZipCode {
@@ -49,5 +49,5 @@
 }
 
 .addressComponentZipCode {
-  margin-right: var(--fds-spacing-4);
+  margin-right: var(--ds-spacing-4);
 }
diff --git a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
index 855fc3be6f..ce14f0c1b3 100644
--- a/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
+++ b/src/layout/Checkboxes/CheckboxesContainerComponent.module.css
@@ -6,7 +6,7 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .checkboxGroup div label {
@@ -16,7 +16,7 @@
 
 .checkboxLabelContainer {
   display: flex;
-  gap: var(--fds-spacing-1);
+  gap: var(--ds-spacing-1);
   align-items: center;
 }
 
diff --git a/src/layout/Checkboxes/CheckboxesSummary.module.css b/src/layout/Checkboxes/CheckboxesSummary.module.css
index c67a1f1b7f..5c07782453 100644
--- a/src/layout/Checkboxes/CheckboxesSummary.module.css
+++ b/src/layout/Checkboxes/CheckboxesSummary.module.css
@@ -5,7 +5,7 @@
 .labelValueWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .checkboxSummaryItem {
diff --git a/src/layout/Checkboxes/WrappedCheckbox.tsx b/src/layout/Checkboxes/WrappedCheckbox.tsx
index 960dcca979..374f9e0c57 100644
--- a/src/layout/Checkboxes/WrappedCheckbox.tsx
+++ b/src/layout/Checkboxes/WrappedCheckbox.tsx
@@ -53,7 +53,6 @@ export function WrappedCheckbox({ id, option, hideLabel, alertOnChange, checked,
         description={option.description && <Lang id={option.description} />}
         value={option.value}
         checked={checked}
-        size='sm'
         onChange={(e) => handleChange(e.target.checked)}
       >
         {
diff --git a/src/layout/Datepicker/Calendar.module.css b/src/layout/Datepicker/Calendar.module.css
index d2d9f94132..0f48dd96e4 100644
--- a/src/layout/Datepicker/Calendar.module.css
+++ b/src/layout/Datepicker/Calendar.module.css
@@ -2,10 +2,10 @@
   margin-bottom: 0;
 }
 .calendarGrid {
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-spacing-2);
 }
 
 .formatText {
@@ -20,29 +20,29 @@
 }
 
 .selectedDate {
-  background-color: var(--fds-colors-blue-900);
+  background-color: var(--ds-colors-blue-900);
   color: white;
   font-weight: normal;
-  border-radius: var(--fds-border_radius-medium);
+  border-radius: var(--ds-border-radius-md);
 }
 .selectedDate button {
   color: white;
 }
 .disabledDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-grey-100);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-colors-grey-100);
   cursor: not-allowed;
 }
 .disabledDate button {
   text-decoration: line-through;
 }
 .focusedDate {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-colors-blue-200);
 }
 .today {
-  border-radius: var(--fds-border_radius-medium);
-  border: var(--fds-border_width-default) solid var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  border: var(--ds-border_width-default) solid var(--ds-colors-blue-200);
 }
 .disabledDate:hover button {
   cursor: not-allowed;
@@ -66,8 +66,8 @@
   font-weight: 500;
 }
 .calendarDay:hover {
-  border-radius: var(--fds-border_radius-medium);
-  background: var(--fds-colors-blue-200);
+  border-radius: var(--ds-border-radius-md);
+  background: var(--ds-colors-blue-200);
 }
 .calendarDay {
   width: 48px;
@@ -83,7 +83,7 @@
 .monthWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 .dropdownCaption {
   display: flex;
@@ -94,12 +94,12 @@
 .calendarInputWrapper {
   display: flex;
   border-radius: 4px;
-  border: var(--fds-border_width-default, 1px) solid var(--fds-semantic-border-neutral-default);
-  gap: var(--fds-spacing-1);
+  border: var(--ds-border_width-default, 1px) solid var(--ds-color-neutral-border-default);
+  gap: var(--ds-spacing-1);
   background: white;
 }
 .calendarInputWrapper:hover {
-  box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+  box-shadow: inset 0 0 0 1px var(--ds-semantic-border-input-hover);
 }
 .calendarInput {
   padding: 1px;
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx b/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx
index 4b9ef3af4e..0f1daa67ca 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx
+++ b/src/layout/FileUpload/FileUploadTable/FileTableButtons.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Button } from '@digdir/designsystemet-react';
-import { PencilIcon, TrashIcon } from '@navikt/aksel-icons';
+import { Delete, Edit } from '@navikt/ds-icons';
 
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { DeleteWarningPopover } from 'src/features/alertOnChange/DeleteWarningPopover';
@@ -86,13 +86,13 @@ export function FileTableButtons({ node, attachment, mobileView, editWindowIsOpe
       >
         {!mobileView && <Lang id={showEditButton ? 'general.edit_alt' : 'form_filler.file_uploader_list_delete'} />}
         {showEditButton ? (
-          <PencilIcon
+          <Edit
             fontSize='1rem'
             aria-hidden={true}
           />
         ) : (
-          <TrashIcon
-            fontSize='1rem'
+          <Delete
+            fontSize='1,5rem'
             aria-hidden={true}
           />
         )}
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css b/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
index a9f7091554..399acbfaa0 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
+++ b/src/layout/FileUpload/FileUploadTable/FileTableComponent.module.css
@@ -7,13 +7,13 @@
 .tableMobile {
   width: 100%;
   table-layout: fixed;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-spacing-2);
   box-shadow: none;
   border-spacing: 0;
 }
 
 .summaryLabelMargin {
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-spacing-2);
 }
 
 .tableMobile tbody tr td {
@@ -52,7 +52,7 @@
 }
 
 .grayUnderline th {
-  border-bottom: var(--fds-semantic-border-neutral-default);
+  border-bottom: var(--ds-color-neutral-border-default);
   font-size: 0.875rem;
   padding: 4px 4px 4px 6px;
 }
@@ -60,5 +60,5 @@
 .emptyField {
   font-style: italic;
   line-height: 1.6875;
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-semantic-text-neutral-subtle);
 }
diff --git a/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css b/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
index 6dbd15b83b..678862f654 100644
--- a/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
+++ b/src/layout/FileUpload/FileUploadTable/FileTableRow.module.css
@@ -19,11 +19,11 @@ tr.blueUnderlineDotted td {
 }
 
 tr.grayUnderlineDotted td {
-  border-bottom: 1px dotted var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px dotted var(--ds-color-neutral-border-default);
 }
 
 tr.grayUnderline td {
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px solid var(--ds-color-neutral-border-default);
 }
 
 .altinnLoader {
diff --git a/src/layout/Grid/Grid.module.css b/src/layout/Grid/Grid.module.css
index 3a66d1e8e6..4cfa23d923 100644
--- a/src/layout/Grid/Grid.module.css
+++ b/src/layout/Grid/Grid.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-semantic-surface-neutral-subtle);
 }
 
 tr > .fullWidthCellFirst {
diff --git a/src/layout/Grid/GridSummary.module.css b/src/layout/Grid/GridSummary.module.css
index 2b2f2f2b23..ae2eaec93c 100644
--- a/src/layout/Grid/GridSummary.module.css
+++ b/src/layout/Grid/GridSummary.module.css
@@ -1,7 +1,7 @@
 .rowReadOnly,
 .rowReadOnly td,
 .rowReadOnly th {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-semantic-surface-neutral-subtle);
 }
 
 tr > .fullWidthCellFirst {
@@ -18,11 +18,11 @@ tr > .fullWidthCellLast {
 
 .table th {
   font-weight: 500;
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-strong);
+  border-bottom: 2px solid var(--ds-semantic-border-neutral-strong);
 }
 
 .table td {
-  border-bottom: 1px dashed var(--fds-semantic-border-neutral-default);
+  border-bottom: 1px dashed var(--ds-color-neutral-border-default);
 }
 
 .table tr:hover td {
@@ -92,11 +92,11 @@ tr > .fullWidthCellLast {
 }
 
 .validationError {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-semantic-border-danger-default) solid 2px;
 }
 
 .errorMessage {
-  padding-bottom: var(--fds-spacing-2);
+  padding-bottom: var(--ds-spacing-2);
 }
 
 .mobileFieldset {
@@ -131,7 +131,7 @@ tr > .fullWidthCellLast {
   display: flex;
   flex-direction: column;
   border: none;
-  padding: var(--fds-spacing-2) 0;
+  padding: var(--ds-spacing-2) 0;
 }
 
 .responsiveTable td .contentWrapper {
@@ -146,9 +146,9 @@ tr > .fullWidthCellLast {
 }
 
 .responsiveTable tr {
-  border-bottom: 2px solid var(--fds-semantic-border-neutral-default);
-  padding-top: var(--fds-spacing-3);
-  padding-bottom: var(--fds-spacing-3);
+  border-bottom: 2px solid var(--ds-color-neutral-border-default);
+  padding-top: var(--ds-spacing-3);
+  padding-bottom: var(--ds-spacing-3);
 }
 
 .responsiveTable td[data-header-title]:not([data-header-title=''])::before,
diff --git a/src/layout/Group/GroupComponent.module.css b/src/layout/Group/GroupComponent.module.css
index 73f0870b70..215d7eedb2 100644
--- a/src/layout/Group/GroupComponent.module.css
+++ b/src/layout/Group/GroupComponent.module.css
@@ -1,6 +1,6 @@
 .group {
   width: 100%;
-  padding: var(--fds-spacing-3);
+  padding: var(--ds-spacing-3);
 }
 
 .summary {
@@ -10,13 +10,13 @@
 .groupContainer {
   display: flex;
   flex-wrap: wrap;
-  padding-bottom: var(--fds-spacing-9);
-  margin-right: calc(var(--fds-spacing-3) * -1);
-  margin-left: calc(var(--fds-spacing-3) * -1);
+  padding-bottom: var(--ds-spacing-9);
+  margin-right: calc(var(--ds-spacing-3) * -1);
+  margin-left: calc(var(--ds-spacing-3) * -1);
 }
 
 .groupContainer > * {
-  padding: var(--fds-spacing-3);
+  padding: var(--ds-spacing-3);
 }
 
 .panel {
@@ -27,26 +27,26 @@
 }
 
 .panel > legend {
-  padding-top: var(--fds-spacing-9);
+  padding-top: var(--ds-spacing-9);
 }
 
 .panelPadding > .panel {
   --panel-x-padding: var(--modal-padding-x);
-  margin-right: var(--fds-spacing-3);
-  margin-left: var(--fds-spacing-3);
+  margin-right: var(--ds-spacing-3);
+  margin-left: var(--ds-spacing-3);
 }
 
 .noFieldset.panel {
-  padding-left: calc(var(--panel-x-padding) - var(--fds-spacing-3));
-  padding-right: calc(var(--panel-x-padding) - var(--fds-spacing-3));
+  padding-left: calc(var(--panel-x-padding) - var(--ds-spacing-3));
+  padding-right: calc(var(--panel-x-padding) - var(--ds-spacing-3));
 }
 
 .groupingIndicator {
   border-left: 2px solid #949494;
   margin-left: 0;
-  padding: var(--fds-spacing-3) 0 var(--fds-spacing-3) var(--fds-spacing-3);
+  padding: var(--ds-spacing-3) 0 var(--ds-spacing-3) var(--ds-spacing-3);
 }
 
 .noFieldset.groupingIndicator {
-  margin-left: var(--fds-spacing-3);
+  margin-left: var(--ds-spacing-3);
 }
diff --git a/src/layout/Group/GroupSummary.module.css b/src/layout/Group/GroupSummary.module.css
index 6b6d89f322..c30fc0a054 100644
--- a/src/layout/Group/GroupSummary.module.css
+++ b/src/layout/Group/GroupSummary.module.css
@@ -1,14 +1,13 @@
 .groupContainer {
-  color: var(--semantic-text-neutral-subtle);
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-spacing-6);
 }
 
 .nested {
-  border-width: var(--fds-border_width-default);
-  border-radius: var(--fds-border_radius-medium);
-  border-color: var(--fds-semantic-border-neutral-default);
+  border-width: var(--ds-border_width-default);
+  border-radius: var(--ds-border-radius-md);
+  border-color: var(--ds-color-neutral-border-default);
   border-style: dashed;
-  padding: var(--fds-spacing-6) var(--fds-spacing-4);
+  padding: var(--ds-spacing-6) var(--ds-spacing-4);
 }
diff --git a/src/layout/Input/InputComponent.module.css b/src/layout/Input/InputComponent.module.css
index d02019919c..87bd760ff6 100644
--- a/src/layout/Input/InputComponent.module.css
+++ b/src/layout/Input/InputComponent.module.css
@@ -14,14 +14,14 @@
 }
 
 .text-padding {
-  padding: 0 var(--fds-spacing-2);
+  padding: 0 var(--ds-spacing-2);
   line-height: 32px;
 }
 
 .focusable:focus-visible {
-  --fds-focus-border-width: 3px;
-  outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  border-radius: var(--fds-border_radius-medium);
+  --ds-focus-border-width: 3px;
+  outline: var(--ds-focus-border-width) solid var(--ds-semantic-border-focus-outline);
+  outline-offset: var(--ds-focus-border-width);
+  box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-semantic-border-focus-boxshadow);
+  border-radius: var(--ds-border-radius-md);
 }
diff --git a/src/layout/Likert/Summary2/LikertSummary.module.css b/src/layout/Likert/Summary2/LikertSummary.module.css
index a7f3204150..3e4b04b45d 100644
--- a/src/layout/Likert/Summary2/LikertSummary.module.css
+++ b/src/layout/Likert/Summary2/LikertSummary.module.css
@@ -7,7 +7,7 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-spacing-6);
 }
 
 .editButton {
diff --git a/src/layout/LikertItem/LikertItemComponent.module.css b/src/layout/LikertItem/LikertItemComponent.module.css
index bf9f9fe9f0..626afc960d 100644
--- a/src/layout/LikertItem/LikertItemComponent.module.css
+++ b/src/layout/LikertItem/LikertItemComponent.module.css
@@ -18,7 +18,7 @@ Altinn, and making sure they are consistent. */
 }
 
 .likertTable thead th {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-colors-grey-100);
 }
 
 .likertTable tr:not(:last-of-type) td {
@@ -47,7 +47,7 @@ Altinn, and making sure they are consistent. */
 
 .likertHeading {
   text-align: left;
-  padding-bottom: var(--fds-spacing-4);
+  padding-bottom: var(--ds-spacing-4);
 }
 
 .likertMobileGroup {
diff --git a/src/layout/List/ListComponent.module.css b/src/layout/List/ListComponent.module.css
index 06635649f0..0f28543fc5 100644
--- a/src/layout/List/ListComponent.module.css
+++ b/src/layout/List/ListComponent.module.css
@@ -5,7 +5,7 @@
 
 .listTable caption {
   text-align: left;
-  padding-bottom: var(--fds-spacing-4);
+  padding-bottom: var(--ds-spacing-4);
 }
 
 .listTable th:first-of-type {
@@ -13,7 +13,7 @@
 }
 
 .listTable th {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-colors-grey-100);
 }
 
 .listTable tr {
@@ -32,7 +32,7 @@
 
 .selectedRow,
 .selectedRowCell {
-  background-color: var(--fds-colors-blue-100);
+  background-color: var(--ds-colors-blue-100);
 }
 
 .pagination {
@@ -40,7 +40,7 @@
   display: flex;
   justify-content: end;
   align-items: center;
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-colors-grey-100);
 }
 
 .paginationMobile {
@@ -53,17 +53,17 @@
 }
 
 .mobileRadioGroup > div :hover {
-  background-color: var(--fds-colors-grey-100);
+  background-color: var(--ds-colors-grey-100);
 }
 
 .mobileRadio {
-  border-top: 1px solid var(--fds-colors-grey-200);
-  padding: var(--fds-spacing-4);
-  gap: var(--fds-spacing-8);
+  border-top: 1px solid var(--ds-colors-grey-200);
+  padding: var(--ds-spacing-4);
+  gap: var(--ds-spacing-8);
 }
 
 .mobileRadio input:checked:hover {
-  background-color: var(--fds-radio-border-color);
+  background-color: var(--ds-radio-border-color);
 }
 
 .mobileRadio label {
@@ -73,11 +73,11 @@
 .mobileRadio span {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-spacing-4);
 }
 
 .mobileRadio label div {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
diff --git a/src/layout/Map/MapComponent.module.css b/src/layout/Map/MapComponent.module.css
index 897405ec24..92bd060b75 100644
--- a/src/layout/Map/MapComponent.module.css
+++ b/src/layout/Map/MapComponent.module.css
@@ -53,7 +53,7 @@
 }
 
 .map-error {
-  border-color: var(--fds-semantic-border-danger-default);
+  border-color: var(--ds-semantic-border-danger-default);
   border-width: 2px;
   border-style: solid;
 }
diff --git a/src/layout/Map/Summary2/MapSummary.module.css b/src/layout/Map/Summary2/MapSummary.module.css
index 780a08ce60..bbcdcaa9b4 100644
--- a/src/layout/Map/Summary2/MapSummary.module.css
+++ b/src/layout/Map/Summary2/MapSummary.module.css
@@ -7,7 +7,7 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
   break-inside: avoid;
 }
 
@@ -17,7 +17,7 @@
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-semantic-border-danger-default) solid 2px;
 }
 
 .editButton {
diff --git a/src/layout/NavigationBar/NavigationBarComponent.tsx b/src/layout/NavigationBar/NavigationBarComponent.tsx
index bcbb9ef955..86c05f2781 100644
--- a/src/layout/NavigationBar/NavigationBarComponent.tsx
+++ b/src/layout/NavigationBar/NavigationBarComponent.tsx
@@ -55,9 +55,9 @@ const useStyles = makeStyles((theme) => ({
       outline: `3px solid ${theme.altinnPalette.primary.blueMedium}`,
     },
     '&:focus-within': {
-      outline: 'var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color)',
-      outlineOffset: 'var(--fds-focus-border-width)',
-      boxShadow: '0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color)',
+      outline: 'var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color)',
+      outlineOffset: 'var(--ds-focus-border-width)',
+      boxShadow: '0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color)',
     },
   },
   buttonSelected: {
diff --git a/src/layout/Payment/PaymentComponent.module.css b/src/layout/Payment/PaymentComponent.module.css
index df8a49952a..a3488e78e4 100644
--- a/src/layout/Payment/PaymentComponent.module.css
+++ b/src/layout/Payment/PaymentComponent.module.css
@@ -1,16 +1,16 @@
 .buttonContainer {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-spacing-3);
 }
 
 .alertContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-spacing-3);
 }
 
 .paymentContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-spacing-6);
 }
diff --git a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
index 8107e50074..8440a96cd0 100644
--- a/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
+++ b/src/layout/Payment/PaymentReceiptDetails/PaymentReceiptDetails.module.css
@@ -1,8 +1,8 @@
 .infoContainer {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-spacing-3);
   flex-direction: row;
-  padding: var(--fds-spacing-3) 0;
+  padding: var(--ds-spacing-3) 0;
 }
 
 .infoDetailsContainer {
@@ -13,7 +13,7 @@
 .senderReceiverInfoContainer {
   display: flex;
   width: 100%;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-spacing-4);
 
   table {
     width: 100%;
@@ -27,5 +27,5 @@
 .paymentSummaryContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-4);
+  gap: var(--ds-spacing-4);
 }
diff --git a/src/layout/PaymentDetails/PaymentDetailsTable.module.css b/src/layout/PaymentDetails/PaymentDetailsTable.module.css
index 90644d4077..8a53c4f0c6 100644
--- a/src/layout/PaymentDetails/PaymentDetailsTable.module.css
+++ b/src/layout/PaymentDetails/PaymentDetailsTable.module.css
@@ -7,5 +7,5 @@
 }
 
 .tableRow:hover td {
-  background-color: var(--fds-semantic-surface-neutral-default);
+  background-color: var(--ds-semantic-surface-neutral-default);
 }
diff --git a/src/layout/RadioButtons/ControlledRadioGroup.tsx b/src/layout/RadioButtons/ControlledRadioGroup.tsx
index f91e9bdb4b..80397a3610 100644
--- a/src/layout/RadioButtons/ControlledRadioGroup.tsx
+++ b/src/layout/RadioButtons/ControlledRadioGroup.tsx
@@ -91,7 +91,6 @@ export const ControlledRadioGroup = (props: IControlledRadioGroupProps) => {
               readOnly={readOnly}
               onChange={handleChange}
               hideLabel={hideLabel}
-              size='sm'
               alertOnChange={alertOnChange}
               alertText={alertText}
               confirmChangeText={confirmChangeText}
diff --git a/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx b/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx
index f1bc45a5f9..a000e14e22 100644
--- a/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx
+++ b/src/layout/RepeatingGroup/EditContainer/RepeatingGroupsEditContainer.tsx
@@ -184,7 +184,7 @@ function RepeatingGroupsEditContainerInternal({
                   <Button
                     size='sm'
                     variant='tertiary'
-                    color='neutral'
+                    color='accent'
                     onClick={() => prevMultiPage()}
                     disabled={!isFresh}
                   >
@@ -201,7 +201,7 @@ function RepeatingGroupsEditContainerInternal({
                   <Button
                     size='sm'
                     variant='tertiary'
-                    color='neutral'
+                    color='accent'
                     onClick={() => nextMultiPage()}
                     disabled={!isFresh}
                   >
diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
index ccb288b1fd..a2c6723e89 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.module.css
@@ -9,7 +9,7 @@
 
 .row,
 .row td {
-  background-color: var(--fds-semantic-surface-neutral-subtle);
+  background-color: var(--ds-semantic-surface-neutral-subtle);
 }
 
 .hidden {
diff --git a/src/layout/RepeatingGroup/RepeatingGroup.module.css b/src/layout/RepeatingGroup/RepeatingGroup.module.css
index ecfd023426..115a647dce 100644
--- a/src/layout/RepeatingGroup/RepeatingGroup.module.css
+++ b/src/layout/RepeatingGroup/RepeatingGroup.module.css
@@ -57,16 +57,16 @@ Altinn, and making sure they are consistent. */
 }
 
 .nestedTable {
-  background-color: var(--fds-semantic-surface-neutral-default);
+  background-color: var(--ds-semantic-surface-neutral-default);
 }
 
 .nestedTable > thead > tr > th {
-  /*background-color: var(--fds-semantic-background-subtle);*/
+  /*background-color: var(--ds-semantic-background-subtle);*/
   background-color: #f5f5f5;
 }
 
 .nestedTable thead:not(:first-of-type) th {
-  /*border-top: 2px solid var(--fds-semantic-border-divider-default);*/
+  /*border-top: 2px solid var(--ds-semantic-border-divider-default);*/
   border-top: 1px solid #dde3e5; /* Remove this and uncomment the line above when adjusting the new table component*/
 }
 
diff --git a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
index c1b33eb2fb..6ef2b989c5 100644
--- a/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
+++ b/src/layout/RepeatingGroup/Summary2/RepeatingGroupSummary.module.css
@@ -1,37 +1,37 @@
 .summaryWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-spacing-6);
 }
 
 .contentWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-8);
+  gap: var(--ds-spacing-8);
 }
 
 .rowDivider {
-  height: var(--fds-border_width-active);
+  height: var(--ds-border_width-active);
   border: none;
-  background-color: var(--fds-semantic-border-neutral-default);
+  background-color: var(--ds-color-neutral-border-default);
   margin: 0;
 }
 
 .nestedSummaryWrapper {
   display: flex;
-  gap: var(--fds-spacing-3);
+  gap: var(--ds-spacing-3);
   flex-direction: column;
 }
 
 .nestedContentWrapper {
-  border: dashed 1px var(--fds-semantic-border-neutral-default);
-  padding: var(--fds-spacing-2) var(--fds-spacing-4);
-  border-radius: var(--fds-border_radius-medium);
+  border: dashed 1px var(--ds-color-neutral-border-default);
+  padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  border-radius: var(--ds-border-radius-md);
 }
 
 .errorMessage {
   display: flex;
   flex-direction: row;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
   align-items: center;
 }
diff --git a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
index eb674ea816..c9ba711ac4 100644
--- a/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
+++ b/src/layout/RepeatingGroup/Table/RepeatingGroupTableRow.tsx
@@ -246,7 +246,7 @@ function _RepeatingGroupTableRow({
                   aria-expanded={isEditingRow}
                   aria-controls={isEditingRow ? `group-edit-container-${id}-${uuid}` : undefined}
                   variant='tertiary'
-                  color='neutral'
+                  color='accent'
                   size='sm'
                   onClick={() => toggleEditing({ index: row.index, uuid: row.uuid })}
                   aria-label={`${editButtonText} ${firstCellData ?? ''}`}
@@ -305,7 +305,7 @@ function _RepeatingGroupTableRow({
                 aria-expanded={isEditingRow}
                 aria-controls={isEditingRow ? `group-edit-container-${id}-${uuid}` : undefined}
                 variant='tertiary'
-                color='neutral'
+                color='accent'
                 size='sm'
                 icon={!isEditingRow && mobileViewSmall}
                 onClick={() => toggleEditing({ index, uuid })}
diff --git a/src/layout/Subform/SubformComponent.module.css b/src/layout/Subform/SubformComponent.module.css
index 3d6b1e5ddf..ea2fc98659 100644
--- a/src/layout/Subform/SubformComponent.module.css
+++ b/src/layout/Subform/SubformComponent.module.css
@@ -83,7 +83,7 @@ Altinn, and making sure they are consistent. */
 
 .addButtonWrapper {
   width: 100%;
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-spacing-2);
 }
 
 .addButton {
diff --git a/src/layout/Subform/Summary/SubformSummaryComponent2.module.css b/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
index 4a53365737..a1deba5c01 100644
--- a/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
+++ b/src/layout/Subform/Summary/SubformSummaryComponent2.module.css
@@ -1,11 +1,11 @@
 .emptyField {
   font-style: italic;
   line-height: 1.6875;
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-semantic-text-neutral-subtle);
 }
 
 .summaryLabelMargin {
-  margin-bottom: var(--fds-spacing-2);
+  margin-bottom: var(--ds-spacing-2);
 }
 
 .table {
@@ -17,8 +17,8 @@
 .tableMobile {
   width: 100%;
   table-layout: fixed;
-  margin-top: var(--fds-spacing-2);
-  margin-bottom: var(--fds-spacing-2);
+  margin-top: var(--ds-spacing-2);
+  margin-bottom: var(--ds-spacing-2);
   box-shadow: none;
   border-spacing: 0;
 }
@@ -59,7 +59,7 @@
 }
 
 .grayUnderline th {
-  border-bottom: var(--fds-semantic-border-neutral-default);
+  border-bottom: var(--ds-color-neutral-border-default);
   font-size: 0.875rem;
   padding: 4px 4px 4px 6px;
 }
@@ -74,8 +74,8 @@ tr.noRowSpacing td {
 }
 
 .summaryWrapperMargin {
-  margin-top: var(--fds-spacing-3);
-  margin-bottom: var(--fds-spacing-8);
+  margin-top: var(--ds-spacing-3);
+  margin-bottom: var(--ds-spacing-8);
 }
 
 .editColumnHeader {
diff --git a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
index fb37d6f25f..419b01e6e1 100644
--- a/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
+++ b/src/layout/Summary2/CommonSummaryComponents/MultipleValueSummary.module.css
@@ -1,7 +1,7 @@
 .labelValueWrapper:not(.compact) {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .labelValueWrapper.compact {
@@ -9,7 +9,7 @@
 }
 
 .labelValueWrapper.compact label {
-  margin-right: var(--fds-spacing-2);
+  margin-right: var(--ds-spacing-2);
 }
 
 .formValue {
@@ -17,12 +17,12 @@
 }
 
 .emptyValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-semantic-text-neutral-subtle);
   font-style: italic;
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-semantic-border-danger-default) solid 2px;
 }
 
 .summaryItemWrapper {
@@ -35,7 +35,7 @@
 .summaryItem {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .editButton {
diff --git a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
index 28f0beda99..e0eac37da2 100644
--- a/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
+++ b/src/layout/Summary2/CommonSummaryComponents/SingleValueSummary.module.css
@@ -7,14 +7,14 @@
 .summaryItemWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
   break-inside: avoid;
 }
 
 .labelValueWrapper:not(.compact) {
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-2);
+  gap: var(--ds-spacing-2);
 }
 
 .labelValueWrapper.compact {
@@ -22,7 +22,7 @@
 }
 
 .labelValueWrapper.compact label {
-  margin-right: var(--fds-spacing-2);
+  margin-right: var(--ds-spacing-2);
 }
 
 .formValue {
@@ -30,7 +30,7 @@
 }
 
 .emptyValue {
-  color: var(--fds-semantic-text-neutral-subtle);
+  color: var(--ds-semantic-text-neutral-subtle);
   font-style: italic;
 }
 
@@ -40,7 +40,7 @@
 }
 
 .error {
-  border-bottom: var(--fds-semantic-border-danger-default) solid 2px;
+  border-bottom: var(--ds-semantic-border-danger-default) solid 2px;
 }
 
 .editButton {
diff --git a/src/layout/Tabs/Tabs.module.css b/src/layout/Tabs/Tabs.module.css
index 669146ab41..abcc4f1f74 100644
--- a/src/layout/Tabs/Tabs.module.css
+++ b/src/layout/Tabs/Tabs.module.css
@@ -2,8 +2,8 @@
   background-color: white;
   display: flex;
   flex-direction: column;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-spacing-6);
 }
 .icon {
-  width: var(--fds-sizing-6);
+  width: var(--ds-sizing-6);
 }
diff --git a/src/layout/Tabs/TabsSummary.module.css b/src/layout/Tabs/TabsSummary.module.css
index 358d3dd555..41e00dee50 100644
--- a/src/layout/Tabs/TabsSummary.module.css
+++ b/src/layout/Tabs/TabsSummary.module.css
@@ -1,18 +1,18 @@
 .summaryContent {
   display: flex;
-  gap: var(--fds-spacing-6);
+  gap: var(--ds-spacing-6);
   flex-direction: column;
 }
 
 .tabDivider {
-  height: var(--fds-border_width-active);
+  height: var(--ds-border_width-active);
   border: none;
-  background-color: var(--fds-semantic-border-neutral-default);
+  background-color: var(--ds-color-neutral-border-default);
   margin: 0;
 }
 
 .tabWrapper {
   display: flex;
-  gap: var(--fds-spacing-8);
+  gap: var(--ds-spacing-8);
   flex-direction: column;
 }
diff --git a/src/styles/utils.module.css b/src/styles/utils.module.css
index 5f116e8df6..d87ae4cebb 100644
--- a/src/styles/utils.module.css
+++ b/src/styles/utils.module.css
@@ -1,6 +1,6 @@
 /* Focus utility class */
 .focusable:focus-within {
-  outline: var(--fds-focus-border-width) solid var(--fds-outer-focus-border-color);
-  outline-offset: var(--fds-focus-border-width);
-  box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-inner-focus-border-color);
+  outline: var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color);
+  outline-offset: var(--ds-focus-border-width);
+  box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color);
 }

From e8698e97e8cebd9e0d1994e23e139037db47f5e0 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 25 Oct 2024 16:36:35 +0200
Subject: [PATCH 3/8] fix rep group pagination

---
 .../Pagination/RepeatingGroupPagination.tsx   | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 5cab96506a..409af5ed77 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { Pagination, Table, usePagination } from '@digdir/designsystemet-react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 
 import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { useResetScrollPosition } from 'src/core/ui/useResetScrollPosition';
@@ -64,12 +63,16 @@ function _RepeatingGroupPagination({ inTable = true }: RepeatingGroupPaginationP
     return null;
   }
 
-  const onChange = async (pageNumber: number) => {
+  const onChange = async () => {
     const prevScrollPosition = getScrollPosition();
-    await changePage(pageNumber - 1);
+    //await changePage(pageNumber - 1);
     resetScrollPosition(prevScrollPosition);
   };
 
+  const setCurrentPage = (pagenumber: number) => {
+    changePage(pagenumber - 1);
+  };
+
   return (
     <ConditionalWrapper
       condition={inTable}
@@ -90,6 +93,7 @@ function _RepeatingGroupPagination({ inTable = true }: RepeatingGroupPaginationP
         totalPages={totalPages}
         pagesWithErrors={pagesWithErrors}
         onChange={() => onChange}
+        setCurrentPage={setCurrentPage}
         compact={isTablet}
         hideLabels={isMobile}
         size={isMini ? 'sm' : 'md'}
@@ -107,13 +111,9 @@ type PaginationComponentProps = {
   currentPage: number;
   totalPages: number;
   pagesWithErrors: number[];
-} & React.HTMLAttributes<HTMLElement>;
-
-const iconSize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem',
-};
+  setCurrentPage: (pageNumber: number) => void;
+  onChange: Parameters<typeof Pagination>[0]['onChange'];
+} & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
 
 function PaginationComponent({
   nextTextKey,
@@ -124,13 +124,15 @@ function PaginationComponent({
   currentPage,
   totalPages,
   pagesWithErrors,
+  setCurrentPage,
   onChange,
   ...rest
 }: PaginationComponentProps) {
   const { pages, prevButtonProps, nextButtonProps, hasPrev, hasNext } = usePagination({
-    onChange,
+    setCurrentPage,
     currentPage,
     totalPages,
+    onChange,
   });
   const { langAsString } = useLanguage();
 
@@ -150,10 +152,6 @@ function PaginationComponent({
             aria-label={previousLabel}
             {...prevButtonProps}
           >
-            <ChevronLeftIcon
-              aria-hidden
-              fontSize={iconSize[size]}
-            />
             {!hideLabels && previousLabel}
           </Pagination.Button>
         </Pagination.Item>
@@ -183,10 +181,6 @@ function PaginationComponent({
             {...nextButtonProps}
           >
             {!hideLabels && nextLabel}
-            <ChevronRightIcon
-              aria-hidden
-              fontSize={iconSize[size]}
-            />
           </Pagination.Button>
         </Pagination.Item>
       </Pagination.List>

From 7395d69e8987d3e8c6f616ec4ba79355992e4266 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Fri, 25 Oct 2024 16:38:10 +0200
Subject: [PATCH 4/8] remove comment

---
 .../RepeatingGroup/Pagination/RepeatingGroupPagination.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
index 409af5ed77..3c8e839f3f 100644
--- a/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
+++ b/src/layout/RepeatingGroup/Pagination/RepeatingGroupPagination.tsx
@@ -65,7 +65,6 @@ function _RepeatingGroupPagination({ inTable = true }: RepeatingGroupPaginationP
 
   const onChange = async () => {
     const prevScrollPosition = getScrollPosition();
-    //await changePage(pageNumber - 1);
     resetScrollPosition(prevScrollPosition);
   };
 

From a95bec0aa09eb3b0afb434a2d665857b01290906 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Mon, 28 Oct 2024 16:44:16 +0100
Subject: [PATCH 5/8] fix card styling

---
 src/layout/Cards/Cards.module.css |  4 +++
 src/layout/Cards/Cards.tsx        | 57 +++++++++++++++----------------
 2 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 src/layout/Cards/Cards.module.css

diff --git a/src/layout/Cards/Cards.module.css b/src/layout/Cards/Cards.module.css
new file mode 100644
index 0000000000..860a4fbfbf
--- /dev/null
+++ b/src/layout/Cards/Cards.module.css
@@ -0,0 +1,4 @@
+.mediaCard {
+  padding: 0;
+  margin-bottom: -7px;
+}
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index c840f43f18..061af91639 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import type { CSSProperties } from 'react';
 
-import { Card } from '@digdir/designsystemet-react';
-import { Grid } from '@material-ui/core';
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+import Grid from '@material-ui/core/Grid';
 
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
+import classes from 'src/layout/Cards/Cards.module.css';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponent } from 'src/layout/GenericComponent';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
@@ -39,7 +40,6 @@ export const Cards = ({ node }: ICardsProps) => {
           <Card
             key={idx}
             color={color}
-            style={{ height: '100%' }}
           >
             {mediaPosition === 'top' && (
               <Media
@@ -48,32 +48,29 @@ export const Cards = ({ node }: ICardsProps) => {
                 minMediaHeight={processedMinMediaHeight}
               />
             )}
-            {card.title && (
+            {(card.title || card.description) && (
               <Card.Block>
-                <Lang id={card.title} />
-              </Card.Block>
-            )}
-            {card.description && (
-              <Card.Block>
-                <Lang id={card.description} />
+                {card.title && (
+                  <Heading data-size='md'>
+                    <Lang id={card.title} />
+                  </Heading>
+                )}
+                {card.description && (
+                  <Paragraph>
+                    <Lang id={card.description} />
+                  </Paragraph>
+                )}
               </Card.Block>
             )}
             {card.children && card.children.length > 0 && (
-              <Grid
-                container={true}
-                item={true}
-                direction='row'
-                spacing={6}
-              >
-                <Grid
-                  container={true}
-                  alignItems='flex-start'
-                  item={true}
-                  spacing={6}
+              <Card.Block>
+                <CardProvider
+                  node={node}
+                  renderedInMedia={false}
                 >
-                  <CardProvider
-                    node={node}
-                    renderedInMedia={false}
+                  <Grid
+                    container
+                    spacing={6}
                   >
                     {card.children.filter(typedBoolean).map((childNode, idx) => (
                       <GenericComponent
@@ -81,13 +78,15 @@ export const Cards = ({ node }: ICardsProps) => {
                         node={childNode}
                       />
                     ))}
-                  </CardProvider>
-                </Grid>
-              </Grid>
+                  </Grid>
+                </CardProvider>
+              </Card.Block>
             )}
             {card.footer && (
               <Card.Block>
-                <Lang id={card.footer} />
+                <Paragraph data-size='sm'>
+                  <Lang id={card.footer} />
+                </Paragraph>
               </Card.Block>
             )}
             {mediaPosition === 'bottom' && (
@@ -116,7 +115,7 @@ function Media({ card, node, minMediaHeight }: MediaProps) {
   }
 
   return (
-    <Card.Block>
+    <Card.Block className={classes.mediaCard}>
       <CardProvider
         node={node}
         renderedInMedia={true}

From c00ad45c736f7eeb50cb1e7c1c60edbbaad3371a Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 29 Oct 2024 09:24:02 +0100
Subject: [PATCH 6/8] fix datepicker after merge

---
 src/layout/Datepicker/DatepickerDialog.tsx | 30 ++++++++++------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/layout/Datepicker/DatepickerDialog.tsx b/src/layout/Datepicker/DatepickerDialog.tsx
index ea13c7119c..e1ca81c363 100644
--- a/src/layout/Datepicker/DatepickerDialog.tsx
+++ b/src/layout/Datepicker/DatepickerDialog.tsx
@@ -22,40 +22,38 @@ export function DatePickerDialog({
 
   if (isMobile) {
     return (
-      <>
-        {trigger}
+      <Modal.Context>
+        <Modal.Trigger asChild>{trigger}</Modal.Trigger>
         <Modal
           role='dialog'
           ref={modalRef}
-          onInteractOutside={() => setIsDialogOpen(false)}
+          backdropClose
           style={{ width: 'fit-content', minWidth: 'fit-content' }}
         >
-          <Modal.Content>{children}</Modal.Content>
+          {children}
         </Modal>
-      </>
+      </Modal.Context>
     );
   }
   return (
-    <Popover
-      portal={true}
-      open={isDialogOpen}
-      onClose={() => setIsDialogOpen(false)}
-      size='lg'
-      placement='top'
-    >
+    <Popover.Context>
       <Popover.Trigger
         onClick={() => setIsDialogOpen(!isDialogOpen)}
-        asChild={true}
+        asChild
       >
         {trigger}
       </Popover.Trigger>
-      <Popover.Content
+      <Popover
+        open={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        size='lg'
+        placement='top'
         className={styles.calendarWrapper}
         aria-modal
         autoFocus={true}
       >
         {children}
-      </Popover.Content>
-    </Popover>
+      </Popover>
+    </Popover.Context>
   );
 }

From df409e195bcb8f7134cb1fe6928bf0a6721c98af Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 29 Oct 2024 15:07:35 +0100
Subject: [PATCH 7/8] make dumb card component

---
 .../Card/Card.module.css}                     |   0
 src/app-components/Card/Card.tsx              |  46 ++++++
 src/layout/Cards/Cards.tsx                    | 151 +++++++-----------
 3 files changed, 106 insertions(+), 91 deletions(-)
 rename src/{layout/Cards/Cards.module.css => app-components/Card/Card.module.css} (100%)
 create mode 100644 src/app-components/Card/Card.tsx

diff --git a/src/layout/Cards/Cards.module.css b/src/app-components/Card/Card.module.css
similarity index 100%
rename from src/layout/Cards/Cards.module.css
rename to src/app-components/Card/Card.module.css
diff --git a/src/app-components/Card/Card.tsx b/src/app-components/Card/Card.tsx
new file mode 100644
index 0000000000..6c038e810b
--- /dev/null
+++ b/src/app-components/Card/Card.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+import Grid from '@material-ui/core/Grid';
+
+import classes from 'src/app-components/Card/Card.module.css';
+
+type AppCardProps = {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  footer?: React.ReactNode;
+  media?: React.ReactNode;
+  mediaPosition?: 'top' | 'bottom';
+  color?: Parameters<typeof Card>[0]['color'];
+  children?: React.ReactNode;
+};
+
+export function AppCard({ title, description, footer, media, color, mediaPosition = 'top', children }: AppCardProps) {
+  return (
+    <Card color={color}>
+      {media && mediaPosition === 'top' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+      {(title || description) && (
+        <Card.Block>
+          {title && <Heading data-size='md'>{title}</Heading>}
+          {description && <Paragraph>{description}</Paragraph>}
+        </Card.Block>
+      )}
+      {children && (
+        <Card.Block>
+          <Grid
+            container
+            spacing={6}
+          >
+            {children}
+          </Grid>
+        </Card.Block>
+      )}
+      {footer && (
+        <Card.Block>
+          <Paragraph data-size='sm'>{footer}</Paragraph>
+        </Card.Block>
+      )}
+      {media && mediaPosition === 'bottom' && <Card.Block className={classes.mediaCard}>{media}</Card.Block>}
+    </Card>
+  );
+}
diff --git a/src/layout/Cards/Cards.tsx b/src/layout/Cards/Cards.tsx
index 061af91639..5b6c1a79ba 100644
--- a/src/layout/Cards/Cards.tsx
+++ b/src/layout/Cards/Cards.tsx
@@ -1,19 +1,16 @@
 import React from 'react';
 import type { CSSProperties } from 'react';
 
-import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
-import Grid from '@material-ui/core/Grid';
-
+import { AppCard } from 'src/app-components/Card/Card';
+import { ConditionalWrapper } from 'src/components/ConditionalWrapper';
 import { Lang } from 'src/features/language/Lang';
 import { CardProvider } from 'src/layout/Cards/CardContext';
-import classes from 'src/layout/Cards/Cards.module.css';
 import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { GenericComponent } from 'src/layout/GenericComponent';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import { typedBoolean } from 'src/utils/typing';
 import type { PropsFromGenericComponent } from 'src/layout';
-import type { CardInternal } from 'src/layout/Cards/CardsPlugin';
-import type { LayoutNode } from 'src/utils/layout/LayoutNode';
+import type { BaseLayoutNode, LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type ICardsProps = PropsFromGenericComponent<'Cards'>;
 
@@ -37,102 +34,74 @@ export const Cards = ({ node }: ICardsProps) => {
     <ComponentStructureWrapper node={node}>
       <div style={cardContainer}>
         {cardsInternal.map((card, idx) => (
-          <Card
+          <AppCard
             key={idx}
+            title={card.title && <Lang id={card.title} />}
+            description={card.description && <Lang id={card.description} />}
+            footer={card.footer && <Lang id={card.footer} />}
             color={color}
+            mediaPosition={mediaPosition}
+            media={
+              card.media && (
+                <CardItem
+                  key={idx}
+                  node={card.media}
+                  parentNode={node}
+                  isMedia={true}
+                  minMediaHeight={processedMinMediaHeight}
+                />
+              )
+            }
           >
-            {mediaPosition === 'top' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-            {(card.title || card.description) && (
-              <Card.Block>
-                {card.title && (
-                  <Heading data-size='md'>
-                    <Lang id={card.title} />
-                  </Heading>
-                )}
-                {card.description && (
-                  <Paragraph>
-                    <Lang id={card.description} />
-                  </Paragraph>
-                )}
-              </Card.Block>
-            )}
-            {card.children && card.children.length > 0 && (
-              <Card.Block>
-                <CardProvider
-                  node={node}
-                  renderedInMedia={false}
-                >
-                  <Grid
-                    container
-                    spacing={6}
-                  >
-                    {card.children.filter(typedBoolean).map((childNode, idx) => (
-                      <GenericComponent
-                        key={idx}
-                        node={childNode}
-                      />
-                    ))}
-                  </Grid>
-                </CardProvider>
-              </Card.Block>
-            )}
-            {card.footer && (
-              <Card.Block>
-                <Paragraph data-size='sm'>
-                  <Lang id={card.footer} />
-                </Paragraph>
-              </Card.Block>
-            )}
-            {mediaPosition === 'bottom' && (
-              <Media
-                card={card}
-                node={node}
-                minMediaHeight={processedMinMediaHeight}
-              />
-            )}
-          </Card>
+            {card?.children &&
+              card.children?.length > 0 &&
+              card.children?.filter(typedBoolean).map((childNode, idx) => (
+                <CardItem
+                  key={idx}
+                  node={childNode}
+                  parentNode={node}
+                  isMedia={false}
+                />
+              ))}
+          </AppCard>
         ))}
       </div>
     </ComponentStructureWrapper>
   );
 };
 
-interface MediaProps {
-  card: CardInternal;
-  node: LayoutNode<'Cards'>;
-  minMediaHeight: string | undefined;
-}
-
-function Media({ card, node, minMediaHeight }: MediaProps) {
-  if (!card.media) {
-    return null;
-  }
+type CardItemProps = {
+  node: LayoutNode;
+  parentNode: BaseLayoutNode<'Cards'>;
+  isMedia: boolean;
+  minMediaHeight?: string;
+};
 
+function CardItem({ node, parentNode, isMedia, minMediaHeight }: CardItemProps) {
   return (
-    <Card.Block className={classes.mediaCard}>
-      <CardProvider
-        node={node}
-        renderedInMedia={true}
-        minMediaHeight={minMediaHeight}
+    <CardProvider
+      node={parentNode}
+      renderedInMedia={isMedia}
+      minMediaHeight={minMediaHeight}
+    >
+      <ConditionalWrapper
+        condition={isMedia}
+        wrapper={(children) => (
+          <div
+            data-componentid={node.id}
+            data-componentbaseid={node.baseId}
+          >
+            {children}
+          </div>
+        )}
       >
-        <div
-          data-componentid={card.media.id}
-          data-componentbaseid={card.media.baseId}
-        >
-          <GenericComponent
-            node={card.media}
-            overrideDisplay={{
-              directRender: true,
-            }}
-          />
-        </div>
-      </CardProvider>
-    </Card.Block>
+        <GenericComponent
+          node={node}
+          overrideDisplay={{
+            directRender: true,
+          }}
+        />
+      </ConditionalWrapper>
+    </CardProvider>
   );
 }

From da6b93846d1b772d3cff4e52cfc9267026383054 Mon Sep 17 00:00:00 2001
From: Magnus Revheim Martinsen <mrmartinsen.96@gmail.com>
Date: Tue, 29 Oct 2024 15:45:28 +0100
Subject: [PATCH 8/8] update radio card ds tokens

---
 src/components/form/RadioButton.module.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/form/RadioButton.module.css b/src/components/form/RadioButton.module.css
index 29f64b6c96..11052024a7 100644
--- a/src/components/form/RadioButton.module.css
+++ b/src/components/form/RadioButton.module.css
@@ -10,7 +10,7 @@
 
 .card {
   border-radius: 6px;
-  background-color: var(--ds-semantic-background-subtle);
+  background-color: var(--ds-color-neutral-background-subtle);
   width: 100%;
   padding: var(--ds-spacing-2);
   margin-bottom: var(--ds-spacing-3);
@@ -22,21 +22,21 @@
 }
 
 .card:hover {
-  background: var(--ds-semantic-surface-neutral-subtle-hover);
+  background: var(--ds-color-neutral-surface-hover);
 }
 
 .card:active {
-  background: var(--ds-semantic-border-neutral-subtle);
+  background: var(--ds-color-neutral-surface-active);
 }
 
 .card:is(:checked, :has(:checked)) {
-  background: var(--ds-semantic-surface-neutral-selected);
+  background: var(--ds-color-neutral-surface-default);
   box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-semantic-border-first-active);
 }
 
 .card:has(:focus-visible) {
   --ds-focus-border-width: 3px;
-  background: var(--ds-semantic-surface-neutral-selected);
+  background: var(--ds-color-neutral-surface-default);
 
   box-shadow: 0 0 0 var(--ds-focus-border-width) var(--ds-inner-focus-border-color);
   outline: var(--ds-focus-border-width) solid var(--ds-outer-focus-border-color);