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

Add secondary & tertiary buttons + Add utils index

Browse Source
This commit is contained in:
venashial
2022-05-08 12:40:10 -07:00
parent da4b4de292
commit a545c42047
10 changed files with 171 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/package/components/Avatar.svelte
View File

@@ -82,7 +82,6 @@
&-lg { &-lg {
--size: 9rem; --size: 9rem;
background-color: var(--color-brand-contrast);
} }
} }

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

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

2
src/package/components/Slider.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
import type { SvelteComponent } from 'svelte';
export let value: number; export let value: number;
export let min: number; export let min: number;
export let max: number; export let max: number;

44
src/package/components/TextInput.svelte
View File

@@ -1,46 +1,56 @@
<script lang="ts"> <script lang="ts">
import type { SvelteComponent } from 'svelte' import type { SvelteComponent } from 'svelte';
export let placeholder = '' export let placeholder = '';
export let icon: SvelteComponent = '' export let icon: SvelteComponent;
export let value = '' export let value = '';
export let multiline = false export let multiline = false;
export let id: string = undefined export let id: string = undefined;
</script> </script>
<div class="text-input"> <div class="text-input">
{#if multiline} {#if multiline}
<textarea name={id} {placeholder} bind:value={value}/> <textarea name={id} {placeholder} bind:value />
{:else} {:else}
<input type="text" name={id} {placeholder} bind:value={value}/> <input type="text" name={id} {placeholder} bind:value class:has-icon={icon} />
{#if icon}
<svelte:component this={icon} />
{/if}
{/if} {/if}
</div> </div>
<style lang="postcss"> <style lang="postcss">
.text-input { .text-input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
position: relative;
input, textarea { input,
textarea {
border-radius: var(--rounded-sm); border-radius: var(--rounded-sm);
box-shadow: var(--shadow-inset-sm); box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg); background-color: var(--color-button-bg);
border: none; border: none;
padding: 0.25rem 0.75rem; padding: 6px 14px;
width: 20rem; width: 20rem;
max-width: 100%; max-width: 100%;
} }
&--fill {
width: 100%;
padding: 0.5rem 0.75rem;
}
textarea { textarea {
min-height: 2.5rem; min-height: 2.5rem;
} }
:global(.icon) {
position: absolute;
display: flex;
height: 100%;
left: 14px;
opacity: 0.75;
}
input.has-icon {
padding-left: 40px;
}
} }
</style> </style>

6
src/package/index.ts
View File

@@ -1,3 +1,5 @@
/* COMPONENTS */
export { default as Avatar } from './components/Avatar.svelte'; export { default as Avatar } from './components/Avatar.svelte';
export { default as Badge } from './components/Badge.svelte'; export { default as Badge } from './components/Badge.svelte';
@@ -21,7 +23,3 @@ export { default as Select } from './components/Select.svelte';
export { default as Slider } from './components/Slider.svelte'; export { default as Slider } from './components/Slider.svelte';
export { default as TextInput } from './components/TextInput.svelte'; export { default as TextInput } from './components/TextInput.svelte';

12
src/package/styles/themes/dark.postcss
View File

