@ornikar/kitt-universal 32.0.1 → 32.0.2-canary.5684f2ea0c253c607f3c2621d6f37a8df3f39549.0

package/dist/index.es.js

@@ -54,6 +54,9 @@ var hex2rgba = function (hex) {
 var createColorScale = function (colorScale) {
   return colorScale;
 };
+
+// WARNING
+// If you update this palette, don't forget to update the palette in @ornikar/bumper as well.
 var colorScales = {
   deepPurple: createColorScale({
     5: '#936C93',
@@ -118,9 +121,15 @@ var colorScales = {
   red: createColorScale({
     1: '#FDE4E3',
     2: '#FAB8B8',
-    6: '#F14847',
+    6: '#E2483D',
     7: '#BD100F'
   }),
+  mauve: createColorScale({
+    1: '#F8E7FF',
+    2: '#F1D0FB',
+    3: '#E4A4F9',
+    4: '#D283EC'
+  }),
   'beige-alpha': createColorScale({
     '25': '#C1B59F40',
     '40': '#C1B59F66',
@@ -235,8 +244,14 @@ var colors = {
         }
       },
       highlight: {
-        "default": deepPurpleColorPalette['blue.1'],
-        pressed: deepPurpleColorPalette['blue.2']
+        mid: {
+          "default": deepPurpleColorPalette['mauve.1'],
+          pressed: deepPurpleColorPalette['mauve.2']
+        },
+        hi: {
+          "default": deepPurpleColorPalette['mauve.3'],
+          pressed: deepPurpleColorPalette['mauve.4']
+        }
       },
       info: {
         hi: deepPurpleColorPalette['blue.6'],
@@ -264,17 +279,19 @@ var colors = {
       base: {
         hi: deepPurpleColorPalette['grey.9'],
         mid: deepPurpleColorPalette['beige.3'],
+        low: deepPurpleColorPalette['beige.2'],
         onContrasted: {
           hi: deepPurpleColorPalette['grey.0'],
           mid: deepPurpleColorPalette['white-alpha.20']
-        }
+        },
+        accent: deepPurpleColorPalette['deepPurple.8']
       },
-      accent: deepPurpleColorPalette['deepPurple.8'],
       info: deepPurpleColorPalette['blue.6'],
       success: deepPurpleColorPalette['green.6'],
       warning: deepPurpleColorPalette['yellow.6'],
       danger: deepPurpleColorPalette['red.6'],
-      disabled: deepPurpleColorPalette['grey.2']
+      disabled: deepPurpleColorPalette['grey.2'],
+      highlight: deepPurpleColorPalette['mauve.3']
     }
   }
 };
@@ -2007,6 +2024,7 @@ var highlight = {
     }
   },
   padding: {
+    small: spacing * 2,
     medium: spacing * 4,
     large: spacing * 6
   }
@@ -8986,6 +9004,9 @@ var useNativeAnimation$1 = function (_ref) {
   };
 };
 
+var getTitleTypographyType = function (size) {
+  return size === 'small' ? 'label-medium' : 'label-large';
+};
 function Highlight(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
@@ -9013,6 +9034,11 @@ function Highlight(_ref) {
     isInitialRender = _useState6[0],
     setIsInitialRender = _useState6[1];
   var highlightStyle = {
+    small: {
+      marginBottom: 'kitt.1',
+      spaceBetween: 'kitt.2',
+      contentMarginY: 8
+    },
     medium: {
       marginBottom: 'kitt.1',
       spaceBetween: 'kitt.2',
@@ -9059,8 +9085,8 @@ function Highlight(_ref) {
           children: [title && /*#__PURE__*/jsx(View, {
             marginBottom: highlightStyle[size].marginBottom,
             children: /*#__PURE__*/jsx(Typography.Text, {
-              variant: "bold",
-              base: "body-m",
+              variant: "semibold",
+              base: getTitleTypographyType(size),
               ellipsizeMode: "clip",
               children: title
             })
@@ -9094,8 +9120,8 @@ function Highlight(_ref) {
             flexShrink: 1,
             width: "100%",
             children: /*#__PURE__*/jsx(Typography.Text, {
-              variant: "bold",
-              base: "body-m",
+              variant: "semibold",
+              base: getTitleTypographyType(size),
               ellipsizeMode: "clip",
               children: title
             })