@ornikar/kitt-universal 23.0.2 → 23.2.1

package/dist/linaria-themes-node-20.10.cjs.web.js

@@ -936,209 +936,64 @@ const datePicker = {
   }
 };
 
-const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-/** @deprecated legacy typography type config is deprecated. */
-const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
-  baseAndSmall: {
-    fontSize: baseAndSmallFontSize,
-    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-  },
-  mediumAndWide: {
-    fontSize: mediumAndWideFontSize,
-    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-  }
-});
-const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
-  const config = {
-    fontSize,
-    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
-  };
-  return {
-    baseAndSmall: config,
-    mediumAndWide: config
-  };
-};
-const typography = {
-  colors: {
-    black: colors.black,
-    'black-anthracite': colors.blackAnthracite,
-    'black-disabled': lateOceanColorPalette.black400,
-    'black-light': lateOceanColorPalette.black555,
-    white: colors.white,
-    'white-light': colors.white,
-    primary: colors.primary,
-    'primary-light': colors.primaryLight,
-    accent: colors.accent,
-    success: colors.success,
-    danger: colors.danger,
-    warning: colors.warning
-  },
-  types: {
-    headings: {
-      fontFamily: {
-        native: {
-          regular: 'Moderat-Bold',
-          bold: 'Moderat-Bold'
-        },
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
-        }
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: 'normal',
-      configs: {
-        /* legacy */
-        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
-        header2: createLegacyTypographyTypeConfig(1.2, 32, 48, 1.1),
-        header3: createLegacyTypographyTypeConfig(1.2, 24, 40, 1.1),
-        header4: createLegacyTypographyTypeConfig(1.3, 18, 24, 1.2),
-        header5: createLegacyTypographyTypeConfig(1.3, 18, 18),
-        /* latest */
-        'heading-xxl': createTypographyConfig(56, 1.1),
-        'heading-xl': createTypographyConfig(48, 1.1),
-        'heading-l': createTypographyConfig(40, 1.1),
-        'heading-m': createTypographyConfig(32, 1.2),
-        'heading-s': createTypographyConfig(24, 1.2),
-        'heading-xs': createTypographyConfig(18, 1.3),
-        'heading-xxs': createTypographyConfig(16, 1.3)
-      }
-    },
-    'headings-impact': {
-      fontFamily: {
-        native: {
-          regular: 'Transducer-Black',
-          bold: 'Transducer-Black'
-        },
-        web: {
-          regular: 'TransducerBlack',
-          bold: 'TransducerBlack'
-        }
-      },
-      fontWeight: 900,
-      fontStyle: 'normal',
-      configs: {
-        /* legacy */
-        'header-impact-xxl': createLegacyTypographyTypeConfig(1.2, 56, 56),
-        'header-impact-xl': createLegacyTypographyTypeConfig(1.2, 48, 48),
-        'header-impact-l': createLegacyTypographyTypeConfig(1.2, 40, 40),
-        'header-impact-m': createLegacyTypographyTypeConfig(1.2, 32, 32),
-        'header-impact-s': createLegacyTypographyTypeConfig(1.2, 24, 24),
-        'header-impact-xs': createLegacyTypographyTypeConfig(1.2, 18, 18),
-        'header-impact-xxs': createLegacyTypographyTypeConfig(1.2, 16, 16),
-        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.2, 14, 14),
-        /* latest */
-        'heading-impact-xxl': createTypographyConfig(56, 1.2),
-        'heading-impact-xl': createTypographyConfig(48, 1.2),
-        'heading-impact-l': createTypographyConfig(40, 1.2),
-        'heading-impact-m': createTypographyConfig(32, 1.2),
-        'heading-impact-s': createTypographyConfig(24, 1.2),
-        'heading-impact-xs': createTypographyConfig(18, 1.2),
-        'heading-impact-xxs': createTypographyConfig(16, 1.2),
-        'heading-impact-xxxs': createTypographyConfig(14, 1.2)
-      }
-    },
-    bodies: {
-      fontFamily: {
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
-        },
-        native: {
-          regular: 'Moderat-Regular',
-          bold: 'Moderat-Bold'
-        }
-      },
-      fontWeight: {
-        regular: 400,
-        bold: 700
-      },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
-      configs: {
-        /* legacy */
-        'body-large': createLegacyTypographyTypeConfig(1.4, 18, 24),
-        'body-medium': createLegacyTypographyTypeConfig(1.4, 18, 18),
-        body: createLegacyTypographyTypeConfig(1.4, 16, 16),
-        'body-small': createLegacyTypographyTypeConfig(1.4, 14, 14),
-        'body-xsmall': createLegacyTypographyTypeConfig(1.4, 12, 12),
-        /* latest */
-        'body-xl': createTypographyConfig(24, 1.4),
-        'body-l': createTypographyConfig(18, 1.4),
-        'body-m': createTypographyConfig(16, 1.4),
-        'body-s': createTypographyConfig(14, 1.4),
-        'body-xs': createTypographyConfig(12, 1.4)
-      }
-    }
-  },
-  link: {
-    /** @deprecated not used in kitt anymore, use Typography instead */
-    disabledColor: colors.blackDisabled
-  }
-};
-
 const inputStatesStyle = {
   default: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette['eggshell.4'],
+    color: lateOceanColorPalette.black
   },
   pending: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: colors.separator,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette['eggshell.3'],
