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(

2
src/routes/_internal/components/Sidebar.svelte
View File

@@ -80,7 +80,7 @@ import { page } from '$app/stores';
height: 100vh;
max-height: 100vh;
overflow-y: auto;
grid-gap: 16px;
grid-gap: 40px;
display: flex;
flex-direction: column;

20
src/routes/classes/Divider.md
View File

@@ -1,9 +1,13 @@
```svelte example raised
<div class="card">
Some words could go here.
<hr class="divider" />
And some other words could go here.
</div>
```svelte example raised hideStyle
Some words could go here.
<hr class="divider" />
And some other words could go here.
<style>
.example__source__code {
flex-direction: column;
}
</style>
```

2
src/routes/getting-started/configure.md
View File

@@ -2,7 +2,7 @@
title: Configure
---
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update the config files.
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's config files.
## SvelteKit

58
src/routes/getting-started/icons.md
View File

@@ -2,64 +2,26 @@
title: Icons
---
<script>
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components.
## Installation
Install the package with:
```bash
pnpm add -D unplugin-icons
```
Import the plugin in your `svelte.config.js` file:
```js
import Icons from 'unplugin-icons/vite';
const config = {
kit: {
vite: {
plugins: [
Icons({
compiler: 'svelte',
}),
],
},
},
};
```
## Choosing icons
`heroicons-outline` is the most used icon pack, and should be preferred above all others. If you can't find a good icon, or are looking for an alternative, use `lucide`, `fa-regular` (FontAwesome), `heroicons-solid`, and `carbon`, in that order. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
The follwing icon packs are included with omorphia:
To install an icon pack, run:
`heroicons-outline` `lucide` `fa-regular` `heroicons-solid` `carbon`
```bash
pnpm add -D @iconify-json/heroicons-outline
```
Replacing `heroicons-outline`, with the pack you are trying to install.
Aim to find icons from `heroicons-outline` first, and then from the following packs if you can't find what you are looking for. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
## Using icons
Import an icon in the `<script>` tag of your component:
```js
import IconHeart from 'virtual:icons/heroicons-outline/heart'
```
Import an icon in the `<script>` tag of your component.
Then use the icon as if it were a Svelte component:
> The `height` and `width` props are optional, and take CSS compatible values
```html
That's lovely <IconHeart height="14px" />!
```
```svelte example
<script lang="ts">
import IconHeart from 'virtual:icons/heroicons-outline/heart'
</script>
That's lovely <IconHeart height="14px" />!
<p> That's lovely <IconHeart height="14px" />! </p>
```

18
src/routes/getting-started/illustrations.md
View File

@@ -2,6 +2,20 @@
title: Using illustrations
---
TODO
Find an illustration from [unDraw](https://undraw.co/illustrations) and download it as an SVG.
Use `.illustration` class.
Put the illustration in the `src/assets/images/illustrations` folder. Rename it to `undraw_` + the illustration slug.
Replace colors in the SVG with CSS variables such as `var(--color-brand)` and `var(--color-raised)`. For colors that are the same as the font color, use `currentColor`.
Add the `.illustration` class to the SVG
Import the SVG in the `<script>` of your svelte file, and treat the illustration as a Svelte component:
```svelte
<script>
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
</script>
<NoData />
```

2
src/routes/index.md
View File

@@ -24,7 +24,7 @@ pnpm add omorphia
Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
```svelte example
```svelte example raised
<script lang="ts">
import { Button } from "omorphia"
</script>