@gospore/theme 1.0.124 → 1.0.125

package/README.md

@@ -1,24 +1,89 @@
-# gospore-design-system
+# @gospore/theme
 
-## Voraussetzungen
+Provides the base styling primitives for the entire Design System: a Vue
+`<Theme>` component that toggles dark/light mode, runtime helpers for storing
+the preferred mode, a `<ThemeSwitcher>` dropdown, and the Less bundles that
+expose tokens (colors, typography, spacing, elevation, etc.).
 
-Dependency style-resources-loader in der konsumierenden Applikation installieren:
+## Installation
 
-`vue add style-resources-loader`
+```bash
+yarn add @gospore/theme
+```
+
+Install Font Awesome + `what-input` if you plan to use the optional theme
+switcher. The package ships compiled CSS as well as source Less files.
+
+## Loading tokens
 
-## Verwendung
+You can either wrap your app in `<Theme>` **and** import the shared Less bundle
+once, or – if your tooling supports global Less resources – load
+`component-bundle.less` directly.
 
-In der vue.config.js aktivieren:
+```js
+// vite.config.js (example)
+import { defineConfig } from "vite";
 
+export default defineConfig({
+    css: {
+        preprocessorOptions: {
+            less: {
+                additionalData: '@import "@gospore/theme/src/component-bundle.less";\n',
+            },
+        },
+    },
+});
 ```
-module.exports = {
-  pluginOptions: {
-    "style-resources-loader": {
-      preProcessor: "less",
-      patterns: [
-        "./node_modules/@gospore/gospore-web-design-system-theme/src/component-bundle.less"
-      ]
-    }
-  }
-};
+
+## Theme component
+
+```vue
+<script setup>
+import { Theme } from "@gospore/theme";
+</script>
+
+<Theme mode="auto" accent-color="#0052CC">
+    <App />
+</Theme>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `mode` | `auto | light | dark` | `auto` | Controls which color mode is active. `auto` follows the OS preference (and persisted storage when used with `ThemeSwitcher`). |
+| `accentColor` | `String` | `undefined` | Optional HEX color (`#RRGGBB` or `#RGB`). When provided, the component derives a full brand palette and applies it to both the local `.theme` wrapper and `document.documentElement` for portals. |
+
+`<Theme>` listens for system changes, stores the resolved mode, exposes a
+`theme` provide/inject value, and toggles the global `dark-mode` attribute so
+all Design System components react automatically.
+
+## Theme switcher
+
+```vue
+<script setup>
+import { Theme, ThemeSwitcher } from "@gospore/theme";
+import { ref } from "vue";
+
+const mode = ref("auto");
+</script>
+
+<Theme :mode="mode">
+    <ThemeSwitcher v-model:mode="mode" />
+</Theme>
 ```
+
+The switcher is a ready-made dropdown that persists the selected mode to local
+storage via `modeStorage`. It emits `update:mode` and updates `<Theme>` when you
+use it with `v-model`.
+
+## Utility files
+
+- `src/basic.less`, `styles.less`, `colors.css`, `fonts.css`, `sizing.css`,
+  `elevation.css`, `transitions.css`, `borders.css`, `layering.css`: import
+  these selectively when you need just a subset of the tokens.
+- `modeStorage.js`: helpers for reading/writing the current theme mode.
+
+## Accessibility & motion
+
+`Theme` respects the `prefers-reduced-motion` media query when animating dark /
+light transitions. When users prefer reduced motion, color changes happen
+without fades.

package/dist/Theme.vue.d.ts

@@ -0,0 +1,16 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    mode?: string;
+    accentColor?: string;
+    $props: {
+        readonly mode?: string;
+        readonly accentColor?: string;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: (props: {}) => any;
+};

package/dist/ThemeSwitcher.vue.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{}, {
+    $emit: (event: "update:mode", ...args: any[]) => void;
+    mode: string;
+    $props: {
+        readonly mode?: string;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Theme } from "./Theme.vue";
+export { default as ThemeSwitcher } from "./ThemeSwitcher.vue";

package/dist/modeStorage.d.ts

@@ -0,0 +1,5 @@
+export function readStoredMode(): string;
+export function writeStoredMode(mode: any): void;
+export function applyStoredModeToDocument(mode: any): void;
+export const VALID_THEME_MODES: string[];
+export const STORAGE_KEY: "gospore-theme-mode";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gospore/theme",
-    "version": "1.0.124",
+    "version": "1.0.125",
     "description": "",
     "author": "Gospore",
     "type": "module",
@@ -26,7 +26,7 @@
         "vue": "^3.4.20"
     },
     "dependencies": {
-        "@gospore/dropdown-menu": "^1.0.92",
+        "@gospore/dropdown-menu": "^1.0.93",
         "what-input": "^5.2.12"
     },
     "devDependencies": {
@@ -34,5 +34,6 @@
         "unplugin-vue-macros": "^2.14.5",
         "vite": "^7.1.12"
     },
-    "gitHead": "06c1cc2ec2e495ed01330a63b352d03ff73533c9"
+    "gitHead": "201f386eb892634284e0d9645b17e5b8abd64d51",
+    "types": "./dist/index.d.ts"
 }