The Stylekit

Taipy GUI comes with predefined cascading stylesheets that solidify your application's general look and feel. Those stylesheets also make it far easier to customize styles.
All those stylesheets are grouped in what is called the Stylekit.

The Stylekit provides a few useful features:

• Predefined styles for Taipy GUI visual elements so they align better on the page;
• CSS variables that are used all over the stylesheets so that you can modify those variables and witness the propagation of graphical attributes such as color or spacing values;
• Utility CSS classes that can be used to make some elements appear with appealing attributes.

Using the Stylekit

The Stylekit can apply to your pages if you choose and you can customize most of its properties.

Enabling or disabling the Stylekit

By default, the Stylekit is enabled: the Stylekit stylesheets are loaded with your application and impact all your application's page rendering.

In order not to use the Stylekit, you must specify the stylekit configuration setting to False, or set it to False in the call to Gui.run():

gui.run(stylekit=False)

Note that setting stylekit to True is equivalent to using the default variable values of the Stylekit.

Customizing the Stylekit

The Stylekit defines a set of variables with default values. Those variables can be overloaded by setting the stylekit parameter of the Gui.run() method to a dictionary: each key of this dictionary represents a Stylekit variable name, and you would associate the new value for this variable to that key.

Here is how you can change the primary and secondary colors for your application:

stylekit = {
  "color_primary": "#BADA55",
  "color_secondary": "#C0FFE",
}
gui.run(stylekit=stylekit)

The exhaustive list of all the Stylekit variables can be found in the Variables section below.

Variables

The Stylekit defines several variables that impact the overall style of your Taipy GUI application pages. The values for these variables can be overloaded by providing a dictionary to the stylekit parameter of the Gui.run() method.

Each variable initializes a CSS custom property that you can use in your own stylesheets.
Details on the Stylekit's CSS custom properties can be found in the CSS custom properties section.

Here is the list of the variables that the Stylekit uses:

Variable name	Default value	CSS custom property	Comments
color_primary	"#FF462B"	--color-primary	Primary color used in elements.
color_secondary	"#283282"	--color-secondary	Accent color used to make elements stand out from others.
color_error	"#FF595E"	--color-error	Color to indicate immediate danger or negative feedback.
color_warning	"#FAA916"	--color-warning	Color to indicate a potential risk or mixed feedback.
color_success	"#96E6B3"	--color-success	Color to indicate success and positive feedback.
color_background_light	"#F0F5F7"	--color-background-light	Background color for the light theme.
color_background_dark	"#152335"	--color-background-dark	Background color for the dark theme.
color_paper_light	"#FFFFFF"	--color-paper-light	Elevated elements (i.e. card, header, sidebar…) background color for the light theme.
color_paper_dark	"#1F2F44"	--color-paper-dark	Elevated elements (i.e. card, header, sidebar…) background color for the dark theme.
font_family	"Lato, Arial, sans-serif"	--font-family	Font family.
border_radius	8	--border-radius	Rounded corners radius.
input_button_height	"48px"	--input-button-height	Matching buttons and inputs height.

Notes:

• Color format: all CSS formats can be used, including the "#XXX" and "#XXXXXX" hexadecimal and "rgb(r,g,b)" formats.
• border_radius must be specified as an integer.
• input_button_height must be a string indicating an explicit unit (px, %, em, rem, or other).
• font_family: make sure, if you add a custom font to this variable, that it is properly imported by your stylesheets.
  For example, if you want to use the "Kanit" font from Google Fonts in your application, you will need to add the directive:

  @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;0,700;1,400');
  

  to one of your stylesheets.

CSS custom properties

The Stylekit defines a set of custom properties used in style definitions to produce homogeneous user interfaces, allowing one to change a single property and have it propagated in all the styles.

Besides the CSS custom properties derived from the Stylekit variables, there are a few more that the Stylekit styles rely on.

Color

These properties are used to indicate what color to apply in styles.

