@frontify/guideline-blocks-settings 0.29.0 → 0.29.2
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/CHANGELOG.md +23 -0
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js +14 -14
- package/dist/components/BlockItemWrapper/BlockItemWrapper.es.js.map +1 -1
- package/dist/components/BlockItemWrapper/Toolbar.es.js +27 -24
- package/dist/components/BlockItemWrapper/Toolbar.es.js.map +1 -1
- package/dist/components/Link/utils/getUrl.es.js +10 -9
- package/dist/components/Link/utils/getUrl.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.es.js +5 -5
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.es.js +7 -7
- package/dist/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/styles.es.js.map +1 -1
- package/dist/index.cjs.js +3 -3
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +8 -4
- package/dist/index.es.js +90 -89
- package/dist/index.umd.js +3 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utilities/color/getReadableColor.es.js +8 -8
- package/dist/utilities/color/getReadableColor.es.js.map +1 -1
- package/dist/utilities/color/isDark.es.js +2 -2
- package/dist/utilities/color/isDark.es.js.map +1 -1
- package/dist/utilities/color/setAlpha.es.js +2 -2
- package/dist/utilities/color/setAlpha.es.js.map +1 -1
- package/dist/utilities/color/toColorObject.es.js +5 -5
- package/dist/utilities/color/toColorObject.es.js.map +1 -1
- package/dist/utilities/color/toHex8String.es.js +3 -3
- package/dist/utilities/color/toHex8String.es.js.map +1 -1
- package/dist/utilities/color/toHexString.es.js +3 -3
- package/dist/utilities/color/toHexString.es.js.map +1 -1
- package/dist/utilities/color/toRgbaString.es.js +3 -3
- package/dist/utilities/color/toRgbaString.es.js.map +1 -1
- package/package.json +11 -11
- package/src/components/Attachments/Attachments.spec.ct.tsx +1 -1
- package/src/components/BlockItemWrapper/BlockItemWrapper.tsx +4 -3
- package/src/components/BlockItemWrapper/Toolbar.tsx +8 -4
- package/src/components/BlockItemWrapper/types.ts +2 -0
- package/src/components/Link/LinkSelector/LinkSelector.spec.ct.tsx +1 -1
- package/src/components/Link/utils/getUrl.ts +4 -0
- package/src/components/RichTextEditor/RichTextEditor.spec.ct.tsx +1 -1
- package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.ts +2 -2
- package/src/components/RichTextEditor/plugins/styles.ts +1 -1
- package/src/utilities/color/getReadableColor.ts +3 -3
- package/src/utilities/color/isDark.ts +2 -2
- package/src/utilities/color/setAlpha.ts +2 -2
- package/src/utilities/color/toColorObject.ts +2 -2
- package/src/utilities/color/toHex8String.ts +2 -2
- package/src/utilities/color/toHexString.ts +2 -2
- package/src/utilities/color/toRgbaString.ts +2 -2
- package/tsconfig.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-pointer-events-none{pointer-events:none}.tw-pointer-events-auto{pointer-events:auto}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-\[calc\(100\%-4px\)\]{bottom:calc(100% - 4px)}.tw-left-0{left:0}.tw-right-\[-3px\]{right:-3px}.tw-top-full{top:100%}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-\[2\]{z-index:2}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mr-2{margin-right:.5rem}.tw-mt-1{margin-top:.25rem}.tw-mt-3{margin-top:.75rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-8{margin-top:2rem}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-h-0{height:0px}.tw-h-6{height:1.5rem}.tw-h-7{height:1.75rem}.tw-h-8{height:2rem}.tw-h-9{height:2.25rem}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-9{width:2.25rem}.tw-w-\[300px\]{width:300px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-min-w-0{min-width:0px}.tw-min-w-\[400px\]{min-width:400px}.tw-flex-1{flex:1 1 0%}.tw-flex-auto{flex:1 1 auto}.tw-flex-shrink-0{flex-shrink:0}.tw-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-pulse{50%{opacity:.5}}.tw-animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!tw-cursor-not-allowed{cursor:not-allowed!important}.tw-cursor-grab{cursor:grab}.tw-cursor-grabbing{cursor:grabbing}.tw-cursor-pointer{cursor:pointer}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0px}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.tw-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.tw-self-start{align-self:flex-start}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-text-ellipsis{text-overflow:ellipsis}.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-sm{border-radius:.125rem}.tw-border{border-width:var(--line-width)}.tw-border-b{border-bottom-width:var(--line-width)}.tw-border-b-4{border-bottom-width:4px}.tw-border-l-4{border-left-width:4px}.tw-border-t{border-top-width:var(--line-width)}.tw-border-t-4{border-top-width:4px}.tw-border-solid{border-style:solid}.tw-border-dashed{border-style:dashed}.\!tw-border-red-50{--tw-border-opacity: 1 !important;border-color:rgb(255 128 102 / var(--tw-border-opacity))!important}.tw-border-blank-state-line{--tw-border-opacity: 1;border-color:rgb(163 165 165 / var(--tw-border-opacity))}.tw-border-blank-state-line-hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.tw-border-box-selected-inverse{border-color:var(--box-selected-inverse-color)}.tw-border-button-border{border-color:var(--button-border-color)}.tw-border-b-line{border-bottom-color:var(--line-color)}.tw-border-b-transparent{border-bottom-color:transparent}.tw-border-t-black-10{--tw-border-opacity: 1;border-top-color:rgb(234 235 235 / var(--tw-border-opacity))}.tw-border-t-transparent{border-top-color:transparent}.tw-bg-base{background-color:var(--base-color)}.tw-bg-base-alt{background-color:var(--base-color-alt)}.tw-bg-blank-state-pressed-inverse{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.tw-bg-blank-state-shaded-inverse{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.tw-bg-blank-state-weak-inverse{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-bg-box-neutral-hover{background-color:var(--box-neutral-color-hover)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.tw-bg-box-selected-pressed{background-color:var(--box-selected-color-pressed)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.tw-bg-button-background{background-color:var(--button-background-color)}.tw-bg-button-background-pressed{background-color:var(--button-background-color-pressed)}.tw-bg-red-50{--tw-bg-opacity: 1;background-color:rgb(255 128 102 / var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-p-1{padding:.25rem}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-7{padding:1.75rem}.tw-p-\[6px\]{padding:6px}.tw-px-0{padding-left:0;padding-right:0}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-2\.5{padding-left:.625rem;padding-right:.625rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-\[1px\]{padding-left:1px;padding-right:1px}.tw-py-0{padding-top:0;padding-bottom:0}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-7{padding-left:1.75rem}.tw-pt-5{padding-top:1.25rem}.tw-text-left{text-align:left}.tw-text-right{text-align:right}.tw-font-body{font-family:var(--body-family)}.tw-font-sans{font-family:Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}.tw-text-\[13px\]{font-size:13px}.tw-text-body-small{font-size:var(--body-size-small);line-height:var(--body-size-small-line-height)}.tw-text-s{font-size:.875rem;line-height:1rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.813rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-leading-4{line-height:1rem}.tw-leading-5{line-height:1.25rem}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-color)}.tw-text-box-selected-inverse{color:var(--box-selected-inverse-color)}.tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-text-red-60{--tw-text-opacity: 1;color:rgb(255 55 90 / var(--tw-text-opacity))}.tw-text-text{color:var(--text-color)}.tw-text-text-negative{color:var(--text-color-negative)}.tw-text-text-weak{color:var(--text-color-weak)}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-offset-1{outline-offset:1px}.tw-outline-offset-2{outline-offset:2px}.tw-outline-offset-\[1px\]{outline-offset:1px}.tw-outline-box-selected-inverse{outline-color:var(--box-selected-inverse-color)}.tw-outline-line{outline-color:var(--line-color)}.tw-outline-violet-60{outline-color:#825fff}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first\:tw-rounded-bl:first-child{border-bottom-left-radius:var(--radius)}.first\:tw-rounded-tl:first-child{border-top-left-radius:var(--radius)}.first\:tw-rounded-tr:first-child{border-top-right-radius:var(--radius)}.last\:tw-rounded-bl:last-child{border-bottom-left-radius:var(--radius)}.last\:tw-rounded-br:last-child{border-bottom-right-radius:var(--radius)}.last\:tw-rounded-tr:last-child{border-top-right-radius:var(--radius)}.focus-within\:tw-opacity-100:focus-within{opacity:1}.focus-within\:tw-outline:focus-within{outline-style:solid}.hover\:tw-border-blank-state-line-hover:hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.hover\:tw-bg-black-10:hover{--tw-bg-opacity: 1;background-color:rgb(234 235 235 / var(--tw-bg-opacity))}.hover\:tw-bg-blank-state-hover-inverse:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:tw-bg-box-neutral-hover:hover{background-color:var(--box-neutral-color-hover)}.hover\:tw-bg-box-neutral-strong-inverse-hover:hover{background-color:var(--box-neutral-strong-inverse-color-hover)}.hover\:tw-bg-box-selected-hover:hover{background-color:var(--box-selected-color-hover)}.hover\:tw-bg-button-background-hover:hover{background-color:var(--button-background-color-hover)}.hover\:tw-bg-button-background-pressed:hover{background-color:var(--button-background-color-pressed)}.hover\:tw-text-blank-state-hover:hover{--tw-text-opacity: 1;color:rgb(26 28 28 / var(--tw-text-opacity))}.hover\:tw-text-box-neutral-inverse-hover:hover{color:var(--box-neutral-inverse-color-hover)}.hover\:tw-outline:hover{outline-style:solid}.focus-visible\:tw-opacity-100:focus-visible{opacity:1}.focus-visible\:tw-ring-blue:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity)) }.active\:tw-border-blank-state-line-hover:active{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.active\:tw-bg-blank-state-pressed-inverse:active{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-color-pressed)}.active\:tw-bg-box-selected-pressed:active{background-color:var(--box-selected-color-pressed)}.active\:tw-bg-button-background-pressed:active{background-color:var(--button-background-color-pressed)}.active\:tw-text-blank-state-pressed:active{--tw-text-opacity: 1;color:rgb(8 8 8 / var(--tw-text-opacity))}.tw-group:hover .group-hover\:tw-text-box-neutral-inverse-hover{color:var(--box-neutral-inverse-color-hover)}.tw-group:hover .group-hover\:tw-opacity-100{opacity:1}.tw-group:focus .group-focus\:tw-opacity-100{opacity:1}.\[\&\:not\(\:first-child\)\]\:tw-border-l-0:not(:first-child){border-left-width:0px}.\[\&\:not\(\:first-child\)\]\:tw-border-t-0:not(:first-child){border-top-width:0px}.\[\&\>\*\]\:tw-pointer-events-none>*{pointer-events:none}
|
|
1
|
+
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(147 197 253 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-pointer-events-none{pointer-events:none}.tw-pointer-events-auto{pointer-events:auto}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-bottom-\[calc\(100\%-4px\)\]{bottom:calc(100% - 4px)}.tw-left-0{left:0}.tw-right-\[-3px\]{right:-3px}.tw-top-full{top:100%}.tw-isolate{isolation:isolate}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-\[2\]{z-index:2}.tw-m-0{margin:0}.tw-my-4{margin-top:1rem;margin-bottom:1rem}.tw-mr-2{margin-right:.5rem}.tw-mt-1{margin-top:.25rem}.tw-mt-3{margin-top:.75rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-8{margin-top:2rem}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-h-0{height:0px}.tw-h-6{height:1.5rem}.tw-h-7{height:1.75rem}.tw-h-8{height:2rem}.tw-h-9{height:2.25rem}.tw-h-\[72px\]{height:72px}.tw-h-full{height:100%}.tw-min-h-\[10px\]{min-height:10px}.tw-w-0{width:0px}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-9{width:2.25rem}.tw-w-\[300px\]{width:300px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-min-w-0{min-width:0px}.tw-min-w-\[400px\]{min-width:400px}.tw-flex-1{flex:1 1 0%}.tw-flex-auto{flex:1 1 auto}.tw-flex-shrink-0{flex-shrink:0}.tw-rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-pulse{50%{opacity:.5}}.tw-animate-pulse{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.\!tw-cursor-not-allowed{cursor:not-allowed!important}.tw-cursor-grab{cursor:grab}.tw-cursor-grabbing{cursor:grabbing}.tw-cursor-pointer{cursor:pointer}.tw-flex-col{flex-direction:column}.tw-items-start{align-items:flex-start}.tw-items-center{align-items:center}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0px}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-3{gap:.75rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.tw-space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.tw-self-start{align-self:flex-start}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-text-ellipsis{text-overflow:ellipsis}.tw-whitespace-nowrap{white-space:nowrap}.tw-rounded{border-radius:var(--radius)}.tw-rounded-full{border-radius:9999px}.tw-rounded-sm{border-radius:.125rem}.tw-border{border-width:var(--line-width)}.tw-border-b{border-bottom-width:var(--line-width)}.tw-border-b-4{border-bottom-width:4px}.tw-border-l-4{border-left-width:4px}.tw-border-t{border-top-width:var(--line-width)}.tw-border-t-4{border-top-width:4px}.tw-border-solid{border-style:solid}.tw-border-dashed{border-style:dashed}.\!tw-border-red-50{--tw-border-opacity: 1 !important;border-color:rgb(255 128 102 / var(--tw-border-opacity))!important}.tw-border-blank-state-line{--tw-border-opacity: 1;border-color:rgb(163 165 165 / var(--tw-border-opacity))}.tw-border-blank-state-line-hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.tw-border-box-selected-inverse{border-color:var(--box-selected-inverse-color)}.tw-border-button-border{border-color:var(--button-border-color)}.tw-border-b-line{border-bottom-color:var(--line-color)}.tw-border-b-transparent{border-bottom-color:transparent}.tw-border-t-black-10{--tw-border-opacity: 1;border-top-color:rgb(234 235 235 / var(--tw-border-opacity))}.tw-border-t-transparent{border-top-color:transparent}.tw-bg-base{background-color:var(--base-color)}.tw-bg-base-alt{background-color:var(--base-color-alt)}.tw-bg-blank-state-pressed-inverse{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.tw-bg-blank-state-shaded-inverse{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity))}.tw-bg-blank-state-weak-inverse{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-bg-box-neutral-hover{background-color:var(--box-neutral-color-hover)}.tw-bg-box-neutral-strong-inverse{background-color:var(--box-neutral-strong-inverse-color)}.tw-bg-box-selected-pressed{background-color:var(--box-selected-color-pressed)}.tw-bg-box-selected-strong{background-color:var(--box-selected-strong-color)}.tw-bg-button-background{background-color:var(--button-background-color)}.tw-bg-button-background-pressed{background-color:var(--button-background-color-pressed)}.tw-bg-red-50{--tw-bg-opacity: 1;background-color:rgb(255 128 102 / var(--tw-bg-opacity))}.tw-bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.tw-p-1{padding:.25rem}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-7{padding:1.75rem}.tw-p-\[6px\]{padding:6px}.tw-px-0{padding-left:0;padding-right:0}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-2\.5{padding-left:.625rem;padding-right:.625rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-px-\[1px\]{padding-left:1px;padding-right:1px}.tw-py-0{padding-top:0;padding-bottom:0}.tw-py-2{padding-top:.5rem;padding-bottom:.5rem}.tw-py-3{padding-top:.75rem;padding-bottom:.75rem}.tw-pl-12{padding-left:3rem}.tw-pl-14{padding-left:3.5rem}.tw-pl-7{padding-left:1.75rem}.tw-pt-5{padding-top:1.25rem}.tw-text-left{text-align:left}.tw-text-right{text-align:right}.tw-font-body{font-family:var(--body-family)}.tw-font-sans{font-family:Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol}.tw-text-\[13px\]{font-size:13px}.tw-text-body-small{font-size:var(--body-size-small);line-height:var(--body-size-small-line-height)}.tw-text-s{font-size:.875rem;line-height:1rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.813rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-leading-4{line-height:1rem}.tw-leading-5{line-height:1.25rem}.tw-text-blank-state-shaded{--tw-text-opacity: 1;color:rgb(114 116 116 / var(--tw-text-opacity))}.tw-text-box-neutral-strong{color:var(--box-neutral-strong-color)}.tw-text-box-selected-inverse{color:var(--box-selected-inverse-color)}.tw-text-box-selected-strong-inverse{color:var(--box-selected-strong-inverse-color)}.tw-text-red-60{--tw-text-opacity: 1;color:rgb(255 55 90 / var(--tw-text-opacity))}.tw-text-text{color:var(--text-color)}.tw-text-text-negative{color:var(--text-color-negative)}.tw-text-text-weak{color:var(--text-color-weak)}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-offset-1{outline-offset:1px}.tw-outline-offset-2{outline-offset:2px}.tw-outline-offset-\[1px\]{outline-offset:1px}.tw-outline-box-selected-inverse{outline-color:var(--box-selected-inverse-color)}.tw-outline-line{outline-color:var(--line-color)}.tw-outline-violet-60{outline-color:#825fff}.tw-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tw-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first\:tw-rounded-bl:first-child{border-bottom-left-radius:var(--radius)}.first\:tw-rounded-tl:first-child{border-top-left-radius:var(--radius)}.first\:tw-rounded-tr:first-child{border-top-right-radius:var(--radius)}.last\:tw-rounded-bl:last-child{border-bottom-left-radius:var(--radius)}.last\:tw-rounded-br:last-child{border-bottom-right-radius:var(--radius)}.last\:tw-rounded-tr:last-child{border-top-right-radius:var(--radius)}.focus-within\:tw-opacity-100:focus-within{opacity:1}.focus-within\:tw-outline:focus-within{outline-style:solid}.hover\:tw-border-blank-state-line-hover:hover{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.hover\:tw-bg-black-10:hover{--tw-bg-opacity: 1;background-color:rgb(234 235 235 / var(--tw-bg-opacity))}.hover\:tw-bg-blank-state-hover-inverse:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.hover\:tw-bg-box-neutral-hover:hover{background-color:var(--box-neutral-color-hover)}.hover\:tw-bg-box-neutral-strong-inverse-hover:hover{background-color:var(--box-neutral-strong-inverse-color-hover)}.hover\:tw-bg-box-selected-hover:hover{background-color:var(--box-selected-color-hover)}.hover\:tw-bg-button-background-hover:hover{background-color:var(--button-background-color-hover)}.hover\:tw-bg-button-background-pressed:hover{background-color:var(--button-background-color-pressed)}.hover\:tw-text-blank-state-hover:hover{--tw-text-opacity: 1;color:rgb(26 28 28 / var(--tw-text-opacity))}.hover\:tw-text-box-neutral-inverse-hover:hover{color:var(--box-neutral-inverse-color-hover)}.hover\:tw-outline:hover{outline-style:solid}.focus-visible\:tw-z-10:focus-visible{z-index:10}.focus-visible\:tw-opacity-100:focus-visible{opacity:1}.focus-visible\:tw-ring-blue:focus-visible{--tw-ring-opacity: 1;--tw-ring-color: rgb(94 158 214 / var(--tw-ring-opacity)) }.active\:tw-border-blank-state-line-hover:active{--tw-border-opacity: 1;border-color:rgb(26 28 28 / var(--tw-border-opacity))}.active\:tw-bg-blank-state-pressed-inverse:active{--tw-bg-opacity: 1;background-color:rgb(241 241 241 / var(--tw-bg-opacity))}.active\:tw-bg-box-neutral-strong-inverse-pressed:active{background-color:var(--box-neutral-strong-inverse-color-pressed)}.active\:tw-bg-box-selected-pressed:active{background-color:var(--box-selected-color-pressed)}.active\:tw-bg-button-background-pressed:active{background-color:var(--button-background-color-pressed)}.active\:tw-text-blank-state-pressed:active{--tw-text-opacity: 1;color:rgb(8 8 8 / var(--tw-text-opacity))}.tw-group:hover .group-hover\:tw-text-box-neutral-inverse-hover{color:var(--box-neutral-inverse-color-hover)}.tw-group:hover .group-hover\:tw-opacity-100{opacity:1}.tw-group:focus .group-focus\:tw-opacity-100{opacity:1}.\[\&\:not\(\:first-child\)\]\:tw-border-l-0:not(:first-child){border-left-width:0px}.\[\&\:not\(\:first-child\)\]\:tw-border-t-0:not(:first-child){border-top-width:0px}.\[\&\>\*\]\:tw-pointer-events-none>*{pointer-events:none}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import n,
|
|
1
|
+
import { TinyColor as n, readability as c } from "@ctrl/tinycolor";
|
|
2
2
|
import { toShortRgba as i } from "./toShortRgba.es.js";
|
|
3
|
-
const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((
|
|
4
|
-
const
|
|
5
|
-
let
|
|
6
|
-
const
|
|
7
|
-
for (;
|
|
8
|
-
|
|
9
|
-
return
|
|
3
|
+
const s = (r) => typeof r == "object" && ["red", "green", "blue"].every((t) => r == null ? void 0 : r.hasOwnProperty(t)), a = (r, e) => {
|
|
4
|
+
const t = s(r) ? i(r) : r, p = s(e) ? i(e) : e;
|
|
5
|
+
let o = new n(t);
|
|
6
|
+
const d = new n(p);
|
|
7
|
+
for (; c(o, d) < 4.5; )
|
|
8
|
+
o = o.darken(1);
|
|
9
|
+
return o.toRgbString();
|
|
10
10
|
};
|
|
11
11
|
export {
|
|
12
12
|
a as getReadableColor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport
|
|
1
|
+
{"version":3,"file":"getReadableColor.es.js","sources":["../../../src/utilities/color/getReadableColor.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Returns darkened text color for a given background color, so that it is readable and has enough contrast (above 4.5)\n *\n * @param {Object} textColor Object of RGBA values\n * @param {Object} backgroundColor Object of RGBA values\n * @returns {string} To be used as css value\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n const requiredKeys = ['red', 'green', 'blue'];\n return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const getReadableColor = (textColor: unknown, backgroundColor: unknown): string => {\n const inputTextColor = isRgbaLongFormat(textColor) ? toShortRgba(textColor) : (textColor as ColorInput);\n const inputBackgroundColor = isRgbaLongFormat(backgroundColor)\n ? toShortRgba(backgroundColor)\n : (backgroundColor as ColorInput);\n let parsedTextColor = new TinyColor(inputTextColor);\n const parsedBackgroundColor = new TinyColor(inputBackgroundColor);\n\n //darken the text color until readability is good\n while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {\n parsedTextColor = parsedTextColor.darken(1);\n }\n\n return parsedTextColor.toRgbString();\n};\n"],"names":["isRgbaLongFormat","value","i","getReadableColor","textColor","backgroundColor","inputTextColor","toShortRgba","inputBackgroundColor","parsedTextColor","TinyColor","parsedBackgroundColor","readability"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAmB,CAACC,GAAoBC,MAAqC;AACtF,QAAMC,IAAiBN,EAAiBI,CAAS,IAAIG,EAAYH,CAAS,IAAKA,GACzEI,IAAuBR,EAAiBK,CAAe,IACvDE,EAAYF,CAAe,IAC1BA;AACH,MAAAI,IAAkB,IAAIC,EAAUJ,CAAc;AAC5C,QAAAK,IAAwB,IAAID,EAAUF,CAAoB;AAGhE,SAAOI,EAAYH,GAAiBE,CAAqB,IAAI;AACvC,IAAAF,IAAAA,EAAgB,OAAO,CAAC;AAG9C,SAAOA,EAAgB;AAC3B;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import n from "@ctrl/tinycolor";
|
|
1
|
+
import { TinyColor as n } from "@ctrl/tinycolor";
|
|
2
2
|
import { toShortRgba as s } from "./toShortRgba.es.js";
|
|
3
3
|
const i = (r) => typeof r == "object" && ["red", "green", "blue"].every((o) => r == null ? void 0 : r.hasOwnProperty(o)), y = (r, e) => {
|
|
4
|
-
const o = i(r) ? s(r) : r, t = n(o);
|
|
4
|
+
const o = i(r) ? s(r) : r, t = new n(o);
|
|
5
5
|
return e ? t.getBrightness() < e : t.isDark() || t.getAlpha() > 0.25 && t.getAlpha() < 1;
|
|
6
6
|
};
|
|
7
7
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport
|
|
1
|
+
{"version":3,"file":"isDark.es.js","sources":["../../../src/utilities/color/isDark.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ColorInput, TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\nimport { Color } from '@frontify/sidebar-settings';\n\n/**\n * Calculates if text should be in a light color depending on color (e.g. background-color)\n *\n * @param {Object} value Object of RGBA values\n * @param {Number|undefined} threshold Threshold for the brightness\n * @returns {Boolean} Return if the color is dark\n */\n\nconst isRgbaLongFormat = (value: unknown): value is Color => {\n const requiredKeys = ['red', 'green', 'blue'];\n return typeof value === 'object' && requiredKeys.every((i) => value?.hasOwnProperty(i));\n};\n\nexport const isDark = (color: unknown, threshold?: number): boolean => {\n const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);\n const parsedColor = new TinyColor(inputColor);\n\n if (threshold) {\n return parsedColor.getBrightness() < threshold;\n }\n\n return parsedColor.isDark() || (parsedColor.getAlpha() > 0.25 && parsedColor.getAlpha() < 1);\n};\n"],"names":["isRgbaLongFormat","value","i","isDark","color","threshold","inputColor","toShortRgba","parsedColor","TinyColor"],"mappings":";;AAcA,MAAMA,IAAmB,CAACC,MAEf,OAAOA,KAAU,YADH,CAAC,OAAO,SAAS,MAAM,EACK,MAAM,CAACC,MAAMD,KAAA,gBAAAA,EAAO,eAAeC,EAAE,GAG7EC,IAAS,CAACC,GAAgBC,MAAgC;AACnE,QAAMC,IAAaN,EAAiBI,CAAK,IAAIG,EAAYH,CAAK,IAAKA,GAC7DI,IAAc,IAAIC,EAAUH,CAAU;AAE5C,SAAID,IACOG,EAAY,cAAkB,IAAAH,IAGlCG,EAAY,OAAa,KAAAA,EAAY,aAAa,QAAQA,EAAY,SAAa,IAAA;AAC9F;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"setAlpha.es.js","sources":["../../../src/utilities/color/setAlpha.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport
|
|
1
|
+
{"version":3,"file":"setAlpha.es.js","sources":["../../../src/utilities/color/setAlpha.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/**\n * Sets alpha value and returns rgba string.\n *\n * @param {string} color Rgb or hex string.\n * @returns {String} To be used as css value.\n */\n\nexport const setAlpha = (alpha: number, color?: string): string => {\n return new TinyColor(color).setAlpha(alpha).toRgbString();\n};\n"],"names":["setAlpha","alpha","color","TinyColor"],"mappings":";AAWa,MAAAA,IAAW,CAACC,GAAeC,MAC7B,IAAIC,EAAUD,CAAK,EAAE,SAASD,CAAK,EAAE;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
const
|
|
3
|
-
const { r, g:
|
|
4
|
-
return { red: r, green:
|
|
1
|
+
import { TinyColor as l } from "@ctrl/tinycolor";
|
|
2
|
+
const b = (o) => {
|
|
3
|
+
const { r, g: e, b: t, a: n } = new l(o);
|
|
4
|
+
return { red: r, green: e, blue: t, alpha: n };
|
|
5
5
|
};
|
|
6
6
|
export {
|
|
7
|
-
|
|
7
|
+
b as toColorObject
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=toColorObject.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport
|
|
1
|
+
{"version":3,"file":"toColorObject.es.js","sources":["../../../src/utilities/color/toColorObject.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\n\n/**\n * Maps color strings to color objects.\n *\n * @param {String} String representing color\n * @returns {Color} Color object\n */\n\nexport const toColorObject = (colorString: string): Color => {\n const { r, g, b, a } = new TinyColor(colorString);\n return { red: r, green: g, blue: b, alpha: a };\n};\n"],"names":["toColorObject","colorString","g","b","a","TinyColor"],"mappings":";AAYa,MAAAA,IAAgB,CAACC,MAA+B;AACnD,QAAA,EAAE,GAAG,GAAAC,GAAG,GAAAC,GAAG,GAAAC,MAAM,IAAIC,EAAUJ,CAAW;AACzC,SAAA,EAAE,KAAK,GAAG,OAAOC,GAAG,MAAMC,GAAG,OAAOC;AAC/C;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import t from "@ctrl/tinycolor";
|
|
1
|
+
import { TinyColor as t } from "@ctrl/tinycolor";
|
|
2
2
|
import { toShortRgba as r } from "./toShortRgba.es.js";
|
|
3
|
-
const
|
|
3
|
+
const e = (o) => new t(r(o)).toHex8String();
|
|
4
4
|
export {
|
|
5
|
-
|
|
5
|
+
e as toHex8String
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=toHex8String.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toHex8String.es.js","sources":["../../../src/utilities/color/toHex8String.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport
|
|
1
|
+
{"version":3,"file":"toHex8String.es.js","sources":["../../../src/utilities/color/toHex8String.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();\n"],"names":["toHex8String","color","TinyColor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,aAAa;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import t from "@ctrl/tinycolor";
|
|
1
|
+
import { TinyColor as t } from "@ctrl/tinycolor";
|
|
2
2
|
import { toShortRgba as r } from "./toShortRgba.es.js";
|
|
3
|
-
const
|
|
3
|
+
const e = (o) => new t(r(o)).toHexString();
|
|
4
4
|
export {
|
|
5
|
-
|
|
5
|
+
e as toHexString
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=toHexString.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toHexString.es.js","sources":["../../../src/utilities/color/toHexString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport
|
|
1
|
+
{"version":3,"file":"toHexString.es.js","sources":["../../../src/utilities/color/toHexString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to hex alpha string.\n */\nexport const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();\n"],"names":["toHexString","color","TinyColor","toShortRgba"],"mappings":";;AASa,MAAAA,IAAc,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import t from "@ctrl/tinycolor";
|
|
1
|
+
import { TinyColor as t } from "@ctrl/tinycolor";
|
|
2
2
|
import { toShortRgba as r } from "./toShortRgba.es.js";
|
|
3
|
-
const
|
|
3
|
+
const n = (o) => new t(r(o)).toRgbString();
|
|
4
4
|
export {
|
|
5
|
-
|
|
5
|
+
n as toRgbaString
|
|
6
6
|
};
|
|
7
7
|
//# sourceMappingURL=toRgbaString.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toRgbaString.es.js","sources":["../../../src/utilities/color/toRgbaString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport
|
|
1
|
+
{"version":3,"file":"toRgbaString.es.js","sources":["../../../src/utilities/color/toRgbaString.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Color } from '@frontify/fondue';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport { toShortRgba } from './toShortRgba';\n\n/**\n * Maps color object of rgba values to rgba string.\n *\n * @param {Object} Color object\n * @returns {String} To be used as css value.\n */\n\nexport const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();\n"],"names":["toRgbaString","color","TinyColor","toShortRgba"],"mappings":";;AAaa,MAAAA,IAAe,CAACC,MAAyB,IAAIC,EAAUC,EAAYF,CAAK,CAAC,EAAE,YAAY;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@frontify/guideline-blocks-settings",
|
|
3
|
-
"version": "0.29.
|
|
3
|
+
"version": "0.29.2",
|
|
4
4
|
"description": "Provides types and helpers for the guideline block development",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/index.umd.js",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"@types/react-dom": "^18.2.7",
|
|
31
31
|
"@types/sinon": "^10.0.16",
|
|
32
32
|
"@vitejs/plugin-react": "^4.0.4",
|
|
33
|
-
"autoprefixer": "^10.4.
|
|
34
|
-
"cypress": "^
|
|
33
|
+
"autoprefixer": "^10.4.15",
|
|
34
|
+
"cypress": "^13.1.0",
|
|
35
35
|
"cypress-real-events": "^1.10.1",
|
|
36
36
|
"eslint": "^8.48.0",
|
|
37
37
|
"eslint-plugin-notice": "^0.9.10",
|
|
@@ -45,25 +45,25 @@
|
|
|
45
45
|
"rollup": "^3.28.1",
|
|
46
46
|
"sinon": "15.2.0",
|
|
47
47
|
"tailwindcss": "^3.3.3",
|
|
48
|
-
"typescript": "^5.
|
|
48
|
+
"typescript": "^5.2.2",
|
|
49
49
|
"vite": "^4.4.9",
|
|
50
50
|
"vite-plugin-dts": "^3.5.3",
|
|
51
51
|
"vite-plugin-externals": "^0.6.2",
|
|
52
52
|
"vitest": "^0.34.3"
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@ctrl/tinycolor": "^
|
|
55
|
+
"@ctrl/tinycolor": "^4.0.2",
|
|
56
56
|
"@dnd-kit/core": "^6.0.8",
|
|
57
57
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
58
58
|
"@dnd-kit/sortable": "^7.0.2",
|
|
59
|
-
"@frontify/fondue": "12.0.0-beta.
|
|
60
|
-
"@react-aria/focus": "^3.
|
|
61
|
-
"@react-stately/overlays": "^3.6.
|
|
59
|
+
"@frontify/fondue": "12.0.0-beta.314",
|
|
60
|
+
"@react-aria/focus": "^3.14.0",
|
|
61
|
+
"@react-stately/overlays": "^3.6.1",
|
|
62
62
|
"@udecode/plate": "^21.5.0",
|
|
63
63
|
"slate": "^0.94.1",
|
|
64
|
-
"slate-react": "^0.98.
|
|
65
|
-
"@frontify/app-bridge": "3.0.0-beta.
|
|
66
|
-
"@frontify/sidebar-settings": "0.6.
|
|
64
|
+
"slate-react": "^0.98.3",
|
|
65
|
+
"@frontify/app-bridge": "3.0.0-beta.89",
|
|
66
|
+
"@frontify/sidebar-settings": "0.6.6"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
69
|
"react": "^18",
|
|
@@ -4,7 +4,7 @@ import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
|
|
|
4
4
|
import { mount } from 'cypress/react18';
|
|
5
5
|
import { Attachments as AttachmentsComponent } from './Attachments';
|
|
6
6
|
import { AttachmentsProps } from './types';
|
|
7
|
-
import { SinonStub } from '
|
|
7
|
+
import type { SinonStub } from 'sinon';
|
|
8
8
|
|
|
9
9
|
const FlyoutButtonSelector = '[data-test-id="attachments-flyout-button"]';
|
|
10
10
|
const AssetInputSelector = '[data-test-id="asset-input-placeholder"]';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { ReactElement, useEffect, useRef, useState } from 'react';
|
|
4
4
|
import { joinClassNames } from '../../utilities';
|
|
5
5
|
import { Toolbar } from './Toolbar';
|
|
6
6
|
import { BlockItemWrapperProps, ToolbarItem } from './types';
|
|
@@ -15,7 +15,7 @@ export const BlockItemWrapper = ({
|
|
|
15
15
|
shouldFillContainer,
|
|
16
16
|
outlineOffset = 2,
|
|
17
17
|
shouldBeShown = false,
|
|
18
|
-
}:
|
|
18
|
+
}: BlockItemWrapperProps): ReactElement => {
|
|
19
19
|
const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);
|
|
20
20
|
const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);
|
|
21
21
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
@@ -28,7 +28,8 @@ export const BlockItemWrapper = ({
|
|
|
28
28
|
}, [isFlyoutOpen]);
|
|
29
29
|
|
|
30
30
|
if (shouldHideWrapper) {
|
|
31
|
-
|
|
31
|
+
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
32
|
+
return <>{children}</>;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
4
|
ActionMenu,
|
|
5
|
+
FOCUS_VISIBLE_STYLE,
|
|
5
6
|
Flyout,
|
|
6
7
|
IconDotsHorizontal16,
|
|
7
8
|
MenuItemContentSize,
|
|
@@ -22,7 +23,7 @@ export const Toolbar = ({
|
|
|
22
23
|
}: ToolbarProps) => {
|
|
23
24
|
return (
|
|
24
25
|
<div data-test-id="block-item-wrapper-toolbar" className="tw-flex tw-justify-end">
|
|
25
|
-
<div className="tw-bg-white tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded">
|
|
26
|
+
<div className="tw-bg-white tw-isolate tw-text-box-selected-inverse tw-pointer-events-auto tw-flex tw-flex-shrink-0 tw-gap-[2px] tw-px-[1px] tw-spacing tw-items-center tw-h-7 tw-self-start tw-border tw-border-box-selected-inverse tw-rounded">
|
|
26
27
|
{items.map((item, i) =>
|
|
27
28
|
'draggableProps' in item ? (
|
|
28
29
|
<Tooltip
|
|
@@ -66,7 +67,10 @@ export const Toolbar = ({
|
|
|
66
67
|
<button
|
|
67
68
|
data-test-id="block-item-wrapper-toolbar-btn"
|
|
68
69
|
onClick={item.onClick}
|
|
69
|
-
className=
|
|
70
|
+
className={joinClassNames([
|
|
71
|
+
'tw-bg-base tw-relative hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm focus-visible:tw-z-10',
|
|
72
|
+
FOCUS_VISIBLE_STYLE,
|
|
73
|
+
])}
|
|
70
74
|
>
|
|
71
75
|
{item.icon}
|
|
72
76
|
</button>
|
|
@@ -75,7 +79,7 @@ export const Toolbar = ({
|
|
|
75
79
|
),
|
|
76
80
|
)}
|
|
77
81
|
{flyoutItems.length > 0 && (
|
|
78
|
-
<div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6">
|
|
82
|
+
<div className="tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative">
|
|
79
83
|
<Flyout
|
|
80
84
|
isOpen={isFlyoutOpen && !isDragging}
|
|
81
85
|
isTriggerDisabled={isFlyoutDisabled}
|
|
@@ -94,7 +98,7 @@ export const Toolbar = ({
|
|
|
94
98
|
triggerElement={
|
|
95
99
|
<div
|
|
96
100
|
data-test-id="block-item-wrapper-toolbar-flyout"
|
|
97
|
-
className="tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex
|
|
101
|
+
className="tw-bg-base hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed tw-cursor-pointer tw-inline-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-sm tw-relative"
|
|
98
102
|
>
|
|
99
103
|
<IconDotsHorizontal16 />
|
|
100
104
|
</div>
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { MenuItemStyle } from '@frontify/fondue';
|
|
4
|
+
import type { ReactNode } from 'react';
|
|
4
5
|
|
|
5
6
|
export type BlockItemWrapperProps = {
|
|
7
|
+
children: ReactNode;
|
|
6
8
|
shouldHideWrapper?: boolean;
|
|
7
9
|
shouldHideComponent?: boolean;
|
|
8
10
|
toolbarItems: (ToolbarItem | undefined)[];
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
} from '@frontify/app-bridge';
|
|
10
10
|
import { mount } from 'cypress/react18';
|
|
11
11
|
import { LinkSelector } from './LinkSelector';
|
|
12
|
-
import { SinonStub } from '
|
|
12
|
+
import type { SinonStub } from 'sinon';
|
|
13
13
|
|
|
14
14
|
const LinkSelectorSelector = '[data-test-id="internal-link-selector"]';
|
|
15
15
|
const LinkSelectorButtonSelector = '[data-test-id="internal-link-selector"] > button';
|
|
@@ -24,3 +24,7 @@ export const getUrl = (editor: PlateEditor) => {
|
|
|
24
24
|
export const getUrlFromLinkOrLegacyLink = (link: TLinkElement): string => {
|
|
25
25
|
return link.url || link.chosenLink?.searchResult?.link || '';
|
|
26
26
|
};
|
|
27
|
+
|
|
28
|
+
export const getLinkFromEditor = (editor: PlateEditor) => {
|
|
29
|
+
return getLinkNode(editor, getUrlFromLinkOrLegacyLink);
|
|
30
|
+
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { DocumentApiDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
|
|
4
4
|
import { PluginComposer } from '@frontify/fondue';
|
|
5
5
|
import { mount } from 'cypress/react18';
|
|
6
|
-
import { SinonStub } from '
|
|
6
|
+
import type { SinonStub } from 'sinon';
|
|
7
7
|
import { ButtonPlugin, LinkPlugin, RichTextEditor, TextStyles } from '.';
|
|
8
8
|
import { convertToRteValue } from '../../helpers';
|
|
9
9
|
|
|
@@ -26,7 +26,7 @@ import {
|
|
|
26
26
|
useVirtualFloatingLink,
|
|
27
27
|
} from '@udecode/plate';
|
|
28
28
|
import { useCallback, useEffect } from 'react';
|
|
29
|
-
import {
|
|
29
|
+
import { getLinkFromEditor } from '../../../../../Link';
|
|
30
30
|
|
|
31
31
|
export const useFloatingLinkEdit = ({ floatingOptions, ...props }: FloatingLinkProps): HTMLPropsAs<'div'> => {
|
|
32
32
|
const editor = useEditorRef();
|
|
@@ -62,7 +62,7 @@ export const useFloatingLinkEdit = ({ floatingOptions, ...props }: FloatingLinkP
|
|
|
62
62
|
});
|
|
63
63
|
|
|
64
64
|
useEffect(() => {
|
|
65
|
-
const url =
|
|
65
|
+
const url = getLinkFromEditor(editor);
|
|
66
66
|
if (url) {
|
|
67
67
|
floatingLinkActions.url(url);
|
|
68
68
|
}
|
|
@@ -4,7 +4,7 @@ import type { CSSProperties } from 'react';
|
|
|
4
4
|
import { LINK_PLUGIN } from './LinkPlugin/id';
|
|
5
5
|
import { BlockButtonStyles } from './ButtonPlugin';
|
|
6
6
|
|
|
7
|
-
export
|
|
7
|
+
export enum TextStyles {
|
|
8
8
|
heading1 = 'heading1',
|
|
9
9
|
heading2 = 'heading2',
|
|
10
10
|
heading3 = 'heading3',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import { ColorInput, TinyColor, readability } from '@ctrl/tinycolor';
|
|
4
4
|
import { toShortRgba } from './toShortRgba';
|
|
5
5
|
import { Color } from '@frontify/sidebar-settings';
|
|
6
6
|
|
|
@@ -22,8 +22,8 @@ export const getReadableColor = (textColor: unknown, backgroundColor: unknown):
|
|
|
22
22
|
const inputBackgroundColor = isRgbaLongFormat(backgroundColor)
|
|
23
23
|
? toShortRgba(backgroundColor)
|
|
24
24
|
: (backgroundColor as ColorInput);
|
|
25
|
-
let parsedTextColor =
|
|
26
|
-
const parsedBackgroundColor =
|
|
25
|
+
let parsedTextColor = new TinyColor(inputTextColor);
|
|
26
|
+
const parsedBackgroundColor = new TinyColor(inputBackgroundColor);
|
|
27
27
|
|
|
28
28
|
//darken the text color until readability is good
|
|
29
29
|
while (readability(parsedTextColor, parsedBackgroundColor) < 4.5) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import { ColorInput, TinyColor } from '@ctrl/tinycolor';
|
|
4
4
|
import { toShortRgba } from './toShortRgba';
|
|
5
5
|
import { Color } from '@frontify/sidebar-settings';
|
|
6
6
|
|
|
@@ -19,7 +19,7 @@ const isRgbaLongFormat = (value: unknown): value is Color => {
|
|
|
19
19
|
|
|
20
20
|
export const isDark = (color: unknown, threshold?: number): boolean => {
|
|
21
21
|
const inputColor = isRgbaLongFormat(color) ? toShortRgba(color) : (color as ColorInput);
|
|
22
|
-
const parsedColor =
|
|
22
|
+
const parsedColor = new TinyColor(inputColor);
|
|
23
23
|
|
|
24
24
|
if (threshold) {
|
|
25
25
|
return parsedColor.getBrightness() < threshold;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
|
-
import
|
|
3
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Sets alpha value and returns rgba string.
|
|
@@ -10,5 +10,5 @@ import tinycolor from '@ctrl/tinycolor';
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
export const setAlpha = (alpha: number, color?: string): string => {
|
|
13
|
-
return
|
|
13
|
+
return new TinyColor(color).setAlpha(alpha).toRgbString();
|
|
14
14
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* Maps color strings to color objects.
|
|
@@ -11,6 +11,6 @@ import tinycolor from '@ctrl/tinycolor';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
export const toColorObject = (colorString: string): Color => {
|
|
14
|
-
const { r, g, b, a } =
|
|
14
|
+
const { r, g, b, a } = new TinyColor(colorString);
|
|
15
15
|
return { red: r, green: g, blue: b, alpha: a };
|
|
16
16
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { toShortRgba } from './toShortRgba';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -11,4 +11,4 @@ import { toShortRgba } from './toShortRgba';
|
|
|
11
11
|
* @returns {String} To be used as css value.
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
export const toHex8String = (color: Color): string =>
|
|
14
|
+
export const toHex8String = (color: Color): string => new TinyColor(toShortRgba(color)).toHex8String();
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { toShortRgba } from './toShortRgba';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Maps color object of rgba values to hex alpha string.
|
|
9
9
|
*/
|
|
10
|
-
export const toHexString = (color: Color): string =>
|
|
10
|
+
export const toHexString = (color: Color): string => new TinyColor(toShortRgba(color)).toHexString();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
2
2
|
|
|
3
3
|
import { Color } from '@frontify/fondue';
|
|
4
|
-
import
|
|
4
|
+
import { TinyColor } from '@ctrl/tinycolor';
|
|
5
5
|
import { toShortRgba } from './toShortRgba';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -11,4 +11,4 @@ import { toShortRgba } from './toShortRgba';
|
|
|
11
11
|
* @returns {String} To be used as css value.
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
export const toRgbaString = (color: Color): string =>
|
|
14
|
+
export const toRgbaString = (color: Color): string => new TinyColor(toShortRgba(color)).toRgbString();
|