@digdir/designsystemet-css 0.10.0-alpha.1 → 0.10.0

package/button.css

@@ -1,14 +1,14 @@
-@layer ds.btn {
+@layer fds.btn {
   .fds-btn {
-    --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+    --fds-btn-padding: var(--fds-spacing-2) var(--fds-spacing-4);
 
     display: flex;
     align-items: center;
-    border: var(--ds-border-width-default) solid transparent;
-    background-color: var(--ds-color-accent-base-default);
-    color: var(--ds-color-accent-contrast-default);
+    border: var(--fds-border_width-default) solid transparent;
+    background-color: var(--fds-semantic-surface-action-first-default);
+    color: var(--fds-semantic-text-action-first-on_action);
     min-width: 2.5em;
-    padding: var(--dsc-btn-padding);
+    padding: var(--fds-btn-padding);
     box-sizing: border-box;
     cursor: pointer;
     font-family: inherit;
@@ -16,8 +16,8 @@
     text-align: center;
     text-decoration: none;
     position: relative;
-    border-radius: var(--ds-border-radius-md);
-    min-height: var(--ds-sizing-10);
+    border-radius: var(--fds-border_radius-interactive);
+    min-height: var(--fds-sizing-10);
   }
 
   .fds-btn svg {
@@ -27,16 +27,16 @@
   .fds-btn:disabled,
   .fds-btn[aria-disabled='true'] {
     cursor: not-allowed;
-    opacity: var(--ds-disabled-opacity);
+    opacity: var(--fds-opacity-disabled);
   }
 
   .fds-btn--sm {
-    --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+    --fds-btn-padding: var(--fds-spacing-2) var(--fds-spacing-3);
 
-    gap: var(--ds-sizing-1);
-    font: var(--ds-typography-paragraph-short-sm);
+    gap: var(--fds-sizing-1);
+    font: var(--fds-typography-paragraph-short-small);
     font-family: inherit;
-    min-height: var(--ds-sizing-10);
+    min-height: var(--fds-sizing-10);
   }
 
   .fds-btn--sm::before {
@@ -58,21 +58,21 @@
   }
 
   .fds-btn--md {
-    --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+    --fds-btn-padding: var(--fds-spacing-2) var(--fds-spacing-4);
 
-    gap: var(--ds-sizing-2);
-    font: var(--ds-typography-paragraph-short-md);
+    gap: var(--fds-sizing-2);
+    font: var(--fds-typography-paragraph-short-medium);
     font-family: inherit;
-    min-height: var(--ds-sizing-12);
+    min-height: var(--fds-sizing-12);
   }
 
   .fds-btn--lg {
-    --dsc-btn-padding: var(--ds-spacing-3) var(--ds-spacing-5);
+    --fds-btn-padding: var(--fds-spacing-3) var(--fds-spacing-5);
 
-    gap: var(--ds-sizing-2);
-    font: var(--ds-typography-paragraph-short-lg);
+    gap: var(--fds-sizing-2);
+    font: var(--fds-typography-paragraph-short-large);
     font-family: inherit;
-    min-height: var(--ds-sizing-14);
+    min-height: var(--fds-sizing-14);
   }
 
   .fds-btn--full-width {
@@ -85,144 +85,188 @@
   }
 
   .fds-btn--icon-only {
-    --dsc-btn-padding: 0;
+    --fds-btn-padding: 0;
   }
 
   /* Primary button colors */
-  .fds-btn--primary:where(.fds-btn--accent) {
-    background-color: var(--ds-color-accent-base-default);
+  .fds-btn--primary:where(.fds-btn--first) {
+    background-color: var(--fds-semantic-surface-action-first-default);
   }
 
-  .fds-btn--primary:where(.fds-btn--neutral) {
-    background-color: var(--ds-color-neutral-base-default);
+  .fds-btn--primary:where(.fds-btn--second) {
+    background-color: var(--fds-semantic-surface-action-second-default);
+  }
+
+  .fds-btn--primary:where(.fds-btn--success) {
+    background-color: var(--fds-semantic-surface-success-default);
   }
 
   .fds-btn--primary:where(.fds-btn--danger) {
-    background-color: var(--ds-color-danger-base-default);
+    background-color: var(--fds-semantic-surface-danger-default);
   }
 
   /* Only use hover for non-touch devices to prevent sticky-hovering */
   @media (hover: hover) and (pointer: fine) {
-    .fds-btn--primary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--ds-color-accent-base-hover);
+    .fds-btn--primary:where(.fds-btn--first):not([aria-disabled='true'], :disabled):hover {
+      background-color: var(--fds-semantic-surface-action-first-hover);
+    }
+
+    .fds-btn--primary:where(.fds-btn--second):not([aria-disabled='true'], :disabled):hover {
+      background-color: var(--fds-semantic-surface-action-second-hover);
     }
 
-    .fds-btn--primary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--ds-color-neutral-base-hover);
+    .fds-btn--primary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
+      background-color: var(--fds-semantic-surface-success-hover);
     }
 
     .fds-btn--primary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--ds-color-danger-base-hover);
+      background-color: var(--fds-semantic-surface-danger-hover);
+    }
+
+    .fds-btn--secondary:where(.fds-btn--first):not([aria-disabled='true'], :disabled):hover {
+      color: var(--fds-semantic-text-action-first-hover);
+      border-color: var(--fds-semantic-border-action-first-hover);
+      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
     }
 
-    .fds-btn--secondary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-accent-text-default);
-      border-color: var(--ds-color-accent-border-strong);
-      background-color: var(--ds-color-accent-surface-default);
+    .fds-btn--secondary:where(.fds-btn--second):not([aria-disabled='true'], :disabled):hover {
+      color: var(--fds-semantic-text-action-second-hover);
+      border-color: var(--fds-semantic-border-action-second-hover);
+      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
     }
 
