diff --git a/.changeset/button-tag-speeddial-timepicker-improvements.md b/.changeset/button-tag-speeddial-timepicker-improvements.md new file mode 100644 index 00000000..089522a8 --- /dev/null +++ b/.changeset/button-tag-speeddial-timepicker-improvements.md @@ -0,0 +1,6 @@ +--- +"@tiny-design/react": minor +"@tiny-design/tokens": minor +--- + +Add hover/focus/active state styles for button status types (success, info, warning, danger), add status color presets to Tag component, fix SpeedDial to use theme-aware CSS custom properties, and improve TimePicker with pending selection state committed on OK diff --git a/packages/react/src/button/style/_index.scss b/packages/react/src/button/style/_index.scss index d74a0bd2..31563757 100755 --- a/packages/react/src/button/style/_index.scss +++ b/packages/react/src/button/style/_index.scss @@ -24,7 +24,7 @@ $btn-prefix: #{$prefix}-btn; line-height: $btn-line-height; &__loader { - @include loader(); + @include loader; } &__icon-container, &__loader { @@ -91,19 +91,27 @@ $btn-prefix: #{$prefix}-btn; } &_info { - @include button-style(#fff, var(--ty-color-info), var(--ty-color-info)); + @include button-style(#fff, var(--ty-color-info), var(--ty-color-info), + var(--ty-color-info-hover), var(--ty-color-info-hover), #fff, + var(--ty-color-info-active), var(--ty-color-info-active), #fff); } &_success { - @include button-style(#fff, var(--ty-color-success), var(--ty-color-success)); + @include button-style(#fff, var(--ty-color-success), var(--ty-color-success), + var(--ty-color-success-hover), var(--ty-color-success-hover), #fff, + var(--ty-color-success-active), var(--ty-color-success-active), #fff); } &_warning { - @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning)); + @include button-style(#fff, var(--ty-color-warning), var(--ty-color-warning), + var(--ty-color-warning-hover), var(--ty-color-warning-hover), #fff, + var(--ty-color-warning-active), var(--ty-color-warning-active), #fff); } &_danger { - @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger)); + @include button-style(#fff, var(--ty-color-danger), var(--ty-color-danger), + var(--ty-color-danger-hover), var(--ty-color-danger-hover), #fff, + var(--ty-color-danger-active), var(--ty-color-danger-active), #fff); } // Sizes @@ -135,13 +143,10 @@ $btn-prefix: #{$prefix}-btn; position: relative; pointer-events: none; - &:before { + &::before { content: ''; position: absolute; - top: -1px; - right: -1px; - bottom: -1px; - left: -1px; + inset: -1px; z-index: 1; display: block; background: var(--ty-btn-loading-bg); @@ -208,7 +213,7 @@ $btn-prefix: #{$prefix}-btn; &_danger { .#{$btn-prefix} { &:not(:first-child) { - border-left-color: rgba(255, 255, 255, 0.2); + border-left-color: rgb(255 255 255 / 20%); } } } diff --git a/packages/react/src/pop-confirm/style/_index.scss b/packages/react/src/pop-confirm/style/_index.scss index 5a83799b..0b44b8d9 100755 --- a/packages/react/src/pop-confirm/style/_index.scss +++ b/packages/react/src/pop-confirm/style/_index.scss @@ -15,6 +15,10 @@ } &__buttons { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; text-align: right; } diff --git a/packages/react/src/slider/style/_index.scss b/packages/react/src/slider/style/_index.scss index b6200a5f..97f0e46f 100644 --- a/packages/react/src/slider/style/_index.scss +++ b/packages/react/src/slider/style/_index.scss @@ -5,21 +5,13 @@ box-sizing: border-box; cursor: pointer; - &_horizontal.#{$prefix}-slider { - margin-bottom: $slider-margin-bottom-with-marks; - } - - &_vertical.#{$prefix}-slider { - margin-right: $slider-margin-bottom-with-marks; - } - &_horizontal { + width: 100%; min-height: $slider-size; margin: 13px 7px; padding: 4px 0; .#{$prefix}-slider { - &__rail { width: 100%; height: $slider-track-size; diff --git a/packages/react/src/speed-dial/style/_index.scss b/packages/react/src/speed-dial/style/_index.scss index 7261c2e3..dd56239f 100644 --- a/packages/react/src/speed-dial/style/_index.scss +++ b/packages/react/src/speed-dial/style/_index.scss @@ -1,5 +1,4 @@ @use "../../style/variables" as *; -@use "sass:color"; $speed-dial-fab-size: 56px; $speed-dial-action-size: 40px; @@ -18,8 +17,8 @@ $speed-dial-actions-gap: 16px; height: $speed-dial-fab-size; border-radius: 50%; border: none; - background-color: var(--ty-speed-dial-bg, #{$primary-color}); - color: var(--ty-speed-dial-color, #{$white-color}); + background-color: var(--ty-speed-dial-bg, var(--ty-color-primary)); + color: var(--ty-speed-dial-color, #fff); font-size: 24px; cursor: pointer; box-shadow: $box-shadow; @@ -27,11 +26,11 @@ $speed-dial-actions-gap: 16px; outline: none; &:hover:not(.#{$prefix}-speed-dial__button_disabled) { - background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)}); + background-color: var(--ty-speed-dial-bg-hover, var(--ty-color-primary-active)); } &:focus-visible { - box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow; + box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow; } &_open { @@ -59,7 +58,7 @@ $speed-dial-actions-gap: 16px; position: absolute; top: 50%; left: 50%; - background-color: currentColor; + background-color: currentcolor; border-radius: 1px; translate: -50% -50%; } @@ -183,7 +182,7 @@ $speed-dial-actions-gap: 16px; } &:focus-visible { - box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm; + box-shadow: 0 0 0 3px var(--ty-input-focus-shadow, rgb(110 65 191 / 20%)), $box-shadow-sm; } &_disabled { diff --git a/packages/react/src/tag/demo/Status.tsx b/packages/react/src/tag/demo/Status.tsx new file mode 100644 index 00000000..c9c744a7 --- /dev/null +++ b/packages/react/src/tag/demo/Status.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Tag } from '@tiny-design/react'; + +export default function StatusDemo() { + return ( +
+ success + info + warning + danger +
+ ); +} diff --git a/packages/react/src/tag/index.md b/packages/react/src/tag/index.md index 08fc2ae9..cd4e60a9 100755 --- a/packages/react/src/tag/index.md +++ b/packages/react/src/tag/index.md @@ -8,6 +8,8 @@ import ControlledDemo from './demo/Controlled'; import ControlledSource from './demo/Controlled.tsx?raw'; import DynamicDemo from './demo/Dynamic'; import DynamicSource from './demo/Dynamic.tsx?raw'; +import StatusDemo from './demo/Status'; +import StatusSource from './demo/Status.tsx?raw'; # Tag @@ -71,6 +73,15 @@ We preset a series of colorful tag styles for use in different situations. You c +### Status + +Status tags use semantic colors that match the button component's status types. + + + + + + ### Controlled By using the `visible` prop, you can control the close state of Tag. @@ -98,6 +109,8 @@ By using the `visible` prop, you can control the close state of Tag. Preset colors: `magenta`, `red`, `volcano`, `orange`, `gold`, `lime`, `green`, `cyan`, `blue`, `geekblue`, `purple`. +Status colors: `success`, `info`, `warning`, `danger`. + ### Tag.CheckableTag | Property | Description | Type | Default | diff --git a/packages/react/src/tag/index.zh_CN.md b/packages/react/src/tag/index.zh_CN.md index c4e9e90c..5b48f4f2 100644 --- a/packages/react/src/tag/index.zh_CN.md +++ b/packages/react/src/tag/index.zh_CN.md @@ -8,6 +8,8 @@ import ControlledDemo from './demo/Controlled'; import ControlledSource from './demo/Controlled.tsx?raw'; import DynamicDemo from './demo/Dynamic'; import DynamicSource from './demo/Dynamic.tsx?raw'; +import StatusDemo from './demo/Status'; +import StatusSource from './demo/Status.tsx?raw'; # Tag @@ -71,6 +73,15 @@ const { CheckableTag } = Tag; +### 状态标签 + +状态标签使用与按钮组件状态类型一致的语义化颜色。 + + + + + + ### 受控显示 通过 `visible` 属性控制标签的显示与隐藏。 @@ -98,6 +109,8 @@ const { CheckableTag } = Tag; 预设颜色：`magenta`、`red`、`volcano`、`orange`、`gold`、`lime`、`green`、`cyan`、`blue`、`geekblue`、`purple`。 +状态颜色：`success`、`info`、`warning`、`danger`。 + ### Tag.CheckableTag | 属性 | 说明 | 类型 | 默认值 | diff --git a/packages/react/src/tag/style/_index.scss b/packages/react/src/tag/style/_index.scss index 3e0667dd..36b0dd9c 100755 --- a/packages/react/src/tag/style/_index.scss +++ b/packages/react/src/tag/style/_index.scss @@ -102,6 +102,30 @@ background: var(--ty-tag-purple-bg); border-color: var(--ty-tag-purple-border); } + + &_success { + color: var(--ty-color-success); + background: var(--ty-color-success-bg); + border-color: var(--ty-color-success-border); + } + + &_info { + color: var(--ty-color-info); + background: var(--ty-color-info-bg); + border-color: var(--ty-color-info-border); + } + + &_warning { + color: var(--ty-color-warning); + background: var(--ty-color-warning-bg); + border-color: var(--ty-color-warning-border); + } + + &_danger { + color: var(--ty-color-danger); + background: var(--ty-color-danger-bg); + border-color: var(--ty-color-danger-border); + } } .#{$prefix}-checkable-tag { diff --git a/packages/react/src/tag/types.ts b/packages/react/src/tag/types.ts index c17838b3..7bd3816f 100644 --- a/packages/react/src/tag/types.ts +++ b/packages/react/src/tag/types.ts @@ -8,6 +8,10 @@ export interface CheckableTagProps extends BaseProps { children?: React.ReactNode; } +export type StatusColor = 'success' | 'warning' | 'info' | 'danger'; + +export const StatusColors: StatusColor[] = ['success', 'info', 'warning', 'danger']; + export const PresetColors = [ 'magenta', 'red', @@ -20,10 +24,11 @@ export const PresetColors = [ 'blue', 'geekblue', 'purple', + ...StatusColors, ]; export interface TagProps extends BaseProps, React.PropsWithoutRef { - color?: string; + color?: string | StatusColor; closable?: boolean; onClose?: React.MouseEventHandler; onClick?: React.MouseEventHandler; diff --git a/packages/react/src/time-picker/style/_index.scss b/packages/react/src/time-picker/style/_index.scss index 51ab974a..07c4ea60 100755 --- a/packages/react/src/time-picker/style/_index.scss +++ b/packages/react/src/time-picker/style/_index.scss @@ -29,6 +29,10 @@ $tp: #{$prefix}-time-picker; box-shadow: var(--ty-input-focus-shadow); } + &_pending &__input-field { + color: var(--ty-color-text-tertiary); + } + &__input-field { flex: 1; border: none; @@ -191,6 +195,15 @@ $tp: #{$prefix}-time-picker; } } + &_pending { + background: var(--ty-color-primary-bg); + color: var(--ty-color-text-tertiary); + + &:hover { + background: var(--ty-color-primary-bg-hover); + } + } + &_disabled { color: var(--ty-color-text-quaternary); cursor: not-allowed; diff --git a/packages/react/src/time-picker/time-panel.tsx b/packages/react/src/time-picker/time-panel.tsx index 06d1ebbb..b14b5652 100755 --- a/packages/react/src/time-picker/time-panel.tsx +++ b/packages/react/src/time-picker/time-panel.tsx @@ -2,7 +2,8 @@ import { useRef, useEffect, useCallback } from 'react'; import classNames from 'classnames'; export interface TimePanelProps { - value: number; + value: number | null; + pendingValue: number | null; items: number[]; disabledItems?: number[]; loop?: boolean; @@ -13,16 +14,20 @@ export interface TimePanelProps { const ITEM_HEIGHT = 28; // 4px padding-top + 20px line-height + 4px padding-bottom const TimePanel = (props: TimePanelProps): React.ReactElement => { - const { prefixCls, value, items, disabledItems = [], loop = false, onChange } = props; + const { prefixCls, value, pendingValue, items, disabledItems = [], loop = false, onChange } = props; const panelRef = useRef(null); const itemRefs = useRef>(new Map()); const isResetting = useRef(false); const clickedRef = useRef(false); - const scrollToItemRef = useRef<((val: number) => void) | null>(null); + const scrollToItemRef = useRef<((val: number | null) => void) | null>(null); const oneGroupHeight = items.length * ITEM_HEIGHT; - scrollToItemRef.current = (val: number) => { + // The displayed value: pending takes priority, then committed + const displayValue = pendingValue ?? value; + + scrollToItemRef.current = (val: number | null) => { + if (val === null) return; const panel = panelRef.current; if (!panel) return; @@ -46,8 +51,8 @@ const TimePanel = (props: TimePanelProps): React.ReactElement => { clickedRef.current = false; return; } - scrollToItemRef.current?.(value); - }, [value]); + scrollToItemRef.current?.(displayValue); + }, [displayValue]); // Scroll reset for loop mode const handleScroll = useCallback(() => { @@ -69,27 +74,32 @@ const TimePanel = (props: TimePanelProps): React.ReactElement => { onChange(num); }; + const isPending = pendingValue !== null; + const isCommitted = value !== null && pendingValue === null; + + const cellCls = (num: number) => { + const isSelected = num === displayValue; + return classNames(`${prefixCls}__cell`, { + [`${prefixCls}__cell_selected`]: isSelected && isCommitted, + [`${prefixCls}__cell_pending`]: isSelected && isPending, + [`${prefixCls}__cell_disabled`]: disabledItems.includes(num), + }); + }; + if (loop) { const copies = [0, 1, 2]; return (
    {copies.map((copyIdx) => - items.map((num, i) => { - const isDisabled = disabledItems.includes(num); - const cls = classNames(`${prefixCls}__cell`, { - [`${prefixCls}__cell_selected`]: num === value, - [`${prefixCls}__cell_disabled`]: isDisabled, - }); - return ( -
  • handleClick(num)}> - {String(num).padStart(2, '0')} -
    • - ); - }) + items.map((num, i) => ( +
  • handleClick(num)}> + {String(num).padStart(2, '0')} +
    • + )) )}
