upgrade designsystem to beta 45

Altinn · Jan 16, 2025 · 1ff8e97 · 1ff8e97
1 parent 834d9d0
commit 1ff8e97
Show file tree

Hide file tree

Showing 18 changed files with 87 additions and 100 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,9 +9,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@digdir/designsystemet-css": "1.0.0-next.44",
-    "@digdir/designsystemet-react": "1.0.0-next.41-test-react19",
-    "@digdir/designsystemet-theme": "1.0.0-next.41",
+    "@digdir/designsystemet-css": "1.0.0-next.45",
+    "@digdir/designsystemet-react": "1.0.0-next.45-test-react19",
+    "@digdir/designsystemet-theme": "1.0.0-next.45",
     "@navikt/aksel-icons": "^7.0.0",
     "@reduxjs/toolkit": "^2.1.0",
     "classnames": "^2.5.1",

diff --git a/frontend/src/components/ActionBar/ActionBarContent.module.css b/frontend/src/components/ActionBar/ActionBarContent.module.css
@@ -4,10 +4,10 @@
   border-bottom-right-radius: 6px;
   border-width: 1px;
   border-color: var(--border-color);
-  padding: var(--ds-spacing-10);
+  padding: var(--ds-size-10);
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-1);
+  gap: var(--ds-size-1);
 }
 
 .actionBarContent.light {

diff --git a/frontend/src/components/ActionBar/ActionBarHeader.module.css b/frontend/src/components/ActionBar/ActionBarHeader.module.css
@@ -2,21 +2,8 @@
   display: flex;
   border: 1px var(--border-color) solid;
   border-radius: 4px;
-  color: var(--ds-semantic-text-neutral-default);
   background-color: var(--background-color);
-  margin-top: var(--ds-spacing-2);
-}
-
-.actionBar.small {
-  min-height: var(--ds-sizing-8);
-}
-
-.actionBar.medium {
-  min-height: var(--ds-sizing-14);
-}
-
-.actionBar.large {
-  min-height: var(--ds-sizing-26);
+  margin-top: var(--ds-size-2);
 }
 
 .actionBar.open {
@@ -37,6 +24,7 @@
 
 .actionBarHeader {
   color: inherit;
+  height: auto;
   width: 100%;
 }
 
@@ -46,7 +34,7 @@
 
 .actionBarButtonContainer {
   display: flex;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
   align-items: center;
   height: 100%;
   width: 100%;
@@ -56,7 +44,7 @@
   flex: 1;
   display: flex;
   flex-direction: row;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
   height: 100%;
   position: relative;
   align-items: center;

diff --git a/frontend/src/components/ActionBar/ActionBarHeader.tsx b/frontend/src/components/ActionBar/ActionBarHeader.tsx
@@ -51,7 +51,7 @@ export const ActionBarHeader = ({
 
   return (
     <div
-      className={cn(classes.actionBar, classes[color], classes[size], {
+      className={cn(classes.actionBar, classes[color], {
         [classes.subtitle]: subtitle,
         [classes.open]: open,
       })}

diff --git a/frontend/src/components/ActionBar/ActionBarIcon.module.css b/frontend/src/components/ActionBar/ActionBarIcon.module.css
@@ -8,11 +8,11 @@
 }
 
 .actionBarIcon.medium {
-  height: var(--ds-sizing-8);
-  width: var(--ds-sizing-8);
+  height: var(--ds-size-8);
+  width: var(--ds-size-8);
 }
 
 .actionBarIcon.large {
-  height: var(--ds-sizing-10);
-  width: var(--ds-sizing-10);
+  height: var(--ds-size-10);
+  width: var(--ds-size-10);
 }
diff --git a/frontend/src/components/ButtonRow/ButtonRow.module.css b/frontend/src/components/ButtonRow/ButtonRow.module.css
@@ -2,6 +2,6 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: var(--ds-spacing-4);
-  margin-top: var(--ds-spacing-15);
+  gap: var(--ds-size-4);
+  margin-top: var(--ds-size-15);
 }
diff --git a/frontend/src/components/DelegationCheckError/DelegationCheckError.module.css b/frontend/src/components/DelegationCheckError/DelegationCheckError.module.css
@@ -1,3 +1,3 @@
 .delegationCheckError {
-  margin-top: var(--ds-spacing-4);
+  margin-top: var(--ds-size-4);
 }
diff --git a/frontend/src/components/Page/Page.module.css b/frontend/src/components/Page/Page.module.css
@@ -7,12 +7,12 @@
 .pageContent {
   background-color: var(--ds-color-accent-background-default);
   box-sizing: inherit;
-  --component-page-content-padding: var(--ds-spacing-12);
+  --component-page-content-padding: var(--ds-size-12);
   padding: var(--component-page-content-padding);
 }
 
 @media only screen and (max-width: 769px) {
   .pageContent {
-    --component-page-content-padding: var(--ds-spacing-2);
+    --component-page-content-padding: var(--ds-size-2);
   }
 }
diff --git a/frontend/src/components/Page/PageHeader.module.css b/frontend/src/components/Page/PageHeader.module.css
@@ -1,17 +1,17 @@
 .pageHeader {
-  --page-header-height: var(--ds-sizing-22);
+  --page-header-height: var(--ds-size-22);
   min-height: var(--page-header-height);
   background-color: var(--component-page_header-background-color);
   display: flex;
   color: var(--component-page_header-color);
   align-items: center;
   --page_header-title-font-size: 1rem;
   font-size: var(--page_header-title-font-size);
-  --page-header-padding: var(--ds-spacing-8);
+  --page-header-padding: var(--ds-size-8);
   padding-left: var(--page-header-padding);
   padding-right: var(--page-header-padding);
   gap: var(--page-header-padding);
-  --page-header-icon-dimension: var(--ds-sizing-10);
+  --page-header-icon-dimension: var(--ds-size-10);
 }
 
 .pageHeader.dark {
@@ -21,7 +21,6 @@
 
 .pageHeader.light {
   --component-page_header-background-color: var(--ds-semantic-surface-neutral-default);
-  --component-page_header-color: var(--ds-semantic-text-neutral-default);
   border-bottom: solid 1px var(--ds-semantic-border-neutral-subtle);
 }
 
@@ -47,9 +46,9 @@
 
 @media only screen and (max-width: 769px) {
   .pageHeader {
-    --page-header-height: var(--ds-sizing-14);
-    --page-header-padding: var(--ds-spacing-5);
+    --page-header-height: var(--ds-size-14);
+    --page-header-padding: var(--ds-size-5);
     --page_header-title-font-size: 0.75rem;
-    --page-header-icon-dimension: var(--ds-sizing-7);
+    --page-header-icon-dimension: var(--ds-size-7);
   }
 }
diff --git a/frontend/src/components/PageContainer/PageContainer.module.css b/frontend/src/components/PageContainer/PageContainer.module.css
@@ -7,10 +7,10 @@
 }
 
 .buttonContainer {
-  margin-top: var(--ds-spacing-8);
+  margin-top: var(--ds-size-8);
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--ds-spacing-2);
+  margin-bottom: var(--ds-size-2);
 }
 
 .buttonContainerButton {
@@ -22,24 +22,24 @@
 }
 
 .buttonContainerIcon {
-  height: var(--ds-sizing-6);
-  width: var(--ds-sizing-6);
+  height: var(--ds-size-6);
+  width: var(--ds-size-6);
 }
 
 @media only screen and (min-width: 375px) {
   .pageMargin {
-    margin: var(--ds-spacing-2);
+    margin: var(--ds-size-2);
   }
 }
 
 @media only screen and (min-width: 769px) {
   .pageMargin {
-    margin: var(--ds-spacing-4);
+    margin: var(--ds-size-4);
   }
 }
 
 @media only screen and (min-width: 992px) {
   .pageMargin {
-    margin: var(--ds-spacing-10);
+    margin: var(--ds-size-10);
   }
 }
diff --git a/frontend/src/components/PageDescription/PageDescription.module.css b/frontend/src/components/PageDescription/PageDescription.module.css
@@ -1,6 +1,6 @@
 .pageDescription {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-1);
-  margin-bottom: var(--ds-spacing-8);
+  gap: var(--ds-size-1);
+  margin-bottom: var(--ds-size-8);
 }
diff --git a/frontend/src/components/RequestPage/RequestPage.module.css b/frontend/src/components/RequestPage/RequestPage.module.css
@@ -1,10 +1,10 @@
 :root {
-  --vendor-container-padding: var(--ds-spacing-12);
+  --vendor-container-padding: var(--ds-size-12);
 }
 
 @media only screen and (max-width: 769px) {
   :root {
-    --vendor-container-padding: var(--ds-spacing-4);
+    --vendor-container-padding: var(--ds-size-4);
   }
 }
 
@@ -31,7 +31,7 @@
 }
 
 .vendorInfo {
-  padding-top: var(--ds-spacing-4);
+  padding-top: var(--ds-size-4);
   padding-right: var(--vendor-container-padding);
   padding-bottom: var(--vendor-container-padding);
   text-align: right;
@@ -41,7 +41,7 @@
 .vendorRequestBlock {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-8);
+  gap: var(--ds-size-8);
   background-color: var(--ds-color-accent-background-default);
   padding: var(--vendor-container-padding);
   margin-bottom: 3px;

diff --git a/frontend/src/components/UserInfoBar/UserInfoBar.module.css b/frontend/src/components/UserInfoBar/UserInfoBar.module.css
@@ -6,8 +6,8 @@
 .userInfoContent {
   display: flex;
   align-items: center;
-  gap: var(--ds-spacing-1);
-  margin-right: var(--ds-spacing-1);
+  gap: var(--ds-size-1);
+  margin-right: var(--ds-size-1);
 }
 
 .userInfoText {
@@ -17,6 +17,6 @@
 }
 
 .companyIcon {
-  width: var(--ds-sizing-7);
-  height: var(--ds-sizing-7);
+  width: var(--ds-size-7);
+  height: var(--ds-size-7);
 }
diff --git a/frontend/src/features/creationpage/CreationPageContent.module.css b/frontend/src/features/creationpage/CreationPageContent.module.css
@@ -1,7 +1,7 @@
 .creationPageContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
   max-width: 37rem;
 }
 

diff --git a/frontend/src/features/detailpage/DetailPage.module.css b/frontend/src/features/detailpage/DetailPage.module.css
@@ -1,7 +1,7 @@
 .detailPageContent {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-8);
+  gap: var(--ds-size-8);
 }
 
 .nameField {

diff --git a/frontend/src/features/overviewpage/OverviewPageContent.module.css b/frontend/src/features/overviewpage/OverviewPageContent.module.css
@@ -1,8 +1,8 @@
 .systemUserHeader {
-  margin-top: var(--ds-spacing-12);
+  margin-top: var(--ds-size-12);
 }
 
 .description {
-  margin-top: var(--ds-spacing-2);
-  margin-bottom: var(--ds-spacing-12);
+  margin-top: var(--ds-size-2);
+  margin-bottom: var(--ds-size-12);
 }
diff --git a/frontend/src/sites/NotFoundSite/NotFoundSite.module.css b/frontend/src/sites/NotFoundSite/NotFoundSite.module.css
@@ -1,13 +1,13 @@
 .flexWrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .flexContainer {
   display: flex;
-  gap: var(--ds-spacing-30);
-  margin-top: var(--ds-spacing-12);
+  gap: var(--ds-size-30);
+  margin-top: var(--ds-size-12);
 }
 
 @media only screen and (max-width: 576px) {