Skip to content

Commit df4517b

Browse files
SutuSebastianSutuSebastian
authored
fix(docs): examples (#1578)
* Refactor modal button colors for consistency - Updated button colors in multiple modal components to use 'alternative' instead of 'gray' for decline actions. - Changed link colors from 'text-cyan-700' to 'text-primary-700' * Update link colors in table and toast components to use primary
1 parent c6f235c commit df4517b

12 files changed

+52
-52
lines changed

‎apps/web/examples/modal/modal.dismissible.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function Component() {
3333
</ModalBody>
3434
<ModalFooter>
3535
<Button onClick={() => setOpenModal(false)}>I accept</Button>
36-
<Button color="gray" onClick={() => setOpenModal(false)}>
36+
<Button color="alternative" onClick={() => setOpenModal(false)}>
3737
Decline
3838
</Button>
3939
</ModalFooter>
@@ -66,7 +66,7 @@ export function Component() {
6666
</ModalBody>
6767
<ModalFooter>
6868
<Button onClick={() => setOpenModal(false)}>I accept</Button>
69-
<Button color="gray" onClick={() => setOpenModal(false)}>
69+
<Button color="alternative" onClick={() => setOpenModal(false)}>
7070
Decline
7171
</Button>
7272
</ModalFooter>

‎apps/web/examples/modal/modal.initialFocus.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export function Component() {
3939
<Checkbox id="remember" />
4040
<Label htmlFor="remember">Remember me</Label>
4141
</div>
42-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
42+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
4343
Lost Password?
4444
</a>
4545
</div>
@@ -48,7 +48,7 @@ export function Component() {
4848
</div>
4949
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
5050
Not registered?&nbsp;
51-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
51+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
5252
Create account
5353
</a>
5454
</div>
@@ -89,7 +89,7 @@ export function Component() {
8989
<Checkbox id="remember" />
9090
<Label htmlFor="remember">Remember me</Label>
9191
</div>
92-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
92+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
9393
Lost Password?
9494
</a>
9595
</div>
@@ -98,7 +98,7 @@ export function Component() {
9898
</div>
9999
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
100100
Not registered?&nbsp;
101-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
101+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
102102
Create account
103103
</a>
104104
</div>

‎apps/web/examples/modal/modal.popup.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export function Component() {
2727
Are you sure you want to delete this product?
2828
</h3>
2929
<div className="flex justify-center gap-4">
30-
<Button color="failure" onClick={() => setOpenModal(false)}>
31-
{"Yes, I'm sure"}
30+
<Button color="red" onClick={() => setOpenModal(false)}>
31+
Yes, I'm sure
3232
</Button>
33-
<Button color="gray" onClick={() => setOpenModal(false)}>
33+
<Button color="alternative" onClick={() => setOpenModal(false)}>
3434
No, cancel
3535
</Button>
3636
</div>
@@ -57,10 +57,10 @@ export function Component() {
5757
Are you sure you want to delete this product?
5858
</h3>
5959
<div className="flex justify-center gap-4">
60-
<Button color="failure" onClick={() => setOpenModal(false)}>
61-
{"Yes, I'm sure"}
60+
<Button color="red" onClick={() => setOpenModal(false)}>
61+
Yes, I'm sure
6262
</Button>
63-
<Button color="gray" onClick={() => setOpenModal(false)}>
63+
<Button color="alternative" onClick={() => setOpenModal(false)}>
6464
No, cancel
6565
</Button>
6666
</div>

‎apps/web/examples/modal/modal.position.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function Component() {
4949
</ModalBody>
5050
<ModalFooter>
5151
<Button onClick={() => setOpenModal(false)}>I accept</Button>
52-
<Button color="gray" onClick={() => setOpenModal(false)}>
52+
<Button color="alternative" onClick={() => setOpenModal(false)}>
5353
Decline
5454
</Button>
5555
</ModalFooter>
@@ -98,7 +98,7 @@ export function Component() {
9898
</ModalBody>
9999
<ModalFooter>
100100
<Button onClick={() => setOpenModal(false)}>I accept</Button>
101-
<Button color="gray" onClick={() => setOpenModal(false)}>
101+
<Button color="alternative" onClick={() => setOpenModal(false)}>
102102
Decline
103103
</Button>
104104
</ModalFooter>

‎apps/web/examples/modal/modal.root.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function Component() {
3333
</ModalBody>
3434
<ModalFooter>
3535
<Button onClick={() => setOpenModal(false)}>I accept</Button>
36-
<Button color="gray" onClick={() => setOpenModal(false)}>
36+
<Button color="alternative" onClick={() => setOpenModal(false)}>
3737
Decline
3838
</Button>
3939
</ModalFooter>
@@ -66,7 +66,7 @@ export function Component() {
6666
</ModalBody>
6767
<ModalFooter>
6868
<Button onClick={() => setOpenModal(false)}>I accept</Button>
69-
<Button color="gray" onClick={() => setOpenModal(false)}>
69+
<Button color="alternative" onClick={() => setOpenModal(false)}>
7070
Decline
7171
</Button>
7272
</ModalFooter>

‎apps/web/examples/modal/modal.sizes.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function Component() {
5050
</ModalBody>
5151
<ModalFooter>
5252
<Button onClick={() => setOpenModal(false)}>I accept</Button>
53-
<Button color="gray" onClick={() => setOpenModal(false)}>
53+
<Button color="alternative" onClick={() => setOpenModal(false)}>
5454
Decline
5555
</Button>
5656
</ModalFooter>
@@ -100,7 +100,7 @@ export function Component() {
100100
</ModalBody>
101101
<ModalFooter>
102102
<Button onClick={() => setOpenModal(false)}>I accept</Button>
103-
<Button color="gray" onClick={() => setOpenModal(false)}>
103+
<Button color="alternative" onClick={() => setOpenModal(false)}>
104104
Decline
105105
</Button>
106106
</ModalFooter>

‎apps/web/examples/modal/modal.withFormElements.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function Component() {
5050
<Checkbox id="remember" />
5151
<Label htmlFor="remember">Remember me</Label>
5252
</div>
53-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
53+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
5454
Lost Password?
5555
</a>
5656
</div>
@@ -59,7 +59,7 @@ export function Component() {
5959
</div>
6060
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
6161
Not registered?&nbsp;
62-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
62+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
6363
Create account
6464
</a>
6565
</div>
@@ -111,7 +111,7 @@ export function Component() {
111111
<Checkbox id="remember" />
112112
<Label htmlFor="remember">Remember me</Label>
113113
</div>
114-
<a href="#" className="text-sm text-cyan-700 hover:underline dark:text-cyan-500">
114+
<a href="#" className="text-sm text-primary-700 hover:underline dark:text-primary-500">
115115
Lost Password?
116116
</a>
117117
</div>
@@ -120,7 +120,7 @@ export function Component() {
120120
</div>
121121
<div className="flex justify-between text-sm font-medium text-gray-500 dark:text-gray-300">
122122
Not registered?&nbsp;
123-
<a href="#" className="text-cyan-700 hover:underline dark:text-cyan-500">
123+
<a href="#" className="text-primary-700 hover:underline dark:text-primary-500">
124124
Create account
125125
</a>
126126
</div>

‎apps/web/examples/table/table.hover.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function Component() {
2828
<TableCell>Laptop</TableCell>
2929
<TableCell>$2999</TableCell>
3030
<TableCell>
31-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
31+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
3232
Edit
3333
</a>
3434
</TableCell>
@@ -41,7 +41,7 @@ export function Component() {
4141
<TableCell>Laptop PC</TableCell>
4242
<TableCell>$1999</TableCell>
4343
<TableCell>
44-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
44+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
4545
Edit
4646
</a>
4747
</TableCell>
@@ -52,7 +52,7 @@ export function Component() {
5252
<TableCell>Accessories</TableCell>
5353
<TableCell>$99</TableCell>
5454
<TableCell>
55-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
55+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
5656
Edit
5757
</a>
5858
</TableCell>
@@ -88,7 +88,7 @@ export function Component() {
8888
<TableCell>Laptop</TableCell>
8989
<TableCell>$2999</TableCell>
9090
<TableCell>
91-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
91+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
9292
Edit
9393
</a>
9494
</TableCell>
@@ -101,7 +101,7 @@ export function Component() {
101101
<TableCell>Laptop PC</TableCell>
102102
<TableCell>$1999</TableCell>
103103
<TableCell>
104-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
104+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
105105
Edit
106106
</a>
107107
</TableCell>
@@ -112,7 +112,7 @@ export function Component() {
112112
<TableCell>Accessories</TableCell>
113113
<TableCell>$99</TableCell>
114114
<TableCell>
115-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
115+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
116116
Edit
117117
</a>
118118
</TableCell>

‎apps/web/examples/table/table.root.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export function Component() {
2828
<TableCell>Laptop</TableCell>
2929
<TableCell>$2999</TableCell>
3030
<TableCell>
31-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
31+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
3232
Edit
3333
</a>
3434
</TableCell>
@@ -41,7 +41,7 @@ export function Component() {
4141
<TableCell>Laptop PC</TableCell>
4242
<TableCell>$1999</TableCell>
4343
<TableCell>
44-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
44+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
4545
Edit
4646
</a>
4747
</TableCell>
@@ -52,7 +52,7 @@ export function Component() {
5252
<TableCell>Accessories</TableCell>
5353
<TableCell>$99</TableCell>
5454
<TableCell>
55-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
55+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
5656
Edit
5757
</a>
5858
</TableCell>
@@ -88,7 +88,7 @@ export function Component() {
8888
<TableCell>Laptop</TableCell>
8989
<TableCell>$2999</TableCell>
9090
<TableCell>
91-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
91+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
9292
Edit
9393
</a>
9494
</TableCell>
@@ -101,7 +101,7 @@ export function Component() {
101101
<TableCell>Laptop PC</TableCell>
102102
<TableCell>$1999</TableCell>
103103
<TableCell>
104-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
104+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
105105
Edit
106106
</a>
107107
</TableCell>
@@ -112,7 +112,7 @@ export function Component() {
112112
<TableCell>Accessories</TableCell>
113113
<TableCell>$99</TableCell>
114114
<TableCell>
115-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
115+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
116116
Edit
117117
</a>
118118
</TableCell>

‎apps/web/examples/table/table.striped.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function Component() {
2626
<TableCell>Laptop</TableCell>
2727
<TableCell>$2999</TableCell>
2828
<TableCell>
29-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
29+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
3030
Edit
3131
</a>
3232
</TableCell>
@@ -39,7 +39,7 @@ export function Component() {
3939
<TableCell>Laptop PC</TableCell>
4040
<TableCell>$1999</TableCell>
4141
<TableCell>
42-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
42+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
4343
Edit
4444
</a>
4545
</TableCell>
@@ -50,7 +50,7 @@ export function Component() {
5050
<TableCell>Accessories</TableCell>
5151
<TableCell>$99</TableCell>
5252
<TableCell>
53-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
53+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
5454
Edit
5555
</a>
5656
</TableCell>
@@ -63,7 +63,7 @@ export function Component() {
6363
<TableCell>Phone</TableCell>
6464
<TableCell>$799</TableCell>
6565
<TableCell>
66-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
66+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
6767
Edit
6868
</a>
6969
</TableCell>
@@ -74,7 +74,7 @@ export function Component() {
7474
<TableCell>Wearables</TableCell>
7575
<TableCell>$999</TableCell>
7676
<TableCell>
77-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
77+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
7878
Edit
7979
</a>
8080
</TableCell>
@@ -110,7 +110,7 @@ export function Component() {
110110
<TableCell>Laptop</TableCell>
111111
<TableCell>$2999</TableCell>
112112
<TableCell>
113-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
113+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
114114
Edit
115115
</a>
116116
</TableCell>
@@ -123,7 +123,7 @@ export function Component() {
123123
<TableCell>Laptop PC</TableCell>
124124
<TableCell>$1999</TableCell>
125125
<TableCell>
126-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
126+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
127127
Edit
128128
</a>
129129
</TableCell>
@@ -134,7 +134,7 @@ export function Component() {
134134
<TableCell>Accessories</TableCell>
135135
<TableCell>$99</TableCell>
136136
<TableCell>
137-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
137+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
138138
Edit
139139
</a>
140140
</TableCell>
@@ -147,7 +147,7 @@ export function Component() {
147147
<TableCell>Phone</TableCell>
148148
<TableCell>$799</TableCell>
149149
<TableCell>
150-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
150+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
151151
Edit
152152
</a>
153153
</TableCell>
@@ -158,7 +158,7 @@ export function Component() {
158158
<TableCell>Wearables</TableCell>
159159
<TableCell>$999</TableCell>
160160
<TableCell>
161-
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
161+
<a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">
162162
Edit
163163
</a>
164164
</TableCell>

0 commit comments

Comments
 (0)