From a05ef4bb5101e6e8d999ad0d7383b394996fb763 Mon Sep 17 00:00:00 2001 From: Vijay Aravamudhan Date: Fri, 15 Oct 2021 17:20:09 +0530 Subject: chore: move 'packages/themes' into 'src' (no longer an injected package) (#2080) --- packages/theme/.gitignore | 2 - packages/theme/README.md | 11 -- packages/theme/package.json | 29 ---- packages/theme/src/index.ts | 24 --- packages/theme/src/themes/IStyleTypes.ts | 7 - packages/theme/src/themes/dark/index.ts | 171 -------------------- packages/theme/src/themes/default/index.ts | 251 ----------------------------- packages/theme/src/themes/legacy/index.ts | 38 ----- packages/theme/test/index.test.ts | 19 --- packages/theme/tsconfig.json | 8 - 10 files changed, 560 deletions(-) delete mode 100644 packages/theme/.gitignore delete mode 100644 packages/theme/README.md delete mode 100644 packages/theme/package.json delete mode 100644 packages/theme/src/index.ts delete mode 100644 packages/theme/src/themes/IStyleTypes.ts delete mode 100644 packages/theme/src/themes/dark/index.ts delete mode 100644 packages/theme/src/themes/default/index.ts delete mode 100644 packages/theme/src/themes/legacy/index.ts delete mode 100644 packages/theme/test/index.test.ts delete mode 100644 packages/theme/tsconfig.json (limited to 'packages') diff --git a/packages/theme/.gitignore b/packages/theme/.gitignore deleted file mode 100644 index d01826a6b..000000000 --- a/packages/theme/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules/ -lib diff --git a/packages/theme/README.md b/packages/theme/README.md deleted file mode 100644 index 6f9cc406b..000000000 --- a/packages/theme/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# `theme` - -> TODO: description - -## Usage - -``` -const theme = require('theme'); - -// TODO: DEMONSTRATE API -``` diff --git a/packages/theme/package.json b/packages/theme/package.json deleted file mode 100644 index 7f3226bd8..000000000 --- a/packages/theme/package.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "@meetfranz/theme", - "version": "1.0.14", - "description": "Theme configuration for Ferdi", - "author": "Stefan Malzner ", - "homepage": "https://github.com/meetfranz/franz", - "license": "Apache-2.0", - "main": "lib/index.js", - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/meetfranz/franz.git" - }, - "scripts": { - "dev": "tsc -w", - "build": "tsc", - "preprepare": "npm run test", - "test": "ts-mocha 'test/**/*.test.ts'" - }, - "bugs": { - "url": "https://github.com/meetfranz/franz/issues" - }, - "dependencies": { - "color": "4.0.1" - }, - "gitHead": "9f2ab40b7602bc3df26ebb093b484b9917768f69" -} diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts deleted file mode 100644 index 5ba225e51..000000000 --- a/packages/theme/src/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -import makeDarkThemeConfig from './themes/dark'; -import makeDefaultThemeConfig from './themes/default'; -import { themeBrandPrimary } from './themes/legacy'; - -export enum ThemeType { - default = 'default', - dark = 'dark', -} - -export const DEFAULT_ACCENT_COLOR = themeBrandPrimary; - -export function theme( - themeId: ThemeType, - brandColor: string = DEFAULT_ACCENT_COLOR, -) { - return themeId === ThemeType.dark - ? makeDarkThemeConfig(brandColor) - : makeDefaultThemeConfig(brandColor); -} - -const defaultThemeConfigWithDefaultAccentColor = - makeDefaultThemeConfig(DEFAULT_ACCENT_COLOR); - -export type Theme = typeof defaultThemeConfigWithDefaultAccentColor; diff --git a/packages/theme/src/themes/IStyleTypes.ts b/packages/theme/src/themes/IStyleTypes.ts deleted file mode 100644 index 48f52daf2..000000000 --- a/packages/theme/src/themes/IStyleTypes.ts +++ /dev/null @@ -1,7 +0,0 @@ -export interface IStyleTypes { - [index: string]: { - accent: string; - contrast: string; - border?: string; - }; -} diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts deleted file mode 100644 index aa132c743..000000000 --- a/packages/theme/src/themes/dark/index.ts +++ /dev/null @@ -1,171 +0,0 @@ -import color from 'color'; -import { cloneDeep, merge } from 'lodash'; - -import makeDefaultThemeConfig from '../default'; -import * as legacyStyles from '../legacy'; - -export default (brandPrimary: string) => { - const defaultStyles = makeDefaultThemeConfig(brandPrimary); - let brandPrimaryColor = color(legacyStyles.themeBrandPrimary); - try { - brandPrimaryColor = color(defaultStyles.brandPrimary); - } catch { - // Ignore invalid color and fall back to default. - } - - const colorBackground = legacyStyles.darkThemeGrayDarkest; - const colorText = legacyStyles.darkThemeTextColor; - const inputColor = legacyStyles.darkThemeGrayLightest; - const inputBackground = legacyStyles.themeGrayDark; - const inputBorder = `1px solid ${legacyStyles.darkThemeGrayLight}`; - const inputPrefixColor = color(legacyStyles.darkThemeGrayLighter) - .lighten(0.3) - .hex(); - const buttonSecondaryTextColor = legacyStyles.darkThemeTextColor; - const selectColor = inputColor; - const drawerBg = color(colorBackground).lighten(0.3).hex(); - - const services = merge({}, defaultStyles.services, { - listItems: { - borderColor: legacyStyles.darkThemeGrayDarker, - hoverBgColor: legacyStyles.darkThemeGrayDarker, - disabled: { - color: legacyStyles.darkThemeGray, - }, - }, - }); - - return { - ...defaultStyles, - - colorBackground, - colorContentBackground: legacyStyles.darkThemeGrayDarkest, - colorBackgroundSubscriptionContainer: legacyStyles.themeBrandInfo, - - colorHeadline: legacyStyles.darkThemeTextColor, - colorText: legacyStyles.darkThemeTextColor, - - defaultContentBorder: legacyStyles.themeGrayDark, - - // Loader - colorFullscreenLoaderSpinner: '#FFF', - colorWebviewLoaderBackground: color(legacyStyles.darkThemeGrayDarkest) - .alpha(0.5) - .rgb() - .string(), - - // Input - labelColor: legacyStyles.darkThemeTextColor, - inputColor, - inputBackground, - inputBorder, - inputPrefixColor, - inputPrefixBackground: legacyStyles.darkThemeGray, - inputDisabledOpacity: 0.5, - inputScorePasswordBackground: legacyStyles.darkThemeGrayDark, - inputModifierColor: color(legacyStyles.darkThemeGrayLighter) - .lighten(0.3) - .hex(), - inputPlaceholderColor: color(legacyStyles.darkThemeGrayLighter) - .darken(0.1) - .hex(), - - // Toggle - toggleBackground: legacyStyles.darkThemeGray, - toggleButton: legacyStyles.darkThemeGrayLighter, - - // Button - buttonPrimaryTextColor: legacyStyles.darkThemeTextColor, - - buttonSecondaryBackground: legacyStyles.darkThemeGrayLighter, - buttonSecondaryTextColor, - - buttonDangerTextColor: legacyStyles.darkThemeTextColor, - - buttonWarningTextColor: legacyStyles.darkThemeTextColor, - - buttonLoaderColor: { - primary: '#FFF', - secondary: buttonSecondaryTextColor, - success: '#FFF', - warning: '#FFF', - danger: '#FFF', - inverted: defaultStyles.brandPrimary, - }, - - // Select - selectBackground: inputBackground, - selectBorder: inputBorder, - selectColor, - selectToggleColor: inputPrefixColor, - selectPopupBackground: legacyStyles.darkThemeGrayLight, - selectOptionColor: '#FFF', - selectOptionBorder: `1px solid ${color(legacyStyles.darkThemeGrayLight) - .darken(0.2) - .hex()}`, - selectOptionItemHover: color(legacyStyles.darkThemeGrayLight) - .darken(0.2) - .hex(), - selectOptionItemHoverColor: selectColor, - selectSearchColor: inputBackground, - - // Modal - colorModalOverlayBackground: color(legacyStyles.darkThemeBlack) - .alpha(0.9) - .rgb() - .string(), - colorModalBackground: legacyStyles.darkThemeGrayDark, - - // Services - services, - - // Service Icon - serviceIcon: merge({}, defaultStyles.serviceIcon, { - isCustom: { - border: `1px solid ${legacyStyles.darkThemeGrayDark}`, - }, - }), - - // Workspaces - workspaces: merge({}, defaultStyles.workspaces, { - settings: { - listItems: cloneDeep(services.listItems), - }, - drawer: { - background: drawerBg, - addButton: { - color: legacyStyles.darkThemeGrayLighter, - hoverColor: legacyStyles.darkThemeGraySmoke, - }, - listItem: { - border: color(drawerBg).lighten(0.2).hex(), - hoverBackground: color(drawerBg).lighten(0.2).hex(), - activeBackground: defaultStyles.brandPrimary, - name: { - color: colorText, - activeColor: 'white', - }, - services: { - color: color(colorText).darken(0.5).hex(), - active: brandPrimaryColor.lighten(0.5).hex(), - }, - }, - }, - }), - - // Todos - todos: merge({}, defaultStyles.todos, { - todosLayer: { - borderLeftColor: legacyStyles.darkThemeGrayDarker, - }, - toggleButton: { - background: defaultStyles.styleTypes.primary.accent, - textColor: defaultStyles.styleTypes.primary.contrast, - shadowColor: 'rgba(0, 0, 0, 0.2)', - }, - dragIndicator: { - background: legacyStyles.themeGrayLight, - }, - }), - }; -}; diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts deleted file mode 100644 index 80bcba766..000000000 --- a/packages/theme/src/themes/default/index.ts +++ /dev/null @@ -1,251 +0,0 @@ -import color from 'color'; -import { cloneDeep } from 'lodash'; - -import * as legacyStyles from '../legacy'; -import type { IStyleTypes } from '../IStyleTypes'; - -export default (brandPrimary: string) => { - const brandSuccess = '#5cb85c'; - const brandInfo = '#5bc0de'; - const brandWarning = '#FF9F00'; - const brandDanger = '#d9534f'; - const uiFontSize = 14; - const colorBackground = legacyStyles.themeGrayLighter; - const colorContentBackground = '#FFFFFF'; - const colorText = legacyStyles.themeTextColor; - const inputColor = legacyStyles.themeGray; - const inputBackground = legacyStyles.themeGrayLightest; - const inputHeight = 40; - const inputBorder = `1px solid ${legacyStyles.themeGrayLighter}`; - const inputPrefixColor = legacyStyles.themeGrayLight; - const inputDisabledOpacity = 0.5; - const buttonSecondaryTextColor = legacyStyles.themeGray; - const selectColor = inputColor; - const drawerBg = color(colorBackground).lighten(0.1).hex(); - - const styleTypes: IStyleTypes = { - primary: { - accent: brandPrimary, - contrast: '#FFF', - }, - secondary: { - accent: legacyStyles.themeGrayLighter, - contrast: legacyStyles.themeGray, - }, - success: { - accent: brandSuccess, - contrast: '#FFF', - }, - warning: { - accent: brandWarning, - contrast: '#FFF', - }, - danger: { - accent: brandDanger, - contrast: '#FFF', - }, - inverted: { - accent: 'none', - contrast: brandPrimary, - border: `1px solid ${brandPrimary}`, - }, - }; - - const services = { - listItems: { - padding: 10, - height: 57, - borderColor: legacyStyles.themeGrayLightest, - hoverBgColor: legacyStyles.themeGrayLightest, - disabled: { - color: legacyStyles.themeGrayLight, - }, - }, - }; - - return { - brandPrimary, - brandSuccess, - brandInfo, - brandWarning, - brandDanger, - - uiFontSize, - - borderRadius: legacyStyles.themeBorderRadius, - borderRadiusSmall: legacyStyles.themeBorderRadiusSmall, - - colorBackground, - - colorContentBackground, - colorHeadline: legacyStyles.themeGrayDark, - - colorText, - - defaultContentBorder: color(legacyStyles.themeGrayLighter) - .darken(0.1) - .rgb() - .string(), - - // Subscription Container Component - colorSubscriptionContainerBackground: 'none', - colorSubscriptionContainerBorder: `1px solid ${brandPrimary}`, - colorSubscriptionContainerTitle: brandPrimary, - colorSubscriptionContainerActionButtonBackground: brandPrimary, - colorSubscriptionContainerActionButtonColor: '#FFF', - - // Loader - colorAppLoaderSpinner: '#FFF', - colorFullscreenLoaderSpinner: legacyStyles.themeGrayDark, - colorWebviewLoaderBackground: color(legacyStyles.themeGrayLighter) - .alpha(0.8) - .rgb() - .string(), - - // Input - labelColor: legacyStyles.themeGrayLight, - inputColor, - inputHeight, - inputBackground, - inputBorder, - inputModifierColor: legacyStyles.themeGrayLight, - inputPlaceholderColor: color(legacyStyles.themeGrayLight) - .lighten(0.3) - .hex(), - inputPrefixColor, - inputPrefixBackground: legacyStyles.themeGrayLighter, - inputDisabledOpacity, - inputScorePasswordBackground: legacyStyles.themeGrayLighter, - - // Toggle - toggleBackground: legacyStyles.themeGrayLighter, - toggleButton: legacyStyles.themeGrayLight, - toggleButtonActive: brandPrimary, - toggleWidth: 40, - toggleHeight: 14, - - // Style Types - styleTypes, - - // Button - buttonPrimaryBackground: brandPrimary, - buttonPrimaryTextColor: '#FFF', - - buttonSecondaryBackground: legacyStyles.themeGrayLighter, - buttonSecondaryTextColor, - - buttonSuccessBackground: brandSuccess, - buttonSuccessTextColor: '#FFF', - - buttonDangerBackground: brandDanger, - buttonDangerTextColor: '#FFF', - - buttonWarningBackground: brandWarning, - buttonWarningTextColor: '#FFF', - - buttonInvertedBackground: 'none', - buttonInvertedTextColor: brandPrimary, - buttonInvertedBorder: `1px solid ${brandPrimary}`, - - buttonHeight: inputHeight, - - buttonLoaderColor: { - primary: '#FFF', - secondary: buttonSecondaryTextColor, - success: '#FFF', - warning: '#FFF', - danger: '#FFF', - inverted: brandPrimary, - }, - - // Select - selectBackground: inputBackground, - selectBorder: inputBorder, - selectHeight: inputHeight, - selectColor, - selectToggleColor: inputPrefixColor, - selectPopupBackground: '#FFF', - selectOptionColor: inputColor, - selectOptionBorder: `1px solid ${legacyStyles.themeGrayLightest}`, - selectOptionItemHover: legacyStyles.themeGrayLighter, - selectOptionItemHoverColor: selectColor, - selectOptionItemActive: brandPrimary, - selectOptionItemActiveColor: '#FFF', - selectSearchBackground: legacyStyles.themeGrayLighter, - selectSearchColor: inputColor, - selectDisabledOpacity: inputDisabledOpacity, - - // Badge - badgeFontSize: uiFontSize - 2, - badgeBorderRadius: 50, - - // Modal - colorModalOverlayBackground: color('#000').alpha(0.8).rgb().string(), - colorModalBackground: colorContentBackground, - - // Services - services, - - // Service Icon - serviceIcon: { - width: 35, - isCustom: { - border: `1px solid ${legacyStyles.themeGrayLighter}`, - borderRadius: legacyStyles.themeBorderRadius, - width: 37, - }, - }, - - // Workspaces - workspaces: { - settings: { - listItems: cloneDeep(services.listItems), - }, - drawer: { - width: 300, - padding: 20, - background: drawerBg, - buttons: { - color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), - hoverColor: legacyStyles.themeGrayLight, - }, - listItem: { - hoverBackground: color(drawerBg).darken(0.01).hex(), - activeBackground: legacyStyles.themeGrayLightest, - border: color(drawerBg).darken(0.05).hex(), - name: { - color: colorText, - activeColor: colorText, - }, - services: { - color: color(colorText).lighten(1.5).hex(), - active: color(colorText).lighten(1.5).hex(), - }, - }, - }, - switchingIndicator: { - spinnerColor: 'white', - }, - }, - - // Todos - todos: { - todosLayer: { - borderLeftColor: color(legacyStyles.themeGrayLighter).darken(0.1).hex(), - }, - toggleButton: { - background: styleTypes.primary.accent, - textColor: styleTypes.primary.contrast, - shadowColor: 'rgba(0, 0, 0, 0.2)', - }, - dragIndicator: { - background: legacyStyles.themeGrayLight, - }, - resizeHandler: { - backgroundHover: styleTypes.primary.accent, - }, - }, - - legacyStyles, - }; -}; diff --git a/packages/theme/src/themes/legacy/index.ts b/packages/theme/src/themes/legacy/index.ts deleted file mode 100644 index 3f4bec5d5..000000000 --- a/packages/theme/src/themes/legacy/index.ts +++ /dev/null @@ -1,38 +0,0 @@ -/* legacy config, injected into sass */ -export const themeBrandPrimary = '#7266F0'; -export const themeBrandSuccess = '#5cb85c'; -export const themeBrandInfo = '#5bc0de'; -export const themeBrandWarning = '#FF9F00'; -export const themeBrandDanger = '#d9534f'; - -export const themeGrayDark = '#373a3c'; -export const themeGray = '#55595c'; -export const themeGrayLight = '#818a91'; -export const themeGrayLighter = '#eceeef'; -export const themeGrayLightest = '#f7f7f9'; - -export const themeBorderRadius = '6px'; -export const themeBorderRadiusSmall = '3px'; - -export const themeSidebarWidth = '68px'; - -export const themeTextColor = themeGrayDark; - -export const themeTransitionTime = '.5s'; - -export const themeInsetShadow = 'inset 0 2px 5px rgba(0, 0, 0, .03)'; - -export const darkThemeBlack = '#1A1A1A'; - -export const darkThemeGrayDarkest = '#1E1E1E'; -export const darkThemeGrayDarker = '#2D2F31'; -export const darkThemeGrayDark = '#383A3B'; - -export const darkThemeGray = '#47494B'; - -export const darkThemeGrayLight = '#515355'; -export const darkThemeGrayLighter = '#8a8b8b'; -export const darkThemeGrayLightest = '#FFFFFF'; - -export const darkThemeGraySmoke = '#CED0D1'; -export const darkThemeTextColor = '#FFFFFF'; diff --git a/packages/theme/test/index.test.ts b/packages/theme/test/index.test.ts deleted file mode 100644 index 7eda4e359..000000000 --- a/packages/theme/test/index.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import expect from 'expect.js'; - -import makeDefaultThemeConfig from '../src/themes/default'; -import makeDarkThemeConfig from '../src/themes/dark'; -import { theme, ThemeType } from '../src'; - -describe('Load theme', () => { - it('Should load default theme', () => { - const { colorBackground } = theme('default' as ThemeType); - expect(colorBackground).to.be( - makeDefaultThemeConfig('default').colorBackground, - ); - }); - - it('Should load dark theme', () => { - const { colorBackground } = theme('dark' as ThemeType); - expect(colorBackground).to.be(makeDarkThemeConfig('dark').colorBackground); - }); -}); diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json deleted file mode 100644 index 8b4163e7f..000000000 --- a/packages/theme/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "outDir": "lib", - "rootDir": "src" - }, - "exclude": ["node_modules", "lib", "test"] -} -- cgit v1.2.3-70-g09d2