@citizenplane/pimp 10.1.7 → 10.1.8

package/package.json

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

package/src/components/CpBadge.vue

@@ -30,6 +30,7 @@ interface Props {
   isClearable?: boolean
   isDashed?: boolean
   isDisabled?: boolean
+  isSolid?: boolean
   isSquare?: boolean
   isStroked?: boolean
   label?: string
@@ -44,10 +45,6 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   leadingIcon: '',
   trailingIcon: '',
-  isStroked: false,
-  isClearable: false,
-  isSquare: false,
-  isDisabled: false,
 })
 
 const emit = defineEmits<Emits>()
@@ -60,6 +57,7 @@ const componentDynamicClasses = computed(() => {
     { 'cpBadge--isSquare': props.isSquare },
     { 'cpBadge--isDashed': props.isDashed },
     { 'cpBadge--isDisabled': props.isDisabled },
+    { 'cpBadge--isSolid': props.isSolid },
   ]
 })
 
@@ -67,12 +65,17 @@ const handleClear = () => emit('onClear')
 </script>
 
 <style lang="scss">
-@mixin cp-badge-themed($className, $color, $bg-color, $outline-color) {
+@mixin cp-badge-themed($className, $color, $bg-color, $solid-color, $solid-bg-color, $outline-color) {
   &--is#{$className} {
     color: $color;
     background-color: $bg-color;
     outline-color: $outline-color;
 
+    &.cpBadge--isSolid {
+      color: $solid-color;
+      background-color: $solid-bg-color;
+    }
+
     .cpBadge__clear:not(:disabled):hover,
     .cpBadge__clear:not(:disabled):focus-visible {
       background-color: $color;
@@ -142,13 +145,7 @@ const handleClear = () => emit('onClear')
 
   &--sm {
     padding: var(--cp-spacing-sm);
-  }
-
-  &--xs {
-    padding: var(--cp-spacing-xs);
-  }
 
-  &--sm {
     @include cp-badge-dynamic-padding(
       var(--cp-spacing-md),
       var(--cp-spacing-sm),
@@ -159,6 +156,8 @@ const handleClear = () => emit('onClear')
   }
 
   &--xs {
+    padding: var(--cp-spacing-xs);
+
     @include cp-badge-dynamic-padding(
       var(--cp-spacing-sm),
       var(--cp-spacing-xs),
@@ -172,6 +171,8 @@ const handleClear = () => emit('onClear')
     'Neutral',
     var(--cp-foreground-primary),
     var(--cp-background-tertiary),
+    var(--cp-text-white),
+    var(--cp-background-solid),
     var(--cp-border-strong)
   );
 
@@ -179,6 +180,8 @@ const handleClear = () => emit('onClear')
     'Accent',
     var(--cp-foreground-accent-primary),
     var(--cp-background-accent-secondary),
+    var(--cp-text-white),
+    var(--cp-background-accent-solid),
     var(--cp-border-accent-primary)
   );
 
@@ -186,6 +189,8 @@ const handleClear = () => emit('onClear')
     'Error',
     var(--cp-foreground-error-primary),
     var(--cp-background-error-secondary),
+    var(--cp-text-white),
+    var(--cp-background-error-solid),
     var(--cp-border-error-primary)
   );
 
@@ -193,6 +198,8 @@ const handleClear = () => emit('onClear')
     'Warning',
     var(--cp-foreground-warning-primary),
     var(--cp-background-warning-secondary),
+    var(--cp-text-white),
+    var(--cp-background-warning-solid),
     var(--cp-border-warning-primary)
   );
 
@@ -200,6 +207,8 @@ const handleClear = () => emit('onClear')
     'Success',
     var(--cp-foreground-success-primary),
     var(--cp-background-success-secondary),
+    var(--cp-text-white),
+    var(--cp-background-success-solid),
     var(--cp-border-success-primary)
   );
 
@@ -207,6 +216,8 @@ const handleClear = () => emit('onClear')
     'Blue',
     var(--cp-foreground-blue-primary),
     var(--cp-background-blue-secondary),
+    var(--cp-text-white),
+    var(--cp-background-blue-solid),
     var(--cp-border-blue-primary)
   );
 
@@ -214,6 +225,8 @@ const handleClear = () => emit('onClear')
     'Pink',
     var(--cp-foreground-pink-primary),
     var(--cp-background-pink-secondary),
+    var(--cp-text-white),
+    var(--cp-background-pink-solid),
     var(--cp-border-pink-primary)
   );
 
@@ -221,6 +234,8 @@ const handleClear = () => emit('onClear')
     'Magenta',
     var(--cp-foreground-magenta-primary),
     var(--cp-background-magenta-secondary),
