@cloudoperators/juno-ui-components 4.0.0 → 5.0.0

package/build/theme.css

@@ -0,0 +1,968 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* @import "tailwindcss" source("../src"); */
+
+:root,
+:host {
+  /* Global definitions THAT WE DO NOT WANT TO GENERATE CLASSES FOR go here: */
+  --grid-columns: 12;
+  --grid-row-margin-x: -0.5rem;
+  --grid-column-flex-grow: 0;
+  --grid-column-flex-shrink: 1;
+  --grid-column-flex-basis: auto;
+  --grid-column-default-width: 8.333333%;
+
+  --color-white: rgb(255, 255, 255);
+  --color-black: rgb(0, 0, 0);
+
+  --color-sap-grey-1: rgb(255, 255, 255);
+  --color-sap-grey-2: rgb(225, 225, 225);
+  --color-sap-grey-3: rgb(204, 204, 204);
+  --color-sap-grey-4: rgb(153, 153, 153);
+  --color-sap-grey-5: rgb(127, 127, 127);
+  --color-sap-grey-6: rgb(102, 102, 102);
+  --color-sap-grey-7: rgb(75, 75, 75);
+  --color-sap-grey-8: rgb(0, 0, 0);
+
+  --color-sap-blue-1: rgb(15, 170, 255);
+  --color-sap-blue-2: rgb(0, 143, 211);
+  --color-sap-blue-3: rgb(0, 118, 203);
+  --color-sap-blue-4: rgb(15, 70, 167);
+  --color-sap-blue-5: rgb(0, 50, 131);
+  --color-sap-blue-6: rgb(0, 25, 90);
+
+  --color-sap-gold: rgb(240, 171, 0);
+
+  --color-sap-purple-1: rgb(220, 0, 150);
+  --color-sap-purple-2: rgb(190, 0, 140);
+  --color-sap-purple-3: rgb(151, 10, 130);
+  --color-sap-purple-4: rgb(118, 10, 133);
+  --color-sap-purple-5: rgb(69, 21, 126);
+  --color-sap-purple-6: rgb(60, 20, 100);
+
+  --color-sap-green-1: rgb(188, 220, 80);
+  --color-sap-green-2: rgb(147, 201, 57);
+  --color-sap-green-3: rgb(79, 184, 28);
+  --color-sap-green-4: rgb(52, 139, 38);
+  --color-sap-green-5: rgb(36, 114, 48);
+  --color-sap-green-6: rgb(15, 75, 60);
+
+  --color-sap-orange-1: rgb(255, 175, 0);
+  --color-sap-orange-2: rgb(250, 145, 0);
+  --color-sap-orange-3: rgb(235, 115, 0);
+  --color-sap-orange-4: rgb(227, 85, 0);
+  --color-sap-orange-5: rgb(208, 69, 18);
+  --color-sap-orange-6: rgb(188, 54, 24);
+
+  --color-juno-grey-blue-1: rgb(64, 70, 75);
+  --color-juno-grey-blue-2: rgb(48, 54, 60);
+  --color-juno-grey-blue-3: rgb(41, 47, 54);
+  --color-juno-grey-blue-4: rgb(38, 44, 51);
+  --color-juno-grey-blue-5: rgb(36, 42, 49);
+  --color-juno-grey-blue-6: rgb(31, 38, 45);
+  --color-juno-grey-blue-7: rgb(28, 35, 42);
+  --color-juno-grey-blue-8: rgb(23, 30, 37);
+  --color-juno-grey-blue-9: rgb(18, 25, 32);
+  --color-juno-grey-blue-10: rgb(13, 20, 28);
+  --color-juno-grey-blue-11: rgb(0, 8, 16);
+
+  --color-juno-grey-light-1: rgb(249, 249, 249);
+  --color-juno-grey-light-2: rgb(247, 247, 247);
+  --color-juno-grey-light-3: rgb(244, 244, 244);
+  --color-juno-grey-light-4: rgb(241, 241, 241);
+  --color-juno-grey-light-5: rgb(238, 238, 238);
+  --color-juno-grey-light-6: rgb(235, 235, 235);
+  --color-juno-grey-light-7: rgb(233, 233, 233);
+  --color-juno-grey-light-8: rgb(230, 230, 230);
+  --color-juno-grey-light-9: rgb(227, 227, 227);
+  --color-juno-grey-light-10: rgb(215, 215, 215);
+
+  --color-juno-blue-1: rgb(203, 232, 247);
+  --color-juno-blue-2: rgb(165, 211, 234);
+  --color-juno-blue-3: rgb(137, 201, 232);
+  --color-juno-blue-4: rgb(67, 162, 208);
+  --color-juno-blue-5: rgb(0, 125, 184);
+  --color-juno-blue-6: rgb(30, 106, 146);
+  --color-juno-blue-7: rgb(10, 103, 153);
+  --color-juno-blue-8: rgb(7, 85, 128);
+  --color-juno-blue-9: rgb(5, 70, 105);
+  --color-juno-blue-10: rgb(3, 55, 84);
+
+  --color-juno-turquoise-1: rgb(197, 247, 255);
+  --color-juno-turquoise-2: rgb(132, 241, 255);
+  --color-juno-turquoise-3: rgb(25, 232, 250);
+  --color-juno-turquoise-4: rgb(22, 217, 234);
+  --color-juno-turquoise-5: rgb(21, 208, 224);
+  --color-juno-turquoise-6: rgb(15, 167, 180);
+  --color-juno-turquoise-7: rgb(9, 133, 144);
+  --color-juno-turquoise-8: rgb(5, 100, 109);
+  --color-juno-turquoise-9: rgb(2, 69, 75);
+  --color-juno-turquoise-10: rgb(1, 41, 4);
+
+  --color-juno-primary-blue-1: rgb(15, 170, 255);
+  --color-juno-primary-blue-2: rgb(0, 143, 211);
+  --color-juno-primary-blue-3: rgb(0, 118, 203);
+  --color-juno-primary-blue-4: rgb(15, 70, 167);
+  --color-juno-primary-blue-5: rgb(0, 50, 131);
+  --color-juno-primary-blue-6: rgb(0, 25, 90);
+}
+
+@theme inline {
+  /* Here we define all the classes like bg-, text-, border[--whatever] that we need Tailwind to generate: */
+
+  /* Reset Tailwind default colors */
+  --color-*: initial;
+
+  /* Global primitive colors we want to expose as classes. 
+  
+  Note these are plain duplicates from the global :root, :host scope that we want to have available globally as variables, but also as classes for straight-away use. 
+  
+  Also note that these, as they are duplicates, need changing in both scopes should we ever want to change them. 
+  */
+  --color-white: rgb(255, 255, 255);
+  --color-black: rgb(0, 0, 0);
+
+  --color-sap-grey-1: rgb(255, 255, 255);
+  --color-sap-grey-2: rgb(225, 225, 225);
+  --color-sap-grey-3: rgb(204, 204, 204);
+  --color-sap-grey-4: rgb(153, 153, 153);
+  --color-sap-grey-5: rgb(127, 127, 127);
+  --color-sap-grey-6: rgb(102, 102, 102);
+  --color-sap-grey-7: rgb(75, 75, 75);
+  --color-sap-grey-8: rgb(0, 0, 0);
+
+  --color-sap-blue-1: rgb(15, 170, 255);
+  --color-sap-blue-2: rgb(0, 143, 211);
+  --color-sap-blue-3: rgb(0, 118, 203);
+  --color-sap-blue-4: rgb(15, 70, 167);
+  --color-sap-blue-5: rgb(0, 50, 131);
+  --color-sap-blue-6: rgb(0, 25, 90);
+
+  --color-sap-gold: rgb(240, 171, 0);
+
+  --color-sap-purple-1: rgb(220, 0, 150);
+  --color-sap-purple-2: rgb(190, 0, 140);
+  --color-sap-purple-3: rgb(151, 10, 130);
+  --color-sap-purple-4: rgb(118, 10, 133);
+  --color-sap-purple-5: rgb(69, 21, 126);
+  --color-sap-purple-6: rgb(60, 20, 100);
+
+  --color-sap-green-1: rgb(188, 220, 80);
+  --color-sap-green-2: rgb(147, 201, 57);
+  --color-sap-green-3: rgb(79, 184, 28);
+  --color-sap-green-4: rgb(52, 139, 38);
+  --color-sap-green-5: rgb(36, 114, 48);
+  --color-sap-green-6: rgb(15, 75, 60);
+
+  --color-sap-orange-1: rgb(255, 175, 0);
+  --color-sap-orange-2: rgb(250, 145, 0);
+  --color-sap-orange-3: rgb(235, 115, 0);
+  --color-sap-orange-4: rgb(227, 85, 0);
+  --color-sap-orange-5: rgb(208, 69, 18);
+  --color-sap-orange-6: rgb(188, 54, 24);
+
+  --color-juno-grey-blue-1: rgb(64, 70, 75);
+  --color-juno-grey-blue-2: rgb(48, 54, 60);
+  --color-juno-grey-blue-3: rgb(41, 47, 54);
+  --color-juno-grey-blue-4: rgb(38, 44, 51);
+  --color-juno-grey-blue-5: rgb(36, 42, 49);
+  --color-juno-grey-blue-6: rgb(31, 38, 45);
+  --color-juno-grey-blue-7: rgb(28, 35, 42);
+  --color-juno-grey-blue-8: rgb(23, 30, 37);
+  --color-juno-grey-blue-9: rgb(18, 25, 32);
+  --color-juno-grey-blue-10: rgb(13, 20, 28);
+  --color-juno-grey-blue-11: rgb(0, 8, 16);
+
+  --color-juno-grey-light-1: rgb(249, 249, 249);
+  --color-juno-grey-light-2: rgb(247, 247, 247);
+  --color-juno-grey-light-3: rgb(244, 244, 244);
+  --color-juno-grey-light-4: rgb(241, 241, 241);
+  --color-juno-grey-light-5: rgb(238, 238, 238);
+  --color-juno-grey-light-6: rgb(235, 235, 235);
+  --color-juno-grey-light-7: rgb(233, 233, 233);
+  --color-juno-grey-light-8: rgb(230, 230, 230);
+  --color-juno-grey-light-9: rgb(227, 227, 227);
+  --color-juno-grey-light-10: rgb(215, 215, 215);
+
+  --color-juno-blue-1: rgb(203, 232, 247);
+  --color-juno-blue-2: rgb(165, 211, 234);
+  --color-juno-blue-3: rgb(137, 201, 232);
+  --color-juno-blue-4: rgb(67, 162, 208);
+  --color-juno-blue-5: rgb(0, 125, 184);
+  --color-juno-blue-6: rgb(30, 106, 146);
+  --color-juno-blue-7: rgb(10, 103, 153);
+  --color-juno-blue-8: rgb(7, 85, 128);
+  --color-juno-blue-9: rgb(5, 70, 105);
+  --color-juno-blue-10: rgb(3, 55, 84);
+
+  --color-juno-turquoise-1: rgb(197, 247, 255);
+  --color-juno-turquoise-2: rgb(132, 241, 255);
+  --color-juno-turquoise-3: rgb(25, 232, 250);
+  --color-juno-turquoise-4: rgb(22, 217, 234);
+  --color-juno-turquoise-5: rgb(21, 208, 224);
+  --color-juno-turquoise-6: rgb(15, 167, 180);
+  --color-juno-turquoise-7: rgb(9, 133, 144);
+  --color-juno-turquoise-8: rgb(5, 100, 109);
+  --color-juno-turquoise-9: rgb(2, 69, 75);
+  --color-juno-turquoise-10: rgb(1, 41, 4);
+
+  --color-juno-primary-blue-1: rgb(15, 170, 255);
+  --color-juno-primary-blue-2: rgb(0, 143, 211);
+  --color-juno-primary-blue-3: rgb(0, 118, 203);
+  --color-juno-primary-blue-4: rgb(15, 70, 167);
+  --color-juno-primary-blue-5: rgb(0, 50, 131);
+  --color-juno-primary-blue-6: rgb(0, 25, 90);
+
+  /* End global primitive colors */
+
+  --font-*: initial;
+  --font-sans: "IBM Plex Sans", ui-sans-serif, Arial, system-ui, sans-serif;
+  --font-condensed: "IBM Plex Sans Condensed", ui-sans-serif, Arial, system-ui, sans-serif;
+  --font-serif: "IBM Plex Serif", ui-serif, serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+
+  --color-current: currentColor;
+
+  --color-juno-grey-blue: var(--color-juno-grey-blue-11);
+  --color-juno-blue: var(--color-juno-blue-5);
+  --color-juno-turquoise: var(--color-juno-turquoise-5);
+  --color-juno-grey-light: var(--color-juno-grey-light-1);
+  --color-sap-grey: var(--color-sap-grey-8);
+  --color-sap-blue: var(--color-sap-blue-5);
+  --color-sap-purple: var(--color-sap-purple-5);
+  --color-sap-green: var(--color-sap-green-5);
+  --color-sap-orange: var(--color-sap-orange-5);
+  --color-transparent: transparent;
+
+  /* Colors we want to theme on our side: */
+
+  --color-theme-accent: var(--color-accent);
+  --color-theme-danger: var(--color-danger);
+  --color-theme-error: var(--color-error);
+  --color-theme-info: var(--color-info);
+  --color-theme-success: var(--color-success);
+  --color-theme-warning: var(--color-warning);
+  --color-theme-focus: var(--color-focus);
+  --color-theme-background-lvl-0: var(--color-background-lvl-0);
+  --color-theme-background-lvl-1: var(--color-background-lvl-1);
+  --color-theme-background-lvl-2: var(--color-background-lvl-2);
+  --color-theme-background-lvl-3: var(--color-background-lvl-3);
+  --color-theme-background-lvl-4: var(--color-background-lvl-4);
+  --color-theme-background-lvl-5: var(--color-background-lvl-5);
+
+  --border-width-*: initial;
+  --border-width-0: 0;
+  --border-width-2: 2px;
+  --border-width-3: 3px;
+  --border-width-4: 4px;
+  --border-width-6: 6px;
+  --border-width: 1px;
+
+  /* COMPONENT TOKENS: */
+  /* Here we define all the classes that represent a specific component token. */
+  /* E.g. `--background-color-theme-badge-default` will become `.bg-theme-badge-default`*/
+
+  --background-color-theme-global-bg: var(--color-global-bg);
+  /* Component Background Colors: */
+  --background-color-theme-badge-default: var(--color-badge-default-bg);
+  --background-color-theme-box-default: var(--color-box-bg);
+
+  /* Button */
+  /* Button Background */
+  --background-color-theme-button-default: var(--color-button-default-bg);
+  --background-color-theme-button-default-hover: var(--color-button-default-hover-bg);
+  --background-color-theme-button-default-active: var(--color-button-default-active-bg);
+
+  --background-color-theme-button-primary: var(--color-button-primary-bg);
+  --background-color-theme-button-primary-hover: var(--color-button-primary-hover-bg);
+  --background-color-theme-button-primary-active: var(--color-button-primary-active-bg);
+
+  --background-color-theme-button-primary-danger: var(--color-button-primary-danger-bg);
+  --background-color-theme-button-primary-danger-hover: var(--color-button-primary-danger-hover-bg);
+  --background-color-theme-button-primary-danger-active: var(--color-button-primary-danger-active-bg);
+
+  --background-color-theme-button-subdued: var(--color-button-subdued-bg);
+  --background-color-theme-button-subdued-hover: var(--color-button-subdued-hover-bg);
+  --background-color-theme-button-subdued-active: var(--color-button-subdued-active-bg);
+
+  /* Button Color */
+  --color-theme-button-default: var(--color-button-default-text);
+  --color-theme-button-default-hover: var(--color-button-default-hover-text);
+  --color-theme-button-default-active: var(--color-button-default-active-text);
+
+  --color-theme-button-primary: var(--color-button-primary-text);
+  --color-theme-button-primary-hover: var(--color-button-primary-hover-text);
+  --color-theme-button-primary-active: var(--color-button-primary-active-text);
+
+  --color-theme-button-primary-danger: var(--color-button-primary-danger-text);
+  --color-theme-button-primary-danger-hover: var(--color-button-primary-danger-hover-text);
+  --color-theme-button-primary-danger-active: var(--color-button-primary-danger-active-text);
+
+  --color-theme-button-subdued: var(--color-button-subdued-text);
+  --color-theme-button-sundued-hover: var(--color-button-subdued-hover-text);
+  --color-theme-button-sundued-active: var(--color-button-subdued-active-text);
+  /* TODO Border Color */
+  --border-theme-button-subdued: 1px solid var(--color-button-subdued-border);
+  --border-theme-button-subdued-hover: var(--color-button-subdued-hover-border);
+  --border-theme-button-subdued-active: var(--color-button-subdued-active-border);
+
+  --background-color-theme-checkbox: var(--color-checkbox-bg); /* -> .jn:bg-theme-checkbox */
+
+  --background-color-theme-code-block: var(--color-codeblock-bg);
+
+  --background-color-theme-content-area-bg: var(--color-content-area-bg);
+
+  --background-color-theme-datagridrow-selected: var(--color-datagridrow-selected);
+  --background-color-theme-datalistrow-selected: var(--color-datalistrow-selected);
+
+  --background-color-theme-filters: var(--color-filters-bg);
+  --background-color-theme-filter-input: var(--color-filter-input-bg);
+  --background-color-theme-filter-input-textinput: var(--color-filter-input-textinput-bg);
+  --background-color-theme-filter-pill-key: var(--color-filter-pill-key-bg);
+  --background-color-theme-introbox: var(--color-introbox-bg);
+  --background-color-theme-message-border-danger: var(--color-message-danger-border);
+  --background-color-theme-message-border-default: var(--color-message-default-border);
+  --background-color-theme-message-border-error: var(--color-message-error-border);
+  --background-color-theme-message-border-warning: var(--color-message-warning-border);
+  --background-color-theme-message-border-success: var(--color-message-success-border);
+  --background-color-theme-modal-backdrop: var(--color-modal-backdrop-bg);
+  --background-color-theme-panel: var(--color-panel-bg);
+  --background-color-theme-radio: var(--color-radio-bg);
+  --background-color-theme-radio-checked: var(--color-radio-checked-bg);
+  --background-color-theme-required: var(--color-required-bg);
+  --background-color-theme-select: var(--color-select-bg);
+  --background-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active-bg);
+  --background-color-theme-switch-handle: var(--color-switch-handle-bg);
+  --background-color-theme-switch-handle-checked: var(--color-switch-handle-checked-bg);
+  --background-color-theme-tab-navigation-top: var(--color-tabnavigation-top-bg);
+  --background-color-theme-textinput: var(--color-textinput-bg);
+  --background-color-theme-textinput-autofill: var(--color-textinput-autofill-bg);
+  --background-color-theme-topnavigation-item: var(--color-topnavigation-item-bg);
+  --background-color-theme-topnavigation-item-active: var(--color-topnavigation-item-active-bg);
+
+  /* Component Background Images: */
+  --background-image-theme-message-default: var(--gradient-message-default-bg);
+  --background-image-theme-message-success: var(--gradient-message-success-bg);
+  --background-image-theme-message-warning: var(--gradient-message-warning-bg);
+  --background-image-theme-message-danger: var(--gradient-message-danger-bg);
+  --background-image-theme-message-error: var(--gradient-message-error-bg);
+
+  /* Component Text Colors: */
+  --text-color-theme-highest: var(--color-text-highest);
+  --text-color-theme-high: var(--color-text-high);
+  --text-color-theme-default: var(--color-text-default);
+  --text-color-theme-light: var(--color-text-light);
+  --text-color-theme-disabled: var(--color-text-disabled);
+  --text-color-theme-link: var(--color-text-link);
+  --text-color-theme-on-danger: var(--color-button-danger-text);
+  --text-color-theme-on-default: var(--color-button-default-text);
+  --text-color-theme-textinput: var(--color-textinput-text);
+  --text-color-theme-textinput-autofill: var(--color-textinput-autofill-text);
+  --text-color-theme-textinput-autofill-label: var(--color-textinput-autofill-label);
+  --text-color-theme-checkbox-checked: var(--color-checkbox-checked-color);
+  --text-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active);
+
+  /* Component Border Colors: */
+  --border-color-theme-default: var(--color-default-border);
+
+  --border-color-theme-box-default: var(--color-box-border);
+
+  --border-color-theme-codeblock-bar: var(--color-codeblock-bar-border);
+  --border-color-theme-codeblock-tab-active: var(--color-text-default);
+
+  --border-color-theme-datalist-row: var(--color-datalist-row-border);
+
+  --border-color-theme-filter-input: var(--color-filter-input-border);
+  --border-color-theme-filter-pill: var(--color-filter-pill-border);
+
+  --border-color-theme-introbox: var(--color-introbox-border);
+
+  --border-color-theme-message-danger: var(--color-message-danger-border);
+  --border-color-theme-message-default: var(--color-message-default-border);
+  --border-color-theme-message-error: var(--color-message-error-border);
+  --border-color-theme-message-warning: var(--color-message-warning-border);
+  --border-color-theme-message-success: var(--color-message-success-border);
+
+  --border-color-theme-panel: var(--color-panel-border);
+
+  --border-color-theme-switch-default: var(--color-switch-default-border);
+  --border-color-theme-switch-hover: var(--color-switch-hover-border);
+
+  --border-color-theme-tab-navigation-content-bottom: var(--color-tabnavigation-content-bottom-border);
+
+  --border-color-theme-tab-active-bottom: var(--color-text-default);
+  --border-color-theme-tab-content-inactive-bottom: var(--color-background-lvl-4);
+
+  --border-color-theme-textinput-default: var(--color-textinput-default-border);
+
+  --padding-xs: 0.25rem;
+  --padding-sm: 0.5rem;
+  --padding-md: 1rem;
+  --padding-lg: 1.5rem;
+  --padding-grid-column: 0 0.5rem;
+
+  --height-textinput: 2.375rem;
+  --height-floatinglabelinput: 3rem;
+  --height-switch-default: 1.4375rem;
+  --height-switch-handle-default: 1.1875rem;
+
+  --ring-offset-focus: var(--color-global-bg);
+
+  --width-switch-default: 2.625rem;
+  --width-switch-handle-default: 1.1875rem;
+  --width-grid-column-default: var(--grid-column-default-width);
+  --width-grid-col-1: 8.333333%;
+  --width-grid-col-2: 16.666667%;
+  --width-grid-col-3: 25%;
+  --width-grid-col-4: 33.333333%;
+  --width-grid-col-5: 41.666667%;
+  --width-grid-col-6: 50%;
+  --width-grid-col-7: 58.333333%;
+  --width-grid-col-8: 66.666667%;
+  --width-grid-col-9: 75%;
+  --width-grid-col-10: 83.333333%;
+  --width-grid-col-11: 91.666667%;
+  --width-grid-col-12: 100%;
+
+  --breakpoint-3xl: "1856px";
+
+  --radius-3px: 3px;
+
+  --margin-grid-row: 0 var(--grid-row-margin-x);
+
+  --flex-grid-column: var(--grid-column-flex-grow) var(--grid-column-flex-shrink) var(--grid-column-flex-basis);
+}
+
+/* JUNO THEME: LIGHT MODE */
+.theme-light {
+  /* Light mode colors: */
+  --color-accent: rgb(0, 118, 203);
+  --color-info: rgb(0, 118, 203);
+  --color-success: rgb(79, 184, 28);
+  --color-warning: rgb(255, 175, 0);
+  --color-danger: rgb(199, 0, 0);
+  --color-error: rgb(199, 0, 0);
+  --color-juno-text-light: rgb(150, 150, 150);
+  --color-juno-text-default: rgb(76, 76, 76);
+  --color-juno-text-high: rgb(64, 64, 64);
+  --color-juno-text-highest: rgb(0, 0, 0);
+  --color-juno-text-disabled: rgb(183, 183, 183);
+  --color-juno-primary-danger-1: rgb(235, 146, 146);
+  --color-juno-primary-danger-2: rgb(218, 93, 93);
+  --color-juno-primary-danger-3: rgb(213, 64, 64);
+  --color-juno-primary-danger-4: rgb(199, 0, 0);
+  --color-juno-primary-danger-5: rgb(165, 11, 11);
+
+  /* Light Mode bg-colors: */
+  --color-background-lvl-0: var(--color-white);
+  --color-background-lvl-1: var(--color-juno-grey-light-1);
+  --color-background-lvl-2: var(--color-juno-grey-light-3);
+  --color-background-lvl-3: var(--color-juno-grey-light-7);
+  --color-background-lvl-4: var(--color-juno-grey-light-9);
+  --color-background-lvl-5: var(--color-juno-grey-light-10);
+
+  /* LT Global */
+  --color-global-bg: var(--color-juno-grey-light-1);
+
+  --color-global-text: var(--color-juno-text-default);
+  --color-content-area-bg: var(--color-background-lvl-0);
+  /* LT FOCUS */
+  --color-focus: var(--color-accent);
+  /* LT Text */
+  --color-text-highest: var(--color-juno-text-highest);
+  --color-text-high: var(--color-juno-text-high);
+  --color-text-default: var(--color-juno-text-default);
+  --color-text-light: var(--color-juno-text-light);
+  --color-text-disabled: var(--color-juno-text-disabled);
+  --color-text-link: var(--color-accent);
+
+  /* LT Badge */
+  --color-badge-default-bg: var(--color-juno-grey-light-3);
+
+  /* LT Button */
+  /* LT Primary Button */
+  --color-button-primary-text: var(--color-white);
+  --color-button-primary-bg: var(--color-juno-primary-blue-3);
+  /* |-- LT Primary Button :hover */
+  --color-button-primary-hover-text: var(--color-white);
+  --color-button-primary-hover-bg: var(--color-juno-primary-blue-2);
+  /* |-- LT Primary Button :active */
+  --color-button-primary-active-text: var(--color-white);
+  --color-button-primary-active-bg: var(--color-juno-primary-blue-5);
+
+  /* LT Default Button */
+  --color-button-default-text: var(--color-text-high);
+  --color-button-default-bg: var(--color-background-lvl-4);
+  --color-button-default-border: var(--color-background-lvl-4);
+  /* |-- LT Default Button :hover */
+  --color-button-default-hover-text: var(--color-text-high);
+  --color-button-default-hover-bg: var(--color-background-lvl-3);
+  --color-button-default-hover-border: var(--color-background-lvl-3);
+  /* |-- LT Default Button :active */
+  --color-button-default-active-text: var(--color-text-high);
+  --color-button-default-active-bg: var(--color-background-lvl-2);
+  --color-button-default-active-border: var(--color-background-lvl-4);
+
+  /* LT Subdued Button */
+  --color-button-subdued-text: var(--color-text-default);
+  --color-button-subdued-icon: var(--color-text-default);
+  --color-button-subdued-bg: var(--color-background-lvl-3);
+  --color-button-subdued-border: var(--color-background-lvl-4);
+  /* |-- LT Subdued Button :hover */
+  --color-button-subdued-hover-text: var(--color-text-default);
+  --color-button-subdued-hover-bg: var(--color-background-lvl-1);
+  --color-button-subdued-hover-border: var(--color-background-lvl-4);
+  /* |-- LT Subdued Button :active */
+  --color-button-subdued-active-text: var(--color-text-default);
+  --color-button-subdued-active-bg: var(--color-background-lvl-0);
+  --color-button-subdued-active-border: var(--color-background-lvl-4);
+
+  /* LT Primary Danger Button */
+  --color-button-primary-danger-text: var(--color-white);
+  --color-button-primary-danger-bg: var(--color-juno-primary-danger-4);
+  /* |-- LT Primary Danger Button :hover */
+  --color-button-primary-danger-hover-text: var(--color-white);
+  --color-button-primary-danger-hover-bg: var(--color-juno-primary-danger-3);
+  /* |-- LT Primary Danger Button :active */
+  --color-button-primary-danger-active-text: var(--color-white);
+  --color-button-primary-danger-active-bg: var(--color-juno-primary-danger-5);
+
+  /* LT Icon */
+  --color-icon-danger: var(--danger);
+  --color-icon-info: var(--color-accent);
+  --color-icon-success: var(--color-sap-green);
+  --color-icon-warning: var(--color-warning);
+  /* LT Message */
+  --color-message-danger-border: var(--color-danger);
+  --gradient-message-danger-bg: linear-gradient(90deg, rgb(255, 231, 224) 0%, rgb(255, 180, 158) 100%);
+  --color-message-default-border: var(--color-info);
+  --gradient-message-default-bg: linear-gradient(90deg, rgb(229, 244, 248) 0%, rgb(46, 168, 196) 100%);
+  --color-message-error-border: var(--color-error);
+  --gradient-message-error-bg: linear-gradient(90deg, rgb(255, 231, 224) 0%, rgb(255, 180, 158) 100%);
+  --color-message-warning-border: var(--color-warning);
+  --gradient-message-warning-bg: linear-gradient(90deg, rgb(253, 245, 226) 0%, rgb(255, 231, 147) 100%);
+  --color-message-success-border: var(--color-success);
+  --gradient-message-success-bg: linear-gradient(90deg, rgb(230, 247, 233) 0%, rgb(170, 229, 180) 100%);
+
+  /* LT Introbox */
+  --color-introbox-bg: var(--color-background-lvl-2);
+  --color-introbox-border: var(--color-accent);
+  /* LT (Text-) Input */
+  --color-textinput-bg: var(--color-background-lvl-3);
+  --color-textinput-default-border: var(--color-background-lvl-4);
+  --color-textinput-text: var(--color-juno-text-high);
+  --color-textinput-placeholder-text: var(--color-juno-text-high);
+  --color-textinput-focus-border: var(--color-accent);
+  --color-textinput-autofill-text: var(--color-black);
+  --color-textinput-autofill-bg: var(--color-juno-blue-1);
+  --color-textinput-autofill-label: var(--color-juno-text-default);
+  /* LT Select */
+  --color-select-bg: var(--color-background-lvl-3);
+  /* LT Checkbox */
+  --color-checkbox-bg: var(--color-background-lvl-5);
+  --color-checkbox-checked-color: var(--color-accent);
+  /* LT Radio */
+  --color-radio-bg: var(--color-background-lvl-5);
+  --color-radio-checked-bg: var(--color-accent);
+  /* LT Switch */
+  --color-switch-default-border: var(--color-juno-text-default);
+  --color-switch-handle-bg: var(--color-juno-text-default);
+  --color-switch-handle-checked-bg: var(--color-accent);
+  /* LT Required */
+  --color-required-bg: var(--color-accent);
+  /* LT Spinner */
+  --color-spinner-primary: var(--color-accent);
+  /* LT Syntax Highlighting */
+  --color-syntax-highlight-base00: var(--color-codeblock-bg); /* bg */
+  --color-syntax-highlight-base01: var(--color-juno-grey-light-3); /*  ? */
+  --color-syntax-highlight-base02: var(--color-sap-grey-3); /*  lines and boxes */
+  --color-syntax-highlight-base03: var(--color-sap-grey-3);
+  --color-syntax-highlight-base04: var(--color-sap-grey-3);
+  --color-syntax-highlight-base05: var(--color-juno-text-high);
+  --color-syntax-highlight-base06: red;
+  --color-syntax-highlight-base07: var(--color-juno-text-high);
+  --color-syntax-highlight-base08: var(--color-juno-grey-blue-6); /*  NULL */
+  --color-syntax-highlight-base09: var(--color-juno-blue-4); /*  String value */
+  --color-syntax-highlight-base0A: var(--color-juno-grey-blue-6); /*  NaN */
+  --color-syntax-highlight-base0B: var(--color-juno-blue-4); /*  float value */
+  --color-syntax-highlight-base0C: var(--color-sap-gold); /*  array index */
+  --color-syntax-highlight-base0D: var(--color-sap-gold); /*  expanded icon */
+  --color-syntax-highlight-base0E: var(--color-juno-blue-4);
+  /* LT bool + collapsed icon */
+  --color-syntax-highlight-base0F: var(--color-juno-blue-4); /*  integer value */
+  /* LT DataGrid */
+  --color-datagridrow-selected: var(--color-accent);
+  /* LT DataList */
+  --color-datalist-row-border: var(--color-background-lvl-1);
+  --color-datalistrow-selected: var(--color-accent);
+  /* LT CodeBlock */
+  --color-codeblock-bg: var(--color-background-lvl-2);
+  --color-codeblock-bar-border: var(--color-background-lvl-4);
+  /* LT Panel */
+  --color-panel-bg: rgb(252 252 252 / 0.8);
+  /* LT TabNavigation */
+  --color-tabnavigation-top-bg: var(--color-juno-grey-light-5);
+  --color-tabnavigation-content-bottom-border: var(--color-background-lvl-4);
+  /* LT Filters */
+  --color-filters-bg: var(--color-background-lvl-1);
+  --color-filter-input-bg: var(--color-background-lvl-0);
+  --color-filter-input-border: var(--color-background-lvl-4);
+  --color-filter-input-textinput-bg: transparent;
+  --color-filter-pill-border: var(--color-background-lvl-4);
+  --color-filter-pill-key-bg: var(--color-background-lvl-4);
+  /* LT Modal */
+  --color-modal-backdrop-bg: rgb(0 0 0 / 0.2);
+  /* LT Box */
+  --color-box-bg: var(--color-background-lvl-1);
+  --color-box-border: var(--color-background-lvl-3);
+  /* LT SideNavigation */
+  --color-sidenavigation-item-active: var(--color-black);
+  --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
+  /* LT TopNavigation */
+  --color-topnavigation-item-active: var(--color-black);
+  --color-topnavigation-item-bg: var(--color-sap-grey-1);
+  --color-topnavigation-item-active-bg: var(--color-juno-grey-light-3);
+
+  /* LT DateTimePicker */
+  --color-datetimepicker-calendar-bg: var(--color-background-lvl-2);
+  --color-datetimepicker-disabled-date-color: rgb(76 76 76 / 0.4); /* Light theme text default color */
+  --color-datetimepicker-disabled-date-hover-bg: rgb(0 118 203 / 0.5); /* Light theme accent color */
+  --color-datetimepicker-range-bg: rgb(
+    98,
+    148,
+    209
+  ); /* Dark Theme DateTimePicker range background. We need to use a synthetisized solid value based on the current theme's accent color, the way that flatpickr is built here forbids using translucent colors. */
+}
+
+/* JUNO THEME: DARK MODE */
+.theme-dark {
+  --color-accent: rgb(21, 208, 224);
+  --color-info: rgb(21, 208, 224);
+  --color-success: rgb(59, 255, 91);
+  --color-warning: rgb(255, 198, 0);
+  --color-danger: rgb(255, 65, 16);
+  --color-error: rgb(255, 65, 16);
+  --color-juno-text-light: rgb(122, 122, 122);
+  --color-juno-text-default: rgb(187, 187, 187);
+  --color-juno-text-high: rgb(222, 223, 224);
+  --color-juno-text-highest: rgb(255, 254, 253);
+  --color-juno-text-disabled: rgb(92, 92, 92);
+  --color-juno-primary-danger-1: rgb(231, 163, 137);
+  --color-juno-primary-danger-2: rgb(222, 126, 91);
+  --color-juno-primary-danger-3: rgb(208, 69, 18);
+  --color-juno-primary-danger-4: rgb(187, 62, 16);
+  --color-juno-primary-danger-5: rgb(164, 54, 14);
+
+  /* DT Background Colors */
+  --color-background-lvl-0: var(--color-juno-grey-blue-9);
+  --color-background-lvl-1: var(--color-juno-grey-blue-7);
+  --color-background-lvl-2: var(--color-juno-grey-blue-5);
+  --color-background-lvl-3: var(--color-juno-grey-blue-3);
+  --color-background-lvl-4: var(--color-juno-grey-blue-2);
+  --color-background-lvl-5: var(--color-juno-grey-blue-1);
+
+  /* DT Global */
+  --color-global-bg: var(--color-juno-grey-blue-10);
+
+  --color-global-text: var(--color-juno-text-default);
+  --color-content-area-bg: var(--color-background-lvl-0);
+
+  /* DT FOCUS */
+  --color-focus: var(--color-accent);
+  --color-focus-border: var(--color-accent);
+  /* DT Text */
+  --color-text-highest: var(--color-juno-text-highest);
+  --color-text-high: var(--color-juno-text-high);
+  --color-text-default: var(--color-juno-text-default);
+  --color-text-light: var(--color-juno-text-light);
+  --color-text-disabled: var(--color-juno-text-disabled);
+  --color-text-link: var(--color-accent);
+
+  /* DT Badge */
+  --color-badge-default-bg: var(--color-juno-grey-blue-3);
+
+  /* DT Button */
+  /* DT Primary Button */
+  --color-button-primary-bg: var(--color-juno-turquoise-7);
+  --color-button-primary-text: var(--color-white);
+  /* |-- DT Primary Button :hover */
+  --color-button-primary-hover-bg: var(--color-juno-turquoise-5);
+  --color-button-primary-hover-text: var(--color-white);
+  /* |-- DT Primary Button :active */
+  --color-button-primary-active-bg: var(--color-juno-turquoise-9);
+  --color-button-primary-active-text: var(--color-white);
+
+  /* DT Default Button */
+  --color-button-default-text: var(--color-text-high);
+  --color-button-default-icon: var(--color-text-high);
+  --color-button-default-bg: var(--color-background-lvl-5);
+  --color-button-default-border: var(--color-background-lvl-5);
+  /* |-- DT Default Button :hover */
+  --color-button-default-hover-text: var(--color-text-high);
+  --color-button-default-hover-bg: var(--color-background-lvl-3);
+  --color-button-default-hover-border: var(--color-background-lvl-3);
+  /* |-- DT Default Button :active */
+  --color-button-default-active-text: var(--color-text-high);
+  --color-button-default-active-bg: var(--color-background-lvl-2);
+  --color-button-default-active-border: var(--color-background-lvl-4);
+
+  /* DT Subdued Button */
+  --color-button-subdued-text: var(--color-text-default);
+  --color-button-subdued-icon: var(--color-text-default);
+  --color-button-subdued-bg: var(--color-background-lvl-3);
+  --color-button-subdued-border: var(--color-background-lvl-4);
+  /* |-- DT Subdued Button :hover */
+  --color-button-subdued-hover-text: var(--color-text-default);
+  --color-button-subdued-hover-bg: var(--color-background-lvl-2);
+  --color-button-subdued-hover-border: var(--color-background-lvl-4);
+  /* |-- DT Subdued Button :active */
+  --color-button-subdued-active-text: var(--color-text-default);
+  --color-button-subdued-active-bg: var(--color-background-lvl-0);
+  --color-button-subdued-active-border: var(--color-background-lvl-4);
+
+  /* DT Primary-Danger Button */
+  --color-button-primary-danger-text: var(--color-white);
+  --color-button-primary-danger-bg: var(--color-juno-primary-danger-4);
+  /* |-- DT Primary Danger Button :hover */
+  --color-button-primary-danger-hover-text: var(--color-white);
+  --color-button-primary-danger-hover-bg: var(--color-juno-primary-danger-3);
+  /* |-- DT Primary Danger Button :active */
+  --color-button-primary-danger-active-text: var(--color-white);
+  --color-button-primary-danger-active-bg: var(--color-juno-primary-danger-5);
+
+  /* DT Icon */
+  --color-icon-danger: var(--color-juno-danger);
+  --color-icon-info: var(--color-accent);
+  --color-icon-success: var(--color-sap-green-5);
+  --color-icon-warning: var(--color-warning);
+  /* DT Message */
+  --color-message-danger-border: var(--color-danger);
+  --gradient-message-danger-bg: linear-gradient(90deg, rgb(57, 39, 38) 0%, rgb(124, 48, 30) 100%);
+  --color-message-default-border: var(--color-info);
+  --gradient-message-default-bg: linear-gradient(90deg, rgb(28, 57, 65) 0%, rgb(25, 108, 119) 100%);
+  --color-message-error-border: var(--color-error);
+  --gradient-message-error-bg: linear-gradient(90deg, rgb(57, 39, 38) 0%, rgb(124, 48, 30) 100%);
+  --color-message-warning-border: var(--color-warning);
+  --gradient-message-warning-bg: linear-gradient(90deg, rgb(57, 56, 36) 0%, rgb(124, 104, 24) 100%);
+  --color-message-success-border: var(--color-success);
+  --gradient-message-success-bg: linear-gradient(90deg, rgb(32, 55, 46) 0%, rgb(39, 102, 57) 100%);
+  /* DT Introbox */
+  --color-introbox-bg: var(--color-background-lvl-2);
+  --color-introbox-border: var(--color-accent);
+  /* DT (Text-)Input */
+  --color-textinput-bg: var(--color-background-lvl-3);
+  --color-textinput-default-border: var(--color-background-lvl-4);
+  --color-textinput-text: var(--color-juno-text-high);
+  --color-textinput-placeholder-text: var(--color-juno-text-high);
+  --color-textinput-focus-border: var(--color-accent);
+  --color-textinput-autofill-text: var(--color-black);
+  --color-textinput-autofill-bg: var(--color-juno-blue-1);
+  --color-textinput-autofill-label: var(--color-black);
+  /* DT Select */
+  --color-select-bg: var(--color-background-lvl-4);
+  /* DT Checkbox */
+  --color-checkbox-bg: var(--color-background-lvl-5);
+  --color-checkbox-checked-color: var(--color-accent);
+  /* DT Radio */
+  --color-radio-bg: var(--color-background-lvl-5);
+  --color-radio-checked-bg: var(--color-accent);
+  /* DT Switch */
+  --color-switch-default-border: var(--color-juno-text-high);
+  --color-switch-handle-bg: var(--color-juno-text-high);
+  --color-switch-handle-checked-bg: var(--color-accent);
+  --color-switch-hover-border: var(--color-accent);
+  /* DT Required */
+  --color-required-bg: var(--color-accent);
+  /* DT Spinner */
+  --color-spinner-primary: var(--color-accent);
+  /* DT Syntax Highlighting */
+  --color-syntax-highlight-base00: var(--color-codeblock-bg); /* bg */
+  --color-syntax-highlight-base01: var(--color-juno-grey-blue-3); /*  ? */
+  --color-syntax-highlight-base02: #bbb; /* lines and boxes */
+  --color-syntax-highlight-base03: var(--color-sap-grey-3);
+  --color-syntax-highlight-base04: var(--color-sap-grey-3);
+  --color-syntax-highlight-base05: #dedfe0;
+  --color-syntax-highlight-base06: red;
+  --color-syntax-highlight-base07: #dedfe0;
+  --color-syntax-highlight-base08: var(--color-juno-grey-blue-6); /* NULL */
+  --color-syntax-highlight-base09: var(--color-juno-blue-4); /* String value */
+  --color-syntax-highlight-base0A: var(--color-juno-grey-blue-6); /* NaN */
+  --color-syntax-highlight-base0B: var(--color-juno-blue-4); /* float value */
+  --color-syntax-highlight-base0C: var(--color-sap-gold); /* array index */
+  --color-syntax-highlight-base0D: var(--color-sap-gold); /* DT expanded icon */
+  --color-syntax-highlight-base0E: var(--color-juno-blue-4); /* DT bool + collapsed icon */
+  --color-syntax-highlight-base0F: var(--color-juno-blue-4); /* integer value */
+  /* DT DataGrid */
+  --color-datagridrow-selected: var(--color-accent);
+  /* DT DataList */
+  --color-datalist-row-border: var(--color-background-lvl-1);
+  --color-datalistrow-selected: var(--color-accent);
+  /* DT CodeBlock */
+  --color-codeblock-bg: var(--color-background-lvl-2);
+  --color-codeblock-bar-border: var(--color-background-lvl-4);
+  /* DT Panel */
+  --color-panel-bg: rgb(from var(--color-juno-grey-blue-11) r g b / 0.75);
+
+  /* DT TabNavigation */
+  --color-tabnavigation-top-bg: var(--color-juno-grey-blue-8);
+  --color-tabnavigation-content-bottom-border: var(--color-background-lvl-4);
+  /* DT Filters */
+  --color-filters-bg: var(--color-background-lvl-1);
+  --color-filter-input-bg: var(--color-background-lvl-0);
+  --color-filter-input-border: var(--color-background-lvl-4);
+  --color-filter-input-textinput-bg: transparent;
+  --color-filter-pill-border: var(--color-background-lvl-4);
+  --color-filter-pill-key-bg: var(--color-background-lvl-4);
+  /* DT Modal */
+  --color-modal-backdrop-bg: rgb(60 70 75 / 0.6);
+  /* DT Box */
+  --color-box-bg: var(--color-background-lvl-1);
+  --color-box-border: var(--color-background-lvl-3);
+  /* DT SideNavigation */
+  --color-sidenavigation-item-active: var(--color-white);
+  --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
+  /* DT TopNavigation */
+  --color-topnavigation-item-active: var(--color-white);
+  --color-topnavigation-item-bg: var(--color-juno-grey-blue-7);
+  --color-topnavigation-item-active-bg: var(--color-juno-grey-blue-5);
+  /* DT DateTimePicker */
+  --color-datetimepicker-calendar-bg: var(--color-background-lvl-1);
+  --color-datetimepicker-disabled-date-color: rgb(187 187 187 / 0.4); /* Dark theme text default color */
+  --color-datetimepicker-disabled-date-hover-bg: rgb(21 208 224 / 0.5); /* Dark theme accent color */
+  --color-datetimepicker-range-bg: rgb(
+    79 163 176
+  ); /* Dark Theme DateTimePicker range background. We need to use a synthetisized solid value based on the current theme's accent color, the way that flatpickr is built here forbids using translucent colors. */
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+/* @layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+} */
+
+/* Add flex-basis utilities since tw doesn't support flex-basis: https://github.com/tailwindlabs/tailwindcss/issues/603 */
+@utility flex-basis-0 {
+  flex-basis: 0%;
+}
+@utility flex-basis-auto {
+  flex-basis: auto;
+}
+
+/* default base styles using the tw base directive */
+@layer base {
+  html,
+  body,
+  .juno-app-body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    @apply font-sans;
+    @apply text-base;
+    @apply h-full;
+  }
+
+  /* theme-dependant  colors need to be applied in the context of the theme classes. */
+  .theme-dark,
+  .theme-light {
+    @apply bg-theme-global-bg;
+    @apply text-theme-default;
+  }
+
+  a {
+    @apply text-theme-link;
+  }
+
+  /* adds pointer cursor to buttons to restore tw3 behavior */
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+/* tw default values for various properties. Hardcode here right now to fix the issue that they are undefined otherwise
+ * because of the way Tailwind CSS v4 defines the default values via @property. This is hopefully temporary, for 
+ * context see: https://github.com/tailwindlabs/tailwindcss/issues/15005
+*/
+@layer properties {
+  *,
+  :before,
+  :after,
+  ::backdrop {
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-translate-z: 0;
+    --tw-rotate-x: initial;
+    --tw-rotate-y: initial;
+    --tw-rotate-z: initial;
+    --tw-skew-x: initial;
+    --tw-skew-y: initial;
+    --tw-space-y-reverse: 0;
+    --tw-space-x-reverse: 0;
+    --tw-border-style: solid;
+    --tw-gradient-position: initial;
+    --tw-gradient-from: #0000;
+    --tw-gradient-via: #0000;
+    --tw-gradient-to: #0000;
+    --tw-gradient-stops: initial;
+    --tw-gradient-via-stops: initial;
+    --tw-gradient-from-position: 0%;
+    --tw-gradient-via-position: 50%;
+    --tw-gradient-to-position: 100%;
+    --tw-leading: initial;
+    --tw-font-weight: initial;
+    --tw-tracking: initial;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-color: initial;
+    --tw-shadow-alpha: 100%;
+    --tw-inset-shadow: 0 0 #0000;
+    --tw-inset-shadow-color: initial;
+    --tw-inset-shadow-alpha: 100%;
+    --tw-ring-color: initial;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-inset-ring-color: initial;
+    --tw-inset-ring-shadow: 0 0 #0000;
+    --tw-ring-inset: initial;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-outline-style: solid;
+    --tw-blur: initial;
+    --tw-brightness: initial;
+    --tw-contrast: initial;
+    --tw-grayscale: initial;
+    --tw-hue-rotate: initial;
+    --tw-invert: initial;
+    --tw-opacity: initial;
+    --tw-saturate: initial;
+    --tw-sepia: initial;
+    --tw-drop-shadow: initial;
+    --tw-drop-shadow-color: initial;
+    --tw-drop-shadow-alpha: 100%;
+    --tw-drop-shadow-size: initial;
+    --tw-backdrop-blur: initial;
+    --tw-backdrop-brightness: initial;
+    --tw-backdrop-contrast: initial;
+    --tw-backdrop-grayscale: initial;
+    --tw-backdrop-hue-rotate: initial;
+    --tw-backdrop-invert: initial;
+    --tw-backdrop-opacity: initial;
+    --tw-backdrop-saturate: initial;
+    --tw-backdrop-sepia: initial;
+    --tw-duration: initial;
+    --tw-content: "";
+  }
+}