cps-ui-kit 0.115.0 → 0.117.0

package/styles/_colors.scss

@@ -0,0 +1,267 @@
+:root {
+  //Main
+  --cps-color-energy: #ff780f;
+  --cps-color-energy-highlighten: #faece5;
+  --cps-color-energy-lighten5: #ffff9f;
+  --cps-color-energy-lighten4: #ffe883;
+  --cps-color-energy-lighten3: #ffcb68;
+  --cps-color-energy-lighten2: #ffaf4d;
+  --cps-color-energy-lighten1: #ff9331;
+  --cps-color-energy-darken1: #de5d00;
+  --cps-color-energy-darken2: #be4300;
+  --cps-color-energy-darken3: #9f2800;
+  --cps-color-energy-darken4: #820100;
+
+  --cps-color-prepared: #fa551e;
+  --cps-color-prepared-highlighten: #f9e9e5;
+  --cps-color-prepared-lighten5: #ffe4a1;
+  --cps-color-prepared-lighten4: #ffc786;
+  --cps-color-prepared-lighten3: #ffaa6c;
+  --cps-color-prepared-lighten2: #ff8e52;
+  --cps-color-prepared-lighten1: #ff7138;
+  --cps-color-prepared-darken1: #d93700;
+  --cps-color-prepared-darken2: #b91000;
+  --cps-color-prepared-darken3: #990000;
+  --cps-color-prepared-darken4: #7c0000;
+
+  --cps-color-agile: #f52d28;
+  --cps-color-agile-highlighten: #f9e6e6;
+  --cps-color-agile-lighten5: #ffc8a6;
+  --cps-color-agile-lighten4: #ffaa8b;
+  --cps-color-agile-lighten3: #ff8d71;
+  --cps-color-agile-lighten2: #ff6f58;
+  --cps-color-agile-lighten1: #ff5040;
+  --cps-color-agile-darken1: #d40010;
+  --cps-color-agile-darken2: #b30000;
+  --cps-color-agile-darken3: #930000;
+  --cps-color-agile-darken4: #760000;
+
+  --cps-color-passion: #dc0032;
+  --cps-color-passion-highlighten: #f7e3e7;
+  --cps-color-passion-lighten5: #ffb3ae;
+  --cps-color-passion-lighten4: #ff9693;
+  --cps-color-passion-lighten3: #ff7879;
+  --cps-color-passion-lighten2: #ff5a61;
+  --cps-color-passion-lighten1: #fd3849;
+  --cps-color-passion-darken1: #bc001d;
+  --cps-color-passion-darken2: #9b0007;
+  --cps-color-passion-darken3: #7d0000;
+  --cps-color-passion-darken4: #600000;
+
+  --cps-color-warmth: #be0028;
+  --cps-color-warmth-highlighten: #f3e3e6;
+  --cps-color-warmth-lighten5: #ffa9a2;
+  --cps-color-warmth-lighten4: #ff8d87;
+  --cps-color-warmth-lighten3: #ff706e;
+  --cps-color-warmth-lighten2: #fe5255;
+  --cps-color-warmth-lighten1: #de333e;
+  --cps-color-warmth-darken1: #9e0013;
+  --cps-color-warmth-darken2: #800000;
+  --cps-color-warmth-darken3: #630000;
+  --cps-color-warmth-darken4: #4b0000;
+
+  --cps-color-human: #aa052d;
+  --cps-color-human-highlighten: #f1e3e6;
+  --cps-color-human-lighten5: #ffa4a7;
+  --cps-color-human-lighten4: #ff888d;
+  --cps-color-human-lighten3: #ff6c73;
+  --cps-color-human-lighten2: #e84f5a;
+  --cps-color-human-lighten1: #c93143;
+  --cps-color-human-darken1: #8b0019;
+  --cps-color-human-darken2: #6d0000;
+  --cps-color-human-darken3: #520000;
+  --cps-color-human-darken4: #400000;
+
+  --cps-color-grounded: #960528;
+  --cps-color-grounded-highlighten: #f0e3e6;
+  --cps-color-grounded-lighten5: #ff9ea1;
+  --cps-color-grounded-lighten4: #ff8286;
+  --cps-color-grounded-lighten3: #f2666d;
+  --cps-color-grounded-lighten2: #d34b55;
+  --cps-color-grounded-lighten1: #b42e3e;
+  --cps-color-grounded-darken1: #780014;
+  --cps-color-grounded-darken2: #5c0000;
+  --cps-color-grounded-darken3: #440000;
+  --cps-color-grounded-darken4: #390000;
+
+  --cps-color-care: #f05a7d;
+  --cps-color-care-highlighten: #f8e9ed;
+  --cps-color-care-lighten5: #ffe9ff;
+  --cps-color-care-lighten4: #ffcce9;
+  --cps-color-care-lighten3: #ffafcd;
+  --cps-color-care-lighten2: #ff93b1;
+  --cps-color-care-lighten1: #ff7697;
+  --cps-color-care-darken1: #d13d64;
+  --cps-color-care-darken2: #b31a4c;
+  --cps-color-care-darken3: #950036;
+  --cps-color-care-darken4: #770021;
+
+  --cps-color-smile: #f0325a;
+  --cps-color-smile-highlighten: #f8e7e9;
+  --cps-color-smile-lighten5: #ffcbdd;
+  --cps-color-smile-lighten4: #ffadc1;
+  --cps-color-smile-lighten3: #ff90a6;
+  --cps-color-smile-lighten2: #ff728c;
+  --cps-color-smile-lighten1: #ff5472;
+  --cps-color-smile-darken1: #d00043;
+  --cps-color-smile-darken2: #b0002d;
+  --cps-color-smile-darken3: #910019;
+  --cps-color-smile-darken4: #720000;
+
+  --cps-color-surprise: #af144b;
+  --cps-color-surprise-highlighten: #f2e4e9;
+  --cps-color-surprise-lighten5: #ffaccb;
+  --cps-color-surprise-lighten4: #ff8fb0;
+  --cps-color-surprise-lighten3: #ff7395;
+  --cps-color-surprise-lighten2: #ec577b;
+  --cps-color-surprise-lighten1: #cd3963;
+  --cps-color-surprise-darken1: #910035;
+  --cps-color-surprise-darken2: #730020;
+  --cps-color-surprise-darken3: #560008;
+  --cps-color-surprise-darken4: #400000;
+
+  --cps-color-calm: #870a3c;
+  --cps-color-calm-highlighten: #efe4e7;
+  --cps-color-calm-lighten5: #ff9bb9;
+  --cps-color-calm-lighten4: #fd809e;
+  --cps-color-calm-lighten3: #df6584;
+  --cps-color-calm-lighten2: #c14a6b;
+  --cps-color-calm-lighten1: #a42e53;
+  --cps-color-calm-darken1: #6b0027;
+  --cps-color-calm-darken2: #4f0012;
+  --cps-color-calm-darken3: #390000;
+  --cps-color-calm-darken4: #300000;
+
+  --cps-color-luxury: #640032;
+  --cps-color-luxury-highlighten: #ebe3e6;
+  --cps-color-luxury-lighten5: #f28bad;
+  --cps-color-luxury-lighten4: #d57192;
+  --cps-color-luxury-lighten3: #b85779;
+  --cps-color-luxury-lighten2: #9b3d60;
+  --cps-color-luxury-lighten1: #7f2248;
+  --cps-color-luxury-darken1: #49001d;
+  --cps-color-luxury-darken2: #340002;
+  --cps-color-luxury-darken3: #290000;
+  --cps-color-luxury-darken4: #1c0000;
+
+  --cps-color-depth: #500a28;
+  --cps-color-depth-highlighten: #e9e3e6;
+  --cps-color-depth-lighten5: #d989a0;
+  --cps-color-depth-lighten4: #bc6f86;
+  --cps-color-depth-lighten3: #a0566d;
+  --cps-color-depth-lighten2: #853d55;
+  --cps-color-depth-lighten1: #6a253e;
+  --cps-color-depth-darken1: #370013;
+  --cps-color-depth-darken2: #290000;
+  --cps-color-depth-darken3: #1b0000;
+  --cps-color-depth-darken4: #000000;
+
+  //Darks
+  --cps-color-silver: #736464;
+  --cps-color-silver-highlighten: #edeaea;
+  --cps-color-silver-lighten5: #fbe9e9;
+  --cps-color-silver-lighten4: #decdcd;
+  --cps-color-silver-lighten3: #c2b2b1;
+  --cps-color-silver-lighten2: #a79797;
+  --cps-color-silver-lighten1: #8d7d7d;
+  --cps-color-silver-darken1: #5a4c4c;
+  --cps-color-silver-darken2: #433535;
+  --cps-color-silver-darken3: #2c2020;
+  --cps-color-silver-darken4: #190909;
+
+  --cps-color-platinum: #5a4b4b;
+  --cps-color-platinum-highlighten: #eae8e8;
+  --cps-color-platinum-lighten5: #decccc;
+  --cps-color-platinum-lighten4: #c2b0b0;
+  --cps-color-platinum-lighten3: #a79695;
+  --cps-color-platinum-lighten2: #8c7c7c;
+  --cps-color-platinum-lighten1: #736363;
+  --cps-color-platinum-darken1: #423434;
+  --cps-color-platinum-darken2: #2c1f1f;
+  --cps-color-platinum-darken3: #190707;
+  --cps-color-platinum-darken4: #000000;
+
+  --cps-color-graphite: #2d2323;
+  --cps-color-graphite-highlighten: #e7e5e5;
+  --cps-color-graphite-lighten5: #a79a9a;
+  --cps-color-graphite-lighten4: #8d8080;
+  --cps-color-graphite-lighten3: #736767;
+  --cps-color-graphite-lighten2: #5b4f4f;
+  --cps-color-graphite-lighten1: #433838;
+  --cps-color-graphite-darken1: #190d0d;
+  --cps-color-graphite-darken2: #000000;
+  --cps-color-graphite-darken3: #000000;
+  --cps-color-graphite-darken4: #000000;
+
+  //States
+  --cps-color-info: #099ef3;
+  --cps-color-info-highlighten: #e5eff8;
+  --cps-color-info-lighten5: #d0ffff;
+  --cps-color-info-lighten4: #b0ffff;
+  --cps-color-info-lighten3: #90f1ff;
+  --cps-color-info-lighten2: #6fd4ff;
+  --cps-color-info-lighten1: #49b9ff;
+  --cps-color-info-darken1: #0084d6;
+  --cps-color-info-darken2: #006bba;
+  --cps-color-info-darken3: #00539f;
+  --cps-color-info-darken4: #003d84;
+
+  --cps-color-success: #3bb719;
+  --cps-color-success-highlighten: #e8f2e6;
+  --cps-color-success-lighten5: #d5ffaa;
+  --cps-color-success-lighten4: #b7ff8e;
+  --cps-color-success-lighten3: #99ff72;
+  --cps-color-success-lighten2: #7bf057;
+  --cps-color-success-lighten1: #5dd33a;
+  --cps-color-success-darken1: #059b00;
+  --cps-color-success-darken2: #008100;
+  --cps-color-success-darken3: #006600;
+  --cps-color-success-darken4: #004d00;
+
+  --cps-color-warn: #ff9f00;
+  --cps-color-warn-highlighten: #faefe5;
+  --cps-color-warn-lighten5: #ffffa3;
+  --cps-color-warn-lighten4: #ffff87;
+  --cps-color-warn-lighten3: #fff26b;
+  --cps-color-warn-lighten2: #ffd64e;
+  --cps-color-warn-lighten1: #ffba30;
+  --cps-color-warn-darken1: #df8500;
+  --cps-color-warn-darken2: #c06b00;
+  --cps-color-warn-darken3: #a15300;
+  --cps-color-warn-darken4: #843b00;
+
+  --cps-color-error: #f60e08;
+  --cps-color-error-highlighten: #f9e4e5;
+  --cps-color-error-lighten5: #ffbd8c;
+  --cps-color-error-lighten4: #ff9f72;
+  --cps-color-error-lighten3: #ff8058;
+  --cps-color-error-lighten2: #ff623f;
+  --cps-color-error-lighten1: #ff4025;
+  --cps-color-error-darken1: #d40000;
+  --cps-color-error-darken2: #b30000;
+  --cps-color-error-darken3: #940000;
+  --cps-color-error-darken4: #760000;
+
+  // States backgrounds
+  --cps-color-info-bg: #f7fcfe;
+  --cps-color-success-bg: #f8fbf7;
+  --cps-color-warn-bg: #fffcf7;
+  --cps-color-error-bg: #fef8f8;
+
+  //Backgrounds
+  --cps-color-bg-light: #f9f8f8;
+  --cps-color-bg-mid: #f4f3f3;
+  --cps-color-bg-dark: #eeeded;
+
+  //Lines
+  --cps-color-line-light: #e3e2e2;
+  --cps-color-line-mid: #d7d5d5;
+  --cps-color-line-dark: #cac7c7;
+
+  //Text
+  --cps-color-text-darkest: #2d2323;
+  --cps-color-text-dark: #524a4a;
+  --cps-color-text-mild: #787272;
+  --cps-color-text-light: #9a9595;
+  --cps-color-text-lightest: #b5b2b2;
+}

package/styles/_fonts.scss

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url(../assets/fonts/SourceSansPro-Regular.woff2) format('woff2');
+}

package/styles/styles.scss

@@ -1,10 +1,26 @@
-@import './bootstrap-grid';
-@import './variables.scss';
-@import './fonts.scss';
-@import './cps-tooltip-style.scss';
+@import './_bootstrap-grid';
+@import './_colors.scss';
+@import './_fonts.scss';
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
+
+.cps-tooltip {
+  position: absolute;
+  top: 0;
+  cursor: default;
+  font-size: 14px;
+  background: #f9f5f6;
+  color: var(--cps-color-text-darkest);
+  font-family: 'Source Sans Pro', sans-serif;
+  border: 1px solid var(--cps-color-calm);
+  overflow-wrap: break-word;
+  border-radius: 3px;
+  padding: 3px;
+  transition: opacity 0.2s;
+  opacity: 0;
+  z-index: 1500;
+}