@esri/calcite-design-tokens 1.1.0-next.2 → 1.1.0-next.3

package/dist/scss/calcite-dark.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 24 Oct 2023 20:37:30 GMT
+ * Generated on Tue, 24 Oct 2023 21:31:41 GMT
  */
 
 

package/dist/scss/calcite-headless.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 24 Oct 2023 20:37:34 GMT
+ * Generated on Tue, 24 Oct 2023 21:31:48 GMT
  */
 
 
@@ -20,11 +20,29 @@ $breakpoint-cols-sm: 12; // columns
 $breakpoint-cols-xs: 6; // columns
 $breakpoint-content-fixed: 1440px; // only for lg breakpoint fixed grid width
 $breakpoint-content-fluid: 100%; // for fluid grid widths
-$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
+$breakpoint-width-lg-min: 1153px; // Large laptops and desktop computers
+$breakpoint-width-lg-max: 1722px; // Large laptops and desktop computers
+$breakpoint-width-md-min: 769px; // Small laptops
+$breakpoint-width-md-max: 1152px; // Small laptops
+$breakpoint-width-sm-min: 477px; // Small tablets
+$breakpoint-width-sm-max: 768px; // Small tablets
+$breakpoint-width-xs-min: 321px; // Handheld devices
+$breakpoint-width-xs-max: 476px; // Handheld devices
+$breakpoint-width-xxs-max: 320px; // Small handheld devices and mini-windows
+$breakpoint-width-lg: 1440px; // To be deprecated
+$breakpoint-width-md: 1152px; // To be deprecated
+$breakpoint-width-sm: 768px; // To be deprecated
+$breakpoint-width-xs: 476px; // To be deprecated
+$breakpoint-width-xxs: 320px; // To be deprecated
+$breakpoint-height-lg-min: 679px; // Large laptops and desktop computers
+$breakpoint-height-lg-max: 853px; // Large laptops and desktop computers
+$breakpoint-height-md-min: 504px; // Small laptops
+$breakpoint-height-md-max: 678px; // Small laptops
+$breakpoint-height-sm-min: 329px; // Small tablets
+$breakpoint-height-sm-max: 503px; // Small tablets
+$breakpoint-height-xs-min: 154px; // Handheld devices
+$breakpoint-height-xs-max: 328px; // Handheld devices
+$breakpoint-height-xxs-max: 153px; // Small handheld devices and mini-windows
 $spacing-none: 0px;
 $spacing-28: 288px;
 $spacing-27: 256px;
@@ -400,11 +418,29 @@ $breakpoint-margin: 24px;
   --calcite-app-breakpoint-cols-xs: 6; /* columns */
   --calcite-app-breakpoint-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
   --calcite-app-breakpoint-content-fluid: 100%; /* for fluid grid widths */
