@citizenplane/pimp 10.1.0 → 10.1.2

package/package.json

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

package/src/assets/css/typography.css

@@ -41,61 +41,48 @@
   --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: var(--cp-text-size-xs);
   --cp-monospace-xs-line-height: var(--cp-line-height-xs);
   --cp-monospace-xs-letter-spacing: var(--cp-letter-spacing-xs);
 
@@ -103,7 +90,7 @@
   --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-font-light: var(--cp-text-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/styles/helpers/_mixins.scss

@@ -1,6 +1,4 @@
-@use '../variables/colors' as colors;
 @use '../helpers/functions' as fn;
-@use '../variables/easings' as easings;
 
 // Popover
 @mixin popover-desktop($transitionName) {

package/src/components/BaseInputLabel.vue

@@ -40,7 +40,7 @@ defineOptions({
   position: relative;
   display: flex;
   align-items: center;
-  font-size: var(--cp-text-sm);
+  font-size: var(--cp-text-size-sm);
   line-height: var(--cp-line-height-md);
   letter-spacing: var(--cp-letter-spacing-sm);
   margin-bottom: var(--cp-spacing-md);

package/src/assets/styles/variables/_colors.scss

@@ -1,89 +0,0 @@
-// CitizenPlane colors
-$astronaut: #3e3e5b;
-
-$gray-1: #8b8b9d;
-$gray-3: #c6c6ce;
-$gray-4: #d8d8de;
-$gray-5: #ececef;
-$gray-500: #b2b2bd;
-
-$red: #eb0505;
-$red-50: #fff7f7;
-$red-100: #ffe5e5;
-$red-200: #ffb3b3;
-$red-500: #d52841;
-$red-700: #710019;
-
-$blue: #144dc2;
-$blue-50: #f6faff;
-$blue-100: #e3f2ff;
-$blue-200: #b3d4ff;
-$blue-500: #1564de;
-$blue-700: #003382;
-
-$green: #00895c;
-$green-50: #ecfff4;
-$green-100: #e6fff4;
-$green-200: #b8ffdf;
-$green-500: #008254;
-$green-700: #00462b;
-
-$yellow: #ffd00b;
-$yellow-100: #fff9e3;
-$yellow-200: #ffea82;
-$yellow-300: #ffea82;
-$yellow-500: #998700;
-
-$orange: #ffa800;
-$orange-50: #fff8f2;
-$orange-100: #fff4e3;
-$orange-200: #ffe0a3;
-$orange-500: #a05800;
-$orange-600: #d17a00;
-$orange-700: #582e00;
-
-$purple: #5341f9;
-$purple-100: #e5e3ff;
-$purple-200: #c8c4ff;
-$purple-500: #5341f9;
-$purple-600: #4b3ad0;
-$purple-700: #3400a0;
-
-$pink: #ff7dc1;
-$pink-100: #ffe6f2;
-$pink-200: #ffcce6;
-$pink-500: #ff7dc1;
-
-$green-2: #00c582;
-$green-1: #00f8a4;
-
-$blue-1: #56c1fe;
-
-// Main colors
-$primary-color: $purple;
-$secondary-color: $blue;
-$tertiary-color: $pink;
-
-// Accent colors
-$error-color: $red;
-$warning-color: $orange;
-$success-color: $green-2;
-$success-color-light: $green-1;
-$accent-color-1: $blue-1;
-
-// Neutral colors
-$neutral-dark: $astronaut;
-
-// Gray
-$neutral-dark-1: $gray-1;
-$neutral-dark-2: $gray-500;
-$neutral-dark-3: $gray-3;
-$neutral-dark-4: $gray-4;
-$neutral-dark-5: $gray-5;
-
-// White
-$neutral-light: #ffffff;
-$neutral-light-1: #f9fafc;
-
-// Border colors
-$border-color: $neutral-dark-4;

package/src/assets/styles/variables/_easings.scss

@@ -1 +0,0 @@
-$easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);

package/src/assets/styles/variables/_spacing.scss

@@ -1,10 +0,0 @@
-@use 'sass:math';
-@use '../helpers/functions' as fn;
-
-$space: fn.px-to-rem(8);
-
-$space-xs: math.div($space, 4);
-$space-sm: math.div($space, 2);
-$space-md: $space * 1.5;
-$space-lg: $space * 2;
-$space-xl: $space * 3;