Skip to content

Commit d38a163

Browse files
michael-andreuzzamichael-andreuzza
committed
new color accent
1 parent 124d8be commit d38a163

6 files changed

Lines changed: 49 additions & 70 deletions

File tree

‎src/components/fundations/buttons/Button.astro‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -68,54 +68,56 @@ const iconVariant = [
6868
const BUTTON_VARIANTS: Record<ButtonVariant, string[]> = {
6969
oxbowDefault: [
7070
"text-white",
71-
"bg-zinc-900",
71+
"bg-base-900",
7272
"outline",
73-
"outline-zinc-900",
74-
"hover:bg-zinc-950",
75-
"focus-visible:outline-zinc-950",
76-
"dark:bg-zinc-800",
77-
"dark:text-white",
78-
"dark:outline-zinc-600",
79-
"dark:hover:bg-zinc-700",
80-
"dark:focus-visible:outline-zinc-500",
73+
"outline-base-900",
74+
"hover:bg-base-950",
75+
"focus-visible:outline-base-950",
76+
"dark:bg-base-100",
77+
"dark:text-base-900",
78+
"dark:outline-base-100",
79+
"dark:hover:bg-base-200",
80+
"dark:focus-visible:outline-base-200",
8181
],
8282
oxbowMuted: [
83-
"text-zinc-600",
83+
"text-base-600",
8484
"bg-base-100",
8585
"outline",
8686
"outline-base-50",
8787
"hover:bg-base-50",
8888
"focus-visible:outline-base-100",
89-
"dark:text-zinc-200",
90-
"dark:bg-zinc-700",
91-
"dark:outline-zinc-600",
92-
"dark:hover:bg-zinc-600",
93-
"dark:focus-visible:outline-zinc-500",
89+
"dark:text-base-200",
90+
"dark:bg-base-700",
91+
"dark:outline-base-600",
92+
"dark:hover:bg-base-600",
93+
"dark:focus-visible:outline-base-500",
9494
],
9595
oxbowAccent: [
9696
"text-white",
97-
"bg-accent-600",
97+
"bg-accent-500",
9898
"outline",
9999
"outline-accent-500",
100-
"hover:bg-accent-500",
100+
"hover:bg-accent-600",
101101
"focus-visible:outline-accent-600",
102-
"dark:bg-blue-600",
103-
"dark:text-white",
104-
"dark:outline-blue-400",
105-
"dark:hover:bg-blue-500",
106-
"dark:focus-visible:outline-blue-300",
102+
"dark:bg-accent-600",
103+
"dark:text-base-100",
104+
"dark:outline-accent-600",
105+
"dark:hover:bg-accent-700",
106+
"dark:focus-visible:outline-accent-500",
107107
],
108108
oxbowOutline: [
109109
"text-base-700",
110+
"bg-white",
110111
"outline",
111112
"outline-base-200",
112-
"bg-transparent",
113-
"hover:outline-accent-600",
114-
"focus-visible:outline-accent-500",
115-
"dark:text-base-200",
116-
"dark:outline-base-400",
117-
"dark:hover:outline-accent-400",
118-
"dark:bg-zinc-800",
113+
"hover:shadow-sm",
114+
"hover:bg-base-50",
115+
"focus-visible:outline-base-900",
116+
"dark:text-base-100",
117+
"dark:bg-base-800",
118+
"dark:outline-base-600",
119+
"dark:hover:bg-base-700",
120+
"dark:focus-visible:outline-base-400",
119121
],
120122
default: [
121123
"text-white",

‎src/components/fundations/scripts/TabsScript.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@
4747
const isActive = button.getAttribute("data-tab") === tabId;
4848
button.setAttribute("aria-selected", isActive ? "true" : "false");
4949
button.setAttribute("tabindex", isActive ? "0" : "-1");
50-
button.classList.toggle("text-sky-600", isActive);
51-
button.classList.toggle("dark:text-sky-300", isActive);
50+
button.classList.toggle("text-accent-600", isActive);
51+
button.classList.toggle("dark:text-accent-500", isActive);
5252
button.classList.toggle("border-b", isActive);
53-
button.classList.toggle("border-sky-600", isActive);
54-
button.classList.toggle("dark:border-sky-400", isActive);
53+
button.classList.toggle("border-accent-600", isActive);
54+
button.classList.toggle("dark:border-accent-500", isActive);
5555
button.classList.toggle("text-base-600", !isActive);
5656
button.classList.toggle("dark:text-base-500", !isActive);
5757
button.classList.toggle("hover:text-base-800", !isActive);

‎src/components/fundations/tabs/TabButton.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const panelId = `tab-panel-${tab}`;
1616
aria-controls={panelId}
1717
aria-selected="false"
1818
class:list={[
19-
"flex items-center gap-2 pb-2 text-sm font-medium cursor-pointer transition-all duration-200 text-base-600 hover:text-base-800 dark:text-base-500 dark:hover:text-base-200",
19+
"flex items-center gap-2 pb-2 text-sm font-medium cursor-pointer transition-all duration-200",
2020
className,
2121
]}
2222
>

‎src/content/documentation/base-components/buttons.mdx‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -56,30 +56,7 @@ These buttons are built using React HTML Tailwind CSS.
5656
</TabPanel>
5757
</Tabs>
5858

59-
### Product skins
6059

61-
<Tabs defaultTab="preview">
62-
<TabButton slot="tabs" tab="preview">Preview</TabButton>
63-
<TabButton slot="tabs" tab="code">Code</TabButton>
64-
65-
<TabPanel slot="content" tab="preview" class="p-4 bg-base-50 dark:bg-white/5 rounded-xl">
66-
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
67-
<Button variant="oxbowDefault">Oxbow Default</Button>
68-
<Button variant="oxbowMuted">Oxbow Muted</Button>
69-
<Button variant="oxbowAccent">Oxbow Accent</Button>
70-
<Button variant="oxbowOutline">Oxbow Outline</Button>
71-
</div>
72-
</TabPanel>
73-
74-
<TabPanel slot="content" tab="code">
75-
```astro
76-
<Button variant="oxbowDefault">Oxbow Default</Button>
77-
<Button variant="oxbowMuted">Oxbow Muted</Button>
78-
<Button variant="oxbowAccent">Oxbow Accent</Button>
79-
<Button variant="oxbowOutline">Oxbow Outline</Button>
80-
```
81-
</TabPanel>
82-
</Tabs>
8360

8461
### Semantic statuses
8562

‎src/layouts/DocsLayout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,8 +197,8 @@ const nextNav = next
197197
class:list={[
198198
"pl-4",
199199
isActive
200-
? "text-accent-600 hover:text-base-600"
201-
: "text-base-600 hover:text-accent-600",
200+
? "text-accent-600 hover:text-base-400 dark:text-accent-500"
201+
: "text-base-600 hover:text-accent-600 dark:text-base-400",
202202
]}
203203
>
204204
<span>{link.title}</span>

‎src/styles/global.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,17 @@
2525
--color-orange: #fa5925;
2626
--color-orange-dark: #fd4202;
2727
/* Colors */
28-
--color-accent-50: oklch(0.977 0.013 236.62);
29-
--color-accent-100: oklch(0.951 0.026 236.824);
30-
--color-accent-200: oklch(0.901 0.058 230.902);
31-
--color-accent-300: oklch(0.828 0.111 230.318);
32-
--color-accent-400: oklch(0.746 0.16 232.661);
33-
--color-accent-500: oklch(0.685 0.169 237.323);
34-
--color-accent-600: oklch(0.588 0.158 241.966);
35-
--color-accent-700: oklch(0.5 0.134 242.749);
36-
--color-accent-800: oklch(0.443 0.11 240.79);
37-
--color-accent-900: oklch(0.391 0.09 240.876);
38-
--color-accent-950: oklch(0.293 0.066 243.157);
28+
--color-accent-50: oklch(0.965 0.015 273.9);
29+
--color-accent-100: oklch(0.923 0.035 271.59);
30+
--color-accent-200: oklch(0.854 0.068 269.37);
31+
--color-accent-300: oklch(0.779 0.107 266.88);
32+
--color-accent-400: oklch(0.71 0.142 263.28);
33+
--color-accent-500: oklch(0.637 0.186 257.83);
34+
--color-accent-600: oklch(0.537 0.169 256.53);
35+
--color-accent-700: oklch(0.435 0.137 256.38);
36+
--color-accent-800: oklch(0.339 0.107 256.49);
37+
--color-accent-900: oklch(0.235 0.074 256.59);
38+
--color-accent-950: oklch(0.19 0.058 256.6);
3939
/* base*/
4040
--color-base-50: oklch(0.985 0 0);
4141
--color-base-100: oklch(0.97 0 0);

0 commit comments

Comments
 (0)