@ornikar/kitt-universal 27.0.1-canary.01819bc93ab006bfbaa4e1335cd8afa2380068a0.0 → 27.1.0

package/dist/linaria-themes.es.js

@@ -515,15 +515,18 @@ var bottomSheet = {
   }
 };
 
+// Strongly typed theme so every new type/variant/size can't be added
+// without defined color & backgroundColor or icon size
+
 var button = {
-  borderRadius: 30,
+  borderRadius: 4,
   borderWidth: {
-    disabled: 2,
     focus: 3
   },
   minHeight: 40,
   minWidth: 40,
   maxWidth: 335,
+  maxHeight: 48,
   scale: {
     base: {
       "default": 1,
@@ -534,148 +537,160 @@ var button = {
       hover: 1.05
     }
   },
-  contentPadding: {
-    "default": '7px 16px 7px',
-    large: '11px 24px 11px',
-    xLarge: '15px 24px 15px',
-    disabled: '5px 14px 5px'
+  icon: {
+    medium: {
+      size: 24
+    },
+    "default": {
+      size: 20
+    }
   },
   padding: {
     "default": {
-      hasBadge: {
-        right: 8
-      },
       horizontal: 16,
-      vertical: 7
+      vertical: 8
     },
-    large: {
-      hasBadge: {
-        right: 12
-      },
-      horizontal: 24,
-      vertical: 11
-    },
-    xLarge: {
-      hasBadge: {
-        right: 12
-      },
+    medium: {
       horizontal: 24,
-      vertical: 15
+      vertical: 12
     }
   },
   transition: {
     duration: '200ms',
     timingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)'
   },
-  "default": {
-    "default": {
-      backgroundColor: 'rgba(0, 0, 0, 0.05)',
-      pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-      hoverBackgroundColor: 'rgba(0, 0, 0, 0.1)',
-      focusBorderColor: 'rgba(0, 0, 0, 0.1)'
-    },
-    ghost: {
-      backgroundColor: 'rgba(255, 255, 255, 0.1)',
-      pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
-      hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
-      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: deepPurpleColorPalette.white,
-      hoverColor: deepPurpleColorPalette.white,
-      activeColor: deepPurpleColorPalette.white
-    }
-  },
+  focusBorderColor: deepPurpleColorPalette['blue.2'],
   primary: {
     "default": {
-      backgroundColor: colors.primary,
-      pressedBackgroundColor: colors.primaryLight,
-      hoverBackgroundColor: colors.primaryLight,
-      focusBorderColor: 'rgba(76, 52, 224, 0.2)'
+      backgroundColor: {
+        "default": colors.primary,
+        hover: deepPurpleColorPalette['deepPurple.7'],
+        pressed: deepPurpleColorPalette['deepPurple.7'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.primary
+      },
+      color: {
+        "default": colors.white,
+        hover: colors.white,
+        pressed: colors.white,
+        disabled: colors.disabled,
+        focus: colors.white
+      }
     },
-    ghost: {
-      backgroundColor: colors.uiBackgroundLight,
-      pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
-      focusBorderColor: 'rgba(255,255,255, 0.4)',
-      color: colors.primary,
-      hoverColor: deepPurpleColorPalette['beige.2'],
-      activeColor: deepPurpleColorPalette['beige.2']
-    }
-  },
-  dark: {
-    "default": {
-      backgroundColor: colors.black,
-      pressedBackgroundColor: 'rgba(0, 0, 0, 0.8)',
-      hoverBackgroundColor: 'rgba(0, 0, 0, 0.8)',
-      focusBorderColor: 'rgba(0, 0, 0, 0.8)'
+    revert: {
+      backgroundColor: {
+        "default": colors.white,
+        hover: deepPurpleColorPalette['white-alpha.80'],
+        pressed: deepPurpleColorPalette['white-alpha.80'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.white
+      },
+      color: {
+        "default": colors.black,
+        hover: colors.black,
+        pressed: colors.black,
+        disabled: colors.disabled,
+        focus: colors.black
+      }
     }
   },
-  danger: {
+  secondary: {
     "default": {
-      backgroundColor: deepPurpleColorPalette['red.1'],
-      pressedBackgroundColor: deepPurpleColorPalette['red.2'],
-      hoverBackgroundColor: deepPurpleColorPalette['red.2'],
-      focusBorderColor: deepPurpleColorPalette['red.2']
+      backgroundColor: {
+        "default": deepPurpleColorPalette['beige-alpha.25'],
+        hover: deepPurpleColorPalette['beige-alpha.40'],
+        pressed: deepPurpleColorPalette['beige-alpha.40'],
+        disabled: colors.disabled,
+        focus: deepPurpleColorPalette['beige-alpha.25']
+      },
+      color: {
+        "default": colors.black,
+        hover: colors.black,
+        pressed: colors.black,
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.black
+      }
     },
-    ghost: {
-      backgroundColor: colors.uiBackgroundLight,
-      pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
-      focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: deepPurpleColorPalette['red.6'],
-      hoverColor: deepPurpleColorPalette['red.6'],
-      activeColor: deepPurpleColorPalette['red.6']
-    }
-  },
-  subtle: {
-    "default": {
-      backgroundColor: colors.transparent,
-      pressedBackgroundColor: colors.transparent,
-      hoverBackgroundColor: colors.transparent,
-      focusBorderColor: 'rgba(76, 52, 224, 0.2)',
-      color: colors.primary,
-      hoverColor: 'rgba(76, 52, 224, 0.8)',
-      activeColor: 'rgba(76, 52, 224, 0.8)'
-    }
-  },
-  'subtle-dark': {
-    "default": {
-      backgroundColor: colors.transparent,
-      pressedBackgroundColor: colors.transparent,
-      hoverBackgroundColor: colors.transparent,
-      focusBorderColor: 'rgba(0, 0, 0, 0.1)',
-      color: colors.black,
-      hoverColor: 'rgba(0, 0, 0, 0.8)',
-      activeColor: 'rgba(0, 0, 0, 0.8)'
+    revert: {
+      backgroundColor: {
+        "default": deepPurpleColorPalette['white-alpha.10'],
+        hover: deepPurpleColorPalette['white-alpha.20'],
+        pressed: deepPurpleColorPalette['white-alpha.20'],
+        disabled: colors.disabled,
+        focus: deepPurpleColorPalette['white-alpha.10']
+      },
+      color: {
+        "default": colors.white,
+        hover: deepPurpleColorPalette['white-alpha.80'],
+        pressed: deepPurpleColorPalette['white-alpha.80'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.white
+      }
     }
   },
-  'subtle-revert': {
+  tertiary: {
     "default": {
-      backgroundColor: colors.transparent,
-      pressedBackgroundColor: colors.transparent,
-      hoverBackgroundColor: colors.transparent,
-      focusBorderColor: colors.white,
-      color: colors.white,
-      hoverColor: colors.white,
-      activeColor: colors.white
+      backgroundColor: {
+        "default": 'transparent',
+        hover: 'transparent',
+        pressed: 'transparent',
+        disabled: 'transparent',
+        focus: 'transparent'
+      },
+      color: {
+        "default": colors.black,
+        hover: colors.blackAnthracite,
+        pressed: colors.blackAnthracite,
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.black
+      }
+    },
+    revert: {
+      backgroundColor: {
+        "default": 'transparent',
+        hover: 'transparent',
+        pressed: 'transparent',
+        disabled: 'transparent',
+        focus: 'transparent'
+      },
+      color: {
+        "default": colors.white,
+        hover: deepPurpleColorPalette['white-alpha.80'],
+        pressed: deepPurpleColorPalette['white-alpha.80'],
+        disabled: deepPurpleColorPalette['white-alpha.20'],
+        focus: colors.white
+      }
     }
   },
-  disabled: {
+  'tertiary-danger': {
     "default": {
-      backgroundColor: colors.disabled,
-      pressedBackgroundColor: colors.disabled,
-      hoverBackgroundColor: colors.disabled,
-      focusBorderColor: deepPurpleColorPalette['beige.2'],
-      borderColor: deepPurpleColorPalette['beige.2']
+      backgroundColor: {
+        "default": 'transparent',
+        hover: 'transparent',
+        pressed: 'transparent',
+        disabled: 'transparent',
+        focus: 'transparent'
+      },
+      color: {
+        "default": colors.danger,
+        hover: deepPurpleColorPalette['red.2'],
+        pressed: deepPurpleColorPalette['red.2'],
+        disabled: deepPurpleColorPalette['grey.3'],
+        focus: colors.danger
+      }
     }
   }
 };
 
 var buttonBadge = {
-  backgroundColor: deepPurpleColorPalette['red.6'],
+  backgroundColor: {
+    "default": colors.danger,
+    disabled: colors.blackLight
+  },
   dimensions: {
     withBadge: {
-      width: 10,
-      height: 10
+      width: 8,
+      height: 8
     },
     badgeCount: {
       width: 20,
@@ -1872,14 +1887,13 @@ var iconButton = {
   },
   disabled: {
     scale: 1,
-    backgroundColor: button.disabled["default"].backgroundColor,
-    borderColor: button.disabled["default"].borderColor
+    backgroundColor: button.primary["default"].backgroundColor.disabled
   },
   "default": {
-    pressedBackgroundColor: button["default"]["default"].pressedBackgroundColor
+    pressedBackgroundColor: button.primary["default"].backgroundColor.disabled
   },
   ghost: {
-    pressedBackgroundColor: button["default"].ghost.pressedBackgroundColor
+    pressedBackgroundColor: button.primary["default"].backgroundColor.disabled
   },
   primary: {
     pressedBackgroundColor: deepPurpleColorPalette['beige.1']
@@ -2423,7 +2437,7 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 var theme = {
   spacing: spacing,
-  getSpacing: function (multiplier) {
+  getSpacing: function getSpacing(multiplier) {
     return spacing * multiplier;
   },
   colors: colors,