-  --calcite-app-breakpoint-width-lg: 1440px; /* min-width size */
-  --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-breakpoint-width-lg-min: 1153px; /* Large laptops and desktop computers */
+  --calcite-app-breakpoint-width-lg-max: 1722px; /* Large laptops and desktop computers */
+  --calcite-app-breakpoint-width-md-min: 769px; /* Small laptops */
+  --calcite-app-breakpoint-width-md-max: 1152px; /* Small laptops */
+  --calcite-app-breakpoint-width-sm-min: 477px; /* Small tablets */
+  --calcite-app-breakpoint-width-sm-max: 768px; /* Small tablets */
+  --calcite-app-breakpoint-width-xs-min: 321px; /* Handheld devices */
+  --calcite-app-breakpoint-width-xs-max: 476px; /* Handheld devices */
+  --calcite-app-breakpoint-width-xxs-max: 320px; /* Small handheld devices and mini-windows */
+  --calcite-app-breakpoint-width-lg: 1440px; /* To be deprecated */
+  --calcite-app-breakpoint-width-md: 1152px; /* To be deprecated */
+  --calcite-app-breakpoint-width-sm: 768px; /* To be deprecated */
+  --calcite-app-breakpoint-width-xs: 476px; /* To be deprecated */
+  --calcite-app-breakpoint-width-xxs: 320px; /* To be deprecated */
+  --calcite-app-breakpoint-height-lg-min: 679px; /* Large laptops and desktop computers */
+  --calcite-app-breakpoint-height-lg-max: 853px; /* Large laptops and desktop computers */
+  --calcite-app-breakpoint-height-md-min: 504px; /* Small laptops */
+  --calcite-app-breakpoint-height-md-max: 678px; /* Small laptops */
+  --calcite-app-breakpoint-height-sm-min: 329px; /* Small tablets */
+  --calcite-app-breakpoint-height-sm-max: 503px; /* Small tablets */
+  --calcite-app-breakpoint-height-xs-min: 154px; /* Handheld devices */
+  --calcite-app-breakpoint-height-xs-max: 328px; /* Handheld devices */
+  --calcite-app-breakpoint-height-xxs-max: 153px; /* 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 Tue, 24 Oct 2023 20:37:32 GMT
+ * Generated on Tue, 24 Oct 2023 21:31:45 GMT
  */
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-design-tokens",
-  "version": "1.1.0-next.2",
+  "version": "1.1.0-next.3",
   "description": "Esri's Calcite Design System Tokens",
   "keywords": [
     "Calcite",
@@ -12,17 +12,21 @@
   "type": "module",
   "exports": {
     "./css": "./dist/css/calcite-headless.css",
-    "./css/brand/dark": "./dist/css/brand-dark.css",
-    "./css/brand/light": "./dist/css/brand-light.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/brand/dark": "./dist/scss/brand-dark.scss",
-    "./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"
+    "./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"
   },
   "repository": {
     "type": "git",
@@ -43,5 +47,5 @@
     "lint": "concurrently npm:lint:*",
     "test": "jest"
   },
-  "gitHead": "6a31ea78baa3d2820a8406d7287083b53076cd46"
+  "gitHead": "55c379646780acabacf2b92fe293f766aa7c3d36"
 }

package/src/core.json

