diff --git a/ui/desktop/components.json b/ui/desktop/components.json index fc152dcad8..3c147bdda3 100644 --- a/ui/desktop/components.json +++ b/ui/desktop/components.json @@ -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" -} \ No newline at end of file +} diff --git a/ui/desktop/index.html b/ui/desktop/index.html index fe4abad7f9..353f3b0e65 100644 --- a/ui/desktop/index.html +++ b/ui/desktop/index.html @@ -3,25 +3,28 @@ Goose - - - - + + + +
- \ No newline at end of file + diff --git a/ui/desktop/src/index.css b/ui/desktop/src/index.css deleted file mode 100644 index 37b097d6e7..0000000000 --- a/ui/desktop/src/index.css +++ /dev/null @@ -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); - } -} \ No newline at end of file diff --git a/ui/desktop/src/renderer.js b/ui/desktop/src/renderer.js index 22f238be8a..d5248d94b6 100644 --- a/ui/desktop/src/renderer.js +++ b/ui/desktop/src/renderer.js @@ -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' +); diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css new file mode 100644 index 0000000000..873ddd095a --- /dev/null +++ b/ui/desktop/src/styles/main.css @@ -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); + } +} diff --git a/ui/desktop/tailwind.config.ts b/ui/desktop/tailwind.config.ts index 4410ddbd02..9baacf498f 100644 --- a/ui/desktop/tailwind.config.ts +++ b/ui/desktop/tailwind.config.ts @@ -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"], + // }, + }, + }, +};