ai-space/goose
3
0
Fork 0
mirror of https://github.com/aaif-goose/goose.git synced 2026-07-03 14:10:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

styles: adding arcade styles and cash sans (#581)

Browse Source
This commit is contained in:
Nahiyan Khan
2025-01-13 16:00:44 -05:00
committed by GitHub
parent 3963de171b
commit e00dd11fab
6 changed files with 365 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/components.json
+2 -2
View File
@@ -5,7 +5,7 @@
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/index.css",
"css": "src/styles/main.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
@@ -18,4 +18,4 @@
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
}
ui/desktop/index.html
+15 -12
View File
@@ -3,25 +3,28 @@
<head>
<meta charset="UTF-8" />
<title>Goose</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="./src/index.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<link href="/src/styles/main.css" rel="stylesheet" />
</head>
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
const useSystemTheme = localStorage.getItem('use_system_theme') === 'true';
const savedTheme = localStorage.getItem('theme');
const useSystemTheme = localStorage.getItem("use_system_theme") === "true";
const savedTheme = localStorage.getItem("theme");
document.documentElement.classList.toggle(
'dark',
useSystemTheme
? window.matchMedia('(prefers-color-scheme: dark)').matches
: savedTheme === 'dark'
"dark",
useSystemTheme
? window.matchMedia("(prefers-color-scheme: dark)").matches
: savedTheme === "dark"
);
</script>
<body>
<div id="root" class="inter-app-type"></div>
<script type="module" src="/src/renderer.tsx"></script>
</body>
</html>
</html>
ui/desktop/src/index.css
-120
View File
@@ -1,120 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--radius: 0.5rem;
}
.inter-app-type {
color: rgba(0, 0, 0, 0.90);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
/* Dark mode styles */
.dark .inter-app-type {
color: rgba(255, 255, 255, 0.90);
}
}
@layer components {
.titlebar-drag-region {
-webkit-app-region: drag;
height: 32px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 50;
}
.no-drag {
-webkit-app-region: no-drag;
}
.ask-goose-type {
color: #000;
font-family: "Square Sans Mono";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 1.6px;
}
.dark .ask-goose-type {
color: #9D9D9D;
}
.tool-form-button {
color: #7A7EFB;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: var(--Type-styles-Paragraph-leading-20, 22px);
letter-spacing: var(--Type-styles-Paragraph-tracking-20, 0px);
background: var(--fill-40, rgba(0, 0, 0, 0.05));
}
.dark .tool-form-button {
color: #7A7EFB;
background: var(--fill-40, rgba(255, 255, 255, 0.1));
}
.tab-type {
color: rgba(91, 91, 91, 0.80);
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.dark .tab-type {
color: rgba(164, 164, 164, 0.80);
}
body {
color: black;
}
.dark body {
color: white;
}
.bg-inline-code {
border-radius: 4px;
color: rgba(255, 130, 130, 0.85);
font-family: "Square Sans Mono";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.bg-inline-code:before {
content: "";
}
pre:has(> code.bg-inline-code) {
padding: 1em;
}
*:has(> code.bg-inline-code) {
.bg-inline-code {
padding: 2px 4px;
}
}
.bg-inline-code:after {
content: "";
}
.dark .bg-inline-code {
color: rgba(248, 155, 89, 0.7);
}
}
ui/desktop/src/renderer.js
+4 -2
View File
@@ -26,6 +26,8 @@
* ```
*/
import './index.css';
import "/styles/main.css";
console.log('👋 This message is being logged by "renderer.js", included via Vite');
console.log(
'👋 This message is being logged by "renderer.js", included via Vite'
);
ui/desktop/src/styles/main.css
+218
View File
@@ -0,0 +1,218 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Cash Sans */
@font-face {
font-family: "CashSans";
src: url("./fonts/CashSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "CashSans";
src: url("./fonts/CashSans-Bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "CashSans";
src: url("./fonts/CashSansMono-Light.woff2") format("woff2");
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: "CashSans";
src: url("./fonts/CashSansMono-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@layer base {
:root {
--radius: 0.5rem;
/* 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);
--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-subtle: var(--grey-50);
&.dark {
--background-app: var(--constant-black);
--background-prominent: var(--dark-grey-40);
--background-standard: var(--dark-grey-25);
--background-subtle: var(--dark-grey-15);
--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-subtle: var(--dark-grey-60);
}
/* end arcade colors */
}
.inter-app-type {
color: rgba(0, 0, 0, 0.9);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
/* Dark mode styles */
.dark .inter-app-type {
color: rgba(255, 255, 255, 0.9);
}
}
@layer components {
.titlebar-drag-region {
-webkit-app-region: drag;
height: 32px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 50;
}
.no-drag {
-webkit-app-region: no-drag;
}
.ask-goose-type {
color: #000;
font-family: "Square Sans Mono";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: 1.6px;
}
.dark .ask-goose-type {
color: #9d9d9d;
}
.tool-form-button {
color: #7a7efb;
text-align: center;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: var(--Type-styles-Paragraph-leading-20, 22px);
letter-spacing: var(--Type-styles-Paragraph-tracking-20, 0px);
background: var(--fill-40, rgba(0, 0, 0, 0.05));
}
.dark .tool-form-button {
color: #7a7efb;
background: var(--fill-40, rgba(255, 255, 255, 0.1));
}
.tab-type {
color: rgba(91, 91, 91, 0.8);
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.dark .tab-type {
color: rgba(164, 164, 164, 0.8);
}
body {
color: black;
}
.dark body {
color: white;
}
.bg-inline-code {
border-radius: 4px;
color: rgba(255, 130, 130, 0.85);
font-family: "Square Sans Mono";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.bg-inline-code:before {
content: "";
}
pre:has(> code.bg-inline-code) {
padding: 1em;
}
*:has(> code.bg-inline-code) {
.bg-inline-code {
padding: 2px 4px;
}
}
.bg-inline-code:after {
content: "";
}
.dark .bg-inline-code {
color: rgba(248, 155, 89, 0.7);
}
}
ui/desktop/tailwind.config.ts
+126 -102
View File
@@ -1,161 +1,185 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ["class"],
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./index.html",
],
plugins: [
require("tailwindcss-animate"),
require('@tailwindcss/typography')
],
content: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
theme: {
extend: {
keyframes: {
shimmer: {
'0%': { backgroundPosition: '200% 0' },
'100%': { backgroundPosition: '-200% 0' }
}
"0%": { backgroundPosition: "200% 0" },
"100%": { backgroundPosition: "-200% 0" },
},
},
animation: {
'shimmer-pulse': 'shimmer 4s ease-in-out infinite',
"shimmer-pulse": "shimmer 4s ease-in-out infinite",
},
typography: {
xxs: {
css: {
fontSize: '10px'
}
fontSize: "10px",
},
},
xs: {
css: {
fontSize: '12px',
fontSize: "12px",
h1: {
fontSize: '1.5em'
fontSize: "1.5em",
},
h2: {
fontSize: '1.25em'
fontSize: "1.25em",
},
h3: {
fontSize: '1.125em'
fontSize: "1.125em",
},
h4: {
fontSize: '1em'
}
}
}
fontSize: "1em",
},
},
},
},
spacing: {
'8': '8px',
'10': '10px',
'16': '16px',
"8": "8px",
"10": "10px",
"16": "16px",
},
margin: {
'10': '10px',
'50': '50px'
"10": "10px",
"50": "50px",
},
backgroundImage: {
'prev-goose-gradient': 'linear-gradient(89deg, rgba(85, 95, 231, 0.04) 0.16%, rgba(85, 95, 231, 0.20) 99.77%)',
'dark-prev-goose-gradient': 'linear-gradient(89deg, rgb(147 149 151 / 4%) 0.16%, rgb(55 65 81 / 35%) 99.77%)',
'card-gradient': 'linear-gradient(359deg, rgba(255, 255, 255, 0.90) 9.96%, rgba(226, 245, 251, 0.90) 95.35%)',
'dark-card-gradient': 'linear-gradient(359deg, rgba(31, 41, 55, 0.90) 9.96%, rgba(17, 24, 39, 0.90) 95.35%)',
'window-gradient': 'linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(246, 247, 255, 0.55) 100%)',
'dark-window-gradient': 'linear-gradient(90deg, rgba(50, 50, 50, 0.55) 0%, rgba(89, 89, 89, 0.55) 100%)'
"prev-goose-gradient":
"linear-gradient(89deg, rgba(85, 95, 231, 0.04) 0.16%, rgba(85, 95, 231, 0.20) 99.77%)",
"dark-prev-goose-gradient":
"linear-gradient(89deg, rgb(147 149 151 / 4%) 0.16%, rgb(55 65 81 / 35%) 99.77%)",
"card-gradient":
"linear-gradient(359deg, rgba(255, 255, 255, 0.90) 9.96%, rgba(226, 245, 251, 0.90) 95.35%)",
"dark-card-gradient":
"linear-gradient(359deg, rgba(31, 41, 55, 0.90) 9.96%, rgba(17, 24, 39, 0.90) 95.35%)",
"window-gradient":
"linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(246, 247, 255, 0.55) 100%)",
"dark-window-gradient":
"linear-gradient(90deg, rgba(50, 50, 50, 0.55) 0%, rgba(89, 89, 89, 0.55) 100%)",
},
fontSize: {
14: '14px'
14: "14px",
},
colors: {
background: 'var(--background)',
foreground: 'var(--foreground)',
// start arcade colors
bgApp: "var(--background-app)",
bgSubtle: "var(--background-subtle)",
bgStandard: "var(--background-standard)",
bgProminent: "var(--background-prominent)",
'splash-pills': {
DEFAULT: 'rgba(255, 255, 255, 0.60)',
dark: 'rgba(31, 41, 55, 0.60)'
borderSubtle: "var(--border-subtle)",
borderStandard: "var(--border-standard)",
textProminent: "var(--text-prominent)",
textStandard: "var(--text-standard)",
textSubtle: "var(--text-subtle)",
textPlaceholder: "var(--text-placeholder)",
iconProminent: "var(--icon-prominent)",
iconStandard: "var(--icon-standard)",
iconSubtle: "var(--icon-subtle)",
// end arcade colors
background: "var(--background)",
foreground: "var(--foreground)",
"splash-pills": {
DEFAULT: "rgba(255, 255, 255, 0.60)",
dark: "rgba(31, 41, 55, 0.60)",
},
'splash-pills-text': {
DEFAULT: 'rgba(0, 0, 0, 0.60)',
dark: 'rgba(255, 255, 255, 0.60)'
"splash-pills-text": {
DEFAULT: "rgba(0, 0, 0, 0.60)",
dark: "rgba(255, 255, 255, 0.60)",
},
'prev-goose-text': {
DEFAULT: '#4E52C5',
dark: '#9CA3AF'
"prev-goose-text": {
DEFAULT: "#4E52C5",
dark: "#9CA3AF",
},
'inline-code': {
DEFAULT: 'rgba(255, 255, 255, 0.5)',
dark: 'rgba(57, 33, 0, 0.49)'
"inline-code": {
DEFAULT: "rgba(255, 255, 255, 0.5)",
dark: "rgba(57, 33, 0, 0.49)",
},
'more-menu': {
DEFAULT: 'rgba(255, 255, 255, 0.95)',
dark: 'rgba(31, 41, 55, 0.95)'
"more-menu": {
DEFAULT: "rgba(255, 255, 255, 0.95)",
dark: "rgba(31, 41, 55, 0.95)",
},
'bottom-menu':{
DEFAULT: 'rgba(0, 0, 0, 0.35)',
dark: 'rgba(255, 255, 255, 0.35)'
"bottom-menu": {
DEFAULT: "rgba(0, 0, 0, 0.35)",
dark: "rgba(255, 255, 255, 0.35)",
},
'bottom-menu-background': {
DEFAULT: 'rgba(255, 255, 255, 0.90)',
dark: 'rgba(31, 41, 55, 0.35)'
"bottom-menu-background": {
DEFAULT: "rgba(255, 255, 255, 0.90)",
dark: "rgba(31, 41, 55, 0.35)",
},
'tool-bold': {
DEFAULT: 'rgba(0, 0, 0, 0.85)',
dark: 'rgba(255, 255, 255, 0.65)'
"tool-bold": {
DEFAULT: "rgba(0, 0, 0, 0.85)",
dark: "rgba(255, 255, 255, 0.65)",
},
'tool': {
DEFAULT: 'rgba(0, 0, 0, 0.75)',
dark: 'rgba(255, 255, 255, 0.50)'
tool: {
DEFAULT: "rgba(0, 0, 0, 0.75)",
dark: "rgba(255, 255, 255, 0.50)",
},
'tool-dim': {
DEFAULT: 'rgba(0, 0, 0, 0.6)',
dark: 'rgba(255, 255, 255, 0.50)'
"tool-dim": {
DEFAULT: "rgba(0, 0, 0, 0.6)",
dark: "rgba(255, 255, 255, 0.50)",
},
'tool-result-green': {
DEFAULT: '#028E00',
dark: '#10B981'
"tool-result-green": {
DEFAULT: "#028E00",
dark: "#10B981",
},
'tool-card': {
DEFAULT: 'rgba(255, 255, 255, 0.80)',
dark: 'rgba(31, 41, 55, 0.80)'
"tool-card": {
DEFAULT: "rgba(255, 255, 255, 0.80)",
dark: "rgba(31, 41, 55, 0.80)",
},
'link-preview': {
DEFAULT: 'rgba(255, 255, 255, 0.80)',
dark: 'rgba(31, 41, 55, 0.80)'
"link-preview": {
DEFAULT: "rgba(255, 255, 255, 0.80)",
dark: "rgba(31, 41, 55, 0.80)",
},
'user-bubble': {
DEFAULT: 'rgba(85, 95, 231, 0.90)',
dark: 'rgba(129, 140, 248, 0.90)'
"user-bubble": {
DEFAULT: "rgba(85, 95, 231, 0.90)",
dark: "rgba(129, 140, 248, 0.90)",
},
'goose-bubble': {
DEFAULT: 'rgba(0, 0, 0, 0.12)',
dark: 'rgba(255, 255, 255, 0.12)',
"goose-bubble": {
DEFAULT: "rgba(0, 0, 0, 0.12)",
dark: "rgba(255, 255, 255, 0.12)",
},
'goose-bubble-text': {
DEFAULT: 'rgba(255, 255, 255, 1.00)',
dark: 'rgba(0, 0, 0, 1.00)',
"goose-bubble-text": {
DEFAULT: "rgba(255, 255, 255, 1.00)",
dark: "rgba(0, 0, 0, 1.00)",
},
'logo-primary': {
DEFAULT: '#000000',
dark: '#9d9d9d',
"logo-primary": {
DEFAULT: "#000000",
dark: "#9d9d9d",
},
"goose-text": {
DEFAULT: "#000000",
dark: "#9d9d9d",
},
"goose-text-light": {
DEFAULT: "#FFFFFF",
dark: "#2F2F2F",
},
'goose-text': {
DEFAULT: '#000000',
dark: '#9d9d9d',
},
'goose-text-light': {
DEFAULT: '#FFFFFF',
dark: '#2F2F2F',
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
}
}
}
}
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
// will enable cash sans along with style updates
// fontFamily: {
// sans: ["Cash Sans"],
// mono: ["Cash Sans Mono"],
// },
},
},
};