Skip to content

Commit

Permalink
feat(actions): m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Aug 12, 2022
1 parent e4d618e commit c47b7e4
Show file tree
Hide file tree
Showing 8 changed files with 34 additions and 17 deletions.
2 changes: 1 addition & 1 deletion src/react/components/ActionsLabel.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const ActionsLabel = forwardRef((props, ref) => {
material,

fontSizeIos = 'text-sm',
fontSizeMaterial = 'text-base',
fontSizeMaterial = 'text-sm',

hairlines = true,

Expand Down
12 changes: 7 additions & 5 deletions src/shared/classes/ActionsButtonClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,27 @@ export const ActionsButtonClasses = (props, colors, darkClasses) => {
return {
base: {
common: cls(
colors.text,
`flex items-center w-full px-4 relative z-10 overflow-hidden`,
bold && 'font-semibold'
`flex items-center w-full px-4 relative z-10 overflow-hidden`
),
ios: cls(
`h-14`,
colors.textIos,
colors.bgIos,
colors.activeBgIos,
fontSizeIos,
hairlines && 'hairline-b',
'first:rounded-t-xl last:rounded-b-xl justify-center'
'first:rounded-t-xl last:rounded-b-xl justify-center',
bold && 'font-semibold'
),
material: cls(
`h-12`,
colors.textMaterial,
colors.bgMaterial,
colors.activeBgMaterial,
fontSizeMaterial,
'justify-start',
darkClasses('dark:touch-ripple-white')
darkClasses('dark:touch-ripple-white'),
bold && 'font-medium'
),
},
};
Expand Down
13 changes: 10 additions & 3 deletions src/shared/classes/ActionsLabelClasses.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,24 @@ export const ActionsLabelClasses = (props, colors) => {
return {
base: {
common: cls(
colors.bg,
colors.text,
`flex items-center w-full px-4 relative z-10 overflow-hidden ${colors.activeBg}`
),
ios: cls(
`h-14`,
colors.bgIos,
colors.textIos,
fontSizeIos,
hairlines && 'hairline-b',
'first:rounded-t-xl last:rounded-b-xl justify-center'
),
material: cls(`h-12`, fontSizeMaterial, 'justify-start'),
material: cls(
`h-12`,
colors.bgMaterial,
colors.textMaterial,
fontSizeMaterial,
'font-medium',
'justify-start'
),
},
};
};
8 changes: 6 additions & 2 deletions src/shared/colors/ActionsButtonColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@ import { cls } from '../cls.js';
export const ActionsButtonColors = (colorsProp = {}, dark) => {
return {
bgIos: cls('bg-white', dark('dark:bg-neutral-800')),
bgMaterial: cls('bg-white', dark('dark:bg-neutral-800')),
bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')),
activeBgIos: cls(
'active:bg-neutral-200',
dark('dark:active:bg-neutral-700')
),
activeBgMaterial: '',
text: 'text-primary',
textIos: 'text-primary',
textMaterial: cls(
'text-md-light-on-surface',
dark('dark:text-md-dark-on-surface')
),
...colorsProp,
};
};
10 changes: 7 additions & 3 deletions src/shared/colors/ActionsLabelColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,16 @@ import { cls } from '../cls.js';

export const ActionsLabelColors = (colorsProp = {}, dark) => {
return {
bg: cls('bg-white', dark('dark:bg-neutral-800')),
activeBg: cls('active:bg-neutral-200', dark('dark:active:bg-neutral-700')),
text: cls(
bgIos: cls('bg-white', dark('dark:bg-neutral-800')),
bgMaterial: cls('bg-md-light-surface-3', dark('dark:bg-md-dark-surface-3')),
textIos: cls(
'text-black text-opacity-55',
dark('dark:text-white dark:text-opacity-55')
),
textMaterial: cls(
'text-md-light-primary',
dark('dark:text-md-dark-primary')
),
...colorsProp,
};
};
2 changes: 1 addition & 1 deletion src/svelte/components/ActionsLabel.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
export let material = undefined;
export let fontSizeIos = 'text-sm';
export let fontSizeMaterial = 'text-base';
export let fontSizeMaterial = 'text-sm';
export let hairlines = true;
const dark = useDarkClasses();
Expand Down
2 changes: 1 addition & 1 deletion src/types/ActionsLabel.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ interface Props {
/**
* Button text font size in Material theme
*
* @default 'text-base'
* @default 'text-sm'
*/
fontSizeMaterial?: string;

Expand Down
2 changes: 1 addition & 1 deletion src/vue/components/ActionsLabel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
},
hairlines: { type: Boolean, default: true },
fontSizeIos: { type: String, default: 'text-sm' },
fontSizeMaterial: { type: String, default: 'text-base' },
fontSizeMaterial: { type: String, default: 'text-sm' },
},
setup(props, ctx) {
const colors = computed(() =>
Expand Down

0 comments on commit c47b7e4

Please sign in to comment.