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

package/checkbox.css

@@ -1,35 +1,33 @@
-@layer ds.checkbox {
+@layer fds.checkbox {
   .fds-checkbox {
-    --dsc-checkbox-size: 1.75rem;
-    --dsc-checkbox-focus-border-width: 3px;
-    --dsc-checkbox-background: var(--ds-color-neutral-background-default);
-    --dsc-checkbox-border-color: var(--ds-color-neutral-border-strong);
-    --dsc-checkbox-border__hover--size: calc(var(--ds-spacing-3) / 2);
-    --dsc-checkbox-border__hover: 0 0 0 var(--dsc-checkbox-border__hover--size) var(--ds-color-accent-surface-hover);
-    --dsc-checkbox-check_color: transparent;
+    --fds-checkbox-size: 1.75rem;
+    --fds-checkbox-focus-border-width: 3px;
+    --fds-checkbox-background: var(--fds-semantic-background-default);
+    --fds-checkbox-border-color: var(--fds-semantic-border-input-default);
+    --fds-checkbox-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);
 
     display: grid;
   }
 
   .fds-checkbox:has(.fds-checkbox__label) {
-    grid-template-columns: var(--dsc-checkbox-size) auto;
-    gap: var(--ds-spacing-2);
+    grid-template-columns: var(--fds-checkbox-size) auto;
+    gap: var(--fds-spacing-2);
   }
 
   /* Checkbox */
   .fds-checkbox__input {
     position: relative;
-    width: var(--dsc-checkbox-size);
-    height: var(--dsc-checkbox-size);
+    width: var(--fds-checkbox-size);
+    height: var(--fds-checkbox-size);
     z-index: 1;
     appearance: none;
     margin: 0;
     align-self: center;
     outline: none;
     cursor: pointer;
-    box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
-    background: var(--dsc-checkbox-background);
-    border-radius: var(--ds-border-radius-md);
+    box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
+    background: var(--fds-checkbox-background);
+    border-radius: var(--fds-border_radius-medium);
   }
 
   .fds-checkbox__input::before {
@@ -42,22 +40,22 @@
     top: 50%;
     left: 50%;
     cursor: pointer;
-    border-radius: var(--ds-border-radius-md);
+    border-radius: var(--fds-border_radius-medium);
   }
 
   .fds-checkbox__label {
-    min-height: var(--ds-sizing-10);
+    min-height: var(--fds-sizing-10);
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     align-items: center;
     cursor: pointer;
   }
 
   .fds-checkbox__description {
-    margin-top: calc(var(--ds-spacing-3) * -1);
-    color: var(--ds-color-neutral-text-subtle);
+    margin-top: calc(var(--fds-spacing-3) * -1);
+    color: var(--fds-semantic-text-neutral-subtle);
     grid-column: 2;
   }
 
@@ -74,71 +72,54 @@
   }
 
   .fds-checkbox__input:focus-visible {
-    outline-offset: 3px;
-    outline: var(--dsc-checkbox-focus-border-width) solid var(--ds-focus-outer);
-    box-shadow:
-      0 0 0 var(--dsc-checkbox-focus-border-width) var(--ds-focus-inner),
-      inset 0 0 0 2px var(--dsc-checkbox-border-color);
-  }
-
-  .fds-checkbox__input::after {
-    content: '';
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: var(--dsc-checkbox-check_color);
-    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
+    outline-offset: 0;
+    outline: var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    box-shadow: inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
   }
 
   .fds-checkbox__input:checked {
-    --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
-    --dsc-checkbox-background: var(--ds-color-accent-base-default);
-    --dsc-checkbox-check_color: white;
+    --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
-    background: var(--dsc-checkbox-background);
+    background: var(--fds-checkbox-border-color);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
   }
 
   .fds-checkbox__input:indeterminate {
-    --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
-    --dsc-checkbox-background: var(--ds-color-accent-border-strong);
-    --dsc-checkbox-check_color: white;
+    --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
-    background-color: var(--dsc-checkbox-background);
+    background-color: var(--fds-checkbox-border-color);
     background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
   }
 
   .fds-checkbox--readonly > .fds-checkbox__input {
-    --dsc-checkbox-border-color: var(--ds-color-neutral-border-subtle);
-    --dsc-checkbox-background: var(--ds-color-neutral-background-subtle);
+    --fds-checkbox-border-color: var(--fds-semantic-border-neutral-subtle);
+    --fds-checkbox-background: var(--fds-semantic-surface-neutral-subtle);
   }
 
   .fds-checkbox__input:disabled,
   .fds-checkbox__input:disabled ~ .fds-checkbox__label,
   .fds-checkbox__input:disabled ~ .fds-checkbox__description {
-    opacity: var(--ds-disabled-opacity);
+    opacity: var(--fds-opacity-disabled);
   }
 
   .fds-checkbox__input:checked:not(:focus-visible) {
-    box-shadow: inset 0 0 0 2px var(--dsc-checkbox-border-color);
+    box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
   }
 
   .fds-checkbox--readonly > .fds-checkbox__input:checked {
-    --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
-
-    background: var(--dsc-checkbox-background);
+    background: var(--fds-checkbox-background);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='%2368707c'/%3E%3C/svg%3E%0A");
   }
 
   .fds-checkbox--readonly > .fds-checkbox__input:indeterminate {
-    --dsc-checkbox-check_color: var(--ds-color-neutral-text-subtle);
-
-    background: var(--dsc-checkbox-background);
+    background: var(--fds-checkbox-background);
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='%2368707c' /%3E%3C/svg%3E%0A");
   }
 
   .fds-checkbox--error > .fds-checkbox__input:not(:disabled, :focus-visible) {
-    --dsc-checkbox-border-color: var(--ds-color-danger-border-default);
+    --fds-checkbox-border-color: var(--fds-semantic-border-danger-default);
   }
 
   /* Only use hover for non-touch devices to prevent sticky-hovering
@@ -146,39 +127,49 @@
   @media (hover: hover) and (pointer: fine) {
     .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:not(:disabled) ~ .fds-checkbox__label:hover,
     .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:disabled) ~ .fds-checkbox__label {
-      color: var(--ds-color-accent-text-subtle);
+      color: var(--fds-semantic-text-action-hover);
     }
 
     .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:not(:checked, :disabled) {
-      --dsc-checkbox-border-color: var(--ds-color-accent-border-strong);
+      --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
 
       box-shadow:
-        var(--dsc-checkbox-border__hover),
-        inset 0 0 0 2px var(--dsc-checkbox-border-color);
+        var(--fds-checkbox-border__hover),
+        inset 0 0 0 2px var(--fds-checkbox-border-color);
+    }
+
+    .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:not(:disabled) {
+      --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
+
+      box-shadow:
+        var(--fds-checkbox-border__hover),
+        inset 0 0 0 2px var(--fds-checkbox-border-color);
     }
 
     .fds-checkbox:not(.fds-checkbox--readonly) .fds-checkbox__input:hover:checked:focus-visible:not(:disabled) {
-      box-shadow: var(--dsc-checkbox-border__hover);
+      box-shadow:
+        var(--fds-checkbox-border__hover),
+        inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
     }
   }
 
   /** Sizing */
 
   .fds-checkbox--sm {
-    --dsc-checkbox-size: var(--ds-sizing-5);
+    --fds-checkbox-size: var(--fds-sizing-5);
 
-    min-height: var(--ds-sizing-10);
+    min-height: var(--fds-sizing-10);
   }
 
   .fds-checkbox--md {
-    --dsc-checkbox-size: var(--ds-sizing-6);
+    --fds-checkbox-size: var(--fds-sizing-6);
 
-    min-height: var(--ds-sizing-11);
+    min-height: var(--fds-sizing-11);
   }
 
   .fds-checkbox--lg {
-    --dsc-checkbox-size: var(--ds-sizing-7);
+    --fds-checkbox-size: var(--fds-sizing-7);
 
-    min-height: var(--ds-sizing-12);
+    min-height: var(--fds-sizing-12);
   }
 }

