From f1d2f7e35853a0b644e7cc563faa1282c8523c38 Mon Sep 17 00:00:00 2001 From: ChristianBusshoff Date: Mon, 25 Nov 2024 15:59:31 +0100 Subject: [PATCH] fix: type & refactoring --- .../.vitepress/components/ColorPalette.vue | 235 ++++++++---------- 1 file changed, 108 insertions(+), 127 deletions(-) diff --git a/apps/docs/src/.vitepress/components/ColorPalette.vue b/apps/docs/src/.vitepress/components/ColorPalette.vue index e9c1b0af9d..3b6351ce68 100644 --- a/apps/docs/src/.vitepress/components/ColorPalette.vue +++ b/apps/docs/src/.vitepress/components/ColorPalette.vue @@ -9,8 +9,7 @@ const props = defineProps<{ name: OnyxColor; }>(); -const AVAILABLE_TABS = ["Base", "Text & Icons", "States"]; - +const AVAILABLE_TABS = ["Base", "Text & Icons", "States"] as const; type AvailableTab = (typeof AVAILABLE_TABS)[number]; const currentTab = ref(AVAILABLE_TABS[0]); @@ -26,129 +25,108 @@ const whiteTextColor = "var(--onyx-color-base-grayscale-white)"; /** * Available color steps to display for the currently active tab (e.g. 100-900 for base colors). */ -const colorSteps = computed(() => { - if (currentTab.value === "Base") { - return Array.from({ length: 9 }, (_, index) => { - const step = (index + 1) * 100; - return { - description: step, - name: baseStepNames[step], - color: `var(--onyx-color-base-${props.name}-${step})`, - textColor: step < 500 ? `var(--onyx-color-text-icons-${props.name}-bold)` : whiteTextColor, - }; - }); - } else if (currentTab.value === "Text & Icons") { - const textColor = - props.name === "neutral" ? whiteTextColor : `var(--onyx-color-text-icons-${props.name}-bold)`; - return [ - { - description: "soft", - color: `var(--onyx-color-text-icons-${props.name}-soft)`, - textColor, - }, - { - description: "medium", - color: `var(--onyx-color-text-icons-${props.name}-medium)`, - textColor, - }, - { - description: "intense", - color: `var(--onyx-color-text-icons-${props.name}-intense)`, - textColor: whiteTextColor, - }, - props.name === "neutral" - ? { - description: "inverted", - color: `var(--onyx-color-text-icons-inverted)`, - textColor: `var(--onyx-color-text-icons-intense)`, - showBorder: true, - } - : { - description: "bold", - color: `var(--onyx-color-text-icons-${props.name}-bold)`, - textColor: whiteTextColor, - }, - ]; - } else { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const mappings: any = { - cta: { - primary: "default", - danger: "invalid", - neutral: "disabled", - }, - border: { - danger: "invalid", - default: props.name, - }, - borderHover: { - danger: "invalid-hover", - neutral: "disabled", - default: `${props.name}-hover`, - }, - focus: { - danger: "invalid", - default: props.name, - }, +function getBaseColorSteps(name: OnyxColor): ColorPaletteValueProps[] { + return Array.from({ length: 9 }, (_, index) => { + const step = (index + 1) * 100; + return { + description: step, + name: baseStepNames[step], + color: `var(--onyx-color-base-${name}-${step})`, + textColor: step < 500 ? `var(--onyx-color-text-icons-${name}-bold)` : whiteTextColor, }; - const cta = mappings.cta[props.name] || null; - const border = mappings.border[props.name] || props.name; - const borderHover = mappings.borderHover[props.name] || mappings.borderHover.default; - const focus = mappings.focus[props.name] || mappings.focus.default; - const textColor = - props.name === "neutral" ? `var(--onyx-color-text-icons-${props.name}-bold)` : whiteTextColor; - - return [ - //cta - props.name === "primary" || props.name === "danger" || props.name === "neutral" - ? { - description: props.name === "neutral" ? "cta-disabled" : "cta", - color: `var(--onyx-color-component-cta-${cta})`, - textColor, - } - : null, - //cta-hover - props.name === "primary" || props.name === "danger" - ? { - description: "cta-hover", - color: `var(--onyx-color-component-cta-${cta}-hover)`, - textColor, - } - : null, - props.name === "primary" || - props.name === "danger" || - props.name === "neutral" || - props.name === "success" - ? // border - { - description: props.name === "neutral" ? "border-neutral" : "border", - color: `var(--onyx-color-component-border-${border})`, - textColor, - } - : null, - // border-hover - props.name === "primary" || - props.name === "danger" || - props.name === "neutral" || - props.name === "success" - ? { - description: props.name === "neutral" ? "border-disabled" : "border-hover", - color: `var(--onyx-color-component-border-${borderHover})`, - textColor, - } - : null, - //focus - props.name === "primary" || - props.name === "danger" || - props.name === "neutral" || - props.name === "success" - ? { - description: props.name === "neutral" ? "focus-neutral" : "focus", - color: `var(--onyx-color-component-focus-${focus})`, - textColor: `var(--onyx-color-text-icons-${props.name}-bold)`, - } - : null, - ].filter((item) => item !== null); + }); +} + +function getTextAndIconColorSteps(name: OnyxColor): ColorPaletteValueProps[] { + const textColor = + name === "neutral" ? whiteTextColor : `var(--onyx-color-text-icons-${name}-bold)`; + + return [ + { description: "soft", color: `var(--onyx-color-text-icons-${name}-soft)`, textColor }, + { description: "medium", color: `var(--onyx-color-text-icons-${name}-medium)`, textColor }, + { + description: "intense", + color: `var(--onyx-color-text-icons-${name}-intense)`, + textColor: whiteTextColor, + }, + name === "neutral" + ? { + description: "inverted", + color: `var(--onyx-color-text-icons-inverted)`, + textColor: `var(--onyx-color-text-icons-intense)`, + showBorder: true, + } + : { + description: "bold", + color: `var(--onyx-color-text-icons-${name}-bold)`, + textColor: whiteTextColor, + }, + ]; +} + +function getStateColorSteps(name: OnyxColor): ColorPaletteValueProps[] { + type ExtendedOnyxColor = OnyxColor | "default"; + + const mappings: { + cta: Partial>; + border: Partial>; + borderHover: Partial>; + focus: Partial>; + } = { + cta: { primary: "default", danger: "invalid", neutral: "disabled" }, + border: { danger: "invalid", default: name }, + borderHover: { danger: "invalid-hover", neutral: "disabled", default: `${name}-hover` }, + focus: { danger: "invalid", default: name }, + }; + + const cta = mappings.cta[name] || null; + const border = mappings.border[name] || name; + const borderHover = mappings.borderHover[name] || mappings.borderHover.default; + const focus = mappings.focus[name] || mappings.focus.default; + const textColor = + name === "neutral" ? `var(--onyx-color-text-icons-${name}-bold)` : whiteTextColor; + + return [ + name === "primary" || name === "danger" || name === "neutral" + ? { + description: name === "neutral" ? "cta-disabled" : "cta", + color: `var(--onyx-color-component-cta-${cta})`, + textColor, + } + : null, + name === "primary" || name === "danger" + ? { + description: "cta-hover", + color: `var(--onyx-color-component-cta-${cta}-hover)`, + textColor, + } + : null, + { + description: name === "neutral" ? "border-neutral" : "border", + color: `var(--onyx-color-component-border-${border})`, + textColor, + }, + { + description: name === "neutral" ? "border-disabled" : "border-hover", + color: `var(--onyx-color-component-border-${borderHover})`, + textColor, + }, + { + description: name === "neutral" ? "focus-neutral" : "focus", + color: `var(--onyx-color-component-focus-${focus})`, + textColor: `var(--onyx-color-text-icons-${name}-bold)`, + }, + ].filter(Boolean) as ColorPaletteValueProps[]; +} + +const colorSteps = computed(() => { + switch (currentTab.value) { + case "Base": + return getBaseColorSteps(props.name); + case "Text & Icons": + return getTextAndIconColorSteps(props.name); + default: + return getStateColorSteps(props.name); } }); @@ -159,18 +137,21 @@ let copyTimeout: ReturnType | undefined; * Copies the given color to the clipboard and sets the `copiedColor` to its value for 3 seconds. */ const handleCopy = async (color: string) => { + const cssVariable = color.match(/var\(--(.*)\)/)?.[1] ?? color; await navigator.clipboard.writeText(color); - copiedColor.value = color.replace(/var\(--(.*)\)/, "$1"); + + copiedColor.value = cssVariable; // if multiple colors are copied quickly after each other, we need to // clear the previous timeout so we prevent race-conditions clearTimeout(copyTimeout); - copyTimeout = setTimeout(() => (copiedColor.value = ""), 3000); + copyTimeout = setTimeout(() => { + copiedColor.value = ""; + }, 3000); };