@@ -1,9 +1,12 @@
.theme-dark { .theme-dark {
/* Brand colors */ /* Brand colors */
--color-brand: hsl(155, 58%, 40%); --color-brand: hsl(155, 58%, 45%);
--color-brand-light: hsl(155, 54%, 30%); --color-brand-light: hsl(155, 54%, 30%);
--color-brand-dark: hsl(155, 58%, 25%); --color-brand-dark: hsl(155, 58%, 25%);
--color-brand-contrast: hsl(0, 0%, 100%); --color-brand-contrast: hsl(0, 0%, 0%);
--color-secondary: hsl(231, 5%, 80%);
--color-tertiary: hsl(231, 3%, 45%);
/* Shadows */ /* Shadows */
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1); --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
@@ -25,11 +28,10 @@
/* Container colors */ /* Container colors */
--color-bg: hsl(220, 13%, 15%); --color-bg: hsl(220, 13%, 15%);
--color-bg-contrast: hsl(0, 0%, 100%);
--color-raised-bg: hsl(220, 13%, 25%); --color-raised-bg: hsl(220, 13%, 25%);
--color-raised-bg-hover: hsl(220, 13%, 20%);
--color-divider: hsl(220, 13%, 50%); --color-divider: hsl(220, 13%, 50%);
--color-button-bg: hsl(220, 13%, 35%); --color-button-bg: hsl(220, 5%, 32%);
--color-button-bg-hover: hsl(220, 13%, 32%);
/* Label colors */ /* Label colors */
--color-badge-gray-text: hsl(0, 2%, 69%); --color-badge-gray-text: hsl(0, 2%, 69%);

6
src/package/styles/themes/light.postcss
View File

@@ -5,6 +5,9 @@
--color-brand-dark: hsl(155, 58%, 38%); --color-brand-dark: hsl(155, 58%, 38%);
--color-brand-contrast: hsl(0, 0%, 100%); --color-brand-contrast: hsl(0, 0%, 100%);
--color-secondary: hsl(231, 5%, 45%);
--color-tertiary: hsl(231, 3%, 75%);
/* Shadows */ /* Shadows */
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1); --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05); --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
@@ -25,11 +28,10 @@
/* Container colors */ /* Container colors */
--color-bg: hsl(220, 13%, 91%); --color-bg: hsl(220, 13%, 91%);
--color-bg-contrast: hsl(0, 0%, 0%);
--color-raised-bg: hsl(0, 0%, 100%); --color-raised-bg: hsl(0, 0%, 100%);
--color-raised-bg-hover: hsl(220, 13%, 93%);
--color-divider: hsl(220, 13%, 91%); --color-divider: hsl(220, 13%, 91%);
--color-button-bg: hsl(220, 13%, 91%); --color-button-bg: hsl(220, 13%, 91%);
--color-button-bg-hover: hsl(0, 0%, 85%);
--color-input-text-light: hsl(0, 0%, 94%); --color-input-text-light: hsl(0, 0%, 94%);
/* Label colors */ /* Label colors */

4
src/package/utils/index.ts Normal file
View File

@@ -0,0 +1,4 @@
export { ago } from './ago';
export { simplify } from './number';
export { Permissions } from './permissions';
export { formatVersions } from './versions';

20
src/routes/components/Button.md
View File

@@ -18,14 +18,16 @@
</script> </script>
<div class="button-group"> <div class="button-group">
<Button>Default button</Button> <Button>Default</Button>
<Button color="raised">Raised button</Button> <Button color="raised">Raised</Button>
<Button color="primary">Primary button</Button> <Button color="primary">Primary</Button>
<Button color="primary-light">Light primary button</Button> <Button color="primary-light">Light primary</Button>
<Button color="danger">Danger button</Button> <Button color="secondary">Secondary</Button>
<Button color="danger-light">Light danger button</Button> <Button color="tertiary">Tertiary</Button>
<Button color="transparent">Transparent button</Button> <Button color="danger">Danger</Button>
<Button disabled>Disabled button</Button> <Button color="danger-light">Light danger</Button>
<Button color="transparent">Transparent</Button>
<Button disabled>Disabled</Button>
</div> </div>
``` ```
@@ -42,4 +44,4 @@
<Button color="primary"><IconDownload /></Button> <Button color="primary"><IconDownload /></Button>
<Button><IconHeart /> Follow mod </Button> <Button><IconHeart /> Follow mod </Button>
</div> </div>
``` ```

3
src/routes/components/TextInput.md
View File

@@ -1,8 +1,9 @@
```svelte example raised ```svelte example raised
<script lang="ts"> <script lang="ts">
import { TextInput } from "omorphia"; import { TextInput } from "omorphia";
import IconSearch from 'virtual:icons/heroicons-outline/search'
</script> </script>
<TextInput>Favorite color</TextInput>
<TextInput placeholder="Enter another color..." /> <TextInput placeholder="Enter another color..." />
<TextInput icon={IconSearch} placeholder="Search..." />
``` ```