@digdir/designsystemet-css 1.0.0-next.34 → 1.0.0-next.35

package/skiplink.css

@@ -1,3 +1,7 @@
+.ds-skiplink {
+  @composes ds-sr-only from './utilities.css';
+}
+
 .ds-skiplink:focus {
   display: grid;
   place-items: center;
@@ -10,19 +14,11 @@
   clip: auto;
   clip-path: none;
   white-space: inherit;
-  text-decoration: none;
   padding: var(--ds-spacing-4);
-  color: var(--ds-color-neutral-text-default);
+  color: var(--ds-color-accent-text-default);
   background: var(--ds-color-accent-surface-hover);
-}
-
-.ds-skiplink__content {
-  color: var(--dsc-link-color);
+  box-sizing: border-box;
   text-decoration: underline;
   text-decoration-thickness: max(1px, 0.0625rem);
   text-underline-offset: max(5px, 0.25rem);
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ds-spacing-1);
-  margin: 0;
 }

package/spinner.css

@@ -4,10 +4,10 @@
   --dsc-spinner-size: var(--ds-sizing-11);
   --dsc-spinner-animation-duration: 2s;
 
-  width: var(--dsc-spinner-size);
+  animation: ds-spinner-rotate-animation linear infinite var(--dsc-spinner-animation-duration);
+  box-sizing: border-box;
   height: var(--dsc-spinner-size);
-  animation: ds-spinner-rotate-animation linear infinite;
-  animation-duration: var(--dsc-spinner-animation-duration);
+  width: var(--dsc-spinner-size);
 
   &[data-color='accent'] {
     --dsc-spinner-stroke: var(--ds-color-accent-base-default);
@@ -39,11 +39,10 @@
 }
 
 .ds-spinner__circle {
-  stroke: var(--dsc-spinner-stroke);
+  animation: ds-spinner-stroke-animation ease-in-out infinite var(--dsc-spinner-animation-duration);
   stroke-dasharray: 1px, 200px;
+  stroke: var(--dsc-spinner-stroke);
   transform-origin: center;
-  animation: ds-spinner-stroke-animation ease-in-out infinite;
-  animation-duration: var(--dsc-spinner-animation-duration);
 }
 
 /* Prefers reduced motion needs longer animation,

package/table.css

@@ -15,9 +15,12 @@
   border-collapse: separate; /* Using separate mode to enable border-radius */
   border-radius: var(--dsc-table-border-radius);
   border-spacing: 0;
+  box-sizing: border-box;
   color: var(--dsc-table-color);
   width: 100%;
 
+  @composes ds-body-text--md from './utilities.css';
+
   & > :is(tbody, thead) > tr > :is(th, td) {
     background: var(--dsc-table-background);
     border-bottom: var(--dsc-table-border);
@@ -112,10 +115,14 @@
     */
   &[data-size='sm'] {
     --dsc-table-padding: var(--ds-spacing-1) var(--ds-spacing-3);
+
+    @composes ds-body-text--sm from './utilities.css';
   }
 
   &[data-size='lg'] {
     --dsc-table-padding: var(--ds-spacing-3) var(--ds-spacing-3);
+
+    @composes ds-body-text--lg from './utilities.css';
   }
 
   /**

package/tabs.css

@@ -6,14 +6,20 @@
   --dsc-tabs-content-color: var(--ds-color-neutral-text-default);
   --dsc-tabs-list-border-color: var(--ds-color-neutral-border-subtle);
 
+  @composes ds-body-text--short-md from './utilities.css';
+
   &[data-size='sm'] {
     --dsc-tabs-tab-padding: var(--ds-spacing-2) var(--ds-spacing-4);
     --dsc-tabs-content-padding: var(--ds-spacing-4);
+
+    @composes ds-body-text--short-sm from './utilities.css';
   }
 
   &[data-size='lg'] {
     --dsc-tabs-tab-padding: var(--ds-spacing-4) var(--ds-spacing-6);
     --dsc-tabs-content-padding: var(--ds-spacing-6);
+
+    @composes ds-body-text--short-lg from './utilities.css';
   }
 }
 
@@ -30,21 +36,18 @@
 }
 
 .ds-tabs__tab {
+  all: unset; /* Reset <button> */
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--dsc-tabs-tab-color);
+  cursor: pointer;
   display: flex;
   flex-direction: row;
-  box-sizing: border-box;
   gap: var(--ds-spacing-1);
   justify-content: center;
-  text-align: center;
-  align-items: center;
   padding: var(--dsc-tabs-tab-padding);
-  border: none;
-  border-radius: 0;
-  background-color: transparent;
-  cursor: pointer;
-  color: var(--dsc-tabs-tab-color);
   position: relative;
