From 5a6c47a5942150f1929d252fbd7d02b585e079b9 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 23 Jul 2026 22:24:05 +0200 Subject: [PATCH 1/9] [tag] update Tag and add invert themes to types --- semcore/tag/src/Tag.type.ts | 2 +- semcore/tag/src/style/tag.shadow.css | 93 ++++++++------ tools/theme/src/colors/index.ts | 14 +-- tools/theme/src/theme.ts | 14 +-- .../docs/style/design-tokens/base-tokens.json | 6 +- .../style/design-tokens/design-tokens.json | 115 +++++++++++------- 6 files changed, 146 insertions(+), 98 deletions(-) diff --git a/semcore/tag/src/Tag.type.ts b/semcore/tag/src/Tag.type.ts index 54932e862e..7881d8ef36 100644 --- a/semcore/tag/src/Tag.type.ts +++ b/semcore/tag/src/Tag.type.ts @@ -8,7 +8,7 @@ import type { LocalizedMessages } from './translations/__intergalactic-dynamic-l declare namespace NSTag { type Size = 'xl' | 'l' | 'm'; - type Theme = 'primary' | 'secondary' | 'additional'; + type Theme = 'primary' | 'secondary' | 'additional' | 'primary-invert' | 'secondary-invert' | 'additional-invert'; type Use = 'primary' | 'secondary'; type Ctx = Props & { getCloseProps?: PropGetterFn; diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index e951c4c3cc..8e449417aa 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/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); @@ -170,59 +170,70 @@ 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; + color: var(--intergalactic-tag-secondary-gray-text, #6a6c6a); + background-color: var(--intergalactic-tag-secondary-normal, #ffffff); + border-color: var(--intergalactic-tag-secondary-border, oklch(0.176 0.033 175.7 / 0.07)); + + &::before, + &::after { + display: none; } &[interactiveView]:hover, &[interactiveView]:active, &[active] { - &:before { - opacity: 0.1; - } + background-color: var(--intergalactic-tag-secondary-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"] { - &::after { - opacity: 0.5; - } +STagContainerClose[theme="additional"] { + border-style: dashed; + border-color: var(--intergalactic-tag-additional-border, oklch(0.176 0.033 175.7 / 0.07)); } STag[theme="primary-invert"], STagContainerClose[theme="primary-invert"] { - background-color: var( - --intergalactic-tag-primary-white-normal, - oklch(1 0 0) - ); + background-color: var(--intergalactic-tag-primary-white-normal, oklch(0.965 0.065 140 / 0.1)); color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); + border-color: transparent; + + &[interactiveView]:hover, + &[interactiveView]:active, + &[active] { + background-color: var(--intergalactic-tag-primary-white-hover-active, oklch(0.986 0.025 140 / 0.203)); + } } STag[theme="secondary-invert"], STagContainerClose[theme="secondary-invert"], 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-secondary-white-normal, transparent); + color: var(--intergalactic-tag-secondary-white-text, oklch(0.997 0.004 165.9 / 0.684)); + border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.951 0.094 140.3 / 0.014)); -STag[theme="additional"] { + &::before, &::after { - border-style: dashed; + display: none; + } + + &[interactiveView]:hover, + &[interactiveView]:active, + &[active] { + background-color: var(--intergalactic-tag-secondary-white-hover-active, oklch(0.98 0.036 140 / 0.164)); } } +STag[theme="additional-invert"], +STagContainerClose[theme="additional-invert"] { + border-style: dashed; +} + 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 +269,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 +344,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 +358,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); } } } diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index 67769025a7..896f27953b 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -240,14 +240,14 @@ export const L_BORDER_FOCUS = 0.7; // Invert levels /** Primary bg */ -export const L_INV_BG_PRIMARY = 0.23; -export const L_INV_BG_PRIMARY_HOVER = 0.36; -export const L_INV_BG_PRIMARY_ACTIVE = 0.4; +export const L_INV_BG_PRIMARY = 0.21; +export const L_INV_BG_PRIMARY_HOVER = 0.32; +export const L_INV_BG_PRIMARY_ACTIVE = 0.36; /** Secondary bg */ -export const L_INV_BG_SECONDARY = 0.28; -export const L_INV_BG_SECONDARY_HOVER = 0.32; -export const L_INV_BG_SECONDARY_ACTIVE = 0.34; +export const L_INV_BG_SECONDARY = 0.23; +export const L_INV_BG_SECONDARY_HOVER = 0.28; +export const L_INV_BG_SECONDARY_ACTIVE = 0.32; /** Skeleton bg */ export const L_INV_BG_SKELETON = 0.5; @@ -274,4 +274,4 @@ export const L_INV_ICON_PRIMARY_HOVER = 0.8; /** Border primary | ⚠️ APCA 15+ on secondary bg */ export const L_INV_BORDER_PRIMARY = 0.5; // inputs, buttons, table header /** Border secondary */ -export const L_INV_BORDER_SECONDARY = 0.48; +export const L_INV_BORDER_SECONDARY = 0.25; diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 3a233936d2..8c93dfae0c 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -911,7 +911,7 @@ export const theme: Theme = { description: 'Icon color for the SliderRating component in its hovered and active states.', }, control_switch_bg_DEFAULT: { - value: neutral.at(L_BG_MEDIUM), + value: '{semanticTokens.colors.control_secondary_neutral_DEFAULT}', description: 'Subtle background of the Switch control.', }, control_switch_bg_info_active: { @@ -1608,11 +1608,11 @@ export const theme: Theme = { description: 'Violet text for the primary violet tag.', }, tag_primary_white_hover_active: { - value: '{semanticTokens.colors.bg_primary_neutral_hover}', + value: neutral.opaqueInvAt(L_INV_BG_PRIMARY_HOVER), description: 'Hover and active (selected) state of the primary white tag.', }, tag_primary_white_normal: { - value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', + value: neutral.opaqueInvAt(L_INV_BG_PRIMARY), description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.', }, tag_primary_white_text: { @@ -1632,7 +1632,7 @@ export const theme: Theme = { description: 'Yellow text for the primary yellow tag.', }, tag_secondary_border_DEFAULT: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', + value: '{semanticTokens.colors.border_secondary_DEFAULT}', description: 'Border color of the secondary Tag.', }, tag_secondary_border_invert: { @@ -1652,15 +1652,15 @@ export const theme: Theme = { description: 'Background color for the default secondary tag.', }, tag_secondary_white_hover_active: { - value: 'rgba(255, 255, 255, 0.1)', + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), description: 'Active state of the secondary white tag.', }, tag_secondary_white_normal: { - value: 'rgba(255, 255, 255, 0)', + value: 'transparent', description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.', }, tag_secondary_white_text: { - value: '#ffffff', + value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY), description: 'White text for the secondary white tag.', }, text_advertising: { diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index 87555d5cd8..67dbc9e622 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -840,7 +840,7 @@ }, { "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)" + "value": "oklch(0.951 0.094 140.3 / 0.014)" }, { "name": "--intergalactic-border-table-accent", @@ -856,7 +856,7 @@ }, { "name": "--intergalactic-tooltip-invert", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.21 0.01 140)" }, { "name": "--intergalactic-tooltip-warning", @@ -888,7 +888,7 @@ }, { "name": "--intergalactic-feature-popover-neutral-bg", - "value": "oklch(0.23 0.01 140)" + "value": "oklch(0.21 0.01 140)" }, { "name": "--intergalactic-feature-popover-neutral-dot-outer-border", diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 6a661256f1..5206a6b9f2 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -105,7 +105,7 @@ }, { "name": "--intergalactic-bg-primary-invert", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Inverted version of the primary background of the interface that contains the main data and information.", "components": [ "notice-bubble" @@ -113,7 +113,7 @@ }, { "name": "--intergalactic-bg-primary-invert-active", - "value": "oklch(0.4 0.004 140)", + "value": "oklch(0.36 0.005 140)", "description": "Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information.", "components": [ "drag-and-drop" @@ -121,7 +121,7 @@ }, { "name": "--intergalactic-bg-primary-invert-hover", - "value": "oklch(0.36 0.005 140)", + "value": "oklch(0.32 0.007 140)", "description": "Hover state for the inverted version of the primary background of the interface that contains the main data and information.", "components": [] }, @@ -158,7 +158,6 @@ "side-panel", "slider", "switch", - "tag", "textarea", "wizard" ] @@ -175,10 +174,7 @@ "name": "--intergalactic-bg-primary-neutral-hover", "value": "oklch(0.98 0.001 180)", "description": "Hover state of the primary background of the interface which contains the main data and information.", - "components": [ - "base-trigger", - "pills" - ] + "components": [] }, { "name": "--intergalactic-bg-primary-success", @@ -458,7 +454,7 @@ }, { "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)", + "value": "oklch(0.951 0.094 140.3 / 0.014)", "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, @@ -923,7 +919,7 @@ }, { "name": "--intergalactic-control-primary-advertising", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Background of the advertising primary control.", "components": [ "wizard" @@ -931,7 +927,7 @@ }, { "name": "--intergalactic-control-primary-advertising-hover", - "value": "oklch(0.36 0.005 140)", + "value": "oklch(0.32 0.007 140)", "description": "Hover state of the advertising primary control.", "components": [ "wizard" @@ -939,7 +935,7 @@ }, { "name": "--intergalactic-control-primary-advertising-active", - "value": "oklch(0.4 0.004 140)", + "value": "oklch(0.36 0.005 140)", "description": "Active (selected) state of the advertising primary control.", "components": [ "wizard" @@ -1102,7 +1098,7 @@ }, { "name": "--intergalactic-control-secondary-invert", - "value": "oklch(0.98 0.036 140 / 0.164)", + "value": "oklch(0.969 0.057 140 / 0.118)", "description": "Background of the inverted version of the secondary control.", "components": [ "button" @@ -1110,7 +1106,7 @@ }, { "name": "--intergalactic-control-secondary-invert-active", - "value": "oklch(0.988 0.021 140 / 0.222)", + "value": "oklch(0.986 0.025 140 / 0.203)", "description": "Active (selected) state of the inverted version of the secondary control.", "components": [ "button" @@ -1118,7 +1114,7 @@ }, { "name": "--intergalactic-control-secondary-invert-hover", - "value": "oklch(0.986 0.025 140 / 0.203)", + "value": "oklch(0.98 0.036 140 / 0.164)", "description": "Hover state of the inverted version of the secondary control.", "components": [ "button" @@ -1217,7 +1213,7 @@ }, { "name": "--intergalactic-control-switch-bg", - "value": "oklch(0.88 0.002 175.6)", + "value": "oklch(0.176 0.033 175.7 / 0.07)", "description": "Subtle background of the Switch control.", "components": [ "switch" @@ -1275,7 +1271,7 @@ }, { "name": "--intergalactic-control-tertiary-invert-active", - "value": "oklch(0.988 0.021 140 / 0.222)", + "value": "oklch(0.986 0.025 140 / 0.203)", "description": "Active (selected) state of the inverted version of the tertiary control.", "components": [ "button" @@ -1283,7 +1279,7 @@ }, { "name": "--intergalactic-control-tertiary-invert-hover", - "value": "oklch(0.986 0.025 140 / 0.203)", + "value": "oklch(0.98 0.036 140 / 0.164)", "description": "Hover state of the inverted version of the tertiary control.", "components": [ "button" @@ -1498,7 +1494,7 @@ }, { "name": "--intergalactic-feature-popover-bg-neutral", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Background of the FeaturePopover with neutral theme.", "components": [ "feature-popover" @@ -1867,7 +1863,7 @@ }, { "name": "--intergalactic-notice-bubble-bg-info", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Background of the NoticeBubble.", "components": [] }, @@ -2358,7 +2354,9 @@ "name": "--intergalactic-tag-primary-bg-normal", "value": "oklch(1 0 0)", "description": "Background of the primary Tag in its normal state.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-primary-blue-hover-active", @@ -2382,7 +2380,9 @@ "name": "--intergalactic-tag-primary-border", "value": "oklch(1 0 0)", "description": "Border color of the primary Tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-primary-gray-hover-active", @@ -2476,13 +2476,15 @@ }, { "name": "--intergalactic-tag-primary-white-hover-active", - "value": "oklch(0.98 0.001 180)", + "value": "oklch(0.986 0.025 140 / 0.203)", "description": "Hover and active (selected) state of the primary white tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-primary-white-normal", - "value": "oklch(1 0 0)", + "value": "oklch(0.965 0.065 140 / 0.1)", "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.", "components": [ "tag" @@ -2514,51 +2516,67 @@ }, { "name": "--intergalactic-tag-secondary-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.176 0.033 175.7 / 0.07)", "description": "Border color of the secondary Tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)", + "value": "oklch(0.951 0.094 140.3 / 0.014)", "description": "Inverted border color of the secondary Tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-gray-text", "value": "#6a6c6a", "description": "Gray text for the default secondary tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-hover-active", "value": "#f4f5f5", "description": "Hover and active (selected) states of the background color for the default secondary tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-normal", "value": "#ffffff", "description": "Background color for the default secondary tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-white-hover-active", - "value": "rgba(255, 255, 255, 0.1)", + "value": "oklch(0.98 0.036 140 / 0.164)", "description": "Active state of the secondary white tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-white-normal", - "value": "rgba(255, 255, 255, 0)", + "value": "transparent", "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-secondary-white-text", - "value": "#ffffff", + "value": "oklch(0.997 0.004 165.9 / 0.684)", "description": "White text for the secondary white tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-text-advertising", @@ -2844,7 +2862,7 @@ }, { "name": "--intergalactic-tooltip-bg-invert", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Inverted version of the default Tooltip background.", "components": [] }, @@ -2856,7 +2874,7 @@ }, { "name": "--intergalactic-tooltip-border-invert", - "value": "oklch(0.995 0.008 145.9 / 0.369)", + "value": "oklch(0.951 0.094 140.3 / 0.014)", "description": "Border of the Tooltip with dark theme.", "components": [] }, @@ -2880,25 +2898,25 @@ }, { "name": "--intergalactic-wizard-sidebar-bg", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Background of the Wizard sidebar.", "components": [] }, { "name": "--intergalactic-wizard-sidebar-control", - "value": "oklch(0.23 0.01 140)", + "value": "oklch(0.21 0.01 140)", "description": "Background of the control in the Wizard sidebar in its normal state.", "components": [] }, { "name": "--intergalactic-wizard-sidebar-control-active", - "value": "oklch(0.4 0.004 140)", + "value": "oklch(0.36 0.005 140)", "description": "Active state of the control in the Wizard sidebar.", "components": [] }, { "name": "--intergalactic-wizard-sidebar-control-hover", - "value": "oklch(0.36 0.005 140)", + "value": "oklch(0.32 0.007 140)", "description": "Hover state of the control in the Wizard sidebar.", "components": [] }, @@ -3083,7 +3101,9 @@ "value": "4px", "description": "Small gap between content elements inside controls.", "components": [ - "inline-input" + "dropdown-menu", + "inline-input", + "tag" ] }, { @@ -3100,7 +3120,10 @@ "value": "8px", "description": "Large gap between content elements inside controls.", "components": [ - "button" + "button", + "dropdown", + "select", + "tag" ] }, { From 9871794b8f6d94332405727bb5afe931ecc8e705 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Thu, 23 Jul 2026 23:03:46 +0200 Subject: [PATCH 2/9] [input-tags] update styles and add test story --- .../input-tags/src/style/input-tag.shadow.css | 2 +- semcore/tag/src/style/tag.shadow.css | 4 +- .../input-tags/tests/examples/all-sizes.tsx | 37 ++++++++ .../input-tags/tests/input-tags.stories.tsx | 6 ++ .../tag/advanced/examples/all-tags.tsx | 93 ++++++++++++++++--- .../docs/style/design-tokens/base-tokens.json | 2 +- .../style/design-tokens/design-tokens.json | 10 +- 7 files changed, 131 insertions(+), 23 deletions(-) create mode 100644 stories/components/input-tags/tests/examples/all-sizes.tsx diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css index 08af38ed01..bb2b4daaf8 100644 --- a/semcore/input-tags/src/style/input-tag.shadow.css +++ b/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'] { diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 8e449417aa..2126b37665 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -189,7 +189,7 @@ STagContainerClose[theme="additional"] { STag[theme="additional"], STagContainerClose[theme="additional"] { border-style: dashed; - border-color: var(--intergalactic-tag-additional-border, oklch(0.176 0.033 175.7 / 0.07)); + border-color: var(--intergalactic-tag-additional-border, oklch(0.137 0.026 175.7 / 0.161)); } STag[theme="primary-invert"], @@ -211,7 +211,7 @@ STag[theme="additional-invert"], STagContainerClose[theme="additional-invert"] { background-color: var(--intergalactic-tag-secondary-white-normal, transparent); color: var(--intergalactic-tag-secondary-white-text, oklch(0.997 0.004 165.9 / 0.684)); - border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.951 0.094 140.3 / 0.014)); + border-color: var(--intergalactic-tag-secondary-border-invert, oklch(0.974 0.047 140 / 0.136)); &::before, &::after { diff --git a/stories/components/input-tags/tests/examples/all-sizes.tsx b/stories/components/input-tags/tests/examples/all-sizes.tsx new file mode 100644 index 0000000000..66dc057ba6 --- /dev/null +++ b/stories/components/input-tags/tests/examples/all-sizes.tsx @@ -0,0 +1,37 @@ +import { Flex } from '@semcore/ui/base-components'; +import InputTags from '@semcore/ui/input-tags'; +import React from 'react'; + +const TAGS = ['Facebook', 'Instagram']; + +export default function AllSizes() { + const [tagsM, setTagsM] = React.useState(TAGS); + const [tagsL, setTagsL] = React.useState(TAGS); + + return ( + + + {tagsM.map((tag) => ( + + {tag} + setTagsM((current) => current.filter((item) => item !== tag))} + /> + + ))} + + + + {tagsL.map((tag) => ( + + {tag} + setTagsL((current) => current.filter((item) => item !== tag))} + /> + + ))} + + + + ); +} diff --git a/stories/components/input-tags/tests/input-tags.stories.tsx b/stories/components/input-tags/tests/input-tags.stories.tsx index dc7d0dc76b..4f3d6a333b 100644 --- a/stories/components/input-tags/tests/input-tags.stories.tsx +++ b/stories/components/input-tags/tests/input-tags.stories.tsx @@ -1,6 +1,7 @@ import InputTags from '@semcore/ui/input-tags'; import type { Meta, StoryObj } from '@storybook/react-vite'; +import AllSizesExample from './examples/all-sizes'; import EnteringAndEditingTagsExample, { defaultProps as enteringAndEditingTagsProps } from './examples/entering_and_editing_tags'; import TagsWithAddonsExample, { defaultPropsEmail } from './examples/tags-with-addons'; @@ -11,6 +12,11 @@ const meta: Meta = { export default meta; +export const AllSizes: StoryObj = { + name: 'All sizes', + render: AllSizesExample, +}; + export const EnteringAndEditingTags: StoryObj = { render: EnteringAndEditingTagsExample, argTypes: { diff --git a/stories/components/tag/advanced/examples/all-tags.tsx b/stories/components/tag/advanced/examples/all-tags.tsx index a21bceacc2..bca08319e5 100644 --- a/stories/components/tag/advanced/examples/all-tags.tsx +++ b/stories/components/tag/advanced/examples/all-tags.tsx @@ -1,5 +1,5 @@ import MathPlusM from '@semcore/icon/MathPlus/m'; -import { Flex } from '@semcore/ui/base-components'; +import { Box, Flex } from '@semcore/ui/base-components'; import Tag, { TagContainer } from '@semcore/ui/tag'; import React from 'react'; @@ -20,20 +20,83 @@ const SIZES = ['m', 'l', 'xl'] as const; export default function AllTags() { return ( - - - Primary - - - Secondary - - - Additional - - - Disabled - - + {SIZES.map((size) => ( + + + Primary + + + Secondary + + + Disabled + + + ))} + {SIZES.map((size) => ( + + + + Primary interactive + + + + + + Secondary interactive + + + + + Additional interactive + + + ))} + + + {SIZES.map((size) => ( + + + Primary invert + + + Secondary invert + + + ))} + {SIZES.map((size) => ( + + + + Primary invert interactive + + + + + + Secondary invert interactive + + + + + Additional invert interactive + + + ))} + + {SIZES.map((size) => ( {COLORS.map((color) => ( diff --git a/website/docs/style/design-tokens/base-tokens.json b/website/docs/style/design-tokens/base-tokens.json index 67dbc9e622..2679ac7bba 100644 --- a/website/docs/style/design-tokens/base-tokens.json +++ b/website/docs/style/design-tokens/base-tokens.json @@ -840,7 +840,7 @@ }, { "name": "--intergalactic-border-tooltip-invert", - "value": "oklch(0.951 0.094 140.3 / 0.014)" + "value": "oklch(0.974 0.047 140 / 0.136)" }, { "name": "--intergalactic-border-table-accent", diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 5206a6b9f2..76ec9de8e9 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -454,7 +454,7 @@ }, { "name": "--intergalactic-border-secondary-invert", - "value": "oklch(0.951 0.094 140.3 / 0.014)", + "value": "oklch(0.974 0.047 140 / 0.136)", "description": "Inverted version of the neutral secondary border. Use it for borders on the dark or color background.", "components": [] }, @@ -2342,7 +2342,9 @@ "name": "--intergalactic-tag-additional-border", "value": "oklch(0.137 0.026 175.7 / 0.161)", "description": "Border color of the additional Tag.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-primary-bg-hover", @@ -2524,7 +2526,7 @@ }, { "name": "--intergalactic-tag-secondary-border-invert", - "value": "oklch(0.951 0.094 140.3 / 0.014)", + "value": "oklch(0.974 0.047 140 / 0.136)", "description": "Inverted border color of the secondary Tag.", "components": [ "tag" @@ -2874,7 +2876,7 @@ }, { "name": "--intergalactic-tooltip-border-invert", - "value": "oklch(0.951 0.094 140.3 / 0.014)", + "value": "oklch(0.974 0.047 140 / 0.136)", "description": "Border of the Tooltip with dark theme.", "components": [] }, From 73bde181fae41b2c565a0a20478d68645134ff05 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 24 Jul 2026 14:24:51 +0200 Subject: [PATCH 3/9] [tag] update styles --- .../src/style/drag-and-drop.shadow.css | 2 +- .../src/style/feature-popover.shadow.css | 2 +- .../src/style/notice-bubble.shadow.css | 2 +- semcore/switch/src/style/switch.shadow.css | 2 +- semcore/tag/src/Tag.type.ts | 2 +- semcore/tag/src/style/tag.shadow.css | 55 ++++++++--- semcore/tooltip/src/style/tooltip.shadow.css | 8 +- semcore/wizard/src/style/wizard.shadow.css | 8 +- tools/theme/src/theme.ts | 97 ++++++++++++------- .../style/design-tokens/design-tokens.json | 85 ++++++++++++---- 10 files changed, 181 insertions(+), 82 deletions(-) diff --git a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css b/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css index a53b2a6d45..ee3585dc48 100644 --- a/semcore/drag-and-drop/src/style/drag-and-drop.shadow.css +++ b/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] { diff --git a/semcore/feature-popover/src/style/feature-popover.shadow.css b/semcore/feature-popover/src/style/feature-popover.shadow.css index 4df66ad267..ada19867ce 100644 --- a/semcore/feature-popover/src/style/feature-popover.shadow.css +++ b/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 */ } } diff --git a/semcore/notice-bubble/src/style/notice-bubble.shadow.css b/semcore/notice-bubble/src/style/notice-bubble.shadow.css index 37f7a248b5..52de3e8f9c 100644 --- a/semcore/notice-bubble/src/style/notice-bubble.shadow.css +++ b/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'] { diff --git a/semcore/switch/src/style/switch.shadow.css b/semcore/switch/src/style/switch.shadow.css index aaaabf42aa..7d8fd5c423 100644 --- a/semcore/switch/src/style/switch.shadow.css +++ b/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; diff --git a/semcore/tag/src/Tag.type.ts b/semcore/tag/src/Tag.type.ts index 7881d8ef36..54932e862e 100644 --- a/semcore/tag/src/Tag.type.ts +++ b/semcore/tag/src/Tag.type.ts @@ -8,7 +8,7 @@ import type { LocalizedMessages } from './translations/__intergalactic-dynamic-l declare namespace NSTag { type Size = 'xl' | 'l' | 'm'; - type Theme = 'primary' | 'secondary' | 'additional' | 'primary-invert' | 'secondary-invert' | 'additional-invert'; + type Theme = 'primary' | 'secondary' | 'additional'; type Use = 'primary' | 'secondary'; type Ctx = Props & { getCloseProps?: PropGetterFn; diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 2126b37665..6f464c9c53 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -167,11 +167,9 @@ STagContainer[theme="primary"] SAddon { } STag[theme="secondary"], -STagContainerClose[theme="secondary"], -STag[theme="additional"], -STagContainerClose[theme="additional"] { - color: var(--intergalactic-tag-secondary-gray-text, #6a6c6a); - background-color: var(--intergalactic-tag-secondary-normal, #ffffff); +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.176 0.033 175.7 / 0.07)); &::before, @@ -182,35 +180,46 @@ STagContainerClose[theme="additional"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-secondary-hover-active, #f4f5f5); + background-color: var(--intergalactic-tag-secondary-bg-hover-active, #f4f5f5); } } STag[theme="additional"], STagContainerClose[theme="additional"] { - border-style: dashed; + 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.137 0.026 175.7 / 0.161)); + border-style: dashed; + + &::before, + &::after { + 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(0.965 0.065 140 / 0.1)); - 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-white-hover-active, oklch(0.986 0.025 140 / 0.203)); + 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"], -STag[theme="additional-invert"], -STagContainerClose[theme="additional-invert"] { - background-color: var(--intergalactic-tag-secondary-white-normal, transparent); - color: var(--intergalactic-tag-secondary-white-text, oklch(0.997 0.004 165.9 / 0.684)); +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, @@ -221,13 +230,27 @@ STagContainerClose[theme="additional-invert"] { &[interactiveView]:hover, &[interactiveView]:active, &[active] { - background-color: var(--intergalactic-tag-secondary-white-hover-active, oklch(0.98 0.036 140 / 0.164)); + 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"] { + 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; + + &::before, + &::after { + 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 { diff --git a/semcore/tooltip/src/style/tooltip.shadow.css b/semcore/tooltip/src/style/tooltip.shadow.css index 6a2e50be7c..0ea8195334 100644 --- a/semcore/tooltip/src/style/tooltip.shadow.css +++ b/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 */ } } diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css index fd0f1bfc37..d5deaf02b4 100644 --- a/semcore/wizard/src/style/wizard.shadow.css +++ b/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 */ } } } diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 8c93dfae0c..553c52c632 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -1523,9 +1523,29 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_primary_DEFAULT}', description: 'Border color of the additional Tag.', }, - tag_primary_bg_hover: { + tag_additional_text: { + value: '#6a6c6a', + description: 'Text color for the additional tag.', + }, + tag_additional_bg_invert_normal: { + value: 'transparent', + description: 'Additional tag on bold or dark backgrounds—minimal fill in the normal state.', + }, + tag_additional_bg_invert_hover_active: { + value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), + description: 'Hover and active states of the additional tag on dark backgrounds.', + }, + tag_additional_text_invert: { + value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY), + description: 'Text color for the additional tag on dark backgrounds.', + }, + tag_additional_border_invert: { + value: '{semanticTokens.colors.border_secondary_invert}', + description: 'Inverted border color of the additional Tag.', + }, + tag_primary_bg_hover_active: { value: '{semanticTokens.colors.bg_primary_neutral_hover}', - description: 'Hover state of the primary Tag background.', + description: 'Hover and active states of the primary Tag background.', }, tag_primary_bg_normal: { value: '{semanticTokens.colors.bg_primary_neutral_DEFAULT}', @@ -1607,17 +1627,17 @@ export const theme: Theme = { value: '#8029ec', description: 'Violet text for the primary violet tag.', }, - tag_primary_white_hover_active: { + tag_primary_bg_invert_hover_active: { value: neutral.opaqueInvAt(L_INV_BG_PRIMARY_HOVER), - description: 'Hover and active (selected) state of the primary white tag.', + description: 'Hover and active states of the primary tag on dark backgrounds.', }, - tag_primary_white_normal: { + tag_primary_bg_invert_normal: { value: neutral.opaqueInvAt(L_INV_BG_PRIMARY), description: 'Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.', }, - tag_primary_white_text: { + tag_primary_text_invert: { value: '#ffffff', - description: 'White text for the primary white tag.', + description: 'Text color for the primary tag on dark backgrounds.', }, tag_primary_yellow_hover_active: { value: '#fcd8b3', @@ -1639,29 +1659,29 @@ export const theme: Theme = { value: '{semanticTokens.colors.border_secondary_invert}', description: 'Inverted border color of the secondary Tag.', }, - tag_secondary_gray_text: { + tag_secondary_text: { value: '#6a6c6a', - description: 'Gray text for the default secondary tag.', + description: 'Text color for the default secondary tag.', }, - tag_secondary_hover_active: { + tag_secondary_bg_hover_active: { value: '#f4f5f5', description: 'Hover and active (selected) states of the background color for the default secondary tag.', }, - tag_secondary_normal: { + tag_secondary_bg_normal: { value: '#ffffff', description: 'Background color for the default secondary tag.', }, - tag_secondary_white_hover_active: { + tag_secondary_bg_invert_hover_active: { value: neutral.opaqueInvAt(L_INV_BG_SECONDARY_HOVER), - description: 'Active state of the secondary white tag.', + description: 'Hover and active states of the secondary tag on dark backgrounds.', }, - tag_secondary_white_normal: { + tag_secondary_bg_invert_normal: { value: 'transparent', description: 'Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.', }, - tag_secondary_white_text: { + tag_secondary_text_invert: { value: neutral.opaqueInvAt(L_INV_TEXT_SECONDARY), - description: 'White text for the secondary white tag.', + description: 'Text color for the secondary tag on dark backgrounds.', }, text_advertising: { value: advertising.at(L_TEXT_PRIMARY), @@ -2899,9 +2919,18 @@ type SemanticColors = { primary: { bg: { normal: Value; - hover: Value; + hover: { + active: Value; + }; + invert: { + normal: Value; + hover: { + active: Value; + }; + }; }; border: Value; + text_invert: Value; gray: { normal: Value; hover: { @@ -2951,32 +2980,25 @@ type SemanticColors = { }; text: Value; }; - white: { - normal: Value; - hover: { - active: Value; - }; - text: Value; - }; }; secondary: { border: { DEFAULT: Value; invert: Value; }; - normal: Value; - hover: { - active: Value; - }; - white: { + text: Value; + text_invert: Value; + bg: { normal: Value; hover: { active: Value; }; - text: Value; - }; - gray: { - text: Value; + invert: { + normal: Value; + hover: { + active: Value; + }; + }; }; }; additional: { @@ -2985,8 +3007,17 @@ type SemanticColors = { hover: { active: Value; }; + invert: { + normal: Value; + hover: { + active: Value; + }; + }; }; border: Value; + border_invert: Value; + text: Value; + text_invert: Value; }; }; chart: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 76ec9de8e9..513991824e 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -2330,13 +2330,17 @@ "name": "--intergalactic-tag-additional-bg-hover-active", "value": "oklch(0.98 0.001 180)", "description": "Hover and active states of the additional Tag background.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-additional-bg-normal", "value": "oklch(1 0 0)", "description": "Background of the additional Tag in its normal state.", - "components": [] + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-additional-border", @@ -2347,9 +2351,49 @@ ] }, { - "name": "--intergalactic-tag-primary-bg-hover", + "name": "--intergalactic-tag-additional-text", + "value": "#6a6c6a", + "description": "Text color for the additional tag.", + "components": [ + "tag" + ] + }, + { + "name": "--intergalactic-tag-additional-bg-invert-normal", + "value": "transparent", + "description": "Additional tag on bold or dark backgrounds—minimal fill in the normal state.", + "components": [ + "tag" + ] + }, + { + "name": "--intergalactic-tag-additional-bg-invert-hover-active", + "value": "oklch(0.98 0.036 140 / 0.164)", + "description": "Hover and active states of the additional tag on dark backgrounds.", + "components": [ + "tag" + ] + }, + { + "name": "--intergalactic-tag-additional-text-invert", + "value": "oklch(0.997 0.004 165.9 / 0.684)", + "description": "Text color for the additional tag on dark backgrounds.", + "components": [ + "tag" + ] + }, + { + "name": "--intergalactic-tag-additional-border-invert", + "value": "oklch(0.995 0.008 147.4 / 0.391)", + "description": "Inverted border color of the additional Tag.", + "components": [ + "tag" + ] + }, + { + "name": "--intergalactic-tag-primary-bg-hover-active", "value": "oklch(0.98 0.001 180)", - "description": "Hover state of the primary Tag background.", + "description": "Hover and active states of the primary Tag background.", "components": [] }, { @@ -2477,15 +2521,15 @@ "components": [] }, { - "name": "--intergalactic-tag-primary-white-hover-active", + "name": "--intergalactic-tag-primary-bg-invert-hover-active", "value": "oklch(0.986 0.025 140 / 0.203)", - "description": "Hover and active (selected) state of the primary white tag.", + "description": "Hover and active states of the primary tag on dark backgrounds.", "components": [ "tag" ] }, { - "name": "--intergalactic-tag-primary-white-normal", + "name": "--intergalactic-tag-primary-bg-invert-normal", "value": "oklch(0.965 0.065 140 / 0.1)", "description": "Primary tag on bold or dark backgrounds—translucent fill for contrast in the normal state.", "components": [ @@ -2493,10 +2537,12 @@ ] }, { - "name": "--intergalactic-tag-primary-white-text", + "name": "--intergalactic-tag-primary-text-invert", "value": "#ffffff", - "description": "White text for the primary white tag.", - "components": [] + "description": "Text color for the primary tag on dark backgrounds.", + "components": [ + "tag" + ] }, { "name": "--intergalactic-tag-primary-yellow-hover-active", @@ -2533,15 +2579,15 @@ ] }, { - "name": "--intergalactic-tag-secondary-gray-text", + "name": "--intergalactic-tag-secondary-text", "value": "#6a6c6a", - "description": "Gray text for the default secondary tag.", + "description": "Text color for the default secondary tag.", "components": [ "tag" ] }, { - "name": "--intergalactic-tag-secondary-hover-active", + "name": "--intergalactic-tag-secondary-bg-hover-active", "value": "#f4f5f5", "description": "Hover and active (selected) states of the background color for the default secondary tag.", "components": [ @@ -2549,7 +2595,7 @@ ] }, { - "name": "--intergalactic-tag-secondary-normal", + "name": "--intergalactic-tag-secondary-bg-normal", "value": "#ffffff", "description": "Background color for the default secondary tag.", "components": [ @@ -2557,15 +2603,15 @@ ] }, { - "name": "--intergalactic-tag-secondary-white-hover-active", + "name": "--intergalactic-tag-secondary-bg-invert-hover-active", "value": "oklch(0.98 0.036 140 / 0.164)", - "description": "Active state of the secondary white tag.", + "description": "Hover and active states of the secondary tag on dark backgrounds.", "components": [ "tag" ] }, { - "name": "--intergalactic-tag-secondary-white-normal", + "name": "--intergalactic-tag-secondary-bg-invert-normal", "value": "transparent", "description": "Secondary/outline tag on bold or dark backgrounds—minimal fill in the normal state.", "components": [ @@ -2573,9 +2619,9 @@ ] }, { - "name": "--intergalactic-tag-secondary-white-text", + "name": "--intergalactic-tag-secondary-text-invert", "value": "oklch(0.997 0.004 165.9 / 0.684)", - "description": "White text for the secondary white tag.", + "description": "Text color for the secondary tag on dark backgrounds.", "components": [ "tag" ] @@ -2809,7 +2855,6 @@ "feature-highlight", "feature-popover", "notice-bubble", - "tag", "tooltip", "wizard" ] From db27fb86e2a1ee48ad8301cda8101c3f01589fca Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 24 Jul 2026 14:44:30 +0200 Subject: [PATCH 4/9] [tag] fix border value --- tools/theme/src/theme.ts | 2 +- website/docs/style/design-tokens/design-tokens.json | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 553c52c632..9cffc23d7f 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -1540,7 +1540,7 @@ export const theme: Theme = { description: 'Text color for the additional tag on dark backgrounds.', }, tag_additional_border_invert: { - value: '{semanticTokens.colors.border_secondary_invert}', + value: '{semanticTokens.colors.border_primary_invert}', description: 'Inverted border color of the additional Tag.', }, tag_primary_bg_hover_active: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 513991824e..3fdfd7e162 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3158,8 +3158,13 @@ "value": "6px", "description": "Medium gap between content elements inside controls.", "components": [ + "base-trigger", "button", - "input" + "dropdown", + "dropdown-menu", + "input", + "pills", + "select" ] }, { From 83b8d3a5f2251e8afab338111b6b609422e9202e Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Fri, 24 Jul 2026 15:38:52 +0200 Subject: [PATCH 5/9] [tag] update border for secondary --- semcore/tag/src/style/tag.shadow.css | 4 ++-- tools/theme/src/colors/index.ts | 1 + tools/theme/src/theme.ts | 6 +++--- .../style/design-tokens/design-tokens.json | 19 +++++++------------ 4 files changed, 13 insertions(+), 17 deletions(-) diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css index 6f464c9c53..9fb1be203d 100644 --- a/semcore/tag/src/style/tag.shadow.css +++ b/semcore/tag/src/style/tag.shadow.css @@ -170,7 +170,7 @@ STag[theme="secondary"], 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.176 0.033 175.7 / 0.07)); + border-color: var(--intergalactic-tag-secondary-border, oklch(0.91 0.002 177.8)); &::before, &::after { @@ -188,7 +188,7 @@ STag[theme="additional"], 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.137 0.026 175.7 / 0.161)); + border-color: var(--intergalactic-tag-additional-border, oklch(0.91 0.002 177.8)); border-style: dashed; &::before, diff --git a/tools/theme/src/colors/index.ts b/tools/theme/src/colors/index.ts index 896f27953b..935b9be967 100644 --- a/tools/theme/src/colors/index.ts +++ b/tools/theme/src/colors/index.ts @@ -229,6 +229,7 @@ export const L_ICON_SECONDARY_HOVER = 0.66; // Delete with minor /** Border primary | ⚠️ APCA 15+ on secondary bg */ export const L_BORDER_PRIMARY = 0.88; // inputs, buttons, table header, tab-line, divider +export const L_BORDER_PRIMARY_DIMMED = 0.91; // tag, divider /** Border secondary */ export const L_BORDER_SECONDARY = 0.95; // notice borders, divider, cell borders, card header /** Border active */ diff --git a/tools/theme/src/theme.ts b/tools/theme/src/theme.ts index 9cffc23d7f..4bf6d8a414 100644 --- a/tools/theme/src/theme.ts +++ b/tools/theme/src/theme.ts @@ -14,7 +14,7 @@ import { L_BG_SECONDARY_ACTIVE, L_BG_SECONDARY_HOVER, L_BG_SELECTED, L_BG_SELECTED_HOVER, L_BG_SKELETON, L_BG_STRONG, L_BORDER_ACTIVE, - L_BORDER_FOCUS, L_BORDER_PRIMARY, L_BORDER_SECONDARY, L_ICON_NON_INTERACTIVE, L_ICON_PRIMARY, + L_BORDER_FOCUS, L_BORDER_PRIMARY, L_BORDER_SECONDARY, L_BORDER_PRIMARY_DIMMED, L_ICON_NON_INTERACTIVE, L_ICON_PRIMARY, L_ICON_PRIMARY_HOVER, L_ICON_SECONDARY, L_ICON_SECONDARY_HOVER, L_INV_BG_BUTTON, L_INV_BG_BUTTON_ACTIVE, L_INV_BG_BUTTON_HOVER, L_INV_BG_LIGHT, L_INV_BG_MEDIUM, L_INV_BG_PRIMARY, @@ -1520,7 +1520,7 @@ export const theme: Theme = { description: 'Background of the additional Tag in its normal state.', }, tag_additional_border: { - value: '{semanticTokens.colors.border_primary_DEFAULT}', + value: neutral.at(L_BORDER_PRIMARY_DIMMED), description: 'Border color of the additional Tag.', }, tag_additional_text: { @@ -1652,7 +1652,7 @@ export const theme: Theme = { description: 'Yellow text for the primary yellow tag.', }, tag_secondary_border_DEFAULT: { - value: '{semanticTokens.colors.border_secondary_DEFAULT}', + value: neutral.at(L_BORDER_PRIMARY_DIMMED), description: 'Border color of the secondary Tag.', }, tag_secondary_border_invert: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 3fdfd7e162..2289503add 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -174,7 +174,10 @@ "name": "--intergalactic-bg-primary-neutral-hover", "value": "oklch(0.98 0.001 180)", "description": "Hover state of the primary background of the interface which contains the main data and information.", - "components": [] + "components": [ + "base-trigger", + "pills" + ] }, { "name": "--intergalactic-bg-primary-success", @@ -2344,7 +2347,7 @@ }, { "name": "--intergalactic-tag-additional-border", - "value": "oklch(0.137 0.026 175.7 / 0.161)", + "value": "oklch(0.91 0.002 177.8)", "description": "Border color of the additional Tag.", "components": [ "tag" @@ -2564,7 +2567,7 @@ }, { "name": "--intergalactic-tag-secondary-border", - "value": "oklch(0.176 0.033 175.7 / 0.07)", + "value": "oklch(0.91 0.002 177.8)", "description": "Border color of the secondary Tag.", "components": [ "tag" @@ -3148,7 +3151,6 @@ "value": "4px", "description": "Small gap between content elements inside controls.", "components": [ - "dropdown-menu", "inline-input", "tag" ] @@ -3158,13 +3160,8 @@ "value": "6px", "description": "Medium gap between content elements inside controls.", "components": [ - "base-trigger", "button", - "dropdown", - "dropdown-menu", - "input", - "pills", - "select" + "input" ] }, { @@ -3173,8 +3170,6 @@ "description": "Large gap between content elements inside controls.", "components": [ "button", - "dropdown", - "select", "tag" ] }, From b72edaf96fd6c31a96363806d5f2cd2198d8d320 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Mon, 27 Jul 2026 09:26:14 +0200 Subject: [PATCH 6/9] [tag] fixed invert and color props --- semcore/tag/src/Tag.tsx | 14 +++++- semcore/tag/src/Tag.type.ts | 16 +++++-- .../tag/advanced/examples/all-tags.tsx | 48 ++++++++----------- 3 files changed, 46 insertions(+), 32 deletions(-) diff --git a/semcore/tag/src/Tag.tsx b/semcore/tag/src/Tag.tsx index 6f36e64f70..dea5edf1ea 100644 --- a/semcore/tag/src/Tag.tsx +++ b/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} diff --git a/semcore/tag/src/Tag.type.ts b/semcore/tag/src/Tag.type.ts index 54932e862e..605fa8232b 100644 --- a/semcore/tag/src/Tag.type.ts +++ b/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'; diff --git a/stories/components/tag/advanced/examples/all-tags.tsx b/stories/components/tag/advanced/examples/all-tags.tsx index bca08319e5..01cf88e796 100644 --- a/stories/components/tag/advanced/examples/all-tags.tsx +++ b/stories/components/tag/advanced/examples/all-tags.tsx @@ -22,34 +22,30 @@ export default function AllTags() { {SIZES.map((size) => ( - - Primary - - - Secondary - - - Disabled - + Primary + Secondary + Disabled ))} {SIZES.map((size) => ( - + Primary interactive - + Secondary interactive - - Additional interactive - + + + Secondary interactive + + ))} {SIZES.map((size) => ( - + Primary invert - + Secondary invert ))} {SIZES.map((size) => ( - + Primary invert interactive - + Secondary invert interactive - - Additional invert interactive - + + + Additional invert interactive + + ))} @@ -101,7 +93,7 @@ export default function AllTags() { {COLORS.map((color) => ( - {color} + {color} ))} From 87c7754b30de533b470806b072501607ed59fbf1 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Mon, 27 Jul 2026 14:00:29 +0200 Subject: [PATCH 7/9] [stories] remove unnecessary story --- .../input-tags/tests/examples/all-sizes.tsx | 37 ------------------- .../input-tags/tests/input-tags.stories.tsx | 6 --- .../style/design-tokens/design-tokens.json | 2 +- 3 files changed, 1 insertion(+), 44 deletions(-) delete mode 100644 stories/components/input-tags/tests/examples/all-sizes.tsx diff --git a/stories/components/input-tags/tests/examples/all-sizes.tsx b/stories/components/input-tags/tests/examples/all-sizes.tsx deleted file mode 100644 index 66dc057ba6..0000000000 --- a/stories/components/input-tags/tests/examples/all-sizes.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Flex } from '@semcore/ui/base-components'; -import InputTags from '@semcore/ui/input-tags'; -import React from 'react'; - -const TAGS = ['Facebook', 'Instagram']; - -export default function AllSizes() { - const [tagsM, setTagsM] = React.useState(TAGS); - const [tagsL, setTagsL] = React.useState(TAGS); - - return ( - - - {tagsM.map((tag) => ( - - {tag} - setTagsM((current) => current.filter((item) => item !== tag))} - /> - - ))} - - - - {tagsL.map((tag) => ( - - {tag} - setTagsL((current) => current.filter((item) => item !== tag))} - /> - - ))} - - - - ); -} diff --git a/stories/components/input-tags/tests/input-tags.stories.tsx b/stories/components/input-tags/tests/input-tags.stories.tsx index 4f3d6a333b..dc7d0dc76b 100644 --- a/stories/components/input-tags/tests/input-tags.stories.tsx +++ b/stories/components/input-tags/tests/input-tags.stories.tsx @@ -1,7 +1,6 @@ import InputTags from '@semcore/ui/input-tags'; import type { Meta, StoryObj } from '@storybook/react-vite'; -import AllSizesExample from './examples/all-sizes'; import EnteringAndEditingTagsExample, { defaultProps as enteringAndEditingTagsProps } from './examples/entering_and_editing_tags'; import TagsWithAddonsExample, { defaultPropsEmail } from './examples/tags-with-addons'; @@ -12,11 +11,6 @@ const meta: Meta = { export default meta; -export const AllSizes: StoryObj = { - name: 'All sizes', - render: AllSizesExample, -}; - export const EnteringAndEditingTags: StoryObj = { render: EnteringAndEditingTagsExample, argTypes: { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 993224538b..76f4eb2349 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -91,7 +91,7 @@ }, { "name": "--intergalactic-badge-bg-invert", - "value": "oklch(0.983 0.03 140 / 0.183)", + "value": "oklch(0.969 0.057 140 / 0.118)", "description": "Background color of the inverted Badge.", "components": [] }, From 007fb1529c03b9cc915805ff632a5779583e4253 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Tue, 28 Jul 2026 10:28:34 +0200 Subject: [PATCH 8/9] [tag] fixed invert for TagContainer --- semcore/tag/src/Tag.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/semcore/tag/src/Tag.tsx b/semcore/tag/src/Tag.tsx index dea5edf1ea..b9e28fdf50 100644 --- a/semcore/tag/src/Tag.tsx +++ b/semcore/tag/src/Tag.tsx @@ -165,6 +165,7 @@ class RootTagContainer extends Component< addonLeft, addonRight, active, + invert, } = this.asProps; const id = outerId || `igc-${uid}-tag`; @@ -180,6 +181,7 @@ class RootTagContainer extends Component< addonLeft, addonRight, active, + invert, }; } @@ -210,7 +212,7 @@ class RootTagContainer extends Component< return { disabled, size, - theme, + 'theme': this.resolvedTheme(), color, 'id': `${id}-clear`, 'aria-labelledby': `${id}-clear ${id}-text`, @@ -219,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; From 9f8ef6d7c230ea9a8e771c25d84ad4079db6ec63 Mon Sep 17 00:00:00 2001 From: Julia Mnizhek Date: Tue, 28 Jul 2026 15:53:48 +0200 Subject: [PATCH 9/9] [input-tags] updated to renamed vars --- semcore/input-tags/src/style/input-tag.shadow.css | 4 ++-- website/docs/style/design-tokens/design-tokens.json | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/semcore/input-tags/src/style/input-tag.shadow.css b/semcore/input-tags/src/style/input-tag.shadow.css index bb2b4daaf8..2cff7a1b7c 100644 --- a/semcore/input-tags/src/style/input-tag.shadow.css +++ b/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-2x, 8px) + var(--intergalactic-spacing-05x, 2px)) 0 var(--intergalactic-spacing-2x, 8px); + padding: 0 calc(var(--intergalactic-spacing-content-padding-small, 8px) + 2px) 0 var(--intergalactic-spacing-content-padding-small, 8px); } 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: 0 calc(var(--intergalactic-spacing-content-padding-small, 8px) + 2px) 0 var(--intergalactic-spacing-content-padding-small, 8px); } SInputTags STag:focus-visible, SInputTags STagContainerClose:focus-visible { diff --git a/website/docs/style/design-tokens/design-tokens.json b/website/docs/style/design-tokens/design-tokens.json index 2360052a86..2952b25452 100644 --- a/website/docs/style/design-tokens/design-tokens.json +++ b/website/docs/style/design-tokens/design-tokens.json @@ -3200,7 +3200,9 @@ "name": "--intergalactic-spacing-content-padding-small", "value": "8px", "description": "Small padding for content inside controls and surfaces.", - "components": [] + "components": [ + "input-tags" + ] }, { "name": "--intergalactic-spacing-content-padding-medium",