@esri/calcite-design-tokens 1.0.0 → 1.1.0-next.0

package/.eslintrc.cjs

@@ -0,0 +1,85 @@
+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,
+    },
+  },
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,64 @@
+
+> @esri/calcite-design-tokens@1.0.0 build
+> ts-node --esm support/run.ts
+
+
+css
+! dist/css/brand-light.css, does not exist
+
+scss
+! dist/scss/brand-light.scss, does not exist
+
+css
+✔︎ dist/css/brand-light.css
+
+scss
+✔︎ dist/scss/brand-light.scss
+
+css
+! dist/css/brand-dark.css, does not exist
+
+scss
+! dist/scss/brand-dark.scss, does not exist
+
+css
+No properties for brand-dark.css. File not created.
+
+scss
+No properties for brand-dark.scss. File not created.
+
+css
+! dist/css/calcite-dark.css, does not exist
+
+scss
+! dist/scss/calcite-dark.scss, does not exist
+
+css
+✔︎ dist/css/calcite-dark.css
+
+scss
+✔︎ dist/scss/calcite-dark.scss
+
+css
+! dist/css/calcite-light.css, does not exist
+
+scss
+! dist/scss/calcite-light.scss, does not exist
+
+css
+✔︎ dist/css/calcite-light.css
+
+scss
+✔︎ dist/scss/calcite-light.scss
+
+css
+! dist/css/calcite-headless.css, does not exist
+
+scss
+! dist/scss/calcite-headless.scss, does not exist
+
+css
+✔︎ dist/css/calcite-headless.css
+
+scss
+✔︎ dist/scss/calcite-headless.scss

package/.turbo/turbo-test.log

@@ -0,0 +1,14 @@
+
+> @esri/calcite-design-tokens@1.0.0 test
+> jest
+
+PASS support/token-transformer/parse/expandComposites.test.ts (9.936 s)
+PASS support/token-transformer/utils/compositeTokens.test.ts
+PASS support/token-transformer/transform/nameKebabCase.test.ts
+PASS support/token-transformer/transform/nameCamelCase.test.ts
+
+Test Suites: 4 passed, 4 total
+Tests:       12 passed, 12 total
+Snapshots:   0 total
+Time:        11.831 s
+Ran all test suites.

package/CHANGELOG.md

