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

package/textarea.css

@@ -1,7 +1,7 @@
-@layer ds.textarea {
+@layer fds.textarea {
   .fds-textarea {
     display: grid;
-    gap: var(--ds-spacing-2);
+    gap: var(--fds-spacing-2);
   }
 
   .fds-textarea__readonly-icon {
@@ -17,13 +17,13 @@
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     align-items: center;
   }
 
   .fds-textarea__description {
-    color: var(--ds-color-neutral-text-subtle);
-    margin-top: calc(var(--ds-spacing-2) * -1);
+    color: var(--fds-semantic-text-neutral-subtle);
+    margin-top: calc(var(--fds-spacing-2) * -1);
   }
 
   .fds-textarea__input {
@@ -35,26 +35,26 @@
     min-height: 2.5em;
     width: 100%;
     appearance: none;
-    padding: var(--ds-spacing-3);
-    border: solid 1px var(--ds-color-neutral-border-default);
-    border-radius: var(--ds-border-radius-md);
+    padding: var(--fds-spacing-3);
+    border: solid 1px var(--fds-semantic-border-input-default);
+    border-radius: var(--fds-border_radius-medium);
     resize: vertical;
   }
 
   .fds-textarea--sm .fds-textarea__input {
-    padding: var(--ds-spacing-2);
+    padding: var(--fds-spacing-2);
   }
 
   .fds-textarea--md .fds-textarea__input {
-    padding: var(--ds-spacing-3);
+    padding: var(--fds-spacing-3);
   }
 
   .fds-textarea--lg .fds-textarea__input {
-    padding: var(--ds-spacing-4);
+    padding: var(--fds-spacing-4);
   }
 
   .fds-textarea:has(.fds-textarea__input:disabled) {
-    opacity: var(--ds-disabled-opacity);
+    opacity: var(--fds-opacity-disabled);
   }
 
   .fds-textarea__input:disabled {
@@ -62,19 +62,19 @@
   }
 
   .fds-textarea__input:read-only {
-    background: var(--ds-color-neutral-background-subtle);
-    border-color: var(--ds-color-neutral-border-strong);
+    background: var(--fds-semantic-surface-neutral-subtle);
+    border-color: var(--fds-semantic-border-neutral-default);
   }
 
   .fds-textarea--error > .fds-textarea__input:not(:focus-visible) {
-    border-color: var(--ds-color-danger-border-default);
-    box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
+    border-color: var(--fds-semantic-border-danger-default);
+    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .fds-textarea__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      border-color: var(--ds-color-accent-border-strong);
-      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
+      border-color: var(--fds-semantic-border-input-hover);
+      box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
     }
   }
 }

package/textfield.css

@@ -1,15 +1,15 @@
-@layer ds.textfield {
+@layer fds.textfield {
   .fds-textfield {
     display: grid;
-    gap: var(--ds-spacing-2);
+    gap: var(--fds-spacing-2);
   }
 
   .fds-textfield__adornment {
-    color: var(--ds-color-neutral-border-strong);
-    background: var(--ds-color-neutral-background-subtle);
-    padding: 9px var(--ds-spacing-4);
-    border-radius: var(--ds-border-radius-md);
-    border: solid 1px var(--ds-color-neutral-border-strong);
+    color: var(--fds-semantic-border-neutral-default);
+    background: var(--fds-semantic-surface-neutral-subtle);
+    padding: 9px var(--fds-spacing-4);
+    border-radius: var(--fds-border_radius-medium);
+    border: solid 1px var(--fds-semantic-border-neutral-default);
     box-sizing: border-box;
     display: inline-block;
   }
@@ -22,11 +22,9 @@
     flex: 0 1 auto;
     width: 100%;
     appearance: none;
-    padding: 0 var(--ds-spacing-3);
-    border: solid 1px var(--ds-color-neutral-border-default);
-    background: var(--ds-color-neutral-background-default);
-    color: var(--ds-color-neutral-text-default);
-    border-radius: var(--ds-border-radius-md);
+    padding: 0 var(--fds-spacing-3);
+    border: solid 1px var(--fds-semantic-border-input-default);
+    border-radius: var(--fds-border_radius-medium);
   }
 
   .fds-textfield__input:disabled {
@@ -34,88 +32,88 @@
   }
 
   .fds-textfield--readonly .fds-textfield__input {
-    background: var(--ds-color-neutral-background-subtle);
-    border-color: var(--ds-color-neutral-border-strong);
+    background: var(--fds-semantic-surface-neutral-subtle);
+    border-color: var(--fds-semantic-border-neutral-default);
   }
 
   .fds-textfield__field {
     display: flex;
     align-items: stretch;
-    border-radius: var(--ds-border-radius-md);
+    border-radius: var(--fds-border_radius-medium);
   }
 
   .fds-textfield__field > *:first-child {
-    border-top-left-radius: var(--ds-border-radius-md);
-    border-bottom-left-radius: var(--ds-border-radius-md);
+    border-top-left-radius: var(--fds-border_radius-medium);
+    border-bottom-left-radius: var(--fds-border_radius-medium);
   }
 
   .fds-textfield__field > *:last-child {
-    border-top-right-radius: var(--ds-border-radius-md);
-    border-bottom-right-radius: var(--ds-border-radius-md);
+    border-top-right-radius: var(--fds-border_radius-medium);
+    border-bottom-right-radius: var(--fds-border_radius-medium);
   }
 
   .fds-textfield--sm .fds-textfield__adornment {
-    padding: var(--ds-sizing-2) var(--ds-spacing-3);
+    padding: var(--fds-sizing-2) var(--fds-spacing-3);
   }
 
   .fds-textfield--md .fds-textfield__adornment {
-    padding: 0.65rem var(--ds-spacing-4);
+    padding: 0.65rem var(--fds-spacing-4);
   }
 
   .fds-textfield--lg .fds-textfield__adornment {
-    padding: 0.85rem var(--ds-spacing-5);
+    padding: 0.85rem var(--fds-spacing-5);
   }
 
   .fds-textfield--sm .fds-textfield__field {
-    height: var(--ds-sizing-10);
+    height: var(--fds-sizing-10);
   }
 
   .fds-textfield--md .fds-textfield__field {
-    height: var(--ds-sizing-12);
+    height: var(--fds-sizing-12);
   }
 
   .fds-textfield--lg .fds-textfield__field {
-    height: var(--ds-sizing-14);
+    height: var(--fds-sizing-14);
   }
 
   .fds-textfield--sm .fds-textfield__input {
-    padding: 0 var(--ds-spacing-2);
+    padding: 0 var(--fds-spacing-2);
   }
 
   .fds-textfield--md .fds-textfield__input {
-    padding: 0 var(--ds-spacing-3);
+    padding: 0 var(--fds-spacing-3);
   }
 
   .fds-textfield--lg .fds-textfield__input {
-    padding: 0 var(--ds-spacing-4);
+    padding: 0 var(--fds-spacing-4);
   }
 
   .fds-textfield__label {
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     align-items: center;
   }
 
   .fds-textfield__description {
-    color: var(--ds-color-neutral-text-subtle);
-    margin-top: calc(var(--ds-spacing-2) * -1);
+    color: var(--fds-semantic-text-neutral-subtle);
+    margin-top: calc(var(--fds-spacing-2) * -1);
   }
 
   .fds-textfield:has(.fds-textfield__input:disabled) {
-    opacity: var(--ds-disabled-opacity);
+    opacity: var(--fds-opacity-disabled);
   }
 
   .fds-textfield--error .fds-textfield__input:not(:focus-visible) {
-    border-color: var(--ds-color-danger-border-default);
-    box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
+    border-color: var(--fds-semantic-border-danger-default);
+    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
     .fds-textfield__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      border-color: var(--ds-color-accent-border-strong);
-      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
+      border-color: var(--fds-semantic-border-input-hover);
+      box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
     }
   }
 