CSS custom property	Default value	Comments
--color-primary	color_primary variable value (default: #FF462B)	Primary color to apply to elements.
--color-secondary	color_secondary variable value (default: #283282)	Accent color used to make elements stand out from others.
--color-error	color_error variable value (default: #FF595E)	Color to indicate immediate danger or negative feedback.
--color-warning	color_warning variable value (default: #FAA916)	Color to indicate a potential risk or mixed feedback.
--color-success	color_success variable value (default: #96E6B3)	Color to indicates success and positive feedback.
--color-background-light	color_background_light variable value (default: #F0F5F7)	Background color for the light theme.
--color-background-dark	color_background_dark variable value (default: #152335)	Background color for the dark theme.
--color-background	var(--color-background-light) or var(--color-background-dark), depending on the current theme.	Theme-aware background color for pages.
--color-paper-light	color_paper_light variable value (default: #FFFFFF)	Elevated elements (i.e. card, header, sidebar…) background color for the light theme.
--color-paper-dark	color_paper_dark variable value (default: #1F2F44)	Elevated elements (i.e. card, header, sidebar…) background color for the dark theme.
--color-paper	var(--color-paper-light) or var(--color-paper-dark), depending on the current theme.	Theme-aware background color for elevated elements.
--color-contrast-light	rgba(0, 0, 0, 0.87)	Contrasting elements (such as text) color for light backgrounds.
--color-contrast-dark	rgba(255, 255, 255, 0.87)	Contrasting elements (such as text) color for dark backgrounds.
--color-contrast	var(--color-contrast-light) or var(--color-contrast-dark), depending on the current theme.	Theme-aware variable for contrasting elements such as text.

Note that using --color-background, --color-paper or --color-contrast in your style definitions allows the Stylekit to automatically adapt the setting of colors based on the theme the user has chosen.
That is not the case if you explicitly use --color-background-light, for example.

Typography

These properties are used to indicate what text settings to apply in styles.

CSS custom property	Default value	Comments
--font_family	font_family variable value (default: Lato, Arial, sans-serif)	Font family used by elements.
--font-size-h1	2.5rem	Font size for h1 headings.
--font-size-h2	2rem	Font size for h2 headings.
--font-size-h3	1.75rem	Font size for h3 headings.
--font-size-h4	1.5rem	Font size for h4 headings.
--font-size-h5	1.25rem	Font size for h5 headings.
--font-size-h6	1rem	Font size for h6 headings.
--font-weight-heading	bold	Font weight for headings.
--font-size-body	1rem	Base body font size.
--font-size-small	0.875rem	Smaller body font size.
--font-size-caption	0.75rem	Captions and hints font size.

For scalability and accessibility purposes, font sizes are set in the "rem" unit. This is a common CSS best practice: "rem" is relative to the <html> element font size, so that if a user sets an alternative text size using the browser settings, the "rem" reference value is impacted and therefore, propagated to all text sizes.
If accessibility is not a concern in your application and you feel more comfortable setting the font sizes in "px", you are, of course, free to do so.

Spacing

These properties are used to add horizontal or vertical spacing between elements.
They all are multiple of the base --spacing1 variable, ensuring a natural layout.

CSS custom property	Default value	Comments
--spacing1	1rem	Reference spacing value.
--spacing-half	calc(var(--spacing1) * 0.5)	Half of --spacing1
--spacing2	calc(var(--spacing1) * 2)	Double of --spacing1
--spacing3	calc(var(--spacing1) * 3)	Triple of --spacing1
--spacing4	calc(var(--spacing1) * 4)	Quadruple of --spacing1
--spacing5	calc(var(--spacing1) * 5)	Quintuple of --spacing1
--spacing6	calc(var(--spacing1) * 6)	Sixfold of --spacing1

Other properties

There are a few more CSS custom properties that the Stylekit relies on in classes that can style sections:

CSS custom property	Default value	Comments
--container-max-width	75rem	The maximum width of section that use the container CSS class.
--element-padding	var(--spacing2)	The inner margins of sections using the card or sidebar classes.
--sidebar-min-width	15rem	The minimum width of sections using the sidebar class.

CSS classes

The Stylekit defined several pre-defined CSS classes that are based on the CSS custom properties described above.

Color

You can use the classes called color_<keyword> and bg_<keyword> to apply a text or a background color to your elements.
Here is the list of available classes:

CSS class	Description
color-primary	Uses --color-primary for the text color.
bg-primary	Uses --color-primary for the background color.
color-secondary	Uses --color-secondary for the text color.
bg-secondary	Uses --color-secondary for the background color.
color-error	Uses --color-error for the text color.
bg-error	Uses --color-error for the background color.
color-warning	Uses --color-warning for the text color.
bg-warning	Uses --color-warning for the background color.
color-success	Uses --color-success for the text color.
bg-success	Uses --color-success for the background color.
color-background	Uses --color-background for the text color.
bg-background	Uses --color-background for the background color.
color-background-light	Uses --color-background-light for the text color.
bg-background-light	Uses --color-background-light for the background color.
color-background-dark	Uses --color-background-dark for the text color.
bg-background-dark	Uses --color-background-dark for the background color.
color-paper	Uses --color-paper for the text color.
bg-paper	Uses --color-paper for the background color.
color-paper-light	Uses --color-paper-light for the text color.
bg-paper-light	Uses --color-paper-light for the background color.
color-paper-dark	Uses --color-paper-dark for the text color.
bg-paper-dark	Uses --color-paper-dark for the background color.
color-contrast	Uses --color-contrast for the text color.
bg-contrast	Uses --color-contrast for the background color.
color-contrast-light	Uses --color-contrast-light for the text color.
bg-contrast-light	Uses --color-contrast-light for the background color.
color-contrast-dark	Uses --color-contrast-dark for the text color.
bg-contrast-dark	Uses --color-contrast-dark for the background color.

All these classes are defined using the "!important" priority setting, overriding all previous styling rules.

Typography

Typography classes let you style text fragments.

Headers

You can give any text fragment a heading style using one of three methods:

• Using the appropriate <h*> HTML tag where * indicates the header level.
• Using the sharp notation of Markdown, where the number of sharp characters at the beginning of the line indicates the header level.
• Using one of the Stylekit CSS classes listed below.

CSS class	Description
h1	Mimics the <h1> tag default style.
h2	Mimics the <h2> tag default style.
h3	Mimics the <h3> tag default style.
h4	Mimics the <h4> tag default style.
h5	Mimics the <h5> tag default style.
h6	Mimics the <h6> tag default style.

The CSS class always takes precedence over the HTML tag: if, for some reason, you need an HTML <h3> header using the style of <h5> tags, you would have to write:

<h3 class="h5">My heading</h3>

This is how you can do the same thing in Markdown text:

### My heading ### {: .h5}

Body text

A few classes are available to style body text:

CSS class	Description
text-body	Mimics the body text default style.
text-small	Uses a smaller version of the body text.
text-caption	Uses an even smaller version of the body text.
text-weight300	Uses the "Light" font weight.
text-weight400	Uses the "Regular" font weight.
text-weight500	Uses the "Medium" font weight.
text-weight600	Uses the "Semi bold" font weight.
text-weight700	Uses the "Bold" font weight.
text-weight800	Uses the "Extra bold" font weight.
text-weight900	Uses the "Heavy" font weight.
text-left	Align text to the left.
text-center	Centers text.
text-right	Aligns text to the right.
text-uppercase	Transforms text to uppercase.
text-no-transform	Cancels all case transformations.
text-underline	Underlines text.
text-no-underline	Prevents the text underlining.

Notes:

• All these classes are defined using the "!important" priority setting, overriding all previous styling rules.
• By default, all body texts are applied the text-body style rules. You should use this class only for elements that have a different default style.
• Using specific font weights may require your application to load the appropriate fonts to render correctly.

Spacing

These Stylekit classes let you add margins and padding to elements:

CSS class	Description
m0	Removes margins from all sides.
m-auto	Adds automatic margins to all sides (centering the element in its container)
m-half	Adds a --spacing-half margin value to all sides.
m1	Adds a --spacing1 margin value to all sides.
m2	Adds a --spacing2 margin value to all sides.
m3	Adds a --spacing3 margin value to all sides.
m4	Adds a --spacing4 margin value to all sides.
m5	Adds a --spacing5 margin value to all sides.
m6	Adds a --spacing6 margin value to all sides.
p0	Removes padding from all sides.
p-half	Adds a --spacing-half padding value to all sides.
p1	Adds a --spacing1 padding value to all sides.
p2	Adds a --spacing2 padding value to all sides.
p3	Adds a --spacing3 padding value to all sides.
p4	Adds a --spacing4 padding value to all sides.
p5	Adds a --spacing5 padding value to all sides.
p6	Adds a --spacing6 padding value to all sides.

Specifying the impacted side

You can specify which side of the element should be impacted by the spacing class.
Adding the 't', 'b', 'l' or 'r' character after the 'm' or 'p' letter of the class name impacts only and respectively the top, bottom, left or right side of the target element.

Examples: adding the classes mt-1, pt0 and mb_half adds a spacing1 margin to the top of the element, removes the padding to its top, and adds a spacing-half margin to its bottom.

All these classes are defined using the "!important" priority setting, overriding all previous styling rules.

Display

A few classes in the Stylekit have an impact on the CSS display property of the element they apply to:

CSS class	Description
d-none	Hides the element and frees the space it would normally take.
d-flex	Makes the element a flexible layout block, so its direct children display horizontally.
d-block	Displays the element as a block on a new line.
d-inline	Displays the element inline, horizontally, and treats it like text.
d-inline-block	Displays the element inline but keeps it treated as a block (e.g. for margins, paddings, etc).

All these classes are defined using the "!important" priority setting, overriding all previous styling rules.

Opacity

The Stylekit provides a handful of CSS classes that deal with element opacity:

CSS class	Description
transparent	Turns the element transparent. Although it does not render any longer, the element is still present and occupies space.
half-transparent	Makes the element 50% transparent.
opaque	Restores the element’s full opacity.

All these classes are defined using the "!important" priority setting, overriding all previous styling rules.

Leveraging the selected theme

The CSS custom properties are set in the :root selector.

If you need to reassign a custom property for a specific theme, you can do that by changing its value on the .taipy-light or .taipy-dark selectors:

/* Default */
:root {
  --color-success: "#96E6B3";
}

/* Dark mode only */
.taipy-dark {
  --color-success: "#98E7D3";
}

The same technique can be used to customize CSS classes based on the theme:

/* Default selector for cards */
.card {
    box-shadow: 0 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* Dark mode only cards */
.taipy-dark .card {
    box-shadow: none;
}

Styled Sections

The Stylekit defines a few CSS classes that provide widely used styles for sections.
Although these can be used for any visual element, they are typically applied to the part and layout block element types.

These allow for making blocks stand out in pages, or be physically constrained at specific locations with specific sizes.

The classes that the Stylekit define for this purpose are:

• container
• card
• header
• sidebar

container

The container class prevents the block it applies to from consuming all the available space.

The maximum width of that container is set by the --container-max-width custom property. Feel free to override this property in your stylesheets to adapt it to your own needs.

Here is an example of the container class applied to a part block. In this example, we would have defined the additional class:

.container-bg {
  background-color: rgb(80, 127, 172);
}

Now if the Markdown contains the following fragment:

Outside the container.
<|container container-bg|
Inside the container
|>

Then the result will look like this:

The container section style

Note that we leverage the Markdown syntax to create a part block:

• The default block element type name is "part", so it can be removed from the opening element syntax. This allows to write <|container container-bg| instead of <|container container-bg|part|.
• The default property name of the part block is class_name. So <|container container-bg| is equivalent to <|part|class_name=container container-bg|.

card

The card class produces an elevated block to display the section in the flow of the page.

The card class uses the --element-padding custom property to add padding around its content.

Let's look at an example using the card class.
Here is the Markdown content for a page:

Outside the card.
<|card card-bg|
Inside the card
{: .p1 .mb1 }
|>

This example relies on the definition of another CSS class that would look like this in a stylesheet:

.card-bg {
  background-color: rgb(211, 150, 109);
}

Here is how the page would be rendered:

The card section style

header

The header class can be applied on a layout or a part block to make it stand out from the content as an elevated bar.

header does not define any padding. If you need to tune the spacing of the elements that appear in the styled section, you can use the spacing classes.

You can also apply the CSS class sticky to fix the header to the top of the page when it is scrolled.

Here is an example of such a header. Consider the following Markdown content:

<|layout|columns=1fr auto 1fr|class_name=container align_columns_center|
<|part|class_name=pt_half pb_half|
<|Taipy App|text|height=30px|width=30px|>
|>
<|part|class_name=align_item_stretch|
<|navbar|lov={[("p1", "Page 1"), ("p2", "Page 2")]}|class_name=fullheight|>
|>
<|part|class_name=text_right|
<|toggle|theme|class_name=relative nolabel|>
|>
|>

This creates a three-columns layout block that has the header CSS class.

This block contains a label, a navigation bar and a theme toggle button.
Here is how the rendered page looks like:

The header section style

sidebar

The sidebar class produces an elevated area filling the entire height of the page and standing out from the general background and content.

Sections that use the sidebar class track the window scroll position. If its content is higher than the window, it becomes a scrollable area.

The sidebar class uses two custom properties:

• --element-padding: to add padding around its content.
• --sidebar-min-width: the minimum width of the section. This can be useful to implement a responsive design to your pages.