@flodesk/grain 10.12.2 → 10.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/es/components/button.js
CHANGED
|
@@ -77,12 +77,12 @@ var Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "productio
|
|
|
77
77
|
}, ";", function (_ref) {
|
|
78
78
|
var variant = _ref.variant;
|
|
79
79
|
return "\n ".concat(variantColors[variant].icon && "\n --grn-color-icon: ".concat(getColor(variantColors[variant].icon), "\n "), ";\n border-color: ").concat(getColor(variantColors[variant].border), ";\n color: ").concat(getColor(variantColors[variant].content), ";\n background: ").concat(getColor(variantColors[variant].background), ";\n\n &:hover {\n --grn-color-icon: currentColor;\n background: ").concat(getColor(variantColors[variant].backgroundHover), ";\n border-color: ").concat(getColor(variantColors[variant].borderHover), ";\n\n // set color to prevent inheriting from outisde reset\n color: ").concat(getColor(variantColors[variant].content), ";\n }\n\n &:active {\n background: ").concat(getColor(variantColors[variant].backgroundActive), ";\n border-color: ").concat(getColor(variantColors[variant].borderActive), ";\n }\n ");
|
|
80
|
-
}, " &:disabled{--grn-color-icon:", getColor('
|
|
80
|
+
}, " &:disabled{--grn-color-icon:", getColor('disabledIcon'), ";color:", getColor('disabledContent'), ";background-color:", getColor('disabledBackground'), ";border-color:transparent;pointer-events:none;}.Icon{", function (p) {
|
|
81
81
|
return p.iconPosition === 'right' && "order: 1";
|
|
82
82
|
}, ";", styles.transitions, ";}.buttonText,.Icon{", function (_ref2) {
|
|
83
83
|
var hasSpinner = _ref2.hasSpinner;
|
|
84
84
|
return hasSpinner && "\n opacity: 0;\n transition: opacity ".concat(getTransition('fast'), ";\n ");
|
|
85
|
-
}, ";}.buttonSpinner{animation:", fadeIn, " ", getTransition('slow'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
85
|
+
}, ";}.buttonSpinner{animation:", fadeIn, " ", getTransition('slow'), ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkQ2QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFRyYW5zaXRpb24gfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyBzdHlsZXMsIGNvbXBvbmVudFZhcnMgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuaW1wb3J0IHsgU3Bpbm5lciB9IGZyb20gJy4vc3Bpbm5lcic7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IEJveCB9IGZyb20gJy4vYm94JztcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuL3RleHQnO1xuaW1wb3J0IHsga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5jb25zdCBwYWRkaW5nWCA9ICcxNnB4JztcbmNvbnN0IGljb25JbnZlcnQgPSAnaHNsKHZhcigtLUhTKSB2YXIoLS1iYWNrZ3JvdW5kTCkgLyB2YXIoLS1mYWRlQTgpKSc7XG5cbmNvbnN0IHZhcmlhbnRDb2xvcnMgPSB7XG4gIGFjY2VudDoge1xuICAgIGljb246IGljb25JbnZlcnQsXG4gICAgY29udGVudDogJ3NoYWRlMicsXG4gICAgYm9yZGVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJhY2tncm91bmQ6ICdzaGFkZTEyJyxcbiAgICBiYWNrZ3JvdW5kSG92ZXI6ICdzaGFkZTEwJyxcbiAgICBiYWNrZ3JvdW5kQWN0aXZlOiAnc2hhZGU5JyxcbiAgfSxcbiAgZGFuZ2VyOiB7XG4gICAgaWNvbjogJ2hzbCgwIDAlIDEwMCUgLyB2YXIoLS1mYWRlQTgpKScsXG4gICAgY29udGVudDogJ3ZhcigtLXdoaXRlKScsXG4gICAgYm9yZGVyOiAndHJhbnNwYXJlbnQnLFxuICAgIGJhY2tncm91bmQ6ICdkYW5nZXInLFxuICAgIGJhY2tncm91bmRIb3ZlcjogJ2hzbCh2YXIoLS1yZWRIUykgY2FsYyh2YXIoLS1yZWRMKSArIDQlKSknLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICdoc2wodmFyKC0tcmVkSFMpIGNhbGModmFyKC0tcmVkTCkgKyA3JSkpJyxcbiAgfSxcbiAgbmV1dHJhbDoge1xuICAgIGNvbnRlbnQ6ICdjb250ZW50JyxcbiAgICBib3JkZXI6ICdmYWRlNCcsXG4gICAgYm9yZGVySG92ZXI6ICdmYWRlNicsXG4gICAgYm9yZGVyQWN0aXZlOiAnc2hhZGU4JyxcbiAgICBiYWNrZ3JvdW5kOiAndHJhbnNwYXJlbnQnLFxuICB9LFxufTtcblxuY29uc3QgZmFkZUluID0ga2V5ZnJhbWVzYFxuICAwJSwgMjUlIHsgb3BhY2l0eTogMCB9XG5gO1xuXG5jb25zdCB0YWdTdHlsZXMgPSB7XG4gIGE6IGBcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuXG4gICAgJjpob3ZlciB7XG4gICAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgfVxuICBgLFxuICBidXR0b246IGBgLFxuICBzcGFuOiBgXG4gICAgd2lkdGg6IGZpdC1jb250ZW50O1xuICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgYCxcbn07XG5cbmNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuYnV0dG9uYFxuICAke3N0eWxlcy50cmFuc2l0aW9uc307XG4gICR7c3R5bGVzLmJ1dHRvblJlc2V0fTtcblxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJvcmRlcjogbm9uZTtcbiAgYm9yZGVyLXdpZHRoOiAke2NvbXBvbmVudFZhcnMuc3Ryb2tlU2l6ZX07XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLWdybi1yYWRpdXMtYnV0dG9uKTtcbiAgaGVpZ2h0OiAke2NvbXBvbmVudFZhcnMudGV4dEJveEhlaWdodH07XG4gIHBhZGRpbmc6IDAgJHtwYWRkaW5nWH07XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZ2FwOiAxMnB4O1xuICAke3AgPT4gcC5oYXNGdWxsV2lkdGggJiYgYHdpZHRoOiAxMDAlYH07XG4gICR7cCA9PiB0YWdTdHlsZXNbcC5hc119O1xuXG4gICR7KHsgdmFyaWFudCB9KSA9PiBgXG4gICAgJHtcbiAgICAgIHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uaWNvbiAmJlxuICAgICAgYFxuICAgICAgLS1ncm4tY29sb3ItaWNvbjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmljb24pfVxuICAgIGBcbiAgICB9O1xuICAgIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlcil9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uY29udGVudCl9O1xuICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kKX07XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIC0tZ3JuLWNvbG9yLWljb246IGN1cnJlbnRDb2xvcjtcbiAgICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kSG92ZXIpfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlckhvdmVyKX07XG5cbiAgICAgIC8vIHNldCBjb2xvciB0byBwcmV2ZW50IGluaGVyaXRpbmcgZnJvbSBvdXRpc2RlIHJlc2V0XG4gICAgICBjb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmNvbnRlbnQpfTtcbiAgICB9XG5cbiAgICAmOmFjdGl2ZSB7XG4gICAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYmFja2dyb3VuZEFjdGl2ZSl9O1xuICAgICAgYm9yZGVyLWNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYm9yZGVyQWN0aXZlKX07XG4gICAgfVxuICBgfVxuXG4gICY6ZGlzYWJsZWQge1xuICAgIC0tZ3JuLWNvbG9yLWljb246ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkSWNvbicpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRDb250ZW50Jyl9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQmFja2dyb3VuZCcpfTtcbiAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5cbiAgLkljb24ge1xuICAgICR7cCA9PiBwLmljb25Qb3NpdGlvbiA9PT0gJ3JpZ2h0JyAmJiBgb3JkZXI6IDFgfTtcbiAgICAke3N0eWxlcy50cmFuc2l0aW9uc307XG4gIH1cblxuICAuYnV0dG9uVGV4dCxcbiAgLkljb24ge1xuICAgICR7KHsgaGFzU3Bpbm5lciB9KSA9PlxuICAgICAgaGFzU3Bpbm5lciAmJlxuICAgICAgYFxuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuICAgIGB9XG4gIH1cblxuICAuYnV0dG9uU3Bpbm5lciB7XG4gICAgYW5pbWF0aW9uOiAke2ZhZGVJbn0gJHtnZXRUcmFuc2l0aW9uKCdzbG93Jyl9O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgQnV0dG9uID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgdmFyaWFudCA9ICduZXV0cmFsJyxcbiAgICAgIGlzRGlzYWJsZWQsXG4gICAgICBpY29uLFxuICAgICAgaWNvblBvc2l0aW9uID0gJ2xlZnQnLFxuICAgICAgaGFzRnVsbFdpZHRoLFxuICAgICAgaGFzU3Bpbm5lcixcbiAgICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICAgIHRhZyA9ICdidXR0b24nLFxuICAgICAgLi4ucHJvcHNcbiAgICB9LFxuICAgIHJlZixcbiAgKSA9PiB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxXcmFwcGVyXG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICBpY29uPXtpY29ufVxuICAgICAgICBpY29uUG9zaXRpb249e2ljb25Qb3NpdGlvbn1cbiAgICAgICAgaGFzRnVsbFdpZHRoPXtoYXNGdWxsV2lkdGh9XG4gICAgICAgIGhhc1NwaW5uZXI9e2hhc1NwaW5uZXJ9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICBhcz17dGFnfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtoYXNTcGlubmVyICYmIChcbiAgICAgICAgICA8Qm94IHBvc2l0aW9uPVwiYWJzb2x1dGVcIiBjbGFzc05hbWU9XCJidXR0b25TcGlubmVyXCI+XG4gICAgICAgICAgICA8U3Bpbm5lciBjb2xvcj1cImN1cnJlbnRDb2xvclwiIC8+XG4gICAgICAgICAgPC9Cb3g+XG4gICAgICAgICl9XG4gICAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IC8+fVxuICAgICAgICA8VGV4dCBjbGFzc05hbWU9XCJidXR0b25UZXh0XCI+e2NoaWxkcmVufTwvVGV4dD5cbiAgICAgIDwvV3JhcHBlcj5cbiAgICApO1xuICB9LFxuKTtcblxuQnV0dG9uLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgaWNvblBvc2l0aW9uOiB0eXBlcy5pY29uUG9zaXRpb24sXG4gIHZhcmlhbnQ6IHR5cGVzLmJ1dHRvblZhcmlhbnQsXG4gIG9uQ2xpY2s6IFByb3BUeXBlcy5mdW5jLFxuICBpc0Rpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgaGFzRnVsbFdpZHRoOiBQcm9wVHlwZXMuYm9vbCxcbiAgaGFzU3Bpbm5lcjogUHJvcFR5cGVzLmJvb2wsXG4gIHR5cGU6IHR5cGVzLmJ1dHRvblR5cGUsXG4gIHRhZzogdHlwZXMuYnV0dG9uVGFnLFxufTtcbiJdfQ== */"));
|
|
86
86
|
|
|
87
87
|
export var Button = /*#__PURE__*/forwardRef(function (_ref3, ref) {
|
|
88
88
|
var children = _ref3.children,
|
|
@@ -48,7 +48,7 @@ export var getClearButtonStyles = function getClearButtonStyles(_ref) {
|
|
|
48
48
|
isActive = _ref.isActive,
|
|
49
49
|
isDisabled = _ref.isDisabled;
|
|
50
50
|
var box = "\n ".concat(buttonResetStyles, ";\n ").concat(transitionStyles, ";\n\n border: none;\n padding: 0;\n border-radius: ").concat(getRadius('s'), ";\n height: ").concat(componentVars.clearButtonHeight, ";\n background-color: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n background-color: ").concat(variant && variantStyles[variant].hover.backgroundColor, ";\n\n .Icon {\n color: ").concat(variant && variantStyles[variant].hover.iconColor, ";\n }\n }\n\n &:active {\n --border: ").concat(componentVars.strokeSize, " ").concat(variantStyles[variant].active.borderColor, ";\n background-color: transparent;\n box-shadow: inset 0 0 0 var(--border);\n }\n\n ").concat(isDisabled && "pointer-events: none; ", "\n ");
|
|
51
|
-
var icon = "\n ".concat(transitionStyles, ";\n color: ").concat(variant && variantStyles[variant].iconColor, ";\n ").concat(isActive && "color: ".concat(variant && variantStyles[variant].color), ";\n ");
|
|
51
|
+
var icon = "\n ".concat(transitionStyles, ";\n color: ").concat(variant && variantStyles[variant].iconColor, ";\n ").concat(isActive && "color: ".concat(variant && variantStyles[variant].color), ";\n ").concat(isDisabled && "color: ".concat(getColor('disabledIcon')), ";\n ");
|
|
52
52
|
var text = "\n color: ".concat(variant && variantStyles[variant].color, ";\n ").concat(isDisabled && "color: ".concat(getColor('disabledContent')), ";\n ");
|
|
53
53
|
var clearButtonStyles = {
|
|
54
54
|
box: box,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var theme = "\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --contentL: 20%;\n --backgroundL: 80%;\n --grn-color-floatingBackground: var(--grn-color-shade1);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --contentL: 80%;\n --backgroundL: 20%;\n --grn-color-floatingBackground: var(--grn-color-shade2);\n }\n\n /* light + dark */\n\n :root,\n [data-theme] {\n --grn-color-content: var(--grn-color-shade12);\n --grn-color-content2: var(--grn-color-fade7);\n --grn-color-content3: var(--grn-color-fade5);\n --grn-color-disabledContent: var(--grn-color-shade7);\n --grn-color-icon: var(--grn-color-
|
|
1
|
+
var theme = "\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --contentL: 20%;\n --backgroundL: 80%;\n --grn-color-floatingBackground: var(--grn-color-shade1);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --contentL: 80%;\n --backgroundL: 20%;\n --grn-color-floatingBackground: var(--grn-color-shade2);\n }\n\n /* light + dark */\n\n :root,\n [data-theme] {\n --grn-color-content: var(--grn-color-shade12);\n --grn-color-content2: var(--grn-color-fade7);\n --grn-color-content3: var(--grn-color-fade5);\n --grn-color-disabledContent: var(--grn-color-shade7);\n --grn-color-icon: var(--grn-color-fade7);\n --grn-color-disabledIcon: var(--grn-color-fade4);\n\n --grn-color-background: var(--grn-color-shade1);\n --grn-color-background2: var(--grn-color-shade2);\n --grn-color-background3: var(--grn-color-shade3);\n --grn-color-disabledBackground: var(--grn-color-shade4);\n\n --grn-color-border: hsl(var(--HS) var(--contentL) / 12%);\n --grn-color-border2: hsl(var(--HS) var(--contentL) / 20%);\n }\n";
|
|
2
2
|
export default theme;
|
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:
|
|
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: 3px;\n --grn-radius-m: 6px;\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: var(--grn-color-darkFade8);\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;
|
package/es/variables/colors.js
CHANGED