From 7b0ac73db8da55b4f7ff39e4181bada608c810a2 Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Mon, 4 May 2026 10:30:33 -0700 Subject: [PATCH 01/25] Update static color palette --- .../scripts/generate-color-palette.js | 4 +- .../craftcms-cp/src/stories/tokens/Colors.mdx | 16 +- .../src/styles/color-definitions.js | 7 + .../src/styles/shared/color-palette.css | 504 +++++++++--------- 4 files changed, 276 insertions(+), 255 deletions(-) diff --git a/packages/craftcms-cp/scripts/generate-color-palette.js b/packages/craftcms-cp/scripts/generate-color-palette.js index ab765eb5b28..04bd0d164d6 100644 --- a/packages/craftcms-cp/scripts/generate-color-palette.js +++ b/packages/craftcms-cp/scripts/generate-color-palette.js @@ -1,7 +1,7 @@ import {writeFileSync} from 'fs'; import {dirname, resolve} from 'path'; import {fileURLToPath} from 'url'; -import {stops, lightTheme, darkTheme} from '../src/styles/color-definitions.js'; +import {stops, lightTheme, darkTheme, staticTheme} from '../src/styles/color-definitions.js'; const __dirname = dirname(fileURLToPath(import.meta.url)); const ROOT = resolve(__dirname, '..'); @@ -35,7 +35,7 @@ function printStyles() { const lightColors = colorsToCssVariables(lightTheme.contrastColors); const darkColors = colorsToCssVariables(darkTheme.contrastColors); const staticColors = colorsToCssVariables( - lightTheme.contrastColors, + staticTheme.contrastColors, 'color-static' ); diff --git a/packages/craftcms-cp/src/stories/tokens/Colors.mdx b/packages/craftcms-cp/src/stories/tokens/Colors.mdx index ffbc500e8b8..176c9e9fcad 100644 --- a/packages/craftcms-cp/src/stories/tokens/Colors.mdx +++ b/packages/craftcms-cp/src/stories/tokens/Colors.mdx @@ -1,5 +1,5 @@ import {Meta, ColorPalette, ColorItem} from '@storybook/addon-docs/blocks'; -import {stops, lightTheme, darkTheme} from '../../styles/color-definitions.js'; +import {stops, staticTheme, lightTheme, darkTheme} from '../../styles/color-definitions.js'; @@ -22,6 +22,20 @@ Static colors are based on the colors generated for the light theme, and can be The color variables are used by prefixing the desired color with `--color-static-`. For example, the `blue-500` color can be used with the following variable: `--color-static-blue-500`. + + {staticTheme.contrastColors + .filter((scale) => scale.values) + .map((scale) => ( + [`${stops[i]}`, val.value]) + )} + /> + ))} + + ## Theme Colors The color palette adapts to the active theme, providing appropriate contrast for UI elements and text. diff --git a/packages/craftcms-cp/src/styles/color-definitions.js b/packages/craftcms-cp/src/styles/color-definitions.js index 34ec1a4e5fe..fcb11824292 100644 --- a/packages/craftcms-cp/src/styles/color-definitions.js +++ b/packages/craftcms-cp/src/styles/color-definitions.js @@ -1,6 +1,7 @@ import {Theme, Color, BackgroundColor} from '@adobe/leonardo-contrast-colors'; const contrastRatios = { + static: [1.45, 1.78, 2.22, 2.78, 3.54, 4.61, 5.92, 7.81, 10.21, 13.01, 15.91], light: [1.08, 1.33, 1.58, 2.39, 3.01, 3.87, 5.07, 6.72, 8.84, 11.31, 13.94], dark: [1.08, 1.58, 1.96, 2.45, 3.09, 3.9, 5.07, 6.02, 7.34, 8.77, 10.18], base: [-1.2, 1, 1.2, 1.4, 2, 4, 5, 6.5, 10.21, 13.58, 17.04], @@ -165,6 +166,12 @@ export const lightTheme = new Theme({ lightness: 97, }); +export const staticTheme = new Theme({ + colors: makeColors(contrastRatios.static), + backgroundColor: backgroundColor, + lightness: 100, +}); + export const darkTheme = new Theme({ colors: makeColors(contrastRatios.dark), backgroundColor: backgroundColor, diff --git a/packages/craftcms-cp/src/styles/shared/color-palette.css b/packages/craftcms-cp/src/styles/shared/color-palette.css index a110be227df..00f6a78f08c 100644 --- a/packages/craftcms-cp/src/styles/shared/color-palette.css +++ b/packages/craftcms-cp/src/styles/shared/color-palette.css @@ -257,259 +257,259 @@ --color-base-950: #0f141c; /* Static colors */ - --color-static-gray-50: #eaecef; - --color-static-gray-100: #d4d7dd; - --color-static-gray-200: #c2c6ce; - --color-static-gray-300: #9ba1ae; - --color-static-gray-400: #888e9c; - --color-static-gray-500: #757b8a; - --color-static-gray-600: #626978; - --color-static-gray-700: #4f5665; - --color-static-gray-800: #3e4555; - --color-static-gray-900: #2e3545; - --color-static-gray-950: #1e2635; - --color-static-red-50: #fae8e8; - --color-static-red-100: #f6cdcc; - --color-static-red-200: #f4b6b4; - --color-static-red-300: #ee817e; - --color-static-red-400: #e8645f; - --color-static-red-500: #dc463e; - --color-static-red-600: #c72c22; - --color-static-red-700: #a32720; - --color-static-red-800: #80231f; - --color-static-red-900: #631b18; - --color-static-red-950: #4b110f; - --color-static-orange-50: #fbead2; - --color-static-orange-100: #f7d0a1; - --color-static-orange-200: #f4ba7c; - --color-static-orange-300: #ed8633; - --color-static-orange-400: #e6692c; - --color-static-orange-500: #d45124; - --color-static-orange-600: #b5441d; - --color-static-orange-700: #963816; - --color-static-orange-800: #792c12; - --color-static-orange-900: #5e220e; - --color-static-orange-950: #44180b; - --color-static-amber-50: #fbecaf; - --color-static-amber-100: #f7d36f; - --color-static-amber-200: #f4bd44; - --color-static-amber-300: #df8e32; - --color-static-amber-400: #ca7c2c; - --color-static-amber-500: #b56825; - --color-static-amber-600: #a0551e; - --color-static-amber-700: #8a4217; - --color-static-amber-800: #703411; - --color-static-amber-900: #58270b; - --color-static-amber-950: #411b06; - --color-static-emerald-50: #cff6e1; - --color-static-emerald-100: #9ae7be; - --color-static-emerald-200: #77d9a6; - --color-static-emerald-300: #51b37f; - --color-static-emerald-400: #479e70; - --color-static-emerald-500: #3d8961; - --color-static-emerald-600: #327555; - --color-static-emerald-700: #286048; - --color-static-emerald-800: #1e4d3c; - --color-static-emerald-900: #173b2e; - --color-static-emerald-950: #112a21; - --color-static-blue-50: #e2edfd; - --color-static-blue-100: #c1d9fb; - --color-static-blue-200: #a5c8fa; - --color-static-blue-300: #68a2f7; - --color-static-blue-400: #518cf6; - --color-static-blue-500: #3e74f2; - --color-static-blue-600: #305ce7; - --color-static-blue-700: #2244d7; - --color-static-blue-800: #2138a7; - --color-static-blue-900: #1d2d7a; - --color-static-blue-950: #192250; - --color-static-yellow-50: #fcef90; - --color-static-yellow-100: #f7d358; - --color-static-yellow-200: #eebf40; - --color-static-yellow-300: #ce9733; - --color-static-yellow-400: #bd822c; - --color-static-yellow-500: #aa6f24; - --color-static-yellow-600: #945c1d; - --color-static-yellow-700: #7c4b16; - --color-static-yellow-800: #633c12; - --color-static-yellow-900: #4c2e0e; - --color-static-yellow-950: #37210a; - --color-static-slate-50: #e9eef3; - --color-static-slate-100: #ced7e2; - --color-static-slate-200: #bdc7d4; - --color-static-slate-300: #95a2b4; - --color-static-slate-400: #828fa4; - --color-static-slate-500: #6f7c94; - --color-static-slate-600: #5c6982; - --color-static-slate-700: #4a576d; - --color-static-slate-800: #3a455a; - --color-static-slate-900: #2b3549; - --color-static-slate-950: #1e2637; - --color-static-lime-50: #ddf7a2; - --color-static-lime-100: #b4e758; - --color-static-lime-200: #9ed742; - --color-static-lime-300: #7ab034; - --color-static-lime-400: #6a9c2d; - --color-static-lime-500: #5d8726; - --color-static-lime-600: #50731f; - --color-static-lime-700: #435e18; - --color-static-lime-800: #344c13; - --color-static-lime-900: #273a0e; - --color-static-lime-950: #1b2a09; - --color-static-green-50: #cef7d8; - --color-static-green-100: #96e9a8; - --color-static-green-200: #6add82; - --color-static-green-300: #52b555; - --color-static-green-400: #48a04a; - --color-static-green-500: #3e8b42; - --color-static-green-600: #34763b; - --color-static-green-700: #2b6133; - --color-static-green-800: #234e2b; - --color-static-green-900: #1b3b21; - --color-static-green-950: #142b18; - --color-static-teal-50: #c7f7ec; - --color-static-teal-100: #90e7d6; - --color-static-teal-200: #6dd7c4; - --color-static-teal-300: #4fb0a1; - --color-static-teal-400: #459c90; - --color-static-teal-500: #3b877f; - --color-static-teal-600: #31736d; - --color-static-teal-700: #275f5b; - --color-static-teal-800: #1e4c49; - --color-static-teal-900: #163a39; - --color-static-teal-950: #0f2a2a; - --color-static-cyan-50: #c9f5fc; - --color-static-cyan-100: #7fe6fa; - --color-static-cyan-200: #66d4f1; - --color-static-cyan-300: #4dacce; - --color-static-cyan-400: #4397bb; - --color-static-cyan-500: #3983a5; - --color-static-cyan-600: #2f6f8d; - --color-static-cyan-700: #265c74; - --color-static-cyan-800: #1e4a5e; - --color-static-cyan-900: #17384b; - --color-static-cyan-950: #102836; - --color-static-sky-50: #dceffc; - --color-static-sky-100: #aaddfb; - --color-static-sky-200: #84cefa; - --color-static-sky-300: #4ca8eb; - --color-static-sky-400: #4193d9; - --color-static-sky-500: #377fc5; - --color-static-sky-600: #2e6ca7; - --color-static-sky-700: #25598a; - --color-static-sky-800: #1d476f; - --color-static-sky-900: #163655; - --color-static-sky-950: #10273e; - --color-static-zinc-50: #ededee; - --color-static-zinc-100: #d6d6da; - --color-static-zinc-200: #c5c5ca; - --color-static-zinc-300: #a0a0a7; - --color-static-zinc-400: #8d8d95; - --color-static-zinc-500: #7b7b83; - --color-static-zinc-600: #686872; - --color-static-zinc-700: #55555f; - --color-static-zinc-800: #44444c; - --color-static-zinc-900: #34343b; - --color-static-zinc-950: #25252b; - --color-static-violet-50: #eeebfd; - --color-static-violet-100: #d8d2fb; - --color-static-violet-200: #c9bdfa; - --color-static-violet-300: #a991f8; - --color-static-violet-400: #9979f7; - --color-static-violet-500: #8b5df5; - --color-static-violet-600: #7c3cf4; - --color-static-violet-700: #6a1be3; - --color-static-violet-800: #5518b5; - --color-static-violet-900: #401889; - --color-static-violet-950: #2d0f69; - --color-static-purple-50: #f2eafd; - --color-static-purple-100: #e2cefb; - --color-static-purple-200: #d6b9f9; - --color-static-purple-300: #be88f8; - --color-static-purple-400: #b16df7; - --color-static-purple-500: #a24ff6; - --color-static-purple-600: #902bf2; - --color-static-purple-700: #7815d6; - --color-static-purple-800: #6118a6; - --color-static-purple-900: #4b167c; - --color-static-purple-950: #380963; - --color-static-fuchsia-50: #f7e7fd; - --color-static-fuchsia-100: #eecafb; - --color-static-fuchsia-200: #e9b2f9; - --color-static-fuchsia-300: #dd78f7; - --color-static-fuchsia-400: #d15bed; - --color-static-fuchsia-500: #c23be0; - --color-static-fuchsia-600: #ac22c8; - --color-static-fuchsia-700: #8e1ea3; - --color-static-fuchsia-800: #721c7f; - --color-static-fuchsia-900: #571861; - --color-static-fuchsia-950: #401146; - --color-static-pink-50: #f9e7f2; - --color-static-pink-100: #f4cbe4; - --color-static-pink-200: #f1b3d8; - --color-static-pink-300: #eb7bba; - --color-static-pink-400: #e65ba6; - --color-static-pink-500: #db3b88; - --color-static-pink-600: #c2296a; - --color-static-pink-700: #a22054; - --color-static-pink-800: #801d44; - --color-static-pink-900: #631735; - --color-static-pink-950: #481127; - --color-static-rose-50: #fbe8ea; - --color-static-rose-100: #f7ccd0; - --color-static-rose-200: #f3b6bd; - --color-static-rose-300: #ee7f8f; - --color-static-rose-400: #ec5e74; - --color-static-rose-500: #e43852; - --color-static-rose-600: #c7293f; - --color-static-rose-700: #a52138; - --color-static-rose-800: #851930; - --color-static-rose-900: #681225; - --color-static-rose-950: #4e0b1b; - --color-static-neutral-50: #ededed; - --color-static-neutral-100: #d7d7d7; - --color-static-neutral-200: #c5c5c5; - --color-static-neutral-300: #a0a0a0; - --color-static-neutral-400: #8e8e8e; - --color-static-neutral-500: #7c7c7c; - --color-static-neutral-600: #686868; - --color-static-neutral-700: #565656; - --color-static-neutral-800: #444444; - --color-static-neutral-900: #343434; - --color-static-neutral-950: #262626; - --color-static-stone-50: #eeedec; - --color-static-stone-100: #d8d7d5; - --color-static-stone-200: #c8c5c2; - --color-static-stone-300: #a4a09b; - --color-static-stone-400: #928e88; - --color-static-stone-500: #807a75; - --color-static-stone-600: #6d6862; - --color-static-stone-700: #5a5550; - --color-static-stone-800: #48443f; - --color-static-stone-900: #373430; - --color-static-stone-950: #282523; - --color-static-indigo-50: #e7ebfd; - --color-static-indigo-100: #cfd5fb; - --color-static-indigo-200: #bbc2fa; - --color-static-indigo-300: #9198f8; - --color-static-indigo-400: #7b83f6; - --color-static-indigo-500: #6b6cec; - --color-static-indigo-600: #5a54e1; - --color-static-indigo-700: #483bd6; - --color-static-indigo-800: #3a2eaf; - --color-static-indigo-900: #2e2681; - --color-static-indigo-950: #221e56; + --color-static-gray-50: #d3d6dc; + --color-static-gray-100: #bec2cb; + --color-static-gray-200: #a9aeb9; + --color-static-gray-300: #959ba8; + --color-static-gray-400: #828896; + --color-static-gray-500: #6f7584; + --color-static-gray-600: #5e6473; + --color-static-gray-700: #4a5261; + --color-static-gray-800: #3a4151; + --color-static-gray-900: #2a3141; + --color-static-gray-950: #1a2231; + --color-static-red-50: #f6cdcc; + --color-static-red-100: #f3b2b1; + --color-static-red-200: #f09593; + --color-static-red-300: #ed7875; + --color-static-red-400: #e45a55; + --color-static-red-500: #d83930; + --color-static-red-600: #be2a21; + --color-static-red-700: #9a2620; + --color-static-red-800: #78221f; + --color-static-red-900: #5d1816; + --color-static-red-950: #440f0d; + --color-static-orange-50: #f7d0a1; + --color-static-orange-100: #f4b574; + --color-static-orange-200: #f09a47; + --color-static-orange-300: #eb7e31; + --color-static-orange-400: #e35f29; + --color-static-orange-500: #c94c22; + --color-static-orange-600: #ad411b; + --color-static-orange-700: #8f3515; + --color-static-orange-800: #722a11; + --color-static-orange-900: #571f0d; + --color-static-orange-950: #3d160a; + --color-static-amber-50: #f7d36f; + --color-static-amber-100: #f4b83f; + --color-static-amber-200: #ee9c37; + --color-static-amber-300: #d88930; + --color-static-amber-400: #c47529; + --color-static-amber-500: #ae6122; + --color-static-amber-600: #9a501c; + --color-static-amber-700: #843e15; + --color-static-amber-800: #69310f; + --color-static-amber-900: #51240a; + --color-static-amber-950: #3a1805; + --color-static-emerald-50: #99e6bd; + --color-static-emerald-100: #6fd6a1; + --color-static-emerald-200: #58c18a; + --color-static-emerald-300: #4eac7a; + --color-static-emerald-400: #44976a; + --color-static-emerald-500: #39825d; + --color-static-emerald-600: #306f52; + --color-static-emerald-700: #255b45; + --color-static-emerald-800: #1c4838; + --color-static-emerald-900: #15372b; + --color-static-emerald-950: #0f261e; + --color-static-blue-50: #c0d8fb; + --color-static-blue-100: #a0c4f9; + --color-static-blue-200: #7eb0f8; + --color-static-blue-300: #609bf7; + --color-static-blue-400: #4a84f6; + --color-static-blue-500: #396cee; + --color-static-blue-600: #2c55e4; + --color-static-blue-700: #2241cb; + --color-static-blue-800: #20369b; + --color-static-blue-900: #1c2a70; + --color-static-blue-950: #161e47; + --color-static-yellow-50: #f7d358; + --color-static-yellow-100: #ebbb3f; + --color-static-yellow-200: #daa538; + --color-static-yellow-300: #c99031; + --color-static-yellow-400: #b77c2a; + --color-static-yellow-500: #a26722; + --color-static-yellow-600: #8e571b; + --color-static-yellow-700: #754715; + --color-static-yellow-800: #5d3811; + --color-static-yellow-900: #462b0d; + --color-static-yellow-950: #311e09; + --color-static-slate-50: #ced7e2; + --color-static-slate-100: #b8c3d0; + --color-static-slate-200: #a4afc0; + --color-static-slate-300: #909caf; + --color-static-slate-400: #7c899f; + --color-static-slate-500: #68758e; + --color-static-slate-600: #57647c; + --color-static-slate-700: #475268; + --color-static-slate-800: #374256; + --color-static-slate-900: #283144; + --color-static-slate-950: #1a2232; + --color-static-lime-50: #b4e758; + --color-static-lime-100: #9bd340; + --color-static-lime-200: #87be39; + --color-static-lime-300: #75aa32; + --color-static-lime-400: #66952a; + --color-static-lime-500: #598023; + --color-static-lime-600: #4d6d1d; + --color-static-lime-700: #3f5a17; + --color-static-lime-800: #314712; + --color-static-lime-900: #24360d; + --color-static-lime-950: #182608; + --color-static-green-50: #96e9a8; + --color-static-green-100: #64d97a; + --color-static-green-200: #59c35e; + --color-static-green-300: #4faf52; + --color-static-green-400: #449947; + --color-static-green-500: #3a8440; + --color-static-green-600: #327039; + --color-static-green-700: #295c32; + --color-static-green-800: #214929; + --color-static-green-900: #19371f; + --color-static-green-950: #112616; + --color-static-teal-50: #8de6d4; + --color-static-teal-100: #67d4c1; + --color-static-teal-200: #57bfae; + --color-static-teal-300: #4caa9c; + --color-static-teal-400: #42958b; + --color-static-teal-500: #388079; + --color-static-teal-600: #2e6e68; + --color-static-teal-700: #255b57; + --color-static-teal-800: #1c4745; + --color-static-teal-900: #143636; + --color-static-teal-950: #0d2525; + --color-static-cyan-50: #7de4f9; + --color-static-cyan-100: #61d0ef; + --color-static-cyan-200: #55badb; + --color-static-cyan-300: #4aa6c8; + --color-static-cyan-400: #4091b5; + --color-static-cyan-500: #367c9d; + --color-static-cyan-600: #2d6a86; + --color-static-cyan-700: #24576f; + --color-static-cyan-800: #1c455a; + --color-static-cyan-900: #153446; + --color-static-cyan-950: #0f2431; + --color-static-sky-50: #aaddfb; + --color-static-sky-100: #7dcbfa; + --color-static-sky-200: #53b6f7; + --color-static-sky-300: #48a1e5; + --color-static-sky-400: #3e8cd4; + --color-static-sky-500: #3478bc; + --color-static-sky-600: #2c679f; + --color-static-sky-700: #235482; + --color-static-sky-800: #1c4369; + --color-static-sky-900: #14324f; + --color-static-sky-950: #0e2338; + --color-static-zinc-50: #d5d5d9; + --color-static-zinc-100: #c1c1c6; + --color-static-zinc-200: #adadb3; + --color-static-zinc-300: #9a9aa1; + --color-static-zinc-400: #87878f; + --color-static-zinc-500: #74747d; + --color-static-zinc-600: #63636d; + --color-static-zinc-700: #52525c; + --color-static-zinc-800: #404048; + --color-static-zinc-900: #303036; + --color-static-zinc-950: #212126; + --color-static-violet-50: #d8d2fb; + --color-static-violet-100: #c6b9fa; + --color-static-violet-200: #b5a1f8; + --color-static-violet-300: #a48af7; + --color-static-violet-400: #9570f6; + --color-static-violet-500: #8553f5; + --color-static-violet-600: #7831f4; + --color-static-violet-700: #6515dc; + --color-static-violet-800: #5018ab; + --color-static-violet-900: #3b1581; + --color-static-violet-950: #280d5f; + --color-static-purple-50: #e2cefb; + --color-static-purple-100: #d4b5f9; + --color-static-purple-200: #c79af8; + --color-static-purple-300: #ba80f8; + --color-static-purple-400: #ac64f7; + --color-static-purple-500: #9c44f5; + --color-static-purple-600: #8a20f0; + --color-static-purple-700: #7215cb; + --color-static-purple-800: #5b199b; + --color-static-purple-900: #451376; + --color-static-purple-950: #32075b; + --color-static-fuchsia-50: #eec9fb; + --color-static-fuchsia-100: #e8adf9; + --color-static-fuchsia-200: #e28ef8; + --color-static-fuchsia-300: #da6ef6; + --color-static-fuchsia-400: #cc51e9; + --color-static-fuchsia-500: #bc2eda; + --color-static-fuchsia-600: #a421be; + --color-static-fuchsia-700: #881d9a; + --color-static-fuchsia-800: #6b1c77; + --color-static-fuchsia-900: #51165a; + --color-static-fuchsia-950: #390f40; + --color-static-pink-50: #f3cae4; + --color-static-pink-100: #f0afd5; + --color-static-pink-200: #ed90c5; + --color-static-pink-300: #ea71b5; + --color-static-pink-400: #e4509e; + --color-static-pink-500: #d5317b; + --color-static-pink-600: #ba2664; + --color-static-pink-700: #9a1e4f; + --color-static-pink-800: #781d41; + --color-static-pink-900: #5b1631; + --color-static-pink-950: #410f23; + --color-static-rose-50: #f7ccd0; + --color-static-rose-100: #f3b1b8; + --color-static-rose-200: #f0949f; + --color-static-rose-300: #ee7587; + --color-static-rose-400: #eb516a; + --color-static-rose-500: #db3148; + --color-static-rose-600: #be273c; + --color-static-rose-700: #9d1f38; + --color-static-rose-800: #7e172e; + --color-static-rose-900: #611023; + --color-static-rose-950: #470918; + --color-static-neutral-50: #d6d6d6; + --color-static-neutral-100: #c2c2c2; + --color-static-neutral-200: #aeaeae; + --color-static-neutral-300: #9b9b9b; + --color-static-neutral-400: #888888; + --color-static-neutral-500: #757575; + --color-static-neutral-600: #646464; + --color-static-neutral-700: #525252; + --color-static-neutral-800: #414141; + --color-static-neutral-900: #313131; + --color-static-neutral-950: #222222; + --color-static-stone-50: #d7d5d3; + --color-static-stone-100: #c4c2bf; + --color-static-stone-200: #b1ada9; + --color-static-stone-300: #9f9a95; + --color-static-stone-400: #8d8782; + --color-static-stone-500: #7a746e; + --color-static-stone-600: #69635e; + --color-static-stone-700: #56514c; + --color-static-stone-800: #44403b; + --color-static-stone-900: #33302d; + --color-static-stone-950: #24211f; + --color-static-indigo-50: #ced4fb; + --color-static-indigo-100: #b7befa; + --color-static-indigo-200: #a0a8f9; + --color-static-indigo-300: #8a92f8; + --color-static-indigo-400: #767bf3; + --color-static-indigo-500: #6564e8; + --color-static-indigo-600: #564ede; + --color-static-indigo-700: #4335d3; + --color-static-indigo-800: #372ca4; + --color-static-indigo-900: #2b2474; + --color-static-indigo-950: #1e1b4d; --color-static-base-50: #ffffff; - --color-static-base-100: #f2f5f8; - --color-static-base-200: #dae1e9; - --color-static-base-300: #c8d2de; - --color-static-base-400: #a6b1c1; - --color-static-base-500: #6c7a92; - --color-static-base-600: #5d6a83; - --color-static-base-700: #4d5970; - --color-static-base-800: #313c50; - --color-static-base-900: #1f283b; - --color-static-base-950: #0f141c; + --color-static-base-100: #fefefe; + --color-static-base-200: #e5ebf0; + --color-static-base-300: #d2dbe4; + --color-static-base-400: #acb8c7; + --color-static-base-500: #728097; + --color-static-base-600: #627089; + --color-static-base-700: #525e76; + --color-static-base-800: #374256; + --color-static-base-900: #252e41; + --color-static-base-950: #161c29; } [data-theme='dark'] { From 03cd9e457757a2f57b004034ac3afa5fc1d2b3f8 Mon Sep 17 00:00:00 2001 From: Guadalupe Camacho Date: Mon, 4 May 2026 18:28:50 -0700 Subject: [PATCH 02/25] Start refactoring indicators, dev mode colors, and switch buttons to use static colors --- .../src/components/indicator/indicator.ts | 30 +++++++++++++++---- .../components/switch-button/switch-button.ts | 8 +++-- .../craftcms-cp/src/styles/shared/tokens.css | 20 +++++++++++++ resources/js/components/DevModeIndicator.vue | 5 ++-- 4 files changed, 54 insertions(+), 9 deletions(-) diff --git a/packages/craftcms-cp/src/components/indicator/indicator.ts b/packages/craftcms-cp/src/components/indicator/indicator.ts index 944806e22cf..b7e36227568 100644 --- a/packages/craftcms-cp/src/components/indicator/indicator.ts +++ b/packages/craftcms-cp/src/components/indicator/indicator.ts @@ -14,18 +14,38 @@ export default class CraftIndicator extends LitElement { width: var(--c-indicator-size, 0.5em); border-radius: var(--c-radius-full); color: var(--c-color-on-loud); - background-color: var(--c-color-fill-loud); - border: 1px solid var(--c-color-border-loud); + background-color: var(--indicator-background-color); + border: 1px solid var(--indicator-border-color); } .indicator--empty { - background-color: var(--c-color-neutral-fill-quiet); - border: 1px solid var(--c-color-neutral-border-normal); + --indicator-background-color: none; + --indicator-border-color: var(--c-text-default); + } + + .indicator--success { + --indicator-background-color: var(--c-success-background-color-default); + --indicator-border-color: var(--c-success-border-color); + } + + .indicator--danger { + --indicator-background-color: var(--c-danger-background-color-default); + --indicator-border-color: var(--c-danger-border-color); + } + + .indicator--warning { + --indicator-background-color: var(--c-warning-background-color-default); + --indicator-border-color: var(--c-warning-border-color); + } + + .indicator--info { + --indicator-background-color: var(--c-info-background-color-default); + --indicator-border-color: var(--c-info-border-color); } `, ]; - @property({reflect: true}) + @property() variant: VariantKey | 'empty' = Variant.Default; @property() diff --git a/packages/craftcms-cp/src/components/switch-button/switch-button.ts b/packages/craftcms-cp/src/components/switch-button/switch-button.ts index 49d81a7d9ea..1217a575525 100644 --- a/packages/craftcms-cp/src/components/switch-button/switch-button.ts +++ b/packages/craftcms-cp/src/components/switch-button/switch-button.ts @@ -12,6 +12,10 @@ export default class CraftSwitchButton extends LionSwitchButton { --c-switch-thumb-height: calc( var(--c-switch-height) - var(--c-switch-thumb-offset) ); + --c-switch-track-background-off: var(--c-color-neutral-fill-quiet); + --c-switch-track-background-on: var( + --c-success-background-color-default + ); display: flex; height: var(--c-switch-height); width: calc(var(--c-switch-height) * 2); @@ -30,7 +34,7 @@ export default class CraftSwitchButton extends LionSwitchButton { .switch-button__track { --tw-inset-shadow-color: var(--color-slate-300); margin-inline: -1px; - background-color: var(--c-color-neutral-fill-quiet); + background-color: var(--c-switch-track-background-off); border-radius: var(--c-radius-full); border: 1px solid var(--c-form-control-border-color); box-shadow: var(--c-input-shadow); @@ -49,7 +53,7 @@ export default class CraftSwitchButton extends LionSwitchButton { } :host([checked]) .switch-button__track { - background-color: var(--c-color-success-fill-loud); + background-color: var(--c-switch-track-background-on); } :host([checked]) .switch-button__thumb { diff --git a/packages/craftcms-cp/src/styles/shared/tokens.css b/packages/craftcms-cp/src/styles/shared/tokens.css index d27db89a921..d30e593cc54 100644 --- a/packages/craftcms-cp/src/styles/shared/tokens.css +++ b/packages/craftcms-cp/src/styles/shared/tokens.css @@ -108,6 +108,26 @@ /** Components */ + --c-success-background-color-default: var(--color-static-emerald-400); + --c-success-border-color: var(--color-static-emerald-500); + + --c-warning-background-color-default: var(--color-static-yellow-100); + --c-warning-border-color: var(--color-static-yellow-300); + + --c-info-background-color-default: var(--color-static-blue-400); + --c-info-border-color: var(--color-static-blue-500); + + --c-brand-background-color-default: var(--color-static-red-500); + --c-brand-border-color: var(--color-static-red-600); + + --c-danger-background-color-default: var(--color-static-red-500); + --c-danger-border-color: var(--color-static-red-600); + + --c-accent-background-color-default: var(--color-static-blue-400); + --c-accent-border-color: var(--color-static-blue-500); + + --c-neutral-background-color-default: var(--color-static-slate-300); + --c-neutral-border-color: var(--color-static-slate-400); /** Form controls diff --git a/resources/js/components/DevModeIndicator.vue b/resources/js/components/DevModeIndicator.vue index bddf254e779..4f272ec8051 100644 --- a/resources/js/components/DevModeIndicator.vue +++ b/resources/js/components/DevModeIndicator.vue @@ -12,14 +12,15 @@