@drivy/cobalt 0.26.1 → 0.26.3

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 (16) hide show
  1. package/cjs/tokens/palette.js +3 -1
  2. package/cjs/tokens/palette.js.map +1 -1
  3. package/cjs/tokens/theme.js +4 -2
  4. package/cjs/tokens/theme.js.map +1 -1
  5. package/package.json +20 -20
  6. package/styles/components/Icon/iconColors.scss +4 -0
  7. package/styles/core/_colors-map.scss +4 -2
  8. package/styles/core/palette.scss +3 -1
  9. package/styles/core/theme.scss +4 -2
  10. package/tokens/palette.js +3 -1
  11. package/tokens/palette.js.map +1 -1
  12. package/tokens/theme.js +4 -2
  13. package/tokens/theme.js.map +1 -1
  14. package/types/components/Icon/index.d.ts +1 -1
  15. package/types/tokens/index.d.ts +4 -0
  16. package/utilities.css +6 -2
package/cjs/tokens/palette.js CHANGED
@@ -65,8 +65,10 @@ const red = {
65
65
  "900": "#3F2424"
66
66
  };
67
67
  const turquoise = {
68
+ "50": "#ECF9FB",
68
69
  "500": "#5ECBDD",
69
- "700": "#53B3C2"
70
+ "700": "#4CBED4",
71
+ "900": "#31ACC7"
70
72
  };
71
73
  const white = "#fff";
