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

package/utils.css

@@ -1,8 +1,8 @@
-@layer fds.utils {
+@layer ds.utils {
   /**
  * Visually hide an element, but leave it available for screen readers
  */
-  .fds-sr-only {
+  .ds-sr-only {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -16,25 +16,25 @@
   /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
-  .fds-focus:focus-visible {
-    --fds-focus-border-width: 3px;
+  .ds-focus:focus-visible {
+    --dsc-focus-border-width: 3px;
 
-    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);
+    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);
   }
 
   @layer animate-height {
-    .fds-animate-height--openingOrClosing,
-    .fds-animate-height--closed {
+    .ds-animate-height--openingOrClosing,
+    .ds-animate-height--closed {
       overflow: hidden;
     }
 
-    .fds-animate-height--open .fds-animate-height__content {
+    .ds-animate-height--open .ds-animate-height__content {
       height: auto;
     }
 
-    .fds-animate-height--closed .fds-animate-height__content {
+    .ds-animate-height--closed .ds-animate-height__content {
       height: 0;
       display: none;
     }