handsontable/styles/ht-theme-classic-no-icons.css

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

/*!
 * Copyright (c) HANDSONCODE sp. z o. o.
 *
 * HANDSONTABLE is a software distributed by HANDSONCODE sp. z o. o., a Polish corporation based in
 * Gdynia, Poland, at Aleja Zwyciestwa 96-98, registered by the District Court in Gdansk under number
 * 538651, EU tax ID number: PL5862294002, share capital: PLN 62,800.00.
 *
 * This software is protected by applicable copyright laws, including international treaties, and dual-
 * licensed - depending on whether your use for commercial purposes, meaning intended for or
 * resulting in commercial advantage or monetary compensation, or not.
 *
 * If your use is strictly personal or solely for evaluation purposes, meaning for the purposes of testing
 * the suitability, performance, and usefulness of this software outside the production environment,
 * you agree to be bound by the terms included in the "handsontable-non-commercial-license.pdf" file.
 *
 * Your use of this software for commercial purposes is subject to the terms included in an applicable
 * license agreement.
 *
 * In any case, you must not make any such use of this software as to develop software which may be
 * considered competitive with this software.
 *
 * UNLESS EXPRESSLY AGREED OTHERWISE, HANDSONCODE PROVIDES THIS SOFTWARE ON AN "AS IS"
 * BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, AND IN NO EVENT AND UNDER NO
 * LEGAL THEORY, SHALL HANDSONCODE BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY DIRECT,
 * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
 * USE OR INABILITY TO USE THIS SOFTWARE.
 *
 * Version: 16.2.0
 * Release date: 25/11/2025 (built at 20/11/2025 13:27:05)
 */
