shared-design-system 1.31.0 → 1.33.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.
|
@@ -1,17 +1,31 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DesignTokens } from '../tokens';
|
|
3
3
|
export type ThemeMode = 'light' | 'dark';
|
|
4
|
+
export interface ThemeColor {
|
|
5
|
+
/** Primary brand color (hex, e.g. "#E8530A") */
|
|
6
|
+
primary: string;
|
|
7
|
+
/** Darker shade for hover/active states */
|
|
8
|
+
primaryDark?: string;
|
|
9
|
+
/** Light tint for backgrounds */
|
|
10
|
+
primaryLight?: string;
|
|
11
|
+
}
|
|
4
12
|
export interface ConfigContextProps {
|
|
5
13
|
theme: ThemeMode;
|
|
6
14
|
setTheme: (theme: ThemeMode) => void;
|
|
7
15
|
locale: string;
|
|
8
16
|
setLocale: (locale: string) => void;
|
|
9
17
|
tokens: DesignTokens;
|
|
18
|
+
/** Current dynamic primary color */
|
|
19
|
+
themeColor: ThemeColor;
|
|
20
|
+
/** Dynamically change primary color at runtime — injects CSS custom properties */
|
|
21
|
+
setThemeColor: (color: ThemeColor) => void;
|
|
10
22
|
}
|
|
11
23
|
export declare const useConfig: () => ConfigContextProps;
|
|
12
24
|
export interface ConfigProviderProps {
|
|
13
25
|
children: React.ReactNode;
|
|
14
26
|
defaultTheme?: ThemeMode;
|
|
15
27
|
defaultLocale?: string;
|
|
28
|
+
/** Initial primary color (overrides token default) */
|
|
29
|
+
defaultThemeColor?: ThemeColor;
|
|
16
30
|
}
|
|
17
31
|
export declare const ConfigProvider: React.FC<ConfigProviderProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useContext, useEffect, useState } from 'react';
|
|
2
|
+
import { createContext, useContext, useEffect, useState, useCallback } from 'react';
|
|
3
3
|
import { tokens } from '../tokens';
|
|
4
4
|
const ConfigContext = createContext(undefined);
|
|
5
5
|
export const useConfig = () => {
|
|
@@ -22,12 +22,56 @@ const darkThemeVars = {
|
|
|
22
22
|
'--ds-color-slate200': '#3A3A3A',
|
|
23
23
|
'--ds-color-slate300': '#4A4A4A',
|
|
24
24
|
'--ds-color-slate400': '#7B7B7B',
|
|
25
|
-
'--ds-color-slate800': '#F8F9FA',
|
|
26
|
-
'--ds-color-white': '#121212',
|
|
25
|
+
'--ds-color-slate800': '#F8F9FA',
|
|
26
|
+
'--ds-color-white': '#121212',
|
|
27
27
|
};
|
|
28
|
-
|
|
28
|
+
// ─── Derive a light tint from a hex color (mix with white at ~90%) ───────────
|
|
29
|
+
function deriveLightTint(hex) {
|
|
30
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
31
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
32
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
33
|
+
const mix = (c) => Math.round(c * 0.12 + 255 * 0.88);
|
|
34
|
+
return `rgb(${mix(r)}, ${mix(g)}, ${mix(b)})`;
|
|
35
|
+
}
|
|
36
|
+
// ─── Derive a darker shade (~20% darker) ─────────────────────────────────────
|
|
37
|
+
function deriveDarkShade(hex) {
|
|
38
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
39
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
40
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
41
|
+
const darken = (c) => Math.max(0, Math.round(c * 0.78));
|
|
42
|
+
return `rgb(${darken(r)}, ${darken(g)}, ${darken(b)})`;
|
|
43
|
+
}
|
|
44
|
+
// ─── Inject primary color vars into :root ─────────────────────────────────────
|
|
45
|
+
function applyThemeColor(color) {
|
|
46
|
+
var _a, _b;
|
|
47
|
+
const root = document.documentElement;
|
|
48
|
+
const dark = (_a = color.primaryDark) !== null && _a !== void 0 ? _a : deriveDarkShade(color.primary);
|
|
49
|
+
const light = (_b = color.primaryLight) !== null && _b !== void 0 ? _b : deriveLightTint(color.primary);
|
|
50
|
+
root.style.setProperty('--ds-color-primary', color.primary);
|
|
51
|
+
root.style.setProperty('--ds-color-primary-dark', dark);
|
|
52
|
+
root.style.setProperty('--ds-color-primary-light', light);
|
|
53
|
+
root.style.setProperty('--ds-color-border-focus', color.primary);
|
|
54
|
+
}
|
|
55
|
+
const DEFAULT_THEME_COLOR = {
|
|
56
|
+
primary: '#E8530A',
|
|
57
|
+
primaryDark: '#C43A00',
|
|
58
|
+
primaryLight: '#FEF0E6',
|
|
59
|
+
};
|
|
60
|
+
export const ConfigProvider = ({ children, defaultTheme = 'light', defaultLocale = 'vi-VN', defaultThemeColor, }) => {
|
|
29
61
|
const [theme, setTheme] = useState(defaultTheme);
|
|
30
62
|
const [locale, setLocale] = useState(defaultLocale);
|
|
63
|
+
const [themeColor, _setThemeColor] = useState(defaultThemeColor !== null && defaultThemeColor !== void 0 ? defaultThemeColor : DEFAULT_THEME_COLOR);
|
|
64
|
+
// Apply initial theme color on mount
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
applyThemeColor(defaultThemeColor !== null && defaultThemeColor !== void 0 ? defaultThemeColor : DEFAULT_THEME_COLOR);
|
|
67
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
68
|
+
}, []);
|
|
69
|
+
// Public API: change primary color at runtime
|
|
70
|
+
const setThemeColor = useCallback((color) => {
|
|
71
|
+
_setThemeColor(color);
|
|
72
|
+
applyThemeColor(color);
|
|
73
|
+
}, []);
|
|
74
|
+
// Apply dark/light mode overrides
|
|
31
75
|
useEffect(() => {
|
|
32
76
|
const root = document.documentElement;
|
|
33
77
|
if (theme === 'dark') {
|
|
@@ -47,6 +91,8 @@ export const ConfigProvider = ({ children, defaultTheme = 'light', defaultLocale
|
|
|
47
91
|
locale,
|
|
48
92
|
setLocale,
|
|
49
93
|
tokens,
|
|
94
|
+
themeColor,
|
|
95
|
+
setThemeColor,
|
|
50
96
|
};
|
|
51
97
|
return _jsx(ConfigContext.Provider, { value: value, children: children });
|
|
52
98
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfigProvider.js","sourceRoot":"","sources":["../../../src/components/ConfigProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ConfigProvider.js","sourceRoot":"","sources":["../../../src/components/ConfigProvider.tsx"],"names":[],"mappings":"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"}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -59,7 +59,7 @@ export type { ResultProps } from './components/Result';
|
|
|
59
59
|
export { Collapse } from './components/Collapse';
|
|
60
60
|
export type { CollapseProps, CollapseItem } from './components/Collapse';
|
|
61
61
|
export { ConfigProvider, useConfig } from './components/ConfigProvider';
|
|
62
|
-
export type { ConfigProviderProps, ThemeMode } from './components/ConfigProvider';
|
|
62
|
+
export type { ConfigProviderProps, ThemeMode, ThemeColor } from './components/ConfigProvider';
|
|
63
63
|
export { Stack } from './components/Stack';
|
|
64
64
|
export type { StackProps } from './components/Stack';
|
|
65
65
|
export { Alert } from './components/Alert';
|
package/dist/src/tokens.js
CHANGED
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
export const tokens = {
|
|
6
6
|
color: {
|
|
7
7
|
white: '#FFFFFF',
|
|
8
|
-
// Primary — brand red (#
|
|
9
|
-
primary: 'var(--ds-color-primary, #
|
|
10
|
-
primaryDark: 'var(--ds-color-primary-dark, #
|
|
11
|
-
primaryLight: 'var(--ds-color-primary-light, #
|
|
8
|
+
// Primary — brand orange-red (#E8530A) — gradient warm: yellow-orange → red
|
|
9
|
+
primary: 'var(--ds-color-primary, #E8530A)',
|
|
10
|
+
primaryDark: 'var(--ds-color-primary-dark, #C43A00)',
|
|
11
|
+
primaryLight: 'var(--ds-color-primary-light, #FEF0E6)',
|
|
12
12
|
// Accent — brand yellow (#FFC20E)
|
|
13
13
|
accent: 'var(--ds-color-accent, #FFC20E)',
|
|
14
14
|
accentDark: 'var(--ds-color-accent-dark, #F7A30A)',
|
|
@@ -28,7 +28,7 @@ export const tokens = {
|
|
|
28
28
|
textDisabled: 'var(--ds-color-text-disabled, #B6BEC8)',
|
|
29
29
|
// Border & Surface
|
|
30
30
|
border: 'var(--ds-color-border, #D3D8DE)',
|
|
31
|
-
borderFocus: 'var(--ds-color-border-focus, #
|
|
31
|
+
borderFocus: 'var(--ds-color-border-focus, #E8530A)',
|
|
32
32
|
surface: 'var(--ds-color-surface, #FFFFFF)',
|
|
33
33
|
surfaceAlt: 'var(--ds-color-surface-alt, #F8F9FA)',
|
|
34
34
|
overlay: 'rgba(0, 0, 0, 0.3)',
|
package/dist/src/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA8FH,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC,KAAK,EAAE;QACL,KAAK,EAAS,SAAS;QACvB,
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA8FH,MAAM,CAAC,MAAM,MAAM,GAAiB;IAClC,KAAK,EAAE;QACL,KAAK,EAAS,SAAS;QACvB,4EAA4E;QAC5E,OAAO,EAAO,wCAAwC;QACtD,WAAW,EAAG,wCAAwC;QACtD,YAAY,EAAE,wCAAwC;QACtD,kCAAkC;QAClC,MAAM,EAAQ,wCAAwC;QACtD,UAAU,EAAI,wCAAwC;QACtD,WAAW,EAAG,wCAAwC;QACtD,SAAS;QACT,OAAO,EAAO,wCAAwC;QACtD,SAAS,EAAK,wCAAwC;QACtD,OAAO,EAAO,wCAAwC;QACtD,SAAS,EAAK,wCAAwC;QACtD,MAAM,EAAQ,wCAAwC;QACtD,QAAQ,EAAM,wCAAwC;QACtD,IAAI,EAAU,wCAAwC;QACtD,MAAM,EAAQ,wCAAwC;QACtD,OAAO;QACP,IAAI,EAAU,wCAAwC;QACtD,SAAS,EAAK,wCAAwC;QACtD,YAAY,EAAE,wCAAwC;QACtD,mBAAmB;QACnB,MAAM,EAAQ,wCAAwC;QACtD,WAAW,EAAG,wCAAwC;QACtD,OAAO,EAAO,wCAAwC;QACtD,UAAU,EAAI,wCAAwC;QACtD,OAAO,EAAO,oBAAoB;QAClC,6BAA6B;QAC7B,OAAO,EAAG,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;KACpB;IACD,MAAM,EAAE;QACN,EAAE,EAAI,KAAK;QACX,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,QAAQ;KACf;IACD,MAAM,EAAE;QACN,EAAE,EAAG,2BAA2B;QAChC,EAAE,EAAG,+DAA+D;QACpE,EAAE,EAAG,iEAAiE;QACtE,EAAE,EAAG,mEAAmE;KACzE;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,0DAA0D;QAClE,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,EAAE,EAAI,MAAM;QACZ,KAAK,EAAC,MAAM;QACZ,YAAY,EAAG,GAAG;QAClB,YAAY,EAAG,GAAG;QAClB,cAAc,EAAC,GAAG;QAClB,UAAU,EAAK,GAAG;KACnB;IACD,OAAO,EAAE;QACP,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,KAAK;QACV,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,UAAU,EAAE;QACV,IAAI,EAAI,sCAAsC;QAC9C,MAAM,EAAE,sCAAsC;QAC9C,IAAI,EAAI,sCAAsC;KAC/C;CACF,CAAC"}
|