diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css new file mode 100644 index 0000000000000000000000000000000000000000..3c2967d48de4d5f16654710a49cd2b3839566b99 --- /dev/null +++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css @@ -0,0 +1,11 @@ +.EmbeddingOptionIcon { + --mb-color-embedding-option-primary: var(--mb-color-icon-primary); + --mb-color-embedding-option-secondary: var(--mb-color-icon-secondary); +} + +.EmbeddingOptionIcon.Disabled { + --mb-color-embedding-option-primary: var(--mb-color-icon-primary-disabled); + --mb-color-embedding-option-secondary: var( + --mb-color-icon-secondary-disabled + ); +} diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx index 5996630f86bba7a0e5671867e3d959a4c479254e..47ade5950b3c32cf9f9d028e1712e2da169580e2 100644 --- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx +++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx @@ -1,13 +1,19 @@ -import { - type UseEmbeddingSettingsIconColorsProps, - useEmbeddingSettingsIconColors, -} from "../use-embedding-settings-icon-colors"; +import cx from "classnames"; -export const SdkIcon = ({ disabled }: UseEmbeddingSettingsIconColorsProps) => { - const { primary, secondary } = useEmbeddingSettingsIconColors({ disabled }); +import EmbeddingOptionS from "../EmbeddingOption.module.css"; +import type { EmbeddingOptionIconProps } from "../types"; +export const SdkIcon = ({ disabled }: EmbeddingOptionIconProps) => { return ( - <svg width="40" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"> + <svg + width="40" + height="32" + fill="none" + xmlns="http://www.w3.org/2000/svg" + className={cx(EmbeddingOptionS.EmbeddingOptionIcon, { + [EmbeddingOptionS.Disabled]: disabled, + })} + > <g clipPath="url(#a)"> <rect x="1.25" @@ -15,12 +21,12 @@ export const SdkIcon = ({ disabled }: UseEmbeddingSettingsIconColorsProps) => { width="37.5" height="29.5" rx="2.75" - stroke={secondary} + stroke="var(--mb-color-embedding-option-secondary)" strokeWidth="2.5" /> <path d="M20 14.11c1.03 0 1.87.84 1.87 1.89 0 1-.84 1.85-1.87 1.85-1.03 0-1.87-.85-1.87-1.85 0-1.05.84-1.89 1.87-1.89ZM15.37 24c.63.38 2.01-.2 3.6-1.7-.52-.59-1.03-1.23-1.51-1.9a22.965 22.965 0 0 1-2.4-.36c-.51 2.14-.32 3.61.31 3.96Zm.71-5.74-.29-.51c-.11.29-.22.58-.29.86.27.06.57.11.88.16l-.3-.51Zm6.54-.76.81-1.5-.81-1.5c-.3-.53-.62-1-.91-1.47C21.17 13 20.6 13 20 13c-.6 0-1.17 0-1.71.03-.29.47-.61.94-.91 1.47l-.81 1.5.81 1.5c.3.53.62 1 .91 1.47.54.03 1.11.03 1.71.03.6 0 1.17 0 1.71-.03.29-.47.61-.94.91-1.47ZM20 10.78c-.19.22-.39.45-.59.72h1.18c-.2-.27-.4-.5-.59-.72Zm0 10.44c.19-.22.39-.45.59-.72h-1.18c.2.27.4.5.59.72ZM24.62 8c-.62-.38-2 .2-3.59 1.7.52.59 1.03 1.23 1.51 1.9.82.08 1.63.2 2.4.36.51-2.14.32-3.61-.32-3.96Zm-.7 5.74.29.51c.11-.29.22-.58.29-.86-.27-.06-.57-.11-.88-.16l.3.51Zm1.45-7.05c1.47.84 1.63 3.05 1.01 5.63 2.54.75 4.37 1.99 4.37 3.68 0 1.69-1.83 2.93-4.37 3.68.62 2.58.46 4.79-1.01 5.63-1.46.84-3.45-.12-5.37-1.95-1.92 1.83-3.91 2.79-5.38 1.95-1.46-.84-1.62-3.05-1-5.63-2.54-.75-4.37-1.99-4.37-3.68 0-1.69 1.83-2.93 4.37-3.68-.62-2.58-.46-4.79 1-5.63 1.47-.84 3.46.12 5.38 1.95 1.92-1.83 3.91-2.79 5.37-1.95ZM25.08 16c.34.75.64 1.5.89 2.26 2.1-.63 3.28-1.53 3.28-2.26 0-.73-1.18-1.63-3.28-2.26-.25.76-.55 1.51-.89 2.26Zm-10.16 0c-.34-.75-.64-1.5-.89-2.26-2.1.63-3.28 1.53-3.28 2.26 0 .73 1.18 1.63 3.28 2.26.25-.76.55-1.51.89-2.26Zm9 2.26-.3.51c.31-.05.61-.1.88-.16-.07-.28-.18-.57-.29-.86l-.29.51Zm-2.89 4.04c1.59 1.5 2.97 2.08 3.59 1.7.64-.35.83-1.82.32-3.96-.77.16-1.58.28-2.4.36-.48.67-.99 1.31-1.51 1.9Zm-4.95-8.56.3-.51c-.31.05-.61.1-.88.16.07.28.18.57.29.86l.29-.51Zm2.89-4.04C17.38 8.2 16 7.62 15.37 8c-.63.35-.82 1.82-.31 3.96a23.018 23.018 0 0 1 2.4-.36c.48-.67.99-1.31 1.51-1.9Z" - fill={primary} + fill="var(--mb-color-embedding-option-primary)" /> </g> </svg> diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx index e323cead5435b919a5da6f990977e02b0739b16d..1ee8bde38d8b7b7c548e0c3d8d8c442598c9e485 100644 --- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx +++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx @@ -1,15 +1,21 @@ -import { - type UseEmbeddingSettingsIconColorsProps, - useEmbeddingSettingsIconColors, -} from "../use-embedding-settings-icon-colors"; +import cx from "classnames"; + +import EmbeddingOptionS from "../EmbeddingOption.module.css"; +import type { EmbeddingOptionIconProps } from "../types"; export const InteractiveEmbeddingIcon = ({ disabled, -}: UseEmbeddingSettingsIconColorsProps) => { - const { primary, secondary } = useEmbeddingSettingsIconColors({ disabled }); - +}: EmbeddingOptionIconProps) => { return ( - <svg width="40" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"> + <svg + width="40" + height="32" + fill="none" + xmlns="http://www.w3.org/2000/svg" + className={cx(EmbeddingOptionS.EmbeddingOptionIcon, { + [EmbeddingOptionS.Disabled]: disabled, + })} + > <g clipPath="url(#clip0_1030_4461)"> <rect x="1.25" @@ -17,14 +23,14 @@ export const InteractiveEmbeddingIcon = ({ width="37.5" height="29.5" rx="2.75" - stroke={secondary} + stroke="var(--mb-color-embedding-option-secondary)" strokeWidth="2.5" /> <path fillRule="evenodd" clipRule="evenodd" d="M18.527 17.473 13 16l5.527-1.473L20 9l1.473 5.527L27 16l-5.527 1.473L20 23l-1.473-5.527ZM29.369 8.631 27 8l2.369-.631L30 5l.631 2.369L33 8l-2.369.631L30 11l-.631-2.369ZM29.974 24.026 28 23.5l1.974-.526L30.5 21l.526 1.974L33 23.5l-1.974.526L30.5 26l-.526-1.974ZM8.974 11.026 7 10.5l1.974-.526L9.5 8l.526 1.974L12 10.5l-1.974.526L9.5 13l-.526-1.974Z" - fill={primary} + fill="var(--mb-color-embedding-option-primary)" /> </g> <defs> diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx index dd46cb552929047fe0dd5f173ce7be1ed311d65e..01fae49e9e140e9ab6a307f5d2f1439c7254bbdf 100644 --- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx +++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx @@ -1,31 +1,34 @@ -import { - type UseEmbeddingSettingsIconColorsProps, - useEmbeddingSettingsIconColors, -} from "../use-embedding-settings-icon-colors"; - -export const StaticEmbeddingIcon = ({ - disabled, -}: UseEmbeddingSettingsIconColorsProps) => { - const { primary, secondary } = useEmbeddingSettingsIconColors({ disabled }); +import cx from "classnames"; +import EmbeddingOptionS from "../EmbeddingOption.module.css"; +import type { EmbeddingOptionIconProps } from "../types"; +export const StaticEmbeddingIcon = ({ disabled }: EmbeddingOptionIconProps) => { return ( - <svg width="42" height="34" fill="white" xmlns="http://www.w3.org/2000/svg"> + <svg + width="42" + height="34" + fill="white" + xmlns="http://www.w3.org/2000/svg" + className={cx(EmbeddingOptionS.EmbeddingOptionIcon, { + [EmbeddingOptionS.Disabled]: disabled, + })} + > <rect x="1.25" y="1.25" width="37.5" height="29.5" rx="2.75" - stroke={secondary} + stroke="var(--mb-color-embedding-option-secondary)" strokeWidth="2.5" /> <path d="M14 12a2 2 0 0 1 2-2h17a2 2 0 0 1 2 2v5H14v-5ZM14 19h9v9h-7a2 2 0 0 1-2-2v-7ZM25 19h10v7a2 2 0 0 1-2 2h-8v-9Z" - fill={primary} + fill="var(--mb-color-embedding-option-primary)" /> <path d="M5 10h6v18H7a2 2 0 0 1-2-2V10ZM5 6a2 2 0 0 1 2-2h26a2 2 0 0 1 2 2v2H5V6Z" - fill={secondary} + fill="var(--mb-color-embedding-option-secondary)" /> </svg> ); diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts index ceab04543ff69ec12b80a99faf5ed3f08a6b8d40..339bdf48fa7984a402c76354871295aa25815b72 100644 --- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts +++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts @@ -1,3 +1,7 @@ export type EmbeddingOptionCardProps = { onToggle: (value: boolean) => void; }; + +export type EmbeddingOptionIconProps = { + disabled?: boolean; +}; diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx deleted file mode 100644 index e685bc3dacec2850a13ab26655170db356da833c..0000000000000000000000000000000000000000 --- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx +++ /dev/null @@ -1,20 +0,0 @@ -export type UseEmbeddingSettingsIconColorsProps = { - disabled: boolean; -}; - -/* eslint-disable no-restricted-syntax -- we should find a way to use semantic colors here */ -export const useEmbeddingSettingsIconColors = ({ - disabled, -}: UseEmbeddingSettingsIconColorsProps) => { - if (disabled) { - return { - primary: "var(--mb-base-color-gray-30)", - secondary: "var(--mb-base-color-gray-10)", - }; - } - - return { - primary: "var(--mb-base-color-brand-40)", - secondary: "var(--mb-base-color-brand-20)", - }; -}; diff --git a/frontend/src/metabase/css/core/colors.module.css b/frontend/src/metabase/css/core/colors.module.css index 14c9f6b2b4d52377a5fa45b1d6f18dedcaff0f5a..9b7b68724176ff6add10061d43e36fbc92090479 100644 --- a/frontend/src/metabase/css/core/colors.module.css +++ b/frontend/src/metabase/css/core/colors.module.css @@ -89,6 +89,9 @@ --mb-color-background-inverse: var(--mb-color-bg-black); --mb-color-background-brand: var(--mb-base-color-brand-40); --mb-color-icon-primary: var(--mb-base-color-brand-40); + --mb-color-icon-primary-disabled: var(--mb-base-color-gray-30); + --mb-color-icon-secondary: var(--mb-base-color-brand-20); + --mb-color-icon-secondary-disabled: var(--mb-base-color-gray-10); /** * Base colors