opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-16 14:50:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: a11y issues with color contrast

Browse Source
This commit is contained in:
Andrey Sychev
2025-02-12 14:59:20 +01:00
parent 01b1fa82ec
commit ba32e62252
2 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common-react/@dbeaver/ui-kit/.ladle/config.mjs
+8
View File
@@ -0,0 +1,8 @@
/** @type {import('@ladle/react').UserConfig} */
export default {
addons: {
a11y: {
enabled: true,
},
},
};
common-react/@dbeaver/ui-kit/src/index.css
+14 -11
View File
@@ -5,7 +5,7 @@
* Licensed under the Apache License, Version 2.0.
* you may not use this file except in compliance with the License.
*/
@import "tailwindcss";
@import 'tailwindcss';
@layer components {
:root {
@@ -17,9 +17,12 @@
--color-primary-50: var(--color-blue-50);
--color-primary-100: var(--color-blue-100);
--color-primary-200: var(--color-blue-200);
--color-primary-500: var(--color-blue-500);
--color-primary-600: var(--color-blue-600);
--color-primary-700: var(--color-blue-700);
--color-primary-800: var(--color-blue-800);
--color-primary-900: var(--color-blue-900);
/* Button */
--btn-radius: var(--radius-md);
@@ -29,22 +32,22 @@
/* Primary Button */
--btn-foreground: var(--color-white);
--btn-background: var(--color-primary-500);
--btn-background-hover: var(--color-primary-600);
--btn-background-active: var(--color-primary-700);
--btn-background: var(--color-primary-600);
--btn-background-hover: var(--color-primary-700);
--btn-background-active: var(--color-primary-800);
/* Secondary Button */
--btn-secondary-foreground: var(--color-primary-500);
--btn-secondary-foreground: var(--color-primary-600);
--btn-secondary-background: transparent;
--btn-secondary-background-hover: var(--color-primary-50);
--btn-secondary-background-active: var(--color-primary-100);
--btn-secondary-border-color: var(--color-primary-500);
--btn-secondary-border-color: var(--color-primary-600);
/* Danger Button */
--btn-danger-foreground: var(--color-white);
--btn-danger-background: var(--color-red-500);
--btn-danger-background-hover: var(--color-red-600);
--btn-danger-background-active: var(--color-red-700);
--btn-danger-background: var(--color-red-600);
--btn-danger-background-hover: var(--color-red-700);
--btn-danger-background-active: var(--color-red-800);
/* Checkbox */
--checkbox-background: var(--color-primary-500);
@@ -53,5 +56,5 @@
--checkbox-selectBackground: var(--color-orange-500);
--checkbox-selectBorder: var(--color-primary-500);
--checkbox-gap: --spacing(1);
}
}
}
}