package/togglegroup.css

@@ -1,18 +1,17 @@
-@layer ds.togglegroup {
+@layer fds.togglegroup {
   .fds-togglegroup {
-    background-color: var(--ds-color-neutral-background-default);
-    border: var(--ds-color-neutral-border-default) solid var(--ds-border-width-default);
-    border-radius: var(--ds-border-radius-lg);
+    background-color: var(--fds-semantic-background-default);
+    border: var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);
+    border-radius: var(--fds-border_radius-large);
     width: fit-content;
-    height: fit-content;
   }
 
   .fds-togglegroup__content {
     display: inline-grid;
-    gap: var(--ds-spacing-1);
+    gap: var(--fds-spacing-1);
     grid-auto-columns: 1fr;
     grid-auto-flow: column;
-    padding: var(--ds-spacing-1);
+    padding: var(--fds-spacing-1);
   }
 
   .fds-togglegroup__input {

package/tooltip.css

@@ -1,16 +1,23 @@
-@layer ds.tooltip {
+@layer fds.tooltip {
   .fds-tooltip {
-    --dsc-tooltip-background: var(--ds-color-neutral-text-default);
-
-    background: var(--dsc-tooltip-background);
-    padding: var(--ds-spacing-1) var(--ds-spacing-2);
-    color: var(--ds-color-neutral-background-default);
-    border-radius: var(--ds-border-radius-md);
-    font: var(--ds-typography-paragraph-xs);
+    background: var(--fds-semantic-surface-neutral-inverted);
+    padding: var(--fds-spacing-1) var(--fds-spacing-2);
+    color: var(--fds-semantic-text-neutral-on_inverted);
+    border-radius: var(--fds-border_radius-medium);
+    font: var(--fds-typography-paragraph-xsmall);
     font-family: inherit;
   }
 
+  .fds-tooltip--inverted {
+    background: var(--fds-semantic-surface-neutral-subtle);
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
   .fds-tooltip__arrow {
-    fill: var(--dsc-tooltip-background);
+    fill: var(--fds-semantic-surface-neutral-inverted);
+  }
+
+  .fds-tooltip--inverted .fds-tooltip__arrow {
+    fill: var(--fds-semantic-surface-neutral-subtle);
   }
 }

package/utils.css

@@ -1,4 +1,4 @@
-@layer ds.utils {
+@layer fds.utils {
   /**
  * Visually hide an element, but leave it available for screen readers
  */
@@ -17,11 +17,11 @@
  * Apply a focus outline on an element when it is focused with keyboard
  */
   .fds-focus:focus-visible {
-    --dsc-focus-border-width: 3px;
+    --fds-focus-border-width: 3px;
 
-    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
-    outline-offset: var(--dsc-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    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 animate-height {