@cobre-npm/ds-v3 0.0.1

package/dist/_primitives.scss

@@ -0,0 +1,408 @@
+/**
+ * COLORS
+ */
+
+$cobre-gray-95: #212121;
+$cobre-gray-90: #42413F;
+$cobre-gray-80: #575452;
+$cobre-gray-70: #63615F;
+$cobre-gray-60: #6F6D6A;
+$cobre-gray-50: #878481;
+$cobre-gray-40: #9E9B98;
+$cobre-gray-30: #BEBBB7;
+$cobre-gray-20: #D6D3CF;
+$cobre-gray-10: #E9E8E4;
+$cobre-gray-7: #F4F4F2;
+$cobre-gray-5: #FBFAFA;
+$cobre-white: #fff;
+
+$cobre-blue-95: #11285b;
+$cobre-blue-90: #123580;
+$cobre-blue-80: #1442a5;
+$cobre-blue-70: #1e54ce;
+$cobre-blue-60: #2861df;
+$cobre-blue-50: #376feb;
+$cobre-blue-40: #5a8bf6;
+$cobre-blue-30: #7ca5fb;
+$cobre-blue-20: #b1c9fd;
+$cobre-blue-10: #d6e2fd;
+$cobre-blue-5: #f5f6fe;
+
+$cobre-yellow-95: #342a18;
+$cobre-yellow-90: #46381d;
+$cobre-yellow-80: #5b4622;
+$cobre-yellow-60: #876426;
+$cobre-yellow-70: #765925;
+$cobre-yellow-40: #ba8522;
+$cobre-yellow-50: #986f26;
+$cobre-yellow-30: #da9b19;
+$cobre-yellow-20: #fdbe3f;
+$cobre-yellow-10: #fedd9a;
+$cobre-yellow-5: #fff6e3;
+
+$cobre-red-95: #541407;
+$cobre-red-80: #921803;
+$cobre-red-90: #721705;
+$cobre-red-70: #b81d01;
+$cobre-red-60: #cd2506;
+$cobre-red-50: #df3313;
+$cobre-red-40: #fb5634;
+$cobre-red-20: #ffb8a0;
+$cobre-red-30: #ff8362;
+$cobre-red-10: #ffd9cc;
+$cobre-red-5: #fff5f1;
+
+$cobre-green-95: #0d321a;
+$cobre-green-90: #084322;
+$cobre-green-70: #006c34;
+$cobre-green-80: #005529;
+$cobre-green-60: #007a3d;
+$cobre-green-50: #058847;
+$cobre-green-30: #67b77d;
+$cobre-green-40: #3ca160;
+$cobre-green-20: #a3d4ac;
+$cobre-green-10: #cfe8d1;
+$cobre-green-5: #f3f8f1;
+
+$cobre-teal-95: #052525;
+$cobre-teal-90: #0B3737;
+$cobre-teal-80: #144848;
+$cobre-teal-70: #1F5D5D;
+$cobre-teal-60: #266B6B;
+$cobre-teal-50: #367776;
+$cobre-teal-40: #588E8D;
+$cobre-teal-30: #77A3A3;
+$cobre-teal-20: #A3C1C1;
+$cobre-teal-10: #C4D7D7;
+$cobre-teal-5: #DFEAE9;
+
+$cobre-violet-50: #9256e1;
+
+$cobre-liliac-50: #4e69f3;
+
+$cobre-primary-95: $cobre-gray-95;
+$cobre-primary-90: $cobre-gray-90;
+$cobre-primary-80: $cobre-gray-80;
+$cobre-primary-70: $cobre-gray-70;
+$cobre-primary-60: $cobre-gray-60;
+$cobre-primary-50: $cobre-gray-50;
+$cobre-primary-40: $cobre-gray-40;
+$cobre-primary-30: $cobre-gray-30;
+$cobre-primary-20: $cobre-gray-20;
+$cobre-primary-10: $cobre-gray-10;
+$cobre-primary-7: $cobre-gray-7;
+$cobre-primary-5: $cobre-gray-5;
+
+$cobre-secondary-95: $cobre-teal-95;
+$cobre-secondary-90: $cobre-teal-90;
+$cobre-secondary-80: $cobre-teal-80;
+$cobre-secondary-70: $cobre-teal-70;
+$cobre-secondary-60: $cobre-teal-60;
+$cobre-secondary-50: $cobre-teal-50;
+$cobre-secondary-40: $cobre-teal-40;
+$cobre-secondary-30: $cobre-teal-30;
+$cobre-secondary-20: $cobre-teal-20;
+$cobre-secondary-10: $cobre-teal-10;
+$cobre-secondary-5: $cobre-teal-5;
+
+$cobre-info-50: $cobre-blue-50;
+$cobre-info-10: $cobre-blue-10;
+
+$cobre-warning-50: $cobre-yellow-50;
+
+$cobre-colors: (
+    gray-95: $cobre-gray-95,
+    gray-90: $cobre-gray-90,
+    gray-80: $cobre-gray-80,
+    gray-70: $cobre-gray-70,
+    gray-60: $cobre-gray-60,
+    gray-50: $cobre-gray-50,
+    gray-40: $cobre-gray-40,
+    gray-30: $cobre-gray-30,
+    gray-20: $cobre-gray-20,
+    gray-10: $cobre-gray-10,
+    gray-7: $cobre-gray-7,
+    gray-5: $cobre-gray-5,
+    white: $cobre-white,
+
+    blue-95: $cobre-blue-95,
+    blue-90: $cobre-blue-90,
+    blue-80: $cobre-blue-80,
+    blue-70: $cobre-blue-70,
+    blue-60: $cobre-blue-60,
+    blue-50: $cobre-blue-50,
+    blue-40: $cobre-blue-40,
+    blue-30: $cobre-blue-30,
+    blue-20: $cobre-blue-20,
+    blue-10: $cobre-blue-10,
+    blue-5: $cobre-blue-5,
+
+    yellow-95: $cobre-yellow-95,
+    yellow-90: $cobre-yellow-90,
+    yellow-80: $cobre-yellow-80,
+    yellow-30: $cobre-yellow-30,
+    yellow-60: $cobre-yellow-60,
+    yellow-70: $cobre-yellow-70,
+    yellow-40: $cobre-yellow-40,
+    yellow-50: $cobre-yellow-50,
+    yellow-20: $cobre-yellow-20,
+    yellow-10: $cobre-yellow-10,
+    yellow-5: $cobre-yellow-5,
+
+    red-95: $cobre-red-95,
+    red-80: $cobre-red-80,
+    red-90: $cobre-red-90,
+    red-70: $cobre-red-70,
+    red-60: $cobre-red-60,
+    red-50: $cobre-red-50,
+    red-40: $cobre-red-40,
+    red-20: $cobre-red-20,
+    red-30: $cobre-red-30,
+    red-10: $cobre-red-10,
+    red-5: $cobre-red-5,
+
+    green-95: $cobre-green-95,
+    green-90: $cobre-green-90,
+    green-70: $cobre-green-70,
+    green-80: $cobre-green-80,
+    green-60: $cobre-green-60,
+    green-50: $cobre-green-50,
+    green-30: $cobre-green-30,
+    green-40: $cobre-green-40,
+    green-20: $cobre-green-20,
+    green-10: $cobre-green-10,
+    green-5: $cobre-green-5,
+
+    teal-95: $cobre-teal-95,
+    teal-80: $cobre-teal-80,
+    teal-70: $cobre-teal-70,
+    teal-90: $cobre-teal-90,
+    teal-60: $cobre-teal-60,
+    teal-50: $cobre-teal-50,
+    teal-40: $cobre-teal-40,
+    teal-30: $cobre-teal-30,
+    teal-20: $cobre-teal-20,
+    teal-10: $cobre-teal-10,
+    teal-5: $cobre-teal-5,
+
+    violet-50: $cobre-violet-50,
+
+    liliac-50: $cobre-liliac-50,
+
+    primary-95: $cobre-primary-95,
+    primary-90: $cobre-primary-90,
+    primary-80: $cobre-primary-80,
+    primary-70: $cobre-primary-70,
+    primary-60: $cobre-primary-60,
+    primary-50: $cobre-primary-50,
+    primary-40: $cobre-primary-40,
+    primary-30: $cobre-primary-30,
+    primary-20: $cobre-primary-20,
+    primary-10: $cobre-primary-10,
+    primary-7: $cobre-primary-7,
+    primary-5: $cobre-primary-5,
+
+    secondary-95: $cobre-secondary-95,
+    secondary-90: $cobre-secondary-90,
+    secondary-80: $cobre-secondary-80,
+    secondary-70: $cobre-secondary-70,
+    secondary-60: $cobre-secondary-60,
+    secondary-50: $cobre-secondary-50,
+    secondary-40: $cobre-secondary-40,
+    secondary-30: $cobre-secondary-30,
+    secondary-20: $cobre-secondary-20,
+    secondary-10: $cobre-secondary-10,
+    secondary-5: $cobre-secondary-5,
+
+    info-50: $cobre-info-50,
+    info-10: $cobre-info-10,
+
+    warning-50: $cobre-warning-50,
+
+    // semantics
+    subtle: $cobre-primary-80,
+    subtlest: $cobre-primary-60,
+    caption: $cobre-primary-40,
+    disabled: $cobre-primary-40,
+    success: $cobre-green-50,
+    error: $cobre-red-50,
+    warning: $cobre-yellow-50,
+    info: $cobre-blue-50,
+    inverse: $cobre-white,
+    brand: $cobre-secondary-50,
+    brand-light: $cobre-primary-5,
+    brand-hovered: $cobre-secondary-70
+);
+
+
+:root {
+    @each $name, $hex in $cobre-colors {
+        --cobre-#{'' + $name} : #{$hex};
+    }
+
+    --cobre-secondary-50-rgba: 54,
+    119,
+    118;
+}
+
+
+/**
+ * GLOBAL
+ */
+
+:root {
+    --cobre-font-family: 'Inter', sans-serif;
+    --cobre-titles-font-family: 'Inter', sans-serif;
+    --cobre-secondary-font-family: 'Inter', sans-serif;
+    --cobre-color: var(--cobre-primary-95);
+    --cobre-row-hover-bg: var(--cobre-secondary-5);
+    --cobre-headline-fw: 600;
+    --cobre-title-fw: 600;
+    --cobre-subtitle-fw: 600;
+}
+
+
+
+
+/**
+* RADIUS
+*/
+
+:root {
+    --cobre-radius-full: 62.4375rem;
+    --cobre-radius-M: 1rem;
+    --cobre-radius-S: 0.5rem;
+    --cobre-radius-XS: 0.25rem;
+}
+
+/**
+  * BORDER
+  */
+
+:root {
+    --cobre-border-stroke-XXXL: 0.1875rem;
+    --cobre-border-stroke-XL: 0.125rem;
+    --cobre-border-stroke-L: 0.0625rem;
+    --cobre-border-stroke-M: 0.03125rem;
+}
+
+// MARGIN - PADDING UNITS
+$limit: 101;
+$unit: 1px;
+
+/**
+ * FONTS
+ */
+
+// HEADLINE
+$cobre-headline-movil-fs: 25.6px;
+$cobre-headline-movil-lh: 32px;
+$cobre-headline-movil-ls: -0.3px;
+
+$cobre-headline-tablet-fs: 28.8px;
+$cobre-headline-tablet-lh: 36px;
+$cobre-headline-tablet-ls: -0.336px;
+
+$cobre-headline-desktop-fs: 32.44px;
+$cobre-headline-desktop-lh: 40px;
+$cobre-headline-desktop-ls: -0.336px;
+
+$cobre-headline-numbers-movil-fs: 25.6px;
+$cobre-headline-numbers-movil-lh: 32px;
+$cobre-headline-numbers-movil-ls: -0.3px;
+
+$cobre-headline-numbers-tablet-fs: 28.8px;
+$cobre-headline-numbers-tablet-lh: 36px;
+$cobre-headline-numbers-tablet-ls: -0.3px;
+
+$cobre-headline-numbers-desktop-fs: 32.4px;
+$cobre-headline-numbers-desktop-lh: 40px;
+$cobre-headline-numbers-desktop-ls: -0.3px;
+
+
+// TITLE
+$cobre-title-movil-fs: 20.3px;
+$cobre-title-movil-lh: 24.3px;
+$cobre-title-movil-ls: -0.352px;
+
+$cobre-title-tablet-fs: 22.78px;
+$cobre-title-tablet-lh: 32px;
+$cobre-title-tablet-ls: -0.3px;
+
+$cobre-title-desktop-fs: 22.8px;
+$cobre-title-desktop-lh: 32px;
+$cobre-title-desktop-ls: -0.3px;
+
+$cobre-title-numbers-movil-fs: 20.3px;
+$cobre-title-numbers-movil-lh: 24.3px;
+$cobre-title-numbers-movil-ls: -0.3px;
+
+$cobre-title-numbers-tablet-fs: 22.78px;
+$cobre-title-numbers-tablet-lh: 32px;
+$cobre-title-numbers-tablet-ls: -0.3px;
+
+$cobre-title-numbers-desktop-fs: 25.63px;
+$cobre-title-numbers-desktop-lh: 32px;
+$cobre-title-numbers-desktop-ls: -0.3px;
+
+// SUBTITLE
+$cobre-subtitle-movil-fs: 18px;
+$cobre-subtitle-movil-lh: 21.8px;
+$cobre-subtitle-movil-ls: -0.352px;
+
+$cobre-subtitle-tablet-fs: 20.25px;
+$cobre-subtitle-tablet-lh: 24.3px;
+$cobre-subtitle-tablet-ls: -0.352px;
+
+$cobre-subtitle-numbers-movil-fs: 18px;
+$cobre-subtitle-numbers-movil-lh: 21.8px;
+$cobre-subtitle-numbers-movil-ls: -0.3px;
+
+$cobre-subtitle-numbers-tablet-fs: 20.25px;
+$cobre-subtitle-numbers-tablet-lh: 24.5px;
+$cobre-subtitle-numbers-tablet-ls: -0.3px;
+
+$cobre-subtitle-numbers-desktop-fs: 20.25px;
+$cobre-subtitle-numbers-desktop-lh: 24.3px;
+$cobre-subtitle-numbers-desktop-ls: -0.3px;
+
+// LABEL
+$cobre-label-lower-ls: 0.1px;
+$cobre-label-upper-ls: 0.5px;
+
+$cobre-label-small-fs: 12.64px;
+$cobre-label-small-lh: 16px;
+
+$cobre-label-medium-fs: 14.22px;
+$cobre-label-medium-lh: 17.1px;
+
+$cobre-label-large-fs: 16px;
+$cobre-label-large-lh: 19.2px;
+
+$cobre-label-numbers-small-fs: 12.64px;
+$cobre-label-numbers-small-lh: 16px;
+$cobre-label-numbers-small-ls: 0.5px;
+
+$cobre-label-numbers-large-fs: 16px;
+$cobre-label-numbers-large-lh: 19.2px;
+$cobre-label-numbers-large-ls: 0.1px;
+
+
+// BODY
+$cobre-body-medium-fs: 14.22px;
+$cobre-body-medium-lh: 21.3px;
+$cobre-body-medium-ls: 0px;
+
+$cobre-body-large-fs: 16px;
+$cobre-body-large-lh: 24px;
+$cobre-body-large-ls: 0px;
+
+$cobre-body-numbers-small-fs: 14.22px;
+$cobre-body-numbers-small-lh: 21.3px;
+$cobre-body-numbers-small-ls: 0px;
+
+// ICONS
+$cobre-icon-large-fs: 24px;
+$cobre-icon-medium-fs: 20px;
+$cobre-icon-small-fs: 16px;
+$cobre-icon-extra-small-fs: 12px;