Skip to content

Commit 216f8a3

Browse files
author
Mathis Pierron
committed
chore: update tailwind color names
1 parent 1f19ffd commit 216f8a3

10 files changed

Lines changed: 189 additions & 43 deletions

File tree

‎src/application/components/SideBar.css‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@
55
.side-bar .icon {
66
@apply flex h-10 w-10 content-center justify-center gap-2 rounded;
77
@apply text-red-300;
8-
@apply bg-grayscale-0 text-grayscale-60;
8+
@apply bg-btn-bg-side-bar-tool-default text-btn-ico-side-bar-tool-default;
99
}
1010

11-
.side-bar .icon:hover,
1211
.side-bar .icon.active {
13-
@apply bg-grayscale-20 text-grayscale-70;
12+
@apply bg-btn-bg-side-bar-tool-active text-btn-ico-side-bar-tool-active;
13+
}
14+
15+
.side-bar .icon:hover {
16+
@apply bg-btn-bg-side-bar-tool-hover text-btn-ico-side-bar-tool-hover;
1417
}

‎src/application/components/SideBar.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,13 @@ export function SideBar<SideBarPane extends string>({
2626
))}
2727
</div>
2828
{footerItems?.length && (
29-
<>
30-
<div className="h-[1px] w-full bg-grayscale-20" />
31-
<div className="flex flex-col gap-2 p-2">
32-
{footerItems.map(({ label, Icon, onClick }) => (
33-
<IconButton key={label} onClick={onClick}>
34-
{Icon}
35-
</IconButton>
36-
))}
37-
</div>
38-
</>
29+
<div className="flex flex-col gap-2 border-t-[1px] border-t-side-bar-border p-2">
30+
{footerItems.map(({ label, Icon, onClick }) => (
31+
<IconButton key={label} onClick={onClick}>
32+
{Icon}
33+
</IconButton>
34+
))}
35+
</div>
3936
)}
4037
</div>
4138
);

