@cloudoperators/juno-ui-components 9.0.1 → 9.2.0

package/build/theme.css

@@ -276,6 +276,11 @@
   /* Component Background Colors: */
   --background-color-theme-badge-default: var(--color-badge-default-bg);
   --background-color-theme-box-default: var(--color-box-bg);
+  --background-color-theme-box-info: var(--color-box-info-bg);
+  --background-color-theme-box-success: var(--color-box-success-bg);
+  --background-color-theme-box-warning: var(--color-box-warning-bg);
+  --background-color-theme-box-error: var(--color-box-error-bg);
+  --background-color-theme-box-danger: var(--color-box-danger-bg);
 
   /* Side Navigation Background Colors */
   --background-color-theme-sidenav: var(--color-sidenav-background);
@@ -344,6 +349,7 @@
   --background-color-theme-checkbox: var(--color-checkbox-bg); /* -> .jn:bg-theme-checkbox */
 
   --background-color-theme-code-block: var(--color-codeblock-bg);
+  --background-color-theme-status-details: var(--color-status-details-bg);
 
   --background-color-theme-content-area-bg: var(--color-content-area-bg);
 
@@ -402,15 +408,26 @@
   --text-color-theme-pageheader-appname-default: var(--color-pageheader-appname-text-default);
   --text-color-theme-pageheader-appname-hover: var(--color-pageheader-appname-text-hover);
   --text-color-theme-sidenavigation-item-active: var(--color-sidenavigation-item-active);
+  --text-color-theme-status-details: var(--color-status-details-text);
+  --text-color-theme-status-code: var(--color-status-code);
 
   /* Component Border Colors: */
   --border-color-theme-default: var(--color-border-default);
+  --border-color-theme-high: var(--color-border-high);
+  --border-color-theme-higher: var(--color-border-higher);
 
   --border-color-theme-box-default: var(--color-box-border);
+  --border-color-theme-box-info: var(--color-box-info-border);
+  --border-color-theme-box-success: var(--color-box-success-border);
+  --border-color-theme-box-warning: var(--color-box-warning-border);
+  --border-color-theme-box-error: var(--color-box-error-border);
+  --border-color-theme-box-danger: var(--color-box-danger-border);
 
   --border-color-theme-card-default: var(--color-card-border-default);
+  --border-color-theme-card-hover: var(--color-card-border-hover);
 
   --border-color-theme-codeblock-bar: var(--color-codeblock-bar-border);
+  --border-color-theme-codeblock-footer: var(--color-codeblock-footer-border);
   --border-color-theme-codeblock-tab-active: var(--color-text-default);
 
   --border-color-theme-datalist-row: var(--color-datalist-row-border);
@@ -441,6 +458,7 @@
   --border-color-theme-textinput-default: var(--color-textinput-default-border);
 
   --border-color-theme-sidenav: var(--color-sidenav-border);
+  --border-color-theme-status-details: var(--color-status-details-border);
 
   --padding-xs: 0.25rem;
   --padding-sm: 0.5rem;
@@ -521,6 +539,8 @@
   /* LT Global */
   --color-global-bg: var(--color-juno-grey-light-1);
   --color-border-default: var(--color-juno-grey-light-7);
+  --color-border-high: var(--color-juno-grey-light-9);
+  --color-border-higher: rgb(183, 183, 183);
   --color-global-text: var(--color-juno-text-default);
   --color-content-area-bg: var(--color-background-lvl-0);
   /* LT FOCUS */
@@ -606,17 +626,24 @@
   --color-icon-severityMedium: var(--color-severity-medium);
   --color-icon-severityLow: var(--color-severity-low);
 
+  /* LT Semantic Background Colors */
+  --color-info-bg: rgb(229, 241, 250);
+  --color-warning-bg: rgb(255, 247, 229);
+  --color-success-bg: rgb(237, 248, 232);
+  --color-danger-bg: rgb(249, 229, 229);
+  --color-error-bg: rgb(249, 229, 229);
+
   /* LT Message */
   --color-message-danger-border: var(--color-danger);
-  --color-message-danger-bg: rgb(249, 229, 229);
+  --color-message-danger-bg: var(--color-danger-bg);
   --color-message-default-border: var(--color-info);
-  --color-message-default-bg: rgb(229, 241, 250);
+  --color-message-default-bg: var(--color-info-bg);
   --color-message-error-border: var(--color-error);
