@highcharts/grid-pro 2.2.0 → 2.3.0

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

@@ -0,0 +1,131 @@
+.hcg-container,
+.highcharts-light .hcg-container {
+    --ig-default-color: #000000;
+    --ig-default-background: #ffffff;
+    --ig-negative-default-color: #c10008;
+    --ig-negative-default-border-color: #e7000b;
+    --ig-negative-default-background: #fef3f2;
+    --ig-neutral-default-color: #884b00;
+    --ig-neutral-default-border-color: #d18700;
+    --ig-neutral-default-background: #fefce8;
+    --ig-positive-default-color: #008236;
+    --ig-positive-default-border-color: #00a63e;
+    --ig-positive-default-background: #effdf4;
+    --ig-highlight-color-5: #f3f6fe;
+}
+
+@media (prefers-color-scheme: dark) {
+    .hcg-container {
+        --ig-default-color: #ffffff;
+        --ig-default-background: #000000;
+        --ig-negative-default-color: #ffb3b3;
+        --ig-negative-default-border-color: #7a1e1e;
+        --ig-negative-default-background: #3d0e0b;
+        --ig-neutral-default-color: #ffe8c1;
+        --ig-neutral-default-border-color: #7d5c20;
+        --ig-neutral-default-background: #3b2a11;
+        --ig-positive-default-color: #a6f8c1;
+        --ig-positive-default-border-color: #1e6f3e;
+        --ig-positive-default-background: #0a3e1a;
+        --ig-highlight-color-5: #202124;
+    }
+}
+
+.highcharts-dark .hcg-container {
+    --ig-default-color: #ffffff;
+    --ig-default-background: #000000;
+    --ig-negative-default-color: #ffb3b3;
+    --ig-negative-default-border-color: #7a1e1e;
+    --ig-negative-default-background: #3d0e0b;
+    --ig-neutral-default-color: #ffe8c1;
+    --ig-neutral-default-border-color: #7d5c20;
+    --ig-neutral-default-background: #3b2a11;
+    --ig-positive-default-color: #a6f8c1;
+    --ig-positive-default-border-color: #1e6f3e;
+    --ig-positive-default-background: #0a3e1a;
+    --ig-highlight-color-5: #202124;
+}
+
+/*  ==== End Grid Color Scheme  ==== */
+
+/*  ==== Start Highcharts Variables  ==== */
+:root,
+.highcharts-light {
+    --highcharts-background-color: #ffffff;
+    --highcharts-neutral-color-100: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --highcharts-background-color: #141414;
+        --highcharts-neutral-color-100: #ffffff;
+    }
+}
+
+.highcharts-dark {
+    --highcharts-background-color: #141414;
+    --highcharts-neutral-color-100: #ffffff;
+}
+
+/*  ==== End Highcharts Variables  ==== */
+
+/* ==== Start Grid Variables ==== */
+.hcg-container {
+    --ig-hover-opacity: var(--hcg-hover-opacity, 100%);
+    --ig-sync-opacity: var(--hcg-sync-opacity, var(--ig-hover-opacity));
+
+    /* Global fonts */
+    --ig-default-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    --ig-font-weight: var(--hcg-font-weight, normal);
+    --ig-font-size: var(--hcg-font-size, 1rem);
+    --ig-font-family: var(--hcg-font-family, var(--ig-default-font-family));
+    --ig-color: var(--hcg-color, var(--ig-default-color));
+    --ig-font: var(--ig-font-weight) var(--ig-font-size) var(--ig-font-family);
+    --ig-text-align: var(--hcg-text-align, left);
+
+    /* Default borders */
+    --ig-border-radius: var(--hcg-border-radius, 0);
+    --ig-border-width: var(--hcg-border-width, 0);
+    --ig-border-style: var(--hcg-border-style, solid);
+    --ig-border-color: var(--hcg-border-color, var(--ig-color));
+    --ig-border: var(--ig-border-width) var(--ig-border-style) var(--ig-border-color);
+
+    /* Default padding */
+    --ig-horizontal-padding: var(--hcg-horizontal-padding, var(--hcg-padding, 0));
+    --ig-vertical-padding: var(--hcg-vertical-padding, var(--hcg-padding, 0));
+    --ig-padding: var(--ig-vertical-padding) var(--ig-horizontal-padding);
+
+    /* Loading indicator */
+    --ig-loader-color: var(--hcg-loader-color, var(--ig-color));
+
+    /* Default backgrounds and colors */
+    --ig-background: var(--hcg-background, transparent);
+
+    /* Accessibility */
+    --ig-focus-ring-color: var(--hcg-focus-ring-color, var(--ig-color));
+    --ig-focus-ring-width: var(--hcg-focus-ring-width, 2px);
+    --ig-focus-ring: 0 0 0 var(--ig-focus-ring-width) var(--ig-focus-ring-color);
+
+    /* CSS helpers */
+    --ig-highlight-border-size: var(--hcg-highlight-border-size, 1px);
+
+    /* Negative colors */
+    --ig-negative-border-color: var(--hcg-negative-border-color, var(--ig-negative-default-border-color));
+    --ig-negative-border-size: var(--hcg-negative-border-size, var(--ig-highlight-border-size));
+    --ig-negative-background: var(--hcg-negative-background, var(--ig-negative-default-background));
+    --ig-negative-color: var(--hcg-negative-color, var(--ig-color));
+
+    /* Neutral colors */
+    --ig-neutral-border-color: var(--hcg-neutral-border-color, var(--ig-neutral-default-border-color));
+    --ig-neutral-border-size: var(--hcg-neutral-border-size, var(--ig-highlight-border-size));
+    --ig-neutral-background: var(--hcg-neutral-background, var(--ig-neutral-default-background));
+    --ig-neutral-color: var(--hcg-neutral-color, var(--ig-color));
+
+    /* Positive colors */
+    --ig-positive-border-color: var(--hcg-positive-border-color, var(--ig-positive-default-border-color));
+    --ig-positive-border-size: var(--hcg-positive-border-size, var(--ig-highlight-border-size));
+    --ig-positive-background: var(--hcg-positive-background, var(--ig-positive-default-background));
+    --ig-positive-color: var(--hcg-positive-color, var(--ig-color));
+
+    font: var(--ig-font);
+}

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

