@citizenplane/pimp 10.0.8 → 10.1.0

package/src/assets/css/typography.css

@@ -0,0 +1,109 @@
+:root {
+  --cp-letter-spacing-xs: 0;
+  --cp-letter-spacing-sm: 0;
+  --cp-letter-spacing-md: 0;
+  --cp-letter-spacing-lg: 0;
+  --cp-letter-spacing-xl: 0;
+  --cp-letter-spacing-2xl: 0;
+  --cp-letter-spacing-3xl: 0;
+  --cp-letter-spacing-4xl: 0;
+  --cp-letter-spacing-5xl: 0;
+  --cp-letter-spacing-6xl: 0;
+  --cp-letter-spacing-7xl: 0;
+  --cp-letter-spacing-8xl: 0;
+  --cp-letter-spacing-9xl: 0;
+
+  --cp-line-height-xs: 1rem;
+  --cp-line-height-sm: 1.25rem;
+  --cp-line-height-md: 1.5rem;
+  --cp-line-height-lg: 1.75rem;
+  --cp-line-height-xl: 1.875rem;
+  --cp-line-height-2xl: 2rem;
+  --cp-line-height-3xl: 2.25rem;
+  --cp-line-height-4xl: 2.5rem;
+  --cp-line-height-5xl: 3.5rem;
+  --cp-line-height-6xl: 4.5rem;
+  --cp-line-height-7xl: 5rem;
+  --cp-line-height-8xl: 6rem;
+  --cp-line-height-9xl: 8rem;
+
+  --cp-text-size-xs: 0.75em;
+  --cp-text-size-sm: 0.875em;
+  --cp-text-size-md: 1em;
+  --cp-text-size-lg: 1.125em;
+  --cp-text-size-xl: 1.25em;
+  --cp-text-size-2xl: 1.5em;
+  --cp-text-size-3xl: 1.875em;
+  --cp-text-size-4xl: 2.25em;
+  --cp-text-size-5xl: 3em;
+  --cp-text-size-6xl: 3.75em;
+  --cp-text-size-7xl: 4.5em;
+  --cp-text-size-8xl: 6em;
+  --cp-text-size-9xl: 8em;
+
+  --cp-text-xs: var(--cp-size-xs);
+  --cp-text-xs-line-height: var(--cp-line-height-xs);
+  --cp-text-xs-letter-spacing: var(--cp-letter-spacing-xs);
+
+  --cp-text-sm: var(--cp-size-sm);
+  --cp-text-sm-line-height: var(--cp-line-height-sm);
+  --cp-text-sm-letter-spacing: var(--cp-letter-spacing-sm);
+
+  --cp-text-md: var(--cp-size-md);
+  --cp-text-md-line-height: var(--cp-line-height-md);
+  --cp-text-md-letter-spacing: var(--cp-letter-spacing-md);
+
+  --cp-text-lg: var(--cp-size-lg);
+  --cp-text-lg-line-height: var(--cp-line-height-lg);
+  --cp-text-lg-letter-spacing: var(--cp-letter-spacing-lg);
+
+  --cp-text-xl: var(--cp-size-xl);
+  --cp-text-xl-line-height: var(--cp-line-height-xl);
+  --cp-text-xl-letter-spacing: var(--cp-letter-spacing-xl);
+
+  --cp-text-2xl: var(--cp-size-2xl);
+  --cp-text-2xl-line-height: var(--cp-line-height-2xl);
+  --cp-text-2xl-letter-spacing: var(--cp-letter-spacing-2xl);
+
+  --cp-text-3xl: var(--cp-size-3xl);
+  --cp-text-3xl-line-height: var(--cp-line-height-3xl);
+  --cp-text-3xl-letter-spacing: var(--cp-letter-spacing-3xl);
+
+  --cp-text-4xl: var(--cp-size-4xl);
+  --cp-text-4xl-line-height: var(--cp-line-height-4xl);
+  --cp-text-4xl-letter-spacing: var(--cp-letter-spacing-4xl);
+
+  --cp-text-5xl: var(--cp-size-5xl);
+  --cp-text-5xl-line-height: var(--cp-line-height-5xl);
+  --cp-text-5xl-letter-spacing: var(--cp-letter-spacing-5xl);
+
+  --cp-text-6xl: var(--cp-size-6xl);
+  --cp-text-6xl-line-height: var(--cp-line-height-6xl);
+  --cp-text-6xl-letter-spacing: var(--cp-letter-spacing-6xl);
+
+  --cp-text-7xl: var(--cp-size-7xl);
+  --cp-text-7xl-line-height: var(--cp-line-height-7xl);
+  --cp-text-7xl-letter-spacing: var(--cp-letter-spacing-7xl);
+
+  --cp-text-8xl: var(--cp-size-8xl);
+  --cp-text-8xl-line-height: var(--cp-line-height-8xl);
+  --cp-text-8xl-letter-spacing: var(--cp-letter-spacing-8xl);
+
+  --cp-text-9xl: var(--cp-size-9xl);
+  --cp-text-9xl-line-height: var(--cp-line-height-9xl);
+  --cp-text-9xl-letter-spacing: var(--cp-letter-spacing-9xl);
+
+  /* monospace text-size styles */
+
+  --cp-monospace-xs: var(--cp-size-xs);
+  --cp-monospace-xs-line-height: var(--cp-line-height-xs);
+  --cp-monospace-xs-letter-spacing: var(--cp-letter-spacing-xs);
+
+  --cp-monospace-sm-font-light: var(--cp-size-sm);
+  --cp-monospace-sm-line-height: var(--cp-line-height-sm);
+  --cp-monospace-sm-letter-spacing: var(--cp-letter-spacing-sm);
+
+  --cp-monospace-md-font-light: var(--cp-size-md);
+  --cp-monospace-md-line-height: var(--cp-line-height-md);
+  --cp-monospace-md-letter-spacing: var(--cp-letter-spacing-md);
+}

package/src/assets/main.css

@@ -2,6 +2,6 @@
 @import './css/colors.css';
 @import './css/dimensions.css';
 @import './css/shadows.css';
-@import './css/spacing.css';
+@import './css/typography.css';
 @import './css/easings.css';
 @import './css/tokens.css';

package/src/assets/styles/helpers/_functions.scss

@@ -17,8 +17,8 @@ $base-size: 16;
 
 @function v($var, $fallback: null) {
   @if ($fallback) {
-    @return var(--pimp-#{$var}, #{$fallback});
+    @return var(--cp-#{$var}, #{$fallback});
   } @else {
-    @return var(--pimp-#{$var});
+    @return var(--cp-#{$var});
   }
 }

package/src/assets/styles/helpers/_mixins.scss

@@ -45,7 +45,7 @@
 @mixin v-dropdown-transition() {
   .v-popper__wrapper {
     transition:
-      scale 200ms easings.$easing-elastic,
+      scale 200ms var(--cp-easing-elastic),
       opacity 200ms ease;
   }
 

package/src/assets/styles/utilities/_index.scss

@@ -1,8 +1,5 @@
-@use '../variables/colors' as colors;
 @use '../helpers/functions' as fn;
 
-@use 'sass:color';
-
 .u-text-ellipsis,
 %u-text-ellipsis {
   white-space: nowrap;
@@ -23,7 +20,7 @@
 
 legend .u-asterisk,
 label .u-asterisk {
-  color: colors.$error-color;
+  color: var(--cp-text-error-primary);
 }
 
 // Accessibility
@@ -34,7 +31,7 @@ label .u-asterisk {
   &:focus-visible {
     position: relative;
     z-index: 2;
-    outline: fn.px-to-rem(2) solid colors.$primary-color;
+    outline: fn.px-to-rem(2) solid var(--cp-border-accent-solid);
   }
 }
 
@@ -48,7 +45,7 @@ label .u-asterisk {
     radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
 
   background-attachment: local, local, scroll, scroll;
-  background-color: fn.v(background-primary);
+  background-color: var(--cp-background-primary);
   background-position:
     0 0,
     100%,

package/src/components/BaseInputLabel.vue

@@ -2,14 +2,14 @@
   <label class="baseInputLabel" v-bind="$attrs" :class="{ 'baseInputLabel--isInvalid': isInvalid }">
     <transition name="scale-elastic">
       <div v-if="isInvalid" class="baseInputLabel__iconWrapper">
-        <cp-icon type="alert-circle" class="baseInputLabel__invalidIcon" />
+        <cp-icon class="baseInputLabel__invalidIcon" type="alert-circle" />
       </div>
     </transition>
     <div class="baseInputLabel__content">
       <slot />
       <span v-if="required" class="u-asterisk"> *</span>
       <cp-tooltip v-if="tooltip" :content="tooltip">
-        <button type="button" class="baseInputLabel__tooltip">
+        <button class="baseInputLabel__tooltip" type="button">
           <cp-icon class="baseInputLabel__tooltipIcon" type="tooltip" />
         </button>
       </cp-tooltip>
@@ -40,10 +40,11 @@ defineOptions({
   position: relative;
   display: flex;
   align-items: center;
-  font-size: fn.px-to-em(14);
-  line-height: fn.px-to-rem(24);
-  margin-bottom: sp.$space;
-  color: colors.$neutral-dark;
+  font-size: var(--cp-text-sm);
+  line-height: var(--cp-line-height-md);
+  letter-spacing: var(--cp-letter-spacing-sm);
+  margin-bottom: var(--cp-spacing-md);
+  color: var(--cp-text-primary);
 
   &::first-letter {
     text-transform: capitalize;
@@ -52,31 +53,31 @@ defineOptions({
   &__content {
     display: flex;
     align-items: center;
-    gap: sp.$space-sm;
+    gap: var(--cp-spacing-sm);
   }
 
   &__tooltip {
     display: flex;
-    padding: sp.$space-sm;
+    padding: var(--cp-spacing-sm);
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
-    color: colors.$neutral-dark-3;
-    outline-offset: fn.px-to-em(-3);
+    border-radius: var(--cp-radius-full);
+    color: var(--cp-foreground-quaternary);
+    outline-offset: calc(var(--cp-dimensions-1) * -0.75);
 
     &:hover,
     &:focus {
-      color: colors.$primary-color;
+      color: var(--cp-focus);
     }
 
     &:focus-visible {
-      outline: fn.px-to-em(2) solid colors.$primary-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
   }
 
   &__tooltipIcon {
-    width: fn.px-to-rem(16);
-    height: fn.px-to-rem(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
   }
 
   &__iconWrapper {
@@ -86,8 +87,8 @@ defineOptions({
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: sp.$space-sm;
-    margin-right: sp.$space-sm;
+    padding: var(--cp-spacing-sm);
+    margin-right: var(--cp-spacing-sm);
 
     &.scale-elastic-enter-active {
       transition-delay: 100ms;
@@ -95,17 +96,18 @@ defineOptions({
   }
 
   &__invalidIcon {
-    @include mx.square-sizing(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
 
-    color: colors.$error-color;
+    color: var(--cp-foreground-error-primary);
   }
 
   &__content {
-    transition: transform 300ms easings.$easing-elastic 100ms;
+    transition: transform 300ms var(--cp-easing-elastic) 100ms;
   }
 
   &--isInvalid .baseInputLabel__content {
-    transform: translate3d(calc(fn.px-to-rem(24) + sp.$space-sm), 0, 0);
+    transform: translate3d(calc(var(--cp-dimensions-6) + var(--cp-spacing-sm)), 0, 0);
   }
 }
 </style>

package/src/components/BaseSelectClearButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="baseSelectClearButton" type="button">
-    <cp-icon size="12" type="x" />
+    <cp-icon size="16" type="x" />
   </button>
 </template>
 
@@ -10,24 +10,30 @@ import CpIcon from '@/components/CpIcon.vue'
 
 <style lang="scss">
 .baseSelectClearButton {
-  @include mx.square-sizing(16);
+  width: var(--cp-dimensions-6);
+  height: var(--cp-dimensions-6);
 
   position: absolute;
   z-index: 1;
   top: 50%;
-  right: fn.px-to-rem(14);
+  right: var(--cp-dimensions-3_5);
   display: flex;
   justify-content: center;
-  padding: sp.$space-xs;
+  padding: var(--cp-dimensions-1);
   cursor: pointer;
   transform: translateY(-50%);
-  color: colors.$neutral-light;
-  border-radius: 50%;
-  background-color: colors.$gray-1;
+  color: var(--cp-foreground-secondary);
+  border-radius: var(--cp-radius-full);
+  background-color: transparent;
+
+  &:hover {
+    color: var(--cp-foreground-secondary-hover);
+    background-color: var(--cp-background-primary-hover);
+  }
 
   &:focus {
-    outline: fn.px-to-rem(2) solid colors.$primary-color;
-    outline-offset: fn.px-to-rem(1);
+    outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
+    outline-offset: var(--cp-dimensions-0_25);
   }
 }
 </style>

package/src/components/CpAirlineLogo.vue

@@ -33,7 +33,7 @@ const dynamicTitle = computed(() => `${props.iataCode} airline logo`)
 <style lang="scss">
 .cpAirlineLogo {
   overflow: hidden;
-  border-radius: fn.px-to-rem(4);
+  border-radius: var(--cp-radius-sm);
   background-repeat: no-repeat;
   background-size: contain;
 }

package/src/components/CpAlert.vue

@@ -7,12 +7,12 @@
       <cp-icon v-else :type="alertIcon" />
     </div>
     <div class="cpAlert__body">
-      <cp-heading v-if="title" heading-level="h4" :size="400" class="cpAlert__title">{{ title }}</cp-heading>
+      <cp-heading v-if="title" class="cpAlert__title" heading-level="h4" :size="400">{{ title }}</cp-heading>
       <div v-if="hasDefaultSlot" class="cpAlert__content">
         <slot />
       </div>
     </div>
-    <button v-if="isClosable" type="button" class="cpAlert__button" @click="dismissAlert"><cp-icon type="x" /></button>
+    <button v-if="isClosable" class="cpAlert__button" type="button" @click="dismissAlert"><cp-icon type="x" /></button>
   </div>
 </template>
 
@@ -48,18 +48,18 @@ const dismissAlert = () => (isDisplayed.value = false)
 </script>
 
 <style lang="scss">
-@mixin cp-alert-style($color, $className) {
+@mixin cp-alert-style($bgColor, $textColor, $className) {
   &--#{$className} {
-    background-color: rgba($color, 0.1);
-    color: $color;
+    background-color: $bgColor;
+    color: $textColor;
 
     &::before {
-      background-color: $color;
+      background-color: $textColor;
     }
   }
 
   &--#{$className} button:focus-visible {
-    outline: fn.px-to-rem(2) solid $color;
+    outline: fn.px-to-rem(2) solid $textColor;
   }
 }
 
@@ -83,13 +83,13 @@ const dismissAlert = () => (isDisplayed.value = false)
 
   &__body {
     flex: 1;
-    margin-left: sp.$space;
-    padding-right: calc(#{fn.px-to-rem(18)} + #{sp.$space-lg});
+    margin-left: var(--cp-spacing-md);
+    padding-right: calc(#{fn.px-to-rem(18)} + #{var(--cp-spacing-lg)});
   }
 
   &__iconWrapper {
     display: flex;
-    padding-block: sp.$space-xs;
+    padding-block: var(--cp-spacing-xs);
   }
 
   &__icon {
@@ -115,7 +115,7 @@ const dismissAlert = () => (isDisplayed.value = false)
     font-weight: 600;
 
     &:not(:only-child) {
-      margin-bottom: sp.$space-sm;
+      margin-bottom: var(--cp-spacing-sm);
     }
   }
 
@@ -125,7 +125,7 @@ const dismissAlert = () => (isDisplayed.value = false)
     right: fn.px-to-rem(7);
     top: fn.px-to-rem(7);
     border-radius: fn.px-to-rem(4);
-    padding: sp.$space-sm;
+    padding: var(--cp-spacing-sm);
     color: inherit;
 
     svg {
@@ -139,9 +139,9 @@ const dismissAlert = () => (isDisplayed.value = false)
     }
   }
 
-  @include cp-alert-style(colors.$secondary-color, 'info');
-  @include cp-alert-style(colors.$success-color, 'success');
-  @include cp-alert-style(colors.$warning-color, 'warning');
-  @include cp-alert-style(colors.$error-color, 'critical');
+  @include cp-alert-style(var(--cp-background-accent-secondary), var(--cp-text-accent-primary), 'info');
+  @include cp-alert-style(var(--cp-background-success-secondary), var(--cp-text-success-primary), 'success');
+  @include cp-alert-style(var(--cp-background-warning-secondary), var(--cp-text-warning-primary), 'warning');
+  @include cp-alert-style(var(--cp-background-error-secondary), var(--cp-text-error-primary), 'critical');
 }
 </style>

package/src/components/CpBadge.vue

@@ -91,8 +91,8 @@ const handleClear = () => emit('onClear')
     padding: $vertical-padding $horizontal-padding;
 
     .cpBadge__label {
-      line-height: fn.px-to-rem($label-line-height);
-      font-size: fn.px-to-rem($label-font-size);
+      line-height: $label-line-height;
+      font-size: $label-font-size;
       padding: 0 $label-padding;
     }
   }
@@ -100,11 +100,11 @@ const handleClear = () => emit('onClear')
 
 .cpBadge {
   display: inline-flex;
-  padding: fn.px-to-rem(6);
+  padding: var(--cp-spacing-sm-md);
   align-items: center;
-  border-radius: fn.px-to-rem(100);
-  background-color: colors.$neutral-dark-5;
-  color: colors.$neutral-dark;
+  border-radius: var(--cp-radius-full);
+  background-color: var(--cp-background-tertiary);
+  color: var(--cp-text-primary);
 
   &--isStroked {
     outline: 1px solid currentColor;
@@ -115,53 +115,173 @@ const handleClear = () => emit('onClear')
   }
 
   &--isSquare {
-    border-radius: fn.px-to-rem(8);
+    border-radius: var(--cp-radius-md);
 
     &.cpBadge--xs {
-      border-radius: fn.px-to-rem(4);
+      border-radius: var(--cp-radius-sm);
     }
   }
 
   &--isDisabled {
-    background-color: colors.$gray-5;
-    color: colors.$gray-500;
+    background-color: var(--cp-background-disabled);
+    color: var(--cp-text-disabled);
+
+    &.cpBadge--isStroked,
+    &.cpBadge--isDashed {
+      outline-color: var(--cp-border-disabled);
+    }
   }
 
-  @include cp-badge-dynamic-padding(sp.$space, sp.$space-sm, sp.$space-sm, 14, 20);
+  @include cp-badge-dynamic-padding(
+    var(--cp-spacing-md),
+    var(--cp-spacing-sm),
+    var(--cp-spacing-sm),
+    var(--cp-text-size-sm),
+    var(--cp-line-height-sm)
+  );
 
   &--sm {
-    padding: sp.$space-sm;
+    padding: var(--cp-spacing-sm);
   }
 
   &--xs {
-    padding: sp.$space-xs;
+    padding: var(--cp-spacing-xs);
   }
 
   &--sm {
-    @include cp-badge-dynamic-padding(sp.$space, sp.$space-sm, sp.$space-sm, 12, 16);
+    @include cp-badge-dynamic-padding(
+      var(--cp-spacing-md),
+      var(--cp-spacing-sm),
+      var(--cp-spacing-sm),
+      var(--cp-text-size-xs),
+      var(--cp-line-height-xs)
+    );
   }
 
   &--xs {
-    @include cp-badge-dynamic-padding(sp.$space-sm, sp.$space-xs, sp.$space-xs, 12, 16);
+    @include cp-badge-dynamic-padding(
+      var(--cp-spacing-sm),
+      var(--cp-spacing-xs),
+      var(--cp-spacing-xs),
+      var(--cp-text-size-xs),
+      var(--cp-line-height-xs)
+    );
   }
 
-  @include cp-badge-themed('Blue', colors.$blue, colors.$blue-100, colors.$blue-200);
-  @include cp-badge-themed('Gray', colors.$astronaut, colors.$gray-5, colors.$gray-4);
-  @include cp-badge-themed('Green', colors.$green, colors.$green-100, colors.$green-200);
-  @include cp-badge-themed('Orange', colors.$orange-600, colors.$orange-100, colors.$orange-200);
-  @include cp-badge-themed('Pink', colors.$pink, colors.$pink-100, colors.$pink-200);
-  @include cp-badge-themed('Purple', colors.$purple, colors.$purple-100, colors.$purple-200);
-  @include cp-badge-themed('Red', colors.$red, colors.$red-100, colors.$red-200);
-  @include cp-badge-themed('Yellow', colors.$yellow-500, colors.$yellow-100, colors.$yellow-300);
-  @include cp-badge-themed('Disabled', colors.$gray-500, colors.$gray-5, colors.$gray-500);
+  @include cp-badge-themed(
+    'Neutral',
+    var(--cp-foreground-primary),
+    var(--cp-background-tertiary),
+    var(--cp-border-strong)
+  );
+
+  @include cp-badge-themed(
+    'Accent',
+    var(--cp-foreground-accent-primary),
+    var(--cp-background-accent-secondary),
+    var(--cp-border-accent-primary)
+  );
+
+  @include cp-badge-themed(
+    'Error',
+    var(--cp-foreground-error-primary),
+    var(--cp-background-error-secondary),
+    var(--cp-border-error-primary)
+  );
+
+  @include cp-badge-themed(
+    'Warning',
+    var(--cp-foreground-warning-primary),
+    var(--cp-background-warning-secondary),
+    var(--cp-border-warning-primary)
+  );
+
+  @include cp-badge-themed(
+    'Success',
+    var(--cp-foreground-success-primary),
+    var(--cp-background-success-secondary),
+    var(--cp-border-success-primary)
+  );
+
+  @include cp-badge-themed(
+    'Blue',
+    var(--cp-foreground-blue-primary),
+    var(--cp-background-blue-secondary),
+    var(--cp-border-blue-primary)
+  );
+
+  @include cp-badge-themed(
+    'Pink',
+    var(--cp-foreground-pink-primary),
+    var(--cp-background-pink-secondary),
+    var(--cp-border-pink-primary)
+  );
+
+  @include cp-badge-themed(
+    'Magenta',
+    var(--cp-foreground-magenta-primary),
+    var(--cp-background-magenta-secondary),
+    var(--cp-border-magenta-primary)
+  );
+
+  @include cp-badge-themed(
+    'Yellow',
+    var(--cp-foreground-yellow-primary),
+    var(--cp-background-yellow-secondary),
+    var(--cp-border-yellow-primary)
+  );
+
+  @include cp-badge-themed('White', var(--cp-foreground-primary), var(--cp-background-primary), var(--cp-border-soft));
+
+  @include cp-badge-themed(
+    'Disabled',
+    var(--cp-text-disabled),
+    var(--cp-background-disabled),
+    var(--cp-border-disabled)
+  );
+
+  @include cp-badge-themed(
+    'Gray',
+    var(--cp-foreground-primary),
+    var(--cp-background-secondary),
+    var(--cp-border-soft)
+  ); // TODO: Should be replace by NEUTRAL
+
+  @include cp-badge-themed(
+    'Green',
+    var(--cp-foreground-success-primary),
+    var(--cp-background-success-secondary),
+    var(--cp-border-success-primary)
+  ); // TODO: Should be replace by SUCCESS
+
+  @include cp-badge-themed(
+    'Orange',
+    var(--cp-foreground-warning-primary),
+    var(--cp-background-warning-secondary),
+    var(--cp-border-warning-primary)
+  ); // TODO: Should be replace by WARNING
+
+  @include cp-badge-themed(
+    'Purple',
+    var(--cp-foreground-accent-primary),
+    var(--cp-background-accent-secondary),
+    var(--cp-border-accent-primary)
+  ); // TODO: Should be replace by ACCENT
+
+  @include cp-badge-themed(
+    'Red',
+    var(--cp-foreground-error-primary),
+    var(--cp-background-error-secondary),
+    var(--cp-border-error-primary)
+  ); // TODO: Should be replace by ERROR
 
   &__icon {
-    width: fn.px-to-rem(16);
+    width: var(--cp-dimensions-4);
     aspect-ratio: 1/1;
   }
 
   &__clearIcon {
-    width: fn.px-to-rem(14);
+    width: var(--cp-dimensions-3_5);
     aspect-ratio: 1/1;
   }
 
@@ -169,13 +289,13 @@ const handleClear = () => emit('onClear')
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: fn.px-to-rem(1);
-    border-radius: 50%;
+    padding: var(--cp-dimensions-0_25);
+    border-radius: var(--cp-radius-full);
     color: inherit;
 
     &:not(:disabled):hover,
     &:not(:disabled):focus-visible {
-      color: colors.$neutral-light;
+      color: var(--cp-foreground-white);
     }
   }
 }