@drivy/cobalt 0.29.2 → 0.30.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.
Files changed (33) hide show
  1. package/cjs/tokens/theme.js +1 -1
  2. package/components/Card/index.js +3 -2
  3. package/components/Card/index.js.map +1 -1
  4. package/components/Flash/index.js +4 -4
  5. package/components/Flash/index.js.map +1 -1
  6. package/components/Form/Autocomplete/index.js +1 -1
  7. package/components/Form/Autocomplete/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/styles/components/Alerter/index.scss +2 -4
  10. package/styles/components/BulletList/index.scss +1 -2
  11. package/styles/components/Buttons/index.scss +0 -1
  12. package/styles/components/Calendar/CalendarRangePicker/index.scss +13 -18
  13. package/styles/components/Calendar/CalendarView/index.scss +6 -8
  14. package/styles/components/Card/index.scss +16 -6
  15. package/styles/components/Flash/index.scss +2 -4
  16. package/styles/components/Form/Autocomplete/index.scss +10 -21
  17. package/styles/components/Form/CheckablePill.scss +1 -2
  18. package/styles/components/Form/Checkmark.scss +1 -5
  19. package/styles/components/Form/Hint.scss +0 -9
  20. package/styles/components/Form/RadioWithDetails.scss +2 -2
  21. package/styles/components/Helper/index.scss +0 -3
  22. package/styles/components/Icon/index.scss +1 -2
  23. package/styles/components/Note/index.scss +4 -0
  24. package/styles/components/PhotoDropzone/index.scss +1 -2
  25. package/styles/components/TabBar/index.scss +1 -1
  26. package/styles/components/Tag/index.scss +2 -4
  27. package/styles/core/_colors-map.scss +164 -164
  28. package/styles/core/text.scss +37 -19
  29. package/styles/core/theme.scss +160 -160
  30. package/styles/core/typography.scss +12 -12
  31. package/tokens/theme.js +1 -1
  32. package/types/components/Card/index.d.ts +3 -1
  33. package/utilities.css +325 -295
package/styles/core/theme.scss CHANGED
@@ -3,164 +3,164 @@
3
3
  /*** DO NOT MODIFY IT DIRECTLY ****/
4
4
  /**********************************/
