@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/button/draw.js

@@ -1,308 +1,224 @@
-import { T as TRANSPARENT_RGBA_COLOR_OBJECT } from "../share/const/index.js";
-import { r as rgbaColor2string, g as getGlobalThemeColor } from "../share/util/color.js";
-import { e as calcWhenLeaveBaseline, d as drawCircle } from "../share/util/plot.js";
+import { l as TRANSPARENT_RGBA_COLOR_OBJECT } from "../share/const/index.js";
+import { a as drawCircle, r as calcWhenLeaveBaseline } from "../share/util/plot.js";
+import { a as rgbaColor2string, n as getGlobalThemeColor } from "../share/util/color.js";
 function getBackgroundColor(disabled, loading, type, theme = "primary", palette, hoverFlag, activeFlag) {
-  if (palette) {
-    switch (type) {
-      case "text":
-        if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
-        if (activeFlag) return palette[1];
-        if (hoverFlag && !loading) return palette[0];
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "outline":
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return palette[0];
-        if (activeFlag) return palette[2];
-        if (hoverFlag && !loading) return palette[1];
-        return palette[0];
-      default:
-        if (disabled) return palette[1];
-        if (activeFlag) return palette[5];
-        if (hoverFlag && !loading) return palette[4];
-        return palette[5];
-    }
-  } else if (theme !== "info") {
-    switch (type) {
-      case "text":
-        if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
-        if (activeFlag) return getGlobalThemeColor(theme, 2);
-        if (hoverFlag && !loading) return getGlobalThemeColor(theme, 1);
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "outline":
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return getGlobalThemeColor(theme, 1);
-        if (activeFlag) return getGlobalThemeColor(theme, 3);
-        if (hoverFlag && !loading) return getGlobalThemeColor(theme, 2);
-        return getGlobalThemeColor(theme, 1);
-      default:
-        if (disabled) return getGlobalThemeColor(theme, 2);
-        if (activeFlag) return getGlobalThemeColor(theme, 6);
-        if (hoverFlag && !loading) return getGlobalThemeColor(theme, 5);
-        return getGlobalThemeColor(theme, 6);
-    }
-  } else {
-    switch (type) {
-      case "outline":
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "text":
-        if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
-        if (activeFlag) return getGlobalThemeColor("neutral", 3);
-        if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 2);
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return getGlobalThemeColor("neutral", 1);
-        if (activeFlag) return getGlobalThemeColor("neutral", 4);
-        if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 3);
-        return getGlobalThemeColor("neutral", 1);
-      default:
-        if (disabled) return getGlobalThemeColor("neutral", 1);
-        if (activeFlag) return getGlobalThemeColor("neutral", 3);
-        if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 2);
-        return getGlobalThemeColor("neutral", 1);
-    }
-  }
+	if (palette) switch (type) {
+		case "text":
+			if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
+			if (activeFlag) return palette[1];
+			if (hoverFlag && !loading) return palette[0];
+			return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "outline": return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return palette[0];
+			if (activeFlag) return palette[2];
+			if (hoverFlag && !loading) return palette[1];
+			return palette[0];
+		default:
+			if (disabled) return palette[1];
+			if (activeFlag) return palette[5];
+			if (hoverFlag && !loading) return palette[4];
+			return palette[5];
+	}
+	else if (theme !== "info") switch (type) {
+		case "text":
+			if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
+			if (activeFlag) return getGlobalThemeColor(theme, 2);
+			if (hoverFlag && !loading) return getGlobalThemeColor(theme, 1);
+			return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "outline": return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return getGlobalThemeColor(theme, 1);
+			if (activeFlag) return getGlobalThemeColor(theme, 3);
+			if (hoverFlag && !loading) return getGlobalThemeColor(theme, 2);
+			return getGlobalThemeColor(theme, 1);
+		default:
+			if (disabled) return getGlobalThemeColor(theme, 2);
+			if (activeFlag) return getGlobalThemeColor(theme, 6);
+			if (hoverFlag && !loading) return getGlobalThemeColor(theme, 5);
+			return getGlobalThemeColor(theme, 6);
+	}
+	else switch (type) {
+		case "outline": return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "text":
+			if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
+			if (activeFlag) return getGlobalThemeColor("neutral", 3);
+			if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 2);
+			return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return getGlobalThemeColor("neutral", 1);
+			if (activeFlag) return getGlobalThemeColor("neutral", 4);
+			if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 3);
+			return getGlobalThemeColor("neutral", 1);
+		default:
+			if (disabled) return getGlobalThemeColor("neutral", 1);
+			if (activeFlag) return getGlobalThemeColor("neutral", 3);
+			if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 2);
+			return getGlobalThemeColor("neutral", 1);
+	}
 }
 function getBorderColor(disabled, loading, type, theme = "primary", palette, hoverFlag, activeFlag) {
-  if (palette) {
-    switch (type) {
-      case "text":
-        if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
-        if (activeFlag) return palette[1];
-        if (hoverFlag && !loading) return palette[0];
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return palette[1];
-        if (activeFlag) return palette[3];
-        if (hoverFlag && !loading) return palette[2];
-        return palette[1];
-      case "outline":
-        if (disabled) return palette[0];
-        if (activeFlag) return palette[6];
-        if (hoverFlag && !loading) return palette[4];
-        return palette[5];
-      default:
-        return disabled ? getGlobalThemeColor("neutral", 8) : getGlobalThemeColor("neutral", 10);
-    }
-  } else if (theme !== "info") {
-    switch (type) {
-      case "text":
-        if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
-        if (activeFlag) return getGlobalThemeColor(theme, 2);
-        if (hoverFlag && !loading) return getGlobalThemeColor(theme, 1);
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return getGlobalThemeColor(theme, 2);
-        if (activeFlag) return getGlobalThemeColor(theme, 4);
-        if (hoverFlag && !loading) return getGlobalThemeColor(theme, 3);
-        return getGlobalThemeColor(theme, 2);
-      case "outline":
-        if (disabled) return getGlobalThemeColor(theme, 1);
-        if (activeFlag) return getGlobalThemeColor(theme, 7);
-        if (hoverFlag && !loading) return getGlobalThemeColor(theme, 5);
-        return getGlobalThemeColor(theme, 6);
-      default:
-        return disabled ? getGlobalThemeColor("neutral", 8) : getGlobalThemeColor("neutral", 10);
-    }
-  } else {
-    switch (type) {
-      case "text":
-        if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
-        if (activeFlag) return getGlobalThemeColor("neutral", 3);
-        if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 2);
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return getGlobalThemeColor("neutral", 5);
-        if (activeFlag) return getGlobalThemeColor("neutral", 9);
-        if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 8);
-        return getGlobalThemeColor("neutral", 7);
-      case "outline":
-        if (disabled) return getGlobalThemeColor("neutral", 6);
-        if (activeFlag) return getGlobalThemeColor("neutral", 8);
-        if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 9);
-        return getGlobalThemeColor("neutral", 10);
-    }
-    return disabled ? getGlobalThemeColor("neutral", 8) : getGlobalThemeColor("neutral", 10);
-  }
+	if (palette) switch (type) {
+		case "text":
+			if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
+			if (activeFlag) return palette[1];
+			if (hoverFlag && !loading) return palette[0];
+			return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return palette[1];
+			if (activeFlag) return palette[3];
+			if (hoverFlag && !loading) return palette[2];
+			return palette[1];
+		case "outline":
+			if (disabled) return palette[0];
+			if (activeFlag) return palette[6];
+			if (hoverFlag && !loading) return palette[4];
+			return palette[5];
+		default: return disabled ? getGlobalThemeColor("neutral", 8) : getGlobalThemeColor("neutral", 10);
+	}
+	else if (theme !== "info") switch (type) {
+		case "text":
+			if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
+			if (activeFlag) return getGlobalThemeColor(theme, 2);
+			if (hoverFlag && !loading) return getGlobalThemeColor(theme, 1);
+			return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return getGlobalThemeColor(theme, 2);
+			if (activeFlag) return getGlobalThemeColor(theme, 4);
+			if (hoverFlag && !loading) return getGlobalThemeColor(theme, 3);
+			return getGlobalThemeColor(theme, 2);
+		case "outline":
+			if (disabled) return getGlobalThemeColor(theme, 1);
+			if (activeFlag) return getGlobalThemeColor(theme, 7);
+			if (hoverFlag && !loading) return getGlobalThemeColor(theme, 5);
+			return getGlobalThemeColor(theme, 6);
+		default: return disabled ? getGlobalThemeColor("neutral", 8) : getGlobalThemeColor("neutral", 10);
+	}
+	else {
+		switch (type) {
+			case "text":
+				if (disabled) return TRANSPARENT_RGBA_COLOR_OBJECT;
+				if (activeFlag) return getGlobalThemeColor("neutral", 3);
+				if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 2);
+				return TRANSPARENT_RGBA_COLOR_OBJECT;
+			case "plain":
+				if (disabled) return getGlobalThemeColor("neutral", 5);
+				if (activeFlag) return getGlobalThemeColor("neutral", 9);
+				if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 8);
+				return getGlobalThemeColor("neutral", 7);
+			case "outline":
+				if (disabled) return getGlobalThemeColor("neutral", 6);
+				if (activeFlag) return getGlobalThemeColor("neutral", 8);
+				if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 9);
+				return getGlobalThemeColor("neutral", 10);
+		}
+		return disabled ? getGlobalThemeColor("neutral", 8) : getGlobalThemeColor("neutral", 10);
+	}
 }
