Skip to content

Commit 52cd0b9

Browse files
agjsagjs
committed
chore: Refactor color and text styling across multiple components
This commit introduces a comprehensive styling update, focusing on: - Replacing color variables like `primary-text-color` with more semantic names - Updating text and background color classes - Improving color consistency across components - Adjusting hover and focus states - Minor text and class name refinements
1 parent 5ba8015 commit 52cd0b9

File tree

85 files changed

+435
-317
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+435
-317
lines changed

‎.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
20.8.0
1+
22.13.0

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.200",
3+
"version": "1.0.201",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Accordion/__snapshots__/Accordion.test.tsx.snap

+9-9
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ exports[`Accordion component > renders correctly 1`] = `
66
class=""
77
>
88
<div
9-
class="yl-border-2 yl-border-primary-text-color/20 yl-border-b-0 yl-rounded-tl-md yl-rounded-tr-md"
9+
class="yl-border-2 yl-border-border yl-border-b-0 yl-rounded-tl-md yl-rounded-tr-md"
1010
role="presentation"
1111
>
1212
<h3
1313
aria-expanded="true"
14-
class="yl-relative yl-flex yl-cursor-default yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4 yl-bg-primary-text-color/5 yl-cursor-pointer yl-text-primary-text-color"
14+
class="yl-relative yl-flex yl-cursor-default yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4 yl-bg-text/5 yl-cursor-pointer yl-text-text"
1515
role="button"
1616
tabindex="0"
1717
>
@@ -35,34 +35,34 @@ exports[`Accordion component > renders correctly 1`] = `
3535
</svg>
3636
Section 1
3737
<p
38-
class="yl-text-primary-text-color yl-break-words yl-overflow-hidden yl-text-xs yl-text-primary-text-color/70"
38+
class="yl-text-secondary yl-break-words yl-overflow-hidden yl-text-xs yl-text-text/70"
3939
>
4040
Description 1
4141
</p>
4242
</div>
4343
</h3>
4444
<ul
45-
class="yl-relative yl-text-primary-text-color yl-gap-4 yl-flex yl-flex-col yl-py-4"
45+
class="yl-relative yl-text-text yl-gap-4 yl-flex yl-flex-col yl-py-4"
4646
>
4747
<li
48-
class="yl-relative yl-flex yl-items-center yl-cursor-default hover:text-primary break-all leading-normal yl-px-4 yl-cursor-pointer yl-text-primary-text-color"
48+
class="yl-relative yl-flex yl-items-center yl-cursor-default hover:text-text break-words leading-normal yl-px-4 yl-cursor-pointer yl-text-text"
4949
>
5050
Item A
5151
</li>
5252
<li
53-
class="yl-relative yl-flex yl-items-center yl-cursor-default hover:text-primary break-all leading-normal yl-px-4 yl-cursor-pointer yl-text-primary-text-color"
53+
class="yl-relative yl-flex yl-items-center yl-cursor-default hover:text-text break-words leading-normal yl-px-4 yl-cursor-pointer yl-text-text"
5454
>
5555
Item B
5656
</li>
5757
</ul>
5858
</div>
5959
<div
60-
class="yl-border-2 yl-border-primary-text-color/20 yl-rounded-bl-md yl-rounded-br-md"
60+
class="yl-border-2 yl-border-border yl-rounded-bl-md yl-rounded-br-md"
6161
role="presentation"
6262
>
6363
<h3
6464
aria-expanded="false"
65-
class="yl-relative yl-flex yl-cursor-default yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4 yl-cursor-pointer yl-text-primary-text-color"
65+
class="yl-relative yl-flex yl-cursor-default yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4 yl-cursor-pointer yl-text-text"
6666
role="button"
6767
tabindex="0"
6868
>
@@ -87,7 +87,7 @@ exports[`Accordion component > renders correctly 1`] = `
8787
</svg>
8888
Section 2
8989
<p
90-
class="yl-text-primary-text-color yl-break-words yl-overflow-hidden yl-text-xs yl-text-primary-text-color/70"
90+
class="yl-text-secondary yl-break-words yl-overflow-hidden yl-text-xs yl-text-text/70"
9191
>
9292
Description 2
9393
</p>

‎src/Components/Accordion/index.tsx

+15-17
Original file line numberDiff line numberDiff line change
@@ -98,17 +98,16 @@ const Accordion: FC<IAccordionProps> = ({
9898
onMouseOver={() => hasDraggableSections && setHoveredId(section.id)}
9999
onMouseLeave={() => hasDraggableSections && setHoveredId(null)}
100100
className={classNames(
101-
"yl-border-2 yl-border-primary-text-color/20",
101+
"yl-border-2 yl-border-border",
102102
{
103103
"yl-border-b-0": idx !== sections.length - 1,
104104
"yl-rounded-tl-md yl-rounded-tr-md": idx === 0,
105105
"yl-rounded-bl-md yl-rounded-br-md":
106106
idx === sections.length - 1 && !onAddSection
107107
},
108108
{
109-
"yl-bg-primary-text-color/5": draggedOverId === section.id,
110-
"yl-bg-primary-text-color/10":
111-
draggedId && hoveredId === section.id
109+
"yl-bg-text/5": draggedOverId === section.id,
110+
"yl-bg-text/10": draggedId && hoveredId === section.id
112111
}
113112
)}
114113
role='presentation'
@@ -124,9 +123,9 @@ const Accordion: FC<IAccordionProps> = ({
124123
"yl-relative yl-flex yl-cursor-default yl-select-none yl-items-center yl-font-semibold yl-capitalize yl-p-4",
125124
sectionTitleClassName,
126125
{
127-
"yl-bg-primary-text-color/5": expanded.includes(section.id),
126+
"yl-bg-text/5": expanded.includes(section.id),
128127
"yl-cursor-pointer": onSectionItemClick,
129-
"yl-text-primary-text-color":
128+
"yl-text-text":
130129
selectedSectionId !== section.id || !onSectionItemClick,
131130
"yl-text-primary":
132131
onSectionItemClick && selectedSectionId === section.id
@@ -166,7 +165,7 @@ const Accordion: FC<IAccordionProps> = ({
166165
)}
167166
{section.title}
168167
{section.description && (
169-
<Paragraph className='yl-text-xs yl-text-primary-text-color/70'>
168+
<Paragraph className='yl-text-xs yl-text-text/70'>
170169
{section.description}
171170
</Paragraph>
172171
)}
@@ -195,16 +194,15 @@ const Accordion: FC<IAccordionProps> = ({
195194
}}
196195
isDraggable={hasDraggableSectionItems}
197196
className='yl-gap-4 yl-flex yl-flex-col yl-py-4'
198-
draggedOverClassName='yl-border-t-2 yl-border-primary'
197+
draggedOverClassName='yl-border-t-2 yl-border-border'
199198
liClassName={(item: IDraggableListItem) =>
200199
classNames(
201-
"yl-cursor-default hover:text-primary break-all leading-normal yl-px-4",
200+
"yl-cursor-default hover:text-text break-words leading-normal yl-px-4",
202201
{
203202
"yl-cursor-pointer": onSectionItemClick,
204-
"yl-text-primary-text-color":
205-
selectedItemId !== item.id,
206-
"yl-text-primary":
207-
onSectionItemClick && selectedItemId === item.id,
203+
"yl-text-text": selectedItemId !== item.id,
204+
// "yl-text-text":
205+
// onSectionItemClick && selectedItemId === item.id,
208206
"yl-pl-5": section.items.length === 1
209207
}
210208
)
@@ -214,7 +212,7 @@ const Accordion: FC<IAccordionProps> = ({
214212
<div
215213
onClick={() => onAddSectionItem(section)}
216214
className={classNames(
217-
"yl-cursor-pointer hover:yl-text-primary yl-pb-4 yl-text-primary-text-color yl-text-center yl-flex yl-items-center yl-justify-center yl-gap-1"
215+
"yl-cursor-pointer hover:yl-text-text yl-pb-4 yl-text-text yl-text-center yl-flex yl-items-center yl-justify-center yl-gap-1"
218216
)}
219217
>
220218
<IconAddCircle className='yl-w-6' />
@@ -231,7 +229,7 @@ const Accordion: FC<IAccordionProps> = ({
231229
<div
232230
onClick={onAddSection}
233231
className={classNames(
234-
"yl-group yl-border-2 yl-border-t-0 yl-border-primary-text-color/20 hover:yl-bg-primary-text-color/5 yl-rounded-bl-md yl-rounded-br-md yl-cursor-pointer"
232+
"yl-group yl-border-2 yl-border-t-0 yl-border-border hover:yl-bg-text/5 yl-rounded-bl-md yl-rounded-br-md yl-cursor-pointer"
235233
)}
236234
role='presentation'
237235
>
@@ -241,8 +239,8 @@ const Accordion: FC<IAccordionProps> = ({
241239
)}
242240
role='button'
243241
>
244-
<Paragraph className='yl-text-primary-text-color/70 group-hover:yl-text-primary yl-flex yl-items-center yl-gap-1'>
245-
<IconAddCircle className='yl-w-6 group-hover:yl-text-primary' />
242+
<Paragraph className='yl-text-text/70 group-hover:yl-text-text yl-flex yl-items-center yl-gap-1'>
243+
<IconAddCircle className='yl-w-6 group-hover:yl-text-text' />
246244
{addSectionLabel && (
247245
<span className='yl-text-sm'>{addSectionLabel}</span>
248246
)}

‎src/Components/AddSocialPlatform/index.tsx

+25-16
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import useAJVForm from "@programmer_network/use-ajv-form";
2+
import classNames from "classnames";
23
import { FC } from "react";
34

45
import Button from "Components/Button";
@@ -9,6 +10,7 @@ import { IAddSocialPlatformProps } from "./types";
910
import { getValueHint, getValueLabel } from "./utils";
1011

1112
const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
13+
className,
1214
onAdd,
1315
platforms
1416
}) => {
@@ -21,7 +23,12 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
2123
);
2224

2325
return (
24-
<div className='yl-grid yl-grid-cols-12 yl-items-start yl-gap-2 my-4'>
26+
<div
27+
className={classNames(
28+
"yl-grid md:yl-grid-cols-12 yl-items-end yl-gap-2",
29+
className
30+
)}
31+
>
2532
<Select
2633
name='platform'
2734
label='Platform'
@@ -44,23 +51,25 @@ const AddSocialPlatform: FC<IAddSocialPlatformProps> = ({
4451
onChange={form.set}
4552
/>
4653
</div>
47-
<Button
48-
outlined
49-
className='yl-col-span-1 yl-mt-8'
50-
onClick={() => {
51-
if (!form.validate().isValid) {
52-
return;
53-
}
54+
<div>
55+
<Button
56+
outlined
57+
className='yl-col-span-1 yl-mt-2 md:yl-mt-0'
58+
onClick={() => {
59+
if (!form.validate().isValid) {
60+
return;
61+
}
5462

55-
onAdd?.({
56-
[form.state.platform.value]: form.state.url.value
57-
});
63+
onAdd?.({
64+
[form.state.platform.value]: form.state.url.value
65+
});
5866

59-
form.reset();
60-
}}
61-
>
62-
Add
63-
</Button>
67+
form.reset();
68+
}}
69+
>
70+
Add
71+
</Button>
72+
</div>
6473
</div>
6574
);
6675
};

‎src/Components/AddSocialPlatform/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export interface IAddSocialPlatformProps {
2+
className?: string;
23
platforms: { name: string; url: string }[];
34
onAdd: (data: Record<string, string>) => void;
45
}

‎src/Components/AddSocialPlatform/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export const getValueLabel = (platform: string): string => {
1111
return "URL";
1212
}
1313

14-
return "Username";
14+
return "Handle";
1515
};

‎src/Components/Alert/__snapshots__/Alert.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`Alert component > renders correctly with children 1`] = `
99
class="yl-bg-gradient-to-r yl-p[1px] from-green-400 via-green-500 to-green-900 text-green-500"
1010
>
1111
<div
12-
class="back yl-flex yl-h-full yl-w-full yl-items-center yl-justify-center yl-bg-primary-background-color yl-p-4"
12+
class="back yl-flex yl-h-full yl-w-full yl-items-center yl-justify-center yl-bg-background yl-p-4"
1313
>
1414
<span>
1515
Success Message