.ht-theme-classic,
.ht-theme-classic-dark,
.ht-theme-classic-dark-auto {
  --ht-color-transparent-0: rgba(255, 255, 255, 0);
  --ht-color-transparent-80: rgba(255, 255, 255, 0.80);
  --ht-color-gray-100: #ffffff;
  --ht-color-gray-200: #f0f0f0;
  --ht-color-gray-250: #dcdcdc;
  --ht-color-gray-300: #cccccc;
  --ht-color-gray-350: #c6c6c6;
  --ht-color-gray-400: #999999;
  --ht-color-gray-500: #777777;
  --ht-color-gray-800: #373737;
  --ht-color-gray-900: #0f0f10;
  --ht-color-gray-800-40: rgba(55, 55, 55, 0.40);
  --ht-color-gray-800-8: rgba(55, 55, 55, 0.08);
  --ht-color-gray-800-4: rgba(55, 55, 55, 0.04);
  --ht-color-gray-800-25: rgba(55, 55, 55, 0.25);
  --ht-color-accent-300: #8eb0e7;
  --ht-color-accent-350: #3e7ee1;
  --ht-color-accent-400: #5292f7;
  --ht-color-accent-500: #3e7ee3;
  --ht-color-accent-400-40: rgba(82, 146, 247, 0.40);
  --ht-color-notification-search: rgba(251, 233, 82, 0.80);
  --ht-color-notification-error: rgba(250, 77, 50, 0.20);
  --ht-color-notification-success: rgba(55, 188, 108, 0.20);
  --ht-color-notification-warning: rgba(251, 233, 82, 0.20);
  --ht-color-notification-informational: rgba(142, 176, 231, 0.20);
  --ht-common-background-secondary: var(--ht-color-gray-200);
  --ht-common-foreground: var(--ht-color-gray-800);
  --ht-common-foreground-secondary: var(--ht-color-gray-500);
  --ht-common-background: var(--ht-color-gray-100);
  --ht-common-border: var(--ht-color-gray-300);
  --ht-common-accent: var(--ht-color-accent-400);
  --ht-common-disabled: var(--ht-color-gray-400);
  --ht-common-read-only: var(--ht-color-gray-500);
  --ht-common-placeholder: var(--ht-color-gray-400);
  --ht-common-shadow: var(--ht-color-gray-800-8);
  --ht-common-overlay: var(--ht-color-transparent-80);
  --ht-font-size: 13px;
  --ht-font-size-small: 11px;
  --ht-line-height: 21px;
  --ht-line-height-small: 16px;
  --ht-font-weight: 400;
  --ht-letter-spacing: 0;
  --ht-gap-size: 2px;
  --ht-icon-size: 12px;
  --ht-table-transition: 0s;
  --ht-border-color: var(--ht-common-border);
  --ht-accent-color: var(--ht-common-accent);
  --ht-foreground-color: var(--ht-common-foreground);
  --ht-foreground-secondary-color: var(--ht-common-foreground-secondary);
  --ht-background-color: var(--ht-common-background);
  --ht-placeholder-color: var(--ht-common-placeholder);
  --ht-read-only-color: var(--ht-common-read-only);
  --ht-disabled-color: var(--ht-common-disabled);
  --ht-shadow-color: var(--ht-common-border);
  --ht-shadow-x: 1px;
  --ht-shadow-y: 1px;
  --ht-shadow-blur: 0;
  --ht-bar-foreground-color: var(--ht-common-foreground);
  --ht-bar-background-color: var(--ht-common-background-secondary);
  --ht-bar-horizontal-padding: 8px;
  --ht-bar-vertical-padding: 4px;
  --ht-cell-horizontal-border-color: var(--ht-common-border);
  --ht-cell-vertical-border-color: var(--ht-common-border);
  --ht-wrapper-border-width: 0;
  --ht-wrapper-border-radius: 0;
  --ht-wrapper-border-color: var(--ht-common-border);
  --ht-row-header-odd-background-color: var(--ht-color-transparent-0);
  --ht-row-header-even-background-color: var(--ht-color-transparent-0);
  --ht-row-cell-odd-background-color: var(--ht-color-transparent-0);
  --ht-row-cell-even-background-color: var(--ht-color-transparent-0);
  --ht-cell-horizontal-padding: 6px;
  --ht-cell-vertical-padding: 1px;
  --ht-cell-editor-border-width: 2px;
  --ht-cell-editor-border-color: var(--ht-common-accent);
  --ht-cell-editor-foreground-color: var(--ht-color-gray-900);
  --ht-cell-editor-background-color: var(--ht-common-background);
  --ht-cell-editor-shadow-blur-radius: 0;
  --ht-cell-editor-shadow-color: var(--ht-common-accent);
  --ht-cell-success-background-color: var(--ht-color-notification-success);
  --ht-cell-error-background-color: var(--ht-color-notification-error);
  --ht-cell-read-only-background-color: var(--ht-color-transparent-0);
  --ht-cell-selection-border-color: var(--ht-common-accent);
  --ht-cell-selection-background-color: var(--ht-color-accent-350);
  --ht-cell-autofill-size: 6px;
  --ht-cell-autofill-border-width: 1px;
  --ht-cell-autofill-border-radius: 0;
  --ht-cell-autofill-border-color: var(--ht-common-background);
  --ht-cell-autofill-background-color: var(--ht-common-accent);
  --ht-cell-autofill-fill-border-color: var(--ht-common-foreground);
  --ht-cell-mobile-handle-size: 12px;
  --ht-cell-mobile-handle-border-width: 1px;
  --ht-cell-mobile-handle-border-radius: 6px;
  --ht-cell-mobile-handle-border-color: var(--ht-common-accent);
  --ht-cell-mobile-handle-background-color: var(--ht-color-accent-400-40);
  --ht-resize-indicator-color: var(--ht-color-gray-400);
  --ht-move-backlight-color: var(--ht-color-gray-800-25);
  --ht-move-indicator-color: var(--ht-color-gray-400);
  --ht-hidden-indicator-color: var(--ht-color-gray-400);
  --ht-scrollbar-border-radius: 8px;
  --ht-scrollbar-track-color: var(--ht-common-background-secondary);
  --ht-scrollbar-thumb-color: var(--ht-color-gray-800-40);
  --ht-header-font-weight: var(--ht-font-weight);
  --ht-header-foreground-color: var(--ht-common-foreground);
  --ht-header-background-color: var(--ht-common-background-secondary);
  --ht-header-highlighted-shadow-size: 0;
  --ht-header-highlighted-foreground-color: var(--ht-common-foreground);
  --ht-header-highlighted-background-color: var(--ht-color-gray-250);
  --ht-header-active-border-color: var(--ht-common-border);
  --ht-header-active-foreground-color: var(--ht-color-gray-900);
  --ht-header-active-background-color: var(--ht-color-accent-300);
  --ht-header-filter-background-color: var(--ht-color-notification-success);
  --ht-header-row-foreground-color: var(--ht-common-foreground);
  --ht-header-row-background-color: var(--ht-common-background-secondary);
  --ht-header-row-highlighted-foreground-color: var(--ht-common-foreground);
  --ht-header-row-highlighted-background-color: var(--ht-color-gray-250);
  --ht-header-row-active-foreground-color: var(--ht-color-gray-900);
  --ht-header-row-active-background-color: var(--ht-color-accent-300);
  --ht-checkbox-size: var(--ht-icon-size);
  --ht-checkbox-border-radius: 2px;
  --ht-checkbox-border-color: var(--ht-color-gray-400);
  --ht-checkbox-background-color: var(--ht-common-background);
  --ht-checkbox-icon-color: var(--ht-color-transparent-0);
  --ht-checkbox-focus-border-color: var(--ht-color-gray-400);
  --ht-checkbox-focus-background-color: var(--ht-common-background);
  --ht-checkbox-focus-icon-color: var(--ht-color-transparent-0);
  --ht-checkbox-focus-ring-color: var(--ht-common-accent);
  --ht-checkbox-disabled-border-color: var(--ht-color-gray-400);
  --ht-checkbox-disabled-background-color: var(--ht-color-gray-350);
  --ht-checkbox-disabled-icon-color: var(--ht-color-transparent-0);
  --ht-checkbox-checked-border-color: var(--ht-color-accent-350);
  --ht-checkbox-checked-background-color: var(--ht-common-accent);
  --ht-checkbox-checked-icon-color: var(--ht-common-background);
  --ht-checkbox-checked-focus-border-color: var(--ht-common-background);
  --ht-checkbox-checked-focus-background-color: var(--ht-common-accent);
  --ht-checkbox-checked-focus-icon-color: var(--ht-common-background);
  --ht-checkbox-checked-disabled-border-color: var(--ht-color-gray-400);
  --ht-checkbox-checked-disabled-background-color: var(--ht-color-gray-350);
  --ht-checkbox-checked-disabled-icon-color: var(--ht-common-disabled);
  --ht-checkbox-indeterminate-border-color: var(--ht-color-accent-350);
  --ht-checkbox-indeterminate-background-color: var(--ht-common-accent);
  --ht-checkbox-indeterminate-icon-color: var(--ht-common-background);
  --ht-checkbox-indeterminate-focus-border-color: var(--ht-color-gray-100);
  --ht-checkbox-indeterminate-focus-background-color: var(--ht-common-accent);
  --ht-checkbox-indeterminate-focus-icon-color: var(--ht-common-background);
  --ht-checkbox-indeterminate-disabled-border-color: var(--ht-color-gray-400);
  --ht-checkbox-indeterminate-disabled-background-color: var(--ht-color-gray-350);
  --ht-checkbox-indeterminate-disabled-icon-color: var(--ht-common-disabled);
  --ht-radio-size: var(--ht-icon-size);
  --ht-radio-border-color: var(--ht-color-gray-400);
  --ht-radio-background-color: var(--ht-common-background);
  --ht-radio-icon-color: var(--ht-color-transparent-0);
  --ht-radio-focus-border-color: var(--ht-color-gray-400);
  --ht-radio-focus-background-color: var(--ht-common-background);
  --ht-radio-focus-icon-color: var(--ht-color-transparent-0);
  --ht-radio-focus-ring-color: var(--ht-common-accent);
  --ht-radio-disabled-border-color: var(--ht-color-gray-400);
  --ht-radio-disabled-background-color: var(--ht-color-gray-350);
  --ht-radio-disabled-icon-color: var(--ht-color-transparent-0);
  --ht-radio-checked-border-color: var(--ht-common-accent);
  --ht-radio-checked-background-color: var(--ht-common-background);
  --ht-radio-checked-icon-color: var(--ht-common-accent);
  --ht-radio-checked-focus-border-color: var(--ht-color-accent-350);
  --ht-radio-checked-focus-background-color: var(--ht-common-background);
  --ht-radio-checked-focus-icon-color: var(--ht-common-accent);
  --ht-radio-checked-disabled-border-color: var(--ht-color-gray-400);
  --ht-radio-checked-disabled-background-color: var(--ht-color-gray-350);
  --ht-radio-checked-disabled-icon-color: var(--ht-common-disabled);
  --ht-icon-button-border-radius: 2px;
  --ht-icon-button-large-border-radius: 2px;
  --ht-icon-button-large-padding: 2px;
  --ht-icon-button-border-color: var(--ht-color-gray-350);
  --ht-icon-button-background-color: var(--ht-common-background-secondary);
  --ht-icon-button-icon-color: var(--ht-color-gray-400);
  --ht-icon-button-hover-border-color: var(--ht-color-gray-500);
  --ht-icon-button-hover-background-color: var(--ht-common-background-secondary);
  --ht-icon-button-hover-icon-color: var(--ht-color-gray-500);
  --ht-icon-button-active-border-color: var(--ht-color-gray-350);
  --ht-icon-button-active-background-color: var(--ht-common-background-secondary);
  --ht-icon-button-active-icon-color: var(--ht-color-gray-400);
  --ht-icon-button-active-hover-border-color: var(--ht-color-gray-500);
  --ht-icon-button-active-hover-background-color: var(--ht-common-background-secondary);
  --ht-icon-button-active-hover-icon-color: var(--ht-color-gray-500);
  --ht-collapse-button-border-radius: 16px;
  --ht-collapse-button-open-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-open-background-color: var(--ht-common-background);
  --ht-collapse-button-open-icon-color: var(--ht-color-gray-400);
  --ht-collapse-button-open-icon-active-color: var(--ht-color-gray-400);
  --ht-collapse-button-open-hover-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-open-hover-background-color: var(--ht-common-background);
  --ht-collapse-button-open-hover-icon-color: var(--ht-color-gray-400);
  --ht-collapse-button-open-hover-icon-active-color: var(--ht-color-gray-400);
  --ht-collapse-button-close-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-close-background-color: var(--ht-common-background-secondary);
  --ht-collapse-button-close-icon-color: var(--ht-color-gray-400);
  --ht-collapse-button-close-icon-active-color: var(--ht-color-gray-400);
  --ht-collapse-button-close-hover-border-color: var(--ht-color-gray-350);
  --ht-collapse-button-close-hover-background-color: var(--ht-common-background-secondary);
  --ht-collapse-button-close-hover-icon-color: var(--ht-color-gray-400);
  --ht-collapse-button-close-hover-icon-active-color: var(--ht-color-gray-400);
  --ht-button-border-radius: 2px;
  --ht-button-horizontal-padding: 8px;
  --ht-button-vertical-padding: 2px;
  --ht-primary-button-border-color: var(--ht-color-transparent-0);
  --ht-primary-button-foreground-color: var(--ht-common-background);
  --ht-primary-button-background-color: var(--ht-common-accent);
  --ht-primary-button-disabled-border-color: var(--ht-color-transparent-0);
  --ht-primary-button-disabled-foreground-color: var(--ht-common-disabled);
  --ht-primary-button-disabled-background-color: var(--ht-color-gray-250);
  --ht-primary-button-hover-border-color: var(--ht-color-transparent-0);
  --ht-primary-button-hover-foreground-color: var(--ht-common-background);
  --ht-primary-button-hover-background-color: var(--ht-color-accent-500);
  --ht-primary-button-focus-border-color: var(--ht-common-background);
  --ht-primary-button-focus-foreground-color: var(--ht-common-background);
  --ht-primary-button-focus-background-color: var(--ht-common-accent);
  --ht-secondary-button-border-color: var(--ht-color-transparent-0);
  --ht-secondary-button-foreground-color: var(--ht-common-foreground);
  --ht-secondary-button-background-color: var(--ht-common-background);
  --ht-secondary-button-disabled-border-color: var(--ht-color-transparent-0);
  --ht-secondary-button-disabled-foreground-color: var(--ht-common-disabled);
  --ht-secondary-button-disabled-background-color: var(--ht-color-gray-250);
  --ht-secondary-button-hover-border-color: var(--ht-color-transparent-0);
  --ht-secondary-button-hover-foreground-color: var(--ht-common-foreground);
  --ht-secondary-button-hover-background-color: var(--ht-common-background-secondary);
  --ht-secondary-button-focus-border-color: var(--ht-color-transparent-0);
  --ht-secondary-button-focus-foreground-color: var(--ht-common-foreground);
  --ht-secondary-button-focus-background-color: var(--ht-common-background-secondary);
  --ht-comments-textarea-horizontal-padding: 8px;
  --ht-comments-textarea-vertical-padding: 2px;
  --ht-comments-textarea-border-width: 1px;
  --ht-comments-textarea-border-color: var(--ht-common-border);
  --ht-comments-textarea-foreground-color: var(--ht-common-foreground);
  --ht-comments-textarea-background-color: var(--ht-common-background);
  --ht-comments-textarea-focus-border-width: 1px;
  --ht-comments-textarea-focus-border-color: var(--ht-common-accent);
  --ht-comments-textarea-focus-foreground-color: var(--ht-common-foreground);
  --ht-comments-textarea-focus-background-color: var(--ht-common-background);
  --ht-comments-indicator-size: 6px;
  --ht-comments-indicator-color: var(--ht-common-foreground);
  --ht-license-horizontal-padding: var(--ht-bar-horizontal-padding);
  --ht-license-vertical-padding: var(--ht-bar-vertical-padding);
  --ht-license-foreground-color: var(--ht-common-foreground);
  --ht-license-background-color: var(--ht-common-background-secondary);
  --ht-link-color: var(--ht-color-accent-500);
  --ht-link-hover-color: var(--ht-color-accent-500);
  --ht-input-border-width: 1px;
  --ht-input-border-radius: var(--ht-checkbox-border-radius);
  --ht-input-horizontal-padding: 8px;
  --ht-input-vertical-padding: 2px;
  --ht-input-border-color: var(--ht-common-border);
  --ht-input-foreground-color: var(--ht-common-foreground);
  --ht-input-background-color: var(--ht-common-background-secondary);
  --ht-input-hover-border-color: var(--ht-common-border);
  --ht-input-hover-foreground-color: var(--ht-common-foreground);
  --ht-input-hover-background-color: var(--ht-common-background-secondary);
  --ht-input-disabled-border-color: var(--ht-common-border);
  --ht-input-disabled-foreground-color: var(--ht-common-disabled);
  --ht-input-disabled-background-color: var(--ht-color-gray-350);
  --ht-input-focus-border-color: var(--ht-common-accent);
  --ht-input-focus-foreground-color: var(--ht-common-foreground);
  --ht-input-focus-background-color: var(--ht-common-background-secondary);
  --ht-menu-border-width: 1px;
  --ht-menu-border-radius: 0;
  --ht-menu-horizontal-padding: 0;
  --ht-menu-vertical-padding: 2px;
  --ht-menu-item-horizontal-padding: 8px;
  --ht-menu-item-vertical-padding: 2px;
  --ht-menu-border-color: var(--ht-common-border);
  --ht-menu-shadow-x: var(--ht-shadow-x);
  --ht-menu-shadow-y: var(--ht-shadow-y);
  --ht-menu-shadow-blur: var(--ht-shadow-blur);
  --ht-menu-shadow-color: var(--ht-common-border);
  --ht-menu-item-hover-color: var(--ht-color-gray-800-4);
  --ht-menu-item-active-color: var(--ht-color-gray-800-8);
  --ht-dialog-semi-transparent-background-color: var(--ht-common-overlay);
  --ht-dialog-solid-background-color: var(--ht-common-background);
  --ht-dialog-content-padding-horizontal: 8px;
  --ht-dialog-content-padding-vertical: 8px;
  --ht-dialog-content-border-radius: 8px;
  --ht-dialog-content-background-color: var(--ht-common-background-secondary);
  --ht-pagination-bar-foreground-color: var(--ht-common-foreground);
  --ht-pagination-bar-background-color: var(--ht-common-background-secondary);
  --ht-pagination-bar-horizontal-padding: var(--ht-bar-horizontal-padding);
  --ht-pagination-bar-vertical-padding: var(--ht-bar-vertical-padding);
}

