@flodesk/grain 11.6.5 → 11.7.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 +3 -3
- package/es/components/icon-toggle.js +17 -15
- package/es/components/text-toggle.js +6 -4
- package/es/styles/base.js +1 -1
- package/es/styles/colors/core.js +1 -1
- package/es/styles/colors/index.js +1 -2
- package/es/styles/variables.js +1 -1
- package/package.json +1 -1
- package/es/styles/colors/experimental.js +0 -2
package/es/components/button.js
CHANGED
|
@@ -20,7 +20,7 @@ import "core-js/modules/es.array.concat.js";
|
|
|
20
20
|
|
|
21
21
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
22
22
|
|
|
23
|
-
import { getColor, getTransition } from '../utilities';
|
|
23
|
+
import { getColor, getRadius, getTransition } from '../utilities';
|
|
24
24
|
import { Icon } from './icon';
|
|
25
25
|
import React, { forwardRef } from 'react';
|
|
26
26
|
import PropTypes from 'prop-types';
|
|
@@ -77,7 +77,7 @@ var Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "productio
|
|
|
77
77
|
} : {
|
|
78
78
|
target: "e1blxzk90",
|
|
79
79
|
label: "Wrapper"
|
|
80
|
-
})(styles.transitions, ";", styles.buttonReset, ";position:relative;border:none;border-width:", componentVars.strokeSize, ";border-style:solid;border-radius:
|
|
80
|
+
})(styles.transitions, ";", styles.buttonReset, ";position:relative;border:none;border-width:", componentVars.strokeSize, ";border-style:solid;border-radius:", getRadius('s'), ";height:", componentVars.textBoxHeight, ";padding:0 ", paddingX, ";background-color:transparent;display:flex;align-items:center;justify-content:center;gap:12px;", function (p) {
|
|
81
81
|
return p.hasFullWidth && "width: 100%";
|
|
82
82
|
}, ";", function (p) {
|
|
83
83
|
return tagStyles[p.as];
|
|
@@ -89,7 +89,7 @@ var Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "productio
|
|
|
89
89
|
}, ";", styles.transitions, ";}.buttonText,.Icon{", function (_ref2) {
|
|
90
90
|
var hasSpinner = _ref2.hasSpinner;
|
|
91
91
|
return hasSpinner && "\n opacity: 0;\n transition: opacity ".concat(getTransition('fast'), ";\n ");
|
|
92
|
-
}, ";}.buttonSpinner{animation:", fadeIn, " ", getTransition('slow'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
92
|
+
}, ";}.buttonSpinner{animation:", fadeIn, " ", getTransition('slow'), ";}[data-experiment-rounded-button] &{border-radius:", componentVars.textBoxHeight, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0U2QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLi9pY29uJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHN0eWxlcywgY29tcG9uZW50VmFycyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyBTcGlubmVyIH0gZnJvbSAnLi9zcGlubmVyJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi9ib3gnO1xuaW1wb3J0IHsgVGV4dCB9IGZyb20gJy4vdGV4dCc7XG5pbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmNvbnN0IHBhZGRpbmdYID0gJzE2cHgnO1xuY29uc3QgaWNvbkludmVydCA9ICdoc2wodmFyKC0tSFMpIHZhcigtLWJhY2tncm91bmRMKSAvIHZhcigtLWZhZGUxMC1hKSknO1xuXG5jb25zdCB2YXJpYW50Q29sb3JzID0ge1xuICBhY2NlbnQ6IHtcbiAgICBpY29uOiBpY29uSW52ZXJ0LFxuICAgIGNvbnRlbnQ6ICdzaGFkZTInLFxuICAgIGJvcmRlcjogJ3RyYW5zcGFyZW50JyxcbiAgICBib3JkZXJIb3ZlcjogJ3RyYW5zcGFyZW50JyxcbiAgICBib3JkZXJBY3RpdmU6ICd0cmFuc3BhcmVudCcsXG4gICAgYmFja2dyb3VuZDogJ3NoYWRlMTInLFxuICAgIGJhY2tncm91bmRIb3ZlcjogJ3NoYWRlMTAnLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICdzaGFkZTknLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBpY29uOiAnaHNsKDAgMCUgMTAwJSAvIHZhcigtLWZhZGU4LWEpKScsXG4gICAgY29udGVudDogJ3ZhcigtLXdoaXRlKScsXG4gICAgYm9yZGVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJvcmRlckhvdmVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJvcmRlckFjdGl2ZTogJ3RyYW5zcGFyZW50JyxcbiAgICBiYWNrZ3JvdW5kOiAnZGFuZ2VyJyxcbiAgICBiYWNrZ3JvdW5kSG92ZXI6ICdoc2wodmFyKC0tcmVkSFMpIGNhbGModmFyKC0tcmVkTCkgKyA0JSkpJyxcbiAgICBiYWNrZ3JvdW5kQWN0aXZlOiAnaHNsKHZhcigtLXJlZEhTKSBjYWxjKHZhcigtLXJlZEwpICsgNyUpKScsXG4gIH0sXG4gIG5ldXRyYWw6IHtcbiAgICBpY29uOiAnaWNvbicsXG4gICAgY29udGVudDogJ2NvbnRlbnQnLFxuICAgIGJvcmRlcjogJ2ZhZGU0JyxcbiAgICBib3JkZXJIb3ZlcjogJ2ZhZGU2JyxcbiAgICBib3JkZXJBY3RpdmU6ICdzaGFkZTgnLFxuICAgIGJhY2tncm91bmQ6ICd0cmFuc3BhcmVudCcsXG4gICAgYmFja2dyb3VuZEhvdmVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICd0cmFuc3BhcmVudCcsXG4gIH0sXG59O1xuXG5jb25zdCBmYWRlSW4gPSBrZXlmcmFtZXNgXG4gIDAlLCAyNSUgeyBvcGFjaXR5OiAwIH1cbmA7XG5cbmNvbnN0IHRhZ1N0eWxlcyA9IHtcbiAgYTogYFxuICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICB3aWR0aDogZml0LWNvbnRlbnQ7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICB9XG4gIGAsXG4gIGJ1dHRvbjogYGAsXG4gIHNwYW46IGBcbiAgICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gICAgY3Vyc29yOiBwb2ludGVyO1xuICBgLFxufTtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuXG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYm9yZGVyOiBub25lO1xuICBib3JkZXItd2lkdGg6ICR7Y29tcG9uZW50VmFycy5zdHJva2VTaXplfTtcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gIGhlaWdodDogJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9O1xuICBwYWRkaW5nOiAwICR7cGFkZGluZ1h9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGdhcDogMTJweDtcbiAgJHtwID0+IHAuaGFzRnVsbFdpZHRoICYmIGB3aWR0aDogMTAwJWB9O1xuICAke3AgPT4gdGFnU3R5bGVzW3AuYXNdfTtcblxuICAkeyh7IHZhcmlhbnQgfSkgPT4gYFxuICAgIC0taWNvbkNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uaWNvbil9O1xuICAgIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlcil9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uY29udGVudCl9O1xuICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kKX07XG5cbiAgICBAbWVkaWEoaG92ZXI6IGhvdmVyKSB7XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgLS1pY29uQ29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgICAgICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJhY2tncm91bmRIb3Zlcil9O1xuICAgICAgICBib3JkZXItY29sb3I6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5ib3JkZXJIb3Zlcil9O1xuXG4gICAgICAgIC8vIHNldCBjb2xvciB0byBwcmV2ZW50IGluaGVyaXRpbmcgZnJvbSBvdXRpc2RlIHJlc2V0XG4gICAgICAgIGNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uY29udGVudCl9O1xuICAgICAgfVxuXG4gICAgICAmOmFjdGl2ZSB7XG4gICAgICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kQWN0aXZlKX07XG4gICAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlckFjdGl2ZSl9O1xuICAgICAgfVxuICAgIH1cbiAgYH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLWljb25Db2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRJY29uJyl9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRCYWNrZ3JvdW5kJyl9O1xuICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cblxuICAuSWNvbiB7XG4gICAgJHtwID0+IHAuaWNvblBvc2l0aW9uID09PSAncmlnaHQnICYmIGBvcmRlcjogMWB9O1xuICAgICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgfVxuXG4gIC5idXR0b25UZXh0LFxuICAuSWNvbiB7XG4gICAgJHsoeyBoYXNTcGlubmVyIH0pID0+XG4gICAgICBoYXNTcGlubmVyICYmXG4gICAgICBgXG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG4gICAgYH1cbiAgfVxuXG4gIC5idXR0b25TcGlubmVyIHtcbiAgICBhbmltYXRpb246ICR7ZmFkZUlufSAke2dldFRyYW5zaXRpb24oJ3Nsb3cnKX07XG4gIH1cblxuICBbZGF0YS1leHBlcmltZW50LXJvdW5kZWQtYnV0dG9uXSAmIHtcbiAgICBib3JkZXItcmFkaXVzOiAke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b24gPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgY2hpbGRyZW4sXG4gICAgICB2YXJpYW50ID0gJ25ldXRyYWwnLFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGljb24sXG4gICAgICBpY29uUG9zaXRpb24gPSAnbGVmdCcsXG4gICAgICBoYXNGdWxsV2lkdGgsXG4gICAgICBoYXNTcGlubmVyLFxuICAgICAgdHlwZSA9ICdidXR0b24nLFxuICAgICAgdGFnID0gJ2J1dHRvbicsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICByZXR1cm4gKFxuICAgICAgPFdyYXBwZXJcbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGljb249e2ljb259XG4gICAgICAgIGljb25Qb3NpdGlvbj17aWNvblBvc2l0aW9ufVxuICAgICAgICBoYXNGdWxsV2lkdGg9e2hhc0Z1bGxXaWR0aH1cbiAgICAgICAgaGFzU3Bpbm5lcj17aGFzU3Bpbm5lcn1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIGFzPXt0YWd9XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAge2hhc1NwaW5uZXIgJiYgKFxuICAgICAgICAgIDxCb3ggcG9zaXRpb249XCJhYnNvbHV0ZVwiIGNsYXNzTmFtZT1cImJ1dHRvblNwaW5uZXJcIj5cbiAgICAgICAgICAgIDxTcGlubmVyIGNvbG9yPVwiY3VycmVudENvbG9yXCIgLz5cbiAgICAgICAgICA8L0JveD5cbiAgICAgICAgKX1cbiAgICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gY29sb3I9XCJ2YXIoLS1pY29uQ29sb3IpXCIgLz59XG4gICAgICAgIDxUZXh0IGNsYXNzTmFtZT1cImJ1dHRvblRleHRcIj57Y2hpbGRyZW59PC9UZXh0PlxuICAgICAgPC9XcmFwcGVyPlxuICAgICk7XG4gIH0sXG4pO1xuXG5CdXR0b24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IFByb3BUeXBlcy5ub2RlLFxuICBpY29uUG9zaXRpb246IHR5cGVzLmljb25Qb3NpdGlvbixcbiAgdmFyaWFudDogdHlwZXMuYnV0dG9uVmFyaWFudCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBoYXNGdWxsV2lkdGg6IFByb3BUeXBlcy5ib29sLFxuICBoYXNTcGlubmVyOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogdHlwZXMuYnV0dG9uVHlwZSxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG59O1xuIl19 */"));
|
|
93
93
|
|
|
94
94
|
export var Button = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
95
95
|
var children = _ref3.children,
|
|
@@ -13,7 +13,7 @@ import "core-js/modules/es.object.keys.js";
|
|
|
13
13
|
import "core-js/modules/es.array.index-of.js";
|
|
14
14
|
import "core-js/modules/es.symbol.js";
|
|
15
15
|
import "core-js/modules/es.object.assign.js";
|
|
16
|
-
import { getColor, getTransition } from '../utilities';
|
|
16
|
+
import { getColor, getShadow, getTransition } from '../utilities';
|
|
17
17
|
import { Icon } from '.';
|
|
18
18
|
import React, { forwardRef } from 'react';
|
|
19
19
|
import PropTypes from 'prop-types';
|
|
@@ -22,36 +22,38 @@ import { styles, componentVars } from '../foundational';
|
|
|
22
22
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
23
23
|
var strokeSize = componentVars.strokeSize;
|
|
24
24
|
var width = "calc(".concat(componentVars.textBoxHeight, " + 2px)");
|
|
25
|
-
var height = "calc(".concat(componentVars.textBoxHeight, " - calc(").concat(strokeSize, " * 2))");
|
|
26
25
|
|
|
27
26
|
var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
28
27
|
target: "e9umpvt1"
|
|
29
28
|
} : {
|
|
30
29
|
target: "e9umpvt1",
|
|
31
30
|
label: "Wrapper"
|
|
32
|
-
})("display:flex;border:", strokeSize, " solid ", getColor('border2'), ";border-radius:var(--grn-radius-s);width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
31
|
+
})("display:flex;border:", strokeSize, " solid ", getColor('border2'), ";border-radius:var(--grn-radius-s);width:fit-content;[data-experiment-new-icontoggle] &{border:none;background:var(--grn-color-shade2);padding:2px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvaWNvbi10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNoYWRvdywgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBJY29uIH0gZnJvbSAnLic7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IHN0eWxlcywgY29tcG9uZW50VmFycyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IHN0cm9rZVNpemUgPSBjb21wb25lbnRWYXJzLnN0cm9rZVNpemU7XG5jb25zdCB3aWR0aCA9IGBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSArIDJweClgO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYm9yZGVyOiAke3N0cm9rZVNpemV9IHNvbGlkICR7Z2V0Q29sb3IoJ2JvcmRlcjInKX07XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtcyk7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcblxuICBbZGF0YS1leHBlcmltZW50LW5ldy1pY29udG9nZ2xlXSAmIHtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYmFja2dyb3VuZDogdmFyKC0tZ3JuLWNvbG9yLXNoYWRlMik7XG4gICAgcGFkZGluZzogMnB4O1xuICB9XG5gO1xuXG5jb25zdCBJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcbiAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0tZ3JuLWNvbG9yLWljb246IGN1cnJlbnRDb2xvcjtcbiAgLS1oZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gY2FsYygke3N0cm9rZVNpemV9ICogMikpO1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLWxlZnQ6ICR7c3Ryb2tlU2l6ZX0gc29saWQgdmFyKC0tYm9yZGVyQ29sb3IpO1xuICBwYWRkaW5nOiAwO1xuICBtaW4td2lkdGg6ICR7d2lkdGh9O1xuICBoZWlnaHQ6IHZhcigtLWhlaWdodCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudDInKX07XG4gIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignbGVhdmUnKX07XG5cbiAgJHsoeyBpc0FjdGl2ZSB9KSA9PlxuICAgIGlzQWN0aXZlICYmXG4gICAgYFxuICAgIGNvbG9yOiAke2dldENvbG9yKCdzZWxlY3Rpb24nKX07XG5cbiAgICBbZGF0YS1leHBlcmltZW50LW5ldy1pY29udG9nZ2xlXSAmIHtcbiAgICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignc2hhZGUxJyl9O1xuICAgICAgYm94LXNoYWRvdzogJHtnZXRTaGFkb3coJ3MtJyl9O1xuICAgIH1cbiAgYH07XG5cbiAgJjpob3ZlciB7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdob3ZlcicpfTtcbiAgICAkeyh7IGlzQWN0aXZlIH0pID0+XG4gICAgICAhaXNBY3RpdmUgJiZcbiAgICAgIGBcbiAgICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgIGB9O1xuICB9XG5cbiAgJjphY3RpdmUge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdzZWxlY3Rpb24nKX07XG4gIH1cblxuICAmICsgLkljb25Ub2dnbGUge1xuICAgIGJvcmRlci1jb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWJvcmRlcjIpO1xuICB9XG5cbiAgJjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuICAgIGJveC1zaGFkb3c6IDAgMCAwICR7c3Ryb2tlU2l6ZX0gdmFyKC0tYm9yZGVyQ29sb3IpO1xuXG4gICAgJHtwID0+XG4gICAgICBwLmlzQWN0aXZlICYmXG4gICAgICBgXG4gICAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2FjdGl2ZScpfTtcbiAgICBgfTtcbiAgfVxuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgbWluLXdpZHRoOiBjYWxjKCR7d2lkdGh9IC0gJHtzdHJva2VTaXplfSk7XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGU6YWZ0ZXIge1xuICAgIHdpZHRoOiBjYWxjKDEwMCUgKyAke3N0cm9rZVNpemV9KTtcbiAgICBsZWZ0OiAtJHtzdHJva2VTaXplfTtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ncm4tcmFkaXVzLXMpIDAgMCB2YXIoLS1ncm4tcmFkaXVzLXMpO1xuICB9XG5cbiAgJjpsYXN0LWNoaWxkOmFmdGVyIHtcbiAgICBib3JkZXItcmFkaXVzOiAwIHZhcigtLWdybi1yYWRpdXMtcykgdmFyKC0tZ3JuLXJhZGl1cy1zKSAwO1xuICB9XG5cbiAgLkljb24ge1xuICAgIHRyYW5zaXRpb246IHVuc2V0O1xuICB9XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctaWNvbnRvZ2dsZV0gJiB7XG4gICAgLS1oZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gNHB4KTtcbiAgICBib3JkZXItbGVmdDogdW5zZXQ7XG4gICAgYm9yZGVyLXJhZGl1czogY2FsYyh2YXIoLS1ncm4tcmFkaXVzLXMpIC0gMnB4KTtcblxuICAgICY6YWN0aXZlIHtcbiAgICAgIGNvbG9yOiAke2dldENvbG9yKCdjb250ZW50Jyl9O1xuICAgIH1cblxuICAgICR7KHsgaXNBY3RpdmUgfSkgPT5cbiAgICAgIGlzQWN0aXZlICYmXG4gICAgICBgXG4gICAgICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ3NoYWRlMScpfTtcbiAgYH07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBJY29uVG9nZ2xlID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgaWNvbiwgaXNBY3RpdmUsIG9uQ2xpY2ssIC4uLnByb3BzIH0sIHJlZikgPT4ge1xuICByZXR1cm4gKFxuICAgIDxJdGVtV3JhcHBlclxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIGNsYXNzTmFtZT1cIkljb25Ub2dnbGVcIlxuICAgICAgaXNBY3RpdmU9e2lzQWN0aXZlfVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSAvPn1cbiAgICAgIHtjaGlsZHJlbiAmJiBjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufSk7XG5cbmV4cG9ydCBjb25zdCBJY29uVG9nZ2xlR3JvdXAgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCAuLi5wcm9wcyB9LCByZWYpID0+IChcbiAgPFdyYXBwZXIgcmVmPXtyZWZ9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pKTtcblxuSWNvblRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxufTtcblxuSWNvblRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogdHlwZXMuaWNvbixcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
|
|
33
32
|
|
|
34
33
|
var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
|
|
35
34
|
target: "e9umpvt0"
|
|
36
35
|
} : {
|
|
37
36
|
target: "e9umpvt0",
|
|
38
37
|
label: "ItemWrapper"
|
|
39
|
-
})(styles.buttonReset, ";--borderColor:transparent;--grn-color-icon:currentColor;border:none;border-left:", strokeSize, " solid var(--borderColor);padding:0;min-width:", width, ";height:
|
|
38
|
+
})(styles.buttonReset, ";--borderColor:transparent;--grn-color-icon:currentColor;--height:calc(", componentVars.textBoxHeight, " - calc(", strokeSize, " * 2));border:none;border-left:", strokeSize, " solid var(--borderColor);padding:0;min-width:", width, ";height:var(--height);background-color:transparent;display:flex;align-items:center;justify-content:center;position:relative;color:", getColor('content2'), ";transition:", getTransition('leave'), ";", function (_ref) {
|
|
40
39
|
var isActive = _ref.isActive;
|
|
41
|
-
return isActive && "color: ".concat(getColor('selection'));
|
|
40
|
+
return isActive && "\n color: ".concat(getColor('selection'), ";\n\n [data-experiment-new-icontoggle] & {\n color: ").concat(getColor('content'), ";\n background: ").concat(getColor('shade1'), ";\n box-shadow: ").concat(getShadow('s-'), ";\n }\n ");
|
|
42
41
|
}, ";&:hover{transition:", getTransition('hover'), ";", function (_ref2) {
|
|
43
42
|
var isActive = _ref2.isActive;
|
|
44
43
|
return !isActive && "\n color: ".concat(getColor('content'), ";\n ");
|
|
45
44
|
}, ";}&:active{transition:", getTransition('active'), ";color:", getColor('selection'), ";}&+.IconToggle{border-color:var(--grn-color-border2);}&:after{content:'';pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;transition:", getTransition('leave'), ";box-shadow:0 0 0 ", strokeSize, " var(--borderColor);", function (p) {
|
|
46
45
|
return p.isActive && "\n transition: ".concat(getTransition('active'), ";\n ");
|
|
47
|
-
}, ";}&:first-of-type{min-width:calc(", width, " - ", strokeSize, ");}&:first-of-type:after{width:calc(100% + ", strokeSize, ");left:-", strokeSize, ";border-radius:var(--grn-radius-s) 0 0 var(--grn-radius-s);}&:last-child:after{border-radius:0 var(--grn-radius-s) var(--grn-radius-s) 0;}.Icon{transition:unset;}
|
|
46
|
+
}, ";}&:first-of-type{min-width:calc(", width, " - ", strokeSize, ");}&:first-of-type:after{width:calc(100% + ", strokeSize, ");left:-", strokeSize, ";border-radius:var(--grn-radius-s) 0 0 var(--grn-radius-s);}&:last-child:after{border-radius:0 var(--grn-radius-s) var(--grn-radius-s) 0;}.Icon{transition:unset;}[data-experiment-new-icontoggle] &{--height:calc(", componentVars.textBoxHeight, " - 4px);border-left:unset;border-radius:calc(var(--grn-radius-s) - 2px);", function (_ref3) {
|
|
47
|
+
var isActive = _ref3.isActive;
|
|
48
|
+
return isActive && "\n color: ".concat(getColor('content'), ";\n background: ").concat(getColor('shade1'), ";\n ");
|
|
49
|
+
}, ";&:active{color:", getColor('content'), ";}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRTaGFkb3csIGdldFRyYW5zaXRpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMsIGNvbXBvbmVudFZhcnMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBzdHJva2VTaXplID0gY29tcG9uZW50VmFycy5zdHJva2VTaXplO1xuY29uc3Qgd2lkdGggPSBgY2FsYygke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH0gKyAycHgpYDtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJvcmRlcjogJHtzdHJva2VTaXplfSBzb2xpZCAke2dldENvbG9yKCdib3JkZXIyJyl9O1xuICBib3JkZXItcmFkaXVzOiB2YXIoLS1ncm4tcmFkaXVzLXMpO1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctaWNvbnRvZ2dsZV0gJiB7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIGJhY2tncm91bmQ6IHZhcigtLWdybi1jb2xvci1zaGFkZTIpO1xuICAgIHBhZGRpbmc6IDJweDtcbiAgfVxuYDtcblxuY29uc3QgSXRlbVdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy5idXR0b25SZXNldH07XG4gIC0tYm9yZGVyQ29sb3I6IHRyYW5zcGFyZW50O1xuICAtLWdybi1jb2xvci1pY29uOiBjdXJyZW50Q29sb3I7XG4gIC0taGVpZ2h0OiBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSAtIGNhbGMoJHtzdHJva2VTaXplfSAqIDIpKTtcblxuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1sZWZ0OiAke3N0cm9rZVNpemV9IHNvbGlkIHZhcigtLWJvcmRlckNvbG9yKTtcbiAgcGFkZGluZzogMDtcbiAgbWluLXdpZHRoOiAke3dpZHRofTtcbiAgaGVpZ2h0OiB2YXIoLS1oZWlnaHQpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnQyJyl9O1xuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuXG4gICR7KHsgaXNBY3RpdmUgfSkgPT5cbiAgICBpc0FjdGl2ZSAmJlxuICAgIGBcbiAgICBjb2xvcjogJHtnZXRDb2xvcignc2VsZWN0aW9uJyl9O1xuXG4gICAgW2RhdGEtZXhwZXJpbWVudC1uZXctaWNvbnRvZ2dsZV0gJiB7XG4gICAgICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ3NoYWRlMScpfTtcbiAgICAgIGJveC1zaGFkb3c6ICR7Z2V0U2hhZG93KCdzLScpfTtcbiAgICB9XG4gIGB9O1xuXG4gICY6aG92ZXIge1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gICAgJHsoeyBpc0FjdGl2ZSB9KSA9PlxuICAgICAgIWlzQWN0aXZlICYmXG4gICAgICBgXG4gICAgICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgICBgfTtcbiAgfVxuXG4gICY6YWN0aXZlIHtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2FjdGl2ZScpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignc2VsZWN0aW9uJyl9O1xuICB9XG5cbiAgJiArIC5JY29uVG9nZ2xlIHtcbiAgICBib3JkZXItY29sb3I6IHZhcigtLWdybi1jb2xvci1ib3JkZXIyKTtcbiAgfVxuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICB0b3A6IDA7XG4gICAgbGVmdDogMDtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdsZWF2ZScpfTtcbiAgICBib3gtc2hhZG93OiAwIDAgMCAke3N0cm9rZVNpemV9IHZhcigtLWJvcmRlckNvbG9yKTtcblxuICAgICR7cCA9PlxuICAgICAgcC5pc0FjdGl2ZSAmJlxuICAgICAgYFxuICAgICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdhY3RpdmUnKX07XG4gICAgYH07XG4gIH1cblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgIG1pbi13aWR0aDogY2FsYygke3dpZHRofSAtICR7c3Ryb2tlU2l6ZX0pO1xuICB9XG5cbiAgJjpmaXJzdC1vZi10eXBlOmFmdGVyIHtcbiAgICB3aWR0aDogY2FsYygxMDAlICsgJHtzdHJva2VTaXplfSk7XG4gICAgbGVmdDogLSR7c3Ryb2tlU2l6ZX07XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXJhZGl1cy1zKSAwIDAgdmFyKC0tZ3JuLXJhZGl1cy1zKTtcbiAgfVxuXG4gICY6bGFzdC1jaGlsZDphZnRlciB7XG4gICAgYm9yZGVyLXJhZGl1czogMCB2YXIoLS1ncm4tcmFkaXVzLXMpIHZhcigtLWdybi1yYWRpdXMtcykgMDtcbiAgfVxuXG4gIC5JY29uIHtcbiAgICB0cmFuc2l0aW9uOiB1bnNldDtcbiAgfVxuXG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LWljb250b2dnbGVdICYge1xuICAgIC0taGVpZ2h0OiBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSAtIDRweCk7XG4gICAgYm9yZGVyLWxlZnQ6IHVuc2V0O1xuICAgIGJvcmRlci1yYWRpdXM6IGNhbGModmFyKC0tZ3JuLXJhZGl1cy1zKSAtIDJweCk7XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgICB9XG5cbiAgICAkeyh7IGlzQWN0aXZlIH0pID0+XG4gICAgICBpc0FjdGl2ZSAmJlxuICAgICAgYFxuICAgICAgY29sb3I6ICR7Z2V0Q29sb3IoJ2NvbnRlbnQnKX07XG4gICAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdzaGFkZTEnKX07XG4gIGB9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgSWNvblRvZ2dsZSA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGljb24sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8SXRlbVdyYXBwZXJcbiAgICAgIHJlZj17cmVmfVxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBjbGFzc05hbWU9XCJJY29uVG9nZ2xlXCJcbiAgICAgIGlzQWN0aXZlPXtpc0FjdGl2ZX1cbiAgICAgIG9uQ2xpY2s9e29uQ2xpY2t9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2ljb24gJiYgPEljb24gaWNvbj17aWNvbn0gLz59XG4gICAgICB7Y2hpbGRyZW4gJiYgY2hpbGRyZW59XG4gICAgPC9JdGVtV3JhcHBlcj5cbiAgKTtcbn0pO1xuXG5leHBvcnQgY29uc3QgSWNvblRvZ2dsZUdyb3VwID0gZm9yd2FyZFJlZigoeyBjaGlsZHJlbiwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxXcmFwcGVyIHJlZj17cmVmfSB7Li4ucHJvcHN9PlxuICAgIHtjaGlsZHJlbn1cbiAgPC9XcmFwcGVyPlxuKSk7XG5cbkljb25Ub2dnbGVHcm91cC5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbn07XG5cbkljb25Ub2dnbGUucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IHR5cGVzLmljb24sXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG59O1xuIl19 */"));
|
|
48
50
|
|
|
49
|
-
export var IconToggle = /*#__PURE__*/forwardRef(function (
|
|
50
|
-
var children =
|
|
51
|
-
icon =
|
|
52
|
-
isActive =
|
|
53
|
-
onClick =
|
|
54
|
-
props = _objectWithoutProperties(
|
|
51
|
+
export var IconToggle = /*#__PURE__*/forwardRef(function (_ref4, ref) {
|
|
52
|
+
var children = _ref4.children,
|
|
53
|
+
icon = _ref4.icon,
|
|
54
|
+
isActive = _ref4.isActive,
|
|
55
|
+
onClick = _ref4.onClick,
|
|
56
|
+
props = _objectWithoutProperties(_ref4, _excluded);
|
|
55
57
|
|
|
56
58
|
return ___EmotionJSX(ItemWrapper, _extends({
|
|
57
59
|
ref: ref,
|
|
@@ -63,9 +65,9 @@ export var IconToggle = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
|
63
65
|
icon: icon
|
|
64
66
|
}), children && children);
|
|
65
67
|
});
|
|
66
|
-
export var IconToggleGroup = /*#__PURE__*/forwardRef(function (
|
|
67
|
-
var children =
|
|
68
|
-
props = _objectWithoutProperties(
|
|
68
|
+
export var IconToggleGroup = /*#__PURE__*/forwardRef(function (_ref5, ref) {
|
|
69
|
+
var children = _ref5.children,
|
|
70
|
+
props = _objectWithoutProperties(_ref5, _excluded2);
|
|
69
71
|
|
|
70
72
|
return ___EmotionJSX(Wrapper, _extends({
|
|
71
73
|
ref: ref
|
|
@@ -13,7 +13,7 @@ import "core-js/modules/es.object.keys.js";
|
|
|
13
13
|
import "core-js/modules/es.array.index-of.js";
|
|
14
14
|
import "core-js/modules/es.symbol.js";
|
|
15
15
|
import "core-js/modules/es.object.assign.js";
|
|
16
|
-
import { getColor, getTransition } from '../utilities';
|
|
16
|
+
import { getColor, getRadius, getTransition } from '../utilities';
|
|
17
17
|
import React, { forwardRef } from 'react';
|
|
18
18
|
import PropTypes from 'prop-types';
|
|
19
19
|
import { styles, componentVars } from '../foundational';
|
|
@@ -29,16 +29,18 @@ var Wrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production"
|
|
|
29
29
|
return !p.hasFullWidth && "width: fit-content";
|
|
30
30
|
}, ";", function (p) {
|
|
31
31
|
return p.hasFullWidth && "\n .TextToggle {\n flex: 1 0 0;\n }\n ";
|
|
32
|
-
}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
32
|
+
}, " [data-experiment-new-texttoggle] &{background:", getColor('shade2'), ";border:none;border-radius:", getRadius('s'), ";padding:2px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFRMEIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdGV4dC10b2dnbGUuanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMsIGNvbXBvbmVudFZhcnMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBzdHJva2VTaXplID0gY29tcG9uZW50VmFycy5zdHJva2VTaXplO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgYm9yZGVyOiAke3N0cm9rZVNpemV9IHNvbGlkICR7Z2V0Q29sb3IoJ2JvcmRlcjInKX07XG4gIGdhcDogJHtzdHJva2VTaXplfTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuXG4gICR7cCA9PiAhcC5oYXNGdWxsV2lkdGggJiYgYHdpZHRoOiBmaXQtY29udGVudGB9O1xuICAke3AgPT5cbiAgICBwLmhhc0Z1bGxXaWR0aCAmJlxuICAgIGBcbiAgICAuVGV4dFRvZ2dsZSB7XG4gICAgICBmbGV4OiAxIDAgMDtcbiAgICB9XG4gIGB9XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctdGV4dHRvZ2dsZV0gJiB7XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignc2hhZGUyJyl9O1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItcmFkaXVzOiAke2dldFJhZGl1cygncycpfTtcbiAgICBwYWRkaW5nOiAycHg7XG4gIH1cbmA7XG5cbmNvbnN0IEl0ZW1XcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMuYnV0dG9uUmVzZXR9O1xuICAtLWJvcmRlckNvbG9yOiB0cmFuc3BhcmVudDtcbiAgLS1oZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gJHtzdHJva2VTaXplfSAqIDIpO1xuXG4gIGJvcmRlcjogbm9uZTtcbiAgcGFkZGluZzogMCAxNnB4O1xuICBoZWlnaHQ6IHZhcigtLWhlaWdodCk7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudDIpO1xuICBib3JkZXItcmFkaXVzOiAxMDAwcHg7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignbGVhdmUnKX07XG4gIGJveC1zaGFkb3c6IDAgMCAwICR7c3Ryb2tlU2l6ZX0gdmFyKC0tYm9yZGVyQ29sb3IpO1xuXG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiB2YXIoLS1ncm4tY29sb3ItY29udGVudCk7XG4gICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdob3ZlcicpfTtcbiAgfVxuXG4gICR7cCA9PlxuICAgIHAuaXNBY3RpdmUgJiZcbiAgICBgXG4gICAgLS1ib3JkZXJDb2xvcjogJHtjb21wb25lbnRWYXJzLmFjdGl2ZUJvcmRlckNvbG9yfTtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignYWN0aXZlJyl9O1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2FjdGl2ZScpfTtcbiAgICB9XG4gIGB9XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1uZXctdGV4dHRvZ2dsZV0gJiB7XG4gICAgLS1oZWlnaHQ6IGNhbGMoJHtjb21wb25lbnRWYXJzLnRleHRCb3hIZWlnaHR9IC0gNHB4KTtcbiAgICBib3JkZXItcmFkaXVzOiBjYWxjKCR7Z2V0UmFkaXVzKCdzJyl9IC0gMnB4KTtcbiAgICBib3gtc2hhZG93OiB1bnNldDtcblxuICAgICR7cCA9PlxuICAgICAgcC5pc0FjdGl2ZSAmJlxuICAgICAgYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvcignc2hhZGUxJyl9O1xuICBgfVxuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgVGV4dFRvZ2dsZSA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGlzQWN0aXZlLCBvbkNsaWNrLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8SXRlbVdyYXBwZXJcbiAgICAgIHJlZj17cmVmfVxuICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICBpc0FjdGl2ZT17aXNBY3RpdmV9XG4gICAgICBvbkNsaWNrPXtvbkNsaWNrfVxuICAgICAgY2xhc3NOYW1lPVwiVGV4dFRvZ2dsZVwiXG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvSXRlbVdyYXBwZXI+XG4gICk7XG59KTtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGVHcm91cCA9IGZvcndhcmRSZWYoKHsgY2hpbGRyZW4sIGhhc0Z1bGxXaWR0aCwgLi4ucHJvcHMgfSwgcmVmKSA9PiAoXG4gIDxXcmFwcGVyIHJlZj17cmVmfSBoYXNGdWxsV2lkdGg9e2hhc0Z1bGxXaWR0aH0gey4uLnByb3BzfT5cbiAgICB7Y2hpbGRyZW59XG4gIDwvV3JhcHBlcj5cbikpO1xuXG5UZXh0VG9nZ2xlR3JvdXAucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGhhc0Z1bGxXaWR0aDogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5UZXh0VG9nZ2xlLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxufTtcbiJdfQ== */"));
|
|
33
33
|
|
|
34
34
|
var ItemWrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
|
|
35
35
|
target: "e1fb3cwm0"
|
|
36
36
|
} : {
|
|
37
37
|
target: "e1fb3cwm0",
|
|
38
38
|
label: "ItemWrapper"
|
|
39
|
-
})(styles.buttonReset, ";--borderColor:transparent
|
|
39
|
+
})(styles.buttonReset, ";--borderColor:transparent;--height:calc(", componentVars.textBoxHeight, " - ", strokeSize, " * 2);border:none;padding:0 16px;height:var(--height);background-color:transparent;position:relative;color:var(--grn-color-content2);border-radius:1000px;white-space:nowrap;transition:", getTransition('leave'), ";box-shadow:0 0 0 ", strokeSize, " var(--borderColor);&:hover{color:var(--grn-color-content);transition:", getTransition('hover'), ";}", function (p) {
|
|
40
40
|
return p.isActive && "\n --borderColor: ".concat(componentVars.activeBorderColor, ";\n color: var(--grn-color-content);\n transition: ").concat(getTransition('active'), ";\n\n &:hover {\n transition: ").concat(getTransition('active'), ";\n }\n ");
|
|
41
|
-
}, "
|
|
41
|
+
}, " [data-experiment-new-texttoggle] &{--height:calc(", componentVars.textBoxHeight, " - 4px);border-radius:calc(", getRadius('s'), " - 2px);box-shadow:unset;", function (p) {
|
|
42
|
+
return p.isActive && "\n background-color: ".concat(getColor('shade1'), ";\n ");
|
|
43
|
+
}, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErQmlDIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL3RleHQtdG9nZ2xlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRSYWRpdXMsIGdldFRyYW5zaXRpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzLCBjb21wb25lbnRWYXJzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3Qgc3Ryb2tlU2l6ZSA9IGNvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZTtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJvcmRlcjogJHtzdHJva2VTaXplfSBzb2xpZCAke2dldENvbG9yKCdib3JkZXIyJyl9O1xuICBnYXA6ICR7c3Ryb2tlU2l6ZX07XG4gIGJvcmRlci1yYWRpdXM6IDEwMDBweDtcblxuICAke3AgPT4gIXAuaGFzRnVsbFdpZHRoICYmIGB3aWR0aDogZml0LWNvbnRlbnRgfTtcbiAgJHtwID0+XG4gICAgcC5oYXNGdWxsV2lkdGggJiZcbiAgICBgXG4gICAgLlRleHRUb2dnbGUge1xuICAgICAgZmxleDogMSAwIDA7XG4gICAgfVxuICBgfVxuXG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LXRleHR0b2dnbGVdICYge1xuICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ3NoYWRlMicpfTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICAgcGFkZGluZzogMnB4O1xuICB9XG5gO1xuXG5jb25zdCBJdGVtV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcbiAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0taGVpZ2h0OiBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSAtICR7c3Ryb2tlU2l6ZX0gKiAyKTtcblxuICBib3JkZXI6IG5vbmU7XG4gIHBhZGRpbmc6IDAgMTZweDtcbiAgaGVpZ2h0OiB2YXIoLS1oZWlnaHQpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQyKTtcbiAgYm9yZGVyLXJhZGl1czogMTAwMHB4O1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuICBib3gtc2hhZG93OiAwIDAgMCAke3N0cm9rZVNpemV9IHZhcigtLWJvcmRlckNvbG9yKTtcblxuICAmOmhvdmVyIHtcbiAgICBjb2xvcjogdmFyKC0tZ3JuLWNvbG9yLWNvbnRlbnQpO1xuICAgIHRyYW5zaXRpb246ICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gIH1cblxuICAke3AgPT5cbiAgICBwLmlzQWN0aXZlICYmXG4gICAgYFxuICAgIC0tYm9yZGVyQ29sb3I6ICR7Y29tcG9uZW50VmFycy5hY3RpdmVCb3JkZXJDb2xvcn07XG4gICAgY29sb3I6IHZhcigtLWdybi1jb2xvci1jb250ZW50KTtcbiAgICB0cmFuc2l0aW9uOiAke2dldFRyYW5zaXRpb24oJ2FjdGl2ZScpfTtcblxuICAgICY6aG92ZXIge1xuICAgICAgdHJhbnNpdGlvbjogJHtnZXRUcmFuc2l0aW9uKCdhY3RpdmUnKX07XG4gICAgfVxuICBgfVxuXG4gIFtkYXRhLWV4cGVyaW1lbnQtbmV3LXRleHR0b2dnbGVdICYge1xuICAgIC0taGVpZ2h0OiBjYWxjKCR7Y29tcG9uZW50VmFycy50ZXh0Qm94SGVpZ2h0fSAtIDRweCk7XG4gICAgYm9yZGVyLXJhZGl1czogY2FsYygke2dldFJhZGl1cygncycpfSAtIDJweCk7XG4gICAgYm94LXNoYWRvdzogdW5zZXQ7XG5cbiAgICAke3AgPT5cbiAgICAgIHAuaXNBY3RpdmUgJiZcbiAgICAgIGBcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMScpfTtcbiAgYH1cbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFRleHRUb2dnbGUgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBpc0FjdGl2ZSwgb25DbGljaywgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gIHJldHVybiAoXG4gICAgPEl0ZW1XcmFwcGVyXG4gICAgICByZWY9e3JlZn1cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgaXNBY3RpdmU9e2lzQWN0aXZlfVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICAgIGNsYXNzTmFtZT1cIlRleHRUb2dnbGVcIlxuICAgICAgey4uLnByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0l0ZW1XcmFwcGVyPlxuICApO1xufSk7XG5cbmV4cG9ydCBjb25zdCBUZXh0VG9nZ2xlR3JvdXAgPSBmb3J3YXJkUmVmKCh7IGNoaWxkcmVuLCBoYXNGdWxsV2lkdGgsIC4uLnByb3BzIH0sIHJlZikgPT4gKFxuICA8V3JhcHBlciByZWY9e3JlZn0gaGFzRnVsbFdpZHRoPXtoYXNGdWxsV2lkdGh9IHsuLi5wcm9wc30+XG4gICAge2NoaWxkcmVufVxuICA8L1dyYXBwZXI+XG4pKTtcblxuVGV4dFRvZ2dsZUdyb3VwLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBoYXNGdWxsV2lkdGg6IFByb3BUeXBlcy5ib29sLFxufTtcblxuVGV4dFRvZ2dsZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaXNBY3RpdmU6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbn07XG4iXX0= */"));
|
|
42
44
|
|
|
43
45
|
export var TextToggle = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
44
46
|
var children = _ref.children,
|
package/es/styles/base.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var base = "\n :root {\n --grn-lineHeight-fixed: 7px;\n --grn-lineHeight-relative: 0.9em;\n --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));\n\n --grn-font-global: 'Flodesk Sans', sans-serif;\n
|
|
1
|
+
var base = "\n :root {\n --grn-lineHeight-fixed: 7px;\n --grn-lineHeight-relative: 0.9em;\n --grn-lineHeight-global: calc(var(--grn-lineHeight-fixed) + var(--grn-lineHeight-relative));\n\n --grn-font-global: 'Flodesk Sans', sans-serif;\n }\n\n .grn-context,\n .grn-context * {\n line-height: var(--grn-lineHeight-global);\n outline-color: var(--grn-color-selection);\n }\n\n .grn-context {\n font-family: var(--grn-font-global);\n font-size: var(--grn-text-m);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n [data-theme],\n .grn-context {\n color: var(--grn-color-content);\n }\n\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n .grn-link-context a {\n transition: var(--grn-transition-slow);\n text-underline-position: under;\n text-underline-offset: calc(2px - 0.1em);\n color: inherit;\n cursor: pointer;\n text-decoration-color: var(--grn-color-fade3);\n }\n\n .grn-link-context a:hover {\n transition: var(--grn-transition-fast);\n text-decoration-color: currentColor;\n }\n\n .grn-link-context a:active {\n transition: var(--grn-transition-xxFast);\n }\n";
|
|
2
2
|
export default base;
|
package/es/styles/colors/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var core = "\n :root {\n --white: hsl(0 0% 100%);\n --H: 13.85;\n --S: 7%;\n --HS: var(--H) var(--S);\n --bfS: 20%;\n --wfS: calc(100% - var(--bfS));\n }\n\n :root {\n --redHS: 6 55%;\n --redL: 52%;\n\n --grn-color-blue: hsl(218 74% 54%);\n --grn-color-red: hsl(var(--redHS) var(--redL));\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
|
|
1
|
+
var core = "\n :root {\n --white: hsl(0 0% 100%);\n --H: 13.85;\n --S: 7%;\n --HS: var(--H) var(--S);\n --bfS: 20%;\n --wfS: calc(100% - var(--bfS));\n }\n\n :root {\n --redHS: 6 55%;\n --redL: 52%;\n\n --grn-color-blue: hsl(218 74% 54%);\n --grn-color-red: hsl(var(--redHS) var(--redL));\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(--H) var(--shade13-s) 10%);\n --grn-color-shadeTone12: hsl(var(--H) var(--shade12-s) 11.5%);\n --grn-color-shadeTone11: hsl(var(--H) var(--shade11-s) 15%);\n --grn-color-shadeTone10: hsl(var(--H) var(--shade10-s) 21%);\n --grn-color-shadeTone9: hsl(var(--H) var(--shade9-s) 28%);\n --grn-color-shadeTone8: hsl(var(--H) var(--shade8-s) 38%);\n --grn-color-shadeTone7: hsl(var(--H) var(--shade7-s) 51%);\n --grn-color-shadeTone6: hsl(var(--H) var(--shade6-s) 70%);\n --grn-color-shadeTone5: hsl(var(--H) var(--shade5-s) 82%);\n --grn-color-shadeTone4: hsl(var(--H) var(--shade4-s) 90%);\n --grn-color-shadeTone3: hsl(var(--H) var(--shade3-s) 95%);\n --grn-color-shadeTone2: hsl(var(--H) var(--shade2-s) 97.5%);\n --grn-color-shadeTone1: hsl(var(--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(--H) var(--fade-s) var(--wfS) / var(--fade10-a));\n --grn-color-lightFade9: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade9-a));\n --grn-color-lightFade8: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade8-a));\n --grn-color-lightFade7: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade7-a));\n --grn-color-lightFade6: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade6-a));\n --grn-color-lightFade5: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade5-a));\n --grn-color-lightFade4: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade4-a));\n --grn-color-lightFade3: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade3-a));\n --grn-color-lightFade2: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade2-a));\n --grn-color-lightFade1: hsl(var(--H) var(--fade-s) var(--wfS) / var(--fade1-a));\n\n --grn-color-darkFade10: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade10-a));\n --grn-color-darkFade9: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade9-a));\n --grn-color-darkFade8: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade8-a));\n --grn-color-darkFade7: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade7-a));\n --grn-color-darkFade6: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade6-a));\n --grn-color-darkFade5: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade5-a));\n --grn-color-darkFade4: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade4-a));\n --grn-color-darkFade3: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade3-a));\n --grn-color-darkFade2: hsl(var(--H) var(--fade-s) var(--bfS) / var(--fade2-a));\n --grn-color-darkFade1: hsl(var(--H) var(--fade-s) var(--bfS) / 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;
|
package/es/styles/variables.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var 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-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-space-betweenFormTitleAndContent: var(--grn-space-l);\n --grn-space-betweenFormContents: var(--grn-space-m);\n --grn-space-betweenFormContentAndActions: var(--grn-space-xl);\n --grn-space-betweenFormControlAndLabel: var(--grn-space-s);\n --grn-space-fieldPaddingX: 12px;\n\n --grn-color-fieldBorder: var(--grn-color-fade3);\n --grn-color-fieldBorderHover: var(--grn-color-fade6);\n --grn-color-fieldBorderFocus: var(--grn-color-shade9);\n --grn-color-fieldBorderDisabled: var(--grn-color-shade5);\n --grn-color-fieldBackgroundDisabled: var(--grn-color-shade2);\n --grn-color-backdrop: hsl(var(--H) 15% 10% / 0.6);\n\n --grn-transition-leave: var(--grn-transition-slow);\n --grn-transition-hover: var(--grn-transition-fast);\n --grn-transition-active: var(--grn-transition-xxFast);\n }\n";
|
|
1
|
+
var 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-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-space-betweenFormTitleAndContent: var(--grn-space-l);\n --grn-space-betweenFormContents: var(--grn-space-m);\n --grn-space-betweenFormContentAndActions: var(--grn-space-xl);\n --grn-space-betweenFormControlAndLabel: var(--grn-space-s);\n --grn-space-fieldPaddingX: 12px;\n\n --grn-color-fieldBorder: var(--grn-color-fade3);\n --grn-color-fieldBorderHover: var(--grn-color-fade6);\n --grn-color-fieldBorderFocus: var(--grn-color-shade9);\n --grn-color-fieldBorderDisabled: var(--grn-color-shade5);\n --grn-color-fieldBackgroundDisabled: var(--grn-color-shade2);\n --grn-color-backdrop: hsl(var(--H) 15% 10% / 0.6);\n\n --grn-transition-leave: var(--grn-transition-slow);\n --grn-transition-hover: var(--grn-transition-fast);\n --grn-transition-active: var(--grn-transition-xxFast);\n }\n\n :root [data-experiment-lighter-fields='true'],\n [data-theme][data-experiment-lighter-fields='true'] {\n --grn-color-fieldBorder: var(--grn-color-fade2);\n }\n";
|
|
2
2
|
export default variables;
|
package/package.json
CHANGED