[UIK-5609][Tag] InputTags & Tags rebranding

semcore/base-trigger/src/style/base-trigger.shadow.css

@@ -8,7 +8,6 @@ SBaseTrigger {
   white-space: nowrap;
   user-select: none;
   box-sizing: border-box;
-  padding: 0;
   margin: 0;
   box-shadow: none;
   text-decoration: none;
@@ -19,12 +18,15 @@ SBaseTrigger {
   font-family: inherit;
   cursor: pointer;
 
-  background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-normal */
+  background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
 
   font-weight: var(--intergalactic-regular, 400);
   border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
+  border-radius: var(--intergalactic-control-rounded, 6px);
+  padding: 0 var(--intergalactic-spacing-content-inset-inline, 12px);
+
   &::-moz-focus-inner {
     border: none;
     padding: 0;
@@ -40,13 +42,13 @@ SBaseTrigger {
   }
 
   &:hover {
-    background-color: var(--intergalactic-bg-primary-neutral-hover, oklch(0.98 0.001 180)); /* TODO: --intergalactic-control-select-trigger-hover */
+    background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.98 0.001 180));
   }
 
   &:active,
   &[active] {
     border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
-    background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-select-trigger-active */
+    background-color: var(--intergalactic-control-select-trigger-active, oklch(1 0 0));
   }
 }
 
@@ -61,18 +63,17 @@ SInner {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--intergalactic-spacing-content-gap-medium, 6px);
   height: 100%;
   width: 100%;
 }
 
 SText {
   display: inline;
   /* disable-tokens-validator */
-  padding: 1px 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  line-height: var(--intergalactic-lh-200, 142%);
   flex-grow: 1;
   text-align: left;
 }
@@ -83,57 +84,25 @@ SAddon {
   justify-content: center;
   flex-shrink: 0;
   pointer-events: none;
-}
 
