DEV Community

Cüneyt Çakar
Cüneyt Çakar

Posted on

@spexop/tokens v0.2.1: Updated Breakpoints for Modern Displays

#ui #design #frontend #css

We've updated our breakpoint system to better align with modern device resolutions.

What Changed

In v0.2.1, we've updated the larger breakpoints:

  • Lg: 1024px → 1280px
  • Xl: 1280px → 1920px
  • 2xl: 1536px → 2560px

Why?

The web has evolved. In 2025:

  • Most laptops have 1920×1080 displays (Full HD)
  • Tablets like iPad Pro have 1366px width in landscape
  • 2K/QHD monitors (2560×1440) are common
  • The old 1024px "desktop" breakpoint is outdated

Better Responsive Ranges

Tablets (Md): Now 768px-1280px (was 768px-1024px)

  • Covers iPad, Surface, and large Android tablets properly

Desktops (Lg): Now 1280px-1920px (was 1024px-1280px)

  • Standard laptop and desktop range

Large Desktops (Xl): Now 1920px-2560px (was 1280px-1536px)

  • Full HD and QHD displays

Migration

If you're using token variables (recommended):

import { sBreakpointLg } from '@spexop/tokens';
// Automatically gets new value: "1280px"
Enter fullscreen mode Exit fullscreen mode

Simply update the package and your responsive design improves automatically!

npm install @spexop/tokens@0.2.1
Enter fullscreen mode Exit fullscreen mode

No breaking changes for best-practice usage. 🎉

📦 Package Contents

Distributed Files 

@spexop/tokens@0.2.1
├── dist/
│   ├── index.js          (42 KB) - ES Module
│   ├── index.cjs         (61 KB) - CommonJS
│   ├── index.d.ts        (60 KB) - TypeScript types (ESM)
│   ├── index.d.cts       (60 KB) - TypeScript types (CJS)
│   ├── tokens.css        (17 KB) - CSS variables
│   └── tokens.json       (17 KB) - JSON export
├── README.md             (9.9 KB)
├── CHANGELOG.md          (6.9 KB)
├── TOKENS-REFERENCE.md   (13 KB)
├── tokens-demo.html      (43 KB)
└── tokens-quick-reference.txt (7.4 KB)
Enter fullscreen mode Exit fullscreen mode

Total Package Size: ~250 KB

⚠️ Migration Guide for Users

If You Used Token Variables (Recommended) ✅

No changes needed! Just update the package:

npm install @spexop/tokens@0.2.1
Enter fullscreen mode Exit fullscreen mode 
import { sBreakpointLg } from '@spexop/tokens';
// Automatically uses new value: "1280px"
Enter fullscreen mode Exit fullscreen mode

If You Hardcoded Values ⚠️

You'll need to update your code:

// ❌ Before (hardcoded)
const breakpoint = '1024px';

// ✅ After (use token)
import { sBreakpointLg } from '@spexop/tokens';
const breakpoint = sBreakpointLg; // "1280px"
Enter fullscreen mode Exit fullscreen mode

CSS Media Queries

Before:

@media (min-width: 1024px) {
  /* Desktop styles */
}
Enter fullscreen mode Exit fullscreen mode

After:

@import '@spexop/tokens/tokens.css';

@media var(--s-breakpoint-lg) {
  /* Or better yet, use: */
}

@media (min-width: 1280px) {
  /* Updated desktop styles */
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)