@bi-digital/tokens 0.0.27-alpha.0

package/dist/tokens.scss

@@ -0,0 +1,128 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$bi-basic-key: #000000;
+$bi-basic-white: #ffffff;
+$bi-neutral-5: #f2f4f6;
+$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-80: #344557;
+$bi-neutral-85: #303f4f;
+$bi-neutral-90: #2b3947;
+$bi-neutral-95: #26333f;
+$bi-neutral-100: #222d38;
+$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-80: #0c468f;
+$bi-primary-85: #093f82;
+$bi-primary-90: #083a76;
+$bi-primary-95: #042f5b;
+$bi-primary-100: #002341;
+$bi-secondary-5: #fcf6df;
+$bi-secondary-10: #f9edbf;
+$bi-secondary-20: #f5e49f;
+$bi-secondary-30: #f2dc7e;
+$bi-secondary-40: #efd35f;
+$bi-secondary-50: #ecca3f;
+$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-80: #420896;
+$bi-info-85: #3b0984;
+$bi-info-90: #350a73;
+$bi-info-95: #2e0b61;
+$bi-info-100: #280d50;
+$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-80: #9d7e00;
+$bi-warning-85: #7c6400;
+$bi-warning-90: #5b4900;
+$bi-warning-95: #4a3c01;
+$bi-warning-100: #3a2f00;
+$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-80: #0b7411;
+$bi-success-85: #0f5d13;
+$bi-success-90: #124515;
+$bi-success-95: #143a16;
+$bi-success-100: #162e17;
+$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-80: #ae1601;
+$bi-alert-85: #931801;
+$bi-alert-90: #731a15;
+$bi-alert-95: #6a1b16;
+$bi-alert-100: #5d1c18;
+$bi-scale-0: 0;
+$bi-scale-0-25x: 0.0625rem;
+$bi-scale-0-50x: 0.125rem;
+$bi-scale-0-75x: 0.1875rem;
+$bi-scale-1x: 0.25rem;
+$bi-scale-1-5x: 0.375rem;
+$bi-scale-2x: 0.5rem;
+$bi-scale-3x: 0.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-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.9375rem;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@bi-digital/tokens",
+  "version": "0.0.27-alpha.0",
+  "description": "CSS and SASS variables for the BI Design System",
+  "author": "BI Digital",
+  "license": "ISC",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/tokens.css",
+  "exports": {
+    ".": "./dist/tokens.css",
+    "./dist/*": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./dist/*"
+    }
+  },
+  "files": [
+    "/dist"
+  ],
+  "devDependencies": {
+    "style-dictionary": "^4.3.3"
+  },
+  "scripts": {
+    "build": "style-dictionary build",
+    "build:debug": "style-dictionary build --verbose",
+    "lint": "eslint ."
+  }
+}

package/readme.md

@@ -0,0 +1,65 @@
+# @bi-digital/tokens
+
+The `@bi-digital/tokens` lib contains CSS variables to be used in the BI Web Components library and other places that uses the BI Design System.
+We offer tokens in CSS, SASS, and JS format.
+
+> In most cases, you do not need to download the token package itself, as `@bi-digital/css` already offers all tokens as CSS variables.
+
+> We recommend using the tokens as CSS variables, as they are a native CSS feature.
+
+All tokens are prefixed with `bi`.
+
+## Usage
+
+In `.css`-files:
+
+```css
+@import '@bi-digital/tokens';
+
+.example {
+  color: var(--bi-primary-80);
+}
+```
+
+In `.scss`-files:
+
+```scss
+@use '@bi-digital/tokens/dist/tokens' as tokens;
+
+.example {
+  color: tokens.$bi-primary-80;
+}
+```
+
+CDN:
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@bi-digital/tokens@latest/dist/tokens.css"></script>
+```
+
+We recommend replacing `latest` with a specific version to avoid errors when the library is updated.
+
+### Variables in media queries
+
+CSS custom properties do not support the use of variables in media queries, but for users of SCSS, this works. You must import the SCSS variables from `@bi-digital/tokens` directly:
+
+```scss
+@use '@bi-digital/tokens/dist/tokens' as tokens;
+
+@media (min-width: tokens.$bi-breakpoints-sm) {
+  .example {
+    color: tokens.$bi-primary-80;
+  }
+}
+```
+
+### VSCode-extensions
+
+For users of VSCode, you can use the extension "Css Custom Properties" (`Tock.vscode-css-custom-properties`) for autocomplete of tokens. You need to add the following settings:
+
+```json
+{
+  "cssCustomProperties.files": ["@bi-digital/**/tokens.css"],
+  "cssCustomProperties.languages": ["css", "scss"]
+}
+```