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

change color palette v0

Browse Source
This commit is contained in:
Guilhem
2025-09-30 16:33:48 +01:00
parent 5aeb3fa0b7
commit 6f57ec2cfb
16 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/LogViewer.svelte
+1 -1
View File
@@ -224,7 +224,7 @@
<div class="w-full h-full relative">
<div
bind:this={div}
class="w-full h-full overflow-auto bg-surface-secondary pt-4 {noMaxH ? '' : 'max-h-screen'}"
class="w-full h-full overflow-auto bg-surface-tertiary pt-4 {noMaxH ? '' : 'max-h-screen'}"
data-nav-id={navigationId}
>
<div class="absolute z-10 top-0 right-0 flex flex-row-reverse justify-between text-sm">
frontend/src/lib/components/ScriptEditor.svelte
+1 -1
View File
@@ -537,7 +537,7 @@
<SplitPanesWrapper>
<Splitpanes class="!overflow-visible">
<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative">
<div class="h-full !overflow-visible bg-surface-secondary dark:bg-[#272D38] relative">
<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
{#if assets?.length}
<AssetsDropdownButton {assets} />
frontend/src/lib/components/Toggle.svelte
+1 -3
View File
@@ -92,9 +92,7 @@
"transition-all bg-surface-selected rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-surface after:border-white after:border after:rounded-full after:transition-all items-center",
color == 'red'
? 'peer-checked:bg-red-600'
: color == 'blue'
? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
: 'peer-checked:bg-[#6E86FF] dark:peer-checked:bg-[#5469E3]',
size === 'sm'
? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
: size === '2sm'
frontend/src/lib/components/common/button/model.ts
+2 -2
View File
@@ -86,7 +86,7 @@ export namespace ButtonType {
border:
'border-frost-500 dark:border-frost-300 hover:border-frost-700 dark:hover:border-frost-400 focus-visible:border-frost-700 bg-surface hover:bg-frost-100 dark:hover:bg-frost-900 focus-visible:bg-frost-100 focus-visible:dark:text-frost-100 dark:focus-visible:bg-frost-900 text-frost-500 dark:text-frost-300 dark:hover:text-frost-400 hover:text-frost-700 focus-visible:text-frost-700 focus-visible:ring-frost-300',
contained:
'bg-frost-500 hover:bg-frost-700 focus-visible:bg-frost-700 text-white focus-visible:ring-frost-300 dark:bg-frost-500/90 dark:hover:bg-frost-600/90',
'bg-[#6E86FF] hover:bg-[#5469E3] focus-visible:bg-[#5469E3] text-white focus-visible:ring-frost-300',
divider: 'divide-x divide-frost-600'
},
marine: {
@@ -114,7 +114,7 @@ export namespace ButtonType {
border:
'border-marine-300 bg-surface hover:bg-surface-hover focus-visible:bg-surface-hover text-primary hover:text-secondary focus-visible:text-secondary focus-visible:ring-surface-selected-inverse dark:border-marine-200',
contained:
'bg-marine-400 hover:bg-marine-200 focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
'bg-[#2A356E] hover:bg-[#1F2953] focus-visible:bg-surface-hover-inverse text-primary-inverse focus-visible:ring-surface-selected-inverse dark:bg-marine-50 dark:hover:bg-marine-50/70 dark:text-primary-inverse',
divider: 'divide-x divide-gray-800 dark:divide-gray-200'
},
gray: {
frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
+1 -1
View File
@@ -57,7 +57,7 @@
? 'hover:text-secondary data-[state=on]:text-secondary text-tertiary'
: 'hover:text-primary data-[state=on]:text-primary text-secondary',
'data-[state=on]:bg-surface data-[state=off]:border-transparent data-[state=on]:border-gray-300 dark:data-[state=on]:border-gray-500',
'bg-surface-secondary hover:bg-surface-hover',
'hover:bg-surface-hover',
disabled ? '!shadow-none' : '',
className
)}
frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+1 -1
View File
@@ -72,7 +72,7 @@
>
<div
class={twMerge(
'flex bg-surface-secondary rounded-md h-full',
'flex bg-surface-tertiary rounded-md h-full',
wrap ? 'flex-wrap' : '',
tabListClass
)}
frontend/src/lib/components/flows/CreateActionsApp.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
spacingSize="xl"
startIcon={{ icon: Plus }}
href="{base}/apps/add?nodraft=true"
color="marine"
color="blue"
dropdownItems={[
{
label: 'Import low-code app from YAML',
frontend/src/lib/components/flows/CreateActionsFlow.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
startIcon={{ icon: Plus }}
endIcon={{ icon: BarsStaggered }}
href="{base}/flows/add?nodraft=true"
color="marine"
color="blue"
dropdownItems={[
{
label: 'Import from YAML',
frontend/src/lib/components/flows/FlowEditor.svelte
+1 -1
View File
@@ -139,7 +139,7 @@
>
<Splitpanes>
<Pane size={50} minSize={15} class="h-full relative z-0">
<div class="grow overflow-hidden bg-gray h-full bg-surface-secondary relative">
<div class="grow overflow-hidden h-full bg-surface-tertiary relative">
{#if loading}
<div class="p-2 pt-10">
{#each new Array(6) as _}
frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+1 -1
View File
@@ -373,7 +373,7 @@
/>
</div>
<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
<div class="z-10 flex-auto grow !bg-surface-tertiary" bind:clientHeight={minHeight}>
<FlowGraphV2
bind:this={graph}
earlyStop={flowStore.val.value?.skip_expr !== undefined}
frontend/src/lib/components/graph/FlowGraphV2.svelte
+1 -1
View File
@@ -585,7 +585,7 @@
nodesDraggable={false}
--background-color={false}
>
<div class="absolute inset-0 !bg-surface-secondary h-full"></div>
<div class="absolute inset-0 !bg-surface-tertiary h-full"></div>
<Controls position="top-right" orientation="horizontal" showLock={false}>
{#if download}
<ControlButton
frontend/src/lib/components/home/ItemsList.svelte
+1 -1
View File
@@ -553,7 +553,7 @@
{showCode}
/>
{:else}
<div class="border rounded-md">
<div class="border rounded-md bg-surface-secondary">
{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path + (item.hash ? '/' + item.hash : ''))}
<Item
{item}
frontend/src/lib/components/home/TreeViewRoot.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
<div class="text-gray-500 dark:text-gray-400">No items</div>
</div>
{:else}
<div class="border rounded-md">
<div class="border rounded-md bg-surface-secondary">
{#each groupedItems.slice(0, nbDisplayed) as item (item['folderName'] ?? 'user__' + item['username'])}
{#if item}
<TreeView
frontend/src/lib/components/scripts/CreateActionsScript.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
{aiDescription}
size="sm"
spacingSize="xl"
color="marine"
color="blue"
startIcon={{ icon: Plus }}
href="{base}/scripts/add"
>
frontend/src/lib/components/text_input/TextInput.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
}
export const inputBaseClass =
'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint'
'rounded-md focus:ring-0 no-default-style text-sm text-tertiary dark:text-secondary !bg-[#ffffff] dark:!bg-surface-secondary disabled:!bg-surface-disabled disabled:!border-none disabled:!text-hint disabled:cursor-not-allowed shadow-none py-2 px-3 placeholder-hint'
</script>
<script lang="ts">
frontend/tailwind.config.cjs
+13 -5
View File
@@ -5,8 +5,9 @@ const {
const { zIndexes } = require('./src/lib/zIndexes')
const lightTheme = {
surface: '#ffffff',
surfaceSecondary: '#f3f4f6',
surface: '#FBFBFD',
surfaceSecondary: '#ffffff',
surfaceTertiary: '#EFEFF4',
surfaceHover: '#e5e7eb',
surfaceDisabled: '#f9fafb',
surfaceSelected: '#d1d5db',
@@ -17,15 +18,16 @@ const lightTheme = {
textHint: '#757E8F',
textDisabled: '#a0aec0',
border: '#dddddd',
border: '#E5E7EB',
borderHover: '#cccccc'
}
const lightThemeRgb = makeRgb(lightTheme)
const darkTheme = {
surface: '#2e3440',
surfaceSecondary: '#3b4252',
surface: '#262B35',
surfaceSecondary: '#2e3440',
surfaceTertiary: '#434c5e',
surfaceHover: '#454F64',
surfaceDisabled: '#212732',
surfaceSelected: '#434c5e',
@@ -408,6 +410,7 @@ const config = {
surface: 'rgb(var(--color-surface) / <alpha-value>)',
'surface-secondary': 'rgb(var(--color-surface-secondary) / <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>)',
@@ -420,6 +423,7 @@ const config = {
'surface-inverse': 'rgb(var(--color-surface-inverse) / <alpha-value>)',
'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
'surface-tertiary-inverse': 'rgb(var(--color-surface-tertiary-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>)',
@@ -516,6 +520,7 @@ const config = {
color: lightTheme.textPrimary,
'--color-surface': lightThemeRgb.surface,
'--color-surface-secondary': lightThemeRgb.surfaceSecondary,
'--color-surface-tertiary': lightThemeRgb.surfaceTertiary,
'--color-surface-hover': lightThemeRgb.surfaceHover,
'--color-surface-disabled': lightThemeRgb.surfaceDisabled,
'--color-surface-selected': lightThemeRgb.surfaceSelected,
@@ -528,6 +533,7 @@ const config = {
'--color-surface-inverse': darkThemeRgb.surface,
'--color-surface-secondary-inverse': darkThemeRgb.surfaceSecondary,
'--color-surface-tertiary-inverse': darkThemeRgb.surfaceTertiary,
'--color-surface-hover-inverse': darkThemeRgb.surfaceHover,
'--color-surface-disabled-inverse': darkThemeRgb.surfaceDisabled,
'--color-surface-selected-inverse': darkThemeRgb.surfaceSelected,
@@ -559,6 +565,7 @@ const config = {
'--color-surface': darkThemeRgb.surface,
'--color-surface-secondary': darkThemeRgb.surfaceSecondary,
'--color-surface-tertiary': darkThemeRgb.surfaceTertiary,
'--color-surface-hover': darkThemeRgb.surfaceHover,
'--color-surface-disabled': darkThemeRgb.surfaceDisabled,
'--color-surface-selected': darkThemeRgb.surfaceSelected,
@@ -571,6 +578,7 @@ const config = {
'--color-surface-inverse': lightThemeRgb.surface,
'--color-surface-secondary-inverse': lightThemeRgb.surfaceSecondary,
'--color-surface-tertiary-inverse': lightThemeRgb.surfaceTertiary,
'--color-surface-hover-inverse': lightThemeRgb.surfaceHover,
'--color-surface-disabled-inverse': lightThemeRgb.surfaceDisabled,
'--color-surface-selected-inverse': lightThemeRgb.surfaceSelected,