[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,7 +43,7 @@ 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: 0 calc(var(--intergalactic-spacing-2x, 8px) + var(--intergalactic-spacing-05x, 2px)) 0 var(--intergalactic-spacing-2x, 8px);
 }
 
 SInputTags[size='l'] {

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/switch/src/style/switch.shadow.css

@@ -76,7 +76,7 @@ SSwitch[disabled] {
 }
 
 SToggle {
-  background: var(--intergalactic-control-switch-bg, oklch(0.88 0.002 175.6)); /* TODO: --intergalactic-control-switch-bg */
+  background: var(--intergalactic-control-switch-bg, oklch(0.176 0.033 175.7 / 0.07)); /* TODO: --intergalactic-control-switch-bg */
   position: relative;
   color: var(--intergalactic-icon-secondary-neutral, oklch(0.104 0.023 162.3 / 0.385));
   cursor: pointer;

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}

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 */
   }
 }
 

semcore/wizard/src/style/wizard.shadow.css

@@ -7,7 +7,7 @@ SWizard {
 }
 
 SSidebar {
-  background: var(--intergalactic-control-primary-advertising, oklch(0.23 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */
+  background: var(--intergalactic-control-primary-advertising, oklch(0.21 0.01 140)); /* TODO: --intergalactic-wizard-sidebar-bg */
   color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-wizard-sidebar-text-primary */
   font-weight: var(--intergalactic-bold, 700);
   font-size: var(--intergalactic-fs-300, 16px);
@@ -38,11 +38,11 @@ SSidebar {
     }
 
     &:hover {
-      background: var(--intergalactic-control-primary-advertising-hover, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
+      background: var(--intergalactic-control-primary-advertising-hover, oklch(0.32 0.007 140)); /* TODO: --intergalactic-wizard-sidebar-control-hover */
       z-index: 2;
     }
     &[active] {
-      background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+      background: var(--intergalactic-control-primary-advertising-active, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
     }
     &:disabled,
     &[disabled] {
@@ -63,7 +63,7 @@ SSidebar {
         overflow: auto;
       }
       &[active]:hover SStepDescription {
-        background: var(--intergalactic-control-primary-advertising-active, oklch(0.4 0.004 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
+        background: var(--intergalactic-control-primary-advertising-active, oklch(0.36 0.005 140)); /* TODO: --intergalactic-wizard-sidebar-control-active */
       }
     }
   }