gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-12 07:13:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add support for 'warn' color option in button component

Browse Source
This commit is contained in:
Mattias Granlund 2024-01-03 14:33:04 +01:00
parent 9a3d458e30
commit 012c1c4a7d
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
gitbutler-ui/src/lib/components/Button.svelte
View File

@ -1,3 +1,7 @@
<script lang="ts" context="module">
export type ButtonColor = 'primary' | 'neutral' | 'error' | 'warn';
</script>
<script lang="ts">
import { onMount } from 'svelte';
import type iconsJson from '$lib/icons/icons.json';
@ -5,7 +9,7 @@
export let icon: keyof typeof iconsJson | undefined = undefined;
export let iconAlign: 'left' | 'right' = 'right';
export let color: 'primary' | 'neutral' | 'error' = 'primary';
export let color: ButtonColor = 'primary';
export let kind: 'filled' | 'outlined' = 'filled';
export let disabled = false;
export let id: string | undefined = undefined;
@ -31,8 +35,10 @@
class={`btn ${className}`}
class:error-outline={color == 'error' && kind == 'outlined'}
class:primary-outline={color == 'primary' && kind == 'outlined'}
class:warn-outline={color == 'warn' && kind == 'outlined'}
class:error-filled={color == 'error' && kind == 'filled'}
class:primary-filled={color == 'primary' && kind == 'filled'}
class:warn-filled={color == 'warn' && kind == 'filled'}
class:neutral-outline={color == 'neutral' && kind == 'outlined'}
class:pointer-events-none={loading}
class:icon-left={iconAlign == 'left'}
@ -125,6 +131,29 @@
background: var(--clr-theme-container-pale);
}
}
.warn-filled {
color: var(--clr-theme-warn-on-element);
background: var(--clr-theme-warn-element);
&:hover {
background: var(--clr-theme-warn-element-dim);
}
&:active {
background: var(--clr-theme-warn-element-dark);
}
}
.warn-outline {
color: var(--clr-theme-warn-outline);
border: 1px solid var(--clr-theme-warn-outline);
&:hover {
color: var(--clr-theme-warn-outline-dim);
border: 1px solid var(--clr-theme-warn-outline-dim);
}
&:active {
color: var(--clr-theme-warn-outline-dim);
border: 1px solid var(--clr-theme-warn-outline-dim);
background: var(--clr-theme-warn-container);
}
}
.error-filled {
color: var(--clr-theme-err-on-element);
background: var(--clr-theme-err-element);