add layer to utility

digdir · Apr 11, 2024 · aaf4616 · aaf4616
1 parent d90f904
commit aaf4616
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 34 deletions.
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -1,26 +1,28 @@
-/**
+@layer fds.utility {
+  /**
  * Visually hide an element, but leave it available for screen readers
  */
-.fds-utility-visuallyHidden-1ed11112 {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+  .fds-utility-visuallyHidden-1ed11112 {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 
-/**
+  /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
-.fds-utility-focusable-1ed11112:focus-visible {
-  --fds-focus-border-width: 3px;
+  .fds-utility-focusable-1ed11112:focus-visible {
+    --fds-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(--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 fds.button {

diff --git a/packages/react/src/utilities/utility.module.css b/packages/react/src/utilities/utility.module.css
@@ -1,24 +1,26 @@
-/**
+@layer fds.utility {
+  /**
  * Visually hide an element, but leave it available for screen readers
  */
-.visuallyHidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+  .visuallyHidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 
-/**
+  /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
-.focusable:focus-visible {
-  --fds-focus-border-width: 3px;
+  .focusable:focus-visible {
+    --fds-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(--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);
+  }
 }