/
color-semantic-tokens.js
84 lines (76 loc) · 2.64 KB
/
color-semantic-tokens.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/*
Copyright (c) 2018-2020 Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @flow
import type {
ColorTokensT,
CoreSemanticColorTokensT,
CoreExtensionSemanticColorTokensT,
SemanticColorTokensT,
} from '../types.js';
import colorTokens from './color-tokens.js';
import {hexToRgb as hexToRgba} from '../../styles/util.js';
import colors from '../../tokens/colors.js';
export default (
// themePrimitives or foundation colors
foundation: ColorTokensT = colorTokens,
): SemanticColorTokensT => {
const core: CoreSemanticColorTokensT = {
// Background
backgroundPrimary: foundation.primaryB,
backgroundSecondary: colors.gray800,
backgroundTertiary: colors.gray700,
backgroundInversePrimary: foundation.primaryA,
backgroundInverseSecondary: colors.gray300,
// Content
contentPrimary: foundation.primaryA,
contentSecondary: colors.gray400,
contentTertiary: colors.gray500,
contentInversePrimary: foundation.primaryB,
contentInverseSecondary: colors.gray600,
contentInverseTertiary: colors.gray500,
// Border
borderOpaque: colors.gray700,
borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
borderSelected: foundation.primaryA,
borderInverseOpaque: colors.gray400,
borderInverseTransparent: hexToRgba(foundation.primaryB, '0.2'),
borderInverseSelected: foundation.primaryB,
};
const coreExtensions: CoreExtensionSemanticColorTokensT = {
// Backgrounds
backgroundStateDisabled: colors.gray800,
backgroundOverlayDark: hexToRgba(colors.black, '0.3'),
backgroundOverlayLight: hexToRgba(colors.black, '0.08'),
backgroundAccent: foundation.accent,
backgroundNegative: foundation.negative,
backgroundWarning: foundation.warning,
backgroundPositive: foundation.positive,
backgroundLightAccent: colors.blue700,
backgroundLightPositive: colors.green700,
backgroundLightNegative: colors.red700,
backgroundLightWarning: colors.yellow700,
backgroundAlwaysDark: colors.gray900,
backgroundAlwaysLight: colors.gray100,
// Content
contentStateDisabled: colors.gray600,
contentAccent: colors.blue300,
contentOnColor: colors.gray100,
contentNegative: colors.red300,
contentWarning: colors.yellow300,
contentPositive: colors.green300,
// Border
borderStateDisabled: colors.gray800,
borderAccent: colors.blue400,
borderAccentLight: colors.blue500,
borderNegative: colors.red500,
borderWarning: colors.yellow500,
borderPositive: colors.green500,
};
return {
...core,
...coreExtensions,
};
};