@sps-woodland/tokens 7.0.0

package/README.md

@@ -0,0 +1,128 @@
+# @sps-woodland/tokens
+
+_SPS Woodland Design System design tokens_
+
+1. [What are design tokens?](#one-oh-one)
+1. [How this package works](#how-it-works)
+1. [Available Formats](#formats)
+    1. [JavaScript/TypeScript](#formats--js-ts)
+    1. [CSS](#formats--css)
+    1. [vanilla-extract](#formats--vanilla-extract)
+    1. [Sass](#formats--sass)
+
+<a name="one-oh-one"></a>
+## What are design tokens?
+
+Design tokens are the primitives of a design system. They are a record of design decisions - font sizes, spacing values, border radii, etc. - in a format that is both human and machine readable. They are the single source of truth from which consumable artifacts can be generated, such as CSS classes, palettes for design tools, or XML files for mobile app development.
+
+<a name="how-it-works"></a>
+## How this package works
+
+The token source files are located in the `src/tokens` directory. To generate consumables from them, we use a tool called [Style Dictionary](https://amzn.github.io/style-dictionary/), developed by Amazon. The Style Dictionary configuration is at the package root, `config.js`. Style Dictionary comes with a number of built-in formats that can be generated, and it's also easy to add your own. In `src/formats` you will find the custom formats we've created.
+
+Style Dictionary also has a concept of "transforms" which apply to the token values. For example, you might want to define your colors using hex in the source files, but output hsla format in the generated consumables. Each format comes with a default group of transforms. In our case, we are modifying the transform groups we're using with a custom one treat size values in the source as pixels and convert that to rem in the output. (The default is to treat size tokens' values as rem and simply append `"rem"` to them for the output.)
+
+Additionally, we have [vanilla-extract sprinkles](https://vanilla-extract.style/documentation/sprinkles-api/) where the file that defines them is not generated, but that file imports a file that is generated that contains the tokens in an object whose shape is tailored to what the sprinkle definitions need.
+
+This means that the build process follows a series of stages in a particular order:
+
+1. Run `style-dictionary build` to generate files from the token source files. Non-TypeScript outputs go into `lib` which is excluded from git, TS outputs go into `src` and are committed.
+2. Run `vite build` to build the TypeScript exports provided by `src/index.ts` into `lib`.
+3. Run `tsc` with the flag to only emit declarations to generate `.d.ts` files in `lib` for consumers that are using TypeScript.
+
+<a name="formats"></a>
+## Formats
+
+<a name="formats--js-ts"></a>
+### JavaScript/TypeScript
+
+For JS/TS code, we export a simple object of the token values, along with TypeScript typing for it.
+
+```typescript
+import { tokens } from "@sps-woodland/tokens";
+
+console.log(tokens.size.spacing.lg); // "2rem"
+```
+
+<a name="formats--css"></a>
+### CSS
+
+Two CSS files are provided: one that declares our tokens as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), and one that defines utility classes to apply them. The utility classes are defined using the custom properties, so if you want to use those, you must include both files.
+
+```typescript
+// in index.tsx or App.tsx for your application
+import "@sps-woodland/tokens/lib/css/tokens.css";
+import "@sps-woodland/tokens/lib/css/utils.css";
+```
+
+```css
+/* usage in CSS */
+.some-element {
+  color: var(--color-blue-medium);
+}
+```
+
+```jsx
+// usage in JSX
+<div className="mt-sm type-body-md">...</div>
+```
+
+#### Available utility classes
+
+* Colors, as `.COLOR-VARIANT`, e.g. `.purple-dark` or `.grey-medium-light`
+* Background colors, as `.bg-COLOR-VARIANT`, e.g. `.bg-blue-light`
+* Bootstrap-esque margin and spacing classes, as `.PREFIX-SIZE`, where `PREFIX` is either `m` for margin or `p` for padding, optionally followed by `t`/`b`/`l`/`r` for top/bottom/left/right or `x`/`y` for x (left + right)/y (top + bottom). E.g.:
+    * `.my-sm` = margin y, small (small spacing for margin-top and margin-bottom)
+    * `.p-md` = padding medium (medium spacing for padding all the way around)
+    * `.ml-xs` = margin left, extra small
+* Font weights (`.fw-normal` and `.fw-bold`)
+* Typography font size + line height combinations, e.g. `.type-body-md` for medium body type, `.type-title-lg` for large title type, etc.
+* Font sizes and line heights individually, e.g. `.fs-body-sm` for the small body font size, `.lh-title-sm` for the small title line height, etc.
+
+<a name="formats--vanilla-extract"></a>
+### vanilla-extract
+
+The tool of the future for UI styles at SPS is [vanilla-extract](https://vanilla-extract.style/), and as such we are providing our design tokens as [sprinkles](https://vanilla-extract.style/documentation/sprinkles-api/).
+
+For these to work you will need to import the CSS file that goes along with them in your index or main App component:
+
+```typescript
+import "@sps-woodland/tokens/lib/vanilla-extract/style.css";
+```
+
+Then, in your `.css.ts` files, you can import our sprinkles and use them per the sprinkles documentation linked above.
+
+```typescript
+import { style } from "@vanilla-extract/css";
+import { sprinkles, rem } from "@sps-woodland/tokens";
+
+export const fooClass = sprinkles({
+  color: "blue-medium",
+  marginTop: "md",
+});
+
+// or with additional custom styles - again, see the vanilla-extract docs
+export const barClass = style([
+  sprinkles({
+    color: "red-dark",
+    type: "title-xl",
+  }),
+  /* We also export this utility function for your custom style
+   * definitions in vanilla-extract. It will find all the pixel values
+   * within and convert them to rem. */
+  rem({
+    maxWidth: "200px",
+  }),
+]);
+```
+
+<a name="formats--sass"></a>
+### Sass
+
+The consumables for Sass are essentially the same as for CSS. There is a file of Sass variables for our tokens and a file of utility classes defined using those variables.
+
+```scss
+// in your root scss file
+@import "@sps-woodland/tokens/lib/scss/tokens";
+@import "@sps-woodland/tokens/lib/scss/utils";
+```

package/config/config.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-env node */
+/* eslint-disable import/no-import-module-exports */
+/* eslint-disable import/no-commonjs */
+const style_dictionary_1 = __importDefault(require("style-dictionary"));
+const dotenv_1 = require("dotenv");
+require("./formats/fontFace");
+require("./formats/jsSimpleObject");
+require("./formats/utilityClasses");
+require("./formats/vanillaExtractSprinkleValues");
+require("./transforms/attrFont");
+require("./transforms/attrGridColumns");
+(0, dotenv_1.config)({ path: "../../../.env" });
+function configureTransforms(sdConfig) {
+    for (const platform of Object.values(sdConfig.platforms)) {
+        platform.transforms = [
+            ...platform.transforms.filter((transform) => transform !== "size/rem"),
+            "size/pxToRem",
+            "attribute/grid-columns",
+            "attribute/font",
+        ];
+    }
+    return sdConfig;
+}
+module.exports = configureTransforms({
+    source: ["./src/tokens/**/*.json"],
+    platforms: {
+        "css-fonts": {
+            buildPath: "lib/",
+            files: [
+                {
+                    format: "font-face",
+                    destination: "font.css",
+                },
+            ],
+            transforms: style_dictionary_1.default.transformGroup.css,
+        },
+        css: {
+            buildPath: "lib/css/",
+            files: [
+                {
+                    format: "css/variables",
+                    destination: "tokens.css",
+                },
+                {
+                    format: "css/utility-classes",
+                    destination: "utils.css",
+                },
+            ],
+            transforms: style_dictionary_1.default.transformGroup.css,
+        },
+        scss: {
+            buildPath: "lib/scss/",
+            files: [
+                {
+                    format: "scss/variables",
+                    destination: "tokens.scss",
+                },
+                {
+                    format: "scss/utility-classes",
+                    destination: "utils.scss",
+                },
+            ],
+            transforms: style_dictionary_1.default.transformGroup.scss,
+        },
+        ts: {
+            files: [
+                {
+                    format: "javascript/detailed-object",
+                    destination: "src/dictionary.ts",
+                },
+                {
+                    format: "javascript/simple-object",
+                    destination: "src/tokens.ts",
+                },
+                {
+                    format: "vanilla-extract/sprinkle-values",
+                    destination: "src/vanilla-extract/sprinkleValues.ts",
+                },
+            ],
+            transforms: style_dictionary_1.default.transformGroup.js,
+        },
+    },
+});
+//# sourceMappingURL=config.js.map

package/config/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../config-src/config.ts"],"names":[],"mappings":";;;;;AAAA,qBAAqB;AACrB,oDAAoD;AACpD,uCAAuC;AACvC,wEAA+C;AAE/C,mCAAgC;AAEhC,8BAA4B;AAC5B,oCAAkC;AAClC,oCAAkC;AAClC,kDAAgD;AAEhD,iCAA+B;AAC/B,wCAAsC;AAEtC,IAAA,eAAM,EAAC,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAC;AAElC,SAAS,mBAAmB,CAAC,QAAgB;IAC3C,KAAK,MAAM,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QACxD,QAAQ,CAAC,UAAU,GAAG;YACpB,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,UAAU,CAAC;YACtE,cAAc;YACd,wBAAwB;YACxB,gBAAgB;SACjB,CAAC;KACH;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,OAAO,GAAG,mBAAmB,CAAC;IACnC,MAAM,EAAE,CAAC,wBAAwB,CAAC;IAClC,SAAS,EAAE;QACT,WAAW,EAAE;YACX,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,WAAW;oBACnB,WAAW,EAAE,UAAU;iBACxB;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,GAAG,EAAE;YACH,SAAS,EAAE,UAAU;YACrB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,eAAe;oBACvB,WAAW,EAAE,YAAY;iBAC1B;gBACD;oBACE,MAAM,EAAE,qBAAqB;oBAC7B,WAAW,EAAE,WAAW;iBACzB;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,GAAG;SAC/C;QACD,IAAI,EAAE;YACJ,SAAS,EAAE,WAAW;YACtB,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,gBAAgB;oBACxB,WAAW,EAAE,aAAa;iBAC3B;gBACD;oBACE,MAAM,EAAE,sBAAsB;oBAC9B,WAAW,EAAE,YAAY;iBAC1B;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,IAAI;SAChD;QACD,EAAE,EAAE;YACF,KAAK,EAAE;gBACL;oBACE,MAAM,EAAE,4BAA4B;oBACpC,WAAW,EAAE,mBAAmB;iBACjC;gBACD;oBACE,MAAM,EAAE,0BAA0B;oBAClC,WAAW,EAAE,eAAe;iBAC7B;gBACD;oBACE,MAAM,EAAE,iCAAiC;oBACzC,WAAW,EAAE,uCAAuC;iBACrD;aACF;YACD,UAAU,EAAE,0BAAe,CAAC,cAAc,CAAC,EAAE;SAC9C;KACF;CACF,CAAC,CAAC"}

package/config/formats/fontFace.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-env node */
+const style_dictionary_1 = __importDefault(require("style-dictionary"));
+const prettier = __importStar(require("prettier"));
+const utils_1 = require("./utils");
+// https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src
+const MAP_EXT_TO_FORMAT_NAME = {
+    woff2: "woff2",
+    woff: "woff",
+    ttf: "truetype",
+    otf: "opentype",
+    svg: "svg",
+    eot: "embedded-opentype",
+};
+function tokenIsFontAssetToken(token) {
+    return token.attributes.category === "asset" && token.attributes.type === "font";
+}
+style_dictionary_1.default.registerFormat({
+    name: "font-face",
+    formatter: ({ dictionary: { allTokens }, file }) => {
+        const fontFaceRules = allTokens
+            .filter(tokenIsFontAssetToken)
+            .map((token) => {
+            const { attributes: { family, weight, style }, formats, value: path, } = token;
+            const urls = formats.map((extension) => (0, utils_1.trim)(`
+            url("${process.env.ASSETS_BASE_PATH}/${path}.${extension}") format("${MAP_EXT_TO_FORMAT_NAME[extension]}")
+          `)).join(",");
+            return (0, utils_1.trim)(`
+          @font-face {
+            font-family: "${family}";
+            font-style: ${style};
+            font-weight: ${weight};
+            src: ${urls};
+            font-display: fallback;
+          }
+        `);
+        })
+            .join("\n");
+        return prettier.format(`
+      ${style_dictionary_1.default.formatHelpers.fileHeader({ file })}
+      ${fontFaceRules}
+      * { font-family: "Source Sans Pro", sans-serif; }
+    `, { parser: "css" });
+    },
+});
+//# sourceMappingURL=fontFace.js.map

package/config/formats/fontFace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontFace.js","sourceRoot":"","sources":["../../config-src/formats/fontFace.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAqB;AACrB,wEAA+C;AAE/C,mDAAqC;AACrC,mCAA+B;AAE/B,kEAAkE;AAClE,MAAM,sBAAsB,GAAG;IAC7B,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,UAAU;IACf,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,mBAAmB;CACzB,CAAC;AAaF,SAAS,qBAAqB,CAAC,KAAuB;IACpD,OAAO,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM,CAAC;AACnF,CAAC;AAED,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACjD,MAAM,aAAa,GAAG,SAAS;aAC5B,MAAM,CAAC,qBAAqB,CAAC;aAC7B,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YACb,MAAM,EACJ,UAAU,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EACrC,OAAO,EACP,KAAK,EAAE,IAAI,GACZ,GAAG,KAAK,CAAC;YAEV,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CACtB,CAAC,SAAS,EAAE,EAAE,CAAC,IAAA,YAAI,EAAC;mBACX,OAAO,CAAC,GAAG,CAAC,gBAAgB,IAAI,IAAI,IAAI,SAAS,cAAc,sBAAsB,CAAC,SAAS,CAAC;WACxG,CAAC,CACH,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAEZ,OAAO,IAAA,YAAI,EAAC;;4BAEQ,MAAM;0BACR,KAAK;2BACJ,MAAM;mBACd,IAAI;;;SAGd,CAAC,CAAC;QACL,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO,QAAQ,CAAC,MAAM,CAAC;QACnB,0BAAe,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC;QAClD,aAAa;;KAEhB,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACxB,CAAC;CACF,CAAC,CAAC"}

package/config/formats/jsSimpleObject.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const style_dictionary_1 = __importDefault(require("style-dictionary"));
+const prettier = __importStar(require("prettier"));
+const utils_1 = require("./utils");
+style_dictionary_1.default.registerFormat({
+    name: "javascript/simple-object",
+    formatter({ dictionary }) {
+        const tokens = (0, utils_1.simplifyTokens)(dictionary.tokens);
+        return prettier.format(`
+      /* eslint-disable */
+      /**
+       * GENERATED
+       * Do not edit directly
+       */
+      export const Tokens = Object.freeze(${JSON.stringify(tokens, null, 0)});
+    `, { parser: "typescript" });
+    },
+});
+style_dictionary_1.default.registerFormat({
+    name: "javascript/detailed-object",
+    formatter({ dictionary }) {
+        return prettier.format(`
+      /* eslint-disable */
+      /**
+       * GENERATED
+       * Do not edit directly
+       */
+      export const dictionary = Object.freeze(${JSON.stringify(dictionary, null, 0)});
+    `, { parser: "typescript" });
+    },
+});
+//# sourceMappingURL=jsSimpleObject.js.map

package/config/formats/jsSimpleObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsSimpleObject.js","sourceRoot":"","sources":["../../config-src/formats/jsSimpleObject.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wEAA+C;AAC/C,mDAAqC;AACrC,mCAAyC;AAEzC,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,0BAA0B;IAChC,SAAS,CAAC,EAAE,UAAU,EAAE;QACtB,MAAM,MAAM,GAAG,IAAA,sBAAc,EAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,QAAQ,CAAC,MAAM,CAAC;;;;;;4CAMiB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;KACtE,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC;AAEH,0BAAe,CAAC,cAAc,CAAC;IAC7B,IAAI,EAAE,4BAA4B;IAClC,SAAS,CAAC,EAAE,UAAU,EAAE;QACtB,OAAO,QAAQ,CAAC,MAAM,CAAC;;;;;;gDAMqB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;KAC9E,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC,CAAC"}

package/config/formats/utility-class-builders/color.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorClasses = void 0;
+exports.colorClasses = {
+    appliesTo: (token) => token.attributes.category === "color",
+    build(token, dictionary) {
+        const { type: tType, item: tItem } = token.attributes;
+        const hyphenate = tItem ? `-${tItem}` : "";
+        const colorName = `${tType}${hyphenate}`;
+        return `
+      .${colorName} {
+        color: ${token.variableReference} !important;
+      }
+      .bg-${colorName} {
+        background-color: ${token.variableReference} !important;
+      }
+      .border-${colorName} {
+        border-color: ${token.variableReference} !important;
+        border-style: solid;
+        border-width: ${dictionary.tokens.size.border.width.standard.variableReference};
+      }
+    `;
+    },
+};
+//# sourceMappingURL=color.js.map

package/config/formats/utility-class-builders/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/color.ts"],"names":[],"mappings":";;;AAEa,QAAA,YAAY,GAAwB;IAC/C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,OAAO;IAC3D,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;QACtD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3C,MAAM,SAAS,GAAG,GAAG,KAAK,GAAG,SAAS,EAAE,CAAC;QAEzC,OAAO;SACF,SAAS;iBACD,KAAK,CAAC,iBAAiB;;YAE5B,SAAS;4BACO,KAAK,CAAC,iBAAiB;;gBAEnC,SAAS;wBACD,KAAK,CAAC,iBAAiB;;wBAEvB,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,iBAAiB;;KAEjF,CAAC;IACJ,CAAC;CACF,CAAC"}

package/config/formats/utility-class-builders/grid.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridClasses = void 0;
+exports.gridClasses = {
+    appliesTo: (token) => token.attributes.category === "grid"
+        && token.attributes.type === "columns",
+    build(token, dictionary) {
+        /*
+         * this custom attribute is added for this token type only by the
+         * "grid/columns" custom transform defined in config.ts
+         */
+        const gridTemplateColumns = token.attributes.cssValue;
+        const gridColumnClasses = new Array(token.value)
+            .fill(null)
+            .map((_, index) => `
+        .grid-${index + 1} {
+          grid-column: span ${index + 1} !important;
+        }
+      `)
+            .join("\n");
+        return `
+      .grid-root {
+        display: grid !important;
+        grid-template-columns: ${gridTemplateColumns} !important;
+        gap: ${dictionary.tokens.size.grid.gutter.variableReference} !important;
+      }
+      ${gridColumnClasses}
+    `;
+    },
+};
+//# sourceMappingURL=grid.js.map

package/config/formats/utility-class-builders/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/grid.ts"],"names":[],"mappings":";;;AAEa,QAAA,WAAW,GAAwB;IAC9C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,SAAS;IACxC,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB;;;WAGG;QACH,MAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC;QACtD,MAAM,iBAAiB,GAAG,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;aAC7C,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC;gBACT,KAAK,GAAG,CAAC;8BACK,KAAK,GAAG,CAAC;;OAEhC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,OAAO;;;iCAGsB,mBAAmB;eACrC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB;;QAE3D,iBAAiB;KACpB,CAAC;IACJ,CAAC;CACF,CAAC"}

package/config/formats/utility-class-builders/icon.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconClasses = void 0;
+const utils_1 = require("../utils");
+exports.iconClasses = {
+    appliesTo: (token) => token.attributes.category === "icon"
+        && token.attributes.item === "character",
+    build(token, dictionary) {
+        const className = `.icon-${token.attributes.type}`;
+        let colorRule = "";
+        const colorToken = dictionary.tokens.icon[token.attributes.type].color;
+        if (colorToken) {
+            colorRule = (0, utils_1.trim)(`
+        ${className} {
+          color: ${colorToken.variableReference} !important;
+        }
+      `);
+        }
+        return (0, utils_1.trim)(`${colorRule}
+      ${className}::before {
+        content: ${token.variableReference} !important;
+      }
+    `);
+    },
+};
+//# sourceMappingURL=icon.js.map

package/config/formats/utility-class-builders/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/icon.ts"],"names":[],"mappings":";;;AAAA,oCAAgC;AAGnB,QAAA,WAAW,GAAwB;IAC9C,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,WAAW;IAC1C,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB,MAAM,SAAS,GAAG,SAAS,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QAEnD,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QACvE,IAAI,UAAU,EAAE;YACd,SAAS,GAAG,IAAA,YAAI,EAAC;UACb,SAAS;mBACA,UAAU,CAAC,iBAAiB;;OAExC,CAAC,CAAC;SACJ;QAED,OAAO,IAAA,YAAI,EAAC,GAAG,SAAS;QACpB,SAAS;mBACE,KAAK,CAAC,iBAAiB;;KAErC,CAAC,CAAC;IACL,CAAC;CACF,CAAC"}

package/config/formats/utility-class-builders/iconSize.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconSizeClasses = void 0;
+exports.iconSizeClasses = {
+    appliesTo: (token) => token.attributes.category === "size"
+        && token.attributes.type === "icon",
+    build(token) {
+        return `
+      .icon_size-${token.attributes.item} {
+        font-size: ${token.variableReference} !important;
+      }
+    `;
+    },
+};
+//# sourceMappingURL=iconSize.js.map

package/config/formats/utility-class-builders/iconSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconSize.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/iconSize.ts"],"names":[],"mappings":";;;AAEa,QAAA,eAAe,GAAwB;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM;IACrC,KAAK,CAAC,KAAK;QACT,OAAO;mBACQ,KAAK,CAAC,UAAU,CAAC,IAAI;qBACnB,KAAK,CAAC,iBAAiB;;KAEvC,CAAC;IACJ,CAAC;CACF,CAAC"}

package/config/formats/utility-class-builders/spacing.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spacingClasses = void 0;
+const utils_1 = require("../utils");
+function buildClasses(item, value) {
+    return ["margin", "padding"].map((prop) => {
+        const p = prop.charAt(0);
+        return (0, utils_1.trim)(`
+      .${p}-${item} {
+        ${prop}: ${value} !important;
+      }
+      .${p}x-${item} {
+        ${prop}-left: ${value} !important;
+        ${prop}-right: ${value} !important;
+      }
+      .${p}y-${item} {
+        ${prop}-top: ${value} !important;
+        ${prop}-bottom: ${value} !important;
+      }
+      .${p}t-${item} {
+        ${prop}-top: ${value} !important;
+      }
+      .${p}r-${item} {
+        ${prop}-right: ${value} !important;
+      }
+      .${p}b-${item} {
+        ${prop}-bottom: ${value} !important;
+      }
+      .${p}l-${item} {
+        ${prop}-left: ${value} !important;
+      }
+    `);
+    }).join("\n");
+}
+exports.spacingClasses = {
+    appliesTo: (token) => token.attributes.category === "size"
+        && token.attributes.type === "spacing",
+    build(token) {
+        return buildClasses(token.attributes.item, token.variableReference);
+    },
+    staticClasses: [["none", "0"], ["auto", "auto"]]
+        .map(([item, value]) => buildClasses(item, value)).join("\n"),
+};
+//# sourceMappingURL=spacing.js.map

package/config/formats/utility-class-builders/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/spacing.ts"],"names":[],"mappings":";;;AAAA,oCAAgC;AAGhC,SAAS,YAAY,CAAC,IAAY,EAAE,KAAa;IAC/C,OAAO,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACxC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACzB,OAAO,IAAA,YAAI,EAAC;SACP,CAAC,IAAI,IAAI;UACR,IAAI,KAAK,KAAK;;SAEf,CAAC,KAAK,IAAI;UACT,IAAI,UAAU,KAAK;UACnB,IAAI,WAAW,KAAK;;SAErB,CAAC,KAAK,IAAI;UACT,IAAI,SAAS,KAAK;UAClB,IAAI,YAAY,KAAK;;SAEtB,CAAC,KAAK,IAAI;UACT,IAAI,SAAS,KAAK;;SAEnB,CAAC,KAAK,IAAI;UACT,IAAI,WAAW,KAAK;;SAErB,CAAC,KAAK,IAAI;UACT,IAAI,YAAY,KAAK;;SAEtB,CAAC,KAAK,IAAI;UACT,IAAI,UAAU,KAAK;;KAExB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAEY,QAAA,cAAc,GAAwB;IACjD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,SAAS;IACxC,KAAK,CAAC,KAAK;QACT,OAAO,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACtE,CAAC;IAED,aAAa,EAAE,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;SAC7C,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;CAChE,CAAC"}

package/config/formats/utility-class-builders/typeSize.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typeSizeClasses = void 0;
+exports.typeSizeClasses = {
+    appliesTo: (token) => token.attributes.category === "size"
+        && token.attributes.type === "type",
+    build(token, dictionary) {
+        const [prefix, prop] = {
+            font: ["fs", "font-size"],
+            line: ["lh", "line-height"],
+        }[token.attributes.subitem];
+        let composite = "";
+        if (token.attributes.subitem === "font") {
+            const lhToken = dictionary.tokens.size.type[token.attributes.item].line;
+            composite = `
+        .type-${token.attributes.item} {
+          font-size: ${token.variableReference} !important;
+          line-height: ${lhToken.variableReference} !important;
+        }
+      `;
+        }
+        return `
+      .${prefix}-${token.attributes.item} {
+        ${prop}: ${token.variableReference} !important;
+      }
+      ${composite}
+    `;
+    },
+};
+//# sourceMappingURL=typeSize.js.map

package/config/formats/utility-class-builders/typeSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeSize.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/typeSize.ts"],"names":[],"mappings":";;;AAEa,QAAA,eAAe,GAAwB;IAClD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,MAAM;IACrC,KAAK,CAAC,KAAK,EAAE,UAAU;QACrB,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG;YACrB,IAAI,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC;YACzB,IAAI,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC;SAC5B,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAE5B,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,KAAK,MAAM,EAAE;YACvC,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YACxE,SAAS,GAAG;gBACF,KAAK,CAAC,UAAU,CAAC,IAAI;uBACd,KAAK,CAAC,iBAAiB;yBACrB,OAAO,CAAC,iBAAiB;;OAE3C,CAAC;SACH;QAED,OAAO;SACF,MAAM,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI;UAC9B,IAAI,KAAK,KAAK,CAAC,iBAAiB;;QAElC,SAAS;KACZ,CAAC;IACJ,CAAC;CACF,CAAC"}

package/config/formats/utility-class-builders/typeWeight.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typeWeightClasses = void 0;
+exports.typeWeightClasses = {
+    appliesTo: (token) => token.attributes.category === "type"
+        && token.attributes.type === "weight",
+    build(token) {
+        return `
+      .fw-${token.attributes.item} {
+        font-weight: ${token.variableReference} !important;
+      }
+    `;
+    },
+};
+//# sourceMappingURL=typeWeight.js.map

package/config/formats/utility-class-builders/typeWeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeWeight.js","sourceRoot":"","sources":["../../../config-src/formats/utility-class-builders/typeWeight.ts"],"names":[],"mappings":";;;AAEa,QAAA,iBAAiB,GAAwB;IACpD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,KAAK,MAAM;WACrD,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,QAAQ;IACvC,KAAK,CAAC,KAAK;QACT,OAAO;YACC,KAAK,CAAC,UAAU,CAAC,IAAI;uBACV,KAAK,CAAC,iBAAiB;;KAEzC,CAAC;IACJ,CAAC;CACF,CAAC"}