Skip to content

fix(frontend): change color palette v0 #6715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix(frontend): change color palette v0 #6715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/lib/components/LogViewer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/ScriptEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/lib/components/Toggle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/lib/components/common/button/model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/common/toggleButton-v2/ToggleButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/flows/CreateActionsApp.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/flows/CreateActionsFlow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/flows/FlowEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 _}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/graph/FlowGraphV2.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/home/ItemsList.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/home/TreeViewRoot.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/scripts/CreateActionsScript.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{aiDescription}
size="sm"
spacingSize="xl"
color="marine"
color="blue"
startIcon={{ icon: Plus }}
href="{base}/scripts/add"
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/text_input/TextInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
18 changes: 13 additions & 5 deletions frontend/tailwind.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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>)',
Expand All @@ -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>)',
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
Loading