diff --git a/packages/common-css/src/_common-mixins.scss b/packages/common-css/src/_common-mixins.scss index ca0668fabb..deba1ece08 100644 --- a/packages/common-css/src/_common-mixins.scss +++ b/packages/common-css/src/_common-mixins.scss @@ -1,3 +1,5 @@ +@import "common-variables"; + @mixin sap-reset { font-family: "72", "72full", Arial, Helvetica, sans-serif; font-size: var(--sapFontSize); @@ -267,19 +269,14 @@ height: $height; } -// display mixins -$sap-display-types: inline block contents flex grid inline-block inline-flex inline-grid inline-table list-item run-in table table-caption table-column-group table-header-group table-footer-group table-row-group table-cell table-column table-row none initial inherit !default; - +// Display mixins @mixin sap-display($type: inline) { display: $type !important; @content; } -// position mixins -$sap-position-types: static fixed absolute relative sticky inherit !default; -$sap-position-offset: top right bottom left; - +// Position mixins @mixin sap-position($position, $top: null, $right: null, $bottom: null, $left: null) { position: $position; top: $top; @@ -331,16 +328,7 @@ $sap-position-offset: top right bottom left; @content; } -// border-radius -$sap-corner-border-radius: ( - "element": var(--sapElement_BorderCornerRadius), - "button": var(--sapButton_BorderCornerRadius), - "field": var(--sapField_BorderCornerRadius), - "group": var(--sapGroup_BorderCornerRadius), - "popover": var(--sapPopover_BorderCornerRadius), - "tile": var(--sapTile_BorderCornerRadius) -); - +// Border-radius @mixin sap-set-border-radius($value...) { $_value: $value; @@ -353,29 +341,7 @@ $sap-corner-border-radius: ( @content; } -// content paddings - -$sap-content-paddings-home: ( - "sm": 0.5rem, - "md": 2rem, - "lg": 2rem, - "xl": 3rem, -); - -$sap-content-paddings-container: ( - "sm": 1rem, - "md": 2rem, - "lg": 2rem, - "xl": 3rem, -); - -$sap-content-paddings-nav: ( - "sm": 1rem, - "md": 2rem, - "lg": 2rem, - "xl": 3rem, -); - +// Content paddings @mixin sap-set-content-paddings($type, $value) { @if ($type == 'home') { padding-left: map-get($sap-content-paddings-home, $value) !important; @@ -415,15 +381,7 @@ $sap-content-paddings-nav: ( } } -// flex -$sap-flex-spacings: ( - "tiny": 0.5rem, - "small": 1rem, - "medium": 2rem, - "large": 3rem -); - -// ----------- FLEX DIRECTION ----------- +// Flex @mixin sap-flex($direction: row) { display: flex; flex-direction: $direction; @@ -431,7 +389,6 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX ALIGN CONTENT ----------- @mixin sap-flex-align-content($type: normal, $direction: row) { @include sap-flex($direction) { flex-wrap: wrap; @@ -441,7 +398,6 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX ALIGN ITEMS ----------- @mixin sap-flex-align-items($type: stretch, $direction: row) { @include sap-flex($direction) { align-items: $type; @@ -450,7 +406,6 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX GAP ----------- @mixin sap-flex-gap($value, $type: "", $direction: row) { @include sap-flex($direction); @@ -477,7 +432,6 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX JUSTIFY CONTENT ----------- @mixin sap-flex-justify($type: flex-start, $direction: row) { @include sap-flex($direction) { justify-content: $type; @@ -486,7 +440,6 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX WRAP ----------- @mixin sap-flex-wrap($type: nowrap, $direction: row) { @include sap-flex($direction) { flex-wrap: $type; @@ -495,7 +448,6 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX CENTER ----------- @mixin sap-flex-center($direction: row) { @include sap-flex() { align-items: center; @@ -506,59 +458,37 @@ $sap-flex-spacings: ( @content; } -// ----------- FLEX ORDER ----------- @mixin sap-flex-order($value: 0) { order: $value; @content; } -// ----------- FLEX GROW ----------- @mixin sap-flex-grow($value) { flex-grow: $value; @content; } -// ----------- FLEX SHRINK ----------- @mixin sap-flex-shrink($value) { flex-shrink: $value; @content; } -// ----------- FLEX ALIGN SELF ----------- @mixin sap-flex-align-self($value) { align-self: $value; @content; } -// ----------- FLEX CHILD ----------- @mixin sap-flex-child($value) { flex: $value; @content; } -// MARGINS - -$sap-margins: ( - "tiny": 0.5rem, - "small": 1rem, - "medium": 2rem, - "large": 3rem -); - -$sap-container-sides: ( - "top": top, - "bottom": bottom, - "begin": left, - "end": right, - "x": horizontal, - "y": vertical -); - +// Margins @mixin sap-set-margin-all($value: 0) { margin: $value; } @@ -658,12 +588,7 @@ $sap-container-sides: ( } } -// MEDIA QUERIES -$small: 600px; -$medium: 1024px; -$large: 1440px; -$offset: 1px; - +// Media queries @mixin sap-media-sm() { @media (max-width: #{$small - $offset}) { @content; @@ -718,23 +643,7 @@ $offset: 1px; } } -// PADDINGS -$sap-paddings: ( - "tiny": 0.5rem, - "small": 1rem, - "medium": 2rem, - "large": 3rem -); - -$sap-container-sides: ( - "top": top, - "bottom": bottom, - "begin": left, - "end": right, - "x": horizontal, - "y": vertical -); - +// Paddings @mixin sap-set-padding-all($value: 0) { padding: $value; } @@ -838,24 +747,7 @@ $sap-container-sides: ( } } -// SHADOWS -$sap-box-shadow-types: ( - "level-0": var(--sapContent_Shadow0), - "level-1": var(--sapContent_Shadow1), - "level-2": var(--sapContent_Shadow2), - "level-3": var(--sapContent_Shadow3), - "header": var(--sapContent_HeaderShadow), - "shell": var(--sapShell_Shadow), - "none": none, -); - -$sap-text-shadow-types: ( - "text": var(--sapContent_TextShadow), - "contrast-text": var(--sapContent_ContrastTextShadow), - "group-title-text": var(--sapShell_GroupTitleTextShadow), - "emphasized-text": var(--sapButton_Emphasized_TextShadow), -); - +// Shadows @mixin sap-set-box-shadow($value) { box-shadow: $value; } @@ -888,20 +780,7 @@ $sap-text-shadow-types: ( @content; } -// TYPOGRAPHY -$sap-font-types: ( - "regular": var(--sapFontFamily), - "light": var(--sapFontLightFamily), - "bold": var(--sapFontBoldFamily), - "semibold": var(--sapFontSemiboldFamily), - "semibold-duplex": var(--sapFontSemiboldDuplexFamily), - "monospaced-regular": var(--sapContent_MonospaceFontFamily), - "monospaced-bold": var(--sapContent_MonospaceBoldFontFamily), - "black": var(--sapFontBlackFamily), - "header": var(--sapFontHeaderFamily), -); - -// FONT FAMILY +// Font-family @mixin sap-font-family($type) { @if ($type == "regular") { font-family: map-get($sap-font-types, "regular"); @@ -926,19 +805,7 @@ $sap-font-types: ( } } -// FONT SIZE -$sap-font-sizes: ( - "header-6": var(--sapFontHeader6Size), - "header-5": var(--sapFontHeader5Size), - "header-4": var(--sapFontHeader4Size), - "header-3": var(--sapFontHeader3Size), - "header-2": var(--sapFontHeader2Size), - "header-1": var(--sapFontHeader1Size), - "small": var(--sapFontSmallSize), - "medium": var(--sapFontSize), - "large": var(--sapFontLargeSize), -); - +// Font-size @mixin sap-font-size($size) { @if ($size == "header-6") { font-size: map-get($sap-font-sizes, "header-6"); @@ -963,12 +830,12 @@ $sap-font-sizes: ( } } -// LINE HEIGHT +// Line-height @mixin sap-font-line-height($value: normal) { line-height: $value; } -// COMMON CASES +// Common cases @mixin sap-font($type) { @if ($type == header-3) { font-family: var(--sapFontHeaderFamily); @@ -994,7 +861,7 @@ $sap-font-sizes: ( @content; } -// BORDER +// Border @mixin sap-border($width, $style, $color, $pos: all) { $_border: $width $style $color; @@ -1029,7 +896,7 @@ $sap-font-sizes: ( } } -// FOCUS +// Focus @mixin sap-fiori-focus($offset: -0.1875rem, $alternative: false) { &:focus, &.is-focus { @@ -1125,594 +992,6 @@ $sap-font-sizes: ( z-index: $index; } -// COLORS -/* stylelint-disable */ -$sap-colors: - brandColor, - highlightColor, - baseColor, - shellColor, - backgroundColor, - textColor, - linkColor, - link_Hover_Color, - link_Active_Color, - link_Visited_Color, - link_InvertedColor, - link_SubtleColor, - selectedColor, - activeColor, - highlightTextColor, - titleColor, - negativeColor, - criticalColor, - positiveColor, - informativeColor, - neutralColor, - negativeElementColor, - criticalElementColor, - positiveElementColor, - informativeElementColor, - neutralElementColor, - negativeTextColor, - positiveTextColor, - criticalTextColor, - informativeTextColor, - neutralTextColor, - neutralBorderColor, - errorColor, - errorBorderColor, - warningColor, - warningBorderColor, - successColor, - successBorderColor, - informationColor, - informationBorderColor, - errorBackground, - warningBackground, - successBackground, - informationBackground, - neutralBackground, - indicationColor_1, - indicationColor_1_Background, - indicationColor_1_BorderColor, - indicationColor_1_Hover_Background, - indicationColor_1_Active_Background, - indicationColor_1_TextColor, - indicationColor_2, - indicationColor_2_Background, - indicationColor_2_BorderColor, - indicationColor_2_Hover_Background, - indicationColor_2_Active_Background, - indicationColor_2_TextColor, - indicationColor_3, - indicationColor_3_Background, - indicationColor_3_BorderColor, - indicationColor_3_Hover_Background, - indicationColor_3_Active_Background, - indicationColor_3_TextColor, - indicationColor_4, - indicationColor_4_Background, - indicationColor_4_BorderColor, - indicationColor_4_Hover_Background, - indicationColor_4_Active_Background, - indicationColor_4_TextColor, - indicationColor_5, - indicationColor_5_Background, - indicationColor_5_BorderColor, - indicationColor_5_Hover_Background, - indicationColor_5_Active_Background, - indicationColor_5_TextColor, - indicationColor_6, - indicationColor_6_Background, - indicationColor_6_BorderColor, - indicationColor_6_Hover_Background, - indicationColor_6_Active_Background, - indicationColor_6_TextColor, - indicationColor_7, - indicationColor_7_Background, - indicationColor_7_BorderColor, - indicationColor_7_Hover_Background, - indicationColor_7_Active_Background, - indicationColor_7_TextColor, - indicationColor_8, - indicationColor_8_Background, - indicationColor_8_BorderColor, - indicationColor_8_Hover_Background, - indicationColor_8_Active_Background, - indicationColor_8_TextColor, - content_IconColor, - content_ContrastIconColor, - content_NonInteractiveIconColor, - content_MarkerIconColor, - content_MarkerTextColor, - content_MeasureIndicatorColor, - content_Selected_MeasureIndicatorColor, - content_ImagePlaceholderBackground, - content_ImagePlaceholderForegroundColor, - content_RatedColor, - content_UnratedColor, - content_BusyColor, - content_FocusColor, - content_ContrastFocusColor, - content_ShadowColor, - content_ContrastShadowColor, - content_SearchHighlightColor, - content_HelpColor, - content_LabelColor, - content_ContrastTextColor, - content_ForegroundColor, - content_ForegroundBorderColor, - content_ForegroundTextColor, - content_BadgeBackground, - content_BadgeTextColor, - content_Placeholderloading_Background, - content_DragAndDropActiveColor, - content_Selected_Background, - content_Selected_TextColor, - content_Selected_Hover_Background, - content_Selected_ForegroundColor, - content_Illustrative_Color1, - content_Illustrative_Color2, - content_Illustrative_Color3, - content_Illustrative_Color4, - content_Illustrative_Color5, - content_Illustrative_Color6, - content_Illustrative_Color7, - content_Illustrative_Color8, - content_Illustrative_Color9, - content_Illustrative_Color10, - content_Illustrative_Color11, - content_Illustrative_Color12, - content_Illustrative_Color13, - content_Illustrative_Color14, - content_Illustrative_Color15, - content_Illustrative_Color16, - content_Illustrative_Color17, - content_Illustrative_Color18, - content_Illustrative_Color19, - content_Illustrative_Color20, - shell_Background, - shell_BorderColor, - shell_TextColor, - shell_InteractiveBackground, - shell_InteractiveTextColor, - shell_InteractiveBorderColor, - shell_GroupTitleTextColor, - shell_Hover_Background, - shell_Active_Background, - shell_Active_TextColor, - shell_Selected_Background, - shell_Selected_TextColor, - shell_Selected_Hover_Background, - shell_Navigation_Background, - shell_Navigation_SelectedColor, - shell_Navigation_Selected_TextColor, - shell_Navigation_TextColor, - shell_Navigation_Hover_Background, - shell_Navigation_Active_Background, - shell_Navigation_Active_TextColor, - shell_NegativeColor, - shell_CriticalColor, - shell_PositiveColor, - shell_InformativeColor, - shell_NeutralColor, - avatar_1_Background, - avatar_1_BorderColor, - avatar_1_TextColor, - avatar_2_Background, - avatar_2_BorderColor, - avatar_2_TextColor, - avatar_3_Background, - avatar_3_BorderColor, - avatar_3_TextColor, - avatar_4_Background, - avatar_4_BorderColor, - avatar_4_TextColor, - avatar_5_Background, - avatar_5_BorderColor, - avatar_5_TextColor, - avatar_6_Background, - avatar_6_BorderColor, - avatar_6_TextColor, - avatar_7_Background, - avatar_7_BorderColor, - avatar_7_TextColor, - avatar_8_Background, - avatar_8_BorderColor, - avatar_8_TextColor, - avatar_9_Background, - avatar_9_BorderColor, - avatar_9_TextColor, - avatar_10_Background, - avatar_10_BorderColor, - avatar_10_TextColor, - button_Background, - button_BorderColor, - button_TextColor, - button_Hover_Background, - button_Hover_BorderColor, - button_Hover_TextColor, - button_IconColor, - button_Active_Background, - button_Active_BorderColor, - button_Active_TextColor, - button_Emphasized_Background, - button_Emphasized_BorderColor, - button_Emphasized_TextColor, - button_Emphasized_Hover_Background, - button_Emphasized_Hover_BorderColor, - button_Emphasized_Hover_TextColor, - button_Emphasized_Active_Background, - button_Emphasized_Active_BorderColor, - button_Emphasized_Active_TextColor, - button_Reject_Background, - button_Reject_BorderColor, - button_Reject_Hover_Background, - button_Reject_Hover_BorderColor, - button_Reject_Hover_TextColor, - button_Reject_Active_Background, - button_Reject_Active_BorderColor, - button_Reject_Active_TextColor, - button_Reject_TextColor, - button_Reject_Selected_Background, - button_Reject_Selected_BorderColor, - button_Reject_Selected_TextColor, - button_Reject_Selected_Hover_Background, - button_Reject_Selected_Hover_BorderColor, - button_Accept_Background, - button_Accept_BorderColor, - button_Accept_Hover_Background, - button_Accept_Hover_BorderColor, - button_Accept_Hover_TextColor, - button_Accept_Active_Background, - button_Accept_Active_BorderColor, - button_Accept_Active_TextColor, - button_Accept_TextColor, - button_Accept_Selected_Background, - button_Accept_Selected_BorderColor, - button_Accept_Selected_TextColor, - button_Accept_Selected_Hover_Background, - button_Accept_Selected_Hover_BorderColor, - button_Lite_Background, - button_Lite_BorderColor, - button_Lite_TextColor, - button_Lite_Hover_Background, - button_Lite_Hover_BorderColor, - button_Lite_Hover_TextColor, - button_Lite_Active_Background, - button_Lite_Active_BorderColor, - button_Selected_Background, - button_Selected_BorderColor, - button_Selected_TextColor, - button_Selected_Hover_Background, - button_Selected_Hover_BorderColor, - button_Attention_Background, - button_Attention_BorderColor, - button_Attention_TextColor, - button_Attention_Hover_Background, - button_Attention_Hover_BorderColor, - button_Attention_Hover_TextColor, - button_Attention_Active_Background, - button_Attention_Active_BorderColor, - button_Attention_Active_TextColor, - button_Attention_Selected_Background, - button_Attention_Selected_BorderColor, - button_Attention_Selected_TextColor, - button_Attention_Selected_Hover_Background, - button_Attention_Selected_Hover_BorderColor, - button_Negative_Background, - button_Negative_BorderColor, - button_Negative_TextColor, - button_Negative_Hover_Background, - button_Negative_Hover_BorderColor, - button_Negative_Hover_TextColor, - button_Negative_Active_Background, - button_Negative_Active_BorderColor, - button_Negative_Active_TextColor, - button_Critical_Background, - button_Critical_BorderColor, - button_Critical_TextColor, - button_Critical_Hover_Background, - button_Critical_Hover_BorderColor, - button_Critical_Hover_TextColor, - button_Critical_Active_Background, - button_Critical_Active_BorderColor, - button_Critical_Active_TextColor, - button_Success_Background, - button_Success_BorderColor, - button_Success_TextColor, - button_Success_Hover_Background, - button_Success_Hover_BorderColor, - button_Success_Hover_TextColor, - button_Success_Active_Background, - button_Success_Active_BorderColor, - button_Success_Active_TextColor, - button_Information_Background, - button_Information_BorderColor, - button_Information_TextColor, - button_Information_Hover_Background, - button_Information_Hover_BorderColor, - button_Information_Hover_TextColor, - button_Information_Active_Background, - button_Information_Active_BorderColor, - button_Information_Active_TextColor, - button_Neutral_Background, - button_Neutral_BorderColor, - button_Neutral_TextColor, - button_Neutral_Hover_Background, - button_Neutral_Hover_BorderColor, - button_Neutral_Hover_TextColor, - button_Neutral_Active_Background, - button_Neutral_Active_BorderColor, - button_Neutral_Active_TextColor, - button_Track_Background, - button_Track_BorderColor, - button_Track_TextColor, - button_Track_Hover_Background, - button_Track_Hover_BorderColor, - button_Track_Selected_Background, - button_Track_Selected_BorderColor, - button_Track_Selected_TextColor, - button_Track_Selected_Hover_Background, - button_Track_Selected_Hover_BorderColor, - button_Handle_Background, - button_Handle_BorderColor, - button_Handle_TextColor, - button_Handle_Hover_Background, - button_Handle_Hover_BorderColor, - button_Handle_Selected_Background, - button_Handle_Selected_BorderColor, - button_Handle_Selected_TextColor, - button_Handle_Selected_Hover_Background, - button_Handle_Selected_Hover_BorderColor, - button_Track_Negative_Background, - button_Track_Negative_BorderColor, - button_Track_Negative_TextColor, - button_Track_Negative_Hover_Background, - button_Track_Negative_Hover_BorderColor, - button_Handle_Negative_Background, - button_Handle_Negative_BorderColor, - button_Handle_Negative_TextColor, - button_Handle_Negative_Hover_Background, - button_Handle_Negative_Hover_BorderColor, - button_Track_Positive_Background, - button_Track_Positive_BorderColor, - button_Track_Positive_TextColor, - button_Track_Positive_Hover_Background, - button_Track_Positive_Hover_BorderColor, - button_Handle_Positive_Background, - button_Handle_Positive_BorderColor, - button_Handle_Positive_TextColor, - button_Handle_Positive_Hover_Background, - button_Handle_Positive_Hover_BorderColor, - button_TokenBackground, - button_TokenBorderColor, - field_Background, - field_TextColor, - field_PlaceholderTextColor, - field_BorderColor, - field_HelpBackground, - field_Hover_Background, - field_Hover_BorderColor, - field_Hover_HelpBackground, - field_Active_BorderColor, - field_Focus_Background, - field_Focus_BorderColor, - field_Focus_HelpBackground, - field_ReadOnly_BorderColor, - field_ReadOnly_HelpBackground, - field_RequiredColor, - field_InvalidColor, - field_InvalidBackground, - field_WarningColor, - field_WarningBackground, - field_SuccessColor, - field_SuccessBackground, - field_InformationColor, - field_InformationBackground, - group_TitleBackground, - group_TitleBorderColor, - group_TitleTextColor, - group_ContentBackground, - group_ContentBorderColor, - group_FooterBackground, - toolbar_Background, - toolbar_SeparatorColor, - list_HeaderBackground, - list_HeaderBorderColor, - list_HeaderTextColor, - list_BorderColor, - list_TextColor, - list_Active_TextColor, - list_Active_Background, - list_SelectionBackgroundColor, - list_SelectionBorderColor, - list_Hover_SelectionBackground, - list_Background, - list_Hover_Background, - list_AlternatingBackground, - list_GroupHeaderBackground, - list_GroupHeaderBorderColor, - list_GroupHeaderTextColor, - list_FooterBackground, - list_FooterTextColor, - list_TableGroupHeaderBackground, - list_TableGroupHeaderBorderColor, - list_TableGroupHeaderTextColor, - list_TableFooterBorder, - list_TableFixedBorderColor, - message_ErrorBorderColor, - message_WarningBorderColor, - message_SuccessBorderColor, - message_InformationBorderColor, - progress_Background, - progress_BorderColor, - progress_TextColor, - progress_NegativeBackground, - progress_NegativeBorderColor, - progress_NegativeTextColor, - progress_CriticalBackground, - progress_CriticalBorderColor, - progress_CriticalTextColor, - progress_PositiveBackground, - progress_PositiveBorderColor, - progress_PositiveTextColor, - progress_InformationBackground, - progress_InformationBorderColor, - progress_InformationTextColor, - progress_Value_Background, - progress_Value_BorderColor, - progress_Value_TextColor, - progress_Value_NegativeBackground, - progress_Value_NegativeBorderColor, - progress_Value_NegativeTextColor, - progress_Value_CriticalBackground, - progress_Value_CriticalBorderColor, - progress_Value_CriticalTextColor, - progress_Value_PositiveBackground, - progress_Value_PositiveBorderColor, - progress_Value_PositiveTextColor, - progress_Value_InformationBackground, - progress_Value_InformationBorderColor, - progress_Value_InformationTextColor, - scrollBar_FaceColor, - scrollBar_TrackColor, - scrollBar_BorderColor, - scrollBar_SymbolColor, - scrollBar_Hover_FaceColor, - slider_Background, - slider_BorderColor, - slider_Selected_Background, - slider_Selected_BorderColor, - slider_HandleBackground, - slider_HandleBorderColor, - slider_RangeHandleBackground, - slider_Hover_HandleBackground, - slider_Hover_HandleBorderColor, - slider_Hover_RangeHandleBackground, - slider_Active_HandleBackground, - slider_Active_HandleBorderColor, - slider_Active_RangeHandleBackground, - pageHeader_Background, - pageHeader_BorderColor, - pageHeader_TextColor, - pageFooter_Background, - pageFooter_BorderColor, - pageFooter_TextColor, - infobar_Background, - infobar_Hover_Background, - infobar_Active_Background, - infobar_NonInteractive_Background, - infobar_TextColor, - objectHeader_Background, - objectHeader_BorderColor, - objectHeader_Hover_Background, - objectHeader_Title_TextColor, - objectHeader_Subtitle_TextColor, - blockLayer_Background, - tile_Background, - tile_Hover_Background, - tile_Active_Background, - tile_BorderColor, - tile_TitleTextColor, - tile_TextColor, - tile_IconColor, - tile_SeparatorColor, - tile_Interactive_BorderColor, - tile_OverlayBackground, - tile_OverlayForegroundColor, - accentColor1, - accentColor2, - accentColor3, - accentColor4, - accentColor5, - accentColor6, - accentColor7, - accentColor8, - accentColor9, - accentColor10, - accentBackgroundColor1, - accentBackgroundColor2, - accentBackgroundColor3, - accentBackgroundColor4, - accentBackgroundColor5, - accentBackgroundColor6, - accentBackgroundColor7, - accentBackgroundColor8, - accentBackgroundColor9, - accentBackgroundColor10, - legend_WorkingBackground, - legend_NonWorkingBackground, - legend_CurrentDateTime, - legendColor1, - legendColor2, - legendColor3, - legendColor4, - legendColor5, - legendColor6, - legendColor7, - legendColor8, - legendColor9, - legendColor10, - legendColor11, - legendColor12, - legendColor13, - legendColor14, - legendColor15, - legendColor16, - legendColor17, - legendColor18, - legendColor19, - legendColor20, - legendBackgroundColor1, - legendBackgroundColor2, - legendBackgroundColor3, - legendBackgroundColor4, - legendBackgroundColor5, - legendBackgroundColor6, - legendBackgroundColor7, - legendBackgroundColor8, - legendBackgroundColor9, - legendBackgroundColor10, - legendBackgroundColor11, - legendBackgroundColor12, - legendBackgroundColor13, - legendBackgroundColor14, - legendBackgroundColor15, - legendBackgroundColor16, - legendBackgroundColor17, - legendBackgroundColor18, - legendBackgroundColor19, - legendBackgroundColor20, - chart_OrderedColor_1, - chart_OrderedColor_2, - chart_OrderedColor_3, - chart_OrderedColor_4, - chart_OrderedColor_5, - chart_OrderedColor_6, - chart_OrderedColor_7, - chart_OrderedColor_8, - chart_OrderedColor_9, - chart_OrderedColor_10, - chart_OrderedColor_11, - chart_Bad, - chart_Critical, - chart_Good, - chart_Neutral, - chart_Sequence_1, - chart_Sequence_2, - chart_Sequence_3, - chart_Sequence_4, - chart_Sequence_5, - chart_Sequence_6, - chart_Sequence_7, - chart_Sequence_8, - chart_Sequence_9, - chart_Sequence_10, - chart_Sequence_11, - chart_Sequence_Neutral; - @function capitalize($string) { @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2); } diff --git a/packages/common-css/src/_common-variables.scss b/packages/common-css/src/_common-variables.scss index 270b8fce2e..6db32ad068 100644 --- a/packages/common-css/src/_common-variables.scss +++ b/packages/common-css/src/_common-variables.scss @@ -1,2 +1,786 @@ // Element height $fn-element-height: 2rem; // 32px + +// Parameters +$sap-parameter-tiny: 'tiny'; +$sap-parameter-small: 'small'; +$sap-parameter-medium: 'medium'; +$sap-parameter-large: 'large'; + +$sap-parameter-sm: 'sm'; +$sap-parameter-md: 'md'; +$sap-parameter-lg: 'lg'; +$sap-parameter-xl: 'xl'; + +$sap-corner-border-radius-element: 'element'; +$sap-corner-border-radius-button: 'button'; +$sap-corner-border-radius-field: 'field'; +$sap-corner-border-radius-group: 'group'; +$sap-corner-border-radius-popover: 'popover'; +$sap-corner-border-radius-tile: 'tile'; + +$sap-container-side-top: 'top'; +$sap-container-side-bottom: 'bottom'; +$sap-container-side-begin: 'begin'; +$sap-container-side-end: 'end'; +$sap-container-side-x: 'x'; +$sap-container-side-y: 'y'; + +$sap-font-size-h6: 'header-6'; +$sap-font-size-h5: 'header-5'; +$sap-font-size-h4: 'header-4'; +$sap-font-size-h3: 'header-3'; +$sap-font-size-h2: 'header-2'; +$sap-font-size-h1: 'header-1'; +$sap-font-size-small: 'small'; +$sap-font-size-medium: 'medium'; +$sap-font-size-large: 'large'; + +$sap-box-shadow-level-0: 'level-0'; +$sap-box-shadow-level-1: 'level-1'; +$sap-box-shadow-level-2: 'level-2'; +$sap-box-shadow-level-3: 'level-3'; +$sap-box-shadow-header: 'header'; +$sap-box-shadow-shell: 'shell'; +$sap-box-shadow-none: 'none'; + +$sap-text-shadow-text: 'text'; +$sap-text-shadow-contrast-text: 'contrast-text'; +$sap-text-shadow-group-title-text: 'group-title-text'; +$sap-text-shadow-emphasized-text: 'emphasized-text'; + +$sap-text-regular: 'regular'; +$sap-text-light: 'light'; +$sap-text-bold: 'bold'; +$sap-text-semibold: 'semibold'; +$sap-text-semibold-duplex: 'semibold-duplex'; +$sap-text-monospaced-regular: 'monospaced-regular'; +$sap-text-monospaced-bold: 'monospaced-bold'; +$sap-text-black: 'black'; +$sap-text-header: 'header'; + +// Border-radius +$sap-corner-border-radius: ( + "element": var(--sapElement_BorderCornerRadius), + "button": var(--sapButton_BorderCornerRadius), + "field": var(--sapField_BorderCornerRadius), + "group": var(--sapGroup_BorderCornerRadius), + "popover": var(--sapPopover_BorderCornerRadius), + "tile": var(--sapTile_BorderCornerRadius) +); + +// Flex +$sap-flex-spacings: ( + "tiny": 0.5rem, + "small": 1rem, + "medium": 2rem, + "large": 3rem +); + +// Content paddings +$sap-content-paddings-home: ( + "sm": 0.5rem, + "md": 2rem, + "lg": 2rem, + "xl": 3rem, +); + +$sap-content-paddings-container: ( + "sm": 1rem, + "md": 2rem, + "lg": 2rem, + "xl": 3rem, +); + +$sap-content-paddings-nav: ( + "sm": 1rem, + "md": 2rem, + "lg": 2rem, + "xl": 3rem, +); + +// Margins +$sap-margins: ( + "tiny": 0.5rem, + "small": 1rem, + "medium": 2rem, + "large": 3rem +); + +$sap-container-sides: ( + "top": top, + "bottom": bottom, + "begin": left, + "end": right, + "x": horizontal, + "y": vertical +); + +// Paddings +$sap-paddings: ( + "tiny": 0.5rem, + "small": 1rem, + "medium": 2rem, + "large": 3rem +); + +// Position mixins +$sap-position-types: static fixed absolute relative sticky inherit !default; +$sap-position-offset: top right bottom left; + +// Display mixins +$sap-display-types: inline block contents flex grid inline-block inline-flex inline-grid inline-table list-item run-in table table-caption table-column-group table-header-group table-footer-group table-row-group table-cell table-column table-row none initial inherit !default; + +// Shadows +$sap-box-shadow-types: ( + "level-0": var(--sapContent_Shadow0), + "level-1": var(--sapContent_Shadow1), + "level-2": var(--sapContent_Shadow2), + "level-3": var(--sapContent_Shadow3), + "header": var(--sapContent_HeaderShadow), + "shell": var(--sapShell_Shadow), + "none": none, +); + +$sap-text-shadow-types: ( + "text": var(--sapContent_TextShadow), + "contrast-text": var(--sapContent_ContrastTextShadow), + "group-title-text": var(--sapShell_GroupTitleTextShadow), + "emphasized-text": var(--sapButton_Emphasized_TextShadow), +); + +// Typography +$sap-font-types: ( + "regular": var(--sapFontFamily), + "light": var(--sapFontLightFamily), + "bold": var(--sapFontBoldFamily), + "semibold": var(--sapFontSemiboldFamily), + "semibold-duplex": var(--sapFontSemiboldDuplexFamily), + "monospaced-regular": var(--sapContent_MonospaceFontFamily), + "monospaced-bold": var(--sapContent_MonospaceBoldFontFamily), + "black": var(--sapFontBlackFamily), + "header": var(--sapFontHeaderFamily), +); + +// Font-size +$sap-font-sizes: ( + "header-6": var(--sapFontHeader6Size), + "header-5": var(--sapFontHeader5Size), + "header-4": var(--sapFontHeader4Size), + "header-3": var(--sapFontHeader3Size), + "header-2": var(--sapFontHeader2Size), + "header-1": var(--sapFontHeader1Size), + "small": var(--sapFontSmallSize), + "medium": var(--sapFontSize), + "large": var(--sapFontLargeSize), +); + +// Media queries +$small: 600px; +$medium: 1024px; +$large: 1440px; +$offset: 1px; + +$sap-margin-tiny: map-get($sap-margins, $sap-parameter-tiny); +$sap-margin-small: map-get($sap-margins, $sap-parameter-small); +$sap-margin-medium: map-get($sap-margins, $sap-parameter-medium); +$sap-margin-large: map-get($sap-margins, $sap-parameter-large); + +$sap-padding-tiny: map-get($sap-paddings, $sap-parameter-tiny); +$sap-padding-small: map-get($sap-paddings, $sap-parameter-small); +$sap-padding-medium: map-get($sap-paddings, $sap-parameter-medium); +$sap-padding-large: map-get($sap-paddings, $sap-parameter-large); + +$sap-flex-spacing-tiny: map-get($sap-flex-spacings, $sap-parameter-tiny); +$sap-flex-spacing-small: map-get($sap-flex-spacings, $sap-parameter-small); +$sap-flex-spacing-medium: map-get($sap-flex-spacings, $sap-parameter-medium); +$sap-flex-spacing-large: map-get($sap-flex-spacings, $sap-parameter-large); + +// Colors +/* stylelint-disable */ +$sap-colors: + brandColor, + highlightColor, + baseColor, + shellColor, + backgroundColor, + textColor, + linkColor, + link_Hover_Color, + link_Active_Color, + link_Visited_Color, + link_InvertedColor, + link_SubtleColor, + selectedColor, + activeColor, + highlightTextColor, + titleColor, + negativeColor, + criticalColor, + positiveColor, + informativeColor, + neutralColor, + negativeElementColor, + criticalElementColor, + positiveElementColor, + informativeElementColor, + neutralElementColor, + negativeTextColor, + positiveTextColor, + criticalTextColor, + informativeTextColor, + neutralTextColor, + neutralBorderColor, + errorColor, + errorBorderColor, + warningColor, + warningBorderColor, + successColor, + successBorderColor, + informationColor, + informationBorderColor, + errorBackground, + warningBackground, + successBackground, + informationBackground, + neutralBackground, + indicationColor_1, + indicationColor_1_Background, + indicationColor_1_BorderColor, + indicationColor_1_Hover_Background, + indicationColor_1_Active_Background, + indicationColor_1_TextColor, + indicationColor_2, + indicationColor_2_Background, + indicationColor_2_BorderColor, + indicationColor_2_Hover_Background, + indicationColor_2_Active_Background, + indicationColor_2_TextColor, + indicationColor_3, + indicationColor_3_Background, + indicationColor_3_BorderColor, + indicationColor_3_Hover_Background, + indicationColor_3_Active_Background, + indicationColor_3_TextColor, + indicationColor_4, + indicationColor_4_Background, + indicationColor_4_BorderColor, + indicationColor_4_Hover_Background, + indicationColor_4_Active_Background, + indicationColor_4_TextColor, + indicationColor_5, + indicationColor_5_Background, + indicationColor_5_BorderColor, + indicationColor_5_Hover_Background, + indicationColor_5_Active_Background, + indicationColor_5_TextColor, + indicationColor_6, + indicationColor_6_Background, + indicationColor_6_BorderColor, + indicationColor_6_Hover_Background, + indicationColor_6_Active_Background, + indicationColor_6_TextColor, + indicationColor_7, + indicationColor_7_Background, + indicationColor_7_BorderColor, + indicationColor_7_Hover_Background, + indicationColor_7_Active_Background, + indicationColor_7_TextColor, + indicationColor_8, + indicationColor_8_Background, + indicationColor_8_BorderColor, + indicationColor_8_Hover_Background, + indicationColor_8_Active_Background, + indicationColor_8_TextColor, + content_IconColor, + content_ContrastIconColor, + content_NonInteractiveIconColor, + content_MarkerIconColor, + content_MarkerTextColor, + content_MeasureIndicatorColor, + content_Selected_MeasureIndicatorColor, + content_ImagePlaceholderBackground, + content_ImagePlaceholderForegroundColor, + content_RatedColor, + content_UnratedColor, + content_BusyColor, + content_FocusColor, + content_ContrastFocusColor, + content_ShadowColor, + content_ContrastShadowColor, + content_SearchHighlightColor, + content_HelpColor, + content_LabelColor, + content_ContrastTextColor, + content_ForegroundColor, + content_ForegroundBorderColor, + content_ForegroundTextColor, + content_BadgeBackground, + content_BadgeTextColor, + content_Placeholderloading_Background, + content_DragAndDropActiveColor, + content_Selected_Background, + content_Selected_TextColor, + content_Selected_Hover_Background, + content_Selected_ForegroundColor, + content_Illustrative_Color1, + content_Illustrative_Color2, + content_Illustrative_Color3, + content_Illustrative_Color4, + content_Illustrative_Color5, + content_Illustrative_Color6, + content_Illustrative_Color7, + content_Illustrative_Color8, + content_Illustrative_Color9, + content_Illustrative_Color10, + content_Illustrative_Color11, + content_Illustrative_Color12, + content_Illustrative_Color13, + content_Illustrative_Color14, + content_Illustrative_Color15, + content_Illustrative_Color16, + content_Illustrative_Color17, + content_Illustrative_Color18, + content_Illustrative_Color19, + content_Illustrative_Color20, + shell_Background, + shell_BorderColor, + shell_TextColor, + shell_InteractiveBackground, + shell_InteractiveTextColor, + shell_InteractiveBorderColor, + shell_GroupTitleTextColor, + shell_Hover_Background, + shell_Active_Background, + shell_Active_TextColor, + shell_Selected_Background, + shell_Selected_TextColor, + shell_Selected_Hover_Background, + shell_Navigation_Background, + shell_Navigation_SelectedColor, + shell_Navigation_Selected_TextColor, + shell_Navigation_TextColor, + shell_Navigation_Hover_Background, + shell_Navigation_Active_Background, + shell_Navigation_Active_TextColor, + shell_NegativeColor, + shell_CriticalColor, + shell_PositiveColor, + shell_InformativeColor, + shell_NeutralColor, + avatar_1_Background, + avatar_1_BorderColor, + avatar_1_TextColor, + avatar_2_Background, + avatar_2_BorderColor, + avatar_2_TextColor, + avatar_3_Background, + avatar_3_BorderColor, + avatar_3_TextColor, + avatar_4_Background, + avatar_4_BorderColor, + avatar_4_TextColor, + avatar_5_Background, + avatar_5_BorderColor, + avatar_5_TextColor, + avatar_6_Background, + avatar_6_BorderColor, + avatar_6_TextColor, + avatar_7_Background, + avatar_7_BorderColor, + avatar_7_TextColor, + avatar_8_Background, + avatar_8_BorderColor, + avatar_8_TextColor, + avatar_9_Background, + avatar_9_BorderColor, + avatar_9_TextColor, + avatar_10_Background, + avatar_10_BorderColor, + avatar_10_TextColor, + button_Background, + button_BorderColor, + button_TextColor, + button_Hover_Background, + button_Hover_BorderColor, + button_Hover_TextColor, + button_IconColor, + button_Active_Background, + button_Active_BorderColor, + button_Active_TextColor, + button_Emphasized_Background, + button_Emphasized_BorderColor, + button_Emphasized_TextColor, + button_Emphasized_Hover_Background, + button_Emphasized_Hover_BorderColor, + button_Emphasized_Hover_TextColor, + button_Emphasized_Active_Background, + button_Emphasized_Active_BorderColor, + button_Emphasized_Active_TextColor, + button_Reject_Background, + button_Reject_BorderColor, + button_Reject_Hover_Background, + button_Reject_Hover_BorderColor, + button_Reject_Hover_TextColor, + button_Reject_Active_Background, + button_Reject_Active_BorderColor, + button_Reject_Active_TextColor, + button_Reject_TextColor, + button_Reject_Selected_Background, + button_Reject_Selected_BorderColor, + button_Reject_Selected_TextColor, + button_Reject_Selected_Hover_Background, + button_Reject_Selected_Hover_BorderColor, + button_Accept_Background, + button_Accept_BorderColor, + button_Accept_Hover_Background, + button_Accept_Hover_BorderColor, + button_Accept_Hover_TextColor, + button_Accept_Active_Background, + button_Accept_Active_BorderColor, + button_Accept_Active_TextColor, + button_Accept_TextColor, + button_Accept_Selected_Background, + button_Accept_Selected_BorderColor, + button_Accept_Selected_TextColor, + button_Accept_Selected_Hover_Background, + button_Accept_Selected_Hover_BorderColor, + button_Lite_Background, + button_Lite_BorderColor, + button_Lite_TextColor, + button_Lite_Hover_Background, + button_Lite_Hover_BorderColor, + button_Lite_Hover_TextColor, + button_Lite_Active_Background, + button_Lite_Active_BorderColor, + button_Selected_Background, + button_Selected_BorderColor, + button_Selected_TextColor, + button_Selected_Hover_Background, + button_Selected_Hover_BorderColor, + button_Attention_Background, + button_Attention_BorderColor, + button_Attention_TextColor, + button_Attention_Hover_Background, + button_Attention_Hover_BorderColor, + button_Attention_Hover_TextColor, + button_Attention_Active_Background, + button_Attention_Active_BorderColor, + button_Attention_Active_TextColor, + button_Attention_Selected_Background, + button_Attention_Selected_BorderColor, + button_Attention_Selected_TextColor, + button_Attention_Selected_Hover_Background, + button_Attention_Selected_Hover_BorderColor, + button_Negative_Background, + button_Negative_BorderColor, + button_Negative_TextColor, + button_Negative_Hover_Background, + button_Negative_Hover_BorderColor, + button_Negative_Hover_TextColor, + button_Negative_Active_Background, + button_Negative_Active_BorderColor, + button_Negative_Active_TextColor, + button_Critical_Background, + button_Critical_BorderColor, + button_Critical_TextColor, + button_Critical_Hover_Background, + button_Critical_Hover_BorderColor, + button_Critical_Hover_TextColor, + button_Critical_Active_Background, + button_Critical_Active_BorderColor, + button_Critical_Active_TextColor, + button_Success_Background, + button_Success_BorderColor, + button_Success_TextColor, + button_Success_Hover_Background, + button_Success_Hover_BorderColor, + button_Success_Hover_TextColor, + button_Success_Active_Background, + button_Success_Active_BorderColor, + button_Success_Active_TextColor, + button_Information_Background, + button_Information_BorderColor, + button_Information_TextColor, + button_Information_Hover_Background, + button_Information_Hover_BorderColor, + button_Information_Hover_TextColor, + button_Information_Active_Background, + button_Information_Active_BorderColor, + button_Information_Active_TextColor, + button_Neutral_Background, + button_Neutral_BorderColor, + button_Neutral_TextColor, + button_Neutral_Hover_Background, + button_Neutral_Hover_BorderColor, + button_Neutral_Hover_TextColor, + button_Neutral_Active_Background, + button_Neutral_Active_BorderColor, + button_Neutral_Active_TextColor, + button_Track_Background, + button_Track_BorderColor, + button_Track_TextColor, + button_Track_Hover_Background, + button_Track_Hover_BorderColor, + button_Track_Selected_Background, + button_Track_Selected_BorderColor, + button_Track_Selected_TextColor, + button_Track_Selected_Hover_Background, + button_Track_Selected_Hover_BorderColor, + button_Handle_Background, + button_Handle_BorderColor, + button_Handle_TextColor, + button_Handle_Hover_Background, + button_Handle_Hover_BorderColor, + button_Handle_Selected_Background, + button_Handle_Selected_BorderColor, + button_Handle_Selected_TextColor, + button_Handle_Selected_Hover_Background, + button_Handle_Selected_Hover_BorderColor, + button_Track_Negative_Background, + button_Track_Negative_BorderColor, + button_Track_Negative_TextColor, + button_Track_Negative_Hover_Background, + button_Track_Negative_Hover_BorderColor, + button_Handle_Negative_Background, + button_Handle_Negative_BorderColor, + button_Handle_Negative_TextColor, + button_Handle_Negative_Hover_Background, + button_Handle_Negative_Hover_BorderColor, + button_Track_Positive_Background, + button_Track_Positive_BorderColor, + button_Track_Positive_TextColor, + button_Track_Positive_Hover_Background, + button_Track_Positive_Hover_BorderColor, + button_Handle_Positive_Background, + button_Handle_Positive_BorderColor, + button_Handle_Positive_TextColor, + button_Handle_Positive_Hover_Background, + button_Handle_Positive_Hover_BorderColor, + button_TokenBackground, + button_TokenBorderColor, + field_Background, + field_TextColor, + field_PlaceholderTextColor, + field_BorderColor, + field_HelpBackground, + field_Hover_Background, + field_Hover_BorderColor, + field_Hover_HelpBackground, + field_Active_BorderColor, + field_Focus_Background, + field_Focus_BorderColor, + field_Focus_HelpBackground, + field_ReadOnly_BorderColor, + field_ReadOnly_HelpBackground, + field_RequiredColor, + field_InvalidColor, + field_InvalidBackground, + field_WarningColor, + field_WarningBackground, + field_SuccessColor, + field_SuccessBackground, + field_InformationColor, + field_InformationBackground, + group_TitleBackground, + group_TitleBorderColor, + group_TitleTextColor, + group_ContentBackground, + group_ContentBorderColor, + group_FooterBackground, + toolbar_Background, + toolbar_SeparatorColor, + list_HeaderBackground, + list_HeaderBorderColor, + list_HeaderTextColor, + list_BorderColor, + list_TextColor, + list_Active_TextColor, + list_Active_Background, + list_SelectionBackgroundColor, + list_SelectionBorderColor, + list_Hover_SelectionBackground, + list_Background, + list_Hover_Background, + list_AlternatingBackground, + list_GroupHeaderBackground, + list_GroupHeaderBorderColor, + list_GroupHeaderTextColor, + list_FooterBackground, + list_FooterTextColor, + list_TableGroupHeaderBackground, + list_TableGroupHeaderBorderColor, + list_TableGroupHeaderTextColor, + list_TableFooterBorder, + list_TableFixedBorderColor, + message_ErrorBorderColor, + message_WarningBorderColor, + message_SuccessBorderColor, + message_InformationBorderColor, + progress_Background, + progress_BorderColor, + progress_TextColor, + progress_NegativeBackground, + progress_NegativeBorderColor, + progress_NegativeTextColor, + progress_CriticalBackground, + progress_CriticalBorderColor, + progress_CriticalTextColor, + progress_PositiveBackground, + progress_PositiveBorderColor, + progress_PositiveTextColor, + progress_InformationBackground, + progress_InformationBorderColor, + progress_InformationTextColor, + progress_Value_Background, + progress_Value_BorderColor, + progress_Value_TextColor, + progress_Value_NegativeBackground, + progress_Value_NegativeBorderColor, + progress_Value_NegativeTextColor, + progress_Value_CriticalBackground, + progress_Value_CriticalBorderColor, + progress_Value_CriticalTextColor, + progress_Value_PositiveBackground, + progress_Value_PositiveBorderColor, + progress_Value_PositiveTextColor, + progress_Value_InformationBackground, + progress_Value_InformationBorderColor, + progress_Value_InformationTextColor, + scrollBar_FaceColor, + scrollBar_TrackColor, + scrollBar_BorderColor, + scrollBar_SymbolColor, + scrollBar_Hover_FaceColor, + slider_Background, + slider_BorderColor, + slider_Selected_Background, + slider_Selected_BorderColor, + slider_HandleBackground, + slider_HandleBorderColor, + slider_RangeHandleBackground, + slider_Hover_HandleBackground, + slider_Hover_HandleBorderColor, + slider_Hover_RangeHandleBackground, + slider_Active_HandleBackground, + slider_Active_HandleBorderColor, + slider_Active_RangeHandleBackground, + pageHeader_Background, + pageHeader_BorderColor, + pageHeader_TextColor, + pageFooter_Background, + pageFooter_BorderColor, + pageFooter_TextColor, + infobar_Background, + infobar_Hover_Background, + infobar_Active_Background, + infobar_NonInteractive_Background, + infobar_TextColor, + objectHeader_Background, + objectHeader_BorderColor, + objectHeader_Hover_Background, + objectHeader_Title_TextColor, + objectHeader_Subtitle_TextColor, + blockLayer_Background, + tile_Background, + tile_Hover_Background, + tile_Active_Background, + tile_BorderColor, + tile_TitleTextColor, + tile_TextColor, + tile_IconColor, + tile_SeparatorColor, + tile_Interactive_BorderColor, + tile_OverlayBackground, + tile_OverlayForegroundColor, + accentColor1, + accentColor2, + accentColor3, + accentColor4, + accentColor5, + accentColor6, + accentColor7, + accentColor8, + accentColor9, + accentColor10, + accentBackgroundColor1, + accentBackgroundColor2, + accentBackgroundColor3, + accentBackgroundColor4, + accentBackgroundColor5, + accentBackgroundColor6, + accentBackgroundColor7, + accentBackgroundColor8, + accentBackgroundColor9, + accentBackgroundColor10, + legend_WorkingBackground, + legend_NonWorkingBackground, + legend_CurrentDateTime, + legendColor1, + legendColor2, + legendColor3, + legendColor4, + legendColor5, + legendColor6, + legendColor7, + legendColor8, + legendColor9, + legendColor10, + legendColor11, + legendColor12, + legendColor13, + legendColor14, + legendColor15, + legendColor16, + legendColor17, + legendColor18, + legendColor19, + legendColor20, + legendBackgroundColor1, + legendBackgroundColor2, + legendBackgroundColor3, + legendBackgroundColor4, + legendBackgroundColor5, + legendBackgroundColor6, + legendBackgroundColor7, + legendBackgroundColor8, + legendBackgroundColor9, + legendBackgroundColor10, + legendBackgroundColor11, + legendBackgroundColor12, + legendBackgroundColor13, + legendBackgroundColor14, + legendBackgroundColor15, + legendBackgroundColor16, + legendBackgroundColor17, + legendBackgroundColor18, + legendBackgroundColor19, + legendBackgroundColor20, + chart_OrderedColor_1, + chart_OrderedColor_2, + chart_OrderedColor_3, + chart_OrderedColor_4, + chart_OrderedColor_5, + chart_OrderedColor_6, + chart_OrderedColor_7, + chart_OrderedColor_8, + chart_OrderedColor_9, + chart_OrderedColor_10, + chart_OrderedColor_11, + chart_Bad, + chart_Critical, + chart_Good, + chart_Neutral, + chart_Sequence_1, + chart_Sequence_2, + chart_Sequence_3, + chart_Sequence_4, + chart_Sequence_5, + chart_Sequence_6, + chart_Sequence_7, + chart_Sequence_8, + chart_Sequence_9, + chart_Sequence_10, + chart_Sequence_11, + chart_Sequence_Neutral; +