TWNTY-3825 - ESLint rule: const naming (#4171)
* ESLint rule: const naming Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev> * Refactor according to review Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev> * refactor: Reverts changes on `twenty-server` Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev> Co-authored-by: v1b3m <vibenjamin6@gmail.com> --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev>
This commit is contained in:
gitstart-app[bot]
committed by
GitHub
GitHub
parent
a108d36040
commit
f543191552
@ -1,7 +1,7 @@
|
||||
import { css } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
|
||||
|
||||
export type ColorSampleVariant = 'default' | 'pipeline';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
|
||||
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
|
||||
|
||||
const StyledStatus = styled.h3<{
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import {
|
||||
MAIN_COLOR_NAMES,
|
||||
ThemeColor,
|
||||
} from '@/ui/theme/constants/MainColorNames';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
@ -55,7 +58,7 @@ export const Catalog: CatalogStory<Story, typeof Status> = {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'colors',
|
||||
values: mainColorNames,
|
||||
values: MAIN_COLOR_NAMES,
|
||||
props: (color: ThemeColor) => ({ color }),
|
||||
},
|
||||
],
|
||||
|
||||
@ -2,7 +2,7 @@ import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
|
||||
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
|
||||
|
||||
const StyledTag = styled.h3<{
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
import { expect, fn, userEvent, within } from '@storybook/test';
|
||||
|
||||
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import {
|
||||
MAIN_COLOR_NAMES,
|
||||
ThemeColor,
|
||||
} from '@/ui/theme/constants/MainColorNames';
|
||||
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
import { CatalogStory } from '~/testing/types';
|
||||
@ -55,7 +58,7 @@ export const Catalog: CatalogStory<Story, typeof Tag> = {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'colors',
|
||||
values: mainColorNames,
|
||||
values: MAIN_COLOR_NAMES,
|
||||
props: (color: ThemeColor) => ({ color }),
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { PlacesType, PositionStrategy, Tooltip } from 'react-tooltip';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { rgba } from '../../theme/constants/colors';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
export enum TooltipPosition {
|
||||
Top = 'top',
|
||||
@ -12,7 +12,7 @@ export enum TooltipPosition {
|
||||
|
||||
const StyledAppTooltip = styled(Tooltip)`
|
||||
backdrop-filter: ${({ theme }) => theme.blur.strong};
|
||||
background-color: ${({ theme }) => rgba(theme.color.gray80, 0.8)};
|
||||
background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.light};
|
||||
|
||||
@ -7,7 +7,7 @@ import {
|
||||
ProgressBar,
|
||||
ProgressBarControls,
|
||||
} from '@/ui/feedback/progress-bar/components/ProgressBar';
|
||||
import { rgba } from '@/ui/theme/constants/colors';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
import { usePausableTimeout } from '../hooks/usePausableTimeout';
|
||||
|
||||
@ -85,7 +85,7 @@ const StyledCloseButton = styled.button<Pick<SnackBarProps, 'variant'>>`
|
||||
width: 24px;
|
||||
|
||||
&:hover {
|
||||
background-color: ${({ theme }) => rgba(theme.grayScale.gray0, 0.1)};
|
||||
background-color: ${({ theme }) => RGBA(theme.grayScale.gray0, 0.1)};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -167,7 +167,7 @@ export const SnackBar = ({
|
||||
<ProgressBar
|
||||
ref={progressBarRef}
|
||||
barHeight={5}
|
||||
barColor={rgba(theme.grayScale.gray0, 0.3)}
|
||||
barColor={RGBA(theme.grayScale.gray0, 0.3)}
|
||||
duration={duration}
|
||||
/>
|
||||
</StyledProgressBarContainer>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { overlayBackground } from '@/ui/theme/constants/effects';
|
||||
import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
|
||||
|
||||
const StyledFieldInputOverlay = styled.div`
|
||||
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
${overlayBackground}
|
||||
${OVERLAY_BACKGROUND}
|
||||
display: flex;
|
||||
height: 32px;
|
||||
margin: -1px;
|
||||
|
||||
@ -3,7 +3,7 @@ import TextareaAutosize from 'react-textarea-autosize';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
|
||||
import { textInputStyle } from '@/ui/theme/constants/effects';
|
||||
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
|
||||
|
||||
export type TextAreaInputProps = {
|
||||
disabled?: boolean;
|
||||
@ -21,7 +21,7 @@ export type TextAreaInputProps = {
|
||||
};
|
||||
|
||||
const StyledTextArea = styled(TextareaAutosize)`
|
||||
${textInputStyle}
|
||||
${TEXT_INPUT_STYLE}
|
||||
width: 100%;
|
||||
resize: none;
|
||||
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
||||
|
||||
@ -2,11 +2,11 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
|
||||
import { textInputStyle } from '@/ui/theme/constants/effects';
|
||||
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
|
||||
|
||||
export const StyledInput = styled.input`
|
||||
margin: 0;
|
||||
${textInputStyle}
|
||||
${TEXT_INPUT_STYLE}
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import * as React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { rgba } from '@/ui/theme/constants/colors';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
import { RadioGroup } from './RadioGroup';
|
||||
|
||||
@ -58,7 +58,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
|
||||
if (!checked) {
|
||||
return theme.background.tertiary;
|
||||
}
|
||||
return rgba(theme.color.blue, 0.12);
|
||||
return RGBA(theme.color.blue, 0.12);
|
||||
}};
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import styled from '@emotion/styled';
|
||||
import { IconCalendarX } from '@/ui/display/icon';
|
||||
import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
|
||||
import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
|
||||
import { overlayBackground } from '@/ui/theme/constants/effects';
|
||||
import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';
|
||||
|
||||
import 'react-datepicker/dist/react-datepicker.css';
|
||||
|
||||
@ -90,7 +90,7 @@ const StyledContainer = styled.div`
|
||||
& .react-datepicker__month-dropdown,
|
||||
& .react-datepicker__year-dropdown {
|
||||
border: ${({ theme }) => theme.border.color.light};
|
||||
${overlayBackground}
|
||||
${OVERLAY_BACKGROUND}
|
||||
overflow-y: scroll;
|
||||
top: ${({ theme }) => theme.spacing(2)};
|
||||
}
|
||||
|
||||
@ -4,12 +4,10 @@ import styled from '@emotion/styled';
|
||||
import { motion, useMotionValue, useTransform } from 'framer-motion';
|
||||
import { animate } from 'framer-motion';
|
||||
|
||||
import {
|
||||
Background,
|
||||
DarkBackground,
|
||||
DarkMovingImage,
|
||||
MovingImage,
|
||||
} from '@/ui/layout/animated-placeholder/constants/AnimatedImages';
|
||||
import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background';
|
||||
import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground';
|
||||
import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage';
|
||||
import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
@ -39,7 +37,7 @@ const StyledMovingImage = styled(motion.img)<StyledImageProps>`
|
||||
`;
|
||||
|
||||
interface AnimatedPlaceholderProps {
|
||||
type: keyof typeof Background | keyof typeof MovingImage;
|
||||
type: keyof typeof BACKGROUND | keyof typeof MOVING_IMAGE;
|
||||
}
|
||||
|
||||
const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
|
||||
@ -89,12 +87,14 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledBackgroundImage
|
||||
src={theme.name === 'dark' ? DarkBackground[type] : Background[type]}
|
||||
src={theme.name === 'dark' ? DARK_BACKGROUND[type] : BACKGROUND[type]}
|
||||
alt="Background"
|
||||
type={type}
|
||||
/>
|
||||
<StyledMovingImage
|
||||
src={theme.name === 'dark' ? DarkMovingImage[type] : MovingImage[type]}
|
||||
src={
|
||||
theme.name === 'dark' ? DARK_MOVING_IMAGE[type] : MOVING_IMAGE[type]
|
||||
}
|
||||
alt="Moving"
|
||||
style={{ translateX, translateY }}
|
||||
transition={{ type: 'spring', stiffness: 100, damping: 10 }}
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
export const Background: Record<string, string> = {
|
||||
noFile: '/images/placeholders/background/no_file_bg.png',
|
||||
noNote: '/images/placeholders/background/no_note_bg.png',
|
||||
noRecord: '/images/placeholders/background/no_record_bg.png',
|
||||
noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
|
||||
noTask: '/images/placeholders/background/no_task_bg.png',
|
||||
errorIndex: '/images/placeholders/background/error_index_bg.png',
|
||||
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
|
||||
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
|
||||
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
|
||||
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
|
||||
error404: '/images/placeholders/background/404_bg.png',
|
||||
error500: '/images/placeholders/background/500_bg.png',
|
||||
};
|
||||
|
||||
export const MovingImage: Record<string, string> = {
|
||||
noFile: '/images/placeholders/moving-image/no_file.png',
|
||||
noNote: '/images/placeholders/moving-image/no_note.png',
|
||||
noRecord: '/images/placeholders/moving-image/no_record.png',
|
||||
noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
|
||||
noTask: '/images/placeholders/moving-image/no_task.png',
|
||||
errorIndex: '/images/placeholders/moving-image/error_index.png',
|
||||
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
|
||||
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
|
||||
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
|
||||
emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
|
||||
error404: '/images/placeholders/moving-image/404.png',
|
||||
error500: '/images/placeholders/moving-image/500.png',
|
||||
};
|
||||
|
||||
export const DarkBackground: Record<string, string> = {
|
||||
noFile: '/images/placeholders/dark-background/no_file_bg.png',
|
||||
noNote: '/images/placeholders/dark-background/no_note_bg.png',
|
||||
noRecord: '/images/placeholders/dark-background/no_record_bg.png',
|
||||
noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
|
||||
noTask: '/images/placeholders/dark-background/no_task_bg.png',
|
||||
errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
|
||||
emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
|
||||
emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
|
||||
error404: '/images/placeholders/dark-background/404_bg.png',
|
||||
error500: '/images/placeholders/dark-background/500_bg.png',
|
||||
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
|
||||
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
|
||||
};
|
||||
|
||||
export const DarkMovingImage: Record<string, string> = {
|
||||
noFile: '/images/placeholders/dark-moving-image/no_file.png',
|
||||
noNote: '/images/placeholders/dark-moving-image/no_note.png',
|
||||
noRecord: '/images/placeholders/dark-moving-image/no_record.png',
|
||||
noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
|
||||
noTask: '/images/placeholders/dark-moving-image/no_task.png',
|
||||
errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
|
||||
emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
|
||||
emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
|
||||
error404: '/images/placeholders/dark-moving-image/404.png',
|
||||
error500: '/images/placeholders/dark-moving-image/500.png',
|
||||
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
|
||||
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
export const BACKGROUND: Record<string, string> = {
|
||||
noFile: '/images/placeholders/background/no_file_bg.png',
|
||||
noNote: '/images/placeholders/background/no_note_bg.png',
|
||||
noRecord: '/images/placeholders/background/no_record_bg.png',
|
||||
noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
|
||||
noTask: '/images/placeholders/background/no_task_bg.png',
|
||||
errorIndex: '/images/placeholders/background/error_index_bg.png',
|
||||
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
|
||||
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
|
||||
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
|
||||
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
|
||||
error404: '/images/placeholders/background/404_bg.png',
|
||||
error500: '/images/placeholders/background/500_bg.png',
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
export const DARK_BACKGROUND: Record<string, string> = {
|
||||
noFile: '/images/placeholders/dark-background/no_file_bg.png',
|
||||
noNote: '/images/placeholders/dark-background/no_note_bg.png',
|
||||
noRecord: '/images/placeholders/dark-background/no_record_bg.png',
|
||||
noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
|
||||
noTask: '/images/placeholders/dark-background/no_task_bg.png',
|
||||
errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
|
||||
emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
|
||||
emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
|
||||
error404: '/images/placeholders/dark-background/404_bg.png',
|
||||
error500: '/images/placeholders/dark-background/500_bg.png',
|
||||
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
|
||||
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
export const DARK_MOVING_IMAGE: Record<string, string> = {
|
||||
noFile: '/images/placeholders/dark-moving-image/no_file.png',
|
||||
noNote: '/images/placeholders/dark-moving-image/no_note.png',
|
||||
noRecord: '/images/placeholders/dark-moving-image/no_record.png',
|
||||
noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
|
||||
noTask: '/images/placeholders/dark-moving-image/no_task.png',
|
||||
errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
|
||||
emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
|
||||
emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
|
||||
error404: '/images/placeholders/dark-moving-image/404.png',
|
||||
error500: '/images/placeholders/dark-moving-image/500.png',
|
||||
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
|
||||
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
export const MOVING_IMAGE: Record<string, string> = {
|
||||
noFile: '/images/placeholders/moving-image/no_file.png',
|
||||
noNote: '/images/placeholders/moving-image/no_note.png',
|
||||
noRecord: '/images/placeholders/moving-image/no_record.png',
|
||||
noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
|
||||
noTask: '/images/placeholders/moving-image/no_task.png',
|
||||
errorIndex: '/images/placeholders/moving-image/error_index.png',
|
||||
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
|
||||
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
|
||||
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
|
||||
emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
|
||||
error404: '/images/placeholders/moving-image/404.png',
|
||||
error500: '/images/placeholders/moving-image/500.png',
|
||||
};
|
||||
@ -1,11 +1,11 @@
|
||||
import { forwardRef, InputHTMLAttributes } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { rgba } from '@/ui/theme/constants/colors';
|
||||
import { textInputStyle } from '@/ui/theme/constants/effects';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
|
||||
|
||||
const StyledInput = styled.input`
|
||||
${textInputStyle}
|
||||
${TEXT_INPUT_STYLE}
|
||||
|
||||
border: 1px solid ${({ theme }) => theme.border.color.medium};
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
@ -17,7 +17,7 @@ const StyledInput = styled.input`
|
||||
|
||||
&:focus {
|
||||
border-color: ${({ theme }) => theme.color.blue};
|
||||
box-shadow: 0px 0px 0px 3px ${({ theme }) => rgba(theme.color.blue, 0.1)};
|
||||
box-shadow: 0px 0px 0px 3px ${({ theme }) => RGBA(theme.color.blue, 0.1)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { forwardRef, InputHTMLAttributes } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { textInputStyle } from '@/ui/theme/constants/effects';
|
||||
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
|
||||
|
||||
const StyledDropdownMenuSearchInputContainer = styled.div`
|
||||
--vertical-padding: ${({ theme }) => theme.spacing(1)};
|
||||
@ -17,7 +17,7 @@ const StyledDropdownMenuSearchInputContainer = styled.div`
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input`
|
||||
${textInputStyle}
|
||||
${TEXT_INPUT_STYLE}
|
||||
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
width: 100%;
|
||||
|
||||
@ -13,10 +13,10 @@ import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/Keyboa
|
||||
import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
|
||||
import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar';
|
||||
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
|
||||
import { objectSettingsWidth } from '@/settings/data-model/constants/objectSettings';
|
||||
import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
|
||||
import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { desktopNavDrawerWidths } from '@/ui/navigation/navigation-drawer/constants';
|
||||
import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
|
||||
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
|
||||
@ -100,7 +100,9 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
|
||||
marginLeft:
|
||||
isSettingsPage && !isMobile
|
||||
? (widowsWidth -
|
||||
(objectSettingsWidth + desktopNavDrawerWidths.menu + 64)) /
|
||||
(OBJECT_SETTINGS_WIDTH +
|
||||
DESKTOP_NAV_DRAWER_WIDTHS.menu +
|
||||
64)) /
|
||||
2
|
||||
: 0,
|
||||
}}
|
||||
|
||||
@ -11,7 +11,7 @@ import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingText
|
||||
import { IconButton } from '@/ui/input/button/components/IconButton';
|
||||
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
export const PAGE_BAR_MIN_HEIGHT = 40;
|
||||
|
||||
@ -2,7 +2,7 @@ import { ReactNode } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { RightDrawer } from '@/ui/layout/right-drawer/components/RightDrawer';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
|
||||
import { PagePanel } from './PagePanel';
|
||||
|
||||
|
||||
@ -4,13 +4,13 @@ import { IconBrandGithub } from '@/ui/display/icon';
|
||||
import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
|
||||
|
||||
import packageJson from '../../../../../../package.json';
|
||||
import { githubLink } from '../constants';
|
||||
import { GITHUB_LINK } from '../constants/GithubLink';
|
||||
|
||||
export const GithubVersionLink = () => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<ActionLink href={githubLink} target="_blank" rel="noreferrer">
|
||||
<ActionLink href={GITHUB_LINK} target="_blank" rel="noreferrer">
|
||||
<IconBrandGithub size={theme.icon.size.md} />
|
||||
{packageJson.version}
|
||||
</ActionLink>
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export const GITHUB_LINK = 'https://github.com/twentyhq/twenty';
|
||||
@ -1 +0,0 @@
|
||||
export const githubLink = 'https://github.com/twentyhq/twenty';
|
||||
@ -5,7 +5,7 @@ import {
|
||||
ColorSampleVariant,
|
||||
} from '@/ui/display/color/components/ColorSample';
|
||||
import { IconCheck } from '@/ui/display/icon';
|
||||
import { ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
|
||||
|
||||
import {
|
||||
StyledMenuItemLabel,
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ColorSampleVariant } from '@/ui/display/color/components/ColorSample';
|
||||
import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
|
||||
import {
|
||||
MAIN_COLOR_NAMES,
|
||||
ThemeColor,
|
||||
} from '@/ui/theme/constants/MainColorNames';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
CatalogDimension,
|
||||
@ -35,7 +38,7 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'color',
|
||||
values: mainColorNames,
|
||||
values: MAIN_COLOR_NAMES,
|
||||
props: (color: ThemeColor) => ({ color }),
|
||||
labels: (color: ThemeColor) => color,
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { css } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { hoverBackground } from '@/ui/theme/constants/effects';
|
||||
import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground';
|
||||
|
||||
import { MenuItemAccent } from '../../types/MenuItemAccent';
|
||||
|
||||
@ -36,7 +36,7 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
|
||||
|
||||
padding: var(--vertical-padding) var(--horizontal-padding);
|
||||
|
||||
${hoverBackground};
|
||||
${HOVER_BACKGROUND};
|
||||
|
||||
${({ theme, accent }) => {
|
||||
switch (accent) {
|
||||
|
||||
@ -5,10 +5,10 @@ import { motion } from 'framer-motion';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { desktopNavDrawerWidths } from '../constants';
|
||||
import { DESKTOP_NAV_DRAWER_WIDTHS } from '../constants/DesktopNavDrawerWidths';
|
||||
|
||||
import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
|
||||
import { NavigationDrawerHeader } from './NavigationDrawerHeader';
|
||||
@ -33,7 +33,7 @@ const StyledContainer = styled.div<{ isSubMenu?: boolean }>`
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(3)};
|
||||
height: 100%;
|
||||
min-width: ${desktopNavDrawerWidths.menu}px;
|
||||
min-width: ${DESKTOP_NAV_DRAWER_WIDTHS.menu}px;
|
||||
padding: ${({ theme }) => theme.spacing(3, 2, 4)};
|
||||
|
||||
${({ isSubMenu, theme }) =>
|
||||
@ -80,7 +80,7 @@ export const NavigationDrawer = ({
|
||||
|
||||
const desktopWidth = !isNavigationDrawerOpen
|
||||
? 12
|
||||
: desktopNavDrawerWidths.menu;
|
||||
: DESKTOP_NAV_DRAWER_WIDTHS.menu;
|
||||
|
||||
const mobileWidth = isNavigationDrawerOpen ? '100%' : 0;
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
export type NavigationDrawerItemProps = {
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
export const DESKTOP_NAV_DRAWER_WIDTHS = {
|
||||
menu: 236,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export const desktopNavDrawerWidths = {
|
||||
menu: 236,
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
|
||||
const isMobile = window.innerWidth <= MOBILE_VIEWPORT;
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { AnimatedCheckmark } from '@/ui/display/checkmark/components/AnimatedCheckmark';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
const StyledContainer = styled.div<{ isLast: boolean }>`
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
|
||||
import { Step, StepProps } from './Step';
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
|
||||
import { darkTheme, lightTheme } from '@/ui/theme/constants/theme';
|
||||
import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
|
||||
import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
|
||||
|
||||
import { useColorScheme } from '../hooks/useColorScheme';
|
||||
import { useSystemColorScheme } from '../hooks/useSystemColorScheme';
|
||||
@ -17,7 +18,7 @@ export const AppThemeProvider = ({ children }: AppThemeProviderProps) => {
|
||||
const computedColorScheme =
|
||||
colorScheme === 'System' ? systemColorScheme : colorScheme;
|
||||
|
||||
const theme = computedColorScheme === 'Dark' ? darkTheme : lightTheme;
|
||||
const theme = computedColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
|
||||
|
||||
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
|
||||
};
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import { COLOR } from './Colors';
|
||||
|
||||
export const ACCENT_DARK = {
|
||||
primary: COLOR.blueAccent75,
|
||||
secondary: COLOR.blueAccent80,
|
||||
tertiary: COLOR.blueAccent85,
|
||||
quaternary: COLOR.blueAccent90,
|
||||
accent3570: COLOR.blueAccent70,
|
||||
accent4060: COLOR.blueAccent60,
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
import { COLOR } from './Colors';
|
||||
|
||||
export const ACCENT_LIGHT = {
|
||||
primary: COLOR.blueAccent25,
|
||||
secondary: COLOR.blueAccent20,
|
||||
tertiary: COLOR.blueAccent15,
|
||||
quaternary: COLOR.blueAccent10,
|
||||
accent3570: COLOR.blueAccent35,
|
||||
accent4060: COLOR.blueAccent40,
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
export const animation = {
|
||||
export const ANIMATION = {
|
||||
duration: {
|
||||
instant: 0.075,
|
||||
fast: 0.15,
|
||||
@ -0,0 +1,27 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
import DarkNoise from '../assets/dark-noise.jpg';
|
||||
|
||||
export const BACKGROUND_DARK = {
|
||||
noisy: `url(${DarkNoise.toString()});`,
|
||||
primary: GRAY_SCALE.gray85,
|
||||
secondary: GRAY_SCALE.gray80,
|
||||
tertiary: GRAY_SCALE.gray75,
|
||||
quaternary: GRAY_SCALE.gray70,
|
||||
danger: COLOR.red80,
|
||||
transparent: {
|
||||
primary: RGBA(GRAY_SCALE.gray85, 0.8),
|
||||
secondary: RGBA(GRAY_SCALE.gray80, 0.8),
|
||||
strong: RGBA(GRAY_SCALE.gray0, 0.14),
|
||||
medium: RGBA(GRAY_SCALE.gray0, 0.1),
|
||||
light: RGBA(GRAY_SCALE.gray0, 0.06),
|
||||
lighter: RGBA(GRAY_SCALE.gray0, 0.03),
|
||||
danger: RGBA(COLOR.red, 0.08),
|
||||
},
|
||||
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
|
||||
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
|
||||
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
import LightNoise from '../assets/light-noise.png';
|
||||
|
||||
export const BACKGROUND_LIGHT = {
|
||||
noisy: `url(${LightNoise.toString()});`,
|
||||
primary: GRAY_SCALE.gray0,
|
||||
secondary: GRAY_SCALE.gray10,
|
||||
tertiary: GRAY_SCALE.gray15,
|
||||
quaternary: GRAY_SCALE.gray20,
|
||||
danger: COLOR.red10,
|
||||
transparent: {
|
||||
primary: RGBA(GRAY_SCALE.gray0, 0.8),
|
||||
secondary: RGBA(GRAY_SCALE.gray10, 0.8),
|
||||
strong: RGBA(GRAY_SCALE.gray100, 0.16),
|
||||
medium: RGBA(GRAY_SCALE.gray100, 0.08),
|
||||
light: RGBA(GRAY_SCALE.gray100, 0.04),
|
||||
lighter: RGBA(GRAY_SCALE.gray100, 0.02),
|
||||
danger: RGBA(COLOR.red, 0.08),
|
||||
},
|
||||
overlay: RGBA(GRAY_SCALE.gray80, 0.8),
|
||||
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
|
||||
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
export const blur = {
|
||||
export const BLUR = {
|
||||
light: 'blur(6px)',
|
||||
strong: 'blur(20px)',
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
export const BORDER_COMMON = {
|
||||
radius: {
|
||||
xs: '2px',
|
||||
sm: '4px',
|
||||
md: '8px',
|
||||
xl: '20px',
|
||||
pill: '999px',
|
||||
rounded: '100%',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon';
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const BORDER_DARK = {
|
||||
color: {
|
||||
strong: GRAY_SCALE.gray55,
|
||||
medium: GRAY_SCALE.gray65,
|
||||
light: GRAY_SCALE.gray70,
|
||||
secondaryInverted: GRAY_SCALE.gray35,
|
||||
inverted: GRAY_SCALE.gray20,
|
||||
danger: COLOR.red70,
|
||||
},
|
||||
...BORDER_COMMON,
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
import { BORDER_COMMON } from '@/ui/theme/constants/BorderCommon';
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const BORDER_LIGHT = {
|
||||
color: {
|
||||
strong: GRAY_SCALE.gray25,
|
||||
medium: GRAY_SCALE.gray20,
|
||||
light: GRAY_SCALE.gray15,
|
||||
secondaryInverted: GRAY_SCALE.gray50,
|
||||
inverted: GRAY_SCALE.gray60,
|
||||
danger: COLOR.red20,
|
||||
},
|
||||
...BORDER_COMMON,
|
||||
};
|
||||
@ -0,0 +1,18 @@
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
export const BOX_SHADOW_DARK = {
|
||||
light: `0px 2px 4px 0px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.04,
|
||||
)}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
|
||||
strong: `2px 4px 16px 0px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.16,
|
||||
)}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
|
||||
underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
|
||||
superHeavy: `2px 4px 16px 0px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.12,
|
||||
)}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
export const BOX_SHADOW_LIGHT = {
|
||||
light: `0px 2px 4px 0px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.04,
|
||||
)}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
|
||||
strong: `2px 4px 16px 0px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.12,
|
||||
)}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
|
||||
underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
|
||||
superHeavy: `0px 0px 8px 0px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.16,
|
||||
)}, 0px 8px 64px -16px ${RGBA(
|
||||
GRAY_SCALE.gray100,
|
||||
0.48,
|
||||
)}, 0px 24px 56px -16px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
|
||||
import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
|
||||
|
||||
export const COLOR = {
|
||||
...MAIN_COLORS,
|
||||
...SECONDARY_COLORS,
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
export const FONT_COMMON = {
|
||||
size: {
|
||||
xxs: '0.625rem',
|
||||
xs: '0.85rem',
|
||||
sm: '0.92rem',
|
||||
md: '1rem',
|
||||
lg: '1.23rem',
|
||||
xl: '1.54rem',
|
||||
xxl: '1.85rem',
|
||||
},
|
||||
weight: {
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
semiBold: 600,
|
||||
},
|
||||
family: 'Inter, sans-serif',
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { FONT_COMMON } from '@/ui/theme/constants/FontCommon';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const FONT_DARK = {
|
||||
color: {
|
||||
primary: GRAY_SCALE.gray20,
|
||||
secondary: GRAY_SCALE.gray35,
|
||||
tertiary: GRAY_SCALE.gray45,
|
||||
light: GRAY_SCALE.gray50,
|
||||
extraLight: GRAY_SCALE.gray55,
|
||||
inverted: GRAY_SCALE.gray100,
|
||||
danger: COLOR.red,
|
||||
},
|
||||
...FONT_COMMON,
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { FONT_COMMON } from '@/ui/theme/constants/FontCommon';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const FONT_LIGHT = {
|
||||
color: {
|
||||
primary: GRAY_SCALE.gray60,
|
||||
secondary: GRAY_SCALE.gray50,
|
||||
tertiary: GRAY_SCALE.gray40,
|
||||
light: GRAY_SCALE.gray35,
|
||||
extraLight: GRAY_SCALE.gray30,
|
||||
inverted: GRAY_SCALE.gray0,
|
||||
danger: COLOR.red,
|
||||
},
|
||||
...FONT_COMMON,
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
export const GRAY_SCALE = {
|
||||
gray100: '#000000',
|
||||
gray90: '#141414',
|
||||
gray85: '#171717',
|
||||
gray80: '#1b1b1b',
|
||||
gray75: '#1d1d1d',
|
||||
gray70: '#222222',
|
||||
gray65: '#292929',
|
||||
gray60: '#333333',
|
||||
gray55: '#4c4c4c',
|
||||
gray50: '#666666',
|
||||
gray45: '#818181',
|
||||
gray40: '#999999',
|
||||
gray35: '#b3b3b3',
|
||||
gray30: '#cccccc',
|
||||
gray25: '#d6d6d6',
|
||||
gray20: '#ebebeb',
|
||||
gray15: '#f1f1f1',
|
||||
gray10: '#fcfcfc',
|
||||
gray0: '#ffffff',
|
||||
};
|
||||
@ -0,0 +1,8 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
export const HOVER_BACKGROUND = (props: any) => css`
|
||||
transition: background 0.1s ease;
|
||||
&:hover {
|
||||
background: ${props.theme.background.transparent.light};
|
||||
}
|
||||
`;
|
||||
@ -1,4 +1,4 @@
|
||||
export const icon = {
|
||||
export const ICON = {
|
||||
size: {
|
||||
sm: 14,
|
||||
md: 16,
|
||||
@ -0,0 +1,5 @@
|
||||
import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
|
||||
|
||||
export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS) as ThemeColor[];
|
||||
|
||||
export type ThemeColor = keyof typeof MAIN_COLORS;
|
||||
@ -0,0 +1,15 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const MAIN_COLORS = {
|
||||
green: '#55ef3c',
|
||||
turquoise: '#15de8f',
|
||||
sky: '#00e0ff',
|
||||
blue: '#1961ed',
|
||||
purple: '#915ffd',
|
||||
pink: '#f54bd0',
|
||||
red: '#f83e3e',
|
||||
orange: '#ff7222',
|
||||
yellow: '#ffd338',
|
||||
gray: GRAY_SCALE.gray30,
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export const MOBILE_VIEWPORT = 768;
|
||||
@ -1,4 +1,4 @@
|
||||
export const modal = {
|
||||
export const MODAL = {
|
||||
size: {
|
||||
sm: '300px',
|
||||
md: '400px',
|
||||
@ -0,0 +1,9 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { ThemeType } from './ThemeLight';
|
||||
|
||||
export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
|
||||
backdrop-filter: blur(8px);
|
||||
background: ${props.theme.background.transparent.secondary};
|
||||
box-shadow: ${props.theme.boxShadow.strong};
|
||||
`;
|
||||
@ -0,0 +1,8 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import hexRgb from 'hex-rgb';
|
||||
|
||||
export const RGBA = (hex: string, alpha: number) => {
|
||||
return `rgba(${hexRgb(hex, { format: 'array' })
|
||||
.slice(0, -1)
|
||||
.join(',')},${alpha})`;
|
||||
};
|
||||
@ -1,46 +1,7 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import hexRgb from 'hex-rgb';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const grayScale = {
|
||||
gray100: '#000000',
|
||||
gray90: '#141414',
|
||||
gray85: '#171717',
|
||||
gray80: '#1b1b1b',
|
||||
gray75: '#1d1d1d',
|
||||
gray70: '#222222',
|
||||
gray65: '#292929',
|
||||
gray60: '#333333',
|
||||
gray55: '#4c4c4c',
|
||||
gray50: '#666666',
|
||||
gray45: '#818181',
|
||||
gray40: '#999999',
|
||||
gray35: '#b3b3b3',
|
||||
gray30: '#cccccc',
|
||||
gray25: '#d6d6d6',
|
||||
gray20: '#ebebeb',
|
||||
gray15: '#f1f1f1',
|
||||
gray10: '#fcfcfc',
|
||||
gray0: '#ffffff',
|
||||
};
|
||||
|
||||
export const mainColors = {
|
||||
green: '#55ef3c',
|
||||
turquoise: '#15de8f',
|
||||
sky: '#00e0ff',
|
||||
blue: '#1961ed',
|
||||
purple: '#915ffd',
|
||||
pink: '#f54bd0',
|
||||
red: '#f83e3e',
|
||||
orange: '#ff7222',
|
||||
yellow: '#ffd338',
|
||||
gray: grayScale.gray30,
|
||||
};
|
||||
|
||||
export type ThemeColor = keyof typeof mainColors;
|
||||
|
||||
export const mainColorNames = Object.keys(mainColors) as ThemeColor[];
|
||||
|
||||
export const secondaryColors = {
|
||||
export const SECONDARY_COLORS = {
|
||||
yellow80: '#2e2a1a',
|
||||
yellow70: '#453d1e',
|
||||
yellow60: '#746224',
|
||||
@ -122,14 +83,14 @@ export const secondaryColors = {
|
||||
orange20: '#ffe3d3',
|
||||
orange10: '#fff1e9',
|
||||
|
||||
gray80: grayScale.gray70,
|
||||
gray70: grayScale.gray65,
|
||||
gray60: grayScale.gray55,
|
||||
gray50: grayScale.gray40,
|
||||
gray40: grayScale.gray25,
|
||||
gray30: grayScale.gray20,
|
||||
gray20: grayScale.gray15,
|
||||
gray10: grayScale.gray10,
|
||||
gray80: GRAY_SCALE.gray70,
|
||||
gray70: GRAY_SCALE.gray65,
|
||||
gray60: GRAY_SCALE.gray55,
|
||||
gray50: GRAY_SCALE.gray40,
|
||||
gray40: GRAY_SCALE.gray25,
|
||||
gray30: GRAY_SCALE.gray20,
|
||||
gray20: GRAY_SCALE.gray15,
|
||||
gray10: GRAY_SCALE.gray10,
|
||||
blueAccent90: '#141a25',
|
||||
blueAccent85: '#151d2e',
|
||||
blueAccent80: '#152037',
|
||||
@ -143,13 +104,3 @@ export const secondaryColors = {
|
||||
blueAccent15: '#edf2fe',
|
||||
blueAccent10: '#f5f9fd',
|
||||
};
|
||||
|
||||
export const color = {
|
||||
...mainColors,
|
||||
...secondaryColors,
|
||||
};
|
||||
|
||||
export const rgba = (hex: string, alpha: number) => {
|
||||
const rgb = hexRgb(hex, { format: 'array' }).slice(0, -1).join(',');
|
||||
return `rgba(${rgb},${alpha})`;
|
||||
};
|
||||
@ -0,0 +1,28 @@
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
|
||||
export const TAG_DARK = {
|
||||
text: {
|
||||
green: COLOR.green10,
|
||||
turquoise: COLOR.turquoise10,
|
||||
sky: COLOR.sky10,
|
||||
blue: COLOR.blue10,
|
||||
purple: COLOR.purple10,
|
||||
pink: COLOR.pink10,
|
||||
red: COLOR.red10,
|
||||
orange: COLOR.orange10,
|
||||
yellow: COLOR.yellow10,
|
||||
gray: COLOR.gray10,
|
||||
},
|
||||
background: {
|
||||
green: COLOR.green60,
|
||||
turquoise: COLOR.turquoise60,
|
||||
sky: COLOR.sky60,
|
||||
blue: COLOR.blue60,
|
||||
purple: COLOR.purple60,
|
||||
pink: COLOR.pink60,
|
||||
red: COLOR.red60,
|
||||
orange: COLOR.orange60,
|
||||
yellow: COLOR.yellow60,
|
||||
gray: COLOR.gray60,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,28 @@
|
||||
import { COLOR } from './Colors';
|
||||
|
||||
export const TAG_LIGHT = {
|
||||
text: {
|
||||
green: COLOR.green60,
|
||||
turquoise: COLOR.turquoise60,
|
||||
sky: COLOR.sky60,
|
||||
blue: COLOR.blue60,
|
||||
purple: COLOR.purple60,
|
||||
pink: COLOR.pink60,
|
||||
red: COLOR.red60,
|
||||
orange: COLOR.orange60,
|
||||
yellow: COLOR.yellow60,
|
||||
gray: COLOR.gray60,
|
||||
},
|
||||
background: {
|
||||
green: COLOR.green20,
|
||||
turquoise: COLOR.turquoise20,
|
||||
sky: COLOR.sky20,
|
||||
blue: COLOR.blue20,
|
||||
purple: COLOR.purple20,
|
||||
pink: COLOR.pink20,
|
||||
red: COLOR.red20,
|
||||
orange: COLOR.orange20,
|
||||
yellow: COLOR.yellow20,
|
||||
gray: COLOR.gray20,
|
||||
},
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
export const text = {
|
||||
export const TEXT = {
|
||||
lineHeight: {
|
||||
lg: 1.5,
|
||||
md: 1.2,
|
||||
@ -1,14 +1,8 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { ThemeType } from './theme';
|
||||
import { ThemeType } from './ThemeLight';
|
||||
|
||||
export const overlayBackground = (props: { theme: ThemeType }) => css`
|
||||
backdrop-filter: blur(8px);
|
||||
background: ${props.theme.background.transparent.secondary};
|
||||
box-shadow: ${props.theme.boxShadow.strong};
|
||||
`;
|
||||
|
||||
export const textInputStyle = (props: { theme: ThemeType }) => css`
|
||||
export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css`
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: ${props.theme.font.color.primary};
|
||||
@ -25,10 +19,3 @@ export const textInputStyle = (props: { theme: ThemeType }) => css`
|
||||
font-weight: ${props.theme.font.weight.medium};
|
||||
}
|
||||
`;
|
||||
|
||||
export const hoverBackground = (props: any) => css`
|
||||
transition: background 0.1s ease;
|
||||
&:hover {
|
||||
background: ${props.theme.background.transparent.light};
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,44 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import { ANIMATION } from '@/ui/theme/constants/Animation';
|
||||
import { BLUR } from '@/ui/theme/constants/Blur';
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { ICON } from '@/ui/theme/constants/Icon';
|
||||
import { MODAL } from '@/ui/theme/constants/Modal';
|
||||
import { TEXT } from '@/ui/theme/constants/Text';
|
||||
|
||||
export const THEME_COMMON = {
|
||||
color: COLOR,
|
||||
grayScale: GRAY_SCALE,
|
||||
icon: ICON,
|
||||
modal: MODAL,
|
||||
text: TEXT,
|
||||
blur: BLUR,
|
||||
animation: ANIMATION,
|
||||
snackBar: {
|
||||
success: {
|
||||
background: '#16A26B',
|
||||
color: '#D0F8E9',
|
||||
},
|
||||
error: {
|
||||
background: '#B43232',
|
||||
color: '#FED8D8',
|
||||
},
|
||||
info: {
|
||||
background: COLOR.gray80,
|
||||
color: GRAY_SCALE.gray0,
|
||||
},
|
||||
},
|
||||
spacingMultiplicator: 4,
|
||||
spacing: (...args: number[]) =>
|
||||
args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
|
||||
betweenSiblingsGap: `2px`,
|
||||
table: {
|
||||
horizontalCellMargin: '8px',
|
||||
checkboxColumnWidth: '32px',
|
||||
horizontalCellPadding: '8px',
|
||||
},
|
||||
rightDrawerWidth: '500px',
|
||||
clickableElementBackgroundTransition: 'background 0.1s ease',
|
||||
lastLayerZIndex: 2147483647,
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
import { ACCENT_DARK } from '@/ui/theme/constants/AccentDark';
|
||||
import { BACKGROUND_DARK } from '@/ui/theme/constants/BackgroundDark';
|
||||
import { BORDER_DARK } from '@/ui/theme/constants/BorderDark';
|
||||
import { BOX_SHADOW_DARK } from '@/ui/theme/constants/BoxShadowDark';
|
||||
import { FONT_DARK } from '@/ui/theme/constants/FontDark';
|
||||
import { TAG_DARK } from '@/ui/theme/constants/TagDark';
|
||||
import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon';
|
||||
import { ThemeType } from '@/ui/theme/constants/ThemeLight';
|
||||
|
||||
export const THEME_DARK: ThemeType = {
|
||||
...THEME_COMMON,
|
||||
...{
|
||||
accent: ACCENT_DARK,
|
||||
background: BACKGROUND_DARK,
|
||||
border: BORDER_DARK,
|
||||
tag: TAG_DARK,
|
||||
boxShadow: BOX_SHADOW_DARK,
|
||||
font: FONT_DARK,
|
||||
name: 'dark',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
import { ACCENT_LIGHT } from '@/ui/theme/constants/AccentLight';
|
||||
import { BACKGROUND_LIGHT } from '@/ui/theme/constants/BackgroundLight';
|
||||
import { BORDER_LIGHT } from '@/ui/theme/constants/BorderLight';
|
||||
import { BOX_SHADOW_LIGHT } from '@/ui/theme/constants/BoxShadowLight';
|
||||
import { FONT_LIGHT } from '@/ui/theme/constants/FontLight';
|
||||
import { TAG_LIGHT } from '@/ui/theme/constants/TagLight';
|
||||
import { THEME_COMMON } from '@/ui/theme/constants/ThemeCommon';
|
||||
|
||||
export const THEME_LIGHT = {
|
||||
...THEME_COMMON,
|
||||
...{
|
||||
accent: ACCENT_LIGHT,
|
||||
background: BACKGROUND_LIGHT,
|
||||
border: BORDER_LIGHT,
|
||||
tag: TAG_LIGHT,
|
||||
boxShadow: BOX_SHADOW_LIGHT,
|
||||
font: FONT_LIGHT,
|
||||
name: 'light',
|
||||
},
|
||||
};
|
||||
|
||||
export type ThemeType = typeof THEME_LIGHT;
|
||||
@ -1,19 +0,0 @@
|
||||
import { color } from './colors';
|
||||
|
||||
export const accentLight = {
|
||||
primary: color.blueAccent25,
|
||||
secondary: color.blueAccent20,
|
||||
tertiary: color.blueAccent15,
|
||||
quaternary: color.blueAccent10,
|
||||
accent3570: color.blueAccent35,
|
||||
accent4060: color.blueAccent40,
|
||||
};
|
||||
|
||||
export const accentDark = {
|
||||
primary: color.blueAccent75,
|
||||
secondary: color.blueAccent80,
|
||||
tertiary: color.blueAccent85,
|
||||
quaternary: color.blueAccent90,
|
||||
accent3570: color.blueAccent70,
|
||||
accent4060: color.blueAccent60,
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import DarkNoise from '../assets/dark-noise.jpg';
|
||||
import LightNoise from '../assets/light-noise.png';
|
||||
|
||||
import { color, grayScale, rgba } from './colors';
|
||||
|
||||
export const backgroundLight = {
|
||||
noisy: `url(${LightNoise.toString()});`,
|
||||
primary: grayScale.gray0,
|
||||
secondary: grayScale.gray10,
|
||||
tertiary: grayScale.gray15,
|
||||
quaternary: grayScale.gray20,
|
||||
danger: color.red10,
|
||||
transparent: {
|
||||
primary: rgba(grayScale.gray0, 0.8),
|
||||
secondary: rgba(grayScale.gray10, 0.8),
|
||||
strong: rgba(grayScale.gray100, 0.16),
|
||||
medium: rgba(grayScale.gray100, 0.08),
|
||||
light: rgba(grayScale.gray100, 0.04),
|
||||
lighter: rgba(grayScale.gray100, 0.02),
|
||||
danger: rgba(color.red, 0.08),
|
||||
},
|
||||
overlay: rgba(grayScale.gray80, 0.8),
|
||||
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
|
||||
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
|
||||
};
|
||||
|
||||
export const backgroundDark = {
|
||||
noisy: `url(${DarkNoise.toString()});`,
|
||||
primary: grayScale.gray85,
|
||||
secondary: grayScale.gray80,
|
||||
tertiary: grayScale.gray75,
|
||||
quaternary: grayScale.gray70,
|
||||
danger: color.red80,
|
||||
transparent: {
|
||||
primary: rgba(grayScale.gray85, 0.8),
|
||||
secondary: rgba(grayScale.gray80, 0.8),
|
||||
strong: rgba(grayScale.gray0, 0.14),
|
||||
medium: rgba(grayScale.gray0, 0.1),
|
||||
light: rgba(grayScale.gray0, 0.06),
|
||||
lighter: rgba(grayScale.gray0, 0.03),
|
||||
danger: rgba(color.red, 0.08),
|
||||
},
|
||||
overlay: rgba(grayScale.gray80, 0.8),
|
||||
radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
|
||||
radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
import { color, grayScale } from './colors';
|
||||
|
||||
const common = {
|
||||
radius: {
|
||||
xs: '2px',
|
||||
sm: '4px',
|
||||
md: '8px',
|
||||
xl: '20px',
|
||||
pill: '999px',
|
||||
rounded: '100%',
|
||||
},
|
||||
};
|
||||
|
||||
export const borderLight = {
|
||||
color: {
|
||||
strong: grayScale.gray25,
|
||||
medium: grayScale.gray20,
|
||||
light: grayScale.gray15,
|
||||
secondaryInverted: grayScale.gray50,
|
||||
inverted: grayScale.gray60,
|
||||
danger: color.red20,
|
||||
},
|
||||
...common,
|
||||
};
|
||||
|
||||
export const borderDark = {
|
||||
color: {
|
||||
strong: grayScale.gray55,
|
||||
medium: grayScale.gray65,
|
||||
light: grayScale.gray70,
|
||||
secondaryInverted: grayScale.gray35,
|
||||
inverted: grayScale.gray20,
|
||||
danger: color.red70,
|
||||
},
|
||||
...common,
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
import { grayScale, rgba } from './colors';
|
||||
|
||||
export const boxShadowLight = {
|
||||
light: `0px 2px 4px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.04,
|
||||
)}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
|
||||
strong: `2px 4px 16px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.12,
|
||||
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
|
||||
underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
|
||||
superHeavy: `0px 0px 8px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.16,
|
||||
)}, 0px 8px 64px -16px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.48,
|
||||
)}, 0px 24px 56px -16px ${rgba(grayScale.gray100, 0.08)}`,
|
||||
};
|
||||
|
||||
export const boxShadowDark = {
|
||||
light: `0px 2px 4px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.04,
|
||||
)}, 0px 0px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
|
||||
strong: `2px 4px 16px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.16,
|
||||
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
|
||||
underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
|
||||
superHeavy: `2px 4px 16px 0px ${rgba(
|
||||
grayScale.gray100,
|
||||
0.12,
|
||||
)}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
|
||||
};
|
||||
@ -1,45 +0,0 @@
|
||||
import { color, grayScale } from './colors';
|
||||
|
||||
const common = {
|
||||
size: {
|
||||
xxs: '0.625rem',
|
||||
xs: '0.85rem',
|
||||
sm: '0.92rem',
|
||||
md: '1rem',
|
||||
lg: '1.23rem',
|
||||
xl: '1.54rem',
|
||||
xxl: '1.85rem',
|
||||
},
|
||||
weight: {
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
semiBold: 600,
|
||||
},
|
||||
family: 'Inter, sans-serif',
|
||||
};
|
||||
|
||||
export const fontLight = {
|
||||
color: {
|
||||
primary: grayScale.gray60,
|
||||
secondary: grayScale.gray50,
|
||||
tertiary: grayScale.gray40,
|
||||
light: grayScale.gray35,
|
||||
extraLight: grayScale.gray30,
|
||||
inverted: grayScale.gray0,
|
||||
danger: color.red,
|
||||
},
|
||||
...common,
|
||||
};
|
||||
|
||||
export const fontDark = {
|
||||
color: {
|
||||
primary: grayScale.gray20,
|
||||
secondary: grayScale.gray35,
|
||||
tertiary: grayScale.gray45,
|
||||
light: grayScale.gray50,
|
||||
extraLight: grayScale.gray55,
|
||||
inverted: grayScale.gray100,
|
||||
danger: color.red,
|
||||
},
|
||||
...common,
|
||||
};
|
||||
@ -1,55 +0,0 @@
|
||||
import { color } from './colors';
|
||||
|
||||
export const tagLight = {
|
||||
text: {
|
||||
green: color.green60,
|
||||
turquoise: color.turquoise60,
|
||||
sky: color.sky60,
|
||||
blue: color.blue60,
|
||||
purple: color.purple60,
|
||||
pink: color.pink60,
|
||||
red: color.red60,
|
||||
orange: color.orange60,
|
||||
yellow: color.yellow60,
|
||||
gray: color.gray60,
|
||||
},
|
||||
background: {
|
||||
green: color.green20,
|
||||
turquoise: color.turquoise20,
|
||||
sky: color.sky20,
|
||||
blue: color.blue20,
|
||||
purple: color.purple20,
|
||||
pink: color.pink20,
|
||||
red: color.red20,
|
||||
orange: color.orange20,
|
||||
yellow: color.yellow20,
|
||||
gray: color.gray20,
|
||||
},
|
||||
};
|
||||
|
||||
export const tagDark = {
|
||||
text: {
|
||||
green: color.green10,
|
||||
turquoise: color.turquoise10,
|
||||
sky: color.sky10,
|
||||
blue: color.blue10,
|
||||
purple: color.purple10,
|
||||
pink: color.pink10,
|
||||
red: color.red10,
|
||||
orange: color.orange10,
|
||||
yellow: color.yellow10,
|
||||
gray: color.gray10,
|
||||
},
|
||||
background: {
|
||||
green: color.green60,
|
||||
turquoise: color.turquoise60,
|
||||
sky: color.sky60,
|
||||
blue: color.blue60,
|
||||
purple: color.purple60,
|
||||
pink: color.pink60,
|
||||
red: color.red60,
|
||||
orange: color.orange60,
|
||||
yellow: color.yellow60,
|
||||
gray: color.gray60,
|
||||
},
|
||||
};
|
||||
@ -1,78 +0,0 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import { accentDark, accentLight } from './accent';
|
||||
import { animation } from './animation';
|
||||
import { backgroundDark, backgroundLight } from './background';
|
||||
import { blur } from './blur';
|
||||
import { borderDark, borderLight } from './border';
|
||||
import { boxShadowDark, boxShadowLight } from './boxShadow';
|
||||
import { color, grayScale } from './colors';
|
||||
import { fontDark, fontLight } from './font';
|
||||
import { icon } from './icon';
|
||||
import { modal } from './modal';
|
||||
import { tagDark, tagLight } from './tag';
|
||||
import { text } from './text';
|
||||
|
||||
const common = {
|
||||
color: color,
|
||||
grayScale: grayScale,
|
||||
icon: icon,
|
||||
modal: modal,
|
||||
text: text,
|
||||
blur: blur,
|
||||
animation: animation,
|
||||
snackBar: {
|
||||
success: {
|
||||
background: '#16A26B',
|
||||
color: '#D0F8E9',
|
||||
},
|
||||
error: {
|
||||
background: '#B43232',
|
||||
color: '#FED8D8',
|
||||
},
|
||||
info: {
|
||||
background: color.gray80,
|
||||
color: grayScale.gray0,
|
||||
},
|
||||
},
|
||||
spacingMultiplicator: 4,
|
||||
spacing: (...args: number[]) =>
|
||||
args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),
|
||||
betweenSiblingsGap: `2px`,
|
||||
table: {
|
||||
horizontalCellMargin: '8px',
|
||||
checkboxColumnWidth: '32px',
|
||||
horizontalCellPadding: '8px',
|
||||
},
|
||||
rightDrawerWidth: '500px',
|
||||
clickableElementBackgroundTransition: 'background 0.1s ease',
|
||||
lastLayerZIndex: 2147483647,
|
||||
};
|
||||
|
||||
export const lightTheme = {
|
||||
...common,
|
||||
...{
|
||||
accent: accentLight,
|
||||
background: backgroundLight,
|
||||
border: borderLight,
|
||||
tag: tagLight,
|
||||
boxShadow: boxShadowLight,
|
||||
font: fontLight,
|
||||
name: 'light',
|
||||
},
|
||||
};
|
||||
export type ThemeType = typeof lightTheme;
|
||||
|
||||
export const darkTheme: ThemeType = {
|
||||
...common,
|
||||
...{
|
||||
accent: accentDark,
|
||||
background: backgroundDark,
|
||||
border: borderDark,
|
||||
tag: tagDark,
|
||||
boxShadow: boxShadowDark,
|
||||
font: fontDark,
|
||||
name: 'dark',
|
||||
},
|
||||
};
|
||||
|
||||
export const MOBILE_VIEWPORT = 768;
|
||||
@ -1,7 +1,10 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
import { mainColorNames, ThemeColor } from '../constants/colors';
|
||||
import {
|
||||
MAIN_COLOR_NAMES,
|
||||
ThemeColor,
|
||||
} from '@/ui/theme/constants/MainColorNames';
|
||||
|
||||
export const themeColorSchema = z.enum(
|
||||
mainColorNames as [ThemeColor, ...ThemeColor[]],
|
||||
MAIN_COLOR_NAMES as [ThemeColor, ...ThemeColor[]],
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import { AnimationDuration } from '@/ui/theme/constants/animation';
|
||||
import { AnimationDuration } from '@/ui/theme/constants/Animation';
|
||||
|
||||
type AnimatedEaseInProps = Omit<
|
||||
React.ComponentProps<typeof motion.div>,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
import { AnimationDuration } from '@/ui/theme/constants/animation';
|
||||
import { AnimationDuration } from '@/ui/theme/constants/Animation';
|
||||
|
||||
type AnimatedEaseInOutProps = {
|
||||
isOpen: boolean;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
import { AnimationDuration } from '@/ui/theme/constants/animation';
|
||||
import { AnimationDuration } from '@/ui/theme/constants/Animation';
|
||||
|
||||
type AnimatedFadeOutProps = {
|
||||
isOpen: boolean;
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
} from '@air/react-drag-to-select';
|
||||
import { useTheme } from '@emotion/react';
|
||||
|
||||
import { rgba } from '@/ui/theme/constants/colors';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
import { useDragSelect } from '../hooks/useDragSelect';
|
||||
|
||||
@ -61,7 +61,7 @@ export const DragSelect = ({
|
||||
selectionProps: {
|
||||
style: {
|
||||
border: `1px solid ${theme.color.blue10}`,
|
||||
background: rgba(theme.color.blue30, 0.4),
|
||||
background: RGBA(theme.color.blue30, 0.4),
|
||||
position: `absolute`,
|
||||
zIndex: 99,
|
||||
},
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import { CustomHotkeyScopes } from '@/ui/utilities/hotkey/types/CustomHotkeyScope';
|
||||
|
||||
export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = {
|
||||
commandMenu: true,
|
||||
goto: false,
|
||||
keyboardShortcutMenu: false,
|
||||
};
|
||||
@ -1,13 +1,6 @@
|
||||
import { AppHotkeyScope } from '../types/AppHotkeyScope';
|
||||
import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
|
||||
import { HotkeyScope } from '../types/HotkeyScope';
|
||||
|
||||
export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = {
|
||||
commandMenu: true,
|
||||
goto: false,
|
||||
keyboardShortcutMenu: false,
|
||||
};
|
||||
|
||||
export const INITIAL_HOTKEYS_SCOPE: HotkeyScope = {
|
||||
scope: AppHotkeyScope.App,
|
||||
customScopes: {
|
||||
@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
import { DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES } from '../constants';
|
||||
import { DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES } from '../constants/DefaultHotkeysScopeCustomScopes';
|
||||
import { currentHotkeyScopeState } from '../states/internal/currentHotkeyScopeState';
|
||||
import { internalHotkeysEnabledScopesState } from '../states/internal/internalHotkeysEnabledScopesState';
|
||||
import { AppHotkeyScope } from '../types/AppHotkeyScope';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
import { INITIAL_HOTKEYS_SCOPE } from '../../constants';
|
||||
import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope';
|
||||
import { HotkeyScope } from '../../types/HotkeyScope';
|
||||
|
||||
export const currentHotkeyScopeState = atom<HotkeyScope>({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
|
||||
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
|
||||
|
||||
export const useIsMobile = () =>
|
||||
useMediaQuery({ query: `(max-width: ${MOBILE_VIEWPORT}px)` });
|
||||
|
||||
Reference in New Issue
Block a user