aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2026-02-14 02:54:30 +01:00
Code Issues 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

4
ui-v2/electron/main.ts
View File

@@ -72,7 +72,7 @@ async function createWindow() {
style-src 'self' 'unsafe-inline';
connect-src 'self' ws://localhost:3001 http://localhost:3001;
img-src 'self' data: https:;
font-src 'self' data:;
font-src 'self' data: https://cash-f.squarecdn.com;
`
.replace(/\s+/g, ' ')
.trim()
@@ -81,7 +81,7 @@ async function createWindow() {
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self' data:;
font-src 'self' data: https://cash-f.squarecdn.com;
`
.replace(/\s+/g, ' ')
.trim(),

3
ui-v2/index.html
View File

@@ -5,9 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data: https://cash-f.squarecdn.com"
/>
<link href="/src/index.css" rel="stylesheet" />
<title>Goose v2</title>
</head>
<body>

1042
ui-v2/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
ui-v2/package.json
View File

@@ -34,6 +34,7 @@
"dependencies": {
"@tanstack/react-router": "^1.120.5",
"@tanstack/router": "^0.0.1-beta.53",
"clsx": "^2.1.1",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
@@ -74,7 +75,10 @@
"prettier": "^3.5.3",
"stylelint": "^16.19.1",
"stylelint-config-standard": "^38.0.0",
"@tailwindcss/typography": "^0.5.16",
"tailwind-merge": "^3.3.0",
"tailwindcss": "^4.1.7",
"tailwindcss-animate": "^1.0.7",
"ts-node": "^10.9.2",
"typescript": "^5.8.3",
"vite": "^6.3.5",
@@ -94,4 +98,4 @@
"config": {
"forge": "./forge.config.ts"
}
}
}

14
ui-v2/src/App.tsx
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>
);
};

178
ui-v2/src/index.css
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;
}

6
ui-v2/src/utils/utils.ts Normal file
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));
}

82
ui-v2/tailwind.config.js
View File

@@ -1,14 +1,92 @@
import generated from '@tailwindcss/typography';
import tailwindcss_animate from 'tailwindcss-animate';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'media', // Enable dark mode and use the system preference
plugins: [tailwindcss_animate, generated],
theme: {
extend: {
fontFamily: {
sans: ['Cash Sans', 'sans-serif'],
mono: ['Cash Sans Mono', 'monospace'],
},
keyframes: {
shimmer: {
'0%': { backgroundPosition: '200% 0' },
'100%': { backgroundPosition: '-200% 0' },
},
loader: {
'0%': { left: 0, width: 0 },
'50%': { left: 0, width: '100%' },
'100%': { left: '100%', width: 0 },
},
popin: {
from: { opacity: 0, transform: 'scale(0.95)' },
to: { opacity: 1, transform: 'scale(1)' },
},
fadein: {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
},
appear: {
'0%': { opacity: 0, transform: 'translateY(12px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
},
flyin: {
'0%': { opacity: 0, transform: 'translate(-300%, 300%)' },
'100%': { opacity: 1, transform: 'translate(0, 0)' },
},
wind: {
'0%': { transform: 'translate(0, 0)' },
'99.99%': { transform: 'translate(-100%, 100%)' },
'100%': { transform: 'translate(0, 0)' },
},
rotate: {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
},
animation: {
'shimmer-pulse': 'shimmer 4s ease-in-out infinite',
'gradient-loader': 'loader 750ms ease-in-out infinite',
},
colors: {
bgApp: 'var(--bg-app)',
bgApp: 'var(--background-app)',
bgSubtle: 'var(--background-subtle)',
bgStandard: 'var(--background-standard)',
bgProminent: 'var(--background-prominent)',
bgAppInverse: 'var(--background-app-inverse)',
bgSubtleInverse: 'var(--background-subtle-inverse)',
bgStandardInverse: 'var(--background-standard-inverse)',
bgProminentInverse: 'var(--background-prominent-inverse)',
borderSubtle: 'var(--border-subtle)',
borderStandard: 'var(--border-standard)',
borderProminent: 'var(--border-prominent)',
textProminent: 'var(--text-prominent)',
textStandard: 'var(--text-standard)',
textSubtle: 'var(--text-subtle)',
textPlaceholder: 'var(--text-placeholder)',
textProminentInverse: 'var(--text-prominent-inverse)',
iconProminent: 'var(--icon-prominent)',
iconStandard: 'var(--icon-standard)',
iconSubtle: 'var(--icon-subtle)',
iconExtraSubtle: 'var(--icon-extra-subtle)',
slate: 'var(--slate)',
blockTeal: 'var(--block-teal)',
blockOrange: 'var(--block-orange)',
},
typography: {
DEFAULT: {
css: {
color: 'var(--text-standard)',
},
},
},
},
},
plugins: [],
};