72
74
  const yellow = {
package/cjs/tokens/palette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/cjs/tokens/theme.js CHANGED
@@ -33,6 +33,7 @@ const background = {
33
33
  DEFAULT: "turquoise/turquoise.500/turquoise.500",
34
34
  hover: "turquoise/turquoise.700/turquoise.500"
35
35
  },
36
+ connectAlt: "grey.light/turquoise.50/turquoise.900",
36
37
  driver: "deprecatedDriver/yellow.500/yellow.500",
37
38
  owner: "indigo.dark/navy.700/navy.700",
38
39
  disabled: "grey.light/navy.100/black.50",
@@ -58,7 +59,7 @@ const text = {
58
59
  accentAlt: "white/purple.500/grey.100",
59
60
  accentAltInteractive: {
60
61
  DEFAULT: "white/purple.500/grey.100",
61
- hover: "indigo/purple.700/grey.100"
62
+ hover: "white/purple.700/grey.100"
62
63
  },
63
64
  info: "graphite.light/yellow.900/yellow.300",
64
65
  error: "red/red.500/red.400",
@@ -181,7 +182,7 @@ const icon = {
181
182
  accentAlt: "white/purple.500/grey.100",
182
183
  accentAltInteractive: {
183
184
  DEFAULT: "white/purple.500/grey.100",
184
- hover: "indigo/purple.700/grey.100"
185
+ hover: "white/purple.700/grey.100"
185
186
  },
186
187
  info: "graphite.light/yellow.900/yellow.300",
187
188
  error: "red/red.500/red.400",
@@ -189,6 +190,7 @@ const icon = {
189
190
  success: "green/green.700/green.700",
190
191
  successAlt: "white/green.900/green.100",
191
192
  connect: "turquoise/turquoise.500/white",
193
+ connectAlt: "turquoise/turquoise.900/turquoise.50",
192
194
  driver: "graphite/navy.700//navy.700",
193
195
  owner: "white/white/white",
194
196
  warning: "coral/orange.500/orange.300",
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.26.1",
3
+ "version": "0.26.3",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/index.d.ts",
@@ -32,7 +32,7 @@
32
32
  "lodash.throttle": "4.1.1",
33
33
  "media-typer": "1.1.0",
34
34
  "nanoid": "4.0.0",
35
- "postcss": "8.4.19",
35
+ "postcss": "8.4.20",
36
36
  "tailwindcss": "2.2.19",
37
37
  "tippy.js": "6.3.7"
38
38
  },
@@ -47,35 +47,35 @@
47
47
  "@getaround-eu/stylelint-config": "1.2.5",
48
48
  "@getaround-eu/ts-config": "2.2.0",
49
49
  "@percy/storybook": "3.3.1",
50
- "@rollup/plugin-json": "5.0.2",
50
+ "@rollup/plugin-json": "6.0.0",
51
51
  "@rushstack/eslint-patch": "1.2.0",
52
- "@storybook/addon-essentials": "6.5.14",
53
- "@storybook/addons": "6.5.14",
54
- "@storybook/builder-webpack5": "6.5.14",
55
- "@storybook/manager-webpack5": "6.5.14",
56
- "@storybook/react": "6.5.14",
52
+ "@storybook/addon-essentials": "6.5.15",
53
+ "@storybook/addons": "6.5.15",
54
+ "@storybook/builder-webpack5": "6.5.15",
55
+ "@storybook/manager-webpack5": "6.5.15",
56
+ "@storybook/react": "6.5.15",
57
57
  "@svgr/cli": "6.5.1",
58
58
  "@testing-library/jest-dom": "5.16.5",
59
59
  "@testing-library/react": "13.4.0",
60
60
  "@testing-library/react-hooks": "8.0.1",
61
61
  "@types/classnames": "2.3.0",
62
- "@types/jest": "29.2.4",
62
+ "@types/jest": "29.2.5",
63
63
  "@types/lodash.throttle": "4.1.7",
64
64
  "@types/media-typer": "1.1.1",
65
65
  "@types/react": "18.0.26",
66
- "@whitespace/storybook-addon-html": "^5.0.3",
66
+ "@whitespace/storybook-addon-html": "^5.1.1",
67
67
  "autoprefixer": "10.4.13",
68
- "core-js": "3.26.1",
69
- "css-loader": "6.7.2",
70
- "eslint": "8.29.0",
68
+ "core-js": "3.27.1",
69
+ "css-loader": "6.7.3",
70
+ "eslint": "8.31.0",
71
71
  "file-loader": "6.2.0",
72
72
  "jest": "29.3.1",
73
73
  "jest-environment-jsdom": "29.3.1",
74
74
  "nested-object-access": "^0.2.5",
75
- "np": "7.6.2",
75
+ "np": "7.6.3",
76
76
  "postcss-flexbugs-fixes": "5.0.2",
77
77
  "postcss-loader": "7.0.2",
78
- "prettier": "2.8.0",
78
+ "prettier": "2.8.1",
79
79
  "raw-loader": "4.0.2",
80
80
  "react": "18.2.0",
81
81
  "react-dom": "18.2.0",
@@ -87,17 +87,17 @@
87
87
  "rollup-plugin-postcss": "4.0.2",
88
88
  "rollup-plugin-svgo": "2.0.0",
89
89
  "rollup-plugin-typescript2": "0.34.1",
90
- "sass": "1.56.1",
90
+ "sass": "1.57.1",
91
91
  "sass-loader": "13.2.0",
92
- "sharp": "0.31.2",
93
- "sharp-cli": "3.0.0",
92
+ "sharp": "0.31.3",
93
+ "sharp-cli": "4.1.0",
94
94
  "style-loader": "3.3.1",
95
- "stylelint": "14.16.0",
95
+ "stylelint": "14.16.1",
96
96
  "svg2vectordrawable": "2.9.1",
97
97
  "svgo": "3.0.2",
98
98
  "ts-jest": "29.0.3",
99
99
  "ts-node": "10.9.1",
100
- "typescript": "4.9.3"
100
+ "typescript": "4.9.4"
101
101
  },
102
102
  "scripts": {
103
103
  "build": "./scripts/build.sh",
package/styles/components/Icon/iconColors.scss CHANGED
@@ -78,6 +78,10 @@
78
78
  fill: var(--c-icon-connect);
79
79
  }
80
80
 
81
+ .cobalt-Icon--colorConnectAlt {
82
+ fill: var(--c-icon-connectAlt);
83
+ }
84
+
81
85
  .cobalt-Icon--colorDriver {
82
86
  fill: var(--c-icon-driver);
83
87
  }
package/styles/core/_colors-map.scss CHANGED
@@ -34,6 +34,7 @@ $theme-colors-map: (
34
34
  DEFAULT: var(--c-l-turquoise),
35
35
  hover: var(--c-l-turquoise)
36
36
  ),
37
+ connectAlt: var(--c-l-grey-light),
37
38
  driver: var(--c-l-deprecatedDriver),
38
39
  owner: var(--c-l-indigo-dark),
39
40
  disabled: var(--c-l-grey-light),
@@ -59,7 +60,7 @@ $theme-colors-map: (
59
60
  accentAlt: var(--c-l-white),
60
61
  accentAltInteractive: (
61
62
  DEFAULT: var(--c-l-white),
62
- hover: var(--c-l-indigo)
63
+ hover: var(--c-l-white)
63
64
  ),
64
65
  info: var(--c-l-graphite-light),
65
66
  error: var(--c-l-red),
@@ -182,7 +183,7 @@ $theme-colors-map: (
182
183
  accentAlt: var(--c-l-white),
183
184
  accentAltInteractive: (
184
185
  DEFAULT: var(--c-l-white),
185
- hover: var(--c-l-indigo)
186
+ hover: var(--c-l-white)
186
187
  ),
187
188
  info: var(--c-l-graphite-light),
188
189
  error: var(--c-l-red),
@@ -190,6 +191,7 @@ $theme-colors-map: (
190
191
  success: var(--c-l-green),
191
192
  successAlt: var(--c-l-white),
192
193
  connect: var(--c-l-turquoise),
194
+ connectAlt: var(--c-l-turquoise),
193
195
  driver: var(--c-l-graphite),
194
196
  owner: var(--c-l-white),
195
197
  warning: var(--c-l-coral),
package/styles/core/palette.scss CHANGED
@@ -47,8 +47,10 @@
47
47
  --c-red-500: #c71414;
48
48
  --c-red-700: #af1212;
49
49
  --c-red-900: #3f2424;
50
+ --c-turquoise-50: #ecf9fb;
50
51
  --c-turquoise-500: #5ecbdd;
51
- --c-turquoise-700: #53b3c2;
52
+ --c-turquoise-700: #4cbed4;
53
+ --c-turquoise-900: #31acc7;
52
54
  --c-white: #fff;
53
55
  --c-yellow-100: #ffeed1;
54
56
  --c-yellow-300: #ffdda3;
package/styles/core/theme.scss CHANGED
@@ -23,6 +23,7 @@
23
23
  --c-background-connect: var(--c-l-turquoise);
24
24
  --c-background-connectInteractive: var(--c-l-turquoise);
25
25
  --c-background-connectInteractive--hover: var(--c-l-turquoise);
26
+ --c-background-connectAlt: var(--c-l-grey-light);
26
27
  --c-background-driver: var(--c-l-deprecatedDriver);
27
28
  --c-background-owner: var(--c-l-indigo-dark);
28
29
  --c-background-disabled: var(--c-l-grey-light);
@@ -39,7 +40,7 @@
39
40
  --c-text-accentInteractive--hover: var(--c-l-blue);
40
41
  --c-text-accentAlt: var(--c-l-white);
41
42
  --c-text-accentAltInteractive: var(--c-l-white);
42
- --c-text-accentAltInteractive--hover: var(--c-l-indigo);
43
+ --c-text-accentAltInteractive--hover: var(--c-l-white);
43
44
  --c-text-info: var(--c-l-graphite-light);
44
45
  --c-text-error: var(--c-l-red);
45
46
  --c-text-errorAlt: var(--c-l-white);
@@ -116,13 +117,14 @@
116
117
  --c-icon-accentInteractive--hover: var(--c-l-indigo);
117
118
  --c-icon-accentAlt: var(--c-l-white);
118
119
  --c-icon-accentAltInteractive: var(--c-l-white);
119
- --c-icon-accentAltInteractive--hover: var(--c-l-indigo);
120
+ --c-icon-accentAltInteractive--hover: var(--c-l-white);
120
121
  --c-icon-info: var(--c-l-graphite-light);
121
122
  --c-icon-error: var(--c-l-red);
122
123
  --c-icon-errorAlt: var(--c-l-red);
123
124
  --c-icon-success: var(--c-l-green);
124
125
  --c-icon-successAlt: var(--c-l-white);
125
126
  --c-icon-connect: var(--c-l-turquoise);
127
+ --c-icon-connectAlt: var(--c-l-turquoise);
126
128
  --c-icon-driver: var(--c-l-graphite);
127
129
  --c-icon-owner: var(--c-l-white);
128
130
  --c-icon-warning: var(--c-l-coral);
package/tokens/palette.js CHANGED
@@ -61,8 +61,10 @@ const red = {
61
61
  "900": "#3F2424"
62
62
  };
63
63
  const turquoise = {
64
+ "50": "#ECF9FB",
64
65
  "500": "#5ECBDD",
65
- "700": "#53B3C2"
66
+ "700": "#4CBED4",
67
+ "900": "#31ACC7"
66
68
  };
67
69
  const white = "#fff";
68
70
  const yellow = {
package/tokens/palette.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/tokens/theme.js CHANGED
@@ -29,6 +29,7 @@ const background = {
29
29
  DEFAULT: "turquoise/turquoise.500/turquoise.500",
30
30
  hover: "turquoise/turquoise.700/turquoise.500"
31
31
  },
32
+ connectAlt: "grey.light/turquoise.50/turquoise.900",
32
33
  driver: "deprecatedDriver/yellow.500/yellow.500",
33
34
  owner: "indigo.dark/navy.700/navy.700",
34
35
  disabled: "grey.light/navy.100/black.50",
@@ -54,7 +55,7 @@ const text = {
54
55
  accentAlt: "white/purple.500/grey.100",
55
56
  accentAltInteractive: {
56
57
  DEFAULT: "white/purple.500/grey.100",
57
- hover: "indigo/purple.700/grey.100"
58
+ hover: "white/purple.700/grey.100"
58
59
  },
59
60
  info: "graphite.light/yellow.900/yellow.300",
60
61
  error: "red/red.500/red.400",
@@ -177,7 +178,7 @@ const icon = {
177
178
  accentAlt: "white/purple.500/grey.100",
178
179
  accentAltInteractive: {
179
180
  DEFAULT: "white/purple.500/grey.100",
180
- hover: "indigo/purple.700/grey.100"
181
+ hover: "white/purple.700/grey.100"
181
182
  },
182
183
  info: "graphite.light/yellow.900/yellow.300",
183
184
  error: "red/red.500/red.400",
@@ -185,6 +186,7 @@ const icon = {
185
186
  success: "green/green.700/green.700",
186
187
  successAlt: "white/green.900/green.100",
187
188
  connect: "turquoise/turquoise.500/white",
189
+ connectAlt: "turquoise/turquoise.900/turquoise.50",
188
190
  driver: "graphite/navy.700//navy.700",
189
191
  owner: "white/white/white",
190
192
  warning: "coral/orange.500/orange.300",
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/Icon/index.d.ts CHANGED
@@ -5,7 +5,7 @@ interface IconsMap {
5
5
  }
6
6
  export declare const BUNDLED_ICONS: IconsMap;
7
7
  export type IconSources = keyof typeof iconTokens.icons;
8
- export declare const iconColors: ("info" | "amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "baseInteractive" | "subdued" | "subduedInteractive" | "accent" | "accentInteractive" | "accentAlt" | "accentAltInteractive" | "error" | "errorAlt" | "success" | "successAlt" | "connect" | "driver" | "owner" | "warning" | "infoAlt" | "inversed" | "disabled")[];
8
+ export declare const iconColors: ("info" | "amber" | "blue" | "coral" | "graphite" | "graphiteLight" | "green" | "greenDark" | "greenLight" | "grey" | "greyDark" | "greyLight" | "greyLighter" | "indigo" | "indigoDark" | "purple" | "purpleLight" | "red" | "turquoise" | "white" | "base" | "baseInteractive" | "subdued" | "subduedInteractive" | "accent" | "accentInteractive" | "accentAlt" | "accentAltInteractive" | "error" | "errorAlt" | "success" | "successAlt" | "connect" | "connectAlt" | "driver" | "owner" | "warning" | "infoAlt" | "inversed" | "disabled")[];
9
9
  export type IconColorsType = typeof iconColors[number];
10
10
  export interface IconProps {
11
11
  source: IconSources;
package/types/tokens/index.d.ts CHANGED
@@ -423,8 +423,10 @@ export declare const palette: {
423
423
  "900": string;
424
424
  };
425
425
  turquoise: {
426
+ "50": string;
426
427
  "500": string;
427
428
  "700": string;
429
+ "900": string;
428
430
  };
429
431
  white: string;
430
432
  yellow: {
@@ -468,6 +470,7 @@ export declare const theme: {
468
470
  DEFAULT: string;
469
471
  hover: string;
470
472
  };
473
+ connectAlt: string;
471
474
  driver: string;
472
475
  owner: string;
473
476
  disabled: string;
@@ -624,6 +627,7 @@ export declare const theme: {
624
627
  success: string;
625
628
  successAlt: string;
626
629
  connect: string;
630
+ connectAlt: string;
627
631
  driver: string;
628
632
  owner: string;
629
633
  warning: string;
package/utilities.css CHANGED
@@ -3890,6 +3890,10 @@
3890
3890
  background-color: #5ecbdd
3891
3891
  }
3892
3892
 
3893
+ .c-bg-connectAlt {
3894
+ background-color: #edebed
3895
+ }
3896
+
3893
3897
  .c-bg-driver {
3894
3898
  background-color: #ffd988
3895
3899
  }
@@ -4007,11 +4011,11 @@
4007
4011
  }
4008
4012
 
4009
4013
  .c-text-accentAltInteractive:hover {
4010
- color: #61366b
4014
+ color: #fff
4011
4015
  }
4012
4016
 
4013
4017
  .c-text-accentAltInteractive:focus {
4014
- color: #61366b
4018
+ color: #fff
4015
4019
  }
4016
4020
 
4017
4021
  .c-text-info {