@flodesk/grain 11.68.2 → 11.68.4
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
|
@@ -16,9 +16,10 @@ import { Box } from './box';
|
|
|
16
16
|
import { Text } from './text';
|
|
17
17
|
import { keyframes } from '@emotion/react';
|
|
18
18
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
19
|
+
const iconInvert = 'hsl(var(--sh-h) 12% var(--background-l) / var(--al-10))';
|
|
19
20
|
const variantColors = {
|
|
20
21
|
accent: {
|
|
21
|
-
icon:
|
|
22
|
+
icon: iconInvert,
|
|
22
23
|
content: 'shade2',
|
|
23
24
|
border: 'transparent',
|
|
24
25
|
background: 'shade12',
|
|
@@ -26,7 +27,7 @@ const variantColors = {
|
|
|
26
27
|
backgroundActive: 'shade9'
|
|
27
28
|
},
|
|
28
29
|
danger: {
|
|
29
|
-
icon: 'hsl(0 0% 100% / var(--
|
|
30
|
+
icon: 'hsl(0 0% 100% / var(--al-7))',
|
|
30
31
|
content: 'onBackgroundDanger',
|
|
31
32
|
border: 'transparent',
|
|
32
33
|
background: 'backgroundDanger',
|
|
@@ -78,7 +79,7 @@ const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "product
|
|
|
78
79
|
hasSpinner
|
|
79
80
|
} = _ref5;
|
|
80
81
|
return hasSpinner && "\n opacity: 0;\n transition: opacity ".concat(getTransition('fast'), ";\n ");
|
|
81
|
-
}, ";}.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,
|
|
82
|
+
}, ";}.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkQ2QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNwYWNlLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IFNwaW5uZXIgfSBmcm9tICcuL3NwaW5uZXInO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi90ZXh0JztcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuY29uc3QgaWNvbkludmVydCA9ICdoc2wodmFyKC0tc2gtaCkgMTIlIHZhcigtLWJhY2tncm91bmQtbCkgLyB2YXIoLS1hbC0xMCkpJztcblxuY29uc3QgdmFyaWFudENvbG9ycyA9IHtcbiAgYWNjZW50OiB7XG4gICAgaWNvbjogaWNvbkludmVydCxcbiAgICBjb250ZW50OiAnc2hhZGUyJyxcbiAgICBib3JkZXI6ICd0cmFuc3BhcmVudCcsXG4gICAgYmFja2dyb3VuZDogJ3NoYWRlMTInLFxuICAgIGJhY2tncm91bmRIb3ZlcjogJ3NoYWRlMTAnLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICdzaGFkZTknLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBpY29uOiAnaHNsKDAgMCUgMTAwJSAvIHZhcigtLWFsLTcpKScsXG4gICAgY29udGVudDogJ29uQmFja2dyb3VuZERhbmdlcicsXG4gICAgYm9yZGVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJhY2tncm91bmQ6ICdiYWNrZ3JvdW5kRGFuZ2VyJyxcbiAgICBiYWNrZ3JvdW5kSG92ZXI6ICdjb2xvci1taXgoaW4gaHNsLCB2YXIoLS1ncm4tY29sb3ItcmVkNyksIHZhcigtLWdybi1jb2xvci1yZWQ2KSknLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICdjb2xvci1taXgoaW4gaHNsLCB2YXIoLS1ncm4tY29sb3ItcmVkNiksIHZhcigtLWdybi1jb2xvci1yZWQ2KSknLFxuICB9LFxuICBuZXV0cmFsOiB7XG4gICAgaWNvbjogJ2ljb24nLFxuICAgIGNvbnRlbnQ6ICdjb250ZW50JyxcbiAgICBib3JkZXI6ICdmYWRlNCcsXG4gICAgYm9yZGVySG92ZXI6ICdmYWRlNicsXG4gICAgYm9yZGVyQWN0aXZlOiAnc2hhZGU4JyxcbiAgICBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLFxuICB9LFxufTtcblxuY29uc3QgZmFkZUluID0ga2V5ZnJhbWVzYFxuICAwJSwgMjUlIHsgb3BhY2l0eTogMCB9XG5gO1xuXG5jb25zdCB0YWdTdHlsZXMgPSB7XG4gIGE6IGBcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgfVxuICBgLFxuICBidXR0b246IGBgLFxuICBzcGFuOiBgXG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgYCxcbn07XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcblxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXdpZHRoOiB2YXIoLS1ncm4tYm9yZGVyLXNpemUpO1xuICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICBib3JkZXItcmFkaXVzOiAkeyh7IHNpemUgfSkgPT4gYHZhcigtLWdybi10ZXh0Ym94LXJhZGl1cy0ke3NpemV9KWB9O1xuICBoZWlnaHQ6ICR7KHsgc2l6ZSB9KSA9PiBgdmFyKC0tZ3JuLXRleHRib3gtaGVpZ2h0LSR7c2l6ZX0pYH07XG4gIHBhZGRpbmctYmxvY2s6IDA7XG4gIHBhZGRpbmctaW5saW5lOiAkeyh7IHNpemUgfSkgPT4gYHZhcigtLWdybi10ZXh0Ym94LXBhZGRpbmdYLSR7c2l6ZX0pYH07XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZ2FwOiAxMnB4O1xuICAke3AgPT4gcC5oYXNGdWxsV2lkdGggJiYgYHdpZHRoOiAxMDAlYH07XG4gICR7cCA9PiB0YWdTdHlsZXNbcC5hc119O1xuXG4gICR7KHsgdmFyaWFudCB9KSA9PiBgXG4gICAgLS1pY29uQ29sb3I6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5pY29uKX07XG4gICAgYm9yZGVyLWNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYm9yZGVyKX07XG4gICAgY29sb3I6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5jb250ZW50KX07XG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJhY2tncm91bmQpfTtcblxuICAgIEBtZWRpYShob3ZlcjogaG92ZXIpIHtcbiAgICAgICY6aG92ZXIge1xuICAgICAgICAtLWljb25Db2xvcjogY3VycmVudENvbG9yO1xuICAgICAgICAke1xuICAgICAgICAgIHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYmFja2dyb3VuZEhvdmVyICYmXG4gICAgICAgICAgYGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kSG92ZXIpfWBcbiAgICAgICAgfTtcbiAgICAgICAgJHtcbiAgICAgICAgICB2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlckhvdmVyICYmXG4gICAgICAgICAgYGJvcmRlci1jb2xvcjoke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYm9yZGVySG92ZXIpfWBcbiAgICAgICAgfTtcblxuICAgICAgICAvLyBzZXQgY29sb3IgdG8gcHJldmVudCBpbmhlcml0aW5nIGZyb20gb3V0aXNkZSByZXNldFxuICAgICAgICBjb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmNvbnRlbnQpfTtcbiAgICAgIH1cblxuICAgICAgJjphY3RpdmUge1xuICAgICAgICAke1xuICAgICAgICAgIHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYmFja2dyb3VuZEFjdGl2ZSAmJlxuICAgICAgICAgIGBiYWNrZ3JvdW5kOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYmFja2dyb3VuZEFjdGl2ZSl9YFxuICAgICAgICB9O1xuICAgICAgICAgJHtcbiAgICAgICAgICAgdmFyaWFudENvbG9yc1t2YXJpYW50XS5ib3JkZXJBY3RpdmUgJiZcbiAgICAgICAgICAgYGJvcmRlci1jb2xvcjoke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYm9yZGVyQWN0aXZlKX1gXG4gICAgICAgICB9O1xuICAgICAgfVxuICAgIH1cbiAgYH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLWljb25Db2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRJY29uJyl9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZENvbnRlbnQnKX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRCYWNrZ3JvdW5kJyl9O1xuICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cblxuICAuSWNvbiB7XG4gICAgJHtwID0+IHAuaWNvblBvc2l0aW9uID09PSAncmlnaHQnICYmIGBvcmRlcjogMWB9O1xuICAgICR7c3R5bGVzLnRyYW5zaXRpb25zfTtcbiAgfVxuXG4gIC5idXR0b25UZXh0LFxuICAuSWNvbiB7XG4gICAgJHsoeyBoYXNTcGlubmVyIH0pID0+XG4gICAgICBoYXNTcGlubmVyICYmXG4gICAgICBgXG4gICAgICBvcGFjaXR5OiAwO1xuICAgICAgdHJhbnNpdGlvbjogb3BhY2l0eSAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX07XG4gICAgYH1cbiAgfVxuXG4gIC5idXR0b25TcGlubmVyIHtcbiAgICBhbmltYXRpb246ICR7ZmFkZUlufSAke2dldFRyYW5zaXRpb24oJ3Nsb3cnKX07XG4gIH1cblxuICBbZGF0YS1leHBlcmltZW50LXJvdW5kZWQtYnV0dG9uXSAmIHtcbiAgICBib3JkZXItcmFkaXVzOiB2YXIoLS1ncm4tdGV4dGJveC1oZWlnaHQtbSk7XG4gIH1cblxuICBbZGF0YS1leHBlcmltZW50LWNvbXBhY3QtdGV4dGJveF0gJiB7XG4gICAgcGFkZGluZzogMCAke2dldFNwYWNlKCdzMicpfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IGZvcndhcmRSZWYoZnVuY3Rpb24gQnV0dG9uKFxuICB7XG4gICAgY2hpbGRyZW4sXG4gICAgdmFyaWFudCA9ICduZXV0cmFsJyxcbiAgICBpc0Rpc2FibGVkLFxuICAgIGljb24sXG4gICAgaWNvblBvc2l0aW9uID0gJ2xlZnQnLFxuICAgIGhhc0Z1bGxXaWR0aCxcbiAgICBoYXNTcGlubmVyLFxuICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICB0YWcgPSAnYnV0dG9uJyxcbiAgICBzaXplID0gJ20nLFxuICAgIC4uLnByb3BzXG4gIH0sXG4gIHJlZixcbikge1xuICByZXR1cm4gKFxuICAgIDxXcmFwcGVyXG4gICAgICB0eXBlPXt0eXBlfVxuICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgaWNvbj17aWNvbn1cbiAgICAgIGljb25Qb3NpdGlvbj17aWNvblBvc2l0aW9ufVxuICAgICAgaGFzRnVsbFdpZHRoPXtoYXNGdWxsV2lkdGh9XG4gICAgICBoYXNTcGlubmVyPXtoYXNTcGlubmVyfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBhcz17dGFnfVxuICAgICAgc2l6ZT17c2l6ZX1cbiAgICAgIHsuLi5wcm9wc31cbiAgICA+XG4gICAgICB7aGFzU3Bpbm5lciAmJiAoXG4gICAgICAgIDxCb3ggcG9zaXRpb249XCJhYnNvbHV0ZVwiIGNsYXNzTmFtZT1cImJ1dHRvblNwaW5uZXJcIj5cbiAgICAgICAgICA8U3Bpbm5lciBjb2xvcj1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICAgIDwvQm94PlxuICAgICAgKX1cbiAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IGNvbG9yPVwidmFyKC0taWNvbkNvbG9yKVwiIC8+fVxuICAgICAgPFRleHQgY2xhc3NOYW1lPVwiYnV0dG9uVGV4dFwiPntjaGlsZHJlbn08L1RleHQ+XG4gICAgPC9XcmFwcGVyPlxuICApO1xufSk7XG5cbkJ1dHRvbi5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb25Qb3NpdGlvbjogdHlwZXMuaWNvblBvc2l0aW9uLFxuICB2YXJpYW50OiB0eXBlcy5idXR0b25WYXJpYW50LFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGhhc0Z1bGxXaWR0aDogUHJvcFR5cGVzLmJvb2wsXG4gIGhhc1NwaW5uZXI6IFByb3BUeXBlcy5ib29sLFxuICB0eXBlOiB0eXBlcy5idXR0b25UeXBlLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbiAgc2l6ZTogUHJvcFR5cGVzLm9uZU9mKFsnbScsICdsJ10pLFxufTtcbiJdfQ== */"));
|
|
82
83
|
export const Button = /*#__PURE__*/forwardRef(function Button(_ref6, ref) {
|
|
83
84
|
let {
|
|
84
85
|
children,
|
package/es/components/spinner.js
CHANGED
|
@@ -18,7 +18,7 @@ const Wrapper = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "productio
|
|
|
18
18
|
} : {
|
|
19
19
|
target: "e1m87sp0",
|
|
20
20
|
label: "Wrapper"
|
|
21
|
-
})("--stroke:2px;height:", props => getDimension(props.size), ";width:", props => getDimension(props.size), ";display:block;position:relative;&:before{", circleStyles, ";border:var(--stroke) solid ", props => getColor(props.color), ";border-radius:100%;opacity:var(--
|
|
21
|
+
})("--stroke:2px;height:", props => getDimension(props.size), ";width:", props => getDimension(props.size), ";display:block;position:relative;&:before{", circleStyles, ";border:var(--stroke) solid ", props => getColor(props.color), ";border-radius:100%;opacity:var(--al-3);}&:after{", circleStyles, ";border:var(--stroke) solid transparent;border-left-color:", props => getColor(props.color), ";border-radius:100%;animation:", spin, " 1s linear infinite;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3NwaW5uZXIuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCMkIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvc3Bpbm5lci5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBnZXRDb2xvciwgZ2V0RGltZW5zaW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBzcGluID0ga2V5ZnJhbWVzYFxuICB0byB7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcbiAgfVxuYDtcblxuY29uc3QgY2lyY2xlU3R5bGVzID0gYFxuICBjb250ZW50OiAnJztcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBsZWZ0OiAwO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG5gO1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLnNwYW5gXG4gIC0tc3Ryb2tlOiAycHg7XG5cbiAgaGVpZ2h0OiAke3Byb3BzID0+IGdldERpbWVuc2lvbihwcm9wcy5zaXplKX07XG4gIHdpZHRoOiAke3Byb3BzID0+IGdldERpbWVuc2lvbihwcm9wcy5zaXplKX07XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgJjpiZWZvcmUge1xuICAgICR7Y2lyY2xlU3R5bGVzfTtcbiAgICBib3JkZXI6IHZhcigtLXN0cm9rZSkgc29saWQgJHtwcm9wcyA9PiBnZXRDb2xvcihwcm9wcy5jb2xvcil9O1xuICAgIGJvcmRlci1yYWRpdXM6IDEwMCU7XG4gICAgb3BhY2l0eTogdmFyKC0tYWwtMyk7XG4gIH1cblxuICAmOmFmdGVyIHtcbiAgICAke2NpcmNsZVN0eWxlc307XG4gICAgYm9yZGVyOiB2YXIoLS1zdHJva2UpIHNvbGlkIHRyYW5zcGFyZW50O1xuICAgIGJvcmRlci1sZWZ0LWNvbG9yOiAke3Byb3BzID0+IGdldENvbG9yKHByb3BzLmNvbG9yKX07XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICBhbmltYXRpb246ICR7c3Bpbn0gMXMgbGluZWFyIGluZmluaXRlO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lciA9IGZvcndhcmRSZWYoZnVuY3Rpb24gU3Bpbm5lcih7IHNpemUgPSAzLCBjb2xvciA9ICdjb250ZW50JywgLi4ucHJvcHMgfSwgcmVmKSB7XG4gIHJldHVybiA8V3JhcHBlciBjb2xvcj17Y29sb3J9IHNpemU9e3NpemV9IHJlZj17cmVmfSB7Li4ucHJvcHN9IC8+O1xufSk7XG5cblNwaW5uZXIucHJvcFR5cGVzID0ge1xuICBzaXplOiBQcm9wVHlwZXMubnVtYmVyLFxuICBjb2xvcjogdHlwZXMuY29sb3IsXG59O1xuIl19 */"));
|
|
22
22
|
export const Spinner = /*#__PURE__*/forwardRef(function Spinner(_ref, ref) {
|
|
23
23
|
let {
|
|
24
24
|
size = 3,
|
package/es/styles/colors/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const core = "\n :root {\n --sh-h: 60;\n --bf-
|
|
1
|
+
const core = "\n :root {\n --sh-h: 60;\n --bf-l: 20%;\n --wf-l: calc(100% - var(--bf-l));\n }\n\n :root {\n --grn-color-blue: var(--grn-color-blue6);\n --grn-color-red: var(--grn-color-red6);\n --grn-color-yellow: var(--grn-color-yellow5);\n --grn-color-green: var(--grn-color-green6);\n }\n\n :root {\n --grn-color-red1: hsl(12 100% 97%);\n --grn-color-red2: hsl(12 100% 91%);\n --grn-color-red3: hsl(12 100% 82%);\n --grn-color-red4: hsl(12 99% 72%);\n --grn-color-red5: hsl(12 99% 63%);\n --grn-color-red6: hsl(13 97% 51%);\n --grn-color-red7: hsl(13 97% 42%);\n --grn-color-red8: hsl(7 98% 35%);\n --grn-color-red9: hsl(7 98% 28%);\n --grn-color-red10: hsl(5 99% 21%);\n --grn-color-red11: hsl(1 100% 15%);\n --grn-color-red12: hsl(357 100% 8%);\n\n --grn-color-yellow1: hsl(46 100% 95%);\n --grn-color-yellow2: hsl(47 97% 85%);\n --grn-color-yellow3: hsl(49 93% 73%);\n --grn-color-yellow4: hsl(51 89% 62%);\n --grn-color-yellow5: hsl(53 84% 48%);\n --grn-color-yellow6: hsl(53 77% 43%);\n --grn-color-yellow7: hsl(52 68% 37%);\n --grn-color-yellow8: hsl(52 58% 35%);\n --grn-color-yellow9: hsl(52 49% 31%);\n --grn-color-yellow10: hsl(53 41% 26%);\n --grn-color-yellow11: hsl(54 34% 16%);\n --grn-color-yellow12: hsl(55 27% 8%);\n\n --grn-color-green1: hsl(97 58% 95%);\n --grn-color-green2: hsl(97 58% 88%);\n --grn-color-green3: hsl(95 55% 75%);\n --grn-color-green4: hsl(94 56% 62%);\n --grn-color-green5: hsl(92 51% 49%);\n --grn-color-green6: hsl(92 57% 42%);\n --grn-color-green7: hsl(92 60% 38%);\n --grn-color-green8: hsl(92 64% 34%);\n --grn-color-green9: hsl(92 73% 27%);\n --grn-color-green10: hsl(92 85% 21%);\n --grn-color-green11: hsl(92 94% 13%);\n --grn-color-green12: hsl(92 100% 8%);\n\n --grn-color-blue1: hsl(215 100% 96%);\n --grn-color-blue2: hsl(215 100% 90%);\n --grn-color-blue3: hsl(216 96% 82%);\n --grn-color-blue4: hsl(218 93% 71%);\n --grn-color-blue5: hsl(218 89% 59%);\n --grn-color-blue6: hsl(219 91% 48%);\n --grn-color-blue7: hsl(219 91% 41%);\n --grn-color-blue8: hsl(220 92% 35%);\n --grn-color-blue9: hsl(220 92% 29%);\n --grn-color-blue10: hsl(220 95% 22%);\n --grn-color-blue11: hsl(220 95% 15%);\n --grn-color-blue12: hsl(220 96% 9%);\n }\n\n :root {\n --core-s13: 3%;\n --core-s12: 3%;\n --core-s11: 3%;\n --core-s10: 3%;\n --core-s9: 3%;\n --core-s8: 4%;\n --core-s7: 5%;\n --core-s6: 8%;\n --core-s5: 9%;\n --core-s4: 12%;\n --core-s3: 14%;\n --core-s2: 18%;\n --core-s1: 18%;\n }\n\n :root {\n --sh-s13: var(--core-s13);\n --sh-s12: var(--core-s12);\n --sh-s11: var(--core-s11);\n --sh-s10: var(--core-s10);\n --sh-s9: var(--core-s9);\n --sh-s8: var(--core-s8);\n --sh-s7: var(--core-s7);\n --sh-s6: var(--core-s6);\n --sh-s5: var(--core-s5);\n --sh-s4: var(--core-s4);\n --sh-s3: var(--core-s3);\n --sh-s2: var(--core-s2);\n --sh-s1: var(--core-s1);\n }\n\n [data-theme='dark'], [data-theme='invert'] {\n --sh-s13: var(--core-s1);\n --sh-s12: var(--core-s2);\n --sh-s11: var(--core-s3);\n --sh-s10: var(--core-s4);\n --sh-s9: var(--core-s5);\n --sh-s8: var(--core-s6);\n --sh-s7: var(--core-s7);\n --sh-s6: var(--core-s8);\n --sh-s5: var(--core-s9);\n --sh-s4: var(--core-s10);\n --sh-s3: var(--core-s11);\n --sh-s2: var(--core-s12);\n --sh-s1: var(--core-s13);\n }\n\n :root {\n --grn-color-shadeTone13: hsl(var(--sh-h) var(--sh-s13) 0%);\n --grn-color-shadeTone12: hsl(var(--sh-h) var(--sh-s12) 6%);\n --grn-color-shadeTone11: hsl(var(--sh-h) var(--sh-s11) 15%);\n --grn-color-shadeTone10: hsl(var(--sh-h) var(--sh-s10) 21%);\n --grn-color-shadeTone9: hsl(var(--sh-h) var(--sh-s9) 28%);\n --grn-color-shadeTone8: hsl(var(--sh-h) var(--sh-s8) 38%);\n --grn-color-shadeTone7: hsl(var(--sh-h) var(--sh-s7) 51%);\n --grn-color-shadeTone6: hsl(var(--sh-h) var(--sh-s6) 70%);\n --grn-color-shadeTone5: hsl(var(--sh-h) var(--sh-s5) 82%);\n --grn-color-shadeTone4: hsl(var(--sh-h) var(--sh-s4) 90%);\n --grn-color-shadeTone3: hsl(var(--sh-h) var(--sh-s3) 95%);\n --grn-color-shadeTone2: hsl(var(--sh-h) var(--sh-s2) 97.5%);\n --grn-color-shadeTone1: hsl(var(--sh-h) var(--sh-s1) 100%);\n\n --al-10: 73%;\n --al-9: 66%;\n --al-8: 59%;\n --al-7: 52%;\n --al-6: 45%;\n --al-5: 38%;\n --al-4: 31%;\n --al-3: 23%;\n --al-2: 15%;\n --al-1: 8%;\n\n --grn-color-lightFade10: hsl(var(--sh-h) 14% var(--wf-l) / var(--al-10));\n --grn-color-lightFade9: hsl(var(--sh-h) 14% var(--wf-l) / var(--al-9));\n --grn-color-lightFade8: hsl(var(--sh-h) 14% var(--wf-l) / var(--al-8));\n --grn-color-lightFade7: hsl(var(--sh-h) 14% var(--wf-l) / var(--al-7));\n --grn-color-lightFade6: hsl(var(--sh-h) 14% var(--wf-l) / var(--al-6));\n --grn-color-lightFade5: hsl(var(--sh-h) 13% var(--wf-l) / var(--al-5));\n --grn-color-lightFade4: hsl(var(--sh-h) 12% var(--wf-l) / var(--al-4));\n --grn-color-lightFade3: hsl(var(--sh-h) 11% var(--wf-l) / var(--al-3));\n --grn-color-lightFade2: hsl(var(--sh-h) 10% var(--wf-l) / var(--al-2));\n --grn-color-lightFade1: hsl(var(--sh-h) 9% var(--wf-l) / var(--al-1));\n\n --grn-color-darkFade10: hsl(var(--sh-h) 9% var(--bf-l) / var(--al-10));\n --grn-color-darkFade9: hsl(var(--sh-h) 10% var(--bf-l) / var(--al-9));\n --grn-color-darkFade8: hsl(var(--sh-h) 11% var(--bf-l) / var(--al-8));\n --grn-color-darkFade7: hsl(var(--sh-h) 12% var(--bf-l) / var(--al-7));\n --grn-color-darkFade6: hsl(var(--sh-h) 13% var(--bf-l) / var(--al-6));\n --grn-color-darkFade5: hsl(var(--sh-h) 14% var(--bf-l) / var(--al-5));\n --grn-color-darkFade4: hsl(var(--sh-h) 14% var(--bf-l) / var(--al-4));\n --grn-color-darkFade3: hsl(var(--sh-h) 14% var(--bf-l) / var(--al-3));\n --grn-color-darkFade2: hsl(var(--sh-h) 14% var(--bf-l) / var(--al-2));\n --grn-color-darkFade1: hsl(var(--sh-h) 14% var(--bf-l) / var(--al-1));\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-blue6);\n }\n";
|
|
2
2
|
export default core;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const theme = "\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 [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 :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-
|
|
1
|
+
const theme = "\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 [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 :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-l);\n --grn-color-floatingBackground: var(--grn-color-shade1);\n }\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-l);\n --grn-color-floatingBackground: var(--grn-color-shade2);\n }\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\n --grn-color-icon: var(--grn-color-fade7);\n --grn-color-iconDanger: color-mix(in hsl, var(--grn-color-contentDanger), transparent 48%);\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 --grn-color-backdrop: color-mix(in hsl, var(--grn-color-shadeTone12), transparent 40%);\n\n --grn-color-border: color-mix(in hsl, var(--grn-color-shade10), transparent 88%);\n --grn-color-border2: color-mix(in hsl, var(--grn-color-shade10), transparent 80%);\n\n --grn-color-overlay: var(--grn-color-fade1);\n --grn-color-overlay2: var(--grn-color-fade2);\n\n --grn-color-overlayDanger: color-mix(in hsl, var(--grn-color-red7), transparent 89%);\n --grn-color-overlayDanger2: color-mix(in hsl, var(--grn-color-red7), transparent 82%);\n }\n\n [data-theme='dark'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-iconDanger: color-mix(in hsl, var(--grn-color-red5), transparent 40%);\n }\n\n :root,\n [data-theme] {\n --grn-color-contentDanger: var(--grn-color-red7);\n --grn-color-backgroundDanger: var(--grn-color-red7);\n --grn-color-onBackgroundDanger: var(--grn-color-red1);\n --grn-color-backgroundDangerSubtle: var(--grn-color-red2);\n --grn-color-onBackgroundDangerSubtle: var(--grn-color-red10);\n\n --grn-color-contentWarning: var(--grn-color-yellow10);\n --grn-color-backgroundWarning: var(--grn-color-yellow4);\n --grn-color-onBackgroundWarning: var(--grn-color-yellow11);\n --grn-color-backgroundWarningSubtle: var(--grn-color-yellow2);\n --grn-color-onBackgroundWarningSubtle: var(--grn-color-yellow11);\n\n --grn-color-contentSuccess: var(--grn-color-green10);\n --grn-color-backgroundSuccess: var(--grn-color-green9);\n --grn-color-onBackgroundSuccess: var(--grn-color-green1);\n --grn-color-backgroundSuccessSubtle: var(--grn-color-green2);\n --grn-color-onBackgroundSuccessSubtle: var(--grn-color-green11);\n\n --grn-color-contentInfo: var(--grn-color-blue7);\n --grn-color-backgroundInfo: var(--grn-color-blue6);\n --grn-color-onBackgroundInfo: var(--grn-color-blue1);\n --grn-color-backgroundInfoSubtle: var(--grn-color-blue2);\n --grn-color-onBackgroundInfoSubtle: var(--grn-color-blue10);\n }\n\n [data-theme='dark'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-contentInfo: var(--grn-color-blue5);\n --grn-color-backgroundInfoSubtle: var(--grn-color-blue11);\n --grn-color-onBackgroundInfoSubtle: var(--grn-color-blue1);\n\n --grn-color-contentSuccess: var(--grn-color-green5);\n --grn-color-backgroundSuccessSubtle: var(--grn-color-green11);\n --grn-color-onBackgroundSuccessSubtle: var(--grn-color-green1);\n\n --grn-color-contentWarning: var(--grn-color-yellow5);\n --grn-color-backgroundWarningSubtle: var(--grn-color-yellow11);\n --grn-color-onBackgroundWarningSubtle: var(--grn-color-yellow1);\n\n --grn-color-contentDanger: var(--grn-color-red5);\n --grn-color-backgroundDangerSubtle: var(--grn-color-red11);\n --grn-color-onBackgroundDangerSubtle: var(--grn-color-red1);\n }\n\n [data-experiment-darker-content-2-and-3=\"true\"] {\n --grn-color-content2: hsl(var(--sh-h) 12% var(--content-l) / 67%);\n --grn-color-content3: hsl(var(--sh-h) 12% var(--content-l) / 42%);\n }\n";
|
|
2
2
|
export default theme;
|