@drivy/cobalt 0.41.0 → 0.42.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.
@@ -82,6 +82,7 @@ const text = {
82
82
  onAccent: "white/white",
83
83
  onError: "white/white",
84
84
  onSuccess: "white/white",
85
+ onConnect: "white/white",
85
86
  onRideShare: "white/white"
86
87
  };
87
88
  const buttonBackground = {
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import cx from 'classnames';
3
+
4
+ const PlateNumber = ({ children, className }) => (React.createElement("div", { className: cx("cobalt-plate-number", className) }, children));
5
+
6
+ export { PlateNumber };
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/PlateNumber/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type PlateNumberPropsType = React.PropsWithChildren<{\n className?: string\n}>\n\nexport const PlateNumber = ({ children, className }: PlateNumberPropsType) => (\n <div className={cx(\"cobalt-plate-number\", className)}>{children}</div>\n)\n"],"names":[],"mappings":";;;AAOa,MAAA,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB,MACvE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,EAAG,EAAA,QAAQ,CAAO;;;;"}
@@ -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?:\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;;;;"}
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 | \"connectPrimary\"\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":";;;AAmBa,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/index.js CHANGED
@@ -21,6 +21,7 @@ export { default as Modal } from './components/Modal/index.js';
21
21
  export { Note } from './components/Note/index.js';
22
22
  export { default as PhotoDropzone } from './components/PhotoDropzone/index.js';
23
23
  export { Pill, PillGroup } from './components/Pill/index.js';
24
+ export { PlateNumber } from './components/PlateNumber/index.js';
24
25
  export { PriceTable, PriceTableRow } from './components/PriceTable/index.js';
25
26
  export { ProgressBar } from './components/ProgressBar/index.js';
26
27
  export { ProgressCircular } from './components/ProgressCircular/index.js';
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "0.41.0",
3
+ "version": "0.42.1",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/index.d.ts",
@@ -0,0 +1,21 @@
1
+ .cobalt-plate-number {
2
+ @include border(base);
3
+ @include bg-color(primary);
4
+ @include text-color(base);
5
+
6
+ display: inline-flex;
7
+
8
+ align-items: center;
9
+
10
+ height: 20px;
11
+
12
+ padding: 2px spacing("2xs");
13
+
14
+ font-size: 14px;
15
+
16
+ font-weight: 600;
17
+
18
+ line-height: 14px;
19
+
20
+ border-radius: border-radius();
21
+ }
@@ -1,15 +1,21 @@
1
1
  .cobalt- {
2
2
  &Tag {
3
- @include bg-color(neutral);
3
+ @include bg-color(neutralAlt);
4
4
  @include text-color(base);
5
- display: inline-block;
5
+ display: inline-flex;
6
6
 
7
- padding: spacing("2xs") spacing(xs);
7
+ align-items: center;
8
8
 
9
- font-size: 13px;
9
+ height: 20px;
10
+
11
+ padding: 2px spacing("2xs");
12
+
13
+ font-size: 14px;
10
14
 
11
15
  font-weight: 600;
12
16
 
17
+ line-height: 16px;
18
+
13
19
  border-radius: border-radius();
14
20
  }
15
21
 
@@ -23,7 +29,7 @@
23
29
  }
24
30
 
25
31
  &Tag--importantPrimary {
26
- @include text-color(inversed);
32
+ @include text-color(onError);
27
33
  @include bg-color(error);
28
34
  }
29
35
 
@@ -33,7 +39,7 @@
33
39
  }
34
40
 
35
41
  &Tag--successPrimary {
36
- @include text-color(inversed);
42
+ @include text-color(onSuccess);
37
43
  @include bg-color(success);
38
44
  }
39
45
 
@@ -48,7 +54,7 @@
48
54
  }
49
55
 
50
56
  &Tag--accentPrimary {
51
- @include text-color(inversed);
57
+ @include text-color(onAccent);
52
58
  @include bg-color(accent);
53
59
  }
54
60
 
@@ -56,4 +62,9 @@
56
62
  @include text-color(connectAlt);
57
63
  @include bg-color(connectAlt);
58
64
  }
65
+
66
+ &Tag--connectPrimary {
67
+ @include text-color(onConnect);
68
+ @include bg-color(connect);
69
+ }
59
70
  }
@@ -33,3 +33,4 @@
33
33
  @import "./components/ProgressCircular/index";
34
34
  @import "./components/ProgressBanner/index";
35
35
  @import "./components/ContainedIcon/index";
