Refined token usage to remove redundant sizing and refactored tokens

apps/blog/src/app/global.css

@@ -1,7 +1,14 @@
 @import "tailwindcss";
-@import '@prisma-docs/eclipse/styles/globals.css';
-@import 'fumadocs-ui/css/shadcn.css';
-@import 'fumadocs-ui/css/preset.css';
-@import 'fumadocs-openapi/css/preset.css';
-@import '@prisma-docs/ui/styles';
+@import "@prisma-docs/eclipse/styles/globals.css";
+@import "fumadocs-ui/css/shadcn.css";
+@import "fumadocs-ui/css/preset.css";
+@import "fumadocs-openapi/css/preset.css";
+@import "@prisma-docs/ui/styles";
 
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: var(--font-sans-display);
+}

apps/docs/src/components/eclipse-showcase.tsx

@@ -197,7 +197,7 @@ export function EclipseShowcase() {
               Square (6px)
             </span>
           </div>
-          <div className="px-6 py-4 bg-background-orm rounded-high border border-stroke-orm">
+          <div className="px-6 py-4 bg-background-orm rounded-square-high border border-stroke-orm">
             <span className="text-sm font-medium text-foreground-neutral">
               High (12px)
             </span>
@@ -216,7 +216,7 @@ export function EclipseShowcase() {
           Semantic Patterns
         </h3>
 
-        <div className="p-padding-block-container bg-background-error rounded-high border border-stroke-error">
+        <div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
           <div className="flex items-start gap-3">
             <span className="text-foreground-error">⚠️</span>
             <div>
@@ -230,7 +230,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-success rounded-high border border-stroke-success">
+        <div className="p-6 bg-background-success rounded-square-high border border-stroke-success">
           <div className="flex items-start gap-3">
             <span className="text-foreground-success">✓</span>
             <div>
@@ -244,7 +244,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-warning rounded-high border border-stroke-warning">
+        <div className="p-6 bg-background-warning rounded-square-high border border-stroke-warning">
           <div className="flex items-start gap-3">
             <span className="text-foreground-warning">!</span>
             <div>
@@ -265,12 +265,12 @@ export function EclipseShowcase() {
           Gradients
         </h3>
         <div className="space-y-4">
-          <div className="h-24 bg-gradient-orm rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-orm rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-orm-reverse">
               ORM Gradient
             </span>
           </div>
-          <div className="h-24 bg-gradient-ppg rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-ppg rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-ppg-reverse">
               PPG Gradient
             </span>

apps/eclipse/content/design-system/atoms/input.mdx

@@ -441,7 +441,7 @@ The Input component uses design tokens and can be customized:
 - **Invalid text**: `text-foreground-error` when `aria-invalid` is true
 - **Placeholder**: `text-foreground-neutral-weak`
 - **Radius**: `rounded-square` (6px)
-- **Focus shadow**: `shadow-drop-low`
+- **Focus shadow**: `shadow-box-low`
 - **Transition**: Smooth color transitions
 
 Customize by passing `className` props:

apps/eclipse/content/design-system/index.mdx

@@ -192,16 +192,16 @@ Eclipse provides a comprehensive spacing system for margins and padding.
 ### Padding Utilities
 
 ```tsx
-<div className="p-padding-block-container">Container padding</div>
+<div className="p-6">Container padding</div>
 <div className="p-padding-inline-element-lg">Element padding</div>
 ```
 
 ## Border Radius
 
 ```tsx
-<div className="rounded-low">Low radius (3px)</div>
+<div className="rounded-square-low">Low radius (3px)</div>
 <div className="rounded-square">Square radius (6px)</div>
-<div className="rounded-high">High radius (12px)</div>
+<div className="rounded-square-high">High radius (12px)</div>
 <div className="rounded-circle">Circular</div>
 ```
 

apps/eclipse/src/app/global.css

@@ -21,3 +21,10 @@ header &[data-search-full] {
 #nd-page {
     @apply @container;
 }
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: var(--font-sans-display);
+}

apps/eclipse/src/components/eclipse-showcase.tsx

@@ -197,7 +197,7 @@ export function EclipseShowcase() {
               Square (6px)
             </span>
           </div>
-          <div className="px-6 py-4 bg-background-orm rounded-high border border-stroke-orm">
+          <div className="px-6 py-4 bg-background-orm rounded-square-high border border-stroke-orm">
             <span className="text-sm font-medium text-foreground-neutral">
               High (12px)
             </span>
@@ -216,7 +216,7 @@ export function EclipseShowcase() {
           Semantic Patterns
         </h3>
 
-        <div className="p-padding-block-container bg-background-error rounded-high border border-stroke-error">
+        <div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
           <div className="flex items-start gap-3">
             <span className="text-foreground-error">⚠️</span>
             <div>
@@ -230,7 +230,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-success rounded-high border border-stroke-success">
+        <div className="p-6 bg-background-success rounded-square-high border border-stroke-success">
           <div className="flex items-start gap-3">
             <span className="text-foreground-success">✓</span>
             <div>
@@ -244,7 +244,7 @@ export function EclipseShowcase() {
           </div>
         </div>
 
-        <div className="p-padding-block-container bg-background-warning rounded-high border border-stroke-warning">
+        <div className="p-6 bg-background-warning rounded-square-high border border-stroke-warning">
           <div className="flex items-start gap-3">
             <span className="text-foreground-warning">!</span>
             <div>
@@ -265,12 +265,12 @@ export function EclipseShowcase() {
           Gradients
         </h3>
         <div className="space-y-4">
-          <div className="h-24 bg-gradient-orm rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-orm rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-orm-reverse">
               ORM Gradient
             </span>
           </div>
-          <div className="h-24 bg-gradient-ppg rounded-high flex items-center justify-center">
+          <div className="h-24 bg-gradient-ppg rounded-square-high flex items-center justify-center">
             <span className="text-lg font-semibold text-foreground-ppg-reverse">
               PPG Gradient
             </span>

packages/eclipse/GETTING_STARTED.md

@@ -110,7 +110,7 @@ Use consistent spacing throughout your app:
 <div className="m-margin-md">Content with margin</div>
 
 // Padding
-<div className="p-padding-block-container">
+<div className="p-6">
   Container with padding
 </div>
 
@@ -143,9 +143,9 @@ Use consistent spacing throughout your app:
 ### Border Radius
 
 ```tsx
-<div className="rounded-low">Low radius (3px)</div>
+<div className="rounded-square-low">Low radius (3px)</div>
 <div className="rounded-square">Default radius (6px)</div>
-<div className="rounded-high">High radius (12px)</div>
+<div className="rounded-square-high">High radius (12px)</div>
 <div className="rounded-circle">Circular (999px)</div>
 ```
 
@@ -200,21 +200,21 @@ import { Button } from "@prisma-docs/eclipse";
 
 ```tsx
 // Error message
-<div className="p-padding-block-container bg-background-error rounded-high border border-stroke-error">
+<div className="p-6 bg-background-error rounded-square-high border border-stroke-error">
   <p className="text-foreground-error">
     An error occurred
   </p>
 </div>
 
 // Success message
-<div className="p-padding-block-container bg-background-success rounded-high border border-stroke-success">
+<div className="p-6 bg-background-success rounded-square-high border border-stroke-success">
   <p className="text-foreground-success">
     Operation successful!
   </p>
 </div>
 
 // Warning message
-<div className="p-padding-block-container bg-background-warning rounded-high border border-stroke-warning">
+<div className="p-6 bg-background-warning rounded-square-high border border-stroke-warning">
   <p className="text-foreground-warning">
     Please review this carefully
   </p>
@@ -224,11 +224,11 @@ import { Button } from "@prisma-docs/eclipse";
 ### Gradients
 
 ```tsx
-<div className="bg-gradient-orm text-foreground-orm-reverse p-8 rounded-high">
+<div className="bg-gradient-orm text-foreground-orm-reverse p-8 rounded-square-high">
   ORM Branded Section
 </div>
 
-<div className="bg-gradient-ppg text-foreground-ppg-reverse p-8 rounded-high">
+<div className="bg-gradient-ppg text-foreground-ppg-reverse p-8 rounded-square-high">
   PPG Branded Section
 </div>
 ```
@@ -243,17 +243,17 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@prisma-docs/eclipse/lib/cn";
 
 const cardVariants = cva(
-  "rounded-high border",
+  "rounded-square-high border",
   {
     variants: {
       variant: {
         default: "bg-background-default border-stroke-neutral",
         elevated: "bg-background-default border-stroke-neutral shadow-lg",
       },
       padding: {
-        sm: "p-padding-block-container-tight",
-        md: "p-padding-block-container",
-        lg: "p-padding-block-container-loose",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-12",
       },
     },
     defaultVariants: {
@@ -307,7 +307,7 @@ const fontFamily = tokens.typography.fontFamily.sans; // "Inter"
 ### Responsive Design
 
 ```tsx
-<div className="p-padding-block-container-tight md:p-padding-block-container lg:p-padding-block-container-loose">
+<div className="p-4 md:p-6 lg:p-12">
   Responsive padding
 </div>
 ```
@@ -334,8 +334,7 @@ const fontFamily = tokens.typography.fontFamily.sans; // "Inter"
 <div className="
   bg-background-default
   text-foreground-neutral
-  p-padding-block-container
-  rounded-high
+  rounded-square-high
   border border-stroke-neutral
   shadow-lg
 ">

packages/eclipse/TOKENS.md

@@ -151,65 +151,31 @@ Margin tokens for consistent spacing between elements:
 - `margin-xl` - 32px
 - `margin-4xl` - 48px
 
-### Padding
-
-#### Container Padding (Block)
-
-- `padding-block-container-tighter` - 12px
-- `padding-block-container-tight` - 16px
-- `padding-block-container` - 24px
-- `padding-block-container-loose` - 48px
-- `padding-block-container-looser` - 48px
-
-#### Container Padding (Inline)
-
-- `padding-inline-container-tighter` - 12px
-- `padding-inline-container-tight` - 16px
-- `padding-inline-container` - 24px
-- `padding-inline-container-loose` - 48px
-- `padding-inline-container-looser` - 48px
-
-#### Element Padding (Block)
-
-- `padding-block-element-lg` - 4px
-- `padding-block-element-xl` - 6px
-- `padding-block-element-2xl` - 8px
-- `padding-block-element-3xl` - 10px
-- `padding-block-element-4xl` - 12px
-
-#### Element Padding (Inline)
-
-- `padding-inline-element-lg` - 8px
-- `padding-inline-element-xl` - 10px
-- `padding-inline-element-2xl` - 12px
-- `padding-inline-element-3xl` - 16px
-- `padding-inline-element-4xl` - 16px
-
 ### Size
 
 Element sizing tokens:
 
-- `size-2xs` - 12px
-- `size-xs` - 16px
-- `size-sm` - 20px
-- `size-md` - 24px
-- `size-lg` - 28px
-- `size-xl` - 32px
-- `size-2xl` - 36px
-- `size-3xl` - 40px
-- `size-4xl` - 48px
-- `size-5xl` - 64px
-- `size-6xl` - 96px
+- `size-element-2xs` - 12px
+- `size-element-xs` - 16px
+- `size-element-sm` - 20px
+- `size-element-md` - 24px
+- `size-element-lg` - 28px
+- `size-element-xl` - 32px
+- `size-element-2xl` - 36px
+- `size-element-3xl` - 40px
+- `size-element-4xl` - 48px
+- `size-element-5xl` - 64px
+- `size-element-6xl` - 96px
 
 ---
 
 ## Typography Tokens
 
 ### Font Families
 
-- `font-sans-display` - Inter (for display text)
+- `font-sans-display` - Mona Sans (for display text)
 - `font-sans` - Inter (body text)
-- `font-mono` - JetBrains Mono (code)
+- `font-mono` - Mona Sans Mono (code)
 
 ### Font Sizes
 
@@ -239,17 +205,17 @@ All font sizes include corresponding line heights:
 ## Border Radius Tokens
 
 - `rounded-circle` - 999px (fully rounded)
-- `rounded-low` - 3px
+- `rounded-square-low` - 3px
 - `rounded-square` - 6px
-- `rounded-high` - 12px
+- `rounded-square-high` - 12px
 
 ---
 
 ## Blur Tokens
 
-- `blur-background-low` - 16px
-- `blur-background` - 24px
-- `blur-background-high` - 40px
+- `blur-surface-low` - 16px
+- `blur-surface` - 24px
+- `blur-surface-high` - 40px
 
 ---
 
@@ -280,11 +246,6 @@ All font sizes include corresponding line heights:
 // Margin
 <div className="m-margin-md">Spaced content</div>
 
-// Padding
-<div className="p-padding-block-container">
-  Container with padding
-</div>
-
 // Sizes
 <div className="w-size-xl h-size-xl">
   Square element
@@ -311,7 +272,7 @@ All font sizes include corresponding line heights:
 ### Using Border Radius
 
 ```tsx
-<div className="rounded-high p-4 bg-background-neutral">
+<div className="rounded-square-high p-4 bg-background-neutral">
   Card with rounded corners
 </div>