@sabrenski/spire-ui 0.0.15 → 0.0.17

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/package.json +71 -85
  2. package/src/styles/tailwind.css +50 -5
package/package.json CHANGED
@@ -1,85 +1,71 @@
1
- {
2
- "name": "@sabrenski/spire-ui",
3
- "version": "0.0.15",
4
- "description": "A dependency-free Vue 3 component library built with pure CSS and OKLCH colors",
5
- "type": "module",
6
- "license": "MIT",
7
- "author": "Sabri Stratos",
8
- "repository": {
9
- "type": "git",
10
- "url": "git+https://github.com/sabristratos/spire-ui.git"
11
- },
12
- "homepage": "https://github.com/sabristratos/spire-ui#readme",
13
- "bugs": {
14
- "url": "https://github.com/sabristratos/spire-ui/issues"
15
- },
16
- "keywords": [
17
- "vue",
18
- "vue3",
19
- "components",
20
- "ui",
21
- "component-library",
22
- "design-system",
23
- "typescript",
24
- "oklch",
25
- "css"
26
- ],
27
- "files": [
28
- "dist",
29
- "src"
30
- ],
31
- "main": "./src/index.ts",
32
- "module": "./src/index.ts",
33
- "types": "./src/index.ts",
34
- "exports": {
35
- ".": {
36
- "import": "./src/index.ts",
37
- "types": "./src/index.ts"
38
- },
39
- "./style.css": "./src/styles/main.css",
40
- "./tailwind.css": "./src/styles/tailwind.css",
41
- "./src/*": "./src/*"
42
- },
43
- "publishConfig": {
44
- "main": "./dist/spire-ui.umd.js",
45
- "module": "./dist/spire-ui.es.js",
46
- "types": "./dist/index.d.ts",
47
- "exports": {
48
- ".": {
49
- "import": "./dist/spire-ui.es.js",
50
- "require": "./dist/spire-ui.umd.js",
51
- "types": "./dist/index.d.ts"
52
- },
53
- "./style.css": "./dist/spire-ui.css",
54
- "./tailwind.css": "./src/styles/tailwind.css"
55
- }
56
- },
57
- "scripts": {
58
- "build": "vite build",
59
- "test": "vitest run",
60
- "test:watch": "vitest",
61
- "typecheck": "vue-tsc --noEmit",
62
- "docs:tokens": "npx tsx scripts/generate-token-docs.ts"
63
- },
64
- "peerDependencies": {
65
- "chart.js": "^4.4.0",
66
- "vue": "^3.3.0"
67
- },
68
- "peerDependenciesMeta": {
69
- "chart.js": {
70
- "optional": true
71
- }
72
- },
73
- "devDependencies": {
74
- "@vitejs/plugin-vue": "^5.2.1",
75
- "@vue/test-utils": "^2.4.6",
76
- "chart.js": "^4.5.1",
77
- "happy-dom": "^20.3.0",
78
- "typescript": "^5.7.2",
79
- "vite": "^6.0.7",
80
- "vite-plugin-dts": "^4.4.0",
81
- "vitest": "^4.0.17",
82
- "vue": "^3.5.13",
83
- "vue-tsc": "^2.2.0"
84
- }
85
- }
1
+ {
2
+ "name": "@sabrenski/spire-ui",
3
+ "version": "0.0.17",
4
+ "description": "A dependency-free Vue 3 component library built with pure CSS and OKLCH colors",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "author": "Sabri Stratos",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/sabristratos/spire-ui.git"
11
+ },
12
+ "homepage": "https://github.com/sabristratos/spire-ui#readme",
13
+ "bugs": {
14
+ "url": "https://github.com/sabristratos/spire-ui/issues"
15
+ },
16
+ "keywords": [
17
+ "vue",
18
+ "vue3",
19
+ "components",
20
+ "ui",
21
+ "component-library",
22
+ "design-system",
23
+ "typescript",
24
+ "oklch",
25
+ "css"
26
+ ],
27
+ "files": [
28
+ "dist",
29
+ "src"
30
+ ],
31
+ "main": "./dist/spire-ui.umd.js",
32
+ "module": "./dist/spire-ui.es.js",
33
+ "types": "./dist/index.d.ts",
34
+ "exports": {
35
+ ".": {
36
+ "import": "./dist/spire-ui.es.js",
37
+ "require": "./dist/spire-ui.umd.js",
38
+ "types": "./dist/index.d.ts"
39
+ },
40
+ "./style.css": "./dist/spire-ui.css",
41
+ "./tailwind.css": "./src/styles/tailwind.css"
42
+ },
43
+ "peerDependencies": {
44
+ "chart.js": "^4.4.0",
45
+ "vue": "^3.3.0"
46
+ },
47
+ "peerDependenciesMeta": {
48
+ "chart.js": {
49
+ "optional": true
50
+ }
51
+ },
52
+ "devDependencies": {
53
+ "@vitejs/plugin-vue": "^5.2.1",
54
+ "@vue/test-utils": "^2.4.6",
55
+ "chart.js": "^4.5.1",
56
+ "happy-dom": "^20.3.0",
57
+ "typescript": "^5.7.2",
58
+ "vite": "^6.0.7",
59
+ "vite-plugin-dts": "^4.4.0",
60
+ "vitest": "^4.0.17",
61
+ "vue": "^3.5.13",
62
+ "vue-tsc": "^2.2.0"
63
+ },
64
+ "scripts": {
65
+ "build": "vite build",
66
+ "test": "vitest run",
67
+ "test:watch": "vitest",
68
+ "typecheck": "vue-tsc --noEmit",
69
+ "docs:tokens": "npx tsx scripts/generate-token-docs.ts"
70
+ }
71
+ }
package/src/styles/tailwind.css CHANGED
@@ -12,14 +12,16 @@
12
12
  /**
13
13
  * Layer Order Declaration
14
14
  *
15
- * Establishes CSS cascade layer priority: Spire layers first, then Tailwind layers.
16
- * This ensures Tailwind utilities (space-y-*, gap-*, etc.) override Spire's reset
17
- * styles which use * { margin: 0 } in @layer spire-base.
15
+ * Establishes CSS cascade layer priority with Tailwind's base (preflight) before
16
+ * spire-components. This ensures:
17
+ * 1. Tailwind's preflight resets (border-width: 0, etc.) apply first
18
+ * 2. Spire component styles override those resets (e.g., dropdown borders)
19
+ * 3. Tailwind utilities have highest priority for user overrides
18
20
  *
19
21
  * Resulting priority (lowest to highest):
20
- * spire-base < spire-theme < spire-components < base < components < utilities
22
+ * spire-base < spire-theme < base < spire-components < components < utilities
21
23
  */
