@sudobility/building_blocks_rn 0.0.49 → 0.0.51
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/dist/src/theme/colors.js +64 -38
- package/package.json +2 -2
package/dist/src/theme/colors.js
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
* color objects. Light mode uses white/light-gray surfaces; dark mode uses
|
|
7
7
|
* gray-800/900 surfaces with inverted text colors.
|
|
8
8
|
*/
|
|
9
|
+
import { defaultTheme } from '@sudobility/design/themes';
|
|
9
10
|
export const palette = {
|
|
10
11
|
primary: {
|
|
11
12
|
50: '#eff6ff',
|
|
@@ -39,45 +40,70 @@ export const palette = {
|
|
|
39
40
|
black: '#000000',
|
|
40
41
|
transparent: 'transparent',
|
|
41
42
|
};
|
|
43
|
+
/**
|
|
44
|
+
* Convert a design-system HSL token ("H S% L%") to a hex string. React Native's
|
|
45
|
+
* color parser cannot read space-separated `hsl()` (CSS Color 4) syntax, so the
|
|
46
|
+
* theme is resolved to hex at module load. `lOverride` produces tint variants
|
|
47
|
+
* (e.g. error/success backgrounds) from the same hue, keeping them theme-derived
|
|
48
|
+
* rather than hardcoded.
|
|
49
|
+
*/
|
|
50
|
+
function hslToHex(token, lOverride) {
|
|
51
|
+
const [h, s, l] = token.replace(/%/g, '').trim().split(/\s+/).map(Number);
|
|
52
|
+
const L = (lOverride ?? l) / 100;
|
|
53
|
+
const S = s / 100;
|
|
54
|
+
const a = S * Math.min(L, 1 - L);
|
|
55
|
+
const f = (n) => {
|
|
56
|
+
const k = (n + h / 30) % 12;
|
|
57
|
+
const c = L - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
|
|
58
|
+
return Math.round(255 * c)
|
|
59
|
+
.toString(16)
|
|
60
|
+
.padStart(2, '0');
|
|
61
|
+
};
|
|
62
|
+
return `#${f(0)}${f(8)}${f(4)}`;
|
|
63
|
+
}
|
|
64
|
+
// Theme colors are derived from @sudobility/design's default theme so the RN
|
|
65
|
+
// library follows the design system instead of a local hardcoded palette.
|
|
66
|
+
const L = defaultTheme.light;
|
|
67
|
+
const D = defaultTheme.dark;
|
|
42
68
|
export const lightColors = {
|
|
43
|
-
primary:
|
|
44
|
-
background:
|
|
45
|
-
card:
|
|
46
|
-
text:
|
|
47
|
-
textSecondary:
|
|
48
|
-
textMuted:
|
|
49
|
-
border:
|
|
50
|
-
notification:
|
|
51
|
-
surface:
|
|
52
|
-
surfaceSecondary:
|
|
53
|
-
error:
|
|
54
|
-
errorBg:
|
|
55
|
-
success:
|
|
56
|
-
successBg:
|
|
57
|
-
successText:
|
|
58
|
-
warning:
|
|
59
|
-
info:
|
|
60
|
-
invertedText:
|
|
61
|
-
invertedBackground:
|
|
69
|
+
primary: hslToHex(L.primary),
|
|
70
|
+
background: hslToHex(L.background),
|
|
71
|
+
card: hslToHex(L.card),
|
|
72
|
+
text: hslToHex(L.foreground),
|
|
73
|
+
textSecondary: hslToHex(L.mutedForeground),
|
|
74
|
+
textMuted: hslToHex(L.mutedForeground, 60),
|
|
75
|
+
border: hslToHex(L.border),
|
|
76
|
+
notification: hslToHex(L.destructive),
|
|
77
|
+
surface: hslToHex(L.card),
|
|
78
|
+
surfaceSecondary: hslToHex(L.muted),
|
|
79
|
+
error: hslToHex(L.destructive),
|
|
80
|
+
errorBg: hslToHex(L.destructive, 96),
|
|
81
|
+
success: hslToHex(L.success),
|
|
82
|
+
successBg: hslToHex(L.success, 92),
|
|
83
|
+
successText: hslToHex(L.success),
|
|
84
|
+
warning: hslToHex(L.warning),
|
|
85
|
+
info: hslToHex(L.info),
|
|
86
|
+
invertedText: hslToHex(D.foreground),
|
|
87
|
+
invertedBackground: hslToHex(D.background),
|
|
62
88
|
};
|
|
63
89
|
export const darkColors = {
|
|
64
|
-
primary:
|
|
65
|
-
background:
|
|
66
|
-
card:
|
|
67
|
-
text:
|
|
68
|
-
textSecondary:
|
|
69
|
-
textMuted:
|
|
70
|
-
border:
|
|
71
|
-
notification:
|
|
72
|
-
surface:
|
|
73
|
-
surfaceSecondary:
|
|
74
|
-
error:
|
|
75
|
-
errorBg:
|
|
76
|
-
success:
|
|
77
|
-
successBg:
|
|
78
|
-
successText:
|
|
79
|
-
warning:
|
|
80
|
-
info:
|
|
81
|
-
invertedText:
|
|
82
|
-
invertedBackground:
|
|
90
|
+
primary: hslToHex(D.primary),
|
|
91
|
+
background: hslToHex(D.background),
|
|
92
|
+
card: hslToHex(D.card),
|
|
93
|
+
text: hslToHex(D.foreground),
|
|
94
|
+
textSecondary: hslToHex(D.mutedForeground),
|
|
95
|
+
textMuted: hslToHex(D.mutedForeground, 50),
|
|
96
|
+
border: hslToHex(D.border),
|
|
97
|
+
notification: hslToHex(D.destructive),
|
|
98
|
+
surface: hslToHex(D.card),
|
|
99
|
+
surfaceSecondary: hslToHex(D.muted),
|
|
100
|
+
error: hslToHex(D.destructive),
|
|
101
|
+
errorBg: hslToHex(D.destructive, 14),
|
|
102
|
+
success: hslToHex(D.success),
|
|
103
|
+
successBg: hslToHex(D.success, 14),
|
|
104
|
+
successText: hslToHex(D.success, 70),
|
|
105
|
+
warning: hslToHex(D.warning),
|
|
106
|
+
info: hslToHex(D.info),
|
|
107
|
+
invertedText: hslToHex(L.foreground),
|
|
108
|
+
invertedBackground: hslToHex(L.background),
|
|
83
109
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sudobility/building_blocks_rn",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.51",
|
|
4
4
|
"description": "Higher-level shared UI building blocks for Sudobility React Native apps",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"i18next": "^23.0.0 || ^24.0.0 || ^25.0.0",
|
|
51
51
|
"react-i18next": "^14.0.0 || ^15.0.0 || ^16.0.0",
|
|
52
52
|
"@react-native-async-storage/async-storage": ">=1.0.0",
|
|
53
|
-
"@sudobility/design": "
|
|
53
|
+
"@sudobility/design": "1.1.36",
|
|
54
54
|
"react-native-in-app-review": ">=4.4.2"
|
|
55
55
|
},
|
|
56
56
|
"peerDependenciesMeta": {
|