Skip to content

Commit ddf3ada

Browse files
AhyoungRyuAhyoungRyu
authored
[CLNP-3254] feat: support descriptive color name (#1129)
Addresses https://sendbird.atlassian.net/browse/CLNP-3254 ### Change Description ![image](https://github.com/sendbird/sendbird-uikit-react/assets/10060731/f41c7370-7137-439f-9320-ab0399246c8d) Users who want to customize the color set can use below new more descriptive color name instead of `001` / `002` ... `005`. I added a color map parsing util function; `mapColorKeys` to ,a the new & existing color name but we'll be still using the existing names. Refer to [this Slack thread](https://sendbird.slack.com/archives/G01290GCDCN/p1716881782621069) for more detailed discussion. 1. Primary, Secondary, Error, information ``` Primary-500 -> Primary-extra dark Primary-400 -> Primary-dark Primary-300 -> Primary-main Primary-200 -> Primary-light Primary-100 -> Primary-extra light Secondary-500 -> Secondary-extra dark Secondary-400 -> Secondary-dark Secondary-300 -> Secondary-main Secondary-200 -> Secondary-light Secondary-100 -> Secondary-extra light ``` 2. Background 100~700: No changes 3. Overlay ``` Overlay-01 -> Overlay-dark Overlay-02 -> Overlay-light ``` 4. OnLight & OnDark ``` // On Light On Light-01 -> Onlight-text-high-emphasis On Light-02 -> Onlight-text-mid-emphasis On Light-03 -> Onlight-text-low-emphasis On Light-04 -> Onlight-text-disabled // On Dark On Dark -01 -> Ondark-text-high-emphasis On Dark -02 -> Ondark-text-mid-emphasis On Dark -03 -> Ondark-text-low-emphasis On Dark -04 -> Ondark-text-disabled ```
1 parent 8da2983 commit ddf3ada

File tree

4 files changed

+319
-104
lines changed

4 files changed

+319
-104
lines changed

‎src/lib/hooks/useTheme.ts‎

Lines changed: 105 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,105 @@
11
import { useLayoutEffect } from 'react';
2+
import { type ColorSet, mapColorKeys } from '../utils/colorMapper';
23
import cssVars from 'css-vars-ponyfill';
34

5+
const DEFAULT_COLOR_SET = {
6+
'--sendbird-dark-primary-500': '#4d2aa6',
7+
'--sendbird-dark-primary-400': '#6440C4',
8+
'--sendbird-dark-primary-300': '#7B53EF',
9+
'--sendbird-dark-primary-200': '#9E8CF5',
10+
'--sendbird-dark-primary-100': '#E2DFFF',
11+
12+
'--sendbird-dark-secondary-500': '#007A7A',
13+
'--sendbird-dark-secondary-400': '#189A8D',
14+
'--sendbird-dark-secondary-300': '#2EBA9F',
15+
'--sendbird-dark-secondary-200': '#6FD6BE',
16+
'--sendbird-dark-secondary-100': '#AEF2DC',
17+
18+
'--sendbird-dark-information-100': '#b2d9ff',
19+
20+
'--sendbird-dark-error-500': '#A30E2D',
21+
'--sendbird-dark-error-400': '#C11F41',
22+
'--sendbird-dark-error-300': '#E53157',
23+
'--sendbird-dark-error-200': '#FF6183',
24+
'--sendbird-dark-error-100': '#FFABBD',
25+
26+
'--sendbird-dark-background-700': '#000000',
27+
'--sendbird-dark-background-600': '#161616',
28+
'--sendbird-dark-background-500': '#2C2C2C',
29+
'--sendbird-dark-background-400': '#393939',
30+
'--sendbird-dark-background-300': '#A8A8A8',
31+
'--sendbird-dark-background-200': '#D9D9D9',
32+
'--sendbird-dark-background-100': '#F0F0F0',
33+
'--sendbird-dark-background-50': '#FFFFFF',
34+
35+
'--sendbird-dark-overlay': 'rgba(0, 0, 0, 0.32)',
36+
37+
'--sendbird-dark-onlight-01': 'rgba(0, 0, 0, 0.88)',
38+
'--sendbird-dark-onlight-02': 'rgba(0, 0, 0, 0.50)',
39+
'--sendbird-dark-onlight-03': 'rgba(0, 0, 0, 0.38)',
40+
'--sendbird-dark-onlight-04': 'rgba(0, 0, 0, 0.12)',
41+
42+
'--sendbird-dark-ondark-01': 'rgba(255, 255, 255, 0.88)',
43+
'--sendbird-dark-ondark-02': 'rgba(255, 255, 255, 0.50)',
44+
'--sendbird-dark-ondark-03': 'rgba(255, 255, 255, 0.38)',
45+
'--sendbird-dark-ondark-04': 'rgba(255, 255, 255, 0.12)',
46+
47+
'--sendbird-dark-shadow-01': '0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12)',
48+
'--sendbird-dark-shadow-02': '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12)',
49+
'--sendbird-dark-shadow-03': '0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12)',
50+
'--sendbird-dark-shadow-04': '0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12)',
51+
52+
'--sendbird-dark-shadow-message-input': '0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
53+
54+
'--sendbird-light-primary-500': '#4d2aa6',
55+
'--sendbird-light-primary-400': '#6440C4',
56+
'--sendbird-light-primary-300': '#7B53EF',
57+
'--sendbird-light-primary-200': '#9E8CF5',
58+
'--sendbird-light-primary-100': '#E2DFFF',
59+
60+
'--sendbird-light-secondary-500': '#007A7A',
61+
'--sendbird-light-secondary-400': '#189A8D',
62+
'--sendbird-light-secondary-300': '#2EBA9F',
63+
'--sendbird-light-secondary-200': '#6FD6BE',
64+
'--sendbird-light-secondary-100': '#AEF2DC',
65+
66+
'--sendbird-light-information-100': '#b2d9ff',
67+
68+
'--sendbird-light-error-500': '#A30E2D',
69+
'--sendbird-light-error-400': '#C11F41',
70+
'--sendbird-light-error-300': '#E53157',
71+
'--sendbird-light-error-200': '#FF6183',
72+
'--sendbird-light-error-100': '#FFABBD',
73+
74+
'--sendbird-light-background-700': '#000000',
75+
'--sendbird-light-background-600': '#161616',
76+
'--sendbird-light-background-500': '#2C2C2C',
77+
'--sendbird-light-background-400': '#393939',
78+
'--sendbird-light-background-300': '#A8A8A8',
79+
'--sendbird-light-background-200': '#D9D9D9',
80+
'--sendbird-light-background-100': '#F0F0F0',
81+
'--sendbird-light-background-50': ' #FFFFFF',
82+
83+
'--sendbird-light-overlay': 'rgba(0, 0, 0, 0.32)',
84+
85+
'--sendbird-light-onlight-01': 'rgba(0, 0, 0, 0.88)',
86+
'--sendbird-light-onlight-02': 'rgba(0, 0, 0, 0.50)',
87+
'--sendbird-light-onlight-03': 'rgba(0, 0, 0, 0.38)',
88+
'--sendbird-light-onlight-04': 'rgba(0, 0, 0, 0.12)',
89+
90+
'--sendbird-light-ondark-01': 'rgba(255, 255, 255, 0.88)',
91+
'--sendbird-light-ondark-02': 'rgba(255, 255, 255, 0.50)',
92+
'--sendbird-light-ondark-03': 'rgba(255, 255, 255, 0.38)',
93+
'--sendbird-light-ondark-04': 'rgba(255, 255, 255, 0.12)',
94+
95+
'--sendbird-light-shadow-01': '0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12)',
96+
'--sendbird-light-shadow-02': '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12)',
97+
'--sendbird-light-shadow-03': '0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12)',
98+
'--sendbird-light-shadow-04': '0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12)',
99+
100+
'--sendbird-light-shadow-message-input': '0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
101+
};
102+
4103
const isEmpty = (obj?: null | Record<string, unknown>) => {
5104
if (obj === null || obj === undefined) {
6105
return true;
@@ -14,111 +113,14 @@ const isEmpty = (obj?: null | Record<string, unknown>) => {
14113
return JSON.stringify(obj) === JSON.stringify({});
15114
};
16115

17-
const useTheme = (overrides?: Record<string, string>): void => {
116+
const useTheme = (overrides?: ColorSet): void => {
18117
useLayoutEffect(() => {
19118
if (!isEmpty(overrides)) {
20-
cssVars({
21-
variables: {
22-
...{
23-
'--sendbird-dark-primary-500': '#4d2aa6',
24-
'--sendbird-dark-primary-400': '#6440C4',
25-
'--sendbird-dark-primary-300': '#7B53EF',
26-
'--sendbird-dark-primary-200': '#9E8CF5',
27-
'--sendbird-dark-primary-100': '#E2DFFF',
28-
29-
'--sendbird-dark-secondary-500': '#007A7A',
30-
'--sendbird-dark-secondary-400': '#189A8D',
31-
'--sendbird-dark-secondary-300': '#2EBA9F',
32-
'--sendbird-dark-secondary-200': '#6FD6BE',
33-
'--sendbird-dark-secondary-100': '#AEF2DC',
34-
35-
'--sendbird-dark-information-100': '#b2d9ff',
36-
37-
'--sendbird-dark-error-500': '#A30E2D',
38-
'--sendbird-dark-error-400': '#C11F41',
39-
'--sendbird-dark-error-300': '#E53157',
40-
'--sendbird-dark-error-200': '#FF6183',
41-
'--sendbird-dark-error-100': '#FFABBD',
42-
43-
'--sendbird-dark-background-700': '#000000',
44-
'--sendbird-dark-background-600': '#161616',
45-
'--sendbird-dark-background-500': '#2C2C2C',
46-
'--sendbird-dark-background-400': '#393939',
47-
'--sendbird-dark-background-300': '#A8A8A8',
48-
'--sendbird-dark-background-200': '#D9D9D9',
49-
'--sendbird-dark-background-100': '#F0F0F0',
50-
'--sendbird-dark-background-50': '#FFFFFF',
51-
52-
'--sendbird-dark-overlay': 'rgba(0, 0, 0, 0.32)',
53-
54-
'--sendbird-dark-onlight-01': 'rgba(0, 0, 0, 0.88)',
55-
'--sendbird-dark-onlight-02': 'rgba(0, 0, 0, 0.50)',
56-
'--sendbird-dark-onlight-03': 'rgba(0, 0, 0, 0.38)',
57-
'--sendbird-dark-onlight-04': 'rgba(0, 0, 0, 0.12)',
58-
59-
'--sendbird-dark-ondark-01': 'rgba(255, 255, 255, 0.88)',
60-
'--sendbird-dark-ondark-02': 'rgba(255, 255, 255, 0.50)',
61-
'--sendbird-dark-ondark-03': 'rgba(255, 255, 255, 0.38)',
62-
'--sendbird-dark-ondark-04': 'rgba(255, 255, 255, 0.12)',
63-
64-
'--sendbird-dark-shadow-01': '0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12)',
65-
'--sendbird-dark-shadow-02': '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12)',
66-
'--sendbird-dark-shadow-03': '0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12)',
67-
'--sendbird-dark-shadow-04': '0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12)',
68-
69-
'--sendbird-dark-shadow-message-input': '0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
70-
71-
'--sendbird-light-primary-500': '#4d2aa6',
72-
'--sendbird-light-primary-400': '#6440C4',
73-
'--sendbird-light-primary-300': '#7B53EF',
74-
'--sendbird-light-primary-200': '#9E8CF5',
75-
'--sendbird-light-primary-100': '#E2DFFF',
76-
77-
'--sendbird-light-secondary-500': '#007A7A',
78-
'--sendbird-light-secondary-400': '#189A8D',
79-
'--sendbird-light-secondary-300': '#2EBA9F',
80-
'--sendbird-light-secondary-200': '#6FD6BE',
81-
'--sendbird-light-secondary-100': '#AEF2DC',
82-
83-
'--sendbird-light-information-100': '#b2d9ff',
84-
85-
'--sendbird-light-error-500': '#A30E2D',
86-
'--sendbird-light-error-400': '#C11F41',
87-
'--sendbird-light-error-300': '#E53157',
88-
'--sendbird-light-error-200': '#FF6183',
89-
'--sendbird-light-error-100': '#FFABBD',
90-
91-
'--sendbird-light-background-700': '#000000',
92-
'--sendbird-light-background-600': '#161616',
93-
'--sendbird-light-background-500': '#2C2C2C',
94-
'--sendbird-light-background-400': '#393939',
95-
'--sendbird-light-background-300': '#A8A8A8',
96-
'--sendbird-light-background-200': '#D9D9D9',
97-
'--sendbird-light-background-100': '#F0F0F0',
98-
'--sendbird-light-background-50': ' #FFFFFF',
99-
100-
'--sendbird-light-overlay': 'rgba(0, 0, 0, 0.32)',
101-
102-
'--sendbird-light-onlight-01': 'rgba(0, 0, 0, 0.88)',
103-
'--sendbird-light-onlight-02': 'rgba(0, 0, 0, 0.50)',
104-
'--sendbird-light-onlight-03': 'rgba(0, 0, 0, 0.38)',
105-
'--sendbird-light-onlight-04': 'rgba(0, 0, 0, 0.12)',
106-
107-
'--sendbird-light-ondark-01': 'rgba(255, 255, 255, 0.88)',
108-
'--sendbird-light-ondark-02': 'rgba(255, 255, 255, 0.50)',
109-
'--sendbird-light-ondark-03': 'rgba(255, 255, 255, 0.38)',
110-
'--sendbird-light-ondark-04': 'rgba(255, 255, 255, 0.12)',
111-
112-
'--sendbird-light-shadow-01': '0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12)',
113-
'--sendbird-light-shadow-02': '0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12)',
114-
'--sendbird-light-shadow-03': '0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12)',
115-
'--sendbird-light-shadow-04': '0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12)',
116-
117-
'--sendbird-light-shadow-message-input': '0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)',
118-
},
119-
...overrides,
120-
},
121-
});
119+
const variables = {
120+
...DEFAULT_COLOR_SET,
121+
...mapColorKeys(overrides),
122+
};
123+
cssVars({ variables });
122124
}
123125
}, [overrides]);
124126
};

‎src/lib/utils/__tests__/colorMapper.spec.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { mapColorKeys } from '../colorMapper';
2+
3+
const mockColorSet = {
4+
primary: {
5+
numeric: {
6+
'--sendbird-light-primary-500': '#00487c',
7+
'--sendbird-light-primary-400': '#4bb3fd',
8+
'--sendbird-light-primary-300': '#3e6680',
9+
'--sendbird-light-primary-200': '#0496ff',
10+
'--sendbird-light-primary-100': '#027bce',
11+
},
12+
descriptiveText: {
13+
'--sendbird-light-primary-extra-dark': '#00487c',
14+
'--sendbird-light-primary-dark': '#4bb3fd',
15+
'--sendbird-light-primary-main': '#3e6680',
16+
'--sendbird-light-primary-light': '#0496ff',
17+
'--sendbird-light-primary-extra-light': '#027bce',
18+
},
19+
},
20+
onlight: {
21+
numeric: {
22+
'--sendbird-dark-onlight-01': 'rgba(0, 0, 0, 0.88)',
23+
'--sendbird-dark-onlight-02': 'rgba(0, 0, 0, 0.50)',
24+
'--sendbird-dark-onlight-03': 'rgba(0, 0, 0, 0.38)',
25+
'--sendbird-dark-onlight-04': 'rgba(0, 0, 0, 0.12)',
26+
'--sendbird-light-onlight-01': 'rgba(0, 0, 0, 0.88)',
27+
'--sendbird-light-onlight-02': 'rgba(0, 0, 0, 0.50)',
28+
'--sendbird-light-onlight-03': 'rgba(0, 0, 0, 0.38)',
29+
'--sendbird-light-onlight-04': 'rgba(0, 0, 0, 0.12)',
30+
},
31+
descriptiveText: {
32+
'--sendbird-dark-onlight-text-high-emphasis': 'rgba(0, 0, 0, 0.88)',
33+
'--sendbird-dark-onlight-text-mid-emphasis': 'rgba(0, 0, 0, 0.50)',
34+
'--sendbird-dark-onlight-text-low-emphasis': 'rgba(0, 0, 0, 0.38)',
35+
'--sendbird-dark-onlight-text-disabled': 'rgba(0, 0, 0, 0.12)',
36+
'--sendbird-light-onlight-text-high-emphasis': 'rgba(0, 0, 0, 0.88)',
37+
'--sendbird-light-onlight-text-mid-emphasis': 'rgba(0, 0, 0, 0.50)',
38+
'--sendbird-light-onlight-text-low-emphasis': 'rgba(0, 0, 0, 0.38)',
39+
'--sendbird-light-onlight-text-disabled': 'rgba(0, 0, 0, 0.12)',
40+
},
41+
},
42+
ondark: {
43+
numeric: {
44+
'--sendbird-dark-ondark-01': 'rgba(255, 255, 255, 0.88)',
45+
'--sendbird-dark-ondark-02': 'rgba(255, 255, 255, 0.50)',
46+
'--sendbird-dark-ondark-03': 'rgba(255, 255, 255, 0.38)',
47+
'--sendbird-dark-ondark-04': 'rgba(255, 255, 255, 0.12)',
48+
'--sendbird-light-ondark-01': 'rgba(255, 255, 255, 0.88)',
49+
'--sendbird-light-ondark-02': 'rgba(255, 255, 255, 0.50)',
50+
'--sendbird-light-ondark-03': 'rgba(255, 255, 255, 0.38)',
51+
'--sendbird-light-ondark-04': 'rgba(255, 255, 255, 0.12)',
52+
},
53+
descriptiveText: {
54+
'--sendbird-dark-ondark-text-high-emphasis': 'rgba(255, 255, 255, 0.88)',
55+
'--sendbird-dark-ondark-text-mid-emphasis': 'rgba(255, 255, 255, 0.50)',
56+
'--sendbird-dark-ondark-text-low-emphasis': 'rgba(255, 255, 255, 0.38)',
57+
'--sendbird-dark-ondark-text-disabled': 'rgba(255, 255, 255, 0.12)',
58+
'--sendbird-light-ondark-text-high-emphasis': 'rgba(255, 255, 255, 0.88)',
59+
'--sendbird-light-ondark-text-mid-emphasis': 'rgba(255, 255, 255, 0.50)',
60+
'--sendbird-light-ondark-text-low-emphasis': 'rgba(255, 255, 255, 0.38)',
61+
'--sendbird-light-ondark-text-disabled': 'rgba(255, 255, 255, 0.12)',
62+
},
63+
},
64+
overlay: {
65+
numeric: {
66+
'--sendbird-dark-overlay-01': 'rgba(0, 0, 0, 0.55)',
67+
'--sendbird-dark-overlay-02': 'rgba(0, 0, 0, 0.32)',
68+
'--sendbird-light-overlay-01': 'rgba(0, 0, 0, 0.55)',
69+
'--sendbird-light-overlay-02': 'rgba(0, 0, 0, 0.32)',
70+
},
71+
descriptiveText: {
72+
'--sendbird-dark-overlay-dark': 'rgba(0, 0, 0, 0.55)',
73+
'--sendbird-dark-overlay-light': 'rgba(0, 0, 0, 0.32)',
74+
'--sendbird-light-overlay-dark': 'rgba(0, 0, 0, 0.55)',
75+
'--sendbird-light-overlay-light': 'rgba(0, 0, 0, 0.32)',
76+
},
77+
},
78+
};
79+
describe('mapColorKeys', () => {
80+
it('should convert multiple keys correctly', () => {
81+
const input = mockColorSet.primary.descriptiveText;
82+
const expected = mockColorSet.primary.numeric;
83+
expect(mapColorKeys(input)).toEqual(expected);
84+
});
85+
it('should not change keys without a match', () => {
86+
const input = {
87+
'--sendbird-light-primary-unknown': '#abcdef',
88+
};
89+
const expected = {
90+
'--sendbird-light-primary-unknown': '#abcdef',
91+
};
92+
expect(mapColorKeys(input)).toEqual(expected);
93+
});
94+
95+
it('should handle keys with multiple matching parts correctly', () => {
96+
const input = {
97+
'--sendbird-dark-primary-extra-light': '#654321',
98+
'--sendbird-dark-primary-light': '#abcdef',
99+
};
100+
const expected = {
101+
'--sendbird-dark-primary-100': '#654321',
102+
'--sendbird-dark-primary-200': '#abcdef',
103+
};
104+
expect(mapColorKeys(input)).toEqual(expected);
105+
});
106+
107+
it('should not convert the numeric format of keys but keep as-is', () => {
108+
expect(mapColorKeys(mockColorSet.primary.numeric)).toEqual(mockColorSet.primary.numeric);
109+
});
110+
111+
it('should convert correctly onLight / onDark / overlay to text-emphasis format', () => {
112+
expect(mapColorKeys(mockColorSet.onlight.descriptiveText)).toEqual(mockColorSet.onlight.numeric);
113+
expect(mapColorKeys(mockColorSet.ondark.descriptiveText)).toEqual(mockColorSet.ondark.numeric);
114+
expect(mapColorKeys(mockColorSet.overlay.descriptiveText)).toEqual(mockColorSet.overlay.numeric);
115+
});
116+
});

0 commit comments

Comments
 (0)