GBC 1.00.43 was released January 25th, 2018

This page provides information about new features, as well as changes you need to take care of when migrating your customization to this version.

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 for a complete variable 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.

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.

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`

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`

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)

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` rather

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`