diff --git a/docs/assets/images/undraw-content-team.svg b/docs/assets/images/undraw-content-team.svg index 3ea01ce11..08bc7482c 100644 --- a/docs/assets/images/undraw-content-team.svg +++ b/docs/assets/images/undraw-content-team.svg @@ -1,80 +1 @@ - - - - undraw-content-team - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index 66781f77c..42e6b56e5 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/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); -} diff --git a/docs/assets/plugins/theme/theme.css b/docs/assets/plugins/theme/theme.css deleted file mode 100644 index abfc95a9d..000000000 --- a/docs/assets/plugins/theme/theme.css +++ /dev/null @@ -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); - } -} diff --git a/docs/assets/plugins/theme/theme.js b/docs/assets/plugins/theme/theme.js deleted file mode 100644 index 7e4a3648a..000000000 --- a/docs/assets/plugins/theme/theme.js +++ /dev/null @@ -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); - }); - }); -})(); diff --git a/docs/assets/styles/demos.css b/docs/assets/styles/demos.css index 559dfa0e9..ac95ce680 100644 --- a/docs/assets/styles/demos.css +++ b/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); -} diff --git a/docs/assets/styles/docs-dark.css b/docs/assets/styles/docs-dark.css deleted file mode 100644 index bab51b611..000000000 --- a/docs/assets/styles/docs-dark.css +++ /dev/null @@ -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); -} - diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 8272926b0..b9e939205 100644 --- a/docs/assets/styles/docs.css +++ b/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); diff --git a/docs/components/card.md b/docs/components/card.md index ab9e922e6..97151231f 100644 --- a/docs/components/card.md +++ b/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"] { diff --git a/docs/index.html b/docs/index.html index 7326c6cf4..62d2f01ce 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,10 +33,8 @@ - - @@ -95,6 +93,5 @@ - diff --git a/src/components/avatar/avatar.scss b/src/components/avatar/avatar.scss index e5ba240be..33ecd8873 100644 --- a/src/components/avatar/avatar.scss +++ b/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 { diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 5b93e311f..0ea08c78a 100644 --- a/src/components/button/button.tsx +++ b/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; diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx index c68054039..b142ae909 100644 --- a/src/components/checkbox/checkbox.tsx +++ b/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; diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx index c1cfe6ce3..89de2bc57 100644 --- a/src/components/radio/radio.tsx +++ b/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() { diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss index f54c16f4c..19331212c 100644 --- a/src/components/switch/switch.scss +++ b/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); diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx index 05daa24d3..fc2d91c4a 100644 --- a/src/components/switch/switch.tsx +++ b/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() { diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss index daa068609..e4755ae3c 100644 --- a/src/styles/shoelace.scss +++ b/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); - } -} \ No newline at end of file