feat(core-components-vars): update primitives (#291)

core-ds · Oct 6, 2020 · d995190 · d995190
1 parent a57c74f
commit d995190
Show file tree

Hide file tree

Showing 6 changed files with 269 additions and 112 deletions.
diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "@alfalab/icons-logotype": "^1.4.0",
     "@alfalab/utils": "^0.3.0",
     "@popperjs/core": "^2.3.3",
-    "alfa-ui-primitives": "^2.58.0",
+    "alfa-ui-primitives": "^2.76.0",
     "compute-scroll-into-view": "^1.0.13",
     "downshift": "5.4.7",
     "lodash.debounce": "^4.0.8",

diff --git a/packages/vars/src/colors-addons.css b/packages/vars/src/colors-addons.css
@@ -1,9 +1,14 @@
 :root {
     --color-static-graphic-amethyst: #a489aa;
-    --color-static-graphic-lavender: #8888ad;
+    --color-static-graphic-blue-maya: #7eb3ff;
     --color-static-graphic-blue-moody: #7879cf;
-    --color-static-graphic-persimmon: #ff5c5c;
+    --color-static-graphic-botticelli: #cee5e5;
+    --color-static-graphic-gallery: #eee;
     --color-static-graphic-green-jungle: #2fc26e;
+    --color-static-graphic-lavender: #8888ad;
+    --color-static-graphic-persimmon: #ff5c5c;
+    --color-static-graphic-salomie: #fee984;
     --color-static-graphic-sand: #f6bf65;
-    --color-static-graphic-blue-maya: #7eb3ff;
+    --color-static-graphic-soft-peach: #f3eaeb;
+    --color-static-graphic-solitude: #e8f2fe;
 }
diff --git a/packages/vars/src/colors-bluetint.css b/packages/vars/src/colors-bluetint.css
@@ -0,0 +1,128 @@
+:root {
+    --color-dark-bg-accent: #e81f11;
+    --color-dark-bg-attention-muted: #332104;
+    --color-dark-bg-info: #001c3c;
+    --color-dark-bg-negative-muted: #35110d;
+    --color-dark-bg-neutral: #3a3a3c;
+    --color-dark-bg-opaque: rgba(255, 255, 255, 0.8);
+    --color-dark-bg-overlay: rgba(0, 0, 0, 0.6);
+    --color-dark-bg-positive-muted: #042117;
+    --color-dark-bg-primary: #000;
+    --color-dark-bg-primary-inverted: #fff;
+    --color-dark-bg-secondary: #1c1c1e;
+    --color-dark-bg-secondary-inverted: #f3f4f5;
+    --color-dark-bg-tertiary: #2c2c2e;
+    --color-dark-bg-tertiary-inverted: #e9e9eb;
+    --color-dark-border-accent: #e81f11;
+    --color-dark-border-key: #fff;
+    --color-dark-border-key-inverted: #000;
+    --color-dark-border-primary: #2b2b2e;
+    --color-dark-border-secondary: #262629;
+    --color-dark-border-secondary-inverted: #e9e9eb;
+    --color-dark-border-tertiary: #1c1c1e;
+    --color-dark-border-tertiary-inverted: #f3f4f5;
+    --color-dark-graphic-accent: #e81f11;
+    --color-dark-graphic-attention: #f6bf65;
+    --color-dark-graphic-link: #0072ef;
+    --color-dark-graphic-negative: #d44333;
+    --color-dark-graphic-neutral: #2a2a2c;
+    --color-dark-graphic-positive: #11865b;
+    --color-dark-graphic-primary: #fff;
+    --color-dark-graphic-primary-inverted: #1c1c1e;
+    --color-dark-graphic-secondary: #8d8d93;
+    --color-dark-graphic-tertiary: #464649;
+    --color-dark-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-dark-specialbg-primary-grouped: #000;
+    --color-dark-specialbg-secondary-grouped: #1c1c1e;
+    --color-dark-specialbg-tertiary-grouped: #2c2c2e;
+    --color-dark-text-accent: #e81f11;
+    --color-dark-text-attention: #cb830f;
+    --color-dark-text-disabled: #2a2a2c;
+    --color-dark-text-disabled-transparent: rgba(235, 235, 245, 0.18);
+    --color-dark-text-link: #0072ef;
+    --color-dark-text-negative: #d44333;
+    --color-dark-text-positive: #11865b;
+    --color-dark-text-primary: #fff;
+    --color-dark-text-primary-inverted: #000;
+    --color-dark-text-secondary: #8d8d93;
+    --color-dark-text-secondary-inverted: #8a8a8e;
+    --color-dark-text-secondary-inverted-transparent: rgba(60, 60, 67, 0.6);
+    --color-dark-text-secondary-transparent: rgba(235, 235, 245, 0.6);
+    --color-dark-text-tertiary: #464649;
+    --color-dark-text-tertiary-inverted: #c5c5c7;
+    --color-dark-text-tertiary-inverted-transparent: rgba(60, 60, 67, 0.3);
+    --color-dark-text-tertiary-transparent: rgba(235, 235, 245, 0.3);
+    --color-light-bg-accent: #e81f11;
+    --color-light-bg-attention-muted: #f7ebd9;
+    --color-light-bg-info: #d6e8fc;
+    --color-light-bg-negative-muted: #f8e1de;
+    --color-light-bg-neutral: #dcdcdd;
+    --color-light-bg-opaque: rgba(255, 255, 255, 0.8);
+    --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
+    --color-light-bg-positive-muted: #d9ece5;
+    --color-light-bg-primary: #fff;
+    --color-light-bg-primary-inverted: #000;
+    --color-light-bg-secondary: #f3f4f5;
+    --color-light-bg-secondary-inverted: #1c1c1e;
+    --color-light-bg-tertiary: #e9e9eb;
+    --color-light-bg-tertiary-inverted: #2c2c2e;
+    --color-light-border-accent: #e81f11;
+    --color-light-border-key: #000;
+    --color-light-border-key-inverted: #fff;
+    --color-light-border-primary: #dcdcdd;
+    --color-light-border-secondary: #e9e9eb;
+    --color-light-border-secondary-inverted: #262629;
+    --color-light-border-tertiary: #f3f4f5;
+    --color-light-border-tertiary-inverted: #1c1c1e;
+    --color-light-graphic-accent: #e81f11;
+    --color-light-graphic-attention: #f6bf65;
+    --color-light-graphic-link: #0072ef;
+    --color-light-graphic-negative: #d44333;
+    --color-light-graphic-neutral: #dcdcdd;
+    --color-light-graphic-positive: #11865b;
+    --color-light-graphic-primary: #000;
+    --color-light-graphic-primary-inverted: #f3f4f5;
+    --color-light-graphic-secondary: #8a8a8e;
+    --color-light-graphic-tertiary: #c5c5c7;
+    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-specialbg-primary-grouped: #f3f4f5;
+    --color-light-specialbg-secondary-grouped: #fff;
+    --color-light-specialbg-tertiary-grouped: #f3f4f5;
+    --color-light-text-accent: #e81f11;
+    --color-light-text-attention: #cb830f;
+    --color-light-text-disabled: #dcdcdd;
+    --color-light-text-disabled-transparent: rgba(60, 60, 67, 0.18);
+    --color-light-text-link: #0072ef;
+    --color-light-text-negative: #d44333;
+    --color-light-text-positive: #11865b;
+    --color-light-text-primary: #000;
+    --color-light-text-primary-inverted: #fff;
+    --color-light-text-secondary: #8a8a8e;
+    --color-light-text-secondary-inverted: #8d8d93;
+    --color-light-text-secondary-inverted-transparent: rgba(235, 235, 245, 0.6);
+    --color-light-text-secondary-transparent: rgba(60, 60, 67, 0.6);
+    --color-light-text-tertiary: #c5c5c7;
+    --color-light-text-tertiary-inverted: #464649;
+    --color-light-text-tertiary-inverted-transparent: rgba(235, 235, 245, 0.3);
+    --color-light-text-tertiary-transparent: rgba(60, 60, 67, 0.3);
+    --color-static-bg-accent: #e81f11;
+    --color-static-bg-primary-dark: #000;
+    --color-static-bg-primary-light: #fff;
+    --color-static-bg-secondary-dark: #1c1c1e;
+    --color-static-bg-secondary-light: #f3f4f5;
+    --color-static-border-accent: #e81f11;
+    --color-static-graphic-accent: #ef3124;
+    --color-static-graphic-dark: #000;
+    --color-static-graphic-light: #fff;
+    --color-static-text-accent: #e81f11;
+    --color-static-text-primary-dark: #000;
+    --color-static-text-primary-light: #fff;
+    --color-static-text-secondary-dark: #8a8a8e;
+    --color-static-text-secondary-dark-transparent: rgba(60, 60, 67, 0.6);
+    --color-static-text-secondary-light: #8d8d93;
+    --color-static-text-secondary-light-transparent: rgba(235, 235, 245, 0.6);
+    --color-static-text-tertiary-dark: #c5c5c7;
+    --color-static-text-tertiary-dark-transparent: rgba(60, 60, 67, 0.3);
+    --color-static-text-tertiary-light: #464649;
+    --color-static-text-tertiary-light-transparent: rgba(235, 235, 245, 0.3);
+}
diff --git a/packages/vars/src/colors-indigo.css b/packages/vars/src/colors-indigo.css
@@ -1,126 +1,128 @@
 :root {
-    --color-light-border-secondary-inverted: #b6bcc3;
-    --color-light-border-key-inverted: #fff;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-dark-bg-accent: #ef3124;
+    --color-dark-bg-attention-muted: #432000;
+    --color-dark-bg-negative-muted: #410903;
+    --color-dark-bg-neutral: #485767;
+    --color-dark-bg-opaque: rgba(11, 31, 53, 0.6);
+    --color-dark-bg-overlay: rgba(0, 0, 0, 0.6);
+    --color-dark-bg-positive-muted: #06311e;
+    --color-dark-bg-primary: #0b1f35;
+    --color-dark-bg-primary-inverted: #fff;
+    --color-dark-bg-secondary: #233549;
+    --color-dark-bg-secondary-inverted: #b6bcc3;
+    --color-dark-bg-tertiary: #3c4c5d;
+    --color-dark-bg-tertiary-inverted: #6d7986;
+    --color-dark-border-accent: #ef3124;
+    --color-dark-border-key: #fff;
+    --color-dark-border-key-inverted: #0b1f35;
+    --color-dark-border-link: #007aff;
+    --color-dark-border-primary: #485767;
+    --color-dark-border-secondary: #3c4c5d;
+    --color-dark-border-secondary-inverted: #6d7986;
+    --color-dark-border-tertiary: #233549;
+    --color-dark-border-tertiary-inverted: #b6bcc3;
+    --color-dark-graphic-accent: #ef3124;
+    --color-dark-graphic-attention: #e58933;
+    --color-dark-graphic-link: #007aff;
+    --color-dark-graphic-negative: #f15045;
+    --color-dark-graphic-neutral: #485767;
+    --color-dark-graphic-positive: #2fc26e;
+    --color-dark-graphic-primary: #fff;
+    --color-dark-graphic-primary-inverted: #233549;
+    --color-dark-graphic-secondary: #b6bcc3;
+    --color-dark-graphic-tertiary: #6d7986;
+    --color-dark-specialbg-component: #485767;
+    --color-dark-specialbg-nulled: rgba(11, 31, 53, 0);
+    --color-dark-specialbg-primary-grouped: #0b1f35;
+    --color-dark-specialbg-secondary-grouped: #233549;
+    --color-dark-specialbg-tertiary-grouped: #3c4c5d;
+    --color-dark-text-accent: #ef3124;
+    --color-dark-text-attention: #de6a00;
+    --color-dark-text-disabled: #485767;
+    --color-dark-text-disabled-transparent: rgba(255, 255, 255, 0.25);
+    --color-dark-text-link: #007aff;
+    --color-dark-text-negative: #d91d0b;
+    --color-dark-text-positive: #13a463;
+    --color-dark-text-primary: #fff;
+    --color-dark-text-primary-inverted: #0b1f35;
+    --color-dark-text-secondary: #b6bcc3;
+    --color-dark-text-secondary-inverted: #6d7986;
+    --color-dark-text-secondary-inverted-transparent: rgba(11, 31, 53, 0.6);
+    --color-dark-text-secondary-transparent: rgba(255, 255, 255, 0.7);
+    --color-dark-text-tertiary: #6d7986;
+    --color-dark-text-tertiary-inverted: #b6bcc3;
+    --color-dark-text-tertiary-inverted-transparent: rgba(11, 31, 53, 0.3);
+    --color-dark-text-tertiary-transparent: rgba(255, 255, 255, 0.4);
+    --color-light-bg-accent: #ef3124;
+    --color-light-bg-attention-muted: #fff3e0;
+    --color-light-bg-negative-muted: #feebea;
+    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-opaque: rgba(255, 255, 255, 0.6);
     --color-light-bg-overlay: rgba(0, 0, 0, 0.6);
-    --color-light-specialbg-tertiary-grouped: #f3f4f5;
-    --color-light-specialbg-primary-grouped: #f3f4f5;
-    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-bg-positive-muted: #ebf9f1;
+    --color-light-bg-primary: #fff;
+    --color-light-bg-primary-inverted: #0b1f35;
     --color-light-bg-secondary: #f3f4f5;
+    --color-light-bg-secondary-inverted: #233549;
     --color-light-bg-tertiary: #e7e9eb;
-    --color-light-bg-neutral: #dbdee1;
-    --color-light-graphic-attention: #e58933;
-    --color-light-text-tertiary: #b6bcc3;
+    --color-light-bg-tertiary-inverted: #3c4c5d;
+    --color-light-border-accent: #ef3124;
+    --color-light-border-key: #0b1f35;
+    --color-light-border-key-inverted: #fff;
+    --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
-    --color-light-text-disabled-transparent: rgba(11, 31, 53, 0.15);
-    --color-light-graphic-accent: #ef3124;
+    --color-light-border-secondary: #e7e9eb;
+    --color-light-border-secondary-inverted: #b6bcc3;
     --color-light-border-tertiary: #f3f4f5;
-    --color-light-border-accent: #ef3124;
-    --color-light-bg-secondary-inverted: #233549;
-    --color-light-bg-positive-muted: #ebf9f1;
+    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-graphic-accent: #ef3124;
+    --color-light-graphic-attention: #e58933;
+    --color-light-graphic-link: #007aff;
+    --color-light-graphic-negative: #f15045;
     --color-light-graphic-neutral: #dbdee1;
-    --color-light-text-disabled: #dbdee1;
-    --color-light-border-key: #0b1f35;
-    --color-light-specialbg-secondary-grouped: #fff;
-    --color-light-text-accent: #ef3124;
-    --color-light-text-tertiary-inverted-transparent: rgba(255, 255, 255, 0.4);
     --color-light-graphic-positive: #2fc26e;
-    --color-light-text-primary: #0b1f35;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #f3f4f5;
+    --color-light-graphic-secondary: #6d7986;
+    --color-light-graphic-tertiary: #b6bcc3;
     --color-light-specialbg-component: #eeeff1;
-    --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.6);
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
-    --color-light-graphic-negative: #f15045;
+    --color-light-specialbg-nulled: rgba(255, 255, 255, 0);
+    --color-light-specialbg-primary-grouped: #f3f4f5;
+    --color-light-specialbg-secondary-grouped: #fff;
+    --color-light-specialbg-tertiary-grouped: #f3f4f5;
+    --color-light-text-accent: #ef3124;
     --color-light-text-attention: #de6a00;
+    --color-light-text-disabled: #dbdee1;
+    --color-light-text-disabled-transparent: rgba(11, 31, 53, 0.15);
+    --color-light-text-link: #007aff;
+    --color-light-text-negative: #d91d0b;
     --color-light-text-positive: #13a463;
-    --color-light-bg-primary: #fff;
-    --color-light-graphic-secondary: #6d7986;
-    --color-light-graphic-link: #007aff;
+    --color-light-text-primary: #0b1f35;
+    --color-light-text-primary-inverted: #fff;
     --color-light-text-secondary: #6d7986;
-    --color-light-graphic-tertiary: #b6bcc3;
+    --color-light-text-secondary-inverted: #b6bcc3;
+    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
+    --color-light-text-secondary-transparent: rgba(11, 31, 53, 0.6);
+    --color-light-text-tertiary: #b6bcc3;
     --color-light-text-tertiary-inverted: #6d7986;
+    --color-light-text-tertiary-inverted-transparent: rgba(255, 255, 255, 0.4);
     --color-light-text-tertiary-transparent: rgba(11, 31, 53, 0.3);
-    --color-light-bg-opaque: rgba(255, 255, 255, 0.6);
-    --color-light-bg-tertiary-inverted: #3c4c5d;
-    --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary-inverted: #b6bcc3;
-    --color-light-bg-accent: #ef3124;
-    --color-light-border-secondary: #e7e9eb;
-    --color-light-text-link: #007aff;
-    --color-light-text-negative: #d91d0b;
-    --color-light-graphic-primary: #0b1f35;
-    --color-light-bg-attention-muted: #fff3e0;
-    --color-light-bg-primary-inverted: #0b1f35;
-    --color-light-bg-negative-muted: #feebea;
-    --color-light-graphic-primary-inverted: #f3f4f5;
-    --color-dark-border-secondary-inverted: #6d7986;
-    --color-dark-border-tertiary-inverted: #b6bcc3;
-    --color-dark-border-key-inverted: #0b1f35;
-    --color-dark-bg-opaque: rgba(11, 31, 53, 0.6);
-    --color-dark-bg-overlay: rgba(0, 0, 0, 0.6);
-    --color-dark-graphic-link: #007aff;
-    --color-dark-text-primary: #fff;
-    --color-dark-bg-primary: #0b1f35;
-    --color-dark-bg-positive-muted: #06311e;
-    --color-dark-border-secondary: #3c4c5d;
-    --color-dark-specialbg-nulled: rgba(11, 31, 53, 0);
-    --color-dark-text-secondary-transparent: rgba(255, 255, 255, 0.7);
-    --color-dark-bg-tertiary: #3c4c5d;
-    --color-dark-text-disabled: #485767;
-    --color-dark-border-key: #fff;
-    --color-dark-graphic-secondary: #b6bcc3;
-    --color-dark-graphic-positive: #2fc26e;
-    --color-dark-text-tertiary-inverted-transparent: rgba(11, 31, 53, 0.3);
-    --color-dark-text-disabled-transparent: rgba(255, 255, 255, 0.25);
-    --color-dark-text-attention: #de6a00;
-    --color-dark-graphic-neutral: #485767;
-    --color-dark-graphic-negative: #f15045;
-    --color-dark-text-tertiary-transparent: rgba(255, 255, 255, 0.4);
-    --color-dark-graphic-accent: #ef3124;
-    --color-dark-graphic-primary-inverted: #233549;
-    --color-dark-border-accent: #ef3124;
-    --color-dark-text-tertiary: #6d7986;
-    --color-dark-text-secondary-inverted-transparent: rgba(11, 31, 53, 0.6);
-    --color-dark-bg-accent: #ef3124;
-    --color-dark-bg-attention-muted: #432000;
-    --color-dark-text-accent: #ef3124;
-    --color-dark-specialbg-component: #485767;
-    --color-dark-border-primary: #485767;
-    --color-dark-text-tertiary-inverted: #b6bcc3;
-    --color-dark-text-secondary-inverted: #6d7986;
-    --color-dark-text-secondary: #b6bcc3;
-    --color-dark-specialbg-tertiary-grouped: #3c4c5d;
-    --color-dark-graphic-tertiary: #6d7986;
-    --color-dark-specialbg-secondary-grouped: #233549;
-    --color-dark-graphic-attention: #e58933;
-    --color-dark-border-tertiary: #233549;
-    --color-dark-specialbg-primary-grouped: #0b1f35;
-    --color-dark-bg-neutral: #485767;
-    --color-dark-text-primary-inverted: #0b1f35;
-    --color-dark-text-positive: #13a463;
-    --color-dark-bg-secondary-inverted: #b6bcc3;
-    --color-dark-bg-primary-inverted: #fff;
-    --color-dark-text-negative: #d91d0b;
-    --color-dark-text-link: #007aff;
-    --color-dark-graphic-primary: #fff;
-    --color-dark-bg-tertiary-inverted: #6d7986;
-    --color-dark-bg-secondary: #233549;
-    --color-dark-bg-negative-muted: #410903;
-    --color-static-text-tertiary-light-transparent: rgba(255, 255, 255, 0.4);
-    --color-static-bg-dark: #000;
-    --color-static-text-secondary-dark: #6d7986;
     --color-static-bg-accent: #ef3124;
+    --color-static-bg-dark: #000;
+    --color-static-bg-light: #fff;
     --color-static-border-accent: #ef3124;
+    --color-static-graphic-accent: #ef3124;
     --color-static-graphic-dark: #0b1f35;
-    --color-static-text-secondary-light-transparent: rgba(255, 255, 255, 0.7);
+    --color-static-graphic-light: #fff;
+    --color-static-text-accent: #ef3124;
     --color-static-text-primary-dark: #0b1f35;
-    --color-static-bg-light: #fff;
+    --color-static-text-primary-light: #fff;
+    --color-static-text-secondary-dark: #6d7986;
+    --color-static-text-secondary-dark-transparent: rgba(11, 31, 53, 0.6);
+    --color-static-text-secondary-light: #b6bcc3;
+    --color-static-text-secondary-light-transparent: rgba(255, 255, 255, 0.7);
     --color-static-text-tertiary-dark: #b6bcc3;
-    --color-static-graphic-accent: #ef3124;
     --color-static-text-tertiary-dark-transparent: rgba(11, 31, 53, 0.3);
-    --color-static-text-secondary-dark-transparent: rgba(11, 31, 53, 0.6);
-    --color-static-text-accent: #ef3124;
     --color-static-text-tertiary-light: #6d7986;
-    --color-static-text-secondary-light: #b6bcc3;
-    --color-static-text-primary-light: #fff;
-    --color-static-graphic-light: #fff;
+    --color-static-text-tertiary-light-transparent: rgba(255, 255, 255, 0.4);
 }