@esri/calcite-design-tokens 1.1.1-next.2 → 2.0.0

package/dist/scss/mixins.scss

@@ -0,0 +1,342 @@
+/**
+ * Do not edit directly
+ * Generated on Sat, 02 Dec 2023 04:05:27 GMT
+ */
+
+@mixin calcite-typography-hierarchy-overline {
+	line-height: var(--calcite-font-line-height-fixed-sm);
+	text-case: var(--calcite-font-text-case-uppercase);
+	font-weight: var(--calcite-font-weight-bold);
+}
+
+@mixin calcite-typography-wrap-bold-minus-1 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-relative-snug);
+}
+
+@mixin calcite-typography-wrap-bold-minus-2 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-wrap-bold-3 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xxl);
+}
+
+@mixin calcite-typography-wrap-bold-2 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xl);
+}
+
+@mixin calcite-typography-wrap-bold-1 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-wrap-bold-0 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-wrap-medium-minus-1 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-relative-snug);
+}
+
+@mixin calcite-typography-wrap-medium-minus-2 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-wrap-medium-3 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xxl);
+}
+
+@mixin calcite-typography-wrap-medium-2 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xl);
+}
+
+@mixin calcite-typography-wrap-medium-1 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-wrap-medium-0 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-wrap-regular-minus-1 {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-relative-snug);
+}
+
+@mixin calcite-typography-wrap-regular-minus-2 {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-wrap-regular-3 {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xxl);
+}
+
+@mixin calcite-typography-wrap-regular-2 {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xl);
+}
+
+@mixin calcite-typography-wrap-regular-1 {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-wrap-regular-0 {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-wrap-light-minus-1 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-relative-snug);
+}
+
+@mixin calcite-typography-wrap-light-minus-2 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-wrap-light-3 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-relative-tight);
+	font-size: var(--calcite-font-size-xxl);
+}
+
+@mixin calcite-typography-wrap-light-2 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-xl);
+}
+
+@mixin calcite-typography-wrap-light-1 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-wrap-light-0 {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-relative-snug);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-bold-1h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-fixed-xl);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-bold-0h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-fixed-lg);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-bold-minus-1h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+}
+
+@mixin calcite-typography-bold-minus-2h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-bold-minus-3h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-semibold);
+	line-height: var(--calcite-font-line-height-fixed-sm);
+	font-size: var(--calcite-font-size-xs);
+}
+
+@mixin calcite-typography-medium-1h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-fixed-xl);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-medium-0h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-fixed-lg);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-medium-minus-1h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+}
+
+@mixin calcite-typography-medium-minus-2h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-medium-minus-3h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-medium);
+	line-height: var(--calcite-font-line-height-fixed-sm);
+	font-size: var(--calcite-font-size-xs);
+}
+
+@mixin calcite-typography-regular-1h {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-fixed-xl);
+	font-size: var(--calcite-font-size-lg);
+}
+
+@mixin calcite-typography-regular-0h {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-fixed-lg);
+	font-size: var(--calcite-font-size-md);
+}
+
+@mixin calcite-typography-regular-minus-2h {
+	@include calcite-typography;
+	font-size: var(--calcite-font-size-sm);
+}
+
+@mixin calcite-typography-regular-minus-3h {
+	@include calcite-typography;
+	line-height: var(--calcite-font-line-height-fixed-sm);
+	font-size: var(--calcite-font-size-xs);
+}
+
+@mixin calcite-typography-light-1h {
+	@include calcite-typography;
+	font-size: var(--calcite-font-size-lg);
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-fixed-xl);
+}
+
+@mixin calcite-typography-light-0h {
+	@include calcite-typography;
+	font-size: var(--calcite-font-size-md);
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-fixed-lg);
+}
+
+@mixin calcite-typography-light-minus-1h {
+	@include calcite-typography;
+	font-weight: var(--calcite-font-weight-light);
+}
+
+@mixin calcite-typography-light-minus-2h {
+	@include calcite-typography;
+	font-size: var(--calcite-font-size-sm);
+	font-weight: var(--calcite-font-weight-light);
+}
+
+@mixin calcite-typography-light-minus-3h {
+	@include calcite-typography;
+	font-size: var(--calcite-font-size-xs);
+	font-weight: var(--calcite-font-weight-light);
+	line-height: var(--calcite-font-line-height-fixed-sm);
+}
+
+@mixin calcite-typography {
+	font-family: var(--calcite-font-family);
+	font-size: var(--calcite-font-size);
+	font-weight: var(--calcite-font-weight-regular);
+	letter-spacing: var(--calcite-font-letter-spacing-normal);
+	line-height: var(--calcite-font-line-height-fixed-base);
+	paragraph-spacing: var(--calcite-font-paragraph-spacing-normal);
+	text-case: var(--calcite-font-text-case-none);
+	text-decoration: var(--calcite-font-text-decoration-none);
+}
+
+@mixin calcite-typography-hierarchy-caption {
+	@include calcite-typography-wrap-regular-minus-2;
+}
+
+@mixin calcite-typography-hierarchy-body {
+	@include calcite-typography;
+}
+
+@mixin calcite-typography-hierarchy-body-snug {
+	@include calcite-typography-wrap-regular-minus-1;
+}
+
+@mixin calcite-typography-hierarchy-heading-5 {
+	@include calcite-typography-wrap-medium-minus-1;
+}
+
+@mixin calcite-typography-hierarchy-heading-4 {
+	@include calcite-typography-wrap-medium-0;
+}
+
+@mixin calcite-typography-hierarchy-heading-3 {
+	@include calcite-typography-wrap-medium-1;
+}
+
+@mixin calcite-typography-hierarchy-heading-2 {
+	@include calcite-typography-wrap-medium-2;
+}
+
+@mixin calcite-typography-hierarchy-heading-1 {
+	@include calcite-typography-wrap-medium-3;
+}
+
+@mixin calcite-typography-hierarchy-display-2 {
+	@include calcite-typography-wrap-bold-2;
+}
+
+@mixin calcite-typography-hierarchy-display-1 {
+	@include calcite-typography-wrap-bold-3;
+}
+
+@mixin calcite-typography-regular-minus-1h {
+	@include calcite-typography;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-design-tokens",
-  "version": "1.1.1-next.2",
+  "version": "2.0.0",
   "description": "Esri's Calcite Design System Tokens",
   "keywords": [
     "Calcite",
@@ -8,26 +8,12 @@
     "design tokens",
     "tokens"
   ],
-  "main": "./dist/scss/calcite-headless.scss",
   "type": "module",
-  "exports": {
-    "./css": "./dist/css/calcite-headless.css",
-    "./css/calcite/dark": "./dist/css/calcite-dark.css",
-    "./css/calcite/light": "./dist/css/calcite-light.css",
-    "./css/headless": "./dist/css/calcite-headless.css",
-    "./scss": "./dist/scss/calcite-headless.scss",
-    "./scss/calcite/dark": "./dist/scss/calcite-dark.scss",
-    "./scss/calcite/light": "./dist/scss/calcite-light.scss",
-    "./scss/headless": "./dist/scss/calcite-headless.scss",
-    "./js": "./dist/js/calcite-headless.js",
-    "./js/calcite/dark": "./dist/js/calcite-dark.js",
-    "./js/calcite/light": "./dist/js/calcite-light.js",
-    "./js/headless": "./dist/js/calcite-headless.js",
-    "./es6": "./dist/es6/calcite-headless.js",
-    "./es6/calcite/dark": "./dist/es6/calcite-dark.js",
-    "./es6/calcite/light": "./dist/es6/calcite-light.js",
-    "./es6/headless": "./dist/es6/calcite-headless.js"
-  },
+  "main": "./dist/es6/global.js",
+  "types": "./dist/es6/global.d.ts",
+  "files": [
+    "./dist/**/*"
+  ],
   "repository": {
     "type": "git",
     "url": "git://github.com/Esri/calcite-design-system.git"
@@ -47,5 +33,5 @@
     "lint": "concurrently npm:lint:*",
     "test": "jest"
   },
-  "gitHead": "fd9c44abf3a3fa43fb5c8904169a61f5aae5f687"
+  "gitHead": "6cc9a6deebf4ef1a09e4cc58fd481c6d5a893204"
 }

