@alfalab/core-components-vars 7.2.0 → 7.3.1

package/cssm/index.css

@@ -68,106 +68,7 @@
     --color-bg-corporate-60-flat: #7a7f85;
     --color-bg-corporate-30-flat: #bdc0c2;
     --color-light-blue: #f5f7f9;
-}
-:root {
-    --color-static-corpbg-neutral: #bdc0c2;
-    --color-static-corpbg-primary: #212a33;
-    --color-static-corpbg-secondary: #384048;
-    --color-static-corpbg-tertiary: #7a7f85;
-    --color-static-graphic-amethyst: #a489aa;
-    --color-static-graphic-blackberry: #bfafc6;
-    --color-static-graphic-blue-chill: #0f9c8c;
-    --color-static-graphic-blue-maya: #7eb3ff;
-    --color-static-graphic-blue-moody: #7879cf;
-    --color-static-graphic-blue-steel: #4f84ba;
-    --color-static-graphic-botticelli: #cee5e5;
-    --color-static-graphic-boulder: #7a7a7a;
-    --color-static-graphic-brink-pink: #fc617c;
-    --color-static-graphic-burnt-sienna: #eb7a58;
-    --color-static-graphic-carrot: #e8bba3;
-    --color-static-graphic-chatelle: #bfafc6;
-    --color-static-graphic-chathams-blue: #155966;
-    --color-static-graphic-chick: #f2db9e;
-    --color-static-graphic-crete: #847128;
-    --color-static-graphic-curious-blue: #2381db;
-    --color-static-graphic-curious-blue-light: #3b99d9;
-    --color-static-graphic-eastern-blue: #269cb3;
-    --color-static-graphic-french-lilac: #d3baed;
-    --color-static-graphic-fuel-yellow: #f29d32;
-    --color-static-graphic-fun-blue: #1d6ab5;
-    --color-static-graphic-gallery: #eee;
-    --color-static-graphic-green-jungle: #2fc26e;
-    --color-static-graphic-hippie-blue: #5aa4b0;
-    --color-static-graphic-jaffa: #f07134;
-    --color-static-graphic-jaffa-light: #f18836;
-    --color-static-graphic-java: #15c0e0;
-    --color-static-graphic-jungle-green: #2ab79a;
-    --color-static-graphic-lavender: #8888ad;
-    --color-static-graphic-mantis: #63cd4f;
-    --color-static-graphic-matisse: #16548f;
-    --color-static-graphic-milano-red: #cd1501;
-    --color-static-graphic-mirage: #1d2434;
-    --color-static-graphic-moon-raker: #e9dbf7;
-    --color-static-graphic-moss-green: #a6d29c;
-    --color-static-graphic-nevada: #626b75;
-    --color-static-graphic-olive: #bfd3c9;
-    --color-static-graphic-olivine: #87b965;
-    --color-static-graphic-peach: #fcc99b;
-    --color-static-graphic-persimmon: #ff5c5c;
-    --color-static-graphic-pewter: #96a5a5;
-    --color-static-graphic-pickled-bluewood: #2d3f50;
-    --color-static-graphic-porsche: #e7b965;
-    --color-static-graphic-raspberry: #dfb2bb;
-    --color-static-graphic-red-damask: #da713c;
-    --color-static-graphic-saffron: #f0c330;
-    --color-static-graphic-salomie: #fee984;
-    --color-static-graphic-sand: #f6bf65;
-    --color-static-graphic-sandy-brown: #f38f6f;
-    --color-static-graphic-seawater: #aecfd9;
-    --color-static-graphic-serenade: #fff0e3;
-    --color-static-graphic-sky: #a6c0db;
-    --color-static-graphic-soft-peach: #f3eaeb;
-    --color-static-graphic-solitude: #e8f2fe;
-    --color-static-graphic-strawberry: #f8b6a9;
-    --color-static-graphic-sundust: #d9d6ce;
-    --color-static-graphic-turkish-rose: #b56a6b;
-    --color-static-graphic-turquoise-blue: #6bd3e6;
-    --color-static-graphic-valencia: #d8463b;
-    --color-static-graphic-waikawa-gray: #5b6d9c;
-    --color-static-graphic-whisper: #f2eff6;
-    --color-static-graphic-zanah: #e1f0de;
-    --color-static-local-light-blue: #f5f7f9;
-    --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
-    --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);
-    --color-static-overlay-black-normal: rgba(0, 0, 0, 0.24);
-    --color-static-overlay-black-xhigh: rgba(0, 0, 0, 0.4);
-    --color-static-overlay-black-xlow: rgba(0, 0, 0, 0.08);
-    --color-static-overlay-indigo-high: rgba(11, 31, 53, 0.32);
-    --color-static-overlay-indigo-low: rgba(11, 31, 53, 0.16);
-    --color-static-overlay-indigo-normal: rgba(11, 31, 53, 0.24);
-    --color-static-overlay-indigo-xhigh: rgba(11, 31, 53, 0.4);
-    --color-static-overlay-indigo-xlow: rgba(11, 31, 53, 0.08);
-    --color-static-overlay-white-high: rgba(255, 255, 255, 0.32);
-    --color-static-overlay-white-low: rgba(255, 255, 255, 0.16);
-    --color-static-overlay-white-normal: rgba(255, 255, 255, 0.24);
-    --color-static-overlay-white-xhigh: rgba(255, 255, 255, 0.4);
-    --color-static-overlay-white-xlow: rgba(255, 255, 255, 0.08);
-    --color-static-status-blue: #007aff;
-    --color-static-status-green: #13a463;
-    --color-static-status-grey: #6d7986;
-    --color-static-status-orange: #de6a00;
-    --color-static-status-purple: #673ab7;
-    --color-static-status-red: #d91d0b;
-    --color-static-status-teal: #219187;
-    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
-    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
-    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
-    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
-    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
-    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
-    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
-}
-:root {
+} /* deprecated */ :root {
     --color-dark-bg-accent: #ef3124;
     --color-dark-bg-attention-muted: #432000;
     --color-dark-bg-info: #001c3c;
@@ -619,8 +520,104 @@
     --color-static-bg-primary-dark-alpha-10: rgba(11, 31, 53, 0.1);
     --color-static-bg-primary-dark-alpha-20: rgba(11, 31, 53, 0.2);
     --color-static-text-primary-light-alpha-30: rgba(255, 255, 255, 0.3);
-}
-:root {
+} :root {
+    --color-static-corpbg-neutral: #bdc0c2;
+    --color-static-corpbg-primary: #212a33;
+    --color-static-corpbg-secondary: #384048;
+    --color-static-corpbg-tertiary: #7a7f85;
+    --color-static-graphic-amethyst: #a489aa;
+    --color-static-graphic-blackberry: #bfafc6;
+    --color-static-graphic-blue-chill: #0f9c8c;
+    --color-static-graphic-blue-maya: #7eb3ff;
+    --color-static-graphic-blue-moody: #7879cf;
+    --color-static-graphic-blue-steel: #4f84ba;
+    --color-static-graphic-botticelli: #cee5e5;
+    --color-static-graphic-boulder: #7a7a7a;
+    --color-static-graphic-brink-pink: #fc617c;
+    --color-static-graphic-burnt-sienna: #eb7a58;
+    --color-static-graphic-carrot: #e8bba3;
+    --color-static-graphic-chatelle: #bfafc6;
+    --color-static-graphic-chathams-blue: #155966;
+    --color-static-graphic-chick: #f2db9e;
+    --color-static-graphic-crete: #847128;
+    --color-static-graphic-curious-blue: #2381db;
+    --color-static-graphic-curious-blue-light: #3b99d9;
+    --color-static-graphic-eastern-blue: #269cb3;
+    --color-static-graphic-french-lilac: #d3baed;
+    --color-static-graphic-fuel-yellow: #f29d32;
+    --color-static-graphic-fun-blue: #1d6ab5;
+    --color-static-graphic-gallery: #eee;
+    --color-static-graphic-green-jungle: #2fc26e;
+    --color-static-graphic-hippie-blue: #5aa4b0;
+    --color-static-graphic-jaffa: #f07134;
+    --color-static-graphic-jaffa-light: #f18836;
+    --color-static-graphic-java: #15c0e0;
+    --color-static-graphic-jungle-green: #2ab79a;
+    --color-static-graphic-lavender: #8888ad;
+    --color-static-graphic-mantis: #63cd4f;
+    --color-static-graphic-matisse: #16548f;
+    --color-static-graphic-milano-red: #cd1501;
+    --color-static-graphic-mirage: #1d2434;
+    --color-static-graphic-moon-raker: #e9dbf7;
+    --color-static-graphic-moss-green: #a6d29c;
+    --color-static-graphic-nevada: #626b75;
+    --color-static-graphic-olive: #bfd3c9;
+    --color-static-graphic-olivine: #87b965;
+    --color-static-graphic-peach: #fcc99b;
+    --color-static-graphic-persimmon: #ff5c5c;
+    --color-static-graphic-pewter: #96a5a5;
+    --color-static-graphic-pickled-bluewood: #2d3f50;
+    --color-static-graphic-porsche: #e7b965;
+    --color-static-graphic-raspberry: #dfb2bb;
+    --color-static-graphic-red-damask: #da713c;
+    --color-static-graphic-saffron: #f0c330;
+    --color-static-graphic-salomie: #fee984;
+    --color-static-graphic-sand: #f6bf65;
+    --color-static-graphic-sandy-brown: #f38f6f;
+    --color-static-graphic-seawater: #aecfd9;
+    --color-static-graphic-serenade: #fff0e3;
+    --color-static-graphic-sky: #a6c0db;
+    --color-static-graphic-soft-peach: #f3eaeb;
+    --color-static-graphic-solitude: #e8f2fe;
+    --color-static-graphic-strawberry: #f8b6a9;
+    --color-static-graphic-sundust: #d9d6ce;
+    --color-static-graphic-turkish-rose: #b56a6b;
+    --color-static-graphic-turquoise-blue: #6bd3e6;
+    --color-static-graphic-valencia: #d8463b;
+    --color-static-graphic-waikawa-gray: #5b6d9c;
+    --color-static-graphic-whisper: #f2eff6;
+    --color-static-graphic-zanah: #e1f0de;
+    --color-static-local-light-blue: #f5f7f9;
+    --color-static-overlay-black-high: rgba(0, 0, 0, 0.32);
+    --color-static-overlay-black-low: rgba(0, 0, 0, 0.16);
+    --color-static-overlay-black-normal: rgba(0, 0, 0, 0.24);
+    --color-static-overlay-black-xhigh: rgba(0, 0, 0, 0.4);
+    --color-static-overlay-black-xlow: rgba(0, 0, 0, 0.08);
+    --color-static-overlay-indigo-high: rgba(11, 31, 53, 0.32);
+    --color-static-overlay-indigo-low: rgba(11, 31, 53, 0.16);
+    --color-static-overlay-indigo-normal: rgba(11, 31, 53, 0.24);
+    --color-static-overlay-indigo-xhigh: rgba(11, 31, 53, 0.4);
+    --color-static-overlay-indigo-xlow: rgba(11, 31, 53, 0.08);
+    --color-static-overlay-white-high: rgba(255, 255, 255, 0.32);
+    --color-static-overlay-white-low: rgba(255, 255, 255, 0.16);
+    --color-static-overlay-white-normal: rgba(255, 255, 255, 0.24);
+    --color-static-overlay-white-xhigh: rgba(255, 255, 255, 0.4);
+    --color-static-overlay-white-xlow: rgba(255, 255, 255, 0.08);
+    --color-static-status-blue: #007aff;
+    --color-static-status-green: #13a463;
+    --color-static-status-grey: #6d7986;
+    --color-static-status-orange: #de6a00;
+    --color-static-status-purple: #673ab7;
+    --color-static-status-red: #d91d0b;
+    --color-static-status-teal: #219187;
+    --color-static-status-blue-alpha-10: rgba(0, 122, 255, 0.1);
+    --color-static-status-green-alpha-10: rgba(19, 164, 99, 0.1);
+    --color-static-status-grey-alpha-10: rgba(109, 121, 134, 0.1);
+    --color-static-status-orange-alpha-10: rgba(222, 106, 0, 0.1);
+    --color-static-status-purple-alpha-10: rgba(103, 58, 183, 0.1);
+    --color-static-status-red-alpha-10: rgba(217, 29, 11, 0.1);
+    --color-static-status-teal-alpha-10: rgba(33, 145, 135, 0.1);
+} :root {
     --color-dynamic-primary-dark: rgba(0, 0, 0, 0.8);
     --color-dynamic-primary-light: rgba(255, 255, 255, 0.8);
     --color-dynamic-quaternary-dark: rgba(0, 0, 0, 0.32);
@@ -645,8 +642,7 @@
     --color-static-senary-light: rgba(255, 255, 255, 0.12);
     --color-static-tertiary-dark: rgba(0, 0, 0, 0.48);
     --color-static-tertiary-light: rgba(255, 255, 255, 0.48);
-}
-:root {
+} :root {
     --shadow-xs: 0 0 4px rgba(11, 31, 53, 0.02), 0 2px 4px rgba(11, 31, 53, 0.04);
     --shadow-s: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
     --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
@@ -683,8 +679,17 @@
         0 -12px 24px rgba(11, 31, 53, 0.16);
     --shadow-xl-hard-up: 0 0 32px rgba(11, 31, 53, 0.16), 0 -16px 32px rgba(11, 31, 53, 0.32),
         0 -16px 32px rgba(11, 31, 53, 0.16);
-}
-:root {
+} :root {
+    --border-radius-xs: 2px;
+    --border-radius-s: 4px;
+    --border-radius-m: 8px;
+    --border-radius-l: 12px;
+    --border-radius-xl: 16px;
+    --border-radius-xxl: 20px;
+    --border-radius-3xl: 24px;
+    --border-radius-circle: 50%;
+    --border-radius-pill: 99px;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
@@ -713,21 +718,9 @@
     --gap-6xl-neg: -72px;
     --gap-7xl-neg: -96px;
     --gap-8xl-neg: -128px;
-}
-:root {
+} :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 }
-:root {
-    --border-radius-xs: 2px;
-    --border-radius-s: 4px;
-    --border-radius-m: 8px;
-    --border-radius-l: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-xxl: 20px;
-    --border-radius-3xl: 24px;
-    --border-radius-circle: 50%;
-    --border-radius-pill: 99px;
-}

