Merge branch 'next' into tooltip/popover

digdir · Jan 2, 2025 · de2834a · de2834a
2 parents 514a2a5 + 2d841a1
commit de2834a
Show file tree

Hide file tree

Showing 147 changed files with 5,402 additions and 4,193 deletions.
diff --git a/.changeset/rotten-tomatoes-run.md b/.changeset/rotten-tomatoes-run.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": minor
+---
+
+New CSS variables for sizes, `--ds-size-*`
diff --git a/.changeset/strange-feet-check.md b/.changeset/strange-feet-check.md
@@ -0,0 +1,7 @@
+---
+"@digdir/designsystemet-theme": minor
+"@digdir/designsystemet": minor
+"@digdir/designsystemet-css": minor
+---
+
+Moved typography based sizing formula to design-tokens
diff --git a/.changeset/tricky-islands-jam.md b/.changeset/tricky-islands-jam.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Support for building typography based sizing design-tokens
diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css
@@ -8,7 +8,7 @@
 }
 
 .codeSnippet > pre {
-  padding-right: var(--ds-spacing-18) !important;
+  padding-right: var(--ds-size-18) !important;
   background-color: var(--ds-color-neutral-background-subtle) !important;
 }
 
@@ -22,6 +22,6 @@
 
 .copyButton {
   position: absolute;
-  top: var(--ds-spacing-2);
-  right: var(--ds-spacing-2);
+  top: var(--ds-size-2);
+  right: var(--ds-size-2);
 }
diff --git a/apps/_components/src/Footer/Footer.module.css b/apps/_components/src/Footer/Footer.module.css
@@ -6,19 +6,19 @@
 .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
-  gap: var(--ds-spacing-10);
+  gap: var(--ds-size-10);
 }
 
 .title {
-  margin-bottom: var(--ds-spacing-4);
+  margin-bottom: var(--ds-size-4);
 }
 
 .logos {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--ds-spacing-8);