-const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, type, inner, first, last) => {
-  ctx.fillStyle = rgbaColor2string(borderColor);
-  for (let i = 0; i < 4; i++) {
-    if (borderRadius[i] > pixelSize) {
-      if (i === 1 || i === 2 ? inner && (last || type === "text") || !inner : true) {
-        drawCircle(
-          ctx,
-          center[i][0],
-          center[i][1],
-          borderRadius[i],
-          rad[i][0],
-          rad[i][1],
-          pixelSize
-        );
-      }
-    }
-  }
-  if (center[1][0] + pixelSize > center[0][0]) {
-    ctx.fillRect(center[0][0], 0, center[1][0] - center[0][0] + pixelSize, pixelSize);
-  }
-  if (center[2][1] + pixelSize > center[1][1] && (inner && (last || type === "text") || !inner)) {
-    ctx.fillRect(
-      width - pixelSize,
-      center[1][1],
-      pixelSize,
-      center[2][1] - center[1][1] + pixelSize
-    );
-  }
-  if (center[3][0] < center[2][0] + pixelSize) {
-    ctx.fillRect(
-      center[3][0],
-      height - pixelSize,
-      center[2][0] - center[3][0] + pixelSize,
-      pixelSize
-    );
-  }
-  const flag = inner && !first && type !== "text";
-  if (!flag && center[3][1] + pixelSize > center[0][1]) {
-    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
-  }
-  if (inner && !first && type !== "text") {
-    ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
-  }
-  if (inner && !last && type !== "text") {
-    ctx.fillRect(width - 2 * pixelSize - 1, 0, pixelSize, height);
-  }
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, type, inner, first, last, nextIsTextButton) => {
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) {
+		if (i === 1 || i === 2 ? inner && last || !inner : true) drawCircle(ctx, center[i][0], center[i][1], borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+	}
+	if (center[1][0] + pixelSize > center[0][0]) {
+		let length = center[1][0] - center[0][0] + pixelSize;
+		if (inner && !last) length -= pixelSize;
+		ctx.fillRect(center[0][0], 0, length, pixelSize);
+	}
+	if (center[2][1] + pixelSize > center[1][1] && (inner && last || !inner)) ctx.fillRect(width - pixelSize, center[1][1], pixelSize, center[2][1] - center[1][1] + pixelSize);
+	if (center[3][0] < center[2][0] + pixelSize) {
+		let length = center[2][0] - center[3][0] + pixelSize;
+		if (inner && !last) length -= pixelSize;
+		ctx.fillRect(center[3][0], height - pixelSize, length, pixelSize);
+	}
+	if ((!inner || first) && center[3][1] + pixelSize > center[0][1]) ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+	if (inner && !first) ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
+	if (inner && !last) {
+		let length = pixelSize;
+		if (type === "text" || nextIsTextButton) length /= 2;
+		ctx.fillRect(width - 2 * pixelSize - 1, 0, length, height);
+	}
 };
 function getGradientColor(disabled, loading, theme = "primary", palette, hoverFlag, activeFlag) {
-  if (palette) {
-    if (disabled) return palette[0];
-    if (activeFlag) return palette[6];
-    if (hoverFlag && !loading) return palette[3];
-    return palette[4];
-  }
-  if (theme !== "info") {
-    if (disabled) return getGlobalThemeColor(theme, 1);
-    if (activeFlag) return getGlobalThemeColor(theme, 7);
-    if (hoverFlag && !loading) return getGlobalThemeColor(theme, 4);
-    return getGlobalThemeColor(theme, 5);
-  }
-  if (disabled) return getGlobalThemeColor("neutral", 2);
-  if (activeFlag) return getGlobalThemeColor("neutral", 5);
-  if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 4);
-  return getGlobalThemeColor("neutral", 3);
+	if (palette) {
+		if (disabled) return palette[0];
+		if (activeFlag) return palette[6];
+		if (hoverFlag && !loading) return palette[3];
+		return palette[4];
+	}
+	if (theme !== "info") {
+		if (disabled) return getGlobalThemeColor(theme, 1);
+		if (activeFlag) return getGlobalThemeColor(theme, 7);
+		if (hoverFlag && !loading) return getGlobalThemeColor(theme, 4);
+		return getGlobalThemeColor(theme, 5);
+	}
+	if (disabled) return getGlobalThemeColor("neutral", 2);
+	if (activeFlag) return getGlobalThemeColor("neutral", 5);
+	if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 4);
+	return getGlobalThemeColor("neutral", 3);
 }
 const drawGradient = (ctx, width, height, center, borderRadius, rad, pixelSize, disabled, loading, theme = "primary", palette, inner, first, last, hoverFlag, activeFlag) => {
-  const dxBottomRight = calcWhenLeaveBaseline(pixelSize, borderRadius[2]);
-  const dxBottomLeft = calcWhenLeaveBaseline(pixelSize, borderRadius[3]);
-  const dxTopRight = calcWhenLeaveBaseline(pixelSize, borderRadius[1]);
-  const dxTopLeft = calcWhenLeaveBaseline(pixelSize, borderRadius[0]);
-  const innerFlag = +!(inner && !first);
-  const innerAndLastOrNotInner = +!inner || inner && last;
-  if (!activeFlag || disabled) {
-    const barColor = getGradientColor(disabled, loading, theme, palette, hoverFlag, activeFlag);
-    ctx.fillStyle = rgbaColor2string(barColor);
-    if (borderRadius[1] > pixelSize) {
-      drawCircle(
-        ctx,
-        center[1][0] - pixelSize,
-        center[1][1],
-        borderRadius[1],
-        rad[1][0],
-        rad[1][1],
-        pixelSize
-      );
-      ctx.globalCompositeOperation = "destination-out";
-      ctx.fillRect(center[1][0] - pixelSize, 0, dxTopLeft, pixelSize);
-      ctx.globalCompositeOperation = "source-over";
-    }
-    if (borderRadius[2] > pixelSize) {
-      drawCircle(
-        ctx,
-        center[2][0] - pixelSize,
-        center[2][1],
-        borderRadius[2],
-        rad[2][0],
-        rad[2][1],
-        pixelSize
-      );
-      ctx.globalCompositeOperation = "destination-out";
-      ctx.fillRect(center[2][0] - pixelSize, height - pixelSize, dxBottomLeft, pixelSize);
-      ctx.globalCompositeOperation = "source-over";
-    }
-    const barLenX = center[2][0] + pixelSize - center[3][0] + dxBottomLeft * innerFlag + dxBottomRight * +innerAndLastOrNotInner - 1 * +!innerAndLastOrNotInner;
-    barLenX > 0 && ctx.fillRect(
-      center[3][0] - dxBottomLeft * innerFlag,
-      height - pixelSize * 2,
-      barLenX,
-      pixelSize
-    );
-    const barLenY = center[2][1] + pixelSize - center[1][1] + dxTopRight + dxBottomRight;
-    barLenY > 0 && ctx.fillRect(
-      width - pixelSize * 2 - (!last ? +inner * pixelSize * 1 : 0),
-      center[1][1] - dxTopRight,
-      pixelSize,
-      barLenY
-    );
-  } else {
-    const barColor = getGradientColor(disabled, loading, theme, palette, hoverFlag, activeFlag);
-    ctx.fillStyle = rgbaColor2string(barColor);
-    if (borderRadius[0] > pixelSize) {
-      drawCircle(
-        ctx,
-        center[0][0] + pixelSize,
-        center[0][1],
-        borderRadius[0],
-        rad[0][0],
-        rad[0][1],
-        pixelSize
-      );
-      ctx.globalCompositeOperation = "destination-out";
-      ctx.fillRect(center[0][0] + pixelSize, 0, dxTopRight, pixelSize);
-      ctx.globalCompositeOperation = "source-over";
-    }
-    if (borderRadius[3] > pixelSize) {
-      drawCircle(
-        ctx,
-        center[3][0] + pixelSize,
-        center[3][1],
-        borderRadius[3],
-        rad[3][0],
-        rad[3][1],
-        pixelSize
-      );
-      ctx.globalCompositeOperation = "destination-out";
-      ctx.fillRect(center[3][0] + pixelSize, height - pixelSize, dxBottomRight, pixelSize);
-      ctx.globalCompositeOperation = "source-over";
-    }
-    const barLenX = center[1][0] + pixelSize - center[0][0] + dxTopRight * +innerAndLastOrNotInner + dxTopLeft * innerFlag - 1 * +!innerAndLastOrNotInner;
-    barLenX > 0 && ctx.fillRect(center[0][0] - dxTopLeft * innerFlag, pixelSize, barLenX, pixelSize);
-    const barLenY = pixelSize + center[3][1] - center[0][1] + dxBottomLeft + dxTopLeft;
-    barLenY > 0 && ctx.fillRect(pixelSize, center[0][1] - dxTopLeft, pixelSize, barLenY);
-  }
+	const dxBottomRight = calcWhenLeaveBaseline(pixelSize, borderRadius[2]);
+	const dxBottomLeft = calcWhenLeaveBaseline(pixelSize, borderRadius[3]);
+	const dxTopRight = calcWhenLeaveBaseline(pixelSize, borderRadius[1]);
+	const dxTopLeft = calcWhenLeaveBaseline(pixelSize, borderRadius[0]);
+	const innerAndFirstOrNotInner = +!(inner && !first);
+	const innerAndLastOrNotInner = +!inner || +(inner && last);
+	if (!activeFlag || disabled) {
+		const barColor = getGradientColor(disabled, loading, theme, palette, hoverFlag, activeFlag);
+		if (!barColor) return;
+		ctx.fillStyle = rgbaColor2string(barColor);
+		if (borderRadius[1] > pixelSize) {
+			drawCircle(ctx, center[1][0] - pixelSize, center[1][1], borderRadius[1], rad[1][0], rad[1][1], pixelSize);
+			ctx.globalCompositeOperation = "destination-out";
+			ctx.fillRect(center[1][0] - pixelSize, 0, dxTopLeft, pixelSize);
+			ctx.globalCompositeOperation = "source-over";
+		}
+		if (borderRadius[2] > pixelSize) {
+			drawCircle(ctx, center[2][0] - pixelSize, center[2][1], borderRadius[2], rad[2][0], rad[2][1], pixelSize);
+			ctx.globalCompositeOperation = "destination-out";
+			ctx.fillRect(center[2][0] - pixelSize, height - pixelSize, dxBottomLeft, pixelSize);
+			ctx.globalCompositeOperation = "source-over";
+		}
+		const barLenX = center[2][0] - center[3][0] + dxBottomLeft * innerAndFirstOrNotInner + dxBottomRight * innerAndLastOrNotInner - 1 * +!innerAndLastOrNotInner;
+		barLenX > 0 && ctx.fillRect(center[3][0] - dxBottomLeft * innerAndFirstOrNotInner, height - pixelSize * 2, barLenX, pixelSize);
+		const barLenY = center[2][1] + pixelSize - center[1][1] + dxTopRight + dxBottomRight;
+		barLenY > 0 && ctx.fillRect(width - pixelSize * 2 - (!last ? +inner * pixelSize * 1 : 0), center[1][1] - dxTopRight, pixelSize, barLenY);
+	} else {
+		const barColor = getGradientColor(disabled, loading, theme, palette, hoverFlag, activeFlag);
+		if (!barColor) return;
+		ctx.fillStyle = rgbaColor2string(barColor);
+		if (borderRadius[0] > pixelSize) {
+			drawCircle(ctx, center[0][0] + pixelSize, center[0][1], borderRadius[0], rad[0][0], rad[0][1], pixelSize);
+			ctx.globalCompositeOperation = "destination-out";
+			ctx.fillRect(center[0][0] + pixelSize, 0, dxTopRight, pixelSize);
+			ctx.globalCompositeOperation = "source-over";
+		}
+		if (borderRadius[3] > pixelSize) {
+			drawCircle(ctx, center[3][0] + pixelSize, center[3][1], borderRadius[3], rad[3][0], rad[3][1], pixelSize);
+			ctx.globalCompositeOperation = "destination-out";
+			ctx.fillRect(center[3][0] + pixelSize, height - pixelSize, dxBottomRight, pixelSize);
+			ctx.globalCompositeOperation = "source-over";
+		}
+		const barLenX = center[1][0] + pixelSize - center[0][0] + dxTopRight * +innerAndLastOrNotInner + dxTopLeft * innerAndFirstOrNotInner - 1 * +!innerAndLastOrNotInner;
+		barLenX > 0 && ctx.fillRect(center[0][0] - dxTopLeft * innerAndFirstOrNotInner, pixelSize, barLenX, pixelSize);
+		const barLenY = pixelSize + center[3][1] - center[0][1] + dxBottomLeft + dxTopLeft;
+		barLenY > 0 && ctx.fillRect(pixelSize, center[0][1] - dxTopLeft, pixelSize, barLenY);
+	}
 };
 const getTextColorWithPalette = (palette, type, disabled, loading, hoverFlag, activeFlag) => {
-  if (!palette || type === "primary") return void 0;
-  if (disabled) {
-    if (type === "plain") return rgbaColor2string(palette[2]);
-    return rgbaColor2string(palette[1]);
-  }
-  if (loading) return rgbaColor2string(palette[5]);
-  if (activeFlag && type !== "plain") return rgbaColor2string(palette[6]);
-  switch (type) {
-    case "text":
-      return rgbaColor2string(palette[5]);
-    case "outline":
-      return hoverFlag ? rgbaColor2string(palette[4]) : rgbaColor2string(palette[5]);
-    case "plain":
-      return rgbaColor2string(palette[5]);
-    default:
-      return void 0;
-  }
-};
-export {
-  getBorderColor as a,
-  drawBorder as b,
-  getBackgroundColor as c,
-  drawGradient as d,
-  getTextColorWithPalette as g
+	if (!palette || type === "primary") return void 0;
+	if (disabled) {
+		if (type === "plain") return rgbaColor2string(palette[2]);
+		return rgbaColor2string(palette[1]);
+	}
+	if (loading) return rgbaColor2string(palette[5]);
+	if (activeFlag && type !== "plain") return rgbaColor2string(palette[6]);
+	switch (type) {
+		case "text": return rgbaColor2string(palette[5]);
+		case "outline": return hoverFlag ? rgbaColor2string(palette[4]) : rgbaColor2string(palette[5]);
+		case "plain": return rgbaColor2string(palette[5]);
+		default: return;
+	}
 };
