js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Initial dark theme (WIP)"

Browse Source 
This reverts commit 787735cec7.
This commit is contained in:
Cory LaViska
2020-08-14 17:38:35 -04:00
parent d4ff32efba
commit 4e1abbc885
16 changed files with 19 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
docs/assets/images/undraw-content-team.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 11 KiB

41
docs/assets/plugins/code-block/code-block.css
View File

@@ -49,7 +49,7 @@
border: solid 1px var(--sl-color-gray-90);
border-bottom: none;
border-radius: 0 !important;
margin: 0;
margin: 0 !important;
display: none;
}
@@ -106,42 +106,3 @@
.code-block--expanded .code-block__toggle svg {
transform: rotate(180deg);
}
/* Dark theme */
.sl-theme-dark .code-block {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%);
}
.sl-theme-dark .code-block__preview {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
}
.sl-theme-dark .code-block__source {
border-color: var(--sl-color-gray-20);
}
.sl-theme-dark .code-block__resizer {
border-left-color: var(--sl-color-gray-20);
background-color: var(--sl-color-gray-10);
color: var(--sl-color-gray-60);
}
.sl-theme-dark .code-block__toggle {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-60);
}
.sl-theme-dark .code-block__toggle:hover,
.sl-theme-dark .code-block__toggle:active {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-60);
}
.sl-theme-dark .code-block__toggle:focus {
border-color: var(--sl-color-primary-50);
background-color: var(--sl-color-primary-10);
color: var(--sl-color-primary-50);
}

14
docs/assets/plugins/theme/theme.css
View File

@@ -1,14 +0,0 @@
.theme-toggle {
position: fixed;
top: .5rem;
right: .5rem;
z-index: 100;
}
@media screen and (max-width: 768px) {
.theme-toggle {
top: .25rem;
right: .25rem;
transform: scale(.8);
}
}

41
docs/assets/plugins/theme/theme.js
View File

@@ -1,41 +0,0 @@
(() => {
if (!window.$docsify) {
throw new Error('Docsify must be loaded before installing this plugin.');
}
window.$docsify.plugins.push((hook, vm) => {
hook.mounted(function () {
let isDark = localStorage.getItem('theme') === 'sl-theme-dark';
const sidebarToggle = document.querySelector('.sidebar-toggle');
const noTransitions = Object.assign(document.createElement('style'), {
textContent: '* { transition: none !important; }'
});
const toggle = Object.assign(document.createElement('sl-icon-button'), {
name: isDark ? 'sun' : 'moon',
label: 'Toggle dark mode'
});
toggle.classList.add('theme-toggle');
// Set initial theme
if (isDark) {
document.body.classList.add('sl-theme-dark');
}
// Toggle theme
toggle.addEventListener('click', () => {
isDark = !isDark;
isDark ? localStorage.setItem('theme', 'sl-theme-dark') : localStorage.removeItem('theme');
toggle.name = isDark ? 'sun' : 'moon';
// Disable transitions as the theme changes
document.body.appendChild(noTransitions);
requestAnimationFrame(() => {
document.body.classList.toggle('sl-theme-dark', isDark);
requestAnimationFrame(() => document.body.removeChild(noTransitions));
});
});
sidebarToggle.insertAdjacentElement('afterend', toggle);
});
});
})();

8
docs/assets/styles/demos.css
View File

@@ -37,10 +37,6 @@
width: 100%;
}
.sl-theme-dark .transition-demo {
background: var(--sl-color-gray-20);
}
/* Spacing demo */
.spacing-demo {
width: 100px;
@@ -54,7 +50,3 @@
width: 4rem;
height: 4rem;
}
.sl-theme-dark .elevation-demo {
background-color: var(--sl-color-gray-20);
}

122
docs/assets/styles/docs-dark.css
View File