/* Dark mode */
.ht-theme-classic-dark {
  --ht-color-transparent-0: rgba(0, 0, 0, 0);
  --ht-color-transparent-80: rgba(0, 0, 0, 0.80);
  --ht-color-gray-100: #0f0f10;
  --ht-color-gray-200: #222222;
  --ht-color-gray-250: #313131;
  --ht-color-gray-300: #404040;
  --ht-color-gray-350: #5c5c5c;
  --ht-color-gray-400: #777777;
  --ht-color-gray-500: #999999;
  --ht-color-gray-800: #dcdcdc;
  --ht-color-gray-900: #ffffff;
  --ht-color-gray-800-40: rgba(220, 220, 220, 0.40);
  --ht-color-gray-800-8: rgba(220, 220, 220, 0.16);
  --ht-color-gray-800-4: rgba(220, 220, 220, 0.12);
  --ht-color-gray-800-25: rgba(220, 220, 220, 0.25);
  --ht-color-accent-300: #6985b9;
  --ht-color-accent-350: #8ec1ff;
  --ht-color-accent-400: #7aadff;
  --ht-color-accent-500: #6a9bff;
  --ht-color-accent-400-40: rgba(122, 173, 255, 0.40);
  --ht-color-notification-search: rgba(255, 231, 34, 0.30);
  --ht-color-notification-error: rgba(255, 42, 52, 0.30);
  --ht-color-notification-success: rgba(66, 190, 101, 0.30);
  --ht-color-notification-warning: rgba(241, 194, 28, 0.30);
  --ht-color-notification-informational: rgba(122, 173, 255, 0.30);
  --ht-common-background-secondary: var(--ht-color-gray-200);
  --ht-common-foreground: var(--ht-color-gray-800);
  --ht-common-foreground-secondary: var(--ht-color-gray-500);
  --ht-common-background: var(--ht-color-gray-100);
  --ht-common-border: var(--ht-color-gray-300);
  --ht-common-accent: var(--ht-color-accent-400);
  --ht-common-disabled: var(--ht-color-gray-400);
  --ht-common-read-only: var(--ht-color-gray-500);
  --ht-common-placeholder: var(--ht-color-gray-400);
  --ht-common-shadow: var(--ht-color-transparent-80);
  --ht-common-overlay: var(--ht-color-transparent-80);
}

