docs: restore Lumo theme reference

articles/components/themes/index.adoc

@@ -0,0 +1,12 @@
+---
+title: Themes
+page-title: Themes
+description: Theme references
+meta-description: Theme references
+order: 0
+---
+
+
+= Themes
+
+section_outline::[]

articles/components/themes/lumo/index.adoc

@@ -0,0 +1,50 @@
+---
+title: Lumo
+page-title: Lumo Theme Reference
+description: Lumo Theme Reference
+meta-description: Lumo Theme Reference
+---
+
+
+= Lumo
+
+Lumo is the original Vaadin theme. It's based on a set of <<lumo-style-properties#, customizable style properties>>, and comes with built-in dark and compact variants.
+
+.Lumo Style Properties Example & Use in Vaadin Components
+[.fill.white]
+image::_images/lumo-properties.png[A small sample of Lumo style properties and their use in Vaadin components, 400]
+
+The look and feel of all Vaadin components can be easily customized in a consistent manner across the entire application by supplying your own values to these style properties.
+
+The built-in dark and compact variants are predefined sets of style property values that can be applied to the entire application or to parts of it.
+
+The Lumo theme also includes a comprehensive set of CSS utility classes that can be applied to HTML elements and layout components through Java, to change their styling without writing any CSS of your own.
+
+
+== Light & Dark Color Schemes
+
+In the screenshot here, you can see the difference between the default light color variant on the left, and the dark variant on the right -- which are both built into Lumo.
+
+image::_images/lumo-light-and-dark.png[Lumo theme Light and Dark variants]
+
+See <<{articles}/styling/themes#color-schemes,Color Schemes>> for how to apply different color schemes in your application.
+
+
+== Compact Preset
+
+Lumo also has a compact preset that reduces fonts sizes -- and proportionally all Vaadin components. It's applied by loading an additional stylesheet containing a modified set of Lumo sizing properties:
+
+[source,java]
+----
+@StyleSheet(Lumo.STYLESHEET)
+@StyleSheet(Lumo.COMPACT_STYLESHEET)
+public class Application implements AppShellConfigurator {
+    ...
+}
+----
+
+== Topics
+
+The following topics are covered in this section:
+
+section_outline::[]

articles/components/themes/lumo/lumo-style-properties/color.adoc

