@gospore/theme 1.0.129 → 1.0.130

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +12 -22
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -2,37 +2,26 @@
2
2
 
3
3
  Provides the base styling primitives for the entire Design System: a Vue
4
4
  `<Theme>` component that toggles dark/light mode, runtime helpers for storing
5
- the preferred mode, a `<ThemeSwitcher>` dropdown, and the Less bundles that
6
- expose tokens (colors, typography, spacing, elevation, etc.).
5
+ the preferred mode, a `<ThemeSwitcher>` dropdown, and the compiled token bundle
6
+ (`theme.css`) that exposes colors, typography, spacing, elevation, etc.
7
7
 
8
8
  ## Installation
9
9
 
10
10
  ```bash
11
- yarn add @gospore/theme
11
+ npm install @gospore/theme
12
12
  ```
13
13
 
14
14
  Install Font Awesome + `what-input` if you plan to use the optional theme
15
- switcher. The package ships compiled CSS as well as source Less files.
15
+ switcher. The package ships compiled CSS plus the Vue utilities listed above.
16
16
 
17
17
  ## Loading tokens
18
18
 
19
- You can either wrap your app in `<Theme>` **and** import the shared Less bundle
20
- once, or – if your tooling supports global Less resources – load
21
- `component-bundle.less` directly.
19
+ Import the bundled CSS once near your app entry point so the shared tokens and
20
+ dark-mode rules are available to every component:
22
21
 
23
22
  ```js
24
- // vite.config.js (example)
25
- import { defineConfig } from "vite";
26
-
27
- export default defineConfig({
28
- css: {
29
- preprocessorOptions: {
30
- less: {
31
- additionalData: '@import "@gospore/theme/src/component-bundle.less";\n',
32
- },
33
- },
34
- },
35
- });
23
+ // main.ts
24
+ import "@gospore/theme/theme.css";
36
25
  ```
37
26
 
38
27
  ## Theme component
@@ -77,9 +66,10 @@ use it with `v-model`.
77
66
 
78
67
  ## Utility files
79
68
 
80
- - `src/basic.less`, `styles.less`, `colors.css`, `fonts.css`, `sizing.css`,
81
- `elevation.css`, `transitions.css`, `borders.css`, `layering.css`: import
82
- these selectively when you need just a subset of the tokens.
69
+ - Token source files live under `src/` (`basic.less`, `styles.less`,
70
+ `colors.css`, `fonts.css`, `sizing.css`, `elevation.css`, `transitions.css`,
71
+ `borders.css`, `layering.css`). They are bundled into `theme.css`; when
72
+ contributing inside this repo you can import the individual files as needed.
83
73
  - `modeStorage.js`: helpers for reading/writing the current theme mode.
84
74
 
85
75
  ## Accessibility & motion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gospore/theme",
3
- "version": "1.0.129",
3
+ "version": "1.0.130",
4
4
  "description": "",
5
5
  "author": "Gospore",
6
6
  "type": "module",
@@ -28,7 +28,7 @@
28
28
  "vue": "^3.4.20"
29
29
  },
30
30
  "dependencies": {
31
- "@gospore/dropdown-menu": "^1.0.97",
31
+ "@gospore/dropdown-menu": "^1.0.98",
32
32
  "what-input": "^5.2.12"
33
33
  },
34
34
  "devDependencies": {
@@ -36,6 +36,6 @@
36
36
  "unplugin-vue-macros": "^2.14.5",
37
37
  "vite": "^7.1.12"
38
38
  },
39
- "gitHead": "1aad85b2c8f227e30d6d3a9c2d2b0daecfdd40d3",
39
+ "gitHead": "52ae3a10ae28da88ed7bfb64c3929a22ffc4d03f",
40
40
  "types": "./dist/index.d.ts"
41
41
  }