@fifteen/design-system-vue/dist/theme.css

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

:root {
  --breakpoint--xxs: 360px;
  --breakpoint--xs: 600px;
  --breakpoint--sm: 960px;
  --breakpoint--md: 1264px;
  --breakpoint--lg: 1904px;
  --color--neutral--dark-5: #000;
  --color--neutral--dark-5--rgb: 0, 0, 0;
  --color--neutral--dark-4: #2a3039;
  --color--neutral--dark-4--rgb: 42, 48, 57;
  --color--neutral--dark-3: #546171;
  --color--neutral--dark-3--rgb: 84, 97, 113;
  --color--neutral--dark-2: #8091a5;
  --color--neutral--dark-2--rgb: 128, 145, 165;
  --color--neutral--dark-1: #a9b9c0;
  --color--neutral--dark-1--rgb: 169, 185, 192;
  --color--neutral: #b4c3ca;
  --color--neutral--rgb: 180, 195, 202;
  --color--neutral--light-1: #c3cfd6;
  --color--neutral--light-1--rgb: 195, 207, 214;
  --color--neutral--light-2: #d3dce0;
  --color--neutral--light-2--rgb: 211, 220, 224;
  --color--neutral--light-3: #e5ebed;
  --color--neutral--light-3--rgb: 229, 235, 237;
  --color--neutral--light-4: #f8f9fa;
  --color--neutral--light-4--rgb: 248, 249, 250;
  --color--neutral--light-5: #fff;
  --color--neutral--light-5--rgb: 255, 255, 255;
  --color--primary--dark-2: #7a005f;
  --color--primary--dark-2--rgb: 122, 0, 95;
  --color--primary--dark-1: #b7006b;
  --color--primary--dark-1--rgb: 183, 0, 107;
  --color--primary: #ff0062;
  --color--primary--rgb: 255, 0, 98;
  --color--primary--light-1: #ff6682;
  --color--primary--light-1--rgb: 255, 102, 130;
  --color--primary--light-2: #fcc;
  --color--primary--light-2--rgb: 255, 204, 204;
  --color--secondary--dark-2: #000a18;
  --color--secondary--dark-2--rgb: 0, 10, 24;
  --color--secondary--dark-1: #001524;
  --color--secondary--dark-1--rgb: 0, 21, 36;
  --color--secondary: #012433;
  --color--secondary--rgb: 1, 36, 51;
  --color--secondary--light-1: #4faec1;
  --color--secondary--light-1--rgb: 79, 174, 193;
  --color--secondary--light-2: #c4f3f4;
  --color--secondary--light-2--rgb: 196, 243, 244;
  --color--success--dark-2: #195e6a;
  --color--success--dark-2--rgb: 25, 94, 106;
  --color--success--dark-1: #429f9c;
  --color--success--dark-1--rgb: 66, 159, 156;
  --color--success: #83dec9;
  --color--success--rgb: 131, 222, 201;
  --color--success--light-1: #b8f5db;
  --color--success--light-1--rgb: 184, 245, 219;
  --color--success--light-2: #e8fdf0;
  --color--success--light-2--rgb: 232, 253, 240;
  --color--info--dark-2: #32006e;
  --color--info--dark-2--rgb: 50, 0, 110;
  --color--info--dark-1: #6200a6;
  --color--info--dark-1--rgb: 98, 0, 166;
  --color--info: #a900e7;
  --color--info--rgb: 169, 0, 231;
  --color--info--light-1: #e463f7;
  --color--info--light-1--rgb: 228, 99, 247;
  --color--info--light-2: #fdcbfd;
  --color--info--light-2--rgb: 253, 203, 253;
  --color--warning--dark-2: #7a431c;
  --color--warning--dark-2--rgb: 122, 67, 28;
  --color--warning--dark-1: #b7804a;
  --color--warning--dark-1--rgb: 183, 128, 74;
  --color--warning: #ffd293;
  --color--warning--rgb: 255, 210, 147;
  --color--warning--light-1: #ffe9be;
  --color--warning--light-1--rgb: 255, 233, 190;
  --color--warning--light-2: #fff9e9;
  --color--warning--light-2--rgb: 255, 249, 233;
  --color--danger--dark-2: #710f1f;
  --color--danger--dark-2--rgb: 113, 15, 31;
  --color--danger--dark-1: #aa292a;
  --color--danger--dark-1--rgb: 170, 41, 42;
  --color--danger: #ed6a53;
  --color--danger--rgb: 237, 106, 83;
  --color--danger--light-1: #f9b598;
  --color--danger--light-1--rgb: 249, 181, 152;
  --color--danger--light-2: #feecdd;
  --color--danger--light-2--rgb: 254, 236, 221;
  --transition--ease-out: cubic-bezier(0.17, 0.84, 0.44, 1);
  --code--background-color: rgba(0,0,0,0.12);
  --fluid-font--breakpoint-min-px: 600;
  --fluid-font--breakpoint-max-px: 1904;
  --bigger-1--font-size-min-px: 88;
  --bigger-1--font-size-max-px: 192;
  --bigger-1--line-height-min-px: 96;
  --bigger-1--line-height-max-px: 200;
  --bigger-1--font-weight: 800;
  --bigger-1--font-family: 'ES-Build', sans-serif;
  --bigger-1--letter-spacing: -0.09375rem;
  --bigger-2--font-size-min-px: 80;
  --bigger-2--font-size-max-px: 168;
  --bigger-2--line-height-min-px: 88;
  --bigger-2--line-height-max-px: 176;
  --bigger-2--font-weight: 800;
  --bigger-2--font-family: 'ES-Build', sans-serif;
  --bigger-2--letter-spacing: -0.09375rem;
  --bigger-3--font-size-min-px: 72;
  --bigger-3--font-size-max-px: 144;
  --bigger-3--line-height-min-px: 80;
  --bigger-3--line-height-max-px: 152;
  --bigger-3--font-weight: 800;
  --bigger-3--font-family: 'ES-Build', sans-serif;
  --bigger-3--letter-spacing: -0.09375rem;
  --bigger-4--font-size-min-px: 64;
  --bigger-4--font-size-max-px: 120;
  --bigger-4--line-height-min-px: 72;
  --bigger-4--line-height-max-px: 128;
  --bigger-4--font-weight: 800;
  --bigger-4--font-family: 'ES-Build', sans-serif;
  --bigger-4--letter-spacing: -0.09375rem;
  --heading-1--font-size-min-px: 56;
  --heading-1--font-size-max-px: 96;
  --heading-1--line-height-min-px: 64;
  --heading-1--line-height-max-px: 104;
  --heading-1--font-weight: 800;
  --heading-1--font-family: 'ES-Build', sans-serif;
  --heading-1--letter-spacing: -0.09375rem;
  --heading-2--font-size-min-px: 48;
  --heading-2--font-size-max-px: 64;
  --heading-2--line-height-min-px: 56;
  --heading-2--line-height-max-px: 72;
  --heading-2--font-weight: 800;
  --heading-2--font-family: 'ES-Build', sans-serif;
  --heading-2--letter-spacing: -0.03125rem;
  --heading-3--font-size-min-px: 40;
  --heading-3--font-size-max-px: 48;
  --heading-3--line-height-min-px: 48;
  --heading-3--line-height-max-px: 56;
  --heading-3--font-weight: 800;
  --heading-3--font-family: 'ES-Build', sans-serif;
  --heading-4--font-size-min-px: 32;
  --heading-4--font-size-max-px: 32;
  --heading-4--line-height-min-px: 40;
  --heading-4--line-height-max-px: 40;
  --heading-4--letter-spacing: 0.015625rem;
  --heading-4--font-weight: 800;
  --heading-4--font-family: 'ES-Build', sans-serif;
  --heading-5--font-size-min-px: 24;
  --heading-5--font-size-max-px: 24;
  --heading-5--line-height-min-px: 32;
  --heading-5--line-height-max-px: 32;
  --heading-5--font-weight: 800;
  --heading-5--font-family: 'ES-Build', sans-serif;
  --heading-6--font-size-min-px: 20;
  --heading-6--font-size-max-px: 20;
  --heading-6--line-height-min-px: 24;
  --heading-6--line-height-max-px: 24;
  --heading-6--font-weight: 800;
  --heading-6--font-family: 'ES-Build', sans-serif;
  --heading-6--letter-spacing: 0.009375rem;
  --subtitle-1--font-size-min-px: 16;
  --subtitle-1--font-size-max-px: 16;
  --subtitle-1--line-height-min-px: 24;
  --subtitle-1--line-height-max-px: 24;
  --subtitle-1--font-weight: 700;
  --subtitle-1--font-family: 'Poppins', sans-serif;
  --subtitle-1--letter-spacing: 0.009375rem;
  --subtitle-2--font-size-min-px: 14;
  --subtitle-2--font-size-max-px: 14;
  --subtitle-2--line-height-min-px: 16;
  --subtitle-2--line-height-max-px: 24;
  --subtitle-2--font-weight: 700;
  --subtitle-2--font-family: 'Poppins', sans-serif;
  --subtitle-2--letter-spacing: 0.00625rem;
  --body-1--font-size-min-px: 16;
  --body-1--font-size-max-px: 24;
  --body-1--line-height-min-px: 24;
  --body-1--line-height-max-px: 32;
  --body-1--font-weight: 500;
  --body-1--font-family: 'Poppins', sans-serif;
  --body-1--letter-spacing: 0.015625rem;
  --body-2--font-size-min-px: 16;
  --body-2--font-size-max-px: 16;
  --body-2--line-height-min-px: 24;
  --body-2--line-height-max-px: 24;
  --body-2--font-weight: 500;
  --body-2--font-family: 'Poppins', sans-serif;
  --body-2--letter-spacing: 0.03125rem;
  --button--font-size-min-px: 14;
  --button--font-size-max-px: 14;
  --button--line-height-min-px: 16;
  --button--line-height-max-px: 16;
  --button--font-weight: 800;
  --button--font-family: 'ES-Build', sans-serif;
  --button--letter-spacing: 0.03125rem;
  --caption--font-size-min-px: 12;
  --caption--font-size-max-px: 12;
  --caption--line-height-min-px: 16;
  --caption--line-height-max-px: 16;
  --caption--font-weight: 500;
  --caption--font-family: 'Poppins', sans-serif;
  --caption--letter-spacing: 0.025rem;
  --overline--font-size-min-px: 16;
  --overline--font-size-max-px: 16;
  --overline--line-height-min-px: 24;
  --overline--line-height-max-px: 24;
  --overline--font-weight: 700;
  --overline--font-family: 'Poppins', sans-serif;
  --overline--letter-spacing: 0.0625rem;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecg.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ES-Build';
  font-style: normal;
  font-weight: 700;
  src: url("./assets/fonts/ES-Build-Bold.woff2") format('woff2');
}