plasma-svelte 0.0.1

package/dist/style/token.css

@@ -0,0 +1,230 @@
+/* ==========================================================================
+   Plasma / KDE Breeze Design System Tokens
+   Based on KDE Breeze, Plasma 6, Kirigami & KColorScheme specifications
+   ========================================================================== */
+
+:root {
+	/* ------------------------------------------------------------------------
+	   Base Typography
+	   ------------------------------------------------------------------------ */
+	--plasma-font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+	--plasma-font-mono: "Hack", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace;
+
+	--plasma-font-size-xs: 0.75rem;    /* 12px */
+	--plasma-font-size-sm: 0.8125rem;  /* 13px - KDE standard small label */
+	--plasma-font-size-base: 0.875rem; /* 14px - KDE standard UI text */
+	--plasma-font-size-md: 1rem;       /* 16px */
+	--plasma-font-size-lg: 1.125rem;   /* 18px */
+	--plasma-font-size-xl: 1.375rem;   /* 22px */
+	--plasma-font-size-2xl: 1.75rem;   /* 28px */
+
+	--plasma-font-weight-normal: 400;
+	--plasma-font-weight-medium: 500;
+	--plasma-font-weight-bold: 600;
+
+	--plasma-line-height-tight: 1.25;
+	--plasma-line-height-base: 1.5;
+
+	/* ------------------------------------------------------------------------
+	   Spacing & Sizing Grid (4px / 8px base)
+	   ------------------------------------------------------------------------ */
+	--plasma-space-2xs: 0.125rem; /* 2px */
+	--plasma-space-xs: 0.25rem;   /* 4px */
+	--plasma-space-sm: 0.5rem;    /* 8px */
+	--plasma-space-md: 0.75rem;   /* 12px */
+	--plasma-space-lg: 1rem;      /* 16px */
+	--plasma-space-xl: 1.5rem;    /* 24px */
+	--plasma-space-2xl: 2rem;     /* 32px */
+
+	/* ------------------------------------------------------------------------
+	   Control Geometry (Breeze / Plasma 6 metrics)
+	   ------------------------------------------------------------------------ */
+	--plasma-radius-xs: 2px;
+	--plasma-radius-sm: 4px;
+	--plasma-radius-md: 5px;      /* Plasma 6 control standard */
+	--plasma-radius-lg: 8px;      /* Cards, Popups, Menus */
+	--plasma-radius-xl: 12px;     /* Floating sheets & panels */
+	--plasma-radius-full: 9999px; /* Pills, Avatars, Switches */
+
+	--plasma-control-height-sm: 1.5rem;  /* 24px */
+	--plasma-control-height-md: 2rem;    /* 32px standard */
+	--plasma-control-height-lg: 2.5rem;  /* 40px */
+
+	/* ------------------------------------------------------------------------
+	   Transitions & Motion
+	   ------------------------------------------------------------------------ */
+	--plasma-duration-fast: 100ms;
+	--plasma-duration-base: 150ms;
+	--plasma-duration-slow: 250ms;
+	--plasma-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+	--plasma-transition-fast: all 100ms ease-out;
+	--plasma-transition-base: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+	--plasma-transition-slow: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+	/* ------------------------------------------------------------------------
+	   KDE Plasma Accent & Semantic Roles
+	   ------------------------------------------------------------------------ */
+	--plasma-color-highlight: #3daee9;
+	--plasma-color-highlight-hover: #1d99f3;
+	--plasma-color-highlight-active: #1881c7;
+	--plasma-color-highlight-text: #ffffff;
+	--plasma-color-highlight-soft: rgba(61, 174, 233, 0.15);
+	--plasma-color-highlight-glow: rgba(61, 174, 233, 0.35);
+
+	--plasma-color-positive: #27ae60;
+	--plasma-color-positive-hover: #2ecc71;
+	--plasma-color-positive-soft: rgba(39, 174, 96, 0.15);
+
+	--plasma-color-neutral: #f67400;
+	--plasma-color-neutral-hover: #fdbc4b;
+	--plasma-color-neutral-soft: rgba(246, 116, 0, 0.15);
+
+	--plasma-color-negative: #da4453;
+	--plasma-color-negative-hover: #ed1515;
+	--plasma-color-negative-soft: rgba(218, 68, 83, 0.15);
+
+	/* ------------------------------------------------------------------------
+	   Default Dark Theme (Breeze Dark)
+	   ------------------------------------------------------------------------ */
+	--plasma-color-window-bg: #2a2e32;
+	--plasma-color-view-bg: #232629;
+	--plasma-color-surface: #31363b;
+	--plasma-color-surface-hover: #3b4045;
+	--plasma-color-surface-active: #232629;
+	--plasma-color-surface-sunken: #1d2023;
+
+	--plasma-color-border: #4d545c;
+	--plasma-color-border-subtle: rgba(255, 255, 255, 0.1);
+	--plasma-color-border-hover: #3daee9;
+	--plasma-color-border-focus: #3daee9;
+
+	--plasma-color-text: #fcfcfc;
+	--plasma-color-text-muted: #a1a8b0;
+	--plasma-color-text-disabled: #616569;
+	--plasma-color-text-link: #1d99f3;
+
+	--plasma-color-tooltip-bg: #1b1e20;
+	--plasma-color-tooltip-text: #fcfcfc;
+
+	--plasma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+	--plasma-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+	--plasma-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+	--plasma-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
+	--plasma-shadow-focus: 0 0 0 2px var(--plasma-color-highlight-glow);
+
+	/* ------------------------------------------------------------------------
+	   Backward Compatibility Aliases
+	   ------------------------------------------------------------------------ */
+	--color-primary: var(--plasma-color-highlight);
+	--color-primary-hover: var(--plasma-color-highlight-hover);
+	--color-bg: var(--plasma-color-window-bg);
+	--color-surface: var(--plasma-color-surface);
+	--color-surface-alt: var(--plasma-color-view-bg);
+	--color-border: var(--plasma-color-border);
+	--color-text: var(--plasma-color-text);
+	--color-text-muted: var(--plasma-color-text-muted);
+	--color-danger: var(--plasma-color-negative);
+
+	--font-family-base: var(--plasma-font-sans);
+	--font-size-sm: var(--plasma-font-size-sm);
+	--font-size-base: var(--plasma-font-size-base);
+
+	--radius-sm: var(--plasma-radius-sm);
+	--radius-md: var(--plasma-radius-md);
+	--shadow-card: var(--plasma-shadow-md);
+	--transition-default: var(--plasma-transition-base);
+	--transition-fast: var(--plasma-transition-fast);
+}
+
+/* ==========================================================================
+   Light Mode Theme (Breeze Light)
+   Triggered via data-theme="light" or prefers-color-scheme: light (when not explicit dark)
+   ========================================================================== */
+[data-theme="light"] {
+	--plasma-color-window-bg: #eff0f1;
+	--plasma-color-view-bg: #ffffff;
+	--plasma-color-surface: #f7f7f7;
+	--plasma-color-surface-hover: #ffffff;
+	--plasma-color-surface-active: #e0e2e4;
+	--plasma-color-surface-sunken: #e2e4e6;
+
+	--plasma-color-border: #bcbebf;
+	--plasma-color-border-subtle: rgba(0, 0, 0, 0.08);
+	--plasma-color-border-hover: #3daee9;
+	--plasma-color-border-focus: #3daee9;
+
+	--plasma-color-text: #232629;
+	--plasma-color-text-muted: #5c636b;
+	--plasma-color-text-disabled: #9fa4a8;
+	--plasma-color-text-link: #2980b9;
+
+	--plasma-color-tooltip-bg: #31363b;
+	--plasma-color-tooltip-text: #fcfcfc;
+
+	--plasma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
+	--plasma-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+	--plasma-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+	--plasma-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
+	--plasma-shadow-focus: 0 0 0 2px rgba(61, 174, 233, 0.35);
+}
+
+@media (prefers-color-scheme: light) {
+	:root:not([data-theme="dark"]) {
+		--plasma-color-window-bg: #eff0f1;
+		--plasma-color-view-bg: #ffffff;
+		--plasma-color-surface: #f7f7f7;
+		--plasma-color-surface-hover: #ffffff;
+		--plasma-color-surface-active: #e0e2e4;
+		--plasma-color-surface-sunken: #e2e4e6;
+
+		--plasma-color-border: #bcbebf;
+		--plasma-color-border-subtle: rgba(0, 0, 0, 0.08);
+		--plasma-color-border-hover: #3daee9;
+		--plasma-color-border-focus: #3daee9;
+
+		--plasma-color-text: #232629;
+		--plasma-color-text-muted: #5c636b;
+		--plasma-color-text-disabled: #9fa4a8;
+		--plasma-color-text-link: #2980b9;
+
+		--plasma-color-tooltip-bg: #31363b;
+		--plasma-color-tooltip-text: #fcfcfc;
+
+		--plasma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
+		--plasma-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
+		--plasma-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+		--plasma-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
+		--plasma-shadow-focus: 0 0 0 2px rgba(61, 174, 233, 0.35);
+	}
+}
+
+/* Explicit dark theme override */
+[data-theme="dark"] {
+	--plasma-color-window-bg: #2a2e32;
+	--plasma-color-view-bg: #232629;
+	--plasma-color-surface: #31363b;
+	--plasma-color-surface-hover: #3b4045;
+	--plasma-color-surface-active: #232629;
+	--plasma-color-surface-sunken: #1d2023;
+
+	--plasma-color-border: #4d545c;
+	--plasma-color-border-subtle: rgba(255, 255, 255, 0.1);
+	--plasma-color-border-hover: #3daee9;
+	--plasma-color-border-focus: #3daee9;
+
+	--plasma-color-text: #fcfcfc;
+	--plasma-color-text-muted: #a1a8b0;
+	--plasma-color-text-disabled: #616569;
+	--plasma-color-text-link: #1d99f3;
+
+	--plasma-color-tooltip-bg: #1b1e20;
+	--plasma-color-tooltip-text: #fcfcfc;
+
+	--plasma-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+	--plasma-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
+	--plasma-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
+	--plasma-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
+	--plasma-shadow-focus: 0 0 0 2px var(--plasma-color-highlight-glow);
+}
+