+    var(--cp-text-white),
+    var(--cp-background-magenta-solid),
     var(--cp-border-magenta-primary)
   );
 
@@ -228,15 +243,26 @@ const handleClear = () => emit('onClear')
     'Yellow',
     var(--cp-foreground-yellow-primary),
     var(--cp-background-yellow-secondary),
+    var(--cp-text-white),
+    var(--cp-background-yellow-solid),
     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(
+    'White',
+    var(--cp-foreground-primary),
+    var(--cp-background-primary),
+    var(--cp-text-primary),
+    var(--cp-background-primary),
+    var(--cp-border-soft)
+  );
 
   @include cp-badge-themed(
     'Disabled',
     var(--cp-text-disabled),
     var(--cp-background-disabled),
+    var(--cp-text-disabled),
+    var(--cp-background-disabled),
     var(--cp-border-disabled)
   );
 
@@ -244,6 +270,8 @@ const handleClear = () => emit('onClear')
     'Gray',
     var(--cp-foreground-primary),
     var(--cp-background-secondary),
+    var(--cp-foreground-primary),
+    var(--cp-background-secondary),
     var(--cp-border-soft)
   ); // TODO: Should be replace by NEUTRAL
 
@@ -251,6 +279,8 @@ const handleClear = () => emit('onClear')
     'Green',
     var(--cp-foreground-success-primary),
     var(--cp-background-success-secondary),
+    var(--cp-foreground-success-primary),
+    var(--cp-background-success-secondary),
     var(--cp-border-success-primary)
   ); // TODO: Should be replace by SUCCESS
 
@@ -258,6 +288,8 @@ const handleClear = () => emit('onClear')
     'Orange',
     var(--cp-foreground-warning-primary),
     var(--cp-background-warning-secondary),
+    var(--cp-foreground-warning-primary),
+    var(--cp-background-warning-secondary),
     var(--cp-border-warning-primary)
   ); // TODO: Should be replace by WARNING
 
@@ -265,6 +297,8 @@ const handleClear = () => emit('onClear')
     'Purple',
     var(--cp-foreground-accent-primary),
     var(--cp-background-accent-secondary),
+    var(--cp-foreground-accent-primary),
+    var(--cp-background-accent-secondary),
     var(--cp-border-accent-primary)
   ); // TODO: Should be replace by ACCENT
 
@@ -272,6 +306,8 @@ const handleClear = () => emit('onClear')
     'Red',
     var(--cp-foreground-error-primary),
     var(--cp-background-error-secondary),
+    var(--cp-foreground-error-primary),
+    var(--cp-background-error-secondary),
     var(--cp-border-error-primary)
   ); // TODO: Should be replace by ERROR
 

package/src/stories/CpBadge.stories.ts

@@ -80,16 +80,32 @@ export const WithColors: Story = {
     components: { CpBadge },
     template: `
       <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadge color="neutral" label="Neutral" />
-        <CpBadge color="accent" label="Accent" />
-        <CpBadge color="error" label="Error" />
-        <CpBadge color="warning" label="Warning" />
-        <CpBadge color="success" label="Success" />
-        <CpBadge color="blue" label="Blue" />
-        <CpBadge color="pink" label="Pink" />
-        <CpBadge color="magenta" label="Magenta" />
-        <CpBadge color="yellow" label="Yellow" />
-        <CpBadge color="white" label="White" />
+        <div>
+          <CpBadge color="neutral" label="Neutral" />
+          <CpBadge color="accent" label="Accent" />
+          <CpBadge color="error" label="Error" />
+          <CpBadge color="warning" label="Warning" />
+          <CpBadge color="success" label="Success" />
+          <CpBadge color="blue" label="Blue" />
+          <CpBadge color="pink" label="Pink" />
+          <CpBadge color="magenta" label="Magenta" />
+          <CpBadge color="yellow" label="Yellow" />
+          <CpBadge color="white" label="White" />
+          <CpBadge color="white" label="White" is-disabled />
+        </div>
+        <div>
+          <CpBadge color="neutral" label="Neutral" is-solid/>
+          <CpBadge color="accent" label="Accent" is-solid/>
+          <CpBadge color="error" label="Error" is-solid/>
+          <CpBadge color="warning" label="Warning" is-solid/>
+          <CpBadge color="success" label="Success" is-solid/>
+          <CpBadge color="blue" label="Blue" is-solid/>
+          <CpBadge color="pink" label="Pink" is-solid/>
+          <CpBadge color="magenta" label="Magenta" is-solid/>
+          <CpBadge color="yellow" label="Yellow" is-solid/>
+          <CpBadge color="white" label="White" is-solid />
+          <CpBadge color="white" label="White" is-solid is-disabled />
+        </div>
       </div>
     `,
   }),