@mereb/tokens 0.0.8 → 0.0.9

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 (3) hide show
  1. package/package.json +6 -3
  2. package/src/native.d.ts +92 -0
  3. package/src/native.js +77 -0
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "@mereb/tokens",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "description": "Design tokens used by Mereb clients",
5
5
  "type": "module",
6
6
  "main": "./dist/tailwind/tokens.js",
7
7
  "exports": {
8
8
  "./native": {
9
- "types": "./src/native.ts",
10
- "default": "./native.ts"
9
+ "types": "./src/native.d.ts",
10
+ "import": "./src/native.js",
11
+ "default": "./src/native.js"
11
12
  },
12
13
  "./dist/css/vars.css": "./dist/css/vars.css",
13
14
  "./dist/tailwind/tokens.js": "./dist/tailwind/tokens.js"
@@ -15,6 +16,8 @@
15
16
  "files": [
16
17
  "dist/**/*",
17
18
  "native.ts",
19
+ "src/native.d.ts",
20
+ "src/native.js",
18
21
  "src/native.ts",
19
22
  "package.json"
20
23
  ],
package/src/native.d.ts ADDED
@@ -0,0 +1,92 @@
1
+ export type ShadowToken = {
2
+ shadowColor: string;
3
+ shadowOpacity: number;
4
+ shadowRadius: number;
5
+ shadowOffset: {
6
+ width: number;
7
+ height: number;
8
+ };
9
+ elevation: number;
10
+ };
11
+ export declare const tokens: {
12
+ readonly color: {
13
+ readonly surface: "#ffffff";
14
+ readonly surfaceMuted: "#fff5f7";
15
+ readonly surfaceSubdued: "#ffe9ee";
16
+ readonly surfaceAlt: "#fff9fb";
17
+ readonly surfaceInverse: "#141418";
18
+ readonly text: "#211820";
19
+ readonly textMuted: "#5f5560";
20
+ readonly textSubdued: "#8a7a85";
21
+ readonly primary: "#f43b57";
22
+ readonly primaryEmphasis: "#d92c47";
23
+ readonly primaryAccent: "#ff7a8e";
24
+ readonly primarySoft: "#fff1f4";
25
+ readonly primaryMuted: "#b9455a";
26
+ readonly border: "rgba(185, 69, 90, 0.14)";
27
+ readonly borderStrong: "#e7c7cf";
28
+ readonly neutralStrong: "#d5b6be";
29
+ readonly neutralMuted: "#c7b0b7";
30
+ };
31
+ readonly spacing: {
32
+ readonly none: 0;
33
+ readonly xxs: 4;
34
+ readonly xs: 6;
35
+ readonly sm: 8;
36
+ readonly smPlus: 10;
37
+ readonly md: 12;
38
+ readonly mdPlus: 14;
39
+ readonly lg: 16;
40
+ readonly xl: 20;
41
+ readonly xxl: 24;
42
+ readonly xxxl: 32;
43
+ };
44
+ readonly radius: {
45
+ readonly sm: 12;
46
+ readonly md: 16;
47
+ readonly lg: 20;
48
+ readonly xl: 24;
49
+ readonly pill: 999;
50
+ };
51
+ readonly shadow: {
52
+ readonly sm: {
53
+ shadowColor: string;
54
+ shadowOpacity: number;
55
+ shadowRadius: number;
56
+ shadowOffset: {
57
+ width: number;
58
+ height: number;
59
+ };
60
+ elevation: number;
61
+ };
62
+ readonly md: {
63
+ shadowColor: string;
64
+ shadowOpacity: number;
65
+ shadowRadius: number;
66
+ shadowOffset: {
67
+ width: number;
68
+ height: number;
69
+ };
70
+ elevation: number;
71
+ };
72
+ readonly lg: {
73
+ shadowColor: string;
74
+ shadowOpacity: number;
75
+ shadowRadius: number;
76
+ shadowOffset: {
77
+ width: number;
78
+ height: number;
79
+ };
80
+ elevation: number;
81
+ };
82
+ };
83
+ };
84
+ export type Tokens = typeof tokens;
85
+ export type ColorToken = keyof Tokens['color'];
86
+ export type SpacingToken = keyof Tokens['spacing'];
87
+ export type RadiusToken = keyof Tokens['radius'];
88
+ export type ShadowTokenName = keyof Tokens['shadow'];
89
+ export declare function getSpacing(name: SpacingToken): number;
90
+ export declare function getColor(name: ColorToken): string;
91
+ export declare function getRadius(name: RadiusToken): number;
92
+ export declare function getShadow(name: ShadowTokenName): ShadowToken;
package/src/native.js ADDED
@@ -0,0 +1,77 @@
1
+ const shadowBaseColor = 'rgba(33, 24, 32, 0.14)';
2
+ export const tokens = {
3
+ color: {
4
+ surface: '#ffffff',
5
+ surfaceMuted: '#fff5f7',
6
+ surfaceSubdued: '#ffe9ee',
7
+ surfaceAlt: '#fff9fb',
8
+ surfaceInverse: '#141418',
9
+ text: '#211820',
10
+ textMuted: '#5f5560',
11
+ textSubdued: '#8a7a85',
12
+ primary: '#f43b57',
13
+ primaryEmphasis: '#d92c47',
14
+ primaryAccent: '#ff7a8e',
15
+ primarySoft: '#fff1f4',
16
+ primaryMuted: '#b9455a',
17
+ border: 'rgba(185, 69, 90, 0.14)',
18
+ borderStrong: '#e7c7cf',
19
+ neutralStrong: '#d5b6be',
20
+ neutralMuted: '#c7b0b7'
21
+ },
22
+ spacing: {
23
+ none: 0,
24
+ xxs: 4,
25
+ xs: 6,
26
+ sm: 8,
27
+ smPlus: 10,
28
+ md: 12,
29
+ mdPlus: 14,
30
+ lg: 16,
31
+ xl: 20,
32
+ xxl: 24,
33
+ xxxl: 32
34
+ },
35
+ radius: {
36
+ sm: 12,
37
+ md: 16,
38
+ lg: 20,
39
+ xl: 24,
40
+ pill: 999
41
+ },
42
+ shadow: {
43
+ sm: {
44
+ shadowColor: shadowBaseColor,
45
+ shadowOpacity: 0.08,
46
+ shadowRadius: 4,
47
+ shadowOffset: { width: 0, height: 2 },
48
+ elevation: 1
49
+ },
50
+ md: {
51
+ shadowColor: shadowBaseColor,
52
+ shadowOpacity: 0.1,
53
+ shadowRadius: 12,
54
+ shadowOffset: { width: 0, height: 6 },
55
+ elevation: 2
56
+ },
57
+ lg: {
58
+ shadowColor: shadowBaseColor,
59
+ shadowOpacity: 0.12,
60
+ shadowRadius: 20,
61
+ shadowOffset: { width: 0, height: 12 },
62
+ elevation: 4
63
+ }
64
+ }
65
+ };
66
+ export function getSpacing(name) {
67
+ return tokens.spacing[name];
68
+ }
69
+ export function getColor(name) {
70
+ return tokens.color[name];
71
+ }
72
+ export function getRadius(name) {
73
+ return tokens.radius[name];
74
+ }
75
+ export function getShadow(name) {
76
+ return tokens.shadow[name];
77
+ }