@bryntum/grid-thin-trial 7.1.1

package/README.md

@@ -0,0 +1,52 @@
+# Bryntum Grid Thin Trial
+
+Bryntum Grid is a high performance JavaScript data grid component.
+This package is designed for combining multiple Bryntum products with thin framework wrappers for Bryntum Grid.
+Please refer to the Bryntum Grid documentation.
+
+It integrates seamlessly with React, Vue, Angular, or plain vanilla JS.
+
+For more information about all features, visit the [Bryntum Grid site](https://bryntum.com/products/grid/).
+
+# Bryntum repository access setup
+
+This npm package requires access to the private Bryntum npm repository. You must be logged in to this repository as a
+licensed or trial user to access it.
+
+Please check the [Online npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) for 
+detailed information on the sign-up/login process.
+
+# Installation
+
+The installation is performed by issuing the installation command in the root of the application folder. The specific
+command depends on the package manager used by the application.
+
+The following are most frequently used:
+
+Install using `npm`:
+
+```shell
+npm install @bryntum/grid-thin@npm:bryntum/grid-thin-trial
+```
+
+Install using `yarn`:
+
+```shell
+yarn add @bryntum/grid-thin@npm:bryntum/grid-thin-trial
+```
+
+# Online references
+
+* [Bryntum npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository)
+* [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
+* [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
+* [Bryntum Support Forum](https://forum.bryntum.com/)
+* [Contact us](https://bryntum.com/contact/)
+
+# License and copyright
+
+Bryntum Grid is commercial software and requires a paid license.
+Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
+
+Copyright © 2009-2026, Bryntum
+All rights reserved.

package/entry.js

@@ -0,0 +1,124 @@
+// column
+export { default as ActionColumn } from '@bryntum/grid-thin/lib/column/ActionColumn.js';
+export { default as AggregateColumn } from '@bryntum/grid-thin/lib/column/AggregateColumn.js';
+export { default as ChartColumn } from '@bryntum/grid-thin/lib/column/ChartColumn.js';
+export { default as CheckColumn } from '@bryntum/grid-thin/lib/column/CheckColumn.js';
+export { default as ColorColumn } from '@bryntum/grid-thin/lib/column/ColorColumn.js';
+export { default as Column } from '@bryntum/grid-thin/lib/column/Column.js';
+export { default as CurrencyColumn } from '@bryntum/grid-thin/lib/column/CurrencyColumn.js';
+export { default as DateColumn } from '@bryntum/grid-thin/lib/column/DateColumn.js';
+export { default as NumberColumn } from '@bryntum/grid-thin/lib/column/NumberColumn.js';
+export { default as PercentColumn } from '@bryntum/grid-thin/lib/column/PercentColumn.js';
+export { default as RatingColumn } from '@bryntum/grid-thin/lib/column/RatingColumn.js';
+export { default as RowNumberColumn } from '@bryntum/grid-thin/lib/column/RowNumberColumn.js';
+export { default as SparklineColumn } from '@bryntum/grid-thin/lib/column/SparklineColumn.js';
+export { default as TemplateColumn } from '@bryntum/grid-thin/lib/column/TemplateColumn.js';
+export { default as TimeColumn } from '@bryntum/grid-thin/lib/column/TimeColumn.js';
+export { default as TreeColumn } from '@bryntum/grid-thin/lib/column/TreeColumn.js';
+export { default as WidgetColumn } from '@bryntum/grid-thin/lib/column/WidgetColumn.js';
+
+// data
+export { default as ColumnStore } from '@bryntum/grid-thin/lib/data/ColumnStore.js';
+export { default as GridRowModel } from '@bryntum/grid-thin/lib/data/GridRowModel.js';
+
+// feature
+export { default as AIFilter } from '@bryntum/grid-thin/lib/feature/ai/AIFilter.js';
+export { default as CellCopyPaste } from '@bryntum/grid-thin/lib/feature/CellCopyPaste.js';
+export { default as CellEdit } from '@bryntum/grid-thin/lib/feature/CellEdit.js';
+export { default as CellMenu } from '@bryntum/grid-thin/lib/feature/CellMenu.js';
+export { default as CellTooltip } from '@bryntum/grid-thin/lib/feature/CellTooltip.js';
+export { default as Charts } from '@bryntum/grid-thin/lib/feature/Charts.js';
+export { default as ColumnAutoWidth } from '@bryntum/grid-thin/lib/feature/ColumnAutoWidth.js';
+export { default as ColumnDragToolbar } from '@bryntum/grid-thin/lib/feature/ColumnDragToolbar.js';
+export { default as ColumnPicker } from '@bryntum/grid-thin/lib/feature/ColumnPicker.js';
+export { default as ColumnRename } from '@bryntum/grid-thin/lib/feature/ColumnRename.js';
+export { default as ColumnReorder } from '@bryntum/grid-thin/lib/feature/ColumnReorder.js';
+export { default as ColumnResize } from '@bryntum/grid-thin/lib/feature/ColumnResize.js';
+export { default as FillHandle } from '@bryntum/grid-thin/lib/feature/FillHandle.js';
+export { default as Filter } from '@bryntum/grid-thin/lib/feature/Filter.js';
+export { default as FilterBar } from '@bryntum/grid-thin/lib/feature/FilterBar.js';
+export { default as GridChartDesigner } from '@bryntum/grid-thin/lib/widget/GridChartDesigner.js';
+export { default as GridFeatureManager } from '@bryntum/grid-thin/lib/feature/GridFeatureManager.js';
+export { default as Group } from '@bryntum/grid-thin/lib/feature/Group.js';
+export { default as GroupSummary } from '@bryntum/grid-thin/lib/feature/GroupSummary.js';
+export { default as LockRows } from '@bryntum/grid-thin/lib/feature/LockRows.js';
+export { default as HeaderMenu } from '@bryntum/grid-thin/lib/feature/HeaderMenu.js';
+export { default as MergeCells } from '@bryntum/grid-thin/lib/feature/MergeCells.js';
+export { default as PinColumns } from '@bryntum/grid-thin/lib/feature/PinColumns.js';
+export { default as QuickFind } from '@bryntum/grid-thin/lib/feature/QuickFind.js';
+export { default as RegionResize } from '@bryntum/grid-thin/lib/feature/RegionResize.js';
+export { default as RowCopyPaste } from '@bryntum/grid-thin/lib/feature/RowCopyPaste.js';
+export { default as RowEdit } from '@bryntum/grid-thin/lib/feature/RowEdit.js';
+export { default as RowExpander } from '@bryntum/grid-thin/lib/feature/RowExpander.js';
+export { default as RowReorder } from '@bryntum/grid-thin/lib/feature/RowReorder.js';
+export { default as RowResize } from '@bryntum/grid-thin/lib/feature/RowResize.js';
+export { default as Search } from '@bryntum/grid-thin/lib/feature/Search.js';
+export { default as Sort } from '@bryntum/grid-thin/lib/feature/Sort.js';
+export { default as StickyCells } from '@bryntum/grid-thin/lib/feature/StickyCells.js';
+export { default as Stripe } from '@bryntum/grid-thin/lib/feature/Stripe.js';
+export { default as Split } from '@bryntum/grid-thin/lib/feature/Split.js';
+export { default as Summary } from '@bryntum/grid-thin/lib/feature/Summary.js';
+export { default as Tree } from '@bryntum/grid-thin/lib/feature/Tree.js';
+export { default as TreeGroup } from '@bryntum/grid-thin/lib/feature/TreeGroup.js';
+
+// feature base
+export { default as CopyPasteBase } from '@bryntum/grid-thin/lib/feature/base/CopyPasteBase.js';
+export { default as GridEditBase } from '@bryntum/grid-thin/lib/feature/base/GridEditBase.js';
+
+// export feature
+export { default as ExportDialog } from '@bryntum/grid-thin/lib/view/export/ExportDialog.js';
+export { default as ExporterBase } from '@bryntum/grid-thin/lib/feature/export/exporter/ExporterBase.js';
+export { default as Exporter } from '@bryntum/grid-thin/lib/feature/export/exporter/Exporter.js';
+export { default as ExportOrientationCombo } from '@bryntum/grid-thin/lib/view/export/field/ExportOrientationCombo.js';
+export { default as ExportRowsCombo } from '@bryntum/grid-thin/lib/view/export/field/ExportRowsCombo.js';
+export { default as MultiPageExporter } from '@bryntum/grid-thin/lib/feature/export/exporter/MultiPageExporter.js';
+export { default as MultiPageVerticalExporter } from '@bryntum/grid-thin/lib/feature/export/exporter/MultiPageVerticalExporter.js';
+export { default as PdfExport } from '@bryntum/grid-thin/lib/feature/export/PdfExport.js';
+export { default as Print } from '@bryntum/grid-thin/lib/feature/export/Print.js';
+export { default as PrintMixin } from '@bryntum/grid-thin/lib/feature/export/mixin/PrintMixin.js';
+export { default as SinglePageExporter } from '@bryntum/grid-thin/lib/feature/export/exporter/SinglePageExporter.js';
+export { default as SinglePageUnscaledExporter } from '@bryntum/grid-thin/lib/feature/export/exporter/SinglePageUnscaledExporter.js';
+export { FileFormat, Orientation, PaperFormat, RowsRange } from '@bryntum/grid-thin/lib/feature/export/Utils.js';
+export { default as ConsumerBase } from '@bryntum/grid-thin/lib/feature/export/consumer/ConsumerBase.js';
+export { default as PrintConsumer } from '@bryntum/grid-thin/lib/feature/export/consumer/PrintConsumer.js';
+export { default as SingleFetchConsumer } from '@bryntum/grid-thin/lib/feature/export/consumer/SingleFetchConsumer.js';
+export { default as WebSocketConsumer } from '@bryntum/grid-thin/lib/feature/export/consumer/WebSocketConsumer.js';
+
+// feature experimental
+export { default as ExcelExporter } from '@bryntum/grid-thin/lib/feature/experimental/ExcelExporter.js';
+export { default as XlsProviderBase } from '@bryntum/grid-thin/lib/feature/experimental/xlsproviders/XlsProviderBase.js';
+export { default as WriteExcelFileProvider } from '@bryntum/grid-thin/lib/feature/experimental/xlsproviders/WriteExcelFileProvider.js';
+export { default as FileDrop } from '@bryntum/grid-thin/lib/feature/experimental/FileDrop.js';
+
+// row
+export { default as Row } from '@bryntum/grid-thin/lib/row/Row.js';
+
+// util
+export { default as GridLocation } from '@bryntum/grid-thin/lib/util/GridLocation.js';
+export { default as TableExporter } from '@bryntum/grid-thin/lib/util/TableExporter.js';
+
+// view
+export { default as Bar } from '@bryntum/grid-thin/lib/view/Bar.js';
+export { default as Footer } from '@bryntum/grid-thin/lib/view/Footer.js';
+export { default as Grid } from '@bryntum/grid-thin/lib/view/Grid.js';
+export { default as GridBase } from '@bryntum/grid-thin/lib/view/GridBase.js';
+export { default as Header } from '@bryntum/grid-thin/lib/view/Header.js';
+export { default as RowManager } from '@bryntum/grid-thin/lib/row/RowManager.js';
+export { default as SubGrid } from '@bryntum/grid-thin/lib/view/SubGrid.js';
+export { default as TreeGrid } from '@bryntum/grid-thin/lib/view/TreeGrid.js';
+
+// view mixin
+export { default as GridElementEvents } from '@bryntum/grid-thin/lib/view/mixin/GridElementEvents.js';
+export { default as GridFeatures } from '@bryntum/grid-thin/lib/view/mixin/GridFeatures.js';
+export { default as GridResponsive } from '@bryntum/grid-thin/lib/view/mixin/GridResponsive.js';
+export { default as GridSelection } from '@bryntum/grid-thin/lib/view/mixin/GridSelection.js';
+export { default as GridState } from '@bryntum/grid-thin/lib/view/mixin/GridState.js';
+export { default as GridSubGrids } from '@bryntum/grid-thin/lib/view/mixin/GridSubGrids.js';
+
+// widget
+export { default as AIFilterField } from '@bryntum/grid-thin/lib/widget/AIFilterField.js';
+export { default as GridFieldFilterPicker } from '@bryntum/grid-thin/lib/widget/GridFieldFilterPicker.js';
+export { default as GridFieldFilterPickerGroup } from '@bryntum/grid-thin/lib/widget/GridFieldFilterPickerGroup.js';
+export { default as GroupBar } from '@bryntum/grid-thin/lib/widget/GroupBar.js';
+export { default as TreeCombo } from '@bryntum/grid-thin/lib/widget/TreeCombo.js';
+export { default as ChecklistFilterCombo, VALUE_COUNT } from '@bryntum/grid-thin/lib/widget/ChecklistFilterCombo.js';

package/fluent2-dark.css

@@ -0,0 +1,227 @@
+@charset "UTF-8";
+
+/* Themes need more specific rules than Widgets etc. to make sure the values are applied no matter the import order */
+:root:not(.b-nothing), :host(:not(.b-nothing)) {
+    --b-primary                                  : var(--b-color-blue);
+    --b-secondary                                : var(--b-color-orange);
+
+    --b-mix                                      : #262626;
+    --b-opposite                                 : #fff;
+
+    --b-elevation-1                              : 0 0 2px rgba(0, 0, 0, 0.42), 0 4px 8px rgba(0, 0, 0, 0.44);
+    --b-elevation-2                              : 0 0 2px rgba(0, 0, 0, 0.42), 0 8px 16px rgba(0, 0, 0, 0.44);
+    --b-elevation-3                              : 0 0 8px rgba(0, 0, 0, 0.42), 0 14px 28px rgba(0, 0, 0, 0.44);
+
+    /* region Neutral shades */
+    --b-neutral-100                              : hsl(0 0 15%); /* #262626 */
+    --b-neutral-99                               : hsl(0 0 15.85%);
+    --b-neutral-98                               : hsl(0 0 16.7%);
+    --b-neutral-97                               : hsl(0 0 17.55%);
+    --b-neutral-96                               : hsl(0 0 18.4%);
+    --b-neutral-95                               : hsl(0 0 19.25%);
+    --b-neutral-94                               : hsl(0 0 20.1%);
+    --b-neutral-93                               : hsl(0 0 20.95%);
+    --b-neutral-92                               : hsl(0 0 21.8%);
+    --b-neutral-91                               : hsl(0 0 22.65%);
+    --b-neutral-90                               : hsl(0 0 23.5%);
+    --b-neutral-85                               : hsl(0 0 27.75%);
+    --b-neutral-80                               : hsl(0 0 32%);
+    --b-neutral-75                               : hsl(0 0 36.25%);
+    --b-neutral-70                               : hsl(0 0 40.5%);
+    --b-neutral-65                               : hsl(0 0 44.75%);
+    --b-neutral-60                               : hsl(0 0 49%);
+    --b-neutral-55                               : hsl(0 0 53.25%);
+    --b-neutral-50                               : hsl(0 0 57.5%);
+    --b-neutral-45                               : hsl(0 0 61.75%);
+    --b-neutral-40                               : hsl(0 0 66%);
+    --b-neutral-35                               : hsl(0 0 70.25%);
+    --b-neutral-30                               : hsl(0 0 74.5%);
+    --b-neutral-25                               : hsl(0 0 78.75%);
+    --b-neutral-20                               : hsl(0 0 83%);
+    --b-neutral-15                               : hsl(0 0 87.25%);
+    --b-neutral-10                               : hsl(0 0 91.5%);
+    --b-neutral-5                                : hsl(0 0 95.75%);
+    --b-neutral-2                                : hsl(0 0 98.3%);
+    --b-neutral-1                                : hsl(0 0 99.15%);
+    --b-neutral-0                                : hsl(0 0 100%); /* #ffffff */
+    /* endregion */
+
+    /* region Core */
+
+    --b-widget-color-scheme                      : dark;
+    --b-widget-border-radius                     : .4em;
+    --b-widget-border-radius-large               : .8em;
+    --b-widget-padding                           : .8em;
+    --b-widget-gap                               : .8em;
+    --b-widget-border-color                      : var(--b-neutral-60);
+    --b-widget-sub-menu-icon                     : "\f105";
+
+    --b-icon-picker                              : "\f107";
+    --b-icon-spin-up                             : "\f077";
+    --b-icon-spin-down                           : "\f078";
+
+    --b-button-height                            : 2.5em;
+
+    --b-button-type-text-text-only-border-radius : 10em;
+    --b-button-icon-only-border-radius           : var(--b-widget-border-radius);
+
+    --b-checkbox-check-font-size                 : .7em;
+
+    --b-chip-view-chip-border-radius             : var(--b-widget-border-radius);
+    --b-chip-view-chip-background                : var(--b-neutral-94);
+    --b-chip-view-chip-hover-background          : var(--b-neutral-92);
+    --b-chip-view-chip-selected-color            : var(--b-text-5);
+
+    --b-divider-line-color                       : var(--b-border-6);
+    --b-divider-text-color                       : var(--b-text-2);
+
+    --b-field-set-border-color                   : var(--b-neutral-80);
+
+    --b-list-item-border-radius                  : var(--b-widget-border-radius);
+    --b-list-item-focus-background               : var(--b-neutral-93);
+    --b-list-item-selected-background            : var(--b-neutral-96);
+
+    --b-menu-item-color                          : var(--b-text-2);
+    --b-menu-item-border-radius                  : var(--b-widget-border-radius);
+    --b-menu-item-padding                        : .5em .6em;
+    --b-menu-padding                             : .4em;
+    --b-menu-item-separator-height               : 9px;
+    --b-menu-item-separator-inset                : -.4em;
+
+    --b-panel-with-header-padding                : 0 var(--b-widget-padding-large) var(--b-widget-padding-large) var(--b-widget-padding-large);
+
+    --b-popup-background                         : var(--b-panel-background);
+    --b-popup-padding                            : var(--b-widget-padding);
+
+    --b-radio-check-gap                          : 0.25em;
+
+    --b-slide-toggle-border-color                : var(--b-border-5);
+    --b-slide-toggle-disabled-border-color       : transparent;
+    --b-slide-toggle-height                      : 1.5em;
+    --b-slide-toggle-thumb-background            : var(--b-neutral-40);
+    --b-slide-toggle-hovered-thumb-background    : var(--b-neutral-35);
+
+    --b-slider-thumb-border                      : .25em solid var(--b-neutral-100);
+    --b-slider-thumb-elevation                   : 0 0 1px 1px var(--b-border-5);
+    --b-slider-thumb-value-size                  : 1.9em;
+    --b-slider-track-color                       : var(--b-neutral-45);
+    --b-slider-step-border-radius                : 0;
+    --b-slider-step-width                        : 1px;
+    --b-slider-step-height                       : 100%;
+    --b-slider-step-color                        : var(--b-neutral-100);
+    --b-slider-step-opacity                      : 1;
+
+    --b-splitter-color                           : var(--b-neutral-80);
+    --b-splitter-size                            : 1px;
+    --b-splitter-hover-size                      : 5px;
+    --b-splitter-hover-color                     : var(--b-neutral-90);
+
+    --b-tab-label-position                       : relative;
+    --b-tab-indicator-border-radius              : var(--b-widget-border-radius);
+    --b-tab-indicator-height                     : .2em;
+    --b-tab-indicator-hidden-color               : var(--b-neutral-80);
+    --b-tab-hover-indicator-opacity              : 1;
+    --b-tab-hover-indicator-color                : var(--b-neutral-80);
+    --b-tab-hover-background                     : var(--b-neutral-100);
+    --b-tab-hover-color                          : var(--b-neutral-40);
+
+    --b-tab-bar-border-bottom-width              : 0;
+
+    --b-text-field-outlined-input-padding        : .8em;
+    --b-text-field-outlined-border-color         : var(--b-border-6) var(--b-border-6) var(--b-border-3) var(--b-border-6);
+    --b-text-field-outlined-focus-border-width   : 1px 1px 2px 1px;
+    --b-field-trigger-edge-gap                   : .8em;
+    --b-spin-trigger-font-size                   : .8em;
+
+    /* --b-tooltip-rich-background    : var(--b-neutral-90); */
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-header-font-weight                  : 400;
+    --b-grid-header-color                        : var(--b-neutral-25);
+    --b-grid-header-icon-color                   : var(--b-neutral-35);
+
+    /* Gantt */
+    --b-scroll-button-border-width               : 1px;
+
+    /* TaskBoard */
+    --b-task-board-column-header-font-weight     : 600;
+}
+
+/* Shades of primary color have to be specified per widget, for color-mix to work as intended */
+.b-bryntum:not(.b-nothing) {
+    --bi-primary-shade                                : var(--b-primary-50);
+
+    /* region Core */
+
+    --b-button-focus-border-color                     : var(--b-border-6);
+
+    --b-button-filled-hover-background                : var(--b-primary-40);
+    --b-button-filled-pressed-background              : var(--b-primary-30);
+    --b-button-filled-active-background               : var(--b-primary-30);
+
+    --b-button-outlined-hover-border-color            : var(--b-border-5);
+    --b-button-outlined-hover-background              : var(--b-neutral-97);
+    --b-button-outlined-pressed-background            : var(--b-neutral-93);
+    --b-button-outlined-active-background             : var(--b-neutral-93);
+    --b-button-outlined-focused-background            : var(--b-neutral-100);
+
+    --b-checkbox-checked-background                   : var(--bi-primary-shade);
+    --b-checkbox-checked-border-color                 : var(--b-checkbox-checked-background);
+    --b-checkbox-checked-hover-background             : var(--b-primary-45);
+
+    --b-chip-view-chip-selected-background            : var(--b-primary);
+    --b-chip-view-chip-active-background              : var(--b-primary);
+    --b-chip-view-chip-active-selected-background     : var(--b-primary);
+
+    --b-list-checkbox-checked-background              : var(--b-primary);
+
+    --b-menu-background                               : var(--b-primary-100);
+
+    --b-menu-item-hover-background                    : var(--b-neutral-96);
+    --b-menu-item-focus-background                    : var(--b-neutral-96);
+    --b-menu-item-hover-icon-color                    : var(--b-primary-40);
+    --b-menu-item-focus-icon-color                    : var(--b-primary-40);
+
+    --b-radio-checked-color                           : var(--bi-primary-shade);
+    --b-radio-checked-background                      : var(--b-neutral-100);
+    --b-radio-checked-border-color                    : var(--b-widget-border-color);
+
+    --b-slide-toggle-background                       : var(--b-neutral-100);
+    --b-slide-toggle-hover-background                 : var(--b-neutral-100);
+    --b-slide-toggle-checked-hovered-thumb-background : var(--b-neutral-100);
+    --b-slide-toggle-checked-border-color             : transparent;
+    --b-slide-toggle-checked-background               : var(--bi-primary-shade);
+    --b-slide-toggle-checked-hover-background         : var(--b-primary-45);
+
+    --b-slider-color                                  : var(--bi-primary-shade);
+
+    --b-tab-indicator-color                           : var(--bi-primary-shade);
+
+    --b-text-field-outlined-hover-border-color        : var(--b-border-5) var(--b-border-5) var(--b-border-2) var(--b-border-5);
+    --b-text-field-focus-border-color                 : var(--b-border-5) var(--b-border-5) var(--b-primary) var(--b-border-5);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+
+    --b-toast-background                              : var(--b-neutral-100);
+
+    /* endregion */
+
+    /* Grid */
+
+    --b-grid-cell-hover-background                    : var(--b-primary-94);
+    --b-grid-cell-hover-selected-background           : var(--b-primary-93);
+
+    --b-rating-column-empty-color                     : var(--b-neutral-90);
+
+    --b-tree-expander-icon-font-size                  : 1em;
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "Fluent2Dark";
+    --b-theme-filename         : "fluent2-dark";
+    --b-theme-button-rendition : "outlined";
+    --b-theme-label-position   : "above";
+    --b-theme-overlap-label    : "false";
+}

package/fluent2-light.css

@@ -0,0 +1,191 @@
+@charset "UTF-8";
+
+/* Themes need more specific rules than Widgets etc. to make sure the values are applied no matter the import order */
+:root:not(.b-nothing), :host(:not(.b-nothing)) {
+    --b-primary                                  : var(--b-color-blue);
+    --b-secondary                                : var(--b-color-orange);
+
+    --b-mix                                      : #fff;
+    --b-opposite                                 : #000;
+
+    --b-elevation-1                              : 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
+    --b-elevation-2                              : 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
+    --b-elevation-3                              : 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
+
+    /* region Core */
+
+    --b-widget-color-scheme                      : light;
+    --b-widget-border-radius                     : .4em;
+    --b-widget-border-radius-large               : .8em;
+    --b-widget-padding                           : .8em;
+    --b-widget-gap                               : .8em;
+    --b-widget-border-color                      : var(--b-neutral-60);
+    --b-widget-sub-menu-icon                     : "\f105";
+
+    --b-icon-picker                              : "\f107";
+    --b-icon-spin-up                             : "\f077";
+    --b-icon-spin-down                           : "\f078";
+
+    --b-button-height                            : 2.5em;
+
+    --b-button-type-text-text-only-border-radius : 10em;
+    --b-button-icon-only-border-radius           : var(--b-widget-border-radius);
+
+    --b-checkbox-check-font-size                 : .7em;
+
+    --b-chip-view-chip-border-radius             : var(--b-widget-border-radius);
+    --b-chip-view-chip-background                : var(--b-neutral-94);
+    --b-chip-view-chip-hover-background          : var(--b-neutral-92);
+    --b-chip-view-chip-selected-color            : var(--b-text-5);
+
+    --b-divider-line-color                       : var(--b-border-6);
+    --b-divider-text-color                       : var(--b-text-2);
+
+    --b-field-set-border-color                   : var(--b-neutral-80);
+
+    --b-list-item-border-radius                  : var(--b-widget-border-radius);
+    --b-list-item-focus-background               : var(--b-neutral-93);
+    --b-list-item-selected-background            : var(--b-neutral-96);
+
+    --b-menu-item-color                          : var(--b-text-2);
+    --b-menu-item-border-radius                  : var(--b-widget-border-radius);
+    --b-menu-item-padding                        : .5em .6em;
+    --b-menu-padding                             : .4em;
+    --b-menu-item-separator-height               : 9px;
+    --b-menu-item-separator-inset                : -.4em;
+
+    --b-panel-with-header-padding                : 0 var(--b-widget-padding-large) var(--b-widget-padding-large) var(--b-widget-padding-large);
+
+    --b-popup-background                         : var(--b-panel-background);
+    --b-popup-padding                            : var(--b-widget-padding);
+
+    --b-radio-check-gap                          : 0.25em;
+
+    --b-slide-toggle-border-color                : var(--b-border-5);
+    --b-slide-toggle-disabled-border-color       : transparent;
+    --b-slide-toggle-height                      : 1.5em;
+    --b-slide-toggle-thumb-background            : var(--b-neutral-40);
+    --b-slide-toggle-hovered-thumb-background    : var(--b-neutral-35);
+
+    --b-slider-thumb-border                      : .25em solid var(--b-neutral-100);
+    --b-slider-thumb-elevation                   : 0 0 1px 1px var(--b-border-5);
+    --b-slider-thumb-value-size                  : 1.9em;
+    --b-slider-track-color                       : var(--b-neutral-45);
+    --b-slider-step-border-radius                : 0;
+    --b-slider-step-width                        : 1px;
+    --b-slider-step-height                       : 100%;
+    --b-slider-step-color                        : var(--b-neutral-100);
+    --b-slider-step-opacity                      : 1;
+
+    --b-splitter-color                           : var(--b-neutral-80);
+    --b-splitter-size                            : 1px;
+    --b-splitter-hover-size                      : 5px;
+    --b-splitter-hover-color                     : var(--b-neutral-90);
+
+    --b-tab-label-position                       : relative;
+    --b-tab-indicator-border-radius              : var(--b-widget-border-radius);
+    --b-tab-indicator-height                     : .2em;
+    --b-tab-indicator-hidden-color               : var(--b-neutral-80);
+    --b-tab-hover-indicator-opacity              : 1;
+    --b-tab-hover-indicator-color                : var(--b-neutral-80);
+    --b-tab-hover-background                     : var(--b-neutral-100);
+    --b-tab-hover-color                          : var(--b-neutral-40);
+
+    --b-tab-bar-border-bottom-width              : 0;
+
+    --b-text-field-outlined-input-padding        : .8em;
+    --b-text-field-outlined-border-color         : var(--b-border-6) var(--b-border-6) var(--b-border-3) var(--b-border-6);
+    --b-text-field-outlined-focus-border-width   : 1px 1px 2px 1px;
+    --b-field-trigger-edge-gap                   : .8em;
+    --b-spin-trigger-font-size                   : .8em;
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-header-font-weight                  : 400;
+    --b-grid-header-color                        : var(--b-neutral-25);
+    --b-grid-header-icon-color                   : var(--b-neutral-35);
+
+    /* Gantt */
+    --b-scroll-button-border-width               : 1px;
+
+    /* TaskBoard */
+    --b-task-board-column-header-font-weight     : 600;
+}
+
+/* Shades of primary color have to be specified per widget, for color-mix to work as intended */
+.b-bryntum:not(.b-nothing) {
+    --bi-primary-shade                                : var(--b-primary-50);
+
+    /* region Core */
+
+    --b-button-focus-border-color                     : var(--b-border-6);
+
+    --b-button-filled-hover-background                : var(--b-primary-40);
+    --b-button-filled-pressed-background              : var(--b-primary-30);
+    --b-button-filled-active-background               : var(--b-primary-30);
+
+    --b-button-outlined-hover-border-color            : var(--b-border-5);
+    --b-button-outlined-hover-background              : var(--b-neutral-97);
+    --b-button-outlined-pressed-background            : var(--b-neutral-93);
+    --b-button-outlined-active-background             : var(--b-neutral-93);
+    --b-button-outlined-focused-background            : var(--b-neutral-100);
+
+    --b-checkbox-checked-background                   : var(--bi-primary-shade);
+    --b-checkbox-checked-border-color                 : var(--b-checkbox-checked-background);
+    --b-checkbox-checked-hover-background             : var(--b-primary-45);
+
+    --b-chip-view-chip-selected-background            : var(--b-primary);
+    --b-chip-view-chip-active-background              : var(--b-primary);
+    --b-chip-view-chip-active-selected-background     : var(--b-primary);
+
+    --b-list-checkbox-checked-background              : var(--b-primary);
+
+    --b-menu-background                               : var(--b-primary-100);
+
+    --b-menu-item-hover-background                    : var(--b-neutral-96);
+    --b-menu-item-focus-background                    : var(--b-neutral-96);
+    --b-menu-item-hover-icon-color                    : var(--b-primary-40);
+    --b-menu-item-focus-icon-color                    : var(--b-primary-40);
+
+    --b-radio-checked-color                           : var(--bi-primary-shade);
+    --b-radio-checked-background                      : var(--b-neutral-100);
+    --b-radio-checked-border-color                    : var(--b-widget-border-color);
+
+    --b-slide-toggle-background                       : var(--b-neutral-100);
+    --b-slide-toggle-hover-background                 : var(--b-neutral-100);
+    --b-slide-toggle-checked-hovered-thumb-background : var(--b-neutral-100);
+    --b-slide-toggle-checked-border-color             : transparent;
+    --b-slide-toggle-checked-background               : var(--bi-primary-shade);
+    --b-slide-toggle-checked-hover-background         : var(--b-primary-45);
+
+    --b-slider-color                                  : var(--bi-primary-shade);
+
+    --b-tab-indicator-color                           : var(--bi-primary-shade);
+
+    --b-text-field-outlined-hover-border-color        : var(--b-border-5) var(--b-border-5) var(--b-border-2) var(--b-border-5);
+    --b-text-field-focus-border-color                 : var(--b-border-5) var(--b-border-5) var(--b-primary) var(--b-border-5);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+
+    --b-toast-background                              : var(--b-neutral-100);
+
+    /* endregion */
+
+    /* Grid */
+
+    --b-grid-cell-hover-background                    : var(--b-primary-94);
+    --b-grid-cell-hover-selected-background           : var(--b-primary-93);
+
+    --b-rating-column-empty-color                     : var(--b-neutral-90);
+
+    --b-tree-expander-icon-font-size                  : 1em;
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "Fluent2Light";
+    --b-theme-filename         : "fluent2-light";
+    --b-theme-button-rendition : "outlined";
+    --b-theme-label-position   : "above";
+    --b-theme-overlap-label    : "false";
+}