eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Update illustrations & icons docs + Fixes

Browse Source
This commit is contained in:
venashial
2022-05-07 17:22:33 -07:00
parent 91b602341b
commit fd936e5bf3
13 changed files with 228 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
src/package/components/Button.svelte
View File

@@ -1,151 +1,157 @@
<script lang="ts">
// TODO: sizes
// TODO: icon only buttons should have uniform padding
// TODO: Could be a class
// TODO: sizes
// TODO: icon only buttons should have uniform padding
// TODO: Could be a class
import { classCombine } from '../utils/classCombine'
import { classCombine } from '../utils/classCombine';
/** The element to be styled as a button */
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
export let href = ''
if (href) as = 'a'
/** The element to be styled as a button */
export let as: 'button' | 'a' | 'summary' | 'input' = 'button';
export let href = '';
if (href) as = 'a';
/** Use `value` if the button is an `<input`> */
export let value = ''
/** Use `value` if the button is an `<input`> */
export let value = '';
export let size: 'sm' | 'md' | 'lg' = 'md'
export let color: '' | 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent' = ''
export let size: 'sm' | 'md' | 'lg' = 'md';
export let color:
| ''
| 'raised'
| 'primary'
| 'primary-light'
| 'danger'
| 'danger-light'
| 'transparent' = '';
/** Show notification badge in the upper right of button */
export let badge = false
/** Show notification badge in the upper right of button */
export let badge = false;
export let disabled = false
export let disabled = false;
let className: string
$: className = classCombine(['button', `button--size-${size}`, `button--color-${color}`, badge && 'has-badge'])
let className: string;
$: className = classCombine([
'button',
`button--size-${size}`,
`button--color-${color}`,
badge && 'has-badge',
]);
</script>
{#if as === 'button'}
<button class={className} {disabled} on:click>
<slot/>
</button>
{:else if as === 'a'}
<a class={className} {href} {disabled} on:click>
<slot/>
</a>
{:else if as === 'summary'}
<summary class={className} {disabled} on:click>
<slot/>
</summary>
{:else if as === 'input'}
<input class={className} {value} {disabled} on:click/>
{#if as === 'a'}
<a class={className} {href} {disabled} on:click>
<slot />
</a>
{:else}
<svelte:element this={as} class={className} {disabled} on:click>
<slot />
</svelte:element>
{/if}
<style lang="postcss">
.button {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.25rem 1rem;
grid-gap: 14px;
cursor: pointer;
position: relative;
.button {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.25rem 1rem;
grid-gap: 14px;
cursor: pointer;
position: relative;
box-shadow: var(--shadow-inset-sm);
box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg);
border-radius: var(--rounded);
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
background-color: var(--color-button-bg);
border-radius: var(--rounded);
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
&:hover {
background-color: var(--color-button-bg-hover);
}
&--color {
&-raised {
background-color: var(--color-raised-bg);
&:hover {
background-color: var(--color-button-bg-hover);
background-color: var(--color-raised-bg-hover);
}
}
&--color {
&-raised {
background-color: var(--color-raised-bg);
&-primary {
background-color: var(--color-brand);
color: var(--color-brand-contrast);
&:hover {
background-color: var(--color-raised-bg-hover);
}
}
&-primary {
background-color: var(--color-brand);
color: var(--color-brand-contrast);
&:hover {
background-color: var(--color-brand-dark);
}
}
&-primary-light {
background-color: var(--color-brand-light);
transition: filter 0s ease-in-out;
&:hover {
background-color: var(--color-brand-light);
filter: brightness(0.9);
}
}
&-transparent {
background-color: transparent;
box-shadow: none;
}
&-danger {
background-color: var(--color-badge-red-dot);
color: var(--color-brand-contrast);
&:hover {
background-color: var(--color-badge-red-text);
}
}
&-danger-light {
background-color: var(--color-popup-danger-bg);
color: var(--color-popup-danger-text);
transition: filter 0s ease-in-out;
&:hover {
filter: brightness(0.9);
}
}
&:hover {
background-color: var(--color-brand-dark);
}
}
&:disabled {
opacity: 50%;
cursor: not-allowed;
filter: grayscale(50%);
&-primary-light {
background-color: var(--color-brand-light);
transition: filter 0s ease-in-out;
/* Not ideal, but preventing events being fired needs to be implemented */
pointer-events: none;
&:hover {
background-color: var(--color-brand-light);
filter: brightness(0.9);
}
}
&--pad-even {
padding: 0.5rem;
font-size: 1rem;
line-height: 0;
min-width: 2rem;
min-height: 2rem;
justify-content: center;
}
&-transparent {
background-color: transparent;
box-shadow: none;
}
&.has-badge::after {
content: '';
width: 0.5rem;
height: 0.5rem;
border-radius: var(--rounded-max);
background-color: var(--color-brand);
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
&-danger {
background-color: var(--color-badge-red-dot);
color: var(--color-brand-contrast);
/* Only child doesn't work as intended because text is passed through as `innerText` */
:global(.icon:only-child) {
margin: 4px -6px;
&:hover {
background-color: var(--color-badge-red-text);
}
}
&-danger-light {
background-color: var(--color-popup-danger-bg);
color: var(--color-popup-danger-text);
transition: filter 0s ease-in-out;
&:hover {
filter: brightness(0.9);
}
}
}
&:disabled {
opacity: 50%;
cursor: not-allowed;
filter: grayscale(50%);
/* Not ideal, but preventing events being fired needs to be implemented */
pointer-events: none;
}
&--pad-even {
padding: 0.5rem;
font-size: 1rem;
line-height: 0;
min-width: 2rem;
min-height: 2rem;
justify-content: center;
}
&.has-badge::after {
content: '';
width: 0.5rem;
height: 0.5rem;
border-radius: var(--rounded-max);
background-color: var(--color-brand);
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
/* Only child doesn't work as intended because text is passed through as `innerText` */
:global(.icon:only-child) {
margin: 4px -7px;
}
}
</style>

15
src/package/config/svelte.config.js
View File

@@ -3,13 +3,14 @@ import Icons from 'unplugin-icons/vite';
import svelteSvg from '@poppanator/sveltekit-svg';
export const preprocess = sveltePreprocess({
postcss: true,
postcss: true,
})
export const plugins = [svelteSvg(),
Icons({
compiler: 'svelte',
defaultClass: 'icon',
scale: 1,
}),
export const plugins = [
svelteSvg(),
Icons({
compiler: 'svelte',
defaultClass: 'icon',
scale: 1,
}),
]

1
src/package/styles/classes/divider.postcss
View File

@@ -2,4 +2,5 @@
margin: 0.25rem 0;
border: none;
border-top: 1px solid var(--color-divider);
width: 100%;
}

1
src/package/styles/normalize.postcss
View File

@@ -57,5 +57,6 @@ ul {
.icon {
height: auto;
width: 16px;
min-width: 16px;
aspect-ratio: 1 / 1;
}

2
src/package/utils/ago.ts
View File

@@ -1,6 +1,6 @@
/**
* Human readable elapsed or remaining time (example: 3 minutes ago)
* @author github.com/victornpb
* @author https://github.com/victornpb
* @see https://stackoverflow.com/a/67338038/938822
*/
export function ago(