<?xml version="1.0" standalone="no"?>
<!--
  Copyright 1999-2004 The Apache Software Foundation

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<!-- $Id$ -->
<!DOCTYPE document PUBLIC "-//APACHE//DTD Documentation V1.1//EN"
    "http://cvs.apache.org/viewcvs.cgi/*checkout*/xml-forrest/src/core/context/resources/schema/dtd/document-v12.dtd">
<document>
  <header>
    <title>FOP: Graphics Formats</title>
    <version>$Revision$</version>
  </header>
  <body>
    <section id="support-overview">
      <title>Overview of Graphics Support</title>
      <p>
        The table below summarizes the <em>theoretical</em> support for graphical formats within FOP. In other words, within the constraints of the limitations listed here, these formats <em>should</em> work. However, many of them have not been tested, and there may be limitations that have not yet been discovered or documented. The packages needed to support some formats are not included in the FOP distribution and must be installed separately. Follow the links in the "Support Thru" column for more details.
      </p>
      <table>
        <tr>
          <th>Format</th>
          <th>Type</th>
          <th>Support Thru</th>
        </tr>
        <tr>
          <td><link href="#bmp">BMP</link> (Microsoft Windows Bitmap)</td>
          <td>bitmap</td>
          <td><link href="#native">FOP native</link></td>
        </tr>
        <tr>
          <td><link href="#eps">EPS</link> (Encapsulated PostScript)</td>
          <td>metafile (both bitmap and vector), probably most frequently used for vector drawings</td>
          <td><link href="#native">FOP native</link> (limited support, see restrictions below)</td>
        </tr>
        <tr>
          <td>GIF (Graphics Interchange Format)</td>
          <td>bitmap</td>
          <td><link href="#native">FOP native</link></td>
        </tr>
        <tr>
          <td><link href="#jpeg">JPEG</link> (Joint Photographic Experts Group)</td>
          <td>bitmap</td>
          <td><link href="#native">FOP native</link></td>
        </tr>
        <tr>
          <td><link href="#png">PNG</link> (Portable Network Graphic)</td>
          <td>bitmap</td>
          <td><link href="#jimi">JIMI</link> or <link href="#jai">JAI</link></td>
        </tr>
        <tr>
          <td><link href="#svg">SVG</link> (Scalable Vector Graphics)</td>
          <td>vector (with embedded bitmaps)</td>
          <td><link href="#batik">Batik</link></td>
        </tr>
        <tr>
          <td><link href="#tiff">TIFF</link> (Tag Image Format File)</td>
          <td>bitmap</td>
          <td><link href="#native">FOP native</link> or <link href="#jai">JAI</link>, depending on the subformat. See <link href="#tiff">TIFF</link> for more details.(JIMI also supports TIFF, but this has not been implemented within FOP).</td>
        </tr>
      </table>
    </section>
    <section id="packages">
      <title>Graphics Packages</title>
      <section id="native">
        <title>FOP Native</title>
        <p>
          FOP has native ability to handle some graphic file formats.
        </p>
      </section>
      <section id="jimi">
        <title>JIMI</title>
        <p>
          Because of licensing issues, the JIMI image library is not included in the FOP distribution. First, <fork href="http://java.sun.com/products/jimi">download</fork> and install it.
Then, copy the file "JimiProClasses.zip" from the archive to {fop-install-dir}/lib/jimi-1.0.jar. Please note that FOP binary distributions are compiled with JIMI support, so there is no need for you to build FOP to add the support. If jimi-1.0.jar is installed in the right place, it will automatically be used by FOP, otherwise it will not.
        </p>
      </section>
      <section id="jai">
        <title>JAI (Java Advanced Imaging API)</title>
        <warning>JAI support is available for Release 0.20.5 and later. The comments in this section do not apply to releases earlier than 0.20.5.</warning>
        <p>
          FOP has been compiled with JAI support, but JAI is not included in the FOP distribution.
