GBC 1.00.43 new features and upgrade notes

A summary of new features and changes in functionality introduced with Genero Browser Client (GBC) 1.00.43. Note the changes you may need to make when moving to this version of the GBC.

Important:

This version of GBC is desupported, use a more recent version of the product.

Important:

This page covers only those new features introduced with the Genero Browser Client version specified in the page title. Check prior new features pages if you migrate from an earlier version.

For a detailed list of GBC 1.00.43 changes, please refer to the list of fixes on our issue tracker.

New theme engine

This new theme engine is changing how theme variables are named and how they interact. We advice to use the new naming for the theme variables as described below but your current customization should work without making these changes.

Concepts

New concepts were introduced with this new theme framework. See Theme reference.

Generated palettes

Colors palettes (like mt-blue-*) are now generated from a base color (they were previously hardcoded). As it follows an algorithm, colors tint may have slightly changed.

Color variables naming consistency

In previous versions of GBC, some inconsistency exists in variables naming (e.g. gbc-secondary-text-color was used with gbc-primary-[medium-]color and gbc-primary-text-color with gbc-secondary-background-color).

Starting from 1.00.41, we renamed some variables to have more consistency, so that:

palette-* are for color palette variables (with generated variants)
theme-* are for theme wide variables
gbc-*Widget-* are for specific widget/widget family variables
*-primary-*-color aims featured elements like buttons, topbar, highlighted table lines
*-secondary-*-color aims standard elements like containers, labels
*-field-*-color aims field elements

What is changing

Previous customizations should not be affected by this new framework, as every old theme variable has been kept as an alias.

For more information about theme variables, see Theme variables reference.

Note:

Old variables are still valid, but they are deprecated and will be subject to disappear. If you have customizations, don't hesitate to change variables names to fit the new ones.

Table 1. Renamed variables
Old variable	Renamed to	Comment
`primary-*`	`palette-primary-*`	generated as a color palette from base color `palette-primary`
`text-light-*`	`palette-text-primary-*`	generated as a color palette from base color `palette-text-primary`
`text-dark-*`	`palette-text-secondary-*`	generated as a color palette from base color `palette-text-secondary`
`gbc-secondary-text-color`	`theme-primary-color`
`gbc-primary-color`	`theme-primary-background-color`
`gbc-primary-medium-color`	`theme-primary-emphasis-background-color`
`gbc-primary-light-color`	`theme-primary-faded-background-color`
`gbc-primary-text-color`	`theme-secondary-color`
`gbc-primary-background-color`	`theme-secondary-background-color`
`gbc-secondary-background-color`	`theme-secondary-alternative-background-color`
`gbc-field-background-color`	`theme-field-background-color`
`gbc-field-disabled-background-color`	`theme-field-disabled-background-color`
`gbc-field-readonly-background-color`	`theme-field-readonly-background-color`
`gbc-disabled-color`	`theme-disabled-color`
`gbc-separator-color`	`theme-separator-color`
`gbc-header-color`	`theme-header-color`
`gbc-message-color`	`theme-message-background-color`
`gbc-error-color`	`theme-error-background-color`
`traditional-mode-letter-spacing`	`theme-traditional-mode-letter-spacing`
`table-min-width`	`theme-table-min-width`
`table-min-pageSize`	`theme-table-min-page-size`
`gbc-checkbox-size`	`theme-checkbox-size`
`gbc-radiobutton-size`	`theme-radiobutton-size`
`field-default-height`	`theme-field-default-height`
`gbc-field-height-ratio`	`theme-field-height-ratio`
`gbc-font-size-ratio`	`theme-font-size-ratio`
`gbc-margin-ratio`	`theme-margin-ratio`
`gbc-max-icon-size`	`theme-max-icon-size`
`gbc-table-margin`	`theme-table-margin`
`gbc-combobox-margin`	`theme-combobox-margin`
`gbc-grid-inner-gutter`	`theme-grid-inner-gutter`
`button-default-width`	`theme-button-default-width`
`group-separation-size`	`theme-group-separation-size`
`splitter-size`	`theme-splitter-size`
`gbc-sidebar-always-visible-min-width`	`theme-sidebar-always-visible-min-width`
`gbc-sidebar-default-width`	`theme-sidebar-default-width`
`gbc-sidebar-max-width`	`theme-sidebar-max-width`
`gbc-toggle-right-sidebar-min-width`	`theme-toggle-chromebar-min-width`
`gbc-disable-ending-popup`	`theme-disable-ending-popup`
`gbc-disable-context-menu`	`theme-disable-context-menu`
`gbc-scrollers-speed`	`theme-scrollers-speed`
`gbc-scrollers-clickonly`	`theme-scrollers-clickonly`
`gbc-message-display-time`	`theme-message-display-time`
`gbc-message-position`	`theme-message-display-position`
`gbc-error-display-time`	`theme-error-display-time`
`gbc-error-position`	`theme-error-display-position`
`gbc-animation-duration`	`theme-animation-duration`