-SBaseAddon {
-  width: 12px;
-  height: 12px;
+  &:only-child {
+    margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+    margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
+  }
 }
 
 SBaseTrigger[size='m'] {
   min-width: var(--intergalactic-form-control-m, 32px);
   height: var(--intergalactic-form-control-m, 32px);
-  border-radius: var(--intergalactic-control-rounded, 6px);
-  padding: 0 var(--intergalactic-spacing-2x, 8px);
   font-size: var(--intergalactic-fs-200, 14px);
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:not(:only-child):last-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:only-child {
-      margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-      margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-    }
-  }
+  line-height: var(--intergalactic-lh-200, 142%);
 }
 
 SBaseTrigger[size='l'] {
   min-width: var(--intergalactic-form-control-l, 44px);
   height: var(--intergalactic-form-control-l, 44px);
-  border-radius: var(--intergalactic-control-rounded, 6px);
-  padding: 0 var(--intergalactic-spacing-3x, 12px);
   font-size: var(--intergalactic-fs-300, 16px);
-
-  & SAddon {
-    &:not(:only-child):first-child {
-      margin-right: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:not(:only-child):last-child {
-      margin-left: var(--intergalactic-spacing-2x, 8px);
-    }
-
-    &:only-child {
-      margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-      margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
-    }
-  }
+  line-height: var(--intergalactic-lh-300, 150%);
 }
 
 SBaseTrigger[neighborLocation='right'] {

semcore/base-trigger/src/style/button-trigger.shadow.css

@@ -1,8 +1,11 @@
 SButtonAddon {
-  width: 12px;
-  height: 12px;
+  width: var(--intergalactic-spacing-3x, 12px);
+  height: var(--intergalactic-spacing-3x, 12px);
+  color: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
+  position: relative;
+  left: var(--intergalactic-spacing-05x, 2px);
 }
 
 SButtonTriggerSpin {
-  fill: var(--intergalactic-icon-primary-neutral, oklch(0.092 0.024 152.2 / 0.526));
+  fill: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
 }

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/dropdown-menu/src/DropdownMenu.jsx

@@ -570,6 +570,7 @@ const DropdownMenu = createComponent(
     Item: [Item, { Addon, Content: ItemContent, Text: ItemContentText, Hint: ItemHint }],
     Group: Dropdown.Group,
     StatusItem: Dropdown.StatusItem,
+    Notice: Dropdown.Notice,
   },
   {
     parent: [Dropdown],

semcore/dropdown-menu/src/index.d.ts

@@ -154,8 +154,8 @@ declare const DropdownMenu: Intergalactic.Component<
   };
 
   Group: typeof Dropdown.Group;
-
   StatusItem: StatusItemComponent;
+  Notice: DropdownNoticeComponent;
 
   VirtualList: typeof VirtualList;
 

semcore/dropdown-menu/src/style/dropdown-menu.shadow.css

@@ -1,5 +1,5 @@
 SDropdownMenuList {
-  max-height: 240px;
+  max-height: 246px;
   padding: var(--intergalactic-spacing-1x, 4px) 0;
   position: relative;
   min-height: 26px;
@@ -29,6 +29,10 @@ SDropdownMenuList {
   }
 }
 
+SDropdownMenuList[size='l'] {
+  max-height: 306px;
+}
+
 SDropdownMenuItemContainer {
   SItemContent:focus-visible {
     outline: none;
@@ -42,11 +46,13 @@ SDropdownMenuItemContainer[nesting-trigger] {
 SDropdownMenuItemAddon,
 SItemContentText {
   display: inline-flex; /* todo: Brauer Ilia - why? should be changed to inline/inline-block for SItemContentText */
-  margin-left: var(--intergalactic-spacing-1x, 4px);
-  margin-right: var(--intergalactic-spacing-1x, 4px);
+
+  margin-left: var(--intergalactic-spacing-content-gap-small, 4px);
+  margin-right: var(--intergalactic-spacing-content-gap-small, 4px);
 
   &:first-child {
     margin-left: 0;
+    margin-right: var(--intergalactic-spacing-content-gap-medium, 6px);
   }
 
   &:last-child {

semcore/dropdown/package.json

@@ -17,7 +17,8 @@
     "require": "./lib/cjs/index.js"
   },
   "dependencies": {
-    "@semcore/typography": "^17.2.1"
+    "@semcore/typography": "^17.2.1",
+    "@semcore/notice": "^17.2.2"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.2.1"

semcore/dropdown/src/Dropdown.jsx

@@ -7,6 +7,7 @@ import { hasFocusableIn } from '@semcore/core/lib/utils/use/useFocusLock';
 import React from 'react';
 
 import { DropdownItem } from './DropdownItem';
+import { DropdownNotice } from './Notice';
 import { StatusItem } from './StatusItem';
 import style from './style/dropdown.shadow.css';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
@@ -212,6 +213,7 @@ const Dropdown = createComponent(
     Item: DropdownItem,
     Group: DropdownGroup,
     StatusItem,
+    Notice: DropdownNotice,
   },
   {
     parent: Popper,

semcore/dropdown/src/Notice.tsx

@@ -0,0 +1,25 @@
+import { Component, createComponent, Root, sstyled } from '@semcore/core';
+import Notice, { type NSNotice } from '@semcore/notice';
+import React from 'react';
+
+import style from './style/dropdownNotice.shadow.css';
+
+class DropdownNoticeRoot extends Component<NSNotice.Props> {
+  static displayName = 'Notice';
+  static style = style;
+
+  render() {
+    const { styles } = this.asProps;
+    const SDropdownNotice = Root;
+    return sstyled(styles)(<SDropdownNotice render={Notice} />);
+  }
+}
+
+export const DropdownNotice = createComponent<NSNotice.Component, typeof DropdownNoticeRoot>(DropdownNoticeRoot, {
+  Label: Notice.Label,
+  Title: Notice.Title,
+  Text: Notice.Text,
+  Actions: Notice.Actions,
+  Content: Notice.Content,
+  Close: Notice.Close,
+}, { parent: Notice });

semcore/dropdown/src/StatusItem.tsx

@@ -38,7 +38,8 @@ class StatusItemRoot extends Component<
           render={Text}
           tag='div'
           key='StatusItem'
-          p={size === 'l' ? 3 : 2}
+          px={3}
+          py={size === 'l' ? 3 : 2}
           use:size={size === 'l' ? 300 : 200}
           use='secondary'
         >

semcore/dropdown/src/index.d.ts

@@ -7,6 +7,8 @@ import type { Box, BoxProps,
   PopperPopperProps,
 } from '@semcore/base-components';
 import type { Intergalactic, PropGetterFn } from '@semcore/core';
+import type { NSNotice } from '@semcore/notice';
+import type Notice from '@semcore/notice';
 import type React from 'react';
 
 export type DropdownProps = PopperProps & {
@@ -71,6 +73,9 @@ export type DropdownStatusItemProps = {
 
 export type StatusItemComponent = Intergalactic.Component<'div', DropdownStatusItemProps>;
 
+export type DropdownNoticeProps = NSNotice.Props;
+export type DropdownNoticeComponent = Intergalactic.Component<typeof Notice, DropdownNoticeProps>;
+
 declare const Dropdown: Intergalactic.Component<
   'div',
   DropdownProps,
@@ -87,6 +92,7 @@ declare const Dropdown: Intergalactic.Component<
   Item: Intergalactic.Component<typeof Box>;
   Group: Intergalactic.Component<'div', DropdownGroupProps>;
   StatusItem: StatusItemComponent;
+  DropdownNotice: DropdownNoticeComponent;
 };
 
 export default Dropdown;