From 94b726e0a95189821d6c0cdc187c6d4ac087bb42 Mon Sep 17 00:00:00 2001 From: Eugene Kotsarev Date: Tue, 3 Dec 2024 16:55:51 +0300 Subject: [PATCH 1/7] feat(vara-ui): upd alerts --- utils/vara-ui/src/assets/images/cross.svg | 2 +- utils/vara-ui/src/assets/images/error.svg | 3 + utils/vara-ui/src/assets/images/info.svg | 3 + utils/vara-ui/src/assets/images/loading.svg | 3 + utils/vara-ui/src/assets/images/success.svg | 3 + utils/vara-ui/src/assets/images/warning.svg | 10 + .../src/components/alert/alert.module.scss | 254 ++++++++++++------ .../src/components/alert/alert.stories.ts | 54 +++- utils/vara-ui/src/components/alert/alert.tsx | 32 ++- utils/vara-ui/src/components/alert/icons.tsx | 23 ++ utils/vara-ui/src/components/alert/index.ts | 7 +- 11 files changed, 296 insertions(+), 98 deletions(-) create mode 100644 utils/vara-ui/src/assets/images/error.svg create mode 100644 utils/vara-ui/src/assets/images/info.svg create mode 100644 utils/vara-ui/src/assets/images/loading.svg create mode 100644 utils/vara-ui/src/assets/images/success.svg create mode 100644 utils/vara-ui/src/assets/images/warning.svg create mode 100644 utils/vara-ui/src/components/alert/icons.tsx diff --git a/utils/vara-ui/src/assets/images/cross.svg b/utils/vara-ui/src/assets/images/cross.svg index f9b89b9883..0430d64411 100644 --- a/utils/vara-ui/src/assets/images/cross.svg +++ b/utils/vara-ui/src/assets/images/cross.svg @@ -1,3 +1,3 @@ - + diff --git a/utils/vara-ui/src/assets/images/error.svg b/utils/vara-ui/src/assets/images/error.svg new file mode 100644 index 0000000000..3a6982052a --- /dev/null +++ b/utils/vara-ui/src/assets/images/error.svg @@ -0,0 +1,3 @@ + + + diff --git a/utils/vara-ui/src/assets/images/info.svg b/utils/vara-ui/src/assets/images/info.svg new file mode 100644 index 0000000000..b29c45227d --- /dev/null +++ b/utils/vara-ui/src/assets/images/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/utils/vara-ui/src/assets/images/loading.svg b/utils/vara-ui/src/assets/images/loading.svg new file mode 100644 index 0000000000..1e900d9985 --- /dev/null +++ b/utils/vara-ui/src/assets/images/loading.svg @@ -0,0 +1,3 @@ + + + diff --git a/utils/vara-ui/src/assets/images/success.svg b/utils/vara-ui/src/assets/images/success.svg new file mode 100644 index 0000000000..c3edc12365 --- /dev/null +++ b/utils/vara-ui/src/assets/images/success.svg @@ -0,0 +1,3 @@ + + + diff --git a/utils/vara-ui/src/assets/images/warning.svg b/utils/vara-ui/src/assets/images/warning.svg new file mode 100644 index 0000000000..be5b64d491 --- /dev/null +++ b/utils/vara-ui/src/assets/images/warning.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index 7807aec7db..b38447a2fd 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -1,3 +1,9 @@ +@keyframes rotating { + to { + transform: rotate(360deg); + } +} + .root { width: 480px; position: fixed; @@ -6,131 +12,225 @@ z-index: 20; } -.alert { - padding: 24px; +// Base styles +.wrapper { + position: relative; + display: flex; + flex-direction: column; background-color: #fff; - border-radius: 4px; - box-shadow: 0px 10px 20px 0px #5b5b5b26; - - > * + * { - margin-top: 8px; - } -} - -.notification { - padding: 16px; - border-radius: 8px; - - .body { - padding-left: 32px; - } - - .header::before { - margin-right: 12px; - } + box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15); + user-select: none; } .header { display: flex; align-items: center; + gap: 8px; +} +.title { font-size: 16px; - font-weight: 500; - line-height: 19px; + font-weight: 600; + line-height: 1.5; letter-spacing: 0; text-transform: capitalize; +} + +.icon { + display: flex; + align-items: center; + align-self: center; - &::before { - content: ''; + svg { width: 20px; height: 20px; - margin-right: 8px; - background-size: cover; - background-repeat: no-repeat; } } -.success { - color: #0ed3a3; +.close { + position: absolute; + top: 18px; + right: 18px; - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6453 8.03281C17.3508 7.725 17.0461 7.40781 16.9312 7.12891C16.825 6.87344 16.8187 6.45 16.8125 6.03984C16.8008 5.27734 16.7883 4.41328 16.1875 3.8125C15.5867 3.21172 14.7227 3.19922 13.9602 3.1875C13.55 3.18125 13.1266 3.175 12.8711 3.06875C12.593 2.95391 12.275 2.64922 11.9672 2.35469C11.4281 1.83672 10.8156 1.25 10 1.25C9.18437 1.25 8.57266 1.83672 8.03281 2.35469C7.725 2.64922 7.40781 2.95391 7.12891 3.06875C6.875 3.175 6.45 3.18125 6.03984 3.1875C5.27734 3.19922 4.41328 3.21172 3.8125 3.8125C3.21172 4.41328 3.20312 5.27734 3.1875 6.03984C3.18125 6.45 3.175 6.87344 3.06875 7.12891C2.95391 7.40703 2.64922 7.725 2.35469 8.03281C1.83672 8.57188 1.25 9.18437 1.25 10C1.25 10.8156 1.83672 11.4273 2.35469 11.9672C2.64922 12.275 2.95391 12.5922 3.06875 12.8711C3.175 13.1266 3.18125 13.55 3.1875 13.9602C3.19922 14.7227 3.21172 15.5867 3.8125 16.1875C4.41328 16.7883 5.27734 16.8008 6.03984 16.8125C6.45 16.8187 6.87344 16.825 7.12891 16.9312C7.40703 17.0461 7.725 17.3508 8.03281 17.6453C8.57188 18.1633 9.18437 18.75 10 18.75C10.8156 18.75 11.4273 18.1633 11.9672 17.6453C12.275 17.3508 12.5922 17.0461 12.8711 16.9312C13.1266 16.825 13.55 16.8187 13.9602 16.8125C14.7227 16.8008 15.5867 16.7883 16.1875 16.1875C16.7883 15.5867 16.8008 14.7227 16.8125 13.9602C16.8187 13.55 16.825 13.1266 16.9312 12.8711C17.0461 12.593 17.3508 12.275 17.6453 11.9672C18.1633 11.4281 18.75 10.8156 18.75 10C18.75 9.18437 18.1633 8.57266 17.6453 8.03281ZM13.5672 8.56719L9.19219 12.9422C9.13414 13.0003 9.06521 13.0464 8.98934 13.0779C8.91346 13.1093 8.83213 13.1255 8.75 13.1255C8.66787 13.1255 8.58654 13.1093 8.51066 13.0779C8.43479 13.0464 8.36586 13.0003 8.30781 12.9422L6.43281 11.0672C6.31554 10.9499 6.24965 10.7909 6.24965 10.625C6.24965 10.4591 6.31554 10.3001 6.43281 10.1828C6.55009 10.0655 6.70915 9.99965 6.875 9.99965C7.04085 9.99965 7.19991 10.0655 7.31719 10.1828L8.75 11.6164L12.6828 7.68281C12.7409 7.62474 12.8098 7.57868 12.8857 7.54725C12.9616 7.51583 13.0429 7.49965 13.125 7.49965C13.2071 7.49965 13.2884 7.51583 13.3643 7.54725C13.4402 7.57868 13.5091 7.62474 13.5672 7.68281C13.6253 7.74088 13.6713 7.80982 13.7027 7.88569C13.7342 7.96156 13.7503 8.04288 13.7503 8.125C13.7503 8.20712 13.7342 8.28844 13.7027 8.36431C13.6713 8.44018 13.6253 8.50912 13.5672 8.56719Z' fill='%230ED3A3'/%3E%3C/svg%3E"); + display: inline-flex; + align-self: flex-start; + height: 20px; + padding: 0; + + background: none; + border: none; + cursor: pointer; + transition: opacity 250ms ease; + + &:hover, &:focus-visible { + opacity: 0.6; } -} -.error { - color: #ff0101; + &:active { + opacity: 0.4; + } - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3851 9.11873L10.8812 1.61404C10.647 1.38123 10.3302 1.25055 9.99999 1.25055C9.66976 1.25055 9.35294 1.38123 9.11874 1.61404L1.61874 9.11873C1.38593 9.35293 1.25525 9.66975 1.25525 9.99998C1.25525 10.3302 1.38593 10.647 1.61874 10.8812L9.12265 18.3859C9.35685 18.6187 9.67367 18.7494 10.0039 18.7494C10.3341 18.7494 10.6509 18.6187 10.8851 18.3859L18.3891 10.8812C18.6219 10.647 18.7525 10.3302 18.7525 9.99998C18.7525 9.66975 18.6219 9.35293 18.3891 9.11873H18.3851ZM9.37499 6.24998C9.37499 6.08422 9.44084 5.92525 9.55805 5.80804C9.67526 5.69083 9.83423 5.62498 9.99999 5.62498C10.1658 5.62498 10.3247 5.69083 10.4419 5.80804C10.5591 5.92525 10.625 6.08422 10.625 6.24998V10.625C10.625 10.7907 10.5591 10.9497 10.4419 11.0669C10.3247 11.1841 10.1658 11.25 9.99999 11.25C9.83423 11.25 9.67526 11.1841 9.55805 11.0669C9.44084 10.9497 9.37499 10.7907 9.37499 10.625V6.24998ZM9.99999 14.375C9.81457 14.375 9.63332 14.32 9.47914 14.217C9.32497 14.114 9.20481 13.9675 9.13385 13.7962C9.0629 13.6249 9.04433 13.4364 9.0805 13.2546C9.11668 13.0727 9.20597 12.9057 9.33708 12.7746C9.46819 12.6435 9.63524 12.5542 9.81709 12.518C9.99895 12.4818 10.1875 12.5004 10.3588 12.5713C10.5301 12.6423 10.6765 12.7625 10.7795 12.9166C10.8825 13.0708 10.9375 13.2521 10.9375 13.4375C10.9375 13.6861 10.8387 13.9246 10.6629 14.1004C10.4871 14.2762 10.2486 14.375 9.99999 14.375Z' fill='%23FF3231'/%3E%3C/svg%3E"); + svg { + width: 20px; + height: 20px; } } -.info { - color: #000; +.body { + padding-top: 4px; + padding-bottom: 6px; - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.99697 18.3312C14.5999 18.3312 18.3313 14.5998 18.3313 9.99685C18.3313 5.3939 14.5999 1.66248 9.99697 1.66248C5.39402 1.66248 1.6626 5.3939 1.6626 9.99685C1.6626 14.5998 5.39402 18.3312 9.99697 18.3312ZM9.9939 5.88123C9.56242 5.88123 9.21265 6.231 9.21265 6.66248C9.21265 7.09395 9.56242 7.44373 9.9939 7.44373C10.4254 7.44373 10.7752 7.09395 10.7752 6.66248C10.7752 6.231 10.4254 5.88123 9.9939 5.88123ZM10.7751 9.99581C10.7751 9.56434 10.4254 9.21456 9.9939 9.21456C9.56242 9.21456 9.21265 9.56434 9.21265 9.99581V13.3291C9.21265 13.7606 9.56242 14.1104 9.9939 14.1104C10.4254 14.1104 10.7751 13.7606 10.7751 13.3291V9.99581Z' fill='black'/%3E%3C/svg%3E"); - } + color: #525251; + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0; + + overflow: hidden; + text-overflow: ellipsis; } -.notification-warning { - color: #000; +.footer { + color: #9babb0; + font-size: 14px; + font-weight: 400; + line-height: 20px; +} - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11222_5954)'%3E%3Cpath d='M10.0001 6.66669V10M10.0001 13.3334H10.0084M18.3334 10C18.3334 14.6024 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10Z' stroke='%23FF3231' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11222_5954'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +// Types +.success { + .header { + color: #0dd3a2; } } -.notification-info { - color: #000; +.error { + .header { + color: #ff3333; + } +} - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11222_5950)'%3E%3Cpath d='M10.0001 13.3334V10M10.0001 6.66669H10.0084M18.3334 10C18.3334 14.6024 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10Z' stroke='%230ED3A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11222_5950'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +.info { + .header { + color: #000; } } .loading { - color: #3975e9; + .header { + color: #3a74e9; + } - &::before { - background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2.5c3.393 0 6.474 1.361 8.729 3.564l1.418-1.418a.498.498 0 0 1 .834.216l2 7a.5.5 0 0 1-.618.618l-7-1.999a.5.5 0 0 1-.216-.835L21.6 8.192A9.446 9.446 0 0 0 15 5.5c-5.239 0-9.5 4.261-9.5 9.5 0 5.238 4.261 9.5 9.5 9.5 5.238 0 9.5-4.262 9.5-9.5 0-.248-.018-.492-.038-.736l3.035.875C27.422 21.968 21.846 27.5 15 27.5 8.107 27.5 2.5 21.892 2.5 15 2.5 8.107 8.107 2.5 15 2.5Z' fill='%233975E9'/%3E%3C/svg%3E"); + .icon svg { animation: rotating 1s linear infinite; } } -.button { - align-self: flex-start; - margin-left: auto; - width: 12.5px; - height: 12.5px; +// Variants +.alert { + gap: 8px; + padding: 24px 48px 24px 24px; + border-radius: 4px; } -.body { - padding-right: 24px; +.notification { + gap: 4px; + padding: 16px 48px 16px 16px; + border-radius: 8px; - font-size: 14px; - font-weight: 400; - line-height: 20px; - letter-spacing: 0; + .header { + gap: 12px; + } + + .title { + font-size: 17px; + font-weight: 700; + line-height: 1.4; + } - overflow: hidden; - text-overflow: ellipsis; -} + .body, + .footer { + padding: 0 0 0 32px; + } -.footer { - color: #9cacb1; - font-size: 14px; - font-weight: 400; - line-height: 20px; + .close { + top: 16px; + right: 16px; + } + + &.success, + &.error, + &.info, + &.loading { + .title { + color: #000; + } + } } -@keyframes rotating { - from { - transform: rotate(0deg); +// Theming +:global(.dark-theme) { + .wrapper { + background-color: #272b2f; } - to { - transform: rotate(360deg); + .body { + color: #ffffff; + } + + .footer { + color: rgba(245, 245, 245, 0.8); + } + + // Types + .success { + box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6); + + .header { + color: #00ffc4; + } + } + + .error { + box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6); + + .header { + color: rgb(255, 56, 86); + } + } + + .info { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); + + .header { + color: #ffffff; + } + } + + .loading { + box-shadow: 0 0 0 1px rgba(58, 172, 233, 0.6); + + .header { + color: rgba(58, 172, 233, 1); + } + } + + // Variants + .notification { + &.success { + box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6); + + .header { + color: #ffffff; + } + } + + &.error { + box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6); + + .header { + color: #ffffff; + } + } } } diff --git a/utils/vara-ui/src/components/alert/alert.stories.ts b/utils/vara-ui/src/components/alert/alert.stories.ts index a19b45067b..c542435135 100644 --- a/utils/vara-ui/src/components/alert/alert.stories.ts +++ b/utils/vara-ui/src/components/alert/alert.stories.ts @@ -14,7 +14,7 @@ const Success: Story = { alert: { id: '0', content: - 'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.', + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!', options: { type: 'success', isClosed: true }, }, }, @@ -25,7 +25,7 @@ const Error: Story = { alert: { id: '0', content: - 'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.', + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!', options: { type: 'error', isClosed: true }, }, }, @@ -36,7 +36,7 @@ const Loading: Story = { alert: { id: '0', content: - 'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.', + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!', options: { type: 'loading', isClosed: true }, }, }, @@ -47,7 +47,7 @@ const Info: Story = { alert: { id: '0', content: - 'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.', + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!', options: { type: 'info', isClosed: true }, }, }, @@ -58,7 +58,7 @@ const WithFooter: Story = { alert: { id: '0', content: - 'Backups of this machine are stopped. There has no connection with machine. Please restore the connection with the machine to resume backups restore the connection with the machine.', + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, commodi dolore eaque eos est exercitationem inventore laboriosam modi perferendis voluptas!', footer: 'YYYY-MM-DD / 00:00:00', options: { type: 'info', isClosed: true }, }, @@ -85,5 +85,47 @@ const NotificationInfo: Story = { }, }; +const NotificationSuccess: Story = { + args: { + alert: { + id: '0', + content: 'Text', + options: { type: 'success', variant: 'notification', isClosed: true, title: 'Heading' }, + }, + }, +}; + +const NotificationLoading: Story = { + args: { + alert: { + id: '0', + content: 'Text', + options: { type: 'loading', variant: 'notification', isClosed: true, title: 'Heading' }, + }, + }, +}; + +const NotificationWithFooter: Story = { + args: { + alert: { + id: '0', + content: 'Text', + footer: 'YYYY-MM-DD / 00:00:00', + options: { type: 'info', variant: 'notification', isClosed: true, title: 'Heading' }, + }, + }, +}; + export default meta; -export { Success, Error, Loading, Info, WithFooter, NotificationError, NotificationInfo }; +export { + Success, + Error, + Loading, + Info, + WithFooter, + NotificationSuccess, + NotificationError, + NotificationLoading, + NotificationInfo, + NotificationWithFooter, +}; diff --git a/utils/vara-ui/src/components/alert/alert.tsx b/utils/vara-ui/src/components/alert/alert.tsx index 4664ba686b..6c8221546a 100644 --- a/utils/vara-ui/src/components/alert/alert.tsx +++ b/utils/vara-ui/src/components/alert/alert.tsx @@ -1,16 +1,21 @@ import { CSSProperties, ReactNode } from 'react'; import cx from 'clsx'; -import CrossSVG from '../../assets/images/cross.svg?react'; -import { Button } from '../button'; import styles from './alert.module.scss'; +import CrossSVG from '../../assets/images/cross.svg?react'; +import { alertIcons } from './icons.tsx'; + +type IAlertVariants = 'alert' | 'notification'; +type IAlertTypes = 'info' | 'error' | 'loading' | 'success'; +type IAlertIcons = Record>; type Options = { - type: 'info' | 'error' | 'loading' | 'success'; - variant?: 'alert' | 'notification'; + type: IAlertTypes; + variant?: IAlertVariants; style?: CSSProperties; title?: string; timeout?: number; isClosed?: boolean; + icons?: IAlertIcons; }; type AlertType = { @@ -27,15 +32,20 @@ type Props = { function Alert({ alert, close }: Props) { const { content, options, footer } = alert; - const { type, title, style, isClosed, variant } = options; - const isNotification = variant === 'notification'; + const { variant = 'alert', type = 'info', title, style, isClosed, icons = alertIcons } = options; return ( -
-
- {title || type} +
+
+ {type &&
{icons[variant][type]}
} + +

{title || type}

- {isClosed && + )}
{content}
@@ -46,4 +56,4 @@ function Alert({ alert, close }: Props) { } export { Alert }; -export type { Props as AlertProps }; +export type { Props as AlertProps, IAlertVariants, IAlertTypes, IAlertIcons }; diff --git a/utils/vara-ui/src/components/alert/icons.tsx b/utils/vara-ui/src/components/alert/icons.tsx new file mode 100644 index 0000000000..0b6715a93e --- /dev/null +++ b/utils/vara-ui/src/components/alert/icons.tsx @@ -0,0 +1,23 @@ +import type { IAlertIcons } from './alert.tsx'; +import SuccessIcon from '../../assets/images/success.svg?react'; +import ErrorIcon from '../../assets/images/error.svg?react'; +import InfoIcon from '../../assets/images/info.svg?react'; +import LoadingIcon from '../../assets/images/loading.svg?react'; +import WarningIcon from '../../assets/images/warning.svg?react'; + +const alertIcons: IAlertIcons = { + alert: { + success: , + error: , + info: , + loading: , + }, + notification: { + success: , + error: , + info: , + loading: , + }, +}; + +export { alertIcons }; diff --git a/utils/vara-ui/src/components/alert/index.ts b/utils/vara-ui/src/components/alert/index.ts index 004e463d85..74dc71d2a3 100644 --- a/utils/vara-ui/src/components/alert/index.ts +++ b/utils/vara-ui/src/components/alert/index.ts @@ -1,5 +1,6 @@ -import { Alert, AlertProps } from './alert'; +import { Alert, AlertProps, IAlertTypes, IAlertIcons, IAlertVariants } from './alert'; import alertStyles from './alert.module.scss'; +import { alertIcons } from './icons.tsx'; -export { Alert, alertStyles }; -export type { AlertProps }; +export { Alert, alertStyles, alertIcons }; +export type { AlertProps, IAlertTypes, IAlertIcons, IAlertVariants }; From 9c9b7a44c8e23fa7688acfe584e213e1ed64e2ef Mon Sep 17 00:00:00 2001 From: Eugene Kotsarev Date: Tue, 3 Dec 2024 23:06:02 +0300 Subject: [PATCH 2/7] style(alert): upd dark theme --- .../src/components/alert/alert.module.scss | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index b38447a2fd..df0850b78e 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -57,6 +57,7 @@ height: 20px; padding: 0; + color: #000; background: none; border: none; cursor: pointer; @@ -141,7 +142,7 @@ .header { gap: 12px; } - + .title { font-size: 17px; font-weight: 700; @@ -174,6 +175,7 @@ background-color: #272b2f; } + .close, .body { color: #ffffff; } @@ -217,19 +219,12 @@ // Variants .notification { - &.success { - box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6); - - .header { - color: #ffffff; - } - } - - &.error { - box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6); - - .header { - color: #ffffff; + &.success, + &.error, + &.info, + &.loading { + .title { + color: #fff; } } } From bb18d63a29c370dec5ea951e11edd6eb32b717eb Mon Sep 17 00:00:00 2001 From: Eugene Kotsarev Date: Mon, 9 Dec 2024 12:12:23 +0300 Subject: [PATCH 3/7] fixes --- .../src/components/alert/alert.module.scss | 20 +++---------------- utils/vara-ui/src/components/alert/alert.tsx | 16 +++++++-------- utils/vara-ui/src/components/alert/icons.tsx | 7 +++++-- utils/vara-ui/src/components/alert/index.ts | 4 ++-- 4 files changed, 17 insertions(+), 30 deletions(-) diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index df0850b78e..97aa7fb9c7 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -19,7 +19,6 @@ flex-direction: column; background-color: #fff; box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15); - user-select: none; } .header { @@ -147,6 +146,7 @@ font-size: 17px; font-weight: 700; line-height: 1.4; + color: #000000; } .body, @@ -158,15 +158,6 @@ top: 16px; right: 16px; } - - &.success, - &.error, - &.info, - &.loading { - .title { - color: #000; - } - } } // Theming @@ -219,13 +210,8 @@ // Variants .notification { - &.success, - &.error, - &.info, - &.loading { - .title { - color: #fff; - } + .title { + color: #fff; } } } diff --git a/utils/vara-ui/src/components/alert/alert.tsx b/utils/vara-ui/src/components/alert/alert.tsx index 6c8221546a..6ad903e0da 100644 --- a/utils/vara-ui/src/components/alert/alert.tsx +++ b/utils/vara-ui/src/components/alert/alert.tsx @@ -4,18 +4,16 @@ import styles from './alert.module.scss'; import CrossSVG from '../../assets/images/cross.svg?react'; import { alertIcons } from './icons.tsx'; -type IAlertVariants = 'alert' | 'notification'; -type IAlertTypes = 'info' | 'error' | 'loading' | 'success'; -type IAlertIcons = Record>; +type AlertVariants = 'alert' | 'notification'; +type AlertTypes = 'info' | 'error' | 'loading' | 'success'; type Options = { - type: IAlertTypes; - variant?: IAlertVariants; + type: AlertTypes; + variant?: AlertVariants; style?: CSSProperties; title?: string; timeout?: number; isClosed?: boolean; - icons?: IAlertIcons; }; type AlertType = { @@ -32,12 +30,12 @@ type Props = { function Alert({ alert, close }: Props) { const { content, options, footer } = alert; - const { variant = 'alert', type = 'info', title, style, isClosed, icons = alertIcons } = options; + const { variant = 'alert', type = 'info', title, style, isClosed } = options; return (
- {type &&
{icons[variant][type]}
} + {type &&
{alertIcons[variant][type]}
}

