@flodesk/grain 11.49.0 → 11.50.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/es/components/button.js
CHANGED
|
@@ -22,7 +22,7 @@ import { Box } from './box';
|
|
|
22
22
|
import { Text } from './text';
|
|
23
23
|
import { keyframes } from '@emotion/react';
|
|
24
24
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
25
|
-
const iconInvert = 'hsl(var(--
|
|
25
|
+
const iconInvert = 'hsl(var(--shade-hs) var(--background-l) / var(--fade10-a))';
|
|
26
26
|
const variantColors = {
|
|
27
27
|
accent: {
|
|
28
28
|
icon: iconInvert,
|
|
@@ -37,8 +37,8 @@ const variantColors = {
|
|
|
37
37
|
content: 'var(--white)',
|
|
38
38
|
border: 'transparent',
|
|
39
39
|
background: 'danger',
|
|
40
|
-
backgroundHover: 'hsl(var(--
|
|
41
|
-
backgroundActive: 'hsl(var(--
|
|
40
|
+
backgroundHover: 'hsl(var(--red-hs) calc(var(--red-l) + 4%))',
|
|
41
|
+
backgroundActive: 'hsl(var(--red-hs) calc(var(--red-l) + 7%))'
|
|
42
42
|
},
|
|
43
43
|
neutral: {
|
|
44
44
|
icon: 'icon',
|
|
@@ -86,7 +86,7 @@ const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "product
|
|
|
86
86
|
hasSpinner
|
|
87
87
|
} = _ref5;
|
|
88
88
|
return hasSpinner && "\n opacity: 0;\n transition: opacity ".concat(getTransition('fast'), ";\n ");
|
|
89
|
-
}, ";}.buttonSpinner{animation:", fadeIn, " ", getTransition('slow'), ";}[data-experiment-rounded-button] &{border-radius:var(--grn-textbox-height-m);}[data-experiment-compact-textbox] &{padding:0 ", getSpace('s2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
89
|
+
}, ";}.buttonSpinner{animation:", fadeIn, " ", getTransition('slow'), ";}[data-experiment-rounded-button] &{border-radius:var(--grn-textbox-height-m);}[data-experiment-compact-textbox] &{padding:0 ", getSpace('s2'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkQ2QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNwYWNlLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IFNwaW5uZXIgfSBmcm9tICcuL3NwaW5uZXInO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi90ZXh0JztcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuY29uc3QgaWNvbkludmVydCA9ICdoc2wodmFyKC0tc2hhZGUtaHMpIHZhcigtLWJhY2tncm91bmQtbCkgLyB2YXIoLS1mYWRlMTAtYSkpJztcblxuY29uc3QgdmFyaWFudENvbG9ycyA9IHtcbiAgYWNjZW50OiB7XG4gICAgaWNvbjogaWNvbkludmVydCxcbiAgICBjb250ZW50OiAnc2hhZGUyJyxcbiAgICBib3JkZXI6ICd0cmFuc3BhcmVudCcsXG4gICAgYmFja2dyb3VuZDogJ3NoYWRlMTInLFxuICAgIGJhY2tncm91bmRIb3ZlcjogJ3NoYWRlMTAnLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICdzaGFkZTknLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBpY29uOiAnaHNsKDAgMCUgMTAwJSAvIHZhcigtLWZhZGU4LWEpKScsXG4gICAgY29udGVudDogJ3ZhcigtLXdoaXRlKScsXG4gICAgYm9yZGVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJhY2tncm91bmQ6ICdkYW5nZXInLFxuICAgIGJhY2tncm91bmRIb3ZlcjogJ2hzbCh2YXIoLS1yZWQtaHMpIGNhbGModmFyKC0tcmVkLWwpICsgNCUpKScsXG4gICAgYmFja2dyb3VuZEFjdGl2ZTogJ2hzbCh2YXIoLS1yZWQtaHMpIGNhbGModmFyKC0tcmVkLWwpICsgNyUpKScsXG4gIH0sXG4gIG5ldXRyYWw6IHtcbiAgICBpY29uOiAnaWNvbicsXG4gICAgY29udGVudDogJ2NvbnRlbnQnLFxuICAgIGJvcmRlcjogJ2ZhZGU0JyxcbiAgICBib3JkZXJIb3ZlcjogJ2ZhZGU2JyxcbiAgICBib3JkZXJBY3RpdmU6ICdzaGFkZTgnLFxuICAgIGJhY2tncm91bmQ6ICd0cmFuc3BhcmVudCcsXG4gIH0sXG59O1xuXG5jb25zdCBmYWRlSW4gPSBrZXlmcmFtZXNgXG4gIDAlLCAyNSUgeyBvcGFjaXR5OiAwIH1cbmA7XG5cbmNvbnN0IHRhZ1N0eWxlcyA9IHtcbiAgYTogYFxuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICB3aWR0aDogZml0LWNvbnRlbnQ7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICB9XG4gIGAsXG4gIGJ1dHRvbjogYGAsXG4gIHNwYW46IGBcbiAgICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICBgLFxufTtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItd2lkdGg6IHZhcigtLWdybi1ib3JkZXItc2l6ZSk7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci1yYWRpdXM6ICR7KHsgc2l6ZSB9KSA9PiBgdmFyKC0tZ3JuLXRleHRib3gtcmFkaXVzLSR7c2l6ZX0pYH07XG4gIGhlaWdodDogJHsoeyBzaXplIH0pID0+IGB2YXIoLS1ncm4tdGV4dGJveC1oZWlnaHQtJHtzaXplfSlgfTtcbiAgcGFkZGluZy1ibG9jazogMDtcbiAgcGFkZGluZy1pbmxpbmU6ICR7KHsgc2l6ZSB9KSA9PiBgdmFyKC0tZ3JuLXRleHRib3gtcGFkZGluZ1gtJHtzaXplfSlgfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBnYXA6IDEycHg7XG4gICR7cCA9PiBwLmhhc0Z1bGxXaWR0aCAmJiBgd2lkdGg6IDEwMCVgfTtcbiAgJHtwID0+IHRhZ1N0eWxlc1twLmFzXX07XG5cbiAgJHsoeyB2YXJpYW50IH0pID0+IGBcbiAgICAtLWljb25Db2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmljb24pfTtcbiAgICBib3JkZXItY29sb3I6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5ib3JkZXIpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmNvbnRlbnQpfTtcbiAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYmFja2dyb3VuZCl9O1xuXG4gICAgQG1lZGlhKGhvdmVyOiBob3Zlcikge1xuICAgICAgJjpob3ZlciB7XG4gICAgICAgIC0taWNvbkNvbG9yOiBjdXJyZW50Q29sb3I7XG4gICAgICAgICR7XG4gICAgICAgICAgdmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kSG92ZXIgJiZcbiAgICAgICAgICBgYmFja2dyb3VuZDogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJhY2tncm91bmRIb3Zlcil9YFxuICAgICAgICB9O1xuICAgICAgICAke1xuICAgICAgICAgIHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYm9yZGVySG92ZXIgJiZcbiAgICAgICAgICBgYm9yZGVyLWNvbG9yOiR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5ib3JkZXJIb3Zlcil9YFxuICAgICAgICB9O1xuXG4gICAgICAgIC8vIHNldCBjb2xvciB0byBwcmV2ZW50IGluaGVyaXRpbmcgZnJvbSBvdXRpc2RlIHJlc2V0XG4gICAgICAgIGNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uY29udGVudCl9O1xuICAgICAgfVxuXG4gICAgICAmOmFjdGl2ZSB7XG4gICAgICAgICR7XG4gICAgICAgICAgdmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kQWN0aXZlICYmXG4gICAgICAgICAgYGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kQWN0aXZlKX1gXG4gICAgICAgIH07XG4gICAgICAgICAke1xuICAgICAgICAgICB2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlckFjdGl2ZSAmJlxuICAgICAgICAgICBgYm9yZGVyLWNvbG9yOiR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5ib3JkZXJBY3RpdmUpfWBcbiAgICAgICAgIH07XG4gICAgICB9XG4gICAgfVxuICBgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0taWNvbkNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZEljb24nKX07XG4gICAgY29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQ29udGVudCcpfTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZEJhY2tncm91bmQnKX07XG4gICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuXG4gIC5JY29uIHtcbiAgICAke3AgPT4gcC5pY29uUG9zaXRpb24gPT09ICdyaWdodCcgJiYgYG9yZGVyOiAxYH07XG4gICAgJHtzdHlsZXMudHJhbnNpdGlvbnN9O1xuICB9XG5cbiAgLmJ1dHRvblRleHQsXG4gIC5JY29uIHtcbiAgICAkeyh7IGhhc1NwaW5uZXIgfSkgPT5cbiAgICAgIGhhc1NwaW5uZXIgJiZcbiAgICAgIGBcbiAgICAgIG9wYWNpdHk6IDA7XG4gICAgICB0cmFuc2l0aW9uOiBvcGFjaXR5ICR7Z2V0VHJhbnNpdGlvbignZmFzdCcpfTtcbiAgICBgfVxuICB9XG5cbiAgLmJ1dHRvblNwaW5uZXIge1xuICAgIGFuaW1hdGlvbjogJHtmYWRlSW59ICR7Z2V0VHJhbnNpdGlvbignc2xvdycpfTtcbiAgfVxuXG4gIFtkYXRhLWV4cGVyaW1lbnQtcm91bmRlZC1idXR0b25dICYge1xuICAgIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKTtcbiAgfVxuXG4gIFtkYXRhLWV4cGVyaW1lbnQtY29tcGFjdC10ZXh0Ym94XSAmIHtcbiAgICBwYWRkaW5nOiAwICR7Z2V0U3BhY2UoJ3MyJyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQnV0dG9uID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgdmFyaWFudCA9ICduZXV0cmFsJyxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBpY29uLFxuICAgICAgaWNvblBvc2l0aW9uID0gJ2xlZnQnLFxuICAgICAgaGFzRnVsbFdpZHRoLFxuICAgICAgaGFzU3Bpbm5lcixcbiAgICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICAgIHRhZyA9ICdidXR0b24nLFxuICAgICAgc2l6ZSA9ICdtJyxcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIHJldHVybiAoXG4gICAgICA8V3JhcHBlclxuICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgaWNvblBvc2l0aW9uPXtpY29uUG9zaXRpb259XG4gICAgICAgIGhhc0Z1bGxXaWR0aD17aGFzRnVsbFdpZHRofVxuICAgICAgICBoYXNTcGlubmVyPXtoYXNTcGlubmVyfVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgYXM9e3RhZ31cbiAgICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7aGFzU3Bpbm5lciAmJiAoXG4gICAgICAgICAgPEJveCBwb3NpdGlvbj1cImFic29sdXRlXCIgY2xhc3NOYW1lPVwiYnV0dG9uU3Bpbm5lclwiPlxuICAgICAgICAgICAgPFNwaW5uZXIgY29sb3I9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgICAgIDwvQm94PlxuICAgICAgICApfVxuICAgICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSBjb2xvcj1cInZhcigtLWljb25Db2xvcilcIiAvPn1cbiAgICAgICAgPFRleHQgY2xhc3NOYW1lPVwiYnV0dG9uVGV4dFwiPntjaGlsZHJlbn08L1RleHQ+XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfSxcbik7XG5cbkJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb25Qb3NpdGlvbjogdHlwZXMuaWNvblBvc2l0aW9uLFxuICB2YXJpYW50OiB0eXBlcy5idXR0b25WYXJpYW50LFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGhhc0Z1bGxXaWR0aDogUHJvcFR5cGVzLmJvb2wsXG4gIGhhc1NwaW5uZXI6IFByb3BUeXBlcy5ib29sLFxuICB0eXBlOiB0eXBlcy5idXR0b25UeXBlLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbiAgc2l6ZTogUHJvcFR5cGVzLm9uZU9mKFsnbScsICdsJ10pLFxufTtcbiJdfQ== */"));
|
|
90
90
|
|
|
91
91
|
export const Button = /*#__PURE__*/forwardRef((_ref6, ref) => {
|
|
92
92
|
let {
|
|
@@ -12,26 +12,21 @@ import { getColor, getRadius } from '../utilities';
|
|
|
12
12
|
import React, { forwardRef } from 'react';
|
|
13
13
|
import PropTypes from 'prop-types';
|
|
14
14
|
import { styles } from '../foundational';
|
|
15
|
-
import { css } from '@emotion/react';
|
|
16
15
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
17
|
-
const strokeSize = 'var(--grn-border-size)';
|
|
18
|
-
const wrapperExperimentStyles = /*#__PURE__*/css("[data-experiment-new-texttoggle] &{border:none;border-radius:", getRadius('s'), ";padding:2px;background:", getColor('shade3'), ";}[data-experiment-new-texttoggle-alt] &{border:none;border-radius:unset;background:transparent;}" + (process.env.NODE_ENV === "production" ? "" : ";label:wrapperExperimentStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTbUMiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cyB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBzdHJva2VTaXplID0gJ3ZhcigtLWdybi1ib3JkZXItc2l6ZSknO1xuXG5jb25zdCB3cmFwcGVyRXhwZXJpbWVudFN0eWxlcyA9IGNzc2BcbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctdGV4dHRvZ2dsZV0gJiB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgIHBhZGRpbmc6IDJweDtcbiAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdzaGFkZTMnKX07XG4gIH1cbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctdGV4dHRvZ2dsZS1hbHRdICYge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiB1bnNldDtcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgfVxuYDtcblxuY29uc3QgaXRlbUV4cGVyaW1lbnRTdHlsZXMgPSBwID0+IGNzc2BcbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctdGV4dHRvZ2dsZV0gJiB7XG4gICAgLS1oZWlnaHQ6IGNhbGModmFyKC0tZ3JuLXRleHRib3gtaGVpZ2h0LW0pIC0gNHB4KTtcbiAgICBib3JkZXItcmFkaXVzOiBjYWxjKCR7Z2V0UmFkaXVzKCdzJyl9IC0gMnB4KTtcbiAgICBib3gtc2hhZG93OiB1bnNldDtcblxuICAgICR7cC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMScpfTtcbiAgICBgfVxuICB9XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctdGV4dHRvZ2dsZS1hbHRdICYge1xuICAgIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICAgIGJveC1zaGFkb3c6IHVuc2V0O1xuICAgIHBhZGRpbmc6IDAgMTZweDtcbiAgICBoZWlnaHQ6IHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKTtcblxuICAgICR7cC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMycpfTtcbiAgICBgfVxuICB9XG5gO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYm9yZGVyOiAke3N0cm9rZVNpemV9IHNvbGlkICR7Z2V0Q29sb3IoJ2JvcmRlcjInKX07XG4gIGdhcDogJHtzdHJva2VTaXplfTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuXG4gICR7cCA9PiAhcC5oYXNGdWxsV2lkdGggJiYgYHdpZHRoOiBmaXQtY29udGVudGB9O1xuICAke3AgPT5cbiAgICBwLmhhc0Z1bGxXaWR0aCAmJlxuICAgIGBcbiAgICAuVGV4dFRvZ2dsZSB7XG4gICAgICBmbGV4OiAxIDAgMDtcbiAgICB9XG4gIGB9XG5cbiAgJHt3cmFwcGVyRXhwZXJpbWVudFN0eWxlc31cbmA7XG5cbmNvbnN0IEl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAtLWJvcmRlckNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLS1oZWlnaHQ6IGNhbGModmFyKC0tZ3JuLXRleHRib3gtaGVpZ2h0LW0pIC0gJHtzdHJva2VTaXplfSAqIDIpO1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMCAxNnB4O1xuICBoZWlnaHQ6IHZhcigtLWhlaWdodCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICBib3JkZXItcmFkaXVzOiAxMDAwcHg7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWxlYXZlKTtcbiAgYm94LXNoYWRvdzogMCAwIDAgJHtzdHJva2VTaXplfSB2YXIoLS1ib3JkZXJDb2xvcik7XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1ob3Zlcik7XG4gIH1cblxuICAke3AgPT5cbiAgICBwLmlzQWN0aXZlICYmXG4gICAgYFxuICAgIC0tYm9yZGVyQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlOScpfTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG4gICAgfVxuICBgfVxuXG4gICR7cCA9PiBpdGVtRXhwZXJpbWVudFN0eWxlcyhwKX07XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dFRvZ2dsZSA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8SXRlbVdyYXBwZXJcbiAgICAgIHJlZj17cmVmfVxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBpc0FjdGl2ZT17aXNBY3RpdmV9XG4gICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgY2xhc3NOYW1lPVwiVGV4dFRvZ2dsZVwiXG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvSXRlbVdyYXBwZXI+XG4gICk7XG59KTtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGVHcm91cCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGhhc0Z1bGxXaWR0aCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxXcmFwcGVyIHJlZj17cmVmfSBoYXNGdWxsV2lkdGg9e2hhc0Z1bGxXaWR0aH0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvV3JhcHBlcj5cbikpO1xuXG5UZXh0VG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Z1bGxXaWR0aDogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5UZXh0VG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */");
|
|
19
|
-
|
|
20
|
-
const itemExperimentStyles = p => /*#__PURE__*/css("[data-experiment-new-texttoggle] &{--height:calc(var(--grn-textbox-height-m) - 4px);border-radius:calc(", getRadius('s'), " - 2px);box-shadow:unset;", p.isActive && "\n background-color: ".concat(getColor('shade1'), ";\n "), ";}[data-experiment-new-texttoggle-alt] &{border-radius:", getRadius('s'), ";box-shadow:unset;padding:0 16px;height:var(--grn-textbox-height-m);", p.isActive && "\n background-color: ".concat(getColor('shade3'), ";\n "), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:itemExperimentStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QnFDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuY29uc3Qgc3Ryb2tlU2l6ZSA9ICd2YXIoLS1ncm4tYm9yZGVyLXNpemUpJztcblxuY29uc3Qgd3JhcHBlckV4cGVyaW1lbnRTdHlsZXMgPSBjc3NgXG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LXRleHR0b2dnbGVdICYge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBwYWRkaW5nOiAycHg7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignc2hhZGUzJyl9O1xuICB9XG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LXRleHR0b2dnbGUtYWx0XSAmIHtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogdW5zZXQ7XG4gICAgYmFja2dyb3VuZDogdHJhbnNwYXJlbnQ7XG4gIH1cbmA7XG5cbmNvbnN0IGl0ZW1FeHBlcmltZW50U3R5bGVzID0gcCA9PiBjc3NgXG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LXRleHR0b2dnbGVdICYge1xuICAgIC0taGVpZ2h0OiBjYWxjKHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKSAtIDRweCk7XG4gICAgYm9yZGVyLXJhZGl1czogY2FsYygke2dldFJhZGl1cygncycpfSAtIDJweCk7XG4gICAgYm94LXNoYWRvdzogdW5zZXQ7XG5cbiAgICAke3AuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKCdzaGFkZTEnKX07XG4gICAgYH1cbiAgfVxuXG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LXRleHR0b2dnbGUtYWx0XSAmIHtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBib3gtc2hhZG93OiB1bnNldDtcbiAgICBwYWRkaW5nOiAwIDE2cHg7XG4gICAgaGVpZ2h0OiB2YXIoLS1ncm4tdGV4dGJveC1oZWlnaHQtbSk7XG5cbiAgICAke3AuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKCdzaGFkZTMnKX07XG4gICAgYH1cbiAgfVxuYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJvcmRlcjogJHtzdHJva2VTaXplfSBzb2xpZCAke2dldENvbG9yKCdib3JkZXIyJyl9O1xuICBnYXA6ICR7c3Ryb2tlU2l6ZX07XG4gIGJvcmRlci1yYWRpdXM6IDEwMDBweDtcblxuICAke3AgPT4gIXAuaGFzRnVsbFdpZHRoICYmIGB3aWR0aDogZml0LWNvbnRlbnRgfTtcbiAgJHtwID0+XG4gICAgcC5oYXNGdWxsV2lkdGggJiZcbiAgICBgXG4gICAgLlRleHRUb2dnbGUge1xuICAgICAgZmxleDogMSAwIDA7XG4gICAgfVxuICBgfVxuXG4gICR7d3JhcHBlckV4cGVyaW1lbnRTdHlsZXN9XG5gO1xuXG5jb25zdCBJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcbiAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0taGVpZ2h0OiBjYWxjKHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKSAtICR7c3Ryb2tlU2l6ZX0gKiAyKTtcblxuICBib3JkZXI6IG5vbmU7XG4gIHBhZGRpbmc6IDAgMTZweDtcbiAgaGVpZ2h0OiB2YXIoLS1oZWlnaHQpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1sZWF2ZSk7XG4gIGJveC1zaGFkb3c6IDAgMCAwICR7c3Ryb2tlU2l6ZX0gdmFyKC0tYm9yZGVyQ29sb3IpO1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JuLXRyYW5zaXRpb24taG92ZXIpO1xuICB9XG5cbiAgJHtwID0+XG4gICAgcC5pc0FjdGl2ZSAmJlxuICAgIGBcbiAgICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdzaGFkZTknKX07XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1hY3RpdmUpO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1hY3RpdmUpO1xuICAgIH1cbiAgYH1cblxuICAke3AgPT4gaXRlbUV4cGVyaW1lbnRTdHlsZXMocCl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGUgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyXG4gICAgICByZWY9e3JlZn1cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgaXNBY3RpdmU9e2lzQWN0aXZlfVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGNsYXNzTmFtZT1cIlRleHRUb2dnbGVcIlxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufSk7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlR3JvdXAgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBoYXNGdWxsV2lkdGgsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8V3JhcHBlciByZWY9e3JlZn0gaGFzRnVsbFdpZHRoPXtoYXNGdWxsV2lkdGh9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pKTtcblxuVGV4dFRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBoYXNGdWxsV2lkdGg6IFByb3BUeXBlcy5ib29sLFxufTtcblxuVGV4dFRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */");
|
|
21
16
|
|
|
22
17
|
const Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
23
18
|
target: "e1fb3cwm1"
|
|
24
19
|
} : {
|
|
25
20
|
target: "e1fb3cwm1",
|
|
26
21
|
label: "Wrapper"
|
|
27
|
-
})("display:flex;border:",
|
|
22
|
+
})("--padding:2px;display:flex;border-radius:", getRadius('s'), ";padding:var(--padding);background:hsl(var(--shade-h) var(--fade-s) var(--fade-l) / 7%);", p => !p.hasFullWidth && "width: fit-content", ";", p => p.hasFullWidth && "\n .TextToggle {\n flex: 1 0 0;\n }\n ", ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cyB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgLS1wYWRkaW5nOiAycHg7XG5cbiAgZGlzcGxheTogZmxleDtcbiAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gIHBhZGRpbmc6IHZhcigtLXBhZGRpbmcpO1xuICBiYWNrZ3JvdW5kOiBoc2wodmFyKC0tc2hhZGUtaCkgdmFyKC0tZmFkZS1zKSB2YXIoLS1mYWRlLWwpIC8gNyUpO1xuXG4gICR7cCA9PiAhcC5oYXNGdWxsV2lkdGggJiYgYHdpZHRoOiBmaXQtY29udGVudGB9O1xuICAke3AgPT5cbiAgICBwLmhhc0Z1bGxXaWR0aCAmJlxuICAgIGBcbiAgICAuVGV4dFRvZ2dsZSB7XG4gICAgICBmbGV4OiAxIDAgMDtcbiAgICB9XG4gIGB9XG5gO1xuXG5jb25zdCBJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcbiAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0taGVpZ2h0OiBjYWxjKHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC1tKSAtIHZhcigtLXBhZGRpbmcpICogMik7XG5cbiAgYm9yZGVyOiBub25lO1xuICBwYWRkaW5nOiAwIHZhcigtLWdybi1zcGFjZS1zMik7XG4gIGhlaWdodDogdmFyKC0taGVpZ2h0KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50Mik7XG4gIGJvcmRlci1yYWRpdXM6IGNhbGMoJHtnZXRSYWRpdXMoJ3MnKX0gLSB2YXIoLS1wYWRkaW5nKSk7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWxlYXZlKTtcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWhvdmVyKTtcbiAgfVxuXG4gICR7cCA9PlxuICAgIHAuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignc2hhZGU5Jyl9O1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JuLXRyYW5zaXRpb24tYWN0aXZlKTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2dldENvbG9yKCdzaGFkZTEnKX07XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG4gICAgfVxuICBgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGUgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyXG4gICAgICByZWY9e3JlZn1cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgaXNBY3RpdmU9e2lzQWN0aXZlfVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGNsYXNzTmFtZT1cIlRleHRUb2dnbGVcIlxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufSk7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlR3JvdXAgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBoYXNGdWxsV2lkdGgsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8V3JhcHBlciByZWY9e3JlZn0gaGFzRnVsbFdpZHRoPXtoYXNGdWxsV2lkdGh9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pKTtcblxuVGV4dFRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBoYXNGdWxsV2lkdGg6IFByb3BUeXBlcy5ib29sLFxufTtcblxuVGV4dFRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
|
|
28
23
|
|
|
29
24
|
const ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
|
|
30
25
|
target: "e1fb3cwm0"
|
|
31
26
|
} : {
|
|
32
27
|
target: "e1fb3cwm0",
|
|
33
28
|
label: "ItemWrapper"
|
|
34
|
-
})(styles.buttonReset, ";--borderColor:transparent;--height:calc(var(--grn-textbox-height-m) -
|
|
29
|
+
})(styles.buttonReset, ";--borderColor:transparent;--height:calc(var(--grn-textbox-height-m) - var(--padding) * 2);border:none;padding:0 var(--grn-space-s2);height:var(--height);background-color:transparent;position:relative;color:var(--grn-color-content2);border-radius:calc(", getRadius('s'), " - var(--padding));white-space:nowrap;transition:var(--grn-transition-leave);&:hover{color:var(--grn-color-content);transition:var(--grn-transition-hover);}", p => p.isActive && "\n --borderColor: ".concat(getColor('shade9'), ";\n color: var(--grn-color-content);\n transition: var(--grn-transition-active);\n background-color: ").concat(getColor('shade1'), ";\n\n &:hover {\n transition: var(--grn-transition-active);\n }\n "), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIC0tcGFkZGluZzogMnB4O1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJvcmRlci1yYWRpdXM6ICR7Z2V0UmFkaXVzKCdzJyl9O1xuICBwYWRkaW5nOiB2YXIoLS1wYWRkaW5nKTtcbiAgYmFja2dyb3VuZDogaHNsKHZhcigtLXNoYWRlLWgpIHZhcigtLWZhZGUtcykgdmFyKC0tZmFkZS1sKSAvIDclKTtcblxuICAke3AgPT4gIXAuaGFzRnVsbFdpZHRoICYmIGB3aWR0aDogZml0LWNvbnRlbnRgfTtcbiAgJHtwID0+XG4gICAgcC5oYXNGdWxsV2lkdGggJiZcbiAgICBgXG4gICAgLlRleHRUb2dnbGUge1xuICAgICAgZmxleDogMSAwIDA7XG4gICAgfVxuICBgfVxuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gIC0tYm9yZGVyQ29sb3I6IHRyYW5zcGFyZW50O1xuICAtLWhlaWdodDogY2FsYyh2YXIoLS1ncm4tdGV4dGJveC1oZWlnaHQtbSkgLSB2YXIoLS1wYWRkaW5nKSAqIDIpO1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMCB2YXIoLS1ncm4tc3BhY2UtczIpO1xuICBoZWlnaHQ6IHZhcigtLWhlaWdodCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICBib3JkZXItcmFkaXVzOiBjYWxjKCR7Z2V0UmFkaXVzKCdzJyl9IC0gdmFyKC0tcGFkZGluZykpO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1sZWF2ZSk7XG5cbiAgJjpob3ZlciB7XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1ob3Zlcik7XG4gIH1cblxuICAke3AgPT5cbiAgICBwLmlzQWN0aXZlICYmXG4gICAgYFxuICAgIC0tYm9yZGVyQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlOScpfTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdybi10cmFuc2l0aW9uLWFjdGl2ZSk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvcignc2hhZGUxJyl9O1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0cmFuc2l0aW9uOiB2YXIoLS1ncm4tdHJhbnNpdGlvbi1hY3RpdmUpO1xuICAgIH1cbiAgYH1cbmA7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaXNBY3RpdmUsIG9uQ2xpY2ssIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxJdGVtV3JhcHBlclxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIGlzQWN0aXZlPXtpc0FjdGl2ZX1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICBjbGFzc05hbWU9XCJUZXh0VG9nZ2xlXCJcbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9JdGVtV3JhcHBlcj5cbiAgKTtcbn0pO1xuXG5leHBvcnQgY29uc3QgVGV4dFRvZ2dsZUdyb3VwID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaGFzRnVsbFdpZHRoLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFdyYXBwZXIgcmVmPXtyZWZ9IGhhc0Z1bGxXaWR0aD17aGFzRnVsbFdpZHRofSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKSk7XG5cblRleHRUb2dnbGVHcm91cC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzRnVsbFdpZHRoOiBQcm9wVHlwZXMuYm9vbCxcbn07XG5cblRleHRUb2dnbGUucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */"));
|
|
35
30
|
|
|
36
31
|
export const TextToggle = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
37
32
|
let {
|
package/es/styles/colors/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const core = "\n :root {\n --white: hsl(0 0% 100%);\n --
|
|
1
|
+
const core = "\n :root {\n --white: hsl(0 0% 100%);\n --shade-h: 13.85;\n --shade-s: 7%;\n --shade-hs: var(--shade-h) var(--shade-s);\n --bf-s: 20%;\n --wf-s: calc(100% - var(--bf-s));\n }\n\n :root {\n --red-hs: 6 55%;\n --red-l: 52%;\n\n --grn-color-blue: hsl(218 74% 54%);\n --grn-color-red: hsl(var(--red-hs) var(--red-l));\n --grn-color-yellow: hsl(44 99% 59%);\n --grn-color-green: hsl(153 22% 57%);\n }\n\n :root {\n --shadeS-13: 20%;\n --shadeS-12: 22%;\n --shadeS-11: 15%;\n --shadeS-10: 12%;\n --shadeS-9: 9%;\n --shadeS-8: 7%;\n --shadeS-7: 5%;\n --shadeS-6: 6%;\n --shadeS-5: 7%;\n --shadeS-4: 7%;\n --shadeS-3: 7%;\n --shadeS-2: 6%;\n --shadeS-1: 6%;\n }\n\n :root {\n --shade13-s: var(--shadeS-13);\n --shade12-s: var(--shadeS-12);\n --shade11-s: var(--shadeS-11);\n --shade10-s: var(--shadeS-10);\n --shade9-s: var(--shadeS-9);\n --shade8-s: var(--shadeS-8);\n --shade7-s: var(--shadeS-7);\n --shade6-s: var(--shadeS-6);\n --shade5-s: var(--shadeS-5);\n --shade4-s: var(--shadeS-4);\n --shade3-s: var(--shadeS-3);\n --shade2-s: var(--shadeS-2);\n --shade1-s: var(--shadeS-1);\n }\n\n [data-theme='dark'], [data-theme='invert'] {\n --shade13-s: var(--shadeS-1);\n --shade12-s: var(--shadeS-2);\n --shade11-s: var(--shadeS-3);\n --shade10-s: var(--shadeS-4);\n --shade9-s: var(--shadeS-5);\n --shade8-s: var(--shadeS-6);\n --shade7-s: var(--shadeS-7);\n --shade6-s: var(--shadeS-8);\n --shade5-s: var(--shadeS-9);\n --shade4-s: var(--shadeS-10);\n --shade3-s: var(--shadeS-11);\n --shade2-s: var(--shadeS-12);\n --shade1-s: var(--shadeS-13);\n }\n\n :root {\n --grn-color-shadeTone13: hsl(var(--shade-h) var(--shade13-s) 10%);\n --grn-color-shadeTone12: hsl(var(--shade-h) var(--shade12-s) 11.5%);\n --grn-color-shadeTone11: hsl(var(--shade-h) var(--shade11-s) 15%);\n --grn-color-shadeTone10: hsl(var(--shade-h) var(--shade10-s) 21%);\n --grn-color-shadeTone9: hsl(var(--shade-h) var(--shade9-s) 28%);\n --grn-color-shadeTone8: hsl(var(--shade-h) var(--shade8-s) 38%);\n --grn-color-shadeTone7: hsl(var(--shade-h) var(--shade7-s) 51%);\n --grn-color-shadeTone6: hsl(var(--shade-h) var(--shade6-s) 70%);\n --grn-color-shadeTone5: hsl(var(--shade-h) var(--shade5-s) 82%);\n --grn-color-shadeTone4: hsl(var(--shade-h) var(--shade4-s) 90%);\n --grn-color-shadeTone3: hsl(var(--shade-h) var(--shade3-s) 95%);\n --grn-color-shadeTone2: hsl(var(--shade-h) var(--shade2-s) 97.5%);\n --grn-color-shadeTone1: hsl(var(--shade-h) var(--shade1-s) 100%);\n\n --fade10-a: 73%;\n --fade9-a: 66%;\n --fade8-a: 59%;\n --fade7-a: 52%;\n --fade6-a: 45%;\n --fade5-a: 38%;\n --fade4-a: 31%;\n --fade3-a: 24%;\n --fade2-a: 17%;\n --fade1-a: 10%;\n\n --fade-s: 20%;\n\n --grn-color-lightFade10: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade10-a));\n --grn-color-lightFade9: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade9-a));\n --grn-color-lightFade8: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade8-a));\n --grn-color-lightFade7: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade7-a));\n --grn-color-lightFade6: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade6-a));\n --grn-color-lightFade5: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade5-a));\n --grn-color-lightFade4: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade4-a));\n --grn-color-lightFade3: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade3-a));\n --grn-color-lightFade2: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade2-a));\n --grn-color-lightFade1: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade1-a));\n\n --grn-color-darkFade10: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade10-a));\n --grn-color-darkFade9: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade9-a));\n --grn-color-darkFade8: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade8-a));\n --grn-color-darkFade7: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade7-a));\n --grn-color-darkFade6: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade6-a));\n --grn-color-darkFade5: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade5-a));\n --grn-color-darkFade4: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade4-a));\n --grn-color-darkFade3: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade3-a));\n --grn-color-darkFade2: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade2-a));\n --grn-color-darkFade1: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade1-a));\n }\n\n :root {\n --grn-color-warning: var(--grn-color-yellow);\n --grn-color-danger: var(--grn-color-red);\n --grn-color-success: var(--grn-color-green);\n --grn-color-selection: var(--grn-color-blue);\n }\n";
|
|
2
2
|
export default core;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const theme = "\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --
|
|
1
|
+
const theme = "\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --content-l: 20%;\n --background-l: 80%;\n --fade-l: var(--bf-s);\n --grn-color-floatingBackground: var(--grn-color-shade1);\n --grn-color-floatingBackground: var(--grn-color-shade1);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --content-l: 80%;\n --background-l: 20%;\n --fade-l: var(--wf-s);\n --grn-color-floatingBackground: var(--grn-color-shade2);\n --grn-color-floatingBackground: var(--grn-color-shade2);\n }\n\n /* light + dark */\n\n :root,\n [data-theme] {\n --grn-color-content: var(--grn-color-shade12);\n --grn-color-content2: var(--grn-color-fade7);\n --grn-color-content3: var(--grn-color-fade5);\n --grn-color-disabledContent: var(--grn-color-shade7);\n --grn-color-icon: var(--grn-color-fade7);\n --grn-color-disabledIcon: var(--grn-color-fade4);\n\n --grn-color-background: var(--grn-color-shade1);\n --grn-color-background2: var(--grn-color-shade2);\n --grn-color-background3: var(--grn-color-shade3);\n --grn-color-disabledBackground: var(--grn-color-shade4);\n\n --grn-color-border: hsl(var(--shade-hs) var(--content-l) / 12%);\n --grn-color-border2: hsl(var(--shade-hs) var(--content-l) / 20%);\n }\n";
|
|
2
2
|
export default theme;
|
|
@@ -3,7 +3,7 @@ export const borderVariables = "\n :root {\n --grn-border-size: 1px;\n }\n"
|
|
|
3
3
|
const capValue = "\n :root {\n @supports not (font-size: 1cap) { --grn-cap-value: 0.74em }\n @supports (font-size: 1cap) { --grn-cap-value: 1cap }\n }\n";
|
|
4
4
|
export const capVariables = "\n :root {\n --grn-cap: var(--grn-cap-value);\n }\n";
|
|
5
5
|
export const fieldVariables = "\n :root, [data-theme] {\n --grn-field-paddingX: var(--grn-space-s2);\n --grn-field-paddingX-m: var(--grn-space-s2);\n --grn-field-paddingX-l: var(--grn-textbox-paddingX-l);\n\n --grn-field-border-color: var(--grn-color-fade3);\n --grn-field-border-color-hover: var(--grn-color-fade6);\n --grn-field-border-color-focus: var(--grn-color-shade9);\n --grn-field-border-color-disabled: var(--grn-color-shade5);\n --grn-field-background-disabled: var(--grn-color-shade2);\n --grn-field-placeholder-color: var(--grn-color-shade7);\n }\n";
|
|
6
|
-
export const componentVariables = "\n :root, [data-theme] {\n --grn-clearbutton-danger-background-hover: hsl(var(--
|
|
6
|
+
export const componentVariables = "\n :root, [data-theme] {\n --grn-clearbutton-danger-background-hover: hsl(var(--red-hs) var(--red-l) / 12%);\n --grn-clearbutton-danger-background-active: hsl(var(--red-hs) var(--red-l) / 19%);\n --grn-icon-danger-color: hsl(var(--red-hs) var(--red-l) / 70%);\n }\n";
|
|
7
7
|
const experiments = "\n [data-experiment-compact-textbox=\"true\"] {\n --grn-textBoxHeight: 36px;\n\n --grn-textbox-height-m: 36px;\n --grn-textbox-paddingX-m: var(--grn-space-s2);\n }\n :root [data-experiment-lighter-fields='true'],\n [data-theme][data-experiment-lighter-fields='true'] {\n --grn-field-border-color: var(--grn-color-fade2);\n }\n\n [data-experiment-match-button-and-field-padding=\"true\"] {\n --grn-field-paddingX: 14px;\n --grn-field-paddingX-m: 14px;\n --grn-textbox-paddingX-m: 14px;\n }\n";
|
|
8
8
|
export const textboxVariables = "\n :root {\n --grn-textbox-height-s: 28px;\n --grn-textbox-paddingX-s: var(--grn-space-s);\n --grn-textbox-radius-s: var(--grn-radius-xs);\n --grn-textbox-text-s: var(--grn-text-s);\n\n --grn-textbox-height-m: 40px;\n --grn-textbox-paddingX-m: var(--grn-space-m);\n --grn-textbox-radius-m: var(--grn-radius-s);\n --grn-textbox-text-m: var(--grn-text-m);\n\n --grn-textbox-height-l: 48px;\n --grn-textbox-paddingX-l: 18px;\n --grn-textbox-radius-l: var(--grn-radius-m);\n --grn-textbox-text-l: var(--grn-text-m);\n }\n";
|
|
9
9
|
export const clearbuttonVariables = "\n :root {\n --grn-clearbutton-height: 36px;\n }\n";
|
package/es/styles/variables.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const variables = "\n :root {\n --grn-unit: 8px;\n }\n\n :root {\n --grn-text-s: 12px;\n --grn-text-m: 14px;\n --grn-text-l: 18px;\n --grn-text-xl: 24px;\n --grn-text-xxl: 30px;\n }\n\n /* text size \u2715 ~1.2 */\n :root {\n --grn-icon-s: 14px;\n --grn-icon-m: 18px;\n --grn-icon-l: 22px;\n --grn-icon-xl: 28px;\n --grn-icon-xxl: 36px;\n }\n\n :root {\n --grn-weight-normal: 400;\n --grn-weight-medium: 500;\n }\n\n :root {\n --grn-space-xs: calc(var(--grn-unit) / 2);\n --grn-space-s: calc(var(--grn-unit) * 1);\n --grn-space-s2: calc(var(--grn-unit) * 1.5);\n --grn-space-m: calc(var(--grn-unit) * 2);\n --grn-space-l: calc(var(--grn-unit) * 3);\n --grn-space-l2: calc(var(--grn-unit) * 4);\n --grn-space-xl: calc(var(--grn-unit) * 5);\n --grn-space-xl2: calc(var(--grn-unit) * 6);\n --grn-space-xxl: calc(var(--grn-unit) * 7);\n }\n\n :root {\n --grn-radius-xs: 3px;\n --grn-radius-s: 6px;\n --grn-radius-m: 8px;\n --grn-radius-l: 10px;\n }\n\n :root {\n --grn-transition-slow: 400ms;\n --grn-transition-fast: 200ms;\n --grn-transition-xFast: 160ms;\n --grn-transition-xxFast: 80ms;\n }\n\n :root,\n [data-theme] {\n --grn-color-backdrop: hsl(var(--
|
|
1
|
+
const variables = "\n :root {\n --grn-unit: 8px;\n }\n\n :root {\n --grn-text-s: 12px;\n --grn-text-m: 14px;\n --grn-text-l: 18px;\n --grn-text-xl: 24px;\n --grn-text-xxl: 30px;\n }\n\n /* text size \u2715 ~1.2 */\n :root {\n --grn-icon-s: 14px;\n --grn-icon-m: 18px;\n --grn-icon-l: 22px;\n --grn-icon-xl: 28px;\n --grn-icon-xxl: 36px;\n }\n\n :root {\n --grn-weight-normal: 400;\n --grn-weight-medium: 500;\n }\n\n :root {\n --grn-space-xs: calc(var(--grn-unit) / 2);\n --grn-space-s: calc(var(--grn-unit) * 1);\n --grn-space-s2: calc(var(--grn-unit) * 1.5);\n --grn-space-m: calc(var(--grn-unit) * 2);\n --grn-space-l: calc(var(--grn-unit) * 3);\n --grn-space-l2: calc(var(--grn-unit) * 4);\n --grn-space-xl: calc(var(--grn-unit) * 5);\n --grn-space-xl2: calc(var(--grn-unit) * 6);\n --grn-space-xxl: calc(var(--grn-unit) * 7);\n }\n\n :root {\n --grn-radius-xs: 3px;\n --grn-radius-s: 6px;\n --grn-radius-m: 8px;\n --grn-radius-l: 10px;\n }\n\n :root {\n --grn-transition-slow: 400ms;\n --grn-transition-fast: 200ms;\n --grn-transition-xFast: 160ms;\n --grn-transition-xxFast: 80ms;\n }\n\n :root,\n [data-theme] {\n --grn-color-backdrop: hsl(var(--shade-h) 15% 10% / 0.6);\n }\n";
|
|
2
2
|
export default variables;
|