Skip to content

Commit c41aae2

Browse files
haschekhaschek
committed
add first demo for color hashes to color config tool
1 parent 3cc6e93 commit c41aae2

1 file changed

Lines changed: 155 additions & 2 deletions

File tree

‎src/components/Application/stories/ColorPalettes.stories.tsx‎

Lines changed: 155 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { render } from "react-dom";
3+
import { loremIpsum } from "react-lorem-ipsum";
34
import { Meta, StoryFn } from "@storybook/react";
45
import Color from "color";
56

@@ -9,6 +10,8 @@ import {
910
Badge,
1011
Button,
1112
CLASSPREFIX as eccgui,
13+
COLORMINCONTRAST,
14+
COLORMINDISTANCE,
1215
ContextMenu,
1316
FieldItem,
1417
FieldItemRow,
@@ -23,6 +26,7 @@ import {
2326
Tabs,
2427
TabTitle,
2528
Tag,
29+
TagList,
2630
TextField,
2731
TitleSubsection,
2832
utils,
@@ -41,8 +45,8 @@ interface ColorPaletteConfiguratorProps {
4145

4246
const ColorPaletteConfigurator = ({
4347
customColorProperties,
44-
distanceMin = 10, // @see https://wisotop.de/farbabstand-farben-vergleichen.php
45-
contrastMin = 4,
48+
distanceMin = COLORMINDISTANCE, // @see https://wisotop.de/farbabstand-farben-vergleichen.php
49+
contrastMin = COLORMINCONTRAST,
4650
enableCalculations = false,
4751
}: ColorPaletteConfiguratorProps) => {
4852
const palettePrefix = `--${eccgui}-color-palette-`;
@@ -617,6 +621,155 @@ const ColorPaletteConfigurator = ({
617621
),
618622
title: "SCSS configuration",
619623
},
624+
{
625+
id: "hashtest",
626+
title: "Color hashes",
627+
// TODO: currently the default palette from :root is used, not the colors from the editor tab
628+
panel: (
629+
<div>
630+
<Section>
631+
<SectionHeader>
632+
<TitleSubsection>Allow text as color hash</TitleSubsection>
633+
</SectionHeader>
634+
<Spacing size="small" />
635+
<TagList>
636+
<Badge
637+
tagProps={{
638+
large: true,
639+
backgroundColor: utils.textToColorHash({
640+
text: "magenta",
641+
options: {
642+
enabledColors: { includeLayoutColors: true },
643+
returnValidColorsDirectly: true,
644+
},
645+
}) as string,
646+
}}
647+
>
648+
magenta
649+
</Badge>
650+
<Badge
651+
tagProps={{
652+
large: true,
653+
backgroundColor: utils.textToColorHash({
654+
text: "teal",
655+
options: {
656+
enabledColors: { includeLayoutColors: true },
657+
returnValidColorsDirectly: true,
658+
},
659+
}) as string,
660+
}}
661+
>
662+
teal
663+
</Badge>
664+
<Badge
665+
tagProps={{
666+
large: true,
667+
backgroundColor: utils.textToColorHash({
668+
text: "rgb(128,0,128)",
669+
options: {
670+
enabledColors: { includeLayoutColors: true },
671+
returnValidColorsDirectly: true,
672+
},
673+
}) as string,
674+
}}
675+
>
676+
rgb(128,0,128)
677+
</Badge>
678+
<Badge
679+
tagProps={{
680+
large: true,
681+
backgroundColor: utils.textToColorHash({
682+
text: "#00ffff",
683+
options: {
684+
enabledColors: { includeLayoutColors: true },
685+
returnValidColorsDirectly: true,
686+
},
687+
}) as string,
688+
}}
689+
>
690+
#00ffff
691+
</Badge>
692+
<Badge
693+
tagProps={{
694+
large: true,
695+
backgroundColor: utils.textToColorHash({
696+
text: "no valid color string",
697+
options: {
698+
enabledColors: { includeLayoutColors: true },
699+
returnValidColorsDirectly: true,
700+
},
701+
}) as string,
702+
}}
703+
>
704+
no valid color string
705+
</Badge>
706+
</TagList>
707+
</Section>
708+
<Spacing />
709+
<Section>
710+
<SectionHeader>
711+
<TitleSubsection>Directly used color hash</TitleSubsection>
712+
</SectionHeader>
713+
<Spacing size="small" />
714+
<TagList>
715+
{loremIpsum({
716+
p: 1,
717+
avgSentencesPerParagraph: 1,
718+
avgWordsPerSentence: 40,
719+
random: false,
720+
})
721+
.toString()
722+
.split(" ")
723+
.map((text) => (
724+
<Badge
725+
tagProps={{
726+
large: true,
727+
backgroundColor: utils.textToColorHash({
728+
text,
729+
options: {
730+
enabledColors: "all",
731+
returnValidColorsDirectly: false,
732+
},
733+
}) as string,
734+
}}
735+
>
736+
{text}
737+
</Badge>
738+
))}
739+
</TagList>
740+
</Section>
741+
<Spacing />
742+
<Section>
743+
<SectionHeader>
744+
<TitleSubsection>
745+
Nearest layout palette neighbour of color hash
746+
</TitleSubsection>
747+
</SectionHeader>
748+
<Spacing size="small" />
749+
<TagList>
750+
{loremIpsum({
751+
p: 1,
752+
avgSentencesPerParagraph: 1,
753+
avgWordsPerSentence: 40,
754+
random: false,
755+
})
756+
.toString()
757+
.split(" ")
758+
.map((text) => (
759+
<Badge
760+
tagProps={{
761+
large: true,
762+
backgroundColor: utils.textToColorHash({ text }) as string,
763+
}}
764+
>
765+
{text}
766+
</Badge>
767+
))}
768+
</TagList>
769+
</Section>
770+
</div>
771+
),
772+
},
620773
]}
621774
/>
622775
</div>

0 commit comments

Comments
 (0)