738811dbe7
Text sizes now follow a --font-scale variable that is 1 on wider screens and 8/7 below 768px, so the 14px base text reads at 16px on phones (Safari stops zooming into fields at that size) and every other size grows by the same ratio. One-off pixel sizes in the shell move onto the shared text tokens so they scale too. The stage subtitle now truncates inside the screen instead of spilling past both edges. Claude-Session: https://claude.ai/code/session_01PFEDgbyJm12ExL3Kn4Dk8B Co-authored-by: Claude <noreply@anthropic.com>
137 lines
4.5 KiB
CSS
137 lines
4.5 KiB
CSS
@import "tw-animate-css";
|
|
@import "./shadcn.css";
|
|
@import "@rakazo/ui-tokens/css";
|
|
|
|
@source "./**/*.{ts,tsx}";
|
|
|
|
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-chat-user: var(--chat-user);
|
|
--color-chat-user-foreground: var(--chat-user-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-link: var(--link);
|
|
--color-success: var(--success);
|
|
--color-warning: var(--warning);
|
|
--color-overlay: var(--overlay);
|
|
--color-scrollbar: var(--scrollbar);
|
|
--color-scrollbar-hover: var(--scrollbar-hover);
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--radius-2xl: calc(var(--radius) + 8px);
|
|
|
|
/* Typography scale. Every text size follows --font-scale, which grows on phones. */
|
|
--text-xs: calc(0.75rem * var(--font-scale));
|
|
--text-sm: calc(0.875rem * var(--font-scale));
|
|
--text-base: calc(1rem * var(--font-scale));
|
|
--text-lg: calc(1.125rem * var(--font-scale));
|
|
--text-xl: calc(1.25rem * var(--font-scale));
|
|
--text-2xl: calc(1.5rem * var(--font-scale));
|
|
--text-ui-caption: calc(var(--font-size-caption) * var(--font-scale));
|
|
--text-ui-caption--line-height: var(--line-height-tight);
|
|
--text-ui-label: calc(var(--font-size-label) * var(--font-scale));
|
|
--text-ui-label--line-height: var(--line-height-tight);
|
|
--text-ui-body-sm: calc(var(--font-size-body-sm) * var(--font-scale));
|
|
--text-ui-body-sm--line-height: var(--line-height-body);
|
|
--text-ui-body: calc(var(--font-size-body) * var(--font-scale));
|
|
--text-ui-body--line-height: var(--line-height-body);
|
|
--text-ui-reading: calc(var(--font-size-reading) * var(--font-scale));
|
|
--text-ui-reading--line-height: var(--line-height-reading);
|
|
--text-ui-title-sm: calc(var(--font-size-title-sm) * var(--font-scale));
|
|
--text-ui-title-sm--line-height: var(--line-height-tight);
|
|
--text-ui-title: calc(var(--font-size-title) * var(--font-scale));
|
|
--text-ui-title--line-height: var(--line-height-tight);
|
|
|
|
/* Control + icon sizes (also drive h-*, size-*, gap-*, p-* utilities) */
|
|
--spacing-control-xs: var(--control-height-xs);
|
|
--spacing-control-sm: var(--control-height-sm);
|
|
--spacing-control-md: var(--control-height-md);
|
|
--spacing-control-lg: var(--control-height-lg);
|
|
--spacing-icon-sm: var(--icon-sm);
|
|
--spacing-icon-md: var(--icon-md);
|
|
--spacing-icon-lg: var(--icon-lg);
|
|
--spacing-rk-shell: var(--spacing-shell);
|
|
--spacing-rk-sidebar-x: var(--spacing-sidebar-row-x);
|
|
--spacing-rk-sidebar-y: var(--spacing-sidebar-row-y);
|
|
}
|
|
|
|
/* Phones read the 14px base size at 16px (Safari also stops zooming into fields at 16px);
|
|
all other sizes grow by the same ratio. */
|
|
:root {
|
|
--font-scale: 1;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
:root {
|
|
--font-scale: 1.142857;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
}
|
|
|
|
@keyframes rakazo-avatar-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.rakazo-bot-avatar-ring {
|
|
animation: rakazo-avatar-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
|
opacity: 0;
|
|
transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-bot-avatar {
|
|
transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-ring {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.rakazo-bot-avatar-ring {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
|
|
.rakazo-bot-avatar {
|
|
transition: none;
|
|
}
|
|
}
|