‎src/Components/Alert/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ const Alert: FC<AlertProps> = ({ type, children, className }) => {
1010
className={classNames("yl-bg-gradient-to-r yl-p-[1px]", className, {
1111
"yl-from-green-400 yl-via-green-500 yl-to-green-900 yl-text-green-500":
1212
type === "success",
13-
"yl-from-red-400 yl-via-red-500 yl-to-red-900 yl-text-red-500":
13+
"yl-from-red-400 yl-via-error yl-to-red-900 yl-text-error":
1414
type === "error",
1515
"yl-from-yellow-400 yl-via-yellow-500 yl-to-yellow-900 yl-text-yellow-500":
1616
type === "warning",
1717
"yl-from-blue-400 yl-via-blue-500 yl-to-blue-900 yl-text-blue-500":
1818
type === "info"
1919
})}
2020
>
21-
<div className='back yl-flex yl-h-full yl-w-full yl-items-center yl-justify-center yl-bg-primary-background-color yl-p-4'>
21+
<div className='back yl-flex yl-h-full yl-w-full yl-items-center yl-justify-center yl-bg-background yl-p-4'>
2222
<span>{children}</span>
2323
</div>
2424
</div>

‎src/Components/AuthorCard/__snapshots__/AuthorCard.test.tsx.snap

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`AuthorCard component > renders correctly 1`] = `
44
<DocumentFragment>
55
<div
6-
class="yl-border-2 yl-border-primary-text-color/20 yl-p-6 yl-rounded-lg"
6+
class="yl-border-2 yl-border-border yl-p-6 yl-rounded-lg"
77
>
88
<div
99
class="yl-flex yl-flex-col yl-items-center yl-gap-4 md:yl-flex-row"
@@ -25,12 +25,12 @@ exports[`AuthorCard component > renders correctly 1`] = `
2525
</div>
2626
<div>
2727
<h3
28-
class="yl-text-xl sm:yl-text-2xl md:yl-text-3xl yl-text-primary yl-break-words yl-overflow-hidden yl-font-bold"
28+
class="yl-text-xl sm:yl-text-2xl md:yl-text-3xl yl-text-text yl-break-words yl-overflow-hidden yl-font-bold"
2929
>
3030
John Doe
3131
</h3>
3232
<p
33-
class="yl-text-primary-text-color yl-break-words yl-overflow-hidden"
33+
class="yl-text-secondary yl-break-words yl-overflow-hidden"
3434
>
3535
An expert in the field.
3636
</p>

