@cloudoperators/juno-ui-components 9.1.0 → 9.3.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,16 +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);
@@ -442,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;
@@ -523,6 +540,7 @@
   --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 */
@@ -608,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);
@@ -679,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 */
@@ -703,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);
@@ -776,6 +817,7 @@
   --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);
 
@@ -864,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);
@@ -934,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 */
@@ -958,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.1.0",
+  "version": "9.3.0",
   "types": "build/index.d.ts",
   "exports": {
     "./index": "./build/index.js",
@@ -15,44 +15,47 @@
     "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",
-    "pnpm": ">=8.0.0"
+    "pnpm": ">=11.20.0"
   },
   "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",
-    "jsdom": "29.1.1",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
+    "focus-trap-react": "12.0.3",
+    "jsdom": "30.0.1",
+    "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": {