mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 16:29:43 +02:00
style: auto-format codebase with Prettier
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
This commit is contained in:
Wuesteon
parent
0241f5554c
commit
d36b321d9d
3952 changed files with 661498 additions and 739751 deletions
|
|
@ -27,29 +27,24 @@ A simple button that toggles between light and dark mode.
|
|||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeToggle } from '@manacore/shared-theme-ui';
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeToggle } from '@manacore/shared-theme-ui';
|
||||
</script>
|
||||
|
||||
<ThemeToggle {theme} />
|
||||
|
||||
<!-- With options -->
|
||||
<ThemeToggle
|
||||
{theme}
|
||||
size={24}
|
||||
showTooltip={true}
|
||||
class="my-custom-class"
|
||||
/>
|
||||
<ThemeToggle {theme} size={24} showTooltip={true} class="my-custom-class" />
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `theme` | `ThemeStore` | required | Theme store instance |
|
||||
| `size` | `number` | `20` | Icon size in pixels |
|
||||
| `showTooltip` | `boolean` | `false` | Show tooltip on hover |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
| Prop | Type | Default | Description |
|
||||
| ------------- | ------------ | -------- | ---------------------- |
|
||||
| `theme` | `ThemeStore` | required | Theme store instance |
|
||||
| `size` | `number` | `20` | Icon size in pixels |
|
||||
| `showTooltip` | `boolean` | `false` | Show tooltip on hover |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
|
||||
### ThemeSelector
|
||||
|
||||
|
|
@ -57,31 +52,25 @@ A visual selector showing all theme variants with color dots.
|
|||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeSelector } from '@manacore/shared-theme-ui';
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeSelector } from '@manacore/shared-theme-ui';
|
||||
</script>
|
||||
|
||||
<ThemeSelector {theme} />
|
||||
|
||||
<!-- With options -->
|
||||
<ThemeSelector
|
||||
{theme}
|
||||
showLabels={true}
|
||||
showEmoji={true}
|
||||
compact={false}
|
||||
class="my-custom-class"
|
||||
/>
|
||||
<ThemeSelector {theme} showLabels={true} showEmoji={true} compact={false} class="my-custom-class" />
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `theme` | `ThemeStore` | required | Theme store instance |
|
||||
| `showLabels` | `boolean` | `true` | Show variant labels |
|
||||
| `showEmoji` | `boolean` | `true` | Show variant emojis |
|
||||
| `compact` | `boolean` | `false` | Compact mode (smaller buttons) |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
| Prop | Type | Default | Description |
|
||||
| ------------ | ------------ | -------- | ------------------------------ |
|
||||
| `theme` | `ThemeStore` | required | Theme store instance |
|
||||
| `showLabels` | `boolean` | `true` | Show variant labels |
|
||||
| `showEmoji` | `boolean` | `true` | Show variant emojis |
|
||||
| `compact` | `boolean` | `false` | Compact mode (smaller buttons) |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
|
||||
### ThemeModeSelector
|
||||
|
||||
|
|
@ -89,57 +78,50 @@ A segmented control for selecting light, dark, or system mode.
|
|||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeModeSelector } from '@manacore/shared-theme-ui';
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeModeSelector } from '@manacore/shared-theme-ui';
|
||||
</script>
|
||||
|
||||
<ThemeModeSelector {theme} />
|
||||
|
||||
<!-- With options -->
|
||||
<ThemeModeSelector
|
||||
{theme}
|
||||
class="my-custom-class"
|
||||
/>
|
||||
<ThemeModeSelector {theme} class="my-custom-class" />
|
||||
```
|
||||
|
||||
#### Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `theme` | `ThemeStore` | required | Theme store instance |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
| Prop | Type | Default | Description |
|
||||
| ------- | ------------ | -------- | ---------------------- |
|
||||
| `theme` | `ThemeStore` | required | Theme store instance |
|
||||
| `class` | `string` | `''` | Additional CSS classes |
|
||||
|
||||
## Complete Example
|
||||
|
||||
```svelte
|
||||
<script lang="ts">
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import {
|
||||
ThemeToggle,
|
||||
ThemeSelector,
|
||||
ThemeModeSelector
|
||||
} from '@manacore/shared-theme-ui';
|
||||
import { theme } from '$lib/stores/theme';
|
||||
import { ThemeToggle, ThemeSelector, ThemeModeSelector } from '@manacore/shared-theme-ui';
|
||||
</script>
|
||||
|
||||
<div class="settings-panel">
|
||||
<h3>Appearance</h3>
|
||||
<h3>Appearance</h3>
|
||||
|
||||
<!-- Quick toggle in header -->
|
||||
<div class="header">
|
||||
<ThemeToggle {theme} showTooltip />
|
||||
</div>
|
||||
<!-- Quick toggle in header -->
|
||||
<div class="header">
|
||||
<ThemeToggle {theme} showTooltip />
|
||||
</div>
|
||||
|
||||
<!-- Mode selection -->
|
||||
<section>
|
||||
<label>Mode</label>
|
||||
<ThemeModeSelector {theme} />
|
||||
</section>
|
||||
<!-- Mode selection -->
|
||||
<section>
|
||||
<label>Mode</label>
|
||||
<ThemeModeSelector {theme} />
|
||||
</section>
|
||||
|
||||
<!-- Variant selection -->
|
||||
<section>
|
||||
<label>Color Theme</label>
|
||||
<ThemeSelector {theme} />
|
||||
</section>
|
||||
<!-- Variant selection -->
|
||||
<section>
|
||||
<label>Color Theme</label>
|
||||
<ThemeSelector {theme} />
|
||||
</section>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
|
@ -154,12 +136,12 @@ You can override styles using the `class` prop or by targeting the component cla
|
|||
```css
|
||||
/* Custom toggle button */
|
||||
.theme-toggle {
|
||||
background-color: var(--my-custom-bg);
|
||||
background-color: var(--my-custom-bg);
|
||||
}
|
||||
|
||||
/* Custom selector buttons */
|
||||
.variant-button.active {
|
||||
box-shadow: 0 0 0 2px var(--my-custom-ring);
|
||||
box-shadow: 0 0 0 2px var(--my-custom-ring);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -1,39 +1,39 @@
|
|||
{
|
||||
"name": "@manacore/shared-theme-ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"svelte": "./src/index.ts",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"svelte": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
},
|
||||
"./ThemeToggle.svelte": {
|
||||
"svelte": "./src/ThemeToggle.svelte",
|
||||
"default": "./src/ThemeToggle.svelte"
|
||||
},
|
||||
"./ThemeSelector.svelte": {
|
||||
"svelte": "./src/ThemeSelector.svelte",
|
||||
"default": "./src/ThemeSelector.svelte"
|
||||
},
|
||||
"./ThemeModeSelector.svelte": {
|
||||
"svelte": "./src/ThemeModeSelector.svelte",
|
||||
"default": "./src/ThemeModeSelector.svelte"
|
||||
}
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@manacore/shared-theme": "workspace:*",
|
||||
"@manacore/shared-icons": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^5.0.0",
|
||||
"typescript": "^5.0.0"
|
||||
}
|
||||
"name": "@manacore/shared-theme-ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"svelte": "./src/index.ts",
|
||||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"svelte": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"default": "./src/index.ts"
|
||||
},
|
||||
"./ThemeToggle.svelte": {
|
||||
"svelte": "./src/ThemeToggle.svelte",
|
||||
"default": "./src/ThemeToggle.svelte"
|
||||
},
|
||||
"./ThemeSelector.svelte": {
|
||||
"svelte": "./src/ThemeSelector.svelte",
|
||||
"default": "./src/ThemeSelector.svelte"
|
||||
},
|
||||
"./ThemeModeSelector.svelte": {
|
||||
"svelte": "./src/ThemeModeSelector.svelte",
|
||||
"default": "./src/ThemeModeSelector.svelte"
|
||||
}
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@manacore/shared-theme": "workspace:*",
|
||||
"@manacore/shared-icons": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^5.0.0",
|
||||
"typescript": "^5.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,87 @@
|
|||
<script lang="ts">
|
||||
import type { ThemeStore, ThemeMode } from '@manacore/shared-theme';
|
||||
import { Icon } from '@manacore/shared-icons';
|
||||
import type { ThemeStore, ThemeMode } from '@manacore/shared-theme';
|
||||
import { Icon } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
}
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { theme, class: className = '' }: Props = $props();
|
||||
let { theme, class: className = '' }: Props = $props();
|
||||
|
||||
const modes: { mode: ThemeMode; icon: string; label: string }[] = [
|
||||
{ mode: 'light', icon: 'sun', label: 'Light' },
|
||||
{ mode: 'dark', icon: 'moon', label: 'Dark' },
|
||||
{ mode: 'system', icon: 'monitor', label: 'System' },
|
||||
];
|
||||
const modes: { mode: ThemeMode; icon: string; label: string }[] = [
|
||||
{ mode: 'light', icon: 'sun', label: 'Light' },
|
||||
{ mode: 'dark', icon: 'moon', label: 'Dark' },
|
||||
{ mode: 'system', icon: 'monitor', label: 'System' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="mode-selector {className}" role="radiogroup" aria-label="Theme mode">
|
||||
{#each modes as { mode, icon, label }}
|
||||
{@const isActive = theme.mode === mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.setMode(mode)}
|
||||
class="mode-button"
|
||||
class:active={isActive}
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
aria-label="{label} mode"
|
||||
>
|
||||
<Icon name={icon} size={16} />
|
||||
<span class="label">{label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{#each modes as { mode, icon, label }}
|
||||
{@const isActive = theme.mode === mode}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.setMode(mode)}
|
||||
class="mode-button"
|
||||
class:active={isActive}
|
||||
role="radio"
|
||||
aria-checked={isActive}
|
||||
aria-label="{label} mode"
|
||||
>
|
||||
<Icon name={icon} size={16} />
|
||||
<span class="label">{label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mode-selector {
|
||||
display: inline-flex;
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
background-color: hsl(var(--color-muted));
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.mode-selector {
|
||||
display: inline-flex;
|
||||
padding: 0.25rem;
|
||||
gap: 0.25rem;
|
||||
background-color: hsl(var(--color-muted));
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.mode-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.mode-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.mode-button:hover:not(.active) {
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
.mode-button:hover:not(.active) {
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.mode-button.active {
|
||||
background-color: hsl(var(--color-surface));
|
||||
color: hsl(var(--color-foreground));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.mode-button.active {
|
||||
background-color: hsl(var(--color-surface));
|
||||
color: hsl(var(--color-foreground));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mode-button:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.mode-button:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
.label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,122 @@
|
|||
<script lang="ts">
|
||||
import type { ThemeStore, ThemeVariant } from '@manacore/shared-theme';
|
||||
import { THEME_DEFINITIONS } from '@manacore/shared-theme';
|
||||
import type { ThemeStore, ThemeVariant } from '@manacore/shared-theme';
|
||||
import { THEME_DEFINITIONS } from '@manacore/shared-theme';
|
||||
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Show variant labels */
|
||||
showLabels?: boolean;
|
||||
/** Show emoji icons */
|
||||
showEmoji?: boolean;
|
||||
/** Compact mode (smaller buttons) */
|
||||
compact?: boolean;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
}
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Show variant labels */
|
||||
showLabels?: boolean;
|
||||
/** Show emoji icons */
|
||||
showEmoji?: boolean;
|
||||
/** Compact mode (smaller buttons) */
|
||||
compact?: boolean;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
theme,
|
||||
showLabels = true,
|
||||
showEmoji = true,
|
||||
compact = false,
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
let {
|
||||
theme,
|
||||
showLabels = true,
|
||||
showEmoji = true,
|
||||
compact = false,
|
||||
class: className = '',
|
||||
}: Props = $props();
|
||||
|
||||
/**
|
||||
* Get the primary color for a variant based on current mode
|
||||
*/
|
||||
function getVariantColor(variant: ThemeVariant): string {
|
||||
const definition = THEME_DEFINITIONS[variant];
|
||||
const colors = theme.effectiveMode === 'dark' ? definition.dark : definition.light;
|
||||
return `hsl(${colors.primary})`;
|
||||
}
|
||||
/**
|
||||
* Get the primary color for a variant based on current mode
|
||||
*/
|
||||
function getVariantColor(variant: ThemeVariant): string {
|
||||
const definition = THEME_DEFINITIONS[variant];
|
||||
const colors = theme.effectiveMode === 'dark' ? definition.dark : definition.light;
|
||||
return `hsl(${colors.primary})`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="theme-selector {className}" class:compact>
|
||||
{#each theme.variants as variant}
|
||||
{@const definition = THEME_DEFINITIONS[variant]}
|
||||
{@const isActive = theme.variant === variant}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.setVariant(variant)}
|
||||
class="variant-button"
|
||||
class:active={isActive}
|
||||
aria-label="Select {definition.label} theme"
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<span
|
||||
class="color-dot"
|
||||
style:background-color={getVariantColor(variant)}
|
||||
></span>
|
||||
{#if showEmoji && !compact}
|
||||
<span class="emoji">{definition.emoji}</span>
|
||||
{/if}
|
||||
{#if showLabels && !compact}
|
||||
<span class="label">{definition.label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#each theme.variants as variant}
|
||||
{@const definition = THEME_DEFINITIONS[variant]}
|
||||
{@const isActive = theme.variant === variant}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.setVariant(variant)}
|
||||
class="variant-button"
|
||||
class:active={isActive}
|
||||
aria-label="Select {definition.label} theme"
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
<span class="color-dot" style:background-color={getVariantColor(variant)}></span>
|
||||
{#if showEmoji && !compact}
|
||||
<span class="emoji">{definition.emoji}</span>
|
||||
{/if}
|
||||
{#if showLabels && !compact}
|
||||
<span class="label">{definition.label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.theme-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.theme-selector {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.variant-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.variant-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.variant-button:hover {
|
||||
background-color: hsl(var(--color-surface-hover));
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
}
|
||||
.variant-button:hover {
|
||||
background-color: hsl(var(--color-surface-hover));
|
||||
border-color: hsl(var(--color-border-strong));
|
||||
}
|
||||
|
||||
.variant-button.active {
|
||||
background-color: hsl(var(--color-surface));
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow: 0 0 0 1px hsl(var(--color-primary));
|
||||
}
|
||||
.variant-button.active {
|
||||
background-color: hsl(var(--color-surface));
|
||||
border-color: hsl(var(--color-primary));
|
||||
box-shadow: 0 0 0 1px hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.variant-button:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.variant-button:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.color-dot {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.color-dot {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.emoji {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Compact mode */
|
||||
.compact .variant-button {
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
/* Compact mode */
|
||||
.compact .variant-button {
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.compact .color-dot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
.compact .color-dot {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,74 +1,76 @@
|
|||
<script lang="ts">
|
||||
import type { ThemeStore } from '@manacore/shared-theme';
|
||||
import { Icon } from '@manacore/shared-icons';
|
||||
import type { ThemeStore } from '@manacore/shared-theme';
|
||||
import { Icon } from '@manacore/shared-icons';
|
||||
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Icon size in pixels */
|
||||
size?: number;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
/** Show tooltip */
|
||||
showTooltip?: boolean;
|
||||
}
|
||||
interface Props {
|
||||
/** Theme store instance */
|
||||
theme: ThemeStore;
|
||||
/** Icon size in pixels */
|
||||
size?: number;
|
||||
/** Additional CSS classes */
|
||||
class?: string;
|
||||
/** Show tooltip */
|
||||
showTooltip?: boolean;
|
||||
}
|
||||
|
||||
let { theme, size = 20, class: className = '', showTooltip = false }: Props = $props();
|
||||
let { theme, size = 20, class: className = '', showTooltip = false }: Props = $props();
|
||||
|
||||
function getTooltipText(): string {
|
||||
if (theme.mode === 'system') {
|
||||
return `System (${theme.effectiveMode})`;
|
||||
}
|
||||
return theme.effectiveMode === 'dark' ? 'Dark mode' : 'Light mode';
|
||||
}
|
||||
function getTooltipText(): string {
|
||||
if (theme.mode === 'system') {
|
||||
return `System (${theme.effectiveMode})`;
|
||||
}
|
||||
return theme.effectiveMode === 'dark' ? 'Dark mode' : 'Light mode';
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => theme.toggleMode()}
|
||||
class="theme-toggle {className}"
|
||||
aria-label="Toggle theme"
|
||||
title={showTooltip ? getTooltipText() : undefined}
|
||||
type="button"
|
||||
onclick={() => theme.toggleMode()}
|
||||
class="theme-toggle {className}"
|
||||
aria-label="Toggle theme"
|
||||
title={showTooltip ? getTooltipText() : undefined}
|
||||
>
|
||||
{#if theme.effectiveMode === 'dark'}
|
||||
<Icon name="sun" {size} class="theme-toggle-icon" />
|
||||
{:else}
|
||||
<Icon name="moon" {size} class="theme-toggle-icon" />
|
||||
{/if}
|
||||
{#if theme.effectiveMode === 'dark'}
|
||||
<Icon name="sun" {size} class="theme-toggle-icon" />
|
||||
{:else}
|
||||
<Icon name="moon" {size} class="theme-toggle-icon" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
transition: background-color 0.2s ease, transform 0.1s ease;
|
||||
}
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-foreground));
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
transform 0.1s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.theme-toggle:hover {
|
||||
background-color: hsl(var(--color-surface-hover));
|
||||
}
|
||||
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.theme-toggle:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.theme-toggle:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.theme-toggle:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-ring));
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
:global(.theme-toggle-icon) {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
:global(.theme-toggle-icon) {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.theme-toggle:hover :global(.theme-toggle-icon) {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
.theme-toggle:hover :global(.theme-toggle-icon) {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"isolatedModules": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
"types": ["svelte"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules"]
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"isolatedModules": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
"types": ["svelte"]
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue