fix: toggle chip style refresh (#247)

aotearoan · Dec 26, 2024 · d9bc7b4 · d9bc7b4
1 parent 8fdfbf2
commit d9bc7b4
Show file tree

Hide file tree

Showing 8 changed files with 596 additions and 583 deletions.
diff --git a/src/app/config/enums.json b/src/app/config/enums.json
diff --git a/src/app/config/models.json b/src/app/config/models.json
diff --git a/src/app/config/utils.json b/src/app/config/utils.json
diff --git a/src/components/user-input/toggle-chip/NeonToggleChip.ts b/src/components/user-input/toggle-chip/NeonToggleChip.ts
@@ -1,4 +1,4 @@
-import { computed, defineComponent, useAttrs } from 'vue';
+import { computed, defineComponent, ref, useAttrs } from 'vue';
 import { NeonToggleChipSize } from '@/common/enums/NeonToggleChipSize';
 import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
 import NeonIcon from '@/components/presentation/icon/NeonIcon.vue';
@@ -51,8 +51,11 @@ export default defineComponent({
   ],
   setup(props, { emit }) {
     const attrs = useAttrs();
+    const toggleChipLabel = ref<HTMLLabelElement | null>(null);
+
     const emitInput = (value: boolean) => {
       emit('update:modelValue', value);
+      toggleChipLabel.value?.blur();
     };
 
     const sanitizedAttributes = computed(() => {
@@ -69,6 +72,7 @@ export default defineComponent({
 
     return {
       sanitizedAttributes,
+      toggleChipLabel,
       emitInput,
       toggleChip,
     };

diff --git a/src/components/user-input/toggle-chip/NeonToggleChip.vue b/src/components/user-input/toggle-chip/NeonToggleChip.vue
@@ -1,5 +1,6 @@
 <template>
   <label
+    ref="toggleChipLabel"
     :aria-disabled="disabled"
     :aria-pressed="modelValue"
     :class="[

diff --git a/src/sass/components/_chip.scss b/src/sass/components/_chip.scss
@@ -47,12 +47,12 @@
           $neon-chip-rgb: var(--neon-rgb-#{$color});
           $neon-chip-color: var(--neon-color-#{$color});
           border: var(--neon-border-width) var(--neon-border-style) $neon-chip-color;
-          background-color: rgba($neon-chip-rgb, var(--neon-opacity-toggle-chip));
+          background-color: rgba($neon-chip-rgb, var(--neon-opacity-chip));
           @include svg.color-with-svg($neon-chip-color);
 
           &:focus,
           &:hover {
-            background-color: rgba($neon-chip-rgb, calc(2 * var(--neon-opacity-toggle-chip)));
+            background-color: rgba($neon-chip-rgb, calc(2 * var(--neon-opacity-chip)));
           }
         }
 

diff --git a/src/sass/components/_toggle-chip.scss b/src/sass/components/_toggle-chip.scss
@@ -23,31 +23,31 @@
     width: fit-content;
     cursor: pointer;
     border: var(--neon-border-width-toggle-chip) var(--neon-border-style);
-    border-radius: var(--neon-border-radius);
+    border-radius: var(--neon-border-radius-toggle-chip);
     transition: width ease-in-out var(--neon-animation-speed-fast), background-color ease-in-out var(--neon-animation-speed-fast);
     border-color: var(--neon-border-color-toggle-chip);
-    background-color: rgba(var(--neon-border-rgb-toggle-chip), var(--neon-opacity-toggle-chip));
-    color: rgba(var(--neon-rgb-text), 0.667);
-
-    &:not(.neon-toggle-chip--disabled) {
-      &:focus,
-      &:hover {
-        background-color: rgba(var(--neon-border-rgb-toggle-chip), calc(2 * var(--neon-opacity-toggle-chip-hover)));
-      }
-    }
+    background-color: var(--neon-background-color-toggle-chip);
+    font-weight: var(--neon-font-weight-toggle-chip);
 
     @each $color in palettes.$neon-functional-colors {
       &--#{$color}:not(.neon-toggle-chip--disabled) {
+        color: var(--neon-color-#{$color});
+
+        &:focus,
+        &:hover {
+          background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-toggle-chip-hover));
+        }
+
         &.neon-toggle-chip--checked {
           border-color: var(--neon-color-#{$color});
-          background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-toggle-chip));
-          @include svg.color-with-svg(var(--neon-color-#{$color}));
+          background-color: var(--neon-color-#{$color});
+          @include svg.color-with-svg(var(--neon-color-toggle-chip-text-checked));
         }
 
         &.neon-toggle-chip--checked {
           &:focus,
           &:hover {
-            background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-toggle-chip-hover));
+            background-color: rgba(var(--neon-rgb-#{$color}), var(--neon-opacity-toggle-chip-hover-checked));
           }
         }
       }

diff --git a/src/sass/variables.scss b/src/sass/variables.scss
@@ -212,6 +212,14 @@
 
   /* chips */
   --neon-border-radius-chip: var(--neon-border-radius);
+  --neon-opacity-chip: 0.23;
+
+  /* toggle chips */
+  --neon-font-weight-toggle-chip: var(--neon-font-weight-bold);
+  --neon-border-width-toggle-chip: 1rem;
+  --neon-border-radius-toggle-chip: 2rem;
+  --neon-opacity-toggle-chip-hover: 0.125;
+  --neon-opacity-toggle-chip-hover-checked: 0.85;
 
   /* scrollbars */
   --neon-width-scrollbar: 8rem;
@@ -571,8 +579,8 @@
     --neon-color-toggle-chip-text: var(--neon-color-text);
     --neon-border-rgb-toggle-chip: var(--neon-rgb-neutral-d3);
     --neon-border-color-toggle-chip: var(--neon-color-neutral-d3);
-    --neon-opacity-toggle-chip: 0.23;
-    --neon-opacity-toggle-chip-hover: 0.33;
+    --neon-background-color-toggle-chip: transparent;
+    --neon-color-toggle-chip-text-checked: var(--neon-color-inverse);
 
     /* slider & range slider */
     --neon-color-slider-track: var(--neon-color-neutral-d3);
@@ -878,8 +886,8 @@
     --neon-color-toggle-chip-text: var(--neon-color-text);
     --neon-border-rgb-toggle-chip: var(--neon-rgb-neutral-l3);
     --neon-border-color-toggle-chip: var(--neon-color-neutral-l3);
-    --neon-opacity-toggle-chip: 0.23;
-    --neon-opacity-toggle-chip-hover: 0.33;
+    --neon-background-color-toggle-chip: transparent;
+    --neon-color-toggle-chip-text-checked: var(--neon-color-inverse);
 
     /* slider & range slider */
     --neon-color-slider-track: var(--neon-color-neutral-l4);