feat: use plugin styles

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);
 }

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>
       `;

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;
         }
 

libs/plugins-styles/src/index.ts

@@ -1 +0,0 @@
-export * from './lib/plugins-styles';

libs/plugins-styles/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "module": "commonjs",
     "forceConsistentCasingInFileNames": true,

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"]