@cube-dev/ui-kit 0.200.1 → 0.202.0

package/docs/tasty/styles.md

@@ -303,17 +303,51 @@ Avoid setting physical and logical declarations that resolve to the same edge in
 
 Background color with design token support. Preferred over `backgroundColor` and `background`.
 
-**Syntax:** `[color]` or `[base-color] [overlay-color]`
+**Syntax:** `[color]`, or two colors mixed with a comma: `[color] [weight%], [color]`
 
 | Value | Effect |
 |-------|--------|
 | `"#purple"` | Token-based background color |
 | `"#purple.10"` | Token color at 10% opacity |
-| `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
+| `"#dark 4%, #surface"` | `#dark` mixed into `#surface` at 4% — the color `#dark` at 4% opacity over `#surface` would show |
 | `"rgb(255 128 0)"` | CSS color value |
 | `"color-mix(in oklab, #primary 50%, #surface)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
 
-When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. With `image` or `backgroundImage` on the same element, the image is layered over the overlay color in one `background-image`.
+#### Mixing two colors
+
+A comma between two colors mixes them into one:
+
+```jsx
+fill: '#dark 4%, #surface'
+// → background-color: color-mix(in srgb, var(--dark-color) 4%, var(--surface-color));
+```
+
+The comma-separated parts are the arguments of `color-mix()`, as written, mixed in sRGB: the space browsers composite layers in. When the weighted color is opaque, the mix is exactly what drawing it at that opacity over the other color shows. And because it is one `background-color`:
+
+- contrast checkers such as axe-core and Lighthouse can read it;
+- it transitions and animates between states like any other color;
+- an `image` on the same element stays the only `background-image` layer.
+
+The weight can come from a token or an expression: `'#dark $hover-weight, #surface'`, `'#dark ($hover * 100%), #surface'`.
+
+Give the weight as a percentage, not as an opacity. A color without a percentage takes half the weight, and its own alpha weighs it down again, so the mix comes out see-through: `'#dark.04, #surface'` is 52% opaque, not `#dark` at 4% over `#surface`. In development Tasty warns about a `#name.N` or `#clear` part without a percentage. It can't see into a token, though, so a token holding a translucent color mixes the same way with no warning: keep the token opaque and put its weight in the percentage.
+
+A mix takes two colors. Any more are ignored, with a development warning.
+
+#### Two colors separated by a space (deprecated)
+
+`fill: '#surface #dark.04'` paints the first color as `background-color` and the second as a `linear-gradient()` layer over it, through the `--tasty-second-fill-color` custom property. It still works, with a development warning, and is going away in the next major version: contrast checkers can't see through a `background-image`, so axe-core reports every text node over the layer as *incomplete*.
+
+| Before | After |
+|--------|-------|
+| `'#surface #dark.04'` | `'#dark 4%, #surface'` |
+| `'#surface #clear'` | `'#surface'` |
+| `'#surface #accent'` (an opaque overlay) | `'#accent'` |
+| `'#base #overlay'` (a token holding a translucent color) | `'#overlay $overlay-weight, #base'`, with `#overlay` opaque and `$overlay-weight` a percentage |
+
+The rewrites are exact when the overlay token is opaque. A state map no longer needs the same two-color shape in every state to transition smoothly: every state is now a plain background color.
+
+If an overlay has to stay a translucent token, draw the layer yourself with `fill: '#base', image: 'linear-gradient(#overlay, #overlay)'`. Contrast checkers can't read that either.
 
 There is no default fill color, so `fill: true` is ignored with a development warning. Use `false` for no fill.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.200.1",
+  "version": "0.202.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -59,7 +59,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "3.14.0",
+    "@tenphi/tasty": "3.15.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -97,7 +97,7 @@
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.12.0",
+    "@tenphi/eslint-plugin-tasty": "^1.14.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
@@ -115,6 +115,7 @@
     "@vitest/browser": "^5.0.5",
     "@vitest/browser-playwright": "^5.0.5",
     "@vitest/coverage-v8": "^5.0.5",
+    "axe-core": "4.14.0",
     "babel-plugin-react-compiler": "1.0.0",
     "best-effort-json-parser": "^1.2.1",
     "bytes": "^3.1.2",
@@ -190,7 +191,7 @@
     "chromatic:report": "node scripts/chromatic-report.mjs",
     "chromatic:check": "node scripts/chromatic-report.mjs --check",
     "chromatic:duplicates": "node scripts/chromatic-duplicates.mjs",
-    "size": "size-limit",
+    "size": "size-limit && node scripts/bundle-deps.mjs",
     "clear": "pnpm clear:dist && rimraf ./storybook-docs ./storybook-static ./node_modules/.cache",
     "clear:dist": "rimraf ./dist",
     "release": "pnpm build && pnpm check:react-package && changeset publish --provenance",
@@ -200,6 +201,7 @@
     "diagnostics:compiler": "node scripts/compiler/report.mjs",
     "diagnostics:form": "node scripts/form-diagnostics.mjs",
     "diagnostics:complexity": "node scripts/complexity-report.mjs",