-  font-family: inherit;
+  text-align: center;
 
   &[aria-selected='true'] {
     --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);

package/tag.css

@@ -15,14 +15,20 @@
   width: max-content;
   word-break: break-word;
 
+  @composes ds-body-text--short-md from './utilities.css';
+
   &[data-size='sm'] {
     --dsc-tag-padding: 0 var(--ds-spacing-2);
     --dsc-tag-min-height: var(--ds-sizing-7);
+
+    @composes ds-body-text--short-sm from './utilities.css';
   }
 
   &[data-size='lg'] {
     --dsc-tag-padding: 0 var(--ds-spacing-3);
     --dsc-tag-min-height: var(--ds-sizing-9);
+
+    @composes ds-body-text--short-lg from './utilities.css';
   }
 
   &[data-color='info'] {

package/tooltip.css

@@ -2,9 +2,12 @@
   --dsc-tooltip-background: var(--ds-color-neutral-text-default);
 
   background: var(--dsc-tooltip-background);
-  padding: var(--ds-spacing-1) var(--ds-spacing-2);
-  color: var(--ds-color-neutral-background-default);
   border-radius: var(--ds-border-radius-md);
+  box-sizing: border-box;
+  color: var(--ds-color-neutral-background-default);
+  padding: var(--ds-spacing-1) var(--ds-spacing-2);
+
+  @composes ds-body-text--short-xs from './utilities.css';
 }
 
 .ds-tooltip__arrow {

package/utilities.css

@@ -12,30 +12,186 @@
   width: 1px;
 }
 
-:root {
+:root,
+[data-ds-color-mode] {
   --dsc-focus-border-width: 3px; /* Default focus border width */
-  --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner),
-    0 0 0 calc(var(--dsc-focus-border-width) * 2) var(--ds-color-focus-outer);
+  --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
+  --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
 }
 
 /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