@@ -1,9 +1,18 @@
-# Changelog
+# Change Log
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.0.0-beta.0](https://github.com/Esri/calcite-styles/compare/v0.1.0...v1.0.0-beta.0) (2023-05-04)
+## [1.1.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.0.0...@esri/calcite-design-tokens@1.1.0-next.0) (2023-10-12)
 
 ### Features
 
-- add scss platform ([5624b4e](https://github.com/Esri/calcite-styles/commit/5624b4e0f59171a57b49a4ce48cab996d981e54a))
+- add xxs breakpoint to tokens ([#7992](https://github.com/Esri/calcite-design-system/issues/7992)) ([05512b6](https://github.com/Esri/calcite-design-system/commit/05512b6e5b58d4391972dfc9bbf559503301a025)), closes [#7856](https://github.com/Esri/calcite-design-system/issues/7856)
+
+## [1.0.0](2023-05-11)
+
+### Features
+
+- Uses @token-studio tokens format
+- Add css platform
+- Add scss platform

package/CONTRIBUTING.md

@@ -0,0 +1,41 @@
+# Contributing to `calcite-design-tokens`
+
+This document contains information about contributing to the `calcite-design-tokens` package. Please read the general [CONTRIBUTING](../../CONTRIBUTING.md) document first, which includes initial setup, commit message conventions, and more.
+
+## Project scripts
+
+### Build
+
+Build the tokens to platform asset formats like CSS, SCSS, and JavaScript.
+
+`npm --workspace=packages/calcite-design-tokens run build`
+
+## Test
+
+Be sure your code passes our integration and unit tests
+
+```bash
+# Test current code
+npm --workspace=packages/calcite-design-tokens run test
+```
+
+## Understanding token files
+
+All token files may be updated by the Figma Token Studio plugin. These can also be updated in the code directly. Any changes to token files must be reviewed by the Calcite Design Team.
+
+| Name                 | Description                                                                                                       |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `src/$metadata.json` | This file is used by Figma Token Studio but is not used to determine final token asset output.                    |
+| `src/$themes.json`   | Each theme defined in this file will output a token asset in each format defined in the token transformer config. |
+| `src/core.json`      | The core design tokens upon which the rest of the tokens are built.                                               |
+| `src/semantic.json`  | The semantic design tokens used by theme files and components.                                                    |
+| `src/component/`     | The component design tokens. These are used by themes.                                                            |
+| `src/calcite/`       | The Calcite themes. This currently consists of a light and dark theme.                                            |
+
+### Open a PR
+
+Designers working in Figma will need to manually open a PR through GitHub after updating their branch via the Figma plugin. PRs should be opened against main.
+
+### Wait for reviewers
+
+All Token PRs require sign-off from a Calcite Designer and Engineer before merging into main.

package/LICENSE.md

@@ -0,0 +1,13 @@
+# Licensing
+
+COPYRIGHT © 2023 Esri
+
+All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+
+This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+
+See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
+
+For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
+
+email: contracts@esri.com

package/README.md

@@ -8,7 +8,7 @@ Install the design tokens module.
 npm install @esri/calcite-design-tokens
 ```
 
-Reference tokens in your CSS.
+Reference tokens in your CSS:
 
 ```css
 @import "@esri/calcite-design-tokens/css/calcite-light";
@@ -20,14 +20,12 @@ Reference tokens in your CSS.
 
 ## Token assets
 
-These are the published asset files generated by the token transformer
+These are the published asset files generated by the token transformer:
 
-| Name                | CSS                                                                                   | SCSS                                                                                    |
-| ------------------- | ------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
-| Calcite Headless    | @esri/calcite-design-tokens/css <br> @esri/calcite-design-tokens/css/calcite-headless | @esri/calcite-design-tokens/scss <br> @esri/calcite-design-tokens/scss/calcite-headless |
-| Calcite Light       | @esri/calcite-design-tokens/css/calcite-light                                         | @esri/calcite-design-tokens/scss/calcite-light                                          |
-| Calcite Dark        | @esri/calcite-design-tokens/css/calcite-dark                                          | @esri/calcite-design-tokens/scss/calcite-dark                                           |
-| Calcite Brand Light | @esri/calcite-design-tokens/css/brand-light                                           | @esri/calcite-design-tokens/scss/brand-light                                            |
-| Calcite Brand Dark  | @esri/calcite-design-tokens/css/brand-dark                                            | @esri/calcite-design-tokens/scss/brand-dark                                             |
-
-For a full list of tokens and their detailes, please refer to https://developers.arcgis.com/calcite-design-system/tokens
+| Name                | CSS                                                                              | SCSS                                                                               |
+| ------------------- | -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Calcite Headless    | @esri/calcite-design-tokens/css @esri/calcite-design-tokens/css/calcite-headless | @esri/calcite-design-tokens/scss @esri/calcite-design-tokens/scss/calcite-headless |
+| Calcite Light       | @esri/calcite-design-tokens/css/calcite-light                                    | @esri/calcite-design-tokens/scss/calcite-light                                     |
+| Calcite Dark        | @esri/calcite-design-tokens/css/calcite-dark                                     | @esri/calcite-design-tokens/scss/calcite-dark                                      |
+| Calcite Brand Light | @esri/calcite-design-tokens/css/brand-light                                      | @esri/calcite-design-tokens/scss/brand-light                                       |
+| Calcite Brand Dark  | @esri/calcite-design-tokens/css/brand-dark                                       | @esri/calcite-design-tokens/scss/brand-dark                                        |

package/dist/css/brand-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:11 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:26 GMT
  */
 
 :root {

package/dist/css/calcite-dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:11 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:28 GMT
  */
 
 :root {

package/dist/css/calcite-headless.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:13 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:31 GMT
  */
 
 :root {
@@ -25,6 +25,7 @@
   --calcite-app-breakpoint-width-md: 1152px; /* min-width size */
   --calcite-app-breakpoint-width-sm: 768px; /* min-width size */
   --calcite-app-breakpoint-width-xs: 476px; /* min-width size */
+  --calcite-app-breakpoint-width-xxs: 320px; /* Small handheld devices and mini-windows */
   --calcite-app-spacing-none: 0px;
   --calcite-app-spacing-28: 288px;
   --calcite-app-spacing-27: 256px;

package/dist/css/calcite-light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:12 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:30 GMT
  */
 
 :root {

package/dist/scss/brand-light.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:11 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:26 GMT
  */
 
 

package/dist/scss/calcite-dark.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:11 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:28 GMT
  */
 
 

package/dist/scss/calcite-headless.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:13 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:32 GMT
  */
 
 
@@ -24,6 +24,7 @@ $breakpoint-width-lg: 1440px; // min-width size
 $breakpoint-width-md: 1152px; // min-width size
 $breakpoint-width-sm: 768px; // min-width size
 $breakpoint-width-xs: 476px; // min-width size
+$breakpoint-width-xxs: 320px; // Small handheld devices and mini-windows
 $spacing-none: 0px;
 $spacing-28: 288px;
 $spacing-27: 256px;
@@ -403,6 +404,7 @@ $breakpoint-margin: 24px;
   --calcite-app-breakpoint-width-md: 1152px; /* min-width size */
   --calcite-app-breakpoint-width-sm: 768px; /* min-width size */
   --calcite-app-breakpoint-width-xs: 476px; /* min-width size */
+  --calcite-app-breakpoint-width-xxs: 320px; /* Small handheld devices and mini-windows */
   --calcite-app-spacing-none: 0px;
   --calcite-app-spacing-28: 288px;
   --calcite-app-spacing-27: 256px;

package/dist/scss/calcite-light.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 11 May 2023 18:56:12 GMT
+ * Generated on Thu, 12 Oct 2023 18:10:30 GMT
  */
 
 

package/jest.config.json

@@ -0,0 +1,16 @@
+{
+  "preset": "ts-jest",
+  "testEnvironment": "node",
+  "extensionsToTreatAsEsm": [".ts"],
+  "moduleNameMapper": {
+    "^(\\.{1,2}/.*)\\.js$": "$1"
+  },
+  "transform": {
+    "^.+\\.tsx?$": [
+      "ts-jest",
+      {
+        "useESM": true
+      }
+    ]
+  }
+}

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "@esri/calcite-design-tokens",
-  "version": "1.0.0",
+  "version": "1.1.0-next.0",
   "description": "Esri's Calcite Design System Tokens",
-  "homepage": "https://github.com/Esri/calcite-design-tokens",
   "keywords": [
     "Calcite",
     "Calcite Design System",
     "design tokens",
     "tokens"
   ],
-  "main": "./dist/js/calcite-headless.js",
+  "main": "./dist/scss/calcite-headless.scss",
   "type": "module",
   "exports": {
-    ".": "./dist/js/calcite-headless.js",
     "./css": "./dist/css/calcite-headless.css",
     "./css/brand/dark": "./dist/css/brand-dark.css",
     "./css/brand/light": "./dist/css/brand-light.css",
@@ -24,85 +22,26 @@
     "./scss/brand/light": "./dist/scss/brand-light.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/brand/dark": "./dist/js/brand-dark.js",
-    "./js/brand/light": "./dist/js/brand-light.js",
-    "./js/calcite/dark": "./dist/js/calcite-dark.js",
-    "./js/calcite/light": "./dist/js/calcite-light.js",
-    "./js/headless": "./dist/js/calcite-headless.js"
+    "./scss/headless": "./dist/scss/calcite-headless.scss"
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/Esri/calcite-design-tokens.git"
+    "url": "git://github.com/Esri/calcite-design-system.git"
   },
   "author": {
     "name": "Esri"
   },
-  "contributors": [
-    {
-      "name": "Ali Stump",
-      "email": "astump@esri.com"
-    },
-    {
-      "name": "Erik Harper-Dicianno",
-      "email": "eharperdicianno@esri.com"
-    },
-    {
-      "name": "Bruno Aires",
-      "email": "baires@esri.com"
-    },
-    {
-      "name": "Jacques Keet",
-      "email": "jkeet@esri.com"
-    },
-    {
-      "name": "Manuela Costa",
-      "email": "mcosta@esri.com"
-    }
-  ],
-  "license": "SEE LICENSE IN README.md",
   "bugs": {
-    "url": "https://github.com/Esri/calcite-design-tokens/issues"
+    "url": "https://github.com/Esri/calcite-design-system/issues"
   },
   "scripts": {
-    "build:tokens": "node bin/run.js",
-    "build:ts": "tsc --project tsconfig.prod.json",
-    "build": "npm run build:ts && npm run build:tokens",
+    "build": "ts-node --esm support/run.ts",
     "clean": "rimraf dist",
-    "lint:eslint": "eslint --ext .ts,.tsx --fix .",
-    "lint:markdown": "markdownlint --fix --disable MD024 MD013 MD041 MD033",
-    "lint:prettier": "prettier --write .",
-    "lint:staged": "lint-staged",
-    "lint": "npm run lint:eslint && npm run lint:markdown && npm run lint:prettier",
-    "prepare": "husky install",
-    "release": "echo 'release is still TBD. Please message Ali Stump for more information.",
+    "lint:json": "prettier --write \"**/*.json\" >/dev/null",
+    "lint:md": "markdownlint \"**/*.md\" --fix --dot --ignore-path .gitignore && prettier --write \"**/*.md\" >/dev/null",
+    "lint:ts": "eslint --ext .ts,.tsx --fix . && prettier --write \"**/*.ts?(x)\" >/dev/null",
+    "lint": "concurrently npm:lint:*",
     "test": "jest"
   },
-  "devDependencies": {
-    "@tokens-studio/sd-transforms": "^0.8.2",
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "change-case": "^4.1.2",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jest": "^27.2.1",
-    "eslint-plugin-jsdoc": "^43.1.1",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-unicorn": "^46.0.0",
-    "gh-release": "^7.0.2",
-    "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "markdownlint-cli": "^0.34.0",
-    "prettier": "^2.8.8",
-    "rimraf": "^5.0.0",
-    "shell-quote": "^1.8.1",
-    "style-dictionary": "^3.7.1",
-    "token-transformer": "^0.0.27",
-    "ts-jest": "^29.0.5",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.5.0",
-    "typescript": "^5.0.2",
-    "yargs": "^17.7.2"
-  }
+  "gitHead": "8ea00eccee8ee6c40b0a1ae9992beb575247532f"
 }

package/src/$metadata.json

@@ -0,0 +1,76 @@
+{
+  "tokenSetOrder": [
+    "core",
+    "semantic",
+    "component/accordion-item",
+    "component/accordion",
+    "component/action",
+    "component/button",
+    "component/split-button",
+    "component/fab",
+    "component/checkbox",
+    "component/chip",
+    "component/dropdown",
+    "component/dropdown-item",
+    "component/action-bar",
+    "component/action-bar-grid",
+    "component/action-pad",
+    "component/action-pad-grid",
+    "component/alert",
+    "component/avatar",
+    "component/block",
+    "component/block-section",
+    "component/card",
+    "component/combobox",
+    "component/date-picker",
+    "component/color-picker",
+    "component/input-date-picker",
+    "component/input-datetime-local",
+    "component/input-email",
+    "component/input-file",
+    "component/input-month",
+    "component/input-number",
+    "component/input-password",
+    "component/input-search",
+    "component/input-telephone",
+    "component/input-message",
+    "component/input-time",
+    "component/input-text",
+    "component/input-week",
+    "component/modal",
+    "component/notice",
+    "component/textarea",
+    "component/label",
+    "component/link",
+    "component/filter",
+    "component/loader",
+    "component/radio",
+    "component/tab-title",
+    "component/tabs",
+    "component/rating",
+    "component/tip",
+    "component/tip-manager",
+    "component/tooltip",
+    "component/panel-header",
+    "component/popover",
+    "component/pagination",
+    "component/segmented-control",
+    "component/slider",
+    "component/slider-histogram",
+    "component/slider-histogram-range",
+    "component/slider-range",
+    "component/stepper",
+    "component/stepper-item",
+    "component/switch",
+    "component/[template-comp-name]",
+    "component/time-picker",
+    "component/scrim",
+    "component/tree-item",
+    "component/accordion_backup",
+    "calcite/light",
+    "calcite/dark",
+    "brand/global",
+    "brand/light",
+    "brand/dark"
+  ]
+}