{title || type}

@@ -56,4 +54,4 @@ function Alert({ alert, close }: Props) { } export { Alert }; -export type { Props as AlertProps, IAlertVariants, IAlertTypes, IAlertIcons }; +export type { Props as AlertProps, AlertVariants, AlertTypes }; diff --git a/utils/vara-ui/src/components/alert/icons.tsx b/utils/vara-ui/src/components/alert/icons.tsx index 0b6715a93e..4f69913b21 100644 --- a/utils/vara-ui/src/components/alert/icons.tsx +++ b/utils/vara-ui/src/components/alert/icons.tsx @@ -1,11 +1,14 @@ -import type { IAlertIcons } from './alert.tsx'; +import { ReactNode } from 'react'; import SuccessIcon from '../../assets/images/success.svg?react'; import ErrorIcon from '../../assets/images/error.svg?react'; import InfoIcon from '../../assets/images/info.svg?react'; import LoadingIcon from '../../assets/images/loading.svg?react'; import WarningIcon from '../../assets/images/warning.svg?react'; +import type { AlertTypes, AlertVariants } from './alert.tsx'; -const alertIcons: IAlertIcons = { +type AlertIcons = Record>; + +const alertIcons: AlertIcons = { alert: { success: , error: , diff --git a/utils/vara-ui/src/components/alert/index.ts b/utils/vara-ui/src/components/alert/index.ts index 74dc71d2a3..1a9f546e64 100644 --- a/utils/vara-ui/src/components/alert/index.ts +++ b/utils/vara-ui/src/components/alert/index.ts @@ -1,6 +1,6 @@ -import { Alert, AlertProps, IAlertTypes, IAlertIcons, IAlertVariants } from './alert'; +import { Alert, AlertProps, AlertTypes, AlertVariants } from './alert'; import alertStyles from './alert.module.scss'; import { alertIcons } from './icons.tsx'; export { Alert, alertStyles, alertIcons }; -export type { AlertProps, IAlertTypes, IAlertIcons, IAlertVariants }; +export type { AlertProps, AlertTypes, AlertVariants }; From eb6cf593ad9997360db6a97dcddf48a003039987 Mon Sep 17 00:00:00 2001 From: Nikita Yutanov Date: Tue, 7 Jan 2025 15:04:18 +0300 Subject: [PATCH 4/7] refactor layout --- .../src/components/alert/alert.module.scss | 9 ++-- utils/vara-ui/src/components/alert/alert.tsx | 42 +++++++++++-------- .../alert/assets}/info.svg | 0 .../alert/assets}/loading.svg | 0 .../alert/assets}/success.svg | 0 .../alert/assets/warning-circle.svg} | 0 .../alert/assets/warning.svg} | 0 utils/vara-ui/src/components/alert/icons.tsx | 26 ------------ 8 files changed, 29 insertions(+), 48 deletions(-) rename utils/vara-ui/src/{assets/images => components/alert/assets}/info.svg (100%) rename utils/vara-ui/src/{assets/images => components/alert/assets}/loading.svg (100%) rename utils/vara-ui/src/{assets/images => components/alert/assets}/success.svg (100%) rename utils/vara-ui/src/{assets/images/warning.svg => components/alert/assets/warning-circle.svg} (100%) rename utils/vara-ui/src/{assets/images/error.svg => components/alert/assets/warning.svg} (100%) delete mode 100644 utils/vara-ui/src/components/alert/icons.tsx diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index 97aa7fb9c7..2308ef093b 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -46,7 +46,7 @@ } } -.close { +.button { position: absolute; top: 18px; right: 18px; @@ -62,7 +62,8 @@ cursor: pointer; transition: opacity 250ms ease; - &:hover, &:focus-visible { + &:hover, + &:focus-visible { opacity: 0.6; } @@ -154,7 +155,7 @@ padding: 0 0 0 32px; } - .close { + .button { top: 16px; right: 16px; } @@ -166,7 +167,7 @@ background-color: #272b2f; } - .close, + .button, .body { color: #ffffff; } diff --git a/utils/vara-ui/src/components/alert/alert.tsx b/utils/vara-ui/src/components/alert/alert.tsx index 6ad903e0da..8ed8bb5189 100644 --- a/utils/vara-ui/src/components/alert/alert.tsx +++ b/utils/vara-ui/src/components/alert/alert.tsx @@ -1,15 +1,18 @@ import { CSSProperties, ReactNode } from 'react'; import cx from 'clsx'; -import styles from './alert.module.scss'; -import CrossSVG from '../../assets/images/cross.svg?react'; -import { alertIcons } from './icons.tsx'; -type AlertVariants = 'alert' | 'notification'; -type AlertTypes = 'info' | 'error' | 'loading' | 'success'; +import CrossSVG from '../../assets/images/cross.svg?react'; +import { Button } from '../button'; +import SuccessSVG from './assets/success.svg?react'; +import WarningSVG from './assets/warning.svg?react'; +import InfoSVG from './assets/info.svg?react'; +import LoadingSVG from './assets/loading.svg?react'; +import WarningCircleSVG from './assets/warning-circle.svg'; +import styles from './alert.module.scss'; type Options = { - type: AlertTypes; - variant?: AlertVariants; + type: 'info' | 'error' | 'loading' | 'success'; + variant?: 'alert' | 'notification'; style?: CSSProperties; title?: string; timeout?: number; @@ -19,8 +22,8 @@ type Options = { type AlertType = { id: string; content: ReactNode; - footer?: ReactNode; options: Options; + footer?: ReactNode; }; type Props = { @@ -28,22 +31,25 @@ type Props = { close: () => void; }; +const ICONS = { + success: SuccessSVG, + error: WarningSVG, + info: InfoSVG, + loading: LoadingSVG, +} as const; + function Alert({ alert, close }: Props) { const { content, options, footer } = alert; - const { variant = 'alert', type = 'info', title, style, isClosed } = options; + const { variant = 'alert', type, title, style, isClosed } = options; + const SVG = variant === 'alert' || type === 'loading' ? ICONS[type] : WarningCircleSVG; return (
-
- {type &&
{alertIcons[variant][type]}
} - +
+

{title || type}

- {isClosed && ( - - )} + {isClosed &&
{content}
@@ -54,4 +60,4 @@ function Alert({ alert, close }: Props) { } export { Alert }; -export type { Props as AlertProps, AlertVariants, AlertTypes }; +export type { Props as AlertProps }; diff --git a/utils/vara-ui/src/assets/images/info.svg b/utils/vara-ui/src/components/alert/assets/info.svg similarity index 100% rename from utils/vara-ui/src/assets/images/info.svg rename to utils/vara-ui/src/components/alert/assets/info.svg diff --git a/utils/vara-ui/src/assets/images/loading.svg b/utils/vara-ui/src/components/alert/assets/loading.svg similarity index 100% rename from utils/vara-ui/src/assets/images/loading.svg rename to utils/vara-ui/src/components/alert/assets/loading.svg diff --git a/utils/vara-ui/src/assets/images/success.svg b/utils/vara-ui/src/components/alert/assets/success.svg similarity index 100% rename from utils/vara-ui/src/assets/images/success.svg rename to utils/vara-ui/src/components/alert/assets/success.svg diff --git a/utils/vara-ui/src/assets/images/warning.svg b/utils/vara-ui/src/components/alert/assets/warning-circle.svg similarity index 100% rename from utils/vara-ui/src/assets/images/warning.svg rename to utils/vara-ui/src/components/alert/assets/warning-circle.svg diff --git a/utils/vara-ui/src/assets/images/error.svg b/utils/vara-ui/src/components/alert/assets/warning.svg similarity index 100% rename from utils/vara-ui/src/assets/images/error.svg rename to utils/vara-ui/src/components/alert/assets/warning.svg diff --git a/utils/vara-ui/src/components/alert/icons.tsx b/utils/vara-ui/src/components/alert/icons.tsx deleted file mode 100644 index 4f69913b21..0000000000 --- a/utils/vara-ui/src/components/alert/icons.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { ReactNode } from 'react'; -import SuccessIcon from '../../assets/images/success.svg?react'; -import ErrorIcon from '../../assets/images/error.svg?react'; -import InfoIcon from '../../assets/images/info.svg?react'; -import LoadingIcon from '../../assets/images/loading.svg?react'; -import WarningIcon from '../../assets/images/warning.svg?react'; -import type { AlertTypes, AlertVariants } from './alert.tsx'; - -type AlertIcons = Record>; - -const alertIcons: AlertIcons = { - alert: { - success: , - error: , - info: , - loading: , - }, - notification: { - success: , - error: , - info: , - loading: , - }, -}; - -export { alertIcons }; From 879d9eaa317c1bd0791af0959d21b21d80a7efec Mon Sep 17 00:00:00 2001 From: Nikita Yutanov Date: Tue, 7 Jan 2025 15:54:01 +0300 Subject: [PATCH 5/7] refactor dark mode styles --- .../src/components/alert/alert.module.scss | 117 +++++++++--------- utils/vara-ui/src/components/alert/alert.tsx | 4 +- utils/vara-ui/src/utils.scss | 5 + 3 files changed, 63 insertions(+), 63 deletions(-) create mode 100644 utils/vara-ui/src/utils.scss diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index 2308ef093b..4bed07f698 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -1,3 +1,5 @@ +@use '../../utils' as *; + @keyframes rotating { to { transform: rotate(360deg); @@ -12,13 +14,16 @@ z-index: 20; } -// Base styles -.wrapper { +.container { position: relative; display: flex; flex-direction: column; background-color: #fff; box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15); + + @include darkMode() { + background-color: #272b2f; + } } .header { @@ -62,6 +67,10 @@ cursor: pointer; transition: opacity 250ms ease; + @include darkMode() { + color: #fff; + } + &:hover, &:focus-visible { opacity: 0.6; @@ -89,6 +98,10 @@ overflow: hidden; text-overflow: ellipsis; + + @include darkMode() { + color: #fff; + } } .footer { @@ -96,25 +109,52 @@ font-size: 14px; font-weight: 400; line-height: 20px; + + @include darkMode() { + color: rgba(245, 245, 245, 0.8); + } } -// Types .success { .header { color: #0dd3a2; } + + @include darkMode() { + box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6); + + .header { + color: #00ffc4; + } + } } .error { .header { color: #ff3333; } + + @include darkMode() { + box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6); + + .header { + color: rgb(255, 56, 86); + } + } } .info { .header { color: #000; } + + @include darkMode() { + box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); + + .header { + color: #ffffff; + } + } } .loading { @@ -122,12 +162,19 @@ color: #3a74e9; } - .icon svg { + .icon { animation: rotating 1s linear infinite; } + + @include darkMode() { + box-shadow: 0 0 0 1px rgba(58, 172, 233, 0.6); + + .header { + color: rgba(58, 172, 233, 1); + } + } } -// Variants .alert { gap: 8px; padding: 24px 48px 24px 24px; @@ -148,6 +195,10 @@ font-weight: 700; line-height: 1.4; color: #000000; + + @include darkMode() { + color: #fff; + } } .body, @@ -160,59 +211,3 @@ right: 16px; } } - -// Theming -:global(.dark-theme) { - .wrapper { - background-color: #272b2f; - } - - .button, - .body { - color: #ffffff; - } - - .footer { - color: rgba(245, 245, 245, 0.8); - } - - // Types - .success { - box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6); - - .header { - color: #00ffc4; - } - } - - .error { - box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6); - - .header { - color: rgb(255, 56, 86); - } - } - - .info { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); - - .header { - color: #ffffff; - } - } - - .loading { - box-shadow: 0 0 0 1px rgba(58, 172, 233, 0.6); - - .header { - color: rgba(58, 172, 233, 1); - } - } - - // Variants - .notification { - .title { - color: #fff; - } - } -} diff --git a/utils/vara-ui/src/components/alert/alert.tsx b/utils/vara-ui/src/components/alert/alert.tsx index 8ed8bb5189..04d06d684b 100644 --- a/utils/vara-ui/src/components/alert/alert.tsx +++ b/utils/vara-ui/src/components/alert/alert.tsx @@ -7,7 +7,7 @@ import SuccessSVG from './assets/success.svg?react'; import WarningSVG from './assets/warning.svg?react'; import InfoSVG from './assets/info.svg?react'; import LoadingSVG from './assets/loading.svg?react'; -import WarningCircleSVG from './assets/warning-circle.svg'; +import WarningCircleSVG from './assets/warning-circle.svg?react'; import styles from './alert.module.scss'; type Options = { @@ -44,7 +44,7 @@ function Alert({ alert, close }: Props) { const SVG = variant === 'alert' || type === 'loading' ? ICONS[type] : WarningCircleSVG; return ( -
+

{title || type}

diff --git a/utils/vara-ui/src/utils.scss b/utils/vara-ui/src/utils.scss new file mode 100644 index 0000000000..4002a70426 --- /dev/null +++ b/utils/vara-ui/src/utils.scss @@ -0,0 +1,5 @@ +@mixin darkMode { + :global(.dark-theme) & { + @content; + } +} From b2a52b2ed6c72b22623937cdc62c51a95852876e Mon Sep 17 00:00:00 2001 From: Nikita Yutanov Date: Tue, 7 Jan 2025 16:31:13 +0300 Subject: [PATCH 6/7] refactor styles --- .../src/components/alert/alert.module.scss | 140 ++++++++---------- 1 file changed, 58 insertions(+), 82 deletions(-) diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index 4bed07f698..e67cfe45de 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -15,9 +15,9 @@ } .container { - position: relative; display: flex; flex-direction: column; + background-color: #fff; box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15); @@ -29,57 +29,21 @@ .header { display: flex; align-items: center; - gap: 8px; } .title { - font-size: 16px; - font-weight: 600; - line-height: 1.5; - letter-spacing: 0; text-transform: capitalize; } -.icon { - display: flex; - align-items: center; - align-self: center; - - svg { - width: 20px; - height: 20px; - } -} - .button { - position: absolute; - top: 18px; - right: 18px; - - display: inline-flex; - align-self: flex-start; - height: 20px; - padding: 0; + margin-left: auto; color: #000; - background: none; - border: none; - cursor: pointer; - transition: opacity 250ms ease; @include darkMode() { color: #fff; } - &:hover, - &:focus-visible { - opacity: 0.6; - } - - &:active { - opacity: 0.4; - } - svg { width: 20px; height: 20px; @@ -87,14 +51,7 @@ } .body { - padding-top: 4px; - padding-bottom: 6px; - color: #525251; - font-size: 14px; - font-weight: 400; - line-height: 20px; - letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; @@ -115,6 +72,62 @@ } } +.alert { + gap: 8px; + padding: 24px 48px 24px 24px; + border-radius: 4px; + + .header { + gap: 8px; + } + + .title { + font-size: 16px; + font-weight: 600; + line-height: 1.5; + } + + .body { + padding: 4px 0 6px; + + font-size: 14px; + font-weight: 400; + line-height: 1.4; + } +} + +.notification { + gap: 4px; + padding: 16px 48px 16px 16px; + border-radius: 8px; + + .header { + gap: 12px; + } + + .title { + font-size: 17px; + font-weight: 700; + line-height: 1.4; + color: #000; + + @include darkMode() { + color: #fff; + } + } + + .body, + .footer { + padding-left: 28px; + } + + .body { + font-size: 16px; + font-weight: 400; + line-height: 1.4; + } +} + .success { .header { color: #0dd3a2; @@ -174,40 +187,3 @@ } } } - -.alert { - gap: 8px; - padding: 24px 48px 24px 24px; - border-radius: 4px; -} - -.notification { - gap: 4px; - padding: 16px 48px 16px 16px; - border-radius: 8px; - - .header { - gap: 12px; - } - - .title { - font-size: 17px; - font-weight: 700; - line-height: 1.4; - color: #000000; - - @include darkMode() { - color: #fff; - } - } - - .body, - .footer { - padding: 0 0 0 32px; - } - - .button { - top: 16px; - right: 16px; - } -} From 8e4fa151e5a74f4feb437482de7198d18a4434f4 Mon Sep 17 00:00:00 2001 From: Nikita Yutanov Date: Tue, 7 Jan 2025 17:21:47 +0300 Subject: [PATCH 7/7] refactor dark mode mixin --- .../src/components/alert/alert.module.scss | 87 +++++++------------ utils/vara-ui/src/components/alert/index.ts | 7 +- utils/vara-ui/src/utils.scss | 20 ++++- 3 files changed, 50 insertions(+), 64 deletions(-) diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss index e67cfe45de..30cf6eba4e 100644 --- a/utils/vara-ui/src/components/alert/alert.module.scss +++ b/utils/vara-ui/src/components/alert/alert.module.scss @@ -15,14 +15,15 @@ } .container { + @include lightDark(background-color, #fff, #272b2f); + display: flex; flex-direction: column; - background-color: #fff; - box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15); + border: 1px solid transparent; - @include darkMode() { - background-color: #272b2f; + @include lightMode() { + box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.15); } } @@ -36,13 +37,9 @@ } .button { - margin-left: auto; + @include lightDark(color, #000, #fff); - color: #000; - - @include darkMode() { - color: #fff; - } + margin-left: auto; svg { width: 20px; @@ -51,25 +48,18 @@ } .body { - color: #525251; + @include lightDark(color, #525251, #fff); overflow: hidden; text-overflow: ellipsis; - - @include darkMode() { - color: #fff; - } } .footer { - color: #9babb0; + @include lightDark(color, #9babb0, rgba(245, 245, 245, 0.8)); + font-size: 14px; font-weight: 400; line-height: 20px; - - @include darkMode() { - color: rgba(245, 245, 245, 0.8); - } } .alert { @@ -106,14 +96,11 @@ } .title { + @include lightDark(color, #000, #fff); + font-size: 17px; font-weight: 700; line-height: 1.4; - color: #000; - - @include darkMode() { - color: #fff; - } } .body, @@ -129,61 +116,45 @@ } .success { - .header { - color: #0dd3a2; - } - @include darkMode() { - box-shadow: 0 0 0 1px rgba(0, 255, 196, 0.6); - - .header { - color: #00ffc4; - } + border-color: rgba(0, 255, 196, 0.6); } -} -.error { .header { - color: #ff3333; + @include lightDark(color, #0dd3a2, #00ffc4); } +} +.error { @include darkMode() { - box-shadow: 0 0 0 1px rgba(255, 56, 89, 0.6); - - .header { - color: rgb(255, 56, 86); - } + border-color: rgba(255, 55, 87, 0.6); } -} -.info { .header { - color: #000; + @include lightDark(color, #ff3231, #ff3757); } +} +.info { @include darkMode() { - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); + border-color: rgba(255, 255, 255, 0.6); + } - .header { - color: #ffffff; - } + .header { + @include lightDark(color, #000, #fff); } } .loading { + @include darkMode() { + border-color: rgba(58, 172, 233, 0.6); + } + .header { - color: #3a74e9; + @include lightDark(color, #3a74e9, rgba(58, 172, 233, 1)); } .icon { animation: rotating 1s linear infinite; } - - @include darkMode() { - box-shadow: 0 0 0 1px rgba(58, 172, 233, 0.6); - - .header { - color: rgba(58, 172, 233, 1); - } - } } diff --git a/utils/vara-ui/src/components/alert/index.ts b/utils/vara-ui/src/components/alert/index.ts index 1a9f546e64..004e463d85 100644 --- a/utils/vara-ui/src/components/alert/index.ts +++ b/utils/vara-ui/src/components/alert/index.ts @@ -1,6 +1,5 @@ -import { Alert, AlertProps, AlertTypes, AlertVariants } from './alert'; +import { Alert, AlertProps } from './alert'; import alertStyles from './alert.module.scss'; -import { alertIcons } from './icons.tsx'; -export { Alert, alertStyles, alertIcons }; -export type { AlertProps, AlertTypes, AlertVariants }; +export { Alert, alertStyles }; +export type { AlertProps }; diff --git a/utils/vara-ui/src/utils.scss b/utils/vara-ui/src/utils.scss index 4002a70426..11195ffdbf 100644 --- a/utils/vara-ui/src/utils.scss +++ b/utils/vara-ui/src/utils.scss @@ -1,5 +1,21 @@ -@mixin darkMode { - :global(.dark-theme) & { +@mixin darkMode() { + body:global(.dark-theme) & { @content; } } + +@mixin lightMode() { + body:not(:global(.dark-theme)) & { + @content; + } +} + +@mixin lightDark($property, $lightValue, $darkValue) { + @include lightMode() { + #{$property}: $lightValue; + } + + @include darkMode() { + #{$property}: $darkValue; + } +}