@bryntum/grid-thin-trial 7.1.1

package/visby-dark.css

@@ -0,0 +1,243 @@
+@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 10%);
+    --b-neutral-99                               : hsl(0 0 10.9%);
+    --b-neutral-98                               : hsl(0 0 11.8%);
+    --b-neutral-97                               : hsl(0 0 12.7%);
+    --b-neutral-96                               : hsl(0 0 13.6%);
+    --b-neutral-95                               : hsl(0 0 14.5%);
+    --b-neutral-94                               : hsl(0 0 15.4%);
+    --b-neutral-93                               : hsl(0 0 16.3%);
+    --b-neutral-92                               : hsl(0 0 17.2%);
+    --b-neutral-91                               : hsl(0 0 18.1%);
+    --b-neutral-90                               : hsl(0 0 19%);
+    --b-neutral-85                               : hsl(0 0 23.5%);
+    --b-neutral-80                               : hsl(0 0 28%);
+    --b-neutral-75                               : hsl(0 0 32.5%);
+    --b-neutral-70                               : hsl(0 0 37%);
+    --b-neutral-65                               : hsl(0 0 41.5%);
+    --b-neutral-60                               : hsl(0 0 46%);
+    --b-neutral-55                               : hsl(0 0 50.5%);
+    --b-neutral-50                               : hsl(0 0 55%);
+    --b-neutral-45                               : hsl(0 0 59.5%);
+    --b-neutral-40                               : hsl(0 0 64%);
+    --b-neutral-35                               : hsl(0 0 68.5%);
+    --b-neutral-30                               : hsl(0 0 73%);
+    --b-neutral-25                               : hsl(0 0 77.5%);
+    --b-neutral-20                               : hsl(0 0 82%);
+    --b-neutral-15                               : hsl(0 0 86.5%);
+    --b-neutral-10                               : hsl(0 0 91%);
+    --b-neutral-5                                : hsl(0 0 95.5%);
+    --b-neutral-2                                : hsl(0 0 97.3%);
+    --b-neutral-1                                : hsl(0 0 98.2%);
+    --b-neutral-0                                : hsl(0 0 100%);
+    /* endregion */
+
+    --b-mix                                      : hsl(0 0 12%);
+    --b-opposite                                 : #fff;
+
+    /* region Core */
+
+    --b-widget-color-scheme                      : dark;
+    --b-widget-padding                           : .75em;
+    --b-widget-padding-large                     : 1em;
+    --b-widget-border-radius                     : .5em;
+    --b-widget-border-radius-large               : 1em;
+    --b-widget-border-color                      : var(--b-neutral-80);
+    --b-widget-floating-box-shadow               : var(--b-elevation-1);
+    --b-widget-floating-border                   : 1px solid var(--b-widget-border-color);
+    --b-widget-anchor-offset                     : 0px;
+
+    --b-avatar-border                            : 1px solid var(--b-widget-border-color);
+
+    --b-button-height                            : 2.75em;
+    --b-button-tonal-border-width                : 1px;
+    --b-button-tonal-border-color                : var(--b-widget-border-color);
+    --b-button-group-padded-pressed-border       : 1px solid var(--b-widget-border-color);
+    --b-button-group-padded-pressed-box-shadow   : none;
+    --b-button-group-padded-filled-pressed-color : var(--b-text-1);
+
+    --b-checkbox-hover-border-color              : var(--b-border-5);
+
+    --b-chip-view-chip-border-width              : 1px;
+    --b-chip-view-chip-border-color              : var(--b-widget-border-color);
+
+    --b-combo-outlined-chip-view-padding-top     : 0.4em;
+    --b-combo-chip-view-padding                  : .4em var(--b-widget-padding);
+
+    --b-field-set-border-color                   : var(--b-border-6);
+
+    --b-label-font-size                          : .9em;
+    --b-label-font-weight                        : 500;
+
+    --b-list-multi-select-gap                    : 0.25em;
+    --b-list-multi-select-item-padding           : 0.5em 0.75em;
+    --b-list-item-border-radius                  : var(--b-widget-border-radius);
+
+    --b-menu-item-border-radius                  : var(--b-widget-border-radius);
+    --b-menu-item-padding                        : .6em 1em;
+    --b-menu-padding                             : .5em;
+    --b-menu-item-separator-height               : 9px;
+
+    --b-panel-overlay-border                     : 1px solid var(--b-widget-border-color);
+    --b-panel-top-toolbar-margin-inline          : var(--b-panel-padding);
+    --b-panel-top-toolbar-border-radius          : var(--b-widget-border-radius);
+
+    --b-popup-border                             : 1px solid var(--b-widget-border-color);
+
+    --b-radio-check-gap                          : 0.25em;
+
+    --b-slide-toggle-border-color                : var(--b-widget-border-color);
+    --b-slide-toggle-disabled-border-color       : transparent;
+    --b-slide-toggle-height                      : 1.5em;
+    --b-slide-toggle-width                       : 2.25em;
+    --b-slide-toggle-thumb-border                : 1px solid var(--b-widget-border-color);
+    --b-slide-toggle-disabled-opacity            : 0.4;
+
+    --b-slider-track-color                       : var(--b-neutral-95);
+    --b-slider-thumb-border                      : 1px solid var(--b-widget-border-color);
+    --b-slider-thumb-elevation                   : null;
+    --b-slider-track-border                      : 1px solid var(--b-widget-border-color);
+    --b-slider-disabled-color                    : var(--b-neutral-95);
+    --b-slider-disabled-thumb-color              : var(--b-neutral-95);
+    --b-slider-disabled-track-color              : var(--b-neutral-95);
+
+    --b-splitter-color                           : var(--b-neutral-65);
+    --b-splitter-size                            : 1px;
+    --b-splitter-hover-size                      : 5px;
+    --b-splitter-hover-color                     : var(--b-neutral-90);
+
+    --b-tab-bar-background                       : var(--b-neutral-97);
+    --b-tab-bar-padding                          : var(--b-widget-padding);
+
+    --b-tab-border                               : 1px solid transparent;
+    --b-tab-active-border                        : 1px solid var(--b-widget-border-color);
+    --b-tab-invalid-border                       : 1px solid var(--b-tab-invalid-indicator-color);
+    --b-tab-active-background                    : var(--b-neutral-100);
+    --b-tab-border-radius                        : var(--b-widget-border-radius);
+    --b-tab-indicator-display                    : none;
+
+    --b-tooltip-rich-padding                     : 1em;
+
+    --b-text-field-outlined-border-color         : var(--b-border-6);
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-header-border-color                 : var(--b-widget-border-color);
+    --b-grid-cell-border-color                   : var(--b-widget-border-color);
+    --b-grid-row-border-color                    : var(--b-widget-border-color);
+
+    --b-percent-column-bar-border                : 1px solid var(--b-grid-cell-border-color);
+    --b-percent-column-bar-background            : transparent;
+    --b-percent-column-bar-max-height            : 0.7em;
+
+    --b-tree-indent-size                         : 1em;
+
+    /* SchedulerPro */
+    --b-task-editor-padding                      : 0;
+    --b-form-tab-padding                         : 1em;
+
+    /* Gantt */
+    --b-scroll-button-border-width               : 1px;
+
+    /* Calendar */
+    --b-calendar-border-color                    : var(--b-widget-border-color);
+    --b-sidebar-border-inline-end                : 1px solid var(--b-widget-border-color);
+    --b-month-view-border-inline-width           : 0;
+    --b-calendar-selected-date-border            : 1px solid var(--b-widget-border-color);
+
+    /* TaskBoard */
+    --b-task-board-card-border                   : 1px solid var(--b-widget-border-color);
+    --b-task-board-column-header-font-size       : 1em;
+    --b-task-board-column-header-font-weight     : var(--b-label-font-weight);
+}
+
+/* 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-90);
+
+    /* region Core */
+
+    --b-button-outlined-focused-background            : var(--b-primary-85);
+    --b-button-outlined-active-background             : var(--b-primary-85);
+    --b-button-outlined-pressed-background            : var(--b-primary-90);
+
+    --b-button-group-padded-filled-pressed-background : var(--b-primary-90);
+
+    --b-checkbox-checked-check-color                  : var(--b-primary-30);
+    --b-checkbox-checked-background                   : var(--b-primary-95);
+    --b-checkbox-checked-border-color                 : var(--b-widget-border-color);
+    --b-checkbox-checked-hover-background             : var(--b-primary-95);
+
+    --b-chip-view-chip-background                     : var(--bi-primary-shade);
+    --b-chip-view-chip-hover-background               : var(--b-primary-92);
+    --b-chip-view-chip-selected-background            : var(--b-primary-92);
+    --b-chip-view-chip-active-background              : var(--b-primary-90);
+    --b-chip-view-chip-active-selected-background     : var(--b-primary-85);
+
+    --b-date-picker-selected-border                   : 1px solid var(--b-widget-border-color);
+
+    --b-list-checkbox-checked-background              : var(--bi-primary-shade);
+    --b-list-checkbox-checked-check-color             : var(--b-checkbox-checked-check-color);
+    --b-list-checkbox-checked-border-color            : var(--b-checkbox-checked-border-color);
+    --b-list-item-focus-background                    : var(--b-primary-92);
+
+    --b-radio-checked-color                           : var(--b-primary-30);
+    --b-radio-checked-background                      : var(--b-primary-95);
+    --b-radio-checked-border-color                    : var(--b-widget-border-color);
+
+    --b-slide-toggle-background                       : var(--b-neutral-90);
+    --b-slide-toggle-hover-background                 : var(--b-neutral-90);
+    --b-slide-toggle-checked-hovered-thumb-background : var(--b-primary-35);
+    --b-slide-toggle-checked-border-color             : var(--b-widget-border-color);
+    --b-slide-toggle-checked-background               : var(--b-primary-90);
+    --b-slide-toggle-checked-hover-background         : var(--b-primary-90);
+    --b-slide-toggle-checked-thumb-background         : var(--b-primary-30);
+    --b-slide-toggle-disabled-border-color            : var(--b-widget-border-color);
+
+    --b-slider-color                                  : var(--b-primary-85);
+    --b-slider-thumb-text-color                       : var(--b-neutral-30);
+
+    --b-tab-hover-color                               : var(--b-neutral-20);
+    --b-tab-hover-background                          : transparent;
+
+    --b-text-field-focus-border-color                 : var(--b-primary-70);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+
+    --b-toast-background                              : var(--b-neutral-100);
+
+    /* endregion */
+
+    /* Grid */
+    --b-percent-column-fill-background                : var(--b-primary-85);
+    --b-percent-column-value-color                    : var(--b-text-4);
+}
+
+/* Less vars target b-colorize compared to b-bryntum, making it cheaper to use for coloring many elements */
+.b-colorize:not(.b-nothing) {
+    /* Core */
+    --b-avatar-background              : var(--b-primary-90);
+
+    /* Scheduler */
+    --b-resource-time-range-background : var(--b-primary-65);
+    --b-resource-time-range-color      : var(--b-primary-70);
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "VisbyDark";
+    --b-theme-filename         : "visby-dark";
+    --b-theme-button-rendition : "outlined";
+    --b-theme-label-position   : "align-before";
+    --b-theme-overlap-label    : "false";
+}

