[UIK-5579][badge] redesign

playground/entries/Badge.tsx

@@ -21,9 +21,14 @@ const entry: PlaygroundEntry<BadgeJSXProps> = {
       displayName: 'Type',
       value: 'new',
     },
-    inverted: {
+    light: {
       type: 'boolean',
-      displayName: 'Inverted',
+      displayName: 'Light',
+      value: false,
+    },
+    invert: {
+      type: 'boolean',
+      displayName: 'Invert',
       value: false,
     },
   },

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}"`);

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>;
 }

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);
 }

stories/components/badge/docs/examples/badge_main_types.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 const Demo = () => {
   return (
-    <Flex gap={8} alignItems='flex-start' direction='column'>
-      <Flex gap={2} alignItems='flex-start'>
+    <Flex gap={4} alignItems='flex-start' direction='column'>
+      <Flex ml={4} gap={2} alignItems='flex-start'>
         <Badge type='admin' />
         <Badge type='alpha' />
         <Badge type='beta' />
@@ -20,14 +20,22 @@ const Demo = () => {
         borderRadius='surface-rounded'
       >
         <Flex gap={2} alignItems='flex-start'>
-          <Badge type='admin' inverted />
-          <Badge type='alpha' inverted />
-          <Badge type='beta' inverted />
-          <Badge type='new' inverted />
-          <Badge type='soon' inverted />
-          <Badge type='unavailable' inverted />
+          <Badge type='admin' invert />
+          <Badge type='alpha' invert />
+          <Badge type='beta' invert />
+          <Badge type='new' invert />
+          <Badge type='soon' invert />
+          <Badge type='unavailable' invert />
         </Flex>
       </Box>
+      <Flex ml={4} gap={2} alignItems='flex-start'>
+        <Badge type='admin' light />
+        <Badge type='alpha' light />
+        <Badge type='beta' light />
+        <Badge type='new' light />
+        <Badge type='soon' light />
+        <Badge type='unavailable' light />
+      </Flex>
     </Flex>
   );
 };

stories/components/badge/tests/badge.stories.tsx

@@ -12,11 +12,11 @@
 export default meta;
 type Story = StoryObj<typeof Badge>;
 
 export const BadgeBg: StoryObj<typeof defaultExampleBadgeProps> = {
   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 @@
     m: {
       control: { type: 'number' },
     },
-
   },
   args: defaultExampleBadgeProps,
 };

stories/components/badge/tests/examples/badge-bg-colors.tsx

@@ -10,7 +10,7 @@ const Demo = (props: ExampleBadgeProps) => {
   return (
     <Flex gap={2}>
       <Badge
-        inverted={props.inverted}
+        invert={props.invert}
         type={props.type}
         bg={props.bg}
         color={props.color}
@@ -37,7 +37,7 @@ export const defaultExampleBadgeProps: ExampleBadgeProps = {
   h: undefined,
   pt: undefined,
   m: undefined,
-  inverted: undefined,
+  invert: undefined,
 };
 
 Demo.defaultProps = defaultExampleBadgeProps;

stories/components/badge/tests/examples/badge_i18n_example.tsx

@@ -49,12 +49,12 @@ const Demo = () => {
             <Badge type='unavailable' />
           </Flex>
           <Flex gap={2} mt={2} p={4} bg='bg-primary-invert'>
-            <Badge type='admin' inverted />
-            <Badge type='alpha' inverted />
-            <Badge type='beta' inverted />
-            <Badge type='new' inverted />
-            <Badge type='soon' inverted />
-            <Badge type='unavailable' inverted />
+            <Badge type='admin' invert />
+            <Badge type='alpha' invert />
+            <Badge type='beta' invert />
+            <Badge type='new' invert />
+            <Badge type='soon' invert />
+            <Badge type='unavailable' invert />
           </Flex>
         </Box>
       </I18nProvider>

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: {

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,15 +97,17 @@
   },
   {
     "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": []
   },
   {
     "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",
@@ -2824,7 +2826,6 @@
     "description": "Default body and UI copy; strongest reading emphasis for primary content.",
     "components": [
       "accordion",
-      "badge",
       "base-components",
       "base-trigger",
       "breadcrumbs",
@@ -2863,7 +2864,6 @@
     "value": "oklch(0.999 0.001 180 / 0.949)",
     "description": "Inverted version of the primary text.",
     "components": [
-      "badge",
       "base-components",
       "date-picker",
       "dot",