@drivy/cobalt 0.34.0 → 0.34.2

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 (15) hide show
  1. package/cjs/tokens/theme.js +1 -0
  2. package/cjs/tokens/theme.js.map +1 -1
  3. package/components/Tag/index.js +1 -2
  4. package/components/Tag/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/styles/components/Tag/index.scss +36 -1
  7. package/styles/core/_colors-map.scss +1 -0
  8. package/styles/core/default-theme.scss +167 -0
  9. package/styles/core/theme.scss +2 -163
  10. package/styles/core.scss +1 -1
  11. package/tokens/theme.js +1 -0
  12. package/tokens/theme.js.map +1 -1
  13. package/types/components/Tag/index.d.ts +1 -1
  14. package/types/tokens/index.d.ts +1 -0
  15. package/utilities.css +5 -326
package/cjs/tokens/theme.js CHANGED
@@ -73,6 +73,7 @@ const text = {
73
73
  successAlt: "white/green.900/green.100",
74
74
  warning: "coral/orange.500/orange.300",
75
75
  connect: "turquoise/turquoise.500/turquoise.500",
76
+ connectAlt: "turquoise/turquoise.900/turquoise.50",
76
77
  driver: "graphite/navy.700/navy.700",
77
78
  owner: "white/white/grey.100",
78
79
  inversed: "white/white/white"
package/cjs/tokens/theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/components/Tag/index.js CHANGED
@@ -2,8 +2,7 @@ import React from 'react';
2
2
  import cx from 'classnames';
3
3
 
4
4
  const Tag = ({ children, variant, className }) => (React.createElement("div", { className: cx("cobalt-Tag", className, {
5
- "cobalt-Tag--muted": variant === "muted",
6
- "cobalt-Tag--important": variant === "important",
5
+ [`cobalt-Tag--${variant}`]: variant,
7
6
  }) }, children));
8
7
 
9
8
  export { Tag };
package/components/Tag/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n children: React.ReactNode\n className?: string\n variant?: \"muted\" | \"important\"\n}\n\nexport const Tag = ({ children, variant, className }: TagProps) => (\n <div\n className={cx(\"cobalt-Tag\", className, {\n \"cobalt-Tag--muted\": variant === \"muted\",\n \"cobalt-Tag--important\": variant === \"important\",\n })}\n >\n {children}\n </div>\n)\n"],"names":[],"mappings":";;;AASa,MAAA,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAY,MAC5D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;QACrC,mBAAmB,EAAE,OAAO,KAAK,OAAO;QACxC,uBAAuB,EAAE,OAAO,KAAK,WAAW;AACjD,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport interface TagProps {\n children: React.ReactNode\n className?: string\n variant?:\n | \"muted\"\n | \"important\"\n | \"importantPrimary\"\n | \"success\"\n | \"successPrimary\"\n | \"info\"\n | \"accent\"\n | \"accentPrimary\"\n | \"connect\"\n}\n\nexport const Tag = ({ children, variant, className }: TagProps) => (\n <div\n className={cx(\"cobalt-Tag\", className, {\n [`cobalt-Tag--${variant}`]: variant,\n })}\n >\n {children}\n </div>\n)\n"],"names":[],"mappings":";;;AAkBa,MAAA,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAY,MAC5D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;AACrC,QAAA,CAAC,CAAe,YAAA,EAAA,OAAO,CAAE,CAAA,GAAG,OAAO;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.34.0",
3
+ "version": "0.34.2",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/index.d.ts",
package/styles/components/Tag/index.scss CHANGED
@@ -18,7 +18,42 @@
18
18
  }
19
19
 
20
20
  &Tag--important {
21
- @include bg-color(errorAlt);
22
21
  @include text-color(errorAlt);
22
+ @include bg-color(errorAlt);
23
+ }
24
+
25
+ &Tag--importantPrimary {
26
+ @include text-color(inversed);
27
+ @include bg-color(error);
28
+ }
29
+
30
+ &Tag--success {
31
+ @include text-color(successAlt);
32
+ @include bg-color(successAlt);
33
+ }
34
+
35
+ &Tag--successPrimary {
36
+ @include text-color(inversed);
37
+ @include bg-color(success);
38
+ }
39
+
40
+ &Tag--info {
41
+ @include text-color(info);
42
+ @include bg-color(info);
43
+ }
44
+
45
+ &Tag--accent {
46
+ @include text-color(accentAlt);
47
+ @include bg-color(accentAlt);
48
+ }
49
+
50
+ &Tag--accentPrimary {
51
+ @include text-color(inversed);
52
+ @include bg-color(accent);
53
+ }
54
+
55
+ &Tag--connect {
56
+ @include text-color(connectAlt);
57
+ @include bg-color(connectAlt);
23
58
  }
