@kieler/klighd-core
Version:
Core KLighD diagram visualization with Sprotty
109 lines (105 loc) • 6.04 kB
CSS
/*
* KIELER - Kiel Integrated Environment for Layout Eclipse RichClient
*
* http://rtsys.informatik.uni-kiel.de/kieler
*
* Copyright 2021-2024 by
* + Kiel University
* + Department of Computer Science
* + Real-Time and Embedded Systems Group
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
*/
/* Set of CSS variables used in klighd-core. All variables should be prefixed with "kdc" */
:root {
/* Behavior and sizing variables */
--kdc-transition: 200ms ease-in-out;
--kdc-border-radius-default: 2px;
--kdc-font-size-base: 13px;
--kdc-sidebar-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
--kdc-sidebar-button-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
/* Color semantic theme token (no "dump" token like gray100 etc.
but rather scoped to where they should be applied). Allows for finer theme control. */
--kdc-color-sidebar-background: white;
--kdc-color-sidebar-trigger-background: white;
--kdc-color-sidebar-trigger-background-hover: hsl(0, 0%, 88%);
--kdc-color-sidebar-trigger-background-active: hsl(0, 0%, 81%);
--kdc-color-sidebar-hover-background: rgba(0, 0, 0, 0.15);
--kdc-color-sidebar-font-primary: hsl(0, 0%, 12%);
--kdc-color-sidebar-icon-primary: hsl(0, 0%, 24%);
--kdc-color-primary: #0552b5;
--kdc-color-findMatchBackground-default: rgb(255, 165, 0);
--kdc-color-findMatchForeground-default: rgb(0, 0, 0);
--kdc-color-findMatchBorder-default: rgb(90, 90, 90);
--kdc-color-findMatchHighlightBackground-default: rgb(255, 255, 0);
--kdc-color-findMatchHighlightForeground-default: rgb(0, 0, 0);
--kdc-color-findMatchHighlightBorder-default: rgb(113, 113, 113);
--kdc-color-findMatchBackground: var(--kdc-color-findMatchBackground-default);
--kdc-color-findMatchForeground: var(--kdc-color-findMatchForeground-default);
--kdc-color-findMatchBorder: var(--kdc-color-findMatchBorder-default);
--kdc-color-findMatchHighlightBackground: var(--kdc-color-findMatchHighlightBackground-default);
--kdc-color-findMatchHighlightForeground: var(--kdc-color-findMatchHighlightForeground-default);
--kdc-color-findMatchHighlightBorder: var(--kdc-color-findMatchHighlightBorder-default);
--kdc-color-input-background: white;
--kdc-color-input-border: hsl(0, 0%, 88%);
--kdc-color-input-foreground: hsl(0, 0%, 12%);
--kdc-color-input-placeholderForeground: hsl(0, 0%, 47%);
--kdc-color-inputOption-activeBackground: hsl(0, 0%, 88%);
--kdc-color-inputOption-activeBorder: hsl(0, 0%, 81%);
--kdc-color-inputOption-hoverBackground: hsl(0, 0%, 88%);
--kdc-color-focusBorder: var(--kdc-color-primary);
--kdc-color-errorForeground: rgb(226, 4, 4);
--kdc-color-list-activeSelectionBackground: hsl(0, 0%, 88%);
--kdc-color-list-activeSelectionForeground: hsl(0, 0%, 12%);
--kdc-color-list-focusOutline: var(--kdc-color-primary);
--kdc-color-list-hoverBackground: hsl(0, 0%, 88%);
--kdc-color-list-hoverForeground: hsl(0, 0%, 12%);
--kdc-color-selection-background: rgb(0, 127, 212);
--kdc-color-breadcrumb-foreground: hsl(0, 0%, 12%);
--kdc-color-breadcrumb-background: var(--kdc-color-sidebar-background);
}
@media (prefers-color-scheme: dark) {
:root {
--kdc-color-sidebar-background: rgb(37, 37, 37);
--kdc-color-sidebar-trigger-background: rgb(37, 37, 37);
--kdc-color-sidebar-trigger-background-hover: rgb(4, 57, 94);
--kdc-color-sidebar-trigger-background-active: rgb(55, 55, 61);
--kdc-color-sidebar-hover-background: rgba(90, 93, 94, 0.31);
--kdc-color-sidebar-font-primary: rgb(204, 204, 204);
--kdc-color-sidebar-icon-primary: rgb(197, 197, 197);
--kdc-color-primary: rgb(0, 127, 212);
--kdc-color-findMatchBackground-default: rgb(255, 215, 140);
--kdc-color-findMatchForeground-default: rgb(0, 0, 0);
--kdc-color-findMatchBorder-default: rgb(231, 231, 231);
--kdc-color-findMatchHighlightBackground-default: rgb(255, 255, 166);
--kdc-color-findMatchHighlightForeground-default: rgb(0, 0, 0);
--kdc-color-findMatchHighlightBorder-default: rgb(223, 223, 223);
--kdc-color-findMatchBackground: var(--kdc-color-findMatchBackground-default);
--kdc-color-findMatchForeground: var(--kdc-color-findMatchForeground-default);
--kdc-color-findMatchBorder: var(--kdc-color-findMatchBorder-default);
--kdc-color-findMatchHighlightBackground: var(--kdc-color-findMatchHighlightBackground-default);
--kdc-color-findMatchHighlightForeground: var(--kdc-color-findMatchHighlightForeground-default);
--kdc-color-findMatchHighlightBorder: var(--kdc-color-findMatchHighlightBorder-default);
--kdc-color-input-background: rgb(37, 37, 37);
--kdc-color-input-border: rgb(4, 57, 94);
--kdc-color-input-foreground: rgb(204, 204, 204);
--kdc-color-input-placeholderForeground: hsl(0, 0%, 86%);
--kdc-color-inputOption-activeBackground: rgb(4, 57, 94);
--kdc-color-inputOption-activeBorder: hsl(0, 0%, 81%);
--kdc-color-inputOption-hoverBackground: rgb(4, 57, 94);
--kdc-color-focusBorder: var(--kdc-color-primary);
--kdc-color-errorForeground: rgb(245, 117, 117);
--kdc-color-list-activeSelectionBackground: rgb(4, 57, 94);
--kdc-color-list-activeSelectionForeground: rgb(204, 204, 204);
--kdc-color-list-focusOutline: var(--kdc-color-primary);
--kdc-color-list-hoverBackground: rgb(4, 57, 94);
--kdc-color-list-hoverForeground: rgb(204, 204, 204);
--kdc-color-selection-background: rgb(62, 177, 254);
--kdc-color-breadcrumb-foreground: rgb(204, 204, 204);
--kdc-color-breadcrumb-background: var(--kdc-color-sidebar-background);
}
}