-  margin-top: var(--ds-spacing-8);
+  gap: var(--ds-size-8);
+  margin-top: var(--ds-size-8);
 }
 
 .links {
@@ -28,7 +28,7 @@
 
 .links li {
   list-style: none;
-  margin-bottom: var(--ds-spacing-5);
+  margin-bottom: var(--ds-size-5);
 }
 
 .links li:last-child {
@@ -68,28 +68,28 @@
 .footer .logos svg {
   height: 26px;
   width: auto;
-  margin-right: var(--ds-spacing-2);
+  margin-right: var(--ds-size-2);
 
   &.udir {
     height: 32px;
   }
 }
 
 .top {
-  padding: var(--ds-spacing-18) 0;
+  padding: var(--ds-size-18) 0;
 }
 
 .bottom {
   background-color: var(--ds-color-neutral-background-default);
-  padding: var(--ds-spacing-7) 0;
+  padding: var(--ds-size-7) 0;
 }
 
 .button {
   --dsc-button-color: var(--ds-color-neutral-text-default);
-  --dsc-button-padding-block: var(--ds-spacing-4);
-  --dsc-button-padding-inline: var(--ds-spacing-5);
+  --dsc-button-padding-block: var(--ds-size-4);
+  --dsc-button-padding-inline: var(--ds-size-5);
 
   border: 2px dashed var(--ds-color-neutral-border-strong);
   width: fit-content;
-  margin-top: var(--ds-spacing-8);
+  margin-top: var(--ds-size-8);
 }
diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
@@ -21,7 +21,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0 var(--ds-spacing-8);
+  padding: 0 var(--ds-size-8);
 }
 
 .container nav {
@@ -35,7 +35,7 @@
 .logoContainer {
   display: flex;
   align-items: center;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .logo {
@@ -76,14 +76,14 @@
 
 .item {
   list-style: none;
-  margin-left: var(--ds-spacing-7);
+  margin-left: var(--ds-size-7);
 }
 
 .link {
   color: inherit;
   text-decoration: none;
   border-bottom: 3px solid transparent;
-  padding-bottom: var(--ds-spacing-2);
+  padding-bottom: var(--ds-size-2);
   transition: 0.1s border-color ease-out;
 }
 
@@ -93,17 +93,17 @@
 }
 
 .itemIcon {
-  margin-left: var(--ds-spacing-1);
+  margin-left: var(--ds-size-1);
 }
 
 .firstIcon {
-  margin-left: var(--ds-spacing-8);
+  margin-left: var(--ds-size-8);
 }
 
 .linkIcon {
   display: grid;
   place-items: center;
-  padding: 0 var(--ds-spacing-2);
+  padding: 0 var(--ds-size-2);
 }
 
 .linkIcon > svg {
@@ -142,7 +142,7 @@
   }
 
   & nav {
-    gap: var(--ds-spacing-1);
+    gap: var(--ds-size-1);
   }
 
   .menu {

diff --git a/apps/_components/src/Showcase/Showcase.module.css b/apps/_components/src/Showcase/Showcase.module.css
@@ -2,7 +2,7 @@
   width: 100%;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: var(--ds-spacing-8);
+  gap: var(--ds-size-8);
   margin: 0 auto;
   background-color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
@@ -159,5 +159,5 @@
 .toggleCombo {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-2);
+  gap: var(--ds-size-2);
 }
diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
@@ -207,10 +207,10 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
         </div>
       </div>
       <div className={cl(classes.card, classes.switches)}>
-        <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
           Innstillinger
         </Heading>
-        <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
           Her kan du justere på innstillingene dine
         </Paragraph>
         <div className={classes.switchGroup}>
@@ -221,10 +221,10 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
         </div>
       </div>
       <div className={cl(classes.card, classes.combobox)}>
-        <Heading style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
           Hvor er du fra?
         </Heading>
-        <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+        <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
           Svar under så finner vi flyreise
         </Paragraph>
         <div className={classes.toggleCombo}>

diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.module.css b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
@@ -2,8 +2,8 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: var(--ds-spacing-8);
-  padding-top: var(--ds-spacing-18) !important;
+  gap: var(--ds-size-8);
+  padding-top: var(--ds-size-18) !important;
   padding-bottom: var(--page-spacing-bottom) !important;
 
   [data-color-scheme='dark'] &,
@@ -15,8 +15,8 @@
 .main {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  gap: var(--ds-spacing-18);
-  column-gap: var(--ds-spacing-12);
+  gap: var(--ds-size-18);
+  column-gap: var(--ds-size-12);
 }
 
 .main [data-featured='true'] {

diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -12,7 +12,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: var(--ds-spacing-8) var(--ds-spacing-10);
+    padding: var(--ds-size-8) var(--ds-size-10);
   }
 }
 
@@ -31,7 +31,7 @@
 
 .meta {
   display: flex;
-  gap: var(--ds-spacing-3);
+  gap: var(--ds-size-3);
   color: var(--ds-color-neutral-text-subtle);
   font-size: 14px !important;
 }

diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css b/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
@@ -6,10 +6,10 @@
   justify-content: center;
   align-items: center;
   max-width: 640px;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
   margin: 0 auto;
-  margin-top: var(--ds-spacing-18);
-  padding: var(--ds-spacing-10);
+  margin-top: var(--ds-size-18);
+  padding: var(--ds-size-10);
   border-radius: var(--ds-border-radius-lg);
   border: 1px solid var(--ds-color-neutral-border-subtle);
 }
@@ -46,7 +46,7 @@
   flex-wrap: wrap;
   text-wrap: nowrap;
   justify-content: center;
-  gap: var(--ds-spacing-3);
+  gap: var(--ds-size-3);
   color: var(--ds-color-neutral-text-subtle);
 }
 

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
@@ -7,7 +7,7 @@
 }
 
 .page {
-  margin-top: var(--ds-spacing-18);
+  margin-top: var(--ds-size-18);
   margin-bottom: var(--page-spacing-bottom);
 }
 
@@ -17,10 +17,10 @@
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  gap: var(--ds-spacing-5);
+  gap: var(--ds-size-5);
   text-align: center;
   margin: 0 auto;
-  margin-top: var(--ds-spacing-12);
+  margin-top: var(--ds-size-12);
 }
 
 .ingress {
@@ -30,8 +30,8 @@
 .meta {
   display: flex;
   justify-content: center;
-  margin-top: var(--ds-spacing-1);
-  gap: var(--ds-spacing-3);
+  margin-top: var(--ds-size-1);
+  gap: var(--ds-size-3);
   color: var(--ds-color-neutral-text-subtle);
 }
 
@@ -47,7 +47,7 @@
 .main {
   display: flex;
   flex-direction: column;
-  gap: var(--ds-spacing-18);
+  gap: var(--ds-size-18);
 }
 
 .content {
@@ -60,7 +60,7 @@
 .content img {
   display: block;
   width: 860px;
-  margin: var(--ds-spacing-12) 0;
+  margin: var(--ds-size-12) 0;
   margin-left: calc((100% - 860px) / 2) !important;
   background-color: var(--ds-color-neutral-background-subtle);
 }
@@ -83,19 +83,19 @@
 }
 
 .content:last-child {
-  margin-bottom: var(--ds-spacing-12);
+  margin-bottom: var(--ds-size-12);
 }
 
 .wantToWrite {
-  margin-top: var(--ds-spacing-12);
+  margin-top: var(--ds-size-12);
   border-radius: var(--ds-border-radius-lg);
   background: var(--ds-color-brand1-surface-default);
   color: var(--ds-color-brand1-text-default);
-  padding: var(--ds-spacing-8);
+  padding: var(--ds-size-8);
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  gap: var(--ds-spacing-4);
+  gap: var(--ds-size-4);
 }
 
 .wantToWrite p a {