@neko-os/ui 0.0.7 → 0.0.9

package/src/theme/default/forestTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Forest Mist',
+
   colors: {
     primary: '#4CAF50',
     text: '#0B2414',
@@ -9,8 +11,9 @@ export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#1B5E20',
     text4: '#388E3C',
 
-    bg: '#E9F5EC',
+    mainBG: '#E9F5EC',
     overlayBG: '#FFFFFF',
+    backdrop: '#E9F5EC',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: 'rgba(0,0,0, 0.1)',
 

package/src/theme/default/hackerTheme.js

@@ -3,6 +3,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Hacker',
+
   colors: {
     primary: '#00FF41',
     text: '#00FF41',
@@ -10,8 +12,9 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#009926',
     text4: '#00661A',
 
-    bg: '#000000',
+    mainBG: '#000000',
     overlayBG: '#0A0A0A',
+    backdrop: '#000000',
     shadow: 'rgba(0, 255, 65, 0.2)',
     divider: 'rgba(0,255,65, 0.3)',
 

package/src/theme/default/lightTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Light',
+
   colors: {
     primary: '#818DF9',
     text: '#272D34',
@@ -9,8 +11,9 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#6E7680',
     text4: '#9AA1AC',
 
-    bg: '#F4F5FE',
+    mainBG: '#F4F5FE',
     overlayBG: '#FFFFFF',
+    backdrop: '#383E44',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: '#e0e0e0',
 

package/src/theme/default/midnightTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Midnight',
+
   colors: {
     primary: '#FF00FF',
     text: '#F0F0F0',
@@ -9,8 +11,9 @@ export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#A3A3A3',
     text4: '#7A7A7A',
 
-    bg: '#0D0D0D',
+    mainBG: '#0D0D0D',
     overlayBG: '#1A1A1A',
+    backdrop: '#0D0D0D',
     shadow: 'rgba(39, 45, 52, 0.6)',
     divider: 'rgba(255,255,255, 0.2)',
 

package/src/theme/default/msdosTheme.js

@@ -3,15 +3,18 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'MSDOS',
+
   colors: {
     primary: '#FFFF00',
     text: '#FFFFFF',
-    text2: '#FFD700',
-    text3: '#CCCCCC',
-    text4: '#999999',
+    text2: '#E0E0E0',
+    text3: '#B0B0B0',
+    text4: '#8A8A8A',
 
-    bg: '#0000AA',
+    mainBG: '#0000AA',
     overlayBG: '#000088',
+    backdrop: '#0000AA',
     shadow: 'rgba(0, 0, 0, 0.6)',
     divider: 'rgba(255,255,255,0.3)',
 
@@ -30,6 +33,18 @@ export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
     pink: '#FF69B4',
   },
 
+  radius: {
+    xxxs: 1,
+    xxs: 2,
+    xs: 3,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10,
+    xxl: 12,
+    xxxl: 14,
+  },
+
   components: {
     Card: {
       border: 1,

package/src/theme/default/oceanTheme.js

@@ -2,15 +2,18 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const OCEAN_BREEZE_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Ocean Breeze',
+
   colors: {
     primary: '#2B90D9',
-    text: '#04364A',
+    text: '#065277',
     text2: '#065A82',
     text3: '#0B84B4',
     text4: '#3ABEFF',
 
-    bg: '#E6F7FF',
+    mainBG: '#E6F7FF',
     overlayBG: '#FFFFFF',
+    backdrop: '#04364A',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: 'rgba(0,0,0, 0.1)',
 

package/src/theme/default/paperTheme.js

@@ -0,0 +1,35 @@
+import { mergeDeepRight } from 'ramda'
+
+import { BASE_THEME } from './base'
+
+export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Paper',
+
+  colors: {
+    primary: '#5A5A5A',
+    text: '#000000',
+    text2: '#333333',
+    text3: '#555555',
+    text4: '#777777',
+
+    mainBG: '#F8F1E3',
+    overlayBG: '#F8F1E3',
+    backdrop: '#383E44',
+    shadow: 'rgba(0, 0, 0, 0.04)',
+    divider: '#E3D9C9',
+
+    blue: '#6B8EAE',
+    yellow: '#EADCA6',
+    green: '#88A288',
+    purple: '#A391B8',
+    orange: '#D9A066',
+    cyan: '#9CC9C2',
+    red: '#B85C5C',
+    navy: '#4A4A4A',
+    indigo: '#70788C',
+    gray: '#B8B8B8',
+    brown: '#8B7355',
+    lylac: '#C7B7D4',
+    pink: '#E4A1B2',
+  },
+})

package/src/theme/default/pastelTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Pastel Dream',
+
   colors: {
     primary: '#FFB6C1',
     text: '#4B4453',
@@ -9,10 +11,11 @@ export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#A093A6',
     text4: '#C9BBCF',
 
-    bg: '#FFF7FA',
+    mainBG: '#FFF7FA',
     overlayBG: '#FFFFFF',
+    backdrop: '#4B4453',
     shadow: 'rgba(39, 45, 52, 0.15)',
-    divider: 'rgba(255,255,255, 0.2)',
+    divider: '#f0f0f0',
 
     blue: '#A5B4FC',
     yellow: '#FDE68A',

package/src/theme/default/sunsetTheme.js

@@ -3,17 +3,20 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const SUNSET_GLOW_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Sunset',
+
   colors: {
     primary: '#FF6B6B',
-    text: '#331E0A',
+    text: '#4B372E',
     text2: '#5C4033',
     text3: '#8C5A43',
     text4: '#B97A57',
 
-    bg: '#FFF5E6',
-    overlayBG: '#FFFFFF',
+    mainBG: '#FFF5E6',
+    overlayBG: '#FFFAF1',
+    backdrop: '#331E0A',
     shadow: 'rgba(39, 45, 52, 0.15)',
-    divider: 'rgba(255,255,255, 0.2)',
+    divider: '#f0f0f0',
 
     blue: '#3B82F6',
     yellow: '#FBBF24',

package/src/theme/default/themes.js

@@ -1,25 +1,24 @@
 import { CYBERPUNK_DARK_THEME } from './cyberpunkTheme'
-import { DEEP_WOODS_DARK_THEME } from './deepWoodsTheme'
+import { DEFAULT_BLACK_THEME } from './blackTheme'
 import { DEFAULT_DARK_THEME } from './darkTheme'
 import { DEFAULT_LIGHT_THEME } from './lightTheme'
 import { DEFAULT_MATRIX_THEME } from './hackerTheme'
 import { DEFAULT_MSDOS_THEME } from './msdosTheme'
-import { FOREST_MIST_THEME } from './forestTheme'
+import { DEFAULT_PAPER_THEME } from './paperTheme'
 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,
+  paper: DEFAULT_PAPER_THEME,
+  black: DEFAULT_BLACK_THEME,
+  // pastel: PASTEL_DREAM_THEME,
   midnight: MIDNIGHT_NEON_THEME,
-  sunset: SUNSET_GLOW_THEME,
-  ocean: OCEAN_BREEZE_THEME,
-  forest: FOREST_MIST_THEME,
+  // sunset: SUNSET_GLOW_THEME,
+  // ocean: OCEAN_BREEZE_THEME,
+  // forest: FOREST_MIST_THEME,
   cyberpunk: CYBERPUNK_DARK_THEME,
-  deepWoods: DEEP_WOODS_DARK_THEME,
+  // deepWoods: DEEP_WOODS_DARK_THEME,
   hacker: DEFAULT_MATRIX_THEME,
   msdos: DEFAULT_MSDOS_THEME,
 }

package/src/theme/format/formatTheme.js

@@ -1,5 +1,6 @@
-import { mergeDeepRight, pipe } from 'ramda'
+import { mergeDeepRight, mergeDeepLeft, pipe } from 'ramda'
 import React from 'react'
+import tinycolor from 'tinycolor2'
 
 import { DEFAULT_LIGHT_THEME } from '../default/lightTheme'
 import { DEFAULT_THEMES } from '../default/themes'
@@ -15,8 +16,13 @@ export function formatTheme(themes, key) {
   const theme = themes[key] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME
   const baseDefaultTheme = DEFAULT_THEMES[theme.base] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME
 
-  return pipe(
+  const formattedTheme = pipe(
     mergeDeepRight(baseDefaultTheme), //
-    applyColorVariantsOnTheme
+    applyColorVariantsOnTheme,
+    mergeDeepLeft(themes._all || {}) //
   )({ ...theme })
+
+  const isDark = tinycolor(formattedTheme?.colors?.overlayBG || formattedTheme?.colors?.bg).isDark()
+
+  return { ...formattedTheme, isDark, isLight: !isDark }
 }

package/src/theme/helpers/contrastColor.js

@@ -3,18 +3,56 @@ import tinycolor from 'tinycolor2'
 export function getContrastColor(bg, options = ['#FFFFFF', '#666666'], tolerance = 2.5) {
   if (!options.length) return '#666666'
 
-  return tinycolor.mostReadable(bg, options).toHexString()
+  const contrasts = options.map((color) => ({
+    color,
+    contrast: tinycolor.readability(bg, color),
+  }))
 
-  // const contrasts = options.map((color) => ({
-  // color,
-  // contrast: tinycolor.readability(bg, color),
-  // }))
+  contrasts.sort((a, b) => b.contrast - a.contrast)
 
-  // contrasts.sort((a, b) => b.contrast - a.contrast)
+  if (contrasts.length > 1 && Math.abs(contrasts[0].contrast - contrasts[1].contrast) < tolerance) {
+    return options[0]
+  }
 
-  // if (contrasts.length > 1 && Math.abs(contrasts[0].contrast - contrasts[1].contrast) < tolerance) {
-  // return options[0]
-  // }
-
-  // return contrasts[0].color
+  return contrasts[0].color
 }
+
+// export function getContrastColor(bg, options = ['#FFFFFF', '#666666'], tolerance = 2.5) {
+// if (!options.length) return '#666666'
+
+// return tinycolor.mostReadable(bg, options).toHexString()
+// }
+
+// export function getContrastColor(bg, options = ['#FFFFFF', '#666666'], tolerance = 2.5) {
+// const background = tinycolor(bg)
+
+// function scoreColor(color) {
+// const c = tinycolor(color)
+// const contrast = tinycolor.readability(background, c)
+// const { h: bh, s: bs, l: bl } = background.toHsl()
+// const { h, s, l } = c.toHsl()
+
+// const hueDiff = Math.abs(bh - h)
+// const harmony = hueDiff > 180 ? 360 - hueDiff : hueDiff
+
+// return (
+// (contrast > tolerance ? contrast * 2 : contrast) +
+// (100 - harmony) / 10 +
+// (s > 0.1 && s < 0.8 ? 2 : 0) +
+// (l > 0.2 && l < 0.8 ? 1 : 0)
+// )
+// }
+
+// let bestColor = options[0]
+// let bestScore = scoreColor(bestColor)
+
+// for (let i = 1; i < options.length; i++) {
+// const score = scoreColor(options[i])
+// if (score > bestScore) {
+// bestColor = options[i]
+// bestScore = score
+// }
+// }
+
+// return bestColor
+// }

package/dist/abstractions/TouchableOpacity.web.js

@@ -1 +0,0 @@
-import{TouchableOpacity as RNTouchableOpacity}from"react-native-web";export var AbsTouchableOpacity=RNTouchableOpacity;

package/dist/components/calendar/DayPicker.js

@@ -1 +0,0 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/calendar/DayPicker.js";var _excluded=["initialValue","value","onChange","min","max","onCheckDisabled"];import React from'react';import dayjs from'dayjs';import{Col}from"../structure/Col";import{Grid}from"../structure/Row";import{Icon}from"../presentation/Icon";import{Link}from"../actions/Link";import{Text}from"../text/Text";import{View}from"../structure/View";import{useCalendarDays}from"./_helpers/calendarDays";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function DayPicker(_ref){var _this=this;var initialValue=_ref.initialValue,value=_ref.value,onChange=_ref.onChange,min=_ref.min,max=_ref.max,onCheckDisabled=_ref.onCheckDisabled,props=_objectWithoutProperties(_ref,_excluded);var _React$useState=React.useState(dayjs(initialValue)),_React$useState2=_slicedToArray(_React$useState,2),localValue=_React$useState2[0],setLocalValue=_React$useState2[1];value=value===undefined?localValue:value;var handleChange=function handleChange(v){setLocalValue(v);onChange==null?void 0:onChange(v);};var _React$useState3=React.useState(function(){return initialValue?dayjs(initialValue).startOf('month'):dayjs().startOf('month');}),_React$useState4=_slicedToArray(_React$useState3,2),currentMonth=_React$useState4[0],setCurrentMonth=_React$useState4[1];var prevMonth=function prevMonth(){return setCurrentMonth(function(m){return m.subtract(1,'month');});};var nextMonth=function nextMonth(){return setCurrentMonth(function(m){return m.add(1,'month');});};var prevYear=function prevYear(){return setCurrentMonth(function(m){return m.subtract(1,'year');});};var nextYear=function nextYear(){return setCurrentMonth(function(m){return m.add(1,'year');});};var _useCalendarDays=useCalendarDays(currentMonth),weekdayLabels=_useCalendarDays.weekdayLabels,cells=_useCalendarDays.cells;return _jsxs(View,Object.assign({className:"neko-day-picker",width:250},props,{children:[_jsxs(View,{className:"neko-date-picker-header",row:true,centerV:true,gap:"xxs",height:30,children:[_jsx(Link,{onPress:prevYear,"aria-label":"Previous year",padding:"xxs",paddingL:0,children:_jsx(Icon,{name:"arrow-left-double-line"})}),_jsx(Link,{onPress:prevMonth,"aria-label":"Previous month",padding:"xxs",children:_jsx(Icon,{name:"arrow-left-s-line"})}),_jsx(Text,{center:true,flex:true,children:currentMonth.format('MMM YYYY')}),_jsx(Link,{onPress:nextMonth,"aria-label":"Next month",padding:"xxs",children:_jsx(Icon,{name:"arrow-right-s-line"})}),_jsx(Link,{onPress:nextYear,"aria-label":"Next year",padding:"xxs",paddingR:0,children:_jsx(Icon,{name:"arrow-right-double-line"})})]}),_jsx(View,{className:"neko-day-picker-week",row:true,center:true,gap:"sm",children:weekdayLabels.map(function(w){return _jsx(View,{flex:true,height:30,center:true,children:_jsx(Text,{center:true,sm:true,text4:true,children:w})},w);})}),_jsx(Grid,{className:"neko-day-picker-days",colSpan:24/7,gap:"sm",children:cells.map(function(day,i){var dateVal=currentMonth.date(day);var isActive=!!day&&dateVal.isSame(value,'day');var disabled=!!min&&dateVal.isBefore(min)||!!max&&dateVal.isAfter(max)||(onCheckDisabled==null?void 0:onCheckDisabled(dateVal));return _jsx(Col,{className:"day-cell",center:true,children:_jsx(Link,{ratio:1,width:30,center:true,br:"md",onPress:function onPress(){return!!day&&handleChange(dateVal);},bg:isActive&&'primary',disabled:disabled,children:_jsx(Text,{sm:true,text2:true,center:true,strong:isActive,children:day||''})})},day?dateVal.format('YYYYMMDD'):i);})})]}));}

package/src/abstractions/TouchableOpacity.web.js

@@ -1,3 +0,0 @@
-import { TouchableOpacity as RNTouchableOpacity } from 'react-native'
-
-export const AbsTouchableOpacity = RNTouchableOpacity

package/src/components/calendar/DayPicker.js

@@ -1,94 +0,0 @@
-import React from 'react'
-import dayjs from 'dayjs'
-
-import { Col } from '../structure/Col'
-import { Grid } from '../structure/Row'
-import { Icon } from '../presentation/Icon'
-import { Link } from '../actions/Link'
-import { Text } from '../text/Text'
-import { View } from '../structure/View'
-import { useCalendarDays } from './_helpers/calendarDays'
-
-export function DayPicker({ initialValue, value, onChange, min, max, onCheckDisabled, ...props }) {
-  const [localValue, setLocalValue] = React.useState(dayjs(initialValue))
-  value = value === undefined ? localValue : value
-  const handleChange = (v) => {
-    setLocalValue(v)
-    onChange?.(v)
-  }
-
-  const [currentMonth, setCurrentMonth] = React.useState(() =>
-    initialValue ? dayjs(initialValue).startOf('month') : dayjs().startOf('month')
-  )
-
-  const prevMonth = () => setCurrentMonth((m) => m.subtract(1, 'month'))
-  const nextMonth = () => setCurrentMonth((m) => m.add(1, 'month'))
-
-  const prevYear = () => setCurrentMonth((m) => m.subtract(1, 'year'))
-  const nextYear = () => setCurrentMonth((m) => m.add(1, 'year'))
-
-  const { weekdayLabels, cells } = useCalendarDays(currentMonth)
-
-  return (
-    <View className="neko-day-picker" width={250} {...props}>
-      <View className="neko-date-picker-header" row centerV gap="xxs" height={30}>
-        <Link onPress={prevYear} aria-label="Previous year" padding="xxs" paddingL={0}>
-          <Icon name="arrow-left-double-line" />
-        </Link>
-
-        <Link onPress={prevMonth} aria-label="Previous month" padding="xxs">
-          <Icon name="arrow-left-s-line" />
-        </Link>
-
-        <Text center flex>
-          {currentMonth.format('MMM YYYY')}
-        </Text>
-
-        <Link onPress={nextMonth} aria-label="Next month" padding="xxs">
-          <Icon name="arrow-right-s-line" />
-        </Link>
-
-        <Link onPress={nextYear} aria-label="Next year" padding="xxs" paddingR={0}>
-          <Icon name="arrow-right-double-line" />
-        </Link>
-      </View>
-
-      <View className="neko-day-picker-week" row center gap="sm">
-        {weekdayLabels.map((w) => (
-          <View key={w} flex height={30} center>
-            <Text center sm text4>
-              {w}
-            </Text>
-          </View>
-        ))}
-      </View>
-
-      <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
-        {cells.map((day, i) => {
-          const dateVal = currentMonth.date(day)
-          const isActive = !!day && dateVal.isSame(value, 'day')
-          const disabled =
-            (!!min && dateVal.isBefore(min)) || (!!max && dateVal.isAfter(max)) || onCheckDisabled?.(dateVal)
-
-          return (
-            <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center>
-              <Link
-                ratio={1}
-                width={30}
-                center
-                br="md"
-                onPress={() => !!day && handleChange(dateVal)}
-                bg={isActive && 'primary'}
-                disabled={disabled}
-              >
-                <Text sm text2 center strong={isActive}>
-                  {day || ''}
-                </Text>
-              </Link>
-            </Col>
-          )
-        })}
-      </Grid>
-    </View>
-  )
-}