Skip to content
Snippets Groups Projects
Unverified Commit 03eb27cc authored by github-automation-metabase's avatar github-automation-metabase Committed by GitHub
Browse files

:robot: backported "Convert Embedding icon hook to CSS and use semantic colors" (#49580) 


Co-authored-by: default avatarOisin Coveney <oisin@metabase.com>
parent d378dc3a
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 51 deletions
frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css 0 → 100644
+ 11
− 0
View file @ 03eb27cc
.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 @ 03eb27cc
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 @ 03eb27cc
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 @ 03eb27cc
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 @ 03eb27cc
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
− 19
View file @ d378dc3a
export type UseEmbeddingSettingsIconColorsProps = {
disabled: boolean;
};
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 @ 03eb27cc
......@@ -74,6 +74,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