add Barbie theme

knapsack-cloud · Oct 19, 2023 · 414bf8d · 414bf8d
1 parent 98fc010
commit 414bf8d
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 1 deletion.
diff --git a/knapsack/data/knapsack.asset-sets.json b/knapsack/data/knapsack.asset-sets.json
@@ -2,6 +2,7 @@
   "globalAssetSetIds": [
     "salt-light",
     "salt-dark",
+    "barbie",
     "commercial",
     "retail"
   ],
@@ -18,6 +19,18 @@
       "inlineJs": "document.body.setAttribute('data-mode', 'dark');",
       "assets": []
     },
+    "barbie": {
+      "id": "barbie",
+      "title": "Barbie",
+      "assets": [
+        {
+          "src": "../dist/tokens/design-tokens.css"
+        },
+        {
+          "src": "../dist/themes/ks-theme-barbie.css"
+        }
+      ]
+    },
     "commercial": {
       "id": "commercial",
       "title": "Commercial",

diff --git a/knapsack/data/knapsack.design-tokens.json b/knapsack/data/knapsack.design-tokens.json
@@ -286,6 +286,112 @@
           }
         }
       }
+    },
+    "barbie": {
+      "actionable": {
+        "primary": {
+          "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": "#ff00cf"
+          },
+          "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"
+          }
+        }
+      }
     }
   }
 }
diff --git a/ks-theme-add.ts b/ks-theme-add.ts
@@ -26,7 +26,7 @@ async function add() {
   if (typeof themeNameInput !== "string") {
     throw new Error("themeNameInput is not a string");
   }
-  const themeName = themeNameInput.trim();
+  const themeName = themeNameInput.trim().toLowerCase();
 
   const basicToken = {
     $type: "color",