-    .fds-btn--secondary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-neutral-text-default);
-      border-color: var(--ds-color-neutral-border-strong);
-      background-color: var(--ds-color-neutral-surface-default);
+    .fds-btn--secondary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
+      color: var(--fds-semantic-text-success-hover);
+      border-color: var(--fds-semantic-border-success-hover);
+      background-color: var(--fds-semantic-surface-success-no_fill-hover);
     }
 
     .fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-danger-text-default);
-      border-color: var(--ds-color-danger-border-strong);
-      background-color: var(--ds-color-danger-surface-default);
+      color: var(--fds-semantic-text-danger-hover);
+      border-color: var(--fds-semantic-border-danger-hover);
+      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
 
-    .fds-btn--tertiary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-accent-text-default);
-      background-color: var(--ds-color-accent-surface-default);
+    .fds-btn--tertiary:where(.fds-btn--first):not([aria-disabled='true'], :disabled):hover {
+      color: var(--fds-semantic-text-action-first-hover);
+      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
     }
 
-    .fds-btn--tertiary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-neutral-text-default);
-      background-color: var(--ds-color-neutral-surface-default);
+    .fds-btn--tertiary:where(.fds-btn--second):not([aria-disabled='true'], :disabled):hover {
+      color: var(--fds-semantic-text-action-second-hover);
+      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
+    }
+
+    .fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):hover {
+      color: var(--fds-semantic-text-success-hover);
+      background-color: var(--fds-semantic-surface-success-no_fill-hover);
     }
 
     .fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):hover {
-      color: var(--ds-color-danger-text-default);
-      background-color: var(--ds-color-danger-surface-default);
+      color: var(--fds-semantic-text-danger-hover);
+      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
     }
   }
 
-  .fds-btn--primary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--ds-color-accent-base-active);
+  .fds-btn--primary:where(.fds-btn--first):not([aria-disabled='true'], :disabled):active {
+    background-color: var(--fds-semantic-surface-action-first-active);
   }
 
-  .fds-btn--primary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--ds-color-neutral-base-active);
+  .fds-btn--primary:where(.fds-btn--second):not([aria-disabled='true'], :disabled):active {
+    background-color: var(--fds-semantic-surface-action-second-active);
+  }
+
+  .fds-btn--primary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
+    background-color: var(--fds-semantic-surface-success-active);
   }
 
   .fds-btn--primary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--ds-color-danger-base-active);
