@drivy/cobalt 0.26.3 → 0.28.0

package/styles/core/typography.scss

@@ -72,177 +72,3 @@ $text-variants-data: (
 @function line-height($name) {
   @return nth(font-styles($name), 2);
 }
-
-// Those mixins are deprecated, please use the ones from ./text.scss
-
-@mixin text-style-hero-heading {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: remToPx(2.25rem);
-  font-weight: 700;
-  line-height: remToPx(2.5rem);
-  color: color(white);
-
-  text-shadow: 0 3px 20px rgba(#000, 0.3);
-
-  @include breakpoint($from: sm) {
-    font-size: remToPx(3.5rem);
-    line-height: remToPx(3.75rem);
-  }
-}
-
-@mixin text-style-hero-subheading {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: remToPx(1.25rem);
-  font-weight: 700;
-  line-height: remToPx(1.5rem);
-  color: color(white);
-
-  text-shadow: 0 3px 20px rgba(#000, 0.3);
-
-  @include breakpoint($from: sm) {
-    font-size: remToPx(1.75rem);
-    line-height: remToPx(2rem);
-  }
-}
-
-@mixin text-style-title-extralarge {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 2rem;
-  font-weight: 700;
-  line-height: 2.25rem;
-  color: color(indigo, dark);
-
-  @include breakpoint($from: sm) {
-    font-size: remToPx(2.5rem);
-    line-height: remToPx(2.75rem);
-  }
-}
-
-@mixin text-style-title-large {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1.75rem;
-  color: color(indigo, dark);
-
-  @include breakpoint($from: sm) {
-    font-size: remToPx(2rem);
-    line-height: remToPx(2.25rem);
-  }
-}
-
-@mixin text-style-title {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 1.125rem;
-  font-weight: 700;
-  line-height: 1.25rem;
-  color: color(indigo, dark);
-
-  @include breakpoint($from: sm) {
-    font-size: remToPx(1.5rem);
-    line-height: remToPx(1.75rem);
-  }
-}
-
-@mixin text-style-title-small {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  color: color(indigo, dark);
-
-  @include breakpoint($from: sm) {
-    font-size: remToPx(1.125rem);
-    line-height: remToPx(1.5rem);
-  }
-}
-
-@mixin text-style-title-tiny {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  color: color(indigo, dark);
-}
-
-@mixin text-style--titleSubdued {
-  color: color(purple);
-}
-
-@mixin text-style-body-large {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-size: font-size(body-large);
-  line-height: line-height(body-large);
-}
-
-@mixin text-style-body {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-size: font-size(body);
-  line-height: line-height(body);
-  color: color(graphite);
-}
-
-@mixin text-style-body-small {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-size: font-size(body-small);
-  line-height: line-height(body-small);
-}
-
-@mixin text-style--bodySubdued {
-  color: color(graphite, light);
-}
-
-@mixin text-style--bodyInversed {
-  color: color(white);
-}
-
-@mixin text-style-caption {
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-size: font-size(caption);
-  line-height: line-height(caption);
-
-  color: rgba(color(graphite), 0.5);
-}
-
-@mixin text-style-section-header {
-  @include text-color(subdued);
-
-  // reset is necessary as we still apply default style to html tags such as hX
-  margin-bottom: 0;
-
-  font-family: font-family(brand);
-  font-weight: 700;
-  font-size: font-size(section-header);
-  line-height: line-height(section-header);
-
-  text-transform: uppercase;
-}

package/styles/core.scss

@@ -7,7 +7,6 @@
 @import "core/border-radius";
 @import "core/border";
 @import "core/breakpoints";
-@import "core/card";
 @import "core/elevation";
 @import "core/spacing";
 @import "core/typography";

package/styles/global.scss

@@ -1,2 +1 @@
 @import "global/spacing";
-@import "global/typography";

package/tokens/colors.js

@@ -29,6 +29,10 @@ const green = {
 const blue = "#2ea2ea";
 const deprecatedBlueGhost = "#2ea2ea0f";
 const deprecatedDriver = "#ffd988";
+const deprecatedSeasonLow = "#BDFFAC";
+const deprecatedSeasonMedium = "#94EA84";
+const deprecatedSeasonHigh = "#73C865";
+const deprecatedSeasonVeryHigh = "#54A949";
 var _colors = {
 	white: white,
 	grey: grey,
@@ -42,8 +46,12 @@ var _colors = {
 	green: green,
 	blue: blue,
 	deprecatedBlueGhost: deprecatedBlueGhost,
-	deprecatedDriver: deprecatedDriver
+	deprecatedDriver: deprecatedDriver,
+	deprecatedSeasonLow: deprecatedSeasonLow,
+	deprecatedSeasonMedium: deprecatedSeasonMedium,
+	deprecatedSeasonHigh: deprecatedSeasonHigh,
+	deprecatedSeasonVeryHigh: deprecatedSeasonVeryHigh
 };
 
-export { amber, blue, coral, _colors as default, deprecatedBlueGhost, deprecatedDriver, graphite, green, grey, indigo, purple, red, turquoise, white };
+export { amber, blue, coral, _colors as default, deprecatedBlueGhost, deprecatedDriver, deprecatedSeasonHigh, deprecatedSeasonLow, deprecatedSeasonMedium, deprecatedSeasonVeryHigh, graphite, green, grey, indigo, purple, red, turquoise, white };
 //# sourceMappingURL=colors.js.map

package/tokens/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"colors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/tokens/palette.js

@@ -20,6 +20,7 @@ const green = {
 const navy = {
 	"50": "#F1F1F4",
 	"100": "#E3E2E8",
+	"200": "#BBB8C7",
 	"300": "#7B728E",
 	"500": "#362E53",
 	"700": "#261A48",
@@ -75,6 +76,16 @@ const yellow = {
 	"900": "#75592D",
 	"1000": "#3B2E17"
 };
+const season = {
+	"100": "#BDFFAC",
+	"200": "#94EA84",
+	"300": "#73C865",
+	"400": "#54A949",
+	"700": "#0B7011",
+	"800": "#005100",
+	"900": "#030",
+	"1000": "#001900"
+};
 var _palette = {
 	black: black,
 	grey: grey,
@@ -87,8 +98,9 @@ var _palette = {
 	red: red,
 	turquoise: turquoise,
 	white: white,
-	yellow: yellow
+	yellow: yellow,
+	season: season
 };
 
-export { black, _palette as default, green, grey, navy, orange, purple, purpleDeep, purpleLight, red, turquoise, white, yellow };
+export { black, _palette as default, green, grey, navy, orange, purple, purpleDeep, purpleLight, red, season, turquoise, white, yellow };
 //# sourceMappingURL=palette.js.map

package/tokens/palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"palette.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/tokens/theme.js

@@ -34,7 +34,11 @@ const background = {
 	owner: "indigo.dark/navy.700/navy.700",
 	disabled: "grey.light/navy.100/black.50",
 	neutral: "grey.light/navy.100/black.50",
-	neutralAlt: "grey.lighter/navy.50/black.100"
+	neutralAlt: "grey.lighter/navy.50/black.100",
+	seasonLow: "deprecatedSeasonLow/season.100/season.700",
+	seasonMedium: "deprecatedSeasonMedium/season.200/season.800",
+	seasonHigh: "deprecatedSeasonHigh/season.300/season.900",
+	seasonVeryHigh: "deprecatedSeasonVeryHigh/season.400/season.1000"
 };
 const text = {
 	base: "graphite/navy.700/grey.100",
@@ -58,15 +62,15 @@ const text = {
 		hover: "white/purple.700/grey.100"
 	},
 	info: "graphite.light/yellow.900/yellow.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
 	error: "red/red.500/red.400",
 	errorAlt: "white/red.500/red.500",
 	success: "green/green.700/green.700",
 	successAlt: "white/green.900/green.100",
+	warning: "coral/orange.500/orange.300",
 	connect: "turquoise/turquoise.500/turquoise.500",
 	driver: "graphite/navy.700/navy.700",
 	owner: "white/white/grey.100",
-	warning: "coral/orange.500/orange.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
 	inversed: "white/white/white"
 };
 const buttonBackground = {
@@ -181,16 +185,16 @@ const icon = {
 		hover: "white/purple.700/grey.100"
 	},
 	info: "graphite.light/yellow.900/yellow.300",
+	infoAlt: "turquoise/yellow.500/yellow.700",
 	error: "red/red.500/red.400",
 	errorAlt: "red/red.500/red.200",
 	success: "green/green.700/green.700",
 	successAlt: "white/green.900/green.100",
+	warning: "coral/orange.500/orange.300",
 	connect: "turquoise/turquoise.500/white",
 	connectAlt: "turquoise/turquoise.900/turquoise.50",
 	driver: "graphite/navy.700//navy.700",
 	owner: "white/white/white",
-	warning: "coral/orange.500/orange.300",
-	infoAlt: "turquoise/yellow.500/yellow.700",
 	inversed: "white/white/white",
 	disabled: "grey.lighter/navy.100/black.50"
 };
@@ -201,6 +205,12 @@ const stroke = {
 		hover: "graphite.light/navy.300/purpleDeep.400",
 		press: "graphite/navy.500/purpleDeep.400"
 	},
+	strong: "grey.dark/navy.300/navy.200",
+	strongInteractive: {
+		DEFAULT: "grey.dark/navy.300/navy.200",
+		hover: "graphite.light/navy.500/purpleDeep.400",
+		press: "graphite/navy.700/purpleDeep.400"
+	},
 	subdued: "grey.light/navy.100/black.50",
 	accent: "indigo/purple.500/purpleDeep.400",
 	accentInteractive: {
@@ -221,10 +231,10 @@ const fill = {
 	accent: "purple/purple.500/purpleDeep.400",
 	accentAlt: "purple/purple.100/purpleDeep.900",
 	error: "red/red.500/red.500",
-	success: "green/green.500/green.700",
 	negative: "red/red.150/red.900",
-	neutral: "grey.lighter/navy.50/black.100",
-	disabled: "grey.dark/navy.300/grey.300"
+	success: "green/green.500/green.700",
+	disabled: "grey.dark/navy.300/grey.300",
+	neutral: "grey.lighter/navy.50/black.100"
 };
 var _theme = {
 	background: background,

package/tokens/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"theme.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/types/components/Icon/index.d.ts

@@ -5,7 +5,7 @@ interface IconsMap {
 }
 export declare const BUNDLED_ICONS: IconsMap;
 export type IconSources = keyof typeof iconTokens.icons;
-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")[];
+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" | "infoAlt" | "error" | "errorAlt" | "success" | "successAlt" | "warning" | "connect" | "connectAlt" | "driver" | "owner" | "inversed" | "disabled")[];
 export type IconColorsType = typeof iconColors[number];
 export interface IconProps {
     source: IconSources;

package/types/tokens/index.d.ts

@@ -36,6 +36,10 @@ export declare const colors: {
     blue: string;
     deprecatedBlueGhost: string;
     deprecatedDriver: string;
+    deprecatedSeasonLow: string;
+    deprecatedSeasonMedium: string;
+    deprecatedSeasonHigh: string;
+    deprecatedSeasonVeryHigh: string;
 };
 export declare const countries: {
     flags: {
@@ -382,6 +386,7 @@ export declare const palette: {
     navy: {
         "50": string;
         "100": string;
+        "200": string;
         "300": string;
         "500": string;
         "700": string;
@@ -437,6 +442,16 @@ export declare const palette: {
         "900": string;
         "1000": string;
     };
+    season: {
+        "100": string;
+        "200": string;
+        "300": string;
+        "400": string;
+        "700": string;
+        "800": string;
+        "900": string;
+        "1000": string;
+    };
 };
 export declare const theme: {
     background: {
@@ -476,6 +491,10 @@ export declare const theme: {
         disabled: string;
         neutral: string;
         neutralAlt: string;
+        seasonLow: string;
+        seasonMedium: string;
+        seasonHigh: string;
+        seasonVeryHigh: string;
     };
     text: {
         base: string;
@@ -499,15 +518,15 @@ export declare const theme: {
             hover: string;
         };
         info: string;
+        infoAlt: string;
         error: string;
         errorAlt: string;
         success: string;
         successAlt: string;
+        warning: string;
         connect: string;
         driver: string;
         owner: string;
-        warning: string;
-        infoAlt: string;
         inversed: string;
     };
     buttonBackground: {
@@ -622,16 +641,16 @@ export declare const theme: {
             hover: string;
         };
         info: string;
+        infoAlt: string;
         error: string;
         errorAlt: string;
         success: string;
         successAlt: string;
+        warning: string;
         connect: string;
         connectAlt: string;
         driver: string;
         owner: string;
-        warning: string;
-        infoAlt: string;
         inversed: string;
         disabled: string;
     };
@@ -642,6 +661,12 @@ export declare const theme: {
             hover: string;
             press: string;
         };
+        strong: string;
+        strongInteractive: {
+            DEFAULT: string;
+            hover: string;
+            press: string;
+        };
         subdued: string;
         accent: string;
         accentInteractive: {
@@ -662,9 +687,9 @@ export declare const theme: {
         accent: string;
         accentAlt: string;
         error: string;
-        success: string;
         negative: string;
-        neutral: string;
+        success: string;
         disabled: string;
+        neutral: string;
     };
 };