@neko-os/ui 0.0.1 → 0.0.3

package/src/theme/default/base.js

@@ -0,0 +1,65 @@
+export const BASE_THEME = {
+  spaces: {
+    xxxsm: 1,
+    xxsm: 3,
+    xsm: 5,
+    sm: 10,
+    md: 15,
+    lg: 20,
+    xlg: 30,
+    xxlg: 40,
+    xxxlg: 50,
+  },
+
+  radius: {
+    xxxsm: 4,
+    xxsm: 5,
+    xsm: 5,
+    sm: 7,
+    md: 8,
+    lg: 10,
+    xlg: 12,
+    xxlg: 15,
+    xxxlg: 18,
+  },
+
+  // Buttons, inputs, tags
+  elementHeights: {
+    xsm: 20,
+    sm: 30,
+    md: 35,
+    lg: 50,
+    xlg: 60,
+  },
+
+  texts: {
+    h1: {
+      fontSize: 32,
+      strong: true,
+    },
+    h2: {
+      fontSize: 26,
+      strong: true,
+    },
+    h3: {
+      fontSize: 22,
+      strong: true,
+    },
+    h4: {
+      fontSize: 18,
+      strong: true,
+    },
+    h5: {
+      fontSize: 16,
+      strong: true,
+    },
+    h6: {
+      fontSize: 14,
+      strong: true,
+    },
+    p: { fontSize: 14 },
+    sm: { fontSize: 12 },
+    xsm: { fontSize: 10 },
+    xxsm: { fontSize: 8 },
+  },
+}

package/src/theme/default/base.native.js

@@ -0,0 +1,58 @@
+export const BASE_THEME = {
+  spaces: {
+    xxsm: 3,
+    xsm: 5,
+    sm: 10,
+    md: 15,
+    lg: 20,
+    xlg: 30,
+  },
+
+  radius: {
+    xsm: 5,
+    sm: 7,
+    md: 8,
+    lg: 10,
+    xlg: 12,
+  },
+
+  // Buttons, inputs, tags
+  elementHeights: {
+    xsm: 20,
+    sm: 30,
+    md: 35,
+    lg: 50,
+    xlg: 60,
+  },
+
+  texts: {
+    h1: {
+      fontSize: 32,
+      strong: true,
+    },
+    h2: {
+      fontSize: 26,
+      strong: true,
+    },
+    h3: {
+      fontSize: 22,
+      strong: true,
+    },
+    h4: {
+      fontSize: 18,
+      strong: true,
+    },
+    h5: {
+      fontSize: 16,
+      strong: true,
+    },
+    h6: {
+      fontSize: 14,
+      strong: true,
+    },
+    p: { fontSize: 14 },
+    sm: { fontSize: 12 },
+    xsm: { fontSize: 10 },
+    xxsm: { fontSize: 8 },
+  },
+}

package/src/theme/default/base.web.js

@@ -0,0 +1,3 @@
+import { BASE_THEME as MOBILE_BASE_THEME } from './base.native'
+
+export const BASE_THEME = MOBILE_BASE_THEME

package/src/theme/default/cyberpunkTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#FCEE09',
+    text: '#FFFFFF',
+    text2: '#B3B3B3',
+    text3: '#8C8C8C',
+    text4: '#666666',
+
+    bg: '#0A0A0F',
+    overlayBG: '#14141F',
+    shadow: 'rgba(39, 45, 52, 0.6)',
+
+    blue: '#00E5FF',
+    yellow: '#FFD600',
+    green: '#00FF9D',
+    purple: '#D500F9',
+    orange: '#FF9100',
+    cyan: '#00B8D4',
+    red: '#FF1744',
+    navy: '#1E2A38',
+    indigo: '#651FFF',
+    gray: '#757575',
+    brown: '#6D4C41',
+    lylac: '#B388FF',
+    pink: '#FF80AB',
+  },
+})

package/src/theme/default/darkTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#818DF9',
+    text: '#FFFFFF',
+    text2: '#E0E0E0',
+    text3: '#B0B0B0',
+    text4: '#8A8A8A',
+
+    bg: '#383E44',
+    overlayBG: '#272D34',
+    shadow: 'rgba(39, 45, 52, 0.6)',
+
+    blue: '#4DA3FF',
+    yellow: '#FFD93B',
+    green: '#4CAF50',
+    purple: '#9B59B6',
+    orange: '#FF7F50',
+    cyan: '#00BCD4',
+    red: '#E74C3C',
+    navy: '#34495E',
+    indigo: '#5C6BC0',
+    gray: '#9E9E9E',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1',
+  },
+})

package/src/theme/default/deepWoodsTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const DEEP_WOODS_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#4CAF50',
+    text: '#F0F8F2',
+    text2: '#C8E6C9',
+    text3: '#A5D6A7',
+    text4: '#81C784',
+
+    bg: '#0D1B14',
+    overlayBG: '#16281F',
+    shadow: 'rgba(39, 45, 52, 0.6)',
+
+    blue: '#64B5F6',
+    yellow: '#FBC02D',
+    green: '#81C784',
+    purple: '#9575CD',
+    orange: '#FFB74D',
+    cyan: '#4DD0E1',
+    red: '#E57373',
+    navy: '#1B263B',
+    indigo: '#5C6BC0',
+    gray: '#9E9E9E',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1',
+  },
+})

package/src/theme/default/forestTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#4CAF50',
+    text: '#0B2414',
+    text2: '#14532D',
+    text3: '#1B5E20',
+    text4: '#388E3C',
+
+    bg: '#E9F5EC',
+    overlayBG: '#FFFFFF',
+    shadow: 'rgba(39, 45, 52, 0.15)',
+
+    blue: '#2563EB',
+    yellow: '#F59E0B',
+    green: '#15803D',
+    purple: '#7C3AED',
+    orange: '#EA580C',
+    cyan: '#0891B2',
+    red: '#B91C1C',
+    navy: '#1E3A8A',
+    indigo: '#4338CA',
+    gray: '#94A3B8',
+    brown: '#78350F',
+    lylac: '#A78BFA',
+    pink: '#F472B6',
+  },
+})

package/src/theme/default/lightTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#818DF9',
+    text: '#272D34',
+    text2: '#4A5159',
+    text3: '#6E7680',
+    text4: '#9AA1AC',
+
+    bg: '#F4F5FE',
+    overlayBG: '#FFFFFF',
+    shadow: 'rgba(39, 45, 52, 0.15)',
+
+    blue: '#4DA3FF',
+    yellow: '#FFD93B',
+    green: '#4CAF50',
+    purple: '#9B59B6',
+    orange: '#FF7F50',
+    cyan: '#00BCD4',
+    red: '#E74C3C',
+    navy: '#34495E',
+    indigo: '#5C6BC0',
+    gray: '#B0BEC5',
+    brown: '#8D6E63',
+    lylac: '#B39DDB',
+    pink: '#F48FB1',
+  },
+})

package/src/theme/default/midnightTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#FF00FF',
+    text: '#F0F0F0',
+    text2: '#D4D4D4',
+    text3: '#A3A3A3',
+    text4: '#7A7A7A',
+
+    bg: '#0D0D0D',
+    overlayBG: '#1A1A1A',
+    shadow: 'rgba(39, 45, 52, 0.6)',
+
+    blue: '#3B82F6',
+    yellow: '#FACC15',
+    green: '#22C55E',
+    purple: '#A855F7',
+    orange: '#FB923C',
+    cyan: '#06B6D4',
+    red: '#F87171',
+    navy: '#1E3A8A',
+    indigo: '#6366F1',
+    gray: '#9CA3AF',
+    brown: '#92400E',
+    lylac: '#C084FC',
+    pink: '#F472B6',
+  },
+})

package/src/theme/default/oceanTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const OCEAN_BREEZE_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#2B90D9',
+    text: '#04364A',
+    text2: '#065A82',
+    text3: '#0B84B4',
+    text4: '#3ABEFF',
+
+    bg: '#E6F7FF',
+    overlayBG: '#FFFFFF',
+    shadow: 'rgba(39, 45, 52, 0.15)',
+
+    blue: '#1D4ED8',
+    yellow: '#FACC15',
+    green: '#10B981',
+    purple: '#8B5CF6',
+    orange: '#FB923C',
+    cyan: '#06B6D4',
+    red: '#EF4444',
+    navy: '#1E3A8A',
+    indigo: '#6366F1',
+    gray: '#9CA3AF',
+    brown: '#A16207',
+    lylac: '#C4B5FD',
+    pink: '#F472B6',
+  },
+})

package/src/theme/default/pastelTheme.js

@@ -0,0 +1,30 @@
+import { mergeDeepRight } from 'ramda'
+import { BASE_THEME } from './base'
+
+export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#FFB6C1',
+    text: '#4B4453',
+    text2: '#6D6875',
+    text3: '#A093A6',
+    text4: '#C9BBCF',
+
+    bg: '#FFF7FA',
+    overlayBG: '#FFFFFF',
+    shadow: 'rgba(39, 45, 52, 0.15)',
+
+    blue: '#A5B4FC',
+    yellow: '#FDE68A',
+    green: '#BBF7D0',
+    purple: '#E9D5FF',
+    orange: '#FED7AA',
+    cyan: '#BAE6FD',
+    red: '#FCA5A5',
+    navy: '#A5B4FC',
+    indigo: '#C7D2FE',
+    gray: '#E5E7EB',
+    brown: '#E0B084',
+    lylac: '#E9D5FF',
+    pink: '#FBCFE8',
+  },
+})

package/src/theme/default/sunsetTheme.js

@@ -0,0 +1,31 @@
+import { mergeDeepRight } from 'ramda'
+
+import { BASE_THEME } from './base'
+
+export const SUNSET_GLOW_THEME = mergeDeepRight(BASE_THEME, {
+  colors: {
+    primary: '#FF6B6B',
+    text: '#331E0A',
+    text2: '#5C4033',
+    text3: '#8C5A43',
+    text4: '#B97A57',
+
+    bg: '#FFF5E6',
+    overlayBG: '#FFFFFF',
+    shadow: 'rgba(39, 45, 52, 0.15)',
+
+    blue: '#3B82F6',
+    yellow: '#FBBF24',
+    green: '#22C55E',
+    purple: '#A855F7',
+    orange: '#FB923C',
+    cyan: '#06B6D4',
+    red: '#DC2626',
+    navy: '#1E3A8A',
+    indigo: '#4F46E5',
+    gray: '#9CA3AF',
+    brown: '#92400E',
+    lylac: '#C084FC',
+    pink: '#F472B6',
+  },
+})

package/src/theme/default/themes.js

@@ -0,0 +1,21 @@
+import { CYBERPUNK_DARK_THEME } from './cyberpunkTheme'
+import { DEEP_WOODS_DARK_THEME } from './deepWoodsTheme'
+import { DEFAULT_DARK_THEME } from './darkTheme'
+import { DEFAULT_LIGHT_THEME } from './lightTheme'
+import { FOREST_MIST_THEME } from './forestTheme'
+import { MIDNIGHT_NEON_THEME } from './midnightTheme'
+import { OCEAN_BREEZE_THEME } from './oceanTheme'
+import { PASTEL_DREAM_THEME } from './pastelTheme'
+import { SUNSET_GLOW_THEME } from './sunsetTheme'
+
+export const DEFAULT_THEMES = {
+  light: DEFAULT_LIGHT_THEME,
+  dark: DEFAULT_DARK_THEME,
+  pastel: PASTEL_DREAM_THEME,
+  midnight: MIDNIGHT_NEON_THEME,
+  sunset: SUNSET_GLOW_THEME,
+  ocean: OCEAN_BREEZE_THEME,
+  forest: FOREST_MIST_THEME,
+  cyberpunk: CYBERPUNK_DARK_THEME,
+  deepWoods: DEEP_WOODS_DARK_THEME,
+}

package/src/theme/format/colorsVariations.js

@@ -0,0 +1,31 @@
+import tinycolor from 'tinycolor2'
+
+const variations = [10, 20, 30, 40, 50, 60, 70, 80, 90]
+
+export function generateColorVariants(colors) {
+  const isDark = tinycolor(colors?.overlayBG || colors?.bg).isDark()
+  const result = {}
+
+  Object.entries(colors).forEach(([key, value]) => {
+    result[key] = value
+
+    variations.forEach((amount) => {
+      if (amount <= 60) {
+        const lightenSignal = !isDark ? '-' : '+'
+        const darkenSignal = isDark ? '-' : '+'
+        result[`${key}${lightenSignal}${amount}`] = tinycolor(value).lighten(amount).toString()
+        result[`${key}${darkenSignal}${amount}`] = tinycolor(value).darken(amount).toString()
+      }
+
+      result[`${key}_op${amount}`] = tinycolor(value)
+        .setAlpha(amount / 100)
+        .toString()
+    })
+  })
+
+  return result
+}
+
+export function applyColorVariantsOnTheme(theme) {
+  return { ...theme, colors: generateColorVariants(theme.colors) }
+}

package/src/theme/format/formatTheme.js

@@ -0,0 +1,22 @@
+import { mergeDeepRight, pipe } from 'ramda'
+import React from 'react'
+
+import { DEFAULT_LIGHT_THEME } from '../default/lightTheme'
+import { DEFAULT_THEMES } from '../default/themes'
+import { applyColorVariantsOnTheme } from './colorsVariations'
+
+export function useFormattedTheme(themes, key) {
+  themes = themes || DEFAULT_THEMES
+  return React.useMemo(() => formatTheme(themes, key), [key])
+}
+
+export function formatTheme(themes, key) {
+  themes = themes || DEFAULT_THEMES
+  const theme = themes[key] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME
+  const baseDefaultTheme = DEFAULT_THEMES[theme.base] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME
+
+  return pipe(
+    mergeDeepRight(baseDefaultTheme), //
+    applyColorVariantsOnTheme
+  )({ ...theme })
+}

package/src/theme/helpers/sizeScale.js

@@ -0,0 +1,7 @@
+const SCALES = ['xxxsm', 'xxsm', 'xsm', 'sm', 'md', 'lg', 'xlg', 'xxlg', 'xxxlg']
+
+export function moveScaleDown(value, unit = 1) {
+  const index = SCALES.indexOf(value)
+  if (!index) return value
+  return SCALES[index - unit] || value
+}

package/src/theme/index.js

@@ -1 +1,2 @@
 export * from './ThemeHandler'
+export * from './default/themes'