@bryntum/grid-thin-trial 7.1.1

package/high-contrast-dark.css

@@ -0,0 +1,419 @@
+@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);
+
+    /* 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;
+
+    --b-border-1                                             : var(--b-neutral-10);
+    --b-border-2                                             : var(--b-neutral-10);
+    --b-border-3                                             : var(--b-neutral-10);
+    --b-border-4                                             : var(--b-neutral-10);
+    --b-border-5                                             : var(--b-neutral-10);
+    --b-border-6                                             : var(--b-neutral-10);
+    --b-border-7                                             : var(--b-neutral-10);
+    --b-border-8                                             : var(--b-neutral-100);
+    --b-border-9                                             : var(--b-neutral-100);
+    --b-border-10                                            : var(--b-neutral-100);
+
+    --b-text-1                                               : var(--b-neutral-10);
+    --b-text-2                                               : var(--b-neutral-30);
+    --b-text-3                                               : var(--b-neutral-30);
+    --b-text-4                                               : var(--b-neutral-30);
+    --b-text-5                                               : var(--b-neutral-100);
+
+    /* region Core */
+
+    --b-widget-color-scheme                                  : dark;
+    --b-widget-border-color                                  : var(--b-border-1);
+    --b-widget-border-radius                                 : .3em;
+    --b-widget-border-radius-large                           : 1em;
+    --b-widget-anchor-offset                                 : 0px;
+
+    --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.32), 0 2px 2px 0 rgb(0 0 0 /0.30), 0 3px 1px -2px rgb(0 0 0 /0.28);
+
+    --b-button-disabled-opacity                              : .8;
+    --b-button-outlined-pressed-color                        : var(--b-text-5);
+
+    --b-button-group-padded-border                           : 1px solid var(--b-widget-border-color);
+    --b-button-group-padded-pressed-border                   : 1px solid var(--b-widget-border-color);
+    --b-button-group-padded-button-opacity                   : 1;
+
+    --b-chip-view-chip-border-color                          : var(--b-widget-border-color);
+
+    --b-date-picker-selected-color                           : var(--b-text-5);
+
+    --b-field-trigger-color                                  : var(--b-widget-color);
+
+    --b-panel-header-border-bottom                           : 1px solid var(--b-widget-border-color);
+    --b-panel-overlay-border                                 : 1px solid var(--b-widget-border-color);
+
+    --b-popup-border                                         : 2px solid var(--b-widget-border-color);
+
+    --b-slide-toggle-height                                  : 1.5em;
+    --b-slide-toggle-width                                   : 2.25em;
+    --b-slide-toggle-thumb-offset                            : .2em;
+
+    --b-slider-track-color                                   : var(--b-neutral-65);
+    --b-slider-disabled-color                                : var(--b-neutral-60);
+    --b-slider-disabled-thumb-color                          : var(--b-neutral-60);
+    --b-slider-disabled-track-color                          : var(--b-neutral-75);
+
+    --b-text-field-focus-border-width                        : 2px;
+    --b-text-field-filled-border-width                       : 1px;
+    --b-text-field-outlined-focus-border-width               : 2px;
+    --b-text-field-placeholder-font-style                    : italic;
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-header-font-weight                              : 700;
+    --b-grid-cell-focused-outline-width                      : 2px;
+    --b-grid-cell-focused-outline-offset                     : -3px;
+
+    --b-action-column-row-hover-color                        : var(--b-text-5);
+    --b-percent-column-bar-border                            : 1px solid var(--b-widget-border-color);
+    --b-percent-column-bar-max-height                        : 1.5em;
+    --b-percent-column-circle-thickness                      : 1em;
+    --b-percent-column-circle-background                     : var(--b-neutral-80);
+    --b-rating-column-filled-color                           : var(--b-color-orange);
+    --b-rating-column-empty-color                            : var(--b-neutral-80);
+    --b-resource-info-column-role-color                      : var(--b-neutral-30);
+    --b-resource-info-column-role-row-hover-color            : var(--b-neutral-100);
+
+    --b-column-drag-toolbar-opacity                          : .9;
+    --b-column-drag-toolbar-hover-opacity                    : 1;
+    --b-group-header-font-weight                             : 600;
+    --b-locked-rows-separator-color                          : var(--b-widget-border-color);
+    --b-locked-rows-separator-width                          : 2px;
+    --b-row-reorder-proxy-opacity                            : 1;
+    --b-stripe-border-width                                  : 1px;
+    --b-stripe-odd-color                                     : var(--b-neutral-96);
+    --b-region-resize-button-color                           : var(--b-neutral-100);
+    --b-region-resize-button-hover-color                     : var(--b-primary);
+
+    --b-tree-expander-row-hover-color                        : var(--b-text-5);
+    --b-tree-icon-row-hover-color                            : var(--b-text-5);
+
+    /* Scheduler */
+    --b-column-lines-tick-color                              : var(--b-neutral-80);
+    --b-dependency-stroke-width                              : 2;
+    --b-dependency-hover-stroke-width                        : 3;
+    --b-dependency-terminal-border-width                     : 2px;
+    --b-dependency-terminal-offset                           : -6px;
+    --b-event-label-background                               : var(--b-neutral-100);
+    --b-resource-time-range-background-transparency          : 80%;
+    --b-non-working-time-background                          : var(--b-neutral-60);
+    --b-resource-non-working-time-background-opacity         : 75%;
+    --b-histogram-outline-color                              : var(--b-color-red);
+
+    /* SchedulerPro */
+    --b-segment-link-width                                   : 2px;
+    --b-resource-utilization-bar-legend-text-fill            : var(--b-text-5);
+    --b-resource-utilization-bar-color                       : color-mix(in srgb, var(--b-color-green), var(--b-opposite) 30%);
+    --b-resource-utilization-bar-hover-color                 : color-mix(in srgb, var(--b-color-green), var(--b-opposite) 40%);
+    --b-resource-utilization-underallocated-bar-color        : var(--b-color-green);
+    --b-resource-utilization-underallocated-bar-hover-color  : color-mix(in srgb, var(--b-color-green), var(--b-opposite) 10%);
+    --b-resource-utilization-overallocated-bar-color         : var(--b-color-red);
+    --b-resource-utilization-overallocated-bar-hover-color   : color-mix(in srgb, var(--b-color-red), var(--b-opposite) 10%);
+    --b-resource-utilization-assignment-bar-legend-text-fill : var(--b-neutral-0);
+    --b-resource-histogram-bar-color                         : var(--b-resource-utilization-bar-color);
+    --b-resource-histogram-bar-hover-color                   : var(--b-resource-utilization-bar-hover-color);
+    --b-resource-histogram-underallocated-bar-color          : var(--b-resource-utilization-underallocated-bar-color);
+    --b-resource-histogram-underallocated-bar-hover-color    : var(--b-resource-utilization-underallocated-bar-hover-color);
+    --b-resource-histogram-overallocated-bar-color           : var(--b-resource-utilization-overallocated-bar-color);
+    --b-resource-histogram-overallocated-bar-hover-color     : var(--b-resource-utilization-overallocated-bar-hover-color);
+
+    /* Gantt */
+    --b-scroll-button-border-width                           : 1px;
+    --b-baseline-background                                  : var(--b-neutral-60);
+    --b-baseline-margin-top                                  : 2px;
+    --b-task-non-working-time-background                     : color-mix(in srgb, var(--b-neutral-65), transparent 50%);
+    --b-critical-path-stroke                                 : color-mix(in srgb, var(--b-color-red), var(--b-opposite) 10%);
+    --b-gantt-parent-task-max-height                         : 1.5em;
+    --b-parent-area-border                                   : 2px solid var(--b-neutral-30);
+    --b-gantt-progress-line-width                            : 2;
+
+    /* Calendar */
+    --b-calendar-event-circle-icon-size                      : .7em;
+    --b-day-view-event-selected-color                        : var(--b-text-5);
+    --b-year-view-week-cell-color                            : var(--b-text-5);
+    --b-year-view-week-cell-background                       : var(--b-neutral-40);
+
+    /* TaskBoard */
+    --b-task-board-column-header-font-weight                 : 600;
+    --b-task-board-card-border                               : 1px solid var(--b-widget-border-color);
+    --b-task-board-column-count-color                        : var(--b-text-5);
+    --b-task-board-column-count-background                   : var(--b-neutral-40);
+
+    --b-task-board-progress-item-background                  : var(--b-neutral-85);
+}
+
+/* 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 */
+
+    --b-widget-focus-outline-color                    : var(--bi-primary-shade);
+    --b-button-focus-outline-color                    : var(--bi-primary-shade);
+    --b-checkbox-focus-outline-color                  : var(--bi-primary-shade);
+
+    --b-button-elevated-color                         : var(--b-primary-10);
+    --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-35);
+
+    --b-button-tonal-color                            : var(--b-primary-10);
+
+    --b-button-outlined-color                         : var(--b-primary-10);
+    --b-button-outlined-hover-border-color            : var(--b-primary-30);
+    --b-button-outlined-pressed-background            : var(--bi-primary-shade);
+
+    --b-button-type-text-color                        : var(--b-primary-10);
+
+    --b-checkbox-checked-background                   : var(--bi-primary-shade);
+    --b-checkbox-checked-border-color                 : var(--b-checkbox-checked-background);
+    --b-checkbox-checked-hover-background             : var(--bi-primary-shade);
+
+    --b-clock-hand-color                              : var(--b-primary-20);
+
+    --b-date-picker-selected-background               : var(--b-primary-40);
+    --b-date-picker-date-hover-background             : var(--b-primary-40);
+    --b-date-picker-date-hover-color                  : var(--b-neutral-100);
+    --b-date-picker-selected-range-background         : var(--b-primary-80);
+
+    --b-list-checkbox-checked-background              : var(--bi-primary-shade);
+
+    --b-menu-item-hover-background                    : var(--b-primary-40);
+    --b-menu-item-focus-background                    : var(--b-primary-30);
+    --b-menu-item-hover-color                         : var(--b-text-5);
+    --b-menu-item-focus-color                         : var(--b-text-5);
+    --b-menu-item-focus-icon-color                    : var(--b-text-5);
+    --b-menu-item-hover-icon-color                    : var(--b-text-5);
+
+    --b-radio-checked-color                           : var(--b-neutral-100);
+    --b-radio-checked-background                      : var(--bi-primary-shade);
+    --b-radio-checked-border-color                    : var(--b-radio-checked-background);
+    --b-radio-check-gap                               : 0.25em;
+
+    --b-slide-toggle-background                       : var(--b-neutral-60);
+    --b-slide-toggle-hover-background                 : var(--b-neutral-60);
+    --b-slide-toggle-checked-hovered-thumb-background : var(--b-primary-95);
+    --b-slide-toggle-checked-border-color             : transparent;
+    --b-slide-toggle-checked-background               : var(--bi-primary-shade);
+    --b-slide-toggle-checked-hover-background         : var(--bi-primary-shade);
+
+    --b-slider-color                                  : var(--bi-primary-shade);
+
+    --b-tab-indicator-color                           : var(--bi-primary-shade);
+
+    --b-text-field-focus-border-color                 : var(--bi-primary-shade);
+    --b-text-field-filled-hover-border-color          : var(--bi-primary-shade);
+
+    --b-toast-background                              : var(--b-neutral-100);
+
+    --b-widget-floating-border                        : 2px solid var(--b-widget-border-color);
+
+    /* endregion */
+
+    /* Grid */
+    --b-grid-cell-hover-background                    : var(--b-primary-40);
+    --b-grid-cell-selected-background                 : var(--b-primary-30);
+    --b-grid-cell-hover-selected-background           : var(--b-primary-35);
+    --b-grid-cell-selected-color                      : var(--b-text-5);
+    --b-grid-cell-focused-outline-color               : var(--b-primary-90);
+    --b-grid-header-hover-background                  : var(--bi-primary-shade);
+    --b-grid-header-hover-color                       : var(--b-text-5);
+    --b-grid-link-color                               : var(--bi-primary-shade);
+    --b-grid-row-hover-link-color                     : var(--b-text-5);
+
+    --bi-grid-filter-icon-active-opacity              : 1;
+    --b-column-drag-toolbar-icon-color                : var(--bi-primary-shade);
+    --b-column-drag-toolbar-default-hover-background  : var(--bi-primary-shade);
+    --b-column-drag-toolbar-default-hover-color       : var(--b-text-5);
+    --b-column-drag-toolbar-default-hover-icon-color  : var(--b-text-5);
+
+    --b-percent-column-fill-background                : var(--bi-primary-shade);
+    --b-percent-column-bar-background                 : var(--b-neutral-80);
+    --b-percent-column-value-color                    : var(--b-primary-10);
+    --b-percent-column-circle-done-color              : var(--bi-primary-shade);
+
+    /* Scheduler */
+    --b-calendar-highlight-background-transparency    : 50%;
+    --b-calendar-highlight-color                      : var(--b-primary-50);
+    --b-calendar-highlight-border-color               : var(--b-primary-50);
+    --b-time-span-highlight-range-opacity             : .7;
+    --b-time-span-highlight-range-background          : var(--b-primary-90);
+    --b-time-span-highlight-range-border-color        : var(--bi-primary-shade);
+    --b-time-span-highlight-range-color               : var(--b-primary-20);
+    --b-time-span-highlight-unavailable-background    : var(--b-neutral-80);
+    --b-time-span-highlight-unavailable-color         : var(--b-neutral-0);
+    --b-time-range-background                         : var(--b-neutral-80);
+
+    /* Gantt */
+    --b-gantt-unscheduled-task-color                  : var(--b-neutral-40);
+}
+
+.b-colorize:not(.b-nothing) {
+    --b-avatar-initials-color                   : var(--b-primary-10);
+
+    --b-quick-find-background                   : var(--b-primary-85);
+    --b-quick-find-row-hover-background         : var(--b-primary-30);
+
+    --b-time-range-header-background            : var(--b-primary-30);
+    --b-time-range-line-color                   : var(--b-primary-30);
+    --b-non-working-time-header-background      : color-mix(in oklab, var(--b-color-red), transparent 80%);
+
+    --b-percent-bar-background                  : color-mix(in srgb, var(--b-primary), var(--b-opposite) 60%);
+
+    --b-rollup-background                       : var(--b-primary-40);
+
+    --b-calendar-event-solid-bar-background     : var(--b-primary-40);
+    --b-calendar-event-solid-bar-opacity        : 1;
+    --b-day-view-event-border                   : 1px solid var(--b-primary);
+    --b-day-view-event-selected-body-background : var(--b-primary-50);
+
+    --b-task-board-progress-item-color          : var(--b-primary-40);
+    --b-task-board-rating-item-filled-color     : var(--b-primary-40);
+}
+
+.b-sch-resource-time-range {
+    --b-resource-time-range-color : color-mix(in srgb, var(--b-primary), var(--b-opposite) 30%);
+}
+
+.b-sch-event-wrap, .b-gantt-task-wrap {
+    --b-sch-event-indented-selected-background : color-mix(in srgb, var(--b-primary), var(--b-opposite) 40%);
+}
+
+/* Event style tweaks not possible with vars */
+
+.b-style-tonal,
+.b-style-traced,
+.b-style-rounded {
+    --b-sch-event-selected-background : color-mix(in srgb, var(--b-primary), var(--b-opposite) 30%);
+
+    &.b-nested-events-parent .b-sch-event,
+    .b-sch-event, .b-gantt-task {
+        &:not(.b-milestone, .b-segmented),
+        &.b-milestone .b-sch-event-content::before {
+            border                     : 2px solid color-mix(in srgb, var(--b-primary), var(--b-opposite) 70%);
+
+            --b-sch-event-border-width : 2px;
+            --b-sch-event-color        : color-mix(in srgb, var(--b-primary), var(--b-opposite) 70%);
+        }
+    }
+
+    &.b-selected {
+        .b-sch-event, .b-gantt-task {
+            --b-sch-event-color : var(--b-text-5);
+        }
+    }
+}
+
+.b-style-bordered {
+    &,
+    .b-sch-event-segment {
+        --b-sch-event-selected-background : color-mix(in srgb, var(--b-primary), var(--b-opposite) 30%);
+    }
+}
+
+.b-style-outlined {
+    --b-sch-event-selected-background : var(--b-primary);
+
+    &.b-selected {
+        --b-sch-event-color : var(--b-text-5);
+    }
+}
+
+.b-style-calendar {
+    .b-sch-event, .b-gantt-task {
+        &:not(.b-milestone),
+        &.b-milestone .b-sch-event-content::before {
+            border-block-width      : 1px;
+            border-inline-end-width : 1px;
+        }
+    }
+}
+
+.b-sch-horizontal .b-style-indented .b-sch-event {
+    &:not(.b-milestone),
+    &.b-milestone .b-sch-event-content::before {
+        border-block      : 2px solid color-mix(in srgb, var(--b-primary), var(--b-opposite) 40%);
+        border-inline-end : 2px solid color-mix(in srgb, var(--b-primary), var(--b-opposite) 40%);
+    }
+
+    .b-sch-event-wrap.b-selected & {
+        --b-sch-event-color : var(--b-text-5);
+    }
+}
+
+.b-sch-vertical .b-style-indented .b-sch-event {
+    &:not(.b-milestone),
+    &.b-milestone .b-sch-event-content::before {
+        border-inline    : 2px solid color-mix(in srgb, var(--b-primary), var(--b-opposite) 40%);
+        border-block-end : 2px solid color-mix(in srgb, var(--b-primary), var(--b-opposite) 40%);
+    }
+}
+
+.b-style-gantt {
+    .b-gantt-task, .b-sch-event {
+        --b-sch-event-background : color-mix(in srgb, var(--b-primary), var(--b-opposite) 20%);
+    }
+}
+
+.b-milestone label {
+    padding-block : 3px;
+
+    background    : var(--b-neutral-100);
+}
+
+/* Theme meta data */
+.b-theme-info {
+    --b-theme-name             : "HighContrastDark";
+    --b-theme-filename         : "high-contrast-dark";
+    --b-theme-button-rendition : "outlined";
+    --b-theme-label-position   : "align-before";
+    --b-theme-overlap-label    : "false";
+    --b-theme-high-contrast    : "true";
+}