8561 - upgrade Tailwind CSS v3 to v4

.github/workflows/ci_cypress_component.yml

@@ -68,8 +68,6 @@ jobs:
       - name: Install Cypress
         if: steps.cypress-cache.outputs.cache-hit != 'true'
         run: npx cypress install
-      - name: generate global css
-        run: yarn tailwind
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:

.storybook/preview.js

@@ -1,5 +1,5 @@
 import { configureActions } from '@storybook/addon-actions';
-import '../app/react/App/styles/globals.css';
+import '../app/react/App/styles/tailwind.css';
 
 configureActions({
   depth: 100,

app/react/App/App.js

@@ -20,9 +20,10 @@ import 'react-widgets/dist/css/react-widgets.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'nprogress/nprogress.css';
 import 'flag-icons/sass/flag-icons.scss';
-import './scss/styles.scss';
-import './styles/globals.css';
+import 'flowbite/dist/flowbite.min.css';
 import 'flowbite';
+import './styles/tailwind.css';
+import './scss/styles.scss';
 
 const App = ({ customParams }) => {
   const [inlineEditState] = useAtom(inlineEditAtom);

app/react/App/styles/legacyOverrides.js

@@ -0,0 +1,71 @@
+const legacyOverrides = {
+  ':root, :host': {
+    '--font-weight-thin': 100,
+    '--font-weight-extralight': 200,
+    '--font-weight-light': 300,
+    '--font-weight-normal': 400,
+    '--font-weight-medium': 500,
+    '--font-weight-semibold': 600,
+    '--font-weight-bold': 700,
+    '--font-weight-extrabold': 800,
+    '--font-weight-black': 900,
+    '--color-gray-50': '#f9fafb',
+    '--color-gray-100': '#f3f4f6',
+    '--color-gray-200': '#e5e7eb',
+    '--color-gray-300': '#d1d5db',
+    '--color-gray-400': '#9ca3af',
+    '--color-gray-500': '#6b7280',
+    '--color-gray-600': '#4b5563',
+    '--color-gray-700': '#374151',
+    '--color-gray-800': '#1f2937',
+    '--color-gray-900': '#111827',
+  },
+  '.tw-content *, .tw-content ::before, .tw-content ::after': {
+    border: '0 solid #e5e7eb',
+    'box-sizing': 'border-box',
+  },
+  '.tw-content *:not(.monaco-code-editor-container):not(.monaco-code-editor-container *)': {
+    'font-family': "'Inter', sans-serif !important",
+  },
+  '.tw-content .font-thin': { 'font-weight': 100 },
+  '.tw-content .font-extralight': { 'font-weight': 200 },
+  '.tw-content .font-light': { 'font-weight': 300 },
+  '.tw-content .font-normal': { 'font-weight': 400 },
+  '.tw-content .font-medium': { 'font-weight': 500 },
+  '.tw-content .font-semibold': { 'font-weight': 600 },
+  '.tw-content .font-bold': { 'font-weight': 700 },
+  '.tw-content .font-extrabold': { 'font-weight': 800 },
+  '.tw-content .font-black': { 'font-weight': 900 },
+  '.tw-content .border': { 'border-width': '1px' },
+  '.tw-content .border-0': { 'border-width': 0 },
+  '.tw-content .border-2': { 'border-width': '2px' },
+  '.tw-content .border-t': {
+    'border-top-style': 'solid',
+    'border-top-width': '1px',
+  },
+  '.tw-content .border-r': {
+    'border-right-style': 'solid',
+    'border-right-width': '1px',
+  },
+  '.tw-content .border-b': {
+    'border-bottom-style': 'solid',
+    'border-bottom-width': '1px',
+  },
+  '.tw-content .border-l': {
+    'border-left-style': 'solid',
+    'border-left-width': '1px',
+  },
+  '.tw-content .border-b-0': {
+    'border-bottom-style': 'solid',
+    'border-bottom-width': 0,
+  },
+  '.tw-content .border-b-2': {
+    'border-bottom-style': 'solid',
+    'border-bottom-width': '2px',
+  },
+  '.no-tailwind, .no-tailwind *': {
+    all: 'revert !important',
+  },
+};
+
+module.exports = legacyOverrides;

app/react/App/styles/tailwind.css

@@ -0,0 +1,232 @@
+@source '../../../../app/**/*.{js,jsx,ts,tsx}';
+@source '../../../../app/react/**/*.{js,jsx,ts,tsx}';
+
+@import 'tailwindcss';
+
+@layer utilities;
+
+.tw-content {
+  color-scheme: light;
+}
+
+@theme {
+  --font-*: initial;
+  --font-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica Neue,
+    Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+    Segoe UI Symbol, Noto Color Emoji;
+
+  --color-*: initial;
+
+  /* Standard Tailwind colors */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+  --color-gray-950: #030712;
+
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-200: #bfdbfe;
+  --color-blue-300: #93c5fd;
+  --color-blue-400: #60a5fa;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+  --color-blue-800: #1e40af;
+  --color-blue-900: #1e3a8a;
+  --color-blue-950: #172554;
+
+  /* Primary colors (based on SCSS config: #2b56c1) */
+  --color-primary-50: #eef2ff;
+  --color-primary-100: #e0e7ff;
+  --color-primary-200: #c7d2fe;
+  --color-primary-300: #a5b4fc;
+  --color-primary-400: #818cf8;
+  --color-primary-500: #6366f1;
+  --color-primary-600: #4f46e5;
+  --color-primary-700: #2b56c1;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  --color-primary-950: #172554;
+
+  /* Error/Danger colors (based on SCSS config: #d9534f) */
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #d9534f;
+  --color-error-700: #dc2626;
+  --color-error-800: #b91c1c;
+  --color-error-900: #991b1b;
+  --color-error-950: #7f1d1d;
+
+  /* Success colors (based on SCSS config: #5cb85c) */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;
+  --color-success-600: #5cb85c;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+  --color-success-950: #052e16;
+
+  /* Warning colors (based on SCSS config: #f0ad4e) */
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+  --color-warning-950: #451a03;
+
+  /* Alert colors (orange) */
+  --color-alert-50: #fff7ed;
+  --color-alert-100: #ffedd5;
+  --color-alert-200: #fed7aa;
+  --color-alert-300: #fdba74;
+  --color-alert-400: #fb923c;
+  --color-alert-500: #f97316;
+  --color-alert-600: #ea580c;
+  --color-alert-700: #c2410c;
+  --color-alert-800: #9a3412;
+  --color-alert-900: #7c2d12;
+
+  /* Responsive breakpoints */
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+}
+
+@layer base {
+  *, ::before, ::after {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-shadow-color: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+    --tw-border-style: solid;
+  }
+
+  ::backdrop {
+    --tw-border-spacing-x: 0;
+    --tw-border-spacing-y: 0;
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position: ;
+    --tw-gradient-via-position: ;
+    --tw-gradient-to-position: ;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-shadow-color: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+    --tw-border-style: solid;
+  }
+}
+
+/* Custom CSS to fix sidebar visibility */
+@media (min-width: 48rem) {
+  .tw-content [class*="md:visible"] {
+    visibility: visible !important;
+  }
+}
+

app/react/I18N/TranslateModal.tsx

@@ -75,7 +75,7 @@ const TranslateModal = () => {
   return (
     inlineEditState.context && (
       <div className="tw-content">
-        <div className="z-[10000] relative">
+        <div className="z-10000 relative">
           <Modal size="xxxl" id="translationsFormModal">
             <form onSubmit={handleSubmit(submit)}>
               <Modal.Header>

app/react/V2/Components/ErrorHandling/ErrorFallback.tsx

@@ -11,8 +11,8 @@ export const ErrorFallback = ({ error }: ErrorFallbackProps) => {
   return (
     <div className="tw-content">
       <section className="h-full bg-white">
-        <div className="max-w-screen-xl px-4 py-8 mx-auto lg:py-16 lg:px-6">
-          <div className="max-w-screen-sm mx-auto text-center">
+        <div className="max-w-(--breakpoint-xl) px-4 py-8 mx-auto lg:py-16 lg:px-6">
+          <div className="max-w-(--breakpoint-sm) mx-auto text-center">
             {currentError.status && (
               <h1 className="mb-4 font-extrabold tracking-tight text-gray-500 text-7xl lg:text-9xl ">
                 {currentError.status}

app/react/V2/Components/Forms/ColorPicker.tsx

@@ -77,7 +77,7 @@ const ColorPicker = ({
           <>
             <Popover.Button
               ref={setReferenceElement}
-              className="w-[42px] h-[42px] border border-gray-300 cursor-pointer rounded-lg flex items-center justify-center shadow-sm transition hover:border-gray-300 bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500"
+              className="w-[42px] h-[42px] border border-gray-300 cursor-pointer rounded-lg flex items-center justify-center shadow-xs transition hover:border-gray-300 bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-primary-500"
             >
               <div
                 data-testid="colorpicker-button"
@@ -99,7 +99,7 @@ const ColorPicker = ({
                   <li key={color}>
                     <button
                       type="button"
-                      className="w-8 h-8 rounded-md flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      className="w-8 h-8 rounded-md flex items-center justify-center focus:outline-hidden focus:ring-2 focus:ring-primary-500"
                       onClick={() => {
                         changeColor(color);
                         close();