feat: support DWC themes' variables in DWC

BBj-Plugins · Mar 24, 2022 · 80ed1ce · 80ed1ce
1 parent 5e445bd
commit 80ed1ce
Show file tree

Hide file tree

Showing 8 changed files with 27,660 additions and 26,239 deletions.
diff --git a/BBjGridExWidget.bbj b/BBjGridExWidget.bbj
diff --git a/client/dist/bbj-grid-widget.js b/client/dist/bbj-grid-widget.js
diff --git a/client/dist/bbj-grid-widget.min.js b/client/dist/bbj-grid-widget.min.js
diff --git a/client/dist/dwc.css b/client/dist/dwc.css
@@ -0,0 +1,127 @@
+html {
+  /* Colour of text and icons in primary UI elements like menus */
+  --ag-foreground-color: var(--bbj-color-black);
+
+  /* Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data */
+  --ag-secondary-foreground-color: var(--ag-foreground-color);
+
+  /* background colour of the grid */
+  --ag-background-color: var(--bbj-surface-3);
+
+  /* background colour for all headers, including the grid header, panels etc */
+  --ag-header-background-color: var(--bbj-surface-3);
+
+  /* Color of elements that can't be interacted with because they are in a disabled state */
+  --ag-disabled-foreground-color: var(--bbj-color-gray-50);
+
+  /* Background colour for second level headings within UI components */
+  --ag-subheader-background-color: var(--bbj-surface-2);
+
+  /* Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu */
+  --ag-control-panel-background-color: var(--bbj-surface-2);
+
+  /* Background color of selected rows in the grid and in dropdown menus */
+  --ag-selected-row-background-color: var(--bbj-color-primary-85);
+
+  /* Background colour applied to every other row or null to use background-color for all rows */
+  --ag-odd-row-background-color: var(--bbj-surface-2);
+
+  /* Background color when hovering over rows in the grid and in dropdown menus, or null for no rollover effect (note - if you want a rollover on one but not the other, set to null and use CSS to achieve the rollover) */
+  --ag-row-hover-color: var(--bbj-color-primary-alt);
+
+  /* Background color of the overlay shown over the grid when it is covered by an overlay, e.g. a data loading indicator. */
+  --ag-modal-overlay-background-color: var(--bbj-overlay-background);
+
+  /* Color to draw around selected cell ranges */
+  --ag-range-selection-border-color: var(--bbj-color-primary);
+  /* Background colour of selected cell ranges. */
+  --ag-range-selection-background-color: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.2
+  );
+  --ag-range-selection-background-color-1: var(
+    --ag-range-selection-background-color
+  );
+  --ag-range-selection-background-color-2: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.3
+  );
+  --ag-range-selection-background-color-3: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.4
+  );
+  --ag-range-selection-background-color-4: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.5
+  );
+
+  /* Colour for the "chip" that repersents a column that has been dragged onto a drop zone */
+  --ag-chip-background-color: var(--bbj-color-default);
+
+  /* Colour of the border drawn under selected tabs, including menus and tool panels */
+  --ag-selected-tab-underline-color: var(--bbj-color-primary);
+
+  /* Colour for border around major UI components like the grid itself, headers, footers and tool panels */
+  --ag-border-color: var(--bbj-color-default);
+
+  /* Colour for borders used to separate elements within a major UI component */
+  --ag-secondary-border-color: var(--bbj-color-default-dark);
+
+  /* Colour of the border between grid rows, or null to display no border */
+  --ag-row-border-color: var(--ag-secondary-border-color);
+
+  /* Inputs */
+  --ag-input-border-color: var(--bbj-color-default);
+  --ag-input-focus-border-color: var(--bbj-border-color-default);
+  --ag-input-disabled-background-color: var(--bbj-color-default-95);
+
+  /* Checkboxes */
+  --ag-checkbox-checked-color: var(--bbj-color-primary);
+  --ag-checkbox-indeterminate-color: var(--ag-checkbox-checked-color);
+  --ag-checkbox-unchecked-color: var(--ag-checkbox-checked-color);
+
+  /* Toggles */
+  --ag-toggle-button-off-border-color: var(--bbj-color-default);
+  --ag-toggle-button-off-background-color: var(--bbj-color-default-dark);
+  --ag-toggle-button-on-border-color: var(--bbj-color-primary);
+  --ag-toggle-button-on-background-color: var(--bbj-color-primary);
+  --ag-toggle-button-switch-border-color: var(--bbj-color-default-dark);
+}
+
+.ag-chart-menu-icon:hover,
+.ag-chart-settings-next:hover,
+.ag-chart-settings-prev:hover,
+.ag-column-group-icons:hover,
+.ag-column-select-header-icon:hover,
+.ag-filter-toolpanel-expand:hover,
+.ag-floating-filter-button-button:hover,
+.ag-group-contracted .ag-icon:hover,
+.ag-group-expanded .ag-icon:hover,
+.ag-group-title-bar-icon:hover,
+.ag-header-cell-menu-button:hover,
+.ag-header-expand-icon:hover,
+.ag-panel-title-bar-button:hover,
+.ag-side-button-button:hover,
+.ag-tab:hover,
+.ag-tab-selected {
+  color: var(--bbj-color-primary-text) !important;
+}
+
+.ag-checkbox-input-wrapper:active,
+.ag-checkbox-input-wrapper:focus-within,
+.ag-toggle-button-input-wrapper:focus-within {
+  box-shadow: var(--bbj-focus-ring-primary) !important;
+}
+
+.ag-menu,
+.ag-overlay-loading-center {
+  box-shadow: var(--bbj-shadow, 0 1px 4px 1px rgb(186 191 199 / 40%)) !important;
+}
diff --git a/client/dist/report.html b/client/dist/report.html
diff --git a/client/index.html b/client/index.html
@@ -15,6 +15,8 @@
         font-size: 13px;
         line-height: normal;
       }
