@pantoken/scss 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# @pantoken/scss
+
+Instructure design tokens as SCSS variables, resolved to concrete single-mode values from the
+pantoken IR — a self-contained SCSS token file (`$instui-color-brand: #0374b5;`). Icon tokens are
+skipped; they belong in CSS.
+
+## Install
+
+```sh
+npm i @pantoken/scss
+```
+
+Also available as `pantoken/scss`.
+
+## Usage
+
+```ts
+import { toScss, scss } from "@pantoken/scss";
+import { byTheme } from "@pantoken/tokens";
+
+scss; // the ready-made rebrand variables
+toScss(byTheme("canvas"), { mode: "dark" }); // convert any IR, picking the colour mode
+```
+
+Or `@use` the static file directly:
+
+```scss
+@use "@pantoken/scss/tokens.scss";
+```
+
+`light-dark()` tokens collapse to the chosen `mode` (default `light`), since SCSS variables are
+compile-time single values. For runtime theming, use `@pantoken/css` instead.
+
+## API
+
+- **`scss: string`** — the ready-made `rebrand` variable set (also the default export).
+- **`toScss(tokens, options?): string`** — emit SCSS variables for any token IR. `options.mode`
+  picks the colour mode (default `"light"`).
+- **`ToScssOptions`** — options for `toScss`.
+- **`Mode`** — the colour mode to resolve (`"light"` or `"dark"`).
+- **`./tokens.scss`** — the generated plain SCSS file, for a direct `@use` or `@import`.
+
+## Related
+
+- Built from the IR published by `@pantoken/tokens`.
+- `@pantoken/less` and `@pantoken/stylus` emit the same tokens for other preprocessors.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import { Mode, Mode as Mode$1 } from "@pantoken/utils";
+import { Token } from "@pantoken/model";
+
+//#region src/to-scss.d.ts
+/** Options for {@link toScss}. */
+interface ToScssOptions {
+  /** Which colour mode to resolve (default `"light"`). */
+  mode?: Mode$1;
+}
+/**
+ * Emit SCSS variables for a token IR.
+ *
+ * @param tokens - The IR (e.g. from `@pantoken/tokens`).
+ * @param options - {@link ToScssOptions}.
+ * @returns The SCSS source string.
+ *
+ * @example Emit the default (light) variables
+ * ```ts
+ * import { toScss } from "@pantoken/scss";
+ * import { tokens } from "@pantoken/tokens";
+ *
+ * toScss(tokens); // "$instui-color-brand: #0374b5;\n…"
+ * ```
+ *
+ * @example Resolve the dark mode of another theme
+ * ```ts
+ * import { toScss } from "@pantoken/scss";
+ * import { byTheme } from "@pantoken/tokens";
+ *
+ * toScss(byTheme("canvas"), { mode: "dark" });
+ * ```
+ */
+declare function toScss(tokens: readonly Token[], options?: ToScssOptions): string;
+//#endregion
+//#region src/index.d.ts
+/**
+ * The ready-made `rebrand` SCSS variable set.
+ *
+ * @example
+ * ```ts
+ * import { scss } from "@pantoken/scss";
+ * import { writeFileSync } from "node:fs";
+ *
+ * writeFileSync("tokens.scss", scss);
+ * ```
+ */
+declare const scss: string;
+//#endregion
+export { type Mode, type ToScssOptions, scss as default, scss, toScss };

package/dist/index.mjs

@@ -0,0 +1,67 @@
+import { tokens } from "@pantoken/tokens";
+import { resolveTokens } from "@pantoken/utils";
+//#region src/to-scss.ts
+/**
+* Emit the pantoken IR as SCSS variables. Values are resolved to concrete, single-mode values so
+* the output is a self-contained SCSS token file (`$instui-color-brand: #0374b5;`). Icon tokens are
+* skipped — they belong in CSS, not SCSS variables.
+*
+* @module
+*/
+/**
+* Emit SCSS variables for a token IR.
+*
+* @param tokens - The IR (e.g. from `@pantoken/tokens`).
+* @param options - {@link ToScssOptions}.
+* @returns The SCSS source string.
+*
+* @example Emit the default (light) variables
+* ```ts
+* import { toScss } from "@pantoken/scss";
+* import { tokens } from "@pantoken/tokens";
+*
+* toScss(tokens); // "$instui-color-brand: #0374b5;\n…"
+* ```
+*
+* @example Resolve the dark mode of another theme
+* ```ts
+* import { toScss } from "@pantoken/scss";
+* import { byTheme } from "@pantoken/tokens";
+*
+* toScss(byTheme("canvas"), { mode: "dark" });
+* ```
+*/
+function toScss(tokens, options = {}) {
+	const resolved = resolveTokens(tokens, { mode: options.mode ?? "light" });
+	const lines = ["// DO NOT EDIT — generated by @pantoken/scss", ""];
+	for (const token of tokens) {
+		if (token.meta?.kind === "icon") continue;
+		lines.push(`$${token.name.replace(/^--/, "")}: ${resolved.get(token.name) ?? token.value};`);
+	}
+	return `${lines.join("\n")}\n`;
+}
+//#endregion
+//#region src/index.ts
+/**
+* `@pantoken/scss` — Instructure design tokens as SCSS variables.
+*
+* {@link toScss} converts any IR; {@link scss} is the ready-made `rebrand` variable set. A static
+* file is published at `@pantoken/scss/tokens.scss`.
+*
+* @module
+* @experimental
+*/
+/**
+* The ready-made `rebrand` SCSS variable set.
+*
+* @example
+* ```ts
+* import { scss } from "@pantoken/scss";
+* import { writeFileSync } from "node:fs";
+*
+* writeFileSync("tokens.scss", scss);
+* ```
+*/
+const scss = toScss(tokens);
+//#endregion
+export { scss as default, scss, toScss };