@itcase/tokens-am 1.0.24 → 1.0.27

package/dist/css/styles/main.css

@@ -1,144 +1,146 @@
 :root {
-  --color-accent-primary: hsla(195, 96%, 59%, 1);
-  --color-accent-primary-hover: hsla(197, 100%, 47%, 1);
-  --color-accent-secondary: hsla(194, 99%, 36%, 1);
-  --color-accent-secondary-hover: hsla(197, 100%, 47%, 1);
-  --color-accent-tertiary: hsla(219, 61%, 34%, 1);
-  --color-accent-active: hsla(195, 96%, 59%, 1);
-  --color-accent-disabled: hsla(195, 100%, 94%, 1);
+  --color-accent-primary: hsla(92, 49%, 47%, 1);
+  --color-accent-primary-hover: hsla(92, 70%, 47%, 1);
+  --color-accent-secondary: hsla(92, 29%, 62%, 1);
+  --color-accent-secondary-hover: hsla(90, 28%, 88%, 1);
+  --color-accent-tertiary: hsla(93, 53%, 93%, 1);
+  --color-accent-active: hsla(92, 46%, 41%, 1);
+  --color-accent-disabled: hsla(93, 45%, 80%, 1);
 
   --color-accent-text-primary: hsla(0, 0%, 100%, 1);
-  --color-accent-text-secondary: hsla(194, 99%, 36%, 1);
-  --color-accent-text-disable: hsla(240, 53%, 33%, 1);
+  --color-accent-text-secondary: hsla(92, 49%, 47%, 1);
+  --color-accent-text-disable: hsla(92, 49%, 47%, 1);
 
   --color-accent-item-primary: hsla(0, 0%, 100%, 1);
-  --color-accent-item-secondary: hsla(197, 100%, 47%, 1);
-  --color-accent-item-tertiary: hsla(219, 61%, 34%, 1);
-  --color-accent-item-quaternary: hsla(194, 99%, 36%, 1);
-  --color-accent-item-active: hsla(197, 100%, 47%, 1);
-  --color-accent-item-disabled: hsla(195, 100%, 94%, 1);
+  --color-accent-item-secondary: hsla(92, 49%, 47%, 1);
+  --color-accent-item-disabled: hsla(92, 49%, 47%, 1);
 
   --color-accent-border-primary: hsla(0, 0%, 100%, 1);
-  --color-accent-border-secondary: hsla(197, 100%, 47%, 1);
-  --color-accent-border-disabled: hsla(195, 100%, 94%, 1);
+  --color-accent-border-secondary: hsla(92, 50%, 42%, 1);
+  --color-accent-border-tertiary: hsla(94, 53%, 68%, 1);
+  --color-accent-border-hover: hsla(92, 70%, 47%, 1);
+  --color-accent-border-quaternary: hsla(92, 37%, 35%, 1);
+  --color-accent-border-disabled: hsla(93, 45%, 80%, 1);
 
   --color-primary-primary: hsla(36, 95%, 45%, 1);
-
-  --color-secondary-primary: hsla(334, 88%, 64%, 1);
-  --color-secondary-primary-hover: hsla(334, 88%, 64%, 1);
+  --color-primary-primary-hover: hsla(36, 94%, 60%, 1);
+  --color-primary-secondary: hsla(36, 95%, 45%, 1);
+  --color-primary-secondary-hover: hsla(36, 88%, 87%, 1);
+  --color-primary-disabled: hsla(32, 13%, 81%, 1);
+  --color-primary-active: hsla(36, 95%, 40%, 1);
+
+  --color-primary-text-primary: hsla(0, 0%, 100%, 1);
+  --color-primary-text-secondary: hsla(36, 95%, 45%, 1);
+  --color-primary-text-disabled: hsla(36, 60%, 65%, 1);
+
+  --color-primary-item-primary: hsla(0, 0%, 100%, 1);
+  --color-primary-item-secondary: hsla(36, 95%, 45%, 1);
+  --color-primary-item-disabled: hsla(36, 60%, 65%, 1);
+
+  --color-primary-border-primary: hsla(0, 0%, 100%, 1);
+  --color-primary-border-secondary: hsla(36, 95%, 45%, 1);
+  --color-primary-border-tertiary: hsla(36, 96%, 70%, 1);
+  --color-primary-border-quaternary: hsla(36, 95%, 36%, 1);
+  --color-primary-border-hover: hsla(36, 94%, 60%, 1);
+  --color-primary-border-disabled: hsla(32, 13%, 81%, 1);
+
+  --color-secondary-primary: hsla(349, 96%, 44%, 1);
+  --color-secondary-primary-hover: hsla(349, 100%, 51%, 1);
   --color-secondary-secondary: hsla(349, 70%, 74%, 1);
   --color-secondary-secondary-hover: hsla(348, 68%, 85%, 1);
-  --color-secondary-disabled: hsla(348, 58%, 90%, 1);
+  --color-secondary-disabled: hsla(348, 59%, 90%, 1);
   --color-secondary-active: hsla(349, 95%, 34%, 1);
 
-  --color-secondary-text-hover: hsla(349, 95%, 34%, 1);
+  --color-secondary-item-primary: hsla(0, 0%, 100%, 1);
+  --color-secondary-item-secondary: hsla(349, 96%, 44%, 1);
+  --color-secondary-item-disabled: hsla(348, 53%, 68%, 1);
+
+  --color-secondary-text-primary: hsla(0, 0%, 100%, 1);
+  --color-secondary-text-secondary: hsla(349, 96%, 44%, 1);
+  --color-secondary-text-disabled: hsla(348, 53%, 68%, 1);
+
+  --color-secondary-border-primary: hsla(0, 0%, 100%, 1);
+  --color-secondary-border-secondary: hsla(349, 90%, 54%, 1);
+  --color-secondary-border-tertiary: hsla(349, 94%, 72%, 1);
+  --color-secondary-border-quaternary: hsla(349, 87%, 28%, 1);
+  --color-secondary-border-hover: hsla(349, 100%, 51%, 1);
+  --color-secondary-border-disabled: hsla(348, 59%, 90%, 1);
 
   --color-surface-primary: hsla(0, 0%, 100%, 1);
-  --color-surface-primary-hover: hsla(0, 0%, 85%, 1);
+  --color-surface-primary-hover: hsla(0, 0%, 82%, 1);
   --color-surface-secondary: hsla(220, 14%, 96%, 1);
   --color-surface-secondary-hover: hsla(0, 0%, 78%, 1);
   --color-surface-tertiary: hsla(0, 0%, 85%, 1);
   --color-surface-tertiary-hover: hsla(0, 0%, 73%, 1);
-  --color-surface-quaternary: hsla(216, 2%, 51%, 1);
-  --color-surface-quaternary-50: hsla(0, 0%, 100%, 0.5);
-  --color-surface-disabled: hsla(0, 0%, 93%, 1);
-  --color-surface-quinary: hsla(195, 96%, 59%, 1);
-  --color-surface-accent: hsla(195, 95%, 85%, 1);
-  --color-surface-inverse: hsla(0, 0%, 0%, 1);
-  --color-surface-inverse-50: hsla(0, 0%, 0%, 0.5);
-
-  --color-surface-text-primary: hsla(0, 0%, 0%, 1);
-  --color-surface-text-secondary: hsla(0, 0%, 93%, 1);
-  --color-surface-text-tertiary: hsla(219, 61%, 34%, 1);
-  --color-surface-text-quaternary: hsla(216, 2%, 51%, 1);
+  --color-surface-quaternary: hsla(0, 0%, 45%, 1);
+  --color-surface-quaternary-50: hsla(0, 0%, 45%, 0.5);
+  --color-surface-disabled: hsla(0, 0%, 79%, 1);
+  --color-surface-active: hsla(0, 0%, 64%, 1);
+
+  --color-surface-text-primary: hsla(0, 0%, 9%, 1);
+  --color-surface-text-secondary: hsla(0, 0%, 46%, 1);
+  --color-surface-text-tertiary: hsla(213, 5%, 45%, 1);
+  --color-surface-text-quaternary: hsla(0, 0%, 45%, 1);
   --color-surface-text-disabled: hsla(0, 0%, 47%, 1);
-  --color-surface-text-hover: hsla(0, 0%, 31%, 1);
-  --color-surface-text-accent: hsla(194, 99%, 36%, 1);
-  --color-surface-text-accent-hover: hsla(195, 96%, 59%, 1);
-  --color-surface-text-active: hsla(197, 100%, 47%, 1);
+  --color-surface-text-accent: hsla(92, 49%, 47%, 1);
+  --color-surface-text-accent-hover: hsla(92, 70%, 47%, 1);
+  --color-surface-text-active: hsla(40, 75%, 58%, 1);
   --color-surface-text-inverse: hsla(0, 0%, 100%, 1);
 
-  --color-surface-item-primary: hsla(0, 0%, 0%, 1);
+  --color-surface-item-primary: hsla(36, 71%, 13%, 1);
   --color-surface-item-secondary: hsla(0, 0%, 93%, 1);
-  --color-surface-item-tertiary: hsla(219, 61%, 34%, 1);
-  --color-surface-item-quaternary: hsla(194, 99%, 36%, 1);
-  --color-surface-item-hover: hsla(0, 0%, 31%, 1);
-  --color-surface-item-disabled: hsla(0, 0%, 47%, 1);
-  --color-surface-item-accent: hsla(197, 100%, 47%, 1);
-  --color-surface-item-active: hsla(195, 96%, 59%, 1);
+  --color-surface-item-tertiary: hsla(0, 0%, 85%, 1);
+  --color-surface-item-quaternary: hsla(0, 0%, 45%, 1);
+  --color-surface-item-disabled: hsla(0, 0%, 85%, 1);
   --color-surface-item-inverse: hsla(0, 0%, 100%, 1);
+  --color-surface-item-accent: hsla(92, 49%, 47%, 1);
 
-  --color-surface-border-primary: hsla(0, 0%, 0%, 1);
-  --color-surface-border-secondary: hsla(220, 14%, 96%, 1);
-  --color-surface-border-tertiary: hsla(219, 61%, 34%, 1);
-  --color-surface-border-quaternary: hsla(216, 2%, 51%, 1);
+  --color-surface-border-primary: hsla(36, 71%, 13%, 1);
+  --color-surface-border-secondary: hsla(0, 0%, 93%, 1);
+  --color-surface-border-tertiary: hsla(0, 0%, 85%, 1);
+  --color-surface-border-quaternary: hsla(0, 0%, 45%, 1);
   --color-surface-border-hover: hsla(0, 0%, 31%, 1);
-  --color-surface-border-disabled: hsla(0, 0%, 47%, 1);
-  --color-surface-border-accent: hsla(0, 0%, 85%, 1);
-  --color-surface-border-active: hsla(195, 96%, 59%, 1);
-  --color-surface-border-inverse: hsla(0, 0%, 100%, 1);
+  --color-surface-border-disabled: hsla(0, 0%, 61%, 1);
+  --color-surface-border-accent: hsla(92, 49%, 47%, 1);
+  --color-surface-border-active: hsla(40, 75%, 58%, 1);
 
-  --color-error-primary: hsla(0, 100%, 44%);
+  --color-error-primary: hsla(0, 100%, 44%, 1);
+  --color-error-tertiary: hsla(0, 100%, 92%, 1);
 
   --color-error-text-primary: hsla(0, 100%, 44%, 1);
   --color-error-text-secondary: hsla(0, 0%, 100%, 1);
 
-  --color-error-border-primary: hsla(0, 0%, 100%, 1);
-  --color-error-border-secondary: hsla(0, 100%, 44%);
-  --color-error-border-disabled: hsla(0, 31%, 65%);
+  --color-error-border-primary: hsla(0, 100%, 44%, 1);
+  --color-error-border-secondary: hsla(0, 0%, 100%, 1);
 
-  --color-error-item-primary: hsla(0, 0%, 100%, 1);
-  --color-error-item-secondary: hsla(0, 100%, 44%);
-  --color-error-item-disabled: hsla(0, 31%, 65%);
+  --color-error-item-primary: hsla(0, 100%, 44%, 1);
+  --color-error-item-secondary: hsla(0, 0%, 100%, 1);
 
-  --color-success-primary: hsla(92, 56%, 38%);
-  --color-success-secondary: hsla(92, 68%, 48%);
-  --color-success-tertiary: hsla(90, 53%, 93%);
-  --color-success-disabled: hsla(92, 43%, 80%);
+  --color-success-primary: hsla(92, 56%, 38%, 1);
 
-  --color-success-text-primary: hsla(0, 0%, 100%, 1);
-  --color-success-text-secondary: hsla(92, 56%, 38%);
-  --color-success-text-disabled: hsla(92, 22%, 54%);
+  --color-success-text-primary: hsla(92, 56%, 38%, 1);
+  --color-success-text-secondary: hsla(0, 0%, 100%, 1);
 
-  --color-success-item-primary: hsla(92, 56%, 38%);
+  --color-success-item-primary: hsla(92, 56%, 38%, 1);
   --color-success-item-secondary: hsla(0, 0%, 100%, 1);
-  --color-success-item-disabled: hsla(92, 22%, 54%);
 
-  --color-success-border-primary: hsla(92, 56%, 38%);
+  --color-success-border-primary: hsla(92, 56%, 38%, 1);
   --color-success-border-secondary: hsla(0, 0%, 100%, 1);
-  --color-success-border-disabled: hsla(92, 22%, 54%);
 
-  --color-warning-primary: hsla(36, 95%, 45%);
-  --color-warning-secondary: hsla(36, 76%, 71%);
-  --color-warning-tertiary: hsla(0, 0%, 100%, 1);
-  --color-warning-disabled: hsla(36, 83%, 86%);
+  --color-warning-text-primary: hsla(43, 68%, 50%, 1);
+  --color-warning-text-secondary: hsla(0, 0%, 100%, 1);
 
-  --color-warning-text-primary: hsla(36, 95%, 45%);
-  --color-warning-text-secondary: hsla(36, 76%, 71%);
-  --color-warning-text-disabled: hsla(36, 31%, 57%);
+  --color-warning-primary: hsla(43, 68%, 50%, 1);
 
-  --color-warning-border-primary: hsla(36, 95%, 45%);
-  --color-warning-border-secondary: hsla(0, 0%, 100%, 1);
-  --color-warning-border-disabled: hsla(36, 31%, 57%);
+  --color-warning-border-primary: hsla(43, 68%, 50%, 1);
 
-  --color-warning-item-primary: hsla(36, 95%, 45%);
-  --color-warning-item-secondary: hsla(0, 0%, 100%, 1);
-  --color-warning-item-disabled: hsla(36, 31%, 57%);
+  --color-warning-item-primary: hsla(43, 68%, 50%, 1);
 
   --color-info-primary: hsla(211, 83%, 47%, 1);
   --color-info-text-primary: hsla(0, 0%, 100%, 1);
 
-  --color-danger-text-primary: hsla(349, 68%, 50%);
-  --color-danger-text-secondary: hsla(0, 0%, 100%, 1);
-  --color-danger-text-disabled: hsla(349, 43%, 75%);
-
-  --color-danger-item-primary: hsla(349, 68%, 50%);
-  --color-danger-item-secondary: hsla(0, 0%, 100%, 1);
-  --color-danger-item-disabled: hsla(349, 43%, 75%);
-
-  --color-danger-border-primary: hsla(349, 68%, 50%);
-  --color-danger-border-secondary: hsla(0, 0%, 100%, 1);
-  --color-danger-border-disabled: hsla(349, 43%, 75%);
+  --color-danger-primary: hsla(349, 96%, 44%, 1);
+  --color-danger-text-primary: hsla(0, 0%, 100%, 1);
 
   --color-gradient-primary: linear-gradient(
     to right,
@@ -150,7 +152,7 @@
   --elevation-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
   --elevation-4: 0px 2px 6px rgba(0, 0, 0, 0.24);
   --elevation-6: 0px 2px 6px rgba(0, 0, 0, 0.24);
-  --elevation-8: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  --elevation-8: 0px 4px 12px 0px rgba(0, 0, 0, 0.2);
   --elevation-12: 0px 6px 12px rgba(0, 0, 0, 0.16);
   --elevation-16: 0px 8px 16px rgba(0, 0, 0, 0.16);
   --elevation-24: 0px 16px 24px rgba(0, 0, 0, 0.12);
@@ -204,26 +206,26 @@
 
   --typography-text-xxl-min: 20px;
   --typography-text-xxl-max: 24px;
-  --typography-text-xxl-min-line-height: 20px;
-  --typography-text-xxl-max-line-height: 24px;
+  --typography-text-xxl-min-line-height: 24px;
+  --typography-text-xxl-max-line-height: 28px;
   --typography-text-xxl-font: var(--font-primary);
 
-  --typography-text-xl-min: 20px;
-  --typography-text-xl-max: 22px;
-  --typography-text-xl-min-line-height: 20px;
-  --typography-text-xl-max-line-height: 22px;
+  --typography-text-xl-min: 18px;
+  --typography-text-xl-max: 20px;
+  --typography-text-xl-min-line-height: 22px;
+  --typography-text-xl-max-line-height: 24px;
   --typography-text-xl-font: var(--font-primary);
 
-  --typography-text-l-min: 18px;
-  --typography-text-l-max: 20px;
+  --typography-text-l-min: 16px;
+  --typography-text-l-max: 18px;
   --typography-text-l-min-line-height: 18px;
   --typography-text-l-max-line-height: 20px;
   --typography-text-l-font: var(--font-primary);
 
   --typography-text-m-min: 14px;
   --typography-text-m-max: 16px;
-  --typography-text-m-min-line-height: 14px;
-  --typography-text-m-max-line-height: 20px;
+  --typography-text-m-min-line-height: 16px;
+  --typography-text-m-max-line-height: 18px;
   --typography-text-m-font: var(--font-primary);
 
   --typography-text-s-min: 12px;
@@ -285,8 +287,64 @@
 
   --typography-email-text-xxs: 10px;
   --typography-email-text-xxs-line-height: 14px;
+  --font-primary: 'Wix Madefor Display', sans-serif;
+  --font-email: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, 'Helvetica Neue', sans-serif;
 }
 /* stylelint-disable custom-property-empty-line-before, value-keyword-case */
+/* stylelint-disable custom-property-empty-line-before, value-keyword-case */
+@font-face {
+  font-family: 'Wix Madefor Display';
+  src: url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Bold.eot');
+  src:
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Bold.eot?#iefix')
+      format('embedded-opentype'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Bold.woff2') format('woff2'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Bold.woff') format('woff'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: 'Wix Madefor Display';
+  src: url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-SemiBold.eot');
+  src:
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-SemiBold.eot?#iefix')
+      format('embedded-opentype'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-SemiBold.woff2') format('woff2'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-SemiBold.woff') format('woff'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: 'Wix Madefor Display';
+  src: url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Medium.eot');
+  src:
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Medium.eot?#iefix')
+      format('embedded-opentype'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Medium.woff2') format('woff2'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Medium.woff') format('woff'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
+@font-face {
+  font-family: 'Wix Madefor Display';
+  src: url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Regular.eot');
+  src:
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Regular.eot?#iefix')
+      format('embedded-opentype'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Regular.woff2') format('woff2'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Regular.woff') format('woff'),
+    url('./../../fonts/WixMadeforDisplay/WixMadeforDisplay-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-optical-sizing: auto;
+}
 @media (--desktop) {
   :root {
     --wrapper-margin: 40px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@itcase/tokens-am",
   "description": "",
-  "version": "1.0.24",
+  "version": "1.0.27",
   "keywords": [],
   "license": "MIT",
   "private": false,
@@ -10,11 +10,13 @@
     "url": "https://github.com/ITCase/itcase-tokens.git"
   },
   "scripts": {
-    "build": "npm run build-js && npm run build-css",
+    "build": "npm run build-css && npm run fonts",
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
-    "build-css": "rm -rf dist/css && postcss 'src/styles/main.css' --base src --dir dist/css/ --env production",
-    "dev-js": "rollup -c -w",
-    "dev-css": "postcss 'src/styles/main.css' --base src --dir dist/css/ --env production -w --verbose"
+    "build-css": "postcss 'src/styles/main.css' --base src --dir dist/css/ --env production",
+    "dev": "npm run dev-css",
+    "fonts": "rm -rf ./dist/fonts && cp -r ./src/fonts/ ./dist/fonts/",
+    "dev-css": "postcss 'src/styles/main.css' --base src --dir dist/css/ --env production",
+    "dev-js": "rollup -c -w"
   },
   "files": [
     "/dist"
@@ -23,5 +25,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "7276f21b2c171a8214e46eb865b4411f95eb1a0d"
+  "gitHead": "281851ad5bd75fa42a6d9bce1cbec59737acfe8b"
 }

package/dist/index.js

@@ -1,2 +0,0 @@
-'use strict';
-