[CB] Replace material ui with native css variables and tailwind utilities by sergeyteleshev · Pull Request #4188 · dbeaver/cloudbeaver

sergeyteleshev · 2026-03-03T14:44:17Z

closes https://github.com/dbeaver/pro/issues/8433

…-variables-and-tailwind-utilities

SychevAndrey

This is a big step forward to clean CSS in the project! Good job. 👍🏻
Please check noted places and let's try to use css nesting more and don't forget about layers.

webapp/packages/core-theming/src/styles/utilities/elevation.css

webapp/packages/core-theming/src/styles/utilities/switch.css

webapp/packages/core-theming/src/styles/_color.scss

SychevAndrey · 2026-03-04T13:19:45Z

webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-autocompletion.css

+ */
+
+.cm-tooltip.cm-tooltip-autocomplete {
+  & > :global(ul) {


you use :global here, but this css file is not .module.css
plus for plain css we should use @layer

webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-tooltip.css

webapp/packages/plugin-codemirror6/src/theme/_base-code-editor.css

Wroud · 2026-03-05T12:51:30Z

webapp/packages/plugin-codemirror6/src/theme/_base-code-editor-autocompletion.css

+    background: var(--theme-sub-secondary) !important;
+    color: var(--theme-on-secondary) !important;
+  }
+
+  & li[aria-selected='true'] {
+    background: var(--theme-secondary) !important;
+    color: var(--theme-text-primary-on-light) !important;


it wasn't !important in scss varian, why it changed?

…-variables-and-tailwind-utilities

This reverts commit 78229ac.

This reverts commit 20ca1b7.

…-variables-and-tailwind-utilities

Wroud

there are a lot of places where shadows / gaps / transitions / animations inlined in the specific styles, they all probably should be part of the design system, not just independent styles for specific components

webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.module.css

Wroud · 2026-03-23T12:28:54Z

webapp/packages/core-theming/src/styles/utilities/ripple.css

+      background-color: currentColor;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity 150ms linear;


is this is unique transition, or it should come from the design system?

moved to design system

webapp/packages/core-theming/src/styles/_color.scss

webapp/packages/plugin-codemirror6/src/theme/base-code-editor-autocompletion.css

webapp/packages/plugin-tailwindcss-theme/src/module.ts

webapp/packages/plugin-tailwindcss-theme/src/PluginTailwindcssThemeBootstrap.ts

…-variables-and-tailwind-utilities

webapp/packages/plugin-tailwindcss-theme/src/styles/ripple.css

Wroud · 2026-03-26T17:30:13Z

webapp/packages/plugin-tailwindcss-theme/src/styles/animation.css

+  --duration-micro: 90ms;
+  --duration-fast: 100ms;
+  --duration-normal: 150ms;
+  --duration-medium: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 350ms;
+  --duration-slowest: 500ms;


do we sure that we need so many of them?
can we choose between 90 and 100 and keep one?
150 and 200?
300 and 350?

for example:
100
200
350
500

Wroud · 2026-03-26T17:33:08Z

webapp/packages/plugin-tailwindcss-theme/src/styles/animation.css

+  --ease-linear: linear;
+  --ease-soft: ease;
+  --ease-in-out: ease-in-out;


--ease-linear: linear;
--ease-in-out: ease-in-out;

naming usually should not reflect implementation, but purpose or some abstraction
for example, --ease-default: linear;, --ease-action: ease-in-out;

…-variables-and-tailwind-utilities

devnaumov · 2026-03-27T11:07:59Z

webapp/packages/core-blocks/src/Table/TableItemExpand.module.css

  height: 16px;
  padding: 0;
-  transition: transform ease-in-out 0.2s;
+  transition: transform var(--duration-medium) var(--ease-smooth);


No need for tailwind import as we dont use @apply here, css variables can be used without problem

leaved only where we use @apply

devnaumov · 2026-03-27T11:08:04Z

webapp/packages/core-blocks/src/Table/TableItemGroupExpand.module.css

  opacity: 0.5;
  transform: rotate(-90deg);
-  transition: transform 0.15s ease-in-out;
+  transition: transform var(--duration-medium) var(--ease-smooth);


…-variables-and-tailwind-utilities

dbeaver/pro#8433 initial version of material ui refactor

d05caec

sergeyteleshev self-assigned this Mar 3, 2026

sergeyteleshev added 3 commits March 3, 2026 17:21

fixes arrow colors

bcdd010

fixes arrow colors 2

3339162

fixes colors

53ef45a

sergeyteleshev force-pushed the 8433-cb-replace-material-ui-with-native-css-variables-and-tailwind-utilities branch from 45a3d76 to 53ef45a Compare March 4, 2026 09:08

sergeyteleshev marked this pull request as ready for review March 4, 2026 11:38

Merge branch 'devel' into 8433-cb-replace-material-ui-with-native-css…

9a01b59

…-variables-and-tailwind-utilities

sergeyteleshev requested review from SychevAndrey, Wroud and devnaumov March 4, 2026 11:38

SychevAndrey requested changes Mar 4, 2026

View reviewed changes

sergeyteleshev added 4 commits March 4, 2026 19:27

pr fixes

b180900

removes layers due to it loses styles specificity race

cf7f3bb

fixes autocomplete styles

6315779

adds variables for typography

3fe11af

sergeyteleshev requested a review from SychevAndrey March 5, 2026 10:06

Wroud reviewed Mar 5, 2026

View reviewed changes

sergeyteleshev added 12 commits March 10, 2026 13:31

Merge branch 'devel' into 8433-cb-replace-material-ui-with-native-css…

8887921

…-variables-and-tailwind-utilities

many composes changed

ac964d2

moves switch logic to module styles

099922d

removes elevation styles

e9f35da

removes unused code

3a3257a

migrates ripple effect to tw class

78229ac

Revert "migrates ripple effect to tw class"

4fa86cf

This reverts commit 78229ac.

uses classname theme-typography for button

e32d078

adds elevation styles

5b5db8b

adds elevation styles 2

ca00d60

moves theme ripple

dad8a28

reverts scss for sql editor

0739df4

sergeyteleshev added 7 commits March 16, 2026 22:29

reverts scss for sql editor 2

fa7c481

adds tailwindcss utilities + example

20ca1b7

Revert "adds tailwindcss utilities + example"

dba39f2

This reverts commit 20ca1b7.

creates tailwindcss plugin with shadow tokens + spread it across the app

c8cc5d1

moves typography to the tailwindcss styles

bb882d7

refactors sql editor styles

055b24f

Merge branch 'devel' into 8433-cb-replace-material-ui-with-native-css…

218ac1d

…-variables-and-tailwind-utilities

sergeyteleshev requested a review from Wroud March 23, 2026 11:29

Wroud reviewed Mar 23, 2026

View reviewed changes

sergeyteleshev added 5 commits March 24, 2026 11:25

Merge branch 'devel' into 8433-cb-replace-material-ui-with-native-css…

62cb692

…-variables-and-tailwind-utilities

moves styles from tailwindcss folder to styles

1d5aecc

moves ripple to tailwindcss plugin

df80383

removes unused files

62bb054

removes unused file index

3398eb5

Wroud requested changes Mar 25, 2026

View reviewed changes

webapp/packages/plugin-tailwindcss-theme/src/styles/ripple.css Outdated Show resolved Hide resolved

sergeyteleshev added 2 commits March 26, 2026 10:50

removes redundant tailwindcss import

6c357a3

adds animation layer for tailwindcss

0a8eddd

sergeyteleshev requested a review from Wroud March 26, 2026 11:05

Wroud requested changes Mar 26, 2026

View reviewed changes

refactors animations

6aa0ad0

sergeyteleshev requested a review from Wroud March 26, 2026 21:23

sergeyteleshev added 2 commits March 26, 2026 22:24

Merge branch 'devel' into 8433-cb-replace-material-ui-with-native-css…

970fa0a

…-variables-and-tailwind-utilities

build fix

d95907c

devnaumov requested changes Mar 27, 2026

View reviewed changes

removes redundant imports of tailwindcss for styles

d1efcf2

sergeyteleshev requested a review from devnaumov March 27, 2026 12:12

Merge branch 'devel' into 8433-cb-replace-material-ui-with-native-css…

16c1b94

…-variables-and-tailwind-utilities

Conversation

sergeyteleshev commented Mar 3, 2026

Uh oh!

SychevAndrey left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Wroud left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants