feat:#47 finished theme update

This commit is contained in:
Elmar Kresse
2024-03-31 23:03:57 +02:00
parent 8ebb1c4d36
commit 396cb59ed2
15 changed files with 568 additions and 9968 deletions

View File

@@ -1,16 +1,41 @@
$colors: (
"blue": #3B82F6,
"green": #22C55E,
"yellow": #EAB308,
"cyan": #06B6D4,
"pink": #EC4899,
"indigo": #6366F1,
"teal": #14B8A6,
"orange": #F97316,
"bluegray": #64748B,
"purple": #A855F7,
"red": #FF3D32,
"primary": $primaryColor
"blue": #004699,
"green": #00964e,
"yellow": #ffed00,
"cyan": #009ee3,
"pink": #e5007d,
"indigo": #6366f1,
"teal": #14b8a6,
"orange": #f97316,
"bluegray": #64748b,
"purple": #a855f7,
"red": #e53009,
"primary": $primaryColor,
"primary-24": rgba($primaryColor, 0.24),
"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,
);
//reused color variables
@@ -26,7 +51,7 @@ $shade800:#374151 !default; //unused
$shade900:#1f2937 !default; //unused
//global
$fontFamily:'Inter var', sans-serif !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:$shade700 !default;
@@ -42,7 +67,7 @@ $inlineSpacing:.5rem !default;
$disabledOpacity:.6 !default;
$maskBg:rgba(0, 0, 0, 0.4) !default;
$loadingIconFontSize:2rem !default;
$errorColor:#e24c4c !default;
$errorColor: map-get($colors, "htwk-rot") !default;
//scale
$scaleSM:0.875 !default;
@@ -155,16 +180,16 @@ $secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
$secondaryButtonActiveBorderColor:#334155 !default;
$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
$infoButtonBg:#0ea5e9 !default;
$infoButtonBg: map-get($colors, "primary") !default;
$infoButtonTextColor:#ffffff !default;
$infoButtonBorder:1px solid #0ea5e9 !default;
$infoButtonHoverBg:#0284c7 !default;
$infoButtonBorder:1px solid map-get($colors, "primary") !default;
$infoButtonHoverBg: #0257c7 !default;
$infoButtonTextHoverColor:$infoButtonTextColor !default;
$infoButtonHoverBorderColor:#0284c7 !default;
$infoButtonActiveBg:#0369a1 !default;
$infoButtonHoverBorderColor:#rgba(map-get($colors, "primary"), .8) !default;
$infoButtonActiveBg:rgba(map-get($colors, "primary"), .8) !default;
$infoButtonTextActiveColor:$infoButtonTextColor !default;
$infoButtonActiveBorderColor:#0369a1 !default;
$infoButtonFocusShadow:0 0 0 0.2rem #BFDBFE !default;
$infoButtonActiveBorderColor:rgba(map-get($colors, "primary"), .9) !default;
$infoButtonFocusShadow:0 0 0 0.2rem rgba(map-get($colors, "primary"), .7) !default;
$successButtonBg:#22C55E !default;
$successButtonTextColor:#ffffff !default;
@@ -316,7 +341,7 @@ $calendarHeaderBg:$shade000 !default;
$calendarInlineHeaderBg:$calendarBg !default;
$calendarHeaderBorder:1px solid $shade300 !default;
$calendarHeaderTextColor:$shade700 !default;
$calendarHeaderFontWeight:600 !default;
$calendarHeaderFontWeight:100 !default;
$calendarHeaderCellPadding:.5rem !default;
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
@@ -358,7 +383,7 @@ $panelHeaderBorderColor:$shade300 !default;
$panelHeaderBorder:1px solid $shade300 !default;
$panelHeaderBg:$shade100 !default;
$panelHeaderTextColor:$shade800 !default;
$panelHeaderFontWeight:700 !default;
$panelHeaderFontWeight:100 !default;
$panelHeaderPadding:1.25rem !default;
$panelToggleableHeaderPadding:.75rem 1.25rem !default;
@@ -445,8 +470,8 @@ $scrollPanelTrackBg:$shade100 !default;
//card
$cardBodyPadding:1.25rem !default;
$cardTitleFontSize:1.5rem !default;
$cardTitleFontWeight:700 !default;
$cardSubTitleFontWeight:400 !default;
$cardTitleFontWeight: 0 !default;
$cardSubTitleFontWeight:100 !default;
$cardSubTitleColor:$shade600 !default;
$cardContentPadding:1.25rem 0 !default;
$cardFooterPadding:1.25rem 0 0 0 !default;
@@ -485,13 +510,13 @@ $tableHeaderBorder:1px solid $shade300 !default;
$tableHeaderBorderWidth:1px 0 1px 0 !default;
$tableHeaderBg:$shade100 !default;
$tableHeaderTextColor:$shade800 !default;
$tableHeaderFontWeight:700 !default;
$tableHeaderFontWeight: 0 !default;
$tableHeaderPadding:1rem 1rem !default;
$tableHeaderCellPadding:1rem 1rem !default;
$tableHeaderCellBg:$shade100 !default;
$tableHeaderCellTextColor:$shade800 !default;
$tableHeaderCellFontWeight:700 !default;
$tableHeaderCellFontWeight: 0 !default;
$tableHeaderCellBorder:1px solid $shade300 !default;
$tableHeaderCellBorderWidth:0 0 1px 0 !default;
$tableHeaderCellHoverBg:$shade200 !default;
@@ -516,7 +541,7 @@ $tableBodyCellPadding:1rem 1rem !default;
$tableFooterCellPadding:1rem 1rem !default;
$tableFooterCellBg:$shade100 !default;
$tableFooterCellTextColor:$shade800 !default;
$tableFooterCellFontWeight:700 !default;
$tableFooterCellFontWeight: 0 !default;
$tableFooterCellBorder:1px solid $shade300 !default;
$tableFooterCellBorderWidth:0 0 1px 0 !default;
$tableResizerHelperBg:$primaryColor !default;
@@ -525,7 +550,7 @@ $tableFooterBorder:1px solid $shade300 !default;
$tableFooterBorderWidth:0 0 1px 0 !default;
$tableFooterBg:$shade100 !default;
$tableFooterTextColor:$shade800 !default;
$tableFooterFontWeight:700 !default;
$tableFooterFontWeight: 0 !default;
$tableFooterPadding:1rem 1rem !default;
$tableCellContentAlignment:left !default;
@@ -566,7 +591,7 @@ $messagePadding:1.25rem 1.75rem !default;
$messageBorderWidth:0 0 0 6px !default;
$messageIconFontSize:1.5rem !default;
$messageTextFontSize:1rem !default;
$messageTextFontWeight:500 !default;
$messageTextFontWeight: 0 !default;
//inline message
$inlineMessagePadding:$inputPadding !default;
@@ -583,7 +608,7 @@ $toastPadding:1rem !default;
$toastBorderWidth:0 0 0 6px !default;
$toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
$toastOpacity:1 !default;
$toastTitleFontWeight:700 !default;
$toastTitleFontWeight: 0 !default;
$toastDetailMargin:$inlineSpacing 0 0 0 !default;
//severities
@@ -621,7 +646,7 @@ $overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
$dialogHeaderBg:$shade000 !default;
$dialogHeaderBorder:0 none !default;
$dialogHeaderTextColor:$shade800 !default;
$dialogHeaderFontWeight:700 !default;
$dialogHeaderFontWeight: 0 !default;
$dialogHeaderFontSize:1.25rem !default;
$dialogHeaderPadding:1.5rem !default;
$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
@@ -646,7 +671,7 @@ $stepsItemNumberHeight:2rem !default;
$stepsItemNumberFontSize:1.143rem !default;
$stepsItemNumberColor:$shade700 !default;
$stepsItemNumberBorderRadius:50% !default;
$stepsItemActiveFontWeight:700 !default;
$stepsItemActiveFontWeight: 0 !default;
//progressbar, progressspinner
$progressBarHeight:1.5rem !default;
@@ -856,10 +881,10 @@ $imagePreviewActionIconFontSize:1.5rem !default;
$imagePreviewActionIconBorderRadius:50% !default;
:root {
font-family:'Inter var', sans-serif;
font-family:"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:'Inter var', sans-serif;
--font-family:"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:#{$shade000};
--surface-b:#{$shade100};