@@ -1527,31 +1527,155 @@
       }
     },
     "breakpoint": {
+      "height": {
+        "xxs": {
+          "min": {
+            "value": 0,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          },
+          "max": {
+            "value": 153,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          }
+        },
+        "xs": {
+          "max": {
+            "value": 328,
+            "type": "sizing",
+            "description": "Handheld devices"
+          },
+          "min": {
+            "value": 154,
+            "type": "sizing",
+            "description": "Handheld devices"
+          }
+        },
+        "sm": {
+          "max": {
+            "value": 503,
+            "type": "sizing",
+            "description": "Small tablets"
+          },
+          "min": {
+            "value": 329,
+            "type": "sizing",
+            "description": "Small tablets"
+          }
+        },
+        "md": {
+          "max": {
+            "value": 678,
+            "type": "sizing",
+            "description": "Small laptops"
+          },
+          "min": {
+            "value": 504,
+            "type": "sizing",
+            "description": "Small laptops"
+          }
+        },
+        "lg": {
+          "max": {
+            "value": 853,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          },
+          "min": {
+            "value": 679,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          }
+        }
+      },
       "width": {
+        "default": {
+          "xxs": {
+            "value": "320px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "xs": {
+            "value": "476px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "sm": {
+            "value": "768px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "md": {
+            "value": "1152px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          },
+          "lg": {
+            "value": "1440px",
+            "type": "sizing",
+            "description": "To be deprecated"
+          }
+        },
         "xxs": {
-          "value": "320px",
-          "type": "sizing",
-          "description": "Small handheld devices and mini-windows"
+          "max": {
+            "value": 320,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          },
+          "min": {
+            "value": 0,
+            "type": "sizing",
+            "description": "Small handheld devices and mini-windows"
+          }
         },
         "xs": {
-          "value": "476px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 476,
+            "type": "sizing",
+            "description": "Handheld devices"
+          },
+          "min": {
+            "value": 321,
+            "type": "sizing",
+            "description": "Handheld devices"
+          }
         },
         "sm": {
-          "value": "768px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 768,
+            "type": "sizing",
+            "description": "Small tablets"
+          },
+          "min": {
+            "value": 477,
+            "type": "sizing",
+            "description": "Small tablets"
+          }
         },
         "md": {
-          "value": "1152px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 1152,
+            "type": "sizing",
+            "description": "Small laptops"
+          },
+          "min": {
+            "value": 769,
+            "type": "sizing",
+            "description": "Small laptops"
+          }
         },
         "lg": {
-          "value": "1440px",
-          "type": "sizing",
-          "description": "min-width size"
+          "max": {
+            "value": 1722,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          },
+          "min": {
+            "value": 1153,
+            "type": "sizing",
+            "description": "Large laptops and desktop computers"
+          }
         }
       },
       "margin": {

package/support/token-transformer/format/javascript.ts

@@ -0,0 +1,22 @@
+import StyleDictionary, { Dictionary, File } from "style-dictionary";
+import { default as JsonToTS } from "json-to-ts";
+
+type FormatOptions = { dictionary: Dictionary; file: File };
+
+export function formatJs({ dictionary, file }: FormatOptions): string {
+  return (
+    StyleDictionary.formatHelpers.fileHeader({ file }) +
+    "export default" +
+    JSON.stringify(dictionary.tokens, null, 2) +
+    ";\n"
+  );
+}
+
+export function formatTs({ dictionary, file }: FormatOptions): string {
+  return (
+    StyleDictionary.formatHelpers.fileHeader({ file }) +
+    "declare const root: RootObject\n" +
+    "export default root\n" +
+    JsonToTS(dictionary.properties).join("\n")
+  );
+}

package/support/token-transformer/sd-run.ts

@@ -8,6 +8,7 @@ import { nameCamelCase } from "./transform/nameCamelCase.js";
 import { nameKebabCase } from "./transform/nameKebabCase.js";
 import { parseName } from "./utils/parseName.js";
 import { Theme } from "./getThemes.js";
+import { formatJs, formatTs } from "./format/javascript.js";
 
 /**
  * Style Dictionary runner configuration overrides.
@@ -49,6 +50,16 @@ export const run = async (
     formatter: formatSCSS,
   });
 
+  StyleDictionary.registerFormat({
+    name: "calcite/js-module",
+    formatter: formatJs,
+  });
+
+  StyleDictionary.registerFormat({
+    name: "calcite/ts-module",
+    formatter: formatTs,
+  });
+
   // Registering Style Dictionary transformers https://amzn.github.io/style-dictionary/#/transforms?id=defining-custom-transforms
   StyleDictionary.registerTransform({
     name: "name/calcite/camel",
@@ -73,6 +84,39 @@ export const run = async (
     source,
     include,
     platforms: {
+      js: {
+        buildPath: `${buildPath}/js/`,
+        files: [
+          {
+            destination: `${fileName}.js`,
+            format: "calcite/js-module",
+            filter: "filterSource",
+          },
+          {
+            destination: `${fileName}.d.ts`,
+            format: "calcite/ts-module",
+            filter: "filterSource",
+          },
+        ],
+      },
+      es6: {
+        transformGroup: "js",
+        buildPath: `${buildPath}/es6/`,
+        files: [
+          {
+            format: "javascript/es6",
+            destination: `${fileName}.js`,
+            filter: "filterSource",
+            options: { ...options, outputReferences: true },
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: `${fileName}.d.ts`,
+            filter: "filterSource",
+            options: { ...options, outputReferences: true },
+          },
+        ],
+      },
       css: {
         prefix: "calcite",
         transforms: [

package/dist/scss/brand-light.scss

@@ -1,13 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Tue, 24 Oct 2023 20:37:28 GMT
- */
-
-
-$core-font-font-size-6-light: 26px;
-$breakpoint-width-lg-light: 1440px;
-
-@mixin calcite-theme-light() {
-  --calcite-app-font-size-6: 26px;
-  --calcite-breakpoint-width-lg: 1440px;
-}