Skip to content
Snippets Groups Projects
Unverified Commit d477b559 authored by Oisin Coveney's avatar Oisin Coveney Committed by GitHub
Browse files

Convert Embedding icon hook to CSS and use semantic colors (#49478)

parent 6452cd3c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 65 additions and 52 deletions
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css 0 → 100644
+ 11
− 0
View file @ d477b559
.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
);
}
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx
+ 15
− 9
View file @ d477b559
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>
......
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx
+ 16
− 10
View file @ d477b559
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>
......
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx
+ 16
− 13
View file @ d477b559
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>
);
......
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts
+ 4
− 0
View file @ d477b559
export type EmbeddingOptionCardProps = {
onToggle: (value: boolean) => void;
};
export type EmbeddingOptionIconProps = {
disabled?: boolean;
};
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx deleted 100644 → 0
+ 0
− 20
View file @ 6452cd3c
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)",
};
};
frontend/src/metabase/css/core/colors.module.css
+ 3
− 0
View file @ d477b559
......@@ -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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment