diff --git a/.claude/skills/ui4-review/SKILL.md b/.claude/skills/ui4-review/SKILL.md
index d3f28c59f87..2ab2638861e 100644
--- a/.claude/skills/ui4-review/SKILL.md
+++ b/.claude/skills/ui4-review/SKILL.md
@@ -9,6 +9,24 @@ Reviews CSS changes and **auto-fixes** token violations.
---
+## Important: Palette vs Semantic Tokens
+
+**`--ramp-*` tokens** are the raw color palette (e.g., `--ramp-white-1000`, `--ramp-blue-500`). These are used **only** in `colors.css` to define semantic tokens.
+
+**`--color-*` tokens** are context-aware semantic tokens (e.g., `--color-bg`, `--color-text-brand`). These handle light/dark theming automatically.
+
+**Components and elements should ALWAYS use `--color-*` semantic tokens, never `--ramp-*` palette tokens directly.**
+
+```css
+/* ❌ BAD - using raw palette */
+background: var(--ramp-white-1000);
+
+/* ✅ GOOD - using semantic token */
+background: var(--color-bg);
+```
+
+---
+
## Process
### Step 1: Get Changed CSS Files
@@ -36,18 +54,25 @@ grep -nE '#[0-9a-fA-F]{3,8}|rgba?\(' "$FILE"
# 4. Legacy Theme Variables
grep -nE 'var\(--theme-|var\(--style-|var\(--base\)' "$FILE"
-# 5. Long-form Token Names (should use shorthands)
-grep -nE '\-\-icon-default-default|\-\-text-default-default|\-\-bg-default-default|\-\-border-default-default' "$FILE"
+# 5. Old Token Names (pre-UI4 naming)
+grep -nE '\-\-bg-default|\-\-bg-secondary|\-\-text-default|\-\-text-secondary|\-\-icon-default|\-\-icon-secondary|\-\-border-default|\-\-border-strong' "$FILE"
+
+# 6. Raw Palette Usage (should use semantic tokens instead)
+# Skip this check for colors.css which defines the semantic tokens
+grep -nE 'var\(--ramp-' "$FILE"
```
-**Invoke all 5 grep commands in a single parallel batch**, then analyze results.
+**Invoke all 6 grep commands in a single parallel batch**, then analyze results.
+
+**Note:** Raw `--ramp-*` violations are only flagged in component CSS files, not in `colors.css` where they're used to define semantic tokens.
### Step 3: Auto-Fix by Priority
1. **SCSS Nesting** (breaks CSS entirely) — Fix first
2. **Legacy Variables** (deprecated) — Replace with new tokens
-3. **Long-form Tokens** (verbose) — Convert to shorthands
-4. **Hardcoded Values** (spacing, colors, radius) — Replace with tokens
+3. **Old Token Names** (pre-UI4) — Convert to `--color-*` naming
+4. **Raw Palette Usage** (`--ramp-*` in components) — Replace with semantic `--color-*` tokens
+5. **Hardcoded Values** (spacing, colors, radius) — Replace with tokens
### Step 4: Report
@@ -115,36 +140,47 @@ After fixing, report:
---
-### Token Shorthands
-
-| Long Form | Shorthand |
-| --------------------------- | ------------------- |
-| `--icon-default-default` | `--icon-default` |
-| `--icon-default-secondary` | `--icon-secondary` |
-| `--icon-default-tertiary` | `--icon-tertiary` |
-| `--text-default-default` | `--text-default` |
-| `--text-default-secondary` | `--text-secondary` |
-| `--text-default-tertiary` | `--text-tertiary` |
-| `--bg-default-default` | `--bg-default` |
-| `--bg-default-secondary` | `--bg-secondary` |
-| `--bg-default-hover` | `--bg-hover` |
-| `--bg-selected-default` | `--bg-selected` |
-| `--border-default-default` | `--border-default` |
-| `--border-default-strong` | `--border-strong` |
-| `--border-selected-default` | `--border-selected` |
+### Semantic Color Tokens (UI4 Naming)
+
+All semantic colors use the `--color-` prefix. The `default` category and variant are implicit.
+
+| Old Name | New Name (UI4) |
+| ------------------- | ------------------------- |
+| `--bg-default` | `--color-bg` |
+| `--bg-secondary` | `--color-bg-secondary` |
+| `--bg-hover` | `--color-bg-hover` |
+| `--bg-selected` | `--color-bg-selected` |
+| `--bg-brand` | `--color-bg-brand` |
+| `--bg-danger` | `--color-bg-danger` |
+| `--bg-success` | `--color-bg-success` |
+| `--bg-warning` | `--color-bg-warning` |
+| `--text-default` | `--color-text` |
+| `--text-secondary` | `--color-text-secondary` |
+| `--text-tertiary` | `--color-text-tertiary` |
+| `--text-brand` | `--color-text-brand` |
+| `--text-danger` | `--color-text-danger` |
+| `--text-success` | `--color-text-success` |
+| `--icon-default` | `--color-icon` |
+| `--icon-secondary` | `--color-icon-secondary` |
+| `--icon-tertiary` | `--color-icon-tertiary` |
+| `--icon-brand` | `--color-icon-brand` |
+| `--icon-danger` | `--color-icon-danger` |
+| `--border-default` | `--color-border` |
+| `--border-strong` | `--color-border-strong` |
+| `--border-selected` | `--color-border-selected` |
+| `--border-brand` | `--color-border-brand` |
---
### Legacy Variables (Replace Immediately)
-| Legacy | Replacement |
-| ----------------------- | ----------------------------------- |
-| `var(--base)` | `--spacer-*` (see conversion table) |
-| `--theme-elevation-0` | `--bg-default` |
-| `--theme-elevation-50` | `--bg-secondary` |
-| `--theme-elevation-100` | `--border-default` |
-| `--theme-text` | `--text-default` |
-| `--style-radius-m` | `--radius-medium` |
+| Legacy | Replacement |
+| ----------------------- | ---------------------- |
+| `--theme-elevation-0` | `--color-bg` |
+| `--theme-elevation-50` | `--color-bg-secondary` |
+| `--theme-elevation-100` | `--color-border` |
+| `--theme-text` | `--color-text` |
+| `--style-radius-m` | `--radius-medium` |
**`var(--base)` Conversion:** Legacy token = 20px. Convert using:
diff --git a/.gitignore b/.gitignore
index c93bee67b61..8881f99f23b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -55,6 +55,7 @@ test/media
*payloadtests.db-wal
*payload.db
/versions
+/uploads
no-restrict-file-*
# Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
diff --git a/packages/next/src/elements/Nav/SidebarTabs/index.css b/packages/next/src/elements/Nav/SidebarTabs/index.css
index ac2b632597f..2b08cdf5a71 100644
--- a/packages/next/src/elements/Nav/SidebarTabs/index.css
+++ b/packages/next/src/elements/Nav/SidebarTabs/index.css
@@ -10,7 +10,7 @@
.sidebar-tabs__tabs {
display: flex;
gap: 0;
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
border-radius: var(--radius-medium);
width: 100%;
}
@@ -28,7 +28,7 @@
border-radius: var(--radius-medium);
border: 1px solid transparent;
background-color: transparent;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
transition:
background-color 0.15s ease,
border-color 0.15s ease,
@@ -36,14 +36,14 @@
position: relative;
&:hover {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
.sidebar-tabs__tab--active {
- background-color: var(--bg-default);
- border-color: var(--border-default);
- color: var(--icon-default);
+ background-color: var(--color-bg);
+ border-color: var(--color-border);
+ color: var(--color-icon);
}
.sidebar-tabs__tab-icon {
diff --git a/packages/next/src/elements/Nav/index.css b/packages/next/src/elements/Nav/index.css
index 8cc964f5ebe..d495f40d53e 100644
--- a/packages/next/src/elements/Nav/index.css
+++ b/packages/next/src/elements/Nav/index.css
@@ -6,7 +6,7 @@
flex-shrink: 0;
height: 100vh;
width: var(--nav-width);
- border-right: 1px solid var(--border-default);
+ border-right: 1px solid var(--color-border);
opacity: 0;
overflow: hidden;
--nav-padding-inline-start: var(--spacer-2-5);
@@ -17,7 +17,7 @@
[dir='rtl'] .nav {
border-right: none;
- border-left: 1px solid var(--border-default);
+ border-left: 1px solid var(--color-border);
}
.nav--nav-animate {
@@ -72,7 +72,7 @@
}
.nav__label {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
}
.nav__controls {
@@ -118,7 +118,7 @@
border-radius: var(--radius-medium);
&:hover {
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
text-decoration: none;
}
}
@@ -126,7 +126,7 @@
.nav__link--selected {
font-weight: 600;
border-radius: var(--radius-medium);
- background: var(--bg-selected);
+ background: var(--color-bg-selected);
}
@media (max-width: 1024px) {
diff --git a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx
index 121e40793a5..b0dfaab08f4 100644
--- a/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx
+++ b/packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx
@@ -369,7 +369,7 @@ function DroppableItem({ id, position }: { id: string; position: 'after' | 'befo
bottom: 0,
borderRadius: '1000px',
width: '4px',
- backgroundColor: isOver ? 'var(--bg-success-default)' : 'transparent',
+ backgroundColor: isOver ? 'var(--color-bg-success)' : 'transparent',
marginBottom: '10px',
marginTop: '10px',
pointerEvents: 'none',
diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.css b/packages/richtext-lexical/src/features/blocks/client/component/index.css
index 5ed2cc4ac7b..5107f059d5a 100644
--- a/packages/richtext-lexical/src/features/blocks/client/component/index.css
+++ b/packages/richtext-lexical/src/features/blocks/client/component/index.css
@@ -2,7 +2,7 @@
.LexicalEditorTheme__block {
margin: var(--spacer-3) 0;
z-index: 1;
- color: var(--text-default);
+ color: var(--color-text);
&[data-lexical-decorator='true'] {
width: auto;
@@ -45,13 +45,13 @@
.LexicalEditorTheme__block--has-no-error {
> .array-field__header .array-field__heading-with-error {
- color: var(--text-default);
+ color: var(--color-text);
}
}
.LexicalEditorTheme__block--has-error {
> .array-field__header {
- color: var(--text-danger);
+ color: var(--color-text-danger);
}
}
@@ -79,7 +79,7 @@
.LexicalEditorTheme__block__removeButton.btn {
margin: 0;
&:hover {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
}
}
@@ -88,7 +88,7 @@
width: var(--spacer-4);
&:hover {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
}
}
@@ -118,7 +118,7 @@
.LexicalEditorTheme__block__block-number {
flex-shrink: 0;
- color: var(--text-default);
+ color: var(--color-text);
}
.LexicalEditorTheme__block__block-number {
@@ -145,24 +145,24 @@
align-self: flex-start;
.btn {
- color: var(--icon-tertiary);
+ color: var(--color-icon-tertiary);
margin: 0;
&:hover {
- color: var(--text-default);
+ color: var(--color-text);
}
}
}
.LexicalEditorTheme__block-not-found {
- color: var(--text-danger);
+ color: var(--color-text-danger);
}
html[data-theme='light'] {
.blocks-field--has-error {
.section-title__input,
.blocks-field__heading-with-error {
- color: var(--text-danger);
+ color: var(--color-text-danger);
}
}
}
@@ -171,7 +171,7 @@
.blocks-field--has-error {
.section-title__input,
.blocks-field__heading-with-error {
- color: var(--text-danger);
+ color: var(--color-text-danger);
}
}
}
diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.css b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.css
index 52921ba69d9..acb4c06cf60 100644
--- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.css
+++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.css
@@ -9,7 +9,7 @@
outline: unset !important;
.LexicalEditorTheme__inlineBlock__container {
- box-shadow: 0 0 0 2px var(--border-selected);
+ box-shadow: 0 0 0 2px var(--color-border-selected);
outline: none;
}
}
@@ -25,8 +25,8 @@
margin-left: var(--spacer-1);
padding: 0;
padding-inline-start: var(--spacer-2);
- background: var(--bg-default);
- outline: var(--stroke-width-small) solid var(--border-default);
+ background: var(--color-bg);
+ outline: var(--stroke-width-small) solid var(--color-border);
border-radius: var(--radius-medium);
max-width: var(--inline-block-max-width);
font-family: var(--font-body);
@@ -35,13 +35,13 @@
cursor: pointer;
&:hover {
- outline: var(--stroke-width-small) solid var(--border-default);
+ outline: var(--stroke-width-small) solid var(--color-border);
}
}
.LexicalEditorTheme__inlineBlock-not-found {
max-width: var(--inline-block-not-found-max-width);
- color: var(--text-danger);
+ color: var(--color-text-danger);
}
.LexicalEditorTheme__inlineBlock__wrap {
@@ -59,7 +59,7 @@
margin: 2px;
&:not(:disabled):hover {
- background: var(--bg-hover);
+ background: var(--color-bg-hover);
}
& > * {
@@ -71,14 +71,14 @@
.LexicalEditorTheme__inlineBlock__removeButton.btn {
padding: 0;
margin: 2px;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
line {
stroke-width: var(--stroke-width-small);
}
&:disabled {
- color: var(--icon-tertiary);
+ color: var(--color-icon-tertiary);
pointer-events: none;
}
}
diff --git a/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/Collapse/index.css b/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/Collapse/index.css
index 348d4b1dcff..ced6850b4b2 100644
--- a/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/Collapse/index.css
+++ b/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/Collapse/index.css
@@ -7,20 +7,20 @@
align-items: center;
justify-content: center;
border-radius: var(--radius-medium);
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
box-sizing: border-box;
&:hover {
- color: var(--icon-default);
- background-color: var(--bg-transparent-hover);
+ color: var(--color-icon);
+ background-color: var(--color-bg-transparent-hover);
}
&:active {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
&:focus-visible {
- outline: 1px solid var(--border-brand-strong);
+ outline: 1px solid var(--color-border-brand-strong);
outline-offset: calc(var(--stroke-width-small) / -1);
}
}
diff --git a/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.css b/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.css
index c7b11a3dc8e..e462b4af97b 100644
--- a/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.css
+++ b/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/FloatingCollapse/index.css
@@ -14,8 +14,8 @@
padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1);
border-radius: var(--radius-medium);
- background: var(--bg-default);
- color: var(--text-default);
+ background: var(--color-bg);
+ color: var(--color-text);
font-size: var(--text-body-medium-font-size);
line-height: var(--text-body-medium-line-height);
white-space: nowrap;
@@ -25,16 +25,16 @@
0px 1px 3px 0px rgba(0, 0, 0, 0.1);
&:hover {
- background: var(--bg-default-secondary-hover);
- color: var(--text-default);
+ background: var(--color-bg-secondary-hover);
+ color: var(--color-text);
}
&:active {
- background: var(--bg-default-secondary-pressed);
+ background: var(--color-bg-secondary-pressed);
}
&:focus-visible {
- outline: var(--stroke-width-small) solid var(--border-brand-strong);
+ outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
outline-offset: calc(var(--stroke-width-small) / -1);
}
}
diff --git a/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/index.css b/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/index.css
index a507c1cf3ad..aa25848c1e1 100644
--- a/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/index.css
+++ b/packages/richtext-lexical/src/features/blocks/premade/CodeBlock/Component/index.css
@@ -12,8 +12,8 @@
background: linear-gradient(
to bottom,
rgb(0 0 0 / 0%) 0%,
- var(--bg-default) 90%,
- var(--bg-default) 100%
+ var(--color-bg) 90%,
+ var(--color-bg) 100%
);
position: absolute;
height: 100px;
@@ -30,7 +30,7 @@
.payload-richtext-code-block {
.collapsible__toggle-wrap {
- background: var(--bg-default);
+ background: var(--color-bg);
border: none;
border-radius: var(--radius-medium);
height: auto;
@@ -38,7 +38,7 @@
overflow: visible;
&:not(.toggle-disabled):hover {
- background: var(--bg-default);
+ background: var(--color-bg);
}
}
@@ -65,7 +65,7 @@
.overflow-guard {
border-width: 0;
border-radius: 0 0 var(--radius-medium) var(--radius-medium);
- background: var(--bg-default);
+ background: var(--color-bg);
}
.popup-button {
@@ -77,7 +77,7 @@
.popup-button,
.LexicalEditorTheme__block__removeButton.btn {
border-radius: var(--radius-medium);
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
min-width: var(--spacer-4);
min-height: var(--spacer-4);
padding: 0;
@@ -86,16 +86,16 @@
justify-content: center;
&:hover {
- color: var(--icon-default);
- background-color: var(--bg-transparent-hover);
+ color: var(--color-icon);
+ background-color: var(--color-bg-transparent-hover);
}
&:active {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
&:focus-visible {
- outline: var(--stroke-width-small) solid var(--border-brand-strong);
+ outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
outline-offset: calc(var(--stroke-width-small) / -1);
}
}
@@ -106,7 +106,7 @@
align-items: center;
justify-content: center;
min-width: var(--spacer-4);
- color: var(--icon-tertiary);
+ color: var(--color-icon-tertiary);
}
.payload-richtext-code-block__actions {
@@ -125,7 +125,7 @@
flex-direction: row;
width: max-content;
align-items: center;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
font-size: var(--text-body-medium-font-size);
line-height: var(--text-body-medium-line-height);
padding-left: var(--spacer-1);
@@ -135,16 +135,16 @@
}
&:hover {
- color: var(--text-default);
+ color: var(--color-text);
& path {
- fill: var(--text-default);
+ fill: var(--color-text);
}
}
}
.payload-richtext-code-block__chevron {
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
width: var(--spacer-3);
height: var(--spacer-4);
display: flex;
@@ -156,11 +156,11 @@
/* Override the collapsible container to use a simple border wrapper */
.payload-richtext-code-block {
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--color-border);
border-radius: var(--radius-medium);
&:focus-within {
- outline: var(--stroke-width-small) solid var(--border-brand-strong);
+ outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
outline-offset: calc(var(--stroke-width-small) / -1);
}
}
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.css b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.css
index f7bdb050e36..25509c2556e 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.css
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.css
@@ -23,17 +23,17 @@
top: var(--spacer-2);
right: var(--spacer-2);
border-radius: var(--radius-medium);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
background: transparent;
display: inline-block;
cursor: pointer;
&:hover {
- background-color: var(--bg-default-secondary-hover);
+ background-color: var(--color-bg-secondary-hover);
}
&:active {
- background-color: var(--bg-default-secondary-pressed);
+ background-color: var(--color-bg-secondary-pressed);
}
}
@@ -43,7 +43,7 @@
display: flex;
flex-direction: column;
position: fixed;
- background: var(--bg-menu);
+ background: var(--color-bg-menu);
min-width: var(--menu-min-width);
border-radius: var(--radius-large);
padding: var(--spacer-2);
@@ -78,12 +78,12 @@
text-align: left;
&:hover {
- background: var(--bg-brand-default);
+ background: var(--color-bg-brand);
color: var(--color-white-1000);
}
&:active {
- background: var(--bg-brand-pressed);
+ background: var(--color-bg-brand-pressed);
color: var(--color-white-1000);
}
}
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableCellResizerPlugin/index.css b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableCellResizerPlugin/index.css
index 05b71e0331a..18ca9a87deb 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableCellResizerPlugin/index.css
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableCellResizerPlugin/index.css
@@ -5,7 +5,7 @@
@media (pointer: coarse) {
.TableCellResizer__resizer {
- background-color: var(--bg-selected);
+ background-color: var(--color-bg-selected);
mix-blend-mode: color;
}
}
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.css b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.css
index 449da11c184..07c348a1887 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.css
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/TableGridPopup/index.css
@@ -8,7 +8,7 @@
.table-grid-popup__content {
width: 13rem;
- background: var(--bg-default);
+ background: var(--color-bg);
border-radius: var(--radius-large);
padding: var(--spacer-2);
display: flex;
@@ -32,7 +32,7 @@
display: flex;
align-items: center;
height: var(--spacer-4);
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
border-radius: var(--radius-medium);
overflow: clip;
min-width: 0;
@@ -40,11 +40,11 @@
}
.table-grid-popup__input-group:hover {
- background: var(--bg-default-secondary-hover);
+ background: var(--color-bg-secondary-hover);
}
.table-grid-popup__input-group--focused {
- border-color: var(--border-selected);
+ border-color: var(--color-border-selected);
}
.table-grid-popup__input-icon {
@@ -54,7 +54,7 @@
display: flex;
align-items: center;
justify-content: center;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.table-grid-popup__input-icon svg {
@@ -71,7 +71,7 @@
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
line-height: var(--text-body-medium-line-height);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
padding: 0;
padding-right: var(--spacer-2);
outline: none;
@@ -95,7 +95,7 @@
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
flex-shrink: 0;
line-height: 1;
}
@@ -113,25 +113,25 @@
.table-grid-popup__cell {
aspect-ratio: 1;
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
border-radius: var(--radius-small);
cursor: pointer;
border: var(--stroke-width-small) solid transparent;
}
.table-grid-popup__cell--selected {
- background: var(--bg-selected-default);
+ background: var(--color-bg-selected);
border-color: var(--color-blue-400);
}
.table-grid-popup__cell--hover {
- background: var(--bg-selected-hover);
+ background: var(--color-bg-selected-hover);
border-color: var(--color-blue-400);
}
.table-grid-popup__tooltip {
position: absolute;
- background: var(--bg-menu);
+ background: var(--color-bg-menu);
color: var(--color-white-800);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
@@ -155,7 +155,7 @@
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
- border-top: 4px solid var(--bg-menu);
+ border-top: 4px solid var(--color-bg-menu);
} */
.table-grid-popup__backdrop {
diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.css b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.css
index 9f78419cd6b..4031a12dfee 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.css
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.css
@@ -32,7 +32,7 @@
margin-bottom: var(--spacer-5);
::selection {
- background: var(--bg-selected);
+ background: var(--color-bg-selected);
}
br::selection {
@@ -41,13 +41,13 @@
}
.LexicalEditorTheme__tableFrozenColumn tr > td:first-child {
- background-color: var(--bg-default);
+ background-color: var(--color-bg);
position: sticky;
z-index: 2;
left: 0;
}
.LexicalEditorTheme__tableFrozenColumn tr > th:first-child {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
position: sticky;
z-index: 2;
left: 0;
@@ -59,7 +59,7 @@
top: 0;
right: 0;
height: 100%;
- border-right: var(--stroke-width-small) solid var(--border-default);
+ border-right: var(--stroke-width-small) solid var(--color-border);
}
.LexicalEditorTheme__tableFrozenColumn
@@ -73,15 +73,15 @@
}
.LexicalEditorTheme__tableRowStriping tr:nth-child(even) {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
.LexicalEditorTheme__tableSelected {
- outline: 2px solid var(--border-selected);
+ outline: 2px solid var(--color-border-selected);
}
.LexicalEditorTheme__tableCell {
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--color-border);
vertical-align: top;
text-align: start;
padding: var(--spacer-2);
@@ -115,7 +115,7 @@
}
.LexicalEditorTheme__tableCellHeader {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
text-align: start;
}
@@ -129,15 +129,15 @@
right: calc(var(--stroke-width-small) / -1);
bottom: calc(var(--stroke-width-small) / -1);
top: calc(var(--stroke-width-small) / -1);
- background-color: var(--bg-selected-default);
- border: var(--stroke-width-small) solid var(--border-selected);
+ background-color: var(--color-bg-selected);
+ border: var(--stroke-width-small) solid var(--color-border-selected);
opacity: 0.5;
content: '';
pointer-events: none;
}
.LexicalEditorTheme__tableCellHeader.LexicalEditorTheme__tableCellSelected::after {
- background-color: var(--bg-selected-hover);
+ background-color: var(--color-bg-selected-hover);
}
.LexicalEditorTheme__tableAddColumns {
@@ -147,7 +147,7 @@
.LexicalEditorTheme__tableAddColumns,
.LexicalEditorTheme__tableAddRows {
position: absolute;
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
border-radius: var(--radius-medium);
animation: table-controls 0.2s ease;
border: 0;
@@ -160,7 +160,7 @@
.LexicalEditorTheme__tableAddColumns:hover,
.LexicalEditorTheme__tableAddRows:hover {
- background-color: var(--bg-default-secondary-hover);
+ background-color: var(--color-bg-secondary-hover);
}
.LexicalEditorTheme__tableAddRows {
@@ -181,7 +181,7 @@
display: block;
position: absolute;
width: var(--stroke-width-small);
- background-color: var(--border-selected);
+ background-color: var(--color-border-selected);
height: 100%;
top: 0;
}
@@ -197,39 +197,39 @@
}
.LexicalEditorTheme__tableCellActionButton {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
display: block;
border: 0;
border-radius: var(--radius-full);
width: var(--spacer-3);
height: var(--spacer-3);
- color: var(--text-default);
+ color: var(--color-text);
cursor: pointer;
}
.LexicalEditorTheme__tableCellActionButton:hover {
- background-color: var(--border-default);
+ background-color: var(--color-border);
}
html[data-theme='dark'] {
.LexicalEditorTheme__tableCellHeader {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
}
.LexicalEditorTheme__tableCellSelected::after {
- background-color: var(--bg-selected-default);
+ background-color: var(--color-bg-selected);
opacity: 0.5;
}
.LexicalEditorTheme__tableAddColumns,
.LexicalEditorTheme__tableAddRows {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 3C8.27614 3 8.5 3.22386 8.5 3.5V7.5H12.5C12.7761 7.5 13 7.72386 13 8C13 8.27614 12.7761 8.5 12.5 8.5H8.5V12.5C8.5 12.7761 8.27614 13 8 13C7.72386 13 7.5 12.7761 7.5 12.5V8.5H3.5C3.22386 8.5 3 8.27614 3 8C3 7.72386 3.22386 7.5 3.5 7.5H7.5V3.5C7.5 3.22386 7.72386 3 8 3Z' fill='white' fill-opacity='0.9'/%3E%3C/svg%3E");
}
.LexicalEditorTheme__tableAddColumns:hover,
.LexicalEditorTheme__tableAddRows:hover {
- background-color: var(--bg-default-secondary-hover);
+ background-color: var(--color-bg-secondary-hover);
}
}
}
diff --git a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.css b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.css
index ede11299cd7..01295ef605a 100644
--- a/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.css
+++ b/packages/richtext-lexical/src/features/horizontalRule/client/plugin/index.css
@@ -10,7 +10,7 @@
content: '';
display: block;
height: calc(var(--spacer-1) / 2);
- background: var(--icon-tertiary);
+ background: var(--color-icon-tertiary);
transform: translateY(-50%);
}
@@ -19,7 +19,7 @@
user-select: none;
border-radius: var(--radius-small);
box-shadow:
- 0px 0px 0px 1px var(--bg-default),
- 0px 0px 0px 2px var(--border-selected);
+ 0px 0px 0px 1px var(--color-bg),
+ 0px 0px 0px 2px var(--color-border-selected);
}
}
diff --git a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.css b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.css
index 2e4de0f2a51..2e97d430797 100644
--- a/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.css
+++ b/packages/richtext-lexical/src/features/link/client/plugins/floatingLinkEditor/index.css
@@ -4,7 +4,7 @@
display: flex;
align-items: center;
gap: var(--spacer-2);
- background: var(--bg-menu);
+ background: var(--color-bg-menu);
padding: 0 var(--spacer-2);
height: var(--spacer-6);
vertical-align: middle;
@@ -50,14 +50,14 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- color: var(--text-brand-onbrand);
+ color: var(--color-text-onbrand);
font-size: var(--text-body-medium-font-size);
line-height: var(--text-body-medium-line-height);
min-width: 0;
height: 100%;
&:hover {
- color: var(--text-brand-onbrand);
+ color: var(--color-text-onbrand);
}
}
}
@@ -70,7 +70,7 @@
}
.link-input__label-pure {
- color: var(--text-brand-onbrand);
+ color: var(--color-text-onbrand);
margin-right: var(--spacer-3);
display: block;
white-space: nowrap;
@@ -92,21 +92,21 @@
min-width: var(--spacer-4);
min-height: var(--spacer-4);
cursor: pointer;
- color: var(--icon-brand-onbrand);
+ color: var(--color-icon-onbrand);
border-radius: var(--radius-medium);
&:hover:not([disabled]) {
- color: var(--icon-brand-onbrand);
+ color: var(--color-icon-onbrand);
background-color: rgba(255, 255, 255, 0.1);
}
&:focus-visible {
- outline: var(--stroke-width-small) solid var(--border-brand-strong);
+ outline: var(--stroke-width-small) solid var(--color-border-brand-strong);
}
}
.icon {
- color: var(--icon-brand-onbrand);
+ color: var(--color-icon-onbrand);
}
}
}
diff --git a/packages/richtext-lexical/src/features/relationship/client/components/index.css b/packages/richtext-lexical/src/features/relationship/client/components/index.css
index 057d76dc83d..8bc45a3f964 100644
--- a/packages/richtext-lexical/src/features/relationship/client/components/index.css
+++ b/packages/richtext-lexical/src/features/relationship/client/components/index.css
@@ -8,21 +8,21 @@
padding: var(--spacer-2-5);
align-items: center;
gap: var(--spacer-2);
- background: var(--bg-default);
- border: 1px solid var(--border-default);
+ background: var(--color-bg);
+ border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
font-family: var(--font-body);
margin-block: var(--spacer-2);
color: var(--color-text);
&:hover {
- outline: var(--stroke-width-small) solid var(--border-selected);
+ outline: var(--stroke-width-small) solid var(--color-border-selected);
outline-offset: calc(var(--stroke-width-small) * -1);
}
}
.LexicalEditorTheme__relationship--selected {
- outline: var(--stroke-width-small) solid var(--border-selected);
+ outline: var(--stroke-width-small) solid var(--color-border-selected);
outline-offset: calc(var(--stroke-width-small) * -1);
}
@@ -47,7 +47,7 @@
font-weight: var(--text-body-small-font-weight);
line-height: var(--text-body-small-line-height);
letter-spacing: var(--text-body-small-letter-spacing);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
margin: 0;
white-space: nowrap;
text-overflow: ellipsis;
@@ -91,7 +91,7 @@
.LexicalEditorTheme__relationship__doc-drawer-toggler,
.LexicalEditorTheme__relationship__swapButton {
&:disabled {
- color: var(--text-disabled);
+ color: var(--color-text-disabled);
pointer-events: none;
}
}
@@ -105,7 +105,7 @@
.LexicalEditorTheme__relationship__removeButton.btn {
&:disabled {
- color: var(--text-disabled);
+ color: var(--color-text-disabled);
pointer-events: none;
}
}
diff --git a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.css b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.css
index 2877646c7c8..6a3e41ad311 100644
--- a/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.css
+++ b/packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.css
@@ -15,7 +15,7 @@
position: sticky;
z-index: 2;
top: var(--doc-controls-height);
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--lexical-border-color);
border-collapse: unset;
border-radius: var(--radius-medium) var(--radius-medium) 0 0;
transform: translateY(var(--stroke-width-small));
@@ -34,7 +34,7 @@
}
&:before {
- background: var(--bg-default);
+ background: var(--color-bg);
opacity: 0.75;
}
@@ -52,7 +52,7 @@
}
> .editor-scroller > .editor > div > .LexicalEditorTheme__placeholder {
- top: var(--spacer-2);
+ top: var(--spacer-4);
}
}
}
@@ -68,7 +68,7 @@
.divider {
width: var(--stroke-width-small);
align-self: stretch;
- background-color: var(--border-default);
+ background-color: var(--lexical-border-color);
}
}
diff --git a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.css b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.css
index c858fb26128..f6f2ee6b3ea 100644
--- a/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.css
+++ b/packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.css
@@ -2,7 +2,7 @@
.inline-toolbar-popup {
display: flex;
align-items: center;
- background: var(--bg-default);
+ background: var(--color-bg);
padding: 0 var(--spacer-1);
gap: var(--spacer-1);
vertical-align: middle;
@@ -29,7 +29,7 @@
.divider {
width: var(--stroke-width-small);
align-self: stretch;
- background-color: var(--border-default);
+ background-color: var(--lexical-border-color);
}
}
diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.css b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.css
index e08092dcc0d..5f6a71aa164 100644
--- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.css
+++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarButton/index.css
@@ -14,27 +14,27 @@
padding: 0;
&:hover:not(.active):not([data-pressing]) {
- background-color: var(--bg-transparent-hover);
+ background-color: var(--color-bg-transparent-hover);
}
&:active:not(.active),
&[data-pressing]:not(.active) {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
&.active {
- background-color: var(--bg-selected);
+ background-color: var(--color-bg-selected);
&:hover {
- background-color: var(--bg-selected-hover);
+ background-color: var(--color-bg-selected-hover);
}
&:active {
- background-color: var(--bg-selected-pressed);
+ background-color: var(--color-bg-selected-pressed);
}
svg {
- color: var(--icon-selected-default);
+ color: var(--color-icon-selected);
}
.icon {
diff --git a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.css b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.css
index 8a990321425..4c5b3b594e2 100644
--- a/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.css
+++ b/packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.css
@@ -1,11 +1,11 @@
@layer payload-default {
@keyframes dropdown-press {
0% {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
100% {
- background-color: var(--bg-selected);
+ background-color: var(--color-bg-selected);
}
}
@@ -28,20 +28,20 @@
}
&:hover:not([disabled]):not(.active) {
- background-color: var(--bg-transparent-hover);
+ background-color: var(--color-bg-transparent-hover);
}
&:active:not(.active) {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
&.active {
- color: var(--icon-selected-default);
- background-color: var(--bg-selected);
+ color: var(--color-icon-selected);
+ background-color: var(--color-bg-selected);
animation: dropdown-press 0.15s cubic-bezier(0, 0.2, 0.2, 1);
.toolbar-popup__dropdown-caret {
- background-color: var(--icon-selected-default);
+ background-color: var(--color-icon-selected);
&:after {
transform: rotate(0deg);
@@ -62,7 +62,7 @@
width: 6px;
margin: 0 4px 0 2px;
height: 4px;
- background-color: var(--icon-default);
+ background-color: var(--color-icon);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38921 0.146406C4.58445 -0.0488286 4.90098 -0.0487744 5.09624 0.146406C5.29151 0.341668 5.29151 0.658175 5.09624 0.853437L2.97515 2.97453C2.77987 3.16959 2.46332 3.16972 2.26812 2.97453L0.146049 0.853437C-0.0487219 0.6583 -0.0486443 0.341591 0.146049 0.146406C0.341285 -0.0488288 0.658788 -0.0487749 0.854057 0.146406L2.62164 1.91398L4.38921 0.146406Z' fill='black'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
@@ -71,8 +71,8 @@
.toolbar-popup__dropdown-items {
--dropdown-min-width: 5rem;
position: absolute;
- background: var(--bg-elevated-default);
- color: var(--text-default-default);
+ background: var(--color-bg-elevated);
+ color: var(--color-text);
border-radius: var(--radius-large);
padding: var(--spacer-2);
min-width: var(--dropdown-min-width);
@@ -86,7 +86,7 @@
.toolbar-popup__dropdown-item {
all: unset;
cursor: pointer;
- color: var(--text-default-default);
+ color: var(--color-text);
transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
position: relative;
font-family: var(--text-body-medium-font-family);
@@ -110,27 +110,27 @@
}
&:hover:not([disabled]) {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
&:active:not([disabled]) {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
&.active {
- background-color: var(--bg-selected-strong);
- color: var(--text-selected-onselected-strong);
+ background-color: var(--color-bg-selected-strong);
+ color: var(--color-text-onselected-strong);
.icon {
- color: var(--text-selected-onselected-strong);
+ color: var(--color-text-onselected-strong);
}
&:hover:not([disabled]) {
- background-color: var(--bg-selected-strong-hover);
+ background-color: var(--color-bg-selected-strong-hover);
}
&:active:not([disabled]) {
- background-color: var(--bg-selected-strong-pressed);
+ background-color: var(--color-bg-selected-strong-pressed);
}
}
@@ -202,7 +202,7 @@
top: 50%;
width: var(--spacer-1);
height: var(--spacer-2);
- border: solid var(--text-selected-onselected-strong);
+ border: solid var(--color-text-onselected-strong);
border-width: 0 1px 1px 0;
transform: translateY(-60%) rotate(45deg);
}
diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.css b/packages/richtext-lexical/src/features/upload/client/component/index.css
index 2bea8906265..e614041f587 100644
--- a/packages/richtext-lexical/src/features/upload/client/component/index.css
+++ b/packages/richtext-lexical/src/features/upload/client/component/index.css
@@ -30,7 +30,7 @@
}
&:hover {
- border-color: var(--border-selected);
+ border-color: var(--color-border-selected);
border-radius: 0;
background: none;
}
@@ -86,7 +86,7 @@
gap: var(--spacer-2);
height: var(--spacer-6);
padding: 0 var(--spacer-2);
- background: var(--bg-menu);
+ background: var(--color-bg-menu);
border-radius: var(--radius-large);
box-shadow:
0 3px 8px 0 rgba(0, 0, 0, 0.35),
@@ -121,11 +121,11 @@
cursor: pointer;
&:hover:not(.btn--disabled) {
- background: var(--bg-menu-hover);
+ background: var(--color-bg-menu);
}
&:active:not(.btn--disabled) {
- background: var(--bg-menu-hover);
+ background: var(--color-bg-menu);
}
}
}
@@ -206,7 +206,7 @@
}
.LexicalEditorTheme__upload--selected {
- border-color: var(--border-selected);
+ border-color: var(--color-border-selected);
background: transparent;
border-radius: 0;
}
diff --git a/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css b/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css
index 037b3b6b223..e6b139426da 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/listitem/index.css
@@ -17,7 +17,7 @@
width: var(--spacer-3);
height: var(--spacer-3);
margin-right: var(--spacer-2);
- border: var(--stroke-width-small) solid var(--text-default);
+ border: var(--stroke-width-small) solid var(--color-text);
border-radius: var(--radius-medium);
display: flex;
align-items: center;
diff --git a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css
index 9853f242f3e..766b07915b1 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/relationship/index.css
@@ -6,9 +6,9 @@
display: flex;
align-items: center;
- background-color: var(--bg-default);
+ background-color: var(--color-bg);
border-radius: var(--radius-medium);
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--color-border);
position: relative;
font-family: var(--font-body);
margin-block: calc(var(--spacer-1) * 2.5);
diff --git a/packages/richtext-lexical/src/field/Diff/converters/unknown/index.css b/packages/richtext-lexical/src/field/Diff/converters/unknown/index.css
index 27de6fa432b..935adf6de83 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/unknown/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/unknown/index.css
@@ -4,9 +4,9 @@
max-width: fit-content;
display: flex;
align-items: center;
- background: var(--bg-default);
+ background: var(--color-bg);
border-radius: var(--radius-medium);
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--color-border);
position: relative;
font-family: var(--font-body);
margin-block: calc(var(--spacer-1) * 2.5);
diff --git a/packages/richtext-lexical/src/field/Diff/converters/upload/index.css b/packages/richtext-lexical/src/field/Diff/converters/upload/index.css
index 41769884131..32cd45cbe34 100644
--- a/packages/richtext-lexical/src/field/Diff/converters/upload/index.css
+++ b/packages/richtext-lexical/src/field/Diff/converters/upload/index.css
@@ -6,9 +6,9 @@
max-width: fit-content;
display: flex;
align-items: center;
- background-color: var(--bg-default);
+ background-color: var(--color-bg);
border-radius: var(--radius-medium);
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--color-border);
position: relative;
font-family: var(--font-body);
margin-block: calc(var(--spacer-1) * 2.5);
@@ -77,7 +77,7 @@
overflow: hidden;
flex-shrink: 0;
border-radius: 0;
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--color-border);
img,
svg {
diff --git a/packages/richtext-lexical/src/field/Diff/index.css b/packages/richtext-lexical/src/field/Diff/index.css
index 9b047dd2cbc..a5f2430a970 100644
--- a/packages/richtext-lexical/src/field/Diff/index.css
+++ b/packages/richtext-lexical/src/field/Diff/index.css
@@ -23,15 +23,15 @@
bottom: 0;
inset-inline-start: 0;
width: var(--spacer-1);
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
}
&:has([data-match-type='create'])::after {
- background-color: var(--bg-success-tertiary);
+ background-color: var(--color-bg-success-tertiary);
}
&:has([data-match-type='delete'])::after {
- background-color: var(--bg-danger-tertiary);
+ background-color: var(--color-bg-danger-tertiary);
}
}
diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx
index 3aa3adc3265..d83253963fb 100644
--- a/packages/richtext-lexical/src/field/Field.tsx
+++ b/packages/richtext-lexical/src/field/Field.tsx
@@ -199,10 +199,6 @@ const RichTextComponent: React.FC<
key={pathWithEditDepth}
style={styles}
>
- }
- />
{Label || (
@@ -210,6 +206,10 @@ const RichTextComponent: React.FC<
{!isControlledByParent && }
+ }
+ />
{}}>
{BeforeInput}
{/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer
diff --git a/packages/richtext-lexical/src/field/ViewSelector.css b/packages/richtext-lexical/src/field/ViewSelector.css
index 391f9bd13a5..777d257435a 100644
--- a/packages/richtext-lexical/src/field/ViewSelector.css
+++ b/packages/richtext-lexical/src/field/ViewSelector.css
@@ -13,12 +13,12 @@
background: transparent;
border-radius: var(--radius-small);
cursor: pointer;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
box-sizing: border-box;
&:hover {
- background: var(--bg-hover);
- color: var(--text-default);
+ background: var(--color-bg-hover);
+ color: var(--color-text);
}
}
diff --git a/packages/richtext-lexical/src/field/index.css b/packages/richtext-lexical/src/field/index.css
index 03d0294e419..58b29c5e531 100644
--- a/packages/richtext-lexical/src/field/index.css
+++ b/packages/richtext-lexical/src/field/index.css
@@ -1,5 +1,11 @@
@layer payload-default {
.rich-text-lexical {
+ --lexical-border-color: var(--color-border);
+
+ &.error {
+ --lexical-border-color: var(--color-border-danger-strong);
+ }
+
& > .field-error.tooltip {
right: auto;
position: static;
@@ -39,15 +45,15 @@
background-color: transparent;
}
to {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
to {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
}
animation: fadeInBackground 0.5s ease forwards;
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
}
}
}
diff --git a/packages/richtext-lexical/src/lexical/LexicalEditor.css b/packages/richtext-lexical/src/lexical/LexicalEditor.css
index d204e58c146..dfdb17130d6 100644
--- a/packages/richtext-lexical/src/lexical/LexicalEditor.css
+++ b/packages/richtext-lexical/src/lexical/LexicalEditor.css
@@ -8,7 +8,7 @@
position: relative;
letter-spacing: 0.02em;
border-radius: var(--radius-medium);
- border: var(--stroke-width-small) solid var(--border-default);
+ border: var(--stroke-width-small) solid var(--lexical-border-color);
&[dir='rtl'] [dir='auto'] {
direction: rtl;
@@ -17,13 +17,14 @@
.LexicalEditorTheme__placeholder {
position: absolute;
- top: var(--spacer-2);
- color: var(--text-secondary);
+ top: var(--spacer-4);
+ color: var(--color-text-secondary);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
pointer-events: none;
+ line-height: var(--text-body-large-line-height);
}
}
@@ -34,7 +35,7 @@
> .editor
> div
> .LexicalEditorTheme__placeholder {
- left: var(--spacer-6);
+ left: var(--spacer-5);
}
.rich-text-lexical:not(.rich-text-lexical--show-gutter)
diff --git a/packages/richtext-lexical/src/lexical/plugins/DecoratorPlugin/index.css b/packages/richtext-lexical/src/lexical/plugins/DecoratorPlugin/index.css
index 9c89874cfb3..04b690ea623 100644
--- a/packages/richtext-lexical/src/lexical/plugins/DecoratorPlugin/index.css
+++ b/packages/richtext-lexical/src/lexical/plugins/DecoratorPlugin/index.css
@@ -5,7 +5,7 @@
}
.decorator-selected {
- box-shadow: 0 0 0 2px var(--border-selected) !important;
+ box-shadow: 0 0 0 2px var(--color-border-selected) !important;
outline: none !important;
}
}
diff --git a/packages/richtext-lexical/src/lexical/plugins/InsertParagraphAtEnd/index.css b/packages/richtext-lexical/src/lexical/plugins/InsertParagraphAtEnd/index.css
index 3c7975fad8e..cb9b0208de2 100644
--- a/packages/richtext-lexical/src/lexical/plugins/InsertParagraphAtEnd/index.css
+++ b/packages/richtext-lexical/src/lexical/plugins/InsertParagraphAtEnd/index.css
@@ -16,7 +16,7 @@
cursor: pointer;
.insert-paragraph-at-end-inside {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
span {
display: flex;
@@ -33,7 +33,7 @@
display: flex;
justify-content: center;
border-radius: var(--radius-medium);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
span {
display: none;
@@ -45,7 +45,7 @@
html[data-theme='dark'] {
.insert-paragraph-at-end:hover {
.insert-paragraph-at-end-inside {
- background-color: var(--bg-secondary);
+ background-color: var(--color-bg-secondary);
}
}
}
diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.css b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.css
index 4415445e995..6d3e626d413 100644
--- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.css
+++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.css
@@ -2,8 +2,8 @@
.slash-menu-popup {
--slash-menu-width: 12.5rem;
--slash-menu-max-height: 18.75rem;
- background: var(--bg-elevated-default);
- color: var(--text-default-default);
+ background: var(--color-bg-elevated);
+ color: var(--color-text);
width: var(--slash-menu-width);
border-radius: var(--radius-large);
padding: var(--spacer-2);
@@ -29,7 +29,7 @@
.slash-menu-popup__group-title {
padding: 0 var(--spacer-1);
- color: var(--text-default-secondary);
+ color: var(--color-text-secondary);
font-size: var(--text-body-small-font-size);
line-height: var(--spacer-4);
}
@@ -38,7 +38,7 @@
all: unset;
padding: 0 var(--spacer-1);
box-sizing: border-box;
- color: var(--text-default-default);
+ color: var(--color-text);
display: flex;
align-items: center;
height: var(--spacer-4);
@@ -49,12 +49,12 @@
transition: background-color 0.15s cubic-bezier(0, 0.2, 0.2, 1);
.icon {
- color: var(--icon-default-secondary);
+ color: var(--color-icon-secondary);
}
}
.slash-menu-popup__item--selected {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
.slash-menu-popup__item-text {
diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.css b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.css
index e21b59c948a..003ea020364 100644
--- a/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.css
+++ b/packages/richtext-lexical/src/lexical/plugins/handles/AddBlockHandlePlugin/index.css
@@ -11,14 +11,14 @@
will-change: transform;
&:hover {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
.icon {
opacity: 1;
}
}
&:active {
- background-color: var(--bg-transparent-pressed);
+ background-color: var(--color-bg-transparent-pressed);
}
.icon {
diff --git a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.css b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.css
index 3bdf845c515..bfd46faedf0 100644
--- a/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.css
+++ b/packages/richtext-lexical/src/lexical/plugins/handles/DraggableBlockPlugin/index.css
@@ -9,21 +9,21 @@
left: 0;
top: 0;
will-change: transform;
- background-color: var(--bg-default);
+ background-color: var(--color-bg);
&:active {
cursor: grabbing;
}
&:hover {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
.icon {
opacity: 1;
}
}
&:active {
- background-color: var(--bg-default-pressed);
+ background-color: var(--color-bg-pressed);
}
.icon {
@@ -56,7 +56,7 @@
.draggable-block-target-line {
pointer-events: none;
- background: var(--border-selected);
+ background: var(--color-border-selected);
border-radius: var(--radius-small);
height: var(--spacer-1);
position: absolute;
diff --git a/packages/richtext-lexical/src/lexical/theme/EditorTheme.css b/packages/richtext-lexical/src/lexical/theme/EditorTheme.css
index 3e72d2230d6..abb5b199c41 100644
--- a/packages/richtext-lexical/src/lexical/theme/EditorTheme.css
+++ b/packages/richtext-lexical/src/lexical/theme/EditorTheme.css
@@ -21,6 +21,14 @@
color: var(--color-text);
}
+ .LexicalEditorTheme > :first-child {
+ margin-top: 0;
+ }
+
+ .LexicalEditorTheme > :last-child {
+ margin-bottom: 0;
+ }
+
.LexicalEditorTheme__ltr {
text-align: left;
}
@@ -46,7 +54,7 @@
color: var(--color-text);
margin-block: var(--spacer-3);
margin-inline: var(--spacer-1);
- border-inline-start-color: var(--border-default);
+ border-inline-start-color: var(--color-border);
border-inline-start-width: var(--spacer-1);
border-inline-start-style: solid;
padding-inline-start: var(--spacer-2-5);
@@ -167,8 +175,8 @@
}
.LexicalEditorTheme__textCode {
- border: var(--stroke-width-small) solid var(--border-default);
- color: var(--text-default);
+ border: var(--stroke-width-small) solid var(--color-border);
+ color: var(--color-text);
padding: var(--spacer-1);
font-family: 'SF Mono', Menlo, Consolas, Monaco, monospace;
font-size: var(--text-body-medium-font-size);
@@ -179,7 +187,7 @@
}
.LexicalEditorTheme__link {
- color: var(--text-brand);
+ color: var(--color-text-brand);
text-decoration: underline;
pointer-events: none;
}
@@ -195,7 +203,7 @@
position: absolute;
top: -2px;
width: var(--spacer-3);
- border-top: var(--stroke-width-small) solid var(--text-default);
+ border-top: var(--stroke-width-small) solid var(--color-text);
animation: CursorBlink 1.1s steps(2, start) infinite;
}
}
@@ -319,17 +327,17 @@
.LexicalEditorTheme__listItemUnchecked:focus:before,
.LexicalEditorTheme__listItemChecked:focus:before {
outline: 0;
- box-shadow: 0 0 0 2px var(--border-selected);
+ box-shadow: 0 0 0 2px var(--color-border-selected);
}
.LexicalEditorTheme__listItemUnchecked:before {
- border: 1px solid var(--text-default);
- background-color: var(--bg-default);
+ border: 1px solid var(--color-text);
+ background-color: var(--color-bg);
}
.LexicalEditorTheme__listItemChecked:before {
border: none;
- background-color: var(--bg-brand);
+ background-color: var(--color-bg-brand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.5839 3.72266C11.7371 3.49298 12.0476 3.43085 12.2773 3.58399C12.5069 3.73716 12.569 4.04762 12.416 4.27735L7.41596 11.7773C7.33289 11.9019 7.19778 11.9833 7.04877 11.998C6.8999 12.0126 6.75223 11.9593 6.64642 11.8535L3.64642 8.85352C3.4512 8.65826 3.45119 8.34174 3.64642 8.14649C3.84169 7.95133 4.15822 7.95128 4.35346 8.14649L6.92182 10.7148L11.5839 3.72266Z' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
@@ -347,5 +355,5 @@
}
.ContentEditable__root *::selection {
- background: var(--bg-selected-hover) !important;
+ background: var(--color-bg-selected-hover) !important;
}
diff --git a/packages/richtext-lexical/src/lexical/ui/ContentEditable.css b/packages/richtext-lexical/src/lexical/ui/ContentEditable.css
index d17d2854861..aaafd8ff26d 100644
--- a/packages/richtext-lexical/src/lexical/ui/ContentEditable.css
+++ b/packages/richtext-lexical/src/lexical/ui/ContentEditable.css
@@ -37,7 +37,7 @@
> .editor-scroller
> .editor
> .ContentEditable__root::before {
- border-left: 2px solid var(--border-danger);
+ border-left: 2px solid var(--color-border-danger);
}
}
@@ -47,7 +47,7 @@
> .editor-scroller
> .editor
> .ContentEditable__root::before {
- border-left: 2px solid var(--border-danger);
+ border-left: 2px solid var(--color-border-danger);
}
}
}
@@ -56,8 +56,8 @@
.rich-text-lexical {
&.error {
> .rich-text-lexical__wrap {
- background-color: var(--bg-danger-tertiary);
- border: var(--stroke-width-small) solid var(--border-danger);
+ background-color: var(--color-bg-danger-tertiary);
+ border: var(--stroke-width-small) solid var(--color-border-danger);
}
}
}
@@ -72,7 +72,7 @@
> .editor-scroller
> .editor
> .ContentEditable__root::before {
- border-left: 2px solid var(--border-danger);
+ border-left: 2px solid var(--color-border-danger);
}
}
}
@@ -81,11 +81,11 @@
.rich-text-lexical {
&.error {
> .rich-text-lexical__wrap {
- background-color: var(--bg-danger-tertiary);
- border: var(--stroke-width-small) solid var(--border-danger);
+ background-color: var(--color-bg-danger-tertiary);
+ border: var(--stroke-width-small) solid var(--color-border-danger);
&:hover {
- border-color: var(--border-danger);
+ border-color: var(--color-border-danger);
}
}
}
diff --git a/packages/ui/src/css/colors.css b/packages/ui/src/css/colors.css
index a79d88ff64a..db78f8152a0 100644
--- a/packages/ui/src/css/colors.css
+++ b/packages/ui/src/css/colors.css
@@ -5,250 +5,229 @@
:root {
/* Special */
- --special-bg-hover-on-light-canvas: var(--color-black-300);
+ --special-bg-hover-on-light-canvas: var(--ramp-black-300);
--special-text-highlight: var(--color-blue-300);
- --special-multiplayer-blue: var(--color-blue-600);
- --special-multiplayer-purple: var(--color-purple-500);
- --special-multiplayer-pink: var(--color-pink-500);
- --special-multiplayer-red: var(--color-red-500);
- --special-multiplayer-yellow: var(--color-yellow-500);
- --special-multiplayer-green: var(--color-green-500);
- --special-multiplayer-grey: var(--color-pale-blue-500);
-
- --special-text-on-multiplayer-blue: var(--color-white-1000);
- --special-text-on-multiplayer-purple: var(--color-white-1000);
- --special-text-on-multiplayer-pink: var(--color-white-1000);
- --special-text-on-multiplayer-red: var(--color-white-1000);
- --special-text-on-multiplayer-yellow: var(--color-black-800);
- --special-text-on-multiplayer-green: var(--color-white-1000);
- --special-text-on-multiplayer-grey: var(--color-white-1000);
+ --special-multiplayer-blue: var(--ramp-blue-600);
+ --special-multiplayer-purple: var(--ramp-purple-500);
+ --special-multiplayer-pink: var(--ramp-pink-500);
+ --special-multiplayer-red: var(--ramp-red-500);
+ --special-multiplayer-yellow: var(--ramp-yellow-500);
+ --special-multiplayer-green: var(--ramp-green-500);
+ --special-multiplayer-grey: var(--ramp-pale-blue-500);
+
+ --special-text-on-multiplayer-blue: var(--ramp-white-1000);
+ --special-text-on-multiplayer-purple: var(--ramp-white-1000);
+ --special-text-on-multiplayer-pink: var(--ramp-white-1000);
+ --special-text-on-multiplayer-red: var(--ramp-white-1000);
+ --special-text-on-multiplayer-yellow: var(--ramp-black-800);
+ --special-text-on-multiplayer-green: var(--ramp-white-1000);
+ --special-text-on-multiplayer-grey: var(--ramp-white-1000);
/* Fullscreen */
- --fullscreen-default-icon: var(--color-black-800);
- --fullscreen-default-icon-tertiary: var(--color-black-400);
+ --fullscreen-default-icon: var(--ramp-black-800);
+ --fullscreen-default-icon-tertiary: var(--ramp-black-400);
--fullscreen-special-autofill-highlight: rgba(13, 153, 255, 0.2);
}
/* ——————————————————————————————————————————————
Light Theme (default)
+
+ Naming rules (UI3 parity — matches fpl/tokens):
+ - Every semantic color is prefixed with `--color-`.
+ - The `default` category is implicit. `--color-bg-secondary` (not `--color-bg-default-secondary`).
+ - The `default` variant is implicit. `--color-bg` (not `--color-bg-default`); `--color-bg-brand` (not `--color-bg-brand-default`).
+ - `on{X}` is one segment. `--color-text-onbrand`, `--color-icon-ondisabled`.
+ - Palette tokens live in the `--ramp-*` namespace.
————————————————————————————————————————————— */
:root {
/* Background */
- --bg-brand-default: var(--color-blue-500);
- --bg-brand-hover: var(--color-blue-600);
- --bg-brand-pressed: var(--color-blue-700);
- --bg-brand-secondary: var(--color-blue-700);
- --bg-brand-tertiary: var(--color-blue-200);
- --bg-brand-tertiary-hover: var(--color-blue-300);
-
- --bg-component-default: var(--color-purple-500);
- --bg-component-tertiary: var(--color-purple-200);
- --bg-component-tertiary-hover: var(--color-purple-300);
-
- --bg-danger-default: var(--color-red-500);
- --bg-danger-hover: var(--color-red-600);
- --bg-danger-pressed: var(--color-red-700);
- --bg-danger-tertiary: var(--color-red-200);
- --bg-danger-tertiary-hover: var(--color-red-300);
- --bg-danger-tertiary-pressed: var(--color-red-400);
-
- --bg-default-default: var(--color-white-1000);
- --bg-default-hover: var(--color-grey-100);
- --bg-default-pressed: var(--color-grey-200);
- --bg-default-secondary: var(--color-grey-100);
- --bg-default-secondary-hover: var(--color-grey-200);
- --bg-default-secondary-pressed: var(--color-grey-300);
- --bg-default-tertiary: var(--color-grey-200);
-
- --bg-disabled-default: var(--color-grey-300);
-
- --bg-elevated-default: var(--color-white-1000);
-
- --bg-figjam-default: var(--color-purple-500);
- --bg-figjam-pressed: var(--color-purple-600);
-
- --bg-inverse-default: var(--color-grey-800);
- --bg-inverse-hover: var(--color-grey-700);
- --bg-inverse-pressed: var(--color-grey-600);
-
- --bg-menu-default: var(--color-grey-900);
- --bg-menu-hover: var(--color-grey-700);
- --bg-tooltip-default: var(--color-grey-900);
-
- --bg-selected-default: var(--color-blue-200);
- --bg-selected-hover: var(--color-blue-300);
- --bg-selected-pressed: var(--color-blue-400);
- --bg-selected-strong: var(--color-blue-500);
- --bg-selected-strong-hover: var(--color-blue-600);
- --bg-selected-strong-pressed: var(--color-blue-700);
-
- --bg-success-default: var(--color-green-500);
- --bg-success-hover: var(--color-green-600);
- --bg-success-pressed: var(--color-green-700);
- --bg-success-tertiary: var(--color-green-200);
- --bg-success-tertiary-hover: var(--color-green-300);
-
- --bg-transparent-hover: var(--color-black-100);
- --bg-transparent-pressed: var(--color-black-200);
-
- --bg-warning-default: var(--color-yellow-500);
- --bg-warning-tertiary: var(--color-yellow-200);
- --bg-warning-tertiary-hover: var(--color-yellow-300);
+ --color-bg-assistive: var(--ramp-pink-500);
+ --color-bg-assistive-hover: var(--ramp-pink-600);
+ --color-bg-assistive-pressed: var(--ramp-pink-600);
+ --color-bg-assistive-secondary: var(--ramp-pink-700);
+ --color-bg-assistive-tertiary: var(--ramp-pink-200);
+
+ --color-bg-brand: var(--ramp-blue-500);
+ --color-bg-brand-hover: var(--ramp-blue-600);
+ --color-bg-brand-pressed: var(--ramp-blue-700);
+ --color-bg-brand-secondary: var(--ramp-blue-700);
+ --color-bg-brand-tertiary: var(--ramp-blue-200);
+ --color-bg-brand-tertiary-hover: var(--ramp-blue-300);
+
+ --color-bg-component: var(--ramp-purple-500);
+ --color-bg-component-tertiary: var(--ramp-purple-200);
+ --color-bg-component-tertiary-hover: var(--ramp-purple-300);
+
+ --color-bg-danger: var(--ramp-red-500);
+ --color-bg-danger-hover: var(--ramp-red-600);
+ --color-bg-danger-pressed: var(--ramp-red-700);
+ --color-bg-danger-tertiary: var(--ramp-red-200);
+ --color-bg-danger-tertiary-hover: var(--ramp-red-300);
+ --color-bg-danger-tertiary-pressed: var(--ramp-red-400);
+
+ --color-bg: var(--ramp-white-1000);
+ --color-bg-hover: var(--ramp-grey-100);
+ --color-bg-pressed: var(--ramp-grey-200);
+ --color-bg-secondary: var(--ramp-grey-100);
+ --color-bg-secondary-hover: var(--ramp-grey-200);
+ --color-bg-secondary-pressed: var(--ramp-grey-300);
+ --color-bg-tertiary: var(--ramp-grey-200);
+
+ --color-bg-disabled: var(--ramp-grey-300);
+
+ --color-bg-elevated: var(--ramp-white-1000);
+
+ --color-bg-info: var(--ramp-blue-200);
+
+ --color-bg-inverse: var(--ramp-grey-800);
+ --color-bg-inverse-hover: var(--ramp-grey-700);
+ --color-bg-inverse-pressed: var(--ramp-grey-600);
+
+ --color-bg-menu: var(--ramp-grey-900);
+ --color-bg-tooltip: var(--ramp-grey-900);
+
+ --color-bg-selected: var(--ramp-blue-200);
+ --color-bg-selected-hover: var(--ramp-blue-300);
+ --color-bg-selected-pressed: var(--ramp-blue-400);
+ --color-bg-selected-strong: var(--ramp-blue-500);
+ --color-bg-selected-strong-hover: var(--ramp-blue-600);
+ --color-bg-selected-strong-pressed: var(--ramp-blue-700);
+
+ --color-bg-success: var(--ramp-green-500);
+ --color-bg-success-hover: var(--ramp-green-600);
+ --color-bg-success-pressed: var(--ramp-green-700);
+ --color-bg-success-tertiary: var(--ramp-green-200);
+ --color-bg-success-tertiary-hover: var(--ramp-green-300);
+
+ --color-bg-transparent-hover: var(--ramp-black-100);
+ --color-bg-transparent-pressed: var(--ramp-black-200);
+
+ --color-bg-warning: var(--ramp-yellow-500);
+ --color-bg-warning-tertiary: var(--ramp-yellow-200);
+ --color-bg-warning-tertiary-hover: var(--ramp-yellow-300);
/* Border */
- --border-brand-default: var(--color-blue-300);
- --border-brand-strong: var(--color-blue-600);
- --border-brand-onbrand-strong: var(--color-white-1000);
+ --color-border-assistive: var(--ramp-pink-300);
+ --color-border-assistive-strong: var(--ramp-pink-600);
+ --color-border-onassistive: var(--ramp-pink-600);
+ --color-border-onassistive-strong: var(--ramp-pink-700);
+
+ --color-border-brand: var(--ramp-blue-300);
+ --color-border-brand-strong: var(--ramp-blue-600);
+ --color-border-onbrand-strong: var(--ramp-white-1000);
- --border-component-default: var(--color-purple-300);
- --border-component-strong: var(--color-purple-600);
+ --color-border-component: var(--ramp-purple-300);
+ --color-border-component-strong: var(--ramp-purple-600);
- --border-danger-default: var(--color-red-300);
- --border-danger-strong: var(--color-red-600);
+ --color-border-danger: var(--ramp-red-300);
+ --color-border-danger-strong: var(--ramp-red-600);
- --border-default-default: var(--color-grey-200);
- --border-default-strong: var(--color-grey-800);
+ --color-border: var(--ramp-grey-200);
+ --color-border-strong: var(--ramp-grey-800);
- --border-disabled-default: var(--color-grey-200);
+ --color-border-disabled: var(--ramp-grey-200);
- --border-selected-default: var(--color-blue-500);
- --border-selected-strong: var(--color-blue-600);
+ --color-border-selected: var(--ramp-blue-500);
+ --color-border-selected-strong: var(--ramp-blue-600);
- --border-success-default: var(--color-green-300);
- --border-success-strong: var(--color-green-600);
+ --color-border-success: var(--ramp-green-300);
+ --color-border-success-strong: var(--ramp-green-600);
- --border-warning-default: var(--color-pale-yellow-300);
- --border-warning-strong: var(--color-yellow-1000);
+ --color-border-warning: var(--ramp-pale-yellow-300);
+ --color-border-warning-strong: var(--ramp-yellow-1000);
/* Icon */
- --icon-brand-default: var(--color-blue-600);
- --icon-brand-onbrand: var(--color-white-1000);
- --icon-brand-onbrand-secondary: var(--color-white-600);
+ --color-icon-assistive: var(--ramp-pink-600);
+ --color-icon-assistive-pressed: var(--ramp-pink-700);
+ --color-icon-onassistive: var(--ramp-white-1000);
+ --color-icon-onassistive-secondary: var(--ramp-white-600);
+ --color-icon-onassistive-tertiary: var(--ramp-white-400);
- --icon-component-default: var(--color-purple-600);
- --icon-component-pressed: var(--color-purple-700);
- --icon-component-secondary: var(--color-pale-purple-400);
- --icon-component-tertiary: var(--color-pale-purple-400);
- --icon-component-oncomponent: var(--color-white-1000);
+ --color-icon-brand: var(--ramp-blue-600);
+ --color-icon-onbrand: var(--ramp-white-1000);
+ --color-icon-onbrand-secondary: var(--ramp-white-600);
- --icon-danger-default: var(--color-red-600);
- --icon-danger-ondanger: var(--color-white-1000);
- --icon-danger-ondanger-secondary: var(--color-white-600);
+ --color-icon-component: var(--ramp-purple-600);
+ --color-icon-component-pressed: var(--ramp-purple-700);
+ --color-icon-component-secondary: var(--ramp-pale-purple-400);
+ --color-icon-component-tertiary: var(--ramp-pale-purple-400);
+ --color-icon-oncomponent: var(--ramp-white-1000);
- --icon-default-default: var(--color-black-800);
- --icon-default-hover: var(--color-black-800);
- --icon-default-secondary: var(--color-black-500);
- --icon-default-secondary-hover: var(--color-black-800);
- --icon-default-tertiary: var(--color-black-400);
+ --color-icon-danger: var(--ramp-red-600);
+ --color-icon-ondanger: var(--ramp-white-1000);
+ --color-icon-ondanger-secondary: var(--ramp-white-600);
- --icon-disabled-default: var(--color-black-400);
- --icon-disabled-ondisabled: var(--color-white-1000);
+ --color-icon: var(--ramp-black-800);
+ --color-icon-hover: var(--ramp-black-800);
+ --color-icon-secondary: var(--ramp-black-500);
+ --color-icon-secondary-hover: var(--ramp-black-800);
+ --color-icon-tertiary: var(--ramp-black-400);
- --icon-figjam-onfigjam: var(--color-white-1000);
+ --color-icon-disabled: var(--ramp-black-400);
+ --color-icon-ondisabled: var(--ramp-white-1000);
- --icon-inverse-oninverse: var(--color-white-800);
+ --color-icon-oninverse: var(--ramp-white-800);
- --icon-selected-onselected-strong: var(--color-white-1000);
- --icon-selected-default: var(--color-blue-600);
+ --color-icon-onselected-strong: var(--ramp-white-1000);
+ --color-icon-selected: var(--ramp-blue-600);
- --icon-success-onsuccess: var(--color-white-1000);
- --icon-success-onsuccess-secondary: var(--color-white-600);
- --icon-success-default: var(--color-green-600);
+ --color-icon-onsuccess: var(--ramp-white-1000);
+ --color-icon-onsuccess-secondary: var(--ramp-white-600);
+ --color-icon-success: var(--ramp-green-600);
- --icon-warning-default: var(--color-yellow-1000);
- --icon-warning-pressed: var(--color-yellow-1000);
+ --color-icon-warning: var(--ramp-yellow-1000);
+ --color-icon-warning-pressed: var(--ramp-yellow-1000);
/* Text */
- --text-brand-default: var(--color-blue-600);
- --text-brand-secondary: var(--color-blue-600);
- --text-brand-onbrand: var(--color-white-1000);
- --text-brand-onbrand-secondary: var(--color-white-600);
+ --color-text-assistive: var(--ramp-pink-600);
+ --color-text-assistive-pressed: var(--ramp-pink-700);
+ --color-text-onassistive: var(--ramp-white-1000);
+ --color-text-onassistive-secondary: var(--ramp-white-600);
+ --color-text-onassistive-tertiary: var(--ramp-white-400);
- --text-component-default: var(--color-purple-600);
- --text-component-pressed: var(--color-purple-700);
- --text-component-secondary: var(--color-pale-purple-400);
- --text-component-tertiary: var(--color-pale-purple-400);
- --text-component-oncomponent: var(--color-white-1000);
+ --color-text-brand: var(--ramp-blue-600);
+ --color-text-brand-secondary: var(--ramp-blue-600);
+ --color-text-onbrand: var(--ramp-white-1000);
+ --color-text-onbrand-secondary: var(--ramp-white-600);
- --text-danger-default: var(--color-red-600);
- --text-danger-secondary: var(--color-red-600);
- --text-danger-ondanger: var(--color-white-1000);
- --text-danger-ondanger-secondary: var(--color-white-600);
+ --color-text-component: var(--ramp-purple-600);
+ --color-text-component-pressed: var(--ramp-purple-700);
+ --color-text-component-secondary: var(--ramp-pale-purple-400);
+ --color-text-component-tertiary: var(--ramp-pale-purple-400);
+ --color-text-oncomponent: var(--ramp-white-1000);
- --text-default-default: var(--color-black-800);
- --text-default-secondary: var(--color-black-500);
- --text-default-tertiary: var(--color-black-400);
+ --color-text-danger: var(--ramp-red-600);
+ --color-text-danger-secondary: var(--ramp-red-600);
+ --color-text-ondanger: var(--ramp-white-1000);
+ --color-text-ondanger-secondary: var(--ramp-white-600);
- --text-disabled-default: var(--color-black-400);
- --text-disabled-ondisabled: var(--color-white-1000);
+ --color-text: var(--ramp-black-800);
+ --color-text-secondary: var(--ramp-black-500);
+ --color-text-tertiary: var(--ramp-black-400);
- --text-figjam-onfigjam: var(--color-white-1000);
+ --color-text-disabled: var(--ramp-black-400);
+ --color-text-ondisabled: var(--ramp-white-1000);
- --text-inverse-oninverse: var(--color-white-800);
- --text-inverse-oninverse-secondary: var(--color-white-600);
+ --color-text-oninverse: var(--ramp-white-800);
+ --color-text-oninverse-secondary: var(--ramp-white-600);
- --text-selected-onselected-strong: var(--color-white-1000);
- --text-selected-default: var(--color-blue-600);
+ --color-text-onselected-strong: var(--ramp-white-1000);
+ --color-text-selected: var(--ramp-blue-600);
- --text-success-onsuccess: var(--color-white-1000);
- --text-success-onsuccess-secondary: var(--color-white-600);
- --text-success-default: var(--color-green-600);
+ --color-text-onsuccess: var(--ramp-white-1000);
+ --color-text-onsuccess-secondary: var(--ramp-white-600);
+ --color-text-success: var(--ramp-green-600);
- --text-warning-onwarning: var(--color-black-800);
- --text-warning-default: var(--color-yellow-1000);
+ --color-text-onwarning: var(--ramp-black-800);
+ --color-text-warning: var(--ramp-yellow-1000);
/* Special (themed) */
- --special-bg-hover-transparent: var(--color-black-100);
+ --special-bg-hover-transparent: var(--ramp-black-100);
--special-bg-transparent: rgba(255, 255, 255, 0.6);
- --special-bg-transparent-secondary-hover: var(--color-black-200);
- --special-border-translucent: var(--color-black-200);
-
- /* ——————————————————————————————————————————————
- Canonical Shorthands
- Convenience aliases that follow the active theme.
- ————————————————————————————————————————————— */
-
- /* Background */
- --bg-default: var(--bg-default-default);
- --bg-secondary: var(--bg-default-secondary);
- --bg-hover: var(--bg-default-hover);
- --bg-selected: var(--bg-selected-default);
- --bg-menu: var(--bg-menu-default);
- --bg-brand: var(--bg-brand-default);
- --bg-figjam: var(--bg-figjam-default);
- --bg-danger: var(--bg-danger-default);
- --bg-warning: var(--bg-warning-default);
- --bg-success: var(--bg-success-default);
-
- /* Border */
- --border-default: var(--border-default-default);
- --border-strong: var(--border-default-strong);
- --border-onbrand-strong: var(--border-brand-onbrand-strong);
- --border-selected: var(--border-selected-default);
-
- /* Icon */
- --icon-default: var(--icon-default-default);
- --icon-secondary: var(--icon-default-secondary);
- --icon-tertiary: var(--icon-default-tertiary);
- --icon-onbrand: var(--icon-brand-onbrand);
- --icon-onbrand-secondary: var(--icon-brand-onbrand-secondary);
- --icon-brand: var(--icon-brand-default);
- --icon-danger: var(--icon-danger-default);
- --icon-warning: var(--icon-warning-default);
- --icon-success: var(--icon-success-default);
-
- /* Text */
- --text-default: var(--text-default-default);
- --text-secondary: var(--text-default-secondary);
- --text-tertiary: var(--text-default-tertiary);
- --text-onbrand: var(--text-brand-onbrand);
- --text-onbrand-secondary: var(--text-brand-onbrand-secondary);
- --text-brand: var(--text-brand-default);
- --text-danger: var(--text-danger-default);
- --text-warning: var(--text-warning-default);
- --text-success: var(--text-success-default);
+ --special-bg-transparent-secondary-hover: var(--ramp-black-200);
+ --special-border-translucent: var(--ramp-black-200);
/* Multiplayer */
--multiplayer-blue: var(--special-multiplayer-blue);
@@ -268,126 +247,132 @@
html[data-theme='dark'],
[data-theme='dark'] {
/* Background */
- --bg-brand-tertiary: var(--color-pale-blue-800);
- --bg-brand-tertiary-hover: var(--color-pale-blue-700);
+ --color-bg-assistive: var(--ramp-pink-500);
+ --color-bg-assistive-hover: var(--ramp-pink-600);
+ --color-bg-assistive-pressed: var(--ramp-pink-600);
+ --color-bg-assistive-secondary: var(--ramp-pink-700);
+ --color-bg-assistive-tertiary: var(--ramp-pink-800);
+
+ --color-bg-brand-tertiary: var(--ramp-pale-blue-800);
+ --color-bg-brand-tertiary-hover: var(--ramp-pale-blue-700);
- --bg-component-tertiary: var(--color-pale-purple-800);
- --bg-component-tertiary-hover: var(--color-pale-purple-700);
+ --color-bg-component-tertiary: var(--ramp-pale-purple-800);
+ --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
- --bg-danger-tertiary: var(--color-pale-red-800);
- --bg-danger-tertiary-hover: var(--color-pale-red-700);
- --bg-danger-tertiary-pressed: var(--color-pale-red-600);
+ --color-bg-danger-tertiary: var(--ramp-pale-red-800);
+ --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
+ --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);
- --bg-default-default: var(--color-grey-800);
- --bg-default-hover: var(--color-grey-700);
- --bg-default-pressed: var(--color-grey-600);
- --bg-default-secondary: var(--color-grey-700);
- --bg-default-secondary-hover: var(--color-grey-600);
- --bg-default-secondary-pressed: var(--color-grey-500);
- --bg-default-tertiary: var(--color-grey-600);
+ --color-bg: var(--ramp-grey-800);
+ --color-bg-hover: var(--ramp-grey-700);
+ --color-bg-pressed: var(--ramp-grey-600);
+ --color-bg-secondary: var(--ramp-grey-700);
+ --color-bg-secondary-hover: var(--ramp-grey-600);
+ --color-bg-secondary-pressed: var(--ramp-grey-500);
+ --color-bg-tertiary: var(--ramp-grey-600);
- --bg-disabled-default: var(--color-grey-500);
+ --color-bg-disabled: var(--ramp-grey-500);
- --bg-elevated-default: var(--color-grey-900);
+ --color-bg-elevated: var(--ramp-grey-900);
- --bg-inverse-default: var(--color-white-1000);
- --bg-inverse-hover: var(--color-grey-100);
- --bg-inverse-pressed: var(--color-grey-200);
+ --color-bg-inverse: var(--ramp-white-1000);
+ --color-bg-inverse-hover: var(--ramp-grey-100);
+ --color-bg-inverse-pressed: var(--ramp-grey-200);
- --bg-selected-default: var(--color-pale-blue-700);
- --bg-selected-hover: var(--color-pale-blue-600);
- --bg-selected-pressed: var(--color-pale-blue-700);
+ --color-bg-selected: var(--ramp-pale-blue-700);
+ --color-bg-selected-hover: var(--ramp-pale-blue-600);
+ --color-bg-selected-pressed: var(--ramp-pale-blue-700);
- --bg-success-tertiary: var(--color-pale-green-900);
- --bg-success-tertiary-hover: var(--color-pale-green-800);
+ --color-bg-success-tertiary: var(--ramp-pale-green-900);
+ --color-bg-success-tertiary-hover: var(--ramp-pale-green-800);
- --bg-transparent-hover: var(--color-white-100);
- --bg-transparent-pressed: var(--color-white-200);
+ --color-bg-transparent-hover: var(--ramp-white-100);
+ --color-bg-transparent-pressed: var(--ramp-white-200);
- --bg-warning-tertiary: var(--color-pale-yellow-800);
- --bg-warning-tertiary-hover: var(--color-pale-yellow-700);
+ --color-bg-warning-tertiary: var(--ramp-pale-yellow-800);
+ --color-bg-warning-tertiary-hover: var(--ramp-pale-yellow-700);
/* Border */
- --border-brand-default: var(--color-pale-blue-600);
- --border-brand-strong: var(--color-blue-400);
+ --color-border-brand: var(--ramp-pale-blue-600);
+ --color-border-brand-strong: var(--ramp-blue-400);
- --border-component-default: var(--color-pale-purple-700);
- --border-component-strong: var(--color-purple-300);
+ --color-border-component: var(--ramp-pale-purple-700);
+ --color-border-component-strong: var(--ramp-purple-300);
- --border-danger-default: var(--color-pale-red-700);
- --border-danger-strong: var(--color-red-400);
+ --color-border-danger: var(--ramp-pale-red-700);
+ --color-border-danger-strong: var(--ramp-red-400);
- --border-default-default: var(--color-grey-600);
- --border-default-strong: var(--color-white-800);
+ --color-border: var(--ramp-grey-600);
+ --color-border-strong: var(--ramp-white-800);
- --border-disabled-default: var(--color-grey-600);
+ --color-border-disabled: var(--ramp-grey-600);
- --border-selected-strong: var(--color-blue-400);
+ --color-border-selected-strong: var(--ramp-blue-400);
- --border-success-default: var(--color-pale-green-700);
- --border-success-strong: var(--color-green-400);
+ --color-border-success: var(--ramp-pale-green-700);
+ --color-border-success-strong: var(--ramp-green-400);
- --border-warning-default: var(--color-pale-yellow-700);
- --border-warning-strong: var(--color-yellow-400);
+ --color-border-warning: var(--ramp-pale-yellow-700);
+ --color-border-warning-strong: var(--ramp-yellow-400);
/* Icon */
- --icon-brand-default: var(--color-blue-400);
+ --color-icon-brand: var(--ramp-blue-400);
- --icon-component-default: var(--color-purple-400);
- --icon-component-pressed: var(--color-purple-300);
- --icon-component-secondary: var(--color-pale-purple-500);
- --icon-component-tertiary: var(--color-pale-purple-500);
+ --color-icon-component: var(--ramp-purple-400);
+ --color-icon-component-pressed: var(--ramp-purple-300);
+ --color-icon-component-secondary: var(--ramp-pale-purple-500);
+ --color-icon-component-tertiary: var(--ramp-pale-purple-500);
- --icon-danger-default: var(--color-red-400);
+ --color-icon-danger: var(--ramp-red-400);
- --icon-default-default: var(--color-white-1000);
- --icon-default-hover: var(--color-white-1000);
- --icon-default-secondary: var(--color-white-500);
- --icon-default-secondary-hover: var(--color-white-1000);
- --icon-default-tertiary: var(--color-white-400);
+ --color-icon: var(--ramp-white-1000);
+ --color-icon-hover: var(--ramp-white-1000);
+ --color-icon-secondary: var(--ramp-white-500);
+ --color-icon-secondary-hover: var(--ramp-white-1000);
+ --color-icon-tertiary: var(--ramp-white-400);
- --icon-disabled-default: var(--color-white-400);
- --icon-disabled-ondisabled: var(--color-grey-800);
+ --color-icon-disabled: var(--ramp-white-400);
+ --color-icon-ondisabled: var(--ramp-grey-800);
- --icon-inverse-oninverse: var(--color-black-800);
+ --color-icon-oninverse: var(--ramp-black-800);
- --icon-selected-default: var(--color-blue-400);
+ --color-icon-selected: var(--ramp-blue-400);
- --icon-success-default: var(--color-green-400);
+ --color-icon-success: var(--ramp-green-400);
- --icon-warning-default: var(--color-yellow-400);
- --icon-warning-pressed: var(--color-yellow-400);
+ --color-icon-warning: var(--ramp-yellow-400);
+ --color-icon-warning-pressed: var(--ramp-yellow-400);
/* Text */
- --text-brand-default: var(--color-blue-400);
+ --color-text-brand: var(--ramp-blue-400);
- --text-component-default: var(--color-purple-400);
- --text-component-pressed: var(--color-purple-300);
- --text-component-secondary: var(--color-pale-purple-500);
- --text-component-tertiary: var(--color-pale-purple-500);
+ --color-text-component: var(--ramp-purple-400);
+ --color-text-component-pressed: var(--ramp-purple-300);
+ --color-text-component-secondary: var(--ramp-pale-purple-500);
+ --color-text-component-tertiary: var(--ramp-pale-purple-500);
- --text-danger-default: var(--color-red-400);
+ --color-text-danger: var(--ramp-red-400);
- --text-default-default: var(--color-white-1000);
- --text-default-secondary: var(--color-white-500);
- --text-default-tertiary: var(--color-white-400);
+ --color-text: var(--ramp-white-1000);
+ --color-text-secondary: var(--ramp-white-500);
+ --color-text-tertiary: var(--ramp-white-400);
- --text-disabled-default: var(--color-white-400);
- --text-disabled-ondisabled: var(--color-grey-800);
+ --color-text-disabled: var(--ramp-white-400);
+ --color-text-ondisabled: var(--ramp-grey-800);
- --text-inverse-oninverse: var(--color-black-800);
- --text-inverse-oninverse-secondary: var(--color-black-600);
+ --color-text-oninverse: var(--ramp-black-800);
+ --color-text-oninverse-secondary: var(--ramp-black-600);
- --text-selected-default: var(--color-blue-400);
+ --color-text-selected: var(--ramp-blue-400);
- --text-success-default: var(--color-green-400);
+ --color-text-success: var(--ramp-green-400);
- --text-warning-default: var(--color-yellow-400);
+ --color-text-warning: var(--ramp-yellow-400);
/* Special (themed) */
- --special-bg-hover-transparent: var(--color-white-100);
+ --special-bg-hover-transparent: var(--ramp-white-100);
--special-bg-transparent: rgba(0, 0, 0, 0.6);
- --special-bg-transparent-secondary-hover: var(--color-white-200);
- --special-border-translucent: var(--color-white-200);
+ --special-bg-transparent-secondary-hover: var(--ramp-white-200);
+ --special-border-translucent: var(--ramp-white-200);
}
}
diff --git a/packages/ui/src/css/design-tokens.css b/packages/ui/src/css/design-tokens.css
index 6254a84f5e5..d1b36410faf 100644
--- a/packages/ui/src/css/design-tokens.css
+++ b/packages/ui/src/css/design-tokens.css
@@ -1,116 +1,125 @@
@layer payload-default {
:root {
/* Black (opacity-based) */
- --color-black-100: rgba(0, 0, 0, 0.05);
- --color-black-200: rgba(0, 0, 0, 0.10);
- --color-black-300: rgba(0, 0, 0, 0.20);
- --color-black-400: rgba(0, 0, 0, 0.30);
- --color-black-500: rgba(0, 0, 0, 0.50);
- --color-black-600: rgba(0, 0, 0, 0.80);
- --color-black-800: rgba(0, 0, 0, 0.90);
+ --ramp-black-100: rgba(0, 0, 0, 0.05);
+ --ramp-black-200: rgba(0, 0, 0, 0.10);
+ --ramp-black-300: rgba(0, 0, 0, 0.20);
+ --ramp-black-400: rgba(0, 0, 0, 0.30);
+ --ramp-black-500: rgba(0, 0, 0, 0.50);
+ --ramp-black-600: rgba(0, 0, 0, 0.80);
+ --ramp-black-800: rgba(0, 0, 0, 0.90);
/* White (opacity-based) */
- --color-white-100: rgba(255, 255, 255, 0.05);
- --color-white-200: rgba(255, 255, 255, 0.10);
- --color-white-400: rgba(255, 255, 255, 0.40);
- --color-white-500: rgba(255, 255, 255, 0.70);
- --color-white-600: rgba(255, 255, 255, 0.80);
- --color-white-800: rgba(255, 255, 255, 0.90);
- --color-white-1000: #ffffff;
+ --ramp-white-100: rgba(255, 255, 255, 0.05);
+ --ramp-white-200: rgba(255, 255, 255, 0.10);
+ --ramp-white-400: rgba(255, 255, 255, 0.40);
+ --ramp-white-500: rgba(255, 255, 255, 0.70);
+ --ramp-white-600: rgba(255, 255, 255, 0.80);
+ --ramp-white-800: rgba(255, 255, 255, 0.90);
+ --ramp-white-1000: #ffffff;
/* Blue */
- --color-blue-200: #e5f4ff;
- --color-blue-300: #bde3ff;
- --color-blue-400: #80caff;
- --color-blue-500: #0d99ff;
- --color-blue-600: #007be5;
- --color-blue-700: #0768cf;
- --color-blue-800: #034ac1;
- --color-blue-900: #093077;
- --color-blue-1000: #0d193f;
+ --ramp-blue-200: #e5f4ff;
+ --ramp-blue-300: #bde3ff;
+ --ramp-blue-400: #80caff;
+ --ramp-blue-500: #0d99ff;
+ --ramp-blue-600: #007be5;
+ --ramp-blue-700: #0768cf;
+ --ramp-blue-800: #034ac1;
+ --ramp-blue-900: #093077;
+ --ramp-blue-1000: #0d193f;
/* Pale Blue */
- --color-pale-blue-500: #667799;
- --color-pale-blue-600: #536383;
- --color-pale-blue-700: #4a5878;
- --color-pale-blue-800: #394360;
+ --ramp-pale-blue-500: #667799;
+ --ramp-pale-blue-600: #536383;
+ --ramp-pale-blue-700: #4a5878;
+ --ramp-pale-blue-800: #394360;
/* Purple */
- --color-purple-100: #f9f5ff;
- --color-purple-200: #f1e5ff;
- --color-purple-300: #e4ccff;
- --color-purple-400: #d9b8ff;
- --color-purple-500: #9747ff;
- --color-purple-600: #8638e5;
- --color-purple-700: #7c2bda;
- --color-purple-800: #681abb;
- --color-purple-900: #4b0d87;
- --color-purple-1000: #2d0f46;
+ --ramp-purple-100: #f9f5ff;
+ --ramp-purple-200: #f1e5ff;
+ --ramp-purple-300: #e4ccff;
+ --ramp-purple-400: #d9b8ff;
+ --ramp-purple-500: #9747ff;
+ --ramp-purple-600: #8638e5;
+ --ramp-purple-700: #7c2bda;
+ --ramp-purple-800: #681abb;
+ --ramp-purple-900: #4b0d87;
+ --ramp-purple-1000: #2d0f46;
/* Pale Purple */
- --color-pale-purple-400: #c5b2dc;
- --color-pale-purple-500: #7f699b;
- --color-pale-purple-700: #604d75;
- --color-pale-purple-800: #473956;
+ --ramp-pale-purple-400: #c5b2dc;
+ --ramp-pale-purple-500: #7f699b;
+ --ramp-pale-purple-700: #604d75;
+ --ramp-pale-purple-800: #473956;
/* Pink */
- --color-pink-500: #ff24bd;
+ --ramp-pink-100: #fff0fe;
+ --ramp-pink-200: #ffe0fc;
+ --ramp-pink-300: #ffbdf2;
+ --ramp-pink-400: #ff99e0;
+ --ramp-pink-500: #ff24bd;
+ --ramp-pink-600: #ea10ac;
+ --ramp-pink-700: #cb0b96;
+ --ramp-pink-800: #971172;
+ --ramp-pink-900: #5f114c;
+ --ramp-pink-1000: #451138;
/* Grey */
- --color-grey-100: #f5f5f5;
- --color-grey-200: #e6e6e6;
- --color-grey-300: #d9d9d9;
- --color-grey-500: #757575;
- --color-grey-600: #444444;
- --color-grey-700: #383838;
- --color-grey-800: #2c2c2c;
- --color-grey-900: #1e1e1e;
+ --ramp-grey-100: #f5f5f5;
+ --ramp-grey-200: #e6e6e6;
+ --ramp-grey-300: #d9d9d9;
+ --ramp-grey-500: #757575;
+ --ramp-grey-600: #444444;
+ --ramp-grey-700: #383838;
+ --ramp-grey-800: #2c2c2c;
+ --ramp-grey-900: #1e1e1e;
/* Red */
- --color-red-100: #fff5f5;
- --color-red-200: #ffe2e0;
- --color-red-300: #ffc7c2;
- --color-red-400: #ffafa3;
- --color-red-500: #f24822;
- --color-red-600: #dc3412;
- --color-red-700: #bd2915;
- --color-red-800: #9f1f18;
- --color-red-900: #771208;
- --color-red-1000: #660e0b;
+ --ramp-red-100: #fff5f5;
+ --ramp-red-200: #ffe2e0;
+ --ramp-red-300: #ffc7c2;
+ --ramp-red-400: #ffafa3;
+ --ramp-red-500: #f24822;
+ --ramp-red-600: #dc3412;
+ --ramp-red-700: #bd2915;
+ --ramp-red-800: #9f1f18;
+ --ramp-red-900: #771208;
+ --ramp-red-1000: #660e0b;
/* Pale Red */
- --color-pale-red-600: #a55440;
- --color-pale-red-700: #864537;
- --color-pale-red-800: #60332a;
+ --ramp-pale-red-600: #a55440;
+ --ramp-pale-red-700: #864537;
+ --ramp-pale-red-800: #60332a;
/* Yellow */
- --color-yellow-200: #fff1c2;
- --color-yellow-300: #ffe8a3;
- --color-yellow-400: #ffd966;
- --color-yellow-500: #ffcd29;
- --color-yellow-1000: #b86200;
+ --ramp-yellow-200: #fff1c2;
+ --ramp-yellow-300: #ffe8a3;
+ --ramp-yellow-400: #ffd966;
+ --ramp-yellow-500: #ffcd29;
+ --ramp-yellow-1000: #b86200;
/* Pale Yellow */
- --color-pale-yellow-300: #f5dfa8;
- --color-pale-yellow-500: #ad7f00;
- --color-pale-yellow-700: #7a5800;
- --color-pale-yellow-800: #5c4100;
- --color-pale-yellow-900: #3a2a10;
+ --ramp-pale-yellow-300: #f5dfa8;
+ --ramp-pale-yellow-500: #ad7f00;
+ --ramp-pale-yellow-700: #7a5800;
+ --ramp-pale-yellow-800: #5c4100;
+ --ramp-pale-yellow-900: #3a2a10;
/* Green */
- --color-green-100: #edfcf0;
- --color-green-200: #d5f7da;
- --color-green-300: #aff4c6;
- --color-green-400: #85e0a3;
- --color-green-500: #14ae5c;
- --color-green-600: #009951;
- --color-green-700: #008043;
- --color-green-900: #024626;
- --color-green-1000: #083a23;
+ --ramp-green-100: #edfcf0;
+ --ramp-green-200: #d5f7da;
+ --ramp-green-300: #aff4c6;
+ --ramp-green-400: #85e0a3;
+ --ramp-green-500: #14ae5c;
+ --ramp-green-600: #009951;
+ --ramp-green-700: #008043;
+ --ramp-green-900: #024626;
+ --ramp-green-1000: #083a23;
/* Pale Green */
- --color-pale-green-700: #517361;
- --color-pale-green-800: #476656;
- --color-pale-green-900: #2f483c;
+ --ramp-pale-green-700: #517361;
+ --ramp-pale-green-800: #476656;
+ --ramp-pale-green-900: #2f483c;
}
}
diff --git a/packages/ui/src/css/forms.css b/packages/ui/src/css/forms.css
index c75b71df4b8..f7c2ae9c16b 100644
--- a/packages/ui/src/css/forms.css
+++ b/packages/ui/src/css/forms.css
@@ -2,10 +2,10 @@
.form-input {
width: 100%;
min-height: var(--spacer-5);
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
border: 1px solid transparent;
border-radius: var(--radius-medium);
- color: var(--text-default);
+ color: var(--color-text);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
@@ -23,17 +23,17 @@
}
&::placeholder {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
font-weight: var(--text-body-medium-font-weight);
font-size: var(--text-body-medium-font-size);
}
&:where(:hover:not(:focus):not(:disabled)) {
- border-color: var(--border-default);
+ border-color: var(--color-border);
}
&:focus {
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
border-radius: var(--radius-medium);
}
@@ -42,17 +42,17 @@
}
&:disabled {
- color: var(--text-disabled-default);
- border-color: var(--border-default);
+ color: var(--color-text-disabled);
+ border-color: var(--color-border);
background: none;
}
}
.form-input-error {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:focus {
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
}
}
@@ -60,7 +60,7 @@
display: flex;
position: relative;
align-items: stretch;
- background: var(--bg-default-secondary);
+ background: var(--color-bg-secondary);
border: 1px solid transparent;
border-radius: var(--radius-medium);
min-height: var(--spacer-5);
@@ -69,18 +69,18 @@
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&:where(:hover:not(:focus-within):not(:has(input:disabled))) {
- border-color: var(--border-default);
+ border-color: var(--color-border);
}
&:focus-within {
outline: none;
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
}
&:has(input:disabled) {
background: transparent;
- border-color: var(--border-disabled-default);
- color: var(--text-disabled-default);
+ border-color: var(--color-border-disabled);
+ color: var(--color-text-disabled);
}
input.form-input {
@@ -99,10 +99,10 @@
}
.form-input-group-error {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:focus-within {
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
}
}
}
diff --git a/packages/ui/src/css/utilities.css b/packages/ui/src/css/utilities.css
index 0a5fe293abe..8c9c95f7ffc 100644
--- a/packages/ui/src/css/utilities.css
+++ b/packages/ui/src/css/utilities.css
@@ -1,6 +1,6 @@
@layer payload-default {
:root {
- --accessibility-outline: 1px solid var(--border-selected-default);
+ --accessibility-outline: 1px solid var(--color-border-selected-strong);
--accessibility-outline-offset: 1px;
}
diff --git a/packages/ui/src/elements/AddNewRelation/index.css b/packages/ui/src/elements/AddNewRelation/index.css
index 1f2cb90f29e..0d0aca17851 100644
--- a/packages/ui/src/elements/AddNewRelation/index.css
+++ b/packages/ui/src/elements/AddNewRelation/index.css
@@ -18,15 +18,15 @@
height: var(--spacer-5);
padding: var(--spacer-1);
margin: 0;
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
border: none;
border-radius: var(--radius-medium);
- color: var(--icon-default);
+ color: var(--color-icon);
cursor: pointer;
transition: background-color 100ms;
&:hover {
- background: var(--bg-default-secondary-hover);
+ background: var(--color-bg-secondary-hover);
}
&:focus-visible {
diff --git a/packages/ui/src/elements/AppHeader/index.css b/packages/ui/src/elements/AppHeader/index.css
index 8e26c77a907..c8b2c3e0441 100644
--- a/packages/ui/src/elements/AppHeader/index.css
+++ b/packages/ui/src/elements/AppHeader/index.css
@@ -116,7 +116,7 @@
right: 0;
width: var(--base);
height: var(--base);
- background: linear-gradient(to right, transparent, var(--bg-default));
+ background: linear-gradient(to right, transparent, var(--color-bg));
}
.app-header__actions {
diff --git a/packages/ui/src/elements/Banner/index.css b/packages/ui/src/elements/Banner/index.css
index 94111e09067..3b497c10997 100644
--- a/packages/ui/src/elements/Banner/index.css
+++ b/packages/ui/src/elements/Banner/index.css
@@ -8,8 +8,8 @@
letter-spacing: var(--text-letter-spacing);
border-radius: var(--radius-medium);
padding: var(--spacer-2) var(--spacer-2-5);
- color: var(--text-default-default);
- background: var(--bg-default-secondary);
+ color: var(--color-text);
+ background: var(--color-bg-secondary);
}
.banner--has-action {
@@ -17,11 +17,11 @@
text-decoration: none;
&:hover {
- background: var(--bg-default-hover);
+ background: var(--color-bg-hover);
}
&:active {
- background: var(--bg-default-pressed);
+ background: var(--color-bg-pressed);
}
}
@@ -36,41 +36,41 @@
}
.banner--type-error {
- background: var(--bg-danger-tertiary);
- color: var(--text-default-default);
+ background: var(--color-bg-danger-tertiary);
+ color: var(--color-text);
&.banner--has-action:hover {
- background: var(--bg-danger-tertiary-hover);
+ background: var(--color-bg-danger-tertiary-hover);
}
&.banner--has-action:active {
- background: var(--bg-danger-tertiary-pressed);
+ background: var(--color-bg-danger-tertiary-pressed);
}
}
.banner--type-success {
- background: var(--bg-success-tertiary);
- color: var(--text-success-default);
+ background: var(--color-bg-success-tertiary);
+ color: var(--color-text-success);
&.banner--has-action:hover {
- background: var(--bg-success-tertiary-hover);
+ background: var(--color-bg-success-tertiary-hover);
}
&.banner--has-action:active {
- background: var(--bg-success-tertiary-pressed);
+ background: var(--color-bg-success-tertiary-pressed);
}
}
.banner--type-info {
- background: var(--bg-brand-tertiary);
- color: var(--text-brand-default);
+ background: var(--color-bg-brand-tertiary);
+ color: var(--color-text-brand);
&.banner--has-action:hover {
- background: var(--bg-brand-tertiary-hover);
+ background: var(--color-bg-brand-tertiary-hover);
}
&.banner--has-action:active {
- background: var(--bg-brand-tertiary-pressed);
+ background: var(--color-bg-brand-tertiary-pressed);
}
}
}
diff --git a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx
index 2de14fba746..0a342136b1c 100644
--- a/packages/ui/src/elements/CodeEditor/CodeEditor.tsx
+++ b/packages/ui/src/elements/CodeEditor/CodeEditor.tsx
@@ -45,8 +45,8 @@ function definePayloadThemes(monaco: Monaco) {
'editor.lineHighlightBackground': '#00000000',
'editor.lineHighlightBorder': '#00000000',
'editorGutter.background': '#00000000',
- 'editorLineNumber.activeForeground': '#ffffffb3', // var(--text-default-secondary) - white at 70% opacity
- 'editorLineNumber.foreground': '#ffffffb3', // var(--text-default-secondary) - white at 70% opacity
+ 'editorLineNumber.activeForeground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity
+ 'editorLineNumber.foreground': '#ffffffb3', // var(--color-text-secondary) - white at 70% opacity
},
inherit: true,
rules: [],
diff --git a/packages/ui/src/elements/CodeEditor/index.css b/packages/ui/src/elements/CodeEditor/index.css
index 26bb6e085cd..aca224cc024 100644
--- a/packages/ui/src/elements/CodeEditor/index.css
+++ b/packages/ui/src/elements/CodeEditor/index.css
@@ -8,15 +8,15 @@
-webkit-appearance: none;
/* Theme */
- background: var(--bg-default-secondary);
- border: 1px solid var(--border-default-default);
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
box-shadow: none;
/* Typography */
font-family: var(--font-mono);
font-size: var(--text-body);
- color: var(--text-default-primary);
+ color: var(--color-text-default-primary);
/* Transitions */
transition-property: border, box-shadow, background-color;
@@ -24,12 +24,12 @@
transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
&:focus-within {
- border-color: var(--border-selected-strong);
+ border-color: var(--color-border-selected-strong);
}
&.read-only {
- background: var(--bg-default-default);
- border-color: var(--border-default-default);
+ background: var(--color-bg);
+ border-color: var(--color-border);
}
/* Monaco editor resets */
diff --git a/packages/ui/src/elements/Collapsible/index.css b/packages/ui/src/elements/Collapsible/index.css
index 7c743327c6f..5403601ce17 100644
--- a/packages/ui/src/elements/Collapsible/index.css
+++ b/packages/ui/src/elements/Collapsible/index.css
@@ -2,7 +2,7 @@
.collapsible {
position: relative;
border-radius: var(--radius-medium);
- background: var(--bg-default-default);
+ background: var(--color-bg);
}
.collapsible__toggle-wrap {
@@ -11,8 +11,8 @@
padding: 0 var(--spacer-1) 0 var(--spacer-2);
display: flex;
align-items: center;
- background: var(--bg-default-secondary);
- border: 1px solid var(--border-default-default);
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
height: var(--spacer-5);
z-index: 2;
@@ -21,7 +21,7 @@
&:not(.toggle-disabled):hover:not(
:has(.section-title__input:hover, .section-title__input:focus)
) {
- background: var(--bg-default-secondary-hover);
+ background: var(--color-bg-secondary-hover);
}
&.toggle-disabled {
@@ -52,7 +52,7 @@
width: var(--spacer-3);
height: var(--spacer-3);
.fill {
- fill: var(--icon-tertiary);
+ fill: var(--color-icon-tertiary);
}
}
}
@@ -77,7 +77,7 @@
}
.collapsible .row-label {
- color: var(--text-default-default);
+ color: var(--color-text);
letter-spacing: var(--text-letter-spacing);
white-space: nowrap;
overflow: hidden;
@@ -86,11 +86,11 @@
}
.collapsible--style-error > .collapsible__toggle-wrap {
- background-color: var(--bg-danger-tertiary);
- border-color: var(--border-danger-strong);
+ background-color: var(--color-bg-danger-tertiary);
+ border-color: var(--color-border-danger-strong);
&:hover:not(:has(.section-title__input:hover, .section-title__input:focus)) {
- background: var(--bg-danger-tertiary-hover);
+ background: var(--color-bg-danger-tertiary-hover);
}
}
@@ -172,26 +172,26 @@
}
.collapsible__toggle-wrap:hover .collapsible__indicator {
- color: var(--icon-default-default);
+ color: var(--color-icon);
}
.collapsible__indicator:hover {
- background: var(--bg-transparent-hover);
+ background: var(--color-bg-transparent-hover);
}
.collapsible__indicator:focus-visible {
- border: 1px solid var(--border-selected-strong);
+ border: 1px solid var(--color-border-selected-strong);
border-radius: var(--radius-medium, 0.3125rem);
- background: var(--bg-default-secondary);
+ background: var(--color-bg-secondary);
}
.collapsible__indicator:active {
- background: var(--bg-transparent-pressed);
+ background: var(--color-bg-transparent-pressed);
}
.collapsible__content {
- background-color: var(--bg-default-default);
- border: 1px solid var(--border-default-default);
+ background-color: var(--color-bg);
+ border: 1px solid var(--color-border);
border-top: none;
border-radius: 0 0 var(--radius-medium) var(--radius-medium);
padding: var(--spacer-3);
@@ -199,11 +199,11 @@
}
.collapsible--style-error .collapsible__content {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
.collapsible--style-error .collapsible:not(.collapsible--style-error) .collapsible__content {
- border-color: var(--border-default-default);
+ border-color: var(--color-border);
}
@media (max-width: 768px) {
diff --git a/packages/ui/src/elements/DatePicker/index.css b/packages/ui/src/elements/DatePicker/index.css
index 45bf694b45d..5ab0e2bdced 100644
--- a/packages/ui/src/elements/DatePicker/index.css
+++ b/packages/ui/src/elements/DatePicker/index.css
@@ -17,8 +17,8 @@
font-weight: var(--text-body-medium-font-weight);
line-height: var(--text-body-medium-line-height);
letter-spacing: var(--text-letter-spacing);
- background-color: var(--bg-default-default);
- color: var(--text-default);
+ background-color: var(--color-bg);
+ color: var(--color-text);
border: none;
border-radius: var(--radius-large);
display: inline-flex;
@@ -92,7 +92,7 @@
.react-datepicker-time__header {
margin-top: 0;
- color: var(--text-default);
+ color: var(--color-text);
font-family: var(--text-body-medium-strong-font-family);
font-size: var(--text-body-medium-strong-font-size);
font-weight: var(--text-body-medium-strong-font-weight);
@@ -116,7 +116,7 @@
.react-datepicker-year-header {
padding: var(--spacer-2-5) 0;
font-weight: var(--text-body-medium-strong-font-weight);
- color: var(--text-default);
+ color: var(--color-text);
width: 100%;
display: flex;
justify-content: center;
@@ -127,13 +127,13 @@
width: 100%;
margin: 0;
height: var(--spacer-4);
- border: 1px solid var(--border-default);
- background: var(--bg-default-default);
+ border: 1px solid var(--color-border);
+ background: var(--color-bg);
border-radius: var(--radius-medium);
outline: none;
cursor: pointer;
padding: 0 var(--spacer-2);
- color: var(--text-default);
+ color: var(--color-text);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
@@ -143,8 +143,8 @@
padding-right: var(--spacer-4);
option {
- background-color: var(--bg-default-default);
- color: var(--text-default);
+ background-color: var(--color-bg);
+ color: var(--color-text);
}
}
@@ -167,16 +167,16 @@
height: var(--spacer-4);
width: var(--spacer-4);
overflow: hidden;
- color: var(--icon-default);
+ color: var(--color-icon);
border-radius: var(--radius-medium);
flex-shrink: 0;
.icon--chevron .fill {
- fill: var(--icon-default);
+ fill: var(--color-icon);
}
&:hover {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
}
@@ -237,7 +237,7 @@
transform: translateY(-50%);
width: 8px;
height: 5px;
- background-color: var(--icon-default);
+ background-color: var(--color-icon);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M4.38935 0.146345C4.58463 -0.0487137 4.90119 -0.048849 5.09638 0.146345C5.29132 0.34156 5.29136 0.658183 5.09638 0.853376L2.97529 2.97447C2.78011 3.16965 2.46354 3.16947 2.26826 2.97447L0.146188 0.853376C-0.0487296 0.65818 -0.0487291 0.341541 0.146188 0.146345C0.341468 -0.0487138 0.659001 -0.0488494 0.854196 0.146345L2.62177 1.91392L4.38935 0.146345Z' fill='black'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-size: contain;
@@ -270,7 +270,7 @@
.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
- border-color: var(--icon-secondary);
+ border-color: var(--color-icon-secondary);
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
@@ -286,7 +286,7 @@
.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
- background-color: var(--bg-elevated-default);
+ background-color: var(--color-bg-elevated);
position: absolute;
width: 50%;
left: 25%;
@@ -294,7 +294,7 @@
z-index: 1;
text-align: center;
border-radius: var(--radius-medium);
- border: 1px solid var(--border-default);
+ border: 1px solid var(--color-border);
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.15),
0 10px 24px rgba(0, 0, 0, 0.18);
@@ -319,7 +319,7 @@
display: block;
margin-left: auto;
margin-right: auto;
- color: var(--text-default);
+ color: var(--color-text);
&:first-of-type {
border-top-left-radius: var(--radius-medium);
@@ -333,7 +333,7 @@
}
&:hover {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
}
@@ -368,7 +368,7 @@
}
.react-datepicker__monthPicker {
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
}
.react-datepicker__month-text {
@@ -408,7 +408,7 @@
background-color: transparent;
padding: var(--spacer-2);
padding-bottom: 0;
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
width: 100%;
order: 3;
}
@@ -420,7 +420,7 @@
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
- color: var(--text-default);
+ color: var(--color-text);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -436,7 +436,7 @@
}
.react-datepicker__day-name {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
width: 1.5rem;
height: 2rem;
margin: 0 var(--spacer-1);
@@ -462,11 +462,11 @@
border-radius: var(--radius-medium);
&:hover {
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
&:active {
- background-color: var(--bg-default-pressed);
+ background-color: var(--color-bg-pressed);
}
}
@@ -483,11 +483,11 @@
width: 3px;
height: 3px;
border-radius: var(--radius-full);
- background-color: var(--bg-brand);
+ background-color: var(--color-bg-brand);
}
&.react-datepicker__day--selected::after {
- background-color: var(--icon-onbrand-secondary);
+ background-color: var(--color-icon-onbrand-secondary);
}
}
@@ -509,12 +509,12 @@
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
- background-color: var(--bg-selected-strong);
- color: var(--text-selected-onselected-strong);
+ background-color: var(--color-bg-selected-strong);
+ color: var(--color-text-onselected-strong);
font-weight: var(--text-body-medium-font-weight);
&:hover {
- background-color: var(--bg-selected-strong-hover);
+ background-color: var(--color-bg-selected-strong-hover);
}
}
@@ -522,11 +522,11 @@
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
- background-color: var(--bg-selected);
- color: var(--text-default);
+ background-color: var(--color-bg-selected);
+ color: var(--color-text);
&:hover {
- background-color: var(--bg-selected-hover);
+ background-color: var(--color-bg-selected-hover);
}
}
@@ -564,7 +564,7 @@
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--in-range
) {
- background-color: var(--bg-selected);
+ background-color: var(--color-bg-selected);
}
/* Disabled days */
@@ -573,7 +573,7 @@
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
cursor: default;
- color: var(--text-disabled-default);
+ color: var(--color-text-disabled);
&:hover {
background-color: transparent;
@@ -585,7 +585,7 @@
————————————————————————————————————————————— */
.react-datepicker__week-number {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
display: inline-block;
width: 2rem;
line-height: 2rem;
@@ -609,13 +609,13 @@
.react-datepicker__time-container {
float: right;
- border-left: 1px solid var(--border-default);
+ border-left: 1px solid var(--color-border);
width: var(--time-column-width);
.react-datepicker__time {
position: relative;
background: transparent;
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
border-bottom-right-radius: var(--radius-large);
.react-datepicker__time-box {
@@ -650,40 +650,40 @@
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
line-height: var(--text-body-medium-line-height);
- color: var(--text-default);
+ color: var(--color-text);
margin: 0 var(--spacer-2);
border-radius: var(--radius-medium);
&:hover {
cursor: pointer;
- background-color: var(--bg-hover);
+ background-color: var(--color-bg-hover);
}
&:active {
- background-color: var(--bg-default-pressed);
+ background-color: var(--color-bg-pressed);
}
&:focus {
- background-color: var(--bg-selected);
+ background-color: var(--color-bg-selected);
outline: none;
}
}
li.react-datepicker__time-list-item--selected {
- background-color: var(--bg-brand-default);
- color: var(--text-onbrand);
+ background-color: var(--color-bg-brand);
+ color: var(--color-text-onbrand);
&:hover {
- background-color: var(--bg-brand-hover);
+ background-color: var(--color-bg-brand-hover);
}
&:focus {
- background-color: var(--bg-brand-default);
+ background-color: var(--color-bg-brand);
}
}
li.react-datepicker__time-list-item--disabled {
- color: var(--text-disabled-default);
+ color: var(--color-text-disabled);
&:hover {
cursor: default;
@@ -716,8 +716,8 @@
————————————————————————————————————————————— */
.react-datepicker__today-button {
- background: var(--bg-secondary);
- border-top: 1px solid var(--border-default);
+ background: var(--color-bg-secondary);
+ border-top: 1px solid var(--color-border);
cursor: pointer;
text-align: center;
font-weight: var(--text-body-medium-strong-font-weight);
@@ -788,7 +788,7 @@
.date-time-picker .icon--calendar,
.date-time-picker .icon--x {
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
height: auto;
}
@@ -816,51 +816,49 @@
}
/* ——— Input field ——— */
- .date-time-picker {
- input {
- font-family: var(--text-body-medium-font-family);
- font-size: var(--text-body-medium-font-size);
+ .date-time-picker .react-datepicker__input-container input {
+ font-family: var(--text-body-medium-font-family);
+ font-size: var(--text-body-medium-font-size);
+ font-weight: var(--text-body-medium-font-weight);
+ line-height: var(--text-body-medium-line-height);
+ width: 100%;
+ min-height: var(--spacer-5);
+ border: 1px solid transparent;
+ border-radius: var(--radius-medium);
+ background: var(--color-bg-secondary);
+ color: var(--color-text);
+ padding-block: calc(var(--spacer-1));
+ padding-inline: var(--spacer-2) var(--spacer-5); /* space for calendar icon */
+
+ &::placeholder {
+ color: var(--color-text-tertiary);
font-weight: var(--text-body-medium-font-weight);
- line-height: var(--text-body-medium-line-height);
- width: 100%;
- min-height: var(--spacer-5);
- border: 1px solid transparent;
- border-radius: var(--radius-medium);
- background: var(--bg-default-secondary);
- color: var(--text-default);
- padding-block: calc(var(--spacer-1));
- padding-inline: var(--spacer-2) var(--spacer-5); /* space for calendar icon */
-
- &::placeholder {
- color: var(--text-tertiary);
- font-weight: var(--text-body-medium-font-weight);
- }
+ }
- &:hover:not(:focus) {
- border-color: var(--border-default);
- }
+ &:hover:not(:focus) {
+ border-color: var(--color-border);
+ }
- &:focus {
- border-color: var(--border-selected-default);
- outline: none;
- }
+ &:focus {
+ border-color: var(--color-border-selected);
+ outline: none;
+ }
- &:disabled {
- background: none;
- /* color: var(--text-disabled-default); */
- border-color: var(--border-disabled-default);
- }
+ &:disabled {
+ background: none;
+ /* color: var(--color-text-disabled); */
+ border-color: var(--color-border-disabled);
}
}
/* ——— Disabled calendar icon state ——— */
.date-time-picker:has(input:disabled) .icon--calendar {
- color: var(--icon-disabled-default);
+ color: var(--color-icon-disabled);
}
/* ——— Error state ——— */
.date-time-picker--has-error .react-datepicker__input-container input {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
border-width: 2px;
padding: calc(var(--spacer-1) - 1px) calc(var(--spacer-2-5) - 1px);
padding-right: calc(2.25rem - 1px);
@@ -887,7 +885,7 @@
.date-time-picker .react-datepicker__time-container {
width: auto;
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
}
.date-time-picker .react-datepicker__header--time {
diff --git a/packages/ui/src/elements/Drawer/index.css b/packages/ui/src/elements/Drawer/index.css
index 59d1393b227..8f85c906d91 100644
--- a/packages/ui/src/elements/Drawer/index.css
+++ b/packages/ui/src/elements/Drawer/index.css
@@ -99,8 +99,8 @@
display: flex;
align-items: center;
width: 100%;
- border-bottom: 1px solid var(--border-default);
- background: var(--bg-default);
+ border-bottom: 1px solid var(--color-border);
+ background: var(--color-bg);
}
.drawer__header__title {
diff --git a/packages/ui/src/elements/ErrorPill/index.css b/packages/ui/src/elements/ErrorPill/index.css
index 62248241ebe..bb658724963 100644
--- a/packages/ui/src/elements/ErrorPill/index.css
+++ b/packages/ui/src/elements/ErrorPill/index.css
@@ -12,8 +12,8 @@
font-weight: var(--text-body-medium-font-weight);
letter-spacing: var(--text-letter-spacing);
text-align: center;
- background: var(--bg-danger-default);
- color: var(--text-danger-ondanger);
+ background: var(--color-bg-danger);
+ color: var(--color-text-ondanger);
height: var(--spacer-3);
}
diff --git a/packages/ui/src/elements/Hierarchy/Search/index.css b/packages/ui/src/elements/Hierarchy/Search/index.css
index 657cf115581..713331e87ea 100644
--- a/packages/ui/src/elements/Hierarchy/Search/index.css
+++ b/packages/ui/src/elements/Hierarchy/Search/index.css
@@ -9,7 +9,7 @@
display: flex;
align-items: center;
height: var(--spacer-4);
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
border-radius: var(--radius-medium);
border: 1px solid transparent;
padding-inline-end: var(--spacer-2);
@@ -32,7 +32,7 @@
flex-shrink: 0;
width: var(--spacer-4);
height: var(--spacer-4);
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
}
.hierarchy-search-input__input {
@@ -43,7 +43,7 @@
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
line-height: var(--text-body-medium-line-height);
- color: var(--text-default);
+ color: var(--color-text);
outline: none;
border: none;
padding: 0;
@@ -52,7 +52,7 @@
}
&::placeholder {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
}
}
@@ -72,7 +72,7 @@
border: none;
background: transparent;
cursor: pointer;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
padding: 0;
width: var(--spacer-3);
height: var(--spacer-3);
@@ -80,16 +80,16 @@
&:hover,
&:focus-visible {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
.hierarchy-search-input__filter--active {
- color: var(--icon-success-default);
+ color: var(--color-icon-success);
&:hover,
&:focus-visible {
- color: var(--icon-success-default);
+ color: var(--color-icon-success);
}
}
@@ -114,7 +114,7 @@
}
.hierarchy-search-results__empty {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
padding: var(--spacer-1) 0;
}
@@ -124,12 +124,12 @@
padding-right: var(--nav-padding-inline-end);
border: none;
background: transparent;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
cursor: pointer;
font-size: var(--text-body-small-font-size);
&:hover {
- color: var(--text-default);
+ color: var(--color-text);
}
&:disabled {
@@ -153,17 +153,17 @@
border: 1px solid transparent;
&:hover .hierarchy-search-result-item__title {
- color: var(--text-default);
+ color: var(--color-text);
text-decoration: underline;
}
&:hover .hierarchy-search-result-item__path {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
&:focus {
outline: none;
- border-color: var(--border-strong);
+ border-color: var(--color-border-strong);
}
&:focus .hierarchy-search-result-item__title {
@@ -172,12 +172,12 @@
}
.hierarchy-search-result-item__title {
- color: var(--text-default);
+ color: var(--color-text);
line-height: 1;
}
.hierarchy-search-result-item__path {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
line-height: 1;
}
}
diff --git a/packages/ui/src/elements/Hierarchy/Tree/TreeNode/index.css b/packages/ui/src/elements/Hierarchy/Tree/TreeNode/index.css
index 364d16bc106..770db7430b2 100644
--- a/packages/ui/src/elements/Hierarchy/Tree/TreeNode/index.css
+++ b/packages/ui/src/elements/Hierarchy/Tree/TreeNode/index.css
@@ -31,14 +31,14 @@
align-items: center;
justify-content: center;
cursor: default;
- color: var(--icon-tertiary);
+ color: var(--color-icon-tertiary);
width: var(--tree-chevron-width);
height: var(--tree-chevron-width);
flex-shrink: 0;
border-radius: var(--radius-medium);
&:hover {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
diff --git a/packages/ui/src/elements/Hierarchy/Tree/index.css b/packages/ui/src/elements/Hierarchy/Tree/index.css
index 850f8dec5e9..fcccd173c67 100644
--- a/packages/ui/src/elements/Hierarchy/Tree/index.css
+++ b/packages/ui/src/elements/Hierarchy/Tree/index.css
@@ -30,7 +30,7 @@
padding: 0;
&:hover {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
}
@@ -54,7 +54,7 @@
.tree__empty {
padding: var(--spacer-2-5) var(--spacer-3);
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
font-size: var(--tree-font-size);
}
}
diff --git a/packages/ui/src/elements/InputStepper/index.css b/packages/ui/src/elements/InputStepper/index.css
index b60d45a6d48..11dab32df98 100644
--- a/packages/ui/src/elements/InputStepper/index.css
+++ b/packages/ui/src/elements/InputStepper/index.css
@@ -18,12 +18,12 @@
margin: 0;
border: none;
background: transparent;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
cursor: pointer;
transition: color 100ms;
&:hover:not(:disabled) {
- color: var(--icon-default);
+ color: var(--color-icon);
}
&:disabled {
diff --git a/packages/ui/src/elements/NavGroup/index.css b/packages/ui/src/elements/NavGroup/index.css
index 28f40818474..ee17ed3acc3 100644
--- a/packages/ui/src/elements/NavGroup/index.css
+++ b/packages/ui/src/elements/NavGroup/index.css
@@ -6,14 +6,14 @@
& + .nav-group {
margin-block-start: var(--spacer-2);
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
padding-top: var(--spacer-2-5);
}
}
.nav-group__toggle {
cursor: pointer;
- color: var(--text-default);
+ color: var(--color-text);
background: transparent;
border: 0;
width: calc(100% + var(--spacer-2));
@@ -32,7 +32,7 @@
&:hover,
&:focus-visible {
- color: var(--text-default);
+ color: var(--color-text);
.nav-group__indicator {
opacity: 1;
@@ -54,7 +54,7 @@
flex-shrink: 0;
width: var(--spacer-3);
height: var(--spacer-3);
- color: var(--icon-tertiary);
+ color: var(--color-icon-tertiary);
left: calc(-1 * var(--spacer-1));
opacity: 0;
transition: opacity 150ms ease;
diff --git a/packages/ui/src/elements/Popup/PopupButtonList/index.css b/packages/ui/src/elements/Popup/PopupButtonList/index.css
index f96dbb18543..f9e018540ab 100644
--- a/packages/ui/src/elements/Popup/PopupButtonList/index.css
+++ b/packages/ui/src/elements/Popup/PopupButtonList/index.css
@@ -35,7 +35,7 @@
height: 24px;
display: flex;
align-items: center;
- color: var(--text-default-default);
+ color: var(--color-text);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
@@ -50,8 +50,8 @@
}
.popup-button-list__button:hover {
outline: none;
- background-color: var(--bg-selected-strong);
- color: var(--text-selected-onselected-strong);
+ background-color: var(--color-bg-selected-strong);
+ color: var(--color-text-onselected-strong);
}
.popup-button-list__button-size--medium .popup-button-list__button {
@@ -68,13 +68,13 @@
.popup-button-list__disabled {
cursor: not-allowed;
- color: var(--text-disabled-default);
+ color: var(--color-text-disabled);
}
.popup-button-list__disabled:hover,
.popup-button-list__disabled:focus-visible,
.popup-button-list__disabled:focus-within {
background-color: transparent;
- color: var(--text-disabled-default);
+ color: var(--color-text-disabled);
}
}
diff --git a/packages/ui/src/elements/Popup/PopupTrigger/index.css b/packages/ui/src/elements/Popup/PopupTrigger/index.css
index 5307ce04d94..c1e6907ce11 100644
--- a/packages/ui/src/elements/Popup/PopupTrigger/index.css
+++ b/packages/ui/src/elements/Popup/PopupTrigger/index.css
@@ -16,11 +16,11 @@
}
.popup-button:hover:not(.popup-button--disabled) {
- background: var(--bg-transparent-hover);
+ background: var(--color-bg-transparent-hover);
}
.popup-button:active:not(.popup-button--disabled) {
- background: var(--bg-transparent-pressed);
+ background: var(--color-bg-transparent-pressed);
}
.popup-button--disabled {
diff --git a/packages/ui/src/elements/Popup/index.css b/packages/ui/src/elements/Popup/index.css
index b4146b4a5c6..70bbeb8c51e 100644
--- a/packages/ui/src/elements/Popup/index.css
+++ b/packages/ui/src/elements/Popup/index.css
@@ -23,8 +23,8 @@
position: absolute;
z-index: var(--z-popup);
- background: var(--bg-elevated-default);
- color: var(--text-default);
+ background: var(--color-bg-elevated);
+ color: var(--color-text);
border-radius: var(--radius-large);
padding: var(--spacer-2);
min-width: 80px;
diff --git a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.css b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.css
index 30bd976f660..0c711d3bd23 100644
--- a/packages/ui/src/elements/ReactSelect/ClearIndicator/index.css
+++ b/packages/ui/src/elements/ReactSelect/ClearIndicator/index.css
@@ -5,11 +5,11 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
transition: color 100ms;
&:hover {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
diff --git a/packages/ui/src/elements/ReactSelect/MultiValue/index.css b/packages/ui/src/elements/ReactSelect/MultiValue/index.css
index 2e23851eb60..3b57ae2cd6f 100644
--- a/packages/ui/src/elements/ReactSelect/MultiValue/index.css
+++ b/packages/ui/src/elements/ReactSelect/MultiValue/index.css
@@ -3,9 +3,9 @@
&.rs__multi-value {
display: flex;
padding: 0;
- border: 1px solid var(--border-default);
+ border: 1px solid var(--color-border);
border-radius: 0.1875rem;
- background: var(--bg-default);
+ background: var(--color-bg);
height: 1.25rem;
margin: 0;
transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
diff --git a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.css b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.css
index f94e7a6b990..4a25afb6297 100644
--- a/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.css
+++ b/packages/ui/src/elements/ReactSelect/MultiValueRemove/index.css
@@ -12,11 +12,11 @@
border: 1px solid transparent;
border-radius: var(--radius-small);
padding: 0;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
&:hover {
- color: var(--text-default);
- background: var(--bg-hover);
+ color: var(--color-text);
+ background: var(--color-bg-hover);
}
&:focus-visible {
diff --git a/packages/ui/src/elements/ReactSelect/ValueContainer/index.css b/packages/ui/src/elements/ReactSelect/ValueContainer/index.css
index 4b7fa77b179..47c20b69663 100644
--- a/packages/ui/src/elements/ReactSelect/ValueContainer/index.css
+++ b/packages/ui/src/elements/ReactSelect/ValueContainer/index.css
@@ -27,7 +27,7 @@
}
.value-container__label {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.react-select .rs__value-container--is-multi {
diff --git a/packages/ui/src/elements/ReactSelect/index.css b/packages/ui/src/elements/ReactSelect/index.css
index 6b4a24f56ee..0dc11fc334a 100644
--- a/packages/ui/src/elements/ReactSelect/index.css
+++ b/packages/ui/src/elements/ReactSelect/index.css
@@ -8,10 +8,10 @@
position: relative;
width: 100%;
min-height: var(--spacer-5);
- background: var(--bg-default-secondary);
+ background: var(--color-bg-secondary);
border: 1px solid transparent;
border-radius: var(--radius-medium);
- color: var(--text-default);
+ color: var(--color-text);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
@@ -28,7 +28,7 @@
gap: var(--spacer-1);
&.rs__control--is-focused {
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
}
&:has(.clear-indicator) {
@@ -36,12 +36,12 @@
}
&:hover:not(:focus-within) {
- border-color: var(--border-default);
+ border-color: var(--color-border);
}
}
.rs__placeholder {
- color: var(--text-default-tertiary);
+ color: var(--color-text-tertiary);
}
.rs__menu-notice {
@@ -66,7 +66,7 @@
}
.rs__input-container {
- color: var(--text-default);
+ color: var(--color-text);
height: var(--text-body-medium-line-height);
margin: 0;
padding: 0;
@@ -76,7 +76,7 @@
z-index: 4;
border-radius: var(--radius-medium);
box-shadow: var(--elevation-400-menu-panel);
- background: var(--bg-default);
+ background: var(--color-bg);
overflow: hidden;
}
@@ -94,7 +94,7 @@
}
.rs__group-heading {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-1);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
@@ -109,28 +109,33 @@
line-height: var(--text-body-medium-line-height);
padding-inline: var(--spacer-3) var(--spacer-1);
padding-block: var(--spacer-2);
- color: var(--text-default);
+ color: var(--color-text);
}
.rs__option--is-focused {
- background-color: var(--bg-default-secondary);
+ background-color: var(--color-bg-secondary);
}
.rs__option--is-selected {
- background-color: var(--bg-selected);
+ background-color: var(--color-bg-selected);
}
&.rs--is-disabled .rs__control {
- background: var(--bg-default);
- border-color: var(--border-default);
- color: var(--text-disabled-default);
+ background: var(--color-bg);
+ border-color: var(--color-border);
+ color: var(--color-text-disabled);
+ }
+
+ &.react-select--error .rs__control:not(.rs__control--is-focused) {
+ &:hover {
+ border-color: var(--color-border-danger-strong);
+ }
}
}
- .react-select--error,
- .react-select--error:hover {
+ .react-select--error {
div.rs__control {
- border: 1px solid var(--border-danger-strong);
+ border: 1px solid var(--color-border-danger-strong);
& > div.rs__indicator > button.dropdown-indicator[type='button'] {
border: none;
@@ -138,9 +143,13 @@
}
}
+ .react-select--error .rs__control:hover {
+ border-color: var(--color-border-danger-strong);
+ }
+
.react-select--error:focus-within {
div.rs__control {
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
}
}
}
diff --git a/packages/ui/src/elements/SidebarRow/index.css b/packages/ui/src/elements/SidebarRow/index.css
index ff59f3308dd..3f81059e6e4 100644
--- a/packages/ui/src/elements/SidebarRow/index.css
+++ b/packages/ui/src/elements/SidebarRow/index.css
@@ -32,17 +32,17 @@
color: inherit;
&:hover {
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
text-decoration: none;
}
}
.sidebar-row--selected {
font-weight: var(--text-body-medium-strong-font-weight);
- background: var(--bg-selected);
+ background: var(--color-bg-selected);
&:hover {
- background: var(--bg-selected);
+ background: var(--color-bg-selected);
}
}
@@ -51,7 +51,7 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
width: var(--spacer-3);
height: var(--spacer-3);
}
@@ -61,10 +61,10 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- color: var(--text-default);
+ color: var(--color-text);
}
.sidebar-row--selected > .sidebar-row__title {
- color: var(--text-default);
+ color: var(--color-text);
}
}
diff --git a/packages/ui/src/elements/Spinner/index.css b/packages/ui/src/elements/Spinner/index.css
index 757f40aefd0..bcf8ff78894 100644
--- a/packages/ui/src/elements/Spinner/index.css
+++ b/packages/ui/src/elements/Spinner/index.css
@@ -3,7 +3,7 @@
display: flex;
align-items: center;
gap: var(--spacer-1);
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
}
.spinner--small {
diff --git a/packages/ui/src/elements/StepNav/index.css b/packages/ui/src/elements/StepNav/index.css
index 865d5276564..c995b518b18 100644
--- a/packages/ui/src/elements/StepNav/index.css
+++ b/packages/ui/src/elements/StepNav/index.css
@@ -10,7 +10,7 @@
top: 0;
right: 0;
width: var(--base);
- background: linear-gradient(to right, transparent, var(--bg-default));
+ background: linear-gradient(to right, transparent, var(--color-bg));
}
* {
diff --git a/packages/ui/src/elements/ThumbnailCard/index.css b/packages/ui/src/elements/ThumbnailCard/index.css
index 0d4e3abc977..836ae99dc6e 100644
--- a/packages/ui/src/elements/ThumbnailCard/index.css
+++ b/packages/ui/src/elements/ThumbnailCard/index.css
@@ -25,7 +25,7 @@
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
- background: var(--bg-default-secondary);
+ background: var(--color-bg-secondary);
border-radius: var(--radius-medium);
overflow: hidden;
border: 2px solid transparent;
@@ -34,11 +34,11 @@
.thumbnail-card--has-on-click:hover .thumbnail-card__thumbnail,
.thumbnail-card--has-on-click:focus-visible .thumbnail-card__thumbnail {
- border-color: var(--border-default);
+ border-color: var(--color-border);
}
.thumbnail-card--selected .thumbnail-card__thumbnail {
- border-color: var(--border-selected);
+ border-color: var(--color-border-selected);
}
.thumbnail-card__label {
diff --git a/packages/ui/src/elements/Tooltip/index.css b/packages/ui/src/elements/Tooltip/index.css
index ab1ef6aebdb..970caf0edfb 100644
--- a/packages/ui/src/elements/Tooltip/index.css
+++ b/packages/ui/src/elements/Tooltip/index.css
@@ -3,12 +3,12 @@
--caret-size: 0.375rem;
opacity: 0;
- background-color: var(--bg-inverse-default);
+ background-color: var(--color-bg-inverse);
position: absolute;
z-index: 3;
left: 50%;
padding: var(--spacer-1) var(--spacer-2);
- color: var(--text-inverse-oninverse);
+ color: var(--color-text-oninverse);
font-family: var(--text-body-medium-font-family);
font-size: var(--text-body-medium-font-size);
font-weight: var(--text-body-medium-font-weight);
@@ -34,15 +34,15 @@
}
&.field-error {
- background-color: var(--bg-danger-default);
- color: var(--text-danger-ondanger);
+ background-color: var(--color-bg-danger);
+ color: var(--color-text-ondanger);
&.tooltip--position-top::after {
- border-top-color: var(--bg-danger-default);
+ border-top-color: var(--color-bg-danger);
}
&.tooltip--position-bottom::after {
- border-bottom-color: var(--bg-danger-default);
+ border-bottom-color: var(--color-bg-danger);
}
}
@@ -83,12 +83,12 @@
}
.tooltip--position-top {
- top: calc(-100% - var(--caret-size));
- transform: translate3d(-50%, calc(var(--caret-size) * -1), 0);
+ top: 0;
+ transform: translate3d(-50%, calc(-1 * (100% + var(--caret-size))), 0);
&::after {
bottom: 1px;
- border-top: var(--caret-size) solid var(--bg-inverse-default);
+ border-top: var(--caret-size) solid var(--color-bg-inverse);
}
}
@@ -98,7 +98,7 @@
&::after {
bottom: calc(100% + var(--caret-size) - 1px);
- border-bottom: var(--caret-size) solid var(--bg-inverse-default);
+ border-bottom: var(--caret-size) solid var(--color-bg-inverse);
}
}
}
diff --git a/packages/ui/src/fields/Array/index.css b/packages/ui/src/fields/Array/index.css
index 9cc4708dc7f..aae545a3f30 100644
--- a/packages/ui/src/fields/Array/index.css
+++ b/packages/ui/src/fields/Array/index.css
@@ -32,7 +32,7 @@
display: flex;
align-items: center;
flex-shrink: 0;
- color: var(--text-default);
+ color: var(--color-text);
gap: var(--spacer-1);
& > li:last-child .array-field__header-action {
@@ -53,11 +53,11 @@
&:hover,
&:focus-visible {
- background: var(--bg-transparent-hover);
+ background: var(--color-bg-transparent-hover);
}
&:active {
- background: var(--bg-transparent-pressed);
+ background: var(--color-bg-transparent-pressed);
}
}
diff --git a/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css b/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css
index 73f3f99020d..f29d96551a9 100644
--- a/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css
+++ b/packages/ui/src/fields/Blocks/BlockSelector/BlockSearch/index.css
@@ -6,9 +6,9 @@
width: 100%;
align-items: flex-start;
padding: var(--spacer-2-5);
- border-bottom: 1px solid var(--border-default);
+ border-bottom: 1px solid var(--color-border);
z-index: 1;
- background: var(--bg-default);
+ background: var(--color-bg);
}
.block-search__input-wrapper {
@@ -19,7 +19,7 @@
min-height: var(--spacer-5);
padding-right: var(--spacer-1);
border-radius: var(--radius-medium);
- background: var(--bg-default-secondary);
+ background: var(--color-bg-secondary);
position: relative;
}
@@ -36,7 +36,7 @@
}
.stroke {
- stroke: var(--text-tertiary);
+ stroke: var(--color-text-tertiary);
}
}
@@ -60,7 +60,7 @@
}
&::placeholder {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
}
}
}
diff --git a/packages/ui/src/fields/Blocks/BlockSelector/index.css b/packages/ui/src/fields/Blocks/BlockSelector/index.css
index e94c0002ddb..e92df0e6118 100644
--- a/packages/ui/src/fields/Blocks/BlockSelector/index.css
+++ b/packages/ui/src/fields/Blocks/BlockSelector/index.css
@@ -45,7 +45,7 @@
.blocks-drawer__block-group-none {
order: 1;
padding-top: var(--spacer-2-5);
- border-top: 1px solid var(--border-default-default);
+ border-top: 1px solid var(--color-border);
&:only-child {
padding-top: 0;
diff --git a/packages/ui/src/fields/Blocks/SectionTitle/index.css b/packages/ui/src/fields/Blocks/SectionTitle/index.css
index cac2747b02f..fe6f04c349f 100644
--- a/packages/ui/src/fields/Blocks/SectionTitle/index.css
+++ b/packages/ui/src/fields/Blocks/SectionTitle/index.css
@@ -30,12 +30,12 @@
}
.section-title__input {
- color: var(--text-default);
+ color: var(--color-text);
border: 1px solid transparent;
border-radius: var(--radius-medium);
&::placeholder {
- color: var(--text-default-tertiary);
+ color: var(--color-text-tertiary);
font-family: var(--text-body-medium-font-family);
font-weight: var(--text-body-medium-font-weight);
}
@@ -54,7 +54,7 @@
left: 0;
&:hover:not([readonly]) {
- background-color: var(--bg-transparent-hover);
+ background-color: var(--color-bg-transparent-hover);
}
&:hover,
diff --git a/packages/ui/src/fields/Blocks/index.css b/packages/ui/src/fields/Blocks/index.css
index b470e2ed231..8a09f2033ea 100644
--- a/packages/ui/src/fields/Blocks/index.css
+++ b/packages/ui/src/fields/Blocks/index.css
@@ -26,23 +26,23 @@
}
.blocks-field--has-no-error > .blocks-field__header .blocks-field__header-content {
- color: var(--text-default);
+ color: var(--color-text);
}
.blocks-field--has-error > .blocks-field__header {
- color: var(--text-danger-default);
+ color: var(--color-text-danger);
}
.blocks-field--has-error .section-title__input,
.blocks-field--has-error .blocks-field__header-content {
- color: var(--text-danger-default);
+ color: var(--color-text-danger);
}
.blocks-field--has-error .blocks-field__row--no-errors .section-title__input,
.blocks-field--has-error .blocks-field__row--no-errors .blocks-field__header-content,
.blocks-field--has-error .blocks-field--has-no-error .section-title__input,
.blocks-field--has-error .blocks-field--has-no-error .blocks-field__header-content {
- color: var(--text-default);
+ color: var(--color-text);
}
.blocks-field__error-pill {
@@ -57,7 +57,7 @@
align-items: center;
gap: var(--spacer-2);
flex-shrink: 0;
- color: var(--text-default);
+ color: var(--color-text);
& > li:first-child .blocks-field__header-action {
padding: 0 var(--spacer-2) 0 0;
@@ -79,13 +79,13 @@
&:hover,
&:focus-visible {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
}
.blocks-field__title {
margin-bottom: 0;
- color: var(--text-default);
+ color: var(--color-text);
font-weight: var(--text-body-medium-strong-font-weight);
}
@@ -107,7 +107,7 @@
.blocks-field__block-number {
flex-shrink: 0;
- color: var(--text-default);
+ color: var(--color-text);
}
.blocks-field__block-pill {
diff --git a/packages/ui/src/fields/Checkbox/index.css b/packages/ui/src/fields/Checkbox/index.css
index fdf5f9c3fb4..a2e80ca8852 100644
--- a/packages/ui/src/fields/Checkbox/index.css
+++ b/packages/ui/src/fields/Checkbox/index.css
@@ -40,13 +40,13 @@
&:focus-within,
&:focus {
.checkbox-input__input {
- border-color: var(--border-selected-strong);
+ border-color: var(--color-border-selected-strong);
}
}
&:hover {
.checkbox-input__input {
- border-color: var(--border-selected-strong);
+ border-color: var(--color-border-selected-strong);
}
}
}
@@ -79,7 +79,7 @@
position: relative;
width: 1rem;
height: 1rem;
- border: 1px solid var(--border-default-strong);
+ border: 1px solid var(--color-border-strong);
border-radius: var(--radius-medium);
background: transparent;
@@ -116,7 +116,7 @@
&.partial {
svg {
opacity: 1;
- color: var(--icon-brand-onbrand);
+ color: var(--color-icon-onbrand);
}
}
}
@@ -124,65 +124,65 @@
/* Partial/indeterminate state - same blue background as checked */
.checkbox-input:has(.checkbox-input__icon.partial) {
.checkbox-input__input {
- background-color: var(--bg-brand-default);
- border-color: var(--border-selected);
+ background-color: var(--color-bg-brand);
+ border-color: var(--color-border-selected);
}
&:has(:focus-visible) .checkbox-input__input {
- outline: 1px solid var(--bg-default);
+ outline: 1px solid var(--color-bg);
outline-offset: -2px;
}
}
.checkbox-input--checked {
.checkbox-input__input {
- background-color: var(--bg-brand-default);
- border-color: var(--border-selected);
+ background-color: var(--color-bg-brand);
+ border-color: var(--color-border-selected);
}
&:has(:focus-visible) .checkbox-input__input {
- outline: 1px solid var(--bg-default);
+ outline: 1px solid var(--color-bg);
outline-offset: -2px; /* inset offset */
}
.checkbox-input__icon {
svg {
opacity: 1;
- color: var(--icon-brand-onbrand);
+ color: var(--color-icon-onbrand);
}
}
}
.checkbox-input--read-only {
.checkbox-input__input {
- background: var(--bg-disabled-default);
- border-color: var(--border-disabled-default);
+ background: var(--color-bg-disabled);
+ border-color: var(--color-border-disabled);
}
label {
- color: var(--text-disabled-default);
+ color: var(--color-text-disabled);
}
}
.checkbox.error {
.checkbox-input--checked {
.checkbox-input__input {
- background-color: var(--bg-danger-default);
- border-color: var(--border-danger-strong);
+ background-color: var(--color-bg-danger);
+ border-color: var(--color-border-danger-strong);
}
&:hover .checkbox-input__input {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
.checkbox-input:not(.checkbox-input--checked) {
.checkbox-input__input {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
&:hover .checkbox-input__input {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/Code/index.css b/packages/ui/src/fields/Code/index.css
index 0bc62cf9b0f..e7623f46e9d 100644
--- a/packages/ui/src/fields/Code/index.css
+++ b/packages/ui/src/fields/Code/index.css
@@ -5,34 +5,34 @@
flex-direction: column;
gap: var(--spacer-2);
- & .code-editor {
- background: var(--bg-default-secondary);
- border: 1px solid var(--border-default-default);
+ .code-editor {
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
padding: var(--spacer-2) 0;
overflow: clip;
box-shadow: none;
&:hover {
- border-color: var(--border-default-default);
+ border-color: var(--color-border);
}
&:focus-within {
- border-color: var(--border-selected-strong);
+ border-color: var(--color-border-selected);
}
}
- &.error .code-editor {
- border-color: var(--border-danger-strong);
+ &.error .code-editor:not(:focus-within) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
&.read-only .code-editor {
- background: var(--bg-default-default);
- border-color: var(--border-default-default);
+ background: var(--color-bg);
+ border-color: var(--color-border);
}
}
}
diff --git a/packages/ui/src/fields/ConfirmPassword/index.css b/packages/ui/src/fields/ConfirmPassword/index.css
index a15df308b75..331dd8a1460 100644
--- a/packages/ui/src/fields/ConfirmPassword/index.css
+++ b/packages/ui/src/fields/ConfirmPassword/index.css
@@ -28,24 +28,24 @@
background: transparent;
border: none;
border-radius: var(--radius-small);
- color: var(--icon-default-secondary);
+ color: var(--color-icon-secondary);
cursor: pointer;
&:hover {
- color: var(--icon-default-secondary-hover);
+ color: var(--color-icon-secondary-hover);
}
&:disabled {
- color: var(--icon-disabled-default);
+ color: var(--color-icon-disabled);
cursor: not-allowed;
}
}
- &.error input {
- border-color: var(--border-danger-strong);
+ &.error input:not(:focus) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/DateTime/index.css b/packages/ui/src/fields/DateTime/index.css
index c019b00ba9d..d4a810731ce 100644
--- a/packages/ui/src/fields/DateTime/index.css
+++ b/packages/ui/src/fields/DateTime/index.css
@@ -1,13 +1,13 @@
@layer payload-default {
.date-time-field--has-error .date-time-picker .react-datepicker__input-container input {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:hover:not(:focus) {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
&:focus {
- border-color: var(--border-selected-default);
+ border-color: var(--color-border-selected);
}
}
}
diff --git a/packages/ui/src/fields/Email/index.css b/packages/ui/src/fields/Email/index.css
index a143f6368e1..b747a351fe5 100644
--- a/packages/ui/src/fields/Email/index.css
+++ b/packages/ui/src/fields/Email/index.css
@@ -5,11 +5,11 @@
flex-direction: column;
gap: var(--spacer-2);
- &.error input {
- border-color: var(--border-danger-strong);
+ &.error input:not(:focus) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/FieldDescription/index.css b/packages/ui/src/fields/FieldDescription/index.css
index e17b3d63c53..a92e4e3f348 100644
--- a/packages/ui/src/fields/FieldDescription/index.css
+++ b/packages/ui/src/fields/FieldDescription/index.css
@@ -1,7 +1,7 @@
@layer payload-default {
.field-description {
display: flex;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.field-description--margin-bottom {
diff --git a/packages/ui/src/fields/FieldError/index.css b/packages/ui/src/fields/FieldError/index.css
index 7e300bf3069..d5be87e9e1d 100644
--- a/packages/ui/src/fields/FieldError/index.css
+++ b/packages/ui/src/fields/FieldError/index.css
@@ -3,13 +3,13 @@
left: auto;
max-width: 75%;
right: 0;
- transform: translateY(calc(var(--caret-size) * -1));
- color: var(--text-danger-ondanger);
- background-color: var(--bg-danger);
+ transform: translate3d(0%, calc(-1 * (100% + var(--caret-size))), 0);
+ color: var(--color-text-ondanger);
+ background-color: var(--color-bg-danger);
&::after {
- border-top-color: var(--bg-danger);
- border-bottom-color: var(--bg-danger);
+ border-top-color: var(--color-bg-danger);
+ border-bottom-color: var(--color-bg-danger);
}
}
}
diff --git a/packages/ui/src/fields/FieldLabel/index.css b/packages/ui/src/fields/FieldLabel/index.css
index fc2d2143b8a..0cff84bf497 100644
--- a/packages/ui/src/fields/FieldLabel/index.css
+++ b/packages/ui/src/fields/FieldLabel/index.css
@@ -6,7 +6,7 @@
label.field-label:not(.unstyled) {
display: flex;
- color: var(--text-default);
+ color: var(--color-text);
font-family: var(--text-body-medium-strong-font-family);
font-weight: var(--text-body-medium-strong-font-weight);
@@ -20,7 +20,7 @@
}
.field-label:not(.unstyled) .required {
- color: var(--text-danger-default);
+ color: var(--color-text-danger);
html:not([dir='RTL']) & {
margin-left: var(--spacer-1);
diff --git a/packages/ui/src/fields/Group/index.css b/packages/ui/src/fields/Group/index.css
index 1fda2e55f32..c5bf36ad8bf 100644
--- a/packages/ui/src/fields/Group/index.css
+++ b/packages/ui/src/fields/Group/index.css
@@ -13,7 +13,7 @@
left: calc(var(--gutter-h) * -1);
right: calc(var(--gutter-h) * -1);
height: 0;
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
}
&:first-child {
@@ -35,7 +35,7 @@
left: calc(var(--spacer-3) * -1);
right: calc(var(--spacer-3) * -1);
height: 0;
- border-top: 1px solid var(--border-default);
+ border-top: 1px solid var(--color-border);
}
&:first-child {
@@ -81,7 +81,7 @@
}
.group-field--gutter {
- border-left: 1px solid var(--border-default);
+ border-left: 1px solid var(--color-border);
padding-left: var(--spacer-3);
}
@@ -108,7 +108,7 @@
.group-field--has-error {
.group-field__header {
- color: var(--text-danger);
+ color: var(--color-text-danger);
}
}
diff --git a/packages/ui/src/fields/JSON/index.css b/packages/ui/src/fields/JSON/index.css
index 81a22826f9e..67cbb31a6b0 100644
--- a/packages/ui/src/fields/JSON/index.css
+++ b/packages/ui/src/fields/JSON/index.css
@@ -7,20 +7,20 @@
&.error {
.code-editor {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:hover {
border-color: var(--border-danger-strong);
}
&:focus-within {
- border-color: var(--border-selected-strong);
+ border-color: var(--color-border-selected-strong);
}
}
.monaco-editor-background,
.margin {
- background-color: var(--bg-danger-tertiary);
+ background-color: var(--color-bg-danger-tertiary);
}
}
}
diff --git a/packages/ui/src/fields/Number/index.css b/packages/ui/src/fields/Number/index.css
index e97ebf448d2..522e8f199eb 100644
--- a/packages/ui/src/fields/Number/index.css
+++ b/packages/ui/src/fields/Number/index.css
@@ -24,11 +24,11 @@
}
}
- &.error .form-input-group {
- border-color: var(--border-danger-strong);
+ &.error .form-input-group:not(:focus-within) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
diff --git a/packages/ui/src/fields/Password/index.css b/packages/ui/src/fields/Password/index.css
index 5cc948049ce..063a3dbdb10 100644
--- a/packages/ui/src/fields/Password/index.css
+++ b/packages/ui/src/fields/Password/index.css
@@ -28,24 +28,24 @@
background: transparent;
border: none;
border-radius: var(--radius-small);
- color: var(--icon-default-secondary);
+ color: var(--color-icon-secondary);
cursor: pointer;
&:hover {
- color: var(--icon-default-secondary-hover);
+ color: var(--color-icon-secondary-hover);
}
&:disabled {
- color: var(--icon-disabled-default);
+ color: var(--color-icon-disabled);
cursor: not-allowed;
}
}
- &.error input {
- border-color: var(--border-danger-strong);
+ &.error input:not(:focus) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/Point/index.css b/packages/ui/src/fields/Point/index.css
index bcd954a27cd..a983cfb6748 100644
--- a/packages/ui/src/fields/Point/index.css
+++ b/packages/ui/src/fields/Point/index.css
@@ -35,11 +35,11 @@
}
}
- &.error .form-input-group {
- border-color: var(--border-danger-strong);
+ &.error .form-input-group:not(:focus-within) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
diff --git a/packages/ui/src/fields/RadioGroup/Radio/index.css b/packages/ui/src/fields/RadioGroup/Radio/index.css
index 878259aaf1d..60e861a1c4d 100644
--- a/packages/ui/src/fields/RadioGroup/Radio/index.css
+++ b/packages/ui/src/fields/RadioGroup/Radio/index.css
@@ -20,7 +20,7 @@
}
.radio-input__styled-radio {
- border: 1px solid var(--border-default-strong);
+ border: 1px solid var(--color-border-strong);
background-color: transparent;
width: 1rem;
height: 1rem;
@@ -37,7 +37,7 @@
content: '';
display: block;
border-radius: var(--radius-full);
- background-color: var(--border-default-strong);
+ background-color: var(--color-border-strong);
width: 0.5rem;
height: 0.5rem;
opacity: 0;
@@ -45,10 +45,10 @@
}
.radio-input__styled-radio--disabled {
- border-color: var(--border-disabled-default);
+ border-color: var(--color-border-disabled);
&::before {
- background-color: var(--border-disabled-default);
+ background-color: var(--color-border-disabled);
}
}
@@ -58,7 +58,7 @@
font-weight: var(--text-body-medium-font-weight);
line-height: var(--text-body-medium-line-height);
letter-spacing: var(--text-letter-spacing);
- color: var(--text-default-default);
+ color: var(--color-text);
}
.radio-input--is-selected {
diff --git a/packages/ui/src/fields/RadioGroup/index.css b/packages/ui/src/fields/RadioGroup/index.css
index c1ac6414d80..f4a80c29905 100644
--- a/packages/ui/src/fields/RadioGroup/index.css
+++ b/packages/ui/src/fields/RadioGroup/index.css
@@ -19,10 +19,10 @@
&.error {
.radio-input__styled-radio {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
@@ -51,14 +51,14 @@
}
.radio-input__label {
- color: var(--text-default-default);
+ color: var(--color-text);
}
.radio-input__styled-radio {
- border-color: var(--border-disabled-default);
+ border-color: var(--color-border-disabled);
&::before {
- background-color: var(--border-disabled-default);
+ background-color: var(--color-border-disabled);
}
}
diff --git a/packages/ui/src/fields/Relationship/index.css b/packages/ui/src/fields/Relationship/index.css
index 3f39228700c..4948fbe1bdb 100644
--- a/packages/ui/src/fields/Relationship/index.css
+++ b/packages/ui/src/fields/Relationship/index.css
@@ -27,18 +27,18 @@
}
.relationship__error-loading {
- border: 1px solid var(--border-danger-strong);
+ border: 1px solid var(--color-border-danger-strong);
min-height: var(--spacer-6);
padding: var(--spacer-2) var(--spacer-3);
- background-color: var(--bg-danger);
- color: var(--text-danger-ondanger);
+ background-color: var(--color-bg-danger);
+ color: var(--color-text-ondanger);
}
.relationship.error > .relationship__wrap .rs__control {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css
index bfe88c25704..a6a73f12254 100644
--- a/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css
+++ b/packages/ui/src/fields/Relationship/select-components/MultiValueLabel/index.css
@@ -34,7 +34,7 @@
border: 1px solid transparent;
&:hover {
- background-color: var(--bg-transparent-hover);
+ background-color: var(--color-bg-transparent-hover);
}
&:focus-visible {
diff --git a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css
index 55f6189cac1..fa508ce3bf4 100644
--- a/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css
+++ b/packages/ui/src/fields/Relationship/select-components/SingleValue/index.css
@@ -38,7 +38,7 @@
}
&:hover {
- background-color: var(--bg-transparent-hover);
+ background-color: var(--color-bg-transparent-hover);
}
}
diff --git a/packages/ui/src/fields/Select/index.css b/packages/ui/src/fields/Select/index.css
index 6cabd87340b..ed3b269573e 100644
--- a/packages/ui/src/fields/Select/index.css
+++ b/packages/ui/src/fields/Select/index.css
@@ -4,10 +4,10 @@
}
.field-type.select.error .rs__control {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/Slug/index.css b/packages/ui/src/fields/Slug/index.css
index bbf6817be1f..c62da53b34b 100644
--- a/packages/ui/src/fields/Slug/index.css
+++ b/packages/ui/src/fields/Slug/index.css
@@ -23,7 +23,7 @@
overflow: hidden;
&::placeholder {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
}
@@ -44,25 +44,25 @@
border: none;
border-radius: var(--radius-small);
background: transparent;
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
cursor: pointer;
transition: color 100ms;
&:hover {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
/* Locked state - override form-input-group styles */
&.slug-field-component--locked {
.slug-field-component__input-container {
- background: var(--bg-default);
- border-color: var(--border-default);
+ background: var(--color-bg);
+ border-color: var(--color-border);
}
.slug-field-component__input:disabled {
- color: var(--text-secondary);
- -webkit-text-fill-color: var(--text-secondary);
+ color: var(--color-text-secondary);
+ -webkit-text-fill-color: var(--color-text-secondary);
}
}
@@ -71,20 +71,20 @@
.slug-field-component__input-container,
.slug-field-component__input-container:hover,
.slug-field-component__input-container:focus-within {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
/* Read-only state (admin.readOnly) */
&.slug-field-component--read-only {
.slug-field-component__input-container {
- background: var(--bg-default);
- border-color: var(--border-default);
+ background: var(--color-bg);
+ border-color: var(--color-border);
}
.slug-field-component__input:disabled {
- color: var(--text-secondary);
- -webkit-text-fill-color: var(--text-secondary);
+ color: var(--color-text-secondary);
+ -webkit-text-fill-color: var(--color-text-secondary);
}
}
}
diff --git a/packages/ui/src/fields/Tabs/Tab/index.css b/packages/ui/src/fields/Tabs/Tab/index.css
index 26b2fd0f478..2e33c04196b 100644
--- a/packages/ui/src/fields/Tabs/Tab/index.css
+++ b/packages/ui/src/fields/Tabs/Tab/index.css
@@ -16,7 +16,7 @@
font-weight: var(--text-body-medium-font-weight);
line-height: var(--text-body-medium-line-height);
letter-spacing: var(--text-letter-spacing);
- color: var(--text-default-secondary);
+ color: var(--color-text-secondary);
&:after {
content: '';
@@ -25,7 +25,7 @@
right: var(--spacer-2);
bottom: calc(-1 * var(--spacer-2) - 1px);
height: 3px;
- background: var(--icon-brand);
+ background: var(--color-icon-brand);
border-radius: var(--radius-full);
opacity: 0;
z-index: 1;
@@ -33,7 +33,7 @@
&:hover {
&:after {
- background: var(--bg-default-tertiary);
+ background: var(--color-bg-tertiary);
opacity: 1;
}
}
@@ -49,28 +49,28 @@
.tabs-field__tab-button--active {
font-weight: var(--text-body-medium-strong-font-weight);
- color: var(--text-default-default);
+ color: var(--color-text);
&:after {
- background: var(--icon-brand);
+ background: var(--color-icon-brand);
opacity: 1;
}
&:hover:after {
- background: var(--icon-brand);
+ background: var(--color-icon-brand);
}
}
.tabs-field__tab-button--has-error {
- color: var(--text-danger-default);
+ color: var(--color-text-danger);
&:after {
- background: var(--border-danger-strong);
+ background: var(--color-border-danger-strong);
opacity: 1;
}
&:hover:after {
- background: var(--border-danger-strong);
+ background: var(--color-border-danger-strong);
}
}
diff --git a/packages/ui/src/fields/Tabs/index.css b/packages/ui/src/fields/Tabs/index.css
index 15b70d7d4d4..ca0c9705b0e 100644
--- a/packages/ui/src/fields/Tabs/index.css
+++ b/packages/ui/src/fields/Tabs/index.css
@@ -46,7 +46,7 @@
vertical-align: bottom;
position: relative;
z-index: 1;
- box-shadow: inset 0px -1px var(--border-default-default);
+ box-shadow: inset 0px -1px var(--color-border);
&:before,
&:after {
diff --git a/packages/ui/src/fields/Text/index.css b/packages/ui/src/fields/Text/index.css
index e038f79eff4..c3b614f270b 100644
--- a/packages/ui/src/fields/Text/index.css
+++ b/packages/ui/src/fields/Text/index.css
@@ -11,11 +11,11 @@
gap: var(--spacer-2);
}
- &.error input {
- border-color: var(--border-danger-strong);
+ &.error input:not(:focus) {
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/Textarea/index.css b/packages/ui/src/fields/Textarea/index.css
index 667037bc30f..7bca1e83b47 100644
--- a/packages/ui/src/fields/Textarea/index.css
+++ b/packages/ui/src/fields/Textarea/index.css
@@ -15,31 +15,31 @@
textarea {
overflow-y: auto;
resize: vertical;
- min-height: 3.75rem;
+ min-height: calc(var(--spacer-5) * 2);
height: auto;
display: flex;
field-sizing: content;
padding: var(--spacer-2);
&:hover:not(:focus):not(:disabled) {
- border-color: var(--border-default-default);
+ border-color: var(--color-border);
}
}
&.read-only {
textarea {
- background: var(--bg-default-default);
- border-color: var(--border-default-default);
- color: var(--text-default);
+ background: var(--color-bg);
+ border-color: var(--color-border);
+ color: var(--color-text);
}
}
&.error {
textarea {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
&:hover {
- border-color: var(--border-danger-strong);
+ border-color: var(--color-border-danger-strong);
}
}
}
diff --git a/packages/ui/src/fields/Upload/HasMany/index.css b/packages/ui/src/fields/Upload/HasMany/index.css
index 1b0b70dbb6b..20b005531da 100644
--- a/packages/ui/src/fields/Upload/HasMany/index.css
+++ b/packages/ui/src/fields/Upload/HasMany/index.css
@@ -16,7 +16,7 @@
.upload--has-many__dragItem {
.icon--drag-handle {
- color: var(--text-tertiary);
+ color: var(--color-text-tertiary);
}
}
}
diff --git a/packages/ui/src/fields/Upload/RelationshipContent/index.css b/packages/ui/src/fields/Upload/RelationshipContent/index.css
index 4bdb1f61ecf..4c0e9291d2e 100644
--- a/packages/ui/src/fields/Upload/RelationshipContent/index.css
+++ b/packages/ui/src/fields/Upload/RelationshipContent/index.css
@@ -54,8 +54,8 @@
.upload-relationship-details__meta {
margin: 0;
- color: var(--text-secondary);
- white-space: nowrap;
+ color: var(--color-text-secondary);
+ text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
diff --git a/packages/ui/src/fields/Upload/UploadCard/index.css b/packages/ui/src/fields/Upload/UploadCard/index.css
index aef3a13bc3c..6db43b53e48 100644
--- a/packages/ui/src/fields/Upload/UploadCard/index.css
+++ b/packages/ui/src/fields/Upload/UploadCard/index.css
@@ -1,6 +1,7 @@
@layer payload-default {
.upload-field-card {
- background: var(--bg-secondary);
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
border-radius: var(--radius-medium);
display: flex;
align-items: center;
diff --git a/packages/ui/src/fields/Upload/index.css b/packages/ui/src/fields/Upload/index.css
index 6690e07904a..4f1257ba651 100644
--- a/packages/ui/src/fields/Upload/index.css
+++ b/packages/ui/src/fields/Upload/index.css
@@ -20,7 +20,7 @@
}
.upload__dropzoneContent__orText {
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
text-transform: lowercase;
}
@@ -28,7 +28,7 @@
flex-shrink: 0;
margin: 0;
text-transform: lowercase;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.upload__loadingRows {
@@ -39,10 +39,7 @@
.upload .shimmer-effect {
border-radius: var(--radius-medium);
- }
-
- .upload.error .dropzone {
- border-color: var(--border-danger-strong);
+ border: 1px solid var(--color-border);
}
@media (max-width: 768px) {
diff --git a/packages/ui/src/icons/Document/index.css b/packages/ui/src/icons/Document/index.css
index 948b44b04d4..c3d7e1cae78 100644
--- a/packages/ui/src/icons/Document/index.css
+++ b/packages/ui/src/icons/Document/index.css
@@ -1,7 +1,7 @@
@layer payload-default {
.icon--document {
&.icon--muted {
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
}
}
}
diff --git a/packages/ui/src/icons/Folder/index.css b/packages/ui/src/icons/Folder/index.css
index 2c5df695ad5..f8f88fbf70c 100644
--- a/packages/ui/src/icons/Folder/index.css
+++ b/packages/ui/src/icons/Folder/index.css
@@ -1,8 +1,8 @@
@layer payload-default {
.icon--folder--muted {
- color: var(--icon-secondary);
+ color: var(--color-icon-secondary);
}
.icon--folder--dark {
- color: var(--icon-default);
+ color: var(--color-icon);
}
}
diff --git a/packages/ui/src/scss/app.scss b/packages/ui/src/scss/app.scss
index 2f2c030b028..1e0a493a897 100644
--- a/packages/ui/src/scss/app.scss
+++ b/packages/ui/src/scss/app.scss
@@ -17,7 +17,7 @@
--breakpoint-l-width: #{$breakpoint-l-width};
--scrollbar-width: 17px;
- --theme-bg: var(--bg-default-default);
+ --theme-bg: var(--color-bg);
--theme-input-bg: var(--theme-elevation-0);
--theme-text: var(--theme-elevation-800);
--theme-overlay: rgba(5, 5, 5, 0.5);
@@ -66,11 +66,11 @@
}
html {
- background: var(--bg-default-default);
+ background: var(--color-bg);
-webkit-font-smoothing: antialiased;
&[data-theme='dark'] {
- --theme-bg: var(--bg-default-default);
+ --theme-bg: var(--color-bg);
--theme-text: var(--theme-elevation-1000);
--theme-input-bg: var(--theme-elevation-50);
--theme-overlay: rgba(5, 5, 5, 0.75);
diff --git a/test/lexical/collections/LexicalViewsProvider/e2e.spec.ts b/test/lexical/collections/LexicalViewsProvider/e2e.spec.ts
index 1b5b7d213a0..02217778f73 100644
--- a/test/lexical/collections/LexicalViewsProvider/e2e.spec.ts
+++ b/test/lexical/collections/LexicalViewsProvider/e2e.spec.ts
@@ -73,7 +73,9 @@ describe('Lexical Views Provider', () => {
page,
}) => {
// Add a block to the richtext field
- await lexical.paragraph.last().click()
+ // Use focus() instead of click() because hideGutter=true causes the
+ // InsertParagraphAtEnd overlay to intercept clicks on the last paragraph
+ await lexical.editor.first().focus()
await lexical.slashCommand('contentblock', true, 'Content Block')
// Wait for block to be added
diff --git a/uploads/495730485-8ab4adc3-ffab-4fca-a9f8-8208efd80bc0.jpg b/uploads/495730485-8ab4adc3-ffab-4fca-a9f8-8208efd80bc0.jpg
deleted file mode 100644
index d6a1643da71..00000000000
Binary files a/uploads/495730485-8ab4adc3-ffab-4fca-a9f8-8208efd80bc0.jpg and /dev/null differ
diff --git a/uploads/543115763-72565cd5-d1de-454b-816f-bf541a90d0c4.png b/uploads/543115763-72565cd5-d1de-454b-816f-bf541a90d0c4.png
deleted file mode 100644
index e807f5962ba..00000000000
Binary files a/uploads/543115763-72565cd5-d1de-454b-816f-bf541a90d0c4.png and /dev/null differ