diff --git a/packages/components/src/assets/fonts/QanelasSoftBlack.otf b/packages/components/src/assets/fonts/QanelasSoftBlack.otf new file mode 100644 index 00000000..27ed8f78 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBlack.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBlack.woff b/packages/components/src/assets/fonts/QanelasSoftBlack.woff new file mode 100644 index 00000000..36bcc774 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBlack.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBlack.woff2 b/packages/components/src/assets/fonts/QanelasSoftBlack.woff2 new file mode 100644 index 00000000..22a9296b Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBlack.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBlackItalic.otf b/packages/components/src/assets/fonts/QanelasSoftBlackItalic.otf new file mode 100644 index 00000000..18c212bf Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBlackItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBlackItalic.woff b/packages/components/src/assets/fonts/QanelasSoftBlackItalic.woff new file mode 100644 index 00000000..70a5f296 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBlackItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBlackItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftBlackItalic.woff2 new file mode 100644 index 00000000..35ac0a1d Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBlackItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBold.otf b/packages/components/src/assets/fonts/QanelasSoftBold.otf new file mode 100644 index 00000000..d6b53365 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBold.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBold.woff b/packages/components/src/assets/fonts/QanelasSoftBold.woff new file mode 100644 index 00000000..2f47986a Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBold.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBold.woff2 b/packages/components/src/assets/fonts/QanelasSoftBold.woff2 new file mode 100644 index 00000000..e3b02e23 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBold.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBoldItalic.otf b/packages/components/src/assets/fonts/QanelasSoftBoldItalic.otf new file mode 100644 index 00000000..90053635 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBoldItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBoldItalic.woff b/packages/components/src/assets/fonts/QanelasSoftBoldItalic.woff new file mode 100644 index 00000000..3e30ef6a Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBoldItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftBoldItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftBoldItalic.woff2 new file mode 100644 index 00000000..bc258b00 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftBoldItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftExtraBold.otf b/packages/components/src/assets/fonts/QanelasSoftExtraBold.otf new file mode 100644 index 00000000..c0e3bc93 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftExtraBold.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftExtraBold.woff b/packages/components/src/assets/fonts/QanelasSoftExtraBold.woff new file mode 100644 index 00000000..6a48c476 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftExtraBold.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftExtraBold.woff2 b/packages/components/src/assets/fonts/QanelasSoftExtraBold.woff2 new file mode 100644 index 00000000..50efd05b Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftExtraBold.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.otf b/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.otf new file mode 100644 index 00000000..cd805cad Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.woff b/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.woff new file mode 100644 index 00000000..bf39b3a1 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.woff2 new file mode 100644 index 00000000..d23f2028 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftExtraBoldItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftHeavy.otf b/packages/components/src/assets/fonts/QanelasSoftHeavy.otf new file mode 100644 index 00000000..28c2d4d5 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftHeavy.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftHeavy.woff b/packages/components/src/assets/fonts/QanelasSoftHeavy.woff new file mode 100644 index 00000000..ddf971a0 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftHeavy.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.otf b/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.otf new file mode 100644 index 00000000..58e83f9c Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.woff b/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.woff new file mode 100644 index 00000000..49b349b6 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.woff2 new file mode 100644 index 00000000..eede765c Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftHeavyItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftLight.otf b/packages/components/src/assets/fonts/QanelasSoftLight.otf new file mode 100644 index 00000000..1c34d7dc Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftLight.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftLight.woff b/packages/components/src/assets/fonts/QanelasSoftLight.woff new file mode 100644 index 00000000..87f6f11e Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftLight.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftLight.woff2 b/packages/components/src/assets/fonts/QanelasSoftLight.woff2 new file mode 100644 index 00000000..c58b8e0c Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftLight.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftLightItalic.otf b/packages/components/src/assets/fonts/QanelasSoftLightItalic.otf new file mode 100644 index 00000000..382bef17 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftLightItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftLightItalic.woff b/packages/components/src/assets/fonts/QanelasSoftLightItalic.woff new file mode 100644 index 00000000..b28ce2a8 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftLightItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftLightItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftLightItalic.woff2 new file mode 100644 index 00000000..aff0681e Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftLightItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftMedium.otf b/packages/components/src/assets/fonts/QanelasSoftMedium.otf new file mode 100644 index 00000000..a0dd7190 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftMedium.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftMedium.woff b/packages/components/src/assets/fonts/QanelasSoftMedium.woff new file mode 100644 index 00000000..56eaf488 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftMedium.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftMediumItalic.otf b/packages/components/src/assets/fonts/QanelasSoftMediumItalic.otf new file mode 100644 index 00000000..91676a97 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftMediumItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftMediumItalic.woff b/packages/components/src/assets/fonts/QanelasSoftMediumItalic.woff new file mode 100644 index 00000000..d7bc54bf Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftMediumItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftRegular.otf b/packages/components/src/assets/fonts/QanelasSoftRegular.otf new file mode 100644 index 00000000..249b8a27 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftRegular.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftRegular.woff b/packages/components/src/assets/fonts/QanelasSoftRegular.woff new file mode 100644 index 00000000..66f70268 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftRegular.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftRegular.woff2 b/packages/components/src/assets/fonts/QanelasSoftRegular.woff2 new file mode 100644 index 00000000..7c3a5ef7 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftRegular.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftRegularItalic.otf b/packages/components/src/assets/fonts/QanelasSoftRegularItalic.otf new file mode 100644 index 00000000..e3898f21 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftRegularItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftRegularItalic.woff b/packages/components/src/assets/fonts/QanelasSoftRegularItalic.woff new file mode 100644 index 00000000..c3a250d6 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftRegularItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftRegularItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftRegularItalic.woff2 new file mode 100644 index 00000000..f6defa95 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftRegularItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftSemiBold.otf b/packages/components/src/assets/fonts/QanelasSoftSemiBold.otf new file mode 100644 index 00000000..7463179c Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftSemiBold.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftSemiBold.woff b/packages/components/src/assets/fonts/QanelasSoftSemiBold.woff new file mode 100644 index 00000000..9923de0a Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftSemiBold.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftSemiBold.woff2 b/packages/components/src/assets/fonts/QanelasSoftSemiBold.woff2 new file mode 100644 index 00000000..d331d941 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftSemiBold.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.otf b/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.otf new file mode 100644 index 00000000..7a2a99d4 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.woff b/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.woff new file mode 100644 index 00000000..156d7d72 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.woff2 new file mode 100644 index 00000000..781aa735 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftSemiBoldItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftThin.otf b/packages/components/src/assets/fonts/QanelasSoftThin.otf new file mode 100644 index 00000000..cd81b0c6 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftThin.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftThin.woff b/packages/components/src/assets/fonts/QanelasSoftThin.woff new file mode 100644 index 00000000..1a2b56b4 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftThin.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftThin.woff2 b/packages/components/src/assets/fonts/QanelasSoftThin.woff2 new file mode 100644 index 00000000..6101f580 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftThin.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftThinItalic.otf b/packages/components/src/assets/fonts/QanelasSoftThinItalic.otf new file mode 100644 index 00000000..cb2e650b Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftThinItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftThinItalic.woff b/packages/components/src/assets/fonts/QanelasSoftThinItalic.woff new file mode 100644 index 00000000..96e7d3c8 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftThinItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftThinItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftThinItalic.woff2 new file mode 100644 index 00000000..7d5aa08d Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftThinItalic.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftUltraLight.otf b/packages/components/src/assets/fonts/QanelasSoftUltraLight.otf new file mode 100644 index 00000000..86a0b545 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftUltraLight.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftUltraLight.woff b/packages/components/src/assets/fonts/QanelasSoftUltraLight.woff new file mode 100644 index 00000000..182c2b69 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftUltraLight.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftUltraLight.woff2 b/packages/components/src/assets/fonts/QanelasSoftUltraLight.woff2 new file mode 100644 index 00000000..6f41f53e Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftUltraLight.woff2 differ diff --git a/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.otf b/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.otf new file mode 100644 index 00000000..bd9637b2 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.otf differ diff --git a/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.woff b/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.woff new file mode 100644 index 00000000..ee723475 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.woff differ diff --git a/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.woff2 b/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.woff2 new file mode 100644 index 00000000..3c5ed7f3 Binary files /dev/null and b/packages/components/src/assets/fonts/QanelasSoftUltraLightItalic.woff2 differ diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index f816634e..f9e938d7 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -76,4 +76,5 @@ export { type FilterColumn, type UniversalFilterProps } from './custom/UniversalFilter'; -export { default as SistentProvider } from './theme/SistentProvider'; +export { default as SistentProvider } from './theme'; +export * from './theme/colors'; diff --git a/packages/components/src/theme/colors.ts b/packages/components/src/theme/colors.ts new file mode 100644 index 00000000..690ccc75 --- /dev/null +++ b/packages/components/src/theme/colors.ts @@ -0,0 +1,180 @@ +import { alpha } from '@mui/material'; + +/** + * Define the base common colors to derive from + */ +export const KEPPEL = '#00B39F'; +export const CARIBBEAN_GREEN = '#00D3A9'; +export const TEAL_BLUE = '#477E96'; +export const CHARCOAL = '#3C494F'; +export const BLACK = '#000000'; +export const WHITE = '#FFFFFF'; +export const DARK_SHADE_GRAY = '#222222'; +export const CHINESE_SILVER = '#CCCCCC'; // same as lightGray +export const SAFFRON = '#EBC017'; +export const GRAY = '#696969'; +export const GRAY97 = '#f7f7f7'; +export const DARK_SLATE_GRAY = '#294957'; +export const LIGHT_GRAY = '#d3d3d3'; // same as tableBorder +export const ALICE_BLUE = '#EBEFF1'; +export const LIMED_SPRUCE = '#3C494F'; +export const WHITESMOKE = '#F5F5F5'; +export const PRIMARY_COLOR = '#647881'; +export const DARK_PRIMARY_COLOR = '#51636B'; +export const SLATE_GRAY = '#7a848e'; +export const DARK_JUNGLE_GREEN = '#1E2117'; +export const CASPER = '#b1b6b8'; +export const EERIE_BLACK = '#b1b6b8'; +export const PATTERNS_BLUE = '#D9E0E2'; +export const GREEN = 'green'; +export const DARK_TEAL = '#455a64'; +export const LIGHT_TEAL = '#607d8b'; +export const CULTURED = '#F6F8F8'; +export const ANAKIWA = '#9EFFEC'; +export const NOT_FOUND = '#666666'; +export const YELLOW_SEA = '#F0A303'; +export const PINE_GREEN = '#008071'; + +/** + * Use the colors below that provides the action that you want to use + */ +export const primaryColor = { + main: PRIMARY_COLOR, + dark: DARK_PRIMARY_COLOR +}; + +export const patternsBlue = { + main: PATTERNS_BLUE +}; + +export const cultured = { + main: CULTURED +}; + +export const green = { + main: GREEN +}; + +export const darkTeal = { + main: DARK_TEAL, + dark: LIGHT_TEAL +}; + +export const actionIcon = { + main: darkTeal.main, + hover: darkTeal.dark +}; + +export const tabeMenu = { + main: darkTeal.main, + hover: darkTeal.dark +}; + +export const darkSlateGray = { + main: DARK_SLATE_GRAY, + dark: alpha(DARK_SLATE_GRAY, 0.65) +}; + +export const eerieBlack = { + main: EERIE_BLACK, + light: alpha(EERIE_BLACK, 0.8), + lighter: alpha(EERIE_BLACK, 0.6) +}; + +export const casper = { + main: CASPER, + light: alpha(CASPER, 0.8), + lighter: alpha(CASPER, 0.6) +}; + +export const slateGray = { + main: SLATE_GRAY, + light: alpha(SLATE_GRAY, 0.8) +}; + +export const white = { + main: WHITE, + light: alpha(WHITE, 0.8), + lighter: alpha(WHITE, 0.6) +}; + +export const black = { + main: BLACK, + light: alpha(BLACK, 0.8), + lighter: alpha(BLACK, 0.6), + dark: alpha(BLACK, 0.2) +}; + +export const jungleGreen = { + main: DARK_JUNGLE_GREEN, + light: alpha(DARK_JUNGLE_GREEN, 0.8), + lighter: alpha(DARK_JUNGLE_GREEN, 0.6) +}; + +export const buttonDisabled = { + main: '#b0bec5' +}; + +export const tableBackgroundHover = { + main: '#ADD8E6' +}; + +export const DELETE = '#8F1F00'; +export const HOVER_DELETE = '#b32700'; + +export const redDelete = { + main: DELETE, + light: HOVER_DELETE +}; + +export const buttonDelete = { + main: redDelete.main, + hover: redDelete.light +}; + +/** + * Notification Colors + */ +export const notificationColors = { + info: { + main: '#2196F3' + }, + error: { + main: '#F91313', + dark: '#B32700' + }, + warning: { + main: '#F0A303', + light: '#E75225' + }, + success: { + main: '#206D24' + } +}; + +export const CONNECTED = KEPPEL; +export const REGISTERED = TEAL_BLUE; +export const DISCOVERED = notificationColors.info.main; +export const IGNORED = primaryColor.dark; +export const DELETED = redDelete.main; +export const MAINTAINENCE = notificationColors.warning.main; +export const DISCONNECTED = notificationColors.warning.light; + +export const connected = { + main: CONNECTED +}; + +export const anakiwa = { + main: ANAKIWA +}; + +/** + * Social media or equivalent icons colors + */ +export const socialIcons = { + slack: '#4A154B', + twitter: '#1da1f2', + github: '#24292e', + youtube: '#ff0000', + docker: '#2496ed' +}; diff --git a/packages/components/src/theme/components.ts b/packages/components/src/theme/components.ts index 44794d8a..238d8a2a 100644 --- a/packages/components/src/theme/components.ts +++ b/packages/components/src/theme/components.ts @@ -1,10 +1,32 @@ import { Components, Theme } from '@mui/material'; import { MuiAppBar } from './components/appbar.modifiter'; +import { MuiCard } from './components/card.modifier'; +import { MuiCheckbox } from './components/checkbox.modifier'; +import { MuiCollapse } from './components/collapse.modifier'; +import { MuiCssBaseline } from './components/cssbaseline.modifier'; import { MuiDrawer } from './components/drawer.modifier'; +import { MuiFormLabel } from './components/formlabel.modifier'; +import { MuiIconButton } from './components/iconbutton.modifier'; +import { MuiLink } from './components/link.modifier'; +import { MuiMenu } from './components/menu.modifier'; +import { MuiMenuItem } from './components/menuitem.modifier'; +import { MuiPagination } from './components/pagination.modifier'; import { MuiSvgIcon } from './components/svgicon.modifier'; +import { MuiTab } from './components/tab.modifier.ts'; export const components: Components = { MuiAppBar, + MuiCard, + MuiCheckbox, + MuiCollapse, + MuiCssBaseline, MuiDrawer, - MuiSvgIcon + MuiFormLabel, + MuiIconButton, + MuiLink, + MuiMenu, + MuiMenuItem, + MuiPagination, + MuiSvgIcon, + MuiTab }; diff --git a/packages/components/src/theme/components/card.modifier.ts b/packages/components/src/theme/components/card.modifier.ts new file mode 100644 index 00000000..13369d9a --- /dev/null +++ b/packages/components/src/theme/components/card.modifier.ts @@ -0,0 +1,10 @@ +import { Components, Theme } from '@mui/material'; + +export const MuiCard: Components['MuiCard'] = { + styleOverrides: { + root: { + backgroundImage: + 'radial-gradient( circle 3000px at 50% 50%, rgba(30,33,23,0) 0%, rgba(30,33,23,0.05) 10%, rgba(30,33,23,.1) 100% )' + } + } +}; diff --git a/packages/components/src/theme/components/checkbox.modifier.ts b/packages/components/src/theme/components/checkbox.modifier.ts new file mode 100644 index 00000000..9f762350 --- /dev/null +++ b/packages/components/src/theme/components/checkbox.modifier.ts @@ -0,0 +1,30 @@ +import { Components, Theme } from '@mui/material'; +import { CHARCOAL, connected, darkSlateGray } from '../colors'; + +export const MuiCheckbox: Components['MuiCheckbox'] = { + styleOverrides: { + root: { + color: 'transparent', + '&.Mui-checked': { + color: darkSlateGray.main, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + borderColor: connected.main, + marginLeft: '0px', + padding: '0px' + } + }, + '& .MuiSvgIcon-root': { + width: '1.25rem', + height: '1.25rem', + border: `.75px solid ${CHARCOAL}`, + borderRadius: '2px', + padding: '0px' + }, + '&:hover': { + backgroundColor: 'transparent' + } + } + } +}; diff --git a/packages/components/src/theme/components/collapse.modifier.ts b/packages/components/src/theme/components/collapse.modifier.ts new file mode 100644 index 00000000..55e3c48e --- /dev/null +++ b/packages/components/src/theme/components/collapse.modifier.ts @@ -0,0 +1,33 @@ +import { Components, Theme } from '@mui/material'; +import { patternsBlue } from '../colors'; + +declare module '@mui/material/Collapse' { + interface CollapseProps { + variant?: 'submenu' | string; + } + interface CollapsePropsVariantOverrides { + submenu: true; + } +} + +export const MuiCollapse: Components['MuiCollapse'] = { + styleOverrides: { + root: {} + }, + variants: [ + { + props: { variant: 'submenu' }, + style: ({ theme }) => { + const { + palette: { cultured } + } = theme; + return { + backgroundColor: cultured.main, + '&:active': { + backgroundColor: patternsBlue.main + } + }; + } + } + ] +}; diff --git a/packages/components/src/theme/components/cssbaseline.modifier.ts b/packages/components/src/theme/components/cssbaseline.modifier.ts new file mode 100644 index 00000000..59f33097 --- /dev/null +++ b/packages/components/src/theme/components/cssbaseline.modifier.ts @@ -0,0 +1,16 @@ +import { Components, Theme } from '@mui/material'; + +export const MuiCssBaseline: Components['MuiCssBaseline'] = { + styleOverrides: ` + @font-face { + font-family: 'Qanelas Soft Regular'; + font-style: normal; + font-display: swap; + font-weight: 400; + src: + local('QanelasSoftRegular'), + local('Quanelas Soft Regular'), + url('/assets/fonts/QanelasSoftRegular.woff2') format('woff2'); + } + ` +}; diff --git a/packages/components/src/theme/components/formlabel.modifier.ts b/packages/components/src/theme/components/formlabel.modifier.ts new file mode 100644 index 00000000..2e3a2201 --- /dev/null +++ b/packages/components/src/theme/components/formlabel.modifier.ts @@ -0,0 +1,12 @@ +import { Components, Theme } from '@mui/material'; +import { connected } from '../colors'; + +export const MuiFormLabel: Components['MuiFormLabel'] = { + styleOverrides: { + root: { + '&.Mui-focused': { + color: connected.main + } + } + } +}; diff --git a/packages/components/src/theme/components/iconbutton.modifier.ts b/packages/components/src/theme/components/iconbutton.modifier.ts new file mode 100644 index 00000000..96f01480 --- /dev/null +++ b/packages/components/src/theme/components/iconbutton.modifier.ts @@ -0,0 +1,11 @@ +import { Components, Theme } from '@mui/material'; + +export const MuiIconButton: Components['MuiIconButton'] = { + styleOverrides: { + root: { + '@media (max-width: 400px)': { + padding: '2px' + } + } + } +}; diff --git a/packages/components/src/theme/components/link.modifier.ts b/packages/components/src/theme/components/link.modifier.ts new file mode 100644 index 00000000..8175292c --- /dev/null +++ b/packages/components/src/theme/components/link.modifier.ts @@ -0,0 +1,26 @@ +import { Components, Theme } from '@mui/material'; +import { connected, darkTeal } from '../colors'; + +export const MuiLink: Components['MuiLink'] = { + styleOverrides: { + root: { + fontWeight: '600', + textDecoration: 'none', + color: darkTeal.main, + '&:visited': { + textDecoration: 'none' + }, + '&:hover': { + textDecoration: 'underline' + }, + '&.keppel': { + color: connected.main + }, + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } + } + } + } +}; diff --git a/packages/components/src/theme/components/menu.modifier.ts b/packages/components/src/theme/components/menu.modifier.ts new file mode 100644 index 00000000..ca85aa82 --- /dev/null +++ b/packages/components/src/theme/components/menu.modifier.ts @@ -0,0 +1,14 @@ +import { Components, Theme } from '@mui/material'; + +export const MuiMenu: Components['MuiMenu'] = { + styleOverrides: { + paper: { + '& .MuiMenuItem-root.Mui-selected': { + backgroundColor: 'rgba(0, 0, 0, 0.08)', + '&:hover': { + backgroundColor: 'rgba(0, 0, 0, 0.08)' + } + } + } + } +}; diff --git a/packages/components/src/theme/components/menuitem.modifier.ts b/packages/components/src/theme/components/menuitem.modifier.ts new file mode 100644 index 00000000..8c514ae3 --- /dev/null +++ b/packages/components/src/theme/components/menuitem.modifier.ts @@ -0,0 +1,27 @@ +import { Components, Theme } from '@mui/material'; +import { darkTeal } from '../colors'; + +export const MuiMenuItem: Components['MuiMenuItem'] = { + styleOverrides: { + root: { + '&:hover': { + '& li': { + color: darkTeal.dark, + fill: darkTeal.dark + } + }, + + '& svg': { + '&:hover': { + fill: darkTeal.dark + } + }, + + '&.Mui-disabled': { + '&:hover': { + cursor: 'not-allowed' + } + } + } + } +}; diff --git a/packages/components/src/theme/components/pagination.modifier.ts b/packages/components/src/theme/components/pagination.modifier.ts new file mode 100644 index 00000000..63da1dc7 --- /dev/null +++ b/packages/components/src/theme/components/pagination.modifier.ts @@ -0,0 +1,18 @@ +import { Components, Theme } from '@mui/material'; +import { anakiwa, connected, white } from '../colors'; + +export const MuiPagination: Components['MuiPagination'] = { + styleOverrides: { + root: { + button: { + '&:hover': { + backgroundColor: anakiwa.main + }, + '&.Mui-selected': { + color: white.main, + backgroundColor: connected.main + } + } + } + } +}; diff --git a/packages/components/src/theme/components/tab.modifier.ts.ts b/packages/components/src/theme/components/tab.modifier.ts.ts new file mode 100644 index 00000000..68aa34f5 --- /dev/null +++ b/packages/components/src/theme/components/tab.modifier.ts.ts @@ -0,0 +1,15 @@ +import { Components, Theme } from '@mui/material'; +import { actionIcon, white } from '../colors'; + +export const MuiTab: Components['MuiTab'] = { + styleOverrides: { + root: { + '&.Mui-selected': { + color: actionIcon.main, + backgroundColor: white.main + }, + backgroundColor: actionIcon.main, + color: white.main + } + } +}; diff --git a/packages/components/src/theme/createEmotionCache.ts b/packages/components/src/theme/createEmotionCache.ts index 4bc81ecf..87674309 100644 --- a/packages/components/src/theme/createEmotionCache.ts +++ b/packages/components/src/theme/createEmotionCache.ts @@ -1,7 +1,19 @@ import createCache from '@emotion/cache'; -// prepend: true moves MUI styles to the top of the so they're loaded first. +const isBrowser = typeof document !== 'undefined'; + +// On the client side, Create a meta tag at the top of the and set it as insertionPoint. +// This assures that MUI styles are loaded first. // It allows developers to easily override MUI styles with other styling solutions, like CSS modules. export default function createEmotionCache() { - return createCache({ key: 'css', prepend: true }); + let insertionPoint; + + if (isBrowser) { + const emotionInsertionPoint = document.querySelector( + 'meta[name="emotion-insertion-point"]' + ); + insertionPoint = emotionInsertionPoint ?? undefined; + } + + return createCache({ key: 'mui-style', insertionPoint }); } diff --git a/packages/components/src/theme/SistentProvider.tsx b/packages/components/src/theme/index.tsx similarity index 100% rename from packages/components/src/theme/SistentProvider.tsx rename to packages/components/src/theme/index.tsx diff --git a/packages/components/src/theme/palette.ts b/packages/components/src/theme/palette.ts index 620c07c0..296159d5 100644 --- a/packages/components/src/theme/palette.ts +++ b/packages/components/src/theme/palette.ts @@ -1,5 +1,14 @@ import { PaletteOptions } from '@mui/material'; -import { blueGrey } from '@mui/material/colors'; +import { + BLACK, + CHARCOAL, + KEPPEL, + WHITE, + actionIcon, + buttonDelete, + cultured, + notificationColors +} from './colors'; declare module '@mui/material/styles' { interface PaletteColor { @@ -10,22 +19,72 @@ declare module '@mui/material/styles' { } interface Palette { neutral?: Palette['primary']; + cultured: { + main: string; + }; + actionIcon: { + main: string; + hover: string; + }; + buttonDelete: { + main: string; + hover: string; + }; } interface PaletteOptions { neutral?: PaletteOptions['primary']; + cultured?: { + main?: string; + }; + actionIcon?: { + main?: string; + hover?: string; + }; + buttonDelete?: { + main?: string; + hover?: string; + }; } } export const lightModePalette: PaletteOptions = { primary: { - main: blueGrey[600], - light: blueGrey[400], - dark: blueGrey[700] + main: CHARCOAL }, secondary: { - main: '#EE5351' + main: KEPPEL }, - neutral: {} + info: { + main: notificationColors.info.main + }, + error: { + main: notificationColors.error.main, + dark: notificationColors.error.dark + }, + warning: { + main: notificationColors.warning.main, + light: notificationColors.warning.light + }, + success: { + main: notificationColors.success.main + }, + common: { + black: BLACK, + white: WHITE + }, + cultured: { + main: cultured.main + }, + actionIcon: { + main: actionIcon.main, + hover: actionIcon.hover + }, + buttonDelete: { + main: buttonDelete.main, + hover: buttonDelete.hover + }, + neutral: {}, + text: {} }; export const darkModePalette: PaletteOptions = { diff --git a/packages/components/src/theme/typography.ts b/packages/components/src/theme/typography.ts index 27e8696a..da272048 100644 --- a/packages/components/src/theme/typography.ts +++ b/packages/components/src/theme/typography.ts @@ -1,11 +1,16 @@ import { PaletteMode } from '@mui/material'; import { TypographyOptions } from '@mui/material/styles/createTypography'; +import QanelasSoftRegular from '../assets/fonts/QanelasSoftRegular.woff2'; export const typography = (paletteType: PaletteMode): TypographyOptions => { return { - // fontFamily: QanelasSoftFont.style.fontFamily, - // body1: { fontFamily: QanelasSoftFont.style.fontFamily }, - // body2: { fontFamily: QanelasSoftFont.style.fontFamily }, + fontFamily: [QanelasSoftRegular, 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','), + body1: { + fontFamily: [QanelasSoftRegular, 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(',') + }, + body2: { + fontFamily: [QanelasSoftRegular, 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(',') + }, h5: { color: paletteType === 'light' ? '#000000' : '#FFFFFF' }, diff --git a/packages/components/src/types/fonts.d.ts b/packages/components/src/types/fonts.d.ts new file mode 100644 index 00000000..f5dd3995 --- /dev/null +++ b/packages/components/src/types/fonts.d.ts @@ -0,0 +1,4 @@ +declare module '*.woff2' { + const content: string; + export default content; +} diff --git a/packages/components/tsup.config.ts b/packages/components/tsup.config.ts index 5672c68f..7cb9b489 100644 --- a/packages/components/tsup.config.ts +++ b/packages/components/tsup.config.ts @@ -4,7 +4,6 @@ import { defineConfig } from 'tsup'; const env = process.env.NODE_ENV; export default defineConfig({ - outdir: 'dist', entry: ['src/index.tsx'], bundle: env === 'production', clean: true, @@ -14,5 +13,11 @@ export default defineConfig({ minify: env === 'production', watch: env === 'development', sourcemap: env === 'development', - tsconfig: path.resolve(__dirname, './tsconfig.json') + tsconfig: path.resolve(__dirname, './tsconfig.json'), + loader: { + ".otf": "file", + ".woff": "file", + ".woff2": "file", + }, + publicDir: "./src/assets/" });