@bryntum/grid-thin-trial 7.1.1

package/material3-dark.css

@@ -0,0 +1,307 @@
+@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-elevation-1                                           : 0 1px 3px 0 rgb(0 0 0 /0.22), 0 1px 1px 0 rgb(0 0 0 /0.20), 0 2px 1px -1px rgb(0 0 0 /0.18);
+    --b-elevation-2                                           : 0 1px 5px 0 rgb(0 0 0 /0.22), 0 2px 2px 0 rgb(0 0 0 /0.20), 0 3px 1px -2px rgb(0 0 0 /0.18);
+
+    /* 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 */
+
+    --b-mix                                                   : #262626;
+    --b-opposite                                              : #fff;
+    --b-ripple-background                                     : #00000050;
+    --b-ripple-blend-mode                                     : soft-light;
+
+    /* region Core */
+    --b-widget-color-scheme                                   : dark;
+    --b-widget-border-radius                                  : 0.35em;
+    --b-widget-border-radius-large                            : 1.5em;
+    --b-widget-color                                          : var(--b-neutral-15);
+
+    --b-button-border-radius                                  : 3em;
+    --b-button-filled-hover-box-shadow                        : var(--b-elevation-1);
+    --b-button-outlined-border-color                          : var(--b-border-5);
+    --b-button-outlined-hover-border-color                    : var(--b-border-4);
+    --b-button-tonal-hover-box-shadow                         : var(--b-elevation-1);
+    --b-button-padding                                        : 0 calc(var(--b-button-height) * 0.6);
+    --b-button-icon-padding                                   : 0 calc(var(--b-button-height) * 0.6) 0 calc(var(--b-button-height) * 0.4);
+    --b-button-end-icon-padding                               : 0 calc(var(--b-button-height) * 0.4) 0 calc(var(--b-button-height) * 0.6);
+    --b-button-rotate-padding                                 : calc(var(--b-button-height) * 0.6) 0;
+    --b-button-gap                                            : calc(var(--b-button-height) * 0.2);
+
+    --b-checkbox-border-color                                 : var(--b-neutral-35);
+    --b-checkbox-border-width                                 : 2px;
+    --b-checkbox-check-font-size                              : 1em;
+    --b-checkbox-hover-background                             : transparent;
+    --b-checkbox-hover-border-color                           : var(--b-border-2);
+    --b-checkbox-focus-outline-width                          : 0;
+    --b-checkbox-ring-hover-opacity                           : 0.1;
+    --b-checkbox-ring-focus-opacity                           : 0.2;
+    --b-checkbox-ring-active-opacity                          : 0.3;
+    --b-checkbox-ring-content                                 : '';
+    --b-checkbox-inner-gap                                    : 1em;
+
+    --b-field-set-label-font-size                             : 0.7em;
+
+    --b-panel-with-header-padding                             : 0 var(--b-widget-padding-large) var(--b-widget-padding-large) var(--b-widget-padding-large);
+    --b-panel-header-font-size                                : 1.4em;
+    --b-panel-bottom-toolbar-padding                          : calc(var(--b-panel-padding) / 2) var(--b-panel-padding) var(--b-panel-padding) var(--b-panel-padding);
+    --b-panel-top-toolbar-margin-inline                       : var(--b-panel-padding);
+    --b-panel-top-toolbar-border-radius                       : 100em;
+
+    --b-popup-border-radius                                   : var(--b-widget-border-radius-large);
+
+    --b-radio-group-gap                                       : 0;
+
+    --b-slide-toggle-border-color                             : var(--b-border-3);
+    --b-slide-toggle-thumb-background                         : var(--b-neutral-50);
+    --b-slide-toggle-thumb-size                               : .9em;
+    --b-slide-toggle-checked-thumb-size                       : 1.25em;
+    --b-slide-toggle-hovered-thumb-background                 : var(--b-neutral-30);
+    --b-slide-toggle-disabled-border-color                    : var(--b-neutral-80);
+
+    --b-slider-ring-content                                   : '';
+
+    --b-splitter-size                                         : 1px;
+    --b-splitter-hover-size                                   : 5px;
+
+    --b-tab-label-position                                    : relative;
+    --b-tab-indicator-border-radius                           : var(--b-widget-border-radius) var(--b-widget-border-radius) 0 0;
+    --b-tab-indicator-height                                  : .25em;
+    --b-tab-color                                             : var(--b-neutral-20);
+
+    --b-toolbar-background                                    : var(--b-neutral-97);
+
+    --b-tooltip-plain-font-size                               : 0.8em;
+    --b-tooltip-rich-border-radius                            : 1em;
+
+    /* region TextField */
+
+    --b-field-trigger-color                                   : var(--b-neutral-30);
+
+    --b-text-field-label-scale                                : 0.7;
+    --b-text-field-label-above-grid-area                      : inner;
+    --b-text-field-label-grid-area                            : inner;
+    --b-text-field-focus-border-width                         : 2px;
+    --b-text-field-default-template-areas                     : "inner";
+    --b-text-field-default-template-columns                   : 1fr;
+    /* --b-text-field-border-color                               : var(--b-border-3); */
+
+    --b-text-field-filled-border-width                        : 0 0 1px 0;
+    --b-text-field-filled-focus-border-width                  : 0 0 2px 0;
+    --b-text-field-filled-border-radius                       : var(--b-widget-border-radius) var(--b-widget-border-radius) 0 0;
+    --b-text-field-filled-input-padding                       : 1.25em 1em 0.5em 1em;
+    --b-text-field-filled-no-label-input-padding              : 1em;
+    --b-text-field-filled-background                          : var(--b-neutral-85);
+    --b-text-field-filled-hover-background                    : var(--b-neutral-80);
+    --b-text-field-filled-focus-background                    : var(--b-neutral-80);
+
+    --b-text-field-outlined-focus-border-width                : 2px;
+    --b-text-field-outlined-label-padding                     : 0 0.5em;
+    --b-text-field-outlined-label-before-padding              : 0 1em 0 0;
+    --b-text-field-outlined-label-above-padding               : 0 0.5em;
+    --b-text-field-outlined-background                        : transparent;
+    --b-text-field-outlined-hover-background                  : transparent;
+    --b-text-field-outlined-focus-background                  : transparent;
+    --b-text-field-outlined-hover-border-color                : var(--b-border-1);
+
+    /* Material specific vars */
+    --b-text-field-label-above-placeholder-color              : transparent;
+
+    --b-text-field-filled-material-label-position             : absolute;
+    --b-text-field-filled-material-label-top                  : 0.5em;
+    --b-text-field-filled-material-label-left                 : 1em;
+    --b-text-field-filled-material-label-cursor               : text;
+    --b-text-field-filled-material-empty-label-top            : calc(50% - 0.5em); /*1.25em;*/
+    --b-text-field-filled-material-empty-label-left           : 1em;
+    --b-text-field-filled-material-trigger-label-left         : 3em;
+    --b-text-field-filled-material-trigger-empty-label-left   : 3em;
+
+    --b-text-field-outlined-material-label-position           : absolute;
+    --b-text-field-outlined-material-label-top                : -0.35em;
+    --b-text-field-outlined-material-label-left               : .5em; /* As empty, -padding */
+    --b-text-field-outlined-material-label-cursor             : text;
+    --b-text-field-outlined-material-empty-label-background   : transparent;
+    --b-text-field-outlined-material-empty-label-padding      : 0em;
+    --b-text-field-outlined-material-empty-label-top          : calc(50% - 0.5em); /*1.2em;*/
+    --b-text-field-outlined-material-empty-label-left         : 1em;
+    --b-text-field-outlined-material-trigger-empty-label-left : 3em;
+
+    /* endregion */
+
+    --b-tooltip-plain-color                                   : var(--b-neutral-100);
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-header-background                                : var(--b-neutral-98);
+    --b-grid-header-color                                     : var(--b-neutral-10);
+    --b-grid-cell-color                                       : var(--b-neutral-20);
+
+    --b-group-header-color                                    : var(--b-neutral-5);
+
+    /* Scheduler */
+    --b-column-lines-tick-color                               : var(--b-neutral-93);
+
+    /* TaskBoard */
+    --b-task-board-card-background                            : var(--b-neutral-95);
+    --b-task-board-card-hover-background                      : var(--b-neutral-92);
+
+    /* Chart */
+
+    --b-chart-designer-labels-list-padding-block              : 0;
+}
+
+/* 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-30);
+
+    /* region Core */
+
+    /* Filled differs from light */
+    --b-button-filled-background                      : var(--b-primary-20);
+    --b-button-filled-hover-background                : var(--b-primary-25);
+    --b-button-filled-focused-background              : var(--b-primary-30);
+    --b-button-filled-active-background               : var(--b-primary-30);
+    --b-button-filled-pressed-background              : var(--b-primary-40);
+
+    --b-button-outlined-pressed-background            : var(--b-primary-85);
+    --b-button-outlined-color                         : var(--b-primary-40);
+
+    --b-button-tonal-background                       : var(--b-primary-90);
+    --b-button-tonal-hover-background                 : var(--b-primary-85);
+    --b-button-tonal-focused-background               : var(--b-primary-85);
+    --b-button-tonal-active-background                : var(--b-primary-80);
+    --b-button-tonal-pressed-background               : var(--b-primary-75);
+
+    --b-button-type-text-focused-background           : var(--b-primary-90);
+    --b-button-type-text-pressed-background           : var(--b-primary-85);
+    --b-button-type-text-color                        : var(--b-primary-40);
+
+    --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-checkbox-checked-background);
+    --b-checkbox-focus-outline-color                  : null;
+
+    --b-chip-view-chip-color                          : var(--b-primary-30);
+
+    --b-field-error-tip-color                         : var(--b-neutral-100);
+    --b-field-error-tip-background                    : var(--b-primary-25);
+
+    --b-list-background                               : var(--b-primary-100);
+    --b-list-floating-background                      : var(--b-primary-100);
+    --b-list-checkbox-checked-background              : var(--bi-primary-shade);
+
+    --b-menu-background                               : var(--b-primary-98);
+    --b-menu-item-focus-background                    : var(--b-primary-85);
+    --b-menu-item-hover-color                         : var(--b-primary-30);
+    --b-menu-item-hover-icon-color                    : var(--b-primary-30);
+
+    --b-panel-top-toolbar-button-type-text-color      : var(--b-primary-10);
+
+    --b-popup-background                              : var(--b-primary-98);
+
+    --b-radio-checked-color                           : var(--bi-primary-shade);
+
+    --b-slider-color                                  : var(--bi-primary-shade);
+    --b-slider-track-color                            : var(--b-primary-80);
+    --b-slider-thumb-focus-outline-color              : transparent;
+
+    --b-slide-toggle-background                       : var(--b-neutral-85);
+    --b-slide-toggle-hover-background                 : var(--b-neutral-85);
+    --b-slide-toggle-hovered-thumb-background         : var(--b-neutral-20);
+    --b-slide-toggle-checked-background               : var(--b-primary-30);
+    --b-slide-toggle-checked-hover-background         : var(--b-primary-30);
+    --b-slide-toggle-checked-hovered-thumb-background : var(--b-primary-75);
+    --b-slide-toggle-checked-thumb-background         : var(--b-primary-90);
+
+    --b-tab-active-tab-color                          : var(--b-primary-50);
+
+    --b-tooltip-plain-background                      : var(--b-primary-25);
+    --b-tooltip-rich-background                       : var(--b-primary-98);
+
+    --b-text-field-focus-border-color                 : var(--bi-primary-shade);
+    --b-text-field-outlined-focus-label-color         : var(--bi-primary-shade);
+    --b-text-field-outlined-label-background          : var(--b-parent-background-color, var(--b-neutral-100));
+    --b-text-field-filled-focus-label-color           : var(--bi-primary-shade);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+    --b-text-field-selection-background               : var(--b-primary-70);
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-cell-hover-background                    : var(--b-primary-95);
+    --b-grid-cell-selected-background                 : var(--b-primary-95);
+    --b-grid-cell-hover-selected-background           : var(--b-primary-90);
+    --b-percent-column-fill-background                : var(--b-primary-40);
+}
+
+/* Less vars target b-colorize compared to b-bryntum, making it cheaper to use for coloring many elements */
+.b-colorize:not(.b-nothing) {
+    /* Grid */
+    --b-quick-find-background               : var(--b-primary-90);
+
+    /* Scheduler */
+    --b-resource-time-range-background      : var(--b-primary-70);
+    --b-resource-time-range-color           : var(--b-primary-70);
+
+    /* Calendar */
+    --b-day-view-body-background            : var(--b-primary-90);
+
+    /* TaskBoard */
+    --b-task-board-card-selected-background : var(--b-neutral-90);
+}
+
+/* Override specific event styles in Scheduler */
+.b-sch-event-wrap {
+    --b-sch-event-tonal-background             : color-mix(in srgb, var(--b-primary), var(--b-mix) 80%);
+    --b-sch-event-tonal-hover-background       : color-mix(in srgb, var(--b-primary), var(--b-mix) 60%);
+    --b-sch-event-indented-background          : color-mix(in srgb, var(--b-primary), var(--b-mix) 80%);
+    --b-sch-event-indented-hover-background    : color-mix(in srgb, var(--b-primary), var(--b-mix) 70%);
+    --b-sch-event-indented-selected-background : color-mix(in srgb, var(--b-primary), var(--b-mix) 60%);
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "Material3Dark";
+    --b-theme-filename         : "material3-dark";
+    --b-theme-button-rendition : "tonal";
+    --b-theme-label-position   : "above";
+    --b-theme-overlap-label    : "true";
+    --b-theme-ripple           : "true";
+}

