Skip to content
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

Theme Builder: Add chat colors #28311

Merged
merged 8 commits into from
Nov 7, 2024
+273 −52
Merged

Theme Builder: Add chat colors #28311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
19f39a6
feat(theme-builder): add chat colors
Strider2342 Nov 6, 2024
8e80fe1
feat(theme-builder): add chat colors to fluent and material theme
Strider2342 Nov 6, 2024
942e257
feat(theme-builder): added additional chat colors
Strider2342 Nov 6, 2024
ad81dba
refactor
EugeniyKiyashko Nov 6, 2024
8d531bc
fix lint errors
EugeniyKiyashko Nov 6, 2024
03b8d1a
Merge branch '24_2-chat-colors-in-theme-builder' of https://github.co…
EugeniyKiyashko Nov 7, 2024
928565d
feat(theme-builder): cr fixes
Strider2342 Nov 7, 2024
f9c4b77
fix(theme-builder): removed apostrophe that was terminating string in…
Strider2342 Nov 7, 2024
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
94 changes: 89 additions & 5 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,109 @@

// adduse

/**
* $name 10. Background color
* $type color
*/
$chat-background-color: $base-bg !default;

/**
* $name 20. Border color
* $type color
*/
$chat-border-color: $base-border-color !default;
$chat-messagebox-border-color: $base-border-color !default;
$chat-messagebox-border-color: $chat-border-color !default;

/**
* $name 30. Avatar text color
* $type color
*/
$chat-avatar-color: $base-text-color !default;

/**
* $name 31. Avatar background color
* $type color
*/
$chat-avatar-background-color: $base-active-bg !default;

/**
* $name 40. Bubble text color
* $type color
*/
$chat-bubble-color-primary: $base-text-color !default;

/**
* $name 41. Bubble background color (your messages)
* $type color
*/
$chat-bubble-background-color-primary: null !default;

/**
* $name 42. Bubble background color (other messages)
* $type color
*/
$chat-bubble-background-color-secondary: $base-border-color !default;

/**
* $name 50. Message caption color
* $type color
*/
$chat-information-color: null !default;

/**
* $name 60. Day header color
* $type color
*/
$chat-messagelist-day-header-color: null !default;

/**
* $name 61. Empty list icon color
* $type color
*/
$chat-messagelist-empty-icon-color: null !default;

/**
* $name 62. Empty list icon background color
* $type color
*/
$chat-messagelist-empty-icon-background-color: null !default;

/**
* $name 63. Empty list message color
* $type color
*/
$chat-messagelist-empty-message-color: $base-text-color !default;

/**
* $name 64. Empty list prompt color
* $type color
*/
$chat-messagelist-empty-prompt-color: null !default;

/**
* $name 70. Error color
* $type color
*/
$chat-alertlist-color: $base-invalid-color !default;

$chat-typingindicator-color: null !default;
/**
* $name 81. Typing indicator background color
* $type color
*/
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: null !default;

/**
* $name 82. Typing indicator central circle color
* $type color
*/
$chat-typingindicator-circle-bg-color-center: null !default;

/**
* $name 83. Typing indicator outer circles color
* $type color
*/
$chat-typingindicator-circle-bg-color: null !default;

@if $mode == "light" {
$chat-information-color: darken($base-bg, 56.08) !default;

Expand All @@ -35,7 +115,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default;
$chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-circle-bg-color: darken($base-bg, 29.16) !default;
$chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;

Expand All @@ -60,7 +139,12 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default;
$chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-circle-bg-color: lighten($base-bg, 33.92) !default;
$chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
}

/**
* $name 80. Typing indicator text color
* $type color
*/
$chat-typingindicator-color: $chat-information-color !default;
111 changes: 91 additions & 20 deletions packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,104 @@

// adduse

/**
* $name 10. Background color
* $type color
*/
$chat-background-color: $base-bg !default;

/**
* $name 20. Border color
* $type color
*/
$chat-border-color: $base-border-color !default;
$chat-messagebox-border-color: $chat-border-color !default;

/**
* $name 30. Avatar text color
* $type color
*/
$chat-avatar-color: null !default;

/**
* $name 31. Avatar background color
* $type color
*/
$chat-avatar-background-color: $base-border-color !default;
$chat-messagebox-border-color: $base-border-color !default;

/**
* $name 40. Bubble text color
* $type color
*/
$chat-bubble-color-primary: null !default;

/**
* $name 41. Bubble background color (your messages)
* $type color
*/
$chat-bubble-background-color-primary: null !default;

/**
* $name 42. Bubble background color (other messages)
* $type color
*/
$chat-bubble-background-color-secondary: null !default;

/**
* $name 50. Message caption color
* $type color
*/
$chat-information-color: null !default;

/**
* $name 60. Day header color
* $type color
*/
$chat-messagelist-day-header-color: null !default;

/**
* $name 61. Empty list icon color
* $type color
*/
$chat-messagelist-empty-icon-color: null !default;

/**
* $name 62. Empty list icon background color
* $type color
*/
$chat-messagelist-empty-icon-background-color: null !default;

/**
* $name 63. Empty list message color
* $type color
*/
$chat-messagelist-empty-message-color: null !default;

/**
* $name 64. Empty list prompt color
* $type color
*/
$chat-messagelist-empty-prompt-color: null !default;

/**
* $name 70. Error color
* $type color
*/
$chat-alertlist-color: $base-invalid-color !default;

$chat-typingindicator-color: null !default;
$chat-typingindicator-bubble-bg-color: null !default;
$chat-typingindicator-circle-bg-color: null !default;
/**
* $name 82. Typing indicator central circle color
* $type color
*/
$chat-typingindicator-circle-bg-color-center: null !default;


/**
* $name 83. Typing indicator outer circles color
* $type color
*/
$chat-typingindicator-circle-bg-color: null !default;

@if $color == "light" {
$chat-avatar-color: $base-text-color !default;
$chat-bubble-color-primary: $base-text-color !default;
Expand All @@ -40,8 +115,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default;
$chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
$chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
}
Expand All @@ -59,8 +132,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
$chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
$chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
}
Expand All @@ -78,8 +149,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: $base-label-color !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
$chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
}
Expand All @@ -97,8 +166,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: $base-text-color !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: $base-inverted-bg !default;
$chat-typingindicator-circle-bg-color-center: $base-inverted-bg !default;
}
Expand All @@ -116,8 +183,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: $base-label-color !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
$chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
}
Expand All @@ -135,8 +200,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default;
$chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: lighten($base-bg, 32.55) !default;
$chat-typingindicator-circle-bg-color-center: lighten($base-bg, 41.07) !default;
}
Expand All @@ -153,8 +216,6 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: $base-label-color !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
$chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
}
Expand All @@ -172,8 +233,18 @@ $chat-typingindicator-circle-bg-color-center: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: $base-label-color !default;

$chat-typingindicator-color: $chat-information-color !default;
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
$chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
$chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
}

/**
* $name 80. Typing indicator text color
* $type color
*/
$chat-typingindicator-color: $chat-information-color !default;

/**
* $name 81. Typing indicator background color
* $type color
*/
$chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
Loading
Loading