Switch documentation to use Radiance-based images

Tracked by #21
kirill-grouchnikov · Jun 22, 2018 · 6b86732 · 6b86732
1 parent 9df1767
commit 6b86732
Show file tree

Hide file tree

Showing 70 changed files with 135 additions and 135 deletions.
diff --git a/docs/flamingo/flamingo.md b/docs/flamingo/flamingo.md
@@ -2,7 +2,7 @@
 
 ### Breadcrumb bar
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/flamingo/master/www/images/thumbs/learn/breadcrumb-bar.png" width="310" height="170" border=0 align="left">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/flamingo/breadcrumb-bar.png" width="310" height="170" border=0 align="left">
 
 `BreadcrumbBar` facilitates quick navigation of multi-level hierarchies, such as file systems or XML documents. This functionality is commonly found in many web sites and is the main navigation tool in the Windows Explorer application.
 
@@ -15,7 +15,7 @@ Want to learn more? Browse the following packages:
 
 ### Command buttons
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/flamingo/master/www/images/thumbs/learn/command-button.png" width="372" height="367" border=0 align="right">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/flamingo/command-button.png" width="372" height="367" border=0 align="right">
 
 The `JCommandButton` and `JCommandToggleButton` provide a broad spectrum of functionality expected from modern UI button components. A short list of features available in Flamingo command buttons includes:
 
