Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
5a6c47a
[tag] update Tag and add invert themes to types
j-mnizhek Jul 23, 2026
9871794
[input-tags] update styles and add test story
j-mnizhek Jul 23, 2026
73bde18
[tag] update styles
j-mnizhek Jul 24, 2026
db27fb8
[tag] fix border value
j-mnizhek Jul 24, 2026
83b8d3a
[tag] update border for secondary
j-mnizhek Jul 24, 2026
b72edaf
[tag] fixed invert and color props
ilyabrower Jul 27, 2026
9fc7136
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 27, 2026
87c7754
[stories] remove unnecessary story
j-mnizhek Jul 27, 2026
b510060
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 27, 2026
007fb15
[tag] fixed invert for TagContainer
ilyabrower Jul 28, 2026
5964703
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 28, 2026
9f8ef6d
[input-tags] updated to renamed vars
j-mnizhek Jul 28, 2026
735f4b3
[input-tags] update paddings
j-mnizhek Jul 29, 2026
cff9154
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 31, 2026
8893eae
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 31, 2026
dd71d98
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 31, 2026
4436ff9
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 31, 2026
36757e3
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Jul 31, 2026
9b5671f
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
Valeria-Zimnitskaya Aug 3, 2026
7861634
[chore] update css after build
Valeria-Zimnitskaya Aug 4, 2026
b7fc9f4
[chore] update tag tests and snapshots
Valeria-Zimnitskaya Aug 4, 2026
a49569d
[chore] update tag tests and snapshots
Valeria-Zimnitskaya Aug 4, 2026
45cb5a9
[playground] added invert for tags
ilyabrower Aug 4, 2026
6a7e9bf
[theme] add more vars for content padding
j-mnizhek Aug 4, 2026
fa423ab
[input-tags] update styles
j-mnizhek Aug 4, 2026
e4bda3e
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
Valeria-Zimnitskaya Aug 4, 2026
da27035
[input-tags] change align-items
j-mnizhek Aug 4, 2026
9e92d5d
[tag] update tests and snapshots
Valeria-Zimnitskaya Aug 4, 2026
2dada31
[input-tags] support paddings for XL tag
j-mnizhek Aug 4, 2026
4e4eb70
[input-tags] update xl snapshots
Valeria-Zimnitskaya Aug 5, 2026
1194c43
[playground] fixed type in tags
ilyabrower Aug 5, 2026
13d9182
Merge branch 'UIK-5351/add-more-variables-to-theme' into UIK-5609/inp…
j-mnizhek Aug 6, 2026
3cc3b79
[chore] upadte auto generated files with styles
Valeria-Zimnitskaya Aug 6, 2026
46a9851
[chore] Merge remote-tracking branch 'origin/UIK-5351/add-more-variab…
ilyabrower Aug 7, 2026
196134e
[input-tags] linter fix
ilyabrower Aug 7, 2026
7fbf758
[chore] Merge remote-tracking branch 'origin/UIK-5351/add-more-variab…
ilyabrower Aug 7, 2026
926a2d3
[theme] update Lc level for inverted secondary borders
j-mnizhek Aug 7, 2026
e15417f
[input-tags] fixed email story
ilyabrower Aug 7, 2026
86e6558
[chore] Merge branch 'UIK-5609/input-tags-and-tag-rebranding' of gith…
ilyabrower Aug 7, 2026
b285019
[chore] update snapshots
Valeria-Zimnitskaya Aug 7, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
56 changes: 34 additions & 22 deletions playground/entries/Tag.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import EditM from '@semcore/icon/Edit/m';
import { Flex } from '@semcore/ui/base-components';
import type { NSTag } from '@semcore/ui/tag';
import { TagContainer } from '@semcore/ui/tag';
import React from 'react';
Expand All @@ -16,29 +17,35 @@ type AdditionalJSXProps = {
export type TagJSXProps = JSXProps<NSTag.Props> & AdditionalJSXProps;

function getJSX(props: TagJSXProps) {
const tagProps = props.color
? { theme: props.theme, color: props.color }
: { theme: 'primary' } as const;

return (
<TagContainer
interactive={props.interactive}
theme={props.theme}
size={props.size}
disabled={props.disabled}
{...(props.color && { color: props.color })}
>
<TagContainer.Tag active={props.active}>
{props.addon === 'Circle' && (
<TagContainer.Tag.Circle>
<img src='https://picsum.photos/id/1025/28/28' />
</TagContainer.Tag.Circle>
)}
{props.addon === 'Icon' && (
<TagContainer.Tag.Addon>
<EditM />
</TagContainer.Tag.Addon>
)}
<TagContainer.Tag.Text>Tag text</TagContainer.Tag.Text>
</TagContainer.Tag>
{props.closeIcon && <TagContainer.Close />}
</TagContainer>
<Flex w='100%' py={8} alignItems='center' justifyContent='center' bg={props.invert ? 'black' : 'white'}>
<TagContainer
interactive={props.interactive}
size={props.size}
disabled={props.disabled}
invert={props.invert}
{...tagProps}
>
<TagContainer.Tag active={props.active}>
{props.addon === 'Circle' && (
<TagContainer.Tag.Circle>
<img src='https://picsum.photos/id/1025/28/28' />
</TagContainer.Tag.Circle>
)}
{props.addon === 'Icon' && (
<TagContainer.Tag.Addon>
<EditM />
</TagContainer.Tag.Addon>
)}
<TagContainer.Tag.Text>Tag text</TagContainer.Tag.Text>
</TagContainer.Tag>
{props.closeIcon && <TagContainer.Close />}
</TagContainer>
</Flex>
);
}

Expand Down Expand Up @@ -87,6 +94,11 @@ const entry: PlaygroundEntry<TagJSXProps> = {
value: false,
displayName: 'Active',
},
invert: {
type: 'boolean',
value: false,
displayName: 'Invert',
},
disabled: {
type: 'boolean',
value: false,
Expand Down
2 changes: 1 addition & 1 deletion semcore/badge/src/style/badge.shadow.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ SBadge[theme='default'] {

SBadge[theme='invert'] {
color: var(--intergalactic-badge-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
background-color: var(--intergalactic-badge-bg-invert, oklch(0.983 0.03 140 / 0.183));
background-color: var(--intergalactic-badge-bg-invert, oklch(0.969 0.057 140 / 0.118));
}

SBadge[theme='light'] {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ SHintPopper {
pointer-events: none;

background: var(--intergalactic-tooltip-bg-invert, oklch(0.23 0.01 140));
border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.48 0.004 145.9));
border: 1px solid var(--intergalactic-tooltip-border-invert, oklch(0.35 0.006 140));
color: var(--intergalactic-tooltip-text-invert, oklch(0.999 0.001 180 / 0.949));
padding: var(--intergalactic-spacing-content-padding-xsmall, 4px) var(--intergalactic-spacing-content-padding-small, 8px);
border-radius: var(--intergalactic-rounded-small, 4px);
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions semcore/button/src/component/Button/button.shadow.css
Original file line number Diff line number Diff line change
Expand Up @@ -187,18 +187,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));
}
}

