@pixelium/web-vue 0.0.1-beta → 0.0.2

package/es/auto-complete/type.d.ts

@@ -0,0 +1,192 @@
+import type { NumberOrPercentage } from '../share/type';
+import type { GroupOption, Option } from '../share/type';
+export interface AutoCompleteOption extends Option<string> {
+    value: string;
+    disabled?: boolean;
+}
+export interface AutoCompleteGroupOption extends GroupOption {
+    label: string;
+    key: string | number | symbol;
+    children: (AutoCompleteOption | string)[];
+}
+export type AutoCompleteProps = {
+    /**
+     * @property {string | null} [modelValue]
+     * @version 0.0.2
+     */
+    modelValue?: string | null;
+    /**
+     * @property {string | null} [defaultValue]
+     * @version 0.0.2
+     */
+    defaultValue?: string | null;
+    /**
+     * @property {string} [options]
+     * @version 0.0.2
+     */
+    options?: (string | AutoCompleteOption | AutoCompleteGroupOption)[];
+    /**
+     * @property {string} [placeholder]
+     * @version 0.0.2
+     */
+    placeholder?: string;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.2
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.2
+     */
+    readonly?: boolean;
+    /**
+     * @property {boolean} [clearable=false]
+     * @version 0.0.2
+     */
+    clearable?: boolean;
+    /**
+     * @property {boolean} [loading=false]
+     * @version 0.0.2
+     */
+    loading?: boolean;
+    /**
+     * @property {boolean} [showPopoverEmpty=false]
+     * @version 0.0.2
+     */
+    showPopoverEmpty?: boolean;
+    /**
+     * @property {(value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean} [shouldShowPopover]
+     * @version 0.0.2
+     */
+    shouldShowPopover?: (value: string, optionsFiltered: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => boolean;
+    /**
+     * @property {(keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[]} [filter]
+     * @version 0.0.2
+     */
+    filter?: (keyword: string, options: (string | AutoCompleteOption | AutoCompleteGroupOption)[]) => (string | AutoCompleteOption | AutoCompleteGroupOption)[];
+    /**
+     * @property {boolean} [append=false]
+     * @version 0.0.2
+     */
+    append?: boolean;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {'default' | 'round'} [shape='default']
+     * @version 0.0.2
+     */
+    shape?: 'default' | 'round';
+    /**
+     * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
+     * @version 0.0.2
+     */
+    borderRadius?: NumberOrPercentage | NumberOrPercentage[];
+    /**
+     * @property {'success' | 'warning' | 'error' | 'normal'} [status='normal']
+     * @version 0.0.2
+     */
+    status?: 'success' | 'warning' | 'error' | 'normal';
+    /**
+     * @property {boolean} [autofocus=false]
+     * @version 0.0.2
+     */
+    autofocus?: boolean;
+};
+export type AutoCompleteEvents = {
+    /**
+     * @event input
+     * @param {string} value
+     * @param {Event} e
+     * @version 0.0.2
+     */
+    input: [value: string, e: Event];
+    /**
+     * @event update:modelValue
+     * @param {string} value
+     * @version 0.0.2
+     */
+    'update:modelValue': [value: string];
+    /**
+     * @event change
+     * @param {string} value
+     * @param {Event | undefined} e
+     * @version 0.0.2
+     */
+    change: [value: string, e?: Event];
+    /**
+     * @event clear
+     * @param {string} value
+     * @version 0.0.2
+     */
+    clear: [value: string];
+    /**
+     * @event blur
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    blur: [e: FocusEvent];
+    /**
+     * @event focus
+     * @param {FocusEvent} e
+     * @version 0.0.2
+     */
+    focus: [e: FocusEvent];
+    /**
+     * @event select
+     * @param {string} value
+     * @param {string | AutoCompleteOption} option
+     * @param {MouseEvent} e
+     * @version 0.0.2
+     */
+    select: [value: string, option: string | AutoCompleteOption, e: MouseEvent];
+};
+export type AutoCompleteSlots = {
+    /**
+     * @slot prefix
+     * @version 0.0.2
+     */
+    prefix: {};
+    /**
+     * @slot suffix
+     * @version 0.0.2
+     */
+    suffix: {};
+    /**
+     * @slot option
+     * @param {string | AutoCompleteOption} option
+     * @version 0.0.2
+     */
+    option: {};
+    /**
+     * @slot group-label
+     * @param {AutoCompleteGroupOption} option
+     * @version 0.0.2
+     */
+    'group-label': {};
+};
+export type AutoCompleteExpose = {
+    /**
+     * @property {() => void} focus
+     * @version 0.0.2
+     */
+    focus: () => void;
+    /**
+     * @property {() => void} blur
+     * @version 0.0.2
+     */
+    blur: () => void;
+    /**
+     * @property {() => void} clear
+     * @version 0.0.2
+     */
+    clear: () => void;
+    /**
+     * @property {() => void} select
+     * @version 0.0.2
+     */
+    select: () => void;
+};

package/es/button/css.js

@@ -1,2 +1,2 @@
-import './index.css'
 import '../index.css'
+import './index.css'

package/es/button/draw.d.ts

@@ -4,6 +4,5 @@ export declare function getBackgroundColor(disabled: boolean, loading: boolean,
 export declare function getBorderColor(disabled: boolean, loading: boolean, type: ButtonProps['variant'], theme: ButtonProps['theme'], palette: RgbaColor[] | null, hoverFlag: boolean, activeFlag: boolean): RgbaColor;
 export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, type: ButtonProps["variant"], inner: boolean, first: boolean, last: boolean) => void;
 export declare function getGradientColor(disabled: boolean, loading: boolean, theme: ButtonProps['theme'], palette: RgbaColor[] | null, hoverFlag: boolean, activeFlag: boolean): RgbaColor;
-export declare const drawGradient: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], pixelSize: number, disabled: boolean, loading: boolean, type: ButtonProps["variant"], theme: ButtonProps["theme"], palette: RgbaColor[] | null, inner: boolean, first: boolean, last: boolean, hoverFlag: boolean, activeFlag: boolean) => void;
-export declare const getBorderRadius: (canvas: HTMLCanvasElement, pixelSize: number, borderRadius: ButtonProps["borderRadius"], shape: ButtonProps["shape"], inner: boolean, first: boolean, last: boolean) => number[];
+export declare const drawGradient: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], pixelSize: number, disabled: boolean, loading: boolean, theme: ButtonProps["theme"], palette: RgbaColor[] | null, inner: boolean, first: boolean, last: boolean, hoverFlag: boolean, activeFlag: boolean) => void;
 export declare const getTextColorWithPalette: (palette: RgbaColor[] | null, type: ButtonProps["variant"], disabled: boolean, loading: boolean, hoverFlag: boolean, activeFlag: boolean) => string | undefined;

