Merge pull request #6 from Bland-UI/feat/tailwind-var

Feat/tailwind var
Bland-UI · Jun 19, 2024 · eb3467b · eb3467b
2 parents 99be7e4 + cbb9d7c
commit eb3467b
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 76 deletions.
diff --git a/.changeset/serious-pens-hear.md b/.changeset/serious-pens-hear.md
@@ -0,0 +1,6 @@
+---
+"@blandui/blandui-react": patch
+"@blandui/blandui": patch
+---
+
+CSS var are now available for colors
diff --git a/packages/blandui-react/src/components/Chip/Chip.tsx b/packages/blandui-react/src/components/Chip/Chip.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, forwardRef } from 'react';
+import { ComponentProps, MouseEvent, forwardRef } from 'react';
 import { X } from 'lucide-react';
 import cn from '../../utils/cn';
 
@@ -14,6 +14,8 @@ export interface ChipProps extends ComponentProps<'div'> {
 
 	countableClassName?: string;
 	count?: number;
+
+	onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
 export const Chip = forwardRef<HTMLDivElement, ChipProps>((
@@ -28,6 +30,9 @@ export const Chip = forwardRef<HTMLDivElement, ChipProps>((
 
 		countableClassName,
 		count = 0,
+
+		onClick,
+
 		...props
 	},
 	ref,
@@ -68,10 +73,10 @@ export const Chip = forwardRef<HTMLDivElement, ChipProps>((
 	);
 
 	return (
-		<div className={chipCn} ref={ref} {...props}>
+		<div className={chipCn} ref={ref} onClick={type === 'cancellable' ? undefined : onClick} {...props}>
 			{ children }
 
-			{ type === 'cancellable' && <span className={cancellableCn}>
+			{ type === 'cancellable' && <span className={cancellableCn} onClick={onClick}>
 				<X size="0.75rem" className="text-subtle" />
 			</span>}
 

diff --git a/packages/blandui-react/src/components/SegmentedBar/SegmentedBar.tsx b/packages/blandui-react/src/components/SegmentedBar/SegmentedBar.tsx
@@ -1,11 +1,11 @@
-import { forwardRef, useCallback } from 'react';
+import { ReactNode, forwardRef, useCallback } from 'react';
 import cn from '../../utils/cn';
 
 export interface SegmentedBarProps {
 	className?: string;
 	size?: 'md' | 'lg';
 	activeTab?: number | string;
-	tabs?: Array<{ label: string; value: number | string }>;
+	tabs?: Array<{ label: string | ReactNode; value: number | string }>;
 	onClick?: (value: number | string) => void;
 }
 

diff --git a/packages/blandui/src/Color/colors.tsx b/packages/blandui/src/Color/colors.tsx
@@ -1,86 +1,86 @@
 export default {
 	// Brand colors
 	carbon: {
-		0:    '#FFF',
-		50:   '#f2f2f2',
-		100:  '#e6e6e6',
-		200:  '#cccccc',
-		300:  '#b3b3b3',
-		400:  '#999999',
-		500:  '#808080',
-		600:  '#666666',
-		700:  '#4d4d4d',
-		800:  '#333333',
-		900:  '#191919',
-		950:  '#0d0d0d',
-		1000: '#000000',
+		0:    'var(--color-carbon-0)',
+		50:   'var(--color-carbon-50)',
+		100:  'var(--color-carbon-100)',
+		200:  'var(--color-carbon-200)',
+		300:  'var(--color-carbon-300)',
+		400:  'var(--color-carbon-400)',
+		500:  'var(--color-carbon-500)',
+		600:  'var(--color-carbon-600)',
+		700:  'var(--color-carbon-700)',
+		800:  'var(--color-carbon-800)',
+		900:  'var(--color-carbon-900)',
+		950:  'var(--color-carbon-950)',
+		1000: 'var(--color-carbon-1000)',
 	},
 	gray: {
-		0:    '#ffffff',
-		50:   '#f2f2f2',
-		100:  '#e6e6e6',
-		200:  '#cccccc',
-		300:  '#b3b3b3',
-		400:  '#999999',
-		500:  '#808080',
-		600:  '#666666',
-		700:  '#4d4d4d',
-		800:  '#333333',
-		900:  '#191919',
-		950:  '#0d0d0d',
-		1000: '#000000',
+		0:    'var(--color-gray-0)',
+		50:   'var(--color-gray-50)',
+		100:  'var(--color-gray-100)',
+		200:  'var(--color-gray-200)',
+		300:  'var(--color-gray-300)',
+		400:  'var(--color-gray-400)',
+		500:  'var(--color-gray-500)',
+		600:  'var(--color-gray-600)',
+		700:  'var(--color-gray-700)',
+		800:  'var(--color-gray-800)',
+		900:  'var(--color-gray-900)',
+		950:  'var(--color-gray-950)',
+		1000: 'var(--color-gray-1000)',
 	},
 
 	// Functional colors
 	amber: {
-		0:    '#ffffff',
-		50:   '#fffbdb',
-		100:  '#fff6b5',
-		200:  '#ffe273',
-		300:  '#ffd036',
-		400:  '#ffbf00',
-		500:  '#e0a800',
-		600:  '#c29100',
-		700:  '#a37a00',
-		800:  '#846300',
-		900:  '#664c00',
-		1000: '#473500',
-		1100: '#281e00',
-		1150: '#140f00',
-		1200: '#000000',
+		0:    'var(--color-amber-0)',
+		50:   'var(--color-amber-50)',
+		100:  'var(--color-amber-100)',
+		200:  'var(--color-amber-200)',
+		300:  'var(--color-amber-300)',
+		400:  'var(--color-amber-400)',
+		500:  'var(--color-amber-500)',
+		600:  'var(--color-amber-600)',
+		700:  'var(--color-amber-700)',
+		800:  'var(--color-amber-800)',
+		900:  'var(--color-amber-900)',
+		1000: 'var(--color-amber-1000)',
+		1100: 'var(--color-amber-1100)',
+		1150: 'var(--color-amber-1150)',
+		1200: 'var(--color-amber-1200)',
 	},
 	green: {
-		0:    '#ffffff',
-		50:   '#d5fed5',
-		100:  '#abfdab',
-		200:  '#6af26a',
-		300:  '#30e630',
-		400:  '#00db00',
-		500:  '#00c000',
-		600:  '#00a600',
-		700:  '#008b00',
-		800:  '#007000',
-		900:  '#005600',
-		1000: '#003b00',
-		1100: '#002000',
-		1150: '#001000',
-		1200: '#000000',
+		0:    'var(--color-green-0)',
+		50:   'var(--color-green-50)',
+		100:  'var(--color-green-100)',
+		200:  'var(--color-green-200)',
+		300:  'var(--color-green-300)',
+		400:  'var(--color-green-400)',
+		500:  'var(--color-green-500)',
+		600:  'var(--color-green-600)',
+		700:  'var(--color-green-700)',
+		800:  'var(--color-green-800)',
+		900:  'var(--color-green-900)',
+		1000: 'var(--color-green-1000)',
+		1100: 'var(--color-green-1100)',
+		1150: 'var(--color-green-1150)',
+		1200: 'var(--color-green-1200)',
 	},
 	red: {
-		0:    '#ffffff',
-		50:   '#ffe4e4',
-		100:  '#ffc7c7',
-		200:  '#ff8d8d',
-		300:  '#ff5858',
-		400:  '#ff2929',
-		500:  '#ff0000',
-		600:  '#dc0000',
-		700:  '#ba0000',
-		800:  '#970000',
-		900:  '#750000',
-		1000: '#520000',
-		1100: '#300000',
-		1150: '#180000',
-		1200: '#000000',
+		0:    'var(--color-red-0)',
+		50:   'var(--color-red-50)',
+		100:  'var(--color-red-100)',
+		200:  'var(--color-red-200)',
+		300:  'var(--color-red-300)',
+		400:  'var(--color-red-400)',
+		500:  'var(--color-red-500)',
+		600:  'var(--color-red-600)',
+		700:  'var(--color-red-700)',
+		800:  'var(--color-red-800)',
+		900:  'var(--color-red-900)',
+		1000: 'var(--color-red-1000)',
+		1100: 'var(--color-red-1100)',
+		1150: 'var(--color-red-1150)',
+		1200: 'var(--color-red-1200)',
 	},
 };
diff --git a/packages/blandui/src/index.ts b/packages/blandui/src/index.ts
@@ -14,8 +14,91 @@ import borderWidth from './Spacing/borderWidth';
 
 const blanduiPlugin = plugin(({
 	addUtilities,
+	addBase,
 }) => {
 	addUtilities(typography);
+
+	addBase({
+		':root': {
+			// Brand colors
+			'--color-carbon-0':    '#FFF',
+			'--color-carbon-50':   '#f2f2f2',
+			'--color-carbon-100':  '#e6e6e6',
+			'--color-carbon-200':  '#cccccc',
+			'--color-carbon-300':  '#b3b3b3',
+			'--color-carbon-400':  '#999999',
+			'--color-carbon-500':  '#808080',
+			'--color-carbon-600':  '#666666',
+			'--color-carbon-700':  '#4d4d4d',
+			'--color-carbon-800':  '#333333',
+			'--color-carbon-900':  '#191919',
+			'--color-carbon-950':  '#0d0d0d',
+			'--color-carbon-1000': '#000000',
+
+			'--color-gray-0':    '#ffffff',
+			'--color-gray-50':   '#f2f2f2',
+			'--color-gray-100':  '#e6e6e6',
+			'--color-gray-200':  '#cccccc',
+			'--color-gray-300':  '#b3b3b3',
+			'--color-gray-400':  '#999999',
+			'--color-gray-500':  '#808080',
+			'--color-gray-600':  '#666666',
+			'--color-gray-700':  '#4d4d4d',
+			'--color-gray-800':  '#333333',
+			'--color-gray-900':  '#191919',
+			'--color-gray-950':  '#0d0d0d',
+			'--color-gray-1000': '#000000',
+
+			// Functional colors
+			'--color-amber-0':    '#ffffff',
+			'--color-amber-50':   '#fffbdb',
+			'--color-amber-100':  '#fff6b5',
+			'--color-amber-200':  '#ffe273',
+			'--color-amber-300':  '#ffd036',
+			'--color-amber-400':  '#ffbf00',
+			'--color-amber-500':  '#e0a800',
+			'--color-amber-600':  '#c29100',
+			'--color-amber-700':  '#a37a00',
+			'--color-amber-800':  '#846300',
+			'--color-amber-900':  '#664c00',
+			'--color-amber-1000': '#473500',
+			'--color-amber-1100': '#281e00',
+			'--color-amber-1150': '#140f00',
+			'--color-amber-1200': '#000000',
+
+			'--color-green-0':    '#ffffff',
+			'--color-green-50':   '#d5fed5',
+			'--color-green-100':  '#abfdab',
+			'--color-green-200':  '#6af26a',
+			'--color-green-300':  '#30e630',
+			'--color-green-400':  '#00db00',
+			'--color-green-500':  '#00c000',
+			'--color-green-600':  '#00a600',
+			'--color-green-700':  '#008b00',
+			'--color-green-800':  '#007000',
+			'--color-green-900':  '#005600',
+			'--color-green-1000': '#003b00',
+			'--color-green-1100': '#002000',
+			'--color-green-1150': '#001000',
+			'--color-green-1200': '#000000',
+
+			'--color-red-0':    '#ffffff',
+			'--color-red-50':   '#ffe4e4',
+			'--color-red-100':  '#ffc7c7',
+			'--color-red-200':  '#ff8d8d',
+			'--color-red-300':  '#ff5858',
+			'--color-red-400':  '#ff2929',
+			'--color-red-500':  '#ff0000',
+			'--color-red-600':  '#dc0000',
+			'--color-red-700':  '#ba0000',
+			'--color-red-800':  '#970000',
+			'--color-red-900':  '#750000',
+			'--color-red-1000': '#520000',
+			'--color-red-1100': '#300000',
+			'--color-red-1150': '#180000',
+			'--color-red-1200': '#000000',
+		},
+	});
 }, {
 	theme: {
 		extend: {