diff --git a/pkgs/flake-module.nix b/pkgs/flake-module.nix
index 52ff2084d..fb8b1536c 100644
--- a/pkgs/flake-module.nix
+++ b/pkgs/flake-module.nix
@@ -3,6 +3,7 @@
./clan-cli/flake-module.nix
./installer/flake-module.nix
./ui/flake-module.nix
+ ./theme/flake-module.nix
];
perSystem = { pkgs, config, ... }: {
diff --git a/pkgs/theme/.editorconfig b/pkgs/theme/.editorconfig
new file mode 100644
index 000000000..4e89cb0e9
--- /dev/null
+++ b/pkgs/theme/.editorconfig
@@ -0,0 +1,3 @@
+[*.{js,jsx,ts,tsx,json}]
+indent_style = space
+indent_size = 4
\ No newline at end of file
diff --git a/pkgs/theme/.envrc b/pkgs/theme/.envrc
new file mode 100644
index 000000000..2933b5bd2
--- /dev/null
+++ b/pkgs/theme/.envrc
@@ -0,0 +1,12 @@
+# Because we depend on nixpkgs sources, uploading to builders takes a long time
+
+source_up
+
+files=(flake-module.nix package.json package-lock.json)
+if type nix_direnv_watch_file &>/dev/null; then
+ nix_direnv_watch_file "${files[@]}"
+else
+ watch_file "${files[@]}"
+fi
+
+use flake .#theme --builders ''
diff --git a/pkgs/theme/.gitignore b/pkgs/theme/.gitignore
new file mode 100644
index 000000000..9e29a683b
--- /dev/null
+++ b/pkgs/theme/.gitignore
@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# nix
+.floco
+src/fonts
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Generated api code
+openapi.json
+api/
diff --git a/pkgs/theme/default.nix b/pkgs/theme/default.nix
new file mode 100644
index 000000000..d66639194
--- /dev/null
+++ b/pkgs/theme/default.nix
@@ -0,0 +1,41 @@
+{ floco
+, system
+, pkgs
+, clanPkgs
+}:
+let
+
+ lib = floco.lib;
+
+ pjs =
+ let
+ msg = "default.nix: Expected to find `package.json' to lookup " +
+ "package name/version, but no such file exists at: " +
+ (toString ./package.json);
+ in
+ if builtins.pathExists ./package.json then lib.importJSON ./package.json
+ else throw msg;
+ ident = pjs.name;
+ inherit (pjs) version;
+
+
+ fmod = lib.evalModules {
+ modules = [
+ floco.nixosModules.floco
+ { config.floco.settings = { inherit system; basedir = ./.; }; }
+ ./nix/floco-cfg.nix
+ ];
+ specialArgs = {
+ inherit pkgs clanPkgs;
+ };
+ };
+
+ # This attrset holds a few derivations related to our package.
+ # We'll expose these below to the CLI.
+ pkg = fmod.config.floco.packages.${ident}.${version};
+
+
+in
+{
+ inherit pkg fmod;
+}
diff --git a/pkgs/theme/flake-module.nix b/pkgs/theme/flake-module.nix
new file mode 100644
index 000000000..864cea516
--- /dev/null
+++ b/pkgs/theme/flake-module.nix
@@ -0,0 +1,18 @@
+{ self, ... }:
+{
+ perSystem = { self', pkgs, ... }:
+ let
+ inherit (self.inputs) floco;
+ base = pkgs.callPackage ./default.nix { inherit floco; clanPkgs = self'.packages; };
+ in
+ {
+ packages = {
+ theme = base.pkg.global;
+ };
+ devShells.theme = pkgs.callPackage ./shell.nix {
+ inherit pkgs;
+ inherit (base) fmod pkg;
+ clanPkgs = self'.packages;
+ };
+ };
+}
diff --git a/pkgs/theme/index.html b/pkgs/theme/index.html
new file mode 100644
index 000000000..35eadad0e
--- /dev/null
+++ b/pkgs/theme/index.html
@@ -0,0 +1,962 @@
+
+
+
+ Page Title
+
+
+
+
+ neutral0
+
+
+ neutral10
+
+
+ neutral20
+
+
+ neutral30
+
+
+ neutral40
+
+
+ neutral50
+
+
+ neutral51
+
+
+ neutral60
+
+
+ neutral70
+
+
+ neutral80
+
+
+ neutral90
+
+
+ neutral98
+
+
+ neutral100
+
+
+
+ red0
+
+
+ red10
+
+
+ red20
+
+
+ red30
+
+
+ red40
+
+
+ red50
+
+
+ red60
+
+
+ red70
+
+
+ red80
+
+
+ red90
+
+
+ red95
+
+
+ red100
+
+
+
+ green0
+
+
+ green10
+
+
+ green20
+
+
+ green30
+
+
+ green40
+
+
+ green50
+
+
+ green60
+
+
+ green70
+
+
+ green72
+
+
+ green80
+
+
+ green90
+
+
+ green98
+
+
+ green100
+
+
+
+ yellow0
+
+
+ yellow10
+
+
+ yellow20
+
+
+ yellow30
+
+
+ yellow40
+
+
+ yellow50
+
+
+ yellow60
+
+
+ yellow70
+
+
+ yellow80
+
+
+ yellow87
+
+
+ yellow90
+
+
+ yellow98
+
+
+ yellow100
+
+
+
+ purple0
+
+
+ purple10
+
+
+ purple20
+
+
+ purple30
+
+
+ purple33
+
+
+ purple40
+
+
+ purple50
+
+
+ purple60
+
+
+ purple70
+
+
+ purple80
+
+
+ purple90
+
+
+ purple100
+
+
+
+ blue0
+
+
+ blue10
+
+
+ blue20
+
+
+ blue30
+
+
+ blue40
+
+
+ blue50
+
+
+ blue60
+
+
+ blue70
+
+
+ blue80
+
+
+ blue90
+
+
+ blue95
+
+
+ blue100
+
+
${key}
`;
+ });
+ return `${colors.join(
+ "\n",
+ )}
`;
+ });
+
+ return `
+
+
+Page Title
+
+
+
+${colors.join("\n")}
+
+
+
+`;
+};
+
+writeFile("index.html", html(palette), (err) => {
+ if (err) {
+ console.error({ err });
+ } else {
+ console.log("Exported colors to html");
+ }
+});
diff --git a/pkgs/theme/src/main.ts b/pkgs/theme/src/main.ts
new file mode 100644
index 000000000..16cada9b6
--- /dev/null
+++ b/pkgs/theme/src/main.ts
@@ -0,0 +1,182 @@
+#!usr/bin/node
+import * as fs from "fs";
+import {
+ argbFromHex,
+ Hct,
+ hexFromArgb,
+} from "@material/material-color-utilities";
+import {
+ AliasTokenMap,
+ ColorDesignToken,
+ ColorSet,
+ HexString,
+ RefTokenSystem,
+ TonalPalette,
+ TonalPaletteConfig,
+ TonalPaletteItem,
+} from "./types.js";
+import { config } from "./config.js";
+
+const { baseColors, tones, aliases, common } = config;
+
+/** Takes a color, tone and name
+ * If a tone is given adjust the lightning level accordingly
+ *
+ * @returns TonalPaletteItem (meta wrapper around HCT)
+ */
+const getTonalPaletteItem = (
+ value: HexString,
+ name: string,
+ tone?: number,
+): TonalPaletteItem => {
+ const aRGB = argbFromHex(value);
+ const color = Hct.fromInt(aRGB);
+ if (tone !== undefined) {
+ color.tone = tone;
+ }
+ return {
+ shade: color.tone,
+ name: `${name || color.chroma}${Math.round(color.tone)}`,
+ baseName: name,
+ value: color,
+ };
+};
+
+/** create a flat list of the cross product from all colors and all tones.
+ *
+ * every color is mapped in the range from 0 to 100
+ * with the steps configure in `config.tones'
+ * additionally the key color is added unmodified
+ * lightning levels are rounded to the next natural number to form the 'name'
+ * Example:
+ *
+ * "blue" x [20.1, 30.3]
+ * ->
+ * [blue20, blue30]
+ */
+const mkTonalPalette =
+ (config: TonalPaletteConfig) =>
+ (name: string) =>
+ (keyTone: HexString): TonalPalette => {
+ const { tones } = config;
+ const aRGB = argbFromHex(keyTone);
+ const HctColor = Hct.fromInt(aRGB);
+ const roundedTone = Math.round(HctColor.tone * 100) / 100;
+
+ const localTones = [...tones, roundedTone];
+
+ return localTones.map((t) => getTonalPaletteItem(keyTone, name, t));
+ };
+
+/**
+ * Converts a PaletteItem into a hex color. (Wrapped)
+ * Adding meta attributes which avoids any information loss.
+ */
+const toDesignTokenContent = (color: TonalPaletteItem): ColorDesignToken => {
+ const { value } = color;
+ return {
+ type: "color",
+ value: hexFromArgb(value.toInt()),
+ meta: {
+ color,
+ date: new Date(),
+ },
+ };
+};
+
+const color: ColorSet = Object.entries(baseColors)
+ .map(([name, baseColor]) => ({
+ name,
+ baseColor,
+ tones: mkTonalPalette({
+ tones: [...tones, ...baseColor.tones].sort((a, b) => a - b),
+ })(name)(baseColor.keyColor),
+ }))
+ .reduce((acc, curr) => {
+ let currTones = curr.tones.reduce(
+ (o, v) => ({
+ ...o,
+ [v.name]: toDesignTokenContent(v),
+ }),
+ {},
+ );
+ return {
+ ...acc,
+ ...currTones,
+ };
+ }, {});
+
+/** Generate a set of tokens from a given alias mapping
+ *
+ * @param alias A string e.g. Primary -> Blue (Primary is the alias)
+ * @param name A string; Basename of the referenced value (e.g. Blue)
+ * @param colors A set of colors
+ * @returns All aliases from the given color set
+ */
+function resolveAlias(
+ alias: string,
+ name: string,
+ colors: ColorSet,
+): AliasTokenMap {
+ // All colors from the color map belonging to that single alias
+ // Example:
+ // Primary -> "blue"
+ // =>
+ // [ (blue0) , (blue10) , ..., (blue100) ]
+ const all = Object.values(colors)
+ .filter((n) => n.meta.color.name.includes(name))
+ .filter((n) => !n.meta.color.name.includes("."));
+
+ const tokens = all
+ .map((shade) => {
+ const shadeNumber = shade.meta.color.shade;
+ return {
+ name: `${alias}${Math.round(shadeNumber)}`,
+ value: { value: `{ref.palette.${shade.meta.color.name}}` },
+ // propagate the meta attribute of the actual value
+ meta: shade.meta,
+ };
+ })
+ // sort by tone
+ .sort((a, b) => a.meta.color.value.tone - b.meta.color.value.tone)
+ .reduce((acc, { name, value }) => ({ ...acc, [name]: value }), {});
+ return tokens;
+}
+
+const aliasMap = Object.entries(aliases).reduce(
+ (prev, [key, value]) => ({
+ ...prev,
+ ...resolveAlias(key, value, color),
+ }),
+ {},
+);
+
+const commonColors = Object.entries(common)
+ .map(([name, value]) =>
+ toDesignTokenContent(getTonalPaletteItem(value, name)),
+ )
+ .reduce(
+ (acc, val) => ({ ...acc, [val.meta.color.baseName]: val }),
+ {},
+ ) as ColorSet;
+
+const toPaletteToken = (color: ColorSet): RefTokenSystem => ({
+ ref: {
+ palette: color,
+ alias: aliasMap,
+ common: commonColors,
+ },
+});
+
+// Dump tokens to json file
+fs.writeFile(
+ "colors.json",
+ JSON.stringify(toPaletteToken(color), null, 2),
+ (err) => {
+ if (err) {
+ console.error({ err });
+ } else {
+ console.log("tokens successfully exported");
+ }
+ },
+);
diff --git a/pkgs/theme/src/types.ts b/pkgs/theme/src/types.ts
new file mode 100644
index 000000000..4a7a1888b
--- /dev/null
+++ b/pkgs/theme/src/types.ts
@@ -0,0 +1,90 @@
+import { Hct } from "@material/material-color-utilities";
+
+export type BaseColors = {
+ neutral: BaseColor;
+ red: BaseColor;
+ green: BaseColor;
+ yellow: BaseColor;
+ purple: BaseColor;
+ blue: BaseColor;
+};
+
+export type BaseColor = {
+ keyColor: HexString;
+ tones: number[];
+ follows?: string;
+};
+
+export type ColorSet = { [key: string]: ColorDesignToken };
+
+/** The resolved alias tokens
+ *
+ * @example
+ * {
+ * primary: "blue"
+ * ...
+ * }
+ *
+ */
+export type AliasMap = {
+ [alias in T]: keyof BaseColors;
+};
+
+/** The resolved alias tokens
+ *
+ * @example
+ * {
+ * primary0: "blue40"
+ * primary10: "blue40"
+ * ...
+ * primary100: "blue100"
+ * }
+ *
+ * Unfortunately My Typescript skills lack the ability to express this type any narrower :/
+ */
+export type AliasTokenMap = {
+ [alias: string]: { value: string };
+};
+
+export type TonalPaletteConfig = {
+ tones: number[];
+};
+
+export type HexString = string;
+
+export type TonalPaletteItem = {
+ /**
+ * @example
+ * 20
+ */
+ shade: number;
+ /**
+ * @example
+ * "blue20"
+ */
+ name: string;
+ /**
+ * @example
+ * "blue"
+ */
+ baseName: string;
+ value: Hct;
+};
+export type TonalPalette = TonalPaletteItem[];
+
+export type ColorDesignToken = {
+ type: "color";
+ value: HexString;
+ meta: {
+ color: TonalPaletteItem;
+ date: Date;
+ };
+};
+
+export type RefTokenSystem = {
+ ref: {
+ palette: ColorSet;
+ common: ColorSet;
+ alias: AliasTokenMap;
+ };
+};
diff --git a/pkgs/theme/tsconfig.json b/pkgs/theme/tsconfig.json
new file mode 100644
index 000000000..4b562c9c5
--- /dev/null
+++ b/pkgs/theme/tsconfig.json
@@ -0,0 +1,41 @@
+{
+ "include": ["src"],
+ "compilerOptions": {
+ "target": "ESNext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+
+ "lib": [
+ "ESNext",
+ "dom"
+ ] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
+ "module": "NodeNext" /* Specify what module code is generated. */,
+ "rootDir": "src" /* Specify the root folder within your source files. */,
+ "moduleResolution": "nodenext" /* Specify how TypeScript looks up a file from a given module specifier. */,
+ "resolveJsonModule": true /* Enable importing .json files. */,
+ "outDir": "build",
+
+ "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+
+ "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+ /* Type Checking */
+ "strict": true /* Enable all strict type-checking options. */,
+ "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+ "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+ "strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+ "strictBindCallApply": true /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */,
+ "strictPropertyInitialization": true /* Check for class properties that are declared but not set in the constructor. */,
+ "noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+ // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
+ "alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+ "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+ "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+ "exactOptionalPropertyTypes": true /* Interpret optional property types as written, rather than adding 'undefined'. */,
+ "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+ "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+ "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+ "noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,
+ "noPropertyAccessFromIndexSignature": true /* Enforces using indexed accessors for keys declared using an indexed type. */
+ // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
+ // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
+ }
+}
diff --git a/pkgs/ui/nix/floco-cfg.nix b/pkgs/ui/nix/floco-cfg.nix
index d8711270a..f0969327e 100644
--- a/pkgs/ui/nix/floco-cfg.nix
+++ b/pkgs/ui/nix/floco-cfg.nix
@@ -2,5 +2,6 @@
imports = [
./pdefs.nix
./foverrides.nix
+ ../../theme/nix/floco-cfg.nix
];
}
diff --git a/pkgs/ui/nix/foverrides.nix b/pkgs/ui/nix/foverrides.nix
index 3d4393eb6..5fb91a34c 100644
--- a/pkgs/ui/nix/foverrides.nix
+++ b/pkgs/ui/nix/foverrides.nix
@@ -100,6 +100,12 @@ in
optional = false;
dev = true;
};
+ "node_modules/@clan/colors" = {
+ key = "@clan/colors/1.0.0";
+ link = false;
+ optional = false;
+ dev = true;
+ };
};
});
in
diff --git a/pkgs/ui/src/app/theme/themes.ts b/pkgs/ui/src/app/theme/themes.ts
index edd2786ee..3da1b34d7 100644
--- a/pkgs/ui/src/app/theme/themes.ts
+++ b/pkgs/ui/src/app/theme/themes.ts
@@ -1,5 +1,7 @@
import { createTheme } from "@mui/material/styles";
+import colors from "@clan/colors/colors.json";
+
export const darkTheme = createTheme({
breakpoints: {
values: {
@@ -15,6 +17,7 @@ export const darkTheme = createTheme({
},
});
+const { palette, common } = colors.ref;
export const lightTheme = createTheme({
breakpoints: {
values: {
@@ -27,5 +30,27 @@ export const lightTheme = createTheme({
},
palette: {
mode: "light",
+ background: {
+ default: common.white.value,
+ paper: palette.neutral98.value,
+ },
+ primary: {
+ main: palette.green50.value,
+ },
+ secondary: {
+ main: palette.green50.value,
+ },
+ error: {
+ main: palette.red50.value,
+ },
+ warning: {
+ main: palette.yellow50.value,
+ },
+ success: {
+ main: palette.green50.value,
+ },
+ info: {
+ main: palette.red50.value,
+ },
},
});