Skip to content

Commit

Permalink
feat(button): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 11, 2022
1 parent 3f7190f commit 0886b5a
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 41 deletions.
84 changes: 56 additions & 28 deletions src/shared/classes/ButtonClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,41 +28,69 @@ export const ButtonClasses = (props, colors, classes, darkClasses) => {
rounded: segmented && !segmentedStrong ? '' : 'rounded-full',
},
style: {
fill: cls(
disabled
? cls(colors.disabledBg, colors.disabledText)
: `text-white ${colors.bg} ${colors.activeBgDark} touch-ripple-white`
),
fill: {
common: cls(disabled && cls(colors.disabledBg, colors.disabledText)),
ios: cls(
disabled
? cls(colors.disabledBg, colors.disabledText)
: `${colors.fillTextIos} ${colors.fillBgIos} ${colors.fillActiveBgIos}`
),
material: cls(
disabled
? cls(colors.disabledBg, colors.disabledText)
: cls(
`${colors.fillTextMaterial} ${colors.fillBgMaterial} ${colors.fillActiveBgMaterial} touch-ripple-white`,
darkClasses('dark:touch-ripple-black')
)
),
},
outline: {
common: cls(
disabled
? cls(colors.disabledText, colors.disabledBorder)
: cls(
!segmented && `${colors.border}`,
colors.text,
colors.activeBg,
'active:bg-opacity-15',
colors.touchRipple
)
: cls('active:bg-opacity-15', colors.touchRipple)
),
ios: cls(
!segmented && 'border-2',
!disabled && !segmented && colors.outlineBorderIos,
!disabled && cls(colors.textIos, colors.activeBgIos)
),
material: cls(
!segmented && 'border',
!disabled && !segmented && colors.outlineBorderMaterial,
!disabled && cls(colors.textMaterial, colors.activeBgMaterial)
),
ios: cls(!segmented && 'border-2'),
material: cls(!segmented && 'border'),
},
clear: cls(
disabled
? colors.disabledText
: `${colors.text} ${colors.activeBg} active:bg-opacity-15 ${colors.touchRipple}`
),
tonal: disabled
? cls(colors.disabledBg, colors.disabledText)
: cls(
colors.bg,
colors.text,
'bg-opacity-15',
colors.touchRipple,
colors.activeBg,
'active:bg-opacity-25'
clear: {
common: cls(
disabled
? colors.disabledText
: `active:bg-opacity-15 ${colors.touchRipple}`
),
ios: !disabled && cls(colors.textIos, colors.activeBgIos),
material:
!disabled && cls(colors.textMaterial, colors.activeBgMaterial),
},
tonal: {
common: disabled
? cls(colors.disabledBg, colors.disabledText)
: cls(colors.touchRipple),
ios:
!disabled &&
cls(
colors.tonalTextIos,
colors.tonalBgIos,
colors.activeBgIos,
'bg-opacity-15 active:bg-opacity-25'
),
material:
!disabled &&
cls(
colors.tonalTextMaterial,
colors.tonalBgMaterial,
colors.activeBgMaterial
),
},
segmentedStrong: cls(
`active:bg-black active:bg-opacity-10`,
darkClasses(
Expand Down
12 changes: 6 additions & 6 deletions src/shared/classes/SegmentedClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export const SegmentedClasses = (props, colors, darkClasses) => {
? 'shadow'
: `shadow divide-x divide-black divide-opacity-10`,
outline: {
common: `${colors.border}`,
ios: 'border-2',
material: 'border',
common: ``,
ios: `${colors.borderIos} border-2`,
material: `${colors.borderMaterial} border`,
},
outlineInner: {
common: `-m-0.5 flex w-full justify-center items-center ${colors.divide}`,
ios: 'divide-x-2',
material: 'divide-x',
common: `-m-0.5 flex w-full justify-center items-center`,
ios: `divide-x-2 ${colors.divideIos}`,
material: `divide-x ${colors.divideMaterial}`,
},
strong: cls(
'p-0.5 bg-black bg-opacity-5 space-x-1 relative',
Expand Down
33 changes: 28 additions & 5 deletions src/shared/colors/ButtonColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,34 @@ import { cls } from '../cls.js';

export const ButtonColors = (colorsProp = {}, dark) => {
return {
text: 'text-primary',
border: 'border-primary',
bg: 'bg-primary',
activeBg: 'active:bg-primary',
activeBgDark: 'active:bg-primary-dark',
activeBgIos: 'active:bg-primary',
activeBgMaterial: '',
textIos: 'text-primary',
textMaterial: cls('text-md-light-primary', 'dark:text-md-dark-primary'),
fillTextIos: cls('text-white'),
fillTextMaterial: cls(
'text-md-light-on-primary',
dark('dark:text-md-dark-on-primary')
),
fillActiveBgIos: 'active:bg-primary-dark',
fillActiveBgMaterial: '',
fillBgIos: 'bg-primary',
fillBgMaterial: cls('bg-md-light-primary', dark('dark:bg-md-dark-primary')),
outlineBorderIos: 'border-primary',
outlineBorderMaterial: cls(
'border-md-light-outline',
dark('dark:border-md-dark-outline')
),
tonalBgIos: 'bg-primary',
tonalBgMaterial: cls(
'bg-md-light-secondary-container',
dark('dark:bg-md-dark-secondary-container')
),
tonalTextIos: 'text-primary',
tonalTextMaterial: cls(
'text-md-light-on-secondary-container',
dark('dark:text-md-dark-on-secondary-container')
),
touchRipple: 'touch-ripple-primary',
disabledText: cls(
'text-black text-opacity-30',
Expand Down
12 changes: 10 additions & 2 deletions src/shared/colors/SegmentedColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,16 @@ import { cls } from '../cls.js';

export const SegmentedColors = (colorsProp = {}, dark) => {
return {
border: 'border-primary',
divide: 'divide-primary',
borderIos: 'border-primary',
borderMaterial: cls(
'border-md-light-outline',
dark('dark:border-md-dark-outline')
),
divideIos: 'divide-primary',
divideMaterial: cls(
'divide-md-light-outline',
dark('dark:divide-md-dark-outline')
),
...colorsProp,
};
};

0 comments on commit 0886b5a

Please sign in to comment.