Skip to content
Snippets Groups Projects
Commit 67cd2cd9 authored by Oliver Schmidt's avatar Oliver Schmidt
Browse files

OZG-6242-7645 button colors

parent ab2a9989
Branches
Tags
1 merge request!47OZG 6242 button enhancement
......@@ -30,16 +30,16 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
export const buttonVariants = cva(
[
'flex items-center gap-4 rounded-md text-sm font-medium box-border',
'flex items-center gap-4 rounded-lg text-sm font-medium box-border',
'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
],
{
variants: {
variant: {
primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
primary: 'bg-primary text-white shadow-md hover:enabled:bg-primary-hover',
outline:
'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100 focus-visible:border-background-200',
ghost: 'border-2 border-transparent hover:enabled:border-primary-hover text-primary focus-visible:border-background-200',
'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:border-background-200',
ghost: 'border-2 border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200',
},
size: {
medium: 'h-9 py-2 px-4 min-w-32',
......@@ -51,7 +51,7 @@ export const buttonVariants = cva(
},
destructive: {
false: 'outline-focus',
true: 'outline-error',
true: 'outline-destructive',
},
},
defaultVariants: {
......@@ -63,17 +63,17 @@ export const buttonVariants = cva(
{
variant: 'primary',
destructive: true,
class: '[&]:hover:enabled:bg-error/90 [&]:bg-error [&]:outline-error',
class: '[&]:hover:enabled:bg-destructive-primary-hover [&]:bg-destructive [&]:outline-destructive',
},
{
variant: 'outline',
destructive: true,
class: '[&]:border-error [&]:text-error',
class: '[&]:border-destructive [&]:text-destructive [&]:hover:enabled:bg-destructive-hover',
},
{
variant: 'ghost',
destructive: true,
class: '[&]:text-error hover:enabled:border-error',
class: '[&]:text-destructive [&]:hover:enabled:bg-destructive-hover',
},
],
},
......
......@@ -139,6 +139,20 @@ export const GhostIcon: Story = {
}),
};
export const GhostIconDestructive: Story = {
args: {
variant: 'ghost',
size: 'fit',
destructive: true,
},
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
<ods-save-icon icon size='medium' class="fill-destructive" />
</ods-button>`,
}),
};
export const GhostLoadingIcon: Story = {
args: {
variant: 'ghost',
......
......@@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge';
[href]="url"
[class]="
twMerge(
'block rounded border-2 border-transparent text-text hover:bg-neutral-100 focus:border-focus focus:outline-none dark:hover:bg-neutral-700',
'hover:bg-ghost-hover block rounded border-2 border-transparent text-text focus:border-focus focus:outline-none dark:hover:bg-neutral-700',
class
)
"
......
......@@ -19,6 +19,12 @@
--color-disabled: 206 14% 95%;
--color-disabled-dark: 208 12% 65%;
--color-destructive: 360, 71%, 49%, 1;
--color-destructive-hover: 360, 71%, 49%, 0.07;
--color-destructive-primary-hover: 360, 71%, 49%, 0.9;
--color-ghost-hover: 212, 80%, 42%, 0.07;
--color-background-secondary: 0 0% 98%;
--color-mainbg: 0 0% 100%;
--text: 0 0% 0%;
......@@ -54,6 +60,12 @@
--color-disabled: 206 14% 15%;
--color-disabled-dark: 208 12% 33%;
--color-destructive: 360, 71%, 49%, 1;
--color-destructive-hover: 360, 71%, 49%, 0.07;
--color-destructive-primary-hover: 360, 71%, 49%, 0.9;
--color-ghost-hover: 43, 96%, 58%, 0.18;
--color-background-secondary: 0 0% 16%;
--color-mainbg: 0 0% 14%;
--text: 0 0% 100%;
......
......@@ -148,6 +148,10 @@ module.exports = {
dark: 'hsl(var(--color-disabled-dark) / <alpha-value>)',
DEFAULT: 'hsl(var(--color-disabled) / <alpha-value>)',
},
destructive: 'hsla(var(--color-destructive))',
'destructive-primary-hover': 'hsla(var(--color-destructive-primary-hover))',
'destructive-hover': 'hsla(var(--color-destructive-hover))',
'ghost-hover': 'hsla(var(--color-ghost-hover))',
},
backdropBlur: {
1: '1px',
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment