feat: create custom properties for button and checkbox using tailwind values as default

This commit is contained in:
Andrey Sychev
2025-02-12 14:59:19 +01:00
parent c47c19b7a6
commit d11fe80ddd
+30 -1
View File
@@ -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";
@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);
}
}