package/chip.css

@@ -1,4 +1,4 @@
-@layer ds.chip {
+@layer fds.chip {
   /*
   The class is unused. There is no root chip component?
   .chip {
@@ -7,19 +7,19 @@
   */
 
   .fds-chip--button {
-    --dsc-chip-height: var(--ds-sizing-7);
-    --dsc-chip-padding: var(--ds-spacing-3);
-    --dsc-chip-background: var(--ds-color-accent-surface-default);
-    --dsc-chip-text-color: var(--ds-color-neutral-text-default);
-    --dsc-chip-border: var(--ds-color-accent-border-subtle);
-    --dsc-chip-border-radius: var(--ds-border-radius-full);
-
-    background: var(--dsc-chip-background);
-    padding: 0 var(--dsc-chip-padding);
-    min-height: var(--dsc-chip-height);
-    border-radius: var(--dsc-chip-border-radius);
-    border: 1px solid var(--dsc-chip-border);
-    color: var(--dsc-chip-text-color);
+    --fdsc-chip-height: var(--fds-sizing-7);
+    --fdsc-chip-padding: var(--fds-spacing-3);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle);
+    --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
+    --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle);
+    --fdsc-chip-border-radius: var(--fds-border_radius-full);
+
+    background: var(--fdsc-chip-background);
+    padding: 0 var(--fdsc-chip-padding);
+    min-height: var(--fdsc-chip-height);
+    border-radius: var(--fdsc-chip-border-radius);
+    border: 1px solid var(--fdsc-chip-border);
+    color: var(--fdsc-chip-text-color);
     text-decoration: none;
     font-family: inherit;
     display: inline-flex;
@@ -29,7 +29,7 @@
   .fds-chip--button:disabled,
   .fds-chip--button[aria-disabled='true'] {
     cursor: not-allowed;
-    opacity: var(--ds-disabled-opacity);
+    opacity: var(--fds-opacity-disabled);
   }
 
   .fds-chip--button .fds-chip__label {
@@ -38,50 +38,50 @@
     display: flex;
     align-items: center;
     flex-direction: row;
-    gap: var(--ds-spacing-2);
+    gap: var(--fds-spacing-2);
   }
 
   .fds-chip--removable {
-    --dsc-removable-background: var(--ds-color-accent-base-default);
-    --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
-    --dsc-removable-chip-size: var(--ds-sizing-7);
-    --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
-    --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
-    --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
-    --dsc-removable-chip-xmark-wrapper-width: calc(var(--dsc-removable-chip-xmark-size) + var(--dsc-removable-chip-xmark-padding_right));
-
-    color: var(--dsc-removable-text-color);
-    background: var(--dsc-removable-background);
+    --fdsc-removable-background: var(--fds-semantic-surface-action-default);
+    --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
+    --fdsc-removable-chip-size: var(--fds-sizing-7);
+    --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-1);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
+    --fdsc-removable-chip-xmark-wrapper-width: calc(var(--fdsc-removable-chip-xmark-size) + var(--fdsc-removable-chip-xmark-padding_right));
+
+    color: var(--fdsc-removable-text-color);
+    background: var(--fdsc-removable-background);
     border: 0;
-    padding-right: var(--ds-spacing-2);
-    min-height: var(--dsc-chip-height);
+    padding-right: var(--fds-spacing-2);
+    min-height: var(--fdsc-chip-height);
   }
 
   .fds-chip--removable.fds-chip--sm {
-    padding-right: var(--ds-spacing-1);
+    padding-right: var(--fds-spacing-1);
   }
 
   .fds-chip--removable.fds-chip--lg {
-    padding-right: var(--ds-spacing-2);
+    padding-right: var(--fds-spacing-2);
   }
 
   .fds-chip__x-mark {
-    color: var(--dsc-removable-chip-xmark-color);
-    height: var(--dsc-removable-chip-xmark-size);
-    width: var(--dsc-removable-chip-xmark-size);
+    color: var(--fdsc-removable-chip-xmark-color);
+    height: var(--fdsc-removable-chip-xmark-size);
+    width: var(--fdsc-removable-chip-xmark-size);
   }
 
   .fds-chip__x-mark .fds-chip__icon {
-    height: var(--dsc-removable-chip-xmark-size);
-    width: var(--dsc-removable-chip-xmark-size);
+    height: var(--fdsc-removable-chip-xmark-size);
+    width: var(--fdsc-removable-chip-xmark-size);
   }
 
   .fds-chip--spacing {
-    padding-left: var(--ds-spacing-2) !important;
+    padding-left: var(--fds-spacing-2) !important;
   }
 
   .fds-chip--sm .fds-chip__checkmark-icon {
-    height: var(--ds-sizing-5);
+    height: var(--fds-sizing-5);
     width: auto;
   }
 
