feat: import css for web components from styles package

jtiala · Oct 30, 2023 · 0ac88fc · 0ac88fc
1 parent 102afa3
commit 0ac88fc
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/packages/web-components/src/components/Blockquote/Blockquote.ts b/packages/web-components/src/components/Blockquote/Blockquote.ts
@@ -1,5 +1,6 @@
+import style from "@themeless-ui/style/dist/blockquote.css?inline";
 import { cn } from "@themeless-ui/utils";
-import { html } from "lit";
+import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { TUIComponent } from "../../utils";
 
@@ -28,6 +29,8 @@ export class Blockquote extends TUIComponent {
   @property()
   source?: string;
 
+  static styles = unsafeCSS(style);
+
   override render() {
     const authorElement = this.author
       ? html`<span className="${authorClassName}">&mdash;${this.author}</span>`

diff --git a/packages/web-components/src/components/Heading/Heading.ts b/packages/web-components/src/components/Heading/Heading.ts
@@ -1,6 +1,8 @@
 /* eslint-disable lit/no-invalid-html */
 /* eslint-disable lit/binding-positions */
+import style from "@themeless-ui/style/dist/heading.css?inline";
 import { cn } from "@themeless-ui/utils";
+import { unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { html, unsafeStatic } from "lit/static-html.js";
 import { TUIComponent } from "../../utils";
@@ -17,6 +19,8 @@ export class Heading extends TUIComponent {
   @property({ type: Number })
   level!: HeadingLevel;
 
+  static styles = unsafeCSS(style);
+
   override render() {
     const tag = unsafeStatic(`h${this.level}`);
 

diff --git a/packages/web-components/src/components/Paragraph/Paragraph.ts b/packages/web-components/src/components/Paragraph/Paragraph.ts
@@ -1,12 +1,15 @@
+import style from "@themeless-ui/style/dist/paragraph.css?inline";
 import { cn } from "@themeless-ui/utils";
-import { html } from "lit";
+import { html, unsafeCSS } from "lit";
 import { customElement } from "lit/decorators.js";
 import { TUIComponent } from "../../utils";
 
 const className = cn("paragraph");
 
 @customElement("tui-paragraph")
 export class Paragraph extends TUIComponent {
+  static styles = unsafeCSS(style);
+
   override render() {
     return html`
       <p class="${className}" id="${this.id}" data-testid="${this.testId}">

diff --git a/packages/web-components/src/components/Text/Text.ts b/packages/web-components/src/components/Text/Text.ts
@@ -1,6 +1,8 @@
 /* eslint-disable lit/no-invalid-html */
 /* eslint-disable lit/binding-positions */
+import style from "@themeless-ui/style/dist/text.css?inline";
 import { cn } from "@themeless-ui/utils";
+import { unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { html, unsafeStatic } from "lit/static-html.js";
 import { TUIComponent } from "../../utils";
@@ -66,6 +68,8 @@ export class Text extends TUIComponent {
   @property()
   dateTime?: string;
 
+  static styles = unsafeCSS(style);
+
   override render() {
     const tag = unsafeStatic(this.type || "span");