fix(web): add sr-only, prefers-color-scheme, and next/font canonical fonts
This commit is contained in:
saravanakumardb1
parent
0a4c13b1d6
commit
7a032be9e3
@ -1,61 +1,96 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* NoteLett design token aliases — map --nl-* to --ml-* from @bytelyst/design-tokens */
|
||||
:root,
|
||||
[data-theme="dark"] {
|
||||
--nl-bg-canvas: var(--ml-bg-canvas);
|
||||
--nl-bg-elevated: var(--ml-bg-elevated);
|
||||
--nl-surface-card: var(--ml-surface-card);
|
||||
--nl-surface-muted: var(--ml-surface-muted);
|
||||
--nl-border-default: var(--ml-border-default);
|
||||
--nl-border-strong: var(--ml-border-strong);
|
||||
--nl-text-primary: var(--ml-text-primary);
|
||||
--nl-text-secondary: var(--ml-text-secondary);
|
||||
--nl-text-tertiary: var(--ml-text-tertiary);
|
||||
--nl-accent-primary: var(--ml-accent-primary);
|
||||
--nl-accent-secondary: var(--ml-accent-secondary);
|
||||
--nl-success: var(--ml-success);
|
||||
--nl-warning: var(--ml-warning);
|
||||
--nl-danger: var(--ml-danger);
|
||||
--nl-focus-ring: var(--ml-focus-ring);
|
||||
--nl-overlay-scrim: var(--ml-overlay-scrim);
|
||||
--nl-font-display: var(--ml-font-display);
|
||||
--nl-font-body: var(--ml-font-body);
|
||||
--nl-font-mono: var(--ml-font-mono);
|
||||
--nl-fs-xs: var(--ml-fs-xs);
|
||||
--nl-fs-sm: var(--ml-fs-sm);
|
||||
--nl-fs-md: var(--ml-fs-md);
|
||||
--nl-fs-lg: var(--ml-fs-lg);
|
||||
--nl-fs-xl: var(--ml-fs-xl);
|
||||
--nl-fs-2xl: var(--ml-fs-2xl);
|
||||
--nl-fs-3xl: var(--ml-fs-3xl);
|
||||
--nl-space-0: var(--ml-space-0);
|
||||
--nl-space-1: var(--ml-space-1);
|
||||
--nl-space-2: var(--ml-space-2);
|
||||
--nl-space-3: var(--ml-space-3);
|
||||
--nl-space-4: var(--ml-space-4);
|
||||
--nl-space-5: var(--ml-space-5);
|
||||
--nl-space-6: var(--ml-space-6);
|
||||
--nl-space-7: var(--ml-space-7);
|
||||
--nl-space-8: var(--ml-space-8);
|
||||
--nl-space-10: var(--ml-space-10);
|
||||
--nl-space-12: var(--ml-space-12);
|
||||
--nl-space-16: var(--ml-space-16);
|
||||
--nl-radius-xs: var(--ml-radius-xs);
|
||||
--nl-radius-sm: var(--ml-radius-sm);
|
||||
--nl-radius-md: var(--ml-radius-md);
|
||||
--nl-radius-lg: var(--ml-radius-lg);
|
||||
--nl-radius-xl: var(--ml-radius-xl);
|
||||
--nl-radius-pill: var(--ml-radius-pill);
|
||||
--nl-elevation-sm: var(--ml-elevation-sm);
|
||||
--nl-elevation-md: var(--ml-elevation-md);
|
||||
--nl-elevation-lg: var(--ml-elevation-lg);
|
||||
--nl-motion-fast: var(--ml-motion-fast);
|
||||
--nl-motion-base: var(--ml-motion-base);
|
||||
--nl-motion-slow: var(--ml-motion-slow);
|
||||
--nl-easing-standard: var(--ml-easing-standard);
|
||||
/* ============================================================
|
||||
Design tokens — auto-generated from @bytelyst/design-tokens
|
||||
Source: packages/design-tokens/generated/notelett.css
|
||||
DO NOT EDIT — regenerate with: npx tsx packages/design-tokens/scripts/generate.ts
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--nl-bg-canvas: #06070A;
|
||||
--nl-bg-elevated: #0E1118;
|
||||
--nl-surface-card: #121725;
|
||||
--nl-surface-muted: #1A2335;
|
||||
--nl-border-default: rgba(255,255,255,0.12);
|
||||
--nl-border-strong: rgba(255,255,255,0.22);
|
||||
--nl-text-primary: #EFF4FF;
|
||||
--nl-text-secondary: #A5B1C7;
|
||||
--nl-text-tertiary: #6C7C98;
|
||||
--nl-accent-primary: #5A8CFF;
|
||||
--nl-accent-secondary: #2EE6D6;
|
||||
--nl-success: #34D399;
|
||||
--nl-warning: #F59E0B;
|
||||
--nl-danger: #FF6E6E;
|
||||
--nl-focus-ring: rgba(90,140,255,0.45);
|
||||
--nl-overlay-scrim: rgba(5,8,18,0.72);
|
||||
|
||||
/* notelett product colors */
|
||||
--nl-agent-action: #A66BFF;
|
||||
--nl-draft-note: #FFD166;
|
||||
--nl-linked-note: #2EE6D6;
|
||||
--nl-task-pending: #F59E0B;
|
||||
--nl-task-complete: #34D399;
|
||||
|
||||
--nl-font-display: "Space Grotesk", "SF Pro Display", sans-serif;
|
||||
--nl-font-body: "DM Sans", "SF Pro Text", sans-serif;
|
||||
--nl-font-mono: "IBM Plex Mono", "SF Mono", monospace;
|
||||
|
||||
--nl-fs-xs: 12px;
|
||||
--nl-fs-sm: 14px;
|
||||
--nl-fs-md: 16px;
|
||||
--nl-fs-lg: 18px;
|
||||
--nl-fs-xl: 22px;
|
||||
--nl-fs-2xl: 28px;
|
||||
--nl-fs-3xl: 36px;
|
||||
|
||||
--nl-space-0: 0;
|
||||
--nl-space-1: 4px;
|
||||
--nl-space-2: 8px;
|
||||
--nl-space-3: 12px;
|
||||
--nl-space-4: 16px;
|
||||
--nl-space-5: 20px;
|
||||
--nl-space-6: 24px;
|
||||
--nl-space-7: 28px;
|
||||
--nl-space-8: 32px;
|
||||
--nl-space-10: 40px;
|
||||
--nl-space-12: 48px;
|
||||
--nl-space-16: 64px;
|
||||
|
||||
--nl-radius-xs: 8px;
|
||||
--nl-radius-sm: 12px;
|
||||
--nl-radius-md: 16px;
|
||||
--nl-radius-lg: 20px;
|
||||
--nl-radius-xl: 24px;
|
||||
--nl-radius-pill: 999px;
|
||||
|
||||
--nl-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
|
||||
--nl-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
|
||||
--nl-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
|
||||
|
||||
--nl-motion-fast: 140ms;
|
||||
--nl-motion-base: 220ms;
|
||||
--nl-motion-slow: 320ms;
|
||||
--nl-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--nl-bg-canvas: #F6F8FC;
|
||||
--nl-bg-elevated: #EEF2FA;
|
||||
--nl-surface-card: #FFFFFF;
|
||||
--nl-surface-muted: #F3F5FA;
|
||||
--nl-border-default: rgba(14,19,32,0.12);
|
||||
--nl-border-strong: rgba(14,19,32,0.24);
|
||||
--nl-text-primary: #0E1320;
|
||||
--nl-text-secondary: #55637A;
|
||||
--nl-success: #13956A;
|
||||
--nl-warning: #B87504;
|
||||
--nl-danger: #D24242;
|
||||
--nl-focus-ring: rgba(90,140,255,0.35);
|
||||
--nl-overlay-scrim: rgba(10,13,23,0.5);
|
||||
}
|
||||
|
||||
/* === END design tokens === */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -166,3 +201,29 @@ button {
|
||||
*:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Screen-reader only utility */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* Respect OS dark/light preference */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root:not([data-theme="dark"]) {
|
||||
--nl-bg-canvas: #F8FAFC;
|
||||
--nl-bg-elevated: #FFFFFF;
|
||||
--nl-surface-card: #FFFFFF;
|
||||
--nl-surface-muted: #F1F5F9;
|
||||
--nl-text-primary: #0F172A;
|
||||
--nl-text-secondary: #475569;
|
||||
--nl-text-tertiary: #94A3B8;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
import type { Metadata, Viewport } from "next";
|
||||
import { Space_Grotesk, DM_Sans, IBM_Plex_Mono } from "next/font/google";
|
||||
import "@bytelyst/design-tokens/css";
|
||||
import "./globals.css";
|
||||
import { Providers } from "./providers";
|
||||
import { PRODUCT_NAME } from "@/lib/product-config";
|
||||
|
||||
const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-display" });
|
||||
const dmSans = DM_Sans({ subsets: ["latin"], variable: "--font-body" });
|
||||
const ibmPlexMono = IBM_Plex_Mono({ weight: ["400", "500"], subsets: ["latin"], variable: "--font-mono" });
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: PRODUCT_NAME,
|
||||
description:
|
||||
@ -23,7 +28,7 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" data-theme="dark">
|
||||
<body>
|
||||
<body className={`${spaceGrotesk.variable} ${dmSans.variable} ${ibmPlexMono.variable} antialiased`}>
|
||||
<Providers>{children}</Providers>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user