package/visby-light.css

@@ -0,0 +1,209 @@
+@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 1px 3px 0 rgb(0 0 0 /0.08), 0 1px 1px 0 rgb(0 0 0 /0.06), 0 2px 1px -1px rgb(0 0 0 /0.04);
+    --b-elevation-2                              : 0 1px 5px 0 rgb(0 0 0 /0.08), 0 2px 2px 0 rgb(0 0 0 /0.06), 0 3px 1px -2px rgb(0 0 0 /0.04);
+
+    /* region Core */
+
+    --b-widget-color-scheme                      : light;
+    --b-widget-padding                           : .75em;
+    --b-widget-padding-large                     : 1em;
+    --b-widget-border-radius                     : .5em;
+    --b-widget-border-radius-large               : 1em;
+    --b-widget-border-color                      : var(--b-border-6);
+    --b-widget-floating-box-shadow               : var(--b-elevation-1);
+    --b-widget-floating-border                   : 1px solid var(--b-widget-border-color);
+    --b-widget-anchor-offset                     : 0px;
+
+    --b-avatar-border                            : 1px solid var(--b-widget-border-color);
+
+    --b-button-height                            : 2.75em;
+    --b-button-tonal-border-width                : 1px;
+    --b-button-tonal-border-color                : var(--b-widget-border-color);
+    --b-button-group-padded-pressed-border       : 1px solid var(--b-widget-border-color);
+    --b-button-group-padded-pressed-box-shadow   : none;
+    --b-button-group-padded-filled-pressed-color : var(--b-text-2);
+
+    --b-checkbox-hover-border-color              : var(--b-border-5);
+
+    --b-chip-view-chip-border-width              : 1px;
+    --b-chip-view-chip-border-color              : var(--b-widget-border-color);
+
+    --b-combo-outlined-chip-view-padding-top     : 0.4em;
+    --b-combo-chip-view-padding                  : .4em var(--b-widget-padding);
+
+    --b-field-set-border-color                   : var(--b-border-6);
+
+    --b-label-font-size                          : .9em;
+    --b-label-font-weight                        : 500;
+
+    --b-list-multi-select-gap                    : 0.25em;
+    --b-list-multi-select-item-padding           : 0.5em 0.75em;
+    --b-list-item-border-radius                  : var(--b-widget-border-radius);
+
+    --b-menu-item-border-radius                  : var(--b-widget-border-radius);
+    --b-menu-item-padding                        : .6em 1em;
+    --b-menu-padding                             : .5em;
+    --b-menu-item-separator-height               : 9px;
+
+    --b-panel-overlay-border                     : 1px solid var(--b-widget-border-color);
+    --b-panel-top-toolbar-margin-inline          : var(--b-panel-padding);
+    --b-panel-top-toolbar-border-radius          : var(--b-widget-border-radius);
+
+    --b-popup-border                             : 1px solid var(--b-widget-border-color);
+
+    --b-radio-check-gap                          : 0.25em;
+
+    --b-slide-toggle-border-color                : var(--b-widget-border-color);
+    --b-slide-toggle-disabled-border-color       : transparent;
+    --b-slide-toggle-height                      : 1.5em;
+    --b-slide-toggle-width                       : 2.25em;
+    --b-slide-toggle-thumb-border                : 1px solid var(--b-widget-border-color);
+    --b-slide-toggle-disabled-opacity            : 0.4;
+
+    --b-slider-track-color                       : var(--b-neutral-95);
+    --b-slider-thumb-border                      : 1px solid var(--b-widget-border-color);
+    --b-slider-thumb-elevation                   : null;
+    --b-slider-track-border                      : 1px solid var(--b-widget-border-color);
+    --b-slider-disabled-color                    : var(--b-neutral-95);
+    --b-slider-disabled-thumb-color              : var(--b-neutral-95);
+    --b-slider-disabled-track-color              : var(--b-neutral-97);
+
+    --b-splitter-color                           : var(--b-neutral-65);
+    --b-splitter-size                            : 1px;
+    --b-splitter-hover-size                      : 5px;
+    --b-splitter-hover-color                     : var(--b-neutral-90);
+
+    --b-tab-bar-background                       : var(--b-neutral-97);
+    --b-tab-bar-padding                          : var(--b-widget-padding);
+
+    --b-tab-border                               : 1px solid transparent;
+    --b-tab-active-border                        : 1px solid var(--b-widget-border-color);
+    --b-tab-invalid-border                       : 1px solid var(--b-tab-invalid-indicator-color);
+    --b-tab-active-background                    : var(--b-neutral-100);
+    --b-tab-border-radius                        : var(--b-widget-border-radius);
+    --b-tab-indicator-display                    : none;
+
+    --b-tooltip-rich-padding                     : 1em;
+
+    --b-text-field-outlined-border-color         : var(--b-border-6);
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-header-border-color                 : var(--b-widget-border-color);
+    --b-grid-cell-border-color                   : var(--b-widget-border-color);
+    --b-grid-row-border-color                    : var(--b-widget-border-color);
+
+    --b-percent-column-bar-border                : 1px solid var(--b-grid-cell-border-color);
+    --b-percent-column-bar-background            : transparent;
+    --b-percent-column-bar-max-height            : 0.7em;
+
+    --b-tree-indent-size                         : 1em;
+
+    /* SchedulerPro */
+    --b-task-editor-padding                      : 0;
+    --b-form-tab-padding                         : 1em;
+
+    /* Gantt */
+    --b-scroll-button-border-width               : 1px;
+
+    /* Calendar */
+    --b-calendar-border-color                    : var(--b-widget-border-color);
+    --b-sidebar-border-inline-end                : 1px solid var(--b-widget-border-color);
+    --b-month-view-border-inline-width           : 0;
+    --b-calendar-selected-date-border            : 1px solid var(--b-widget-border-color);
+
+    /* TaskBoard */
+    --b-task-board-card-border                   : 1px solid var(--b-widget-border-color);
+    --b-task-board-column-header-font-size       : 1em;
+    --b-task-board-column-header-font-weight     : var(--b-label-font-weight);
+
+}
+
+/* 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-90);
+
+    /* region Core */
+
+    --b-button-outlined-pressed-background            : var(--b-primary-95);
+
+    --b-button-group-padded-filled-pressed-background : var(--b-primary-90);
+
+    --b-checkbox-checked-check-color                  : var(--b-primary-30);
+    --b-checkbox-checked-background                   : var(--b-primary-95);
+    --b-checkbox-checked-border-color                 : var(--b-widget-border-color);
+    --b-checkbox-checked-hover-background             : var(--b-primary-95);
+
+    --b-chip-view-chip-background                     : var(--b-primary-95);
+    --b-chip-view-chip-hover-background               : var(--b-primary-92);
+    --b-chip-view-chip-selected-background            : var(--b-primary-92);
+    --b-chip-view-chip-active-background              : var(--b-primary-90);
+    --b-chip-view-chip-active-selected-background     : var(--b-primary-85);
+
+    --b-date-picker-selected-border                   : 1px solid var(--b-widget-border-color);
+
+    --b-list-checkbox-checked-background              : var(--bi-primary-shade);
+    --b-list-checkbox-checked-check-color             : var(--b-checkbox-checked-check-color);
+    --b-list-checkbox-checked-border-color            : var(--b-checkbox-checked-border-color);
+    --b-list-item-focus-background                    : var(--b-primary-92);
+
+    --b-radio-checked-color                           : var(--b-primary-30);
+    --b-radio-checked-background                      : var(--b-primary-95);
+    --b-radio-checked-border-color                    : var(--b-widget-border-color);
+
+    --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-35);
+    --b-slide-toggle-checked-border-color             : var(--b-widget-border-color);
+    --b-slide-toggle-checked-background               : var(--b-primary-95);
+    --b-slide-toggle-checked-hover-background         : var(--b-primary-90);
+    --b-slide-toggle-checked-thumb-background         : var(--b-primary-30);
+    --b-slide-toggle-disabled-border-color            : var(--b-widget-border-color);
+
+    --b-slider-color                                  : var(--bi-primary-shade);
+    --b-slider-thumb-text-color                       : var(--b-neutral-30);
+
+    --b-tab-hover-color                               : var(--b-neutral-20);
+    --b-tab-hover-background                          : transparent;
+
+    --b-text-field-focus-border-color                 : var(--b-primary-70);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+
+    --b-toast-background                              : var(--b-neutral-100);
+
+    /* endregion */
+
+    /* Grid */
+
+    --b-percent-column-fill-background                : var(--b-primary-70);
+    --b-percent-column-value-color                    : var(--b-text-4);
+}
+
+/* Less vars target b-colorize compared to b-bryntum, making it cheaper to use for coloring many elements */
+.b-colorize:not(.b-nothing) {
+    /* Core */
+    --b-avatar-background       : var(--b-primary-90);
+
+    /* Grid */
+    --b-group-header-color      : var(--b-tree-parent-color);
+    --b-group-header-icon-color : var(--b-group-header-color);
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "VisbyLight";
+    --b-theme-filename         : "visby-light";
+    --b-theme-button-rendition : "outlined";
+    --b-theme-label-position   : "align-before";
+    --b-theme-overlap-label    : "false";
+}