diff --git a/playground/entries/Badge.tsx b/playground/entries/Badge.tsx index 11360ea203..d4d3ce15ad 100644 --- a/playground/entries/Badge.tsx +++ b/playground/entries/Badge.tsx @@ -21,9 +21,14 @@ const entry: PlaygroundEntry = { displayName: 'Type', value: 'new', }, - inverted: { + light: { type: 'boolean', - displayName: 'Inverted', + displayName: 'Light', + value: false, + }, + invert: { + type: 'boolean', + displayName: 'Invert', value: false, }, }, diff --git a/semcore/badge/src/Badge.tsx b/semcore/badge/src/Badge.tsx index 7a45f33fba..999cdc008d 100644 --- a/semcore/badge/src/Badge.tsx +++ b/semcore/badge/src/Badge.tsx @@ -48,42 +48,68 @@ class RootBadge extends Component< } private resolveTextColor(): string | undefined { - const { type, inverted, resolveColor } = this.asProps; + // todo Brauer Ilia - removed default 'soon' type in 19th major + const { type = 'soon', resolveColor, light, invert, inverted } = this.asProps; - if (type === 'unavailable' && !inverted) { - return resolveColor('--intergalactic-text-secondary'); - } // TODO: --intergalactic-badge-text-secondary + if (light) { + switch (type) { + case 'admin': { + return resolveColor('--intergalactic-badge-light-admin-text'); + } + case 'alpha': { + return resolveColor('--intergalactic-badge-light-alpha-text'); + } + case 'beta': { + return resolveColor('--intergalactic-badge-light-beta-text'); + } + case 'new': { + return resolveColor('--intergalactic-badge-light-new-text'); + } + case 'soon': + case 'unavailable': { + return resolveColor('--intergalactic-badge-light-soon-text'); + } + default: { + const t: never = type; + throw new Error(`Type can't be "${t}"`); + } + } + } + + if (type === 'unavailable' && !(invert ?? inverted)) { + return resolveColor('--intergalactic-badge-light-soon-text'); + } return undefined; } private resolveBg(): string { - // todo Brauer Ilia - removed default 'soon' type in 18th major - const { type = 'soon', inverted, resolveColor } = this.asProps; + // todo Brauer Ilia - removed default 'soon' type in 19th major + const { type = 'soon', inverted, invert, resolveColor, light } = this.asProps; - if (inverted) { - return resolveColor('--gray-white'); - } // TODO: --intergalactic-badge-bg-invert + if (inverted ?? invert) { + return resolveColor('--intergalactic-badge-bg-invert'); + } switch (type) { case 'admin': { - return resolveColor('--blue-400'); - } // TODO: --intergalactic-badge-accent-admin + return !light ? resolveColor('--intergalactic-badge-accent-admin') : resolveColor('--intergalactic-badge-light-admin'); + } case 'alpha': { - return resolveColor('--red-400'); - } // TODO: --intergalactic-badge-accent-alpha + return !light ? resolveColor('--intergalactic-badge-accent-alpha') : resolveColor('--intergalactic-badge-light-alpha'); + } case 'beta': { - return resolveColor('--yellow-300'); - } // TODO: --intergalactic-badge-accent-beta + return !light ? resolveColor('--intergalactic-badge-accent-beta') : resolveColor('--intergalactic-badge-light-beta'); + } case 'new': { - return resolveColor('--green-300'); - } // TODO: --intergalactic-badge-accent-new + return !light ? resolveColor('--intergalactic-badge-accent-new') : resolveColor('--intergalactic-badge-light-new'); + } case 'soon': { - return resolveColor('--gray-400'); - } // TODO: --intergalactic-badge-accent-soon + return !light ? resolveColor('--intergalactic-badge-accent-soon') : resolveColor('--intergalactic-badge-light-soon'); + } case 'unavailable': { - return resolveColor('--gray-50'); - } // TODO: --intergalactic-badge-bg-unavailable + return resolveColor('--intergalactic-badge-bg-unavailable'); + } default: { const t: never = type; throw new Error(`Type can't be "${t}"`); diff --git a/semcore/badge/src/Badge.type.ts b/semcore/badge/src/Badge.type.ts index d327ba5e0c..c6a3b1f66b 100644 --- a/semcore/badge/src/Badge.type.ts +++ b/semcore/badge/src/Badge.type.ts @@ -17,10 +17,6 @@ declare namespace NSBadge { * Type of badge. */ type?: NSBadge.Type; - /** - * Flag to render inverted badge. - */ - inverted?: boolean; /** * @deprecated. Use just type with predefined texts. You should not use badge with custom text inside. @@ -38,7 +34,28 @@ declare namespace NSBadge { * @default white * */ color?: 'white' | 'gray20' | string; - }; + } & ({ + /** + * Flag to render inverted badge. + */ + invert?: true; + /** + * Flag to render inverted badge. + * @deprecated use invert instead. + */ + inverted?: true; + light?: never | false; + } | { + /** + * Flag to render light badge. + */ + light?: true; + /** + * @deprecated use invert instead. + */ + inverted?: never | false; + invert?: never | false; + }); type Component = Intergalactic.Component<'span', Props>; } diff --git a/semcore/badge/src/style/badge.shadow.css b/semcore/badge/src/style/badge.shadow.css index cb6ea80fa9..0c936d07c5 100644 --- a/semcore/badge/src/style/badge.shadow.css +++ b/semcore/badge/src/style/badge.shadow.css @@ -1,27 +1,24 @@ SBadge { display: inline-block; box-sizing: border-box; - height: var(--intergalactic-fs-200, 14px); - line-height: var(--intergalactic-fs-200, 14px); + height: 16px; + align-content: center; padding: 0 var(--intergalactic-spacing-1x, 4px); border-radius: var(--intergalactic-badge-rounded, 4px); white-space: nowrap; - font-size: var(--intergalactic-fs-50, 10px); + font-size: var(--intergalactic-fs-100, 12px); + line-height: 8px; font-weight: var(--intergalactic-medium, 500); letter-spacing: 0.3px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-badge-text-primary-invert */ + color: var(--intergalactic-badge-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); } SBadge[bg] { background-color: var(--bg); } -SBadge[inverted] { - color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); -} /* TODO: --intergalactic-badge-text-primary-invert */ - SBadge[color] { color: var(--color); } diff --git a/stories/components/badge/docs/examples/badge_main_types.tsx b/stories/components/badge/docs/examples/badge_main_types.tsx index 1a5bcb6f45..98443c0dab 100644 --- a/stories/components/badge/docs/examples/badge_main_types.tsx +++ b/stories/components/badge/docs/examples/badge_main_types.tsx @@ -4,8 +4,8 @@ import React from 'react'; const Demo = () => { return ( - - + + @@ -20,14 +20,22 @@ const Demo = () => { borderRadius='surface-rounded' > - - - - - - + + + + + + + + + + + + + + ); }; diff --git a/stories/components/badge/tests/badge.stories.tsx b/stories/components/badge/tests/badge.stories.tsx index fc29e21c6f..ceac9c3080 100644 --- a/stories/components/badge/tests/badge.stories.tsx +++ b/stories/components/badge/tests/badge.stories.tsx @@ -16,7 +16,7 @@ export const BadgeBg: StoryObj = { render: BadgeBgExample, argTypes: { type: { control: 'select', options: ['admin', 'alpha', 'beta', 'new', 'soon', 'unavailable'] }, - inverted: { control: 'boolean' }, + invert: { control: 'boolean' }, bg: { control: { type: 'select' }, options: ['mist', 'cyan', 'red', 'orange', 'green', 'white', 'violet-400'], @@ -37,7 +37,6 @@ export const BadgeBg: StoryObj = { m: { control: { type: 'number' }, }, - }, args: defaultExampleBadgeProps, }; diff --git a/stories/components/badge/tests/examples/badge-bg-colors.tsx b/stories/components/badge/tests/examples/badge-bg-colors.tsx index f478d87e35..8955d64a2b 100644 --- a/stories/components/badge/tests/examples/badge-bg-colors.tsx +++ b/stories/components/badge/tests/examples/badge-bg-colors.tsx @@ -10,7 +10,7 @@ const Demo = (props: ExampleBadgeProps) => { return ( { - - - - - - + + + + + + diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 7162068f17..bb0a1dda78 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -69,7 +69,7 @@ export const theme: Theme = { 50: { value: '10px', description: 'Use only for text in Badge component.', - }, + }, /* TODO: remove */ 100: { value: '12px', description: 'Use this font-size with caution for text in some additional messages. Always check its contrast and readability.', @@ -307,7 +307,7 @@ export const theme: Theme = { description: 'Background color of the soon Badge.', }, badge_light_admin: { - value: colors.blue['50'].value, + value: colors.blue['100'].value, description: 'Light background color of the admin Badge.', }, badge_light_alpha: { @@ -339,7 +339,7 @@ export const theme: Theme = { description: 'Text color for the beta Badge with light background.', }, badge_light_new_text: { - value: colors.green['500'].value, + value: colors.green['400'].value, description: 'Text color for the new Badge with light background.', }, badge_light_soon_text: { @@ -351,7 +351,7 @@ export const theme: Theme = { description: 'Background color of the inverted Badge.', }, badge_bg_unavailable: { - value: colors.gray['100'].value, + value: colors.gray['50'].value, description: 'Background color of the unavailable Badge.', }, badge_text_primary_invert: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index bae9eb82fc..3a496c74b7 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -31,7 +31,7 @@ }, { "name": "--intergalactic-badge-light-admin", - "value": "oklch(0.969 0.016 267.7)", + "value": "oklch(0.898 0.054 268.3)", "description": "Light background color of the admin Badge.", "components": [] }, @@ -79,7 +79,7 @@ }, { "name": "--intergalactic-badge-light-new-text", - "value": "oklch(0.53 0.142 170)", + "value": "oklch(0.64 0.161 170)", "description": "Text color for the new Badge with light background.", "components": [] }, @@ -97,7 +97,7 @@ }, { "name": "--intergalactic-badge-bg-unavailable", - "value": "oklch(0.9 0.002 177)", + "value": "oklch(0.97 0.001 180)", "description": "Background color of the unavailable Badge.", "components": [] }, @@ -105,7 +105,9 @@ "name": "--intergalactic-badge-text-primary-invert", "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted primary text color for Badge.", - "components": [] + "components": [ + "badge" + ] }, { "name": "--intergalactic-badge-text-secondary", @@ -2832,7 +2834,6 @@ "description": "Default body and UI copy; strongest reading emphasis for primary content.", "components": [ "accordion", - "badge", "base-components", "base-trigger", "breadcrumbs", @@ -2871,7 +2872,6 @@ "value": "oklch(0.999 0.001 180 / 0.949)", "description": "Inverted version of the primary text.", "components": [ - "badge", "base-components", "date-picker", "dot",