@@ -99,24 +109,17 @@ const TimePanel = (props: TimePanelProps): React.ReactElement => { return (
    - {items.map((num) => { - const isDisabled = disabledItems.includes(num); - const cls = classNames(`${prefixCls}__cell`, { - [`${prefixCls}__cell_selected`]: num === value, - [`${prefixCls}__cell_disabled`]: isDisabled, - }); - return ( -
  • { - if (el) itemRefs.current.set(num, el); - }} - className={cls} - onClick={() => handleClick(num)}> - {String(num).padStart(2, '0')} -
    • - ); - })} + {items.map((num) => ( +
  • { + if (el) itemRefs.current.set(num, el); + }} + className={cellCls(num)} + onClick={() => handleClick(num)}> + {String(num).padStart(2, '0')} +
    • + ))}
); diff --git a/packages/react/src/time-picker/time-picker.tsx b/packages/react/src/time-picker/time-picker.tsx index 4befa040..010a733f 100644 --- a/packages/react/src/time-picker/time-picker.tsx +++ b/packages/react/src/time-picker/time-picker.tsx @@ -8,6 +8,14 @@ import Popup from '../popup'; import TimePanel from './time-panel'; import { TimePickerProps } from './types'; +interface PendingTime { + h: number | null; + m: number | null; + s: number | null; +} + +const EMPTY_PENDING: PendingTime = { h: null, m: null, s: null }; + function formatTime(date: Date, format: string, use12Hours: boolean): string { let h = date.getHours(); const m = String(date.getMinutes()).padStart(2, '0'); @@ -75,6 +83,7 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => { const prefixCls = getPrefixCls('time-picker', configContext.prefixCls, customisedCls); const [date, setDate] = useState(value ?? defaultValue ?? null); + const [pending, setPending] = useState(EMPTY_PENDING); const [open, setOpen] = useState(false); const wrapperRef = useRef(null); const dropdownRef = useRef(null); @@ -96,6 +105,7 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => { if (wrapperRef.current?.contains(target) || dropdownRef.current?.contains(target)) return; if (controlledOpen === undefined) setOpen(false); onOpenChange?.(false); + setPending(EMPTY_PENDING); }; document.addEventListener('click', listener); return () => document.removeEventListener('click', listener); @@ -104,48 +114,62 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => { const toggleOpen = useCallback((val: boolean) => { if (controlledOpen === undefined) setOpen(val); onOpenChange?.(val); + if (!val) setPending(EMPTY_PENDING); }, [controlledOpen, onOpenChange]); - const updateTime = useCallback((type: 'h' | 'm' | 's', num: number) => { + /** Build a Date from committed date + pending overrides */ + const buildDate = useCallback((p: PendingTime): Date => { const base = date ? new Date(date) : new Date(0, 0, 0, 0, 0, 0, 0); - if (type === 'h') base.setHours(num); - else if (type === 'm') base.setMinutes(num); - else base.setSeconds(num); + if (p.h !== null) base.setHours(p.h); + if (p.m !== null) base.setMinutes(p.m); + if (p.s !== null) base.setSeconds(p.s); + return base; + }, [date]); - if (value === undefined) setDate(base); - onChange?.(base); - }, [date, value, onChange]); + const updatePending = useCallback((type: 'h' | 'm' | 's', num: number) => { + setPending((prev) => ({ ...prev, [type]: num })); + }, []); + + const commit = useCallback((newDate: Date) => { + if (value === undefined) setDate(newDate); + onChange?.(newDate); + setPending(EMPTY_PENDING); + }, [value, onChange]); const handleClear = (e: React.MouseEvent) => { e.stopPropagation(); if (value === undefined) setDate(null); onChange?.(null); + setPending(EMPTY_PENDING); toggleOpen(false); }; const handleNow = () => { const now = new Date(); - if (value === undefined) setDate(now); - onChange?.(now); + commit(now); toggleOpen(false); }; const handleOk = () => { + if (pending.h !== null || pending.m !== null || pending.s !== null) { + commit(buildDate(pending)); + } toggleOpen(false); }; - // Disabled time calculation + // Disabled time calculation — use pending values when available + const effectiveHour = pending.h ?? date?.getHours() ?? 0; + const effectiveMinute = pending.m ?? date?.getMinutes() ?? 0; + const disabled12 = useMemo(() => disabledTime?.() ?? {}, [disabledTime]); const disabledHours = useMemo(() => disabled12.disabledHours?.() ?? [], [disabled12]); - const currentHour = date?.getHours() ?? 0; const disabledMinutes = useMemo( - () => disabled12.disabledMinutes?.(currentHour) ?? [], - [disabled12, currentHour] + () => disabled12.disabledMinutes?.(effectiveHour) ?? [], + [disabled12, effectiveHour] ); - const currentMinute = date?.getMinutes() ?? 0; const disabledSeconds = useMemo( - () => disabled12.disabledSeconds?.(currentHour, currentMinute) ?? [], - [disabled12, currentHour, currentMinute] + () => disabled12.disabledSeconds?.(effectiveHour, effectiveMinute) ?? [], + [disabled12, effectiveHour, effectiveMinute] ); const hours = generateSteps(24, hourStep); @@ -156,13 +180,17 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => { const filteredMinutes = hideDisabledOptions ? minutes.filter((m) => !disabledMinutes.includes(m)) : minutes; const filteredSeconds = hideDisabledOptions ? seconds.filter((s) => !disabledSeconds.includes(s)) : seconds; - const hasValue = date !== null; - const displayValue = hasValue ? formatTime(date, format, use12Hours) : ''; + const hasPending = pending.h !== null || pending.m !== null || pending.s !== null; + const previewDate = hasPending ? buildDate(pending) : null; + const effectiveDate = previewDate ?? date; + const hasValue = effectiveDate !== null; + const displayValue = hasValue ? formatTime(effectiveDate, format, use12Hours) : ''; const cls = classNames(prefixCls, className, `${prefixCls}_${size}`, { [`${prefixCls}_disabled`]: disabled, [`${prefixCls}_open`]: isOpen, [`${prefixCls}_has-value`]: hasValue, + [`${prefixCls}_pending`]: hasPending, }); const renderOverlay = () => ( @@ -170,30 +198,33 @@ const TimePicker = (props: TimePickerProps): React.ReactElement => {
updateTime('h', h)} + onChange={(h) => updatePending('h', h)} /> {showsMinutes(format) && ( updateTime('m', m)} + onChange={(m) => updatePending('m', m)} /> )} {showsSeconds(format) && ( updateTime('s', s)} + onChange={(s) => updatePending('s', s)} /> )}
diff --git a/packages/tokens/css/base.css b/packages/tokens/css/base.css index 5494ca7c..928c133d 100644 --- a/packages/tokens/css/base.css +++ b/packages/tokens/css/base.css @@ -27,19 +27,26 @@ --ty-color-fill-secondary: #f5f5f5; --ty-color-fill-tertiary: #f0f0f0; --ty-color-success: #52c41a; + --ty-color-success-hover: #73d13d; + --ty-color-success-active: #389e0d; --ty-color-success-bg: #f6ffed; --ty-color-success-border: #b7eb8f; --ty-color-success-text: #49b10e; --ty-color-warning: #ff9800; + --ty-color-warning-hover: #ffad33; + --ty-color-warning-active: #e68a00; --ty-color-warning-bg: #fffbe6; --ty-color-warning-border: #ffe58f; --ty-color-warning-text: #d48806; --ty-color-danger: #f44336; + --ty-color-danger-hover: #ff7875; + --ty-color-danger-active: #cf1322; --ty-color-danger-bg: #fff1f0; --ty-color-danger-border: #ffa39e; --ty-color-danger-text: #cf1322; - --ty-color-danger-hover: #ff7875; --ty-color-info: #1890ff; + --ty-color-info-hover: #40a9ff; + --ty-color-info-active: #096dd9; --ty-color-info-bg: #e6f7ff; --ty-color-info-border: #91d5ff; --ty-color-info-text: #096dd9; @@ -294,19 +301,26 @@ html[data-tiny-theme=dark] { --ty-color-fill-secondary: #2a2a2a; --ty-color-fill-tertiary: #303030; --ty-color-success: #49aa19; + --ty-color-success-hover: #6abe39; + --ty-color-success-active: #3c8c14; --ty-color-success-bg: #162312; --ty-color-success-border: #274916; --ty-color-success-text: #6abe39; --ty-color-warning: #d89614; + --ty-color-warning-hover: #e8b339; + --ty-color-warning-active: #b37a10; --ty-color-warning-bg: #2b2111; --ty-color-warning-border: #594214; --ty-color-warning-text: #e8b339; --ty-color-danger: #d32029; + --ty-color-danger-hover: #e84749; + --ty-color-danger-active: #ab1a20; --ty-color-danger-bg: #2a1215; --ty-color-danger-border: #58181c; --ty-color-danger-text: #e84749; - --ty-color-danger-hover: #e84749; --ty-color-info: #177ddc; + --ty-color-info-hover: #3c9ae8; + --ty-color-info-active: #1268b3; --ty-color-info-bg: #111d2c; --ty-color-info-border: #15395b; --ty-color-info-text: #3c9ae8; @@ -562,19 +576,26 @@ html[data-tiny-theme=dark] { --ty-color-fill-secondary: #2a2a2a; --ty-color-fill-tertiary: #303030; --ty-color-success: #49aa19; + --ty-color-success-hover: #6abe39; + --ty-color-success-active: #3c8c14; --ty-color-success-bg: #162312; --ty-color-success-border: #274916; --ty-color-success-text: #6abe39; --ty-color-warning: #d89614; + --ty-color-warning-hover: #e8b339; + --ty-color-warning-active: #b37a10; --ty-color-warning-bg: #2b2111; --ty-color-warning-border: #594214; --ty-color-warning-text: #e8b339; --ty-color-danger: #d32029; + --ty-color-danger-hover: #e84749; + --ty-color-danger-active: #ab1a20; --ty-color-danger-bg: #2a1215; --ty-color-danger-border: #58181c; --ty-color-danger-text: #e84749; - --ty-color-danger-hover: #e84749; --ty-color-info: #177ddc; + --ty-color-info-hover: #3c9ae8; + --ty-color-info-active: #1268b3; --ty-color-info-bg: #111d2c; --ty-color-info-border: #15395b; --ty-color-info-text: #3c9ae8; diff --git a/packages/tokens/scss/themes/_dark.scss b/packages/tokens/scss/themes/_dark.scss index d217a3c9..2c5f5991 100644 --- a/packages/tokens/scss/themes/_dark.scss +++ b/packages/tokens/scss/themes/_dark.scss @@ -39,25 +39,32 @@ $dark-theme: ( // ---- Success ---- color-success: #49aa19, + color-success-hover: #6abe39, + color-success-active: #3c8c14, color-success-bg: #162312, color-success-border: #274916, color-success-text: #6abe39, // ---- Warning ---- color-warning: #d89614, + color-warning-hover: #e8b339, + color-warning-active: #b37a10, color-warning-bg: #2b2111, color-warning-border: #594214, color-warning-text: #e8b339, // ---- Danger / Error ---- color-danger: #d32029, + color-danger-hover: #e84749, + color-danger-active: #ab1a20, color-danger-bg: #2a1215, color-danger-border: #58181c, color-danger-text: #e84749, - color-danger-hover: #e84749, // ---- Info ---- color-info: #177ddc, + color-info-hover: #3c9ae8, + color-info-active: #1268b3, color-info-bg: #111d2c, color-info-border: #15395b, color-info-text: #3c9ae8, diff --git a/packages/tokens/scss/themes/_light.scss b/packages/tokens/scss/themes/_light.scss index 74a2c310..99f0c763 100644 --- a/packages/tokens/scss/themes/_light.scss +++ b/packages/tokens/scss/themes/_light.scss @@ -39,25 +39,32 @@ $light-theme: ( // ---- Success ---- color-success: #52c41a, + color-success-hover: #73d13d, + color-success-active: #389e0d, color-success-bg: #f6ffed, color-success-border: #b7eb8f, color-success-text: #49b10e, // ---- Warning ---- color-warning: #ff9800, + color-warning-hover: #ffad33, + color-warning-active: #e68a00, color-warning-bg: #fffbe6, color-warning-border: #ffe58f, color-warning-text: #d48806, // ---- Danger / Error ---- color-danger: #f44336, + color-danger-hover: #ff7875, + color-danger-active: #cf1322, color-danger-bg: #fff1f0, color-danger-border: #ffa39e, color-danger-text: #cf1322, - color-danger-hover: #ff7875, // ---- Info ---- color-info: #1890ff, + color-info-hover: #40a9ff, + color-info-active: #096dd9, color-info-bg: #e6f7ff, color-info-border: #91d5ff, color-info-text: #096dd9,