ui-v2 titlebar and fonts (#2607)
This commit is contained in:
Zane
@@ -72,7 +72,7 @@ async function createWindow() {
|
|||||||
style-src 'self' 'unsafe-inline';
|
style-src 'self' 'unsafe-inline';
|
||||||
connect-src 'self' ws://localhost:3001 http://localhost:3001;
|
connect-src 'self' ws://localhost:3001 http://localhost:3001;
|
||||||
img-src 'self' data: https:;
|
img-src 'self' data: https:;
|
||||||
font-src 'self' data:;
|
font-src 'self' data: https://cash-f.squarecdn.com;
|
||||||
`
|
`
|
||||||
.replace(/\s+/g, ' ')
|
.replace(/\s+/g, ' ')
|
||||||
.trim()
|
.trim()
|
||||||
@@ -81,7 +81,7 @@ async function createWindow() {
|
|||||||
script-src 'self';
|
script-src 'self';
|
||||||
style-src 'self' 'unsafe-inline';
|
style-src 'self' 'unsafe-inline';
|
||||||
img-src 'self' data: https:;
|
img-src 'self' data: https:;
|
||||||
font-src 'self' data:;
|
font-src 'self' data: https://cash-f.squarecdn.com;
|
||||||
`
|
`
|
||||||
.replace(/\s+/g, ' ')
|
.replace(/\s+/g, ' ')
|
||||||
.trim(),
|
.trim(),
|
||||||
|
|||||||
+1
-2
@@ -5,9 +5,8 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta
|
<meta
|
||||||
http-equiv="Content-Security-Policy"
|
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>
|
<title>Goose v2</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Generated
+560
-482
File diff suppressed because it is too large
Load Diff
+5
-1
@@ -34,6 +34,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tanstack/react-router": "^1.120.5",
|
"@tanstack/react-router": "^1.120.5",
|
||||||
"@tanstack/router": "^0.0.1-beta.53",
|
"@tanstack/router": "^0.0.1-beta.53",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
"react": "^19.1.0",
|
"react": "^19.1.0",
|
||||||
"react-dom": "^19.1.0"
|
"react-dom": "^19.1.0"
|
||||||
},
|
},
|
||||||
@@ -74,7 +75,10 @@
|
|||||||
"prettier": "^3.5.3",
|
"prettier": "^3.5.3",
|
||||||
"stylelint": "^16.19.1",
|
"stylelint": "^16.19.1",
|
||||||
"stylelint-config-standard": "^38.0.0",
|
"stylelint-config-standard": "^38.0.0",
|
||||||
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
|
"tailwind-merge": "^3.3.0",
|
||||||
"tailwindcss": "^4.1.7",
|
"tailwindcss": "^4.1.7",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"typescript": "^5.8.3",
|
"typescript": "^5.8.3",
|
||||||
"vite": "^6.3.5",
|
"vite": "^6.3.5",
|
||||||
@@ -94,4 +98,4 @@
|
|||||||
"config": {
|
"config": {
|
||||||
"forge": "./forge.config.ts"
|
"forge": "./forge.config.ts"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+11
-3
@@ -6,9 +6,17 @@ import SuspenseLoader from './components/SuspenseLoader';
|
|||||||
|
|
||||||
const App: React.FC = (): React.ReactElement => {
|
const App: React.FC = (): React.ReactElement => {
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<SuspenseLoader />}>
|
<div className="">
|
||||||
<Outlet />
|
<div className="titlebar-drag-region" />
|
||||||
</Suspense>
|
<div className="h-10 border-b-1 w-full" />
|
||||||
|
<div className="">
|
||||||
|
<div className="">
|
||||||
|
<Suspense fallback={<SuspenseLoader />}>
|
||||||
|
<Outlet />
|
||||||
|
</Suspense>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+170
-8
@@ -4,14 +4,176 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
@layer base {
|
||||||
--bg-app: #fff;
|
|
||||||
--text-prominent: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
:root {
|
||||||
--bg-app: #1a1a1a;
|
overflow: hidden;
|
||||||
--text-prominent: #fff;
|
--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;
|
||||||
|
}
|
||||||
|
|||||||
@@ -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));
|
||||||
|
}
|
||||||
@@ -1,14 +1,92 @@
|
|||||||
|
import generated from '@tailwindcss/typography';
|
||||||
|
import tailwindcss_animate from 'tailwindcss-animate';
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
darkMode: 'media', // Enable dark mode and use the system preference
|
darkMode: 'media', // Enable dark mode and use the system preference
|
||||||
|
plugins: [tailwindcss_animate, generated],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
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: {
|
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)',
|
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: [],
|
|
||||||
};
|
};
|
||||||
Reference in New Issue
Block a user