package/es/button/draw.js

@@ -1,7 +1,6 @@
-import { $, k } from "../aside/index.js";
 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 { d as drawCircle } from "../share/util/plot.js";
+import { e as calcWhenLeaveBaseline, d as drawCircle } from "../share/util/plot.js";
 function getBackgroundColor(disabled, loading, type, theme = "primary", palette, hoverFlag, activeFlag) {
   if (palette) {
     switch (type) {
@@ -79,7 +78,7 @@ function getBorderColor(disabled, loading, type, theme = "primary", palette, hov
         if (hoverFlag && !loading) return palette[2];
         return palette[1];
       case "outline":
-        if (disabled) return palette[1];
+        if (disabled) return palette[0];
         if (activeFlag) return palette[6];
         if (hoverFlag && !loading) return palette[4];
         return palette[5];
@@ -128,11 +127,19 @@ function getBorderColor(disabled, loading, type, theme = "primary", palette, hov
   }
 }
 const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, type, inner, first, last) => {
-  ctx.fillStyle = `rgba(${borderColor.r}, ${borderColor.g}, ${borderColor.b}, ${borderColor.a / 255})`;
+  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);
+        drawCircle(
+          ctx,
+          center[i][0],
+          center[i][1],
+          borderRadius[i],
+          rad[i][0],
+          rad[i][1],
+          pixelSize
+        );
       }
     }
   }
@@ -140,10 +147,20 @@ const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor,
     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);
