@bitrise/bitkit-v2 0.3.67 → 0.3.68

package/dist/theme/global-css.js

@@ -1,8 +1,13 @@
 import { defineGlobalStyles as o } from "@chakra-ui/react/styled-system";
-const e = o({
+import { rem as t } from "./themeUtils.js";
+const n = o({
   "*": {
     "--global-font-mono": "fonts.mono",
-    "--global-font-body": "fonts.body"
+    "--global-font-body": "fonts.body",
+    "--focus-ring-width": t(3),
+    "--focus-ring-offset": "0",
+    "--focus-ring-style": "solid",
+    "--focus-ring-color": "colors.sys.interactive.highlight"
   },
   body: {
     color: "text/body",
@@ -10,14 +15,9 @@ const e = o({
   },
   "a, summary, button, input, textarea, select, [tabindex]:not([tabindex='-1'])": {
     outline: "none",
-    _focusVisible: {
-      outline: "3px",
-      outlineColor: "sys/interactive/highlight",
-      outlineOffset: "0",
-      outlineStyle: "solid"
-    }
+    focusVisibleRing: "outside"
   }
 });
 export {
-  e as default
+  n as default
 };

package/dist/theme/slot-recipes/Switch.recipe.js

@@ -1,7 +1,7 @@
 import { switchAnatomy as i } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
 import { rem as t } from "../themeUtils.js";
-const l = e({
+const o = e({
   slots: i.keys(),
   className: "switch",
   base: {
@@ -54,9 +54,7 @@ const l = e({
       _readOnly: {
         cursor: "default"
       },
-      _focusVisible: {
-        outline: "3px solid var(--colors-sys-interactive-highlight)"
-      }
+      focusVisibleRing: "outside"
     },
     thumb: {
       width: "var(--switch-height)",
@@ -114,5 +112,5 @@ const l = e({
   }
 });
 export {
-  l as default
+  o as default
 };

package/dist/theme/slot-recipes/Tabs.recipe.js

@@ -1,26 +1,21 @@
-import { tabsAnatomy as r } from "@chakra-ui/react/anatomy";
+import { tabsAnatomy as o } from "@chakra-ui/react/anatomy";
 import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
-import { rem as o } from "../themeUtils.js";
-const a = e({
-  slots: r.keys(),
+import { rem as r } from "../themeUtils.js";
+const l = e({
+  slots: o.keys(),
   className: "chakra-tabs",
   base: {
     list: {
       display: "flex"
     },
     trigger: {
+      "--focus-ring-width": r(2),
       cursor: "pointer",
       textStyle: "body/lg/semibold",
       paddingInline: "16",
       position: "relative",
       textAlign: "left",
       zIndex: 0,
-      _focusVisible: {
-        outline: o(2),
-        outlineColor: "sys/interactive/highlight",
-        outlineOffset: "0",
-        outlineStyle: "solid"
-      },
       _disabled: {
         cursor: "not-allowed"
       },
@@ -56,7 +51,7 @@ const a = e({
           gap: "8",
           color: "text/secondary",
           paddingBlockStart: "12",
-          paddingBlockEnd: o(9),
+          paddingBlockEnd: r(9),
           borderBlockEnd: "2px solid transparent",
           _selected: {
             color: "text/primary"
@@ -72,7 +67,7 @@ const a = e({
       },
       contained: {
         trigger: {
-          paddingBlockStart: o(10),
+          paddingBlockStart: r(10),
           paddingBlockEnd: "12",
           backgroundColor: "background/tertiary",
           color: "text/secondary",
@@ -100,5 +95,5 @@ const a = e({
   }
 });
 export {
-  a as default
+  l as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.67",
+  "version": "0.3.68",
   "description": "Bitrise Design System Components built with Chakra UI v3",
   "keywords": [
     "react",