+    background-color: var(--fds-semantic-surface-danger-active);
   }
 
   /* Secondary button colors */
-  .fds-btn--secondary:where(.fds-btn--accent) {
-    color: var(--ds-color-accent-text-subtle);
-    border-color: var(--ds-color-accent-border-strong);
-    background-color: transparent;
+  .fds-btn--secondary:where(.fds-btn--first) {
+    color: var(--fds-semantic-text-action-first-default);
+    border-color: var(--fds-semantic-border-action-first-default);
+    background-color: var(--fds-semantic-surface-action-first-no_fill);
   }
 
-  .fds-btn--secondary:where(.fds-btn--neutral) {
-    color: var(--ds-color-neutral-text-subtle);
-    border-color: var(--ds-color-neutral-border-strong);
-    background-color: transparent;
+  .fds-btn--secondary:where(.fds-btn--second) {
+    color: var(--fds-semantic-text-action-second-default);
+    border-color: var(--fds-semantic-border-action-second-default);
+    background-color: var(--fds-semantic-surface-action-second-no_fill);
+  }
+
+  .fds-btn--secondary:where(.fds-btn--success) {
+    color: var(--fds-semantic-text-success-default);
+    border-color: var(--fds-semantic-border-success-default);
+    background-color: var(--fds-semantic-surface-success-no_fill);
   }
 
   .fds-btn--secondary:where(.fds-btn--danger) {
-    color: var(--ds-color-danger-text-subtle);
-    border-color: var(--ds-color-danger-border-strong);
-    background-color: transparent;
+    color: var(--fds-semantic-text-danger-default);
+    border-color: var(--fds-semantic-border-danger-default);
+    background-color: var(--fds-semantic-surface-danger-no_fill);
+  }
+
+  .fds-btn--secondary:where(.fds-btn--first):not([aria-disabled='true'], :disabled):active {
+    color: var(--fds-semantic-text-action-first-active);
+    border-color: var(--fds-semantic-border-action-first-active);
+    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
   }
 
-  .fds-btn--secondary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-accent-text-default);
-    border-color: var(--ds-color-accent-border-strong);
-    background-color: var(--ds-color-accent-surface-hover);
+  .fds-btn--secondary:where(.fds-btn--second):not([aria-disabled='true'], :disabled):active {
+    color: var(--fds-semantic-text-action-second-active);
+    border-color: var(--fds-semantic-border-action-second-active);
+    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
   }
 
-  .fds-btn--secondary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-neutral-text-default);
-    border-color: var(--ds-color-neutral-border-strong);
-    background-color: var(--ds-color-neutral-surface-hover);
+  .fds-btn--secondary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
+    color: var(--fds-semantic-text-success-active);
+    border-color: var(--fds-semantic-border-success-active);
+    background-color: var(--fds-semantic-surface-success-no_fill-active);
   }
 
   .fds-btn--secondary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-danger-text-default);
-    border-color: var(--ds-color-danger-border-strong);
-    background-color: var(--ds-color-danger-surface-hover);
+    color: var(--fds-semantic-text-danger-active);
+    border-color: var(--fds-semantic-border-danger-active);
+    background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
 
   /* Tertiary button colors */