22
- @layer spire-base, spire-theme, spire-components, base, components, utilities;
24
+ @layer spire-base, spire-theme, base, spire-components, components, utilities;
23
25
 
24
26
  @theme {
25
27
  /* ============================================
@@ -406,6 +408,34 @@
406
408
  --z-tooltip: 700;
407
409
  }
408
410
 
411
+ /**
412
+ * Component-Specific Semantic Tokens
413
+ *
414
+ * These tokens are used by Spire UI components (Select, Combobox, Checkbox, etc.)
415
+ * for their internal styling. They are not exposed as Tailwind utilities but are
416
+ * required for proper component rendering when using tailwind.css standalone.
417
+ */
418
+ :root {
419
+ /* Select */
420
+ --select-menu-bg: var(--color-white);
421
+ --select-menu-border: var(--color-stone-200);
422
+ --select-option-text: var(--color-stone-700);
423
+ --select-option-hover: var(--color-stone-100);
424
+ --select-option-selected: var(--color-primary-600);
425
+
426
+ /* Checkbox (for multi-select Combobox) */
427
+ --checkbox-bg: var(--color-white);
428
+ --checkbox-border: var(--color-stone-300);
429
+ --checkbox-checked-bg: var(--color-primary-600);
430
+ --checkbox-check: var(--color-white);
431
+
432
+ /* Action (for create option) */
433
+ --action-primary: var(--color-primary-600);
434
+
435
+ /* Input (referenced by dropdown components) */
436
+ --input-placeholder: var(--color-stone-400);
437
+ }
438
+
409
439
  @keyframes spin {
410
440
  to {
411
441
  transform: rotate(360deg);
@@ -493,4 +523,19 @@
493
523
  --color-warning-foreground: var(--color-amber-100);
494
524
  --color-info-subtle: oklch(0.25 0.06 275);
495
525
  --color-info-foreground: var(--color-primary-100);
526
+
527
+ /* Component-specific dark mode overrides */
528
+ --select-menu-bg: var(--color-stone-800);
529
+ --select-menu-border: var(--color-stone-700);
530
+ --select-option-text: var(--color-stone-200);
531
+ --select-option-hover: var(--color-stone-700);
532
+ --select-option-selected: var(--color-primary-400);
533
+
534
+ --checkbox-bg: var(--color-stone-900);
535
+ --checkbox-border: var(--color-stone-600);
536
+ --checkbox-checked-bg: var(--color-primary-500);
537
+
538
+ --action-primary: var(--color-primary-500);
539
+
540
+ --input-placeholder: var(--color-stone-500);
496
541
  }