fix:#53 updated toast colors

This commit is contained in:
Elmar Kresse
2024-09-07 11:00:42 +02:00
parent ec7ec6bcca
commit 905f49db9f

View File

@ -1,50 +1,47 @@
$colors: (
"blue": #004699,
"green": #00964e,
"yellow": #ffed00,
"cyan": #009ee3,
"pink": #e5007d,
"indigo": #6366f1,
"teal": #14b8a6,
"orange": #f97316,
"bluegray": #64748b,
"purple": #a855f7,
"red": #e53009,
"primary": $primaryColor,
"htwk-yellow": #ffed00,
"htwk-yellow-24": rgba(255, 237, 0, 0.24),
"htwk-yellow-16": rgba(255, 237, 0, 0.16),
"htwk-yellow-01": rgba(255, 237, 0, 0.1),
"htwk-magenta": #e5007d,
"htwk-rot": #e53009,
"htwk-gruen": #00964e,
"htwk-cyan": #009ee3,
"htwk-blau": #004699,
"htwk-silbergrau": #bec3c6,
"htwk-silbergrau-80": #cbd3d1,
"htwk-silbergrau-60": #d8dedc,
"htwk-silbergrau-40": #e5e9e8,
"htwk-grau-140": #1b2022,
"htwk-grau-120": #242b2d,
"htwk-grau": #2e3639,
"htwk-grau-80": #575e60,
"htwk-grau-60": #818688,
"htwk-grau-40": #abaeaf,
"htwk-dunkelblau": #022541,
"htwk-dunkelblau-80": #345067,
"htwk-dunkelblau-60": #677c8d,
"htwk-dunkelblau-40": #99a7b3,
"htwk-schwarz": #000000,
"blue": #004699,
"green": #00964e,
"yellow": #ffed00,
"cyan": #009ee3,
"pink": #e5007d,
"indigo": #6366f1,
"teal": #14b8a6,
"orange": #f97316,
"bluegray": #64748b,
"purple": #a855f7,
"red": #e53009,
"primary": $primaryColor,
"htwk-yellow": #ffed00,
"htwk-yellow-24": rgba(255, 237, 0, 0.24),
"htwk-yellow-16": rgba(255, 237, 0, 0.16),
"htwk-yellow-01": rgba(255, 237, 0, 0.1),
"htwk-magenta": #e5007d,
"htwk-rot": #e53009,
"htwk-gruen": #00964e,
"htwk-cyan": #009ee3,
"htwk-blau": #004699,
"htwk-silbergrau": #bec3c6,
"htwk-silbergrau-80": #cbd3d1,
"htwk-silbergrau-60": #d8dedc,
"htwk-silbergrau-40": #e5e9e8,
"htwk-grau-140": #1b2022,
"htwk-grau-120": #242b2d,
"htwk-grau": #2e3639,
"htwk-grau-80": #575e60,
"htwk-grau-60": #818688,
"htwk-grau-40": #abaeaf,
"htwk-dunkelblau": #022541,
"htwk-dunkelblau-80": #345067,
"htwk-dunkelblau-60": #677c8d,
"htwk-dunkelblau-40": #99a7b3,
"htwk-schwarz": #000000,
);
//shades
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
$shade500: #6b7280 !default;
$shade600: map-get(
$colors,
"htwk-grau-140"
) !default; //input bg, border, divider
$shade600: map-get($colors, "htwk-grau-140") !default; //input bg, border, divider
$shade700: map-get($colors, "htwk-grau") !default; //menu bg
$shade800: map-get($colors, "htwk-grau") !default; //elevated surface
$shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
@ -52,32 +49,15 @@ $shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
$hoverBg: rgba(255, 255, 255, 0.03) !default;
//global
$fontFamily:
"Source Sans Pro",
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol !default;
$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
$fontSize: 1rem !default;
$fontWeight: normal !default;
$textColor: $shade000 !default;
$textSecondaryColor: $shade100 !default;
$borderRadius: 6px !default;
$transitionDuration: 0.2s !default;
$formElementTransition:
background-color $transitionDuration,
color $transitionDuration,
border-color $transitionDuration,
box-shadow $transitionDuration !default;
$actionIconTransition:
background-color $transitionDuration,
color $transitionDuration,
box-shadow $transitionDuration !default;
$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
$listItemTransition: box-shadow $transitionDuration !default;
$primeIconFontSize: 1rem !default;
$divider: 1px solid $shade600 !default;
@ -155,10 +135,8 @@ $inputListHeaderBorder: 1px solid $shade600 !default;
$inputOverlayBg: $inputListBg !default;
$inputOverlayHeaderBg: $inputListHeaderBg !default;
$inputOverlayBorder: 1px solid $shade600 !default;
$inputOverlayShadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
//password
$passwordMeterBg: $shade600 !default;
@ -179,10 +157,8 @@ $buttonHoverBorderColor: $primaryLightColor !default;
$buttonActiveBg: $primaryLighterColor !default;
$buttonTextActiveColor: $primaryTextColor !default;
$buttonActiveBorderColor: $primaryLighterColor !default;
$raisedButtonShadow:
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$roundedButtonBorderRadius: 2rem !default;
$textButtonHoverBgOpacity: 0.04 !default;
@ -202,19 +178,18 @@ $secondaryButtonActiveBg: #e2e8f0 !default;
$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
$secondaryButtonActiveBorderColor: #e2e8f0 !default;
$secondaryButtonFocusShadow: 0 0 0 1px
scale-color($secondaryButtonBg, $lightness: 30%) !default;
scale-color($secondaryButtonBg, $lightness: 30%) !default;
$infoButtonBg: map-get($colors, "htwk-blau") !default;
$infoButtonTextColor: #b1dafa !default;
$infoButtonBorder: 1px solid map-get($colors, "htwk-blau") !default;
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: 30%) !default;
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: 30%) !default;
$infoButtonTextHoverColor: $infoButtonTextColor !default;
$infoButtonHoverBorderColor: map-get($colors, "htwk-cyan") !default;
$infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
$infoButtonTextActiveColor: $infoButtonTextColor !default;
$infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
$infoButtonFocusShadow: 0 0 0 1px
scale-color($infoButtonHoverBg, $lightness: 30%) !default;
$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonHoverBg, $lightness: 30%) !default;
$successButtonBg: map-get($colors, "htwk-gruen") !default;
$successButtonTextColor: #052e16 !default;
@ -226,25 +201,19 @@ $successButtonActiveBg: #bbf7d0 !default;
$successButtonTextActiveColor: $successButtonTextColor !default;
$successButtonActiveBorderColor: #bbf7d0 !default;
$successButtonFocusShadow: 0 0 0 1px
scale-color($successButtonBg, $lightness: 30%) !default;
scale-color($successButtonBg, $lightness: 30%) !default;
$warningButtonBg: map-get($colors, "htwk-yellow") !default;
$warningButtonTextColor: #493c08 !default;
$warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonTextHoverColor: $warningButtonTextColor !default;
$warningButtonHoverBorderColor: scale-color(
$warningButtonBg,
$lightness: 10%
) !default;
$warningButtonHoverBorderColor: scale-color($warningButtonBg, $lightness: 10%) !default;
$warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonTextActiveColor: $warningButtonTextColor !default;
$warningButtonActiveBorderColor: scale-color(
$warningButtonBg,
$lightness: 30%
) !default;
$warningButtonActiveBorderColor: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonFocusShadow: 0 0 0 1px
scale-color($warningButtonBg, $lightness: 30%) !default;
scale-color($warningButtonBg, $lightness: 30%) !default;
$helpButtonBg: #c084fc !default;
$helpButtonTextColor: #3b0764 !default;
@ -267,7 +236,7 @@ $dangerButtonActiveBg: #fecaca !default;
$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
$dangerButtonActiveBorderColor: #fecaca !default;
$dangerButtonFocusShadow: 0 0 0 1px
scale-color($dangerButtonBg, $lightness: 30%) !default;
scale-color($dangerButtonBg, $lightness: 30%) !default;
$contrastButtonBg: #ffffff !default;
$contrastButtonTextColor: $shade900 !default;
@ -509,10 +478,8 @@ $cardSubTitleFontWeight: 100 !default;
$cardSubTitleColor: $shade100 !default;
$cardContentPadding: 1.25rem 0 !default;
$cardFooterPadding: 1.25rem 0 0 0 !default;
$cardShadow:
0 2px 1px -1px rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
//editor
$editorToolbarBg: $panelHeaderBg !default;
@ -649,21 +616,21 @@ $toastTitleFontWeight: 0 !default;
$toastDetailMargin: $inlineSpacing 0 0 0 !default;
//severities
$infoMessageBg: rgba(59, 130, 246, 0.2) !default;
$infoMessageBg: rgba(59, 130, 246, 0.7) !default;
$infoMessageBorder: solid #3b82f6 !default;
$infoMessageTextColor: #93c5fd !default;
$infoMessageTextColor: #b9d7ff !default;
$infoMessageIconColor: #93c5fd !default;
$successMessageBg: rgba(16, 185, 129, 0.2) !default;
$successMessageBg: rgba(16, 185, 129, 0.7) !default;
$successMessageBorder: solid #10b981 !default;
$successMessageTextColor: #6ee7b7 !default;
$successMessageTextColor: #8aecc6 !default;
$successMessageIconColor: #6ee7b7 !default;
$warningMessageBg: rgba(234, 179, 8, 0.2) !default;
$warningMessageBg: rgba(234, 179, 8, 0.7) !default;
$warningMessageBorder: solid #eab308 !default;
$warningMessageTextColor: #fde047 !default;
$warningMessageTextColor: #ffea84 !default;
$warningMessageIconColor: #fde047 !default;
$errorMessageBg: rgba(239, 68, 68, 0.2) !default;
$errorMessageBg: rgba(239, 68, 68, 0.7) !default;
$errorMessageBorder: solid #ef4444 !default;
$errorMessageTextColor: #fca5a5 !default;
$errorMessageTextColor: #ffe9e9 !default;
$errorMessageIconColor: #fca5a5 !default;
$secondaryMessageBg: $secondaryButtonBg !default;
$secondaryMessageBorder: solid $secondaryButtonBg !default;
@ -677,10 +644,8 @@ $contrastMessageIconColor: $contrastButtonTextColor !default;
//overlays
$overlayContentBorder: 1px solid $shade600 !default;
$overlayContentBg: $panelContentBg !default;
$overlayContainerShadow:
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
//dialog
$dialogHeaderBg: $shade800 !default;
@ -754,10 +719,8 @@ $submenuHeaderBorderRadius: 0 !default;
$submenuHeaderFontWeight: 0 !default;
$overlayMenuBg: $menuBg !default;
$overlayMenuBorder: 1px solid $shade600 !default;
$overlayMenuShadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$verticalMenuPadding: 0.25rem 0 !default;
$menuSeparatorMargin: 0.25rem 0 !default;
@ -924,23 +887,10 @@ $imagePreviewActionIconFontSize: 1.5rem !default;
$imagePreviewActionIconBorderRadius: 50% !default;
:root {
font-family:
"Twemoji Country Flags",
"Source Sans Pro",
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji,
Segoe UI Symbol;
font-family: "Twemoji Country Flags", "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
font-variation-settings: normal;
--font-family: "Twemoji Country Flags", "Source Sans Pro", -apple-system,
BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol;
--font-family: "Twemoji Country Flags", "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
--surface-a: #{$shade800};
--surface-b: #{$shade900};