@highcharts/grid-pro 2.1.1 → 2.3.0

package/css/modules/grid-pro.css

@@ -0,0 +1,234 @@
+/* SPDX-License-Identifier: LicenseRef-Highcharts */
+
+/**
+ * @license Highcharts Grid Pro v2.3.0
+ *
+ * (c) 2009-2025 Highsoft AS
+ *
+ * A commercial license may be required depending on use.
+ * See www.highcharts.com/license
+ */
+
+@import url("./grid-lite.css");
+
+/* Grid Pro specific styles */
+
+.hcg-container,
+.highcharts-light .hcg-container {
+    /* Credits fonts */
+    --ig-credits-font-weight: var(--hcg-credits-font-weight, var(--ig-font-weight));
+    --ig-credits-font-size: var(--hcg-credits-font-size, 0.9em);
+    --ig-credits-font-family: var(--hcg-credits-font-family, var(--ig-font-family));
+    --ig-credits-color: var(--hcg-credits-color, var(--ig-color));
+    --ig-credits-font: var(--ig-credits-font-weight) var(--ig-credits-font-size) var(--ig-credits-font-family);
+    --ig-credits-text-align: var(--hcg-credits-text-align, right);
+
+    /* Credits padding */
+    --ig-credits-horizontal-padding: var(--hcg-credits-horizontal-padding, var(--hcg-credits-padding, 5px));
+    --ig-credits-vertical-padding: var(--hcg-credits-vertical-padding, var(--hcg-credits-padding, 5px));
+    --ig-credits-padding:
+        var(--ig-credits-vertical-padding)
+        var(--ig-credits-horizontal-padding)
+        0
+        var(--ig-credits-horizontal-padding);
+
+    /* CSS helpers */
+    --ig-highlight-border-size: var(--hcg-highlight-border-size, 1px);
+
+    /* Negative colors */
+    --ig-negative-border-size: var(--hcg-negative-border-size, var(--ig-highlight-border-size));
+
+    /* Neutral colors */
+    --ig-neutral-border-size: var(--hcg-neutral-border-size, var(--ig-highlight-border-size));
+
+    /* Positive colors */
+    --ig-positive-border-size: var(--hcg-positive-border-size, var(--ig-highlight-border-size));
+
+    /* Notification fonts */
+    --ig-notification-font-weight: var(--hcg-notification-font-weight, var(--ig-font-weight));
+    --ig-notification-font-size: var(--hcg-notification-font-size, var(--ig-font-size));
+    --ig-notification-font-family:
+        var(
+            --hcg-notification-font-family,
+            var(--ig-font-family)
+        );
+    --ig-notification-color: var(--hcg-notification-color, var(--ig-color));
+    --ig-notification-font:
+        var(--ig-notification-font-weight)
+        var(--ig-notification-font-size)
+        var(--ig-notification-font-family);
+    --ig-notification-text-align:
+        var(
+            --hcg-notification-text-align,
+            var(--ig-text-align)
+        );
+
+    /* Notification padding */
+    --ig-notification-horizontal-padding:
+        var(
+            --hcg-notification-horizontal-padding,
+            var(--hcg-notification-padding, var(--ig-horizontal-padding))
+        );
+    --ig-notification-vertical-padding:
+        var(
+            --hcg-notification-vertical-padding,
+            var(
+                --hcg-notification-padding,
+                var(--ig-vertical-padding)
+            )
+        );
+    --ig-notification-padding: var(--ig-notification-vertical-padding) var(--ig-notification-horizontal-padding);
+
+    /* Notification border */
+    --ig-notification-border-radius: var(--hcg-notification-border-radius, var(--ig-border-radius));
+    --ig-notification-border-width: var(--hcg-notification-border-width, 1px);
+    --ig-notification-border-style: var(--hcg-notification-border-style, solid);
+    --ig-notification-border-color: var(--hcg-notification-border-color, var(--ig-color));
+    --ig-notification-border:
+        var(
+            --ig-notification-border-width
+        ) var(--ig-notification-border-style) var(--ig-notification-border-color);
+
+    /*  Editable cell */
+    --ig-cell-editable-background: #dbeaff;
+}
+
+@media (prefers-color-scheme: dark) {
+    .hcg-container {
+        --ig-cell-editable-background: #2d415e;
+    }
+}
+
+.highcharts-dark .hcg-container {
+    --ig-cell-editable-background: #2d415e;
+}
+
+.hcg-no-padding {
+    padding: 0 !important;
+}
+
+.hcg-cell-editing-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: inherit;
+    z-index: 1;
+    background: var(--ig-cell-editable-background);
+    color: var(--ig-color);
+    box-shadow: inset var(--ig-focus-ring);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hcg-cell-editing-container:has(.hcg-input[type="checkbox"]) {
+    padding: var(--ig-padding);
+}
+
+.hcg-table tbody td.hcg-edited-cell .hcg-input:not([type="checkbox"]) {
+    border-width: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    outline: none;
+    float: left;
+    font: var(--ig-font);
+    background-color: transparent;
+    color: unset;
+    padding: var(--ig-padding);
+    max-height: unset;
+    height: unset;
+    border-radius: unset;
+    line-height: 1.2em;
+}
+
+.hcg-table tbody td.hcg-edited-cell select {
+    appearance: none;
+}
+
+.hcg-table tbody td.hcg-edited-cell-error .hcg-input {
+    color: var(--ig-color);
+    box-shadow: inset 0 0 0 var(--ig-focus-ring-width) var(--ig-negative-border-color) !important;
+    background-color: var(--ig-negative-background) !important;
+}
+
+/* Grid Pro Credits Pro styles */
+.hcg-credits-container.hcg-credits-pro {
+    text-align: var(--ig-credits-text-align);
+    padding: var(--ig-credits-padding);
+}
+
+.hcg-credits-container.hcg-credits-pro .hcg-credits {
+    color: var(--ig-credits-color);
+    font: var(--ig-credits-font);
+    text-decoration: none;
+    display: inline-block;
+}
+
+/*
+ * When custom credits text is provided in Grid Pro, the anchor element
+ * is no longer empty. In that case, hide the default logo background
+ * coming from Grid Lite and let the text be visible instead.
+ */
+.hcg-credits-container.hcg-credits-pro .hcg-credits:not(:empty) {
+    background-image: none;
+
+    /* Allow text to size naturally instead of the fixed logo size */
+    width: auto;
+    height: auto;
+}
+
+/* Notification container */
+.hcg-notification {
+    position: absolute;
+    left: 0;
+    top: 0;
+    margin: 10px;
+    width: calc(100% - 20px);
+    display: none;
+    padding: var(--ig-notification-padding);
+    font: var(--ig-notification-font);
+    background: var(--ig-background);
+    border-radius: var(--ig-notification-border-radius);
+    border: var(--ig-notification-border);
+    box-shadow: 0 0 15px 1px #00000030;
+}
+
+/* Notification states */
+.hcg-notification-error {
+    color: var(--ig-negative-color);
+    background: var(--ig-negative-background);
+    border-color: var(--ig-negative-border-color);
+}
+
+.hcg-notification-warning {
+    color: var(--ig-neutral-color);
+    background: var(--ig-neutral-background);
+    border-color: var(--ig-neutral-border-color);
+}
+
+.hcg-notification-success {
+    color: var(--ig-positive-color);
+    background: var(--ig-positive-background);
+    border-color: var(--ig-positive-border-color);
+}
+
+/* Notification animation */
+.hcg-notification-animation {
+    display: block;
+    animation: notification-animation 0.5s;
+}
+
+@keyframes notification-animation {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

package/css/modules/grid-table-variables.css

@@ -0,0 +1,385 @@
+.hcg-container {
+    .hcg-table {
+        /* Row borders */
+        --ig-row-border-width: var(--hcg-row-border-width, var(--ig-border-width));
+        --ig-row-border-style: var(--hcg-row-border-style, var(--ig-border-style));
+        --ig-row-border-color: var(--hcg-row-border-color, var(--ig-border-color));
+        --ig-row-border: var(--ig-row-border-width) var(--ig-row-border-style) var(--ig-row-border-color);
+
+        /* Header row borders */
+        --ig-header-row-border-width: var(--hcg-header-row-border-width, var(--ig-row-border-width));
+        --ig-header-row-border-style: var(--hcg-header-row-border-style, var(--ig-row-border-style));
+        --ig-header-row-border-color: var(--hcg-header-row-border-color, var(--ig-row-border-color));
+        --ig-header-row-border: var(--ig-header-row-border-width) var(--ig-header-row-border-style) var(--ig-header-row-border-color);
+
+        /* Column borders */
+        --ig-column-border-width: var(--hcg-column-border-width, var(--ig-border-width));
+        --ig-column-border-style: var(--hcg-column-border-style, var(--ig-border-style));
+        --ig-column-border-color: var(--hcg-column-border-color, var(--ig-border-color));
+        --ig-column-border: var(--ig-column-border-width) var(--ig-column-border-style) var(--ig-column-border-color);
+
+        /* Header column borders */
+        --ig-header-column-border-width: var(--hcg-header-column-border-width, var(--ig-column-border-width));
+        --ig-header-column-border-style: var(--hcg-header-column-border-style, var(--ig-column-border-style));
+        --ig-header-column-border-color: var(--hcg-header-column-border-color, var(--ig-column-border-color));
+        --ig-header-column-border: var(--ig-header-column-border-width) var(--ig-header-column-border-style) var(--ig-header-column-border-color);
+
+        border: var(--ig-border);
+        background: var(--ig-background);
+        border-radius: var(--ig-border-radius);
+    }
+
+    .hcg-table thead th {
+        --ig-header-column-background: var(--hcg-column-background);
+        --ig-header-background: var(--hcg-header-background, var(--hcg-cell-background, var(--ig-header-column-background, transparent)));
+        --ig-header-column-color: var(--hcg-column-color, var(--hcg-cell-color, var(--ig-color, inherit)));
+        --ig-header-base-color: var(--hcg-header-color, var(--ig-header-column-color));
+        --ig-header-current-color: var(--ig-header-base-color);
+        --ig-header-column-font-weight: var(--hcg-column-font-weight, var(--hcg-cell-font-weight, var(--ig-font-weight)));
+        --ig-header-base-font-weight: var(--hcg-header-font-weight, var(--ig-header-column-font-weight));
+        --ig-header-current-font-weight: var(--ig-header-base-font-weight);
+        --ig-header-column-font-size: var(--hcg-column-font-size, var(--hcg-cell-font-size, var(--ig-font-size)));
+        --ig-header-base-font-size: var(--hcg-header-font-size, var(--ig-header-column-font-size));
+        --ig-header-current-font-size: var(--ig-header-base-font-size);
+        --ig-header-column-font-family: var(--hcg-column-font-family, var(--hcg-cell-font-family, var(--ig-font-family)));
+        --ig-header-base-font-family: var(--hcg-header-font-family, var(--ig-header-column-font-family));
+        --ig-header-current-font-family: var(--ig-header-base-font-family);
+        --ig-header-hover-opacity: var(--hcg-header-hover-opacity, var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))));
+
+        border-right: var(--ig-header-column-border);
+        border-bottom: var(--ig-header-row-border);
+        background: var(--ig-header-background);
+        color: var(--ig-header-current-color);
+        font-weight: var(--ig-header-current-font-weight);
+        font-size: var(--ig-header-current-font-size);
+        font-family: var(--ig-header-current-font-family);
+        padding-top: var(--hcg-header-vertical-padding, var(--hcg-header-padding, var(--ig-vertical-padding)));
+        padding-right: var(--hcg-header-horizontal-padding, var(--hcg-header-padding, var(--ig-horizontal-padding)));
+        padding-bottom: var(--hcg-header-vertical-padding, var(--hcg-header-padding, var(--ig-vertical-padding)));
+        padding-left: var(--hcg-header-horizontal-padding, var(--hcg-header-padding, var(--ig-horizontal-padding)));
+    }
+
+    .hcg-table thead th:nth-child(even) {
+        --ig-header-column-background: var(--hcg-column-even-background, var(--hcg-column-background));
+        --ig-header-background: var(--hcg-header-even-background, var(--hcg-header-background, var(--hcg-cell-background, var(--ig-header-column-background, transparent))));
+        --ig-header-column-color: var(--hcg-column-even-color, var(--hcg-column-color, var(--hcg-cell-color, var(--ig-color, inherit))));
+        --ig-header-base-color: var(--hcg-header-even-color, var(--hcg-header-color, var(--ig-header-column-color)));
+        --ig-header-current-color: var(--ig-header-base-color);
+        --ig-header-column-font-weight: var(--hcg-column-even-font-weight, var(--hcg-column-font-weight, var(--hcg-cell-font-weight, var(--ig-font-weight))));
+        --ig-header-base-font-weight: var(--hcg-header-even-font-weight, var(--hcg-header-font-weight, var(--ig-header-column-font-weight)));
+        --ig-header-current-font-weight: var(--ig-header-base-font-weight);
+        --ig-header-column-font-size: var(--hcg-column-even-font-size, var(--hcg-column-font-size, var(--hcg-cell-font-size, var(--ig-font-size))));
+        --ig-header-base-font-size: var(--hcg-header-even-font-size, var(--hcg-header-font-size, var(--ig-header-column-font-size)));
+        --ig-header-current-font-size: var(--ig-header-base-font-size);
+        --ig-header-column-font-family: var(--hcg-column-even-font-family, var(--hcg-column-font-family, var(--hcg-cell-font-family, var(--ig-font-family))));
+        --ig-header-base-font-family: var(--hcg-header-even-font-family, var(--hcg-header-font-family, var(--ig-header-column-font-family)));
+        --ig-header-current-font-family: var(--ig-header-base-font-family);
+    }
+
+    .hcg-table thead th .hcg-header-cell-content {
+        --ig-header-font-weight: var(--ig-header-current-font-weight);
+        --ig-header-font-size: var(--ig-header-current-font-size);
+        --ig-header-font-family: var(--ig-header-current-font-family);
+        --ig-header-font: var(--ig-header-font-weight) var(--ig-header-font-size) var(--ig-header-font-family);
+        --ig-header-text-align: var(--hcg-header-text-align, var(--hcg-cell-text-align, var(--ig-text-align)));
+
+        font: var(--ig-header-font);
+        text-align: var(--ig-header-text-align);
+    }
+
+    .hcg-column-resizer.hovered::after {
+        width: max(3px, calc(var(--ig-header-column-border-width) + 2px));
+        background: var(--ig-header-color);
+    }
+
+    .hcg-table thead tr:first-of-type th:first-child {
+        border-top-left-radius: var(--ig-border-radius);
+    }
+
+    .hcg-table thead tr:first-of-type th:last-child {
+        border-top-right-radius: var(--ig-border-radius);
+    }
+
+    .hcg-table thead th:focus-visible {
+        outline: none;
+        box-shadow: inset var(--ig-focus-ring);
+    }
+
+    /* Start header hover & sync */
+    .hcg-table thead th:hover {
+        --ig-header-hover-background:
+            color-mix(
+                in srgb,
+                var(--hcg-header-hovered-background, var(--hcg-header-hover-background, var(--hcg-column-hover-header-background, var(--hcg-column-hover-background, var(--ig-header-background))))) var(--ig-header-hover-opacity),
+                var(--ig-header-background) calc(100% - var(--ig-header-hover-opacity))
+            );
+
+        background: var(--ig-header-hover-background);
+        --ig-header-color:
+            var(
+                --hcg-header-hovered-color,
+                var(
+                    --hcg-header-hover-color,
+                    var(--hcg-column-hover-header-color, var(--hcg-column-hover-color, var(--ig-header-base-color)))
+                )
+            );
+        --ig-header-current-color: var(--ig-header-color);
+
+        color: var(--ig-header-current-color);
+    }
+
+    /* End header hover & sync */
+
+    /* <tbody> */
+    .hcg-table tbody tr:last-of-type td:first-child {
+        border-bottom-left-radius: var(--ig-border-radius);
+    }
+
+    .hcg-table tbody tr:last-of-type td:last-child {
+        border-bottom-right-radius: var(--ig-border-radius);
+    }
+
+    .hcg-table tbody {
+        border-bottom-left-radius: var(--hcg-border-radius);
+        border-bottom-right-radius: var(--hcg-border-radius);
+    }
+
+    .hcg-table tbody tr {
+        --ig-row-background-current: var(--hcg-row-background);
+        --ig-row-color-current: var(--hcg-row-color);
+        --ig-row-font-weight-current: var(--hcg-row-font-weight);
+        --ig-row-font-size-current: var(--hcg-row-font-size);
+        --ig-row-font-family-current: var(--hcg-row-font-family);
+    }
+
+    .hcg-table tbody tr.hcg-row-even {
+        --ig-row-background-current: var(--hcg-row-even-background, var(--hcg-row-background));
+        --ig-row-color-current: var(--hcg-row-even-color, var(--hcg-row-color));
+        --ig-row-font-weight-current: var(--hcg-row-even-font-weight, var(--hcg-row-font-weight));
+        --ig-row-font-size-current: var(--hcg-row-even-font-size, var(--hcg-row-font-size));
+        --ig-row-font-family-current: var(--hcg-row-even-font-family, var(--hcg-row-font-family));
+    }
+
+    .hcg-table tbody tr.hcg-mocked-row td,
+    .hcg-table tbody tr td {
+        --ig-cell-column-background: var(--hcg-column-background);
+        --ig-cell-column-color: var(--hcg-column-color);
+        --ig-cell-column-font-weight: var(--hcg-column-font-weight);
+        --ig-cell-column-font-size: var(--hcg-column-font-size);
+        --ig-cell-column-font-family: var(--hcg-column-font-family);
+        --ig-cell-base-background: var(--hcg-cell-background, var(--ig-row-background-current, var(--ig-cell-column-background, transparent)));
+        --ig-column-layer: var(--ig-cell-base-background);
+        --ig-cell-hover-background-helper: var(--hcg-cell-hovered-background, var(--hcg-cell-hover-background));
+        --ig-cell-hover-background: var(--ig-cell-hover-background-helper, var(--ig-row-hover-color, var(--ig-column-layer)));
+        --ig-cell-hover-opacity-helper: var(--hcg-cell-hover-opacity);
+        --ig-cell-hover-opacity: var(--ig-cell-hover-opacity-helper, var(--ig-hover-opacity));
+        --ig-cell-active-opacity: var(--ig-cell-hover-opacity);
+        --ig-cell-sync-opacity: var(--hcg-cell-sync-opacity, var(--hcg-sync-opacity, var(--ig-cell-hover-opacity)));
+        --ig-cell-base-color: var(--hcg-cell-color, var(--ig-row-color-current, var(--ig-cell-column-color, var(--ig-color, inherit))));
+        --ig-column-text-layer: var(--ig-cell-base-color);
+        --ig-row-hover-text-color: var(--ig-column-text-layer);
+        --ig-cell-hover-text-color: var(--ig-row-hover-text-color);
+        --ig-cell-base-font-weight: var(--hcg-cell-font-weight, var(--ig-row-font-weight-current, var(--ig-cell-column-font-weight, var(--ig-font-weight))));
+        --ig-cell-font-weight: var(--ig-cell-base-font-weight);
+        --ig-cell-base-font-size: var(--hcg-cell-font-size, var(--ig-row-font-size-current, var(--ig-cell-column-font-size, var(--ig-font-size))));
+        --ig-cell-font-size: var(--ig-cell-base-font-size);
+        --ig-cell-base-font-family: var(--hcg-cell-font-family, var(--ig-row-font-family-current, var(--ig-cell-column-font-family, var(--ig-font-family))));
+        --ig-cell-font-family: var(--ig-cell-base-font-family);
+        --ig-cell-font: var(--ig-cell-font-weight) var(--ig-cell-font-size) var(--ig-cell-font-family);
+        --ig-cell-text-align: var(--hcg-cell-text-align, var(--ig-text-align));
+
+        background: var(--ig-column-layer);
+        color: var(--ig-cell-hover-text-color);
+        border-right: var(--ig-column-border);
+        border-bottom: var(--ig-row-border);
+        padding: var(--ig-padding);
+        font: var(--ig-cell-font);
+        text-align: var(--ig-cell-text-align);
+    }
+
+    .hcg-table tbody tr td:nth-child(even) {
+        --ig-cell-column-background: var(--hcg-column-even-background, var(--hcg-column-background));
+        --ig-cell-column-color: var(--hcg-column-even-color, var(--hcg-column-color));
+        --ig-cell-column-font-weight: var(--hcg-column-even-font-weight, var(--hcg-column-font-weight));
+        --ig-cell-column-font-size: var(--hcg-column-even-font-size, var(--hcg-column-font-size));
+        --ig-cell-column-font-family: var(--hcg-column-even-font-family, var(--hcg-column-font-family));
+    }
+
+    .hcg-table tbody td:focus {
+        box-shadow: inset var(--ig-focus-ring);
+    }
+
+    /* Start column hover & sync */
+    .hcg-table td.hcg-hovered-column {
+        --ig-column-layer:
+            color-mix(
+                in srgb,
+                var(--hcg-cell-hovered-column-background, var(--hcg-column-hover-background, var(--ig-cell-base-background))) var(--hcg-column-hover-opacity, var(--ig-hover-opacity)),
+                var(--ig-cell-base-background) calc(100% - var(--hcg-column-hover-opacity, var(--ig-hover-opacity)))
+            );
+        --ig-column-text-layer: var(--hcg-cell-hovered-column-color, var(--hcg-column-hover-color, var(--ig-cell-base-color)));
+    }
+
+    .hcg-table td.hcg-synced-column {
+        --ig-column-layer:
+            color-mix(
+                in srgb,
+                var(
+                    --hcg-cell-synced-column-background,
+                    var(--hcg-cell-hovered-column-background, var(--hcg-column-sync-background, var(--hcg-column-hover-background, var(--ig-cell-base-background))))
+                ) var(--hcg-column-sync-opacity, var(--hcg-sync-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity)))),
+                var(--ig-cell-base-background)
+                calc(100% - var(--hcg-column-sync-opacity, var(--hcg-sync-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity)))))
+            );
+        --ig-column-text-layer:
+            var(
+                --hcg-cell-synced-column-color,
+                var(--hcg-cell-hovered-column-color, var(--hcg-column-sync-color, var(--hcg-column-hover-color, var(--ig-cell-base-color))))
+            );
+    }
+
+    .hcg-table th.hcg-hovered-column:not(:hover) {
+        --ig-header-column-hover-color:
+            color-mix(
+                in srgb,
+                var(--hcg-cell-hovered-header-background, var(--hcg-column-hover-header-background, var(--hcg-column-hover-background, var(--ig-header-background)))) var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))),
+                var(--ig-header-background) calc(100% - var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))))
+            );
+        --ig-header-color: var(--hcg-cell-hovered-header-color, var(--hcg-column-hover-header-color, var(--hcg-column-hover-color, var(--ig-header-base-color))));
+        --ig-header-current-color: var(--ig-header-color);
+
+        background: var(--ig-header-column-hover-color);
+        color: var(--ig-header-current-color);
+    }
+
+    .hcg-table th.hcg-synced-column:not(:hover) {
+        --ig-header-sync-opacity:
+            var(
+                --hcg-header-sync-opacity,
+                var(
+                    --hcg-column-sync-header-opacity,
+                    var(--hcg-sync-opacity, var(--hcg-column-hover-header-opacity, var(--hcg-column-hover-opacity, var(--ig-hover-opacity))))
+                )
+            );
+        --ig-header-column-hover-color:
+            color-mix(
+                in srgb,
+                var(
+                    --hcg-cell-synced-header-background,
+                    var(
+                        --hcg-cell-hovered-header-background,
+                        var(
+                            --hcg-column-sync-header-background,
+                            var(--hcg-column-hover-header-background, var(--hcg-column-hover-background, var(--ig-header-background)))
+                        )
+                    )
+                ) var(--ig-header-sync-opacity),
+                var(--ig-header-background)
+                calc(
+                    100% - var(
+                        --ig-header-sync-opacity
+                    )
+                )
+            );
+        --ig-header-color:
+            var(
+                --hcg-cell-synced-header-color,
+                var(
+                    --hcg-cell-hovered-header-color,
+                    var(--hcg-column-sync-header-color, var(--hcg-column-hover-header-color, var(--hcg-column-hover-color, var(--ig-header-base-color))))
+                )
+            );
+        --ig-header-current-color: var(--ig-header-color);
+
+        background: var(--ig-header-column-hover-color);
+        color: var(--ig-header-current-color);
+    }
+
+    /* End column hover & sync */
+
+    /* Start row hover & sync */
+    .hcg-table tr:hover td {
+        --ig-row-hover-color:
+            color-mix(
+                in srgb,
+                var(--hcg-cell-hovered-row-background, var(--hcg-row-hover-background, var(--ig-column-layer))) var(--hcg-row-hover-opacity, var(--ig-hover-opacity)),
+                var(--ig-column-layer) calc(100% - var(--hcg-row-hover-opacity, var(--ig-hover-opacity)))
+            );
+        --ig-row-hover-text-color: var(--hcg-cell-hovered-row-color, var(--hcg-row-hover-color, var(--ig-column-text-layer)));
+        --ig-cell-hover-text-color: var(--ig-row-hover-text-color);
+
+        background: var(--ig-row-hover-color);
+        color: var(--ig-cell-hover-text-color);
+    }
+
+    .hcg-table tr.hcg-synced-row td {
+        --ig-row-hover-color:
+            color-mix(
+                in srgb,
+                var(
+                    --hcg-cell-synced-row-background,
+                    var(--hcg-cell-hovered-row-background, var(--hcg-row-sync-background, var(--hcg-row-hover-background, var(--ig-column-layer))))
+                )
+                var(--hcg-row-sync-opacity, var(--hcg-sync-opacity, var(--hcg-row-hover-opacity, var(--ig-hover-opacity)))),
+                var(--ig-column-layer)
+                calc(100% - var(--hcg-row-sync-opacity, var(--hcg-sync-opacity, var(--hcg-row-hover-opacity, var(--ig-hover-opacity)))))
+            );
+        --ig-row-hover-text-color:
+            var(
+                --hcg-cell-synced-row-color,
+                var(--hcg-cell-hovered-row-color, var(--hcg-row-sync-color, var(--hcg-row-hover-color, var(--ig-column-text-layer))))
+            );
+        --ig-cell-hover-text-color: var(--ig-row-hover-text-color);
+
+        background: var(--ig-row-hover-color);
+        color: var(--ig-cell-hover-text-color);
+    }
+
+    /* End row hover & sync */
+
+    /* Start cell hover & sync */
+    .hcg-table td:hover,
+    .hcg-table tr:hover td:hover,
+    .hcg-table td.hcg-hovered-column:hover {
+        --ig-cell-hover-layer:
+            color-mix(
+                in srgb,
+                var(--ig-cell-hover-background) var(--ig-cell-hover-opacity),
+                var(--ig-row-hover-color, var(--ig-column-layer)) calc(100% - var(--ig-cell-hover-opacity))
+            );
+        --ig-cell-hover-text-color: var(--hcg-cell-hovered-color, var(--hcg-cell-hover-color, var(--ig-row-hover-text-color)));
+
+        background: var(--ig-cell-hover-layer);
+        color: var(--ig-cell-hover-text-color);
+    }
+
+    .hcg-table tr.hcg-synced-row td.hcg-synced-column {
+        --ig-cell-hover-layer:
+            color-mix(
+                in srgb,
+                var(
+                    --hcg-cell-synced-background,
+                    var(
+                        --hcg-cell-hovered-background,
+                        var(--hcg-cell-sync-background, var(--hcg-cell-hover-background, var(--ig-row-hover-color, var(--ig-column-layer))))
+                    )
+                ) var(--hcg-cell-synced-opacity, var(--hcg-cell-sync-opacity, var(--hcg-sync-opacity, var(--hcg-cell-hover-opacity, var(--ig-cell-hover-opacity))))),
+                var(--ig-row-hover-color, var(--ig-column-layer))
+                calc(100% - var(--hcg-cell-synced-opacity, var(--hcg-cell-sync-opacity, var(--hcg-sync-opacity, var(--hcg-cell-hover-opacity, var(--ig-cell-hover-opacity))))))
+            );
+        --ig-cell-hover-text-color:
+            var(
+                --hcg-cell-synced-color,
+                var(--hcg-cell-hovered-color, var(--hcg-cell-sync-color, var(--hcg-cell-hover-color, var(--ig-row-hover-text-color))))
+            );
+
+        background: var(--ig-cell-hover-layer);
+        color: var(--ig-cell-hover-text-color);
+    }
+
+    /* End cell hover & sync */
+
+    .hcg-table tfoot td {
+        border-top: var(--ig-row-border);
+    }
+}

