Giter Club home page Giter Club logo

Comments (2)

hakanson avatar hakanson commented on June 11, 2024

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
}

from aws-icons-for-plantuml.

rion18 avatar rion18 commented on June 11, 2024

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...

from aws-icons-for-plantuml.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.