Support theming: (Example: Border color is hardcoded to gray)

[rion18]

Hi! It seems that AWSCommon.puml now has a procedure defined as:

!procedure $AWS_common_skinparam()
    FontColor $AWS_FG_COLOR
    BackgroundColor $AWS_BG_COLOR
    BorderColor $AWS_COLOR_GRAY
!endprocedure

It seems $AWS_BORDER_COLOR is no longer used, except for a few examples. Shouldn't we still reference $AWS_BORDER_COLOR where needed, or remove this variable?

This, by itself is not really a problem, except for a name that is kind of confusing.

It would be awesome if the project could support some degree of theming, at least with colors.

Something like this:

!$AWS_BORDER_COLOR = "#FF9900"

could become

!if %not(%variable_exists("$AWS_BORDER_COLOR"))
!$AWS_BORDER_COLOR = "#FF9900"
!endif

Is this something that could be implemented?

This would certainly be faster than adding

!definelong AWSEntityColoring(stereo)
skinparam rectangle<<stereo>> {
    $AWS_common_skinparam()
    BorderColor $AWS_BORDER_COLOR
    BorderThickness 2
}
!enddefinelong

after importing AWSCommon...

Thanks a lot!

[hakanson]

Good catch, previously we had AWS_BORDER_COLOR which I wanted to leave defined for backward compatibility. I didn't need to add $AWS_BORDER_COLOR since it was an older value for the orange color (which is now $AWS_COLOR_SMILE). I'll probably remove in future docs, but leave defined as to not break anyone.

For built-in theming, I updated color palette to align with AWS branding and to support toggling between light and dark mode, which uses the same BorderColor $AWS_COLOR_GRAY.

What kind of color theming where you thinking about? Would you mind creating a sample diagram and posting the source / image as an example? You might be able to just add your own skinparam sections in your diagram to override the BorderColor.

skinparam rectangle {
    BorderColor #FF9900
}

[rion18]

So... the way I do this right now is using the following on a theme file:

!$AWS_DARK = false
!$PUML_MODE = 'dark'

!$CUSTOM_COLOR_BLUE_DARK = '#240E89'
!$CUSTOM_COLOR_ORANGE_LIGHTEST = '#FAE2D2'
!$CUSTOM_COLOR_ORANGE_LIGHT = '#F1B66A'
!$CUSTOM_COLOR_ORANGE_DARK = '#E18815'
!$CUSTOM_COLOR_PURPLE_LIGHT = '#DCDEEB'
!$CUSTOM_COLOR_PURPLE_DARK = '#903AA9'

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v16.0/dist
!include AWSPuml/AWSCommon.puml

skinparam Default {
  TextAlignment center
}

skinparam Database {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BorderThickness 2
  FontColor $INFO
}

skinparam frame {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BorderThickness 2
  FontColor $INFO
  FrameFontColor $INFO
}

skinparam rectangle {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  FontColor $DARK_DARK
}

skinparam component {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHTEST
  BorderColor $CUSTOM_COLOR_ORANGE_DARK
  FontColor $DARK_DARK
}

skinparam legend {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  ArrowFontColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHT
  BorderColor $CUSTOM_COLOR_ORANGE_DARK
  FontColor $CUSTOM_COLOR_BLUE_DARK
  BorderThickness 3
}

left to right direction

!definelong AWSEntityColoring(stereo)
skinparam rectangle<<stereo>> {
  $AWS_common_skinparam()
  BackgroundColor $CUSTOM_COLOR_ORANGE_LIGHTEST
  BorderColor $CUSTOM_COLOR_ORANGE_DARK
  BorderThickness 2
  FontColor $DARK_DARK
}
!enddefinelong

!procedure $AWSGroupColoring($stereo, $border_color=$AWS_FG_COLOR, $border_style="plain")
skinparam rectangle<<$stereo>> {
  ArrowColor $CUSTOM_COLOR_BLUE_DARK
  BackgroundColor $CUSTOM_COLOR_PURPLE_LIGHT
  BorderColor $CUSTOM_COLOR_PURPLE_DARK
  BorderStyle $border_style
  BorderThickness 2
  FontColor $AWS_FG_COLOR
  FontSize 25
  Shadowing false
  StereotypeFontSize 0
}
!endprocedure

!include all_the_puml_files_I_need

It's very extensible, but there's a risk of it becoming difficult to maintain (for instance, migrating from v14 to v16 was a bit tougher than I expected). It would be fantastic if we could have some sort of alias for colors that are reused among all of the components. for instance:

!$AWS_DARK = false
!$PUML_MODE = 'dark'

!$CUSTOM_COLOR_BLUE_DARK = '#240E89'
!$CUSTOM_COLOR_ORANGE_LIGHTEST = '#FAE2D2'
!$CUSTOM_COLOR_ORANGE_LIGHT = '#F1B66A'
!$CUSTOM_COLOR_ORANGE_DARK = '#E18815'
!$CUSTOM_COLOR_PURPLE_LIGHT = '#DCDEEB'
!$CUSTOM_COLOR_PURPLE_DARK = '#903AA9'

!$AWS_FG_COLOR = $DARK_DARK
!$AWS_BG_COLOR = $CUSTOM_COLOR_PURPLE_LIGHT
!$AWS_ARROW_COLOR = $CUSTOM_COLOR_BLUE_DARK

!define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v16.0/dist
!include AWSPuml/AWSCommon.puml
!include all_the_puml_files_I_need

This way we can fully color ALL the components thanks to AWS_deployment_skinparam, AWSEntityColoring, AWSGroupColoring

etc...