24
59
  }
package/styles/core/_colors-map.scss CHANGED
@@ -74,6 +74,7 @@ $theme-colors-map: (
74
74
  successAlt: var(--c-text-successAlt),
75
75
  warning: var(--c-text-warning),
76
76
  connect: var(--c-text-connect),
77
+ connectAlt: var(--c-text-connectAlt),
77
78
  driver: var(--c-text-driver),
78
79
  owner: var(--c-text-owner),
79
80
  inversed: var(--c-text-inversed)
package/styles/core/default-theme.scss ADDED
@@ -0,0 +1,167 @@
1
+ /**********************************/
2
+ /* GENERATED WHEN BUILDING COBALT */
3
+ /*** DO NOT MODIFY IT DIRECTLY ****/
4
+ /**********************************/
5
+ :root {
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-connectAlt: var(--c-turquoise-900);
57
+ --c-text-driver: var(--c-navy-700);
58
+ --c-text-owner: var(--c-white);
59
+ --c-text-inversed: var(--c-white);
60
+ --c-buttonBackground-selected: var(--c-purple-100);
61
+ --c-buttonBackground-destructiveInteractive: var(--c-red-100);
62
+ --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
63
+ --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
64
+ --c-buttonBackground-disabled: var(--c-navy-100);
65
+ --c-buttonBackground-primaryInteractive: var(--c-purple-500);
66
+ --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
67
+ --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
68
+ --c-buttonBackground-secondaryInteractive: var(--c-white);
69
+ --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
70
+ --c-buttonBackground-secondaryInteractive--press: var(--c-white);
71
+ --c-buttonBackground-success: var(--c-green-700);
72
+ --c-buttonBackground-successAltInteractive: var(--c-green-100);
73
+ --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
74
+ --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
75
+ --c-buttonBackground-tertiaryInteractive: var(--c-white);
76
+ --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
77
+ --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
78
+ --c-buttonIcon-selected: var(--c-purple-500);
79
+ --c-buttonIcon-destructiveInteractive: var(--c-red-500);
80
+ --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
81
+ --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
82
+ --c-buttonIcon-disabled: var(--c-navy-300);
83
+ --c-buttonIcon-primaryInteractive: var(--c-white);
84
+ --c-buttonIcon-primaryInteractive--hover: var(--c-white);
85
+ --c-buttonIcon-primaryInteractive--press: var(--c-white);
86
+ --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
87
+ --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
88
+ --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
89
+ --c-buttonIcon-success: var(--c-white);
90
+ --c-buttonIcon-successAltInteractive: var(--c-green-900);
91
+ --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
92
+ --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
93
+ --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
94
+ --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
95
+ --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
96
+ --c-buttonLabel-selected: var(--c-purple-500);
97
+ --c-buttonLabel-destructiveInteractive: var(--c-red-500);
98
+ --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
99
+ --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
100
+ --c-buttonLabel-disabled: var(--c-navy-300);
101
+ --c-buttonLabel-primaryInteractive: var(--c-white);
102
+ --c-buttonLabel-primaryInteractive--hover: var(--c-white);
103
+ --c-buttonLabel-primaryInteractive--press: var(--c-white);
104
+ --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
105
+ --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
106
+ --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
107
+ --c-buttonLabel-success: var(--c-white);
108
+ --c-buttonLabel-successAltInteractive: var(--c-green-900);
109
+ --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
110
+ --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
111
+ --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
112
+ --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
113
+ --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
114
+ --c-icon-base: var(--c-navy-500);
115
+ --c-icon-baseInteractive: var(--c-navy-500);
116
+ --c-icon-baseInteractive--hover: var(--c-navy-700);
117
+ --c-icon-subdued: var(--c-navy-300);
118
+ --c-icon-subduedInteractive: var(--c-navy-300);
119
+ --c-icon-subduedInteractive--hover: var(--c-navy-500);
120
+ --c-icon-accent: var(--c-purple-500);
121
+ --c-icon-accentInteractive: var(--c-purple-500);
122
+ --c-icon-accentInteractive--hover: var(--c-purple-700);
123
+ --c-icon-accentAlt: var(--c-purple-500);
124
+ --c-icon-accentAltInteractive: var(--c-purple-500);
125
+ --c-icon-accentAltInteractive--hover: var(--c-purple-700);
126
+ --c-icon-info: var(--c-yellow-900);
127
+ --c-icon-infoAlt: var(--c-yellow-500);
128
+ --c-icon-error: var(--c-red-500);
129
+ --c-icon-errorAlt: var(--c-red-500);
130
+ --c-icon-success: var(--c-green-700);
131
+ --c-icon-successAlt: var(--c-green-900);
132
+ --c-icon-warning: var(--c-orange-500);
133
+ --c-icon-connect: var(--c-turquoise-500);
134
+ --c-icon-connectAlt: var(--c-turquoise-900);
135
+ --c-icon-driver: var(--c-navy-700);
136
+ --c-icon-owner: var(--c-white);
137
+ --c-icon-inversed: var(--c-white);
138
+ --c-icon-disabled: var(--c-navy-100);
139
+ --c-stroke-base: var(--c-navy-100);
140
+ --c-stroke-baseInteractive: var(--c-navy-100);
141
+ --c-stroke-baseInteractive--hover: var(--c-navy-300);
142
+ --c-stroke-baseInteractive--press: var(--c-navy-500);
143
+ --c-stroke-strong: var(--c-navy-300);
144
+ --c-stroke-strongInteractive: var(--c-navy-300);
145
+ --c-stroke-strongInteractive--hover: var(--c-navy-500);
146
+ --c-stroke-strongInteractive--press: var(--c-navy-700);
147
+ --c-stroke-subdued: var(--c-navy-100);
148
+ --c-stroke-accent: var(--c-purple-500);
149
+ --c-stroke-accentInteractive: var(--c-purple-500);
150
+ --c-stroke-accentInteractive--hover: var(--c-purple-700);
151
+ --c-stroke-accentInteractive--press: var(--c-purple-900);
152
+ --c-stroke-accentAlt: var(--c-purple-300);
153
+ --c-stroke-error: var(--c-red-500);
154
+ --c-stroke-errorAlt: var(--c-red-500);
155
+ --c-stroke-success: var(--c-green-500);
156
+ --c-stroke-successAlt: var(--c-green-500);
157
+ --c-fill-base: var(--c-navy-500);
158
+ --c-fill-secondary: var(--c-yellow-500);
159
+ --c-fill-subdued: var(--c-navy-100);
160
+ --c-fill-accent: var(--c-purple-500);
161
+ --c-fill-accentAlt: var(--c-purple-100);
162
+ --c-fill-error: var(--c-red-500);
163
+ --c-fill-negative: var(--c-red-150);
164
+ --c-fill-success: var(--c-green-500);
165
+ --c-fill-disabled: var(--c-navy-300);
166
+ --c-fill-neutral: var(--c-navy-50);
167
+ }
package/styles/core/theme.scss CHANGED
@@ -2,169 +2,6 @@
2
2
  /* GENERATED WHEN BUILDING COBALT */
3
3
  /*** DO NOT MODIFY IT DIRECTLY ****/
4
4
  /**********************************/
5
- :root {
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
- }
167
-
168
5
  .use-cobalt-light-theme {
169
6
  --c-background-primary: var(--c-white);
170
7
  --c-background-secondary: var(--c-white);
@@ -216,6 +53,7 @@
216
53
  --c-text-successAlt: var(--c-green-900);
217
54
  --c-text-warning: var(--c-orange-500);
218
55
  --c-text-connect: var(--c-turquoise-500);
56
+ --c-text-connectAlt: var(--c-turquoise-900);
219
57
  --c-text-driver: var(--c-navy-700);
220
58
  --c-text-owner: var(--c-white);
221
59
  --c-text-inversed: var(--c-white);
@@ -379,6 +217,7 @@
379
217
  --c-text-successAlt: var(--c-green-100);
380
218
  --c-text-warning: var(--c-orange-300);
381
219
  --c-text-connect: var(--c-turquoise-500);
220
+ --c-text-connectAlt: var(--c-turquoise-50);
382
221
  --c-text-driver: var(--c-navy-700);
383
222
  --c-text-owner: var(--c-grey-100);
384
223
  --c-text-inversed: var(--c-white);
package/styles/core.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import "core/fonts";
2
2
  @import "core/palette";
3
- @import "core/theme";
3
+ @import "core/default-theme";
4
4
  @import "core/utilities";
5
5
  @import "core/color";
6
6
  @import "core/animation";
package/tokens/theme.js CHANGED
@@ -69,6 +69,7 @@ const text = {
69
69
  successAlt: "white/green.900/green.100",
70
70
  warning: "coral/orange.500/orange.300",
71
71
  connect: "turquoise/turquoise.500/turquoise.500",
72
+ connectAlt: "turquoise/turquoise.900/turquoise.50",
72
73
  driver: "graphite/navy.700/navy.700",
73
74
  owner: "white/white/grey.100",
74
75
  inversed: "white/white/white"
package/tokens/theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/types/components/Tag/index.d.ts CHANGED
@@ -2,6 +2,6 @@ import React from "react";
2
2
  export interface TagProps {
3
3
  children: React.ReactNode;
4
4
  className?: string;
5
- variant?: "muted" | "important";
5
+ variant?: "muted" | "important" | "importantPrimary" | "success" | "successPrimary" | "info" | "accent" | "accentPrimary" | "connect";
6
6
  }
7
7
  export declare const Tag: ({ children, variant, className }: TagProps) => JSX.Element;
package/types/tokens/index.d.ts CHANGED
@@ -527,6 +527,7 @@ export declare const theme: {
527
527
  successAlt: string;
528
528
  warning: string;
529
529
  connect: string;
530
+ connectAlt: string;
530
531
  driver: string;
531
532
  owner: string;
532
533
  inversed: string;
package/utilities.css CHANGED
@@ -157,6 +157,7 @@
157
157
  --c-text-successAlt: var(--c-green-900);
158
158
  --c-text-warning: var(--c-orange-500);
159
159
  --c-text-connect: var(--c-turquoise-500);
160
+ --c-text-connectAlt: var(--c-turquoise-900);
160
161
  --c-text-driver: var(--c-navy-700);
161
162
  --c-text-owner: var(--c-white);
162
163
  --c-text-inversed: var(--c-white);
@@ -269,332 +270,6 @@
269
270
  --c-fill-neutral: var(--c-navy-50);
270
271
  }
271
272
 
272
- .use-cobalt-light-theme {
273
- --c-background-primary: var(--c-white);
274
- --c-background-secondary: var(--c-white);
275
- --c-background-secondaryInteractive: var(--c-white);
276
- --c-background-secondaryInteractive--hover: var(--c-navy-50);
277
- --c-background-accent: var(--c-purple-500);
278
- --c-background-accentInteractive: var(--c-purple-500);
279
- --c-background-accentInteractive--hover: var(--c-purple-700);
280
- --c-background-accentAlt: var(--c-purple-100);
281
- --c-background-accentAltInteractive: var(--c-purple-100);
282
- --c-background-accentAltInteractive--hover: var(--c-purpleLight-100);
283
- --c-background-info: var(--c-yellow-100);
284
- --c-background-error: var(--c-red-500);
285
- --c-background-errorInteractive: var(--c-red-500);
286
- --c-background-errorInteractive--hover: var(--c-red-700);
287
- --c-background-errorAlt: var(--c-red-100);
288
- --c-background-success: var(--c-green-700);
289
- --c-background-successAlt: var(--c-green-100);
290
- --c-background-connect: var(--c-turquoise-500);
291
- --c-background-connectInteractive: var(--c-turquoise-500);
292
- --c-background-connectInteractive--hover: var(--c-turquoise-700);
293
- --c-background-connectAlt: var(--c-turquoise-50);
294
- --c-background-driver: var(--c-yellow-500);
295
- --c-background-owner: var(--c-navy-700);
296
- --c-background-disabled: var(--c-navy-100);
297
- --c-background-neutral: var(--c-navy-100);
298
- --c-background-neutralAlt: var(--c-navy-50);
299
- --c-background-seasonLow: var(--c-season-100);
300
- --c-background-seasonMedium: var(--c-season-200);
301
- --c-background-seasonHigh: var(--c-season-300);
302
- --c-background-seasonVeryHigh: var(--c-season-400);
303
- --c-text-base: var(--c-navy-700);
304
- --c-text-baseInteractive: var(--c-navy-700);
305
- --c-text-baseInteractive--hover: var(--c-navy-300);
306
- --c-text-subdued: var(--c-navy-300);
307
- --c-text-subduedInteractive: var(--c-navy-300);
308
- --c-text-subduedInteractive--hover: var(--c-navy-500);
309
- --c-text-accent: var(--c-purple-500);
310
- --c-text-accentInteractive: var(--c-purple-500);
311
- --c-text-accentInteractive--hover: var(--c-purple-700);
312
- --c-text-accentAlt: var(--c-purple-500);
313
- --c-text-accentAltInteractive: var(--c-purple-500);
314
- --c-text-accentAltInteractive--hover: var(--c-purple-700);
315
- --c-text-info: var(--c-yellow-900);
316
- --c-text-infoAlt: var(--c-yellow-500);
317
- --c-text-error: var(--c-red-500);
318
- --c-text-errorAlt: var(--c-red-500);
319
- --c-text-success: var(--c-green-700);
320
- --c-text-successAlt: var(--c-green-900);
321
- --c-text-warning: var(--c-orange-500);
322
- --c-text-connect: var(--c-turquoise-500);
323
- --c-text-driver: var(--c-navy-700);
324
- --c-text-owner: var(--c-white);
325
- --c-text-inversed: var(--c-white);
326
- --c-buttonBackground-selected: var(--c-purple-100);
327
- --c-buttonBackground-destructiveInteractive: var(--c-red-100);
328
- --c-buttonBackground-destructiveInteractive--hover: var(--c-red-120);
329
- --c-buttonBackground-destructiveInteractive--press: var(--c-red-150);
330
- --c-buttonBackground-disabled: var(--c-navy-100);
331
- --c-buttonBackground-primaryInteractive: var(--c-purple-500);
332
- --c-buttonBackground-primaryInteractive--hover: var(--c-purple-700);
333
- --c-buttonBackground-primaryInteractive--press: var(--c-purple-900);
334
- --c-buttonBackground-secondaryInteractive: var(--c-white);
335
- --c-buttonBackground-secondaryInteractive--hover: var(--c-white);
336
- --c-buttonBackground-secondaryInteractive--press: var(--c-white);
337
- --c-buttonBackground-success: var(--c-green-700);
338
- --c-buttonBackground-successAltInteractive: var(--c-green-100);
339
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-120);
340
- --c-buttonBackground-successAltInteractive--press: var(--c-green-150);
341
- --c-buttonBackground-tertiaryInteractive: var(--c-white);
342
- --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
343
- --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
344
- --c-buttonIcon-selected: var(--c-purple-500);
345
- --c-buttonIcon-destructiveInteractive: var(--c-red-500);
346
- --c-buttonIcon-destructiveInteractive--hover: var(--c-red-500);
347
- --c-buttonIcon-destructiveInteractive--press: var(--c-red-500);
348
- --c-buttonIcon-disabled: var(--c-navy-300);
349
- --c-buttonIcon-primaryInteractive: var(--c-white);
350
- --c-buttonIcon-primaryInteractive--hover: var(--c-white);
351
- --c-buttonIcon-primaryInteractive--press: var(--c-white);
352
- --c-buttonIcon-secondaryInteractive: var(--c-purple-500);
353
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purple-700);
354
- --c-buttonIcon-secondaryInteractive--press: var(--c-purple-900);
355
- --c-buttonIcon-success: var(--c-white);
356
- --c-buttonIcon-successAltInteractive: var(--c-green-900);
357
- --c-buttonIcon-successAltInteractive--hover: var(--c-green-900);
358
- --c-buttonIcon-successAltInteractive--press: var(--c-green-900);
359
- --c-buttonIcon-tertiaryInteractive: var(--c-purple-500);
360
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purple-700);
361
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purple-900);
362
- --c-buttonLabel-selected: var(--c-purple-500);
363
- --c-buttonLabel-destructiveInteractive: var(--c-red-500);
364
- --c-buttonLabel-destructiveInteractive--hover: var(--c-red-500);
365
- --c-buttonLabel-destructiveInteractive--press: var(--c-red-500);
366
- --c-buttonLabel-disabled: var(--c-navy-300);
367
- --c-buttonLabel-primaryInteractive: var(--c-white);
368
- --c-buttonLabel-primaryInteractive--hover: var(--c-white);
369
- --c-buttonLabel-primaryInteractive--press: var(--c-white);
370
- --c-buttonLabel-secondaryInteractive: var(--c-purple-500);
371
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purple-700);
372
- --c-buttonLabel-secondaryInteractive--press: var(--c-purple-900);
373
- --c-buttonLabel-success: var(--c-white);
374
- --c-buttonLabel-successAltInteractive: var(--c-green-900);
375
- --c-buttonLabel-successAltInteractive--hover: var(--c-green-900);
376
- --c-buttonLabel-successAltInteractive--press: var(--c-green-900);
377
- --c-buttonLabel-tertiaryInteractive: var(--c-purple-500);
378
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purple-700);
379
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purple-900);
380
- --c-icon-base: var(--c-navy-500);
381
- --c-icon-baseInteractive: var(--c-navy-500);
382
- --c-icon-baseInteractive--hover: var(--c-navy-700);
383
- --c-icon-subdued: var(--c-navy-300);
384
- --c-icon-subduedInteractive: var(--c-navy-300);
385
- --c-icon-subduedInteractive--hover: var(--c-navy-500);
386
- --c-icon-accent: var(--c-purple-500);
387
- --c-icon-accentInteractive: var(--c-purple-500);
388
- --c-icon-accentInteractive--hover: var(--c-purple-700);
389
- --c-icon-accentAlt: var(--c-purple-500);
390
- --c-icon-accentAltInteractive: var(--c-purple-500);
391
- --c-icon-accentAltInteractive--hover: var(--c-purple-700);
392
- --c-icon-info: var(--c-yellow-900);
393
- --c-icon-infoAlt: var(--c-yellow-500);
394
- --c-icon-error: var(--c-red-500);
395
- --c-icon-errorAlt: var(--c-red-500);
396
- --c-icon-success: var(--c-green-700);
397
- --c-icon-successAlt: var(--c-green-900);
398
- --c-icon-warning: var(--c-orange-500);
399
- --c-icon-connect: var(--c-turquoise-500);
400
- --c-icon-connectAlt: var(--c-turquoise-900);
401
- --c-icon-driver: var(--c-navy-700);
402
- --c-icon-owner: var(--c-white);
403
- --c-icon-inversed: var(--c-white);
404
- --c-icon-disabled: var(--c-navy-100);
405
- --c-stroke-base: var(--c-navy-100);
406
- --c-stroke-baseInteractive: var(--c-navy-100);
407
- --c-stroke-baseInteractive--hover: var(--c-navy-300);
408
- --c-stroke-baseInteractive--press: var(--c-navy-500);
409
- --c-stroke-strong: var(--c-navy-300);
410
- --c-stroke-strongInteractive: var(--c-navy-300);
411
- --c-stroke-strongInteractive--hover: var(--c-navy-500);
412
- --c-stroke-strongInteractive--press: var(--c-navy-700);
413
- --c-stroke-subdued: var(--c-navy-100);
414
- --c-stroke-accent: var(--c-purple-500);
415
- --c-stroke-accentInteractive: var(--c-purple-500);
416
- --c-stroke-accentInteractive--hover: var(--c-purple-700);
417
- --c-stroke-accentInteractive--press: var(--c-purple-900);
418
- --c-stroke-accentAlt: var(--c-purple-300);
419
- --c-stroke-error: var(--c-red-500);
420
- --c-stroke-errorAlt: var(--c-red-500);
421
- --c-stroke-success: var(--c-green-500);
422
- --c-stroke-successAlt: var(--c-green-500);
423
- --c-fill-base: var(--c-navy-500);
424
- --c-fill-secondary: var(--c-yellow-500);
425
- --c-fill-subdued: var(--c-navy-100);
426
- --c-fill-accent: var(--c-purple-500);
427
- --c-fill-accentAlt: var(--c-purple-100);
428
- --c-fill-error: var(--c-red-500);
429
- --c-fill-negative: var(--c-red-150);
430
- --c-fill-success: var(--c-green-500);
431
- --c-fill-disabled: var(--c-navy-300);
432
- --c-fill-neutral: var(--c-navy-50);
433
- }
434
-
435
- .use-cobalt-dark-theme {
436
- --c-background-primary: var(--c-black-500);
437
- --c-background-secondary: var(--c-black-300);
438
- --c-background-secondaryInteractive: var(--c-black-300);
439
- --c-background-secondaryInteractive--hover: var(--c-black-300);
440
- --c-background-accent: var(--c-purpleDeep-400);
441
- --c-background-accentInteractive: var(--c-purpleDeep-400);
442
- --c-background-accentInteractive--hover: var(--c-purpleDeep-400);
443
- --c-background-accentAlt: var(--c-purpleDeep-900);
444
- --c-background-accentAltInteractive: var(--c-purpleDeep-900);
445
- --c-background-accentAltInteractive--hover: var(--c-purpleDeep-900);
446
- --c-background-info: var(--c-yellow-1000);
447
- --c-background-error: var(--c-red-500);
448
- --c-background-errorInteractive: var(--c-red-500);
449
- --c-background-errorInteractive--hover: var(--c-red-500);
450
- --c-background-errorAlt: var(--c-red-900);
451
- --c-background-success: var(--c-green-700);
452
- --c-background-successAlt: var(--c-green-1000);
453
- --c-background-connect: var(--c-turquoise-500);
454
- --c-background-connectInteractive: var(--c-turquoise-500);
455
- --c-background-connectInteractive--hover: var(--c-turquoise-500);
456
- --c-background-connectAlt: var(--c-turquoise-900);
457
- --c-background-driver: var(--c-yellow-500);
458
- --c-background-owner: var(--c-navy-700);
459
- --c-background-disabled: var(--c-black-50);
460
- --c-background-neutral: var(--c-black-50);
461
- --c-background-neutralAlt: var(--c-black-100);
462
- --c-background-seasonLow: var(--c-season-700);
463
- --c-background-seasonMedium: var(--c-season-800);
464
- --c-background-seasonHigh: var(--c-season-900);
465
- --c-background-seasonVeryHigh: var(--c-season-1000);
466
- --c-text-base: var(--c-grey-100);
467
- --c-text-baseInteractive: var(--c-grey-100);
468
- --c-text-baseInteractive--hover: var(--c-grey-300);
469
- --c-text-subdued: var(--c-grey-300);
470
- --c-text-subduedInteractive: var(--c-grey-300);
471
- --c-text-subduedInteractive--hover: var(--c-grey-300);
472
- --c-text-accent: var(--c-purpleDeep-400);
473
- --c-text-accentInteractive: var(--c-purpleDeep-400);
474
- --c-text-accentInteractive--hover: var(--c-purpleDeep-400);
475
- --c-text-accentAlt: var(--c-grey-100);
476
- --c-text-accentAltInteractive: var(--c-grey-100);
477
- --c-text-accentAltInteractive--hover: var(--c-grey-100);
478
- --c-text-info: var(--c-yellow-300);
479
- --c-text-infoAlt: var(--c-yellow-700);
480
- --c-text-error: var(--c-red-400);
481
- --c-text-errorAlt: var(--c-red-500);
482
- --c-text-success: var(--c-green-700);
483
- --c-text-successAlt: var(--c-green-100);
484
- --c-text-warning: var(--c-orange-300);
485
- --c-text-connect: var(--c-turquoise-500);
486
- --c-text-driver: var(--c-navy-700);
487
- --c-text-owner: var(--c-grey-100);
488
- --c-text-inversed: var(--c-white);
489
- --c-buttonBackground-selected: var(--c-purpleDeep-900);
490
- --c-buttonBackground-destructiveInteractive: var(--c-red-900);
491
- --c-buttonBackground-destructiveInteractive--hover: var(--c-red-900);
492
- --c-buttonBackground-destructiveInteractive--press: var(--c-red-900);
493
- --c-buttonBackground-disabled: var(--c-black-50);
494
- --c-buttonBackground-primaryInteractive: var(--c-purpleDeep-500);
495
- --c-buttonBackground-primaryInteractive--hover: var(--c-purpleDeep-500);
496
- --c-buttonBackground-primaryInteractive--press: var(--c-purpleDeep-500);
497
- --c-buttonBackground-secondaryInteractive: var(--c-black-500);
498
- --c-buttonBackground-secondaryInteractive--hover: var(--c-black-500);
499
- --c-buttonBackground-secondaryInteractive--press: var(--c-black-500);
500
- --c-buttonBackground-success: var(--c-green-900);
501
- --c-buttonBackground-successAltInteractive: var(--c-green-1000);
502
- --c-buttonBackground-successAltInteractive--hover: var(--c-green-1000);
503
- --c-buttonBackground-successAltInteractive--press: var(--c-green-1000);
504
- --c-buttonBackground-tertiaryInteractive: var(--c-white);
505
- --c-buttonBackground-tertiaryInteractive--hover: var(--c-white);
506
- --c-buttonBackground-tertiaryInteractive--press: var(--c-white);
507
- --c-buttonIcon-selected: var(--c-grey-100);
508
- --c-buttonIcon-destructiveInteractive: var(--c-red-200);
509
- --c-buttonIcon-destructiveInteractive--hover: var(--c-red-200);
510
- --c-buttonIcon-destructiveInteractive--press: var(--c-red-200);
511
- --c-buttonIcon-disabled: var(--c-grey-300);
512
- --c-buttonIcon-primaryInteractive: var(--c-grey-100);
513
- --c-buttonIcon-primaryInteractive--hover: var(--c-grey-100);
514
- --c-buttonIcon-primaryInteractive--press: var(--c-grey-100);
515
- --c-buttonIcon-secondaryInteractive: var(--c-purpleDeep-400);
516
- --c-buttonIcon-secondaryInteractive--hover: var(--c-purpleDeep-400);
517
- --c-buttonIcon-secondaryInteractive--press: var(--c-purpleDeep-400);
518
- --c-buttonIcon-success: var(--c-green-100);
519
- --c-buttonIcon-successAltInteractive: var(--c-green-100);
520
- --c-buttonIcon-successAltInteractive--hover: var(--c-green-100);
521
- --c-buttonIcon-successAltInteractive--press: var(--c-green-100);
522
- --c-buttonIcon-tertiaryInteractive: var(--c-purpleDeep-400);
523
- --c-buttonIcon-tertiaryInteractive--hover: var(--c-purpleDeep-400);
524
- --c-buttonIcon-tertiaryInteractive--press: var(--c-purpleDeep-400);
525
- --c-buttonLabel-selected: var(--c-grey-100);
526
- --c-buttonLabel-destructiveInteractive: var(--c-red-200);
527
- --c-buttonLabel-destructiveInteractive--hover: var(--c-red-200);
528
- --c-buttonLabel-destructiveInteractive--press: var(--c-red-200);
529
- --c-buttonLabel-disabled: var(--c-grey-300);
530
- --c-buttonLabel-primaryInteractive: var(--c-grey-100);
531
- --c-buttonLabel-primaryInteractive--hover: var(--c-grey-100);
532
- --c-buttonLabel-primaryInteractive--press: var(--c-grey-100);
533
- --c-buttonLabel-secondaryInteractive: var(--c-purpleDeep-400);
534
- --c-buttonLabel-secondaryInteractive--hover: var(--c-purpleDeep-400);
535
- --c-buttonLabel-secondaryInteractive--press: var(--c-purpleDeep-400);
536
- --c-buttonLabel-success: var(--c-green-100);
537
- --c-buttonLabel-successAltInteractive: var(--c-green-100);
538
- --c-buttonLabel-successAltInteractive--hover: var(--c-green-100);
539
- --c-buttonLabel-successAltInteractive--press: var(--c-green-100);
540
- --c-buttonLabel-tertiaryInteractive: var(--c-purpleDeep-400);
541
- --c-buttonLabel-tertiaryInteractive--hover: var(--c-purpleDeep-400);
542
- --c-buttonLabel-tertiaryInteractive--press: var(--c-purpleDeep-400);
543
- --c-icon-base: var(--c-grey-100);
544
- --c-icon-baseInteractive: var(--c-grey-100);
545
- --c-icon-baseInteractive--hover: var(--c-grey-100);
546
- --c-icon-subdued: var(--c-grey-300);
547
- --c-icon-subduedInteractive: var(--c-grey-300);
548
- --c-icon-subduedInteractive--hover: var(--c-grey-300);
549
- --c-icon-accent: var(--c-purpleDeep-400);
550
- --c-icon-accentInteractive: var(--c-purpleDeep-400);
551
- --c-icon-accentInteractive--hover: var(--c-);
552
- --c-icon-accentAlt: var(--c-grey-100);
553
- --c-icon-accentAltInteractive: var(--c-grey-100);
554
- --c-icon-accentAltInteractive--hover: var(--c-grey-100);
555
- --c-icon-info: var(--c-yellow-300);
556
- --c-icon-infoAlt: var(--c-yellow-700);
557
- --c-icon-error: var(--c-red-400);
558
- --c-icon-errorAlt: var(--c-red-200);
559
- --c-icon-success: var(--c-green-700);
560
- --c-icon-successAlt: var(--c-green-100);
561
- --c-icon-warning: var(--c-orange-300);
562
- --c-icon-connect: var(--c-white);
563
- --c-icon-connectAlt: var(--c-turquoise-50);
564
- --c-icon-driver: var(--c-);
565
- --c-icon-owner: var(--c-white);
566
- --c-icon-inversed: var(--c-white);
567
- --c-icon-disabled: var(--c-black-50);
568
- --c-stroke-base: var(--c-black-50);
569
- --c-stroke-baseInteractive: var(--c-black-50);
570
- --c-stroke-baseInteractive--hover: var(--c-purpleDeep-400);
571
- --c-stroke-baseInteractive--press: var(--c-purpleDeep-400);
572
- --c-stroke-strong: var(--c-navy-200);
573
- --c-stroke-strongInteractive: var(--c-navy-200);
574
- --c-stroke-strongInteractive--hover: var(--c-purpleDeep-400);
575
- --c-stroke-strongInteractive--press: var(--c-purpleDeep-400);
576
- --c-stroke-subdued: var(--c-black-50);
577
- --c-stroke-accent: var(--c-purpleDeep-400);
578
- --c-stroke-accentInteractive: var(--c-purpleDeep-400);
579
- --c-stroke-accentInteractive--hover: var(--c-purpleDeep-400);
580
- --c-stroke-accentInteractive--press: var(--c-purpleDeep-400);
581
- --c-stroke-accentAlt: var(--c-purpleDeep-700);
582
- --c-stroke-error: var(--c-red-200);
583
- --c-stroke-errorAlt: var(--c-red-200);
584
- --c-stroke-success: var(--c-green-700);
585
- --c-stroke-successAlt: var(--c-green-700);
586
- --c-fill-base: var(--c-grey-100);
587
- --c-fill-secondary: var(--c-yellow-500);
588
- --c-fill-subdued: var(--c-black-50);
589
- --c-fill-accent: var(--c-purpleDeep-400);
590
- --c-fill-accentAlt: var(--c-purpleDeep-900);
591
- --c-fill-error: var(--c-red-500);
592
- --c-fill-negative: var(--c-red-900);
593
- --c-fill-success: var(--c-green-700);
594
- --c-fill-disabled: var(--c-grey-300);
595
- --c-fill-neutral: var(--c-black-100);
596
- }
597
-
598
273
  .c-sr-only {
599
274
  position: absolute;
600
275
  width: 1px;
@@ -4833,6 +4508,10 @@
4833
4508
  color: var(--c-text-connect);
4834
4509
  }
4835
4510
 
4511
+ .c-text-connectAlt {
4512
+ color: var(--c-text-connectAlt);
4513
+ }
4514
+
4836
4515
  .c-text-driver {
4837
4516
  color: var(--c-text-driver);
4838
4517
  }