@wireapp/react-ui-kit 8.12.0 → 8.13.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.13.2](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.13.1...@wireapp/react-ui-kit@8.13.2) (2022-08-17)
+
+**Note:** Version bump only for package @wireapp/react-ui-kit
+
+
+
+
+
+## [8.13.1](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.13.0...@wireapp/react-ui-kit@8.13.1) (2022-08-11)
+
+**Note:** Version bump only for package @wireapp/react-ui-kit
+
+
+
+
+
+# [8.13.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.12.0...@wireapp/react-ui-kit@8.13.0) (2022-08-11)
+
+
+### Features
+
+* move the theme in ui-kit and expose css variables ([#4358](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4358)) ([2a7ad70](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/2a7ad70b17072d24960c2e36c3409a858d4b5891))
+
+
+
+
+
 # [8.12.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.11.4...@wireapp/react-ui-kit@8.12.0) (2022-08-10)
 
 

package/package.json

@@ -70,6 +70,6 @@
     "test:update": "yarn test --updateSnapshot",
     "test:project": "yarn dist && yarn test"
   },
-  "version": "8.12.0",
-  "gitHead": "3f53a6099079178095dbb34c0ac4b799db688fa8"
+  "version": "8.13.2",
+  "gitHead": "d0b13f580eba65a5a6703f674edaca4046600be0"
 }

package/src/Form/Button.js

@@ -102,17 +102,19 @@ var buttonStyle = function buttonStyle(theme, _ref) {
     minWidth: '125px',
     padding: '0 16px'
   })), variant === ButtonVariant.PRIMARY && _objectSpread({
-    backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.BLUE),
-    color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE
+    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),
+    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor
   }, !disabled && {
     '&:hover, &:focus': {
-      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
+      backgroundColor: theme.Button.primaryHoverBg
     },
     '&:focus': {
-      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_700)
+      border: "1px solid ".concat(theme.Button.primaryFocusBorder)
     },
     '&:active': {
-      backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
+      backgroundColor: theme.Button.primaryActiveBg,
+      border: "1px solid ".concat(theme.Button.primaryActiveBorder),
+      color: _Identity.COLOR.WHITE
     }
   })), variant === ButtonVariant.SECONDARY && _objectSpread({
     backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE),
@@ -131,14 +133,25 @@ var buttonStyle = function buttonStyle(theme, _ref) {
       color: _Identity.COLOR_V2.BLUE
     }
   })), variant === ButtonVariant.TERTIARY && _objectSpread({
-    color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK,
-    lineHeight: '24px'
+    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),
+    border: disabled ? "1px solid ".concat(theme.Button.tertiaryDisabledBorder) : "1px solid ".concat(theme.Button.tertiaryBorder),
+    borderRadius: '12px',
+    color: disabled ? theme.Input.placeholderColor : theme.general.color,
+    fontSize: '14px',
+    fontWeight: 700,
+    lineHeight: '24px',
+    padding: '4px 8px'
   }, !disabled && {
     '&:hover, &:focus': {
-      color: _Identity.COLOR_V2.BLUE
+      backgroundColor: theme.Button.tertiaryHoverBg,
+      border: "1px solid ".concat(theme.Button.tertiaryHoverBorder)
     },
     '&:focus': {
-      border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_300)
+      border: "1px solid ".concat(theme.general.focusColor)
+    },
+    '&:active': {
+      backgroundColor: theme.Button.tertiaryActiveBg,
+      color: theme.IconButton.primaryActiveFillColor
     }
   })), variant === ButtonVariant.QUATERNARY && _objectSpread({
     backgroundColor: backgroundColor || (disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.GREEN),

package/src/Form/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","COLOR_V2","GRAY_50","BLUE","GRAY_80","BLUE_LIGHT_600","BLUE_LIGHT_700","SECONDARY","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE_LIGHT_50","BLUE_LIGHT_300","QUATERNARY","GREEN","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_800","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\n  SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: ButtonVariant;\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    variant = ButtonVariant.PRIMARY,\n    backgroundColor,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  border: 0,\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant !== ButtonVariant.TERTIARY && {\n    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n    height: variant === ButtonVariant.SEND ? '40px' : '48px',\n    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n    ...(variant !== ButtonVariant.SEND && {\n      maxWidth: '100%',\n      minWidth: '125px',\n      padding: '0 16px',\n    }),\n  }),\n  ...(variant === ButtonVariant.PRIMARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.BLUE),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SECONDARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n    border: `1px solid ${COLOR_V2.GRAY_40}`,\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        border: `1px solid ${COLOR_V2.BLUE}`,\n      },\n      '&:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n        border: `1px solid ${COLOR_V2.BLUE}`,\n        color: COLOR_V2.BLUE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.TERTIARY && {\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SEND && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n    width: '40px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
+{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","Button","primaryDisabledBg","primaryBg","primaryDisabledText","general","contrastColor","primaryHoverBg","primaryFocusBorder","primaryActiveBg","primaryActiveBorder","SECONDARY","COLOR_V2","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE","BLUE_LIGHT_50","tertiarydisabledBg","tertiaryBg","tertiaryDisabledBorder","tertiaryBorder","Input","placeholderColor","fontWeight","tertiaryHoverBg","tertiaryHoverBorder","focusColor","tertiaryActiveBg","IconButton","primaryActiveFillColor","QUATERNARY","GRAY_50","GREEN","GRAY_80","GREEN_LIGHT_600","GREEN_LIGHT_700","GRAY_70","BLUE_LIGHT_600","BLUE_LIGHT_800","BLUE_LIGHT_700","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport enum ButtonVariant {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  TERTIARY = 'tertiary',\n  QUATERNARY = 'quaternary',\n  SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n  variant?: ButtonVariant;\n  backgroundColor?: string;\n  loadingColor?: string;\n  noCapital?: boolean;\n  showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n  theme,\n  {\n    variant = ButtonVariant.PRIMARY,\n    backgroundColor,\n    block = false,\n    disabled = false,\n    noCapital = false,\n    bold = true,\n    center = true,\n    color = COLOR.WHITE,\n    fontSize = '16px',\n    noWrap = true,\n    textTransform = 'none',\n    truncate = true,\n    ...props\n  },\n) => ({\n  ...textStyle(theme, {\n    block,\n    bold,\n    center,\n    disabled,\n    fontSize,\n    noWrap,\n    textTransform,\n    truncate,\n    ...props,\n  }),\n  border: 0,\n  cursor: disabled ? 'default' : 'pointer',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  marginBottom: '16px',\n  padding: 0,\n  outline: 'none',\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n  transition: defaultTransition,\n  width: block ? '100%' : 'auto',\n  '&:hover, &:focus': {\n    textDecoration: 'none',\n  },\n  ...(variant !== ButtonVariant.TERTIARY && {\n    borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n    height: variant === ButtonVariant.SEND ? '40px' : '48px',\n    lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n    ...(variant !== ButtonVariant.SEND && {\n      maxWidth: '100%',\n      minWidth: '125px',\n      padding: '0 16px',\n    }),\n  }),\n  ...(variant === ButtonVariant.PRIMARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.primaryDisabledBg : theme.Button.primaryBg),\n    color: disabled ? theme.Button.primaryDisabledText : theme.general.contrastColor,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.primaryHoverBg,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.Button.primaryFocusBorder}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.primaryActiveBg,\n        border: `1px solid ${theme.Button.primaryActiveBorder}`,\n        color: COLOR.WHITE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SECONDARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE),\n    border: `1px solid ${COLOR_V2.GRAY_40}`,\n    color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        border: `1px solid ${COLOR_V2.BLUE}`,\n      },\n      '&:focus': {\n        color: COLOR_V2.BLUE,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n        border: `1px solid ${COLOR_V2.BLUE}`,\n        color: COLOR_V2.BLUE,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.TERTIARY && {\n    backgroundColor: backgroundColor || (disabled ? theme.Button.tertiarydisabledBg : theme.Button.tertiaryBg),\n    border: disabled ? `1px solid ${theme.Button.tertiaryDisabledBorder}` : `1px solid ${theme.Button.tertiaryBorder}`,\n    borderRadius: '12px',\n    color: disabled ? theme.Input.placeholderColor : theme.general.color,\n    fontSize: '14px',\n    fontWeight: 700,\n    lineHeight: '24px',\n    padding: '4px 8px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: theme.Button.tertiaryHoverBg,\n        border: `1px solid ${theme.Button.tertiaryHoverBorder}`,\n      },\n      '&:focus': {\n        border: `1px solid ${theme.general.focusColor}`,\n      },\n      '&:active': {\n        backgroundColor: theme.Button.tertiaryActiveBg,\n        color: theme.IconButton.primaryActiveFillColor,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.QUATERNARY && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_50 : COLOR_V2.GREEN),\n    color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n    lineHeight: '24px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.GREEN_LIGHT_700}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.GREEN_LIGHT_700,\n      },\n    }),\n  }),\n  ...(variant === ButtonVariant.SEND && {\n    backgroundColor: backgroundColor || (disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE),\n    width: '40px',\n    ...(!disabled && {\n      '&:hover, &:focus': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n      },\n      '&:focus': {\n        border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n      },\n      '&:active': {\n        backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n      },\n    }),\n  }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n  <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n    {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n  </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n  return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}

