@flodesk/grain 11.69.0-next.1 → 11.69.0-next.11
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/autocomplete2.js +5 -5
- package/es/components/button.js +3 -3
- package/es/components/ghost-input.js +5 -5
- package/es/components/icon-toggle.js +6 -6
- package/es/components/select.js +3 -3
- package/es/components/slider.js +15 -8
- package/es/components/textarea.js +4 -4
- package/es/foundational/field.js +3 -3
- package/es/styles/colors/core.js +1 -1
- package/es/styles/colors/theme.js +1 -1
- package/es/styles/foundational.js +1 -1
- package/package.json +1 -1
|
@@ -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-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\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)
|
|
1
|
+
const theme = "\n :root,\n [data-theme='light'],\n [data-theme='dark'] [data-theme='invert'],\n .grn-scope-next {\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 [data-theme='dark'] .grn-scope-next,\n [data-theme='light'] [data-theme='invert'] .grn-scope-next {\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-scope-next {\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-scope-next {\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\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) var(--sh-s) var(--content-l) / 67%);\n --grn-color-content3: hsl(var(--sh-h) var(--sh-s) var(--content-l) / 42%);\n }\n";
|
|
2
2
|
export default theme;
|
|
@@ -2,7 +2,7 @@ const legacyVariables = "\n :root {\n --grn-textbox-textSize-s: var(--grn-te
|
|
|
2
2
|
export const borderVariables = "\n :root {\n --grn-border-size: 1px;\n }\n";
|
|
3
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
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
|
-
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:
|
|
5
|
+
export const fieldVariables = "\n :root, [data-theme], .grn-scope-next {\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: transparent;\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: var(--grn-color-shade3);\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";
|
|
8
8
|
export const clearbuttonVariables = "\n :root {\n --grn-clearbutton-height: 36px;\n }\n";
|