To use it, install <link href="http://java.sun.com/products/java-media/jai">JAI</link>, then copy the jai_core.jar and the jai_codec.jar files to {fop-install-dir}/lib.
JAI is much faster than JIMI, but is not available for all platforms. See <link href="http://java.sun.com/products/java-media/jai/forDevelopers/jaifaq.html#platforms">What platforms are supported?</link> on the JAI FAQ page for more details.
        </p>
      </section>
      <section id="batik">
        <title>Batik</title>
        <p>Current FOP distributions include a distribution of the Apache Software Foundation's <jump href="http://xml.apache.org/batik">Batik</jump> version 1.5beta4.
It is automatically installed with FOP.
Because Batik's API changes frequently, it is highly recommended that you use the version that ships with FOP, at least when running FOP.</p>
        <warning>Batik must be run in a graphical environment.</warning>
        <p>Batik must be run in a graphical environment.
It uses AWT classes for rendering SVG, which in turn require an X server on Unixish systems.
If you run a server without X, or if you can't connect to the X server due to security restrictions or policies (a so-called "headless" environment), SVG rendering will fail.</p>
        <p>Here are some workarounds:</p>
        <ul>
          <li>If you are using JDK 1.4, start it with the <code>-Djava.awt.headless=true</code> command line option.</li>
          <li>Install an X server which provides an in-memory framebuffer without actually using a screen device or any display hardware. One example is Xvfb.</li>
          <li>Install a toolkit which emulates AWT without the need for an underlying X server. One example is the <link href="http://www.eteks.com/pja/en">PJA toolkit</link>, which is free and comes with detailed installation instructions.</li>
        </ul>
      </section>
    </section>
    <section id="bmp">
      <title>BMP</title>
      <p>FOP native support for BMP images is limited to the RGB color-space.</p>
    </section>
    <section id="eps">
      <title>EPS</title>
      <p>FOP provides support for two output targets:</p>
      <ul>
        <li>PostScript (full support).</li>
        <li>
          PDF (partial support). Due to the lack of a built-in PostScript interpreter, FOP 
          can only embed the EPS file into the PDF. Acrobat Reader will not currently display 
          the EPS (it doesn't have a PostScript interpreter, either) but it will be shown 
          correctly when you print the PDF on a PostScript-capable printer. PostScript devices 
          (including GhostScript) will render the EPS correctly.
        </li>
      </ul>
      <p>
        Other output targets can't be supported at the moment because
        FOP lacks a PostScript interpreter.
      </p>
    </section>
    <section id="jpeg">
      <title>JPEG</title>
      <p>FOP native support of JPEG does not include all variants, especially those containing unusual color lookup tables and color profiles.
If you have trouble with a JPEG image in FOP, try opening it with an image processing program (such as Photoshop or Gimp) and then saving it.
Specifying 24-bit color output may also help.
For the PDF and PostScript renderers most JPEG images can be passed through without decompression.
User reports indicate that grayscale, RGB, and CMYK color-spaces are all rendered properly.
      </p>
    </section>
    <section id="png">
      <title>PNG</title>
      <p>If using JAI for PNG support, only RGB and RGBA color-spaces are supported for FOP rendering.</p>
    </section>
    <section id="svg">
      <title>SVG</title>
      <section id="svg-intro">
        <title>Introduction</title>
        <p>FOP uses <link href="#batik">Batik</link> for SVG support.
This format can be handled as an <code>fo:instream-foreign-object</code> or in a separate
file referenced with <code>fo:external-graphic</code>.</p>
      <note>   
Batik's SVG Rasterizer utility may also be used to convert standalone SVG
documents into PDF.  For more information please see the
<link href="http://xml.apache.org/batik/svgrasterizer.html">SVG Rasterizer documentation</link>
on the Batik site.
      </note>
      </section>
      <section id="svg-pdf-graphics">
        <title>Placing SVG Graphics into PDF</title>
        <p>
The SVG is rendered into PDF by using PDF commands to draw and fill
lines and curves. This means that the graphical objects created with
this remain as vector graphics.
        </p>
        <p>
There are a number of SVG things that cannot be converted directly into
PDF. Parts of the graphic such as effects, patterns and images are inserted
into the PDF as a raster graphic. The resolution of this graphic may not
be ideal depending on the FOP dpi (72dpi) and the scaling for that graphic.
We hope to improve this in the future.</p>
        <p>
Currently transparency is not supported in PDF so many svg images that
contain effects or graphics with transparent areas will not be displayed
correctly.
        </p>
      </section>
      <section id="svg-pdf-text">
        <title>Placing SVG Text into PDF</title>
        <p>If possible, Batik will use normal PDF text when inserting text. It does
this by checking if the text can be drawn normally and the font is
supported. This example svg <link href="../dev/svg/text.svg">text.svg</link> /
<!--link href="../dev/svg/text.pdf"-->text.pdf<!--/link-->
shows how various types and effects with text are handled.
Note that tspan and outlined text are not yet implemented.</p>
        <p>
Otherwise, text is converted and drawn as a set of shapes by batik, using the stroking text painter.
This means that a typical character will
have about 10 curves (each curve consists of at least 20 characters).
This can make the pdf files large and when the pdf is viewed the
viewer does not normally draw those fine curves very well (turning on
Smooth Line Art in the Acrobat preferences will fix this).
If the text is inserted into the PDF using the inbuilt text commands
for PDF it will use a single character.
        </p>
        <p>
For PDF output, there is a <link href="configuration.html#svg-strokeSVGText">configuration option to force SVG text to be rendered as text</link>.
The drawback to this approach is that it is effective only for available fonts (including embedded fonts).
Font sizes are rounded to the next integer point size.
This will be improved in the future.
        </p>
        <p>Note that because SVG text can be rendered as either text or a vector graphic, you may need to consider settings in your viewer for both.
The Acrobat viewer has both "smooth line art" and "smooth text" settings that may need to be set for SVG images to be displayed nicely on your screen (see Edit / Preferences / Display).
This setting will not affect the printing of your document, which should be OK in any case, but will only affect the quality of the screen display.</p>
      </section>
      <section id="svg-scaling">
        <title>Scaling</title>
        <p>Currently, SVG images are rendered with the dimensions specified <em>in the SVG file</em>, within the viewport specified in the fo:external-graphic element.
For everything to work properly, the two should be equal.
The SVG standard leaves this issue as an implementation detail.
FOP will probably implement a scaling mechanism in the future.</p>
      </section>
      <section id="svg-problems">
        <title>Known Problems</title>
        <ul>
          <li>
soft mask transparency is combined with white so that it looks better
on pdf 1.3 viewers but this causes the soft mask to be slightly lighter
or darker on pdf 1.4 viewers
          </li>
          <li>
there is some problem with a gradient inside a pattern causing a pdf
error when viewed in acrobat 5
          </li>
          <li>
text is not always handled correctly, it may select the wrong font
especially if characters have multiple fonts in the font list
          </li>
          <li>
more pdf text handling could be implemented
It could draw the string using the attributed character iterator
to handle tspans and other simple changes of text.
          </li>
          <li>
JPEG images are not inserted directly into the pdf document
This area has not been implemented yet since the appropriate
method in batik is static
          </li>
          <li>
Uniform transparency for images and other svg elements that are converted
into a raster graphic are not drawn properly in PDF. The image is opaque.
          </li>
        </ul>
      </section>
    </section>
    <section id="tiff">
      <title>TIFF</title>
      <p>FOP-native TIFF support is limited to PDF and PostScript output only. Also, according to user reports, FOP's native support for TIFF is limited to images with the following characteristics (all must be true for successful rendering):</p>
      <ul>
        <li>single channel images (i.e., bi-level and grayscale only)</li>
        <li>uncompressed images, or images using CCITT T.4, CCITT T.6, or JPEG compression</li>
        <li>images using white-is-zero encoding in the TIFF PhotometricInterpretation tag</li>
      </ul>
      <p><em>JAI:</em> Supports RGB and RGBA only for FOP rendering.</p>
    </section>
    <section id="resolution">
      <title>Graphics Resolution</title>
      <p>Some bitmapped image file formats store a dots-per-inch (dpi) or other resolution value. Since PDF and most output formats do not have a concept of resolution, but only of absolute image units (i.e. pixels) FOP ignores the resolution values as well. Instead, FOP uses the dimensions of the image as specified in the fo:external-graphic element to render the image:</p>
      <ul>
        <li>If no dimensions are given, FOP uses a default value of 72 dpi to compute the graphic's dimensions. For example, suppose a graphic 300 pixels wide and 400 pixels high. FOP will render the graphic at 4.167 inches wide, 5.555 inches high, with an apparent resolution of 72 dpi.</li>
        <li>If only one dimension is given, FOP by default uses the same aspect ratio to compute the other dimension (to avoid the appearance of stretching). For example, suppose a graphic 300 pixels wide and 400 pixels high, for which content-width = ".5in". FOP will compute the content-height = .667 inches, and will render the graphic at that size, with an apparent resolution of 600 dpi.</li>
        <li>If both dimensions are given, FOP simply renders the image in that space. For example, suppose a graphic 300 pixels wide and 400 pixels high, for which content-width = "3in" and content-height = "4in". FOP will render the graphic at that size, with an apparent resolution of 100 dpi.</li>
      </ul>
      <p>If you need a higher apparent output resolution for bitmapped images, first make sure that at least one dimension of the image is defined in your XSL-FO input. Apart from that, resolution problems are in the image file itself, and must be corrected there: use or create a higher-resolution image file.</p>
      <note>The explanation above describes only the basic default behavior. There are other attributes of the fo:external-graphic element that can affect the behavior described above.</note>
    </section>
    <section id="caching">
      <title>Image caching</title>
      <p>
        FOP caches images between runs. The URL is used as a key to identify images which means that when
        a particular URL appears again, the image is taken from the cache. If you have a servlet that
        generates a different image each time it is called with the same URL you need to use a constantly 
        changing dummy parameter on the URL to avoid caching.
      </p>
      <p>
        Currently, the images are not automatically released when an OutOfMemoryError is imminent. The
        image cache can grow to a considerable size over time when a lot of different URLs are in use.
        Starting with version 0.20.5 you can call <code>org.apache.fop.image.FopImageFactory.resetCache()</code>
        to manually empty the cache. Image caching will be improved as part of our redesign effort.
      </p>
    </section>
  </body>
</document>
2'>242</a>
<a id='n243' href='#n243'>243</a>
</pre></td>
<td class='lines'><pre><code><style>pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.highlight .hll { background-color: #ffffcc }
.highlight .c { color: #888888 } /* Comment */
.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight .k { color: #008800; font-weight: bold } /* Keyword */
.highlight .ch { color: #888888 } /* Comment.Hashbang */
.highlight .cm { color: #888888 } /* Comment.Multiline */
.highlight .cp { color: #cc0000; font-weight: bold } /* Comment.Preproc */
.highlight .cpf { color: #888888 } /* Comment.PreprocFile */
.highlight .c1 { color: #888888 } /* Comment.Single */
.highlight .cs { color: #cc0000; font-weight: bold; background-color: #fff0f0 } /* Comment.Special */
.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #aa0000 } /* Generic.Error */
.highlight .gh { color: #333333 } /* Generic.Heading */
.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #555555 } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #666666 } /* Generic.Subheading */
.highlight .gt { color: #aa0000 } /* Generic.Traceback */
.highlight .kc { color: #008800; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008800; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008800; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008800 } /* Keyword.Pseudo */
.highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */
.highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */
.highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */
.highlight .na { color: #336699 } /* Name.Attribute */
.highlight .nb { color: #003388 } /* Name.Builtin */
.highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */
.highlight .no { color: #003366; font-weight: bold } /* Name.Constant */
.highlight .nd { color: #555555 } /* Name.Decorator */
.highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */
.highlight .nl { color: #336699; font-style: italic } /* Name.Label */
.highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */
.highlight .py { color: #336699; font-weight: bold } /* Name.Property */
.highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #336699 } /* Name.Variable */
.highlight .ow { color: #008800 } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */
.highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */
.highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */
.highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */
.highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */
.highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */
.highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */
.highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */
.highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */
.highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */
.highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */
.highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */
.highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */
.highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */
.highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */
.highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */
.highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */
.highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */
.highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */
.highlight .vc { color: #336699 } /* Name.Variable.Class */
.highlight .vg { color: #dd7700 } /* Name.Variable.Global */
.highlight .vi { color: #3333bb } /* Name.Variable.Instance */
.highlight .vm { color: #336699 } /* Name.Variable.Magic */
.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */</style><div class="highlight"><pre><span></span>---
title: Valo Examples
order: 55
layout: page
---

[[valo-examples]]
Valo examples
-------------

These are some sample looks for the Valo theme. You can use these as-is,
as a starting point, or while learning Valo.

[[blueprint]]
Blueprint
---------

[source,scss]
....
$v-app-loading-text: &quot;Blueprint Valo&quot;;
$v-background-color: #1a61b7;
$v-focus-color: #fff;
$v-panel-background-color: $v-background-color;
$v-overlay-background-color: $v-background-color;
$valo-menu-background-color: $v-background-color;
$v-overlay-shadow: 0 0 0 1px rgba(#fff, .5);
$v-window-shadow: $v-overlay-shadow;
$v-window-modality-curtain-background-color: $v-background-color;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border: 1px solid (v-tint 1.5);
$v-textfield-background-color: $v-background-color;
$v-font-family: sans-serif;
$v-font-size: 18px;

@import &quot;../valo/valo&quot;;
....

[[dark]]
Dark
----

[source,scss]
....
$v-app-loading-text: &quot;Dark Valo&quot;;
$v-background-color: #444d50;
$v-focus-color: #07a9ca;
$v-focus-style: 0 0 3px 2px $v-focus-color;
$v-bevel-depth: 40%;
$v-gradient: v-linear 12%;
$v-border-radius: 10px;
$v-font-family: Roboto, sans-serif;
$v-font-weight: 400;
$v-font-weight--header: 400;
$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);
$v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);
$v-textfield-bevel: inset 0 2px 2px v-shade;
$v-textfield-shadow: $v-shadow;
$v-unit-size: 40px;
$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);
$v-component-group-spacing: 6px;

@import &quot;../valo/valo&quot;;
....

[[facebook]]
Facebook
--------

[source,scss]
....
$v-app-loading-text: &quot;Facebook Valo&quot;;
$v-background-color: #fafafa;
$v-app-background-color: #e7ebf2;
$v-panel-background-color: #fff;
$v-focus-color: #3b5998;
$v-focus-style: 0 0 1px 1px rgba($v-focus-color, .5);
$v-border-radius: 3px;
$v-textfield-border-radius: 0;
$v-font-family: Helvetica, Arial, &#39;lucida grande&#39;, tahoma, verdana, arial, sans-serif;
$v-font-size: 14px;
$v-font-color: #37404E;
$v-font-weight: 400;
$v-link-text-decoration: none;
$v-shadow: 0 1px 0 (v-shade 0.2);
$v-bevel: inset 0 1px 0 v-tint;
$v-unit-size: 30px;
$v-gradient: v-linear 12%;
$v-overlay-shadow: 0 3px 8px v-shade, 0 0 0 1px (v-shade 0.7);
$v-shadow-opacity: 20%;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-border-radius: 0;

@import &quot;../valo/valo&quot;;
....

[[flat]]
Flat
----

[source,scss]
....
$v-app-loading-text: &quot;Flat Valo&quot;;

$v-font-family: &quot;Roboto&quot;, sans-serif;
$v-font-weight: 400;
$v-font-weight--header: 400;
$v-background-color: #fff;
$v-focus-color: rgb(150,190,90);
$v-luminance-threshold: 180;
$v-border: 2px solid v-shade;
$v-border-radius: 6px;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-link-text-decoration: false;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-selection-item-height: 30px;
$v-selection-item-border-radius: 0;
$valo-menu-background-color: #eee;

@import &quot;../valo/valo&quot;;

.valo-test {
  .v-button-primary.v-button-primary {
    background: #fff;
    border-color: $v-focus-color;
    color: $v-focus-color;
  }

  .v-button-danger.v-button-danger {
    background: #fff;
    border-color: $v-error-indicator-color;
    color: $v-error-indicator-color;
  }

  .v-slider-base:before,
  .v-slider-base:after {
    border: none !important;
  }
}
....

[[flat-dark]]
Flat Dark
---------

[source,scss]
....
$v-app-loading-text: &quot;Dark &amp; Flat Valo&quot;;

$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel: false;
$v-shadow: false;
$v-gradient: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border-radius: 0;
$v-border: 2px solid v-tone;
$v-overlay-shadow: 0 0 0 2px (v-tint 10);
$v-focus-style: $v-focus-color;
$v-font-family: &quot;Lato&quot;, sans-serif;
$v-font-weight--header: 600;

@import &quot;../valo/valo&quot;;
....

[[light]]
Light
-----

[source,scss]
....
$v-app-loading-text: &quot;Light Valo&quot;;

$v-background-color: hsl(0, 0, 99.5%);
$v-app-background-color: #fff;
$v-focus-color: hsl(218, 80%, 60%);
$v-border: 1px solid (v-shade 0.6);
$v-border-radius: 3px;
$v-bevel: inset 0 1px 0 v-tint;
$v-textfield-bevel: false;
$v-gradient: v-linear 3%;
$v-shadow: false;
$valo-menu-background-color: hsl(218, 20%, 98%);
$v-friendly-color: hsl(163, 61%, 41%);
$v-error-indicator-color: hsl(349, 66%, 56%);


@import &quot;../valo/valo&quot;;

.tests-valo-light .valo-menu .valo-menu-title {
  background: $v-app-background-color;
  color: $v-selection-color;
  text-shadow: none;
  border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
}
....

[[metro]]
Metro
-----

[source,scss]
....
$v-app-loading-text: &quot;Metro Valo&quot;;

$v-font-family: &quot;Source Sans Pro&quot;, sans-serif;
$v-app-background-color: #fff;
$v-background-color: #eee;
$v-focus-color: #0072C6;
$v-focus-style: 0 0 0 1px $v-focus-color;
$valo-menu-background-color: darken($v-focus-color, 10%);
$v-border: 0 solid v-shade;
$v-border-radius: 0px;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-textfield-border: 1px solid v-shade;
$v-link-text-decoration: none;
$v-overlay-shadow: 0 0 0 2px #000;
$v-overlay-border-width: 2px; // For IE8
$v-window-shadow: $v-overlay-shadow;
$v-selection-overlay-background-color: #fff;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-panel-border: 2px solid v-shade;

@import &quot;../valo/valo&quot;;
....
</pre></div>
</code></pre></td></tr></table>
</div> <!-- class=content -->
<div class='footer'>generated by <a href='https://git.zx2c4.com/cgit/about/'>cgit v1.2.3</a> (<a href='https://git-scm.com/'>git 2.39.1</a>) at 2025-07-29 23:46:47 +0000</div>
</div> <!-- id=cgit -->
</body>
</html>
