@dnanpm/ui-components 0.1.0 → 0.2.0

package/dist/styles/utils/elevation.module.css.js

@@ -1,5 +1,5 @@
 import './elevation.css';
-const elevationLow = "_elevationLow_1rmn9_6";
+const elevationLow = "_elevationLow_4gnft_6";
 const elevationStyles = {
   elevationLow
 };

package/dist/styles/utils/focus.css

@@ -1,50 +1,71 @@
-@layer dna-design-system {._focusable_1cr46_1 {
+@layer dna-design-system {._focusable_ikczm_1 {
     /* Marker class for shared focus treatment */
 }
 
-._focusable_1cr46_1:focus {
+._focusable_ikczm_1:focus {
     outline-color: transparent;
 }
 
-._focusable_1cr46_1:focus-visible {
+._focusable_ikczm_1:focus-visible {
     /* Transparent outline ensures a visible ring fallback in forced colors. */
     outline: 2px solid transparent;
     outline-offset: 2px;
     box-shadow:
-        0 0 0 2px var(--colors-semantic-utility-focus-soft),
-        0 0 0 4px var(--colors-semantic-utility-focus-strong);
+        0 0 0 2px var(--color-semantic-utility-focus-soft),
+        0 0 0 4px var(--color-semantic-utility-focus-strong);
 }
 
 @media (forced-colors: active) {
-    ._focusable_1cr46_1:focus-visible {
+    ._focusable_ikczm_1:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
-._focusableInset_1cr46_25 {
+._focusableInset_ikczm_25 {
     /* Marker class for inset focus treatment (ring stays inside the element boundary) */
 }
 
-._focusableInset_1cr46_25:focus {
+._focusableInset_ikczm_25:focus {
     outline-color: transparent;
 }
 
-._focusableInset_1cr46_25:focus-visible {
+._focusableInset_ikczm_25:focus-visible {
     outline: 2px solid transparent;
     box-shadow:
-        inset 0 0 0 2px var(--colors-semantic-utility-focus-strong),
-        inset 0 0 0 4px var(--colors-semantic-utility-focus-soft);
+        inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
+        inset 0 0 0 4px var(--color-semantic-utility-focus-soft);
 }
 
 @media (forced-colors: active) {
-    ._focusableInset_1cr46_25:focus-visible {
+    ._focusableInset_ikczm_25:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
-._focusClipGuard_1cr46_47 {
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._focusable_ikczm_1:focus-visible {
+        box-shadow:
+            0 0 0 2px var(--color-semantic-utility-focus-strong),
+            0 0 0 4px var(--color-semantic-utility-focus-soft);
+    }
+
+    ._focusableInset_ikczm_25:focus-visible {
+        box-shadow:
+            inset 0 0 0 2px var(--color-semantic-utility-focus-soft),
+            inset 0 0 0 4px var(--color-semantic-utility-focus-strong);
+    }
+
+    @media (forced-colors: active) {
+        ._focusable_ikczm_1:focus-visible,
+        ._focusableInset_ikczm_25:focus-visible {
+            box-shadow: none;
+        }
+    }
+}
+
+._focusClipGuard_ikczm_68 {
     /*
      * Prevents focus rings from being clipped when the container uses overflow: hidden.
      *

package/dist/styles/utils/focus.module.css.cjs

@@ -1,9 +1,9 @@
 require('./focus.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const focusable = "_focusable_1cr46_1";
-const focusableInset = "_focusableInset_1cr46_25";
-const focusClipGuard = "_focusClipGuard_1cr46_47";
+const focusable = "_focusable_ikczm_1";
+const focusableInset = "_focusableInset_ikczm_25";
+const focusClipGuard = "_focusClipGuard_ikczm_68";
 const focusStyles = {
   focusable,
   focusableInset,

package/dist/styles/utils/focus.module.css.js

@@ -1,7 +1,7 @@
 import './focus.css';
-const focusable = "_focusable_1cr46_1";
-const focusableInset = "_focusableInset_1cr46_25";
-const focusClipGuard = "_focusClipGuard_1cr46_47";
+const focusable = "_focusable_ikczm_1";
+const focusableInset = "_focusableInset_ikczm_25";
+const focusClipGuard = "_focusClipGuard_ikczm_68";
 const focusStyles = {
   focusable,
   focusableInset,