From d11fe80ddd28c19daf3c38d825b1fc997db5543c Mon Sep 17 00:00:00 2001 From: Andrey Sychev Date: Mon, 10 Feb 2025 10:33:23 +0100 Subject: [PATCH] feat: create custom properties for button and checkbox using tailwind values as default --- common-react/@dbeaver/ui-kit/src/index.css | 31 +++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/common-react/@dbeaver/ui-kit/src/index.css b/common-react/@dbeaver/ui-kit/src/index.css index 4ad750fc15..58dafa5c52 100644 --- a/common-react/@dbeaver/ui-kit/src/index.css +++ b/common-react/@dbeaver/ui-kit/src/index.css @@ -5,4 +5,33 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ -@import "tailwindcss"; \ No newline at end of file +@import "tailwindcss"; + +@layer components { + :root { + /* Button */ + --btn-radius: var(--radius-md); + --btn-padding-inline: --spacing(5); + --btn-padding-block: --spacing(2); + + --btn-font-weight: var(--font-weight-semibold) + + --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-secondary-foreground: var(--color-primary-500); + --btn-secondary-background: transparent; + --btn-secondary-background-hover: var(--color-primary-50); + --btn-secondary-background-active: var(--color-primary-100); + --btn-secondary-border: var(--color-primary-500); + + /* Checkbox */ + --checkbox-background: var(--color-white); + --checkbox-foreground: var(--color-text); + --checkbox-border: var(--color-orange-500); + --checkbox-selectBackground: var(--color-orange-500); + --checkbox-selectBorder: var(--color-primary-500); + } +} \ No newline at end of file