@@ -29,7 +29,7 @@ Want to learn more? Browse the [test applications](https://github.com/kirill-gro
 
 ### Command button strips and panels
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/flamingo/master/www/images/thumbs/learn/command-button-strip-panel.png" width="336" height="367" border=0 align="left">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/flamingo/command-button-strip-panel.png" width="336" height="367" border=0 align="left">
 
 `JCommandButtonStrip` allows hosting a number of command buttons in a single row or column, providing continuous visuals for the buttons.
 
@@ -47,7 +47,7 @@ Want to learn more? Browse the [test applications](https://github.com/kirill-gro
 
 ### Ribbon
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/flamingo/master/www/images/thumbs/learn/ribbon.png" width="340" height="210" border=0 align="right">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/flamingo/ribbon.png" width="340" height="210" border=0 align="right">
 
 `JRibbon` provides the functionality of Microsoft Office 2007 Command Bar. A short list of features includes:
 

diff --git a/docs/images/resizable-icon.png b/docs/images/resizable-icon.png
diff --git a/docs/images/substance-extras/watermarks/binary.png b/docs/images/substance-extras/watermarks/binary.png
diff --git a/docs/images/substance-extras/watermarks/brushed-metal.png b/docs/images/substance-extras/watermarks/brushed-metal.png
diff --git a/docs/images/substance-extras/watermarks/bubbles.png b/docs/images/substance-extras/watermarks/bubbles.png
diff --git a/docs/images/substance-extras/watermarks/crosshatch.png b/docs/images/substance-extras/watermarks/crosshatch.png
diff --git a/docs/images/substance-extras/watermarks/exceed.png b/docs/images/substance-extras/watermarks/exceed.png
diff --git a/docs/images/substance-extras/watermarks/flame-fractal-kaleidoscope.png b/docs/images/substance-extras/watermarks/flame-fractal-kaleidoscope.png
diff --git a/docs/images/substance-extras/watermarks/flame-fractal-scriptures.png b/docs/images/substance-extras/watermarks/flame-fractal-scriptures.png
diff --git a/docs/images/substance-extras/watermarks/flame-fractal-singularity.png b/docs/images/substance-extras/watermarks/flame-fractal-singularity.png
diff --git a/docs/images/substance-extras/watermarks/flame-fractal-vortex.png b/docs/images/substance-extras/watermarks/flame-fractal-vortex.png
diff --git a/docs/images/substance-extras/watermarks/katakana.png b/docs/images/substance-extras/watermarks/katakana.png
diff --git a/docs/images/substance-extras/watermarks/latch.png b/docs/images/substance-extras/watermarks/latch.png
diff --git a/docs/images/substance-extras/watermarks/metal-wall.png b/docs/images/substance-extras/watermarks/metal-wall.png
diff --git a/docs/images/substance-extras/watermarks/mosaic.png b/docs/images/substance-extras/watermarks/mosaic.png
diff --git a/docs/images/substance-extras/watermarks/noise-copperplate-engraving.png b/docs/images/substance-extras/watermarks/noise-copperplate-engraving.png
diff --git a/docs/images/substance-extras/watermarks/noise-fabric.png b/docs/images/substance-extras/watermarks/noise-fabric.png
diff --git a/docs/images/substance-extras/watermarks/noise-magnetic-field.png b/docs/images/substance-extras/watermarks/noise-magnetic-field.png
diff --git a/docs/images/substance-extras/watermarks/noise-marble-vein.png b/docs/images/substance-extras/watermarks/noise-marble-vein.png
diff --git a/docs/images/substance-extras/watermarks/noise-maze.png b/docs/images/substance-extras/watermarks/noise-maze.png
diff --git a/docs/images/substance-extras/watermarks/noise-plankton.png b/docs/images/substance-extras/watermarks/noise-plankton.png
diff --git a/docs/images/substance-extras/watermarks/noise-wood.png b/docs/images/substance-extras/watermarks/noise-wood.png
diff --git a/docs/images/substance/colorschemes/aqua.png b/docs/images/substance/colorschemes/aqua.png
diff --git a/docs/images/substance/colorschemes/barby-pink.png b/docs/images/substance/colorschemes/barby-pink.png
diff --git a/docs/images/substance/colorschemes/bottle-green.png b/docs/images/substance/colorschemes/bottle-green.png
diff --git a/docs/images/substance/colorschemes/brown.png b/docs/images/substance/colorschemes/brown.png
diff --git a/docs/images/substance/colorschemes/charcoal.png b/docs/images/substance/colorschemes/charcoal.png
diff --git a/docs/images/substance/colorschemes/creme.png b/docs/images/substance/colorschemes/creme.png
diff --git a/docs/images/substance/colorschemes/dark-violet.png b/docs/images/substance/colorschemes/dark-violet.png
diff --git a/docs/images/substance/colorschemes/derived-desaturate.png b/docs/images/substance/colorschemes/derived-desaturate.png
diff --git a/docs/images/substance/colorschemes/derived-hueshift.png b/docs/images/substance/colorschemes/derived-hueshift.png
diff --git a/docs/images/substance/colorschemes/derived-invert.png b/docs/images/substance/colorschemes/derived-invert.png
diff --git a/docs/images/substance/colorschemes/derived-negate.png b/docs/images/substance/colorschemes/derived-negate.png
diff --git a/docs/images/substance/colorschemes/derived-saturate.png b/docs/images/substance/colorschemes/derived-saturate.png
diff --git a/docs/images/substance/colorschemes/derived-shaded.png b/docs/images/substance/colorschemes/derived-shaded.png
diff --git a/docs/images/substance/colorschemes/derived-shifted.png b/docs/images/substance/colorschemes/derived-shifted.png
diff --git a/docs/images/substance/colorschemes/derived-shiftedbackground.png b/docs/images/substance/colorschemes/derived-shiftedbackground.png
diff --git a/docs/images/substance/colorschemes/derived-tinted.png b/docs/images/substance/colorschemes/derived-tinted.png
diff --git a/docs/images/substance/colorschemes/derived-toned.png b/docs/images/substance/colorschemes/derived-toned.png
diff --git a/docs/images/substance/colorschemes/ebony.png b/docs/images/substance/colorschemes/ebony.png
diff --git a/docs/images/substance/colorschemes/jade-forest.png b/docs/images/substance/colorschemes/jade-forest.png
diff --git a/docs/images/substance/colorschemes/light-aqua.png b/docs/images/substance/colorschemes/light-aqua.png
diff --git a/docs/images/substance/colorschemes/lime-green.png b/docs/images/substance/colorschemes/lime-green.png
diff --git a/docs/images/substance/colorschemes/olive.png b/docs/images/substance/colorschemes/olive.png
diff --git a/docs/images/substance/colorschemes/orange.png b/docs/images/substance/colorschemes/orange.png
diff --git a/docs/images/substance/colorschemes/purple.png b/docs/images/substance/colorschemes/purple.png
diff --git a/docs/images/substance/colorschemes/raspberry.png b/docs/images/substance/colorschemes/raspberry.png
diff --git a/docs/images/substance/colorschemes/sepia.png b/docs/images/substance/colorschemes/sepia.png
diff --git a/docs/images/substance/colorschemes/steel-blue.png b/docs/images/substance/colorschemes/steel-blue.png
diff --git a/docs/images/substance/colorschemes/sun-glare.png b/docs/images/substance/colorschemes/sun-glare.png
diff --git a/docs/images/substance/colorschemes/sunset.png b/docs/images/substance/colorschemes/sunset.png
diff --git a/docs/images/substance/colorschemes/terracotta.png b/docs/images/substance/colorschemes/terracotta.png
diff --git a/docs/images/substance/colorschemes/ultramarine.png b/docs/images/substance/colorschemes/ultramarine.png
diff --git a/docs/images/substance/control-states-extended.png b/docs/images/substance/control-states-extended.png
diff --git a/docs/images/substance/control-states.png b/docs/images/substance/control-states.png
diff --git a/docs/neon/neon.md b/docs/neon/neon.md
@@ -2,7 +2,7 @@
 
 ### Resizable icons
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/flamingo/master/www/images/thumbs/learn/resizable-icon.png" width="248" height="274" border=0 align="right">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/neon/resizable-icon.png" width="248" height="274" border=0 align="right">
 
 The `ResizableIcon` extends the core `Icon` interface to allow scaling the icon visuals at runtime. This is especially relevant for controls that can be dynamically resized. This class is used extensively in Flamingo for such controls as ribbon buttons or file viewer panel, but can be used in core and third-party components as well.
 

diff --git a/docs/substance/getting-started.md b/docs/substance/getting-started.md
@@ -48,7 +48,7 @@ If you have problems, consult the online help for **javac** compiler. The compil
 
 You will see the following frame under the default Ocean look and feel:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/walkthrough/default-ocean.png" width="284" height="114">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/walkthrough/default-ocean.png" width="284" height="114">
 
 In order to run the same frame under **Substance** look and feel, you first need to choose the Substance skin that you would like to use (see the links at the end of this document). Suppose that you choose the Business skin. Now you have the following options:
 
@@ -106,7 +106,7 @@ Assuming that you have saved *radiance-substance.jar*, *radiance-trident.jar* an
 
 The result is the same frame under Substance Business look and feel:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/walkthrough/business-substance.png" width="284" height="114">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/walkthrough/business-substance.png" width="284" height="114">
 
 The other two options for setting Substance require changing the code. Go back to your Java editor and replace the `main()` method by:
 
@@ -154,7 +154,7 @@ If you don't want to create an explicit dependency on the Substance classes in y
 ```  
 You can run the application the same way as before. Here is how it looks like:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/walkthrough/graphite-substance.png" width="284" height="114">
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/walkthrough/graphite-substance.png" width="284" height="114">
 
 Where to go from here?
 

diff --git a/docs/substance/painters/custom-skinning.md b/docs/substance/painters/custom-skinning.md
@@ -25,30 +25,30 @@ Most of the Substance UI delegates use a combination of the above APIs. And even
 
 [Decoration painters](decoration.md) are used to provide distinct painting to some containers, this setting them "apart" from the rest of the application. As the pattern name implies, this works best on specialized containers and visual areas that are situated along the window edges. Here is an example of SwingX `JXHeader` component:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/jxheader.png" width="442" height="322"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/jxheader.png" width="442" height="322"/>
 
 In this scenario, the entire `JXHeader` component is marked to have decoration area type of `header`. SwingX's painter that is set on the component in its custom UI delegate calls the painting method that respects the decoration area type, resulting in consistent visual appearance across all Substance skins.
 
 Here is another example of this pattern, this time on a status bar component. Assuming that this component will be placed along the bottom side of the frame, the matching code uses the current decoration painter to provide a distinct appearance of status bar which is consistent with the title pane and menu bar:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/nebulabrickwall-skeleton.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/nebulabrickwall-skeleton.png" width="534" height="384"/>
 
 ### Border tracing
 
 Components that require consistent painting of borders or contours can use the border painter with the matching contour. Here is an example of border tracing in the `JRibbon` component from [Flamingo](../../flamingo/flamingo.md) component library:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/jribbon.png" width="600" height="210"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/jribbon.png" width="600" height="210"/>
 
 The UI delegates for the main `JRibbon` components and inner parts use the border painter extensively to create the required visuals. Note the outer contour of the ribbon that also includes the selected tab button, and the inner contours of the ribbon tasks.
 
 Here is another example of this pattern, this time on the `JCommandButton` component from Flamingo library. The custom UI delegate uses the border painter to paint the button border (a simpler contour in this case):
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/jcommandbutton.png" width="600" height="210"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/jcommandbutton.png" width="600" height="210"/>
 
 ### Inner fills
 
 This pattern is used to paint the inner fill of custom components (along with the border tracing pattern to paint the component contour). This pattern uses the fill painter with the matching contour. Here is an example of the `JRibbon` component from [Flamingo](../../flamingo/flamingo.md) component library:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/jtoggletabbutton.png" width="600" height="210"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/jtoggletabbutton.png" width="600" height="210"/>
 
 In this example, the first toggle tab button (`Page Layout`) is painted by the current fill painter, providing a consistent appearance with the rest of the application controls. Another example is the `Style 1` command button, where the button fill is painted by the current fill painter as well.
diff --git a/docs/substance/painters/decoration.md b/docs/substance/painters/decoration.md
@@ -8,31 +8,31 @@ The `org.pushingpixels.substance.api.SubstanceSlices.DecorationAreaType` class c
 
 The following screenshot is the main Substance test application under the Business Black Steel skin (click to see full size version):
 
-<a href="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/full.png"><img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/thumb.png" width="600" height="448"/></a>
+<a href="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/full.png"><img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/thumb.png" width="600" height="448"/></a>
 
 The next screenshot shows the `title` decoration area, which in this example includes the title pane of the main window:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/areas-title.png" width="600" height="448"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/areas-title.png" width="600" height="448"/>
 
 The next screenshot shows the `header` decoration area, which in this example includes the menu bar of the main window:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/areas-header.png" width="600" height="448"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/areas-header.png" width="600" height="448"/>
 
 The next screenshot shows the `toolbar` decoration area, which in this example includes the tool bar of the main window:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/areas-toolbar.png" width="600" height="448"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/areas-toolbar.png" width="600" height="448"/>
 
 The next screenshot shows the `footer` decoration area, which in this example includes the status bar component:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/areas-footer.png" width="600" height="448"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/areas-footer.png" width="600" height="448"/>
 
 The next screenshot shows the `general` decoration area, which in this example includes the task pane container component:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/areas-general.png" width="600" height="448"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/areas-general.png" width="600" height="448"/>
 
 Let's go back to the original screenshot:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/decoration/thumb.png" width="600" height="448"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/decoration/thumb.png" width="600" height="448"/>
 
 It illustrates that the specific skin assigns different color schemes to different decoration areas. The controls in those areas get the background and foreground colors based on their assigned color scheme (without any custom application code), thus creating visual distinction between different application areas.
 

diff --git a/docs/substance/painters/overlay.md b/docs/substance/painters/overlay.md
@@ -6,11 +6,11 @@
 
 The overlays are best illustrated with screenshots. The following screenshot is a skeleton window under the [Nebula Brick Wall](../skins/toneddown.md#nebula-brick-wall) skin:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/nebulabrickwall-skeleton.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/nebulabrickwall-skeleton.png" width="534" height="384"/>
 
 This skin defines custom visual appearance for the title pane, the menu bar and the status bar - the background of these areas is painted by the matching decoration painter - in this case, the `org.pushingpixels.substance.api.painter.decoration.MarbleNoiseDecorationPainter`. To add the final polishing touch and create a unique visual footprint for this skin, we use a number of overlay painters:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/nebulabrickwall-overlays.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/nebulabrickwall-overlays.png" width="534" height="384"/>
 
 The Nebula Brick Wall skin defines two separate overlay painters, each one associated with the relevant decoration areas:
 
@@ -36,11 +36,11 @@ this.addOverlayPainter(this.bottomLineOverlayPainter,
 
 Here is the same skeleton window under the [Gemini](../skins/toneddown.md#gemini) skin:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/gemini-skeleton.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/gemini-skeleton.png" width="534" height="384"/>
 
 This skin defines custom visual appearance for the title pane, the menu bar, the toolbars and the status bar - the background of these areas is painted by the matching [decoration painter](decoration.md) - in this case, the `org.pushingpixels.substance.api.painter.decoration.MatteDecorationPainter`. To add the final polishing touch and create a unique visual footprint for this skin, we use overlay painters:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/gemini-overlays.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/gemini-overlays.png" width="534" height="384"/>
 
 The Gemini skin defines a number of overlay painters, each one associated with the relevant decoration areas:
 
@@ -82,11 +82,11 @@ This skin shows two different ways to add double-line bezel separators - the fir
 
 The last example comes from the [Twilight](../skins/dark.md#twilight) skin:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/twilight-skeleton.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/twilight-skeleton.png" width="534" height="384"/>
 
 This skin defines custom visual appearance for the title pane, the menu bar, the toolbars and the status bar - the background of these areas is painted by the matching decoration painter - in this case, the `org.pushingpixels.substance.api.painter.decoration.MatteDecorationPainter`. To add the final polishing touch and create a unique visual footprint for this skin, we use overlay painters:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/painters/overlay/twilight-overlays.png" width="534" height="384"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/painters/overlay/twilight-overlays.png" width="534" height="384"/>
 
 The Twilight skin defines a number of overlay painters, each one associated with the relevant decoration areas:
 

diff --git a/docs/substance/skins/colorschemeassociationkinds.md b/docs/substance/skins/colorschemeassociationkinds.md
@@ -2,7 +2,7 @@
 
 Color scheme association kinds in Substance are best illustrated by a simple example:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/color-scheme-association-kinds.png" width="96" height="96"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/color-scheme-association-kinds.png" width="96" height="96"/>
 
 This is a screenshot of a `JCheckBox` icon under 72 point font. This checkmark icon has three different visual areas: inner fill, border and the "V" mark. Each one of these areas is painted with a different [color scheme](colorschemes.md), and this is allowed by using the relevant **color scheme association kinds**.
 
@@ -53,7 +53,7 @@ In our case, we want to specify different color schemes for different visual are
 
 Going back once again to the original image:
 
-<img src="https://raw.githubusercontent.com/kirill-grouchnikov/substance/master/www/images/screenshots/color-scheme-association-kinds.png" width="96" height="96"/>
+<img src="https://raw.githubusercontent.com/kirill-grouchnikov/radiance/master/docs/images/substance/color-scheme-association-kinds.png" width="96" height="96"/>
 
 Here is the outline of the relevant configuration code: