aziz/AstralRinth
0
0
Fork 0
forked from xxxOFFxxx/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

55
src/lib/styles/normalize.postcss Normal file
View File

@@ -0,0 +1,55 @@
@import 'sanitize.css';
@import 'sanitize.css/forms.css';
@import 'sanitize.css/typography.css';
/* Overrides */
button {
margin: 0;
padding: 0;
font-size: inherit;
box-shadow: none;
border: none;
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
*:focus {
outline: none;
}
button:focus-visible,
a:focus-visible,
[tabindex='0']:focus-visible {
outline: 0.2rem solid var(--color-brand);
}
html,
body,
#svelte {
height: 100%;
}
html {
overflow-y: hidden;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
line-height: 100%;
margin: 0;
}
ul {
padding: 0 0 0 1.5rem;
}

4
src/lib/styles/themes.postcss
View File

@@ -1,2 +1,4 @@
@import "themes/base.postcss";
@import "themes/light.postcss";
@import "themes/old.postcss";
@import "themes/dark.postcss";
@import "themes/oled.postcss";

17
src/lib/styles/themes/base.postcss Normal file
View File

@@ -0,0 +1,17 @@
:root {
--rounded: 1rem;
--rounded-top: 1rem 1rem 0 0;
--rounded-bottom: 0 0 1rem 1rem;
--rounded-sm: 0.6rem;
--rounded-max: 999999999px;
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-size-nm: 1rem; /* 16px */
--font-size-xl: 1.5rem; /* 24px */
--font-weight-regular: 400;
--font-weight-medium: 600;
--font-weight-bold: 700;
}

61
src/lib/styles/themes/dark.postcss Normal file
View File

@@ -0,0 +1,61 @@
.theme-dark {
/* Brand colors */
--color-brand: hsl(155, 58%, 40%);
--color-brand-light: hsl(155, 54%, 30%);
--color-brand-dark: hsl(155, 58%, 25%);
--color-brand-contrast: hsl(0, 0%, 100%);
/* 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);
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
/* Text colors */
--color-text: hsl(221, 39%, 90%);
--color-text-light: hsl(215, 14%, 74%);
--color-text-lightest: hsl(220, 9%, 70%);
--color-heading: hsl(222, 16%, 80%);
--color-link: hsl(215, 100%, 75%);
/* Container colors */
--color-bg: hsl(220, 13%, 15%);
--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%);
/* Label colors */
--color-badge-gray-text: hsl(0, 2%, 69%);
--color-badge-gray-dot: hsl(0, 6%, 77%);
--color-badge-red-text: hsl(343, 63%, 67%);
--color-badge-red-dot: hsl(342, 70%, 53%);
--color-badge-green-text: hsl(156, 53%, 50%);
--color-badge-green-dot: hsl(140, 64%, 40%);
--color-badge-yellow-text: hsl(40, 57%, 60%);
--color-badge-yellow-dot: hsl(40, 92%, 62%);
/* Markdown colors */
--color-table-border: hsl(214, 12%, 35%);
--color-table-alternate-row: hsl(216, 12%, 17%);
--color-code-bg: hsl(217, 12%, 29%);
/* Ad colors */
--color-ad-bg: hsl(200, 70%, 25%);
--color-ad-link: hsl(200, 70%, 50%);
/* Popup colors */
--color-popup-danger-bg: hsl(355, 70%, 20%);
--color-popup-danger-text: hsl(342, 70%, 75%);
--color-input-light: hsl(220, 13%, 20%);
/* Scrollbar color */
--color-scrollbar-thumb: hsl(220, 13%, 40%);
}

59
src/lib/styles/themes/light.postcss
View File

@@ -1,3 +1,60 @@
.theme-light {
/* Brand colors */
--color-brand: hsl(155, 58%, 44%);
--color-brand-light: hsl(135, 50%, 78%);
--color-brand-dark: hsl(155, 58%, 38%);
--color-brand-contrast: hsl(0, 0%, 100%);
}
/* 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);
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px 2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
/* Text colors */
--color-text: hsl(221, 39%, 11%);
--color-text-light: hsl(215, 14%, 34%);
--color-text-lightest: hsl(220, 9%, 46%);
--color-heading: hsl(222, 16%, 20%);
--color-link: hsl(221, 55%, 50%);
/* Container colors */
--color-bg: hsl(220, 13%, 91%);
--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 */
--color-badge-gray-text: hsl(0, 2%, 39%);
--color-badge-gray-dot: hsl(0, 6%, 77%);
--color-badge-red-text: hsl(343, 63%, 27%);
--color-badge-red-dot: hsl(342, 70%, 53%);
--color-badge-green-text: hsl(156, 53%, 20%);
--color-badge-green-dot: hsl(140, 64%, 40%);
--color-badge-yellow-text: hsl(40, 57%, 29%);
--color-badge-yellow-dot: hsl(40, 92%, 62%);
/* Markdown colors */
--color-table-border: hsl(210, 10%, 89%);
--color-table-alternate-row: hsl(210, 29%, 97%);
--color-code-bg: hsl(210, 29%, 96%);
/* Ad colors */
--color-ad-bg: hsl(200, 70%, 82%);
--color-ad-link: hsl(200, 80%, 40%);
/* Popup colors */
--color-popup-danger-bg: hsl(355, 70%, 88%);
--color-popup-danger-text: hsl(342, 70%, 35%);
/* Scrollbar color */
--color-scrollbar-thumb: hsl(220, 13%, 70%);
}

1307
src/lib/styles/themes/old.postcss
View File

File diff suppressed because it is too large Load Diff

15
src/lib/styles/themes/oled.postcss Normal file
View File

@@ -0,0 +1,15 @@
.oled-theme {
@extend .dark-theme;
/* Container colors */
--color-bg: hsl(220, 13%, 0%);
--color-raised-bg: hsl(220, 13%, 10%);
--color-raised-bg-hover: hsl(220, 13%, 20%);
--color-divider: hsl(220, 13%, 35%);
--color-button-bg: hsl(220, 13%, 20%);
--color-button-bg-hover: hsl(220, 13%, 15%);
/* Ad colors */
--color-ad-bg: hsl(200, 70%, 15%);
--color-ad-link: hsl(200, 70%, 45%);
}

15
src/lib/styles/variables/borders.postcss
View File

@@ -4,10 +4,13 @@
--border-style: solid;
--border: var(--border-width) var(--border-style);
/* Radii */
--radii-1: 8px;
--radii-2: 10px;
--radii-3: 12px;
--radii-max: 100px;
--radii: var(--radii-2);
/* Rounded radii */
--rounded-sm: 8px;
--rounded: 10px;
--rounded-lg: 12px;
--rounded-max: 100px;
--rounded-top: var(--rounded) var(--rounded) 0 0;
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
--rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
}

9
src/lib/styles/variables/typography.postcss
View File

@@ -17,10 +17,9 @@
--h5-size: 14px;
--h6-size: 12px;
--font-size-large: 17px;
--font-size-small: 12px;
--font-size-normal: 14px;
--body-line-height: --lh-default;
--font-size-lg: 17px;
--font-size-sm: 12px;
--font-size: 14px;
/* Line heights */
--lh-condensed-ultra: 1;
@@ -34,6 +33,6 @@
--font-weight-bold: 600;
/* Font stacks */
--body-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
--body-font: Inter, -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;
}