+    "diagnostics:a11y": "node scripts/a11y-diagnostics.mjs",
     "update-tasty": "pnpm add @tenphi/tasty@${npm_config_version:-latest} --save-exact",
     "update-glaze": "pnpm add @tenphi/glaze@${npm_config_version:-latest} --save-exact",
     "test:form-compiled": "vitest run --config vitest.form-compiled.config.ts",

package/dist/components/content/Divider.d.ts

@@ -1,7 +0,0 @@
-
-import { BaseProps, OuterStyleProps } from "@tenphi/tasty";
-//#region src/components/content/Divider.d.ts
-export interface CubeDividerProps extends BaseProps, OuterStyleProps {}
-export declare const Divider: import("react").ForwardRefExoticComponent<CubeDividerProps & import("react").RefAttributes<unknown>>;
-//#endregion
-//# sourceMappingURL=Divider.d.ts.map

package/dist/components/content/Divider.js

@@ -1,105 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.200.1 | Cube Dev Team */
-import { useSlotProps } from "../../utils/react/Slots.js";
-import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
-import { c } from "react/compiler-runtime";
-import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
-import { forwardRef, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useSeparator } from "react-aria";
-//#region src/components/content/Divider.tsx
-const DividerElement = tasty({
-	styles: {
-		gridArea: "divider",
-		display: {
-			"": "block",
-			text: "grid"
-		},
-		gridColumns: "1fr auto 1fr",
-		placeItems: "center stretch",
-		gap: "1x",
-		preset: "c1",
-		height: {
-			"": "1bw 1bw",
-			text: "auto"
-		},
-		fill: {
-			"": "#border",
-			text: "none"
-		},
-		border: "0",
-		margin: "0",
-		Line: {
-			height: "1bw 1bw",
-			fill: "#border"
-		}
-	},
-	styleProps: [
-		...OUTER_STYLES,
-		...BASE_STYLES,
-		...COLOR_STYLES
-	]
-});
-const Divider = forwardRef(function Divider(props, ref) {
-	const $ = c(16);
-	const { mods, children, styles, ...otherProps } = useSlotProps(props, "divider");
-	const elementType = children ? "div" : "hr";
-	const internalRef = useRef(null);
-	const combinedRef = useCombinedRefs(ref, internalRef);
-	let t0;
-	if ($[0] !== elementType) {
-		t0 = { elementType };
-		$[0] = elementType;
-		$[1] = t0;
-	} else t0 = $[1];
-	const { separatorProps } = useSeparator(t0);
-	const T0 = DividerElement;
-	const t1 = elementType;
-	const t2 = !!children;
-	let t3;
-	if ($[2] !== mods || $[3] !== t2) {
-		t3 = {
-			text: t2,
-			...mods
-		};
-		$[2] = mods;
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	const t4 = filterBaseProps(otherProps, { eventProps: true });
-	let t5;
-	if ($[5] !== children) {
-		t5 = children && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx("div", { "data-element": "Line" }),
-			/* @__PURE__ */ jsx("div", { children }),
-			/* @__PURE__ */ jsx("div", { "data-element": "Line" })
-		] });
-		$[5] = children;
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== T0 || $[8] !== combinedRef || $[9] !== separatorProps || $[10] !== styles || $[11] !== t1 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5) {
-		t6 = /* @__PURE__ */ jsx(T0, {
-			...separatorProps,
-			as: t1,
-			mods: t3,
-			...t4,
-			ref: combinedRef,
-			styles,
-			children: t5
-		});
-		$[7] = T0;
-		$[8] = combinedRef;
-		$[9] = separatorProps;
-		$[10] = styles;
-		$[11] = t1;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = t6;
-	} else t6 = $[15];
-	return t6;
-});
-//#endregion
-export { Divider };
-
-//# sourceMappingURL=Divider.js.map

