🔧(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/src/cunningham-tokens.css

@@ -1,4 +1,6 @@
 :root {
-	--c--colors--primary: purple;
-	--c--colors--secondary: #DA0000;
+	--c--theme--colors--primary: purple;
+	--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 />
-      <h3>Primary color is {tokens.colors.primary}</h3>
+      <Button>World best button.</Button>
+      <h3>Primary color is {tokens.theme.colors.primary}</h3>
     </div>
   </React.StrictMode>
 );