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

Update style vars + Add examples to docs + Add Avatar, NavRow, Pagination, & Link

Browse Source
This commit is contained in:
venashial
2022-03-20 00:19:51 -07:00
parent de9c62617b
commit 15b7c241ff
34 changed files with 787 additions and 1727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/lib/components/Avatar.svelte Normal file
View File

@@ -0,0 +1,94 @@
<script lang="ts">
import { onMount } from 'svelte'
import { classCombine } from '$lib/utils/classCombine'
export let src: string | null
export let size: 'xs' | 'sm' | 'md' | 'lg'
export let circle = false
export let floatUp = false
let className: string;
$: className = classCombine(['avatar', circle && 'avatar--circle', `avatar--size-${size}`, floatUp && 'avatar--float-up'])
let img
onMount(() => {
if (img && img.naturalWidth) {
const isPixelated = () => {
if (img.naturalWidth < 96 && img.naturalWidth > 0) {
img.style = 'image-rendering: pixelated;'
}
}
if (img.naturalWidth) {
isPixelated()
} else {
img.onload = isPixelated
}
}
})
</script>
{#if src}
<img {src} bind:this={img} class={className} alt=""/>
{:else}
<svg
class={className}
xml:space="preserve"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="1.5"
clip-rule="evenodd"
viewBox="0 0 104 104"
>
<path fill="none" d="M0 0h103.4v103.4H0z"/>
<path
fill="none"
stroke="#9a9a9a"
stroke-width="5"
d="M51.7 92.5V51.7L16.4 31.3l35.3 20.4L87 31.3 51.7 11 16.4 31.3v40.8l35.3 20.4L87 72V31.3L51.7 11"
/>
</svg>
{/if}
<style lang="postcss">
.avatar {
border-radius: var(--rounded);
box-shadow: var(--shadow-inset-lg), var(--shadow-raised-lg);
height: var(--size);
width: var(--size);
background-color: var(--color-button-bg);
&--size {
&-xs {
--size: 2.25rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
}
&-sm {
--size: 3rem;
box-shadow: var(--shadow-inset), var(--shadow-raised);
border-radius: var(--rounded-sm);
}
&-md {
--size: 6rem;
}
&-lg {
--size: 9rem;
background-color: var(--color-brand-contrast);
}
}
&--float-up {
margin-top: calc(var(--size) * (-2 / 3));
}
&--circle {
border-radius: 50%;
}
}
</style>

51
src/lib/components/Badge.svelte Normal file
View File

@@ -0,0 +1,51 @@
<script lang="ts">
export let label = ''
// Supports `green`, `yellow`, `red`, & `gray`
export let color = 'gray'
</script>
<div class="badge badge--color-{color}">
{label}
</div>
<style lang="postcss">
.badge {
font-weight: var(--font-weight-bold);
display: inline;
position: relative;
padding-left: 0.9rem;
line-height: 1rem;
&--color-green {
color: var(--color-badge-green-text);
--color-dot: var(--color-badge-green-dot);
}
&--color-yellow {
color: var(--color-badge-yellow-text);
--color-dot: var(--color-badge-yellow-dot);
}
&--color-red {
color: var(--color-badge-red-text);
--color-dot: var(--color-badge-red-dot);
}
&--color-gray {
color: var(--color-badge-gray-text);
--color-dot: var(--color-badge-gray-dot);
}
&::before {
content: '';
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: var(--color-dot);
position: absolute;
left: 0;
bottom: 25%;
}
}
</style>

414
src/lib/components/Button.svelte
View File

@@ -1,323 +1,145 @@
<script lang="ts">
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
import { classCombine } from '$lib/utils/classCombine'
// The element to be styled as a button
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
export let href: string
if (href) as = 'a'
// Use `value` if the button is an `<input`>
export let value: string;
export let value: string
export let size: 'sm' | 'md' | 'lg' = 'md'
export let color: 'raised' | 'primary' | 'danger';
export let color: 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent'
let className = `btn btn--${size}`;
className += color && (` btn--${color}`)
// Show notification badge in the upper right of button
export let badge = false
export let disabled = false
let className: string
$: className = classCombine(['button', `button--size-${size}`, `button--color-${color}`, badge && 'has-badge'])
</script>
{#if as === 'button'}
<button class={className}>
<slot />
<button class={className} {disabled}>
<slot/>
</button>
{:else if as === 'a'}
<a class={className} {href}>
<slot />
<a class={className} {href} {disabled}>
<slot/>
</a>
{:else if as === 'summary'}
<summary class={className}>
<slot />
<summary class={className} {disabled}>
<slot/>
</summary>
{:else if as === 'input'}
<input class={className} {value} />
<input class={className} {value} {disabled}/>
{/if}
<style lang="postcss">
/* Base button styles */
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px var(--spacer-3);
font-size: var(--body-font-size);
font-weight: var(--font-weight-semibold);
line-height: 20px; /* Specifically not inherit our `<body>` default */
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: var(--border-width) var(--border-style);
border-radius: var(--radii-2);
appearance: none; /* Corrects inability to style clickable `input` types in iOS. */
.button {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0.25rem 1rem;
grid-gap: 0.4rem;
cursor: pointer;
position: relative;
&:hover {
text-decoration: none;
}
box-shadow: var(--shadow-inset-sm);
&:disabled,
&.disabled,
&[aria-disabled='true'] {
cursor: default;
}
background-color: var(--color-button-bg);
border-radius: var(--rounded);
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
i {
font-style: normal;
font-weight: var(--font-weight-semibold);
opacity: 0.75;
}
&:hover {
background-color: var(--color-button-bg-hover);
}
.icon {
margin-right: var(--spacer-1);
color: var(--color-fg-muted);
&--color {
&-raised {
background-color: var(--color-raised-bg);
&:only-child {
margin-right: 0;
}
&: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 {
color: var(--color-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;
}
&.is-iconified {
padding: 0.25rem 0.75rem;
}
&.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;
}
}
.Counter {
margin-left: 2px;
color: inherit;
text-shadow: none;
vertical-align: top;
background-color: var(--color-btn-counter-bg);
}
.dropdown-caret {
margin-left: var(--spacer-1);
opacity: 0.8;
}
}
/* Default button */
.btn {
color: var(--color-btn-text);
background-color: var(--color-btn-bg);
border-color: var(--color-btn-border);
box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
transition-property: color, background-color, border-color;
&:hover,
&.hover,
[open] > & {
background-color: var(--color-btn-hover-bg);
border-color: var(--color-btn-hover-border);
transition-duration: 0.1s;
}
&:active {
background-color: var(--color-btn-active-bg);
border-color: var(--color-btn-active-border);
transition: none;
}
&.selected,
&[aria-selected='true'] {
background-color: var(--color-btn-selected-bg);
box-shadow: var(--color-primer-shadow-inset);
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-primer-fg-disabled);
background-color: var(--color-btn-bg);
border-color: var(--color-btn-border);
:global(.icon) {
color: var(--color-primer-fg-disabled);
}
}
/* Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons */
&:focus,
&.focus {
border-color: var(--color-btn-focus-border);
outline: none;
box-shadow: var(--color-btn-focus-shadow);
}
}
/* Primary button */
.btn--primary {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-bg);
border-color: var(--color-btn-primary-border);
box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
&:hover,
&.hover,
[open] > & {
background-color: var(--color-btn-primary-hover-bg);
border-color: var(--color-btn-primary-hover-border);
}
&:active,
&.selected,
&[aria-selected='true'] {
background-color: var(--color-btn-primary-selected-bg);
box-shadow: var(--color-btn-primary-selected-shadow);
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-btn-primary-disabled-text);
background-color: var(--color-btn-primary-disabled-bg);
border-color: var(--color-btn-primary-disabled-border);
:global(.icon) {
color: var(--color-btn-primary-disabled-text);
}
}
&:focus,
&.focus {
background-color: var(--color-btn-primary-focus-bg);
border-color: var(--color-btn-primary-focus-border);
box-shadow: var(--color-btn-primary-focus-shadow);
}
.Counter {
color: inherit;
background-color: var(--color-btn-primary-counter-bg);
}
:global(.icon) {
color: var(--color-btn-primary-icon);
}
}
/* Outline button */
.btn--outline {
color: var(--color-btn-outline-text);
&:hover,
[open] > & {
color: var(--color-btn-outline-hover-text);
background-color: var(--color-btn-outline-hover-bg);
border-color: var(--color-btn-outline-hover-border);
box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
.Counter {
background-color: var(--color-btn-outline-hover-counter-bg);
}
:global(.icon) {
color: inherit;
}
}
&:active,
&.selected,
&[aria-selected='true'] {
color: var(--color-btn-outline-selected-text);
background-color: var(--color-btn-outline-selected-bg);
border-color: var(--color-btn-outline-selected-border);
box-shadow: var(--color-btn-outline-selected-shadow);
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-btn-outline-disabled-text);
background-color: var(--color-btn-outline-disabled-bg);
border-color: var(--color-btn-border);
box-shadow: none;
.Counter {
background-color: var(--color-btn-outline-disabled-counter-bg);
}
}
&:focus {
border-color: var(--color-btn-outline-focus-border);
box-shadow: var(--color-btn-outline-focus-shadow);
}
.Counter {
color: inherit;
background-color: var(--color-btn-outline-counter-bg);
}
}
/* Danger button */
.btn--danger {
color: var(--color-btn-danger-text);
:global(.icon) {
color: var(--color-btn-danger-icon);
}
&:hover,
[open] > & {
color: var(--color-btn-danger-hover-text);
background-color: var(--color-btn-danger-hover-bg);
border-color: var(--color-btn-danger-hover-border);
box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
.Counter {
background-color: var(--color-btn-danger-hover-counter-bg);
}
:global(.icon) {
color: var(--color-btn-danger-hover-icon);
}
}
&:active,
&.selected,
&[aria-selected='true'] {
color: var(--color-btn-danger-selected-text);
background-color: var(--color-btn-danger-selected-bg);
border-color: var(--color-btn-danger-selected-border);
box-shadow: var(--color-btn-danger-selected-shadow);
}
&:disabled,
&.disabled,
&[aria-disabled='true'] {
color: var(--color-btn-danger-disabled-text);
background-color: var(--color-btn-danger-disabled-bg);
border-color: var(--color-btn-border);
box-shadow: none;
.Counter {
background-color: var(--color-btn-danger-disabled-counter-bg);
}
:global(.icon) {
color: var(--color-btn-danger-disabled-text);
}
}
&:focus {
border-color: var(--color-btn-danger-focus-border);
box-shadow: var(--color-btn-danger-focus-shadow);
}
.Counter {
color: inherit;
background-color: var(--color-btn-danger-counter-bg);
}
}
/* Sizes */
.btn--sm {
padding: 3px 12px;
font-size: var(--font-0);
}
.btn--lg {
font-size: var(--font-size-large);
padding: 8px 16px;
border-radius: var(--radii-3);
}
/* Full-width button */
/* These buttons expand to the full width of their parent container */
.btn-block {
display: block;
width: 100%;
text-align: center;
}
</style>

