js-draw 0.18.1 → 0.19.0

package/dist/bundledStyles.js

@@ -0,0 +1 @@
+(()=>{"use strict";var r={786:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,'.clr-picker {\r\n  display: none;\r\n  flex-wrap: wrap;\r\n  position: absolute;\r\n  width: 200px;\r\n  z-index: 1000;\r\n  border-radius: 10px;\r\n  background-color: #fff;\r\n  justify-content: flex-end;\r\n  direction: ltr;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  -moz-user-select: none;\r\n  -webkit-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n.clr-picker.clr-open,\r\n.clr-picker[data-inline="true"] {\r\n  display: flex;\r\n}\r\n\r\n.clr-picker[data-inline="true"] {\r\n  position: relative;\r\n}\r\n\r\n.clr-gradient {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100px;\r\n  margin-bottom: 15px;\r\n  border-radius: 3px 3px 0 0;\r\n  background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker {\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  margin: -6px 0 0 -6px;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-runnable-track {\r\n  width: 100%;\r\n  height: 8px;\r\n}\r\n\r\n.clr-picker input[type="range"]::-webkit-slider-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-track {\r\n  width: 100%;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-picker input[type="range"]::-moz-range-thumb {\r\n  width: 8px;\r\n  height: 8px;\r\n  border: 0;\r\n}\r\n\r\n.clr-hue {\r\n  background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);\r\n}\r\n\r\n.clr-hue,\r\n.clr-alpha {\r\n  position: relative;\r\n  width: calc(100% - 40px);\r\n  height: 8px;\r\n  margin: 5px 20px;\r\n  border-radius: 4px;\r\n}\r\n\r\n.clr-alpha span {\r\n  display: block;\r\n  height: 100%;\r\n  width: 100%;\r\n  border-radius: inherit;\r\n  background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);\r\n}\r\n\r\n.clr-hue input,\r\n.clr-alpha input {\r\n  position: absolute;\r\n  width: calc(100% + 16px);\r\n  height: 16px;\r\n  left: -8px;\r\n  top: -4px;\r\n  margin: 0;\r\n  background-color: transparent;\r\n  opacity: 0;\r\n  cursor: pointer;\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n}\r\n\r\n.clr-hue div,\r\n.clr-alpha div {\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 16px;\r\n  left: 0;\r\n  top: 50%;\r\n  margin-left: -8px;\r\n  transform: translateY(-50%);\r\n  border: 2px solid #fff;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n  box-shadow: 0 0 1px #888;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-alpha div:before {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: 50%;\r\n  background-color: currentColor;\r\n}\r\n\r\n.clr-format {\r\n  display: none;\r\n  order: 1;\r\n  width: calc(100% - 40px);\r\n  margin: 0 20px 20px;\r\n}\r\n\r\n.clr-segmented {\r\n  display: flex;\r\n  position: relative;\r\n  width: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 1px solid #ddd;\r\n  border-radius: 15px;\r\n  box-sizing: border-box;\r\n  color: #999;\r\n  font-size: 12px;\r\n}\r\n\r\n.clr-segmented input,\r\n.clr-segmented legend {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  left: 0;\r\n  top: 0;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-segmented label {\r\n  flex-grow: 1;\r\n  margin: 0;\r\n  padding: 4px 0;\r\n  font-size: inherit;\r\n  font-weight: normal;\r\n  line-height: initial;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-segmented label:first-of-type {\r\n  border-radius: 10px 0 0 10px;\r\n}\r\n\r\n.clr-segmented label:last-of-type {\r\n  border-radius: 0 10px 10px 0;\r\n}\r\n\r\n.clr-segmented input:checked + label {\r\n  color: #fff;\r\n  background-color: #666;\r\n}\r\n\r\n.clr-swatches {\r\n  order: 2;\r\n  width: calc(100% - 32px);\r\n  margin: 0 16px;\r\n}\r\n\r\n.clr-swatches div {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  padding-bottom: 12px;\r\n  justify-content: center;\r\n}\r\n\r\n.clr-swatches button {\r\n  position: relative;\r\n  width: 20px;\r\n  height: 20px;\r\n  margin: 0 4px 6px 4px;\r\n  padding: 0;\r\n  border: 0;\r\n  border-radius: 50%;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-swatches button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\ninput.clr-color {\r\n  order: 1;\r\n  width: calc(100% - 80px);\r\n  height: 32px;\r\n  margin: 15px 20px 20px auto;\r\n  padding: 0 10px;\r\n  border: 1px solid #ddd;\r\n  border-radius: 16px;\r\n  color: #444;\r\n  background-color: #fff;\r\n  font-family: sans-serif;\r\n  font-size: 14px;\r\n  text-align: center;\r\n  box-shadow: none;\r\n}\r\n\r\ninput.clr-color:focus {\r\n  outline: none;\r\n  border: 1px solid #1e90ff;\r\n}\r\n\r\n.clr-close,\r\n.clr-clear {\r\n  display: none;\r\n  order: 2;\r\n  height: 24px;\r\n  margin: 0 20px 20px;\r\n  padding: 0 20px;\r\n  border: 0;\r\n  border-radius: 12px;\r\n  color: #fff;\r\n  background-color: #666;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  font-weight: 400;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-close {\r\n  display: block;\r\n  margin: 0 20px 20px auto;\r\n}\r\n\r\n.clr-preview {\r\n  position: relative;\r\n  width: 32px;\r\n  height: 32px;\r\n  margin: 15px 0 20px 20px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\n.clr-preview:before,\r\n.clr-preview:after {\r\n  content: \'\';\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border: 1px solid #fff;\r\n  border-radius: 50%;\r\n}\r\n\r\n.clr-preview:after {\r\n  border: 0;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);\r\n}\r\n\r\n.clr-preview button {\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 1;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  background-color: transparent;\r\n  text-indent: -9999px;\r\n  cursor: pointer;\r\n}\r\n\r\n.clr-marker,\r\n.clr-hue div,\r\n.clr-alpha div,\r\n.clr-color {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-field {\r\n  display: inline-block;\r\n  position: relative;\r\n  color: transparent;\r\n}\r\n\r\n.clr-field input {\r\n  margin: 0;\r\n  direction: ltr;\r\n}\r\n\r\n.clr-field.clr-rtl input {\r\n  text-align: right;\r\n}\r\n\r\n.clr-field button {\r\n  position: absolute;\r\n  width: 30px;\r\n  height: 100%;\r\n  right: 0;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  color: inherit;\r\n  text-indent: -1000px;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-field.clr-rtl button {\r\n  right: auto;\r\n  left: 0;\r\n}\r\n\r\n.clr-field button:after {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  border-radius: inherit;\r\n  background-color: currentColor;\r\n  box-shadow: inset 0 0 1px rgba(0,0,0,.5);\r\n}\r\n\r\n.clr-alpha,\r\n.clr-alpha div,\r\n.clr-swatches button,\r\n.clr-preview:before,\r\n.clr-field button {\r\n  background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);\r\n  background-position: 0 0, 4px 4px;\r\n  background-size: 8px 8px;\r\n}\r\n\r\n.clr-marker:focus {\r\n  outline: none;\r\n}\r\n\r\n.clr-keyboard-nav .clr-marker:focus,\r\n.clr-keyboard-nav .clr-hue input:focus + div,\r\n.clr-keyboard-nav .clr-alpha input:focus + div,\r\n.clr-keyboard-nav .clr-segmented input:focus + label {\r\n  outline: none;\r\n  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;\r\n}\r\n\r\n.clr-picker[data-alpha="false"] .clr-alpha {\r\n  display: none;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] {\r\n  padding-top: 16px;\r\n}\r\n\r\n.clr-picker[data-minimal="true"] .clr-gradient,\r\n.clr-picker[data-minimal="true"] .clr-hue,\r\n.clr-picker[data-minimal="true"] .clr-alpha,\r\n.clr-picker[data-minimal="true"] .clr-color,\r\n.clr-picker[data-minimal="true"] .clr-preview {\r\n  display: none;\r\n}\r\n\r\n/** Dark theme **/\r\n\r\n.clr-dark {\r\n  background-color: #444;\r\n}\r\n\r\n.clr-dark .clr-segmented {\r\n  border-color: #777;\r\n}\r\n\r\n.clr-dark .clr-swatches button:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);\r\n}\r\n\r\n.clr-dark input.clr-color {\r\n  color: #fff;\r\n  border-color: #777;\r\n  background-color: #555;\r\n}\r\n\r\n.clr-dark input.clr-color:focus {\r\n  border-color: #1e90ff;\r\n}\r\n\r\n.clr-dark .clr-preview:after {\r\n  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);\r\n}\r\n\r\n.clr-dark .clr-alpha,\r\n.clr-dark .clr-alpha div,\r\n.clr-dark .clr-swatches button,\r\n.clr-dark .clr-preview:before {\r\n  background-image: repeating-linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #888 75%, #888), repeating-linear-gradient(45deg, #888 25%, #444 25%, #444 75%, #888 75%, #888);\r\n}\r\n\r\n/** Polaroid theme **/\r\n\r\n.clr-picker.clr-polaroid {\r\n  border-radius: 6px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.1), 0 5px 30px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-picker.clr-polaroid:before {\r\n  content: \'\';\r\n  display: block;\r\n  position: absolute;\r\n  width: 16px;\r\n  height: 10px;\r\n  left: 20px;\r\n  top: -10px;\r\n  border: solid transparent;\r\n  border-width: 0 8px 10px 8px;\r\n  border-bottom-color: currentColor;\r\n  box-sizing: border-box;\r\n  color: #fff;\r\n  filter: drop-shadow(0 -4px 3px rgba(0,0,0,.1));\r\n  pointer-events: none;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-dark:before {\r\n  color: #444;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-left:before {\r\n  left: auto;\r\n  right: 20px;\r\n}\r\n\r\n.clr-picker.clr-polaroid.clr-top:before {\r\n  top: auto;\r\n  bottom: -10px;\r\n  transform: rotateZ(180deg);\r\n}\r\n\r\n.clr-polaroid .clr-gradient {\r\n  width: calc(100% - 20px);\r\n  height: 120px;\r\n  margin: 10px;\r\n  border-radius: 3px;\r\n}\r\n\r\n.clr-polaroid .clr-hue,\r\n.clr-polaroid .clr-alpha {\r\n  width: calc(100% - 30px);\r\n  height: 10px;\r\n  margin: 6px 15px;\r\n  border-radius: 5px;\r\n}\r\n\r\n.clr-polaroid .clr-hue div,\r\n.clr-polaroid .clr-alpha div {\r\n  box-shadow: 0 0 5px rgba(0,0,0,.2);\r\n}\r\n\r\n.clr-polaroid .clr-format {\r\n  width: calc(100% - 20px);\r\n  margin: 0 10px 15px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches {\r\n  width: calc(100% - 12px);\r\n  margin: 0 6px;\r\n}\r\n.clr-polaroid .clr-swatches div {\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.clr-polaroid .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n.clr-polaroid input.clr-color {\r\n  width: calc(100% - 60px);\r\n  margin: 10px 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-clear {\r\n  margin: 0 10px 15px 10px;\r\n}\r\n\r\n.clr-polaroid .clr-close {\r\n  margin: 0 10px 15px auto;\r\n}\r\n\r\n.clr-polaroid .clr-preview {\r\n  margin: 10px 0 15px 10px;\r\n}\r\n\r\n/** Large theme **/\r\n\r\n.clr-picker.clr-large {\r\n  width: 275px;\r\n}\r\n\r\n.clr-large .clr-gradient {\r\n  height: 150px;\r\n}\r\n\r\n.clr-large .clr-swatches button {\r\n  width: 22px;\r\n  height: 22px;\r\n}\r\n\r\n/** Pill (horizontal) theme **/\r\n\r\n.clr-picker.clr-pill {\r\n  width: 380px;\r\n  padding-left: 180px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.clr-pill .clr-gradient {\r\n  position: absolute;\r\n  width: 180px;\r\n  height: 100%;\r\n  left: 0;\r\n  top: 0;\r\n  margin-bottom: 0;\r\n  border-radius: 3px 0 0 3px;\r\n}\r\n\r\n.clr-pill .clr-hue {\r\n  margin-top: 20px;\r\n}',""]);const l=a},59:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(771),d=o(443),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([r.id,"\n.imageEditorContainer {\n\t/* Deafult colors for the editor */\n    --primary-background-color: white;\n    --primary-background-color-transparent: rgba(255, 255, 255, 0.5);\n    --secondary-background-color: #faf;\n    --primary-foreground-color: black;\n    --secondary-foreground-color: black;\n\t--primary-shadow-color: rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n\t.imageEditorContainer {\n\t\t--primary-background-color: #151515;\n\t\t--primary-background-color-transparent: rgba(50, 50, 50, 0.5);\n\t\t--secondary-background-color: #607;\n\t\t--primary-foreground-color: white;\n\t\t--secondary-foreground-color: white;\n\t\t--primary-shadow-color: rgba(250, 250, 250, 0.5);\n\t}\n}\n\n.imageEditorContainer {\n\tcolor: var(--primary-foreground-color);\n\tfont-family: system-ui, -apple-system, sans-serif;\n\tbackground-color: var(--primary-background-color);\n\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n}\n\n.imageEditorContainer .imageEditorRenderArea {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr;\n\tflex-grow: 2;\n\tflex-shrink: 1;\n\tmin-height: 100px;\n}\n\n.imageEditorContainer .imageEditorRenderArea canvas {\n\t/* Stack all canvases on top of each other */\n\tgrid-row: 1 / 1;\n\tgrid-column: 1 / 1;\n\ttouch-action: none;\n\n\t/* Fill the container */\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Allow the canvas to shrink (needed in Chrome) */\n\tmin-height: 0px;\n\tmax-height: inherit;\n}\n\n.imageEditorContainer .loadingMessage {\n\tposition: fixed;\n\ttext-align: center;\n\tfont-size: 2em;\n\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n}\n\n.imageEditorContainer .accessibilityAnnouncement {\n\topacity: 0;\n\twidth: 0;\n\theight: 0;\n\toverflow: hidden;\n\tpointer-events: none;\n}\n\n.imageEditorContainer .textRendererOutputContainer {\n\twidth: 1px;\n\theight: 1px;\n\toverflow: hidden;\n}\n\n.imageEditorContainer .textRendererOutputContainer:focus-within {\n\toverflow: visible;\n\tz-index: 5;\n}\n",""]);const p=c},771:(r,n,o)=>{o.d(n,{Z:()=>p});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(350),d=o(519),c=a()(e());c.i(l.Z),c.i(d.Z),c.push([r.id,".toolbar-root {\n\tbackground-color: var(--primary-background-color);\n\t--icon-color: var(--primary-foreground-color);\n\n\n\tborder: 1px solid var(--secondary-background-color);\n\tborder-radius: 2px;\n\tflex-wrap: wrap;\n\n\tbox-sizing: border-box;\n\twidth: 100%;\n\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\n\t--toolbar-button-height: min(20vh, 60px);\n\n\t/* Display above selection dialogs, etc. */\n\tz-index: 2;\n\n\tfont-family: system-ui, -apple-system, sans-serif;\n}\n\n.toolbar-root > .toolbar-toolContainer > .toolbar-button,\n.toolbar-root > .toolbar-toolContainer > * > button,\n.toolbar-root > .toolbar-buttonGroup > button,\n.toolbar-root > .toolbar-button {\n\twidth: min-content;\n\twhite-space: pre;\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-dropdown .toolbar-button > .toolbar-icon {\n\tmax-width: 50px;\n\twidth: 100%;\n}\n\n.toolbar-button.disabled {\n\tfilter: opacity(0.5) sepia(0.2);\n\tcursor: unset;\n}\n\n.toolbar-button, .toolbar-root button {\n\tcursor: pointer;\n\ttext-align: center;\n\tborder-radius: 6px;\n\n\t--icon-color: var(--primary-foreground-color);\n\tbackground-color: var(--primary-background-color);\n\tcolor: var(--primary-foreground-color);\n\tborder: none;\n\tbox-shadow: 0px 0px 2px var(--primary-shadow-color);\n\n\ttransition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;\n}\n\n.toolbar-button,\n.toolbar-buttonGroup > button,\n.toolbar-toolContainer > * > button,\n.toolbar-root > button {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\n\tpadding-left: 3px;\n\tpadding-right: 3px;\n\tmargin-left: 3px;\n\tmargin-right: 3px;\n\n\tmin-width: 40px;\n\twidth: min-content;\n\tfont-size: 1em;\n}\n\n.toolbar-button > label {\n\tcursor: inherit;\n}\n\n.toolbar-dropdown > .toolbar-toolContainer > button,\n.toolbar-dropdown > .toolbar-toolContainer > .toolbar-button {\n\twidth: 6em;\n}\n\n.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {\n\tbox-shadow: 0px 2px 4px var(--primary-shadow-color);\n}\n\n.toolbar-root button:disabled {\n\tcursor: inherit;\n\tfilter: opacity(0.5);\n}\n\n.toolbar-root .toolbar-icon {\n\tflex-shrink: 1;\n\n\twidth: 100%;\n\tmin-width: 30px;\n\tmin-height: 30px;\n}\n\n.toolbar-toolContainer.selected > .toolbar-button {\n\tbackground-color: var(--secondary-background-color);\n\tcolor: var(--secondary-foreground-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon {\n\tdisplay: none;\n}\n\n.toolbar-toolContainer > .toolbar-button > .toolbar-showHideDropdownIcon {\n\theight: 10px;\n\ttransition: transform 0.5s ease;\n}\n\n.toolbar-toolContainer.dropdownVisible > .toolbar-button > .toolbar-showHideDropdownIcon {\n\ttransform: rotate(180deg);\n}\n\n.toolbar-dropdown.hidden,\n.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {\n\tdisplay: none;\n}\n\n.toolbar-dropdown {\n\tposition: absolute;\n\tpadding: 15px;\n\tpadding-top: 5px;\n\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tflex-direction: column;\n\tmax-height: 80vh;\n\n\tmax-width: fit-content;\n\n\t/* Prevent overlap/being displayed under the undo/redo buttons */\n\tz-index: 2;\n\tbackground-color: var(--primary-background-color);\n\tbox-shadow: 0px 3px 3px var(--primary-shadow-color);\n}\n\n.toolbar-buttonGroup {\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n}\n\n.toolbar-closeColorPickerOverlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbottom: 0;\n\tright: 0;\n\n\tbackground-color: var(--primary-background-color);\n\topacity: 0.3;\n}\n\n/* Make color selection buttons fill their containing label */\n.toolbar-dropdown .clr-field button {\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: 2px;\n\tmargin-left: 0;\n\tmargin-right: 0;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor {\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {\n\tflex-grow: 1;\n}\n\n.toolbar-root .toolbar-zoomLevelEditor button {\n\tmin-width: 48px;\n}\n\n.color-input-container {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n}\n\n.color-input-container .pipetteButton {\n\twidth: 30px;\n\theight: 30px;\n\tpadding: 0;\n\tdisplay: inline-flex;\n}\n\n.color-input-container .pipetteButton > svg {\n\twidth: 100%;\n}\n\n.color-input-container .pipetteButton.active {\n\tbackground-color: var(--secondary-background-color);\n\t--icon-color: var(--secondary-foreground-color);\n}\n\n.toolbar-spacedList > * {\n\tpadding-bottom: 5px;\n\tpadding-top: 5px;\n}",""]);const p=c},350:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-image-selection-overlay {\n\tposition: absolute;\n\n\twidth: 100%;\n\theight: 100%;\n\tz-index: 10;\n\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.toolbar-image-selection-overlay > div {\n\tbackground: var(--primary-background-color);\n\tbox-shadow: 1px 1px 3px var(--primary-shadow-color);\n\n\tpadding: 18px;\n\tborder-radius: 3px;\n}\n\n.toolbar-image-selection-overlay > div > div {\n\tpadding: 5px;\n}\n\n.toolbar-image-selection-overlay img {\n\tmax-width: min(50vw, 75%);\n\tmax-height: 50vh;\n\n\t/* Center */\n\tdisplay: block;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.toolbar-image-selection-overlay .action-button-row {\n\tmargin-top: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n}\n\n.toolbar-image-selection-overlay .action-button-row > button {\n\tflex-grow: 1;\n}",""]);const l=a},519:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.toolbar-overflow-widget-overflow-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\tjustify-content: center;\n}\n\n.toolbar-overflow-widget-overflow-list > .toolbar-toolContainer > .toolbar-button {\n\theight: var(--toolbar-button-height);\n}\n\n.toolbar-overflow-widget.horizontal .toolbar-overflow-widget-overflow-list {\n\tflex-direction: row;\n}\n\n.toolbar-overflow-widget.horizontal > .toolbar-dropdown {\n\tmax-width: 100%;\n\tleft: 15px;\n\tright: 15px;\n\n\t/* Override the default transform and margin-left */\n\tmargin-left: 0 !important;\n\ttransform: none !important;\n\n\tpadding: 4px;\n}",""]);const l=a},324:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.find-tool-overlay {\n    /* Show at the bottom of the screen. */\n    order: -1;\n\n    position: absolute;\n}",""]);const l=a},611:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.selection-tool-selection-background {\n    background-color: var(--secondary-background-color);\n    opacity: 0.5;\n    overflow: visible;\n    position: absolute;\n}\n\n.selection-tool-handle {\n    border: 1px solid var(--primary-foreground-color);\n    background: var(--primary-background-color);\n    position: absolute;\n    cursor: grab;\n}\n\n.selection-tool-handle.selection-tool-circle {\n    border-radius: 100%;\n}\n\n.overlay.handleOverlay {\n    height: 0;\n    overflow: visible;\n}",""]);const l=a},34:(r,n,o)=>{o.d(n,{Z:()=>l});var t=o(81),e=o.n(t),i=o(645),a=o.n(i)()(e());a.push([r.id,"\n.js-draw-sound-ui-toggle {\n\twidth: 0px;\n\theight: 0px;\n\toverflow: hidden;    \n}\n\n.js-draw-sound-ui-toggle:focus-within, .js-draw-sound-ui-toggle.sound-ui-tool-enabled {\n\toverflow: visible;\n\tz-index: 5;\n}\n\n.js-draw-sound-ui-toggle:not(:focus-within):not(:hover).sound-ui-tool-enabled {\n\topacity: 0.5;\n}\n",""]);const l=a},443:(r,n,o)=>{o.d(n,{Z:()=>s});var t=o(81),e=o.n(t),i=o(645),a=o.n(i),l=o(611),d=o(324),c=o(34),p=a()(e());p.i(l.Z),p.i(d.Z),p.i(c.Z),p.push([r.id,"",""]);const s=p},645:r=>{r.exports=function(r){var n=[];return n.toString=function(){return this.map((function(n){var o="",t=void 0!==n[5];return n[4]&&(o+="@supports (".concat(n[4],") {")),n[2]&&(o+="@media ".concat(n[2]," {")),t&&(o+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),o+=r(n),t&&(o+="}"),n[2]&&(o+="}"),n[4]&&(o+="}"),o})).join("")},n.i=function(r,o,t,e,i){"string"==typeof r&&(r=[[null,r,void 0]]);var a={};if(t)for(var l=0;l<this.length;l++){var d=this[l][0];null!=d&&(a[d]=!0)}for(var c=0;c<r.length;c++){var p=[].concat(r[c]);t&&a[p[0]]||(void 0!==i&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=i),o&&(p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=o):p[2]=o),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),n.push(p))}},n}},81:r=>{r.exports=function(r){return r[1]}},379:r=>{var n=[];function o(r){for(var o=-1,t=0;t<n.length;t++)if(n[t].identifier===r){o=t;break}return o}function t(r,t){for(var i={},a=[],l=0;l<r.length;l++){var d=r[l],c=t.base?d[0]+t.base:d[0],p=i[c]||0,s="".concat(c," ").concat(p);i[c]=p+1;var u=o(s),b={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==u)n[u].references++,n[u].updater(b);else{var h=e(b,t);t.byIndex=l,n.splice(l,0,{identifier:s,updater:h,references:1})}a.push(s)}return a}function e(r,n){var o=n.domAPI(n);o.update(r);return function(n){if(n){if(n.css===r.css&&n.media===r.media&&n.sourceMap===r.sourceMap&&n.supports===r.supports&&n.layer===r.layer)return;o.update(r=n)}else o.remove()}}r.exports=function(r,e){var i=t(r=r||[],e=e||{});return function(r){r=r||[];for(var a=0;a<i.length;a++){var l=o(i[a]);n[l].references--}for(var d=t(r,e),c=0;c<i.length;c++){var p=o(i[c]);0===n[p].references&&(n[p].updater(),n.splice(p,1))}i=d}}},569:r=>{var n={};r.exports=function(r,o){var t=function(r){if(void 0===n[r]){var o=document.querySelector(r);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(r){o=null}n[r]=o}return n[r]}(r);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(o)}},216:r=>{r.exports=function(r){var n=document.createElement("style");return r.setAttributes(n,r.attributes),r.insert(n,r.options),n}},565:(r,n,o)=>{r.exports=function(r){var n=o.nc;n&&r.setAttribute("nonce",n)}},795:r=>{r.exports=function(r){var n=r.insertStyleElement(r);return{update:function(o){!function(r,n,o){var t="";o.supports&&(t+="@supports (".concat(o.supports,") {")),o.media&&(t+="@media ".concat(o.media," {"));var e=void 0!==o.layer;e&&(t+="@layer".concat(o.layer.length>0?" ".concat(o.layer):""," {")),t+=o.css,e&&(t+="}"),o.media&&(t+="}"),o.supports&&(t+="}");var i=o.sourceMap;i&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),n.styleTagTransform(t,r,n.options)}(n,r,o)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(n)}}}},589:r=>{r.exports=function(r,n){if(n.styleSheet)n.styleSheet.cssText=r;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(r))}}}},n={};function o(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={id:t,exports:{}};return r[t](i,i.exports,o),i.exports}o.n=r=>{var n=r&&r.__esModule?()=>r.default:()=>r;return o.d(n,{a:n}),n},o.d=(r,n)=>{for(var t in n)o.o(n,t)&&!o.o(r,t)&&Object.defineProperty(r,t,{enumerable:!0,get:n[t]})},o.o=(r,n)=>Object.prototype.hasOwnProperty.call(r,n),o.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.nc=void 0;var t={};(()=>{o.r(t);var r=o(379),n=o.n(r),e=o(795),i=o.n(e),a=o(569),l=o.n(a),d=o(565),c=o.n(d),p=o(216),s=o.n(p),u=o(589),b=o.n(u),h=o(59),g={};g.styleTagTransform=b(),g.setAttributes=c(),g.insert=l().bind(null,"head"),g.domAPI=i(),g.insertStyleElement=s();n()(h.Z,g);h.Z&&h.Z.locals&&h.Z.locals;var x=o(786),f={};f.styleTagTransform=b(),f.setAttributes=c(),f.insert=l().bind(null,"head"),f.domAPI=i(),f.insertStyleElement=s();n()(x.Z,f);x.Z&&x.Z.locals&&x.Z.locals})(),window.jsdrawStyles=t})();