-  --color-message-error-bg: rgb(249, 229, 229);
+  --color-message-error-bg: var(--color-error-bg);
   --color-message-warning-border: var(--color-warning);
-  --color-message-warning-bg: rgb(255, 247, 229);
+  --color-message-warning-bg: var(--color-warning-bg);
   --color-message-success-border: var(--color-success);
-  --color-message-success-bg: rgb(237, 248, 232);
+  --color-message-success-bg: var(--color-success-bg);
 
   /* LT Introbox */
   --color-introbox-bg: var(--color-background-lvl-2);
@@ -635,6 +662,7 @@
   /* LT Card */
   --color-card-background-default: var(--color-white);
   --color-card-border-default: var(--color-border-default);
+  --color-card-border-hover: var(--color-border-high);
   /* LT Checkbox */
   --color-checkbox-bg: var(--color-background-lvl-5);
   --color-checkbox-checked-color: var(--color-accent);
@@ -676,6 +704,12 @@
   /* LT CodeBlock */
   --color-codeblock-bg: var(--color-background-lvl-2);
   --color-codeblock-bar-border: var(--color-background-lvl-4);
+  --color-codeblock-footer-border: var(--color-background-lvl-4);
+  /* LT Status */
+  --color-status-details-bg: var(--color-background-lvl-2);
+  --color-status-details-text: var(--color-text-default);
+  --color-status-details-border: var(--color-border-default);
+  --color-status-code: var(--color-text-disabled);
   /* LT Panel */
   --color-panel-bg: rgb(252 252 252 / 0.8);
   /* LT PageHeader */
@@ -700,6 +734,16 @@
   /* LT Box */
   --color-box-bg: var(--color-background-lvl-1);
   --color-box-border: var(--color-background-lvl-3);
+  --color-box-info-bg: var(--color-info-bg);
+  --color-box-info-border: var(--color-info);
+  --color-box-success-bg: var(--color-success-bg);
+  --color-box-success-border: var(--color-success);
+  --color-box-warning-bg: var(--color-warning-bg);
+  --color-box-warning-border: var(--color-warning);
+  --color-box-error-bg: var(--color-error-bg);
+  --color-box-error-border: var(--color-error);
+  --color-box-danger-bg: var(--color-danger-bg);
+  --color-box-danger-border: var(--color-danger);
   /* LT SideNavigation */
   --color-sidenavigation-item-active: var(--color-black);
   --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);
@@ -730,7 +774,7 @@
   ); /* Light 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. */
   /* LT Box Shadow */
   --box-shadow-default: 0 1px 2px 0 rgba(34, 54, 73, 0.3);
-  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.3)), 0 2px 8px 0 rgba(0, 0, 0, 0.3);
+  --box-shadow-hover: 0 0 0 1px var(--color-color-shadow, rgba(79, 79, 79, 0.2)), 0 2px 8px 0 rgba(0, 0, 0, 0.2);
   /* LT PageFooter */
   --color-pagefooter-text: var(--color-text-light);
   --color-pagefooter-background: var(--color-white);
@@ -772,6 +816,8 @@
   /* DT Global */
   --color-global-bg: var(--color-juno-grey-blue-10);
   --color-border-default: var(--color-juno-grey-blue-3);
+  --color-border-high: var(--color-juno-grey-blue-1);
+  --color-border-higher: rgb(92, 92, 92);
   --color-global-text: var(--color-juno-text-default);
   --color-content-area-bg: var(--color-background-lvl-0);
 
@@ -860,17 +906,24 @@
   --color-icon-severityMedium: var(--color-severity-medium);
   --color-icon-severityLow: var(--color-severity-low);
 
+  /* DT Semantic Background Colors */
+  --color-info-bg: rgb(14, 48, 57);
+  --color-warning-bg: rgb(49, 47, 24);
+  --color-success-bg: rgb(20, 48, 34);
+  --color-danger-bg: rgb(49, 27, 26);
+  --color-error-bg: rgb(49, 27, 26);
+
   /* DT Message */
   --color-message-danger-border: var(--color-danger);
-  --color-message-danger-bg: rgb(49, 27, 26);
+  --color-message-danger-bg: var(--color-danger-bg);
   --color-message-default-border: var(--color-info);
-  --color-message-default-bg: rgb(14, 48, 57);
+  --color-message-default-bg: var(--color-info-bg);
   --color-message-error-border: var(--color-error);
-  --color-message-error-bg: rgb(49, 27, 26);
+  --color-message-error-bg: var(--color-error-bg);
   --color-message-warning-border: var(--color-warning);
