@citizenplane/pimp 9.13.7 → 9.14.1

package/package.json

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

package/src/assets/styles/base/_base.scss

@@ -1,6 +1,10 @@
 @use '../variables/colors' as colors;
 @use '../helpers/functions' as fn;
 
+:root {
+  --pimp-font-monospace: 'Azeret Mono';
+}
+
 // Primary Elements
 
 html {

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

@@ -14,3 +14,11 @@ $base-size: 16;
 @function px-to-em($target, $context: $base-size) {
   @return math.div($target, $context) * 1em;
 }
+
+@function v($var, $fallback: null) {
+  @if ($fallback) {
+    @return var(--pimp-#{$var}, #{$fallback});
+  } @else {
+    @return var(--pimp-#{$var});
+  }
+}

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

@@ -78,3 +78,127 @@ $neutral-light-1: #f9fafc;
 
 // Border colors
 $border-color: $neutral-dark-4;
+
+:root {
+  --pimp-colors-black: #000000;
+
+  --pimp-colors-blue-100: #e5efff;
+  --pimp-colors-blue-1000: #00133a;
+  --pimp-colors-blue-200: #bdd6ff;
+  --pimp-colors-blue-300: #90baff;
+  --pimp-colors-blue-400: #4c8dfa;
+  --pimp-colors-blue-50: #f6faff;
+  --pimp-colors-blue-500: #1564de;
+  --pimp-colors-blue-600: #0049b1;
+  --pimp-colors-blue-700: #003382;
+  --pimp-colors-blue-800: #00286a;
+  --pimp-colors-blue-900: #001e53;
+
+  --pimp-colors-green-100: #dcf9e8;
+  --pimp-colors-green-1000: #001c0f;
+  --pimp-colors-green-200: #98eabe;
+  --pimp-colors-green-300: #54d599;
+  --pimp-colors-green-400: #00ac71;
+  --pimp-colors-green-50: #ecfff4;
+  --pimp-colors-green-500: #008254;
+  --pimp-colors-green-600: #00623e;
+  --pimp-colors-green-700: #00462b;
+  --pimp-colors-green-800: #003822;
+  --pimp-colors-green-900: #002b19;
+
+  --pimp-colors-grey-100: #f2f3fa;
+  --pimp-colors-grey-1000: #20212f;
+  --pimp-colors-grey-200: #e9eaf6;
+  --pimp-colors-grey-300: #d1d3e6;
+  --pimp-colors-grey-400: #b4b7d3;
+  --pimp-colors-grey-50: #f9f9fd;
+  --pimp-colors-grey-500: #989bba;
+  --pimp-colors-grey-600: #717496;
+  --pimp-colors-grey-700: #525470;
+  --pimp-colors-grey-800: #36384d;
+  --pimp-colors-grey-900: #2b2c3e;
+
+  --pimp-colors-grey-shadow-color-10: rgba(108, 110, 181, 0.1);
+  --pimp-colors-grey-shadow-color-12-5: rgba(108, 110, 181, 0.125);
+  --pimp-colors-grey-shadow-color-15: rgba(108, 110, 181, 0.15);
+  --pimp-colors-grey-shadow-color-17-5: rgba(108, 110, 181, 0.175);
+  --pimp-colors-grey-shadow-color-20: rgba(108, 110, 181, 0.2);
+  --pimp-colors-grey-shadow-color-3: rgba(108, 110, 181, 0.03);
+  --pimp-colors-grey-shadow-color-4: rgba(108, 110, 181, 0.04);
+  --pimp-colors-grey-shadow-color-5: rgba(108, 110, 181, 0.05);
+  --pimp-colors-grey-shadow-color-7-5: rgba(108, 110, 181, 0.075);
+
+  --pimp-colors-magenta-100: #ffe7ed;
+  --pimp-colors-magenta-1000: #300015;
+  --pimp-colors-magenta-200: #ffc1d2;
+  --pimp-colors-magenta-300: #ff92b5;
+  --pimp-colors-magenta-400: #e8528c;
+  --pimp-colors-magenta-50: #fff7f9;
+  --pimp-colors-magenta-500: #c40d68;
+  --pimp-colors-magenta-600: #97004e;
+  --pimp-colors-magenta-700: #6e0037;
+  --pimp-colors-magenta-800: #59002c;
+  --pimp-colors-magenta-900: #450020;
+
+  --pimp-colors-orange-100: #ffeddf;
+  --pimp-colors-orange-1000: #251000;
+  --pimp-colors-orange-200: #fec89e;
+  --pimp-colors-orange-300: #f9a255;
+  --pimp-colors-orange-400: #de7c00;
+  --pimp-colors-orange-50: #fff8f2;
+  --pimp-colors-orange-500: #a05800;
+  --pimp-colors-orange-600: #7a4100;
+  --pimp-colors-orange-700: #582e00;
+  --pimp-colors-orange-800: #472400;
+  --pimp-colors-orange-900: #371a00;
+
+  --pimp-colors-pink-100: #fce6fd;
+  --pimp-colors-pink-1000: #29002d;
+  --pimp-colors-pink-200: #f8bdfb;
+  --pimp-colors-pink-300: #f08ef6;
+  --pimp-colors-pink-400: #d054d8;
+  --pimp-colors-pink-50: #fff6ff;
+  --pimp-colors-pink-500: #a825b1;
+  --pimp-colors-pink-600: #84068c;
+  --pimp-colors-pink-700: #600067;
+  --pimp-colors-pink-800: #4e0054;
+  --pimp-colors-pink-900: #3c0040;
+
+  --pimp-colors-red-100: #fce9e8;
+  --pimp-colors-red-1000: #320006;
+  --pimp-colors-red-200: #ffc3c2;
+  --pimp-colors-red-300: #ff9798;
+  --pimp-colors-red-400: #f24e5c;
+  --pimp-colors-red-50: #fff7f7;
+  --pimp-colors-red-500: #d52841;
+  --pimp-colors-red-600: #9c0025;
+  --pimp-colors-red-700: #710019;
+  --pimp-colors-red-800: #5d0012;
+  --pimp-colors-red-900: #48000c;
+
+  --pimp-colors-violet-100: #eaecff;
+  --pimp-colors-violet-1000: #13004a;
+  --pimp-colors-violet-200: #ccd0ff;
+  --pimp-colors-violet-300: #acb1ff;
+  --pimp-colors-violet-400: #807dff;
+  --pimp-colors-violet-50: #f8f9ff;
+  --pimp-colors-violet-500: #603dfd;
+  --pimp-colors-violet-600: #4a00da;
+  --pimp-colors-violet-700: #3400a0;
+  --pimp-colors-violet-800: #2a0084;
+  --pimp-colors-violet-900: #1f0067;
+
+  --pimp-colors-white: #ffffff;
+
+  --pimp-colors-yellow-100: #fcfacc;
+  --pimp-colors-yellow-1000: #211300;
+  --pimp-colors-yellow-200: #f0df80;
+  --pimp-colors-yellow-300: #dfbb35;
+  --pimp-colors-yellow-400: #b68900;
+  --pimp-colors-yellow-50: #fefeea;
+  --pimp-colors-yellow-500: #906300;
+  --pimp-colors-yellow-600: #724700;
+  --pimp-colors-yellow-700: #553000;
+  --pimp-colors-yellow-800: #452600;
+  --pimp-colors-yellow-900: #351c00;
+}

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

@@ -0,0 +1,37 @@
+:root {
+  --pimp-dimensions-0: 0;
+  --pimp-dimensions-0_5: 2px;
+  --pimp-dimensions-1: 4px;
+  --pimp-dimensions-1_5: 6px;
+  --pimp-dimensions-10: 40px;
+  --pimp-dimensions-12: 48px;
+  --pimp-dimensions-120: 480px;
+  --pimp-dimensions-140: 560px;
+  --pimp-dimensions-16: 64px;
+  --pimp-dimensions-160: 640px;
+  --pimp-dimensions-180: 720px;
+  --pimp-dimensions-192: 768px;
+  --pimp-dimensions-2: 8px;
+  --pimp-dimensions-2_5: 10px;
+  --pimp-dimensions-20: 80px;
+  --pimp-dimensions-24: 96px;
+  --pimp-dimensions-256: 1024px;
+  --pimp-dimensions-3: 12px;
+  --pimp-dimensions-3_5: 14px;
+  --pimp-dimensions-32: 128px;
+  --pimp-dimensions-320: 1280px;
+  --pimp-dimensions-360: 1440px;
+  --pimp-dimensions-384: 1536px;
+  --pimp-dimensions-4: 16px;
+  --pimp-dimensions-40: 160px;
+  --pimp-dimensions-400: 1600px;
+  --pimp-dimensions-48: 192px;
+  --pimp-dimensions-480: 1920px;
+  --pimp-dimensions-5: 20px;
+  --pimp-dimensions-56: 224px;
+  --pimp-dimensions-6: 24px;
+  --pimp-dimensions-64: 256px;
+  --pimp-dimensions-8: 32px;
+  --pimp-dimensions-80: 320px;
+  --pimp-dimensions-96: 384px;
+}

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

@@ -0,0 +1,67 @@
+:root {
+  --pimp-drop-shadow-2xs-blur: 6px;
+  --pimp-drop-shadow-2xs-color: var(--pimp-colors-grey-shadow-color-7-5);
+  --pimp-drop-shadow-2xs-offset-x: 0;
+  --pimp-drop-shadow-2xs-offset-y: 3px;
+  --pimp-drop-shadow-2xs-spread: -2px;
+  --pimp-drop-shadow-3xs-blur: 2px;
+  --pimp-drop-shadow-3xs-color: var(--pimp-colors-grey-shadow-color-7-5);
+  --pimp-drop-shadow-3xs-offset-x: 0;
+  --pimp-drop-shadow-3xs-offset-y: 3px;
+  --pimp-drop-shadow-3xs-spread: -2px;
+  --pimp-drop-shadow-lg-blur: 25px;
+  --pimp-drop-shadow-lg-color: var(--pimp-colors-grey-shadow-color-17-5);
+  --pimp-drop-shadow-lg-offset-x: 0;
+  --pimp-drop-shadow-lg-offset-y: 11px;
+  --pimp-drop-shadow-lg-spread: -2px;
+  --pimp-drop-shadow-md-blur: 20px;
+  --pimp-drop-shadow-md-color: var(--pimp-colors-grey-shadow-color-15);
+  --pimp-drop-shadow-md-offset-x: 0;
+  --pimp-drop-shadow-md-offset-y: 9px;
+  --pimp-drop-shadow-md-spread: -2px;
+  --pimp-drop-shadow-overlay-1-blur: 4px;
+  --pimp-drop-shadow-overlay-1-color: var(--pimp-colors-grey-shadow-color-4);
+  --pimp-drop-shadow-overlay-1-offset-x: 0;
+  --pimp-drop-shadow-overlay-1-offset-y: 2px;
+  --pimp-drop-shadow-overlay-1-spread: 0;
+  --pimp-drop-shadow-overlay-2-blur: 8px;
+  --pimp-drop-shadow-overlay-2-color: var(--pimp-colors-grey-shadow-color-4);
+  --pimp-drop-shadow-overlay-2-offset-x: 0;
+  --pimp-drop-shadow-overlay-2-offset-y: 5px;
+  --pimp-drop-shadow-overlay-2-spread: 0;
+  --pimp-drop-shadow-overlay-3-blur: 18px;
+  --pimp-drop-shadow-overlay-3-color: var(--pimp-colors-grey-shadow-color-3);
+  --pimp-drop-shadow-overlay-3-offset-x: 0;
+  --pimp-drop-shadow-overlay-3-offset-y: 10px;
+  --pimp-drop-shadow-overlay-3-spread: 0;
+  --pimp-drop-shadow-overlay-4-blur: 48px;
+  --pimp-drop-shadow-overlay-4-color: var(--pimp-colors-grey-shadow-color-3);
+  --pimp-drop-shadow-overlay-4-offset-x: 0;
+  --pimp-drop-shadow-overlay-4-offset-y: 24px;
+  --pimp-drop-shadow-overlay-4-spread: 0;
+  --pimp-drop-shadow-overlay-5-blur: 0;
+  --pimp-drop-shadow-overlay-5-color: var(--pimp-colors-grey-shadow-color-10);
+  --pimp-drop-shadow-overlay-5-offset-x: 0;
+  --pimp-drop-shadow-overlay-5-offset-y: 0;
+  --pimp-drop-shadow-overlay-5-spread: 1px;
+  --pimp-drop-shadow-side-panel-blur: 60px;
+  --pimp-drop-shadow-side-panel-color: var(--pimp-colors-grey-shadow-color-10);
+  --pimp-drop-shadow-side-panel-offset-x: 0;
+  --pimp-drop-shadow-side-panel-offset-y: 0;
+  --pimp-drop-shadow-side-panel-spread: 0;
+  --pimp-drop-shadow-sm-blur: 16px;
+  --pimp-drop-shadow-sm-color: var(--pimp-colors-grey-shadow-color-12-5);
+  --pimp-drop-shadow-sm-offset-x: 0;
+  --pimp-drop-shadow-sm-offset-y: 7px;
+  --pimp-drop-shadow-sm-spread: -2px;
+  --pimp-drop-shadow-xl-blur: 30px;
+  --pimp-drop-shadow-xl-color: var(--pimp-colors-grey-shadow-color-20);
+  --pimp-drop-shadow-xl-offset-x: 0;
+  --pimp-drop-shadow-xl-offset-y: 13px;
+  --pimp-drop-shadow-xl-spread: -2px;
+  --pimp-drop-shadow-xs-blur: 11px;
+  --pimp-drop-shadow-xs-color: var(--pimp-colors-grey-shadow-color-12-5);
+  --pimp-drop-shadow-xs-offset-x: 0;
+  --pimp-drop-shadow-xs-offset-y: 5px;
+  --pimp-drop-shadow-xs-spread: -2px;
+}

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

@@ -8,3 +8,47 @@ $space-sm: math.div($space, 2);
 $space-md: $space * 1.5;
 $space-lg: $space * 2;
 $space-xl: $space * 3;
+
+:root {
+  --pimp-letter-spacing-2xl: 0;
+  --pimp-letter-spacing-3xl: 0;
+  --pimp-letter-spacing-4xl: 0;
+  --pimp-letter-spacing-5xl: 0;
+  --pimp-letter-spacing-6xl: 0;
+  --pimp-letter-spacing-7xl: 0;
+  --pimp-letter-spacing-8xl: 0;
+  --pimp-letter-spacing-9xl: 0;
+  --pimp-letter-spacing-lg: 0;
+  --pimp-letter-spacing-md: 0;
+  --pimp-letter-spacing-sm: 0;
+  --pimp-letter-spacing-xl: 0;
+  --pimp-letter-spacing-xs: 0;
+
+  --pimp-line-height-2xl: 32;
+  --pimp-line-height-3xl: 36;
+  --pimp-line-height-4xl: 40;
+  --pimp-line-height-5xl: 56;
+  --pimp-line-height-6xl: 72;
+  --pimp-line-height-7xl: 80;
+  --pimp-line-height-8xl: 96;
+  --pimp-line-height-9xl: 128;
+  --pimp-line-height-lg: 28;
+  --pimp-line-height-md: 24;
+  --pimp-line-height-sm: 20;
+  --pimp-line-height-xl: 30;
+  --pimp-line-height-xs: 16;
+
+  --pimp-size-2xl: 24;
+  --pimp-size-3xl: 30;
+  --pimp-size-4xl: 36;
+  --pimp-size-5xl: 48;
+  --pimp-size-6xl: 60;
+  --pimp-size-7xl: 72;
+  --pimp-size-8xl: 96;
+  --pimp-size-9xl: 128;
+  --pimp-size-lg: 18;
+  --pimp-size-md: 16;
+  --pimp-size-sm: 14;
+  --pimp-size-xl: 20;
+  --pimp-size-xs: 12;
+}