@bcgov/design-tokens 2.0.0 → 3.0.0-pr462
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/README.md +65 -7
- package/cjs/index.d.ts +197 -0
- package/cjs/index.js +196 -0
- package/cjs-prefixed/index.d.ts +197 -0
- package/cjs-prefixed/index.js +196 -0
- package/css/variables.css +114 -121
- package/css-prefixed/variables.css +114 -121
- package/js/index.d.ts +197 -0
- package/js/index.js +194 -0
- package/js-prefixed/index.d.ts +197 -0
- package/js-prefixed/index.js +194 -0
- package/package.json +2 -3
- package/js/variables.js +0 -201
- package/js-prefixed/variables.js +0 -201
package/README.md
CHANGED
|
@@ -1,25 +1,83 @@
|
|
|
1
1
|
# @bcgov/design-tokens
|
|
2
2
|
|
|
3
|
-
This package
|
|
3
|
+
This package contains design tokens from the B.C. Design System.
|
|
4
4
|
|
|
5
|
-
Questions? Please email the <a href="mailto:
|
|
5
|
+
Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
|
|
6
6
|
|
|
7
7
|
See main repository: https://github.com/bcgov/design-system
|
|
8
8
|
|
|
9
9
|
To use, install this package (`npm i @bcgov/design-tokens`) and import the design tokens for your platform. Reference the design tokens according to your platform's needs.
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Included file formats
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
This package includes tokens in JavaScript (ECMAScript Module and CommonJS) and CSS formats.
|
|
14
|
+
|
|
15
|
+
### JavaScript (ECMAScript Module)
|
|
16
|
+
|
|
17
|
+
> **Try this first!** Using JavaScript variables can give you a better developer experience with autocomplete.
|
|
18
|
+
|
|
19
|
+
The `js` directory contains an index file with the tokens in ESM format: `js/index.js`
|
|
20
|
+
|
|
21
|
+
TypeScript definitions are includes at: `js/index.d.ts`
|
|
22
|
+
|
|
23
|
+
Example import:
|
|
24
|
+
|
|
25
|
+
`import * as tokens from "@bcgov/design-tokens/js";`
|
|
26
|
+
|
|
27
|
+
To help avoid name collisions, prefixed versions of the ESM variables with `bcds` added are available: `js-prefixed/index.js`
|
|
28
|
+
|
|
29
|
+
### JavaScript (CommonJS)
|
|
30
|
+
|
|
31
|
+
Some environments don't support ESM imports. For these situations, a CommonJS module is included.
|
|
32
|
+
|
|
33
|
+
The `cjs` directory contains an index file with tokens in CJS format: `cjs/index.js`
|
|
34
|
+
|
|
35
|
+
TypeScript definitions are included at: `cjs/index.d.ts`
|
|
36
|
+
|
|
37
|
+
Example import:
|
|
38
|
+
|
|
39
|
+
`const tokens = require("@bcgov/design-tokens/cjs");`
|
|
40
|
+
|
|
41
|
+
To help avoid name collisions, prefixed versions of the CJS variables with `bcds` added are available: `cjs-prefixed/index.js`
|
|
42
|
+
|
|
43
|
+
### CSS
|
|
44
|
+
|
|
45
|
+
CSS variables are included at: `css/variables.css`
|
|
46
|
+
|
|
47
|
+
To help avoid name collisions, prefixed versions of the CSS variables with `bcds` added are available: `css-prefixed/variables.css`
|
|
48
|
+
|
|
49
|
+
## Examples
|
|
50
|
+
|
|
51
|
+
### ESM variables in React:
|
|
52
|
+
|
|
53
|
+
```jsx
|
|
54
|
+
import * as tokens from "@bcgov/design-tokens/js";
|
|
55
|
+
|
|
56
|
+
function Button({ children, ...props }) {
|
|
57
|
+
return (
|
|
58
|
+
<button
|
|
59
|
+
style={{
|
|
60
|
+
backgroundColor: tokens.surfaceColorPrimaryButtonDefault,
|
|
61
|
+
color: tokens.typographyColorPrimaryInvert,
|
|
62
|
+
}}
|
|
63
|
+
>
|
|
64
|
+
{children}
|
|
65
|
+
</button>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### CSS variables in React:
|
|
71
|
+
|
|
72
|
+
```jsx
|
|
15
73
|
import "@bcgov/design-tokens/css/variables.css";
|
|
16
74
|
|
|
17
75
|
function Button({ children, ...props }) {
|
|
18
76
|
return (
|
|
19
77
|
<button
|
|
20
78
|
style={{
|
|
21
|
-
backgroundColor: "var(--
|
|
22
|
-
color: "var(--
|
|
79
|
+
backgroundColor: "var(--surface-color-primary-button-default)",
|
|
80
|
+
color: "var(--typography-color-primary-invert)",
|
|
23
81
|
}}
|
|
24
82
|
>
|
|
25
83
|
{children}
|
package/cjs/index.d.ts
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 20 Aug 2024 16:16:46 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const surfaceOpacity0 : number;
|
|
7
|
+
export const surfaceOpacity10 : number;
|
|
8
|
+
export const surfaceOpacity20 : number;
|
|
9
|
+
export const surfaceOpacity30 : number;
|
|
10
|
+
export const surfaceOpacity40 : number;
|
|
11
|
+
export const surfaceOpacity50 : number;
|
|
12
|
+
export const surfaceOpacity60 : number;
|
|
13
|
+
export const surfaceOpacity70 : number;
|
|
14
|
+
export const surfaceOpacity80 : number;
|
|
15
|
+
export const surfaceOpacity90 : number;
|
|
16
|
+
export const surfaceOpacity100 : number;
|
|
17
|
+
export const surfaceShadowNone : string;
|
|
18
|
+
/** Primarily used as a hover effect for cards */
|
|
19
|
+
export const surfaceShadowSmall : string;
|
|
20
|
+
/** Primarily used for dropdown menus and tooltips */
|
|
21
|
+
export const surfaceShadowMedium : string;
|
|
22
|
+
/** Primarily used for dialogs */
|
|
23
|
+
export const surfaceShadowLarge : string;
|
|
24
|
+
export const surfaceColorPrimaryButtonDefault : string;
|
|
25
|
+
export const surfaceColorPrimaryButtonHover : string;
|
|
26
|
+
export const surfaceColorPrimaryButtonDisabled : string;
|
|
27
|
+
export const surfaceColorPrimaryDangerButtonDefault : string;
|
|
28
|
+
export const surfaceColorPrimaryDangerButtonHover : string;
|
|
29
|
+
export const surfaceColorPrimaryDangerButtonDisabled : string;
|
|
30
|
+
export const surfaceColorSecondaryButtonDefault : string;
|
|
31
|
+
export const surfaceColorSecondaryButtonHover : string;
|
|
32
|
+
export const surfaceColorSecondaryButtonDisabled : string;
|
|
33
|
+
export const surfaceColorTertiaryButtonDefault : string;
|
|
34
|
+
export const surfaceColorTertiaryButtonHover : string;
|
|
35
|
+
export const surfaceColorTertiaryButtonDisabled : string;
|
|
36
|
+
export const surfaceColorMenusDefault : string;
|
|
37
|
+
export const surfaceColorMenusHover : string;
|
|
38
|
+
export const surfaceColorFormsDefault : string;
|
|
39
|
+
export const surfaceColorFormsDisabled : string;
|
|
40
|
+
export const surfaceColorBackgroundWhite : string;
|
|
41
|
+
export const surfaceColorBackgroundLightGray : string;
|
|
42
|
+
export const surfaceColorBackgroundLightBlue : string;
|
|
43
|
+
export const surfaceColorBackgroundDarkBlue : string;
|
|
44
|
+
export const surfaceColorBorderDefault : string;
|
|
45
|
+
export const surfaceColorBorderMedium : string;
|
|
46
|
+
export const surfaceColorBorderDark : string;
|
|
47
|
+
export const surfaceColorBorderActive : string;
|
|
48
|
+
export const surfaceColorOverlayDefault : string;
|
|
49
|
+
export const supportSurfaceColorInfo : string;
|
|
50
|
+
export const supportSurfaceColorDanger : string;
|
|
51
|
+
export const supportSurfaceColorSuccess : string;
|
|
52
|
+
export const supportSurfaceColorWarning : string;
|
|
53
|
+
export const supportBorderColorInfo : string;
|
|
54
|
+
export const supportBorderColorDanger : string;
|
|
55
|
+
export const supportBorderColorSuccess : string;
|
|
56
|
+
export const supportBorderColorWarning : string;
|
|
57
|
+
export const iconsSizeXsmall : string;
|
|
58
|
+
export const iconsSizeSmall : string;
|
|
59
|
+
export const iconsSizeMedium : string;
|
|
60
|
+
export const iconsSizeLarge : string;
|
|
61
|
+
export const iconsSizeXlarge : string;
|
|
62
|
+
export const iconsColorPrimary : string;
|
|
63
|
+
export const iconsColorSecondary : string;
|
|
64
|
+
export const iconsColorDisabled : string;
|
|
65
|
+
export const iconsColorLink : string;
|
|
66
|
+
export const iconsColorInfo : string;
|
|
67
|
+
export const iconsColorDanger : string;
|
|
68
|
+
export const iconsColorSuccess : string;
|
|
69
|
+
export const iconsColorWarning : string;
|
|
70
|
+
export const iconsColorPrimaryInvert : string;
|
|
71
|
+
export const layoutBorderWidthNone : string;
|
|
72
|
+
export const layoutBorderWidthSmall : string;
|
|
73
|
+
export const layoutBorderWidthMedium : string;
|
|
74
|
+
export const layoutBorderWidthLarge : string;
|
|
75
|
+
export const layoutPaddingNone : string;
|
|
76
|
+
export const layoutPaddingXsmall : string;
|
|
77
|
+
export const layoutPaddingSmall : string;
|
|
78
|
+
export const layoutPaddingMedium : string;
|
|
79
|
+
export const layoutPaddingLarge : string;
|
|
80
|
+
export const layoutPaddingXlarge : string;
|
|
81
|
+
export const layoutMarginNone : string;
|
|
82
|
+
export const layoutMarginHair : string;
|
|
83
|
+
export const layoutMarginXsmall : string;
|
|
84
|
+
export const layoutMarginSmall : string;
|
|
85
|
+
export const layoutMarginMedium : string;
|
|
86
|
+
export const layoutMarginLarge : string;
|
|
87
|
+
export const layoutMarginXlarge : string;
|
|
88
|
+
export const layoutMarginXxlarge : string;
|
|
89
|
+
export const layoutMarginXxxlarge : string;
|
|
90
|
+
export const layoutMarginHuge : string;
|
|
91
|
+
export const layoutBorderRadiusNone : string;
|
|
92
|
+
export const layoutBorderRadiusSmall : string;
|
|
93
|
+
export const layoutBorderRadiusMedium : string;
|
|
94
|
+
export const layoutBorderRadiusLarge : string;
|
|
95
|
+
export const typographyFontFamiliesBcSans : string;
|
|
96
|
+
export const typographyLineHeightsXxxdense : string;
|
|
97
|
+
export const typographyLineHeightsXxdense : string;
|
|
98
|
+
export const typographyLineHeightsXdense : string;
|
|
99
|
+
export const typographyLineHeightsDense : string;
|
|
100
|
+
export const typographyLineHeightsRegular : string;
|
|
101
|
+
export const typographyLineHeightsSparse : string;
|
|
102
|
+
export const typographyLineHeightsXsparse : string;
|
|
103
|
+
export const typographyLineHeightsXxsparse : string;
|
|
104
|
+
export const typographyLineHeightsAuto : string;
|
|
105
|
+
export const typographyFontWeightsRegular : number;
|
|
106
|
+
export const typographyFontWeightsBold : number;
|
|
107
|
+
export const typographyFontWeightsItalic : string;
|
|
108
|
+
export const typographyFontSizeLabel : string;
|
|
109
|
+
export const typographyFontSizeSmallBody : string;
|
|
110
|
+
export const typographyFontSizeBody : string;
|
|
111
|
+
export const typographyFontSizeLargeBody : string;
|
|
112
|
+
export const typographyFontSizeH5 : string;
|
|
113
|
+
export const typographyFontSizeH4 : string;
|
|
114
|
+
export const typographyFontSizeH3 : string;
|
|
115
|
+
export const typographyFontSizeH2 : string;
|
|
116
|
+
export const typographyFontSizeH1 : string;
|
|
117
|
+
export const typographyFontSizeDisplay : string;
|
|
118
|
+
export const typographyLetterSpacing0 : string;
|
|
119
|
+
export const typographyParagraphSpacing0 : string;
|
|
120
|
+
export const typographyRegularLabel : string;
|
|
121
|
+
export const typographyRegularSmallBody : string;
|
|
122
|
+
export const typographyRegularBody : string;
|
|
123
|
+
export const typographyRegularLargeBody : string;
|
|
124
|
+
export const typographyRegularH6 : string;
|
|
125
|
+
export const typographyRegularH5 : string;
|
|
126
|
+
export const typographyRegularH4 : string;
|
|
127
|
+
export const typographyRegularH3 : string;
|
|
128
|
+
export const typographyRegularH2 : string;
|
|
129
|
+
export const typographyRegularH1 : string;
|
|
130
|
+
export const typographyRegularDisplay : string;
|
|
131
|
+
export const typographyBoldLabel : string;
|
|
132
|
+
export const typographyBoldSmallBody : string;
|
|
133
|
+
export const typographyBoldBody : string;
|
|
134
|
+
export const typographyBoldLargeBody : string;
|
|
135
|
+
export const typographyBoldH6 : string;
|
|
136
|
+
export const typographyBoldH5 : string;
|
|
137
|
+
export const typographyBoldH4 : string;
|
|
138
|
+
export const typographyBoldH3 : string;
|
|
139
|
+
export const typographyBoldH2 : string;
|
|
140
|
+
export const typographyBoldH1 : string;
|
|
141
|
+
export const typographyBoldDisplay : string;
|
|
142
|
+
export const typographyItalicLabel : string;
|
|
143
|
+
export const typographyItalicSmallBody : string;
|
|
144
|
+
export const typographyItalicBody : string;
|
|
145
|
+
export const typographyItalicLargeBody : string;
|
|
146
|
+
export const typographyItalicH6 : string;
|
|
147
|
+
export const typographyItalicH5 : string;
|
|
148
|
+
export const typographyItalicH4 : string;
|
|
149
|
+
export const typographyItalicH3 : string;
|
|
150
|
+
export const typographyItalicH2 : string;
|
|
151
|
+
export const typographyItalicH1 : string;
|
|
152
|
+
export const typographyItalicDisplay : string;
|
|
153
|
+
export const typographyTextCaseNone : string;
|
|
154
|
+
export const typographyTextDecorationNone : string;
|
|
155
|
+
export const typographyParagraphIndent0 : string;
|
|
156
|
+
export const typographyColorPrimary : string;
|
|
157
|
+
export const typographyColorSecondary : string;
|
|
158
|
+
export const typographyColorPlaceholder : string;
|
|
159
|
+
export const typographyColorDisabled : string;
|
|
160
|
+
export const typographyColorLink : string;
|
|
161
|
+
export const typographyColorDanger : string;
|
|
162
|
+
export const typographyColorPrimaryInvert : string;
|
|
163
|
+
export const typographyColorSecondaryInvert : string;
|
|
164
|
+
export const themeGold10 : string;
|
|
165
|
+
export const themeGold20 : string;
|
|
166
|
+
export const themeGold30 : string;
|
|
167
|
+
export const themeGold40 : string;
|
|
168
|
+
export const themeGold50 : string;
|
|
169
|
+
export const themeGold60 : string;
|
|
170
|
+
export const themeGold70 : string;
|
|
171
|
+
export const themeGold80 : string;
|
|
172
|
+
export const themeGold90 : string;
|
|
173
|
+
export const themeGold100 : string;
|
|
174
|
+
export const themeBlue10 : string;
|
|
175
|
+
export const themeBlue20 : string;
|
|
176
|
+
export const themeBlue30 : string;
|
|
177
|
+
export const themeBlue40 : string;
|
|
178
|
+
export const themeBlue50 : string;
|
|
179
|
+
export const themeBlue60 : string;
|
|
180
|
+
export const themeBlue70 : string;
|
|
181
|
+
export const themeBlue80 : string;
|
|
182
|
+
export const themeBlue90 : string;
|
|
183
|
+
export const themeBlue100 : string;
|
|
184
|
+
export const themeGray10 : string;
|
|
185
|
+
export const themeGray20 : string;
|
|
186
|
+
export const themeGray30 : string;
|
|
187
|
+
export const themeGray40 : string;
|
|
188
|
+
export const themeGray50 : string;
|
|
189
|
+
export const themeGray60 : string;
|
|
190
|
+
export const themeGray70 : string;
|
|
191
|
+
export const themeGray80 : string;
|
|
192
|
+
export const themeGray90 : string;
|
|
193
|
+
export const themeGray100 : string;
|
|
194
|
+
export const themeGray110 : string;
|
|
195
|
+
export const themeGrayWhite : string;
|
|
196
|
+
export const themePrimaryBlue : string;
|
|
197
|
+
export const themePrimaryGold : string;
|
package/cjs/index.js
ADDED
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 20 Aug 2024 16:16:46 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
module.exports = {
|
|
7
|
+
"surfaceOpacity0": 0,
|
|
8
|
+
"surfaceOpacity10": 0.1,
|
|
9
|
+
"surfaceOpacity20": 0.2,
|
|
10
|
+
"surfaceOpacity30": 0.3,
|
|
11
|
+
"surfaceOpacity40": 0.4,
|
|
12
|
+
"surfaceOpacity50": 0.5,
|
|
13
|
+
"surfaceOpacity60": 0.6,
|
|
14
|
+
"surfaceOpacity70": 0.7,
|
|
15
|
+
"surfaceOpacity80": 0.8,
|
|
16
|
+
"surfaceOpacity90": 0.9,
|
|
17
|
+
"surfaceOpacity100": 1,
|
|
18
|
+
"surfaceShadowNone": "0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021",
|
|
19
|
+
"surfaceShadowSmall": "0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021",
|
|
20
|
+
"surfaceShadowMedium": "0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021",
|
|
21
|
+
"surfaceShadowLarge": "0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038",
|
|
22
|
+
"surfaceColorPrimaryButtonDefault": "#013366",
|
|
23
|
+
"surfaceColorPrimaryButtonHover": "#1E5189",
|
|
24
|
+
"surfaceColorPrimaryButtonDisabled": "#EDEBE9",
|
|
25
|
+
"surfaceColorPrimaryDangerButtonDefault": "#CE3E39",
|
|
26
|
+
"surfaceColorPrimaryDangerButtonHover": "#A2312D",
|
|
27
|
+
"surfaceColorPrimaryDangerButtonDisabled": "#EDEBE9",
|
|
28
|
+
"surfaceColorSecondaryButtonDefault": "#FFFFFF",
|
|
29
|
+
"surfaceColorSecondaryButtonHover": "#EDEBE9",
|
|
30
|
+
"surfaceColorSecondaryButtonDisabled": "#EDEBE9",
|
|
31
|
+
"surfaceColorTertiaryButtonDefault": "rgba(255,255,255,0)",
|
|
32
|
+
"surfaceColorTertiaryButtonHover": "#ECEAE8",
|
|
33
|
+
"surfaceColorTertiaryButtonDisabled": "#EDEBE9",
|
|
34
|
+
"surfaceColorMenusDefault": "#FFFFFF",
|
|
35
|
+
"surfaceColorMenusHover": "#EDEBE9",
|
|
36
|
+
"surfaceColorFormsDefault": "#FFFFFF",
|
|
37
|
+
"surfaceColorFormsDisabled": "#EDEBE9",
|
|
38
|
+
"surfaceColorBackgroundWhite": "#FFFFFF",
|
|
39
|
+
"surfaceColorBackgroundLightGray": "#FAF9F8",
|
|
40
|
+
"surfaceColorBackgroundLightBlue": "#F1F8FE",
|
|
41
|
+
"surfaceColorBackgroundDarkBlue": "#053662",
|
|
42
|
+
"surfaceColorBorderDefault": "#D8D8D8",
|
|
43
|
+
"surfaceColorBorderMedium": "#898785",
|
|
44
|
+
"surfaceColorBorderDark": "#353433",
|
|
45
|
+
"surfaceColorBorderActive": "#2E5DD7",
|
|
46
|
+
"surfaceColorOverlayDefault": "rgba(0,0,0,0.45)",
|
|
47
|
+
"supportSurfaceColorInfo": "#F7F9FC",
|
|
48
|
+
"supportSurfaceColorDanger": "#F4E1E2",
|
|
49
|
+
"supportSurfaceColorSuccess": "#F6FFF8",
|
|
50
|
+
"supportSurfaceColorWarning": "#FEF1D8",
|
|
51
|
+
"supportBorderColorInfo": "#053662",
|
|
52
|
+
"supportBorderColorDanger": "#CE3E39",
|
|
53
|
+
"supportBorderColorSuccess": "#42814A",
|
|
54
|
+
"supportBorderColorWarning": "#F8BB47",
|
|
55
|
+
"iconsSizeXsmall": "14px",
|
|
56
|
+
"iconsSizeSmall": "16px",
|
|
57
|
+
"iconsSizeMedium": "20px",
|
|
58
|
+
"iconsSizeLarge": "24px",
|
|
59
|
+
"iconsSizeXlarge": "32px",
|
|
60
|
+
"iconsColorPrimary": "#2D2D2D",
|
|
61
|
+
"iconsColorSecondary": "#474543",
|
|
62
|
+
"iconsColorDisabled": "#9F9D9C",
|
|
63
|
+
"iconsColorLink": "#255A90",
|
|
64
|
+
"iconsColorInfo": "#053662",
|
|
65
|
+
"iconsColorDanger": "#CE3E39",
|
|
66
|
+
"iconsColorSuccess": "#42814A",
|
|
67
|
+
"iconsColorWarning": "#F8BB47",
|
|
68
|
+
"iconsColorPrimaryInvert": "#FFFFFF",
|
|
69
|
+
"layoutBorderWidthNone": "0",
|
|
70
|
+
"layoutBorderWidthSmall": "1px",
|
|
71
|
+
"layoutBorderWidthMedium": "2px",
|
|
72
|
+
"layoutBorderWidthLarge": "4px",
|
|
73
|
+
"layoutPaddingNone": "0",
|
|
74
|
+
"layoutPaddingXsmall": "0.25rem",
|
|
75
|
+
"layoutPaddingSmall": "0.5rem",
|
|
76
|
+
"layoutPaddingMedium": "1rem",
|
|
77
|
+
"layoutPaddingLarge": "1.5rem",
|
|
78
|
+
"layoutPaddingXlarge": "2rem",
|
|
79
|
+
"layoutMarginNone": "0rem",
|
|
80
|
+
"layoutMarginHair": "0.125rem",
|
|
81
|
+
"layoutMarginXsmall": "0.25rem",
|
|
82
|
+
"layoutMarginSmall": "0.5rem",
|
|
83
|
+
"layoutMarginMedium": "1rem",
|
|
84
|
+
"layoutMarginLarge": "1.5rem",
|
|
85
|
+
"layoutMarginXlarge": "2rem",
|
|
86
|
+
"layoutMarginXxlarge": "2.5rem",
|
|
87
|
+
"layoutMarginXxxlarge": "3rem",
|
|
88
|
+
"layoutMarginHuge": "3.5rem",
|
|
89
|
+
"layoutBorderRadiusNone": "0",
|
|
90
|
+
"layoutBorderRadiusSmall": "2px",
|
|
91
|
+
"layoutBorderRadiusMedium": "4px",
|
|
92
|
+
"layoutBorderRadiusLarge": "6px",
|
|
93
|
+
"typographyFontFamiliesBcSans": "'BC Sans'",
|
|
94
|
+
"typographyLineHeightsXxxdense": "1.125rem",
|
|
95
|
+
"typographyLineHeightsXxdense": "1.313rem",
|
|
96
|
+
"typographyLineHeightsXdense": "1.688rem",
|
|
97
|
+
"typographyLineHeightsDense": "1.913rem",
|
|
98
|
+
"typographyLineHeightsRegular": "2.125rem",
|
|
99
|
+
"typographyLineHeightsSparse": "2.25rem",
|
|
100
|
+
"typographyLineHeightsXsparse": "3rem",
|
|
101
|
+
"typographyLineHeightsXxsparse": "3.375rem",
|
|
102
|
+
"typographyLineHeightsAuto": "AUTO",
|
|
103
|
+
"typographyFontWeightsRegular": 400,
|
|
104
|
+
"typographyFontWeightsBold": 700,
|
|
105
|
+
"typographyFontWeightsItalic": "Italic",
|
|
106
|
+
"typographyFontSizeLabel": "0.75rem",
|
|
107
|
+
"typographyFontSizeSmallBody": "0.875rem",
|
|
108
|
+
"typographyFontSizeBody": "1rem",
|
|
109
|
+
"typographyFontSizeLargeBody": "1.125rem",
|
|
110
|
+
"typographyFontSizeH5": "1.25rem",
|
|
111
|
+
"typographyFontSizeH4": "1.5rem",
|
|
112
|
+
"typographyFontSizeH3": "1.75rem",
|
|
113
|
+
"typographyFontSizeH2": "2rem",
|
|
114
|
+
"typographyFontSizeH1": "2.25rem",
|
|
115
|
+
"typographyFontSizeDisplay": "3rem",
|
|
116
|
+
"typographyLetterSpacing0": "0em",
|
|
117
|
+
"typographyParagraphSpacing0": "0",
|
|
118
|
+
"typographyRegularLabel": "400 0.75rem/1.125rem 'BC Sans'",
|
|
119
|
+
"typographyRegularSmallBody": "400 0.875rem/1.313rem 'BC Sans'",
|
|
120
|
+
"typographyRegularBody": "400 1rem/1.688rem 'BC Sans'",
|
|
121
|
+
"typographyRegularLargeBody": "400 1.125rem/1.913rem 'BC Sans'",
|
|
122
|
+
"typographyRegularH6": "400 1.125rem/1.913rem 'BC Sans'",
|
|
123
|
+
"typographyRegularH5": "400 1.25rem/2.125rem 'BC Sans'",
|
|
124
|
+
"typographyRegularH4": "400 1.5rem/2.25rem 'BC Sans'",
|
|
125
|
+
"typographyRegularH3": "400 1.75rem/3rem 'BC Sans'",
|
|
126
|
+
"typographyRegularH2": "400 2rem/3.375rem 'BC Sans'",
|
|
127
|
+
"typographyRegularH1": "400 2.25rem/3rem 'BC Sans'",
|
|
128
|
+
"typographyRegularDisplay": "400 3rem/AUTO 'BC Sans'",
|
|
129
|
+
"typographyBoldLabel": "700 0.75rem/1.125rem 'BC Sans'",
|
|
130
|
+
"typographyBoldSmallBody": "700 0.875rem/1.313rem 'BC Sans'",
|
|
131
|
+
"typographyBoldBody": "700 1rem/1.688rem 'BC Sans'",
|
|
132
|
+
"typographyBoldLargeBody": "700 1.125rem/1.913rem 'BC Sans'",
|
|
133
|
+
"typographyBoldH6": "700 1.125rem/1.913rem 'BC Sans'",
|
|
134
|
+
"typographyBoldH5": "700 1.25rem/2.125rem 'BC Sans'",
|
|
135
|
+
"typographyBoldH4": "700 1.5rem/2.25rem 'BC Sans'",
|
|
136
|
+
"typographyBoldH3": "700 1.75rem/3rem 'BC Sans'",
|
|
137
|
+
"typographyBoldH2": "700 2rem/3rem 'BC Sans'",
|
|
138
|
+
"typographyBoldH1": "700 2.25rem/3.375rem 'BC Sans'",
|
|
139
|
+
"typographyBoldDisplay": "700 3rem/AUTO 'BC Sans'",
|
|
140
|
+
"typographyItalicLabel": "400 italic 0.75rem/1.125rem 'BC Sans'",
|
|
141
|
+
"typographyItalicSmallBody": "400 italic 0.875rem/1.313rem 'BC Sans'",
|
|
142
|
+
"typographyItalicBody": "400 italic 1rem/1.688rem 'BC Sans'",
|
|
143
|
+
"typographyItalicLargeBody": "400 italic 1.125rem/1.913rem 'BC Sans'",
|
|
144
|
+
"typographyItalicH6": "400 italic 1.125rem/1.913rem 'BC Sans'",
|
|
145
|
+
"typographyItalicH5": "400 italic 1.25rem/2.125rem 'BC Sans'",
|
|
146
|
+
"typographyItalicH4": "400 italic 1.5rem/2.25rem 'BC Sans'",
|
|
147
|
+
"typographyItalicH3": "400 italic 1.75rem/3.375rem 'BC Sans'",
|
|
148
|
+
"typographyItalicH2": "400 italic 2rem/3rem 'BC Sans'",
|
|
149
|
+
"typographyItalicH1": "400 italic 2.25rem/3.375rem 'BC Sans'",
|
|
150
|
+
"typographyItalicDisplay": "400 italic 3rem/AUTO 'BC Sans'",
|
|
151
|
+
"typographyTextCaseNone": "none",
|
|
152
|
+
"typographyTextDecorationNone": "none",
|
|
153
|
+
"typographyParagraphIndent0": "0px",
|
|
154
|
+
"typographyColorPrimary": "#2D2D2D",
|
|
155
|
+
"typographyColorSecondary": "#474543",
|
|
156
|
+
"typographyColorPlaceholder": "#9F9D9C",
|
|
157
|
+
"typographyColorDisabled": "#9F9D9C",
|
|
158
|
+
"typographyColorLink": "#255A90",
|
|
159
|
+
"typographyColorDanger": "#CE3E39",
|
|
160
|
+
"typographyColorPrimaryInvert": "#FFFFFF",
|
|
161
|
+
"typographyColorSecondaryInvert": "#ECEAE8",
|
|
162
|
+
"themeGold10": "#FEF8E8",
|
|
163
|
+
"themeGold20": "#FEF0D8",
|
|
164
|
+
"themeGold30": "#FDE9C4",
|
|
165
|
+
"themeGold40": "#FCE2B0",
|
|
166
|
+
"themeGold50": "#FBDA9D",
|
|
167
|
+
"themeGold60": "#FBD389",
|
|
168
|
+
"themeGold70": "#FACC75",
|
|
169
|
+
"themeGold80": "#F9C462",
|
|
170
|
+
"themeGold90": "#F8BA47",
|
|
171
|
+
"themeGold100": "#FCBA19",
|
|
172
|
+
"themeBlue10": "#F1F8FE",
|
|
173
|
+
"themeBlue20": "#D8EAFD",
|
|
174
|
+
"themeBlue30": "#C1DDFC",
|
|
175
|
+
"themeBlue40": "#A8D0FB",
|
|
176
|
+
"themeBlue50": "#91C4FA",
|
|
177
|
+
"themeBlue60": "#7AB8F9",
|
|
178
|
+
"themeBlue70": "#5595D9",
|
|
179
|
+
"themeBlue80": "#3470B1",
|
|
180
|
+
"themeBlue90": "#1E5189",
|
|
181
|
+
"themeBlue100": "#013366",
|
|
182
|
+
"themeGray10": "#FAF9F8",
|
|
183
|
+
"themeGray20": "#F3F2F1",
|
|
184
|
+
"themeGray30": "#ECEAE8",
|
|
185
|
+
"themeGray40": "#E0DEDC",
|
|
186
|
+
"themeGray50": "#D1CFCD",
|
|
187
|
+
"themeGray60": "#C6C5C3",
|
|
188
|
+
"themeGray70": "#9F9D9C",
|
|
189
|
+
"themeGray80": "#605E5C",
|
|
190
|
+
"themeGray90": "#3D3C3B",
|
|
191
|
+
"themeGray100": "#353433",
|
|
192
|
+
"themeGray110": "#252423",
|
|
193
|
+
"themeGrayWhite": "#FFFFFF",
|
|
194
|
+
"themePrimaryBlue": "#013366",
|
|
195
|
+
"themePrimaryGold": "#FCBA19"
|
|
196
|
+
};
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 20 Aug 2024 16:16:46 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export const bcdsSurfaceOpacity0 : number;
|
|
7
|
+
export const bcdsSurfaceOpacity10 : number;
|
|
8
|
+
export const bcdsSurfaceOpacity20 : number;
|
|
9
|
+
export const bcdsSurfaceOpacity30 : number;
|
|
10
|
+
export const bcdsSurfaceOpacity40 : number;
|
|
11
|
+
export const bcdsSurfaceOpacity50 : number;
|
|
12
|
+
export const bcdsSurfaceOpacity60 : number;
|
|
13
|
+
export const bcdsSurfaceOpacity70 : number;
|
|
14
|
+
export const bcdsSurfaceOpacity80 : number;
|
|
15
|
+
export const bcdsSurfaceOpacity90 : number;
|
|
16
|
+
export const bcdsSurfaceOpacity100 : number;
|
|
17
|
+
export const bcdsSurfaceShadowNone : string;
|
|
18
|
+
/** Primarily used as a hover effect for cards */
|
|
19
|
+
export const bcdsSurfaceShadowSmall : string;
|
|
20
|
+
/** Primarily used for dropdown menus and tooltips */
|
|
21
|
+
export const bcdsSurfaceShadowMedium : string;
|
|
22
|
+
/** Primarily used for dialogs */
|
|
23
|
+
export const bcdsSurfaceShadowLarge : string;
|
|
24
|
+
export const bcdsSurfaceColorPrimaryButtonDefault : string;
|
|
25
|
+
export const bcdsSurfaceColorPrimaryButtonHover : string;
|
|
26
|
+
export const bcdsSurfaceColorPrimaryButtonDisabled : string;
|
|
27
|
+
export const bcdsSurfaceColorPrimaryDangerButtonDefault : string;
|
|
28
|
+
export const bcdsSurfaceColorPrimaryDangerButtonHover : string;
|
|
29
|
+
export const bcdsSurfaceColorPrimaryDangerButtonDisabled : string;
|
|
30
|
+
export const bcdsSurfaceColorSecondaryButtonDefault : string;
|
|
31
|
+
export const bcdsSurfaceColorSecondaryButtonHover : string;
|
|
32
|
+
export const bcdsSurfaceColorSecondaryButtonDisabled : string;
|
|
33
|
+
export const bcdsSurfaceColorTertiaryButtonDefault : string;
|
|
34
|
+
export const bcdsSurfaceColorTertiaryButtonHover : string;
|
|
35
|
+
export const bcdsSurfaceColorTertiaryButtonDisabled : string;
|
|
36
|
+
export const bcdsSurfaceColorMenusDefault : string;
|
|
37
|
+
export const bcdsSurfaceColorMenusHover : string;
|
|
38
|
+
export const bcdsSurfaceColorFormsDefault : string;
|
|
39
|
+
export const bcdsSurfaceColorFormsDisabled : string;
|
|
40
|
+
export const bcdsSurfaceColorBackgroundWhite : string;
|
|
41
|
+
export const bcdsSurfaceColorBackgroundLightGray : string;
|
|
42
|
+
export const bcdsSurfaceColorBackgroundLightBlue : string;
|
|
43
|
+
export const bcdsSurfaceColorBackgroundDarkBlue : string;
|
|
44
|
+
export const bcdsSurfaceColorBorderDefault : string;
|
|
45
|
+
export const bcdsSurfaceColorBorderMedium : string;
|
|
46
|
+
export const bcdsSurfaceColorBorderDark : string;
|
|
47
|
+
export const bcdsSurfaceColorBorderActive : string;
|
|
48
|
+
export const bcdsSurfaceColorOverlayDefault : string;
|
|
49
|
+
export const bcdsSupportSurfaceColorInfo : string;
|
|
50
|
+
export const bcdsSupportSurfaceColorDanger : string;
|
|
51
|
+
export const bcdsSupportSurfaceColorSuccess : string;
|
|
52
|
+
export const bcdsSupportSurfaceColorWarning : string;
|
|
53
|
+
export const bcdsSupportBorderColorInfo : string;
|
|
54
|
+
export const bcdsSupportBorderColorDanger : string;
|
|
55
|
+
export const bcdsSupportBorderColorSuccess : string;
|
|
56
|
+
export const bcdsSupportBorderColorWarning : string;
|
|
57
|
+
export const bcdsIconsSizeXsmall : string;
|
|
58
|
+
export const bcdsIconsSizeSmall : string;
|
|
59
|
+
export const bcdsIconsSizeMedium : string;
|
|
60
|
+
export const bcdsIconsSizeLarge : string;
|
|
61
|
+
export const bcdsIconsSizeXlarge : string;
|
|
62
|
+
export const bcdsIconsColorPrimary : string;
|
|
63
|
+
export const bcdsIconsColorSecondary : string;
|
|
64
|
+
export const bcdsIconsColorDisabled : string;
|
|
65
|
+
export const bcdsIconsColorLink : string;
|
|
66
|
+
export const bcdsIconsColorInfo : string;
|
|
67
|
+
export const bcdsIconsColorDanger : string;
|
|
68
|
+
export const bcdsIconsColorSuccess : string;
|
|
69
|
+
export const bcdsIconsColorWarning : string;
|
|
70
|
+
export const bcdsIconsColorPrimaryInvert : string;
|
|
71
|
+
export const bcdsLayoutBorderWidthNone : string;
|
|
72
|
+
export const bcdsLayoutBorderWidthSmall : string;
|
|
73
|
+
export const bcdsLayoutBorderWidthMedium : string;
|
|
74
|
+
export const bcdsLayoutBorderWidthLarge : string;
|
|
75
|
+
export const bcdsLayoutPaddingNone : string;
|
|
76
|
+
export const bcdsLayoutPaddingXsmall : string;
|
|
77
|
+
export const bcdsLayoutPaddingSmall : string;
|
|
78
|
+
export const bcdsLayoutPaddingMedium : string;
|
|
79
|
+
export const bcdsLayoutPaddingLarge : string;
|
|
80
|
+
export const bcdsLayoutPaddingXlarge : string;
|
|
81
|
+
export const bcdsLayoutMarginNone : string;
|
|
82
|
+
export const bcdsLayoutMarginHair : string;
|
|
83
|
+
export const bcdsLayoutMarginXsmall : string;
|
|
84
|
+
export const bcdsLayoutMarginSmall : string;
|
|
85
|
+
export const bcdsLayoutMarginMedium : string;
|
|
86
|
+
export const bcdsLayoutMarginLarge : string;
|
|
87
|
+
export const bcdsLayoutMarginXlarge : string;
|
|
88
|
+
export const bcdsLayoutMarginXxlarge : string;
|
|
89
|
+
export const bcdsLayoutMarginXxxlarge : string;
|
|
90
|
+
export const bcdsLayoutMarginHuge : string;
|
|
91
|
+
export const bcdsLayoutBorderRadiusNone : string;
|
|
92
|
+
export const bcdsLayoutBorderRadiusSmall : string;
|
|
93
|
+
export const bcdsLayoutBorderRadiusMedium : string;
|
|
94
|
+
export const bcdsLayoutBorderRadiusLarge : string;
|
|
95
|
+
export const bcdsTypographyFontFamiliesBcSans : string;
|
|
96
|
+
export const bcdsTypographyLineHeightsXxxdense : string;
|
|
97
|
+
export const bcdsTypographyLineHeightsXxdense : string;
|
|
98
|
+
export const bcdsTypographyLineHeightsXdense : string;
|
|
99
|
+
export const bcdsTypographyLineHeightsDense : string;
|
|
100
|
+
export const bcdsTypographyLineHeightsRegular : string;
|
|
101
|
+
export const bcdsTypographyLineHeightsSparse : string;
|
|
102
|
+
export const bcdsTypographyLineHeightsXsparse : string;
|
|
103
|
+
export const bcdsTypographyLineHeightsXxsparse : string;
|
|
104
|
+
export const bcdsTypographyLineHeightsAuto : string;
|
|
105
|
+
export const bcdsTypographyFontWeightsRegular : number;
|
|
106
|
+
export const bcdsTypographyFontWeightsBold : number;
|
|
107
|
+
export const bcdsTypographyFontWeightsItalic : string;
|
|
108
|
+
export const bcdsTypographyFontSizeLabel : string;
|
|
109
|
+
export const bcdsTypographyFontSizeSmallBody : string;
|
|
110
|
+
export const bcdsTypographyFontSizeBody : string;
|
|
111
|
+
export const bcdsTypographyFontSizeLargeBody : string;
|
|
112
|
+
export const bcdsTypographyFontSizeH5 : string;
|
|
113
|
+
export const bcdsTypographyFontSizeH4 : string;
|
|
114
|
+
export const bcdsTypographyFontSizeH3 : string;
|
|
115
|
+
export const bcdsTypographyFontSizeH2 : string;
|
|
116
|
+
export const bcdsTypographyFontSizeH1 : string;
|
|
117
|
+
export const bcdsTypographyFontSizeDisplay : string;
|
|
118
|
+
export const bcdsTypographyLetterSpacing0 : string;
|
|
119
|
+
export const bcdsTypographyParagraphSpacing0 : string;
|
|
120
|
+
export const bcdsTypographyRegularLabel : string;
|
|
121
|
+
export const bcdsTypographyRegularSmallBody : string;
|
|
122
|
+
export const bcdsTypographyRegularBody : string;
|
|
123
|
+
export const bcdsTypographyRegularLargeBody : string;
|
|
124
|
+
export const bcdsTypographyRegularH6 : string;
|
|
125
|
+
export const bcdsTypographyRegularH5 : string;
|
|
126
|
+
export const bcdsTypographyRegularH4 : string;
|
|
127
|
+
export const bcdsTypographyRegularH3 : string;
|
|
128
|
+
export const bcdsTypographyRegularH2 : string;
|
|
129
|
+
export const bcdsTypographyRegularH1 : string;
|
|
130
|
+
export const bcdsTypographyRegularDisplay : string;
|
|
131
|
+
export const bcdsTypographyBoldLabel : string;
|
|
132
|
+
export const bcdsTypographyBoldSmallBody : string;
|
|
133
|
+
export const bcdsTypographyBoldBody : string;
|
|
134
|
+
export const bcdsTypographyBoldLargeBody : string;
|
|
135
|
+
export const bcdsTypographyBoldH6 : string;
|
|
136
|
+
export const bcdsTypographyBoldH5 : string;
|
|
137
|
+
export const bcdsTypographyBoldH4 : string;
|
|
138
|
+
export const bcdsTypographyBoldH3 : string;
|
|
139
|
+
export const bcdsTypographyBoldH2 : string;
|
|
140
|
+
export const bcdsTypographyBoldH1 : string;
|
|
141
|
+
export const bcdsTypographyBoldDisplay : string;
|
|
142
|
+
export const bcdsTypographyItalicLabel : string;
|
|
143
|
+
export const bcdsTypographyItalicSmallBody : string;
|
|
144
|
+
export const bcdsTypographyItalicBody : string;
|
|
145
|
+
export const bcdsTypographyItalicLargeBody : string;
|
|
146
|
+
export const bcdsTypographyItalicH6 : string;
|
|
147
|
+
export const bcdsTypographyItalicH5 : string;
|
|
148
|
+
export const bcdsTypographyItalicH4 : string;
|
|
149
|
+
export const bcdsTypographyItalicH3 : string;
|
|
150
|
+
export const bcdsTypographyItalicH2 : string;
|
|
151
|
+
export const bcdsTypographyItalicH1 : string;
|
|
152
|
+
export const bcdsTypographyItalicDisplay : string;
|
|
153
|
+
export const bcdsTypographyTextCaseNone : string;
|
|
154
|
+
export const bcdsTypographyTextDecorationNone : string;
|
|
155
|
+
export const bcdsTypographyParagraphIndent0 : string;
|
|
156
|
+
export const bcdsTypographyColorPrimary : string;
|
|
157
|
+
export const bcdsTypographyColorSecondary : string;
|
|
158
|
+
export const bcdsTypographyColorPlaceholder : string;
|
|
159
|
+
export const bcdsTypographyColorDisabled : string;
|
|
160
|
+
export const bcdsTypographyColorLink : string;
|
|
161
|
+
export const bcdsTypographyColorDanger : string;
|
|
162
|
+
export const bcdsTypographyColorPrimaryInvert : string;
|
|
163
|
+
export const bcdsTypographyColorSecondaryInvert : string;
|
|
164
|
+
export const bcdsThemeGold10 : string;
|
|
165
|
+
export const bcdsThemeGold20 : string;
|
|
166
|
+
export const bcdsThemeGold30 : string;
|
|
167
|
+
export const bcdsThemeGold40 : string;
|
|
168
|
+
export const bcdsThemeGold50 : string;
|
|
169
|
+
export const bcdsThemeGold60 : string;
|
|
170
|
+
export const bcdsThemeGold70 : string;
|
|
171
|
+
export const bcdsThemeGold80 : string;
|
|
172
|
+
export const bcdsThemeGold90 : string;
|
|
173
|
+
export const bcdsThemeGold100 : string;
|
|
174
|
+
export const bcdsThemeBlue10 : string;
|
|
175
|
+
export const bcdsThemeBlue20 : string;
|
|
176
|
+
export const bcdsThemeBlue30 : string;
|
|
177
|
+
export const bcdsThemeBlue40 : string;
|
|
178
|
+
export const bcdsThemeBlue50 : string;
|
|
179
|
+
export const bcdsThemeBlue60 : string;
|
|
180
|
+
export const bcdsThemeBlue70 : string;
|
|
181
|
+
export const bcdsThemeBlue80 : string;
|
|
182
|
+
export const bcdsThemeBlue90 : string;
|
|
183
|
+
export const bcdsThemeBlue100 : string;
|
|
184
|
+
export const bcdsThemeGray10 : string;
|
|
185
|
+
export const bcdsThemeGray20 : string;
|
|
186
|
+
export const bcdsThemeGray30 : string;
|
|
187
|
+
export const bcdsThemeGray40 : string;
|
|
188
|
+
export const bcdsThemeGray50 : string;
|
|
189
|
+
export const bcdsThemeGray60 : string;
|
|
190
|
+
export const bcdsThemeGray70 : string;
|
|
191
|
+
export const bcdsThemeGray80 : string;
|
|
192
|
+
export const bcdsThemeGray90 : string;
|
|
193
|
+
export const bcdsThemeGray100 : string;
|
|
194
|
+
export const bcdsThemeGray110 : string;
|
|
195
|
+
export const bcdsThemeGrayWhite : string;
|
|
196
|
+
export const bcdsThemePrimaryBlue : string;
|
|
197
|
+
export const bcdsThemePrimaryGold : string;
|