/* Auto dark mode */
@media (prefers-color-scheme: dark) {
  .ht-theme-classic-dark-auto {
    --ht-color-transparent-0: rgba(0, 0, 0, 0);
    --ht-color-transparent-80: rgba(0, 0, 0, 0.80);
    --ht-color-gray-100: #0f0f10;
    --ht-color-gray-200: #222222;
    --ht-color-gray-250: #313131;
    --ht-color-gray-300: #404040;
    --ht-color-gray-350: #5c5c5c;
    --ht-color-gray-400: #777777;
    --ht-color-gray-500: #999999;
    --ht-color-gray-800: #dcdcdc;
    --ht-color-gray-900: #ffffff;
    --ht-color-gray-800-40: rgba(220, 220, 220, 0.40);
    --ht-color-gray-800-8: rgba(220, 220, 220, 0.16);
    --ht-color-gray-800-4: rgba(220, 220, 220, 0.12);
    --ht-color-gray-800-25: rgba(220, 220, 220, 0.25);
    --ht-color-accent-300: #6985b9;
    --ht-color-accent-350: #8ec1ff;
    --ht-color-accent-400: #7aadff;
    --ht-color-accent-500: #6a9bff;
    --ht-color-accent-400-40: rgba(122, 173, 255, 0.40);
    --ht-color-notification-search: rgba(255, 231, 34, 0.30);
    --ht-color-notification-error: rgba(255, 42, 52, 0.30);
    --ht-color-notification-success: rgba(66, 190, 101, 0.30);
    --ht-color-notification-warning: rgba(241, 194, 28, 0.30);
    --ht-color-notification-informational: rgba(122, 173, 255, 0.30);
    --ht-common-background-secondary: var(--ht-color-gray-200);
    --ht-common-foreground: var(--ht-color-gray-800);
    --ht-common-foreground-secondary: var(--ht-color-gray-500);
    --ht-common-background: var(--ht-color-gray-100);
    --ht-common-border: var(--ht-color-gray-300);
    --ht-common-accent: var(--ht-color-accent-400);
    --ht-common-disabled: var(--ht-color-gray-400);
    --ht-common-read-only: var(--ht-color-gray-500);
    --ht-common-placeholder: var(--ht-color-gray-400);
    --ht-common-shadow: var(--ht-color-transparent-80);
    --ht-common-overlay: var(--ht-color-transparent-80);
  }
}