36
+ @import "./components/PlateNumber/index";
@@ -83,6 +83,7 @@ $theme-colors-map: (
83
83
  onAccent: var(--c-text-onAccent),
84
84
  onError: var(--c-text-onError),
85
85
  onSuccess: var(--c-text-onSuccess),
86
+ onConnect: var(--c-text-onConnect),
86
87
  onRideShare: var(--c-text-onRideShare)
87
88
  ),
88
89
  buttonBackground: (
@@ -62,6 +62,7 @@
62
62
  --c-text-onAccent: var(--c-white);
63
63
  --c-text-onError: var(--c-white);
64
64
  --c-text-onSuccess: var(--c-white);
65
+ --c-text-onConnect: var(--c-white);
65
66
  --c-text-onRideShare: var(--c-white);
66
67
  --c-buttonBackground-selected: var(--c-purple-100);
67
68
  --c-buttonBackground-destructiveInteractive: var(--c-red-100);
@@ -62,6 +62,7 @@
62
62
  --c-text-onAccent: var(--c-white);
63
63
  --c-text-onError: var(--c-white);
64
64
  --c-text-onSuccess: var(--c-white);
65
+ --c-text-onConnect: var(--c-white);
65
66
  --c-text-onRideShare: var(--c-white);
66
67
  --c-buttonBackground-selected: var(--c-purple-100);
67
68
  --c-buttonBackground-destructiveInteractive: var(--c-red-100);
@@ -236,6 +237,7 @@
236
237
  --c-text-onAccent: var(--c-white);
237
238
  --c-text-onError: var(--c-white);
238
239
  --c-text-onSuccess: var(--c-white);
240
+ --c-text-onConnect: var(--c-white);
239
241
  --c-text-onRideShare: var(--c-white);
240
242
  --c-buttonBackground-selected: var(--c-purpleDeep-900);
241
243
  --c-buttonBackground-destructiveInteractive: var(--c-red-900);
package/tokens/theme.js CHANGED
@@ -78,6 +78,7 @@ const text = {
78
78
  onAccent: "white/white",
79
79
  onError: "white/white",
80
80
  onSuccess: "white/white",
81
+ onConnect: "white/white",
81
82
  onRideShare: "white/white"
82
83
  };
83
84
  const buttonBackground = {
@@ -1 +1 @@
1
- {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ export type PlateNumberPropsType = React.PropsWithChildren<{
3
+ className?: string;
4
+ }>;
5
+ export declare const PlateNumber: ({ children, className }: PlateNumberPropsType) => React.JSX.Element;
@@ -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" | "importantPrimary" | "success" | "successPrimary" | "info" | "accent" | "accentPrimary" | "connect";
5
+ variant?: "muted" | "important" | "importantPrimary" | "success" | "successPrimary" | "info" | "accent" | "accentPrimary" | "connect" | "connectPrimary";
6
6
  }
7
7
  export declare const Tag: ({ children, variant, className }: TagProps) => React.JSX.Element;
@@ -21,6 +21,7 @@ export { default as Modal } from "./components/Modal";
21
21
  export { Note } from "./components/Note";
22
22
  export { default as PhotoDropzone } from "./components/PhotoDropzone";
23
23
  export { Pill, PillGroup } from "./components/Pill";
24
+ export { PlateNumber } from "./components/PlateNumber";
24
25
  export { PriceTable, PriceTableRow } from "./components/PriceTable";
25
26
  export { ProgressBar } from "./components/ProgressBar";
26
27
  export { ProgressCircular } from "./components/ProgressCircular";
@@ -538,6 +538,7 @@ export declare const theme: {
538
538
  onAccent: string;
539
539
  onError: string;
540
540
  onSuccess: string;
541
+ onConnect: string;
541
542
  onRideShare: string;
542
543
  };
543
544
  buttonBackground: {
package/utilities.css CHANGED
@@ -142,6 +142,7 @@
142
142
  --c-text-onAccent: var(--c-white);
143
143
  --c-text-onError: var(--c-white);
144
144
  --c-text-onSuccess: var(--c-white);
145
+ --c-text-onConnect: var(--c-white);
145
146
  --c-text-onRideShare: var(--c-white);
146
147
  --c-buttonBackground-selected: var(--c-purple-100);
147
148
  --c-buttonBackground-destructiveInteractive: var(--c-red-100);
@@ -5528,6 +5529,10 @@
5528
5529
  color: var(--c-text-onSuccess);
5529
5530
  }
5530
5531
 
5532
+ .c-text-onConnect {
5533
+ color: var(--c-text-onConnect);
5534
+ }
5535
+
5531
5536
  .c-text-onRideShare {
5532
5537
  color: var(--c-text-onRideShare);
5533
5538
  }