‎src/application/sidebar/LeftSidePanelWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export function LeftSidePanelWrapper() {
4747
<>
4848
<SideBar
4949
activePane={primaryPaneCollapsed ? null : primaryPane}
50-
className={cx({ 'border-r-[1px] border-r-grayscale-20': !primaryPaneCollapsed })}
50+
className={cx({ 'border-r-[1px] border-r-side-bar-border': !primaryPaneCollapsed })}
5151
footerItems={[
5252
// TODO: Implement Keybinds screen
5353
{

‎src/application/sidebar/RightSidePanelWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export function RightSidePanelWrapper() {
4747
</Panel>
4848
<SideBar
4949
activePane={secondaryPaneCollapsed ? null : secondaryPane}
50-
className={cx({ 'border-l-[1px] border-l-grayscale-20': !secondaryPaneCollapsed })}
50+
className={cx({ 'border-l-[1px] border-l-side-bar-border': !secondaryPaneCollapsed })}
5151
items={[
5252
{ pane: 'Rewriter', Icon: <PenIcon /> },
5353
{ pane: 'Chatbot', Icon: <BotIcon /> },

‎src/application/views/Logo.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { cx } from '../../lib/cx';
33
export function Logo() {
44
return (
55
<div className="flex h-32 w-64 shrink-0 flex-row overflow-hidden rounded-default shadow-default">
6-
<LogoLetter className="bg-grayscale-90 text-grayscale-0" letter="R" />
7-
<LogoLetter className="bg-grayscale-0 text-grayscale-90" letter="S" />
6+
<LogoLetter className="bg-logo-primary text-logo-secondary" letter="R" />
7+
<LogoLetter className="bg-logo-secondary text-logo-primary" letter="S" />
88
</div>
99
);
1010
}

‎src/application/views/WelcomeView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function WelcomeView() {
88
'h-full w-full',
99
'flex flex-col items-center justify-center gap-28',
1010
'px-6 pb-16 pt-0',
11-
'bg-grayscale-10',
11+
'bg-content-area-bg-primary',
1212
'cursor-default select-none',
1313
)}
1414
>
@@ -24,7 +24,7 @@ export function WelcomeView() {
2424
{/* <WelcomeViewShortcut keys={['⌘', '?']} text="Repeat AI Rewriter" /> */}
2525
</div>
2626
</div>
27-
<div className="h-full w-[1px] bg-grayscale-20" />
27+
<div className="h-full w-[1px] bg-shortcuts-border" />
2828
<div className="flex w-[16.5rem] flex-col gap-10">
2929
<div className="flex flex-col items-end gap-4">
3030
<WelcomeViewShortcut keys={['⌘', 'K']} text="Quick Actions" />
@@ -71,7 +71,7 @@ function WelcomeViewShortcut({ text, keys }: Shortcut) {
7171
}
7272
return (
7373
<kbd
74-
className="flex h-8 w-8 items-center justify-center rounded-default bg-grayscale-30 text-base"
74+
className="flex h-8 w-8 items-center justify-center rounded-default bg-content-area-bg-secondary text-base"
7575
key={key.value}
7676
>
7777
{key.value}

‎src/components/VerticalResizeHandle.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ export function VerticalResizeHandle() {
88

99
return (
1010
<PanelResizeHandle
11-
className={cx('flex h-full w-1', 'bg-grayscale-20 hover:bg-grayscale-40', { 'bg-grayscale-40': isDragging })}
11+
className={cx('flex h-full w-1', 'bg-resizer-bg-default hover:bg-resizer-bg-hover', {
12+
'bg-resizer-bg-hover': isDragging,
13+
})}
1214
onDragging={setDragging}
1315
/>
1416
);

‎src/index.css‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,19 @@
1111
--color-secondary-hover: 193deg 37% 48%;
1212
--color-muted: 218deg 11% 65%;
1313
--color-error: 0deg 84% 60%;
14-
--grayscale-0: 0deg 0% 100%;
15-
--grayscale-10: 220deg 33% 98%;
16-
--grayscale-20: 216deg 19% 95%;
17-
--grayscale-30: 217deg 15% 90%;
18-
--grayscale-60: 0deg 0% 53%;
19-
--grayscale-70: 213deg 6% 35%;
20-
--grayscale-90: 90deg 2% 21%;
21-
--grayscale-100: 0deg 0% 12%;
22-
--primary-60: 213deg 44% 25%;
23-
--primary-70: 213deg 45% 21%;
14+
--grayscale-00: 255 255 255;
15+
--grayscale-10: 249 250 252;
16+
--grayscale-20: 239 241 244;
17+
--grayscale-30: 226 230 238;
18+
--grayscale-40: 219 223 231;
19+
--grayscale-50: 209 215 225;
20+
--grayscale-60: 136 136 136;
21+
--grayscale-70: 84 89 95;
22+
--grayscale-80: 53 54 52;
23+
--grayscale-90: 30 30 30;
24+
--primary-10: 220 234 250;
25+
--primary-50: 36 62 93;
26+
--primary-90: 29 51 77;
2427
}
2528
}
2629

‎src/splash.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Logo } from './application/views/Logo';
77

88
ReactDOM.createRoot(document.getElementById('root')!).render(
99
<React.StrictMode>
10-
<div className="flex h-full w-full items-center justify-center bg-grayscale-10">
10+
<div className="flex h-full w-full items-center justify-center bg-content-area-bg-primary">
1111
<Logo />
1212
</div>
1313
</React.StrictMode>,

‎tailwind.config.js‎

Lines changed: 152 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,158 @@ export default {
1717
},
1818
muted: 'hsl(var(--color-muted) / <alpha-value>)',
1919
error: 'hsl(var(--color-error) / <alpha-value>)',
20-
'grayscale-0': 'hsl(var(--grayscale-0) / <alpha-value>)',
21-
'grayscale-10': 'hsl(var(--grayscale-10) / <alpha-value>)',
22-
'grayscale-20': 'hsl(var(--grayscale-20) / <alpha-value>)',
23-
'grayscale-30': 'hsl(var(--grayscale-30) / <alpha-value>)',
24-
'grayscale-40': 'rgb(219 223 231 / <alpha-value>)',
25-
'grayscale-60': 'hsl(var(--grayscale-60) / <alpha-value>)',
26-
'grayscale-70': 'hsl(var(--grayscale-70) / <alpha-value>)',
27-
'grayscale-90': 'hsl(var(--grayscale-90) / <alpha-value>)',
28-
'grayscale-100': 'hsl(var(--grayscale-100) / <alpha-value>)',
29-
'primary-60': 'hsl(var(--primary-60) / <alpha-value>)',
30-
'primary-70': 'hsl(var(--primary-70) / <alpha-value>)',
20+
'resizer-bg': {
21+
hover: 'rgb(var(--grayscale-40) / <alpha-value>)',
22+
default: 'rgb(var(--grayscale-20) / <alpha-value>)',
23+
},
24+
'btn-ico-modal-item': {
25+
active: 'rgb(var(--grayscale-80) / <alpha-value>)',
26+
hover: 'rgb(var(--grayscale-80) / <alpha-value>)',
27+
default: 'rgb(var(--grayscale-70) / <alpha-value>)',
28+
},
29+
'btn-txt-modal-item': {
30+
hover: 'rgb(var(--grayscale-80) / <alpha-value>)',
31+
active: 'rgb(var(--grayscale-80) / <alpha-value>)',
32+
default: 'rgb(var(--grayscale-70) / <alpha-value>)',
33+
},
34+
'modal-ico-placeholder': 'rgb(var(--grayscale-40) / <alpha-value>)',
35+
'modal-txt-placeholder': 'rgb(var(--grayscale-40) / <alpha-value>)',
36+
'modal-border': 'rgb(var(--grayscale-20) / <alpha-value>)',
37+
'modal-txt': {
38+
secondary: 'rgb(var(--grayscale-60) / <alpha-value>)',
39+
primary: 'rgb(var(--grayscale-80) / <alpha-value>)',
40+
},
41+
'modal-bg': {
42+
secondary: 'rgb(var(--grayscale-10) / <alpha-value>)',
43+
primary: 'rgb(var(--grayscale-00) / <alpha-value>)',
44+
},
45+
'modal-bg-overlay': 'rgb(var(--undefined) / <alpha-value>)',
46+
'card-txt': {
47+
tertiary: 'rgb(var(--grayscale-60) / <alpha-value>)',
48+
secondary: 'rgb(var(--grayscale-70) / <alpha-value>)',
49+
primary: 'rgb(var(--grayscale-80) / <alpha-value>)',
50+
},
51+
'input-txt': {
52+
disabled: 'rgb(var(--grayscale-60) / <alpha-value>)',
53+
secondary: 'rgb(var(--grayscale-70) / <alpha-value>)',
54+
primary: 'rgb(var(--grayscale-80) / <alpha-value>)',
55+
},
56+
'btn-bg-side-bar-icon': {
57+
hover: 'rgb(var(--grayscale-20) / <alpha-value>)',
58+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
59+
},
60+
'btn-ico-side-bar-tool': {
61+
disabled: 'rgb(var(--grayscale-20) / <alpha-value>)',
62+
hover: 'rgb(var(--grayscale-70) / <alpha-value>)',
63+
default: 'rgb(var(--grayscale-60) / <alpha-value>)',
64+
active: 'rgb(var(--grayscale-70) / <alpha-value>)',
65+
},
66+
'btn-ico-tool': {
67+
disabled: 'rgb(var(--grayscale-40) / <alpha-value>)',
68+
default: 'rgb(var(--grayscale-70) / <alpha-value>)',
69+
hover: 'rgb(var(--grayscale-80) / <alpha-value>)',
70+
active: 'rgb(var(--grayscale-80) / <alpha-value>)',
71+
},
72+
'btn-bg-tool': {
73+
active: 'rgb(var(--grayscale-20) / <alpha-value>)',
74+
hover: 'rgb(var(--grayscale-20) / <alpha-value>)',
75+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
76+
},
77+
'content-area-border': 'rgb(var(--grayscale-30) / <alpha-value>)',
78+
'status-bar-txt': 'rgb(var(--grayscale-20) / <alpha-value>)',
79+
'btn-bg-side-bar-tool': {
80+
active: 'rgb(var(--grayscale-20) / <alpha-value>)',
81+
disabled: 'rgb(var(--grayscale-00) / <alpha-value>)',
82+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
83+
hover: 'rgb(var(--grayscale-20) / <alpha-value>)',
84+
},
85+
'btn-txt-side-bar-item': { primary: 'rgb(var(--grayscale-80) / <alpha-value>)' },
86+
'btn-bg-side-bar-item': {
87+
active: 'rgb(var(--grayscale-20) / <alpha-value>)',
88+
hover: 'rgb(var(--grayscale-20) / <alpha-value>)',
89+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
90+
},
91+
'btn-bg-top-bar-i': { active: 'rgb(var(--grayscale-30) / <alpha-value>)' },
92+
'btn-ico-side-bar-icon': {
93+
hover: 'rgb(var(--grayscale-70) / <alpha-value>)',
94+
default: 'rgb(var(--grayscale-60) / <alpha-value>)',
95+
},
96+
'input-border': 'rgb(var(--grayscale-20) / <alpha-value>)',
97+
'input-bg': {
98+
disabled: 'rgb(var(--grayscale-20) / <alpha-value>)',
99+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
100+
},
101+
'status-bar-border': 'rgb(var(--grayscale-70) / <alpha-value>)',
102+
'btn-ico-top-bar-i': { active: 'rgb(var(--grayscale-70) / <alpha-value>)' },
103+
'btn-txt-top-bar-i': { active: 'rgb(var(--grayscale-70) / <alpha-value>)' },
104+
'top-bar-bg': { active: 'rgb(var(--grayscale-10) / <alpha-value>)' },
105+
'btn-bg-top-bar': { active: 'rgb(var(--grayscale-10) / <alpha-value>)' },
106+
'top-bar-border': 'rgb(var(--grayscale-50) / <alpha-value>)',
107+
'btn-txt-top-bar': { active: 'rgb(var(--grayscale-80) / <alpha-value>)' },
108+
'btn-ico-top-bar': { active: 'rgb(var(--grayscale-80) / <alpha-value>)' },
109+
'content-area-bg': {
110+
primary: 'rgb(var(--grayscale-10) / <alpha-value>)',
111+
secondary: 'rgb(var(--grayscale-30) / <alpha-value>)',
112+
},
113+
'side-bar-txt': 'rgb(var(--grayscale-80) / <alpha-value>)',
114+
'side-bar-border': 'rgb(var(--grayscale-20) / <alpha-value>)',
115+
'side-bar-bg': {
116+
primary: 'rgb(var(--grayscale-00) / <alpha-value>)',
117+
secondary: 'rgb(var(--grayscale-20) / <alpha-value>)',
118+
},
119+
'card-txt-header': 'rgb(var(--grayscale-00) / <alpha-value>)',
120+
'card-border-header': 'rgb(var(--primary-90) / <alpha-value>)',
121+
'card-border': {
122+
secondary: 'rgb(var(--grayscale-40) / <alpha-value>)',
123+
primary: 'rgb(var(--grayscale-20) / <alpha-value>)',
124+
},
125+
'status-bar-ico': 'rgb(var(--grayscale-20) / <alpha-value>)',
126+
'btn-ico-primary': {
127+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
128+
disabled: 'rgb(var(--grayscale-40) / <alpha-value>)',
129+
},
130+
'top-bar-bg-i': { active: 'rgb(var(--grayscale-30) / <alpha-value>)' },
131+
'input-bg-action': 'rgb(var(--primary-50) / <alpha-value>)',
132+
'btn-bg-modal-item': {
133+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
134+
hover: 'rgb(var(--grayscale-20) / <alpha-value>)',
135+
},
136+
'card-bg-header': 'rgb(var(--primary-50) / <alpha-value>)',
137+
'card-bg': {
138+
secondary: 'rgb(var(--grayscale-20) / <alpha-value>)',
139+
primary: 'rgb(var(--grayscale-00) / <alpha-value>)',
140+
},
141+
'status-bar-bg': 'rgb(var(--grayscale-90) / <alpha-value>)',
142+
'input-txt-placeholder': 'rgb(var(--grayscale-60) / <alpha-value>)',
143+
'btn-ico-secondary': {
144+
default: 'rgb(var(--grayscale-80) / <alpha-value>)',
145+
disabled: 'rgb(var(--grayscale-40) / <alpha-value>)',
146+
},
147+
'input-ico-placeholder': 'rgb(var(--grayscale-60) / <alpha-value>)',
148+
'input-ico': { primary: 'rgb(var(--grayscale-80) / <alpha-value>)' },
149+
'btn-txt-primary': {
150+
default: 'rgb(var(--grayscale-00) / <alpha-value>)',
151+
disabled: 'rgb(var(--grayscale-40) / <alpha-value>)',
152+
},
153+
'btn-bg-secondary': {
154+
disabled: 'rgb(var(--grayscale-20) / <alpha-value>)',
155+
default: 'rgb(var(--grayscale-20) / <alpha-value>)',
156+
},
157+
'btn-txt-secondary': {
158+
disabled: 'rgb(var(--grayscale-40) / <alpha-value>)',
159+
default: 'rgb(var(--grayscale-80) / <alpha-value>)',
160+
},
161+
'content-area-txt': 'rgb(var(--grayscale-80) / <alpha-value>)',
162+
'btn-ico-side-bar-item': 'rgb(var(--grayscale-80) / <alpha-value>)',
163+
'btn-bg-primary': {
164+
disabled: 'rgb(var(--grayscale-20) / <alpha-value>)',
165+
default: 'rgb(var(--primary-50) / <alpha-value>)',
166+
},
167+
logo: {
168+
primary: 'rgb(var(--grayscale-80) / <alpha-value>)',
169+
secondary: 'rgb(var(--grayscale-00) / <alpha-value>)',
170+
},
171+
'shortcuts-border': 'rgb(var(--grayscale-20) / <alpha-value>)',
31172
},
32173
boxShadow: {
33174
default: '0px 0px 24px 0px rgba(0, 0, 0, 0.04)',

0 commit comments

Comments
 (0)