+    color: lateOceanColorPalette.black
   },
   valid: {
-    backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black100,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette.white,
+    borderColor: lateOceanColorPalette['eggshell.4'],
+    color: lateOceanColorPalette.black
   },
   hover: {
-    borderColor: lateOceanColorPalette.black200,
-    color: colors.black
+    backgroundColor: lateOceanColorPalette['eggshell.1'],
+    borderColor: lateOceanColorPalette['eggshell.5'],
+    color: lateOceanColorPalette.black
   },
   focus: {
-    borderColor: colors.primary,
-    color: colors.black
+    borderColor: lateOceanColorPalette['violine.9'],
+    color: lateOceanColorPalette.black
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator,
-    color: colors.blackDisabled
+    backgroundColor: lateOceanColorPalette['eggshell.2'],
+    borderColor: lateOceanColorPalette['eggshell.4'],
+    color: lateOceanColorPalette['eggshell.6']
   },
   invalid: {
-    borderColor: colors.separator,
-    color: colors.black
+    borderColor: lateOceanColorPalette['eggshell.3'],
+    color: lateOceanColorPalette.black
   }
 };
 const webAnimationDuration = '200ms';
 const webAnimationTimingFunction = 'ease-in-out';
-const webAnimationProperty = 'border-color';
+const webAnimationProperties = ['border-color', 'background-color'];
 const input = {
   minHeight: 40,
   color: {
-    selection: colors.primary,
-    placeholder: typography.colors['black-light']
+    selection: lateOceanColorPalette['violine.9'],
+    placeholder: lateOceanColorPalette['eggshell.9']
   },
-  borderWidth: 2,
-  borderRadius: 10,
+  borderWidth: 1,
+  borderRadius: 8,
   icon: {
     size: 20
   },
   rightContainer: {
-    padding: 10
+    padding: 16
   },
   padding: {
     horizontal: 16,
-    vertical: 5
+    vertical: 0
   },
   transition: {
-    property: webAnimationProperty,
+    properties: webAnimationProperties,
     duration: webAnimationDuration,
     timingFunction: webAnimationTimingFunction
   },
@@ -1148,11 +1003,8 @@ const input = {
 const inputField = {
   containerPaddingTop: 5,
   containerPaddingBottom: 10,
-  feedbackPaddingTop: {
-    base: 5,
-    small: 10
-  },
-  labelContainerPaddingBottom: 5,
+  feedbackPaddingTop: 4,
+  labelContainerPaddingBottom: 4,
   labelFeedbackMarginLeft: 6
 };
 
@@ -1284,21 +1136,52 @@ const fullscreenModal = {
 };
 
 const highlight = {
-  borderRadius: spacing * 5,
+  borderRadius: spacing * 2,
   /** @deprecated use primary instead */
   regular: {
-    backgroundColor: colors.accentLight
+    default: {
+      backgroundColor: colors.accentLight
+    },
+    hover: {
+      backgroundColor: colors.accentLight
+    }
   },
   primary: {
-    backgroundColor: colors.accentLight
+    default: {
+      backgroundColor: lateOceanColorPalette['lavender.3']
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['lavender.5']
+    }
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.moonPurple
+    default: {
+      backgroundColor: lateOceanColorPalette['violine.2']
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['violine.4']
+    }
+  },
+  ghost: {
+    default: {
+      backgroundColor: lateOceanColorPalette.white
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['eggshell.2']
+    }
   },
   dark: {
-    backgroundColor: lateOceanColorPalette.black100
+    default: {
+      backgroundColor: lateOceanColorPalette['eggshell.3']
+    },
+    hover: {
+      backgroundColor: lateOceanColorPalette['eggshell.2']
+    }
   },
-  padding: spacing * 5
+  padding: {
+    medium: spacing * 4,
+    large: spacing * 6
+  }
 };
 
 const getIconSizeFromFontSize = fontSize => {
@@ -1421,6 +1304,152 @@ const pageLoader = {
   }
 };
 
+const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
+/** @deprecated legacy typography type config is deprecated. */
+const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
+  baseAndSmall: {
+    fontSize: baseAndSmallFontSize,
+    lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
+  },
+  mediumAndWide: {
+    fontSize: mediumAndWideFontSize,
+    lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
+  }
+});
+const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
+  const config = {
+    fontSize,
+    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
+  };
+  return {
+    baseAndSmall: config,
+    mediumAndWide: config
+  };
+};
+const typography = {
+  colors: {
+    black: colors.black,
+    'black-anthracite': colors.blackAnthracite,
+    'black-disabled': lateOceanColorPalette.black400,
+    'black-light': lateOceanColorPalette.black555,
+    white: colors.white,
+    'white-light': colors.white,
+    primary: colors.primary,
+    'primary-light': colors.primaryLight,
+    accent: colors.accent,
+    success: colors.success,
+    danger: colors.danger,
+    warning: colors.warning
+  },
+  types: {
+    headings: {
+      fontFamily: {
+        native: {
+          regular: 'Moderat-Bold',
+          bold: 'Moderat-Bold'
+        },
+        web: {
+          regular: 'Moderat',
+          bold: 'Moderat'
+        }
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: 'normal',
+      configs: {
+        /* legacy */
+        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
+        header2: createLegacyTypographyTypeConfig(1.2, 32, 48, 1.1),
+        header3: createLegacyTypographyTypeConfig(1.2, 24, 40, 1.1),
+        header4: createLegacyTypographyTypeConfig(1.3, 18, 24, 1.2),
+        header5: createLegacyTypographyTypeConfig(1.3, 18, 18),
+        /* latest */
+        'heading-xxl': createTypographyConfig(56, 1.1),
+        'heading-xl': createTypographyConfig(48, 1.1),
+        'heading-l': createTypographyConfig(40, 1.1),
+        'heading-m': createTypographyConfig(32, 1.2),
+        'heading-s': createTypographyConfig(24, 1.2),
+        'heading-xs': createTypographyConfig(18, 1.3),
+        'heading-xxs': createTypographyConfig(16, 1.3)
+      }
+    },
+    'headings-impact': {
+      fontFamily: {
+        native: {
+          regular: 'Transducer-Black',
+          bold: 'Transducer-Black'
+        },
+        web: {
+          regular: 'TransducerBlack',
+          bold: 'TransducerBlack'
+        }
+      },
+      fontWeight: 900,
+      fontStyle: 'normal',
+      configs: {
+        /* legacy */
+        'header-impact-xxl': createLegacyTypographyTypeConfig(1.2, 56, 56),
+        'header-impact-xl': createLegacyTypographyTypeConfig(1.2, 48, 48),
+        'header-impact-l': createLegacyTypographyTypeConfig(1.2, 40, 40),
+        'header-impact-m': createLegacyTypographyTypeConfig(1.2, 32, 32),
+        'header-impact-s': createLegacyTypographyTypeConfig(1.2, 24, 24),
+        'header-impact-xs': createLegacyTypographyTypeConfig(1.2, 18, 18),
+        'header-impact-xxs': createLegacyTypographyTypeConfig(1.2, 16, 16),
+        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.2, 14, 14),
+        /* latest */
+        'heading-impact-xxl': createTypographyConfig(56, 1.2),
+        'heading-impact-xl': createTypographyConfig(48, 1.2),
+        'heading-impact-l': createTypographyConfig(40, 1.2),
+        'heading-impact-m': createTypographyConfig(32, 1.2),
+        'heading-impact-s': createTypographyConfig(24, 1.2),
+        'heading-impact-xs': createTypographyConfig(18, 1.2),
+        'heading-impact-xxs': createTypographyConfig(16, 1.2),
+        'heading-impact-xxxs': createTypographyConfig(14, 1.2)
+      }
+    },
+    bodies: {
+      fontFamily: {
+        web: {
+          regular: 'Moderat',
+          bold: 'Moderat'
+        },
+        native: {
+          regular: 'Moderat-Regular',
+          bold: 'Moderat-Bold'
+        }
+      },
+      fontWeight: {
+        regular: 400,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
+      configs: {
+        /* legacy */
+        'body-large': createLegacyTypographyTypeConfig(1.4, 18, 24),
+        'body-medium': createLegacyTypographyTypeConfig(1.4, 18, 18),
+        body: createLegacyTypographyTypeConfig(1.4, 16, 16),
+        'body-small': createLegacyTypographyTypeConfig(1.4, 14, 14),
+        'body-xsmall': createLegacyTypographyTypeConfig(1.4, 12, 12),
+        /* latest */
+        'body-xl': createTypographyConfig(24, 1.4),
+        'body-l': createTypographyConfig(18, 1.4),
+        'body-m': createTypographyConfig(16, 1.4),
+        'body-s': createTypographyConfig(14, 1.4),
+        'body-xs': createTypographyConfig(12, 1.4)
+      }
+    }
+  },
+  link: {
+    /** @deprecated not used in kitt anymore, use Typography instead */
+    disabledColor: colors.blackDisabled
+  }
+};
+
 const picker = {
   ios: {
     default: {