From ce7b3b5859941534a140d236a525c6e25781f744 Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.ag@gmail.com>
Date: Tue, 20 Feb 2024 09:15:10 +0100
Subject: [PATCH] feat: use plugin styles

---
 apps/example-plugin/src/app/app.element.css  | 9 +++------
 apps/example-plugin/src/app/app.element.ts   | 7 ++++---
 libs/plugins-runtime/src/lib/plugin-modal.ts | 2 +-
 libs/plugins-styles/src/index.ts             | 1 -
 libs/plugins-styles/tsconfig.json            | 2 +-
 tsconfig.base.json                           | 2 +-
 6 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/apps/example-plugin/src/app/app.element.css b/apps/example-plugin/src/app/app.element.css
index 9e06afc..4300988 100644
--- a/apps/example-plugin/src/app/app.element.css
+++ b/apps/example-plugin/src/app/app.element.css
@@ -52,14 +52,11 @@ svg {
   width: 100%;
 }
 
-button {
-  padding: 0.5rem;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-bottom: 10px;
+p {
+  margin-bottom: var(--spacing-12);
 }
 
 h1 {
   font-size: 20px;
-  margin-bottom: 10px;
+  margin-bottom: var(--spacing-12);
 }
diff --git a/apps/example-plugin/src/app/app.element.ts b/apps/example-plugin/src/app/app.element.ts
index 2312190..ccecf30 100644
--- a/apps/example-plugin/src/app/app.element.ts
+++ b/apps/example-plugin/src/app/app.element.ts
@@ -1,3 +1,4 @@
+import 'plugins-styles/lib/styles.css';
 import './app.element.css';
 
 export class AppElement extends HTMLElement {
@@ -24,17 +25,17 @@ export class AppElement extends HTMLElement {
     });
 
     this.innerHTML = `
-    <div class="wrapper">
+    <div class="wrapper" data-theme="light">
       <h1>Test area</h1>
 
       <p>Current project name: <span id="project-name">Unknown</span></p>
 
       <p>
-        <button type="button" class="act-ping-pong">Ping Pong message</button>
+        <button type="button" data-appearance="primary" class="act-ping-pong">Ping Pong message</button>
       </p>
 
       <p>
-        <button type="button" class="act-close-plugin">Close plugin</button>
+        <button type="button" data-appearance="primary" data-variant="destructive" class="act-close-plugin">Close plugin</button>
       </p>
     </div>
       `;
diff --git a/libs/plugins-runtime/src/lib/plugin-modal.ts b/libs/plugins-runtime/src/lib/plugin-modal.ts
index 34f0c29..19bbc23 100644
--- a/libs/plugins-runtime/src/lib/plugin-modal.ts
+++ b/libs/plugins-runtime/src/lib/plugin-modal.ts
@@ -87,7 +87,7 @@ export class PluginModalElement extends HTMLElement {
         }
 
         h1 {
-          color: blue;
+          color: #000;
           font-family: Arial, sans-serif;
         }
 
diff --git a/libs/plugins-styles/src/index.ts b/libs/plugins-styles/src/index.ts
index b23d171..e69de29 100644
--- a/libs/plugins-styles/src/index.ts
+++ b/libs/plugins-styles/src/index.ts
@@ -1 +0,0 @@
-export * from './lib/plugins-styles';
diff --git a/libs/plugins-styles/tsconfig.json b/libs/plugins-styles/tsconfig.json
index 451a604..f5b8565 100644
--- a/libs/plugins-styles/tsconfig.json
+++ b/libs/plugins-styles/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3ca0b7e..d99fd76 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -16,7 +16,7 @@
     "baseUrl": ".",
     "paths": {
       "plugins-runtime": ["libs/plugins-runtime/src/index.ts"],
-      "plugins-styles": ["libs/plugins-styles/src/index.ts"]
+      "plugins-styles/*": ["libs/plugins-styles/src/*"]
     }
   },
   "exclude": ["node_modules", "tmp"]