@warp-ds/uno - npm Package Compare versions

Comparing version 1.0.0-alpha.30 to 1.0.0-alpha.31

package.json

 {
   "name": "@warp-ds/uno",
   "repository": "[e-mail]:warp-ds/drive.git",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.31",
   "type": "module",
@@ -6,0 +6,0 @@ "exports": {

src/_rules/focus-ring.js

@@ -0,7 +1,13 @@
+import { entriesToCss } from '@unocss/core';
+
 // TODO: use actual variables and values when those has been defined
-const focusRingStyle = {
-  'outline': '2px solid var(--w-color-focused)',
+const focusRingStyle = entriesToCss(Object.entries({
+  outline: '2px solid var(--w-color-focused)',
   'outline-offset': 'var(--w-outline-offset, 1px)',
-};
+}));
 
+const outlineNone = entriesToCss(Object.entries({
+  outline: 'none',
+}));
+
 const focusRingInsetStyle = {
@@ -12,6 +18,8 @@ '--w-outline-offset': '-3px',
 export const focusRing = [
-  ["focusable:focus", focusRingStyle],
-  ["focusable:focus:not(:focus-visible)", { 'outline': 'none' }],
-  ["focusable:focus-visible", focusRingStyle],
+  [/^focusable$/, ([selector]) => {
+    const focus = `.${selector}:focus,.${selector}:focus-visible{${focusRingStyle}}`;
+    const notFocusVisible = `.${selector}:not(:focus-visible){${outlineNone}}`;
+    return focus + notFocusVisible;
+  }],
   ["focusable-inset", { ... focusRingInsetStyle }],
 ];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

197576

increased by0.22%

Lines of code

5633

increased by0.2%

No dependency changes