FEAT: New Theme: cloudscape-design

This commit is contained in:
Brett Schwarz 2022-11-13 12:37:55 -08:00
parent 6305887e97
commit a6a15a3e06
1 changed files with 659 additions and 0 deletions

View File

@ -0,0 +1,659 @@
''
'' Theme based off of the colors used by Cloudscape design
''
'' Author: Brett Schwarz
''
'!$PUML_OUTLINE = "true"
'!$PUML_BGCOLOR = "#0f1b2a"
'!$PUML_MODE = "dark"
!$PUML_THEME = "cloudscape-design"
!$THEME = "cloudscape-design"
''
'' User can specify the PUML_BGCOLOR via command line or set this variable before
'' loading this theme file. PUML_BGCOLOR is the background color of the image that is
'' generated by plantuml
''
!if %not(%variable_exists("$PUML_BGCOLOR"))
!$PUML_BGCOLOR = "transparent"
!endif
''
'' If no gradient is given, default to 20
''
!if %not(%variable_exists("$PUML_GRADIENT"))
!$PUML_GRADIENT = 20
!endif
''
'' User can specify the PUML_MODE via command line or set this variable before
'' loading this theme file. PUML_MODE is either 'light' PUML_MODE or 'dark' PUML_MODE.
''
!if %not(%variable_exists("$PUML_MODE"))
!$PUML_MODE = "light"
!endif
''
'' User can specify the PUML_OUTLINE via command line or set this variable before
'' loading this theme file. PUML_OUTLINE is either 'true' or 'false'.
''
!if %not(%variable_exists("$PUML_OUTLINE"))
!$PUML_OUTLINE = "false"
!endif
''
skinparam BackgroundColor $PUML_BGCOLOR
skinparam useBetaStyle false
!$ALPHA = "80"
''
'' Supplementary Colors
''
!$WHITE = "#FFF"
!$GRAY_LIGHT = "#222"
!$GRAY = "#868e96"
!$PRIMARY = "#0972d3"
!$WARNING = "#ecdd00"
!$LIGHT = "#d1d5db"
!$DARK = "#000716"
!$SECONDARY_TEXT = "#539fe5"
''
'' define colors based on PUML_MODE
''
!if ($PUML_MODE == "light")
!$PRIMARY_TEXT = $LIGHT
!$SECONDARY = "#eeeeee"
!$SECONDARY_LIGHT = %lighten($SECONDARY, $PUML_GRADIENT)
!$SUCCESS = "#037f0c"
!$INFO = "#0972d3"
!$DANGER = "#d91515"
!$SECONDARY_TEXT = $DARK
!$FGCOLOR = $DARK
!$DIAMOND_BD = %darken($SECONDARY, $PUML_GRADIENT)
!$GRAY_LIGHT = %lighten($GRAY, $PUML_GRADIENT)
!$GRAY_DARK = %darken($GRAY, $PUML_GRADIENT)
!$MAIN_BG = $WHITE
''
'' Assume if the background is transparent, that the
'' background will be dark for this theme
''
!assume transparent light
!else
!$TMP = $LIGHT
!$LIGHT = $DARK
!$DARK = $TMP
!$PRIMARY = "#539fe5"
!$PRIMARY_TEXT = $WHITE
!$SECONDARY = "#2a2e33"
!$SECONDARY_LIGHT = %lighten($SECONDARY, $PUML_GRADIENT)
!$SUCCESS = "#037f0c"
!$INFO = "#0972d3"
!$DANGER = "#ff5d64"
!$WARNING = "#fbf8cc"
!$SECONDARY_TEXT = $WHITE
!$FGCOLOR = $WHITE
!$DIAMOND_BD = %lighten($SECONDARY, $PUML_GRADIENT)
!$GRAY_LIGHT = %darken($GRAY, $PUML_GRADIENT)
!$GRAY_DARK = %lighten($GRAY, $PUML_GRADIENT)
!$MAIN_BG = "#0f1b2a"
''
'' Assume if the background is transparent, that the
'' background will be dark for this theme
''
!assume transparent dark
!endif
''
'' *_DARK = tint (lighter) of the main color
'' *_LIGHT = shade (darker) of the main color
''
!$PRIMARY_DARK = %darken($PRIMARY, $PUML_GRADIENT)
!$PRIMARY_LIGHT = %lighten($PRIMARY, $PUML_GRADIENT)
!$SECONDARY_DARK = %darken($SECONDARY, $PUML_GRADIENT)
!$SUCCESS_DARK = %darken($SUCCESS, $PUML_GRADIENT)
!$SUCCESS_LIGHT = %lighten($SUCCESS, $PUML_GRADIENT)
!$INFO_DARK = %darken($INFO, $PUML_GRADIENT)
!$INFO_LIGHT = %lighten($INFO, $PUML_GRADIENT)
!$DANGER_DARK = %darken($DANGER, $PUML_GRADIENT)
!$DANGER_LIGHT = %lighten($DANGER, $PUML_GRADIENT)
!$WARNING_DARK = %darken($WARNING, $PUML_GRADIENT)
!$WARNING_LIGHT = %lighten($WARNING, $PUML_GRADIENT)
!$DARK_DARK = %darken($DARK, $PUML_GRADIENT)
!$DARK_LIGHT = %lighten($DARK, $PUML_GRADIENT)
!$LIGHT_DARK = %darken($LIGHT, $PUML_GRADIENT)
!$LIGHT_LIGHT = %lighten($LIGHT, $PUML_GRADIENT)
''
'' Set text colors
''
!$INFO_TEXT = $WHITE
!$SUCCESS_TEXT = $WHITE
!$WARNING_TEXT = $WHITE
!$DANGER_TEXT = $WHITE
!$HEADER_TEXT = $WHITE
''
!if ($PUML_OUTLINE == "true")
!$HEADER_TEXT = $PRIMARY_TEXT
!$PRIMARY_TEXT = $PRIMARY_LIGHT
!$INFO_TEXT = $INFO
!$WARNING_TEXT = $WARNING_LIGHT
!$DARK_BG = $PUML_BGCOLOR
!$INFO_BG = $PUML_BGCOLOR
!$DANGER_BG = $PUML_BGCOLOR
!$WARNING_BG = $PUML_BGCOLOR
!$SECONDARY_BG = $PUML_BGCOLOR
!else
!$DARK_BG = $DARK
!$INFO_BG = $INFO
!$DANGER_BG = $DANGER
!$WARNING_BG = $WARNING
!$SECONDARY_BG = $SECONDARY
!endif
!unquoted function $alpha($color, $alpha) !return $color + $alpha
''
'' Called to make the text in the color of SUCCESS
''
!procedure $success($msg)
<font color=$SUCCESS><b>$msg
!endprocedure
''
'' Called to make the text in the color of DANGER
''
!procedure $failure($msg)
<font color=$DANGER><b>$msg
!endprocedure
''
'' Called to make the text in the color of WARNING
''
!procedure $warning($msg)
<font color=$WARNING><b>$msg
!endprocedure
''
'' Called to use the primary color scheme
'' Different colors based on if PUML_OUTLINE
'' is true or not
''
!procedure $primary_scheme()
!if ($PUML_OUTLINE == "true")
FontColor $PRIMARY
BorderColor $PRIMARY
BackgroundColor $PUML_BGCOLOR
!else
FontColor $PRIMARY_TEXT
BorderColor $PRIMARY
BackgroundColor $PRIMARY_LIGHT-$PRIMARY
!endif
!endprocedure
''
'' Called to use the secondary color scheme
''
!procedure $secondary_scheme()
!if ($PUML_OUTLINE == "true")
FontColor $SECONDARY_DARK
BorderColor $SECONDARY_DARK
BackgroundColor $PUML_BGCOLOR
!else
FontColor $SECONDARY_TEXT
BorderColor $SECONDARY_DARK
BackgroundColor $SECONDARY_LIGHT-$SECONDARY
!endif
!endprocedure
''
'' HTTP Methods
''
!_POST = "<color #007a3e>POST</color>"
!_PUT = "<color #ea7400>PUT</color>"
!_DELETE = "<color #cf2a2a>DELETE</color>"
!_GET = "<color #009fdb>GET</color>"
!_PATCH = "<color #b5bd00>PATCH</color>"
!_HEAD = "<color #9012fe>HEAD</color>"
''
'' Global Default Values
''
skinparam defaultFontName "Verdana"
skinparam defaultFontSize 12
skinparam dpi 100
skinparam shadowing false
skinparam roundcorner 8
skinparam ParticipantPadding 40
skinparam BoxPadding 40
skinparam Padding 5
skinparam ArrowColor $DARK
skinparam stereotype {
CBackgroundColor $SECONDARY_LIGHT
CBorderColor $SECONDARY_DARK
ABackgroundColor $SUCCESS_LIGHT
ABorderColor $SUCCESS_DARK
IBackgroundColor $DANGER_LIGHT
IBorderColor $DANGER_DARK
EBackgroundColor $WARNING_LIGHT
EBorderColor $WARNING_DARK
NBackgroundColor $INFO_LIGHT
NBorderColor $INFO_DARK
}
skinparam title {
FontSize 20
BorderRoundCorner 8
BorderThickness 1
BackgroundColor $SECONDARY_LIGHT-$SECONDARY
FontColor $PRIMARY
BorderColor $SECONDARY
}
skinparam legend {
$secondary_scheme()
BackgroundColor transparent
}
!startsub swimlane
skinparam swimlane {
BorderColor $INFO
BorderThickness 2
TitleBackgroundColor $SECONDARY_LIGHT-$SECONDARY
TitleFontColor $PRIMARY
}
!endsub
!startsub activity
skinparam activity {
$primary_scheme()
BarColor $SUCCESS
StartColor $INFO
EndColor $INFO
''
DiamondBackgroundColor $SECONDARY_BG
DiamondBorderColor $DIAMOND_BD
DiamondFontColor $SECONDARY_TEXT
}
!endsub
!startsub participant
skinparam participant {
$primary_scheme()
ParticipantBorderThickness 2
}
!endsub
!startsub actor
skinparam actor {
$primary_scheme()
FontColor $FGCOLOR
}
!endsub
!startsub arrow
skinparam arrow {
Thickness 2
Color $GRAY_LIGHT
FontColor $FGCOLOR
}
!endsub
!startsub sequence
skinparam sequence {
ArrowThickness 2
BorderColor $PRIMARY
' For some reason sequence title font color does not pick up from global
TitleFontColor $PRIMARY
BackgroundColor $PUML_BGCOLOR
StartColor $PRIMARY
EndColor $PRIMARY
''
BoxBackgroundColor $alpha($PUML_BGCOLOR, $ALPHA)
BoxBorderColor $GRAY_DARK
BoxFontColor $GRAY_DARK
''
DelayFontColor $LIGHT
''
LifeLineBorderColor $PRIMARY
LifeLineBorderThickness 0
LifeLineBackgroundColor $SECONDARY
''
GroupBorderColor $DARK
GroupBorderThickness 1
GroupFontColor $DARK
GroupHeaderFontColor $INFO
GroupBackgroundColor $alpha($SECONDARY, $ALPHA)
GroupBodyBackgroundColor $alpha($PUML_BGCOLOR, $ALPHA)
GroupHeaderBackgroundColor $PUML_BGCOLOR
''
DividerBackgroundColor $SECONDARY
DividerBorderColor $SECONDARY_LIGHT
DividerBorderThickness 2
DividerFontColor $DARK
''
ReferenceAlignment left
ReferenceBackgroundColor $alpha($PUML_BGCOLOR, $ALPHA)
ReferenceBorderColor $SECONDARY
ReferenceBorderThickness 2
ReferenceFontColor $DARK
ReferenceHeaderFontColor $INFO
ReferenceHeaderBackgroundColor $alpha($SECONDARY, $ALPHA)
''
StereotypeFontColor $PRIMARY_TEXT
StereotypeFontSize 12
}
!endsub
!startsub partition
skinparam partition {
BorderColor $PRIMARY
FontColor $PRIMARY
BackgroundColor $PUML_BGCOLOR
}
!endsub
!startsub collections
skinparam collections {
$primary_scheme()
}
!endsub
!startsub control
skinparam control {
$primary_scheme()
FontColor $DARK
}
!endsub
!startsub entity
skinparam entity {
$primary_scheme()
FontColor $DARK
}
!endsub
!startsub boundary
skinparam boundary {
$primary_scheme()
FontColor $DARK
}
!endsub
!startsub agent
skinparam agent {
BackgroundColor $WARNING
BorderColor $WARNING_LIGHT
FontColor $GRAY
}
!endsub
!startsub note
skinparam note {
BorderThickness 1
BackgroundColor $INFO_BG
BorderColor $INFO
FontColor $INFO_TEXT
}
!endsub
!startsub artifact
skinparam artifact {
BackgroundColor $DARK_BG
BorderColor $DARK_DARK
FontColor $LIGHT
}
!endsub
!startsub component
skinparam component {
$primary_scheme()
}
!endsub
!startsub interface
skinparam interface {
BackgroundColor $DANGER_DARK
BorderColor $DANGER
FontColor $DARK
}
!endsub
!startsub storage
skinparam storage {
BackgroundColor $WARNING_BG
BorderColor $WARNING_DARK
FontColor $GRAY
}
!endsub
!startsub node
skinparam node {
BackgroundColor $PUML_BGCOLOR
BorderColor $LIGHT
FontColor $LIGHT
}
!endsub
!startsub cloud
skinparam cloud {
BackgroundColor transparent
BorderColor $DARK
FontColor $FGCOLOR
}
!endsub
!startsub database
skinparam database {
$primary_scheme()
FontColor $FGCOLOR
StereotypeFontColor $FGCOLOR
}
!endsub
!startsub class
skinparam class {
$primary_scheme()
FontColor $HEADER_TEXT
HeaderBackgroundColor $PRIMARY_LIGHT-$PRIMARY
StereotypeFontColor $DARK
BorderThickness 1
AttributeFontColor $PRIMARY_TEXT
AttributeFontSize 11
}
!endsub
!startsub object
skinparam object {
$primary_scheme()
StereotypeFontColor $DARK
BorderThickness 1
AttributeFontColor $PRIMARY_TEXT
AttributeFontSize 11
}
!endsub
!startsub usecase
skinparam usecase {
$primary_scheme()
BorderThickness 2
StereotypeFontColor $PRIMARY
}
!endsub
!startsub rectangle
skinparam rectangle {
BackgroundColor $PUML_BGCOLOR
FontColor $SECONDARY_TEXT
BorderColor $SECONDARY_TEXT
BorderThickness 2
StereotypeFontColor $PRIMARY
}
!endsub
!startsub package
skinparam package {
BackgroundColor $PUML_BGCOLOR
BorderColor $SECONDARY_TEXT
FontColor $SECONDARY_TEXT
BorderThickness 2
}
!endsub
!startsub folder
skinparam folder {
BackgroundColor $SECONDARY_BG
BorderColor $WARNING
FontColor $WARNING
BorderThickness 2
}
!endsub
!startsub frame
skinparam frame {
BackgroundColor $SECONDARY_BG
BorderColor $INFO
FontColor $INFO
BorderThickness 2
}
!endsub
!startsub state
skinparam state {
$primary_scheme()
StartColor $INFO
EndColor $INFO
AttributeFontColor $SECONDARY_TEXT
AttributeFontSize 11
}
!endsub
!startsub queue
skinparam queue {
$primary_scheme()
}
!endsub
!startsub card
skinparam card {
BackgroundColor $INFO_BG
BorderColor $INFO_DARK
FontColor $INFO_TEXT
}
!endsub
!startsub file
skinparam file {
BackgroundColor $SECONDARY_BG
BorderColor $LIGHT
FontColor $FGCOLOR
}
!endsub
!startsub stack
skinparam stack {
$primary_scheme()
}
!endsub
!startsub map
skinparam map {
$primary_scheme()
}
!endsub
''
'' When mixing skinparam and <style>, it is very important to put <style> after skinparam
''
'' Style settings
''
<style>
wbsDiagram, mindmapDiagram {
root {
BackgroundColor $PUML_BGCOLOR
FontColor $PRIMARY_TEXT
HyperLinkColor $INFO_BG
LineColor $PRIMARY_DARK
LineThickness 1
Margin 10
Padding 6
Shadowing 0.0
}
node {
$primary_scheme()
Padding 15
RoundCorner 20
}
caption {
LineThickness 0
}
footer {
LineThickness 0
}
groupHeader {
BackgroundColor $SECONDARY_BG
FontColor $INFO_BG
FontStyle bold
}
header {
LineThickness 0
}
referenceHeader {
BackgroundColor $PUML_BGCOLOR
FontColor $DARK_BG
FontStyle bold
}
separator {
BackgroundColor $FGCOLOR
FontColor $PUML_BGCOLOR
FontStyle bold
}
title {
FontSize 20
BorderRoundCorner 8
BorderThickness 1
BackgroundColor $SECONDARY_LIGHT-$SECONDARY_BG
FontColor $PRIMARY_TEXT
BorderColor $SECONDARY_BG
}
}
nwdiagDiagram {
network {
$primary_scheme()
LineColor $PRIMARY_BG
LineThickness 1.0
FontColor $PRIMARY_DARK
}
server {
$primary_scheme()
}
arrow {
FontColor $PRIMARY_DARK
LineColor $PRIMARY_DARK
}
group {
BackGroundColor $LIGHT_BG
LineColor $LIGHT_DARK
LineThickness 2.0
Margin 5
Padding 5
}
}
ganttDiagram {
task {
$primary_scheme()
LineColor $PRIMARY_BG
Margin 10
Padding 6
}
note {
FontColor $INFO_TEXT
LineColor $INFO_DARK
BackGroundColor $INFO_BG
}
separator {
LineColor $SECONDARY_BG
BackGroundColor $secondary_scheme()
FontColor $SECONDARY_TEXT
}
milestone {
FontColor $INFO_BG
FontSize 16
FontStyle italic
BackGroundColor $DIAMOND_BG
LineColor $SECONDARY_DARK
}
timeline {
BackgroundColor $SECONDARY_BG
FontColor $SECONDARY_TEXT
}
closed {
BackgroundColor $WARNING_DARK
FontColor $WARNING_TEXT
}
}
</style>