@digdir/designsystemet-css 0.4.0 → 0.6.0

package/react-css-modules.css

@@ -1,377 +1,3 @@
-@layer fds.utilities {
-  /**
- * Visually hide an element, but leave it available for screen readers
- */
-  .fds-utility-visuallyHidden-1ed11112 {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-  .fds-utility-focusable-1ed11112:focus-visible {
-    --fds-focus-border-width: 3px;
-
-    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    outline-offset: var(--fds-focus-border-width);
-    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  }
-}
-
-@layer fds.button {
-  .fds-button-button-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-    --fc-button-color: var(--fds-semantic-text-action-first-on_action);
-
-    display: flex;
-    align-items: center;
-    border: var(--fds-border_width-default) solid transparent;
-    color: var(--fc-button-color);
-    fill: var(--fc-button-color);
-    min-width: 2.5em;
-    padding: var(--fc-button-padding);
-    box-sizing: border-box;
-    cursor: pointer;
-    font-family: inherit;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none;
-    position: relative;
-    border-radius: var(--fds-border_radius-interactive);
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-button-8fa00f0f svg {
-    overflow: visible;
-  }
-
-  .fds-button-small-8fa00f0f::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: auto;
-    min-height: auto;
-    content: '';
-  }
-
-  .fds-button-small-8fa00f0f::after {
-    position: absolute;
-    top: -5px;
-    left: 0;
-    width: 100%;
-    height: 44px;
-    content: '';
-  }
-
-  .fds-button-button-8fa00f0f:disabled,
-  .fds-button-button-8fa00f0f[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--fds-opacity-disabled);
-  }
-
-  .fds-button-small-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-3);
-
-    gap: var(--fds-sizing-1);
-    font: var(--fds-typography-paragraph-short-small);
-    font-family: inherit;
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-medium-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-medium);
-    font-family: inherit;
-    min-height: var(--fds-sizing-12);
-  }
-
-  .fds-button-large-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-5);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-large);
-    font-family: inherit;
-    min-height: var(--fds-sizing-14);
-  }
-
-  .fds-button-fullWidth-8fa00f0f {
-    width: 100%;
-  }
-
-  .fds-button-secondary-8fa00f0f,
-  .fds-button-tertiary-8fa00f0f {
-    background-color: transparent;
-  }
-
-  .fds-button-onlyIcon-8fa00f0f {
-    --fc-button-padding: 0;
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering */
-  @media (hover: hover) and (pointer: fine) {
-    .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-first-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-second-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-success-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-danger-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-      background-color: var(--fds-semantic-surface-on_inverted-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-  }
-
-  /* Primary button colors */
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-first-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-second-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-success-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-danger-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-first-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-second-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-success-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-danger-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-active);
-  }
-
-  /* Secondary button colors */
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    border: 1px solid var(--fds-semantic-border-on_inverted-default);
-    background-color: transparent;
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-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-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-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);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-
-  /* Tertiary button colors */
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: transparent;
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-}
-
 @layer fds.paragraph {
   .fds-paragraph-paragraph-b69df5f3 {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
@@ -524,26 +150,6 @@
   }
 }
 
-@layer fds.ingress {
-  .fds-ingress-ingress-9b33da65 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    margin: 0;
-    color: var(--fds-semantic-text-neutral-default);
-  }
-
-  .fds-ingress-ingress-9b33da65.fds-ingress-spacing-9b33da65 {
-    margin-bottom: var(--fdsc-bottom-spacing);
-  }
-
-  .fds-ingress-ingress-9b33da65.fds-ingress-medium-9b33da65 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    font: var(--fds-typography-ingress-medium);
-    font-family: inherit;
-  }
-}
-
 @layer fds.label {
   .fds-label-label-e0249167 {
     --fdsc-bottom-spacing: var(--fds-spacing-1);
@@ -1018,7 +624,7 @@
   .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-border-on_inverted-default);
+    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -1460,27 +1066,6 @@
   }
 }
 
-@layer fds.skiplink {
-  .fds-skiplink-skiplink-d4abeaef:focus {
-    display: block;
-    outline: 0;
-    position: static;
-    width: auto;
-    height: auto;
-    margin: inherit;
-    overflow: visible;
-    clip: auto;
-    clip-path: none;
-    white-space: inherit;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-    text-underline-offset: 0.3em;
-    padding: var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);
-    color: var(--fds-semantic-text-neutral-default);
-    background: var(--fds-semantic-border-focus-outline);
-  }
-}
-
 @layer fds.tooltip {
   .fds-tooltip-wrapper-a3778147 {
     background: var(--fds-semantic-surface-neutral-inverted);
@@ -2083,7 +1668,7 @@
     }
 
     .fds-switch-input-9a6b03bc:not(:disabled, [readonly]):checked:hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc > .fds-switch-thumb-9a6b03bc {
-      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 0.8));
+      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))));
       background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%230c6536' /%3E%3C/svg%3E");
     }
 

package/skiplink.css

@@ -0,0 +1,20 @@
+@layer fds.skiplink {
+  .fds-skiplink:focus {
+    display: block;
+    outline: 0;
+    position: static;
+    width: auto;
+    height: auto;
+    margin: inherit;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: inherit;
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-underline-offset: 0.3em;
+    padding: var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);
+    color: var(--fds-semantic-text-neutral-default);
+    background: var(--fds-semantic-border-focus-outline);
+  }
+}

package/utils.css

@@ -0,0 +1,26 @@
+@layer fds.utils {
+  /**
+ * Visually hide an element, but leave it available for screen readers
+ */
+  .fds-sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  /**
+ * Apply a focus outline on an element when it is focused with keyboard
+ */
+  .fds-focus:focus-visible {
+    --fds-focus-border-width: 3px;
+
+    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    outline-offset: var(--fds-focus-border-width);
+    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+  }
+}