‎src/Components/AuthorCard/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const AuthorCard: React.FC<IAuthorCardProps> = ({
1616
return (
1717
<div
1818
className={classNames(
19-
"yl-border-2 yl-border-primary-text-color/20 yl-p-6 yl-rounded-lg",
19+
"yl-border-2 yl-border-border yl-p-6 yl-rounded-lg",
2020
className
2121
)}
2222
onClick={() => (onClick ? onClick({ name, avatar, about }) : undefined)}

‎src/Components/Avatar/Avatar.stories.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,18 @@ export const WithURL: Story = {
2727
size: 150
2828
}
2929
};
30+
31+
export const WithClassName: Story = {
32+
args: {
33+
src: "https://avatars.githubusercontent.com/u/2085263?v=4",
34+
size: 150,
35+
className: "yl-border-4 yl-border-white"
36+
}
37+
};
38+
39+
export const WithClassNameBoringAvatars: Story = {
40+
args: {
41+
size: 150,
42+
className: "yl-border-4 yl-border-white"
43+
}
44+
};

‎src/Components/Avatar/index.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,21 @@ const Avatar: FC<IAvatarProps> = ({
99
src,
1010
alt = "John Doe",
1111
size = 50,
12-
colors = ["#6366f1", "#bae6fd"]
12+
colors = ["#6366f1", "#bae6fd"],
13+
className
1314
}) => {
14-
const className = classNames("sm:yl-mt-0 yl-rounded-full yl-overflow-hidden");
15+
const classes = classNames(
16+
"sm:yl-mt-0 yl-rounded-full yl-overflow-hidden",
17+
className
18+
);
1519

1620
src && StringUtils.validateURL(src);
1721

1822
if (!src) {
1923
return (
2024
<div
2125
data-testid='svg-avatar-parent'
22-
className={className}
26+
className={classes}
2327
style={{ width: `${size}px`, height: `${size}px` }}
2428
>
2529
<BoringAvatars size={size} name={alt} variant='beam' colors={colors} />
@@ -29,7 +33,7 @@ const Avatar: FC<IAvatarProps> = ({
2933

3034
return (
3135
<div
32-
className={className}
36+
className={classes}
3337
style={{ width: `${size}px`, height: `${size}px` }}
3438
>
3539
<img

‎src/Components/Avatar/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export interface IAvatarProps {
33
alt?: string;
44
size?: number;
55
colors?: string[];
6+
className?: string;
67
}

‎src/Components/Badge/__snapshots__/Badge.test.tsx.snap

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Badge component > renders correctly - snapshot test 1`] = `
44
<DocumentFragment>
55
<span
6-
class="yl-rounded yl-border yl-border-primary-text-color yl-px-1 yl-pb-[2px] yl-pt-[1px] yl-text-[10px] yl-text-primary-text-color"
6+
class="yl-rounded yl-border yl-border-border yl-px-1 yl-pb-[2px] yl-pt-[1px] yl-text-[10px] yl-text-text"
77
>
88
Test Badge
99
</span>

‎src/Components/Badge/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const Badge: FC<IBadgeProps> = ({ title, className }) => {
77
return (
88
<span
99
className={classNames(
10-
"yl-rounded yl-border yl-border-primary-text-color yl-px-1 yl-pb-[2px] yl-pt-[1px] yl-text-[10px] yl-text-primary-text-color",
10+
"yl-rounded yl-border yl-border-border yl-px-1 yl-pb-[2px] yl-pt-[1px] yl-text-[10px] yl-text-text",
1111
className
1212
)}
1313
>

0 commit comments

Comments
 (0)