@toife/vue 3.0.4 → 3.0.5

package/package.json

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

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,7 +6,7 @@ $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");
+$avatar-background-color: sass.fn-naming-var("avatar", "background-color");
 $width: sass.fn-naming-var("width");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
@@ -15,7 +15,7 @@ $transition-duration: sass.fn-naming-var("motion", "duration");
 .#{$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};

package/src/components/button/button.scss

@@ -11,14 +11,19 @@ $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");
 
 $size-font-size: sass.fn-naming-var("font-size");
 $size-height: sass.fn-naming-var("height");
@@ -26,22 +31,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 +59,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-border-color}, 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,16 @@ $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");
+$checkbox-background-color: sass.fn-naming-var("checkbox", "background-color");
+$checkbox-background-color-hover: sass.fn-naming-var("checkbox", "background-color", "hover");
+$checkbox-background-color-inactive: sass.fn-naming-var("checkbox", "background-color", "inactive");
+$checkbox-background-color-contrast: sass.fn-naming-var("checkbox", "background-color", "contrast");
+$checkbox-background-color-disabled: sass.fn-naming-var("checkbox", "background-color", "disabled");
 
-$color: sass.fn-naming-var("checkbox", "color");
+$checkbox-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-border-color: sass.fn-naming-var("checkbox", "border-color");
+$checkbox-border-color-inactive: sass.fn-naming-var("checkbox", "border-color", "inactive");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -37,7 +37,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-border-color-inactive});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -53,7 +53,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-background-color-contrast});
       border-width: 0 2px 2px 0;
       transform: rotate(45deg) scale(0);
       transform-origin: center;
@@ -77,13 +77,13 @@ $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-inactive});
     }
 
     &: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});
+        background-color: rgba(#{$checkbox-background-color-hover}, 0.2);
       }
     }
   }
@@ -91,8 +91,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});
+        border-color: rgb(#{$checkbox-background-color});
 
         &::after {
           transform: rotate(45deg) scale(1);
@@ -102,11 +102,11 @@ $border-radius: sass.fn-naming-var("border-radius");
 
     &.outline {
       .#{$checkbox-icon} {
-        border-color: rgb(#{$background-color});
+        border-color: rgb(#{$checkbox-background-color});
 
         &::after {
           transform: rotate(45deg) scale(1);
-          border-color: rgb(#{$background-color});
+          border-color: rgb(#{$checkbox-background-color});
         }
       }
     }
@@ -118,8 +118,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-background-color-disabled});
       }
     }
   }
@@ -131,7 +131,7 @@ $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-border-color}, 0.25);
       }
     }
   }

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;
@@ -99,7 +100,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 +127,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/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

@@ -4,15 +4,20 @@
 $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");
-
-$border-color: sass.fn-naming-var("radio", "border-color");
-$border-color-inactive: sass.fn-naming-var("radio", "border-color", "subtle");
+// Property name - layer: radio (states align with button + checkbox: inactive + contrast)
+$radio-background-color: sass.fn-naming-var("radio", "background-color");
+$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-active: sass.fn-naming-var("radio", "background-color", "active");
+$radio-background-color-disabled: sass.fn-naming-var("radio", "background-color", "disabled");
+$radio-background-color-contrast: sass.fn-naming-var("radio", "background-color", "contrast");
+
+$radio-border-color: sass.fn-naming-var("radio", "border-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-active: sass.fn-naming-var("radio", "border-color", "active");
+$radio-border-color-disabled: sass.fn-naming-var("radio", "border-color", "disabled");
+$radio-border-color-inactive: sass.fn-naming-var("radio", "border-color", "inactive");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");
@@ -33,7 +38,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-border-color-inactive});
     background-color: transparent;
     transition:
       box-shadow #{$transition-duration} ease,
@@ -50,7 +55,7 @@ $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-background-color-contrast});
       transform: scale(0);
       transition:
         transform #{$transition-duration} ease,
@@ -63,13 +68,13 @@ $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-inactive});
     }
 
     &: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});
+        background-color: rgba(#{$radio-background-color-hover}, 0.2);
       }
     }
   }
@@ -77,8 +82,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});
+        border-color: rgb(#{$radio-background-color});
 
         &::after {
           transform: scale(1);
@@ -89,11 +94,11 @@ $border-radius: sass.fn-naming-var("border-radius");
     &.outline {
       .#{$radio-icon} {
         background-color: transparent;
-        border-color: rgb(#{$background-color});
+        border-color: rgb(#{$radio-background-color});
 
         &::after {
           transform: scale(1.5);
-          background-color: rgb(#{$background-color});
+          background-color: rgb(#{$radio-background-color});
         }
       }
     }
@@ -105,8 +110,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,7 +123,7 @@ $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-border-color-focus}, 0.25);
       }
     }
   }

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,15 @@ $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: sass.fn-naming-var("switch", "background-color");
+$switch-background-color-hover: sass.fn-naming-var("switch", "background-color", "hover");
+$switch-background-color-inactive: sass.fn-naming-var("switch", "background-color", "inactive");
+$switch-background-color-disabled: sass.fn-naming-var("switch", "background-color", "disabled");
+$switch-background-color-contrast: sass.fn-naming-var("switch", "background-color", "contrast");
+
+$switch-border-color-focus: sass.fn-naming-var("switch", "border-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");
@@ -43,7 +44,7 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
       height: calc(100% - 0.3rem);
       position: absolute;
       top: 0;
-      background-color: rgb(#{$background-color-contrast});
+      background-color: rgb(#{$switch-background-color-contrast});
       border-radius: #{$border-radius};
       aspect-ratio: 1/1;
       margin: 0.15rem;
@@ -72,7 +73,7 @@ $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;
     }
@@ -88,21 +89,21 @@ $spacing-x: sass.fn-naming-var("spacing", "x");
 
   &:not(.on) {
     .#{$switch} {
-      background-color: rgb(#{$background-color-inactive});
+      background-color: rgb(#{$switch-background-color-inactive});
 
       .#{$switch-icon} {
         left: 0;
       }
 
       &:not(.disabled):not(.readonly):hover {
-        background-color: rgb(#{$background-color-hover});
+        background-color: rgb(#{$switch-background-color-hover});
       }
     }
   }
 
   &.on {
     .#{$switch} {
-      background-color: rgb(#{$background-color});
+      background-color: rgb(#{$switch-background-color});
 
       .#{$switch-icon} {
         right: 0;
@@ -115,7 +116,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-border-color-focus}, 0.25);
       }
     }
   }

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