Skip to content

feat(chat): dark schemas #468

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
merged 4 commits into from
Sep 17, 2025
Merged

feat(chat): dark schemas #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
387618e
feat(chat): dark schemas
SisIvanova Sep 15, 2025
dfe62b2
Merge branch 'master' into sivanova/chat-dark-schemas
simeonoff Sep 17, 2025
fcb8d4f
Merge branch 'master' into sivanova/chat-dark-schemas
simeonoff Sep 17, 2025
a42ca0e
Merge branch 'master' into sivanova/chat-dark-schemas
simeonoff Sep 17, 2025
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
27 changes: 27 additions & 0 deletions sass/themes/schemas/components/dark/_chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,32 @@
/// @access public
////

/// /// Generates a base dark chat schema.
/// @type {Map}
/// @prop {Map} chat-input-border [color: ('gray', 200)] - The border color of the chat input area.
/// @prop {Map} code-border [color: ('gray', 200)] - The border color of the code snippets in the chat component.
$dark-base-chat: (
chat-input-border: (
color: (
'gray',
200,
),
),
code-border: (
color: (
'gray',
200,
),
),
);

/// Generates a dark material chat schema.
/// @type {Map}
/// @requires $material-chat
/// @requires $dark-base-chat
$dark-material-chat: extend(
$material-chat,
$dark-base-chat,
(
_meta: (
theme: 'material',
Expand All @@ -23,8 +44,10 @@ $dark-material-chat: extend(
/// Generates a dark fluent chat schema.
/// @type {Map}
/// @requires $fluent-chat
/// @requires $dark-base-chat
$dark-fluent-chat: extend(
$fluent-chat,
$dark-base-chat,
(
_meta: (
theme: 'fluent',
Expand All @@ -36,8 +59,10 @@ $dark-fluent-chat: extend(
/// Generates a dark bootstrap chat schema.
/// @type {Map}
/// @requires $bootstrap-chat
/// @requires $dark-base-chat
$dark-bootstrap-chat: extend(
$bootstrap-chat,
$dark-base-chat,
(
_meta: (
theme: 'bootstrap',
Expand All @@ -49,8 +74,10 @@ $dark-bootstrap-chat: extend(
/// Generates a dark indigo chat schema.
/// @type {Map}
/// @requires $indigo-chat
/// @requires $dark-base-chat
$dark-indigo-chat: extend(
$indigo-chat,
$dark-base-chat,
(
_meta: (
theme: 'indigo',
Expand Down
28 changes: 28 additions & 0 deletions sass/themes/schemas/components/light/_chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
/// @prop {Map} image-attachment-icon [color: ('gray', 900)] - The color of the message attachment icon.
/// @prop {Map} chat-input-border [color: ('gray', 400)] - The border color of the chat input area.
/// @prop {Map} progress-indicator-color [color: ('secondary', 500)] - The color of the progress indicator in the chat component.
/// @prop {Map} code-background [color: ('gray', 50)] - The background color of the code snippets in the chat component.
/// @prop {Map} code-border [color: ('gray', 300)] - The border color of the code snippets in the chat component.
$light-chat: (
background: (
color: (
Expand Down Expand Up @@ -114,6 +116,18 @@ $light-chat: (
500,
),
),
code-background: (
color: (
'gray',
50,
),
),
code-border: (
color: (
'gray',
300,
),
),
);

/// Generates a light material chat schema.
Expand Down Expand Up @@ -167,6 +181,7 @@ $fluent-chat: extend(
/// @type {Map}
/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
/// @prop {Map} header-border [color: ('gray', 300)] - The color used for the chat header border.
/// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
/// @requires {Map} $light-chat
$bootstrap-chat: extend(
$light-chat,
Expand All @@ -183,6 +198,12 @@ $bootstrap-chat: extend(
300,
),
),
code-border: (
color: (
'gray',
400,
),
),
_meta: (
theme: 'bootstrap',
variant: 'light',
Expand All @@ -198,6 +219,7 @@ $bootstrap-chat: extend(
/// @prop {Map} message-actions-color [color: ('gray', 600)] - The icon color of the chat message actions.
/// @prop {Map} progress-indicator-color [color: ('info', 500)] - The color of the progress indicator in the chat component.
/// @prop {Map} image-attachment-icon [color: ('info', 500)] - The color of the message attachment icon.
/// @prop {Map} code-border [color: ('gray', 400)] - The border color of the code snippets in the chat component.
/// @requires {Map} $light-chat
$indigo-chat: extend(
$light-chat,
Expand Down Expand Up @@ -238,6 +260,12 @@ $indigo-chat: extend(
500,
),
),
code-border: (
color: (
'gray',
400,
),
),
_meta: (
theme: 'indigo',
variant: 'light',
Expand Down