[UIK-5609][InputTags] InputTags and Tag rebranding

semcore/drag-and-drop/src/style/drag-and-drop.shadow.css

@@ -98,7 +98,7 @@ SDropZone[dropPreview] {
 
 
 SDropZone[dark][dropPreview] {
-  background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.4 0.004 140));
+  background-color: var(--intergalactic-bg-primary-invert-active, oklch(0.36 0.005 140));
 }
 
 SDraggable[keyboardDragging] {

semcore/feature-popover/src/style/feature-popover.shadow.css

@@ -13,7 +13,7 @@ SFeaturePopover {
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899)); /* TODO: --intergalactic-feature-popover-text */
   }
   &[theme='neutral'] {
-    background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.23 0.01 140)); /* TODO: --intergalactic-feature-popover-bg-neutral */
+    background-color: var(--intergalactic-feature-popover-bg-neutral, oklch(0.21 0.01 140)); /* TODO: --intergalactic-feature-popover-bg-neutral */
     color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-feature-popover-text-invert */
   }
 }

semcore/input-tags/src/style/input-tag.shadow.css

@@ -43,13 +43,13 @@ SInputTags>div[data-ui-name='ScrollArea.Bar'][orientation='vertical'] {
 SInputTags[size='m'] {
   min-height: var(--intergalactic-form-control-m, 32px);
   height: auto;
-  padding: 0 calc(var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) 0 var(--intergalactic-spacing-1x, 4px);
+  padding: var(--intergalactic-content-padding-xsmall, undefined) var(--intergalactic-spacing-content-padding-medium, 12px);
 }
 
 SInputTags[size='l'] {
   min-height: var(--intergalactic-form-control-l, 44px);
   height: auto;
-  padding: 0 calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px)) 0 var(--intergalactic-spacing-2x, 8px);
+  padding: calc(var(--intergalactic-content-padding-xsmall, undefined) + 2px) var(--intergalactic-spacing-content-padding-medium, 12px);
 }
 
 SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible {
@@ -59,8 +59,12 @@ SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible {
   }
 }
 
-STagContainer {
-  margin: var(--intergalactic-spacing-05x, 2px);
+STagContainer[size='m'] {
+  margin: 0 var(--intergalactic-spacing-05x, 2px) var(--intergalactic-spacing-1x, 4px) 0;
+}
+
+STagContainer[size='l'] {
+  margin: 0 var(--intergalactic-spacing-05x, 2px) var(--intergalactic-spacing-1x, 4px) 0;
 }
 
 STagContainer[editable] {

semcore/notice-bubble/src/style/notice-bubble.shadow.css

@@ -12,7 +12,7 @@ SView {
   gap: var(--intergalactic-spacing-2x, 8px);
 
   &[type='info'] {
-    background: var(--intergalactic-bg-primary-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg-info */
+    background: var(--intergalactic-bg-primary-invert, oklch(0.21 0.01 140)); /* TODO: --intergalactic-notice-bubble-bg-info */
   }
 
   &[type='warning'] {

semcore/tag/src/Tag.tsx

@@ -69,6 +69,16 @@ class RootTag extends Component<
     }
   };
 
+  resolvedTheme() {
+    const { theme, invert } = this.asProps;
+
+    if (invert === true) {
+      return `${theme}-invert`;
+    }
+
+    return theme;
+  }
+
   render() {
     const STag = Root;
     const {
@@ -82,6 +92,7 @@ class RootTag extends Component<
       resolveColor,
       id: outerId,
       uid,
+      theme,
     } = this.asProps;
     const id = outerId || `igc-${uid}-tag`;
     const isInteractiveView = !disabled && interactive;
@@ -93,7 +104,8 @@ class RootTag extends Component<
         id={id}
         use:interactive={isInteractive}
         use:interactiveView={isInteractiveView}
-        tag-color={resolveColor(color)}
+        use:theme={this.resolvedTheme()}
+        tag-color={theme === 'primary' ? resolveColor(color) : undefined}
         onKeyDown={this.handleKeyDown}
         use:tabIndex={isInteractive ? 0 : -1}
         role={isInteractive ? 'button' : undefined}
@@ -153,6 +165,7 @@ class RootTagContainer extends Component<
       addonLeft,
       addonRight,
       active,
+      invert,
     } = this.asProps;
     const id = outerId || `igc-${uid}-tag`;
 
@@ -168,6 +181,7 @@ class RootTagContainer extends Component<
       addonLeft,
       addonRight,
       active,
+      invert,
     };
   }
 
@@ -198,7 +212,7 @@ class RootTagContainer extends Component<
     return {
       disabled,
       size,
-      theme,
+      'theme': this.resolvedTheme(),
       color,
       'id': `${id}-clear`,
       'aria-labelledby': `${id}-clear ${id}-text`,
@@ -207,6 +221,16 @@ class RootTagContainer extends Component<
     };
   }
 
