[UIK-5639] BulkTextarea and Textarea rebranding

semcore/bulk-textarea/src/components/InputField/inputField.shadow.css

@@ -23,13 +23,13 @@ SInputField>ol {
     color: var(--intergalactic-text-placeholder, oklch(0.098 0.023 157.4 / 0.457));
     position: absolute;
     white-space: pre-wrap;
-    padding-left: var(--intergalactic-spacing-4x, 16px);
-    text-indent: calc(-1 * var(--intergalactic-spacing-4x, 16px));
+    padding-left: var(--intergalactic-spacing-content-padding-medium, 12px);
+    text-indent: calc(-1 * var(--intergalactic-spacing-content-padding-medium, 12px));
   }
 
   >li {
     counter-increment: list-counter;
-    margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
+    margin: 0 0 var(--intergalactic-spacing-content-padding-xsmall, 4px) 0;
     position: relative;
     word-break: break-all;
     white-space: pre-wrap;
@@ -48,7 +48,7 @@ SInputField>ol {
 
       text-align: right;
       color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
-      margin-right: var(--intergalactic-spacing-1x, 4px);
+      margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
       font-variant-numeric: normal;
       font-weight: 300;
     }
@@ -113,7 +113,7 @@ SInputField[showErrors]>ol[aria-invalid]>li[aria-invalid]:after {
 }
 
 SInputField[size='m']>ol {
-  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);
+  padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-lh-200, 142%);
 
@@ -122,27 +122,27 @@ SInputField[size='m']>ol {
   max-height: calc((var(--maxRows) - 1) * (20px + var(--intergalactic-spacing-1x, 4px)) + 18px);
 
   &:empty {
-    padding-left: var(--intergalactic-spacing-8x, 32px);
+    padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + 6px);
 
     &::before {
-      left: calc(var(--intergalactic-spacing-4x, 16px) + 1px);
+      left: var(--intergalactic-spacing-content-padding-medium, 12px);
     }
   }
 }
 
 SInputField[size='l']>ol {
-  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
+  padding: var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-large, 16px) var(--intergalactic-spacing-content-padding-small, 8px) var(--intergalactic-spacing-content-padding-medium, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
   line-height: var(--intergalactic-lh-300, 150%);
 
   min-height: calc(var(--minRows) * 24px);
   max-height: calc((var(--maxRows) - 1) * (24px + var(--intergalactic-spacing-1x, 4px)) + 20px);
 
   &:empty {
-    padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
+    padding-left: calc(var(--intergalactic-spacing-content-padding-xlarge, 20px) + var(--intergalactic-spacing-content-padding-small, 8px));
 
     &::before {
-      left: var(--intergalactic-spacing-4x, 16px);
+      left: var(--intergalactic-spacing-content-padding-medium, 12px);
     }
   }
 }

semcore/button/src/component/Button/button.shadow.css

@@ -21,6 +21,7 @@ SButton {
   -webkit-tap-highlight-color: transparent;
   font-weight: var(--intergalactic-medium, 500);
   color: var(--intergalactic-control-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  min-width: fit-content;
 
   &::-moz-focus-inner {
     padding: 0;
@@ -49,7 +50,6 @@ SButton[size='s'] {
 
 SButton[size='m'] {
   height: var(--intergalactic-form-control-m, 32px);
-  min-width: var(--intergalactic-form-control-m, 32px);
   border-radius: var(--intergalactic-control-rounded, 6px);
   font-size: var(--intergalactic-fs-200, 14px);
 }
@@ -61,7 +61,6 @@ SButton[size='m']:has(SAddon:only-child) {
 
 SButton[size='l'] {
   height: var(--intergalactic-form-control-l, 44px);
-  min-width: var(--intergalactic-form-control-l, 44px);
   border-radius: var(--intergalactic-control-rounded, 6px);
   font-size: var(--intergalactic-fs-300, 16px);
 }
@@ -187,18 +186,18 @@ SButton[theme='secondary-muted'] {
 
 SButton[theme='secondary-invert'] {
   color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-  background-color: var(--intergalactic-control-secondary-invert, oklch(0.983 0.03 140 / 0.183));
+  background-color: var(--intergalactic-control-secondary-invert, oklch(0.969 0.057 140 / 0.118));
 
   &:hover {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.986 0.025 140 / 0.203));
+    background-color: var(--intergalactic-control-secondary-invert-hover, oklch(0.98 0.036 140 / 0.164));
   }
 
   &:active,
   &[active] {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
     background-color: var(--intergalactic-control-secondary-invert-active,
-    oklch(0.988 0.021 140 / 0.222));
+    oklch(0.986 0.025 140 / 0.203));
   }
 }
 
@@ -241,13 +240,13 @@ SButton[theme='tertiary-invert'] {
 
   &:hover {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.986 0.025 140 / 0.203));
+    background-color: var(--intergalactic-control-tertiary-invert-hover, oklch(0.98 0.036 140 / 0.164));
   }
 
   &:active,
   &[active] {
     color: var(--intergalactic-control-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
-    background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.988 0.021 140 / 0.222));
+    background-color: var(--intergalactic-control-tertiary-invert-active, oklch(0.986 0.025 140 / 0.203));
   }
 }
 

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-spacing-content-padding-xsmall, 4px) 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-spacing-content-padding-xsmall, 4px) + 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';