@bi-digital/css 0.0.0-experimental-b8ff5ba → 0.0.0-experimental-37bf70d

package/dist/tokens.css

@@ -1,4 +1,4 @@
-:root, :host {
+:root {
   --bi-basic-key: #000;
   --bi-basic-white: #fff;
   --bi-neutral-0: #fafbfc;
@@ -148,17 +148,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);

package/package.json

@@ -1,10 +1,22 @@
 {
   "name": "@bi-digital/css",
-  "version": "0.0.0-experimental-b8ff5ba",
+  "type": "module",
+  "version": "0.0.0-experimental-37bf70d",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
   "description": "CSS for the BI Design System",
   "author": "BI Digital",
+  "homepage": "https://designsystem.bi.no/",
   "license": "ISC",
-  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bi-norwegian-business-school/bino-designsystem.git",
+    "directory": "packages/css"
+  },
+  "bugs": {
+    "url": "https://github.com/bi-norwegian-business-school/bino-designsystem/issues"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -18,12 +30,12 @@
     "/dist"
   ],
   "devDependencies": {
-    "browserslist": "^4.25.2",
+    "browserslist": "^4.26.2",
     "glob": "^11.0.3",
-    "lightningcss": "^1.30.1",
+    "lightningcss": "^1.30.2",
     "modern-normalize": "^3.0.1",
     "rimraf": "^6.0.1",
-    "@bi-digital/tokens": "0.0.0-experimental-b8ff5ba"
+    "@bi-digital/tokens": "0.0.0-experimental-37bf70d"
   },
   "scripts": {
     "build": "rimraf dist && node config.js",

package/dist/assets/icons/bi-cart.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" viewBox="0 0 25 25">
-  <path fill-rule="evenodd" d="M9.118 7.32a3.748 3.748 0 0 1 3.745-3.745 3.748 3.748 0 0 1 3.746 3.744h3.245v10.986a3.247 3.247 0 0 1-3.246 3.246h-7.49a3.247 3.247 0 0 1-3.245-3.246V7.319h3.245Zm0 1.5v2.994h1.5V8.819h4.491v2.995h1.5V8.819h1.745v9.486c0 .963-.782 1.746-1.746 1.746h-7.49a1.747 1.747 0 0 1-1.745-1.746V8.819h1.745Zm5.991-1.5h-4.491a2.248 2.248 0 0 1 2.245-2.245 2.248 2.248 0 0 1 2.246 2.244Z" clip-rule="evenodd"/>
-</svg>

package/dist/icons.css

@@ -1,58 +0,0 @@
-.bi-icon {
-  width: 1em;
-  height: 1em;
-  font-size: inherit;
-  background: currentColor;
-  display: inline-block;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-
-.bi-icon[data-size="2xl"] {
-  font-size: 3rem !important;
-}
-
-.bi-icon[data-size="xl"] {
-  font-size: 2.5rem !important;
-}
-
-.bi-icon[data-size="large"] {
-  font-size: 2rem !important;
-}
-
-.bi-icon[data-size="medium"] {
-  font-size: 1.5rem !important;
-}
-
-.bi-icon[data-size="small"] {
-  font-size: 1.25rem !important;
-}
-
-.bi-icon[data-color="inherit"] {
-  color: inherit;
-}
-
-.bi-icon[data-color="primary"] {
-  color: var(--bi-primary-50);
-}
-
-.bi-icon[data-color="gray"] {
-  color: #1c1b1b;
-}
-
-.bi-icon[data-color="black"] {
-  color: #000;
-}
-
-.bi-icon[data-color="white"] {
-  color: #fff;
-}
-
-.bi-icon.bi-icon-cart {
-  -webkit-mask-image: url("./assets/icons/bi-cart.svg");
-  mask-image: url("./assets/icons/bi-cart.svg");
-}