Skip to content

Commit

Permalink
update theme names
Browse files Browse the repository at this point in the history
  • Loading branch information
EvanLovely committed Oct 18, 2023
1 parent 2d107ab commit 4264200
Show file tree
Hide file tree
Showing 11 changed files with 335 additions and 80 deletions.
33 changes: 10 additions & 23 deletions knapsack/data/knapsack.asset-sets.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
"globalAssetSetIds": [
"salt-light",
"salt-dark",
"check",
"coin",
"dollar"
"commercial",
"retail"
],
"allAssetSets": {
"salt-light": {
Expand All @@ -19,39 +18,27 @@
"inlineJs": "document.body.setAttribute('data-mode', 'dark');",
"assets": []
},
"check": {
"id": "check",
"title": "check",
"commercial": {
"id": "commercial",
"title": "commercial",
"assets": [
{
"src": "../dist/tokens/design-tokens.css"
},
{
"src": "../../ks-theme-check.css"
"src": "../../ks-theme-commercial.css"
}
]
},
"coin": {
"id": "coin",
"title": "coin",
"retail": {
"id": "retail",
"title": "retail",
"assets": [
{
"src": "../dist/tokens/design-tokens.css"
},
{
"src": "../../ks-theme-coin.css"
}
]
},
"dollar": {
"id": "dollar",
"title": "dollar",
"assets": [
{
"src": "../dist/tokens/design-tokens.css"
},
{
"src": "../../ks-theme-dollar.css"
"src": "../../ks-theme-retail.css"
}
]
}
Expand Down
236 changes: 193 additions & 43 deletions knapsack/data/knapsack.design-tokens.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,65 +74,215 @@
"description": ""
},
"theme": {
"description": "",
"type": "string",
"coin": {
"description": "",
"type": "string",
"commercial": {
"actionable": {
"description": "",
"type": "string",
"primary": {
"description": "",
"type": "string",
"foreground": {
"$type": "color",
"$value": "#000000"
},
"foreground hover": {
"$type": "color",
"$value": "#000000"
},
"foreground active": {
"$type": "color",
"$value": "#000000"
},
"foreground disabled": {
"$type": "color",
"$value": "#000000"
},
"background": {
"$value": "#510433",
"$description": "",
"$type": "color"
"$type": "color",
"$value": "#1ef79f",
"$description": ""
},
"background hover": {
"$value": "#d1e909",
"$description": "",
"$type": "color"
"$type": "color",
"$value": "#000000"
},
"background active": {
"$type": "color",
"$value": "#000000"
},
"background disabled": {
"$type": "color",
"$value": "#000000"
}
}
}
},
"dollar": {
"description": "",
"type": "string",
"actionable": {
"description": "",
"type": "string",
"primary": {
"description": "",
"type": "string",
},
"cta": {
"foreground": {
"$type": "color",
"$value": "#000000"
},
"foreground hover": {
"$type": "color",
"$value": "#000000"
},
"foreground active": {
"$type": "color",
"$value": "#000000"
},
"foreground disabled": {
"$type": "color",
"$value": "#000000"
},
"background": {
"$type": "color",
"$value": "#000000"
},
"background hover": {
"$type": "color",
"$value": "#000000"
},
"background active": {
"$type": "color",
"$value": "#000000"
},
"background disabled": {
"$type": "color",
"$value": "#000000"
}
},
"secondary": {
"foreground": {
"$type": "color",
"$value": "#000000"
},
"foreground hover": {
"$type": "color",
"$value": "#000000"
},
"foreground active": {
"$type": "color",
"$value": "#000000"
},
"foreground disabled": {
"$type": "color",
"$value": "#000000"
},
"background": {
"$value": "#15abd6",
"$description": "",
"$type": "color"
"$type": "color",
"$value": "#000000"
},
"background hover": {
"$value": "#09dee8",
"$description": "",
"$type": "color"
"$type": "color",
"$value": "#000000"
},
"background active": {
"$type": "color",
"$value": "#000000"
},
"background disabled": {
"$type": "color",
"$value": "#000000"
}
}
}
},
"check": {
"description": "",
"type": "string",
"retail": {
"actionable": {
"description": "",
"type": "string",
"primary": {
"description": "",
"type": "string",
"foreground": {
"$type": "color",
"$value": "#000000"
},
"foreground hover": {
"$type": "color",
"$value": "#000000"
},
"foreground active": {
"$type": "color",
"$value": "#000000"
},
"foreground disabled": {
"$type": "color",
"$value": "#000000"
},
"background": {
"$value": "#ee0000",
"$description": "",
"$type": "color"
"$type": "color",
"$value": "#000000"
},
"background hover": {
"$type": "color",
"$value": "#000000"
},
"background active": {
"$type": "color",
"$value": "#000000"
},
"background disabled": {
"$type": "color",
"$value": "#000000"
}
},
"cta": {
"foreground": {
"$type": "color",
"$value": "#000000"
},
"foreground hover": {
"$type": "color",
"$value": "#000000"
},
"foreground active": {
"$type": "color",
"$value": "#000000"
},
"foreground disabled": {
"$type": "color",
"$value": "#000000"
},
"background": {
"$type": "color",
"$value": "#000000"
},
"background hover": {
"$type": "color",
"$value": "#000000"
},
"background active": {
"$type": "color",
"$value": "#000000"
},
"background disabled": {
"$type": "color",
"$value": "#000000"
}
},
"secondary": {
"foreground": {
"$type": "color",
"$value": "#000000"
},
"foreground hover": {
"$type": "color",
"$value": "#000000"
},
"foreground active": {
"$type": "color",
"$value": "#000000"
},
"foreground disabled": {
"$type": "color",
"$value": "#000000"
},
"background": {
"$type": "color",
"$value": "#000000"
},
"background hover": {
"$type": "color",
"$value": "#000000"
},
"background active": {
"$type": "color",
"$value": "#000000"
},
"background disabled": {
"$type": "color",
"$value": "#000000"
}
}
}
Expand Down
61 changes: 61 additions & 0 deletions ks-theme-add.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { join, relative } from "path";
import fs from "fs";
import {
KnapsackAssetSetsConfig,
KnapsackAssetSetConfig,
} from "@knapsack/types";
import prompts from "prompts";

const tokens = JSON.parse(
fs.readFileSync("./knapsack/data/knapsack.design-tokens.json", "utf8")
);

async function add() {
const { themeName: themeNameInput } = await prompts(
[
{
type: "text",
name: "themeName",
message: "Name of theme",
},
],
{
onCancel: () => process.exit(1),
}
);
if (typeof themeNameInput !== "string") {
throw new Error("themeNameInput is not a string");
}
const themeName = themeNameInput.trim();

const basicToken = {
$type: "color",
$value: "#000000",
};
tokens.theme[themeName] = {
actionable: {},
};
tokens.theme[themeName].actionable = Object.fromEntries(
["primary", "cta", "secondary"].map((group) => [
group,
{
foreground: basicToken,
"foreground hover": basicToken,
"foreground active": basicToken,
"foreground disabled": basicToken,
background: basicToken,
"background hover": basicToken,
"background active": basicToken,
"background disabled": basicToken,
},
])
);

fs.writeFileSync(
join(__dirname, "./knapsack/data/knapsack.design-tokens.json"),
JSON.stringify(tokens, null, 2)
);
console.log(`adding theme ${themeName}`);
}

add();
3 changes: 0 additions & 3 deletions ks-theme-check.css

This file was deleted.

4 changes: 0 additions & 4 deletions ks-theme-coin.css

This file was deleted.

Loading

0 comments on commit 4264200

Please sign in to comment.