@buildcanada/colours 0.1.0

package/README.md

@@ -0,0 +1,64 @@
+# colour-tokens
+
+Canadian colour tokens for design systems. This package provides a curated collection of colour definitions in both CSS and TypeScript formats, designed for use in Canadian government and enterprise applications.
+
+## About
+
+This package contains colour tokens organized into:
+
+- **Colours**: Individual colour scales with 50-950 shades (e.g., auburn, lake, pine, steel)
+- **Themes**: Chart-ready colour blends for data visualization
+
+All tokens are generated from CSS variables and compiled to TypeScript with full type definitions.
+
+## Usage
+
+### CSS Imports
+
+Import colour tokens directly in your CSS:
+
+```css
+@import "colour-tokens/styles/colours/lake.css";
+@import "colour-tokens/styles/themes/charts/twelve-tone/auburn-cool-bend.css";
+
+/* Or import all colours */
+@import "colour-tokens/styles/main.css";
+```
+
+### TypeScript Imports
+
+Import colour tokens in your TypeScript/JavaScript code:
+
+```typescript
+// Import individual colours
+import { auburn, lake, pine } from "colour-tokens";
+
+// Access colour scales
+console.log(auburn["500"]); // "#d85b5b"
+
+// Import chart themes
+import { auburn_cool_bend, pine_lake_blend } from "colour-tokens/styles/themes/charts/twelve-tone";
+
+// Import everything from styles
+import * as styles from "colour-tokens/styles";
+```
+
+## Downloading
+
+```bash
+npm install colour-tokens
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Add or modify colour definitions in `src/styles/`
+4. Run the build script (`bun run build`) to generate TypeScript files and barrel exports
+5. Commit your changes (`git commit -m 'Add some amazing feature'`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request
+
+## License
+
+MIT

package/dist/build.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=build.d.ts.map

package/dist/build.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../src/build.ts"],"names":[],"mappings":""}

package/dist/build.js

@@ -0,0 +1,27 @@
+import { cssToTs } from "./lib/cssToTs";
+import { barrelExporting } from "./lib/barrelExporting";
+import { mkdir, cp } from "node:fs/promises";
+import { spawn } from "node:child_process";
+const build = async () => {
+    console.log("Converting CSS to TS...");
+    await cssToTs();
+    console.log("Generating barrel exports...");
+    await barrelExporting();
+    console.log("Copying styles to dist...");
+    await mkdir("dist", { recursive: true });
+    await cp("src/styles", "dist/styles", { recursive: true });
+    console.log("Compiling TypeScript to JavaScript...");
+    await new Promise((resolve, reject) => {
+        const tsc = spawn("npx", ["tsc", "--project", "tsconfig.build.json"], {
+            stdio: "inherit"
+        });
+        tsc.on("close", (code) => {
+            if (code === 0)
+                resolve();
+            else
+                reject(new Error(`tsc exited with code ${code}`));
+        });
+    });
+    console.log("Build complete!");
+};
+build();

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./styles";

package/dist/lib/barrelExporting.d.ts

@@ -0,0 +1,2 @@
+export declare const barrelExporting: () => Promise<void>;
+//# sourceMappingURL=barrelExporting.d.ts.map

package/dist/lib/barrelExporting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"barrelExporting.d.ts","sourceRoot":"","sources":["../../src/lib/barrelExporting.ts"],"names":[],"mappings":"AAgFA,eAAO,MAAM,eAAe,qBAY3B,CAAC"}

package/dist/lib/barrelExporting.js

@@ -0,0 +1,72 @@
+import { walkDirectory } from "./fs-utils";
+import { readdir, writeFile, stat } from "node:fs/promises";
+import { join } from "node:path";
+const getAllDirectories = async (dir) => {
+    const dirs = [];
+    async function traverse(currentDir) {
+        const entries = await readdir(currentDir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = join(currentDir, entry.name);
+            if (entry.isDirectory()) {
+                dirs.push(fullPath);
+                await traverse(fullPath);
+            }
+        }
+    }
+    await traverse(dir);
+    return dirs;
+};
+const getSiblingTsFiles = async (dir) => {
+    const entries = await readdir(dir, { withFileTypes: true });
+    return entries
+        .filter((entry) => entry.isFile() &&
+        entry.name.endsWith(".ts") &&
+        entry.name !== "index.ts")
+        .map((entry) => join(dir, entry.name));
+};
+const getSiblingDirectories = async (dir) => {
+    const entries = await readdir(dir, { withFileTypes: true });
+    return entries
+        .filter((entry) => entry.isDirectory())
+        .map((entry) => join(dir, entry.name));
+};
+const getDirectoryDepth = (path) => {
+    return path.split("/").length;
+};
+const normalizePath = (path) => {
+    return path.replace(/^\.\//, "");
+};
+const generateIndexFile = async (dir) => {
+    const normalizedDir = normalizePath(dir);
+    const tsFiles = await getSiblingTsFiles(dir);
+    const subDirs = await getSiblingDirectories(dir);
+    const exports = [];
+    for (const file of tsFiles) {
+        const normalizedFile = normalizePath(file);
+        const relativePath = normalizedFile.replace(normalizedDir + "/", "");
+        exports.push(`export * from './${relativePath.replace(".ts", "")}';`);
+    }
+    for (const subDir of subDirs) {
+        const indexPath = join(subDir, "index.ts");
+        try {
+            await stat(indexPath);
+            const normalizedSubDir = normalizePath(subDir);
+            const relativePath = normalizedSubDir.replace(normalizedDir + "/", "");
+            exports.push(`export * from './${relativePath}';`);
+        }
+        catch { }
+    }
+    if (exports.length === 0) {
+        return;
+    }
+    const content = exports.join("\n");
+    await writeFile(join(dir, "index.ts"), content);
+};
+export const barrelExporting = async () => {
+    const directories = await getAllDirectories("./src/styles");
+    const sortedDirs = directories.sort((a, b) => getDirectoryDepth(b) - getDirectoryDepth(a));
+    for (const dir of sortedDirs) {
+        await generateIndexFile(dir);
+    }
+    await generateIndexFile("./src/styles");
+};

package/dist/lib/cssToTs.d.ts

@@ -0,0 +1,2 @@
+export declare const cssToTs: () => Promise<void>;
+//# sourceMappingURL=cssToTs.d.ts.map

package/dist/lib/cssToTs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssToTs.d.ts","sourceRoot":"","sources":["../../src/lib/cssToTs.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,OAAO,qBAkBnB,CAAC"}

package/dist/lib/cssToTs.js

@@ -0,0 +1,26 @@
+import { cwd } from "node:process";
+import { join } from "node:path";
+import { writeFile } from "node:fs/promises";
+import { walkDirectory, getFile, getMetaData } from "./fs-utils";
+import { linesToKV, kvToChartFile, kvToColourFile } from "./syntax-utils";
+const getCssStylePaths = async () => {
+    const stylesPath = join(cwd(), "src", "styles");
+    const paths = await walkDirectory(stylesPath);
+    return paths.filter((path) => path.endsWith(".css"));
+};
+export const cssToTs = async () => {
+    const paths = await getCssStylePaths();
+    await Promise.all(paths.map(async (path) => {
+        const file = await getFile(path);
+        const kv = linesToKV(file);
+        const metaData = getMetaData(path);
+        if (path.includes("/styles/colours")) {
+            const colorFile = kvToColourFile(kv, metaData.cssName);
+            await writeFile(join(metaData.tsPath), colorFile, "utf-8");
+        }
+        if (path.includes("/styles/themes/charts")) {
+            const chartFile = kvToChartFile(kv, metaData.cssName);
+            await writeFile(join(metaData.tsPath), chartFile, "utf-8");
+        }
+    }));
+};

package/dist/lib/fs-utils.d.ts

@@ -0,0 +1,11 @@
+export declare function walkDirectory(target: string): Promise<string[]>;
+export declare function getFile(target: string): Promise<string>;
+type MetaData = {
+    cssPath: string;
+    cssName: string;
+    tsName: string;
+    tsPath: string;
+};
+export declare const getMetaData: (path: string) => MetaData;
+export {};
+//# sourceMappingURL=fs-utils.d.ts.map

package/dist/lib/fs-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fs-utils.d.ts","sourceRoot":"","sources":["../../src/lib/fs-utils.ts"],"names":[],"mappings":"AAUA,wBAAsB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAoBrE;AAED,wBAAsB,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAG7D;AAkBD,KAAK,QAAQ,GAAG;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,QAU1C,CAAC"}

package/dist/lib/fs-utils.js

@@ -0,0 +1,50 @@
+import { readdir, readFile, writeFile, mkdir, stat, } from "node:fs/promises";
+import { cwd } from "node:process";
+import { dirname, join } from "node:path";
+export async function walkDirectory(target) {
+    const files = [];
+    async function traverse(dir) {
+        const entries = await readdir(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = join(dir, entry.name);
+            const entryStat = await stat(fullPath);
+            if (entryStat.isDirectory()) {
+                await traverse(fullPath);
+            }
+            else {
+                files.push(fullPath);
+            }
+        }
+    }
+    await traverse(target);
+    return files;
+}
+export async function getFile(target) {
+    const result = await readFile(target, "utf-8");
+    return result;
+}
+async function getFiles(targets) {
+    return await Promise.all(targets.map(async (target) => {
+        return await getFile(target);
+    }));
+}
+const getFileName = (path) => {
+    const routeParts = path.split("/");
+    if (!routeParts)
+        throw new Error("Not a path");
+    const fileName = routeParts.pop();
+    if (!fileName)
+        throw new Error("What is the point of pop anyway");
+    return fileName;
+};
+export const getMetaData = (path) => {
+    const cssName = getFileName(path);
+    const tsName = [cssName.split(".")[0], ".ts"].join("");
+    const tsPath = join(dirname(path), tsName);
+    return {
+        cssPath: path,
+        cssName,
+        tsPath,
+        tsName,
+    };
+};

package/dist/lib/syntax-utils.d.ts

@@ -0,0 +1,9 @@
+type ColorKV = {
+    key: string;
+    value: string;
+};
+export declare const linesToKV: (content: string) => ColorKV[];
+export declare const kvToColourFile: (content: ColorKV[], cssName: string) => string;
+export declare const kvToChartFile: (content: ColorKV[], cssName: string) => string;
+export {};
+//# sourceMappingURL=syntax-utils.d.ts.map

package/dist/lib/syntax-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"syntax-utils.d.ts","sourceRoot":"","sources":["../../src/lib/syntax-utils.ts"],"names":[],"mappings":"AAQA,KAAK,OAAO,GAAG;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,eAAO,MAAM,SAAS,GAAI,SAAS,MAAM,cAIxC,CAAC;AAMF,eAAO,MAAM,cAAc,GAAI,SAAS,OAAO,EAAE,EAAE,SAAS,MAAM,KAAG,MAUpE,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,SAAS,OAAO,EAAE,EAAE,SAAS,MAAM,KAAG,MAQnE,CAAC"}

package/dist/lib/syntax-utils.js

@@ -0,0 +1,44 @@
+const splitLines = (content) => {
+    return content.split("\n");
+};
+const isColor = (line) => {
+    return line.includes("--color");
+};
+const splitKv = (line) => {
+    let [key, value] = line.split(":");
+    if (!key || !value)
+        throw new Error("line is not color, use isColor");
+    key = key.trim();
+    value = value.trim();
+    key = key.slice(8);
+    value = value.slice(0, -1);
+    return { key, value };
+};
+export const linesToKV = (content) => {
+    const lines = splitLines(content).filter((line) => isColor(line));
+    const kvs = lines.map(splitKv);
+    return kvs;
+};
+const kebabToSnake = (item) => {
+    return item.replaceAll("-", "_");
+};
+export const kvToColourFile = (content, cssName) => {
+    const colorName = kebabToSnake(cssName.split(".")[0]);
+    let payload = `export const ${colorName} = {\n`;
+    content.forEach((item, index) => {
+        const key = item.key.split("-")[1];
+        const separator = index === content.length - 1 ? "" : ",";
+        payload += `\t"${key}":"${item.value}"${separator}\n`;
+    });
+    payload += `};`;
+    return payload;
+};
+export const kvToChartFile = (content, cssName) => {
+    const colorName = kebabToSnake(cssName.split(".")[0]);
+    let payload = `export const ${colorName} = [\n`;
+    content.forEach((item) => {
+        payload += `\t"${item.value}",\n`;
+    });
+    payload += `];`;
+    return payload;
+};

package/dist/stories/ChartThemes.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+export default meta;
+export declare const AllThemesStory: StoryObj;
+export declare const Comparison: StoryObj;
+export declare const LakePineBlend: StoryObj;
+export declare const AuburnCoolBend: StoryObj;
+export declare const SteelLakeBlend: StoryObj;
+//# sourceMappingURL=ChartThemes.stories.d.ts.map

package/dist/stories/ChartThemes.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartThemes.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ChartThemes.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiNtD,QAAA,MAAM,IAAI,EAAE,IAKX,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,cAAc,EAAE,QAG5B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAGxB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,QAM3B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAM5B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,QAM5B,CAAA"}

package/dist/stories/ChartThemes.stories.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { linen_pine_blend, lake_maritime_blend, linen_auburn_blend, linen_aurora_blend, pine_warm_bend, pine_cool_bend, nickel_warm_bend, nickel_cool_bend, maritime_aurora_blend, steel_lake_blend, linen_warm_bend, linen_cool_bend, nickel_auburn_blend, aurora_auburn_blend, dust_maritime_pine, pine_maritime_blend, lake_warm_bend, aurora_linen_blend, auburn_cool_bend, linen_lake_blend, pine_warm_blend, pine_lake_blend, steel_cool_bend, steel_warm_bend, maritime_pine_blend, steel_pine_blend, lake_pine_blend, } from "../styles/themes/charts/twelve-tone";
+const chartThemes = {
+    "Auburn Cool Bend": auburn_cool_bend,
+    "Aurora Auburn Blend": aurora_auburn_blend,
+    "Aurora Linen Blend": aurora_linen_blend,
+    "Dust Maritime Pine": dust_maritime_pine,
+    "Lake Maritime Blend": lake_maritime_blend,
+    "Lake Pine Blend": lake_pine_blend,
+    "Lake Warm Bend": lake_warm_bend,
+    "Linen Auburn Blend": linen_auburn_blend,
+    "Linen Aurora Blend": linen_aurora_blend,
+    "Linen Cool Bend": linen_cool_bend,
+    "Linen Lake Blend": linen_lake_blend,
+    "Linen Pine Blend": linen_pine_blend,
+    "Linen Warm Bend": linen_warm_bend,
+    "Maritime Aurora Blend": maritime_aurora_blend,
+    "Maritime Pine Blend": maritime_pine_blend,
+    "Nickel Auburn Blend": nickel_auburn_blend,
+    "Nickel Cool Bend": nickel_cool_bend,
+    "Nickel Warm Bend": nickel_warm_bend,
+    "Pine Cool Bend": pine_cool_bend,
+    "Pine Lake Blend": pine_lake_blend,
+    "Pine Maritime Blend": pine_maritime_blend,
+    "Pine Warm Bend": pine_warm_bend,
+    "Pine Warm Blend 2": pine_warm_blend,
+    "Steel Cool Bend": steel_cool_bend,
+    "Steel Lake Blend": steel_lake_blend,
+    "Steel Pine Blend": steel_pine_blend,
+    "Steel Warm Bend": steel_warm_bend,
+};
+function getContrastColor(hexColor) {
+    const hex = hexColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function ThemeSwatch({ colors, name }) {
+    return (_jsxs("div", { style: { marginBottom: "24px" }, children: [_jsx("h3", { style: {
+                    margin: "0 0 8px 0",
+                    fontWeight: 600,
+                    fontSize: "16px",
+                }, children: name }), _jsx("div", { style: {
+                    display: "flex",
+                    borderRadius: "8px",
+                    overflow: "hidden",
+                    boxShadow: "0 1px 3px rgba(0,0,0,0.12)",
+                }, children: colors.map((color, index) => (_jsx("div", { style: {
+                        backgroundColor: color,
+                        width: "50px",
+                        height: "50px",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: getContrastColor(color),
+                        fontSize: "10px",
+                        fontFamily: "monospace",
+                    }, title: color, children: index + 1 }, index))) }), _jsx("div", { style: {
+                    marginTop: "8px",
+                    fontSize: "12px",
+                    fontFamily: "monospace",
+                    color: "#666",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: "8px",
+                }, children: colors.map((color, index) => (_jsx("span", { children: color }, index))) })] }));
+}
+function AllThemes() {
+    return (_jsxs("div", { style: { padding: "20px" }, children: [_jsx("h2", { style: { marginBottom: "24px" }, children: "Chart Colour Themes" }), _jsx("p", { style: { marginBottom: "32px", color: "#666" }, children: "Pre-blended colour combinations optimized for data visualization. Each theme provides 12 distinct colours suitable for charts with multiple data series." }), _jsx("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fill, minmax(600px, 1fr))",
+                    gap: "24px",
+                }, children: Object.entries(chartThemes).map(([name, colors]) => (_jsx(ThemeSwatch, { name: name, colors: colors }, name))) })] }));
+}
+function ThemeComparison() {
+    const selectedThemes = [
+        { name: "Lake Pine Blend", colors: lake_pine_blend },
+        { name: "Auburn Cool Bend", colors: auburn_cool_bend },
+        { name: "Steel Lake Blend", colors: steel_lake_blend },
+        { name: "Linen Warm Bend", colors: linen_warm_bend },
+    ];
+    return (_jsxs("div", { style: { padding: "20px" }, children: [_jsx("h2", { style: { marginBottom: "24px" }, children: "Theme Comparison" }), _jsx("p", { style: { marginBottom: "32px", color: "#666" }, children: "Side-by-side comparison of popular chart themes." }), _jsx("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: selectedThemes.map(({ name, colors }) => (_jsxs("div", { children: [_jsx("h3", { style: { margin: "0 0 12px 0", fontWeight: 600 }, children: name }), _jsx("div", { style: { display: "flex", gap: "4px" }, children: colors.map((color, index) => (_jsx("div", { style: {
+                                    backgroundColor: color,
+                                    width: "60px",
+                                    height: "80px",
+                                    borderRadius: "4px",
+                                    display: "flex",
+                                    alignItems: "flex-end",
+                                    justifyContent: "center",
+                                    paddingBottom: "8px",
+                                    color: getContrastColor(color),
+                                    fontSize: "10px",
+                                    fontFamily: "monospace",
+                                }, children: color }, index))) })] }, name))) })] }));
+}
+const meta = {
+    title: "Design System/Colours/Chart Themes",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const AllThemesStory = {
+    name: "All Themes",
+    render: () => _jsx(AllThemes, {}),
+};
+export const Comparison = {
+    name: "Theme Comparison",
+    render: () => _jsx(ThemeComparison, {}),
+};
+export const LakePineBlend = {
+    render: () => (_jsx("div", { style: { padding: "20px" }, children: _jsx(ThemeSwatch, { name: "Lake Pine Blend", colors: lake_pine_blend }) })),
+};
+export const AuburnCoolBend = {
+    render: () => (_jsx("div", { style: { padding: "20px" }, children: _jsx(ThemeSwatch, { name: "Auburn Cool Bend", colors: auburn_cool_bend }) })),
+};
+export const SteelLakeBlend = {
+    render: () => (_jsx("div", { style: { padding: "20px" }, children: _jsx(ThemeSwatch, { name: "Steel Lake Blend", colors: steel_lake_blend }) })),
+};

package/dist/stories/ColourScales.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+type ColourScale = Record<string, string>;
+declare const colourScales: Record<string, ColourScale>;
+interface SingleScaleProps {
+    scaleName: keyof typeof colourScales;
+}
+declare const meta: Meta;
+export default meta;
+export declare const AllScalesStory: StoryObj;
+export declare const Auburn: StoryObj<SingleScaleProps>;
+export declare const Lake: StoryObj<SingleScaleProps>;
+export declare const Pine: StoryObj<SingleScaleProps>;
+export declare const Steel: StoryObj<SingleScaleProps>;
+export declare const Amethyst: StoryObj<SingleScaleProps>;
+export declare const Aurora: StoryObj<SingleScaleProps>;
+export declare const Cerulean: StoryObj<SingleScaleProps>;
+export declare const Charcoal: StoryObj<SingleScaleProps>;
+export declare const Copper: StoryObj<SingleScaleProps>;
+export declare const Emerald: StoryObj<SingleScaleProps>;
+export declare const Linen: StoryObj<SingleScaleProps>;
+export declare const Maritime: StoryObj<SingleScaleProps>;
+export declare const Nickel: StoryObj<SingleScaleProps>;
+export declare const Sienna: StoryObj<SingleScaleProps>;
+//# sourceMappingURL=ColourScales.stories.d.ts.map

package/dist/stories/ColourScales.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColourScales.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ColourScales.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAmBtD,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAEzC,QAAA,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAe7C,CAAA;AAuGD,UAAU,gBAAgB;IACtB,SAAS,EAAE,MAAM,OAAO,YAAY,CAAA;CACvC;AAaD,QAAA,MAAM,IAAI,EAAE,IAKX,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,cAAc,EAAE,QAG5B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAE7C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,gBAAgB,CAE3C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAC,gBAAgB,CAE3C,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAE5C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAE/C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAE7C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAE/C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAE/C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAE7C,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,gBAAgB,CAE9C,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAE5C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,gBAAgB,CAE/C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAE7C,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,gBAAgB,CAE7C,CAAA"}

package/dist/stories/ColourScales.stories.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { amethyst, auburn, aurora, cerulean, charcoal, copper, emerald, lake, linen, maritime, nickel, pine, sienna, steel, } from "../styles/colours";
+const colourScales = {
+    amethyst,
+    auburn,
+    aurora,
+    cerulean,
+    charcoal,
+    copper,
+    emerald,
+    lake,
+    linen,
+    maritime,
+    nickel,
+    pine,
+    sienna,
+    steel,
+};
+// Get shades in numeric order from an actual scale object
+function getOrderedShades(scale) {
+    return Object.keys(scale).sort((a, b) => parseInt(a) - parseInt(b));
+}
+function getContrastColor(hexColor) {
+    if (!hexColor)
+        return "#000000";
+    const hex = hexColor.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+function Swatch({ shade, hex, scaleName }) {
+    if (!hex)
+        return null;
+    const textColor = getContrastColor(hex);
+    const cssVar = `--color-${scaleName}-${shade}`;
+    return (_jsxs("div", { style: {
+            backgroundColor: hex,
+            color: textColor,
+            padding: "12px 16px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            fontFamily: "monospace",
+            fontSize: "13px",
+        }, children: [_jsx("span", { style: { fontWeight: 600 }, children: shade }), _jsx("span", { children: hex })] }));
+}
+function ColourScaleDisplay({ name, scale }) {
+    const shades = getOrderedShades(scale);
+    return (_jsxs("div", { style: { marginBottom: "32px" }, children: [_jsx("h3", { style: {
+                    margin: "0 0 8px 0",
+                    textTransform: "capitalize",
+                    fontWeight: 600,
+                    fontSize: "18px",
+                }, children: name }), _jsx("div", { style: {
+                    borderRadius: "8px",
+                    overflow: "hidden",
+                    boxShadow: "0 1px 3px rgba(0,0,0,0.12)",
+                }, children: shades.map((shade) => (_jsx(Swatch, { shade: shade, hex: scale[shade], scaleName: name }, shade))) })] }));
+}
+function AllScales() {
+    return (_jsx("div", { style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: "24px",
+            padding: "20px",
+        }, children: Object.entries(colourScales).map(([name, scale]) => (_jsx(ColourScaleDisplay, { name: name, scale: scale }, name))) }));
+}
+function SingleScale({ scaleName }) {
+    const scale = colourScales[scaleName];
+    if (!scale)
+        return null;
+    return (_jsx("div", { style: { padding: "20px", maxWidth: "400px" }, children: _jsx(ColourScaleDisplay, { name: scaleName, scale: scale }) }));
+}
+const meta = {
+    title: "Design System/Colours/Scales",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const AllScalesStory = {
+    name: "All Scales",
+    render: () => _jsx(AllScales, {}),
+};
+export const Auburn = {
+    render: () => _jsx(SingleScale, { scaleName: "auburn" }),
+};
+export const Lake = {
+    render: () => _jsx(SingleScale, { scaleName: "lake" }),
+};
+export const Pine = {
+    render: () => _jsx(SingleScale, { scaleName: "pine" }),
+};
+export const Steel = {
+    render: () => _jsx(SingleScale, { scaleName: "steel" }),
+};
+export const Amethyst = {
+    render: () => _jsx(SingleScale, { scaleName: "amethyst" }),
+};
+export const Aurora = {
+    render: () => _jsx(SingleScale, { scaleName: "aurora" }),
+};
+export const Cerulean = {
+    render: () => _jsx(SingleScale, { scaleName: "cerulean" }),
+};
+export const Charcoal = {
+    render: () => _jsx(SingleScale, { scaleName: "charcoal" }),
+};
+export const Copper = {
+    render: () => _jsx(SingleScale, { scaleName: "copper" }),
+};
+export const Emerald = {
+    render: () => _jsx(SingleScale, { scaleName: "emerald" }),
+};
+export const Linen = {
+    render: () => _jsx(SingleScale, { scaleName: "linen" }),
+};
+export const Maritime = {
+    render: () => _jsx(SingleScale, { scaleName: "maritime" }),
+};
+export const Nickel = {
+    render: () => _jsx(SingleScale, { scaleName: "nickel" }),
+};
+export const Sienna = {
+    render: () => _jsx(SingleScale, { scaleName: "sienna" }),
+};