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

139
src/styles/shoelace.scss
View File

@@ -1,4 +1,5 @@
/*! Shoelace */
@import 'mixins/make-color-palette';
:root {
@@ -270,141 +271,3 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@import '../components/button-group/button-group.light-dom';
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Dark theme
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-theme-dark {
// Theme colors
--sl-color-primary-saturation: 80%;
--sl-color-success-saturation: 50%;
--sl-color-info-saturation: 10%;
--sl-color-warning-saturation: 70%;
--sl-color-danger-saturation: 75%;
--sl-color-gray-saturation: 10%;
@include make-color-palette('primary');
@include make-color-palette('success');
@include make-color-palette('info');
@include make-color-palette('warning');
@include make-color-palette('danger');
@include make-color-palette('gray');
// Inputs
--sl-input-background-color: var(--sl-color-gray-10);
--sl-input-background-color-hover: var(--sl-color-gray-10);
--sl-input-background-color-focus: var(--sl-color-gray-10);
--sl-input-background-color-disabled: var(--sl-color-gray-15);
--sl-input-border-color: var(--sl-color-gray-30);
--sl-input-border-color-hover: var(--sl-color-gray-40);
--sl-input-border-color-focus: var(--sl-color-primary-50);
--sl-input-border-color-disabled: var(--sl-color-gray-80);
--sl-input-border-color-valid: var(--sl-color-success-50);
--sl-input-border-color-invalid: var(--sl-color-danger-50);
--sl-input-font-family: var(--sl-font-sans);
--sl-input-font-weight: var(--sl-font-weight-normal);
--sl-input-font-size-small: var(--sl-font-size-small);
--sl-input-font-size-medium: var(--sl-font-size-medium);
--sl-input-font-size-large: var(--sl-font-size-large);
--sl-input-letter-spacing: var(--sl-letter-spacing-normal);
--sl-input-border-color: var(--sl-color-gray-30);
--sl-input-border-color-hover: var(--sl-color-gray-40);
--sl-input-border-color-focus: var(--sl-color-primary-60);
--sl-input-border-color-disabled: var(--sl-color-gray-30);
--sl-input-border-color-valid: var(--sl-color-success-50);
--sl-input-border-color-invalid: var(--sl-color-danger-50);
--sl-input-color: var(--sl-color-gray-80);
--sl-input-color-hover: var(--sl-color-gray-80);
--sl-input-color-focus: var(--sl-color-gray-80);
--sl-input-color-disabled: var(--sl-color-gray-90);
--sl-input-color-valid: var(--sl-color-success-60);
--sl-input-color-invalid: var(--sl-color-danger-40);
--sl-input-icon-color: var(--sl-color-gray-40);
--sl-input-icon-color-hover: var(--sl-color-gray-60);
--sl-input-icon-color-focus: var(--sl-color-gray-60);
--sl-input-placeholder-color: var(--sl-color-gray-30);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-40);
// Tooltips
--sl-tooltip-background-color: var(--sl-color-gray-80);
--sl-tooltip-color: var(--sl-color-black);
// Alert
sl-alert::part(base) {
background-color: var(--sl-color-gray-10);
border-left-color: var(--sl-color-gray-20);
border-right-color: var(--sl-color-gray-20);
border-bottom-color: var(--sl-color-gray-20);
color: var(--sl-color-gray-80);
}
// Avatar
sl-avatar::part(base) {
background-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-70);
}
// Button
sl-button[type="default"]::part(base) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-30);
color: var(--sl-color-gray-60);
}
sl-button[type="default"]:not([disabled])::part(base):hover {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
}
sl-button[type="default"]:not([disabled])::part(base):focus {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-30);
color: var(--sl-color-primary-60);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
sl-button[type="default"]:not([disabled])::part(base):active {
background-color: var(--sl-color-primary-15);
border-color: var(--sl-color-primary-40);
color: var(--sl-color-primary-70);
}
// Card
sl-card::part(base) {
background-color: var(--sl-color-gray-10);
--border-color: var(--sl-color-gray-20);
}
// Color picker
sl-color-picker::part(base) {
background-color: var(--sl-color-gray-10);
border-color: var(--sl-color-gray-20);
}
sl-color-picker::part(swatches) {
border-top-color: var(--sl-color-gray-20);
}
// Details
sl-details::part(base) {
border-color: var(--sl-color-gray-20);
}
// Dialog
// TODO:
// Rating
sl-rating {
--symbol-color: var(--sl-color-gray-35);
}
}