#16 initialize branding design system configurations

packages/gui/package.json

@@ -14,6 +14,7 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
+    "@tea/ui": "workspace:*",
     "@playwright/test": "1.25.0",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/adapter-static": "1.0.0-next.48",
@@ -40,5 +41,10 @@
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
     "buffer": "^6.0.3"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@tea/ui"
+    ]
   }
 }

packages/gui/src/app.css

@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+html {
+  background-color: #1a1a1a;
+  color: #fff;
+}
+
+@font-face {
+    font-family: "pp-neue-machina";
+    src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
+}
+
+@font-face {
+    font-family: "sono";
+    src: url("../static/fonts/Sono-Light.woff2");
+}
+
+@layer base {
+    html {
+      font-family: sono, sans-serif;
+    }
+  }

packages/gui/src/routes/+page.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <a href="/others">Go to install package</a>
-<Button  on:click={loadPackages} label="Load Packages"></Button>
+<Button primary={true}  on:click={loadPackages} label="Load Packages"></Button>
 <ul>
     {#each packages as p}
         <li>{p.full_name}</li>

packages/gui/tailwind.config.cjs

@@ -1,11 +1,10 @@
 /** @type {import('tailwindcss').Config} */
+const { theme } = require('@tea/ui/tailwind.config.cjs')
 module.exports = {
   content: [
     './src/**/*.{html,svelte,ts,js}',
     '../ui/src/**/*.{html,svelte,ts,js}'
   ],
-  theme: {
-    extend: {},
-  },
+  theme,
   plugins: [],
 }

packages/ui/package.json

@@ -13,6 +13,11 @@
     "dev": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
+  "files": [
+    "src/**/*",
+    "tsconfig.json",
+    "tailwind.config.cjs"
+  ],
   "devDependencies": {
     "@playwright/test": "1.25.0",
     "@storybook/addon-essentials": "^7.0.0-alpha.51",

packages/ui/src/Button/Button.svelte

@@ -4,7 +4,7 @@
   /**
    * Is this the principal call to action on the page?
    */
-  export let primary = false;
+  export let primary:boolean = false;
 
   /**
    * What background color to use
@@ -19,7 +19,7 @@
    */
   export let label:string = '';
 
-  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  $: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
 
   $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 

packages/ui/src/Button/button.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "../app.css";
 
 .storybook-button {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -13,7 +11,6 @@
 }
 .storybook-button--primary {
   color: white;
-  background-color: #1ea7fd;
 }
 .storybook-button--secondary {
   color: #333;

packages/ui/src/Header/header.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "../app.css";
 
 .wrapper {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

packages/ui/src/Page/page.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "../app.css";
 
 section {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

packages/ui/src/app.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+
+@font-face {
+    font-family: "pp-neue-machina";
+    src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
+}
+
+@font-face {
+    font-family: "sono";
+    src: url("../static/fonts/Sono-Light.woff2");
+}
+  

packages/ui/tailwind.config.cjs

@@ -1,8 +1,23 @@
 /** @type {import('tailwindcss').Config} */
+const primary = '#00ffd0';
+const black = '#1a1a1a';
+const white = '#fff';
+
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {},
+    colors: {
+      primary,
+      green: primary,
+      black,
+      white,
+    },
+    extend: {
+      fontFamily: {
+        sono: ['sono', 'sans-serif'],
+        machina: ['pp-neue-machina', 'sans-serif']
+      }
+    },
   },
   plugins: [],
 }