@@ -1,122 +0,0 @@
.sl-theme-dark {
background: var(--sl-color-gray-10);
color: var(--sl-color-gray-80);
}
/* Sidebar **/
.sl-theme-dark .sidebar {
background: var(--sl-color-gray-10);
border-right-color: var(--sl-color-gray-15);
}
.sl-theme-dark .sidebar li > p {
color: var(--sl-color-white);
border-bottom-color: var(--sl-color-gray-20);
}
.sl-theme-dark .sidebar-toggle {
background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%, 0.8);
}
.sl-theme-dark .docsify-pagination-container {
border-top-color: var(--sl-color-gray-20) !important;
}
/* Search */
.sl-theme-dark .sidebar .search input[type='search'] {
background: var(--sl-input-background-color);
border-color: var(--sl-input-border-color);
color: var(--sl-input-color);
}
.sl-theme-dark .sidebar .search input[type='search']:hover {
border-color: var(--sl-input-border-color-hover);
}
.sl-theme-dark .sidebar .search input[type='search']:focus {
border-color: var(--sl-input-border-color-focus);
}
.sl-theme-dark .sidebar .clear-button {
color: var(--sl-color-gray-30);
}
.sl-theme-dark .sidebar .clear-button svg circle {
fill: currentColor;
}
/* Content */
.sl-theme-dark .component-header {
border-bottom-color: var(--sl-color-gray-20);
}
.sl-theme-dark .anchor span {
color: var(--sl-color-white);
}
.sl-theme-dark .markdown-section h2 {
border-bottom-color: var(--sl-color-gray-20);
}
.sl-theme-dark .markdown-section blockquote {
border-left-color: var(--sl-color-gray-20);
}
.sl-theme-dark .markdown-section kbd {
border-color: var(--sl-color-gray-20);
}
/* Tables */
.sl-theme-dark .markdown-section tr:nth-child(2n) {
background: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%);
}
.sl-theme-dark .markdown-section td {
border-top-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-20);
}
.sl-theme-dark .markdown-section table .attribute-tooltip {
border-bottom-color: var(--sl-color-gray-30);
}
/* Tips & warnings */
.sl-theme-dark .markdown-section p.tip,
.sl-theme-dark .markdown-section p.warn {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%)
}
.sl-theme-dark .markdown-section p.tip code,
.sl-theme-dark .markdown-section p.warn code {
background-color: var(--sl-color-gray-15);
}
/* Code blocks */
.sl-theme-dark .markdown-section pre {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 13%);
}
.sl-theme-dark .markdown-section pre > code {
color: var(--sl-color-gray-80);
}
/* Repo buttons */
.sl-theme-dark .repo-button {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-25);
color: var(--sl-color-gray-80);
}
.sl-theme-dark .repo-button--github sl-icon {
color: var(--sl-color-white);
}
.sl-theme-dark .repo-button:hover {
background-color: var(--sl-color-gray-15);
border: solid 1px var(--sl-color-gray-30);
}
.sl-theme-dark .repo-button:focus {
border-color: var(--sl-color-primary-50);
}

25
docs/assets/styles/docs.css
View File

@@ -60,11 +60,7 @@ strong {
padding-left: 1rem;
padding-right: 2rem;
margin: 0 1.25rem;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
}
.sidebar .search input[type='search']:hover {
border-color: var(--sl-input-border-color-hover);
transition: var(--sl-transition-fast) box-shadow;
}
.sidebar .search input[type='search']:focus {
@@ -128,15 +124,6 @@ strong {
padding: .5rem;
}
.sidebar-toggle:focus {
outline: none;
box-shadow: var(--sl-focus-ring-box-shadow);
}
.sidebar-toggle span:last-child {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
body.close .sidebar-toggle {
width: 2rem;
@@ -271,8 +258,8 @@ strong {
margin: 0;
}
.docsify-pagination-container {
border-top-color: var(--sl-color-gray-90) !important;
.markdown-section .anchor {
color: var(--sl-color-primary-50);
}
.markdown-section h1,
@@ -345,7 +332,6 @@ strong {
.markdown-section pre > code {
display: block;
background: none;
border-radius: 0;
color: var(--sl-color-gray-30);
padding: var(--sl-spacing-medium);
overflow: auto;
@@ -502,11 +488,6 @@ strong {
background-color: var(--sl-color-danger-50);
}
.markdown-section p.tip code,
.markdown-section p.warn code {
background-color: var(--sl-color-gray-95);
}
/* Component headers */
.component-header {
border-bottom: solid 1px var(--sl-color-gray-90);

2
docs/components/card.md
View File

@@ -28,7 +28,7 @@ Cards can be used to group related subjects in a container.
}
.card-overview small {
color: var(--sl-color-gray-50);
color: var(--sl-color-gray-60);
}
.card-overview [slot="footer"] {

3
docs/index.html
View File

@@ -33,10 +33,8 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/themes/pure.css" />
<link rel="stylesheet" href="/assets/styles/docs.css" />
<link rel="stylesheet" href="/assets/styles/docs-dark.css" />
<link rel="stylesheet" href="/assets/styles/demos.css" />
<link rel="stylesheet" href="/assets/plugins/code-block/code-block.css" />
<link rel="stylesheet" href="/assets/plugins/theme/theme.css" />
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />
@@ -95,6 +93,5 @@
<script src="/assets/plugins/code-block/code-block.js"></script>
<script src="/assets/plugins/metadata/metadata.js"></script>
<script src="/assets/plugins/sidebar/sidebar.js"></script>
<script src="/assets/plugins/theme/theme.js"></script>
</body>
</html>