From 0794bb1e24a6136e606a43c564f2123f29573a31 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 16 Oct 2024 13:50:43 +0530 Subject: [PATCH 1/2] add subtle variant for button --- .../theming/src/color/src/DarkModeTheme.ts | 27 +++++++++++++++++ .../theming/src/color/src/LightModeTheme.ts | 27 +++++++++++++++++ .../components/Button/src/styles.module.css | 30 +++++++++++++++++++ .../src/components/Button/src/types.ts | 1 + 4 files changed, 85 insertions(+) diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts index f4459cc1cddf..4013281f9794 100644 --- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts @@ -62,6 +62,9 @@ export class DarkModeTheme implements ColorModeTheme { bgNeutralSubtle: this.bgNeutralSubtle.to("sRGB").toString(), bgNeutralSubtleHover: this.bgNeutralSubtleHover.to("sRGB").toString(), bgNeutralSubtleActive: this.bgNeutralSubtleActive.to("sRGB").toString(), + bgNeutralSoft: this.bgNeutralSoft.to("sRGB").toString(), + bgNeutralSoftHover: this.bgNeutralSoftHover.to("sRGB").toString(), + bgNeutralSoftActive: this.bgNeutralSoftActive.to("sRGB").toString(), bgPositive: this.bgPositive.to("sRGB").toString(), bgPositiveHover: this.bgPositiveHover.to("sRGB").toString(), bgPositiveActive: this.bgPositiveActive.to("sRGB").toString(), @@ -434,6 +437,30 @@ export class DarkModeTheme implements ColorModeTheme { return color; } + private get bgNeutralSoft() { + const color = this.bgNeutralSubtle.clone(); + + color.oklch.l -= 0.03; + + return color; + } + + private get bgNeutralSoftHover() { + const color = this.bgNeutralSoft.clone(); + + color.oklch.l += 0.01; + + return color; + } + + private get bgNeutralSoftActive() { + const color = this.bgNeutralSoft.clone(); + + color.oklch.l -= 0.01; + + return color; + } + private get bgPositive() { // Positive background, green. const color = new Color("oklch", [0.62, 0.17, 145]); diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts index caef0659aa2f..d9573aef541e 100644 --- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts @@ -59,6 +59,9 @@ export class LightModeTheme implements ColorModeTheme { bgNeutralSubtle: this.bgNeutralSubtle.to("sRGB").toString(), bgNeutralSubtleHover: this.bgNeutralSubtleHover.to("sRGB").toString(), bgNeutralSubtleActive: this.bgNeutralSubtleActive.to("sRGB").toString(), + bgNeutralSoft: this.bgNeutralSoft.to("sRGB").toString(), + bgNeutralSoftHover: this.bgNeutralSoftHover.to("sRGB").toString(), + bgNeutralSoftActive: this.bgNeutralSoftActive.to("sRGB").toString(), bgPositive: this.bgPositive.to("sRGB").toString(), bgPositiveHover: this.bgPositiveHover.to("sRGB").toString(), bgPositiveActive: this.bgPositiveActive.to("sRGB").toString(), @@ -426,6 +429,30 @@ export class LightModeTheme implements ColorModeTheme { return color; } + private get bgNeutralSoft() { + const color = this.bgNeutralSubtle.clone(); + + color.oklch.l -= 0.03; + + return color; + } + + private get bgNeutralSoftHover() { + const color = this.bgNeutralSoft.clone(); + + color.oklch.l += 0.01; + + return color; + } + + private get bgNeutralSoftActive() { + const color = this.bgNeutralSoft.clone(); + + color.oklch.l -= 0.01; + + return color; + } + private get bgPositive() { // Positive background, green. const color = new Color("oklch", [0.62, 0.19, 145]); diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css index 6097f308f2d6..2fcae3bec8d4 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css @@ -54,6 +54,36 @@ background: var(--color-bg-$(color)-subtle-active); } } + + &[data-variant="subtle"][data-color="$(color)"] { + background-color: var(--color-bg-$(color)-subtle); + color: var(--color-fg-$(color)); + + &[data-hovered]:not([data-loading]) { + background-color: var(--color-bg-$(color)-subtle-hover); + } + + &[data-pressed]:not([data-loading]) { + background-color: var(--color-bg-$(color)-subtle-active); + } + } + } + + /* + This is a special case for the "neutral" color for "subtle" variant. The subtle color is lighter than required. + So we added the soft token for neutral color which is little more darker than the subtle color tokens. + */ + &[data-variant="subtle"][data-color="neutral"] { + background-color: var(--color-bg-neutral-soft); + color: var(--color-fg-neutral); + + &[data-hovered]:not([data-loading]) { + background-color: var(--color-bg-neutral-soft-hover); + } + + &[data-pressed]:not([data-loading]) { + background-color: var(--color-bg-neutral-soft-active); + } } /** diff --git a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts index 3db4f3ffc99f..1c4e9649ffe2 100644 --- a/app/client/packages/design-system/widgets/src/components/Button/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Button/src/types.ts @@ -6,6 +6,7 @@ import type { COLORS, SIZES } from "../../../shared"; export const BUTTON_VARIANTS = { filled: "Filled", outlined: "Outlined", + subtle: "Subtle", ghost: "Ghost", } as const; From e1fc66eb329aa58c08ae6147cc6a5bb1d8107a17 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 16 Oct 2024 14:01:57 +0530 Subject: [PATCH 2/2] update the type of text component --- .../design-system/widgets/src/components/Text/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/packages/design-system/widgets/src/components/Text/src/types.ts b/app/client/packages/design-system/widgets/src/components/Text/src/types.ts index a1727bd0f647..c2aa405326ca 100644 --- a/app/client/packages/design-system/widgets/src/components/Text/src/types.ts +++ b/app/client/packages/design-system/widgets/src/components/Text/src/types.ts @@ -5,7 +5,7 @@ import type { import type { ReactNode } from "react"; import type { COLORS } from "../../../shared"; -export interface TextProps extends React.HTMLAttributes { +export interface TextProps { /** size variant of the text * @default body */