@citizenplane/pimp 11.0.4 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "11.0.4",
+  "version": "12.0.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpBadge.vue

@@ -40,7 +40,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: Colors.GRAY,
+  color: 'gray',
   size: Sizes.MD,
   label: '',
   leadingIcon: '',

package/src/components/CpButton.vue

@@ -11,11 +11,15 @@
     @click="handleClick"
   >
     <span class="cpButton__body">
-      <span v-if="isLoading" class="cpButton__loader"><cp-loader :color="Colors.NEUTRAL" /></span>
+      <span v-if="isLoading" class="cpButton__loader">
+        <cp-loader color="neutral" />
+      </span>
       <span v-if="hasIconBefore" class="cpButton__icon cpButton__icon--isBefore">
         <slot name="leading-icon" />
       </span>
-      <span v-if="hasLabel"><slot /></span>
+      <span v-if="hasLabel" class="cpButton__label">
+        <slot />
+      </span>
       <span v-if="hasIconAfter" class="cpButton__icon cpButton__icon--isAfter">
         <slot name="trailing-icon" />
       </span>
@@ -35,23 +39,25 @@ import CpLoader from '@/components/CpLoader.vue'
 import { Colors, Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
+type ButtonColor = Extract<Colors, 'neutral' | 'accent' | 'error' | 'warning' | 'success'>
+
 interface Props {
   appearance?: ButtonAppearances
-  color?: Colors
+  color?: ButtonColor
   disabled?: boolean
   enableHaptics?: boolean
   isLoading?: boolean
   isSquare?: boolean
-  size?: Sizes
+  size?: Exclude<Sizes, Sizes.XXL | Sizes.XXXL | Sizes.XXXXL>
   tag?: ButtonTags
   type?: ButtonTypes
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  appearance: ButtonAppearances.DEFAULT,
-  color: undefined,
-  tag: ButtonTags.BUTTON,
-  type: ButtonTypes.BUTTON,
+  appearance: 'primary',
+  color: 'neutral',
+  tag: 'button',
+  type: 'button',
   size: Sizes.MD,
 })
 
