tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

ui-v2 titlebar and fonts (#2607)

Browse Source
This commit is contained in:
Zane
2025-05-21 08:18:08 -07:00
committed by GitHub
parent f4ae801d97
commit ce2e76c882
8 changed files with 835 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-v2/src/App.tsx
+11 -3
View File
@@ -6,9 +6,17 @@ import SuspenseLoader from './components/SuspenseLoader';
const App: React.FC = (): React.ReactElement => {
return (
<Suspense fallback={<SuspenseLoader />}>
<Outlet />
</Suspense>
<div className="">
<div className="titlebar-drag-region" />
<div className="h-10 border-b-1 w-full" />
<div className="">
<div className="">
<Suspense fallback={<SuspenseLoader />}>
<Outlet />
</Suspense>
</div>
</div>
</div>
);
};
ui-v2/src/index.css
+170 -8
View File
@@ -4,14 +4,176 @@
@tailwind components;
@tailwind utilities;
:root {
--bg-app: #fff;
--text-prominent: #000;
}
@media (prefers-color-scheme: dark) {
@layer base {
:root {
--bg-app: #1a1a1a;
--text-prominent: #fff;
overflow: hidden;
--spring-easing: linear(
0,
0.009,
0.035 2.1%,
0.141,
0.281 6.7%,
0.723 12.9%,
0.938 16.7%,
1.017,
1.077,
1.121,
1.149 24.3%,
1.159,
1.163,
1.161,
1.154 29.9%,
1.129 32.8%,
1.051 39.6%,
1.017 43.1%,
0.991,
0.977 51%,
0.974 53.8%,
0.975 57.1%,
0.997 69.8%,
1.003 76.9%,
1.004 83.8%,
1
);
--spring-duration: 1.333s;
/* custom slate */
--slate: #393838;
/* block */
--block-teal: #13bbaf;
--block-orange: #ff4f00;
/* start arcade colors */
--constant-white: #ffffff;
--constant-black: #000000;
--grey-10: #101010;
--grey-20: #1e1e1e;
--grey-50: #666666;
--grey-60: #959595;
--grey-80: #cccccc;
--grey-85: #dadada;
--grey-90: #e8e8e8;
--grey-95: #f0f0f0;
--dark-grey-15: #1a1a1a;
--dark-grey-25: #232323;
--dark-grey-30: #2a2a2a;
--dark-grey-40: #333333;
--dark-grey-45: #595959;
--dark-grey-60: #878787;
--dark-grey-90: #e1e1e1;
--background-app: var(--constant-white);
--background-prominent: var(--grey-80);
--background-standard: var(--grey-90);
--background-subtle: var(--grey-95);
--background-app-inverse: var(--constant-black);
--background-subtle-inverse: var(--dark-grey-15);
--background-standard-inverse: var(--dark-grey-25);
--background-prominent-inverse: var(--dark-grey-40);
--border-divider: var(--grey-90);
--border-inverse: var(--constant-white);
--border-prominent: var(--grey-10);
--border-standard: var(--grey-60);
--border-subtle: var(--grey-90);
--icon-disabled: var(--grey-60);
--icon-extra-subtle: var(--grey-60);
--icon-inverse: var(--constant-white);
--icon-prominent: var(--grey-10);
--icon-standard: var(--grey-20);
--icon-subtle: var(--grey-50);
--text-placeholder: var(--grey-60);
--text-prominent: var(--grey-10);
--text-standard: var(--grey-20);
--text-standard-inverse: var(--dark-grey-90);
--text-subtle: var(--grey-50);
--text-subtle-inverse: var(--dark-grey-60);
--text-prominent-inverse: var(--constant-white);
}
@media (prefers-color-scheme: dark) {
:root {
--background-app: var(--constant-black);
--background-prominent: var(--dark-grey-40);
--background-standard: var(--dark-grey-25);
--background-subtle: var(--dark-grey-15);
--background-app-inverse: var(--constant-white);
--background-subtle-inverse: var(--grey-95);
--background-standard-inverse: var(--grey-90);
--background-prominent-inverse: var(--grey-80);
--border-divider: var(--dark-grey-25);
--border-inverse: var(--constant-black);
--border-prominent: var(--constant-white);
--border-standard: var(--dark-grey-45);
--border-subtle: var(--dark-grey-25);
--icon-disabled: var(--dark-grey-45);
--icon-extra-subtle: var(--dark-grey-45);
--icon-inverse: var(--constant-black);
--icon-prominent: var(--constant-white);
--icon-standard: var(--dark-grey-90);
--icon-subtle: var(--dark-grey-60);
--text-placeholder: var(--dark-grey-45);
--text-prominent: var(--constant-white);
--text-standard: var(--dark-grey-90);
--text-standard-inverse: var(--grey-20);
--text-subtle: var(--dark-grey-60);
--text-subtle-inverse: var(--grey-50);
--text-prominent-inverse: var(--grey-20);
}
}
body {
background-color: var(--background-app);
}
}
@font-face {
font-family: 'Cash Sans';
src:
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
format('woff2'),
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Cash Sans';
src:
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Medium.woff2)
format('woff2'),
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Cash Sans Mono';
src:
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
format('woff2'),
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
format('woff');
font-weight: 400;
font-style: normal;
}
.titlebar-drag-region {
-webkit-app-region: drag;
height: 32px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 50;
}
ui-v2/src/utils/utils.ts
+6
View File
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]): string {
return twMerge(clsx(inputs));
}