@vtex/admin-ui-theme
Advanced tools
@vtex/admin-ui-theme - npm Package Compare versions
Comparing version 0.1.2 to 0.2.0
@@ -6,2 +6,14 @@ # Change Log | ||
| # [0.2.0](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.1.2...@vtex/admin-ui-theme@0.2.0) (2020-11-16) | ||
| ### Features | ||
| * **admin-colors:** generate admin colors using polished ([63cb978](https://github.com/vtex/onda/commit/63cb978051c86f6da32ecd0ff6e9c6395ee99e40)) | ||
| * **button:** add new adaptative variants ([93eb56a](https://github.com/vtex/onda/commit/93eb56aded60f54e37db21b19ee1332d4f1a6309)) | ||
| ## [0.1.2](https://github.com/vtex/onda/compare/@vtex/admin-ui-theme@0.1.1...@vtex/admin-ui-theme@0.1.2) (2020-11-12) | ||
@@ -8,0 +20,0 @@ |
@@ -7,4 +7,4 @@ 'use strict'; | ||
| var polished = require('polished'); | ||
| var adminUiSystem = require('@vtex/admin-ui-system'); | ||
| var polished = require('polished'); | ||
| var React = _interopDefault(require('react')); | ||
@@ -39,45 +39,79 @@ | ||
| var colors = { | ||
| text: '#323845', | ||
| var elementaryColors = { | ||
| white: '#FFFFFF', | ||
| blue: '#DAE3F5', | ||
| purple: '#F4EFFF', | ||
| yellow: '#FDE6C0', | ||
| green: '#D6EFE5', | ||
| red: '#FEE3E3', | ||
| black: '#323845' | ||
| }; | ||
| var semanticColors = { | ||
| primary: '#2953B2', | ||
| secondary: '#DAE3F5', | ||
| danger: '#CB4242', | ||
| dangerWashed: '#FEDADA', | ||
| warning: '#FFBA52', | ||
| warningWashed: '#F6E0BA', | ||
| success: '#368369', | ||
| successWashed: '#CEE8DE' | ||
| }; | ||
| var colors = /*#__PURE__*/_extends({}, elementaryColors, { | ||
| text: { | ||
| primary: '#323845', | ||
| secondary: '#707685' | ||
| }, | ||
| background: '#FFFFFF', | ||
| muted: ['#707685', '#898F9E', '#C4C5CA', '#E0E2E7', '#F4F6FB'], | ||
| brand: '#F71963', | ||
| muted: ['#898F9E', '#C4C5CA', '#E0E2E7', '#F4F6FB'], | ||
| focus: '#8DB6FA', | ||
| emphasis: '#F71963', | ||
| primary: { | ||
| base: '#2953B2', | ||
| hover: '#1E4397', | ||
| active: '#3F6FDB', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#DAE3F5', '#E8F1FF', '#DBE9FF'] | ||
| base: semanticColors.primary, | ||
| hover: /*#__PURE__*/polished.darken(0.08, semanticColors.primary), | ||
| pressed: /*#__PURE__*/polished.darken(0.16, semanticColors.primary), | ||
| accent: '#FFFFFF' | ||
| }, | ||
| secondary: { | ||
| base: semanticColors.secondary, | ||
| hover: /*#__PURE__*/polished.darken(0.04, semanticColors.secondary), | ||
| pressed: /*#__PURE__*/polished.darken(0.08, semanticColors.secondary), | ||
| accent: semanticColors.primary | ||
| }, | ||
| danger: { | ||
| base: '#CE454F', | ||
| hover: '#A70C0C', | ||
| active: '#DE0404', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#FEE3E3', '#FFE3E3', '#FFD0D0'] | ||
| base: semanticColors.danger, | ||
| hover: /*#__PURE__*/polished.darken(0.08, semanticColors.danger), | ||
| pressed: /*#__PURE__*/polished.darken(0.16, semanticColors.danger), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.dangerWashed, | ||
| hover: /*#__PURE__*/polished.darken(0.04, semanticColors.dangerWashed), | ||
| pressed: /*#__PURE__*/polished.darken(0.08, semanticColors.dangerWashed), | ||
| accent: semanticColors.danger | ||
| } | ||
| }, | ||
| warning: { | ||
| base: '#FFBA52', | ||
| hover: '#E6A30A', | ||
| active: '#EFA906', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#FDE6C0'] | ||
| base: semanticColors.warning, | ||
| hover: /*#__PURE__*/polished.darken(0.08, semanticColors.warning), | ||
| pressed: /*#__PURE__*/polished.darken(0.16, semanticColors.warning), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.warningWashed, | ||
| hover: /*#__PURE__*/polished.darken(0.04, semanticColors.warningWashed), | ||
| pressed: /*#__PURE__*/polished.darken(0.08, semanticColors.warningWashed), | ||
| accent: semanticColors.warning | ||
| } | ||
| }, | ||
| success: { | ||
| base: '#368369', | ||
| hover: '#005C31', | ||
| active: '#26AE6E', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#D6EFE5'] | ||
| }, | ||
| basic: { | ||
| blue: '#DAE3F5', | ||
| purple: '#F4EFFF', | ||
| yellow: '#FDE6C0', | ||
| green: '#CCECE3', | ||
| red: '#FEE3E3', | ||
| black: '#323845' | ||
| base: semanticColors.success, | ||
| hover: /*#__PURE__*/polished.darken(0.08, semanticColors.success), | ||
| pressed: /*#__PURE__*/polished.darken(0.16, semanticColors.success), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.successWashed, | ||
| hover: /*#__PURE__*/polished.darken(0.04, semanticColors.successWashed), | ||
| pressed: /*#__PURE__*/polished.darken(0.08, semanticColors.successWashed), | ||
| accent: semanticColors.success | ||
| } | ||
| } | ||
| }; | ||
| }); | ||
@@ -301,7 +335,6 @@ var space = { | ||
| var variant = { | ||
| 'filled-primary': { | ||
| primary: { | ||
| textTransform: 'uppercase', | ||
| color: 'primary.contrast', | ||
| color: 'primary.accent', | ||
| backgroundColor: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
@@ -311,49 +344,44 @@ backgroundColor: 'primary.hover' | ||
| ':active': { | ||
| backgroundColor: 'primary.active' | ||
| backgroundColor: 'primary.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2' | ||
| color: 'text.primary', | ||
| backgroundColor: 'muted.1' | ||
| } | ||
| }, | ||
| 'subtle-primary': { | ||
| secondary: { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: 'primary.washed.0', | ||
| color: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| backgroundColor: 'secondary.base', | ||
| color: 'secondary.accent', | ||
| ':hover': { | ||
| backgroundColor: 'primary.washed.1', | ||
| color: 'primary.hover' | ||
| backgroundColor: 'secondary.hover' | ||
| }, | ||
| ':active': { | ||
| backgroundColor: 'primary.washed.2', | ||
| color: 'primary.active' | ||
| backgroundColor: 'secondary.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4' | ||
| color: 'muted.0', | ||
| backgroundColor: 'muted.3' | ||
| } | ||
| }, | ||
| 'text-primary': { | ||
| tertiary: { | ||
| textTransform: 'capitalize', | ||
| backgroundColor: 'transparent', | ||
| color: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| color: 'primary.hover', | ||
| backgroundColor: 'primary.washed.1' | ||
| backgroundColor: 'secondary.hover' | ||
| }, | ||
| ':active': { | ||
| color: 'primary.active', | ||
| backgroundColor: 'primary.washed.2' | ||
| color: 'primary.pressed', | ||
| backgroundColor: 'secondary.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1' | ||
| color: 'muted.0' | ||
| } | ||
| }, | ||
| 'filled-danger': { | ||
| danger: { | ||
| textTransform: 'uppercase', | ||
| color: 'danger.contrast', | ||
| color: 'danger.accent', | ||
| backgroundColor: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
@@ -363,94 +391,66 @@ backgroundColor: 'danger.hover' | ||
| ':active': { | ||
| backgroundColor: 'danger.active' | ||
| backgroundColor: 'danger.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2' | ||
| color: 'text.primary', | ||
| backgroundColor: 'muted.1' | ||
| } | ||
| }, | ||
| 'subtle-danger': { | ||
| 'danger-secondary': { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: 'danger.washed.0', | ||
| backgroundColor: 'danger.washed.base', | ||
| color: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| backgroundColor: 'danger.washed.1', | ||
| backgroundColor: 'danger.washed.hover', | ||
| color: 'danger.hover' | ||
| }, | ||
| ':active': { | ||
| backgroundColor: 'danger.washed.2', | ||
| color: 'danger.active' | ||
| backgroundColor: 'danger.washed.pressed', | ||
| color: 'danger.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4' | ||
| color: 'muted.0', | ||
| backgroundColor: 'muted.3' | ||
| } | ||
| }, | ||
| 'text-danger': { | ||
| 'danger-tertiary': { | ||
| textTransform: 'capitalize', | ||
| backgroundColor: 'transparent', | ||
| color: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| color: 'danger.washed.accent', | ||
| ':hover': { | ||
| color: 'danger.hover', | ||
| backgroundColor: 'danger.washed.1' | ||
| backgroundColor: 'danger.washed.hover' | ||
| }, | ||
| ':active': { | ||
| color: 'danger.active', | ||
| backgroundColor: 'danger.washed.2' | ||
| color: 'danger.pressed', | ||
| backgroundColor: 'danger.washed.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1' | ||
| color: 'muted.0' | ||
| } | ||
| }, | ||
| 'filled-base': { | ||
| textTransform: 'uppercase', | ||
| color: 'background', | ||
| backgroundColor: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| 'adaptative-dark': { | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| ':hover': { | ||
| color: 'background', | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.darken('text', 0.05) | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.alpha('text.primary', 0.04) | ||
| }, | ||
| ':active': { | ||
| color: 'background', | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.lighten('text', 0.05) | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.alpha('text.primary', 0.08) | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2' | ||
| color: 'muted.0' | ||
| } | ||
| }, | ||
| 'subtle-base': { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.lighten('text', 0.7), | ||
| color: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.lighten('text', 0.68), | ||
| color: 'text' | ||
| }, | ||
| ':active': { | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.lighten('text', 0.65), | ||
| color: 'text' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4' | ||
| } | ||
| }, | ||
| 'text-base': { | ||
| 'adaptative-light': { | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| color: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| color: 'text', | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.lighten('text', 0.72) | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.alpha('background', 0.04) | ||
| }, | ||
| ':active': { | ||
| color: 'text', | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.lighten('text', 0.68) | ||
| backgroundColor: /*#__PURE__*/adminUiSystem.alpha('background', 0.08) | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1' | ||
| color: 'muted.0' | ||
| } | ||
@@ -460,2 +460,3 @@ } | ||
| var styles = { | ||
| fontVariationSettings: "'wght' 92", | ||
| border: 'none', | ||
@@ -485,3 +486,3 @@ borderRadius: 'default', | ||
| borderWidth: 1, | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }; | ||
@@ -499,20 +500,3 @@ var divider = { | ||
| var buttonStyles = { | ||
| padding: 0, | ||
| border: 'none', | ||
| borderRadius: 3, | ||
| cursor: 'pointer', | ||
| position: 'relative', | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| ':focus:not([data-focus-visible-added])': { | ||
| outline: 'none', | ||
| boxShadow: 'none' | ||
| }, | ||
| ':focus': { | ||
| outline: 'none', | ||
| boxShadow: 'focus' | ||
| }, | ||
| marginLeft: '1' | ||
| }; | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| var styles$2 = { | ||
@@ -522,3 +506,3 @@ display: 'inline-flex', | ||
| borderRadius: '100px', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| border: 'none', | ||
@@ -531,19 +515,19 @@ '> svg:nth-of-type(1)': { | ||
| blue: { | ||
| bg: 'basic.blue' | ||
| bg: 'blue' | ||
| }, | ||
| green: { | ||
| bg: 'basic.green' | ||
| bg: 'green' | ||
| }, | ||
| red: { | ||
| bg: 'basic.red' | ||
| bg: 'red' | ||
| }, | ||
| black: { | ||
| bg: 'basic.black', | ||
| color: 'background' | ||
| bg: 'black', | ||
| color: 'white' | ||
| }, | ||
| yellow: { | ||
| bg: 'basic.yellow' | ||
| bg: 'yellow' | ||
| }, | ||
| purple: { | ||
| bg: 'basic.purple' | ||
| bg: 'purple' | ||
| } | ||
@@ -595,20 +579,3 @@ }; | ||
| }, [])); | ||
| }, {}), { | ||
| 'default-button': /*#__PURE__*/_extends({}, buttonStyles, { | ||
| '&:hover': { | ||
| backgroundColor: /*#__PURE__*/polished.rgba(colors.text, 0.1) | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: /*#__PURE__*/polished.rgba(colors.text, 0.13) | ||
| } | ||
| }), | ||
| 'black-button': /*#__PURE__*/_extends({}, buttonStyles, { | ||
| '&:hover': { | ||
| backgroundColor: /*#__PURE__*/polished.rgba(colors.background, 0.1) | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: /*#__PURE__*/polished.rgba(colors.background, 0.13) | ||
| } | ||
| }) | ||
| }); | ||
| }, {})); | ||
@@ -620,3 +587,3 @@ var anchor = { | ||
| ':active': { | ||
| color: 'primary.active', | ||
| color: 'primary.pressed', | ||
| textDecoration: 'underline' | ||
@@ -654,3 +621,3 @@ }, | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| display: 'table-cell', | ||
@@ -667,3 +634,3 @@ verticalAlign: 'middle', | ||
| paddingX: 2, | ||
| color: 'muted.0', | ||
| color: 'text.secondary', | ||
| fontWeight: 'normal', | ||
@@ -674,3 +641,3 @@ variant: 'text.body', | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3' | ||
| borderBottomColor: 'muted.2' | ||
| } | ||
@@ -754,3 +721,3 @@ }; | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| justifyContent: 'flex-start' | ||
@@ -801,3 +768,3 @@ }; | ||
| cursor: 'pointer', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| display: 'flex', | ||
@@ -845,3 +812,3 @@ alignItems: 'center' | ||
| borderWidth: '1px', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'transparent', | ||
@@ -867,4 +834,4 @@ borderRadius: 'circle', | ||
| ':active': { | ||
| borderColor: 'primary.active', | ||
| backgroundColor: 'primary.active' | ||
| borderColor: 'primary.pressed', | ||
| backgroundColor: 'primary.pressed' | ||
| } | ||
@@ -874,14 +841,14 @@ }, | ||
| cursor: 'not-allowed', | ||
| backgroundColor: 'muted.3', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.0', | ||
| ':after': { | ||
| backgroundColor: 'muted.1' | ||
| backgroundColor: 'muted.0' | ||
| } | ||
| }, | ||
| ':hover': { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }, | ||
| ':active': { | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'primary.washed.0' | ||
| borderColor: 'text.secondary', | ||
| backgroundColor: 'secondary.base' | ||
| }, | ||
@@ -924,3 +891,3 @@ ':focus:not([data-focus-visible-added])': { | ||
| borderWidth: 1, | ||
| borderColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| borderRadius: 3, | ||
@@ -945,8 +912,8 @@ cursor: 'pointer', | ||
| '&:active': { | ||
| backgroundColor: 'primary.active', | ||
| borderColor: 'primary.active' | ||
| backgroundColor: 'primary.pressed', | ||
| borderColor: 'primary.pressed' | ||
| } | ||
| }, | ||
| '&:indeterminate': { | ||
| backgroundColor: 'primary.washed.0', | ||
| backgroundColor: 'secondary.base', | ||
| borderColor: 'primary.base', | ||
@@ -967,5 +934,5 @@ color: 'primary.base', | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1' | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0' | ||
| }, | ||
@@ -975,20 +942,20 @@ '&:hover': { | ||
| color: 'primary.hover', | ||
| bg: 'primary.washed.1' | ||
| bg: 'secondary.hover' | ||
| }, | ||
| '&:active': { | ||
| borderColor: 'primary.active', | ||
| color: 'primary.active' | ||
| borderColor: 'primary.pressed', | ||
| color: 'primary.pressed' | ||
| } | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1' | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0' | ||
| }, | ||
| '&:hover': { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: 'primary.washed.0', | ||
| borderColor: 'muted.0' | ||
| backgroundColor: 'secondary.base', | ||
| borderColor: 'text.secondary' | ||
| }, | ||
@@ -1024,5 +991,5 @@ ':focus:not([data-focus-visible-added])': { | ||
| borderRadius: '6.25rem', | ||
| backgroundColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| borderWidth: 1, | ||
@@ -1034,3 +1001,3 @@ '&:after': { | ||
| borderRadius: '1.25rem', | ||
| backgroundColor: 'success.contrast', | ||
| backgroundColor: 'success.accent', | ||
| transition: 'transform .25s ease' | ||
@@ -1046,6 +1013,6 @@ }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| '&:after': { | ||
| backgroundColor: 'muted.2' | ||
| backgroundColor: 'muted.1' | ||
| } | ||
@@ -1055,17 +1022,17 @@ } | ||
| '&:hover': { | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0' | ||
| backgroundColor: 'text.secondary', | ||
| borderColor: 'text.secondary' | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| '&:after': { | ||
| backgroundColor: 'muted.2' | ||
| backgroundColor: 'muted.1' | ||
| } | ||
| }, | ||
| ':not(:checked):active': { | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'text.secondary', | ||
| borderColor: 'text.secondary', | ||
| ':after': { | ||
| backgroundColor: 'primary.washed.0' | ||
| backgroundColor: 'secondary.base' | ||
| } | ||
@@ -1119,3 +1086,3 @@ }, | ||
| paddingRight: 4, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderRadius: 'default', | ||
@@ -1125,7 +1092,7 @@ bg: 'inherit', | ||
| fontSize: 1, | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| outline: 0, | ||
| transition: 'snap', | ||
| ':hover': { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }, | ||
@@ -1137,5 +1104,5 @@ ':focus': { | ||
| ':disabled': { | ||
| bg: 'muted.4', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1' | ||
| bg: 'muted.3', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0' | ||
| }, | ||
@@ -1158,3 +1125,3 @@ // Label styles | ||
| var clearButtonStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| marginY: '14px', | ||
@@ -1177,3 +1144,3 @@ marginRight: 1, | ||
| ':hover': { | ||
| color: 'text' | ||
| color: 'text.primary' | ||
| }, | ||
@@ -1190,3 +1157,3 @@ '> div': { | ||
| var iconStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| top: 1, | ||
@@ -1207,6 +1174,6 @@ left: 0, | ||
| var suffixStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| borderLeftStyle: 'solid', | ||
| borderLeftWidth: '1px', | ||
| borderLeftColor: 'muted.3', | ||
| borderLeftColor: 'muted.2', | ||
| paddingTop: '14px', | ||
@@ -1299,3 +1266,3 @@ marginTop: 'px', | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| boxShadow: 'menu', | ||
@@ -1324,3 +1291,3 @@ outline: 'none', | ||
| 'item-active': /*#__PURE__*/_extends({}, item, { | ||
| bg: 'primary.washed.0' | ||
| bg: 'secondary.base' | ||
| }) | ||
@@ -1330,3 +1297,3 @@ }; | ||
| var tooltip = { | ||
| backgroundColor: 'text', | ||
| backgroundColor: 'text.primary', | ||
| color: 'background', | ||
@@ -1351,3 +1318,3 @@ fontSize: 1, | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| boxShadow: 'menu', | ||
@@ -1361,3 +1328,3 @@ hr: { | ||
| borderRight: 'none', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| width: "calc(100% -" + space[3] + ")", | ||
@@ -1370,3 +1337,3 @@ marginX: "-" + space[3], | ||
| paddingX: 1, | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| fontSize: 1, | ||
@@ -1376,3 +1343,3 @@ border: 'none', | ||
| ':focus': { | ||
| bg: 'primary.washed.0', | ||
| bg: 'secondary.base', | ||
| outline: 'none', | ||
@@ -1382,3 +1349,3 @@ boxShadow: 'none' | ||
| ':hover': { | ||
| color: 'text' | ||
| color: 'text.primary' | ||
| }, | ||
@@ -1400,3 +1367,3 @@ width: 'full', | ||
| borderRadius: 3, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1421,3 +1388,3 @@ borderWidth: 1, | ||
| alignItems: 'center', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1448,3 +1415,3 @@ 'button + button': { | ||
| alignItems: 'center', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1482,3 +1449,3 @@ borderBottomWidth: 0, | ||
| '::-webkit-scrollbar-thumb': { | ||
| backgroundColor: 'muted.3', | ||
| backgroundColor: 'muted.2', | ||
| borderRadius: '6px', | ||
@@ -1500,3 +1467,3 @@ border: '2px solid', | ||
| alignItems: 'center', | ||
| backgroundColor: /*#__PURE__*/polished.rgba(colors.text, 0.5), | ||
| backgroundColor: /*#__PURE__*/polished.rgba(colors.text.primary, 0.5), | ||
| position: 'fixed', | ||
@@ -1580,3 +1547,3 @@ top: 0, | ||
| height: 'full', | ||
| backgroundColor: 'muted.4', | ||
| backgroundColor: 'muted.3', | ||
| backgroundSize: "200px 100%", | ||
@@ -1586,3 +1553,3 @@ backgroundRepeat: 'no-repeat', | ||
| borderRadius: 3, | ||
| backgroundImage: "linear-gradient(\n 90deg,\n " + colors.muted[4] + ",\n white,\n " + colors.muted[4] + "\n )", | ||
| backgroundImage: "linear-gradient(\n 90deg,\n " + colors.muted[3] + ",\n white,\n " + colors.muted[3] + "\n )", | ||
| animation: load + " 1.2s ease-in-out infinite" | ||
@@ -1602,3 +1569,3 @@ }; | ||
| bg: 'background', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1636,3 +1603,3 @@ borderWidth: 1, | ||
| base: /*#__PURE__*/_extends({}, styles$9, { | ||
| bg: 'text', | ||
| bg: 'text.primary', | ||
| color: 'background' | ||
@@ -1642,7 +1609,7 @@ }), | ||
| bg: 'primary.base', | ||
| color: 'primary.contrast' | ||
| color: 'primary.accent' | ||
| }), | ||
| danger: /*#__PURE__*/_extends({}, styles$9, { | ||
| bg: 'danger.base', | ||
| color: 'danger.contrast' | ||
| color: 'danger.accent' | ||
| }) | ||
@@ -1681,3 +1648,3 @@ }; | ||
| "default": /*#__PURE__*/_extends({}, borderStyles, { | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }), | ||
@@ -1689,3 +1656,3 @@ 'divider-bottom': { | ||
| borderBottomRightRadius: 0, | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }, | ||
@@ -1697,9 +1664,9 @@ 'divider-top': { | ||
| borderTopRightRadius: 0, | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }, | ||
| strong: /*#__PURE__*/_extends({}, borderStyles, { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }), | ||
| disabled: /*#__PURE__*/_extends({}, borderStyles, { | ||
| borderColor: 'muted.2' | ||
| borderColor: 'muted.1' | ||
| }), | ||
@@ -1717,6 +1684,6 @@ primary: /*#__PURE__*/_extends({}, borderStyles, { | ||
| bg: 'background', | ||
| color: 'text' | ||
| color: 'text.primary' | ||
| }, | ||
| inverted: { | ||
| bg: 'text', | ||
| bg: 'text.primary', | ||
| color: 'background' | ||
@@ -1726,31 +1693,31 @@ }, | ||
| bg: 'primary.base', | ||
| color: 'primary.contrast' | ||
| color: 'primary.accent' | ||
| }, | ||
| 'primary-washed': { | ||
| bg: 'primary.washed.0', | ||
| color: 'primary.base' | ||
| secondary: { | ||
| bg: 'secondary.base', | ||
| color: 'secondary.accent' | ||
| }, | ||
| danger: { | ||
| bg: 'danger.base', | ||
| color: 'danger.contrast' | ||
| color: 'danger.accent' | ||
| }, | ||
| 'danger-washed': { | ||
| bg: 'danger.washed.0', | ||
| color: 'danger.base' | ||
| bg: 'danger.washed.base', | ||
| color: 'danger.washed.accent' | ||
| }, | ||
| success: { | ||
| bg: 'success.base', | ||
| color: 'success.contrast' | ||
| color: 'success.accent' | ||
| }, | ||
| 'success-washed': { | ||
| bg: 'success.washed.0', | ||
| color: 'success.base' | ||
| bg: 'success.washed.base', | ||
| color: 'success.washed.accent' | ||
| }, | ||
| warning: { | ||
| bg: 'warning.base', | ||
| color: 'warning.contrast' | ||
| color: 'warning.accent' | ||
| }, | ||
| 'warning-washed': { | ||
| bg: 'warning.washed.0', | ||
| color: 'warning.base' | ||
| bg: 'warning.washed.base', | ||
| color: 'warning.washed.accent' | ||
| } | ||
@@ -1757,0 +1724,0 @@ }; |
@@ -1,2 +0,2 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("@vtex/admin-ui-system"),o=require("polished"),t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function i(){return(i=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function n(e,r){return r||(r=e.slice(0)),e.raw=r,e}var a={text:"#323845",background:"#FFFFFF",muted:["#707685","#898F9E","#C4C5CA","#E0E2E7","#F4F6FB"],focus:"#8DB6FA",emphasis:"#F71963",primary:{base:"#2953B2",hover:"#1E4397",active:"#3F6FDB",contrast:"#FFFFFF",washed:["#DAE3F5","#E8F1FF","#DBE9FF"]},danger:{base:"#CE454F",hover:"#A70C0C",active:"#DE0404",contrast:"#FFFFFF",washed:["#FEE3E3","#FFE3E3","#FFD0D0"]},warning:{base:"#FFBA52",hover:"#E6A30A",active:"#EFA906",contrast:"#FFFFFF",washed:["#FDE6C0"]},success:{base:"#368369",hover:"#005C31",active:"#26AE6E",contrast:"#FFFFFF",washed:["#D6EFE5"]},basic:{blue:"#DAE3F5",purple:"#F4EFFF",yellow:"#FDE6C0",green:"#CCECE3",red:"#FEE3E3",black:"#323845"}},d={0:"0rem",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",px:"0.0625rem","2px":"0.125rem"},l={sizes:{sm:"20rem",md:"48rem",lg:"56rem",xl:"64rem","1/2":"50%","1/4":"25%","2/4":"50%","3/4":"75%","1/8":"12.5%","2/8":"25%","3/8":"37.5%","4/8":"50%","5/8":"62.5%","6/8":"75%","7/8":"87.5%","1/12":"8.333333%","2/12":"16.666667%","3/12":"25%","4/12":"33.333333%","5/12":"41.666667%","6/12":"50%","7/12":"58.333333%","8/12":"66.666667%","9/12":"75%","10/12":"83.333333%","11/12":"91.666667%",full:"100%",screenHeight:"100vh",screenWidth:"100vw"},colors:a,space:d,breakpoints:["640px","768px","1024px","1280px"],transition:{snap:"all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",fade:"all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",pop:"all 150ms cubic-bezier(0.4, 0.14, 0.3, 1)",callout:"all 240ms cubic-bezier(0.4, 0.14, 0.3, 1)"},fontSizes:{0:"0.75rem",1:"0.875rem",2:"1rem",3:"1.125rem",4:"1.25rem"},zIndexes:{under:-1,plain:0,over:999,1:1,2:2,3:3,4:4,5:5},fontWeights:{light:{fontVariationSettings:"'wght' 80",fontWeight:300},regular:{fontVariationSettings:"'wght' 92",fontWeight:400},medium:{fontVariationSettings:"'wght' 100",fontWeight:500},bold:{fontVariationSettings:"'wght' 108",fontWeight:600}},fontVariationSettings:{regular:"'wght' 92"},lineHeights:{small:1.125,body:1.25,highlight:1.25,action:1.5,subtitle:1.5,headline:1.5},shadows:{menu:"0rem 0rem 1rem 0rem rgba(0,0,0,0.10)",subtle:"0rem 0rem 1.5rem 0rem rgba(0,0,0,0.05)",focus:"0rem 0rem 0rem "+d["2px"]+" "+a.focus},borderRadius:{default:"4px",flat:"0px",pill:"100px",circle:"100%"}},s={regular:{fontSize:1,height:40,width:"auto",paddingLeft:4,paddingRight:4},"regular-icon":{fontSize:1,height:40,width:40,paddingLeft:1,paddingRight:1,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-start":{fontSize:1,height:40,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-end":{fontSize:1,height:40,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},small:{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:3},"small-icon":{fontSize:0,height:32,width:32,paddingLeft:"2px",paddingRight:"2px",svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-start":{fontSize:0,height:32,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-end":{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}}},g={"filled-primary":{textTransform:"uppercase",color:"primary.contrast",backgroundColor:"primary.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"primary.hover"},":active":{backgroundColor:"primary.active"},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-primary":{textTransform:"uppercase",backgroundColor:"primary.washed.0",color:"primary.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"primary.washed.1",color:"primary.hover"},":active":{backgroundColor:"primary.washed.2",color:"primary.active"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-primary":{textTransform:"capitalize",backgroundColor:"transparent",color:"primary.base",fontVariationSettings:"'wght' 92",":hover":{color:"primary.hover",backgroundColor:"primary.washed.1"},":active":{color:"primary.active",backgroundColor:"primary.washed.2"},":disabled":{color:"muted.1"}},"filled-danger":{textTransform:"uppercase",color:"danger.contrast",backgroundColor:"danger.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"danger.hover"},":active":{backgroundColor:"danger.active"},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-danger":{textTransform:"uppercase",backgroundColor:"danger.washed.0",color:"danger.base",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:"danger.washed.1",color:"danger.hover"},":active":{backgroundColor:"danger.washed.2",color:"danger.active"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-danger":{textTransform:"capitalize",backgroundColor:"transparent",color:"danger.base",fontVariationSettings:"'wght' 92",":hover":{color:"danger.hover",backgroundColor:"danger.washed.1"},":active":{color:"danger.active",backgroundColor:"danger.washed.2"},":disabled":{color:"muted.1"}},"filled-base":{textTransform:"uppercase",color:"background",backgroundColor:"text",fontVariationSettings:"'wght' 92",":hover":{color:"background",backgroundColor:r.darken("text",.05)},":active":{color:"background",backgroundColor:r.lighten("text",.05)},":disabled":{color:"text",backgroundColor:"muted.2"}},"subtle-base":{textTransform:"uppercase",backgroundColor:r.lighten("text",.7),color:"text",fontVariationSettings:"'wght' 92",":hover":{backgroundColor:r.lighten("text",.68),color:"text"},":active":{backgroundColor:r.lighten("text",.65),color:"text"},":disabled":{color:"muted.1",backgroundColor:"muted.4"}},"text-base":{backgroundColor:"transparent",color:"text",fontVariationSettings:"'wght' 92",":hover":{color:"text",backgroundColor:r.lighten("text",.72)},":active":{color:"text",backgroundColor:r.lighten("text",.68)},":disabled":{color:"muted.1"}}},c={border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},h=i({},Object.keys(g).reduce((function(e,r){return i({},e,Object.keys(s).reduce((function(e,o){var t;return i({},e,((t={})[r+"-"+o]=i({},c,g[r],s[o]),t))}),[]))}),{})),b={border:"solid",borderWidth:1,borderColor:"muted.3"},u={horizontal:i({},b,{marginY:0,borderBottom:0}),vertical:i({},b,{marginX:0,borderLeft:0})},m={padding:0,border:"none",borderRadius:3,cursor:"pointer",position:"relative",color:"currentColor",backgroundColor:"transparent",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},marginLeft:"1"},p={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"text",border:"none","> svg:nth-of-type(1)":{marginRight:1}},f={blue:{bg:"basic.blue"},green:{bg:"basic.green"},red:{bg:"basic.red"},black:{bg:"basic.black",color:"background"},yellow:{bg:"basic.yellow"},purple:{bg:"basic.purple"}},x={small:{height:26,paddingX:"2",lineHeight:"small",fontVariationSettings:"'wght' 80",fontWeight:400,fontSize:0,svg:{width:16,height:16,minWidth:16,minHeight:16},button:{height:16,width:16}},regular:{height:40,paddingX:"4",lineHeight:"subtitle",fontVariationSettings:"'wght' 92",fontWeight:500,fontSize:2,svg:{width:20,minWidth:20,height:20,minHeight:20},button:{height:20,width:20}}},w=i({},Object.keys(f).reduce((function(e,r){return i({},e,Object.keys(x).reduce((function(e,o){var t;return i({},e,((t={})[r+"-"+o]=i({},p,f[r],x[o]),t))}),[]))}),{}),{"default-button":i({},m,{"&:hover":{backgroundColor:o.rgba(a.text,.1)},"&:active":{backgroundColor:o.rgba(a.text,.13)}}),"black-button":i({},m,{"&:hover":{backgroundColor:o.rgba(a.background,.1)},"&:active":{backgroundColor:o.rgba(a.background,.13)}})}),v={table:{display:"table",width:"full"},header:{display:"table-header-group"},body:{display:"table-row-group"},"row-ltr":{display:"table-row",textAlign:"left"},"row-rtl":{display:"table-row",textAlign:"right"},cell:{bg:"background",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"background",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"muted.0",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3"}},y={skeleton:{height:24},image:{regular:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4},compact:{width:32,minWidth:32,height:32,minHeight:32,borderRadius:4},variable:{minWidth:32,minHeight:32,borderRadius:4}},"image-preview":{small:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4,boxShadow:"menu"},regular:{width:156,minWidth:156,height:156,minHeight:156,borderRadius:4,boxShadow:"menu"},large:{width:256,minWidth:256,height:256,minHeight:256,borderRadius:4,boxShadow:"menu"}},regular:r.merge(v,{cell:{height:80}}),compact:r.merge(v,{cell:{height:48}}),variable:r.merge(v,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},C={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.3",justifyContent:"flex-start"},k={compact:i({},C,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:i({},C,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:i({},C,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},S={fontVariationSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"text",display:"flex",alignItems:"center"}},F={"horizontal-regular":i({},S,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":i({},S,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":i({},S,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":i({},S,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},R={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"muted.2",backgroundColor:"transparent",borderRadius:"circle",":after":{content:'""',display:"block",borderRadius:"circle",backgroundColor:"white",opacity:0},":checked":{backgroundColor:"primary.base",borderColor:"primary.base",":after":{opacity:1},":hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},":active":{borderColor:"primary.active",backgroundColor:"primary.active"}},":disabled":{cursor:"not-allowed",backgroundColor:"muted.3",borderColor:"muted.1",":after":{backgroundColor:"muted.1"}},":hover":{borderColor:"text"},":active":{borderColor:"muted.0",backgroundColor:"primary.washed.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},W={regular:r.merge(R,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:r.merge(R,{height:16,width:16,padding:1,":after":{width:6,height:6}})},H={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"muted.1",borderRadius:3,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center","&:checked":{backgroundColor:"primary.base",borderColor:"primary.base","&:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&[disabled]:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%238B9299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&:hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},"&:active":{backgroundColor:"primary.active",borderColor:"primary.active"}},"&:indeterminate":{backgroundColor:"primary.washed.0",borderColor:"primary.base",color:"primary.base","&:after":{content:'""',position:"absolute",width:8,height:0,borderWidth:1,borderStyle:"solid",borderLeft:0,borderRight:0,borderRadius:3,borderColor:"currentColor"},"&:disabled":{backgroundColor:"muted.2",borderColor:"muted.1",color:"muted.1"},"&:hover":{borderColor:"primary.hover",color:"primary.hover",bg:"primary.washed.1"},"&:active":{borderColor:"primary.active",color:"primary.active"}},"&:disabled":{backgroundColor:"muted.2",borderColor:"muted.1",color:"muted.1"},"&:hover":{borderColor:"text"},"&:active":{backgroundColor:"primary.washed.0",borderColor:"muted.0"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},z={regular:i({},H,{height:20,width:20,minWidth:20,minHeight:20}),small:i({},H,{height:16,width:16,minWidth:16,minHeight:16})},L={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"muted.1",borderStyle:"solid",borderColor:"muted.1",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"success.contrast",transition:"transform .25s ease"},"&:checked":{backgroundColor:"success.base",borderColor:"success.base","&:hover":{backgroundColor:"success.hover",borderColor:"success.hover"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.1","&:after":{backgroundColor:"muted.2"}}},"&:hover":{backgroundColor:"muted.0",borderColor:"muted.0"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.1","&:after":{backgroundColor:"muted.2"}},":not(:checked):active":{backgroundColor:"muted.0",borderColor:"muted.0",":after":{backgroundColor:"primary.washed.0"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},B={regular:r.merge(L,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:r.merge(L,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},E={fontVariationSettings:'"wght" 92',width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.3",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text",outline:0,transition:"snap",":hover":{borderColor:"text"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px "+a.primary.base},":disabled":{bg:"muted.4",borderColor:"muted.1",color:"muted.1"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"primary.base"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":active + label":{transform:"translate(1px, 4px) scale(0.875)"},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},T={color:"muted.1",marginY:"14px",marginRight:1,height:20,width:20,border:"none",borderRadius:"default",bg:"transparent",cursor:"pointer",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},":hover":{color:"text"},"> div":{display:"flex",height:"full",width:"full",margin:"auto",alignItems:"center",justifyContent:"center"}},V={color:"muted.1",top:1,left:0,paddingX:3,paddingTop:"14px",position:"absolute",width:44,height:48,svg:{height:20,width:20,minWidth:20,minHeight:20}},D={color:"muted.1",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"muted.3",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontVariationSettings:"regular",fontSize:1},j={default:i({},E),"with-icon":i({},E,{paddingLeft:"44px"}),"with-suffix":i({},E,{paddingRight:"64px"}),"with-clear":i({},E,{paddingRight:"44px"}),"with-icon-clear":i({},E,{paddingLeft:"44px",paddingRight:"44px"}),"with-icon-suffix":i({},E,{paddingRight:"64px",paddingLeft:"44px"}),"with-suffix-clear":i({},E,{paddingRight:"75px"}),"with-icon-suffix-clear":i({},E,{paddingLeft:"44px",paddingRight:"75px"})},I={position:"relative"},A=i({container:i({},I),"container-with-icon":i({},I,{label:{left:"44px"}}),"icon-style":i({},V),"suffix-style":i({},D),"clear-button-style":i({},T)},j),X={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},q={input:{borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px "+a.danger.base},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"danger.base"},":hover":{borderColor:"danger.hover"}},label:{color:"danger.base"}},O={default:i({},X),error:i({},X,q)},Y={visibility:"hidden",cursor:"pointer",bg:"background",borderRadius:"default",borderWidth:1,borderStyle:"solid",borderColor:"muted.2",boxShadow:"menu",outline:"none",marginTop:1,paddingY:4,width:"max-content",position:"absolute",zIndex:999},M={display:"flex",alignItems:"center",height:24,paddingX:4,cursor:"pointer",bg:"background"},P={menu:Y,"menu-visible":i({},Y,{visibility:"visible"}),item:M,"item-active":i({},M,{bg:"primary.washed.0"})},G={display:"flex",flexDirection:"column",bg:"background",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"muted.2",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"muted.2",width:"calc(100% -"+d[3]+")",marginX:"-"+d[3],outline:"none"},"> button":{marginY:"2px",paddingX:1,color:"text",fontSize:1,border:"none",textTransform:"initial",":focus":{bg:"primary.washed.0",outline:"none",boxShadow:"none"},":hover":{color:"text"},width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}}},_={outline:"none",bg:"background",borderRadius:3,borderColor:"muted.3",borderStyle:"solid",borderWidth:1,position:"relative",overflowY:"auto",overflowX:"hidden",maxHeight:"3/4",margin:2,opacity:0,transform:"translate3d(0, 48px, 0)",transition:"pop","&[data-enter]":{opacity:1,transform:"translate3d(0, 0, 0)"}},K={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.3",borderStyle:"solid","button + button":{ml:4},py:4,px:6,borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,h1:{variant:"text.subtitle",lineHeight:0},position:"sticky",top:0,left:0,right:0,bg:"background",zIndex:999},J={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.3",borderStyle:"solid",borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,position:"sticky",bottom:0,left:0,right:0,bg:"background",p:6,flexDirection:["column-reverse","column-reverse","row"],">button":{width:["full","full","inherit"]},"* + button":{ml:[0,0,4],mb:[4,4,0]}},N={pt:4,px:6,pb:6},Q=i({},N,{scrollbarWidth:"thin",scrollbarColor:"background","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"muted.3",borderRadius:"6px",border:"2px solid",color:"background"}},{overflowY:"auto"}),U={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:o.rgba(a.text,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":i({},_,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":i({},_,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":i({},_,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":i({},K,{height:56}),"header-regular":i({},K,{height:56}),"header-large":i({},K,{height:80}),"content-with-small-scroll-area":i({},Q,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":i({},Q,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":i({},Q,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":i({},Q,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":i({},Q,{height:"calc(100% - 10rem)"}),content:i({},N),"footer-small":i({},J,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":i({},J,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":i({},J,{borderTopWidth:1,minHeight:"5rem"})};function Z(){var e=n(["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"]);return Z=function(){return e},e}var $={display:"inline-block",width:"full",height:"full",backgroundColor:"muted.4",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n 90deg,\n "+a.muted[4]+",\n white,\n "+a.muted[4]+"\n )",animation:r.keyframes(Z())+" 1.2s ease-in-out infinite"},ee={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},re={button:h,list:k,table:y,controlGroup:F,toggle:B,checkbox:z,radio:W,input:A,textField:O,tooltip:{backgroundColor:"text",color:"background",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32},menu:G,modal:U,skeleton:{rect:i({},$,{borderRadius:"default"}),circle:i({},$,{borderRadius:"circle"})},divider:u,collapsible:{container:{bg:"background",borderColor:"muted.3",borderStyle:"solid",borderWidth:1,borderRadius:3},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:3,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6}},avatar:{base:i({},ee,{bg:"text",color:"background"}),primary:i({},ee,{bg:"primary.base",color:"primary.contrast"}),danger:i({},ee,{bg:"danger.base",color:"danger.contrast"})},tag:w,anchor:{font:"inherit",color:"primary.base",textDecoration:"none",":active":{color:"primary.active",textDecoration:"underline"},":hover":{color:"primary.hover",textDecoration:"underline"}},selectButton:P},oe={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},te={palette:{base:{bg:"background",color:"text"},inverted:{bg:"text",color:"background"},primary:{bg:"primary.base",color:"primary.contrast"},"primary-washed":{bg:"primary.washed.0",color:"primary.base"},danger:{bg:"danger.base",color:"danger.contrast"},"danger-washed":{bg:"danger.washed.0",color:"danger.base"},success:{bg:"success.base",color:"success.contrast"},"success-washed":{bg:"success.washed.0",color:"success.base"},warning:{bg:"warning.base",color:"warning.contrast"},"warning-washed":{bg:"warning.washed.0",color:"warning.base"}},text:{small:{lineHeight:"small",fontVariationSettings:"regular",fontSize:0},body:{lineHeight:"body",fontVariationSettings:"regular",fontSize:1},highlight:{lineHeight:"highlight",fontVariationSettings:"regular",fontSize:1},action:{lineHeight:"action",fontVariationSettings:"regular",fontSize:1,textTransform:"uppercase"},subtitle:{lineHeight:"subtitle",fontVariationSettings:"regular",fontSize:2},headline:{lineHeight:"headline",fontVariationSettings:"regular",fontSize:4}},border:{default:i({},oe,{borderColor:"muted.3"}),"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"muted.3"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"muted.3"},strong:i({},oe,{borderColor:"text"}),disabled:i({},oe,{borderColor:"muted.2"}),primary:i({},oe,{borderColor:"primary.base"}),danger:i({},oe,{borderColor:"danger.base"})}},ie=Object.keys(te),ne=i({},l,{components:re,patterns:te});function ae(){var e=n(["\n @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n\n code > * > *,\n pre > * > *,\n code,\n pre {\n font-family: 'SF Mono', 'Operator Mono', 'Dank Mono',\n 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', Consolas, Monaco,\n monospace !important;\n }\n\n body {\n margin: 0;\n background-color: ",";\n color: ",";\n }\n\n html,\n body,\n * {\n font-family: VTEXTrustVF, -apple-system, system-ui, BlinkMacSystemFont,\n sans-serif !important;\n font-variation-settings: 'wght' 92;\n }\n\n *,\n ::before,\n ::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n }\n\n html,\n body,\n div,\n span,\n applet,\n object,\n iframe,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n blockquote,\n pre,\n a,\n abbr,\n acronym,\n address,\n big,\n cite,\n code,\n del,\n dfn,\n em,\n img,\n ins,\n kbd,\n q,\n s,\n samp,\n small,\n strike,\n strong,\n sub,\n sup,\n tt,\n var,\n b,\n u,\n i,\n center,\n dl,\n dt,\n dd,\n ol,\n ul,\n li,\n fieldset,\n form,\n label,\n legend,\n table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td,\n article,\n aside,\n canvas,\n details,\n embed,\n figure,\n figcaption,\n footer,\n header,\n hgroup,\n menu,\n nav,\n output,\n ruby,\n section,\n summary,\n time,\n mark,\n audio,\n video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n\n /* HTML5 display-role reset for older browsers */\n article,\n aside,\n details,\n figcaption,\n figure,\n footer,\n header,\n hgroup,\n menu,\n nav,\n section {\n display: block;\n }\n\n body {\n line-height: 1;\n }\n\n blockquote,\n q {\n quotes: none;\n }\n\n blockquote:before,\n blockquote:after,\n q:before,\n q:after {\n content: '';\n content: none;\n }\n\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n "]);return ae=function(){return e},e}exports.Preflight=function(){return t.createElement(r.Global,{styles:function(e){return r.css(ae(),r.get(e,"colors.background"),r.get(e,"colors.text"))}})},exports.patternKeys=ie,exports.theme=ne; | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("polished"),o=require("@vtex/admin-ui-system"),t=(e=require("react"))&&"object"==typeof e&&"default"in e?e.default:e;function n(){return(n=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function i(e,r){return r||(r=e.slice(0)),e.raw=r,e}var a=n({},{white:"#FFFFFF",blue:"#DAE3F5",purple:"#F4EFFF",yellow:"#FDE6C0",green:"#D6EFE5",red:"#FEE3E3",black:"#323845"},{text:{primary:"#323845",secondary:"#707685"},background:"#FFFFFF",brand:"#F71963",muted:["#898F9E","#C4C5CA","#E0E2E7","#F4F6FB"],focus:"#8DB6FA",primary:{base:"#2953B2",hover:r.darken(.08,"#2953B2"),pressed:r.darken(.16,"#2953B2"),accent:"#FFFFFF"},secondary:{base:"#DAE3F5",hover:r.darken(.04,"#DAE3F5"),pressed:r.darken(.08,"#DAE3F5"),accent:"#2953B2"},danger:{base:"#CB4242",hover:r.darken(.08,"#CB4242"),pressed:r.darken(.16,"#CB4242"),accent:"#FFFFFF",washed:{base:"#FEDADA",hover:r.darken(.04,"#FEDADA"),pressed:r.darken(.08,"#FEDADA"),accent:"#CB4242"}},warning:{base:"#FFBA52",hover:r.darken(.08,"#FFBA52"),pressed:r.darken(.16,"#FFBA52"),accent:"#FFFFFF",washed:{base:"#F6E0BA",hover:r.darken(.04,"#F6E0BA"),pressed:r.darken(.08,"#F6E0BA"),accent:"#FFBA52"}},success:{base:"#368369",hover:r.darken(.08,"#368369"),pressed:r.darken(.16,"#368369"),accent:"#FFFFFF",washed:{base:"#CEE8DE",hover:r.darken(.04,"#CEE8DE"),pressed:r.darken(.08,"#CEE8DE"),accent:"#368369"}}}),d={0:"0rem",1:"0.25rem",2:"0.5rem",3:"0.75rem",4:"1rem",5:"1.25rem",6:"1.5rem",7:"1.75rem",8:"2rem",px:"0.0625rem","2px":"0.125rem"},l={sizes:{sm:"20rem",md:"48rem",lg:"56rem",xl:"64rem","1/2":"50%","1/4":"25%","2/4":"50%","3/4":"75%","1/8":"12.5%","2/8":"25%","3/8":"37.5%","4/8":"50%","5/8":"62.5%","6/8":"75%","7/8":"87.5%","1/12":"8.333333%","2/12":"16.666667%","3/12":"25%","4/12":"33.333333%","5/12":"41.666667%","6/12":"50%","7/12":"58.333333%","8/12":"66.666667%","9/12":"75%","10/12":"83.333333%","11/12":"91.666667%",full:"100%",screenHeight:"100vh",screenWidth:"100vw"},colors:a,space:d,breakpoints:["640px","768px","1024px","1280px"],transition:{snap:"all 70ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",fade:"all 110ms cubic-bezier(0.2, 0.2, 0.38, 0.9)",pop:"all 150ms cubic-bezier(0.4, 0.14, 0.3, 1)",callout:"all 240ms cubic-bezier(0.4, 0.14, 0.3, 1)"},fontSizes:{0:"0.75rem",1:"0.875rem",2:"1rem",3:"1.125rem",4:"1.25rem"},zIndexes:{under:-1,plain:0,over:999,1:1,2:2,3:3,4:4,5:5},fontWeights:{light:{fontVariationSettings:"'wght' 80",fontWeight:300},regular:{fontVariationSettings:"'wght' 92",fontWeight:400},medium:{fontVariationSettings:"'wght' 100",fontWeight:500},bold:{fontVariationSettings:"'wght' 108",fontWeight:600}},fontVariationSettings:{regular:"'wght' 92"},lineHeights:{small:1.125,body:1.25,highlight:1.25,action:1.5,subtitle:1.5,headline:1.5},shadows:{menu:"0rem 0rem 1rem 0rem rgba(0,0,0,0.10)",subtle:"0rem 0rem 1.5rem 0rem rgba(0,0,0,0.05)",focus:"0rem 0rem 0rem "+d["2px"]+" "+a.focus},borderRadius:{default:"4px",flat:"0px",pill:"100px",circle:"100%"}},s={regular:{fontSize:1,height:40,width:"auto",paddingLeft:4,paddingRight:4},"regular-icon":{fontSize:1,height:40,width:40,paddingLeft:1,paddingRight:1,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-start":{fontSize:1,height:40,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},"regular-icon-end":{fontSize:1,height:40,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:24,minWidth:24,height:24,minHeight:24,margin:1}},small:{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:3},"small-icon":{fontSize:0,height:32,width:32,paddingLeft:"2px",paddingRight:"2px",svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-start":{fontSize:0,height:32,width:"auto",paddingLeft:2,paddingRight:3,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}},"small-icon-end":{fontSize:0,height:32,width:"auto",paddingLeft:3,paddingRight:2,svg:{width:20,minWidth:20,height:20,minHeight:20,margin:1}}},c={primary:{textTransform:"uppercase",color:"primary.accent",backgroundColor:"primary.base",":hover":{backgroundColor:"primary.hover"},":active":{backgroundColor:"primary.pressed"},":disabled":{color:"text.primary",backgroundColor:"muted.1"}},secondary:{textTransform:"uppercase",backgroundColor:"secondary.base",color:"secondary.accent",":hover":{backgroundColor:"secondary.hover"},":active":{backgroundColor:"secondary.pressed"},":disabled":{color:"muted.0",backgroundColor:"muted.3"}},tertiary:{textTransform:"capitalize",backgroundColor:"transparent",color:"primary.base",":hover":{color:"primary.hover",backgroundColor:"secondary.hover"},":active":{color:"primary.pressed",backgroundColor:"secondary.pressed"},":disabled":{color:"muted.0"}},danger:{textTransform:"uppercase",color:"danger.accent",backgroundColor:"danger.base",":hover":{backgroundColor:"danger.hover"},":active":{backgroundColor:"danger.pressed"},":disabled":{color:"text.primary",backgroundColor:"muted.1"}},"danger-secondary":{textTransform:"uppercase",backgroundColor:"danger.washed.base",color:"danger.base",":hover":{backgroundColor:"danger.washed.hover",color:"danger.hover"},":active":{backgroundColor:"danger.washed.pressed",color:"danger.pressed"},":disabled":{color:"muted.0",backgroundColor:"muted.3"}},"danger-tertiary":{textTransform:"capitalize",backgroundColor:"transparent",color:"danger.washed.accent",":hover":{color:"danger.hover",backgroundColor:"danger.washed.hover"},":active":{color:"danger.pressed",backgroundColor:"danger.washed.pressed"},":disabled":{color:"muted.0"}},"adaptative-dark":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:o.alpha("text.primary",.04)},":active":{backgroundColor:o.alpha("text.primary",.08)},":disabled":{color:"muted.0"}},"adaptative-light":{color:"currentColor",backgroundColor:"transparent",":hover":{backgroundColor:o.alpha("background",.04)},":active":{backgroundColor:o.alpha("background",.08)},":disabled":{color:"muted.0"}}},g={fontVariationSettings:"'wght' 92",border:"none",borderRadius:"default",cursor:"pointer",position:"relative",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},h=n({},Object.keys(c).reduce((function(e,r){return n({},e,Object.keys(s).reduce((function(e,o){var t;return n({},e,((t={})[r+"-"+o]=n({},g,c[r],s[o]),t))}),[]))}),{})),b={border:"solid",borderWidth:1,borderColor:"muted.2"},u={horizontal:n({},b,{marginY:0,borderBottom:0}),vertical:n({},b,{marginX:0,borderLeft:0})},m={display:"inline-flex",alignItems:"center",borderRadius:"100px",color:"text.primary",border:"none","> svg:nth-of-type(1)":{marginRight:1}},p={blue:{bg:"blue"},green:{bg:"green"},red:{bg:"red"},black:{bg:"black",color:"white"},yellow:{bg:"yellow"},purple:{bg:"purple"}},f={small:{height:26,paddingX:"2",lineHeight:"small",fontVariationSettings:"'wght' 80",fontWeight:400,fontSize:0,svg:{width:16,height:16,minWidth:16,minHeight:16},button:{height:16,width:16}},regular:{height:40,paddingX:"4",lineHeight:"subtitle",fontVariationSettings:"'wght' 92",fontWeight:500,fontSize:2,svg:{width:20,minWidth:20,height:20,minHeight:20},button:{height:20,width:20}}},y=n({},Object.keys(p).reduce((function(e,r){return n({},e,Object.keys(f).reduce((function(e,o){var t;return n({},e,((t={})[r+"-"+o]=n({},m,p[r],f[o]),t))}),[]))}),{})),x={table:{display:"table",width:"full"},header:{display:"table-header-group"},body:{display:"table-row-group"},"row-ltr":{display:"table-row",textAlign:"left"},"row-rtl":{display:"table-row",textAlign:"right"},cell:{bg:"background",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2",display:"table-cell",verticalAlign:"middle",paddingX:2,variant:"text.body"},columnheader:{bg:"background",height:48,display:"table-cell",verticalAlign:"middle",paddingX:2,color:"text.secondary",fontWeight:"normal",variant:"text.body",flex:1,borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2"}},w={skeleton:{height:24},image:{regular:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4},compact:{width:32,minWidth:32,height:32,minHeight:32,borderRadius:4},variable:{minWidth:32,minHeight:32,borderRadius:4}},"image-preview":{small:{width:56,minWidth:56,height:56,minHeight:56,borderRadius:4,boxShadow:"menu"},regular:{width:156,minWidth:156,height:156,minHeight:156,borderRadius:4,boxShadow:"menu"},large:{width:256,minWidth:256,height:256,minHeight:256,borderRadius:4,boxShadow:"menu"}},regular:o.merge(x,{cell:{height:80}}),compact:o.merge(x,{cell:{height:48}}),variable:o.merge(x,{cell:{verticalAlign:"top",minHeight:48,paddingY:4}})},v={display:"flex",width:"full",alignItems:"center",borderBottomWidth:1,borderBottomStyle:"solid",borderBottomColor:"muted.2",justifyContent:"flex-start"},k={compact:n({},v,{height:48,"svg, img":{minHeight:32,maxHeight:32,minWidth:32,maxWidth:32}}),regular:n({},v,{height:80,"svg, img":{minHeight:48,maxHeight:48,minWidth:48,maxWidth:48}}),comfortable:n({},v,{height:128,"svg, img":{minHeight:80,maxHeight:80,minWidth:80,maxWidth:80}})},C={fontVariationSettings:"regular",lh:"highlight",marginTop:3,marginBottom:6,display:"flex",alignItems:"flex-start","& > label > input":{marginRight:2,marginLeft:0},"& > label":{cursor:"pointer",color:"text.primary",display:"flex",alignItems:"center"}},S={"horizontal-regular":n({},C,{fontSize:"2",flexDirection:"row","& label:not(:last-child)":{marginRight:6}}),"horizontal-small":n({},C,{fontSize:"1",flexDirection:"row","& label:not(:last-child)":{marginRight:5}}),"vertical-regular":n({},C,{fontSize:"2",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}}),"vertical-small":n({},C,{fontSize:"1",flexDirection:"column","& label:not(:last-child)":{marginBottom:4}})},F={appearance:"none",margin:0,position:"relative",cursor:"pointer",borderStyle:"solid",borderWidth:"1px",borderColor:"muted.1",backgroundColor:"transparent",borderRadius:"circle",":after":{content:'""',display:"block",borderRadius:"circle",backgroundColor:"white",opacity:0},":checked":{backgroundColor:"primary.base",borderColor:"primary.base",":after":{opacity:1},":hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},":active":{borderColor:"primary.pressed",backgroundColor:"primary.pressed"}},":disabled":{cursor:"not-allowed",backgroundColor:"muted.2",borderColor:"muted.0",":after":{backgroundColor:"muted.0"}},":hover":{borderColor:"text.primary"},":active":{borderColor:"text.secondary",backgroundColor:"secondary.base"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},W={regular:o.merge(F,{height:20,width:20,padding:"5px",":after":{width:8,height:8}}),small:o.merge(F,{height:16,width:16,padding:1,":after":{width:6,height:6}})},R={appearance:"none",borderStyle:"solid",borderWidth:1,borderColor:"muted.0",borderRadius:3,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center","&:checked":{backgroundColor:"primary.base",borderColor:"primary.base","&:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&[disabled]:after":{content:"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' width='10' height='8' fill='none'><path d='M9 1L4 7L1 4' stroke='%238B9299' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></svg>\")"},"&:hover":{backgroundColor:"primary.hover",borderColor:"primary.hover"},"&:active":{backgroundColor:"primary.pressed",borderColor:"primary.pressed"}},"&:indeterminate":{backgroundColor:"secondary.base",borderColor:"primary.base",color:"primary.base","&:after":{content:'""',position:"absolute",width:8,height:0,borderWidth:1,borderStyle:"solid",borderLeft:0,borderRight:0,borderRadius:3,borderColor:"currentColor"},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.0",color:"muted.0"},"&:hover":{borderColor:"primary.hover",color:"primary.hover",bg:"secondary.hover"},"&:active":{borderColor:"primary.pressed",color:"primary.pressed"}},"&:disabled":{backgroundColor:"muted.1",borderColor:"muted.0",color:"muted.0"},"&:hover":{borderColor:"text.primary"},"&:active":{backgroundColor:"secondary.base",borderColor:"text.secondary"},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},B={regular:n({},R,{height:20,width:20,minWidth:20,minHeight:20}),small:n({},R,{height:16,width:16,minWidth:16,minHeight:16})},H={appearance:"none",position:"relative",cursor:"pointer",borderRadius:"6.25rem",backgroundColor:"muted.0",borderStyle:"solid",borderColor:"muted.0",borderWidth:1,"&:after":{content:'""',display:"block",position:"absolute",borderRadius:"1.25rem",backgroundColor:"success.accent",transition:"transform .25s ease"},"&:checked":{backgroundColor:"success.base",borderColor:"success.base","&:hover":{backgroundColor:"success.hover",borderColor:"success.hover"},"&:disabled":{backgroundColor:"muted.0",borderColor:"muted.0","&:after":{backgroundColor:"muted.1"}}},"&:hover":{backgroundColor:"text.secondary",borderColor:"text.secondary"},"&:disabled":{backgroundColor:"muted.0",borderColor:"muted.0","&:after":{backgroundColor:"muted.1"}},":not(:checked):active":{backgroundColor:"text.secondary",borderColor:"text.secondary",":after":{backgroundColor:"secondary.base"}},":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"}},z={regular:o.merge(H,{height:20,width:36,"&:after":{width:18,height:18},"&:checked":{"&:after":{transform:"translateX(16px)"}}}),small:o.merge(H,{height:16,width:28,"&:after":{width:14,height:14},"&:checked":{"&:after":{transform:"translateX(12px)"}}})},L={fontVariationSettings:'"wght" 92',width:"full",height:48,borderStyle:"solid",borderWidth:1,paddingLeft:3,paddingRight:4,borderColor:"muted.2",borderRadius:"default",bg:"inherit",marginY:1,fontSize:1,color:"text.primary",outline:0,transition:"snap",":hover":{borderColor:"text.primary"},":focus":{borderColor:"primary.base",boxShadow:"0 0 0 1px "+a.primary.base},":disabled":{bg:"muted.3",borderColor:"muted.0",color:"muted.0"},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"primary.base"},":placeholder-shown:not(:focus) + label":{paddingTop:1},":active + label":{transform:"translate(1px, 4px) scale(0.875)"},":not(:placeholder-shown) + label":{transform:"translate(1px, 4px) scale(0.875)"}},E={color:"muted.0",marginY:"14px",marginRight:1,height:20,width:20,border:"none",borderRadius:"default",bg:"transparent",cursor:"pointer",":focus:not([data-focus-visible-added])":{outline:"none",boxShadow:"none"},":focus":{outline:"none",boxShadow:"focus"},":hover":{color:"text.primary"},"> div":{display:"flex",height:"full",width:"full",margin:"auto",alignItems:"center",justifyContent:"center"}},D={color:"muted.0",top:1,left:0,paddingX:3,paddingTop:"14px",position:"absolute",width:44,height:48,svg:{height:20,width:20,minWidth:20,minHeight:20}},T={color:"muted.0",borderLeftStyle:"solid",borderLeftWidth:"1px",borderLeftColor:"muted.2",paddingTop:"14px",marginTop:"px",width:"32px",paddingLeft:3,lineHeight:"body",fontVariationSettings:"regular",fontSize:1},A={default:n({},L),"with-icon":n({},L,{paddingLeft:"44px"}),"with-suffix":n({},L,{paddingRight:"64px"}),"with-clear":n({},L,{paddingRight:"44px"}),"with-icon-clear":n({},L,{paddingLeft:"44px",paddingRight:"44px"}),"with-icon-suffix":n({},L,{paddingRight:"64px",paddingLeft:"44px"}),"with-suffix-clear":n({},L,{paddingRight:"75px"}),"with-icon-suffix-clear":n({},L,{paddingLeft:"44px",paddingRight:"75px"})},j={position:"relative"},V=n({container:n({},j),"container-with-icon":n({},j,{label:{left:"44px"}}),"icon-style":n({},D),"suffix-style":n({},T),"clear-button-style":n({},E)},A),I={display:"flex",position:"relative",justifyContent:"flex-start",flexDirection:"column"},X={input:{borderColor:"danger.base",":focus":{borderColor:"danger.base",boxShadow:"0 0 0 1px "+a.danger.base},":focus + label":{transform:"translate(1px, 4px) scale(0.875)",color:"danger.base"},":hover":{borderColor:"danger.hover"}},label:{color:"danger.base"}},q={default:n({},I),error:n({},I,X)},O={visibility:"hidden",cursor:"pointer",bg:"background",borderRadius:"default",borderWidth:1,borderStyle:"solid",borderColor:"muted.1",boxShadow:"menu",outline:"none",marginTop:1,paddingY:4,width:"max-content",position:"absolute",zIndex:999},Y={display:"flex",alignItems:"center",height:24,paddingX:4,cursor:"pointer",bg:"background"},M={menu:O,"menu-visible":n({},O,{visibility:"visible"}),item:Y,"item-active":n({},Y,{bg:"secondary.base"})},P={display:"flex",flexDirection:"column",bg:"background",marginTop:1,padding:3,minWidth:18,borderRadius:3,borderWidth:1,borderStyle:"solid",borderColor:"muted.1",boxShadow:"menu",hr:{marginY:2,borderStyle:"solid",borderBottomWidth:1,borderTop:"none",borderLeft:"none",borderRight:"none",borderColor:"muted.1",width:"calc(100% -"+d[3]+")",marginX:"-"+d[3],outline:"none"},"> button":{marginY:"2px",paddingX:1,color:"text.primary",fontSize:1,border:"none",textTransform:"initial",":focus":{bg:"secondary.base",outline:"none",boxShadow:"none"},":hover":{color:"text.primary"},width:"full",div:{justifyContent:"flex-start"},svg:{marginLeft:0,marginRight:2}}},G={outline:"none",bg:"background",borderRadius:3,borderColor:"muted.2",borderStyle:"solid",borderWidth:1,position:"relative",overflowY:"auto",overflowX:"hidden",maxHeight:"3/4",margin:2,opacity:0,transform:"translate3d(0, 48px, 0)",transition:"pop","&[data-enter]":{opacity:1,transform:"translate3d(0, 0, 0)"}},_={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.2",borderStyle:"solid","button + button":{ml:4},py:4,px:6,borderTopWidth:0,borderLeftWidth:0,borderRightWidth:0,borderBottomWidth:1,h1:{variant:"text.subtitle",lineHeight:0},position:"sticky",top:0,left:0,right:0,bg:"background",zIndex:999},K={display:"flex",justifyContent:"space-between",alignItems:"center",borderColor:"muted.2",borderStyle:"solid",borderBottomWidth:0,borderLeftWidth:0,borderRightWidth:0,position:"sticky",bottom:0,left:0,right:0,bg:"background",p:6,flexDirection:["column-reverse","column-reverse","row"],">button":{width:["full","full","inherit"]},"* + button":{ml:[0,0,4],mb:[4,4,0]}},J={pt:4,px:6,pb:6},N=n({},J,{scrollbarWidth:"thin",scrollbarColor:"background","::-webkit-scrollbar":{width:"8px"},"::-webkit-scrollbar-thumb":{backgroundColor:"muted.2",borderRadius:"6px",border:"2px solid",color:"background"}},{overflowY:"auto"}),Q={backdrop:{display:"flex",flexDirection:"column",justifyContent:["flex-end","flex-end","center"],alignItems:"center",backgroundColor:r.rgba(a.text.primary,.5),position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:9999,opacity:0,transition:"fade","&[data-enter]":{opacity:1}},"surface-small":n({},G,{width:["calc(100% - 16px)","calc(100% - 16px)",320]}),"surface-regular":n({},G,{width:["calc(100% - 16px)","calc(100% - 16px)",560]}),"surface-large":n({},G,{width:["calc(100% - 16px)","calc(100% - 16px)",800]}),"header-small":n({},_,{height:56}),"header-regular":n({},_,{height:56}),"header-large":n({},_,{height:80}),"content-with-small-scroll-area":n({},N,{height:"calc(100% - 3.5rem)"}),"content-with-regular-scroll-area":n({},N,{height:"calc(100% - 3.5rem)"}),"content-with-large-scroll-area":n({},N,{height:"calc(100% - 5rem)"}),"content-with-larger-scroll-area":n({},N,{height:"calc(100% - 7rem)"}),"content-with-extra-large-scroll-area":n({},N,{height:"calc(100% - 10rem)"}),content:n({},J),"footer-small":n({},K,{borderTopWidth:0,pt:0,">button":{width:"full"},minHeight:"3.5rem"}),"footer-regular":n({},K,{borderTopWidth:1,minHeight:"3.5rem"}),"footer-large":n({},K,{borderTopWidth:1,minHeight:"5rem"})};function U(){var e=i(["\n 0% {\n background-position: -200px 0;\n }\n 100% {\n background-position: calc(200px + 100%) 0;\n }\n"]);return U=function(){return e},e}var Z={display:"inline-block",width:"full",height:"full",backgroundColor:"muted.3",backgroundSize:"200px 100%",backgroundRepeat:"no-repeat",lineHeight:1,borderRadius:3,backgroundImage:"linear-gradient(\n 90deg,\n "+a.muted[3]+",\n white,\n "+a.muted[3]+"\n )",animation:o.keyframes(U())+" 1.2s ease-in-out infinite"},$={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,padding:2,borderRadius:"circle",textTransform:"uppercase"},ee={button:h,list:k,table:w,controlGroup:S,toggle:z,checkbox:B,radio:W,input:V,textField:q,tooltip:{backgroundColor:"text.primary",color:"background",fontSize:1,paddingY:2,paddingX:3,borderRadius:3,maxWidth:240,minHeight:32},menu:P,modal:Q,skeleton:{rect:n({},Z,{borderRadius:"default"}),circle:n({},Z,{borderRadius:"circle"})},divider:u,collapsible:{container:{bg:"background",borderColor:"muted.2",borderStyle:"solid",borderWidth:1,borderRadius:3},header:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:6,paddingLeft:3,"div > button:nth-of-type(n+2)":{marginLeft:1}},section:{paddingX:6,paddingBottom:6}},avatar:{base:n({},$,{bg:"text.primary",color:"background"}),primary:n({},$,{bg:"primary.base",color:"primary.accent"}),danger:n({},$,{bg:"danger.base",color:"danger.accent"})},tag:y,anchor:{font:"inherit",color:"primary.base",textDecoration:"none",":active":{color:"primary.pressed",textDecoration:"underline"},":hover":{color:"primary.hover",textDecoration:"underline"}},selectButton:M},re={borderWidth:"1px",borderStyle:"solid",borderRadius:"default"},oe={palette:{base:{bg:"background",color:"text.primary"},inverted:{bg:"text.primary",color:"background"},primary:{bg:"primary.base",color:"primary.accent"},secondary:{bg:"secondary.base",color:"secondary.accent"},danger:{bg:"danger.base",color:"danger.accent"},"danger-washed":{bg:"danger.washed.base",color:"danger.washed.accent"},success:{bg:"success.base",color:"success.accent"},"success-washed":{bg:"success.washed.base",color:"success.washed.accent"},warning:{bg:"warning.base",color:"warning.accent"},"warning-washed":{bg:"warning.washed.base",color:"warning.washed.accent"}},text:{small:{lineHeight:"small",fontVariationSettings:"regular",fontSize:0},body:{lineHeight:"body",fontVariationSettings:"regular",fontSize:1},highlight:{lineHeight:"highlight",fontVariationSettings:"regular",fontSize:1},action:{lineHeight:"action",fontVariationSettings:"regular",fontSize:1,textTransform:"uppercase"},subtitle:{lineHeight:"subtitle",fontVariationSettings:"regular",fontSize:2},headline:{lineHeight:"headline",fontVariationSettings:"regular",fontSize:4}},border:{default:n({},re,{borderColor:"muted.2"}),"divider-bottom":{borderBottomWidth:"1px",borderBottomStyle:"solid",borderBottomLeftRadius:0,borderBottomRightRadius:0,borderColor:"muted.2"},"divider-top":{borderTopWidth:"1px",borderTopStyle:"solid",borderTopLeftRadius:0,borderTopRightRadius:0,borderColor:"muted.2"},strong:n({},re,{borderColor:"text.primary"}),disabled:n({},re,{borderColor:"muted.1"}),primary:n({},re,{borderColor:"primary.base"}),danger:n({},re,{borderColor:"danger.base"})}},te=Object.keys(oe),ne=n({},l,{components:ee,patterns:oe});function ie(){var e=i(["\n @import 'https://io.vtex.com.br/fonts/vtex-trust/style.css';\n\n code > * > *,\n pre > * > *,\n code,\n pre {\n font-family: 'SF Mono', 'Operator Mono', 'Dank Mono',\n 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', Consolas, Monaco,\n monospace !important;\n }\n\n body {\n margin: 0;\n background-color: ",";\n color: ",";\n }\n\n html,\n body,\n * {\n font-family: VTEXTrustVF, -apple-system, system-ui, BlinkMacSystemFont,\n sans-serif !important;\n font-variation-settings: 'wght' 92;\n }\n\n *,\n ::before,\n ::after {\n box-sizing: border-box;\n border-width: 0;\n border-style: solid;\n }\n\n html,\n body,\n div,\n span,\n applet,\n object,\n iframe,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n blockquote,\n pre,\n a,\n abbr,\n acronym,\n address,\n big,\n cite,\n code,\n del,\n dfn,\n em,\n img,\n ins,\n kbd,\n q,\n s,\n samp,\n small,\n strike,\n strong,\n sub,\n sup,\n tt,\n var,\n b,\n u,\n i,\n center,\n dl,\n dt,\n dd,\n ol,\n ul,\n li,\n fieldset,\n form,\n label,\n legend,\n table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td,\n article,\n aside,\n canvas,\n details,\n embed,\n figure,\n figcaption,\n footer,\n header,\n hgroup,\n menu,\n nav,\n output,\n ruby,\n section,\n summary,\n time,\n mark,\n audio,\n video {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n\n /* HTML5 display-role reset for older browsers */\n article,\n aside,\n details,\n figcaption,\n figure,\n footer,\n header,\n hgroup,\n menu,\n nav,\n section {\n display: block;\n }\n\n body {\n line-height: 1;\n }\n\n blockquote,\n q {\n quotes: none;\n }\n\n blockquote:before,\n blockquote:after,\n q:before,\n q:after {\n content: '';\n content: none;\n }\n\n table {\n border-collapse: collapse;\n border-spacing: 0;\n }\n "]);return ie=function(){return e},e}exports.Preflight=function(){return t.createElement(o.Global,{styles:function(e){return o.css(ie(),o.get(e,"colors.background"),o.get(e,"colors.text"))}})},exports.patternKeys=te,exports.theme=ne; | ||
| //# sourceMappingURL=admin-ui-theme.cjs.production.min.js.map |
@@ -1,3 +0,3 @@ | ||
| import { darken, lighten, merge, keyframes, Global, css, get } from '@vtex/admin-ui-system'; | ||
| import { rgba } from 'polished'; | ||
| import { darken, rgba } from 'polished'; | ||
| import { alpha, merge, keyframes, Global, css, get } from '@vtex/admin-ui-system'; | ||
| import React from 'react'; | ||
@@ -32,45 +32,79 @@ | ||
| var colors = { | ||
| text: '#323845', | ||
| var elementaryColors = { | ||
| white: '#FFFFFF', | ||
| blue: '#DAE3F5', | ||
| purple: '#F4EFFF', | ||
| yellow: '#FDE6C0', | ||
| green: '#D6EFE5', | ||
| red: '#FEE3E3', | ||
| black: '#323845' | ||
| }; | ||
| var semanticColors = { | ||
| primary: '#2953B2', | ||
| secondary: '#DAE3F5', | ||
| danger: '#CB4242', | ||
| dangerWashed: '#FEDADA', | ||
| warning: '#FFBA52', | ||
| warningWashed: '#F6E0BA', | ||
| success: '#368369', | ||
| successWashed: '#CEE8DE' | ||
| }; | ||
| var colors = /*#__PURE__*/_extends({}, elementaryColors, { | ||
| text: { | ||
| primary: '#323845', | ||
| secondary: '#707685' | ||
| }, | ||
| background: '#FFFFFF', | ||
| muted: ['#707685', '#898F9E', '#C4C5CA', '#E0E2E7', '#F4F6FB'], | ||
| brand: '#F71963', | ||
| muted: ['#898F9E', '#C4C5CA', '#E0E2E7', '#F4F6FB'], | ||
| focus: '#8DB6FA', | ||
| emphasis: '#F71963', | ||
| primary: { | ||
| base: '#2953B2', | ||
| hover: '#1E4397', | ||
| active: '#3F6FDB', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#DAE3F5', '#E8F1FF', '#DBE9FF'] | ||
| base: semanticColors.primary, | ||
| hover: /*#__PURE__*/darken(0.08, semanticColors.primary), | ||
| pressed: /*#__PURE__*/darken(0.16, semanticColors.primary), | ||
| accent: '#FFFFFF' | ||
| }, | ||
| secondary: { | ||
| base: semanticColors.secondary, | ||
| hover: /*#__PURE__*/darken(0.04, semanticColors.secondary), | ||
| pressed: /*#__PURE__*/darken(0.08, semanticColors.secondary), | ||
| accent: semanticColors.primary | ||
| }, | ||
| danger: { | ||
| base: '#CE454F', | ||
| hover: '#A70C0C', | ||
| active: '#DE0404', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#FEE3E3', '#FFE3E3', '#FFD0D0'] | ||
| base: semanticColors.danger, | ||
| hover: /*#__PURE__*/darken(0.08, semanticColors.danger), | ||
| pressed: /*#__PURE__*/darken(0.16, semanticColors.danger), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.dangerWashed, | ||
| hover: /*#__PURE__*/darken(0.04, semanticColors.dangerWashed), | ||
| pressed: /*#__PURE__*/darken(0.08, semanticColors.dangerWashed), | ||
| accent: semanticColors.danger | ||
| } | ||
| }, | ||
| warning: { | ||
| base: '#FFBA52', | ||
| hover: '#E6A30A', | ||
| active: '#EFA906', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#FDE6C0'] | ||
| base: semanticColors.warning, | ||
| hover: /*#__PURE__*/darken(0.08, semanticColors.warning), | ||
| pressed: /*#__PURE__*/darken(0.16, semanticColors.warning), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.warningWashed, | ||
| hover: /*#__PURE__*/darken(0.04, semanticColors.warningWashed), | ||
| pressed: /*#__PURE__*/darken(0.08, semanticColors.warningWashed), | ||
| accent: semanticColors.warning | ||
| } | ||
| }, | ||
| success: { | ||
| base: '#368369', | ||
| hover: '#005C31', | ||
| active: '#26AE6E', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#D6EFE5'] | ||
| }, | ||
| basic: { | ||
| blue: '#DAE3F5', | ||
| purple: '#F4EFFF', | ||
| yellow: '#FDE6C0', | ||
| green: '#CCECE3', | ||
| red: '#FEE3E3', | ||
| black: '#323845' | ||
| base: semanticColors.success, | ||
| hover: /*#__PURE__*/darken(0.08, semanticColors.success), | ||
| pressed: /*#__PURE__*/darken(0.16, semanticColors.success), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.successWashed, | ||
| hover: /*#__PURE__*/darken(0.04, semanticColors.successWashed), | ||
| pressed: /*#__PURE__*/darken(0.08, semanticColors.successWashed), | ||
| accent: semanticColors.success | ||
| } | ||
| } | ||
| }; | ||
| }); | ||
@@ -294,7 +328,6 @@ var space = { | ||
| var variant = { | ||
| 'filled-primary': { | ||
| primary: { | ||
| textTransform: 'uppercase', | ||
| color: 'primary.contrast', | ||
| color: 'primary.accent', | ||
| backgroundColor: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
@@ -304,49 +337,44 @@ backgroundColor: 'primary.hover' | ||
| ':active': { | ||
| backgroundColor: 'primary.active' | ||
| backgroundColor: 'primary.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2' | ||
| color: 'text.primary', | ||
| backgroundColor: 'muted.1' | ||
| } | ||
| }, | ||
| 'subtle-primary': { | ||
| secondary: { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: 'primary.washed.0', | ||
| color: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| backgroundColor: 'secondary.base', | ||
| color: 'secondary.accent', | ||
| ':hover': { | ||
| backgroundColor: 'primary.washed.1', | ||
| color: 'primary.hover' | ||
| backgroundColor: 'secondary.hover' | ||
| }, | ||
| ':active': { | ||
| backgroundColor: 'primary.washed.2', | ||
| color: 'primary.active' | ||
| backgroundColor: 'secondary.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4' | ||
| color: 'muted.0', | ||
| backgroundColor: 'muted.3' | ||
| } | ||
| }, | ||
| 'text-primary': { | ||
| tertiary: { | ||
| textTransform: 'capitalize', | ||
| backgroundColor: 'transparent', | ||
| color: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| color: 'primary.hover', | ||
| backgroundColor: 'primary.washed.1' | ||
| backgroundColor: 'secondary.hover' | ||
| }, | ||
| ':active': { | ||
| color: 'primary.active', | ||
| backgroundColor: 'primary.washed.2' | ||
| color: 'primary.pressed', | ||
| backgroundColor: 'secondary.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1' | ||
| color: 'muted.0' | ||
| } | ||
| }, | ||
| 'filled-danger': { | ||
| danger: { | ||
| textTransform: 'uppercase', | ||
| color: 'danger.contrast', | ||
| color: 'danger.accent', | ||
| backgroundColor: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
@@ -356,94 +384,66 @@ backgroundColor: 'danger.hover' | ||
| ':active': { | ||
| backgroundColor: 'danger.active' | ||
| backgroundColor: 'danger.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2' | ||
| color: 'text.primary', | ||
| backgroundColor: 'muted.1' | ||
| } | ||
| }, | ||
| 'subtle-danger': { | ||
| 'danger-secondary': { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: 'danger.washed.0', | ||
| backgroundColor: 'danger.washed.base', | ||
| color: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| backgroundColor: 'danger.washed.1', | ||
| backgroundColor: 'danger.washed.hover', | ||
| color: 'danger.hover' | ||
| }, | ||
| ':active': { | ||
| backgroundColor: 'danger.washed.2', | ||
| color: 'danger.active' | ||
| backgroundColor: 'danger.washed.pressed', | ||
| color: 'danger.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4' | ||
| color: 'muted.0', | ||
| backgroundColor: 'muted.3' | ||
| } | ||
| }, | ||
| 'text-danger': { | ||
| 'danger-tertiary': { | ||
| textTransform: 'capitalize', | ||
| backgroundColor: 'transparent', | ||
| color: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| color: 'danger.washed.accent', | ||
| ':hover': { | ||
| color: 'danger.hover', | ||
| backgroundColor: 'danger.washed.1' | ||
| backgroundColor: 'danger.washed.hover' | ||
| }, | ||
| ':active': { | ||
| color: 'danger.active', | ||
| backgroundColor: 'danger.washed.2' | ||
| color: 'danger.pressed', | ||
| backgroundColor: 'danger.washed.pressed' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1' | ||
| color: 'muted.0' | ||
| } | ||
| }, | ||
| 'filled-base': { | ||
| textTransform: 'uppercase', | ||
| color: 'background', | ||
| backgroundColor: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| 'adaptative-dark': { | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| ':hover': { | ||
| color: 'background', | ||
| backgroundColor: /*#__PURE__*/darken('text', 0.05) | ||
| backgroundColor: /*#__PURE__*/alpha('text.primary', 0.04) | ||
| }, | ||
| ':active': { | ||
| color: 'background', | ||
| backgroundColor: /*#__PURE__*/lighten('text', 0.05) | ||
| backgroundColor: /*#__PURE__*/alpha('text.primary', 0.08) | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2' | ||
| color: 'muted.0' | ||
| } | ||
| }, | ||
| 'subtle-base': { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: /*#__PURE__*/lighten('text', 0.7), | ||
| color: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| backgroundColor: /*#__PURE__*/lighten('text', 0.68), | ||
| color: 'text' | ||
| }, | ||
| ':active': { | ||
| backgroundColor: /*#__PURE__*/lighten('text', 0.65), | ||
| color: 'text' | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4' | ||
| } | ||
| }, | ||
| 'text-base': { | ||
| 'adaptative-light': { | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| color: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| color: 'text', | ||
| backgroundColor: /*#__PURE__*/lighten('text', 0.72) | ||
| backgroundColor: /*#__PURE__*/alpha('background', 0.04) | ||
| }, | ||
| ':active': { | ||
| color: 'text', | ||
| backgroundColor: /*#__PURE__*/lighten('text', 0.68) | ||
| backgroundColor: /*#__PURE__*/alpha('background', 0.08) | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1' | ||
| color: 'muted.0' | ||
| } | ||
@@ -453,2 +453,3 @@ } | ||
| var styles = { | ||
| fontVariationSettings: "'wght' 92", | ||
| border: 'none', | ||
@@ -478,3 +479,3 @@ borderRadius: 'default', | ||
| borderWidth: 1, | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }; | ||
@@ -492,20 +493,3 @@ var divider = { | ||
| var buttonStyles = { | ||
| padding: 0, | ||
| border: 'none', | ||
| borderRadius: 3, | ||
| cursor: 'pointer', | ||
| position: 'relative', | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| ':focus:not([data-focus-visible-added])': { | ||
| outline: 'none', | ||
| boxShadow: 'none' | ||
| }, | ||
| ':focus': { | ||
| outline: 'none', | ||
| boxShadow: 'focus' | ||
| }, | ||
| marginLeft: '1' | ||
| }; | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| var styles$2 = { | ||
@@ -515,3 +499,3 @@ display: 'inline-flex', | ||
| borderRadius: '100px', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| border: 'none', | ||
@@ -524,19 +508,19 @@ '> svg:nth-of-type(1)': { | ||
| blue: { | ||
| bg: 'basic.blue' | ||
| bg: 'blue' | ||
| }, | ||
| green: { | ||
| bg: 'basic.green' | ||
| bg: 'green' | ||
| }, | ||
| red: { | ||
| bg: 'basic.red' | ||
| bg: 'red' | ||
| }, | ||
| black: { | ||
| bg: 'basic.black', | ||
| color: 'background' | ||
| bg: 'black', | ||
| color: 'white' | ||
| }, | ||
| yellow: { | ||
| bg: 'basic.yellow' | ||
| bg: 'yellow' | ||
| }, | ||
| purple: { | ||
| bg: 'basic.purple' | ||
| bg: 'purple' | ||
| } | ||
@@ -588,20 +572,3 @@ }; | ||
| }, [])); | ||
| }, {}), { | ||
| 'default-button': /*#__PURE__*/_extends({}, buttonStyles, { | ||
| '&:hover': { | ||
| backgroundColor: /*#__PURE__*/rgba(colors.text, 0.1) | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: /*#__PURE__*/rgba(colors.text, 0.13) | ||
| } | ||
| }), | ||
| 'black-button': /*#__PURE__*/_extends({}, buttonStyles, { | ||
| '&:hover': { | ||
| backgroundColor: /*#__PURE__*/rgba(colors.background, 0.1) | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: /*#__PURE__*/rgba(colors.background, 0.13) | ||
| } | ||
| }) | ||
| }); | ||
| }, {})); | ||
@@ -613,3 +580,3 @@ var anchor = { | ||
| ':active': { | ||
| color: 'primary.active', | ||
| color: 'primary.pressed', | ||
| textDecoration: 'underline' | ||
@@ -647,3 +614,3 @@ }, | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| display: 'table-cell', | ||
@@ -660,3 +627,3 @@ verticalAlign: 'middle', | ||
| paddingX: 2, | ||
| color: 'muted.0', | ||
| color: 'text.secondary', | ||
| fontWeight: 'normal', | ||
@@ -667,3 +634,3 @@ variant: 'text.body', | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3' | ||
| borderBottomColor: 'muted.2' | ||
| } | ||
@@ -747,3 +714,3 @@ }; | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| justifyContent: 'flex-start' | ||
@@ -794,3 +761,3 @@ }; | ||
| cursor: 'pointer', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| display: 'flex', | ||
@@ -838,3 +805,3 @@ alignItems: 'center' | ||
| borderWidth: '1px', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'transparent', | ||
@@ -860,4 +827,4 @@ borderRadius: 'circle', | ||
| ':active': { | ||
| borderColor: 'primary.active', | ||
| backgroundColor: 'primary.active' | ||
| borderColor: 'primary.pressed', | ||
| backgroundColor: 'primary.pressed' | ||
| } | ||
@@ -867,14 +834,14 @@ }, | ||
| cursor: 'not-allowed', | ||
| backgroundColor: 'muted.3', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.0', | ||
| ':after': { | ||
| backgroundColor: 'muted.1' | ||
| backgroundColor: 'muted.0' | ||
| } | ||
| }, | ||
| ':hover': { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }, | ||
| ':active': { | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'primary.washed.0' | ||
| borderColor: 'text.secondary', | ||
| backgroundColor: 'secondary.base' | ||
| }, | ||
@@ -917,3 +884,3 @@ ':focus:not([data-focus-visible-added])': { | ||
| borderWidth: 1, | ||
| borderColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| borderRadius: 3, | ||
@@ -938,8 +905,8 @@ cursor: 'pointer', | ||
| '&:active': { | ||
| backgroundColor: 'primary.active', | ||
| borderColor: 'primary.active' | ||
| backgroundColor: 'primary.pressed', | ||
| borderColor: 'primary.pressed' | ||
| } | ||
| }, | ||
| '&:indeterminate': { | ||
| backgroundColor: 'primary.washed.0', | ||
| backgroundColor: 'secondary.base', | ||
| borderColor: 'primary.base', | ||
@@ -960,5 +927,5 @@ color: 'primary.base', | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1' | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0' | ||
| }, | ||
@@ -968,20 +935,20 @@ '&:hover': { | ||
| color: 'primary.hover', | ||
| bg: 'primary.washed.1' | ||
| bg: 'secondary.hover' | ||
| }, | ||
| '&:active': { | ||
| borderColor: 'primary.active', | ||
| color: 'primary.active' | ||
| borderColor: 'primary.pressed', | ||
| color: 'primary.pressed' | ||
| } | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1' | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0' | ||
| }, | ||
| '&:hover': { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: 'primary.washed.0', | ||
| borderColor: 'muted.0' | ||
| backgroundColor: 'secondary.base', | ||
| borderColor: 'text.secondary' | ||
| }, | ||
@@ -1017,5 +984,5 @@ ':focus:not([data-focus-visible-added])': { | ||
| borderRadius: '6.25rem', | ||
| backgroundColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| borderWidth: 1, | ||
@@ -1027,3 +994,3 @@ '&:after': { | ||
| borderRadius: '1.25rem', | ||
| backgroundColor: 'success.contrast', | ||
| backgroundColor: 'success.accent', | ||
| transition: 'transform .25s ease' | ||
@@ -1039,6 +1006,6 @@ }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| '&:after': { | ||
| backgroundColor: 'muted.2' | ||
| backgroundColor: 'muted.1' | ||
| } | ||
@@ -1048,17 +1015,17 @@ } | ||
| '&:hover': { | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0' | ||
| backgroundColor: 'text.secondary', | ||
| borderColor: 'text.secondary' | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| '&:after': { | ||
| backgroundColor: 'muted.2' | ||
| backgroundColor: 'muted.1' | ||
| } | ||
| }, | ||
| ':not(:checked):active': { | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'text.secondary', | ||
| borderColor: 'text.secondary', | ||
| ':after': { | ||
| backgroundColor: 'primary.washed.0' | ||
| backgroundColor: 'secondary.base' | ||
| } | ||
@@ -1112,3 +1079,3 @@ }, | ||
| paddingRight: 4, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderRadius: 'default', | ||
@@ -1118,7 +1085,7 @@ bg: 'inherit', | ||
| fontSize: 1, | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| outline: 0, | ||
| transition: 'snap', | ||
| ':hover': { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }, | ||
@@ -1130,5 +1097,5 @@ ':focus': { | ||
| ':disabled': { | ||
| bg: 'muted.4', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1' | ||
| bg: 'muted.3', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0' | ||
| }, | ||
@@ -1151,3 +1118,3 @@ // Label styles | ||
| var clearButtonStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| marginY: '14px', | ||
@@ -1170,3 +1137,3 @@ marginRight: 1, | ||
| ':hover': { | ||
| color: 'text' | ||
| color: 'text.primary' | ||
| }, | ||
@@ -1183,3 +1150,3 @@ '> div': { | ||
| var iconStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| top: 1, | ||
@@ -1200,6 +1167,6 @@ left: 0, | ||
| var suffixStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| borderLeftStyle: 'solid', | ||
| borderLeftWidth: '1px', | ||
| borderLeftColor: 'muted.3', | ||
| borderLeftColor: 'muted.2', | ||
| paddingTop: '14px', | ||
@@ -1292,3 +1259,3 @@ marginTop: 'px', | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| boxShadow: 'menu', | ||
@@ -1317,3 +1284,3 @@ outline: 'none', | ||
| 'item-active': /*#__PURE__*/_extends({}, item, { | ||
| bg: 'primary.washed.0' | ||
| bg: 'secondary.base' | ||
| }) | ||
@@ -1323,3 +1290,3 @@ }; | ||
| var tooltip = { | ||
| backgroundColor: 'text', | ||
| backgroundColor: 'text.primary', | ||
| color: 'background', | ||
@@ -1344,3 +1311,3 @@ fontSize: 1, | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| boxShadow: 'menu', | ||
@@ -1354,3 +1321,3 @@ hr: { | ||
| borderRight: 'none', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| width: "calc(100% -" + space[3] + ")", | ||
@@ -1363,3 +1330,3 @@ marginX: "-" + space[3], | ||
| paddingX: 1, | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| fontSize: 1, | ||
@@ -1369,3 +1336,3 @@ border: 'none', | ||
| ':focus': { | ||
| bg: 'primary.washed.0', | ||
| bg: 'secondary.base', | ||
| outline: 'none', | ||
@@ -1375,3 +1342,3 @@ boxShadow: 'none' | ||
| ':hover': { | ||
| color: 'text' | ||
| color: 'text.primary' | ||
| }, | ||
@@ -1393,3 +1360,3 @@ width: 'full', | ||
| borderRadius: 3, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1414,3 +1381,3 @@ borderWidth: 1, | ||
| alignItems: 'center', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1441,3 +1408,3 @@ 'button + button': { | ||
| alignItems: 'center', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1475,3 +1442,3 @@ borderBottomWidth: 0, | ||
| '::-webkit-scrollbar-thumb': { | ||
| backgroundColor: 'muted.3', | ||
| backgroundColor: 'muted.2', | ||
| borderRadius: '6px', | ||
@@ -1493,3 +1460,3 @@ border: '2px solid', | ||
| alignItems: 'center', | ||
| backgroundColor: /*#__PURE__*/rgba(colors.text, 0.5), | ||
| backgroundColor: /*#__PURE__*/rgba(colors.text.primary, 0.5), | ||
| position: 'fixed', | ||
@@ -1573,3 +1540,3 @@ top: 0, | ||
| height: 'full', | ||
| backgroundColor: 'muted.4', | ||
| backgroundColor: 'muted.3', | ||
| backgroundSize: "200px 100%", | ||
@@ -1579,3 +1546,3 @@ backgroundRepeat: 'no-repeat', | ||
| borderRadius: 3, | ||
| backgroundImage: "linear-gradient(\n 90deg,\n " + colors.muted[4] + ",\n white,\n " + colors.muted[4] + "\n )", | ||
| backgroundImage: "linear-gradient(\n 90deg,\n " + colors.muted[3] + ",\n white,\n " + colors.muted[3] + "\n )", | ||
| animation: load + " 1.2s ease-in-out infinite" | ||
@@ -1595,3 +1562,3 @@ }; | ||
| bg: 'background', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -1629,3 +1596,3 @@ borderWidth: 1, | ||
| base: /*#__PURE__*/_extends({}, styles$9, { | ||
| bg: 'text', | ||
| bg: 'text.primary', | ||
| color: 'background' | ||
@@ -1635,7 +1602,7 @@ }), | ||
| bg: 'primary.base', | ||
| color: 'primary.contrast' | ||
| color: 'primary.accent' | ||
| }), | ||
| danger: /*#__PURE__*/_extends({}, styles$9, { | ||
| bg: 'danger.base', | ||
| color: 'danger.contrast' | ||
| color: 'danger.accent' | ||
| }) | ||
@@ -1674,3 +1641,3 @@ }; | ||
| "default": /*#__PURE__*/_extends({}, borderStyles, { | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }), | ||
@@ -1682,3 +1649,3 @@ 'divider-bottom': { | ||
| borderBottomRightRadius: 0, | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }, | ||
@@ -1690,9 +1657,9 @@ 'divider-top': { | ||
| borderTopRightRadius: 0, | ||
| borderColor: 'muted.3' | ||
| borderColor: 'muted.2' | ||
| }, | ||
| strong: /*#__PURE__*/_extends({}, borderStyles, { | ||
| borderColor: 'text' | ||
| borderColor: 'text.primary' | ||
| }), | ||
| disabled: /*#__PURE__*/_extends({}, borderStyles, { | ||
| borderColor: 'muted.2' | ||
| borderColor: 'muted.1' | ||
| }), | ||
@@ -1710,6 +1677,6 @@ primary: /*#__PURE__*/_extends({}, borderStyles, { | ||
| bg: 'background', | ||
| color: 'text' | ||
| color: 'text.primary' | ||
| }, | ||
| inverted: { | ||
| bg: 'text', | ||
| bg: 'text.primary', | ||
| color: 'background' | ||
@@ -1719,31 +1686,31 @@ }, | ||
| bg: 'primary.base', | ||
| color: 'primary.contrast' | ||
| color: 'primary.accent' | ||
| }, | ||
| 'primary-washed': { | ||
| bg: 'primary.washed.0', | ||
| color: 'primary.base' | ||
| secondary: { | ||
| bg: 'secondary.base', | ||
| color: 'secondary.accent' | ||
| }, | ||
| danger: { | ||
| bg: 'danger.base', | ||
| color: 'danger.contrast' | ||
| color: 'danger.accent' | ||
| }, | ||
| 'danger-washed': { | ||
| bg: 'danger.washed.0', | ||
| color: 'danger.base' | ||
| bg: 'danger.washed.base', | ||
| color: 'danger.washed.accent' | ||
| }, | ||
| success: { | ||
| bg: 'success.base', | ||
| color: 'success.contrast' | ||
| color: 'success.accent' | ||
| }, | ||
| 'success-washed': { | ||
| bg: 'success.washed.0', | ||
| color: 'success.base' | ||
| bg: 'success.washed.base', | ||
| color: 'success.washed.accent' | ||
| }, | ||
| warning: { | ||
| bg: 'warning.base', | ||
| color: 'warning.contrast' | ||
| color: 'warning.accent' | ||
| }, | ||
| 'warning-washed': { | ||
| bg: 'warning.washed.0', | ||
| color: 'warning.base' | ||
| bg: 'warning.washed.base', | ||
| color: 'warning.washed.accent' | ||
| } | ||
@@ -1750,0 +1717,0 @@ }; |
| declare const _default: { | ||
| text: string; | ||
| text: { | ||
| primary: string; | ||
| secondary: string; | ||
| }; | ||
| background: string; | ||
| brand: string; | ||
| muted: string[]; | ||
| focus: string; | ||
| emphasis: string; | ||
| primary: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| secondary: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| danger: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
@@ -24,5 +37,10 @@ warning: { | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
@@ -32,15 +50,19 @@ success: { | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
| basic: { | ||
| blue: string; | ||
| purple: string; | ||
| yellow: string; | ||
| green: string; | ||
| red: string; | ||
| black: string; | ||
| }; | ||
| white: string; | ||
| blue: string; | ||
| purple: string; | ||
| yellow: string; | ||
| green: string; | ||
| red: string; | ||
| black: string; | ||
| }; | ||
| export default _default; |
@@ -38,34 +38,57 @@ import colors from './colors'; | ||
| colors: { | ||
| text: string; | ||
| text: { | ||
| primary: string; | ||
| secondary: string; | ||
| }; | ||
| background: string; | ||
| brand: string; | ||
| muted: string[]; | ||
| focus: string; | ||
| emphasis: string; | ||
| primary: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| }; | ||
| secondary: { | ||
| base: string; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| }; | ||
| danger: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
| warning: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
| success: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| pressed: (t: import("@vtex/admin-ui-system").Theme) => string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
@@ -72,0 +95,0 @@ basic: { |
@@ -1,51 +0,2 @@ | ||
| declare const _default: { | ||
| 'default-button': { | ||
| '&:hover': { | ||
| backgroundColor: string; | ||
| }; | ||
| '&:active': { | ||
| backgroundColor: string; | ||
| }; | ||
| padding: number; | ||
| border: string; | ||
| borderRadius: number; | ||
| cursor: string; | ||
| position: string; | ||
| color: string; | ||
| backgroundColor: string; | ||
| ':focus:not([data-focus-visible-added])': { | ||
| outline: string; | ||
| boxShadow: string; | ||
| }; | ||
| ':focus': { | ||
| outline: string; | ||
| boxShadow: string; | ||
| }; | ||
| marginLeft: string; | ||
| }; | ||
| 'black-button': { | ||
| '&:hover': { | ||
| backgroundColor: string; | ||
| }; | ||
| '&:active': { | ||
| backgroundColor: string; | ||
| }; | ||
| padding: number; | ||
| border: string; | ||
| borderRadius: number; | ||
| cursor: string; | ||
| position: string; | ||
| color: string; | ||
| backgroundColor: string; | ||
| ':focus:not([data-focus-visible-added])': { | ||
| outline: string; | ||
| boxShadow: string; | ||
| }; | ||
| ':focus': { | ||
| outline: string; | ||
| boxShadow: string; | ||
| }; | ||
| marginLeft: string; | ||
| }; | ||
| }; | ||
| declare const _default: {}; | ||
| export default _default; |
@@ -1589,20 +1589,33 @@ export * from './patterns'; | ||
| colors: { | ||
| text: string; | ||
| text: { | ||
| primary: string; | ||
| secondary: string; | ||
| }; | ||
| background: string; | ||
| brand: string; | ||
| muted: string[]; | ||
| focus: string; | ||
| emphasis: string; | ||
| primary: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| secondary: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| danger: { | ||
| base: string; | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
@@ -1612,5 +1625,10 @@ warning: { | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
@@ -1620,5 +1638,10 @@ success: { | ||
| hover: string; | ||
| active: string; | ||
| contrast: string; | ||
| washed: string[]; | ||
| pressed: string; | ||
| accent: string; | ||
| washed: { | ||
| base: string; | ||
| hover: string; | ||
| pressed: string; | ||
| accent: string; | ||
| }; | ||
| }; | ||
@@ -1721,2 +1744,2 @@ basic: { | ||
| export declare type Sizes = keyof typeof theme.sizes; | ||
| export declare type ThemeColors = 'text' | 'background' | 'muted.0' | 'muted.1' | 'muted.2' | 'muted.3' | 'muted.4' | 'emphasis' | 'focus' | 'primary.base' | 'primary.hover' | 'primary.active' | 'primary.contrast' | 'primary.washed.0' | 'primary.washed.1' | 'primary.washed.2' | 'danger.base' | 'danger.hover' | 'danger.active' | 'danger.contrast' | 'danger.washed.0' | 'danger.washed.1' | 'danger.washed.2' | 'success.base' | 'success.hover' | 'success.active' | 'success.contrast' | 'success.washed.0' | 'warning.base'; | ||
| export declare type ThemeColors = 'text.primary' | 'background' | 'text.secondary' | 'muted.0' | 'muted.1' | 'muted.2' | 'muted.3' | 'brand' | 'focus' | 'primary.base' | 'primary.hover' | 'primary.pressed' | 'primary.accent' | 'secondary.base' | 'secondary.hover' | 'secondary.pressed' | 'danger.base' | 'danger.hover' | 'danger.pressed' | 'danger.accent' | 'danger.washed.base' | 'danger.washed.hover' | 'danger.washed.pressed' | 'success.base' | 'success.hover' | 'success.pressed' | 'success.accent' | 'success.washed.base' | 'warning.base'; |
@@ -14,3 +14,3 @@ declare const palette: { | ||
| }; | ||
| 'primary-washed': { | ||
| secondary: { | ||
| bg: string; | ||
@@ -17,0 +17,0 @@ color: string; |
| { | ||
| "name": "@vtex/admin-ui-theme", | ||
| "version": "0.1.2", | ||
| "version": "0.2.0", | ||
| "main": "dist/index.js", | ||
@@ -41,3 +41,3 @@ "module": "dist/admin-ui-theme.esm.js", | ||
| }, | ||
| "gitHead": "8a4cac1e439c9d3904c094b80f8006da40ce0507" | ||
| "gitHead": "f05b704b929d6fb994d04d988a5fd6e0d072f599" | ||
| } |
@@ -0,43 +1,82 @@ | ||
| import { darken } from 'polished' | ||
| const elementaryColors = { | ||
| white: '#FFFFFF', | ||
| blue: '#DAE3F5', | ||
| purple: '#F4EFFF', | ||
| yellow: '#FDE6C0', | ||
| green: '#D6EFE5', | ||
| red: '#FEE3E3', | ||
| black: '#323845', | ||
| } | ||
| const semanticColors = { | ||
| primary: '#2953B2', | ||
| secondary: '#DAE3F5', | ||
| danger: '#CB4242', | ||
| dangerWashed: '#FEDADA', | ||
| warning: '#FFBA52', | ||
| warningWashed: '#F6E0BA', | ||
| success: '#368369', | ||
| successWashed: '#CEE8DE', | ||
| } | ||
| export default { | ||
| text: '#323845', | ||
| ...elementaryColors, | ||
| text: { | ||
| primary: '#323845', | ||
| secondary: '#707685', | ||
| }, | ||
| background: '#FFFFFF', | ||
| muted: ['#707685', '#898F9E', '#C4C5CA', '#E0E2E7', '#F4F6FB'], | ||
| brand: '#F71963', | ||
| muted: ['#898F9E', '#C4C5CA', '#E0E2E7', '#F4F6FB'], | ||
| focus: '#8DB6FA', | ||
| emphasis: '#F71963', | ||
| primary: { | ||
| base: '#2953B2', | ||
| hover: '#1E4397', | ||
| active: '#3F6FDB', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#DAE3F5', '#E8F1FF', '#DBE9FF'], | ||
| base: semanticColors.primary, | ||
| hover: darken(0.08, semanticColors.primary), | ||
| pressed: darken(0.16, semanticColors.primary), | ||
| accent: '#FFFFFF', | ||
| }, | ||
| secondary: { | ||
| base: semanticColors.secondary, | ||
| hover: darken(0.04, semanticColors.secondary), | ||
| pressed: darken(0.08, semanticColors.secondary), | ||
| accent: semanticColors.primary, | ||
| }, | ||
| danger: { | ||
| base: '#CE454F', | ||
| hover: '#A70C0C', | ||
| active: '#DE0404', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#FEE3E3', '#FFE3E3', '#FFD0D0'], | ||
| base: semanticColors.danger, | ||
| hover: darken(0.08, semanticColors.danger), | ||
| pressed: darken(0.16, semanticColors.danger), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.dangerWashed, | ||
| hover: darken(0.04, semanticColors.dangerWashed), | ||
| pressed: darken(0.08, semanticColors.dangerWashed), | ||
| accent: semanticColors.danger, | ||
| }, | ||
| }, | ||
| warning: { | ||
| base: '#FFBA52', | ||
| hover: '#E6A30A', | ||
| active: '#EFA906', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#FDE6C0'], | ||
| base: semanticColors.warning, | ||
| hover: darken(0.08, semanticColors.warning), | ||
| pressed: darken(0.16, semanticColors.warning), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.warningWashed, | ||
| hover: darken(0.04, semanticColors.warningWashed), | ||
| pressed: darken(0.08, semanticColors.warningWashed), | ||
| accent: semanticColors.warning, | ||
| }, | ||
| }, | ||
| success: { | ||
| base: '#368369', | ||
| hover: '#005C31', | ||
| active: '#26AE6E', | ||
| contrast: '#FFFFFF', | ||
| washed: ['#D6EFE5'], | ||
| base: semanticColors.success, | ||
| hover: darken(0.08, semanticColors.success), | ||
| pressed: darken(0.16, semanticColors.success), | ||
| accent: '#FFFFFF', | ||
| washed: { | ||
| base: semanticColors.successWashed, | ||
| hover: darken(0.04, semanticColors.successWashed), | ||
| pressed: darken(0.08, semanticColors.successWashed), | ||
| accent: semanticColors.success, | ||
| }, | ||
| }, | ||
| basic: { | ||
| blue: '#DAE3F5', | ||
| purple: '#F4EFFF', | ||
| yellow: '#FDE6C0', | ||
| green: '#CCECE3', | ||
| red: '#FEE3E3', | ||
| black: '#323845', | ||
| }, | ||
| } |
@@ -6,3 +6,3 @@ export default { | ||
| ':active': { | ||
| color: 'primary.active', | ||
| color: 'primary.pressed', | ||
| textDecoration: 'underline', | ||
@@ -9,0 +9,0 @@ }, |
@@ -15,3 +15,3 @@ const styles = { | ||
| ...styles, | ||
| bg: 'text', | ||
| bg: 'text.primary', | ||
| color: 'background', | ||
@@ -22,3 +22,3 @@ }, | ||
| bg: 'primary.base', | ||
| color: 'primary.contrast', | ||
| color: 'primary.accent', | ||
| }, | ||
@@ -28,4 +28,4 @@ danger: { | ||
| bg: 'danger.base', | ||
| color: 'danger.contrast', | ||
| color: 'danger.accent', | ||
| }, | ||
| } |
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| import { darken, lighten } from '@vtex/admin-ui-system' | ||
| import { alpha } from '@vtex/admin-ui-system' | ||
@@ -106,7 +106,6 @@ const size = { | ||
| const variant = { | ||
| 'filled-primary': { | ||
| primary: { | ||
| textTransform: 'uppercase', | ||
| color: 'primary.contrast', | ||
| color: 'primary.accent', | ||
| backgroundColor: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
@@ -116,49 +115,44 @@ backgroundColor: 'primary.hover', | ||
| ':active': { | ||
| backgroundColor: 'primary.active', | ||
| backgroundColor: 'primary.pressed', | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2', | ||
| color: 'text.primary', | ||
| backgroundColor: 'muted.1', | ||
| }, | ||
| }, | ||
| 'subtle-primary': { | ||
| secondary: { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: 'primary.washed.0', | ||
| color: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| backgroundColor: 'secondary.base', | ||
| color: 'secondary.accent', | ||
| ':hover': { | ||
| backgroundColor: 'primary.washed.1', | ||
| color: 'primary.hover', | ||
| backgroundColor: 'secondary.hover', | ||
| }, | ||
| ':active': { | ||
| backgroundColor: 'primary.washed.2', | ||
| color: 'primary.active', | ||
| backgroundColor: 'secondary.pressed', | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4', | ||
| color: 'muted.0', | ||
| backgroundColor: 'muted.3', | ||
| }, | ||
| }, | ||
| 'text-primary': { | ||
| tertiary: { | ||
| textTransform: 'capitalize', | ||
| backgroundColor: 'transparent', | ||
| color: 'primary.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| color: 'primary.hover', | ||
| backgroundColor: 'primary.washed.1', | ||
| backgroundColor: 'secondary.hover', | ||
| }, | ||
| ':active': { | ||
| color: 'primary.active', | ||
| backgroundColor: 'primary.washed.2', | ||
| color: 'primary.pressed', | ||
| backgroundColor: 'secondary.pressed', | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| }, | ||
| }, | ||
| 'filled-danger': { | ||
| danger: { | ||
| textTransform: 'uppercase', | ||
| color: 'danger.contrast', | ||
| color: 'danger.accent', | ||
| backgroundColor: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
@@ -168,94 +162,66 @@ backgroundColor: 'danger.hover', | ||
| ':active': { | ||
| backgroundColor: 'danger.active', | ||
| backgroundColor: 'danger.pressed', | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2', | ||
| color: 'text.primary', | ||
| backgroundColor: 'muted.1', | ||
| }, | ||
| }, | ||
| 'subtle-danger': { | ||
| 'danger-secondary': { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: 'danger.washed.0', | ||
| backgroundColor: 'danger.washed.base', | ||
| color: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| backgroundColor: 'danger.washed.1', | ||
| backgroundColor: 'danger.washed.hover', | ||
| color: 'danger.hover', | ||
| }, | ||
| ':active': { | ||
| backgroundColor: 'danger.washed.2', | ||
| color: 'danger.active', | ||
| backgroundColor: 'danger.washed.pressed', | ||
| color: 'danger.pressed', | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4', | ||
| color: 'muted.0', | ||
| backgroundColor: 'muted.3', | ||
| }, | ||
| }, | ||
| 'text-danger': { | ||
| 'danger-tertiary': { | ||
| textTransform: 'capitalize', | ||
| backgroundColor: 'transparent', | ||
| color: 'danger.base', | ||
| fontVariationSettings: "'wght' 92", | ||
| color: 'danger.washed.accent', | ||
| ':hover': { | ||
| color: 'danger.hover', | ||
| backgroundColor: 'danger.washed.1', | ||
| backgroundColor: 'danger.washed.hover', | ||
| }, | ||
| ':active': { | ||
| color: 'danger.active', | ||
| backgroundColor: 'danger.washed.2', | ||
| color: 'danger.pressed', | ||
| backgroundColor: 'danger.washed.pressed', | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| }, | ||
| }, | ||
| 'filled-base': { | ||
| textTransform: 'uppercase', | ||
| color: 'background', | ||
| backgroundColor: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| 'adaptative-dark': { | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| ':hover': { | ||
| color: 'background', | ||
| backgroundColor: darken('text', 0.05), | ||
| backgroundColor: alpha('text.primary', 0.04), | ||
| }, | ||
| ':active': { | ||
| color: 'background', | ||
| backgroundColor: lighten('text', 0.05), | ||
| backgroundColor: alpha('text.primary', 0.08), | ||
| }, | ||
| ':disabled': { | ||
| color: 'text', | ||
| backgroundColor: 'muted.2', | ||
| color: 'muted.0', | ||
| }, | ||
| }, | ||
| 'subtle-base': { | ||
| textTransform: 'uppercase', | ||
| backgroundColor: lighten('text', 0.7), | ||
| color: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| backgroundColor: lighten('text', 0.68), | ||
| color: 'text', | ||
| }, | ||
| ':active': { | ||
| backgroundColor: lighten('text', 0.65), | ||
| color: 'text', | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.4', | ||
| }, | ||
| }, | ||
| 'text-base': { | ||
| 'adaptative-light': { | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| color: 'text', | ||
| fontVariationSettings: "'wght' 92", | ||
| ':hover': { | ||
| color: 'text', | ||
| backgroundColor: lighten('text', 0.72), | ||
| backgroundColor: alpha('background', 0.04), | ||
| }, | ||
| ':active': { | ||
| color: 'text', | ||
| backgroundColor: lighten('text', 0.68), | ||
| backgroundColor: alpha('background', 0.08), | ||
| }, | ||
| ':disabled': { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| }, | ||
@@ -266,2 +232,3 @@ }, | ||
| const styles = { | ||
| fontVariationSettings: "'wght' 92", | ||
| border: 'none', | ||
@@ -268,0 +235,0 @@ borderRadius: 'default', |
@@ -5,3 +5,3 @@ const styles = { | ||
| borderWidth: 1, | ||
| borderColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| borderRadius: 3, | ||
@@ -26,8 +26,8 @@ cursor: 'pointer', | ||
| '&:active': { | ||
| backgroundColor: 'primary.active', | ||
| borderColor: 'primary.active', | ||
| backgroundColor: 'primary.pressed', | ||
| borderColor: 'primary.pressed', | ||
| }, | ||
| }, | ||
| '&:indeterminate': { | ||
| backgroundColor: 'primary.washed.0', | ||
| backgroundColor: 'secondary.base', | ||
| borderColor: 'primary.base', | ||
@@ -48,5 +48,5 @@ color: 'primary.base', | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0', | ||
| }, | ||
@@ -56,20 +56,20 @@ '&:hover': { | ||
| color: 'primary.hover', | ||
| bg: 'primary.washed.1', | ||
| bg: 'secondary.hover', | ||
| }, | ||
| '&:active': { | ||
| borderColor: 'primary.active', | ||
| color: 'primary.active', | ||
| borderColor: 'primary.pressed', | ||
| color: 'primary.pressed', | ||
| }, | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1', | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0', | ||
| }, | ||
| '&:hover': { | ||
| borderColor: 'text', | ||
| borderColor: 'text.primary', | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: 'primary.washed.0', | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'secondary.base', | ||
| borderColor: 'text.secondary', | ||
| }, | ||
@@ -76,0 +76,0 @@ ':focus:not([data-focus-visible-added])': { |
| export default { | ||
| container: { | ||
| bg: 'background', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -6,0 +6,0 @@ borderWidth: 1, |
@@ -14,3 +14,3 @@ const styles = { | ||
| cursor: 'pointer', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| display: 'flex', | ||
@@ -17,0 +17,0 @@ alignItems: 'center', |
| const styles = { | ||
| border: 'solid', | ||
| borderWidth: 1, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| } | ||
@@ -6,0 +6,0 @@ |
@@ -11,3 +11,3 @@ import { colors } from '../base' | ||
| paddingRight: 4, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderRadius: 'default', | ||
@@ -17,7 +17,7 @@ bg: 'inherit', | ||
| fontSize: 1, | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| outline: 0, | ||
| transition: 'snap', | ||
| ':hover': { | ||
| borderColor: 'text', | ||
| borderColor: 'text.primary', | ||
| }, | ||
@@ -29,5 +29,5 @@ ':focus': { | ||
| ':disabled': { | ||
| bg: 'muted.4', | ||
| borderColor: 'muted.1', | ||
| color: 'muted.1', | ||
| bg: 'muted.3', | ||
| borderColor: 'muted.0', | ||
| color: 'muted.0', | ||
| }, | ||
@@ -51,3 +51,3 @@ // Label styles | ||
| const clearButtonStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| marginY: '14px', | ||
@@ -70,3 +70,3 @@ marginRight: 1, | ||
| ':hover': { | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| }, | ||
@@ -84,3 +84,3 @@ '> div': { | ||
| const iconStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| top: 1, | ||
@@ -102,6 +102,6 @@ left: 0, | ||
| const suffixStyle = { | ||
| color: 'muted.1', | ||
| color: 'muted.0', | ||
| borderLeftStyle: 'solid', | ||
| borderLeftWidth: '1px', | ||
| borderLeftColor: 'muted.3', | ||
| borderLeftColor: 'muted.2', | ||
| paddingTop: '14px', | ||
@@ -108,0 +108,0 @@ marginTop: 'px', |
@@ -7,3 +7,3 @@ const itemStyles = { | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| justifyContent: 'flex-start', | ||
@@ -10,0 +10,0 @@ } |
@@ -13,3 +13,3 @@ import { space } from '../base' | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| boxShadow: 'menu', | ||
@@ -23,3 +23,3 @@ hr: { | ||
| borderRight: 'none', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| width: `calc(100% -${space[3]})`, | ||
@@ -32,3 +32,3 @@ marginX: `-${space[3]}`, | ||
| paddingX: 1, | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| fontSize: 1, | ||
@@ -38,3 +38,3 @@ border: 'none', | ||
| ':focus': { | ||
| bg: 'primary.washed.0', | ||
| bg: 'secondary.base', | ||
| outline: 'none', | ||
@@ -44,3 +44,3 @@ boxShadow: 'none', | ||
| ':hover': { | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| }, | ||
@@ -47,0 +47,0 @@ width: 'full', |
@@ -9,3 +9,3 @@ import { rgba } from 'polished' | ||
| borderRadius: 3, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -31,3 +31,3 @@ borderWidth: 1, | ||
| alignItems: 'center', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -59,3 +59,3 @@ 'button + button': { | ||
| alignItems: 'center', | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| borderStyle: 'solid', | ||
@@ -95,3 +95,3 @@ borderBottomWidth: 0, | ||
| '::-webkit-scrollbar-thumb': { | ||
| backgroundColor: 'muted.3', | ||
| backgroundColor: 'muted.2', | ||
| borderRadius: '6px', | ||
@@ -115,3 +115,3 @@ border: '2px solid', | ||
| alignItems: 'center', | ||
| backgroundColor: rgba(colors.text, 0.5), | ||
| backgroundColor: rgba(colors.text.primary, 0.5), | ||
| position: 'fixed', | ||
@@ -118,0 +118,0 @@ top: 0, |
@@ -10,3 +10,3 @@ import { merge } from '@vtex/admin-ui-system' | ||
| borderWidth: '1px', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'transparent', | ||
@@ -32,4 +32,4 @@ borderRadius: 'circle', | ||
| ':active': { | ||
| borderColor: 'primary.active', | ||
| backgroundColor: 'primary.active', | ||
| borderColor: 'primary.pressed', | ||
| backgroundColor: 'primary.pressed', | ||
| }, | ||
@@ -39,14 +39,14 @@ }, | ||
| cursor: 'not-allowed', | ||
| backgroundColor: 'muted.3', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.2', | ||
| borderColor: 'muted.0', | ||
| ':after': { | ||
| backgroundColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| }, | ||
| }, | ||
| ':hover': { | ||
| borderColor: 'text', | ||
| borderColor: 'text.primary', | ||
| }, | ||
| ':active': { | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'primary.washed.0', | ||
| borderColor: 'text.secondary', | ||
| backgroundColor: 'secondary.base', | ||
| }, | ||
@@ -53,0 +53,0 @@ ':focus:not([data-focus-visible-added])': { |
@@ -8,3 +8,3 @@ const menu = { | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| boxShadow: 'menu', | ||
@@ -37,4 +37,4 @@ outline: 'none', | ||
| ...item, | ||
| bg: 'primary.washed.0', | ||
| bg: 'secondary.base', | ||
| }, | ||
| } |
@@ -18,3 +18,3 @@ import { keyframes } from '@vtex/admin-ui-system' | ||
| height: 'full', | ||
| backgroundColor: 'muted.4', | ||
| backgroundColor: 'muted.3', | ||
| backgroundSize: `200px 100%`, | ||
@@ -26,5 +26,5 @@ backgroundRepeat: 'no-repeat', | ||
| 90deg, | ||
| ${colors.muted[4]}, | ||
| ${colors.muted[3]}, | ||
| white, | ||
| ${colors.muted[4]} | ||
| ${colors.muted[3]} | ||
| )`, | ||
@@ -31,0 +31,0 @@ animation: `${load} 1.2s ease-in-out infinite`, |
@@ -27,3 +27,3 @@ import { merge } from '@vtex/admin-ui-system' | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| display: 'table-cell', | ||
@@ -40,3 +40,3 @@ verticalAlign: 'middle', | ||
| paddingX: 2, | ||
| color: 'muted.0', | ||
| color: 'text.secondary', | ||
| fontWeight: 'normal', | ||
@@ -47,3 +47,3 @@ variant: 'text.body', | ||
| borderBottomStyle: 'solid', | ||
| borderBottomColor: 'muted.3', | ||
| borderBottomColor: 'muted.2', | ||
| }, | ||
@@ -50,0 +50,0 @@ } |
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| import { rgba } from 'polished' | ||
| import { colors } from '../base' | ||
| const buttonStyles = { | ||
| padding: 0, | ||
| border: 'none', | ||
| borderRadius: 3, | ||
| cursor: 'pointer', | ||
| position: 'relative', | ||
| color: 'currentColor', | ||
| backgroundColor: 'transparent', | ||
| ':focus:not([data-focus-visible-added])': { | ||
| outline: 'none', | ||
| boxShadow: 'none', | ||
| }, | ||
| ':focus': { | ||
| outline: 'none', | ||
| boxShadow: 'focus', | ||
| }, | ||
| marginLeft: '1', | ||
| } | ||
| const styles = { | ||
@@ -29,3 +7,3 @@ display: 'inline-flex', | ||
| borderRadius: '100px', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| border: 'none', | ||
@@ -39,19 +17,19 @@ '> svg:nth-of-type(1)': { | ||
| blue: { | ||
| bg: 'basic.blue', | ||
| bg: 'blue', | ||
| }, | ||
| green: { | ||
| bg: 'basic.green', | ||
| bg: 'green', | ||
| }, | ||
| red: { | ||
| bg: 'basic.red', | ||
| bg: 'red', | ||
| }, | ||
| black: { | ||
| bg: 'basic.black', | ||
| color: 'background', | ||
| bg: 'black', | ||
| color: 'white', | ||
| }, | ||
| yellow: { | ||
| bg: 'basic.yellow', | ||
| bg: 'yellow', | ||
| }, | ||
| purple: { | ||
| bg: 'basic.purple', | ||
| bg: 'purple', | ||
| }, | ||
@@ -115,20 +93,2 @@ } | ||
| }, {}), | ||
| 'default-button': { | ||
| ...buttonStyles, | ||
| '&:hover': { | ||
| backgroundColor: rgba(colors.text, 0.1), | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: rgba(colors.text, 0.13), | ||
| }, | ||
| }, | ||
| 'black-button': { | ||
| ...buttonStyles, | ||
| '&:hover': { | ||
| backgroundColor: rgba(colors.background, 0.1), | ||
| }, | ||
| '&:active': { | ||
| backgroundColor: rgba(colors.background, 0.13), | ||
| }, | ||
| }, | ||
| } |
@@ -8,5 +8,5 @@ import { merge } from '@vtex/admin-ui-system' | ||
| borderRadius: '6.25rem', | ||
| backgroundColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderStyle: 'solid', | ||
| borderColor: 'muted.1', | ||
| borderColor: 'muted.0', | ||
| borderWidth: 1, | ||
@@ -18,3 +18,3 @@ '&:after': { | ||
| borderRadius: '1.25rem', | ||
| backgroundColor: 'success.contrast', | ||
| backgroundColor: 'success.accent', | ||
| transition: 'transform .25s ease', | ||
@@ -30,6 +30,6 @@ }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.1', | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| '&:after': { | ||
| backgroundColor: 'muted.2', | ||
| backgroundColor: 'muted.1', | ||
| }, | ||
@@ -39,17 +39,17 @@ }, | ||
| '&:hover': { | ||
| backgroundColor: 'text.secondary', | ||
| borderColor: 'text.secondary', | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| }, | ||
| '&:disabled': { | ||
| backgroundColor: 'muted.1', | ||
| borderColor: 'muted.1', | ||
| '&:after': { | ||
| backgroundColor: 'muted.2', | ||
| backgroundColor: 'muted.1', | ||
| }, | ||
| }, | ||
| ':not(:checked):active': { | ||
| backgroundColor: 'muted.0', | ||
| borderColor: 'muted.0', | ||
| backgroundColor: 'text.secondary', | ||
| borderColor: 'text.secondary', | ||
| ':after': { | ||
| backgroundColor: 'primary.washed.0', | ||
| backgroundColor: 'secondary.base', | ||
| }, | ||
@@ -56,0 +56,0 @@ }, |
| export default { | ||
| backgroundColor: 'text', | ||
| backgroundColor: 'text.primary', | ||
| color: 'background', | ||
@@ -4,0 +4,0 @@ fontSize: 1, |
@@ -43,4 +43,5 @@ import base from './base' | ||
| export type ThemeColors = | ||
| | 'text' | ||
| | 'text.primary' | ||
| | 'background' | ||
| | 'text.secondary' | ||
| | 'muted.0' | ||
@@ -50,24 +51,23 @@ | 'muted.1' | ||
| | 'muted.3' | ||
| | 'muted.4' | ||
| | 'emphasis' | ||
| | 'brand' | ||
| | 'focus' | ||
| | 'primary.base' | ||
| | 'primary.hover' | ||
| | 'primary.active' | ||
| | 'primary.contrast' | ||
| | 'primary.washed.0' | ||
| | 'primary.washed.1' | ||
| | 'primary.washed.2' | ||
| | 'primary.pressed' | ||
| | 'primary.accent' | ||
| | 'secondary.base' | ||
| | 'secondary.hover' | ||
| | 'secondary.pressed' | ||
| | 'danger.base' | ||
| | 'danger.hover' | ||
| | 'danger.active' | ||
| | 'danger.contrast' | ||
| | 'danger.washed.0' | ||
| | 'danger.washed.1' | ||
| | 'danger.washed.2' | ||
| | 'danger.pressed' | ||
| | 'danger.accent' | ||
| | 'danger.washed.base' | ||
| | 'danger.washed.hover' | ||
| | 'danger.washed.pressed' | ||
| | 'success.base' | ||
| | 'success.hover' | ||
| | 'success.active' | ||
| | 'success.contrast' | ||
| | 'success.washed.0' | ||
| | 'success.pressed' | ||
| | 'success.accent' | ||
| | 'success.washed.base' | ||
| | 'warning.base' |
@@ -10,3 +10,3 @@ const borderStyles = { | ||
| ...borderStyles, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| }, | ||
@@ -18,3 +18,3 @@ 'divider-bottom': { | ||
| borderBottomRightRadius: 0, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| }, | ||
@@ -26,11 +26,11 @@ 'divider-top': { | ||
| borderTopRightRadius: 0, | ||
| borderColor: 'muted.3', | ||
| borderColor: 'muted.2', | ||
| }, | ||
| strong: { | ||
| ...borderStyles, | ||
| borderColor: 'text', | ||
| borderColor: 'text.primary', | ||
| }, | ||
| disabled: { | ||
| ...borderStyles, | ||
| borderColor: 'muted.2', | ||
| borderColor: 'muted.1', | ||
| }, | ||
@@ -37,0 +37,0 @@ primary: { |
| const palette = { | ||
| base: { | ||
| bg: 'background', | ||
| color: 'text', | ||
| color: 'text.primary', | ||
| }, | ||
| inverted: { | ||
| bg: 'text', | ||
| bg: 'text.primary', | ||
| color: 'background', | ||
@@ -12,31 +12,31 @@ }, | ||
| bg: 'primary.base', | ||
| color: 'primary.contrast', | ||
| color: 'primary.accent', | ||
| }, | ||
| 'primary-washed': { | ||
| bg: 'primary.washed.0', | ||
| color: 'primary.base', | ||
| secondary: { | ||
| bg: 'secondary.base', | ||
| color: 'secondary.accent', | ||
| }, | ||
| danger: { | ||
| bg: 'danger.base', | ||
| color: 'danger.contrast', | ||
| color: 'danger.accent', | ||
| }, | ||
| 'danger-washed': { | ||
| bg: 'danger.washed.0', | ||
| color: 'danger.base', | ||
| bg: 'danger.washed.base', | ||
| color: 'danger.washed.accent', | ||
| }, | ||
| success: { | ||
| bg: 'success.base', | ||
| color: 'success.contrast', | ||
| color: 'success.accent', | ||
| }, | ||
| 'success-washed': { | ||
| bg: 'success.washed.0', | ||
| color: 'success.base', | ||
| bg: 'success.washed.base', | ||
| color: 'success.washed.accent', | ||
| }, | ||
| warning: { | ||
| bg: 'warning.base', | ||
| color: 'warning.contrast', | ||
| color: 'warning.accent', | ||
| }, | ||
| 'warning-washed': { | ||
| bg: 'warning.washed.0', | ||
| color: 'warning.base', | ||
| bg: 'warning.washed.base', | ||
| color: 'warning.washed.accent', | ||
| }, | ||
@@ -43,0 +43,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.06%
539785
- Lines of code
- decreased by-0.78%
10730
No dependency changes