package/dist/cjs/src/Color4.d.ts

@@ -0,0 +1,69 @@
+import Vec3 from './math/Vec3';
+export default class Color4 {
+    /** Red component. Should be in the range [0, 1]. */
+    readonly r: number;
+    /** Green component. `g` ∈ [0, 1] */
+    readonly g: number;
+    /** Blue component. `b` ∈ [0, 1] */
+    readonly b: number;
+    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
+    readonly a: number;
+    private constructor();
+    /**
+     * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
+     *
+     * Each component should be in the range [0, 1].
+     */
+    static ofRGB(red: number, green: number, blue: number): Color4;
+    static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4;
+    static fromHex(hexString: string): Color4;
+    /** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
+    static fromString(text: string): Color4;
+    /** @returns true if `this` and `other` are approximately equal. */
+    eq(other: Color4 | null | undefined): boolean;
+    /**
+     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
+     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
+     *
+     * @returns a color `fractionTo` of the way from this color to `other`.
+     *
+     * @example
+     * ```ts
+     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
+     * ```
+     */
+    mix(other: Color4, fractionTo: number): Color4;
+    /**
+     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+     */
+    static average(colors: Color4[]): Color4;
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV(): Vec3;
+    private hexString;
+    /**
+     * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
+     *
+     * @example
+     * ```
+     * Color4.red.toHexString(); // -> #ff0000ff
+     * ```
+     */
+    toHexString(): string;
+    toString(): string;
+    static transparent: Color4;
+    static red: Color4;
+    static green: Color4;
+    static blue: Color4;
+    static purple: Color4;
+    static yellow: Color4;
+    static clay: Color4;
+    static black: Color4;
+    static gray: Color4;
+    static white: Color4;
+}
+export { Color4 };

package/dist/cjs/src/Color4.js

@@ -0,0 +1,264 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Color4 = void 0;
+const Vec3_1 = __importDefault(require("./math/Vec3"));
+class Color4 {
+    constructor(
+    /** Red component. Should be in the range [0, 1]. */
+    r, 
+    /** Green component. `g` ∈ [0, 1] */
+    g, 
+    /** Blue component. `b` ∈ [0, 1] */
+    b, 
+    /** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
+    a) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+        this.hexString = null;
+    }
+    /**
+     * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
+     *
+     * Each component should be in the range [0, 1].
+     */
+    static ofRGB(red, green, blue) {
+        return Color4.ofRGBA(red, green, blue, 1.0);
+    }
+    static ofRGBA(red, green, blue, alpha) {
+        red = Math.max(0, Math.min(red, 1));
+        green = Math.max(0, Math.min(green, 1));
+        blue = Math.max(0, Math.min(blue, 1));
+        alpha = Math.max(0, Math.min(alpha, 1));
+        return new Color4(red, green, blue, alpha);
+    }
+    static fromHex(hexString) {
+        var _a;
+        // Remove starting '#' (if present)
+        hexString = ((_a = hexString.match(/^[#]?(.*)$/)) !== null && _a !== void 0 ? _a : [])[1];
+        hexString = hexString.toUpperCase();
+        if (!hexString.match(/^[0-9A-F]+$/)) {
+            throw new Error(`${hexString} is not in a valid format.`);
+        }
+        // RGBA or RGB
+        if (hexString.length === 3 || hexString.length === 4) {
+            // Each character is a component
+            const components = hexString.split('');
+            // Convert to RRGGBBAA or RRGGBB format
+            hexString = components.map(component => `${component}0`).join('');
+        }
+        if (hexString.length === 6) {
+            // Alpha component
+            hexString += 'FF';
+        }
+        const components = [];
+        for (let i = 2; i <= hexString.length; i += 2) {
+            const chunk = hexString.substring(i - 2, i);
+            components.push(parseInt(chunk, 16) / 255);
+        }
+        if (components.length !== 4) {
+            throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
+        }
+        return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
+    }
+    /** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
+    static fromString(text) {
+        if (text.startsWith('#')) {
+            return Color4.fromHex(text);
+        }
+        if (text === 'none' || text === 'transparent') {
+            return Color4.transparent;
+        }
+        // rgba?: Match both rgb and rgba strings.
+        // ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
+        const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
+        const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
+        if (rgbMatch) {
+            const componentsListStr = rgbMatch[1];
+            const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
+            if (componentsList.length === 3) {
+                return Color4.ofRGB(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255);
+            }
+            else if (componentsList.length === 4) {
+                return Color4.ofRGBA(componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]);
+            }
+            else {
+                throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
+            }
+        }
+        // Otherwise, try to use an HTMLCanvasElement to determine the color.
+        // Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = text;
+        ctx.fillRect(0, 0, 1, 1);
+        const data = ctx.getImageData(0, 0, 1, 1);
+        const red = data.data[0] / 255;
+        const green = data.data[1] / 255;
+        const blue = data.data[2] / 255;
+        const alpha = data.data[3] / 255;
+        return Color4.ofRGBA(red, green, blue, alpha);
+    }
+    /** @returns true if `this` and `other` are approximately equal. */
+    eq(other) {
+        if (other == null) {
+            return false;
+        }
+        // If both completely transparent,
+        if (this.a === 0 && other.a === 0) {
+            return true;
+        }
+        return this.toHexString() === other.toHexString();
+    }
+    /**
+     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
+     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
+     *
+     * @returns a color `fractionTo` of the way from this color to `other`.
+     *
+     * @example
+     * ```ts
+     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
+     * ```
+     */
+    mix(other, fractionTo) {
+        fractionTo = Math.min(Math.max(fractionTo, 0), 1);
+        const fractionOfThis = 1 - fractionTo;
+        return new Color4(this.r * fractionOfThis + other.r * fractionTo, this.g * fractionOfThis + other.g * fractionTo, this.b * fractionOfThis + other.b * fractionTo, this.a * fractionOfThis + other.a * fractionTo);
+    }
+    /**
+     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+     */
+    static average(colors) {
+        let averageA = 0;
+        let averageR = 0;
+        let averageG = 0;
+        let averageB = 0;
+        for (const color of colors) {
+            averageA += color.a;
+            averageR += color.r;
+            averageG += color.g;
+            averageB += color.b;
+        }
+        if (colors.length > 0) {
+            averageA /= colors.length;
+            averageR /= colors.length;
+            averageG /= colors.length;
+            averageB /= colors.length;
+        }
+        return new Color4(averageR, averageG, averageB, averageA);
+    }
+    /**
+     * Converts to (hue, saturation, value).
+     * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+     *
+     * The resultant hue is represented in radians and is thus in [0, 2pi].
+     */
+    asHSV() {
+        // Ref: https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        //
+        // HUE:
+        // First, consider the unit cube. Rotate it such that one vertex is at the origin
+        // of a plane and its three neighboring vertices are equidistant from that plane:
+        //
+        //         /\
+        //       /  | \
+        //   2 /    3   \ 1
+        //     \    |   /
+        //       \  | /
+        //   .     \/      .
+        //                 
+        //        .        
+        //
+        // Let z be up and (x, y, 0) be in the plane.
+        //
+        // Label vectors 1,2,3 with R, G, and B, respectively. Let R's projection into the plane
+        // lie along the x axis.
+        //
+        // Because R is a unit vector and R, G, B are equidistant from the plane, they must
+        // form 30-60-90 triangles, which have side lengths proportional to (1, √3, 2)
+        //
+        //       /|
+        //    1/  | (√3)/2
+        //    /   |
+        //      1/2   
+        //
+        const minComponent = Math.min(this.r, this.g, this.b);
+        const maxComponent = Math.max(this.r, this.g, this.b);
+        const chroma = maxComponent - minComponent;
+        let hue;
+        // See https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+        if (chroma === 0) {
+            hue = 0;
+        }
+        else if (this.r >= this.g && this.r >= this.b) {
+            hue = ((this.g - this.b) / chroma) % 6;
+        }
+        else if (this.g >= this.r && this.g >= this.b) {
+            hue = (this.b - this.r) / chroma + 2;
+        }
+        else {
+            hue = (this.r - this.g) / chroma + 4;
+        }
+        // Convert to degree representation, then to radians.
+        hue *= 60;
+        hue *= Math.PI / 180;
+        // Ensure positivity.
+        if (hue < 0) {
+            hue += Math.PI * 2;
+        }
+        const value = maxComponent;
+        const saturation = value > 0 ? chroma / value : 0;
+        return Vec3_1.default.of(hue, saturation, value);
+    }
+    /**
+     * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
+     *
+     * @example
+     * ```
+     * Color4.red.toHexString(); // -> #ff0000ff
+     * ```
+     */
+    toHexString() {
+        if (this.hexString) {
+            return this.hexString;
+        }
+        const componentToHex = (component) => {
+            const res = Math.round(255 * component).toString(16);
+            if (res.length === 1) {
+                return `0${res}`;
+            }
+            return res;
+        };
+        const alpha = componentToHex(this.a);
+        const red = componentToHex(this.r);
+        const green = componentToHex(this.g);
+        const blue = componentToHex(this.b);
+        if (alpha === 'ff') {
+            return `#${red}${green}${blue}`;
+        }
+        this.hexString = `#${red}${green}${blue}${alpha}`;
+        return this.hexString;
+    }
+    toString() {
+        return this.toHexString();
+    }
+}
+exports.default = Color4;
+exports.Color4 = Color4;
+Color4.transparent = Color4.ofRGBA(0, 0, 0, 0);
+Color4.red = Color4.ofRGB(1.0, 0.0, 0.0);
+Color4.green = Color4.ofRGB(0.0, 1.0, 0.0);
+Color4.blue = Color4.ofRGB(0.0, 0.0, 1.0);
+Color4.purple = Color4.ofRGB(0.5, 0.2, 0.5);
+Color4.yellow = Color4.ofRGB(1, 1, 0.1);
+Color4.clay = Color4.ofRGB(0.8, 0.4, 0.2);
+Color4.black = Color4.ofRGB(0, 0, 0);
+Color4.gray = Color4.ofRGB(0.5, 0.5, 0.5);
+Color4.white = Color4.ofRGB(1, 1, 1);