@ornikar/kitt-universal 1.1.0 → 2.2.0

package/dist/index-node-14.17.cjs.js

@@ -537,7 +537,7 @@ const getColorFromState = state => {
       return 'danger';
 
     default:
-      return 'grey';
+      return 'black-light';
   }
 };
 
@@ -1087,20 +1087,6 @@ const PressableIconButton = /*#__PURE__*/styled__default(PrimitivePressable).wit
     `;
 });
 
-function WebAnimatedContainer({
-  children,
-  color,
-  disabled,
-  onPress
-}) {
-  return /*#__PURE__*/React__default.createElement(PressableIconButton, {
-    accessibilityRole: "button",
-    color: color,
-    disabled: disabled,
-    onPress: onPress
-  }, children);
-}
-
 const AnimatedIconButtonBackground = /*#__PURE__*/styled__default(Animated__default.View).withConfig({
   displayName: "PressableAnimatedContainer__AnimatedIconButtonBackground",
   componentId: "kitt-universal__sc-xl9ll5-0"
@@ -1126,8 +1112,7 @@ const AnimatedViewContainer = /*#__PURE__*/styled__default(Animated__default.Vie
   displayName: "PressableAnimatedContainer__AnimatedViewContainer",
   componentId: "kitt-universal__sc-xl9ll5-1"
 })(["position:relative;align-items:center;justify-content:center;width:100%;height:100%;"]);
-
-function NativeAnimatedContainer({
+function PressableAnimatedContainer({
   disabled,
   color = 'black',
   children,
@@ -1148,7 +1133,7 @@ function NativeAnimatedContainer({
     };
     _f.asString = "function _f(){const{withSpring,pressed}=jsThis._closure;{return{opacity:withSpring(pressed.value?1:0)};}}";
     _f.__workletHash = 10645190329247;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (64:41)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (55:41)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1182,7 +1167,7 @@ function NativeAnimatedContainer({
     };
     _f.asString = "function _f(){const{withSpring,pressed,theme}=jsThis._closure;{return{transform:[{scale:withSpring(pressed.value?theme.kitt.iconButton.scale.base.active:theme.kitt.iconButton.scale.base.default)}]};}}";
     _f.__workletHash = 13861998831411;
-    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (70:39)";
+    _f.__location = "/home/circleci/repo/@ornikar/kitt-universal/src/IconButton/PressableAnimatedContainer.tsx (61:39)";
     _f.__optimalization = 2;
 
     global.__reanimatedWorkletInit(_f);
@@ -1215,8 +1200,6 @@ function NativeAnimatedContainer({
   }), children));
 }
 
-const PressableAnimatedContainer = reactNative.Platform.OS === 'web' ? WebAnimatedContainer : NativeAnimatedContainer;
-
 const IconButtonContentBorder = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "IconButton__IconButtonContentBorder",
   componentId: "kitt-universal__sc-swelbf-0"
@@ -1959,23 +1942,57 @@ const StoryGrid = {
 const Container = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
   theme,
-  type
-}) => theme.kitt.tag[type].backgroundColor, ({
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].backgroundColor, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderWidth, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderColor, ({
   theme
 }) => theme.kitt.tag.padding, ({
   theme
 }) => theme.kitt.tag.borderRadius);
+const getLabelColor = (type, variant) => {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
 function Tag({
   label,
-  type = 'default'
+  type = 'default',
+  variant = 'fill'
 }) {
   return /*#__PURE__*/React__default.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React__default.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -1997,7 +2014,9 @@ const lateOceanColorPalette = {
   englishVermillon: '#D44148',
   goldCrayola: '#F8C583',
   aero: '#89BDDD',
-  transparent: 'transparent'
+  transparent: 'transparent',
+  moonPurple: '#DBD6F9',
+  moonPurpleLight1: '#EDEBFC'
 };
 
 const avatarLateOceanTheme = {
@@ -2028,9 +2047,9 @@ const buttonLateOceanTheme = {
     disabledBorderColor: lateOceanColorPalette.black100
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
     disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.black100,
+    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
     disabledBorderColor: lateOceanColorPalette.black100
   },
   subtle: {
@@ -2075,6 +2094,7 @@ const cardLateOceanTheme = {
 
 const colorsLateOceanTheme = {
   primary: lateOceanColorPalette.lateOcean,
+  primaryLight: lateOceanColorPalette.lateOceanLight1,
   accent: lateOceanColorPalette.warmEmbrace,
   accentLight: lateOceanColorPalette.warmEmbraceLight1,
   success: lateOceanColorPalette.viride,
@@ -2230,15 +2250,40 @@ const tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
   primary: {
-    // eslint-disable-next-line unicorn/expiring-todo-comments
-    // TODO: validate Moon shadow color with design team
-    backgroundColor: '#EDEBFC'
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.lateOcean
+    }
   },
   default: {
-    backgroundColor: lateOceanColorPalette.black50
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.black1000
+    }
   },
   danger: {
-    backgroundColor: lateOceanColorPalette.warmEmbrace
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: colorsLateOceanTheme.danger
+    }
   }
 };
 
@@ -2259,8 +2304,6 @@ const typographyLateOceanTheme = {
   colors: {
     black: lateOceanColorPalette.black1000,
     'black-light': lateOceanColorPalette.black555,
-    grey: lateOceanColorPalette.black555,
-    'grey-light': lateOceanColorPalette.black200,
     white: lateOceanColorPalette.white,
     'white-light': lateOceanColorPalette.white,
     primary: lateOceanColorPalette.lateOcean,
@@ -2273,8 +2316,7 @@ const typographyLateOceanTheme = {
     headers: {
       fontFamily: {
         regular: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold',
-        italic: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
+        bold: reactNative.Platform.OS === 'web' ? 'Moderat' : 'Moderat-Extended-Bold'
       },
       fontWeight: 400,
       fontStyle: 'normal',
@@ -2294,18 +2336,15 @@ const typographyLateOceanTheme = {
     bodies: {
       fontFamily: {
         regular: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans',
-        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold',
-        italic: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Italic'
+        bold: reactNative.Platform.OS === 'web' ? 'Noto Sans' : 'NotoSans-Bold'
       },
       fontWeight: {
         regular: 400,
-        bold: 700,
-        italic: 400
+        bold: 700
       },
       fontStyle: {
         regular: 'normal',
-        bold: 'normal',
-        italic: 'italic'
+        bold: 'normal'
       },
       configs: {
         'body-large': createTypographyTypeConfig(1.6, 18, 24),
@@ -2341,7 +2380,9 @@ const breakpoints = {
     largeBreakpoint: 'max-width: 1023px',
     wideBreakpoint: 'max-width: 1279px'
   }
-};
+}; // eslint-disable-next-line unicorn/expiring-todo-comments
+// TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
+
 const theme = {
   spacing: 4,
   colors: colorsLateOceanTheme,