@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.2

package/heading.css

@@ -1,61 +1,61 @@
-@layer fds.typography.heading {
-  .fds-heading {
-    --fdsc-bottom-spacing: var(--fds-spacing-6);
+@layer ds.typography.heading {
+  .ds-heading {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
     margin: 0;
-    color: var(--fds-semantic-text-neutral-default);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-heading--spacing {
-    margin-bottom: var(--fdsc-bottom-spacing);
+  .ds-heading--spacing {
+    margin-bottom: var(--dsc-bottom-spacing);
   }
 
-  .fds-heading--2xl {
-    --fdsc-bottom-spacing: var(--fds-spacing-7);
+  .ds-heading--2xl {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
 
-    font: var(--fds-typography-heading-2xlarge);
+    font: var(--ds-typography-heading-2xl);
     font-family: inherit;
   }
 
-  .fds-heading--xl {
-    --fdsc-bottom-spacing: var(--fds-spacing-6);
+  .ds-heading--xl {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
-    font: var(--fds-typography-heading-xlarge);
+    font: var(--ds-typography-heading-xl);
     font-family: inherit;
   }
 
-  .fds-heading--lg {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
+  .ds-heading--lg {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
-    font: var(--fds-typography-heading-large);
+    font: var(--ds-typography-heading-lg);
     font-family: inherit;
   }
 
-  .fds-heading--md {
-    --fdsc-bottom-spacing: var(--fds-spacing-4);
+  .ds-heading--md {
+    --dsc-bottom-spacing: var(--ds-spacing-4);
 
-    font: var(--fds-typography-heading-medium);
+    font: var(--ds-typography-heading-md);
     font-family: inherit;
   }
 
-  .fds-heading--sm {
-    --fdsc-bottom-spacing: var(--fds-spacing-3);
+  .ds-heading--sm {
+    --dsc-bottom-spacing: var(--ds-spacing-3);
 
-    font: var(--fds-typography-heading-small);
+    font: var(--ds-typography-heading-sm);
     font-family: inherit;
   }
 
-  .fds-heading--xs {
-    --fdsc-bottom-spacing: var(--fds-spacing-2);
+  .ds-heading--xs {
+    --dsc-bottom-spacing: var(--ds-spacing-2);
 
-    font: var(--fds-typography-heading-xsmall);
+    font: var(--ds-typography-heading-xs);
     font-family: inherit;
   }
 
-  .fds-heading--2xs {
-    --fdsc-bottom-spacing: var(--fds-spacing-1);
+  .ds-heading--2xs {
+    --dsc-bottom-spacing: var(--ds-spacing-1);
 
-    font: var(--fds-typography-heading-xxsmall);
+    font: var(--ds-typography-heading-2xs);
     font-family: inherit;
   }
 }

package/helptext.css

@@ -1,5 +1,5 @@
-@layer fds.helptext {
-  .fds-helptext__button {
+@layer ds.helptext {
+  .ds-helptext__button {
     background-color: transparent;
     border-radius: 50px;
     padding: 0 !important;
@@ -11,48 +11,49 @@
   }
 
   @media print {
-    .fds-helptext__button {
+    .ds-helptext__button {
       display: none;
     }
   }
 
-  .fds-helptext__icon--filled {
+  .ds-helptext__icon--filled {
     display: none;
   }
 
-  .fds-helptext__icon {
-    color: var(--fds-semantic-text-action-default);
-    width: var(--fds-sizing-7);
-    height: var(--fds-sizing-7);
+  .ds-helptext__icon {
+    color: var(--ds-color-accent-base-default);
+    width: var(--ds-sizing-7);
+    height: var(--ds-sizing-7);
   }
 
-  .fds-helptext__button:where(:hover, :focus, [data-state^='open']) > .fds-helptext__icon {
+  .ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon {
     display: none;
   }
 
-  .fds-helptext__button:where(:hover, :focus, [data-state^='open']) > .fds-helptext__icon--filled {
+  .ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon--filled {
     display: inline-block;
   }
 
-  .fds-helptext__content {
-    font: var(--fds-typography-paragraph-medium);
+  .ds-helptext__content {
+    font: var(--ds-typography-paragraph-md);
+    color: var(--ds-color-neutral-text-default);
     font-family: inherit;
     width: fit-content;
     max-width: 700px;
   }
 
-  .fds-helptext--sm .fds-helptext__icon {
-    width: var(--fds-sizing-6);
-    height: var(--fds-sizing-6);
+  .ds-helptext--sm .ds-helptext__icon {
+    width: var(--ds-sizing-6);
+    height: var(--ds-sizing-6);
   }
 
-  .fds-helptext--md .fds-helptext__icon {
-    width: var(--fds-sizing-7);
-    height: var(--fds-sizing-7);
+  .ds-helptext--md .ds-helptext__icon {
+    width: var(--ds-sizing-7);
+    height: var(--ds-sizing-7);
   }
 
-  .fds-helptext--lg .fds-helptext__icon {
-    width: var(--fds-sizing-8);
-    height: var(--fds-sizing-8);
+  .ds-helptext--lg .ds-helptext__icon {
+    width: var(--ds-sizing-8);
+    height: var(--ds-sizing-8);
   }
 }

package/index.css

@@ -1,21 +1,21 @@
 @charset "UTF-8";
 
-@layer fds.typography, fds.utils, fds.box, fds.btn;
+@layer ds.typography, ds.utils, ds.box, ds.btn;
 
 /** Import order defines ordinal specificity for layers */
+@import url('./label.css');
+@import url('./heading.css');
+@import url('./paragraph.css');
+@import url('./ingress.css');
 @import url('./button.css');
 @import url('./utils.css');
 @import url('./box.css');
 @import url('./alert.css');
-@import url('./ingress.css');
 @import url('./skiplink.css');
 @import url('./accordion.css');
 @import url('./switch.css');
 @import url('./checkbox.css');
 @import url('./error-message.css');
-@import url('./label.css');
-@import url('./heading.css');
-@import url('./paragraph.css');
 @import url('./radio.css');
 @import url('./search.css');
 @import url('./native-select.css');

package/ingress.css

@@ -1,40 +1,40 @@
-@layer fds.typography.ingress {
-  .fds-ingress {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
+@layer ds.typography.ingress {
+  .ds-ingress {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
     margin: 0;
-    color: var(--fds-semantic-text-neutral-default);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-ingress--spacing {
-    margin-bottom: var(--fdsc-bottom-spacing);
+  .ds-ingress--spacing {
+    margin-bottom: var(--dsc-bottom-spacing);
   }
 
-  .fds-ingress--md {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
+  .ds-ingress--md {
+    --dsc-bottom-spacing: var(--ds-spacing-5);
 
-    font: var(--fds-typography-ingress-medium);
+    font: var(--ds-typography-ingress-md);
     font-family: inherit;
   }
 
-  .fds-ingress--lg {
-    --fdsc-bottom-spacing: var(--fds-spacing-6);
+  .ds-ingress--lg {
+    --dsc-bottom-spacing: var(--ds-spacing-6);
 
-    font: var(--fds-typography-ingress-large);
+    font: var(--ds-typography-ingress-lg);
     font-family: inherit;
   }
 
-  .fds-ingress--sm {
-    --fdsc-bottom-spacing: var(--fds-spacing-7);
+  .ds-ingress--sm {
+    --dsc-bottom-spacing: var(--ds-spacing-7);
 
-    font: var(--fds-typography-ingress-small);
+    font: var(--ds-typography-ingress-sm);
     font-family: inherit;
   }
 
-  .fds-ingress--xs {
-    --fdsc-bottom-spacing: var(--fds-spacing-8);
+  .ds-ingress--xs {
+    --dsc-bottom-spacing: var(--ds-spacing-8);
 
-    font: var(--fds-typography-ingress-xsmall);
+    font: var(--ds-typography-ingress-xs);
     font-family: inherit;
   }
 }

package/label.css

@@ -1,46 +1,46 @@
-@layer fds.typography.label {
-  .fds-label {
-    --fdsc-bottom-spacing: var(--fds-spacing-1);
+@layer ds.typography.label {
+  .ds-label {
+    --dsc-bottom-spacing: var(--ds-spacing-1);
 
     display: inline-block;
     margin: 0;
     padding: 0;
-    color: var(--fds-semantic-text-neutral-default);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-label--spacing {
-    margin-bottom: var(--fdsc-bottom-spacing);
+  .ds-label--spacing {
+    margin-bottom: var(--dsc-bottom-spacing);
   }
 
-  .fds-label--lg {
-    font: var(--fds-typography-label-large);
+  .ds-label--lg {
+    font: var(--ds-typography-label-lg);
     font-family: inherit;
   }
 
-  .fds-label--md {
-    font: var(--fds-typography-label-medium);
+  .ds-label--md {
+    font: var(--ds-typography-label-md);
     font-family: inherit;
   }
 
-  .fds-label--sm {
-    font: var(--fds-typography-label-small);
+  .ds-label--sm {
+    font: var(--ds-typography-label-sm);
     font-family: inherit;
   }
 
-  .fds-label--xs {
-    font: var(--fds-typography-label-xsmall);
+  .ds-label--xs {
+    font: var(--ds-typography-label-xs);
     font-family: inherit;
   }
 
-  .fds-label--regular-weight {
+  .ds-label--regular-weight {
     font-weight: 400;
   }
 
-  .fds-label--medium-weight {
+  .ds-label--medium-weight {
     font-weight: 500;
   }
 
-  .fds-label--semibold-weight {
+  .ds-label--semibold-weight {
     font-weight: 600;
   }
 }

package/link.css

@@ -1,36 +1,64 @@
-@layer fds.link {
-  .fds-link {
-    color: var(--fds-semantic-text-action-default);
+@layer ds.link {
+  .ds-link {
+    --dsc-link-color: var(--ds-color-accent-text-subtle);
+    --dsc-link-color-hover: var(--ds-color-accent-text-default);
+    --dsc-link-color-active: var(--ds-color-accent-text-default);
+    --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
+    --dsc-link-color-visited: var(--ds-global-purple-12);
+    --dsc-link-color-focus: var(--ds-color-accent-text-default);
+    --dsc-link-color-focus-background: var(--ds-color-neutral-surface-default);
+
+    position: relative;
+    color: var(--dsc-link-color);
     cursor: pointer;
     text-decoration: underline;
     text-decoration-thickness: max(1px, 0.0625rem);
-    text-underline-offset: max(4px, 0.25rem);
+    text-underline-offset: max(5px, 0.25rem);
     display: inline-flex;
     align-items: center;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
+  }
+
+  .ds-link__accent {
+    --dsc-link-color: var(--ds-color-accent-text-subtle);
+    --dsc-link-color-hover: var(--ds-color-accent-text-default);
+    --dsc-link-color-active: var(--ds-color-accent-text-default);
+    --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
+    --dsc-link-color-visited: var(--ds-global-purple-12);
+    --dsc-link-color-focus: var(--ds-focus-inner);
+    --dsc-link-color-focus-background: var(--ds-focus-outer);
   }
 
-  .fds-link:visited {
-    color: var(--fds-semantic-text-visited-default);
+  .ds-link__neutral {
+    --dsc-link-color: var(--ds-color-neutral-text-default);
+    --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
+    --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
+    --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
+    --dsc-link-color-visited: var(--ds-global-purple-12);
+    --dsc-link-color-focus: var(--ds-focus-inner);
+    --dsc-link-color-focus-background: var(--ds-focus-outer);
+  }
+
+  .ds-link:visited {
+    color: var(--dsc-link-color-visited);
     text-decoration: none;
   }
 
-  .fds-link:hover {
-    color: var(--fds-semantic-text-action-hover);
+  .ds-link:hover {
+    color: var(--dsc-link-color-hover);
     text-decoration-thickness: max(2px, 0.125rem, 0.12em);
   }
 
-  .fds-link:focus-visible {
-    background: var(--fds-semantic-border-focus-outline);
-    box-shadow: 0 max(3px, 0.1875rem, 0.18em) var(--fds-semantic-border-focus-boxshadow);
-    color: var(--fds-semantic-text-action-active);
+  .ds-link:focus-visible {
+    color: var(--dsc-link-color-focus);
+    background: var(--dsc-link-color-focus-background);
     outline: none;
-    text-decoration: none;
   }
 
-  .fds-link--inverted:not(:focus-visible, :active),
-  .fds-link--inverted:not(:focus-visible, :active):hover,
-  .fds-link--inverted:not(:focus-visible, :active):visited {
-    color: white;
+  .ds-link:active {
+    color: var(--dsc-link-color-active);
+    background: var(--dsc-link-color-active-background);
+    border-radius: var(--ds-border-radius-md);
+    outline: none;
   }
 }

package/list.css

@@ -1,18 +1,18 @@
-@layer fds.list {
-  .fds-list--sm {
-    padding-left: var(--fds-spacing-4);
+@layer ds.list {
+  .ds-list--sm {
+    padding-left: var(--ds-spacing-4);
   }
 
-  .fds-list--md,
-  .fds-list--lg {
-    padding-left: var(--fds-spacing-6);
+  .ds-list--md,
+  .ds-list--lg {
+    padding-left: var(--ds-spacing-6);
   }
 
-  .fds-list__item {
-    margin-bottom: var(--fds-spacing-2);
+  .ds-list__item {
+    margin-bottom: var(--ds-spacing-2);
   }
 
-  .fds-list__item > .fds-list {
-    margin-top: var(--fds-spacing-2);
+  .ds-list__item > .ds-list {
+    margin-top: var(--ds-spacing-2);
   }
 }

package/modal.css

@@ -1,35 +1,37 @@
-@layer fds.modal {
-  .fds-modal {
+@layer ds.modal {
+  .ds-modal {
     padding: 0;
     width: 100%;
     max-width: 650px;
     border: none;
-    border-radius: var(--fds-border_radius-medium);
-    box-shadow: var(--fds-shadow-xlarge);
+    border-radius: var(--ds-border-radius-md);
+    box-shadow: var(--ds-shadow-xl);
+    background-color: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-modal::backdrop {
+  .ds-modal::backdrop {
     background-color: rgb(0 0 0 / 0.5);
     animation: fade-in 300ms ease-in-out;
   }
 
-  .fds-modal[open] {
+  .ds-modal[open] {
     animation:
       slide-in 300ms ease-in-out,
       fade-in 300ms ease-in-out;
   }
 
-  .fds-modal > hr {
-    margin: var(--fds-spacing-3) 0 !important;
-    border-color: var(--fds-semantic-border-divider-subtle);
+  .ds-modal > hr {
+    margin: var(--ds-spacing-3) 0 !important;
+    border-color: var(--ds-color-neutral-border-subtle);
   }
 
-  .fds-modal--lock-scroll {
+  .ds-modal--lock-scroll {
     overflow: hidden;
   }
 
   @media (max-width: 650px) {
-    .fds-modal {
+    .ds-modal {
       min-width: 100%;
       max-width: 100%;
       border-radius: 0;
@@ -37,11 +39,11 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .fds-modal[open] {
+    .ds-modal[open] {
       animation: none;
     }
 
-    .fds-modal::backdrop {
+    .ds-modal::backdrop {
       animation: none;
     }
   }
@@ -66,40 +68,40 @@
     }
   }
 
-  .fds-modal__header {
+  .ds-modal__header {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
-    padding-top: var(--fds-spacing-6);
-    padding-bottom: var(--fds-spacing-2);
-    padding-left: var(--fds-spacing-6);
-    padding-right: var(--fds-spacing-18);
-    gap: var(--fds-spacing-1);
-    color: var(--fds-semantic-text-neutral-default);
+    padding-top: var(--ds-spacing-6);
+    padding-bottom: var(--ds-spacing-2);
+    padding-left: var(--ds-spacing-6);
+    padding-right: var(--ds-spacing-18);
+    gap: var(--ds-spacing-1);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-modal__header--no-button {
-    padding-right: var(--fds-spacing-6);
+  .ds-modal__header--no-button {
+    padding-right: var(--ds-spacing-6);
   }
 
-  .fds-modal__header__button {
+  .ds-modal__header__button {
     position: absolute;
-    top: var(--fds-spacing-3);
-    right: var(--fds-spacing-3);
+    top: var(--ds-spacing-3);
+    right: var(--ds-spacing-3);
   }
 
-  .fds-modal__footer {
+  .ds-modal__footer {
     display: flex;
     align-items: center;
-    gap: var(--fds-spacing-4);
-    padding-top: var(--fds-spacing-3);
-    padding-bottom: var(--fds-spacing-6);
-    padding-left: var(--fds-spacing-6);
-    padding-right: var(--fds-spacing-6);
+    gap: var(--ds-spacing-4);
+    padding-top: var(--ds-spacing-3);
+    padding-bottom: var(--ds-spacing-6);
+    padding-left: var(--ds-spacing-6);
+    padding-right: var(--ds-spacing-6);
   }
 
-  .fds-modal__content {
-    padding: var(--fds-spacing-2) var(--fds-spacing-6);
+  .ds-modal__content {
+    padding: var(--ds-spacing-2) var(--ds-spacing-6);
     max-height: 80vh;
     overflow-y: auto;
   }