Revert "Revert "Revert "Initial dark theme (WIP)"""

This reverts commit 76e86922f0.

docs/assets/plugins/code-block/code-block.css

@@ -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);
-}

docs/assets/plugins/theme/theme.css

@@ -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);
-  }
-}

docs/assets/plugins/theme/theme.js

@@ -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);
-    });
-  });
-})();

docs/assets/styles/demos.css

@@ -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);
-}

docs/assets/styles/docs-dark.css

@@ -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);
-}
-

docs/assets/styles/docs.css

@@ -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);

docs/components/card.md

@@ -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"] {

docs/index.html

@@ -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>

src/components/avatar/avatar.scss

@@ -1,6 +1,7 @@
 @import 'component';
 
 /**
+ * @prop --background-color: The avatar's background color.
  * @prop --size: The size of the avatar.
  */
 :host {

src/components/button/button.tsx

@@ -26,28 +26,28 @@ export class Button {
   @State() hasFocus = false;
 
   /** The button's type. */
-  @Prop({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'default';
+  @Prop() type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'default';
 
   /** The button's size. */
-  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+  @Prop() size: 'small' | 'medium' | 'large' = 'medium';
 
   /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
   @Prop() caret = false;
 
   /** Set to true to disable the button. */
-  @Prop({ reflect: true }) disabled = false;
+  @Prop() disabled = false;
 
   /** Set to true to draw the button in a loading state. */
-  @Prop({ reflect: true }) loading = false;
+  @Prop() loading = false;
 
   /** Set to true to draw a pill-style button with rounded edges. */
-  @Prop({ reflect: true }) pill = false;
+  @Prop() pill = false;
 
   /** Set to true to draw a circle button. */
-  @Prop({ reflect: true }) circle = false;
+  @Prop() circle = false;
 
   /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
-  @Prop({ reflect: true }) submit = false;
+  @Prop() submit = false;
 
   /** An optional name for the button. Ignored when `href` is set. */
   @Prop() name: string;

src/components/checkbox/checkbox.tsx

@@ -37,10 +37,10 @@ export class Checkbox {
   @Prop() disabled = false;
 
   /** Set to true to draw the checkbox in a checked state. */
-  @Prop({ mutable: true, reflect: true }) checked = false;
+  @Prop({ mutable: true }) checked = false;
 
   /** Set to true to draw the checkbox in an indeterminate state. */
-  @Prop({ mutable: true, reflect: true }) indeterminate = false;
+  @Prop({ mutable: true }) indeterminate = false;
 
   /** Emitted when the control loses focus. */
   @Event() slBlur: EventEmitter;

src/components/radio/radio.tsx

@@ -38,7 +38,7 @@ export class Radio {
   @Prop() disabled = false;
 
   /** Set to true to draw the radio in a checked state. */
-  @Prop({ mutable: true, reflect: true }) checked = false;
+  @Prop({ mutable: true }) checked = false;
 
   @Watch('checked')
   handleCheckedChange() {

src/components/switch/switch.scss

@@ -12,7 +12,6 @@
 .switch {
   display: inline-flex;
   align-items: center;
-  width: var(--width);
   font-family: var(--sl-input-font-family);
   font-size: var(--sl-input-font-size-medium);
   font-weight: var(--sl-input-font-weight);

src/components/switch/switch.tsx

@@ -36,7 +36,7 @@ export class Switch {
   @Prop() disabled = false;
 
   /** Set to true to draw the switch in a checked state. */
-  @Prop({ mutable: true, reflect: true }) checked = false;
+  @Prop({ mutable: true }) checked = false;
 
   @Watch('checked')
   handleCheckedChange() {

src/styles/shoelace.scss

@@ -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);
-  }
-}