diff --git a/docs/emotion-to-linaria-migration-plan.md b/docs/emotion-to-linaria-migration-plan.md new file mode 100644 index 0000000000..d00a1844fa --- /dev/null +++ b/docs/emotion-to-linaria-migration-plan.md @@ -0,0 +1,381 @@ +# Emotion → Linaria Migration Plan: twenty-front + +## Overview + +Migrate all Emotion (`@emotion/styled`, `@emotion/react`) usages in +`packages/twenty-front/src` to Linaria (`@linaria/react`, `@linaria/core`), +following the same patterns already established in the `twenty-ui` package. + +Linaria is a **zero-runtime** CSS-in-JS library. Styles are extracted at +build time by [wyw-in-js](https://wyw-in-js.dev/) (the Vite plugin is +`@wyw-in-js/vite`, already configured in `twenty-front/vite.config.ts`). +This means every expression inside a `styled` or `css` template literal +must be statically evaluable at build time — no runtime theme objects, +no closures over component state, no side-effects. + +**Total files to migrate: ~998** + +| Category | Files | Description | +|---|---|---| +| styled-only | 694 | Import `@emotion/styled` but not `useTheme` | +| styled + useTheme | 224 | Import both `@emotion/styled` and `useTheme` | +| useTheme-only | 79 | Import `useTheme` but not `@emotion/styled` | +| css / Global only | 1 | Import `css` or `Global` from `@emotion/react` only | + +## Theme Architecture + +Two build-time utilities produce the theme system: + +- **`buildThemeReferencingRootCssVariables`** — walks the theme object and + builds a nested mirror where every leaf is a `var(--t-xxx)` string + (evaluated at build time by wyw-in-js) +- **`prepareThemeForRootCssVariableInjection`** — walks the runtime theme + and collects flat `[--css-variable-name, value]` pairs, injected onto + `document.documentElement` by `ThemeCssVariableInjectorEffect` + +`themeCssVariables` is the build-time object; every leaf resolves to a CSS +`var()` reference. It is safe to use inside `styled` and `css` templates +because wyw-in-js can evaluate it statically. + +## Migration Patterns + +### 1. `styled` import + +```diff +- import styled from '@emotion/styled'; ++ import { styled } from '@linaria/react'; +``` + +### 2. Theme access in styled components + +Replace Emotion's `({ theme }) =>` prop-function pattern with static +`themeCssVariables` references: + +```diff ++ import { themeCssVariables } from 'twenty-ui/theme'; + + const StyledTitle = styled.span` +- color: ${({ theme }) => theme.font.color.primary}; +- font-size: ${({ theme }) => theme.font.size.lg}; ++ color: ${themeCssVariables.font.color.primary}; ++ font-size: ${themeCssVariables.font.size.lg}; + `; +``` + +### 3. Spacing + +`theme.spacing(N)` is a function; in Linaria it becomes an indexed lookup: + +```diff +- margin-top: ${({ theme }) => theme.spacing(3)}; ++ margin-top: ${themeCssVariables.spacing[3]}; +``` + +For multi-arg spacing like `theme.spacing(2, 4)` → `"8px 16px"`: + +```diff +- padding: ${({ theme }) => theme.spacing(2, 4)}; ++ padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[4]}; +``` + +The spacing scale covers integers 0–32 plus `0.5` and `1.5`. Any other +fractional values (`0.25`, `0.75`, `1.25`, `2.5`, `3.5`) must be replaced +with literal pixel values (e.g. `theme.spacing(2.5)` → `10px`). + +### 4. `useTheme` → `useContext(ThemeContext)` + +For runtime theme access (icon sizes, animation durations, conditional logic +outside of styled components): + +```diff +- import { useTheme } from '@emotion/react'; ++ import { useContext } from 'react'; ++ import { ThemeContext } from 'twenty-ui/theme'; + + const MyComponent = () => { +- const theme = useTheme(); ++ const { theme } = useContext(ThemeContext); + return ; + }; +``` + +### 5. `css` template literal + +Linaria's `css` (from `@linaria/core`) returns a **class name string**, not +a serialized style object like Emotion's `css`. This has two consequences: + +**Standalone usage** — apply via `className`, not the `css` prop: + +```diff +- import { css } from '@emotion/react'; ++ import { css } from '@linaria/core'; + + const myClass = css` + text-decoration: none; + `; + +- ++ +``` + +**Inside `styled` templates** — do NOT nest `css` tags. Linaria's `css` +returns a class name, not raw CSS text, so interpolating it inside `styled` +produces broken output. Use plain strings instead: + +```diff + // WRONG — css`` returns a class name, not CSS text + ${({ handle }) => + handle === 'left' +- ? css`left: ${themeCssVariables.spacing[1]};` +- : css`right: ${themeCssVariables.spacing[1]};`} ++ ? `left: ${themeCssVariables.spacing[1]};` ++ : `right: ${themeCssVariables.spacing[1]};`} +``` + +### 6. Interpolation return types + +wyw-in-js requires prop interpolation functions to return `string | number`. +They must **never** return `false`, `undefined`, or `null`. Replace +short-circuit `&&` with ternary expressions: + +```diff + // WRONG — returns false when condition is false +- ${({ isActive }) => isActive && `background: ${themeCssVariables.color.blue};`} + // CORRECT ++ ${({ isActive }) => isActive ? `background: ${themeCssVariables.color.blue};` : ''} +``` + +### 7. Block interpolations (multi-declaration returns) + +Linaria wraps each interpolation result in a single CSS custom property +(`var(--xxx)`). An interpolation that returns **multiple CSS declarations** +produces invalid CSS. Split into one interpolation per property: + +```diff + // WRONG — single interpolation returning multiple declarations +- ${({ divider, theme }) => { +- const border = `1px solid ${theme.border.color.light}`; +- return divider === 'left' ? `border-left: ${border}` : `border-right: ${border}`; +- }} + + // CORRECT — one interpolation per property ++ border-left: ${({ divider }) => ++ divider === 'left' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'}; ++ border-right: ${({ divider }) => ++ divider === 'right' ? `1px solid ${themeCssVariables.border.color.light}` : 'none'}; +``` + +### 8. CSS var + unit concatenation + +CSS custom properties can't be concatenated with unit suffixes directly +(`var(--x)px` is invalid). Use `calc()` to attach units: + +```diff +- transition: background ${themeCssVariables.animation.duration.instant}s ease; ++ transition: background calc(${themeCssVariables.animation.duration.instant} * 1s) ease; +``` + +### 9. `styled(Component)` requires `className` + +Linaria's `styled(Component)` works by passing a generated `className` to +the wrapped component. The component **must** accept and forward a +`className` prop — otherwise the styles are silently lost. If the component +doesn't support it, either add `className` support or use a wrapper div. + +Linaria also does **not** support Emotion's `shouldForwardProp` option. +Custom props on HTML elements are automatically filtered by Linaria's +runtime (via `@emotion/is-prop-valid`). For custom components, all props are +forwarded — ensure the wrapped component ignores unknown props gracefully. + +### 10. `type Theme` → `type ThemeType` + +```diff +- import { type Theme } from '@emotion/react'; ++ import { type ThemeType } from 'twenty-ui/theme'; +``` + +### 11. Framer Motion integration + +Linaria doesn't support `styled(motion.div)` — wrapping a motion element +with `styled()` causes the component body to be stripped at build time by +wyw-in-js. Define the styled component first, then wrap with +`motion.create()`: + +```tsx +const StyledBarBase = styled.div` + background-color: ${themeCssVariables.font.color.primary}; + height: 100%; +`; + +const StyledBar = motion.create(StyledBarBase); +``` + +### 12. Dynamic styles via CSS variables + +When a component needs to compute styles from multiple props with complex +branching logic (e.g. combining `variant`, `accent`, `disabled`, `focus`), +Linaria's prop interpolations become unwieldy. Use a `computeDynamicStyles` +helper that returns a `CSSProperties` object injected via `style={}`, +referenced from the static CSS with `var()`: + +```tsx +const StyledButton = styled.button` + background: var(--btn-bg); + border-color: var(--btn-border-color); + &:hover { background: var(--btn-hover-bg); } +`; + +const dynamicStyles = useMemo(() => { + const s = computeButtonDynamicStyles(variant, accent, ...); + return { + '--btn-bg': s.background, + '--btn-hover-bg': s.hoverBackground, + } as CSSProperties; +}, [variant, accent, ...]); + +return ; +``` + +### 13. `Global` component + +Replace Emotion's `` with standard CSS or the +`ThemeCssVariableInjectorEffect` pattern from twenty-ui. + +### 14. `ThemeProvider` + +The `BaseThemeProvider` already wraps children with both Emotion's +`ThemeProvider` and Linaria's `ThemeContextProvider`. Once all Emotion usages +are gone, the Emotion `ThemeProvider` wrapper can be removed. + +--- + +## PR Breakdown + +Files are grouped to keep each PR around ~100 files with consistent review +surface. We start with the simplest, lowest-risk modules. + +### PR 1 (~97 files) — Small standalone modules + +Low-risk modules with mostly simple `styled`-only patterns. + +| Module | Files | +|---|---| +| spreadsheet-import | 28 | +| billing | 10 | +| views | 14 | +| navigation-menu-item | 14 | +| blocknote-editor | 7 | +| advanced-text-editor | 7 | +| favorites | 7 | +| navigation | 4 | +| information-banner | 3 | +| sign-in-background-mock | 3 | + +### PR 2 (~100 files) — Auth, tiny modules, loading, testing, pages (part 1) + +| Module | Files | +|---|---| +| auth | 19 | +| action-menu | 3 | +| object-metadata | 3 | +| onboarding | 2 | +| workspace | 2 | +| file | 2 | +| error-handler | 2 | +| front-components | 1 | +| geo-map | 1 | +| hooks | 1 | +| loading | 5 | +| testing | 5 | +| pages (first ~55 files) | ~55 | + +### PR 3 (~97 files) — Pages (remaining) + activities + AI + +| Module | Files | +|---|---| +| pages (remaining ~16 files) | ~16 | +| activities | 53 | +| ai | 28 | + +### PR 4 (~100 files) — Command-menu + workflow (part 1) + +| Module | Files | +|---|---| +| command-menu | 53 | +| workflow (first ~47 files) | ~47 | + +### PR 5 (~115 files) — Workflow (remaining) + page-layout + +| Module | Files | +|---|---| +| workflow (remaining ~32 files) | ~32 | +| page-layout | 83 | + +### PR 6 (~100 files) — UI module (part 1) + +| Module | Files | +|---|---| +| ui (first ~100 files) | ~100 | + +### PR 7 (~85 files) — UI module (remaining) + object-record (start) + +| Module | Files | +|---|---| +| ui (remaining ~23 files) | ~23 | +| object-record (first ~62 files) | ~62 | + +### PR 8 (~100 files) — Object-record (continued) + +| Module | Files | +|---|---| +| object-record (next ~100 files) | ~100 | + +### PR 9 (~100 files) — Settings (part 1) + +| Module | Files | +|---|---| +| settings (first ~100 files) | ~100 | + +### PR 10 (~102 files) — Settings (part 2) + final cleanup + +| Module | Files | +|---|---| +| settings (remaining ~102 files) | ~102 | +| css/Global-only file | 1 | + +### Post-migration PR — Remove Emotion + +Once all PRs are merged: + +- Remove `ThemeProvider` from `@emotion/react` in `BaseThemeProvider` +- Remove `@emotion/styled` and `@emotion/react` dependencies +- Remove `@styled/typescript-styled-plugin` from tsconfig +- Clean up any remaining Emotion-related configuration + +--- + +## Risk Assessment + +| Risk | Mitigation | +|---|---| +| wyw-in-js evaluates at build time; dynamic expressions may fail | Use `themeCssVariables` for static theme values; pass dynamic values as component props or via `style={}` CSS variables | +| `theme.spacing(N)` function → `themeCssVariables.spacing[N]` index | Pre-computed for integers 0–32 plus 0.5 and 1.5; other fractional values → literal pixel values | +| `useTheme` used for runtime logic (not just styles) | Replace with `useContext(ThemeContext)`, destructure `{ theme }` | +| Multi-arg `theme.spacing(a, b, c)` | Split into individual `themeCssVariables.spacing[N]` references | +| `css` tag inside `styled` templates | Linaria `css` returns class name, not CSS text; use plain strings inside `styled` | +| Interpolation returns `false` / `undefined` | wyw-in-js requires `string \| number`; use ternary `? : ''` instead of `&&` | +| Block interpolations (multiple declarations) | Split into one interpolation per CSS property | +| `var(--x)px` concatenation | Use `calc(var(--x) * 1px)` | +| `styled(motion.div)` stripped by wyw-in-js | Use `motion.create(StyledBase)` pattern | +| `styled(Component)` with no `className` prop | Add `className` support to wrapped component or use wrapper div | +| Complex multi-prop style branching | Use `computeDynamicStyles` + `style={}` + `var()` references | + +--- + +## Validation Checklist (per PR) + +- [ ] `npx nx lint:diff-with-main twenty-front` passes +- [ ] `npx nx typecheck twenty-front` passes +- [ ] `npx nx test twenty-front` passes +- [ ] Visual spot-check of affected components in the app +- [ ] No remaining `@emotion/styled` or `@emotion/react` imports in migrated files diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx index f2bfe2259a..b472124ac1 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx @@ -2,8 +2,9 @@ import { ImageBubbleMenu } from '@/advanced-text-editor/components/ImageBubbleMe import { LinkBubbleMenu } from '@/advanced-text-editor/components/LinkBubbleMenu'; import { TextBubbleMenu } from '@/advanced-text-editor/components/TextBubbleMenu'; import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { EditorContent, type Editor } from '@tiptap/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledEditorContainer = styled.div<{ readonly?: boolean; @@ -24,14 +25,16 @@ const StyledEditorContainer = styled.div<{ } .tiptap { - padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`}; + padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}; box-sizing: border-box; height: 100%; - color: ${({ theme, readonly }) => - readonly ? theme.font.color.light : theme.font.color.primary}; - font-family: ${({ theme }) => theme.font.family}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.regular}; + color: ${({ readonly }) => + readonly + ? themeCssVariables.font.color.light + : themeCssVariables.font.color.primary}; + font-family: ${themeCssVariables.font.family}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.regular}; border: none !important; p.is-editor-empty:first-of-type::before { @@ -48,10 +51,10 @@ const StyledEditorContainer = styled.div<{ } .variable-tag { - background-color: ${({ theme }) => theme.color.blue3}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${({ theme }) => theme.color.blue}; - padding: ${({ theme }) => theme.spacing(1)}; + background-color: ${themeCssVariables.color.blue3}; + border-radius: ${themeCssVariables.border.radius.sm}; + color: ${themeCssVariables.color.blue}; + padding: ${themeCssVariables.spacing[1]}; } h1 { @@ -67,7 +70,7 @@ const StyledEditorContainer = styled.div<{ } li { - margin-bottom: ${({ theme }) => theme.spacing(2)}; + margin-bottom: ${themeCssVariables.spacing[2]}; line-height: 1.5; } } diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx index 4e0c06aab5..062bc3958a 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx @@ -1,7 +1,8 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import React from 'react'; import type { IconComponent } from 'twenty-ui/display'; import { FloatingIconButton } from 'twenty-ui/input'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type BubbleMenuIconButtonProps = { className?: string; @@ -14,9 +15,9 @@ type BubbleMenuIconButtonProps = { const StyledBubbleMenuIconButton = styled(FloatingIconButton)` border: none; - border-radius: ${({ theme }) => theme.spacing(1.5)}; - width: ${({ theme }) => theme.spacing(6)}; - height: ${({ theme }) => theme.spacing(6)}; + border-radius: ${themeCssVariables.spacing[1.5]}; + width: ${themeCssVariables.spacing[6]}; + height: ${themeCssVariables.spacing[6]}; `; export const BubbleMenuIconButton = ({ diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/TextBubbleMenu.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/TextBubbleMenu.tsx index 3aedcb9220..e7e87cbe71 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/TextBubbleMenu.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/TextBubbleMenu.tsx @@ -3,7 +3,7 @@ import { EditLinkPopover } from '@/advanced-text-editor/components/EditLinkPopov import { TurnIntoBlockDropdown } from '@/advanced-text-editor/components/TurnIntoBlockDropdown'; import { useTextBubbleState } from '@/advanced-text-editor/hooks/useTextBubbleState'; import { isTextSelected } from '@/advanced-text-editor/utils/isTextSelected'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { type Editor } from '@tiptap/core'; import { BubbleMenu } from '@tiptap/react/menus'; import { @@ -14,13 +14,15 @@ import { IconStrikethrough, IconUnderline, } from 'twenty-ui/display'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; export const StyledBubbleMenuContainer = styled.div` backdrop-filter: blur(20px); - background-color: ${({ theme }) => theme.background.primary}; - border-radius: ${({ theme }) => theme.border.radius.md}; - box-shadow: ${({ theme }) => - `0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`}; + background-color: ${themeCssVariables.background.primary}; + border-radius: ${themeCssVariables.border.radius.md}; + box-shadow: + 0px 2px 4px 0px ${themeCssVariables.background.transparent.light}, + 0px 0px 4px 0px ${themeCssVariables.background.transparent.medium}; display: inline-flex; gap: 2px; padding: 2px; diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx index bde42a1484..eb1213e555 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx @@ -3,32 +3,33 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { type Editor } from '@tiptap/react'; -import { useId } from 'react'; +import { useContext, useId } from 'react'; import { IconPilcrow } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledMenuItem = styled.button` align-items: center; background: none; border: none; - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${themeCssVariables.font.color.tertiary}; cursor: pointer; display: flex; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.regular}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.regular}; gap: 4px; - height: ${({ theme }) => theme.spacing(6)}; + height: ${themeCssVariables.spacing[6]}; padding: 0; width: 100%; - padding: 0 ${({ theme }) => theme.spacing(1.5)}; - border-radius: ${({ theme }) => theme.spacing(1.5)}; + padding: 0 ${themeCssVariables.spacing[1.5]}; + border-radius: ${themeCssVariables.spacing[1.5]}; :hover { - background: ${({ theme }) => theme.background.transparent.medium}; + background: ${themeCssVariables.background.transparent.medium}; } :focus { @@ -43,7 +44,7 @@ type TurnIntoBlockDropdownProps = { export const TurnIntoBlockDropdown = ({ editor, }: TurnIntoBlockDropdownProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const instanceId = useId(); const dropdownId = `turn-into-block-dropdown-${instanceId}`; diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx index 02294e3bc9..e2d4eb2564 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx @@ -1,11 +1,13 @@ import { getFileType } from '@/activities/files/utils/getFileType'; import { useFileCategoryColors } from '@/file/hooks/useFileCategoryColors'; import { IconMapping } from '@/file/utils/fileIconMappings'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { type WorkflowAttachment } from 'twenty-shared/workflow'; import { AvatarOrIcon } from 'twenty-ui/components'; import { IconX } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type WorkflowAttachmentChipProps = { file: WorkflowAttachment; @@ -15,20 +17,20 @@ type WorkflowAttachmentChipProps = { const StyledChip = styled.div<{ deletable: boolean }>` align-items: center; - background-color: ${({ theme }) => theme.background.transparent.light}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - column-gap: ${({ theme }) => theme.spacing(1)}; + background-color: ${themeCssVariables.background.transparent.light}; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-radius: ${themeCssVariables.border.radius.sm}; + column-gap: ${themeCssVariables.spacing[1]}; display: inline-flex; flex-direction: row; flex-shrink: 0; max-width: 140px; - padding-left: ${({ theme }) => theme.spacing(1)}; + padding-left: ${themeCssVariables.spacing[1]}; `; const StyledLabel = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.sm}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.sm}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -43,18 +45,18 @@ const StyledDelete = styled.button` margin: 0; padding: 0; cursor: pointer; - font-size: ${({ theme }) => theme.font.size.sm}; + font-size: ${themeCssVariables.font.size.sm}; user-select: none; flex-shrink: 0; background: none; border: none; - color: ${({ theme }) => theme.font.color.tertiary}; - border-top-right-radius: ${({ theme }) => theme.border.radius.sm}; - border-bottom-right-radius: ${({ theme }) => theme.border.radius.sm}; + color: ${themeCssVariables.font.color.tertiary}; + border-top-right-radius: ${themeCssVariables.border.radius.sm}; + border-bottom-right-radius: ${themeCssVariables.border.radius.sm}; &:hover { - background-color: ${({ theme }) => theme.background.transparent.medium}; - color: ${({ theme }) => theme.font.color.primary}; + background-color: ${themeCssVariables.background.transparent.medium}; + color: ${themeCssVariables.font.color.primary}; } `; @@ -64,7 +66,7 @@ export const WorkflowAttachmentChip = ({ readonly = false, }: WorkflowAttachmentChipProps) => { const iconColors = useFileCategoryColors(); - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx index a1e75ad70e..ce68b31bef 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx @@ -2,13 +2,14 @@ import { WorkflowAttachmentChip } from '@/advanced-text-editor/components/Workfl import { useUploadWorkflowFile } from '@/advanced-text-editor/hooks/useUploadWorkflowFile'; import { InputLabel } from '@/ui/input/components/InputLabel'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; -import { type ChangeEvent, useRef } from 'react'; +import { type ChangeEvent, useContext, useRef } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { type WorkflowAttachment } from 'twenty-shared/workflow'; import { IconUpload } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type WorkflowSendEmailAttachmentsProps = { files: WorkflowAttachment[]; @@ -26,21 +27,21 @@ const StyledFileInput = styled.input` `; const StyledUploadArea = styled.div<{ hasFiles: boolean }>` - background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + background-color: ${themeCssVariables.background.transparent.lighter}; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-radius: ${themeCssVariables.border.radius.sm}; display: flex; flex-direction: column; min-height: ${({ hasFiles }) => (hasFiles ? 'auto' : '24px')}; justify-content: center; - padding-top: ${({ theme }) => theme.spacing(1)}; - padding-bottom: ${({ theme }) => theme.spacing(1)}; - padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(2)}; + padding-top: ${themeCssVariables.spacing[1]}; + padding-bottom: ${themeCssVariables.spacing[1]}; + padding-left: ${themeCssVariables.spacing[2]}; + padding-right: ${themeCssVariables.spacing[2]}; &:hover { - background-color: ${({ theme }) => theme.background.transparent.light}; - border-color: ${({ theme }) => theme.border.color.strong}; + background-color: ${themeCssVariables.background.transparent.light}; + border-color: ${themeCssVariables.border.color.strong}; } `; @@ -48,17 +49,17 @@ const StyledChipsContainer = styled.div` display: flex; flex-direction: row; flex-wrap: wrap; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; `; const StyledUploadAreaLabel = styled.div` justify-content: center; - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${themeCssVariables.font.color.tertiary}; display: flex; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - color: ${({ theme }) => theme.font.color.secondary}; - gap: ${({ theme }) => theme.spacing(1)}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; + color: ${themeCssVariables.font.color.secondary}; + gap: ${themeCssVariables.spacing[1]}; `; export const WorkflowSendEmailAttachments = ({ @@ -69,7 +70,7 @@ export const WorkflowSendEmailAttachments = ({ const fileInputRef = useRef(null); const { uploadWorkflowFile } = useUploadWorkflowFile(); const { t } = useLingui(); - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const handleAddFileClick = (e: React.MouseEvent) => { const target = e.target as HTMLElement; diff --git a/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx b/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx index fd57cdd153..12cec7ff09 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/extensions/resizable-image/ResizableImageView.tsx @@ -1,29 +1,26 @@ -import { css } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { type NodeViewProps, NodeViewWrapper } from '@tiptap/react'; import React, { useCallback, useRef, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const IMAGE_MIN_WIDTH = 32; const IMAGE_MAX_WIDTH = 600; -const StyledNodeViewWrapper = styled(NodeViewWrapper)` +const StyledNodeViewWrapperContainer = styled.div<{ + align?: string; +}>` height: 100%; ${({ align }) => { switch (align) { case 'left': - return css` - margin-left: 0; - `; + return 'margin-left: 0;'; case 'right': - return css` - margin-right: 0; - `; + return 'margin-right: 0;'; case 'center': - return css` - margin-left: auto; - margin-right: auto; - `; + return 'margin-left: auto; margin-right: auto;'; + default: + return ''; } }} `; @@ -43,28 +40,21 @@ const StyledImage = styled.img` `; const StyledImageHandle = styled.div<{ handle: 'left' | 'right' }>` - border-radius: ${({ theme }) => theme.border.radius.md}; - background-color: ${({ theme }) => theme.background.primaryInverted}; - border: 1px solid ${({ theme }) => theme.background.primary}; + border-radius: ${themeCssVariables.border.radius.md}; + background-color: ${themeCssVariables.background.primaryInverted}; + border: 1px solid ${themeCssVariables.background.primary}; cursor: col-resize; - height: ${({ theme }) => theme.spacing(8)}; + height: ${themeCssVariables.spacing[8]}; position: absolute; top: 50%; transform: translateY(-50%); - width: ${({ theme }) => theme.spacing(2)}; + width: ${themeCssVariables.spacing[2]}; z-index: 1; - ${({ handle, theme }) => { - if (handle === 'left') { - return css` - left: ${theme.spacing(1)}; - `; - } - - return css` - right: ${theme.spacing(1)}; - `; - }} + ${({ handle }) => + handle === 'left' + ? `left: ${themeCssVariables.spacing[1]};` + : `right: ${themeCssVariables.spacing[1]};`} `; type ResizeParams = { @@ -179,37 +169,38 @@ export const ResizableImageView = (props: ResizableImageViewProps) => { }, []); return ( - - + - - - {/* Show resize handles when hovering over image OR actively resizing */} - {(isHovering || isDefined(resizeParams)) && ( - <> - handleImageHandleMouseDown('left', e)} - /> - handleImageHandleMouseDown('right', e)} - /> - - )} - - - + + + + {(isHovering || isDefined(resizeParams)) && ( + <> + handleImageHandleMouseDown('left', e)} + /> + handleImageHandleMouseDown('right', e)} + /> + + )} + + + + ); }; diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx index 2f7dda323b..28e4fae762 100644 --- a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx +++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx @@ -8,12 +8,13 @@ import { useCurrentMetered } from '@/billing/hooks/useCurrentMetered'; import { useGetWorkflowNodeExecutionUsage } from '@/billing/hooks/useGetWorkflowNodeExecutionUsage'; import { useNumberFormat } from '@/localization/hooks/useNumberFormat'; import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus'; -import { useTheme } from '@emotion/react'; import { t } from '@lingui/core/macro'; +import { useContext } from 'react'; import { formatToShortNumber } from 'twenty-shared/utils'; import { H2Title, HorizontalSeparator } from 'twenty-ui/display'; import { ProgressBar } from 'twenty-ui/feedback'; import { Section } from 'twenty-ui/layout'; +import { ThemeContext } from 'twenty-ui/theme'; import { SubscriptionStatus } from '~/generated-metadata/graphql'; export const SettingsBillingCreditsSection = ({ @@ -59,7 +60,7 @@ export const SettingsBillingCreditsSection = ({ currentBillingSubscription.interval, ); - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( <> diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx index 396c5b8572..c9c4ec21b7 100644 --- a/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx +++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx @@ -27,7 +27,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { useMemo, useState } from 'react'; @@ -45,6 +45,7 @@ import { } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; import { Section } from 'twenty-ui/layout'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { BillingPlanKey, BillingProductKey, @@ -83,8 +84,8 @@ const CANCEL_SWITCH_METERED_PRICE_MODAL_ID = const StyledSwitchButtonContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; - margin-top: ${({ theme }) => theme.spacing(4)}; + gap: ${themeCssVariables.spacing[2]}; + margin-top: ${themeCssVariables.spacing[4]}; `; export const SettingsBillingSubscriptionInfo = ({ diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx index a7934896ff..f30be08d79 100644 --- a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx +++ b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx @@ -1,18 +1,19 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; -import React from 'react'; +import { styled } from '@linaria/react'; +import React, { useContext } from 'react'; import { IconCheck } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledBenefitContainer = styled.div` - color: ${({ theme }) => theme.font.color.secondary}; + color: ${themeCssVariables.font.color.secondary}; display: flex; flex-direction: row; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledCheckContainer = styled.div` align-items: center; - background-color: ${({ theme }) => theme.background.tertiary}; + background-color: ${themeCssVariables.background.tertiary}; border-radius: 50%; display: flex; height: 16px; @@ -23,7 +24,7 @@ type SubscriptionBenefitProps = { children: React.ReactNode; }; export const SubscriptionBenefit = ({ children }: SubscriptionBenefitProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionInfoContainer.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionInfoContainer.tsx index 3cf74d2636..5e8984083b 100644 --- a/packages/twenty-front/src/modules/billing/components/SubscriptionInfoContainer.tsx +++ b/packages/twenty-front/src/modules/billing/components/SubscriptionInfoContainer.tsx @@ -1,13 +1,14 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSubscriptionInfoContainer = styled.div` - background-color: ${({ theme }) => theme.background.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.md}; + background-color: ${themeCssVariables.background.secondary}; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-radius: ${themeCssVariables.border.radius.md}; display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(3)}; - padding: ${({ theme }) => theme.spacing(3)}; + gap: ${themeCssVariables.spacing[3]}; + padding: ${themeCssVariables.spacing[3]}; width: 100%; `; diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx index f2eaa95eb7..4e0a92621c 100644 --- a/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx +++ b/packages/twenty-front/src/modules/billing/components/SubscriptionPrice.tsx @@ -1,5 +1,6 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { SubscriptionInterval } from '~/generated-metadata/graphql'; type SubscriptionPriceProps = { @@ -8,16 +9,16 @@ type SubscriptionPriceProps = { }; const StyledPriceSpan = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.xxl}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - margin-bottom: ${({ theme }) => theme.spacing(1)}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.xxl}; + font-weight: ${themeCssVariables.font.weight.semiBold}; + margin-bottom: ${themeCssVariables.spacing[1]}; `; const StyledPriceUnitSpan = styled.span` - color: ${({ theme }) => theme.font.color.light}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + color: ${themeCssVariables.font.color.light}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.medium}; `; const formatYearlyPriceToMonthly = (price: number): number => { diff --git a/packages/twenty-front/src/modules/billing/components/TrialCard.tsx b/packages/twenty-front/src/modules/billing/components/TrialCard.tsx index e3b61f67af..b215930db0 100644 --- a/packages/twenty-front/src/modules/billing/components/TrialCard.tsx +++ b/packages/twenty-front/src/modules/billing/components/TrialCard.tsx @@ -1,5 +1,6 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type TrialCardProps = { duration: number; @@ -12,15 +13,15 @@ const StyledTrialCardContainer = styled.div` `; const StyledTrialDurationContainer = styled.div` - color: ${({ theme }) => theme.font.color.secondary}; - font-size: ${({ theme }) => theme.font.size.md}; + color: ${themeCssVariables.font.color.secondary}; + font-size: ${themeCssVariables.font.size.md}; display: flex; - margin-bottom: ${({ theme }) => theme.spacing(2)}; + margin-bottom: ${themeCssVariables.spacing[2]}; `; const StyledCreditCardRequirementContainer = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.md}; + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.md}; display: flex; `; diff --git a/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx b/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx index 680c56acc0..21d623bb37 100644 --- a/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx +++ b/packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx @@ -12,12 +12,13 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { Select } from '@/ui/input/components/Select'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useModal } from '@/ui/layout/modal/hooks/useModal'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { useState } from 'react'; import { findOrThrow, isDefined } from 'twenty-shared/utils'; import { H2Title } from 'twenty-ui/display'; import { Button } from 'twenty-ui/input'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useSetMeteredSubscriptionPriceMutation, SubscriptionInterval, @@ -27,7 +28,7 @@ const StyledRow = styled.div` align-items: flex-end; display: flex; flex-wrap: wrap; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledSelect = styled(Select)` diff --git a/packages/twenty-front/src/modules/billing/components/internal/PlansTags.tsx b/packages/twenty-front/src/modules/billing/components/internal/PlansTags.tsx index e40f3ac340..15011d719d 100644 --- a/packages/twenty-front/src/modules/billing/components/internal/PlansTags.tsx +++ b/packages/twenty-front/src/modules/billing/components/internal/PlansTags.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { Tag } from 'twenty-ui/components'; import { t } from '@lingui/core/macro'; import { BillingPlanKey } from '~/generated-metadata/graphql'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; export type PlansTagsProps = { plan: BillingPlanKey; @@ -11,7 +12,7 @@ export type PlansTagsProps = { const StyledTagsWrapper = styled.div` display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; `; export const PlansTags = ({ plan, isTrialPeriod = false }: PlansTagsProps) => { diff --git a/packages/twenty-front/src/modules/billing/components/internal/SettingsBillingLabelValueItem.tsx b/packages/twenty-front/src/modules/billing/components/internal/SettingsBillingLabelValueItem.tsx index 0d76647192..5692c4f874 100644 --- a/packages/twenty-front/src/modules/billing/components/internal/SettingsBillingLabelValueItem.tsx +++ b/packages/twenty-front/src/modules/billing/components/internal/SettingsBillingLabelValueItem.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type SettingsBillingLabelValueItemProps = { label: string; @@ -12,16 +13,18 @@ const StyledContainer = styled.div` `; const StyledLabelSpan = styled.span` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.xs}; + font-weight: ${themeCssVariables.font.weight.semiBold}; `; const StyledValueSpan = styled.span<{ isPrimaryColor: boolean }>` - color: ${({ theme, isPrimaryColor }) => - isPrimaryColor ? theme.font.color.primary : theme.font.color.secondary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + color: ${({ isPrimaryColor }) => + isPrimaryColor + ? themeCssVariables.font.color.primary + : themeCssVariables.font.color.secondary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; `; export const SettingsBillingLabelValueItem = ({ diff --git a/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx b/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx index a9a2d5d005..2cbfd5c366 100644 --- a/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx +++ b/packages/twenty-front/src/modules/billing/components/internal/SubscriptionInfoRowContainer.tsx @@ -1,8 +1,9 @@ import { type IconComponent } from 'twenty-ui/display'; -import React from 'react'; -import styled from '@emotion/styled'; -import { useTheme } from '@emotion/react'; +import React, { useContext } from 'react'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type SubscriptionInfoRowContainerProps = { Icon: IconComponent; @@ -13,16 +14,16 @@ type SubscriptionInfoRowContainerProps = { const StyledContainer = styled.div` align-items: center; - gap: ${({ theme }) => theme.spacing(1)}; - color: ${({ theme }) => theme.font.color.primary}; + gap: ${themeCssVariables.spacing[1]}; + color: ${themeCssVariables.font.color.primary}; display: grid; grid-template-columns: repeat(3, 1fr); `; const StyledIconLabelContainer = styled.div` align-items: center; - gap: ${({ theme }) => theme.spacing(1)}; - color: ${({ theme }) => theme.font.color.tertiary}; + gap: ${themeCssVariables.spacing[1]}; + color: ${themeCssVariables.font.color.tertiary}; display: flex; `; @@ -33,8 +34,8 @@ const StyledLabelContainer = styled.div` `; const StyledHeaderText = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.sm}; + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.sm}; `; export const SubscriptionInfoHeaderRow = ({ show }: { show: boolean }) => { @@ -54,7 +55,7 @@ export const SubscriptionInfoRowContainer = ({ currentValue, nextValue, }: SubscriptionInfoRowContainerProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( diff --git a/packages/twenty-front/src/modules/blocknote-editor/blocks/FileBlock.tsx b/packages/twenty-front/src/modules/blocknote-editor/blocks/FileBlock.tsx index a2c93dbe4a..ea7475e95f 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/blocks/FileBlock.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/blocks/FileBlock.tsx @@ -1,8 +1,9 @@ import { createReactBlockSpec } from '@blocknote/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { isNonEmptyString } from '@sniptt/guards'; import { type ChangeEvent, useRef } from 'react'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { type AttachmentFileCategory } from '@/activities/files/types/AttachmentFileCategory'; import { getFileType } from '@/activities/files/utils/getFileType'; @@ -18,23 +19,23 @@ const StyledFileInput = styled.input` const StyledFileLine = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledLink = styled.a` align-items: center; - color: ${({ theme }) => theme.font.color.primary}; + color: ${themeCssVariables.font.color.primary}; display: flex; text-decoration: none; :hover { - color: ${({ theme }) => theme.font.color.secondary}; + color: ${themeCssVariables.font.color.secondary}; } `; const StyledUploadFileContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; export const FileBlock = createReactBlockSpec( diff --git a/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx b/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx index 8a6f120296..101a5851ea 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/blocks/MentionInlineContent.tsx @@ -3,26 +3,26 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat import { RecordChip } from '@/object-record/components/RecordChip'; import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; import { createReactInlineContentSpec } from '@blocknote/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { isNonEmptyString } from '@sniptt/guards'; import { isDefined } from 'twenty-shared/utils'; import { Chip, ChipVariant } from 'twenty-ui/components'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; const StyledRecordChip = styled(RecordChip)` height: auto; margin: 0; - padding: ${({ theme }) => `0 ${theme.spacing(1)}`}; + padding: 0 ${themeCssVariables.spacing[1]}; `; const StyledInlineMentionRecordChip = styled(MentionRecordChip)` height: auto; margin: 0; - padding: ${({ theme }) => `0 ${theme.spacing(1)}`}; + padding: 0 ${themeCssVariables.spacing[1]}; `; -// Backward-compatible renderer for legacy notes that only stored objectMetadataId + recordId const LegacyMentionRenderer = ({ recordId, objectMetadataId, diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx index ebab4264f7..a346a75a8b 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx @@ -1,9 +1,10 @@ import { filterSuggestionItems } from '@blocknote/core/extensions'; import { BlockNoteView } from '@blocknote/mantine'; import { SuggestionMenuController } from '@blocknote/react'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; -import { type ClipboardEvent } from 'react'; +import { styled } from '@linaria/react'; +import { type ClipboardEvent, useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { type BLOCK_SCHEMA } from '@/blocknote-editor/blocks/Schema'; import { getSlashMenu } from '@/blocknote-editor/utils/getSlashMenu'; @@ -31,11 +32,11 @@ const StyledEditor = styled.div` & .editor { background: transparent; font-size: 13px; - color: ${({ theme }) => theme.font.color.primary}; + color: ${themeCssVariables.font.color.primary}; min-height: 400px; } & .editor [class^='_inlineContent']:before { - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${themeCssVariables.font.color.tertiary}; font-style: normal !important; } & .editor .bn-inline-content:has(> .ProseMirror-trailingBreak):before { @@ -55,8 +56,8 @@ const StyledEditor = styled.div` align-items: center; } & .bn-drag-handle-menu { - background: ${({ theme }) => theme.background.transparent.secondary}; - backdrop-filter: ${({ theme }) => theme.blur.medium}; + background: ${themeCssVariables.background.transparent.secondary}; + backdrop-filter: ${themeCssVariables.blur.medium}; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04), 2px 4px 16px rgba(0, 0, 0, 0.12); @@ -64,7 +65,7 @@ const StyledEditor = styled.div` min-height: 96px; padding: 4px; border-radius: 8px; - border: 1px solid ${({ theme }) => theme.border.color.medium}; + border: 1px solid ${themeCssVariables.border.color.medium}; left: 26px; } @@ -83,9 +84,9 @@ const StyledEditor = styled.div` & .bn-suggestion-menu { padding: 4px; border-radius: 8px; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - background: ${({ theme }) => theme.background.transparent.secondary}; - backdrop-filter: ${({ theme }) => theme.blur.medium}; + border: 1px solid ${themeCssVariables.border.color.medium}; + background: ${themeCssVariables.background.transparent.secondary}; + backdrop-filter: ${themeCssVariables.blur.medium}; } & .mantine-Menu-item { @@ -94,17 +95,17 @@ const StyledEditor = styled.div` min-height: 32px; font-style: normal; - font-family: ${({ theme }) => theme.font.family}; - font-weight: ${({ theme }) => theme.font.weight.regular}; - color: ${({ theme }) => theme.font.color.secondary}; + font-family: ${themeCssVariables.font.family}; + font-weight: ${themeCssVariables.font.weight.regular}; + color: ${themeCssVariables.font.color.secondary}; } & .mantine-ActionIcon-root:hover { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04); - background: ${({ theme }) => theme.background.transparent.primary}; + background: ${themeCssVariables.background.transparent.primary}; backdrop-filter: blur(20px); - border: 1px solid ${({ theme }) => theme.border.color.light}; + border: 1px solid ${themeCssVariables.border.color.light}; } & .bn-side-menu .mantine-UnstyledButton-root:not(.mantine-Menu-item) svg { height: 16px; @@ -119,17 +120,17 @@ const StyledEditor = styled.div` } & .bn-inline-content a { - color: ${({ theme }) => theme.color.blue}; + color: ${themeCssVariables.color.blue}; } & .bn-inline-content code { font-family: monospace; - color: ${({ theme }) => theme.font.color.danger}; + color: ${themeCssVariables.font.color.danger}; padding: 2px 4px; border-radius: 4px; - border: 1px solid ${({ theme }) => theme.font.color.extraLight}; + border: 1px solid ${themeCssVariables.font.color.extraLight}; font-size: 0.9rem; - background-color: ${({ theme }) => theme.background.transparent.light}; + background-color: ${themeCssVariables.background.transparent.light}; } `; @@ -141,7 +142,7 @@ export const BlockEditor = ({ onPaste, readonly, }: BlockEditorProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const blockNoteTheme = theme.name === 'light' ? 'light' : 'dark'; const getMentionItems = useMentionMenu(editor); diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/CustomMentionMenu.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/CustomMentionMenu.tsx index 82ffea690a..2ef358b2a1 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/CustomMentionMenu.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/CustomMentionMenu.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { autoUpdate, useFloating } from '@floating-ui/react'; import { motion } from 'framer-motion'; import { type MouseEvent as ReactMouseEvent } from 'react'; diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenu.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenu.tsx index 9b5bee249b..bae5090053 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenu.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenu.tsx @@ -9,16 +9,17 @@ import { SideMenu, SideMenuController, } from '@blocknote/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { IconColorSwatch, IconPlus, IconTrash } from 'twenty-ui/display'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type CustomSideMenuProps = { editor: typeof BLOCK_SCHEMA.BlockNoteEditor; }; const StyledDivToCreateGap = styled.div` - width: ${({ theme }) => theme.spacing(2)}; + width: ${themeCssVariables.spacing[2]}; `; export const CustomSideMenu = ({ editor }: CustomSideMenuProps) => { diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx index 7f2c81e201..9b6cc0dc28 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx +++ b/packages/twenty-front/src/modules/blocknote-editor/components/CustomSideMenuOptions.tsx @@ -1,14 +1,16 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { type IconComponent } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div<{ Variant: Variants }>` - color: ${({ theme, Variant }) => - Variant === 'danger' ? theme.color.red : 'inherit'}; + color: ${({ Variant }) => + Variant === 'danger' ? themeCssVariables.color.red : 'inherit'}; align-items: center; display: flex; flex-direction: row; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledTextContainer = styled.div``; @@ -26,7 +28,7 @@ export const CustomSideMenuOptions = ({ Variant, text, }: CustomSideMenuOptionsProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( theme.betweenSiblingsGap}; + margin-bottom: ${themeCssVariables.betweenSiblingsGap}; `; export const CurrentWorkspaceMemberOrphanFavorites = () => { diff --git a/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx b/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx index 03a7cb59ec..8de9d9d5b7 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoriteIcon.tsx @@ -1,10 +1,11 @@ import { type ProcessedFavorite } from '@/favorites/utils/sortFavorites'; import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon'; -import { useTheme } from '@emotion/react'; +import { useContext } from 'react'; import { Avatar, useIcons } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; export const FavoriteIcon = ({ favorite }: { favorite: ProcessedFavorite }) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const { Icon: StandardIcon, IconColor } = useGetStandardObjectIcon( favorite.objectNameSingular || '', diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx index daf1c01719..f614e2bc7c 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesBackButton.tsx @@ -1,29 +1,31 @@ import { currentFavoriteFolderIdState } from '@/ui/navigation/navigation-drawer/states/currentFavoriteFolderIdState'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { IconX } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledBackButton = styled.button` display: flex; align-items: center; - gap: ${({ theme }) => theme.spacing(2)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-right: ${({ theme }) => theme.spacing(0.5)}; - padding-top: ${({ theme }) => theme.spacing(1)}; - padding-bottom: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[2]}; + padding-left: ${themeCssVariables.spacing[1]}; + padding-right: ${themeCssVariables.spacing[0.5]}; + padding-top: ${themeCssVariables.spacing[1]}; + padding-bottom: ${themeCssVariables.spacing[1]}; width: 100%; background: transparent; border: none; - color: ${({ theme }) => theme.font.color.secondary}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - font-family: ${({ theme }) => theme.font.family}; + color: ${themeCssVariables.font.color.secondary}; + font-weight: ${themeCssVariables.font.weight.medium}; + font-family: ${themeCssVariables.font.family}; cursor: pointer; text-align: left; &:hover { - background: ${({ theme }) => theme.background.transparent.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + background: ${themeCssVariables.background.transparent.light}; + border-radius: ${themeCssVariables.border.radius.sm}; } `; @@ -34,7 +36,7 @@ type FavoritesBackButtonProps = { export const FavoritesBackButton = ({ folderName, }: FavoritesBackButtonProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const setCurrentFavoriteFolderId = useSetAtomState( currentFavoriteFolderIdState, ); diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx index e4d652dffb..6d045687b4 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesDroppable.tsx @@ -1,5 +1,6 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { Droppable } from '@hello-pangea/dnd'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; type FavoritesDroppableProps = { droppableId: string; @@ -17,15 +18,14 @@ const StyledDroppableWrapper = styled.div<{ transition: all 150ms ease-in-out; width: 100%; - ${({ isDraggingOver, isDragIndicatorVisible, showDropLine, theme }) => - isDraggingOver && - isDragIndicatorVisible && - ` - background-color: ${theme.background.transparent.blue}; + ${({ isDraggingOver, isDragIndicatorVisible, showDropLine }) => + isDraggingOver && isDragIndicatorVisible + ? ` + background-color: ${themeCssVariables.background.transparent.blue}; ${ - showDropLine && - ` + showDropLine + ? ` &::before { content: ''; position: absolute; @@ -33,12 +33,14 @@ const StyledDroppableWrapper = styled.div<{ left: 0; width: 100%; height: 2px; - background-color: ${theme.color.blue}; - border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0; + background-color: ${themeCssVariables.color.blue}; + border-radius: ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0 0; } ` + : '' } - `} + ` + : ''} `; export const FavoritesDroppable = ({ diff --git a/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx b/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx index 5e5d1ea7f8..765dbb969b 100644 --- a/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/favorites/components/FavoritesSkeletonLoader.tsx @@ -1,24 +1,26 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; height: 71px; - padding-left: ${({ theme }) => theme.spacing(1)}; + padding-left: ${themeCssVariables.spacing[1]}; `; const StyledSkeletonColumn = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; `; export const FavoritesSkeletonLoader = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( theme.spacing(1)}; - margin-top: ${({ theme }) => theme.spacing(1)}; + margin-bottom: ${themeCssVariables.spacing[1]}; + margin-top: ${themeCssVariables.spacing[1]}; `; type FavoriteFolderPickerListProps = { diff --git a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts index 44239e5e0c..065062c376 100644 --- a/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts +++ b/packages/twenty-front/src/modules/favorites/hooks/__mocks__/useFavorites.ts @@ -109,23 +109,18 @@ export const sortedFavorites = [ const favoriteObjectMetadataItem = getMockObjectMetadataItemOrThrow('favorite'); const personObjectMetadataItem = getMockObjectMetadataItemOrThrow('person'); -const UPDATE_ONE_FAVORITE_MUTATION = generateUpdateOneRecordMutation( - { - objectMetadataItem: favoriteObjectMetadataItem, - objectMetadataItems: generatedMockObjectMetadataItems, - computeReferences: false, - objectPermissionsByObjectMetadataId: {}, - }, -) - -const CREATE_ONE_FAVORITE_MUTATION = generateCreateOneRecordMutation( - { - objectMetadataItem: favoriteObjectMetadataItem, - objectMetadataItems: generatedMockObjectMetadataItems, - objectPermissionsByObjectMetadataId: {}, - }, -) +const UPDATE_ONE_FAVORITE_MUTATION = generateUpdateOneRecordMutation({ + objectMetadataItem: favoriteObjectMetadataItem, + objectMetadataItems: generatedMockObjectMetadataItems, + computeReferences: false, + objectPermissionsByObjectMetadataId: {}, +}); +const CREATE_ONE_FAVORITE_MUTATION = generateCreateOneRecordMutation({ + objectMetadataItem: favoriteObjectMetadataItem, + objectMetadataItems: generatedMockObjectMetadataItems, + objectPermissionsByObjectMetadataId: {}, +}); export const mocks = [ { diff --git a/packages/twenty-front/src/modules/file/components/FileIcon.tsx b/packages/twenty-front/src/modules/file/components/FileIcon.tsx index e68f900cc7..fbfd9d80fc 100644 --- a/packages/twenty-front/src/modules/file/components/FileIcon.tsx +++ b/packages/twenty-front/src/modules/file/components/FileIcon.tsx @@ -1,4 +1,5 @@ import { type AttachmentFileCategory } from '@/activities/files/types/AttachmentFileCategory'; +import { useFileIconColors } from '@/file/hooks/useFileIconColors'; import { IconMapping } from '@/file/utils/fileIconMappings'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; @@ -20,21 +21,6 @@ const StyledIconContainer = styled.div<{ padding: 5px; `; -const useFileIconColors = () => { - const theme = useTheme(); - - return { - ARCHIVE: theme.color.gray, - AUDIO: theme.color.pink, - IMAGE: theme.color.amber, - PRESENTATION: theme.color.orange, - SPREADSHEET: theme.color.turquoise, - TEXT_DOCUMENT: theme.color.blue, - VIDEO: theme.color.purple, - OTHER: theme.color.gray, - }; -}; - export const FileIcon = ({ fileCategory, size = 'medium', diff --git a/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts b/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts new file mode 100644 index 0000000000..81efa70c4f --- /dev/null +++ b/packages/twenty-front/src/modules/file/hooks/useFileIconColors.ts @@ -0,0 +1,21 @@ +import { type AttachmentFileCategory } from '@/activities/files/types/AttachmentFileCategory'; +import { useTheme } from '@emotion/react'; +import { type FileCategory } from 'twenty-shared/types'; + +export const useFileIconColors = (): Record< + AttachmentFileCategory | FileCategory, + string +> => { + const theme = useTheme(); + + return { + ARCHIVE: theme.color.gray, + AUDIO: theme.color.pink, + IMAGE: theme.color.amber, + PRESENTATION: theme.color.orange, + SPREADSHEET: theme.color.turquoise, + TEXT_DOCUMENT: theme.color.blue, + VIDEO: theme.color.purple, + OTHER: theme.color.gray, + }; +}; diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx index 5b771222da..7f3bb8ce83 100644 --- a/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/InformationBanner.tsx @@ -1,7 +1,7 @@ import { InformationBannerComponentInstanceContext } from '@/information-banner/states/contexts/InformationBannerComponentInstanceContext'; import { informationBannerIsOpenComponentState } from '@/information-banner/states/informationBannerIsOpenComponentState'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { Banner, @@ -10,7 +10,7 @@ import { IconX, } from 'twenty-ui/display'; import { Button, IconButton } from 'twenty-ui/input'; -import { GRAY_SCALE_LIGHT } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledText = styled.div` overflow: hidden; @@ -19,7 +19,7 @@ const StyledText = styled.div` `; const StyledCloseButton = styled(IconButton)` - color: ${GRAY_SCALE_LIGHT.gray1}; + color: ${themeCssVariables.grayScale.gray1}; display: flex; `; @@ -29,7 +29,7 @@ const StyledContent = styled.div<{ hasCloseButton: boolean }>` display: flex; flex: 1; margin-left: ${({ hasCloseButton }) => (hasCloseButton ? '24px' : '0')}; - gap: ${({ theme }) => theme.spacing(3)}; + gap: ${themeCssVariables.spacing[3]}; `; export const InformationBanner = ({ diff --git a/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx b/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx index f11d3449d3..aaa5492fef 100644 --- a/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/InformationBannerWrapper.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { isDefined } from 'twenty-shared/utils'; import { WorkspaceActivationStatus } from 'twenty-shared/workspace'; diff --git a/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx b/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx index 81d3c77fd5..3b145d4acc 100644 --- a/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx +++ b/packages/twenty-front/src/modules/information-banner/components/deleted-record/InformationBannerDeletedRecord.tsx @@ -1,6 +1,6 @@ import { InformationBanner } from '@/information-banner/components/InformationBanner'; import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { IconRefresh } from 'twenty-ui/display'; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx index f7790807e6..1b049d20c9 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/AddToNavigationDragHandle.tsx @@ -1,9 +1,10 @@ -import { css, useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { isNonEmptyString } from '@sniptt/guards'; -import type { ReactNode } from 'react'; +import { type ReactNode, useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { IconGripVertical, type IconComponent } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { NavigationMenuItemStyleIcon } from '@/navigation-menu-item/components/NavigationMenuItemStyleIcon'; import { DEFAULT_NAVIGATION_MENU_ITEM_COLOR_FOLDER } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultColorFolder'; @@ -18,12 +19,13 @@ const StyledIconSlot = styled.div<{ $hasFixedSize: boolean }>` flex-shrink: 0; justify-content: center; - ${({ theme, $hasFixedSize }) => - $hasFixedSize && - css` - height: ${theme.spacing(4)}; - width: ${theme.spacing(4)}; - `} + ${({ $hasFixedSize }) => + $hasFixedSize + ? ` + height: ${themeCssVariables.spacing[4]}; + width: ${themeCssVariables.spacing[4]}; + ` + : ''} &:active { cursor: grabbing; @@ -41,7 +43,7 @@ const AddToNavigationDragHandleIcon = ({ customIconContent, iconColor, }: AddToNavigationDragHandleIconProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const iconSize = theme.icon.size.md; const iconStroke = theme.icon.stroke.sm; @@ -74,7 +76,7 @@ export const AddToNavigationDragHandle = ({ payload, isHovered, }: AddToNavigationDragHandleProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const effectiveColor = payload.type === 'object' && isNonEmptyString(payload.iconColor) ? payload.iconColor diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx index f395bf5bab..b487230212 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx @@ -1,8 +1,9 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useContext } from 'react'; import { useLocation } from 'react-router-dom'; import { IconHeartOff } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { NavigationItemDropTarget } from '@/navigation-menu-item/components/NavigationItemDropTarget'; import { NavigationMenuItemDroppable } from '@/navigation-menu-item/components/NavigationMenuItemDroppable'; @@ -25,7 +26,7 @@ const StyledEmptyContainer = styled.div` `; const StyledOrphanNavigationMenuItemsContainer = styled.div` - margin-bottom: ${({ theme }) => theme.betweenSiblingsGap}; + margin-bottom: ${themeCssVariables.betweenSiblingsGap}; `; export const CurrentWorkspaceMemberOrphanNavigationMenuItems = () => { diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationItemDropTarget.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationItemDropTarget.tsx index 2f506513aa..82a3672ca2 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationItemDropTarget.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationItemDropTarget.tsx @@ -1,5 +1,6 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { type ReactNode, useContext } from 'react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { type NavigationSections } from '@/navigation-menu-item/constants/NavigationSections.constants'; import { NavigationDropTargetContext } from '@/navigation-menu-item/contexts/NavigationDropTargetContext'; @@ -9,14 +10,15 @@ const StyledDropTarget = styled.div<{ $isDropForbidden: boolean; $compact?: boolean; }>` - min-height: ${({ theme, $compact }) => ($compact ? 0 : theme.spacing(2))}; + min-height: ${({ $compact }) => + $compact ? 0 : themeCssVariables.spacing[2]}; position: relative; transition: all 150ms ease-in-out; - ${({ $isDragOver, theme }) => - $isDragOver && - ` - background-color: ${theme.background.transparent.blue}; + ${({ $isDragOver }) => + $isDragOver + ? ` + background-color: ${themeCssVariables.background.transparent.blue}; &::before { content: ''; @@ -25,15 +27,16 @@ const StyledDropTarget = styled.div<{ left: 0; width: 100%; height: 2px; - background-color: ${theme.color.blue}; - border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0; + background-color: ${themeCssVariables.color.blue}; + border-radius: ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0 0; } - `} + ` + : ''} - ${({ $isDropForbidden, theme }) => - $isDropForbidden && - ` - background-color: ${theme.background.transparent.danger}; + ${({ $isDropForbidden }) => + $isDropForbidden + ? ` + background-color: ${themeCssVariables.background.transparent.danger}; cursor: not-allowed; &::after { @@ -43,10 +46,11 @@ const StyledDropTarget = styled.div<{ left: 0; width: 100%; height: 2px; - background-color: ${theme.color.red}; - border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0; + background-color: ${themeCssVariables.color.red}; + border-radius: ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0 0; } - `} + ` + : ''} `; type NavigationItemDropTargetProps = { diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuEditModeBar.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuEditModeBar.tsx index 50a489a8fd..1bc26faaa1 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuEditModeBar.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuEditModeBar.tsx @@ -10,33 +10,34 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { CommandMenuPages } from 'twenty-shared/types'; import { IconCheck, useIcons } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; const StyledContainer = styled.div` align-items: center; - background: ${({ theme }) => theme.color.blue}; + background: ${themeCssVariables.color.blue}; box-sizing: border-box; - color: ${({ theme }) => theme.font.color.inverted}; + color: ${themeCssVariables.font.color.inverted}; display: flex; justify-content: space-between; - padding: ${({ theme }) => theme.spacing(2, 3)}; + padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[3]}; width: 100%; `; const StyledTitle = styled.span` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; export const NavigationMenuEditModeBar = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const { t } = useLingui(); const { getIcon } = useIcons(); const [isSaving, setIsSaving] = useState(false); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx index f789ec84ff..4959937849 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemBackButton.tsx @@ -1,6 +1,8 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { IconX } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { currentNavigationMenuItemFolderIdState } from '@/ui/navigation/navigation-drawer/states/currentNavigationMenuItemFolderIdState'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; @@ -8,23 +10,23 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat const StyledBackButton = styled.button` display: flex; align-items: center; - gap: ${({ theme }) => theme.spacing(2)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-right: ${({ theme }) => theme.spacing(0.5)}; - padding-top: ${({ theme }) => theme.spacing(1)}; - padding-bottom: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[2]}; + padding-left: ${themeCssVariables.spacing[1]}; + padding-right: ${themeCssVariables.spacing[0.5]}; + padding-top: ${themeCssVariables.spacing[1]}; + padding-bottom: ${themeCssVariables.spacing[1]}; width: 100%; background: transparent; border: none; - color: ${({ theme }) => theme.font.color.secondary}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - font-family: ${({ theme }) => theme.font.family}; + color: ${themeCssVariables.font.color.secondary}; + font-weight: ${themeCssVariables.font.weight.medium}; + font-family: ${themeCssVariables.font.family}; cursor: pointer; text-align: left; &:hover { - background: ${({ theme }) => theme.background.transparent.light}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + background: ${themeCssVariables.background.transparent.light}; + border-radius: ${themeCssVariables.border.radius.sm}; } `; @@ -35,7 +37,7 @@ type NavigationMenuItemBackButtonProps = { export const NavigationMenuItemBackButton = ({ folderName, }: NavigationMenuItemBackButtonProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const setCurrentNavigationMenuItemFolderId = useSetAtomState( currentNavigationMenuItemFolderIdState, ); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemDroppable.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemDroppable.tsx index 8576f7831d..c86d01d0f6 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemDroppable.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemDroppable.tsx @@ -1,5 +1,6 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { Droppable } from '@hello-pangea/dnd'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection'; @@ -20,15 +21,14 @@ const StyledDroppableWrapper = styled.div<{ transition: all 150ms ease-in-out; width: 100%; - ${({ isDraggingOver, isDragIndicatorVisible, showDropLine, theme }) => - isDraggingOver && - isDragIndicatorVisible && - ` - background-color: ${theme.background.transparent.blue}; + ${({ isDraggingOver, isDragIndicatorVisible, showDropLine }) => + isDraggingOver && isDragIndicatorVisible + ? ` + background-color: ${themeCssVariables.background.transparent.blue}; ${ - showDropLine && - ` + showDropLine + ? ` &::before { content: ''; position: absolute; @@ -36,12 +36,14 @@ const StyledDroppableWrapper = styled.div<{ left: 0; width: 100%; height: 2px; - background-color: ${theme.color.blue}; - border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0; + background-color: ${themeCssVariables.color.blue}; + border-radius: ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0 0; } ` + : '' } - `} + ` + : ''} `; export const NavigationMenuItemDroppable = ({ diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIcon.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIcon.tsx index b43c31960e..82b27d1953 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIcon.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIcon.tsx @@ -1,7 +1,8 @@ -import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; +import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { Avatar, useIcons } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; import { StyledNavigationMenuItemIconContainer } from '@/navigation-menu-item/components/NavigationMenuItemIconContainer'; @@ -22,7 +23,7 @@ export const NavigationMenuItemIcon = ({ }: { navigationMenuItem: ProcessedNavigationMenuItem; }) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const isNavigationMenuItemEditingEnabled = useIsFeatureEnabled( FeatureFlagKey.IS_NAVIGATION_MENU_ITEM_EDITING_ENABLED, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx index a73e8ac832..51df1dfa49 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemIconContainer.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; export const StyledNavigationMenuItemIconContainer = styled.div<{ $backgroundColor?: string; @@ -9,9 +10,9 @@ export const StyledNavigationMenuItemIconContainer = styled.div<{ box-sizing: border-box; display: flex; flex-shrink: 0; - height: ${({ theme }) => theme.spacing(4)}; + height: ${themeCssVariables.spacing[4]}; justify-content: center; - width: ${({ theme }) => theme.spacing(4)}; + width: ${themeCssVariables.spacing[4]}; ${({ $backgroundColor }) => $backgroundColor ? `background-color: ${$backgroundColor};` : ''} diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemSkeletonLoader.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemSkeletonLoader.tsx index 58e55445de..d0701ce8bb 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/NavigationMenuItemSkeletonLoader.tsx @@ -1,24 +1,26 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSkeletonContainer = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; height: 71px; - padding-left: ${({ theme }) => theme.spacing(1)}; + padding-left: ${themeCssVariables.spacing[1]}; `; const StyledSkeletonColumn = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; `; export const NavigationMenuItemSkeletonLoader = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const style = getNavigationMenuItemIconStyleFromColor(theme, color); return ( { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const objectStyle = getNavigationMenuItemIconStyleFromColor( theme, objectColor, diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx index 2e9c33c804..39c7f74d57 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemFolderDragClone.tsx @@ -1,10 +1,11 @@ -import { useTheme } from '@emotion/react'; import { type DraggableProvided, type DraggableRubric, type DraggableStateSnapshot, } from '@hello-pangea/dnd'; +import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; +import { ThemeContext } from 'twenty-ui/theme'; import { NavigationMenuItemIcon } from '@/navigation-menu-item/components/NavigationMenuItemIcon'; import { getNavigationMenuItemSecondaryLabel } from '@/navigation-menu-item/utils/getNavigationMenuItemSecondaryLabel'; @@ -32,7 +33,7 @@ export const WorkspaceNavigationMenuItemFolderDragClone = ({ navigationMenuItemFolderContentLength, selectedNavigationMenuItemIndex, }: WorkspaceNavigationMenuItemFolderDragCloneProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const objectMetadataItems = useAtomStateValue(objectMetadataItemsState); const navigationMenuItem = navigationMenuItems[rubric.source.index]; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx index c9d07a64ae..2a30dc4bb9 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItems.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { IconColumnInsertRight, @@ -8,6 +8,7 @@ import { useIcons, } from 'twenty-ui/display'; import { LightIconButton } from 'twenty-ui/input'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { FeatureFlagKey } from '~/generated-metadata/graphql'; import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu'; @@ -39,7 +40,7 @@ import { isDefined } from 'twenty-shared/utils'; const StyledRightIconsContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; `; export const WorkspaceNavigationMenuItems = () => { diff --git a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx index 5362d5e8b0..92223d454d 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/components/WorkspaceNavigationMenuItemsFolder.tsx @@ -1,5 +1,4 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { Droppable } from '@hello-pangea/dnd'; import { useLingui } from '@lingui/react/macro'; import { isNonEmptyString } from '@sniptt/guards'; @@ -12,6 +11,8 @@ import { IconPlus, useIcons, } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsDropDisabledForSection } from '@/navigation-menu-item/hooks/useIsDropDisabledForSection'; import { useOpenAddItemToFolderPage } from '@/navigation-menu-item/hooks/useOpenAddItemToFolderPage'; @@ -47,11 +48,11 @@ import { ViewKey } from '@/views/types/ViewKey'; import { convertCoreViewToView } from '@/views/utils/convertCoreViewToView'; const StyledFolderContainer = styled.div<{ $isSelectedInEditMode: boolean }>` - border: ${({ theme, $isSelectedInEditMode }) => + border: ${({ $isSelectedInEditMode }) => $isSelectedInEditMode - ? `1px solid ${theme.color.blue}` + ? `1px solid ${themeCssVariables.color.blue}` : '1px solid transparent'}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + border-radius: ${themeCssVariables.border.radius.sm}; `; const StyledFolderDroppableContent = styled.div<{ @@ -59,7 +60,8 @@ const StyledFolderDroppableContent = styled.div<{ }>` display: flex; flex-direction: column; - padding-bottom: ${({ theme, $compact }) => ($compact ? 0 : theme.spacing(2))}; + padding-bottom: ${({ $compact }) => + $compact ? 0 : themeCssVariables.spacing[2]}; `; const StyledFolderExpandableWrapper = styled.div` @@ -97,7 +99,7 @@ export const WorkspaceNavigationMenuItemsFolder = ({ selectedNavigationMenuItemId = null, isDragging = false, }: WorkspaceNavigationMenuItemsFolderProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const { getIcon } = useIcons(); const FolderIcon = getIcon(folderIconKey ?? FOLDER_ICON_DEFAULT); const objectMetadataItems = useAtomStateValue(objectMetadataItemsState); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts index 9ecfa585e1..4a39885dd0 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-color-from-theme.util.ts @@ -1,8 +1,7 @@ -import type { Theme } from '@emotion/react'; -import type { ThemeColor } from 'twenty-ui/theme'; +import type { ThemeColor, ThemeType } from 'twenty-ui/theme'; export const getColorFromTheme = ( - theme: Theme, + theme: ThemeType, themeColor: ThemeColor, shade: number, ): string => { diff --git a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-border-color.ts b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-border-color.ts index 75e76cbf68..4b90228c59 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-border-color.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-border-color.ts @@ -1,10 +1,9 @@ -import type { Theme } from '@emotion/react'; -import type { ThemeColor } from 'twenty-ui/theme'; +import type { ThemeColor, ThemeType } from 'twenty-ui/theme'; import { getColorFromTheme } from '@/navigation-menu-item/utils/get-color-from-theme.util'; import { COLOR_SHADE_BORDER } from '@/navigation-menu-item/utils/NavigationMenuItemIconColorShadeBorder.constant'; export const getNavigationMenuItemIconBorderColor = ( - theme: Theme, + theme: ThemeType, themeColor: ThemeColor, ): string => getColorFromTheme(theme, themeColor, COLOR_SHADE_BORDER); diff --git a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color.ts b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color.ts index d21f33c406..f8b6d69663 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color.ts +++ b/packages/twenty-front/src/modules/navigation-menu-item/utils/get-navigation-menu-item-icon-style-from-color.ts @@ -1,4 +1,4 @@ -import type { Theme } from '@emotion/react'; +import type { ThemeType } from 'twenty-ui/theme'; import { DEFAULT_NAV_ITEM_ICON_COLOR } from '@/navigation-menu-item/constants/NavigationMenuItemDefaultIconColor.constant'; import { getColorFromTheme } from '@/navigation-menu-item/utils/get-color-from-theme.util'; @@ -9,7 +9,7 @@ import { type NavigationMenuItemIconStyle } from '@/navigation-menu-item/utils/n import { parseThemeColor } from '@/navigation-menu-item/utils/parseThemeColor'; export const getNavigationMenuItemIconStyleFromColor = ( - theme: Theme, + theme: ThemeType, color: string | null | undefined, ): NavigationMenuItemIconStyle => { const themeColor = parseThemeColor(color ?? DEFAULT_NAV_ITEM_ICON_COLOR); diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx index 313a9bea46..0739dc9420 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { NavigationDrawerAIChatThreadsList } from '@/ai/components/NavigationDrawerAIChatThreadsList'; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerNavigationContent.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerNavigationContent.tsx index f284731abf..ba66c74153 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerNavigationContent.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerNavigationContent.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useFavoritesByFolder } from '@/favorites/hooks/useFavoritesByFolder'; import { NavigationMenuItemFolderContentDispatcherEffect } from '@/navigation-menu-item/components/NavigationMenuItemFolderContentDispatcher'; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx index c4b5bb7f92..5508e98d5a 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx @@ -1,9 +1,10 @@ import { NavigationDrawerOpenedSection } from '@/object-metadata/components/NavigationDrawerOpenedSection'; import { RemoteNavigationDrawerSection } from '@/object-metadata/components/RemoteNavigationDrawerSection'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { lazy, Suspense } from 'react'; import { NavigationDrawerOtherSection } from '@/navigation/components/NavigationDrawerOtherSection'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const CurrentWorkspaceMemberNavigationMenuItemFoldersDispatcher = lazy(() => import( @@ -24,7 +25,7 @@ const WorkspaceNavigationMenuItemsDispatcher = lazy(() => const StyledScrollableItemsContainer = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(3)}; + gap: ${themeCssVariables.spacing[3]}; `; export const MainNavigationDrawerScrollableItems = () => { diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index 84f8e454ae..3ac89399ae 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx @@ -1,11 +1,13 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; +import { useContext } from 'react'; import { IconComment, IconHome, IconMessageCirclePlus, } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useIsMobile } from 'twenty-ui/utilities'; import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread'; @@ -27,31 +29,33 @@ const StyledRow = styled.div<{ isExpanded: boolean }>` display: flex; justify-content: ${({ isExpanded }) => isExpanded ? 'space-between' : 'center'}; - gap: ${({ theme, isExpanded }) => (isExpanded ? theme.spacing(2) : 0)}; + gap: ${({ isExpanded }) => (isExpanded ? themeCssVariables.spacing[2] : 0)}; width: 100%; - transition: gap ${({ theme }) => theme.animation.duration.normal}s ease; + transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease; `; const StyledTabsPill = styled.div` align-items: center; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - background: ${({ theme }) => theme.background.secondary}; - border-radius: ${({ theme }) => theme.border.radius.pill}; + border: 1px solid ${themeCssVariables.border.color.medium}; + background: ${themeCssVariables.background.secondary}; + border-radius: ${themeCssVariables.border.radius.pill}; padding: 3px; - height: ${({ theme }) => theme.spacing(7)}; + height: ${themeCssVariables.spacing[7]}; display: flex; - width: ${({ theme }) => theme.spacing(18)}; - gap: ${({ theme }) => theme.spacing(0.5)}; + width: ${themeCssVariables.spacing[18]}; + gap: ${themeCssVariables.spacing[0.5]}; box-sizing: border-box; `; const StyledTabWrapper = styled.div<{ isActive: boolean }>` - border-radius: ${({ theme }) => theme.border.radius.pill}; + border-radius: ${themeCssVariables.border.radius.pill}; align-items: center; - background: ${({ theme, isActive }) => - isActive ? theme.background.transparent.light : 'transparent'}; - color: ${({ theme, isActive }) => - isActive ? theme.font.color.primary : theme.font.color.tertiary}; + background: ${({ isActive }) => + isActive ? themeCssVariables.background.transparent.light : 'transparent'}; + color: ${({ isActive }) => + isActive + ? themeCssVariables.font.color.primary + : themeCssVariables.font.color.tertiary}; cursor: pointer; display: flex; justify-content: center; @@ -59,10 +63,10 @@ const StyledTabWrapper = styled.div<{ isActive: boolean }>` flex: 1; &:hover { - background: ${({ theme, isActive }) => + background: ${({ isActive }) => isActive - ? theme.background.transparent.light - : theme.background.transparent.lighter}; + ? themeCssVariables.background.transparent.light + : themeCssVariables.background.transparent.lighter}; } `; @@ -70,27 +74,27 @@ const StyledTabIcon = styled.div` align-items: center; display: flex; justify-content: center; - height: ${({ theme }) => theme.spacing(5)}; - width: ${({ theme }) => theme.spacing(5)}; + height: ${themeCssVariables.spacing[5]}; + width: ${themeCssVariables.spacing[5]}; `; const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>` align-items: center; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - background: ${({ theme }) => theme.background.secondary}; - border-radius: ${({ theme }) => theme.border.radius.pill}; + border: 1px solid ${themeCssVariables.border.color.medium}; + background: ${themeCssVariables.background.secondary}; + border-radius: ${themeCssVariables.border.radius.pill}; box-sizing: border-box; display: flex; - height: ${({ theme, isExpanded }) => - isExpanded ? theme.spacing(7) : theme.spacing(6)}; + height: ${({ isExpanded }) => + isExpanded ? themeCssVariables.spacing[7] : themeCssVariables.spacing[6]}; justify-content: center; - padding: ${({ theme, isExpanded }) => - isExpanded ? '3px' : theme.spacing(0.5)}; - width: ${({ theme, isExpanded }) => - isExpanded ? theme.spacing(25.75) : theme.spacing(6)}; + padding: ${({ isExpanded }) => + isExpanded ? '3px' : themeCssVariables.spacing[0.5]}; + width: ${({ isExpanded }) => + isExpanded ? '103px' : themeCssVariables.spacing[6]}; transition: - height ${({ theme }) => theme.animation.duration.normal}s ease, - padding ${({ theme }) => theme.animation.duration.normal}s ease; + height calc(${themeCssVariables.animation.duration.normal} * 1s) ease, + padding calc(${themeCssVariables.animation.duration.normal} * 1s) ease; `; const StyledNewChatButton = styled.div` @@ -98,25 +102,25 @@ const StyledNewChatButton = styled.div` justify-content: center; display: flex; cursor: pointer; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - gap: ${({ theme }) => theme.spacing(1)}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; + gap: ${themeCssVariables.spacing[1]}; height: 100%; width: 100%; border-radius: inherit; - color: ${({ theme }) => theme.font.color.secondary}; + color: ${themeCssVariables.font.color.secondary}; transition: - background ${({ theme }) => theme.animation.duration.fast}s ease, - color ${({ theme }) => theme.animation.duration.fast}s ease; + background calc(${themeCssVariables.animation.duration.fast} * 1s) ease, + color calc(${themeCssVariables.animation.duration.fast} * 1s) ease; &:hover { - background: ${({ theme }) => theme.background.transparent.light}; - color: ${({ theme }) => theme.font.color.primary}; + background: ${themeCssVariables.background.transparent.light}; + color: ${themeCssVariables.font.color.primary}; } `; export const MainNavigationDrawerTabsRow = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const isMobile = useIsMobile(); const isNavigationDrawerExpanded = useAtomStateValue( isNavigationDrawerExpandedState, diff --git a/packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts b/packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts index 850bce9174..aa1701e8e8 100644 --- a/packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts +++ b/packages/twenty-front/src/modules/object-metadata/hooks/__mocks__/useFieldMetadataItem.ts @@ -194,7 +194,7 @@ export const responseData = { metadataVersion: 1, currentBillingSubscription: null, workspaceMembersCount: 1, - defaultRole: { + defaultRole: { id: 'default-role-id', label: 'Default Role', description: 'Default Role Description', @@ -204,7 +204,7 @@ export const responseData = { canUpdateAllObjectRecords: true, canSoftDeleteAllObjectRecords: true, canDestroyAllObjectRecords: true, - } + }, }, currentBillingSubscription: null, billingSubscriptions: [], diff --git a/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useAggregateRecords.ts b/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useAggregateRecords.ts index b590efc57a..04abc2276e 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useAggregateRecords.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useAggregateRecords.ts @@ -14,6 +14,6 @@ export const mockResponse = { opportunities: { totalCount: 42, sumAmount: 1000000, - avgAmount: 23800 - } -}; \ No newline at end of file + avgAmount: 23800, + }, +}; diff --git a/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useDeleteOneRecord.ts b/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useDeleteOneRecord.ts index 19314a79ca..c56e5bcb77 100644 --- a/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useDeleteOneRecord.ts +++ b/packages/twenty-front/src/modules/object-record/hooks/__mocks__/useDeleteOneRecord.ts @@ -8,4 +8,4 @@ export const query = gql` id } } -`; \ No newline at end of file +`; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles.ts b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles.ts index 41ceae8a63..0f127b1adf 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles.ts @@ -1,10 +1,7 @@ -import { css } from '@emotion/react'; -import { type ThemeType } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; -export const FORM_FIELD_PLACEHOLDER_STYLES = (props: { - theme: ThemeType; -}) => css` - color: ${props.theme.font.color.light}; - font-size: ${props.theme.font.size.md}; - font-weight: ${props.theme.font.weight.medium}; +export const FORM_FIELD_PLACEHOLDER_STYLES = ` + color: ${themeCssVariables.font.color.light}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.medium}; `; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts index d3c967642c..af8729f4cd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__mocks__/cell.ts @@ -10,10 +10,11 @@ export const recordTableRowContextValue: RecordTableRowContextValue = { objectNameSingular: 'objectNameSingular', }; -export const recordTableRowDraggableContextValue: RecordTableRowDraggableContextValue = { - dragHandleProps: {} as any, - isDragging: false, -}; +export const recordTableRowDraggableContextValue: RecordTableRowDraggableContextValue = + { + dragHandleProps: {} as any, + isDragging: false, + }; export const recordTableCellContextValue: RecordTableCellContextValue = { recordField: { diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx index 143cd90d9e..d1b5414ac6 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx @@ -12,7 +12,7 @@ import { RecordTableColumnFooterWithDropdown } from '@/object-record/record-tabl import { getRecordTableColumnFieldWidthClassName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthClassName'; import { cx } from '@linaria/core'; import { findByProperty, isDefined } from 'twenty-shared/utils'; -import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme-constants'; const StyledColumnFooterCell = styled.div<{ columnWidth: number; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx index a3b25307ce..651e886962 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx @@ -6,7 +6,7 @@ import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/componen import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSection'; import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { SettingsPath } from 'twenty-shared/types'; import { getSettingsPath } from 'twenty-shared/utils'; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx index 239b2ecc86..0bcbf64dff 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockContainer.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId'; diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx index 8e32e659be..8f030db2bf 100644 --- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx +++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInBackgroundMockPage.tsx @@ -1,5 +1,5 @@ import { t } from '@lingui/core/macro'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { SignInBackgroundMockContainer } from '@/sign-in-background-mock/components/SignInBackgroundMockContainer'; import { PageBody } from '@/ui/layout/page/components/PageBody'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/__mocks__/mockRsiValues.ts b/packages/twenty-front/src/modules/spreadsheet-import/__mocks__/mockRsiValues.ts index 346942c284..b5c7fc81c4 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/__mocks__/mockRsiValues.ts +++ b/packages/twenty-front/src/modules/spreadsheet-import/__mocks__/mockRsiValues.ts @@ -1,7 +1,7 @@ import { defaultSpreadsheetImportProps } from '@/spreadsheet-import/provider/components/SpreadsheetImport'; import { SpreadsheetImportDialogOptions, - SpreadsheetImportFields + SpreadsheetImportFields, } from '@/spreadsheet-import/types'; import { SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns'; import { FieldMetadataType } from 'twenty-shared/types'; @@ -162,7 +162,7 @@ export const mockRsiValues = mockComponentBehaviourForTypes({ await sleep(4000, (resolve) => resolve(data)); return data; }, - availableFieldMetadataItems: [] + availableFieldMetadataItems: [], }); export const editableTableInitialData = [ diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/Heading.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/Heading.tsx index 26b7fccd70..1c027183a2 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/Heading.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/Heading.tsx @@ -1,9 +1,11 @@ import React from 'react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; export type HeadingProps = { title: string; description?: string; + className?: string; }; const StyledContainer = styled.div` @@ -13,22 +15,22 @@ const StyledContainer = styled.div` `; const StyledTitle = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.lg}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.lg}; + font-weight: ${themeCssVariables.font.weight.semiBold}; text-align: center; `; const StyledDescription = styled.span` - color: ${({ theme }) => theme.font.color.secondary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.regular}; - margin-top: ${({ theme }) => theme.spacing(3)}; + color: ${themeCssVariables.font.color.secondary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.regular}; + margin-top: ${themeCssVariables.spacing[3]}; text-align: center; `; -export const Heading = ({ title, description }: HeadingProps) => ( - +export const Heading = ({ title, description, className }: HeadingProps) => ( + {title} {description && {description}} diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx index 62c79705f5..ea3ce68da9 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelectFieldSelectDropdownContent.tsx @@ -14,7 +14,7 @@ import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/Dropdo import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { isNonEmptyString } from '@sniptt/guards'; import { IconForbid, IconX, useIcons } from 'twenty-ui/display'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx index 0c889a1b59..eab8a45cc8 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnToFieldSelect.tsx @@ -10,7 +10,8 @@ import { type SpreadsheetImportFieldOption } from '@/spreadsheet-import/types/Sp import { hasNestedFields } from '@/spreadsheet-import/utils/spreadsheetImportHasNestedFields'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { isDefined } from 'twenty-shared/utils'; import { IconChevronDown } from 'twenty-ui/display'; import { type SelectOption } from 'twenty-ui/input'; @@ -26,9 +27,9 @@ interface MatchColumnToFieldSelectProps { } const StyledMenuItem = styled(MenuItem)` - background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + background-color: ${themeCssVariables.background.transparent.lighter}; + border: 1px solid ${themeCssVariables.border.color.medium}; + border-radius: ${themeCssVariables.border.radius.sm}; `; export const MatchColumnToFieldSelect = ({ onChange, diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx index 9ffcd272a1..b48f0693c2 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalCloseButton.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { IconX } from 'twenty-ui/display'; import { IconButton } from 'twenty-ui/input'; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx index e6352d538d..1c4f6994ea 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadSheetImportModalWrapper.tsx @@ -1,9 +1,9 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { Modal } from '@/ui/layout/modal/components/Modal'; -import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; +import { MOBILE_VIEWPORT } from 'twenty-ui/theme-constants'; import { SpreadSheetImportModalCloseButton } from './SpreadSheetImportModalCloseButton'; const StyledModal = styled(Modal)` diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx index c45ce0e2e8..68e4e00f48 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx @@ -1,31 +1,31 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; // @ts-expect-error // Todo: remove usage of react-data-grid import DataGrid, { type DataGridProps } from 'react-data-grid'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; const StyledDataGrid = styled(DataGrid)` - --rdg-background-color: ${({ theme }) => theme.background.primary}; - --rdg-border-color: ${({ theme }) => theme.border.color.medium}; - --rdg-color: ${({ theme }) => theme.font.color.primary}; - --rdg-error-cell-background-color: ${({ theme }) => - theme.color.transparent.red5}; - --rdg-font-size: ${({ theme }) => theme.font.size.sm}; + --rdg-background-color: ${themeCssVariables.background.primary}; + --rdg-border-color: ${themeCssVariables.border.color.medium}; + --rdg-color: ${themeCssVariables.font.color.primary}; + --rdg-error-cell-background-color: ${themeCssVariables.color.transparent + .red5}; + --rdg-font-size: ${themeCssVariables.font.size.sm}; --rdg-frozen-cell-box-shadow: none; - --rdg-header-background-color: ${({ theme }) => theme.background.primary}; - --rdg-info-cell-background-color: ${({ theme }) => theme.color.blue}; - --rdg-row-hover-background-color: ${({ theme }) => - theme.background.secondary}; - --rdg-row-selected-background-color: ${({ theme }) => - theme.background.primary}; - --rdg-row-selected-hover-background-color: ${({ theme }) => - theme.background.secondary}; - --rdg-selection-color: ${({ theme }) => theme.color.blue}; - --rdg-summary-border-color: ${({ theme }) => theme.border.color.medium}; - --rdg-warning-cell-background-color: ${({ theme }) => theme.color.orange}; - --row-selected-hover-background-color: ${({ theme }) => - theme.background.secondary}; + --rdg-header-background-color: ${themeCssVariables.background.primary}; + --rdg-info-cell-background-color: ${themeCssVariables.color.blue}; + --rdg-row-hover-background-color: ${themeCssVariables.background.secondary}; + --rdg-row-selected-background-color: ${themeCssVariables.background.primary}; + --rdg-row-selected-hover-background-color: ${themeCssVariables.background + .secondary}; + --rdg-selection-color: ${themeCssVariables.color.blue}; + --rdg-summary-border-color: ${themeCssVariables.border.color.medium}; + --rdg-warning-cell-background-color: ${themeCssVariables.color.orange}; + --row-selected-hover-background-color: ${themeCssVariables.background + .secondary}; border: none; block-size: 100%; @@ -33,22 +33,21 @@ const StyledDataGrid = styled(DataGrid)` .rdg-header-row .rdg-cell { box-shadow: none; - color: ${({ theme }) => theme.font.color.tertiary}; - background-color: ${({ theme }) => theme.background.secondary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; + color: ${themeCssVariables.font.color.tertiary}; + background-color: ${themeCssVariables.background.secondary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.semiBold}; letter-spacing: wider; - ${({ headerRowHeight }) => { - if (headerRowHeight === 0) { - return ` + ${({ headerRowHeight }) => + headerRowHeight === 0 + ? ` border: none; - `; - } - }}; + ` + : ''}; } .rdg-cell { - border-bottom: 1px solid ${({ theme }) => theme.border.color.medium}; + border-bottom: 1px solid ${themeCssVariables.border.color.medium}; border-inline-end: none; border-right: none; box-shadow: none; @@ -66,15 +65,15 @@ const StyledDataGrid = styled(DataGrid)` } .rdg-cell-error { - background-color: ${({ theme }) => theme.color.yellow3}; + background-color: ${themeCssVariables.color.yellow3}; } .rdg-cell-warning { - background-color: ${({ theme }) => theme.color.transparent.orange2}; + background-color: ${themeCssVariables.color.transparent.orange2}; } .rdg-cell-info { - background-color: ${({ theme }) => theme.color.transparent.blue2}; + background-color: ${themeCssVariables.color.transparent.blue2}; } .rdg-static { @@ -136,7 +135,7 @@ export const SpreadsheetImportTable = ({ selectedRows, }: SpreadsheetImportTableProps) => { const { rtl } = useSpreadsheetImportInternal(); - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const themeClassName = theme.name === 'dark' ? 'rdg-dark' : 'rdg-light'; if (!rows?.length || !columns?.length) return null; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx index 9f77dc3ed2..1e64f28dc1 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/components/StepNavigationButton.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { Modal } from '@/ui/layout/modal/components/Modal'; import { t } from '@lingui/core/macro'; @@ -7,11 +8,11 @@ import { MainButton } from 'twenty-ui/input'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; const StyledFooter = styled(Modal.Footer)` - border-top: 1px solid ${({ theme }) => theme.border.color.medium}; - box-shadow: ${({ theme }) => theme.boxShadow.strong}; + border-top: 1px solid ${themeCssVariables.border.color.medium}; + box-shadow: ${themeCssVariables.boxShadow.strong}; gap: 10px; justify-content: space-between; - padding: ${({ theme }) => theme.spacing(4)}; + padding: ${themeCssVariables.spacing[4]}; height: auto; `; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx index 3ab2ba8d14..a6221468a9 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/provider/components/SpreadsheetImportProvider.tsx @@ -1,5 +1,5 @@ -import { useTheme } from '@emotion/react'; -import React from 'react'; +import React, { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; @@ -17,7 +17,7 @@ const SpreadsheetImport = React.lazy(() => ); const LoadingSkeleton = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - margin-bottom: ${({ theme }) => theme.spacing(2)}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.medium}; + margin-bottom: ${themeCssVariables.spacing[2]}; `; const StyledDescription = styled.span` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.regular}; - margin-bottom: ${({ theme }) => theme.spacing(5)}; + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.regular}; + margin-bottom: ${themeCssVariables.spacing[5]}; `; type ImportDataStepProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx index 3e68bf43e1..eefa904c91 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useCallback, useMemo, useState } from 'react'; import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton'; @@ -31,6 +31,7 @@ import { type SpreadsheetImportField } from '@/spreadsheet-import/types/Spreadsh import { useAtomFamilySelectorState } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorState'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { Trans, useLingui } from '@lingui/react/macro'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContent = styled(Modal.Content)` align-items: center; @@ -41,19 +42,19 @@ const StyledColumnsContainer = styled.div` align-items: center; display: flex; flex-direction: column; - margin-bottom: ${({ theme }) => theme.spacing(4)}; + margin-bottom: ${themeCssVariables.spacing[4]}; `; const StyledColumns = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; `; const StyledColumn = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.regular}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.regular}; `; export type MatchColumnsStepProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx index 4690deaf7d..bbc4512489 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx @@ -1,6 +1,7 @@ import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns'; import { t } from '@lingui/core/macro'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import React from 'react'; const StyledGridContainer = styled.div` @@ -25,8 +26,8 @@ type HeightProps = { }; const StyledGridRow = styled.div` - border-bottom: ${({ withBorder, theme }) => - withBorder && `1px solid ${theme.border.color.medium}`}; + border-bottom: ${({ withBorder }) => + withBorder ? `1px solid ${themeCssVariables.border.color.medium}` : 'none'}; box-sizing: border-box; display: flex; flex-direction: row; @@ -43,44 +44,44 @@ const StyledGridCell = styled.div` display: flex; flex: 1; overflow-x: auto; - padding-bottom: ${({ theme }) => theme.spacing(4)}; - padding-top: ${({ theme }) => theme.spacing(4)}; - ${({ position, theme }) => { + padding-bottom: ${themeCssVariables.spacing[4]}; + padding-top: ${themeCssVariables.spacing[4]}; + ${({ position }) => { if (position === 'left') { return ` - padding-left: ${theme.spacing(4)}; - padding-right: ${theme.spacing(2)}; - padding-top: ${theme.spacing(4)}; + padding-left: ${themeCssVariables.spacing[4]}; + padding-right: ${themeCssVariables.spacing[2]}; + padding-top: ${themeCssVariables.spacing[4]}; `; } if (position === 'full-line') { return ` - padding-left: ${theme.spacing(2)}; - padding-right: ${theme.spacing(4)}; - padding-top: ${theme.spacing(0)}; + padding-left: ${themeCssVariables.spacing[2]}; + padding-right: ${themeCssVariables.spacing[4]}; + padding-top: ${themeCssVariables.spacing[0]}; width: 100%; `; } return ` - padding-left: ${theme.spacing(2)}; - padding-right: ${theme.spacing(4)}; - padding-top: ${theme.spacing(4)}; + padding-left: ${themeCssVariables.spacing[2]}; + padding-right: ${themeCssVariables.spacing[4]}; + padding-top: ${themeCssVariables.spacing[4]}; `; }}; `; const StyledGridHeader = styled.div` align-items: center; - background-color: ${({ theme }) => theme.background.secondary}; - border-bottom: 1px solid ${({ theme }) => theme.border.color.medium}; + background-color: ${themeCssVariables.background.secondary}; + border-bottom: 1px solid ${themeCssVariables.border.color.medium}; box-sizing: border-box; - color: ${({ theme }) => theme.font.color.light}; + color: ${themeCssVariables.font.color.light}; display: flex; flex: 1; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.semiBold}; - padding-left: ${({ theme }) => theme.spacing(4)}; - padding-right: ${({ theme }) => theme.spacing(4)}; + font-size: ${themeCssVariables.font.size.xs}; + font-weight: ${themeCssVariables.font.weight.semiBold}; + padding-left: ${themeCssVariables.spacing[4]}; + padding-right: ${themeCssVariables.spacing[4]}; `; type ColumnGridProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx index 6842b31363..bd6556ee6b 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer.tsx @@ -1,18 +1,19 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledControlContainer = styled.div<{ cursor: string }>` align-items: center; - background-color: ${({ theme }) => theme.background.transparent.lighter}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; + background-color: ${themeCssVariables.background.transparent.lighter}; + border: 1px solid ${themeCssVariables.border.color.medium}; box-sizing: border-box; - border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${({ theme }) => theme.font.color.primary}; + border-radius: ${themeCssVariables.border.radius.sm}; + color: ${themeCssVariables.font.color.primary}; cursor: ${({ cursor }) => cursor}; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; - height: ${({ theme }) => theme.spacing(8)}; + gap: ${themeCssVariables.spacing[1]}; + height: ${themeCssVariables.spacing[8]}; justify-content: space-between; - padding: 0 ${({ theme }) => theme.spacing(2)}; + padding: 0 ${themeCssVariables.spacing[2]}; width: 100%; `; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx index 5d862fb411..69e0a8b0d7 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectDropdownButton.tsx @@ -7,13 +7,15 @@ import { import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions'; import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions'; -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { Tag, type TagColor } from 'twenty-ui/components'; import { IconChevronDown } from 'twenty-ui/display'; import { type SelectOption } from 'twenty-ui/input'; const StyledIconChevronDown = styled(IconChevronDown)` - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${themeCssVariables.font.color.tertiary}; `; export type SubMatchingSelectDropdownButtonProps = { @@ -33,7 +35,7 @@ export const SubMatchingSelectDropdownButton = ({ const options = getFieldOptions(fields, column.value) as SelectOption[]; const value = options.find((opt) => opt.value === option.value); - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRow.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRow.tsx index 401de20452..375a4a2694 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRow.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRow.tsx @@ -5,14 +5,15 @@ import { type SpreadsheetMatchedSelectOptionsColumn, } from '@/spreadsheet-import/types/SpreadsheetColumn'; import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledRowContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(4)}; + gap: ${themeCssVariables.spacing[4]}; justify-content: space-between; - padding-bottom: ${({ theme }) => theme.spacing(1)}; + padding-bottom: ${themeCssVariables.spacing[1]}; `; interface SubMatchingSelectRowProps { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx index e8b771b858..bdf9d9fd4a 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowLeftSelect.tsx @@ -1,18 +1,19 @@ import { SubMatchingSelectControlContainer } from '@/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectControlContainer'; import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledLabel = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-weight: ${({ theme }) => theme.font.weight.regular}; - font-size: ${({ theme }) => theme.font.size.md}; + color: ${themeCssVariables.font.color.primary}; + font-weight: ${themeCssVariables.font.weight.regular}; + font-size: ${themeCssVariables.font.size.md}; `; const StyledControlLabel = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; `; export type SubMatchingSelectRowLeftSelectProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowRightDropdown.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowRightDropdown.tsx index 6c216e7a6e..6718edb0f5 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowRightDropdown.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelectRowRightDropdown.tsx @@ -11,7 +11,7 @@ import { import { type SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { type SelectOption } from 'twenty-ui/input'; const StyledDropdownContainer = styled.div` diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx index e7a1e18c22..30e7c3fcc8 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { MatchColumnToFieldSelect } from '@/spreadsheet-import/components/MatchColumnToFieldSelect'; import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey'; @@ -19,10 +20,10 @@ const StyledContainer = styled.div` `; const StyledErrorMessage = styled.span` - color: ${({ theme }) => theme.font.color.danger}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.regular}; - margin-top: ${({ theme }) => theme.spacing(1)}; + color: ${themeCssVariables.font.color.danger}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.regular}; + margin-top: ${themeCssVariables.spacing[1]}; `; type TemplateColumnProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx index dfe030ccd3..781ed52db4 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumn.tsx @@ -5,7 +5,8 @@ import { type SpreadsheetImportFields } from '@/spreadsheet-import/types'; import { type SpreadsheetColumn } from '@/spreadsheet-import/types/SpreadsheetColumn'; import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns'; import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { t } from '@lingui/core/macro'; import { useLingui } from '@lingui/react/macro'; import { useState } from 'react'; @@ -41,9 +42,9 @@ const StyledContainer = styled.div` const StyledContentWrapper = styled.div` display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(3)}; - margin-top: ${({ theme }) => theme.spacing(4)}; - padding-bottom: ${({ theme }) => theme.spacing(4)}; + gap: ${themeCssVariables.spacing[3]}; + margin-top: ${themeCssVariables.spacing[4]}; + padding-bottom: ${themeCssVariables.spacing[4]}; `; export const UnmatchColumn = ({ diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx index 0a1f555529..1525deb9c5 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx @@ -1,43 +1,45 @@ -import { useTheme } from '@emotion/react'; -import isPropValid from '@emotion/is-prop-valid'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display'; +import { ThemeContext } from 'twenty-ui/theme'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; -const StyledBanner = styled(Banner, { - shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'allMatched', -})<{ allMatched: boolean }>` - background: ${({ allMatched, theme }) => - allMatched ? theme.accent.secondary : theme.background.transparent.light}; - border-radius: ${({ theme }) => theme.spacing(2)}; - padding: ${({ theme }) => theme.spacing(2) + ' 10px'}; +const StyledBanner = styled(Banner)<{ allMatched: boolean }>` + background: ${({ allMatched }) => + allMatched + ? themeCssVariables.accent.secondary + : themeCssVariables.background.transparent.light}; + border-radius: ${themeCssVariables.spacing[2]}; + padding: ${themeCssVariables.spacing[2]} 10px; `; -const StyledText = styled('div', { - shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'allMatched', -})<{ allMatched: boolean }>` - color: ${({ allMatched, theme }) => - allMatched ? theme.color.blue : theme.font.color.secondary}; +const StyledText = styled.div<{ allMatched: boolean }>` + color: ${({ allMatched }) => + allMatched + ? themeCssVariables.color.blue + : themeCssVariables.font.color.secondary}; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `; -const StyledTransitionedIconChevronDown = styled(IconChevronDown, { - shouldForwardProp: (prop) => - isPropValid(prop) && !['isExpanded', 'allMatched'].includes(prop), -})<{ +const StyledIconChevronDownWrapper = styled.div<{ isExpanded: boolean; allMatched: boolean; }>` - color: ${({ allMatched, theme }) => - allMatched ? theme.color.blue : theme.font.color.secondary}; + align-items: center; + color: ${({ allMatched }) => + allMatched + ? themeCssVariables.color.blue + : themeCssVariables.font.color.secondary}; + cursor: pointer; + display: flex; transform: ${({ isExpanded }) => isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'}; - transition: ${({ theme }) => - `transform ${theme.animation.duration.normal}s ease`}; - cursor: pointer; + transition: transform + calc(${themeCssVariables.animation.duration.normal} * 1s) ease; `; const StyledClickableContainer = styled.div` @@ -61,7 +63,7 @@ export const UnmatchColumnBanner = ({ buttonOnClick?: () => void; allMatched: boolean; }) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( @@ -72,11 +74,12 @@ export const UnmatchColumnBanner = ({ {isDefined(buttonOnClick) ? ( {message} - + > + + ) : ( {message} diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx index a92be3f86c..ab8fa59f5e 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { type ImportedRow } from '@/spreadsheet-import/types'; @@ -12,18 +13,18 @@ const StyledContainer = styled.div` `; const StyledValue = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.medium}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; `; const StyledExample = styled.span` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx index 1785cce333..8ee0beef4d 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useCallback, useState } from 'react'; import { Heading } from '@/spreadsheet-import/components/Heading'; @@ -15,7 +16,7 @@ import { useLingui } from '@lingui/react/macro'; import { SelectHeaderTable } from './components/SelectHeaderTable'; const StyledHeading = styled(Heading)` - margin-bottom: ${({ theme }) => theme.spacing(8)}; + margin-bottom: ${themeCssVariables.spacing[8]}; `; const StyledTableContainer = styled.div` diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx index 07470139f5..7b3a65d26a 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useCallback, useState } from 'react'; import { Heading } from '@/spreadsheet-import/components/Heading'; @@ -12,6 +12,7 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook'; import { Modal } from '@/ui/layout/modal/components/Modal'; import { useLingui } from '@lingui/react/macro'; import { Radio, RadioGroup } from 'twenty-ui/input'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { type WorkBook } from 'xlsx-ugnis'; const StyledContent = styled(Modal.Content)` @@ -19,7 +20,7 @@ const StyledContent = styled(Modal.Content)` display: flex; flex-direction: column; justify-content: center; - gap: ${({ theme }) => theme.spacing(8)}; + gap: ${themeCssVariables.spacing[8]}; `; const StyledHeading = styled(Heading)` @@ -32,7 +33,7 @@ const StyledRadioContainer = styled.div` `; const StyledRadio = styled(Radio)` - margin-bottom: ${({ theme }) => theme.spacing(6)}; + margin-bottom: ${themeCssVariables.spacing[6]}; `; type SelectSheetStepProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx index dda1d0dd28..37c16883c6 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepper.tsx @@ -1,6 +1,6 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; -import { useCallback, useState } from 'react'; +import { styled } from '@linaria/react'; +import { useCallback, useContext, useState } from 'react'; +import { ThemeContext } from 'twenty-ui/theme'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; @@ -31,7 +31,7 @@ export const SpreadsheetImportStepper = ({ nextStep, prevStep, }: SpreadsheetImportStepperProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const { initialStepState } = useSpreadsheetImportInternal(); diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx index be540b46a1..8c593ed396 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useSpreadsheetImportInitialStep } from '@/spreadsheet-import/hooks/useSpreadsheetImportInitialStep'; import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal'; @@ -10,18 +10,18 @@ import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spread import { Modal } from '@/ui/layout/modal/components/Modal'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useLingui } from '@lingui/react/macro'; -import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; +import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; import { SpreadsheetImportStepper } from './SpreadsheetImportStepper'; const StyledHeader = styled(Modal.Header)` - background-color: ${({ theme }) => theme.background.secondary}; - border-bottom: 1px solid ${({ theme }) => theme.border.color.medium}; - padding: 0px ${({ theme }) => theme.spacing(30)}; + background-color: ${themeCssVariables.background.secondary}; + border-bottom: 1px solid ${themeCssVariables.border.color.medium}; + padding: 0px ${themeCssVariables.spacing[30]}; height: 60px; flex-shrink: 0; @media (max-width: ${MOBILE_VIEWPORT}px) { - padding-left: ${({ theme }) => theme.spacing(4)}; - padding-right: ${({ theme }) => theme.spacing(4)}; + padding-left: ${themeCssVariables.spacing[4]}; + padding-right: ${themeCssVariables.spacing[4]}; } `; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx index ef67fd1748..c911280664 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx @@ -1,5 +1,6 @@ import { t } from '@lingui/core/macro'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useCallback, useState } from 'react'; import { type WorkBook } from 'xlsx-ugnis'; @@ -14,7 +15,7 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook'; import { DropZone } from './components/DropZone'; const StyledContent = styled(Modal.Content)` - padding: ${({ theme }) => theme.spacing(6)}; + padding: ${themeCssVariables.spacing[6]}; `; type UploadStepProps = { diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx index e8dab6ed76..bc24de46d1 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx @@ -1,4 +1,5 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useState } from 'react'; import { useDropzone } from 'react-dropzone'; import { read, type WorkBook } from 'xlsx-ugnis'; @@ -14,40 +15,38 @@ import { MainButton } from 'twenty-ui/input'; const StyledContainer = styled.div` align-items: center; - background: ${({ theme }) => ` - repeating-linear-gradient( + background: repeating-linear-gradient( 0deg, - ${theme.font.color.primary}, - ${theme.font.color.primary} 10px, + ${themeCssVariables.font.color.primary}, + ${themeCssVariables.font.color.primary} 10px, transparent 10px, transparent 20px, - ${theme.font.color.primary} 20px + ${themeCssVariables.font.color.primary} 20px ), repeating-linear-gradient( 90deg, - ${theme.font.color.primary}, - ${theme.font.color.primary} 10px, + ${themeCssVariables.font.color.primary}, + ${themeCssVariables.font.color.primary} 10px, transparent 10px, transparent 20px, - ${theme.font.color.primary} 20px + ${themeCssVariables.font.color.primary} 20px ), repeating-linear-gradient( 180deg, - ${theme.font.color.primary}, - ${theme.font.color.primary} 10px, + ${themeCssVariables.font.color.primary}, + ${themeCssVariables.font.color.primary} 10px, transparent 10px, transparent 20px, - ${theme.font.color.primary} 20px + ${themeCssVariables.font.color.primary} 20px ), repeating-linear-gradient( 270deg, - ${theme.font.color.primary}, - ${theme.font.color.primary} 10px, + ${themeCssVariables.font.color.primary}, + ${themeCssVariables.font.color.primary} 10px, transparent 10px, transparent 20px, - ${theme.font.color.primary} 20px + ${themeCssVariables.font.color.primary} 20px ); - `}; background-position: 0 0, 0 0, @@ -59,7 +58,7 @@ const StyledContainer = styled.div` 100% 2px, 2px 100%, 100% 2px; - border-radius: ${({ theme }) => theme.border.radius.sm}; + border-radius: ${themeCssVariables.border.radius.sm}; display: flex; flex: 1; flex-direction: column; @@ -68,8 +67,8 @@ const StyledContainer = styled.div` `; const StyledOverlay = styled.div` - background: ${({ theme }) => theme.background.transparent.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + background: ${themeCssVariables.background.transparent.medium}; + border-radius: ${themeCssVariables.border.radius.sm}; bottom: 0px; left: 0px; position: absolute; @@ -78,20 +77,20 @@ const StyledOverlay = styled.div` `; const StyledText = styled.span` - color: ${({ theme }) => theme.font.color.primary}; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; + color: ${themeCssVariables.font.color.primary}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; text-align: center; padding: 16px; `; const StyledFooterText = styled.span` - color: ${({ theme }) => theme.font.color.tertiary}; - font-size: ${({ theme }) => theme.font.size.xs}; - font-weight: ${({ theme }) => theme.font.weight.regular}; + color: ${themeCssVariables.font.color.tertiary}; + font-size: ${themeCssVariables.font.size.xs}; + font-weight: ${themeCssVariables.font.weight.regular}; text-align: center; position: absolute; - bottom: ${({ theme }) => theme.spacing(4)}; + bottom: ${themeCssVariables.spacing[4]}; left: 50%; transform: translateX(-50%); width: 100%; @@ -101,7 +100,7 @@ const StyledButtonsContainer = styled.div` align-items: center; display: flex; flex-direction: column; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; max-width: 200px; width: 100%; `; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx index 2928c44aa8..1dcdd5cca8 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx @@ -13,7 +13,8 @@ import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetCol import { addErrorsAndRunHooks } from '@/spreadsheet-import/utils/dataMutations'; import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager'; import { Modal } from '@/ui/layout/modal/components/Modal'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { Trans, useLingui } from '@lingui/react/macro'; import { type Dispatch, @@ -37,10 +38,10 @@ const StyledContent = styled(Modal.Content)` const StyledToolbar = styled.div` align-items: center; - border-radius: ${({ theme }) => theme.border.radius.md}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - background-color: ${({ theme }) => theme.background.secondary}; - bottom: ${({ theme }) => theme.spacing(3)}; + border-radius: ${themeCssVariables.border.radius.md}; + border: 1px solid ${themeCssVariables.border.color.medium}; + background-color: ${themeCssVariables.background.secondary}; + bottom: ${themeCssVariables.spacing[3]}; display: flex; flex-direction: row; justify-content: space-between; @@ -48,9 +49,9 @@ const StyledToolbar = styled.div` position: absolute; transform: translateX(-50%); width: 400px; - padding: ${({ theme }) => theme.spacing(3)}; + padding: ${themeCssVariables.spacing[3]}; z-index: 1; - box-shadow: ${({ theme }) => theme.boxShadow.strong}; + box-shadow: ${themeCssVariables.boxShadow.strong}; `; const StyledButton = styled(Button)` @@ -64,10 +65,10 @@ const StyledErrorToggle = styled.div` `; const StyledErrorToggleDescription = styled.span` - color: ${({ theme }) => theme.font.color.secondary}; - font-size: ${({ theme }) => theme.font.size.md}; - font-weight: ${({ theme }) => theme.font.weight.regular}; - margin-left: ${({ theme }) => theme.spacing(2)}; + color: ${themeCssVariables.font.color.secondary}; + font-size: ${themeCssVariables.font.size.md}; + font-weight: ${themeCssVariables.font.weight.regular}; + margin-left: ${themeCssVariables.spacing[2]}; `; const StyledScrollContainer = styled.div` @@ -82,11 +83,11 @@ const StyledNoRowsContainer = styled.div` display: flex; grid-column: 1/-1; justify-content: center; - margin-top: ${({ theme }) => theme.spacing(8)}; + margin-top: ${themeCssVariables.spacing[8]}; `; const StyledNoRowsWithErrorsContainer = styled.div` - color: ${({ theme }) => theme.font.color.tertiary}; + color: ${themeCssVariables.font.color.tertiary}; display: flex; justify-content: center; margin: auto 0; diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx index ce59b26b9e..73b9fad5b8 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx +++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx @@ -1,5 +1,6 @@ import { t } from '@lingui/core/macro'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; // @ts-expect-error // Todo: remove usage of react-data-grid import { type Column, useRowSelection } from 'react-data-grid'; import { createPortal } from 'react-dom'; @@ -19,7 +20,7 @@ import { type ImportedStructuredRowMetadata } from '@/spreadsheet-import/steps/c const StyledHeaderContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; position: relative; `; @@ -52,7 +53,7 @@ const StyledInputContainer = styled.div` display: flex; min-height: 100%; min-width: 100%; - padding-right: ${({ theme }) => theme.spacing(2)}; + padding-right: ${themeCssVariables.spacing[2]}; `; const StyledDefaultContainer = styled.div` @@ -63,7 +64,7 @@ const StyledDefaultContainer = styled.div` `; const StyledSelectReadonlyValueContianer = styled.div` - padding-left: ${({ theme }) => theme.spacing(2)}; + padding-left: ${themeCssVariables.spacing[2]}; `; const SELECT_COLUMN_KEY = 'select-row'; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx index ee2851d6ec..19c9596ece 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx +++ b/packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx @@ -1,9 +1,7 @@ import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; import { IconCheck, IconX } from 'twenty-ui/display'; -import { THEME_COMMON } from 'twenty-ui/theme'; - -const iconSizeSm = THEME_COMMON.icon.size.sm; +const iconSizeSm = 14; const StyledBooleanFieldValue = styled.div` margin-left: 4px; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx index 7181312f5b..b53ff596de 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx @@ -50,13 +50,16 @@ export const DropdownMenuItemsContainer = ({ children, hasMaxHeight, scrollable = true, + className, }: { children: React.ReactNode; hasMaxHeight?: boolean; scrollable?: boolean; + className?: string; }) => { return scrollable === true ? ( ) : ( - + {children} ); diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx index ccb18ba0cd..3e535e3271 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx @@ -21,13 +21,15 @@ const StyledSectionInnerContainerMinusScrollPadding = styled.div<{ export const NavigationDrawerSection = ({ children, + className, }: { children: React.ReactNode; + className?: string; }) => { const isMobile = useIsMobile(); const isSettingsDrawer = useIsSettingsDrawer(); return ( - + ` align-items: center; - background-color: ${({ theme, variant }) => { + background-color: ${({ variant }) => { switch (variant) { case 'danger': - return theme.background.danger; + return themeCssVariables.background.danger; case 'default': default: - return theme.accent.quaternary; + return themeCssVariables.accent.quaternary; } }}; border: 1px solid - ${({ theme, variant }) => { + ${({ variant }) => { switch (variant) { case 'danger': - return theme.border.color.danger; + return themeCssVariables.border.color.danger; case 'default': default: - return theme.accent.tertiary; + return themeCssVariables.accent.tertiary; } }}; border-radius: 4px; - color: ${({ theme, variant }) => { + color: ${({ variant }) => { switch (variant) { case 'danger': - return theme.color.red; + return themeCssVariables.color.red; case 'default': default: - return theme.color.blue; + return themeCssVariables.color.blue; } }}; height: 24px; @@ -39,11 +41,11 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>` display: flex; flex-direction: row; flex-shrink: 0; - font-size: ${({ theme }) => theme.font.size.sm}; - font-weight: ${({ theme }) => theme.font.weight.medium}; - padding: ${({ theme }) => theme.spacing(0.5)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - column-gap: ${({ theme }) => theme.spacing(1)}; + font-size: ${themeCssVariables.font.size.sm}; + font-weight: ${themeCssVariables.font.weight.medium}; + padding: ${themeCssVariables.spacing[0.5]}; + padding-left: ${themeCssVariables.spacing[1]}; + column-gap: ${themeCssVariables.spacing[1]}; user-select: none; white-space: nowrap; `; @@ -61,7 +63,7 @@ const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>` justify-content: center; align-items: center; cursor: pointer; - font-size: ${({ theme }) => theme.font.size.sm}; + font-size: ${themeCssVariables.font.size.sm}; user-select: none; padding: 0; margin: 0; @@ -70,29 +72,29 @@ const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>` color: inherit; &:hover { - background-color: ${({ theme, variant }) => { + background-color: ${({ variant }) => { switch (variant) { case 'danger': - return theme.color.red5; + return themeCssVariables.color.red5; case 'default': default: - return theme.accent.secondary; + return themeCssVariables.accent.secondary; } }}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + border-radius: ${themeCssVariables.border.radius.sm}; } `; const StyledLabelKey = styled.div` - font-weight: ${({ theme }) => theme.font.weight.medium}; + font-weight: ${themeCssVariables.font.weight.medium}; `; const StyledFilterValue = styled.span` - font-weight: ${({ theme }) => theme.font.weight.regular}; + font-weight: ${themeCssVariables.font.weight.regular}; `; const StyledSortValue = styled.span` - font-weight: ${({ theme }) => theme.font.weight.medium}; + font-weight: ${themeCssVariables.font.weight.medium}; `; const StyledKeyLabelContainer = styled.div` @@ -124,7 +126,7 @@ export const SortOrFilterChip = ({ onClick, type, }: SortOrFilterChipProps) => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const handleDeleteClick = (e: React.MouseEvent) => { e.stopPropagation(); diff --git a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx index fd43a35034..35000db344 100644 --- a/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx +++ b/packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; @@ -26,11 +26,12 @@ import { t } from '@lingui/core/macro'; import { IconChevronDown, IconPlus } from 'twenty-ui/display'; import { Button, ButtonGroup, IconButton } from 'twenty-ui/input'; import { MenuItem } from 'twenty-ui/navigation'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` - border-radius: ${({ theme }) => theme.border.radius.md}; + border-radius: ${themeCssVariables.border.radius.md}; display: inline-flex; - margin-right: ${({ theme }) => theme.spacing(2)}; + margin-right: ${themeCssVariables.spacing[2]}; position: relative; `; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx index c63a066be1..65715be302 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { type ReactNode, useMemo } from 'react'; import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural'; @@ -36,6 +36,7 @@ import { t } from '@lingui/core/macro'; import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards'; import { isDefined } from 'twenty-shared/utils'; import { LightButton } from 'twenty-ui/input'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; export type ViewBarDetailsProps = { hasFilterButton?: boolean; @@ -46,15 +47,13 @@ export type ViewBarDetailsProps = { const StyledBar = styled.div` align-items: center; - align-items: center; - border-top: 1px solid ${({ theme }) => theme.border.color.light}; - border-top: 1px solid ${({ theme }) => theme.border.color.light}; + border-top: 1px solid ${themeCssVariables.border.color.light}; display: flex; flex-direction: row; justify-content: space-between; min-height: 32px; - padding-top: ${({ theme }) => theme.spacing(1)}; - padding-bottom: ${({ theme }) => theme.spacing(1)}; + padding-top: ${themeCssVariables.spacing[1]}; + padding-bottom: ${themeCssVariables.spacing[1]}; z-index: 4; `; @@ -62,20 +61,20 @@ const StyledChipContainer = styled.div` align-items: center; display: flex; flex-direction: row; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; z-index: 1; `; const StyledActionButtonContainer = styled.div` display: flex; flex-direction: row; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${themeCssVariables.spacing[2]}; `; const StyledFilterContainer = styled.div` align-items: center; display: flex; - gap: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; overflow-x: hidden; `; @@ -84,15 +83,15 @@ const StyledSeparatorContainer = styled.div` align-items: flex-start; align-self: stretch; display: flex; - padding-bottom: ${({ theme }) => theme.spacing(2)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-right: ${({ theme }) => theme.spacing(1)}; - padding-top: ${({ theme }) => theme.spacing(2)}; + padding-bottom: ${themeCssVariables.spacing[2]}; + padding-left: ${themeCssVariables.spacing[1]}; + padding-right: ${themeCssVariables.spacing[1]}; + padding-top: ${themeCssVariables.spacing[2]}; `; const StyledSeparator = styled.div` align-self: stretch; - background: ${({ theme }) => theme.background.quaternary}; + background: ${themeCssVariables.background.quaternary}; width: 1px; `; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx index ec5a1c6172..7011e4263f 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx @@ -16,18 +16,19 @@ import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { RecordFilterGroupLogicalOperator } from 'twenty-shared/types'; import { isDefined } from 'twenty-shared/utils'; import { Pill } from 'twenty-ui/components'; import { IconFilter } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { v4 } from 'uuid'; const StyledPill = styled(Pill)` - background: ${({ theme }) => theme.color.blue3}; - color: ${({ theme }) => theme.color.blue}; + background: ${themeCssVariables.color.blue3}; + color: ${themeCssVariables.color.blue}; `; export const ViewBarFilterDropdownAdvancedFilterButton = () => { diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx index 4a19b51397..99694df6af 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx @@ -2,18 +2,19 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState'; import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue'; import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { useLingui } from '@lingui/react/macro'; import { IconSearch } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds'; import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; const StyledSearchText = styled.span` - color: ${({ theme }) => theme.font.color.light}; - margin-left: ${({ theme }) => theme.spacing(1)}; + color: ${themeCssVariables.font.color.light}; + margin-left: ${themeCssVariables.spacing[1]}; `; type ViewBarFilterDropdownAnyFieldSearchButtonMenuItemProps = { diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx index 116ae1b5bf..73974a323f 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx @@ -1,13 +1,14 @@ import { ViewBarFilterDropdownAdvancedFilterButton } from '@/views/components/ViewBarFilterDropdownAdvancedFilterButton'; import { ViewBarFilterDropdownAnyFieldSearchButton } from '@/views/components/ViewBarFilterDropdownAnyFieldSearchButton'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledContainer = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: space-between; - padding: ${({ theme }) => theme.spacing(1)}; + padding: ${themeCssVariables.spacing[1]}; `; export const ViewBarFilterDropdownBottomMenu = () => { diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx index f1f8f20ca6..a468d6aca0 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import React from 'react'; import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState'; @@ -24,22 +24,23 @@ import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarF import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds'; import { useLingui } from '@lingui/react/macro'; import { IconX } from 'twenty-ui/display'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; export const StyledInput = styled.input` background: transparent; border: none; border-top: none; - border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + border-bottom: 1px solid ${themeCssVariables.border.color.light}; border-radius: 0; - border-top-left-radius: ${({ theme }) => theme.border.radius.md}; - border-top-right-radius: ${({ theme }) => theme.border.radius.md}; - color: ${({ theme }) => theme.font.color.primary}; + border-top-left-radius: ${themeCssVariables.border.radius.md}; + border-top-right-radius: ${themeCssVariables.border.radius.md}; + color: ${themeCssVariables.font.color.primary}; margin: 0; outline: none; - padding: ${({ theme }) => theme.spacing(2)}; + padding: ${themeCssVariables.spacing[2]}; min-height: 19px; font-family: inherit; - font-size: ${({ theme }) => theme.font.size.sm}; + font-size: ${themeCssVariables.font.size.sm}; font-weight: inherit; max-width: 100%; @@ -47,7 +48,7 @@ export const StyledInput = styled.input` text-decoration: none; &::placeholder { - color: ${({ theme }) => theme.font.color.light}; + color: ${themeCssVariables.font.color.light}; } `; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx b/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx index a82565afa8..eba2279312 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx @@ -1,9 +1,10 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader'; -import { useTheme } from '@emotion/react'; +import { useContext } from 'react'; import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; +import { ThemeContext } from 'twenty-ui/theme'; export const ViewBarSkeletonLoader = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); return ( theme.font.color.light}; + color: ${themeCssVariables.font.color.light}; display: flex; - margin: ${({ theme }) => theme.spacing(1, 2)}; + margin: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}; user-select: none; - width: calc(100% - ${({ theme }) => theme.spacing(4)}); + width: calc(100% - ${themeCssVariables.spacing[4]}); `; export const ViewPickerContentCreateMode = () => { diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx index ebe458784a..6945b5345f 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx @@ -1,6 +1,6 @@ -import { useTheme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { t } from '@lingui/core/macro'; +import { useContext } from 'react'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer'; @@ -23,7 +23,8 @@ import { OverflowingTextWithTooltip, useIcons, } from 'twenty-ui/display'; -import { MOBILE_VIEWPORT } from 'twenty-ui/theme'; +import { ThemeContext } from 'twenty-ui/theme'; +import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants'; const StyledIconContainer = styled.span` display: flex; @@ -32,15 +33,15 @@ const StyledIconContainer = styled.span` const StyledDropdownLabelAdornments = styled.span` align-items: center; - color: ${({ theme }) => theme.grayScale.gray8}; + color: ${themeCssVariables.grayScale.gray8}; display: flex; flex-shrink: 0; - gap: ${({ theme }) => theme.spacing(1)}; - margin-left: ${({ theme }) => theme.spacing(1)}; + gap: ${themeCssVariables.spacing[1]}; + margin-left: ${themeCssVariables.spacing[1]}; `; const StyledViewName = styled.span` - margin-left: ${({ theme }) => theme.spacing(1)}; + margin-left: ${themeCssVariables.spacing[1]}; max-width: 130px; min-width: 0; overflow: hidden; @@ -53,7 +54,7 @@ const StyledViewName = styled.span` `; export const ViewPickerDropdown = () => { - const theme = useTheme(); + const { theme } = useContext(ThemeContext); const { currentView } = useGetCurrentViewOnly(); diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx index 78b332b808..38835594e8 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerIconAndNameContainer.tsx @@ -1,11 +1,12 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledIconAndNameContainer = styled.div` align-items: center; display: flex; - margin-left: ${({ theme }) => theme.spacing(1)}; - margin-right: ${({ theme }) => theme.spacing(1)}; - gap: ${({ theme }) => theme.spacing(1)}; + margin-left: ${themeCssVariables.spacing[1]}; + margin-right: ${themeCssVariables.spacing[1]}; + gap: ${themeCssVariables.spacing[1]}; `; export { StyledIconAndNameContainer as ViewPickerIconAndNameContainer }; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx index aa3a97ca50..bb88f89df2 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx @@ -1,4 +1,4 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; import { type DropResult } from '@hello-pangea/dnd'; import { type MouseEvent, useCallback } from 'react'; @@ -24,11 +24,12 @@ import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/sta import { useLingui } from '@lingui/react/macro'; import { IconPlus } from 'twenty-ui/display'; import { MenuItem } from 'twenty-ui/navigation'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { ViewVisibility } from '~/generated-metadata/graphql'; import { moveArrayItem } from '~/utils/array/moveArrayItem'; const StyledBoldDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)` - font-weight: ${({ theme }) => theme.font.weight.regular}; + font-weight: ${themeCssVariables.font.weight.regular}; `; export const ViewPickerListContent = () => { diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSaveButtonContainer.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSaveButtonContainer.tsx index 6dd2763eec..90e4b95126 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSaveButtonContainer.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSaveButtonContainer.tsx @@ -1,9 +1,10 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSaveButtonContainer = styled.div` display: flex; - padding: ${({ theme }) => theme.spacing(1)}; - width: calc(100% - ${({ theme }) => theme.spacing(2)}); + padding: ${themeCssVariables.spacing[1]}; + width: calc(100% - ${themeCssVariables.spacing[2]}); `; export { StyledSaveButtonContainer as ViewPickerSaveButtonContainer }; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx index c72ebc6860..babe7753ba 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerSelectContainer.tsx @@ -1,10 +1,11 @@ -import styled from '@emotion/styled'; +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledSelectContainer = styled.div` display: flex; - width: calc(100% - ${({ theme }) => theme.spacing(2)}); - margin: ${({ theme }) => theme.spacing(1)}; - color: ${({ theme }) => theme.font.color.light}; + width: calc(100% - ${themeCssVariables.spacing[2]}); + margin: ${themeCssVariables.spacing[1]}; + color: ${themeCssVariables.font.color.light}; user-select: none; `; diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts index d63368cabb..bd7e481bdb 100644 --- a/packages/twenty-front/vite.config.ts +++ b/packages/twenty-front/vite.config.ts @@ -112,19 +112,121 @@ export default defineConfig(({ command, mode }) => { ...wyw({ include: [ '**/twenty-ui/src/**/*.{ts,tsx}', - '**/EllipsisDisplay.tsx', - '**/BooleanDisplay.tsx', - '**/RatingInput.tsx', - '**/RecordTableCellDisplayContainer.tsx', + '**/AdvancedTextEditor.tsx', + '**/BubbleMenuIconButton.tsx', + '**/TextBubbleMenu.tsx', + '**/TurnIntoBlockDropdown.tsx', + '**/WorkflowAttachmentChip.tsx', + '**/WorkflowSendEmailAttachments.tsx', + '**/ResizableImageView.tsx', + '**/SettingsBillingSubscriptionInfo.tsx', + '**/SubscriptionBenefit.tsx', + '**/SubscriptionInfoContainer.tsx', + '**/SubscriptionPrice.tsx', + '**/TrialCard.tsx', + '**/MeteredPriceSelector.tsx', + '**/PlansTags.tsx', + '**/SettingsBillingLabelValueItem.tsx', + '**/SubscriptionInfoRowContainer.tsx', + '**/FileBlock.tsx', + '**/MentionInlineContent.tsx', + '**/BlockEditor.tsx', + '**/CustomMentionMenu.tsx', + '**/CustomSideMenu.tsx', + '**/CustomSideMenuOptions.tsx', + '**/CustomSlashMenu.tsx', + '**/CurrentWorkspaceMemberOrphanFavorites.tsx', + '**/FavoritesBackButton.tsx', + '**/FavoritesDroppable.tsx', + '**/FavoritesSkeletonLoader.tsx', + '**/FavoriteFolderPickerList.tsx', + '**/InformationBanner.tsx', + '**/InformationBannerWrapper.tsx', + '**/InformationBannerDeletedRecord.tsx', + '**/AddToNavigationDragHandle.tsx', + '**/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx', + '**/NavigationItemDropTarget.tsx', + '**/NavigationMenuEditModeBar.tsx', + '**/NavigationMenuItemBackButton.tsx', + '**/NavigationMenuItemDroppable.tsx', + '**/NavigationMenuItemIconContainer.tsx', + '**/NavigationMenuItemSkeletonLoader.tsx', + '**/ObjectIconWithViewOverlay.tsx', + '**/WorkspaceNavigationMenuItems.tsx', + '**/WorkspaceNavigationMenuItemsFolder.tsx', + '**/MainNavigationDrawerAIChatContent.tsx', + '**/MainNavigationDrawerNavigationContent.tsx', + '**/MainNavigationDrawerScrollableItems.tsx', + '**/MainNavigationDrawerTabsRow.tsx', '**/RecordTableCellBaseContainer.tsx', + '**/RecordTableCellDisplayContainer.tsx', + '**/RecordTableCellFirstRowFirstColumn.tsx', + '**/RecordTableCellLoading.tsx', '**/RecordTableCellStyleWrapper.tsx', - '**/TextDisplay.tsx', - '**/EmailsDisplay.tsx', - '**/PhonesDisplay.tsx', - '**/MultiSelectDisplay.tsx', + '**/RecordTableDragAndDropPlaceholderCell.tsx', + '**/RecordTableAggregateFooterCell.tsx', + '**/RecordTableHeaderAddColumnButton.tsx', + '**/RecordTableHeaderCell.tsx', + '**/RecordTableHeaderCheckboxColumn.tsx', + '**/RecordTableHeaderDragDropColumn.tsx', + '**/RecordTableHeaderFirstCell.tsx', + '**/RecordTableHeaderFirstScrollableCell.tsx', + '**/RecordTableHeaderLastEmptyColumn.tsx', + '**/RecordTableAddButtonPlaceholderCell.tsx', + '**/RecordTableGroupSectionLastDynamicFillingCell.tsx', + '**/RecordTableLastDynamicFillingCell.tsx', '**/RecordTableRowVirtualizedContainer.tsx', '**/RecordTableVirtualizedBodyPlaceholder.tsx', - '**/RecordTableCellLoading.tsx', + '**/SignInAppNavigationDrawerMock.tsx', + '**/SignInBackgroundMockContainer.tsx', + '**/SignInBackgroundMockPage.tsx', + '**/Heading.tsx', + '**/MatchColumnSelectFieldSelectDropdownContent.tsx', + '**/MatchColumnToFieldSelect.tsx', + '**/SpreadSheetImportModalCloseButton.tsx', + '**/SpreadSheetImportModalWrapper.tsx', + '**/SpreadsheetImportTable.tsx', + '**/StepNavigationButton.tsx', + '**/ImportDataStep.tsx', + '**/MatchColumnsStep.tsx', + '**/ColumnGrid.tsx', + '**/SubMatchingSelectControlContainer.tsx', + '**/SubMatchingSelectDropdownButton.tsx', + '**/SubMatchingSelectRow.tsx', + '**/SubMatchingSelectRowLeftSelect.tsx', + '**/SubMatchingSelectRowRightDropdown.tsx', + '**/TemplateColumn.tsx', + '**/UnmatchColumn.tsx', + '**/UnmatchColumnBanner.tsx', + '**/UserTableColumn.tsx', + '**/SelectHeaderStep.tsx', + '**/SelectSheetStep.tsx', + '**/SpreadsheetImportStepper.tsx', + '**/SpreadsheetImportStepperContainer.tsx', + '**/UploadStep.tsx', + '**/DropZone.tsx', + '**/ValidationStep.tsx', + '**/columns.tsx', + '**/BooleanDisplay.tsx', + '**/EllipsisDisplay.tsx', + '**/EmailsDisplay.tsx', + '**/MultiSelectDisplay.tsx', + '**/PhonesDisplay.tsx', + '**/TextDisplay.tsx', + '**/RatingInput.tsx', + '**/SortOrFilterChip.tsx', + '**/UpdateViewButtonGroup.tsx', + '**/ViewBarDetails.tsx', + '**/ViewBarFilterDropdownAdvancedFilterButton.tsx', + '**/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx', + '**/ViewBarFilterDropdownBottomMenu.tsx', + '**/ViewBarFilterDropdownFieldSelectMenu.tsx', + '**/ViewPickerContentCreateMode.tsx', + '**/ViewPickerDropdown.tsx', + '**/ViewPickerIconAndNameContainer.tsx', + '**/ViewPickerListContent.tsx', + '**/ViewPickerSaveButtonContainer.tsx', + '**/ViewPickerSelectContainer.tsx', ], babelOptions: { presets: ['@babel/preset-typescript', '@babel/preset-react'], @@ -257,8 +359,6 @@ export default defineConfig(({ command, mode }) => { resolve: { alias: { path: 'rollup-plugin-node-polyfills/polyfills/path', - // https://github.com/twentyhq/twenty/pull/10782/files - // This will likely be migrated to twenty-ui package when built separately '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs', }, }, diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json index c090bb9df3..0aeeef25ed 100644 --- a/packages/twenty-ui/package.json +++ b/packages/twenty-ui/package.json @@ -61,6 +61,7 @@ "navigation", "testing", "theme", + "theme-constants", "utilities" ], "exports": { @@ -125,6 +126,11 @@ "import": "./dist/theme.mjs", "require": "./dist/theme.cjs" }, + "./theme-constants": { + "types": "./dist/theme-constants/index.d.ts", + "import": "./dist/theme-constants.mjs", + "require": "./dist/theme-constants.cjs" + }, "./utilities": { "types": "./dist/utilities/index.d.ts", "import": "./dist/utilities.mjs", @@ -166,6 +172,9 @@ "theme": [ "dist/theme/index.d.ts" ], + "theme-constants": [ + "dist/theme-constants/index.d.ts" + ], "utilities": [ "dist/utilities/index.d.ts" ] diff --git a/packages/twenty-ui/project.json b/packages/twenty-ui/project.json index 3751d98d5a..2494d12d6e 100644 --- a/packages/twenty-ui/project.json +++ b/packages/twenty-ui/project.json @@ -36,10 +36,28 @@ "{projectRoot}/testing/dist", "{projectRoot}/theme/package.json", "{projectRoot}/theme/dist", + "{projectRoot}/theme-constants/package.json", + "{projectRoot}/theme-constants/dist", "{projectRoot}/utilities/package.json", "{projectRoot}/utilities/dist" ] }, + "generateThemeConstants": { + "executor": "nx:run-commands", + "dependsOn": [ + "build" + ], + "cache": true, + "inputs": [ + "{projectRoot}/scripts/generateThemeConstants.ts" + ], + "outputs": [ + "{projectRoot}/src/theme-constants/generated" + ], + "options": { + "command": "tsx {projectRoot}/scripts/generateThemeConstants.ts" + } + }, "generateBarrels": { "executor": "nx:run-commands", "cache": true, diff --git a/packages/twenty-ui/scripts/generateThemeConstants.ts b/packages/twenty-ui/scripts/generateThemeConstants.ts new file mode 100644 index 0000000000..3e34080d45 --- /dev/null +++ b/packages/twenty-ui/scripts/generateThemeConstants.ts @@ -0,0 +1,129 @@ +// Generates static TypeScript files with pre-computed theme constants. +// These values are string literals with no runtime imports, so wyw-in-js +// can evaluate them in its restricted sandbox without triggering the +// twenty-ui dist bundle's dependency chain (safe-regex-test / get-intrinsic). +// +// Usage (from workspace root): +// npx tsx packages/twenty-ui/scripts/generateThemeConstants.ts +// +// Prerequisites: twenty-ui must be built first (npx nx build twenty-ui). + +import { createRequire } from 'node:module'; +import { writeFileSync, mkdirSync } from 'node:fs'; +import { dirname, resolve } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const scriptDir = dirname(fileURLToPath(import.meta.url)); +const require = createRequire(import.meta.url); + +const { + MOBILE_VIEWPORT, + THEME_LIGHT, + THEME_DARK, + prepareThemeForRootCssVariableInjection, +} = require('../dist/theme.cjs'); + +const { themeCssVariables: existingThemeCssVariables } = + require('../dist/theme-constants.cjs'); + +const themeCssVariables = + existingThemeCssVariables ?? + (() => { + const { buildThemeReferencingRootCssVariables } = + require('../dist/theme.cjs'); + return buildThemeReferencingRootCssVariables({ + themeNode: THEME_LIGHT, + prefix: 't', + }); + })(); + +const HEADER = `\ +// Auto-generated by scripts/generateThemeConstants.ts — do not edit manually. +// Regenerate: npx tsx packages/twenty-ui/scripts/generateThemeConstants.ts +`; + +const serializeObject = ( + obj: Record, + indent = 2, +): string => { + const spaces = ' '.repeat(indent); + const entries = Object.entries(obj).map(([key, value]) => { + const safeKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) + ? key + : JSON.stringify(key); + + if (typeof value === 'object' && value !== null) { + return `${spaces}${safeKey}: ${serializeObject(value as Record, indent + 2)},`; + } + return `${spaces}${safeKey}: ${JSON.stringify(value)},`; + }); + + return `{\n${entries.join('\n')}\n${' '.repeat(indent - 2)}}`; +}; + +const serializeTupleArray = (entries: [string, string][]): string => { + const lines = entries.map( + ([name, value]) => ` [${JSON.stringify(name)}, ${JSON.stringify(value)}],`, + ); + return `[\n${lines.join('\n')}\n]`; +}; + +const outputDir = resolve(scriptDir, '../src/theme-constants/generated'); +mkdirSync(outputDir, { recursive: true }); + +// --- themeCssVariables.ts --- + +writeFileSync( + resolve(outputDir, 'themeCssVariables.ts'), + `${HEADER} +import type { ThemeType } from '@ui/theme/types/ThemeType'; + +type DeepCSSVariableRefs = { + [K in keyof T]: T[K] extends (...args: never[]) => unknown + ? Record + : T[K] extends Record + ? DeepCSSVariableRefs + : string; +}; + +export const themeCssVariables = ${serializeObject(themeCssVariables)} as DeepCSSVariableRefs; +`, + 'utf-8', +); +console.log('Generated themeCssVariables.ts'); + +// --- themeLightCssVariableEntries.ts --- + +const lightEntries = prepareThemeForRootCssVariableInjection({ + themeNode: THEME_LIGHT, + prefix: 't', +}) as [string, string][]; + +writeFileSync( + resolve(outputDir, 'themeLightCssVariableEntries.ts'), + `${HEADER} +// CSS custom properties don't work in media queries, so MOBILE_VIEWPORT +// must be a static number rather than a var(--...) reference. +export const MOBILE_VIEWPORT = ${MOBILE_VIEWPORT}; + +export const THEME_LIGHT_CSS_VARIABLE_ENTRIES: [string, string][] = ${serializeTupleArray(lightEntries)}; +`, + 'utf-8', +); +console.log('Generated themeLightCssVariableEntries.ts'); + +// --- themeDarkCssVariableEntries.ts --- + +const darkEntries = prepareThemeForRootCssVariableInjection({ + themeNode: THEME_DARK, + prefix: 't', +}) as [string, string][]; + +writeFileSync( + resolve(outputDir, 'themeDarkCssVariableEntries.ts'), + `${HEADER} +export const THEME_DARK_CSS_VARIABLE_ENTRIES: [string, string][] = ${serializeTupleArray(darkEntries)}; +`, + 'utf-8', +); +console.log('Generated themeDarkCssVariableEntries.ts'); diff --git a/packages/twenty-ui/src/components/Pill/Pill.tsx b/packages/twenty-ui/src/components/Pill/Pill.tsx index 069ee0af95..4c433225a4 100644 --- a/packages/twenty-ui/src/components/Pill/Pill.tsx +++ b/packages/twenty-ui/src/components/Pill/Pill.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type PillProps = { className?: string; diff --git a/packages/twenty-ui/src/components/chip/Chip.tsx b/packages/twenty-ui/src/components/chip/Chip.tsx index 4aca3d53be..6c1a7d45d9 100644 --- a/packages/twenty-ui/src/components/chip/Chip.tsx +++ b/packages/twenty-ui/src/components/chip/Chip.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import { type ReactNode } from 'react'; import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; export enum ChipSize { Large = 'large', diff --git a/packages/twenty-ui/src/components/tag/Tag.tsx b/packages/twenty-ui/src/components/tag/Tag.tsx index 634815c574..c93bfb5cbf 100644 --- a/packages/twenty-ui/src/components/tag/Tag.tsx +++ b/packages/twenty-ui/src/components/tag/Tag.tsx @@ -3,7 +3,8 @@ import { useContext } from 'react'; import { type IconComponent } from '@ui/display/icon/types/IconComponent'; import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; -import { type ThemeColor, ThemeContext, themeCssVariables } from '@ui/theme'; +import { type ThemeColor, ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { isDefined } from 'twenty-shared/utils'; const StyledTag = styled.h3<{ diff --git a/packages/twenty-ui/src/display/banner/components/Banner.tsx b/packages/twenty-ui/src/display/banner/components/Banner.tsx index 0a394a157f..240e19d672 100644 --- a/packages/twenty-ui/src/display/banner/components/Banner.tsx +++ b/packages/twenty-ui/src/display/banner/components/Banner.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledBanner = styled.div<{ variant?: BannerVariant }>` align-items: center; diff --git a/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx b/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx index cecd05f0ab..1fe0f2a072 100644 --- a/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx +++ b/packages/twenty-ui/src/display/banner/components/SidePanelInformationBanner.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { isDefined } from 'twenty-shared/utils'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { IconAlertTriangle, IconInfoCircle, diff --git a/packages/twenty-ui/src/display/callout/Callout.tsx b/packages/twenty-ui/src/display/callout/Callout.tsx index dacc3be4af..f59bb1d55b 100644 --- a/packages/twenty-ui/src/display/callout/Callout.tsx +++ b/packages/twenty-ui/src/display/callout/Callout.tsx @@ -4,7 +4,7 @@ import { type IconComponent } from '@ui/display/icon/types/IconComponent'; import { LightButton, LightIconButton } from '@ui/input'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; export type CalloutVariant = | 'info' diff --git a/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx b/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx index f2c51ea31c..68cc37b0ba 100644 --- a/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx +++ b/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx @@ -3,7 +3,8 @@ import React, { useContext } from 'react'; import { styled } from '@linaria/react'; import { IconCheck } from '@ui/display/icon/components/TablerIcons'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-ui/src/display/color/components/ColorSample.tsx b/packages/twenty-ui/src/display/color/components/ColorSample.tsx index 1c9b048224..dd0602f44f 100644 --- a/packages/twenty-ui/src/display/color/components/ColorSample.tsx +++ b/packages/twenty-ui/src/display/color/components/ColorSample.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; -import { type ThemeColor, themeCssVariables } from '@ui/theme'; +import { type ThemeColor } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { isDefined } from 'twenty-shared/utils'; export type ColorSampleVariant = 'default' | 'pipeline'; diff --git a/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx b/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx index f51b71b69e..55882d63fe 100644 --- a/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx +++ b/packages/twenty-ui/src/display/command-block/components/CommandBlock.tsx @@ -1,6 +1,6 @@ import { type ReactElement } from 'react'; import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledContainer = styled.div` border-radius: ${themeCssVariables.border.radius.sm}; diff --git a/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx b/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx index fdff3d204a..ed484f6636 100644 --- a/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx +++ b/packages/twenty-ui/src/display/icon/components/IllustrationIconWrapper.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; // eslint-disable-next-line twenty/styled-components-prefixed-with-styled export const IllustrationIconWrapper = styled.div` diff --git a/packages/twenty-ui/src/display/info/components/Info.tsx b/packages/twenty-ui/src/display/info/components/Info.tsx index afb4ae5d35..60a7e43c61 100644 --- a/packages/twenty-ui/src/display/info/components/Info.tsx +++ b/packages/twenty-ui/src/display/info/components/Info.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { Button } from '@ui/input/button/components/Button/Button'; import React, { useContext } from 'react'; diff --git a/packages/twenty-ui/src/display/status/components/Status.tsx b/packages/twenty-ui/src/display/status/components/Status.tsx index 99b4d1043b..aa5b44f214 100644 --- a/packages/twenty-ui/src/display/status/components/Status.tsx +++ b/packages/twenty-ui/src/display/status/components/Status.tsx @@ -1,9 +1,6 @@ import { styled } from '@linaria/react'; -import { - MAIN_COLOR_NAMES, - themeCssVariables, - type ThemeColor, -} from '@ui/theme'; +import { MAIN_COLOR_NAMES, type ThemeColor } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { Loader } from '@ui/feedback/loader/components/Loader'; diff --git a/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx b/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx index 88f87a6ab1..5cb2292252 100644 --- a/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx +++ b/packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledContainer = styled.div` display: flex; diff --git a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx index b2354fe9dd..2d1944e4b3 100644 --- a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx +++ b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { type PlacesType, type PositionStrategy, Tooltip } from 'react-tooltip'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; export enum TooltipPosition { Top = 'top', diff --git a/packages/twenty-ui/src/display/typography/components/H1Title.tsx b/packages/twenty-ui/src/display/typography/components/H1Title.tsx index 7e11ab0d44..6e79a46c1c 100644 --- a/packages/twenty-ui/src/display/typography/components/H1Title.tsx +++ b/packages/twenty-ui/src/display/typography/components/H1Title.tsx @@ -1,6 +1,6 @@ import { type ReactNode } from 'react'; import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type H1TitleProps = { title: ReactNode; diff --git a/packages/twenty-ui/src/display/typography/components/H2Title.tsx b/packages/twenty-ui/src/display/typography/components/H2Title.tsx index d71823a981..2468951aca 100644 --- a/packages/twenty-ui/src/display/typography/components/H2Title.tsx +++ b/packages/twenty-ui/src/display/typography/components/H2Title.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type H2TitleProps = { title: string; diff --git a/packages/twenty-ui/src/display/typography/components/H3Title.tsx b/packages/twenty-ui/src/display/typography/components/H3Title.tsx index 8af5341dea..bb2322d4a3 100644 --- a/packages/twenty-ui/src/display/typography/components/H3Title.tsx +++ b/packages/twenty-ui/src/display/typography/components/H3Title.tsx @@ -1,7 +1,7 @@ import { type ReactNode } from 'react'; import { styled } from '@linaria/react'; import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type H3TitleProps = { title: ReactNode; diff --git a/packages/twenty-ui/src/display/typography/components/Label.tsx b/packages/twenty-ui/src/display/typography/components/Label.tsx index f5ef78788a..54412405c9 100644 --- a/packages/twenty-ui/src/display/typography/components/Label.tsx +++ b/packages/twenty-ui/src/display/typography/components/Label.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; export type LabelVariant = 'default' | 'small'; diff --git a/packages/twenty-ui/src/display/typography/components/StyledText.tsx b/packages/twenty-ui/src/display/typography/components/StyledText.tsx index 57c0000463..2a97b2546e 100644 --- a/packages/twenty-ui/src/display/typography/components/StyledText.tsx +++ b/packages/twenty-ui/src/display/typography/components/StyledText.tsx @@ -1,6 +1,6 @@ import { type ReactElement, type ReactNode } from 'react'; import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type StyledTextProps = { PrefixComponent?: ReactElement; diff --git a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx index e16ce9733c..11d4eaf851 100644 --- a/packages/twenty-ui/src/feedback/loader/components/Loader.tsx +++ b/packages/twenty-ui/src/feedback/loader/components/Loader.tsx @@ -1,5 +1,6 @@ import { styled } from '@linaria/react'; -import { type ThemeColor, themeCssVariables } from '@ui/theme'; +import { type ThemeColor } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { motion } from 'framer-motion'; const StyledLoaderContainer = styled.div<{ diff --git a/packages/twenty-ui/src/feedback/progress-bar/components/ProgressBar.tsx b/packages/twenty-ui/src/feedback/progress-bar/components/ProgressBar.tsx index b93438cb46..24bb3ce6fb 100644 --- a/packages/twenty-ui/src/feedback/progress-bar/components/ProgressBar.tsx +++ b/packages/twenty-ui/src/feedback/progress-bar/components/ProgressBar.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { motion } from 'framer-motion'; import { useState } from 'react'; diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx index 5b5e55ec47..6524425a8a 100644 --- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx +++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx @@ -6,7 +6,8 @@ import React, { useContext, useMemo } from 'react'; import { Link } from 'react-router-dom'; import { Pill } from '@ui/components/Pill/Pill'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type ButtonAccent, type ButtonPosition, diff --git a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx index c4f53328eb..7240b25a9a 100644 --- a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx @@ -4,7 +4,8 @@ import { type LightIconButtonAccent, type LightIconButtonSize, } from '@ui/input/button/components/LightIconButton'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { motion, type MotionProps } from 'framer-motion'; import { type ComponentProps, type MouseEvent, useContext } from 'react'; diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx index 93f65040f4..e1eb330d87 100644 --- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx @@ -3,7 +3,8 @@ import { type IconComponent } from '@ui/display/icon/types/IconComponent'; import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/ButtonHotKeys'; import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon'; import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon'; -import { GRAY_SCALE_LIGHT, themeCssVariables } from '@ui/theme'; +import { GRAY_SCALE_LIGHT } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useIsMobile } from '@ui/utilities'; import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes'; import React, { useMemo, useState } from 'react'; diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx index a0dd63949f..8474757bd9 100644 --- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx @@ -5,7 +5,7 @@ import { type ButtonSize, type ButtonVariant, } from '@ui/input'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { getOsShortcutSeparator } from '@ui/utilities'; const StyledSeparator = styled.div<{ diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx index 347d6e78ff..d90a7af5ba 100644 --- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx @@ -2,7 +2,8 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; import { Loader } from '@ui/feedback'; import { baseTransitionTiming } from '@ui/input/button/components/Button/constant'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useContext } from 'react'; const StyledIcon = styled.div<{ diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx index 52b139ab59..818bbc6ff8 100644 --- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx +++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonText.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { baseTransitionTiming } from '@ui/input/button/components/Button/constant'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledEllipsis = styled.div<{ isLoading?: boolean }>` right: 0; diff --git a/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx index 278eb8f6b0..6e479959a9 100644 --- a/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx +++ b/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import React, { type ReactNode } from 'react'; import { type ButtonPosition, type ButtonProps } from './Button/Button'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { isDefined } from 'twenty-shared/utils'; const StyledButtonGroupContainer = styled.div` diff --git a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx index 9fa25a714e..fb45afb77f 100644 --- a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx +++ b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { ColorSample, type ColorSampleProps } from '@ui/display'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { LightIconButton, type LightIconButtonProps, diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx index 2a7e57123d..691d3439b0 100644 --- a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx +++ b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useContext } from 'react'; import { Link } from 'react-router-dom'; diff --git a/packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx index 0dd37245ee..38e448ac2e 100644 --- a/packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx +++ b/packages/twenty-ui/src/input/button/components/FloatingButtonGroup.tsx @@ -5,7 +5,7 @@ import { type FloatingButtonPosition, type FloatingButtonProps, } from './FloatingButton'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { isDefined } from 'twenty-shared/utils'; const StyledFloatingButtonGroupContainer = styled.div` diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx index 2e711dec30..23a85a55ae 100644 --- a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import React, { useContext } from 'react'; export type FloatingIconButtonSize = 'small' | 'medium'; diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx index edbee251bc..897f8744e4 100644 --- a/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx +++ b/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx @@ -7,7 +7,7 @@ import { type FloatingIconButtonPosition, type FloatingIconButtonProps, } from './FloatingIconButton'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledFloatingIconButtonGroupContainer = styled.div` backdrop-filter: blur(20px); diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx index a404673d97..e6eb594e4b 100644 --- a/packages/twenty-ui/src/input/button/components/IconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { GRAY_SCALE_LIGHT, ThemeContext, themeCssVariables } from '@ui/theme'; +import { GRAY_SCALE_LIGHT, ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import React, { useContext, useMemo } from 'react'; export type IconButtonSize = 'medium' | 'small'; diff --git a/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx index 65ad4e429a..5441942169 100644 --- a/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx +++ b/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx @@ -3,7 +3,7 @@ import { type IconComponent } from '@ui/display'; import { type MouseEvent } from 'react'; import { InsideButton } from '@ui/input/button/components/InsideButton'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; export type IconButtonGroupProps = { disabled?: boolean; diff --git a/packages/twenty-ui/src/input/button/components/InsideButton.tsx b/packages/twenty-ui/src/input/button/components/InsideButton.tsx index ba3c34fb3c..d02048905c 100644 --- a/packages/twenty-ui/src/input/button/components/InsideButton.tsx +++ b/packages/twenty-ui/src/input/button/components/InsideButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import React, { useContext } from 'react'; export type InsideButtonProps = { diff --git a/packages/twenty-ui/src/input/button/components/LightButton.tsx b/packages/twenty-ui/src/input/button/components/LightButton.tsx index 7d8caa603c..15a49d5854 100644 --- a/packages/twenty-ui/src/input/button/components/LightButton.tsx +++ b/packages/twenty-ui/src/input/button/components/LightButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type MouseEvent, useContext } from 'react'; export type LightButtonAccent = 'secondary' | 'tertiary'; diff --git a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx index 04d0487e2e..4b222b1334 100644 --- a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type ComponentProps, type MouseEvent, useContext } from 'react'; export type LightIconButtonAccent = 'secondary' | 'tertiary'; diff --git a/packages/twenty-ui/src/input/button/components/MainButton.tsx b/packages/twenty-ui/src/input/button/components/MainButton.tsx index 408b6ebc96..8c09bc1448 100644 --- a/packages/twenty-ui/src/input/button/components/MainButton.tsx +++ b/packages/twenty-ui/src/input/button/components/MainButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import React, { type FunctionComponent, useContext } from 'react'; export type MainButtonVariant = 'primary' | 'secondary'; diff --git a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx index f913a6a869..a12f275d0f 100644 --- a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx +++ b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useContext } from 'react'; export type RoundedIconButtonSize = 'small' | 'medium'; diff --git a/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx index 7602e0dd00..1b29ab221a 100644 --- a/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx +++ b/packages/twenty-ui/src/input/button/components/TabButton/internals/components/StyledTabBase.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; export const StyledTabButton = styled.button<{ active?: boolean; diff --git a/packages/twenty-ui/src/input/button/components/__stories__/TabButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/TabButton.stories.tsx index b45e97fd33..ae11df7cc4 100644 --- a/packages/twenty-ui/src/input/button/components/__stories__/TabButton.stories.tsx +++ b/packages/twenty-ui/src/input/button/components/__stories__/TabButton.stories.tsx @@ -17,7 +17,7 @@ import { JotaiRootDecorator, } from '@ui/testing'; import { type ReactNode } from 'react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledTabContainer = styled.div` display: flex; diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx index 35bfd31acd..14d89414b7 100644 --- a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx +++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx @@ -3,7 +3,8 @@ import Editor, { type EditorProps, type Monaco } from '@monaco-editor/react'; import { Loader } from '@ui/feedback/loader/components/Loader'; import { BASE_CODE_EDITOR_THEME_ID } from '@ui/input/code-editor/constants/BaseCodeEditorThemeId'; import { getBaseCodeEditorTheme } from '@ui/input/code-editor/theme/utils/getBaseCodeEditorTheme'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type editor } from 'monaco-editor'; import { type KeyboardEvent, useContext, useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx index d1212e0f94..4c06146484 100644 --- a/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx +++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditorHeader.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledEditorHeader = styled.div` align-items: center; diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx index 67cde275d3..0ac79f1f74 100644 --- a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx @@ -1,11 +1,8 @@ import { styled } from '@linaria/react'; import { Checkmark } from '@ui/display/checkmark/components/Checkmark'; import { type ColorScheme } from '@ui/input/types/ColorScheme'; -import { - GRAY_SCALE_DARK, - GRAY_SCALE_LIGHT, - themeCssVariables, -} from '@ui/theme'; +import { GRAY_SCALE_DARK, GRAY_SCALE_LIGHT } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { AnimatePresence, type AnimationControls, diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx index 76e21fe20d..8b6e9f0068 100644 --- a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx +++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemePicker.tsx @@ -1,7 +1,8 @@ import { styled } from '@linaria/react'; import { type ColorScheme } from '@ui/input/types/ColorScheme'; -import { MOBILE_VIEWPORT, themeCssVariables } from '@ui/theme'; +import { MOBILE_VIEWPORT } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { ColorSchemeCard } from './ColorSchemeCard'; const StyledContainer = styled.div` diff --git a/packages/twenty-ui/src/input/components/CardPicker.tsx b/packages/twenty-ui/src/input/components/CardPicker.tsx index 6e77868ef8..eb9a4b0932 100644 --- a/packages/twenty-ui/src/input/components/CardPicker.tsx +++ b/packages/twenty-ui/src/input/components/CardPicker.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { Radio } from './Radio'; const StyledSubscriptionCardContainer = styled.button` diff --git a/packages/twenty-ui/src/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx index 9d17519680..d73dae3c22 100644 --- a/packages/twenty-ui/src/input/components/Checkbox.tsx +++ b/packages/twenty-ui/src/input/components/Checkbox.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { IconCheck, IconMinus } from '@ui/display/icon/components/TablerIcons'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import * as React from 'react'; export enum CheckboxVariant { diff --git a/packages/twenty-ui/src/input/components/Radio.tsx b/packages/twenty-ui/src/input/components/Radio.tsx index 8b338acba4..2740b81df8 100644 --- a/packages/twenty-ui/src/input/components/Radio.tsx +++ b/packages/twenty-ui/src/input/components/Radio.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import { motion } from 'framer-motion'; import * as React from 'react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { RadioGroup } from './RadioGroup'; export enum RadioSize { diff --git a/packages/twenty-ui/src/input/components/RadioGroup.tsx b/packages/twenty-ui/src/input/components/RadioGroup.tsx index 6fc7806d0d..1671b09d47 100644 --- a/packages/twenty-ui/src/input/components/RadioGroup.tsx +++ b/packages/twenty-ui/src/input/components/RadioGroup.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { type RadioProps } from './Radio'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type RadioGroupProps = React.PropsWithChildren & { value?: string; diff --git a/packages/twenty-ui/src/input/components/SearchInput.tsx b/packages/twenty-ui/src/input/components/SearchInput.tsx index d2373d31f5..52aa0e0f55 100644 --- a/packages/twenty-ui/src/input/components/SearchInput.tsx +++ b/packages/twenty-ui/src/input/components/SearchInput.tsx @@ -1,7 +1,8 @@ import { styled } from '@linaria/react'; import { IconFilter, IconSearch } from '@ui/display'; import { IconButton } from '@ui/input/button/components/IconButton'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type ChangeEvent, type ReactNode, useContext, useState } from 'react'; export type SearchInputProps = { diff --git a/packages/twenty-ui/src/input/components/Toggle.tsx b/packages/twenty-ui/src/input/components/Toggle.tsx index 83ea7fcf5d..44ad6b73ad 100644 --- a/packages/twenty-ui/src/input/components/Toggle.tsx +++ b/packages/twenty-ui/src/input/components/Toggle.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { VisibilityHiddenInput } from '@ui/accessibility'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { motion } from 'framer-motion'; export type ToggleSize = 'small' | 'medium'; diff --git a/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx b/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx index 935bd21a4d..738e2fe92b 100644 --- a/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx @@ -7,7 +7,8 @@ import { JsonNodeValue } from '@ui/json-visualizer/components/internal/JsonNodeV import { JsonNode } from '@ui/json-visualizer/components/JsonNode'; import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow'; import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting'; -import { ANIMATION, themeCssVariables } from '@ui/theme'; +import { ANIMATION } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { AnimatePresence, motion } from 'framer-motion'; import { useState } from 'react'; import { isDefined } from 'twenty-shared/utils'; diff --git a/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx b/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx index fe1e48618d..30925a4d37 100644 --- a/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/JsonValueNode.tsx @@ -4,7 +4,7 @@ import { JsonListItem } from '@ui/json-visualizer/components/internal/JsonListIt import { JsonNodeLabel } from '@ui/json-visualizer/components/internal/JsonNodeLabel'; import { JsonNodeValue } from '@ui/json-visualizer/components/internal/JsonNodeValue'; import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledListItem = styled(JsonListItem)` column-gap: ${themeCssVariables.spacing[2]}; diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx index 8e2b8a9a7f..870f9764ff 100644 --- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonArrow.tsx @@ -2,7 +2,8 @@ import { styled } from '@linaria/react'; import { VisibilityHidden } from '@ui/accessibility'; import { IconChevronDown } from '@ui/display'; import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow'; -import { ANIMATION, ThemeContext, themeCssVariables } from '@ui/theme'; +import { ANIMATION, ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { motion } from 'framer-motion'; import { useContext } from 'react'; diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonList.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonList.tsx index c6a5b560b9..a8ac3fbad0 100644 --- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonList.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonList.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledList = styled.ul<{ depth: number }>` margin: 0; diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx index 8a7ad25c26..4899c7ded6 100644 --- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx @@ -1,7 +1,8 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display'; import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useContext } from 'react'; const StyledLabelContainer = styled.span<{ diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx index f5254df4f8..42a7e90224 100644 --- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx +++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow'; import { type JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledText = styled.span<{ highlighting: JsonNodeHighlighting | undefined; diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx index de93d2d3dc..419c681fe5 100644 --- a/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx +++ b/packages/twenty-ui/src/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type HTMLMotionProps, motion } from 'framer-motion'; import { type ReactNode } from 'react'; diff --git a/packages/twenty-ui/src/layout/animated-placeholder/components/ErrorPlaceholderStyled.tsx b/packages/twenty-ui/src/layout/animated-placeholder/components/ErrorPlaceholderStyled.tsx index ec5066817f..cb2c0babcd 100644 --- a/packages/twenty-ui/src/layout/animated-placeholder/components/ErrorPlaceholderStyled.tsx +++ b/packages/twenty-ui/src/layout/animated-placeholder/components/ErrorPlaceholderStyled.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; // eslint-disable-next-line twenty/styled-components-prefixed-with-styled export const AnimatedPlaceholderErrorContainer = styled.div` diff --git a/packages/twenty-ui/src/layout/card/components/Card.tsx b/packages/twenty-ui/src/layout/card/components/Card.tsx index eb3891da75..f2091cd4c2 100644 --- a/packages/twenty-ui/src/layout/card/components/Card.tsx +++ b/packages/twenty-ui/src/layout/card/components/Card.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type ComponentPropsWithoutRef } from 'react'; const StyledCard = styled.div<{ diff --git a/packages/twenty-ui/src/layout/card/components/CardContent.tsx b/packages/twenty-ui/src/layout/card/components/CardContent.tsx index 90cf9b1803..c150984f77 100644 --- a/packages/twenty-ui/src/layout/card/components/CardContent.tsx +++ b/packages/twenty-ui/src/layout/card/components/CardContent.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { motion } from 'framer-motion'; import { type ComponentProps, type ReactNode } from 'react'; diff --git a/packages/twenty-ui/src/layout/card/components/CardFooter.tsx b/packages/twenty-ui/src/layout/card/components/CardFooter.tsx index 40461f5215..7d581c41fd 100644 --- a/packages/twenty-ui/src/layout/card/components/CardFooter.tsx +++ b/packages/twenty-ui/src/layout/card/components/CardFooter.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type ComponentPropsWithoutRef } from 'react'; const StyledCardFooter = styled.div<{ divider?: boolean }>` diff --git a/packages/twenty-ui/src/layout/card/components/CardHeader.tsx b/packages/twenty-ui/src/layout/card/components/CardHeader.tsx index 595b5e22ee..6d7708ae81 100644 --- a/packages/twenty-ui/src/layout/card/components/CardHeader.tsx +++ b/packages/twenty-ui/src/layout/card/components/CardHeader.tsx @@ -1,5 +1,5 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type ComponentPropsWithoutRef } from 'react'; const StyledCardHeader = styled.div` diff --git a/packages/twenty-ui/src/layout/section/components/Section.tsx b/packages/twenty-ui/src/layout/section/components/Section.tsx index 15a832ca88..92738a0924 100644 --- a/packages/twenty-ui/src/layout/section/components/Section.tsx +++ b/packages/twenty-ui/src/layout/section/components/Section.tsx @@ -1,6 +1,6 @@ import { type ReactNode } from 'react'; import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; type SectionProps = { children: ReactNode; diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx index fa4108a6c8..70477372b2 100644 --- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx +++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx @@ -1,7 +1,8 @@ import { styled } from '@linaria/react'; import { IconPoint } from '@ui/display'; import { Toggle } from '@ui/input'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { useContext, useId } from 'react'; const StyledContainer = styled.div` diff --git a/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx b/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx index dc50951d3c..16175e6fff 100644 --- a/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/ClickToActionLink.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import React from 'react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledButtonLink = styled.a` align-items: center; diff --git a/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx b/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx index 04b6bdaa8a..43a7221a15 100644 --- a/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/ContactLink.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import * as React from 'react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledClickableLink = styled.a<{ maxWidth?: number; diff --git a/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx b/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx index a3b5f9452c..34577d6879 100644 --- a/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx +++ b/packages/twenty-ui/src/navigation/link/components/RoundedLink.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; import { isNonEmptyString } from '@sniptt/guards'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type MouseEvent } from 'react'; type RoundedLinkProps = { diff --git a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx index 431d235470..d177bb9fe1 100644 --- a/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx +++ b/packages/twenty-ui/src/navigation/menu/components/MenuPicker.tsx @@ -7,7 +7,8 @@ import { TooltipPosition, type IconComponent, } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { isDefined } from 'twenty-shared/utils'; const StyledMenuPicker = styled.button<{ diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemHotKeys.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemHotKeys.tsx index 37c622af03..bf8a8e446e 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemHotKeys.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemHotKeys.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import React from 'react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledCommandTextContainer = styled.div` align-items: center; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx index b94345b1bb..8f2cb20baf 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelect.tsx @@ -4,7 +4,8 @@ import { Tag } from '@ui/components'; import { type IconComponent } from '@ui/display'; import { Checkbox } from '@ui/input/components/Checkbox'; import { MenuItemLeftContent } from '@ui/navigation/menu/menu-item/internals/components/MenuItemLeftContent'; -import { type ThemeColor, themeCssVariables } from '@ui/theme'; +import { type ThemeColor } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase'; const StyledLeftContentWithCheckboxContainer = styled.div` diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx index c75d33cc95..76c5932616 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemMultiSelectAvatar.tsx @@ -3,7 +3,7 @@ import { type ReactNode } from 'react'; import { OverflowingTextWithTooltip } from '@ui/display'; import { Checkbox } from '@ui/input/components/Checkbox'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { StyledMenuItemBase, StyledMenuItemLabel, diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx index 22b6b06b99..3875fd0002 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelect.tsx @@ -8,7 +8,8 @@ import { type IconComponent, } from '@ui/display'; import { type ReactNode, useContext } from 'react'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemBase, diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx index 6fbf7a6736..d1c397b6aa 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectAvatar.tsx @@ -9,7 +9,8 @@ import { import { styled } from '@linaria/react'; import { OverflowingTextWithTooltip } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { StyledMenuItemSelect } from './MenuItemSelect'; type MenuItemSelectAvatarProps = { diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSuggestion.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSuggestion.tsx index 51ea57cf36..0be9286d81 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSuggestion.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSuggestion.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import { type MouseEvent } from 'react'; import { type IconComponent } from '@ui/display'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconBoxContainer.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconBoxContainer.tsx index 14be9cef5e..b45d2cf1e3 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconBoxContainer.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconBoxContainer.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { type ReactNode } from 'react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledIconContainerBase = styled.div` align-items: flex-start; diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx index 22c5bf40fc..6877a7b6eb 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/MenuItemIconWithGripSwap.tsx @@ -2,7 +2,8 @@ import { useContext } from 'react'; import { styled } from '@linaria/react'; import { type IconComponent, IconGripVertical } from '@ui/display'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { MenuItemIconBoxContainer } from './MenuItemIconBoxContainer'; const StyledIconSwapContainer = styled.div` diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx index c668ed4d76..b291c45ee3 100644 --- a/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-ui/src/navigation/menu/menu-item/internals/components/StyledMenuItemBase.tsx @@ -3,7 +3,7 @@ import { styled } from '@linaria/react'; import { isUndefined } from '@sniptt/guards'; import { IconCheck } from '@ui/display'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { type MenuItemAccent } from '../../types/MenuItemAccent'; export type MenuItemBaseProps = { diff --git a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx index 2d81eefe92..423c52d5fb 100644 --- a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx +++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBar.tsx @@ -1,7 +1,7 @@ import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display/icon/types/IconComponent'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; import { NavigationBarItem } from './NavigationBarItem'; diff --git a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx index 085d6266a6..ea2a86dc41 100644 --- a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx +++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx @@ -2,7 +2,8 @@ import { useContext } from 'react'; import { styled } from '@linaria/react'; import { type IconComponent } from '@ui/display/icon/types/IconComponent'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledIconButton = styled.div<{ isActive?: boolean }>` align-items: center; diff --git a/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx b/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx index 83aa886ff3..d950e7f97f 100644 --- a/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx +++ b/packages/twenty-ui/src/navigation/notification-counter/components/NotificationCounter.tsx @@ -1,6 +1,6 @@ import { styled } from '@linaria/react'; -import { themeCssVariables } from '@ui/theme'; +import { themeCssVariables } from '@ui/theme-constants'; const StyledNotificationCounter = styled.div<{ variant: 'primary' | 'secondary'; diff --git a/packages/twenty-ui/src/theme-constants/generated/themeCssVariables.ts b/packages/twenty-ui/src/theme-constants/generated/themeCssVariables.ts new file mode 100644 index 0000000000..337c2c06c0 --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/generated/themeCssVariables.ts @@ -0,0 +1,1100 @@ +// Auto-generated by scripts/generateThemeConstants.ts — do not edit manually. +// Regenerate: npx tsx packages/twenty-ui/scripts/generateThemeConstants.ts + +import type { ThemeType } from '@ui/theme/types/ThemeType'; + +type DeepCSSVariableRefs = { + [K in keyof T]: T[K] extends (...args: never[]) => unknown + ? Record + : T[K] extends Record + ? DeepCSSVariableRefs + : string; +}; + +export const themeCssVariables = { + icon: { + size: { + sm: "var(--t-icon-size-sm)", + md: "var(--t-icon-size-md)", + lg: "var(--t-icon-size-lg)", + xl: "var(--t-icon-size-xl)", + }, + stroke: { + sm: "var(--t-icon-stroke-sm)", + md: "var(--t-icon-stroke-md)", + lg: "var(--t-icon-stroke-lg)", + }, + }, + modal: { + size: { + sm: { + width: "var(--t-modal-size-sm-width)", + }, + md: { + width: "var(--t-modal-size-md-width)", + }, + lg: { + width: "var(--t-modal-size-lg-width)", + }, + xl: { + width: "var(--t-modal-size-xl-width)", + height: "var(--t-modal-size-xl-height)", + }, + fullscreen: { + width: "var(--t-modal-size-fullscreen-width)", + height: "var(--t-modal-size-fullscreen-height)", + }, + }, + }, + text: { + lineHeight: { + lg: "var(--t-text-line-height-lg)", + md: "var(--t-text-line-height-md)", + }, + iconSizeMedium: "var(--t-text-icon-size-medium)", + iconSizeSmall: "var(--t-text-icon-size-small)", + iconStrikeLight: "var(--t-text-icon-strike-light)", + iconStrikeMedium: "var(--t-text-icon-strike-medium)", + iconStrikeBold: "var(--t-text-icon-strike-bold)", + }, + animation: { + duration: { + instant: "var(--t-animation-duration-instant)", + fast: "var(--t-animation-duration-fast)", + normal: "var(--t-animation-duration-normal)", + slow: "var(--t-animation-duration-slow)", + }, + }, + spacingMultiplicator: "var(--t-spacing-multiplicator)", + spacing: { + "0": "var(--t-spacing-0)", + "1": "var(--t-spacing-1)", + "2": "var(--t-spacing-2)", + "3": "var(--t-spacing-3)", + "4": "var(--t-spacing-4)", + "5": "var(--t-spacing-5)", + "6": "var(--t-spacing-6)", + "7": "var(--t-spacing-7)", + "8": "var(--t-spacing-8)", + "9": "var(--t-spacing-9)", + "10": "var(--t-spacing-10)", + "11": "var(--t-spacing-11)", + "12": "var(--t-spacing-12)", + "13": "var(--t-spacing-13)", + "14": "var(--t-spacing-14)", + "15": "var(--t-spacing-15)", + "16": "var(--t-spacing-16)", + "17": "var(--t-spacing-17)", + "18": "var(--t-spacing-18)", + "19": "var(--t-spacing-19)", + "20": "var(--t-spacing-20)", + "21": "var(--t-spacing-21)", + "22": "var(--t-spacing-22)", + "23": "var(--t-spacing-23)", + "24": "var(--t-spacing-24)", + "25": "var(--t-spacing-25)", + "26": "var(--t-spacing-26)", + "27": "var(--t-spacing-27)", + "28": "var(--t-spacing-28)", + "29": "var(--t-spacing-29)", + "30": "var(--t-spacing-30)", + "31": "var(--t-spacing-31)", + "32": "var(--t-spacing-32)", + "0.5": "var(--t-spacing-0_5)", + "1.5": "var(--t-spacing-1_5)", + }, + betweenSiblingsGap: "var(--t-between-siblings-gap)", + table: { + horizontalCellMargin: "var(--t-table-horizontal-cell-margin)", + checkboxColumnWidth: "var(--t-table-checkbox-column-width)", + horizontalCellPadding: "var(--t-table-horizontal-cell-padding)", + }, + rightDrawerWidth: "var(--t-right-drawer-width)", + clickableElementBackgroundTransition: "var(--t-clickable-element-background-transition)", + lastLayerZIndex: "var(--t-last-layer-z-index)", + buttons: { + secondaryTextColor: "var(--t-buttons-secondary-text-color)", + }, + accent: { + primary: "var(--t-accent-primary)", + secondary: "var(--t-accent-secondary)", + tertiary: "var(--t-accent-tertiary)", + quaternary: "var(--t-accent-quaternary)", + accent3570: "var(--t-accent-accent3570)", + accent4060: "var(--t-accent-accent4060)", + accent1: "var(--t-accent-accent1)", + accent2: "var(--t-accent-accent2)", + accent3: "var(--t-accent-accent3)", + accent4: "var(--t-accent-accent4)", + accent5: "var(--t-accent-accent5)", + accent6: "var(--t-accent-accent6)", + accent7: "var(--t-accent-accent7)", + accent8: "var(--t-accent-accent8)", + accent9: "var(--t-accent-accent9)", + accent10: "var(--t-accent-accent10)", + accent11: "var(--t-accent-accent11)", + accent12: "var(--t-accent-accent12)", + }, + background: { + noisy: "var(--t-background-noisy)", + primary: "var(--t-background-primary)", + secondary: "var(--t-background-secondary)", + tertiary: "var(--t-background-tertiary)", + quaternary: "var(--t-background-quaternary)", + invertedPrimary: "var(--t-background-inverted-primary)", + invertedSecondary: "var(--t-background-inverted-secondary)", + danger: "var(--t-background-danger)", + transparent: { + primary: "var(--t-background-transparent-primary)", + secondary: "var(--t-background-transparent-secondary)", + strong: "var(--t-background-transparent-strong)", + medium: "var(--t-background-transparent-medium)", + light: "var(--t-background-transparent-light)", + lighter: "var(--t-background-transparent-lighter)", + danger: "var(--t-background-transparent-danger)", + blue: "var(--t-background-transparent-blue)", + orange: "var(--t-background-transparent-orange)", + success: "var(--t-background-transparent-success)", + }, + overlayPrimary: "var(--t-background-overlay-primary)", + overlaySecondary: "var(--t-background-overlay-secondary)", + overlayTertiary: "var(--t-background-overlay-tertiary)", + radialGradient: "var(--t-background-radial-gradient)", + radialGradientHover: "var(--t-background-radial-gradient-hover)", + primaryInverted: "var(--t-background-primary-inverted)", + primaryInvertedHover: "var(--t-background-primary-inverted-hover)", + }, + blur: { + light: "var(--t-blur-light)", + medium: "var(--t-blur-medium)", + strong: "var(--t-blur-strong)", + }, + border: { + color: { + strong: "var(--t-border-color-strong)", + medium: "var(--t-border-color-medium)", + light: "var(--t-border-color-light)", + secondaryInverted: "var(--t-border-color-secondary-inverted)", + inverted: "var(--t-border-color-inverted)", + danger: "var(--t-border-color-danger)", + blue: "var(--t-border-color-blue)", + transparentStrong: "var(--t-border-color-transparent-strong)", + }, + radius: { + xs: "var(--t-border-radius-xs)", + sm: "var(--t-border-radius-sm)", + md: "var(--t-border-radius-md)", + xl: "var(--t-border-radius-xl)", + xxl: "var(--t-border-radius-xxl)", + pill: "var(--t-border-radius-pill)", + rounded: "var(--t-border-radius-rounded)", + }, + }, + boxShadow: { + color: "var(--t-box-shadow-color)", + light: "var(--t-box-shadow-light)", + strong: "var(--t-box-shadow-strong)", + underline: "var(--t-box-shadow-underline)", + superHeavy: "var(--t-box-shadow-super-heavy)", + }, + font: { + color: { + primary: "var(--t-font-color-primary)", + secondary: "var(--t-font-color-secondary)", + tertiary: "var(--t-font-color-tertiary)", + light: "var(--t-font-color-light)", + extraLight: "var(--t-font-color-extra-light)", + inverted: "var(--t-font-color-inverted)", + danger: "var(--t-font-color-danger)", + }, + size: { + xxs: "var(--t-font-size-xxs)", + xs: "var(--t-font-size-xs)", + sm: "var(--t-font-size-sm)", + md: "var(--t-font-size-md)", + lg: "var(--t-font-size-lg)", + xl: "var(--t-font-size-xl)", + xxl: "var(--t-font-size-xxl)", + }, + weight: { + regular: "var(--t-font-weight-regular)", + medium: "var(--t-font-weight-medium)", + semiBold: "var(--t-font-weight-semi-bold)", + }, + family: "var(--t-font-family)", + }, + name: "var(--t-name)", + snackBar: { + success: { + color: "var(--t-snack-bar-success-color)", + backgroundColor: "var(--t-snack-bar-success-background-color)", + }, + error: { + color: "var(--t-snack-bar-error-color)", + backgroundColor: "var(--t-snack-bar-error-background-color)", + }, + warning: { + color: "var(--t-snack-bar-warning-color)", + backgroundColor: "var(--t-snack-bar-warning-background-color)", + }, + info: { + color: "var(--t-snack-bar-info-color)", + backgroundColor: "var(--t-snack-bar-info-background-color)", + }, + default: { + color: "var(--t-snack-bar-default-color)", + backgroundColor: "var(--t-snack-bar-default-background-color)", + }, + }, + tag: { + text: { + gray: "var(--t-tag-text-gray)", + mauve: "var(--t-tag-text-mauve)", + slate: "var(--t-tag-text-slate)", + sage: "var(--t-tag-text-sage)", + olive: "var(--t-tag-text-olive)", + sand: "var(--t-tag-text-sand)", + tomato: "var(--t-tag-text-tomato)", + red: "var(--t-tag-text-red)", + ruby: "var(--t-tag-text-ruby)", + crimson: "var(--t-tag-text-crimson)", + pink: "var(--t-tag-text-pink)", + plum: "var(--t-tag-text-plum)", + purple: "var(--t-tag-text-purple)", + violet: "var(--t-tag-text-violet)", + iris: "var(--t-tag-text-iris)", + cyan: "var(--t-tag-text-cyan)", + turquoise: "var(--t-tag-text-turquoise)", + sky: "var(--t-tag-text-sky)", + blue: "var(--t-tag-text-blue)", + jade: "var(--t-tag-text-jade)", + green: "var(--t-tag-text-green)", + grass: "var(--t-tag-text-grass)", + mint: "var(--t-tag-text-mint)", + lime: "var(--t-tag-text-lime)", + bronze: "var(--t-tag-text-bronze)", + gold: "var(--t-tag-text-gold)", + brown: "var(--t-tag-text-brown)", + orange: "var(--t-tag-text-orange)", + amber: "var(--t-tag-text-amber)", + yellow: "var(--t-tag-text-yellow)", + }, + background: { + gray: "var(--t-tag-background-gray)", + mauve: "var(--t-tag-background-mauve)", + slate: "var(--t-tag-background-slate)", + sage: "var(--t-tag-background-sage)", + olive: "var(--t-tag-background-olive)", + sand: "var(--t-tag-background-sand)", + tomato: "var(--t-tag-background-tomato)", + red: "var(--t-tag-background-red)", + ruby: "var(--t-tag-background-ruby)", + crimson: "var(--t-tag-background-crimson)", + pink: "var(--t-tag-background-pink)", + plum: "var(--t-tag-background-plum)", + purple: "var(--t-tag-background-purple)", + violet: "var(--t-tag-background-violet)", + iris: "var(--t-tag-background-iris)", + cyan: "var(--t-tag-background-cyan)", + turquoise: "var(--t-tag-background-turquoise)", + sky: "var(--t-tag-background-sky)", + blue: "var(--t-tag-background-blue)", + jade: "var(--t-tag-background-jade)", + green: "var(--t-tag-background-green)", + grass: "var(--t-tag-background-grass)", + mint: "var(--t-tag-background-mint)", + lime: "var(--t-tag-background-lime)", + bronze: "var(--t-tag-background-bronze)", + gold: "var(--t-tag-background-gold)", + brown: "var(--t-tag-background-brown)", + orange: "var(--t-tag-background-orange)", + amber: "var(--t-tag-background-amber)", + yellow: "var(--t-tag-background-yellow)", + }, + }, + code: { + text: { + gray: "var(--t-code-text-gray)", + sky: "var(--t-code-text-sky)", + pink: "var(--t-code-text-pink)", + orange: "var(--t-code-text-orange)", + green: "var(--t-code-text-green)", + }, + font: { + family: "var(--t-code-font-family)", + }, + }, + IllustrationIcon: { + color: { + blue: "var(--t--illustration-icon-color-blue)", + gray: "var(--t--illustration-icon-color-gray)", + }, + fill: { + blue: "var(--t--illustration-icon-fill-blue)", + gray: "var(--t--illustration-icon-fill-gray)", + }, + }, + grayScale: { + gray1: "var(--t-gray-scale-gray1)", + gray2: "var(--t-gray-scale-gray2)", + gray3: "var(--t-gray-scale-gray3)", + gray4: "var(--t-gray-scale-gray4)", + gray5: "var(--t-gray-scale-gray5)", + gray6: "var(--t-gray-scale-gray6)", + gray7: "var(--t-gray-scale-gray7)", + gray8: "var(--t-gray-scale-gray8)", + gray9: "var(--t-gray-scale-gray9)", + gray10: "var(--t-gray-scale-gray10)", + gray11: "var(--t-gray-scale-gray11)", + gray12: "var(--t-gray-scale-gray12)", + }, + color: { + red: "var(--t-color-red)", + ruby: "var(--t-color-ruby)", + crimson: "var(--t-color-crimson)", + tomato: "var(--t-color-tomato)", + orange: "var(--t-color-orange)", + amber: "var(--t-color-amber)", + yellow: "var(--t-color-yellow)", + lime: "var(--t-color-lime)", + grass: "var(--t-color-grass)", + green: "var(--t-color-green)", + jade: "var(--t-color-jade)", + mint: "var(--t-color-mint)", + turquoise: "var(--t-color-turquoise)", + cyan: "var(--t-color-cyan)", + sky: "var(--t-color-sky)", + blue: "var(--t-color-blue)", + iris: "var(--t-color-iris)", + violet: "var(--t-color-violet)", + purple: "var(--t-color-purple)", + plum: "var(--t-color-plum)", + pink: "var(--t-color-pink)", + bronze: "var(--t-color-bronze)", + gold: "var(--t-color-gold)", + brown: "var(--t-color-brown)", + gray: "var(--t-color-gray)", + yellow1: "var(--t-color-yellow1)", + yellow2: "var(--t-color-yellow2)", + yellow3: "var(--t-color-yellow3)", + yellow4: "var(--t-color-yellow4)", + yellow5: "var(--t-color-yellow5)", + yellow6: "var(--t-color-yellow6)", + yellow7: "var(--t-color-yellow7)", + yellow8: "var(--t-color-yellow8)", + yellow9: "var(--t-color-yellow9)", + yellow10: "var(--t-color-yellow10)", + yellow11: "var(--t-color-yellow11)", + yellow12: "var(--t-color-yellow12)", + green1: "var(--t-color-green1)", + green2: "var(--t-color-green2)", + green3: "var(--t-color-green3)", + green4: "var(--t-color-green4)", + green5: "var(--t-color-green5)", + green6: "var(--t-color-green6)", + green7: "var(--t-color-green7)", + green8: "var(--t-color-green8)", + green9: "var(--t-color-green9)", + green10: "var(--t-color-green10)", + green11: "var(--t-color-green11)", + green12: "var(--t-color-green12)", + turquoise1: "var(--t-color-turquoise1)", + turquoise2: "var(--t-color-turquoise2)", + turquoise3: "var(--t-color-turquoise3)", + turquoise4: "var(--t-color-turquoise4)", + turquoise5: "var(--t-color-turquoise5)", + turquoise6: "var(--t-color-turquoise6)", + turquoise7: "var(--t-color-turquoise7)", + turquoise8: "var(--t-color-turquoise8)", + turquoise9: "var(--t-color-turquoise9)", + turquoise10: "var(--t-color-turquoise10)", + turquoise11: "var(--t-color-turquoise11)", + turquoise12: "var(--t-color-turquoise12)", + sky1: "var(--t-color-sky1)", + sky2: "var(--t-color-sky2)", + sky3: "var(--t-color-sky3)", + sky4: "var(--t-color-sky4)", + sky5: "var(--t-color-sky5)", + sky6: "var(--t-color-sky6)", + sky7: "var(--t-color-sky7)", + sky8: "var(--t-color-sky8)", + sky9: "var(--t-color-sky9)", + sky10: "var(--t-color-sky10)", + sky11: "var(--t-color-sky11)", + sky12: "var(--t-color-sky12)", + blue1: "var(--t-color-blue1)", + blue2: "var(--t-color-blue2)", + blue3: "var(--t-color-blue3)", + blue4: "var(--t-color-blue4)", + blue5: "var(--t-color-blue5)", + blue6: "var(--t-color-blue6)", + blue7: "var(--t-color-blue7)", + blue8: "var(--t-color-blue8)", + blue9: "var(--t-color-blue9)", + blue10: "var(--t-color-blue10)", + blue11: "var(--t-color-blue11)", + blue12: "var(--t-color-blue12)", + purple1: "var(--t-color-purple1)", + purple2: "var(--t-color-purple2)", + purple3: "var(--t-color-purple3)", + purple4: "var(--t-color-purple4)", + purple5: "var(--t-color-purple5)", + purple6: "var(--t-color-purple6)", + purple7: "var(--t-color-purple7)", + purple8: "var(--t-color-purple8)", + purple9: "var(--t-color-purple9)", + purple10: "var(--t-color-purple10)", + purple11: "var(--t-color-purple11)", + purple12: "var(--t-color-purple12)", + pink1: "var(--t-color-pink1)", + pink2: "var(--t-color-pink2)", + pink3: "var(--t-color-pink3)", + pink4: "var(--t-color-pink4)", + pink5: "var(--t-color-pink5)", + pink6: "var(--t-color-pink6)", + pink7: "var(--t-color-pink7)", + pink8: "var(--t-color-pink8)", + pink9: "var(--t-color-pink9)", + pink10: "var(--t-color-pink10)", + pink11: "var(--t-color-pink11)", + pink12: "var(--t-color-pink12)", + red1: "var(--t-color-red1)", + red2: "var(--t-color-red2)", + red3: "var(--t-color-red3)", + red4: "var(--t-color-red4)", + red5: "var(--t-color-red5)", + red6: "var(--t-color-red6)", + red7: "var(--t-color-red7)", + red8: "var(--t-color-red8)", + red9: "var(--t-color-red9)", + red10: "var(--t-color-red10)", + red11: "var(--t-color-red11)", + red12: "var(--t-color-red12)", + orange1: "var(--t-color-orange1)", + orange2: "var(--t-color-orange2)", + orange3: "var(--t-color-orange3)", + orange4: "var(--t-color-orange4)", + orange5: "var(--t-color-orange5)", + orange6: "var(--t-color-orange6)", + orange7: "var(--t-color-orange7)", + orange8: "var(--t-color-orange8)", + orange9: "var(--t-color-orange9)", + orange10: "var(--t-color-orange10)", + orange11: "var(--t-color-orange11)", + orange12: "var(--t-color-orange12)", + gray1: "var(--t-color-gray1)", + gray2: "var(--t-color-gray2)", + gray3: "var(--t-color-gray3)", + gray4: "var(--t-color-gray4)", + gray5: "var(--t-color-gray5)", + gray6: "var(--t-color-gray6)", + gray7: "var(--t-color-gray7)", + gray8: "var(--t-color-gray8)", + gray9: "var(--t-color-gray9)", + gray10: "var(--t-color-gray10)", + gray11: "var(--t-color-gray11)", + gray12: "var(--t-color-gray12)", + mauve1: "var(--t-color-mauve1)", + mauve2: "var(--t-color-mauve2)", + mauve3: "var(--t-color-mauve3)", + mauve4: "var(--t-color-mauve4)", + mauve5: "var(--t-color-mauve5)", + mauve6: "var(--t-color-mauve6)", + mauve7: "var(--t-color-mauve7)", + mauve8: "var(--t-color-mauve8)", + mauve9: "var(--t-color-mauve9)", + mauve10: "var(--t-color-mauve10)", + mauve11: "var(--t-color-mauve11)", + mauve12: "var(--t-color-mauve12)", + slate1: "var(--t-color-slate1)", + slate2: "var(--t-color-slate2)", + slate3: "var(--t-color-slate3)", + slate4: "var(--t-color-slate4)", + slate5: "var(--t-color-slate5)", + slate6: "var(--t-color-slate6)", + slate7: "var(--t-color-slate7)", + slate8: "var(--t-color-slate8)", + slate9: "var(--t-color-slate9)", + slate10: "var(--t-color-slate10)", + slate11: "var(--t-color-slate11)", + slate12: "var(--t-color-slate12)", + sage1: "var(--t-color-sage1)", + sage2: "var(--t-color-sage2)", + sage3: "var(--t-color-sage3)", + sage4: "var(--t-color-sage4)", + sage5: "var(--t-color-sage5)", + sage6: "var(--t-color-sage6)", + sage7: "var(--t-color-sage7)", + sage8: "var(--t-color-sage8)", + sage9: "var(--t-color-sage9)", + sage10: "var(--t-color-sage10)", + sage11: "var(--t-color-sage11)", + sage12: "var(--t-color-sage12)", + olive1: "var(--t-color-olive1)", + olive2: "var(--t-color-olive2)", + olive3: "var(--t-color-olive3)", + olive4: "var(--t-color-olive4)", + olive5: "var(--t-color-olive5)", + olive6: "var(--t-color-olive6)", + olive7: "var(--t-color-olive7)", + olive8: "var(--t-color-olive8)", + olive9: "var(--t-color-olive9)", + olive10: "var(--t-color-olive10)", + olive11: "var(--t-color-olive11)", + olive12: "var(--t-color-olive12)", + sand1: "var(--t-color-sand1)", + sand2: "var(--t-color-sand2)", + sand3: "var(--t-color-sand3)", + sand4: "var(--t-color-sand4)", + sand5: "var(--t-color-sand5)", + sand6: "var(--t-color-sand6)", + sand7: "var(--t-color-sand7)", + sand8: "var(--t-color-sand8)", + sand9: "var(--t-color-sand9)", + sand10: "var(--t-color-sand10)", + sand11: "var(--t-color-sand11)", + sand12: "var(--t-color-sand12)", + tomato1: "var(--t-color-tomato1)", + tomato2: "var(--t-color-tomato2)", + tomato3: "var(--t-color-tomato3)", + tomato4: "var(--t-color-tomato4)", + tomato5: "var(--t-color-tomato5)", + tomato6: "var(--t-color-tomato6)", + tomato7: "var(--t-color-tomato7)", + tomato8: "var(--t-color-tomato8)", + tomato9: "var(--t-color-tomato9)", + tomato10: "var(--t-color-tomato10)", + tomato11: "var(--t-color-tomato11)", + tomato12: "var(--t-color-tomato12)", + ruby1: "var(--t-color-ruby1)", + ruby2: "var(--t-color-ruby2)", + ruby3: "var(--t-color-ruby3)", + ruby4: "var(--t-color-ruby4)", + ruby5: "var(--t-color-ruby5)", + ruby6: "var(--t-color-ruby6)", + ruby7: "var(--t-color-ruby7)", + ruby8: "var(--t-color-ruby8)", + ruby9: "var(--t-color-ruby9)", + ruby10: "var(--t-color-ruby10)", + ruby11: "var(--t-color-ruby11)", + ruby12: "var(--t-color-ruby12)", + crimson1: "var(--t-color-crimson1)", + crimson2: "var(--t-color-crimson2)", + crimson3: "var(--t-color-crimson3)", + crimson4: "var(--t-color-crimson4)", + crimson5: "var(--t-color-crimson5)", + crimson6: "var(--t-color-crimson6)", + crimson7: "var(--t-color-crimson7)", + crimson8: "var(--t-color-crimson8)", + crimson9: "var(--t-color-crimson9)", + crimson10: "var(--t-color-crimson10)", + crimson11: "var(--t-color-crimson11)", + crimson12: "var(--t-color-crimson12)", + plum1: "var(--t-color-plum1)", + plum2: "var(--t-color-plum2)", + plum3: "var(--t-color-plum3)", + plum4: "var(--t-color-plum4)", + plum5: "var(--t-color-plum5)", + plum6: "var(--t-color-plum6)", + plum7: "var(--t-color-plum7)", + plum8: "var(--t-color-plum8)", + plum9: "var(--t-color-plum9)", + plum10: "var(--t-color-plum10)", + plum11: "var(--t-color-plum11)", + plum12: "var(--t-color-plum12)", + violet1: "var(--t-color-violet1)", + violet2: "var(--t-color-violet2)", + violet3: "var(--t-color-violet3)", + violet4: "var(--t-color-violet4)", + violet5: "var(--t-color-violet5)", + violet6: "var(--t-color-violet6)", + violet7: "var(--t-color-violet7)", + violet8: "var(--t-color-violet8)", + violet9: "var(--t-color-violet9)", + violet10: "var(--t-color-violet10)", + violet11: "var(--t-color-violet11)", + violet12: "var(--t-color-violet12)", + iris1: "var(--t-color-iris1)", + iris2: "var(--t-color-iris2)", + iris3: "var(--t-color-iris3)", + iris4: "var(--t-color-iris4)", + iris5: "var(--t-color-iris5)", + iris6: "var(--t-color-iris6)", + iris7: "var(--t-color-iris7)", + iris8: "var(--t-color-iris8)", + iris9: "var(--t-color-iris9)", + iris10: "var(--t-color-iris10)", + iris11: "var(--t-color-iris11)", + iris12: "var(--t-color-iris12)", + cyan1: "var(--t-color-cyan1)", + cyan2: "var(--t-color-cyan2)", + cyan3: "var(--t-color-cyan3)", + cyan4: "var(--t-color-cyan4)", + cyan5: "var(--t-color-cyan5)", + cyan6: "var(--t-color-cyan6)", + cyan7: "var(--t-color-cyan7)", + cyan8: "var(--t-color-cyan8)", + cyan9: "var(--t-color-cyan9)", + cyan10: "var(--t-color-cyan10)", + cyan11: "var(--t-color-cyan11)", + cyan12: "var(--t-color-cyan12)", + jade1: "var(--t-color-jade1)", + jade2: "var(--t-color-jade2)", + jade3: "var(--t-color-jade3)", + jade4: "var(--t-color-jade4)", + jade5: "var(--t-color-jade5)", + jade6: "var(--t-color-jade6)", + jade7: "var(--t-color-jade7)", + jade8: "var(--t-color-jade8)", + jade9: "var(--t-color-jade9)", + jade10: "var(--t-color-jade10)", + jade11: "var(--t-color-jade11)", + jade12: "var(--t-color-jade12)", + grass1: "var(--t-color-grass1)", + grass2: "var(--t-color-grass2)", + grass3: "var(--t-color-grass3)", + grass4: "var(--t-color-grass4)", + grass5: "var(--t-color-grass5)", + grass6: "var(--t-color-grass6)", + grass7: "var(--t-color-grass7)", + grass8: "var(--t-color-grass8)", + grass9: "var(--t-color-grass9)", + grass10: "var(--t-color-grass10)", + grass11: "var(--t-color-grass11)", + grass12: "var(--t-color-grass12)", + mint1: "var(--t-color-mint1)", + mint2: "var(--t-color-mint2)", + mint3: "var(--t-color-mint3)", + mint4: "var(--t-color-mint4)", + mint5: "var(--t-color-mint5)", + mint6: "var(--t-color-mint6)", + mint7: "var(--t-color-mint7)", + mint8: "var(--t-color-mint8)", + mint9: "var(--t-color-mint9)", + mint10: "var(--t-color-mint10)", + mint11: "var(--t-color-mint11)", + mint12: "var(--t-color-mint12)", + lime1: "var(--t-color-lime1)", + lime2: "var(--t-color-lime2)", + lime3: "var(--t-color-lime3)", + lime4: "var(--t-color-lime4)", + lime5: "var(--t-color-lime5)", + lime6: "var(--t-color-lime6)", + lime7: "var(--t-color-lime7)", + lime8: "var(--t-color-lime8)", + lime9: "var(--t-color-lime9)", + lime10: "var(--t-color-lime10)", + lime11: "var(--t-color-lime11)", + lime12: "var(--t-color-lime12)", + bronze1: "var(--t-color-bronze1)", + bronze2: "var(--t-color-bronze2)", + bronze3: "var(--t-color-bronze3)", + bronze4: "var(--t-color-bronze4)", + bronze5: "var(--t-color-bronze5)", + bronze6: "var(--t-color-bronze6)", + bronze7: "var(--t-color-bronze7)", + bronze8: "var(--t-color-bronze8)", + bronze9: "var(--t-color-bronze9)", + bronze10: "var(--t-color-bronze10)", + bronze11: "var(--t-color-bronze11)", + bronze12: "var(--t-color-bronze12)", + gold1: "var(--t-color-gold1)", + gold2: "var(--t-color-gold2)", + gold3: "var(--t-color-gold3)", + gold4: "var(--t-color-gold4)", + gold5: "var(--t-color-gold5)", + gold6: "var(--t-color-gold6)", + gold7: "var(--t-color-gold7)", + gold8: "var(--t-color-gold8)", + gold9: "var(--t-color-gold9)", + gold10: "var(--t-color-gold10)", + gold11: "var(--t-color-gold11)", + gold12: "var(--t-color-gold12)", + brown1: "var(--t-color-brown1)", + brown2: "var(--t-color-brown2)", + brown3: "var(--t-color-brown3)", + brown4: "var(--t-color-brown4)", + brown5: "var(--t-color-brown5)", + brown6: "var(--t-color-brown6)", + brown7: "var(--t-color-brown7)", + brown8: "var(--t-color-brown8)", + brown9: "var(--t-color-brown9)", + brown10: "var(--t-color-brown10)", + brown11: "var(--t-color-brown11)", + brown12: "var(--t-color-brown12)", + amber1: "var(--t-color-amber1)", + amber2: "var(--t-color-amber2)", + amber3: "var(--t-color-amber3)", + amber4: "var(--t-color-amber4)", + amber5: "var(--t-color-amber5)", + amber6: "var(--t-color-amber6)", + amber7: "var(--t-color-amber7)", + amber8: "var(--t-color-amber8)", + amber9: "var(--t-color-amber9)", + amber10: "var(--t-color-amber10)", + amber11: "var(--t-color-amber11)", + amber12: "var(--t-color-amber12)", + transparent: { + green1: "var(--t-color-transparent-green1)", + green2: "var(--t-color-transparent-green2)", + green3: "var(--t-color-transparent-green3)", + green4: "var(--t-color-transparent-green4)", + green5: "var(--t-color-transparent-green5)", + green6: "var(--t-color-transparent-green6)", + green7: "var(--t-color-transparent-green7)", + green8: "var(--t-color-transparent-green8)", + green9: "var(--t-color-transparent-green9)", + green10: "var(--t-color-transparent-green10)", + green11: "var(--t-color-transparent-green11)", + green12: "var(--t-color-transparent-green12)", + turquoise1: "var(--t-color-transparent-turquoise1)", + turquoise2: "var(--t-color-transparent-turquoise2)", + turquoise3: "var(--t-color-transparent-turquoise3)", + turquoise4: "var(--t-color-transparent-turquoise4)", + turquoise5: "var(--t-color-transparent-turquoise5)", + turquoise6: "var(--t-color-transparent-turquoise6)", + turquoise7: "var(--t-color-transparent-turquoise7)", + turquoise8: "var(--t-color-transparent-turquoise8)", + turquoise9: "var(--t-color-transparent-turquoise9)", + turquoise10: "var(--t-color-transparent-turquoise10)", + turquoise11: "var(--t-color-transparent-turquoise11)", + turquoise12: "var(--t-color-transparent-turquoise12)", + sky1: "var(--t-color-transparent-sky1)", + sky2: "var(--t-color-transparent-sky2)", + sky3: "var(--t-color-transparent-sky3)", + sky4: "var(--t-color-transparent-sky4)", + sky5: "var(--t-color-transparent-sky5)", + sky6: "var(--t-color-transparent-sky6)", + sky7: "var(--t-color-transparent-sky7)", + sky8: "var(--t-color-transparent-sky8)", + sky9: "var(--t-color-transparent-sky9)", + sky10: "var(--t-color-transparent-sky10)", + sky11: "var(--t-color-transparent-sky11)", + sky12: "var(--t-color-transparent-sky12)", + blue1: "var(--t-color-transparent-blue1)", + blue2: "var(--t-color-transparent-blue2)", + blue3: "var(--t-color-transparent-blue3)", + blue4: "var(--t-color-transparent-blue4)", + blue5: "var(--t-color-transparent-blue5)", + blue6: "var(--t-color-transparent-blue6)", + blue7: "var(--t-color-transparent-blue7)", + blue8: "var(--t-color-transparent-blue8)", + blue9: "var(--t-color-transparent-blue9)", + blue10: "var(--t-color-transparent-blue10)", + blue11: "var(--t-color-transparent-blue11)", + blue12: "var(--t-color-transparent-blue12)", + purple1: "var(--t-color-transparent-purple1)", + purple2: "var(--t-color-transparent-purple2)", + purple3: "var(--t-color-transparent-purple3)", + purple4: "var(--t-color-transparent-purple4)", + purple5: "var(--t-color-transparent-purple5)", + purple6: "var(--t-color-transparent-purple6)", + purple7: "var(--t-color-transparent-purple7)", + purple8: "var(--t-color-transparent-purple8)", + purple9: "var(--t-color-transparent-purple9)", + purple10: "var(--t-color-transparent-purple10)", + purple11: "var(--t-color-transparent-purple11)", + purple12: "var(--t-color-transparent-purple12)", + pink1: "var(--t-color-transparent-pink1)", + pink2: "var(--t-color-transparent-pink2)", + pink3: "var(--t-color-transparent-pink3)", + pink4: "var(--t-color-transparent-pink4)", + pink5: "var(--t-color-transparent-pink5)", + pink6: "var(--t-color-transparent-pink6)", + pink7: "var(--t-color-transparent-pink7)", + pink8: "var(--t-color-transparent-pink8)", + pink9: "var(--t-color-transparent-pink9)", + pink10: "var(--t-color-transparent-pink10)", + pink11: "var(--t-color-transparent-pink11)", + pink12: "var(--t-color-transparent-pink12)", + red1: "var(--t-color-transparent-red1)", + red2: "var(--t-color-transparent-red2)", + red3: "var(--t-color-transparent-red3)", + red4: "var(--t-color-transparent-red4)", + red5: "var(--t-color-transparent-red5)", + red6: "var(--t-color-transparent-red6)", + red7: "var(--t-color-transparent-red7)", + red8: "var(--t-color-transparent-red8)", + red9: "var(--t-color-transparent-red9)", + red10: "var(--t-color-transparent-red10)", + red11: "var(--t-color-transparent-red11)", + red12: "var(--t-color-transparent-red12)", + orange1: "var(--t-color-transparent-orange1)", + orange2: "var(--t-color-transparent-orange2)", + orange3: "var(--t-color-transparent-orange3)", + orange4: "var(--t-color-transparent-orange4)", + orange5: "var(--t-color-transparent-orange5)", + orange6: "var(--t-color-transparent-orange6)", + orange7: "var(--t-color-transparent-orange7)", + orange8: "var(--t-color-transparent-orange8)", + orange9: "var(--t-color-transparent-orange9)", + orange10: "var(--t-color-transparent-orange10)", + orange11: "var(--t-color-transparent-orange11)", + orange12: "var(--t-color-transparent-orange12)", + yellow1: "var(--t-color-transparent-yellow1)", + yellow2: "var(--t-color-transparent-yellow2)", + yellow3: "var(--t-color-transparent-yellow3)", + yellow4: "var(--t-color-transparent-yellow4)", + yellow5: "var(--t-color-transparent-yellow5)", + yellow6: "var(--t-color-transparent-yellow6)", + yellow7: "var(--t-color-transparent-yellow7)", + yellow8: "var(--t-color-transparent-yellow8)", + yellow9: "var(--t-color-transparent-yellow9)", + yellow10: "var(--t-color-transparent-yellow10)", + yellow11: "var(--t-color-transparent-yellow11)", + yellow12: "var(--t-color-transparent-yellow12)", + gray1: "var(--t-color-transparent-gray1)", + gray2: "var(--t-color-transparent-gray2)", + gray3: "var(--t-color-transparent-gray3)", + gray4: "var(--t-color-transparent-gray4)", + gray5: "var(--t-color-transparent-gray5)", + gray6: "var(--t-color-transparent-gray6)", + gray7: "var(--t-color-transparent-gray7)", + gray8: "var(--t-color-transparent-gray8)", + gray9: "var(--t-color-transparent-gray9)", + gray10: "var(--t-color-transparent-gray10)", + gray11: "var(--t-color-transparent-gray11)", + gray12: "var(--t-color-transparent-gray12)", + mauve1: "var(--t-color-transparent-mauve1)", + mauve2: "var(--t-color-transparent-mauve2)", + mauve3: "var(--t-color-transparent-mauve3)", + mauve4: "var(--t-color-transparent-mauve4)", + mauve5: "var(--t-color-transparent-mauve5)", + mauve6: "var(--t-color-transparent-mauve6)", + mauve7: "var(--t-color-transparent-mauve7)", + mauve8: "var(--t-color-transparent-mauve8)", + mauve9: "var(--t-color-transparent-mauve9)", + mauve10: "var(--t-color-transparent-mauve10)", + mauve11: "var(--t-color-transparent-mauve11)", + mauve12: "var(--t-color-transparent-mauve12)", + slate1: "var(--t-color-transparent-slate1)", + slate2: "var(--t-color-transparent-slate2)", + slate3: "var(--t-color-transparent-slate3)", + slate4: "var(--t-color-transparent-slate4)", + slate5: "var(--t-color-transparent-slate5)", + slate6: "var(--t-color-transparent-slate6)", + slate7: "var(--t-color-transparent-slate7)", + slate8: "var(--t-color-transparent-slate8)", + slate9: "var(--t-color-transparent-slate9)", + slate10: "var(--t-color-transparent-slate10)", + slate11: "var(--t-color-transparent-slate11)", + slate12: "var(--t-color-transparent-slate12)", + sage1: "var(--t-color-transparent-sage1)", + sage2: "var(--t-color-transparent-sage2)", + sage3: "var(--t-color-transparent-sage3)", + sage4: "var(--t-color-transparent-sage4)", + sage5: "var(--t-color-transparent-sage5)", + sage6: "var(--t-color-transparent-sage6)", + sage7: "var(--t-color-transparent-sage7)", + sage8: "var(--t-color-transparent-sage8)", + sage9: "var(--t-color-transparent-sage9)", + sage10: "var(--t-color-transparent-sage10)", + sage11: "var(--t-color-transparent-sage11)", + sage12: "var(--t-color-transparent-sage12)", + olive1: "var(--t-color-transparent-olive1)", + olive2: "var(--t-color-transparent-olive2)", + olive3: "var(--t-color-transparent-olive3)", + olive4: "var(--t-color-transparent-olive4)", + olive5: "var(--t-color-transparent-olive5)", + olive6: "var(--t-color-transparent-olive6)", + olive7: "var(--t-color-transparent-olive7)", + olive8: "var(--t-color-transparent-olive8)", + olive9: "var(--t-color-transparent-olive9)", + olive10: "var(--t-color-transparent-olive10)", + olive11: "var(--t-color-transparent-olive11)", + olive12: "var(--t-color-transparent-olive12)", + sand1: "var(--t-color-transparent-sand1)", + sand2: "var(--t-color-transparent-sand2)", + sand3: "var(--t-color-transparent-sand3)", + sand4: "var(--t-color-transparent-sand4)", + sand5: "var(--t-color-transparent-sand5)", + sand6: "var(--t-color-transparent-sand6)", + sand7: "var(--t-color-transparent-sand7)", + sand8: "var(--t-color-transparent-sand8)", + sand9: "var(--t-color-transparent-sand9)", + sand10: "var(--t-color-transparent-sand10)", + sand11: "var(--t-color-transparent-sand11)", + sand12: "var(--t-color-transparent-sand12)", + tomato1: "var(--t-color-transparent-tomato1)", + tomato2: "var(--t-color-transparent-tomato2)", + tomato3: "var(--t-color-transparent-tomato3)", + tomato4: "var(--t-color-transparent-tomato4)", + tomato5: "var(--t-color-transparent-tomato5)", + tomato6: "var(--t-color-transparent-tomato6)", + tomato7: "var(--t-color-transparent-tomato7)", + tomato8: "var(--t-color-transparent-tomato8)", + tomato9: "var(--t-color-transparent-tomato9)", + tomato10: "var(--t-color-transparent-tomato10)", + tomato11: "var(--t-color-transparent-tomato11)", + tomato12: "var(--t-color-transparent-tomato12)", + ruby1: "var(--t-color-transparent-ruby1)", + ruby2: "var(--t-color-transparent-ruby2)", + ruby3: "var(--t-color-transparent-ruby3)", + ruby4: "var(--t-color-transparent-ruby4)", + ruby5: "var(--t-color-transparent-ruby5)", + ruby6: "var(--t-color-transparent-ruby6)", + ruby7: "var(--t-color-transparent-ruby7)", + ruby8: "var(--t-color-transparent-ruby8)", + ruby9: "var(--t-color-transparent-ruby9)", + ruby10: "var(--t-color-transparent-ruby10)", + ruby11: "var(--t-color-transparent-ruby11)", + ruby12: "var(--t-color-transparent-ruby12)", + crimson1: "var(--t-color-transparent-crimson1)", + crimson2: "var(--t-color-transparent-crimson2)", + crimson3: "var(--t-color-transparent-crimson3)", + crimson4: "var(--t-color-transparent-crimson4)", + crimson5: "var(--t-color-transparent-crimson5)", + crimson6: "var(--t-color-transparent-crimson6)", + crimson7: "var(--t-color-transparent-crimson7)", + crimson8: "var(--t-color-transparent-crimson8)", + crimson9: "var(--t-color-transparent-crimson9)", + crimson10: "var(--t-color-transparent-crimson10)", + crimson11: "var(--t-color-transparent-crimson11)", + crimson12: "var(--t-color-transparent-crimson12)", + plum1: "var(--t-color-transparent-plum1)", + plum2: "var(--t-color-transparent-plum2)", + plum3: "var(--t-color-transparent-plum3)", + plum4: "var(--t-color-transparent-plum4)", + plum5: "var(--t-color-transparent-plum5)", + plum6: "var(--t-color-transparent-plum6)", + plum7: "var(--t-color-transparent-plum7)", + plum8: "var(--t-color-transparent-plum8)", + plum9: "var(--t-color-transparent-plum9)", + plum10: "var(--t-color-transparent-plum10)", + plum11: "var(--t-color-transparent-plum11)", + plum12: "var(--t-color-transparent-plum12)", + violet1: "var(--t-color-transparent-violet1)", + violet2: "var(--t-color-transparent-violet2)", + violet3: "var(--t-color-transparent-violet3)", + violet4: "var(--t-color-transparent-violet4)", + violet5: "var(--t-color-transparent-violet5)", + violet6: "var(--t-color-transparent-violet6)", + violet7: "var(--t-color-transparent-violet7)", + violet8: "var(--t-color-transparent-violet8)", + violet9: "var(--t-color-transparent-violet9)", + violet10: "var(--t-color-transparent-violet10)", + violet11: "var(--t-color-transparent-violet11)", + violet12: "var(--t-color-transparent-violet12)", + iris1: "var(--t-color-transparent-iris1)", + iris2: "var(--t-color-transparent-iris2)", + iris3: "var(--t-color-transparent-iris3)", + iris4: "var(--t-color-transparent-iris4)", + iris5: "var(--t-color-transparent-iris5)", + iris6: "var(--t-color-transparent-iris6)", + iris7: "var(--t-color-transparent-iris7)", + iris8: "var(--t-color-transparent-iris8)", + iris9: "var(--t-color-transparent-iris9)", + iris10: "var(--t-color-transparent-iris10)", + iris11: "var(--t-color-transparent-iris11)", + iris12: "var(--t-color-transparent-iris12)", + cyan1: "var(--t-color-transparent-cyan1)", + cyan2: "var(--t-color-transparent-cyan2)", + cyan3: "var(--t-color-transparent-cyan3)", + cyan4: "var(--t-color-transparent-cyan4)", + cyan5: "var(--t-color-transparent-cyan5)", + cyan6: "var(--t-color-transparent-cyan6)", + cyan7: "var(--t-color-transparent-cyan7)", + cyan8: "var(--t-color-transparent-cyan8)", + cyan9: "var(--t-color-transparent-cyan9)", + cyan10: "var(--t-color-transparent-cyan10)", + cyan11: "var(--t-color-transparent-cyan11)", + cyan12: "var(--t-color-transparent-cyan12)", + jade1: "var(--t-color-transparent-jade1)", + jade2: "var(--t-color-transparent-jade2)", + jade3: "var(--t-color-transparent-jade3)", + jade4: "var(--t-color-transparent-jade4)", + jade5: "var(--t-color-transparent-jade5)", + jade6: "var(--t-color-transparent-jade6)", + jade7: "var(--t-color-transparent-jade7)", + jade8: "var(--t-color-transparent-jade8)", + jade9: "var(--t-color-transparent-jade9)", + jade10: "var(--t-color-transparent-jade10)", + jade11: "var(--t-color-transparent-jade11)", + jade12: "var(--t-color-transparent-jade12)", + grass1: "var(--t-color-transparent-grass1)", + grass2: "var(--t-color-transparent-grass2)", + grass3: "var(--t-color-transparent-grass3)", + grass4: "var(--t-color-transparent-grass4)", + grass5: "var(--t-color-transparent-grass5)", + grass6: "var(--t-color-transparent-grass6)", + grass7: "var(--t-color-transparent-grass7)", + grass8: "var(--t-color-transparent-grass8)", + grass9: "var(--t-color-transparent-grass9)", + grass10: "var(--t-color-transparent-grass10)", + grass11: "var(--t-color-transparent-grass11)", + grass12: "var(--t-color-transparent-grass12)", + mint1: "var(--t-color-transparent-mint1)", + mint2: "var(--t-color-transparent-mint2)", + mint3: "var(--t-color-transparent-mint3)", + mint4: "var(--t-color-transparent-mint4)", + mint5: "var(--t-color-transparent-mint5)", + mint6: "var(--t-color-transparent-mint6)", + mint7: "var(--t-color-transparent-mint7)", + mint8: "var(--t-color-transparent-mint8)", + mint9: "var(--t-color-transparent-mint9)", + mint10: "var(--t-color-transparent-mint10)", + mint11: "var(--t-color-transparent-mint11)", + mint12: "var(--t-color-transparent-mint12)", + lime1: "var(--t-color-transparent-lime1)", + lime2: "var(--t-color-transparent-lime2)", + lime3: "var(--t-color-transparent-lime3)", + lime4: "var(--t-color-transparent-lime4)", + lime5: "var(--t-color-transparent-lime5)", + lime6: "var(--t-color-transparent-lime6)", + lime7: "var(--t-color-transparent-lime7)", + lime8: "var(--t-color-transparent-lime8)", + lime9: "var(--t-color-transparent-lime9)", + lime10: "var(--t-color-transparent-lime10)", + lime11: "var(--t-color-transparent-lime11)", + lime12: "var(--t-color-transparent-lime12)", + bronze1: "var(--t-color-transparent-bronze1)", + bronze2: "var(--t-color-transparent-bronze2)", + bronze3: "var(--t-color-transparent-bronze3)", + bronze4: "var(--t-color-transparent-bronze4)", + bronze5: "var(--t-color-transparent-bronze5)", + bronze6: "var(--t-color-transparent-bronze6)", + bronze7: "var(--t-color-transparent-bronze7)", + bronze8: "var(--t-color-transparent-bronze8)", + bronze9: "var(--t-color-transparent-bronze9)", + bronze10: "var(--t-color-transparent-bronze10)", + bronze11: "var(--t-color-transparent-bronze11)", + bronze12: "var(--t-color-transparent-bronze12)", + gold1: "var(--t-color-transparent-gold1)", + gold2: "var(--t-color-transparent-gold2)", + gold3: "var(--t-color-transparent-gold3)", + gold4: "var(--t-color-transparent-gold4)", + gold5: "var(--t-color-transparent-gold5)", + gold6: "var(--t-color-transparent-gold6)", + gold7: "var(--t-color-transparent-gold7)", + gold8: "var(--t-color-transparent-gold8)", + gold9: "var(--t-color-transparent-gold9)", + gold10: "var(--t-color-transparent-gold10)", + gold11: "var(--t-color-transparent-gold11)", + gold12: "var(--t-color-transparent-gold12)", + brown1: "var(--t-color-transparent-brown1)", + brown2: "var(--t-color-transparent-brown2)", + brown3: "var(--t-color-transparent-brown3)", + brown4: "var(--t-color-transparent-brown4)", + brown5: "var(--t-color-transparent-brown5)", + brown6: "var(--t-color-transparent-brown6)", + brown7: "var(--t-color-transparent-brown7)", + brown8: "var(--t-color-transparent-brown8)", + brown9: "var(--t-color-transparent-brown9)", + brown10: "var(--t-color-transparent-brown10)", + brown11: "var(--t-color-transparent-brown11)", + brown12: "var(--t-color-transparent-brown12)", + amber1: "var(--t-color-transparent-amber1)", + amber2: "var(--t-color-transparent-amber2)", + amber3: "var(--t-color-transparent-amber3)", + amber4: "var(--t-color-transparent-amber4)", + amber5: "var(--t-color-transparent-amber5)", + amber6: "var(--t-color-transparent-amber6)", + amber7: "var(--t-color-transparent-amber7)", + amber8: "var(--t-color-transparent-amber8)", + amber9: "var(--t-color-transparent-amber9)", + amber10: "var(--t-color-transparent-amber10)", + amber11: "var(--t-color-transparent-amber11)", + amber12: "var(--t-color-transparent-amber12)", + }, + }, +} as DeepCSSVariableRefs; diff --git a/packages/twenty-ui/src/theme-constants/generated/themeDarkCssVariableEntries.ts b/packages/twenty-ui/src/theme-constants/generated/themeDarkCssVariableEntries.ts new file mode 100644 index 0000000000..e6b5db38b8 --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/generated/themeDarkCssVariableEntries.ts @@ -0,0 +1,996 @@ +// Auto-generated by scripts/generateThemeConstants.ts — do not edit manually. +// Regenerate: npx tsx packages/twenty-ui/scripts/generateThemeConstants.ts + +export const THEME_DARK_CSS_VARIABLE_ENTRIES: [string, string][] = [ + ["--t-icon-size-sm", "14"], + ["--t-icon-size-md", "16"], + ["--t-icon-size-lg", "20"], + ["--t-icon-size-xl", "24"], + ["--t-icon-stroke-sm", "1.6"], + ["--t-icon-stroke-md", "2"], + ["--t-icon-stroke-lg", "2.5"], + ["--t-modal-size-sm-width", "300px"], + ["--t-modal-size-md-width", "400px"], + ["--t-modal-size-lg-width", "53%"], + ["--t-modal-size-xl-width", "1200px"], + ["--t-modal-size-xl-height", "800px"], + ["--t-modal-size-fullscreen-width", "100dvw"], + ["--t-modal-size-fullscreen-height", "100dvh"], + ["--t-text-line-height-lg", "1.5"], + ["--t-text-line-height-md", "1.1"], + ["--t-text-icon-size-medium", "16"], + ["--t-text-icon-size-small", "14"], + ["--t-text-icon-strike-light", "1.6"], + ["--t-text-icon-strike-medium", "2"], + ["--t-text-icon-strike-bold", "2.5"], + ["--t-animation-duration-instant", "0.075"], + ["--t-animation-duration-fast", "0.15"], + ["--t-animation-duration-normal", "0.3"], + ["--t-animation-duration-slow", "1.5"], + ["--t-spacing-multiplicator", "4"], + ["--t-spacing-0", "0px"], + ["--t-spacing-1", "4px"], + ["--t-spacing-2", "8px"], + ["--t-spacing-3", "12px"], + ["--t-spacing-4", "16px"], + ["--t-spacing-5", "20px"], + ["--t-spacing-6", "24px"], + ["--t-spacing-7", "28px"], + ["--t-spacing-8", "32px"], + ["--t-spacing-9", "36px"], + ["--t-spacing-10", "40px"], + ["--t-spacing-11", "44px"], + ["--t-spacing-12", "48px"], + ["--t-spacing-13", "52px"], + ["--t-spacing-14", "56px"], + ["--t-spacing-15", "60px"], + ["--t-spacing-16", "64px"], + ["--t-spacing-17", "68px"], + ["--t-spacing-18", "72px"], + ["--t-spacing-19", "76px"], + ["--t-spacing-20", "80px"], + ["--t-spacing-21", "84px"], + ["--t-spacing-22", "88px"], + ["--t-spacing-23", "92px"], + ["--t-spacing-24", "96px"], + ["--t-spacing-25", "100px"], + ["--t-spacing-26", "104px"], + ["--t-spacing-27", "108px"], + ["--t-spacing-28", "112px"], + ["--t-spacing-29", "116px"], + ["--t-spacing-30", "120px"], + ["--t-spacing-31", "124px"], + ["--t-spacing-32", "128px"], + ["--t-spacing-0_5", "2px"], + ["--t-spacing-1_5", "6px"], + ["--t-between-siblings-gap", "2px"], + ["--t-table-horizontal-cell-margin", "8px"], + ["--t-table-checkbox-column-width", "32px"], + ["--t-table-horizontal-cell-padding", "8px"], + ["--t-right-drawer-width", "500px"], + ["--t-clickable-element-background-transition", "background 0.1s ease"], + ["--t-last-layer-z-index", "2147483647"], + ["--t-buttons-secondary-text-color", "color(display-p3 0.63 0.69 1)"], + ["--t-accent-primary", "color(display-p3 0.163 0.22 0.439)"], + ["--t-accent-secondary", "color(display-p3 0.163 0.22 0.439)"], + ["--t-accent-tertiary", "color(display-p3 0.105 0.141 0.275)"], + ["--t-accent-quaternary", "color(display-p3 0.081 0.089 0.144)"], + ["--t-accent-accent3570", "color(display-p3 0.285 0.362 0.674)"], + ["--t-accent-accent4060", "color(display-p3 0.285 0.362 0.674)"], + ["--t-accent-accent1", "color(display-p3 0.068 0.074 0.118)"], + ["--t-accent-accent2", "color(display-p3 0.081 0.089 0.144)"], + ["--t-accent-accent3", "color(display-p3 0.105 0.141 0.275)"], + ["--t-accent-accent4", "color(display-p3 0.129 0.18 0.369)"], + ["--t-accent-accent5", "color(display-p3 0.163 0.22 0.439)"], + ["--t-accent-accent6", "color(display-p3 0.203 0.262 0.5)"], + ["--t-accent-accent7", "color(display-p3 0.245 0.309 0.575)"], + ["--t-accent-accent8", "color(display-p3 0.285 0.362 0.674)"], + ["--t-accent-accent9", "color(display-p3 0.276 0.384 0.837)"], + ["--t-accent-accent10", "color(display-p3 0.354 0.445 0.866)"], + ["--t-accent-accent11", "color(display-p3 0.63 0.69 1)"], + ["--t-accent-accent12", "color(display-p3 0.848 0.881 0.99)"], + ["--t-background-noisy", "url(data:image/jpeg;base64,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);"], + ["--t-background-primary", "color(display-p3 0.09 0.09 0.09)"], + ["--t-background-secondary", "color(display-p3 0.106 0.106 0.106)"], + ["--t-background-tertiary", "color(display-p3 0.114 0.114 0.114)"], + ["--t-background-quaternary", "color(display-p3 0.133 0.133 0.133)"], + ["--t-background-inverted-primary", "color(display-p3 0.922 0.922 0.922)"], + ["--t-background-inverted-secondary", "color(display-p3 0.702 0.702 0.702)"], + ["--t-background-danger", "color(display-p3 0.211 0.081 0.099)"], + ["--t-background-transparent-primary", "color(display-p3 0 0 0 / 0.5)"], + ["--t-background-transparent-secondary", "color(display-p3 0 0 0 / 0.4)"], + ["--t-background-transparent-strong", "color(display-p3 1 1 1 / 0.141)"], + ["--t-background-transparent-medium", "color(display-p3 1 1 1 / 0.102)"], + ["--t-background-transparent-light", "color(display-p3 1 1 1 / 0.059)"], + ["--t-background-transparent-lighter", "color(display-p3 1 1 1 / 0.031)"], + ["--t-background-transparent-danger", "#ff173f2d"], + ["--t-background-transparent-blue", "#3566ff57"], + ["--t-background-transparent-orange", "#ff590039"], + ["--t-background-transparent-success", "#11ff992d"], + ["--t-background-overlay-primary", "#000000b8"], + ["--t-background-overlay-secondary", "#0000005c"], + ["--t-background-overlay-tertiary", "#0000005c"], + ["--t-background-radial-gradient", "radial-gradient(50% 62.62% at 50% 0%, color(display-p3 0.506 0.506 0.506) 0%, color(display-p3 0.482 0.482 0.482) 100%)"], + ["--t-background-radial-gradient-hover", "radial-gradient(76.32% 95.59% at 50% 0%, color(display-p3 0.482 0.482 0.482) 0%, color(display-p3 0.702 0.702 0.702) 100%)"], + ["--t-background-primary-inverted", "color(display-p3 0.922 0.922 0.922)"], + ["--t-background-primary-inverted-hover", "color(display-p3 0.702 0.702 0.702)"], + ["--t-blur-light", "blur(6px) saturate(200%) contrast(100%) brightness(130%)"], + ["--t-blur-medium", "blur(12px) saturate(200%) contrast(100%) brightness(130%)"], + ["--t-blur-strong", "blur(20px) saturate(200%) contrast(100%) brightness(130%)"], + ["--t-border-color-strong", "color(display-p3 0.282 0.282 0.282)"], + ["--t-border-color-medium", "color(display-p3 0.133 0.133 0.133)"], + ["--t-border-color-light", "color(display-p3 0.114 0.114 0.114)"], + ["--t-border-color-secondary-inverted", "color(display-p3 0.702 0.702 0.702)"], + ["--t-border-color-inverted", "color(display-p3 0.922 0.922 0.922)"], + ["--t-border-color-danger", "color(display-p3 0.348 0.11 0.142)"], + ["--t-border-color-blue", "color(display-p3 0.245 0.309 0.575)"], + ["--t-border-color-transparent-strong", "color(display-p3 1 1 1 / 0.071)"], + ["--t-border-radius-xs", "2px"], + ["--t-border-radius-sm", "4px"], + ["--t-border-radius-md", "8px"], + ["--t-border-radius-xl", "20px"], + ["--t-border-radius-xxl", "40px"], + ["--t-border-radius-pill", "999px"], + ["--t-border-radius-rounded", "100%"], + ["--t-box-shadow-color", "rgba(0,0,0,0.6)"], + ["--t-box-shadow-light", "0px 2px 4px 0px rgba(0,0,0,0.04), 0px 0px 4px 0px rgba(0,0,0,0.08)"], + ["--t-box-shadow-strong", "2px 4px 16px 0px rgba(0,0,0,0.16), 0px 2px 4px 0px rgba(0,0,0,0.08)"], + ["--t-box-shadow-underline", "0px 1px 0px 0px rgba(0,0,0,0.32)"], + ["--t-box-shadow-super-heavy", "2px 4px 16px 0px rgba(0,0,0,0.12), 0px 2px 4px 0px rgba(0,0,0,0.04)"], + ["--t-font-color-primary", "color(display-p3 0.922 0.922 0.922)"], + ["--t-font-color-secondary", "color(display-p3 0.702 0.702 0.702)"], + ["--t-font-color-tertiary", "color(display-p3 0.506 0.506 0.506)"], + ["--t-font-color-light", "color(display-p3 0.4 0.4 0.4)"], + ["--t-font-color-extra-light", "color(display-p3 0.298 0.298 0.298)"], + ["--t-font-color-inverted", "color(display-p3 0.09 0.09 0.09)"], + ["--t-font-color-danger", "color(display-p3 0.83 0.329 0.324)"], + ["--t-font-size-xxs", "0.625rem"], + ["--t-font-size-xs", "0.85rem"], + ["--t-font-size-sm", "0.92rem"], + ["--t-font-size-md", "1rem"], + ["--t-font-size-lg", "1.23rem"], + ["--t-font-size-xl", "1.54rem"], + ["--t-font-size-xxl", "1.85rem"], + ["--t-font-weight-regular", "400"], + ["--t-font-weight-medium", "500"], + ["--t-font-weight-semi-bold", "600"], + ["--t-font-family", "Inter, sans-serif"], + ["--t-name", "dark"], + ["--t-snack-bar-success-color", "color(display-p3 0.297 0.637 0.581)"], + ["--t-snack-bar-success-background-color", "#11ff992d"], + ["--t-snack-bar-error-color", "color(display-p3 0.83 0.329 0.324)"], + ["--t-snack-bar-error-background-color", "#ff173f2d"], + ["--t-snack-bar-warning-color", "color(display-p3 0.9 0.45 0.2)"], + ["--t-snack-bar-warning-background-color", "#ff590039"], + ["--t-snack-bar-info-color", "color(display-p3 0.276 0.384 0.837)"], + ["--t-snack-bar-info-background-color", "#3566ff57"], + ["--t-snack-bar-default-color", "color(display-p3 0.922 0.922 0.922)"], + ["--t-snack-bar-default-background-color", "color(display-p3 1 1 1 / 0.059)"], + ["--t-tag-text-gray", "color(display-p3 0.702 0.702 0.702)"], + ["--t-tag-text-mauve", "color(display-p3 0.707 0.7 0.735)"], + ["--t-tag-text-slate", "color(display-p3 0.692 0.704 0.728)"], + ["--t-tag-text-sage", "color(display-p3 0.685 0.709 0.697)"], + ["--t-tag-text-olive", "color(display-p3 0.69 0.709 0.682)"], + ["--t-tag-text-sand", "color(display-p3 0.707 0.703 0.68)"], + ["--t-tag-text-tomato", "color(display-p3 1 0.585 0.455)"], + ["--t-tag-text-red", "color(display-p3 1 0.57 0.55)"], + ["--t-tag-text-ruby", "color(display-p3 1 0.57 0.59)"], + ["--t-tag-text-crimson", "color(display-p3 1 0.56 0.66)"], + ["--t-tag-text-pink", "color(display-p3 1 0.535 0.78)"], + ["--t-tag-text-plum", "color(display-p3 0.86 0.602 0.933)"], + ["--t-tag-text-purple", "color(display-p3 0.8 0.62 1)"], + ["--t-tag-text-violet", "color(display-p3 0.72 0.65 1)"], + ["--t-tag-text-iris", "color(display-p3 0.685 0.662 1)"], + ["--t-tag-text-cyan", "color(display-p3 0.446 0.79 0.887)"], + ["--t-tag-text-turquoise", "color(display-p3 0.388 0.835 0.719)"], + ["--t-tag-text-sky", "color(display-p3 0.536 0.772 0.924)"], + ["--t-tag-text-blue", "color(display-p3 0.63 0.69 1)"], + ["--t-tag-text-jade", "color(display-p3 0.4 0.835 0.656)"], + ["--t-tag-text-green", "color(display-p3 0.434 0.828 0.573)"], + ["--t-tag-text-grass", "color(display-p3 0.535 0.807 0.542)"], + ["--t-tag-text-mint", "color(display-p3 0.482 0.825 0.733)"], + ["--t-tag-text-lime", "color(display-p3 0.771 0.893 0.485)"], + ["--t-tag-text-bronze", "color(display-p3 0.81 0.707 0.655)"], + ["--t-tag-text-gold", "color(display-p3 0.784 0.728 0.635)"], + ["--t-tag-text-brown", "color(display-p3 0.835 0.715 0.597)"], + ["--t-tag-text-orange", "color(display-p3 1 0.63 0.38)"], + ["--t-tag-text-amber", "color(display-p3 1 0.8 0.29)"], + ["--t-tag-text-yellow", "color(display-p3 0.948 0.885 0.392)"], + ["--t-tag-background-gray", "color(display-p3 0.098 0.098 0.098)"], + ["--t-tag-background-mauve", "color(display-p3 0.138 0.134 0.144)"], + ["--t-tag-background-slate", "color(display-p3 0.13 0.135 0.145)"], + ["--t-tag-background-sage", "color(display-p3 0.128 0.135 0.131)"], + ["--t-tag-background-olive", "color(display-p3 0.131 0.135 0.126)"], + ["--t-tag-background-sand", "color(display-p3 0.135 0.135 0.129)"], + ["--t-tag-background-tomato", "color(display-p3 0.205 0.097 0.083)"], + ["--t-tag-background-red", "color(display-p3 0.211 0.081 0.099)"], + ["--t-tag-background-ruby", "color(display-p3 0.208 0.088 0.117)"], + ["--t-tag-background-crimson", "color(display-p3 0.203 0.091 0.143)"], + ["--t-tag-background-pink", "color(display-p3 0.198 0.098 0.179)"], + ["--t-tag-background-plum", "color(display-p3 0.192 0.105 0.202)"], + ["--t-tag-background-purple", "color(display-p3 0.175 0.112 0.224)"], + ["--t-tag-background-violet", "color(display-p3 0.154 0.123 0.256)"], + ["--t-tag-background-iris", "color(display-p3 0.128 0.134 0.272)"], + ["--t-tag-background-cyan", "color(display-p3 0.073 0.168 0.209)"], + ["--t-tag-background-turquoise", "color(display-p3 0.087 0.175 0.165)"], + ["--t-tag-background-sky", "color(display-p3 0.089 0.154 0.244)"], + ["--t-tag-background-blue", "color(display-p3 0.105 0.141 0.275)"], + ["--t-tag-background-jade", "color(display-p3 0.091 0.176 0.138)"], + ["--t-tag-background-green", "color(display-p3 0.1 0.173 0.133)"], + ["--t-tag-background-grass", "color(display-p3 0.118 0.163 0.122)"], + ["--t-tag-background-mint", "color(display-p3 0.077 0.17 0.168)"], + ["--t-tag-background-lime", "color(display-p3 0.13 0.16 0.099)"], + ["--t-tag-background-bronze", "color(display-p3 0.147 0.132 0.125)"], + ["--t-tag-background-gold", "color(display-p3 0.141 0.136 0.122)"], + ["--t-tag-background-brown", "color(display-p3 0.151 0.13 0.115)"], + ["--t-tag-background-orange", "color(display-p3 0.189 0.12 0.056)"], + ["--t-tag-background-amber", "color(display-p3 0.178 0.128 0.049)"], + ["--t-tag-background-yellow", "color(display-p3 0.168 0.137 0.039)"], + ["--t-code-text-gray", "color(display-p3 0.482 0.482 0.482)"], + ["--t-code-text-sky", "color(display-p3 0.718 0.925 0.991)"], + ["--t-code-text-pink", "color(display-p3 0.808 0.356 0.645)"], + ["--t-code-text-orange", "color(display-p3 0.601 0.359 0.201)"], + ["--t-code-text-green", "color(display-p3 0.365 0.456 0.25)"], + ["--t-code-font-family", "DM Mono"], + ["--t--illustration-icon-color-blue", "color(display-p3 0.354 0.445 0.866)"], + ["--t--illustration-icon-color-gray", "color(display-p3 0.4 0.4 0.4)"], + ["--t--illustration-icon-fill-blue", "color(display-p3 0.848 0.881 0.99)"], + ["--t--illustration-icon-fill-gray", "color(display-p3 0.133 0.133 0.133)"], + ["--t-gray-scale-gray1", "color(display-p3 0.09 0.09 0.09)"], + ["--t-gray-scale-gray2", "color(display-p3 0.106 0.106 0.106)"], + ["--t-gray-scale-gray3", "color(display-p3 0.098 0.098 0.098)"], + ["--t-gray-scale-gray4", "color(display-p3 0.114 0.114 0.114)"], + ["--t-gray-scale-gray5", "color(display-p3 0.133 0.133 0.133)"], + ["--t-gray-scale-gray6", "color(display-p3 0.282 0.282 0.282)"], + ["--t-gray-scale-gray7", "color(display-p3 0.298 0.298 0.298)"], + ["--t-gray-scale-gray8", "color(display-p3 0.4 0.4 0.4)"], + ["--t-gray-scale-gray9", "color(display-p3 0.506 0.506 0.506)"], + ["--t-gray-scale-gray10", "color(display-p3 0.482 0.482 0.482)"], + ["--t-gray-scale-gray11", "color(display-p3 0.702 0.702 0.702)"], + ["--t-gray-scale-gray12", "color(display-p3 0.922 0.922 0.922)"], + ["--t-color-red", "color(display-p3 0.83 0.329 0.324)"], + ["--t-color-ruby", "color(display-p3 0.83 0.323 0.408)"], + ["--t-color-crimson", "color(display-p3 0.843 0.298 0.507)"], + ["--t-color-tomato", "color(display-p3 0.831 0.345 0.231)"], + ["--t-color-orange", "color(display-p3 0.9 0.45 0.2)"], + ["--t-color-amber", "color(display-p3 1 0.77 0.26)"], + ["--t-color-yellow", "color(display-p3 1 0.92 0.22)"], + ["--t-color-lime", "color(display-p3 0.78 0.928 0.466)"], + ["--t-color-grass", "color(display-p3 0.38 0.647 0.378)"], + ["--t-color-green", "color(display-p3 0.332 0.634 0.442)"], + ["--t-color-jade", "color(display-p3 0.319 0.63 0.521)"], + ["--t-color-mint", "color(display-p3 0.62 0.908 0.834)"], + ["--t-color-turquoise", "color(display-p3 0.297 0.637 0.581)"], + ["--t-color-cyan", "color(display-p3 0.282 0.627 0.765)"], + ["--t-color-sky", "color(display-p3 0.585 0.877 0.983)"], + ["--t-color-blue", "color(display-p3 0.276 0.384 0.837)"], + ["--t-color-iris", "color(display-p3 0.357 0.357 0.81)"], + ["--t-color-violet", "color(display-p3 0.417 0.341 0.784)"], + ["--t-color-purple", "color(display-p3 0.523 0.318 0.751)"], + ["--t-color-plum", "color(display-p3 0.624 0.313 0.708)"], + ["--t-color-pink", "color(display-p3 0.775 0.297 0.61)"], + ["--t-color-bronze", "color(display-p3 0.611 0.507 0.455)"], + ["--t-color-gold", "color(display-p3 0.579 0.517 0.41)"], + ["--t-color-brown", "color(display-p3 0.651 0.505 0.368)"], + ["--t-color-gray", "color(display-p3 0.298 0.298 0.298)"], + ["--t-color-yellow1", "color(display-p3 0.078 0.069 0.047)"], + ["--t-color-yellow2", "color(display-p3 0.103 0.094 0.063)"], + ["--t-color-yellow3", "color(display-p3 0.168 0.137 0.039)"], + ["--t-color-yellow4", "color(display-p3 0.209 0.169 0)"], + ["--t-color-yellow5", "color(display-p3 0.255 0.209 0)"], + ["--t-color-yellow6", "color(display-p3 0.31 0.261 0.07)"], + ["--t-color-yellow7", "color(display-p3 0.389 0.331 0.135)"], + ["--t-color-yellow8", "color(display-p3 0.497 0.42 0.182)"], + ["--t-color-yellow9", "color(display-p3 1 0.92 0.22)"], + ["--t-color-yellow10", "color(display-p3 1 1 0.456)"], + ["--t-color-yellow11", "color(display-p3 0.948 0.885 0.392)"], + ["--t-color-yellow12", "color(display-p3 0.959 0.934 0.731)"], + ["--t-color-green1", "color(display-p3 0.062 0.083 0.071)"], + ["--t-color-green2", "color(display-p3 0.079 0.106 0.09)"], + ["--t-color-green3", "color(display-p3 0.1 0.173 0.133)"], + ["--t-color-green4", "color(display-p3 0.115 0.229 0.166)"], + ["--t-color-green5", "color(display-p3 0.147 0.282 0.206)"], + ["--t-color-green6", "color(display-p3 0.185 0.338 0.25)"], + ["--t-color-green7", "color(display-p3 0.227 0.403 0.298)"], + ["--t-color-green8", "color(display-p3 0.27 0.479 0.351)"], + ["--t-color-green9", "color(display-p3 0.332 0.634 0.442)"], + ["--t-color-green10", "color(display-p3 0.357 0.682 0.474)"], + ["--t-color-green11", "color(display-p3 0.434 0.828 0.573)"], + ["--t-color-green12", "color(display-p3 0.747 0.938 0.807)"], + ["--t-color-turquoise1", "color(display-p3 0.059 0.083 0.079)"], + ["--t-color-turquoise2", "color(display-p3 0.075 0.11 0.107)"], + ["--t-color-turquoise3", "color(display-p3 0.087 0.175 0.165)"], + ["--t-color-turquoise4", "color(display-p3 0.087 0.227 0.214)"], + ["--t-color-turquoise5", "color(display-p3 0.12 0.277 0.261)"], + ["--t-color-turquoise6", "color(display-p3 0.162 0.335 0.314)"], + ["--t-color-turquoise7", "color(display-p3 0.205 0.406 0.379)"], + ["--t-color-turquoise8", "color(display-p3 0.245 0.489 0.453)"], + ["--t-color-turquoise9", "color(display-p3 0.297 0.637 0.581)"], + ["--t-color-turquoise10", "color(display-p3 0.319 0.69 0.62)"], + ["--t-color-turquoise11", "color(display-p3 0.388 0.835 0.719)"], + ["--t-color-turquoise12", "color(display-p3 0.734 0.934 0.87)"], + ["--t-color-sky1", "color(display-p3 0.056 0.078 0.116)"], + ["--t-color-sky2", "color(display-p3 0.075 0.101 0.149)"], + ["--t-color-sky3", "color(display-p3 0.089 0.154 0.244)"], + ["--t-color-sky4", "color(display-p3 0.106 0.207 0.323)"], + ["--t-color-sky5", "color(display-p3 0.135 0.261 0.394)"], + ["--t-color-sky6", "color(display-p3 0.17 0.322 0.469)"], + ["--t-color-sky7", "color(display-p3 0.205 0.394 0.557)"], + ["--t-color-sky8", "color(display-p3 0.232 0.48 0.665)"], + ["--t-color-sky9", "color(display-p3 0.585 0.877 0.983)"], + ["--t-color-sky10", "color(display-p3 0.718 0.925 0.991)"], + ["--t-color-sky11", "color(display-p3 0.536 0.772 0.924)"], + ["--t-color-sky12", "color(display-p3 0.799 0.947 0.993)"], + ["--t-color-blue1", "color(display-p3 0.068 0.074 0.118)"], + ["--t-color-blue2", "color(display-p3 0.081 0.089 0.144)"], + ["--t-color-blue3", "color(display-p3 0.105 0.141 0.275)"], + ["--t-color-blue4", "color(display-p3 0.129 0.18 0.369)"], + ["--t-color-blue5", "color(display-p3 0.163 0.22 0.439)"], + ["--t-color-blue6", "color(display-p3 0.203 0.262 0.5)"], + ["--t-color-blue7", "color(display-p3 0.245 0.309 0.575)"], + ["--t-color-blue8", "color(display-p3 0.285 0.362 0.674)"], + ["--t-color-blue9", "color(display-p3 0.276 0.384 0.837)"], + ["--t-color-blue10", "color(display-p3 0.354 0.445 0.866)"], + ["--t-color-blue11", "color(display-p3 0.63 0.69 1)"], + ["--t-color-blue12", "color(display-p3 0.848 0.881 0.99)"], + ["--t-color-purple1", "color(display-p3 0.09 0.068 0.103)"], + ["--t-color-purple2", "color(display-p3 0.113 0.082 0.134)"], + ["--t-color-purple3", "color(display-p3 0.175 0.112 0.224)"], + ["--t-color-purple4", "color(display-p3 0.224 0.137 0.297)"], + ["--t-color-purple5", "color(display-p3 0.264 0.167 0.349)"], + ["--t-color-purple6", "color(display-p3 0.311 0.208 0.406)"], + ["--t-color-purple7", "color(display-p3 0.381 0.266 0.496)"], + ["--t-color-purple8", "color(display-p3 0.49 0.349 0.649)"], + ["--t-color-purple9", "color(display-p3 0.523 0.318 0.751)"], + ["--t-color-purple10", "color(display-p3 0.57 0.373 0.791)"], + ["--t-color-purple11", "color(display-p3 0.8 0.62 1)"], + ["--t-color-purple12", "color(display-p3 0.913 0.854 0.971)"], + ["--t-color-pink1", "color(display-p3 0.093 0.068 0.089)"], + ["--t-color-pink2", "color(display-p3 0.121 0.073 0.11)"], + ["--t-color-pink3", "color(display-p3 0.198 0.098 0.179)"], + ["--t-color-pink4", "color(display-p3 0.271 0.095 0.231)"], + ["--t-color-pink5", "color(display-p3 0.32 0.127 0.273)"], + ["--t-color-pink6", "color(display-p3 0.382 0.177 0.326)"], + ["--t-color-pink7", "color(display-p3 0.477 0.238 0.405)"], + ["--t-color-pink8", "color(display-p3 0.612 0.304 0.51)"], + ["--t-color-pink9", "color(display-p3 0.775 0.297 0.61)"], + ["--t-color-pink10", "color(display-p3 0.808 0.356 0.645)"], + ["--t-color-pink11", "color(display-p3 1 0.535 0.78)"], + ["--t-color-pink12", "color(display-p3 0.964 0.826 0.912)"], + ["--t-color-red1", "color(display-p3 0.093 0.068 0.067)"], + ["--t-color-red2", "color(display-p3 0.118 0.077 0.079)"], + ["--t-color-red3", "color(display-p3 0.211 0.081 0.099)"], + ["--t-color-red4", "color(display-p3 0.287 0.079 0.113)"], + ["--t-color-red5", "color(display-p3 0.348 0.11 0.142)"], + ["--t-color-red6", "color(display-p3 0.414 0.16 0.183)"], + ["--t-color-red7", "color(display-p3 0.508 0.224 0.236)"], + ["--t-color-red8", "color(display-p3 0.659 0.298 0.297)"], + ["--t-color-red9", "color(display-p3 0.83 0.329 0.324)"], + ["--t-color-red10", "color(display-p3 0.861 0.403 0.387)"], + ["--t-color-red11", "color(display-p3 1 0.57 0.55)"], + ["--t-color-red12", "color(display-p3 0.971 0.826 0.852)"], + ["--t-color-orange1", "color(display-p3 0.088 0.07 0.057)"], + ["--t-color-orange2", "color(display-p3 0.113 0.089 0.061)"], + ["--t-color-orange3", "color(display-p3 0.189 0.12 0.056)"], + ["--t-color-orange4", "color(display-p3 0.262 0.132 0)"], + ["--t-color-orange5", "color(display-p3 0.315 0.168 0.016)"], + ["--t-color-orange6", "color(display-p3 0.376 0.219 0.088)"], + ["--t-color-orange7", "color(display-p3 0.465 0.283 0.147)"], + ["--t-color-orange8", "color(display-p3 0.601 0.359 0.201)"], + ["--t-color-orange9", "color(display-p3 0.9 0.45 0.2)"], + ["--t-color-orange10", "color(display-p3 0.98 0.51 0.23)"], + ["--t-color-orange11", "color(display-p3 1 0.63 0.38)"], + ["--t-color-orange12", "color(display-p3 0.98 0.883 0.775)"], + ["--t-color-gray1", "color(display-p3 0.09 0.09 0.09)"], + ["--t-color-gray2", "color(display-p3 0.106 0.106 0.106)"], + ["--t-color-gray3", "color(display-p3 0.098 0.098 0.098)"], + ["--t-color-gray4", "color(display-p3 0.114 0.114 0.114)"], + ["--t-color-gray5", "color(display-p3 0.133 0.133 0.133)"], + ["--t-color-gray6", "color(display-p3 0.282 0.282 0.282)"], + ["--t-color-gray7", "color(display-p3 0.298 0.298 0.298)"], + ["--t-color-gray8", "color(display-p3 0.4 0.4 0.4)"], + ["--t-color-gray9", "color(display-p3 0.506 0.506 0.506)"], + ["--t-color-gray10", "color(display-p3 0.482 0.482 0.482)"], + ["--t-color-gray11", "color(display-p3 0.702 0.702 0.702)"], + ["--t-color-gray12", "color(display-p3 0.922 0.922 0.922)"], + ["--t-color-mauve1", "color(display-p3 0.07 0.067 0.074)"], + ["--t-color-mauve2", "color(display-p3 0.101 0.098 0.105)"], + ["--t-color-mauve3", "color(display-p3 0.138 0.134 0.144)"], + ["--t-color-mauve4", "color(display-p3 0.167 0.161 0.175)"], + ["--t-color-mauve5", "color(display-p3 0.196 0.189 0.206)"], + ["--t-color-mauve6", "color(display-p3 0.232 0.225 0.245)"], + ["--t-color-mauve7", "color(display-p3 0.286 0.277 0.302)"], + ["--t-color-mauve8", "color(display-p3 0.383 0.373 0.408)"], + ["--t-color-mauve9", "color(display-p3 0.434 0.428 0.467)"], + ["--t-color-mauve10", "color(display-p3 0.487 0.48 0.519)"], + ["--t-color-mauve11", "color(display-p3 0.707 0.7 0.735)"], + ["--t-color-mauve12", "color(display-p3 0.933 0.933 0.94)"], + ["--t-color-slate1", "color(display-p3 0.067 0.067 0.074)"], + ["--t-color-slate2", "color(display-p3 0.095 0.098 0.105)"], + ["--t-color-slate3", "color(display-p3 0.13 0.135 0.145)"], + ["--t-color-slate4", "color(display-p3 0.156 0.163 0.176)"], + ["--t-color-slate5", "color(display-p3 0.183 0.191 0.206)"], + ["--t-color-slate6", "color(display-p3 0.215 0.226 0.244)"], + ["--t-color-slate7", "color(display-p3 0.265 0.28 0.302)"], + ["--t-color-slate8", "color(display-p3 0.357 0.381 0.409)"], + ["--t-color-slate9", "color(display-p3 0.415 0.431 0.463)"], + ["--t-color-slate10", "color(display-p3 0.469 0.483 0.514)"], + ["--t-color-slate11", "color(display-p3 0.692 0.704 0.728)"], + ["--t-color-slate12", "color(display-p3 0.93 0.933 0.94)"], + ["--t-color-sage1", "color(display-p3 0.064 0.07 0.067)"], + ["--t-color-sage2", "color(display-p3 0.092 0.098 0.094)"], + ["--t-color-sage3", "color(display-p3 0.128 0.135 0.131)"], + ["--t-color-sage4", "color(display-p3 0.155 0.164 0.159)"], + ["--t-color-sage5", "color(display-p3 0.183 0.193 0.188)"], + ["--t-color-sage6", "color(display-p3 0.218 0.23 0.224)"], + ["--t-color-sage7", "color(display-p3 0.269 0.285 0.277)"], + ["--t-color-sage8", "color(display-p3 0.362 0.382 0.373)"], + ["--t-color-sage9", "color(display-p3 0.398 0.438 0.421)"], + ["--t-color-sage10", "color(display-p3 0.453 0.49 0.474)"], + ["--t-color-sage11", "color(display-p3 0.685 0.709 0.697)"], + ["--t-color-sage12", "color(display-p3 0.927 0.933 0.93)"], + ["--t-color-olive1", "color(display-p3 0.067 0.07 0.063)"], + ["--t-color-olive2", "color(display-p3 0.095 0.098 0.091)"], + ["--t-color-olive3", "color(display-p3 0.131 0.135 0.126)"], + ["--t-color-olive4", "color(display-p3 0.158 0.163 0.153)"], + ["--t-color-olive5", "color(display-p3 0.186 0.192 0.18)"], + ["--t-color-olive6", "color(display-p3 0.221 0.229 0.215)"], + ["--t-color-olive7", "color(display-p3 0.273 0.284 0.266)"], + ["--t-color-olive8", "color(display-p3 0.365 0.382 0.359)"], + ["--t-color-olive9", "color(display-p3 0.414 0.438 0.404)"], + ["--t-color-olive10", "color(display-p3 0.467 0.49 0.458)"], + ["--t-color-olive11", "color(display-p3 0.69 0.709 0.682)"], + ["--t-color-olive12", "color(display-p3 0.927 0.933 0.926)"], + ["--t-color-sand1", "color(display-p3 0.067 0.067 0.063)"], + ["--t-color-sand2", "color(display-p3 0.098 0.098 0.094)"], + ["--t-color-sand3", "color(display-p3 0.135 0.135 0.129)"], + ["--t-color-sand4", "color(display-p3 0.164 0.163 0.156)"], + ["--t-color-sand5", "color(display-p3 0.193 0.192 0.183)"], + ["--t-color-sand6", "color(display-p3 0.23 0.229 0.217)"], + ["--t-color-sand7", "color(display-p3 0.285 0.282 0.267)"], + ["--t-color-sand8", "color(display-p3 0.384 0.378 0.357)"], + ["--t-color-sand9", "color(display-p3 0.434 0.428 0.403)"], + ["--t-color-sand10", "color(display-p3 0.487 0.481 0.456)"], + ["--t-color-sand11", "color(display-p3 0.707 0.703 0.68)"], + ["--t-color-sand12", "color(display-p3 0.933 0.933 0.926)"], + ["--t-color-tomato1", "color(display-p3 0.09 0.068 0.067)"], + ["--t-color-tomato2", "color(display-p3 0.115 0.084 0.076)"], + ["--t-color-tomato3", "color(display-p3 0.205 0.097 0.083)"], + ["--t-color-tomato4", "color(display-p3 0.282 0.099 0.077)"], + ["--t-color-tomato5", "color(display-p3 0.339 0.129 0.101)"], + ["--t-color-tomato6", "color(display-p3 0.398 0.179 0.141)"], + ["--t-color-tomato7", "color(display-p3 0.487 0.245 0.194)"], + ["--t-color-tomato8", "color(display-p3 0.629 0.322 0.248)"], + ["--t-color-tomato9", "color(display-p3 0.831 0.345 0.231)"], + ["--t-color-tomato10", "color(display-p3 0.862 0.415 0.298)"], + ["--t-color-tomato11", "color(display-p3 1 0.585 0.455)"], + ["--t-color-tomato12", "color(display-p3 0.959 0.833 0.802)"], + ["--t-color-ruby1", "color(display-p3 0.093 0.068 0.074)"], + ["--t-color-ruby2", "color(display-p3 0.113 0.083 0.089)"], + ["--t-color-ruby3", "color(display-p3 0.208 0.088 0.117)"], + ["--t-color-ruby4", "color(display-p3 0.279 0.092 0.147)"], + ["--t-color-ruby5", "color(display-p3 0.337 0.12 0.18)"], + ["--t-color-ruby6", "color(display-p3 0.401 0.166 0.223)"], + ["--t-color-ruby7", "color(display-p3 0.495 0.224 0.281)"], + ["--t-color-ruby8", "color(display-p3 0.652 0.295 0.359)"], + ["--t-color-ruby9", "color(display-p3 0.83 0.323 0.408)"], + ["--t-color-ruby10", "color(display-p3 0.857 0.392 0.455)"], + ["--t-color-ruby11", "color(display-p3 1 0.57 0.59)"], + ["--t-color-ruby12", "color(display-p3 0.968 0.83 0.88)"], + ["--t-color-crimson1", "color(display-p3 0.093 0.068 0.078)"], + ["--t-color-crimson2", "color(display-p3 0.117 0.078 0.095)"], + ["--t-color-crimson3", "color(display-p3 0.203 0.091 0.143)"], + ["--t-color-crimson4", "color(display-p3 0.277 0.087 0.182)"], + ["--t-color-crimson5", "color(display-p3 0.332 0.115 0.22)"], + ["--t-color-crimson6", "color(display-p3 0.394 0.162 0.268)"], + ["--t-color-crimson7", "color(display-p3 0.489 0.222 0.336)"], + ["--t-color-crimson8", "color(display-p3 0.638 0.289 0.429)"], + ["--t-color-crimson9", "color(display-p3 0.843 0.298 0.507)"], + ["--t-color-crimson10", "color(display-p3 0.864 0.364 0.539)"], + ["--t-color-crimson11", "color(display-p3 1 0.56 0.66)"], + ["--t-color-crimson12", "color(display-p3 0.966 0.834 0.906)"], + ["--t-color-plum1", "color(display-p3 0.09 0.068 0.092)"], + ["--t-color-plum2", "color(display-p3 0.118 0.077 0.121)"], + ["--t-color-plum3", "color(display-p3 0.192 0.105 0.202)"], + ["--t-color-plum4", "color(display-p3 0.25 0.121 0.271)"], + ["--t-color-plum5", "color(display-p3 0.293 0.152 0.319)"], + ["--t-color-plum6", "color(display-p3 0.343 0.198 0.372)"], + ["--t-color-plum7", "color(display-p3 0.424 0.262 0.461)"], + ["--t-color-plum8", "color(display-p3 0.54 0.341 0.595)"], + ["--t-color-plum9", "color(display-p3 0.624 0.313 0.708)"], + ["--t-color-plum10", "color(display-p3 0.666 0.365 0.748)"], + ["--t-color-plum11", "color(display-p3 0.86 0.602 0.933)"], + ["--t-color-plum12", "color(display-p3 0.936 0.836 0.949)"], + ["--t-color-violet1", "color(display-p3 0.077 0.071 0.118)"], + ["--t-color-violet2", "color(display-p3 0.101 0.084 0.141)"], + ["--t-color-violet3", "color(display-p3 0.154 0.123 0.256)"], + ["--t-color-violet4", "color(display-p3 0.191 0.148 0.345)"], + ["--t-color-violet5", "color(display-p3 0.226 0.182 0.396)"], + ["--t-color-violet6", "color(display-p3 0.269 0.223 0.449)"], + ["--t-color-violet7", "color(display-p3 0.326 0.277 0.53)"], + ["--t-color-violet8", "color(display-p3 0.399 0.346 0.656)"], + ["--t-color-violet9", "color(display-p3 0.417 0.341 0.784)"], + ["--t-color-violet10", "color(display-p3 0.477 0.402 0.823)"], + ["--t-color-violet11", "color(display-p3 0.72 0.65 1)"], + ["--t-color-violet12", "color(display-p3 0.883 0.867 0.986)"], + ["--t-color-iris1", "color(display-p3 0.075 0.075 0.114)"], + ["--t-color-iris2", "color(display-p3 0.089 0.086 0.14)"], + ["--t-color-iris3", "color(display-p3 0.128 0.134 0.272)"], + ["--t-color-iris4", "color(display-p3 0.153 0.165 0.382)"], + ["--t-color-iris5", "color(display-p3 0.192 0.201 0.44)"], + ["--t-color-iris6", "color(display-p3 0.239 0.241 0.491)"], + ["--t-color-iris7", "color(display-p3 0.291 0.289 0.565)"], + ["--t-color-iris8", "color(display-p3 0.35 0.345 0.673)"], + ["--t-color-iris9", "color(display-p3 0.357 0.357 0.81)"], + ["--t-color-iris10", "color(display-p3 0.428 0.416 0.843)"], + ["--t-color-iris11", "color(display-p3 0.685 0.662 1)"], + ["--t-color-iris12", "color(display-p3 0.878 0.875 0.986)"], + ["--t-color-cyan1", "color(display-p3 0.053 0.085 0.098)"], + ["--t-color-cyan2", "color(display-p3 0.072 0.105 0.122)"], + ["--t-color-cyan3", "color(display-p3 0.073 0.168 0.209)"], + ["--t-color-cyan4", "color(display-p3 0.063 0.216 0.277)"], + ["--t-color-cyan5", "color(display-p3 0.091 0.267 0.336)"], + ["--t-color-cyan6", "color(display-p3 0.137 0.324 0.4)"], + ["--t-color-cyan7", "color(display-p3 0.186 0.398 0.484)"], + ["--t-color-cyan8", "color(display-p3 0.23 0.496 0.6)"], + ["--t-color-cyan9", "color(display-p3 0.282 0.627 0.765)"], + ["--t-color-cyan10", "color(display-p3 0.331 0.675 0.801)"], + ["--t-color-cyan11", "color(display-p3 0.446 0.79 0.887)"], + ["--t-color-cyan12", "color(display-p3 0.757 0.919 0.962)"], + ["--t-color-jade1", "color(display-p3 0.059 0.083 0.071)"], + ["--t-color-jade2", "color(display-p3 0.078 0.11 0.094)"], + ["--t-color-jade3", "color(display-p3 0.091 0.176 0.138)"], + ["--t-color-jade4", "color(display-p3 0.102 0.228 0.177)"], + ["--t-color-jade5", "color(display-p3 0.133 0.279 0.221)"], + ["--t-color-jade6", "color(display-p3 0.174 0.334 0.273)"], + ["--t-color-jade7", "color(display-p3 0.219 0.402 0.335)"], + ["--t-color-jade8", "color(display-p3 0.263 0.488 0.411)"], + ["--t-color-jade9", "color(display-p3 0.319 0.63 0.521)"], + ["--t-color-jade10", "color(display-p3 0.338 0.68 0.555)"], + ["--t-color-jade11", "color(display-p3 0.4 0.835 0.656)"], + ["--t-color-jade12", "color(display-p3 0.734 0.934 0.838)"], + ["--t-color-grass1", "color(display-p3 0.062 0.083 0.067)"], + ["--t-color-grass2", "color(display-p3 0.083 0.103 0.085)"], + ["--t-color-grass3", "color(display-p3 0.118 0.163 0.122)"], + ["--t-color-grass4", "color(display-p3 0.142 0.225 0.15)"], + ["--t-color-grass5", "color(display-p3 0.178 0.279 0.186)"], + ["--t-color-grass6", "color(display-p3 0.217 0.337 0.224)"], + ["--t-color-grass7", "color(display-p3 0.258 0.4 0.264)"], + ["--t-color-grass8", "color(display-p3 0.302 0.47 0.305)"], + ["--t-color-grass9", "color(display-p3 0.38 0.647 0.378)"], + ["--t-color-grass10", "color(display-p3 0.426 0.694 0.426)"], + ["--t-color-grass11", "color(display-p3 0.535 0.807 0.542)"], + ["--t-color-grass12", "color(display-p3 0.797 0.936 0.776)"], + ["--t-color-mint1", "color(display-p3 0.059 0.082 0.081)"], + ["--t-color-mint2", "color(display-p3 0.068 0.104 0.105)"], + ["--t-color-mint3", "color(display-p3 0.077 0.17 0.168)"], + ["--t-color-mint4", "color(display-p3 0.068 0.224 0.22)"], + ["--t-color-mint5", "color(display-p3 0.104 0.275 0.264)"], + ["--t-color-mint6", "color(display-p3 0.154 0.332 0.313)"], + ["--t-color-mint7", "color(display-p3 0.207 0.403 0.373)"], + ["--t-color-mint8", "color(display-p3 0.258 0.49 0.441)"], + ["--t-color-mint9", "color(display-p3 0.62 0.908 0.834)"], + ["--t-color-mint10", "color(display-p3 0.725 0.954 0.898)"], + ["--t-color-mint11", "color(display-p3 0.482 0.825 0.733)"], + ["--t-color-mint12", "color(display-p3 0.807 0.955 0.887)"], + ["--t-color-lime1", "color(display-p3 0.067 0.073 0.048)"], + ["--t-color-lime2", "color(display-p3 0.086 0.1 0.067)"], + ["--t-color-lime3", "color(display-p3 0.13 0.16 0.099)"], + ["--t-color-lime4", "color(display-p3 0.172 0.214 0.126)"], + ["--t-color-lime5", "color(display-p3 0.213 0.266 0.153)"], + ["--t-color-lime6", "color(display-p3 0.257 0.321 0.182)"], + ["--t-color-lime7", "color(display-p3 0.307 0.383 0.215)"], + ["--t-color-lime8", "color(display-p3 0.365 0.456 0.25)"], + ["--t-color-lime9", "color(display-p3 0.78 0.928 0.466)"], + ["--t-color-lime10", "color(display-p3 0.865 0.995 0.519)"], + ["--t-color-lime11", "color(display-p3 0.771 0.893 0.485)"], + ["--t-color-lime12", "color(display-p3 0.905 0.966 0.753)"], + ["--t-color-bronze1", "color(display-p3 0.076 0.067 0.063)"], + ["--t-color-bronze2", "color(display-p3 0.106 0.097 0.093)"], + ["--t-color-bronze3", "color(display-p3 0.147 0.132 0.125)"], + ["--t-color-bronze4", "color(display-p3 0.185 0.166 0.156)"], + ["--t-color-bronze5", "color(display-p3 0.227 0.202 0.19)"], + ["--t-color-bronze6", "color(display-p3 0.278 0.246 0.23)"], + ["--t-color-bronze7", "color(display-p3 0.343 0.302 0.281)"], + ["--t-color-bronze8", "color(display-p3 0.426 0.374 0.347)"], + ["--t-color-bronze9", "color(display-p3 0.611 0.507 0.455)"], + ["--t-color-bronze10", "color(display-p3 0.66 0.556 0.504)"], + ["--t-color-bronze11", "color(display-p3 0.81 0.707 0.655)"], + ["--t-color-bronze12", "color(display-p3 0.921 0.88 0.854)"], + ["--t-color-gold1", "color(display-p3 0.071 0.071 0.067)"], + ["--t-color-gold2", "color(display-p3 0.104 0.101 0.09)"], + ["--t-color-gold3", "color(display-p3 0.141 0.136 0.122)"], + ["--t-color-gold4", "color(display-p3 0.177 0.17 0.152)"], + ["--t-color-gold5", "color(display-p3 0.217 0.207 0.185)"], + ["--t-color-gold6", "color(display-p3 0.265 0.252 0.225)"], + ["--t-color-gold7", "color(display-p3 0.327 0.31 0.277)"], + ["--t-color-gold8", "color(display-p3 0.407 0.384 0.342)"], + ["--t-color-gold9", "color(display-p3 0.579 0.517 0.41)"], + ["--t-color-gold10", "color(display-p3 0.628 0.566 0.463)"], + ["--t-color-gold11", "color(display-p3 0.784 0.728 0.635)"], + ["--t-color-gold12", "color(display-p3 0.906 0.887 0.855)"], + ["--t-color-brown1", "color(display-p3 0.071 0.067 0.059)"], + ["--t-color-brown2", "color(display-p3 0.107 0.095 0.087)"], + ["--t-color-brown3", "color(display-p3 0.151 0.13 0.115)"], + ["--t-color-brown4", "color(display-p3 0.191 0.161 0.138)"], + ["--t-color-brown5", "color(display-p3 0.235 0.194 0.162)"], + ["--t-color-brown6", "color(display-p3 0.291 0.237 0.192)"], + ["--t-color-brown7", "color(display-p3 0.365 0.295 0.232)"], + ["--t-color-brown8", "color(display-p3 0.469 0.377 0.287)"], + ["--t-color-brown9", "color(display-p3 0.651 0.505 0.368)"], + ["--t-color-brown10", "color(display-p3 0.697 0.557 0.423)"], + ["--t-color-brown11", "color(display-p3 0.835 0.715 0.597)"], + ["--t-color-brown12", "color(display-p3 0.938 0.885 0.802)"], + ["--t-color-amber1", "color(display-p3 0.082 0.07 0.05)"], + ["--t-color-amber2", "color(display-p3 0.111 0.094 0.064)"], + ["--t-color-amber3", "color(display-p3 0.178 0.128 0.049)"], + ["--t-color-amber4", "color(display-p3 0.239 0.156 0)"], + ["--t-color-amber5", "color(display-p3 0.29 0.193 0)"], + ["--t-color-amber6", "color(display-p3 0.344 0.245 0.076)"], + ["--t-color-amber7", "color(display-p3 0.422 0.314 0.141)"], + ["--t-color-amber8", "color(display-p3 0.535 0.399 0.189)"], + ["--t-color-amber9", "color(display-p3 1 0.77 0.26)"], + ["--t-color-amber10", "color(display-p3 1 0.87 0.15)"], + ["--t-color-amber11", "color(display-p3 1 0.8 0.29)"], + ["--t-color-amber12", "color(display-p3 0.984 0.909 0.726)"], + ["--t-color-transparent-green1", "#00de4505"], + ["--t-color-transparent-green2", "#29f99d0b"], + ["--t-color-transparent-green3", "#22ff991e"], + ["--t-color-transparent-green4", "#11ff992d"], + ["--t-color-transparent-green5", "#2bffa23c"], + ["--t-color-transparent-green6", "#44ffaa4b"], + ["--t-color-transparent-green7", "#50fdac5e"], + ["--t-color-transparent-green8", "#54ffad73"], + ["--t-color-transparent-green9", "#44ffa49e"], + ["--t-color-transparent-green10", "#43fea4ab"], + ["--t-color-transparent-green11", "#46fea5d4"], + ["--t-color-transparent-green12", "#bbffd7f0"], + ["--t-color-transparent-turquoise1", "#00deab05"], + ["--t-color-transparent-turquoise2", "#12fbe60c"], + ["--t-color-transparent-turquoise3", "#00ffe61e"], + ["--t-color-transparent-turquoise4", "#00ffe92d"], + ["--t-color-transparent-turquoise5", "#00ffea3b"], + ["--t-color-transparent-turquoise6", "#1cffe84b"], + ["--t-color-transparent-turquoise7", "#2efde85f"], + ["--t-color-transparent-turquoise8", "#32ffe775"], + ["--t-color-transparent-turquoise9", "#13ffe49f"], + ["--t-color-transparent-turquoise10", "#0dffe0ae"], + ["--t-color-transparent-turquoise11", "#0afed5d6"], + ["--t-color-transparent-turquoise12", "#b8ffebef"], + ["--t-color-transparent-sky1", "#0044ff0f"], + ["--t-color-transparent-sky2", "#1171fb18"], + ["--t-color-transparent-sky3", "#1184fc33"], + ["--t-color-transparent-sky4", "#128fff49"], + ["--t-color-transparent-sky5", "#1c9dfd5d"], + ["--t-color-transparent-sky6", "#28a5ff72"], + ["--t-color-transparent-sky7", "#2badfe8b"], + ["--t-color-transparent-sky8", "#1db2fea9"], + ["--t-color-transparent-sky9", "#7ce3fffe"], + ["--t-color-transparent-sky10", "#a8eeff"], + ["--t-color-transparent-sky11", "#7cd3ffef"], + ["--t-color-transparent-sky12", "#c2f3ff"], + ["--t-color-transparent-blue1", "#1133ff0f"], + ["--t-color-transparent-blue2", "#3354fa17"], + ["--t-color-transparent-blue3", "#2f62ff3c"], + ["--t-color-transparent-blue4", "#3566ff57"], + ["--t-color-transparent-blue5", "#4171fd6b"], + ["--t-color-transparent-blue6", "#5178fd7c"], + ["--t-color-transparent-blue7", "#5a7fff90"], + ["--t-color-transparent-blue8", "#5b81feac"], + ["--t-color-transparent-blue9", "#4671ffdb"], + ["--t-color-transparent-blue10", "#5c7efee3"], + ["--t-color-transparent-blue11", "#9eb1ff"], + ["--t-color-transparent-blue12", "#d6e1ff"], + ["--t-color-transparent-purple1", "#b412f90b"], + ["--t-color-transparent-purple2", "#b744f714"], + ["--t-color-transparent-purple3", "#c150ff2d"], + ["--t-color-transparent-purple4", "#bb53fd42"], + ["--t-color-transparent-purple5", "#be5cfd51"], + ["--t-color-transparent-purple6", "#c16dfd61"], + ["--t-color-transparent-purple7", "#c378fd7a"], + ["--t-color-transparent-purple8", "#c47effa4"], + ["--t-color-transparent-purple9", "#b661ffc2"], + ["--t-color-transparent-purple10", "#bc6fffcd"], + ["--t-color-transparent-purple11", "#d19dff"], + ["--t-color-transparent-purple12", "#f1ddfffa"], + ["--t-color-transparent-pink1", "#f412bc09"], + ["--t-color-transparent-pink2", "#f420bb12"], + ["--t-color-transparent-pink3", "#fe37cc29"], + ["--t-color-transparent-pink4", "#fc1ec43f"], + ["--t-color-transparent-pink5", "#fd35c24e"], + ["--t-color-transparent-pink6", "#fd51c75f"], + ["--t-color-transparent-pink7", "#fd62c87b"], + ["--t-color-transparent-pink8", "#ff68c8a2"], + ["--t-color-transparent-pink9", "#fe49bcd4"], + ["--t-color-transparent-pink10", "#ff5cc0dc"], + ["--t-color-transparent-pink11", "#ff8dcc"], + ["--t-color-transparent-pink12", "#ffd3ecfd"], + ["--t-color-transparent-red1", "#f4121209"], + ["--t-color-transparent-red2", "#f22f3e11"], + ["--t-color-transparent-red3", "#ff173f2d"], + ["--t-color-transparent-red4", "#fe0a3b44"], + ["--t-color-transparent-red5", "#ff204756"], + ["--t-color-transparent-red6", "#ff3e5668"], + ["--t-color-transparent-red7", "#ff536184"], + ["--t-color-transparent-red8", "#ff5d61b0"], + ["--t-color-transparent-red9", "#fe4e54e4"], + ["--t-color-transparent-red10", "#ff6465eb"], + ["--t-color-transparent-red11", "#ff9592"], + ["--t-color-transparent-red12", "#ffd1d9"], + ["--t-color-transparent-orange1", "#ec360007"], + ["--t-color-transparent-orange2", "#fe6d000e"], + ["--t-color-transparent-orange3", "#fb6a0025"], + ["--t-color-transparent-orange4", "#ff590039"], + ["--t-color-transparent-orange5", "#ff61004a"], + ["--t-color-transparent-orange6", "#fd75045c"], + ["--t-color-transparent-orange7", "#ff832c75"], + ["--t-color-transparent-orange8", "#fe84389d"], + ["--t-color-transparent-orange9", "#fe6d15f7"], + ["--t-color-transparent-orange10", "#ff801f"], + ["--t-color-transparent-orange11", "#ffa057"], + ["--t-color-transparent-orange12", "#ffe0c2"], + ["--t-color-transparent-yellow1", "#d1510004"], + ["--t-color-transparent-yellow2", "#f9b4000b"], + ["--t-color-transparent-yellow3", "#ffaa001e"], + ["--t-color-transparent-yellow4", "#fdb70028"], + ["--t-color-transparent-yellow5", "#febb0036"], + ["--t-color-transparent-yellow6", "#fec40046"], + ["--t-color-transparent-yellow7", "#fdcb225c"], + ["--t-color-transparent-yellow8", "#fdca327b"], + ["--t-color-transparent-yellow9", "#ffe629"], + ["--t-color-transparent-yellow10", "#ffff57"], + ["--t-color-transparent-yellow11", "#fee949f5"], + ["--t-color-transparent-yellow12", "#fef6baf6"], + ["--t-color-transparent-gray1", "color(display-p3 1 1 1 / 0.031)"], + ["--t-color-transparent-gray2", "color(display-p3 1 1 1 / 0.059)"], + ["--t-color-transparent-gray3", "color(display-p3 1 1 1 / 0.047)"], + ["--t-color-transparent-gray4", "color(display-p3 1 1 1 / 0.071)"], + ["--t-color-transparent-gray5", "color(display-p3 1 1 1 / 0.102)"], + ["--t-color-transparent-gray6", "color(display-p3 1 1 1 / 0.114)"], + ["--t-color-transparent-gray7", "color(display-p3 1 1 1 / 0.141)"], + ["--t-color-transparent-gray8", "color(display-p3 1 1 1 / 0.22)"], + ["--t-color-transparent-gray9", "color(display-p3 1 1 1 / 0.427)"], + ["--t-color-transparent-gray10", "color(display-p3 1 1 1 / 0.478)"], + ["--t-color-transparent-gray11", "color(display-p3 1 1 1 / 0.565)"], + ["--t-color-transparent-gray12", "color(display-p3 1 1 1 / 0.91)"], + ["--t-color-transparent-mauve1", "#00000000"], + ["--t-color-transparent-mauve2", "#f5f4f609"], + ["--t-color-transparent-mauve3", "#ebeaf814"], + ["--t-color-transparent-mauve4", "#eee5f81d"], + ["--t-color-transparent-mauve5", "#efe6fe25"], + ["--t-color-transparent-mauve6", "#f1e6fd30"], + ["--t-color-transparent-mauve7", "#eee9ff40"], + ["--t-color-transparent-mauve8", "#eee7ff5d"], + ["--t-color-transparent-mauve9", "#eae6fd6e"], + ["--t-color-transparent-mauve10", "#ece9fd7c"], + ["--t-color-transparent-mauve11", "#f5f1ffb7"], + ["--t-color-transparent-mauve12", "#fdfdffef"], + ["--t-color-transparent-slate1", "#00000000"], + ["--t-color-transparent-slate2", "#d8f4f609"], + ["--t-color-transparent-slate3", "#ddeaf814"], + ["--t-color-transparent-slate4", "#d3edf81d"], + ["--t-color-transparent-slate5", "#d9edfe25"], + ["--t-color-transparent-slate6", "#d6ebfd30"], + ["--t-color-transparent-slate7", "#d9edff40"], + ["--t-color-transparent-slate8", "#d9edff5d"], + ["--t-color-transparent-slate9", "#dfebfd6d"], + ["--t-color-transparent-slate10", "#e5edfd7b"], + ["--t-color-transparent-slate11", "#f1f7feb5"], + ["--t-color-transparent-slate12", "#fcfdffef"], + ["--t-color-transparent-sage1", "#00000000"], + ["--t-color-transparent-sage2", "#f0f2f108"], + ["--t-color-transparent-sage3", "#f3f5f412"], + ["--t-color-transparent-sage4", "#f2fefd1a"], + ["--t-color-transparent-sage5", "#f1fbfa22"], + ["--t-color-transparent-sage6", "#edfbf42d"], + ["--t-color-transparent-sage7", "#edfcf73c"], + ["--t-color-transparent-sage8", "#ebfdf657"], + ["--t-color-transparent-sage9", "#dffdf266"], + ["--t-color-transparent-sage10", "#e5fdf674"], + ["--t-color-transparent-sage11", "#f4fefbb0"], + ["--t-color-transparent-sage12", "#fdfffeed"], + ["--t-color-transparent-olive1", "#00000000"], + ["--t-color-transparent-olive2", "#f1f2f008"], + ["--t-color-transparent-olive3", "#f4f5f312"], + ["--t-color-transparent-olive4", "#f3fef21a"], + ["--t-color-transparent-olive5", "#f2fbf122"], + ["--t-color-transparent-olive6", "#f4faed2c"], + ["--t-color-transparent-olive7", "#f2fced3b"], + ["--t-color-transparent-olive8", "#edfdeb57"], + ["--t-color-transparent-olive9", "#ebfde766"], + ["--t-color-transparent-olive10", "#f0fdec74"], + ["--t-color-transparent-olive11", "#f6fef4b0"], + ["--t-color-transparent-olive12", "#fdfffded"], + ["--t-color-transparent-sand1", "#00000000"], + ["--t-color-transparent-sand2", "#f4f4f309"], + ["--t-color-transparent-sand3", "#f6f6f513"], + ["--t-color-transparent-sand4", "#fefef31b"], + ["--t-color-transparent-sand5", "#fbfbeb23"], + ["--t-color-transparent-sand6", "#fffaed2d"], + ["--t-color-transparent-sand7", "#fffbed3c"], + ["--t-color-transparent-sand8", "#fff9eb57"], + ["--t-color-transparent-sand9", "#fffae965"], + ["--t-color-transparent-sand10", "#fffdee73"], + ["--t-color-transparent-sand11", "#fffcf4b0"], + ["--t-color-transparent-sand12", "#fffffded"], + ["--t-color-transparent-tomato1", "#f1121208"], + ["--t-color-transparent-tomato2", "#ff55330f"], + ["--t-color-transparent-tomato3", "#ff35232b"], + ["--t-color-transparent-tomato4", "#fd201142"], + ["--t-color-transparent-tomato5", "#fe332153"], + ["--t-color-transparent-tomato6", "#ff4f3864"], + ["--t-color-transparent-tomato7", "#fd644a7d"], + ["--t-color-transparent-tomato8", "#fe6d4ea7"], + ["--t-color-transparent-tomato9", "#fe5431e4"], + ["--t-color-transparent-tomato10", "#ff6847eb"], + ["--t-color-transparent-tomato11", "#ff977d"], + ["--t-color-transparent-tomato12", "#ffd6cefb"], + ["--t-color-transparent-ruby1", "#f4124a09"], + ["--t-color-transparent-ruby2", "#fe5a7f0e"], + ["--t-color-transparent-ruby3", "#ff235d2c"], + ["--t-color-transparent-ruby4", "#fd195e42"], + ["--t-color-transparent-ruby5", "#fe2d6b53"], + ["--t-color-transparent-ruby6", "#ff447665"], + ["--t-color-transparent-ruby7", "#ff577d80"], + ["--t-color-transparent-ruby8", "#ff5c7cae"], + ["--t-color-transparent-ruby9", "#fe4c70e4"], + ["--t-color-transparent-ruby10", "#ff617beb"], + ["--t-color-transparent-ruby11", "#ff949d"], + ["--t-color-transparent-ruby12", "#ffd3e2fe"], + ["--t-color-transparent-crimson1", "#f4126709"], + ["--t-color-transparent-crimson2", "#f22f7a11"], + ["--t-color-transparent-crimson3", "#fe2a8b2a"], + ["--t-color-transparent-crimson4", "#fd158741"], + ["--t-color-transparent-crimson5", "#fd278f51"], + ["--t-color-transparent-crimson6", "#fe459763"], + ["--t-color-transparent-crimson7", "#fd559b7f"], + ["--t-color-transparent-crimson8", "#fe5b9bab"], + ["--t-color-transparent-crimson9", "#fe418de8"], + ["--t-color-transparent-crimson10", "#ff5693ed"], + ["--t-color-transparent-crimson11", "#ff92ad"], + ["--t-color-transparent-crimson12", "#ffd5eafd"], + ["--t-color-transparent-plum1", "#f112f108"], + ["--t-color-transparent-plum2", "#f22ff211"], + ["--t-color-transparent-plum3", "#fd4cfd27"], + ["--t-color-transparent-plum4", "#f646ff3a"], + ["--t-color-transparent-plum5", "#f455ff48"], + ["--t-color-transparent-plum6", "#f66dff56"], + ["--t-color-transparent-plum7", "#f07cfd70"], + ["--t-color-transparent-plum8", "#ee84ff95"], + ["--t-color-transparent-plum9", "#e961feb6"], + ["--t-color-transparent-plum10", "#ed70ffc0"], + ["--t-color-transparent-plum11", "#f19cfef3"], + ["--t-color-transparent-plum12", "#feddfef4"], + ["--t-color-transparent-violet1", "#4422ff0f"], + ["--t-color-transparent-violet2", "#853ff916"], + ["--t-color-transparent-violet3", "#8354fe36"], + ["--t-color-transparent-violet4", "#7d51fd50"], + ["--t-color-transparent-violet5", "#845ffd5f"], + ["--t-color-transparent-violet6", "#8f6cfd6d"], + ["--t-color-transparent-violet7", "#9879ff83"], + ["--t-color-transparent-violet8", "#977dfea8"], + ["--t-color-transparent-violet9", "#8668ffcc"], + ["--t-color-transparent-violet10", "#9176fed7"], + ["--t-color-transparent-violet11", "#baa7ff"], + ["--t-color-transparent-violet12", "#e3defffe"], + ["--t-color-transparent-iris1", "#3636fe0e"], + ["--t-color-transparent-iris2", "#564bf916"], + ["--t-color-transparent-iris3", "#525bff3b"], + ["--t-color-transparent-iris4", "#4d58ff5a"], + ["--t-color-transparent-iris5", "#5b62fd6b"], + ["--t-color-transparent-iris6", "#6d6ffd7a"], + ["--t-color-transparent-iris7", "#7777fe8e"], + ["--t-color-transparent-iris8", "#7b7afeac"], + ["--t-color-transparent-iris9", "#6a6afed4"], + ["--t-color-transparent-iris10", "#7d79ffdc"], + ["--t-color-transparent-iris11", "#b1a9ff"], + ["--t-color-transparent-iris12", "#e1e0fffe"], + ["--t-color-transparent-cyan1", "#0091f70a"], + ["--t-color-transparent-cyan2", "#02a7f211"], + ["--t-color-transparent-cyan3", "#00befd28"], + ["--t-color-transparent-cyan4", "#00baff3b"], + ["--t-color-transparent-cyan5", "#00befd4d"], + ["--t-color-transparent-cyan6", "#00c7fd5e"], + ["--t-color-transparent-cyan7", "#14cdff75"], + ["--t-color-transparent-cyan8", "#11cfff95"], + ["--t-color-transparent-cyan9", "#00cfffc3"], + ["--t-color-transparent-cyan10", "#28d6ffcd"], + ["--t-color-transparent-cyan11", "#52e1fee5"], + ["--t-color-transparent-cyan12", "#bbf3fef7"], + ["--t-color-transparent-jade1", "#00de4505"], + ["--t-color-transparent-jade2", "#27fba60c"], + ["--t-color-transparent-jade3", "#02f99920"], + ["--t-color-transparent-jade4", "#00ffaa2d"], + ["--t-color-transparent-jade5", "#11ffb63b"], + ["--t-color-transparent-jade6", "#34ffc24b"], + ["--t-color-transparent-jade7", "#45fdc75e"], + ["--t-color-transparent-jade8", "#48ffcf75"], + ["--t-color-transparent-jade9", "#38feca9d"], + ["--t-color-transparent-jade10", "#31fec7ab"], + ["--t-color-transparent-jade11", "#21fec0d6"], + ["--t-color-transparent-jade12", "#b8ffe1ef"], + ["--t-color-transparent-grass1", "#00de1205"], + ["--t-color-transparent-grass2", "#5ef7780a"], + ["--t-color-transparent-grass3", "#70fe8c1b"], + ["--t-color-transparent-grass4", "#57ff802c"], + ["--t-color-transparent-grass5", "#68ff8b3b"], + ["--t-color-transparent-grass6", "#71ff8f4b"], + ["--t-color-transparent-grass7", "#77fd925d"], + ["--t-color-transparent-grass8", "#77fd9070"], + ["--t-color-transparent-grass9", "#65ff82a1"], + ["--t-color-transparent-grass10", "#72ff8dae"], + ["--t-color-transparent-grass11", "#89ff9fcd"], + ["--t-color-transparent-grass12", "#ceffceef"], + ["--t-color-transparent-mint1", "#00dede05"], + ["--t-color-transparent-mint2", "#00f9f90b"], + ["--t-color-transparent-mint3", "#00fff61d"], + ["--t-color-transparent-mint4", "#00fff42c"], + ["--t-color-transparent-mint5", "#00fff23a"], + ["--t-color-transparent-mint6", "#0effeb4a"], + ["--t-color-transparent-mint7", "#34fde55e"], + ["--t-color-transparent-mint8", "#41ffdf76"], + ["--t-color-transparent-mint9", "#92ffe7e9"], + ["--t-color-transparent-mint10", "#aefeedf5"], + ["--t-color-transparent-mint11", "#67ffded2"], + ["--t-color-transparent-mint12", "#cbfee9f5"], + ["--t-color-transparent-lime1", "#11bb0003"], + ["--t-color-transparent-lime2", "#78f7000a"], + ["--t-color-transparent-lime3", "#9bfd4c1a"], + ["--t-color-transparent-lime4", "#a7fe5c29"], + ["--t-color-transparent-lime5", "#affe6537"], + ["--t-color-transparent-lime6", "#b2fe6d46"], + ["--t-color-transparent-lime7", "#b6ff6f57"], + ["--t-color-transparent-lime8", "#b6fd6d6c"], + ["--t-color-transparent-lime9", "#caff69ed"], + ["--t-color-transparent-lime10", "#d4ff70"], + ["--t-color-transparent-lime11", "#d1fe77e4"], + ["--t-color-transparent-lime12", "#e9febff7"], + ["--t-color-transparent-bronze1", "#d1110004"], + ["--t-color-transparent-bronze2", "#fbbc910c"], + ["--t-color-transparent-bronze3", "#faceb817"], + ["--t-color-transparent-bronze4", "#facdb622"], + ["--t-color-transparent-bronze5", "#ffd2c12d"], + ["--t-color-transparent-bronze6", "#ffd1c03c"], + ["--t-color-transparent-bronze7", "#fdd0c04f"], + ["--t-color-transparent-bronze8", "#ffd6c565"], + ["--t-color-transparent-bronze9", "#fec7b09b"], + ["--t-color-transparent-bronze10", "#fecab5a9"], + ["--t-color-transparent-bronze11", "#ffd7c6d1"], + ["--t-color-transparent-bronze12", "#fff1e9ec"], + ["--t-color-transparent-gold1", "#91911102"], + ["--t-color-transparent-gold2", "#f9e29d0b"], + ["--t-color-transparent-gold3", "#f8ecbb15"], + ["--t-color-transparent-gold4", "#ffeec41e"], + ["--t-color-transparent-gold5", "#feecc22a"], + ["--t-color-transparent-gold6", "#feebcb37"], + ["--t-color-transparent-gold7", "#ffedcd48"], + ["--t-color-transparent-gold8", "#fdeaca5f"], + ["--t-color-transparent-gold9", "#ffdba690"], + ["--t-color-transparent-gold10", "#fedfb09d"], + ["--t-color-transparent-gold11", "#fee7c6c8"], + ["--t-color-transparent-gold12", "#fef7ede7"], + ["--t-color-transparent-brown1", "#91110002"], + ["--t-color-transparent-brown2", "#fba67c0c"], + ["--t-color-transparent-brown3", "#fcb58c19"], + ["--t-color-transparent-brown4", "#fbbb8a24"], + ["--t-color-transparent-brown5", "#fcb88931"], + ["--t-color-transparent-brown6", "#fdba8741"], + ["--t-color-transparent-brown7", "#ffbb8856"], + ["--t-color-transparent-brown8", "#ffbe8773"], + ["--t-color-transparent-brown9", "#feb87da8"], + ["--t-color-transparent-brown10", "#ffc18cb3"], + ["--t-color-transparent-brown11", "#fed1aad9"], + ["--t-color-transparent-brown12", "#feecd4f2"], + ["--t-color-transparent-amber1", "#e63c0006"], + ["--t-color-transparent-amber2", "#fd9b000d"], + ["--t-color-transparent-amber3", "#fa820022"], + ["--t-color-transparent-amber4", "#fc820032"], + ["--t-color-transparent-amber5", "#fd8b0041"], + ["--t-color-transparent-amber6", "#fd9b0051"], + ["--t-color-transparent-amber7", "#ffab2567"], + ["--t-color-transparent-amber8", "#ffae3587"], + ["--t-color-transparent-amber9", "#ffc53d"], + ["--t-color-transparent-amber10", "#ffd60a"], + ["--t-color-transparent-amber11", "#ffca16"], + ["--t-color-transparent-amber12", "#ffe7b3"], +]; diff --git a/packages/twenty-ui/src/theme-constants/generated/themeLightCssVariableEntries.ts b/packages/twenty-ui/src/theme-constants/generated/themeLightCssVariableEntries.ts new file mode 100644 index 0000000000..aa39ac572e --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/generated/themeLightCssVariableEntries.ts @@ -0,0 +1,1000 @@ +// Auto-generated by scripts/generateThemeConstants.ts — do not edit manually. +// Regenerate: npx tsx packages/twenty-ui/scripts/generateThemeConstants.ts + +// CSS custom properties don't work in media queries, so MOBILE_VIEWPORT +// must be a static number rather than a var(--...) reference. +export const MOBILE_VIEWPORT = 768; + +export const THEME_LIGHT_CSS_VARIABLE_ENTRIES: [string, string][] = [ + ["--t-icon-size-sm", "14"], + ["--t-icon-size-md", "16"], + ["--t-icon-size-lg", "20"], + ["--t-icon-size-xl", "24"], + ["--t-icon-stroke-sm", "1.6"], + ["--t-icon-stroke-md", "2"], + ["--t-icon-stroke-lg", "2.5"], + ["--t-modal-size-sm-width", "300px"], + ["--t-modal-size-md-width", "400px"], + ["--t-modal-size-lg-width", "53%"], + ["--t-modal-size-xl-width", "1200px"], + ["--t-modal-size-xl-height", "800px"], + ["--t-modal-size-fullscreen-width", "100dvw"], + ["--t-modal-size-fullscreen-height", "100dvh"], + ["--t-text-line-height-lg", "1.5"], + ["--t-text-line-height-md", "1.1"], + ["--t-text-icon-size-medium", "16"], + ["--t-text-icon-size-small", "14"], + ["--t-text-icon-strike-light", "1.6"], + ["--t-text-icon-strike-medium", "2"], + ["--t-text-icon-strike-bold", "2.5"], + ["--t-animation-duration-instant", "0.075"], + ["--t-animation-duration-fast", "0.15"], + ["--t-animation-duration-normal", "0.3"], + ["--t-animation-duration-slow", "1.5"], + ["--t-spacing-multiplicator", "4"], + ["--t-spacing-0", "0px"], + ["--t-spacing-1", "4px"], + ["--t-spacing-2", "8px"], + ["--t-spacing-3", "12px"], + ["--t-spacing-4", "16px"], + ["--t-spacing-5", "20px"], + ["--t-spacing-6", "24px"], + ["--t-spacing-7", "28px"], + ["--t-spacing-8", "32px"], + ["--t-spacing-9", "36px"], + ["--t-spacing-10", "40px"], + ["--t-spacing-11", "44px"], + ["--t-spacing-12", "48px"], + ["--t-spacing-13", "52px"], + ["--t-spacing-14", "56px"], + ["--t-spacing-15", "60px"], + ["--t-spacing-16", "64px"], + ["--t-spacing-17", "68px"], + ["--t-spacing-18", "72px"], + ["--t-spacing-19", "76px"], + ["--t-spacing-20", "80px"], + ["--t-spacing-21", "84px"], + ["--t-spacing-22", "88px"], + ["--t-spacing-23", "92px"], + ["--t-spacing-24", "96px"], + ["--t-spacing-25", "100px"], + ["--t-spacing-26", "104px"], + ["--t-spacing-27", "108px"], + ["--t-spacing-28", "112px"], + ["--t-spacing-29", "116px"], + ["--t-spacing-30", "120px"], + ["--t-spacing-31", "124px"], + ["--t-spacing-32", "128px"], + ["--t-spacing-0_5", "2px"], + ["--t-spacing-1_5", "6px"], + ["--t-between-siblings-gap", "2px"], + ["--t-table-horizontal-cell-margin", "8px"], + ["--t-table-checkbox-column-width", "32px"], + ["--t-table-horizontal-cell-padding", "8px"], + ["--t-right-drawer-width", "500px"], + ["--t-clickable-element-background-transition", "background 0.1s ease"], + ["--t-last-layer-z-index", "2147483647"], + ["--t-buttons-secondary-text-color", "color(display-p3 0.63 0.69 1)"], + ["--t-accent-primary", "color(display-p3 0.831 0.87 1)"], + ["--t-accent-secondary", "color(display-p3 0.831 0.87 1)"], + ["--t-accent-tertiary", "color(display-p3 0.933 0.948 0.992)"], + ["--t-accent-quaternary", "color(display-p3 0.971 0.977 0.998)"], + ["--t-accent-accent3570", "color(display-p3 0.569 0.639 0.916)"], + ["--t-accent-accent4060", "color(display-p3 0.569 0.639 0.916)"], + ["--t-accent-accent1", "color(display-p3 0.992 0.992 0.996)"], + ["--t-accent-accent2", "color(display-p3 0.971 0.977 0.998)"], + ["--t-accent-accent3", "color(display-p3 0.933 0.948 0.992)"], + ["--t-accent-accent4", "color(display-p3 0.885 0.914 1)"], + ["--t-accent-accent5", "color(display-p3 0.831 0.87 1)"], + ["--t-accent-accent6", "color(display-p3 0.767 0.814 0.995)"], + ["--t-accent-accent7", "color(display-p3 0.685 0.74 0.957)"], + ["--t-accent-accent8", "color(display-p3 0.569 0.639 0.916)"], + ["--t-accent-accent9", "color(display-p3 0.276 0.384 0.837)"], + ["--t-accent-accent10", "color(display-p3 0.234 0.343 0.801)"], + ["--t-accent-accent11", "color(display-p3 0.256 0.354 0.755)"], + ["--t-accent-accent12", "color(display-p3 0.133 0.175 0.348)"], + ["--t-background-noisy", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAABQCAIAAABTfJr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF0WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4xLWMwMDAgNzkuOWNjYzRkZTkzLCAyMDIyLzAzLzE0LTE0OjA3OjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjMuMyAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjMtMDctMThUMTI6MjY6MzQrMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA3LTE4VDEyOjI4OjMyKzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA3LTE4VDEyOjI4OjMyKzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphZWU5ZDg2OC04OWRmLTRiMDAtYWQ5ZS0zZDQyMTJjZjNhM2UiIHhtcE1NOkRvY3VtZW50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);"], + ["--t-background-primary", "color(display-p3 1 1 1)"], + ["--t-background-secondary", "color(display-p3 0.988 0.988 0.988)"], + ["--t-background-tertiary", "color(display-p3 0.945 0.945 0.945)"], + ["--t-background-quaternary", "color(display-p3 0.922 0.922 0.922)"], + ["--t-background-inverted-primary", "color(display-p3 0.2 0.2 0.2)"], + ["--t-background-inverted-secondary", "color(display-p3 0.4 0.4 0.4)"], + ["--t-background-danger", "color(display-p3 0.985 0.925 0.925)"], + ["--t-background-transparent-primary", "color(display-p3 1 1 1 / 0.5)"], + ["--t-background-transparent-secondary", "color(display-p3 1 1 1 / 0.4)"], + ["--t-background-transparent-strong", "color(display-p3 0 0 0 / 0.161)"], + ["--t-background-transparent-medium", "color(display-p3 0 0 0 / 0.078)"], + ["--t-background-transparent-light", "color(display-p3 0 0 0 / 0.039)"], + ["--t-background-transparent-lighter", "color(display-p3 0 0 0 / 0.02)"], + ["--t-background-transparent-danger", "#f3000d14"], + ["--t-background-transparent-blue", "#0047f112"], + ["--t-background-transparent-orange", "#ff9c0029"], + ["--t-background-transparent-success", "#00a43319"], + ["--t-background-overlay-primary", "color(display-p3 0 0 0 / 0.722)"], + ["--t-background-overlay-secondary", "color(display-p3 0 0 0 / 0.361)"], + ["--t-background-overlay-tertiary", "color(display-p3 0 0 0 / 0.071)"], + ["--t-background-radial-gradient", "radial-gradient(50% 62.62% at 50% 0%, color(display-p3 0.6 0.6 0.6) 0%, color(display-p3 0.514 0.514 0.514) 100%)"], + ["--t-background-radial-gradient-hover", "radial-gradient(76.32% 95.59% at 50% 0%, color(display-p3 0.514 0.514 0.514) 0%, color(display-p3 0.4 0.4 0.4) 100%)"], + ["--t-background-primary-inverted", "color(display-p3 0.2 0.2 0.2)"], + ["--t-background-primary-inverted-hover", "color(display-p3 0.4 0.4 0.4)"], + ["--t-blur-light", "blur(6px) saturate(200%) contrast(50%) brightness(130%)"], + ["--t-blur-medium", "blur(12px) saturate(200%) contrast(50%) brightness(130%)"], + ["--t-blur-strong", "blur(20px) saturate(200%) contrast(50%) brightness(130%)"], + ["--t-border-color-strong", "color(display-p3 0.839 0.839 0.839)"], + ["--t-border-color-medium", "color(display-p3 0.922 0.922 0.922)"], + ["--t-border-color-light", "color(display-p3 0.945 0.945 0.945)"], + ["--t-border-color-secondary-inverted", "color(display-p3 0.4 0.4 0.4)"], + ["--t-border-color-inverted", "color(display-p3 0.2 0.2 0.2)"], + ["--t-border-color-danger", "color(display-p3 0.984 0.812 0.811)"], + ["--t-border-color-blue", "color(display-p3 0.685 0.74 0.957)"], + ["--t-border-color-transparent-strong", "color(display-p3 0 0 0 / 0.071)"], + ["--t-border-radius-xs", "2px"], + ["--t-border-radius-sm", "4px"], + ["--t-border-radius-md", "8px"], + ["--t-border-radius-xl", "20px"], + ["--t-border-radius-xxl", "40px"], + ["--t-border-radius-pill", "999px"], + ["--t-border-radius-rounded", "100%"], + ["--t-box-shadow-color", "color(display-p3 0 0 0 / 0.039)"], + ["--t-box-shadow-light", "0px 2px 4px 0px color(display-p3 0 0 0 / 0.039), 0px 0px 4px 0px color(display-p3 0 0 0 / 0.078)"], + ["--t-box-shadow-strong", "2px 4px 16px 0px color(display-p3 0 0 0 / 0.161), 0px 2px 4px 0px color(display-p3 0 0 0 / 0.078)"], + ["--t-box-shadow-underline", "0px 1px 0px 0px color(display-p3 0 0 0 / 0.361)"], + ["--t-box-shadow-super-heavy", "0px 0px 8px 0px color(display-p3 0 0 0 / 0.161), 0px 8px 64px -16px color(display-p3 0 0 0 / 0.478), 0px 24px 56px -16px color(display-p3 0 0 0 / 0.078)"], + ["--t-font-color-primary", "color(display-p3 0.2 0.2 0.2)"], + ["--t-font-color-secondary", "color(display-p3 0.4 0.4 0.4)"], + ["--t-font-color-tertiary", "color(display-p3 0.6 0.6 0.6)"], + ["--t-font-color-light", "color(display-p3 0.702 0.702 0.702)"], + ["--t-font-color-extra-light", "color(display-p3 0.8 0.8 0.8)"], + ["--t-font-color-inverted", "color(display-p3 1 1 1)"], + ["--t-font-color-danger", "color(display-p3 0.83 0.329 0.324)"], + ["--t-font-size-xxs", "0.625rem"], + ["--t-font-size-xs", "0.85rem"], + ["--t-font-size-sm", "0.92rem"], + ["--t-font-size-md", "1rem"], + ["--t-font-size-lg", "1.23rem"], + ["--t-font-size-xl", "1.54rem"], + ["--t-font-size-xxl", "1.85rem"], + ["--t-font-weight-regular", "400"], + ["--t-font-weight-medium", "500"], + ["--t-font-weight-semi-bold", "600"], + ["--t-font-family", "Inter, sans-serif"], + ["--t-name", "light"], + ["--t-snack-bar-success-color", "color(display-p3 0.297 0.637 0.581)"], + ["--t-snack-bar-success-background-color", "#00a43319"], + ["--t-snack-bar-error-color", "color(display-p3 0.83 0.329 0.324)"], + ["--t-snack-bar-error-background-color", "#f3000d14"], + ["--t-snack-bar-warning-color", "color(display-p3 0.9 0.45 0.2)"], + ["--t-snack-bar-warning-background-color", "#ff9c0029"], + ["--t-snack-bar-info-color", "color(display-p3 0.276 0.384 0.837)"], + ["--t-snack-bar-info-background-color", "#0047f112"], + ["--t-snack-bar-default-color", "color(display-p3 0.2 0.2 0.2)"], + ["--t-snack-bar-default-background-color", "color(display-p3 0 0 0 / 0.039)"], + ["--t-tag-text-gray", "color(display-p3 0.4 0.4 0.4)"], + ["--t-tag-text-mauve", "color(display-p3 0.395 0.388 0.424)"], + ["--t-tag-text-slate", "color(display-p3 0.379 0.392 0.421)"], + ["--t-tag-text-sage", "color(display-p3 0.377 0.395 0.389)"], + ["--t-tag-text-olive", "color(display-p3 0.38 0.395 0.374)"], + ["--t-tag-text-sand", "color(display-p3 0.388 0.388 0.37)"], + ["--t-tag-text-tomato", "color(display-p3 0.755 0.259 0.152)"], + ["--t-tag-text-red", "color(display-p3 0.744 0.234 0.222)"], + ["--t-tag-text-ruby", "color(display-p3 0.728 0.211 0.311)"], + ["--t-tag-text-crimson", "color(display-p3 0.731 0.195 0.388)"], + ["--t-tag-text-pink", "color(display-p3 0.698 0.219 0.528)"], + ["--t-tag-text-plum", "color(display-p3 0.543 0.263 0.619)"], + ["--t-tag-text-purple", "color(display-p3 0.473 0.281 0.687)"], + ["--t-tag-text-violet", "color(display-p3 0.383 0.317 0.702)"], + ["--t-tag-text-iris", "color(display-p3 0.337 0.326 0.748)"], + ["--t-tag-text-cyan", "color(display-p3 0.08 0.48 0.63)"], + ["--t-tag-text-turquoise", "color(display-p3 0.08 0.5 0.43)"], + ["--t-tag-text-sky", "color(display-p3 0.193 0.448 0.605)"], + ["--t-tag-text-blue", "color(display-p3 0.256 0.354 0.755)"], + ["--t-tag-text-jade", "color(display-p3 0.15 0.5 0.37)"], + ["--t-tag-text-green", "color(display-p3 0.19 0.5 0.32)"], + ["--t-tag-text-grass", "color(display-p3 0.263 0.488 0.261)"], + ["--t-tag-text-mint", "color(display-p3 0.203 0.463 0.397)"], + ["--t-tag-text-lime", "color(display-p3 0.386 0.482 0.227)"], + ["--t-tag-text-bronze", "color(display-p3 0.471 0.373 0.336)"], + ["--t-tag-text-gold", "color(display-p3 0.433 0.386 0.305)"], + ["--t-tag-text-brown", "color(display-p3 0.485 0.374 0.288)"], + ["--t-tag-text-orange", "color(display-p3 0.76 0.34 0)"], + ["--t-tag-text-amber", "color(display-p3 0.64 0.4 0)"], + ["--t-tag-text-yellow", "color(display-p3 0.6 0.44 0)"], + ["--t-tag-background-gray", "color(display-p3 0.976 0.976 0.976)"], + ["--t-tag-background-mauve", "color(display-p3 0.946 0.938 0.952)"], + ["--t-tag-background-slate", "color(display-p3 0.94 0.941 0.953)"], + ["--t-tag-background-sage", "color(display-p3 0.935 0.944 0.94)"], + ["--t-tag-background-olive", "color(display-p3 0.939 0.945 0.937)"], + ["--t-tag-background-sand", "color(display-p3 0.943 0.942 0.936)"], + ["--t-tag-background-tomato", "color(display-p3 0.985 0.924 0.909)"], + ["--t-tag-background-red", "color(display-p3 0.985 0.925 0.925)"], + ["--t-tag-background-ruby", "color(display-p3 0.983 0.92 0.928)"], + ["--t-tag-background-crimson", "color(display-p3 0.987 0.917 0.941)"], + ["--t-tag-background-pink", "color(display-p3 0.981 0.917 0.96)"], + ["--t-tag-background-plum", "color(display-p3 0.973 0.923 0.98)"], + ["--t-tag-background-purple", "color(display-p3 0.963 0.931 0.989)"], + ["--t-tag-background-violet", "color(display-p3 0.953 0.943 0.993)"], + ["--t-tag-background-iris", "color(display-p3 0.943 0.945 0.992)"], + ["--t-tag-background-cyan", "color(display-p3 0.888 0.965 0.975)"], + ["--t-tag-background-turquoise", "color(display-p3 0.895 0.971 0.952)"], + ["--t-tag-background-sky", "color(display-p3 0.899 0.963 0.989)"], + ["--t-tag-background-blue", "color(display-p3 0.933 0.948 0.992)"], + ["--t-tag-background-jade", "color(display-p3 0.912 0.965 0.932)"], + ["--t-tag-background-green", "color(display-p3 0.913 0.964 0.925)"], + ["--t-tag-background-grass", "color(display-p3 0.923 0.965 0.917)"], + ["--t-tag-background-mint", "color(display-p3 0.888 0.972 0.95)"], + ["--t-tag-background-lime", "color(display-p3 0.939 0.965 0.851)"], + ["--t-tag-background-bronze", "color(display-p3 0.958 0.932 0.919)"], + ["--t-tag-background-gold", "color(display-p3 0.947 0.94 0.909)"], + ["--t-tag-background-brown", "color(display-p3 0.959 0.936 0.909)"], + ["--t-tag-background-orange", "color(display-p3 0.989 0.938 0.85)"], + ["--t-tag-background-amber", "color(display-p3 0.994 0.969 0.782)"], + ["--t-tag-background-yellow", "color(display-p3 0.997 0.982 0.749)"], + ["--t-code-text-gray", "color(display-p3 0.514 0.514 0.514)"], + ["--t-code-text-sky", "color(display-p3 0.555 0.845 0.959)"], + ["--t-code-text-pink", "color(display-p3 0.748 0.27 0.581)"], + ["--t-code-text-orange", "color(display-p3 0.877 0.597 0.379)"], + ["--t-code-text-green", "color(display-p3 0.585 0.707 0.378)"], + ["--t-code-font-family", "DM Mono"], + ["--t--illustration-icon-color-blue", "color(display-p3 0.569 0.639 0.916)"], + ["--t--illustration-icon-color-gray", "color(display-p3 0.6 0.6 0.6)"], + ["--t--illustration-icon-fill-blue", "color(display-p3 0.831 0.87 1)"], + ["--t--illustration-icon-fill-gray", "color(display-p3 0.922 0.922 0.922)"], + ["--t-gray-scale-gray1", "color(display-p3 1 1 1)"], + ["--t-gray-scale-gray2", "color(display-p3 0.988 0.988 0.988)"], + ["--t-gray-scale-gray3", "color(display-p3 0.976 0.976 0.976)"], + ["--t-gray-scale-gray4", "color(display-p3 0.945 0.945 0.945)"], + ["--t-gray-scale-gray5", "color(display-p3 0.922 0.922 0.922)"], + ["--t-gray-scale-gray6", "color(display-p3 0.839 0.839 0.839)"], + ["--t-gray-scale-gray7", "color(display-p3 0.8 0.8 0.8)"], + ["--t-gray-scale-gray8", "color(display-p3 0.702 0.702 0.702)"], + ["--t-gray-scale-gray9", "color(display-p3 0.6 0.6 0.6)"], + ["--t-gray-scale-gray10", "color(display-p3 0.514 0.514 0.514)"], + ["--t-gray-scale-gray11", "color(display-p3 0.4 0.4 0.4)"], + ["--t-gray-scale-gray12", "color(display-p3 0.2 0.2 0.2)"], + ["--t-color-red", "color(display-p3 0.83 0.329 0.324)"], + ["--t-color-ruby", "color(display-p3 0.83 0.323 0.408)"], + ["--t-color-crimson", "color(display-p3 0.843 0.298 0.507)"], + ["--t-color-tomato", "color(display-p3 0.831 0.345 0.231)"], + ["--t-color-orange", "color(display-p3 0.9 0.45 0.2)"], + ["--t-color-amber", "color(display-p3 1 0.77 0.26)"], + ["--t-color-yellow", "color(display-p3 1 0.92 0.22)"], + ["--t-color-lime", "color(display-p3 0.78 0.928 0.466)"], + ["--t-color-grass", "color(display-p3 0.38 0.647 0.378)"], + ["--t-color-green", "color(display-p3 0.332 0.634 0.442)"], + ["--t-color-jade", "color(display-p3 0.319 0.63 0.521)"], + ["--t-color-mint", "color(display-p3 0.62 0.908 0.834)"], + ["--t-color-turquoise", "color(display-p3 0.297 0.637 0.581)"], + ["--t-color-cyan", "color(display-p3 0.282 0.627 0.765)"], + ["--t-color-sky", "color(display-p3 0.585 0.877 0.983)"], + ["--t-color-blue", "color(display-p3 0.276 0.384 0.837)"], + ["--t-color-iris", "color(display-p3 0.357 0.357 0.81)"], + ["--t-color-violet", "color(display-p3 0.417 0.341 0.784)"], + ["--t-color-purple", "color(display-p3 0.523 0.318 0.751)"], + ["--t-color-plum", "color(display-p3 0.624 0.313 0.708)"], + ["--t-color-pink", "color(display-p3 0.775 0.297 0.61)"], + ["--t-color-bronze", "color(display-p3 0.611 0.507 0.455)"], + ["--t-color-gold", "color(display-p3 0.579 0.517 0.41)"], + ["--t-color-brown", "color(display-p3 0.651 0.505 0.368)"], + ["--t-color-gray", "color(display-p3 0.6 0.6 0.6)"], + ["--t-color-yellow1", "color(display-p3 0.992 0.992 0.978)"], + ["--t-color-yellow2", "color(display-p3 0.995 0.99 0.922)"], + ["--t-color-yellow3", "color(display-p3 0.997 0.982 0.749)"], + ["--t-color-yellow4", "color(display-p3 0.992 0.953 0.627)"], + ["--t-color-yellow5", "color(display-p3 0.984 0.91 0.51)"], + ["--t-color-yellow6", "color(display-p3 0.934 0.847 0.474)"], + ["--t-color-yellow7", "color(display-p3 0.876 0.785 0.46)"], + ["--t-color-yellow8", "color(display-p3 0.811 0.689 0.313)"], + ["--t-color-yellow9", "color(display-p3 1 0.92 0.22)"], + ["--t-color-yellow10", "color(display-p3 0.977 0.868 0.291)"], + ["--t-color-yellow11", "color(display-p3 0.6 0.44 0)"], + ["--t-color-yellow12", "color(display-p3 0.271 0.233 0.137)"], + ["--t-color-green1", "color(display-p3 0.986 0.996 0.989)"], + ["--t-color-green2", "color(display-p3 0.963 0.983 0.967)"], + ["--t-color-green3", "color(display-p3 0.913 0.964 0.925)"], + ["--t-color-green4", "color(display-p3 0.859 0.94 0.879)"], + ["--t-color-green5", "color(display-p3 0.796 0.907 0.826)"], + ["--t-color-green6", "color(display-p3 0.718 0.863 0.761)"], + ["--t-color-green7", "color(display-p3 0.61 0.801 0.675)"], + ["--t-color-green8", "color(display-p3 0.451 0.715 0.559)"], + ["--t-color-green9", "color(display-p3 0.332 0.634 0.442)"], + ["--t-color-green10", "color(display-p3 0.308 0.595 0.417)"], + ["--t-color-green11", "color(display-p3 0.19 0.5 0.32)"], + ["--t-color-green12", "color(display-p3 0.132 0.228 0.18)"], + ["--t-color-turquoise1", "color(display-p3 0.983 0.996 0.992)"], + ["--t-color-turquoise2", "color(display-p3 0.958 0.983 0.976)"], + ["--t-color-turquoise3", "color(display-p3 0.895 0.971 0.952)"], + ["--t-color-turquoise4", "color(display-p3 0.831 0.949 0.92)"], + ["--t-color-turquoise5", "color(display-p3 0.761 0.914 0.878)"], + ["--t-color-turquoise6", "color(display-p3 0.682 0.864 0.825)"], + ["--t-color-turquoise7", "color(display-p3 0.581 0.798 0.756)"], + ["--t-color-turquoise8", "color(display-p3 0.433 0.716 0.671)"], + ["--t-color-turquoise9", "color(display-p3 0.297 0.637 0.581)"], + ["--t-color-turquoise10", "color(display-p3 0.275 0.599 0.542)"], + ["--t-color-turquoise11", "color(display-p3 0.08 0.5 0.43)"], + ["--t-color-turquoise12", "color(display-p3 0.11 0.235 0.219)"], + ["--t-color-sky1", "color(display-p3 0.98 0.995 0.999)"], + ["--t-color-sky2", "color(display-p3 0.953 0.98 0.99)"], + ["--t-color-sky3", "color(display-p3 0.899 0.963 0.989)"], + ["--t-color-sky4", "color(display-p3 0.842 0.937 0.977)"], + ["--t-color-sky5", "color(display-p3 0.777 0.9 0.954)"], + ["--t-color-sky6", "color(display-p3 0.701 0.851 0.921)"], + ["--t-color-sky7", "color(display-p3 0.604 0.785 0.879)"], + ["--t-color-sky8", "color(display-p3 0.457 0.696 0.829)"], + ["--t-color-sky9", "color(display-p3 0.585 0.877 0.983)"], + ["--t-color-sky10", "color(display-p3 0.555 0.845 0.959)"], + ["--t-color-sky11", "color(display-p3 0.193 0.448 0.605)"], + ["--t-color-sky12", "color(display-p3 0.145 0.241 0.329)"], + ["--t-color-blue1", "color(display-p3 0.992 0.992 0.996)"], + ["--t-color-blue2", "color(display-p3 0.971 0.977 0.998)"], + ["--t-color-blue3", "color(display-p3 0.933 0.948 0.992)"], + ["--t-color-blue4", "color(display-p3 0.885 0.914 1)"], + ["--t-color-blue5", "color(display-p3 0.831 0.87 1)"], + ["--t-color-blue6", "color(display-p3 0.767 0.814 0.995)"], + ["--t-color-blue7", "color(display-p3 0.685 0.74 0.957)"], + ["--t-color-blue8", "color(display-p3 0.569 0.639 0.916)"], + ["--t-color-blue9", "color(display-p3 0.276 0.384 0.837)"], + ["--t-color-blue10", "color(display-p3 0.234 0.343 0.801)"], + ["--t-color-blue11", "color(display-p3 0.256 0.354 0.755)"], + ["--t-color-blue12", "color(display-p3 0.133 0.175 0.348)"], + ["--t-color-purple1", "color(display-p3 0.995 0.988 0.996)"], + ["--t-color-purple2", "color(display-p3 0.983 0.971 0.993)"], + ["--t-color-purple3", "color(display-p3 0.963 0.931 0.989)"], + ["--t-color-purple4", "color(display-p3 0.937 0.888 0.981)"], + ["--t-color-purple5", "color(display-p3 0.904 0.837 0.966)"], + ["--t-color-purple6", "color(display-p3 0.86 0.774 0.942)"], + ["--t-color-purple7", "color(display-p3 0.799 0.69 0.91)"], + ["--t-color-purple8", "color(display-p3 0.719 0.583 0.874)"], + ["--t-color-purple9", "color(display-p3 0.523 0.318 0.751)"], + ["--t-color-purple10", "color(display-p3 0.483 0.289 0.7)"], + ["--t-color-purple11", "color(display-p3 0.473 0.281 0.687)"], + ["--t-color-purple12", "color(display-p3 0.234 0.132 0.363)"], + ["--t-color-pink1", "color(display-p3 0.998 0.989 0.996)"], + ["--t-color-pink2", "color(display-p3 0.992 0.97 0.985)"], + ["--t-color-pink3", "color(display-p3 0.981 0.917 0.96)"], + ["--t-color-pink4", "color(display-p3 0.963 0.867 0.932)"], + ["--t-color-pink5", "color(display-p3 0.939 0.815 0.899)"], + ["--t-color-pink6", "color(display-p3 0.907 0.756 0.859)"], + ["--t-color-pink7", "color(display-p3 0.869 0.683 0.81)"], + ["--t-color-pink8", "color(display-p3 0.825 0.59 0.751)"], + ["--t-color-pink9", "color(display-p3 0.775 0.297 0.61)"], + ["--t-color-pink10", "color(display-p3 0.748 0.27 0.581)"], + ["--t-color-pink11", "color(display-p3 0.698 0.219 0.528)"], + ["--t-color-pink12", "color(display-p3 0.363 0.101 0.279)"], + ["--t-color-red1", "color(display-p3 0.998 0.989 0.988)"], + ["--t-color-red2", "color(display-p3 0.995 0.971 0.971)"], + ["--t-color-red3", "color(display-p3 0.985 0.925 0.925)"], + ["--t-color-red4", "color(display-p3 0.999 0.866 0.866)"], + ["--t-color-red5", "color(display-p3 0.984 0.812 0.811)"], + ["--t-color-red6", "color(display-p3 0.955 0.751 0.749)"], + ["--t-color-red7", "color(display-p3 0.915 0.675 0.672)"], + ["--t-color-red8", "color(display-p3 0.872 0.575 0.572)"], + ["--t-color-red9", "color(display-p3 0.83 0.329 0.324)"], + ["--t-color-red10", "color(display-p3 0.798 0.294 0.285)"], + ["--t-color-red11", "color(display-p3 0.744 0.234 0.222)"], + ["--t-color-red12", "color(display-p3 0.36 0.115 0.143)"], + ["--t-color-orange1", "color(display-p3 0.995 0.988 0.985)"], + ["--t-color-orange2", "color(display-p3 0.994 0.968 0.934)"], + ["--t-color-orange3", "color(display-p3 0.989 0.938 0.85)"], + ["--t-color-orange4", "color(display-p3 1 0.874 0.687)"], + ["--t-color-orange5", "color(display-p3 1 0.821 0.583)"], + ["--t-color-orange6", "color(display-p3 0.975 0.767 0.545)"], + ["--t-color-orange7", "color(display-p3 0.919 0.693 0.486)"], + ["--t-color-orange8", "color(display-p3 0.877 0.597 0.379)"], + ["--t-color-orange9", "color(display-p3 0.9 0.45 0.2)"], + ["--t-color-orange10", "color(display-p3 0.87 0.409 0.164)"], + ["--t-color-orange11", "color(display-p3 0.76 0.34 0)"], + ["--t-color-orange12", "color(display-p3 0.323 0.185 0.127)"], + ["--t-color-gray1", "color(display-p3 1 1 1)"], + ["--t-color-gray2", "color(display-p3 0.988 0.988 0.988)"], + ["--t-color-gray3", "color(display-p3 0.976 0.976 0.976)"], + ["--t-color-gray4", "color(display-p3 0.945 0.945 0.945)"], + ["--t-color-gray5", "color(display-p3 0.922 0.922 0.922)"], + ["--t-color-gray6", "color(display-p3 0.839 0.839 0.839)"], + ["--t-color-gray7", "color(display-p3 0.8 0.8 0.8)"], + ["--t-color-gray8", "color(display-p3 0.702 0.702 0.702)"], + ["--t-color-gray9", "color(display-p3 0.6 0.6 0.6)"], + ["--t-color-gray10", "color(display-p3 0.514 0.514 0.514)"], + ["--t-color-gray11", "color(display-p3 0.4 0.4 0.4)"], + ["--t-color-gray12", "color(display-p3 0.2 0.2 0.2)"], + ["--t-color-mauve1", "color(display-p3 0.991 0.988 0.992)"], + ["--t-color-mauve2", "color(display-p3 0.98 0.976 0.984)"], + ["--t-color-mauve3", "color(display-p3 0.946 0.938 0.952)"], + ["--t-color-mauve4", "color(display-p3 0.915 0.906 0.925)"], + ["--t-color-mauve5", "color(display-p3 0.886 0.876 0.901)"], + ["--t-color-mauve6", "color(display-p3 0.856 0.846 0.875)"], + ["--t-color-mauve7", "color(display-p3 0.814 0.804 0.84)"], + ["--t-color-mauve8", "color(display-p3 0.735 0.728 0.777)"], + ["--t-color-mauve9", "color(display-p3 0.555 0.549 0.596)"], + ["--t-color-mauve10", "color(display-p3 0.514 0.508 0.552)"], + ["--t-color-mauve11", "color(display-p3 0.395 0.388 0.424)"], + ["--t-color-mauve12", "color(display-p3 0.128 0.122 0.147)"], + ["--t-color-slate1", "color(display-p3 0.988 0.988 0.992)"], + ["--t-color-slate2", "color(display-p3 0.976 0.976 0.984)"], + ["--t-color-slate3", "color(display-p3 0.94 0.941 0.953)"], + ["--t-color-slate4", "color(display-p3 0.908 0.909 0.925)"], + ["--t-color-slate5", "color(display-p3 0.88 0.881 0.901)"], + ["--t-color-slate6", "color(display-p3 0.85 0.852 0.876)"], + ["--t-color-slate7", "color(display-p3 0.805 0.808 0.838)"], + ["--t-color-slate8", "color(display-p3 0.727 0.733 0.773)"], + ["--t-color-slate9", "color(display-p3 0.547 0.553 0.592)"], + ["--t-color-slate10", "color(display-p3 0.503 0.512 0.549)"], + ["--t-color-slate11", "color(display-p3 0.379 0.392 0.421)"], + ["--t-color-slate12", "color(display-p3 0.113 0.125 0.14)"], + ["--t-color-sage1", "color(display-p3 0.986 0.992 0.988)"], + ["--t-color-sage2", "color(display-p3 0.97 0.977 0.974)"], + ["--t-color-sage3", "color(display-p3 0.935 0.944 0.94)"], + ["--t-color-sage4", "color(display-p3 0.904 0.913 0.909)"], + ["--t-color-sage5", "color(display-p3 0.875 0.885 0.88)"], + ["--t-color-sage6", "color(display-p3 0.844 0.854 0.849)"], + ["--t-color-sage7", "color(display-p3 0.8 0.811 0.806)"], + ["--t-color-sage8", "color(display-p3 0.725 0.738 0.732)"], + ["--t-color-sage9", "color(display-p3 0.531 0.556 0.546)"], + ["--t-color-sage10", "color(display-p3 0.492 0.515 0.506)"], + ["--t-color-sage11", "color(display-p3 0.377 0.395 0.389)"], + ["--t-color-sage12", "color(display-p3 0.107 0.129 0.118)"], + ["--t-color-olive1", "color(display-p3 0.989 0.992 0.989)"], + ["--t-color-olive2", "color(display-p3 0.974 0.98 0.973)"], + ["--t-color-olive3", "color(display-p3 0.939 0.945 0.937)"], + ["--t-color-olive4", "color(display-p3 0.907 0.914 0.905)"], + ["--t-color-olive5", "color(display-p3 0.878 0.885 0.875)"], + ["--t-color-olive6", "color(display-p3 0.846 0.855 0.843)"], + ["--t-color-olive7", "color(display-p3 0.803 0.812 0.8)"], + ["--t-color-olive8", "color(display-p3 0.727 0.738 0.723)"], + ["--t-color-olive9", "color(display-p3 0.541 0.556 0.532)"], + ["--t-color-olive10", "color(display-p3 0.5 0.515 0.491)"], + ["--t-color-olive11", "color(display-p3 0.38 0.395 0.374)"], + ["--t-color-olive12", "color(display-p3 0.117 0.129 0.111)"], + ["--t-color-sand1", "color(display-p3 0.992 0.992 0.989)"], + ["--t-color-sand2", "color(display-p3 0.977 0.977 0.973)"], + ["--t-color-sand3", "color(display-p3 0.943 0.942 0.936)"], + ["--t-color-sand4", "color(display-p3 0.913 0.912 0.903)"], + ["--t-color-sand5", "color(display-p3 0.885 0.883 0.873)"], + ["--t-color-sand6", "color(display-p3 0.854 0.852 0.839)"], + ["--t-color-sand7", "color(display-p3 0.813 0.81 0.794)"], + ["--t-color-sand8", "color(display-p3 0.738 0.734 0.713)"], + ["--t-color-sand9", "color(display-p3 0.553 0.553 0.528)"], + ["--t-color-sand10", "color(display-p3 0.511 0.511 0.488)"], + ["--t-color-sand11", "color(display-p3 0.388 0.388 0.37)"], + ["--t-color-sand12", "color(display-p3 0.129 0.126 0.111)"], + ["--t-color-tomato1", "color(display-p3 0.998 0.989 0.988)"], + ["--t-color-tomato2", "color(display-p3 0.994 0.974 0.969)"], + ["--t-color-tomato3", "color(display-p3 0.985 0.924 0.909)"], + ["--t-color-tomato4", "color(display-p3 0.996 0.868 0.835)"], + ["--t-color-tomato5", "color(display-p3 0.98 0.812 0.77)"], + ["--t-color-tomato6", "color(display-p3 0.953 0.75 0.698)"], + ["--t-color-tomato7", "color(display-p3 0.917 0.673 0.611)"], + ["--t-color-tomato8", "color(display-p3 0.875 0.575 0.502)"], + ["--t-color-tomato9", "color(display-p3 0.831 0.345 0.231)"], + ["--t-color-tomato10", "color(display-p3 0.802 0.313 0.2)"], + ["--t-color-tomato11", "color(display-p3 0.755 0.259 0.152)"], + ["--t-color-tomato12", "color(display-p3 0.335 0.165 0.132)"], + ["--t-color-ruby1", "color(display-p3 0.998 0.989 0.992)"], + ["--t-color-ruby2", "color(display-p3 0.995 0.971 0.974)"], + ["--t-color-ruby3", "color(display-p3 0.983 0.92 0.928)"], + ["--t-color-ruby4", "color(display-p3 0.987 0.869 0.885)"], + ["--t-color-ruby5", "color(display-p3 0.968 0.817 0.839)"], + ["--t-color-ruby6", "color(display-p3 0.937 0.758 0.786)"], + ["--t-color-ruby7", "color(display-p3 0.897 0.685 0.721)"], + ["--t-color-ruby8", "color(display-p3 0.851 0.588 0.639)"], + ["--t-color-ruby9", "color(display-p3 0.83 0.323 0.408)"], + ["--t-color-ruby10", "color(display-p3 0.795 0.286 0.375)"], + ["--t-color-ruby11", "color(display-p3 0.728 0.211 0.311)"], + ["--t-color-ruby12", "color(display-p3 0.36 0.115 0.171)"], + ["--t-color-crimson1", "color(display-p3 0.998 0.989 0.992)"], + ["--t-color-crimson2", "color(display-p3 0.991 0.969 0.976)"], + ["--t-color-crimson3", "color(display-p3 0.987 0.917 0.941)"], + ["--t-color-crimson4", "color(display-p3 0.975 0.866 0.904)"], + ["--t-color-crimson5", "color(display-p3 0.953 0.813 0.864)"], + ["--t-color-crimson6", "color(display-p3 0.921 0.755 0.817)"], + ["--t-color-crimson7", "color(display-p3 0.88 0.683 0.761)"], + ["--t-color-crimson8", "color(display-p3 0.834 0.592 0.694)"], + ["--t-color-crimson9", "color(display-p3 0.843 0.298 0.507)"], + ["--t-color-crimson10", "color(display-p3 0.807 0.266 0.468)"], + ["--t-color-crimson11", "color(display-p3 0.731 0.195 0.388)"], + ["--t-color-crimson12", "color(display-p3 0.352 0.111 0.221)"], + ["--t-color-plum1", "color(display-p3 0.995 0.988 0.999)"], + ["--t-color-plum2", "color(display-p3 0.988 0.971 0.99)"], + ["--t-color-plum3", "color(display-p3 0.973 0.923 0.98)"], + ["--t-color-plum4", "color(display-p3 0.953 0.875 0.966)"], + ["--t-color-plum5", "color(display-p3 0.926 0.825 0.945)"], + ["--t-color-plum6", "color(display-p3 0.89 0.765 0.916)"], + ["--t-color-plum7", "color(display-p3 0.84 0.686 0.877)"], + ["--t-color-plum8", "color(display-p3 0.775 0.58 0.832)"], + ["--t-color-plum9", "color(display-p3 0.624 0.313 0.708)"], + ["--t-color-plum10", "color(display-p3 0.587 0.29 0.667)"], + ["--t-color-plum11", "color(display-p3 0.543 0.263 0.619)"], + ["--t-color-plum12", "color(display-p3 0.299 0.114 0.352)"], + ["--t-color-violet1", "color(display-p3 0.991 0.988 0.995)"], + ["--t-color-violet2", "color(display-p3 0.978 0.974 0.998)"], + ["--t-color-violet3", "color(display-p3 0.953 0.943 0.993)"], + ["--t-color-violet4", "color(display-p3 0.916 0.897 1)"], + ["--t-color-violet5", "color(display-p3 0.876 0.851 1)"], + ["--t-color-violet6", "color(display-p3 0.825 0.793 0.981)"], + ["--t-color-violet7", "color(display-p3 0.752 0.712 0.943)"], + ["--t-color-violet8", "color(display-p3 0.654 0.602 0.902)"], + ["--t-color-violet9", "color(display-p3 0.417 0.341 0.784)"], + ["--t-color-violet10", "color(display-p3 0.381 0.306 0.741)"], + ["--t-color-violet11", "color(display-p3 0.383 0.317 0.702)"], + ["--t-color-violet12", "color(display-p3 0.179 0.15 0.359)"], + ["--t-color-iris1", "color(display-p3 0.992 0.992 0.999)"], + ["--t-color-iris2", "color(display-p3 0.972 0.973 0.998)"], + ["--t-color-iris3", "color(display-p3 0.943 0.945 0.992)"], + ["--t-color-iris4", "color(display-p3 0.902 0.906 1)"], + ["--t-color-iris5", "color(display-p3 0.857 0.861 1)"], + ["--t-color-iris6", "color(display-p3 0.799 0.805 0.987)"], + ["--t-color-iris7", "color(display-p3 0.721 0.727 0.955)"], + ["--t-color-iris8", "color(display-p3 0.61 0.619 0.918)"], + ["--t-color-iris9", "color(display-p3 0.357 0.357 0.81)"], + ["--t-color-iris10", "color(display-p3 0.318 0.318 0.774)"], + ["--t-color-iris11", "color(display-p3 0.337 0.326 0.748)"], + ["--t-color-iris12", "color(display-p3 0.154 0.161 0.371)"], + ["--t-color-cyan1", "color(display-p3 0.982 0.992 0.996)"], + ["--t-color-cyan2", "color(display-p3 0.955 0.981 0.984)"], + ["--t-color-cyan3", "color(display-p3 0.888 0.965 0.975)"], + ["--t-color-cyan4", "color(display-p3 0.821 0.941 0.959)"], + ["--t-color-cyan5", "color(display-p3 0.751 0.907 0.935)"], + ["--t-color-cyan6", "color(display-p3 0.671 0.862 0.9)"], + ["--t-color-cyan7", "color(display-p3 0.564 0.8 0.854)"], + ["--t-color-cyan8", "color(display-p3 0.388 0.715 0.798)"], + ["--t-color-cyan9", "color(display-p3 0.282 0.627 0.765)"], + ["--t-color-cyan10", "color(display-p3 0.264 0.583 0.71)"], + ["--t-color-cyan11", "color(display-p3 0.08 0.48 0.63)"], + ["--t-color-cyan12", "color(display-p3 0.108 0.232 0.277)"], + ["--t-color-jade1", "color(display-p3 0.986 0.996 0.992)"], + ["--t-color-jade2", "color(display-p3 0.962 0.983 0.969)"], + ["--t-color-jade3", "color(display-p3 0.912 0.965 0.932)"], + ["--t-color-jade4", "color(display-p3 0.858 0.941 0.893)"], + ["--t-color-jade5", "color(display-p3 0.795 0.909 0.847)"], + ["--t-color-jade6", "color(display-p3 0.715 0.864 0.791)"], + ["--t-color-jade7", "color(display-p3 0.603 0.802 0.718)"], + ["--t-color-jade8", "color(display-p3 0.44 0.72 0.629)"], + ["--t-color-jade9", "color(display-p3 0.319 0.63 0.521)"], + ["--t-color-jade10", "color(display-p3 0.299 0.592 0.488)"], + ["--t-color-jade11", "color(display-p3 0.15 0.5 0.37)"], + ["--t-color-jade12", "color(display-p3 0.142 0.229 0.194)"], + ["--t-color-grass1", "color(display-p3 0.986 0.996 0.985)"], + ["--t-color-grass2", "color(display-p3 0.966 0.983 0.964)"], + ["--t-color-grass3", "color(display-p3 0.923 0.965 0.917)"], + ["--t-color-grass4", "color(display-p3 0.872 0.94 0.865)"], + ["--t-color-grass5", "color(display-p3 0.811 0.908 0.802)"], + ["--t-color-grass6", "color(display-p3 0.733 0.864 0.724)"], + ["--t-color-grass7", "color(display-p3 0.628 0.803 0.622)"], + ["--t-color-grass8", "color(display-p3 0.477 0.72 0.482)"], + ["--t-color-grass9", "color(display-p3 0.38 0.647 0.378)"], + ["--t-color-grass10", "color(display-p3 0.344 0.598 0.342)"], + ["--t-color-grass11", "color(display-p3 0.263 0.488 0.261)"], + ["--t-color-grass12", "color(display-p3 0.151 0.233 0.153)"], + ["--t-color-mint1", "color(display-p3 0.98 0.995 0.992)"], + ["--t-color-mint2", "color(display-p3 0.957 0.985 0.977)"], + ["--t-color-mint3", "color(display-p3 0.888 0.972 0.95)"], + ["--t-color-mint4", "color(display-p3 0.819 0.951 0.916)"], + ["--t-color-mint5", "color(display-p3 0.747 0.918 0.873)"], + ["--t-color-mint6", "color(display-p3 0.668 0.87 0.818)"], + ["--t-color-mint7", "color(display-p3 0.567 0.805 0.744)"], + ["--t-color-mint8", "color(display-p3 0.42 0.724 0.649)"], + ["--t-color-mint9", "color(display-p3 0.62 0.908 0.834)"], + ["--t-color-mint10", "color(display-p3 0.585 0.871 0.797)"], + ["--t-color-mint11", "color(display-p3 0.203 0.463 0.397)"], + ["--t-color-mint12", "color(display-p3 0.136 0.259 0.236)"], + ["--t-color-lime1", "color(display-p3 0.989 0.992 0.981)"], + ["--t-color-lime2", "color(display-p3 0.975 0.98 0.954)"], + ["--t-color-lime3", "color(display-p3 0.939 0.965 0.851)"], + ["--t-color-lime4", "color(display-p3 0.896 0.94 0.76)"], + ["--t-color-lime5", "color(display-p3 0.843 0.903 0.678)"], + ["--t-color-lime6", "color(display-p3 0.778 0.852 0.599)"], + ["--t-color-lime7", "color(display-p3 0.694 0.784 0.508)"], + ["--t-color-lime8", "color(display-p3 0.585 0.707 0.378)"], + ["--t-color-lime9", "color(display-p3 0.78 0.928 0.466)"], + ["--t-color-lime10", "color(display-p3 0.734 0.896 0.397)"], + ["--t-color-lime11", "color(display-p3 0.386 0.482 0.227)"], + ["--t-color-lime12", "color(display-p3 0.222 0.25 0.128)"], + ["--t-color-bronze1", "color(display-p3 0.991 0.988 0.988)"], + ["--t-color-bronze2", "color(display-p3 0.989 0.97 0.961)"], + ["--t-color-bronze3", "color(display-p3 0.958 0.932 0.919)"], + ["--t-color-bronze4", "color(display-p3 0.929 0.894 0.877)"], + ["--t-color-bronze5", "color(display-p3 0.898 0.853 0.832)"], + ["--t-color-bronze6", "color(display-p3 0.861 0.805 0.778)"], + ["--t-color-bronze7", "color(display-p3 0.812 0.739 0.706)"], + ["--t-color-bronze8", "color(display-p3 0.741 0.647 0.606)"], + ["--t-color-bronze9", "color(display-p3 0.611 0.507 0.455)"], + ["--t-color-bronze10", "color(display-p3 0.563 0.461 0.414)"], + ["--t-color-bronze11", "color(display-p3 0.471 0.373 0.336)"], + ["--t-color-bronze12", "color(display-p3 0.251 0.191 0.172)"], + ["--t-color-gold1", "color(display-p3 0.992 0.992 0.989)"], + ["--t-color-gold2", "color(display-p3 0.98 0.976 0.953)"], + ["--t-color-gold3", "color(display-p3 0.947 0.94 0.909)"], + ["--t-color-gold4", "color(display-p3 0.914 0.904 0.865)"], + ["--t-color-gold5", "color(display-p3 0.88 0.865 0.816)"], + ["--t-color-gold6", "color(display-p3 0.84 0.818 0.756)"], + ["--t-color-gold7", "color(display-p3 0.788 0.753 0.677)"], + ["--t-color-gold8", "color(display-p3 0.715 0.66 0.565)"], + ["--t-color-gold9", "color(display-p3 0.579 0.517 0.41)"], + ["--t-color-gold10", "color(display-p3 0.538 0.479 0.38)"], + ["--t-color-gold11", "color(display-p3 0.433 0.386 0.305)"], + ["--t-color-gold12", "color(display-p3 0.227 0.209 0.173)"], + ["--t-color-brown1", "color(display-p3 0.995 0.992 0.989)"], + ["--t-color-brown2", "color(display-p3 0.987 0.976 0.964)"], + ["--t-color-brown3", "color(display-p3 0.959 0.936 0.909)"], + ["--t-color-brown4", "color(display-p3 0.934 0.897 0.855)"], + ["--t-color-brown5", "color(display-p3 0.909 0.856 0.798)"], + ["--t-color-brown6", "color(display-p3 0.88 0.808 0.73)"], + ["--t-color-brown7", "color(display-p3 0.841 0.742 0.639)"], + ["--t-color-brown8", "color(display-p3 0.782 0.647 0.514)"], + ["--t-color-brown9", "color(display-p3 0.651 0.505 0.368)"], + ["--t-color-brown10", "color(display-p3 0.601 0.465 0.344)"], + ["--t-color-brown11", "color(display-p3 0.485 0.374 0.288)"], + ["--t-color-brown12", "color(display-p3 0.236 0.202 0.183)"], + ["--t-color-amber1", "color(display-p3 0.995 0.992 0.985)"], + ["--t-color-amber2", "color(display-p3 0.994 0.986 0.921)"], + ["--t-color-amber3", "color(display-p3 0.994 0.969 0.782)"], + ["--t-color-amber4", "color(display-p3 0.989 0.937 0.65)"], + ["--t-color-amber5", "color(display-p3 0.97 0.902 0.527)"], + ["--t-color-amber6", "color(display-p3 0.936 0.844 0.506)"], + ["--t-color-amber7", "color(display-p3 0.89 0.762 0.443)"], + ["--t-color-amber8", "color(display-p3 0.85 0.65 0.3)"], + ["--t-color-amber9", "color(display-p3 1 0.77 0.26)"], + ["--t-color-amber10", "color(display-p3 0.959 0.741 0.274)"], + ["--t-color-amber11", "color(display-p3 0.64 0.4 0)"], + ["--t-color-amber12", "color(display-p3 0.294 0.208 0.145)"], + ["--t-color-transparent-green1", "#00c04004"], + ["--t-color-transparent-green2", "#00a32f0b"], + ["--t-color-transparent-green3", "#00a43319"], + ["--t-color-transparent-green4", "#00a83829"], + ["--t-color-transparent-green5", "#019c393b"], + ["--t-color-transparent-green6", "#00963c52"], + ["--t-color-transparent-green7", "#00914071"], + ["--t-color-transparent-green8", "#00924ba4"], + ["--t-color-transparent-green9", "#008f4acf"], + ["--t-color-transparent-green10", "#008647d4"], + ["--t-color-transparent-green11", "#00713fde"], + ["--t-color-transparent-green12", "#002616e6"], + ["--t-color-transparent-turquoise1", "#00cc9905"], + ["--t-color-transparent-turquoise2", "#00aa800c"], + ["--t-color-transparent-turquoise3", "#00c69d1f"], + ["--t-color-transparent-turquoise4", "#00c39633"], + ["--t-color-transparent-turquoise5", "#00b49047"], + ["--t-color-transparent-turquoise6", "#00a6855e"], + ["--t-color-transparent-turquoise7", "#0099807c"], + ["--t-color-transparent-turquoise8", "#009783ac"], + ["--t-color-transparent-turquoise9", "#009e8ced"], + ["--t-color-transparent-turquoise10", "#009684f2"], + ["--t-color-transparent-turquoise11", "#008573"], + ["--t-color-transparent-turquoise12", "#00332df2"], + ["--t-color-transparent-sky1", "#00d5ff06"], + ["--t-color-transparent-sky2", "#00a4db0e"], + ["--t-color-transparent-sky3", "#00b3ee1e"], + ["--t-color-transparent-sky4", "#00ace42e"], + ["--t-color-transparent-sky5", "#00a1d841"], + ["--t-color-transparent-sky6", "#0092ca56"], + ["--t-color-transparent-sky7", "#0089c172"], + ["--t-color-transparent-sky8", "#0085bf9f"], + ["--t-color-transparent-sky9", "#00c7fe83"], + ["--t-color-transparent-sky10", "#00bcf38b"], + ["--t-color-transparent-sky11", "#00749e"], + ["--t-color-transparent-sky12", "#002540e2"], + ["--t-color-transparent-blue1", "#00008002"], + ["--t-color-transparent-blue2", "#0040ff08"], + ["--t-color-transparent-blue3", "#0047f112"], + ["--t-color-transparent-blue4", "#0044ff1e"], + ["--t-color-transparent-blue5", "#0044ff2d"], + ["--t-color-transparent-blue6", "#003eff3e"], + ["--t-color-transparent-blue7", "#0037ed54"], + ["--t-color-transparent-blue8", "#0034dc72"], + ["--t-color-transparent-blue9", "#0031d2c1"], + ["--t-color-transparent-blue10", "#002ec9cc"], + ["--t-color-transparent-blue11", "#002bb7c5"], + ["--t-color-transparent-blue12", "#001046e0"], + ["--t-color-transparent-purple1", "#aa00aa03"], + ["--t-color-transparent-purple2", "#8000e008"], + ["--t-color-transparent-purple3", "#8e00f112"], + ["--t-color-transparent-purple4", "#8d00e51d"], + ["--t-color-transparent-purple5", "#8000db2a"], + ["--t-color-transparent-purple6", "#7a01d03b"], + ["--t-color-transparent-purple7", "#6d00c350"], + ["--t-color-transparent-purple8", "#6600c06c"], + ["--t-color-transparent-purple9", "#5c00adb1"], + ["--t-color-transparent-purple10", "#53009eb8"], + ["--t-color-transparent-purple11", "#52009aba"], + ["--t-color-transparent-purple12", "#250049df"], + ["--t-color-transparent-pink1", "#ff00aa03"], + ["--t-color-transparent-pink2", "#e0008008"], + ["--t-color-transparent-pink3", "#f4008c16"], + ["--t-color-transparent-pink4", "#e2008b23"], + ["--t-color-transparent-pink5", "#d1008331"], + ["--t-color-transparent-pink6", "#c0007840"], + ["--t-color-transparent-pink7", "#b6006f53"], + ["--t-color-transparent-pink8", "#af006f6c"], + ["--t-color-transparent-pink9", "#c8007fbf"], + ["--t-color-transparent-pink10", "#c2007ac7"], + ["--t-color-transparent-pink11", "#b60074d6"], + ["--t-color-transparent-pink12", "#59003bed"], + ["--t-color-transparent-red1", "#ff000003"], + ["--t-color-transparent-red2", "#ff000008"], + ["--t-color-transparent-red3", "#f3000d14"], + ["--t-color-transparent-red4", "#ff000824"], + ["--t-color-transparent-red5", "#ff000632"], + ["--t-color-transparent-red6", "#f8000442"], + ["--t-color-transparent-red7", "#df000356"], + ["--t-color-transparent-red8", "#d2000571"], + ["--t-color-transparent-red9", "#db0007b7"], + ["--t-color-transparent-red10", "#d10005c1"], + ["--t-color-transparent-red11", "#c40006d3"], + ["--t-color-transparent-red12", "#55000de8"], + ["--t-color-transparent-orange1", "#c0400004"], + ["--t-color-transparent-orange2", "#ff8e0012"], + ["--t-color-transparent-orange3", "#ff9c0029"], + ["--t-color-transparent-orange4", "#ff91014a"], + ["--t-color-transparent-orange5", "#ff8b0065"], + ["--t-color-transparent-orange6", "#ff81007d"], + ["--t-color-transparent-orange7", "#ed6c008c"], + ["--t-color-transparent-orange8", "#e35f00aa"], + ["--t-color-transparent-orange9", "#f65e00ea"], + ["--t-color-transparent-orange10", "#ef5f00"], + ["--t-color-transparent-orange11", "#cc4e00"], + ["--t-color-transparent-orange12", "#431200e2"], + ["--t-color-transparent-yellow1", "#aaaa0006"], + ["--t-color-transparent-yellow2", "#f4dd0016"], + ["--t-color-transparent-yellow3", "#ffee0047"], + ["--t-color-transparent-yellow4", "#ffe3016b"], + ["--t-color-transparent-yellow5", "#ffd5008f"], + ["--t-color-transparent-yellow6", "#ebbc0097"], + ["--t-color-transparent-yellow7", "#d2a10098"], + ["--t-color-transparent-yellow8", "#c99700c6"], + ["--t-color-transparent-yellow9", "#ffe100d6"], + ["--t-color-transparent-yellow10", "#ffdc00"], + ["--t-color-transparent-yellow11", "#9e6c00"], + ["--t-color-transparent-yellow12", "#2e2000e0"], + ["--t-color-transparent-gray1", "color(display-p3 0 0 0 / 0.02)"], + ["--t-color-transparent-gray2", "color(display-p3 0 0 0 / 0.039)"], + ["--t-color-transparent-gray3", "color(display-p3 0 0 0 / 0.047)"], + ["--t-color-transparent-gray4", "color(display-p3 0 0 0 / 0.071)"], + ["--t-color-transparent-gray5", "color(display-p3 0 0 0 / 0.078)"], + ["--t-color-transparent-gray6", "color(display-p3 0 0 0 / 0.114)"], + ["--t-color-transparent-gray7", "color(display-p3 0 0 0 / 0.161)"], + ["--t-color-transparent-gray8", "color(display-p3 0 0 0 / 0.22)"], + ["--t-color-transparent-gray9", "color(display-p3 0 0 0 / 0.361)"], + ["--t-color-transparent-gray10", "color(display-p3 0 0 0 / 0.478)"], + ["--t-color-transparent-gray11", "color(display-p3 0 0 0 / 0.722)"], + ["--t-color-transparent-gray12", "color(display-p3 0 0 0 / 0.91)"], + ["--t-color-transparent-mauve1", "#55005503"], + ["--t-color-transparent-mauve2", "#2b005506"], + ["--t-color-transparent-mauve3", "#30004010"], + ["--t-color-transparent-mauve4", "#20003618"], + ["--t-color-transparent-mauve5", "#20003820"], + ["--t-color-transparent-mauve6", "#14003527"], + ["--t-color-transparent-mauve7", "#10003332"], + ["--t-color-transparent-mauve8", "#08003145"], + ["--t-color-transparent-mauve9", "#05001d73"], + ["--t-color-transparent-mauve10", "#0500197d"], + ["--t-color-transparent-mauve11", "#0400119c"], + ["--t-color-transparent-mauve12", "#020008e0"], + ["--t-color-transparent-slate1", "#00005503"], + ["--t-color-transparent-slate2", "#00005506"], + ["--t-color-transparent-slate3", "#0000330f"], + ["--t-color-transparent-slate4", "#00002d17"], + ["--t-color-transparent-slate5", "#0009321f"], + ["--t-color-transparent-slate6", "#00002f26"], + ["--t-color-transparent-slate7", "#00062e32"], + ["--t-color-transparent-slate8", "#00083046"], + ["--t-color-transparent-slate9", "#00051d74"], + ["--t-color-transparent-slate10", "#00071b7f"], + ["--t-color-transparent-slate11", "#0007149f"], + ["--t-color-transparent-slate12", "#000509e3"], + ["--t-color-transparent-sage1", "#00804004"], + ["--t-color-transparent-sage2", "#00402008"], + ["--t-color-transparent-sage3", "#002d1e11"], + ["--t-color-transparent-sage4", "#001f1519"], + ["--t-color-transparent-sage5", "#00180820"], + ["--t-color-transparent-sage6", "#00140d28"], + ["--t-color-transparent-sage7", "#00140a34"], + ["--t-color-transparent-sage8", "#000f0847"], + ["--t-color-transparent-sage9", "#00110b79"], + ["--t-color-transparent-sage10", "#00100a83"], + ["--t-color-transparent-sage11", "#000a07a0"], + ["--t-color-transparent-sage12", "#000805e5"], + ["--t-color-transparent-olive1", "#00550003"], + ["--t-color-transparent-olive2", "#00490007"], + ["--t-color-transparent-olive3", "#00200010"], + ["--t-color-transparent-olive4", "#00160018"], + ["--t-color-transparent-olive5", "#00180020"], + ["--t-color-transparent-olive6", "#00140028"], + ["--t-color-transparent-olive7", "#000f0033"], + ["--t-color-transparent-olive8", "#040f0047"], + ["--t-color-transparent-olive9", "#050f0078"], + ["--t-color-transparent-olive10", "#040e0082"], + ["--t-color-transparent-olive11", "#020a00a0"], + ["--t-color-transparent-olive12", "#010600e3"], + ["--t-color-transparent-sand1", "#55550003"], + ["--t-color-transparent-sand2", "#25250007"], + ["--t-color-transparent-sand3", "#20100010"], + ["--t-color-transparent-sand4", "#1f150019"], + ["--t-color-transparent-sand5", "#1f180021"], + ["--t-color-transparent-sand6", "#19130029"], + ["--t-color-transparent-sand7", "#19140035"], + ["--t-color-transparent-sand8", "#1915014a"], + ["--t-color-transparent-sand9", "#0f0f0079"], + ["--t-color-transparent-sand10", "#0c0c0083"], + ["--t-color-transparent-sand11", "#080800a1"], + ["--t-color-transparent-sand12", "#060500e3"], + ["--t-color-transparent-tomato1", "#ff000003"], + ["--t-color-transparent-tomato2", "#ff200008"], + ["--t-color-transparent-tomato3", "#f52b0018"], + ["--t-color-transparent-tomato4", "#ff35002c"], + ["--t-color-transparent-tomato5", "#ff2e003d"], + ["--t-color-transparent-tomato6", "#f92d0050"], + ["--t-color-transparent-tomato7", "#e7280067"], + ["--t-color-transparent-tomato8", "#db250084"], + ["--t-color-transparent-tomato9", "#df2600d1"], + ["--t-color-transparent-tomato10", "#d72400da"], + ["--t-color-transparent-tomato11", "#cd2200ea"], + ["--t-color-transparent-tomato12", "#460900e0"], + ["--t-color-transparent-ruby1", "#ff005503"], + ["--t-color-transparent-ruby2", "#ff002008"], + ["--t-color-transparent-ruby3", "#f3002515"], + ["--t-color-transparent-ruby4", "#ff002523"], + ["--t-color-transparent-ruby5", "#ff002a31"], + ["--t-color-transparent-ruby6", "#e4002440"], + ["--t-color-transparent-ruby7", "#ce002553"], + ["--t-color-transparent-ruby8", "#c300286d"], + ["--t-color-transparent-ruby9", "#db002cb9"], + ["--t-color-transparent-ruby10", "#d2002cc4"], + ["--t-color-transparent-ruby11", "#c10030db"], + ["--t-color-transparent-ruby12", "#550016e8"], + ["--t-color-transparent-crimson1", "#ff005503"], + ["--t-color-transparent-crimson2", "#e0004008"], + ["--t-color-transparent-crimson3", "#ff005216"], + ["--t-color-transparent-crimson4", "#f8005123"], + ["--t-color-transparent-crimson5", "#e5004f31"], + ["--t-color-transparent-crimson6", "#d0004b41"], + ["--t-color-transparent-crimson7", "#bf004753"], + ["--t-color-transparent-crimson8", "#b6004a6c"], + ["--t-color-transparent-crimson9", "#e2005bc2"], + ["--t-color-transparent-crimson10", "#d70056cb"], + ["--t-color-transparent-crimson11", "#c4004fe2"], + ["--t-color-transparent-crimson12", "#530026e9"], + ["--t-color-transparent-plum1", "#aa00ff03"], + ["--t-color-transparent-plum2", "#c000c008"], + ["--t-color-transparent-plum3", "#cc00cc14"], + ["--t-color-transparent-plum4", "#c200c921"], + ["--t-color-transparent-plum5", "#b700bd2e"], + ["--t-color-transparent-plum6", "#a400b03d"], + ["--t-color-transparent-plum7", "#9900a852"], + ["--t-color-transparent-plum8", "#9000a56e"], + ["--t-color-transparent-plum9", "#89009eb5"], + ["--t-color-transparent-plum10", "#7f0092bb"], + ["--t-color-transparent-plum11", "#730086c1"], + ["--t-color-transparent-plum12", "#40004be6"], + ["--t-color-transparent-violet1", "#5500aa03"], + ["--t-color-transparent-violet2", "#4900ff07"], + ["--t-color-transparent-violet3", "#4400ee0f"], + ["--t-color-transparent-violet4", "#4300ff1b"], + ["--t-color-transparent-violet5", "#3600ff26"], + ["--t-color-transparent-violet6", "#3100fb35"], + ["--t-color-transparent-violet7", "#2d01dd4a"], + ["--t-color-transparent-violet8", "#2b00d066"], + ["--t-color-transparent-violet9", "#2400b7a9"], + ["--t-color-transparent-violet10", "#2300abb2"], + ["--t-color-transparent-violet11", "#1f0099af"], + ["--t-color-transparent-violet12", "#0b0043d9"], + ["--t-color-transparent-iris1", "#0000ff02"], + ["--t-color-transparent-iris2", "#0000ff07"], + ["--t-color-transparent-iris3", "#0011ee0f"], + ["--t-color-transparent-iris4", "#000bff19"], + ["--t-color-transparent-iris5", "#000eff25"], + ["--t-color-transparent-iris6", "#000aff34"], + ["--t-color-transparent-iris7", "#0008e647"], + ["--t-color-transparent-iris8", "#0008d964"], + ["--t-color-transparent-iris9", "#0000c0a4"], + ["--t-color-transparent-iris10", "#0000b6ae"], + ["--t-color-transparent-iris11", "#0600abac"], + ["--t-color-transparent-iris12", "#000246d8"], + ["--t-color-transparent-cyan1", "#0099cc05"], + ["--t-color-transparent-cyan2", "#009db10d"], + ["--t-color-transparent-cyan3", "#00c2d121"], + ["--t-color-transparent-cyan4", "#00bcd435"], + ["--t-color-transparent-cyan5", "#01b4cc4a"], + ["--t-color-transparent-cyan6", "#00a7c162"], + ["--t-color-transparent-cyan7", "#009fbb82"], + ["--t-color-transparent-cyan8", "#00a3c0c2"], + ["--t-color-transparent-cyan9", "#00a2c7"], + ["--t-color-transparent-cyan10", "#0094b7f8"], + ["--t-color-transparent-cyan11", "#007491ef"], + ["--t-color-transparent-cyan12", "#00323ef2"], + ["--t-color-transparent-jade1", "#00c08004"], + ["--t-color-transparent-jade2", "#00a3460b"], + ["--t-color-transparent-jade3", "#00ae4819"], + ["--t-color-transparent-jade4", "#00a85129"], + ["--t-color-transparent-jade5", "#00a2553c"], + ["--t-color-transparent-jade6", "#009a5753"], + ["--t-color-transparent-jade7", "#00945f74"], + ["--t-color-transparent-jade8", "#00976ea9"], + ["--t-color-transparent-jade9", "#00916bd6"], + ["--t-color-transparent-jade10", "#008764d9"], + ["--t-color-transparent-jade11", "#007152df"], + ["--t-color-transparent-jade12", "#002217e2"], + ["--t-color-transparent-grass1", "#00c00004"], + ["--t-color-transparent-grass2", "#0099000a"], + ["--t-color-transparent-grass3", "#00970016"], + ["--t-color-transparent-grass4", "#009f0725"], + ["--t-color-transparent-grass5", "#00930536"], + ["--t-color-transparent-grass6", "#008f0a4d"], + ["--t-color-transparent-grass7", "#018b0f6b"], + ["--t-color-transparent-grass8", "#008d199a"], + ["--t-color-transparent-grass9", "#008619b9"], + ["--t-color-transparent-grass10", "#007b17c1"], + ["--t-color-transparent-grass11", "#006514d5"], + ["--t-color-transparent-grass12", "#002006df"], + ["--t-color-transparent-mint1", "#00d5aa06"], + ["--t-color-transparent-mint2", "#00b18a0d"], + ["--t-color-transparent-mint3", "#00d29e22"], + ["--t-color-transparent-mint4", "#00cc9937"], + ["--t-color-transparent-mint5", "#00c0914c"], + ["--t-color-transparent-mint6", "#00b08663"], + ["--t-color-transparent-mint7", "#00a17d81"], + ["--t-color-transparent-mint8", "#009e7fb3"], + ["--t-color-transparent-mint9", "#00d3a579"], + ["--t-color-transparent-mint10", "#00c39982"], + ["--t-color-transparent-mint11", "#007763fd"], + ["--t-color-transparent-mint12", "#00312ae9"], + ["--t-color-transparent-lime1", "#66990005"], + ["--t-color-transparent-lime2", "#6b95000c"], + ["--t-color-transparent-lime3", "#96c80029"], + ["--t-color-transparent-lime4", "#8fc60042"], + ["--t-color-transparent-lime5", "#81bb0059"], + ["--t-color-transparent-lime6", "#72aa006e"], + ["--t-color-transparent-lime7", "#61990087"], + ["--t-color-transparent-lime8", "#559200ab"], + ["--t-color-transparent-lime9", "#93e4009c"], + ["--t-color-transparent-lime10", "#8fdc00b3"], + ["--t-color-transparent-lime11", "#375f00d0"], + ["--t-color-transparent-lime12", "#1e2900e3"], + ["--t-color-transparent-bronze1", "#55000003"], + ["--t-color-transparent-bronze2", "#cc33000a"], + ["--t-color-transparent-bronze3", "#92250015"], + ["--t-color-transparent-bronze4", "#80280020"], + ["--t-color-transparent-bronze5", "#7423002c"], + ["--t-color-transparent-bronze6", "#7324003a"], + ["--t-color-transparent-bronze7", "#6c1f004c"], + ["--t-color-transparent-bronze8", "#671c0066"], + ["--t-color-transparent-bronze9", "#551a008d"], + ["--t-color-transparent-bronze10", "#4c150097"], + ["--t-color-transparent-bronze11", "#3d0f00ab"], + ["--t-color-transparent-bronze12", "#1d0600d4"], + ["--t-color-transparent-gold1", "#55550003"], + ["--t-color-transparent-gold2", "#9d8a000d"], + ["--t-color-transparent-gold3", "#75600018"], + ["--t-color-transparent-gold4", "#6b4e0024"], + ["--t-color-transparent-gold5", "#60460030"], + ["--t-color-transparent-gold6", "#64440040"], + ["--t-color-transparent-gold7", "#63420055"], + ["--t-color-transparent-gold8", "#633d0072"], + ["--t-color-transparent-gold9", "#5332009a"], + ["--t-color-transparent-gold10", "#492d00a1"], + ["--t-color-transparent-gold11", "#362100b4"], + ["--t-color-transparent-gold12", "#130c00d4"], + ["--t-color-transparent-brown1", "#aa550003"], + ["--t-color-transparent-brown2", "#aa550009"], + ["--t-color-transparent-brown3", "#a04b0018"], + ["--t-color-transparent-brown4", "#9b4a0026"], + ["--t-color-transparent-brown5", "#9f4d0035"], + ["--t-color-transparent-brown6", "#a04e0048"], + ["--t-color-transparent-brown7", "#a34e0060"], + ["--t-color-transparent-brown8", "#9f4a0081"], + ["--t-color-transparent-brown9", "#823c00a7"], + ["--t-color-transparent-brown10", "#723300ac"], + ["--t-color-transparent-brown11", "#522100b9"], + ["--t-color-transparent-brown12", "#140600d1"], + ["--t-color-transparent-amber1", "#c0800004"], + ["--t-color-transparent-amber2", "#f4d10016"], + ["--t-color-transparent-amber3", "#ffde003d"], + ["--t-color-transparent-amber4", "#ffd40063"], + ["--t-color-transparent-amber5", "#f8cf0088"], + ["--t-color-transparent-amber6", "#eab5008c"], + ["--t-color-transparent-amber7", "#dc9b009d"], + ["--t-color-transparent-amber8", "#da8a00c9"], + ["--t-color-transparent-amber9", "#ffb300c2"], + ["--t-color-transparent-amber10", "#ffb300e7"], + ["--t-color-transparent-amber11", "#ab6400"], + ["--t-color-transparent-amber12", "#341500dd"], +]; diff --git a/packages/twenty-ui/src/theme-constants/index.ts b/packages/twenty-ui/src/theme-constants/index.ts new file mode 100644 index 0000000000..4798d0446f --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/index.ts @@ -0,0 +1,15 @@ +/* + * _____ _ + *|_ _|_ _____ _ __ | |_ _ _ + * | | \ \ /\ / / _ \ '_ \| __| | | | Auto-generated file + * | | \ V V / __/ | | | |_| |_| | Any edits to this will be overridden + * |_| \_/\_/ \___|_| |_|\__|\__, | + * |___/ + */ + +export { themeCssVariables } from './generated/themeCssVariables'; +export { THEME_DARK_CSS_VARIABLE_ENTRIES } from './generated/themeDarkCssVariableEntries'; +export { + MOBILE_VIEWPORT, + THEME_LIGHT_CSS_VARIABLE_ENTRIES, +} from './generated/themeLightCssVariableEntries'; diff --git a/packages/twenty-ui/src/theme/constants/ThemeCssVariables.ts b/packages/twenty-ui/src/theme/constants/ThemeCssVariables.ts deleted file mode 100644 index 7c15a272a2..0000000000 --- a/packages/twenty-ui/src/theme/constants/ThemeCssVariables.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { THEME_LIGHT } from '@ui/theme/constants/ThemeLight'; -import { type ThemeType } from '@ui/theme/types/ThemeType'; -import { buildThemeReferencingRootCssVariables } from '@ui/theme/utils/buildThemeReferencingRootCssVariables'; - -type DeepCSSVariableRefs = { - [K in keyof T]: T[K] extends (...args: never[]) => unknown - ? Record - : T[K] extends Record - ? DeepCSSVariableRefs - : string; -}; - -// eslint-disable-next-line @typescript-eslint/naming-convention -export const themeCssVariables: DeepCSSVariableRefs = - buildThemeReferencingRootCssVariables({ - themeNode: THEME_LIGHT, - prefix: 't', - }) as DeepCSSVariableRefs; diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts index f4baf1a7e2..061326eec3 100644 --- a/packages/twenty-ui/src/theme/index.ts +++ b/packages/twenty-ui/src/theme/index.ts @@ -51,7 +51,6 @@ export { TAG_LIGHT } from './constants/TagLight'; export { TEXT } from './constants/Text'; export { TEXT_INPUT_STYLE } from './constants/TextInputStyle'; export { THEME_COMMON } from './constants/ThemeCommon'; -export { themeCssVariables } from './constants/ThemeCssVariables'; export { THEME_DARK } from './constants/ThemeDark'; export { THEME_LIGHT } from './constants/ThemeLight'; export { TRANSPARENT_COLORS_DARK } from './constants/TransparentColorsDark'; @@ -64,7 +63,5 @@ export { export { ThemeCssVariableInjectorEffect } from './provider/ThemeCssVariableInjectorEffect'; export { ThemeProvider } from './provider/ThemeProvider'; export type { ThemeType } from './types/ThemeType'; -export { buildThemeReferencingRootCssVariables } from './utils/buildThemeReferencingRootCssVariables'; export { getNextThemeColor } from './utils/getNextThemeColor'; -export { prepareThemeForRootCssVariableInjection } from './utils/prepareThemeForRootCssVariableInjection'; export { SPACING_VALUES } from './utils/spacingValues'; diff --git a/packages/twenty-ui/src/theme/provider/ThemeCssVariableInjectorEffect.tsx b/packages/twenty-ui/src/theme/provider/ThemeCssVariableInjectorEffect.tsx index 9ccd51cf75..bd4267c221 100644 --- a/packages/twenty-ui/src/theme/provider/ThemeCssVariableInjectorEffect.tsx +++ b/packages/twenty-ui/src/theme/provider/ThemeCssVariableInjectorEffect.tsx @@ -1,33 +1,31 @@ -import { useLayoutEffect, useMemo } from 'react'; +import { useLayoutEffect } from 'react'; -import { type ThemeType } from '@ui/theme/types/ThemeType'; -import { prepareThemeForRootCssVariableInjection } from '@ui/theme/utils/prepareThemeForRootCssVariableInjection'; +import { + THEME_DARK_CSS_VARIABLE_ENTRIES, + THEME_LIGHT_CSS_VARIABLE_ENTRIES, +} from '@ui/theme-constants'; export const ThemeCssVariableInjectorEffect = ({ theme, }: { - theme: ThemeType; + theme: { name: string }; }) => { - const themeCssVariableEntries = useMemo( - () => - prepareThemeForRootCssVariableInjection({ - themeNode: theme as unknown as Record, - prefix: 't', - }), - [theme], - ); + const entries = + theme.name === 'dark' + ? THEME_DARK_CSS_VARIABLE_ENTRIES + : THEME_LIGHT_CSS_VARIABLE_ENTRIES; useLayoutEffect(() => { const root = document.documentElement; - for (const [name, value] of themeCssVariableEntries) { + for (const [name, value] of entries) { root.style.setProperty(name, value); } return () => { - for (const [name] of themeCssVariableEntries) { + for (const [name] of entries) { root.style.removeProperty(name); } }; - }, [themeCssVariableEntries]); + }, [entries]); return null; }; diff --git a/packages/twenty-ui/src/theme/utils/__tests__/buildThemeReferencingRootCssVariables.test.ts b/packages/twenty-ui/src/theme/utils/__tests__/buildThemeReferencingRootCssVariables.test.ts deleted file mode 100644 index 93af1419c2..0000000000 --- a/packages/twenty-ui/src/theme/utils/__tests__/buildThemeReferencingRootCssVariables.test.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { buildThemeReferencingRootCssVariables } from '../buildThemeReferencingRootCssVariables'; - -describe('buildThemeReferencingRootCssVariables', () => { - it('replaces primitive leaves with var() references', () => { - const result = buildThemeReferencingRootCssVariables({ - themeNode: { fontSize: '14px', lineHeight: 1.5 }, - prefix: 't', - }); - - expect(result).toEqual({ - fontSize: 'var(--t-font-size)', - lineHeight: 'var(--t-line-height)', - }); - }); - - it('recurses into nested objects', () => { - const result = buildThemeReferencingRootCssVariables({ - themeNode: { font: { color: { primary: 'someValue' } } }, - prefix: 't', - }); - - expect(result).toEqual({ - font: { - color: { primary: 'var(--t-font-color-primary)' }, - }, - }); - }); - - it('expands spacing functions into keyed var() refs', () => { - const result = buildThemeReferencingRootCssVariables({ - themeNode: { spacing: (n: number) => `${n * 4}px` }, - prefix: 't', - }); - - const spacing = result.spacing as Record; - expect(spacing[0]).toBe('var(--t-spacing-0)'); - expect(spacing[4]).toBe('var(--t-spacing-4)'); - expect(spacing[0.5]).toBe('var(--t-spacing-0_5)'); - expect(spacing[1.5]).toBe('var(--t-spacing-1_5)'); - }); -}); diff --git a/packages/twenty-ui/src/theme/utils/__tests__/prepareThemeForRootCssVariableInjection.test.ts b/packages/twenty-ui/src/theme/utils/__tests__/prepareThemeForRootCssVariableInjection.test.ts deleted file mode 100644 index 4e4cef5202..0000000000 --- a/packages/twenty-ui/src/theme/utils/__tests__/prepareThemeForRootCssVariableInjection.test.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { prepareThemeForRootCssVariableInjection } from '../prepareThemeForRootCssVariableInjection'; - -describe('prepareThemeForRootCssVariableInjection', () => { - it('collects flat entries from primitive leaves', () => { - const entries = prepareThemeForRootCssVariableInjection({ - themeNode: { fontSize: '14px' }, - prefix: 't', - }); - - expect(entries).toEqual([['--t-font-size', '14px']]); - }); - - it('recurses into nested objects', () => { - const entries = prepareThemeForRootCssVariableInjection({ - themeNode: { font: { color: { primary: 'someValue' } } }, - prefix: 't', - }); - - expect(entries).toEqual([['--t-font-color-primary', 'someValue']]); - }); - - it('expands spacing functions into entries', () => { - const entries = prepareThemeForRootCssVariableInjection({ - themeNode: { spacing: (n: number) => `${n * 4}px` }, - prefix: 't', - }); - - expect(entries).toContainEqual(['--t-spacing-0', '0px']); - expect(entries).toContainEqual(['--t-spacing-4', '16px']); - expect(entries).toContainEqual(['--t-spacing-0_5', '2px']); - }); - - it('stringifies numeric values', () => { - const entries = prepareThemeForRootCssVariableInjection({ - themeNode: { opacity: 0.5 }, - prefix: 't', - }); - - expect(entries).toEqual([['--t-opacity', '0.5']]); - }); -}); diff --git a/packages/twenty-ui/src/theme/utils/buildThemeReferencingRootCssVariables.ts b/packages/twenty-ui/src/theme/utils/buildThemeReferencingRootCssVariables.ts deleted file mode 100644 index 1cccbde2dd..0000000000 --- a/packages/twenty-ui/src/theme/utils/buildThemeReferencingRootCssVariables.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { SPACING_VALUES } from '@ui/theme/utils/spacingValues'; - -const camelToKebab = (str: string): string => - str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`); - -const isPlainObject = (value: unknown): value is Record => - typeof value === 'object' && value !== null && !Array.isArray(value); - -const formatSpacingKey = (n: number): string => String(n).replace('.', '_'); - -const buildSpacingVariableRefs = ( - name: string, -): Record => { - const spacing: Record = {}; - for (const n of SPACING_VALUES) { - spacing[n] = `var(--${name}-${formatSpacingKey(n)})`; - } - return spacing; -}; - -const buildVariableRefForEntry = ({ - key, - value, - name, -}: { - key: string; - value: unknown; - name: string; -}): unknown => { - if (typeof value === 'function' && key === 'spacing') { - return buildSpacingVariableRefs(name); - } - - if (isPlainObject(value)) { - return buildThemeReferencingRootCssVariables({ - themeNode: value, - prefix: name, - }); - } - - return `var(--${name})`; -}; - -// Builds a nested object that mirrors the theme shape, where every leaf -// is replaced with a CSS var(--t-…) reference string. -// { font: { color: { primary: '#333' } } } -// → { font: { color: { primary: 'var(--t-font-color-primary)' } } } -export const buildThemeReferencingRootCssVariables = ({ - themeNode, - prefix, -}: { - themeNode: Record; - prefix: string; -}): Record => { - const result: Record = {}; - - for (const [key, value] of Object.entries(themeNode)) { - const name = `${prefix}-${camelToKebab(key)}`; - result[key] = buildVariableRefForEntry({ key, value, name }); - } - - return result; -}; diff --git a/packages/twenty-ui/src/theme/utils/prepareThemeForRootCssVariableInjection.ts b/packages/twenty-ui/src/theme/utils/prepareThemeForRootCssVariableInjection.ts deleted file mode 100644 index 2d22ccfed2..0000000000 --- a/packages/twenty-ui/src/theme/utils/prepareThemeForRootCssVariableInjection.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { SPACING_VALUES } from '@ui/theme/utils/spacingValues'; - -const camelToKebab = (str: string): string => - str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`); - -const isPlainObject = (value: unknown): value is Record => - typeof value === 'object' && value !== null && !Array.isArray(value); - -const formatSpacingKey = (n: number): string => String(n).replace('.', '_'); - -const collectSpacingEntries = ( - name: string, - spacingFn: (...args: number[]) => string, -): [string, string][] => - SPACING_VALUES.map((n) => [`--${name}-${formatSpacingKey(n)}`, spacingFn(n)]); - -const collectEntriesForValue = ({ - key, - value, - name, -}: { - key: string; - value: unknown; - name: string; -}): [string, string][] => { - if (typeof value === 'function' && key === 'spacing') { - return collectSpacingEntries(name, value as (...args: number[]) => string); - } - - if (isPlainObject(value)) { - return prepareThemeForRootCssVariableInjection({ - themeNode: value, - prefix: name, - }); - } - - return [[`--${name}`, String(value)]]; -}; - -// Collects a flat [--css-variable-name, value] list by walking a runtime -// theme object. Used to inject custom properties onto the DOM root. -// { font: { color: { primary: '#333' } } } -// → [['--t-font-color-primary', '#333']] -export const prepareThemeForRootCssVariableInjection = ({ - themeNode, - prefix, -}: { - themeNode: Record; - prefix: string; -}): [string, string][] => - Object.entries(themeNode).flatMap(([key, value]) => { - const name = `${prefix}-${camelToKebab(key)}`; - return collectEntriesForValue({ key, value, name }); - });