/** * * Copyright (c) "Neo4j" * Neo4j Sweden AB [http://neo4j.com] * * This file is part of Neo4j. * * Neo4j is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ /** * Do not edit directly, this file was auto-generated. */ :where(:root, :host) { --breakpoint-5xs: 320px; --breakpoint-4xs: 360px; --breakpoint-3xs: 375px; --breakpoint-2xs: 512px; --breakpoint-xs: 768px; --breakpoint-sm: 864px; --breakpoint-md: 1024px; --breakpoint-lg: 1280px; --breakpoint-xl: 1440px; --breakpoint-2xl: 1680px; --breakpoint-3xl: 1920px; --code-light-comment: #5e636aff; --code-light-keyword: #3f7824ff; --code-light-keyword-literal: #3f7824ff; --code-light-operator: #3f7824ff; --code-light-label: #d43300ff; --code-light-predicate-function: #0a6190ff; --code-light-function: #0a6190ff; --code-light-procedure: #0a6190ff; --code-light-string-literal: #986400ff; --code-light-number-literal: #754ec8ff; --code-light-boolean-literal: #754ec8ff; --code-light-param-value: #754ec8ff; --code-light-property: #730e00ff; --code-dark-comment: #959aa1ff; --code-dark-keyword: #ffc450ff; --code-dark-keyword-literal: #ffc450ff; --code-dark-operator: #ffc450ff; --code-dark-label: #f96746ff; --code-dark-predicate-function: #8fe3e8ff; --code-dark-function: #8fe3e8ff; --code-dark-procedure: #8fe3e8ff; --code-dark-string-literal: #90cb62ff; --code-dark-number-literal: #ccb4ffff; --code-dark-boolean-literal: #ccb4ffff; --code-dark-param-value: #ccb4ffff; --code-dark-property: #ffaa97ff; --content-extra-light-max-width: 768px; --content-light-max-width: 1024px; --content-heavy-max-width: 1680px; --content-max-max-width: 1920px; --categorical-1: #55bdc5ff; --categorical-2: #4d49cbff; --categorical-3: #dc8b39ff; --categorical-4: #c9458dff; --categorical-5: #8e8cf3ff; --categorical-6: #78de7cff; --categorical-7: #3f80e3ff; --categorical-8: #673fabff; --categorical-9: #dbbf40ff; --categorical-10: #bf732dff; --categorical-11: #478a6eff; --categorical-12: #ade86bff; --graph-1: #ffdf81ff; --graph-2: #c990c0ff; --graph-3: #f79767ff; --graph-4: #56c7e4ff; --graph-5: #f16767ff; --graph-6: #d8c7aeff; --graph-7: #8dcc93ff; --graph-8: #ecb4c9ff; --graph-9: #4d8ddaff; --graph-10: #ffc354ff; --graph-11: #da7294ff; --graph-12: #579380ff; --motion-duration-quick: 100ms; --motion-duration-slow: 250ms; --motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1); --motion-transition-quick: 100ms cubic-bezier(0.42, 0, 0.58, 1) 0ms; --motion-transition-slow: 250ms cubic-bezier(0.42, 0, 0.58, 1) 0ms; --motion-transition-delayed: 100ms cubic-bezier(0.42, 0, 0.58, 1) 100ms; --palette-baltic-10: #e7fafbff; /** lightest shade of brand primary color */ --palette-baltic-15: #c3f8fbff; --palette-baltic-20: #8fe3e8ff; --palette-baltic-25: #5cc3c9ff; --palette-baltic-30: #5db3bfff; --palette-baltic-35: #51a6b1ff; --palette-baltic-40: #4c99a4ff; --palette-baltic-45: #30839dff; --palette-baltic-50: #0a6190ff; --palette-baltic-55: #02507bff; --palette-baltic-60: #014063ff; /** default brand primary color, called dark ocean */ --palette-baltic-65: #262f31ff; --palette-baltic-70: #081e2bff; --palette-baltic-75: #041823ff; --palette-baltic-80: #01121cff; --palette-hibiscus-10: #ffe9e7ff; --palette-hibiscus-15: #ffd7d2ff; --palette-hibiscus-20: #ffaa97ff; --palette-hibiscus-25: #ff8e6aff; --palette-hibiscus-30: #f96746ff; --palette-hibiscus-35: #e84e2cff; --palette-hibiscus-40: #d43300ff; --palette-hibiscus-45: #bb2d00ff; --palette-hibiscus-50: #961200ff; --palette-hibiscus-55: #730e00ff; --palette-hibiscus-60: #432520ff; --palette-hibiscus-65: #4e0900ff; --palette-hibiscus-70: #3f0800ff; --palette-hibiscus-75: #360700ff; --palette-hibiscus-80: #280500ff; --palette-forest-10: #e7fcd7ff; --palette-forest-15: #bcf194ff; --palette-forest-20: #90cb62ff; --palette-forest-25: #80bb53ff; --palette-forest-30: #6fa646ff; --palette-forest-35: #5b992bff; --palette-forest-40: #4d8622ff; --palette-forest-45: #3f7824ff; --palette-forest-50: #296127ff; --palette-forest-55: #145439ff; --palette-forest-60: #0c4d31ff; --palette-forest-65: #0a4324ff; --palette-forest-70: #262d24ff; --palette-forest-75: #052618ff; --palette-forest-80: #021d11ff; --palette-lemon-10: #fffad1ff; --palette-lemon-15: #fff8bdff; --palette-lemon-20: #fff178ff; --palette-lemon-25: #ffe500ff; --palette-lemon-30: #ffd600ff; --palette-lemon-35: #f4c318ff; --palette-lemon-40: #d7aa0aff; --palette-lemon-45: #b48409ff; --palette-lemon-50: #996e00ff; --palette-lemon-55: #765500ff; --palette-lemon-60: #614600ff; --palette-lemon-65: #4d3700ff; --palette-lemon-70: #312e1aff; --palette-lemon-75: #2e2100ff; --palette-lemon-80: #251b00ff; --palette-lavender-10: #f7f3ffff; --palette-lavender-15: #e9deffff; --palette-lavender-20: #ccb4ffff; --palette-lavender-25: #b38effff; --palette-lavender-30: #a07becff; --palette-lavender-35: #8c68d9ff; --palette-lavender-40: #754ec8ff; --palette-lavender-45: #5a34aaff; --palette-lavender-50: #4b2894ff; --palette-lavender-55: #3b1982ff; --palette-lavender-60: #2c2a34ff; --palette-lavender-65: #220954ff; --palette-lavender-70: #170146ff; --palette-lavender-75: #0e002dff; --palette-lavender-80: #09001cff; --palette-marigold-10: #fff0d2ff; --palette-marigold-15: #ffde9dff; --palette-marigold-20: #ffcf72ff; --palette-marigold-25: #ffc450ff; --palette-marigold-30: #ffb422ff; --palette-marigold-35: #ffa901ff; --palette-marigold-40: #ec9c00ff; --palette-marigold-45: #da9105ff; --palette-marigold-50: #ba7a00ff; --palette-marigold-55: #986400ff; --palette-marigold-60: #795000ff; --palette-marigold-65: #624100ff; --palette-marigold-70: #543800ff; --palette-marigold-75: #422c00ff; --palette-marigold-80: #251900ff; --palette-earth-10: #fff7f0ff; --palette-earth-15: #fdeddaff; --palette-earth-20: #ffe1c5ff; --palette-earth-25: #f8d1aeff; --palette-earth-30: #ecbf96ff; --palette-earth-35: #e0ae7fff; --palette-earth-40: #d19660ff; --palette-earth-45: #af7c4dff; --palette-earth-50: #8d5d31ff; --palette-earth-55: #763f18ff; --palette-earth-60: #66310bff; --palette-earth-65: #5b2b09ff; --palette-earth-70: #481f01ff; --palette-earth-75: #361700ff; --palette-earth-80: #220e00ff; --palette-neutral-10: #ffffffff; --palette-neutral-15: #f5f6f6ff; --palette-neutral-20: #e2e3e5ff; --palette-neutral-25: #cfd1d4ff; --palette-neutral-30: #bbbec3ff; --palette-neutral-35: #a8acb2ff; --palette-neutral-40: #959aa1ff; --palette-neutral-45: #818790ff; --palette-neutral-50: #6f757eff; --palette-neutral-55: #5e636aff; --palette-neutral-60: #4d5157ff; --palette-neutral-65: #3c3f44ff; --palette-neutral-70: #212325ff; --palette-neutral-75: #1a1b1dff; --palette-neutral-80: #09090aff; --palette-beige-10: #fffcf4ff; --palette-beige-20: #fff7e3ff; --palette-beige-30: #f2ead4ff; --palette-beige-40: #c1b9a0ff; --palette-beige-50: #999384ff; --palette-beige-60: #666050ff; --palette-beige-70: #3f3824ff; --palette-highlights-yellow: #faff00ff; --palette-highlights-periwinkle: #6a82ffff; --border-radius-none: 0px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-2xl: 16px; --border-radius-3xl: 24px; --border-radius-full: 9999px; --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --theme-dark-box-shadow-raised: 0px 1px 2px 0px rgb(from #09090aff r g b / 0.50); /** Used for small components that need sharper shadows to illustrate elevation. */ --theme-dark-box-shadow-overlay: 0px 8px 20px 0px rgb(from #09090aff r g b / 0.50); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */ --theme-dark-color-neutral-text-weakest: #818790ff; /** Should be used mainly for disabled text */ --theme-dark-color-neutral-text-weaker: #a8acb2ff; /** Should be used sparsely and mainly for headers and subtitles to differentiate from input text */ --theme-dark-color-neutral-text-weak: #cfd1d4ff; /** Used for labels, icon color and descriptions */ --theme-dark-color-neutral-text-default: #f5f6f6ff; /** Used for all default text */ --theme-dark-color-neutral-text-inverse: #1a1b1dff; /** Default text on Neutral-bg-strongest or other dark backgrounds */ --theme-dark-color-neutral-icon: #cfd1d4ff; /** Used as a default neutral icon color */ --theme-dark-color-neutral-bg-weak: #212325ff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */ --theme-dark-color-neutral-bg-default: #1a1b1dff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */ --theme-dark-color-neutral-bg-strong: #3c3f44ff; /** Use sparsely, mainly included in some component states */ --theme-dark-color-neutral-bg-stronger: #6f757eff; --theme-dark-color-neutral-bg-strongest: #f5f6f6ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */ --theme-dark-color-neutral-bg-status: #a8acb2ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */ --theme-dark-color-neutral-bg-on-bg-weak: #81879014; --theme-dark-color-neutral-border-weak: #3c3f44ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */ --theme-dark-color-neutral-border-strong: #5e636aff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */ --theme-dark-color-neutral-border-strongest: #bbbec3ff; --theme-dark-color-neutral-hover: #959aa11a; /** Used for neutral hover states on components */ --theme-dark-color-neutral-pressed: #959aa133; /** Used for neutral pressed states on components */ --theme-dark-color-primary-text: #8fe3e8ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */ --theme-dark-color-primary-icon: #8fe3e8ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */ --theme-dark-color-primary-bg-weak: #262f31ff; /** Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs */ --theme-dark-color-primary-bg-strong: #8fe3e8ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */ --theme-dark-color-primary-bg-status: #5db3bfff; --theme-dark-color-primary-bg-selected: #262f31ff; --theme-dark-color-primary-border-strong: #8fe3e8ff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */ --theme-dark-color-primary-border-weak: #02507bff; /** Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background */ --theme-dark-color-primary-focus: #5db3bfff; /** Used for all focused states */ --theme-dark-color-primary-hover-weak: #8fe3e814; /** Used for hover states where the background is either transparent or use Neutral-bg-weak */ --theme-dark-color-primary-hover-strong: #5db3bfff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */ --theme-dark-color-primary-pressed-weak: #8fe3e81f; /** Used for pressed states where the background is either transparent or use Neutral-bg-weak */ --theme-dark-color-primary-pressed-strong: #4c99a4ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */ --theme-dark-color-danger-text: #ffaa97ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-danger-icon: #ffaa97ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-danger-bg-strong: #ffaa97ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */ --theme-dark-color-danger-bg-weak: #432520ff; /** Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags */ --theme-dark-color-danger-bg-status: #f96746ff; --theme-dark-color-danger-border-strong: #ffaa97ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */ --theme-dark-color-danger-border-weak: #730e00ff; /** Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background */ --theme-dark-color-danger-hover-weak: #ffaa9714; /** Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak */ --theme-dark-color-danger-hover-strong: #f96746ff; /** Only used for hover states in critical filled buttons */ --theme-dark-color-danger-pressed-weak: #ffaa971f; /** Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak */ --theme-dark-color-danger-strong: #e84e2cff; /** Only used for pressed states in critical filled buttons */ --theme-dark-color-warning-text: #ffd600ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-warning-icon: #ffd600ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-warning-bg-strong: #ffd600ff; /** Use sparsely. Only used for filled labels */ --theme-dark-color-warning-bg-weak: #312e1aff; /** Used as backgrounds for warning components states such as banner and semi-filled labels */ --theme-dark-color-warning-bg-status: #d7aa0aff; --theme-dark-color-warning-border-strong: #ffd600ff; /** Use sparsely. Only used for outlined labels */ --theme-dark-color-warning-border-weak: #765500ff; /** Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background */ --theme-dark-color-success-text: #90cb62ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-success-icon: #90cb62ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-success-bg-strong: #90cb62ff; /** Use sparsely. Only used for filled labels */ --theme-dark-color-success-bg-weak: #262d24ff; /** Used as backgrounds for success components states such as banner and semi-filled labels */ --theme-dark-color-success-bg-status: #6fa646ff; --theme-dark-color-success-border-strong: #90cb62ff; /** Use sparsely. Only used for outlined labels */ --theme-dark-color-success-border-weak: #296127ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */ --theme-dark-color-discovery-text: #ccb4ffff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-discovery-icon: #ccb4ffff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-dark-color-discovery-bg-strong: #ccb4ffff; /** Use sparsely. Only used for filled labels */ --theme-dark-color-discovery-bg-weak: #2c2a34ff; /** Used as backgrounds for success components states such as banner and semi-filled labels */ --theme-dark-color-discovery-bg-status: #a07becff; --theme-dark-color-discovery-border-strong: #ccb4ffff; /** Use sparsely. Only used for outlined labels */ --theme-dark-color-discovery-border-weak: #4b2894ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */ --theme-light-box-shadow-raised: 0px 1px 2px 0px rgb(from #1a1b1dff r g b / 0.18); /** Used for small components that need sharper shadows to illustrate elevation. */ --theme-light-box-shadow-overlay: 0px 4px 8px 0px rgb(from #1a1b1dff r g b / 0.12); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */ --theme-light-color-neutral-text-weakest: #a8acb2ff; /** Should be used mainly for disabled text */ --theme-light-color-neutral-text-weaker: #5e636aff; /** Should be used sparsely and mainly for headers and subtitles to differentiate from input text */ --theme-light-color-neutral-text-weak: #4d5157ff; /** Used for labels, icon color and descriptions */ --theme-light-color-neutral-text-default: #1a1b1dff; /** Used for all default text */ --theme-light-color-neutral-text-inverse: #ffffffff; /** Default text on neutral-bg-strongest or other dark backgrounds */ --theme-light-color-neutral-icon: #4d5157ff; /** Used as a default neutral icon color */ --theme-light-color-neutral-bg-weak: #ffffffff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */ --theme-light-color-neutral-bg-default: #f5f6f6ff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */ --theme-light-color-neutral-bg-on-bg-weak: #f5f6f6ff; --theme-light-color-neutral-bg-strong: #e2e3e5ff; /** Use sparsely, mainly included in some component states */ --theme-light-color-neutral-bg-stronger: #a8acb2ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */ --theme-light-color-neutral-bg-strongest: #3c3f44ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */ --theme-light-color-neutral-bg-status: #a8acb2ff; --theme-light-color-neutral-border-weak: #e2e3e5ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */ --theme-light-color-neutral-border-strong: #bbbec3ff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */ --theme-light-color-neutral-border-strongest: #6f757eff; --theme-light-color-neutral-hover: #6f757e1a; /** Used for neutral hover states on components */ --theme-light-color-neutral-pressed: #6f757e33; /** Used for neutral pressed states on components */ --theme-light-color-primary-text: #0a6190ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */ --theme-light-color-primary-icon: #0a6190ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */ --theme-light-color-primary-bg-weak: #e7fafbff; /** Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs */ --theme-light-color-primary-bg-strong: #0a6190ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */ --theme-light-color-primary-bg-status: #4c99a4ff; --theme-light-color-primary-bg-selected: #e7fafbff; --theme-light-color-primary-border-strong: #0a6190ff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */ --theme-light-color-primary-border-weak: #8fe3e8ff; /** Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background */ --theme-light-color-primary-focus: #30839dff; /** Used for all focused states */ --theme-light-color-primary-hover-weak: #30839d1a; /** Used for hover states where the background is either transparent or use Neutral-bg-weak */ --theme-light-color-primary-hover-strong: #02507bff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */ --theme-light-color-primary-pressed-weak: #30839d1f; /** Used for pressed states where the background is either transparent or use Neutral-bg-weak */ --theme-light-color-primary-pressed-strong: #014063ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */ --theme-light-color-danger-text: #bb2d00ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-danger-icon: #bb2d00ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-danger-bg-strong: #bb2d00ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */ --theme-light-color-danger-bg-weak: #ffe9e7ff; /** Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags */ --theme-light-color-danger-bg-status: #e84e2cff; --theme-light-color-danger-border-strong: #bb2d00ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */ --theme-light-color-danger-border-weak: #ffaa97ff; /** Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background */ --theme-light-color-danger-hover-weak: #d4330014; /** Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak */ --theme-light-color-danger-hover-strong: #961200ff; /** Only used for hover states in critical filled buttons */ --theme-light-color-danger-pressed-weak: #d433001f; /** Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak */ --theme-light-color-danger-pressed-strong: #730e00ff; /** Only used for pressed states in critical filled buttons */ --theme-light-color-warning-text: #765500ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-warning-icon: #765500ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-warning-bg-strong: #765500ff; /** Use sparsely. Only used for filled labels */ --theme-light-color-warning-bg-weak: #fffad1ff; /** Used as backgrounds for warning components states such as banner and semi-filled labels */ --theme-light-color-warning-bg-status: #d7aa0aff; --theme-light-color-warning-border-strong: #996e00ff; /** Use sparsely. Only used for outlined labels */ --theme-light-color-warning-border-weak: #ffd600ff; /** Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background */ --theme-light-color-success-text: #3f7824ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-success-icon: #3f7824ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-success-bg-strong: #3f7824ff; /** Use sparsely. Only used for filled labels */ --theme-light-color-success-bg-weak: #e7fcd7ff; /** Used as backgrounds for success components states such as banner and semi-filled labels */ --theme-light-color-success-bg-status: #5b992bff; --theme-light-color-success-border-strong: #3f7824ff; /** Use sparsely. Only used for outlined labels */ --theme-light-color-success-border-weak: #90cb62ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */ --theme-light-color-discovery-text: #5a34aaff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-discovery-icon: #5a34aaff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */ --theme-light-color-discovery-bg-strong: #5a34aaff; /** Use sparsely. Only used for filled labels */ --theme-light-color-discovery-bg-weak: #e9deffff; /** Used as backgrounds for success components states such as banner and semi-filled labels */ --theme-light-color-discovery-bg-status: #754ec8ff; --theme-light-color-discovery-border-strong: #5a34aaff; /** Use sparsely. Only used for outlined labels */ --theme-light-color-discovery-border-weak: #b38effff; /** Use sparsely. Mainly used in combination with elements that use the discovery-bg-weak to stand out more from the background */ --weight-bold: 700; --weight-semibold: 600; --weight-normal: 400; --weight-medium: 500; --weight-light: 300; --typography-code: 400 0.875rem/1.4286 Fira Code; --typography-code-font-family: Fira Code; --typography-code-font-size: 0.875rem; --typography-code-font-weight: 400; --typography-code-letter-spacing: 0rem; --typography-code-line-height: 1.4286; --typography-display: 500 2.5rem/1.2 Syne Neo; --typography-display-font-family: Syne Neo; --typography-display-font-size: 2.5rem; --typography-display-font-weight: 500; --typography-display-letter-spacing: 0rem; --typography-display-line-height: 1.2; --typography-title-1: 700 1.875rem/1.3333 Public Sans; --typography-title-1-font-family: Public Sans; --typography-title-1-font-size: 1.875rem; --typography-title-1-font-weight: 700; --typography-title-1-letter-spacing: 0.016rem; --typography-title-1-line-height: 1.3333; --typography-title-2: 700 1.5rem/1.3333 Public Sans; --typography-title-2-font-family: Public Sans; --typography-title-2-font-size: 1.5rem; --typography-title-2-font-weight: 700; --typography-title-2-letter-spacing: 0.016rem; --typography-title-2-line-height: 1.3333; --typography-title-3: 700 1.25rem/1.4 Public Sans; --typography-title-3-font-family: Public Sans; --typography-title-3-font-size: 1.25rem; --typography-title-3-font-weight: 700; --typography-title-3-letter-spacing: 0.016rem; --typography-title-3-line-height: 1.4; --typography-title-4: 700 1rem/1.5 Public Sans; --typography-title-4-font-family: Public Sans; --typography-title-4-font-size: 1rem; --typography-title-4-font-weight: 700; --typography-title-4-letter-spacing: 0.016rem; --typography-title-4-line-height: 1.5; --typography-subheading-large: 600 1.25rem/1.4 Public Sans; --typography-subheading-large-font-family: Public Sans; --typography-subheading-large-font-size: 1.25rem; --typography-subheading-large-font-weight: 600; --typography-subheading-large-letter-spacing: 0.016rem; --typography-subheading-large-line-height: 1.4; --typography-subheading-medium: 600 1rem/1.5 Public Sans; --typography-subheading-medium-font-family: Public Sans; --typography-subheading-medium-font-size: 1rem; --typography-subheading-medium-font-weight: 600; --typography-subheading-medium-letter-spacing: 0.016rem; --typography-subheading-medium-line-height: 1.5; --typography-subheading-small: 600 0.875rem/1.4286 Public Sans; --typography-subheading-small-font-family: Public Sans; --typography-subheading-small-font-size: 0.875rem; --typography-subheading-small-font-weight: 600; --typography-subheading-small-letter-spacing: 0rem; --typography-subheading-small-line-height: 1.4286; --typography-body-large: 400 1rem/1.5 Public Sans; --typography-body-large-font-family: Public Sans; --typography-body-large-font-size: 1rem; --typography-body-large-font-weight: 400; --typography-body-large-letter-spacing: 0rem; --typography-body-large-line-height: 1.5; --typography-body-medium: 400 0.875rem/1.4286 Public Sans; --typography-body-medium-font-family: Public Sans; --typography-body-medium-font-size: 0.875rem; --typography-body-medium-font-weight: 400; --typography-body-medium-letter-spacing: 0rem; --typography-body-medium-line-height: 1.4286; --typography-body-small: 400 0.75rem/1.6667 Public Sans; --typography-body-small-font-family: Public Sans; --typography-body-small-font-size: 0.75rem; --typography-body-small-font-weight: 400; --typography-body-small-letter-spacing: 0rem; --typography-body-small-line-height: 1.6667; --typography-label: 700 0.875rem/1.4286 Public Sans; --typography-label-font-family: Public Sans; --typography-label-font-size: 0.875rem; --typography-label-font-weight: 700; --typography-label-letter-spacing: 0rem; --typography-label-line-height: 1.4286; --z-index-deep: -999999; /** Deep z-index is used to stack something behind everything else. */ --z-index-base: 0; /** Useful for creating a new stacking context. */ --z-index-overlay: 10; /** Used for overlay elements, like button groups on canvas elements. Can be used with an alias token. */ --z-index-banner: 20; /** Used for banners. Can be used with an alias token. */ --z-index-blanket: 30; /** Used as a blanket layer that covers the underlying UI. For example can be used to detect clicks and close the content on top of it. Can be used with an alias token. */ --z-index-popover: 40; /** Used for popover elements like Dropdown menu. Can be used with an alias token. */ --z-index-tooltip: 50; /** Used in tooltip components, should be above everything as it will be probably visible on hover effects. There are exceptions for canvas tooltips (like in Bloom). Can be used with an alias token. */ --z-index-modal: 60; /** Used for modals, always sitting on top of a blanket, can be a custom element or a Dialog. Can be used with an alias token. */ }