From e2d214e03062a58b2479912d0d722c7e361d1eb4 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 20 Aug 2024 16:33:40 +0800 Subject: [PATCH] chore: add and update theme related css variables values (#7442) --- web/themes/dark.css | 65 ++++++++++++++++++++----- web/themes/light.css | 53 +++++++++++++++++--- web/themes/tailwind-theme-var-define.ts | 49 +++++++++++++++++-- 3 files changed, 142 insertions(+), 25 deletions(-) diff --git a/web/themes/dark.css b/web/themes/dark.css index 75534b14ed..b94124aad2 100644 --- a/web/themes/dark.css +++ b/web/themes/dark.css @@ -10,7 +10,7 @@ html[data-theme="dark"] { --color-components-input-bg-destructive: #FFFFFF03; --color-components-input-bg-disabled: #FFFFFF08; --color-components-input-text-disabled: #C8CEDA4D; - --color-components-input-text-filled-disabled: #C8CEDA66; + --color-components-input-text-filled-disabled: #C8CEDA99; --color-components-input-border-hover: #3A3A40; --color-components-input-border-active-prompt-1: #36BFFA; --color-components-input-border-active-prompt-2: #296DFF; @@ -57,7 +57,7 @@ html[data-theme="dark"] { --color-components-button-destructive-primary-border-hover: #FFFFFF33; --color-components-button-destructive-primary-border-disabled: #FFFFFF14; - --color-components-button-destructive-secondary-text: #F04438; + --color-components-button-destructive-secondary-text: #F97066; --color-components-button-destructive-secondary-text-disabled: #F0443833; --color-components-button-destructive-secondary-bg: #FFFFFF1F; --color-components-button-destructive-secondary-bg-hover: #F0443824; @@ -66,13 +66,13 @@ html[data-theme="dark"] { --color-components-button-destructive-secondary-border-hover: #FFFFFF1F; --color-components-button-destructive-secondary-border-disabled: #F0443814; - --color-components-button-destructive-tertiary-text: #F04438; + --color-components-button-destructive-tertiary-text: #F97066; --color-components-button-destructive-tertiary-text-disabled: #F0443833; --color-components-button-destructive-tertiary-bg: #F0443824; --color-components-button-destructive-tertiary-bg-hover: #F0443840; --color-components-button-destructive-tertiary-bg-disabled: #F0443814; - --color-components-button-destructive-ghost-text: #F04438; + --color-components-button-destructive-ghost-text: #F97066; --color-components-button-destructive-ghost-text-disabled: #F0443833; --color-components-button-destructive-ghost-bg-hover: #F0443824; @@ -136,6 +136,8 @@ html[data-theme="dark"] { --color-components-panel-on-panel-item-bg-hover: #3A3A40; --color-components-panel-on-panel-item-bg-alt: #3A3A40; + --color-components-panel-bg-transparent: #22222500; + --color-components-main-nav-nav-button-text: #C8CEDA99; --color-components-main-nav-nav-button-text-active: #F4F4F5; --color-components-main-nav-nav-button-bg: #FFFFFF00; @@ -204,7 +206,7 @@ html[data-theme="dark"] { --color-components-chart-current-2: #155AEF4D; --color-components-chart-bg: #18181BF2; - --color-components-actionbar-bg: #18181BCC; + --color-components-actionbar-bg: #222225; --color-components-actionbar-border: #C8CEDA14; --color-components-dropzone-bg-alt: #18181BCC; @@ -227,19 +229,29 @@ html[data-theme="dark"] { --color-components-progress-gray-bg: #C8CEDA05; --color-components-chat-input-audio-bg: #155AEF33; - --color-components-chat-input-audio-wave: #C8CEDA24; + --color-components-chat-input-audio-wave-default: #C8CEDA24; --color-components-chat-input-bg-mask-1: #18181B0A; --color-components-chat-input-bg-mask-2: #18181B99; --color-components-chat-input-border: #C8CEDA33; + --color-components-chat-input-audio-wave-active: #84ABFF; + --color-components-chat-input-audio-bg-alt: #18181BE5; + + --color-components-Avatar-shape-fill-stop-0: #FFFFFFF2; + --color-components-Avatar-shape-fill-stop-100: #FFFFFFCC; + + --color-components-Avatar-bg-mask-stop-0: #FFFFFF33; + --color-components-Avatar-bg-mask-stop-100: #FFFFFF08; + + --color-components-Avatar-default-avatar-bg: #222225; --color-text-primary: #FBFBFC; --color-text-secondary: #D9D9DE; --color-text-tertiary: #C8CEDA99; --color-text-quaternary: #C8CEDA66; - --color-text-destructive: #F04438; + --color-text-destructive: #F97066; --color-text-success: #17B26A; --color-text-warning: #F79009; - --color-text-destructive-secondary: #F04438; + --color-text-destructive-secondary: #F97066; --color-text-success-secondary: #47CD89; --color-text-warning-secondary: #FDB022; --color-text-accent: #5289FF; @@ -252,17 +264,20 @@ html[data-theme="dark"] { --color-text-secondary-on-surface: #FFFFFFE5; --color-text-logo-text: #E9E9EC; --color-text-empty-state-icon: #C8CEDA4D; + --color-text-inverted: #FFFFFF; --color-background-body: #1D1D20; --color-background-default-subtle: #222225; --color-background-neurtral-subtle: #1D1D20; - --color-background-sidenav-bg: #18181B80; + --color-background-sidenav-bg: #27272AEB; --color-background-default: #222225; --color-background-soft: #18181B40; --color-background-gradient-bg-fill-chat-bg-1: #222225; --color-background-gradient-bg-fill-chat-bg-2: #1D1D20; --color-background-gradient-bg-fill-chat-bubble-bg-1: #C8CEDA14; --color-background-gradient-bg-fill-chat-bubble-bg-2: #C8CEDA05; + --color-background-gradient-bg-fill-debug-bg-1: #C8CEDA14; + --color-background-gradient-bg-fill-debug-bg-2: #18181B0A; --color-background-gradient-mask-gray: #18181B14; --color-background-gradient-mask-transparent: #00000000; @@ -298,12 +313,8 @@ html[data-theme="dark"] { --color-shadow-shadow-2: #00000014; --color-shadow-shadow-10: #00000066; - --color-workflow-block-border: #FFFFFF14; - --color-workflow-block-panel-bg: #27272B; --color-workflow-block-border: #FFFFFF14; --color-workflow-block-parma-bg: #FFFFFF0D; - --color-workflow-block-nav-bg: #1D1D20; - --color-workflow-block-nav-border-right: #FFFFFF0D; --color-workflow-block-bg: #27272B; --color-workflow-canvas-workflow-dot-color: #8585AD26; @@ -557,6 +568,34 @@ html[data-theme="dark"] { --color-util-colors-gray-gray-600: #98A2B2; --color-util-colors-gray-gray-700: #D0D5DC; + --color-util-colors-green-light-green-light-50: #15290A; + --color-util-colors-green-light-green-light-100: #2B5314; + --color-util-colors-green-light-green-light-200: #326212; + --color-util-colors-green-light-green-light-300: #3B7C0F; + --color-util-colors-green-light-green-light-500: #66C61C; + --color-util-colors-green-light-green-light-400: #4CA30D; + --color-util-colors-green-light-green-light-600: #85E13A; + --color-util-colors-green-light-green-light-700: #A6EF67; + + --color-util-colors-rose-rose-50: #510B24; + --color-util-colors-rose-rose-100: #89123E; + --color-util-colors-rose-rose-200: #A11043; + --color-util-colors-rose-rose-300: #C01048; + --color-util-colors-rose-rose-400: #E31B54; + --color-util-colors-rose-rose-500: #F63D68; + --color-util-colors-rose-rose-600: #FD6F8E; + --color-util-colors-rose-rose-700: #FEA3B4; + + --color-util-colors-midnight-midnight-50: #171C22; + --color-util-colors-midnight-midnight-100: #202431; + --color-util-colors-midnight-midnight-200: #2F3648; + --color-util-colors-midnight-midnight-300: #3E465E; + --color-util-colors-midnight-midnight-400: #5D698D; + --color-util-colors-midnight-midnight-500: #828DAD; + --color-util-colors-midnight-midnight-600: #A7AEC5; + --color-util-colors-midnight-midnight-700: #C6CBD9; + --color-third-party-LangChain: #FFFFFF; --color-third-party-Langfuse: #FFFFFF; + --color-third-party-Github: #FFFFFF; } \ No newline at end of file diff --git a/web/themes/light.css b/web/themes/light.css index 5dd39abf88..80a0fa36f5 100644 --- a/web/themes/light.css +++ b/web/themes/light.css @@ -10,7 +10,7 @@ html[data-theme="light"] { --color-components-input-bg-destructive: #FFFFFF; --color-components-input-bg-disabled: #C8CEDA24; --color-components-input-text-disabled: #D0D5DC; - --color-components-input-text-filled-disabled: #1018284D; + --color-components-input-text-filled-disabled: #676F83; --color-components-input-border-hover: #D0D5DC; --color-components-input-border-active-prompt-1: #0BA5EC; --color-components-input-border-active-prompt-2: #155AEF; @@ -136,6 +136,8 @@ html[data-theme="light"] { --color-components-panel-on-panel-item-bg-hover: #F9FAFB; --color-components-panel-on-panel-item-bg-alt: #F9FAFB; + --color-components-panel-bg-transparent: #FFFFFF00; + --color-components-main-nav-nav-button-text: #495464; --color-components-main-nav-nav-button-text-active: #155AEF; --color-components-main-nav-nav-button-bg: #FFFFFF00; @@ -227,10 +229,20 @@ html[data-theme="light"] { --color-components-progress-gray-bg: #C8CEDA05; --color-components-chat-input-audio-bg: #EFF4FF; - --color-components-chat-input-audio-wave: #155AEF24; + --color-components-chat-input-audio-wave-default: #155AEF33; --color-components-chat-input-bg-mask-1: #FFFFFF03; --color-components-chat-input-bg-mask-2: #F2F4F7; --color-components-chat-input-border: #FFFFFF; + --color-components-chat-input-audio-wave-active: #296DFF; + --color-components-chat-input-audio-bg-alt: #FCFCFD; + + --color-components-Avatar-shape-fill-stop-0: #FFFFFF; + --color-components-Avatar-shape-fill-stop-100: #FFFFFFE5; + + --color-components-Avatar-bg-mask-stop-0: #FFFFFF1F; + --color-components-Avatar-bg-mask-stop-100: #FFFFFF14; + + --color-components-Avatar-default-avatar-bg: #D0D5DC; --color-text-primary: #101828; --color-text-secondary: #354052; @@ -252,17 +264,20 @@ html[data-theme="light"] { --color-text-secondary-on-surface: #FFFFFFE5; --color-text-logo-text: #18222F; --color-text-empty-state-icon: #D0D5DC; + --color-text-inverted: #000000; --color-background-body: #F2F4F7; --color-background-default-subtle: #FCFCFD; --color-background-neurtral-subtle: #F9FAFB; - --color-background-sidenav-bg: #FCFCFD; + --color-background-sidenav-bg: #FFFFFFCC; --color-background-default: #FFFFFF; --color-background-soft: #F9FAFB; --color-background-gradient-bg-fill-chat-bg-1: #F9FAFB; --color-background-gradient-bg-fill-chat-bg-2: #F2F4F7; --color-background-gradient-bg-fill-chat-bubble-bg-1: #FFFFFF; --color-background-gradient-bg-fill-chat-bubble-bg-2: #FFFFFF99; + --color-background-gradient-bg-fill-debug-bg-1: #FFFFFF00; + --color-background-gradient-bg-fill-debug-bg-2: #C8CEDA24; --color-background-gradient-mask-gray: #C8CEDA33; --color-background-gradient-mask-transparent: #FFFFFF00; @@ -298,12 +313,8 @@ html[data-theme="light"] { --color-shadow-shadow-2: #09090B0A; --color-shadow-shadow-10: #09090B0D; - --color-workflow-block-border: #18181B14; - --color-workflow-block-panel-bg: #FFFFFF; --color-workflow-block-border: #FFFFFF; --color-workflow-block-parma-bg: #F2F4F7; - --color-workflow-block-nav-bg: #FFFFFF; - --color-workflow-block-nav-border-right: #FFFFFF; --color-workflow-block-bg: #FCFCFD; --color-workflow-canvas-workflow-dot-color: #8585AD26; @@ -557,6 +568,34 @@ html[data-theme="light"] { --color-util-colors-gray-gray-600: #495464; --color-util-colors-gray-gray-700: #354052; + --color-util-colors-green-light-green-light-50: #F3FEE7; + --color-util-colors-green-light-green-light-100: #E3FBCC; + --color-util-colors-green-light-green-light-200: #D0F8AB; + --color-util-colors-green-light-green-light-300: #A6EF67; + --color-util-colors-green-light-green-light-500: #66C61C; + --color-util-colors-green-light-green-light-400: #85E13A; + --color-util-colors-green-light-green-light-600: #4CA30D; + --color-util-colors-green-light-green-light-700: #3B7C0F; + + --color-util-colors-rose-rose-50: #FFF1F3; + --color-util-colors-rose-rose-100: #FFE4E8; + --color-util-colors-rose-rose-200: #FECDD6; + --color-util-colors-rose-rose-300: #FEA3B4; + --color-util-colors-rose-rose-400: #FD6F8E; + --color-util-colors-rose-rose-500: #F63D68; + --color-util-colors-rose-rose-600: #E31B54; + --color-util-colors-rose-rose-700: #C01048; + + --color-util-colors-midnight-midnight-50: #FBFBFC; + --color-util-colors-midnight-midnight-100: #F0F2F5; + --color-util-colors-midnight-midnight-200: #DFE1EA; + --color-util-colors-midnight-midnight-300: #C6CBD9; + --color-util-colors-midnight-midnight-400: #A7AEC5; + --color-util-colors-midnight-midnight-500: #828DAD; + --color-util-colors-midnight-midnight-600: #5D698D; + --color-util-colors-midnight-midnight-700: #3E465E; + --color-third-party-LangChain: #1C3C3C; --color-third-party-Langfuse: #000000; + --color-third-party-Github: #1B1F24; } \ No newline at end of file diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts index 1acb728b16..caeb01b5fa 100644 --- a/web/themes/tailwind-theme-var-define.ts +++ b/web/themes/tailwind-theme-var-define.ts @@ -136,6 +136,8 @@ const vars = { 'components-panel-on-panel-item-bg-hover': 'var(--color-components-panel-on-panel-item-bg-hover)', 'components-panel-on-panel-item-bg-alt': 'var(--color-components-panel-on-panel-item-bg-alt)', + 'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)', + 'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)', 'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)', 'components-main-nav-nav-button-bg': 'var(--color-components-main-nav-nav-button-bg)', @@ -227,10 +229,20 @@ const vars = { 'components-progress-gray-bg': 'var(--color-components-progress-gray-bg)', 'components-chat-input-audio-bg': 'var(--color-components-chat-input-audio-bg)', - 'components-chat-input-audio-wave': 'var(--color-components-chat-input-audio-wave)', + 'components-chat-input-audio-wave-default': 'var(--color-components-chat-input-audio-wave-default)', 'components-chat-input-bg-mask-1': 'var(--color-components-chat-input-bg-mask-1)', 'components-chat-input-bg-mask-2': 'var(--color-components-chat-input-bg-mask-2)', 'components-chat-input-border': 'var(--color-components-chat-input-border)', + 'components-chat-input-audio-wave-active': 'var(--color-components-chat-input-audio-wave-active)', + 'components-chat-input-audio-bg-alt': 'var(--color-components-chat-input-audio-bg-alt)', + + 'components-Avatar-shape-fill-stop-0': 'var(--color-components-Avatar-shape-fill-stop-0)', + 'components-Avatar-shape-fill-stop-100': 'var(--color-components-Avatar-shape-fill-stop-100)', + + 'components-Avatar-bg-mask-stop-0': 'var(--color-components-Avatar-bg-mask-stop-0)', + 'components-Avatar-bg-mask-stop-100': 'var(--color-components-Avatar-bg-mask-stop-100)', + + 'components-Avatar-default-avatar-bg': 'var(--color-components-Avatar-default-avatar-bg)', 'text-primary': 'var(--color-text-primary)', 'text-secondary': 'var(--color-text-secondary)', @@ -252,6 +264,7 @@ const vars = { 'text-secondary-on-surface': 'var(--color-text-secondary-on-surface)', 'text-logo-text': 'var(--color-text-logo-text)', 'text-empty-state-icon': 'var(--color-text-empty-state-icon)', + 'text-inverted': 'var(--color-text-inverted)', 'background-body': 'var(--color-background-body)', 'background-default-subtle': 'var(--color-background-default-subtle)', @@ -263,6 +276,8 @@ const vars = { 'background-gradient-bg-fill-chat-bg-2': 'var(--color-background-gradient-bg-fill-chat-bg-2)', 'background-gradient-bg-fill-chat-bubble-bg-1': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-1)', 'background-gradient-bg-fill-chat-bubble-bg-2': 'var(--color-background-gradient-bg-fill-chat-bubble-bg-2)', + 'background-gradient-bg-fill-debug-bg-1': 'var(--color-background-gradient-bg-fill-debug-bg-1)', + 'background-gradient-bg-fill-debug-bg-2': 'var(--color-background-gradient-bg-fill-debug-bg-2)', 'background-gradient-mask-gray': 'var(--color-background-gradient-mask-gray)', 'background-gradient-mask-transparent': 'var(--color-background-gradient-mask-transparent)', @@ -299,10 +314,7 @@ const vars = { 'shadow-shadow-10': 'var(--color-shadow-shadow-10)', 'workflow-block-border': 'var(--color-workflow-block-border)', - 'workflow-block-panel-bg': 'var(--color-workflow-block-panel-bg)', 'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)', - 'workflow-block-nav-bg': 'var(--color-workflow-block-nav-bg)', - 'workflow-block-nav-border-right': 'var(--color-workflow-block-nav-border-right)', 'workflow-block-bg': 'var(--color-workflow-block-bg)', 'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)', @@ -556,9 +568,36 @@ const vars = { 'util-colors-gray-gray-600': 'var(--color-util-colors-gray-gray-600)', 'util-colors-gray-gray-700': 'var(--color-util-colors-gray-gray-700)', + 'util-colors-green-light-green-light-50': 'var(--color-util-colors-green-light-green-light-50)', + 'util-colors-green-light-green-light-100': 'var(--color-util-colors-green-light-green-light-100)', + 'util-colors-green-light-green-light-200': 'var(--color-util-colors-green-light-green-light-200)', + 'util-colors-green-light-green-light-300': 'var(--color-util-colors-green-light-green-light-300)', + 'util-colors-green-light-green-light-500': 'var(--color-util-colors-green-light-green-light-500)', + 'util-colors-green-light-green-light-400': 'var(--color-util-colors-green-light-green-light-400)', + 'util-colors-green-light-green-light-600': 'var(--color-util-colors-green-light-green-light-600)', + 'util-colors-green-light-green-light-700': 'var(--color-util-colors-green-light-green-light-700)', + + 'util-colors-rose-rose-50': 'var(--color-util-colors-rose-rose-50)', + 'util-colors-rose-rose-100': 'var(--color-util-colors-rose-rose-100)', + 'util-colors-rose-rose-200': 'var(--color-util-colors-rose-rose-200)', + 'util-colors-rose-rose-300': 'var(--color-util-colors-rose-rose-300)', + 'util-colors-rose-rose-400': 'var(--color-util-colors-rose-rose-400)', + 'util-colors-rose-rose-500': 'var(--color-util-colors-rose-rose-500)', + 'util-colors-rose-rose-600': 'var(--color-util-colors-rose-rose-600)', + 'util-colors-rose-rose-700': 'var(--color-util-colors-rose-rose-700)', + + 'util-colors-midnight-midnight-50': 'var(--color-util-colors-midnight-midnight-50)', + 'util-colors-midnight-midnight-100': 'var(--color-util-colors-midnight-midnight-100)', + 'util-colors-midnight-midnight-200': 'var(--color-util-colors-midnight-midnight-200)', + 'util-colors-midnight-midnight-300': 'var(--color-util-colors-midnight-midnight-300)', + 'util-colors-midnight-midnight-400': 'var(--color-util-colors-midnight-midnight-400)', + 'util-colors-midnight-midnight-500': 'var(--color-util-colors-midnight-midnight-500)', + 'util-colors-midnight-midnight-600': 'var(--color-util-colors-midnight-midnight-600)', + 'util-colors-midnight-midnight-700': 'var(--color-util-colors-midnight-midnight-700)', + 'third-party-LangChain': 'var(--color-third-party-LangChain)', 'third-party-Langfuse': 'var(--color-third-party-Langfuse)', - + 'third-party-Github': 'var(--color-third-party-Github)', } export default vars