From bbbfe9423b1d050242e3f550c1027392c9c932b6 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Fri, 1 Jan 2021 00:26:00 -0700 Subject: [PATCH] migrate theme functions to typescript [skip ci] --- hyperglass/ui/components/Card/body.tsx | 4 +- hyperglass/ui/components/Table/row.tsx | 6 +- hyperglass/ui/components/Table/types.ts | 14 +- hyperglass/ui/components/header/logo.tsx | 4 +- hyperglass/ui/components/help/modal.tsx | 2 +- hyperglass/ui/components/path/path.tsx | 2 +- hyperglass/ui/components/select/styles.tsx | 2 +- hyperglass/ui/components/select/types.ts | 8 +- hyperglass/ui/components/submit/submit.tsx | 10 +- hyperglass/ui/context/HyperglassProvider.tsx | 6 +- hyperglass/ui/package.json | 2 +- hyperglass/ui/types/config.ts | 6 +- hyperglass/ui/types/theme.ts | 64 ++---- hyperglass/ui/util/theme.js | 134 ------------- hyperglass/ui/util/theme.ts | 197 +++++++++++++++++++ hyperglass/ui/yarn.lock | 52 +---- 16 files changed, 257 insertions(+), 256 deletions(-) delete mode 100644 hyperglass/ui/util/theme.js create mode 100644 hyperglass/ui/util/theme.ts diff --git a/hyperglass/ui/components/Card/body.tsx b/hyperglass/ui/components/Card/body.tsx index dced6f6..6d0cd92 100644 --- a/hyperglass/ui/components/Card/body.tsx +++ b/hyperglass/ui/components/Card/body.tsx @@ -5,8 +5,8 @@ import type { ICardBody } from './types'; export const CardBody = (props: ICardBody) => { const { onClick, ...rest } = props; - const bg = useColorValue('white', 'original.dark'); - const color = useColorValue('original.dark', 'white'); + const bg = useColorValue('white', 'dark.500'); + const color = useColorValue('dark.500', 'white'); return ( { let bg; if (highlight) { - bg = `${highlightBg}.${alpha}`; - hoverBg = `${highlightBg}.${alphaHover}`; + bg = `${String(highlightBg)}.${alpha}`; + hoverBg = `${String(highlightBg)}.${alphaHover}`; } else if (doStripe && index % 2 !== 0) { bg = bgStripe; } @@ -42,7 +42,7 @@ export const TableRow = (props: TTableRow) => { fontWeight={highlight ? 'bold' : undefined} _hover={{ cursor: 'pointer', - backgroundColor: highlight ? `${highlightBg}.${alphaHover}` : hoverBg, + backgroundColor: highlight ? `${String(highlightBg)}.${alphaHover}` : hoverBg, }} {...borderProps} {...rest} diff --git a/hyperglass/ui/components/Table/types.ts b/hyperglass/ui/components/Table/types.ts index e0ced51..341d566 100644 --- a/hyperglass/ui/components/Table/types.ts +++ b/hyperglass/ui/components/Table/types.ts @@ -1,17 +1,17 @@ import type { BoxProps, IconButtonProps } from '@chakra-ui/react'; -import type { Colors, TColumn, TCellRender } from '~/types'; +import type { Theme, TColumn, TCellRender } from '~/types'; export interface TTable { - columns: TColumn[]; data: TRoute[]; - heading?: React.ReactNode; striped?: boolean; + columns: TColumn[]; + heading?: React.ReactNode; bordersVertical?: boolean; bordersHorizontal?: boolean; Cell?: React.FC; rowHighlightProp?: keyof IRoute; - rowHighlightBg?: keyof Colors; + rowHighlightBg?: Theme.ColorNames; } export interface TTableCell extends Omit { @@ -20,10 +20,10 @@ export interface TTableCell extends Omit { } export interface TTableRow extends BoxProps { - highlight?: boolean; - highlightBg?: keyof Colors; - doStripe?: boolean; + highlightBg?: Theme.ColorNames; doHorizontalBorders?: boolean; + highlight?: boolean; + doStripe?: boolean; index: number; } diff --git a/hyperglass/ui/components/header/logo.tsx b/hyperglass/ui/components/header/logo.tsx index 4e409b5..59ae06e 100644 --- a/hyperglass/ui/components/header/logo.tsx +++ b/hyperglass/ui/components/header/logo.tsx @@ -38,8 +38,8 @@ export const Logo = (props: TLogo) => { const { web } = useConfig(); const { width } = web.logo; - const skeletonA = useColorValue('whiteFaded.100', 'blackFaded.800'); - const skeletonB = useColorValue('original.light', 'original.dark'); + const skeletonA = useColorValue('whiteSolid.100', 'blackSolid.800'); + const skeletonB = useColorValue('light.500', 'dark.500'); const [source, setFallback] = useLogo(); diff --git a/hyperglass/ui/components/help/modal.tsx b/hyperglass/ui/components/help/modal.tsx index a0c9c04..fe7b10c 100644 --- a/hyperglass/ui/components/help/modal.tsx +++ b/hyperglass/ui/components/help/modal.tsx @@ -21,7 +21,7 @@ const Info = dynamic(() => import('@meronex/icons/fi').then(i => i. export const HelpModal = (props: THelpModal) => { const { visible, item, name, ...rest } = props; const { isOpen, onOpen, onClose } = useDisclosure(); - const bg = useColorValue('whiteFaded.50', 'blackFaded.800'); + const bg = useColorValue('whiteSolid.50', 'blackSolid.800'); const color = useColorValue('black', 'white'); if (!isQueryContent(item)) { return null; diff --git a/hyperglass/ui/components/path/path.tsx b/hyperglass/ui/components/path/path.tsx index d89ad4e..2b94267 100644 --- a/hyperglass/ui/components/path/path.tsx +++ b/hyperglass/ui/components/path/path.tsx @@ -22,7 +22,7 @@ export const Path = (props: TPath) => { const { isOpen, onClose, onOpen } = useDisclosure(); const response = getResponse(device); const output = response?.output as TStructuredResponse; - const bg = useColorValue('whiteFaded.50', 'blackFaded.900'); + const bg = useColorValue('whiteSolid.50', 'blackSolid.900'); return ( <> diff --git a/hyperglass/ui/components/select/styles.tsx b/hyperglass/ui/components/select/styles.tsx index 2cf8fb1..062c2f3 100644 --- a/hyperglass/ui/components/select/styles.tsx +++ b/hyperglass/ui/components/select/styles.tsx @@ -53,7 +53,7 @@ export const useControlStyle = (base: TStyles, state: TControl): TStyles => { export const useMenuStyle = (base: TStyles, _: TMenu): TStyles => { const { colorMode, isOpen } = useSelectContext(); - const backgroundColor = useColorToken('colors', 'white', 'blackFaded.800'); + const backgroundColor = useColorToken('colors', 'white', 'blackSolid.700'); const borderRadius = useToken('radii', 'md'); const styles = { borderRadius, backgroundColor }; return useMemo(() => mergeWith({}, base, styles), [colorMode, isOpen]); diff --git a/hyperglass/ui/components/select/types.ts b/hyperglass/ui/components/select/types.ts index f97b4ff..46d1393 100644 --- a/hyperglass/ui/components/select/types.ts +++ b/hyperglass/ui/components/select/types.ts @@ -6,11 +6,11 @@ import type { OptionProps, MultiValueProps, IndicatorProps, - Theme, + Theme as RSTheme, PlaceholderProps, } from 'react-select'; import type { BoxProps } from '@chakra-ui/react'; -import type { ColorNames, TSelectOption, TSelectOptionMulti, TSelectOptionGroup } from '~/types'; +import type { Theme, TSelectOption, TSelectOptionMulti, TSelectOptionGroup } from '~/types'; export interface TSelectState { [k: string]: string[]; @@ -29,7 +29,7 @@ export interface TSelectBase extends TReactSelectChakra { required?: boolean; onSelect?: (s: TSelectOption[]) => void; onChange?: (c: TSelectOption | TSelectOptionMulti) => void; - colorScheme?: ColorNames; + colorScheme?: Theme.ColorNames; } export interface TSelectContext { @@ -50,7 +50,7 @@ export interface TMultiValueRemoveProps { selectProps: any; } -export interface TRSTheme extends Omit { +export interface TRSTheme extends Omit { borderRadius: string | number; } diff --git a/hyperglass/ui/components/submit/submit.tsx b/hyperglass/ui/components/submit/submit.tsx index 57fa2a0..179b881 100644 --- a/hyperglass/ui/components/submit/submit.tsx +++ b/hyperglass/ui/components/submit/submit.tsx @@ -16,7 +16,7 @@ import { import { FiSearch } from '@meronex/icons/fi'; import { useFormContext } from 'react-hook-form'; import { If, ResolvedTarget } from '~/components'; -import { useMobile } from '~/context'; +import { useMobile, useColorValue } from '~/context'; import { useLGState, useLGMethods } from '~/hooks'; import type { IconButtonProps } from '@chakra-ui/react'; @@ -47,6 +47,7 @@ const SubmitIcon = forwardRef { const { children, isOpen, onClose, onChange } = props; + const bg = useColorValue('white', 'gray.900'); return ( <> {children} @@ -59,7 +60,7 @@ const MSubmitButton = (props: TRSubmitButton) => { closeOnOverlayClick={false} motionPreset="slideInBottom"> - + {isOpen && } @@ -75,11 +76,12 @@ const MSubmitButton = (props: TRSubmitButton) => { */ const DSubmitButton = (props: TRSubmitButton) => { const { children, isOpen, onClose, onChange } = props; + const bg = useColorValue('white', 'gray.900'); return ( {children} - - + + {isOpen && } diff --git a/hyperglass/ui/context/HyperglassProvider.tsx b/hyperglass/ui/context/HyperglassProvider.tsx index a9d3601..547c01c 100644 --- a/hyperglass/ui/context/HyperglassProvider.tsx +++ b/hyperglass/ui/context/HyperglassProvider.tsx @@ -9,7 +9,7 @@ import { import { QueryClient, QueryClientProvider } from 'react-query'; import { makeTheme, defaultTheme } from '~/util'; -import type { IConfig, ITheme } from '~/types'; +import type { IConfig, Theme } from '~/types'; import type { THyperglassProvider } from './types'; const HyperglassContext = createContext(Object()); @@ -38,7 +38,7 @@ export const useConfig = (): IConfig => useContext(HyperglassContext); /** * Get the current theme object. */ -export const useTheme = (): ITheme => useChakraTheme(); +export const useTheme = (): Theme.Full => useChakraTheme(); /** * Determine if device is mobile or desktop based on Chakra UI theme breakpoints. @@ -50,7 +50,7 @@ export const useMobile = (): boolean => * Convenience function to combine Chakra UI's useToken & useColorModeValue. */ export const useColorToken = ( - token: keyof ITheme, + token: keyof Theme.Full, light: L, dark: D, ): L | D => useColorModeValue(useToken(token, light), useToken(token, dark)); diff --git a/hyperglass/ui/package.json b/hyperglass/ui/package.json index cdcc2c8..b8e4b44 100644 --- a/hyperglass/ui/package.json +++ b/hyperglass/ui/package.json @@ -23,7 +23,7 @@ "@hookstate/core": "^3.0.1", "@hookstate/persistence": "^3.0.0", "@meronex/icons": "^4.0.0", - "chroma-js": "^2.1.0", + "color2k": "^1.1.1", "dayjs": "^1.8.25", "framer-motion": "^3.1.1", "lodash": "^4.17.15", diff --git a/hyperglass/ui/types/config.ts b/hyperglass/ui/types/config.ts index 4bd15fb..2730ba8 100644 --- a/hyperglass/ui/types/config.ts +++ b/hyperglass/ui/types/config.ts @@ -1,4 +1,4 @@ -import { Colors, Fonts } from './theme'; +import type { Theme } from './theme'; export type TQueryFields = 'query_type' | 'query_target' | 'query_location' | 'query_vrf'; @@ -21,9 +21,9 @@ export interface IConfigMessages { } export interface IConfigTheme { - colors: Colors; + colors: { [k: string]: string }; default_color_mode: 'light' | 'dark' | null; - fonts: Fonts; + fonts: Theme.Fonts; } export interface IConfigWebText { diff --git a/hyperglass/ui/types/theme.ts b/hyperglass/ui/types/theme.ts index 9b5159d..94e8325 100644 --- a/hyperglass/ui/types/theme.ts +++ b/hyperglass/ui/types/theme.ts @@ -1,52 +1,30 @@ import type { Theme as DefaultTheme } from '@chakra-ui/theme'; import type { ColorHues } from '@chakra-ui/theme/dist/types/foundations/colors'; -interface ChakraColors { - transparent: string; - current: string; - black: string; - white: string; - whiteAlpha: ColorHues; - blackAlpha: ColorHues; - gray: ColorHues; - red: ColorHues; - orange: ColorHues; - yellow: ColorHues; - green: ColorHues; - teal: ColorHues; - blue: ColorHues; - cyan: ColorHues; - purple: ColorHues; - pink: ColorHues; - linkedin: ColorHues; - facebook: ColorHues; - messenger: ColorHues; - whatsapp: ColorHues; - twitter: ColorHues; - telegram: ColorHues; -} +export namespace Theme { + type ExtraColors = { + primary: ColorHues; + secondary: ColorHues; + tertiary: ColorHues; + dark: ColorHues; + light: ColorHues; + success: ColorHues; + blackSolid: ColorHues; + whiteSolid: ColorHues; + }; -interface CustomColors { - primary: ColorHues; - secondary: ColorHues; - tertiary: ColorHues; - dark: ColorHues; - light: ColorHues; - success: ColorHues; -} + export type Colors = ExtraColors & DefaultTheme['colors']; -type AllColors = CustomColors & ChakraColors; -export type ColorNames = keyof AllColors; + export type ColorNames = keyof Colors; -export interface Colors extends AllColors { - original: { [key in ColorNames]: string }; -} + export type Fonts = { + body: string; + mono: string; + }; -export interface Fonts { - body: string; - mono: string; -} + export type FontWeights = Partial; -export interface ITheme extends Omit { - colors: CustomColors; + export interface Full extends Omit { + colors: Colors; + } } diff --git a/hyperglass/ui/util/theme.js b/hyperglass/ui/util/theme.js deleted file mode 100644 index ab777a2..0000000 --- a/hyperglass/ui/util/theme.js +++ /dev/null @@ -1,134 +0,0 @@ -import { theme as chakraTheme } from '@chakra-ui/react'; -import chroma from 'chroma-js'; - -const alphaColors = color => ({ - 900: chroma(color).alpha(0.92).css(), - 800: chroma(color).alpha(0.8).css(), - 700: chroma(color).alpha(0.6).css(), - 600: chroma(color).alpha(0.48).css(), - 500: chroma(color).alpha(0.38).css(), - 400: chroma(color).alpha(0.24).css(), - 300: chroma(color).alpha(0.16).css(), - 200: chroma(color).alpha(0.12).css(), - 100: chroma(color).alpha(0.08).css(), - 50: chroma(color).alpha(0.04).css(), -}); - -const generateColors = colorInput => { - const colorMap = {}; - - const lightnessMap = [0.95, 0.85, 0.75, 0.65, 0.55, 0.45, 0.35, 0.25, 0.15, 0.05]; - const saturationMap = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32]; - - const validColor = chroma.valid(colorInput.trim()) ? chroma(colorInput.trim()) : chroma('#000'); - - const lightnessGoal = validColor.get('hsl.l'); - const closestLightness = lightnessMap.reduce((prev, curr) => - Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev, - ); - - const baseColorIndex = lightnessMap.findIndex(l => l === closestLightness); - - const colors = lightnessMap - .map(l => validColor.set('hsl.l', l)) - .map(color => chroma(color)) - .map((color, i) => { - const saturationDelta = saturationMap[i] - saturationMap[baseColorIndex]; - return saturationDelta >= 0 - ? color.saturate(saturationDelta) - : color.desaturate(saturationDelta * -1); - }); - - const getColorNumber = index => (index === 0 ? 50 : index * 100); - - colors.map((color, i) => { - const colorIndex = getColorNumber(i); - colorMap[colorIndex] = color.hex(); - }); - return colorMap; -}; - -const defaultBodyFonts = [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Helvetica', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', -]; - -const defaultMonoFonts = [ - 'SFMono-Regular', - 'Melno', - 'Monaco', - 'Consolas', - '"Liberation Mono"', - '"Courier New"', - 'monospace', -]; - -const generatePalette = palette => { - const generatedPalette = {}; - Object.keys(palette).map(color => { - if (!['black', 'white'].includes(color)) { - generatedPalette[color] = generateColors(palette[color]); - } else { - generatedPalette[color] = palette[color]; - generatedPalette[`${color}Alpha`] = alphaColors(palette[color]); - generatedPalette[`${color}Faded`] = generateColors(palette[color]); - } - }); - return generatedPalette; -}; - -const formatFont = font => { - const fontList = font.split(' '); - const fontFmt = fontList.length >= 2 ? `'${fontList.join(' ')}'` : fontList.join(' '); - return fontFmt; -}; - -const importFonts = userFonts => { - const [body, mono] = [defaultBodyFonts, defaultMonoFonts]; - const bodyFmt = formatFont(userFonts.body); - const monoFmt = formatFont(userFonts.mono); - if (userFonts.body && !body.includes(bodyFmt)) { - body.unshift(bodyFmt); - } - if (userFonts.mono && !mono.includes(monoFmt)) { - mono.unshift(monoFmt); - } - return { - body: body.join(', '), - heading: body.join(', '), - mono: mono.join(', '), - }; -}; - -const importColors = (userColors = {}) => { - const generatedColors = generatePalette(userColors); - return { - transparent: 'transparent', - current: 'currentColor', - ...generatedColors, - }; -}; - -export const makeTheme = userTheme => ({ - ...chakraTheme, - colors: importColors(userTheme.colors), - fonts: importFonts(userTheme.fonts), - global: () => ({ body: { overflow: 'hidden' } }), -}); - -export const googleFontUrl = (fontFamily, weights = [300, 400, 700]) => { - const urlWeights = weights.join(','); - const fontName = fontFamily.split(/, /)[0].trim().replace(/'|"/g, ''); - const urlFont = fontName.split(/ /).join('+'); - const urlBase = `https://fonts.googleapis.com/css?family=${urlFont}:${urlWeights}&display=swap`; - return urlBase; -}; - -export { theme as defaultTheme } from '@chakra-ui/react'; diff --git a/hyperglass/ui/util/theme.ts b/hyperglass/ui/util/theme.ts new file mode 100644 index 0000000..4434ed5 --- /dev/null +++ b/hyperglass/ui/util/theme.ts @@ -0,0 +1,197 @@ +import { + hsla, + saturate, + desaturate, + parseToHsla, + transparentize, + readableColorIsBlack, +} from 'color2k'; +import { extendTheme } from '@chakra-ui/react'; + +import type { Theme as ChakraTheme } from '@chakra-ui/react'; +import type { IConfigTheme, Theme } from '~/types'; + +export function isLight(color: string) { + return readableColorIsBlack(color); +} + +export function isDark(color: string) { + return !readableColorIsBlack(color); +} + +function alphaColors(color: string) { + return { + 50: transparentize(color, Number((1 - 0.04).toFixed(2))), + 100: transparentize(color, Number((1 - 0.08).toFixed(2))), + 200: transparentize(color, Number((1 - 0.12).toFixed(2))), + 300: transparentize(color, Number((1 - 0.16).toFixed(2))), + 400: transparentize(color, Number((1 - 0.24).toFixed(2))), + 500: transparentize(color, Number((1 - 0.38).toFixed(2))), + 600: transparentize(color, Number((1 - 0.48).toFixed(2))), + 700: transparentize(color, Number((1 - 0.6).toFixed(2))), + 800: transparentize(color, Number((1 - 0.8).toFixed(2))), + 900: transparentize(color, Number((1 - 0.92).toFixed(2))), + }; +} + +function generateColors(colorInput: string) { + const colorMap = Object(); + + const lightnessMap = [0.95, 0.85, 0.75, 0.65, 0.55, 0.45, 0.35, 0.25, 0.15, 0.05]; + const saturationMap = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32]; + + const colorHsla = parseToHsla(colorInput); + const lightnessGoal = colorHsla[2]; + + const closestLightness = lightnessMap.reduce((prev, curr) => + Math.abs(curr - lightnessGoal) < Math.abs(prev - lightnessGoal) ? curr : prev, + ); + + const baseColorIndex = lightnessMap.findIndex(l => l === closestLightness); + + const colors = lightnessMap + .map(l => { + const [h, s, _, a] = colorHsla; + return hsla(h, s, l, a); + }) + .map((color, i) => { + const saturationDelta = saturationMap[i] - saturationMap[baseColorIndex]; + return saturationDelta >= 0 + ? saturate(color, saturationDelta) + : desaturate(color, saturationDelta * -1); + }); + + const getColorNumber = (index: number) => (index === 0 ? 50 : index * 100); + + colors.map((color, i) => { + const colorIndex = getColorNumber(i); + if (colorIndex === 500) { + colorMap[500] = colorInput; + } else { + colorMap[colorIndex] = color; + } + }); + return colorMap; +} + +const defaultBodyFonts = [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Helvetica', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', +]; + +const defaultMonoFonts = [ + 'SFMono-Regular', + 'Melno', + 'Monaco', + 'Consolas', + '"Liberation Mono"', + '"Courier New"', + 'monospace', +]; + +function generatePalette(palette: IConfigTheme['colors']): Theme.Colors { + const generatedPalette = Object(); + + for (const color of Object.keys(palette)) { + if (!['black', 'white'].includes(color)) { + generatedPalette[color] = generateColors(palette[color]); + } else { + generatedPalette[color] = palette[color]; + generatedPalette[`${color}Alpha`] = alphaColors(palette[color]); + } + } + + generatedPalette.blackSolid = { + 50: '#444444', + 100: '#3c3c3c', + 200: '#353535', + 300: '#2d2d2d', + 400: '#262626', + 500: '#1e1e1e', + 600: '#171717', + 700: '#0f0f0f', + 800: '#080808', + 900: '#000000', + }; + generatedPalette.whiteSolid = { + 50: '#ffffff', + 100: '#f7f7f7', + 200: '#f0f0f0', + 300: '#e8e8e8', + 400: '#e1e1e1', + 500: '#d9d9d9', + 600: '#d2d2d2', + 700: '#cacaca', + 800: '#c3c3c3', + 900: '#bbbbbb', + }; + return generatedPalette; +} + +function formatFont(font: string): string { + const fontList = font.split(' '); + const fontFmt = fontList.length >= 2 ? `'${fontList.join(' ')}'` : fontList.join(' '); + return fontFmt; +} + +function importFonts(userFonts: Theme.Fonts): [ChakraTheme['fonts'], Theme.FontWeights] { + const [body, mono] = [defaultBodyFonts, defaultMonoFonts]; + const { body: userBody, mono: userMono, ...fontWeights } = userFonts; + const bodyFmt = formatFont(userBody); + const monoFmt = formatFont(userMono); + if (userFonts.body && !body.includes(bodyFmt)) { + body.unshift(bodyFmt); + } + if (userFonts.mono && !mono.includes(monoFmt)) { + mono.unshift(monoFmt); + } + return [ + { + body: body.join(', '), + heading: body.join(', '), + mono: mono.join(', '), + }, + fontWeights, + ]; +} + +function importColors(userColors: IConfigTheme['colors']): Theme.Colors { + const generatedColors = generatePalette(userColors); + + return { + ...generatedColors, + transparent: 'transparent', + current: 'currentColor', + }; +} + +export function makeTheme(userTheme: IConfigTheme): Theme.Full { + const [fonts, fontWeights] = importFonts(userTheme.fonts); + + const defaultTheme = extendTheme({ + colors: importColors(userTheme.colors), + fonts, + fontWeights, + styles: { + global: () => ({ html: { scrollBehavior: 'smooth' }, body: { overflow: 'hidden' } }), + }, + }); + + return defaultTheme; +} + +export function googleFontUrl(fontFamily: string, weights: number[] = [300, 400, 700]): string { + const urlWeights = weights.join(','); + const fontName = fontFamily.split(/, /)[0].trim().replace(/'|"/g, ''); + const urlFont = fontName.split(/ /).join('+'); + return `https://fonts.googleapis.com/css?family=${urlFont}:${urlWeights}&display=swap`; +} + +export { theme as defaultTheme } from '@chakra-ui/react'; diff --git a/hyperglass/ui/yarn.lock b/hyperglass/ui/yarn.lock index 88937ab..22eb956 100644 --- a/hyperglass/ui/yarn.lock +++ b/hyperglass/ui/yarn.lock @@ -2046,13 +2046,6 @@ chownr@^1.1.1: resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg== -chroma-js@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5" - integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg== - dependencies: - cross-env "^6.0.3" - chrome-trace-event@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4" @@ -2150,6 +2143,11 @@ color-string@^1.5.4: color-name "^1.0.0" simple-swizzle "^0.2.2" +color2k@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.1.1.tgz#f9703fab6693e2a407962211f1ab7e8e0602d5d7" + integrity sha512-pkIVqioT1tEJOwfN5O/ZNLMG55H1GhA5WlvasHR2Zj07pIDgA5JDxkqqLIz2PfZOJC8IvuJbdp1YIRbeo+MlMQ== + color@^3.1.2: version "3.1.3" resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e" @@ -2335,13 +2333,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7: safe-buffer "^5.0.1" sha.js "^2.4.8" -cross-env@^6.0.3: - version "6.0.3" - resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941" - integrity sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag== - dependencies: - cross-spawn "^7.0.0" - cross-fetch@3.0.6: version "3.0.6" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" @@ -2360,15 +2351,6 @@ cross-spawn@^6.0.5: shebang-command "^1.2.0" which "^1.2.9" -cross-spawn@^7.0.0: - version "7.0.3" - resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6" - integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w== - dependencies: - path-key "^3.1.0" - shebang-command "^2.0.0" - which "^2.0.1" - crypto-browserify@3.12.0, crypto-browserify@^3.11.0: version "3.12.0" resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec" @@ -5088,11 +5070,6 @@ path-key@^2.0.1: resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40" integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A= -path-key@^3.1.0: - version "3.1.1" - resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375" - integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q== - path-parse@^1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" @@ -6054,23 +6031,11 @@ shebang-command@^1.2.0: dependencies: shebang-regex "^1.0.0" -shebang-command@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" - integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA== - dependencies: - shebang-regex "^3.0.0" - shebang-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM= -shebang-regex@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172" - integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A== - shell-quote@1.7.2: version "1.7.2" resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2" @@ -7103,13 +7068,6 @@ which@^1.2.9: dependencies: isexe "^2.0.0" -which@^2.0.1: - version "2.0.2" - resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1" - integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA== - dependencies: - isexe "^2.0.0" - wide-align@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"