@digdir/designsystemet-css 0.5.0 → 0.6.0

package/react-css-modules.css

@@ -1,297 +1,3 @@
-@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-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-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);
-    }
-  }
-
-  /* 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-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);
-  }
-
-  /* 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-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);
-  }
-
-  /* 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-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);
-  }
-}
-
 @layer fds.paragraph {
   .fds-paragraph-paragraph-b69df5f3 {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
@@ -1360,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);

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

@@ -19,10 +19,8 @@
   .fds-focus:focus-visible {
     --fds-focus-border-width: 3px;
 
-    outline: var(--fds-focus-border-width) solid
-      var(--fds-semantic-border-focus-outline);
+    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);
+    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
   }
 }