@dax-ui/tokens 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.
- package/CHANGELOG.md +8 -0
- package/LICENSE +12 -0
- package/README.md +38 -2
- package/lib/index.d.ts +52 -0
- package/lib/index.js +44 -0
- package/lib/index.js.map +1 -0
- package/package.json +43 -3
package/CHANGELOG.md
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
Copyright (c) 2026 Digital Auxilius. All rights reserved.
|
|
2
|
+
|
|
3
|
+
This software and its source code are proprietary. They are made publicly available
|
|
4
|
+
for viewing and installation only. No license is granted to use, copy, modify, merge,
|
|
5
|
+
publish, distribute, sublicense or sell copies of this software, in whole or in part,
|
|
6
|
+
except under a separate written agreement with Digital Auxilius.
|
|
7
|
+
|
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
|
9
|
+
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
|
|
10
|
+
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
|
11
|
+
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF OR
|
|
12
|
+
IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @dax-ui/tokens
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Design tokens: the raw values the theme is built from. Plain data with no React or MUI
|
|
4
|
+
code, so it can be imported anywhere, including React Server Components, Node scripts
|
|
5
|
+
and non-React code.
|
|
6
|
+
|
|
7
|
+
Inside React components, prefer theme values (`sx={{ color: 'primary.main' }}`), which
|
|
8
|
+
follow light/dark mode. Use tokens where there is no theme.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
pnpm add @dax-ui/tokens
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
import { tokens } from '@dax-ui/tokens';
|
|
20
|
+
|
|
21
|
+
tokens.color.brand[500]; // '#3b6ef6'
|
|
22
|
+
tokens.radius.md; // 8
|
|
23
|
+
tokens.spacingUnit * 2; // 16
|
|
24
|
+
tokens.font.family; // '"Inter", "Helvetica Neue", Arial, sans-serif'
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Tokens
|
|
28
|
+
|
|
29
|
+
| Token | Values |
|
|
30
|
+
| --- | --- |
|
|
31
|
+
| `color.brand` | Scale `50`, `100`, `300`, `500`, `600`, `700`, `900` |
|
|
32
|
+
| `color.neutral` | Scale `0`, `50`, `100`, `200`, `400`, `600`, `800`, `900`, `950` |
|
|
33
|
+
| `color.success` / `warning` / `error` / `info` | Single status colors |
|
|
34
|
+
| `radius` | `sm` 4, `md` 8, `lg` 12 (px) |
|
|
35
|
+
| `spacingUnit` | 8 (px); `theme.spacing(n)` is `n * spacingUnit` |
|
|
36
|
+
| `font.family` | Inter, with system fallbacks |
|
|
37
|
+
| `font.weight` | `regular` 400, `medium` 500, `semibold` 600, `bold` 700 |
|
|
38
|
+
|
|
39
|
+
The `Tokens` type describes the whole object.
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Design tokens: the single source of truth for brand values.
|
|
3
|
+
* Placeholder values — replace with the values from your Figma file.
|
|
4
|
+
* This module has no React or MUI imports so it is safe in server code.
|
|
5
|
+
*/
|
|
6
|
+
declare const tokens: {
|
|
7
|
+
readonly color: {
|
|
8
|
+
readonly brand: {
|
|
9
|
+
readonly 50: "#eef4ff";
|
|
10
|
+
readonly 100: "#dbe6fe";
|
|
11
|
+
readonly 300: "#93b4fd";
|
|
12
|
+
readonly 500: "#3b6ef6";
|
|
13
|
+
readonly 600: "#2554eb";
|
|
14
|
+
readonly 700: "#1d42d8";
|
|
15
|
+
readonly 900: "#1e3279";
|
|
16
|
+
};
|
|
17
|
+
readonly neutral: {
|
|
18
|
+
readonly 0: "#ffffff";
|
|
19
|
+
readonly 50: "#f8fafc";
|
|
20
|
+
readonly 100: "#f1f5f9";
|
|
21
|
+
readonly 200: "#e2e8f0";
|
|
22
|
+
readonly 400: "#94a3b8";
|
|
23
|
+
readonly 600: "#475569";
|
|
24
|
+
readonly 800: "#1e293b";
|
|
25
|
+
readonly 900: "#0f172a";
|
|
26
|
+
readonly 950: "#020617";
|
|
27
|
+
};
|
|
28
|
+
readonly success: "#16a34a";
|
|
29
|
+
readonly warning: "#d97706";
|
|
30
|
+
readonly error: "#dc2626";
|
|
31
|
+
readonly info: "#0284c7";
|
|
32
|
+
};
|
|
33
|
+
readonly radius: {
|
|
34
|
+
readonly sm: 4;
|
|
35
|
+
readonly md: 8;
|
|
36
|
+
readonly lg: 12;
|
|
37
|
+
};
|
|
38
|
+
/** Base spacing unit in px; theme.spacing(n) = n * unit. */
|
|
39
|
+
readonly spacingUnit: 8;
|
|
40
|
+
readonly font: {
|
|
41
|
+
readonly family: "\"Inter\", \"Helvetica Neue\", Arial, sans-serif";
|
|
42
|
+
readonly weight: {
|
|
43
|
+
readonly regular: 400;
|
|
44
|
+
readonly medium: 500;
|
|
45
|
+
readonly semibold: 600;
|
|
46
|
+
readonly bold: 700;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
type Tokens = typeof tokens;
|
|
51
|
+
|
|
52
|
+
export { type Tokens, tokens };
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
var tokens = {
|
|
3
|
+
color: {
|
|
4
|
+
brand: {
|
|
5
|
+
50: "#eef4ff",
|
|
6
|
+
100: "#dbe6fe",
|
|
7
|
+
300: "#93b4fd",
|
|
8
|
+
500: "#3b6ef6",
|
|
9
|
+
600: "#2554eb",
|
|
10
|
+
700: "#1d42d8",
|
|
11
|
+
900: "#1e3279"
|
|
12
|
+
},
|
|
13
|
+
neutral: {
|
|
14
|
+
0: "#ffffff",
|
|
15
|
+
50: "#f8fafc",
|
|
16
|
+
100: "#f1f5f9",
|
|
17
|
+
200: "#e2e8f0",
|
|
18
|
+
400: "#94a3b8",
|
|
19
|
+
600: "#475569",
|
|
20
|
+
800: "#1e293b",
|
|
21
|
+
900: "#0f172a",
|
|
22
|
+
950: "#020617"
|
|
23
|
+
},
|
|
24
|
+
success: "#16a34a",
|
|
25
|
+
warning: "#d97706",
|
|
26
|
+
error: "#dc2626",
|
|
27
|
+
info: "#0284c7"
|
|
28
|
+
},
|
|
29
|
+
radius: {
|
|
30
|
+
sm: 4,
|
|
31
|
+
md: 8,
|
|
32
|
+
lg: 12
|
|
33
|
+
},
|
|
34
|
+
/** Base spacing unit in px; theme.spacing(n) = n * unit. */
|
|
35
|
+
spacingUnit: 8,
|
|
36
|
+
font: {
|
|
37
|
+
family: '"Inter", "Helvetica Neue", Arial, sans-serif',
|
|
38
|
+
weight: { regular: 400, medium: 500, semibold: 600, bold: 700 }
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
export {
|
|
42
|
+
tokens
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Design tokens: the single source of truth for brand values.\n * Placeholder values — replace with the values from your Figma file.\n * This module has no React or MUI imports so it is safe in server code.\n */\nexport const tokens = {\n color: {\n brand: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 300: '#93b4fd',\n 500: '#3b6ef6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 900: '#1e3279',\n },\n neutral: {\n 0: '#ffffff',\n 50: '#f8fafc',\n 100: '#f1f5f9',\n 200: '#e2e8f0',\n 400: '#94a3b8',\n 600: '#475569',\n 800: '#1e293b',\n 900: '#0f172a',\n 950: '#020617',\n },\n success: '#16a34a',\n warning: '#d97706',\n error: '#dc2626',\n info: '#0284c7',\n },\n radius: {\n sm: 4,\n md: 8,\n lg: 12,\n },\n /** Base spacing unit in px; theme.spacing(n) = n * unit. */\n spacingUnit: 8,\n font: {\n family: '\"Inter\", \"Helvetica Neue\", Arial, sans-serif',\n weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },\n },\n} as const;\n\nexport type Tokens = typeof tokens;\n"],"mappings":";AAKO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,SAAS;AAAA,MACP,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA;AAAA,EAEA,aAAa;AAAA,EACb,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ,EAAE,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,MAAM,IAAI;AAAA,EAChE;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,46 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dax-ui/tokens",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Design tokens for dax-ui (plain data, server-safe)",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"dax-ui",
|
|
7
|
+
"react",
|
|
8
|
+
"design-system",
|
|
9
|
+
"design-tokens"
|
|
10
|
+
],
|
|
11
|
+
"author": "Digital Auxilius",
|
|
12
|
+
"homepage": "https://github.com/FaaizHussain26/DAX-UI/tree/main/packages/tokens#readme",
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/FaaizHussain26/DAX-UI.git",
|
|
16
|
+
"directory": "packages/tokens"
|
|
17
|
+
},
|
|
18
|
+
"bugs": {
|
|
19
|
+
"url": "https://github.com/FaaizHussain26/DAX-UI/issues"
|
|
20
|
+
},
|
|
21
|
+
"license": "UNLICENSED",
|
|
22
|
+
"type": "module",
|
|
23
|
+
"sideEffects": false,
|
|
24
|
+
"main": "lib/index.js",
|
|
25
|
+
"types": "lib/index.d.ts",
|
|
26
|
+
"exports": {
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./lib/index.d.ts",
|
|
29
|
+
"default": "./lib/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./package.json": "./package.json"
|
|
32
|
+
},
|
|
33
|
+
"files": [
|
|
34
|
+
"lib",
|
|
35
|
+
"CHANGELOG.md"
|
|
36
|
+
],
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@dax-ui/builder": "^0.0.0"
|
|
39
|
+
},
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"build": "builder --server"
|
|
45
|
+
}
|
|
6
46
|
}
|