package/src/Form/Select.d.ts

@@ -10,7 +10,7 @@ export declare type Option = {
 };
 interface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {
     id: string;
-    disabled: boolean;
+    disabled?: boolean;
     dataUieName: string;
     options: Option[];
     wrapperCSS?: CSSObject;

package/src/Form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","hasError","marginBottom","width","color","general","primaryColor","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;AAEA;;;;;;;;AAuBO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAaM;AAAA,MAZ1BC,EAY0B,QAZ1BA,EAY0B;AAAA,MAX1BC,KAW0B,QAX1BA,KAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,UAS0B,QAT1BA,UAS0B;AAAA,2BAR1BC,QAQ0B;AAAA,MAR1BA,QAQ0B,8BARf,KAQe;AAAA,MAP1BC,WAO0B,QAP1BA,WAO0B;AAAA,MAN1BC,OAM0B,QAN1BA,OAM0B;AAAA,MAL1BC,OAK0B,QAL1BA,OAK0B;AAAA,6BAJ1BC,UAI0B;AAAA,MAJ1BA,UAI0B,gCAJb,EAIa;AAAA,8BAH1BC,WAG0B;AAAA,MAH1BA,WAG0B,iCAHZ,KAGY;AAAA,2BAF1BC,QAE0B;AAAA,MAF1BA,QAE0B,8BAFf,KAEe;AAAA,MADvBC,KACuB;AAC1B,MAAMC,KAAK,GAAG,sBAAd;AACA,MAAMC,QAAQ,GAAG,CAAC,CAACX,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,EAAE,aAACU,KAAD;AAAA;AACHE,QAAAA,YAAY,EAAEL,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHM,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBC,UAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADC;AAHrB,SAMAV,UANA;AAAA,KADP;AASE,qBAAeH;AATjB,KAWGJ,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,WAAW,EAAES,WAAtC;AAAmD,IAAA,UAAU,EAAEC;AAA/D,KACGT,KADH,CAZJ,EAiBE,gBAAC,uBAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,MAAM,EAAE,gCAAaY,KAAb,EAA6BH,WAA7B,CAFV;AAGE,IAAA,UAAU,EAAE;AACVU,MAAAA,iBAAiB,EAAjBA,mCADU;AAEVC,MAAAA,MAAM,EAAE,oCAAaf,WAAb,CAFE;AAGVgB,MAAAA,IAAI,EAAE,4BAAKhB,WAAL,CAHI;AAIViB,MAAAA,cAAc,EAAdA,gCAJU;AAKVC,MAAAA,mBAAmB,EAAnBA;AALU,KAHd;AAUE,IAAA,UAAU,EAAEnB,QAVd;AAWE,IAAA,mBAAmB,EAAE,KAXvB;AAYE,IAAA,YAAY,EAAE,KAZhB;AAaE,IAAA,WAAW,EAAE,KAbf;AAcE,IAAA,iBAAiB,EAAE,CAACG,OAdtB;AAeE,IAAA,OAAO,EAAEA,OAfX;AAgBE,IAAA,OAAO,EAAED;AAhBX,KAiBMK,KAjBN,EAjBF,EAqCG,CAACE,QAAD,IAAaV,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA,aAAmB;AAACY,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCT,QAAAA,KAAK,EAAEJ,KAAK,CAACc,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACGzB,UADH,CAtCJ,EA2CGD,KA3CH,CADF;AA+CD,CAhEM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {useTheme} from '@emotion/react';\nimport React, {ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {CustomOption, DropdownIndicator, IndicatorsContainer, Menu, ValueContainer} from './SelectComponents';\nimport type {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n  value: string | number;\n  label: string;\n  description?: string;\n  isDisabled?: boolean;\n};\n\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n  id: string;\n  disabled: boolean;\n  dataUieName: string;\n  options: Option[];\n  wrapperCSS?: CSSObject;\n  label?: string;\n  helperText?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  required?: boolean;\n  isMulti?: IsMulti;\n}\n\nexport const Select = <IsMulti extends boolean = false>({\n  id,\n  label,\n  error,\n  helperText,\n  disabled = false,\n  dataUieName,\n  options,\n  isMulti,\n  wrapperCSS = {},\n  markInvalid = false,\n  required = false,\n  ...props\n}: SelectProps<IsMulti>) => {\n  const theme = useTheme();\n  const hasError = !!error;\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n    >\n      {label && (\n        <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n          {label}\n        </InputLabel>\n      )}\n\n      <ReactSelect\n        id={id}\n        styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n        components={{\n          DropdownIndicator,\n          Option: CustomOption(dataUieName),\n          Menu: Menu(dataUieName),\n          ValueContainer,\n          IndicatorsContainer,\n        }}\n        isDisabled={disabled}\n        hideSelectedOptions={false}\n        isSearchable={false}\n        isClearable={false}\n        closeMenuOnSelect={!isMulti}\n        isMulti={isMulti}\n        options={options}\n        {...props}\n      />\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}
+{"version":3,"sources":["Select.tsx"],"names":["Select","id","label","error","helperText","disabled","dataUieName","options","isMulti","wrapperCSS","markInvalid","required","props","theme","hasError","marginBottom","width","color","general","primaryColor","DropdownIndicator","Option","Menu","ValueContainer","IndicatorsContainer","fontSize","fontWeight","Input","labelColor","marginTop"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AAEA;;AACA;;AAIA;;AACA;;AAEA;;;;;;;;AAuBO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAaM;AAAA,MAZ1BC,EAY0B,QAZ1BA,EAY0B;AAAA,MAX1BC,KAW0B,QAX1BA,KAW0B;AAAA,MAV1BC,KAU0B,QAV1BA,KAU0B;AAAA,MAT1BC,UAS0B,QAT1BA,UAS0B;AAAA,2BAR1BC,QAQ0B;AAAA,MAR1BA,QAQ0B,8BARf,KAQe;AAAA,MAP1BC,WAO0B,QAP1BA,WAO0B;AAAA,MAN1BC,OAM0B,QAN1BA,OAM0B;AAAA,MAL1BC,OAK0B,QAL1BA,OAK0B;AAAA,6BAJ1BC,UAI0B;AAAA,MAJ1BA,UAI0B,gCAJb,EAIa;AAAA,8BAH1BC,WAG0B;AAAA,MAH1BA,WAG0B,iCAHZ,KAGY;AAAA,2BAF1BC,QAE0B;AAAA,MAF1BA,QAE0B,8BAFf,KAEe;AAAA,MADvBC,KACuB;AAC1B,MAAMC,KAAK,GAAG,sBAAd;AACA,MAAMC,QAAQ,GAAG,CAAC,CAACX,KAAnB;AAEA,SACE;AACE,IAAA,GAAG,EAAE,aAACU,KAAD;AAAA;AACHE,QAAAA,YAAY,EAAEL,WAAW,GAAG,KAAH,GAAW,MADjC;AAEHM,QAAAA,KAAK,EAAE,MAFJ;AAGH,gCAAwB;AACtBC,UAAAA,KAAK,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADC;AAHrB,SAMAV,UANA;AAAA,KADP;AASE,qBAAeH;AATjB,KAWGJ,KAAK,IACJ,gBAAC,sBAAD;AAAY,IAAA,OAAO,EAAED,EAArB;AAAyB,IAAA,WAAW,EAAES,WAAtC;AAAmD,IAAA,UAAU,EAAEC;AAA/D,KACGT,KADH,CAZJ,EAiBE,gBAAC,uBAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,MAAM,EAAE,gCAAaY,KAAb,EAA6BH,WAA7B,CAFV;AAGE,IAAA,UAAU,EAAE;AACVU,MAAAA,iBAAiB,EAAjBA,mCADU;AAEVC,MAAAA,MAAM,EAAE,oCAAaf,WAAb,CAFE;AAGVgB,MAAAA,IAAI,EAAE,4BAAKhB,WAAL,CAHI;AAIViB,MAAAA,cAAc,EAAdA,gCAJU;AAKVC,MAAAA,mBAAmB,EAAnBA;AALU,KAHd;AAUE,IAAA,UAAU,EAAEnB,QAVd;AAWE,IAAA,mBAAmB,EAAE,KAXvB;AAYE,IAAA,YAAY,EAAE,KAZhB;AAaE,IAAA,WAAW,EAAE,KAbf;AAcE,IAAA,iBAAiB,EAAE,CAACG,OAdtB;AAeE,IAAA,OAAO,EAAEA,OAfX;AAgBE,IAAA,OAAO,EAAED;AAhBX,KAiBMK,KAjBN,EAjBF,EAqCG,CAACE,QAAD,IAAaV,UAAb,IACC;AAAG,IAAA,GAAG,EAAE,aAACS,KAAD;AAAA,aAAmB;AAACY,QAAAA,QAAQ,EAAE,MAAX;AAAmBC,QAAAA,UAAU,EAAE,GAA/B;AAAoCT,QAAAA,KAAK,EAAEJ,KAAK,CAACc,KAAN,CAAYC,UAAvD;AAAmEC,QAAAA,SAAS,EAAE;AAA9E,OAAnB;AAAA;AAAR,KACGzB,UADH,CAtCJ,EA2CGD,KA3CH,CADF;AA+CD,CAhEM","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {useTheme} from '@emotion/react';\nimport React, {ReactElement} from 'react';\nimport ReactSelect from 'react-select';\nimport {StylesConfig} from 'react-select/dist/declarations/src/styles';\nimport {StateManagerProps} from 'react-select/dist/declarations/src/useStateManager';\n\nimport {customStyles} from './SelectStyles';\nimport {CustomOption, DropdownIndicator, IndicatorsContainer, Menu, ValueContainer} from './SelectComponents';\nimport type {Theme} from '../Layout';\nimport InputLabel from './InputLabel';\n\nexport type Option = {\n  value: string | number;\n  label: string;\n  description?: string;\n  isDisabled?: boolean;\n};\n\ninterface SelectProps<IsMulti extends boolean> extends StateManagerProps<Option, IsMulti> {\n  id: string;\n  disabled?: boolean;\n  dataUieName: string;\n  options: Option[];\n  wrapperCSS?: CSSObject;\n  label?: string;\n  helperText?: string;\n  error?: ReactElement;\n  markInvalid?: boolean;\n  required?: boolean;\n  isMulti?: IsMulti;\n}\n\nexport const Select = <IsMulti extends boolean = false>({\n  id,\n  label,\n  error,\n  helperText,\n  disabled = false,\n  dataUieName,\n  options,\n  isMulti,\n  wrapperCSS = {},\n  markInvalid = false,\n  required = false,\n  ...props\n}: SelectProps<IsMulti>) => {\n  const theme = useTheme();\n  const hasError = !!error;\n\n  return (\n    <div\n      css={(theme: Theme) => ({\n        marginBottom: markInvalid ? '2px' : '20px',\n        width: '100%',\n        '&:focus-within label': {\n          color: theme.general.primaryColor,\n        },\n        ...wrapperCSS,\n      })}\n      data-uie-name={dataUieName}\n    >\n      {label && (\n        <InputLabel htmlFor={id} markInvalid={markInvalid} isRequired={required}>\n          {label}\n        </InputLabel>\n      )}\n\n      <ReactSelect\n        id={id}\n        styles={customStyles(theme as Theme, markInvalid) as StylesConfig}\n        components={{\n          DropdownIndicator,\n          Option: CustomOption(dataUieName),\n          Menu: Menu(dataUieName),\n          ValueContainer,\n          IndicatorsContainer,\n        }}\n        isDisabled={disabled}\n        hideSelectedOptions={false}\n        isSearchable={false}\n        isClearable={false}\n        closeMenuOnSelect={!isMulti}\n        isMulti={isMulti}\n        options={options}\n        {...props}\n      />\n\n      {!hasError && helperText && (\n        <p css={(theme: Theme) => ({fontSize: '12px', fontWeight: 400, color: theme.Input.labelColor, marginTop: 8})}>\n          {helperText}\n        </p>\n      )}\n\n      {error}\n    </div>\n  );\n};\n"],"file":"Select.js"}

package/src/Form/SelectStyles.d.ts

@@ -138,7 +138,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
         fontKerning?: import("csstype").Property.FontKerning | import("csstype").Property.FontKerning[];
         fontLanguageOverride?: import("csstype").Property.FontLanguageOverride | import("csstype").Property.FontLanguageOverride[];
         fontOpticalSizing?: import("csstype").Property.FontOpticalSizing | import("csstype").Property.FontOpticalSizing[];
-        fontSize?: import("csstype").Property.FontSize<string | number> | import("csstype").Property.FontSize<string | number>[] | (string | (string & {}))[];
+        fontSize?: (string | (string & {}))[] | import("csstype").Property.FontSize<string | number> | import("csstype").Property.FontSize<string | number>[];
         fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | import("csstype").Property.FontSizeAdjust[] | ("none" | import("csstype").Globals)[];
         fontSmooth?: string[] | import("csstype").Property.FontSmooth<string | number> | import("csstype").Property.FontSmooth<string | number>[];
         fontStretch?: import("csstype").Property.FontStretch | import("csstype").Property.FontStretch[];
@@ -371,7 +371,7 @@ export declare const customStyles: (theme: Theme, markInvalid?: boolean) => {
         all?: import("csstype").Globals | import("csstype").Globals[];
         animation?: import("csstype").Property.Animation<string & {}> | import("csstype").Property.Animation<string & {}>[] | (import("csstype").Globals | ("normal" | "alternate" | "alternate-reverse" | "reverse") | ("none" | "both" | "backwards" | "forwards") | "infinite" | "paused" | "running" | ((string & {}) | "ease" | "ease-in" | "ease-in-out" | "ease-out" | "step-end" | "step-start" | "linear"))[];
         background?: (string | (string & {}))[] | import("csstype").Property.Background<string | number> | import("csstype").Property.Background<string | number>[];
-        border?: (string | (string & {}))[] | import("csstype").Property.Border<string | number> | import("csstype").Property.Border<string | number>[];
+        border?: import("csstype").Property.Border<string | number> | import("csstype").Property.Border<string | number>[] | (string | (string & {}))[];
         borderBlock?: (string | (string & {}))[] | import("csstype").Property.BorderBlock<string | number> | import("csstype").Property.BorderBlock<string | number>[];
         borderBlockEnd?: (string | (string & {}))[] | import("csstype").Property.BorderBlockEnd<string | number> | import("csstype").Property.BorderBlockEnd<string | number>[];
         borderBlockStart?: (string | (string & {}))[] | import("csstype").Property.BorderBlockStart<string | number> | import("csstype").Property.BorderBlockStart<string | number>[];

package/src/Form/ShakeBox.d.ts

@@ -8,4 +8,4 @@ export interface ShakeBoxProps extends React.HTMLProps<HTMLDivElement> {
 export interface ShakeBoxRef {
     shake: () => void;
 }
-export declare const ShakeBox: React.ForwardRefExoticComponent<Pick<ShakeBoxProps, "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "color" | "content" | "height" | "translate" | "width" | "key" | "value" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "amplitude" | "speed" | "damping" | "threshold"> & React.RefAttributes<ShakeBoxRef>>;
+export declare const ShakeBox: React.ForwardRefExoticComponent<Pick<ShakeBoxProps, "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "color" | "content" | "height" | "translate" | "width" | "hidden" | "className" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "step" | "value" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "target" | "type" | "useMap" | "wmode" | "wrap" | "amplitude" | "speed" | "damping" | "threshold"> & React.RefAttributes<ShakeBoxRef>>;

package/src/GlobalCssVariables.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=GlobalCssVariables.d.js.map

package/src/GlobalCssVariables.d.js.map

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

package/src/GlobalCssVariables.d.ts

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { CSSObject } from '@emotion/react';
+export declare const GlobalCssVariables: {
+    light: () => CSSObject;
+    dark: () => CSSObject;
+    accentColors: () => CSSObject;
+};

package/src/GlobalCssVariables.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalCssVariables = void 0;
+
+var _Identity = require("./Identity");
+
+/*
+ * Wire
+ * Copyright (C) 2022 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+/** @jsx jsx */
+var light = function light() {
+  return {
+    // Checkbox
+    '--checkbox-background': _Identity.COLOR_V2.GRAY_20,
+    '--checkbox-background-disabled': _Identity.COLOR_V2.GRAY_10,
+    '--checkbox-background-disabled-selected': _Identity.COLOR_V2.GRAY_60,
+    '--checkbox-border': _Identity.COLOR_V2.GRAY_80,
+    '--checkbox-border-disabled': _Identity.COLOR_V2.GRAY_70,
+    // Icon Button
+    '--icon-button-primary-enabled-bg': _Identity.COLOR.WHITE,
+    '--icon-button-primary-hover-bg': _Identity.COLOR_V2.GRAY_20,
+    '--icon-button-primary-border': _Identity.COLOR_V2.GRAY_40,
+    '--icon-button-primary-disabled-bg': _Identity.COLOR_V2.GRAY_20,
+    '--icon-button-primary-disabled-border': _Identity.COLOR_V2.GRAY_40,
+    '--icon-button-primary-hover-border': _Identity.COLOR_V2.GRAY_50,
+    // Button
+    '--button-primary-disabled-bg': _Identity.COLOR_V2.GRAY_50,
+    '--button-primary-disabled-text': _Identity.COLOR_V2.GRAY_80,
+    '--button-tertiary-bg': _Identity.COLOR_V2.GRAY_10,
+    '--button-tertiary-border': _Identity.COLOR_V2.GRAY_40,
+    '--button-tertiary-hover-bg': _Identity.COLOR_V2.GRAY_20,
+    '--button-tertiary-hover-border': _Identity.COLOR_V2.GRAY_50,
+    '--button-tertiary-disabled-bg': _Identity.COLOR_V2.GRAY_20,
+    '--button-tertiary-disabled-border': 'transparent',
+    // Inputs
+    '--text-input-background': _Identity.COLOR.WHITE,
+    '--text-input-border': _Identity.COLOR_V2.GRAY_40,
+    '--text-input-border-hover': _Identity.COLOR_V2.GRAY_60,
+    '--text-input-placeholder': _Identity.COLOR_V2.GRAY_70,
+    '--text-input-disabled': _Identity.COLOR_V2.GRAY_20,
+    '--text-input-label': _Identity.COLOR_V2.GRAY_80,
+    // General
+    '--danger-color': _Identity.COLOR_V2.RED_LIGHT_500,
+    '--app-bg': _Identity.COLOR_V2.GRAY_10,
+    '--main-color': _Identity.COLOR.BLACK
+  };
+};
+
+var dark = function dark() {
+  return {
+    // Checkbox
+    '--checkbox-background': _Identity.COLOR_V2.GRAY_90,
+    '--checkbox-background-disabled': _Identity.COLOR_V2.GRAY_90,
+    '--checkbox-background-disabled-selected': _Identity.COLOR_V2.GRAY_80,
+    '--checkbox-border': _Identity.COLOR_V2.GRAY_60,
+    '--checkbox-border-disabled': _Identity.COLOR_V2.GRAY_60,
+    // Icon Button
+    '--icon-button-primary-enabled-bg': _Identity.COLOR_V2.GRAY_90,
+    '--icon-button-primary-hover-bg': _Identity.COLOR_V2.GRAY_80,
+    '--icon-button-primary-border': _Identity.COLOR_V2.GRAY_100,
+    '--icon-button-primary-disabled-bg': _Identity.COLOR_V2.GRAY_95,
+    '--icon-button-primary-disabled-border': _Identity.COLOR_V2.GRAY_90,
+    '--icon-button-primary-hover-border': _Identity.COLOR_V2.GRAY_70,
+    // Button
+    '--button-primary-disabled-bg': _Identity.COLOR_V2.GRAY_70,
+    '--button-primary-disabled-text': _Identity.COLOR.BLACK,
+    '--button-tertiary-bg': _Identity.COLOR_V2.GRAY_90,
+    '--button-tertiary-border': _Identity.COLOR_V2.GRAY_100,
+    '--button-tertiary-hover-bg': _Identity.COLOR_V2.GRAY_80,
+    '--button-tertiary-hover-border': _Identity.COLOR_V2.GRAY_80,
+    '--button-tertiary-disabled-bg': _Identity.COLOR_V2.GRAY_95,
+    '--button-tertiary-disabled-border': 'transparent',
+    // Inputs
+    '--text-input-background': _Identity.COLOR.BLACK,
+    '--text-input-border': _Identity.COLOR_V2.GRAY_80,
+    '--text-input-border-hover': _Identity.COLOR_V2.GRAY_40,
+    '--text-input-placeholder': _Identity.COLOR_V2.GRAY_60,
+    '--text-input-disabled': _Identity.COLOR_V2.GRAY_100,
+    '--text-input-label': _Identity.COLOR_V2.GRAY_40,
+    // General
+    '--danger-color': _Identity.COLOR_V2.RED_DARK_500,
+    '--app-bg': _Identity.COLOR_V2.GRAY_95,
+    '--main-color': _Identity.COLOR.WHITE
+  };
+};
+
+var accentColors = function accentColors() {
+  return {
+    '--accent-color': _Identity.COLOR_V2.BLUE_LIGHT_500,
+    '--accent-color-highlight': _Identity.COLOR_V2.BLUE_LIGHT_50,
+    '--accent-color-highlight-inversed': _Identity.COLOR_V2.BLUE_LIGHT_800,
+    '--accent-color-border': _Identity.COLOR_V2.BLUE_LIGHT_500,
+    '--accent-color-focus': _Identity.COLOR_V2.BLUE_LIGHT_400,
+    '--icon-primary-active-fill': _Identity.COLOR_V2.BLUE_LIGHT_500,
+    '--icon-secondary-active-border': 'transparent',
+    '--button-primary-hover': _Identity.COLOR_V2.BLUE_LIGHT_600,
+    '--button-primary-active': _Identity.COLOR_V2.BLUE_LIGHT_700,
+    '--button-primary-active-border': _Identity.COLOR_V2.BLUE_LIGHT_700,
+    '--button-primary-focus-border': _Identity.COLOR_V2.BLUE_LIGHT_700
+  };
+};
+
+var GlobalCssVariables = {
+  light: light,
+  dark: dark,
+  accentColors: accentColors
+};
+exports.GlobalCssVariables = GlobalCssVariables;
+//# sourceMappingURL=GlobalCssVariables.js.map

package/src/GlobalCssVariables.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GlobalCssVariables.tsx"],"names":["light","COLOR_V2","GRAY_20","GRAY_10","GRAY_60","GRAY_80","GRAY_70","COLOR","WHITE","GRAY_40","GRAY_50","RED_LIGHT_500","BLACK","dark","GRAY_90","GRAY_100","GRAY_95","RED_DARK_500","accentColors","BLUE_LIGHT_500","BLUE_LIGHT_50","BLUE_LIGHT_800","BLUE_LIGHT_400","BLUE_LIGHT_600","BLUE_LIGHT_700","GlobalCssVariables"],"mappings":";;;;;;;AAqBA;;AArBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AAIA,IAAMA,KAAsB,GAAG,SAAzBA,KAAyB;AAAA,SAAO;AACpC;AACA,6BAAyBC,mBAASC,OAFE;AAGpC,sCAAkCD,mBAASE,OAHP;AAIpC,+CAA2CF,mBAASG,OAJhB;AAKpC,yBAAqBH,mBAASI,OALM;AAMpC,kCAA8BJ,mBAASK,OANH;AAQpC;AACA,wCAAoCC,gBAAMC,KATN;AAUpC,sCAAkCP,mBAASC,OAVP;AAWpC,oCAAgCD,mBAASQ,OAXL;AAYpC,yCAAqCR,mBAASC,OAZV;AAapC,6CAAyCD,mBAASQ,OAbd;AAcpC,0CAAsCR,mBAASS,OAdX;AAgBpC;AACA,oCAAgCT,mBAASS,OAjBL;AAkBpC,sCAAkCT,mBAASI,OAlBP;AAoBpC,4BAAwBJ,mBAASE,OApBG;AAqBpC,gCAA4BF,mBAASQ,OArBD;AAsBpC,kCAA8BR,mBAASC,OAtBH;AAuBpC,sCAAkCD,mBAASS,OAvBP;AAwBpC,qCAAiCT,mBAASC,OAxBN;AAyBpC,yCAAqC,aAzBD;AA2BpC;AACA,+BAA2BK,gBAAMC,KA5BG;AA6BpC,2BAAuBP,mBAASQ,OA7BI;AA8BpC,iCAA6BR,mBAASG,OA9BF;AA+BpC,gCAA4BH,mBAASK,OA/BD;AAgCpC,6BAAyBL,mBAASC,OAhCE;AAiCpC,0BAAsBD,mBAASI,OAjCK;AAmCpC;AACA,sBAAkBJ,mBAASU,aApCS;AAqCpC,gBAAYV,mBAASE,OArCe;AAsCpC,oBAAgBI,gBAAMK;AAtCc,GAAP;AAAA,CAA/B;;AAyCA,IAAMC,IAAqB,GAAG,SAAxBA,IAAwB;AAAA,SAAO;AACnC;AACA,6BAAyBZ,mBAASa,OAFC;AAGnC,sCAAkCb,mBAASa,OAHR;AAInC,+CAA2Cb,mBAASI,OAJjB;AAKnC,yBAAqBJ,mBAASG,OALK;AAMnC,kCAA8BH,mBAASG,OANJ;AAQnC;AACA,wCAAoCH,mBAASa,OATV;AAUnC,sCAAkCb,mBAASI,OAVR;AAWnC,oCAAgCJ,mBAASc,QAXN;AAYnC,yCAAqCd,mBAASe,OAZX;AAanC,6CAAyCf,mBAASa,OAbf;AAcnC,0CAAsCb,mBAASK,OAdZ;AAgBnC;AACA,oCAAgCL,mBAASK,OAjBN;AAkBnC,sCAAkCC,gBAAMK,KAlBL;AAoBnC,4BAAwBX,mBAASa,OApBE;AAqBnC,gCAA4Bb,mBAASc,QArBF;AAsBnC,kCAA8Bd,mBAASI,OAtBJ;AAuBnC,sCAAkCJ,mBAASI,OAvBR;AAwBnC,qCAAiCJ,mBAASe,OAxBP;AAyBnC,yCAAqC,aAzBF;AA2BnC;AACA,+BAA2BT,gBAAMK,KA5BE;AA6BnC,2BAAuBX,mBAASI,OA7BG;AA8BnC,iCAA6BJ,mBAASQ,OA9BH;AA+BnC,gCAA4BR,mBAASG,OA/BF;AAgCnC,6BAAyBH,mBAASc,QAhCC;AAiCnC,0BAAsBd,mBAASQ,OAjCI;AAmCnC;AACA,sBAAkBR,mBAASgB,YApCQ;AAqCnC,gBAAYhB,mBAASe,OArCc;AAsCnC,oBAAgBT,gBAAMC;AAtCa,GAAP;AAAA,CAA9B;;AAyCA,IAAMU,YAA6B,GAAG,SAAhCA,YAAgC;AAAA,SAAO;AAC3C,sBAAkBjB,mBAASkB,cADgB;AAE3C,gCAA4BlB,mBAASmB,aAFM;AAG3C,yCAAqCnB,mBAASoB,cAHH;AAI3C,6BAAyBpB,mBAASkB,cAJS;AAK3C,4BAAwBlB,mBAASqB,cALU;AAM3C,kCAA8BrB,mBAASkB,cANI;AAO3C,sCAAkC,aAPS;AAQ3C,8BAA0BlB,mBAASsB,cARQ;AAS3C,+BAA2BtB,mBAASuB,cATO;AAU3C,sCAAkCvB,mBAASuB,cAVA;AAW3C,qCAAiCvB,mBAASuB;AAXC,GAAP;AAAA,CAAtC;;AAcO,IAAMC,kBAAkB,GAAG;AAChCzB,EAAAA,KAAK,EAALA,KADgC;AAEhCa,EAAAA,IAAI,EAAJA,IAFgC;AAGhCK,EAAAA,YAAY,EAAZA;AAHgC,CAA3B","sourcesContent":["/*\n * Wire\n * Copyright (C) 2022 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject} from '@emotion/react';\nimport {COLOR, COLOR_V2} from './Identity';\n\nconst light: () => CSSObject = () => ({\n  // Checkbox\n  '--checkbox-background': COLOR_V2.GRAY_20,\n  '--checkbox-background-disabled': COLOR_V2.GRAY_10,\n  '--checkbox-background-disabled-selected': COLOR_V2.GRAY_60,\n  '--checkbox-border': COLOR_V2.GRAY_80,\n  '--checkbox-border-disabled': COLOR_V2.GRAY_70,\n\n  // Icon Button\n  '--icon-button-primary-enabled-bg': COLOR.WHITE,\n  '--icon-button-primary-hover-bg': COLOR_V2.GRAY_20,\n  '--icon-button-primary-border': COLOR_V2.GRAY_40,\n  '--icon-button-primary-disabled-bg': COLOR_V2.GRAY_20,\n  '--icon-button-primary-disabled-border': COLOR_V2.GRAY_40,\n  '--icon-button-primary-hover-border': COLOR_V2.GRAY_50,\n\n  // Button\n  '--button-primary-disabled-bg': COLOR_V2.GRAY_50,\n  '--button-primary-disabled-text': COLOR_V2.GRAY_80,\n\n  '--button-tertiary-bg': COLOR_V2.GRAY_10,\n  '--button-tertiary-border': COLOR_V2.GRAY_40,\n  '--button-tertiary-hover-bg': COLOR_V2.GRAY_20,\n  '--button-tertiary-hover-border': COLOR_V2.GRAY_50,\n  '--button-tertiary-disabled-bg': COLOR_V2.GRAY_20,\n  '--button-tertiary-disabled-border': 'transparent',\n\n  // Inputs\n  '--text-input-background': COLOR.WHITE,\n  '--text-input-border': COLOR_V2.GRAY_40,\n  '--text-input-border-hover': COLOR_V2.GRAY_60,\n  '--text-input-placeholder': COLOR_V2.GRAY_70,\n  '--text-input-disabled': COLOR_V2.GRAY_20,\n  '--text-input-label': COLOR_V2.GRAY_80,\n\n  // General\n  '--danger-color': COLOR_V2.RED_LIGHT_500,\n  '--app-bg': COLOR_V2.GRAY_10,\n  '--main-color': COLOR.BLACK,\n});\n\nconst dark: () => CSSObject = () => ({\n  // Checkbox\n  '--checkbox-background': COLOR_V2.GRAY_90,\n  '--checkbox-background-disabled': COLOR_V2.GRAY_90,\n  '--checkbox-background-disabled-selected': COLOR_V2.GRAY_80,\n  '--checkbox-border': COLOR_V2.GRAY_60,\n  '--checkbox-border-disabled': COLOR_V2.GRAY_60,\n\n  // Icon Button\n  '--icon-button-primary-enabled-bg': COLOR_V2.GRAY_90,\n  '--icon-button-primary-hover-bg': COLOR_V2.GRAY_80,\n  '--icon-button-primary-border': COLOR_V2.GRAY_100,\n  '--icon-button-primary-disabled-bg': COLOR_V2.GRAY_95,\n  '--icon-button-primary-disabled-border': COLOR_V2.GRAY_90,\n  '--icon-button-primary-hover-border': COLOR_V2.GRAY_70,\n\n  // Button\n  '--button-primary-disabled-bg': COLOR_V2.GRAY_70,\n  '--button-primary-disabled-text': COLOR.BLACK,\n\n  '--button-tertiary-bg': COLOR_V2.GRAY_90,\n  '--button-tertiary-border': COLOR_V2.GRAY_100,\n  '--button-tertiary-hover-bg': COLOR_V2.GRAY_80,\n  '--button-tertiary-hover-border': COLOR_V2.GRAY_80,\n  '--button-tertiary-disabled-bg': COLOR_V2.GRAY_95,\n  '--button-tertiary-disabled-border': 'transparent',\n\n  // Inputs\n  '--text-input-background': COLOR.BLACK,\n  '--text-input-border': COLOR_V2.GRAY_80,\n  '--text-input-border-hover': COLOR_V2.GRAY_40,\n  '--text-input-placeholder': COLOR_V2.GRAY_60,\n  '--text-input-disabled': COLOR_V2.GRAY_100,\n  '--text-input-label': COLOR_V2.GRAY_40,\n\n  // General\n  '--danger-color': COLOR_V2.RED_DARK_500,\n  '--app-bg': COLOR_V2.GRAY_95,\n  '--main-color': COLOR.WHITE,\n});\n\nconst accentColors: () => CSSObject = () => ({\n  '--accent-color': COLOR_V2.BLUE_LIGHT_500,\n  '--accent-color-highlight': COLOR_V2.BLUE_LIGHT_50,\n  '--accent-color-highlight-inversed': COLOR_V2.BLUE_LIGHT_800,\n  '--accent-color-border': COLOR_V2.BLUE_LIGHT_500,\n  '--accent-color-focus': COLOR_V2.BLUE_LIGHT_400,\n  '--icon-primary-active-fill': COLOR_V2.BLUE_LIGHT_500,\n  '--icon-secondary-active-border': 'transparent',\n  '--button-primary-hover': COLOR_V2.BLUE_LIGHT_600,\n  '--button-primary-active': COLOR_V2.BLUE_LIGHT_700,\n  '--button-primary-active-border': COLOR_V2.BLUE_LIGHT_700,\n  '--button-primary-focus-border': COLOR_V2.BLUE_LIGHT_700,\n});\n\nexport const GlobalCssVariables = {\n  light,\n  dark,\n  accentColors,\n};\n"],"file":"GlobalCssVariables.js"}

package/src/GlobalStyle.js

@@ -13,6 +13,8 @@ var _react = require("@emotion/react");
 
 var _emotionNormalize = _interopRequireDefault(require("emotion-normalize"));
 
+var _GlobalCssVariables = require("./GlobalCssVariables");
+
 var _TextLink = require("./Text/TextLink");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -28,7 +30,7 @@ var globalStyles = function globalStyles(theme) {
     'b, strong': {
       fontWeight: 600
     },
-    body: {
+    body: _objectSpread(_objectSpread({}, _GlobalCssVariables.GlobalCssVariables.accentColors()), {}, {
       MozOsxFontSmoothing: 'grayscale',
       WebkitFontSmoothing: 'antialiased',
       background: theme.general.backgroundColor,
@@ -40,7 +42,9 @@ var globalStyles = function globalStyles(theme) {
       lineHeight: 1.5,
       minHeight: '100vh',
       transition: 'background 0.15s'
-    },
+    }),
+    'body, body.theme-default': _objectSpread({}, _GlobalCssVariables.GlobalCssVariables.light()),
+    'body.theme-dark': _objectSpread({}, _GlobalCssVariables.GlobalCssVariables.dark()),
     html: {
       background: theme.general.backgroundColor,
       transition: 'background 0.15s'
@@ -52,7 +56,7 @@ var globalStyles = function globalStyles(theme) {
 };
 
 var globalStyle = function globalStyle(theme) {
-  return /*#__PURE__*/(0, _react.css)(_emotionNormalize["default"], " ", globalStyles(theme), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:globalStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdsb2JhbFN0eWxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRHlDIiwiZmlsZSI6Ikdsb2JhbFN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7R2xvYmFsLCBDU1NPYmplY3QsIGNzcywganN4LCB3aXRoVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBlbW90aW9uTm9ybWFsaXplIGZyb20gJ2Vtb3Rpb24tbm9ybWFsaXplJztcblxuaW1wb3J0IHR5cGUge1RoZW1lfSBmcm9tICcuL0xheW91dCc7XG5pbXBvcnQge3RleHRMaW5rU3R5bGV9IGZyb20gJy4vVGV4dC9UZXh0TGluayc7XG5cbmNvbnN0IGdsb2JhbFN0eWxlczogKHRoZW1lOiBUaGVtZSkgPT4gQ1NTT2JqZWN0ID0gKHRoZW1lOiBUaGVtZSkgPT4gKHtcbiAgJyonOiB7XG4gICAgYm94U2l6aW5nOiAnYm9yZGVyLWJveCcsXG4gIH0sXG4gIGE6IHtcbiAgICAuLi50ZXh0TGlua1N0eWxlKHRoZW1lLCB7fSksXG4gIH0sXG4gICdiLCBzdHJvbmcnOiB7XG4gICAgZm9udFdlaWdodDogNjAwLFxuICB9LFxuICBib2R5OiB7XG4gICAgTW96T3N4Rm9udFNtb290aGluZzogJ2dyYXlzY2FsZScsXG4gICAgV2Via2l0Rm9udFNtb290aGluZzogJ2FudGlhbGlhc2VkJyxcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5nZW5lcmFsLmJhY2tncm91bmRDb2xvcixcbiAgICBjb2xvcjogdGhlbWUuZ2VuZXJhbC5jb2xvcixcbiAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgZmxleERpcmVjdGlvbjogJ2NvbHVtbicsXG4gICAgZm9udEZhbWlseTogJy1hcHBsZS1zeXN0ZW0sIEJsaW5rTWFjU3lzdGVtRm9udCwgU2Vnb2UgVUksIFJvYm90bywgSGVsdmV0aWNhIE5ldWUsIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYnLFxuICAgIGZvbnRXZWlnaHQ6IDMwMCxcbiAgICBsaW5lSGVpZ2h0OiAxLjUsXG4gICAgbWluSGVpZ2h0OiAnMTAwdmgnLFxuICAgIHRyYW5zaXRpb246ICdiYWNrZ3JvdW5kIDAuMTVzJyxcbiAgfSxcbiAgaHRtbDoge1xuICAgIGJhY2tncm91bmQ6IHRoZW1lLmdlbmVyYWwuYmFja2dyb3VuZENvbG9yLFxuICAgIHRyYW5zaXRpb246ICdiYWNrZ3JvdW5kIDAuMTVzJyxcbiAgfSxcbiAgcDoge1xuICAgIG1hcmdpblRvcDogMCxcbiAgfSxcbn0pO1xuXG5jb25zdCBnbG9iYWxTdHlsZSA9ICh0aGVtZTogVGhlbWUpID0+IGNzc2BcbiAgJHtlbW90aW9uTm9ybWFsaXplfVxuICAke2dsb2JhbFN0eWxlcyh0aGVtZSl9XG5gO1xuXG5leHBvcnQgY29uc3QgR2xvYmFsU3R5bGUgPSB3aXRoVGhlbWUoKHt0aGVtZX06IHt0aGVtZTogVGhlbWV9KSA9PiB7XG4gIHJldHVybiA8R2xvYmFsIHN0eWxlcz17Z2xvYmFsU3R5bGUodGhlbWUpfSAvPjtcbn0pO1xuIl19 */");
+  return /*#__PURE__*/(0, _react.css)(_emotionNormalize["default"], " ", globalStyles(theme), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:globalStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkdsb2JhbFN0eWxlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRXlDIiwiZmlsZSI6Ikdsb2JhbFN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBXaXJlXG4gKiBDb3B5cmlnaHQgKEMpIDIwMTggV2lyZSBTd2lzcyBHbWJIXG4gKlxuICogVGhpcyBwcm9ncmFtIGlzIGZyZWUgc29mdHdhcmU6IHlvdSBjYW4gcmVkaXN0cmlidXRlIGl0IGFuZC9vciBtb2RpZnlcbiAqIGl0IHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgYXMgcHVibGlzaGVkIGJ5XG4gKiB0aGUgRnJlZSBTb2Z0d2FyZSBGb3VuZGF0aW9uLCBlaXRoZXIgdmVyc2lvbiAzIG9mIHRoZSBMaWNlbnNlLCBvclxuICogKGF0IHlvdXIgb3B0aW9uKSBhbnkgbGF0ZXIgdmVyc2lvbi5cbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZGlzdHJpYnV0ZWQgaW4gdGhlIGhvcGUgdGhhdCBpdCB3aWxsIGJlIHVzZWZ1bCxcbiAqIGJ1dCBXSVRIT1VUIEFOWSBXQVJSQU5UWTsgd2l0aG91dCBldmVuIHRoZSBpbXBsaWVkIHdhcnJhbnR5IG9mXG4gKiBNRVJDSEFOVEFCSUxJVFkgb3IgRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UuIFNlZSB0aGVcbiAqIEdOVSBHZW5lcmFsIFB1YmxpYyBMaWNlbnNlIGZvciBtb3JlIGRldGFpbHMuXG4gKlxuICogWW91IHNob3VsZCBoYXZlIHJlY2VpdmVkIGEgY29weSBvZiB0aGUgR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2VcbiAqIGFsb25nIHdpdGggdGhpcyBwcm9ncmFtLiBJZiBub3QsIHNlZSBodHRwOi8vd3d3LmdudS5vcmcvbGljZW5zZXMvLlxuICpcbiAqL1xuXG4vKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7R2xvYmFsLCBDU1NPYmplY3QsIGNzcywganN4LCB3aXRoVGhlbWV9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBlbW90aW9uTm9ybWFsaXplIGZyb20gJ2Vtb3Rpb24tbm9ybWFsaXplJztcbmltcG9ydCB7R2xvYmFsQ3NzVmFyaWFibGVzfSBmcm9tICcuL0dsb2JhbENzc1ZhcmlhYmxlcyc7XG5cbmltcG9ydCB0eXBlIHtUaGVtZX0gZnJvbSAnLi9MYXlvdXQnO1xuaW1wb3J0IHt0ZXh0TGlua1N0eWxlfSBmcm9tICcuL1RleHQvVGV4dExpbmsnO1xuXG5jb25zdCBnbG9iYWxTdHlsZXM6ICh0aGVtZTogVGhlbWUpID0+IENTU09iamVjdCA9ICh0aGVtZTogVGhlbWUpID0+ICh7XG4gICcqJzoge1xuICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICB9LFxuICBhOiB7XG4gICAgLi4udGV4dExpbmtTdHlsZSh0aGVtZSwge30pLFxuICB9LFxuICAnYiwgc3Ryb25nJzoge1xuICAgIGZvbnRXZWlnaHQ6IDYwMCxcbiAgfSxcbiAgYm9keToge1xuICAgIC4uLkdsb2JhbENzc1ZhcmlhYmxlcy5hY2NlbnRDb2xvcnMoKSxcbiAgICBNb3pPc3hGb250U21vb3RoaW5nOiAnZ3JheXNjYWxlJyxcbiAgICBXZWJraXRGb250U21vb3RoaW5nOiAnYW50aWFsaWFzZWQnLFxuICAgIGJhY2tncm91bmQ6IHRoZW1lLmdlbmVyYWwuYmFja2dyb3VuZENvbG9yLFxuICAgIGNvbG9yOiB0aGVtZS5nZW5lcmFsLmNvbG9yLFxuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBmbGV4RGlyZWN0aW9uOiAnY29sdW1uJyxcbiAgICBmb250RmFtaWx5OiAnLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LCBTZWdvZSBVSSwgUm9ib3RvLCBIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZicsXG4gICAgZm9udFdlaWdodDogMzAwLFxuICAgIGxpbmVIZWlnaHQ6IDEuNSxcbiAgICBtaW5IZWlnaHQ6ICcxMDB2aCcsXG4gICAgdHJhbnNpdGlvbjogJ2JhY2tncm91bmQgMC4xNXMnLFxuICB9LFxuICAnYm9keSwgYm9keS50aGVtZS1kZWZhdWx0Jzoge1xuICAgIC4uLkdsb2JhbENzc1ZhcmlhYmxlcy5saWdodCgpLFxuICB9LFxuICAnYm9keS50aGVtZS1kYXJrJzoge1xuICAgIC4uLkdsb2JhbENzc1ZhcmlhYmxlcy5kYXJrKCksXG4gIH0sXG4gIGh0bWw6IHtcbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5nZW5lcmFsLmJhY2tncm91bmRDb2xvcixcbiAgICB0cmFuc2l0aW9uOiAnYmFja2dyb3VuZCAwLjE1cycsXG4gIH0sXG4gIHA6IHtcbiAgICBtYXJnaW5Ub3A6IDAsXG4gIH0sXG59KTtcblxuY29uc3QgZ2xvYmFsU3R5bGUgPSAodGhlbWU6IFRoZW1lKSA9PiBjc3NgXG4gICR7ZW1vdGlvbk5vcm1hbGl6ZX1cbiAgJHtnbG9iYWxTdHlsZXModGhlbWUpfVxuYDtcblxuZXhwb3J0IGNvbnN0IEdsb2JhbFN0eWxlID0gd2l0aFRoZW1lKCh7dGhlbWV9OiB7dGhlbWU6IFRoZW1lfSkgPT4ge1xuICByZXR1cm4gPEdsb2JhbCBzdHlsZXM9e2dsb2JhbFN0eWxlKHRoZW1lKX0gLz47XG59KTtcbiJdfQ== */");
 };
 
 var GlobalStyle = (0, _react.withTheme)(function (_ref) {

package/src/GlobalStyle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GlobalStyle.tsx"],"names":["globalStyles","theme","boxSizing","a","fontWeight","body","MozOsxFontSmoothing","WebkitFontSmoothing","background","general","backgroundColor","color","display","flexDirection","fontFamily","lineHeight","minHeight","transition","html","p","marginTop","globalStyle","css","emotionNormalize","GlobalStyle"],"mappings":";;;;;;;;;;;AAoBA;;AACA;;AAGA;;;;;;AAEA,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,CAACC,KAAD;AAAA,SAAmB;AACnE,SAAK;AACHC,MAAAA,SAAS,EAAE;AADR,KAD8D;AAInEC,IAAAA,CAAC,oBACI,6BAAcF,KAAd,EAAqB,EAArB,CADJ,CAJkE;AAOnE,iBAAa;AACXG,MAAAA,UAAU,EAAE;AADD,KAPsD;AAUnEC,IAAAA,IAAI,EAAE;AACJC,MAAAA,mBAAmB,EAAE,WADjB;AAEJC,MAAAA,mBAAmB,EAAE,aAFjB;AAGJC,MAAAA,UAAU,EAAEP,KAAK,CAACQ,OAAN,CAAcC,eAHtB;AAIJC,MAAAA,KAAK,EAAEV,KAAK,CAACQ,OAAN,CAAcE,KAJjB;AAKJC,MAAAA,OAAO,EAAE,MALL;AAMJC,MAAAA,aAAa,EAAE,QANX;AAOJC,MAAAA,UAAU,EAAE,mGAPR;AAQJV,MAAAA,UAAU,EAAE,GARR;AASJW,MAAAA,UAAU,EAAE,GATR;AAUJC,MAAAA,SAAS,EAAE,OAVP;AAWJC,MAAAA,UAAU,EAAE;AAXR,KAV6D;AAuBnEC,IAAAA,IAAI,EAAE;AACJV,MAAAA,UAAU,EAAEP,KAAK,CAACQ,OAAN,CAAcC,eADtB;AAEJO,MAAAA,UAAU,EAAE;AAFR,KAvB6D;AA2BnEE,IAAAA,CAAC,EAAE;AACDC,MAAAA,SAAS,EAAE;AADV;AA3BgE,GAAnB;AAAA,CAAlD;;AAgCA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACpB,KAAD;AAAA,0BAAkBqB,UAAlB,EAChBC,4BADgB,OAEhBvB,YAAY,CAACC,KAAD,CAFI;AAAA,CAApB;;AAKO,IAAMuB,WAAW,GAAG,sBAAU,gBAA6B;AAAA,MAA3BvB,KAA2B,QAA3BA,KAA2B;AAChE,SAAO,gBAAC,aAAD;AAAQ,IAAA,MAAM,EAAEoB,WAAW,CAACpB,KAAD;AAA3B,IAAP;AACD,CAF0B,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {Global, CSSObject, css, jsx, withTheme} from '@emotion/react';\nimport emotionNormalize from 'emotion-normalize';\n\nimport type {Theme} from './Layout';\nimport {textLinkStyle} from './Text/TextLink';\n\nconst globalStyles: (theme: Theme) => CSSObject = (theme: Theme) => ({\n  '*': {\n    boxSizing: 'border-box',\n  },\n  a: {\n    ...textLinkStyle(theme, {}),\n  },\n  'b, strong': {\n    fontWeight: 600,\n  },\n  body: {\n    MozOsxFontSmoothing: 'grayscale',\n    WebkitFontSmoothing: 'antialiased',\n    background: theme.general.backgroundColor,\n    color: theme.general.color,\n    display: 'flex',\n    flexDirection: 'column',\n    fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif',\n    fontWeight: 300,\n    lineHeight: 1.5,\n    minHeight: '100vh',\n    transition: 'background 0.15s',\n  },\n  html: {\n    background: theme.general.backgroundColor,\n    transition: 'background 0.15s',\n  },\n  p: {\n    marginTop: 0,\n  },\n});\n\nconst globalStyle = (theme: Theme) => css`\n  ${emotionNormalize}\n  ${globalStyles(theme)}\n`;\n\nexport const GlobalStyle = withTheme(({theme}: {theme: Theme}) => {\n  return <Global styles={globalStyle(theme)} />;\n});\n"],"file":"GlobalStyle.js"}
+{"version":3,"sources":["GlobalStyle.tsx"],"names":["globalStyles","theme","boxSizing","a","fontWeight","body","GlobalCssVariables","accentColors","MozOsxFontSmoothing","WebkitFontSmoothing","background","general","backgroundColor","color","display","flexDirection","fontFamily","lineHeight","minHeight","transition","light","dark","html","p","marginTop","globalStyle","css","emotionNormalize","GlobalStyle"],"mappings":";;;;;;;;;;;AAoBA;;AACA;;AACA;;AAGA;;;;;;AAEA,IAAMA,YAAyC,GAAG,SAA5CA,YAA4C,CAACC,KAAD;AAAA,SAAmB;AACnE,SAAK;AACHC,MAAAA,SAAS,EAAE;AADR,KAD8D;AAInEC,IAAAA,CAAC,oBACI,6BAAcF,KAAd,EAAqB,EAArB,CADJ,CAJkE;AAOnE,iBAAa;AACXG,MAAAA,UAAU,EAAE;AADD,KAPsD;AAUnEC,IAAAA,IAAI,kCACCC,uCAAmBC,YAAnB,EADD;AAEFC,MAAAA,mBAAmB,EAAE,WAFnB;AAGFC,MAAAA,mBAAmB,EAAE,aAHnB;AAIFC,MAAAA,UAAU,EAAET,KAAK,CAACU,OAAN,CAAcC,eAJxB;AAKFC,MAAAA,KAAK,EAAEZ,KAAK,CAACU,OAAN,CAAcE,KALnB;AAMFC,MAAAA,OAAO,EAAE,MANP;AAOFC,MAAAA,aAAa,EAAE,QAPb;AAQFC,MAAAA,UAAU,EAAE,mGARV;AASFZ,MAAAA,UAAU,EAAE,GATV;AAUFa,MAAAA,UAAU,EAAE,GAVV;AAWFC,MAAAA,SAAS,EAAE,OAXT;AAYFC,MAAAA,UAAU,EAAE;AAZV,MAV+D;AAwBnE,kDACKb,uCAAmBc,KAAnB,EADL,CAxBmE;AA2BnE,yCACKd,uCAAmBe,IAAnB,EADL,CA3BmE;AA8BnEC,IAAAA,IAAI,EAAE;AACJZ,MAAAA,UAAU,EAAET,KAAK,CAACU,OAAN,CAAcC,eADtB;AAEJO,MAAAA,UAAU,EAAE;AAFR,KA9B6D;AAkCnEI,IAAAA,CAAC,EAAE;AACDC,MAAAA,SAAS,EAAE;AADV;AAlCgE,GAAnB;AAAA,CAAlD;;AAuCA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACxB,KAAD;AAAA,0BAAkByB,UAAlB,EAChBC,4BADgB,OAEhB3B,YAAY,CAACC,KAAD,CAFI;AAAA,CAApB;;AAKO,IAAM2B,WAAW,GAAG,sBAAU,gBAA6B;AAAA,MAA3B3B,KAA2B,QAA3BA,KAA2B;AAChE,SAAO,gBAAC,aAAD;AAAQ,IAAA,MAAM,EAAEwB,WAAW,CAACxB,KAAD;AAA3B,IAAP;AACD,CAF0B,CAApB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {Global, CSSObject, css, jsx, withTheme} from '@emotion/react';\nimport emotionNormalize from 'emotion-normalize';\nimport {GlobalCssVariables} from './GlobalCssVariables';\n\nimport type {Theme} from './Layout';\nimport {textLinkStyle} from './Text/TextLink';\n\nconst globalStyles: (theme: Theme) => CSSObject = (theme: Theme) => ({\n  '*': {\n    boxSizing: 'border-box',\n  },\n  a: {\n    ...textLinkStyle(theme, {}),\n  },\n  'b, strong': {\n    fontWeight: 600,\n  },\n  body: {\n    ...GlobalCssVariables.accentColors(),\n    MozOsxFontSmoothing: 'grayscale',\n    WebkitFontSmoothing: 'antialiased',\n    background: theme.general.backgroundColor,\n    color: theme.general.color,\n    display: 'flex',\n    flexDirection: 'column',\n    fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif',\n    fontWeight: 300,\n    lineHeight: 1.5,\n    minHeight: '100vh',\n    transition: 'background 0.15s',\n  },\n  'body, body.theme-default': {\n    ...GlobalCssVariables.light(),\n  },\n  'body.theme-dark': {\n    ...GlobalCssVariables.dark(),\n  },\n  html: {\n    background: theme.general.backgroundColor,\n    transition: 'background 0.15s',\n  },\n  p: {\n    marginTop: 0,\n  },\n});\n\nconst globalStyle = (theme: Theme) => css`\n  ${emotionNormalize}\n  ${globalStyles(theme)}\n`;\n\nexport const GlobalStyle = withTheme(({theme}: {theme: Theme}) => {\n  return <Global styles={globalStyle(theme)} />;\n});\n"],"file":"GlobalStyle.js"}

package/src/Identity/colors-v2.js

@@ -34,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var BASE_LIGHT_COLOR = {
   BLUE: '#0667c8',
   GREEN: '#1d7833',
-  PETROL: '#01718e',
+  TURQUOISE: '#01718e',
   PURPLE: '#8944ab',
   RED: '#c20013',
   AMBER: '#a25915'
@@ -43,7 +43,7 @@ exports.BASE_LIGHT_COLOR = BASE_LIGHT_COLOR;
 var BASE_DARK_COLOR = {
   BLUE: '#54a6ff',
   GREEN: '#30db5b',
-  PETROL: '#5de6ff',
+  TURQUOISE: '#5de6ff',
   PURPLE: '#da8fff',
   RED: '#ff7770',
   AMBER: '#ffd426'
@@ -97,29 +97,29 @@ var DARK_GREEN = {
   GREEN_DARK_800: '#135824',
   GREEN_DARK_900: '#0e421b'
 };
-var LIGHT_PETROL = {
-  PETROL_LIGHT_50: '#e5f1f3',
-  PETROL_LIGHT_100: '#cce2e7',
-  PETROL_LIGHT_200: '#99c6d0',
-  PETROL_LIGHT_300: '#67a9b8',
-  PETROL_LIGHT_400: '#348da1',
-  PETROL_LIGHT_500: BASE_LIGHT_COLOR.PETROL,
-  PETROL_LIGHT_600: '#015a6e',
-  PETROL_LIGHT_700: '#014352',
-  PETROL_LIGHT_800: '#002d37',
-  PETROL_LIGHT_900: '#1c454d'
+var LIGHT_TURQUOISE = {
+  TURQUOISE_LIGHT_50: '#e5f1f3',
+  TURQUOISE_LIGHT_100: '#cce2e7',
+  TURQUOISE_LIGHT_200: '#99c6d0',
+  TURQUOISE_LIGHT_300: '#67a9b8',
+  TURQUOISE_LIGHT_400: '#348da1',
+  TURQUOISE_LIGHT_500: BASE_LIGHT_COLOR.TURQUOISE,
+  TURQUOISE_LIGHT_600: '#015a6e',
+  TURQUOISE_LIGHT_700: '#014352',
+  TURQUOISE_LIGHT_800: '#002d37',
+  TURQUOISE_LIGHT_900: '#1c454d'
 };
-var DARK_PETROL = {
-  PETROL_DARK_50: '#effdff',
-  PETROL_DARK_100: '#dffaff',
-  PETROL_DARK_200: '#bef5ff',
-  PETROL_DARK_300: '#9ef0ff',
-  PETROL_DARK_400: '#7debff',
-  PETROL_DARK_500: BASE_DARK_COLOR.PETROL,
-  PETROL_DARK_600: '#4Ab8cc',
-  PETROL_DARK_700: '#388a99',
-  PETROL_DARK_800: '#255c66',
-  PETROL_DARK_900: '#1c454d'
+var DARK_TURQUOISE = {
+  TURQUOISE_DARK_50: '#effdff',
+  TURQUOISE_DARK_100: '#dffaff',
+  TURQUOISE_DARK_200: '#bef5ff',
+  TURQUOISE_DARK_300: '#9ef0ff',
+  TURQUOISE_DARK_400: '#7debff',
+  TURQUOISE_DARK_500: BASE_DARK_COLOR.TURQUOISE,
+  TURQUOISE_DARK_600: '#4Ab8cc',
+  TURQUOISE_DARK_700: '#388a99',
+  TURQUOISE_DARK_800: '#255c66',
+  TURQUOISE_DARK_900: '#1c454d'
 };
 var LIGHT_PURPLE = {
   PURPLE_LIGHT_50: '#f4edf7',
@@ -194,9 +194,9 @@ var DARK_AMBER = {
   AMBER_DARK_900: '#4d400b'
 };
 
-var DARK = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DARK_BLUE), DARK_GREEN), DARK_PETROL), DARK_PURPLE), DARK_RED), DARK_AMBER);
+var DARK = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DARK_BLUE), DARK_GREEN), DARK_TURQUOISE), DARK_PURPLE), DARK_RED), DARK_AMBER);
 
-var LIGHT = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_PETROL), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
+var LIGHT = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, LIGHT_BLUE), LIGHT_GREEN), LIGHT_TURQUOISE), LIGHT_PURPLE), LIGHT_RED), LIGHT_AMBER);
 
 var GRAYS = {
   GRAY_10: '#fafafa',