diff --git a/src/assets/fox.svg b/src/assets/fox.svg new file mode 100644 index 000000000..32c651934 --- /dev/null +++ b/src/assets/fox.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo.svg b/src/assets/logo.svg index c4aa5b4e6..344d84eff 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,61 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/src/components/ColorModeToggle.tsx b/src/components/ColorModeToggle.tsx index 461233b64..a95514257 100644 --- a/src/components/ColorModeToggle.tsx +++ b/src/components/ColorModeToggle.tsx @@ -3,24 +3,18 @@ import { t } from '@lingui/macro'; import { useLingui } from '@lingui/react'; import type { FunctionComponent } from 'react'; -import { DarkModeIcon, LightModeIcon } from './icons'; +import { DarkModeIcon } from './icons'; export const ColorModeToggle: FunctionComponent = () => { const { _ } = useLingui(); - const { colorMode, toggleColorMode } = useColorMode(); + const { toggleColorMode } = useColorMode(); return ( - ) : ( - - ) - } + icon={} onClick={toggleColorMode} /> ); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index d8b8a9017..8975e11f7 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,9 +1,10 @@ import type { BoxProps } from '@chakra-ui/react'; -import { Box, Container, Stack } from '@chakra-ui/react'; +import { Button, Box, Container, Stack } from '@chakra-ui/react'; import { Link } from 'gatsby'; import type { FunctionComponent } from 'react'; import { ColorModeToggle } from './ColorModeToggle'; +import { GlobeIcon } from './icons'; import { Logo } from './Logo'; import { FilterSearch, Notifications } from '../features'; @@ -26,7 +27,7 @@ export const Header: FunctionComponent = (props) => ( width="100%" zIndex="sticky" > - + = (props) => ( - - + + + + diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx index 43eb3163e..65a02ec7c 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,7 +1,6 @@ -import { Box, useColorMode } from '@chakra-ui/react'; +import { Box } from '@chakra-ui/react'; import type { FunctionComponent } from 'react'; -import SmallLogo from './icons/metamask.svg'; import SvgLogo from '../assets/logo.svg'; /** @@ -10,37 +9,18 @@ import SvgLogo from '../assets/logo.svg'; * @returns A React component. */ export const Logo: FunctionComponent = () => { - const { colorMode } = useColorMode(); - - const fill = colorMode === 'light' ? '#161616' : 'white'; return ( - <> - - - + - - - + // @ts-expect-error - SVG is a React component but TypeScript thinks + // it's a string. + as={SvgLogo} + width="100%" + height="100%" + role="img" + aria-label="MetaMask Snaps Directory" + fill="primary.alternative" + /> + ); }; diff --git a/src/components/icons/bell.svg b/src/components/icons/bell.svg new file mode 100644 index 000000000..f76a5b7d4 --- /dev/null +++ b/src/components/icons/bell.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/dark-mode.svg b/src/components/icons/dark-mode.svg index 7965801dd..d85ce61f9 100644 --- a/src/components/icons/dark-mode.svg +++ b/src/components/icons/dark-mode.svg @@ -1,4 +1,6 @@ - - - + + + + + diff --git a/src/components/icons/globe.svg b/src/components/icons/globe.svg new file mode 100644 index 000000000..34f31fff8 --- /dev/null +++ b/src/components/icons/globe.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index ebfb00d50..a9322ac7c 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -3,6 +3,7 @@ import { defineMessage } from '@lingui/macro'; import BaseAddSquareIcon from './add-square.svg'; import BaseAddUserIcon from './add-user.svg'; import BaseBackIcon from './back.svg'; +import BaseBellIcon from './bell.svg'; import BaseCheckThinIcon from './check-thin.svg'; import BaseCheckIcon from './check.svg'; import BaseClockIcon from './clock.svg'; @@ -17,6 +18,7 @@ import BaseExternalLinkIcon from './external-link.svg'; import BaseFilterIcon from './filter.svg'; import BaseFlashIcon from './flash.svg'; import BaseGlobalIcon from './global.svg'; +import BaseGlobeIcon from './globe.svg'; import BaseHierarchyIcon from './hierarchy.svg'; import BaseHomeIcon from './home.svg'; import { wrapIcon } from './Icon'; @@ -50,6 +52,8 @@ export const AddUserIcon = wrapIcon(BaseAddUserIcon, defineMessage`Add user`); export const BackIcon = wrapIcon(BaseBackIcon, defineMessage`Back`); +export const BellIcon = wrapIcon(BaseBellIcon, defineMessage`Notifications`); + export const ClockIcon = wrapIcon(BaseClockIcon, defineMessage`Clock`); export const CloseIcon = wrapIcon(BaseCloseIcon, defineMessage`Close`); @@ -60,7 +64,7 @@ export const CheckThinIcon = wrapIcon(BaseCheckThinIcon, defineMessage`Check`); export const DarkModeIcon = wrapIcon( BaseDarkModeIcon, - defineMessage`Enable dark mode`, + defineMessage`Toggle color mode`, ); export const DocumentCodeIcon = wrapIcon( @@ -90,6 +94,8 @@ export const FlashIcon = wrapIcon(BaseFlashIcon, defineMessage`Flash`); export const GlobalIcon = wrapIcon(BaseGlobalIcon, defineMessage`Global`); +export const GlobeIcon = wrapIcon(BaseGlobeIcon, defineMessage`Language`); + export const HierarchyIcon = wrapIcon( BaseHierarchyIcon, defineMessage`Hierarchy`, diff --git a/src/components/icons/notification.svg b/src/components/icons/notification.svg index d40c1c045..b56d481c7 100644 --- a/src/components/icons/notification.svg +++ b/src/components/icons/notification.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/src/components/icons/search.svg b/src/components/icons/search.svg index 81812d7ea..5ec0c7ef4 100644 --- a/src/components/icons/search.svg +++ b/src/components/icons/search.svg @@ -1,4 +1,11 @@ - - + + + + + + + + + + diff --git a/src/features/filter/components/FilterSearchInput.tsx b/src/features/filter/components/FilterSearchInput.tsx index 5fbb1a170..d438eb242 100644 --- a/src/features/filter/components/FilterSearchInput.tsx +++ b/src/features/filter/components/FilterSearchInput.tsx @@ -34,24 +34,18 @@ export const FilterSearchInput: FunctionComponent = }; return ( - - - + + + ); diff --git a/src/features/notifications/components/NoNotifications.tsx b/src/features/notifications/components/NoNotifications.tsx index b2fcfffe9..842078556 100644 --- a/src/features/notifications/components/NoNotifications.tsx +++ b/src/features/notifications/components/NoNotifications.tsx @@ -2,7 +2,7 @@ import { Center, Heading, Text } from '@chakra-ui/react'; import { Trans } from '@lingui/macro'; import type { FunctionComponent } from 'react'; -import { Fox } from '../../../components'; +import Fox from '../../../assets/fox.svg'; export const NoNotifications: FunctionComponent = () => (
( maxWidth={['calc(100vw - 2rem)', null, '17.188rem']} margin={['auto', '4', '10']} > - + No updates diff --git a/src/features/notifications/components/NotificationsButton.tsx b/src/features/notifications/components/NotificationsButton.tsx index 74d2dc9e0..6381db8fb 100644 --- a/src/features/notifications/components/NotificationsButton.tsx +++ b/src/features/notifications/components/NotificationsButton.tsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro'; import { useLingui } from '@lingui/react'; import { getUnacknowledgedUpdates } from '../..'; -import { DotIcon, NotificationsIcon } from '../../../components'; +import { DotIcon, NotificationIcon } from '../../../components'; import { useSelector } from '../../../hooks'; export type NotificationsButtonProps = Partial; @@ -24,14 +24,13 @@ export const NotificationsButton: ComponentWithAs< {...props} position="relative" aria-label={_(t`Open notifications menu`)} - variant="clear" + variant="outline" icon={ <> - svg > rect': { fillOpacity: 1, diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po index 7e8ee55de..036e9cb39 100644 --- a/src/locales/de-DE/messages.po +++ b/src/locales/de-DE/messages.po @@ -336,10 +336,6 @@ msgstr "MetaMask herunterladen" msgid "Dropdown" msgstr "Dropdown" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Dunkelmodus aktivieren" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Lichtmodus aktivieren" @@ -510,6 +506,10 @@ msgstr "Schlüsselwiederherstellung" msgid "Knowledge Base" msgstr "Wissensdatenbank" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Keine Updates" msgid "Notification" msgstr "Benachrichtigung" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Benachrichtigungen" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "Screenshot für {name}" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Suche" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Snaps suchen" - #: src/components/icons/index.ts #: src/constants.ts msgid "Security" @@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "Um MetaMask Snaps zu verwenden, benötigen Sie die neueste Version (11.0) von MetaMask in Ihrem Browser. <0>Erfahren Sie mehr." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Farbmodus umschalten" diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po index 3775966f4..dbd75d6f7 100644 --- a/src/locales/en-US/messages.po +++ b/src/locales/en-US/messages.po @@ -331,10 +331,6 @@ msgstr "" msgid "Dropdown" msgstr "" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "" @@ -505,6 +501,10 @@ msgstr "" msgid "Knowledge Base" msgstr "" +#: src/components/icons/index.ts +msgid "Language" +msgstr "Language" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -596,6 +596,7 @@ msgstr "" msgid "Notification" msgstr "" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "" @@ -664,11 +665,8 @@ msgid "Screenshot for {name}" msgstr "Screenshot for {name}" #: src/components/icons/index.ts -msgid "Search" -msgstr "" - #: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" +msgid "Search" msgstr "" #: src/components/icons/index.ts @@ -786,6 +784,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "" #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "" diff --git a/src/locales/ja-JP/messages.po b/src/locales/ja-JP/messages.po index 334664726..0a1c154ed 100644 --- a/src/locales/ja-JP/messages.po +++ b/src/locales/ja-JP/messages.po @@ -336,10 +336,6 @@ msgstr "MetaMaskをダウンロード" msgid "Dropdown" msgstr "ドロップダウン" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "ダークモードを有効にする" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "ライトモードを有効にする" @@ -510,6 +506,10 @@ msgstr "キーの復元" msgid "Knowledge Base" msgstr "知識ベース" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "更新はありません" msgid "Notification" msgstr "通知" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "通知" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "{name}のスクリーンショット" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "検索" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Snapの検索" - #: src/components/icons/index.ts #: src/constants.ts msgid "Security" @@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "MetaMask Snapsを使用するには、ブラウザに最新バージョン (11.0) のMetaMaskが必要です。<0>詳細はこちら。" #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "カラーモードを切り替える" diff --git a/src/locales/pt-BR/messages.po b/src/locales/pt-BR/messages.po index c247c09a4..42c986a73 100644 --- a/src/locales/pt-BR/messages.po +++ b/src/locales/pt-BR/messages.po @@ -336,10 +336,6 @@ msgstr "Baixar MetaMask" msgid "Dropdown" msgstr "Suspenso" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Ativar modo escuro" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Ativar modo claro" @@ -510,6 +506,10 @@ msgstr "Recuperação de chave" msgid "Knowledge Base" msgstr "Base de conhecimento" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Nenhuma atualização" msgid "Notification" msgstr "Notificação" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Notificações" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "Capturas de tela de {name}" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Pesquisar" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Pesquisar Snaps" - #: src/components/icons/index.ts #: src/constants.ts msgid "Security" @@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "Para usar o MetaMask Snaps, você precisa da versão mais recente (11.0) da MetaMask em seu navegador. <0>Saiba mais." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Alternar modo colorido" diff --git a/src/locales/ru-RU/messages.po b/src/locales/ru-RU/messages.po index af69d56f8..b5ac83c1d 100644 --- a/src/locales/ru-RU/messages.po +++ b/src/locales/ru-RU/messages.po @@ -336,10 +336,6 @@ msgstr "Скачать MetaMask" msgid "Dropdown" msgstr "Выпадающее меню" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Включить темный режим" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Включить светлый режим" @@ -510,6 +506,10 @@ msgstr "Восстановление ключа" msgid "Knowledge Base" msgstr "База знаний" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Нет обновлений" msgid "Notification" msgstr "Уведомление" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Уведомления" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "Скриншот для {name}" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Поиск" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Поиск Snaps" - #: src/components/icons/index.ts #: src/constants.ts msgid "Security" @@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "Для использования MetaMask Snaps вам нужна последняя версия MetaMask (11.0) в вашем браузере. <0>Подробнее." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Сменить цветовой режим" diff --git a/src/locales/tr-TR/messages.po b/src/locales/tr-TR/messages.po index ab933659d..5c9a6254b 100644 --- a/src/locales/tr-TR/messages.po +++ b/src/locales/tr-TR/messages.po @@ -336,10 +336,6 @@ msgstr "MetaMask'i İndir" msgid "Dropdown" msgstr "Açılır Menü" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "Karanlık modu etkinleştir" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "Aydınlık modu etkinleştir" @@ -510,6 +506,10 @@ msgstr "Anahtar Kurtarma" msgid "Knowledge Base" msgstr "Bilgi Tabanı" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "Güncelleme yok" msgid "Notification" msgstr "Bildirim" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "Bildirimler" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "{name} için ekran görüntüsü" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "Ara" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "Snap'leri Ara" - #: src/components/icons/index.ts #: src/constants.ts msgid "Security" @@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "MetaMask Snaps'i kullanmak için tarayıcınızda en yeni MetaMask sürümüne (11.0) ihtiyacınız vardır. <0>Daha fazla bilgi alın." #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "Renk modunu değiştir" diff --git a/src/locales/zh-CN/messages.po b/src/locales/zh-CN/messages.po index 9a64ea359..f7ee2e463 100644 --- a/src/locales/zh-CN/messages.po +++ b/src/locales/zh-CN/messages.po @@ -336,10 +336,6 @@ msgstr "下载 MetaMask" msgid "Dropdown" msgstr "下拉菜单" -#: src/components/icons/index.ts -msgid "Enable dark mode" -msgstr "启用深色模式" - #: src/components/icons/index.ts msgid "Enable light mode" msgstr "启用浅色模式" @@ -510,6 +506,10 @@ msgstr "密钥恢复" msgid "Knowledge Base" msgstr "知识库" +#: src/components/icons/index.ts +msgid "Language" +msgstr "" + #: src/features/filter/constants.tsx #: src/pages/index.tsx msgid "Latest" @@ -601,6 +601,7 @@ msgstr "无更新" msgid "Notification" msgstr "通知" +#: src/components/icons/index.ts #: src/components/icons/index.ts msgid "Notifications" msgstr "通知" @@ -669,13 +670,10 @@ msgid "Screenshot for {name}" msgstr "{name} 的截图" #: src/components/icons/index.ts +#: src/features/filter/components/FilterSearchInput.tsx msgid "Search" msgstr "搜索" -#: src/features/filter/components/FilterSearchInput.tsx -msgid "Search Snaps" -msgstr "搜索 Snap" - #: src/components/icons/index.ts #: src/constants.ts msgid "Security" @@ -791,6 +789,7 @@ msgid "To use MetaMask Snaps, you need the latest version (11.0) of MetaMask in msgstr "如需使用 MetaMask Snaps，您需要在浏览器中使用最新版本（11.0）的 MetaMask。<0>了解更多信息。" #: src/components/ColorModeToggle.tsx +#: src/components/icons/index.ts msgid "Toggle color mode" msgstr "切换颜色模式" diff --git a/src/theme/components/button.ts b/src/theme/components/button.ts index 2c4a5dd79..1be017988 100644 --- a/src/theme/components/button.ts +++ b/src/theme/components/button.ts @@ -2,51 +2,32 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/react'; export const Button = defineStyleConfig({ baseStyle: defineStyle({ + borderRadius: 'full', + color: 'text.default', + lineHeight: '1', + textTransform: 'uppercase', _hover: { opacity: '0.75', }, }), variants: { - solid: defineStyle({ - bg: '#24272A', - textColor: 'white', - _hover: { - bg: '#0376C9', - }, - _active: { - bg: '#0376C9', - }, - }), - primary: defineStyle({ - height: '48px', - borderRadius: '30px', - background: 'info.default', - fontSize: 'md', + background: 'primary.default', + fontSize: 'sm', fontWeight: '500', - lineHeight: '157%', - color: 'white', - borderColor: 'info.default', - padding: '4', - _hover: { - _disabled: { - background: 'info.default', - }, - }, + paddingX: '6', + paddingY: '4', + color: 'text.dark', }), outline: defineStyle({ - height: '48px', - borderRadius: '30px', - background: 'transparent', - fontSize: 'md', - fontWeight: '500', - lineHeight: '157%', - color: 'info.default', border: '1.5px solid', - borderColor: 'info.default', - padding: '4', + borderColor: 'text.default', + fontSize: 'sm', + fontWeight: '500', + paddingX: '6', + paddingY: '4', }), filter: defineStyle({ diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts index f45a8ccbb..bffa2cd91 100644 --- a/src/theme/components/index.ts +++ b/src/theme/components/index.ts @@ -2,6 +2,7 @@ import { Button } from './button'; import { Container } from './container'; import { Divider } from './divider'; import { Heading } from './heading'; +import { Input } from './input'; import { Link } from './link'; import { Menu } from './menu'; import { Modal } from './modal'; @@ -15,6 +16,7 @@ export const components = { Container, Divider, Heading, + Input, Link, Menu, Modal, diff --git a/src/theme/components/input.ts b/src/theme/components/input.ts new file mode 100644 index 000000000..75ef2341f --- /dev/null +++ b/src/theme/components/input.ts @@ -0,0 +1,31 @@ +import { inputAnatomy } from '@chakra-ui/anatomy'; +import { createMultiStyleConfigHelpers } from '@chakra-ui/react'; + +const { definePartsStyle, defineMultiStyleConfig } = + createMultiStyleConfigHelpers(inputAnatomy.keys); + +export const Input = defineMultiStyleConfig({ + baseStyle: { + field: { + color: 'text.default', + fontSize: 'sm', + borderRadius: 'full', + paddingX: '6', + paddingY: '4', + _placeholder: { + color: 'text.default', + textTransform: 'uppercase', + fontWeight: '500', + }, + }, + }, + + variants: { + outline: definePartsStyle({ + field: { + borderWidth: '0.094rem', + borderColor: 'text.default', + }, + }), + }, +}); diff --git a/src/theme/semantic-tokens.ts b/src/theme/semantic-tokens.ts index 092acd38d..10d83ea3d 100644 --- a/src/theme/semantic-tokens.ts +++ b/src/theme/semantic-tokens.ts @@ -15,12 +15,15 @@ export const semanticTokens: SemanticTokens = { colors: { text: { default: { - default: '#24272A', + default: '#0A0A0A', _dark: '#FFFFFF', }, + dark: { + default: '#0A0A0A', + }, alternative: { - default: '#535A61', - _dark: '#D6D9DC', + default: '#393D46', + _dark: '#C8CEDA', }, muted: { default: '#24272A1A', @@ -49,6 +52,14 @@ export const semanticTokens: SemanticTokens = { 'alternative-hover': { default: '#EDEFF1', _dark: '#191B1D' }, }, primary: { + default: { + default: '#FF5C16', + _dark: '#FFFFFF', + }, + alternative: { + default: '#0A0A0A', + _dark: '#BAF24A', + }, inverse: { default: '#FCFCFC', },