package/cssm/shadows-bluetint.css

@@ -0,0 +1,45 @@
+:root {
+    --shadow-xs: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-s: 0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
+        0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-m: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-l: 0 24px 32px rgba(0, 0, 0, 0.08), 0 20px 24px rgba(0, 0, 0, 0.08),
+        0 12px 16px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04),
+        0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-xl: 0 32px 40px rgba(0, 0, 0, 0.08), 0 24px 32px rgba(0, 0, 0, 0.08),
+        0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+
+    /* Hard */
+    --shadow-xs-hard: 0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    --shadow-s-hard: 0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
+        0 0 1px rgba(0, 0, 0, 0.16);
+    --shadow-m-hard: 0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+    --shadow-l-hard: 0 24px 32px rgba(0, 0, 0, 0.2), 0 20px 24px rgba(0, 0, 0, 0.2),
+        0 12px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.16),
+        0 0 1px rgba(0, 0, 0, 0.16);
+    --shadow-xl-hard: 0 32px 40px rgba(0, 0, 0, 0.2), 0 24px 32px rgba(0, 0, 0, 0.2),
+        0 20px 24px rgba(0, 0, 0, 0.2), 0 12px 16px rgba(0, 0, 0, 0.16),
+        0 4px 8px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.16);
+
+    /* Up */
+    --shadow-xs-up: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04);
+    --shadow-s-up: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08);
+    --shadow-m-up: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16);
+    --shadow-l-up: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24);
+    --shadow-xl-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32);
+
+    /* Hard up */
+    --shadow-xs-hard-up: 0 0 4px rgba(0, 0, 0, 0.02), 0 -2px 4px rgba(0, 0, 0, 0.04),
+        0 -2px 4px rgba(0, 0, 0, 0.16);
+    --shadow-s-hard-up: 0 0 8px rgba(0, 0, 0, 0.04), 0 -4px 8px rgba(0, 0, 0, 0.08),
+        0 -4px 8px rgba(0, 0, 0, 0.16);
+    --shadow-m-hard-up: 0 0 16px rgba(0, 0, 0, 0.08), 0 -8px 16px rgba(0, 0, 0, 0.16),
+        0 -8px 16px rgba(0, 0, 0, 0.16);
+    --shadow-l-hard-up: 0 0 24px rgba(0, 0, 0, 0.12), 0 -12px 24px rgba(0, 0, 0, 0.24),
+        0 -12px 24px rgba(0, 0, 0, 0.16);
+    --shadow-xl-hard-up: 0 0 32px rgba(0, 0, 0, 0.16), 0 -16px 32px rgba(0, 0, 0, 0.32),
+        0 -16px 32px rgba(0, 0, 0, 0.16);
+}

package/index.css

@@ -1,9 +1,9 @@
-@import './colors.css';
-@import './colors-addons.css';
+@import './colors.css'; /* deprecated */
 @import './colors-indigo.css';
+@import './colors-addons.css';
 @import './colors-transparent.css';
 @import './shadows-indigo.css';
+@import './border-radius.css';
 @import './gaps.css';
 @import './typography.css';
-@import './border-radius.css';
 @import './mixins.css';