+  resolvedTheme() {
+    const { theme, invert } = this.asProps;
+
+    if (invert === true) {
+      return `${theme}-invert`;
+    }
+
+    return theme;
+  }
+
   render() {
     const STagContainer = Root;
     const { styles, Children, forcedAdvancedMode } = this.asProps;

semcore/tag/src/Tag.type.ts

@@ -27,8 +27,10 @@ declare namespace NSTag {
      * @default primary
      */
     theme?: NSTag.Theme;
-    /** Tag color text */
-    color?: string;
+    /**
+     * Flag for invert the tag to display in a dark theme or on a dark background.
+     */
+    invert?: boolean;
     /** Tag size
      * @default m
      */
@@ -39,7 +41,15 @@ declare namespace NSTag {
     addonRight?: React.ElementType;
     /** Specifies the locale for i18n support */
     locale?: string;
-  };
+  } & ({
+    theme?: 'primary';
+    /** Tag color text */
+    color?: string;
+  } | {
+    theme?: 'secondary' | 'additional';
+    /** Tag color text */
+    color?: never;
+  });
   type DefaultProps = {
     theme: 'primary';
     color: 'gray-500';

semcore/tag/src/style/tag.shadow.css

@@ -45,12 +45,12 @@ STagContainerClose {
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  border: 1px solid var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-border */
+  border: 1px solid var(--intergalactic-tag-primary-border, oklch(1 0 0));
   box-sizing: border-box;
-  background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-tag-primary-bg-normal */
+  background-color: var(--intergalactic-tag-primary-bg-normal, oklch(1 0 0));
   border-radius: var(--intergalactic-tag-rounded, 24px);
-  padding-left: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-1x, 4px);
+  padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
   font-family: inherit;
   font-weight: var(--intergalactic-medium, 500);
   color: var(--tag-color);
@@ -135,7 +135,7 @@ STag[size="xl"],
 STagContainerClose[size="xl"] {
   height: 40px;
   min-width: 40px;
-  padding: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0 var(--intergalactic-spacing-content-gap-large, 8px);
 
   & SText {
     font-size: var(--intergalactic-fs-300, 16px);
@@ -167,62 +167,96 @@ STagContainer[theme="primary"] SAddon {
 }
 
 STag[theme="secondary"],
-STagContainerClose[theme="secondary"],
-STag[theme="additional"],
-STagContainerClose[theme="additional"] {
-  /* chenge to ...? secondary: change to --intergalactic-tag-secondary-border; additional: change to --intergalactic-tag-additional-bg-normal */
-  &::before {
-    opacity: 0.01;
+STagContainerClose[theme="secondary"] {
+  color: var(--intergalactic-tag-secondary-text, #6a6c6a);
+  background-color: var(--intergalactic-tag-secondary-bg-normal, #ffffff);
+  border-color: var(--intergalactic-tag-secondary-border, oklch(0.91 0.002 177.8));
+
+  &::before,
+  &::after {
+    display: none;
   }
 
   &[interactiveView]:hover,
   &[interactiveView]:active,
   &[active] {
-    &:before {
-      opacity: 0.1;
-    }
+    background-color: var(--intergalactic-tag-secondary-bg-hover-active, #f4f5f5);
   }
 }
 
-STag[theme="secondary"],
-STagContainerClose[theme="secondary"],
 STag[theme="additional"],
-STagContainerClose[theme="additional"],
-STag[theme="secondary-invert"],
-STagContainerClose[theme="secondary-invert"],
-STag[theme="additional-invert"],
-STagContainerClose[theme="additional-invert"] {
+STagContainerClose[theme="additional"] {
+  color: var(--intergalactic-tag-additional-text, #6a6c6a);
+  background-color: var(--intergalactic-tag-additional-bg-normal, oklch(1 0 0));
+  border-color: var(--intergalactic-tag-additional-border, oklch(0.91 0.002 177.8));
+  border-style: dashed;
+
+  &::before,
   &::after {
-    opacity: 0.5;
+    display: none;
+  }
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-additional-bg-hover-active, oklch(0.98 0.001 180));
   }
 }
 
 STag[theme="primary-invert"],
 STagContainerClose[theme="primary-invert"] {
-  background-color: var(
-    --intergalactic-tag-primary-white-normal,
-    oklch(1 0 0)
-  );
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  background-color: var(--intergalactic-tag-primary-bg-invert-normal, oklch(0.965 0.065 140 / 0.1));
+  color: var(--intergalactic-tag-primary-text-invert, #ffffff);
+  border-color: transparent;
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-primary-bg-invert-hover-active, oklch(0.986 0.025 140 / 0.203));
+  }
 }
 
 STag[theme="secondary-invert"],
-STagContainerClose[theme="secondary-invert"],
+STagContainerClose[theme="secondary-invert"] {
+  background-color: var(--intergalactic-tag-secondary-bg-invert-normal, transparent);
+  color: var(--intergalactic-tag-secondary-text-invert, oklch(0.997 0.004 165.9 / 0.684));
+  border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.974 0.047 140 / 0.136));
+
+  &::before,
+  &::after {
+    display: none;
+  }
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-secondary-bg-invert-hover-active, oklch(0.98 0.036 140 / 0.164));
+  }
+}
+
 STag[theme="additional-invert"],
 STagContainerClose[theme="additional-invert"] {
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO:--intergalactic-tag-secondary-white-text */
-}
+  background-color: var(--intergalactic-tag-additional-bg-invert-normal, transparent);
+  color: var(--intergalactic-tag-additional-text-invert, oklch(0.997 0.004 165.9 / 0.684));
+  border-color: var(--intergalactic-tag-additional-border-invert, oklch(0.995 0.008 147.4 / 0.391));
+  border-style: dashed;
 
-STag[theme="additional"] {
+  &::before,
   &::after {
-    border-style: dashed;
+    display: none;
+  }
+
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
+  &[active] {
+    background-color: var(--intergalactic-tag-additional-bg-invert-hover-active, oklch(0.98 0.036 140 / 0.164));
   }
 }
 
 SText {
   display: flex;
-  padding-left: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-1x, 4px);
+  padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
   position: relative;
 }
 
@@ -258,6 +292,20 @@ STagContainer {
   align-items: center;
   justify-content: center;
 
+  STag[theme="secondary"]:not(:last-child),
+  STag[theme="additional"]:not(:last-child),
+  STag[theme="secondary-invert"]:not(:last-child),
+  STag[theme="additional-invert"]:not(:last-child) {
+    border-right: 0;
+  }
+
+  STagContainerClose[theme="secondary"],
+  STagContainerClose[theme="additional"],
+  STagContainerClose[theme="secondary-invert"],
+  STagContainerClose[theme="additional-invert"] {
+    border-left: 0;
+  }
+
   STag,
   SAddon {
     &:not(:last-child) {
@@ -319,7 +367,7 @@ STagContainer {
 
     svg {
       padding-left: 0;
-      padding-right: var(--intergalactic-spacing-1x, 4px);
+      padding-right: var(--intergalactic-spacing-content-gap-small, 4px);
     }
 
     svg path {
@@ -333,8 +381,8 @@ STagContainer {
 
   STagContainerClose[size="xl"] {
     svg {
-      padding-left: var(--intergalactic-spacing-1x, 4px);
-      padding-right: var(--intergalactic-spacing-2x, 8px);
+      padding-left: var(--intergalactic-spacing-content-gap-small, 4px);
+      padding-right: var(--intergalactic-spacing-content-gap-large, 8px);
     }
   }
 }

semcore/tooltip/src/style/tooltip.shadow.css

@@ -21,8 +21,8 @@ STooltip {
 
 STooltip[theme='invert'] {
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-tooltip-text-invert */
-  background-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
-  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */
+  background-color: var(--intergalactic-tooltip-invert, oklch(0.21 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
+  border: 1px solid var(--intergalactic-border-tooltip-invert, oklch(0.974 0.047 140 / 0.136)); /* TODO: --intergalactic-tooltip-border-invert */
 }
 
 STooltip[theme='warning'] {
@@ -52,10 +52,10 @@ SArrow {
 }
 
 SArrow[theme='invert'] {
-  border-color: var(--intergalactic-border-tooltip-invert, oklch(0.995 0.008 145.9 / 0.369)); /* TODO: --intergalactic-tooltip-border-invert */
+  border-color: var(--intergalactic-border-tooltip-invert, oklch(0.974 0.047 140 / 0.136)); /* TODO: --intergalactic-tooltip-border-invert */
 
   &::before {
-    border-color: var(--intergalactic-tooltip-invert, oklch(0.23 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
+    border-color: var(--intergalactic-tooltip-invert, oklch(0.21 0.01 140)); /* TODO: --intergalactic-tooltip-bg-invert */
   }
 }