Expand Down Expand Up @@ -241,13 +241,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));
}
}

Expand Down
30 changes: 18 additions & 12 deletions semcore/input-tags/__tests__/input-tags.browser-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,33 +93,39 @@ test.describe(`${TAG.VISUAL} `, () => {

await test.step('Verify inputTagsM styles', async () => {
await testHelpers.verifyCSSForAll(input_tags_m, {
'padding-left': '4px',
'padding-right': '6px',
'padding-top': '2px',
'padding-bottom': '2px',
'padding-left': '12px',
'padding-right': '12px',
});
});

await test.step('Verify inputTagsL styles', async () => {
await testHelpers.verifyCSSForAll(input_tags_l, {
'padding-left': '8px',
'padding-right': '10px',
'padding-top': '4px',
'padding-bottom': '4px',
'padding-left': '12px',
'padding-right': '12px',
});
});

await test.step('Verify InputTags.Tag styles', async () => {
await testHelpers.verifyCSSForAll(locators.tag(page), {
margin: '2px',
'margin-top': '2px',
'margin-right': '2px',
'margin-bottom': '2px',
'margin-left': '0px',
});
});

await test.step('Verify TagContainer.Tag styles', async () => {
const tagContainer = page.locator(`li[data-ui-name="TagContainer.Tag"]`);
await testHelpers.verifyCSSForAll(tagContainer, {
await test.step('Verify InputTags.Tag.Text styles', async () => {
await testHelpers.verifyCSSForAll(locators.inputText(page), {
'padding-left': '4px',
'padding-right': '4px',
'border': '1px',
'padding-right': '2px',
'border-width': '1px',
});
await testHelpers.verifyAttributesForAll(tagContainer, {
tabindex: '-1',
await testHelpers.verifyAttributesForAll(locators.inputText(page), {
tabindex: item.disabled ? '-1' : '0',
});
});

Expand Down
Loading
Loading