@@ -0,0 +1,263 @@
+---
+title: Color
+page-title: How to use color properties in Lumo | Vaadin
+description: Colors and their corresponding style properties defined in the Lumo theme.
+meta-description: Learn to apply Lumo color properties to customize your Vaadin application's visual design.
+order: 10
+page-links:
+  - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/color.css[Source]
+  - https://www.figma.com/file/IxQ49ZwaHwk7w7dhbtjFp0Uy/Vaadin-Design-System?node-id=714%3A3821[Figma Library]
+---
+
+= Lumo Colors
+
+// Ensure Lumo theme props are loaded for this page
+[.example.embedded.render-only]
+--
+[source,typescript]
+----
+include::{root}/frontend/demo/foundation/lumo-tokens.ts[render,persistent]
+----
+--
+
+Lumo defines a set of style properties (i.e., CSS custom properties) for colors. You can use these properties to apply a consistent color palette across your application.
+
+You can use the built-in <<{articles}/styling/themes#color-schemes, light and dark color schemes>> to switch the color palette of all components in your application. This page lists and displays the available color properties in Lumo.
+
+Lumo uses the light theme variant, by default. You can change colors for the light theme by customizing the style properties, like this:
+
+[source,css]
+----
+html {
+  --lumo-primary-color: blue;
+}
+----
+
+If you're using the Lumo Dark theme variant, customize colors after the `[theme~="dark"]` selector like this:
+
+[source,css]
+----
+[theme~="dark"] {
+  --lumo-primary-color: red;
+}
+----
+
+By using the `~=` operator in the `[theme~="dark"]` selector it'll match the color when multiple theme variants are defined on a single element. For example, if you use the `theme="small dark"` attribute on a HTML element somewhere in the global style scope of your application, the color change applies to it, as well. This helps you achieve a unified appearance between the different components in your application. Using only the `=` operator here is slightly more performant, but it won't match the color on other instances.
+
+
+== Base
+
+The base color is used as the main background color for the system. The <<grayscale>> colors are designed to be used on top of it, and the <<text>> colors are designed to provide sufficient contrast with it.
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-base-color)]*Base*
+| [custom-property]#--lumo-base-color#
+
+|===
+
+
+== Grayscale
+
+These colors form the foundation for your application colors. The grayscale colors are useful for dividing pages into sections with different backgrounds and borders, or they might be used as text colors.
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-contrast-5pct)]*Contrast 5%* +
+Button background. Button toolbar. Secondary section background.
+| [custom-property]#--lumo-contrast-5pct#
+
+| [preview(--lumo-contrast-10pct)]*Contrast 10%* +
+Input field background.
+| [custom-property]#--lumo-contrast-10pct#
+
+| [preview(--lumo-contrast-20pct)]*Contrast 20%* +
+Divider border color.
+| [custom-property]#--lumo-contrast-20pct#
+
+| [preview(--lumo-contrast-30pct)]*Contrast 30%* +
+Disabled text.
+| [custom-property]#--lumo-contrast-30pct#
+
+| [preview(--lumo-contrast-40pct)]*Contrast 40%* +
+| [custom-property]#--lumo-contrast-40pct#
+
+| [preview(--lumo-contrast-50pct)]*Contrast 50%* +
+Tertiary text.
+| [custom-property]#--lumo-contrast-50pct#
+
+| [preview(--lumo-contrast-60pct)]*Contrast 60%* +
+Icons.
+| [custom-property]#--lumo-contrast-60pct#
+
+| [preview(--lumo-contrast-70pct)]*Contrast 70%* +
+Secondary text.
+| [custom-property]#--lumo-contrast-70pct#
+
+| [preview(--lumo-contrast-80pct)]*Contrast 80%* +
+| [custom-property]#--lumo-contrast-80pct#
+
+| [preview(--lumo-contrast-90pct)]*Contrast 90%* +
+Body text.
+| [custom-property]#--lumo-contrast-90pct#
+
+| [preview(--lumo-contrast)]*Contrast 100%* +
+Heading text.
+| [custom-property]#--lumo-contrast#
+
+|===
+
+
+== Primary
+
+This is the most prominent color in the system. It's used to bring attention to certain elements in the interface. Accompanying text and contrast colors are also defined.
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-primary-color-10pct)]*Primary 10%* +
+Badge background.
+| [custom-property]#--lumo-primary-color-10pct#
+
+| [preview(--lumo-primary-color-50pct)]*Primary 50%* +
+Focus outline color.
+| [custom-property]#--lumo-primary-color-50pct#
+
+| [preview(--lumo-primary-color)]*Primary 100%* +
+Primary button background.
+| [custom-property]#--lumo-primary-color#
+
+| [preview(--lumo-primary-text-color)]*Primary Text* +
+Secondary & tertiary button text.
+| [custom-property]#--lumo-primary-text-color#
+
+| [preview(--lumo-primary-contrast-color)]*Primary Contrast* +
+Primary button text.
+| [custom-property]#--lumo-primary-contrast-color#
+
+|===
+
+
+== Error
+
+The color red is most often used for errors. It's used for error indicators, error messages, and buttons that can cause permanent data loss. Accompanying text and contrast colors are also defined.
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-error-color-10pct)]*Error 10%* +
+Error badge background.
+| [custom-property]#--lumo-error-color-10pct#
+
+| [preview(--lumo-error-color-50pct)]*Error 50%* +
+| [custom-property]#--lumo-error-color-50pct#
+
+| [preview(--lumo-error-color)]*Error 100%* +
+Primary error button background.
+| [custom-property]#--lumo-error-color#
+
+| [preview(--lumo-error-text-color)]*Error Text* +
+Secondary & tertiary error button text.
+| [custom-property]#--lumo-error-text-color#
+
+| [preview(--lumo-error-contrast-color)]*Error Contrast* +
+Primary error button text.
+| [custom-property]#--lumo-error-contrast-color#
+
+|===
+
+
+== Warning
+
+Warning colors are used primarily for warning notifications. They're displayed typically in yellow or orange,
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-warning-color-10pct)]*Warning 10%* +
+Faint warning background color.
+| [custom-property]#--lumo-warning-color-10pct#
+
+| [preview(--lumo-warning-color)]*Warning 100%* +
+Strong warning background color.
+| [custom-property]#--lumo-warning-color#
+
+| [preview(--lumo-warning-text-color)]*Warning Text* +
+Warning color with sufficient contrast for text.
+| [custom-property]#--lumo-warning-text-color#
+
+| [preview(--lumo-warning-contrast-color)]*Warning Contrast* +
+Contrast color for use on top of background colors.
+| [custom-property]#--lumo-warning-contrast-color#
+
+|===
+
+
+== Success
+
+This is most often depicted with a green color. It's used for success messages, and buttons that complete a certain task. Accompanying text and contrast colors are also defined.
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-success-color-10pct)]*Success 10%* +
+Success badge background.
+| [custom-property]#--lumo-success-color-10pct#
+
+| [preview(--lumo-success-color-50pct)]*Success 50%* +
+| [custom-property]#--lumo-success-color-50pct#
+
+| [preview(--lumo-success-color)]*Success 100%* +
+Primary success button background.
+| [custom-property]#--lumo-success-color#
+
+| [preview(--lumo-success-text-color)]*Success Text* +
+Secondary & tertiary success button text.
+| [custom-property]#--lumo-success-text-color#
+
+| [preview(--lumo-success-contrast-color)]*Success Contrast* +
+Primary success button text.
+| [custom-property]#--lumo-success-contrast-color#
+
+|===
+
+
+== Text
+
+The following text colors have appropriate contrast with the <<#base>> color.
+
+[.property-listing.previews, cols="2,>1"]
+|===
+| Description | CSS Custom Property
+
+| [preview(--lumo-header-text-color)]*Heading Text*
+| [custom-property]#--lumo-header-text-color#
+
+| [preview(--lumo-body-text-color)]*Body Text* +
+Contrast above 7:1.
+| [custom-property]#--lumo-body-text-color#
+
+| [preview(--lumo-secondary-text-color)]*Secondary Text* +
+Contrast above 4.5:1.
+| [custom-property]#--lumo-secondary-text-color#
+
+| [preview(--lumo-tertiary-text-color)]*Tertiary Text* +
+Contrast above 3:1. Use only for non-essential text. Suitable for graphical elements, such as icons.
+| [custom-property]#--lumo-tertiary-text-color#
+
+| [preview(--lumo-disabled-text-color)]*Disabled Text* +
+Use only for non-essential text/elements.
+| [custom-property]#--lumo-disabled-text-color#
+
+|===
+
+
+[discussion-id]`3DBA5F46-2A23-4826-B650-92FE05C1EF82`