@flodesk/grain 11.60.0 → 11.61.1
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/icons/icon-check.js
CHANGED
|
@@ -4,15 +4,13 @@ import * as React from 'react';
|
|
|
4
4
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
5
5
|
|
|
6
6
|
const IconCheck = props => ___EmotionJSX("svg", _extends({
|
|
7
|
-
viewBox: "0 0
|
|
7
|
+
viewBox: "0 0 28 36",
|
|
8
8
|
fill: "none",
|
|
9
9
|
xmlns: "http://www.w3.org/2000/svg"
|
|
10
10
|
}, props), ___EmotionJSX("path", {
|
|
11
|
-
|
|
12
|
-
clipRule: "evenodd",
|
|
13
|
-
d: "M31.6 7.9C32.1 8.5 32.1 9.5 31.6 10.1L13.6 28.1C13.0 28.6 12.0 28.6 11.4 28.1L0.4 17.1C-0.1 16.5 -0.1 15.5 0.4 14.9C1.0 14.4 2.0 14.4 2.6 14.9L12.5 24.9L29.4 7.9C30.0 7.4 31.0 7.4 31.6 7.9Z",
|
|
11
|
+
d: "M24.94 9.44a1.5 1.5 0 1 1 2.12 2.12l-16 16a1.5 1.5 0 0 1-2.12 0l-8-8a1.5 1.5 0 1 1 2.12-2.12L10 24.378z",
|
|
14
12
|
fill: "currentColor"
|
|
15
13
|
}));
|
|
16
14
|
|
|
17
|
-
IconCheck.viewBoxWidth =
|
|
15
|
+
IconCheck.viewBoxWidth = 28;
|
|
18
16
|
export default IconCheck;
|
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 --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 --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 --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 [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";
|
|
2
2
|
export default core;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const theme = "\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-darkFade10);\n --grn-color-fade9: var(--grn-color-darkFade9);\n --grn-color-fade8: var(--grn-color-darkFade8);\n --grn-color-fade7: var(--grn-color-darkFade7);\n --grn-color-fade6: var(--grn-color-darkFade6);\n --grn-color-fade5: var(--grn-color-darkFade5);\n --grn-color-fade4: var(--grn-color-darkFade4);\n --grn-color-fade3: var(--grn-color-darkFade3);\n --grn-color-fade2: var(--grn-color-darkFade2);\n --grn-color-fade1: var(--grn-color-darkFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone1);\n --grn-color-shade2: var(--grn-color-shadeTone2);\n --grn-color-shade3: var(--grn-color-shadeTone3);\n --grn-color-shade4: var(--grn-color-shadeTone4);\n --grn-color-shade5: var(--grn-color-shadeTone5);\n --grn-color-shade6: var(--grn-color-shadeTone6);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone8);\n --grn-color-shade9: var(--grn-color-shadeTone9);\n --grn-color-shade10: var(--grn-color-shadeTone10);\n --grn-color-shade11: var(--grn-color-shadeTone11);\n --grn-color-shade12: var(--grn-color-shadeTone12);\n --grn-color-shade13: var(--grn-color-shadeTone13);\n }\n\n [data-theme='dark'],\n [data-theme='light'] [data-theme='invert'] {\n --grn-color-fade10: var(--grn-color-lightFade10);\n --grn-color-fade9: var(--grn-color-lightFade9);\n --grn-color-fade8: var(--grn-color-lightFade8);\n --grn-color-fade7: var(--grn-color-lightFade7);\n --grn-color-fade6: var(--grn-color-lightFade6);\n --grn-color-fade5: var(--grn-color-lightFade5);\n --grn-color-fade4: var(--grn-color-lightFade4);\n --grn-color-fade3: var(--grn-color-lightFade3);\n --grn-color-fade2: var(--grn-color-lightFade2);\n --grn-color-fade1: var(--grn-color-lightFade1);\n\n --grn-color-shade1: var(--grn-color-shadeTone13);\n --grn-color-shade2: var(--grn-color-shadeTone12);\n --grn-color-shade3: var(--grn-color-shadeTone11);\n --grn-color-shade4: var(--grn-color-shadeTone10);\n --grn-color-shade5: var(--grn-color-shadeTone9);\n --grn-color-shade6: var(--grn-color-shadeTone8);\n --grn-color-shade7: var(--grn-color-shadeTone7);\n --grn-color-shade8: var(--grn-color-shadeTone6);\n --grn-color-shade9: var(--grn-color-shadeTone5);\n --grn-color-shade10: var(--grn-color-shadeTone4);\n --grn-color-shade11: var(--grn-color-shadeTone3);\n --grn-color-shade12: var(--grn-color-shadeTone2);\n --grn-color-shade13: var(--grn-color-shadeTone1);\n }\n\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'] {\n --content-l: 20%;\n --background-l: 80%;\n --fade-l: var(--bf-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: hsl(var(--red-hs) 48% / 65%);\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: hsl(var(--shade-h) 15% 10% / 0.6);\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-theme='dark'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-iconDanger: hsl(var(--red-hs) 62% / 65%);\n }\n\n :root {\n --grn-color-contentInfo: var(--grn-color-blue7);\n --grn-color-backgroundInfo: var(--grn-color-blue6);\n --grn-color-onBackgroundInfo:
|
|
1
|
+
const theme = "\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'],\n [data-experiment-new-brand-colors] {\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 [data-experiment-new-brand-colors] {\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: hsl(var(--red-hs) 48% / 65%);\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: hsl(var(--shade-h) 15% 10% / 0.6);\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-theme='dark'],\n [data-theme='dark'] [data-theme='invert'] {\n --grn-color-iconDanger: hsl(var(--red-hs) 62% / 65%);\n }\n\n :root,\n [data-experiment-new-brand-colors] {\n --grn-color-contentInfo: var(--grn-color-blue7);\n --grn-color-backgroundInfo: var(--grn-color-blue6);\n --grn-color-onBackgroundInfo: white;\n --grn-color-backgroundInfoSubtle: var(--grn-color-blue2);\n --grn-color-onBackgroundInfoSubtle: var(--grn-color-blue8);\n\n --grn-color-contentSuccess: var(--grn-color-green7);\n --grn-color-backgroundSuccess: var(--grn-color-green7);\n --grn-color-onBackgroundSuccess: white;\n --grn-color-backgroundSuccessSubtle: var(--grn-color-green2);\n --grn-color-onBackgroundSuccessSubtle: var(--grn-color-green8);\n\n --grn-color-contentWarning: var(--grn-color-yellow9);\n --grn-color-backgroundWarning: var(--grn-color-yellow5);\n --grn-color-onBackgroundWarning: var(--grn-color-yellow12);\n --grn-color-backgroundWarningSubtle: var(--grn-color-yellow2);\n --grn-color-onBackgroundWarningSubtle: var(--grn-color-yellow9);\n\n --grn-color-contentDanger: var(--grn-color-red6);\n --grn-color-backgroundDanger: var(--grn-color-red6);\n --grn-color-onBackgroundDanger: white;\n --grn-color-backgroundDangerSubtle: var(--grn-color-red2);\n --grn-color-onBackgroundDangerSubtle: var(--grn-color-red8);\n\n --grn-color-overlayDanger: hsl(var(--red-h) var(--red-s) 40% / 12%);\n --grn-color-overlayDanger2: hsl(var(--red-h) var(--red-s) 40% / 18%);\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;
|