package/material3-light.css

@@ -0,0 +1,201 @@
+@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-ripple-background                                     : #00000010;
+    --b-ripple-blend-mode                                     : soft-light;
+
+    /* region Core */
+
+    --b-widget-color-scheme                                   : light;
+    --b-widget-border-radius                                  : 0.35em;
+    --b-widget-border-radius-large                            : 1.5em;
+
+    --b-button-border-radius                                  : 3em;
+    --b-button-filled-hover-box-shadow                        : var(--b-elevation-1);
+    --b-button-outlined-border-color                          : var(--b-border-5);
+    --b-button-outlined-hover-border-color                    : var(--b-border-4);
+    --b-button-tonal-hover-box-shadow                         : var(--b-elevation-1);
+    --b-button-padding                                        : 0 calc(var(--b-button-height) * 0.6);
+    --b-button-icon-padding                                   : 0 calc(var(--b-button-height) * 0.6) 0 calc(var(--b-button-height) * 0.4);
+    --b-button-end-icon-padding                               : 0 calc(var(--b-button-height) * 0.4) 0 calc(var(--b-button-height) * 0.6);
+    --b-button-rotate-padding                                 : calc(var(--b-button-height) * 0.6) 0;
+    --b-button-gap                                            : calc(var(--b-button-height) * 0.2);
+
+    --b-checkbox-border-color                                 : var(--b-neutral-35);
+    --b-checkbox-border-width                                 : 2px;
+    --b-checkbox-check-font-size                              : 1em;
+    --b-checkbox-hover-background                             : transparent;
+    --b-checkbox-hover-border-color                           : var(--b-border-2);
+    --b-checkbox-focus-outline-width                          : 0;
+    --b-checkbox-ring-hover-opacity                           : 0.1;
+    --b-checkbox-ring-focus-opacity                           : 0.2;
+    --b-checkbox-ring-active-opacity                          : 0.3;
+    --b-checkbox-ring-content                                 : '';
+    --b-checkbox-inner-gap                                    : 1em;
+
+    --b-field-set-label-font-size                             : 0.7em;
+
+    --b-panel-with-header-padding                             : 0 1.5em 1.5em 1.5em;
+    --b-panel-header-font-size                                : 1.4em;
+    --b-panel-bottom-toolbar-padding                          : calc(var(--b-panel-padding) / 2) var(--b-panel-padding) var(--b-panel-padding) var(--b-panel-padding);
+    --b-panel-top-toolbar-margin-inline                       : var(--b-panel-padding);
+    --b-panel-top-toolbar-border-radius                       : 100em;
+
+    --b-popup-border-radius                                   : var(--b-widget-border-radius-large);
+
+    --b-radio-group-gap                                       : 0;
+
+    --b-slide-toggle-border-color                             : var(--b-border-3);
+    --b-slide-toggle-thumb-background                         : var(--b-neutral-50);
+    --b-slide-toggle-thumb-size                               : .9em;
+    --b-slide-toggle-checked-thumb-size                       : 1.25em;
+    --b-slide-toggle-hovered-thumb-background                 : var(--b-neutral-30);
+    --b-slide-toggle-disabled-border-color                    : var(--b-neutral-80);
+
+    --b-slider-ring-content                                   : '';
+
+    --b-splitter-size                                         : 1px;
+    --b-splitter-hover-size                                   : 5px;
+
+    --b-tab-label-position                                    : relative;
+    --b-tab-indicator-border-radius                           : var(--b-widget-border-radius) var(--b-widget-border-radius) 0 0;
+    --b-tab-indicator-height                                  : .25em;
+    --b-tab-color                                             : var(--b-neutral-20);
+
+    --b-toolbar-background                                    : var(--b-neutral-97);
+
+    --b-tooltip-plain-font-size                               : 0.8em;
+    --b-tooltip-rich-border-radius                            : 1em;
+
+    /* region TextField */
+
+    --b-field-trigger-color                                   : var(--b-neutral-30);
+
+    --b-text-field-label-scale                                : 0.7;
+    --b-text-field-label-above-grid-area                      : inner;
+    --b-text-field-label-grid-area                            : inner;
+    --b-text-field-focus-border-width                         : 2px;
+    --b-text-field-default-template-areas                     : "inner";
+    --b-text-field-default-template-columns                   : 1fr;
+    /* --b-text-field-border-color                               : var(--b-border-3); */
+
+    --b-text-field-filled-border-width                        : 0 0 1px 0;
+    --b-text-field-filled-focus-border-width                  : 0 0 2px 0;
+    --b-text-field-filled-border-radius                       : var(--b-widget-border-radius) var(--b-widget-border-radius) 0 0;
+    --b-text-field-filled-input-padding                       : 1.25em 1em 0.5em 1em;
+    --b-text-field-filled-no-label-input-padding              : 1em;
+
+    --b-text-field-outlined-focus-border-width                : 2px;
+    --b-text-field-outlined-label-padding                     : 0 0.5em;
+    --b-text-field-outlined-label-before-padding              : 0 1em 0 0;
+    --b-text-field-outlined-label-above-padding               : 0 0.5em;
+    --b-text-field-outlined-background                        : transparent;
+    --b-text-field-outlined-hover-background                  : transparent;
+    --b-text-field-outlined-focus-background                  : transparent;
+    --b-text-field-outlined-hover-border-color                : var(--b-border-1);
+
+    /* Material specific vars */
+    --b-text-field-label-above-placeholder-color              : transparent;
+
+    --b-text-field-filled-material-label-position             : absolute;
+    --b-text-field-filled-material-label-top                  : 0.5em;
+    --b-text-field-filled-material-label-left                 : 1em;
+    --b-text-field-filled-material-label-cursor               : text;
+    --b-text-field-filled-material-empty-label-top            : calc(50% - 0.5em); /*1.25em;*/
+    --b-text-field-filled-material-empty-label-left           : 1em;
+    --b-text-field-filled-material-trigger-label-left         : 3em;
+    --b-text-field-filled-material-trigger-empty-label-left   : 3em;
+
+    --b-text-field-outlined-material-label-position           : absolute;
+    --b-text-field-outlined-material-label-top                : -0.35em;
+    --b-text-field-outlined-material-label-left               : .5em; /* As empty, -padding */
+    --b-text-field-outlined-material-label-cursor             : text;
+    --b-text-field-outlined-material-empty-label-background   : transparent;
+    --b-text-field-outlined-material-empty-label-padding      : 0em;
+    --b-text-field-outlined-material-empty-label-top          : calc(50% - 0.5em); /*1.2em;*/
+    --b-text-field-outlined-material-empty-label-left         : 1em;
+    --b-text-field-outlined-material-trigger-empty-label-left : 3em;
+
+    /* endregion */
+
+    --b-tooltip-plain-color                                   : var(--b-neutral-100);
+
+    /* endregion */
+
+    /* Chart */
+
+    --b-chart-designer-labels-list-padding-block              : 0;
+}
+
+/* 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-40);
+
+    /* region Core */
+
+    --b-button-outlined-pressed-background            : var(--b-primary-85);
+    --b-button-outlined-color                         : var(--bi-primary-shade);
+
+    --b-button-type-text-focused-background           : var(--b-primary-90);
+    --b-button-type-text-pressed-background           : var(--b-primary-85);
+    --b-button-type-text-color                        : var(--b-primary-40);
+
+    --b-checkbox-checked-background                   : var(--b-primary-45);
+    --b-checkbox-checked-border-color                 : var(--b-checkbox-checked-background);
+    --b-checkbox-checked-hover-background             : var(--bi-primary-shade);
+    --b-checkbox-focus-outline-color                  : null;
+
+    --b-chip-view-chip-color                          : var(--b-primary-30);
+
+    --b-field-error-tip-color                         : var(--b-neutral-100);
+    --b-field-error-tip-background                    : var(--b-primary-25);
+
+    --b-list-background                               : var(--b-primary-100);
+    --b-list-floating-background                      : var(--b-primary-100);
+    --b-list-checkbox-checked-background              : var(--b-primary-45);
+
+    --b-menu-background                               : var(--b-primary-99);
+    --b-menu-item-focus-background                    : var(--b-primary-85);
+    --b-menu-item-hover-color                         : var(--b-primary-30);
+    --b-menu-item-hover-icon-color                    : var(--b-primary-30);
+
+    --b-panel-top-toolbar-button-type-text-color      : var(--b-primary-20);
+
+    --b-popup-background                              : var(--b-primary-99);
+
+    --b-slider-track-color                            : var(--b-primary-90);
+    --b-slider-thumb-focus-outline-color              : transparent;
+
+    --b-slide-toggle-background                       : var(--b-neutral-95);
+    --b-slide-toggle-hover-background                 : var(--b-neutral-95);
+    --b-slide-toggle-checked-hovered-thumb-background : var(--b-primary-95);
+
+    --b-tab-active-tab-color                          : var(--b-primary-50);
+
+    --b-tooltip-plain-background                      : var(--b-primary-25);
+    --b-tooltip-rich-background                       : var(--b-primary-98);
+
+    --b-text-field-focus-border-color                 : var(--bi-primary-shade);
+    --b-text-field-outlined-focus-label-color         : var(--bi-primary-shade);
+    --b-text-field-outlined-label-background          : var(--b-parent-background-color, var(--b-neutral-100));
+    --b-text-field-filled-focus-label-color           : var(--bi-primary-shade);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+
+    /* endregion */
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "Material3Light";
+    --b-theme-filename         : "material3-light";
+    --b-theme-button-rendition : "tonal";
+    --b-theme-label-position   : "above";
+    --b-theme-overlap-label    : "true";
+    --b-theme-ripple           : "true";
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@bryntum/grid-thin-trial",
+  "version": "7.1.1",
+  "description": "Bryntum Grid JavaScript thin trial component package",
+  "keywords": [
+    "bryntum",
+    "grid",
+    "component"
+  ],
+  "author": {
+    "name": "Bryntum",
+    "url": "https://bryntum.com",
+    "email": "info@bryntum.com"
+  },
+  "license": "Commercial",
+  "homepage": "https://bryntum.com/products/grid/",
+  "bugs": "https://github.com/bryntum/support/issues",
+  "main": "./entry.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "types": "./grid.d.ts",
+  "type": "module"
+}

package/postinstall.cjs

@@ -0,0 +1,11 @@
+const
+    { spawn } = require('child_process'),
+    path      = require('path'),
+    pkg       = '@bryntum/grid-trial-lib',
+    script    = `${pkg}/build.js`;
+try {
+    spawn('node', [require.resolve(script)], { cwd : path.join(process.cwd(), 'lib/helper'), stdio : 'inherit' });
+}
+catch (error) {
+    console.log(`${pkg} is not installed\n${error.message}`.red);
+}