🔧(demo) update demo app to ts config file, customize one token

Showcase a situation where we want to customize a component's design token.

apps/demo/.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+src/cunningham-tokens.ts

apps/demo/.eslintrc.json

@@ -4,9 +4,6 @@
     "custom"
   ],
   "parserOptions": {
-    "project": [
+    "project": "./tsconfig.eslint.json"
-      "./tsconfig.json",
-      "./tsconfig.node.json"
-    ]
   }
 }

apps/demo/cunningham.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  theme: {
-    colors: {
-      primary: 'purple'
-    },
-  },
-};

apps/demo/cunningham.ts

@@ -0,0 +1,12 @@
+export default {
+  theme: {
+    colors: {
+      primary: "purple",
+    },
+  },
+  components: {
+    button: {
+      "border-radius": "30px",
+    },
+  },
+};

apps/demo/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
-    "dev": "vite",
+    "dev": "vite & nodemon --watch cunningham.ts --exec yarn build-theme",
     "build-theme": "cunningham -o src -g css,ts",
     "build": "tsc && vite build",
     "preview": "vite preview"

apps/demo/src/cunningham-tokens.css

@@ -1,4 +1,6 @@
 :root {
-	--c--colors--primary: purple;
+	--c--theme--colors--primary: purple;
-	--c--colors--secondary: #DA0000;
+	--c--theme--colors--primary-gradient: linear-gradient(90deg,#002d7f,#0069b3);
+	--c--theme--colors--secondary: #DA0000;
+	--c--components--button--border-radius: 30px;
 }

apps/demo/src/cunningham-tokens.ts

@@ -1 +1 @@
-export const tokens = {"colors":{"primary":"purple","secondary":"#DA0000"}};
+export const tokens = {"theme":{"colors":{"primary":"purple","primary-gradient":"linear-gradient(90deg,#002d7f,#0069b3)","secondary":"#DA0000"}},"components":{"button":{"border-radius":"30px"}}};

apps/demo/src/index.scss

@@ -6,7 +6,6 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-  color: var(--c--colors--primary);
   background-color: #242424;
   height: 100vh;
   display: flex;

apps/demo/src/main.tsx

@@ -8,8 +8,8 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <div className="center">
       <h1 className="test">Cunningham Demo.</h1>
-      <Button />
+      <Button>World best button.</Button>
-      <h3>Primary color is {tokens.colors.primary}</h3>
+      <h3>Primary color is {tokens.theme.colors.primary}</h3>
     </div>
   </React.StrictMode>
 );

apps/demo/tsconfig.eslint.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}