|
31 | 31 | blue: [0, 0, 1], |
32 | 32 | magenta: [1, 0, 1], |
33 | 33 | }; |
| 34 | + const PURE_COLORS_GRAYABLE = [ |
| 35 | + ["Red", "#ff0000", "#4c4c4c"], |
| 36 | + ["Yellow", "#ffff00", "#e3e3e3"], |
| 37 | + ["Green", "#00ff00", "#969696"], |
| 38 | + ["Cyan", "#00ffff", "#b2b2b2"], |
| 39 | + ["Blue", "#0000ff", "#1c1c1c"], |
| 40 | + ["Magenta", "#ff00ff", "#696969"], |
| 41 | + ]; |
34 | 42 |
|
35 | 43 | const editor = getContext<Editor>("editor"); |
36 | 44 |
|
|
422 | 430 | <LayoutRow class="pickers"> |
423 | 431 | <LayoutCol |
424 | 432 | class="saturation-value-picker" |
425 | | - data-tooltip-label={disabled ? "Saturation and Value (Disabled)" : "Saturation and Value"} |
| 433 | + data-tooltip-label="Saturation and Value" |
| 434 | + data-tooltip-description={disabled ? "Disabled (read-only)." : ""} |
426 | 435 | on:pointerdown={onPointerDown} |
427 | 436 | data-saturation-value-picker |
428 | 437 | > |
|
439 | 448 | /> |
440 | 449 | {/if} |
441 | 450 | </LayoutCol> |
442 | | - <LayoutCol class="hue-picker" data-tooltip-label={disabled ? "Hue (Disabled)" : "Hue"} on:pointerdown={onPointerDown} data-hue-picker> |
| 451 | + <LayoutCol |
| 452 | + class="hue-picker" |
| 453 | + data-tooltip-label="Hue" |
| 454 | + data-tooltip-description={"The shade along the spectrum of the rainbow." + (disabled ? "\n\nDisabled (read-only)." : "")} |
| 455 | + on:pointerdown={onPointerDown} |
| 456 | + data-hue-picker |
| 457 | + > |
443 | 458 | {#if !isNone} |
444 | 459 | <div class="selection-needle" style:top={`${(1 - hue) * 100}%`} /> |
445 | 460 | {/if} |
446 | 461 | </LayoutCol> |
447 | | - <LayoutCol class="alpha-picker" data-tooltip-label={disabled ? "Alpha (Disabled)" : "Alpha"} on:pointerdown={onPointerDown} data-alpha-picker> |
| 462 | + <LayoutCol |
| 463 | + class="alpha-picker" |
| 464 | + data-tooltip-label="Alpha" |
| 465 | + data-tooltip-description={"The level of translucency." + (disabled ? "\n\nDisabled (read-only)." : "")} |
| 466 | + on:pointerdown={onPointerDown} |
| 467 | + data-alpha-picker |
| 468 | + > |
448 | 469 | {#if !isNone} |
449 | 470 | <div class="selection-needle" style:top={`${(1 - alpha) * 100}%`} /> |
450 | 471 | {/if} |
|
484 | 505 | class="choice-preview" |
485 | 506 | classes={{ outlined, transparency }} |
486 | 507 | styles={{ "--outline-amount": outlineFactor }} |
487 | | - tooltipDescription={!newColor.equals(oldColor) ? "Comparison between the present color choice (left) and the color before any change was made (right)." : "The present color choice."} |
| 508 | + tooltipDescription={!newColor.equals(oldColor) ? "Comparison between the present color choice (left) and the color before it was changed (right)." : "The present color choice."} |
488 | 509 | > |
489 | 510 | {#if !newColor.equals(oldColor) && !disabled} |
490 | 511 | <div class="swap-button-background"></div> |
|
503 | 524 | </LayoutRow> |
504 | 525 | <!-- <DropdownInput entries={[[{ label: "sRGB" }]]} selectedIndex={0} disabled={true} tooltipDescription="Color model, color space, and HDR (coming soon)." /> --> |
505 | 526 | <LayoutRow> |
506 | | - <TextLabel tooltipDescription={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."}>Hex</TextLabel> |
| 527 | + <TextLabel |
| 528 | + tooltipLabel="Hex Color Code" |
| 529 | + tooltipDescription={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."}>Hex</TextLabel |
| 530 | + > |
507 | 531 | <Separator type="Related" /> |
508 | 532 | <LayoutRow> |
509 | 533 | <TextInput |
|
514 | 538 | setColorCode(detail); |
515 | 539 | }} |
516 | 540 | centered={true} |
| 541 | + tooltipLabel="Hex Color Code" |
517 | 542 | tooltipDescription={"Color code in hexadecimal format. 6 digits if opaque, 8 with alpha.\nAccepts input of CSS color values including named colors."} |
518 | 543 | bind:this={hexCodeInputWidget} |
519 | 544 | /> |
520 | 545 | </LayoutRow> |
521 | 546 | </LayoutRow> |
522 | 547 | <LayoutRow> |
523 | | - <TextLabel tooltipDescription="Red/Green/Blue channels of the color, integers 0–255.">RGB</TextLabel> |
| 548 | + <TextLabel tooltipLabel="Red/Green/Blue" tooltipDescription="Integers 0–255.">RGB</TextLabel> |
524 | 549 | <Separator type="Related" /> |
525 | 550 | <LayoutRow> |
526 | 551 | {#each rgbChannels as [channel, strength], index} |
|
540 | 565 | min={0} |
541 | 566 | max={255} |
542 | 567 | minWidth={1} |
543 | | - tooltipDescription={`${{ r: "Red", g: "Green", b: "Blue" }[channel]} channel, integers 0–255.`} |
| 568 | + tooltipLabel={{ r: "Red Channel", g: "Green Channel", b: "Blue Channel" }[channel]} |
| 569 | + tooltipDescription="Integers 0–255." |
544 | 570 | /> |
545 | 571 | {/each} |
546 | 572 | </LayoutRow> |
547 | 573 | </LayoutRow> |
548 | 574 | <LayoutRow> |
549 | 575 | <TextLabel |
550 | | - tooltipDescription={"Hue/Saturation/Value, also known as Hue/Saturation/Brightness (HSB).\nNot to be confused with Hue/Saturation/Lightness (HSL), a different color model."} |
| 576 | + tooltipLabel="Hue/Saturation/Value" |
| 577 | + tooltipDescription="Also known as Hue/Saturation/Brightness (HSB). Not to be confused with Hue/Saturation/Lightness (HSL), a different color model.">HSV</TextLabel |
551 | 578 | > |
552 | | - HSV |
553 | | - </TextLabel> |
554 | 579 | <Separator type="Related" /> |
555 | 580 | <LayoutRow> |
556 | 581 | {#each hsvChannels as [channel, strength], index} |
|
572 | 597 | unit={channel === "h" ? "°" : "%"} |
573 | 598 | minWidth={1} |
574 | 599 | displayDecimalPlaces={1} |
| 600 | + tooltipLabel={{ |
| 601 | + h: "Hue Component", |
| 602 | + s: "Saturation Component", |
| 603 | + v: "Value Component", |
| 604 | + }[channel]} |
575 | 605 | tooltipDescription={{ |
576 | | - h: `Hue component, the shade along the spectrum of the rainbow.`, |
577 | | - s: `Saturation component, the vividness from grayscale to full color.`, |
578 | | - v: "Value component, the brightness from black to full color.", |
| 606 | + h: "The shade along the spectrum of the rainbow.", |
| 607 | + s: "The vividness from grayscale to full color.", |
| 608 | + v: "The brightness from black to full color.", |
579 | 609 | }[channel]} |
580 | 610 | /> |
581 | 611 | {/each} |
582 | 612 | </LayoutRow> |
583 | 613 | </LayoutRow> |
584 | 614 | <LayoutRow> |
585 | | - <TextLabel tooltipDescription="Scale of translucency, from transparent (0%) to opaque (100%), for the color's alpha channel.">Alpha</TextLabel> |
| 615 | + <TextLabel tooltipLabel="Alpha" tooltipDescription="The level of translucency, from transparent (0%) to opaque (100%).">Alpha</TextLabel> |
586 | 616 | <Separator type="Related" /> |
587 | 617 | <NumberInput |
588 | 618 | value={!isNone ? alpha * 100 : undefined} |
|
601 | 631 | unit="%" |
602 | 632 | mode="Range" |
603 | 633 | displayDecimalPlaces={1} |
604 | | - tooltipDescription="Scale of translucency, from transparent (0%) to opaque (100%), for the color's alpha channel." |
| 634 | + tooltipLabel="Alpha" |
| 635 | + tooltipDescription="The level of translucency, from transparent (0%) to opaque (100%)." |
605 | 636 | /> |
606 | 637 | </LayoutRow> |
607 | 638 | <LayoutRow class="leftover-space" /> |
608 | 639 | <LayoutRow> |
609 | 640 | {#if allowNone && !gradient} |
610 | | - <button class="preset-color none" {disabled} on:click={() => setColorPreset("none")} data-tooltip-label="Set to No Color" tabindex="0"></button> |
| 641 | + <button |
| 642 | + class="preset-color none" |
| 643 | + {disabled} |
| 644 | + on:click={() => setColorPreset("none")} |
| 645 | + data-tooltip-label="Set to No Color" |
| 646 | + data-tooltip-description={disabled ? "Disabled (read-only)." : ""} |
| 647 | + tabindex="0" |
| 648 | + ></button> |
611 | 649 | <Separator type="Related" /> |
612 | 650 | {/if} |
613 | | - <button class="preset-color black" {disabled} on:click={() => setColorPreset("black")} data-tooltip-label="Set to Black" tabindex="0"></button> |
| 651 | + <button |
| 652 | + class="preset-color black" |
| 653 | + {disabled} |
| 654 | + on:click={() => setColorPreset("black")} |
| 655 | + data-tooltip-label="Set to Black" |
| 656 | + data-tooltip-description={disabled ? "Disabled (read-only)." : ""} |
| 657 | + tabindex="0" |
| 658 | + ></button> |
614 | 659 | <Separator type="Related" /> |
615 | | - <button class="preset-color white" {disabled} on:click={() => setColorPreset("white")} data-tooltip-label="Set to White" tabindex="0"></button> |
| 660 | + <button |
| 661 | + class="preset-color white" |
| 662 | + {disabled} |
| 663 | + on:click={() => setColorPreset("white")} |
| 664 | + data-tooltip-label="Set to White" |
| 665 | + data-tooltip-description={disabled ? "Disabled (read-only)." : ""} |
| 666 | + tabindex="0" |
| 667 | + ></button> |
616 | 668 | <Separator type="Related" /> |
617 | 669 | <button class="preset-color pure" {disabled} on:click={setColorPresetSubtile} tabindex="-1"> |
618 | | - <div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" data-tooltip-label="Set to Red" /> |
619 | | - <div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" data-tooltip-label="Set to Yellow" /> |
620 | | - <div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" data-tooltip-label="Set to Green" /> |
621 | | - <div data-pure-tile="cyan" style="--pure-color: #00ffff; --pure-color-gray: #b2b2b2" data-tooltip-label="Set to Cyan" /> |
622 | | - <div data-pure-tile="blue" style="--pure-color: #0000ff; --pure-color-gray: #1c1c1c" data-tooltip-label="Set to Blue" /> |
623 | | - <div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" data-tooltip-label="Set to Magenta" /> |
| 670 | + {#each PURE_COLORS_GRAYABLE as [name, color, gray]} |
| 671 | + <div |
| 672 | + data-pure-tile={name.toLowerCase()} |
| 673 | + style:--pure-color={color} |
| 674 | + style:--pure-color-gray={gray} |
| 675 | + data-tooltip-label="Set to Red" |
| 676 | + data-tooltip-description={disabled ? "Disabled (read-only)." : ""} |
| 677 | + /> |
| 678 | + {/each} |
624 | 679 | </button> |
625 | 680 | <Separator type="Related" /> |
626 | | - <IconButton icon="Eyedropper" size={24} {disabled} action={activateEyedropperSample} tooltipDescription="Sample a pixel color from the document." /> |
| 681 | + <IconButton icon="Eyedropper" size={24} {disabled} action={activateEyedropperSample} tooltipLabel="Eyedropper" tooltipDescription="Sample a pixel color from the document." /> |
627 | 682 | </LayoutRow> |
628 | 683 | </LayoutCol> |
629 | 684 | </LayoutRow> |
|
0 commit comments