diff --git a/articles/components/themes/index.adoc b/articles/components/themes/index.adoc new file mode 100644 index 0000000000..4450d87381 --- /dev/null +++ b/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::[] diff --git a/articles/components/themes/lumo/_images/lumo-light-and-dark.png b/articles/components/themes/lumo/_images/lumo-light-and-dark.png new file mode 100644 index 0000000000..93377b3cf6 Binary files /dev/null and b/articles/components/themes/lumo/_images/lumo-light-and-dark.png differ diff --git a/articles/components/themes/lumo/_images/lumo-properties.png b/articles/components/themes/lumo/_images/lumo-properties.png new file mode 100644 index 0000000000..2e521941c7 Binary files /dev/null and b/articles/components/themes/lumo/_images/lumo-properties.png differ diff --git a/articles/components/themes/lumo/_images/lumo-utility-class-usage-example.png b/articles/components/themes/lumo/_images/lumo-utility-class-usage-example.png new file mode 100644 index 0000000000..17543d95e4 Binary files /dev/null and b/articles/components/themes/lumo/_images/lumo-utility-class-usage-example.png differ diff --git a/articles/components/themes/lumo/_images/lumo-utility-classes.png b/articles/components/themes/lumo/_images/lumo-utility-classes.png new file mode 100644 index 0000000000..54d6d3d54e Binary files /dev/null and b/articles/components/themes/lumo/_images/lumo-utility-classes.png differ diff --git a/articles/components/themes/lumo/index.adoc b/articles/components/themes/lumo/index.adoc new file mode 100644 index 0000000000..9cc81016ab --- /dev/null +++ b/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 <>, 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::[] diff --git a/articles/components/themes/lumo/lumo-style-properties/color.adoc b/articles/components/themes/lumo/lumo-style-properties/color.adoc new file mode 100644 index 0000000000..bff6efbe30 --- /dev/null +++ b/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 <> colors are designed to be used on top of it, and the <> 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` diff --git a/articles/components/themes/lumo/lumo-style-properties/elevation.adoc b/articles/components/themes/lumo/lumo-style-properties/elevation.adoc new file mode 100644 index 0000000000..1dba35b306 --- /dev/null +++ b/articles/components/themes/lumo/lumo-style-properties/elevation.adoc @@ -0,0 +1,104 @@ +--- +title: Elevation +page-title: How to use Lumo elevation properties | Vaadin +description: Listing of Lumo elevation style properties, the visual stacking of elements in a UI. +meta-description: Explore Lumo’s elevation properties to create depth and visual hierarchy in your Vaadin applications. +order: 50 +page-links: + - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/style.css[Source] + - https://www.figma.com/file/IxQ49ZwaHwk7w7dhbtjFp0Uy/Vaadin-Design-System?node-id=20%3A1[Figma Library] +--- + + += Lumo Elevation + +// 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] +---- +-- + +Elevation is used to signify elements which are stacked on top of other elements in the UI. This page lists Lumo elevation-related style properties, which you can use to create visually consistent elevation styles. + +Lumo includes different levels of elevation that are applied using box-shadow. + +++++ + +++++ + +[.property-listing.previews.elevation, cols="4,>3"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-box-shadow-xl).elevation.xl]*Extra Large* + +Elements highest in the stacking order, for example notifications, which should be above all other content. +| [custom-property]#--lumo-box-shadow-xl# + +| [.preview(--lumo-box-shadow-l).elevation.l]*Large* + +Elements that rise above most elements in the UI, for example dialogs. +| [custom-property]#--lumo-box-shadow-l# + +| [.preview(--lumo-box-shadow-m).elevation.m]*Medium* + +Contextual overlays, for components such as Select and Menu Bar. +| [custom-property]#--lumo-box-shadow-m# + +| [.preview(--lumo-box-shadow-s).elevation.s]*Small* + +Tooltips, etc. +| [custom-property]#--lumo-box-shadow-s# + +| [.preview(--lumo-box-shadow-xs).elevation.xs]*Extra Small* + +Elements closest to the application background, for example cards. +| [custom-property]#--lumo-box-shadow-xs# +|=== + + +[discussion-id]`F3F9FE20-3BA3-4A6C-A559-DD8C7DD91E13` diff --git a/articles/components/themes/lumo/lumo-style-properties/index.adoc b/articles/components/themes/lumo/lumo-style-properties/index.adoc new file mode 100644 index 0000000000..1e72ac2558 --- /dev/null +++ b/articles/components/themes/lumo/lumo-style-properties/index.adoc @@ -0,0 +1,43 @@ +--- +title: Style Properties +page-title: How to customize with Lumo style properties | Vaadin +description: The style properties of the built-in Lumo theme. +meta-description: Customize your Vaadin application using Lumo style properties for consistent theming. +order: 10 +--- + + += Lumo Style Properties + +Lumo is based on a set of style properties -- CSS custom properties -- representing colors, fonts, sizes and other styles, that can be customized by providing new values for them in a CSS stylesheet, either globally, or <<{articles}/styling/styling-components#styling-component-instances, scoped>> to a certain component type or instance. + +.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] + +.Customizing Values of Lumo Style Properties +[source,css] +---- +html { + --lumo-primary-color: green; + --lumo-font-family: 'Roboto'; +} +---- + +Lumo style properties can also be used in CSS instead of hard-coded literal values, through the `var()` function: + +.Use of Lumo Style Properties in Custom CSS +[source,css] +---- +div { + border: 1px solid var(--lumo-primary-color); + border-radius: var(--lumo-border-radius-m); +} +---- + +The <<{articles}/styling/styling-components#, Styling Vaadin Components>> section provides more details on using Lumo properties to modify the look and feel of Vaadin components. The <<{articles}/styling/styling-elements#, Styling Elements>> section provides more details on using Lumo properties to style other UI elements. + + +== Lists of Lumo Style Properties + +section_outline::[] diff --git a/articles/components/themes/lumo/lumo-style-properties/interaction.adoc b/articles/components/themes/lumo/lumo-style-properties/interaction.adoc new file mode 100644 index 0000000000..f0a4d06b84 --- /dev/null +++ b/articles/components/themes/lumo/lumo-style-properties/interaction.adoc @@ -0,0 +1,50 @@ +--- +title: Interaction +page-title: Interaction Properties in Lumo | Vaadin +description: Lumo style properties related to how interactions are indicated in an application. +meta-description: How Lumo interaction properties enhance the user experience with visual feedback in Vaadin applications. +order: 60 +page-links: + - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/style.css[Source] +--- + + += Lumo Interaction + +// 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] +---- +-- + +The user may be made aware of the focus of an application with the use of a cursor, or with a focus ring. The Lumo properties may be set to improve the user experience with these visual clues, depending on the situation. + + +== Cursor + +Lumo defines a CSS custom property that you can use to adjust the way in which your application signals clickable elements to users of pointer devices -- typically a mouse. + +You can either follow the _web_ approach and use the pointer (i.e., hand) cursor for clickable items, or take the _desktop_ approach and use the default (i.e., arrow) cursor. + +++++ + +++++ + +[.property-listing.previews, cols="1,>1"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-clickable-cursor).shape.l]*Cursor* + +| [custom-property]#--lumo-clickable-cursor# +|=== + + +== Pointer Focus Ring + +By default, Vaadin components show a focus ring only when the user navigates using the keyboard. You can enable a focus ring for pointer devices by setting the `--lumo-input-field-pointer-focus-visible` custom property to `1`. This applies only to components with an input field, such as Text Field, Date Picker, etc. + +[discussion-id]`4D15B095-CBCB-4E82-A82B-E5B2DA00EDE5` diff --git a/articles/components/themes/lumo/lumo-style-properties/shape.adoc b/articles/components/themes/lumo/lumo-style-properties/shape.adoc new file mode 100644 index 0000000000..4493f1722f --- /dev/null +++ b/articles/components/themes/lumo/lumo-style-properties/shape.adoc @@ -0,0 +1,82 @@ +--- +title: Shape +page-title: How to use shape properties in Lumo | Vaadin +description: Describing the Lumo style properties related to component shapes. +meta-description: Explore Lumo shape properties to style and define unique corner shapes in your Vaadin applications. +order: 40 +page-links: + - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/style.css[Source] +--- + + += Lumo Shapes + +// 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] +---- +-- + +This page lists Lumo shapes-related style properties, which you can use to adjust the visual style of component shapes. + +Lumo defines several border radius values. These values are defined as `em` by default, so they scale with the font size. + +++++ + +++++ + +[.property-listing.previews, cols="1,>1"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-border-radius-l).shape.l]*Large* + +Dialogs, cards, and other larger container elements. +| [custom-property]#--lumo-border-radius-l# + +| [.preview(--lumo-border-radius-m).shape.m]*Medium* + +Buttons and input fields, and most other normal-sized UI elements. +| [custom-property]#--lumo-border-radius-m# + +| [.preview(--lumo-border-radius-s).shape.s]*Small* + +Checkboxes and other small elements that could turn into circles with an excessive border radius. +| [custom-property]#--lumo-border-radius-s# +|=== + +[CAUTION] +The `--lumo-border-radius` property is deprecated. Use the `--lumo-border-radius-m` property, instead. + +[IMPORTANT] +If you set one of the border radius property values to zero, always use an explicit unit, for example, `--lumo-border-radius-m: 0px;`. If you use `0` without a unit, it causes some CSS `calc()` operations to be invalid. + + +[discussion-id]`4ECB9253-C3E4-480C-B7B9-0F92D2D61465` diff --git a/articles/components/themes/lumo/lumo-style-properties/size-space.adoc b/articles/components/themes/lumo/lumo-style-properties/size-space.adoc new file mode 100644 index 0000000000..2f7ffe38e5 --- /dev/null +++ b/articles/components/themes/lumo/lumo-style-properties/size-space.adoc @@ -0,0 +1,116 @@ +--- +title: Size pass:[&] Space +page-title: How to use size and spacing properties in Lumo | Vaadin +description: Listing of Lumo style properties related to setting the size and spacing of text and components. +meta-description: Discover Lumo size and spacing properties to create well-structured layouts in Vaadin applications. +order: 30 +page-links: + - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/sizing.css[Source (size)] + - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/spacing.css[Source (space)] +--- + + += Lumo Sizing & Spacing + +// 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] +---- +-- + +This page lists Lumo style properties for size and space, which you can use to apply consistent sizing and spacing across your application. + +You can load the built-in <<..#compact-preset, Lumo compact preset>> to reduce the font size and the sizing and spacing of all components, allowing you to place more components on the screen. + + +== Size + +Use these properties to adjust the sizing of regular elements such as buttons, text fields, and list items. + +Medium is the standard size, and it's primarily used to size buttons, text fields and list items. If you adjust the sizing, make sure to keep it large enough for touch targets. + +[.property-listing.previews, cols="1,>1"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-size-xl).space]*Extra Large* + +Minimum data grid header row height +| [custom-property]#--lumo-size-xl# + +| [.preview(--lumo-size-l).space]*Large* + +Large button +| [custom-property]#--lumo-size-l# + +| [.preview(--lumo-size-m).space]*Medium* + +Button and input field height, data grid row height +| [custom-property]#--lumo-size-m# + +| [.preview(--lumo-size-s).space]*Small* + +Small button and input field height +| [custom-property]#--lumo-size-s# + +| [.preview(--lumo-size-xs).space]*Extra Small* + +| [custom-property]#--lumo-size-xs# +|=== + +== Icon Size + +++++ + +++++ + +Use the icon size custom properties to set consistent sizes for all icons across your application. The icon sizes are relative to the font size by default, meaning they scale automatically depending on the context you place them in. + +[.property-listing.previews, cols="1,>1"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-icon-size-l).space]*Large icon* + +| [custom-property]#--lumo-icon-size-l# + +| [.preview(--lumo-icon-size-m).space]*Medium icon* + +Default size +| [custom-property]#--lumo-icon-size-m# + +| [.preview(--lumo-icon-size-s).space]*Small icon* + +| [custom-property]#--lumo-icon-size-s# +|=== + + +== Space + +Use these properties to adjust the inter-component spacings – the space outside a regular component (e.g., button, text field) or inside a container component (e.g., layouts, grid cells). + +[.property-listing.previews, cols="1,>1"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-space-xl).space]*Extra Large* + +| [custom-property]#--lumo-space-xl# + +| [.preview(--lumo-space-l).space]*Large* + +| [custom-property]#--lumo-space-l# + +| [.preview(--lumo-space-m).space]*Medium* + +| [custom-property]#--lumo-space-m# + +| [.preview(--lumo-space-s).space]*Small* + +| [custom-property]#--lumo-space-s# + +| [.preview(--lumo-space-xs).space]*Extra Small* + +| [custom-property]#--lumo-space-xs# +|=== + + +[discussion-id]`86ADC27D-53E6-4663-AB04-295B04920631` diff --git a/articles/components/themes/lumo/lumo-style-properties/typography.adoc b/articles/components/themes/lumo/lumo-style-properties/typography.adoc new file mode 100644 index 0000000000..1448028a32 --- /dev/null +++ b/articles/components/themes/lumo/lumo-style-properties/typography.adoc @@ -0,0 +1,132 @@ +--- +title: Typography +page-title: How to style typography with Lumo in Vaadin +description: Tables of Lumo style properties related to displaying and formatting text. +meta-description: Explore typography styling options using the Lumo theme in Vaadin. +order: 20 +page-links: + - https://github.com/vaadin/web-components/blob/v{moduleNpmVersion:vaadin-lumo-styles}/packages/vaadin-lumo-styles/src/props/typography.css[Source] + - https://www.figma.com/file/IxQ49ZwaHwk7w7dhbtjFp0Uy/Vaadin-Design-System?node-id=20%3A2[Figma Library] +--- + + += Lumo Typography + +// 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 for font family, font size, and line height. You can use these CSS custom properties to apply consistent typographic styles across your application. + +You can load the built-in <<..#compact-preset, Lumo compact preset>> to reduce the font size and the sizing and spacing of all components, allowing you to place more components on the screen. + + +== Lumo Font Family + +++++ + +++++ + +The system font stack is used by default: + +- Segoe UI on Windows +- Roboto on Android and Chrome OS +- San Francisco on macOS, iOS, and iPadOS + +On other systems, Helvetica and Arial are used as fallbacks. + +[.property-listing.previews, cols="2,>3"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-font-family)]*Main font* + +Headings, body and UI text +| [custom-property]#--lumo-font-family# +|=== + + +== Lumo Font Size + +The following font sizes are available to use. `M` is the standard size, and is used by most elements by default. + +// Allow t-shirt sizes +pass:[] + +[.property-listing.previews, cols="3,>2"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-font-size-xxxl)]*XXXL* + +Heading text +| [custom-property]#--lumo-font-size-xxxl# + +| [.preview(--lumo-font-size-xxl)]*XXL* + +Heading text +| [custom-property]#--lumo-font-size-xxl# + +| [.preview(--lumo-font-size-xl)]*XL* + +Heading text +| [custom-property]#--lumo-font-size-xl# + +| [.preview(--lumo-font-size-l)]*L* + +Heading text +| [custom-property]#--lumo-font-size-l# + +| [.preview(--lumo-font-size-m)]*M* + +Body/UI text +| [custom-property]#--lumo-font-size-m# + +| [.preview(--lumo-font-size-s)]*S* + +Label text +| [custom-property]#--lumo-font-size-s# + +| [.preview(--lumo-font-size-xs)]*XS* + +Help text, field validation text, badges +| [custom-property]#--lumo-font-size-xs# + +| [.preview(--lumo-font-size-xxs)]*XXS* + +Small badges +| [custom-property]#--lumo-font-size-xxs# +|=== + +pass:[] + + +== Lumo Line Height + +The following line heights are available to use. `M` is the standard size, and is used by most elements by default. + +[.property-listing.previews, cols="1,>1"] +|=== +| Description | CSS Custom Property + +| [.preview(--lumo-line-height-m).line-height]*M* + +| [custom-property]#--lumo-line-height-m# + +| [.preview(--lumo-line-height-s).line-height]*S* + +| [custom-property]#--lumo-line-height-s# + +| [.preview(--lumo-line-height-xs).line-height]*XS* + +| [custom-property]#--lumo-line-height-xs# +|=== + + +[discussion-id]`5B833A4F-22A1-4628-97EF-32B1DF6C94CE` diff --git a/articles/components/themes/lumo/utility-classes.adoc b/articles/components/themes/lumo/utility-classes.adoc new file mode 100644 index 0000000000..1c30361a06 --- /dev/null +++ b/articles/components/themes/lumo/utility-classes.adoc @@ -0,0 +1,1675 @@ +--- +title: Utility Classes +page-title: Utility classes in Vaadin Lumo for responsive design +description: List of Lumo utility classes and descriptions of them. +meta-description: Discover how to use Lumo utility classes for consistent and responsive styling in your Vaadin applications. +order: 30 +--- + + += Lumo Utility Classes +:toclevels: 2 + +Lumo Utility Classes are predefined CSS class names and stylesheets -- similar to the popular Tailwind CSS library. They can be used to style HTML elements and layouts without having to write CSS. + +Each utility class applies a particular style to the element, such as background color, borders, fonts, sizing, or spacing. Classes for applying CSS flexbox and grid layout features are also available. + +.Example of Lumo Utility Classes +[.fill.white] +image::_images/lumo-utility-classes.png[Small example of Lumo Utility Classes, 400] + +The Lumo utility classes are designed primarily to be used with native HTML elements, Vaadin layout components, and custom UI structures. Although some of them do work as expected on some Vaadin components, this is not their intended use. They especially cannot be used to style the inner parts of components. + + +== Enable Utility Classes + +See <<{articles}/styling/utility-classes#lumo-utility-classes,Utility Classes>> for how to load the utility classes in your application. + +== Using Utility Classes + +Utility classes are regular CSS classes applied through CSS class names. + +The `LumoUtility` Java class in Flow contains `String` constants for all utility classes. They're divided into nested category classes, such as `LumoUtility.FontSize`. These are applied the same way as CSS class name literals, using the `addClassNames` or `ClassList` APIs. + +[.example] +-- +[source,java] +---- + +Span errorMsg = new Span("Error"); +errorMsg.addClassNames( + LumoUtility.TextColor.ERROR, + LumoUtility.Padding.SMALL, + LumoUtility.Background.BASE, + LumoUtility.BoxShadow.XSMALL, + LumoUtility.BorderRadius.LARGE +); +---- +[source,tsx] +---- + +Error +---- +[source,html] +---- + +Error +---- + +-- + +.Effects of Above Application of Utility Classes +image::_images/lumo-utility-class-usage-example.png[Effects of the above application of utility classes, 300] + + +// Because of the Latin filler text. +pass:[] + +== List of Utility Classes + +// 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] +---- +-- + +The following is a list of all of the utility classes: + +++++ + +++++ + + +=== Backgrounds + +Classes for applying a background color. + +[.java-class]#Java class: `LumoUtility.Background`# + + +==== Base + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Base+++ +| *`bg-base` / `BASE`* +|=== + + +==== Transparent + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Transparent+++ +| *`bg-transparent` / `TRANSPARENT`* +|=== + + +==== Contrast + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`bg-contrast-5` / `CONTRAST_5`* +| ++++++ +| *`bg-contrast-10` / `CONTRAST_10`* +| ++++++ +| *`bg-contrast-20` / `CONTRAST_20`* +| ++++++ +| *`bg-contrast-30` / `CONTRAST_30`* +| ++++++ +| *`bg-contrast-40` / `CONTRAST_40`* +| ++++++ +| *`bg-contrast-50` / `CONTRAST_50`* +| ++++++ +| *`bg-contrast-60` / `CONTRAST_60`* +| ++++++ +| *`bg-contrast-70` / `CONTRAST_70`* +| ++++++ +| *`bg-contrast-80` / `CONTRAST_80`* +| ++++++ +| *`bg-contrast-90` / `CONTRAST_90`* +| ++++++ +| *`bg-contrast` / `CONTRAST`* +|=== + + +==== Primary + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`bg-primary-10` / `PRIMARY_10`* +| ++++++ +| *`bg-primary-50` / `PRIMARY_50`* +| ++++++ +| *`bg-primary` / `PRIMARY`* +|=== + + +==== Error + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`bg-error-10` / `ERROR_10`* +| ++++++ +| *`bg-error-50` / `ERROR_50`* +| ++++++ +| *`bg-error` / `ERROR`* +|=== + + +==== Warning + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`bg-warning-10` / `WARNING_10`* +| ++++++ +| *`bg-warning` / `WARNING`* +|=== + +==== Success +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`bg-success-10` / `SUCCESS_10`* +| ++++++ +| *`bg-success-50` / `SUCCESS_50`* +| ++++++ +| *`bg-success` / `SUCCESS`* +|=== + +=== Borders +Border related classes. + +[.java-class]#Java class: `LumoUtility.Border`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`border-0` / `NONE`* +| ++++++ +| *`border` / `ALL`* +| ++++++ +| *`border-b` / `BOTTOM`* +| ++++++ +| *`border-l` / `LEFT`* +| ++++++ +| *`border-r` / `RIGHT`* +| ++++++ +| *`border-t` / `TOP`* +|=== + + +==== Border Color + +Classes for setting the border color of an element. + +[.java-class]#Java class: `LumoUtility.BorderColor`# + + +===== Contrast + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`border-contrast-5` / `CONTRAST_5`* +| ++++++ +| *`border-contrast-10` / `CONTRAST_10`* +| ++++++ +| *`border-contrast-20` / `CONTRAST_20`* +| ++++++ +| *`border-contrast-30` / `CONTRAST_30`* +| ++++++ +| *`border-contrast-40` / `CONTRAST_40`* +| ++++++ +| *`border-contrast-50` / `CONTRAST_50`* +| ++++++ +| *`border-contrast-60` / `CONTRAST_60`* +| ++++++ +| *`border-contrast-70` / `CONTRAST_70`* +| ++++++ +| *`border-contrast-80` / `CONTRAST_80`* +| ++++++ +| *`border-contrast-90` / `CONTRAST_90`* +| ++++++ +| *`border-contrast` / `CONTRAST`* +|=== + + +===== Primary + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`border-primary-10` / `PRIMARY_10`* +| ++++++ +| *`border-primary-50` / `PRIMARY_50`* +| ++++++ +| *`border-primary` / `PRIMARY`* +|=== + + +===== Error + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`border-error-10` / `ERROR_10`* +| ++++++ +| *`border-error-50` / `ERROR_50`* +| ++++++ +| *`border-error` / `ERROR`* +|=== + + +===== Warning + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`border-warning-10` / `WARNING_10`* +| ++++++ +| *`border-warning` / `WARNING`* +| ++++++ +| *`border-warning-strong` / `WARNING_STRONG`* +|=== + + +===== Success + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`border-success-10` / `SUCCESS_10`* +| ++++++ +| *`border-success-50` / `SUCCESS_50`* +| ++++++ +| *`border-success` / `SUCCESS`* +|=== + + +==== Border Radius + +Classes for setting the border radius of an element. + +[.java-class]#Java class: `LumoUtility.BorderRadius`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`rounded-none` / `NONE`* +| ++++++ +| *`rounded-s` / `SMALL`* +| ++++++ +| *`rounded-m` / `MEDIUM`* +| ++++++ +| *`rounded-l` / `LARGE`* +|=== + + +=== Box Shadow + +Classes for applying a box shadow. + +[.java-class]#Java class: `LumoUtility.BoxShadow`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`shadow-xs` / `XSMALL`* +| ++++++ +| *`shadow-s` / `SMALL`* +| ++++++ +| *`shadow-m` / `MEDIUM`* +| ++++++ +| *`shadow-l` / `LARGE`* +| ++++++ +| *`shadow-xl` / `XLARGE`* +|=== + + +=== Sizing + +Classes for setting the height and width of an element. + + +==== Height + +[.java-class]#Java class: `LumoUtility.Height`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++N/A+++ +| *`h-0` / `NONE`* +| +++XS+++ +| *`h-xs` / `XSMALL`* +| +++S+++ +| *`h-s` / `SMALL`* +| +++M+++ +| *`h-m` / `MEDIUM`* +| +++L+++ +| *`h-l` / `LARGE`* +| +++XL+++ +| *`h-xl` / `XLARGE`* +| +++Auto+++ +| *`h-auto` / `AUTO`* +| +++Full+++ +| *`h-full` / `FULL`* + +Sets the height of an element to 100% of its parent's height. +| +++Screen(scroll to see total height)+++ +| *`h-screen` / `SCREEN`* + +Sets the height of an element to 100% of the viewport height. +|=== + + +==== Max Height + +[.java-class]#Java class: `LumoUtility.MaxHeight`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++N/A+++ +| *`max-h-full` / `FULL`* + +Sets the maximum height of an element to 100% of its parent's height. +| +++N/A+++ +| *`max-h-screen` / `SCREEN`* + +Sets the maximum height of an element to 100% of the viewport height. +|=== + + +==== Min Height + +[.java-class]#Java class: `LumoUtility.MinHeight`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++N/A+++ +| *`min-h-0` / `NONE`* + +Sets the minimum height of an element to 0. +| +++Full+++ +| *`min-h-full` / `FULL`* + +Sets the minimum height of an element to 100% of its parent's height. +| +++Screen(scroll to see total height)+++ +| *`min-h-screen` / `SCREEN`* + +Sets the minimum height of an element to 100% of the viewport height. +|=== + + +==== Width + +[.java-class]#Java class: `LumoUtility.Width`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++XS+++ +| *`w-xs` / `XSMALL`* +| +++S+++ +| *`w-s` / `SMALL`* +| +++M+++ +| *`w-m` / `MEDIUM`* +| +++L+++ +| *`w-l` / `LARGE`* +| +++XL+++ +| *`w-xl` / `XLARGE`* +| +++Auto+++ +| *`w-auto` / `AUTO`* +| +++Full+++ +| *`w-full` / `FULL`* + +Sets the width of an element to 100% of its parent's width. +|=== + + +==== Max Width + +[.java-class]#Java class: `LumoUtility.MaxWidth`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++N/A+++ +| *`max-w-full` / `FULL`* + +Sets the maximum width of an element to 100% of its parent's width. +| +++N/A+++ +| *`max-w-screen-sm` / `SCREEN_SMALL`* + +Sets the maximum width of an element to 640px. +| +++N/A+++ +| *`max-w-screen-md` / `SCREEN_MEDIUM`* + +Sets the maximum width of an element to 768px. +| +++N/A+++ +| *`max-w-screen-lg` / `SCREEN_LARGE`* + +Sets the maximum width of an element to 1024px. +| +++N/A+++ +| *`max-w-screen-xl` / `SCREEN_XLARGE`* + +Sets the maximum width of an element to 1280px. +| +++N/A+++ +| *`max-w-screen-2xl` / `SCREEN_XXLARGE`* + +Sets the maximum width of an element to 1536px. +|=== + + +==== Min Width + +[.java-class]#Java class: `LumoUtility.MinWidth`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++N/A+++ +| *`min-w-0` / `NONE`* + +Sets the minimum width of an element to 0. +| +++Full+++ +| *`min-w-full` / `FULL`* + +Sets the minimum width of an element to 100% of its parent's width. +|=== + + +==== Icon Size + +[.java-class]#Java class: `LumoUtility.IconSize`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| ++++++ +| *`icon-s` / `SMALL`* +| ++++++ +| *`icon-m` / `MEDIUM`* +| ++++++ +| *`icon-l` / `LARGE`* +|=== + + +=== Spacing + +Classes for applying margin and padding to individual elements, as well as spacing between elements in a layout. + + +==== Margin + +Classes for setting the margin of an element. + + +===== Uniform + +[.java-class]#Java class: `LumoUtility.Margin`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`m-auto` / `AUTO`* +| +++0+++ +| *`m-0` / `NONE`* +| +++XS+++ +| *`m-xs` / `XSMALL`* +| +++S+++ +| *`m-s` / `SMALL`* +| +++M+++ +| *`m-m` / `MEDIUM`* +| +++L+++ +| *`m-l` / `LARGE`* +| +++XL+++ +| *`m-xl` / `XLARGE`* +|=== + + +===== Bottom + +[.java-class]#Java class: `LumoUtility.Margin.Bottom`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`mb-auto` / `AUTO`* +| +++0+++ +| *`mb-0` / `NONE`* +| +++XS+++ +| *`mb-xs` / `XSMALL`* +| +++S+++ +| *`mb-s` / `SMALL`* +| +++M+++ +| *`mb-m` / `MEDIUM`* +| +++L+++ +| *`mb-l` / `LARGE`* +| +++XL+++ +| *`mb-xl` / `XLARGE`* +|=== + + +===== Left + +[.java-class]#Java class: `LumoUtility.Margin.Left`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`ml-auto` / `AUTO`* +| +++0+++ +| *`ml-0` / `NONE`* +| +++XS+++ +| *`ml-xs` / `XSMALL`* +| +++S+++ +| *`ml-s` / `SMALL`* +| +++M+++ +| *`ml-m` / `MEDIUM`* +| +++L+++ +| *`ml-l` / `LARGE`* +| +++XL+++ +| *`ml-xl` / `XLARGE`* +|=== + + +===== Right + +[.java-class]#Java class: `LumoUtility.Margin.Right`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`mr-auto` / `AUTO`* +| +++0+++ +| *`mr-0` / `NONE`* +| +++XS+++ +| *`mr-xs` / `XSMALL`* +| +++S+++ +| *`mr-s` / `SMALL`* +| +++M+++ +| *`mr-m` / `MEDIUM`* +| +++L+++ +| *`mr-l` / `LARGE`* +| +++XL+++ +| *`mr-xl` / `XLARGE`* +|=== + + +===== Top + +[.java-class]#Java class: `LumoUtility.Margin.Top`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`mt-auto` / `AUTO`* +| +++0+++ +| *`mt-0` / `NONE`* +| +++XS+++ +| *`mt-xs` / `XSMALL`* +| +++S+++ +| *`mt-s` / `SMALL`* +| +++M+++ +| *`mt-m` / `MEDIUM`* +| +++L+++ +| *`mt-l` / `LARGE`* +| +++XL+++ +| *`mt-xl` / `XLARGE`* +|=== + + +===== Inline End + +[.java-class]#Java class: `LumoUtility.Margin.End`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`me-auto` / `AUTO`* +| +++0+++ +| *`me-0` / `NONE`* +| +++XS+++ +| *`me-xs` / `XSMALL`* +| +++S+++ +| *`me-s` / `SMALL`* +| +++M+++ +| *`me-m` / `MEDIUM`* +| +++L+++ +| *`me-l` / `LARGE`* +| +++XL+++ +| *`me-xl` / `XLARGE`* +|=== + + +===== Inline Start + +[.java-class]#Java class: `LumoUtility.Margin.Start`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`ms-auto` / `AUTO`* +| +++0+++ +| *`ms-0` / `NONE`* +| +++XS+++ +| *`ms-xs` / `XSMALL`* +| +++S+++ +| *`ms-s` / `SMALL`* +| +++M+++ +| *`ms-m` / `MEDIUM`* +| +++L+++ +| *`ms-l` / `LARGE`* +| +++XL+++ +| *`ms-xl` / `XLARGE`* +|=== + + +===== Horizontal + +[.java-class]#Java class: `LumoUtility.Margin.Horizontal`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`mx-auto` / `AUTO`* +| +++0+++ +| *`mx-0` / `NONE`* +| +++XS+++ +| *`mx-xs` / `XSMALL`* +| +++S+++ +| *`mx-s` / `SMALL`* +| +++M+++ +| *`mx-m` / `MEDIUM`* +| +++L+++ +| *`mx-l` / `LARGE`* +| +++XL+++ +| *`mx-xl` / `XLARGE`* +|=== + + +===== Vertical + +[.java-class]#Java class: `LumoUtility.Margin.Vertical`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Auto+++ +| *`my-auto` / `AUTO`* +| +++0+++ +| *`my-0` / `NONE`* +| +++XS+++ +| *`my-xs` / `XSMALL`* +| +++S+++ +| *`my-s` / `SMALL`* +| +++M+++ +| *`my-m` / `MEDIUM`* +| +++L+++ +| *`my-l` / `LARGE`* +| +++XL+++ +| *`my-xl` / `XLARGE`* +|=== + + +==== Padding + +Classes for setting the padding of an element. + + +===== Uniform + +[.java-class]#Java class: `LumoUtility.Padding`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`p-0` / `NONE`* +| +++XS+++ +| *`p-xs` / `XSMALL`* +| +++S+++ +| *`p-s` / `SMALL`* +| +++M+++ +| *`p-m` / `MEDIUM`* +| +++L+++ +| *`p-l` / `LARGE`* +| +++XL+++ +| *`p-xl` / `XLARGE`* +|=== + + +===== Bottom + +[.java-class]#Java class: `LumoUtility.Padding.Bottom`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`pb-0` / `NONE`* +| +++XS+++ +| *`pb-xs` / `XSMALL`* +| +++S+++ +| *`pb-s` / `SMALL`* +| +++M+++ +| *`pb-m` / `MEDIUM`* +| +++L+++ +| *`pb-l` / `LARGE`* +| +++XL+++ +| *`pb-xl` / `XLARGE`* +|=== + + +===== Left + +[.java-class]#Java class: `LumoUtility.Padding.Left`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`pl-0` / `NONE`* +| +++XS+++ +| *`pl-xs` / `XSMALL`* +| +++S+++ +| *`pl-s` / `SMALL`* +| +++M+++ +| *`pl-m` / `MEDIUM`* +| +++L+++ +| *`pl-l` / `LARGE`* +| +++XL+++ +| *`pl-xl` / `XLARGE`* +|=== + + +===== Right + +[.java-class]#Java class: `LumoUtility.Padding.Right`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`pr-0` / `NONE`* +| +++XS+++ +| *`pr-xs` / `XSMALL`* +| +++S+++ +| *`pr-s` / `SMALL`* +| +++M+++ +| *`pr-m` / `MEDIUM`* +| +++L+++ +| *`pr-l` / `LARGE`* +| +++XL+++ +| *`pr-xl` / `XLARGE`* +|=== + +===== Top +[.java-class]#Java class: `LumoUtility.Padding.Top`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`pt-0` / `NONE`* +| +++XS+++ +| *`pt-xs` / `XSMALL`* +| +++S+++ +| *`pt-s` / `SMALL`* +| +++M+++ +| *`pt-m` / `MEDIUM`* +| +++L+++ +| *`pt-l` / `LARGE`* +| +++XL+++ +| *`pt-xl` / `XLARGE`* +|=== + +===== Inline End +[.java-class]#Java class: `LumoUtility.Padding.End`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`pe-0` / `NONE`* +| +++XS+++ +| *`pe-xs` / `XSMALL`* +| +++S+++ +| *`pe-s` / `SMALL`* +| +++M+++ +| *`pe-m` / `MEDIUM`* +| +++L+++ +| *`pe-l` / `LARGE`* +| +++XL+++ +| *`pe-xl` / `XLARGE`* +|=== + + +===== Inline Start + +[.java-class]#Java class: `LumoUtility.Padding.Start`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`ps-0` / `NONE`* +| +++XS+++ +| *`ps-xs` / `XSMALL`* +| +++S+++ +| *`ps-s` / `SMALL`* +| +++M+++ +| *`ps-m` / `MEDIUM`* +| +++L+++ +| *`ps-l` / `LARGE`* +| +++XL+++ +| *`ps-xl` / `XLARGE`* +|=== + + +===== Horizontal + +[.java-class]#Java class: `LumoUtility.Padding.Horizontal`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`px-0` / `NONE`* +| +++XS+++ +| *`px-xs` / `XSMALL`* +| +++S+++ +| *`px-s` / `SMALL`* +| +++M+++ +| *`px-m` / `MEDIUM`* +| +++L+++ +| *`px-l` / `LARGE`* +| +++XL+++ +| *`px-xl` / `XLARGE`* +|=== + + +===== Vertical + +[.java-class]#Java class: `LumoUtility.Padding.Vertical`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++0+++ +| *`py-0` / `NONE`* +| +++XS+++ +| *`py-xs` / `XSMALL`* +| +++S+++ +| *`py-s` / `SMALL`* +| +++M+++ +| *`py-m` / `MEDIUM`* +| +++L+++ +| *`py-l` / `LARGE`* +| +++XL+++ +| *`py-xl` / `XLARGE`* +|=== + + +=== Typography + +Classes for styling text. + + +==== Font Size + +Classes for setting the font size of an element. + +[.java-class]#Java class: `LumoUtility.FontSize`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum+++ +| *`text-2xs` / `XXSMALL`* +| +++Lorem ipsum+++ +| *`text-xs` / `XSMALL`* +| +++Lorem ipsum+++ +| *`text-s` / `SMALL`* +| +++Lorem ipsum+++ +| *`text-m` / `MEDIUM`* +| +++Lorem ipsum+++ +| *`text-l` / `LARGE`* +| +++Lorem ipsum+++ +| *`text-xl` / `XLARGE`* +| +++Lorem ipsum+++ +| *`text-2xl` / `XXLARGE`* +| +++Lorem ipsum+++ +| *`text-3xl` / `XXXLARGE`* +|=== + + +==== Font Weight + +Classes for setting the font weight of an element. + +[.java-class]#Java class: `LumoUtility.FontWeight`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-thin` / `THIN`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-extralight` / `EXTRALIGHT`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-light` / `LIGHT`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-normal` / `NORMAL`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-medium` / `MEDIUM`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-semibold` / `SEMIBOLD`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-bold` / `BOLD`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-extrabold` / `EXTRABOLD`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`font-black` / `BLACK`* +|=== + + +==== Line Height + +Classes for setting the line height of an element. + +[.java-class]#Java class: `LumoUtility.LineHeight`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`leading-none` / `NONE`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`leading-xs` / `XSMALL`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`leading-s` / `SMALL`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`leading-m` / `MEDIUM`* +|=== + + +==== List Style Type + +Class for remove the default look of a list. + +[.java-class]#Java class: `LumoUtility.ListStyleType`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++
  • Item 1
  • Item 2
  • Item 3
+++ +| *`list-none` / `NONE`* +|=== + + +==== Text Alignment + +Classes for setting an element's text alignment. + +[.java-class]#Java class: `LumoUtility.TextAlignment`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`text-left` / `LEFT`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`text-center` / `CENTER`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`text-right` / `RIGHT`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`text-justify` / `JUSTIFY`* +|=== + + +==== Text Color + +Classes for setting the text color of an element. + +[.java-class]#Java class: `LumoUtility.TextColor`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Header+++ +| *`text-header` / `HEADER`* +| +++Body+++ +| *`text-body` / `BODY`* +| +++Secondary+++ +| *`text-secondary` / `SECONDARY`* +| +++Tertiary+++ +| *`text-tertiary` / `TERTIARY`* +| +++Disabled+++ +| *`text-disabled` / `DISABLED`* +| +++Primary+++ +| *`text-primary` / `PRIMARY`* +| +++Primary contrast+++ +| *`text-primary-contrast` / `PRIMARY_CONTRAST`* +| +++Error+++ +| *`text-error` / `ERROR`* +| +++Error contrast+++ +| *`text-error-contrast` / `ERROR_CONTRAST`* +| +++Error+++ +| *`text-warning` / `WARNING`* +| +++Error contrast+++ +| *`text-warning-contrast` / `WARNING_CONTRAST`* +| +++Success+++ +| *`text-success` / `SUCCESS`* +| +++Success contrast+++ +| *`text-success-contrast` / `SUCCESS_CONTRAST`* +|=== + + +==== Text Overflow + +Classes for setting text overflow. + +[.java-class]#Java class: `LumoUtility.TextOverflow`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`overflow-clip` / `CLIP`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.+++ +| *`overflow-ellipsis` / `ELLIPSIS`* +|=== + +==== Text Transform +Classes for transforming text. + +[.java-class]#Java class: `LumoUtility.TextTransform`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum dolor sit amet+++ +| *`capitalize` / `CAPITALIZE`* +| +++Lorem ipsum dolor sit amet+++ +| *`lowercase` / `LOWERCASE`* +| +++Lorem ipsum dolor sit amet+++ +| *`uppercase` / `UPPERCASE`* +|=== + + +==== Whitespace + +Classes for transforming text. + +[.java-class]#Java class: `LumoUtility.Whitespace`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`whitespace-normal` / `NORMAL`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`whitespace-nowrap` / `NOWRAP`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`whitespace-pre` / `PRE`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`whitespace-pre-line` / `PRE_LINE`* +| +++Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`whitespace-pre-wrap` / `PRE_WRAP`* +|=== + + +=== Flexbox & Grid + +Classes for flexbox and grid layouts. + +.Remember to set `display` +[NOTE,role=small] +The following classes require setting either the `flex` or `grid` CSS class on the element to work. See <<#display,Display classes>>. + + +==== Align Content + +Classes for distributing space around and between items along a flexbox's cross axis or a grid's block axis. Applies to flexbox and grid layouts. + +[.java-class]#Java class: `LumoUtility.AlignContent`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++1234+++ +| *`content-center` / `CENTER`* +| +++1234+++ +| *`content-end` / `END`* +| +++1234+++ +| *`content-start` / `START`* +| +++1234+++ +| *`content-around` / `AROUND`* +| +++1234+++ +| *`content-between` / `BETWEEN`* +| +++1234+++ +| *`content-evenly` / `EVENLY`* +| +++1234+++ +| *`content-stretch` / `STRETCH`* +|=== + + +==== Align Items + +Classes for aligning items along a flexbox's cross axis or a grid's block axis. Applies to flexbox and grid layouts. + +[.java-class]#Java class: `LumoUtility.AlignItems`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123+++ +| *`items-baseline` / `BASELINE`* +| +++123+++ +| *`items-center` / `CENTER`* +| +++123+++ +| *`items-end` / `END`* +| +++123+++ +| *`items-start` / `START`* +| +++123+++ +| *`items-stretch` / `STRETCH`* +|=== + + +==== Align Self + +Classes for overriding individual items `align-item` property. Applies to flexbox and grid items. + +[.java-class]#Java class: `LumoUtility.AlignSelf`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123+++ +| *`self-auto` / `AUTO`* +| +++123+++ +| *`self-baseline` / `BASELINE`* +| +++123+++ +| *`self-center` / `CENTER`* +| +++123+++ +| *`self-end` / `END`* +| +++123+++ +| *`self-start` / `START`* +| +++123+++ +| *`self-stretch` / `STRETCH`* +|=== + + +==== Justify Content + +Classes for aligning items along a flexbox's main axis or a grid's inline axis. Applies to flexbox and grid layouts. + +[.java-class]#Java class: `LumoUtility.JustifyContent`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++12+++ +| *`justify-center` / `CENTER`* +| +++12+++ +| *`justify-end` / `END`* +| +++12+++ +| *`justify-start` / `START`* +| +++12+++ +| *`justify-around` / `AROUND`* +| +++12+++ +| *`justify-between` / `BETWEEN`* +| +++12+++ +| *`justify-evenly` / `EVENLY`* +|=== + + +==== Flex + +Classes for setting how items grow and shrink in a flexbox layout. Applies to flexbox items. + +[.java-class]#Java class: `LumoUtility.Flex`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++1999+++ +| *`flex-auto` / `AUTO`* +| +++1999+++ +| *`flex-none` / `NONE`* +|=== + + +==== Flex Direction + +Classes for setting the flex direction of a flexbox layout. + +[.java-class]#Java class: `LumoUtility.FlexDirection`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123+++ +| *`flex-col` / `COLUMN`* +| +++123+++ +| *`flex-col-reverse` / `COLUMN_REVERSE`* +| +++123+++ +| *`flex-row` / `ROW`* +| +++123+++ +| *`flex-row-reverse` / `ROW_REVERSE`* +|=== + + +==== Flex Grow + +Classes for setting how items grow in a flexbox layout. Applies to flexbox items. + +[.java-class]#Java class: `LumoUtility.Flex`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++1+++ +| *`flex-grow-0` / `GROW_NONE`* +| +++1+++ +| *`flex-grow` / `GROW`* +|=== + + +==== Flex Shrink + +Classes for setting how items shrink in a flexbox layout. Applies to flexbox items. + +[.java-class]#Java class: `LumoUtility.Flex`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++56px+++ +| *`flex-shrink-0` / `SHRINK_NONE`* +| +++56px+++ +| *`flex-shrink` / `SHRINK`* +|=== + + +==== Flex Wrap + +Classes for setting how items wrap in a flexbox layout. Applies to flexbox layouts. + +[.java-class]#Java class: `LumoUtility.FlexWrap`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++1234+++ +| *`flex-nowrap` / `NOWRAP`* +| +++1234+++ +| *`flex-wrap` / `WRAP`* +| +++1234+++ +| *`flex-wrap-reverse` / `WRAP_REVERSE`* +|=== + + +==== Gap + +Classes for defining the space between items in a flexbox or grid layout. Applies to flexbox and grid layouts. + + +===== Uniform + +[.java-class]#Java class: `LumoUtility.Gap`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++1234+++ +| *`gap-xs` / `XSMALL`* +| +++1234+++ +| *`gap-s` / `SMALL`* +| +++1234+++ +| *`gap-m` / `MEDIUM`* +| +++1234+++ +| *`gap-l` / `LARGE`* +| +++1234+++ +| *`gap-xl` / `XLARGE`* +|=== + + +===== Column + +Classes for defining the horizontal space between items in a flexbox or grid layout. Applies to flexbox and grid layouts. + +[.java-class]#Java class: `LumoUtility.Gap.Column`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++12+++ +| *`gap-x-xs` / `XSMALL`* +| +++12+++ +| *`gap-x-s` / `SMALL`* +| +++12+++ +| *`gap-x-m` / `MEDIUM`* +| +++12+++ +| *`gap-x-l` / `LARGE`* +| +++12+++ +| *`gap-x-xl` / `XLARGE`* +|=== + + +===== Row + +Classes for defining the vertical space between items in a flexbox or grid layout. Applies to flexbox and grid layouts. + +[.java-class]#Java class: `LumoUtility.Gap.Row`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++12+++ +| *`gap-y-xs` / `XSMALL`* +| +++12+++ +| *`gap-y-s` / `SMALL`* +| +++12+++ +| *`gap-y-m` / `MEDIUM`* +| +++12+++ +| *`gap-y-l` / `LARGE`* +| +++12+++ +| *`gap-y-xl` / `XLARGE`* +|=== + + +==== Grid Columns + +Classes for setting the number of columns in a grid layout. + +[.java-class]#Java class: `LumoUtility.Grid.Column`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++1234+++ +| *`grid-cols-1` / `COLUMNS_1`* +| +++1234+++ +| *`grid-cols-2` / `COLUMNS_2`* +| +++1234+++ +| *`grid-cols-3` / `COLUMNS_3`* +| +++1234+++ +| *`grid-cols-4` / `COLUMNS_4`* +| +++12345678+++ +| *`grid-cols-5` / `COLUMNS_5`* +| +++12345678+++ +| *`grid-cols-6` / `COLUMNS_6`* +| +++12345678+++ +| *`grid-cols-7` / `COLUMNS_7`* +| +++12345678+++ +| *`grid-cols-8` / `COLUMNS_8`* +| +++123456789101112+++ +| *`grid-cols-9` / `COLUMNS_9`* +| +++123456789101112+++ +| *`grid-cols-10` / `COLUMNS_10`* +| +++123456789101112+++ +| *`grid-cols-11` / `COLUMNS_11`* +| +++123456789101112+++ +| *`grid-cols-12` / `COLUMNS_12`* +|=== + + +==== Grid Rows + +Classes for setting the number of rows in a grid layout. + +[.java-class]#Java class: `LumoUtility.Grid.Row`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++12345678+++ +| *`grid-rows-1` / `ROWS_1`* +| +++12345678+++ +| *`grid-rows-2` / `ROWS_2`* +| +++12345678+++ +| *`grid-rows-3` / `ROWS_3`* +| +++12345678+++ +| *`grid-rows-4` / `ROWS_4`* +| +++12345678+++ +| *`grid-rows-5` / `ROWS_5`* +| +++12345678+++ +| *`grid-rows-6` / `ROWS_6`* +|=== + + +==== Spanning Columns + +Classes for setting the column span of an item in a grid layout. +[.java-class]#Java class: `LumoUtility.Grid.Column`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123456789101112+++ +| *`col-span-1` / `COLUMN_SPAN_1`* +| +++1234567891011121314151617181920212223+++ +| *`col-span-2` / `COLUMN_SPAN_2`* +| +++12345678910111213141516171819202122+++ +| *`col-span-3` / `COLUMN_SPAN_3`* +| +++123456789101112131415161718192021+++ +| *`col-span-4` / `COLUMN_SPAN_4`* +| +++1234567891011121314151617181920+++ +| *`col-span-5` / `COLUMN_SPAN_5`* +| +++12345678910111213141516171819+++ +| *`col-span-6` / `COLUMN_SPAN_6`* +| +++123456789101112131415161718+++ +| *`col-span-7` / `COLUMN_SPAN_7`* +| +++1234567891011121314151617+++ +| *`col-span-8` / `COLUMN_SPAN_8`* +| +++12345678910111213141516+++ +| *`col-span-9` / `COLUMN_SPAN_9`* +| +++123456789101112131415+++ +| *`col-span-10` / `COLUMN_SPAN_10`* +| +++1234567891011121314+++ +| *`col-span-11` / `COLUMN_SPAN_11`* +| +++12345678910111213+++ +| *`col-span-12` / `COLUMN_SPAN_12`* +|=== + + +==== Spanning Rows + +Classes for setting the row span of an item in a grid layout. + +[.java-class]#Java class: `LumoUtility.Grid.Row`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123456+++ +| *`row-span-1` / `ROW_SPAN_1`* +| +++1234567891011+++ +| *`row-span-2` / `ROW_SPAN_2`* +| +++12345678910+++ +| *`row-span-3` / `ROW_SPAN_3`* +| +++123456789+++ +| *`row-span-4` / `ROW_SPAN_4`* +| +++12345678+++ +| *`row-span-5` / `ROW_SPAN_5`* +| +++1234567+++ +| *`row-span-6` / `ROW_SPAN_6`* +|=== + + +=== Layout + +Classes for general layout purposes. + + +==== Box Sizing + +Classes for setting the box sizing property of an element. Box sizing determines whether an element's border and padding is considered a part of its size. + +[.java-class]#Java class: `LumoUtility.BoxSizing`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Size: 44px+++ +| *`box-border` / `BORDER`* +| +++Size: 44px+++ +| *`box-content` / `CONTENT`* +|=== + + +==== Display + +Classes for setting the display property of an element. Determines whether the element is a block or inline element and how its items are laid out. + +[.java-class]#Java class: `LumoUtility.Display`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123+++ +| *`block` / `BLOCK`* +| +++123+++ +| *`inline` / `INLINE`* +| +++123+++ +| *`inline-block` / `INLINE_BLOCK`* +| +++123+++ +| *`flex` / `FLEX`* +| +++123+++ +| *`inline-flex` / `INLINE_FLEX`* +| ++++++ +| *`hidden` / `HIDDEN`* +| +++123456789+++ +| *`grid` / `GRID`* +| +++123456789+++ +| *`inline-grid` / `INLINE_GRID`* +|=== + + +==== Overflow + +Classes for setting the overflow behavior of an element. + +[.java-class]#Java class: `LumoUtility.Overflow`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++123Scrolls+++ +| *`overflow-auto` / `AUTO`* +| +++123No scroll+++ +| *`overflow-hidden` / `HIDDEN`* +| +++123Scrolls+++ +| *`overflow-scroll` / `SCROLL`* +|=== + + +==== Position + +Classes for setting the position of an element. + +[.java-class]#Java class: `LumoUtility.Position`# + +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++RelativeAbsolute+++ +| *`absolute` / `ABSOLUTE`* +| +++FixedLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`fixed` / `FIXED`* +| +++N/A+++ +| *`static` / `STATIC`* +| +++Sticky 1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sticky 2Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.+++ +| *`sticky` / `STICKY`* +| +++N/A+++ +| *`relative` / `RELATIVE`* +|=== + + +=== Accessibility + +Accessibility related classes + +[.java-class]#Java class: `LumoUtility.Accessibility`# +[.property-listing] +|=== +| Preview | CSS Class Name / Java Constant + +| +++Screen reader only content+++ +| *`sr-only` / `SCREEN_READER_ONLY`* + +Hides content visually while remaining available to screen readers +|=== +pass:[] + +[discussion-id]`111103A7-DD4A-430A-9D73-60668B6A849A`