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

package/textarea.css

@@ -1,10 +1,10 @@
-@layer fds.textarea {
+@layer ds.textarea {
   .fds-textarea {
     display: grid;
     gap: var(--ds-spacing-2);
   }
 
-  .fds-textarea__readonly__icon {
+  .fds-textarea__readonly-icon {
     height: 1.2em;
     width: 1.2em;
   }
@@ -53,15 +53,15 @@
     padding: var(--ds-spacing-4);
   }
 
-  .fds-textarea--disabled {
-    opacity: var(--ds-opacity-disabled);
+  .fds-textarea:has(.fds-textarea__input:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-textarea--disabled .fds-textarea__input {
+  .fds-textarea__input:disabled {
     cursor: not-allowed;
   }
 
-  .fds-textarea--readonly .fds-textarea__input {
+  .fds-textarea__input:read-only {
     background: var(--ds-color-neutral-background-subtle);
     border-color: var(--ds-color-neutral-border-strong);
   }

package/textfield.css

@@ -1,4 +1,4 @@
-@layer fds.textfield {
+@layer ds.textfield {
   .fds-textfield {
     display: grid;
     gap: var(--ds-spacing-2);
@@ -24,10 +24,12 @@
     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);
   }
 
-  .fds-textfield--disabled .fds-textfield__input {
+  .fds-textfield__input:disabled {
     cursor: not-allowed;
   }
 
@@ -101,8 +103,8 @@
     margin-top: calc(var(--ds-spacing-2) * -1);
   }
 
-  .fds-textfield--disabled {
-    opacity: var(--ds-opacity-disabled);
+  .fds-textfield:has(.fds-textfield__input:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
   .fds-textfield--error .fds-textfield__input:not(:focus-visible) {

package/togglegroup.css

@@ -1,9 +1,10 @@
-@layer fds.togglegroup {
+@layer ds.togglegroup {
   .fds-togglegroup {
     background-color: var(--ds-color-neutral-background-default);
-    border: var(--ds-color-neutral-border-strong) solid var(--ds-border-width-default);
+    border: var(--ds-color-neutral-border-default) solid var(--ds-border-width-default);
     border-radius: var(--ds-border-radius-lg);
     width: fit-content;
+    height: fit-content;
   }
 
   .fds-togglegroup__content {

package/tooltip.css

@@ -1,10 +1,10 @@
-@layer fds.tooltip {
+@layer ds.tooltip {
   .fds-tooltip {
-    --dsc-tooltip-background: var(--ds-color-neutral-background-default);
+    --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-text-default);
+    color: var(--ds-color-neutral-background-default);
     border-radius: var(--ds-border-radius-md);
     font: var(--ds-typography-paragraph-xs);
     font-family: inherit;

package/utils.css

@@ -1,4 +1,4 @@
-@layer fds.utils {
+@layer ds.utils {
   /**
  * Visually hide an element, but leave it available for screen readers
  */
@@ -19,9 +19,9 @@
   .fds-focus:focus-visible {
     --dsc-focus-border-width: 3px;
 
-    outline: var(--dsc-focus-border-width) solid var(--ds-color-neutral-text-default);
+    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-color-neutral-background-default);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
   }
 
   @layer animate-height {