@flodesk/grain 11.66.3 → 11.68.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
|
@@ -16,10 +16,9 @@ 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(--shade-hs) var(--background-l) / var(--fade10-a))';
|
|
20
19
|
const variantColors = {
|
|
21
20
|
accent: {
|
|
22
|
-
icon:
|
|
21
|
+
icon: 'lightFade10',
|
|
23
22
|
content: 'shade2',
|
|
24
23
|
border: 'transparent',
|
|
25
24
|
background: 'shade12',
|
|
@@ -27,12 +26,12 @@ const variantColors = {
|
|
|
27
26
|
backgroundActive: 'shade9'
|
|
28
27
|
},
|
|
29
28
|
danger: {
|
|
30
|
-
icon: 'hsl(0 0% 100% / var(--
|
|
29
|
+
icon: 'hsl(0 0% 100% / var(--fade10-a))',
|
|
31
30
|
content: 'onBackgroundDanger',
|
|
32
31
|
border: 'transparent',
|
|
33
32
|
background: 'backgroundDanger',
|
|
34
|
-
backgroundHover: '
|
|
35
|
-
backgroundActive: '
|
|
33
|
+
backgroundHover: 'color-mix(in hsl, var(--grn-color-red7), var(--grn-color-red6))',
|
|
34
|
+
backgroundActive: 'color-mix(in hsl, var(--grn-color-red6), var(--grn-color-red6))'
|
|
36
35
|
},
|
|
37
36
|
neutral: {
|
|
38
37
|
icon: 'icon',
|
|
@@ -79,7 +78,7 @@ const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "product
|
|
|
79
78
|
hasSpinner
|
|
80
79
|
} = _ref5;
|
|
81
80
|
return hasSpinner && "\n opacity: 0;\n transition: opacity ".concat(getTransition('fast'), ";\n ");
|
|
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,
|
|
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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi5qc3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkQ2QiIsImZpbGUiOiIuLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgZ2V0Q29sb3IsIGdldFNwYWNlLCBnZXRUcmFuc2l0aW9uIH0gZnJvbSAnLi4vdXRpbGl0aWVzJztcbmltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcbmltcG9ydCB7IFNwaW5uZXIgfSBmcm9tICcuL3NwaW5uZXInO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuL2JveCc7XG5pbXBvcnQgeyBUZXh0IH0gZnJvbSAnLi90ZXh0JztcbmltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuY29uc3QgdmFyaWFudENvbG9ycyA9IHtcbiAgYWNjZW50OiB7XG4gICAgaWNvbjogJ2xpZ2h0RmFkZTEwJyxcbiAgICBjb250ZW50OiAnc2hhZGUyJyxcbiAgICBib3JkZXI6ICd0cmFuc3BhcmVudCcsXG4gICAgYmFja2dyb3VuZDogJ3NoYWRlMTInLFxuICAgIGJhY2tncm91bmRIb3ZlcjogJ3NoYWRlMTAnLFxuICAgIGJhY2tncm91bmRBY3RpdmU6ICdzaGFkZTknLFxuICB9LFxuICBkYW5nZXI6IHtcbiAgICBpY29uOiAnaHNsKDAgMCUgMTAwJSAvIHZhcigtLWZhZGUxMC1hKSknLFxuICAgIGNvbnRlbnQ6ICdvbkJhY2tncm91bmREYW5nZXInLFxuICAgIGJvcmRlcjogJ3RyYW5zcGFyZW50JyxcbiAgICBiYWNrZ3JvdW5kOiAnYmFja2dyb3VuZERhbmdlcicsXG4gICAgYmFja2dyb3VuZEhvdmVyOiAnY29sb3ItbWl4KGluIGhzbCwgdmFyKC0tZ3JuLWNvbG9yLXJlZDcpLCB2YXIoLS1ncm4tY29sb3ItcmVkNikpJyxcbiAgICBiYWNrZ3JvdW5kQWN0aXZlOiAnY29sb3ItbWl4KGluIGhzbCwgdmFyKC0tZ3JuLWNvbG9yLXJlZDYpLCB2YXIoLS1ncm4tY29sb3ItcmVkNikpJyxcbiAgfSxcbiAgbmV1dHJhbDoge1xuICAgIGljb246ICdpY29uJyxcbiAgICBjb250ZW50OiAnY29udGVudCcsXG4gICAgYm9yZGVyOiAnZmFkZTQnLFxuICAgIGJvcmRlckhvdmVyOiAnZmFkZTYnLFxuICAgIGJvcmRlckFjdGl2ZTogJ3NoYWRlOCcsXG4gICAgYmFja2dyb3VuZDogJ3RyYW5zcGFyZW50JyxcbiAgfSxcbn07XG5cbmNvbnN0IGZhZGVJbiA9IGtleWZyYW1lc2BcbiAgMCUsIDI1JSB7IG9wYWNpdHk6IDAgfVxuYDtcblxuY29uc3QgdGFnU3R5bGVzID0ge1xuICBhOiBgXG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIHdpZHRoOiBmaXQtY29udGVudDtcblxuICAgICY6aG92ZXIge1xuICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIH1cbiAgYCxcbiAgYnV0dG9uOiBgYCxcbiAgc3BhbjogYFxuICAgIHdpZHRoOiBmaXQtY29udGVudDtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gIGAsXG59O1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtzdHlsZXMudHJhbnNpdGlvbnN9O1xuICAke3N0eWxlcy5idXR0b25SZXNldH07XG5cbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci13aWR0aDogdmFyKC0tZ3JuLWJvcmRlci1zaXplKTtcbiAgYm9yZGVyLXN0eWxlOiBzb2xpZDtcbiAgYm9yZGVyLXJhZGl1czogJHsoeyBzaXplIH0pID0+IGB2YXIoLS1ncm4tdGV4dGJveC1yYWRpdXMtJHtzaXplfSlgfTtcbiAgaGVpZ2h0OiAkeyh7IHNpemUgfSkgPT4gYHZhcigtLWdybi10ZXh0Ym94LWhlaWdodC0ke3NpemV9KWB9O1xuICBwYWRkaW5nLWJsb2NrOiAwO1xuICBwYWRkaW5nLWlubGluZTogJHsoeyBzaXplIH0pID0+IGB2YXIoLS1ncm4tdGV4dGJveC1wYWRkaW5nWC0ke3NpemV9KWB9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGdhcDogMTJweDtcbiAgJHtwID0+IHAuaGFzRnVsbFdpZHRoICYmIGB3aWR0aDogMTAwJWB9O1xuICAke3AgPT4gdGFnU3R5bGVzW3AuYXNdfTtcblxuICAkeyh7IHZhcmlhbnQgfSkgPT4gYFxuICAgIC0taWNvbkNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uaWNvbil9O1xuICAgIGJvcmRlci1jb2xvcjogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlcil9O1xuICAgIGNvbG9yOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uY29udGVudCl9O1xuICAgIGJhY2tncm91bmQ6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5iYWNrZ3JvdW5kKX07XG5cbiAgICBAbWVkaWEoaG92ZXI6IGhvdmVyKSB7XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgLS1pY29uQ29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgICAgICAgJHtcbiAgICAgICAgICB2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJhY2tncm91bmRIb3ZlciAmJlxuICAgICAgICAgIGBiYWNrZ3JvdW5kOiAke2dldENvbG9yKHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYmFja2dyb3VuZEhvdmVyKX1gXG4gICAgICAgIH07XG4gICAgICAgICR7XG4gICAgICAgICAgdmFyaWFudENvbG9yc1t2YXJpYW50XS5ib3JkZXJIb3ZlciAmJlxuICAgICAgICAgIGBib3JkZXItY29sb3I6JHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlckhvdmVyKX1gXG4gICAgICAgIH07XG5cbiAgICAgICAgLy8gc2V0IGNvbG9yIHRvIHByZXZlbnQgaW5oZXJpdGluZyBmcm9tIG91dGlzZGUgcmVzZXRcbiAgICAgICAgY29sb3I6ICR7Z2V0Q29sb3IodmFyaWFudENvbG9yc1t2YXJpYW50XS5jb250ZW50KX07XG4gICAgICB9XG5cbiAgICAgICY6YWN0aXZlIHtcbiAgICAgICAgJHtcbiAgICAgICAgICB2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJhY2tncm91bmRBY3RpdmUgJiZcbiAgICAgICAgICBgYmFja2dyb3VuZDogJHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJhY2tncm91bmRBY3RpdmUpfWBcbiAgICAgICAgfTtcbiAgICAgICAgICR7XG4gICAgICAgICAgIHZhcmlhbnRDb2xvcnNbdmFyaWFudF0uYm9yZGVyQWN0aXZlICYmXG4gICAgICAgICAgIGBib3JkZXItY29sb3I6JHtnZXRDb2xvcih2YXJpYW50Q29sb3JzW3ZhcmlhbnRdLmJvcmRlckFjdGl2ZSl9YFxuICAgICAgICAgfTtcbiAgICAgIH1cbiAgICB9XG4gIGB9XG5cbiAgJjpkaXNhYmxlZCB7XG4gICAgLS1pY29uQ29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkSWNvbicpfTtcbiAgICBjb2xvcjogJHtnZXRDb2xvcignZGlzYWJsZWRDb250ZW50Jyl9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0Q29sb3IoJ2Rpc2FibGVkQmFja2dyb3VuZCcpfTtcbiAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICB9XG5cbiAgLkljb24ge1xuICAgICR7cCA9PiBwLmljb25Qb3NpdGlvbiA9PT0gJ3JpZ2h0JyAmJiBgb3JkZXI6IDFgfTtcbiAgICAke3N0eWxlcy50cmFuc2l0aW9uc307XG4gIH1cblxuICAuYnV0dG9uVGV4dCxcbiAgLkljb24ge1xuICAgICR7KHsgaGFzU3Bpbm5lciB9KSA9PlxuICAgICAgaGFzU3Bpbm5lciAmJlxuICAgICAgYFxuICAgICAgb3BhY2l0eTogMDtcbiAgICAgIHRyYW5zaXRpb246IG9wYWNpdHkgJHtnZXRUcmFuc2l0aW9uKCdmYXN0Jyl9O1xuICAgIGB9XG4gIH1cblxuICAuYnV0dG9uU3Bpbm5lciB7XG4gICAgYW5pbWF0aW9uOiAke2ZhZGVJbn0gJHtnZXRUcmFuc2l0aW9uKCdzbG93Jyl9O1xuICB9XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1yb3VuZGVkLWJ1dHRvbl0gJiB7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tZ3JuLXRleHRib3gtaGVpZ2h0LW0pO1xuICB9XG5cbiAgW2RhdGEtZXhwZXJpbWVudC1jb21wYWN0LXRleHRib3hdICYge1xuICAgIHBhZGRpbmc6IDAgJHtnZXRTcGFjZSgnczInKX07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBCdXR0b24gPSBmb3J3YXJkUmVmKGZ1bmN0aW9uIEJ1dHRvbihcbiAge1xuICAgIGNoaWxkcmVuLFxuICAgIHZhcmlhbnQgPSAnbmV1dHJhbCcsXG4gICAgaXNEaXNhYmxlZCxcbiAgICBpY29uLFxuICAgIGljb25Qb3NpdGlvbiA9ICdsZWZ0JyxcbiAgICBoYXNGdWxsV2lkdGgsXG4gICAgaGFzU3Bpbm5lcixcbiAgICB0eXBlID0gJ2J1dHRvbicsXG4gICAgdGFnID0gJ2J1dHRvbicsXG4gICAgc2l6ZSA9ICdtJyxcbiAgICAuLi5wcm9wc1xuICB9LFxuICByZWYsXG4pIHtcbiAgcmV0dXJuIChcbiAgICA8V3JhcHBlclxuICAgICAgdHlwZT17dHlwZX1cbiAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgIGljb249e2ljb259XG4gICAgICBpY29uUG9zaXRpb249e2ljb25Qb3NpdGlvbn1cbiAgICAgIGhhc0Z1bGxXaWR0aD17aGFzRnVsbFdpZHRofVxuICAgICAgaGFzU3Bpbm5lcj17aGFzU3Bpbm5lcn1cbiAgICAgIHJlZj17cmVmfVxuICAgICAgYXM9e3RhZ31cbiAgICAgIHNpemU9e3NpemV9XG4gICAgICB7Li4ucHJvcHN9XG4gICAgPlxuICAgICAge2hhc1NwaW5uZXIgJiYgKFxuICAgICAgICA8Qm94IHBvc2l0aW9uPVwiYWJzb2x1dGVcIiBjbGFzc05hbWU9XCJidXR0b25TcGlubmVyXCI+XG4gICAgICAgICAgPFNwaW5uZXIgY29sb3I9XCJjdXJyZW50Q29sb3JcIiAvPlxuICAgICAgICA8L0JveD5cbiAgICAgICl9XG4gICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSBjb2xvcj1cInZhcigtLWljb25Db2xvcilcIiAvPn1cbiAgICAgIDxUZXh0IGNsYXNzTmFtZT1cImJ1dHRvblRleHRcIj57Y2hpbGRyZW59PC9UZXh0PlxuICAgIDwvV3JhcHBlcj5cbiAgKTtcbn0pO1xuXG5CdXR0b24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IFByb3BUeXBlcy5ub2RlLFxuICBpY29uUG9zaXRpb246IHR5cGVzLmljb25Qb3NpdGlvbixcbiAgdmFyaWFudDogdHlwZXMuYnV0dG9uVmFyaWFudCxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBoYXNGdWxsV2lkdGg6IFByb3BUeXBlcy5ib29sLFxuICBoYXNTcGlubmVyOiBQcm9wVHlwZXMuYm9vbCxcbiAgdHlwZTogdHlwZXMuYnV0dG9uVHlwZSxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG4gIHNpemU6IFByb3BUeXBlcy5vbmVPZihbJ20nLCAnbCddKSxcbn07XG4iXX0= */"));
|
|
83
82
|
export const Button = /*#__PURE__*/forwardRef(function Button(_ref6, ref) {
|
|
84
83
|
let {
|
|
85
84
|
children,
|
package/es/styles/card.js
CHANGED
|
@@ -8,38 +8,32 @@ export const cardRanges = [{
|
|
|
8
8
|
min: bp1,
|
|
9
9
|
max: bp2 - 1,
|
|
10
10
|
padding: 'm',
|
|
11
|
-
radius: 'm'
|
|
12
|
-
titleSize: 'l'
|
|
11
|
+
radius: 'm'
|
|
13
12
|
}, {
|
|
14
13
|
min: bp2,
|
|
15
14
|
max: bp3 - 1,
|
|
16
15
|
padding: 'l',
|
|
17
|
-
radius: 'm'
|
|
18
|
-
titleSize: 'l'
|
|
16
|
+
radius: 'm'
|
|
19
17
|
}, {
|
|
20
18
|
min: bp3,
|
|
21
19
|
max: bp4 - 1,
|
|
22
20
|
padding: 'l2',
|
|
23
|
-
radius: 'l'
|
|
24
|
-
titleSize: 'xl'
|
|
21
|
+
radius: 'l'
|
|
25
22
|
}, {
|
|
26
23
|
min: bp4,
|
|
27
24
|
max: bp5 - 1,
|
|
28
25
|
padding: 'xl',
|
|
29
|
-
radius: 'l'
|
|
30
|
-
titleSize: 'xl'
|
|
26
|
+
radius: 'l'
|
|
31
27
|
}, {
|
|
32
28
|
min: bp5,
|
|
33
29
|
max: bp6 - 1,
|
|
34
30
|
padding: 'xl2',
|
|
35
|
-
radius: 'l'
|
|
36
|
-
titleSize: 'xl'
|
|
31
|
+
radius: 'l'
|
|
37
32
|
}, {
|
|
38
33
|
min: bp6,
|
|
39
34
|
max: 100000,
|
|
40
35
|
padding: 'xxl',
|
|
41
|
-
radius: 'l'
|
|
42
|
-
titleSize: 'xl'
|
|
36
|
+
radius: 'l'
|
|
43
37
|
}];
|
|
44
38
|
const 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");
|
|
45
39
|
|
package/es/styles/colors/core.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const core = "\n :root,\n [data-experiment-new-brand-colors] {\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 [data-experiment-new-brand-colors] {\n --blue-h: 218;\n --blue-s: 74%;\n --blue-l: 54%;\n\n --red-h: 6;\n --red-s: 62%;\n --red-l: 52%;\n --red-hs: var(--red-h) var(--red-s);\n\n --green-h: 154;\n --green-s: 38%;\n --green-l: 57%;\n\n --yellow-h: 44;\n --yellow-s: 99%;\n --yellow-l: 59%;\n\n --grn-color-blue: hsl(var(--blue-h) var(--blue-s) var(--blue-l));\n --grn-color-red: hsl(var(--red-h) var(--red-s) var(--red-l));\n --grn-color-yellow: hsl(var(--yellow-h) var(--yellow-s) var(--yellow-l));\n --grn-color-green: hsl(var(--green-h) 22% var(--green-l));\n }\n\n :root,\n [data-experiment-new-brand-colors] {\n --grn-color-blue1: hsl(var(--blue-h) calc(var(--blue-s) - 30%) 96%);\n --grn-color-blue2: hsl(var(--blue-h) calc(var(--blue-s) - 20%) 91%);\n --grn-color-blue3: hsl(var(--blue-h) calc(var(--blue-s) - 10%) 82%);\n --grn-color-blue4: hsl(var(--blue-h) calc(var(--blue-s) - 5%) 75%);\n --grn-color-blue5: hsl(var(--blue-h) calc(var(--blue-s) - 2%) 64%);\n --grn-color-blue6: hsl(var(--blue-h) var(--blue-s) 50%);\n --grn-color-blue7: hsl(var(--blue-h) var(--blue-s) 40%);\n --grn-color-blue8: hsl(var(--blue-h) calc(var(--blue-s) - 2%) 33%);\n --grn-color-blue9: hsl(var(--blue-h) calc(var(--blue-s) - 5%) 28%);\n --grn-color-blue10: hsl(var(--blue-h) calc(var(--blue-s) - 10%) 22%);\n --grn-color-blue11: hsl(var(--blue-h) calc(var(--blue-s) - 20%) 18%);\n --grn-color-blue12: hsl(var(--blue-h) calc(var(--blue-s) - 30%) 14%);\n\n --grn-color-green1: hsl(var(--green-h) calc(var(--green-s) - 30%) 96%);\n --grn-color-green2: hsl(var(--green-h) calc(var(--green-s) - 20%) 91%);\n --grn-color-green3: hsl(var(--green-h) calc(var(--green-s) - 10%) 78%);\n --grn-color-green4: hsl(var(--green-h) calc(var(--green-s) - 5%) 65%);\n --grn-color-green5: hsl(var(--green-h) calc(var(--green-s) - 2%) 50%);\n --grn-color-green6: hsl(var(--green-h) var(--green-s) 42%);\n --grn-color-green7: hsl(var(--green-h) var(--green-s) 35%);\n --grn-color-green8: hsl(var(--green-h) calc(var(--green-s) - 2%) 28%);\n --grn-color-green9: hsl(var(--green-h) calc(var(--green-s) - 5%) 22%);\n --grn-color-green10: hsl(var(--green-h) calc(var(--green-s) - 10%) 20%);\n --grn-color-green11: hsl(var(--green-h) calc(var(--green-s) - 20%) 18%);\n --grn-color-green12: hsl(var(--green-h) calc(var(--green-s) - 30%) 14%);\n\n --grn-color-yellow1: hsl(var(--yellow-h) calc(var(--yellow-s) - 30%) 96%);\n --grn-color-yellow2: hsl(var(--yellow-h) calc(var(--yellow-s) - 20%) 91%);\n --grn-color-yellow3: hsl(var(--yellow-h) calc(var(--yellow-s) - 10%) 82%);\n --grn-color-yellow4: hsl(var(--yellow-h) calc(var(--yellow-s) - 5%) 75%);\n --grn-color-yellow5: hsl(var(--yellow-h) calc(var(--yellow-s) - 2%) 64%);\n --grn-color-yellow6: hsl(var(--yellow-h) var(--yellow-s) 48%);\n --grn-color-yellow7: hsl(calc(var(--yellow-h) - 2) var(--yellow-s) 42%);\n --grn-color-yellow8: hsl(calc(var(--yellow-h) - 4) calc(var(--yellow-s) - 2%) 34%);\n --grn-color-yellow9: hsl(calc(var(--yellow-h) - 6) calc(var(--yellow-s) - 5%) 28%);\n --grn-color-yellow10: hsl(calc(var(--yellow-h) - 8) calc(var(--yellow-s) - 10%) 22%);\n --grn-color-yellow11: hsl(calc(var(--yellow-h) - 10) calc(var(--yellow-s) - 20%) 18%);\n --grn-color-yellow12: hsl(calc(var(--yellow-h) - 12) calc(var(--yellow-s) - 30%) 14%);\n\n --grn-color-red1: hsl(var(--red-h) calc(var(--red-s) - 30%) 96%);\n --grn-color-red2: hsl(var(--red-h) calc(var(--red-s) - 20%) 91%);\n --grn-color-red3: hsl(var(--red-h) calc(var(--red-s) - 10%) 82%);\n --grn-color-red4: hsl(var(--red-h) calc(var(--red-s) - 5%) 71%);\n --grn-color-red5: hsl(var(--red-h) calc(var(--red-s) - 2%) 60%);\n --grn-color-red6: hsl(var(--red-h) var(--red-s) 48%);\n --grn-color-red7: hsl(var(--red-h) var(--red-s) 40%);\n --grn-color-red8: hsl(var(--red-h) calc(var(--red-s) - 2%) 33%);\n --grn-color-red9: hsl(var(--red-h) calc(var(--red-s) - 5%) 28%);\n --grn-color-red10: hsl(var(--red-h) calc(var(--red-s) - 10%) 22%);\n --grn-color-red11: hsl(var(--red-h) calc(var(--red-s) - 20%) 18%);\n --grn-color-red12: hsl(var(--red-h) calc(var(--red-s) - 30%) 14%);\n }\n\n :root,\n [data-experiment-new-brand-colors] {\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 [data-experiment-new-brand-colors] {\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 [data-experiment-new-brand-colors] {\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\n [data-experiment-new-brand-colors=\"true\"] {\n --shade-h: 60;\n --shade-s: 2%;\n\n --blue-h: 220;\n --blue-s: 50%;\n --blue-l: 54%;\n\n --red-h: 13;\n --red-s: 68%;\n --red-l: 52%;\n --red-hs: var(--red-h) var(--red-s);\n\n --green-h: 95;\n --green-s: 32%;\n --green-l: 57%;\n\n --yellow-h: 51;\n --yellow-s: 70%;\n --yellow-l: 59%;\n\n --shadeS-13: 3.00%;\n --shadeS-12: 2.90%;\n --shadeS-11: 1.90%;\n --shadeS-10: 2.20%;\n --shadeS-9: 2.00%;\n --shadeS-8: 2.40%;\n --shadeS-7: 3.20%;\n --shadeS-6: 3.70%;\n --shadeS-5: 5.20%;\n --shadeS-4: 8.00%;\n --shadeS-3: 9.10%;\n --shadeS-2: 12.50%;\n --shadeS-1: 14.30%;\n\n --grn-color-shadeTone13: hsl(var(--shade-h) var(--shade13-s) 0%);\n --grn-color-shadeTone12: hsl(var(--shade-h) var(--shade12-s) 6%);\n --grn-color-green7: hsl(var(--green-h) var(--green-s) 34%);\n\n --grn-color-selection: hsl(218 74% 54%);\n }\n";
|
|
1
|
+
const core = "\n :root {\n --shade-h: 60;\n --bf-s: 20%;\n --wf-s: calc(100% - var(--bf-s));\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 --shadeS-13: 3.00%;\n --shadeS-12: 2.90%;\n --shadeS-11: 1.90%;\n --shadeS-10: 2.20%;\n --shadeS-9: 2.00%;\n --shadeS-8: 2.40%;\n --shadeS-7: 3.20%;\n --shadeS-6: 3.70%;\n --shadeS-5: 5.20%;\n --shadeS-4: 8.00%;\n --shadeS-3: 9.10%;\n --shadeS-2: 12.50%;\n --shadeS-1: 14.30%;\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) 0%);\n --grn-color-shadeTone12: hsl(var(--shade-h) var(--shade12-s) 6%);\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: 14%;\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) 9% var(--bf-s) / var(--fade10-a));\n --grn-color-darkFade9: hsl(var(--shade-h) 10% var(--bf-s) / var(--fade9-a));\n --grn-color-darkFade8: hsl(var(--shade-h) 11% var(--bf-s) / var(--fade8-a));\n --grn-color-darkFade7: hsl(var(--shade-h) 12% var(--bf-s) / var(--fade7-a));\n --grn-color-darkFade6: hsl(var(--shade-h) 13% var(--bf-s) / var(--fade6-a));\n --grn-color-darkFade5: hsl(var(--shade-h) 14% var(--bf-s) / var(--fade5-a));\n --grn-color-darkFade4: hsl(var(--shade-h) 14% var(--bf-s) / var(--fade4-a));\n --grn-color-darkFade3: hsl(var(--shade-h) 14% var(--bf-s) / var(--fade3-a));\n --grn-color-darkFade2: hsl(var(--shade-h) 14% var(--bf-s) / var(--fade2-a));\n --grn-color-darkFade1: hsl(var(--shade-h) 14% 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 :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert']
|
|
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-s);\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-s);\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-red7), transparent 40%);\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\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 --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 --grn-color-overlayDanger: color-mix(in hsl, var(--grn-color-red7), transparent 88%);\n --grn-color-overlayDanger2: color-mix(in hsl, var(--grn-color-red7), transparent 80%);\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(--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,7 +1,7 @@
|
|
|
1
1
|
const legacyVariables = "\n :root {\n --grn-textbox-textSize-s: var(--grn-text-s);\n }\n";
|
|
2
2
|
export const borderVariables = "\n :root {\n --grn-border-size: 1px;\n }\n";
|
|
3
|
-
const capValue = "\n :root {\n @supports not (font-size: 1cap) { --grn-cap-value: 0.74em }\n @supports (font-size: 1cap) { --grn-cap-value: 1cap }\n }\n";
|
|
4
|
-
export const capVariables = "\n :root {\n --grn-cap: var(--grn-cap-value);\n }\n";
|
|
3
|
+
const capValue = "\n :root {\n @supports not (font-size: 1cap) { --grn-cap-value: 0.74em }\n @supports (font-size: 1cap) { --grn-cap-value: 1cap }\n\n @supports not (height: 1lh) { --grn-lh-value: var(--grn-lineHeight-global) }\n @supports (height: 1lh) { --grn-lh-value: 1lh }\n }\n";
|
|
4
|
+
export const capVariables = "\n :root {\n --grn-cap: var(--grn-cap-value);\n --grn-lh: var(--grn-lh-value);\n\n --grn-cap-lh-offset: calc((var(--grn-lh) - var(--grn-cap)) / 2);\n --grn-cap-lh-offset-neg: calc((var(--grn-lh) - var(--grn-cap)) / -2);\n }\n";
|
|
5
5
|
export const fieldVariables = "\n :root, [data-theme] {\n --grn-field-paddingX: var(--grn-space-s2);\n --grn-field-paddingX-m: var(--grn-space-s2);\n --grn-field-paddingX-l: var(--grn-textbox-paddingX-l);\n\n --grn-field-border-color: var(--grn-color-fade3);\n --grn-field-border-color-hover: var(--grn-color-fade6);\n --grn-field-border-color-focus: var(--grn-color-shade9);\n --grn-field-border-color-disabled: var(--grn-color-shade5);\n --grn-field-background-disabled: var(--grn-color-shade2);\n --grn-field-placeholder-color: var(--grn-color-shade7);\n }\n";
|
|
6
6
|
const experiments = "\n [data-experiment-compact-textbox=\"true\"] {\n --grn-textBoxHeight: 36px;\n\n --grn-textbox-height-m: 36px;\n --grn-textbox-paddingX-m: var(--grn-space-s2);\n }\n :root [data-experiment-lighter-fields='true'],\n [data-theme][data-experiment-lighter-fields='true'] {\n --grn-field-border-color: var(--grn-color-fade2);\n }\n\n [data-experiment-match-button-and-field-padding=\"true\"] {\n --grn-field-paddingX: 14px;\n --grn-field-paddingX-m: 14px;\n --grn-textbox-paddingX-m: 14px;\n }\n";
|
|
7
7
|
export const textboxVariables = "\n :root {\n --grn-textbox-height-s: 28px;\n --grn-textbox-paddingX-s: var(--grn-space-s);\n --grn-textbox-radius-s: var(--grn-radius-xs);\n --grn-textbox-text-s: var(--grn-text-s);\n\n --grn-textbox-height-m: 40px;\n --grn-textbox-paddingX-m: var(--grn-space-m);\n --grn-textbox-radius-m: var(--grn-radius-s);\n --grn-textbox-text-m: var(--grn-text-m);\n\n --grn-textbox-height-l: 48px;\n --grn-textbox-paddingX-l: 18px;\n --grn-textbox-radius-l: var(--grn-radius-m);\n --grn-textbox-text-l: var(--grn-text-m);\n }\n";
|
package/es/variables/colors.js
CHANGED
|
@@ -122,16 +122,16 @@ export const colors = {
|
|
|
122
122
|
red12: 'red12'
|
|
123
123
|
},
|
|
124
124
|
statuses: {
|
|
125
|
-
contentWarning: 'contentWarning',
|
|
126
|
-
backgroundWarning: 'backgroundWarning',
|
|
127
|
-
onBackgroundWarning: 'onBackgroundWarning',
|
|
128
|
-
backgroundWarningSubtle: 'backgroundWarningSubtle',
|
|
129
|
-
onBackgroundWarningSubtle: 'onBackgroundWarningSubtle',
|
|
130
125
|
contentDanger: 'contentDanger',
|
|
131
126
|
backgroundDanger: 'backgroundDanger',
|
|
132
127
|
onBackgroundDanger: 'onBackgroundDanger',
|
|
133
128
|
backgroundDangerSubtle: 'backgroundDangerSubtle',
|
|
134
129
|
onBackgroundDangerSubtle: 'onBackgroundDangerSubtle',
|
|
130
|
+
contentWarning: 'contentWarning',
|
|
131
|
+
backgroundWarning: 'backgroundWarning',
|
|
132
|
+
onBackgroundWarning: 'onBackgroundWarning',
|
|
133
|
+
backgroundWarningSubtle: 'backgroundWarningSubtle',
|
|
134
|
+
onBackgroundWarningSubtle: 'onBackgroundWarningSubtle',
|
|
135
135
|
contentSuccess: 'contentSuccess',
|
|
136
136
|
backgroundSuccess: 'backgroundSuccess',
|
|
137
137
|
onBackgroundSuccess: 'onBackgroundSuccess',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flodesk/grain",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.68.0",
|
|
4
4
|
"description": "Flodesk design system",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"types": "es/types/index.d.ts",
|
|
@@ -18,7 +18,11 @@
|
|
|
18
18
|
"lint": "eslint --ext .js --ext .ts --ext .jsx --ext .mdx .",
|
|
19
19
|
"semantic-release": "semantic-release",
|
|
20
20
|
"build:es": "del es/* && cross-env NODE_ENV=production babel --no-babelrc --config-file ./babel.config.es.js --out-dir es --copy-files src",
|
|
21
|
-
"cc": "node scripts/create-component.js"
|
|
21
|
+
"cc": "node scripts/create-component.js",
|
|
22
|
+
"prepare": "husky"
|
|
23
|
+
},
|
|
24
|
+
"lint-staged": {
|
|
25
|
+
"*.{js,jsx,mdx}": "eslint"
|
|
22
26
|
},
|
|
23
27
|
"publishConfig": {
|
|
24
28
|
"access": "public"
|
|
@@ -46,6 +50,8 @@
|
|
|
46
50
|
"@babel/plugin-transform-runtime": "^7.18.2",
|
|
47
51
|
"@babel/preset-env": "^7.18.2",
|
|
48
52
|
"@babel/preset-react": "^7.17.12",
|
|
53
|
+
"@commitlint/cli": "^20.1.0",
|
|
54
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
49
55
|
"@emotion/babel-preset-css-prop": "^11.10.0",
|
|
50
56
|
"@mdx-js/loader": "^2.1.1",
|
|
51
57
|
"@mdx-js/react": "^2.2.1",
|
|
@@ -67,6 +73,7 @@
|
|
|
67
73
|
"eslint-plugin-import": "^2.26.0",
|
|
68
74
|
"eslint-plugin-mdx": "^2.0.2",
|
|
69
75
|
"eslint-plugin-prettier": "^4.2.1",
|
|
76
|
+
"husky": "^9.1.7",
|
|
70
77
|
"lost-pixel": "^3.18.2",
|
|
71
78
|
"next": "^13.5.6",
|
|
72
79
|
"prettier": "^2.8.8",
|