kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): add transparency to color palette (#6947)

Browse Source 
* fix input padding

* fix surface hover on surface hover

* fix metadata gen

* fix border selected darkmode
This commit is contained in:
Guilhem
2025-10-27 21:21:21 +00:00
committed by GitHub
parent b0522ec17d
commit 38bbbb7d6f
11 changed files with 89 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/assets/tokens/tokens.json
View File

@@ -12,7 +12,7 @@
"surface-selected": "#ffffff",
"surface-disabled": "#d8d8e433",
"surface-secondary": "#efeff4",
"surface-hover": "#eeeef4",
"surface-hover": "#cfcfe233",
"surface-primary": "#fbfbfd",
"border-light": "#e5e7eb",
"border-normal": "#9ca3af",
@@ -82,7 +82,7 @@
"surface-selected": "#434c5e",
"surface-disabled": "#212732",
"surface-secondary": "#272c35",
"surface-hover": "#454f64",
"surface-hover": "#7784a119",
"surface-primary": "#2e3441",
"border-light": "#374457",
"border-normal": "#a9b0ba",
@@ -100,7 +100,7 @@
"reserved-ai": "#f0c6fb",
"component-virtual-node": "#4c566a",
"text-accent": "#c7cefc",
"border-selected": "#758ff8",
"border-selected": "#6475b7",
"surface-sunken": "#242832",
"text-tertiary": "#a8aeb7",
"surface-input": "#292e38"

2
frontend/src/lib/components/ConnectionSection.svelte
View File

@@ -134,7 +134,7 @@
<div class="text-primary font-md font-semibold"> Script or flow to run on /windmill command </div>
<div class="relative">
{#if !teamName || (!$enterpriseLicense && platform === 'teams')}
<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled/20 z-40"></div>
<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled z-40"></div>
{/if}
<ScriptPicker
kinds={['script']}

2
frontend/src/lib/components/common/badge/Badge.svelte
View File

@@ -83,7 +83,7 @@
['dark-indigo']: 'bg-indigo-700 text-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
['dark-orange']: 'bg-orange-700 text-orange-100 dark:bg-orange-800 dark:text-orange-200',
['dark-violet']: 'bg-violet-700 text-violet-100 dark:bg-violet-800 dark:text-violet-200',
transparent: 'bg-surface-accent-selected/30 text-accent border-gray-400 dark:border-gray-500'
transparent: 'bg-surface-accent-selected text-accent border-gray-400 dark:border-gray-500'
}
const hovers: Partial<Record<BadgeColor, string>> = {

4
frontend/src/lib/components/common/button/Button.svelte
View File

@@ -247,11 +247,11 @@
disabled
? ['default', 'subtle'].includes(variant)
? '!text-disabled'
: '!bg-surface-disabled/20 !text-disabled'
: '!bg-surface-disabled !text-disabled'
: '',
loading ? 'cursor-wait' : '',
selected && ['default', 'subtle'].includes(variant)
? '!bg-surface-accent-selected/30 !text-accent !border-border-selected'
? '!bg-surface-accent-selected !text-accent !border-border-selected'
: '',
btnClasses
)

8
frontend/src/lib/components/copilot/MetadataGen.svelte
View File

@@ -262,15 +262,15 @@ Generate a tool name for the script below:
}}
>
<div
class="absolute left-[0.5rem] {elementType === 'textarea'
class="absolute left-3 {elementType === 'textarea'
? 'top-[1.3rem]'
: 'top-[0.3rem]'} flex flex-row gap-2 items-start pointer-events-none"
>
{#if active}
<span
class={twMerge(
'rounded-md px-1 border',
flowAIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'default')
'rounded-md px-1',
flowAIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'selected')
)}
>
<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
@@ -291,7 +291,7 @@ Generate a tool name for the script below:
<div
bind:clientHeight={genHeight}
class={twMerge(
'text-sm leading-6 indent-[3.5rem] text-gray-500 dark:text-gray-400 pr-1',
'text-sm leading-6 indent-0 text-gray-500 dark:text-gray-400 pr-1',
elementType === 'input' ? 'text-ellipsis overflow-hidden whitespace-nowrap' : ''
)}
style={elementType === 'input' ? `max-width: calc(${width}px - 0.5rem)` : ''}

2
frontend/src/lib/components/flows/content/FlowModuleMock.svelte
View File

@@ -92,7 +92,7 @@
<JsonEditor {code} on:changeValue={updateMockValue} />
{/key}
{:else}
<pre class="text-xs border rounded p-2 bg-surface-disabled/20"
<pre class="text-xs border rounded p-2 bg-surface-disabled"
>{flowModule.mock?.return_value
? JSON.stringify(flowModule.mock?.return_value, null, 2)
: ''}</pre

2
frontend/src/lib/components/graph/util.ts
View File

@@ -22,7 +22,7 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
let defaultStyle = {
selected: {
bg: 'bg-surface-accent-selected/30',
bg: 'bg-surface-accent-selected',
outline: 'outline-border-selected' + outlined,
text: 'text-accent',
badge: 'bg-blue-100 outline-border-selected text-blue-800'

2
frontend/src/lib/components/runs/RunRow.svelte
View File

@@ -107,7 +107,7 @@
<div
class={twMerge(
'hover:bg-surface-hover cursor-pointer',
selected ? 'bg-surface-accent-selected/30' : '',
selected ? 'bg-surface-accent-selected' : '',
'grid items-center h-full'
)}
class:grid-runs-table={!containsLabel && !selectionMode && showTag}

2
frontend/src/lib/components/settings/ScopeSelector.svelte
View File

@@ -621,7 +621,7 @@
<div
class="p-2 border rounded-lg w-full {isDisabled
? 'bg-surface-disabled/20 opacity-60'
? 'bg-surface-disabled opacity-60'
: 'bg-surface-tertiary'}"
>
<div class="flex justify-between items-center">

17
frontend/src/lib/components/text_input/TextInput.svelte
View File

@@ -18,14 +18,23 @@
}
export const inputBaseClass =
'rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled/20 disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint'
'rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint'
import { ButtonType } from '$lib/components/common/button/model'
export const inputSizeClasses = {
sm: `${ButtonType.UnifiedSizingClasses.sm} ${ButtonType.UnifiedMinHeightClasses.sm} !py-0.5`,
md: `${ButtonType.UnifiedSizingClasses.md} ${ButtonType.UnifiedMinHeightClasses.md}`,
lg: `${ButtonType.UnifiedSizingClasses.lg} ${ButtonType.UnifiedMinHeightClasses.lg}`
sm: twMerge(
`${ButtonType.UnifiedSizingClasses.sm} ${ButtonType.UnifiedMinHeightClasses.sm} !py-0.5`,
'px-2'
),
md: twMerge(
`${ButtonType.UnifiedSizingClasses.md} ${ButtonType.UnifiedMinHeightClasses.md}`,
'px-2'
),
lg: twMerge(
`${ButtonType.UnifiedSizingClasses.lg} ${ButtonType.UnifiedMinHeightClasses.lg}`,
'px-2'
)
}
</script>

104
frontend/tailwind.config.cjs
View File

