diff --git a/packages/craftcms-legacy/cp/src/css/_main.scss b/packages/craftcms-legacy/cp/src/css/_main.scss index c318ee3830a..03a7101f51e 100644 --- a/packages/craftcms-legacy/cp/src/css/_main.scss +++ b/packages/craftcms-legacy/cp/src/css/_main.scss @@ -1154,33 +1154,15 @@ ul.icons { gap: var(--s); } -.gap-0 { - gap: 0; -} - -.gap-2xs { - gap: var(--2xs); -} - -.gap-xs { - gap: var(--xs); -} - -.gap-s { - gap: var(--s); -} - -.gap-m { - gap: var(--m); -} - -.gap-l { - gap: var(--l); -} - -.gap-xl { - gap: var(--xl); -} +/* +The gap utilities that lived here are gone; use the `cp:gap-*` utilities from +`resources/css/utilities.css`, which both CP shells now load. Note the scales +are named differently — legacy `--xs` is `--c-spacing-sm`, not `-xs` — so the +mapping shifts by one step: + + gap-2xs -> cp:gap-xs gap-s -> cp:gap-md gap-l -> cp:gap-lg + gap-xs -> cp:gap-sm gap-m -> cp:gap-lg gap-xl -> cp:gap-xl +*/ .spacer { width: 14px; diff --git a/packages/craftcms-legacy/cp/src/js/UI.js b/packages/craftcms-legacy/cp/src/js/UI.js index 56d9c61290c..cd408d14a80 100644 --- a/packages/craftcms-legacy/cp/src/js/UI.js +++ b/packages/craftcms-legacy/cp/src/js/UI.js @@ -32,7 +32,7 @@ Craft.ui = { } let $iconContainer; if (config.icon || config.label || config.html) { - const $labelContainer = $('
').appendTo( + const $labelContainer = $('
').appendTo( $btn ); if (config.icon) { diff --git a/packages/craftcms-ui/package.json b/packages/craftcms-ui/package.json index e20b513aa60..6c6d412400e 100644 --- a/packages/craftcms-ui/package.json +++ b/packages/craftcms-ui/package.json @@ -31,7 +31,7 @@ "build:storybook": "storybook build", "build:manifest": "custom-elements-manifest analyze --litelement --outdir dist", "generate:vue-wrappers": "node ./scripts/generate-vue-wrappers.js", - "generate:colors": "node ./scripts/generate-colors.js && node scripts/generate-color-palette.js" + "generate:colors": "node ./scripts/generate-colors.js && node scripts/generate-color-palette.js && node ./scripts/generate-tailwind.js" }, "exports": { "./package.json": "./package.json", diff --git a/packages/craftcms-ui/scripts/build.js b/packages/craftcms-ui/scripts/build.js index d61b6315868..810172d4c5a 100755 --- a/packages/craftcms-ui/scripts/build.js +++ b/packages/craftcms-ui/scripts/build.js @@ -10,6 +10,7 @@ import {dirname, join, relative, resolve} from 'path'; import {deleteAsync} from 'del'; import createVueWrappers from './generate-vue-wrappers.js'; import createColors from './generate-colors.js'; +import createTailwindTheme from './generate-tailwind.js'; const spinner = ora({text: '@craftcms/ui', color: 'red'}).start(); const isDeveloping = process.argv.includes('--develop'); @@ -250,6 +251,13 @@ async function generateColors() { return Promise.resolve(); } +async function generateTailwindTheme() { + spinner.start('Generating Tailwind Theme'); + await createTailwindTheme(); + spinner.succeed(); + return Promise.resolve(); +} + async function buildAll() { try { const steps = [ @@ -258,6 +266,7 @@ async function buildAll() { generateStyles, generateVueWrappers, generateColors, + generateTailwindTheme, generateBundle, pruneOrphanedChunks, assertDeclarationsResolved, diff --git a/packages/craftcms-ui/scripts/generate-colors.js b/packages/craftcms-ui/scripts/generate-colors.js index 7627b126b8e..bdd661c7180 100644 --- a/packages/craftcms-ui/scripts/generate-colors.js +++ b/packages/craftcms-ui/scripts/generate-colors.js @@ -1,28 +1,12 @@ -import {writeFileSync, readFileSync} from 'fs'; +import {writeFileSync} from 'fs'; import {dirname, resolve} from 'path'; import {fileURLToPath} from 'url'; -import {transformSync} from 'esbuild'; +import {loadColorData} from './utils.js'; 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 DATA_FILE = resolve(ROOT, 'src/constants/colors.data.ts'); - -/* -The canonical color data lives in src/constants/colors.data.ts (shared with -constants/colors.ts). This script can't import TypeScript directly, so we -transpile it with esbuild and import the result. - */ -async function loadColorData() { - const {code} = transformSync(readFileSync(DATA_FILE, 'utf8'), { - loader: 'ts', - format: 'esm', - }); - return import( - `data:text/javascript;base64,${Buffer.from(code).toString('base64')}` - ); -} const colorIncrements = { fill: { @@ -127,18 +111,51 @@ function buildSemanticTokens(semanticColors) { return declarations.join('\n\n'); } +/** + * The generic tokens, remapped to one color group. + * + * Anything carrying a palette selector paints in that group, and so does + * everything under it: components author against the generic tokens, so they + * inherit the group without knowing which one is active. + */ +function buildDeclarations(color, indent = ' ') { + return ['fill', 'border', 'on'] + .flatMap((role) => + ['quiet', 'normal', 'loud'].map( + (strength) => + `${indent}--c-color-${role}-${strength}: var(--c-color-${color}-${role}-${strength});` + ) + ) + .join('\n'); +} + +/** + * The selectors that put an element in a color group. + * + * `.cp-palette-*` and `[data-palette]` are the current spellings — the class + * follows the CP's `.cp-*` class convention, and the attribute matches the + * class, so the two read as one idea rather than two. It is a plain stylesheet + * rule, not a Tailwind utility, so it carries no `cp:` prefix and works in the + * legacy shell and inside shadow roots as well. + * + * `.cp-color-*` and `[data-color]` are the Craft 5 spellings. They stay on the + * same rule so existing markup and plugins keep working; new code should reach + * for the palette spellings. Note that `[data-color]` is *not* the same axis as + * `[data-theme='dark']`, which selects the light/dark color scheme — which is + * why this one couldn't simply become `data-theme`. + */ +function paletteSelectors(color) { + return [ + `.cp-palette-${color}`, + `[data-palette='${color}']`, + `.cp-color-${color}`, + `[data-color='${color}']`, + ]; +} + function buildStyleBlock(color) { - return `.cp-color-${color}, -[data-color='${color}'] { - --c-color-fill-quiet: var(--c-color-${color}-fill-quiet); - --c-color-border-quiet: var(--c-color-${color}-border-quiet); - --c-color-on-quiet: var(--c-color-${color}-on-quiet); - --c-color-fill-normal: var(--c-color-${color}-fill-normal); - --c-color-border-normal: var(--c-color-${color}-border-normal); - --c-color-on-normal: var(--c-color-${color}-on-normal); - --c-color-fill-loud: var(--c-color-${color}-fill-loud); - --c-color-border-loud: var(--c-color-${color}-border-loud); - --c-color-on-loud: var(--c-color-${color}-on-loud); + return `${paletteSelectors(color).join(',\n')} { +${buildDeclarations(color)} }`; } @@ -164,15 +181,7 @@ ${[...paletteColors, ...Object.keys(semanticColors)] */ function buildLitBlock(selectors, color) { return ` ${selectors.join(',\n ')} { - --c-color-fill-quiet: var(--c-color-${color}-fill-quiet); - --c-color-border-quiet: var(--c-color-${color}-border-quiet); - --c-color-on-quiet: var(--c-color-${color}-on-quiet); - --c-color-fill-normal: var(--c-color-${color}-fill-normal); - --c-color-border-normal: var(--c-color-${color}-border-normal); - --c-color-on-normal: var(--c-color-${color}-on-normal); - --c-color-fill-loud: var(--c-color-${color}-fill-loud); - --c-color-border-loud: var(--c-color-${color}-border-loud); - --c-color-on-loud: var(--c-color-${color}-on-loud); +${buildDeclarations(color, ' ')} }`; } @@ -180,7 +189,12 @@ function generateLitStyles(paletteColors, semanticColors) { const palette = [...paletteColors, ...Object.keys(semanticColors)] .map((color) => buildLitBlock( - [`:host([data-color='${color}'])`, `[data-color='${color}']`], + [ + `:host([data-palette='${color}'])`, + `[data-palette='${color}']`, + `:host([data-color='${color}'])`, + `[data-color='${color}']`, + ], color ) ) @@ -204,9 +218,9 @@ import {css} from 'lit'; * chip, a badge, an icon). Most components want {@link variantStyles} instead * — this is every color in the system, so adopting it isn't free. * - * Matches a host carrying \`data-color\`, or any element inside the shadow - * root that carries it, mirroring the \`[data-color]\` rules in - * \`shared/colorable.css\`. + * Matches a host carrying \`data-palette\` (or its deprecated \`data-color\` + * spelling), or any element inside the shadow root that carries it, mirroring + * the palette rules in \`shared/colorable.css\`. */ export const paletteStyles = css\` ${palette} diff --git a/packages/craftcms-ui/scripts/generate-tailwind.js b/packages/craftcms-ui/scripts/generate-tailwind.js new file mode 100644 index 00000000000..99c515305da --- /dev/null +++ b/packages/craftcms-ui/scripts/generate-tailwind.js @@ -0,0 +1,174 @@ +import {writeFileSync} from 'fs'; +import {dirname, resolve} from 'path'; +import {fileURLToPath} from 'url'; +import {loadColorData} from './utils.js'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const ROOT = resolve(__dirname, '..'); +const OUT_FILE = resolve(ROOT, 'tailwind.css'); + +/** + * Utility names are unprefixed. CP code only ever runs in the CP, where this + * is the only Tailwind there is, so there is nothing to disambiguate a Craft + * utility from at the point of use — `bg-loud` reads no differently than + * `flex`, and both are equally the CP's. + */ + +/** The three intensities every colorable token group exposes. */ +const strengths = ['quiet', 'normal', 'loud']; + +/** + * The named steps on Craft's spacing scale. + * + * The scale's `--c-spacing` base is deliberately left out: it's the unit the + * other steps multiply, not a step you'd reach for on an element. + */ +const spacingSteps = ['1px', 'xs', 'sm', 'md', 'lg', 'xl', '2xl']; + +/** + * Utility stem → property, matching Tailwind's own spacing utilities so + * `c-px-md` means what `px-4` means: `x`/`y` are logical (`padding-inline`), + * `s`/`e` are the logical edges, and `t`/`r`/`b`/`l` stay physical. + */ +const spacingProperties = [ + ['p', 'padding'], + ['px', 'padding-inline'], + ['py', 'padding-block'], + ['ps', 'padding-inline-start'], + ['pe', 'padding-inline-end'], + ['pt', 'padding-top'], + ['pr', 'padding-right'], + ['pb', 'padding-bottom'], + ['pl', 'padding-left'], + ['m', 'margin'], + ['mx', 'margin-inline'], + ['my', 'margin-block'], + ['ms', 'margin-inline-start'], + ['me', 'margin-inline-end'], + ['mt', 'margin-top'], + ['mr', 'margin-right'], + ['mb', 'margin-bottom'], + ['ml', 'margin-left'], + ['gap', 'gap'], + ['gap-x', 'column-gap'], + ['gap-y', 'row-gap'], +]; + +function utility(name, declarations) { + return [ + `@utility ${name} {`, + ...declarations.map(([property, value]) => ` ${property}: ${value};`), + '}', + ].join('\n'); +} + +function section(heading, rules) { + return [`/* ——— ${heading} ——— */`, '', rules.join('\n\n')].join('\n'); +} + +/** + * The four color utilities a token group exposes, at each strength. + * + * `group` is a semantic name (`danger`) or `null` for the generic tokens, + * which hold whatever the nearest `[data-color]` / `variant` resolved to. + * The role is implied by the property rather than spelled in the class: + * `fill` paints backgrounds, `border` paints borders, `on` paints the text + * that sits *on* a fill. Text gets both — `c-text-loud` uses the fill color + * as ink, `c-text-on-loud` uses the color meant to be legible against it. + */ +function colorUtilities(group) { + const token = (role, strength) => + `var(--c-color-${group ? `${group}-` : ''}${role}-${strength})`; + const name = (stem, strength) => + `${stem}-${group ? `${group}-` : ''}${strength}`; + + return strengths.flatMap((strength) => [ + utility(name('bg', strength), [ + ['background-color', token('fill', strength)], + ]), + utility(name('text', strength), [['color', token('fill', strength)]]), + utility(name('text-on', strength), [['color', token('on', strength)]]), + utility(name('border', strength), [ + ['border-color', token('border', strength)], + ]), + ]); +} + +function spacingUtilities() { + return spacingProperties.flatMap(([stem, property]) => + spacingSteps.map((step) => + utility(`${stem}-${step}`, [[property, `var(--c-spacing-${step})`]]) + ) + ); +} + +/** + * Craft's design tokens, republished as prefixed Tailwind utility classes. + * + * Colors cover the generic contextual tokens plus the semantic groups. The + * raw palette (`--c-color-red-*` and friends) stays reachable from CSS and + * from `[data-color]`, but isn't worth ~750 utility classes here. + */ +function generateUtilities(semanticColors) { + const sections = [ + section('Colors — current context', colorUtilities(null)), + ...Object.keys(semanticColors).map((group) => + section(`Colors — ${group}`, colorUtilities(group)) + ), + section('Spacing', spacingUtilities()), + ]; + + return `/* Auto-generated by scripts/generate-tailwind.js — do not edit manually */ + +/** + * Craft CMS Control Panel — Tailwind v4 utilities. + * + * Craft's design tokens as utility classes, unprefixed and sitting alongside + * stock Tailwind: \`bg-loud\` next to \`flex\`, \`p-md\` next to \`p-4\`. + * CP code only ever runs in the CP, so there is no raw-Tailwind context to + * tell these apart from. + * + * Colors read as \`-[group-]\`. The token's *role* is + * implied by the property rather than repeated in the class name: + * + * bg-loud background-color: --c-color-fill-loud + * bg-danger-normal background-color: --c-color-danger-fill-normal + * border-accent-quiet border-color: --c-color-accent-border-quiet + * text-loud color: --c-color-fill-loud + * text-on-loud color: --c-color-on-loud + * text-on-neutral-loud color: --c-color-neutral-on-loud + * + * Text is the one property that takes two roles: \`text-*\` inks with the + * fill color, \`text-on-*\` with the color meant to stay legible on top of + * that fill. + * + * Omitting the group targets the generic tokens, which hold whatever the + * nearest palette or \`variant\` resolved to — so \`bg-quiet\` paints with + * the current context's quiet fill instead of naming a color. + * + * Spacing reads as \`-\` across padding, margin, and gap: + * \`p-md\`, \`gap-lg\`, \`mt-2xl\`. Stems match Tailwind's own, so + * \`px-*\` is logical (\`padding-inline\`) and \`pl-*\` is physical, and + * the numeric scale (\`p-4\`) is untouched alongside them. + * + * This file is imported by \`resources/css/utilities.css\`, which is where + * the token values it resolves against are set up. It has to be imported + * *outside* a layer: \`@utility\` may not be nested, and Tailwind places + * what it generates into the \`utilities\` layer regardless. + */ + +${sections.join('\n\n')} +`; +} + +export default async function main() { + const {semanticColors} = await loadColorData(); + writeFileSync(OUT_FILE, generateUtilities(semanticColors)); + console.log(`Generated ${OUT_FILE}`); +} + +// Run when invoked directly (node scripts/generate-tailwind.js), but not when +// imported by build.js (which awaits the default export instead). +if (import.meta.url === `file://${process.argv[1]}`) { + main(); +} diff --git a/packages/craftcms-ui/scripts/utils.js b/packages/craftcms-ui/scripts/utils.js index a4037c54b3e..47e7162c93d 100644 --- a/packages/craftcms-ui/scripts/utils.js +++ b/packages/craftcms-ui/scripts/utils.js @@ -1,6 +1,8 @@ import {globby} from 'globby'; -import {dirname} from 'path'; +import {readFileSync} from 'fs'; +import {dirname, resolve} from 'path'; import {fileURLToPath} from 'node:url'; +import {transformSync} from 'esbuild'; const __dirname = dirname(fileURLToPath(import.meta.url)); export const getRootDir = () => process.env.ROOT_DIR || dirname(__dirname); @@ -21,3 +23,19 @@ export async function resolveFrom(pattern) { return acc; }, {}); } + +/* +The canonical color data lives in src/constants/colors.data.ts (shared with +constants/colors.ts). Scripts can't import TypeScript directly, so we transpile +it with esbuild and import the result. + */ +export async function loadColorData() { + const dataFile = resolve(getRootDir(), 'src/constants/colors.data.ts'); + const {code} = transformSync(readFileSync(dataFile, 'utf8'), { + loader: 'ts', + format: 'esm', + }); + return import( + `data:text/javascript;base64,${Buffer.from(code).toString('base64')}` + ); +} diff --git a/packages/craftcms-ui/src/stories/tokens/Docs.mdx b/packages/craftcms-ui/src/stories/tokens/Docs.mdx index a620f539cf5..d7e0bef68e5 100644 --- a/packages/craftcms-ui/src/stories/tokens/Docs.mdx +++ b/packages/craftcms-ui/src/stories/tokens/Docs.mdx @@ -193,7 +193,7 @@ your shadow root can ask for by attribute: html`
`; ``` -That's the shadow-DOM twin of the `[data-color]` rules in +That's the shadow-DOM twin of the `[data-palette]` rules in `shared/colorable.css`, which only reach light DOM. The tokens are ordinary custom properties, so a region set this way overrides the palette it inherits from the host — and a region that should stay neutral while the host is @@ -230,3 +230,151 @@ 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 + +The CP's stylesheet turns Craft's design tokens into Tailwind utility classes. +They are unprefixed, and they sit alongside stock Tailwind: + +```html +
+``` + +CP code only ever runs in the CP, where this is the only Tailwind there is, so +there is nothing to disambiguate a Craft utility from at the point of use — +`bg-loud` is no less "ours" than `flex`. + +### Colors + +Color utilities read as `-[group-]`. A token's _role_ is +implied by the property rather than repeated in the class name — `fill` paints +backgrounds, `border` paints borders, and `on` paints the text that sits _on_ a +fill: + +| Utility | Token | +| ---------------------- | ------------------------------- | +| `bg-danger-normal` | `--c-color-danger-fill-normal` | +| `border-accent-quiet` | `--c-color-accent-border-quiet` | +| `text-on-neutral-loud` | `--c-color-neutral-on-loud` | +| `text-neutral-loud` | `--c-color-neutral-fill-loud` | + +Text is the one property that takes two roles. `text-*` inks with the fill +color, for text that carries the color itself; `text-on-*` inks with the color +meant to stay legible _against_ that fill, for text sitting on top of it: + +```html + +

Something went wrong

+ + +
Something went wrong
+``` + +Omit the group and you get the generic tokens, which is usually what you want +inside a component: `bg-quiet`, `border-normal`, and `text-on-loud` paint with +whatever the nearest palette or `variant` resolved to, rather than naming a +color up front. + +`border-*` sets `border-color` only, exactly as Tailwind's own color utilities +do — pair it with `border` for a width. + +Scope is deliberately narrow: the six semantic groups plus the generic tokens. +The raw palette (`--c-color-red-*` and friends) is still reachable from CSS and +from a palette selector, it just doesn't get utility classes. + +### Palette selectors + +`cp-palette-*` puts an element — and everything under it — into a color group, +remapping the generic tokens to that group's: + +```html +
+ + … +
+``` + +This one keeps the CP's `.cp-*` class prefix because it isn't a utility — it's +a plain stylesheet rule that sets context, and it works in the legacy shell and +inside shadow roots where Tailwind's output doesn't reach. +`[data-palette='danger']` does the same thing from an attribute, for markup +that is easier to set programmatically. The Craft 5 spellings `.cp-color-*` and +`[data-color]` still work and resolve to the same rule. + +This is a different axis from `[data-theme='dark']`, which selects the +light/dark color scheme — which is why the palette attribute isn't called +`data-theme`. + +### Spacing + +Spacing reads as `-` across padding, margin, and gap. The stems +match Tailwind's own, so `px-*` is logical (`padding-inline`) and `pl-*` is +physical: + +| Token | Utilities | +| ----------------- | ---------------------------- | +| `--c-spacing-sm` | `p-sm`, `gap-sm`, `mx-sm`, … | +| `--c-spacing-2xl` | `p-2xl`, `mt-2xl`, … | +| `--c-spacing-1px` | `p-1px`, `gap-1px`, … | + +The numeric scale is untouched and sits right alongside — `p-4` still resolves +through Tailwind's own spacing base. The scale's `--c-spacing` base gets no +utilities of its own: it's the unit the named steps multiply, not a step you'd +reach for on an element. + +### How it's wired up + +`resources/css/utilities.css` is the entry that pulls in the token values, +Tailwind, and Craft's utilities. **Both CP shells load it** — the Inertia shell +through `cp.css`, and the legacy Twig shell on its own via `CpAsset` — so a +utility class means the same thing on either side, and the `--c-*` tokens that +the legacy stylesheet's compatibility aliases resolve against are actually +defined there. + +```css +@layer theme, utilities; + +@import 'tailwindcss/theme.css' layer(theme); +@import 'tailwindcss/utilities.css' layer(utilities); + +@import '@craftcms/ui/styles/shared/variables.css' layer(theme); +@import '@craftcms/ui/styles/shared/tokens.css' layer(theme); +@import '@craftcms/ui/styles/shared/colorable.css' layer(theme); + +@import '@craftcms/ui/tailwind.css'; +``` + +That last import takes no `layer()`: `@utility` may not be nested, and a +layered import would nest it. Tailwind places what it generates into the +`utilities` layer regardless. + +Tailwind's default theme stays in place underneath Craft's. Where the two name +the same thing, Craft's wins — the token imports come after Tailwind's in the +same layer, so `--color-red-500` and friends resolve to the Craft palette. + +The utilities reference the `--c-*` custom properties rather than snapshotting +their values, so `[data-theme='dark']` overrides and palette context both flow +through them untouched. + +`tailwind.css` is generated by `scripts/generate-tailwind.js` (colors come +from `src/constants/colors.data.ts`, the same source as `shared/colorable.css`), +so adding a semantic color there gives you its utilities for free. Don't edit +it by hand. + +### Where the legacy bundle still wins + +The old SCSS bundle is unlayered, and unlayered rules outrank anything in a +cascade layer — so wherever it defines a class Tailwind also generates, the +legacy rule wins. Three names overlap today: + +| Class | Legacy definition | +| ------------- | ------------------------------------------------------------ | +| `hidden` | `display: none !important` — Tailwind's has no `!important` | +| `inline-flex` | also sets `align-items`, `align-content` and `gap: var(--s)` | +| `truncate` | the same declarations as Tailwind's — no visible difference | + +This is the pre-existing behaviour, not something the utility entry introduced, +and it goes away as the legacy bundle is dismantled. Until then, `hidden` and +`inline-flex` do more than their Tailwind namesakes. diff --git a/packages/craftcms-ui/src/styles/colorable.styles.ts b/packages/craftcms-ui/src/styles/colorable.styles.ts index b3c88459049..f3b411bf744 100644 --- a/packages/craftcms-ui/src/styles/colorable.styles.ts +++ b/packages/craftcms-ui/src/styles/colorable.styles.ts @@ -7,359 +7,413 @@ import {css} from 'lit'; * chip, a badge, an icon). Most components want {@link variantStyles} instead * — this is every color in the system, so adopting it isn't free. * - * Matches a host carrying `data-color`, or any element inside the shadow - * root that carries it, mirroring the `[data-color]` rules in - * `shared/colorable.css`. + * Matches a host carrying `data-palette` (or its deprecated `data-color` + * spelling), or any element inside the shadow root that carries it, mirroring + * the palette rules in `shared/colorable.css`. */ export const paletteStyles = css` + :host([data-palette='red']), + [data-palette='red'], :host([data-color='red']), [data-color='red'] { --c-color-fill-quiet: var(--c-color-red-fill-quiet); - --c-color-border-quiet: var(--c-color-red-border-quiet); - --c-color-on-quiet: var(--c-color-red-on-quiet); --c-color-fill-normal: var(--c-color-red-fill-normal); - --c-color-border-normal: var(--c-color-red-border-normal); - --c-color-on-normal: var(--c-color-red-on-normal); --c-color-fill-loud: var(--c-color-red-fill-loud); + --c-color-border-quiet: var(--c-color-red-border-quiet); + --c-color-border-normal: var(--c-color-red-border-normal); --c-color-border-loud: var(--c-color-red-border-loud); + --c-color-on-quiet: var(--c-color-red-on-quiet); + --c-color-on-normal: var(--c-color-red-on-normal); --c-color-on-loud: var(--c-color-red-on-loud); } + :host([data-palette='orange']), + [data-palette='orange'], :host([data-color='orange']), [data-color='orange'] { --c-color-fill-quiet: var(--c-color-orange-fill-quiet); - --c-color-border-quiet: var(--c-color-orange-border-quiet); - --c-color-on-quiet: var(--c-color-orange-on-quiet); --c-color-fill-normal: var(--c-color-orange-fill-normal); - --c-color-border-normal: var(--c-color-orange-border-normal); - --c-color-on-normal: var(--c-color-orange-on-normal); --c-color-fill-loud: var(--c-color-orange-fill-loud); + --c-color-border-quiet: var(--c-color-orange-border-quiet); + --c-color-border-normal: var(--c-color-orange-border-normal); --c-color-border-loud: var(--c-color-orange-border-loud); + --c-color-on-quiet: var(--c-color-orange-on-quiet); + --c-color-on-normal: var(--c-color-orange-on-normal); --c-color-on-loud: var(--c-color-orange-on-loud); } + :host([data-palette='amber']), + [data-palette='amber'], :host([data-color='amber']), [data-color='amber'] { --c-color-fill-quiet: var(--c-color-amber-fill-quiet); - --c-color-border-quiet: var(--c-color-amber-border-quiet); - --c-color-on-quiet: var(--c-color-amber-on-quiet); --c-color-fill-normal: var(--c-color-amber-fill-normal); - --c-color-border-normal: var(--c-color-amber-border-normal); - --c-color-on-normal: var(--c-color-amber-on-normal); --c-color-fill-loud: var(--c-color-amber-fill-loud); + --c-color-border-quiet: var(--c-color-amber-border-quiet); + --c-color-border-normal: var(--c-color-amber-border-normal); --c-color-border-loud: var(--c-color-amber-border-loud); + --c-color-on-quiet: var(--c-color-amber-on-quiet); + --c-color-on-normal: var(--c-color-amber-on-normal); --c-color-on-loud: var(--c-color-amber-on-loud); } + :host([data-palette='yellow']), + [data-palette='yellow'], :host([data-color='yellow']), [data-color='yellow'] { --c-color-fill-quiet: var(--c-color-yellow-fill-quiet); - --c-color-border-quiet: var(--c-color-yellow-border-quiet); - --c-color-on-quiet: var(--c-color-yellow-on-quiet); --c-color-fill-normal: var(--c-color-yellow-fill-normal); - --c-color-border-normal: var(--c-color-yellow-border-normal); - --c-color-on-normal: var(--c-color-yellow-on-normal); --c-color-fill-loud: var(--c-color-yellow-fill-loud); + --c-color-border-quiet: var(--c-color-yellow-border-quiet); + --c-color-border-normal: var(--c-color-yellow-border-normal); --c-color-border-loud: var(--c-color-yellow-border-loud); + --c-color-on-quiet: var(--c-color-yellow-on-quiet); + --c-color-on-normal: var(--c-color-yellow-on-normal); --c-color-on-loud: var(--c-color-yellow-on-loud); } + :host([data-palette='lime']), + [data-palette='lime'], :host([data-color='lime']), [data-color='lime'] { --c-color-fill-quiet: var(--c-color-lime-fill-quiet); - --c-color-border-quiet: var(--c-color-lime-border-quiet); - --c-color-on-quiet: var(--c-color-lime-on-quiet); --c-color-fill-normal: var(--c-color-lime-fill-normal); - --c-color-border-normal: var(--c-color-lime-border-normal); - --c-color-on-normal: var(--c-color-lime-on-normal); --c-color-fill-loud: var(--c-color-lime-fill-loud); + --c-color-border-quiet: var(--c-color-lime-border-quiet); + --c-color-border-normal: var(--c-color-lime-border-normal); --c-color-border-loud: var(--c-color-lime-border-loud); + --c-color-on-quiet: var(--c-color-lime-on-quiet); + --c-color-on-normal: var(--c-color-lime-on-normal); --c-color-on-loud: var(--c-color-lime-on-loud); } + :host([data-palette='green']), + [data-palette='green'], :host([data-color='green']), [data-color='green'] { --c-color-fill-quiet: var(--c-color-green-fill-quiet); - --c-color-border-quiet: var(--c-color-green-border-quiet); - --c-color-on-quiet: var(--c-color-green-on-quiet); --c-color-fill-normal: var(--c-color-green-fill-normal); - --c-color-border-normal: var(--c-color-green-border-normal); - --c-color-on-normal: var(--c-color-green-on-normal); --c-color-fill-loud: var(--c-color-green-fill-loud); + --c-color-border-quiet: var(--c-color-green-border-quiet); + --c-color-border-normal: var(--c-color-green-border-normal); --c-color-border-loud: var(--c-color-green-border-loud); + --c-color-on-quiet: var(--c-color-green-on-quiet); + --c-color-on-normal: var(--c-color-green-on-normal); --c-color-on-loud: var(--c-color-green-on-loud); } + :host([data-palette='emerald']), + [data-palette='emerald'], :host([data-color='emerald']), [data-color='emerald'] { --c-color-fill-quiet: var(--c-color-emerald-fill-quiet); - --c-color-border-quiet: var(--c-color-emerald-border-quiet); - --c-color-on-quiet: var(--c-color-emerald-on-quiet); --c-color-fill-normal: var(--c-color-emerald-fill-normal); - --c-color-border-normal: var(--c-color-emerald-border-normal); - --c-color-on-normal: var(--c-color-emerald-on-normal); --c-color-fill-loud: var(--c-color-emerald-fill-loud); + --c-color-border-quiet: var(--c-color-emerald-border-quiet); + --c-color-border-normal: var(--c-color-emerald-border-normal); --c-color-border-loud: var(--c-color-emerald-border-loud); + --c-color-on-quiet: var(--c-color-emerald-on-quiet); + --c-color-on-normal: var(--c-color-emerald-on-normal); --c-color-on-loud: var(--c-color-emerald-on-loud); } + :host([data-palette='teal']), + [data-palette='teal'], :host([data-color='teal']), [data-color='teal'] { --c-color-fill-quiet: var(--c-color-teal-fill-quiet); - --c-color-border-quiet: var(--c-color-teal-border-quiet); - --c-color-on-quiet: var(--c-color-teal-on-quiet); --c-color-fill-normal: var(--c-color-teal-fill-normal); - --c-color-border-normal: var(--c-color-teal-border-normal); - --c-color-on-normal: var(--c-color-teal-on-normal); --c-color-fill-loud: var(--c-color-teal-fill-loud); + --c-color-border-quiet: var(--c-color-teal-border-quiet); + --c-color-border-normal: var(--c-color-teal-border-normal); --c-color-border-loud: var(--c-color-teal-border-loud); + --c-color-on-quiet: var(--c-color-teal-on-quiet); + --c-color-on-normal: var(--c-color-teal-on-normal); --c-color-on-loud: var(--c-color-teal-on-loud); } + :host([data-palette='cyan']), + [data-palette='cyan'], :host([data-color='cyan']), [data-color='cyan'] { --c-color-fill-quiet: var(--c-color-cyan-fill-quiet); - --c-color-border-quiet: var(--c-color-cyan-border-quiet); - --c-color-on-quiet: var(--c-color-cyan-on-quiet); --c-color-fill-normal: var(--c-color-cyan-fill-normal); - --c-color-border-normal: var(--c-color-cyan-border-normal); - --c-color-on-normal: var(--c-color-cyan-on-normal); --c-color-fill-loud: var(--c-color-cyan-fill-loud); + --c-color-border-quiet: var(--c-color-cyan-border-quiet); + --c-color-border-normal: var(--c-color-cyan-border-normal); --c-color-border-loud: var(--c-color-cyan-border-loud); + --c-color-on-quiet: var(--c-color-cyan-on-quiet); + --c-color-on-normal: var(--c-color-cyan-on-normal); --c-color-on-loud: var(--c-color-cyan-on-loud); } + :host([data-palette='sky']), + [data-palette='sky'], :host([data-color='sky']), [data-color='sky'] { --c-color-fill-quiet: var(--c-color-sky-fill-quiet); - --c-color-border-quiet: var(--c-color-sky-border-quiet); - --c-color-on-quiet: var(--c-color-sky-on-quiet); --c-color-fill-normal: var(--c-color-sky-fill-normal); - --c-color-border-normal: var(--c-color-sky-border-normal); - --c-color-on-normal: var(--c-color-sky-on-normal); --c-color-fill-loud: var(--c-color-sky-fill-loud); + --c-color-border-quiet: var(--c-color-sky-border-quiet); + --c-color-border-normal: var(--c-color-sky-border-normal); --c-color-border-loud: var(--c-color-sky-border-loud); + --c-color-on-quiet: var(--c-color-sky-on-quiet); + --c-color-on-normal: var(--c-color-sky-on-normal); --c-color-on-loud: var(--c-color-sky-on-loud); } + :host([data-palette='blue']), + [data-palette='blue'], :host([data-color='blue']), [data-color='blue'] { --c-color-fill-quiet: var(--c-color-blue-fill-quiet); - --c-color-border-quiet: var(--c-color-blue-border-quiet); - --c-color-on-quiet: var(--c-color-blue-on-quiet); --c-color-fill-normal: var(--c-color-blue-fill-normal); - --c-color-border-normal: var(--c-color-blue-border-normal); - --c-color-on-normal: var(--c-color-blue-on-normal); --c-color-fill-loud: var(--c-color-blue-fill-loud); + --c-color-border-quiet: var(--c-color-blue-border-quiet); + --c-color-border-normal: var(--c-color-blue-border-normal); --c-color-border-loud: var(--c-color-blue-border-loud); + --c-color-on-quiet: var(--c-color-blue-on-quiet); + --c-color-on-normal: var(--c-color-blue-on-normal); --c-color-on-loud: var(--c-color-blue-on-loud); } + :host([data-palette='indigo']), + [data-palette='indigo'], :host([data-color='indigo']), [data-color='indigo'] { --c-color-fill-quiet: var(--c-color-indigo-fill-quiet); - --c-color-border-quiet: var(--c-color-indigo-border-quiet); - --c-color-on-quiet: var(--c-color-indigo-on-quiet); --c-color-fill-normal: var(--c-color-indigo-fill-normal); - --c-color-border-normal: var(--c-color-indigo-border-normal); - --c-color-on-normal: var(--c-color-indigo-on-normal); --c-color-fill-loud: var(--c-color-indigo-fill-loud); + --c-color-border-quiet: var(--c-color-indigo-border-quiet); + --c-color-border-normal: var(--c-color-indigo-border-normal); --c-color-border-loud: var(--c-color-indigo-border-loud); + --c-color-on-quiet: var(--c-color-indigo-on-quiet); + --c-color-on-normal: var(--c-color-indigo-on-normal); --c-color-on-loud: var(--c-color-indigo-on-loud); } + :host([data-palette='violet']), + [data-palette='violet'], :host([data-color='violet']), [data-color='violet'] { --c-color-fill-quiet: var(--c-color-violet-fill-quiet); - --c-color-border-quiet: var(--c-color-violet-border-quiet); - --c-color-on-quiet: var(--c-color-violet-on-quiet); --c-color-fill-normal: var(--c-color-violet-fill-normal); - --c-color-border-normal: var(--c-color-violet-border-normal); - --c-color-on-normal: var(--c-color-violet-on-normal); --c-color-fill-loud: var(--c-color-violet-fill-loud); + --c-color-border-quiet: var(--c-color-violet-border-quiet); + --c-color-border-normal: var(--c-color-violet-border-normal); --c-color-border-loud: var(--c-color-violet-border-loud); + --c-color-on-quiet: var(--c-color-violet-on-quiet); + --c-color-on-normal: var(--c-color-violet-on-normal); --c-color-on-loud: var(--c-color-violet-on-loud); } + :host([data-palette='purple']), + [data-palette='purple'], :host([data-color='purple']), [data-color='purple'] { --c-color-fill-quiet: var(--c-color-purple-fill-quiet); - --c-color-border-quiet: var(--c-color-purple-border-quiet); - --c-color-on-quiet: var(--c-color-purple-on-quiet); --c-color-fill-normal: var(--c-color-purple-fill-normal); - --c-color-border-normal: var(--c-color-purple-border-normal); - --c-color-on-normal: var(--c-color-purple-on-normal); --c-color-fill-loud: var(--c-color-purple-fill-loud); + --c-color-border-quiet: var(--c-color-purple-border-quiet); + --c-color-border-normal: var(--c-color-purple-border-normal); --c-color-border-loud: var(--c-color-purple-border-loud); + --c-color-on-quiet: var(--c-color-purple-on-quiet); + --c-color-on-normal: var(--c-color-purple-on-normal); --c-color-on-loud: var(--c-color-purple-on-loud); } + :host([data-palette='fuchsia']), + [data-palette='fuchsia'], :host([data-color='fuchsia']), [data-color='fuchsia'] { --c-color-fill-quiet: var(--c-color-fuchsia-fill-quiet); - --c-color-border-quiet: var(--c-color-fuchsia-border-quiet); - --c-color-on-quiet: var(--c-color-fuchsia-on-quiet); --c-color-fill-normal: var(--c-color-fuchsia-fill-normal); - --c-color-border-normal: var(--c-color-fuchsia-border-normal); - --c-color-on-normal: var(--c-color-fuchsia-on-normal); --c-color-fill-loud: var(--c-color-fuchsia-fill-loud); + --c-color-border-quiet: var(--c-color-fuchsia-border-quiet); + --c-color-border-normal: var(--c-color-fuchsia-border-normal); --c-color-border-loud: var(--c-color-fuchsia-border-loud); + --c-color-on-quiet: var(--c-color-fuchsia-on-quiet); + --c-color-on-normal: var(--c-color-fuchsia-on-normal); --c-color-on-loud: var(--c-color-fuchsia-on-loud); } + :host([data-palette='pink']), + [data-palette='pink'], :host([data-color='pink']), [data-color='pink'] { --c-color-fill-quiet: var(--c-color-pink-fill-quiet); - --c-color-border-quiet: var(--c-color-pink-border-quiet); - --c-color-on-quiet: var(--c-color-pink-on-quiet); --c-color-fill-normal: var(--c-color-pink-fill-normal); - --c-color-border-normal: var(--c-color-pink-border-normal); - --c-color-on-normal: var(--c-color-pink-on-normal); --c-color-fill-loud: var(--c-color-pink-fill-loud); + --c-color-border-quiet: var(--c-color-pink-border-quiet); + --c-color-border-normal: var(--c-color-pink-border-normal); --c-color-border-loud: var(--c-color-pink-border-loud); + --c-color-on-quiet: var(--c-color-pink-on-quiet); + --c-color-on-normal: var(--c-color-pink-on-normal); --c-color-on-loud: var(--c-color-pink-on-loud); } + :host([data-palette='rose']), + [data-palette='rose'], :host([data-color='rose']), [data-color='rose'] { --c-color-fill-quiet: var(--c-color-rose-fill-quiet); - --c-color-border-quiet: var(--c-color-rose-border-quiet); - --c-color-on-quiet: var(--c-color-rose-on-quiet); --c-color-fill-normal: var(--c-color-rose-fill-normal); - --c-color-border-normal: var(--c-color-rose-border-normal); - --c-color-on-normal: var(--c-color-rose-on-normal); --c-color-fill-loud: var(--c-color-rose-fill-loud); + --c-color-border-quiet: var(--c-color-rose-border-quiet); + --c-color-border-normal: var(--c-color-rose-border-normal); --c-color-border-loud: var(--c-color-rose-border-loud); + --c-color-on-quiet: var(--c-color-rose-on-quiet); + --c-color-on-normal: var(--c-color-rose-on-normal); --c-color-on-loud: var(--c-color-rose-on-loud); } + :host([data-palette='white']), + [data-palette='white'], :host([data-color='white']), [data-color='white'] { --c-color-fill-quiet: var(--c-color-white-fill-quiet); - --c-color-border-quiet: var(--c-color-white-border-quiet); - --c-color-on-quiet: var(--c-color-white-on-quiet); --c-color-fill-normal: var(--c-color-white-fill-normal); - --c-color-border-normal: var(--c-color-white-border-normal); - --c-color-on-normal: var(--c-color-white-on-normal); --c-color-fill-loud: var(--c-color-white-fill-loud); + --c-color-border-quiet: var(--c-color-white-border-quiet); + --c-color-border-normal: var(--c-color-white-border-normal); --c-color-border-loud: var(--c-color-white-border-loud); + --c-color-on-quiet: var(--c-color-white-on-quiet); + --c-color-on-normal: var(--c-color-white-on-normal); --c-color-on-loud: var(--c-color-white-on-loud); } + :host([data-palette='gray']), + [data-palette='gray'], :host([data-color='gray']), [data-color='gray'] { --c-color-fill-quiet: var(--c-color-gray-fill-quiet); - --c-color-border-quiet: var(--c-color-gray-border-quiet); - --c-color-on-quiet: var(--c-color-gray-on-quiet); --c-color-fill-normal: var(--c-color-gray-fill-normal); - --c-color-border-normal: var(--c-color-gray-border-normal); - --c-color-on-normal: var(--c-color-gray-on-normal); --c-color-fill-loud: var(--c-color-gray-fill-loud); + --c-color-border-quiet: var(--c-color-gray-border-quiet); + --c-color-border-normal: var(--c-color-gray-border-normal); --c-color-border-loud: var(--c-color-gray-border-loud); + --c-color-on-quiet: var(--c-color-gray-on-quiet); + --c-color-on-normal: var(--c-color-gray-on-normal); --c-color-on-loud: var(--c-color-gray-on-loud); } + :host([data-palette='black']), + [data-palette='black'], :host([data-color='black']), [data-color='black'] { --c-color-fill-quiet: var(--c-color-black-fill-quiet); - --c-color-border-quiet: var(--c-color-black-border-quiet); - --c-color-on-quiet: var(--c-color-black-on-quiet); --c-color-fill-normal: var(--c-color-black-fill-normal); - --c-color-border-normal: var(--c-color-black-border-normal); - --c-color-on-normal: var(--c-color-black-on-normal); --c-color-fill-loud: var(--c-color-black-fill-loud); + --c-color-border-quiet: var(--c-color-black-border-quiet); + --c-color-border-normal: var(--c-color-black-border-normal); --c-color-border-loud: var(--c-color-black-border-loud); + --c-color-on-quiet: var(--c-color-black-on-quiet); + --c-color-on-normal: var(--c-color-black-on-normal); --c-color-on-loud: var(--c-color-black-on-loud); } + :host([data-palette='slate']), + [data-palette='slate'], :host([data-color='slate']), [data-color='slate'] { --c-color-fill-quiet: var(--c-color-slate-fill-quiet); - --c-color-border-quiet: var(--c-color-slate-border-quiet); - --c-color-on-quiet: var(--c-color-slate-on-quiet); --c-color-fill-normal: var(--c-color-slate-fill-normal); - --c-color-border-normal: var(--c-color-slate-border-normal); - --c-color-on-normal: var(--c-color-slate-on-normal); --c-color-fill-loud: var(--c-color-slate-fill-loud); + --c-color-border-quiet: var(--c-color-slate-border-quiet); + --c-color-border-normal: var(--c-color-slate-border-normal); --c-color-border-loud: var(--c-color-slate-border-loud); + --c-color-on-quiet: var(--c-color-slate-on-quiet); + --c-color-on-normal: var(--c-color-slate-on-normal); --c-color-on-loud: var(--c-color-slate-on-loud); } + :host([data-palette='neutral']), + [data-palette='neutral'], :host([data-color='neutral']), [data-color='neutral'] { --c-color-fill-quiet: var(--c-color-neutral-fill-quiet); - --c-color-border-quiet: var(--c-color-neutral-border-quiet); - --c-color-on-quiet: var(--c-color-neutral-on-quiet); --c-color-fill-normal: var(--c-color-neutral-fill-normal); - --c-color-border-normal: var(--c-color-neutral-border-normal); - --c-color-on-normal: var(--c-color-neutral-on-normal); --c-color-fill-loud: var(--c-color-neutral-fill-loud); + --c-color-border-quiet: var(--c-color-neutral-border-quiet); + --c-color-border-normal: var(--c-color-neutral-border-normal); --c-color-border-loud: var(--c-color-neutral-border-loud); + --c-color-on-quiet: var(--c-color-neutral-on-quiet); + --c-color-on-normal: var(--c-color-neutral-on-normal); --c-color-on-loud: var(--c-color-neutral-on-loud); } + :host([data-palette='accent']), + [data-palette='accent'], :host([data-color='accent']), [data-color='accent'] { --c-color-fill-quiet: var(--c-color-accent-fill-quiet); - --c-color-border-quiet: var(--c-color-accent-border-quiet); - --c-color-on-quiet: var(--c-color-accent-on-quiet); --c-color-fill-normal: var(--c-color-accent-fill-normal); - --c-color-border-normal: var(--c-color-accent-border-normal); - --c-color-on-normal: var(--c-color-accent-on-normal); --c-color-fill-loud: var(--c-color-accent-fill-loud); + --c-color-border-quiet: var(--c-color-accent-border-quiet); + --c-color-border-normal: var(--c-color-accent-border-normal); --c-color-border-loud: var(--c-color-accent-border-loud); + --c-color-on-quiet: var(--c-color-accent-on-quiet); + --c-color-on-normal: var(--c-color-accent-on-normal); --c-color-on-loud: var(--c-color-accent-on-loud); } + :host([data-palette='info']), + [data-palette='info'], :host([data-color='info']), [data-color='info'] { --c-color-fill-quiet: var(--c-color-info-fill-quiet); - --c-color-border-quiet: var(--c-color-info-border-quiet); - --c-color-on-quiet: var(--c-color-info-on-quiet); --c-color-fill-normal: var(--c-color-info-fill-normal); - --c-color-border-normal: var(--c-color-info-border-normal); - --c-color-on-normal: var(--c-color-info-on-normal); --c-color-fill-loud: var(--c-color-info-fill-loud); + --c-color-border-quiet: var(--c-color-info-border-quiet); + --c-color-border-normal: var(--c-color-info-border-normal); --c-color-border-loud: var(--c-color-info-border-loud); + --c-color-on-quiet: var(--c-color-info-on-quiet); + --c-color-on-normal: var(--c-color-info-on-normal); --c-color-on-loud: var(--c-color-info-on-loud); } + :host([data-palette='success']), + [data-palette='success'], :host([data-color='success']), [data-color='success'] { --c-color-fill-quiet: var(--c-color-success-fill-quiet); - --c-color-border-quiet: var(--c-color-success-border-quiet); - --c-color-on-quiet: var(--c-color-success-on-quiet); --c-color-fill-normal: var(--c-color-success-fill-normal); - --c-color-border-normal: var(--c-color-success-border-normal); - --c-color-on-normal: var(--c-color-success-on-normal); --c-color-fill-loud: var(--c-color-success-fill-loud); + --c-color-border-quiet: var(--c-color-success-border-quiet); + --c-color-border-normal: var(--c-color-success-border-normal); --c-color-border-loud: var(--c-color-success-border-loud); + --c-color-on-quiet: var(--c-color-success-on-quiet); + --c-color-on-normal: var(--c-color-success-on-normal); --c-color-on-loud: var(--c-color-success-on-loud); } + :host([data-palette='warning']), + [data-palette='warning'], :host([data-color='warning']), [data-color='warning'] { --c-color-fill-quiet: var(--c-color-warning-fill-quiet); - --c-color-border-quiet: var(--c-color-warning-border-quiet); - --c-color-on-quiet: var(--c-color-warning-on-quiet); --c-color-fill-normal: var(--c-color-warning-fill-normal); - --c-color-border-normal: var(--c-color-warning-border-normal); - --c-color-on-normal: var(--c-color-warning-on-normal); --c-color-fill-loud: var(--c-color-warning-fill-loud); + --c-color-border-quiet: var(--c-color-warning-border-quiet); + --c-color-border-normal: var(--c-color-warning-border-normal); --c-color-border-loud: var(--c-color-warning-border-loud); + --c-color-on-quiet: var(--c-color-warning-on-quiet); + --c-color-on-normal: var(--c-color-warning-on-normal); --c-color-on-loud: var(--c-color-warning-on-loud); } + :host([data-palette='danger']), + [data-palette='danger'], :host([data-color='danger']), [data-color='danger'] { --c-color-fill-quiet: var(--c-color-danger-fill-quiet); - --c-color-border-quiet: var(--c-color-danger-border-quiet); - --c-color-on-quiet: var(--c-color-danger-on-quiet); --c-color-fill-normal: var(--c-color-danger-fill-normal); - --c-color-border-normal: var(--c-color-danger-border-normal); - --c-color-on-normal: var(--c-color-danger-on-normal); --c-color-fill-loud: var(--c-color-danger-fill-loud); + --c-color-border-quiet: var(--c-color-danger-border-quiet); + --c-color-border-normal: var(--c-color-danger-border-normal); --c-color-border-loud: var(--c-color-danger-border-loud); + --c-color-on-quiet: var(--c-color-danger-on-quiet); + --c-color-on-normal: var(--c-color-danger-on-normal); --c-color-on-loud: var(--c-color-danger-on-loud); } `; @@ -380,78 +434,78 @@ export const variantStyles = css` :host([variant~='neutral']), [data-variant~='neutral'] { --c-color-fill-quiet: var(--c-color-neutral-fill-quiet); - --c-color-border-quiet: var(--c-color-neutral-border-quiet); - --c-color-on-quiet: var(--c-color-neutral-on-quiet); --c-color-fill-normal: var(--c-color-neutral-fill-normal); - --c-color-border-normal: var(--c-color-neutral-border-normal); - --c-color-on-normal: var(--c-color-neutral-on-normal); --c-color-fill-loud: var(--c-color-neutral-fill-loud); + --c-color-border-quiet: var(--c-color-neutral-border-quiet); + --c-color-border-normal: var(--c-color-neutral-border-normal); --c-color-border-loud: var(--c-color-neutral-border-loud); + --c-color-on-quiet: var(--c-color-neutral-on-quiet); + --c-color-on-normal: var(--c-color-neutral-on-normal); --c-color-on-loud: var(--c-color-neutral-on-loud); } :host([variant~='accent']), [data-variant~='accent'] { --c-color-fill-quiet: var(--c-color-accent-fill-quiet); - --c-color-border-quiet: var(--c-color-accent-border-quiet); - --c-color-on-quiet: var(--c-color-accent-on-quiet); --c-color-fill-normal: var(--c-color-accent-fill-normal); - --c-color-border-normal: var(--c-color-accent-border-normal); - --c-color-on-normal: var(--c-color-accent-on-normal); --c-color-fill-loud: var(--c-color-accent-fill-loud); + --c-color-border-quiet: var(--c-color-accent-border-quiet); + --c-color-border-normal: var(--c-color-accent-border-normal); --c-color-border-loud: var(--c-color-accent-border-loud); + --c-color-on-quiet: var(--c-color-accent-on-quiet); + --c-color-on-normal: var(--c-color-accent-on-normal); --c-color-on-loud: var(--c-color-accent-on-loud); } :host([variant~='info']), [data-variant~='info'] { --c-color-fill-quiet: var(--c-color-info-fill-quiet); - --c-color-border-quiet: var(--c-color-info-border-quiet); - --c-color-on-quiet: var(--c-color-info-on-quiet); --c-color-fill-normal: var(--c-color-info-fill-normal); - --c-color-border-normal: var(--c-color-info-border-normal); - --c-color-on-normal: var(--c-color-info-on-normal); --c-color-fill-loud: var(--c-color-info-fill-loud); + --c-color-border-quiet: var(--c-color-info-border-quiet); + --c-color-border-normal: var(--c-color-info-border-normal); --c-color-border-loud: var(--c-color-info-border-loud); + --c-color-on-quiet: var(--c-color-info-on-quiet); + --c-color-on-normal: var(--c-color-info-on-normal); --c-color-on-loud: var(--c-color-info-on-loud); } :host([variant~='success']), [data-variant~='success'] { --c-color-fill-quiet: var(--c-color-success-fill-quiet); - --c-color-border-quiet: var(--c-color-success-border-quiet); - --c-color-on-quiet: var(--c-color-success-on-quiet); --c-color-fill-normal: var(--c-color-success-fill-normal); - --c-color-border-normal: var(--c-color-success-border-normal); - --c-color-on-normal: var(--c-color-success-on-normal); --c-color-fill-loud: var(--c-color-success-fill-loud); + --c-color-border-quiet: var(--c-color-success-border-quiet); + --c-color-border-normal: var(--c-color-success-border-normal); --c-color-border-loud: var(--c-color-success-border-loud); + --c-color-on-quiet: var(--c-color-success-on-quiet); + --c-color-on-normal: var(--c-color-success-on-normal); --c-color-on-loud: var(--c-color-success-on-loud); } :host([variant~='warning']), [data-variant~='warning'] { --c-color-fill-quiet: var(--c-color-warning-fill-quiet); - --c-color-border-quiet: var(--c-color-warning-border-quiet); - --c-color-on-quiet: var(--c-color-warning-on-quiet); --c-color-fill-normal: var(--c-color-warning-fill-normal); - --c-color-border-normal: var(--c-color-warning-border-normal); - --c-color-on-normal: var(--c-color-warning-on-normal); --c-color-fill-loud: var(--c-color-warning-fill-loud); + --c-color-border-quiet: var(--c-color-warning-border-quiet); + --c-color-border-normal: var(--c-color-warning-border-normal); --c-color-border-loud: var(--c-color-warning-border-loud); + --c-color-on-quiet: var(--c-color-warning-on-quiet); + --c-color-on-normal: var(--c-color-warning-on-normal); --c-color-on-loud: var(--c-color-warning-on-loud); } :host([variant~='danger']), [data-variant~='danger'] { --c-color-fill-quiet: var(--c-color-danger-fill-quiet); - --c-color-border-quiet: var(--c-color-danger-border-quiet); - --c-color-on-quiet: var(--c-color-danger-on-quiet); --c-color-fill-normal: var(--c-color-danger-fill-normal); - --c-color-border-normal: var(--c-color-danger-border-normal); - --c-color-on-normal: var(--c-color-danger-on-normal); --c-color-fill-loud: var(--c-color-danger-fill-loud); + --c-color-border-quiet: var(--c-color-danger-border-quiet); + --c-color-border-normal: var(--c-color-danger-border-normal); --c-color-border-loud: var(--c-color-danger-border-loud); + --c-color-on-quiet: var(--c-color-danger-on-quiet); + --c-color-on-normal: var(--c-color-danger-on-normal); --c-color-on-loud: var(--c-color-danger-on-loud); } `; diff --git a/packages/craftcms-ui/src/styles/shared/colorable.css b/packages/craftcms-ui/src/styles/shared/colorable.css index c97c886df11..ec320dbb748 100644 --- a/packages/craftcms-ui/src/styles/shared/colorable.css +++ b/packages/craftcms-ui/src/styles/shared/colorable.css @@ -298,327 +298,381 @@ --c-color-danger-on-loud: var(--color-red-50); } +.cp-palette-red, +[data-palette='red'], .cp-color-red, [data-color='red'] { --c-color-fill-quiet: var(--c-color-red-fill-quiet); - --c-color-border-quiet: var(--c-color-red-border-quiet); - --c-color-on-quiet: var(--c-color-red-on-quiet); --c-color-fill-normal: var(--c-color-red-fill-normal); - --c-color-border-normal: var(--c-color-red-border-normal); - --c-color-on-normal: var(--c-color-red-on-normal); --c-color-fill-loud: var(--c-color-red-fill-loud); + --c-color-border-quiet: var(--c-color-red-border-quiet); + --c-color-border-normal: var(--c-color-red-border-normal); --c-color-border-loud: var(--c-color-red-border-loud); + --c-color-on-quiet: var(--c-color-red-on-quiet); + --c-color-on-normal: var(--c-color-red-on-normal); --c-color-on-loud: var(--c-color-red-on-loud); } +.cp-palette-orange, +[data-palette='orange'], .cp-color-orange, [data-color='orange'] { --c-color-fill-quiet: var(--c-color-orange-fill-quiet); - --c-color-border-quiet: var(--c-color-orange-border-quiet); - --c-color-on-quiet: var(--c-color-orange-on-quiet); --c-color-fill-normal: var(--c-color-orange-fill-normal); - --c-color-border-normal: var(--c-color-orange-border-normal); - --c-color-on-normal: var(--c-color-orange-on-normal); --c-color-fill-loud: var(--c-color-orange-fill-loud); + --c-color-border-quiet: var(--c-color-orange-border-quiet); + --c-color-border-normal: var(--c-color-orange-border-normal); --c-color-border-loud: var(--c-color-orange-border-loud); + --c-color-on-quiet: var(--c-color-orange-on-quiet); + --c-color-on-normal: var(--c-color-orange-on-normal); --c-color-on-loud: var(--c-color-orange-on-loud); } +.cp-palette-amber, +[data-palette='amber'], .cp-color-amber, [data-color='amber'] { --c-color-fill-quiet: var(--c-color-amber-fill-quiet); - --c-color-border-quiet: var(--c-color-amber-border-quiet); - --c-color-on-quiet: var(--c-color-amber-on-quiet); --c-color-fill-normal: var(--c-color-amber-fill-normal); - --c-color-border-normal: var(--c-color-amber-border-normal); - --c-color-on-normal: var(--c-color-amber-on-normal); --c-color-fill-loud: var(--c-color-amber-fill-loud); + --c-color-border-quiet: var(--c-color-amber-border-quiet); + --c-color-border-normal: var(--c-color-amber-border-normal); --c-color-border-loud: var(--c-color-amber-border-loud); + --c-color-on-quiet: var(--c-color-amber-on-quiet); + --c-color-on-normal: var(--c-color-amber-on-normal); --c-color-on-loud: var(--c-color-amber-on-loud); } +.cp-palette-yellow, +[data-palette='yellow'], .cp-color-yellow, [data-color='yellow'] { --c-color-fill-quiet: var(--c-color-yellow-fill-quiet); - --c-color-border-quiet: var(--c-color-yellow-border-quiet); - --c-color-on-quiet: var(--c-color-yellow-on-quiet); --c-color-fill-normal: var(--c-color-yellow-fill-normal); - --c-color-border-normal: var(--c-color-yellow-border-normal); - --c-color-on-normal: var(--c-color-yellow-on-normal); --c-color-fill-loud: var(--c-color-yellow-fill-loud); + --c-color-border-quiet: var(--c-color-yellow-border-quiet); + --c-color-border-normal: var(--c-color-yellow-border-normal); --c-color-border-loud: var(--c-color-yellow-border-loud); + --c-color-on-quiet: var(--c-color-yellow-on-quiet); + --c-color-on-normal: var(--c-color-yellow-on-normal); --c-color-on-loud: var(--c-color-yellow-on-loud); } +.cp-palette-lime, +[data-palette='lime'], .cp-color-lime, [data-color='lime'] { --c-color-fill-quiet: var(--c-color-lime-fill-quiet); - --c-color-border-quiet: var(--c-color-lime-border-quiet); - --c-color-on-quiet: var(--c-color-lime-on-quiet); --c-color-fill-normal: var(--c-color-lime-fill-normal); - --c-color-border-normal: var(--c-color-lime-border-normal); - --c-color-on-normal: var(--c-color-lime-on-normal); --c-color-fill-loud: var(--c-color-lime-fill-loud); + --c-color-border-quiet: var(--c-color-lime-border-quiet); + --c-color-border-normal: var(--c-color-lime-border-normal); --c-color-border-loud: var(--c-color-lime-border-loud); + --c-color-on-quiet: var(--c-color-lime-on-quiet); + --c-color-on-normal: var(--c-color-lime-on-normal); --c-color-on-loud: var(--c-color-lime-on-loud); } +.cp-palette-green, +[data-palette='green'], .cp-color-green, [data-color='green'] { --c-color-fill-quiet: var(--c-color-green-fill-quiet); - --c-color-border-quiet: var(--c-color-green-border-quiet); - --c-color-on-quiet: var(--c-color-green-on-quiet); --c-color-fill-normal: var(--c-color-green-fill-normal); - --c-color-border-normal: var(--c-color-green-border-normal); - --c-color-on-normal: var(--c-color-green-on-normal); --c-color-fill-loud: var(--c-color-green-fill-loud); + --c-color-border-quiet: var(--c-color-green-border-quiet); + --c-color-border-normal: var(--c-color-green-border-normal); --c-color-border-loud: var(--c-color-green-border-loud); + --c-color-on-quiet: var(--c-color-green-on-quiet); + --c-color-on-normal: var(--c-color-green-on-normal); --c-color-on-loud: var(--c-color-green-on-loud); } +.cp-palette-emerald, +[data-palette='emerald'], .cp-color-emerald, [data-color='emerald'] { --c-color-fill-quiet: var(--c-color-emerald-fill-quiet); - --c-color-border-quiet: var(--c-color-emerald-border-quiet); - --c-color-on-quiet: var(--c-color-emerald-on-quiet); --c-color-fill-normal: var(--c-color-emerald-fill-normal); - --c-color-border-normal: var(--c-color-emerald-border-normal); - --c-color-on-normal: var(--c-color-emerald-on-normal); --c-color-fill-loud: var(--c-color-emerald-fill-loud); + --c-color-border-quiet: var(--c-color-emerald-border-quiet); + --c-color-border-normal: var(--c-color-emerald-border-normal); --c-color-border-loud: var(--c-color-emerald-border-loud); + --c-color-on-quiet: var(--c-color-emerald-on-quiet); + --c-color-on-normal: var(--c-color-emerald-on-normal); --c-color-on-loud: var(--c-color-emerald-on-loud); } +.cp-palette-teal, +[data-palette='teal'], .cp-color-teal, [data-color='teal'] { --c-color-fill-quiet: var(--c-color-teal-fill-quiet); - --c-color-border-quiet: var(--c-color-teal-border-quiet); - --c-color-on-quiet: var(--c-color-teal-on-quiet); --c-color-fill-normal: var(--c-color-teal-fill-normal); - --c-color-border-normal: var(--c-color-teal-border-normal); - --c-color-on-normal: var(--c-color-teal-on-normal); --c-color-fill-loud: var(--c-color-teal-fill-loud); + --c-color-border-quiet: var(--c-color-teal-border-quiet); + --c-color-border-normal: var(--c-color-teal-border-normal); --c-color-border-loud: var(--c-color-teal-border-loud); + --c-color-on-quiet: var(--c-color-teal-on-quiet); + --c-color-on-normal: var(--c-color-teal-on-normal); --c-color-on-loud: var(--c-color-teal-on-loud); } +.cp-palette-cyan, +[data-palette='cyan'], .cp-color-cyan, [data-color='cyan'] { --c-color-fill-quiet: var(--c-color-cyan-fill-quiet); - --c-color-border-quiet: var(--c-color-cyan-border-quiet); - --c-color-on-quiet: var(--c-color-cyan-on-quiet); --c-color-fill-normal: var(--c-color-cyan-fill-normal); - --c-color-border-normal: var(--c-color-cyan-border-normal); - --c-color-on-normal: var(--c-color-cyan-on-normal); --c-color-fill-loud: var(--c-color-cyan-fill-loud); + --c-color-border-quiet: var(--c-color-cyan-border-quiet); + --c-color-border-normal: var(--c-color-cyan-border-normal); --c-color-border-loud: var(--c-color-cyan-border-loud); + --c-color-on-quiet: var(--c-color-cyan-on-quiet); + --c-color-on-normal: var(--c-color-cyan-on-normal); --c-color-on-loud: var(--c-color-cyan-on-loud); } +.cp-palette-sky, +[data-palette='sky'], .cp-color-sky, [data-color='sky'] { --c-color-fill-quiet: var(--c-color-sky-fill-quiet); - --c-color-border-quiet: var(--c-color-sky-border-quiet); - --c-color-on-quiet: var(--c-color-sky-on-quiet); --c-color-fill-normal: var(--c-color-sky-fill-normal); - --c-color-border-normal: var(--c-color-sky-border-normal); - --c-color-on-normal: var(--c-color-sky-on-normal); --c-color-fill-loud: var(--c-color-sky-fill-loud); + --c-color-border-quiet: var(--c-color-sky-border-quiet); + --c-color-border-normal: var(--c-color-sky-border-normal); --c-color-border-loud: var(--c-color-sky-border-loud); + --c-color-on-quiet: var(--c-color-sky-on-quiet); + --c-color-on-normal: var(--c-color-sky-on-normal); --c-color-on-loud: var(--c-color-sky-on-loud); } +.cp-palette-blue, +[data-palette='blue'], .cp-color-blue, [data-color='blue'] { --c-color-fill-quiet: var(--c-color-blue-fill-quiet); - --c-color-border-quiet: var(--c-color-blue-border-quiet); - --c-color-on-quiet: var(--c-color-blue-on-quiet); --c-color-fill-normal: var(--c-color-blue-fill-normal); - --c-color-border-normal: var(--c-color-blue-border-normal); - --c-color-on-normal: var(--c-color-blue-on-normal); --c-color-fill-loud: var(--c-color-blue-fill-loud); + --c-color-border-quiet: var(--c-color-blue-border-quiet); + --c-color-border-normal: var(--c-color-blue-border-normal); --c-color-border-loud: var(--c-color-blue-border-loud); + --c-color-on-quiet: var(--c-color-blue-on-quiet); + --c-color-on-normal: var(--c-color-blue-on-normal); --c-color-on-loud: var(--c-color-blue-on-loud); } +.cp-palette-indigo, +[data-palette='indigo'], .cp-color-indigo, [data-color='indigo'] { --c-color-fill-quiet: var(--c-color-indigo-fill-quiet); - --c-color-border-quiet: var(--c-color-indigo-border-quiet); - --c-color-on-quiet: var(--c-color-indigo-on-quiet); --c-color-fill-normal: var(--c-color-indigo-fill-normal); - --c-color-border-normal: var(--c-color-indigo-border-normal); - --c-color-on-normal: var(--c-color-indigo-on-normal); --c-color-fill-loud: var(--c-color-indigo-fill-loud); + --c-color-border-quiet: var(--c-color-indigo-border-quiet); + --c-color-border-normal: var(--c-color-indigo-border-normal); --c-color-border-loud: var(--c-color-indigo-border-loud); + --c-color-on-quiet: var(--c-color-indigo-on-quiet); + --c-color-on-normal: var(--c-color-indigo-on-normal); --c-color-on-loud: var(--c-color-indigo-on-loud); } +.cp-palette-violet, +[data-palette='violet'], .cp-color-violet, [data-color='violet'] { --c-color-fill-quiet: var(--c-color-violet-fill-quiet); - --c-color-border-quiet: var(--c-color-violet-border-quiet); - --c-color-on-quiet: var(--c-color-violet-on-quiet); --c-color-fill-normal: var(--c-color-violet-fill-normal); - --c-color-border-normal: var(--c-color-violet-border-normal); - --c-color-on-normal: var(--c-color-violet-on-normal); --c-color-fill-loud: var(--c-color-violet-fill-loud); + --c-color-border-quiet: var(--c-color-violet-border-quiet); + --c-color-border-normal: var(--c-color-violet-border-normal); --c-color-border-loud: var(--c-color-violet-border-loud); + --c-color-on-quiet: var(--c-color-violet-on-quiet); + --c-color-on-normal: var(--c-color-violet-on-normal); --c-color-on-loud: var(--c-color-violet-on-loud); } +.cp-palette-purple, +[data-palette='purple'], .cp-color-purple, [data-color='purple'] { --c-color-fill-quiet: var(--c-color-purple-fill-quiet); - --c-color-border-quiet: var(--c-color-purple-border-quiet); - --c-color-on-quiet: var(--c-color-purple-on-quiet); --c-color-fill-normal: var(--c-color-purple-fill-normal); - --c-color-border-normal: var(--c-color-purple-border-normal); - --c-color-on-normal: var(--c-color-purple-on-normal); --c-color-fill-loud: var(--c-color-purple-fill-loud); + --c-color-border-quiet: var(--c-color-purple-border-quiet); + --c-color-border-normal: var(--c-color-purple-border-normal); --c-color-border-loud: var(--c-color-purple-border-loud); + --c-color-on-quiet: var(--c-color-purple-on-quiet); + --c-color-on-normal: var(--c-color-purple-on-normal); --c-color-on-loud: var(--c-color-purple-on-loud); } +.cp-palette-fuchsia, +[data-palette='fuchsia'], .cp-color-fuchsia, [data-color='fuchsia'] { --c-color-fill-quiet: var(--c-color-fuchsia-fill-quiet); - --c-color-border-quiet: var(--c-color-fuchsia-border-quiet); - --c-color-on-quiet: var(--c-color-fuchsia-on-quiet); --c-color-fill-normal: var(--c-color-fuchsia-fill-normal); - --c-color-border-normal: var(--c-color-fuchsia-border-normal); - --c-color-on-normal: var(--c-color-fuchsia-on-normal); --c-color-fill-loud: var(--c-color-fuchsia-fill-loud); + --c-color-border-quiet: var(--c-color-fuchsia-border-quiet); + --c-color-border-normal: var(--c-color-fuchsia-border-normal); --c-color-border-loud: var(--c-color-fuchsia-border-loud); + --c-color-on-quiet: var(--c-color-fuchsia-on-quiet); + --c-color-on-normal: var(--c-color-fuchsia-on-normal); --c-color-on-loud: var(--c-color-fuchsia-on-loud); } +.cp-palette-pink, +[data-palette='pink'], .cp-color-pink, [data-color='pink'] { --c-color-fill-quiet: var(--c-color-pink-fill-quiet); - --c-color-border-quiet: var(--c-color-pink-border-quiet); - --c-color-on-quiet: var(--c-color-pink-on-quiet); --c-color-fill-normal: var(--c-color-pink-fill-normal); - --c-color-border-normal: var(--c-color-pink-border-normal); - --c-color-on-normal: var(--c-color-pink-on-normal); --c-color-fill-loud: var(--c-color-pink-fill-loud); + --c-color-border-quiet: var(--c-color-pink-border-quiet); + --c-color-border-normal: var(--c-color-pink-border-normal); --c-color-border-loud: var(--c-color-pink-border-loud); + --c-color-on-quiet: var(--c-color-pink-on-quiet); + --c-color-on-normal: var(--c-color-pink-on-normal); --c-color-on-loud: var(--c-color-pink-on-loud); } +.cp-palette-rose, +[data-palette='rose'], .cp-color-rose, [data-color='rose'] { --c-color-fill-quiet: var(--c-color-rose-fill-quiet); - --c-color-border-quiet: var(--c-color-rose-border-quiet); - --c-color-on-quiet: var(--c-color-rose-on-quiet); --c-color-fill-normal: var(--c-color-rose-fill-normal); - --c-color-border-normal: var(--c-color-rose-border-normal); - --c-color-on-normal: var(--c-color-rose-on-normal); --c-color-fill-loud: var(--c-color-rose-fill-loud); + --c-color-border-quiet: var(--c-color-rose-border-quiet); + --c-color-border-normal: var(--c-color-rose-border-normal); --c-color-border-loud: var(--c-color-rose-border-loud); + --c-color-on-quiet: var(--c-color-rose-on-quiet); + --c-color-on-normal: var(--c-color-rose-on-normal); --c-color-on-loud: var(--c-color-rose-on-loud); } +.cp-palette-white, +[data-palette='white'], .cp-color-white, [data-color='white'] { --c-color-fill-quiet: var(--c-color-white-fill-quiet); - --c-color-border-quiet: var(--c-color-white-border-quiet); - --c-color-on-quiet: var(--c-color-white-on-quiet); --c-color-fill-normal: var(--c-color-white-fill-normal); - --c-color-border-normal: var(--c-color-white-border-normal); - --c-color-on-normal: var(--c-color-white-on-normal); --c-color-fill-loud: var(--c-color-white-fill-loud); + --c-color-border-quiet: var(--c-color-white-border-quiet); + --c-color-border-normal: var(--c-color-white-border-normal); --c-color-border-loud: var(--c-color-white-border-loud); + --c-color-on-quiet: var(--c-color-white-on-quiet); + --c-color-on-normal: var(--c-color-white-on-normal); --c-color-on-loud: var(--c-color-white-on-loud); } +.cp-palette-gray, +[data-palette='gray'], .cp-color-gray, [data-color='gray'] { --c-color-fill-quiet: var(--c-color-gray-fill-quiet); - --c-color-border-quiet: var(--c-color-gray-border-quiet); - --c-color-on-quiet: var(--c-color-gray-on-quiet); --c-color-fill-normal: var(--c-color-gray-fill-normal); - --c-color-border-normal: var(--c-color-gray-border-normal); - --c-color-on-normal: var(--c-color-gray-on-normal); --c-color-fill-loud: var(--c-color-gray-fill-loud); + --c-color-border-quiet: var(--c-color-gray-border-quiet); + --c-color-border-normal: var(--c-color-gray-border-normal); --c-color-border-loud: var(--c-color-gray-border-loud); + --c-color-on-quiet: var(--c-color-gray-on-quiet); + --c-color-on-normal: var(--c-color-gray-on-normal); --c-color-on-loud: var(--c-color-gray-on-loud); } +.cp-palette-black, +[data-palette='black'], .cp-color-black, [data-color='black'] { --c-color-fill-quiet: var(--c-color-black-fill-quiet); - --c-color-border-quiet: var(--c-color-black-border-quiet); - --c-color-on-quiet: var(--c-color-black-on-quiet); --c-color-fill-normal: var(--c-color-black-fill-normal); - --c-color-border-normal: var(--c-color-black-border-normal); - --c-color-on-normal: var(--c-color-black-on-normal); --c-color-fill-loud: var(--c-color-black-fill-loud); + --c-color-border-quiet: var(--c-color-black-border-quiet); + --c-color-border-normal: var(--c-color-black-border-normal); --c-color-border-loud: var(--c-color-black-border-loud); + --c-color-on-quiet: var(--c-color-black-on-quiet); + --c-color-on-normal: var(--c-color-black-on-normal); --c-color-on-loud: var(--c-color-black-on-loud); } +.cp-palette-slate, +[data-palette='slate'], .cp-color-slate, [data-color='slate'] { --c-color-fill-quiet: var(--c-color-slate-fill-quiet); - --c-color-border-quiet: var(--c-color-slate-border-quiet); - --c-color-on-quiet: var(--c-color-slate-on-quiet); --c-color-fill-normal: var(--c-color-slate-fill-normal); - --c-color-border-normal: var(--c-color-slate-border-normal); - --c-color-on-normal: var(--c-color-slate-on-normal); --c-color-fill-loud: var(--c-color-slate-fill-loud); + --c-color-border-quiet: var(--c-color-slate-border-quiet); + --c-color-border-normal: var(--c-color-slate-border-normal); --c-color-border-loud: var(--c-color-slate-border-loud); + --c-color-on-quiet: var(--c-color-slate-on-quiet); + --c-color-on-normal: var(--c-color-slate-on-normal); --c-color-on-loud: var(--c-color-slate-on-loud); } +.cp-palette-neutral, +[data-palette='neutral'], .cp-color-neutral, [data-color='neutral'] { --c-color-fill-quiet: var(--c-color-neutral-fill-quiet); - --c-color-border-quiet: var(--c-color-neutral-border-quiet); - --c-color-on-quiet: var(--c-color-neutral-on-quiet); --c-color-fill-normal: var(--c-color-neutral-fill-normal); - --c-color-border-normal: var(--c-color-neutral-border-normal); - --c-color-on-normal: var(--c-color-neutral-on-normal); --c-color-fill-loud: var(--c-color-neutral-fill-loud); + --c-color-border-quiet: var(--c-color-neutral-border-quiet); + --c-color-border-normal: var(--c-color-neutral-border-normal); --c-color-border-loud: var(--c-color-neutral-border-loud); + --c-color-on-quiet: var(--c-color-neutral-on-quiet); + --c-color-on-normal: var(--c-color-neutral-on-normal); --c-color-on-loud: var(--c-color-neutral-on-loud); } +.cp-palette-accent, +[data-palette='accent'], .cp-color-accent, [data-color='accent'] { --c-color-fill-quiet: var(--c-color-accent-fill-quiet); - --c-color-border-quiet: var(--c-color-accent-border-quiet); - --c-color-on-quiet: var(--c-color-accent-on-quiet); --c-color-fill-normal: var(--c-color-accent-fill-normal); - --c-color-border-normal: var(--c-color-accent-border-normal); - --c-color-on-normal: var(--c-color-accent-on-normal); --c-color-fill-loud: var(--c-color-accent-fill-loud); + --c-color-border-quiet: var(--c-color-accent-border-quiet); + --c-color-border-normal: var(--c-color-accent-border-normal); --c-color-border-loud: var(--c-color-accent-border-loud); + --c-color-on-quiet: var(--c-color-accent-on-quiet); + --c-color-on-normal: var(--c-color-accent-on-normal); --c-color-on-loud: var(--c-color-accent-on-loud); } +.cp-palette-info, +[data-palette='info'], .cp-color-info, [data-color='info'] { --c-color-fill-quiet: var(--c-color-info-fill-quiet); - --c-color-border-quiet: var(--c-color-info-border-quiet); - --c-color-on-quiet: var(--c-color-info-on-quiet); --c-color-fill-normal: var(--c-color-info-fill-normal); - --c-color-border-normal: var(--c-color-info-border-normal); - --c-color-on-normal: var(--c-color-info-on-normal); --c-color-fill-loud: var(--c-color-info-fill-loud); + --c-color-border-quiet: var(--c-color-info-border-quiet); + --c-color-border-normal: var(--c-color-info-border-normal); --c-color-border-loud: var(--c-color-info-border-loud); + --c-color-on-quiet: var(--c-color-info-on-quiet); + --c-color-on-normal: var(--c-color-info-on-normal); --c-color-on-loud: var(--c-color-info-on-loud); } +.cp-palette-success, +[data-palette='success'], .cp-color-success, [data-color='success'] { --c-color-fill-quiet: var(--c-color-success-fill-quiet); - --c-color-border-quiet: var(--c-color-success-border-quiet); - --c-color-on-quiet: var(--c-color-success-on-quiet); --c-color-fill-normal: var(--c-color-success-fill-normal); - --c-color-border-normal: var(--c-color-success-border-normal); - --c-color-on-normal: var(--c-color-success-on-normal); --c-color-fill-loud: var(--c-color-success-fill-loud); + --c-color-border-quiet: var(--c-color-success-border-quiet); + --c-color-border-normal: var(--c-color-success-border-normal); --c-color-border-loud: var(--c-color-success-border-loud); + --c-color-on-quiet: var(--c-color-success-on-quiet); + --c-color-on-normal: var(--c-color-success-on-normal); --c-color-on-loud: var(--c-color-success-on-loud); } +.cp-palette-warning, +[data-palette='warning'], .cp-color-warning, [data-color='warning'] { --c-color-fill-quiet: var(--c-color-warning-fill-quiet); - --c-color-border-quiet: var(--c-color-warning-border-quiet); - --c-color-on-quiet: var(--c-color-warning-on-quiet); --c-color-fill-normal: var(--c-color-warning-fill-normal); - --c-color-border-normal: var(--c-color-warning-border-normal); - --c-color-on-normal: var(--c-color-warning-on-normal); --c-color-fill-loud: var(--c-color-warning-fill-loud); + --c-color-border-quiet: var(--c-color-warning-border-quiet); + --c-color-border-normal: var(--c-color-warning-border-normal); --c-color-border-loud: var(--c-color-warning-border-loud); + --c-color-on-quiet: var(--c-color-warning-on-quiet); + --c-color-on-normal: var(--c-color-warning-on-normal); --c-color-on-loud: var(--c-color-warning-on-loud); } +.cp-palette-danger, +[data-palette='danger'], .cp-color-danger, [data-color='danger'] { --c-color-fill-quiet: var(--c-color-danger-fill-quiet); - --c-color-border-quiet: var(--c-color-danger-border-quiet); - --c-color-on-quiet: var(--c-color-danger-on-quiet); --c-color-fill-normal: var(--c-color-danger-fill-normal); - --c-color-border-normal: var(--c-color-danger-border-normal); - --c-color-on-normal: var(--c-color-danger-on-normal); --c-color-fill-loud: var(--c-color-danger-fill-loud); + --c-color-border-quiet: var(--c-color-danger-border-quiet); + --c-color-border-normal: var(--c-color-danger-border-normal); --c-color-border-loud: var(--c-color-danger-border-loud); + --c-color-on-quiet: var(--c-color-danger-on-quiet); + --c-color-on-normal: var(--c-color-danger-on-normal); --c-color-on-loud: var(--c-color-danger-on-loud); } diff --git a/packages/craftcms-ui/tailwind.css b/packages/craftcms-ui/tailwind.css index 725f6bae61e..278d81da89c 100644 --- a/packages/craftcms-ui/tailwind.css +++ b/packages/craftcms-ui/tailwind.css @@ -1,129 +1,978 @@ +/* Auto-generated by scripts/generate-tailwind.js — do not edit manually */ + /** - * Craft CMS Control Panel — Tailwind v4 Theme Integration + * Craft CMS Control Panel — Tailwind v4 utilities. + * + * Craft's design tokens as utility classes, unprefixed and sitting alongside + * stock Tailwind: `bg-loud` next to `flex`, `p-md` next to `p-4`. + * CP code only ever runs in the CP, so there is no raw-Tailwind context to + * tell these apart from. + * + * Colors read as `-[group-]`. The token's *role* is + * implied by the property rather than repeated in the class name: + * + * bg-loud background-color: --c-color-fill-loud + * bg-danger-normal background-color: --c-color-danger-fill-normal + * border-accent-quiet border-color: --c-color-accent-border-quiet + * text-loud color: --c-color-fill-loud + * text-on-loud color: --c-color-on-loud + * text-on-neutral-loud color: --c-color-neutral-on-loud * - * Maps Craft's design tokens into Tailwind's @theme namespace so that - * utility classes (bg-*, text-*, border-*) are generated for every token. + * Text is the one property that takes two roles: `text-*` inks with the + * fill color, `text-on-*` with the color meant to stay legible on top of + * that fill. * - * Usage in your CSS entry file: + * Omitting the group targets the generic tokens, which hold whatever the + * nearest palette or `variant` resolved to — so `bg-quiet` paints with + * the current context's quiet fill instead of naming a color. * - * @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 + * Spacing reads as `-` across padding, margin, and gap: + * `p-md`, `gap-lg`, `mt-2xl`. Stems match Tailwind's own, so + * `px-*` is logical (`padding-inline`) and `pl-*` is physical, and + * the numeric scale (`p-4`) is untouched alongside them. * - * 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. + * This file is imported by `resources/css/utilities.css`, which is where + * the token values it resolves against are set up. It has to be imported + * *outside* a layer: `@utility` may not be nested, and Tailwind places + * what it generates into the `utilities` layer regardless. */ -@theme inline { - /* ——— Surface ——— */ - --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); - - /* ——— 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); - - /* ——— Neutral ——— */ - --color-neutral-fill-loud: var(--c-color-neutral-fill-loud); - --color-neutral-fill-normal: var(--c-color-neutral-fill-normal); - --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-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-on-quiet: var(--c-color-neutral-on-quiet); - - /* ——— 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); - --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-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-on-quiet: var(--c-color-accent-on-quiet); - - /* ——— Info ——— */ - --color-info-fill-loud: var(--c-color-info-fill-loud); - --color-info-fill-normal: var(--c-color-info-fill-normal); - --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-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-on-quiet: var(--c-color-info-on-quiet); - - /* ——— Success ——— */ - --color-success-fill-loud: var(--c-color-success-fill-loud); - --color-success-fill-normal: var(--c-color-success-fill-normal); - --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-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-on-quiet: var(--c-color-success-on-quiet); - - /* ——— Warning ——— */ - --color-warning-fill-loud: var(--c-color-warning-fill-loud); - --color-warning-fill-normal: var(--c-color-warning-fill-normal); - --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-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-on-quiet: var(--c-color-warning-on-quiet); - - /* ——— Danger ——— */ - --color-danger-fill-loud: var(--c-color-danger-fill-loud); - --color-danger-fill-normal: var(--c-color-danger-fill-normal); - --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-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-on-quiet: var(--c-color-danger-on-quiet); - - /* ——— 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)); +/* ——— Colors — current context ——— */ + +@utility bg-quiet { + background-color: var(--c-color-fill-quiet); +} + +@utility text-quiet { + color: var(--c-color-fill-quiet); +} + +@utility text-on-quiet { + color: var(--c-color-on-quiet); +} + +@utility border-quiet { + border-color: var(--c-color-border-quiet); +} + +@utility bg-normal { + background-color: var(--c-color-fill-normal); +} + +@utility text-normal { + color: var(--c-color-fill-normal); +} + +@utility text-on-normal { + color: var(--c-color-on-normal); +} + +@utility border-normal { + border-color: var(--c-color-border-normal); +} + +@utility bg-loud { + background-color: var(--c-color-fill-loud); +} + +@utility text-loud { + color: var(--c-color-fill-loud); +} + +@utility text-on-loud { + color: var(--c-color-on-loud); +} + +@utility border-loud { + border-color: var(--c-color-border-loud); +} + +/* ——— Colors — neutral ——— */ + +@utility bg-neutral-quiet { + background-color: var(--c-color-neutral-fill-quiet); +} + +@utility text-neutral-quiet { + color: var(--c-color-neutral-fill-quiet); +} + +@utility text-on-neutral-quiet { + color: var(--c-color-neutral-on-quiet); +} + +@utility border-neutral-quiet { + border-color: var(--c-color-neutral-border-quiet); +} + +@utility bg-neutral-normal { + background-color: var(--c-color-neutral-fill-normal); +} + +@utility text-neutral-normal { + color: var(--c-color-neutral-fill-normal); +} + +@utility text-on-neutral-normal { + color: var(--c-color-neutral-on-normal); +} + +@utility border-neutral-normal { + border-color: var(--c-color-neutral-border-normal); +} + +@utility bg-neutral-loud { + background-color: var(--c-color-neutral-fill-loud); +} + +@utility text-neutral-loud { + color: var(--c-color-neutral-fill-loud); +} + +@utility text-on-neutral-loud { + color: var(--c-color-neutral-on-loud); +} + +@utility border-neutral-loud { + border-color: var(--c-color-neutral-border-loud); +} + +/* ——— Colors — accent ——— */ + +@utility bg-accent-quiet { + background-color: var(--c-color-accent-fill-quiet); +} + +@utility text-accent-quiet { + color: var(--c-color-accent-fill-quiet); +} + +@utility text-on-accent-quiet { + color: var(--c-color-accent-on-quiet); +} + +@utility border-accent-quiet { + border-color: var(--c-color-accent-border-quiet); +} + +@utility bg-accent-normal { + background-color: var(--c-color-accent-fill-normal); +} + +@utility text-accent-normal { + color: var(--c-color-accent-fill-normal); +} + +@utility text-on-accent-normal { + color: var(--c-color-accent-on-normal); +} + +@utility border-accent-normal { + border-color: var(--c-color-accent-border-normal); +} + +@utility bg-accent-loud { + background-color: var(--c-color-accent-fill-loud); +} + +@utility text-accent-loud { + color: var(--c-color-accent-fill-loud); +} + +@utility text-on-accent-loud { + color: var(--c-color-accent-on-loud); +} + +@utility border-accent-loud { + border-color: var(--c-color-accent-border-loud); +} + +/* ——— Colors — info ——— */ + +@utility bg-info-quiet { + background-color: var(--c-color-info-fill-quiet); +} + +@utility text-info-quiet { + color: var(--c-color-info-fill-quiet); +} + +@utility text-on-info-quiet { + color: var(--c-color-info-on-quiet); +} + +@utility border-info-quiet { + border-color: var(--c-color-info-border-quiet); +} + +@utility bg-info-normal { + background-color: var(--c-color-info-fill-normal); +} + +@utility text-info-normal { + color: var(--c-color-info-fill-normal); +} + +@utility text-on-info-normal { + color: var(--c-color-info-on-normal); +} + +@utility border-info-normal { + border-color: var(--c-color-info-border-normal); +} + +@utility bg-info-loud { + background-color: var(--c-color-info-fill-loud); +} + +@utility text-info-loud { + color: var(--c-color-info-fill-loud); +} + +@utility text-on-info-loud { + color: var(--c-color-info-on-loud); +} + +@utility border-info-loud { + border-color: var(--c-color-info-border-loud); +} + +/* ——— Colors — success ——— */ + +@utility bg-success-quiet { + background-color: var(--c-color-success-fill-quiet); +} + +@utility text-success-quiet { + color: var(--c-color-success-fill-quiet); +} + +@utility text-on-success-quiet { + color: var(--c-color-success-on-quiet); +} + +@utility border-success-quiet { + border-color: var(--c-color-success-border-quiet); +} + +@utility bg-success-normal { + background-color: var(--c-color-success-fill-normal); +} + +@utility text-success-normal { + color: var(--c-color-success-fill-normal); +} + +@utility text-on-success-normal { + color: var(--c-color-success-on-normal); +} + +@utility border-success-normal { + border-color: var(--c-color-success-border-normal); +} + +@utility bg-success-loud { + background-color: var(--c-color-success-fill-loud); +} + +@utility text-success-loud { + color: var(--c-color-success-fill-loud); +} + +@utility text-on-success-loud { + color: var(--c-color-success-on-loud); +} + +@utility border-success-loud { + border-color: var(--c-color-success-border-loud); +} + +/* ——— Colors — warning ——— */ + +@utility bg-warning-quiet { + background-color: var(--c-color-warning-fill-quiet); +} + +@utility text-warning-quiet { + color: var(--c-color-warning-fill-quiet); +} + +@utility text-on-warning-quiet { + color: var(--c-color-warning-on-quiet); +} + +@utility border-warning-quiet { + border-color: var(--c-color-warning-border-quiet); +} + +@utility bg-warning-normal { + background-color: var(--c-color-warning-fill-normal); +} + +@utility text-warning-normal { + color: var(--c-color-warning-fill-normal); +} + +@utility text-on-warning-normal { + color: var(--c-color-warning-on-normal); +} + +@utility border-warning-normal { + border-color: var(--c-color-warning-border-normal); +} + +@utility bg-warning-loud { + background-color: var(--c-color-warning-fill-loud); +} + +@utility text-warning-loud { + color: var(--c-color-warning-fill-loud); +} + +@utility text-on-warning-loud { + color: var(--c-color-warning-on-loud); +} + +@utility border-warning-loud { + border-color: var(--c-color-warning-border-loud); +} + +/* ——— Colors — danger ——— */ + +@utility bg-danger-quiet { + background-color: var(--c-color-danger-fill-quiet); +} + +@utility text-danger-quiet { + color: var(--c-color-danger-fill-quiet); +} + +@utility text-on-danger-quiet { + color: var(--c-color-danger-on-quiet); +} + +@utility border-danger-quiet { + border-color: var(--c-color-danger-border-quiet); +} + +@utility bg-danger-normal { + background-color: var(--c-color-danger-fill-normal); +} + +@utility text-danger-normal { + color: var(--c-color-danger-fill-normal); +} + +@utility text-on-danger-normal { + color: var(--c-color-danger-on-normal); +} + +@utility border-danger-normal { + border-color: var(--c-color-danger-border-normal); +} + +@utility bg-danger-loud { + background-color: var(--c-color-danger-fill-loud); +} + +@utility text-danger-loud { + color: var(--c-color-danger-fill-loud); +} + +@utility text-on-danger-loud { + color: var(--c-color-danger-on-loud); +} + +@utility border-danger-loud { + border-color: var(--c-color-danger-border-loud); +} + +/* ——— Spacing ——— */ + +@utility p-1px { + padding: var(--c-spacing-1px); +} + +@utility p-xs { + padding: var(--c-spacing-xs); +} + +@utility p-sm { + padding: var(--c-spacing-sm); +} + +@utility p-md { + padding: var(--c-spacing-md); +} + +@utility p-lg { + padding: var(--c-spacing-lg); +} + +@utility p-xl { + padding: var(--c-spacing-xl); +} + +@utility p-2xl { + padding: var(--c-spacing-2xl); +} + +@utility px-1px { + padding-inline: var(--c-spacing-1px); +} + +@utility px-xs { + padding-inline: var(--c-spacing-xs); +} + +@utility px-sm { + padding-inline: var(--c-spacing-sm); +} + +@utility px-md { + padding-inline: var(--c-spacing-md); +} + +@utility px-lg { + padding-inline: var(--c-spacing-lg); +} + +@utility px-xl { + padding-inline: var(--c-spacing-xl); +} + +@utility px-2xl { + padding-inline: var(--c-spacing-2xl); +} + +@utility py-1px { + padding-block: var(--c-spacing-1px); +} + +@utility py-xs { + padding-block: var(--c-spacing-xs); +} + +@utility py-sm { + padding-block: var(--c-spacing-sm); +} + +@utility py-md { + padding-block: var(--c-spacing-md); +} + +@utility py-lg { + padding-block: var(--c-spacing-lg); +} + +@utility py-xl { + padding-block: var(--c-spacing-xl); +} + +@utility py-2xl { + padding-block: var(--c-spacing-2xl); +} + +@utility ps-1px { + padding-inline-start: var(--c-spacing-1px); +} + +@utility ps-xs { + padding-inline-start: var(--c-spacing-xs); +} + +@utility ps-sm { + padding-inline-start: var(--c-spacing-sm); +} + +@utility ps-md { + padding-inline-start: var(--c-spacing-md); +} + +@utility ps-lg { + padding-inline-start: var(--c-spacing-lg); +} + +@utility ps-xl { + padding-inline-start: var(--c-spacing-xl); +} + +@utility ps-2xl { + padding-inline-start: var(--c-spacing-2xl); +} + +@utility pe-1px { + padding-inline-end: var(--c-spacing-1px); +} + +@utility pe-xs { + padding-inline-end: var(--c-spacing-xs); +} + +@utility pe-sm { + padding-inline-end: var(--c-spacing-sm); +} + +@utility pe-md { + padding-inline-end: var(--c-spacing-md); +} + +@utility pe-lg { + padding-inline-end: var(--c-spacing-lg); +} + +@utility pe-xl { + padding-inline-end: var(--c-spacing-xl); +} + +@utility pe-2xl { + padding-inline-end: var(--c-spacing-2xl); +} + +@utility pt-1px { + padding-top: var(--c-spacing-1px); +} + +@utility pt-xs { + padding-top: var(--c-spacing-xs); +} + +@utility pt-sm { + padding-top: var(--c-spacing-sm); +} + +@utility pt-md { + padding-top: var(--c-spacing-md); +} + +@utility pt-lg { + padding-top: var(--c-spacing-lg); +} + +@utility pt-xl { + padding-top: var(--c-spacing-xl); +} + +@utility pt-2xl { + padding-top: var(--c-spacing-2xl); +} + +@utility pr-1px { + padding-right: var(--c-spacing-1px); +} + +@utility pr-xs { + padding-right: var(--c-spacing-xs); +} + +@utility pr-sm { + padding-right: var(--c-spacing-sm); +} + +@utility pr-md { + padding-right: var(--c-spacing-md); +} + +@utility pr-lg { + padding-right: var(--c-spacing-lg); +} + +@utility pr-xl { + padding-right: var(--c-spacing-xl); +} + +@utility pr-2xl { + padding-right: var(--c-spacing-2xl); +} + +@utility pb-1px { + padding-bottom: var(--c-spacing-1px); +} + +@utility pb-xs { + padding-bottom: var(--c-spacing-xs); +} + +@utility pb-sm { + padding-bottom: var(--c-spacing-sm); +} + +@utility pb-md { + padding-bottom: var(--c-spacing-md); +} + +@utility pb-lg { + padding-bottom: var(--c-spacing-lg); +} + +@utility pb-xl { + padding-bottom: var(--c-spacing-xl); +} + +@utility pb-2xl { + padding-bottom: var(--c-spacing-2xl); +} + +@utility pl-1px { + padding-left: var(--c-spacing-1px); +} + +@utility pl-xs { + padding-left: var(--c-spacing-xs); +} + +@utility pl-sm { + padding-left: var(--c-spacing-sm); +} + +@utility pl-md { + padding-left: var(--c-spacing-md); +} + +@utility pl-lg { + padding-left: var(--c-spacing-lg); +} + +@utility pl-xl { + padding-left: var(--c-spacing-xl); +} + +@utility pl-2xl { + padding-left: var(--c-spacing-2xl); +} + +@utility m-1px { + margin: var(--c-spacing-1px); +} + +@utility m-xs { + margin: var(--c-spacing-xs); +} + +@utility m-sm { + margin: var(--c-spacing-sm); +} + +@utility m-md { + margin: var(--c-spacing-md); +} + +@utility m-lg { + margin: var(--c-spacing-lg); +} + +@utility m-xl { + margin: var(--c-spacing-xl); +} + +@utility m-2xl { + margin: var(--c-spacing-2xl); +} + +@utility mx-1px { + margin-inline: var(--c-spacing-1px); +} + +@utility mx-xs { + margin-inline: var(--c-spacing-xs); +} + +@utility mx-sm { + margin-inline: var(--c-spacing-sm); +} + +@utility mx-md { + margin-inline: var(--c-spacing-md); +} + +@utility mx-lg { + margin-inline: var(--c-spacing-lg); +} + +@utility mx-xl { + margin-inline: var(--c-spacing-xl); +} + +@utility mx-2xl { + margin-inline: var(--c-spacing-2xl); +} + +@utility my-1px { + margin-block: var(--c-spacing-1px); +} + +@utility my-xs { + margin-block: var(--c-spacing-xs); +} + +@utility my-sm { + margin-block: var(--c-spacing-sm); +} + +@utility my-md { + margin-block: var(--c-spacing-md); +} + +@utility my-lg { + margin-block: var(--c-spacing-lg); +} + +@utility my-xl { + margin-block: var(--c-spacing-xl); +} + +@utility my-2xl { + margin-block: var(--c-spacing-2xl); +} + +@utility ms-1px { + margin-inline-start: var(--c-spacing-1px); +} + +@utility ms-xs { + margin-inline-start: var(--c-spacing-xs); +} + +@utility ms-sm { + margin-inline-start: var(--c-spacing-sm); +} + +@utility ms-md { + margin-inline-start: var(--c-spacing-md); +} + +@utility ms-lg { + margin-inline-start: var(--c-spacing-lg); +} + +@utility ms-xl { + margin-inline-start: var(--c-spacing-xl); +} + +@utility ms-2xl { + margin-inline-start: var(--c-spacing-2xl); +} + +@utility me-1px { + margin-inline-end: var(--c-spacing-1px); +} + +@utility me-xs { + margin-inline-end: var(--c-spacing-xs); +} + +@utility me-sm { + margin-inline-end: var(--c-spacing-sm); +} + +@utility me-md { + margin-inline-end: var(--c-spacing-md); +} + +@utility me-lg { + margin-inline-end: var(--c-spacing-lg); +} + +@utility me-xl { + margin-inline-end: var(--c-spacing-xl); +} + +@utility me-2xl { + margin-inline-end: var(--c-spacing-2xl); +} + +@utility mt-1px { + margin-top: var(--c-spacing-1px); +} + +@utility mt-xs { + margin-top: var(--c-spacing-xs); +} + +@utility mt-sm { + margin-top: var(--c-spacing-sm); +} + +@utility mt-md { + margin-top: var(--c-spacing-md); +} + +@utility mt-lg { + margin-top: var(--c-spacing-lg); +} + +@utility mt-xl { + margin-top: var(--c-spacing-xl); +} + +@utility mt-2xl { + margin-top: var(--c-spacing-2xl); +} + +@utility mr-1px { + margin-right: var(--c-spacing-1px); +} + +@utility mr-xs { + margin-right: var(--c-spacing-xs); +} + +@utility mr-sm { + margin-right: var(--c-spacing-sm); +} + +@utility mr-md { + margin-right: var(--c-spacing-md); +} + +@utility mr-lg { + margin-right: var(--c-spacing-lg); +} + +@utility mr-xl { + margin-right: var(--c-spacing-xl); +} + +@utility mr-2xl { + margin-right: var(--c-spacing-2xl); +} + +@utility mb-1px { + margin-bottom: var(--c-spacing-1px); +} + +@utility mb-xs { + margin-bottom: var(--c-spacing-xs); +} + +@utility mb-sm { + margin-bottom: var(--c-spacing-sm); +} + +@utility mb-md { + margin-bottom: var(--c-spacing-md); +} + +@utility mb-lg { + margin-bottom: var(--c-spacing-lg); +} + +@utility mb-xl { + margin-bottom: var(--c-spacing-xl); +} + +@utility mb-2xl { + margin-bottom: var(--c-spacing-2xl); +} + +@utility ml-1px { + margin-left: var(--c-spacing-1px); +} + +@utility ml-xs { + margin-left: var(--c-spacing-xs); +} + +@utility ml-sm { + margin-left: var(--c-spacing-sm); +} + +@utility ml-md { + margin-left: var(--c-spacing-md); +} + +@utility ml-lg { + margin-left: var(--c-spacing-lg); +} + +@utility ml-xl { + margin-left: var(--c-spacing-xl); +} + +@utility ml-2xl { + margin-left: var(--c-spacing-2xl); +} + +@utility gap-1px { + gap: var(--c-spacing-1px); +} + +@utility gap-xs { + gap: var(--c-spacing-xs); +} + +@utility gap-sm { + gap: var(--c-spacing-sm); +} + +@utility gap-md { + gap: var(--c-spacing-md); +} + +@utility gap-lg { + gap: var(--c-spacing-lg); +} + +@utility gap-xl { + gap: var(--c-spacing-xl); +} + +@utility gap-2xl { + gap: var(--c-spacing-2xl); +} + +@utility gap-x-1px { + column-gap: var(--c-spacing-1px); +} + +@utility gap-x-xs { + column-gap: var(--c-spacing-xs); +} + +@utility gap-x-sm { + column-gap: var(--c-spacing-sm); +} + +@utility gap-x-md { + column-gap: var(--c-spacing-md); +} + +@utility gap-x-lg { + column-gap: var(--c-spacing-lg); +} + +@utility gap-x-xl { + column-gap: var(--c-spacing-xl); +} + +@utility gap-x-2xl { + column-gap: var(--c-spacing-2xl); +} + +@utility gap-y-1px { + row-gap: var(--c-spacing-1px); +} + +@utility gap-y-xs { + row-gap: var(--c-spacing-xs); +} + +@utility gap-y-sm { + row-gap: var(--c-spacing-sm); +} + +@utility gap-y-md { + row-gap: var(--c-spacing-md); +} + +@utility gap-y-lg { + row-gap: var(--c-spacing-lg); +} + +@utility gap-y-xl { + row-gap: var(--c-spacing-xl); +} + +@utility gap-y-2xl { + row-gap: var(--c-spacing-2xl); } diff --git a/resources/css/cp.css b/resources/css/cp.css index b4fff33991a..1ea7d2960ad 100644 --- a/resources/css/cp.css +++ b/resources/css/cp.css @@ -2,10 +2,11 @@ CP Styles */ @layer theme, base, components, cp, utilities; -@import 'tailwindcss/theme.css' layer(theme); -@import 'tailwindcss/utilities.css' layer(utilities); + +/* Tokens + Tailwind + Craft's token utilities, shared with the legacy shell. */ +@import './utilities.css'; + @import '@craftcms/ui/styles/cp.css' layer(cp); -@import '@craftcms/ui/tailwind.css' layer(theme); @import './fld.css'; @import './cvd.css'; diff --git a/resources/css/utilities.css b/resources/css/utilities.css new file mode 100644 index 00000000000..58ddf4ccccc --- /dev/null +++ b/resources/css/utilities.css @@ -0,0 +1,41 @@ +/** +Craft CP utilities + +The design tokens, Tailwind, and Craft's token utilities — with no reset and +no component styles. Both CP shells load this: the Inertia shell pulls it in +through `cp.css`, and the legacy Twig shell loads it on its own (registered by +`CpAsset`), so a utility class means the same thing on either side and the +`--c-*` tokens the legacy stylesheet aliases against are actually defined. + +Utilities are unprefixed. CP code only ever runs in the CP, where this is the +only Tailwind there is, so there is nothing to disambiguate a Craft utility +from — `bg-loud` and `flex` are equally "ours" at the point of use. + +Tailwind's default theme is left in place underneath Craft's. Where the two +name the same thing, Craft's wins: the token imports below come after +Tailwind's in the same layer, so `--color-red-500` and friends resolve to the +Craft palette. + +Nothing here resets anything, which is what makes it safe to drop onto a +legacy page. Tailwind's utilities land in the `utilities` layer while the +legacy stylesheet is unlayered, so on the rare name they share — `hidden`, +`truncate`, `inline-flex` — the legacy rule still wins, exactly as before. + */ + +@layer theme, utilities; + +@import 'tailwindcss/theme.css' layer(theme); +@import 'tailwindcss/utilities.css' layer(utilities); + +/* Token values — the `var()`s the utilities resolve against at render time. */ +@import '@craftcms/ui/styles/shared/variables.css' layer(theme); +@import '@craftcms/ui/styles/shared/tokens.css' layer(theme); +@import '@craftcms/ui/styles/shared/colorable.css' layer(theme); + +/** +Craft's own utilities. + +No `layer()` here: `@utility` may not be nested, and a layered import would +nest it. Tailwind places what it generates into the `utilities` layer anyway. + */ +@import '@craftcms/ui/tailwind.css'; diff --git a/resources/js/modules/component-select/component-select.ts b/resources/js/modules/component-select/component-select.ts index 22febb7a83a..9e79504c46c 100644 --- a/resources/js/modules/component-select/component-select.ts +++ b/resources/js/modules/component-select/component-select.ts @@ -1094,7 +1094,7 @@ export class ComponentSelect extends Base { option.setAttribute('hidden', ''); const labelWrap = document.createElement('span'); - labelWrap.className = 'inline-flex flex-col items-start gap-2xs'; + labelWrap.className = 'inline-flex flex-col items-start gap-xs'; const labelEl = document.createElement('span'); labelEl.textContent = label; diff --git a/resources/js/modules/cp-modal/cp-modal.ts b/resources/js/modules/cp-modal/cp-modal.ts index 919004574b7..2e5fcfa8dd1 100644 --- a/resources/js/modules/cp-modal/cp-modal.ts +++ b/resources/js/modules/cp-modal/cp-modal.ts @@ -106,9 +106,9 @@ export class CpModal extends Modal { // Footer this.#$footer = $('
', {class: 'cpmodal-footer hidden'}); $('
', {class: 'flex-grow'}).appendTo(this.#$footer); - const $btnContainer = $('
', {class: 'flex flex-nowrap'}).appendTo( - this.#$footer - ); + const $btnContainer = $('
', { + class: 'flex flex-nowrap', + }).appendTo(this.#$footer); this.#$loadSpinner = $('
', { class: 'spinner', diff --git a/resources/js/modules/element-deletion-manager/element-deletion-manager.ts b/resources/js/modules/element-deletion-manager/element-deletion-manager.ts index 9191182e708..7c2721fb997 100644 --- a/resources/js/modules/element-deletion-manager/element-deletion-manager.ts +++ b/resources/js/modules/element-deletion-manager/element-deletion-manager.ts @@ -168,7 +168,7 @@ export class ElementDeletionManager extends Base { const $body = $('
', {class: 'body'}).appendTo($container); $('

', { - class: 'flex flex-inline items-center gap-xs', + class: 'flex flex-inline items-center gap-sm', html: Craft.t( 'app', 'Before deleting {label}, please address the following {numBlockers, plural, =1{issue} other{issues}}:', diff --git a/resources/js/modules/elements/components/ElementContextMenu.vue b/resources/js/modules/elements/components/ElementContextMenu.vue index 8fa01cece01..fd56f3a9d21 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-on-neutral-quiet', }, item.label ), diff --git a/resources/js/modules/elements/components/ElementEditor.vue b/resources/js/modules/elements/components/ElementEditor.vue index eb6589a0cae..115eb54c582 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/RevisionsList.vue b/resources/js/modules/elements/components/RevisionsList.vue index 291f32b024a..fb4943b7949 100644 --- a/resources/js/modules/elements/components/RevisionsList.vue +++ b/resources/js/modules/elements/components/RevisionsList.vue @@ -89,7 +89,7 @@