- .ds-focus:focus-visible {
-  outline: none;
+.ds-focus:focus-visible {
+  @composes ds-focus--visible from './utilities.css';
+}
+
+/**
+* Focus outline that can be composed if it needs a specific selector
+*/
+.ds-focus--visible {
+  /**
+  * We use both box-shadow and outline to ensure that the focus style is visible,
+  * in case box-shadow is overridden.
+  */
   box-shadow: var(--dsc-focus-boxShadow);
+  outline: var(--dsc-focus-outline);
+  outline-offset: var(--dsc-focus-border-width);
 }
 
-.ds-animate-height--openingOrClosing,
-.ds-animate-height--closed {
-  overflow: hidden;
+/** Body typography */
+.ds-body-text--xs {
+  font-weight: var(--ds-body-xs-font-weight);
+  line-height: var(--ds-body-xs-line-height);
+  font-size: var(--ds-body-xs-font-size);
+  letter-spacing: var(--ds-body-xs-letter-spacing);
+}
+
+.ds-body-text--sm {
+  font-weight: var(--ds-body-sm-font-weight);
+  line-height: var(--ds-body-sm-line-height);
+  font-size: var(--ds-body-sm-font-size);
+  letter-spacing: var(--ds-body-sm-letter-spacing);
+}
+
+.ds-body-text--md {
+  font-weight: var(--ds-body-md-font-weight);
+  line-height: var(--ds-body-md-line-height);
+  font-size: var(--ds-body-md-font-size);
+  letter-spacing: var(--ds-body-md-letter-spacing);
+}
+
+.ds-body-text--lg {
+  font-weight: var(--ds-body-lg-font-weight);
+  line-height: var(--ds-body-lg-line-height);
+  font-size: var(--ds-body-lg-font-size);
+  letter-spacing: var(--ds-body-lg-letter-spacing);
+}
+
+.ds-body-text--xl {
+  font-weight: var(--ds-body-xl-font-weight);
+  line-height: var(--ds-body-xl-line-height);
+  font-size: var(--ds-body-xl-font-size);
+  letter-spacing: var(--ds-body-xl-letter-spacing);
+}
+
+.ds-body-text--long-xs {
+  font-weight: var(--ds-body-long-xs-font-weight);
+  line-height: var(--ds-body-long-xs-line-height);
+  font-size: var(--ds-body-long-xs-font-size);
+  letter-spacing: var(--ds-body-long-xs-letter-spacing);
+}
+
+.ds-body-text--long-sm {
+  font-weight: var(--ds-body-long-sm-font-weight);
+  line-height: var(--ds-body-long-sm-line-height);
+  font-size: var(--ds-body-long-sm-font-size);
+  letter-spacing: var(--ds-body-long-sm-letter-spacing);
+}
+
+.ds-body-text--long-md {
+  font-weight: var(--ds-body-long-md-font-weight);
+  line-height: var(--ds-body-long-md-line-height);
+  font-size: var(--ds-body-long-md-font-size);
+  letter-spacing: var(--ds-body-long-md-letter-spacing);
+}
+
+.ds-body-text--long-lg {
+  font-weight: var(--ds-body-long-lg-font-weight);
+  line-height: var(--ds-body-long-lg-line-height);
+  font-size: var(--ds-body-long-lg-font-size);
+  letter-spacing: var(--ds-body-long-lg-letter-spacing);
+}
+
+.ds-body-text--long-xl {
+  font-weight: var(--ds-body-long-xl-font-weight);
+  line-height: var(--ds-body-long-xl-line-height);
+  font-size: var(--ds-body-long-xl-font-size);
+  letter-spacing: var(--ds-body-long-xl-letter-spacing);
+}
+
+.ds-body-text--short-xs {
+  font-weight: var(--ds-body-short-xs-font-weight);
+  line-height: var(--ds-body-short-xs-line-height);
+  font-size: var(--ds-body-short-xs-font-size);
+  letter-spacing: var(--ds-body-short-xs-letter-spacing);
+}
+
+.ds-body-text--short-sm {
+  font-weight: var(--ds-body-short-sm-font-weight);
+  line-height: var(--ds-body-short-sm-line-height);
+  font-size: var(--ds-body-short-sm-font-size);
+  letter-spacing: var(--ds-body-short-sm-letter-spacing);
+}
+
+.ds-body-text--short-md {
+  font-weight: var(--ds-body-short-md-font-weight);
+  line-height: var(--ds-body-short-md-line-height);
+  font-size: var(--ds-body-short-md-font-size);
+  letter-spacing: var(--ds-body-short-md-letter-spacing);
+}
+
+.ds-body-text--short-lg {
+  font-weight: var(--ds-body-short-lg-font-weight);
+  line-height: var(--ds-body-short-lg-line-height);
+  font-size: var(--ds-body-short-lg-font-size);
+  letter-spacing: var(--ds-body-short-lg-letter-spacing);
+}
+
+.ds-body-text--short-xl {
+  font-weight: var(--ds-body-short-xl-font-weight);
+  line-height: var(--ds-body-short-xl-line-height);
+  font-size: var(--ds-body-short-xl-font-size);
+  letter-spacing: var(--ds-body-short-xl-letter-spacing);
+}
+
+/** Heading */
+
+.ds-heading-text--2xs {
+  font-weight: var(--ds-heading-2xs-font-weight);
+  line-height: var(--ds-heading-2xs-line-height);
+  font-size: var(--ds-heading-2xs-font-size);
+  letter-spacing: var(--ds-heading-2xs-letter-spacing);
+}
+
+.ds-heading-text--xs {
+  font-weight: var(--ds-heading-xs-font-weight);
+  line-height: var(--ds-heading-xs-line-height);
+  font-size: var(--ds-heading-xs-font-size);
+  letter-spacing: var(--ds-heading-xs-letter-spacing);
+}
+
+.ds-heading-text--sm {
+  font-weight: var(--ds-heading-sm-font-weight);
+  line-height: var(--ds-heading-sm-line-height);
+  font-size: var(--ds-heading-sm-font-size);
+  letter-spacing: var(--ds-heading-sm-letter-spacing);
+}
+
+.ds-heading-text--md {
+  font-size: var(--ds-heading-md-font-size);
+  font-weight: var(--ds-heading-md-font-weight);
+  letter-spacing: var(--ds-heading-md-letter-spacing);
+  line-height: var(--ds-heading-md-line-height);
+}
+
+.ds-heading-text--lg {
+  font-weight: var(--ds-heading-lg-font-weight);
+  line-height: var(--ds-heading-lg-line-height);
+  font-size: var(--ds-heading-lg-font-size);
+  letter-spacing: var(--ds-heading-lg-letter-spacing);
 }
 
-.ds-animate-height--open .ds-animate-height__content {
-  height: auto;
+.ds-heading-text--xl {
+  font-weight: var(--ds-heading-xl-font-weight);
+  line-height: var(--ds-heading-xl-line-height);
+  font-size: var(--ds-heading-xl-font-size);
+  letter-spacing: var(--ds-heading-xl-letter-spacing);
 }
 
-.ds-animate-height--closed .ds-animate-height__content {
-  height: 0;
-  display: none;
+.ds-heading-text--2xl {
+  font-weight: var(--ds-heading-2xl-font-weight);
+  line-height: var(--ds-heading-2xl-line-height);
+  font-size: var(--ds-heading-2xl-font-size);
+  letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }