Skip to content

Commit

Permalink
feat: option to exclude dark: variants
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 27, 2021
1 parent de882b5 commit b09331c
Show file tree
Hide file tree
Showing 24 changed files with 204 additions and 77 deletions.
1 change: 0 additions & 1 deletion TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

- Common

- add darktheme to provider (to exclude `dark:` classes from output)
- rename themeClasses helpers to `c` `i` and `m`

- React
Expand Down
3 changes: 2 additions & 1 deletion src/react/components/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const App = (props) => {
className,

theme = 'material',
dark = true,

// Children
children,
Expand All @@ -23,7 +24,7 @@ const App = (props) => {
};

return (
<TailwindMobileProvider theme={theme}>
<TailwindMobileProvider theme={theme} dark={dark}>
<Component className={cls(`twm-${theme}`, className)} {...attrs}>
{children}
</Component>
Expand Down
4 changes: 3 additions & 1 deletion src/react/components/Block.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { cls } from '../shared/cls.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const Block = (props) => {
Expand Down Expand Up @@ -33,9 +34,10 @@ const Block = (props) => {
};

const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const colors = {
strongBg: 'bg-block-strong-light dark:bg-block-strong-dark',
strongBg: cls(`bg-block-strong-light`, dark('dark:bg-block-strong-dark')),
...colorsProp,
};

Expand Down
16 changes: 12 additions & 4 deletions src/react/components/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useTheme } from '../shared/use-theme.js';
import { useTouchRipple } from '../shared/use-touch-ripple.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';

const Button = (props) => {
const rippleElRef = useRef(null);
Expand Down Expand Up @@ -51,6 +52,7 @@ const Button = (props) => {

const theme = useTheme({ ios, material });
const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

useTouchRipple(rippleElRef, theme === 'material');

Expand Down Expand Up @@ -99,10 +101,16 @@ const Button = (props) => {
colors.touchRipple
),
clear: `${colors.text} ${colors.activeBg} active:bg-opacity-15 ${colors.touchRipple}`,
segmentedStrong:
'active:bg-black active:bg-opacity-10 dark:active:bg-white dark:active:bg-opacity-5 dark:touch-ripple-white',
segmentedStrongActive:
'bg-white shadow dark:bg-opacity-15 dark:touch-ripple-white',
segmentedStrong: cls(
`active:bg-black active:bg-opacity-10`,
dark(
'dark:active:bg-white dark:active:bg-opacity-5 dark:touch-ripple-white'
)
),
segmentedStrongActive: cls(
`bg-white shadow`,
dark('dark:bg-opacity-15 dark:touch-ripple-white')
),
},
size: {
small: {
Expand Down
27 changes: 20 additions & 7 deletions src/react/components/Card.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { cls } from '../shared/cls.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const Card = (props) => {
Expand Down Expand Up @@ -31,10 +32,11 @@ const Card = (props) => {
};

const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const colors = {
bg: 'bg-block-strong-light dark:bg-block-strong-dark',
footerText: 'text-black dark:text-white',
bg: cls(`bg-block-strong-light`, dark('dark:bg-block-strong-dark')),
footerText: cls(`text-black`, dark('dark:text-white')),
...colorsProp,
};

Expand All @@ -43,14 +45,25 @@ const Card = (props) => {
const c = themeClasses(
{
base: {
common: cls(margin, `${colors.bg} rounded overflow-hidden`),
common: cls(margin, colors.bg, `rounded overflow-hidden`),
shadow: 'shadow',
outline: `border border-black dark:border-white border-opacity-10 dark:border-opacity-10`,
outline: cls(
`border border-black border-opacity-10`,
dark('dark:border-white dark:border-opacity-10')
),
},
header:
'border-b border-black dark:border-white border-opacity-10 dark:border-opacity-10 px-4 py-2',
header: cls(
`border-b border-black border-opacity-10 px-4 py-2`,
dark('dark:border-white dark:border-opacity-10')
),
content: 'p-4 text-sm',
footer: `border-t border-black dark:border-white border-opacity-10 dark:border-opacity-10 ${colors.footerText} text-sm text-opacity-55 dark:text-opacity-55 px-4 py-2`,
footer: cls(
`border-t border-black border-opacity-10 text-sm text-opacity-55`,
colors.footerText,
dark(
'dark:border-white dark:border-opacity-10 dark:text-opacity-55 px-4 py-2'
)
),
},
className
);
Expand Down
22 changes: 16 additions & 6 deletions src/react/components/Checkbox.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { useEffect, useRef } from 'react';
import { cls } from '../shared/cls.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

import CheckboxIcon from './icons/CheckboxIcon.jsx';
Expand Down Expand Up @@ -38,12 +40,17 @@ const Checkbox = (props) => {
};

const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const colors = {
borderIos:
'border-black border-opacity-30 dark:border-white dark:border-opacity-30',
borderMaterial:
'border-black border-opacity-40 dark:border-white dark:border-opacity-40',
borderIos: cls(
`border-black border-opacity-30`,
dark('dark:border-white dark:border-opacity-30')
),
borderMaterial: cls(
`border-black border-opacity-40`,
dark('dark:border-white dark:border-opacity-40')
),
bgChecked: 'bg-primary',
borderChecked: 'border-primary',
...colorsProp,
Expand All @@ -61,7 +68,10 @@ const Checkbox = (props) => {
className
)}`,
iconWrap: {
common: 'flex items-center justify-center text-white dark:text-black',
common: cls(
`flex items-center justify-center text-white`,
dark('dark:text-black')
),
ios: 'w-5.5 h-5.5 rounded-full border',
material: 'w-4.5 h-4.5 rounded-sm border-2',
notChecked: {
Expand All @@ -75,7 +85,7 @@ const Checkbox = (props) => {
checked: 'opacity-100',
},
indeterminateIcon: {
common: 'bg-white w-3/4 dark:bg-black',
common: cls(`bg-white w-3/4`, dark('dark:bg-black')),
ios: 'h-0.5 rounded-full',
material: 'h-0.5',
},
Expand Down
11 changes: 8 additions & 3 deletions src/react/components/Chip.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from 'react';
import { cls } from '../shared/cls.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

import DeleteIcon from './icons/DeleteIcon.jsx';
Expand Down Expand Up @@ -32,14 +34,17 @@ const Chip = (props) => {
};

const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const style = outline ? 'outline' : 'fill';

const colors = {
bg: 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10',
bg: cls(`bg-black bg-opacity-10`, dark('dark:bg-white dark:bg-opacity-10')),
text: 'text-current',
border:
'border-black border-opacity-10 dark:border-white dark:border-opacity-10',
border: cls(
`border-black border-opacity-10`,
dark('dark:border-white dark:border-opacity-10')
),
...colorsProp,
};

Expand Down
20 changes: 13 additions & 7 deletions src/react/components/Link.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { positionClass } from '../shared/position-class.js';
import { useTheme } from '../shared/use-theme.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useTouchRipple } from '../shared/use-touch-ripple.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';

const Link = (props) => {
const rippleElRef = useRef(null);
Expand Down Expand Up @@ -42,6 +43,7 @@ const Link = (props) => {

const theme = useTheme({ ios, material });
const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const needsTouchRipple =
theme === 'material' && (toolbar || tabbar || navbar);
Expand All @@ -50,7 +52,10 @@ const Link = (props) => {

const colors = {
text: 'text-primary',
tabbarInactive: 'text-black dark:text-white dark:text-opacity-55',
tabbarInactive: cls(
`text-black`,
dark('dark:text-white dark:text-opacity-55')
),
...colorsProp,
};

Expand All @@ -61,20 +66,21 @@ const Link = (props) => {
const c = themeClasses({
base: {
common: cls(
`${textColor} inline-flex space-x-1 justify-center items-center cursor-pointer select-none`,
textColor,
`inline-flex space-x-1 justify-center items-center cursor-pointer select-none`,
needsTouchRipple &&
` touch-ripple-primary ${positionClass('relative', className)} z-10`
`touch-ripple-primary ${positionClass('relative', className)} z-10`
),
notTabbar: {
ios: `active:opacity-30 duration-300 active:duration-0`,
material: needsTouchRipple ? '' : `active:opacity-55`,
},
},
tabbar: {
common: `w-full h-full ${positionClass(
'relative',
className
)} duration-300`,
common: cls(
positionClass('relative', className),
`w-full h-full duration-300`
),
material: 'uppercase font-medium text-sm overflow-hidden z-10',
active: {},
inactive: {
Expand Down
4 changes: 3 additions & 1 deletion src/react/components/List.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { cls } from '../shared/cls.js';
import { positionClass } from '../shared/position-class.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';

const List = (props) => {
Expand Down Expand Up @@ -33,9 +34,10 @@ const List = (props) => {
};

const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const colors = {
bg: 'bg-block-strong-light dark:bg-block-strong-dark',
bg: cls(`bg-block-strong-light`, dark('dark:bg-block-strong-dark')),
...colorsProp,
};

Expand Down
10 changes: 8 additions & 2 deletions src/react/components/ListInput.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useThemeClasses } from '../shared/use-theme-classes.js';
import DeleteIcon from './icons/DeleteIcon.jsx';
import DropdownIcon from './icons/DropdownIcon.jsx';
import ListItem from './ListItem.jsx';
import { useDarkClasses } from '../shared/use-dark-classes.js';

const ListInput = (props) => {
const {
Expand Down Expand Up @@ -74,6 +75,7 @@ const ListInput = (props) => {

const theme = useTheme({ ios, material });
const themeClasses = useThemeClasses({ ios, material });
const dark = useDarkClasses();

const colors = {
labelFocus: 'text-primary',
Expand Down Expand Up @@ -197,13 +199,17 @@ const ListInput = (props) => {
ios: 'h-11',
material: 'h-9',
notFloating: cls(
'placeholder-black placeholder-opacity-30 dark:placeholder-white dark:placeholder-opacity-30',
'placeholder-black placeholder-opacity-30',
dark('dark:placeholder-white dark:placeholder-opacity-30'),
type === 'textarea' && 'py-3'
),

floating: isFloatingTransformed
? 'placeholder-transparent'
: 'placeholder-black placeholder-opacity-30 dark:placeholder-white dark:placeholder-opacity-30',
: cls(
`placeholder-black placeholder-opacity-30`,
dark('dark:placeholder-white dark:placeholder-opacity-30')
),
},
errorInfo: {
common: 'text-xs relative z-10',
Expand Down
Loading

0 comments on commit b09331c

Please sign in to comment.