-  --color-message-warning-bg: rgb(49, 47, 24);
+  --color-message-warning-bg: var(--color-warning-bg);
   --color-message-success-border: var(--color-success);
-  --color-message-success-bg: rgba(20, 48, 34);
+  --color-message-success-bg: var(--color-success-bg);
   /* DT Introbox */
   --color-introbox-bg: var(--color-background-lvl-2);
   --color-introbox-border: var(--color-accent);
@@ -888,6 +941,7 @@
   /* DT Card */
   --color-card-background-default: var(--color-juno-grey-blue-10);
   --color-card-border-default: var(--color-border-default);
+  --color-card-border-hover: var(--color-border-high);
   /* DT Checkbox */
   --color-checkbox-bg: var(--color-background-lvl-5);
   --color-checkbox-checked-color: var(--color-accent);
@@ -929,6 +983,12 @@
   /* DT CodeBlock */
   --color-codeblock-bg: var(--color-background-lvl-2);
   --color-codeblock-bar-border: var(--color-background-lvl-4);
+  --color-codeblock-footer-border: var(--color-background-lvl-4);
+  /* DT Status */
+  --color-status-details-bg: var(--color-background-lvl-2);
+  --color-status-details-text: var(--color-text-default);
+  --color-status-details-border: var(--color-border-default);
+  --color-status-code: var(--color-text-disabled);
   /* DT Panel */
   --color-panel-bg: rgb(from var(--color-juno-grey-blue-11) r g b / 0.75);
   /* DT PageHeader */
@@ -953,6 +1013,16 @@
   /* DT Box */
   --color-box-bg: var(--color-background-lvl-1);
   --color-box-border: var(--color-background-lvl-3);
+  --color-box-info-bg: var(--color-info-bg);
+  --color-box-info-border: var(--color-info);
+  --color-box-success-bg: var(--color-success-bg);
+  --color-box-success-border: var(--color-success);
+  --color-box-warning-bg: var(--color-warning-bg);
+  --color-box-warning-border: var(--color-warning);
+  --color-box-error-bg: var(--color-error-bg);
+  --color-box-error-border: var(--color-error);
+  --color-box-danger-bg: var(--color-danger-bg);
+  --color-box-danger-border: var(--color-danger);
   /* DT SideNavigation */
   --color-sidenavigation-item-active: var(--color-white);
   --color-sidenavigation-item-active-bg: var(--color-background-lvl-0);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@cloudoperators/juno-ui-components",
   "private": false,
   "source": "src/index.js",
-  "version": "9.0.1",
+  "version": "9.2.0",
   "types": "build/index.d.ts",
   "exports": {
     "./index": "./build/index.js",
@@ -15,7 +15,10 @@
     "build/*"
   ],
   "author": "UI-Team",
-  "repository": "https://github.com/cloudoperators/juno/tree/main/packages/juno-ui-components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloudoperators/juno/tree/main/packages/juno-ui-components"
+  },
   "license": "Apache-2.0",
   "engines": {
     "node": ">=20.19.0",
@@ -24,35 +27,35 @@
   "devDependencies": {
     "@babel/preset-env": "7.29.7",
     "@babel/preset-react": "7.28.5",
-    "@floating-ui/react": "0.27.19",
+    "@floating-ui/react": "0.27.20",
     "@headlessui/react": "2.2.10",
     "@material-design-icons/svg": "0.14.15",
-    "@storybook/addon-docs": "10.4.4",
-    "@storybook/addon-links": "10.4.4",
-    "@storybook/react-vite": "10.4.4",
-    "@tailwindcss/vite": "4.3.0",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
+    "@tailwindcss/vite": "4.3.3",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.2",
-    "eslint-plugin-storybook": "10.4.4",
+    "@vitejs/plugin-react": "6.0.4",
+    "eslint-plugin-storybook": "10.4.6",
     "flatpickr": "4.6.13",
-    "focus-trap-react": "12.0.2",
+    "focus-trap-react": "12.0.3",
     "jsdom": "29.1.1",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-tabs": "6.1.1",
-    "storybook": "10.4.4",
-    "tailwindcss": "4.3.0",
+    "storybook": "10.4.6",
+    "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
     "vite": "8.0.16",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-glob": "0.3.2",
     "vite-plugin-svgr": "5.2.0",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.8",
+    "vitest": "4.1.10",
     "@cloudoperators/juno-config": "0.1.0"
   },
   "peerDependencies": {