starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-25 16:02:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

New color palettes (#6945)

Browse Source 
* debug runs text fix

* New color palette

* Remove luminance-blue

* replace hardcoded flow node colors

* nit
This commit is contained in:
Diego Imbert
2025-10-27 16:46:28 +01:00
committed by GitHub
parent f57d5d5a22
commit 0b82ff4ebb
10 changed files with 149 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/assets/tokens/tokens.json
+56 -11
View File
@@ -123,16 +123,16 @@
"deep-blue-200": "#9da6ca",
"deep-blue-100": "#c3c9df",
"deep-blue-50": "#e7eaf2",
"luminance-blue-900": "#1e3a8a",
"luminance-blue-800": "#0d3cc5",
"luminance-blue-700": "#1847d2",
"luminance-blue-600": "#2652df",
"luminance-blue-500": "#2c5beb",
"luminance-blue-400": "#5074f6",
"luminance-blue-300": "#758ff8",
"luminance-blue-200": "#a0affa",
"luminance-blue-100": "#c7cefc",
"luminance-blue-50": "#e9ecfe",
"blue-900": "#1e3a8a",
"blue-800": "#183faf",
"blue-700": "#1847d2",
"blue-600": "#2652df",
"blue-500": "#2c5beb",
"blue-400": "#5074f6",
"blue-300": "#758ff8",
"blue-200": "#a0affa",
"blue-100": "#c7cefc",
"blue-50": "#e9ecfe",
"nord-0": "#2e3440",
"nord-1": "#3b4252",
"nord-2": "#434c5e",
@@ -148,7 +148,52 @@
"nord-12": "#d08770",
"nord-13": "#ebcb8b",
"nord-14": "#a3be8c",
"nord-15": "#b48ead"
"nord-15": "#b48ead",
"red-800": "#693237",
"red-600": "#aa3e47",
"red-500": "#e63b49",
"red-400": "#f87171",
"red-200": "#fecaca",
"red-950": "#392b31",
"red-100": "#fee2e2",
"red-900": "#4c2d32",
"red-700": "#81383f",
"red-300": "#fca5a5",
"red-50": "#fef2f2",
"green-50": "#f0fdf4",
"green-100": "#dcfce7",
"green-200": "#bbf7d0",
"green-300": "#96f2b7",
"green-400": "#62e993",
"green-500": "#32c76d",
"green-600": "#319e69",
"green-700": "#3b7a5b",
"green-800": "#3b6054",
"green-900": "#284945",
"green-950": "#263b3d",
"orange-50": "#fff7ed",
"orange-100": "#ffedd5",
"orange-200": "#fed7aa",
"orange-300": "#fdba74",
"orange-400": "#fb923c",
"orange-500": "#f0721b",
"orange-600": "#cd6230",
"orange-700": "#905035",
"orange-800": "#654338",
"orange-900": "#4b3531",
"orange-950": "#3c2c2ddb",
"purple-50": "#faf5ff",
"purple-100": "#f3e8ff",
"purple-200": "#e5cdff",
"purple-300": "#cfa5fc",
"purple-400": "#b267fd",
"purple-500": "#9939f5",
"purple-600": "#8143ba",
"purple-700": "#5f407d",
"purple-800": "#483c60",
"purple-900": "#3a3549",
"purple-950": "#31313f",
"blue-950": "#213263"
}
},
"guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } },
frontend/src/lib/components/Toggle.svelte
+1 -1
View File
@@ -112,7 +112,7 @@
color == 'red'
? 'peer-checked:bg-red-600'
: color == 'blue'
? 'peer-checked:bg-luminance-blue-400 '
? 'peer-checked:bg-blue-400 '
: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
size === 'md'
? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+1 -1
View File
@@ -1296,7 +1296,7 @@
>
<div class="flex flex-row gap-1 items-center">
<div>Debug runs</div>
<div class="text-2xs text-primary"
<div class="text-2xs {hasErrors ? '' : 'text-primary'}"
>({$jobs?.length > 99 ? '99+' : ($jobs?.length ?? 0)})</div
>
{#if hasErrors}
frontend/src/lib/components/common/alert/model.ts
+4 -5
View File
@@ -2,11 +2,10 @@ export type AlertType = 'success' | 'error' | 'warning' | 'info'
export const classes: Record<AlertType, Record<string, string>> = {
info: {
bgClass:
'bg-luminance-blue-50 border-luminance-blue-100 border dark:bg-luminance-blue-900/60 dark:border-luminance-blue-700/40',
iconClass: 'text-luminance-blue-600 dark:text-luminance-blue-50',
titleClass: 'text-luminance-blue-700 dark:text-luminance-blue-50',
descriptionClass: 'text-luminance-blue-600 dark:text-luminance-blue-50/80'
bgClass: 'bg-blue-50 border-blue-100 border dark:bg-blue-900/60 dark:border-blue-700/40',
iconClass: 'text-blue-600 dark:text-blue-50',
titleClass: 'text-blue-700 dark:text-blue-50',
descriptionClass: 'text-blue-600 dark:text-blue-50/80'
},
warning: {
bgClass:
frontend/src/lib/components/common/badge/Badge.svelte
+5 -6
View File
@@ -48,7 +48,7 @@
let hidden = $state(false)
const colors: Record<BadgeColor, string> = {
gray: 'bg-surface-sunken text-primary',
blue: 'bg-luminance-blue-50 text-luminance-blue-800 dark:text-luminance-blue-100 dark:bg-luminance-blue-700/40',
blue: 'bg-blue-50 text-blue-800 dark:text-blue-100 dark:bg-blue-700/40',
red: 'bg-red-100 text-red-800 dark:bg-red-700/40 dark:text-red-100',
green: 'bg-green-100 text-green-700 dark:bg-green-700/40 dark:text-green-100',
yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-700/40 dark:text-yellow-100',
@@ -68,7 +68,7 @@
const selectedColors: Record<BadgeColor, string> = {
gray: 'bg-surface-input text-primary',
blue: 'bg-luminance-blue-500 text-white dark:bg-luminance-blue-600',
blue: 'bg-blue-500 text-white dark:bg-blue-600',
red: 'bg-red-500 text-white dark:bg-red-600',
green: 'bg-green-500 text-white dark:bg-green-600',
yellow: 'bg-yellow-500 text-white dark:bg-yellow-600',
@@ -76,8 +76,7 @@
indigo: 'bg-indigo-500 text-white dark:bg-indigo-600',
violet: 'bg-violet-500 text-white dark:bg-violet-600',
['dark-gray']: 'bg-gray-700 text-gray-100 dark:bg-gray-800 dark:text-gray-200',
['dark-blue']:
'bg-luminance-blue-700 text-luminance-blue-100 dark:bg-luminance-blue-800 dark:text-luminance-blue-200',
['dark-blue']: 'bg-blue-700 text-blue-100 dark:bg-blue-800 dark:text-blue-200',
['dark-red']: 'bg-red-700 text-white dark:bg-red-800 dark:text-red-100',
['dark-green']: 'bg-green-700 text-green-100 dark:bg-green-800 dark:text-green-200',
['dark-yellow']: 'bg-yellow-600 text-white dark:bg-yellow-700 dark:text-yellow-100',
@@ -89,7 +88,7 @@
const hovers: Partial<Record<BadgeColor, string>> = {
gray: 'hover:bg-surface-hover',
blue: 'hover:bg-luminance-blue-200 dark:hover:bg-luminance-blue-700/40',
blue: 'hover:bg-blue-200 dark:hover:bg-blue-700/40',
red: 'hover:bg-red-200 dark:hover:bg-red-500/25',
green: 'hover:bg-green-200 dark:hover:bg-green-500/25',
yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-500/25',
@@ -97,7 +96,7 @@
orange: 'hover:bg-orange-200 dark:hover:bg-orange-500/25',
violet: 'hover:bg-violet-200 dark:hover:bg-violet-500/25',
['dark-gray']: 'hover:bg-gray-600 dark:hover:bg-gray-700',
['dark-blue']: 'hover:bg-luminance-blue-600 dark:hover:bg-luminance-blue-700',
['dark-blue']: 'hover:bg-blue-600 dark:hover:bg-blue-700',
['dark-red']: 'hover:bg-red-600 dark:hover:bg-red-700',
['dark-green']: 'hover:bg-green-600 dark:hover:bg-green-700',
['dark-yellow']: 'hover:bg-yellow-600 dark:hover:bg-yellow-700',
frontend/src/lib/components/common/button/Button.svelte
+1 -1
View File
@@ -215,7 +215,7 @@
if (variant === 'default') {
return 'border border-border-light divide-x divide-border-light'
} else if (variant === 'accent') {
return 'divide-x divide-luminance-blue-100 dark:divide-luminance-blue-200'
return 'divide-x divide-blue-100 dark:divide-blue-200'
} else if (variant === 'accent-secondary') {
return 'divide-x divide-deep-blue-400 dark:divide-deep-blue-100'
} else if (variant === 'subtle') {
frontend/src/lib/components/common/button/model.ts
+7 -7
View File
@@ -114,10 +114,10 @@ export namespace ButtonType {
blue: {
border:
'border-luminance-blue-500 dark:border-luminance-blue-300 hover:border-luminance-blue-700 focus-visible:border-luminance-blue-700 bg-surface hover:bg-luminance-blue-100 dark:hover:bg-luminance-blue-900/40 focus-visible:bg-luminance-blue-100 focus-visible:dark:text-luminance-blue-100 dark:focus-visible:bg-luminance-blue-900 text-luminance-blue-500 dark:text-luminance-blue-300 dark:hover:text-luminance-blue-200 hover:text-luminance-blue-700 focus-visible:text-luminance-blue-700 focus-visible:ring-luminance-blue-300',
'border-blue-500 dark:border-blue-300 hover:border-blue-700 focus-visible:border-blue-700 bg-surface hover:bg-blue-100 dark:hover:bg-blue-900/40 focus-visible:bg-blue-100 focus-visible:dark:text-blue-100 dark:focus-visible:bg-blue-900 text-blue-500 dark:text-blue-300 dark:hover:text-blue-200 hover:text-blue-700 focus-visible:text-blue-700 focus-visible:ring-blue-300',
contained:
'bg-luminance-blue-300 hover:bg-luminance-blue-400 focus-visible:bg-luminance-blue-500 text-white focus-visible:ring-luminance-blue-300',
divider: 'divide-x divide-luminance-blue-600'
'bg-blue-300 hover:bg-blue-400 focus-visible:bg-blue-500 text-white focus-visible:ring-blue-300',
divider: 'divide-x divide-blue-600'
},
marine: {
border:
@@ -173,13 +173,13 @@ export namespace ButtonType {
export const VariantStyles: Record<'accent-secondary' | 'accent' | 'default' | 'subtle', string> =
{
'accent-secondary':
'bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 focus-visible:ring-luminance-blue-300',
'bg-surface-accent-secondary hover:bg-surface-accent-secondary-hover focus-visible:bg-surface-accent-secondary-clicked text-white dark:text-deep-blue-900 focus-visible:ring-blue-300',
accent:
'bg-surface-accent-primary hover:bg-surface-accent-hover focus-visible:bg-surface-accent-clicked text-white focus-visible:ring-luminance-blue-300',
'bg-surface-accent-primary hover:bg-surface-accent-hover focus-visible:bg-surface-accent-clicked text-white focus-visible:ring-blue-300',
default:
'border border-border-light bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-luminance-blue-300',
'border border-border-light bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-blue-300',
subtle:
'bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-luminance-blue-300'
'bg-transparent hover:bg-surface-hover text-primary focus-visible:bg-surface-hover focus-visible:ring-blue-300'
}
export const DestructiveVariantStyles: Record<
frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+1 -1
View File
@@ -69,7 +69,7 @@
Icon: RefreshCcw,
color: 'dark',
classes: {
icon: 'text-blue-500 dark:text-blue-400',
icon: 'text-blue-700 dark:text-blue-300',
iconWrapper: 'bg-blue-100 dark:bg-blue-800/50'
}
}
frontend/src/lib/components/graph/util.ts
+9 -9
View File
@@ -36,13 +36,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
} satisfies Record<any, FlowNodeColorClasses>
let orangeStyle = {
selected: {
bg: 'bg-orange-200 dark:bg-[#905036]',
bg: 'bg-orange-200 dark:bg-orange-700',
outline: 'outline-orange-500' + outlined,
text: 'text-orange-800 dark:text-orange-200',
badge: 'bg-orange-100 text-orange-700'
},
notSelected: {
bg: 'bg-orange-100 dark:bg-[#654338]',
bg: 'bg-orange-100 dark:bg-orange-800',
outline: '',
text: 'text-orange-700 dark:text-orange-300',
badge: 'bg-orange-200 text-orange-700'
@@ -60,7 +60,7 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
_Skipped: {
selected: defaultStyle.selected,
notSelected: {
bg: 'bg-blue-100 dark:bg-[#2D3B63]',
bg: 'bg-blue-100 dark:bg-blue-950',
outline: '',
text: 'text-blue-600 dark:text-blue-200',
badge: 'bg-blue-200 outline-border-selected text-blue-800'
@@ -68,13 +68,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
},
Success: {
selected: {
bg: 'bg-green-200 dark:bg-[#329E6A]',
bg: 'bg-green-200 dark:bg-green-600',
outline: 'outline-green-500 dark:outline-green-400' + outlined,
text: 'text-green-800 dark:text-green-100',
badge: 'bg-green-100 text-green-700'
},
notSelected: {
bg: 'bg-green-100 dark:bg-[#3B7B5B]',
bg: 'bg-green-100 dark:bg-green-700',
outline: '',
text: 'text-green-700 dark:text-green-100',
badge: 'bg-green-200 text-green-700'
@@ -82,13 +82,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
},
Failure: {
selected: {
bg: 'bg-red-200 dark:bg-[#AA3E47]',
bg: 'bg-red-200 dark:bg-red-600',
outline: 'outline-red-500' + outlined,
text: 'text-red-800 dark:text-red-100',
badge: 'bg-red-100 text-red-700'
},
notSelected: {
bg: 'bg-red-100 dark:bg-[#81383F]',
bg: 'bg-red-100 dark:bg-red-700',
outline: '',
text: 'text-red-700 dark:text-red-200',
badge: 'bg-red-200 text-red-700'
@@ -98,13 +98,13 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
WaitingForExecutor: orangeStyle,
WaitingForEvents: {
selected: {
bg: 'bg-purple-200 dark:bg-[#8243BB]',
bg: 'bg-purple-200 dark:bg-purple-600',
outline: 'outline-purple-500' + outlined,
text: 'text-purple-800 dark:text-purple-100',
badge: 'bg-purple-100 text-purple-700'
},
notSelected: {
bg: 'bg-purple-100 dark:bg-[#5F417E]',
bg: 'bg-purple-100 dark:bg-purple-700',
outline: '',
text: 'text-purple-700 dark:text-purple-200',
badge: 'bg-purple-200 text-purple-700'
frontend/tailwind.config.cjs
+64 -82
View File
@@ -110,17 +110,70 @@ const config = {
800: `rgb(${primitives['deep-blue-800']})`,
900: `rgb(${primitives['deep-blue-900']})`
},
'luminance-blue': {
50: `rgb(${primitives['luminance-blue-50']})`,
100: `rgb(${primitives['luminance-blue-100']})`,
200: `rgb(${primitives['luminance-blue-200']})`,
300: `rgb(${primitives['luminance-blue-300']})`,
400: `rgb(${primitives['luminance-blue-400']})`,
500: `rgb(${primitives['luminance-blue-500']})`,
600: `rgb(${primitives['luminance-blue-600']})`,
700: `rgb(${primitives['luminance-blue-700']})`,
800: `rgb(${primitives['luminance-blue-800']})`,
900: `rgb(${primitives['luminance-blue-900']})`
red: {
50: `rgb(${primitives['red-50']})`,
100: `rgb(${primitives['red-100']})`,
200: `rgb(${primitives['red-200']})`,
300: `rgb(${primitives['red-300']})`,
400: `rgb(${primitives['red-400']})`,
500: `rgb(${primitives['red-500']})`,
600: `rgb(${primitives['red-600']})`,
700: `rgb(${primitives['red-700']})`,
800: `rgb(${primitives['red-800']})`,
900: `rgb(${primitives['red-900']})`,
950: `rgb(${primitives['red-950']})`
},
blue: {
50: `rgb(${primitives['blue-50']})`,
100: `rgb(${primitives['blue-100']})`,
200: `rgb(${primitives['blue-200']})`,
300: `rgb(${primitives['blue-300']})`,
400: `rgb(${primitives['blue-400']})`,
500: `rgb(${primitives['blue-500']})`,
600: `rgb(${primitives['blue-600']})`,
700: `rgb(${primitives['blue-700']})`,
800: `rgb(${primitives['blue-800']})`,
900: `rgb(${primitives['blue-900']})`,
950: `rgb(${primitives['blue-950']})`
},
green: {
50: `rgb(${primitives['green-50']})`,
100: `rgb(${primitives['green-100']})`,
200: `rgb(${primitives['green-200']})`,
300: `rgb(${primitives['green-300']})`,
400: `rgb(${primitives['green-400']})`,
500: `rgb(${primitives['green-500']})`,
600: `rgb(${primitives['green-600']})`,
700: `rgb(${primitives['green-700']})`,
800: `rgb(${primitives['green-800']})`,
900: `rgb(${primitives['green-900']})`,
950: `rgb(${primitives['green-950']})`
},
orange: {
50: `rgb(${primitives['orange-50']})`,
100: `rgb(${primitives['orange-100']})`,
200: `rgb(${primitives['orange-200']})`,
300: `rgb(${primitives['orange-300']})`,
400: `rgb(${primitives['orange-400']})`,
500: `rgb(${primitives['orange-500']})`,
600: `rgb(${primitives['orange-600']})`,
700: `rgb(${primitives['orange-700']})`,
800: `rgb(${primitives['orange-800']})`,
900: `rgb(${primitives['orange-900']})`,
950: `rgb(${primitives['orange-950']})`
},
purple: {
50: `rgb(${primitives['purple-50']})`,
100: `rgb(${primitives['purple-100']})`,
200: `rgb(${primitives['purple-200']})`,
300: `rgb(${primitives['purple-300']})`,
400: `rgb(${primitives['purple-400']})`,
500: `rgb(${primitives['purple-500']})`,
600: `rgb(${primitives['purple-600']})`,
700: `rgb(${primitives['purple-700']})`,
800: `rgb(${primitives['purple-800']})`,
900: `rgb(${primitives['purple-900']})`,
950: `rgb(${primitives['purple-950']})`
},
slate: {
50: '#f8fafc',
@@ -170,18 +223,6 @@ const config = {
800: '#292524',
900: '#1c1917'
},
orange: {
50: '#fff7ed',
100: '#ffedd5',
200: '#fed7aa',
300: '#fdba74',
400: '#fb923c',
500: '#f97316',
600: '#ea580c',
700: '#c2410c',
800: '#9a3412',
900: '#7c2d12'
},
amber: {
50: '#fffbeb',
100: '#fef3c7',
@@ -266,18 +307,6 @@ const config = {
800: '#5b21b6',
900: '#4c1d95'
},
purple: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87'
},
fuchsia: {
50: '#fdf4ff',
100: '#fae8ff',
@@ -326,28 +355,6 @@ const config = {
800: '#1f2937',
900: '#111827'
},
red: {
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d'
},
orange: {
100: '#ffedd5',
200: '#ffedd5',
300: '#FDC089',
400: '#fb923c',
500: '#f97316',
600: '#ea580c',
700: '#c2410c',
800: '#c2410c'
},
yellow: {
50: '#fefce8',
100: '#fef9c3',
@@ -360,31 +367,6 @@ const config = {
800: '#854d0e',
900: '#713f12'
},
green: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d'
},
blue: {
50: '#eff6ff',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
500: '#3b82f6',
600: '#2563eb',
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a'
},
indigo: {
50: '#eef2ff',
100: '#e0e7ff',