5
5
  :root {
6
- --c-background-primary: var(--c-l-grey-lighter);
7
- --c-background-secondary: var(--c-l-white);
8
- --c-background-secondaryInteractive: var(--c-l-white);
9
- --c-background-secondaryInteractive--hover: var(--c-l-grey-lighter);
10
- --c-background-accent: var(--c-l-purple);
11
- --c-background-accentInteractive: var(--c-l-purple);
12
- --c-background-accentInteractive--hover: var(--c-l-purple);
13
- --c-background-accentAlt: var(--c-l-indigo);
14
- --c-background-accentAltInteractive: var(--c-l-indigo);
15
- --c-background-accentAltInteractive--hover: var(--c-l-indigo);
16
- --c-background-info: var(--c-l-grey-lighter);
17
- --c-background-error: var(--c-l-red);
18
- --c-background-errorInteractive: var(--c-l-red);
19
- --c-background-errorInteractive--hover: var(--c-l-red);
20
- --c-background-errorAlt: var(--c-l-graphite);
21
- --c-background-success: var(--c-l-green);
22
- --c-background-successAlt: var(--c-l-graphite);
23
- --c-background-connect: var(--c-l-turquoise);
24
- --c-background-connectInteractive: var(--c-l-turquoise);
25
- --c-background-connectInteractive--hover: var(--c-l-turquoise);
26
- --c-background-connectAlt: var(--c-l-grey-light);
27
- --c-background-driver: var(--c-l-deprecatedDriver);
28
- --c-background-owner: var(--c-l-indigo-dark);
29
- --c-background-disabled: var(--c-l-grey-light);
30
- --c-background-neutral: var(--c-l-grey-light);
31
- --c-background-neutralAlt: var(--c-l-grey-lighter);
32
- --c-background-seasonLow: var(--c-l-deprecatedSeasonLow);
33
- --c-background-seasonMedium: var(--c-l-deprecatedSeasonMedium);
34
- --c-background-seasonHigh: var(--c-l-deprecatedSeasonHigh);
35
- --c-background-seasonVeryHigh: var(--c-l-deprecatedSeasonVeryHigh);
36
- --c-text-base: var(--c-l-graphite);
37
- --c-text-baseInteractive: var(--c-l-graphite);
38
- --c-text-baseInteractive--hover: var(--c-l-graphite);
39
- --c-text-subdued: var(--c-l-graphite-light);
40
- --c-text-subduedInteractive: var(--c-l-graphite-light);
41
- --c-text-subduedInteractive--hover: var(--c-l-graphite);
42
- --c-text-accent: var(--c-l-purple);
43
- --c-text-accentInteractive: var(--c-l-blue);
44
- --c-text-accentInteractive--hover: var(--c-l-blue);
45
- --c-text-accentAlt: var(--c-l-white);
46
- --c-text-accentAltInteractive: var(--c-l-white);
47
- --c-text-accentAltInteractive--hover: var(--c-l-white);
48
- --c-text-info: var(--c-l-graphite-light);
49
- --c-text-infoAlt: var(--c-l-turquoise);
50
- --c-text-error: var(--c-l-red);
51
- --c-text-errorAlt: var(--c-l-white);
52
- --c-text-success: var(--c-l-green);
53
- --c-text-successAlt: var(--c-l-white);
54
- --c-text-warning: var(--c-l-coral);
55
- --c-text-connect: var(--c-l-turquoise);
56
- --c-text-driver: var(--c-l-graphite);
57
- --c-text-owner: var(--c-l-white);
58
- --c-text-inversed: var(--c-l-white);
59
- --c-buttonBackground-selected: var(--c-l-indigo);
60
- --c-buttonBackground-destructiveInteractive: var(--c-l-red);
61
- --c-buttonBackground-destructiveInteractive--hover: var(--c-l-red);
62
- --c-buttonBackground-destructiveInteractive--press: var(--c-l-red);
63
- --c-buttonBackground-disabled: var(--c-l-grey-lighter);
64
- --c-buttonBackground-primaryInteractive: var(--c-l-purple);
65
- --c-buttonBackground-primaryInteractive--hover: var(--c-l-indigo);
66
- --c-buttonBackground-primaryInteractive--press: var(--c-l-indigo-dark);
67
- --c-buttonBackground-secondaryInteractive: var(--c-l-white);
68
- --c-buttonBackground-secondaryInteractive--hover: var(--c-l-white);
69
- --c-buttonBackground-secondaryInteractive--press: var(--c-l-white);
70
- --c-buttonBackground-success: var(--c-l-green);
71
- --c-buttonBackground-successAltInteractive: var(--c-l-green);
72
- --c-buttonBackground-successAltInteractive--hover: var(--c-l-green);
73
- --c-buttonBackground-successAltInteractive--press: var(--c-l-green);
74
- --c-buttonBackground-tertiaryInteractive: var(--c-l-white);
75
- --c-buttonBackground-tertiaryInteractive--hover: var(--c-l-white);
76
- --c-buttonBackground-tertiaryInteractive--press: var(--c-l-white);
77
- --c-buttonIcon-selected: var(--c-l-white);
78
- --c-buttonIcon-destructiveInteractive: var(--c-l-red);
79
- --c-buttonIcon-destructiveInteractive--hover: var(--c-l-red);
80
- --c-buttonIcon-destructiveInteractive--press: var(--c-l-red);
81
- --c-buttonIcon-disabled: var(--c-l-graphite-light);
82
- --c-buttonIcon-primaryInteractive: var(--c-l-white);
83
- --c-buttonIcon-primaryInteractive--hover: var(--c-l-white);
84
- --c-buttonIcon-primaryInteractive--press: var(--c-l-white);
85
- --c-buttonIcon-secondaryInteractive: var(--c-l-indigo);
86
- --c-buttonIcon-secondaryInteractive--hover: var(--c-l-indigo);
87
- --c-buttonIcon-secondaryInteractive--press: var(--c-l-indigo-dark);
88
- --c-buttonIcon-success: var(--c-l-white);
89
- --c-buttonIcon-successAltInteractive: var(--c-l-white);
90
- --c-buttonIcon-successAltInteractive--hover: var(--c-l-white);
91
- --c-buttonIcon-successAltInteractive--press: var(--c-l-white);
92
- --c-buttonIcon-tertiaryInteractive: var(--c-l-blue);
93
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-l-blue);
94
- --c-buttonIcon-tertiaryInteractive--press: var(--c-l-blue);
95
- --c-buttonLabel-selected: var(--c-l-white);
96
- --c-buttonLabel-destructiveInteractive: var(--c-l-white);
97
- --c-buttonLabel-destructiveInteractive--hover: var(--c-l-white);
98
- --c-buttonLabel-destructiveInteractive--press: var(--c-l-white);
99
- --c-buttonLabel-disabled: var(--c-l-graphite-light);
100
- --c-buttonLabel-primaryInteractive: var(--c-l-white);
101
- --c-buttonLabel-primaryInteractive--hover: var(--c-l-white);
102
- --c-buttonLabel-primaryInteractive--press: var(--c-l-white);
103
- --c-buttonLabel-secondaryInteractive: var(--c-l-indigo);
104
- --c-buttonLabel-secondaryInteractive--hover: var(--c-l-indigo);
105
- --c-buttonLabel-secondaryInteractive--press: var(--c-l-indigo-dark);
106
- --c-buttonLabel-success: var(--c-l-white);
107
- --c-buttonLabel-successAltInteractive: var(--c-l-white);
108
- --c-buttonLabel-successAltInteractive--hover: var(--c-l-white);
109
- --c-buttonLabel-successAltInteractive--press: var(--c-l-white);
110
- --c-buttonLabel-tertiaryInteractive: var(--c-l-blue);
111
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-l-blue);
112
- --c-buttonLabel-tertiaryInteractive--press: var(--c-l-blue);
113
- --c-icon-base: var(--c-l-graphite);
114
- --c-icon-baseInteractive: var(--c-l-graphite);
115
- --c-icon-baseInteractive--hover: var(--c-l-graphite);
116
- --c-icon-subdued: var(--c-l-graphite-light);
117
- --c-icon-subduedInteractive: var(--c-l-graphite-light);
118
- --c-icon-subduedInteractive--hover: var(--c-l-graphite);
119
- --c-icon-accent: var(--c-l-purple);
120
- --c-icon-accentInteractive: var(--c-l-purple);
121
- --c-icon-accentInteractive--hover: var(--c-l-indigo);
122
- --c-icon-accentAlt: var(--c-l-white);
123
- --c-icon-accentAltInteractive: var(--c-l-white);
124
- --c-icon-accentAltInteractive--hover: var(--c-l-white);
125
- --c-icon-info: var(--c-l-graphite-light);
126
- --c-icon-infoAlt: var(--c-l-turquoise);
127
- --c-icon-error: var(--c-l-red);
128
- --c-icon-errorAlt: var(--c-l-red);
129
- --c-icon-success: var(--c-l-green);
130
- --c-icon-successAlt: var(--c-l-white);
131
- --c-icon-warning: var(--c-l-coral);
132
- --c-icon-connect: var(--c-l-turquoise);
133
- --c-icon-connectAlt: var(--c-l-turquoise);
134
- --c-icon-driver: var(--c-l-graphite);
135
- --c-icon-owner: var(--c-l-white);
136
- --c-icon-inversed: var(--c-l-white);
137
- --c-icon-disabled: var(--c-l-grey-lighter);
138
- --c-stroke-base: var(--c-l-grey);
139
- --c-stroke-baseInteractive: var(--c-l-grey);
140
- --c-stroke-baseInteractive--hover: var(--c-l-graphite-light);
141
- --c-stroke-baseInteractive--press: var(--c-l-graphite);
142
- --c-stroke-strong: var(--c-l-grey-dark);
143
- --c-stroke-strongInteractive: var(--c-l-grey-dark);
144
- --c-stroke-strongInteractive--hover: var(--c-l-graphite-light);
145
- --c-stroke-strongInteractive--press: var(--c-l-graphite);
146
- --c-stroke-subdued: var(--c-l-grey-light);
147
- --c-stroke-accent: var(--c-l-indigo);
148
- --c-stroke-accentInteractive: var(--c-l-indigo);
149
- --c-stroke-accentInteractive--hover: var(--c-l-indigo);
150
- --c-stroke-accentInteractive--press: var(--c-l-indigo-dark);
151
- --c-stroke-accentAlt: var(--c-l-purple);
152
- --c-stroke-error: var(--c-l-red);
153
- --c-stroke-errorAlt: var(--c-l-red);
154
- --c-stroke-success: var(--c-l-green);
155
- --c-stroke-successAlt: var(--c-l-green);
156
- --c-fill-base: var(--c-l-graphite);
157
- --c-fill-secondary: var(--c-l-turquoise);
158
- --c-fill-subdued: var(--c-l-grey-light);
159
- --c-fill-accent: var(--c-l-purple);
160
- --c-fill-accentAlt: var(--c-l-purple);
161
- --c-fill-error: var(--c-l-red);
162
- --c-fill-negative: var(--c-l-red);
163
- --c-fill-success: var(--c-l-green);
164
- --c-fill-disabled: var(--c-l-grey-dark);
165
- --c-fill-neutral: var(--c-l-grey-lighter);
6
+ --c-background-primary: var(--c-white);
7
+ --c-background-secondary: var(--c-white);
8
+ --c-background-secondaryInteractive: var(--c-white);
9
+ --c-background-secondaryInteractive--hover: var(--c-navy-50);
10
+ --c-background-accent: var(--c-purple-500);
11
+ --c-background-accentInteractive: var(--c-purple-500);
12
+ --c-background-accentInteractive--hover: var(--c-purple-700);
13
+ --c-background-accentAlt: var(--c-purple-100);
14
+ --c-background-accentAltInteractive: var(--c-purple-100);
15
+ --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
16
+ --c-background-info: var(--c-yellow-100);
17
+ --c-background-error: var(--c-red-500);
18
+ --c-background-errorInteractive: var(--c-red-500);
19
+ --c-background-errorInteractive--hover: var(--c-red-700);
20
+ --c-background-errorAlt: var(--c-red-100);
21
+ --c-background-success: var(--c-green-700);
22
+ --c-background-successAlt: var(--c-green-100);
23
+ --c-background-connect: var(--c-turquoise-500);
24
+ --c-background-connectInteractive: var(--c-turquoise-500);
25
+ --c-background-connectInteractive--hover: var(--c-turquoise-700);
26
+ --c-background-connectAlt: var(--c-turquoise-50);
27
+ --c-background-driver: var(--c-yellow-500);
28
+ --c-background-owner: var(--c-navy-700);
29
+ --c-background-disabled: var(--c-navy-100);
30
+ --c-background-neutral: var(--c-navy-100);
31
+ --c-background-neutralAlt: var(--c-navy-50);
32
+ --c-background-seasonLow: var(--c-season-100);
33
+ --c-background-seasonMedium: var(--c-season-200);
34
+ --c-background-seasonHigh: var(--c-season-300);
35
+ --c-background-seasonVeryHigh: var(--c-season-400);
36
+ --c-text-base: var(--c-navy-700);
37
+ --c-text-baseInteractive: var(--c-navy-700);
38
+ --c-text-baseInteractive--hover: var(--c-navy-300);
39
+ --c-text-subdued: var(--c-navy-300);
40
+ --c-text-subduedInteractive: var(--c-navy-300);
41
+ --c-text-subduedInteractive--hover: var(--c-navy-500);
42
+ --c-text-accent: var(--c-purple-500);
43
+ --c-text-accentInteractive: var(--c-purple-500);
44
+ --c-text-accentInteractive--hover: var(--c-purple-700);
45
+ --c-text-accentAlt: var(--c-purple-500);
46
+ --c-text-accentAltInteractive: var(--c-purple-500);
47
+ --c-text-accentAltInteractive--hover: var(--c-purple-700);
48
+ --c-text-info: var(--c-yellow-900);
49
+ --c-text-infoAlt: var(--c-yellow-500);
50
+ --c-text-error: var(--c-red-500);
51
+ --c-text-errorAlt: var(--c-red-500);
52
+ --c-text-success: var(--c-green-700);
53
+ --c-text-successAlt: var(--c-green-900);
54
+ --c-text-warning: var(--c-orange-500);
55
+ --c-text-connect: var(--c-turquoise-500);
56
+ --c-text-driver: var(--c-navy-700);
57
+ --c-text-owner: var(--c-white);
58
+ --c-text-inversed: var(--c-white);
59
+ --c-buttonBackground-selected: var(--c-purple-100);
60
+ --c-buttonBackground-destructiveInteractive: var(--c-red-100);
61
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
62
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
63
+ --c-buttonBackground-disabled: var(--c-navy-100);
64
+ --c-buttonBackground-primaryInteractive: var(--c-purple-500);
65
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
66
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
67
+ --c-buttonBackground-secondaryInteractive: var(--c-white);
68
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
69
+ --c-buttonBackground-secondaryInteractive--press: var(--c-white);
70
+ --c-buttonBackground-success: var(--c-green-700);
71
+ --c-buttonBackground-successAltInteractive: var(--c-green-100);
72
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
73
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
74
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
75
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
76
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
77
+ --c-buttonIcon-selected: var(--c-purple-500);
78
+ --c-buttonIcon-destructiveInteractive: var(--c-red-500);
79
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
80
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
81
+ --c-buttonIcon-disabled: var(--c-navy-300);
82
+ --c-buttonIcon-primaryInteractive: var(--c-white);
83
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
84
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
85
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
86
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
87
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
88
+ --c-buttonIcon-success: var(--c-white);
89
+ --c-buttonIcon-successAltInteractive: var(--c-green-900);
90
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
91
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
92
+ --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
93
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
94
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
95
+ --c-buttonLabel-selected: var(--c-purple-500);
96
+ --c-buttonLabel-destructiveInteractive: var(--c-red-500);
97
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
98
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
99
+ --c-buttonLabel-disabled: var(--c-navy-300);
100
+ --c-buttonLabel-primaryInteractive: var(--c-white);
101
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
102
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
103
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
104
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
105
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
106
+ --c-buttonLabel-success: var(--c-white);
107
+ --c-buttonLabel-successAltInteractive: var(--c-green-900);
108
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
109
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
110
+ --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
111
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
112
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
113
+ --c-icon-base: var(--c-navy-500);
114
+ --c-icon-baseInteractive: var(--c-navy-500);
115
+ --c-icon-baseInteractive--hover: var(--c-navy-700);
116
+ --c-icon-subdued: var(--c-navy-300);
117
+ --c-icon-subduedInteractive: var(--c-navy-300);
118
+ --c-icon-subduedInteractive--hover: var(--c-navy-500);
119
+ --c-icon-accent: var(--c-purple-500);
120
+ --c-icon-accentInteractive: var(--c-purple-500);
121
+ --c-icon-accentInteractive--hover: var(--c-purple-700);
122
+ --c-icon-accentAlt: var(--c-purple-500);
123
+ --c-icon-accentAltInteractive: var(--c-purple-500);
124
+ --c-icon-accentAltInteractive--hover: var(--c-purple-700);
125
+ --c-icon-info: var(--c-yellow-900);
126
+ --c-icon-infoAlt: var(--c-yellow-500);
127
+ --c-icon-error: var(--c-red-500);
128
+ --c-icon-errorAlt: var(--c-red-500);
129
+ --c-icon-success: var(--c-green-700);
130
+ --c-icon-successAlt: var(--c-green-900);
131
+ --c-icon-warning: var(--c-orange-500);
132
+ --c-icon-connect: var(--c-turquoise-500);
133
+ --c-icon-connectAlt: var(--c-turquoise-900);
134
+ --c-icon-driver: var(--c-navy-700);
135
+ --c-icon-owner: var(--c-white);
136
+ --c-icon-inversed: var(--c-white);
137
+ --c-icon-disabled: var(--c-navy-100);
138
+ --c-stroke-base: var(--c-navy-100);
139
+ --c-stroke-baseInteractive: var(--c-navy-100);
140
+ --c-stroke-baseInteractive--hover: var(--c-navy-300);
141
+ --c-stroke-baseInteractive--press: var(--c-navy-500);
142
+ --c-stroke-strong: var(--c-navy-300);
143
+ --c-stroke-strongInteractive: var(--c-navy-300);
144
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
145
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
146
+ --c-stroke-subdued: var(--c-navy-100);
147
+ --c-stroke-accent: var(--c-purple-500);
148
+ --c-stroke-accentInteractive: var(--c-purple-500);
149
+ --c-stroke-accentInteractive--hover: var(--c-purple-700);
150
+ --c-stroke-accentInteractive--press: var(--c-purple-900);
151
+ --c-stroke-accentAlt: var(--c-purple-300);
152
+ --c-stroke-error: var(--c-red-500);
153
+ --c-stroke-errorAlt: var(--c-red-500);
154
+ --c-stroke-success: var(--c-green-500);
155
+ --c-stroke-successAlt: var(--c-green-500);
156
+ --c-fill-base: var(--c-navy-500);
157
+ --c-fill-secondary: var(--c-yellow-500);
158
+ --c-fill-subdued: var(--c-navy-100);
159
+ --c-fill-accent: var(--c-purple-500);
160
+ --c-fill-accentAlt: var(--c-purple-100);
161
+ --c-fill-error: var(--c-red-500);
162
+ --c-fill-negative: var(--c-red-150);
163
+ --c-fill-success: var(--c-green-500);
164
+ --c-fill-disabled: var(--c-navy-300);
165
+ --c-fill-neutral: var(--c-navy-50);
166
166
  }
