@toife/vue 3.0.4 → 3.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toife/vue",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "A Frontend framework for Vue",
   "type": "module",
   "sideEffects": false,

package/src/components/action/action.composable.ts

@@ -7,7 +7,6 @@ const visible = ref(false);
 export const useAction = () => {
   const open = (props: ActionComposableProps) => {
     data.value = props;
-    // Defer showing one frame so Present/transition hooks see a clean open cycle
     setTimeout(() => {
       visible.value = true;
     }, 50);

package/src/components/action/action.scss

@@ -4,7 +4,9 @@
 $action: sass.fn-naming-prefix("action");
 $button: sass.fn-naming-prefix("button");
 
-// Property name
+// Property name - layer: action
+$action-border-color: sass.fn-naming-var("action", "border-color");
+
 $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
 $width: sass.fn-naming-var("viewport", "width");
@@ -17,7 +19,6 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("action", "border-color");
 
 .#{$action} {
   // Styles
@@ -70,7 +71,7 @@ $border-color: sass.fn-naming-var("action", "border-color");
   &.divider {
     :deep(.#{$button}) {
       border-color: transparent;
-      border-bottom-color: rgb(#{$border-color});
+      border-bottom-color: rgb(#{$action-border-color});
     }
   }
 

package/src/components/app/app.scss

@@ -4,8 +4,8 @@
 $app: sass.fn-naming-prefix("app");
 
 // Property name - layer: app
-$background-color: sass.fn-naming-var("app", "background-color");
-$color: sass.fn-naming-var("app", "color");
+$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");
 
 .#{$app} {
@@ -13,8 +13,8 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   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(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$app-background-color});
+  color: rgb(#{$app-color});
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease,

package/src/components/avatar/avatar.scss

@@ -6,16 +6,19 @@ $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property - layer: avatar
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("avatar", "background-color");
+$border-width: sass.fn-naming-var("stroke", "width");
 $width: sass.fn-naming-var("width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
+$avatar-background-color: sass.fn-naming-var("avatar", "background-color");
+$avatar-border-color: sass.fn-naming-var("avatar", "border-color");
+
 // Avatar default is circle
 // With props square then is square
 .#{$avatar} {
   position: relative;
   overflow: hidden;
-  background-color: rgb(#{$background-color});
+  background-color: rgb(#{$avatar-background-color});
   width: #{$width};
   aspect-ratio: 1/1;
   border-radius: #{$border-radius};
@@ -28,8 +31,13 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     box-shadow #{$transition-duration} ease,
     border-radius #{$transition-duration} ease;
   display: inline-block;
+  border: #{$border-width} solid transparent;
 
   &.#{$shape-pill} {
     border-radius: 50%;
   }
+
+  &.divider {
+    border: #{$border-width} solid rgb(#{$avatar-border-color});
+  }
 }

package/src/components/avatar/avatar.type.ts

@@ -3,4 +3,6 @@ export type AvatarProps = {
   shape?: string;
   size?: string | number;
   src?: string;
+  role?: string;
+  divider?: boolean;
 };

package/src/components/avatar/avatar.vue

@@ -11,6 +11,8 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 const props = withDefaults(defineProps<AvatarProps>(), {
   size: "22px",
   src: "",
+  role: undefined,
+  divider: undefined,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
@@ -18,7 +20,10 @@ const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 // ----------------------------------------------------------------------------
 const avatarAttrs = computed(() => {
   const shape = props?.shape || appState?.shape.value || "";
-  const role = appState?.role.value || "";
+  const role = props?.role || appState?.role.value || "";
+  const divider = (props?.divider !== undefined ? props.divider : appState?.divider.value) ?? false;
+  const size = props.size + (typeof props.size === "number" ? "px" : "");
+  const backgroundImage = `url(${props.src})`;
 
   return {
     class: [
@@ -26,10 +31,13 @@ const avatarAttrs = computed(() => {
       withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("avatar"),
+      {
+        divider: divider,
+      },
     ],
     style: {
-      [property("width")]: props.size + (typeof props.size === "number" ? "px" : ""),
-      backgroundImage: `url(${props.src})`,
+      [property("width")]: size,
+      backgroundImage: backgroundImage,
     },
   };
 });

package/src/components/button/button.scss

@@ -11,14 +11,21 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
 
-$color: sass.fn-naming-var("button", "color");
+$button-color: sass.fn-naming-var("button", "color");
 
-$border-color: sass.fn-naming-var("button", "border-color");
-$border-color-hover: sass.fn-naming-var("button", "border-color", "strong");
-$border-color-focus: sass.fn-naming-var("button", "border-color", "heavy");
-$border-color-active: sass.fn-naming-var("button", "border-color", "heavy");
-$border-color-disabled: sass.fn-naming-var("button", "border-color");
-$border-color-inactive: sass.fn-naming-var("button", "border-color", "soft");
+$button-border-color: sass.fn-naming-var("button", "border-color");
+$button-border-color-hover: sass.fn-naming-var("button", "border-color", "hover");
+$button-border-color-focus: sass.fn-naming-var("button", "border-color", "focus");
+$button-border-color-active: sass.fn-naming-var("button", "border-color", "active");
+$button-border-color-disabled: sass.fn-naming-var("button", "border-color", "disabled");
+
+$button-background-color: sass.fn-naming-var("button", "background-color");
+$button-background-color-hover: sass.fn-naming-var("button", "background-color", "hover");
+$button-background-color-focus: sass.fn-naming-var("button", "background-color", "focus");
+$button-background-color-active: sass.fn-naming-var("button", "background-color", "active");
+$button-background-color-disabled: sass.fn-naming-var("button", "background-color", "disabled");
+
+$button-box-shadow-color-focus: sass.fn-naming-var("button", "box-shadow-color", "focus");
 
 $size-font-size: sass.fn-naming-var("font-size");
 $size-height: sass.fn-naming-var("height");
@@ -26,22 +33,15 @@ $size-coefficient-x: sass.fn-naming-var("coefficient-x");
 $size-coefficient-y: sass.fn-naming-var("coefficient-y");
 $size-line-height: sass.fn-naming-var("line-height");
 
-$background-color: sass.fn-naming-var("button", "background-color");
-$background-color-hover: sass.fn-naming-var("button", "background-color", "strong");
-$background-color-focus: sass.fn-naming-var("button", "background-color", "heavy");
-$background-color-active: sass.fn-naming-var("button", "background-color", "heavy");
-$background-color-disabled: sass.fn-naming-var("button", "background-color");
-$background-color-inactive: sass.fn-naming-var("button", "background-color", "soft");
-
 .#{$button} {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
-  color: rgb(#{$color});
-  background: rgb(#{$background-color});
-  border-color: rgb(#{$border-color});
+  color: rgb(#{$button-color});
+  background: rgb(#{$button-background-color});
+  border-color: rgb(#{$button-border-color});
   border-style: solid;
   border-width: #{$border-width};
   white-space: nowrap;
@@ -61,30 +61,30 @@ $background-color-inactive: sass.fn-naming-var("button", "background-color", "so
   line-height: #{$size-line-height};
 
   &:hover {
-    border-color: rgb(#{$border-color-hover});
-    background-color: rgb(#{$background-color-hover});
+    border-color: rgb(#{$button-border-color-hover});
+    background-color: rgb(#{$button-background-color-hover});
   }
 
   &.focus,
   &:focus {
-    border-color: rgb(#{$border-color-focus});
-    background-color: rgb(#{$background-color-focus});
+    border-color: rgb(#{$button-border-color-focus});
+    background-color: rgb(#{$button-background-color-focus});
 
     &.shadow {
-      box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+      box-shadow: 0 0 0 0.25rem rgb(#{$button-box-shadow-color-focus}, 0.25);
     }
   }
 
   &:active,
   &.active {
-    border-color: rgb(#{$border-color-active});
-    background-color: rgb(#{$background-color-active});
+    border-color: rgb(#{$button-border-color-active});
+    background-color: rgb(#{$button-background-color-active});
   }
 
   &:disabled,
   &.disabled {
-    border-color: rgba(#{$border-color-disabled}, 0.5);
-    background-color: rgba(#{$background-color-disabled}, 0.5);
+    border-color: rgba(#{$button-border-color-disabled}, 0.5);
+    background-color: rgba(#{$button-background-color-disabled}, 0.5);
     cursor: not-allowed;
   }
 

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

@@ -4,14 +4,15 @@
 $card: sass.fn-naming-prefix("card");
 
 // Property name - layer: card
-$background-color: sass.fn-naming-var("card", "background-color");
-$color: sass.fn-naming-var("card", "color");
+$card-background-color: sass.fn-naming-var("card", "background-color");
+$card-color: sass.fn-naming-var("card", "color");
+
 $border-radius: sass.fn-naming-var("border-radius");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$card} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$card-background-color});
+  color: rgb(#{$card-color});
   border-radius: #{$border-radius};
   transition:
     box-shadow #{$transition-duration} ease,

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

@@ -4,15 +4,15 @@
 $card-body: sass.fn-naming-prefix("card-body");
 
 // Property name - layer: card
-$background-color: sass.fn-naming-var("card", "background-color");
-$color: sass.fn-naming-var("card", "color");
+$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");
 
 .#{$card-body} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$card-background-color});
+  color: rgb(#{$card-color});
   padding: calc(#{$padding-y} * 4) calc(#{$padding-x} * 4);
   transition:
     box-shadow #{$transition-duration} ease,

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

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

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

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

package/src/components/checkbox/checkbox.html

@@ -1,7 +1,6 @@
 <div
   v-bind="checkboxAttrs"
   :tabindex="disabled ? -1 : 0"
-  role="checkbox"
   :aria-checked="props.modelValue"
   @click="onCheckbox"
   @focus="onFocus"

package/src/components/checkbox/checkbox.scss

@@ -7,16 +7,25 @@ $shape-rounded: sass.fn-naming-prefix("shape-rounded");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Properties - layer: item
-$background-color: sass.fn-naming-var("checkbox", "background-color");
-$background-color-hover: sass.fn-naming-var("checkbox", "background-color", "soft");
-$background-color-inactive: sass.fn-naming-var("checkbox", "background-color", "soft");
-$background-color-contrast: sass.fn-naming-var("checkbox", "background-color", "contrast");
-$background-color-disabled: sass.fn-naming-var("checkbox", "background-color", "subtle");
-
-$color: sass.fn-naming-var("checkbox", "color");
-
-$border-color: sass.fn-naming-var("checkbox", "border-color");
-$border-color-inactive: sass.fn-naming-var("checkbox", "border-color", "subtle");
+$checkbox-background-color-hover: sass.fn-naming-var("checkbox", "background-color", "hover");
+$checkbox-background-color-focus: sass.fn-naming-var("checkbox", "background-color", "focus");
+$checkbox-background-color-unchecked: sass.fn-naming-var(
+  "checkbox",
+  "background-color",
+  "unchecked"
+);
+$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-border-color-hover: sass.fn-naming-var("checkbox", "border-color", "hover");
+$checkbox-border-color-focus: sass.fn-naming-var("checkbox", "border-color", "focus");
+$checkbox-border-color-checked: sass.fn-naming-var("checkbox", "border-color", "checked");
+$checkbox-border-color-unchecked: sass.fn-naming-var("checkbox", "border-color", "unchecked");
+$checkbox-border-color-disabled: sass.fn-naming-var("checkbox", "border-color", "disabled");
+
+$checkbox-box-shadow-color-focus: sass.fn-naming-var("checkbox", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -37,7 +46,7 @@ $border-radius: sass.fn-naming-var("border-radius");
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$border-color-inactive});
+    border: 1px solid rgb(#{$checkbox-color});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -53,7 +62,7 @@ $border-radius: sass.fn-naming-var("border-radius");
       content: "";
       width: 0.2rem;
       height: 0.5rem;
-      border: solid rgb(#{$background-color-contrast});
+      border: solid rgb(#{$checkbox-color});
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
       transform-origin: center;
@@ -77,13 +86,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &:not(.on) {
     .#{$checkbox-icon} {
       background-color: transparent;
-      border-color: rgb(#{$border-color-inactive});
+      border-color: rgb(#{$checkbox-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$border-color});
-        background-color: rgba(#{$background-color-hover}, 0.2);
+        border-color: rgb(#{$checkbox-border-color-hover});
       }
     }
   }
@@ -91,8 +99,8 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.on {
     &.fill {
       .#{$checkbox-icon} {
-        background-color: rgb(#{$background-color});
-        border-color: rgb(#{$background-color});
+        background-color: rgb(#{$checkbox-background-color-checked});
+        border-color: rgb(#{$checkbox-border-color-checked});
 
         &::after {
           transform: rotate(45deg) scale(1);
@@ -102,11 +110,11 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.outline {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$background-color});
+        border-color: rgb(#{$checkbox-border-color-checked});
 
         &::after {
           transform: rotate(45deg) scale(1);
-          border-color: rgb(#{$background-color});
+          border-color: rgb(#{$checkbox-background-color-checked});
         }
       }
     }
@@ -118,8 +126,8 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.on {
       .#{$checkbox-icon} {
-        background-color: rgb(#{$background-color-disabled});
-        border-color: rgb(#{$background-color-disabled});
+        background-color: rgb(#{$checkbox-background-color-disabled});
+        border-color: rgb(#{$checkbox-border-color-disabled});
       }
     }
   }
@@ -131,8 +139,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.focus {
     &.shadow {
       .#{$checkbox-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$checkbox-box-shadow-color-focus}, 0.25);
       }
     }
+
+    .#{$checkbox-icon} {
+      border-color: rgb(#{$checkbox-border-color-focus});
+    }
   }
 }

package/src/components/checkbox/checkbox.vue

@@ -32,7 +32,7 @@ const checkboxAttrs = computed(() => {
   return {
     class: [
       withPrefix(["layer", "checkbox"]),
-      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("checkbox"),
       props.variant,
@@ -40,7 +40,7 @@ const checkboxAttrs = computed(() => {
         on: props.modelValue,
         disabled: props.disabled,
         readonly: props.readonly,
-        shadow,
+        shadow: shadow && !props.disabled && isFocused.value,
         focus: isFocused.value,
       },
     ],

package/src/components/collapse/collapse.scss

@@ -6,21 +6,21 @@ $collapse-trigger: sass.fn-naming-prefix("collapse-trigger");
 $collapse-content: sass.fn-naming-prefix("collapse-content");
 $collapse-content-inner: sass.fn-naming-prefix("collapse-content-inner");
 
-// Property
-$collapse-height: sass.fn-naming-dvar("collapse-height", 0);
+// Property name - layer: collapse
+$collapse-height: sass.fn-naming-dvar(("collapse", "height"), 0);
 $collapse-duration: sass.fn-naming-dvar(
-  "collapse-duration",
+  ("collapse", "duration"),
   sass.fn-naming-var("motion", "duration")
 );
 
-$background-color: sass.fn-naming-var("collapse", "background-color");
-$color: sass.fn-naming-var("collapse", "color");
+$collapse-background-color: sass.fn-naming-var("collapse", "background-color");
+$collapse-color: sass.fn-naming-var("collapse", "color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 // Collapse
 .#{$collapse} {
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
+  background-color: rgb(#{$collapse-background-color});
+  color: rgb(#{$collapse-color});
   transition:
     background-color #{$transition-duration} ease,
     color #{$transition-duration} ease;

package/src/components/decision-modal/decision-modal.scss

@@ -9,8 +9,10 @@ $button: sass.fn-naming-prefix("button");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Property name - layer: decision-modal
+$decision-modal-background-color: sass.fn-naming-var("decision-modal", "background-color");
+$decision-modal-border-color: sass.fn-naming-var("decision-modal", "border-color");
+
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("decision-modal", "background-color");
 $width: sass.fn-naming-var("viewport", "width");
 $max-width: sass.fn-naming-var("overlay", "max-width");
 $padding-y: sass.fn-naming-var("spacing", "y");
@@ -19,12 +21,11 @@ $margin-y: sass.fn-naming-var("spacing", "y");
 $margin-x: sass.fn-naming-var("spacing", "x");
 $animation-duration: sass.fn-naming-var("motion", "duration");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("decision-modal", "border-color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$decision-modal} {
   // Styles
-  background-color: rgb(#{$background-color});
+  background-color: rgb(#{$decision-modal-background-color});
   width: #{$width};
   max-width: #{$max-width};
   overflow: hidden;
@@ -103,7 +104,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   &.divider {
     .#{$decision-modal-header},
     .#{$decision-modal-footer} {
-      border-color: rgb(#{$border-color});
+      border-color: rgb(#{$decision-modal-border-color});
     }
   }
 

package/src/components/divider/divider.scss

@@ -3,8 +3,8 @@
 // Class
 $divider: sass.fn-naming-prefix("divider");
 
-// Property - layer: stroke
-$border-color: sass.fn-naming-var("divider", "border-color");
+// Property name - layer: divider
+$divider-border-color: sass.fn-naming-var("divider", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
@@ -19,11 +19,11 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   &.horizontal {
     width: 100%;
-    border-bottom: #{$border-width} solid rgb(#{$border-color});
+    border-bottom: #{$border-width} solid rgb(#{$divider-border-color});
   }
 
   &.vertical {
     height: 100%;
-    border-right: #{$border-width} solid rgb(#{$border-color});
+    border-right: #{$border-width} solid rgb(#{$divider-border-color});
   }
 }

package/src/components/field/outline/outline.scss

@@ -9,14 +9,15 @@ $field-help: sass.fn-naming-prefix("field-help");
 $field-direction-left: sass.fn-naming-prefix("direction", "left");
 $field-direction-right: sass.fn-naming-prefix("direction", "right");
 
-// Property name
+// Property name - layer: field
+$field-border-color: sass.fn-naming-var("field", "border-color");
+$field-background-color: sass.fn-naming-var("field", "background-color");
+$field-line: sass.fn-naming-var("field", "line");
+$field-max-line: sass.fn-naming-var("field", "max-line");
+
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("field", "border-color");
-$role-color: sass.fn-naming-var("field", "background-color");
 $app-color: sass.fn-naming-var("app", "color");
-$line: sass.fn-naming-var("field", "line");
-$max-line: sass.fn-naming-var("field", "max-line");
 
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $spacing-y: sass.fn-naming-var("spacing", "y");
@@ -41,7 +42,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
       background-color #{$transition-duration} ease,
       color #{$transition-duration} ease,
       border-radius #{$transition-duration} ease;
-    border-color: rgb(#{$border-color});
+    border-color: rgb(#{$field-border-color});
     border-radius: #{$border-radius};
     border-width: #{$border-width};
     border-style: solid;
@@ -58,8 +59,8 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     position: relative;
     background-color: transparent;
     z-index: 2;
-    min-height: calc(#{$line} * #{$size-height} - 2 * #{$border-width});
-    max-height: calc(#{$max-line} * #{$size-height} - 2 * #{$border-width});
+    min-height: calc(#{$field-line} * #{$size-height} - 2 * #{$border-width});
+    max-height: calc(#{$field-max-line} * #{$size-height} - 2 * #{$border-width});
     color: rgb(#{$app-color});
     caret-color: rgb(#{$app-color});
     border: none;
@@ -67,6 +68,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     font-size: #{$size-font-size};
     line-height: #{$size-line-height};
     box-sizing: border-box;
+    width: 100%;
     transition:
       box-shadow #{$transition-duration} ease,
       border-color #{$transition-duration} ease,
@@ -99,7 +101,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 
   // Message
   .#{$field-message} {
-    color: rgb(#{$role-color});
+    color: rgb(#{$field-background-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:
@@ -126,15 +128,15 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
   // State
   &.active {
     .#{$field-content} {
-      border-color: rgb(#{$border-color});
-      box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$border-color});
+      border-color: rgb(#{$field-border-color});
+      box-shadow: 0 0 0 calc(#{$border-width} * 1.5) rgb(#{$field-border-color});
     }
   }
 
   &.focus {
     &.shadow {
       .#{$field-content} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$field-border-color}, 0.25);
       }
     }
   }

package/src/components/gesture-indicator/gesture-indicator.scss

@@ -4,11 +4,11 @@
 $gesture-indicator: sass.fn-naming-prefix("gesture-indicator");
 
 // Property name - layer: gesture-indicator
-$border-color: sass.fn-naming-var("gesture-indicator", "border-color");
+$gesture-indicator-border-color: sass.fn-naming-var("gesture-indicator", "border-color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$gesture-indicator} {
-  background-color: rgb(#{$border-color});
+  background-color: rgb(#{$gesture-indicator-border-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

package/src/components/gesture-indicator/gesture-indicator.type.ts

@@ -1,4 +1,5 @@
 // Type definitions
 export type GestureIndicatorProps = {
   placement?: string;
+  role?: string;
 };

package/src/components/gesture-indicator/gesture-indicator.vue

@@ -10,13 +10,15 @@ import { type AppProviderState, APP_PROVIDER_STATE_KEY } from "../app";
 // ----------------------------------------------------------------------------
 const props = withDefaults(defineProps<GestureIndicatorProps>(), {
   placement: "bottom",
+  role: undefined,
 });
 const appState = inject<AppProviderState>(APP_PROVIDER_STATE_KEY);
 
 // Computed properties
 // ----------------------------------------------------------------------------
 const gestureIndicatorAttrs = computed(() => {
-  const role = appState?.role.value || "";
+  const role = props.role || appState?.role.value || "";
+
   return {
     class: [
       withPrefix(["layer", "gesture-indicator"]),

package/src/components/image/image.vue

@@ -1,4 +1,3 @@
-<style lang="scss" src="./image.scss" scoped></style>
 <template src="./image.html"></template>
 <script setup lang="ts">
 import { ref } from "vue";

package/src/components/modal/modal.scss

@@ -4,7 +4,7 @@
 $modal: sass.fn-naming-prefix("modal");
 
 // Property name - layer: modal
-$background-color: sass.fn-naming-var("modal", "background-color");
+$modal-background-color: sass.fn-naming-var("modal", "background-color");
 $viewport-width: sass.fn-naming-var("viewport", "width");
 $viewport-max-width: sass.fn-naming-var("viewport", "max-width");
 $viewport-height: sass.fn-naming-var("viewport", "height");
@@ -17,7 +17,7 @@ $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$modal} {
-  background: rgb(#{$background-color});
+  background: rgb(#{$modal-background-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

package/src/components/present/present.scss

@@ -9,8 +9,8 @@ $transition-duration: sass.fn-naming-dvar(
   ("transition", "duration"),
   sass.fn-naming-var("motion", "duration")
 );
-// layer: backdrop
-$backdrop-bg: sass.fn-naming-var("backdrop", "background-color");
+
+$backdrop-background-color: sass.fn-naming-var("backdrop", "background-color");
 $backdrop-opacity: sass.fn-naming-var("backdrop", "opacity");
 
 $present-translate-plus: sass.fn-naming-dvar(("translate"), "100%");
@@ -30,7 +30,7 @@ $present-opacity: sass.fn-naming-dvar(("present", "opacity"), 1);
     color #{$transition-duration} ease,
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
-  background-color: rgb(#{$backdrop-bg});
+  background-color: rgb(#{$backdrop-background-color});
   opacity: #{$backdrop-opacity};
 }
 

package/src/components/radio/radio/radio.scss

@@ -5,14 +5,21 @@ $radio: sass.fn-naming-prefix("radio");
 $radio-icon: sass.fn-naming-prefix("radio-icon");
 
 // Properties - layer: item
-$background-color: sass.fn-naming-var("radio", "background-color");
-$background-color-hover: sass.fn-naming-var("radio", "background-color", "subtle");
-$background-color-inactive: sass.fn-naming-var("radio", "background-color", "soft");
-$background-color-contrast: sass.fn-naming-var("radio", "background-color", "contrast");
-$background-color-disabled: sass.fn-naming-var("radio", "background-color", "subtle");
+$radio-background-color-hover: sass.fn-naming-var("radio", "background-color", "hover");
+$radio-background-color-focus: sass.fn-naming-var("radio", "background-color", "focus");
+$radio-background-color-unchecked: sass.fn-naming-var("radio", "background-color", "unchecked");
+$radio-background-color-checked: sass.fn-naming-var("radio", "background-color", "checked");
+$radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
 
-$border-color: sass.fn-naming-var("radio", "border-color");
-$border-color-inactive: sass.fn-naming-var("radio", "border-color", "subtle");
+$radio-color: sass.fn-naming-var("radio", "color");
+
+$radio-border-color-hover: sass.fn-naming-var("radio", "border-color", "hover");
+$radio-border-color-focus: sass.fn-naming-var("radio", "border-color", "focus");
+$radio-border-color-checked: sass.fn-naming-var("radio", "border-color", "checked");
+$radio-border-color-unchecked: sass.fn-naming-var("radio", "border-color", "unchecked");
+$radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disabled");
+
+$radio-box-shadow-color-focus: sass.fn-naming-var("radio", "box-shadow-color", "focus");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -33,7 +40,7 @@ $border-radius: sass.fn-naming-var("border-radius");
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgb(#{$border-color-inactive});
+    border: 1px solid rgb(#{$radio-color});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -50,8 +57,9 @@ $border-radius: sass.fn-naming-var("border-radius");
       width: 0.5rem;
       height: 0.5rem;
       border-radius: 50%;
-      background-color: rgb(#{$background-color-contrast});
+      background-color: rgb(#{$radio-color});
       transform: scale(0);
+      transform-origin: center;
       transition:
         transform #{$transition-duration} ease,
         background-color #{$transition-duration} ease,
@@ -63,13 +71,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &:not(.on) {
     .#{$radio-icon} {
       background-color: transparent;
-      border-color: rgb(#{$border-color-inactive});
+      border-color: rgb(#{$radio-border-color-unchecked});
     }
 
     &:not(.disabled):not(.readonly):hover {
       .#{$radio-icon} {
-        border-color: rgb(#{$border-color});
-        background-color: rgba(#{$background-color-hover}, 0.2);
+        border-color: rgb(#{$radio-border-color-hover});
       }
     }
   }
@@ -77,8 +84,8 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.on {
     &.fill {
       .#{$radio-icon} {
-        background-color: rgb(#{$background-color});
-        border-color: rgb(#{$background-color});
+        background-color: rgb(#{$radio-background-color-checked});
+        border-color: rgb(#{$radio-border-color-checked});
 
         &::after {
           transform: scale(1);
@@ -88,12 +95,11 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.outline {
       .#{$radio-icon} {
-        background-color: transparent;
-        border-color: rgb(#{$background-color});
+        border-color: rgb(#{$radio-border-color-checked});
 
         &::after {
-          transform: scale(1.5);
-          background-color: rgb(#{$background-color});
+          transform: scale(1);
+          background-color: rgb(#{$radio-background-color-checked});
         }
       }
     }
@@ -105,8 +111,8 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.on {
       .#{$radio-icon} {
-        background-color: rgb(#{$background-color-disabled});
-        border-color: rgb(#{$background-color-disabled});
+        background-color: rgb(#{$radio-background-color-disabled});
+        border-color: rgb(#{$radio-border-color-disabled});
       }
     }
   }
@@ -118,8 +124,12 @@ $border-radius: sass.fn-naming-var("border-radius");
   &.focus {
     &.shadow {
       .#{$radio-icon} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$radio-box-shadow-color-focus}, 0.25);
       }
     }
+
+    .#{$radio-icon} {
+      border-color: rgb(#{$radio-border-color-focus});
+    }
   }
 }

package/src/components/radio/radio/radio.vue

@@ -25,14 +25,6 @@ const isFocused = ref(false);
 
 // Computed properties
 // ----------------------------------------------------------------------------
-const role = computed(() => {
-  return props.role || radioGroupState?.role.value || appState?.role.value || "";
-});
-
-const variant = computed(() => {
-  return props.variant || radioGroupState?.variant.value || "";
-});
-
 const disabled = computed(() => {
   return props.disabled || (radioGroupState?.disabled.value ?? false);
 });
@@ -41,29 +33,23 @@ const readonly = computed(() => {
   return props.readonly || (radioGroupState?.readonly.value ?? false);
 });
 
-const isChecked = computed(() => {
-  return radioGroupState?.modelValue.value === props.value;
-});
-
 const radioAttrs = computed(() => {
-  const shadow =
-    (props?.shadow !== undefined ? props.shadow : radioGroupState?.shadow.value) ?? false;
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
+  const role = props.role || radioGroupState?.role.value || appState?.role.value || "";
+  const variant = props.variant || radioGroupState?.variant.value || "";
+  const isChecked = radioGroupState?.modelValue.value === props.value;
+
   return {
     class: [
       withPrefix(["layer", "radio"]),
-      withPrefix([
-        "role",
-        (isChecked.value && !disabled.value
-          ? role.value || radioGroupState?.role.value
-          : appState?.role.value) ?? "",
-      ]),
+      withPrefix(["role", role]),
       withPrefix("radio"),
-      variant.value,
+      variant,
       {
-        on: isChecked.value,
+        on: isChecked,
         disabled: disabled.value,
         readonly: readonly.value,
-        shadow,
+        shadow: shadow && !props.disabled && isFocused.value,
         focus: isFocused.value,
       },
     ],

package/src/components/segmented-field/segmented-field.scss

@@ -6,10 +6,11 @@ $segmented-field-content: sass.fn-naming-prefix("segmented-field-content");
 $segmented-field-message: sass.fn-naming-prefix("segmented-field-message");
 $segmented-field-help: sass.fn-naming-prefix("segmented-field-help");
 
-// Property name
+// Property name - layer: segmented-field
+$segmented-field-color: sass.fn-naming-var("segmented-field", "color");
+
 $spacing-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$role-color: sass.fn-naming-var("segmented-field", "background-color");
 $app-color: sass.fn-naming-var("app", "color");
 
 .#{$segmented-field-wrapper} {
@@ -20,7 +21,7 @@ $app-color: sass.fn-naming-var("app", "color");
 
   // Message
   .#{$segmented-field-message} {
-    color: rgb(#{$role-color});
+    color: rgb(#{$segmented-field-color});
     font-size: 0.9em;
     line-height: 1.5;
     transition:

package/src/components/skeleton/skeleton.scss

@@ -3,21 +3,21 @@
 // Classes
 $skeleton: sass.fn-naming-prefix("skeleton");
 
-// Properties - layer: skeleton
-$width: sass.fn-naming-var("skeleton", "width");
-$height: sass.fn-naming-var("skeleton", "height");
+// Property name - layer: skeleton
+$skeleton-width: sass.fn-naming-var("skeleton", "width");
+$skeleton-height: sass.fn-naming-var("skeleton", "height");
+$skeleton-background-color: sass.fn-naming-var("skeleton", "background-color");
+
 $border-radius: sass.fn-naming-var("border-radius");
-$background-color: sass.fn-naming-var("skeleton", "background-color");
-$background-color-subtle: sass.fn-naming-var("skeleton", "background-color", "subtle");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$skeleton} {
-  width: #{$width};
-  height: #{$height};
+  width: #{$skeleton-width};
+  height: #{$skeleton-height};
   position: relative;
   overflow: hidden;
   border-radius: #{$border-radius};
-  background-color: rgba(#{$background-color-subtle}, 0.2);
+  background-color: rgba(#{$skeleton-background-color}, 0.2);
   display: inline-block;
   line-height: 0;
   transition:
@@ -32,7 +32,12 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
     position: absolute;
     inset: 0;
     transform: translateX(-100%);
-    background: linear-gradient(90deg, transparent, rgba(#{$background-color}, 1), transparent);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(#{$skeleton-background-color}, 1),
+      transparent
+    );
     opacity: 0.2;
     animation: shimmer 1.2s infinite;
   }

package/src/components/switch/switch.html

@@ -1,7 +1,6 @@
 <div
   v-bind="switchWrapperAttrs"
   :tabindex="disabled ? -1 : 0"
-  role="switch"
   :aria-checked="props.modelValue"
   @click="onSwitch"
   @focus="onFocus"

package/src/components/switch/switch.scss

@@ -7,14 +7,17 @@ $shape-rounded: sass.fn-naming-prefix("shape-rounded");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 $switch-wrapper: sass.fn-naming-prefix("switch-wrapper");
 
-// Properties - switch track (inactive), switch icon (on)
-$background-color: sass.fn-naming-var("switch", "background-color");
-$background-color-hover: sass.fn-naming-var("switch", "background-color", "soft");
-$background-color-inactive: sass.fn-naming-var("switch", "background-color", "subtle");
-$background-color-disabled: sass.fn-naming-var("switch", "background-color", "subtle");
-$background-color-contrast: sass.fn-naming-var("switch", "background-color", "contrast");
-$border-color: sass.fn-naming-var("switch", "border-color");
-$color-hover: sass.fn-naming-var("switch", "color", "strong");
+// Property name - layer: switch (track + thumb; states like button + inactive)
+$switch-background-color-off: sass.fn-naming-var("switch", "background-color", "off");
+$switch-background-color-on: sass.fn-naming-var("switch", "background-color", "on");
+$switch-background-color-disabled: sass.fn-naming-var("switch", "background-color", "disabled");
+
+$switch-color-on: sass.fn-naming-var("switch", "color", "on");
+$switch-color-off: sass.fn-naming-var("switch", "color", "off");
+$switch-color-disabled: sass.fn-naming-var("switch", "color", "disabled");
+
+$switch-box-shadow-color-focus: sass.fn-naming-var("switch", "box-shadow-color", "focus");
+
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
 $spacing-x: sass.fn-naming-var("spacing", "x");
@@ -30,7 +33,6 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
     height: 1.5rem;
     aspect-ratio: 11/6;
     position: relative;
-    overflow: hidden;
     transition:
       background-color #{$transition-duration} ease,
       color #{$transition-duration} ease,
@@ -43,7 +45,6 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       height: calc(100% - 0.3rem);
       position: absolute;
       top: 0;
-      background-color: rgb(#{$background-color-contrast});
       border-radius: #{$border-radius};
       aspect-ratio: 1/1;
       margin: 0.15rem;
@@ -72,9 +73,13 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
     cursor: not-allowed;
 
     .#{$switch} {
-      background-color: rgb(#{$background-color-disabled});
+      background-color: rgb(#{$switch-background-color-disabled});
       cursor: not-allowed;
       opacity: 0.3;
+
+      .#{$switch-icon} {
+        background-color: rgb(#{$switch-color-disabled});
+      }
     }
   }
 
@@ -88,26 +93,24 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 
   &:not(.on) {
     .#{$switch} {
-      background-color: rgb(#{$background-color-inactive});
+      background-color: rgb(#{$switch-background-color-off});
 
       .#{$switch-icon} {
+        background-color: rgb(#{$switch-color-off});
         left: 0;
       }
-
-      &:not(.disabled):not(.readonly):hover {
-        background-color: rgb(#{$background-color-hover});
-      }
     }
   }
 
   &.on {
     .#{$switch} {
-      background-color: rgb(#{$background-color});
+      background-color: rgb(#{$switch-background-color-on});
 
       .#{$switch-icon} {
         right: 0;
         animation: shrink #{$transition-duration} linear;
         animation-fill-mode: forwards;
+        background-color: rgb(#{$switch-color-on});
       }
     }
   }
@@ -115,7 +118,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
   &.focus {
     &.shadow {
       .#{$switch} {
-        box-shadow: 0 0 0 0.25rem rgb(#{$border-color}, 0.25);
+        box-shadow: 0 0 0 0.25rem rgb(#{$switch-box-shadow-color-focus}, 0.25);
       }
     }
   }

package/src/components/switch/switch.vue

@@ -30,7 +30,7 @@ const switchWrapperAttrs = computed(() => {
       {
         disabled: props.disabled,
         readonly: props.readonly,
-        shadow,
+        shadow: shadow && !props.disabled && isFocused.value,
         focus: isFocused.value,
         on: props.modelValue,
       },
@@ -45,7 +45,7 @@ const switchAttrs = computed(() => {
   return {
     class: [
       withPrefix(["layer", "switch"]),
-      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["role", role]),
       withPrefix(["shape", shape]),
       withPrefix("switch"),
     ],

package/src/components/tabs/tabs/tabs.scss

@@ -5,19 +5,18 @@ $tabs: sass.fn-naming-prefix("tabs");
 $tab: sass.fn-naming-prefix("tab");
 $button: sass.fn-naming-prefix("button");
 
-// Property name
+// Property name - layer: tabs
+$tabs-color: sass.fn-naming-var("tabs", "color");
+$tabs-background-color: sass.fn-naming-var("tabs", "background-color");
+$tabs-border-color: sass.fn-naming-var("tabs", "border-color");
+
 $space-x: sass.fn-naming-var("spacing", "x");
 $space-y: sass.fn-naming-var("spacing", "y");
-
-// layer: tabs
-$button-color: sass.fn-naming-var("tabs", "color");
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
-$border-color: sass.fn-naming-var("tabs", "border-color");
-
 $transition-duration: sass.fn-naming-var("motion", "duration");
-$background-color: sass.fn-naming-var("tabs", "background-color");
 
+// layer: highlight (indicator geometry)
 $highlight-top: sass.fn-naming-var("highlight", "top");
 $highlight-left: sass.fn-naming-var("highlight", "left");
 $highlight-width: sass.fn-naming-var("highlight", "width");
@@ -54,7 +53,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     height: #{$highlight-height};
     transform: translate(#{$highlight-left}, #{$highlight-top});
     box-sizing: border-box;
-    background-color: rgb(#{$background-color});
+    background-color: rgb(#{$tabs-background-color});
     border-radius: #{$border-radius};
   }
 
@@ -114,25 +113,25 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     &.top-start,
     &.top-center,
     &.top-end {
-      border-bottom-color: rgb(#{$border-color});
+      border-bottom-color: rgb(#{$tabs-border-color});
     }
 
     &.bottom-start,
     &.bottom-center,
     &.bottom-end {
-      border-top-color: rgb(#{$border-color});
+      border-top-color: rgb(#{$tabs-border-color});
     }
 
     &.left-start,
     &.left-center,
     &.left-end {
-      border-right-color: rgb(#{$border-color});
+      border-right-color: rgb(#{$tabs-border-color});
     }
 
     &.right-start,
     &.right-center,
     &.right-end {
-      border-left-color: rgb(#{$border-color});
+      border-left-color: rgb(#{$tabs-border-color});
     }
   }
 
@@ -162,7 +161,7 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     :deep(.#{$tab}) {
       &.active {
         .#{$button} {
-          color: rgb(#{$button-color}) !important;
+          color: rgb(#{$tabs-color}) !important;
         }
       }
     }
@@ -196,8 +195,8 @@ $highlight-space-y: sass.fn-naming-var("highlight", "space-y");
     :deep(.#{$tab}) {
       &.active {
         .#{$button} {
-          color: rgb(#{$background-color});
-          text-shadow: 0 0 rgb(#{$background-color});
+          color: rgb(#{$tabs-background-color});
+          text-shadow: 0 0 rgb(#{$tabs-background-color});
         }
       }
     }

package/src/components/toast/toast-content/toast-content.scss

@@ -3,13 +3,13 @@
 // Class name
 $toastContent: sass.fn-naming-prefix("toast-content");
 
-// Properties
+// Property name - layer: toast
+$toast-background-color: sass.fn-naming-var("toast", "background-color");
+$toast-color: sass.fn-naming-var("toast", "color");
+$toast-border-color: sass.fn-naming-var("toast", "border-color");
+
 $space-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");
-// layer: toast-content
-$background-color: sass.fn-naming-var("toast", "background-color");
-$color: sass.fn-naming-var("toast", "color");
-$border-color: sass.fn-naming-var("toast", "border-color");
 $border-radius: sass.fn-naming-var("border-radius");
 $border-width: sass.fn-naming-var("stroke", "width");
 $max-height: sass.fn-naming-var("overlay", "max-height");
@@ -25,9 +25,9 @@ $max-height: sass.fn-naming-var("overlay", "max-height");
     border-radius #{$transition-duration} ease,
     opacity #{$transition-duration} ease;
 
-  background-color: rgb(#{$background-color});
-  color: rgb(#{$color});
-  border-color: rgb(#{$border-color});
+  background-color: rgb(#{$toast-background-color});
+  color: rgb(#{$toast-color});
+  border-color: rgb(#{$toast-border-color});
   border-width: #{$border-width};
   border-style: solid;
   max-height: #{$max-height};

package/src/components/toolbar/toolbar.scss

@@ -5,7 +5,7 @@ $toolbar: sass.fn-naming-prefix("toolbar");
 
 // Property name - layer: toolbar
 $toolbar-size: sass.fn-naming-var("toolbar", "size");
-$background-color: sass.fn-naming-var("toolbar", "background-color");
+$toolbar-background-color: sass.fn-naming-var("toolbar", "background-color");
 $safe-area-right: sass.fn-naming-var("safe-area", "right");
 $safe-area-left: sass.fn-naming-var("safe-area", "left");
 $safe-area-bottom: sass.fn-naming-var("safe-area", "bottom");
@@ -13,7 +13,7 @@ $safe-area-top: sass.fn-naming-var("safe-area", "top");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 .#{$toolbar} {
-  background-color: rgb(#{$background-color});
+  background-color: rgb(#{$toolbar-background-color});
   transition:
     box-shadow #{$transition-duration} ease,
     border-color #{$transition-duration} ease,

package/src/components/image/image.scss

@@ -1 +0,0 @@
-// Add styles here if needed