@flodesk/grain 11.70.2 → 11.71.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.
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
4
|
+
const IconCalendar = props => ___EmotionJSX("svg", _extends({
|
|
5
|
+
viewBox: "0 0 32 36",
|
|
6
|
+
fill: "none",
|
|
7
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
8
|
+
}, props), ___EmotionJSX("path", {
|
|
9
|
+
fill: "currentColor",
|
|
10
|
+
d: "M22.5.5A1.5 1.5 0 0 1 24 2v3h3.5A4.5 4.5 0 0 1 32 9.5v19.944a4.5 4.5 0 0 1-4.49 4.5l-23 .05a4.5 4.5 0 0 1-4.51-4.5V9.5A4.5 4.5 0 0 1 4.5 5H8V2a1.5 1.5 0 1 1 3 0v3h10V2A1.5 1.5 0 0 1 22.5.5M3 29.493a1.5 1.5 0 0 0 1.503 1.5l23-.049a1.5 1.5 0 0 0 1.497-1.5V16H3zM4.5 8A1.5 1.5 0 0 0 3 9.5V13h26V9.5A1.5 1.5 0 0 0 27.5 8z"
|
|
11
|
+
}));
|
|
12
|
+
IconCalendar.viewBoxWidth = 32;
|
|
13
|
+
export default IconCalendar;
|
package/es/icons/index.js
CHANGED
|
@@ -124,4 +124,5 @@ export { default as IconPositionTopRight } from './icon-position-top-right.js';
|
|
|
124
124
|
export { default as IconDevices } from './icon-devices.js';
|
|
125
125
|
export { default as IconCornerSquare } from './icon-corner-square.js';
|
|
126
126
|
export { default as IconCornerRound } from './icon-corner-round.js';
|
|
127
|
-
export { default as IconCornerPill } from './icon-corner-pill.js';
|
|
127
|
+
export { default as IconCornerPill } from './icon-corner-pill.js';
|
|
128
|
+
export { default as IconCalendar } from './icon-calendar.js';
|
|
@@ -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-l);\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-l);\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-contentDanger), transparent 48%);\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 --grn-color-overlayDanger: color-mix(in hsl, var(--grn-color-red7), transparent 89%);\n --grn-color-overlayDanger2: color-mix(in hsl, var(--grn-color-red7), transparent 82%);\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 [data-theme] {\n --grn-color-contentDanger: var(--grn-color-red7);\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-red10);\n --grn-color-backgroundDangerSubtleLarge: var(--grn-color-red1);\n
|
|
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-l);\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-l);\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-contentDanger), transparent 48%);\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 --grn-color-overlayDanger: color-mix(in hsl, var(--grn-color-red7), transparent 89%);\n --grn-color-overlayDanger2: color-mix(in hsl, var(--grn-color-red7), transparent 82%);\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 [data-theme] {\n --grn-color-contentDanger: var(--grn-color-red7);\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-red10);\n --grn-color-backgroundDangerSubtleLarge: var(--grn-color-red1);\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 --grn-color-backgroundWarningSubtleLarge: var(--grn-color-yellow1);\n\n --grn-color-contentSuccess: var(--grn-color-green10);\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-green11);\n --grn-color-backgroundSuccessSubtleLarge: var(--grn-color-green1);\n\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-blue10);\n --grn-color-backgroundInfoSubtleLarge: var(--grn-color-blue1);\n }\n\n [data-theme='dark'],\n [data-theme='dark'] [data-theme='invert'] {\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 --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-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-contentInfo: var(--grn-color-blue5);\n --grn-color-backgroundInfoSubtle: var(--grn-color-blue11);\n --grn-color-onBackgroundInfoSubtle: var(--grn-color-blue1);\n }\n\n [data-experiment-darker-content-2-and-3=\"true\"] {\n --grn-color-content2: hsl(var(--sh-h) 12% var(--content-l) / 67%);\n --grn-color-content3: hsl(var(--sh-h) 12% var(--content-l) / 42%);\n }\n";
|
|
2
2
|
export default theme;
|
package/es/variables/colors.js
CHANGED
|
@@ -128,28 +128,24 @@ export const colors = {
|
|
|
128
128
|
backgroundDangerSubtle: 'backgroundDangerSubtle',
|
|
129
129
|
onBackgroundDangerSubtle: 'onBackgroundDangerSubtle',
|
|
130
130
|
backgroundDangerSubtleLarge: 'backgroundDangerSubtleLarge',
|
|
131
|
-
onBackgroundDangerSubtleLarge: 'onBackgroundDangerSubtleLarge',
|
|
132
131
|
contentWarning: 'contentWarning',
|
|
133
132
|
backgroundWarning: 'backgroundWarning',
|
|
134
133
|
onBackgroundWarning: 'onBackgroundWarning',
|
|
135
134
|
backgroundWarningSubtle: 'backgroundWarningSubtle',
|
|
136
135
|
onBackgroundWarningSubtle: 'onBackgroundWarningSubtle',
|
|
137
136
|
backgroundWarningSubtleLarge: 'backgroundWarningSubtleLarge',
|
|
138
|
-
onBackgroundWarningSubtleLarge: 'onBackgroundWarningSubtleLarge',
|
|
139
137
|
contentSuccess: 'contentSuccess',
|
|
140
138
|
backgroundSuccess: 'backgroundSuccess',
|
|
141
139
|
onBackgroundSuccess: 'onBackgroundSuccess',
|
|
142
140
|
backgroundSuccessSubtle: 'backgroundSuccessSubtle',
|
|
143
141
|
onBackgroundSuccessSubtle: 'onBackgroundSuccessSubtle',
|
|
144
142
|
backgroundSuccessSubtleLarge: 'backgroundSuccessSubtleLarge',
|
|
145
|
-
onBackgroundSuccessSubtleLarge: 'onBackgroundSuccessSubtleLarge',
|
|
146
143
|
contentInfo: 'contentInfo',
|
|
147
144
|
backgroundInfo: 'backgroundInfo',
|
|
148
145
|
onBackgroundInfo: 'onBackgroundInfo',
|
|
149
146
|
backgroundInfoSubtle: 'backgroundInfoSubtle',
|
|
150
147
|
onBackgroundInfoSubtle: 'onBackgroundInfoSubtle',
|
|
151
|
-
backgroundInfoSubtleLarge: 'backgroundInfoSubtleLarge'
|
|
152
|
-
onBackgroundInfoSubtleLarge: 'onBackgroundInfoSubtleLarge'
|
|
148
|
+
backgroundInfoSubtleLarge: 'backgroundInfoSubtleLarge'
|
|
153
149
|
},
|
|
154
150
|
overlays: {
|
|
155
151
|
overlay: 'overlay',
|