@@ -96,46 +96,46 @@
   }
 
   .fds-chip--group-container {
-    --dsc-chip-group-gap: var(--ds-spacing-2);
+    --fdsc-gap: var(--fds-spacing-2);
 
     display: flex;
-    gap: var(--dsc-chip-group-gap);
+    gap: var(--fdsc-gap);
     list-style-type: none;
     padding: 0;
     margin: 0;
   }
 
   .fds-chip--group-container.fds-chip--sm {
-    --dsc-chip-group-gap: var(--ds-spacing-2);
+    --fdsc-gap: var(--fds-spacing-2);
   }
 
   .fds-chip--group-container.fds-chip--md {
-    --dsc-chip-group-gap: var(--ds-spacing-2);
+    --fdsc-gap: var(--fds-spacing-2);
   }
 
   .fds-chip--group-container.fds-chip--lg {
-    --dsc-chip-group-gap: var(--ds-spacing-2);
+    --fdsc-gap: var(--fds-spacing-2);
   }
 
   /* Only use hover for non-touch devices to prevent sticky-hovering */
   @media (hover: hover) and (pointer: fine) {
     .fds-chip--button:not(:disabled, [aria-disabled='true']):hover {
-      --dsc-chip-background: var(--ds-color-accent-surface-hover);
-      --dsc-chip-text-color: var(--ds-color-neutral-text-default);
-      --dsc-chip-border: var(--ds-color-accent-border-default);
+      --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle-hover);
+      --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
+      --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle-hover);
 
       cursor: pointer;
     }
 
     .fds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