package/.eslintrc.cjs

@@ -1,85 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    "jest/globals": true,
-  },
-  extends: [
-    "plugin:@cspell/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:jest/recommended",
-    "plugin:jsdoc/recommended",
-    "prettier",
-  ],
-  ignorePatterns: ["dist"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    project: ["tsconfig-eslint.json"],
-    ecmaVersion: 2021,
-    sourceType: "module",
-  },
-  plugins: [
-    "@typescript-eslint",
-    "import",
-    "jest",
-    "jsdoc",
-    "prettier",
-    "unicorn",
-  ],
-  rules: {
-    "@typescript-eslint/ban-types": "warn",
-    "@typescript-eslint/explicit-module-boundary-types": [
-      "error",
-      {
-        allowArgumentsExplicitlyTypedAsAny: true,
-      },
-    ],
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": "error",
-    curly: "error",
-    "import/no-dynamic-require": ["error", { esmodule: true }],
-    "jest/expect-expect": "off",
-    "jest/no-export": "warn",
-    "jsdoc/check-tag-names": "off",
-    "jsdoc/require-jsdoc": "off",
-    "jsdoc/require-param-type": "off",
-    "jsdoc/require-returns-type": "off",
-    "jsdoc/tag-lines": ["error", "any", { startLines: 1 }],
-    "lines-between-class-members": ["error", "always"],
-    "no-eval": "error",
-    "no-implied-eval": "error",
-    "no-multiple-empty-lines": [
-      "error",
-      {
-        max: 1,
-      },
-    ],
-    "no-new-func": "error",
-    "no-unneeded-ternary": "error",
-    "one-var": ["error", "never"],
-    "unicorn/prefer-ternary": "error",
-    "unicorn/prevent-abbreviations": [
-      "error",
-      {
-        allowList: {
-          e2ePage: true,
-        },
-        extendDefaultReplacements: false,
-        replacements: {
-          e: {
-            error: true,
-            event: true,
-          },
-        },
-        checkProperties: false,
-        checkFilenames: false,
-      },
-    ],
-  },
-  settings: {
-    jsdoc: {
-      ignoreInternal: true,
-      ignorePrivate: true,
-    },
-  },
-};