@flodesk/grain 11.6.3 → 11.6.5
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/checkbox.js +3 -3
- package/es/styles/card.js +3 -2
- package/es/styles/variables.js +1 -1
- package/package.json +1 -1
|
@@ -12,7 +12,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
12
12
|
|
|
13
13
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
14
14
|
|
|
15
|
-
import { getColor,
|
|
15
|
+
import { getColor, getSpace, getTransition } from '../utilities';
|
|
16
16
|
import React from 'react';
|
|
17
17
|
import PropTypes from 'prop-types';
|
|
18
18
|
import { componentVars, FieldHint, FieldLabel } from '../foundational';
|
|
@@ -29,7 +29,7 @@ var CheckboxBoxInput = /*#__PURE__*/_styled("input", process.env.NODE_ENV === "p
|
|
|
29
29
|
} : {
|
|
30
30
|
target: "erxmy1h1",
|
|
31
31
|
label: "CheckboxBoxInput"
|
|
32
|
-
})("--checkColor:", getColor('shade2'), ";--backgroundColor:transparent;--backgroundColorActive:", getColor('shade12'), ";--borderColor:", getColor('shade6'), ";appearance:none;height:", size, "px;width:", size, "px;display:block;border-radius:
|
|
32
|
+
})("--checkColor:", getColor('shade2'), ";--backgroundColor:transparent;--backgroundColorActive:", getColor('shade12'), ";--borderColor:", getColor('shade6'), ";appearance:none;height:", size, "px;width:", size, "px;display:block;border-radius:3px;cursor:pointer;margin:0;position:relative;background-color:var(--backgroundColor);border:", strokeSize, " solid var(--borderColor);transition:border-color ", getTransition('leave'), ";&:hover{--borderColor:", getColor('shade12'), ";transition:border-color ", getTransition('hover'), ";}&:checked{--borderColor:var(--backgroundColorActive);--backgroundColor:var(--backgroundColorActive);}&:after{content:'';position:absolute;left:0;right:0;top:0;margin:auto;height:", checkHeight, "px;width:", checkWidth, "px;box-shadow:inset -", checkStroke, "px -", checkStroke, "px 0 var(--checkColor);display:block;transform:rotate(45deg);pointer-events:none;opacity:0;}&:checked:after{opacity:1;}&:disabled{--checkColor:", getColor('disabledContent'), ";--backgroundColor:", getColor('disabledBackground'), ";--backgroundColorActive:", getColor('disabledBackground'), ";--borderColor:transparent;pointer-events:none;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjcUMiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvY2hlY2tib3guanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNwYWNlLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgY29tcG9uZW50VmFycywgRmllbGRIaW50LCBGaWVsZExhYmVsIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBzaXplID0gMTY7XG5jb25zdCBjaGVja0hlaWdodCA9IHNpemUgLyAxLjY7XG5jb25zdCBjaGVja1dpZHRoID0gY2hlY2tIZWlnaHQgLyAxLjg7XG5jb25zdCBjaGVja1N0cm9rZSA9IDEuNTtcblxuY29uc3Qgc3Ryb2tlU2l6ZSA9IGNvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZTtcblxuY29uc3QgQ2hlY2tib3hCb3hJbnB1dCA9IHN0eWxlZC5pbnB1dGBcbiAgLS1jaGVja0NvbG9yOiAke2dldENvbG9yKCdzaGFkZTInKX07XG4gIC0tYmFja2dyb3VuZENvbG9yOiB0cmFuc3BhcmVudDtcbiAgLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmU6ICR7Z2V0Q29sb3IoJ3NoYWRlMTInKX07XG4gIC0tYm9yZGVyQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlNicpfTtcblxuICBhcHBlYXJhbmNlOiBub25lO1xuICBoZWlnaHQ6ICR7c2l6ZX1weDtcbiAgd2lkdGg6ICR7c2l6ZX1weDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6IDNweDtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBtYXJnaW46IDA7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yKTtcbiAgYm9yZGVyOiAke3N0cm9rZVNpemV9IHNvbGlkIHZhcigtLWJvcmRlckNvbG9yKTtcbiAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7Z2V0VHJhbnNpdGlvbignbGVhdmUnKX07XG5cbiAgJjpob3ZlciB7XG4gICAgLS1ib3JkZXJDb2xvcjogJHtnZXRDb2xvcignc2hhZGUxMicpfTtcbiAgICB0cmFuc2l0aW9uOiBib3JkZXItY29sb3IgJHtnZXRUcmFuc2l0aW9uKCdob3ZlcicpfTtcbiAgfVxuXG4gICY6Y2hlY2tlZCB7XG4gICAgLS1ib3JkZXJDb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yQWN0aXZlKTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogdmFyKC0tYmFja2dyb3VuZENvbG9yQWN0aXZlKTtcbiAgfVxuXG4gICY6YWZ0ZXIge1xuICAgIGNvbnRlbnQ6ICcnO1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBsZWZ0OiAwO1xuICAgIHJpZ2h0OiAwO1xuICAgIHRvcDogMDtcbiAgICBtYXJnaW46IGF1dG87XG4gICAgaGVpZ2h0OiAke2NoZWNrSGVpZ2h0fXB4O1xuICAgIHdpZHRoOiAke2NoZWNrV2lkdGh9cHg7XG4gICAgYm94LXNoYWRvdzogaW5zZXQgLSR7Y2hlY2tTdHJva2V9cHggLSR7Y2hlY2tTdHJva2V9cHggMCB2YXIoLS1jaGVja0NvbG9yKTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSg0NWRlZyk7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgb3BhY2l0eTogMDtcbiAgfVxuXG4gICY6Y2hlY2tlZDphZnRlciB7XG4gICAgb3BhY2l0eTogMTtcbiAgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0tY2hlY2tDb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRDb250ZW50Jyl9O1xuICAgIC0tYmFja2dyb3VuZENvbG9yOiAke2dldENvbG9yKCdkaXNhYmxlZEJhY2tncm91bmQnKX07XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3JBY3RpdmU6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQmFja2dyb3VuZCcpfTtcbiAgICAtLWJvcmRlckNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgQ2hlY2tib3hCb3ggPSAoeyBvbkNoYW5nZSA9ICgpID0+IHt9LCAuLi5wcm9wcyB9KSA9PiAoXG4gIDxDaGVja2JveEJveElucHV0IHsuLi5wcm9wc30gb25DaGFuZ2U9e29uQ2hhbmdlfSB0eXBlPVwiY2hlY2tib3hcIiAvPlxuKTtcblxuY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG4gICR7KHsgaGFzVGV4dCB9KSA9PlxuICAgIGhhc1RleHQgJiZcbiAgICBgXG4gICAgICBkaXNwbGF5OiBncmlkO1xuICAgICAgZ3JpZC1hdXRvLWZsb3c6IGNvbHVtbjtcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gICAgICBjb2x1bW4tZ2FwOiAke2dldFNwYWNlKCdiZXR3ZWVuRm9ybUNvbnRyb2xBbmRMYWJlbCcpfTtcbiAgICBgfVxuXG4gIC5jaGVja2JveEhpbnQsIC5jaGVja2JveExhYmVsIHtcbiAgICBncmlkLWNvbHVtbjogMiAvIDM7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaGVja2JveCA9ICh7IGlzRGlzYWJsZWQsIGlzQ2hlY2tlZCwgbGFiZWwsIGhpbnQsIGlkLCBvbkNoYW5nZSwgLi4ucHJvcHMgfSkgPT4ge1xuICByZXR1cm4gKFxuICAgIDxSb290IGhhc1RleHQ9e2xhYmVsIHx8IGhpbnR9IHsuLi5wcm9wc30+XG4gICAgICA8Q2hlY2tib3hCb3hcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGlkPXtpZH1cbiAgICAgICAgY2hlY2tlZD17aXNDaGVja2VkfVxuICAgICAgICBvbkNoYW5nZT17b25DaGFuZ2V9XG4gICAgICAvPlxuICAgICAge2xhYmVsICYmIChcbiAgICAgICAgPEZpZWxkTGFiZWwgaHRtbEZvcj17aWR9IGNsYXNzTmFtZT1cImNoZWNrYm94TGFiZWxcIj5cbiAgICAgICAgICB7bGFiZWx9XG4gICAgICAgIDwvRmllbGRMYWJlbD5cbiAgICAgICl9XG4gICAgICB7aGludCAmJiA8RmllbGRIaW50IGNsYXNzTmFtZT1cImNoZWNrYm94SGludFwiPntoaW50fTwvRmllbGRIaW50Pn1cbiAgICA8L1Jvb3Q+XG4gICk7XG59O1xuXG5DaGVja2JveC5MYWJlbCA9IEZpZWxkTGFiZWw7XG5DaGVja2JveC5Cb3ggPSBDaGVja2JveEJveDtcblxuQ2hlY2tib3gucHJvcFR5cGVzID0ge1xuICBpZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBvbkNoYW5nZTogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0NoZWNrZWQ6IFByb3BUeXBlcy5ib29sLFxuICBsYWJlbDogUHJvcFR5cGVzLnN0cmluZyxcbiAgaGludDogdHlwZXMuaGludCxcbn07XG4iXX0= */"));
|
|
33
33
|
|
|
34
34
|
var CheckboxBox = function CheckboxBox(_ref) {
|
|
35
35
|
var _ref$onChange = _ref.onChange,
|
|
@@ -50,7 +50,7 @@ var Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
|
50
50
|
})(function (_ref2) {
|
|
51
51
|
var hasText = _ref2.hasText;
|
|
52
52
|
return hasText && "\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n width: fit-content;\n column-gap: ".concat(getSpace('betweenFormControlAndLabel'), ";\n ");
|
|
53
|
-
}, " .checkboxHint,.checkboxLabel{grid-column:2/3;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
53
|
+
}, " .checkboxHint,.checkboxLabel{grid-column:2/3;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRXVCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2NoZWNrYm94LmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGdldENvbG9yLCBnZXRTcGFjZSwgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNvbXBvbmVudFZhcnMsIEZpZWxkSGludCwgRmllbGRMYWJlbCB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3Qgc2l6ZSA9IDE2O1xuY29uc3QgY2hlY2tIZWlnaHQgPSBzaXplIC8gMS42O1xuY29uc3QgY2hlY2tXaWR0aCA9IGNoZWNrSGVpZ2h0IC8gMS44O1xuY29uc3QgY2hlY2tTdHJva2UgPSAxLjU7XG5cbmNvbnN0IHN0cm9rZVNpemUgPSBjb21wb25lbnRWYXJzLnN0cm9rZVNpemU7XG5cbmNvbnN0IENoZWNrYm94Qm94SW5wdXQgPSBzdHlsZWQuaW5wdXRgXG4gIC0tY2hlY2tDb2xvcjogJHtnZXRDb2xvcignc2hhZGUyJyl9O1xuICAtLWJhY2tncm91bmRDb2xvcjogdHJhbnNwYXJlbnQ7XG4gIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdzaGFkZTEyJyl9O1xuICAtLWJvcmRlckNvbG9yOiAke2dldENvbG9yKCdzaGFkZTYnKX07XG5cbiAgYXBwZWFyYW5jZTogbm9uZTtcbiAgaGVpZ2h0OiAke3NpemV9cHg7XG4gIHdpZHRoOiAke3NpemV9cHg7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBib3JkZXItcmFkaXVzOiAzcHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgbWFyZ2luOiAwO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvcik7XG4gIGJvcmRlcjogJHtzdHJva2VTaXplfSBzb2xpZCB2YXIoLS1ib3JkZXJDb2xvcik7XG4gIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2dldFRyYW5zaXRpb24oJ2xlYXZlJyl9O1xuXG4gICY6aG92ZXIge1xuICAgIC0tYm9yZGVyQ29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMTInKX07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7Z2V0VHJhbnNpdGlvbignaG92ZXInKX07XG4gIH1cblxuICAmOmNoZWNrZWQge1xuICAgIC0tYm9yZGVyQ29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvckFjdGl2ZSk7XG4gICAgLS1iYWNrZ3JvdW5kQ29sb3I6IHZhcigtLWJhY2tncm91bmRDb2xvckFjdGl2ZSk7XG4gIH1cblxuICAmOmFmdGVyIHtcbiAgICBjb250ZW50OiAnJztcbiAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgbGVmdDogMDtcbiAgICByaWdodDogMDtcbiAgICB0b3A6IDA7XG4gICAgbWFyZ2luOiBhdXRvO1xuICAgIGhlaWdodDogJHtjaGVja0hlaWdodH1weDtcbiAgICB3aWR0aDogJHtjaGVja1dpZHRofXB4O1xuICAgIGJveC1zaGFkb3c6IGluc2V0IC0ke2NoZWNrU3Ryb2tlfXB4IC0ke2NoZWNrU3Ryb2tlfXB4IDAgdmFyKC0tY2hlY2tDb2xvcik7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgdHJhbnNmb3JtOiByb3RhdGUoNDVkZWcpO1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cblxuICAmOmNoZWNrZWQ6YWZ0ZXIge1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cblxuICAmOmRpc2FibGVkIHtcbiAgICAtLWNoZWNrQ29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQ29udGVudCcpfTtcbiAgICAtLWJhY2tncm91bmRDb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRCYWNrZ3JvdW5kJyl9O1xuICAgIC0tYmFja2dyb3VuZENvbG9yQWN0aXZlOiAke2dldENvbG9yKCdkaXNhYmxlZEJhY2tncm91bmQnKX07XG4gICAgLS1ib3JkZXJDb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IENoZWNrYm94Qm94ID0gKHsgb25DaGFuZ2UgPSAoKSA9PiB7fSwgLi4ucHJvcHMgfSkgPT4gKFxuICA8Q2hlY2tib3hCb3hJbnB1dCB7Li4ucHJvcHN9IG9uQ2hhbmdlPXtvbkNoYW5nZX0gdHlwZT1cImNoZWNrYm94XCIgLz5cbik7XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuICAkeyh7IGhhc1RleHQgfSkgPT5cbiAgICBoYXNUZXh0ICYmXG4gICAgYFxuICAgICAgZGlzcGxheTogZ3JpZDtcbiAgICAgIGdyaWQtYXV0by1mbG93OiBjb2x1bW47XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgICAgY29sdW1uLWdhcDogJHtnZXRTcGFjZSgnYmV0d2VlbkZvcm1Db250cm9sQW5kTGFiZWwnKX07XG4gICAgYH1cblxuICAuY2hlY2tib3hIaW50LCAuY2hlY2tib3hMYWJlbCB7XG4gICAgZ3JpZC1jb2x1bW46IDIgLyAzO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2hlY2tib3ggPSAoeyBpc0Rpc2FibGVkLCBpc0NoZWNrZWQsIGxhYmVsLCBoaW50LCBpZCwgb25DaGFuZ2UsIC4uLnByb3BzIH0pID0+IHtcbiAgcmV0dXJuIChcbiAgICA8Um9vdCBoYXNUZXh0PXtsYWJlbCB8fCBoaW50fSB7Li4ucHJvcHN9PlxuICAgICAgPENoZWNrYm94Qm94XG4gICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIGNoZWNrZWQ9e2lzQ2hlY2tlZH1cbiAgICAgICAgb25DaGFuZ2U9e29uQ2hhbmdlfVxuICAgICAgLz5cbiAgICAgIHtsYWJlbCAmJiAoXG4gICAgICAgIDxGaWVsZExhYmVsIGh0bWxGb3I9e2lkfSBjbGFzc05hbWU9XCJjaGVja2JveExhYmVsXCI+XG4gICAgICAgICAge2xhYmVsfVxuICAgICAgICA8L0ZpZWxkTGFiZWw+XG4gICAgICApfVxuICAgICAge2hpbnQgJiYgPEZpZWxkSGludCBjbGFzc05hbWU9XCJjaGVja2JveEhpbnRcIj57aGludH08L0ZpZWxkSGludD59XG4gICAgPC9Sb290PlxuICApO1xufTtcblxuQ2hlY2tib3guTGFiZWwgPSBGaWVsZExhYmVsO1xuQ2hlY2tib3guQm94ID0gQ2hlY2tib3hCb3g7XG5cbkNoZWNrYm94LnByb3BUeXBlcyA9IHtcbiAgaWQ6IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaXNDaGVja2VkOiBQcm9wVHlwZXMuYm9vbCxcbiAgbGFiZWw6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGhpbnQ6IHR5cGVzLmhpbnQsXG59O1xuIl19 */"));
|
|
54
54
|
|
|
55
55
|
export var Checkbox = function Checkbox(_ref3) {
|
|
56
56
|
var isDisabled = _ref3.isDisabled,
|
package/es/styles/card.js
CHANGED
|
@@ -32,7 +32,8 @@ export var cardRanges = [{
|
|
|
32
32
|
padding: 'xxl',
|
|
33
33
|
radius: 'l'
|
|
34
34
|
}];
|
|
35
|
-
var
|
|
35
|
+
var fallback = "\n @supports not (container-type: inline-size) {\n .grn-card {\n --grn-card-radius: var(--grn-radius-".concat(cardRanges[2].radius, ");\n --grn-card-padding: var(--grn-space-").concat(cardRanges[2].padding, ");\n }\n }\n");
|
|
36
|
+
var card = "\n .grn-card-container { container-type: inline-size }\n\n .grn-card {\n --grn-card-radius: var(--grn-radius-".concat(cardRanges[0].radius, ");\n --grn-card-padding: var(--grn-space-").concat(cardRanges[0].padding, ");\n }\n\n ").concat(cardRanges.map(function (range) {
|
|
36
37
|
return "\n @container (".concat(range.min, "px <= inline-size) {\n .grn-card {\n --grn-card-radius: var(--grn-radius-").concat(range.radius, ");\n --grn-card-padding: var(--grn-space-").concat(range.padding, ");\n }\n }\n ");
|
|
37
|
-
}).join(' '), "\n");
|
|
38
|
+
}).join(' '), "\n\n ").concat(fallback, "\n");
|
|
38
39
|
export default card;
|
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:
|
|
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";
|
|
2
2
|
export default variables;
|