+
+      __DWC__
     </style>
   </head>
 

diff --git a/client/src/style/dwc.css b/client/src/style/dwc.css
@@ -0,0 +1,130 @@
+html {
+  /* Colour of text and icons in primary UI elements like menus */
+  --ag-foreground-color: var(--bbj-color-black);
+
+  /* Colour of text and icons in UI elements that need to be slightly less emphasised to avoid distracting attention from data */
+  --ag-secondary-foreground-color: var(--ag-foreground-color);
+
+  /* background colour of the grid */
+  --ag-background-color: var(--bbj-surface-3);
+
+  /* background colour for all headers, including the grid header, panels etc */
+  --ag-header-background-color: var(--bbj-surface-3);
+
+  /* Color of elements that can't be interacted with because they are in a disabled state */
+  --ag-disabled-foreground-color: var(--bbj-color-gray-50);
+
+  /* Background colour for second level headings within UI components */
+  --ag-subheader-background-color: var(--bbj-surface-2);
+
+  /* Background for areas of the interface that contain UI controls, like tool panels and the chart settings menu */
+  --ag-control-panel-background-color: var(--bbj-surface-2);
+
+  /* Background color of selected rows in the grid and in dropdown menus */
+  --ag-selected-row-background-color: var(--bbj-color-primary-85);
+
+  /* Background colour applied to every other row or null to use background-color for all rows */
+  --ag-odd-row-background-color: var(--bbj-surface-2);
+
+  /* Background color when hovering over rows in the grid and in dropdown menus, or null for no rollover effect (note - if you want a rollover on one but not the other, set to null and use CSS to achieve the rollover) */
+  --ag-row-hover-color: var(--bbj-color-primary-alt);
+
+  /* Background color of the overlay shown over the grid when it is covered by an overlay, e.g. a data loading indicator. */
+  --ag-modal-overlay-background-color: var(--bbj-overlay-background);
+
+  /* Color to draw around selected cell ranges */
+  --ag-range-selection-border-color: var(--bbj-color-primary);
+  /* Background colour of selected cell ranges. */
+  --ag-range-selection-background-color: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.2
+  );
+  --ag-range-selection-background-color-1: var(
+    --ag-range-selection-background-color
+  );
+  --ag-range-selection-background-color-2: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.3
+  );
+  --ag-range-selection-background-color-3: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.4
+  );
+  --ag-range-selection-background-color-4: hsla(
+    var(--bbj-color-primary-h),
+    var(--bbj-color-primary-s),
+    50%,
+    0.5
+  );
+
+  /* Colour for the "chip" that repersents a column that has been dragged onto a drop zone */
+  --ag-chip-background-color: var(--bbj-color-default);
+
+  /* Colour of the border drawn under selected tabs, including menus and tool panels */
+  --ag-selected-tab-underline-color: var(--bbj-color-primary);
+
+  /* Colour for border around major UI components like the grid itself, headers, footers and tool panels */
+  --ag-border-color: var(--bbj-color-default);
+
+  /* Colour for borders used to separate elements within a major UI component */
+  --ag-secondary-border-color: var(--bbj-color-default-dark);
+
+  /* Colour of the border between grid rows, or null to display no border */
+  --ag-row-border-color: var(--ag-secondary-border-color);
+
+  /* Inputs */
+  --ag-input-border-color: var(--bbj-color-default);
+  --ag-input-focus-border-color: var(--bbj-border-color-default);
+  --ag-input-disabled-background-color: var(--bbj-color-default-95);
+
+  /* Checkboxes */
+  --ag-checkbox-checked-color: var(--bbj-color-primary);
+  --ag-checkbox-indeterminate-color: var(--ag-checkbox-checked-color);
+  --ag-checkbox-unchecked-color: var(--ag-checkbox-checked-color);
+
+  /* Toggles */
+  --ag-toggle-button-off-border-color: var(--bbj-color-default);
+  --ag-toggle-button-off-background-color: var(--bbj-color-default-dark);
+  --ag-toggle-button-on-border-color: var(--bbj-color-primary);
+  --ag-toggle-button-on-background-color: var(--bbj-color-primary);
+  --ag-toggle-button-switch-border-color: var(--bbj-color-default-dark);
+}
+
+.ag-chart-menu-icon:hover,
+.ag-chart-settings-next:hover,
+.ag-chart-settings-prev:hover,
+.ag-column-group-icons:hover,
+.ag-column-select-header-icon:hover,
+.ag-filter-toolpanel-expand:hover,
+.ag-floating-filter-button-button:hover,
+.ag-group-contracted .ag-icon:hover,
+.ag-group-expanded .ag-icon:hover,
+.ag-group-title-bar-icon:hover,
+.ag-header-cell-menu-button:hover,
+.ag-header-expand-icon:hover,
+.ag-panel-title-bar-button:hover,
+.ag-side-button-button:hover,
+.ag-tab:hover,
+.ag-tab-selected {
+  color: var(--bbj-color-primary-text) !important;
+}
+
+.ag-checkbox-input-wrapper:active,
+.ag-checkbox-input-wrapper:focus-within,
+.ag-toggle-button-input-wrapper:focus-within {
+  box-shadow: var(--bbj-focus-ring-primary) !important;
+}
+
+.ag-menu,
+.ag-overlay-loading-center {
+  box-shadow: var(
+    --bbj-shadow,
+    0 1px 4px 1px rgb(186 191 199 / 40%)
+  ) !important;
+}
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -91,6 +91,10 @@ module.exports = {
           '/node_modules/ag-grid-enterprise/dist/ag-grid-enterprise.min.js',
         to: distPath,
       },
+      {
+        from: __dirname + '/src/style/dwc.css',
+        to: distPath,
+      },
     ]),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',