package/dist/components/content/Divider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.js","names":["BASE_STYLES","BaseProps","COLOR_STYLES","filterBaseProps","OUTER_STYLES","OuterStyleProps","tasty","forwardRef","useRef","useSeparator","useCombinedRefs","useSlotProps","DividerElement","styles","gridArea","display","text","gridColumns","placeItems","gap","preset","height","fill","border","margin","Line","styleProps","CubeDividerProps","Divider","props","ref","$","_c","mods","children","otherProps","elementType","internalRef","combinedRef","t0","separatorProps","T0","t1","t2","t3","t4","eventProps","t5","t6","_c"],"sources":["../../../src/components/content/Divider.tsx"],"sourcesContent":["import {\n  BASE_STYLES,\n  BaseProps,\n  COLOR_STYLES,\n  filterBaseProps,\n  OUTER_STYLES,\n  OuterStyleProps,\n  tasty,\n} from '@tenphi/tasty';\nimport { forwardRef, useRef } from 'react';\nimport { useSeparator } from 'react-aria';\n\nimport { useCombinedRefs, useSlotProps } from '../../utils/react';\n\nconst DividerElement = tasty({\n  styles: {\n    gridArea: 'divider',\n    display: {\n      '': 'block',\n      text: 'grid',\n    },\n    gridColumns: '1fr auto 1fr',\n    placeItems: 'center stretch',\n    gap: '1x',\n    preset: 'c1',\n    height: {\n      '': '1bw 1bw',\n      text: 'auto',\n    },\n    fill: {\n      '': '#border',\n      text: 'none',\n    },\n    border: '0',\n    margin: '0',\n\n    Line: {\n      height: '1bw 1bw',\n      fill: '#border',\n    },\n  },\n  styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],\n});\n\nexport interface CubeDividerProps extends BaseProps, OuterStyleProps {}\n\nexport const Divider = forwardRef(function Divider(\n  props: CubeDividerProps,\n  ref,\n) {\n  const { mods, children, styles, ...otherProps } = useSlotProps(\n    props,\n    'divider',\n  );\n\n  // Determine element type based on whether divider has content.\n  const elementType = children ? 'div' : 'hr';\n\n  const internalRef = useRef(null);\n  const combinedRef = useCombinedRefs(ref, internalRef);\n\n  const { separatorProps } = useSeparator({ elementType });\n\n  return (\n    <DividerElement\n      {...separatorProps}\n      as={elementType as any}\n      mods={{\n        text: !!children,\n        ...mods,\n      }}\n      {...filterBaseProps(otherProps, { eventProps: true })}\n      ref={combinedRef}\n      styles={styles}\n    >\n      {children && (\n        <>\n          <div data-element=\"Line\"></div>\n          <div>{children}</div>\n          <div data-element=\"Line\"></div>\n        </>\n      )}\n    </DividerElement>\n  );\n});\n"],"mappings":";;;;;;;;;AAcA,MAAMY,iBAAiBN,MAAM;CAC3BO,QAAQ;EACNC,UAAU;EACVC,SAAS;GACP,IAAI;GACJC,MAAM;EACR;EACAC,aAAa;EACbC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACRC,QAAQ;GACN,IAAI;GACJL,MAAM;EACR;EACAM,MAAM;GACJ,IAAI;GACJN,MAAM;EACR;EACAO,QAAQ;EACRC,QAAQ;EAERC,MAAM;GACJJ,QAAQ;GACRC,MAAM;EACR;CACF;CACAI,YAAY;EAAC,GAAGtB;EAAc,GAAGJ;EAAa,GAAGE;CAAY;AAC/D,CAAC;AAID,MAAa0B,UAAUrB,WAAW,SAAAqB,QAAAC,OAAAC,KAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAIhC,MAAA,EAAAC,MAAAC,UAAArB,QAAA,GAAAsB,eAAkDxB,aAChDkB,OACA,SACF;CAGA,MAAAO,cAAoBF,WAAA,QAAA;CAEpB,MAAAG,cAAoB7B,OAAO,IAAI;CAC/B,MAAA8B,cAAoB5B,gBAAgBoB,KAAKO,WAAW;CAAE,IAAAE;CAAA,IAAAR,EAAA,OAAAK,aAAA;EAEdG,KAAA,EAAAH,YAAc;EAACL,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAvD,MAAA,EAAAS,mBAA2B/B,aAAa8B,EAAe;CAGpD,MAAAE,KAAA7B;CAEK,MAAA8B,KAAAN;CAEI,MAAAO,KAAA,CAAC,CAACT;CAAQ,IAAAU;CAAA,IAAAb,EAAA,OAAAE,QAAAF,EAAA,OAAAY,IAAA;EADZC,KAAA;GAAA5B,MACE2B;GAAU,GACbV;EACL;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAY;EAAAZ,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CACG,MAAAc,KAAA1C,gBAAgBgC,YAAY,EAAAW,YAAc,KAAK,CAAC;CAAC,IAAAC;CAAA,IAAAhB,EAAA,OAAAG,UAAA;EAIpDa,KAAAb,YAAA,qBAAA,YAAA,EAAA,UAAA;GAEG,oBAAA,OAAA,EAAkB,gBAAA,OAAM,CAAA;GACxB,oBAAA,OAAA,EAAMA,SAAe,CAAA;GACrB,oBAAA,OAAA,EAAkB,gBAAA,OAAM,CAAA;EAAO,EAAA,CAAA;EAElCH,EAAA,KAAAG;EAAAH,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAAU,MAAAV,EAAA,OAAAO,eAAAP,EAAA,OAAAS,kBAAAT,EAAA,QAAAlB,UAAAkB,EAAA,QAAAW,MAAAX,EAAA,QAAAa,MAAAb,EAAA,QAAAc,MAAAd,EAAA,QAAAgB,IAAA;EAjBHC,KAAA,oBAAC,IAAD;GAAe,GACTR;GACA,IAAAE;GACE,MAAAE;GAGL,GACGC;GACCP,KAAAA;GACGzB;GAEPkC,UAAAA;EAXY,CAAA;EAkBEhB,EAAA,KAAAU;EAAAV,EAAA,KAAAO;EAAAP,EAAA,KAAAS;EAAAT,EAAA,MAAAlB;EAAAkB,EAAA,MAAAW;EAAAX,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAgB;EAAAhB,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAlBjBiB;AAkBiB,CAEpB"}