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

package/chip.css

@@ -1,4 +1,4 @@
-@layer fds.chip {
+@layer ds.chip {
   /*
   The class is unused. There is no root chip component?
   .chip {
@@ -6,168 +6,168 @@
   }
   */
 
-  .fds-chip--button {
-    --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);
+  .ds-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);
     text-decoration: none;
     font-family: inherit;
     display: inline-flex;
     align-items: center;
   }
 
-  .fds-chip--button:disabled,
-  .fds-chip--button[aria-disabled='true'] {
+  .ds-chip--button:disabled,
+  .ds-chip--button[aria-disabled='true'] {
     cursor: not-allowed;
-    opacity: var(--fds-opacity-disabled);
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-chip--button .fds-chip__label {
+  .ds-chip--button .ds-chip__label {
     color: inherit;
     line-height: normal;
     display: flex;
     align-items: center;
     flex-direction: row;
-    gap: var(--fds-spacing-2);
+    gap: var(--ds-spacing-2);
   }
 
-  .fds-chip--removable {
-    --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));
+  .ds-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(--fdsc-removable-text-color);
-    background: var(--fdsc-removable-background);
+    color: var(--dsc-removable-text-color);
+    background: var(--dsc-removable-background);
     border: 0;
-    padding-right: var(--fds-spacing-2);
-    min-height: var(--fdsc-chip-height);
+    padding-right: var(--ds-spacing-2);
+    min-height: var(--dsc-chip-height);
   }
 
-  .fds-chip--removable.fds-chip--sm {
-    padding-right: var(--fds-spacing-1);
+  .ds-chip--removable.ds-chip--sm {
+    padding-right: var(--ds-spacing-1);
   }
 
-  .fds-chip--removable.fds-chip--lg {
-    padding-right: var(--fds-spacing-2);
+  .ds-chip--removable.ds-chip--lg {
+    padding-right: var(--ds-spacing-2);
   }
 
-  .fds-chip__x-mark {
-    color: var(--fdsc-removable-chip-xmark-color);
-    height: var(--fdsc-removable-chip-xmark-size);
-    width: var(--fdsc-removable-chip-xmark-size);
+  .ds-chip__x-mark {
+    color: var(--dsc-removable-chip-xmark-color);
+    height: var(--dsc-removable-chip-xmark-size);
+    width: var(--dsc-removable-chip-xmark-size);
   }
 
-  .fds-chip__x-mark .fds-chip__icon {
-    height: var(--fdsc-removable-chip-xmark-size);
-    width: var(--fdsc-removable-chip-xmark-size);
+  .ds-chip__x-mark .ds-chip__icon {
+    height: var(--dsc-removable-chip-xmark-size);
+    width: var(--dsc-removable-chip-xmark-size);
   }
 
-  .fds-chip--spacing {
-    padding-left: var(--fds-spacing-2) !important;
+  .ds-chip--spacing {
+    padding-left: var(--ds-spacing-2) !important;
   }
 
-  .fds-chip--sm .fds-chip__checkmark-icon {
-    height: var(--fds-sizing-5);
+  .ds-chip--sm .ds-chip__checkmark-icon {
+    height: var(--ds-sizing-5);
     width: auto;
   }
 
-  .fds-chip--md .fds-chip__checkmark-icon {
+  .ds-chip--md .ds-chip__checkmark-icon {
     height: 24px;
     width: auto;
   }
 
-  .fds-chip--lg .fds-chip__checkmark-icon {
+  .ds-chip--lg .ds-chip__checkmark-icon {
     height: 26px;
     width: auto;
   }
 
-  .fds-chip--group-container {
-    --fdsc-gap: var(--fds-spacing-2);
+  .ds-chip--group-container {
+    --dsc-chip-group-gap: var(--ds-spacing-2);
 
     display: flex;
-    gap: var(--fdsc-gap);
+    gap: var(--dsc-chip-group-gap);
     list-style-type: none;
     padding: 0;
     margin: 0;
   }
 
-  .fds-chip--group-container.fds-chip--sm {
-    --fdsc-gap: var(--fds-spacing-2);
+  .ds-chip--group-container.ds-chip--sm {
+    --dsc-chip-group-gap: var(--ds-spacing-2);
   }
 
-  .fds-chip--group-container.fds-chip--md {
-    --fdsc-gap: var(--fds-spacing-2);
+  .ds-chip--group-container.ds-chip--md {
+    --dsc-chip-group-gap: var(--ds-spacing-2);
   }
 
-  .fds-chip--group-container.fds-chip--lg {
-    --fdsc-gap: var(--fds-spacing-2);
+  .ds-chip--group-container.ds-chip--lg {
+    --dsc-chip-group-gap: var(--ds-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 {
-      --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);
+    .ds-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);
 
       cursor: pointer;
     }
 
-    .fds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
-      --fdsc-chip-background: var(--fds-semantic-surface-action-first-no_fill-active);
-      --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
+    .ds-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);
     }
 
-    .fds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
-    .fds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
-      --fdsc-removable-background: var(--fds-semantic-surface-action-hover);
-      --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
+    .ds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
+    .ds-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);
     }
   }
 
-  .fds-chip--button:is([aria-pressed='true']),
-  .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 {
-    --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);
+  .ds-chip--button:is([aria-pressed='true']),
+  .ds-chip--button:not(:disabled, [aria-disabled='true']):active,
+  .ds-chip--removable:is([aria-pressed='true']),
+  .ds-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);
   }
 
-  .fds-chip--sm {
-    --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);
+  .ds-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);
   }
 
-  .fds-chip--md {
-    --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);
+  .ds-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);
   }
 
-  .fds-chip--lg {
-    --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);
+  .ds-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);
   }
 }