@bi-digital/css 0.3.4 → 0.4.0

package/dist/index.css

@@ -1,5 +1,5 @@
 /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
-:root, :host {
+:root {
   --bi-basic-key: #000;
   --bi-basic-white: #fff;
   --bi-neutral-0: #fafbfc;
@@ -149,17 +149,203 @@
   --bi-scale-64x: 16rem;
   --bi-scale-80x: 20rem;
   --bi-scale-max: 624.938rem;
-  --bi-opacity-dark-80: #26333f33;
-  --bi-opacity-dark-50: #26333f80;
-  --bi-opacity-light-100: #fff0;
-  --bi-opacity-light-80: #fff3;
-  --bi-opacity-light-50: #ffffff80;
+  --bi-opacity-dark-80: rgba(38, 51, 63, .2);
+  --bi-opacity-dark-50: rgba(38, 51, 63, .5);
+  --bi-opacity-light-100: rgba(255, 255, 255, 0);
+  --bi-opacity-light-80: rgba(255, 255, 255, .2);
+  --bi-opacity-light-50: rgba(255, 255, 255, .5);
   --bi-stroke-default: .09375rem;
-  --bi-elevation-25: #26333f26;
-  --bi-states-hover-dark: #26333f1a;
-  --bi-states-hover-light: #ffffff1a;
-  --bi-states-press-dark: #26333f26;
-  --bi-states-press-light: #ffffff26;
+  --bi-elevation-25: rgba(38, 51, 63, .15);
+  --bi-states-hover-dark: rgba(38, 51, 63, .1);
+  --bi-states-hover-light: rgba(255, 255, 255, .1);
+  --bi-states-press-dark: rgba(38, 51, 63, .15);
+  --bi-states-press-light: rgba(255, 255, 255, .15);
+  --bi-stroke-none: var(--bi-scale-0);
+  --bi-stroke-thin: var(--bi-scale-0-25x);
+  --bi-stroke-thick: var(--bi-scale-0-50x);
+  --bi-stroke-color-1: var(--bi-neutral-15);
+  --bi-stroke-color-2: var(--bi-neutral-25);
+  --bi-stroke-color-3: var(--bi-neutral-50);
+  --bi-radius-none: var(--bi-scale-0);
+  --bi-radius-small: var(--bi-scale-0-50x);
+  --bi-radius-medium: var(--bi-scale-1x);
+  --bi-radius-large: var(--bi-scale-2x);
+  --bi-radius-xl: var(--bi-scale-3x);
+  --bi-radius-brand: var(--bi-scale-12x);
+  --bi-radius-full: var(--bi-scale-max);
+  --bi-icon-small: var(--bi-scale-5x);
+  --bi-icon-medium: var(--bi-scale-6x);
+  --bi-icon-large: var(--bi-scale-8x);
+  --bi-icon-xl: var(--bi-scale-10x);
+  --bi-icon-2xl: var(--bi-scale-11x);
+  --bi-icon-primary: var(--bi-neutral-90);
+  --bi-icon-secondary: var(--bi-neutral-60);
+  --bi-icon-disabled: var(--bi-neutral-50);
+  --bi-icon-link: var(--bi-primary-50);
+  --bi-layout-navbar-height: var(--bi-scale-16x);
+}
+
+:host {
+  --bi-basic-key: #000;
+  --bi-basic-white: #fff;
+  --bi-neutral-0: #fafbfc;
+  --bi-neutral-5: #f5f7fa;
+  --bi-neutral-10: #e4e8ed;
+  --bi-neutral-15: #d5dde4;
+  --bi-neutral-20: #c8d1db;
+  --bi-neutral-25: #bac6d2;
+  --bi-neutral-30: #acbbca;
+  --bi-neutral-40: #90a3b7;
+  --bi-neutral-50: #597694;
+  --bi-neutral-60: #475e75;
+  --bi-neutral-70: #3e5266;
+  --bi-neutral-75: #344557;
+  --bi-neutral-80: #303f4f;
+  --bi-neutral-85: #2b3947;
+  --bi-neutral-90: #26333f;
+  --bi-neutral-95: #222d38;
+  --bi-neutral-100: #171f26;
+  --bi-primary-0: #ebf3ff;
+  --bi-primary-5: #d9e6f9;
+  --bi-primary-10: #c5d9f7;
+  --bi-primary-15: #b2cdf4;
+  --bi-primary-20: #9ec0f1;
+  --bi-primary-25: #8bb3ee;
+  --bi-primary-30: #75a5f1;
+  --bi-primary-40: #6196f4;
+  --bi-primary-50: #0a64ff;
+  --bi-primary-60: #0b4db4;
+  --bi-primary-70: #0b49a1;
+  --bi-primary-75: #0c468f;
+  --bi-primary-80: #093f82;
+  --bi-primary-85: #083a76;
+  --bi-primary-90: #042f5b;
+  --bi-primary-95: #002341;
+  --bi-primary-100: #001932;
+  --bi-secondary-0: #fffbeb;
+  --bi-secondary-5: #fcf6df;
+  --bi-secondary-10: #fff2bf;
+  --bi-secondary-15: #ffea95;
+  --bi-secondary-20: #ffe680;
+  --bi-secondary-25: #ffe26a;
+  --bi-secondary-30: #ffde55;
+  --bi-secondary-40: #ffd52b;
+  --bi-secondary-50: #ffcd00;
+  --bi-secondary-60: #deb300;
+  --bi-secondary-70: #bd9800;
+  --bi-secondary-75: #9d7e00;
+  --bi-secondary-80: #7c6400;
+  --bi-secondary-85: #5b4900;
+  --bi-secondary-90: #4a3c01;
+  --bi-secondary-95: #3a2f00;
+  --bi-secondary-100: #262000;
+  --bi-info-0: #f3ebff;
+  --bi-info-5: #e6d5ff;
+  --bi-info-10: #d9bfff;
+  --bi-info-15: #cdaaff;
+  --bi-info-20: #c094ff;
+  --bi-info-25: #b480ff;
+  --bi-info-30: #a76aff;
+  --bi-info-40: #822bff;
+  --bi-info-50: #6900ff;
+  --bi-info-60: #5c03dc;
+  --bi-info-70: #4f05b9;
+  --bi-info-75: #420896;
+  --bi-info-80: #3b0984;
+  --bi-info-85: #350a73;
+  --bi-info-90: #2e0b61;
+  --bi-info-95: #280d50;
+  --bi-info-100: #1a0833;
+  --bi-warning-0: #fffbeb;
+  --bi-warning-5: #fff7d5;
+  --bi-warning-10: #fff2bf;
+  --bi-warning-15: #ffea95;
+  --bi-warning-20: #ffe680;
+  --bi-warning-25: #ffe26a;
+  --bi-warning-30: #ffde55;
+  --bi-warning-40: #ffd52b;
+  --bi-warning-50: #ffcd00;
+  --bi-warning-60: #deb300;
+  --bi-warning-70: #bd9800;
+  --bi-warning-75: #9d7e00;
+  --bi-warning-80: #7c6400;
+  --bi-warning-85: #5b4900;
+  --bi-warning-90: #4a3c01;
+  --bi-warning-95: #3a2f00;
+  --bi-warning-100: #262000;
+  --bi-success-0: #ebffeb;
+  --bi-success-5: #d5f4d6;
+  --bi-success-10: #bfeec2;
+  --bi-success-15: #aae8ae;
+  --bi-success-20: #95e299;
+  --bi-success-25: #80dd85;
+  --bi-success-30: #55d15c;
+  --bi-success-40: #2bc634;
+  --bi-success-50: #00ab0b;
+  --bi-success-60: #04a30d;
+  --bi-success-70: #078b0f;
+  --bi-success-75: #0b7411;
+  --bi-success-80: #0f5d13;
+  --bi-success-85: #124515;
+  --bi-success-90: #143a16;
+  --bi-success-95: #162e17;
+  --bi-success-100: #0f1f0f;
+  --bi-alert-0: #fff1f0;
+  --bi-alert-5: #ffe1df;
+  --bi-alert-10: #ffd7d5;
+  --bi-alert-15: #ffc3bf;
+  --bi-alert-20: #ffafaa;
+  --bi-alert-25: #ff8780;
+  --bi-alert-30: #ff5f55;
+  --bi-alert-40: #ff372b;
+  --bi-alert-50: #ff0f00;
+  --bi-alert-60: #e41100;
+  --bi-alert-70: #c91300;
+  --bi-alert-75: #ae1601;
+  --bi-alert-80: #931801;
+  --bi-alert-85: #731a15;
+  --bi-alert-90: #6a1b16;
+  --bi-alert-95: #5d1c18;
+  --bi-alert-100: #280c0a;
+  --bi-scale-0: 0;
+  --bi-scale-0-25x: .0625rem;
+  --bi-scale-0-50x: .125rem;
+  --bi-scale-0-75x: .1875rem;
+  --bi-scale-1x: .25rem;
+  --bi-scale-1-5x: .375rem;
+  --bi-scale-2x: .5rem;
+  --bi-scale-3x: .75rem;
+  --bi-scale-4x: 1rem;
+  --bi-scale-5x: 1.25rem;
+  --bi-scale-6x: 1.5rem;
+  --bi-scale-8x: 2rem;
+  --bi-scale-9x: 2.25rem;
+  --bi-scale-10x: 2.5rem;
+  --bi-scale-11x: 2.75rem;
+  --bi-scale-12x: 3rem;
+  --bi-scale-14x: 3.5rem;
+  --bi-scale-16x: 4rem;
+  --bi-scale-20x: 5rem;
+  --bi-scale-24x: 6rem;
+  --bi-scale-32x: 8rem;
+  --bi-scale-36x: 9rem;
+  --bi-scale-40x: 10rem;
+  --bi-scale-48x: 12rem;
+  --bi-scale-56x: 14rem;
+  --bi-scale-64x: 16rem;
+  --bi-scale-80x: 20rem;
+  --bi-scale-max: 624.938rem;
+  --bi-opacity-dark-80: rgba(38, 51, 63, .2);
+  --bi-opacity-dark-50: rgba(38, 51, 63, .5);
+  --bi-opacity-light-100: rgba(255, 255, 255, 0);
+  --bi-opacity-light-80: rgba(255, 255, 255, .2);
+  --bi-opacity-light-50: rgba(255, 255, 255, .5);
+  --bi-stroke-default: .09375rem;
+  --bi-elevation-25: rgba(38, 51, 63, .15);
+  --bi-states-hover-dark: rgba(38, 51, 63, .1);
+  --bi-states-hover-light: rgba(255, 255, 255, .1);
+  --bi-states-press-dark: rgba(38, 51, 63, .15);
+  --bi-states-press-light: rgba(255, 255, 255, .15);
   --bi-stroke-none: var(--bi-scale-0);
   --bi-stroke-thin: var(--bi-scale-0-25x);
   --bi-stroke-thick: var(--bi-scale-0-50x);
@@ -192,7 +378,7 @@
 html {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   line-height: 1.15;
 }
 
@@ -239,7 +425,19 @@ button, input, optgroup, select, textarea {
   line-height: 1.15;
 }
 
-button, [type="button"], [type="reset"], [type="submit"] {
+button {
+  -webkit-appearance: button;
+}
+
+[type="button"] {
+  -webkit-appearance: button;
+}
+
+[type="reset"] {
+  -webkit-appearance: button;
+}
+
+[type="submit"] {
   -webkit-appearance: button;
 }
 
@@ -384,8 +582,13 @@ summary {
   }
 }
 
-body, :host {
-  font-family: museo-sans, Arial, sans-serif, system-ui;
+body {
+  font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
+  line-height: 1.5;
+}
+
+:host {
+  font-family: museo-sans, Arial, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
   line-height: 1.5;
 }
 

package/dist/reset.css

@@ -6,7 +6,7 @@
 html {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   line-height: 1.15;
 }
 
@@ -53,7 +53,19 @@ button, input, optgroup, select, textarea {
   line-height: 1.15;
 }
 
-button, [type="button"], [type="reset"], [type="submit"] {
+button {
+  -webkit-appearance: button;
+}
+
+[type="button"] {
+  -webkit-appearance: button;
+}
+
+[type="reset"] {
+  -webkit-appearance: button;
+}
+
+[type="submit"] {
   -webkit-appearance: button;
 }