package/css/modules/grid-theme-default.css

@@ -0,0 +1,55 @@
+.hcg-theme-default,
+.highcharts-light .hcg-theme-default {
+    --hcg-color: var(--highcharts-neutral-color-100);
+    --hcg-background: var(--highcharts-background-color);
+    --hcg-border-radius: 5px;
+    --hcg-border-width: 1px;
+    --hcg-font-size: 15px;
+    --hcg-caption-font-size: 18px;
+    --hcg-padding: 15px;
+    --hcg-header-vertical-padding: 10px;
+    --hcg-pagination-vertical-padding: 10px;
+    --hcg-focus-ring-color: #626bd0;
+    --hcg-input-border-radius: 6px;
+    --hcg-input-border-color: #d1d1d1;
+    --hcg-input-hover-border-color: #9d9d9d;
+    --hcg-button-border-radius: 6px;
+    --hcg-button-hover-color: #000000;
+    --hcg-button-hover-background: #e8e8e8;
+    --hcg-button-border-color: transparent;
+    --hcg-cell-button-border-color: #d1d1d1;
+    --hcg-button-color: #141414;
+    --hcg-header-button-background: transparent;
+    --hcg-pagination-button-selected-background: #000000;
+    --hcg-pagination-button-selected-color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+    .hcg-theme-default {
+        --hcg-input-border-color: #4f4f4f;
+        --hcg-input-hover-border-color: #646464;
+        --hcg-button-color: #ffffff;
+        --hcg-button-hover-color: #ffffff;
+        --hcg-button-hover-background: #3f3f3f;
+        --hcg-cell-button-border-color: #646464;
+        --hcg-pagination-button-selected-background: #ffffff;
+        --hcg-pagination-button-selected-color: #000000;
+    }
+}
+
+.highcharts-dark .hcg-theme-default {
+    --hcg-input-border-color: #4f4f4f;
+    --hcg-input-hover-border-color: #646464;
+    --hcg-button-color: #ffffff;
+    --hcg-button-hover-color: #ffffff;
+    --hcg-button-hover-background: #3f3f3f;
+    --hcg-cell-button-border-color: #646464;
+    --hcg-pagination-button-selected-background: #ffffff;
+    --hcg-pagination-button-selected-color: #000000;
+}
+
+.hcg-theme-default {
+    --hcg-border-color: var(--highcharts-neutral-color-20, color-mix(in srgb, var(--hcg-color, #000000) 10%, var(--hcg-background, #ffffff)));
+    --hcg-row-hover-background: var(--ig-highlight-color-5, color-mix(in srgb, var(--hcg-color, #000000) 3%, var(--hcg-background, #ffffff)));
+    --hcg-row-even-background: var(--highcharts-neutral-color-3, color-mix(in srgb, var(--hcg-color, #000000) 2%, var(--hcg-background, #ffffff)));
+}