@indico-data/design-system 2.28.2 → 2.29.1
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/lib/index.css +115 -8
- package/lib/index.d.ts +4 -4
- package/lib/index.esm.css +115 -8
- package/lib/index.esm.js +1 -14
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1 -14
- package/lib/index.js.map +1 -1
- package/lib/src/components/pill/types.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/button/styles/Button.scss +3 -0
- package/src/components/card/styles/Card.scss +1 -0
- package/src/components/floatUI/styles/_variables.scss +2 -2
- package/src/components/forms/input/styles/Input.scss +1 -1
- package/src/components/pill/types.ts +1 -1
- package/src/legacy/styles/globals/typography.ts +1 -14
- package/src/styles/_borders.scss +10 -12
- package/src/styles/_colors.scss +10 -4
- package/src/styles/_sheets.scss +7 -0
- package/src/styles/globals.scss +74 -6
- package/src/styles/index.scss +1 -0
- package/src/styles/variables/_borders.scss +14 -1
- package/src/styles/variables/_typography.scss +12 -0
- package/src/styles/variables/themes/light.scss +2 -3
- package/src/stylesAndAnimations/borders/BorderColor.tsx +8 -0
- package/src/stylesAndAnimations/colors/Colors.tsx +4 -4
- package/src/stylesAndAnimations/colors/Swatch.tsx +28 -4
- package/src/stylesAndAnimations/colors/UtilityClasses.mdx +135 -2
- package/src/stylesAndAnimations/colors/UtilityClasses.tsx +139 -109
- package/src/stylesAndAnimations/colors/swatches.scss +0 -4
|
@@ -1,117 +1,147 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Row } from '../../components/grid/row/Row';
|
|
3
|
+
import { Col } from '../../components/grid/col/Col';
|
|
2
4
|
|
|
3
5
|
export const UtilityClasses = () => {
|
|
4
6
|
return (
|
|
5
7
|
<>
|
|
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
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
8
|
+
<Row>
|
|
9
|
+
<Col xs={12} className="my-5">
|
|
10
|
+
<h1 className="mb-5">Color Classes</h1>
|
|
11
|
+
<p>
|
|
12
|
+
The below code will apply the background color of the element to the primary color 100.
|
|
13
|
+
Omitting the number will default to 500. <strong>NOTE</strong> The background classes
|
|
14
|
+
here have no `color` style, it is added for documentation contrast
|
|
15
|
+
</p>
|
|
16
|
+
</Col>
|
|
17
|
+
<Col sm={12} md={6}>
|
|
18
|
+
<h1 className="mb-5">Backgrounds</h1>
|
|
19
|
+
<div className="bg-primary pa-2">
|
|
20
|
+
<span className="color-gray-100">bg-primary</span>
|
|
21
|
+
</div>
|
|
22
|
+
<div className="bg-primary-100 pa-2">bg-primary-100</div>
|
|
23
|
+
<div className="bg-primary-200 pa-2">bg-primary-200</div>
|
|
24
|
+
<div className="bg-primary-300 pa-2">bg-primary-300</div>
|
|
25
|
+
<div className="bg-primary-400 pa-2">bg-primary-400</div>
|
|
26
|
+
<div className="bg-primary-500 pa-2">bg-primary-500</div>
|
|
27
|
+
<div className="bg-primary-600 pa-2">
|
|
28
|
+
<span className="color-gray-10">bg-primary-600</span>
|
|
29
|
+
</div>
|
|
30
|
+
<div className="bg-primary-700 pa-2">
|
|
31
|
+
<span className="color-gray-100">bg-primary-700</span>
|
|
32
|
+
</div>
|
|
33
|
+
<div className="bg-primary-800 pa-2">
|
|
34
|
+
<span className="color-gray-100">bg-primary-800</span>
|
|
35
|
+
</div>
|
|
36
|
+
<div className="bg-primary-900 pa-2">
|
|
37
|
+
<span className="color-gray-100">bg-primary-900</span>
|
|
38
|
+
</div>
|
|
39
|
+
</Col>
|
|
40
|
+
<Col sm={12} md={6}>
|
|
41
|
+
<h1 className="mb-5">Text</h1>
|
|
42
|
+
<ul>
|
|
43
|
+
<li>
|
|
44
|
+
<span className="color-primary">color-primary</span>
|
|
45
|
+
</li>
|
|
46
|
+
<li>
|
|
47
|
+
<span className="color-primary-100">color-primary-100</span>
|
|
48
|
+
</li>
|
|
49
|
+
<li>
|
|
50
|
+
<span className="color-primary-200">color-primary-200</span>
|
|
51
|
+
</li>
|
|
52
|
+
<li>
|
|
53
|
+
<span className="color-primary-300">color-primary-300</span>
|
|
54
|
+
</li>
|
|
55
|
+
<li>
|
|
56
|
+
<span className="color-primary-400">color-primary-400</span>
|
|
57
|
+
</li>
|
|
58
|
+
<li>
|
|
59
|
+
<span className="color-primary-500">color-primary-500</span>
|
|
60
|
+
</li>
|
|
61
|
+
<li>
|
|
62
|
+
<span className="color-primary-600">color-primary-600</span>
|
|
63
|
+
</li>
|
|
64
|
+
<li>
|
|
65
|
+
<span className="color-primary-700">color-primary-700</span>
|
|
66
|
+
</li>
|
|
67
|
+
<li>
|
|
68
|
+
<span className="color-primary-800">color-primary-800</span>
|
|
69
|
+
</li>
|
|
70
|
+
<li>
|
|
71
|
+
<span className="color-primary-900">color-primary-900</span>
|
|
72
|
+
</li>
|
|
73
|
+
</ul>
|
|
74
|
+
</Col>
|
|
75
|
+
<Col className="my-5" xs={12}>
|
|
76
|
+
<hr />
|
|
77
|
+
<p>
|
|
78
|
+
The below code will apply the text color of the element to the primary color 100.
|
|
79
|
+
Omitting the number will default to 500.
|
|
80
|
+
</p>
|
|
81
|
+
</Col>
|
|
82
|
+
<Col sm={12} md={6}>
|
|
83
|
+
<h2 className="mb-5">Text Colors</h2>
|
|
84
|
+
<ul>
|
|
85
|
+
<li>
|
|
86
|
+
<span className="color-primary">primary</span>
|
|
87
|
+
</li>
|
|
88
|
+
<li>
|
|
89
|
+
<span className="color-secondary">secondary</span>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<span className="color-gray">gray</span>
|
|
93
|
+
</li>
|
|
94
|
+
<li>
|
|
95
|
+
<span className="color-steel">steel</span>
|
|
96
|
+
</li>
|
|
97
|
+
<li>
|
|
98
|
+
<span className="color-green">green</span>
|
|
99
|
+
</li>
|
|
100
|
+
<li>
|
|
101
|
+
<span className="color-orange">orange</span>
|
|
102
|
+
</li>
|
|
103
|
+
<li>
|
|
104
|
+
<span className="color-red">red</span>
|
|
105
|
+
</li>
|
|
106
|
+
</ul>
|
|
107
|
+
</Col>
|
|
108
|
+
<Col sm={12} md={6}>
|
|
109
|
+
<h2 className="mb-5">Utility Colors</h2>
|
|
110
|
+
<ul>
|
|
111
|
+
<li>
|
|
112
|
+
<span className="color-success">success</span>
|
|
113
|
+
</li>
|
|
114
|
+
<li>
|
|
115
|
+
<span className="color-info">info</span>
|
|
116
|
+
</li>
|
|
117
|
+
<li>
|
|
118
|
+
<span className="color-neutral">neutral</span>
|
|
119
|
+
</li>
|
|
120
|
+
<li>
|
|
121
|
+
<span className="color-warning">warning</span>
|
|
122
|
+
</li>
|
|
123
|
+
<li>
|
|
124
|
+
<span className="color-error">error</span>
|
|
125
|
+
</li>
|
|
126
|
+
<li>
|
|
127
|
+
<span className="active-link-color">active-link-color</span>
|
|
128
|
+
</li>
|
|
129
|
+
<li>
|
|
130
|
+
<span className="link-color">link-color</span>
|
|
131
|
+
</li>
|
|
132
|
+
</ul>
|
|
133
|
+
</Col>
|
|
134
|
+
<Col xs={12}>
|
|
135
|
+
<hr />
|
|
136
|
+
<h2 className="mb-5">Usage Example</h2>
|
|
137
|
+
<div className="bg-primary-200 pa-5">
|
|
138
|
+
<p className="color-primary-900">
|
|
139
|
+
This background color will be Background Primary Color 200 with text color of
|
|
140
|
+
color-primary-900
|
|
141
|
+
</p>
|
|
142
|
+
</div>
|
|
143
|
+
</Col>
|
|
144
|
+
</Row>
|
|
115
145
|
</>
|
|
116
146
|
);
|
|
117
147
|
};
|