@flodesk/grain 11.56.1 → 11.58.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/badge.js +9 -4
- package/es/components/tooltip.js +19 -10
- package/es/styles/colors/core.js +1 -1
- package/es/styles/colors/theme.js +1 -1
- package/es/types/components/tooltip.d.ts +2 -0
- package/es/types/variables/colors.d.ts +1 -1
- package/es/variables/colors.js +72 -2
- package/es/variables/vars.js +1 -1
- package/package.json +2 -1
package/es/components/badge.js
CHANGED
|
@@ -14,9 +14,14 @@ import PropTypes from 'prop-types';
|
|
|
14
14
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
15
15
|
const variantStyles = {
|
|
16
16
|
neutral: "\n background: transparent;\n color: ".concat(getColor('content'), ";\n border-color: ").concat(getColor('border2'), ";\n "),
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
info: "\n background: ".concat(getColor('backgroundInfo'), ";\n color: ").concat(getColor('onBackgroundInfo'), ";\n border-color: transparent;\n "),
|
|
18
|
+
infoSubtle: "\n background: ".concat(getColor('backgroundInfoSubtle'), ";\n color: ").concat(getColor('onBackgroundInfoSubtle'), ";\n border-color: transparent;\n "),
|
|
19
|
+
danger: "\n background: ".concat(getColor('backgroundDanger'), ";\n color: ").concat(getColor('onBackgroundDanger'), ";\n border-color: transparent;\n "),
|
|
20
|
+
dangerSubtle: "\n background: ".concat(getColor('backgroundDangerSubtle'), ";\n color: ").concat(getColor('onBackgroundDangerSubtle'), ";\n border-color: transparent;\n "),
|
|
21
|
+
warning: "\n background: ".concat(getColor('backgroundWarning'), ";\n color: ").concat(getColor('onBackgroundWarning'), ";\n border-color: transparent;\n "),
|
|
22
|
+
warningSubtle: "\n background: ".concat(getColor('backgroundWarningSubtle'), ";\n color: ").concat(getColor('onBackgroundWarningSubtle'), ";\n border-color: transparent;\n "),
|
|
23
|
+
success: "\n background: ".concat(getColor('backgroundSuccess'), ";\n color: ").concat(getColor('onBackgroundSuccess'), ";\n border-color: transparent;\n "),
|
|
24
|
+
successSubtle: "\n background: ".concat(getColor('backgroundSuccessSubtle'), ";\n color: ").concat(getColor('onBackgroundSuccessSubtle'), ";\n border-color: transparent;\n ")
|
|
20
25
|
};
|
|
21
26
|
|
|
22
27
|
const Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
@@ -24,7 +29,7 @@ const Root = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ?
|
|
|
24
29
|
} : {
|
|
25
30
|
target: "extgwng0",
|
|
26
31
|
label: "Root"
|
|
27
|
-
})("--borderWidth:1px;--paddingX:12px;--paddingLeft:calc(var(--paddingX) - var(--borderWidth));--paddingRight:calc(var(--paddingX) - var(--borderWidth));border-radius:1000px;border-style:solid;border-width:var(--borderWidth);padding:0 var(--paddingRight) 0 var(--paddingLeft);height:28px;display:flex;align-items:center;width:fit-content;font-size:", getTextSize('s'), ";font-weight:", getWeight('medium'), ";", p => p.variant ? variantStyles[p.variant] : "\n
|
|
32
|
+
})("--borderWidth:1px;--paddingX:12px;--paddingLeft:calc(var(--paddingX) - var(--borderWidth));--paddingRight:calc(var(--paddingX) - var(--borderWidth));border-radius:1000px;border-style:solid;border-width:var(--borderWidth);padding:0 var(--paddingRight) 0 var(--paddingLeft);height:28px;display:flex;align-items:center;width:fit-content;font-size:", getTextSize('s'), ";font-weight:", getWeight('medium'), ";", p => p.variant ? variantStyles[p.variant] : "\n ".concat(p.backgroundColor && "background: ".concat(getColor(p.backgroundColor), "\n "), ";\n ").concat(p.color && "color: ".concat(getColor(p.color)), ";\n border-color: ").concat(p.borderColor ? getColor(p.borderColor) : 'transparent', ";\n "), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2JhZGdlLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRHVCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2JhZGdlLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IHR5cGVzIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFRleHRTaXplLCBnZXRXZWlnaHQgfSBmcm9tICcuLi91dGlsaXRpZXMnO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IHZhcmlhbnRTdHlsZXMgPSB7XG4gIG5ldXRyYWw6IGBcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignY29udGVudCcpfTtcbiAgICBib3JkZXItY29sb3I6ICR7Z2V0Q29sb3IoJ2JvcmRlcjInKX07XG4gIGAsXG4gIGluZm86IGBcbiAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kSW5mbycpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignb25CYWNrZ3JvdW5kSW5mbycpfTtcbiAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxuICBpbmZvU3VidGxlOiBgXG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZEluZm9TdWJ0bGUnKX07XG4gICAgY29sb3I6ICR7Z2V0Q29sb3IoJ29uQmFja2dyb3VuZEluZm9TdWJ0bGUnKX07XG4gICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYCxcbiAgZGFuZ2VyOiBgXG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZERhbmdlcicpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignb25CYWNrZ3JvdW5kRGFuZ2VyJyl9O1xuICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGAsXG4gIGRhbmdlclN1YnRsZTogYFxuICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2JhY2tncm91bmREYW5nZXJTdWJ0bGUnKX07XG4gICAgY29sb3I6ICR7Z2V0Q29sb3IoJ29uQmFja2dyb3VuZERhbmdlclN1YnRsZScpfTtcbiAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxuICB3YXJuaW5nOiBgXG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZFdhcm5pbmcnKX07XG4gICAgY29sb3I6ICR7Z2V0Q29sb3IoJ29uQmFja2dyb3VuZFdhcm5pbmcnKX07XG4gICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYCxcbiAgd2FybmluZ1N1YnRsZTogYFxuICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IoJ2JhY2tncm91bmRXYXJuaW5nU3VidGxlJyl9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKCdvbkJhY2tncm91bmRXYXJuaW5nU3VidGxlJyl9O1xuICAgIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGAsXG4gIHN1Y2Nlc3M6IGBcbiAgICBiYWNrZ3JvdW5kOiAke2dldENvbG9yKCdiYWNrZ3JvdW5kU3VjY2VzcycpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignb25CYWNrZ3JvdW5kU3VjY2VzcycpfTtcbiAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICBgLFxuICBzdWNjZXNzU3VidGxlOiBgXG4gICAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignYmFja2dyb3VuZFN1Y2Nlc3NTdWJ0bGUnKX07XG4gICAgY29sb3I6ICR7Z2V0Q29sb3IoJ29uQmFja2dyb3VuZFN1Y2Nlc3NTdWJ0bGUnKX07XG4gICAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgYCxcbn07XG5cbmNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuICAtLWJvcmRlcldpZHRoOiAxcHg7XG4gIC0tcGFkZGluZ1g6IDEycHg7XG4gIC0tcGFkZGluZ0xlZnQ6IGNhbGModmFyKC0tcGFkZGluZ1gpIC0gdmFyKC0tYm9yZGVyV2lkdGgpKTtcbiAgLS1wYWRkaW5nUmlnaHQ6IGNhbGModmFyKC0tcGFkZGluZ1gpIC0gdmFyKC0tYm9yZGVyV2lkdGgpKTtcblxuICBib3JkZXItcmFkaXVzOiAxMDAwcHg7XG4gIGJvcmRlci1zdHlsZTogc29saWQ7XG4gIGJvcmRlci13aWR0aDogdmFyKC0tYm9yZGVyV2lkdGgpO1xuICBwYWRkaW5nOiAwIHZhcigtLXBhZGRpbmdSaWdodCkgMCB2YXIoLS1wYWRkaW5nTGVmdCk7XG4gIGhlaWdodDogMjhweDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuICBmb250LXNpemU6ICR7Z2V0VGV4dFNpemUoJ3MnKX07XG4gIGZvbnQtd2VpZ2h0OiAke2dldFdlaWdodCgnbWVkaXVtJyl9O1xuXG4gICR7cCA9PlxuICAgIHAudmFyaWFudFxuICAgICAgPyB2YXJpYW50U3R5bGVzW3AudmFyaWFudF1cbiAgICAgIDogYFxuICAgICAgICAke1xuICAgICAgICAgIHAuYmFja2dyb3VuZENvbG9yICYmXG4gICAgICAgICAgYGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IocC5iYWNrZ3JvdW5kQ29sb3IpfVxuICAgICAgYFxuICAgICAgICB9O1xuICAgICR7cC5jb2xvciAmJiBgY29sb3I6ICR7Z2V0Q29sb3IocC5jb2xvcil9YH07XG4gICAgYm9yZGVyLWNvbG9yOiAke3AuYm9yZGVyQ29sb3IgPyBnZXRDb2xvcihwLmJvcmRlckNvbG9yKSA6ICd0cmFuc3BhcmVudCd9O1xuICBgfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBCYWRnZSA9IGZvcndhcmRSZWYoZnVuY3Rpb24gQmFkZ2UoXG4gIHsgY2hpbGRyZW4sIHZhcmlhbnQsIGNvbG9yLCBiYWNrZ3JvdW5kQ29sb3IsIGJvcmRlckNvbG9yLCAuLi5wcm9wcyB9LFxuICByZWYsXG4pIHtcbiAgcmV0dXJuIChcbiAgICA8Um9vdFxuICAgICAgcmVmPXtyZWZ9XG4gICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgY29sb3I9e2NvbG9yfVxuICAgICAgYmFja2dyb3VuZENvbG9yPXtiYWNrZ3JvdW5kQ29sb3J9XG4gICAgICBib3JkZXJDb2xvcj17Ym9yZGVyQ29sb3J9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvUm9vdD5cbiAgKTtcbn0pO1xuXG5CYWRnZS5wcm9wVHlwZXMgPSB7XG4gIGNoaWxkcmVuOiBQcm9wVHlwZXMubm9kZSxcbiAgY29sb3I6IHR5cGVzLmNvbG9yLFxuICBiYWNrZ3JvdW5kQ29sb3I6IHR5cGVzLmNvbG9yLFxuICBib3JkZXJDb2xvcjogdHlwZXMuY29sb3IsXG59O1xuIl19 */"));
|
|
28
33
|
|
|
29
34
|
export const Badge = /*#__PURE__*/forwardRef(function Badge(_ref, ref) {
|
|
30
35
|
let {
|
package/es/components/tooltip.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _styled from "@emotion/styled/base";
|
|
2
|
-
const _excluded = ["children", "content", "placement", "zIndex", "hasPortal", "placementMethod", "offset"];
|
|
2
|
+
const _excluded = ["children", "content", "placement", "zIndex", "hasPortal", "placementMethod", "offset", "maxWidth"];
|
|
3
3
|
|
|
4
4
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
5
|
|
|
@@ -21,7 +21,7 @@ import { PropTypes } from 'prop-types';
|
|
|
21
21
|
import { cloneElement, useState, Fragment } from 'react';
|
|
22
22
|
import { types } from '../types';
|
|
23
23
|
import { useFloating, autoUpdate, offset, flip, useHover, useDismiss, useRole, useInteractions, FloatingPortal, shift } from '@floating-ui/react-dom-interactions';
|
|
24
|
-
import { getColor, getRadius, getTransition } from '../utilities';
|
|
24
|
+
import { getColor, getDimension, getRadius, getTransition } from '../utilities';
|
|
25
25
|
import { lineHeightAndCapHeightOffset, placementStyles, placementsMap } from '../foundational';
|
|
26
26
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
27
27
|
|
|
@@ -30,12 +30,17 @@ const ContentWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
|
|
|
30
30
|
} : {
|
|
31
31
|
target: "e1063o0x1",
|
|
32
32
|
label: "ContentWrapper"
|
|
33
|
-
})("--padding:16px;background:", getColor('shade12'), ";color:", getColor('shade2'), ";padding:calc(var(--padding) - ", lineHeightAndCapHeightOffset, ") var(--padding);max-width:
|
|
33
|
+
})("--padding:16px;background:", getColor('shade12'), ";color:", getColor('shade2'), ";padding:calc(var(--padding) - ", lineHeightAndCapHeightOffset, ") var(--padding);max-width:", _ref => {
|
|
34
34
|
let {
|
|
35
|
-
|
|
35
|
+
maxWidth
|
|
36
36
|
} = _ref;
|
|
37
|
+
return getDimension(maxWidth);
|
|
38
|
+
}, ";width:max-content;border-radius:", getRadius('s'), ";", _ref2 => {
|
|
39
|
+
let {
|
|
40
|
+
zIndex
|
|
41
|
+
} = _ref2;
|
|
37
42
|
return "z-index: ".concat(zIndex);
|
|
38
|
-
}, ";transition:opacity ", getTransition('fast'), " 0.07s;pointer-events:none;[data-experiment-compact-textbox] &{--padding:12px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
43
|
+
}, ";transition:opacity ", getTransition('fast'), " 0.07s;pointer-events:none;[data-experiment-compact-textbox] &{--padding:12px;}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3Rvb2x0aXAuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CaUMiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdG9vbHRpcC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQcm9wVHlwZXMgfSBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNsb25lRWxlbWVudCwgdXNlU3RhdGUsIEZyYWdtZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQge1xuICB1c2VGbG9hdGluZyxcbiAgYXV0b1VwZGF0ZSxcbiAgb2Zmc2V0LFxuICBmbGlwLFxuICB1c2VIb3ZlcixcbiAgdXNlRGlzbWlzcyxcbiAgdXNlUm9sZSxcbiAgdXNlSW50ZXJhY3Rpb25zLFxuICBGbG9hdGluZ1BvcnRhbCxcbiAgc2hpZnQsXG59IGZyb20gJ0BmbG9hdGluZy11aS9yZWFjdC1kb20taW50ZXJhY3Rpb25zJztcbmltcG9ydCB7IGdldENvbG9yLCBnZXREaW1lbnNpb24sIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBsaW5lSGVpZ2h0QW5kQ2FwSGVpZ2h0T2Zmc2V0LCBwbGFjZW1lbnRTdHlsZXMsIHBsYWNlbWVudHNNYXAgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIC0tcGFkZGluZzogMTZweDtcbiAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignc2hhZGUxMicpfTtcbiAgY29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMicpfTtcbiAgcGFkZGluZzogY2FsYyh2YXIoLS1wYWRkaW5nKSAtICR7bGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldH0pIHZhcigtLXBhZGRpbmcpO1xuICBtYXgtd2lkdGg6ICR7KHsgbWF4V2lkdGggfSkgPT4gZ2V0RGltZW5zaW9uKG1heFdpZHRoKX07XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICR7KHsgekluZGV4IH0pID0+IGB6LWluZGV4OiAke3pJbmRleH1gfTtcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX0gMC4wN3M7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gIFtkYXRhLWV4cGVyaW1lbnQtY29tcGFjdC10ZXh0Ym94XSAmIHtcbiAgICAtLXBhZGRpbmc6IDEycHg7XG4gIH1cbmA7XG5cbmNvbnN0IFN0YXRpY1Jvb3QgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgLS1jb250ZW50T3BhY2l0eTogMDtcblxuICAmOmhvdmVyIHtcbiAgICAtLWNvbnRlbnRPcGFjaXR5OiAxO1xuICB9XG5gO1xuXG5jb25zdCB0b29sdGlwT2Zmc2V0cyA9IHtcbiAgeHM6IDggLyAyLFxuICBzOiA4ICogMSxcbn07XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNvbnRlbnQsXG4gIHBsYWNlbWVudCA9ICd0b3AnLFxuICB6SW5kZXggPSAxNDAwLCAvLyBJdCBzaG91bGQgYmUgZ3JlYXRlciB0aGFuIG9yIGVxdWFsIDE0MDAgdG8gYXZvaWQgY2FzZSBiZSBoaWRkZW4gYmUgaGlkZSBvdGhlciBvdmVybGF5IGNvbXBvbmVudHMuIGh0dHBzOi8vZ2l0LmZkbncubmV0L2Rldi9mcm9udGVuZC8tL2Jsb2IvbWFzdGVyL3BhY2thZ2VzL3VpL3NyYy9zY3NzL192YXJzLnNjc3MjTDEwM1xuICBoYXNQb3J0YWwgPSB0cnVlLFxuICBwbGFjZW1lbnRNZXRob2QgPSAnZHluYW1pYycsXG4gIG9mZnNldDogdG9vbHRpcE9mZnNldCA9ICd4cycsXG4gIG1heFdpZHRoID0gJzI1NnB4JyxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCB7IHgsIHksIHJlZmVyZW5jZSwgZmxvYXRpbmcsIHN0cmF0ZWd5LCBjb250ZXh0IH0gPSB1c2VGbG9hdGluZyh7XG4gICAgcGxhY2VtZW50OiBwbGFjZW1lbnRzTWFwW3BsYWNlbWVudF0sXG4gICAgb25PcGVuQ2hhbmdlOiBzZXRJc09wZW4sXG4gICAgbWlkZGxld2FyZTogW29mZnNldCh0b29sdGlwT2Zmc2V0c1t0b29sdGlwT2Zmc2V0XSksIGZsaXAoKSwgc2hpZnQoeyBwYWRkaW5nOiA0IH0pXSxcbiAgICB3aGlsZUVsZW1lbnRzTW91bnRlZCguLi5hcmdzKSB7XG4gICAgICBjb25zdCBjbGVhbnVwID0gYXV0b1VwZGF0ZSguLi5hcmdzLCB7IGFuaW1hdGlvbkZyYW1lOiB0cnVlIH0pO1xuICAgICAgLy8gSW1wb3J0YW50ISBBbHdheXMgcmV0dXJuIHRoZSBjbGVhbnVwIGZ1bmN0aW9uLlxuICAgICAgcmV0dXJuIGNsZWFudXA7XG4gICAgfSxcbiAgfSk7XG5cbiAgY29uc3QgaG92ZXIgPSB1c2VIb3Zlcihjb250ZXh0LCB7XG4gICAgbW92ZTogZmFsc2UsXG4gIH0pO1xuICBjb25zdCBkaXNtaXNzID0gdXNlRGlzbWlzcyhjb250ZXh0KTtcbiAgY29uc3Qgcm9sZSA9IHVzZVJvbGUoY29udGV4dCwgeyByb2xlOiAndG9vbHRpcCcgfSk7XG4gIGNvbnN0IHsgZ2V0UmVmZXJlbmNlUHJvcHMsIGdldEZsb2F0aW5nUHJvcHMgfSA9IHVzZUludGVyYWN0aW9ucyhbaG92ZXIsIGRpc21pc3MsIHJvbGVdKTtcblxuICBjb25zdCBDb250ZW50Um9vdCA9IGhhc1BvcnRhbCA/IEZsb2F0aW5nUG9ydGFsIDogRnJhZ21lbnQ7XG5cbiAgaWYgKHBsYWNlbWVudE1ldGhvZCA9PT0gJ3N0YXRpYycpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0YXRpY1Jvb3Q+XG4gICAgICAgIHtjb250ZW50ICYmIChcbiAgICAgICAgICA8Q29udGVudFdyYXBwZXJcbiAgICAgICAgICAgIHJlZj17ZmxvYXRpbmd9XG4gICAgICAgICAgICB6SW5kZXg9e3pJbmRleH1cbiAgICAgICAgICAgIG1heFdpZHRoPXttYXhXaWR0aH1cbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgIG9wYWNpdHk6ICd2YXIoLS1jb250ZW50T3BhY2l0eSknLFxuICAgICAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgICAgICAgLi4ucGxhY2VtZW50U3R5bGVzW3BsYWNlbWVudF0sXG4gICAgICAgICAgICAgICctLXBsYWNlbWVudE9mZnNldCc6IGAke3Rvb2x0aXBPZmZzZXRzW3Rvb2x0aXBPZmZzZXRdfXB4YCxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgICAgPC9Db250ZW50V3JhcHBlcj5cbiAgICAgICAgKX1cblxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1N0YXRpY1Jvb3Q+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtjb250ZW50ICYmIChcbiAgICAgICAgPENvbnRlbnRSb290PlxuICAgICAgICAgIDxDb250ZW50V3JhcHBlclxuICAgICAgICAgICAgY2xhc3NOYW1lPVwiZ3JuLWNvbnRleHRcIlxuICAgICAgICAgICAgcmVmPXtmbG9hdGluZ31cbiAgICAgICAgICAgIHpJbmRleD17ekluZGV4fVxuICAgICAgICAgICAgbWF4V2lkdGg9e21heFdpZHRofVxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgb3BhY2l0eTogaXNPcGVuID8gMSA6IDAsXG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBzdHJhdGVneSxcbiAgICAgICAgICAgICAgdG9wOiB5ID8/IDAsXG4gICAgICAgICAgICAgIGxlZnQ6IHggPz8gMCxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICB7Li4uZ2V0RmxvYXRpbmdQcm9wcygpfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjb250ZW50fVxuICAgICAgICAgIDwvQ29udGVudFdyYXBwZXI+XG4gICAgICAgIDwvQ29udGVudFJvb3Q+XG4gICAgICApfVxuXG4gICAgICB7Y2xvbmVFbGVtZW50KGNoaWxkcmVuLCB7XG4gICAgICAgIHJlZjogcmVmZXJlbmNlLFxuICAgICAgICAuLi5nZXRSZWZlcmVuY2VQcm9wcygpLFxuICAgICAgfSl9XG4gICAgPC8+XG4gICk7XG59O1xuXG5Ub29sdGlwLkNvbnRlbnQgPSBDb250ZW50V3JhcHBlcjtcblxuVG9vbHRpcC5wcm9wVHlwZXMgPSB7XG4gIHBsYWNlbWVudDogdHlwZXMucGxhY2VtZW50LFxuICBjb250ZW50OiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzUG9ydGFsOiBQcm9wVHlwZXMuYm9vbCxcbiAgbWF4V2lkdGg6IHR5cGVzLmRpbWVuc2lvbixcbiAgekluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHBsYWNlbWVudE1ldGhvZDogUHJvcFR5cGVzLm9uZU9mKFsnc3RhdGljJywgJ2R5bmFtaWMnXSksXG4gIG9mZnNldDogUHJvcFR5cGVzLm9uZU9mKFsneHMnLCAncyddKSxcbn07XG4iXX0= */"));
|
|
39
44
|
|
|
40
45
|
const StaticRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
|
|
41
46
|
target: "e1063o0x0"
|
|
@@ -48,7 +53,7 @@ const StaticRoot = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "product
|
|
|
48
53
|
} : {
|
|
49
54
|
name: "1bhnd3t",
|
|
50
55
|
styles: "position:relative;width:fit-content;--contentOpacity:0;&:hover{--contentOpacity:1;}",
|
|
51
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
56
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL3Rvb2x0aXAuanN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9DNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvdG9vbHRpcC5qc3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQcm9wVHlwZXMgfSBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNsb25lRWxlbWVudCwgdXNlU3RhdGUsIEZyYWdtZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQge1xuICB1c2VGbG9hdGluZyxcbiAgYXV0b1VwZGF0ZSxcbiAgb2Zmc2V0LFxuICBmbGlwLFxuICB1c2VIb3ZlcixcbiAgdXNlRGlzbWlzcyxcbiAgdXNlUm9sZSxcbiAgdXNlSW50ZXJhY3Rpb25zLFxuICBGbG9hdGluZ1BvcnRhbCxcbiAgc2hpZnQsXG59IGZyb20gJ0BmbG9hdGluZy11aS9yZWFjdC1kb20taW50ZXJhY3Rpb25zJztcbmltcG9ydCB7IGdldENvbG9yLCBnZXREaW1lbnNpb24sIGdldFJhZGl1cywgZ2V0VHJhbnNpdGlvbiB9IGZyb20gJy4uL3V0aWxpdGllcyc7XG5pbXBvcnQgeyBsaW5lSGVpZ2h0QW5kQ2FwSGVpZ2h0T2Zmc2V0LCBwbGFjZW1lbnRTdHlsZXMsIHBsYWNlbWVudHNNYXAgfSBmcm9tICcuLi9mb3VuZGF0aW9uYWwnO1xuXG5jb25zdCBDb250ZW50V3JhcHBlciA9IHN0eWxlZC5kaXZgXG4gIC0tcGFkZGluZzogMTZweDtcbiAgYmFja2dyb3VuZDogJHtnZXRDb2xvcignc2hhZGUxMicpfTtcbiAgY29sb3I6ICR7Z2V0Q29sb3IoJ3NoYWRlMicpfTtcbiAgcGFkZGluZzogY2FsYyh2YXIoLS1wYWRkaW5nKSAtICR7bGluZUhlaWdodEFuZENhcEhlaWdodE9mZnNldH0pIHZhcigtLXBhZGRpbmcpO1xuICBtYXgtd2lkdGg6ICR7KHsgbWF4V2lkdGggfSkgPT4gZ2V0RGltZW5zaW9uKG1heFdpZHRoKX07XG4gIHdpZHRoOiBtYXgtY29udGVudDtcbiAgYm9yZGVyLXJhZGl1czogJHtnZXRSYWRpdXMoJ3MnKX07XG4gICR7KHsgekluZGV4IH0pID0+IGB6LWluZGV4OiAke3pJbmRleH1gfTtcbiAgdHJhbnNpdGlvbjogb3BhY2l0eSAke2dldFRyYW5zaXRpb24oJ2Zhc3QnKX0gMC4wN3M7XG4gIHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG4gIFtkYXRhLWV4cGVyaW1lbnQtY29tcGFjdC10ZXh0Ym94XSAmIHtcbiAgICAtLXBhZGRpbmc6IDEycHg7XG4gIH1cbmA7XG5cbmNvbnN0IFN0YXRpY1Jvb3QgPSBzdHlsZWQuZGl2YFxuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgLS1jb250ZW50T3BhY2l0eTogMDtcblxuICAmOmhvdmVyIHtcbiAgICAtLWNvbnRlbnRPcGFjaXR5OiAxO1xuICB9XG5gO1xuXG5jb25zdCB0b29sdGlwT2Zmc2V0cyA9IHtcbiAgeHM6IDggLyAyLFxuICBzOiA4ICogMSxcbn07XG5cbmV4cG9ydCBjb25zdCBUb29sdGlwID0gKHtcbiAgY2hpbGRyZW4sXG4gIGNvbnRlbnQsXG4gIHBsYWNlbWVudCA9ICd0b3AnLFxuICB6SW5kZXggPSAxNDAwLCAvLyBJdCBzaG91bGQgYmUgZ3JlYXRlciB0aGFuIG9yIGVxdWFsIDE0MDAgdG8gYXZvaWQgY2FzZSBiZSBoaWRkZW4gYmUgaGlkZSBvdGhlciBvdmVybGF5IGNvbXBvbmVudHMuIGh0dHBzOi8vZ2l0LmZkbncubmV0L2Rldi9mcm9udGVuZC8tL2Jsb2IvbWFzdGVyL3BhY2thZ2VzL3VpL3NyYy9zY3NzL192YXJzLnNjc3MjTDEwM1xuICBoYXNQb3J0YWwgPSB0cnVlLFxuICBwbGFjZW1lbnRNZXRob2QgPSAnZHluYW1pYycsXG4gIG9mZnNldDogdG9vbHRpcE9mZnNldCA9ICd4cycsXG4gIG1heFdpZHRoID0gJzI1NnB4JyxcbiAgLi4ucHJvcHNcbn0pID0+IHtcbiAgY29uc3QgW2lzT3Blbiwgc2V0SXNPcGVuXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICBjb25zdCB7IHgsIHksIHJlZmVyZW5jZSwgZmxvYXRpbmcsIHN0cmF0ZWd5LCBjb250ZXh0IH0gPSB1c2VGbG9hdGluZyh7XG4gICAgcGxhY2VtZW50OiBwbGFjZW1lbnRzTWFwW3BsYWNlbWVudF0sXG4gICAgb25PcGVuQ2hhbmdlOiBzZXRJc09wZW4sXG4gICAgbWlkZGxld2FyZTogW29mZnNldCh0b29sdGlwT2Zmc2V0c1t0b29sdGlwT2Zmc2V0XSksIGZsaXAoKSwgc2hpZnQoeyBwYWRkaW5nOiA0IH0pXSxcbiAgICB3aGlsZUVsZW1lbnRzTW91bnRlZCguLi5hcmdzKSB7XG4gICAgICBjb25zdCBjbGVhbnVwID0gYXV0b1VwZGF0ZSguLi5hcmdzLCB7IGFuaW1hdGlvbkZyYW1lOiB0cnVlIH0pO1xuICAgICAgLy8gSW1wb3J0YW50ISBBbHdheXMgcmV0dXJuIHRoZSBjbGVhbnVwIGZ1bmN0aW9uLlxuICAgICAgcmV0dXJuIGNsZWFudXA7XG4gICAgfSxcbiAgfSk7XG5cbiAgY29uc3QgaG92ZXIgPSB1c2VIb3Zlcihjb250ZXh0LCB7XG4gICAgbW92ZTogZmFsc2UsXG4gIH0pO1xuICBjb25zdCBkaXNtaXNzID0gdXNlRGlzbWlzcyhjb250ZXh0KTtcbiAgY29uc3Qgcm9sZSA9IHVzZVJvbGUoY29udGV4dCwgeyByb2xlOiAndG9vbHRpcCcgfSk7XG4gIGNvbnN0IHsgZ2V0UmVmZXJlbmNlUHJvcHMsIGdldEZsb2F0aW5nUHJvcHMgfSA9IHVzZUludGVyYWN0aW9ucyhbaG92ZXIsIGRpc21pc3MsIHJvbGVdKTtcblxuICBjb25zdCBDb250ZW50Um9vdCA9IGhhc1BvcnRhbCA/IEZsb2F0aW5nUG9ydGFsIDogRnJhZ21lbnQ7XG5cbiAgaWYgKHBsYWNlbWVudE1ldGhvZCA9PT0gJ3N0YXRpYycpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPFN0YXRpY1Jvb3Q+XG4gICAgICAgIHtjb250ZW50ICYmIChcbiAgICAgICAgICA8Q29udGVudFdyYXBwZXJcbiAgICAgICAgICAgIHJlZj17ZmxvYXRpbmd9XG4gICAgICAgICAgICB6SW5kZXg9e3pJbmRleH1cbiAgICAgICAgICAgIG1heFdpZHRoPXttYXhXaWR0aH1cbiAgICAgICAgICAgIHN0eWxlPXt7XG4gICAgICAgICAgICAgIG9wYWNpdHk6ICd2YXIoLS1jb250ZW50T3BhY2l0eSknLFxuICAgICAgICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgICAgICAgLi4ucGxhY2VtZW50U3R5bGVzW3BsYWNlbWVudF0sXG4gICAgICAgICAgICAgICctLXBsYWNlbWVudE9mZnNldCc6IGAke3Rvb2x0aXBPZmZzZXRzW3Rvb2x0aXBPZmZzZXRdfXB4YCxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgICAgPC9Db250ZW50V3JhcHBlcj5cbiAgICAgICAgKX1cblxuICAgICAgICB7Y2hpbGRyZW59XG4gICAgICA8L1N0YXRpY1Jvb3Q+XG4gICAgKTtcbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIHtjb250ZW50ICYmIChcbiAgICAgICAgPENvbnRlbnRSb290PlxuICAgICAgICAgIDxDb250ZW50V3JhcHBlclxuICAgICAgICAgICAgY2xhc3NOYW1lPVwiZ3JuLWNvbnRleHRcIlxuICAgICAgICAgICAgcmVmPXtmbG9hdGluZ31cbiAgICAgICAgICAgIHpJbmRleD17ekluZGV4fVxuICAgICAgICAgICAgbWF4V2lkdGg9e21heFdpZHRofVxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgb3BhY2l0eTogaXNPcGVuID8gMSA6IDAsXG4gICAgICAgICAgICAgIHBvc2l0aW9uOiBzdHJhdGVneSxcbiAgICAgICAgICAgICAgdG9wOiB5ID8/IDAsXG4gICAgICAgICAgICAgIGxlZnQ6IHggPz8gMCxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgICB7Li4uZ2V0RmxvYXRpbmdQcm9wcygpfVxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtjb250ZW50fVxuICAgICAgICAgIDwvQ29udGVudFdyYXBwZXI+XG4gICAgICAgIDwvQ29udGVudFJvb3Q+XG4gICAgICApfVxuXG4gICAgICB7Y2xvbmVFbGVtZW50KGNoaWxkcmVuLCB7XG4gICAgICAgIHJlZjogcmVmZXJlbmNlLFxuICAgICAgICAuLi5nZXRSZWZlcmVuY2VQcm9wcygpLFxuICAgICAgfSl9XG4gICAgPC8+XG4gICk7XG59O1xuXG5Ub29sdGlwLkNvbnRlbnQgPSBDb250ZW50V3JhcHBlcjtcblxuVG9vbHRpcC5wcm9wVHlwZXMgPSB7XG4gIHBsYWNlbWVudDogdHlwZXMucGxhY2VtZW50LFxuICBjb250ZW50OiBQcm9wVHlwZXMubm9kZSxcbiAgaGFzUG9ydGFsOiBQcm9wVHlwZXMuYm9vbCxcbiAgbWF4V2lkdGg6IHR5cGVzLmRpbWVuc2lvbixcbiAgekluZGV4OiB0eXBlcy56SW5kZXgsXG4gIHBsYWNlbWVudE1ldGhvZDogUHJvcFR5cGVzLm9uZU9mKFsnc3RhdGljJywgJ2R5bmFtaWMnXSksXG4gIG9mZnNldDogUHJvcFR5cGVzLm9uZU9mKFsneHMnLCAncyddKSxcbn07XG4iXX0= */",
|
|
52
57
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
53
58
|
});
|
|
54
59
|
|
|
@@ -56,7 +61,7 @@ const tooltipOffsets = {
|
|
|
56
61
|
xs: 8 / 2,
|
|
57
62
|
s: 8 * 1
|
|
58
63
|
};
|
|
59
|
-
export const Tooltip =
|
|
64
|
+
export const Tooltip = _ref3 => {
|
|
60
65
|
let {
|
|
61
66
|
children,
|
|
62
67
|
content,
|
|
@@ -65,9 +70,10 @@ export const Tooltip = _ref2 => {
|
|
|
65
70
|
// It should be greater than or equal 1400 to avoid case be hidden be hide other overlay components. https://git.fdnw.net/dev/frontend/-/blob/master/packages/ui/src/scss/_vars.scss#L103
|
|
66
71
|
hasPortal = true,
|
|
67
72
|
placementMethod = 'dynamic',
|
|
68
|
-
offset: tooltipOffset = 'xs'
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
offset: tooltipOffset = 'xs',
|
|
74
|
+
maxWidth = '256px'
|
|
75
|
+
} = _ref3,
|
|
76
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
71
77
|
|
|
72
78
|
const [isOpen, setIsOpen] = useState(false);
|
|
73
79
|
const {
|
|
@@ -114,6 +120,7 @@ export const Tooltip = _ref2 => {
|
|
|
114
120
|
return ___EmotionJSX(StaticRoot, null, content && ___EmotionJSX(ContentWrapper, _extends({
|
|
115
121
|
ref: floating,
|
|
116
122
|
zIndex: zIndex,
|
|
123
|
+
maxWidth: maxWidth,
|
|
117
124
|
style: _objectSpread(_objectSpread({
|
|
118
125
|
opacity: 'var(--contentOpacity)',
|
|
119
126
|
position: 'absolute'
|
|
@@ -127,6 +134,7 @@ export const Tooltip = _ref2 => {
|
|
|
127
134
|
className: "grn-context",
|
|
128
135
|
ref: floating,
|
|
129
136
|
zIndex: zIndex,
|
|
137
|
+
maxWidth: maxWidth,
|
|
130
138
|
style: {
|
|
131
139
|
opacity: isOpen ? 1 : 0,
|
|
132
140
|
position: strategy,
|
|
@@ -142,6 +150,7 @@ Tooltip.propTypes = {
|
|
|
142
150
|
placement: types.placement,
|
|
143
151
|
content: PropTypes.node,
|
|
144
152
|
hasPortal: PropTypes.bool,
|
|
153
|
+
maxWidth: types.dimension,
|
|
145
154
|
zIndex: types.zIndex,
|
|
146
155
|
placementMethod: PropTypes.oneOf(['static', 'dynamic']),
|
|
147
156
|
offset: PropTypes.oneOf(['xs', 's'])
|
package/es/styles/colors/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const core = "\n :root {\n --white: hsl(0 0% 100%);\n --shade-h: 13.85;\n --shade-s: 7%;\n --shade-hs: var(--shade-h) var(--shade-s);\n --bf-s: 20%;\n --wf-s: calc(100% - var(--bf-s));\n }\n\n :root {\n --red-hs: 6 55%;\n --red-l: 52%;\n\n --grn-color-blue: hsl(218 74% 54%);\n --grn-color-red: hsl(var(--red-hs) var(--red-l));\n --grn-color-yellow: hsl(44 99% 59%);\n --grn-color-green: hsl(153 22% 57%);\n }\n\n :root {\n --shadeS-13: 20%;\n --shadeS-12: 22%;\n --shadeS-11: 15%;\n --shadeS-10: 12%;\n --shadeS-9: 9%;\n --shadeS-8: 7%;\n --shadeS-7: 5%;\n --shadeS-6: 6%;\n --shadeS-5: 7%;\n --shadeS-4: 7%;\n --shadeS-3: 7%;\n --shadeS-2: 6%;\n --shadeS-1: 6%;\n }\n\n :root {\n --shade13-s: var(--shadeS-13);\n --shade12-s: var(--shadeS-12);\n --shade11-s: var(--shadeS-11);\n --shade10-s: var(--shadeS-10);\n --shade9-s: var(--shadeS-9);\n --shade8-s: var(--shadeS-8);\n --shade7-s: var(--shadeS-7);\n --shade6-s: var(--shadeS-6);\n --shade5-s: var(--shadeS-5);\n --shade4-s: var(--shadeS-4);\n --shade3-s: var(--shadeS-3);\n --shade2-s: var(--shadeS-2);\n --shade1-s: var(--shadeS-1);\n }\n\n [data-theme='dark'], [data-theme='invert'] {\n --shade13-s: var(--shadeS-1);\n --shade12-s: var(--shadeS-2);\n --shade11-s: var(--shadeS-3);\n --shade10-s: var(--shadeS-4);\n --shade9-s: var(--shadeS-5);\n --shade8-s: var(--shadeS-6);\n --shade7-s: var(--shadeS-7);\n --shade6-s: var(--shadeS-8);\n --shade5-s: var(--shadeS-9);\n --shade4-s: var(--shadeS-10);\n --shade3-s: var(--shadeS-11);\n --shade2-s: var(--shadeS-12);\n --shade1-s: var(--shadeS-13);\n }\n\n :root {\n --grn-color-shadeTone13: hsl(var(--shade-h) var(--shade13-s) 10%);\n --grn-color-shadeTone12: hsl(var(--shade-h) var(--shade12-s) 11.5%);\n --grn-color-shadeTone11: hsl(var(--shade-h) var(--shade11-s) 15%);\n --grn-color-shadeTone10: hsl(var(--shade-h) var(--shade10-s) 21%);\n --grn-color-shadeTone9: hsl(var(--shade-h) var(--shade9-s) 28%);\n --grn-color-shadeTone8: hsl(var(--shade-h) var(--shade8-s) 38%);\n --grn-color-shadeTone7: hsl(var(--shade-h) var(--shade7-s) 51%);\n --grn-color-shadeTone6: hsl(var(--shade-h) var(--shade6-s) 70%);\n --grn-color-shadeTone5: hsl(var(--shade-h) var(--shade5-s) 82%);\n --grn-color-shadeTone4: hsl(var(--shade-h) var(--shade4-s) 90%);\n --grn-color-shadeTone3: hsl(var(--shade-h) var(--shade3-s) 95%);\n --grn-color-shadeTone2: hsl(var(--shade-h) var(--shade2-s) 97.5%);\n --grn-color-shadeTone1: hsl(var(--shade-h) var(--shade1-s) 100%);\n\n --fade10-a: 73%;\n --fade9-a: 66%;\n --fade8-a: 59%;\n --fade7-a: 52%;\n --fade6-a: 45%;\n --fade5-a: 38%;\n --fade4-a: 31%;\n --fade3-a: 23%;\n --fade2-a: 15%;\n --fade1-a: 8%;\n\n --fade-s: 20%;\n\n --grn-color-lightFade10: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade10-a));\n --grn-color-lightFade9: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade9-a));\n --grn-color-lightFade8: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade8-a));\n --grn-color-lightFade7: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade7-a));\n --grn-color-lightFade6: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade6-a));\n --grn-color-lightFade5: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade5-a));\n --grn-color-lightFade4: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade4-a));\n --grn-color-lightFade3: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade3-a));\n --grn-color-lightFade2: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade2-a));\n --grn-color-lightFade1: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade1-a));\n\n --grn-color-darkFade10: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade10-a));\n --grn-color-darkFade9: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade9-a));\n --grn-color-darkFade8: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade8-a));\n --grn-color-darkFade7: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade7-a));\n --grn-color-darkFade6: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade6-a));\n --grn-color-darkFade5: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade5-a));\n --grn-color-darkFade4: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade4-a));\n --grn-color-darkFade3: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade3-a));\n --grn-color-darkFade2: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade2-a));\n --grn-color-darkFade1: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade1-a));\n }\n\n :root {\n --grn-color-warning: var(--grn-color-yellow);\n --grn-color-danger: var(--grn-color-red);\n --grn-color-success: var(--grn-color-green);\n --grn-color-selection: var(--grn-color-blue);\n }\n";
|
|
1
|
+
const core = "\n :root {\n --white: hsl(0 0% 100%);\n --shade-h: 13.85;\n --shade-s: 7%;\n --shade-hs: var(--shade-h) var(--shade-s);\n --bf-s: 20%;\n --wf-s: calc(100% - var(--bf-s));\n }\n\n :root {\n --blue-hs: 218 74%;\n --blue-l: 54%;\n\n --red-hs: 6 55%;\n --red-l: 52%;\n\n --green-hs: 153 22%;\n --green-l: 57%;\n\n --yellow-hs: 44 99%;\n --yellow-l: 59%;\n\n --grn-color-blue: hsl(218 74% 54%);\n --grn-color-red: hsl(var(--red-hs) var(--red-l));\n --grn-color-yellow: hsl(44 99% 59%);\n --grn-color-green: hsl(153 22% 57%);\n }\n\n :root {\n --grn-color-blue1: hsl(var(--blue-hs) 95%);\n --grn-color-blue2: hsl(var(--blue-hs) 90%);\n --grn-color-blue3: hsl(var(--blue-hs) 81%);\n --grn-color-blue4: hsl(var(--blue-hs) 72%);\n --grn-color-blue5: hsl(var(--blue-hs) 65%);\n --grn-color-blue6: hsl(var(--blue-hs) var(--blue-l));\n --grn-color-blue7: hsl(var(--blue-hs) 42%);\n --grn-color-blue8: hsl(var(--blue-hs) 32%);\n --grn-color-blue9: hsl(var(--blue-hs) 23%);\n --grn-color-blue10: hsl(var(--blue-hs) 17%);\n --grn-color-blue11: hsl(var(--blue-hs) 13%);\n\n --grn-color-red1: hsl(var(--red-hs) 95%);\n --grn-color-red2: hsl(var(--red-hs) 90%);\n --grn-color-red3: hsl(var(--red-hs) 80%);\n --grn-color-red4: hsl(var(--red-hs) 72%);\n --grn-color-red5: hsl(var(--red-hs) 62%);\n --grn-color-red6: hsl(var(--red-hs) var(--red-l));\n --grn-color-red7: hsl(var(--red-hs) 40%);\n --grn-color-red8: hsl(var(--red-hs) 28%);\n --grn-color-red9: hsl(var(--red-hs) 22%);\n --grn-color-red10: hsl(var(--red-hs) 17%);\n --grn-color-red11: hsl(var(--red-hs) 13%);\n\n --grn-color-green1: hsl(var(--green-hs) 95%);\n --grn-color-green2: hsl(var(--green-hs) 90%);\n --grn-color-green3: hsl(var(--green-hs) 80%);\n --grn-color-green4: hsl(var(--green-hs) 70%);\n --grn-color-green5: hsl(var(--green-hs) var(--green-l));\n --grn-color-green6: hsl(var(--green-hs) 43%);\n --grn-color-green7: hsl(var(--green-hs) 32%);\n --grn-color-green8: hsl(var(--green-hs) 22%);\n --grn-color-green9: hsl(var(--green-hs) 18%);\n --grn-color-green10: hsl(var(--green-hs) 15%);\n --grn-color-green11: hsl(var(--green-hs) 11%);\n\n --grn-color-yellow1: hsl(var(--yellow-hs) 95%);\n --grn-color-yellow2: hsl(var(--yellow-hs) 88%);\n --grn-color-yellow3: hsl(var(--yellow-hs) 80%);\n --grn-color-yellow4: hsl(var(--yellow-hs) 70%);\n --grn-color-yellow5: hsl(var(--yellow-hs) var(--yellow-l));\n --grn-color-yellow6: hsl(var(--yellow-hs) 42%);\n --grn-color-yellow7: hsl(var(--yellow-hs) 32%);\n --grn-color-yellow8: hsl(var(--yellow-hs) 23%);\n --grn-color-yellow9: hsl(var(--yellow-hs) 16%);\n --grn-color-yellow10: hsl(var(--yellow-hs) 11%);\n --grn-color-yellow11: hsl(var(--yellow-hs) 9%);\n }\n\n :root {\n --shadeS-13: 20%;\n --shadeS-12: 22%;\n --shadeS-11: 15%;\n --shadeS-10: 12%;\n --shadeS-9: 9%;\n --shadeS-8: 7%;\n --shadeS-7: 5%;\n --shadeS-6: 6%;\n --shadeS-5: 7%;\n --shadeS-4: 7%;\n --shadeS-3: 7%;\n --shadeS-2: 6%;\n --shadeS-1: 6%;\n }\n\n :root {\n --shade13-s: var(--shadeS-13);\n --shade12-s: var(--shadeS-12);\n --shade11-s: var(--shadeS-11);\n --shade10-s: var(--shadeS-10);\n --shade9-s: var(--shadeS-9);\n --shade8-s: var(--shadeS-8);\n --shade7-s: var(--shadeS-7);\n --shade6-s: var(--shadeS-6);\n --shade5-s: var(--shadeS-5);\n --shade4-s: var(--shadeS-4);\n --shade3-s: var(--shadeS-3);\n --shade2-s: var(--shadeS-2);\n --shade1-s: var(--shadeS-1);\n }\n\n [data-theme='dark'], [data-theme='invert'] {\n --shade13-s: var(--shadeS-1);\n --shade12-s: var(--shadeS-2);\n --shade11-s: var(--shadeS-3);\n --shade10-s: var(--shadeS-4);\n --shade9-s: var(--shadeS-5);\n --shade8-s: var(--shadeS-6);\n --shade7-s: var(--shadeS-7);\n --shade6-s: var(--shadeS-8);\n --shade5-s: var(--shadeS-9);\n --shade4-s: var(--shadeS-10);\n --shade3-s: var(--shadeS-11);\n --shade2-s: var(--shadeS-12);\n --shade1-s: var(--shadeS-13);\n }\n\n :root {\n --grn-color-shadeTone13: hsl(var(--shade-h) var(--shade13-s) 10%);\n --grn-color-shadeTone12: hsl(var(--shade-h) var(--shade12-s) 11.5%);\n --grn-color-shadeTone11: hsl(var(--shade-h) var(--shade11-s) 15%);\n --grn-color-shadeTone10: hsl(var(--shade-h) var(--shade10-s) 21%);\n --grn-color-shadeTone9: hsl(var(--shade-h) var(--shade9-s) 28%);\n --grn-color-shadeTone8: hsl(var(--shade-h) var(--shade8-s) 38%);\n --grn-color-shadeTone7: hsl(var(--shade-h) var(--shade7-s) 51%);\n --grn-color-shadeTone6: hsl(var(--shade-h) var(--shade6-s) 70%);\n --grn-color-shadeTone5: hsl(var(--shade-h) var(--shade5-s) 82%);\n --grn-color-shadeTone4: hsl(var(--shade-h) var(--shade4-s) 90%);\n --grn-color-shadeTone3: hsl(var(--shade-h) var(--shade3-s) 95%);\n --grn-color-shadeTone2: hsl(var(--shade-h) var(--shade2-s) 97.5%);\n --grn-color-shadeTone1: hsl(var(--shade-h) var(--shade1-s) 100%);\n\n --fade10-a: 73%;\n --fade9-a: 66%;\n --fade8-a: 59%;\n --fade7-a: 52%;\n --fade6-a: 45%;\n --fade5-a: 38%;\n --fade4-a: 31%;\n --fade3-a: 23%;\n --fade2-a: 15%;\n --fade1-a: 8%;\n\n --fade-s: 20%;\n\n --grn-color-lightFade10: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade10-a));\n --grn-color-lightFade9: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade9-a));\n --grn-color-lightFade8: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade8-a));\n --grn-color-lightFade7: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade7-a));\n --grn-color-lightFade6: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade6-a));\n --grn-color-lightFade5: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade5-a));\n --grn-color-lightFade4: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade4-a));\n --grn-color-lightFade3: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade3-a));\n --grn-color-lightFade2: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade2-a));\n --grn-color-lightFade1: hsl(var(--shade-h) var(--fade-s) var(--wf-s) / var(--fade1-a));\n\n --grn-color-darkFade10: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade10-a));\n --grn-color-darkFade9: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade9-a));\n --grn-color-darkFade8: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade8-a));\n --grn-color-darkFade7: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade7-a));\n --grn-color-darkFade6: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade6-a));\n --grn-color-darkFade5: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade5-a));\n --grn-color-darkFade4: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade4-a));\n --grn-color-darkFade3: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade3-a));\n --grn-color-darkFade2: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade2-a));\n --grn-color-darkFade1: hsl(var(--shade-h) var(--fade-s) var(--bf-s) / var(--fade1-a));\n }\n\n :root {\n --grn-color-warning: var(--grn-color-yellow);\n --grn-color-danger: var(--grn-color-red);\n --grn-color-success: var(--grn-color-green);\n --grn-color-selection: var(--grn-color-blue);\n }\n";
|
|
2
2
|
export default core;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const theme = "\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --content-l: 20%;\n --background-l: 80%;\n --fade-l: var(--bf-s);\n --grn-color-floatingBackground: var(--grn-color-shade1);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --content-l: 80%;\n --background-l: 20%;\n --fade-l: var(--wf-s);\n --grn-color-floatingBackground: var(--grn-color-shade2);\n }\n\n /* light + dark */\n\n :root,\n [data-theme] {\n --grn-color-content: var(--grn-color-shade12);\n --grn-color-content2: var(--grn-color-fade7);\n --grn-color-content3: var(--grn-color-fade5);\n --grn-color-disabledContent: var(--grn-color-shade7);\n --grn-color-icon: var(--grn-color-fade7);\n --grn-color-disabledIcon: var(--grn-color-fade4);\n\n --grn-color-background: var(--grn-color-shade1);\n --grn-color-background2: var(--grn-color-shade2);\n --grn-color-background3: var(--grn-color-shade3);\n --grn-color-disabledBackground: var(--grn-color-shade4);\n\n --grn-color-border: hsl(var(--shade-hs) var(--content-l) / 12%);\n --grn-color-border2: hsl(var(--shade-hs) var(--content-l) / 20%);\n\n --grn-color-overlay: var(--grn-color-fade1);\n --grn-color-overlay2: var(--grn-color-fade2);\n }\n\n [data-experiment-darker-content-2-and-3=\"true\"] {\n --grn-color-content2: hsl(var(--shade-h) var(--fade-s) var(--content-l) / 67%);\n --grn-color-content3: hsl(var(--shade-h) var(--fade-s) var(--content-l) / 42%);\n }\n";
|
|
1
|
+
const theme = "\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n /* light */\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --content-l: 20%;\n --background-l: 80%;\n --fade-l: var(--bf-s);\n --grn-color-floatingBackground: var(--grn-color-shade1);\n }\n\n /* dark */\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --content-l: 80%;\n --background-l: 20%;\n --fade-l: var(--wf-s);\n --grn-color-floatingBackground: var(--grn-color-shade2);\n }\n\n /* light + dark */\n\n :root,\n [data-theme] {\n --grn-color-content: var(--grn-color-shade12);\n --grn-color-content2: var(--grn-color-fade7);\n --grn-color-content3: var(--grn-color-fade5);\n --grn-color-disabledContent: var(--grn-color-shade7);\n --grn-color-icon: var(--grn-color-fade7);\n --grn-color-disabledIcon: var(--grn-color-fade4);\n\n --grn-color-background: var(--grn-color-shade1);\n --grn-color-background2: var(--grn-color-shade2);\n --grn-color-background3: var(--grn-color-shade3);\n --grn-color-disabledBackground: var(--grn-color-shade4);\n\n --grn-color-border: hsl(var(--shade-hs) var(--content-l) / 12%);\n --grn-color-border2: hsl(var(--shade-hs) var(--content-l) / 20%);\n\n --grn-color-overlay: var(--grn-color-fade1);\n --grn-color-overlay2: var(--grn-color-fade2);\n }\n\n :root {\n --grn-color-contentWarning: var(--grn-color-yellow7);\n --grn-color-backgroundWarning: var(--grn-color-yellow5);\n --grn-color-onBackgroundWarning: var(--grn-color-yellow11);\n --grn-color-backgroundWarningSubtle: var(--grn-color-yellow2);\n --grn-color-onBackgroundWarningSubtle: var(--grn-color-yellow8);\n\n --grn-color-contentDanger: var(--grn-color-red6);\n --grn-color-backgroundDanger: var(--grn-color-red6);\n --grn-color-onBackgroundDanger: var(--grn-color-red1);\n --grn-color-backgroundDangerSubtle: var(--grn-color-red2);\n --grn-color-onBackgroundDangerSubtle: var(--grn-color-red8);\n\n --grn-color-contentSuccess: var(--grn-color-green6);\n --grn-color-backgroundSuccess: var(--grn-color-green6);\n --grn-color-onBackgroundSuccess: var(--grn-color-green1);\n --grn-color-backgroundSuccessSubtle: var(--grn-color-green2);\n --grn-color-onBackgroundSuccessSubtle: var(--grn-color-green8);\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-blue8);\n }\n\n [data-theme='dark'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-contentWarning: var(--grn-color-yellow5);\n --grn-color-backgroundWarningSubtle: var(--grn-color-yellow9);\n --grn-color-onBackgroundWarningSubtle: var(--grn-color-yellow2);\n\n --grn-color-contentDanger: var(--grn-color-red3);\n --grn-color-backgroundDangerSubtle: var(--grn-color-red9);\n --grn-color-onBackgroundDangerSubtle: var(--grn-color-red2);\n\n --grn-color-contentSuccess: var(--grn-color-green4);\n --grn-color-backgroundSuccessSubtle: var(--grn-color-green9);\n --grn-color-onBackgroundSuccessSubtle: var(--grn-color-green2);\n\n --grn-color-contentInfo: var(--grn-color-blue3);\n --grn-color-backgroundInfoSubtle: var(--grn-color-blue9);\n --grn-color-onBackgroundInfoSubtle: var(--grn-color-blue2);\n }\n\n [data-experiment-darker-content-2-and-3=\"true\"] {\n --grn-color-content2: hsl(var(--shade-h) var(--fade-s) var(--content-l) / 67%);\n --grn-color-content3: hsl(var(--shade-h) var(--fade-s) var(--content-l) / 42%);\n }\n";
|
|
2
2
|
export default theme;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import type { FC, HTMLAttributes } from 'react';
|
|
2
2
|
import { MenuPlacement } from '../foundational/menu';
|
|
3
|
+
import { DimensionPropType } from '../shared';
|
|
3
4
|
|
|
4
5
|
export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
6
|
placement?: MenuPlacement;
|
|
6
7
|
content?: React.ReactNode;
|
|
7
8
|
hasPortal?: boolean;
|
|
8
9
|
zIndex?: number;
|
|
10
|
+
maxWidth?: DimensionPropType;
|
|
9
11
|
placementMethod?: 'static' | 'dynamic';
|
|
10
12
|
offset?: 'xs' | 's';
|
|
11
13
|
children?: React.ReactNode;
|
|
@@ -5,7 +5,7 @@ export interface ColorGroups {
|
|
|
5
5
|
shades: Record<string, string>;
|
|
6
6
|
fades: Record<string, string>;
|
|
7
7
|
bases: Record<string, string>;
|
|
8
|
-
|
|
8
|
+
statuses: Record<string, string>;
|
|
9
9
|
contents: Record<string, string>;
|
|
10
10
|
backgrounds: Record<string, string>;
|
|
11
11
|
borders: Record<string, string>;
|
package/es/variables/colors.js
CHANGED
|
@@ -71,10 +71,80 @@ export const colors = {
|
|
|
71
71
|
yellow: 'yellow',
|
|
72
72
|
green: 'green'
|
|
73
73
|
},
|
|
74
|
-
|
|
74
|
+
colorShades: {
|
|
75
|
+
blue1: 'blue1',
|
|
76
|
+
blue2: 'blue2',
|
|
77
|
+
blue3: 'blue3',
|
|
78
|
+
blue4: 'blue4',
|
|
79
|
+
blue5: 'blue5',
|
|
80
|
+
blue6: 'blue6',
|
|
81
|
+
blue7: 'blue7',
|
|
82
|
+
blue8: 'blue8',
|
|
83
|
+
blue9: 'blue9',
|
|
84
|
+
blue10: 'blue10',
|
|
85
|
+
blue11: 'blue11',
|
|
86
|
+
red1: 'red1',
|
|
87
|
+
red2: 'red2',
|
|
88
|
+
red3: 'red3',
|
|
89
|
+
red4: 'red4',
|
|
90
|
+
red5: 'red5',
|
|
91
|
+
red6: 'red6',
|
|
92
|
+
red7: 'red7',
|
|
93
|
+
red8: 'red8',
|
|
94
|
+
red9: 'red9',
|
|
95
|
+
red10: 'red10',
|
|
96
|
+
red11: 'red11',
|
|
97
|
+
green1: 'green1',
|
|
98
|
+
green2: 'green2',
|
|
99
|
+
green3: 'green3',
|
|
100
|
+
green4: 'green4',
|
|
101
|
+
green5: 'green5',
|
|
102
|
+
green6: 'green6',
|
|
103
|
+
green7: 'green7',
|
|
104
|
+
green8: 'green8',
|
|
105
|
+
green9: 'green9',
|
|
106
|
+
green10: 'green10',
|
|
107
|
+
green11: 'green11',
|
|
108
|
+
yellow1: 'yellow1',
|
|
109
|
+
yellow2: 'yellow2',
|
|
110
|
+
yellow3: 'yellow3',
|
|
111
|
+
yellow4: 'yellow4',
|
|
112
|
+
yellow5: 'yellow5',
|
|
113
|
+
yellow6: 'yellow6',
|
|
114
|
+
yellow7: 'yellow7',
|
|
115
|
+
yellow8: 'yellow8',
|
|
116
|
+
yellow9: 'yellow9',
|
|
117
|
+
yellow10: 'yellow10',
|
|
118
|
+
yellow11: 'yellow11'
|
|
119
|
+
},
|
|
120
|
+
statuses: {
|
|
121
|
+
contentWarning: 'contentWarning',
|
|
122
|
+
backgroundWarning: 'backgroundWarning',
|
|
123
|
+
onBackgroundWarning: 'onBackgroundWarning',
|
|
124
|
+
backgroundWarningSubtle: 'backgroundWarningSubtle',
|
|
125
|
+
onBackgroundWarningSubtle: 'onBackgroundWarningSubtle',
|
|
126
|
+
contentDanger: 'contentDanger',
|
|
127
|
+
backgroundDanger: 'backgroundDanger',
|
|
128
|
+
onBackgroundDanger: 'onBackgroundDanger',
|
|
129
|
+
backgroundDangerSubtle: 'backgroundDangerSubtle',
|
|
130
|
+
onBackgroundDangerSubtle: 'onBackgroundDangerSubtle',
|
|
131
|
+
contentSuccess: 'contentSuccess',
|
|
132
|
+
backgroundSuccess: 'backgroundSuccess',
|
|
133
|
+
onBackgroundSuccess: 'onBackgroundSuccess',
|
|
134
|
+
backgroundSuccessSubtle: 'backgroundSuccessSubtle',
|
|
135
|
+
onBackgroundSuccessSubtle: 'onBackgroundSuccessSubtle',
|
|
136
|
+
contentInfo: 'contentInfo',
|
|
137
|
+
backgroundInfo: 'backgroundInfo',
|
|
138
|
+
onBackgroundInfo: 'onBackgroundInfo',
|
|
139
|
+
backgroundInfoSubtle: 'backgroundInfoSubtle',
|
|
140
|
+
onBackgroundInfoSubtle: 'onBackgroundInfoSubtle'
|
|
141
|
+
},
|
|
142
|
+
deprecated: {
|
|
75
143
|
warning: 'warning',
|
|
76
144
|
danger: 'danger',
|
|
77
|
-
success: 'success'
|
|
145
|
+
success: 'success'
|
|
146
|
+
},
|
|
147
|
+
others: {
|
|
78
148
|
selection: 'selection'
|
|
79
149
|
},
|
|
80
150
|
contents: {
|
package/es/variables/vars.js
CHANGED
|
@@ -53,7 +53,7 @@ export const vars = {
|
|
|
53
53
|
xFast: 'xFast',
|
|
54
54
|
xxFast: 'xxFast'
|
|
55
55
|
},
|
|
56
|
-
colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.shadeTones), colors.shades), colors.fades), colors.darkFades), colors.lightFades), colors.bases), colors.internals), colors.
|
|
56
|
+
colors: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colors.shadeTones), colors.shades), colors.fades), colors.darkFades), colors.lightFades), colors.bases), colors.colorShades), colors.internals), colors.statuses), colors.contents), colors.backgrounds), colors.borders), colors.others), colors.deprecated)
|
|
57
57
|
};
|
|
58
58
|
export const varInfo = {
|
|
59
59
|
texts: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flodesk/grain",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.58.0",
|
|
4
4
|
"description": "Flodesk design system",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"types": "es/types/index.d.ts",
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"@semantic-release/npm": "^9.0.1",
|
|
57
57
|
"@types/react": "^16.14.62",
|
|
58
58
|
"@types/react-dom": "^16.9.25",
|
|
59
|
+
"apca-w3": "^0.1.9",
|
|
59
60
|
"colord": "^2.9.2",
|
|
60
61
|
"cross-env": "^7.0.3",
|
|
61
62
|
"del-cli": "^4.0.1",
|