@mereb/tokens 0.0.6 → 0.0.8

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 (6) hide show
  1. package/dist/css/vars.css +19 -25
  2. package/dist/tailwind/tokens.js +8 -0
  3. package/dist/types/src/native.d.ts +16 -14
  4. package/dist/types/src/native.d.ts.map +1 -1
  5. package/package.json +1 -1
  6. package/src/native.ts +23 -21
package/dist/css/vars.css CHANGED
@@ -1,27 +1,29 @@
1
1
  :root {
2
2
  --color-surface: #ffffff;
3
- --color-surface-muted: #f3f4f6;
4
- --color-surface-subdued: #e5e5ea;
5
- --color-surface-alt: #f8f8f8;
6
- --color-surface-inverse: #0f172a;
3
+ --color-surface-muted: #fff5f7;
4
+ --color-surface-subdued: #ffe9ee;
5
+ --color-surface-alt: #fff9fb;
6
+ --color-surface-inverse: #141418;
7
7
 
8
- --color-text: #0f172a;
9
- --color-text-muted: #475569;
10
- --color-text-subdued: #6e6e73;
8
+ --color-text: #211820;
9
+ --color-text-muted: #5f5560;
10
+ --color-text-subdued: #8a7a85;
11
11
 
12
- --color-primary: #2563eb;
13
- --color-primary-emphasis: #1d4ed8;
14
- --color-primary-accent: #0a84ff;
12
+ --color-primary: #f43b57;
13
+ --color-primary-emphasis: #d92c47;
14
+ --color-primary-accent: #ff7a8e;
15
+ --color-primary-soft: #fff1f4;
16
+ --color-primary-muted: #b9455a;
15
17
 
16
- --color-border-subtle: rgba(15, 23, 42, 0.08);
17
- --color-border-strong: #d1d1d6;
18
+ --color-border-subtle: rgba(185, 69, 90, 0.18);
19
+ --color-border-strong: #ddb0ba;
18
20
 
19
- --color-neutral-strong: #bcbcc2;
20
- --color-neutral-muted: #a9a9b0;
21
+ --color-neutral-strong: #d5b6be;
22
+ --color-neutral-muted: #c7b0b7;
21
23
 
22
- --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.12);
23
- --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.12);
24
- --shadow-lg: 0 6px 12px rgba(15, 23, 42, 0.12);
24
+ --shadow-sm: 0 1px 2px rgba(33, 24, 32, 0.08);
25
+ --shadow-md: 0 8px 24px rgba(33, 24, 32, 0.1);
26
+ --shadow-lg: 0 20px 48px rgba(33, 24, 32, 0.12);
25
27
 
26
28
  --font-sans: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
27
29
 
@@ -36,14 +38,6 @@
36
38
  --spacing-xxl: 24px;
37
39
  --spacing-xxxl: 32px;
38
40
 
39
- --spacing-1: var(--spacing-xxs);
40
- --spacing-2: var(--spacing-sm);
41
- --spacing-3: var(--spacing-md);
42
- --spacing-4: var(--spacing-lg);
43
- --spacing-5: var(--spacing-xl);
44
- --spacing-6: var(--spacing-xxl);
45
- --spacing-7: var(--spacing-xxxl);
46
-
47
41
  --radius-sm: 12px;
48
42
  --radius-md: 16px;
49
43
  --radius-lg: 20px;
package/dist/tailwind/tokens.js CHANGED
@@ -12,11 +12,19 @@ export const theme = {
12
12
  primary: 'var(--color-primary)',
13
13
  'primary-emphasis': 'var(--color-primary-emphasis)',
14
14
  'primary-accent': 'var(--color-primary-accent)',
15
+ 'primary-soft': 'var(--color-primary-soft)',
16
+ 'primary-muted': 'var(--color-primary-muted)',
15
17
  border: 'var(--color-border-subtle)',
16
18
  'border-strong': 'var(--color-border-strong)',
17
19
  'neutral-strong': 'var(--color-neutral-strong)',
18
20
  'neutral-muted': 'var(--color-neutral-muted)'
19
21
  },
