@noobsociety/nsds 0.3.0 → 0.3.1

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 (7) hide show
  1. package/CHANGELOG.md +13 -1
  2. package/dist/tailwind/preset.cjs +108 -0
  3. package/dist/tailwind/preset.d.cts +3 -3
  4. package/package.json +5 -5
  5. package/dist/tailwind/package.json +0 -1
  6. package/dist/tailwind/preset.d.ts +0 -4
  7. package/dist/tailwind/preset.js +0 -144
package/CHANGELOG.md CHANGED
@@ -6,6 +6,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
6
 
7
7
  ## [Unreleased]
8
8
 
9
+ ## [0.3.1] - 2026-06-20
10
+
11
+ ### Added
12
+
13
+ - Stored visual regression snapshots for the public component specimen and UI kit surfaces.
14
+
15
+ ### Changed
16
+
17
+ - Tailwind preset source is now first-class TypeScript with generated CommonJS and declaration output.
18
+ - Package validation now requires the visual fixture, visual snapshots, and generated Tailwind preset output.
19
+
9
20
  ## [0.3.0] - 2026-06-20
10
21
 
11
22
  ### Added
@@ -91,7 +102,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
91
102
 
92
103
  - Initial NSDS package with tokens, CSS primitives, React components, and Tailwind support.
93
104
 
94
- [Unreleased]: https://github.com/noobsociety/nsds/compare/v0.3.0...HEAD
105
+ [Unreleased]: https://github.com/noobsociety/nsds/compare/v0.3.1...HEAD
106
+ [0.3.1]: https://github.com/noobsociety/nsds/compare/v0.3.0...v0.3.1
95
107
  [0.3.0]: https://github.com/noobsociety/nsds/compare/v0.2.1...v0.3.0
96
108
  [0.2.1]: https://github.com/noobsociety/nsds/compare/v0.2.0...v0.2.1
97
109
  [0.2.0]: https://github.com/noobsociety/nsds/compare/v0.1.2...v0.2.0