+export { getTextColorWithPalette as a, getBorderColor as i, drawGradient as n, getBackgroundColor as r, drawBorder as t };

package/es/button/index.css

@@ -6,20 +6,12 @@
   z-index: -1;
   pointer-events: none;
 }
-button.px-button {
-  font-size: var(--text-size);
-}
 .px-button {
   --button-size: var(--px-medium-size);
-  --px-medium-padding-x: var(--px-interval-4);
-  --px-large-padding-x: var(--px-interval-5);
-  --px-small-padding-x: var(--px-interval-3);
-  --padding-x-size: var(--px-medium-padding-x);
   --text-color: var(--px-neutral-1);
-  --text-size: var(--px-medium-font-size);
   height: var(--button-size);
-  padding-left: var(--padding-x-size);
-  padding-right: var(--padding-x-size);
+  padding-left: 16px;
+  padding-right: 16px;
   background-color: transparent;
   border-color: transparent;
   border-width: var(--px-bit);
@@ -32,38 +24,46 @@ button.px-button {
   user-select: none;
   transition: 0.25s;
   z-index: 0;
-  font-size: var(--text-size);
   box-sizing: border-box;
 }
-.px-button__inner {
-  transition: color 0.25s;
-  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+.px-button.px-button {
+  font-size: 14px;
 }
-.px-button__inner:last-child {
-  padding-right: var(--padding-x-size);
+.px-button.px-button__small.px-button__inner {
+  padding-right: calc(12px + 1px + 1 * var(--px-bit));
 }
-.px-button__inner.px-button__text {
-  padding-right: var(--padding-x-size);
-  margin-right: calc(1px + 1 * var(--px-bit));
+.px-button.px-button__small.px-button__inner:last-child {
+  padding-right: 12px;
 }
-.px-button__inner.px-button__text:last-child {
-  margin-right: 0;
+.px-button.px-button__medium.px-button__inner {
+  padding-right: calc(16px + 1px + 1 * var(--px-bit));
+}
+.px-button.px-button__medium.px-button__inner:last-child {
+  padding-right: 16px;
+}
+.px-button.px-button__large.px-button__inner {
+  padding-right: calc(20px + 1px + 1 * var(--px-bit));
+}
+.px-button.px-button__large.px-button__inner:last-child {
+  padding-right: 20px;
 }
 .px-button__circle,
 .px-button__square {
   width: var(--button-size);
-  --padding-x-size: 0px;
+  padding: 0px;
   justify-content: center;
 }
 .px-button__large {
-  --padding-x-size: var(--px-large-padding-x);
+  padding-left: 20px;
+  padding-right: 20px;
   --button-size: var(--px-large-size);
-  --text-size: var(--px-large-font-size);
+  font-size: 15px;
 }
 .px-button__small {
-  --padding-x-size: var(--px-small-padding-x);
+  padding-left: 12px;
+  padding-right: 12px;
   --button-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
+  font-size: 15px;
 }
 .px-button__loading {
   cursor: auto;
@@ -77,16 +77,26 @@ button.px-button {
   cursor: not-allowed;
 }
 .px-button-icon-wrapper {
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
   display: flex;
   align-items: center;
 }
 .px-button-icon-wrapper__last {
   margin-right: 0;
 }
-.px-button-icon {
-  height: var(--text-size);
-  width: var(--text-size);
+.px-button.px-button__small .px-button-icon {
+  height: 12px;
+  width: 12px;
+  fill: var(--text-color);
+}
+.px-button.px-button__medium .px-button-icon {
+  height: 14px;
+  width: 14px;
+  fill: var(--text-color);
+}
+.px-button.px-button__large .px-button-icon {
+  height: 15px;
+  width: 15px;
   fill: var(--text-color);
 }
 .px-button.px-button__primary:focus-visible {