@sapphire-sh/ui 0.0.0-stage → 0.1.0

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 (11) hide show
  1. package/README.md +23 -2
  2. package/lib/index.d.ts +2 -0
  3. package/lib/index.d.ts.map +1 -0
  4. package/lib/index.js +2 -0
  5. package/lib/index.js.map +1 -0
  6. package/lib/theme.css +52 -0
  7. package/lib/tokens.d.ts +33 -0
  8. package/lib/tokens.d.ts.map +1 -0
  9. package/lib/tokens.js +33 -0
  10. package/lib/tokens.js.map +1 -0
  11. package/package.json +73 -5
package/README.md CHANGED
@@ -1,3 +1,24 @@
1
- # Temporary Holding Version
1
+ # @sapphire-sh/ui
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ Shared color and font tokens and React components for sapphire-sh Next.js apps.
4
+
5
+ ## Installation
6
+
7
+ ```sh
8
+ npm install -S @sapphire-sh/ui
9
+ ```
10
+
11
+ ## Setup
12
+
13
+ `src/app/globals.css`:
14
+
15
+ ```css
16
+ @import 'tailwindcss';
17
+ @import '@sapphire-sh/ui/theme.css';
18
+ @source '../../node_modules/@sapphire-sh/ui/lib';
19
+ ```
20
+
21
+ The theme reads two font variables that the app fills with `next/font/google`:
22
+
23
+ - `--font-noto-sans-kr`: `Noto_Sans_KR` loaded with `variable: '--font-noto-sans-kr'`
24
+ - `--font-jetbrains-mono`: `JetBrains_Mono` loaded with `variable: '--font-jetbrains-mono'`
package/lib/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { colorTokens } from './tokens.js';
2
+ //# sourceMappingURL=index.d.ts.map
package/lib/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}
package/lib/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { colorTokens } from './tokens.js';
2
+ //# sourceMappingURL=index.js.map
package/lib/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC"}
package/lib/theme.css ADDED
@@ -0,0 +1,52 @@
1
+ :root {
2
+ --background: oklch(0.985 0.004 255);
3
+ --surface: oklch(1 0 0);
4
+ --raised: oklch(0.955 0.007 255);
5
+ --border: oklch(0.895 0.01 255);
6
+ --foreground: oklch(0.22 0.02 255);
7
+ --muted: oklch(0.5 0.02 255);
8
+ --faint: oklch(0.72 0.012 255);
9
+ --accent: oklch(0.52 0.17 258);
10
+ --accent-foreground: oklch(0.99 0 0);
11
+ --accent-soft: oklch(0.93 0.04 258);
12
+ --accent-ink: oklch(0.42 0.16 258);
13
+ --danger: oklch(0.55 0.19 25);
14
+ --success: oklch(0.58 0.13 150);
15
+ }
16
+
17
+ @media (prefers-color-scheme: dark) {
18
+ :root {
19
+ color-scheme: dark;
20
+ --background: oklch(0.17 0.012 255);
21
+ --surface: oklch(0.21 0.014 255);
22
+ --raised: oklch(0.25 0.016 255);
23
+ --border: oklch(0.32 0.016 255);
24
+ --foreground: oklch(0.94 0.008 255);
25
+ --muted: oklch(0.69 0.015 255);
26
+ --faint: oklch(0.45 0.014 255);
27
+ --accent: oklch(0.72 0.14 255);
28
+ --accent-foreground: oklch(0.17 0.02 255);
29
+ --accent-soft: oklch(0.31 0.06 255);
30
+ --accent-ink: oklch(0.84 0.09 255);
31
+ --danger: oklch(0.71 0.16 25);
32
+ --success: oklch(0.75 0.13 150);
33
+ }
34
+ }
35
+
36
+ @theme inline {
37
+ --color-background: var(--background);
38
+ --color-surface: var(--surface);
39
+ --color-raised: var(--raised);
40
+ --color-border: var(--border);
41
+ --color-foreground: var(--foreground);
42
+ --color-muted: var(--muted);
43
+ --color-faint: var(--faint);
44
+ --color-accent: var(--accent);
45
+ --color-accent-foreground: var(--accent-foreground);
46
+ --color-accent-soft: var(--accent-soft);
47
+ --color-accent-ink: var(--accent-ink);
48
+ --color-danger: var(--danger);
49
+ --color-success: var(--success);
50
+ --font-sans: var(--font-noto-sans-kr), system-ui, sans-serif;
51
+ --font-mono: var(--font-jetbrains-mono), ui-monospace, monospace;
52
+ }
package/lib/tokens.d.ts ADDED
@@ -0,0 +1,33 @@
1
+ export declare const colorTokens: {
2
+ light: {
3
+ background: string;
4
+ surface: string;
5
+ raised: string;
6
+ border: string;
7
+ foreground: string;
8
+ muted: string;
9
+ faint: string;
10
+ accent: string;
11
+ 'accent-foreground': string;
12
+ 'accent-soft': string;
13
+ 'accent-ink': string;
14
+ danger: string;
15
+ success: string;
16
+ };
17
+ dark: {
18
+ background: string;
19
+ surface: string;
20
+ raised: string;
21
+ border: string;
22
+ foreground: string;
23
+ muted: string;
24
+ faint: string;
25
+ accent: string;
26
+ 'accent-foreground': string;
27
+ 'accent-soft': string;
28
+ 'accent-ink': string;
29
+ danger: string;
30
+ success: string;
31
+ };
32
+ };
33
+ //# sourceMappingURL=tokens.d.ts.map
package/lib/tokens.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;IACvB,KAAK;QACJ,UAAU;QACV,OAAO;QACP,MAAM;QACN,MAAM;QACN,UAAU;QACV,KAAK;QACL,KAAK;QACL,MAAM;QACN,mBAAmB;QACnB,aAAa;QACb,YAAY;QACZ,MAAM;QACN,OAAO;;IAER,IAAI;QACH,UAAU;QACV,OAAO;QACP,MAAM;QACN,MAAM;QACN,UAAU;QACV,KAAK;QACL,KAAK;QACL,MAAM;QACN,mBAAmB;QACnB,aAAa;QACb,YAAY;QACZ,MAAM;QACN,OAAO;;CAER,CAAC"}
package/lib/tokens.js ADDED
@@ -0,0 +1,33 @@
1
+ export const colorTokens = {
2
+ light: {
3
+ background: 'oklch(0.985 0.004 255)',
4
+ surface: 'oklch(1 0 0)',
5
+ raised: 'oklch(0.955 0.007 255)',
6
+ border: 'oklch(0.895 0.01 255)',
7
+ foreground: 'oklch(0.22 0.02 255)',
8
+ muted: 'oklch(0.5 0.02 255)',
9
+ faint: 'oklch(0.72 0.012 255)',
10
+ accent: 'oklch(0.52 0.17 258)',
11
+ 'accent-foreground': 'oklch(0.99 0 0)',
12
+ 'accent-soft': 'oklch(0.93 0.04 258)',
13
+ 'accent-ink': 'oklch(0.42 0.16 258)',
14
+ danger: 'oklch(0.55 0.19 25)',
15
+ success: 'oklch(0.58 0.13 150)',
16
+ },
17
+ dark: {
18
+ background: 'oklch(0.17 0.012 255)',
19
+ surface: 'oklch(0.21 0.014 255)',
20
+ raised: 'oklch(0.25 0.016 255)',
21
+ border: 'oklch(0.32 0.016 255)',
22
+ foreground: 'oklch(0.94 0.008 255)',
23
+ muted: 'oklch(0.69 0.015 255)',
24
+ faint: 'oklch(0.45 0.014 255)',
25
+ accent: 'oklch(0.72 0.14 255)',
26
+ 'accent-foreground': 'oklch(0.17 0.02 255)',
27
+ 'accent-soft': 'oklch(0.31 0.06 255)',
28
+ 'accent-ink': 'oklch(0.84 0.09 255)',
29
+ danger: 'oklch(0.71 0.16 25)',
30
+ success: 'oklch(0.75 0.13 150)',
31
+ },
32
+ };
33
+ //# sourceMappingURL=tokens.js.map
package/lib/tokens.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,KAAK,EAAE;QACN,UAAU,EAAE,wBAAwB;QACpC,OAAO,EAAE,cAAc;QACvB,MAAM,EAAE,wBAAwB;QAChC,MAAM,EAAE,uBAAuB;QAC/B,UAAU,EAAE,sBAAsB;QAClC,KAAK,EAAE,qBAAqB;QAC5B,KAAK,EAAE,uBAAuB;QAC9B,MAAM,EAAE,sBAAsB;QAC9B,mBAAmB,EAAE,iBAAiB;QACtC,aAAa,EAAE,sBAAsB;QACrC,YAAY,EAAE,sBAAsB;QACpC,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,sBAAsB;KAC/B;IACD,IAAI,EAAE;QACL,UAAU,EAAE,uBAAuB;QACnC,OAAO,EAAE,uBAAuB;QAChC,MAAM,EAAE,uBAAuB;QAC/B,MAAM,EAAE,uBAAuB;QAC/B,UAAU,EAAE,uBAAuB;QACnC,KAAK,EAAE,uBAAuB;QAC9B,KAAK,EAAE,uBAAuB;QAC9B,MAAM,EAAE,sBAAsB;QAC9B,mBAAmB,EAAE,sBAAsB;QAC3C,aAAa,EAAE,sBAAsB;QACrC,YAAY,EAAE,sBAAsB;QACpC,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,sBAAsB;KAC/B;CACD,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,74 @@
1
1
  {
2
- "name": "@sapphire-sh/ui",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
2
+ "name": "@sapphire-sh/ui",
3
+ "version": "0.1.0",
4
+ "description": "@sapphire-sh/ui",
5
+ "type": "module",
6
+ "sideEffects": [
7
+ "*.css"
8
+ ],
9
+ "exports": {
10
+ ".": {
11
+ "types": "./lib/index.d.ts",
12
+ "import": "./lib/index.js"
13
+ },
14
+ "./tokens": {
15
+ "types": "./lib/tokens.d.ts",
16
+ "import": "./lib/tokens.js"
17
+ },
18
+ "./theme.css": "./lib/theme.css"
19
+ },
20
+ "files": [
21
+ "lib/**/*"
22
+ ],
23
+ "scripts": {
24
+ "bootstrap": "sapphire-bootstrap",
25
+ "prebuild": "rm -fr ./lib",
26
+ "build": "tsc -p tsconfig.build.json && cp src/theme.css lib/theme.css",
27
+ "prepare": "npm run build",
28
+ "lint": "eslint .",
29
+ "lint:fix": "eslint . --fix",
30
+ "prettier": "prettier --check .",
31
+ "prettier:fix": "prettier --write .",
32
+ "test": "vitest run"
33
+ },
34
+ "repository": {
35
+ "type": "git",
36
+ "url": "git+https://github.com/sapphire-sh/sapphire-ui.git"
37
+ },
38
+ "author": "sapphire",
39
+ "license": "MIT",
40
+ "bugs": {
41
+ "url": "https://github.com/sapphire-sh/sapphire-ui/issues"
42
+ },
43
+ "homepage": "https://github.com/sapphire-sh/sapphire-ui#readme",
44
+ "peerDependencies": {
45
+ "next": ">=16.0.0",
46
+ "react": ">=19.0.0",
47
+ "react-dom": ">=19.0.0",
48
+ "tailwindcss": ">=4.0.0"
49
+ },
50
+ "devDependencies": {
51
+ "@eslint/js": "^10.0.1",
52
+ "@sapphire-sh/utils": "^3.32.0",
53
+ "@types/node": "^26.6.5",
54
+ "@types/react": "^19.3.0",
55
+ "@types/react-dom": "^19.3.0",
56
+ "@typescript/native": "npm:typescript@^7.0.2",
57
+ "eslint": "^10.13.0",
58
+ "eslint-config-next": "^16.4.3",
59
+ "eslint-config-prettier": "^10.1.8",
60
+ "eslint-plugin-promise": "^7.3.0",
61
+ "next": "^16.4.3",
62
+ "prettier": "^3.9.10",
63
+ "prettier-plugin-organize-imports": "^4.3.0",
64
+ "react": "^19.3.1",
65
+ "react-dom": "^19.3.1",
66
+ "tailwindcss": "^4.3.3",
67
+ "typescript": "npm:@typescript/typescript6@^6.0.2",
68
+ "typescript-eslint": "^8.72.0",
69
+ "vitest": "^5.0.5"
70
+ },
71
+ "allowScripts": {
72
+ "unrs-resolver@1.12.2": true
73
+ }
74
+ }