@@ -0,0 +1,140 @@
+.hcg-container {
+    /* ─────────────────────────────────────────────────────────────
+     Defaults (internal base tokens)
+     ───────────────────────────────────────────────────────────── */
+    --ig-button-border-width-base: var(--hcg-button-border-width, 1px);
+    --ig-button-border-style-base: var(--hcg-button-border-style, solid);
+    --ig-button-border-color-base: var(--hcg-button-border-color, var(--ig-default-color));
+    --ig-button-border-radius-base: var(--hcg-button-border-radius, 0);
+    --ig-button-background-base: var(--hcg-button-background, transparent);
+    --ig-button-padding-base: var(--hcg-button-padding, 6px);
+    --ig-button-color-base: var(--hcg-button-color, var(--ig-default-color));
+    --ig-button-hover-color-base: var(--hcg-button-hover-color, var(--ig-default-background));
+    --ig-button-hover-background-base: var(--hcg-button-hover-background, var(--ig-default-color));
+    --ig-button-hover-border-color-base: var(--hcg-button-hover-border-color, var(--ig-button-border-color-base));
+    --ig-button-selected-color-base: var(--hcg-button-selected-color, var(--ig-default-background));
+    --ig-button-selected-background-base: var(--hcg-button-selected-background, var(--ig-default-color));
+    --ig-button-selected-border-color-base: var(--hcg-button-selected-border-color, var(--ig-button-border-color));
+
+    /* ─────────────────────────────────────────────────────────────
+     Public theme overrides (external hcg tokens)
+     ───────────────────────────────────────────────────────────── */
+    --ig-button-border-width: var(--hcg-button-border-width, var(--ig-button-border-width-base));
+    --ig-button-border-style: var(--hcg-button-border-style, var(--ig-button-border-style-base));
+    --ig-button-border-color: var(--hcg-button-border-color, var(--ig-button-border-color-base));
+    --ig-button-border-radius: var(--hcg-button-border-radius, var(--ig-button-border-radius-base));
+    --ig-button-background: var(--hcg-button-background, var(--ig-button-background-base));
+    --ig-button-padding: var(--hcg-button-padding, var(--ig-button-padding-base));
+    --ig-button-font-weight: var(--hcg-button-font-weight, inherit);
+    --ig-button-font-size: var(--hcg-button-font-size, inherit);
+    --ig-button-font-family: var(--hcg-button-font-family, inherit);
+    --ig-button-color: var(--hcg-button-color, var(--ig-button-color-base));
+    --ig-button-hover-color: var(--hcg-button-hover-color, var(--ig-button-hover-color-base));
+    --ig-button-hover-background: var(--hcg-button-hover-background, var(--ig-button-hover-background-base));
+    --ig-button-hover-border-color: var(--hcg-button-hover-border-color, var(--ig-button-hover-border-color-base));
+    --ig-button-selected-color: var(--hcg-button-selected-color, var(--ig-button-selected-color-base));
+    --ig-button-selected-background: var(--hcg-button-selected-background, var(--ig-button-selected-background-base));
+    --ig-button-selected-border-color: var(--hcg-button-selected-border-color, var(--ig-button-selected-border-color-base));
+    --ig-button-focus-ring: 0 0 0 var(--ig-focus-ring-width) var(--ig-focus-ring-color);
+
+    thead th {
+        --ig-button-background: var(--hcg-header-button-background, var(--ig-button-background-base));
+        --ig-button-border-width: var(--hcg-header-button-border-width, var(--ig-button-border-width-base));
+        --ig-button-border-style: var(--hcg-header-button-border-style, var(--ig-button-border-style-base));
+        --ig-button-border-color: var(--hcg-header-button-border-color, var(--ig-button-border-color-base));
+        --ig-button-border-radius: var(--hcg-header-button-border-radius, var(--ig-button-border-radius-base));
+        --ig-button-padding: var(--hcg-header-button-padding, var(--ig-button-padding-base));
+        --ig-button-font-weight: var(--hcg-header-button-font-weight, var(--hcg-button-font-weight, inherit));
+        --ig-button-font-size: var(--hcg-header-button-font-size, var(--hcg-button-font-size, inherit));
+        --ig-button-font-family: var(--hcg-header-button-font-family, var(--hcg-button-font-family, inherit));
+        --ig-button-hover-border-color: var(--hcg-header-button-hover-border-color, var(--hcg-button-hover-border-color, var(--hcg-header-button-border-color, var(--ig-button-hover-border-color-base))));
+        --ig-button-selected-border-color: var(--hcg-header-button-selected-border-color, var(--ig-button-selected-border-color-base));
+        --ig-button-focus-ring: inset 0 0 0 var(--ig-focus-ring-width) var(--ig-focus-ring-color);
+
+        /* Header-specific color logic */
+        --ig-button-color: var(--hcg-header-button-color, var(--ig-header-current-color));
+        --ig-button-hover-color: var(--hcg-header-button-hover-color, var(--hcg-button-hover-color, var(--hcg-header-button-color, var(--ig-header-current-color))));
+        --ig-button-hover-background: var(--hcg-header-button-hover-background, var(--hcg-button-hover-background, var(--hcg-header-button-background, color-mix(in oklch, var(--ig-header-hover-background) 90%, var(--ig-default-color)))));
+        --ig-button-selected-color: var(--hcg-header-button-selected-color, var(--ig-header-current-color));
+        --ig-button-selected-background: var(--hcg-header-button-selected-background, var(--ig-button-background));
+    }
+
+    tbody td {
+        --ig-button-background: var(--hcg-cell-button-background, var(--ig-button-background-base));
+        --ig-button-color: var(--hcg-cell-button-color, var(--ig-button-color-base));
+        --ig-button-border-width: var(--hcg-cell-button-border-width, var(--ig-button-border-width-base));
+        --ig-button-border-style: var(--hcg-cell-button-border-style, var(--ig-button-border-style-base));
+        --ig-button-border-color: var(--hcg-cell-button-border-color, var(--ig-button-border-color-base));
+        --ig-button-border-radius: var(--hcg-cell-button-border-radius, var(--ig-button-border-radius-base));
+        --ig-button-padding: var(--hcg-cell-button-padding, var(--ig-button-padding-base));
+        --ig-button-font-weight: var(--hcg-cell-button-font-weight, var(--hcg-button-font-weight, inherit));
+        --ig-button-font-size: var(--hcg-cell-button-font-size, var(--hcg-button-font-size, inherit));
+        --ig-button-font-family: var(--hcg-cell-button-font-family, var(--hcg-button-font-family, inherit));
+        --ig-button-hover-color: var(--hcg-cell-button-hover-color, var(--hcg-button-hover-color, var(--hcg-cell-button-color, var(--ig-button-hover-color-base))));
+        --ig-button-hover-background: var(--hcg-cell-button-hover-background, var(--hcg-button-hover-background, var(--hcg-cell-button-background, var(--ig-button-hover-background-base))));
+        --ig-button-hover-border-color: var(--hcg-cell-button-hover-border-color, var(--hcg-button-hover-border-color, var(--hcg-cell-button-border-color, var(--ig-button-hover-border-color-base))));
+        --ig-button-selected-color: var(--hcg-cell-button-selected-color, var(--ig-button-selected-color-base));
+        --ig-button-selected-background: var(--hcg-cell-button-selected-background, var(--ig-button-selected-background-base));
+        --ig-button-selected-border-color: var(--hcg-cell-button-selected-border-color, var(--ig-button-selected-border-color-base));
+    }
+
+    .hcg-pagination {
+        --ig-button-background: var(--hcg-pagination-button-background, var(--ig-button-background-base));
+        --ig-button-color: var(--hcg-pagination-button-color, var(--ig-button-color-base));
+        --ig-button-border-width: var(--hcg-pagination-button-border-width, var(--ig-button-border-width-base));
+        --ig-button-border-style: var(--hcg-pagination-button-border-style, var(--ig-button-border-style-base));
+        --ig-button-border-color: var(--hcg-pagination-button-border-color, var(--ig-button-border-color-base));
+        --ig-button-border-radius: var(--hcg-pagination-button-border-radius, var(--ig-button-border-radius-base));
+        --ig-button-padding: var(--hcg-pagination-button-padding, var(--ig-button-padding-base));
+        --ig-button-font-weight: var(--hcg-pagination-button-font-weight, var(--hcg-button-font-weight, inherit));
+        --ig-button-font-size: var(--hcg-pagination-button-font-size, var(--hcg-button-font-size, inherit));
+        --ig-button-font-family: var(--hcg-pagination-button-font-family, var(--hcg-button-font-family, inherit));
+        --ig-button-hover-color: var(--hcg-pagination-button-hover-color, var(--hcg-button-hover-color, var(--hcg-pagination-button-color, var(--ig-button-hover-color-base))));
+        --ig-button-hover-background: var(--hcg-pagination-button-hover-background, var(--hcg-button-hover-background, var(--hcg-pagination-button-background, var(--ig-button-hover-background-base))));
+        --ig-button-hover-border-color: var(--hcg-pagination-button-hover-border-color, var(--hcg-button-hover-border-color, var(--hcg-pagination-button-border-color, var(--ig-button-hover-border-color-base))));
+        --ig-button-selected-color: var(--hcg-pagination-button-selected-color, var(--ig-button-selected-color-base));
+        --ig-button-selected-background: var(--hcg-pagination-button-selected-background, var(--ig-button-selected-background-base));
+        --ig-button-selected-border-color: var(--hcg-pagination-button-selected-border-color, var(--ig-button-selected-border-color-base));
+    }
+
+    :where(.hcg-button) {
+        font-weight: var(--ig-button-font-weight);
+        font-size: var(--ig-button-font-size);
+        font-family: var(--ig-button-font-family);
+        color: var(--ig-button-color);
+        background: var(--ig-button-background);
+        padding-block: var(--ig-button-padding);
+        padding-inline: var(--ig-button-padding);
+        min-height: calc(1em + (2 * var(--ig-button-padding)));
+        border-width: var(--ig-button-border-width);
+        border-style: var(--ig-button-border-style);
+        border-color: var(--ig-button-border-color);
+        border-radius: var(--ig-button-border-radius);
+
+        &.hcg-button-selected,
+        &.hcg-button-selected:hover:not(thead th *) {
+            color: var(--ig-button-selected-color);
+            background: var(--ig-button-selected-background);
+            border-color: var(--ig-button-selected-border-color);
+        }
+
+        &.hcg-button-selected::after {
+            background: var(--ig-button-selected-color);
+        }
+
+        &.hcg-button-selected:hover::after {
+            background: var(--ig-button-hover-color);
+        }
+
+        &:hover:not(:disabled),
+        &.hcg-button-highlighted {
+            color: var(--ig-button-hover-color);
+            background: var(--ig-button-hover-background);
+            border-color: var(--ig-button-hover-border-color);
+        }
+
+        &:focus-visible {
+            box-shadow: var(--ig-button-focus-ring);
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+.hcg-container .hcg-caption {
+    color: var(--hcg-caption-color, var(--ig-color));
+    font-weight: var(--hcg-caption-font-weight, var(--ig-font-weight));
+    font-size: var(--hcg-caption-font-size, var(--ig-font-size));
+    font-family: var(--hcg-caption-font-family, var(--ig-font-family));
+    text-align: var(--hcg-caption-text-align, var(--ig-text-align));
+    padding-top: 0;
+    padding-right: var(--hcg-caption-horizontal-padding, var(--hcg-caption-padding, var(--ig-horizontal-padding)));
+    padding-bottom: var(--hcg-caption-vertical-padding, var(--hcg-caption-padding, var(--ig-vertical-padding)));
+    padding-left: var(--hcg-caption-horizontal-padding, var(--hcg-caption-padding, var(--ig-horizontal-padding)));
+}

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

@@ -0,0 +1,11 @@
+.hcg-container .hcg-description {
+    color: var(--hcg-description-color, var(--ig-color));
+    font-weight: var(--hcg-description-font-weight, var(--ig-font-weight));
+    font-size: var(--hcg-description-font-size, var(--ig-font-size));
+    font-family: var(--hcg-description-font-family, var(--ig-font-family));
+    text-align: var(--hcg-description-text-align, var(--ig-text-align));
+    padding-top: var(--hcg-description-vertical-padding, var(--hcg-description-padding, var(--ig-vertical-padding)));
+    padding-right: var(--hcg-description-horizontal-padding, var(--hcg-description-padding, var(--ig-horizontal-padding)));
+    padding-bottom: 0;
+    padding-left: var(--hcg-description-horizontal-padding, var(--hcg-description-padding, var(--ig-horizontal-padding)));
+}

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

@@ -0,0 +1,114 @@
+.hcg-container {
+    /* -------------------------------------------------------------
+     Defaults (internal base tokens)
+     ------------------------------------------------------------- */
+    --ig-input-padding-base: var(--hcg-input-padding, 5px);
+    --ig-input-color-base: var(--hcg-input-color, var(--ig-color));
+    --ig-input-text-align-base: var(--hcg-input-text-align, var(--ig-text-align));
+    --ig-input-border-radius-base: var(--hcg-input-border-radius, 0);
+    --ig-input-border-width-base: var(--hcg-input-border-width, 1px);
+    --ig-input-border-style-base: var(--hcg-input-border-style, solid);
+    --ig-input-border-color-base: var(--hcg-input-border-color, var(--ig-color));
+    --ig-input-background-base: var(--hcg-input-background, var(--highcharts-background-color));
+    --ig-input-hover-color-base: var(--hcg-input-hover-color, var(--ig-input-color-base));
+    --ig-input-hover-background-base: var(--hcg-input-hover-background, var(--ig-input-background-base));
+    --ig-input-hover-border-color-base: var(--hcg-input-hover-border-color, var(--ig-input-border-color-base));
+
+    /* -------------------------------------------------------------
+     Public theme overrides (external hcg tokens)
+     ------------------------------------------------------------- */
+    --ig-input-padding: var(--hcg-input-padding, var(--ig-input-padding-base));
+    --ig-input-font-weight: var(--hcg-input-font-weight, inherit);
+    --ig-input-font-size: var(--hcg-input-font-size, inherit);
+    --ig-input-font-family: var(--hcg-input-font-family, inherit);
+    --ig-input-color: var(--hcg-input-color, var(--ig-input-color-base));
+    --ig-input-text-align: var(--hcg-input-text-align, var(--ig-input-text-align-base));
+    --ig-input-border-radius: var(--hcg-input-border-radius, var(--ig-input-border-radius-base));
+    --ig-input-border-width: var(--hcg-input-border-width, var(--ig-input-border-width-base));
+    --ig-input-border-style: var(--hcg-input-border-style, var(--ig-input-border-style-base));
+    --ig-input-border-color: var(--hcg-input-border-color, var(--ig-input-border-color-base));
+    --ig-input-background: var(--hcg-input-background, var(--ig-input-background-base));
+    --ig-input-hover-color: var(--hcg-input-hover-color, var(--ig-input-hover-color-base));
+    --ig-input-hover-background: var(--hcg-input-hover-background, var(--ig-input-hover-background-base));
+    --ig-input-hover-border-color: var(--hcg-input-hover-border-color, var(--ig-input-hover-border-color-base));
+    --ig-input-focus-ring: 0 0 0 var(--ig-focus-ring-width) var(--ig-focus-ring-color);
+
+    thead th {
+        --ig-input-padding: var(--hcg-header-input-padding, var(--ig-input-padding-base));
+        --ig-input-font-weight: var(--hcg-header-input-font-weight, var(--hcg-input-font-weight, inherit));
+        --ig-input-font-size: var(--hcg-header-input-font-size, var(--hcg-input-font-size, inherit));
+        --ig-input-font-family: var(--hcg-header-input-font-family, var(--hcg-input-font-family, inherit));
+        --ig-input-color: var(--hcg-header-input-color, var(--ig-input-color-base));
+        --ig-input-text-align: var(--hcg-header-input-text-align, var(--ig-input-text-align-base));
+        --ig-input-border-radius: var(--hcg-header-input-border-radius, var(--ig-input-border-radius-base));
+        --ig-input-border-width: var(--hcg-header-input-border-width, var(--ig-input-border-width-base));
+        --ig-input-border-style: var(--hcg-header-input-border-style, var(--ig-input-border-style-base));
+        --ig-input-border-color: var(--hcg-header-input-border-color, var(--ig-input-border-color-base));
+        --ig-input-background: var(--hcg-header-input-background, var(--ig-input-background-base));
+        --ig-input-hover-color: var(--hcg-header-input-hover-color, var(--hcg-input-hover-color, var(--hcg-header-input-color, var(--ig-input-color-base))));
+        --ig-input-hover-background: var(--hcg-header-input-hover-background, var(--hcg-input-hover-background, var(--hcg-header-input-background, var(--ig-input-background-base))));
+        --ig-input-hover-border-color: var(--hcg-header-input-hover-border-color, var(--hcg-input-hover-border-color, var(--hcg-header-input-border-color, var(--ig-input-border-color-base))));
+    }
+
+    tbody td {
+        --ig-input-padding: var(--hcg-cell-input-padding, var(--ig-input-padding-base));
+        --ig-input-font-weight: var(--hcg-cell-input-font-weight, var(--hcg-input-font-weight, inherit));
+        --ig-input-font-size: var(--hcg-cell-input-font-size, var(--hcg-input-font-size, inherit));
+        --ig-input-font-family: var(--hcg-cell-input-font-family, var(--hcg-input-font-family, inherit));
+        --ig-input-color: var(--hcg-cell-input-color, var(--ig-input-color-base));
+        --ig-input-text-align: var(--hcg-cell-input-text-align, var(--ig-input-text-align-base));
+        --ig-input-border-radius: var(--hcg-cell-input-border-radius, var(--ig-input-border-radius-base));
+        --ig-input-border-width: var(--hcg-cell-input-border-width, var(--ig-input-border-width-base));
+        --ig-input-border-style: var(--hcg-cell-input-border-style, var(--ig-input-border-style-base));
+        --ig-input-border-color: var(--hcg-cell-input-border-color, var(--ig-input-border-color-base));
+        --ig-input-background: var(--hcg-cell-input-background, var(--ig-input-background-base));
+        --ig-input-hover-color: var(--hcg-cell-input-hover-color, var(--hcg-input-hover-color, var(--hcg-cell-input-color, var(--ig-input-color-base))));
+        --ig-input-hover-background: var(--hcg-cell-input-hover-background, var(--hcg-input-hover-background, var(--hcg-cell-input-background, var(--ig-input-background-base))));
+        --ig-input-hover-border-color: var(--hcg-cell-input-hover-border-color, var(--hcg-input-hover-border-color, var(--hcg-cell-input-border-color, var(--ig-input-border-color-base))));
+    }
+
+    .hcg-pagination {
+        --ig-input-padding: var(--hcg-pagination-input-padding, var(--ig-input-padding-base));
+        --ig-input-font-weight: var(--hcg-pagination-input-font-weight, var(--hcg-input-font-weight, inherit));
+        --ig-input-font-size: var(--hcg-pagination-input-font-size, var(--hcg-input-font-size, inherit));
+        --ig-input-font-family: var(--hcg-pagination-input-font-family, var(--hcg-input-font-family, inherit));
+        --ig-input-color: var(--hcg-pagination-input-color, var(--ig-input-color-base));
+        --ig-input-text-align: var(--hcg-pagination-input-text-align, var(--ig-input-text-align-base));
+        --ig-input-border-radius: var(--hcg-pagination-input-border-radius, var(--ig-input-border-radius-base));
+        --ig-input-border-width: var(--hcg-pagination-input-border-width, var(--ig-input-border-width-base));
+        --ig-input-border-style: var(--hcg-pagination-input-border-style, var(--ig-input-border-style-base));
+        --ig-input-border-color: var(--hcg-pagination-input-border-color, var(--ig-input-border-color-base));
+        --ig-input-background: var(--hcg-pagination-input-background, var(--ig-input-background-base));
+        --ig-input-hover-color: var(--hcg-pagination-input-hover-color, var(--hcg-input-hover-color, var(--hcg-pagination-input-color, var(--ig-input-color-base))));
+        --ig-input-hover-background: var(--hcg-pagination-input-hover-background, var(--hcg-input-hover-background, var(--hcg-pagination-input-background, var(--ig-input-background-base))));
+        --ig-input-hover-border-color: var(--hcg-pagination-input-hover-border-color, var(--hcg-input-hover-border-color, var(--hcg-pagination-input-border-color, var(--ig-input-border-color-base))));
+    }
+
+    :where(.hcg-input) {
+        font-weight: var(--ig-input-font-weight);
+        font-size: var(--ig-input-font-size);
+        font-family: var(--ig-input-font-family);
+        text-align: var(--ig-input-text-align);
+        background: var(--ig-input-background);
+        color: var(--ig-input-color);
+        border-width: var(--ig-input-border-width);
+        border-style: var(--ig-input-border-style);
+        border-color: var(--ig-input-border-color);
+        border-radius: var(--ig-input-border-radius);
+        padding: var(--ig-input-padding);
+
+        &:hover:not(:disabled) {
+            color: var(--ig-input-hover-color);
+            background: var(--ig-input-hover-background);
+            border-color: var(--ig-input-hover-border-color);
+        }
+
+        &:focus-visible {
+            box-shadow: var(--ig-input-focus-ring);
+        }
+
+        &[type="checkbox"]:checked::before {
+            background-color: var(--ig-input-color);
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+.hcg-container {
+    --ig-link-color: var(--hcg-link-color, inherit);
+    --ig-link-text-decoration: var(--hcg-link-text-decoration, underline);
+    --ig-link-hovered-color: var(--hcg-link-hovered-color, var(--ig-link-color));
+    --ig-link-hovered-text-decoration: var(--hcg-link-hovered-text-decoration, none);
+    --ig-link-font-weight: var(--hcg-link-font-weight, inherit);
+
+    a {
+        color: var(--ig-link-color);
+        text-decoration: var(--ig-link-text-decoration);
+        font-weight: var(--ig-link-font-weight);
+    }
+
+    a:hover {
+        color: var(--ig-link-hovered-color);
+        text-decoration: var(--ig-link-hovered-text-decoration);
+    }
+}

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

@@ -0,0 +1,50 @@
+.hcg-container .hcg-menu-container,
+.highcharts-light .hcg-container .hcg-menu-container {
+    --ig-menu-item-hover-background: var(--hcg-menu-item-hover-background, #ffffff);
+    --ig-menu-item-hover-border-color: var(--hcg-menu-item-hover-border-color, #e8e8e8);
+    --ig-menu-item-active-background: var(--hcg-menu-item-active-background, #e1e3ff);
+    --ig-menu-item-active-border-color: var(--hcg-menu-item-active-border-color, #c3c8ff);
+    --ig-menu-item-divider-color: var(--hcg-menu-item-divider-color, #e8e8e8);
+}
+
+@media (prefers-color-scheme: dark) {
+    .hcg-container .hcg-menu-container {
+        --ig-menu-item-hover-background: var(--hcg-menu-item-hover-background, #3b3b3b);
+        --ig-menu-item-hover-border-color: var(--hcg-menu-item-hover-border-color, #4f4f4f);
+        --ig-menu-item-active-background: var(--hcg-menu-item-active-background, #3f4699);
+        --ig-menu-item-active-border-color: var(--hcg-menu-item-active-border-color, #4a55c9);
+        --ig-menu-item-divider-color: var(--hcg-menu-item-divider-color, #4f4f4f);
+    }
+}
+
+.highcharts-dark .hcg-container .hcg-menu-container {
+    --ig-menu-item-hover-background: var(--hcg-menu-item-hover-background, #3b3b3b);
+    --ig-menu-item-hover-border-color: var(--hcg-menu-item-hover-border-color, #4f4f4f);
+    --ig-menu-item-active-background: var(--hcg-menu-item-active-background, #3f4699);
+    --ig-menu-item-active-border-color: var(--hcg-menu-item-active-border-color, #4a55c9);
+    --ig-menu-item-divider-color: var(--hcg-menu-item-divider-color, #4f4f4f);
+}
+
+.hcg-container .hcg-menu-container {
+    .hcg-menu-item:focus-visible {
+        box-shadow: var(--ig-focus-ring);
+    }
+
+    .hcg-menu-item:focus-visible,
+    .hcg-menu-item:not(:disabled):hover,
+    .hcg-menu-item.highlighted {
+        background: var(--ig-menu-item-hover-background);
+        border-color: var(--ig-menu-item-hover-border-color);
+    }
+
+    .hcg-menu-item.active,
+    .hcg-menu-item.active:hover,
+    .hcg-menu-item.active.highlighted {
+        background: var(--ig-menu-item-active-background);
+        border-color: var(--ig-menu-item-active-border-color);
+    }
+
+    .hcg-menu-divider {
+        border-top-color: var(--ig-menu-item-divider-color);
+    }
+}

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

@@ -0,0 +1,12 @@
+.hcg-container .hcg-pagination {
+    background: var(--hcg-pagination-background, transparent);
+    color: var(--hcg-pagination-color, var(--ig-color));
+    font-weight: var(--hcg-pagination-font-weight, var(--ig-font-weight));
+    font-size: var(--hcg-pagination-font-size, var(--ig-font-size));
+    font-family: var(--hcg-pagination-font-family, var(--ig-font-family));
+    text-align: var(--hcg-pagination-text-align, var(--ig-text-align));
+    padding-top: var(--hcg-pagination-vertical-padding, var(--hcg-pagination-padding, var(--ig-vertical-padding)));
+    padding-right: var(--hcg-pagination-horizontal-padding, var(--hcg-pagination-padding, var(--ig-horizontal-padding)));
+    padding-bottom: var(--hcg-pagination-vertical-padding, var(--hcg-pagination-padding, var(--ig-vertical-padding)));
+    padding-left: var(--hcg-pagination-horizontal-padding, var(--hcg-pagination-padding, var(--ig-horizontal-padding)));
+}

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

@@ -0,0 +1,24 @@
+.hcg-container .hcg-popup,
+.highcharts-light .hcg-container .hcg-popup {
+    --ig-popup-color: var(--hcg-popup-color, var(--ig-default-color));
+    --ig-popup-background: var(--hcg-popup-background, #f6f6f6);
+    --ig-popup-border-color: var(--hcg-popup-border-color, #e8e8e8);
+}
+
+@media (prefers-color-scheme: dark) {
+    .hcg-container .hcg-popup {
+        --ig-popup-background: var(--hcg-popup-background, #272727);
+        --ig-popup-border-color: var(--hcg-popup-border-color, #4f4f4f);
+    }
+}
+
+.highcharts-dark .hcg-container .hcg-popup {
+    --ig-popup-background: var(--hcg-popup-background, #272727);
+    --ig-popup-border-color: var(--hcg-popup-border-color, #4f4f4f);
+}
+
+.hcg-container .hcg-popup {
+    color: var(--ig-popup-color);
+    background: var(--ig-popup-background);
+    border-color: var(--ig-popup-border-color);
+}