-      --dsc-chip-background: var(--ds-color-accent-surface-hover);
-      --dsc-chip-text-color: var(--ds-color-neutral-text-default);
+      --fdsc-chip-background: var(--fds-semantic-surface-action-first-no_fill-active);
+      --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
     }
 
     .fds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
     .fds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
-      --dsc-removable-background: var(--ds-color-accent-base-hover);
-      --dsc-removable-chip-xmark-color: var(--ds-color-neutral-contrast-default);
+      --fdsc-removable-background: var(--fds-semantic-surface-action-hover);
+      --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
     }
   }
 
@@ -143,31 +143,31 @@
   .fds-chip--button:not(:disabled, [aria-disabled='true']):active,
   .fds-chip--removable:is([aria-pressed='true']),
   .fds-chip--removable:not(:disabled, [aria-disabled='true']):active {
-    --dsc-chip-background: var(--ds-color-accent-base-active);
-    --dsc-chip-text-color: var(--ds-color-neutral-contrast-default);
-    --dsc-chip-border: var(--ds-color-accent-base-active);
-    --dsc-removable-background: var(--ds-color-accent-base-active);
-    --dsc-removable-text-color: var(--ds-color-neutral-contrast-default);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-active);
+    --fdsc-chip-text-color: var(--fds-semantic-text-neutral-on_inverted);
+    --fdsc-chip-border: var(--fds-semantic-surface-action-first-active);
+    --fdsc-removable-background: var(--fds-semantic-surface-action-first-active);
+    --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
   }
 
   .fds-chip--sm {
-    --dsc-chip-height: var(--ds-sizing-7);
-    --dsc-chip-padding: var(--ds-spacing-3);
-    --dsc-removable-chip-xmark-size: var(--ds-sizing-5);
-    --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-1);
+    --fdsc-chip-height: var(--fds-sizing-7);
+    --fdsc-chip-padding: var(--fds-spacing-3);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-5);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-1);
   }
 
   .fds-chip--md {
-    --dsc-chip-height: var(--ds-sizing-8);
-    --dsc-chip-padding: var(--ds-spacing-3);
-    --dsc-removable-chip-xmark-size: var(--ds-sizing-6);
-    --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-2);
+    --fdsc-chip-height: var(--fds-sizing-8);
+    --fdsc-chip-padding: var(--fds-spacing-3);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-2);
   }
 
   .fds-chip--lg {
-    --dsc-chip-height: var(--ds-sizing-9);
-    --dsc-chip-padding: var(--ds-spacing-4);
-    --dsc-removable-chip-xmark-size: var(--ds-sizing-7);
-    --dsc-removable-chip-xmark-padding_right: var(--ds-spacing-3);
+    --fdsc-chip-height: var(--fds-sizing-9);
+    --fdsc-chip-padding: var(--fds-spacing-4);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-7);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-3);
   }
 }