You've already forked AstralRinth
forked from didirus/AstralRinth
Start work
This commit is contained in:
venashial
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-color-mode="light">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="" />
|
||||
|
||||
331
src/lib/components/elements/buttons/Button.svelte
Normal file
331
src/lib/components/elements/buttons/Button.svelte
Normal file
@@ -0,0 +1,331 @@
|
||||
<script lang="ts">
|
||||
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 size: 'sm' | 'md' | 'lg' = 'md'
|
||||
|
||||
let className = `btn btn--${size}`;
|
||||
</script>
|
||||
|
||||
{#if as === 'button'}
|
||||
<button class={className}>
|
||||
<slot />
|
||||
</button>
|
||||
{:else if as === 'a'}
|
||||
<a class={className} {href}>
|
||||
<slot />
|
||||
</a>
|
||||
{:else if as === 'summary'}
|
||||
<summary class={className}>
|
||||
<slot />
|
||||
</summary>
|
||||
{:else if as === 'input'}
|
||||
<input class={className} {value} />
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
/* Base button styles */
|
||||
.btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
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. */
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[aria-disabled='true'] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/*
|
||||
.icon {
|
||||
margin-right: $spacer-1;
|
||||
color: var(--color-fg-muted);
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&:only-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.Counter {
|
||||
margin-left: 2px;
|
||||
color: inherit;
|
||||
text-shadow: none;
|
||||
vertical-align: top;
|
||||
background-color: var(--color-btn-counter-bg);
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
margin-left: $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);
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
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);
|
||||
line-height: 20px;
|
||||
|
||||
/*
|
||||
.octicon {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
.btn--large {
|
||||
/* padding: $em-spacer-6 1.5em; */
|
||||
font-size: inherit;
|
||||
/* line-height: $lh-default; */
|
||||
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
/* Full-width button */
|
||||
/* These buttons expand to the full width of their parent container */
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
0
src/lib/index.ts
Normal file
0
src/lib/index.ts
Normal file
1307
src/lib/styles/themes/light.postcss
Normal file
1307
src/lib/styles/themes/light.postcss
Normal file
File diff suppressed because it is too large
Load Diff
3
src/lib/styles/variables.postcss
Normal file
3
src/lib/styles/variables.postcss
Normal file
@@ -0,0 +1,3 @@
|
||||
@import "variables/borders.postcss";
|
||||
@import "variables/typography.postcss";
|
||||
@import "variables/spacing.postcss";
|
||||
13
src/lib/styles/variables/borders.postcss
Normal file
13
src/lib/styles/variables/borders.postcss
Normal file
@@ -0,0 +1,13 @@
|
||||
:root {
|
||||
/* Borders */
|
||||
--border-width: 1px;
|
||||
--border-style: solid;
|
||||
--border: var(--border-width) var(--border-style);
|
||||
|
||||
/* Radii */
|
||||
--radii-1: 4px;
|
||||
--radii-2: 6px;
|
||||
--radii-3: 8px;
|
||||
--radii-max: 100px;
|
||||
--radii: var(--radii-2);
|
||||
}
|
||||
206
src/lib/styles/variables/spacing.postcss
Normal file
206
src/lib/styles/variables/spacing.postcss
Normal file
@@ -0,0 +1,206 @@
|
||||
:root {
|
||||
/* these are values for the display CSS property */
|
||||
/*
|
||||
--display-values: (
|
||||
block,
|
||||
flex,
|
||||
inline,
|
||||
inline-block,
|
||||
inline-flex,
|
||||
none,
|
||||
table,
|
||||
table-cell
|
||||
);
|
||||
|
||||
// maps edges to respective corners for border-radius
|
||||
--edges: (
|
||||
top: (top-left, top-right),
|
||||
right: (top-right, bottom-right),
|
||||
bottom: (bottom-right, bottom-left),
|
||||
left: (bottom-left, top-left)
|
||||
);
|
||||
*/
|
||||
|
||||
/*
|
||||
These are our margin and padding utility spacers. The default step size we
|
||||
use is 8px. This gives us a key of:
|
||||
0 => 0px
|
||||
1 => 4px
|
||||
2 => 8px
|
||||
3 => 16px
|
||||
4 => 24px
|
||||
5 => 32px
|
||||
6 => 40px */
|
||||
--spacer: 8px;
|
||||
|
||||
/* Our spacing scale */
|
||||
--spacer-0: 0; /* 0 */
|
||||
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
|
||||
--spacer-2: --spacer; /* 8px */
|
||||
--spacer-3: calc(var(--spacer) * 2); /* 16px */
|
||||
--spacer-4: calc(var(--spacer) * 3); /* 24px */
|
||||
--spacer-5: calc(var(--spacer) * 4); /* 32px */
|
||||
--spacer-6: calc(var(--spacer) * 5); /* 40px */
|
||||
|
||||
/*
|
||||
/* The list of spacer values
|
||||
--spacers: (
|
||||
--spacer-0,
|
||||
--spacer-1,
|
||||
--spacer-2,
|
||||
--spacer-3,
|
||||
--spacer-4,
|
||||
--spacer-5,
|
||||
--spacer-6,
|
||||
);
|
||||
|
||||
/* And the map of spacers, for easier looping:
|
||||
/* @each --scale, --length in --spacer-map { ... }
|
||||
--spacer-map: (
|
||||
0: --spacer-0,
|
||||
1: --spacer-1,
|
||||
2: --spacer-2,
|
||||
3: --spacer-3,
|
||||
4: --spacer-4,
|
||||
5: --spacer-5,
|
||||
6: --spacer-6,
|
||||
);
|
||||
|
||||
/* Increases the core spacing scale first by 8px for --spacer-7, then by 16px
|
||||
/* increments from --spacer-8 to --spacer-12, i.e. after 40px, we have 48, 64,
|
||||
/* 80, 96, etc.
|
||||
--spacer-7: --spacer * 6; /* 48px
|
||||
--spacer-8: --spacer * 8; /* 64px
|
||||
--spacer-9: --spacer * 10; /* 80px
|
||||
--spacer-10: --spacer * 12; /* 96px
|
||||
--spacer-11: --spacer * 14; /* 112px
|
||||
--spacer-12: --spacer * 16; /* 128px
|
||||
|
||||
--spacers-large: (
|
||||
7: --spacer-7,
|
||||
8: --spacer-8,
|
||||
9: --spacer-9,
|
||||
10: --spacer-10,
|
||||
11: --spacer-11,
|
||||
12: --spacer-12,
|
||||
);
|
||||
|
||||
--spacer-map-extended: map-merge(
|
||||
(
|
||||
0: 0,
|
||||
1: --spacer-1,
|
||||
2: --spacer-2,
|
||||
3: --spacer-3,
|
||||
4: --spacer-4,
|
||||
5: --spacer-5,
|
||||
6: --spacer-6,
|
||||
),
|
||||
--spacers-large,
|
||||
);
|
||||
|
||||
/* Em spacer variables
|
||||
--em-spacer-1: 0.0625em; /* 1/16
|
||||
--em-spacer-2: 0.125em; /* 1/8
|
||||
--em-spacer-3: 0.25em; /* 1/4
|
||||
--em-spacer-4: 0.375em; /* 3/8
|
||||
--em-spacer-5: 0.5em; /* 1/2
|
||||
--em-spacer-6: 0.75em; /* 3/4
|
||||
|
||||
/* Size scale
|
||||
/* Used for buttons, inputs, labels, avatars etc.
|
||||
--size: 16px;
|
||||
|
||||
--size-0: 0;
|
||||
--size-1: --size; /* 16px
|
||||
--size-2: --size-1 + 4px; /* 20px
|
||||
--size-3: --size-2 + 4px; /* 24px
|
||||
--size-4: --size-3 + 4px; /* 28px
|
||||
--size-5: --size-4 + 4px; /* 32px
|
||||
--size-6: --size-5 + 8px; /* 40px
|
||||
--size-7: --size-6 + 8px; /* 48px
|
||||
--size-8: --size-7 + 16px; /* 64px
|
||||
|
||||
/* Fixed-width container variables
|
||||
--container-width: 980px;
|
||||
--grid-gutter: 10px;
|
||||
|
||||
// Breakpoint widths
|
||||
--width-xs: 0;
|
||||
// Small screen / phone
|
||||
--width-sm: 544px;
|
||||
// Medium screen / tablet
|
||||
--width-md: 768px;
|
||||
// Large screen / desktop (980 + (16 * 2)) <= container + gutters
|
||||
--width-lg: 1012px;
|
||||
// Extra large screen / wide desktop
|
||||
--width-xl: 1280px;
|
||||
|
||||
// Responsive container widths
|
||||
--container-sm: --width-sm;
|
||||
--container-md: --width-md;
|
||||
--container-lg: --width-lg;
|
||||
--container-xl: --width-xl;
|
||||
|
||||
// Breakpoints in the form (name: length)
|
||||
--breakpoints: (
|
||||
sm: --width-sm,
|
||||
md: --width-md,
|
||||
lg: --width-lg,
|
||||
xl: --width-xl
|
||||
);
|
||||
|
||||
// This map in the form (breakpoint: variant) is used to iterate over
|
||||
// breakpoints and create both responsive and non-responsive classes in one
|
||||
// loop:
|
||||
--responsive-variants: (
|
||||
'': '',
|
||||
sm: '-sm',
|
||||
md: '-md',
|
||||
lg: '-lg',
|
||||
xl: '-xl',
|
||||
);
|
||||
|
||||
// responsive utility position values
|
||||
--responsive-positions: (
|
||||
static,
|
||||
relative,
|
||||
absolute,
|
||||
fixed,
|
||||
sticky
|
||||
);
|
||||
|
||||
--sidebar-width: (
|
||||
sm: 220px,
|
||||
md: 256px,
|
||||
lg: 296px
|
||||
);
|
||||
|
||||
--sidebar-narrow-width: (
|
||||
md: 240px,
|
||||
lg: 256px
|
||||
);
|
||||
|
||||
--sidebar-wide-width: (
|
||||
lg: 320px,
|
||||
xl: 336px
|
||||
);
|
||||
|
||||
--gutter: (
|
||||
md: --spacer-3,
|
||||
lg: --spacer-4,
|
||||
xl: --spacer-5
|
||||
);
|
||||
|
||||
--gutter-condensed: (
|
||||
md: --spacer-3,
|
||||
lg: --spacer-3,
|
||||
xl: --spacer-4
|
||||
);
|
||||
|
||||
--gutter-spacious: (
|
||||
md: --spacer-4,
|
||||
lg: --spacer-5,
|
||||
xl: --spacer-6
|
||||
);
|
||||
*/
|
||||
}
|
||||
41
src/lib/styles/variables/typography.postcss
Normal file
41
src/lib/styles/variables/typography.postcss
Normal file
@@ -0,0 +1,41 @@
|
||||
:root {
|
||||
/* Heading sizes - mobile */
|
||||
/* h4-h6 remain the same size on both mobile & desktop */
|
||||
--h00-size-mobile: 40px;
|
||||
--h0-size-mobile: 32px;
|
||||
--h1-size-mobile: 26px;
|
||||
--h2-size-mobile: 22px;
|
||||
--h3-size-mobile: 18px;
|
||||
|
||||
/* Heading sizes - desktop */
|
||||
--h00-size: 48px;
|
||||
--h0-size: 40px;
|
||||
--h1-size: 32px;
|
||||
--h2-size: 24px;
|
||||
--h3-size: 20px;
|
||||
--h4-size: 16px;
|
||||
--h5-size: 14px;
|
||||
--h6-size: 12px;
|
||||
|
||||
--font-size-small: 12px;
|
||||
|
||||
/* Line heights */
|
||||
--lh-condensed-ultra: 1;
|
||||
--lh-condensed: 1.25;
|
||||
--lh-default: 1.5;
|
||||
|
||||
/* The base body size */
|
||||
--body-font-size: 14px;
|
||||
--body-line-height: --lh-default;
|
||||
|
||||
/* Font weights */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-semibold: 500;
|
||||
--font-weight-bold: 600;
|
||||
|
||||
/* Font stacks */
|
||||
--body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
|
||||
}
|
||||
15
src/routes/__layout.svelte
Normal file
15
src/routes/__layout.svelte
Normal file
@@ -0,0 +1,15 @@
|
||||
<script lang="ts">
|
||||
import "$lib/styles/variables.postcss";
|
||||
import "$lib/styles/themes/light.postcss";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<slot></slot>
|
||||
</main>
|
||||
|
||||
<style lang="postcss">
|
||||
main {
|
||||
font-size: var(--body-font-size);
|
||||
font-family: var(--body-font);
|
||||
}
|
||||
</style>
|
||||
@@ -1,2 +1,6 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<script lang="ts">
|
||||
import Button from "$lib/components/elements/buttons/Button.svelte"
|
||||
</script>
|
||||
|
||||
<h1>Docs...</h1>
|
||||
<Button>Button</Button>
|
||||
Reference in New Issue
Block a user