From 467ef5feb0b1af6cf5d2292e41042166b4aa1ac1 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Wed, 19 Jun 2024 14:12:15 +0300 Subject: [PATCH 1/4] fix(segmentedBar): Accept now a ReactNode and string as label --- .../src/components/SegmentedBar/SegmentedBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blandui-react/src/components/SegmentedBar/SegmentedBar.tsx b/packages/blandui-react/src/components/SegmentedBar/SegmentedBar.tsx index 706b3d7..78dbbd8 100644 --- 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; } From 4701a6e5f012f9500be7e414e2f5e789c8800e80 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Wed, 19 Jun 2024 14:12:35 +0300 Subject: [PATCH 2/4] fix(chip): onClick fixed for cancellable --- packages/blandui-react/src/components/Chip/Chip.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/blandui-react/src/components/Chip/Chip.tsx b/packages/blandui-react/src/components/Chip/Chip.tsx index 9573176..676812e 100644 --- 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) => void; } export const Chip = forwardRef(( @@ -28,6 +30,9 @@ export const Chip = forwardRef(( countableClassName, count = 0, + + onClick, + ...props }, ref, @@ -68,10 +73,10 @@ export const Chip = forwardRef(( ); return ( -
+
{ children } - { type === 'cancellable' && + { type === 'cancellable' && } From aec9a62cc877049d47e19a4e44d6283a11da4c07 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Wed, 19 Jun 2024 14:13:06 +0300 Subject: [PATCH 3/4] feat(blandui): Now using CSS variables for colors --- packages/blandui/src/Color/colors.tsx | 142 +++++++++++++------------- packages/blandui/src/index.ts | 83 +++++++++++++++ 2 files changed, 154 insertions(+), 71 deletions(-) diff --git a/packages/blandui/src/Color/colors.tsx b/packages/blandui/src/Color/colors.tsx index 6b3e87a..564d7c1 100644 --- 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 index 77e85b7..95ef011 100644 --- 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: { From cbb9d7c55aee4802f9f0d964573245c5f9483bc2 Mon Sep 17 00:00:00 2001 From: Ludovic Lerus Date: Wed, 19 Jun 2024 14:15:38 +0300 Subject: [PATCH 4/4] chore(patch): blandui and blandui-react --- .changeset/serious-pens-hear.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/serious-pens-hear.md diff --git a/.changeset/serious-pens-hear.md b/.changeset/serious-pens-hear.md new file mode 100644 index 0000000..d23ed6a --- /dev/null +++ b/.changeset/serious-pens-hear.md @@ -0,0 +1,6 @@ +--- +"@blandui/blandui-react": patch +"@blandui/blandui": patch +--- + +CSS var are now available for colors