6
src/lib/components/Link.svelte
View File

@@ -6,6 +6,10 @@
<style lang="postcss">
a {
color: blue;
color: var(--color-link);
&:hover {
text-decoration: underline;
}
}
</style>

81
src/lib/components/NavRow.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script lang="ts">
import { page } from '$app/stores';
interface Link {
href: string;
label: string;
}
export let links: Link[];
export let query = '';
export let resetScroll = false
/** Path level in URL, zero-indexed */
export let level = 0;
let path: string[];
$: path = [
...$page.url.pathname
.substring(1)
.split('/')
.map((route) => '/' + route),
'/',
];
$: basePath = path.slice(0, level).join('');
</script>
<nav class="navigation">
{#each links as link}
<a
href={query
? link.href
? `?${query}=${link.href}`
: '?'
: level === 0
? link.href
: basePath + link.href}
on:click={() => { if (resetScroll) document.body.scrollTo(0,0)}}
class="navigation__link"
class:is-active={query
? ($page.url.searchParams.get(query) || '') === link.href
: path[level] === link.href || path[level] === link.href.slice(0, -1)}
sveltekit:noscroll={!resetScroll}
>{link.label}</a
>
{/each}
</nav>
<style lang="postcss">
.navigation {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 1rem;
flex-wrap: wrap;
&__link {
font-weight: var(--font-weight-bold);
color: var(--color-text-light);
&.is-active {
color: var(--color-text);
position: relative;
&::after {
content: '';
display: block;
position: absolute;
bottom: -0.1rem;
width: 100%;
border-radius: var(--rounded-max);
height: 0.2rem;
background-color: var(--color-brand);
}
}
}
}
</style>

2
src/lib/components/Pagination.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
// TODO: Modify to match new button props
// TODO: Fix mobile support, currently just cuts off buttons
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'