package/dist/tailwind/preset.cjs ADDED
@@ -0,0 +1,108 @@
1
+ "use strict";
2
+ // Package preset: consumers provide their own `content` globs.
3
+ const nsdsPreset = {
4
+ darkMode: ['class', '[data-theme="dark"]'],
5
+ theme: {
6
+ extend: {
7
+ colors: {
8
+ ns: {
9
+ bg: {
10
+ 0: 'var(--ns-bg-0)',
11
+ 1: 'var(--ns-bg-1)',
12
+ 2: 'var(--ns-bg-2)',
13
+ glass: 'var(--ns-glass)',
14
+ },
15
+ ink: {
16
+ DEFAULT: 'var(--ns-ink)',
17
+ dim: 'var(--ns-ink-dim)',
18
+ faint: 'var(--ns-ink-faint)',
19
+ },
20
+ gold: {
21
+ DEFAULT: 'var(--ns-gold)',
22
+ pale: 'var(--ns-gold-pale)',
23
+ deep: 'var(--ns-gold-deep)',
24
+ shadow: 'var(--ns-gold-shadow)',
25
+ fg: 'var(--ns-gold-btn-fg)',
26
+ },
27
+ green: 'var(--ns-green)',
28
+ cyan: 'var(--ns-cyan)',
29
+ orange: 'var(--ns-orange)',
30
+ pink: 'var(--ns-pink)',
31
+ purple: 'var(--ns-purple)',
32
+ accent: 'var(--ns-accent)',
33
+ line: 'var(--ns-line)',
34
+ },
35
+ },
36
+ fontFamily: {
37
+ body: 'var(--ns-font-body)',
38
+ pixel: 'var(--ns-font-pixel)',
39
+ },
40
+ fontSize: {
41
+ 'ns-xs': ['var(--ns-text-xs)', { lineHeight: 'var(--ns-leading-normal)' }],
42
+ 'ns-sm': ['var(--ns-text-sm)', { lineHeight: 'var(--ns-leading-normal)' }],
43
+ 'ns-base': ['var(--ns-text-base)', { lineHeight: 'var(--ns-leading-normal)' }],
44
+ 'ns-lg': ['var(--ns-text-lg)', { lineHeight: 'var(--ns-leading-snug)' }],
45
+ 'ns-xl': ['var(--ns-text-xl)', { lineHeight: 'var(--ns-leading-snug)' }],
46
+ 'ns-2xl': ['var(--ns-text-2xl)', { lineHeight: 'var(--ns-leading-tight)' }],
47
+ 'ns-3xl': ['var(--ns-text-3xl)', { lineHeight: 'var(--ns-leading-tight)' }],
48
+ 'ns-4xl': ['var(--ns-text-4xl)', { lineHeight: 'var(--ns-leading-tight)' }],
49
+ },
50
+ fontWeight: {
51
+ 'ns-normal': 'var(--ns-weight-normal)',
52
+ 'ns-medium': 'var(--ns-weight-medium)',
53
+ 'ns-semibold': 'var(--ns-weight-semibold)',
54
+ 'ns-bold': 'var(--ns-weight-bold)',
55
+ },
56
+ lineHeight: {
57
+ 'ns-tight': 'var(--ns-leading-tight)',
58
+ 'ns-snug': 'var(--ns-leading-snug)',
59
+ 'ns-normal': 'var(--ns-leading-normal)',
60
+ 'ns-relaxed': 'var(--ns-leading-relaxed)',
61
+ },
62
+ spacing: {
63
+ 'ns-1': 'var(--ns-space-1)',
64
+ 'ns-2': 'var(--ns-space-2)',
65
+ 'ns-3': 'var(--ns-space-3)',
66
+ 'ns-4': 'var(--ns-space-4)',
67
+ 'ns-5': 'var(--ns-space-5)',
68
+ 'ns-6': 'var(--ns-space-6)',
69
+ 'ns-8': 'var(--ns-space-8)',
70
+ 'ns-10': 'var(--ns-space-10)',
71
+ 'ns-12': 'var(--ns-space-12)',
72
+ 'ns-16': 'var(--ns-space-16)',
73
+ 'ns-20': 'var(--ns-space-20)',
74
+ },
75
+ maxWidth: {
76
+ 'ns-container': 'var(--ns-container)',
77
+ },
78
+ height: {
79
+ 'ns-header': 'var(--ns-header-h)',
80
+ },
81
+ borderRadius: {
82
+ 'ns-sm': 'var(--ns-radius-sm)',
83
+ 'ns-md': 'var(--ns-radius-md)',
84
+ 'ns-lg': 'var(--ns-radius-lg)',
85
+ 'ns-xl': 'var(--ns-radius-xl)',
86
+ 'ns-full': 'var(--ns-radius-full)',
87
+ },
88
+ boxShadow: {
89
+ 'ns-card-hover': 'var(--ns-shadow-card-hover)',
90
+ 'ns-btn': 'var(--ns-shadow-btn)',
91
+ },
92
+ transitionDuration: {
93
+ 'ns-fast': 'var(--ns-dur-fast)',
94
+ 'ns-base': 'var(--ns-dur-base)',
95
+ 'ns-slow': 'var(--ns-dur-slow)',
96
+ },
97
+ transitionTimingFunction: {
98
+ 'ns-out': 'var(--ns-ease-out)',
99
+ 'ns-spring': 'var(--ns-ease-spring)',
100
+ },
101
+ ringColor: {
102
+ 'ns-focus': 'var(--ns-focus-ring)',
103
+ },
104
+ },
105
+ },
106
+ plugins: [],
107
+ };
108
+ module.exports = nsdsPreset;
package/dist/tailwind/preset.d.cts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { Config } from 'tailwindcss';
2
-
3
- declare const preset: Config;
4
- export = preset;
2
+ type TailwindPreset = Omit<Config, 'content'>;
3
+ declare const nsdsPreset: TailwindPreset;
4
+ export = nsdsPreset;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noobsociety/nsds",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "NoobSociety Design System — Monokai dark tokens, Tailwind preset, and pixel-art React components",
5
5
  "keywords": [
6
6
  "design-system",
@@ -13,7 +13,7 @@
13
13
  "author": "NoobSociety",
14
14
  "license": "MIT",
15
15
  "scripts": {
16
- "build": "vite build && tsc -p tsconfig.build.json && node scripts/prepare-types.mjs",
16
+ "build": "vite build && tsc -p tsconfig.build.json && tsc -p tsconfig.tailwind.json && node scripts/prepare-types.mjs",
17
17
  "build:storybook": "storybook build --disable-telemetry",
18
18
  "changeset": "changeset",
19
19
  "changeset:publish": "changeset publish",
@@ -83,12 +83,12 @@
83
83
  },
84
84
  "./tailwind": {
85
85
  "import": {
86
- "types": "./dist/tailwind/preset.d.ts",
87
- "default": "./dist/tailwind/preset.js"
86
+ "types": "./dist/tailwind/preset.d.cts",
87
+ "default": "./dist/tailwind/preset.cjs"
88
88
  },
89
89
  "require": {
90
90
  "types": "./dist/tailwind/preset.d.cts",
91
- "default": "./dist/tailwind/preset.js"
91
+ "default": "./dist/tailwind/preset.cjs"
92
92
  }
93
93
  },
94
94
  "./styles": "./dist/styles.css",
package/dist/tailwind/package.json DELETED
@@ -1 +0,0 @@
1
- { "type": "commonjs" }
package/dist/tailwind/preset.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import type { Config } from 'tailwindcss';
2
-
3
- declare const preset: Config;
4
- export = preset;
package/dist/tailwind/preset.js DELETED
@@ -1,144 +0,0 @@
1
- /**
2
- * NoobSociety Design System — Tailwind CSS preset
3
- *
4
- * Usage in tailwind.config.js / tailwind.config.ts:
5
- *
6
- * import nsdPreset from '@noobsociety/nsds/tailwind';
7
- *
8
- * export default {
9
- * presets: [nsdPreset],
10
- * content: ['./src/**\/*.{ts,tsx}'],
11
- * };
12
- *
13
- * All values reference CSS custom properties so they stay in sync with
14
- * styles.css at runtime — change a token once, Tailwind classes update too.
15
- */
16
-
17
- /** @type {import('tailwindcss').Config} */
18
- const nsdPreset = {
19
- darkMode: ['class', '[data-theme="dark"]'],
20
- theme: {
21
- extend: {
22
-
23
- /* ── Colors ──────────────────────────────────────────────── */
24
- colors: {
25
- ns: {
26
- /* Surfaces */
27
- bg: {
28
- 0: 'var(--ns-bg-0)',
29
- 1: 'var(--ns-bg-1)',
30
- 2: 'var(--ns-bg-2)',
31
- glass: 'var(--ns-glass)',
32
- },
33
- /* Ink */
34
- ink: {
35
- DEFAULT: 'var(--ns-ink)',
36
- dim: 'var(--ns-ink-dim)',
37
- faint: 'var(--ns-ink-faint)',
38
- },
39
- /* Gold — primary accent */
40
- gold: {
41
- DEFAULT: 'var(--ns-gold)',
42
- pale: 'var(--ns-gold-pale)',
43
- deep: 'var(--ns-gold-deep)',
44
- shadow: 'var(--ns-gold-shadow)',
45
- fg: 'var(--ns-gold-btn-fg)',
46
- },
47
- /* Monokai accents */
48
- green: 'var(--ns-green)',
49
- cyan: 'var(--ns-cyan)',
50
- orange: 'var(--ns-orange)',
51
- pink: 'var(--ns-pink)',
52
- purple: 'var(--ns-purple)',
53
- /* Semantic */
54
- accent: 'var(--ns-accent)',
55
- line: 'var(--ns-line)',
56
- },
57
- },
58
-
59
- /* ── Typography ──────────────────────────────────────────── */
60
- fontFamily: {
61
- body: ['var(--ns-font-body)', { fallback: ['system-ui', 'sans-serif'] }],
62
- pixel: ['var(--ns-font-pixel)', { fallback: ['monospace'] }],
63
- },
64
- fontSize: {
65
- 'ns-xs': ['var(--ns-text-xs)', { lineHeight: 'var(--ns-leading-normal)' }],
66
- 'ns-sm': ['var(--ns-text-sm)', { lineHeight: 'var(--ns-leading-normal)' }],
67
- 'ns-base': ['var(--ns-text-base)', { lineHeight: 'var(--ns-leading-normal)' }],
68
- 'ns-lg': ['var(--ns-text-lg)', { lineHeight: 'var(--ns-leading-snug)' }],
69
- 'ns-xl': ['var(--ns-text-xl)', { lineHeight: 'var(--ns-leading-snug)' }],
70
- 'ns-2xl': ['var(--ns-text-2xl)', { lineHeight: 'var(--ns-leading-tight)' }],
71
- 'ns-3xl': ['var(--ns-text-3xl)', { lineHeight: 'var(--ns-leading-tight)' }],
72
- 'ns-4xl': ['var(--ns-text-4xl)', { lineHeight: 'var(--ns-leading-tight)' }],
73
- },
74
- fontWeight: {
75
- 'ns-normal': 'var(--ns-weight-normal)',
76
- 'ns-medium': 'var(--ns-weight-medium)',
77
- 'ns-semibold': 'var(--ns-weight-semibold)',
78
- 'ns-bold': 'var(--ns-weight-bold)',
79
- },
80
- lineHeight: {
81
- 'ns-tight': 'var(--ns-leading-tight)',
82
- 'ns-snug': 'var(--ns-leading-snug)',
83
- 'ns-normal': 'var(--ns-leading-normal)',
84
- 'ns-relaxed': 'var(--ns-leading-relaxed)',
85
- },
86
-
87
- /* ── Spacing ─────────────────────────────────────────────── */
88
- spacing: {
89
- 'ns-1': 'var(--ns-space-1)',
90
- 'ns-2': 'var(--ns-space-2)',
91
- 'ns-3': 'var(--ns-space-3)',
92
- 'ns-4': 'var(--ns-space-4)',
93
- 'ns-5': 'var(--ns-space-5)',
94
- 'ns-6': 'var(--ns-space-6)',
95
- 'ns-8': 'var(--ns-space-8)',
96
- 'ns-10': 'var(--ns-space-10)',
97
- 'ns-12': 'var(--ns-space-12)',
98
- 'ns-16': 'var(--ns-space-16)',
99
- 'ns-20': 'var(--ns-space-20)',
100
- },
101
- maxWidth: {
102
- 'ns-container': 'var(--ns-container)',
103
- },
104
- height: {
105
- 'ns-header': 'var(--ns-header-h)',
106
- },
107
-
108
- /* ── Border radius ───────────────────────────────────────── */
109
- borderRadius: {
110
- 'ns-sm': 'var(--ns-radius-sm)',
111
- 'ns-md': 'var(--ns-radius-md)',
112
- 'ns-lg': 'var(--ns-radius-lg)',
113
- 'ns-xl': 'var(--ns-radius-xl)',
114
- 'ns-full': 'var(--ns-radius-full)',
115
- },
116
-
117
- /* ── Box shadow ──────────────────────────────────────────── */
118
- boxShadow: {
119
- 'ns-card-hover': 'var(--ns-shadow-card-hover)',
120
- 'ns-btn': 'var(--ns-shadow-btn)',
121
- },
122
-
123
- /* ── Transitions ─────────────────────────────────────────── */
124
- transitionDuration: {
125
- 'ns-fast': 'var(--ns-dur-fast)',
126
- 'ns-base': 'var(--ns-dur-base)',
127
- 'ns-slow': 'var(--ns-dur-slow)',
128
- },
129
- transitionTimingFunction: {
130
- 'ns-out': 'var(--ns-ease-out)',
131
- 'ns-spring': 'var(--ns-ease-spring)',
132
- },
133
-
134
- /* ── Ring / focus ────────────────────────────────────────── */
135
- ringColor: {
136
- 'ns-focus': 'var(--ns-focus-ring)',
137
- },
138
- },
139
- },
140
-
141
- plugins: [],
142
- };
143
-
144
- module.exports = nsdPreset;