Skip to content

fix: drop unused/outdated CSS variables #3128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arnautov-anton merged 7 commits into from
Apr 17, 2026
Merged

fix: drop unused/outdated CSS variables #3128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2dd1629
Reviewed variable removals
arnautov-anton Apr 16, 2026
0418a31
Defined & referenced once within the same file
arnautov-anton Apr 16, 2026
167b90f
Poll-related cleanup
arnautov-anton Apr 16, 2026
20f18cb
Lint fixes
arnautov-anton Apr 16, 2026
9bce36b
Center stuff
arnautov-anton Apr 17, 2026
938411d
Transform same-file CSS variables use to SCSS variables
arnautov-anton Apr 17, 2026
597bc52
Add variable namespacing
arnautov-anton Apr 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/AIStateIndicator/styling/AIStateIndicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.str-chat__ai-state-indicator-container {
padding: 0 8px;
background-color: var(--background-core-surface);
background-color: var(--str-chat__background-core-surface-default);
}

.str-chat__ai-state-indicator-text {
color: var(--text-primary);
color: var(--str-chat__text-primary);
}
154 changes: 33 additions & 121 deletions src/components/Attachment/styling/Attachment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,108 +2,7 @@

.str-chat {
/* The margin applied to every attachment in the attachment list */
--str-chat__attachment-margin: var(--spacing-xs);
/* The border radius used for the borders of the component */
--str-chat__attachment-list-border-radius: 0;

/* The text/icon color of the component */
--str-chat__attachment-list-color: var(--text-primary);

/* The background color of the component */
--str-chat__attachment-list-background-color: transparent;

/* Top border of the component */
--str-chat__attachment-list-border-block-start: none;

/* Bottom border of the component */
--str-chat__attachment-list-border-block-end: none;

/* Left (right in RTL layout) border of the component */
--str-chat__attachment-list-border-inline-start: none;

/* Right (left in RTL layout) border of the component */
--str-chat__attachment-list-border-inline-end: none;

/* Box shadow applied to the component */
--str-chat__attachment-list-box-shadow: none;

/* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-border-radius: calc(
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
);

/* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-color: var(--text-primary);

/* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-background-color: transparent;

/* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-border-block-start: none;

/* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-border-block-end: none;

/* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-border-inline-start: none;

/* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-border-inline-end: none;

/* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
--str-chat__image-attachment-box-shadow: none;

/* The border radius used for the borders of image gallery attachments */
--str-chat__image-gallery-attachment-border-radius: calc(
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
);

/* The text/icon color of image gallery attachments */
--str-chat__image-gallery-attachment-color: var(--text-primary);

/* The background color of image gallery attachments */
--str-chat__image-gallery-attachment-background-color: transparent;

/* Top border of image gallery attachments */
--str-chat__image-gallery-attachment-border-block-start: none;

/* Bottom border of image gallery attachments */
--str-chat__image-gallery-attachment-border-block-end: none;

/* Left (right in RTL layout) border of image gallery attachments */
--str-chat__image-gallery-attachment-border-inline-start: none;

/* Right (left in RTL layout) border of image gallery attachments */
--str-chat__image-gallery-attachment-border-inline-end: none;

/* Box shadow applied to image gallery attachments */
--str-chat__image-gallery-attachment-box-shadow: none;

/* The border radius used for the borders of file attachments */
--str-chat__file-attachment-border-radius: calc(
var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
);

/* The text/icon color of file attachments */
--str-chat__file-attachment-color: var(--text-primary);

/* The background color of file attachments */
--str-chat__file-attachment-background-color: transparent;

/* Top border of file attachments */
--str-chat__file-attachment-border-block-start: none;

/* Bottom border of file attachments */
--str-chat__file-attachment-border-block-end: none;

/* Left (right in RTL layout) border of file attachments */
--str-chat__file-attachment-border-inline-start: none;

/* Right (left in RTL layout) border of file attachments */
--str-chat__file-attachment-border-inline-end: none;

/* Box shadow applied to file attachments */
--str-chat__file-attachment-box-shadow: none;
--str-chat__attachment-margin: var(--str-chat__spacing-xs);
}