@@ -92,89 +98,76 @@ const handleClick = () => {
 </script>
 
 <style lang="scss">
-@mixin cp-button-default($className, $textColor, $textColorHover) {
-  &--isDefault#{&}--is#{$className} {
-    background-color: var(--cp-background-primary);
-    box-shadow:
-      var(--cp-shadows-3xs-inset),
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
-
-    &,
-    &:visited {
-      color: $textColor;
-    }
-
-    &:active,
-    &:hover {
-      background-color: var(--cp-background-primary-hover);
-      box-shadow:
-        var(--cp-shadows-3xs-inset),
-        0 0 0 var(--cp-dimensions-0_25) $textColorHover;
-      color: $textColorHover;
-    }
-
-    &:focus,
-    &:focus-visible {
-      outline: fn.px-to-rem(2) solid $textColorHover;
-      outline-offset: fn.px-to-rem(3);
+@mixin cp-button-primary($className, $color, $backgroundColor, $hoverBackgroundColor) {
+  &--isPrimary#{&}--is#{$className} {
+    &:not(:disabled) {
+      background-color: $backgroundColor;
+      color: $color;
+      box-shadow: var(--cp-shadows-3xs);
+
+      &:hover {
+        background-color: $hoverBackgroundColor;
+      }
+
+      &:focus,
+      &:focus-visible,
+      &:active {
+        background-color: $hoverBackgroundColor;
+        outline: fn.px-to-rem(2) solid $hoverBackgroundColor;
+      }
     }
   }
 }
 
-@mixin cp-button-primary($className, $color, $hoverColor) {
-  &--isPrimary#{&}--is#{$className} {
-    background-color: $color;
-    color: var(--cp-text-white);
-
-    &:hover {
-      background-color: $hoverColor;
-    }
-
-    &:focus,
-    &:focus-visible,
-    &:active {
-      background-color: $hoverColor;
-      outline: fn.px-to-rem(2) solid $color;
+@mixin cp-button-secondary($className, $color) {
+  &--isSecondary#{&}--is#{$className} {
+    &:not(:disabled) {
+      background-color: var(--cp-background-primary);
+      border: fn.px-to-rem(1) solid var(--cp-border-soft);
+      color: $color;
+      box-shadow: var(--cp-shadows-3xs);
+
+      &:hover {
+        background-color: var(--cp-background-primary-hover);
+        border-color: var(--cp-border-soft-hover);
+      }
+
+      &:focus,
+      &:focus-visible,
+      &:active {
+        background-color: var(--cp-background-primary-hover);
+        outline: fn.px-to-rem(2) solid var(--cp-background-primary-hover);
+      }
     }
   }
 }
 
-@mixin cp-button-tertiary($className, $textColor, $hoverColor) {
-  &--isMinimal#{&}--is#{$className} {
-    color: $textColor;
-    box-shadow: none;
-
-    &,
-    &:visited {
-      color: $textColor;
-    }
-
-    &:hover {
-      background: $hoverColor;
-    }
-
-    &:focus,
-    &:focus-visible,
-    &:active {
-      outline: fn.px-to-rem(2) solid $textColor;
-    }
-
-    &:active {
-      background: $hoverColor;
-      color: $textColor;
+@mixin cp-button-tertiary($className, $color, $hoverColor, $hoverBackgroundColor) {
+  &--isTertiary#{&}--is#{$className} {
+    &:not(:disabled) {
+      background-color: transparent;
+      color: $color;
+
+      &:hover {
+        background-color: $hoverBackgroundColor;
+        color: $hoverColor;
+      }
+
+      &:focus,
+      &:focus-visible,
+      &:active {
+        color: $hoverColor;
+        outline: fn.px-to-rem(2) solid $color;
+      }
     }
   }
 }
 
 .cpButton {
-  border-radius: fn.px-to-rem(1000);
-  background-color: var(--cp-background-primary);
+  border-radius: var(--cp-radius-full);
   padding: var(--cp-spacing-md) var(--cp-spacing-lg);
-  font-size: var(--cp-text-size-md);
-  box-shadow: var(--cp-shadows-3xs);
-  line-height: var(--cp-line-height-md); /* 150% */
+  line-height: var(--cp-line-height-md);
   text-decoration: none;
-  color: var(--cp-text-primary);
   font-weight: 500;
   transition-property: box-shadow, background-color, transform, width;
   transition-duration: 150ms;
@@ -187,37 +180,6 @@ const handleClick = () => {
     color: var(--cp-text-primary);
   }
 
-  &--isDefault,
-  &--isPrimary,
-  &--isMinimal {
-    &:hover {
-      background-color: var(--cp-background-primary-hover);
-    }
-
-    &:focus {
-      outline: fn.px-to-rem(2) solid var(--cp-border-strong);
-      box-shadow: none;
-    }
-  }
-
-  &--isDefault {
-    box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft);
-
-    &:hover {
-      box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft-hover);
-    }
-
-    &:focus {
-      outline: fn.px-to-rem(2) solid var(--cp-border-strong);
-      box-shadow: none;
-    }
-  }
-
-  &--isMinimal {
-    background-color: transparent;
-    box-shadow: none;
-  }
-
   &,
   &__body {
     display: inline-flex;
@@ -233,48 +195,90 @@ const handleClick = () => {
     transform: translateY(fn.px-to-rem(1));
   }
 
-  // Default appearance (style secondary on Figma)
-  @include cp-button-default('Blue', var(--cp-text-blue-primary), var(--cp-text-blue-primary-hover));
-  @include cp-button-default('Purple', var(--cp-text-accent-primary), var(--cp-text-accent-primary-hover));
-  @include cp-button-default('Green', var(--cp-text-success-primary), var(--cp-text-success-primary-hover));
-  @include cp-button-default('Orange', var(--cp-text-warning-primary), var(--cp-text-warning-primary-hover));
-  @include cp-button-default('Red', var(--cp-text-error-primary), var(--cp-text-error-primary-hover));
-
-  // Primary appearance (style primary on Figma)
-  @include cp-button-primary('Blue', var(--cp-background-blue-solid), var(--cp-background-blue-solid-hover));
-  @include cp-button-primary('Purple', var(--cp-background-accent-solid), var(--cp-background-accent-solid-hover));
-  @include cp-button-primary('Green', var(--cp-background-success-solid), var(--cp-background-success-solid-hover));
-  @include cp-button-primary('Orange', var(--cp-background-warning-solid), var(--cp-background-warning-solid-hover));
-  @include cp-button-primary('Red', var(--cp-background-error-solid), var(--cp-background-error-solid-hover));
-
-  // Minimal appearance (style tertiary on Figma)
-  @include cp-button-tertiary('Blue', var(--cp-text-blue-primary), var(--cp-background-blue-primary-hover));
-  @include cp-button-tertiary('Purple', var(--cp-text-accent-primary), var(--cp-background-accent-primary-hover));
-  @include cp-button-tertiary('Green', var(--cp-text-success-primary), var(--cp-background-success-primary-hover));
-  @include cp-button-tertiary('Orange', var(--cp-text-warning-primary), var(--cp-background-warning-primary-hover));
-  @include cp-button-tertiary('Red', var(--cp-text-error-primary), var(--cp-background-error-primary-hover));
+  // Primary appearance
+  @include cp-button-primary(
+    'Neutral',
+    var(--cp-text-primary),
+    var(--cp-background-primary),
+    var(--cp-background-primary-hover)
+  );
+  @include cp-button-primary(
+    'Accent',
+    var(--cp-text-white),
+    var(--cp-background-accent-solid),
+    var(--cp-background-accent-solid-hover)
+  );
+  @include cp-button-primary(
+    'Success',
+    var(--cp-text-white),
+    var(--cp-background-success-solid),
+    var(--cp-background-success-solid-hover)
+  );
+  @include cp-button-primary(
+    'Warning',
+    var(--cp-text-white),
+    var(--cp-background-warning-solid),
+    var(--cp-background-warning-solid-hover)
+  );
+  @include cp-button-primary(
+    'Error',
+    var(--cp-text-white),
+    var(--cp-background-error-solid),
+    var(--cp-background-error-solid-hover)
+  );
+
+  // Secondary appearance
+  @include cp-button-secondary('Neutral', var(--cp-text-primary));
+  @include cp-button-secondary('Accent', var(--cp-text-accent-primary));
+  @include cp-button-secondary('Success', var(--cp-text-success-primary));
+  @include cp-button-secondary('Warning', var(--cp-text-warning-primary));
+  @include cp-button-secondary('Error', var(--cp-text-error-primary));
+
+  // Tertiary appearance
+  @include cp-button-tertiary(
+    'Neutral',
+    var(--cp-text-primary),
+    var(--cp-text-primary-hover),
+    var(--cp-background-primary-hover)
+  );
+  @include cp-button-tertiary(
+    'Accent',
+    var(--cp-text-accent-primary),
+    var(--cp-text-accent-primary-hover),
+    var(--cp-background-accent-primary-hover)
+  );
+  @include cp-button-tertiary(
+    'Success',
+    var(--cp-text-success-primary),
+    var(--cp-text-success-primary-hover),
+    var(--cp-background-success-primary-hover)
+  );
+  @include cp-button-tertiary(
+    'Warning',
+    var(--cp-text-warning-primary),
+    var(--cp-text-warning-primary-hover),
+    var(--cp-background-warning-primary-hover)
+  );
+  @include cp-button-tertiary(
+    'Error',
+    var(--cp-text-error-primary),
+    var(--cp-text-error-primary-hover),
+    var(--cp-background-error-primary-hover)
+  );
 
   &--isDisabled {
-    box-shadow: none !important;
-    background-color: var(--cp-background-disabled) !important;
-    color: var(--cp-text-disabled) !important;
-    cursor: not-allowed !important;
+    box-shadow: none;
+    background-color: var(--cp-background-disabled);
+    color: var(--cp-text-disabled);
     user-select: none;
 
     &:hover,
     &:active {
+      cursor: not-allowed;
       transform: none;
     }
   }
 
-  &--isIcon {
-    padding: fn.px-to-rem(10);
-
-    .cpButton__icon {
-      @include mx.square-sizing(20);
-    }
-  }
-
   &__body {
     display: flex;
     align-items: center;
@@ -284,6 +288,10 @@ const handleClick = () => {
     transition: padding-left 250ms var(--cp-easing-elastic);
   }
 
+  &__label {
+    padding-inline: var(--cp-spacing-xs);
+  }
+
   &__icon,
   &__loader {
     display: flex;
@@ -299,8 +307,6 @@ const handleClick = () => {
   }
 
   &__icon {
-    @include mx.square-sizing(20);
-
     flex-shrink: 0;
   }
 
@@ -318,77 +324,85 @@ const handleClick = () => {
   }
 
   &--isSquare {
-    border-radius: var(--cp-radius-md);
+    &.cpButton--2xs {
+      border-radius: var(--cp-radius-sm-md);
+    }
+
+    &.cpButton--xs,
+    &.cpButton--sm,
+    &.cpButton--md {
+      border-radius: var(--cp-radius-md);
+    }
 
     &.cpButton--lg {
       border-radius: var(--cp-radius-md-lg);
     }
+  }
 
-    &.cpButton--2xs {
-      border-radius: var(--cp-radius-sm-md);
+  &--2xs,
+  &--xs,
+  &--sm {
+    .cpButton__icon,
+    .cpButton__loader {
+      @include mx.square-sizing(16);
     }
   }
 
+  &--md,
   &--lg {
-    padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
-    font-size: var(--cp-text-size-md);
-    line-height: var(--cp-line-height-md); /* 150% */
-
-    &.cpButton--isIcon {
-      padding: var(--cp-spacing-lg);
-    }
-
     .cpButton__icon,
     .cpButton__loader {
-      @include mx.square-sizing(24);
+      @include mx.square-sizing(20);
     }
   }
 
-  &--sm,
-  &--xs {
-    .cpButton__body {
-      gap: var(--cp-spacing-xs);
-    }
+  &--2xs {
+    font-size: var(--cp-text-size-xs);
+    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    line-height: var(--cp-line-height-xs);
 
     &.cpButton--isIcon {
-      padding: var(--cp-spacing-sm-md);
+      padding: var(--cp-spacing-sm);
     }
   }
 
-  &--sm {
-    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
+  &--xs {
     font-size: var(--cp-text-size-sm);
-    line-height: var(--cp-line-height-sm); /* 142.857% */
+    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    line-height: var(--cp-line-height-sm);
 
-    .cpButton__icon,
-    .cpButton__loader {
-      @include mx.square-sizing(20);
+    &.cpButton--isIcon {
+      padding: var(--cp-spacing-sm-md);
     }
   }
 
-  &--xs {
+  &--sm {
     font-size: var(--cp-text-size-sm);
-    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
     line-height: var(--cp-line-height-sm);
 
-    .cpButton__icon,
-    .cpButton__loader {
-      @include mx.square-sizing(16);
+    &.cpButton--isIcon {
+      padding: var(--cp-spacing-md);
     }
   }
 
-  &--2xs {
-    font-size: var(--cp-text-size-xs);
-    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
-    line-height: var(--cp-line-height-xs);
+  &--md {
+    font-size: var(--cp-text-size-md);
+    padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    line-height: var(--cp-line-height-md);
 
-    .cpButton__body {
-      gap: var(--cp-spacing-xs);
+    &.cpButton--isIcon {
+      padding: fn.px-to-rem(10);
     }
+  }
 
-    .cpButton__icon,
-    .cpButton__loader {
-      @include mx.square-sizing(12);
+  &--lg {
+    font-size: var(--cp-text-size-md);
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+    line-height: var(--cp-line-height-md);
+
+    &.cpButton--isIcon {
+      padding: fn.px-to-rem(14);
     }
   }
 }

package/src/components/CpCheckbox.vue

@@ -41,7 +41,7 @@ interface Props {
   autofocus?: boolean
   checkboxLabel?: string
   checkboxValue?: string | number
-  color?: string
+  color?: ToggleColors
   groupName?: string
   helper?: string
   indeterminate?: boolean
@@ -55,7 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   checkboxValue: '',
   checkboxLabel: '',
   groupName: '',
-  color: ToggleColors.ACCENT,
+  color: 'accent',
   helper: '',
 })
 

package/src/components/CpLoader.vue

@@ -46,7 +46,7 @@ interface Props {
   size?: number | string
 }
 
-const props = withDefaults(defineProps<Props>(), { color: Colors.ACCENT, size: 24 })
+const props = withDefaults(defineProps<Props>(), { color: 'accent', size: 24 })
 
 const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
 

package/src/components/CpMultiselect.vue

@@ -326,7 +326,7 @@ onMounted(() => overrideAlignOverlay())
     justify-content: space-between;
     padding: var(--cp-spacing-md) var(--cp-spacing-xl);
     box-shadow:
-      var(--cp-shadows-3xs),
+      var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     border-radius: var(--cp-radius-md);
     gap: var(--cp-spacing-md);

package/src/components/CpRadio.vue

@@ -44,7 +44,7 @@ interface RadioOption {
 
 interface Props {
   autofocus?: boolean
-  color?: string
+  color?: ToggleColors
   groupName?: string
   modelValue: string
   options: RadioOption[]
@@ -56,7 +56,7 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   groupName: '',
-  color: ToggleColors.BLUE,
+  color: 'blue',
   autofocus: false,
 })
 

package/src/components/CpSwitch.vue

@@ -41,7 +41,7 @@ import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
   autofocus?: boolean
-  color?: string
+  color?: ToggleColors
   disabled?: boolean
   enableHaptics?: boolean
   groupName?: string
@@ -63,7 +63,7 @@ const props = withDefaults(defineProps<Props>(), {
   helper: '',
   disabled: false,
   groupName: '',
-  color: ToggleColors.PURPLE,
+  color: 'purple',
   reverseLabel: false,
   autofocus: false,
   isRequired: false,

package/src/components/CpTooltip.vue

@@ -40,7 +40,7 @@ import { useId, useSlots, computed } from 'vue'
 import { Colors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
-type TooltipColors = Colors.ACCENT | Colors.NEUTRAL
+type TooltipColors = Extract<Colors, 'accent' | 'neutral'>
 type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 interface Props {
@@ -55,7 +55,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   content: '',
   distance: 8,
-  color: Colors.ACCENT,
+  color: 'accent',
   placement: undefined,
   subcontent: '',
 })

package/src/constants/Button.ts

@@ -1,16 +1,5 @@
-export enum ButtonAppearances {
-  DEFAULT = 'default',
-  PRIMARY = 'primary',
-  MINIMAL = 'minimal',
-}
+export type ButtonAppearances = 'primary' | 'secondary' | 'tertiary'
 
-export enum ButtonTags {
-  BUTTON = 'button',
-  A = 'a',
-}
+export type ButtonTags = 'button' | 'a'
 
-export enum ButtonTypes {
-  BUTTON = 'button',
-  SUBMIT = 'submit',
-  RESET = 'reset',
-}
+export type ButtonTypes = 'button' | 'submit' | 'reset'

package/src/constants/colors/Colors.ts

@@ -1,20 +1,16 @@
-export enum Colors {
-  NEUTRAL = 'neutral',
-  ACCENT = 'accent',
-  ERROR = 'error',
-  WARNING = 'warning',
-  SUCCESS = 'success',
-
-  BLUE = 'blue',
-  PINK = 'pink',
-  MAGENTA = 'magenta',
-  YELLOW = 'yellow',
-
-  WHITE = 'white',
-
-  GRAY = 'gray', // TODO: Should be replace by NEUTRAL
-  GREEN = 'green', // TODO: Should be replace by SUCCESS
-  ORANGE = 'orange', // TODO: Should be replace by WARNING
-  PURPLE = 'purple', // TODO: Should be replace by ACCENT
-  RED = 'red', // TODO: Should be replace by ERROR
-}
+export type Colors =
+  | 'neutral'
+  | 'accent'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'blue'
+  | 'pink'
+  | 'magenta'
+  | 'yellow'
+  | 'white'
+  | 'gray' // TODO: Should be replace by NEUTRAL
+  | 'green' // TODO: Should be replace by SUCCESS
+  | 'orange' // TODO: Should be replace by WARNING
+  | 'purple' // TODO: Should be replace by ACCENT
+  | 'red' // TODO: Should be replace by ERROR

package/src/constants/colors/ToggleColors.ts

@@ -1,7 +1,4 @@
 import { Colors } from './Colors'
 
-export enum ToggleColors {
-  ACCENT = Colors.ACCENT,
-  BLUE = Colors.BLUE,
-  PURPLE = Colors.PURPLE, // TODO: Should be replace by ACCENT
-}
+// TODO: purple should be replace by ACCENT
+export type ToggleColors = Extract<Colors, 'accent' | 'blue' | 'purple'>