* feat: configure eslint rules by replicating those in the twenty-front package and introduce scripts for linting, formatting code and removing build output * fix: ensure each file of the extension package satisfies linting rules and disable some rules where necessary * fix: update relative imports to absolute imports throughout extension code with the defined tilde and at symbols * fix: import the updated ui module from the front package to the chrome extension package to prevent eslint rules from breaking subject to the recent merged changes into main * fix: commit the case change for files that were missed by Git in the earlier commits due to default configuration
This commit is contained in:
Abdullah
19
packages/twenty-chrome-extension/.eslintrc-ci.cjs
Normal file
19
packages/twenty-chrome-extension/.eslintrc-ci.cjs
Normal file
@ -0,0 +1,19 @@
|
||||
module.exports = {
|
||||
extends: ['./.eslintrc.cjs'],
|
||||
rules: {
|
||||
'no-console': 'error',
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
'.storybook/**/*',
|
||||
'**/*.stories.tsx',
|
||||
'**/*.test.ts',
|
||||
'**/*.test.tsx',
|
||||
],
|
||||
rules: {
|
||||
'no-console': 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1,18 +1,61 @@
|
||||
// eslint-disable-next-line
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:@nx/react',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react-hooks/recommended',
|
||||
'plugin:storybook/recommended',
|
||||
'../../.eslintrc.js',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['react-refresh'],
|
||||
plugins: ['react-hooks', 'react-refresh'],
|
||||
ignorePatterns: ['!**/*', 'node_modules', 'dist'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
'@nx/workspace-effect-components': 'error',
|
||||
'@nx/workspace-no-hardcoded-colors': 'error',
|
||||
'@nx/workspace-matching-state-variable': 'error',
|
||||
'@nx/workspace-sort-css-properties-alphabetically': 'error',
|
||||
'@nx/workspace-styled-components-prefixed-with-styled': 'error',
|
||||
'@nx/workspace-no-state-useref': 'error',
|
||||
'@nx/workspace-component-props-naming': 'error',
|
||||
|
||||
'react/no-unescaped-entities': 'off',
|
||||
'react/prop-types': 'off',
|
||||
'react/jsx-key': 'off',
|
||||
'react/display-name': 'off',
|
||||
'react/jsx-uses-react': 'off',
|
||||
'react/react-in-jsx-scope': 'off',
|
||||
'react/jsx-no-useless-fragment': 'off',
|
||||
'react/jsx-props-no-spreading': [
|
||||
'error',
|
||||
{
|
||||
explicitSpread: 'ignore',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
|
||||
parserOptions: {
|
||||
project: ['packages/twenty-chrome-extension/tsconfig.*?.json'],
|
||||
},
|
||||
rules: {},
|
||||
},
|
||||
{
|
||||
files: ['.storybook/main.@(js|cjs|mjs|ts)'],
|
||||
rules: {
|
||||
'storybook/no-uninstalled-addons': [
|
||||
'error',
|
||||
{ packageJsonLocation: path.resolve('../../package.json') },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['.storybook/**/*', '**/*.stories.tsx', '**/*.test.@(ts|tsx)'],
|
||||
rules: {
|
||||
'no-console': 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -6,8 +6,12 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"nx": "NX_DEFAULT_PROJECT=twenty-chrome-extension node ../../node_modules/nx/bin/nx.js",
|
||||
"start": "vite",
|
||||
"build": "tsc && vite build"
|
||||
"clean": "rimraf ./dist",
|
||||
"start": "yarn clean && vite",
|
||||
"build": "yarn clean && tsc && vite build",
|
||||
"lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
|
||||
"fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
|
||||
"fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/chrome": "^0.0.256"
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import { openOptionsPage } from './utils/openOptionsPage';
|
||||
|
||||
console.log('Background Script Works');
|
||||
import { openOptionsPage } from '~/background/utils/openOptionsPage';
|
||||
|
||||
// Open options page programmatically in a new tab.
|
||||
chrome.runtime.onInstalled.addListener(function (details) {
|
||||
chrome.runtime.onInstalled.addListener((details) => {
|
||||
if (details.reason === 'install') {
|
||||
openOptionsPage();
|
||||
}
|
||||
});
|
||||
|
||||
// Open options page when extension icon is clicked.
|
||||
chrome.action.onClicked.addListener(function () {
|
||||
chrome.action.onClicked.addListener(() => {
|
||||
openOptionsPage();
|
||||
});
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
function createNewButton(
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
const createNewButton = (
|
||||
text: string,
|
||||
onClickHandler: () => void,
|
||||
): HTMLButtonElement {
|
||||
): HTMLButtonElement => {
|
||||
const newButton: HTMLButtonElement = document.createElement('button');
|
||||
newButton.textContent = text;
|
||||
|
||||
@ -52,6 +53,6 @@ function createNewButton(
|
||||
});
|
||||
|
||||
return newButton;
|
||||
}
|
||||
};
|
||||
|
||||
export default createNewButton;
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import handleQueryParams from '../utils/handleQueryParams';
|
||||
import requestDb from '../utils/requestDb';
|
||||
import createNewButton from './createButton';
|
||||
import extractCompanyLinkedinLink from './utils/extractCompanyLinkedinLink';
|
||||
import extractDomain from './utils/extractDomain';
|
||||
import createNewButton from '~/contentScript/createButton';
|
||||
import extractCompanyLinkedinLink from '~/contentScript/utils/extractCompanyLinkedinLink';
|
||||
import extractDomain from '~/contentScript/utils/extractDomain';
|
||||
import handleQueryParams from '~/utils/handleQueryParams';
|
||||
import requestDb from '~/utils/requestDb';
|
||||
|
||||
function insertButtonForCompany(): void {
|
||||
const insertButtonForCompany = (): void => {
|
||||
// Select the element in which to create the button.
|
||||
const parentDiv: HTMLDivElement | null = document.querySelector(
|
||||
'.org-top-card-primary-actions__inner',
|
||||
@ -101,6 +101,6 @@ function insertButtonForCompany(): void {
|
||||
|
||||
Object.assign(newButtonCompany.style, buttonSpecificStyles);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default insertButtonForCompany;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import handleQueryParams from '../utils/handleQueryParams';
|
||||
import requestDb from '../utils/requestDb';
|
||||
import createNewButton from './createButton';
|
||||
import extractFirstAndLastName from './utils/extractFirstAndLastName';
|
||||
import createNewButton from '~/contentScript/createButton';
|
||||
import extractFirstAndLastName from '~/contentScript/utils/extractFirstAndLastName';
|
||||
import handleQueryParams from '~/utils/handleQueryParams';
|
||||
import requestDb from '~/utils/requestDb';
|
||||
|
||||
function insertButtonForPerson(): void {
|
||||
const insertButtonForPerson = (): void => {
|
||||
// Select the element in which to create the button.
|
||||
const parentDiv: HTMLDivElement | null = document.querySelector(
|
||||
'.pv-top-card-v2-ctas',
|
||||
@ -114,6 +114,6 @@ function insertButtonForPerson(): void {
|
||||
|
||||
Object.assign(newButtonPerson.style, buttonSpecificStyles);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default insertButtonForPerson;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import insertButtonForPerson from './extractPersonProfile';
|
||||
import insertButtonForCompany from './extractCompanyProfile';
|
||||
import insertButtonForCompany from '~/contentScript/extractCompanyProfile';
|
||||
import insertButtonForPerson from '~/contentScript/extractPersonProfile';
|
||||
|
||||
// Inject buttons into the DOM when SPA is reloaded on the resource url.
|
||||
// e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
function extractDomain(url: string | null) {
|
||||
const extractDomain = (url: string | null) => {
|
||||
if (!url) return '';
|
||||
|
||||
const hostname = new URL(url).hostname;
|
||||
@ -10,6 +10,6 @@ function extractDomain(url: string | null) {
|
||||
}
|
||||
|
||||
return domain;
|
||||
}
|
||||
};
|
||||
|
||||
export default extractDomain;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { defineManifest } from '@crxjs/vite-plugin';
|
||||
|
||||
import packageData from '../package.json';
|
||||
|
||||
export default defineManifest({
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { ApiKeyForm } from './modules/api-key/components/ApiKeyForm';
|
||||
|
||||
import { ApiKeyForm } from '@/api-key/components/ApiKeyForm';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.noisy};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const Options = () => {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './Options';
|
||||
import '../index.css';
|
||||
import { AppThemeProvider } from './modules/ui/theme/components/AppThemeProvider';
|
||||
import { ThemeType } from './modules/ui/theme/constants/theme';
|
||||
|
||||
import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
|
||||
import { ThemeType } from '@/ui/theme/constants/ThemeLight';
|
||||
import App from '~/options/Options';
|
||||
|
||||
import '~/index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
|
||||
<AppThemeProvider>
|
||||
@ -14,6 +16,5 @@ ReactDOM.createRoot(document.getElementById('app') as HTMLElement).render(
|
||||
);
|
||||
|
||||
declare module '@emotion/react' {
|
||||
// eslint-disable-next-line @typescript-eslint/no-empty-interface
|
||||
export interface Theme extends ThemeType {}
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { H2Title } from '../../ui/display/typography/components/H2Title';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { TextInput } from '../../ui/input/components/TextInput';
|
||||
import { Button } from '../../ui/input/button/Button';
|
||||
import { Toggle } from '../../ui/input/components/Toggle';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
||||
import { Button } from '@/ui/input/button/Button';
|
||||
import { TextInput } from '@/ui/input/components/TextInput';
|
||||
import { Toggle } from '@/ui/input/components/Toggle';
|
||||
|
||||
const StyledContainer = styled.div<{ isToggleOn: boolean }>`
|
||||
width: 400px;
|
||||
@ -18,8 +19,8 @@ const StyledContainer = styled.div<{ isToggleOn: boolean }>`
|
||||
`;
|
||||
|
||||
const StyledHeader = styled.header`
|
||||
text-align: center;
|
||||
margin-bottom: ${({ theme }) => theme.spacing(8)};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const StyledImg = styled.img``;
|
||||
|
||||
@ -29,7 +29,7 @@ const StyledLabel = styled.span`
|
||||
const StyledInputContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid ${({ theme }) => theme.color.gray30};
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
`;
|
||||
@ -46,12 +46,12 @@ const StyledInput = styled.input`
|
||||
font-size: 14px;
|
||||
|
||||
&::placeholder {
|
||||
color: #aaa;
|
||||
color: ${({ theme }) => theme.font.color.light};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledErrorHelper = styled.div`
|
||||
color: #ff0000;
|
||||
color: ${({ theme }) => theme.color.red};
|
||||
font-size: 12px;
|
||||
padding: 5px 0;
|
||||
`;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
|
||||
import { lightTheme } from '../constants/theme';
|
||||
import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
|
||||
|
||||
type AppThemeProviderProps = {
|
||||
children: JSX.Element;
|
||||
};
|
||||
|
||||
const AppThemeProvider: React.FC<AppThemeProviderProps> = ({ children }) => {
|
||||
const theme = lightTheme;
|
||||
const theme = THEME_LIGHT;
|
||||
|
||||
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
|
||||
};
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import { COLOR } from '@/ui/theme/constants/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 '@/ui/theme/constants/Colors';
|
||||
|
||||
export const ACCENT_LIGHT = {
|
||||
primary: COLOR.blueAccent25,
|
||||
secondary: COLOR.blueAccent20,
|
||||
tertiary: COLOR.blueAccent15,
|
||||
quaternary: COLOR.blueAccent10,
|
||||
accent3570: COLOR.blueAccent35,
|
||||
accent4060: COLOR.blueAccent40,
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
export const ANIMATION = {
|
||||
duration: {
|
||||
instant: 0.075,
|
||||
fast: 0.15,
|
||||
normal: 0.3,
|
||||
},
|
||||
};
|
||||
|
||||
export type AnimationDuration = 'instant' | 'fast' | 'normal';
|
||||
@ -0,0 +1,26 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import DarkNoise from '@/ui/theme/assets/dark-noise.jpg';
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
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,26 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import LightNoise from '@/ui/theme/assets/light-noise.png';
|
||||
import { COLOR } from '@/ui/theme/constants/Colors';
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
import { RGBA } from '@/ui/theme/constants/Rgba';
|
||||
|
||||
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%)`,
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
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};
|
||||
}
|
||||
`;
|
||||
@ -0,0 +1,13 @@
|
||||
export const ICON = {
|
||||
size: {
|
||||
sm: 14,
|
||||
md: 16,
|
||||
lg: 20,
|
||||
xl: 40,
|
||||
},
|
||||
stroke: {
|
||||
sm: 1.6,
|
||||
md: 2,
|
||||
lg: 2.5,
|
||||
},
|
||||
};
|
||||
@ -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;
|
||||
@ -0,0 +1,7 @@
|
||||
export const MODAL = {
|
||||
size: {
|
||||
sm: '300px',
|
||||
md: '400px',
|
||||
lg: '53%',
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { ThemeType } from '@/ui/theme/constants/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})`;
|
||||
};
|
||||
@ -0,0 +1,106 @@
|
||||
/* eslint-disable @nx/workspace-no-hardcoded-colors */
|
||||
import { GRAY_SCALE } from '@/ui/theme/constants/GrayScale';
|
||||
|
||||
export const SECONDARY_COLORS = {
|
||||
yellow80: '#2e2a1a',
|
||||
yellow70: '#453d1e',
|
||||
yellow60: '#746224',
|
||||
yellow50: '#b99b2e',
|
||||
yellow40: '#ffe074',
|
||||
yellow30: '#ffedaf',
|
||||
yellow20: '#fff6d7',
|
||||
yellow10: '#fffbeb',
|
||||
|
||||
green80: '#1d2d1b',
|
||||
green70: '#23421e',
|
||||
green60: '#2a5822',
|
||||
green50: '#42ae31',
|
||||
green40: '#88f477',
|
||||
green30: '#ccfac5',
|
||||
green20: '#ddfcd8',
|
||||
green10: '#eefdec',
|
||||
|
||||
turquoise80: '#172b23',
|
||||
turquoise70: '#173f2f',
|
||||
turquoise60: '#166747',
|
||||
turquoise50: '#16a26b',
|
||||
turquoise40: '#5be8b1',
|
||||
turquoise30: '#a1f2d2',
|
||||
turquoise20: '#d0f8e9',
|
||||
turquoise10: '#e8fcf4',
|
||||
|
||||
sky80: '#152b2e',
|
||||
sky70: '#123f45',
|
||||
sky60: '#0e6874',
|
||||
sky50: '#07a4b9',
|
||||
sky40: '#4de9ff',
|
||||
sky30: '#99f3ff',
|
||||
sky20: '#ccf9ff',
|
||||
sky10: '#e5fcff',
|
||||
|
||||
blue80: '#171e2c',
|
||||
blue70: '#172642',
|
||||
blue60: '#18356d',
|
||||
blue50: '#184bad',
|
||||
blue40: '#5e90f2',
|
||||
blue30: '#a3c0f8',
|
||||
blue20: '#d1dffb',
|
||||
blue10: '#e8effd',
|
||||
|
||||
purple80: '#231e2e',
|
||||
purple70: '#2f2545',
|
||||
purple60: '#483473',
|
||||
purple50: '#6c49b8',
|
||||
purple40: '#b28ffe',
|
||||
purple30: '#d3bffe',
|
||||
purple20: '#e9dfff',
|
||||
purple10: '#f4efff',
|
||||
|
||||
pink80: '#2d1c29',
|
||||
pink70: '#43213c',
|
||||
pink60: '#702c61',
|
||||
pink50: '#b23b98',
|
||||
pink40: '#f881de',
|
||||
pink30: '#fbb7ec',
|
||||
pink20: '#fddbf6',
|
||||
pink10: '#feedfa',
|
||||
|
||||
red80: '#2d1b1b',
|
||||
red70: '#441f1f',
|
||||
red60: '#712727',
|
||||
red50: '#b43232',
|
||||
red40: '#fa7878',
|
||||
red30: '#fcb2b2',
|
||||
red20: '#fed8d8',
|
||||
red10: '#feecec',
|
||||
|
||||
orange80: '#2e2018',
|
||||
orange70: '#452919',
|
||||
orange60: '#743b1b',
|
||||
orange50: '#b9571f',
|
||||
orange40: '#ff9c64',
|
||||
orange30: '#ffc7a7',
|
||||
orange20: '#ffe3d3',
|
||||
orange10: '#fff1e9',
|
||||
|
||||
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',
|
||||
blueAccent75: '#16233f',
|
||||
blueAccent70: '#17294a',
|
||||
blueAccent60: '#18356d',
|
||||
blueAccent40: '#a3c0f8',
|
||||
blueAccent35: '#c8d9fb',
|
||||
blueAccent25: '#dae6fc',
|
||||
blueAccent20: '#e2ecfd',
|
||||
blueAccent15: '#edf2fe',
|
||||
blueAccent10: '#f5f9fd',
|
||||
};
|
||||
@ -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 '@/ui/theme/constants/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,
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
export const TEXT = {
|
||||
lineHeight: {
|
||||
lg: 1.5,
|
||||
md: 1.2,
|
||||
},
|
||||
|
||||
iconSizeMedium: 16,
|
||||
iconSizeSmall: 14,
|
||||
|
||||
iconStrikeLight: 1.6,
|
||||
iconStrikeMedium: 2,
|
||||
iconStrikeBold: 2.5,
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { ThemeType } from '@/ui/theme/constants/ThemeLight';
|
||||
|
||||
export const TEXT_INPUT_STYLE = (props: { theme: ThemeType }) => css`
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: ${props.theme.font.color.primary};
|
||||
font-family: ${props.theme.font.family};
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
outline: none;
|
||||
padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: ${props.theme.font.color.light};
|
||||
font-family: ${props.theme.font.family};
|
||||
font-weight: ${props.theme.font.weight.medium};
|
||||
}
|
||||
`;
|
||||
@ -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,4 +1,4 @@
|
||||
export const animation = {
|
||||
export const ANIMATION = {
|
||||
duration: {
|
||||
instant: 0.075,
|
||||
fast: 0.15,
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
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,4 +1,4 @@
|
||||
export const blur = {
|
||||
export const BLUR = {
|
||||
light: 'blur(6px)',
|
||||
strong: 'blur(20px)',
|
||||
};
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
import { color, grayScale } from './colors';
|
||||
|
||||
const common = {
|
||||
radius: {
|
||||
xs: '2px',
|
||||
sm: '4px',
|
||||
md: '8px',
|
||||
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,27 +0,0 @@
|
||||
import { grayScale, rgba } from './colors';
|
||||
|
||||
export const boxShadowLight = {
|
||||
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
|
||||
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)}`,
|
||||
};
|
||||
|
||||
export const boxShadowDark = {
|
||||
extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
|
||||
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)}`,
|
||||
};
|
||||
@ -1,152 +1,7 @@
|
||||
import hexRgb from 'hex-rgb';
|
||||
import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
|
||||
import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
|
||||
|
||||
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 = {
|
||||
yellow: '#ffd338',
|
||||
green: '#55ef3c',
|
||||
turquoise: '#15de8f',
|
||||
sky: '#00e0ff',
|
||||
blue: '#1961ed',
|
||||
purple: '#915ffd',
|
||||
pink: '#f54bd0',
|
||||
red: '#f83e3e',
|
||||
orange: '#ff7222',
|
||||
gray: grayScale.gray30,
|
||||
};
|
||||
|
||||
export type ThemeColor = keyof typeof mainColors;
|
||||
|
||||
export const secondaryColors = {
|
||||
yellow80: '#2e2a1a',
|
||||
yellow70: '#453d1e',
|
||||
yellow60: '#746224',
|
||||
yellow50: '#b99b2e',
|
||||
yellow40: '#ffe074',
|
||||
yellow30: '#ffedaf',
|
||||
yellow20: '#fff6d7',
|
||||
yellow10: '#fffbeb',
|
||||
|
||||
green80: '#1d2d1b',
|
||||
green70: '#23421e',
|
||||
green60: '#2a5822',
|
||||
green50: '#42ae31',
|
||||
green40: '#88f477',
|
||||
green30: '#ccfac5',
|
||||
green20: '#ddfcd8',
|
||||
green10: '#eefdec',
|
||||
|
||||
turquoise80: '#172b23',
|
||||
turquoise70: '#173f2f',
|
||||
turquoise60: '#166747',
|
||||
turquoise50: '#16a26b',
|
||||
turquoise40: '#5be8b1',
|
||||
turquoise30: '#a1f2d2',
|
||||
turquoise20: '#d0f8e9',
|
||||
turquoise10: '#e8fcf4',
|
||||
|
||||
sky80: '#152b2e',
|
||||
sky70: '#123f45',
|
||||
sky60: '#0e6874',
|
||||
sky50: '#07a4b9',
|
||||
sky40: '#4de9ff',
|
||||
sky30: '#99f3ff',
|
||||
sky20: '#ccf9ff',
|
||||
sky10: '#e5fcff',
|
||||
|
||||
blue80: '#171e2c',
|
||||
blue70: '#172642',
|
||||
blue60: '#18356d',
|
||||
blue50: '#184bad',
|
||||
blue40: '#5e90f2',
|
||||
blue30: '#a3c0f8',
|
||||
blue20: '#d1dffb',
|
||||
blue10: '#e8effd',
|
||||
|
||||
purple80: '#231e2e',
|
||||
purple70: '#2f2545',
|
||||
purple60: '#483473',
|
||||
purple50: '#6c49b8',
|
||||
purple40: '#b28ffe',
|
||||
purple30: '#d3bffe',
|
||||
purple20: '#e9dfff',
|
||||
purple10: '#f4efff',
|
||||
|
||||
pink80: '#2d1c29',
|
||||
pink70: '#43213c',
|
||||
pink60: '#702c61',
|
||||
pink50: '#b23b98',
|
||||
pink40: '#f881de',
|
||||
pink30: '#fbb7ec',
|
||||
pink20: '#fddbf6',
|
||||
pink10: '#feedfa',
|
||||
|
||||
red80: '#2d1b1b',
|
||||
red70: '#441f1f',
|
||||
red60: '#712727',
|
||||
red50: '#b43232',
|
||||
red40: '#fa7878',
|
||||
red30: '#fcb2b2',
|
||||
red20: '#fed8d8',
|
||||
red10: '#feecec',
|
||||
|
||||
orange80: '#2e2018',
|
||||
orange70: '#452919',
|
||||
orange60: '#743b1b',
|
||||
orange50: '#b9571f',
|
||||
orange40: '#ff9c64',
|
||||
orange30: '#ffc7a7',
|
||||
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,
|
||||
blueAccent90: '#141a25',
|
||||
blueAccent85: '#151d2e',
|
||||
blueAccent80: '#152037',
|
||||
blueAccent75: '#16233f',
|
||||
blueAccent70: '#17294a',
|
||||
blueAccent60: '#18356d',
|
||||
blueAccent40: '#a3c0f8',
|
||||
blueAccent35: '#c8d9fb',
|
||||
blueAccent25: '#dae6fc',
|
||||
blueAccent20: '#e2ecfd',
|
||||
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})`;
|
||||
export const COLOR = {
|
||||
...MAIN_COLORS,
|
||||
...SECONDARY_COLORS,
|
||||
};
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
import { ThemeType } from './theme';
|
||||
|
||||
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`
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: ${props.theme.font.color.primary};
|
||||
font-family: ${props.theme.font.family};
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
outline: none;
|
||||
padding: ${props.theme.spacing(0)} ${props.theme.spacing(2)};
|
||||
|
||||
&::placeholder,
|
||||
&::-webkit-input-placeholder {
|
||||
color: ${props.theme.font.color.light};
|
||||
font-family: ${props.theme.font.family};
|
||||
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};
|
||||
}
|
||||
`;
|
||||
@ -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,4 +1,4 @@
|
||||
export const icon = {
|
||||
export const ICON = {
|
||||
size: {
|
||||
sm: 14,
|
||||
md: 16,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export const modal = {
|
||||
export const MODAL = {
|
||||
size: {
|
||||
sm: '300px',
|
||||
md: '400px',
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import { color } from './colors';
|
||||
|
||||
export const tagLight: { [key: string]: { [key: string]: string } } = {
|
||||
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,4 +1,4 @@
|
||||
export const text = {
|
||||
export const TEXT = {
|
||||
lineHeight: {
|
||||
lg: 1.5,
|
||||
md: 1.2,
|
||||
|
||||
@ -1,76 +0,0 @@
|
||||
/* eslint-disable twenty/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: (multiplicator: number) => `${multiplicator * 4}px`,
|
||||
betweenSiblingsGap: `2px`,
|
||||
table: {
|
||||
horizontalCellMargin: '8px',
|
||||
checkboxColumnWidth: '32px',
|
||||
},
|
||||
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;
|
||||
@ -20,6 +20,8 @@ const requestDb = async (query: string) => {
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
// TODO: Handle error gracefully and remove the console statement.
|
||||
/* eslint-disable no-console */
|
||||
console.error(response);
|
||||
}
|
||||
|
||||
|
||||
14
packages/twenty-chrome-extension/tsconfig.app.json
Normal file
14
packages/twenty-chrome-extension/tsconfig.app.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc"
|
||||
},
|
||||
"exclude": [
|
||||
"**/*.spec.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.spec.tsx",
|
||||
"**/*.test.tsx",
|
||||
"jest.config.ts",
|
||||
],
|
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
|
||||
}
|
||||
@ -5,9 +5,16 @@
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/options/modules/*"],
|
||||
"~/*": ["src/*"]
|
||||
},
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
@ -18,8 +25,17 @@
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts", "package.json", "src/*"]
|
||||
}
|
||||
17
packages/twenty-chrome-extension/tsconfig.spec.json
Normal file
17
packages/twenty-chrome-extension/tsconfig.spec.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": ["jest", "node"]
|
||||
},
|
||||
"include": [
|
||||
"vite.config.ts",
|
||||
"jest.config.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.ts",
|
||||
"**/*.d.ts",
|
||||
".storybook/**/*",
|
||||
"**/*.stories.tsx"
|
||||
]
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import { defineConfig, Plugin } from 'vite';
|
||||
import { crx } from '@crxjs/vite-plugin';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig, Plugin } from 'vite';
|
||||
import tsconfigPaths from 'vite-tsconfig-paths';
|
||||
|
||||
import manifest from './src/manifest';
|
||||
|
||||
@ -9,7 +10,7 @@ const viteManifestHack: Plugin & {
|
||||
} = {
|
||||
// Workaround from https://github.com/crxjs/chrome-extension-tools/issues/846#issuecomment-1861880919.
|
||||
name: 'manifestHack',
|
||||
renderCrxManifest(_manifest, bundle) {
|
||||
renderCrxManifest: (_manifest, bundle: any) => {
|
||||
bundle['manifest.json'] = bundle['.vite/manifest.json'];
|
||||
bundle['manifest.json'].fileName = 'manifest.json';
|
||||
delete bundle['.vite/manifest.json'];
|
||||
@ -33,6 +34,6 @@ export default defineConfig(() => {
|
||||
hmr: { port: 3002 },
|
||||
},
|
||||
|
||||
plugins: [viteManifestHack, crx({ manifest }), react()],
|
||||
plugins: [viteManifestHack, crx({ manifest }), react(), tsconfigPaths()],
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user