chore: add and update theme related css variables values (#7442)

This commit is contained in:
Joel 2024-08-20 16:33:40 +08:00 committed by GitHub
parent 4f64a5d36d
commit e2d214e030
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 142 additions and 25 deletions

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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