test/dify
1
0
Fork 0
mirror of https://gitee.com/dify_ai/dify.git synced 2024-11-29 17:58:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Feat: update icon and Divider components (#10975)

Browse Source
This commit is contained in:
NFish 2024-11-22 15:44:42 +08:00 committed by GitHub
parent 5b415a6227
commit 8a83edc1b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 58 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/components/base/divider/index.tsx
View File

@ -1,17 +1,31 @@
import type { CSSProperties, FC } from 'react'
import React from 'react'
import s from './style.module.css'
import { type VariantProps, cva } from 'class-variance-authority'
import classNames from '@/utils/classnames'
type Props = {
type?: 'horizontal' | 'vertical'
// orientation?: 'left' | 'right' | 'center'
const dividerVariants = cva(
'bg-divider-regular',
{
variants: {
type: {
horizontal: 'w-full h-[0.5px] my-2',
vertical: 'w-[1px] h-full mx-2',
},
},
defaultVariants: {
type: 'horizontal',
},
},
)
type DividerProps = {
className?: string
style?: CSSProperties
}
} & VariantProps<typeof dividerVariants>
const Divider: FC<Props> = ({ type = 'horizontal', className = '', style }) => {
const Divider: FC<DividerProps> = ({ type, className = '', style }) => {
return (
<div className={`${s.divider} ${s[type]} ${className}`} style={style}></div>
<div className={classNames(dividerVariants({ type }), className)} style={style}></div>
)
}

9
web/app/components/base/divider/style.module.css
View File

@ -1,9 +0,0 @@
.divider {
@apply bg-gray-200;
}
.horizontal {
@apply w-full h-[0.5px] my-2;
}
.vertical {
@apply w-[1px] h-full mx-2;
}

10
web/themes/dark.css
View File

@ -265,6 +265,7 @@ html[data-theme="dark"] {
--color-text-logo-text: #E9E9EC;
--color-text-empty-state-icon: #C8CEDA4D;
--color-text-inverted: #FFFFFF;
--color-text-inverted-dimmed: #FFFFFFCC;
--color-background-body: #1D1D20;
--color-background-default-subtle: #222225;
@ -296,7 +297,7 @@ html[data-theme="dark"] {
--color-background-section-burn: #18181B99;
--color-background-default-dodge: #3A3A40;
--color-background-overlay: #18181BCC;
--color-background-default-dimm: #27272B;
--color-background-default-dimmed: #27272B;
--color-background-default-hover: #27272B;
--color-background-overlay-alt: #18181B66;
--color-background-surface-white: #FFFFFFE5;
@ -325,6 +326,12 @@ html[data-theme="dark"] {
--color-workflow-link-line-normal: #676F83;
--color-workflow-link-line-handle: #296DFF;
--color-workflow-link-line-success-active: #47CD89;
--color-workflow-link-line-success-handle: #47CD89;
--color-workflow-link-line-error-active: #F97066;
--color-workflow-link-line-error-handle: #F97066;
--color-workflow-minimap-bg: #27272B;
--color-workflow-minimap-block: #C8CEDA14;
@ -598,6 +605,5 @@ html[data-theme="dark"] {
--color-third-party-LangChain: #FFFFFF;
--color-third-party-Langfuse: #FFFFFF;
--color-third-party-Github: #FFFFFF;
}

14
web/themes/light.css
View File

@ -265,6 +265,7 @@ html[data-theme="light"] {
--color-text-logo-text: #18222F;
--color-text-empty-state-icon: #D0D5DC;
--color-text-inverted: #000000;
--color-text-inverted-dimmed: #000000F2;
--color-background-body: #F2F4F7;
--color-background-default-subtle: #FCFCFD;
@ -296,7 +297,7 @@ html[data-theme="light"] {
--color-background-section-burn: #F2F4F7;
--color-background-default-dodge: #FFFFFF;
--color-background-overlay: #10182899;
--color-background-default-dimm: #E9EBF0;
--color-background-default-dimmed: #E9EBF0;
--color-background-default-hover: #F9FAFB;
--color-background-overlay-alt: #10182866;
--color-background-surface-white: #FFFFFFF2;
@ -324,6 +325,17 @@ html[data-theme="light"] {
--color-workflow-link-line-active: #296DFF;
--color-workflow-link-line-normal: #D0D5DC;
--color-workflow-link-line-handle: #296DFF;
--color-workflow-link-line-normal-transparent: #D0D5DC33;
--color-workflow-link-line-failure-active: #F79009;
--color-workflow-link-line-failure-handle: #F79009;
--color-workflow-link-line-failure-button-bg: #DC6803;
--color-workflow-link-line-failure-button-hover: #B54708;
--color-workflow-link-line-success-active: #17B26A;
--color-workflow-link-line-success-handle: #17B26A;
--color-workflow-link-line-error-active: #F04438;
--color-workflow-link-line-error-handle: #F04438;
--color-workflow-minimap-bg: #E9EBF0;
--color-workflow-minimap-block: #C8CEDA4D;

14
web/themes/tailwind-theme-var-define.ts
View File

@ -265,6 +265,7 @@ const vars = {
'text-logo-text': 'var(--color-text-logo-text)',
'text-empty-state-icon': 'var(--color-text-empty-state-icon)',
'text-inverted': 'var(--color-text-inverted)',
'text-inverted-dimmed': 'var(--color-text-inverted-dimmed)',
'background-body': 'var(--color-background-body)',
'background-default-subtle': 'var(--color-background-default-subtle)',
@ -296,7 +297,7 @@ const vars = {
'background-section-burn': 'var(--color-background-section-burn)',
'background-default-dodge': 'var(--color-background-default-dodge)',
'background-overlay': 'var(--color-background-overlay)',
'background-default-dimm': 'var(--color-background-default-dimm)',
'background-default-dimmed': 'var(--color-background-default-dimmed)',
'background-default-hover': 'var(--color-background-default-hover)',
'background-overlay-alt': 'var(--color-background-overlay-alt)',
'background-surface-white': 'var(--color-background-surface-white)',
@ -324,6 +325,17 @@ const vars = {
'workflow-link-line-active': 'var(--color-workflow-link-line-active)',
'workflow-link-line-normal': 'var(--color-workflow-link-line-normal)',
'workflow-link-line-handle': 'var(--color-workflow-link-line-handle)',
'workflow-link-line-normal-transparent': 'var(--color-workflow-link-line-normal-transparent)',
'workflow-link-line-failure-active': 'var(--color-workflow-link-line-failure-active)',
'workflow-link-line-failure-handle': 'var(--color-workflow-link-line-failure-handle)',
'workflow-link-line-failure-button-bg': 'var(--color-workflow-link-line-failure-button-bg)',
'workflow-link-line-failure-button-hover': 'var(--color-workflow-link-line-failure-button-hover)',
'workflow-link-line-success-active': 'var(--color-workflow-link-line-success-active)',
'workflow-link-line-success-handle': 'var(--color-workflow-link-line-success-handle)',
'workflow-link-line-error-active': 'var(--color-workflow-link-line-error-active)',
'workflow-link-line-error-handle': 'var(--color-workflow-link-line-error-handle)',
'workflow-minimap-bg': 'var(--color-workflow-minimap-bg)',
'workflow-minimap-block': 'var(--color-workflow-minimap-block)',

6
web/yarn.lock
View File

@ -2568,9 +2568,9 @@
zustand "^4.4.1"
"@remixicon/react@^4.2.0":
version "4.2.0"
resolved "https://registry.npmjs.org/@remixicon/react/-/react-4.2.0.tgz"
integrity sha512-eGhKpZ88OU0qkcY9pJu6khBmItDV82nU130E6C68yc+FbljueHlUYy/4CrJsmf860RIDMay2Rpzl27OSJ81miw==
version "4.5.0"
resolved "https://registry.yarnpkg.com/@remixicon/react/-/react-4.5.0.tgz#5600d122ee4995bff2c4442cb056eeb4f11ecb5a"
integrity sha512-Xr20SxMpRNlgXZnoF5BCMyZuQEhXY3yJCyms8kxB/vJCCiV1nWdiO48XqRG5LBd1192iSHC4m658AIWi6rmBFg==
"@rgrove/parse-xml@^4.1.0":
version "4.1.0"