Theming
Unlock creativity with our powerful theming system! Effortlessly customize the look and feel of HybridForms using intuitive themes, CSS variables for dynamic styling, and extensive style customization options.
Color Palettes​
color-palettes.scss
:where(:root) {
// color scales
// blue scale based on primary
--blue-50: #f2f7fd;
--blue-100: #e3edfb;
--blue-150: #d3e5f3; //primary-light
//--blue-200: #c1dcf6;
// neu
--blue-200: #d5ebfa; // primary-light-20
--blue-250: #a7bed5; // Primary-dirty
--blue-299: #7fb8e6; //* redesign, rahmenfarbe dashboard listpage
--blue-300: #66a0d2;
--blue-400: #4d9ee3;
--blue-500: #0072ce; // primary
--blue-600: #1866b1;
--blue-700: #145190;
--blue-800: #154677;
--blue-850: #175082; // primary-dark
--blue-900: #173b63;
--blue-950: #0f2642;
--blue-1000: #233543; //* redesign, background color required fields
// neu
--mint-green: #ccebe9;
--mint-green-50: #f1fafa;
--mint-green-100: #ccebe9;
--mint-green-200: #bde4e2;
--mint-green-300: #8fd1cf;
--mint-green-400: #5ab6b4;
--mint-green-500: #3e9c9c;
--mint-green-600: #368184;
--mint-green-700: #31696d;
--mint-green-800: #2f575b;
--mint-green-900: #2b494e;
--mint-green-950: #183034;
--mint-green-dark-500: #2a5d5f;
--mint-green-dark-700: #00454a;
//yellorange
--yellorange-50: #fff9eb;
--yellorange-100: #ffedc6;
--yellorange-125: #fef5e2; // background-highlight-area
--yellorange-150: #ffdd9e; // warning-light
--yellorange-200: #ffd988;
--yellorange-225: #f9cf77; // hightlighting-border color
--yellorange-250: #F89303;
--yellorange-300: #d28900; //warning
--yellorange-350: #ffbe67;
--yellorange-400: #ffa620;
--yellorange-500: #f98207;
--yellorange-600: #dd5c02;
--yellorange-700: #b73e06;
--yellorange-800: #942f0c;
--yellorange-900: #7a280d;
--yellorange-950: #461202;
--brownish-500: #5c461a;
--brownish-700: #3a2f1a;
// red
--red-100: #FDE6E5;
--red-200: #ff9999;
--red-300: #fd8484;
--red-400: #ff6666;
--red-500: #ff0000; // danger
--red-600: #EB0D00;
--red-700: #cc0000;
--red-800: #b30000;
--red-900: #a80011;
// green
--forest-green-50: #f2fcf1;
--forest-green-100: #defade;
--forest-green-200: #c0f3bf;
--forest-green-300: #8fe78e;
--forest-green-350: #87c79f;
--forest-green-400: #55d355;
--forest-green-450: #62a87c;
--forest-green-500: #2eb92e;
--forest-green-550: #457556;
--forest-green-600: #24ab24; // success
--forest-green-700: #1d781d;
--forest-green-800: #1c5f1c;
--forest-green-900: #194e1a;
--forest-green-950: #082b0a;
// gray
--gray-50: #F8F8F8;
--gray-75: #f6f6f6; //* light-10
--gray-100: #efefef;
--gray-101: #e0e0e0; //* textcolor dark
--gray-150: #ededed; //print-border-color
--gray-175: #e6e6e6; //print-border-color
--gray-200: #dcdcdc; // light-20
--gray-250: #cccccc; // light-25
--gray-300: #bdbdbd; // light-30
--gray-400: #989898;
--gray-450: #929694;
--gray-500: #7c7c7c;
--gray-550: #757575;
--gray-600: #656565;
--gray-701: #5f5f5f; //* zB, --header-icon-bg
--gray-700: #525252;
--gray-800: #464646;
--gray-850: #333333;
--gray-900: #3d3d3d;
--gray-925: #333333;
--gray-950: #272727; //* li item background
--gray-970: #212121;
--gray-990: #1d1d1d;
--gray-999: #121212; //* body background
--gray-200-alpha-50: rgba(220, 220, 220, 0);
--white-color: #ffffff;
--black-color: #000000;
--gradient-blue-green: linear-gradient(90deg, #175082 53%, #0c6577 100%);
// shadows
--shadow-key-umbra-opacity: 0.2;
--shadow-key-penumbra-opacity: 0.14;
--shadow-ambient-shadow-opacity: 0.12;
--shadow-0: none;
--shadow-1: 0px 2px 1px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 1px 1px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 3px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-2: 0px 3px 1px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 2px 2px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 5px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-3: 0px 3px 3px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 3px 4px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 8px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-4: 0px 2px 4px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 4px 5px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 10px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-5: 0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 5px 8px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 14px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-6: 0px 3px 5px -1px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 6px 10px 0px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 1px 18px 0px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-7: 0px 4px 5px -2px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 7px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 2px 16px 1px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-8: 0px 5px 5px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 8px 10px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 3px 14px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-9: 0px 5px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 9px 12px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 3px 16px 2px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-10: 0px 6px 6px -3px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 10px 14px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 4px 18px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-11: 0px 6px 7px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 11px 15px 1px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 4px 20px 3px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-12: 0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 12px 17px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 5px 22px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-13: 0px 7px 8px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 13px 19px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 5px 24px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-14: 0px 7px 9px -4px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 14px 21px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 5px 26px 4px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-15: 0px 8px 9px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 15px 22px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 6px 28px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-16: 0px 8px 10px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 16px 24px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 6px 30px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-17: 0px 8px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 17px 26px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 6px 32px 5px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-18: 0px 9px 11px -5px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 18px 28px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 7px 34px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-19: 0px 9px 12px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 19px 29px 2px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 7px 36px 6px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-20: 0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 20px 31px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 8px 38px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-21: 0px 10px 13px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 21px 33px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 8px 40px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-22: 0px 10px 14px -6px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 22px 35px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 8px 42px 7px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-23: 0px 11px 14px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 23px 36px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 9px 44px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
--shadow-24: 0px 11px 15px -7px rgba(0, 0, 0, var(--shadow-key-umbra-opacity)),
0px 24px 38px 3px rgba(0, 0, 0, var(--shadow-key-penumbra-opacity)),
0px 9px 46px 8px rgba(0, 0, 0, var(--shadow-ambient-shadow-opacity));
}
Default Variables​
css-variables.scss
:where(:root) {
/* SAVE-AREAS:
needed for getting th safe-area-inset-top value programmatically in Scaler.ts
in JS, eg: getComputedStyle(document.documentElement).getPropertyValue('--sat')
*/
--sat: env(safe-area-inset-top);
--sar: env(safe-area-inset-right);
--sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left);
--theme: light;
--bg-body: var(--blue-200);
--bg-body-sec: var(--color-light);
// Splashscreen
--bg-splash: var(--bg-body-sec);
--progress-splash: var(--color-primary);
// COLORS
// base definitions
--color-primary: var(--blue-500);
--color-primary-bg: var(--color-primary);
--color-primary-light: color-mix(in srgb, var(--color-primary) 20%, var(--white-color));
--color-primary-dark: color-mix(in srgb, var(--color-primary) 65%, var(--black-color));
--color-secondary: var(--mint-green-300);
--color-secondary-light: var(--mint-green-200);
--color-tertiary: var(--yellorange-200);
--color-tertiary-light: var(--yellorange-100);
--color-tertiary-dark: var(--yellorange-250);
--color-warning: var(--yellorange-250);
--color-warning-light: var(--yellorange-150);
--color-warning-dark: var(--yellorange-400);
--color-warning-text: var(--gray-925);
--color-error: var(--red-600);
--color-error-text: var(--color-light);
--color-danger: var(--red-500);
--color-danger-light: var(--red-100);
--color-success: var(--forest-green-600);
--color-success-dark: var(--forest-green-800);
--color-highlight: var(--yellorange-100);
--color-hyperlink: var(--color-primary);
--color-hyperlink-hover: var(--color-primary-dark);
// checkbox und radiobox colors
--color-radio-checkbox-bg: var(--color-light);
--color-radio-checkbox-bg-disabled: var(--gray-100);
--color-radio-checkbox: var(--blue-500);
--color-radio-checkbox-checked: var(--blue-500);
//light colors
--bg-light: var(--white-color);
--bordercolor-light: var(--white-color);
--textcolor-light: var(--white-color);
--color-light: var(--white-color);
--color-light-inverted: var(--white-color);
// dark colors
--textcolor-dark: var(--black-color);
--bordercolor-dark: var(--black-color);
--bg-dark: var(--black-color);
--overlay-bg: var(--gray-925);
--color-dark: var(--black-color);
--color-dark-inverted: var(--black-color);
// only formpage
--formpage-bg-body: var(--bg-body);
--formpage-color-primary: var(--color-primary);
--formpage-color-primary-bg: var(--formpage-color-primary);
--formpage-color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 20%, var(--white-color));
--formpage-color-primary-lighter: color-mix(in srgb, var(--formpage-color-primary) 6%, var(--white-color));
--formpage-color-primary-dark: color-mix(in srgb, var(--formpage-color-primary) 65%, var(--black-color));
--formpage-color-primary-darker: color-mix(in srgb, var(--formpage-color-primary) 25%, var(--black-color));
// fonts & font-sizes
--font-stack: "Open Sans", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
--font-stack-monospace: Courier New, Courier, monospace;
--fontsize-control: 15px;
--fontsize-control-label: 13px;
--fontsize-filterbar: 11px;
--textcolor: var(--gray-925);
--textcolor-inverted: var(--color-light);
--textcolor-invalid: var(--black-color);
--textcolor-hover: var(--gray-700);
--textcolor-sec: var(--gray-600);
--textcolor-placeholder: var(--gray-600);
--selection-textcolor: var(--color-light);
--selection-bg: var(--color-primary-dark);
--header-button-bg: transparent;
--header-button-bg-active: var(--bg-body);
--header-button-bg-hover: transparent;
--header-button-color: var(--gray-50);
--header-button-border: var(--bg-body);
--header-button-border-hover: var(--color-secondary);
--info-msg-bg: var(--gray-950);
--info-msg-bg-lighter: var(--gray-950);
--info-msg-textcolor: var(--color-light);
--info-msg-bordercolor: var(--blue-299);
// Block title
--block-separator-color: var(--formpage-color-primary-light);
--blocktitle-padding-left: 0px;
// status-icons
--status-icon-color: var(--formpage-color-primary);
// controls
--control-bg: var(--gray-50);
--control-bg-transparent: transparent;
--control-bg-filled: var(--bg-light);
--control-bg-disabled: repeating-linear-gradient(
145deg,
var(--gray-100),
var(--gray-100) 3px,
var(--gray-200) 3px,
var(--gray-200) 6px
);
--control-bg-req: var(--formpage-color-primary-lighter);
--control-textcolor: var(--color-dark);
--control-textcolor-placeholder: var(--textcolor-placeholder);
--control-bg-feature: var(--formpage-bg-body);
--control-border-color-feature: var(--color-light);
--control-bordercolor: var(--gray-450);
--control-bordercolor-required-not-filled: var(--formpage-color-primary);
--control-bordercolor-view: var(--gray-450);
--control-bordercolor-disabled: var(--gray-200);
--control-bordercolor-hover: var(--gray-500);
--control-icon-color: var(--color-dark);
--control-icon-color-disabled: var(--gray-550);
--control-icon-bg-hover: var(--formpage-color-primary);
--control-icon-color-hover: var(--color-light);
--control-checkbox-bg: var(--color-radio-checkbox-bg);
--control-checkbox-bg-filled: var(--color-radio-checkbox-checked);
--control-checkbox-icon: var(--color-radio-checkbox-bg);
--control-check-radiobox-border: var(--gray-700);
--control-checkbox-border-filled: var(--color-radio-checkbox-checked);
--control-radiobox-bg: var(--color-radio-checkbox-bg);
--control-radiobox-icon: var(--color-radio-checkbox-checked);
--control-radiobox-border-filled: var(--color-radio-checkbox-checked);
--control-radioCheck-highlight-inactive: var(--gray-600);
--control-radioCheck-highlight-active: var(--gray-925);
--control-toggle-btn-active: var(--formpage-color-primary);
--control-toggle-btn-bg: var(--bg-light);
--control-toggle-btn-border: var(--gray-250);
--control-toggle-btn-text: var(--textcolor-dark);
--label-bg: var(--gray-550);
--feature-label-bg: var(--gray-550);
--label-bg-required: var(--formpage-color-primary-bg);
--label-textcolor: var(--textcolor-light);
--label-checkbox-textcolor: var(--color-dark);
--label-textcolor-filled: var(--color-light);
// formpage block content
--highlight-border-color: var(--yellorange-225);
--highlight-area-bg: var(--yellorange-125);
// tooltip
// default
--tooltip-textcolor: var(--color-light);
// required
--tooltip-textcolor-req: var(--label-bg-required);
--tooltip-flyout-bg: var(--bg-light);
--tooltip-flyout-accent: var(--blue-299);
// badge-new
--badge-new-bg-color: var(--textcolor);
--badge-new-textcolor: var(--textcolor-inverted);
// kendo
--kendo-popup-bg: var(--white-color);
--kendo-popup-textcolor: var(--gray-800);
--kendo-popup-textcolor-dim: var(--gray-600);
--kendo-link-color: var(--formpage-color-primary-dark);
--kendo-link-color-hover: var(--kendo-link-color);
--kendo-chip-bg: var(--gray-100);
--kendo-chip-bg-hover: var(--gray-200);
--kendo-chip-border-color: var(--gray-200);
// SelectControls
--kendo-list-item-bg-odd: var(--gray-150);
// DatePicker
--kendo-calendar-header-bg: var(--gray-50);
--kendo-item-bg-hover: var(--gray-150);
// TimePicker
--kendo-time-highlight-bordercolor: rgba(0, 0, 0, 0.16);
// NumericField
--kendo-input-button-bg: var(--gray-50);
--kendo-input-button-bg-hover: var(--gray-100);
// print
--print-textcolor-label: var(--gray-100);
--print-bordercolor: var(--gray-150);
// buttons
--btn-bg: var(--gray-100);
--btn-dark-color: var(--gray-800);
--btn-dark-color-hover: var(--gray-600);
--btn-dark-textcolor: var(--color-light);
--btn-textcolor-dark: var(--color-dark);
--btn-textcolor-light: var(--color-light);
--btn-primary-color: var(--color-primary);
--btn-primary-color-light: var(--blue-300);
--btn-primary-color-dark: var(--color-primary-dark); // for focus/hover and border
--btn-primary-textcolor: var(--color-light);
--btn-primary-color-disabled: var(--blue-200);
--btn-primary-color-dark-disabled: var(--blue-250);
--btn-primary-textcolor-disabled: var(--gray-550);
--btn-secondary-color: var(--color-secondary-light);
--btn-secondary-color-dark: var(--color-secondary); // for focus/hover and border
--btn-secondary-color-toggled: var(--btn-secondary-color-dark);
--btn-secondary-color-border: var(--color-secondary); // for focus/hover and border
--btn-secondary-textcolor: var(--color-dark);
--btn-secondary-textcolor-light: var(--color-light);
--btn-secondary-textcolor-disabled: var(--gray-550);
--btn-accent-bordercolor: var(--bg-light);
--btn-tertiary-color: var(--color-tertiary);
--btn-gray-color: var(--gray-250);
--btn-gray-color-light: var(--gray-150);
--btn-gray-color-dark: var(--gray-550);
--btn-gray-textcolor: var(--textcolor);
--btn-gray-textcolor-light: var(--textcolor-inverted);
--btn-gray-color-disabled: var(--gray-100);
--btn-gray-color-dark-disabled: var(--gray-200);
--btn-gray-textcolor-disabled: var(--gray-550);
--btn-danger-color: var(--red-500);
--btn-danger-color-light: var(--red-300);
--btn-danger-color-dark: var(--red-900);
--btn-danger-textcolor: var(--color-light);
--btn-danger-color-disabled: var(--red-200);
--btn-danger-color-dark-disabled: var(--red-100);
--btn-danger-textcolor-disabled: var(--gray-550);
--btn-warning-color: var(--color-warning);
--btn-warning-color-light: var(--color-warning-light);
--btn-warning-color-dark: var(--yellorange-300);
--btn-warning-textcolor: var(--color-dark);
--btn-warning-color-disabled: var(--yellorange-100);
--btn-warning-color-dark-disabled: var(--yellorange-150);
--btn-warning-textcolor-disabled: var(--gray-550);
--btn-success-color: var(--forest-green-400);
--btn-success-color-light: var(--forest-green-300);
--btn-success-color-dark: var(--color-success);
--btn-success-textcolor: var(--color-dark);
--btn-success-color-disabled: var(--forest-green-100);
--btn-success-color-dark-disabled: var(--forest-green-200);
--btn-success-textcolor-disabled: var(--gray-550);
--btn-radio-gray: #f1f1f1;
--btn-radio-gray-highlight: #b3b3b3;
--btn-radio-green: color-mix(in srgb, var(--btn-radio-green-highlight) 10%, var(--white-color));
--btn-radio-green-highlight: #2C8A4A;
--btn-radio-lightGreen: color-mix(in srgb, var(--btn-radio-lightGreen-highlight) 10%, var(--white-color));
--btn-radio-lightGreen-highlight: #73C82B;
--btn-radio-yellow: color-mix(in srgb, var(--btn-radio-yellow-highlight) 10%, var(--white-color));
--btn-radio-yellow-highlight: #FBC706;
--btn-radio-orange: color-mix(in srgb, var(--btn-radio-orange-highlight) 10%, var(--white-color));
--btn-radio-orange-highlight: #F47216;
--btn-radio-red: color-mix(in srgb, var(--btn-radio-red-highlight) 10%, var(--white-color));
--btn-radio-red-highlight: #EF3121;
// header
--header-bg: var(--bg-light);
--header-textcolor: var(--textcolor);
--header-icon-bg: var(--gray-100);
--header-icon-success-color: #85b773;
--header-bar-bg: var(--bg-light);
--header-bar-bg-selected: var(--btn-secondary-color);
--header-bar-textcolor: var(--textcolor);
--header-bar-textcolor-selected: var(--textcolor);
--header-bar-bordercolor: var(--header-bar-bg-selected);
--header-search-bg: var(--gray-200);
--listitems-bg: var(--bg-light);
--listitems-bg-secondary: var(--gray-150);
--listitems-unselected-icon-color: var(--gray-200);
--listitems-addbutton-bg: var(--btn-secondary-color);
--featureitems-bg: var(--bg-light);
--featureitems-bg-secondary: var(--tab-content-bg);
--featureitems-color: var(--textcolor);
--featureitems-info-icons-bg: var(--gray-200);
--dialog-bg: var(--bg-light);
--tab-content-bg: var(--bg-light);
--tab-content-border: none;
--tab-bg: var(--tab-content-bg);
--tab-bg-inactive: var(--formpage-bg-body);
--tab-list-active-borderbottom: none;
--tab-list-color-active: var(--textcolor);
--tab-list-color-inactive: var(--gray-550);
--tab-nav-bg: var(--gray-200);
--tab-nav-bg-active: var(--gray-300);
--tab-anchor-bg: var(--gray-200);
--tabmenu-border-color: var(--color-light);
--splitview-bg: var(--bg-light);
--splitview-textcolor: var(--color-dark);
--splitview-textcolor-accent: var(--textcolor-inverted);
--splitview-btn-inactive: var(--bg-light);
--splitview-btn-active: var(--formpage-bg-body);
--splitview-btn-border: var(--formpage-bg-body);
--splitview-features-bg: var(--formpage-bg-body);
--splitview-btn-border-features: var(--formpage-bg-body);
--splitview-btn-border-features-active: var(--splitview-btn-border-features);
--splitview-icon-color: var(--formpage-color-primary);
--splitview-icon-completed-color: var(--gray-550);
--splitview-icon-textcolor: var(--color-light);
--splitview-feature-icon-color: var(--gray-550);
--toolbar-bg: var(--bg-light);
--toolbar-btn-hover: var(--bg-light);
--toolbar-btn-selected: var(--color-secondary);
--toolbar-bordercolor: var(--gray-250);
--toolbar-inline-bg: var(--gray-200);
--view-bg: var(--bg-light);
--border-radius-sm: calc(var(--border-radius) - 2px);
--border-radius: 6px;
--border-radius-lg: calc(var(--border-radius) + 2px);
// CheckBox, RadioButton sizes
--radio-button-size: 20px;
--radio-checked-multiplier: 0.5;
--check-button-size: 20px;
--check-checked-multiplier: 0.5;
// maps
--map-btn-bg: var(--bg-light);
--map-ml-btn-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
--ol-background-color: white;
--ol-accent-background-color: #f5f5f5;
--ol-subtle-background-color: rgba(128, 128, 128, 0.25);
--ol-partial-background-color: rgba(255, 255, 255, 0.75);
--ol-foreground-color: #333333;
--ol-subtle-foreground-color: #666666;
--ol-brand-color: #00aaff;
// Opacity disabled
--opacity-disabled: 0.7;
--btn-bg-disabled: repeating-linear-gradient(
145deg,
var(--gray-100),
var(--gray-100) 3px,
var(--gray-200) 3px,
var(--gray-200) 6px
);
--ease-transition-all: all 0.25s cubic-bezier(0, 0, 0.2, 1), outline 0s, outline-offset 0s;
}
:where([data-theme-mode="dark"]) {
--color-dark: var(--gray-999);
--theme: dark;
--bg-body: var(--color-dark);
--bg-body-sec: var(--gray-990);
--btn-bg-disabled: repeating-linear-gradient(
145deg,
var(--gray-950),
var(--gray-950) 3px,
var(--gray-800) 3px,
var(--gray-800) 6px
);
--progress-splash: var(--white-color);
--color-danger: #c12828;
--color-danger-light: var(--yellorange-900);
--color-error: #c12828;
--color-primary: var(--blue-500);
--color-primary-light: color-mix(in srgb, var(--color-primary) 50%, var(--black-color));
--color-primary-dark: color-mix(in srgb, var(--color-primary) 50%, var(--white-color));
--color-secondary-light: var(--mint-green-dark-500);
--color-secondary: var(--mint-green-dark-700);
--color-tertiary: var(--color-warning);
--color-tertiary-light: var(--color-warning-light);
--color-tertiary-dark: var(--color-warning-dark);
--formpage-color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
--formpage-color-primary-dark: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--white-color));
--color-warning: #ca9c45;
--color-warning-light: #4e3e31;
--color-warning-dark: #573f12;
--color-radio-checkbox-bg: var(--gray-900);
--color-radio-checkbox-bg-disabled: var(--gray-950);
--color-radio-checkbox: var(--color-light);
--color-radio-checkbox-checked: var(--color-light);
--color-highlight: var(--yellorange-200);
--color-light-inverted: var(--color-dark);
--color-dark-inverted: var(--white-color);
--textcolor: var(--gray-101);
--textcolor-hover: var(--gray-300);
--textcolor-sec: var(--gray-300);
--textcolor-inverted: var(--color-dark);
--textcolor-invalid: var(--gray-100);
--textcolor-placeholder: var(--gray-500);
--header-bg: var(--gray-950); //* hsi --gray-950
--header-icon-bg: var(--gray-701);
--header-icon-color: var(--gray-100);
--header-icon-success-color: #608c42;
--header-bar-bg: var(--gray-850);
--header-bar-bg-selected: var(--gray-101);
--header-bar-textcolor: var(--textcolor);
--header-bar-textcolor-selected: var(--textcolor-inverted);
--header-bar-bordercolor: var(--gray-101);
--header-button: var(--gray-800);
--header-search-bg: var(--gray-800);
--listitems-bg: var(--gray-850); //* hsi --gray-950
--listitems-bg-secondary: var(--gray-990);
--listitems-unselected-icon-color: var(--gray-900);
--listitems-addbutton-bg: transparent;
--featureitems-color: var(--color-light);
--toolbar-bg: var(--gray-950);
--toolbar-btn-hover: var(--gray-950);
--toolbar-bordercolor: var(--gray-800);
--toolbar-inline-bg: var(--gray-800);
--dialog-bg: var(--gray-950);
--splitview-bg: var(--gray-950);
--splitview-page-icon-color-required: var(--formpage-color-primary);
--splitview-textcolor: var(--textcolor);
--splitview-textcolor-accent: var(--textcolor);
--splitview-btn-inactive: var(--gray-600);
--splitview-page-icon-color: var(--gray-600);
--splitview-btn-border: var(--gray-800);
--splitview-features-bg: var(--formpage-bg-body);
--splitview-btn-border-features: var(--gray-800);
--splitview-btn-border-features-active: var(--formpage-bg-body);
--splitview-icon-completed-color: var(--gray-701);
--splitview-feature-icon-color: var(--gray-300);
--tab-content-bg: var(--gray-950);
--tab-list-active-borderbottom: 1px solid var(--gray-990);
--tab-list-color-inactive: var(--textcolor-sec);
--tab-nav-bg: var(--gray-990);
--tab-nav-bg-active: var(--gray-970);
--tab-anchor-bg: var(--gray-900);
--tabmenu-border-color: var(--gray-800);
--control-bg: var(--gray-990);
--control-bg-req: var(--formpage-color-primary-darker);
--control-bg-filled: var(--gray-990); // only modern
--control-bg-disabled: repeating-linear-gradient(
145deg,
var(--gray-950),
var(--gray-950) 3px,
var(--gray-800) 3px,
var(--gray-800) 6px
);
--control-textcolor: var(--gray-75);
--control-textcolor-placeholder: var(--textcolor-placeholder);
--control-border-color-feature: var(--gray-701);
--control-bordercolor: var(--gray-701);
--control-bordercolor-view: var(--gray-250);
--control-bordercolor-disabled: var(--gray-950);
--control-bordercolor-hover: var(--gray-700);
--control-checkbox-bg-filled: var(--white-color);
--control-check-radiobox-border: var(--gray-700);
--control-radioCheck-highlight-inactive: var(--textcolor);
--control-radioCheck-highlight-active: var(--textcolor);
--control-toggle-btn-bg: var(--gray-950);
--control-toggle-btn-border: var(--gray-950);
--control-toggle-btn-text: var(--gray-75);
--control-icon-color: var(--gray-200);
--control-icon-color-disabled: var(--gray-800);
--control-icon-color-hover: var(--gray-200);
--control-icon-bg-hover: var(--gray-950);
--tooltip-textcolor: var(--label-textcolor);
--tooltip-textcolor-req: var(--tooltip-textcolor);
--label-bg: var(--gray-701);
--feature-label-bg: var(--gray-701);
--label-textcolor: var(--textcolor);
--label-checkbox-textcolor: var(--textcolor);
--tooltip-flyout-bg: var(--gray-990);
// formpage block content
--highlight-border-color: var(--brownish-500);
--highlight-area-bg: var(--brownish-700);
// badge-new
--badge-new-textcolor: var(--textcolor-inverted);
// kendo
--kendo-popup-bg: var(--gray-800);
--kendo-popup-textcolor: var(--gray-200);
--kendo-popup-textcolor-dim: var(--gray-400);
--kendo-link-color-hover: var(--formpage-color-primary);
--kendo-chip-bg: var(--gray-700);
--kendo-chip-bg-hover: var(--gray-600);
--kendo-chip-border-color: var(--gray-600);
--kendo-item-bg-hover: var(--gray-600);
// SelectControls
--kendo-list-item-bg-odd: var(--gray-900);
// DatePicker
--kendo-calendar-header-bg: var(--gray-900);
// TimePicker
--kendo-time-highlight-bordercolor: rgba(255, 255, 255, 0.26);
// NumericField
--kendo-input-button-bg: var(--gray-970);
--kendo-input-button-bg-hover: var(--gray-900);
// --btn-bg: var(--gray-950);
--btn-bg: var(--gray-990);
--btn-gray-color: var(--gray-700);
--btn-gray-color-light: var(--gray-600);
--btn-gray-color-dark: var(--gray-800);
--btn-gray-textcolor: var(--textcolor);
--btn-gray-textcolor-light: var(--textcolor);
--btn-gray-color-disabled: var(--gray-500);
--btn-gray-color-dark-disabled: var(--gray-700);
--btn-gray-textcolor-disabled: var(--textcolor-sec);
--btn-secondary-color-toggled: var(--color-secondary);
--btn-secondary-textcolor: var(--white-color);
--btn-secondary-textcolor-light: var(--gray-200);
--btn-secondary-textcolor-disabled: var(--white-color);
--btn-accent-bordercolor: var(--gray-600);
--btn-radio-gray: #373737;
--btn-radio-gray-highlight: #7a7a7a;
--btn-radio-green: color-mix(in srgb, var(--btn-radio-green-highlight) 20%, var(--black-color));
--btn-radio-green-highlight: #246E3B;
--btn-radio-lightGreen: color-mix(in srgb, var(--btn-radio-lightGreen-highlight) 20%, var(--black-color));
--btn-radio-lightGreen-highlight: #5CA023;
--btn-radio-yellow: color-mix(in srgb, var(--btn-radio-yellow-highlight) 20%, var(--black-color));
--btn-radio-yellow-highlight: #C99F04;
--btn-radio-orange: color-mix(in srgb, var(--btn-radio-orange-highlight) 20%, var(--black-color));
--btn-radio-orange-highlight: #C35B10;
--btn-radio-red: color-mix(in srgb, var(--btn-radio-red-highlight) 20%, var(--black-color));
--btn-radio-red-highlight: #BF271A;
}
:where([data-theme-type^="modern"]) {
--blocktitle-padding-left: 5px;
// tooltip
// default
--tooltip-textcolor: var(--label-bg);
}
:where([data-theme-type^="modern"][data-theme-mode="light"]) {
--theme: light;
// label
--label-bg: var(--gray-500);
--feature-label-bg: var(--gray-500);
--label-textcolor: var(--gray-600);
--label-textcolor-req: var(--formpage-color-primary-dark);
}
:where([data-theme-type^="modern"][data-theme-mode="dark"]) {
--label-bg: var(--gray-600);
--feature-label-bg: var(--gray-600);
--label-textcolor: var(--gray-200);
--label-textcolor-req: var(--formpage-color-primary-dark);
// tooltip
// default
--tooltip-textcolor: var(--label-textcolor);
--control-bg: var(--gray-925);
--control-bordercolor: var(--gray-700);
--color-primary-light: color-mix(in srgb, var(--formpage-color-primary) 50%, var(--black-color));
}
[data-theme-type="pdf"] {
--bg-body: var(--bg-light);
}