.str-chat__attachment-list {
Expand All @@ -118,20 +17,27 @@
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
gap: var(--str-chat__spacing-xs);
min-width: 0;

@include utils.component-layer-overrides('attachment-list');
background: transparent;
color: var(--str-chat__text-primary);

.str-chat__message-attachment--image,
.str-chat__message-attachment--video {
@include utils.component-layer-overrides('image-attachment');
background: transparent;
color: var(--str-chat__text-primary);
border-radius: calc(
var(--str-chat__message-bubble-radius-group-bottom) - var(
--str-chat__attachment-margin
)
);
}

.str-chat__message-attachment {
overflow: hidden;
background-color: var(--chat-bg-attachment);
border-radius: var(--message-bubble-radius-attachment);
border-radius: var(--str-chat__message-bubble-radius-attachment);

// Many classes to increase selector specificity
.str-chat__button-play.str-chat__button--secondary.str-chat__button--outline {
Expand Down Expand Up @@ -232,7 +138,7 @@

.str-chat__gallery .str-chat__message-attachment--svg-image,
.str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
$padding: var(--space-24);
$padding: var(--str-chat__space-24);
padding: $padding;

img {
Expand All @@ -246,8 +152,8 @@
.str-chat__message-attachment-file--item,
.str-chat__message-attachment-audio-widget {
@include utils.flex-row-center;
padding: var(--spacing-sm);
column-gap: var(--spacing-sm);
padding: var(--str-chat__spacing-sm);
column-gap: var(--str-chat__spacing-sm);

.str-chat__message-attachment-file--item__info,
.str-chat__message-attachment-audio-widget--text {
Expand All @@ -256,19 +162,19 @@
flex-direction: column;
align-items: flex-start;
justify-content: center;
row-gap: var(--space-2);
row-gap: var(--str-chat__space-2);
min-width: 0;
line-height: var(--typography-line-height-tight);
line-height: var(--str-chat__typography-line-height-tight);

.str-chat__message-attachment-file--item__first-row,
.str-chat__message-attachment-audio-widget--text-first-row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: var(--space-8);
font-weight: var(--typography-font-weight-semi-bold);
font-size: var(--typography-font-size-sm);
column-gap: var(--str-chat__space-8);
font-weight: var(--str-chat__typography-font-weight-semi-bold);
font-size: var(--str-chat__typography-font-size-sm);

.str-chat__message-attachment-file--item__name,
.str-chat__message-attachment-audio-widget--title {
Expand All @@ -278,20 +184,26 @@
}

.str-chat__message-attachment-file--item__data {
font-size: var(--typography-font-size-xs);
font-size: var(--str-chat__typography-font-size-xs);
}
}
}

.str-chat__message-attachment-file--item {
@include utils.component-layer-overrides('file-attachment');
background: transparent;
color: var(--str-chat__text-primary);
border-radius: calc(
var(--str-chat__message-bubble-radius-group-bottom) - var(
--str-chat__attachment-margin
)
);
}

.str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
}

.str-chat__message-attachment-download-icon {
--str-chat-icon-height: var(--size-16);
--str-chat-icon-height: var(--str-chat__size-16);
}
}

Expand All @@ -310,7 +222,7 @@

.str-chat__message-bubble {
border: 1px solid var(--chat-border);
box-shadow: var(--background-core-elevation-0);
box-shadow: var(--str-chat__background-core-elevation-0);
}

.str-chat__message-attachment {
Expand All @@ -329,14 +241,14 @@
.str-chat__message--other {
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
.str-chat__message-attachment {
border-end-start-radius: var(--message-bubble-radius-tail);
border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
}
}

.str-chat__message--me {
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
.str-chat__message-attachment {
border-end-end-radius: var(--message-bubble-radius-tail);
border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
}
}
}
Expand All @@ -345,7 +257,7 @@
.str-chat__li--middle {
&.str-chat__message--has-single-attachment.str-chat__message--has-no-text
.str-chat__message-attachment {
border-radius: var(--message-bubble-radius-group-middle);
border-radius: var(--str-chat__message-bubble-radius-group-middle);
}
}

Expand Down
77 changes: 11 additions & 66 deletions src/components/Attachment/styling/AttachmentActions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,87 +1,32 @@
@use '../../../styling/utils';

.str-chat {
/* The border radius used for attachment actions */
--str-chat__attachment-actions-border-radius: 0;

/* The text/icon color of attachment actions */
--str-chat__attachment-actions-color: var(--button-secondary-text);

/* The background color of attachment actions */
--str-chat__attachment-actions-background-color: transparent;

/* Top border of attachment actions */
--str-chat__attachment-actions-border-block-start: none;

/* Bottom border of attachment actions */
--str-chat__attachment-actions-border-block-end: none;

/* Left (right in RTL layout) border of attachment actions */
--str-chat__attachment-actions-border-inline-start: none;

/* Right (left in RTL layout) border of attachment actions */
--str-chat__attachment-actions-border-inline-end: none;

/* Box shadow applied to attachment actions */
--str-chat__attachment-actions-box-shadow: none;

/* The border radius used for an attachment action */
--str-chat__attachment-action-border-radius: 0;

/* The text/icon color of an attachment action */
--str-chat__attachment-action-color: var(--button-secondary-text);

/* The background color of an attachment action */
--str-chat__attachment-action-background-color: transparent;

/* Top border of an attachment action */
--str-chat__attachment-action-border-block-start: none;

/* Bottom border of an attachment action */
--str-chat__attachment-action-border-block-end: none;

/* Left (right in RTL layout) border of an attachment action */
--str-chat__attachment-action-border-inline-start: none;

/* Right (left in RTL layout) border of an attachment action */
--str-chat__attachment-action-border-inline-end: none;

/* Box shadow applied to an attachment action */
--str-chat__attachment-action-box-shadow: none;

/* The text/icon color of an attachment action while in pressed state */
--str-chat__attachment-action-active-color: var(--accent-primary);

/* The text/icon color of an attachment action while in pressed state */
--str-chat__attachment-action-focus-color: var(--accent-primary);
}

.str-chat__message-attachment-actions {
@include utils.component-layer-overrides('attachment-actions');
background: transparent;
color: var(--str-chat__button-secondary-text);

.str-chat__message-attachment-actions-form {
display: flex;
justify-content: stretch;
height: 48px;

.str-chat__message-attachment-actions-button {
@include utils.component-layer-overrides('attachment-action');
background: transparent;
color: var(--str-chat__button-secondary-text);
width: 100%;
padding: var(--button-padding-y-sm) var(--button-padding-x-with-label-sm);
padding: var(--str-chat__button-padding-y-sm)
var(--str-chat__button-padding-x-with-label-sm);
white-space: nowrap;
border-collapse: collapse;

font-size: var(--typography-font-size-md);
font-weight: var(--typography-font-weight-semi-bold);
line-height: var(--typography-line-height-normal);
font-size: var(--str-chat__typography-font-size-md);
font-weight: var(--str-chat__typography-font-weight-semi-bold);
line-height: var(--str-chat__typography-line-height-normal);

&.str-chat__button {
&:active {
color: var(--str-chat__attachment-action-active-color);
color: var(--str-chat__accent-primary);
}

&:focus-visible {
color: var(--str-chat__attachment-action-focus-color);
color: var(--str-chat__accent-primary);
outline: none;
}
}
Expand Down
Loading
Loading