-  .fds-btn--tertiary:where(.fds-btn--accent) {
-    color: var(--ds-color-accent-text-subtle);
+  .fds-btn--tertiary:where(.fds-btn--first) {
+    color: var(--fds-semantic-text-action-first-default);
+  }
+
+  .fds-btn--tertiary:where(.fds-btn--second) {
+    color: var(--fds-semantic-text-action-second-default);
   }
 
-  .fds-btn--tertiary:where(.fds-btn--neutral) {
-    color: var(--ds-color-neutral-text-subtle);
+  .fds-btn--tertiary:where(.fds-btn--success) {
+    color: var(--fds-semantic-text-success-default);
   }
 
   .fds-btn--tertiary:where(.fds-btn--danger) {
-    color: var(--ds-color-danger-text-subtle);
+    color: var(--fds-semantic-text-danger-default);
+  }
+
+  .fds-btn--tertiary:where(.fds-btn--first):not([aria-disabled='true'], :disabled):active {
+    color: var(--fds-semantic-text-action-first-active);
+    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
   }
 
-  .fds-btn--tertiary:where(.fds-btn--accent):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-accent-text-default);
-    background-color: var(--ds-color-accent-surface-hover);
+  .fds-btn--tertiary:where(.fds-btn--second):not([aria-disabled='true'], :disabled):active {
+    color: var(--fds-semantic-text-action-second-active);
+    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
   }
 
-  .fds-btn--tertiary:where(.fds-btn--neutral):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-neutral-text-default);
-    background-color: var(--ds-color-neutral-surface-hover);
+  .fds-btn--tertiary:where(.fds-btn--success):not([aria-disabled='true'], :disabled):active {
+    color: var(--fds-semantic-text-success-active);
+    background-color: var(--fds-semantic-surface-success-no_fill-active);
   }
 
   .fds-btn--tertiary:where(.fds-btn--danger):not([aria-disabled='true'], :disabled):active {
-    color: var(--ds-color-danger-text-default);
-    background-color: var(--ds-color-danger-surface-hover);
+    color: var(--fds-semantic-text-danger-active);
+    background-color: var(--fds-semantic-surface-danger-no_fill-active);
   }
 }

package/card.css