package/styles/core/typography.scss CHANGED
@@ -7,35 +7,35 @@ $font-family-data: (
7
7
  $text-variants-data: (
8
8
  title-extralarge: (
9
9
  remToPx(2rem)
10
- remToPx(2.25rem)
10
+ 125%
11
11
  ),
12
12
  title-large: (
13
13
  remToPx(1.5rem)
14
- remToPx(1.75rem)
14
+ 125%
15
15
  ),
16
16
  title: (
17
- remToPx(1.125rem)
18
- remToPx(1.25rem)
17
+ remToPx(1.25rem)
18
+ 125%
19
19
  ),
20
20
  title-small: (
21
- remToPx(0.9375rem)
22
- remToPx(1.25rem)
21
+ remToPx(1rem)
22
+ 125%
23
23
  ),
24
24
  title-tiny: (
25
- remToPx(0.9375rem)
26
- remToPx(1.25rem)
25
+ remToPx(1rem)
26
+ 125%
27
27
  ),
28
28
  body-large: (
29
29
  remToPx(1.125rem)
30
- remToPx(1.5rem)
30
+ 1.5rem
31
31
  ),
32
32
  body: (
33
- remToPx(0.9375rem)
34
- remToPx(1.5rem)
33
+ remToPx(1rem)
34
+ 1.5rem
35
35
  ),
36
36
  body-small: (
37
37
  remToPx(0.75rem)
38
- remToPx(1rem)
38
+ 1rem
39
39
  ),
40
40
  caption: (
41
41
  14px 20px
package/tokens/theme.js CHANGED
@@ -44,7 +44,7 @@ const text = {
44
44
  base: "graphite/navy.700/grey.100",
45
45
  baseInteractive: {
46
46
  DEFAULT: "graphite/navy.700/grey.100",
47
- hover: "graphite/navy.900/grey.100"
47
+ hover: "graphite/navy.300/grey.300"
48
48
  },
49
49
  subdued: "graphite.light/navy.300/grey.300",
50
50
  subduedInteractive: {
package/types/components/Card/index.d.ts CHANGED
@@ -2,10 +2,12 @@ import React, { PureComponent } from "react";
2
2
  export type CardProps = {
3
3
  children?: React.ReactNode;
4
4
  className?: string;
5
+ legacy?: boolean;
5
6
  flattened?: boolean;
7
+ responsive?: boolean;
6
8
  };
7
9
  export declare const Card: {
8
- ({ children, className, flattened }: CardProps): JSX.Element;
10
+ ({ children, className, legacy, responsive, }: CardProps): JSX.Element;
9
11
  Section: typeof CardSection;
10
12
  };
11
13
  export type CardSectionProps = {