From 78adac203aba9aebf92d5d2c73fb8080a1e5fb0e Mon Sep 17 00:00:00 2001 From: Brian Hanson Date: Wed, 26 Aug 2026 15:51:48 -0500 Subject: [PATCH 1/9] Generate Tailwind color utilities from the design tokens --- .../craftcms-ui/scripts/generate-colors.js | 195 ++++++++ .../craftcms-ui/src/stories/tokens/Docs.mdx | 29 ++ packages/craftcms-ui/tailwind.css | 450 ++++++++++++++---- .../components/ElementContextMenu.vue | 3 +- .../elements/components/ElementEditor.vue | 4 +- .../modules/elements/components/FilterHud.vue | 2 +- .../elements/components/RevisionsList.vue | 2 +- .../js/modules/elements/fixtures/elements.ts | 2 +- resources/js/modules/forms/HeadingNode.vue | 5 +- src/Form/Nodes/Heading.php | 2 +- 10 files changed, 598 insertions(+), 96 deletions(-) diff --git a/packages/craftcms-ui/scripts/generate-colors.js b/packages/craftcms-ui/scripts/generate-colors.js index 7627b126b8e..3fd6f37c568 100644 --- a/packages/craftcms-ui/scripts/generate-colors.js +++ b/packages/craftcms-ui/scripts/generate-colors.js @@ -7,6 +7,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url)); const ROOT = resolve(__dirname, '..'); const OUT_FILE = resolve(ROOT, 'src/styles/shared/colorable.css'); const OUT_LIT_FILE = resolve(ROOT, 'src/styles/colorable.styles.ts'); +const OUT_TAILWIND_FILE = resolve(ROOT, 'tailwind.css'); const DATA_FILE = resolve(ROOT, 'src/constants/colors.data.ts'); /* @@ -230,6 +231,194 @@ ${variants} `; } +/** + * Foundational tokens that aren't derived from the palette, so they can't be + * generated from `colors.data.ts`. Kept in step with + * `src/styles/shared/tokens.css` by hand — the shape there is hand-authored + * too (and `--c-text-*` is overloaded: `--c-text-quiet` is a color while + * `--c-text-sm` is a font size), so there's nothing mechanical to read. + * + * Each entry is `[section heading, [[tailwind key, craft token], …]]`. The + * tailwind key lands in the `--color-*` namespace, which is what names the + * utility: `surface-raised` → `bg-surface-raised`, `text-quiet` → + * `text-text-quiet`. + */ +const foundationalTokens = [ + [ + 'Surfaces', + [ + ['surface-default', '--c-surface-default'], + ['surface-raised', '--c-surface-raised'], + ['surface-sunken', '--c-surface-sunken'], + ['surface-overlay', '--c-surface-overlay'], + ['surface-form', '--c-surface-form'], + ['surface-shade', '--c-surface-shade'], + ], + ], + [ + 'Text', + [ + ['text-default', '--c-text-default'], + ['text-quiet', '--c-text-quiet'], + ['text-link', '--c-text-link'], + ['text-white', '--c-text-white'], + ['text-black', '--c-text-black'], + ], + ], + [ + "Contextual — whatever the nearest [data-color] / variant resolved to", + [ + ['fill-quiet', '--c-color-fill-quiet'], + ['fill-normal', '--c-color-fill-normal'], + ['fill-loud', '--c-color-fill-loud'], + ['border-quiet', '--c-color-border-quiet'], + ['border-normal', '--c-color-border-normal'], + ['border-loud', '--c-color-border-loud'], + ['on-quiet', '--c-color-on-quiet'], + ['on-normal', '--c-color-on-normal'], + ['on-loud', '--c-color-on-loud'], + ], + ], + [ + 'Form controls', + [ + ['form-fill', '--c-form-control-fill'], + ['form-text', '--c-form-control-text'], + ['form-border', '--c-form-control-border-color'], + ['input-fill', '--c-input-fill'], + ['input-text', '--c-input-text'], + ['input-border', '--c-input-border-color'], + ['select-fill', '--c-select-fill'], + ['select-text', '--c-select-text'], + ['select-border', '--c-select-border-color'], + ], + ], + [ + 'Surfaces — panes and modals', + [ + ['pane-fill', '--c-pane-fill'], + ['pane-text', '--c-pane-text'], + ['pane-border', '--c-pane-border-color'], + ['modal-fill', '--c-modal-fill'], + ['modal-text', '--c-modal-text'], + ['modal-border', '--c-modal-border-color'], + ], + ], + ['Focus', [['focus-outline', '--c-color-focus-outline']]], +]; + +/** Status tokens in `tokens.css`, each with a fill / border / text. */ +const statusNames = ['live', 'enabled', 'pending', 'expired', 'disabled']; + +/** + * Static (theme-invariant) semantic colors in `tokens.css`. Deliberately not + * `semanticColors` — `--c-color-static-*` covers `brand`, which has no + * theme-aware counterpart. + */ +const staticNames = [ + 'neutral', + 'brand', + 'accent', + 'info', + 'success', + 'warning', + 'danger', +]; + +const colorableRoles = [ + ['fill', ['quiet', 'normal', 'loud']], + ['border', ['quiet', 'normal', 'loud']], + ['on', ['quiet', 'normal', 'loud']], +]; + +function themeSection(heading, entries) { + return [ + ` /* ——— ${heading} ——— */`, + ...entries.map(([key, token]) => ` --color-${key}: var(${token});`), + ].join('\n'); +} + +/** The nine colorable tokens a `--c-color--*` group exposes. */ +function colorableSection(name) { + return themeSection( + name, + colorableRoles.flatMap(([role, strengths]) => + strengths.map((strength) => [ + `${name}-${role}-${strength}`, + `--c-color-${name}-${role}-${strength}`, + ]) + ) + ); +} + +/** + * Craft's design tokens, republished in Tailwind's `--color-*` namespace so + * every one of them gets `bg-*` / `text-*` / `border-*` / `ring-*` / … utility + * classes generated for it. + * + * The mapping is mechanical: drop the `--c-color-` (or `--c-`) prefix, and + * what's left names the utility. `--c-color-neutral-border-quiet` becomes + * `--color-neutral-border-quiet`, i.e. `border-neutral-border-quiet`, + * `bg-neutral-border-quiet`, and so on. + */ +function generateTailwindTheme(paletteColors, semanticColors) { + const sections = [ + ...foundationalTokens.map(([heading, entries]) => + themeSection(heading, entries) + ), + themeSection( + 'Status', + statusNames.flatMap((name) => + ['fill', 'border', 'text'].map((role) => [ + `status-${name}-${role}`, + `--c-status-${name}-${role}`, + ]) + ) + ), + themeSection( + 'Static — same value in every theme', + staticNames.flatMap((name) => + ['fill', 'border', 'on'].map((role) => [ + `static-${name}-${role}`, + `--c-color-static-${name}-${role}`, + ]) + ) + ), + ...Object.keys(semanticColors).map((name) => colorableSection(name)), + ...paletteColors.map((name) => colorableSection(name)), + ]; + + return `/* Auto-generated by scripts/generate-colors.js — do not edit manually */ + +/** + * Craft CMS Control Panel — Tailwind v4 theme integration. + * + * Publishes Craft's design tokens into Tailwind's \`--color-*\` namespace so + * that utility classes are generated for every one of them. The token name is + * the utility name: \`--c-color-neutral-border-quiet\` becomes + * \`border-neutral-border-quiet\`, \`--c-surface-raised\` becomes + * \`bg-surface-raised\`. + * + * Usage in a CSS entry file: + * + * @import 'tailwindcss/theme.css' layer(theme); + * @import 'tailwindcss/utilities.css' layer(utilities); + * @import '@craftcms/ui/styles/cp.css' layer(cp); // :root token values + * @import '@craftcms/ui/tailwind.css' layer(theme); + * + * The \`--c-*\` variables have to be in scope (via \`cp.css\`) for the + * \`var()\`s below to resolve at render time. \`@theme inline\` makes the + * generated utilities reference those custom properties directly rather than + * snapshotting their values, so \`[data-theme='dark']\` overrides and + * \`[data-color]\` context both flow through untouched. + */ + +@theme inline { +${sections.join('\n\n')} +} +`; +} + export default async function main() { const {paletteColors, semanticColors} = await loadColorData(); const css = generateStyles(paletteColors, semanticColors); @@ -238,6 +427,12 @@ export default async function main() { writeFileSync(OUT_LIT_FILE, generateLitStyles(paletteColors, semanticColors)); console.log(`Generated ${OUT_LIT_FILE}`); + + writeFileSync( + OUT_TAILWIND_FILE, + generateTailwindTheme(paletteColors, semanticColors) + ); + console.log(`Generated ${OUT_TAILWIND_FILE}`); } // Run when invoked directly (node scripts/generate-colors.js), but not when diff --git a/packages/craftcms-ui/src/stories/tokens/Docs.mdx b/packages/craftcms-ui/src/stories/tokens/Docs.mdx index a620f539cf5..b8ea7ae5dad 100644 --- a/packages/craftcms-ui/src/stories/tokens/Docs.mdx +++ b/packages/craftcms-ui/src/stories/tokens/Docs.mdx @@ -230,3 +230,32 @@ appearance: AppearanceKey = Appearance.Fill; - **Use `~=` selectors** - appearance selectors in existing components use `[appearance~='value']` (word matching) rather than `[appearance='value']` (exact matching). - **Default to neutral** - set sensible defaults (`Variant.Neutral` / the most common appearance) so components look correct without explicit attributes. - **Define custom subsets when needed** - if the standard `Variant` or `Appearance` type doesn't fit (like Button's `primary` variant), define component-specific values instead of forcing the shared types. + +--- + +## Using tokens from Tailwind + +Every color token is republished into Tailwind's `--color-*` namespace by +`@craftcms/ui/tailwind.css`, so each one has a matching set of utility classes. +The token name _is_ the utility name — drop the `--c-color-` (or `--c-`) +prefix, and what's left is what you type: + +| Token | Utilities | +| -------------------------------- | -------------------------------------------------------------- | +| `--c-color-neutral-border-quiet` | `border-neutral-border-quiet`, `divide-…`, `ring-…` | +| `--c-color-danger-fill-normal` | `bg-danger-fill-normal` | +| `--c-color-accent-on-loud` | `text-accent-on-loud` | +| `--c-surface-raised` | `bg-surface-raised` | +| `--c-text-quiet` | `text-text-quiet` | +| `--c-status-live-fill` | `bg-status-live-fill` | + +The mapping is `@theme inline`, so the utilities reference the custom +properties rather than snapshotting their values. `[data-theme='dark']` and +`[data-color]` both keep working through them — including the generic +contextual tokens, where `bg-fill-normal` / `border-border-normal` / +`text-on-normal` paint with whatever color the nearest `[data-color]` or +`variant` resolved to. + +`tailwind.css` is generated from `src/constants/colors.data.ts` by +`scripts/generate-colors.js` alongside `shared/colorable.css`, so adding a +color there gives you its utilities for free. Don't edit it by hand. diff --git a/packages/craftcms-ui/tailwind.css b/packages/craftcms-ui/tailwind.css index 725f6bae61e..83bf498f643 100644 --- a/packages/craftcms-ui/tailwind.css +++ b/packages/craftcms-ui/tailwind.css @@ -1,129 +1,411 @@ +/* Auto-generated by scripts/generate-colors.js — do not edit manually */ + /** - * Craft CMS Control Panel — Tailwind v4 Theme Integration + * Craft CMS Control Panel — Tailwind v4 theme integration. * - * Maps Craft's design tokens into Tailwind's @theme namespace so that - * utility classes (bg-*, text-*, border-*) are generated for every token. + * Publishes Craft's design tokens into Tailwind's `--color-*` namespace so + * that utility classes are generated for every one of them. The token name is + * the utility name: `--c-color-neutral-border-quiet` becomes + * `border-neutral-border-quiet`, `--c-surface-raised` becomes + * `bg-surface-raised`. * - * Usage in your CSS entry file: + * Usage in a CSS entry file: * - * @import "@craftcms/ui/dist/styles/cp.css"; // loads :root token values - * @import "@craftcms/ui/tailwind.css"; // @theme inline — generate utilities - * @import "tailwindcss"; // Tailwind v4 engine + * @import 'tailwindcss/theme.css' layer(theme); + * @import 'tailwindcss/utilities.css' layer(utilities); + * @import '@craftcms/ui/styles/cp.css' layer(cp); // :root token values + * @import '@craftcms/ui/tailwind.css' layer(theme); * - * The --c-* variables must already be in scope (via cp.css) for var() to - * resolve at render time. Using @theme inline means the generated utilities - * reference the CSS custom properties directly, so dark-mode overrides in - * [data-theme='dark'] are picked up automatically. + * The `--c-*` variables have to be in scope (via `cp.css`) for the + * `var()`s below to resolve at render time. `@theme inline` makes the + * generated utilities reference those custom properties directly rather than + * snapshotting their values, so `[data-theme='dark']` overrides and + * `[data-color]` context both flow through untouched. */ @theme inline { - /* ——— Surface ——— */ + /* ——— Surfaces ——— */ --color-surface-default: var(--c-surface-default); --color-surface-raised: var(--c-surface-raised); --color-surface-sunken: var(--c-surface-sunken); --color-surface-overlay: var(--c-surface-overlay); --color-surface-form: var(--c-surface-form); + --color-surface-shade: var(--c-surface-shade); /* ——— Text ——— */ --color-text-default: var(--c-text-default); --color-text-quiet: var(--c-text-quiet); --color-text-link: var(--c-text-link); --color-text-white: var(--c-text-white); + --color-text-black: var(--c-text-black); - /* ——— Neutral ——— */ - --color-neutral-fill-loud: var(--c-color-neutral-fill-loud); - --color-neutral-fill-normal: var(--c-color-neutral-fill-normal); + /* ——— Contextual — whatever the nearest [data-color] / variant resolved to ——— */ + --color-fill-quiet: var(--c-color-fill-quiet); + --color-fill-normal: var(--c-color-fill-normal); + --color-fill-loud: var(--c-color-fill-loud); + --color-border-quiet: var(--c-color-border-quiet); + --color-border-normal: var(--c-color-border-normal); + --color-border-loud: var(--c-color-border-loud); + --color-on-quiet: var(--c-color-on-quiet); + --color-on-normal: var(--c-color-on-normal); + --color-on-loud: var(--c-color-on-loud); + + /* ——— Form controls ——— */ + --color-form-fill: var(--c-form-control-fill); + --color-form-text: var(--c-form-control-text); + --color-form-border: var(--c-form-control-border-color); + --color-input-fill: var(--c-input-fill); + --color-input-text: var(--c-input-text); + --color-input-border: var(--c-input-border-color); + --color-select-fill: var(--c-select-fill); + --color-select-text: var(--c-select-text); + --color-select-border: var(--c-select-border-color); + + /* ——— Surfaces — panes and modals ——— */ + --color-pane-fill: var(--c-pane-fill); + --color-pane-text: var(--c-pane-text); + --color-pane-border: var(--c-pane-border-color); + --color-modal-fill: var(--c-modal-fill); + --color-modal-text: var(--c-modal-text); + --color-modal-border: var(--c-modal-border-color); + + /* ——— Focus ——— */ + --color-focus-outline: var(--c-color-focus-outline); + + /* ——— Status ——— */ + --color-status-live-fill: var(--c-status-live-fill); + --color-status-live-border: var(--c-status-live-border); + --color-status-live-text: var(--c-status-live-text); + --color-status-enabled-fill: var(--c-status-enabled-fill); + --color-status-enabled-border: var(--c-status-enabled-border); + --color-status-enabled-text: var(--c-status-enabled-text); + --color-status-pending-fill: var(--c-status-pending-fill); + --color-status-pending-border: var(--c-status-pending-border); + --color-status-pending-text: var(--c-status-pending-text); + --color-status-expired-fill: var(--c-status-expired-fill); + --color-status-expired-border: var(--c-status-expired-border); + --color-status-expired-text: var(--c-status-expired-text); + --color-status-disabled-fill: var(--c-status-disabled-fill); + --color-status-disabled-border: var(--c-status-disabled-border); + --color-status-disabled-text: var(--c-status-disabled-text); + + /* ——— Static — same value in every theme ——— */ + --color-static-neutral-fill: var(--c-color-static-neutral-fill); + --color-static-neutral-border: var(--c-color-static-neutral-border); + --color-static-neutral-on: var(--c-color-static-neutral-on); + --color-static-brand-fill: var(--c-color-static-brand-fill); + --color-static-brand-border: var(--c-color-static-brand-border); + --color-static-brand-on: var(--c-color-static-brand-on); + --color-static-accent-fill: var(--c-color-static-accent-fill); + --color-static-accent-border: var(--c-color-static-accent-border); + --color-static-accent-on: var(--c-color-static-accent-on); + --color-static-info-fill: var(--c-color-static-info-fill); + --color-static-info-border: var(--c-color-static-info-border); + --color-static-info-on: var(--c-color-static-info-on); + --color-static-success-fill: var(--c-color-static-success-fill); + --color-static-success-border: var(--c-color-static-success-border); + --color-static-success-on: var(--c-color-static-success-on); + --color-static-warning-fill: var(--c-color-static-warning-fill); + --color-static-warning-border: var(--c-color-static-warning-border); + --color-static-warning-on: var(--c-color-static-warning-on); + --color-static-danger-fill: var(--c-color-static-danger-fill); + --color-static-danger-border: var(--c-color-static-danger-border); + --color-static-danger-on: var(--c-color-static-danger-on); + + /* ——— neutral ——— */ --color-neutral-fill-quiet: var(--c-color-neutral-fill-quiet); - --color-neutral-border-loud: var(--c-color-neutral-border-loud); - --color-neutral-border-normal: var(--c-color-neutral-border-normal); + --color-neutral-fill-normal: var(--c-color-neutral-fill-normal); + --color-neutral-fill-loud: var(--c-color-neutral-fill-loud); --color-neutral-border-quiet: var(--c-color-neutral-border-quiet); - --color-neutral-on-loud: var(--c-color-neutral-on-loud); - --color-neutral-on-normal: var(--c-color-neutral-on-normal); + --color-neutral-border-normal: var(--c-color-neutral-border-normal); + --color-neutral-border-loud: var(--c-color-neutral-border-loud); --color-neutral-on-quiet: var(--c-color-neutral-on-quiet); + --color-neutral-on-normal: var(--c-color-neutral-on-normal); + --color-neutral-on-loud: var(--c-color-neutral-on-loud); - /* ——— Brand ——— */ - --color-brand-fill-loud: var(--c-color-brand-fill-loud); - --color-brand-fill-quiet: var(--c-color-brand-fill-quiet); - --color-brand-border-loud: var(--c-color-brand-border-loud); - --color-brand-border-quiet: var(--c-color-brand-border-quiet); - --color-brand-on-loud: var(--c-color-brand-on-loud); - --color-brand-on-quiet: var(--c-color-brand-on-quiet); - - /* ——— Accent ——— */ - --color-accent-fill-loud: var(--c-color-accent-fill-loud); - --color-accent-fill-normal: var(--c-color-accent-fill-normal); + /* ——— accent ——— */ --color-accent-fill-quiet: var(--c-color-accent-fill-quiet); - --color-accent-border-loud: var(--c-color-accent-border-loud); - --color-accent-border-normal: var(--c-color-accent-border-normal); + --color-accent-fill-normal: var(--c-color-accent-fill-normal); + --color-accent-fill-loud: var(--c-color-accent-fill-loud); --color-accent-border-quiet: var(--c-color-accent-border-quiet); - --color-accent-on-loud: var(--c-color-accent-on-loud); - --color-accent-on-normal: var(--c-color-accent-on-normal); + --color-accent-border-normal: var(--c-color-accent-border-normal); + --color-accent-border-loud: var(--c-color-accent-border-loud); --color-accent-on-quiet: var(--c-color-accent-on-quiet); + --color-accent-on-normal: var(--c-color-accent-on-normal); + --color-accent-on-loud: var(--c-color-accent-on-loud); - /* ——— Info ——— */ - --color-info-fill-loud: var(--c-color-info-fill-loud); - --color-info-fill-normal: var(--c-color-info-fill-normal); + /* ——— info ——— */ --color-info-fill-quiet: var(--c-color-info-fill-quiet); - --color-info-border-loud: var(--c-color-info-border-loud); - --color-info-border-normal: var(--c-color-info-border-normal); + --color-info-fill-normal: var(--c-color-info-fill-normal); + --color-info-fill-loud: var(--c-color-info-fill-loud); --color-info-border-quiet: var(--c-color-info-border-quiet); - --color-info-on-loud: var(--c-color-info-on-loud); - --color-info-on-normal: var(--c-color-info-on-normal); + --color-info-border-normal: var(--c-color-info-border-normal); + --color-info-border-loud: var(--c-color-info-border-loud); --color-info-on-quiet: var(--c-color-info-on-quiet); + --color-info-on-normal: var(--c-color-info-on-normal); + --color-info-on-loud: var(--c-color-info-on-loud); - /* ——— Success ——— */ - --color-success-fill-loud: var(--c-color-success-fill-loud); - --color-success-fill-normal: var(--c-color-success-fill-normal); + /* ——— success ——— */ --color-success-fill-quiet: var(--c-color-success-fill-quiet); - --color-success-border-loud: var(--c-color-success-border-loud); - --color-success-border-normal: var(--c-color-success-border-normal); + --color-success-fill-normal: var(--c-color-success-fill-normal); + --color-success-fill-loud: var(--c-color-success-fill-loud); --color-success-border-quiet: var(--c-color-success-border-quiet); - --color-success-on-loud: var(--c-color-success-on-loud); - --color-success-on-normal: var(--c-color-success-on-normal); + --color-success-border-normal: var(--c-color-success-border-normal); + --color-success-border-loud: var(--c-color-success-border-loud); --color-success-on-quiet: var(--c-color-success-on-quiet); + --color-success-on-normal: var(--c-color-success-on-normal); + --color-success-on-loud: var(--c-color-success-on-loud); - /* ——— Warning ——— */ - --color-warning-fill-loud: var(--c-color-warning-fill-loud); - --color-warning-fill-normal: var(--c-color-warning-fill-normal); + /* ——— warning ——— */ --color-warning-fill-quiet: var(--c-color-warning-fill-quiet); - --color-warning-border-loud: var(--c-color-warning-border-loud); - --color-warning-border-normal: var(--c-color-warning-border-normal); + --color-warning-fill-normal: var(--c-color-warning-fill-normal); + --color-warning-fill-loud: var(--c-color-warning-fill-loud); --color-warning-border-quiet: var(--c-color-warning-border-quiet); - --color-warning-on-loud: var(--c-color-warning-on-loud); - --color-warning-on-normal: var(--c-color-warning-on-normal); + --color-warning-border-normal: var(--c-color-warning-border-normal); + --color-warning-border-loud: var(--c-color-warning-border-loud); --color-warning-on-quiet: var(--c-color-warning-on-quiet); + --color-warning-on-normal: var(--c-color-warning-on-normal); + --color-warning-on-loud: var(--c-color-warning-on-loud); - /* ——— Danger ——— */ - --color-danger-fill-loud: var(--c-color-danger-fill-loud); - --color-danger-fill-normal: var(--c-color-danger-fill-normal); + /* ——— danger ——— */ --color-danger-fill-quiet: var(--c-color-danger-fill-quiet); - --color-danger-border-loud: var(--c-color-danger-border-loud); - --color-danger-border-normal: var(--c-color-danger-border-normal); + --color-danger-fill-normal: var(--c-color-danger-fill-normal); + --color-danger-fill-loud: var(--c-color-danger-fill-loud); --color-danger-border-quiet: var(--c-color-danger-border-quiet); - --color-danger-on-loud: var(--c-color-danger-on-loud); - --color-danger-on-normal: var(--c-color-danger-on-normal); + --color-danger-border-normal: var(--c-color-danger-border-normal); + --color-danger-border-loud: var(--c-color-danger-border-loud); --color-danger-on-quiet: var(--c-color-danger-on-quiet); + --color-danger-on-normal: var(--c-color-danger-on-normal); + --color-danger-on-loud: var(--c-color-danger-on-loud); + + /* ——— red ——— */ + --color-red-fill-quiet: var(--c-color-red-fill-quiet); + --color-red-fill-normal: var(--c-color-red-fill-normal); + --color-red-fill-loud: var(--c-color-red-fill-loud); + --color-red-border-quiet: var(--c-color-red-border-quiet); + --color-red-border-normal: var(--c-color-red-border-normal); + --color-red-border-loud: var(--c-color-red-border-loud); + --color-red-on-quiet: var(--c-color-red-on-quiet); + --color-red-on-normal: var(--c-color-red-on-normal); + --color-red-on-loud: var(--c-color-red-on-loud); + + /* ——— orange ——— */ + --color-orange-fill-quiet: var(--c-color-orange-fill-quiet); + --color-orange-fill-normal: var(--c-color-orange-fill-normal); + --color-orange-fill-loud: var(--c-color-orange-fill-loud); + --color-orange-border-quiet: var(--c-color-orange-border-quiet); + --color-orange-border-normal: var(--c-color-orange-border-normal); + --color-orange-border-loud: var(--c-color-orange-border-loud); + --color-orange-on-quiet: var(--c-color-orange-on-quiet); + --color-orange-on-normal: var(--c-color-orange-on-normal); + --color-orange-on-loud: var(--c-color-orange-on-loud); + + /* ——— amber ——— */ + --color-amber-fill-quiet: var(--c-color-amber-fill-quiet); + --color-amber-fill-normal: var(--c-color-amber-fill-normal); + --color-amber-fill-loud: var(--c-color-amber-fill-loud); + --color-amber-border-quiet: var(--c-color-amber-border-quiet); + --color-amber-border-normal: var(--c-color-amber-border-normal); + --color-amber-border-loud: var(--c-color-amber-border-loud); + --color-amber-on-quiet: var(--c-color-amber-on-quiet); + --color-amber-on-normal: var(--c-color-amber-on-normal); + --color-amber-on-loud: var(--c-color-amber-on-loud); + + /* ——— yellow ——— */ + --color-yellow-fill-quiet: var(--c-color-yellow-fill-quiet); + --color-yellow-fill-normal: var(--c-color-yellow-fill-normal); + --color-yellow-fill-loud: var(--c-color-yellow-fill-loud); + --color-yellow-border-quiet: var(--c-color-yellow-border-quiet); + --color-yellow-border-normal: var(--c-color-yellow-border-normal); + --color-yellow-border-loud: var(--c-color-yellow-border-loud); + --color-yellow-on-quiet: var(--c-color-yellow-on-quiet); + --color-yellow-on-normal: var(--c-color-yellow-on-normal); + --color-yellow-on-loud: var(--c-color-yellow-on-loud); + + /* ——— lime ——— */ + --color-lime-fill-quiet: var(--c-color-lime-fill-quiet); + --color-lime-fill-normal: var(--c-color-lime-fill-normal); + --color-lime-fill-loud: var(--c-color-lime-fill-loud); + --color-lime-border-quiet: var(--c-color-lime-border-quiet); + --color-lime-border-normal: var(--c-color-lime-border-normal); + --color-lime-border-loud: var(--c-color-lime-border-loud); + --color-lime-on-quiet: var(--c-color-lime-on-quiet); + --color-lime-on-normal: var(--c-color-lime-on-normal); + --color-lime-on-loud: var(--c-color-lime-on-loud); + + /* ——— green ——— */ + --color-green-fill-quiet: var(--c-color-green-fill-quiet); + --color-green-fill-normal: var(--c-color-green-fill-normal); + --color-green-fill-loud: var(--c-color-green-fill-loud); + --color-green-border-quiet: var(--c-color-green-border-quiet); + --color-green-border-normal: var(--c-color-green-border-normal); + --color-green-border-loud: var(--c-color-green-border-loud); + --color-green-on-quiet: var(--c-color-green-on-quiet); + --color-green-on-normal: var(--c-color-green-on-normal); + --color-green-on-loud: var(--c-color-green-on-loud); + + /* ——— emerald ——— */ + --color-emerald-fill-quiet: var(--c-color-emerald-fill-quiet); + --color-emerald-fill-normal: var(--c-color-emerald-fill-normal); + --color-emerald-fill-loud: var(--c-color-emerald-fill-loud); + --color-emerald-border-quiet: var(--c-color-emerald-border-quiet); + --color-emerald-border-normal: var(--c-color-emerald-border-normal); + --color-emerald-border-loud: var(--c-color-emerald-border-loud); + --color-emerald-on-quiet: var(--c-color-emerald-on-quiet); + --color-emerald-on-normal: var(--c-color-emerald-on-normal); + --color-emerald-on-loud: var(--c-color-emerald-on-loud); + + /* ——— teal ——— */ + --color-teal-fill-quiet: var(--c-color-teal-fill-quiet); + --color-teal-fill-normal: var(--c-color-teal-fill-normal); + --color-teal-fill-loud: var(--c-color-teal-fill-loud); + --color-teal-border-quiet: var(--c-color-teal-border-quiet); + --color-teal-border-normal: var(--c-color-teal-border-normal); + --color-teal-border-loud: var(--c-color-teal-border-loud); + --color-teal-on-quiet: var(--c-color-teal-on-quiet); + --color-teal-on-normal: var(--c-color-teal-on-normal); + --color-teal-on-loud: var(--c-color-teal-on-loud); + + /* ——— cyan ——— */ + --color-cyan-fill-quiet: var(--c-color-cyan-fill-quiet); + --color-cyan-fill-normal: var(--c-color-cyan-fill-normal); + --color-cyan-fill-loud: var(--c-color-cyan-fill-loud); + --color-cyan-border-quiet: var(--c-color-cyan-border-quiet); + --color-cyan-border-normal: var(--c-color-cyan-border-normal); + --color-cyan-border-loud: var(--c-color-cyan-border-loud); + --color-cyan-on-quiet: var(--c-color-cyan-on-quiet); + --color-cyan-on-normal: var(--c-color-cyan-on-normal); + --color-cyan-on-loud: var(--c-color-cyan-on-loud); + + /* ——— sky ——— */ + --color-sky-fill-quiet: var(--c-color-sky-fill-quiet); + --color-sky-fill-normal: var(--c-color-sky-fill-normal); + --color-sky-fill-loud: var(--c-color-sky-fill-loud); + --color-sky-border-quiet: var(--c-color-sky-border-quiet); + --color-sky-border-normal: var(--c-color-sky-border-normal); + --color-sky-border-loud: var(--c-color-sky-border-loud); + --color-sky-on-quiet: var(--c-color-sky-on-quiet); + --color-sky-on-normal: var(--c-color-sky-on-normal); + --color-sky-on-loud: var(--c-color-sky-on-loud); + + /* ——— blue ——— */ + --color-blue-fill-quiet: var(--c-color-blue-fill-quiet); + --color-blue-fill-normal: var(--c-color-blue-fill-normal); + --color-blue-fill-loud: var(--c-color-blue-fill-loud); + --color-blue-border-quiet: var(--c-color-blue-border-quiet); + --color-blue-border-normal: var(--c-color-blue-border-normal); + --color-blue-border-loud: var(--c-color-blue-border-loud); + --color-blue-on-quiet: var(--c-color-blue-on-quiet); + --color-blue-on-normal: var(--c-color-blue-on-normal); + --color-blue-on-loud: var(--c-color-blue-on-loud); + + /* ——— indigo ——— */ + --color-indigo-fill-quiet: var(--c-color-indigo-fill-quiet); + --color-indigo-fill-normal: var(--c-color-indigo-fill-normal); + --color-indigo-fill-loud: var(--c-color-indigo-fill-loud); + --color-indigo-border-quiet: var(--c-color-indigo-border-quiet); + --color-indigo-border-normal: var(--c-color-indigo-border-normal); + --color-indigo-border-loud: var(--c-color-indigo-border-loud); + --color-indigo-on-quiet: var(--c-color-indigo-on-quiet); + --color-indigo-on-normal: var(--c-color-indigo-on-normal); + --color-indigo-on-loud: var(--c-color-indigo-on-loud); + + /* ——— violet ——— */ + --color-violet-fill-quiet: var(--c-color-violet-fill-quiet); + --color-violet-fill-normal: var(--c-color-violet-fill-normal); + --color-violet-fill-loud: var(--c-color-violet-fill-loud); + --color-violet-border-quiet: var(--c-color-violet-border-quiet); + --color-violet-border-normal: var(--c-color-violet-border-normal); + --color-violet-border-loud: var(--c-color-violet-border-loud); + --color-violet-on-quiet: var(--c-color-violet-on-quiet); + --color-violet-on-normal: var(--c-color-violet-on-normal); + --color-violet-on-loud: var(--c-color-violet-on-loud); + + /* ——— purple ——— */ + --color-purple-fill-quiet: var(--c-color-purple-fill-quiet); + --color-purple-fill-normal: var(--c-color-purple-fill-normal); + --color-purple-fill-loud: var(--c-color-purple-fill-loud); + --color-purple-border-quiet: var(--c-color-purple-border-quiet); + --color-purple-border-normal: var(--c-color-purple-border-normal); + --color-purple-border-loud: var(--c-color-purple-border-loud); + --color-purple-on-quiet: var(--c-color-purple-on-quiet); + --color-purple-on-normal: var(--c-color-purple-on-normal); + --color-purple-on-loud: var(--c-color-purple-on-loud); + + /* ——— fuchsia ——— */ + --color-fuchsia-fill-quiet: var(--c-color-fuchsia-fill-quiet); + --color-fuchsia-fill-normal: var(--c-color-fuchsia-fill-normal); + --color-fuchsia-fill-loud: var(--c-color-fuchsia-fill-loud); + --color-fuchsia-border-quiet: var(--c-color-fuchsia-border-quiet); + --color-fuchsia-border-normal: var(--c-color-fuchsia-border-normal); + --color-fuchsia-border-loud: var(--c-color-fuchsia-border-loud); + --color-fuchsia-on-quiet: var(--c-color-fuchsia-on-quiet); + --color-fuchsia-on-normal: var(--c-color-fuchsia-on-normal); + --color-fuchsia-on-loud: var(--c-color-fuchsia-on-loud); + + /* ——— pink ——— */ + --color-pink-fill-quiet: var(--c-color-pink-fill-quiet); + --color-pink-fill-normal: var(--c-color-pink-fill-normal); + --color-pink-fill-loud: var(--c-color-pink-fill-loud); + --color-pink-border-quiet: var(--c-color-pink-border-quiet); + --color-pink-border-normal: var(--c-color-pink-border-normal); + --color-pink-border-loud: var(--c-color-pink-border-loud); + --color-pink-on-quiet: var(--c-color-pink-on-quiet); + --color-pink-on-normal: var(--c-color-pink-on-normal); + --color-pink-on-loud: var(--c-color-pink-on-loud); + + /* ——— rose ——— */ + --color-rose-fill-quiet: var(--c-color-rose-fill-quiet); + --color-rose-fill-normal: var(--c-color-rose-fill-normal); + --color-rose-fill-loud: var(--c-color-rose-fill-loud); + --color-rose-border-quiet: var(--c-color-rose-border-quiet); + --color-rose-border-normal: var(--c-color-rose-border-normal); + --color-rose-border-loud: var(--c-color-rose-border-loud); + --color-rose-on-quiet: var(--c-color-rose-on-quiet); + --color-rose-on-normal: var(--c-color-rose-on-normal); + --color-rose-on-loud: var(--c-color-rose-on-loud); + + /* ——— white ——— */ + --color-white-fill-quiet: var(--c-color-white-fill-quiet); + --color-white-fill-normal: var(--c-color-white-fill-normal); + --color-white-fill-loud: var(--c-color-white-fill-loud); + --color-white-border-quiet: var(--c-color-white-border-quiet); + --color-white-border-normal: var(--c-color-white-border-normal); + --color-white-border-loud: var(--c-color-white-border-loud); + --color-white-on-quiet: var(--c-color-white-on-quiet); + --color-white-on-normal: var(--c-color-white-on-normal); + --color-white-on-loud: var(--c-color-white-on-loud); + + /* ——— gray ——— */ + --color-gray-fill-quiet: var(--c-color-gray-fill-quiet); + --color-gray-fill-normal: var(--c-color-gray-fill-normal); + --color-gray-fill-loud: var(--c-color-gray-fill-loud); + --color-gray-border-quiet: var(--c-color-gray-border-quiet); + --color-gray-border-normal: var(--c-color-gray-border-normal); + --color-gray-border-loud: var(--c-color-gray-border-loud); + --color-gray-on-quiet: var(--c-color-gray-on-quiet); + --color-gray-on-normal: var(--c-color-gray-on-normal); + --color-gray-on-loud: var(--c-color-gray-on-loud); + + /* ——— black ——— */ + --color-black-fill-quiet: var(--c-color-black-fill-quiet); + --color-black-fill-normal: var(--c-color-black-fill-normal); + --color-black-fill-loud: var(--c-color-black-fill-loud); + --color-black-border-quiet: var(--c-color-black-border-quiet); + --color-black-border-normal: var(--c-color-black-border-normal); + --color-black-border-loud: var(--c-color-black-border-loud); + --color-black-on-quiet: var(--c-color-black-on-quiet); + --color-black-on-normal: var(--c-color-black-on-normal); + --color-black-on-loud: var(--c-color-black-on-loud); - /* ——— Border utilities ——— */ - --color-border-faint: var(--c-color-neutral-border-quiet); - --color-border-subtle: var(--c-color-neutral-border-quiet); - --color-border-default: var(--c-color-neutral-border-normal); - --color-border-strong: var(--c-color-neutral-border-loud); - --color-border-form: var(--c-form-control-border-color); - - /* ——— Fill utilities ——— */ - --color-fill-quiet: var( - --c-color-fill-quiet, - var(--c-color-neutral-fill-quiet) - ); - --color-fill-normal: var( - --c-color-fill-normal, - var(--c-color-neutral-fill-normal) - ); - --color-fill-loud: var(--c-color-fill-loud, var(--c-color-neutral-fill-loud)); - - /* ——— Text utilities ——— */ - --color-on-quiet: var(--c-color-on-quiet, var(--c-color-neutral-on-quiet)); - --color-on-normal: var(--c-color-on-normal, var(--c-color-neutral-on-normal)); - --color-on-loud: var(--c-color-on-loud, var(--c-color-neutral-on-loud)); + /* ——— slate ——— */ + --color-slate-fill-quiet: var(--c-color-slate-fill-quiet); + --color-slate-fill-normal: var(--c-color-slate-fill-normal); + --color-slate-fill-loud: var(--c-color-slate-fill-loud); + --color-slate-border-quiet: var(--c-color-slate-border-quiet); + --color-slate-border-normal: var(--c-color-slate-border-normal); + --color-slate-border-loud: var(--c-color-slate-border-loud); + --color-slate-on-quiet: var(--c-color-slate-on-quiet); + --color-slate-on-normal: var(--c-color-slate-on-normal); + --color-slate-on-loud: var(--c-color-slate-on-loud); } diff --git a/resources/js/modules/elements/components/ElementContextMenu.vue b/resources/js/modules/elements/components/ElementContextMenu.vue index 8fa01cece01..b0a1fd358f7 100644 --- a/resources/js/modules/elements/components/ElementContextMenu.vue +++ b/resources/js/modules/elements/components/ElementContextMenu.vue @@ -27,8 +27,7 @@ h( 'h2', { - class: - 'px-2 pt-2 pb-1 text-xs font-bold text-neutral-text-quiet', + class: 'px-2 pt-2 pb-1 text-xs font-bold text-text-quiet', }, item.label ), diff --git a/resources/js/modules/elements/components/ElementEditor.vue b/resources/js/modules/elements/components/ElementEditor.vue index eb6589a0cae..4f9dde3f18b 100644 --- a/resources/js/modules/elements/components/ElementEditor.vue +++ b/resources/js/modules/elements/components/ElementEditor.vue @@ -155,10 +155,10 @@ --> {{ autosaveMessage }} {{ diff --git a/resources/js/modules/elements/components/FilterHud.vue b/resources/js/modules/elements/components/FilterHud.vue index 8a2fa9b13d7..c008993e391 100644 --- a/resources/js/modules/elements/components/FilterHud.vue +++ b/resources/js/modules/elements/components/FilterHud.vue @@ -98,7 +98,7 @@