asma-ui-core 3.78.11 → 3.79.0

package/dist/tailwind.config.d.ts

@@ -27,6 +27,7 @@ declare const _default: {
                 "gama-300": string;
                 "gama-400": string;
                 "gama-500": string;
+                "focus-ring": string;
                 "gama-600": string;
                 "gama-700": string;
                 "gama-800": string;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.78.11",
+    "version": "3.79.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/_focus.scss

@@ -0,0 +1,23 @@
+// ponytail: SCSS modules cannot consume Tailwind utilities; one mixin keeps button focus treatment consistent.
+@mixin focus-ring($mode) {
+    outline: none !important;
+
+    @if $mode == 'filled' {
+        // The permanent 1px button border plus this 2px inset layer reproduces Figma's 3px
+        // focus edge without changing the auto-sized button's layout footprint.
+        border-color: var(--colors-focus-ring) !important;
+        box-shadow: inset 0 0 0 2px var(--colors-focus-ring), inset 0 0 0 4px white !important;
+    } @else {
+        // Preserve each button's 1px border and complete Figma's 3px edge inside it.
+        // This is layout-neutral for auto-sized text and quaternary buttons.
+        border-color: var(--colors-focus-ring) !important;
+        box-shadow: inset 0 0 0 2px var(--colors-focus-ring) !important;
+    }
+
+    @media (forced-colors: active) {
+        forced-color-adjust: none;
+        outline: 3px solid CanvasText !important;
+        outline-offset: 0 !important;
+        box-shadow: none !important;
+    }
+}

package/src/styles/color-variables/defaultTokens.css

@@ -27,6 +27,7 @@
     --colors-gama-300: var(--colors-blue-300);
     --colors-gama-400: var(--colors-blue-400);
     --colors-gama-500: var(--colors-blue-500);
+    --colors-focus-ring: var(--colors-gama-500);
     --colors-gama-600: var(--colors-blue-600);
     --colors-gama-700: var(--colors-blue-700);
     --colors-gama-800: var(--colors-blue-800);
@@ -112,7 +113,7 @@
     --colors-button-outlined-error-text-color: var(--colors-beta-500);
     --colors-button-outlined-error-bg-color: transparent;
     --colors-button-outlined-error-border-color: var(--colors-beta-500);
-    --colors-button-outlined-error-focused-text-color: #ffffff;
+    --colors-button-outlined-error-focused-text-color: var(--colors-beta-500);
     --colors-button-outlined-error-focused-bg-color: var(--colors-beta-100);
     --colors-button-outlined-error-focused-border-color: var(--colors-beta-400);
     --colors-button-outlined-error-active-text-color: var(--colors-beta-700);
@@ -130,7 +131,6 @@
     --colors-button-text-common-border-color: transparent;
     --colors-button-text-common-focused-text-color: var(--colors-gama-500);
     --colors-button-text-common-focused-bg-color: var(--colors-gama-50);
-    --colors-button-text-common-focused-border-color: var(--colors-gama-400);
     --colors-button-text-common-active-text-color: var(--colors-gama-500);
     --colors-button-text-common-active-bg-color: var(--colors-gama-100);
     --colors-button-text-common-active-border-color: var(--colors-gama-100);
@@ -162,7 +162,6 @@
     --colors-button-textGray-common-border-color: transparent;
     --colors-button-textGray-common-focused-text-color: var(--colors-gama-500);
     --colors-button-textGray-common-focused-bg-color: var(--colors-gama-50);
-    --colors-button-textGray-common-focused-border-color: var(--colors-gama-400);
     --colors-button-textGray-common-active-text-color: var(--colors-gama-500);
     --colors-button-textGray-common-active-bg-color: var(--colors-gama-100);
     --colors-button-textGray-common-active-border-color: var(--colors-gama-100);
@@ -178,7 +177,6 @@
     --colors-button-textWhite-common-border-color: transparent;
     --colors-button-textWhite-common-focused-text-color: white;
     --colors-button-textWhite-common-focused-bg-color: transparent;
-    --colors-button-textWhite-common-focused-border-color: transparent;
     --colors-button-textWhite-common-active-text-color: white;
     --colors-button-textWhite-common-active-bg-color: transparent;
     --colors-button-textWhite-common-active-border-color: transparent;

package/src/styles/color-variables/fretexTokens.css

@@ -6,6 +6,7 @@
     --colors-alpha-600: var(--colors-slate-600);
     --colors-alpha-700: var(--colors-slate-700);
     --colors-beta-100: var(--colors-red-100);
+    --colors-beta-400: var(--colors-green-400);
     --colors-beta-500: var(--colors-red-500);
     --colors-beta-600: var(--colors-red-600);
     --colors-beta-700: var(--colors-red-700);
@@ -16,6 +17,7 @@
     --colors-gama-300: var(--colors-green-300);
     --colors-gama-400: var(--colors-green-400);
     --colors-gama-500: var(--colors-green-500);
+    --colors-focus-ring: var(--colors-gama-500);
     --colors-gama-600: var(--colors-green-600);
     --colors-gama-700: var(--colors-green-700);
     --colors-gama-800: var(--colors-green-700);
@@ -71,7 +73,7 @@
     --colors-button-contained-error-border-color: var(--colors-beta-500);
     --colors-button-contained-error-focused-text-color: #ffffff;
     --colors-button-contained-error-focused-bg-color: var(--colors-beta-500);
-    --colors-button-contained-error-focused-border-color: var(--colors-gama-400);
+    --colors-button-contained-error-focused-border-color: var(--colors-beta-400);
     --colors-button-contained-error-active-text-color: #ffffff;
     --colors-button-contained-error-active-bg-color: var(--colors-beta-700);
     --colors-button-contained-error-active-border-color: var(--colors-beta-700);
@@ -101,9 +103,9 @@
     --colors-button-outlined-error-text-color: var(--colors-beta-500);
     --colors-button-outlined-error-bg-color: transparent;
     --colors-button-outlined-error-border-color: var(--colors-beta-500);
-    --colors-button-outlined-error-focused-text-color: #ffffff;
+    --colors-button-outlined-error-focused-text-color: var(--colors-beta-500);
     --colors-button-outlined-error-focused-bg-color: var(--colors-beta-100);
-    --colors-button-outlined-error-focused-border-color: var(--colors-gama-400);
+    --colors-button-outlined-error-focused-border-color: var(--colors-beta-400);
     --colors-button-outlined-error-active-text-color: var(--colors-beta-700);
     --colors-button-outlined-error-active-bg-color: var(--colors-beta-100);
     --colors-button-outlined-error-active-border-color: var(--colors-beta-700);
@@ -119,7 +121,6 @@
     --colors-button-text-common-border-color: transparent;
     --colors-button-text-common-focused-text-color: var(--colors-gama-500);
     --colors-button-text-common-focused-bg-color: var(--colors-gama-50);
-    --colors-button-text-common-focused-border-color: var(--colors-gama-400);
     --colors-button-text-common-active-text-color: var(--colors-gama-500);
     --colors-button-text-common-active-bg-color: var(--colors-gama-100);
     --colors-button-text-common-active-border-color: var(--colors-gama-100);
@@ -135,7 +136,7 @@
     --colors-button-text-error-border-color: transparent;
     --colors-button-text-error-focused-text-color: var(--colors-beta-600);
     --colors-button-text-error-focused-bg-color: var(--colors-beta-100);
-    --colors-button-text-error-focused-border-color: var(--colors-gama-400);
+    --colors-button-text-error-focused-border-color: var(--colors-beta-400);
     --colors-button-text-error-active-text-color: var(--colors-beta-600);
     --colors-button-text-error-active-bg-color: var(--colors-beta-100);
     --colors-button-text-error-active-border-color: var(--colors-beta-100);
@@ -151,7 +152,6 @@
     --colors-button-textGray-common-border-color: transparent;
     --colors-button-textGray-common-focused-text-color: var(--colors-gama-500);
     --colors-button-textGray-common-focused-bg-color: var(--colors-gama-50);
-    --colors-button-textGray-common-focused-border-color: var(--colors-gama-400);
     --colors-button-textGray-common-active-text-color: var(--colors-gama-500);
     --colors-button-textGray-common-active-bg-color: var(--colors-gama-100);
     --colors-button-textGray-common-active-border-color: var(--colors-gama-100);
@@ -167,7 +167,6 @@
     --colors-button-textWhite-common-border-color: transparent;
     --colors-button-textWhite-common-focused-text-color: white;
     --colors-button-textWhite-common-focused-bg-color: transparent;
-    --colors-button-textWhite-common-focused-border-color: transparent;
     --colors-button-textWhite-common-active-text-color: white;
     --colors-button-textWhite-common-active-bg-color: transparent;
     --colors-button-textWhite-common-active-border-color: transparent;

package/src/styles/color-variables/jadeTokens.css

@@ -21,6 +21,7 @@
     --colors-gama-300: var(--colors-jade-300);
     --colors-gama-400: var(--colors-jade-400);
     --colors-gama-500: var(--colors-jade-500);
+    --colors-focus-ring: var(--colors-gama-500);
     --colors-gama-600: var(--colors-jade-600);
     --colors-gama-700: var(--colors-jade-700);
     --colors-gama-800: var(--colors-jade-800);
@@ -104,7 +105,7 @@
     --colors-button-outlined-error-text-color: var(--colors-beta-500);
     --colors-button-outlined-error-bg-color: transparent;
     --colors-button-outlined-error-border-color: var(--colors-beta-500);
-    --colors-button-outlined-error-focused-text-color: #ffffff;
+    --colors-button-outlined-error-focused-text-color: var(--colors-beta-500);
     --colors-button-outlined-error-focused-bg-color: var(--colors-beta-100);
     --colors-button-outlined-error-focused-border-color: var(--colors-beta-400);
     --colors-button-outlined-error-active-text-color: var(--colors-beta-700);
@@ -122,7 +123,6 @@
     --colors-button-text-common-border-color: transparent;
     --colors-button-text-common-focused-text-color: var(--colors-gama-500);
     --colors-button-text-common-focused-bg-color: var(--colors-gama-50);
-    --colors-button-text-common-focused-border-color: var(--colors-gama-400);
     --colors-button-text-common-active-text-color: var(--colors-gama-500);
     --colors-button-text-common-active-bg-color: var(--colors-gama-100);
     --colors-button-text-common-active-border-color: var(--colors-gama-100);
@@ -154,7 +154,6 @@
     --colors-button-textGray-common-border-color: transparent;
     --colors-button-textGray-common-focused-text-color: var(--colors-gama-500);
     --colors-button-textGray-common-focused-bg-color: var(--colors-gama-50);
-    --colors-button-textGray-common-focused-border-color: var(--colors-gama-400);
     --colors-button-textGray-common-active-text-color: var(--colors-gama-500);
     --colors-button-textGray-common-active-bg-color: var(--colors-gama-100);
     --colors-button-textGray-common-active-border-color: var(--colors-gama-100);
@@ -170,7 +169,6 @@
     --colors-button-textWhite-common-border-color: transparent;
     --colors-button-textWhite-common-focused-text-color: white;
     --colors-button-textWhite-common-focused-bg-color: transparent;
-    --colors-button-textWhite-common-focused-border-color: transparent;
     --colors-button-textWhite-common-active-text-color: white;
     --colors-button-textWhite-common-active-bg-color: transparent;
     --colors-button-textWhite-common-active-border-color: transparent;

package/src/styles/components-colors/inputVariables.css

@@ -23,11 +23,11 @@
     --colors-input-active-focus-text-color: var(--colors-delta-800);
     --colors-input-active-disabled-text-color: var(--colors-delta-300);
     /* Figma Input field (node 15561-37391): enabled border delta-500 #7a899e; hover border/hover
-       gama-300 #60bdbd (2px); focus border/focus gama-400 #1ca1a1 (3px); disabled delta-300. */
+       gama-300 #60bdbd (2px); focus uses the theme-resolved focus ring (3px); disabled delta-300. */
     --colors-input-active-outline-color: var(--colors-delta-500);
     --colors-input-active-hover-outline-color: var(--colors-gama-300);
     --colors-input-active-active-outline-color: var(--colors-gama-400);
-    --colors-input-active-focus-outline-color: var(--colors-gama-400);
+    --colors-input-active-focus-outline-color: var(--colors-focus-ring);
     --colors-input-active-disabled-outline-color: var(--colors-delta-300);
     --input-active-cursor: text;
     --input-active-hover-cursor: text;

package/tw-configs/twConfigs.json

@@ -22,6 +22,7 @@
         "gama-300": "var(--colors-gama-300)",
         "gama-400": "var(--colors-gama-400)",
         "gama-500": "var(--colors-gama-500)",
+        "focus-ring": "var(--colors-focus-ring)",
         "gama-600": "var(--colors-gama-600)",
         "gama-700": "var(--colors-gama-700)",
         "gama-800": "var(--colors-gama-800)",

package/dist/table/shared-components/CheckIcon.js

@@ -1,12 +0,0 @@
-import { CheckIcon as r } from "../../components/icons/check-icon/CheckIcon.js";
-import { jsx as e } from "react/jsx-runtime";
-function h(o) {
-  return /* @__PURE__ */ e(r, {
-    width: "1rem",
-    height: "1rem",
-    ...o
-  });
-}
-export {
-  h as CheckIcon
-};

package/dist/table/shared-components/menu-item/index.js

@@ -1,22 +0,0 @@
-import { cn as i } from "../../../helpers/cn.js";
-import { CheckIcon as l } from "../CheckIcon.js";
-import { jsx as m, jsxs as s } from "react/jsx-runtime";
-var g = ({ children: n, selected: o, disabled: e, className: a, onClick: t }) => /* @__PURE__ */ s("li", {
-  role: "menuitem",
-  "aria-disabled": e ? !0 : void 0,
-  tabIndex: -1,
-  onClick: e ? void 0 : t,
-  onKeyDown: (r) => {
-    e || (r.key === "Enter" || r.key === " ") && (r.preventDefault(), t?.(r));
-  },
-  className: i("flex items-center gap-x-1 p-2 text-base text-delta-700 outline-none", e ? "cursor-not-allowed" : "cursor-pointer hover:bg-delta-50", o && "bg-gama-50 hover:bg-gama-50", a),
-  children: [/* @__PURE__ */ m(l, {
-    width: 24,
-    height: 24,
-    color: o ? "var(--colors-gama-500)" : "transparent",
-    style: { transition: "color 0.2s ease" }
-  }), n]
-});
-export {
-  g as StyledMenuItem
-};