Skip to content

Commit

Permalink
css-in-js
Browse files Browse the repository at this point in the history
  • Loading branch information
fpbrault committed Dec 19, 2024
1 parent f6bc547 commit 55c98cb
Show file tree
Hide file tree
Showing 8 changed files with 81 additions and 67 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import {css} from 'lit';

export default css`
div {
transition: background-color 0.3s;
@apply rounded;
@apply text-white;
}
div:hover {
@apply bg-primary-dark;
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ import {
} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
import {initializeBindings} from '../../../utils/initialization-lit-utils.js';
import {TailwindLitElement} from '../../../utils/tailwind.element';
import {TailwindLitElement} from '../../../utils/tailwind.element.js';
import type {Bindings} from '../atomic-search-interface/interfaces.js';
import styles from './atomic-text.styles.tw.css';
import styles from './atomic-text.styles.tw.css.js';

type GenericRender = string | TemplateResult | undefined | null;

Expand Down
51 changes: 0 additions & 51 deletions packages/atomic/src/utils/coveo.tw.css

This file was deleted.

57 changes: 57 additions & 0 deletions packages/atomic/src/utils/coveo.tw.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/* eslint-disable @cspell/spellchecker */
import {css} from 'lit';

export default css`
* {
/* Primary colors */
--atomic-primary: #1372ec;
--atomic-primary-light: #399ffe;
--atomic-primary-dark: #1a50ad;
--atomic-on-primary: #ffffff;
--atomic-ring-primary: rgba(19, 114, 236, 0.5);
/* Neutral colors */
--atomic-neutral-dark: #626971;
--atomic-neutral-dim: #bfc4c8;
--atomic-neutral: #e5e8e8;
--atomic-neutral-light: #f6f7f9;
--atomic-neutral-lighter: #f2f2f2;
/* Semantic colors */
--atomic-background: #ffffff;
--atomic-on-background: #282829;
--atomic-success: #12a244;
--atomic-error: #ce3f00;
--atomic-visited: #752e9c;
--atomic-disabled: #c5cacf;
--atomic-success-background: #d4fcf0;
--atomic-error-background: #fcbdc0;
--atomic-primary-background: #edf6ff;
--atomic-inline-code: #cd2113;
/* Border radius */
--atomic-border-radius: 0.25rem;
--atomic-border-radius-md: 0.5rem;
--atomic-border-radius-lg: 0.75rem;
--atomic-border-radius-xl: 1rem;
/* Font */
--atomic-font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial,
sans-serif; /* Following https://systemfontstack.com/ */
--atomic-font-normal: 400;
--atomic-font-bold: 700;
/* Text size */
--atomic-text-base: 0.875rem; /* 14px */
--atomic-text-sm: 0.75rem; /* 12px */
--atomic-text-lg: 1rem; /* 16px */
--atomic-text-xl: 1.125rem; /* 18px */
--atomic-text-2xl: 1.5rem; /* 24px */
--atomic-line-height-ratio: 1.5;
/* Layout */
--atomic-layout-spacing-x: 1.5rem;
--atomic-layout-spacing-y: 1rem;
}
`;
4 changes: 2 additions & 2 deletions packages/atomic/src/utils/tailwind.element.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {CSSResultGroup, LitElement, unsafeCSS} from 'lit';
import theme from './coveo.tw.css';
import styles from './tailwind.global.tw.css';
import theme from './coveo.tw.css.js';
import styles from './tailwind.global.tw.css.js';

export class TailwindLitElement extends LitElement {
static styles: CSSResultGroup = [unsafeCSS(theme), unsafeCSS(styles)];
Expand Down
3 changes: 0 additions & 3 deletions packages/atomic/src/utils/tailwind.global.tw.css

This file was deleted.

7 changes: 7 additions & 0 deletions packages/atomic/src/utils/tailwind.global.tw.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {css} from 'lit';

export default css`
@tailwind base;
@tailwind components;
@tailwind utilities;
`;

0 comments on commit 55c98cb

Please sign in to comment.