Refresh Tailwind light theme #2
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # Tailwind Theme (AudioSharp) | ||
|
|
||
| Reusable Tailwind v4 theme tokens and base styling. Includes shadcn-compatible CSS variables for easy parity with shadcn/lyra. | ||
|
|
||
| ## Usage (local repo) | ||
|
|
||
| In your Tailwind entry CSS: | ||
|
|
||
| ```css | ||
| @import "../packages/tailwind-theme/fonts.css"; | ||
| @import "tailwindcss"; | ||
| @import "../packages/tailwind-theme/theme.css"; | ||
| ``` | ||
|
|
||
| ## Usage (npm package) | ||
|
|
||
| 1) Publish this package or use `npm link`. | ||
| 2) Import after Tailwind: | ||
|
|
||
| ```css | ||
| @import "@audiosharp/tailwind-theme/fonts.css"; | ||
| @import "tailwindcss"; | ||
| @import "@audiosharp/tailwind-theme/theme.css"; | ||
| ``` | ||
|
|
||
| ## Notes | ||
|
|
||
| - Fonts are loaded from Google Fonts in `fonts.css` (Noto Sans). Skip that import if you already load fonts. | ||
| - shadcn tokens are defined on `:root` and `.dark`. | ||
| - `--radius` is set to `0px` to match the requested preset; override if you want rounded components. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap'); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "name": "@audiosharp/tailwind-theme", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "files": [ | ||
| "fonts.css", | ||
| "theme.css" | ||
| ], | ||
| "exports": { | ||
| "./fonts.css": "./fonts.css", | ||
| "./theme.css": "./theme.css" | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,162 @@ | ||||||
| @theme { | ||||||
| --font-sans: "Noto Sans", "Segoe UI", system-ui, sans-serif; | ||||||
| --font-display: "Noto Sans", "Segoe UI", system-ui, sans-serif; | ||||||
| --font-mono: "Noto Sans", "Segoe UI", system-ui, sans-serif; | ||||||
|
There was a problem hiding this comment. All three font families (sans, display, and mono) are set to "Noto Sans", which means there's no distinction between monospace and other fonts. This may be intentional for the design, but consider whether code snippets or technical content would benefit from an actual monospace font. The
Suggested change
|
||||||
|
|
||||||
| --color-ink-950: #111827; | ||||||
| --color-ink-900: #1f2937; | ||||||
| --color-ink-700: #4b5563; | ||||||
| --color-ink-500: #6b7280; | ||||||
|
|
||||||
| --color-brand-50: #fffbeb; | ||||||
| --color-brand-200: #fde68a; | ||||||
| --color-brand-300: #fcd34d; | ||||||
| --color-brand-400: #fbbf24; | ||||||
| --color-brand-500: #f59e0b; | ||||||
| --color-brand-600: #d97706; | ||||||
|
|
||||||
| --color-accent-200: #fde68a; | ||||||
| --color-accent-400: #f59e0b; | ||||||
|
|
||||||
| --color-surface: #ffffff; | ||||||
| --color-surface-soft: #f8fafc; | ||||||
|
|
||||||
| --shadow-hero: 0 30px 80px -60px rgba(17, 24, 39, 0.2); | ||||||
| --shadow-card: 0 18px 40px -25px rgba(17, 24, 39, 0.12); | ||||||
| --shadow-raise: 0 12px 22px -14px rgba(245, 158, 11, 0.35); | ||||||
| --shadow-sidenav: 0 20px 50px -35px rgba(17, 24, 39, 0.18); | ||||||
|
|
||||||
| --radius-hero: 0px; | ||||||
| --radius-card: 0px; | ||||||
| } | ||||||
|
|
||||||
| @layer base { | ||||||
| :root, | ||||||
| .dark { | ||||||
|
Comment on lines
+34
to
+35
There was a problem hiding this comment. The :root { |
||||||
| color-scheme: light; | ||||||
| --background: #f8fafc; | ||||||
| --foreground: var(--color-ink-950); | ||||||
| --card: var(--color-surface); | ||||||
| --card-foreground: var(--color-ink-950); | ||||||
| --popover: var(--color-surface); | ||||||
| --popover-foreground: var(--color-ink-950); | ||||||
| --primary: var(--color-brand-500); | ||||||
| --primary-foreground: #ffffff; | ||||||
| --secondary: var(--color-surface-soft); | ||||||
| --secondary-foreground: var(--color-ink-950); | ||||||
| --muted: var(--color-surface-soft); | ||||||
| --muted-foreground: var(--color-ink-700); | ||||||
| --accent: var(--color-accent-400); | ||||||
| --accent-foreground: #ffffff; | ||||||
| --destructive: #ef4444; | ||||||
| --destructive-foreground: #f8fafc; | ||||||
| --border: #e5e7eb; | ||||||
| --input: #e5e7eb; | ||||||
| --ring: var(--color-accent-400); | ||||||
| --radius: 0px; | ||||||
| --radius-sm: 0px; | ||||||
| --radius-md: 0px; | ||||||
| --radius-lg: 0px; | ||||||
| --radius-xl: 0px; | ||||||
| --radius-2xl: 0px; | ||||||
| --radius-3xl: 0px; | ||||||
| --font-sans: "Noto Sans", "Segoe UI", system-ui, sans-serif; | ||||||
| --font-display: "Noto Sans", "Segoe UI", system-ui, sans-serif; | ||||||
| --font-mono: "Noto Sans", "Segoe UI", system-ui, sans-serif; | ||||||
| } | ||||||
|
|
||||||
| html, body { | ||||||
| height: 100%; | ||||||
| } | ||||||
|
|
||||||
| body { | ||||||
| font-family: var(--font-sans); | ||||||
| color: var(--color-ink-950); | ||||||
| background: radial-gradient(circle at 12% 16%, rgba(245, 158, 11, 0.08), transparent 60%), | ||||||
| radial-gradient(circle at 86% 12%, rgba(251, 191, 36, 0.1), transparent 58%), | ||||||
| linear-gradient(180deg, #f9fafb 0%, #ffffff 55%, #f8fafc 100%); | ||||||
| margin: 0; | ||||||
| } | ||||||
|
|
||||||
| body::before, | ||||||
| body::after { | ||||||
| content: ""; | ||||||
| position: fixed; | ||||||
| z-index: 0; | ||||||
| border-radius: 999px; | ||||||
| pointer-events: none; | ||||||
| } | ||||||
|
|
||||||
| body::before { | ||||||
| width: 320px; | ||||||
| height: 320px; | ||||||
| top: -120px; | ||||||
| right: -140px; | ||||||
| background: radial-gradient(circle, rgba(245, 158, 11, 0.16), transparent 70%); | ||||||
| } | ||||||
|
|
||||||
| body::after { | ||||||
| width: 300px; | ||||||
| height: 300px; | ||||||
| bottom: -140px; | ||||||
| left: -140px; | ||||||
| background: radial-gradient(circle, rgba(251, 191, 36, 0.14), transparent 70%); | ||||||
| } | ||||||
|
|
||||||
| } | ||||||
|
|
||||||
| @layer utilities { | ||||||
| .rounded, | ||||||
| .rounded-sm, | ||||||
| .rounded-md, | ||||||
| .rounded-lg, | ||||||
| .rounded-xl, | ||||||
| .rounded-2xl, | ||||||
| .rounded-3xl, | ||||||
| .rounded-full, | ||||||
| .rounded-card, | ||||||
| .file\:rounded-full::file-selector-button { | ||||||
| border-radius: 0; | ||||||
|
Comment on lines
+109
to
+119
There was a problem hiding this comment. The markup uses rounded utility classes like |
||||||
| } | ||||||
|
Comment on lines
+109
to
+120
There was a problem hiding this comment. These overrides force all Tailwind A better approach for a "no-radius default" is to rely on the CSS variables for Please remove this entire block of overrides to allow Tailwind's |
||||||
|
|
||||||
| .animate-rise { | ||||||
| animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; | ||||||
| } | ||||||
|
|
||||||
| .animate-float { | ||||||
| animation: float 10s ease-in-out infinite; | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| @keyframes rise-in { | ||||||
| from { | ||||||
| opacity: 0; | ||||||
| transform: translateY(16px); | ||||||
| } | ||||||
|
|
||||||
| to { | ||||||
| opacity: 1; | ||||||
| transform: translateY(0); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| @keyframes float { | ||||||
| 0% { | ||||||
| transform: translateY(0); | ||||||
| } | ||||||
|
|
||||||
| 50% { | ||||||
| transform: translateY(-12px); | ||||||
| } | ||||||
|
|
||||||
| 100% { | ||||||
| transform: translateY(0); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| @media (prefers-reduced-motion: reduce) { | ||||||
| .animate-rise, | ||||||
| .animate-float { | ||||||
| animation: none; | ||||||
| } | ||||||
| } | ||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,20 @@ | ||
| @inherits LayoutComponentBase | ||
|
|
||
| <div class="relative z-10 min-h-screen"> | ||
| <NavMenu /> | ||
| <main> | ||
| <article class="mx-auto w-full max-w-6xl px-5 pb-16 pt-8 sm:px-8 lg:px-12"> | ||
| @Body | ||
| </article> | ||
| </main> | ||
| </div> | ||
|
|
||
| <div id="blazor-error-ui" | ||
| data-nosnippet | ||
| class="fixed bottom-4 left-4 right-4 z-50 hidden rounded-2xl border border-brand-300/40 bg-brand-500/10 px-4 py-3 text-sm font-semibold text-ink-900 shadow-lg sm:left-auto sm:right-6 sm:w-auto"> | ||
| <div class="flex items-center gap-3"> | ||
| <span>An unhandled error has occurred.</span> | ||
| <a href="." class="reload underline decoration-brand-300/70 underline-offset-4">Reload</a> | ||
| <span class="dismiss ml-auto cursor-pointer text-brand-300">🗙</span> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The package is marked as
private, which prevents it from being published to an npm registry. TheREADME.mdfile mentions publishing as a usage option. If this package is intended to be published,"private": trueshould be removed or set tofalse.