Table 2. Value changed variables
Variable	Comment
`mt-[color]`, `mt-[color]-*`	generated via color palette algorithm, colors tint may have slightly changed
`gbc-genero-[color]`	`mt-[color]` based values, generated via color palette algorithm, same tint changes
`gbc-genero-appWorkSpace`	using `theme-secondary-background-color` rather than `gbc-primary-background-color`
`gbc-genero-background`	using `theme-secondary-background-color` rather than `gbc-secondary-background-color`
`gbc-genero-buttonFace`	using `theme-primary-background-color` rather than `gbc-primary-color`
`gbc-genero-buttonText`	using `theme-primary-color` rather than `gbc-secondary-text-color`
`gbc-genero-grayText`	using `theme-disabled-color` rather than `gbc-disabled-color`
`gbc-genero-highLight`	using `theme-primary-emphasis-background-color` rather than `gbc-primary-medium-color`
`gbc-genero-highLightText`	using `theme-primary-color` rather than `gbc-secondary-text-color`
`gbc-genero-infoBackground`	using `theme-secondary-background-color` rather than `gbc-primary-background-color`
`gbc-genero-infoText`	using `theme-secondary-color` rather than `gbc-primary-text-color`
`gbc-genero-systemAlternateBackground`	using `theme-primary-faded-background-color` rather than `gbc-primary-light-color`
`gbc-genero-window`	using `theme-secondary-background-color` rather than `gbc-primary-background-color`
`gbc-genero-windowText`	using `theme-secondary-color` rather than `gbc-primary-text-color`

Table 3. New variables
Variable	Comment
`palette-primary`	base color for palette `palette-primary-*`
`palette-secondary`	base color for palette `palette-secondary-*`
`palette-secondary-*`	color palette based on `palette-secondary`
`palette-disabled`	base color for palette `palette-disabled-*`
`palette-disabled-*`	color palette based on `palette-disabled`
`palette-text-primary`	base color for palette `palette-text-primary-*`
`palette-text-secondary`	base color for palette `palette-text-secondary-*`
`theme-secondary-faded-color`	color for less important text
`theme-placeholder-color`	color for placeholder text
`theme-overlay-background-color`	color for overlays (semi-transparent by default)
`theme-message-color`	color for message text
`theme-input-padding-top`	padding top for inputs
`theme-input-padding-right`	padding right for inputs
`theme-input-padding-bottom`	padding bottom for inputs
`theme-input-padding-left`	padding left for inputs
`theme-textarea-padding-top`	padding top for textareas
`theme-textarea-padding-right`	padding right for textareas
`theme-textarea-padding-bottom`	padding bottom for textareas
`theme-textarea-padding-left`	padding left for textareas
`theme-font-family`	theme's font-family
`theme-font-family-monospace`	theme's font-family for monospace fonts
`mdi-cust-icons`	additional font icon characters to include (see your local node_modules/@mdi/font/preview.html)

Table 4. Deleted variables
Variable	Comment
`z-index-under-Normal`	unused variable
`z-index-Window`	unused variable
`___gbc-sidebar-default-width`	old commented value
`gbc-primary-strong-color`	unused variable
`gbc-secondary-color`	using `theme-secondary-color`

Table 5. Unchanged variables
Variable
`z-index-Normal`
`z-index-above-Normal`
`z-index-TopMenu`
`z-index-Toolbar`
`z-index-Dialog`
`z-index-Modal`
`z-index-BarsContainer`
`z-index-DropDown`
`z-index-above-DropDown`
`z-index-Message`
`z-index-LogPrompt`
`host-menu-order-upload-icon`
`host-menu-order-runtime-status`
`host-menu-order-about`
`host-menu-order-debug`
`host-menu-order-run-gwc`
`host-menu-order-run-gdc`
`host-menu-order-log-proxy`
`host-menu-order-log-vm`
`host-menu-order-settings`
`host-menu-order-bookmark`
`host-menu-order-close`
`aui-mutation-watch`
`droid-font-path`
`mdi-css-prefix`
`mdi-font-path`