fix(Button,Text): tailwind-colors

.changeset/gorgeous-shoes-turn.md

@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': patch
+---
+
+button and text color fix

apps/ui/.storybook/main.ts

@@ -25,6 +25,7 @@ module.exports = {
  '@storybook/addon-links',
  '@storybook/addon-essentials',
  '@storybook/addon-controls',
+ '@storybook/addon-themes',
  'storybook-css-modules',
  {
  name: '@storybook/addon-postcss',

apps/ui/lib/components/Button/index.tsx

@@ -9,11 +9,12 @@ const buttonVariants = cva(
  {
  variants: {
  variant: {
- default: 'bg-primary-700 text-primaryText hover:bg-primary/90',
- destructive: 'bg-error-900 text-primaryText hover:bg-destructive/90',
+ default: 'bg-primary-700 text-primaryText hover:bg-primary-700/90',
+ destructive: 'bg-error-900 text-primaryText hover:bg-error-900/90',
  outline:
  'border border-input hover:bg-accent hover:text-accent-foreground',
- secondary: 'bg-secondary-700 text-primaryText hover:bg-secondary/80',
+ secondary:
+ 'bg-secondary-700 text-primaryText hover:bg-secondary-700/80',
  link: 'text-primary-500 underline-offset-4 hover:underline',
  },
  size: {

apps/ui/lib/components/Typography/Text.tsx

@@ -37,15 +37,16 @@ export const Text: React.FC<TextProps> = ({
 
  const Comp = asChild ? Slot : 'p';
  const classNames = VARIANT_MAPPINGS[variant as keyof typeof VARIANT_MAPPINGS];
+ console.log('test', classNames?.slice(1));
  const mergedClasses = cn(style.text, classNames?.slice(1), props.className);
-
+ console.log('merged classes', mergedClasses);
  return (
  <div>
  <Comp
+ {...props}
  className={mergedClasses}
  style={textStyle}
  children={children}
- {...props}
  />
  </div>
  );

apps/ui/package.json

@@ -66,6 +66,7 @@
  "@storybook/addon-info": "^5.3.21",
  "@storybook/addon-links": "^7.5.3",
  "@storybook/addon-postcss": "^2.0.0",
+ "@storybook/addon-themes": "^8.3.0",
  "@storybook/addons": "^7.5.3",
  "@storybook/builder-vite": "^8.2.1",
  "@storybook/react": "^7.6.17",

apps/ui/stories/Label.stories.tsx

@@ -20,3 +20,11 @@ export const BasicLabelComponent: LabelComponentStory = {
  children: 'First Name:',
  },
 };
+
+export const LabelWithTailwind = () => {
+ return (
+ <Label htmlFor="firstName" className="text-error-900">
+ First Name:
+ </Label>
+ );
+};

apps/ui/stories/Typography.stories.tsx

@@ -80,91 +80,91 @@ export const AllVariants = () => {
  {/* Body-1 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="body-1" color="#2A2C35">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ body-1
  </Text>
  </div>
 
  {/* Body-2 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="body-2" color="#2A2C35">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ body-2
  </Text>
  </div>
 
  {/* Body-3 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="body-3" color="#2A2C35">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ body-3
  </Text>
  </div>
 
  {/* Button-1 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="button-1" color="#2A2C35">
- Click Me
+ Button-1
  </Text>
  </div>
 
  {/* Heading-1 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="heading-1" color="#2A2C35">
- Lorem Ipsum
+ Heading-1
  </Text>
  </div>
 
  {/* Heading-2 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="heading-2" color="#2A2C35">
- Lorem Ipsum
+ Heading-2
  </Text>
  </div>
 
  {/* Heading-3 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="heading-3" color="#2A2C35">
- Lorem Ipsum
+ Heading-3
  </Text>
  </div>
 
  {/* Heading-4 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="heading-4" color="#2A2C35">
- Lorem Ipsum
+ Heading-4
  </Text>
  </div>
 
  {/* Heading-5 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="heading-5" color="#2A2C35">
- Lorem Ipsum
+ Heading-5
  </Text>
  </div>
 
  {/* Heading-6 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="heading-6" color="#2A2C35">
- Lorem Ipsum
+ Heading-6
  </Text>
  </div>
 
  {/* Label-1 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="label-1" color="#2A2C35">
- Label Text
+ label-1
  </Text>
  </div>
 
  {/* Label-2 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="label-2" color="#2A2C35">
- Label Text
+ label-2
  </Text>
  </div>
 
  {/* Subtitle-1 */}
  <div style={{ marginBottom: '20px' }}>
  <Text variant="subtitle-1" color="#2A2C35">
- Subtitle Text
+ subtitle-1
  </Text>
  </div>
  </>
@@ -186,7 +186,17 @@ export const withTailwind = () => {
  <Text className="text-error-700" color="#f0a">
  With color props
  </Text>
- <Text className="text-secondary-300 text-xl">with tailwind classes</Text>
+ <Text variant="heading-1">with tailwind classes</Text>
+ </div>
+ );
+};
+
+export const withTailwindAndVariant = () => {
+ return (
+ <div style={{ marginBottom: '20px' }}>
+ <Text variant="heading-1" className="text-error-700">
+ with tailwind classes and variant
+ </Text>
  </div>
  );
 };