@@ -10,6 +10,19 @@ const { darkModeName, lightModeName } = require('./src/lib/assets/tokens/colorTo
const tokens = { dark: figmaTokens.tokens[darkModeName], light: figmaTokens.tokens[lightModeName] }
const primitives = figmaTokens.primitives.light
// Helper function to create color definition based on whether the value contains alpha
function createColorDefinition(colorName) {
// Check a sample value to see if it contains alpha (using light theme as reference)
const sampleValue = tokens.light[colorName]
if (sampleValue && sampleValue.includes('/')) {
// Alpha is already included, use as-is without allowing override
return `rgb(var(--color-${colorName}))`
} else {
// No alpha, allow Tailwind's alpha-value placeholder
return `rgb(var(--color-${colorName}) / <alpha-value>)`
}
}
/** @type {import('tailwindcss').Config} */
const config = {
//to generatd tailwind full, only include ./src/lib/components/apps/editor/componentsPanel/tailwindUtils.ts and run:
@@ -41,60 +54,58 @@ const config = {
black: '#000000',
// Surface colors (semantic)
surface: 'rgb(var(--color-surface-primary) / <alpha-value>)',
'surface-secondary': 'rgb(var(--color-surface-secondary) / <alpha-value>)',
'surface-sunken': 'rgb(var(--color-surface-sunken) / <alpha-value>)',
'surface-tertiary': 'rgb(var(--color-surface-tertiary) / <alpha-value>)',
'surface-hover': 'rgb(var(--color-surface-hover) / <alpha-value>)',
'surface-disabled': 'rgb(var(--color-surface-disabled) / <alpha-value>)',
'surface-selected': 'rgb(var(--color-surface-selected) / <alpha-value>)',
'surface-accent-primary': 'rgb(var(--color-surface-accent-primary) / <alpha-value>)',
'surface-accent-hover': 'rgb(var(--color-surface-accent-hover) / <alpha-value>)',
'surface-accent-clicked': 'rgb(var(--color-surface-accent-clicked) / <alpha-value>)',
'surface-accent-secondary': 'rgb(var(--color-surface-accent-secondary) / <alpha-value>)',
'surface-accent-secondary-hover':
'rgb(var(--color-surface-accent-secondary-hover) / <alpha-value>)',
'surface-accent-secondary-clicked':
'rgb(var(--color-surface-accent-secondary-clicked) / <alpha-value>)',
'surface-accent-selected': 'rgb(var(--color-surface-accent-selected))',
'surface-input': 'rgb(var(--color-surface-input))',
surface: createColorDefinition('surface-primary'),
'surface-secondary': createColorDefinition('surface-secondary'),
'surface-sunken': createColorDefinition('surface-sunken'),
'surface-tertiary': createColorDefinition('surface-tertiary'),
'surface-hover': createColorDefinition('surface-hover'),
'surface-disabled': createColorDefinition('surface-disabled'),
'surface-selected': createColorDefinition('surface-selected'),
'surface-accent-primary': createColorDefinition('surface-accent-primary'),
'surface-accent-hover': createColorDefinition('surface-accent-hover'),
'surface-accent-clicked': createColorDefinition('surface-accent-clicked'),
'surface-accent-secondary': createColorDefinition('surface-accent-secondary'),
'surface-accent-secondary-hover': createColorDefinition('surface-accent-secondary-hover'),
'surface-accent-secondary-clicked': createColorDefinition('surface-accent-secondary-clicked'),
'surface-accent-selected': createColorDefinition('surface-accent-selected'),
'surface-input': createColorDefinition('surface-input'),
// Text colors (semantic)
primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
hint: 'rgb(var(--color-text-hint) / <alpha-value>)',
disabled: 'rgb(var(--color-text-disabled) / <alpha-value>)',
emphasis: 'rgb(var(--color-text-emphasis) / <alpha-value>)',
accent: 'rgb(var(--color-text-accent) / <alpha-value>)',
primary: createColorDefinition('text-primary'),
secondary: createColorDefinition('text-secondary'),
tertiary: createColorDefinition('text-tertiary'),
hint: createColorDefinition('text-hint'),
disabled: createColorDefinition('text-disabled'),
emphasis: createColorDefinition('text-emphasis'),
accent: createColorDefinition('text-accent'),
// Inverse colors (computed from opposite theme)
'primary-inverse': 'rgb(var(--color-text-primary-inverse) / <alpha-value>)',
'secondary-inverse': 'rgb(var(--color-text-secondary-inverse) / <alpha-value>)',
'tertiary-inverse': 'rgb(var(--color-text-tertiary-inverse) / <alpha-value>)',
'emphasis-inverse': 'rgb(var(--color-text-emphasis-inverse) / <alpha-value>)',
'hint-inverse': 'rgb(var(--color-text-hint-inverse) / <alpha-value>)',
'disabled-inverse': 'rgb(var(--color-text-disabled-inverse) / <alpha-value>)',
'primary-inverse': createColorDefinition('text-primary-inverse'),
'secondary-inverse': createColorDefinition('text-secondary-inverse'),
'tertiary-inverse': createColorDefinition('text-tertiary-inverse'),
'emphasis-inverse': createColorDefinition('text-emphasis-inverse'),
'hint-inverse': createColorDefinition('text-hint-inverse'),
'disabled-inverse': createColorDefinition('text-disabled-inverse'),
// Border colors (semantic)
'border-light': 'rgb(var(--color-border-light) / <alpha-value>)',
'border-normal': 'rgb(var(--color-border-normal) / <alpha-value>)',
'border-accent': 'rgb(var(--color-border-accent) / <alpha-value>)',
'border-selected': 'rgb(var(--color-border-selected) / <alpha-value>)',
'border-light': createColorDefinition('border-light'),
'border-normal': createColorDefinition('border-normal'),
'border-accent': createColorDefinition('border-accent'),
'border-selected': createColorDefinition('border-selected'),
// Reserved colors (semantic)
ai: 'rgb(var(--color-reserved-ai) / <alpha-value>)',
'ai-inverse': 'rgb(var(--color-reserved-ai-inverse) / <alpha-value>)',
ai: createColorDefinition('reserved-ai'),
'ai-inverse': createColorDefinition('reserved-ai-inverse'),
// Surface inverse colors (computed from opposite theme)
'surface-inverse': 'rgb(var(--color-surface-primary-inverse) / <alpha-value>)',
'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
'surface-hover-inverse': 'rgb(var(--color-surface-hover-inverse) / <alpha-value>)',
'surface-disabled-inverse': 'rgb(var(--color-surface-disabled-inverse) / <alpha-value>)',
'surface-selected-inverse': 'rgb(var(--color-surface-selected-inverse) / <alpha-value>)',
'surface-inverse': createColorDefinition('surface-primary-inverse'),
'surface-secondary-inverse': createColorDefinition('surface-secondary-inverse'),
'surface-hover-inverse': createColorDefinition('surface-hover-inverse'),
'surface-disabled-inverse': createColorDefinition('surface-disabled-inverse'),
'surface-selected-inverse': createColorDefinition('surface-selected-inverse'),
// Component colors
'component-virtual-node': 'rgb(var(--color-component-virtual-node) / <alpha-value>)',
'component-virtual-node': createColorDefinition('component-virtual-node'),
// Design token colors
'light-blue': `rgb(${primitives['light-blue']})`,
@@ -919,6 +930,13 @@ function hexToRgb(hex) {
const g = parseInt(hex.substring(2, 4), 16)
const b = parseInt(hex.substring(4, 6), 16)
// Return the RGB string format
// Check if hex has alpha channel (8 characters)
if (hex.length === 8) {
const a = parseInt(hex.substring(6, 8), 16) / 255
// Return RGB with alpha as decimal value for CSS
return `${r} ${g} ${b} / ${a.toFixed(3)}`
}
// Return the RGB string format without alpha
return `${r} ${g} ${b}`
}