chore(deps-dev): bump tailwindcss from 3.4.17 to 4.0.0 in the css gro…

…up (#3256)
process-analytics · Jan 27, 2025 · 464bc4c · 464bc4c
1 parent 8098f9a
commit 464bc4c
Show file tree

Hide file tree

Showing 5 changed files with 776 additions and 742 deletions.
diff --git a/dev/public/index.html b/dev/public/index.html
@@ -13,7 +13,7 @@
     <!--Nav-->
     <nav class="bg-gray-800 pt-2 md:pt-1 pb-1 px-1 mt-0 h-auto w-full">
       <div class="flex flex-wrap items-center">
-        <div class="flex flex-shrink justify-center md:justify-start text-white">
+        <div class="flex shrink justify-center md:justify-start text-white">
           <a class="flex items-center mb-1 md:mt-2 md:mb-2" href="../../examples/index.html">
             <img src="static/img/logo_white.svg" alt="logo" class="h-11 ml-3 mr-2">
             <span class="h-11 ml-2 py-1 text-2xl md:text-3xl">bpmn-visualization</span>
@@ -22,13 +22,13 @@
       </div>
     </nav>
     <!-- Page section -->
-    <div class="flex flex-col md:flex-row flex-grow">
+    <div class="flex flex-col md:flex-row grow">
       <!-- Control Panel -->
       <div class="bg-gray-800 shadow-xl w-full md:w-48">
         <ul class="flex flex-row md:flex-col py-0 px-1 md:px-2 md:mr-3">
             <li>
               <div class="select-none pt-1 pb-0.5 md:pb-5 md:pt-0 pl-1 border-b-2 border-gray-800">
-                <div class="bg-gradient-to-b from-red-200 to-red-100 border-b-4 border-red-600 rounded-lg shadow-xl hover:border-red-900">
+                <div class="bg-linear-to-b from-red-200 to-red-100 border-b-4 border-red-600 rounded-lg shadow-xl hover:border-red-900">
                   <div class="cursor-pointer text-red-500 hover:text-red-900">
                     <div class="text-center">
                       <input type="file" id="bpmn-file" name="file" class="hidden"/>
@@ -47,7 +47,7 @@
               <div class="py-1 md:py-3 pl-1 text-white md:border-b-2 md:border-red-500">
                 <div class="block no-underline md:pb-3 md:border-b-2 md:border-blue-600">
                   <label class="flex justify-evenly md:block">Fit type:
-                    <select name="fitTypes" id="fitType-selected" class="w-1/2 md:w-full pl-1 md:pl-0 text-blue-900">
+                    <select name="fitTypes" id="fitType-selected" class="w-1/2 md:w-full pl-1 md:pl-0 text-blue-900 bg-white">
                       <option value="None">None</option>
                       <option value="HorizontalVertical">Horizontal-Vertical</option>
                       <option value="Horizontal">Horizontal</option>
@@ -58,7 +58,7 @@
                 </div>
                 <div class="block no-underline mt-2 md:mt-3">
                   <label for="fit-margin" class="flex justify-around">Fit margin:
-                    <input type="number" id="fit-margin" class="w-1/3 pl-1 text-red-900 md:ml-auto" min="0" max="100" value="50" maxlength="3" oninput="validity.valid||(value='');">
+                    <input type="number" id="fit-margin" class="w-1/3 pl-1 text-red-900 bg-white md:ml-auto" min="0" max="100" value="50" maxlength="3" oninput="validity.valid||(value='');">
                   </label>
                 </div>
               </div>
@@ -76,7 +76,7 @@
               </div>
               <div class="py-1 md:py-3 pl-1 text-white md:border-b-2 md:border-b-fuchsia-400">
                 <label class="flex md:block">Theme:
-                  <select name="themes" id="theme-selected" class="w-1/2 md:w-full pl-1 md:pl-0 ml-2 md:ml-0 text-blue-900">
+                  <select name="themes" id="theme-selected" class="w-1/2 md:w-full pl-1 md:pl-0 ml-2 md:ml-0 text-blue-900 bg-white">
                     <option value="default" selected>Default</option>
                     <option value="dark">Dark</option>
                     <option value="brown">Brown</option>
@@ -90,10 +90,10 @@
 
       <!-- Main section -->
       <div class="flex flex-1 flex-col bg-gray-100 md:rounded-tl-2xl md:rounded-bl-2xl mt-2 md:mt-0">
-        <div class="flex-grow mt-2 p-6 flex flex-col">
+        <div class="grow mt-2 p-6 flex flex-col">
           <!-- BPMN container space -->
           <!-- relative position is required by bpmn-container and the generated drop-container element to make its absolute position work -->
-          <div class="flex-grow bg-white border-transparent rounded-lg shadow-xl relative">
+          <div class="grow bg-white border-transparent rounded-lg shadow-xl relative">
             <!-- set absolute and no inset, as mxGraph needs absolute dimension to make the fit work and to fit the whole parent container -->
             <div id="bpmn-container" class="overflow-hidden absolute inset-0">
             </div>

diff --git a/dev/public/static/css/styles.css b/dev/public/static/css/styles.css
@@ -1,7 +1,23 @@
 /* static/css/styles.css */
+@import 'tailwindcss';
+
 /* noinspection CssInvalidAtRule */
-@tailwind base;
-/* noinspection CssInvalidAtRule */
-@tailwind components;
-/* noinspection CssInvalidAtRule */
-@tailwind utilities;
+@config '../../../../tailwind.config.js';
+
+/*
+  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);
+  }
+}