22
+ borderColor: {
23
+ DEFAULT: 'var(--color-border-subtle)'
24
+ },
25
+ ringColor: {
26
+ DEFAULT: 'color-mix(in srgb, var(--color-primary) 22%, transparent)'
27
+ },
20
28
  boxShadow: {
21
29
  sm: 'var(--shadow-sm)',
22
30
  md: 'var(--shadow-md)',
package/dist/types/src/native.d.ts CHANGED
@@ -11,20 +11,22 @@ export type ShadowToken = {
11
11
  export declare const tokens: {
12
12
  readonly color: {
13
13
  readonly surface: "#ffffff";
14
- readonly surfaceMuted: "#f3f4f6";
15
- readonly surfaceSubdued: "#e5e5ea";
16
- readonly surfaceAlt: "#f8f8f8";
17
- readonly surfaceInverse: "#0f172a";
18
- readonly text: "#0f172a";
19
- readonly textMuted: "#475569";
20
- readonly textSubdued: "#6e6e73";
21
- readonly primary: "#2563eb";
22
- readonly primaryEmphasis: "#1d4ed8";
23
- readonly primaryAccent: "#0a84ff";
24
- readonly border: "rgba(15, 23, 42, 0.08)";
25
- readonly borderStrong: "#d1d1d6";
26
- readonly neutralStrong: "#bcbcc2";
27
- readonly neutralMuted: "#a9a9b0";
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.18)";
27
+ readonly borderStrong: "#ddb0ba";
28
+ readonly neutralStrong: "#d5b6be";
29
+ readonly neutralMuted: "#c7b0b7";
28
30
  };
29
31
  readonly spacing: {
30
32
  readonly none: 0;
package/dist/types/src/native.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../../../src/native.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AACnC,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;AAErD,wBAAgB,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,CAErD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAEjD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEnD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,CAE5D"}
1
+ {"version":3,"file":"native.d.ts","sourceRoot":"","sources":["../../../src/native.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+DT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC;AACnC,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC;AAErD,wBAAgB,UAAU,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,CAErD;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAEjD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAEnD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,CAE5D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mereb/tokens",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "Design tokens used by Mereb clients",
5
5
  "type": "module",
6
6
  "main": "./dist/tailwind/tokens.js",
package/src/native.ts CHANGED
@@ -9,25 +9,27 @@ export type ShadowToken = {
9
9
  elevation: number;
10
10
  };
11
11
 
12
- const shadowBaseColor = 'rgba(15, 23, 42, 0.12)';
12
+ const shadowBaseColor = 'rgba(33, 24, 32, 0.14)';
13
13
 
14
14
  export const tokens = {
15
15
  color: {
16
16
  surface: '#ffffff',
17
- surfaceMuted: '#f3f4f6',
18
- surfaceSubdued: '#e5e5ea',
19
- surfaceAlt: '#f8f8f8',
20
- surfaceInverse: '#0f172a',
21
- text: '#0f172a',
22
- textMuted: '#475569',
23
- textSubdued: '#6e6e73',
24
- primary: '#2563eb',
25
- primaryEmphasis: '#1d4ed8',
26
- primaryAccent: '#0a84ff',
27
- border: 'rgba(15, 23, 42, 0.08)',
28
- borderStrong: '#d1d1d6',
29
- neutralStrong: '#bcbcc2',
30
- neutralMuted: '#a9a9b0'
17
+ surfaceMuted: '#fff5f7',
18
+ surfaceSubdued: '#ffe9ee',
19
+ surfaceAlt: '#fff9fb',
20
+ surfaceInverse: '#141418',
21
+ text: '#211820',
22
+ textMuted: '#5f5560',
23
+ textSubdued: '#8a7a85',
24
+ primary: '#f43b57',
25
+ primaryEmphasis: '#d92c47',
26
+ primaryAccent: '#ff7a8e',
27
+ primarySoft: '#fff1f4',
28
+ primaryMuted: '#b9455a',
29
+ border: 'rgba(185, 69, 90, 0.18)',
30
+ borderStrong: '#ddb0ba',
31
+ neutralStrong: '#d5b6be',
32
+ neutralMuted: '#c7b0b7'
31
33
  },
32
34
  spacing: {
33
35
  none: 0,
@@ -52,23 +54,23 @@ export const tokens = {
52
54
  shadow: {
53
55
  sm: {
54
56
  shadowColor: shadowBaseColor,
55
- shadowOpacity: 0.12,
57
+ shadowOpacity: 0.08,
56
58
  shadowRadius: 4,
57
59
  shadowOffset: { width: 0, height: 2 },
58
60
  elevation: 1
59
61
  } satisfies ShadowToken,
60
62
  md: {
61
63
  shadowColor: shadowBaseColor,
62
- shadowOpacity: 0.12,
63
- shadowRadius: 8,
64
- shadowOffset: { width: 0, height: 4 },
64
+ shadowOpacity: 0.1,
65
+ shadowRadius: 12,
66
+ shadowOffset: { width: 0, height: 6 },
65
67
  elevation: 2
66
68
  } satisfies ShadowToken,
67
69
  lg: {
68
70
  shadowColor: shadowBaseColor,
69
71
  shadowOpacity: 0.12,
70
- shadowRadius: 12,
71
- shadowOffset: { width: 0, height: 6 },
72
+ shadowRadius: 20,
73
+ shadowOffset: { width: 0, height: 12 },
72
74
  elevation: 4
73
75
  } satisfies ShadowToken
74
76
  }