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 {
--size: 9rem;
background-color: var(--color-brand-contrast);
}
}

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

@@ -1,157 +1,148 @@
<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'
| 'secondary'
| 'tertiary'
| '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 === 'a'}
<a class={className} {href} {disabled} on:click>
<slot />
</a>
<a class={className} {href} {disabled} on:click>
<slot />
</a>
{:else}
<svelte:element this={as} class={className} {disabled} on:click>
<slot />
</svelte:element>
<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;
white-space: nowrap;
box-shadow: var(--shadow-inset-sm);
color: var(--color-bg-contrast);
background-color: var(--color-button-bg);
border-radius: var(--rounded);
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg);
&:hover {
background-color: var(--color-button-bg-hover);
}
&--color {
&-raised {
background-color: var(--color-raised-bg);
border-radius: var(--rounded);
transition: opacity 0.5s ease-in-out, filter 0.05s ease-in-out;
&:hover {
background-color: var(--color-raised-bg-hover);
filter: brightness(0.9);
}
}
&-primary {
background-color: var(--color-brand);
color: var(--color-brand-contrast);
&--color {
&-raised {
background-color: var(--color-raised-bg);
}
&:hover {
background-color: var(--color-brand-dark);
&-primary {
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 {
background-color: var(--color-brand-light);
transition: filter 0s ease-in-out;
&:disabled {
opacity: 50%;
cursor: not-allowed;
filter: grayscale(50%);
&:hover {
background-color: var(--color-brand-light);
filter: brightness(0.9);
/* Not ideal, but preventing events being fired needs to be implemented */
pointer-events: none;
}
}
&-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);
&--pad-even {
padding: 0.5rem;
font-size: 1rem;
line-height: 0;
min-width: 2rem;
min-height: 2rem;
justify-content: center;
}
}
&-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);
&.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;
}
}
}
&:disabled {
opacity: 50%;
cursor: not-allowed;
filter: grayscale(50%);
/* Not ideal, but preventing events being fired needs to be implemented */
pointer-events: none;
/* Only child doesn't work as intended because text is passed through as `innerText` */
:global(.icon:only-child) {
margin: 4px -7px;
}
}
&--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>

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

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

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

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

6
src/package/index.ts
View File

@@ -1,3 +1,5 @@
/* COMPONENTS */
export { default as Avatar } from './components/Avatar.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 TextInput } from './components/TextInput.svelte';

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

@@ -1,9 +1,12 @@
.theme-dark {
/* Brand colors */
--color-brand: hsl(155, 58%, 40%);
--color-brand: hsl(155, 58%, 45%);
--color-brand-light: hsl(155, 54%, 30%);
--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 */
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
@@ -25,11 +28,10 @@
/* Container colors */
--color-bg: hsl(220, 13%, 15%);
--color-bg-contrast: hsl(0, 0%, 100%);
--color-raised-bg: hsl(220, 13%, 25%);
--color-raised-bg-hover: hsl(220, 13%, 20%);
--color-divider: hsl(220, 13%, 50%);
--color-button-bg: hsl(220, 13%, 35%);
--color-button-bg-hover: hsl(220, 13%, 32%);
--color-button-bg: hsl(220, 5%, 32%);
/* Label colors */
--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-contrast: hsl(0, 0%, 100%);
--color-secondary: hsl(231, 5%, 45%);
--color-tertiary: hsl(231, 3%, 75%);
/* Shadows */
--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);
@@ -25,11 +28,10 @@
/* Container colors */
--color-bg: hsl(220, 13%, 91%);
--color-bg-contrast: hsl(0, 0%, 0%);
--color-raised-bg: hsl(0, 0%, 100%);
--color-raised-bg-hover: hsl(220, 13%, 93%);
--color-divider: 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%);
/* 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>
<div class="button-group">
<Button>Default button</Button>
<Button color="raised">Raised button</Button>
<Button color="primary">Primary button</Button>
<Button color="primary-light">Light primary button</Button>
<Button color="danger">Danger button</Button>
<Button color="danger-light">Light danger button</Button>
<Button color="transparent">Transparent button</Button>
<Button disabled>Disabled button</Button>
<Button>Default</Button>
<Button color="raised">Raised</Button>
<Button color="primary">Primary</Button>
<Button color="primary-light">Light primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="tertiary">Tertiary</Button>
<Button color="danger">Danger</Button>
<Button color="danger-light">Light danger</Button>
<Button color="transparent">Transparent</Button>
<Button disabled>Disabled</Button>
</div>
```
@@ -42,4 +44,4 @@
<Button color="primary"><IconDownload /></Button>
<Button><IconHeart /> Follow mod </Button>
</div>
```
```

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

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