chore: clean up abstracts and colors css

packages/ui-stencil/package.json

@@ -1,46 +1,47 @@
 {
-  "name": "ui-stencil",
-  "version": "0.0.1",
-  "description": "Stencil Component Starter",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ionic-team/stencil-component-starter.git"
-  },
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "clean": "rm -rf node_modules .turbo dist .stencil loader www",
-    "dev": "stencil build --watch",
-    "generate": "stencil generate",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll"
-  },
-  "types": "dist/types/index.d.ts",
-  "dependencies": {
-    "@stencil/core": "^4.19.0",
-    "@stencil/sass": "^3.0.12",
-    "@stencil/store": "^2.0.16"
-  },
-  "devDependencies": {
-    "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
-    "@stencil/vue-output-target": "^0.8.8",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "puppeteer": "^22.12.1"
-  },
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "unpkg": "dist/ui-stencil/ui-stencil.esm.js"
+      "name": "ui-stencil",
+      "version": "0.0.1",
+      "description": "Stencil Component Starter",
+      "license": "MIT",
+      "repository": {
+            "type": "git",
+            "url": "https://github.com/ionic-team/stencil-component-starter.git"
+      },
+      "main": "dist/index.cjs.js",
+      "module": "dist/index.js",
+      "files": [
+            "dist/",
+            "loader/"
+      ],
+      "scripts": {
+            "build": "stencil build --docs",
+            "clean": "rm -rf node_modules .turbo dist .stencil loader www",
+            "dev": "stencil build --watch",
+            "generate": "stencil generate",
+            "start": "stencil build --dev --watch --serve",
+            "test": "stencil test --spec --e2e",
+            "test.watch": "stencil test --spec --e2e --watchAll"
+      },
+      "types": "dist/types/index.d.ts",
+      "dependencies": {
+            "@stencil/core": "^4.19.0",
+            "@stencil/sass": "^3.0.12",
+            "@stencil/store": "^2.0.16"
+      },
+      "devDependencies": {
+            "@stencil-community/postcss": "^2.2.0",
+            "@stencil/angular-output-target": "^0.8.4",
+            "@stencil/react-output-target": "^0.5.3",
+            "@stencil/vue-output-target": "^0.8.8",
+            "@types/jest": "^29.5.12",
+            "@types/node": "^20.14.9",
+            "jest": "^29.7.0",
+            "jest-cli": "^29.7.0",
+            "puppeteer": "^22.12.1"
+      },
+      "collection": "dist/collection/collection-manifest.json",
+      "collection:main": "dist/collection/index.js",
+      "es2015": "dist/esm/index.mjs",
+      "es2017": "dist/esm/index.mjs",
+      "unpkg": "dist/ui-stencil/ui-stencil.esm.js"
 }

packages/ui-stencil/src/components/search-box/search-box.scss

@@ -2,5 +2,5 @@
 }
 
 .btn {
-  color: var(--primary-color, $green400)
-} 
+  color: var(--primary-color, red);
+}

packages/ui-stencil/src/components/search-box/search-box.tsx

@@ -1,4 +1,5 @@
 import { Component, Host, Prop, h } from '@stencil/core'
+import cssCustomProperties from '../../config/colors';
 
 @Component({
   tag: 'search-box',
@@ -10,11 +11,10 @@ export class SearchBox {
   @Prop() color: 'dark' | 'light' | 'system'
 
   render() {
-    console.log(this.theme)
-
+    console.log('***vars 1***', cssCustomProperties, typeof cssCustomProperties)
     return (
       <Host>
-        {/* <style>{`:host { --primary-color: ${this.theme?.colors?.light?.primaryColor}; }`}</style> */}
+        <style>{`:host { --primary-color: ${this.theme?.colors?.light?.primaryColor}; }`}</style>
 
         <div>This is the searchbox</div>
 

packages/ui-stencil/src/config/colors.ts

@@ -0,0 +1,64 @@
+// TODO: this should come from the sass file as unique source of truth, importing the sass file (colors.scss) directly
+export const primitive= {
+  gray50: '#FBFBFB',
+  gray100: '#EFEFEF',
+  gray200: '#DADADA',
+  gray300: '#C6C6C6',
+  gray400: '#AFAFB1',
+  gray500: '#99989D',
+  gray600: '#838289',
+  gray700: '#2E2E2E',
+  gray800: '#212121',
+  gray900: '#151515',
+  gray950: '#050505',
+  purple500: '#8152EE',
+  purple700: '#6A4BB2'
+}
+
+const semantic = {
+  light: {
+    // TODO: placheholder primitives to be replaced
+    '--text-color-primary': primitive.gray50,
+    '--text-color-secondary': primitive.gray200,
+    '--text-color-teriary': primitive.gray600,
+    '--text-color-inactive': primitive.gray500,
+
+    '--background-color-primary': primitive.gray950,
+    '--background-color-secondary': primitive.gray900,
+    '--background-color-tertiary': primitive.gray800,
+
+    '--border-color-primary': primitive.gray700,
+    '--border-color-secondary': primitive.gray900,
+    '--border-color-inactive': primitive.gray400,
+
+    '--icon-color-primary': primitive.gray50,
+    '--icon-color-secondary': primitive.gray200,
+    '--icon-color-tertiary': primitive.gray600,
+    '--icon-color-inactive': primitive.gray500,
+    '--icon-color-accent': primitive.purple500,
+  },
+  dark: {
+    '--text-color-primary': primitive.gray50,
+    '--text-color-secondary': primitive.gray200,
+    '--text-color-teriary': primitive.gray600,
+    '--text-color-inactive': primitive.gray500,
+
+    '--background-color-primary': primitive.gray950,
+    '--background-color-secondary': primitive.gray900,
+    '--background-color-tertiary': primitive.gray800,
+
+    '--border-color-primary': primitive.gray700,
+    '--border-color-secondary': primitive.gray900,
+    '--border-color-inactive': primitive.gray400,
+
+    '--icon-color-primary': primitive.gray50,
+    '--icon-color-secondary': primitive.gray200,
+    '--icon-color-tertiary': primitive.gray600,
+    '--icon-color-inactive': primitive.gray500,
+    // TODO: check the primitive to use for accent
+    '--icon-color-accent': primitive.purple500,
+  },
+  system: {}
+}
+
+export default semantic

packages/ui-stencil/src/config/theme.ts

@@ -0,0 +1,9 @@
+import colors from './colors'
+import typography from './typography'
+
+const theme = {
+  typography,
+  colors
+}
+
+export default theme

packages/ui-stencil/src/config/typography.ts

@@ -0,0 +1,5 @@
+const typography = {
+  '--font-primary': '"Instrument Sans", sans-serif',
+}
+
+export default typography