@toife/vue 3.1.4 → 3.1.6

package/README.md

@@ -55,7 +55,7 @@ Usage docs live **next to source** under `src/`. Authoring scaffold: [docs/templ
 |-----|----------|
 | [element.md](src/utils/element.md) | `isFormElement`, `blurCurrentActive` |
 | [events.md](src/utils/events.md) | `preventDefault` |
-| [style.md](src/utils/style.md) | `withPrefix`, `property`, `variable`, … |
+| [style.md](src/utils/style.md) | `stylePrefix`, `property`, `variable`, … |
 
 ## Requirements
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.1.4",
+  "version": "3.1.6",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,
@@ -23,7 +23,7 @@
     "frontend",
     "web"
   ],
-  "author": "Toivibe",
+  "author": "lamtoi",
   "license": "MIT",
   "publishConfig": {
     "access": "public",
@@ -46,8 +46,8 @@
   "devDependencies": {
     "@commitlint/cli": "^20.4.4",
     "@commitlint/config-conventional": "^20.4.4",
-    "@toife/gesture": "^1.1.5",
-    "@toife/sass-layer": "^1.0.2",
+    "@toife/gesture": "^1.1.6",
+    "@toife/sass-layer": "^1.1.2",
     "@types/node": "^25.0.3",
     "@vitejs/plugin-vue": "^6.0.1",
     "husky": "^9.1.7",

package/src/components/action/action.scss

@@ -13,7 +13,7 @@ $width: sass.fn-naming-var("viewport", "width");
 $max-width: sass.fn-naming-var("overlay", "max-width");
 $height: sass.fn-naming-var("viewport", "height");
 $max-height: sass.fn-naming-var("overlay", "max-height");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
 $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
@@ -71,7 +71,7 @@ $border-width: sass.fn-naming-var("stroke", "width");
   &.divider {
     :deep(.#{$button}) {
       border-color: transparent;
-      border-bottom-color: rgb(#{$action-border-color});
+      border-bottom-color: rgba(#{$action-border-color});
     }
   }
 

package/src/components/action/action.vue

@@ -6,7 +6,7 @@ import { Present } from "../present";
 import { Button as CustomButton } from "../button";
 import { FormGroup } from "../form-group";
 import { type ActionEmit, type ActionButton, type ActionProps } from "./action.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -36,10 +36,10 @@ const actionAttrs = computed(() => {
   const role = props.role ?? appState?.role.value ?? "";
   return {
     class: [
-      withPrefix("action"),
-      withPrefix(["layer", "action"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
+      cssPrefix("action"),
+      cssPrefix(["layer", "action"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
       props.placement,
       {
         pop: pop.value,

package/src/components/app/app.scss

@@ -6,15 +6,15 @@ $app: sass.fn-naming-prefix("app");
 // Property name - layer: app
 $app-background-color: sass.fn-naming-var("app", "background-color");
 $app-color: sass.fn-naming-var("app", "color");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$app} {
   width: #{sass.fn-naming-var("viewport", "width")};
   max-width: #{sass.fn-naming-var("viewport", "max-width")};
   height: #{sass.fn-naming-var("viewport", "height")};
   max-height: #{sass.fn-naming-var("viewport", "max-height")};
-  background-color: rgb(#{$app-background-color});
-  color: rgb(#{$app-color});
+  background-color: rgba(#{$app-background-color});
+  color: rgba(#{$app-color});
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease,

package/src/components/app/app.type.ts

@@ -5,11 +5,6 @@ import type { Ref } from "vue";
  */
 export type AppDirection = "left" | "right";
 
-/**
- * App Size Type
- */
-export type AppSize = "small" | "standard" | "large";
-
 /**
  * App Props Type
  */
@@ -20,7 +15,6 @@ export type AppProps = {
   shadow?: boolean;
   triple?: boolean;
   direction?: AppDirection;
-  size?: AppSize;
 };
 
 /**

package/src/components/app/app.vue

@@ -1,7 +1,7 @@
 <style lang="scss" src="./app.scss" scoped></style>
 <template src="./app.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { computed, provide, toRefs } from "vue";
 import { Toast } from "../toast";
 import { Action, useAction } from "../action";
@@ -18,7 +18,6 @@ const props = withDefaults(defineProps<AppProps>(), {
   shadow: false,
   triple: false,
   direction: "left",
-  size: "standard",
 });
 const { shape, divider, role, shadow, triple, direction } = toRefs(props);
 const decisionModal = useDecisionModal();
@@ -29,12 +28,7 @@ const action = useAction();
 // Root layout classes for the application shell (global theme layer)
 const appAttrs = computed(() => {
   return {
-    class: [
-      withPrefix("app"),
-      withPrefix(["layer", "app"]),
-      withPrefix(["shape", shape.value]),
-      withPrefix(["size", props.size]),
-    ],
+    class: [cssPrefix("app"), cssPrefix(["layer", "app"]), cssPrefix(["shape", shape.value])],
   };
 });
 

package/src/components/avatar/avatar.scss

@@ -9,7 +9,7 @@ $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
 $width: sass.fn-naming-var("width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 $avatar-background-color: sass.fn-naming-var("avatar", "background-color");
 $avatar-border-color: sass.fn-naming-var("avatar", "border-color");
@@ -19,12 +19,13 @@ $avatar-border-color: sass.fn-naming-var("avatar", "border-color");
 .#{$avatar} {
   position: relative;
   overflow: hidden;
-  background-color: rgb(#{$avatar-background-color});
+  background-color: rgba(#{$avatar-background-color});
   width: #{$width};
   aspect-ratio: 1/1;
   border-radius: calc(min(#{$width}, #{$radius-size}) * #{$radius-ratio});
   background-repeat: no-repeat;
   background-size: cover;
+  background-position: center;
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease,
@@ -39,6 +40,6 @@ $avatar-border-color: sass.fn-naming-var("avatar", "border-color");
   }
 
   &.divider {
-    border: #{$border-width} solid rgb(#{$avatar-border-color});
+    border: #{$border-width} solid rgba(#{$avatar-border-color});
   }
 }

package/src/components/avatar/avatar.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject } from "vue";
 import { type AvatarProps } from "./avatar.type";
-import { property, withPrefix } from "../../utils";
+import { cssProperty, cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -27,16 +27,16 @@ const avatarAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "avatar"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("avatar"),
+      cssPrefix(["layer", "avatar"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("avatar"),
       {
         divider: divider,
       },
     ],
     style: {
-      [property("width")]: size,
+      [cssProperty("width")]: size,
       backgroundImage: backgroundImage,
     },
   };

package/src/components/button/button.scss

@@ -8,7 +8,7 @@ $loader: sass.fn-naming-prefix("loader");
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $border-width: sass.fn-naming-var("stroke", "width");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 
@@ -41,9 +41,9 @@ $size-line-height: sass.fn-naming-var("line-height");
   align-items: center;
   position: relative;
   overflow: hidden;
-  color: rgb(#{$button-color});
-  background: rgb(#{$button-background-color});
-  border-color: rgb(#{$button-border-color});
+  color: rgba(#{$button-color});
+  background: rgba(#{$button-background-color});
+  border-color: rgba(#{$button-border-color});
   border-style: solid;
   border-width: #{$border-width};
   white-space: nowrap;
@@ -62,32 +62,40 @@ $size-line-height: sass.fn-naming-var("line-height");
   height: #{$size-control-block-size};
   line-height: #{$size-line-height};
 
-  &:hover {
-    border-color: rgb(#{$button-border-color-hover});
-    background-color: rgb(#{$button-background-color-hover});
+  // Text variant
+  &.text {
+    background-color: transparent;
+    border-color: transparent;
+    color: rgba(#{$button-background-color});
   }
 
-  &.focus,
-  &:focus {
-    border-color: rgb(#{$button-border-color-focus});
-    background-color: rgb(#{$button-background-color-focus});
+  // Fill variant
+  &.fill:hover {
+    border-color: rgba(#{$button-border-color-hover});
+    background-color: rgba(#{$button-background-color-hover});
+  }
+
+  &.fill.focus,
+  &.fill:focus {
+    border-color: rgba(#{$button-border-color-focus});
+    background-color: rgba(#{$button-background-color-focus});
 
     &.shadow {
-      box-shadow: 0 0 0 0.25rem rgb(#{$button-box-shadow-color-focus}, 0.25);
+      box-shadow: 0 0 0 0.25rem rgba(#{$button-box-shadow-color-focus}, 0.25);
     }
   }
 
-  &:active,
-  &.active {
-    border-color: rgb(#{$button-border-color-active});
-    background-color: rgb(#{$button-background-color-active});
+  &.fill:active,
+  &.fill.active {
+    border-color: rgba(#{$button-border-color-active});
+    background-color: rgba(#{$button-background-color-active});
   }
 
-  &:disabled,
-  &.disabled {
-    border-color: rgb(#{$button-border-color-disabled});
-    background-color: rgb(#{$button-background-color-disabled});
-    color: rgb(#{$button-color-disabled});
+  &.fill:disabled,
+  &.fill.disabled {
+    border-color: rgba(#{$button-border-color-disabled});
+    background-color: rgba(#{$button-background-color-disabled});
+    color: rgba(#{$button-color-disabled});
     cursor: not-allowed;
   }
 

package/src/components/button/button.type.ts

@@ -1,9 +1,7 @@
-import { AppSize } from "../app";
-
 // Type definitions
-export type ButtonVariant = "fill" | "outline" | "text" | "link";
+export type ButtonVariant = "fill" | "outline" | "text";
 
-export type ButtonSize = AppSize;
+export type ButtonSize = string;
 
 export type ButtonProps = {
   role?: string;

package/src/components/button/button.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from "vue";
 import { type ButtonProps } from "./button.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 
 // Component setup (props, emits, injects)
@@ -30,11 +30,11 @@ const buttonAttrs = computed(() => {
 
   return {
     class: [
-      withPrefix(["layer", "button"]),
-      withPrefix(["role", role]),
-      withPrefix(["shape", shape]),
-      withPrefix("button"),
-      withPrefix(["size", props.size]),
+      cssPrefix(["layer", "button"]),
+      cssPrefix(["role", role]),
+      cssPrefix(["shape", shape]),
+      cssPrefix("button"),
+      cssPrefix(["size", props.size]),
       props.variant,
       {
         block: props.block,
@@ -46,7 +46,7 @@ const buttonAttrs = computed(() => {
 });
 
 const loaderAttrs = {
-  class: [withPrefix("loader")],
+  class: [cssPrefix("loader")],
 } as const;
 
 // Methods

package/src/components/cable/cable.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, provide, toRefs } from "vue";
 import { type CableProviderState, type CableProps } from "./cable.type";
-import { withPrefix } from "../../utils";
+import { cssPrefix } from "../../utils";
 import { CABLE_PROVIDER_STATE_KEY } from "./cable.constants";
 
 // Component setup (props, emits, injects)
@@ -21,7 +21,7 @@ const { placement } = toRefs(props);
 // ----------------------------------------------------------------------------
 const cableAttrs = computed(() => {
   return {
-    class: [withPrefix(["layer", "cable"]), withPrefix("cable"), placement.value],
+    class: [cssPrefix(["layer", "cable"]), cssPrefix("cable"), placement.value],
   };
 });
 

package/src/components/card/card/card.scss

@@ -9,12 +9,12 @@ $card-color: sass.fn-naming-var("card", "color");
 
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $border-radius: calc(#{$radius-size} * #{$radius-ratio});
 
 .#{$card} {
-  background-color: rgb(#{$card-background-color});
-  color: rgb(#{$card-color});
+  background-color: rgba(#{$card-background-color});
+  color: rgba(#{$card-color});
   border-radius: #{$border-radius};
   transition:
     box-shadow #{$transition-duration} ease,

package/src/components/card/card/card.vue

@@ -3,7 +3,7 @@
 <script lang="ts" setup>
 import { computed, inject, provide } from "vue";
 import { type CardProps, type CardProviderState } from "./card.type";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../../app";
 import { CARD_PROVIDER_STATE_KEY } from "./card.constants";
 
@@ -33,10 +33,10 @@ const role = computed(() => {
 const cardAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "card"]),
-      withPrefix(["role", role.value]),
-      withPrefix(["shape", shape.value]),
-      withPrefix("card"),
+      cssPrefix(["layer", "card"]),
+      cssPrefix(["role", role.value]),
+      cssPrefix(["shape", shape.value]),
+      cssPrefix("card"),
       {
         divider: divider.value,
       },

package/src/components/card/card-body/card-body.scss

@@ -8,11 +8,11 @@ $card-background-color: sass.fn-naming-var("card", "background-color");
 $card-color: sass.fn-naming-var("card", "color");
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$card-body} {
-  background-color: rgb(#{$card-background-color});
-  color: rgb(#{$card-color});
+  background-color: rgba(#{$card-background-color});
+  color: rgba(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   transition:
     box-shadow #{$transition-duration} ease,

package/src/components/card/card-body/card-body.vue

@@ -1,9 +1,9 @@
 <style lang="scss" src="./card-body.scss"></style>
 <template src="./card-body.html"></template>
 <script lang="ts" setup>
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 
 const cardBodyAttrs = {
-  class: [withPrefix("card-body")],
+  class: [cssPrefix("card-body")],
 } as const;
 </script>

package/src/components/card/card-footer/card-footer.scss

@@ -12,11 +12,11 @@ $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$card-footer} {
-  background-color: rgb(#{$card-background-color});
-  color: rgb(#{$card-color});
+  background-color: rgba(#{$card-background-color});
+  color: rgba(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   border-top: #{$border};
   transition:
@@ -27,6 +27,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     border-radius #{$transition-duration} ease;
 
   &.divider {
-    border-color: rgb(#{$card-border-color});
+    border-color: rgba(#{$card-border-color});
   }
 }

package/src/components/card/card-footer/card-footer.vue

@@ -2,7 +2,7 @@
 <template src="./card-footer.html"></template>
 <script lang="ts" setup>
 import { computed, inject } from "vue";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
 
 // Component setup (props, emits, injects)
@@ -15,7 +15,7 @@ const cardFooterAttrs = computed(() => {
   const divider = cardProviderState?.divider.value ?? false;
   return {
     class: [
-      withPrefix("card-footer"),
+      cssPrefix("card-footer"),
       {
         divider,
       },

package/src/components/card/card-header/card-header.scss

@@ -12,11 +12,11 @@ $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 
 .#{$card-header} {
-  background-color: rgb(#{$card-background-color});
-  color: rgb(#{$card-color});
+  background-color: rgba(#{$card-background-color});
+  color: rgba(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   border-bottom: #{$border};
   transition:
@@ -27,6 +27,6 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     border-radius #{$transition-duration} ease;
 
   &.divider {
-    border-color: rgb(#{$card-border-color});
+    border-color: rgba(#{$card-border-color});
   }
 }

package/src/components/card/card-header/card-header.vue

@@ -2,7 +2,7 @@
 <template src="./card-header.html"></template>
 <script lang="ts" setup>
 import { computed, inject } from "vue";
-import { withPrefix } from "../../../utils";
+import { cssPrefix } from "../../../utils";
 import { type CardProviderState, CARD_PROVIDER_STATE_KEY } from "../card";
 
 // Component setup (props, emits, injects)
@@ -15,7 +15,7 @@ const cardHeaderAttrs = computed(() => {
   const divider = cardProviderState?.divider.value ?? false;
   return {
     class: [
-      withPrefix("card-header"),
+      cssPrefix("card-header"),
       {
         divider,
       },

package/src/components/checkbox/checkbox.html

@@ -2,7 +2,7 @@
   v-bind="checkboxAttrs"
   :tabindex="disabled ? -1 : 0"
   :aria-checked="props.modelValue"
-  @click="onCheckbox"
+  @pointerup="onCheckbox"
   @focus="onFocus"
   @blur="onBlur"
   @keydown="onKeydown"

package/src/components/checkbox/checkbox.scss

@@ -17,7 +17,11 @@ $checkbox-background-color-unchecked: sass.fn-naming-var(
 $checkbox-background-color-checked: sass.fn-naming-var("checkbox", "background-color", "checked");
 $checkbox-background-color-disabled: sass.fn-naming-var("checkbox", "background-color", "disabled");
 
-$checkbox-color: sass.fn-naming-var("checkbox", "color");
+$checkbox-color-checked: sass.fn-naming-var("checkbox", "color", "checked");
+$checkbox-color-unchecked: sass.fn-naming-var("checkbox", "color", "unchecked");
+$checkbox-color-hover: sass.fn-naming-var("checkbox", "color", "hover");
+$checkbox-color-focus: sass.fn-naming-var("checkbox", "color", "focus");
+$checkbox-color-disabled: sass.fn-naming-var("checkbox", "color", "disabled");
 
 $checkbox-border-color-hover: sass.fn-naming-var("checkbox", "border-color", "hover");
 $checkbox-border-color-focus: sass.fn-naming-var("checkbox", "border-color", "focus");
@@ -27,7 +31,7 @@ $checkbox-border-color-disabled: sass.fn-naming-var("checkbox", "border-color",
 
 $checkbox-box-shadow-color-focus: sass.fn-naming-var("checkbox", "box-shadow-color", "focus");
 
-$transition-duration: sass.fn-naming-var("motion", "duration");
+$transition-duration: sass.fn-naming-var("duration");
 $radius-ratio: sass.fn-naming-var("radius-ratio");
 $radius-size: sass.fn-naming-var("radius-size");
 $size-control-mark-size: sass.fn-naming-var("control-mark-size");
@@ -49,7 +53,7 @@ $border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radiu
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$checkbox-color});
+    border: 1px solid transparent;
     background-color: transparent;
     border-radius: #{$border-radius};
     transition:
@@ -65,7 +69,7 @@ $border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radiu
       content: "";
       width: calc(#{$size-control-mark-size} * 0.2);
       height: calc(#{$size-control-mark-size} * 0.5);
-      border: solid rgb(#{$checkbox-color});
+      border: solid rgba(#{$checkbox-color-unchecked});
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
       transform-origin: center;
@@ -81,12 +85,12 @@ $border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radiu
   &:not(.on) {
     .#{$checkbox-icon} {
       background-color: transparent;
-      border-color: rgb(#{$checkbox-border-color-unchecked});
+      border-color: rgba(#{$checkbox-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$checkbox-border-color-hover});
+        border-color: rgba(#{$checkbox-border-color-hover});
       }
     }
   }
@@ -94,22 +98,23 @@ $border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radiu
   &.on {
     &.fill {
       .#{$checkbox-icon} {
-        background-color: rgb(#{$checkbox-background-color-checked});
-        border-color: rgb(#{$checkbox-border-color-checked});
+        background-color: rgba(#{$checkbox-background-color-checked});
+        border-color: rgba(#{$checkbox-border-color-checked});
 
         &::after {
           transform: rotate(45deg) scale(1);
+          border-color: rgba(#{$checkbox-color-checked});
         }
       }
     }
 
     &.outline {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$checkbox-border-color-checked});
+        border-color: rgba(#{$checkbox-border-color-checked});
 
         &::after {
           transform: rotate(45deg) scale(1);
-          border-color: rgb(#{$checkbox-background-color-checked});
+          border-color: rgba(#{$checkbox-background-color-checked});
         }
       }
     }
@@ -121,8 +126,8 @@ $border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radiu
 
     &.on {
       .#{$checkbox-icon} {
-        background-color: rgb(#{$checkbox-background-color-disabled});
-        border-color: rgb(#{$checkbox-border-color-disabled});
+        background-color: rgba(#{$checkbox-background-color-disabled});
+        border-color: rgba(#{$checkbox-border-color-disabled});
       }
     }
   }
@@ -134,12 +139,12 @@ $border-radius: calc(min(#{$size-control-mark-size}, #{$radius-size}) * #{$radiu
   &.focus {
     &.shadow {
       .#{$checkbox-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$checkbox-box-shadow-color-focus}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgba(#{$checkbox-box-shadow-color-focus}, 0.25);
       }
     }
 
     .#{$checkbox-icon} {
-      border-color: rgb(#{$checkbox-border-color-focus});
+      border-color: rgba(#{$checkbox-border-color-focus});
     }
   }
 }

package/src/components/checkbox/checkbox.type.ts

@@ -1,7 +1,5 @@
-import { AppSize } from "../app";
-
 export type CheckboxVariant = "fill" | "outline";
-export type CheckboxSize = AppSize;
+export type CheckboxSize = string;
 
 export type CheckboxProps = {
   modelValue?: boolean;