mirrors/raycast-linux
1
0
Fork 0
mirror of https://github.com/ByteAtATime/raycast-linux.git synced 2025-08-31 11:17:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: tweak theming

Browse source 
This commit does a few things related to theming. First of all, it removes the light theme (unimplemented currently). Second, it adds the Inter font, and changes the default font to Inter with a wide tracking.
This commit is contained in:
ByteAtATime 2025-07-13 09:14:32 -07:00
parent 30d04986e3
commit 69ae2ba639
No known key found for this signature in database
4 changed files with 38 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -17,6 +17,7 @@
},
"license": "MIT",
"dependencies": {
"@fontsource-variable/inter": "^5.2.6",
"@raycast-linux/protocol": "workspace:*",
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-clipboard-manager": "~2.2.2",

8
pnpm-lock.yaml generated
View file

@ -8,6 +8,9 @@ importers:
.:
dependencies:
'@fontsource-variable/inter':
specifier: ^5.2.6
version: 5.2.6
'@raycast-linux/protocol':
specifier: workspace:*
version: link:packages/protocol
@ -516,6 +519,9 @@ packages:
'@floating-ui/utils@0.2.9':
resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
'@fontsource-variable/inter@5.2.6':
resolution: {integrity: sha512-jks/bficUPQ9nn7GvXvHtlQIPudW7Wx8CrlZoY8bhxgeobNxlQan8DclUJuYF2loYRrGpfrhCIZZspXYysiVGg==}
'@humanfs/core@0.19.1':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'}
@ -3524,6 +3530,8 @@ snapshots:
'@floating-ui/utils@0.2.9': {}
'@fontsource-variable/inter@5.2.6': {}
'@humanfs/core@0.19.1': {}
'@humanfs/node@0.16.6':

91
src/app.css
View file

@ -3,75 +3,39 @@
@import 'tw-animate-css';
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.129 0.042 264.695);
--card: oklch(1 0 0);
--card-foreground: oklch(0.129 0.042 264.695);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896);
--secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417);
--accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.929 0.013 255.508);
--input: oklch(0.929 0.013 255.508);
--ring: oklch(0.704 0.04 256.788);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.984 0.003 247.858);
--sidebar-foreground: oklch(0.129 0.042 264.695);
--sidebar-primary: oklch(0.208 0.042 265.755);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.968 0.007 247.896);
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
--sidebar-border: oklch(0.929 0.013 255.508);
--sidebar-ring: oklch(0.704 0.04 256.788);
}
.dark {
--background: oklch(0.129 0.042 264.695);
--foreground: oklch(0.984 0.003 247.858);
--card: oklch(0.208 0.042 265.755);
--card-foreground: oklch(0.984 0.003 247.858);
--popover: oklch(0.208 0.042 265.755);
--popover-foreground: oklch(0.984 0.003 247.858);
--primary: oklch(0.929 0.013 255.508);
--primary-foreground: oklch(0.208 0.042 265.755);
--secondary: oklch(0.279 0.041 260.031);
--secondary-foreground: oklch(0.984 0.003 247.858);
--muted: oklch(0.279 0.041 260.031);
--muted-foreground: oklch(0.704 0.04 256.788);
--accent: oklch(0.279 0.041 260.031);
--accent-foreground: oklch(0.984 0.003 247.858);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.551 0.027 264.364);
--background: #1b1b1b;
--foreground: #f2f2f2;
--card: #222222;
--card-foreground: #f2f2f2;
--popover: #2c2c2c;
--popover-foreground: #f2f2f2;
--primary: #323232;
--primary-foreground: #dfdfdf;
--secondary: #272727;
--secondary-foreground: #f2f2f2;
--muted: #323232;
--muted-foreground: #a5a5a5;
--accent: #323232;
--accent-foreground: #f2f2f2;
--destructive: #f84e4e;
--border: #303030;
--input: transparent;
--ring: #ffffff;
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.208 0.042 265.755);
--sidebar-foreground: oklch(0.984 0.003 247.858);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
--sidebar-accent: oklch(0.279 0.041 260.031);
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.551 0.027 264.364);
--sidebar: #222222;
--sidebar-foreground: #f2f2f2;
--sidebar-primary: #323232;
--sidebar-primary-foreground: #f2f2f2;
--sidebar-accent: #272727;
--sidebar-accent-foreground: #f2f2f2;
--sidebar-border: #303030;
--sidebar-ring: #ffffff;
}
@theme inline {
@ -112,11 +76,12 @@
--color-sidebar-ring: var(--sidebar-ring);
--shadow-glow: 0 0 6px rgba(255, 255, 255, 1), 0 0 16px rgba(255, 255, 255, 1);
--font-sans: 'Inter Variable', sans-serif;
}
@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border outline-ring/50 tracking-wide;
}
body {
@apply bg-background text-foreground;

1
src/routes/+layout.svelte
View file

@ -1,4 +1,5 @@
<script lang="ts">
import '@fontsource-variable/inter';
import '../app.css';
import { ModeWatcher } from 'mode-watcher';