@@ -1,92 +1,87 @@
-@layer ds.card {
-  .fds-card {
-    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+@layer fds.card {
+  .fds-card__media {
+    width: auto;
+  }
 
+  .fds-card__media > * {
     display: flex;
     flex-direction: column;
     width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    overflow: hidden;
-    color: var(--ds-color-neutral-text-default);
-    border-radius: var(--ds-border-radius-md);
-    border: 1px solid var(--dsc-card-border-color);
+    border: 0;
   }
 
-  .fds-card a,
-  .fds-card a:visited {
-    color: var(--ds-color-neutral-text-default);
+  .fds-card__footer,
+  .fds-card__content {
+    display: flex;
+    justify-content: flex-start;
+    gap: var(--fds-spacing-4);
+    flex-wrap: wrap;
+    word-wrap: break-word;
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+    padding: var(--fds-spacing-2) 0;
   }
 
-  .fds-card > hr {
-    width: 100%;
-    margin: var(--ds-spacing-3) 0;
+  .fds-card__content {
+    flex-direction: column;
   }
 
-  .fds-card__media {
-    width: auto;
+  .fds-card__header {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    word-wrap: break-word;
+    font: var(--fds-typography-heading-medium);
+    font-family: inherit;
+    padding: var(--fds-spacing-2) 0;
   }
 
-  .fds-card__media > * {
+  .fds-card {
     display: flex;
     flex-direction: column;
     width: 100%;
-    border: 0;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    color: var(--fds-semantic-text-neutral-default);
+    border-radius: var(--fds-border_radius-medium);
+  }
+
+  .fds-card a,
+  .fds-card a:visited {
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-card > hr {
+    width: 100%;
+    margin: var(--fds-spacing-3) 0;
   }
 
   .fds-card > *:not(.fds-card__media, hr) {
-    padding-left: var(--ds-spacing-6);
-    padding-right: var(--ds-spacing-6);
+    padding-left: var(--fds-spacing-6);
+    padding-right: var(--fds-spacing-6);
   }
 
   .fds-card > *:not(.fds-card__media):first-child {
-    padding-top: var(--ds-spacing-6);
+    padding-top: var(--fds-spacing-6);
   }
 
   .fds-card > *:not(.fds-card__media):last-child {
-    padding-bottom: var(--ds-spacing-6);
+    padding-bottom: var(--fds-spacing-6);
   }
 
   .fds-card__media:first-child {
-    padding-bottom: var(--ds-spacing-4);
+    padding-bottom: var(--fds-spacing-4);
   }
 
   .fds-card__media:last-child {
-    padding-top: var(--ds-spacing-6);
+    padding-top: var(--fds-spacing-6);
   }
 
   .fds-card--link {
-    --dsc-card-border-color: var(--ds-color-neutral-border-default);
-
     text-decoration: none;
   }
 
-  .fds-card__footer,
-  .fds-card__content {
-    display: flex;
-    justify-content: flex-start;
-    gap: var(--ds-spacing-4);
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    font: var(--ds-typography-paragraph-md);
-    font-family: inherit;
-    padding: var(--ds-spacing-2) 0;
-  }
-
-  .fds-card__content {
-    flex-direction: column;
-  }
-
-  .fds-card__header {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    word-wrap: break-word;
-    font: var(--ds-typography-heading-md);
-    font-family: inherit;
-    padding: var(--ds-spacing-2) 0;
-  }
-
   .fds-card--link h1,
   .fds-card--link h2,
   .fds-card--link h3,
@@ -95,85 +90,68 @@
   .fds-card--link h6 {
     text-decoration: underline;
     text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
-    text-underline-offset: max(6px, 0.25rem, 0.22em);
+    text-underline-offset: max(4px, 0.25rem, 0.22em);
   }
 
   .fds-card--neutral {
-    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-
-    background-color: var(--ds-color-neutral-background-default);
-  }
-
-  .fds-card--neutral.fds-card--link:hover {
-    --dsc-card-border-color: var(--ds-color-neutral-border-default);
+    background-color: var(--fds-semantic-surface-neutral-default);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
   .fds-card--subtle {
-    --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
-
-    background-color: var(--ds-color-neutral-background-subtle);
-  }
-
-  .fds-card--subtle.fds-card--link:hover {
-    --dsc-card-border-color: var(--ds-color-neutral-border-default);
+    background-color: var(--fds-semantic-surface-neutral-subtle);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
   .fds-card--neutral.fds-card--link:hover,
   .fds-card--subtle.fds-card--link:hover {
-    background-color: var(--ds-color-neutral-surface-default);
-  }
-
-  .fds-card--brand1 {
-    --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
-
-    background-color: var(--ds-color-brand1-surface-default);
+    background-color: var(--fds-semantic-surface-neutral-subtle-hover);
   }
 
-  .fds-card--brand1.fds-card--link {
-    --dsc-card-border-color: var(--ds-color-brand1-border-default);
+  /*
+  --fds surface-neutral-subtle-active does not exist? Old style
+  .fds-card--neutral.fds-card--link:active,
+  .fds-card--subtle.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-neutral-subtle-active);
   }
+  */
 
-  .fds-card--brand1.fds-card--link:hover {
-    background-color: var(--ds-color-brand1-surface-hover);
+  .fds-card--first {
+    background-color: var(--fds-semantic-surface-first-light);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
-  .fds-card--brand1.fds-card--link:active {
-    background-color: var(--ds-color-brand1-surface-active);
+  .fds-card--first.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-first-light-hover);
   }
 
-  .fds-card--brand2 {
-    --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
-
-    background-color: var(--ds-color-brand2-surface-default);
+  .fds-card--first.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-first-light-active);
   }
 
-  .fds-card--brand2.fds-card--link {
-    --dsc-card-border-color: var(--ds-color-brand2-border-default);
+  .fds-card--second {
+    background-color: var(--fds-semantic-surface-second-light);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
-  .fds-card--brand2.fds-card--link:hover {
-    background-color: var(--ds-color-brand2-surface-hover);
+  .fds-card--second.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-second-light-hover);
   }
 
-  .fds-card--brand2.fds-card--link:active {
-    background-color: var(--ds-color-brand2-surface-active);
-  }
-
-  .fds-card--brand3 {
-    --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
-
-    background-color: var(--ds-color-brand3-surface-default);
+  .fds-card--second.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-second-light-active);
   }
 
-  .fds-card--brand3.fds-card--link {
-    --dsc-card-border-color: var(--ds-color-brand3-border-default);
+  .fds-card--third {
+    background-color: var(--fds-semantic-surface-third-light);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
-  .fds-card--brand3.fds-card--link:hover {
-    background-color: var(--ds-color-brand3-surface-hover);
+  .fds-card--third.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-third-light-hover);
   }
 
-  .fds-card--brand3.fds-card--link:active {
-    background-color: var(--ds-color-brand3-surface-active);
+  .fds-card--third.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-third-light-active);
   }
 }