@pantoken/stylus 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -0
- package/dist/index.d.mts +49 -0
- package/dist/index.mjs +67 -0
- package/generated/tokens.styl +2812 -0
- package/package.json +41 -0
package/README.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# @pantoken/stylus
|
|
2
|
+
|
|
3
|
+
Instructure design tokens as Stylus variables, resolved to concrete single-mode values from the
|
|
4
|
+
pantoken IR — a self-contained Stylus token file (`instui-color-brand = #0374b5`). Icon tokens are
|
|
5
|
+
skipped; they belong in CSS.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm i @pantoken/stylus
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Also available as `pantoken/stylus`.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { toStylus, stylus } from "@pantoken/stylus";
|
|
19
|
+
import { tokens } from "@pantoken/tokens";
|
|
20
|
+
|
|
21
|
+
stylus; // the ready-made rebrand variables
|
|
22
|
+
toStylus(tokens, { mode: "dark" }); // convert any IR, picking the colour mode
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or `@import` the static file straight into a Stylus build:
|
|
26
|
+
|
|
27
|
+
```stylus
|
|
28
|
+
@import "@pantoken/stylus/tokens.styl"
|
|
29
|
+
|
|
30
|
+
.button
|
|
31
|
+
background instui-color-brand
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Values are resolved once, in a single colour mode (`light` by default). References (`var(...)`) and
|
|
35
|
+
`light-dark(...)` are flattened to concrete values, so the output stands alone. For runtime theming,
|
|
36
|
+
use `@pantoken/css` instead.
|
|
37
|
+
|
|
38
|
+
## API
|
|
39
|
+
|
|
40
|
+
- **`stylus: string`** — the ready-made `rebrand` variable set (also the default export).
|
|
41
|
+
- **`toStylus(tokens, options?): string`** — emit Stylus variables for any token IR. `options.mode`
|
|
42
|
+
picks the colour mode (default `"light"`).
|
|
43
|
+
- **`ToStylusOptions`** — options for `toStylus`.
|
|
44
|
+
- **`Mode`** — the colour mode to resolve (`"light"` or `"dark"`).
|
|
45
|
+
- **`./tokens.styl`** — the generated plain Stylus file, for a direct `@import`.
|
|
46
|
+
|
|
47
|
+
## Related
|
|
48
|
+
|
|
49
|
+
- Built from the IR published by `@pantoken/tokens`.
|
|
50
|
+
- `@pantoken/scss` and `@pantoken/less` emit the same tokens for other preprocessors.
|
|
51
|
+
|
|
52
|
+
## License
|
|
53
|
+
|
|
54
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { Mode, Mode as Mode$1 } from "@pantoken/utils";
|
|
2
|
+
import { Token } from "@pantoken/model";
|
|
3
|
+
|
|
4
|
+
//#region src/to-stylus.d.ts
|
|
5
|
+
/** Options for {@link toStylus}. */
|
|
6
|
+
interface ToStylusOptions {
|
|
7
|
+
/** Which colour mode to resolve (default `"light"`). */
|
|
8
|
+
mode?: Mode$1;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Emit Stylus variables for a token IR.
|
|
12
|
+
*
|
|
13
|
+
* @param tokens - The IR (e.g. from `@pantoken/tokens`).
|
|
14
|
+
* @param options - {@link ToStylusOptions}.
|
|
15
|
+
* @returns The Stylus source string.
|
|
16
|
+
*
|
|
17
|
+
* @example Emit the default (light) variables
|
|
18
|
+
* ```ts
|
|
19
|
+
* import { toStylus } from "@pantoken/stylus";
|
|
20
|
+
* import { tokens } from "@pantoken/tokens";
|
|
21
|
+
*
|
|
22
|
+
* toStylus(tokens); // "instui-color-brand = #0374b5\n…"
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @example Resolve the dark mode of another theme
|
|
26
|
+
* ```ts
|
|
27
|
+
* import { toStylus } from "@pantoken/stylus";
|
|
28
|
+
* import { byTheme } from "@pantoken/tokens";
|
|
29
|
+
*
|
|
30
|
+
* toStylus(byTheme("canvas"), { mode: "dark" });
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
declare function toStylus(tokens: readonly Token[], options?: ToStylusOptions): string;
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region src/index.d.ts
|
|
36
|
+
/**
|
|
37
|
+
* The ready-made `rebrand` Stylus variable set.
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* ```ts
|
|
41
|
+
* import { stylus } from "@pantoken/stylus";
|
|
42
|
+
* import { writeFileSync } from "node:fs";
|
|
43
|
+
*
|
|
44
|
+
* writeFileSync("tokens.styl", stylus);
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
declare const stylus: string;
|
|
48
|
+
//#endregion
|
|
49
|
+
export { type Mode, type ToStylusOptions, stylus as default, stylus, toStylus };
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { tokens } from "@pantoken/tokens";
|
|
2
|
+
import { resolveTokens } from "@pantoken/utils";
|
|
3
|
+
//#region src/to-stylus.ts
|
|
4
|
+
/**
|
|
5
|
+
* Emit the pantoken IR as Stylus variables. Values are resolved to concrete, single-mode values so
|
|
6
|
+
* the output is a self-contained Stylus token file (`instui-color-brand = #0374b5`). Icon tokens are
|
|
7
|
+
* skipped — they belong in CSS, not Stylus variables.
|
|
8
|
+
*
|
|
9
|
+
* @module
|
|
10
|
+
*/
|
|
11
|
+
/**
|
|
12
|
+
* Emit Stylus variables for a token IR.
|
|
13
|
+
*
|
|
14
|
+
* @param tokens - The IR (e.g. from `@pantoken/tokens`).
|
|
15
|
+
* @param options - {@link ToStylusOptions}.
|
|
16
|
+
* @returns The Stylus source string.
|
|
17
|
+
*
|
|
18
|
+
* @example Emit the default (light) variables
|
|
19
|
+
* ```ts
|
|
20
|
+
* import { toStylus } from "@pantoken/stylus";
|
|
21
|
+
* import { tokens } from "@pantoken/tokens";
|
|
22
|
+
*
|
|
23
|
+
* toStylus(tokens); // "instui-color-brand = #0374b5\n…"
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @example Resolve the dark mode of another theme
|
|
27
|
+
* ```ts
|
|
28
|
+
* import { toStylus } from "@pantoken/stylus";
|
|
29
|
+
* import { byTheme } from "@pantoken/tokens";
|
|
30
|
+
*
|
|
31
|
+
* toStylus(byTheme("canvas"), { mode: "dark" });
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
function toStylus(tokens, options = {}) {
|
|
35
|
+
const resolved = resolveTokens(tokens, { mode: options.mode ?? "light" });
|
|
36
|
+
const lines = ["// DO NOT EDIT — generated by @pantoken/stylus", ""];
|
|
37
|
+
for (const token of tokens) {
|
|
38
|
+
if (token.meta?.kind === "icon") continue;
|
|
39
|
+
lines.push(`${token.name.replace(/^--/, "")} = ${resolved.get(token.name) ?? token.value}`);
|
|
40
|
+
}
|
|
41
|
+
return `${lines.join("\n")}\n`;
|
|
42
|
+
}
|
|
43
|
+
//#endregion
|
|
44
|
+
//#region src/index.ts
|
|
45
|
+
/**
|
|
46
|
+
* `@pantoken/stylus` — Instructure design tokens as Stylus variables.
|
|
47
|
+
*
|
|
48
|
+
* {@link toStylus} converts any IR; {@link stylus} is the ready-made `rebrand` variable set. A static
|
|
49
|
+
* file is published at `@pantoken/stylus/tokens.styl`.
|
|
50
|
+
*
|
|
51
|
+
* @module
|
|
52
|
+
* @experimental
|
|
53
|
+
*/
|
|
54
|
+
/**
|
|
55
|
+
* The ready-made `rebrand` Stylus variable set.
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```ts
|
|
59
|
+
* import { stylus } from "@pantoken/stylus";
|
|
60
|
+
* import { writeFileSync } from "node:fs";
|
|
61
|
+
*
|
|
62
|
+
* writeFileSync("tokens.styl", stylus);
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
const stylus = toStylus(tokens);
|
|
66
|
+
//#endregion
|
|
67
|
+
export { stylus as default, stylus, toStylus };
|