+    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);
+    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]) {
@@ -174,129 +191,95 @@ function getGradientColor(disabled, loading, theme = "primary", palette, hoverFl
   if (hoverFlag && !loading) return getGlobalThemeColor("neutral", 4);
   return getGlobalThemeColor("neutral", 3);
 }
-function calcDx(pixelSize, borderRadius) {
-  return Math.ceil((-6 + Math.sqrt(36 - 48 * pixelSize + 32 * pixelSize * borderRadius)) / (8 * pixelSize)) * pixelSize;
-}
-const drawGradient = (ctx, width, height, center, borderRadius, rad, pixelSize, disabled, loading, type, theme = "primary", palette, inner, first, last, hoverFlag, activeFlag) => {
-  const dxBottomRight = calcDx(pixelSize, borderRadius[2]);
-  const dxBottomLeft = calcDx(pixelSize, borderRadius[3]);
-  const dxTopRight = calcDx(pixelSize, borderRadius[1]);
-  const dxTopLeft = calcDx(pixelSize, borderRadius[0]);
-  const innerFlag = +!(inner && !first && type !== "text");
+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 = `rgba(${barColor.r}, ${barColor.g}, ${barColor.b}, ${barColor.a / 255})`;
-    for (let i = 1; i < 3; i++) {
-      borderRadius[i] > pixelSize && drawCircle(ctx, center[i][0] - pixelSize, center[i][1], borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+    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;
-    barLenX > 0 && ctx.fillRect(center[3][0] - dxBottomLeft * innerFlag, height - pixelSize * 2, barLenX, pixelSize);
+    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);
+    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 = `rgba(${barColor.r}, ${barColor.g}, ${barColor.b}, ${barColor.a / 255})`;
-    borderRadius[0] > pixelSize && drawCircle(ctx, center[0][0] + pixelSize, center[0][1], borderRadius[0], rad[0][0], rad[0][1], pixelSize);
-    borderRadius[3] > pixelSize && drawCircle(ctx, center[3][0] + pixelSize, center[3][1], borderRadius[3], rad[3][0], rad[3][1], pixelSize);
-    const barLenX = center[1][0] + pixelSize - center[0][0] + dxTopRight + dxTopLeft * innerFlag;
+    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 transformSizeValue = (canvas, value, pixelSize) => {
-  if (k(value)) {
-    return Math.max(value, pixelSize);
-  } else {
-    return Math.max(canvas.height * parseFloat(value) / 100, pixelSize);
-  }
-};
-const fillArr = (val) => Array(4).fill(val);
-const getRadiusFromValue = (canvas, value, pixelSize) => {
-  if (!value) return fillArr(pixelSize);
-  if (!$(value)) {
-    return fillArr(transformSizeValue(canvas, value, pixelSize));
-  }
-  switch (value.length) {
-    case 1:
-      return fillArr(transformSizeValue(canvas, value[0], pixelSize));
-    case 2: {
-      const tl = transformSizeValue(canvas, value[0], pixelSize);
-      const tr = transformSizeValue(canvas, value[1], pixelSize);
-      return [tl, tr, tl, tr];
-    }
-    case 3: {
-      const tl = transformSizeValue(canvas, value[0], pixelSize);
-      const br = transformSizeValue(canvas, value[2], pixelSize);
-      const rest = transformSizeValue(canvas, value[1], pixelSize);
-      return [tl, rest, br, rest];
-    }
-    default:
-      return value.map((e) => transformSizeValue(canvas, e, pixelSize));
-  }
-};
-const getInnerRadius = (canvas, value, pixelSize, first, last) => {
-  if (!value) return fillArr(pixelSize);
-  if (!$(value)) {
-    const v = transformSizeValue(canvas, value, pixelSize);
-    if (last) return [pixelSize, v, v, pixelSize];
-    if (first) return [v, pixelSize, pixelSize, v];
-    return fillArr(pixelSize);
-  }
-  switch (value.length) {
-    case 1:
-      const v = transformSizeValue(canvas, value[0], pixelSize);
-      if (last) return [pixelSize, v, v, pixelSize];
-      if (first) return [v, pixelSize, pixelSize, v];
-      return fillArr(pixelSize);
-    case 2: {
-      const tl = transformSizeValue(canvas, value[0], pixelSize);
-      const tr = transformSizeValue(canvas, value[1], pixelSize);
-      if (last) return [pixelSize, tr, tr, pixelSize];
-      if (first) return [tl, pixelSize, pixelSize, tl];
-      return fillArr(pixelSize);
-    }
-    case 3: {
-      const tl = transformSizeValue(canvas, value[0], pixelSize);
-      const br = transformSizeValue(canvas, value[2], pixelSize);
-      const rest = transformSizeValue(canvas, value[1], pixelSize);
-      if (last) return [pixelSize, rest, br, pixelSize];
-      if (first) return [tl, pixelSize, pixelSize, rest];
-      return fillArr(pixelSize);
-    }
-    default:
-      if (last) return [pixelSize, transformSizeValue(canvas, value[1], pixelSize), transformSizeValue(canvas, value[2], pixelSize), pixelSize];
-      if (first) return [transformSizeValue(canvas, value[0], pixelSize), pixelSize, pixelSize, transformSizeValue(canvas, value[3], pixelSize)];
-      return fillArr(pixelSize);
-  }
-};
-const getBorderRadius = (canvas, pixelSize, borderRadius, shape, inner, first, last) => {
-  if (!inner) {
-    if (borderRadius) {
-      return getRadiusFromValue(canvas, borderRadius, pixelSize);
-    }
-    switch (shape) {
-      case "round":
-      case "circle":
-        return fillArr(transformSizeValue(canvas, "50%", pixelSize));
-      default:
-        return fillArr(pixelSize);
-    }
-  } else {
-    if (borderRadius) {
-      return getInnerRadius(canvas, borderRadius, pixelSize, first, last);
-    }
-    switch (shape) {
-      case "round":
-        const roundArr = fillArr(transformSizeValue(canvas, "50%", pixelSize));
-        if (last) return roundArr.map((e, i) => i < 1 || i > 2 ? pixelSize : e);
-        if (first) return roundArr.map((e, i) => i > 0 && i < 3 ? pixelSize : e);
-        return fillArr(pixelSize);
-      default:
-        return fillArr(pixelSize);
-    }
-  }
-};
 const getTextColorWithPalette = (palette, type, disabled, loading, hoverFlag, activeFlag) => {
   if (!palette || type === "primary") return void 0;
   if (disabled) {
@@ -317,10 +300,9 @@ const getTextColorWithPalette = (palette, type, disabled, loading, hoverFlag, ac
   }
 };
 export {
-  getBorderRadius as a,
-  getBorderColor as b,
-  drawBorder as c,
+  getBorderColor as a,
+  drawBorder as b,
+  getBackgroundColor as c,
   drawGradient as d,
-  getBackgroundColor as e,
   getTextColorWithPalette as g
 };

package/es/button/index.css

@@ -6,16 +6,24 @@
   z-index: -1;
   pointer-events: none;
 }
+button.px-button {
+  font-size: var(--text-size);
+}
 .px-button {
   --button-size: var(--px-medium-size);
-  --padding-x-size: 16px;
+  --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);
   background-color: transparent;
   border-color: transparent;
   border-width: var(--px-bit);
+  border-style: solid;
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -24,18 +32,21 @@
   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__inner:last-of-type {
+.px-button__inner:last-child {
   padding-right: var(--padding-x-size);
 }
 .px-button__inner.px-button__text {
   padding-right: var(--padding-x-size);
   margin-right: calc(1px + 1 * var(--px-bit));
 }
-.px-button__inner.px-button__text:last-of-type {
+.px-button__inner.px-button__text:last-child {
   margin-right: 0;
 }
 .px-button__circle,
@@ -45,12 +56,14 @@
   justify-content: center;
 }
 .px-button__large {
-  --padding-x-size: 24px;
+  --padding-x-size: var(--px-large-padding-x);
   --button-size: var(--px-large-size);
+  --text-size: var(--px-large-font-size);
 }
 .px-button__small {
-  --padding-x-size: 12px;
+  --padding-x-size: var(--px-small-padding-x);
   --button-size: var(--px-small-size);
+  --text-size: var(--px-small-font-size);
 }
 .px-button__loading {
   cursor: auto;
@@ -64,7 +77,7 @@
   cursor: not-allowed;
 }
 .px-button-icon-wrapper {
-  margin-right: 8px;
+  margin-right: var(--px-interval-2);
   display: flex;
   align-items: center;
 }
@@ -72,13 +85,10 @@
   margin-right: 0;
 }
 .px-button-icon {
-  height: 14px;
-  width: 14px;
+  height: var(--text-size);
+  width: var(--text-size);
   fill: var(--text-color);
 }
-.px-button-icon__loading {
-  animation: px-icon-spin 1s linear infinite;
-}
 .px-button.px-button__primary:focus-visible {
   outline-color: var(--px-primary-6);
   outline-offset: var(--px-bit);
@@ -337,7 +347,7 @@
   outline-offset: var(--px-bit);
 }
 .px-button.px-button__info.px-button__disabled {
-  --text-color: var(--px-neutral-6);
+  --text-color: var(--px-neutral-7);
 }
 .px-button.px-button__info.px-button__text,
 .px-button.px-button__info.px-button__plain,
@@ -347,7 +357,7 @@
 .px-button.px-button__info.px-button__text.px-button__disabled,
 .px-button.px-button__info.px-button__plain.px-button__disabled,
 .px-button.px-button__info.px-button__outline.px-button__disabled {
-  --text-color: var(--px-neutral-6);
+  --text-color: var(--px-neutral-7);
 }
 .px-button.px-button__info.px-button__text:active.px-button__disabled,
 .px-button.px-button__info.px-button__plain:active.px-button__disabled,
@@ -355,7 +365,7 @@
 .px-button.px-button__info.px-button__text:hover.px-button__disabled,
 .px-button.px-button__info.px-button__plain:hover.px-button__disabled,
 .px-button.px-button__info.px-button__outline:hover.px-button__disabled {
-  --text-color: var(--px-neutral-6);
+  --text-color: var(--px-neutral-7);
 }
 .px-button.px-button__info.px-button__text:active.px-button__loading,
 .px-button.px-button__info.px-button__plain:active.px-button__loading,