package/dist/switch/Switch.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+
+  type SwitchSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+
+  interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+    checked?: boolean;
+    size?: SwitchSize;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+  }
+
+  let {
+    checked = $bindable(false),
+    size = "md",
+    disabled = false,
+    label,
+    children,
+    class: customClass = "",
+    id,
+    onchange,
+    ...restProps
+  }: Props = $props();
+
+  const resolvedSize = $derived(
+    size === "small"
+      ? "sm"
+      : size === "large"
+        ? "lg"
+        : size === "medium"
+          ? "md"
+          : size,
+  );
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    checked = target.checked;
+    (onchange as ((e: Event) => void) | undefined)?.(e);
+  }
+</script>
+
+<label
+  class="plasma-switch-container plasma-switch--{resolvedSize} {customClass}"
+  class:plasma-switch--disabled={disabled}
+  for={id}
+>
+  <input
+    {id}
+    type="checkbox"
+    role="switch"
+    aria-checked={checked}
+    {checked}
+    {disabled}
+    onchange={handleChange}
+    class="plasma-switch-input"
+    {...restProps}
+  />
+
+  <span class="plasma-switch-track" class:plasma-switch-track--checked={checked}>
+    <span class="plasma-switch-thumb"></span>
+  </span>
+
+  {#if children}
+    <span class="plasma-switch-label">
+      {@render children()}
+    </span>
+  {:else if label}
+    <span class="plasma-switch-label">
+      {label}
+    </span>
+  {/if}
+</label>
+
+<style>
+  .plasma-switch-container {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--plasma-space-sm);
+    cursor: pointer;
+    font-family: var(--plasma-font-sans);
+    font-size: var(--plasma-font-size-base);
+    color: var(--plasma-color-text);
+    user-select: none;
+    line-height: 1.2;
+  }
+
+  .plasma-switch--disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+
+  /* Visually hide native input */
+  .plasma-switch-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  /* --------------------------------------------------------------------------
+     Track (Pill)
+     -------------------------------------------------------------------------- */
+  .plasma-switch-track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--plasma-radius-full);
+    background-color: var(--plasma-color-surface-sunken);
+    border: 1px solid var(--plasma-color-border);
+    flex-shrink: 0;
+    transition:
+      background-color var(--plasma-duration-base) var(--plasma-ease-default),
+      border-color var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  .plasma-switch-container:hover:not(.plasma-switch--disabled) .plasma-switch-track {
+    border-color: var(--plasma-color-border-hover);
+  }
+
+  .plasma-switch-input:focus-visible + .plasma-switch-track {
+    outline: 2px solid var(--plasma-color-highlight);
+    outline-offset: 2px;
+    box-shadow: var(--plasma-shadow-focus);
+  }
+
+  .plasma-switch-track--checked {
+    background-color: var(--plasma-color-highlight);
+    border-color: var(--plasma-color-highlight-hover);
+  }
+
+  .plasma-switch-container:hover:not(.plasma-switch--disabled) .plasma-switch-track--checked {
+    background-color: var(--plasma-color-highlight-hover);
+    border-color: var(--plasma-color-highlight-active);
+  }
+
+  /* --------------------------------------------------------------------------
+     Thumb (Circular slider)
+     -------------------------------------------------------------------------- */
+  .plasma-switch-thumb {
+    position: absolute;
+    border-radius: var(--plasma-radius-full);
+    background-color: #ffffff;
+    box-shadow: var(--plasma-shadow-xs);
+    transition: transform var(--plasma-duration-base) var(--plasma-ease-default);
+  }
+
+  /* --------------------------------------------------------------------------
+     Sizes
+     -------------------------------------------------------------------------- */
+  /* SM */
+  .plasma-switch--sm .plasma-switch-track {
+    width: 28px;
+    height: 16px;
+  }
+  .plasma-switch--sm .plasma-switch-thumb {
+    width: 12px;
+    height: 12px;
+    left: 1px;
+  }
+  .plasma-switch--sm .plasma-switch-track--checked .plasma-switch-thumb {
+    transform: translateX(12px);
+  }
+
+  /* MD (Standard Breeze) */
+  .plasma-switch--md .plasma-switch-track {
+    width: 36px;
+    height: 20px;
+  }
+  .plasma-switch--md .plasma-switch-thumb {
+    width: 14px;
+    height: 14px;
+    left: 2px;
+  }
+  .plasma-switch--md .plasma-switch-track--checked .plasma-switch-thumb {
+    transform: translateX(16px);
+  }
+
+  /* LG */
+  .plasma-switch--lg .plasma-switch-track {
+    width: 44px;
+    height: 24px;
+  }
+  .plasma-switch--lg .plasma-switch-thumb {
+    width: 18px;
+    height: 18px;
+    left: 2px;
+  }
+  .plasma-switch--lg .plasma-switch-track--checked .plasma-switch-thumb {
+    transform: translateX(20px);
+  }
+
+  .plasma-switch-label {
+    display: inline-block;
+  }
+</style>

package/dist/switch/Switch.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+type SwitchSize = "sm" | "md" | "lg" | "small" | "medium" | "large";
+interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+    checked?: boolean;
+    size?: SwitchSize;
+    disabled?: boolean;
+    label?: string;
+    children?: Snippet;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;