@tale-ui/core 1.1.4 → 1.1.6

package/README.md

@@ -1,8 +1,10 @@
-# Design System
+# @tale-ui/core
 
 [![Publish design system](https://github.com/Tale-UI/core/actions/workflows/publish.yml/badge.svg)](https://github.com/Tale-UI/core/actions/workflows/publish.yml)
 
-A modular, token-based CSS design system with fluid responsive scaling, comprehensive color theming, and dark mode support. Framework-agnostic — works with any stack.
+The foundational CSS layer of the Tale UI Design System — design tokens, layout utilities, and theming primitives. Framework-agnostic, no build tools required.
+
+> **Scope:** This package provides the *foundations* — tokens, layout, utilities, and theming. It does **not** include UI components (buttons, modals, forms, etc.). Component libraries are separate packages that depend on this one.
 
 ## Features
 
@@ -37,7 +39,7 @@ npm install @tale-ui/core
 <!-- Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet" />
 
 <!-- Design System -->
 <link rel="stylesheet" href="node_modules/@tale-ui/core/dist/style.css" />

package/dist/style.css

@@ -1,4 +1,4 @@
-/* @tale-ui/core — Built 2026-02-25 */
+/* @tale-ui/core — Built 2026-02-26 */
 /* Source: packages/css/src/index.css */
 
 /* ============================================
@@ -17,6 +17,26 @@ html {
    tokens/_spacing.css
    ============================================ */
 :root {
+    --space-4xs: 0.52rem;
+    --space-3xs: 0.70rem;
+    --space-2xs: 0.99rem;
+    --space-xs: 1.40rem;
+    --space-s: 1.98rem;
+    --space-m: 2.80rem;
+    --space-l: 3.96rem;
+    --space-xl: 5.60rem;
+    --space-2xl: 7.92rem;
+    --space-3xl: 11.19rem;
+    --space-4xl: 15.83rem;
+    /* Section Spacing (larger scale for vertical rhythm between page sections) */
+    --section-space-xs: 3.96rem;
+    --section-space-s: 7.92rem;
+    --section-space-m: 11.19rem;
+    --section-space-l: 15.83rem;
+    --section-space-xl: 22.37rem;
+}
+
+.responsive {
     --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
     --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
     --space-2xs: clamp(0.82rem, calc(0.15vw + 0.75rem), 0.99rem);
@@ -28,7 +48,6 @@ html {
     --space-2xl: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
     --space-3xl: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
     --space-4xl: clamp(4.88rem, calc(9.77vw + 0.19rem), 15.83rem);
-    /* Section Spacing (larger scale for vertical rhythm between page sections) */
     --section-space-xs: clamp(2rem, calc(1.75vw + 1.16rem), 3.96rem);
     --section-space-s: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
     --section-space-m: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
@@ -40,23 +59,24 @@ html {
    tokens/_typography.css
    ============================================ */
 :root {
-    --text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
-    --text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
-    --text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
-    --text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
-    --text-xl: clamp(1.59rem, calc(0.63vw + 1.29rem), 2.3rem);
-    --text-2xl: clamp(1.7rem, calc(0.45vw + 1.48rem), 2.2rem);
-    --text-3xl: clamp(1.81rem, calc(0.75vw + 1.45rem), 2.65rem);
-    --text-4xl: clamp(1.94rem, calc(1.13vw + 1.4rem), 3.2rem);
-    --text-5xl: clamp(2.07rem, calc(1.55vw + 1.33rem), 3.8rem);
-    --text-6xl: clamp(2.2rem, calc(2.14vw + 1.17rem), 4.6rem);
-    --text-7xl: clamp(2.35rem, calc(2.81vw + 1.0rem), 5.5rem);
-    --text-8xl: clamp(2.51rem, calc(3.65vw + 0.76rem), 6.6rem);
+    --text-xs: 1.23rem;
+    --text-s: 1.33rem;
+    --text-m: 1.60rem;
+    --text-l: 1.92rem;
+    --text-xl: 2.19rem;
+    --text-2xl: 2.46rem;
+    --text-3xl: 2.73rem;
+    --text-4xl: 3.0rem;
+    --text-5xl: 3.4rem;
+    --text-6xl: 3.8rem;
+    --text-7xl: 4.1rem;
+    --text-8xl: 4.5rem;
     --display-color: var(--neutral-90);
     --text-color: var(--neutral-90);
     --mono-color: var(--neutral-90);
-    --display-font: "Geist", sans-serif;
-    --body-font: "Geist", sans-serif;
+    --display-font: "Inter", sans-serif;
+    --body-font: "Inter", sans-serif;
+    --expressive-font: "Playfair Display", serif;
     --mono-font: "Roboto Mono", monospace;
     --display-font-family: var(--display-font);
     --heading-font-family: var(--display-font);
@@ -64,6 +84,7 @@ html {
     --label-font-family: var(--body-font);
     --text-font-family: var(--body-font);
     --mono-font-family: var(--mono-font);
+    --expressive-font-family: var(--expressive-font);
     --display-l-font-size: var(--text-7xl);
     --display-m-font-size: var(--text-6xl);
     --display-s-font-size: var(--text-5xl);
@@ -127,6 +148,21 @@ html {
     --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
 }
 
+.responsive {
+    --text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
+    --text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
+    --text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
+    --text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
+    --text-xl: clamp(1.59rem, calc(0.64vw + 1.17rem), 2.19rem);
+    --text-2xl: clamp(1.70rem, calc(0.89vw + 1.04rem), 2.46rem);
+    --text-3xl: clamp(1.81rem, calc(1.15vw + 0.89rem), 2.73rem);
+    --text-4xl: clamp(2.43rem, calc(1.40vw + 0.76rem), 3.0rem);
+    --text-5xl: clamp(2.59rem, calc(2.05vw + 0.12rem), 3.4rem);
+    --text-6xl: clamp(2.75rem, calc(2.70vw - 0.52rem), 3.8rem);
+    --text-7xl: clamp(2.94rem, calc(3.35vw - 1.26rem), 4.1rem);
+    --text-8xl: clamp(3.14rem, calc(4.00vw - 1.90rem), 4.5rem);
+}
+
 /* ============================================
    tokens/_colors.css
    ============================================ */
@@ -784,16 +820,19 @@ body {
     line-height: var(--mono-line-height);
     letter-spacing: var(--mono-letter-spacing);
 }
-.bricks-is-frontend :where(h1, h2, h3, h4, h5, h6) {
+.text--expressive {
+    font-family: var(--expressive-font-family);
+}
+:where(h1, h2, h3, h4, h5, h6) {
     color: var(--display-color);
 }
-.bricks-is-frontend :where(p, span) {
+:where(p, span) {
     color: var(--text-color);
 }
-.bricks-is-frontend :where(pre) {
+:where(pre) {
     color: var(--mono-color);
 }
-body.bricks-is-frontend {
+body{
     color: var(--text-color);
 }
 
@@ -877,16 +916,6 @@ body.bricks-is-frontend {
 /* ============================================
    foundations/_base-elements.css
    ============================================ */
-body.bricks-is-frontend :focus {
-    outline: none;
-    box-shadow: none;
-}
-body.bricks-is-frontend :focus-visible {
-    outline-width: 1px;
-    outline-style: dotted;
-    outline-offset: 1px;
-    outline-color: var(--neutral-80);
-}
 :where(p) {
     margin: 0 0 calc(var(--text-line-height) * 1em);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tale-ui/core",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Modular token-based CSS design system",
   "main": "src/index.css",
   "style": "dist/style.css",

package/src/foundations/_base-elements.css

@@ -1,13 +1,3 @@
-body.bricks-is-frontend :focus {
-    outline: none;
-    box-shadow: none;
-}
-body.bricks-is-frontend :focus-visible {
-    outline-width: 1px;
-    outline-style: dotted;
-    outline-offset: 1px;
-    outline-color: var(--neutral-80);
-}
 :where(p) {
     margin: 0 0 calc(var(--text-line-height) * 1em);
 }

package/src/foundations/_typography.css

@@ -174,15 +174,18 @@ body {
     line-height: var(--mono-line-height);
     letter-spacing: var(--mono-letter-spacing);
 }
-.bricks-is-frontend :where(h1, h2, h3, h4, h5, h6) {
+.text--expressive {
+    font-family: var(--expressive-font-family);
+}
+:where(h1, h2, h3, h4, h5, h6) {
     color: var(--display-color);
 }
-.bricks-is-frontend :where(p, span) {
+:where(p, span) {
     color: var(--text-color);
 }
-.bricks-is-frontend :where(pre) {
+:where(pre) {
     color: var(--mono-color);
 }
-body.bricks-is-frontend {
+body{
     color: var(--text-color);
 }

package/src/index.css

@@ -1,7 +1,10 @@
 /* ==========================================================================
-   Design System — Main Entry Point
-   Version: 1.0.0
+   Fonts — Google Fonts must be imported before all other rules
+   ========================================================================== */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
 
+/* ==========================================================================
+   Design System — Main Entry Point
    Import order matters: tokens → foundations → layout → utilities → themes
    ========================================================================== */
 

package/src/tokens/_spacing.css

@@ -1,4 +1,24 @@
 :root {
+    --space-4xs: 0.52rem;
+    --space-3xs: 0.70rem;
+    --space-2xs: 0.99rem;
+    --space-xs: 1.40rem;
+    --space-s: 1.98rem;
+    --space-m: 2.80rem;
+    --space-l: 3.96rem;
+    --space-xl: 5.60rem;
+    --space-2xl: 7.92rem;
+    --space-3xl: 11.19rem;
+    --space-4xl: 15.83rem;
+    /* Section Spacing (larger scale for vertical rhythm between page sections) */
+    --section-space-xs: 3.96rem;
+    --section-space-s: 7.92rem;
+    --section-space-m: 11.19rem;
+    --section-space-l: 15.83rem;
+    --section-space-xl: 22.37rem;
+}
+
+.responsive {
     --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.54rem), 0.49rem);
     --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
     --space-2xs: clamp(0.82rem, calc(0.15vw + 0.75rem), 0.99rem);
@@ -10,7 +30,6 @@
     --space-2xl: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
     --space-3xl: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);
     --space-4xl: clamp(4.88rem, calc(9.77vw + 0.19rem), 15.83rem);
-    /* Section Spacing (larger scale for vertical rhythm between page sections) */
     --section-space-xs: clamp(2rem, calc(1.75vw + 1.16rem), 3.96rem);
     --section-space-s: clamp(3.13rem, calc(4.28vw + 1.07rem), 7.92rem);
     --section-space-m: clamp(3.91rem, calc(6.51vw + 0.78rem), 11.19rem);

package/src/tokens/_typography.css

@@ -1,21 +1,22 @@
 :root {
-    --text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
-    --text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
-    --text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
-    --text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
-    --text-xl: clamp(1.59rem, calc(0.63vw + 1.29rem), 2.3rem);
-    --text-2xl: clamp(1.7rem, calc(0.45vw + 1.48rem), 2.2rem);
-    --text-3xl: clamp(1.81rem, calc(0.75vw + 1.45rem), 2.65rem);
-    --text-4xl: clamp(1.94rem, calc(1.13vw + 1.4rem), 3.2rem);
-    --text-5xl: clamp(2.07rem, calc(1.55vw + 1.33rem), 3.8rem);
-    --text-6xl: clamp(2.2rem, calc(2.14vw + 1.17rem), 4.6rem);
-    --text-7xl: clamp(2.35rem, calc(2.81vw + 1.0rem), 5.5rem);
-    --text-8xl: clamp(2.51rem, calc(3.65vw + 0.76rem), 6.6rem);
+    --text-xs: 1.23rem;
+    --text-s: 1.33rem;
+    --text-m: 1.60rem;
+    --text-l: 1.92rem;
+    --text-xl: 2.19rem;
+    --text-2xl: 2.46rem;
+    --text-3xl: 2.73rem;
+    --text-4xl: 3.0rem;
+    --text-5xl: 3.4rem;
+    --text-6xl: 3.8rem;
+    --text-7xl: 4.1rem;
+    --text-8xl: 4.5rem;
     --display-color: var(--neutral-90);
     --text-color: var(--neutral-90);
     --mono-color: var(--neutral-90);
-    --display-font: "Geist", sans-serif;
-    --body-font: "Geist", sans-serif;
+    --display-font: "Inter", sans-serif;
+    --body-font: "Inter", sans-serif;
+    --expressive-font: "Playfair Display", serif;
     --mono-font: "Roboto Mono", monospace;
     --display-font-family: var(--display-font);
     --heading-font-family: var(--display-font);
@@ -23,6 +24,7 @@
     --label-font-family: var(--body-font);
     --text-font-family: var(--body-font);
     --mono-font-family: var(--mono-font);
+    --expressive-font-family: var(--expressive-font);
     --display-l-font-size: var(--text-7xl);
     --display-m-font-size: var(--text-6xl);
     --display-s-font-size: var(--text-5xl);
@@ -85,3 +87,18 @@
     --grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
     --grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--max-screen-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
 }
+
+.responsive {
+    --text-xs: clamp(1.23rem, calc(-0.11vw + 1.28rem), 1.11rem);
+    --text-s: clamp(1.31rem, calc(0.02vw + 1.3rem), 1.33rem);
+    --text-m: clamp(1.4rem, calc(0.18vw + 1.31rem), 1.6rem);
+    --text-l: clamp(1.49rem, calc(0.38vw + 1.31rem), 1.92rem);
+    --text-xl: clamp(1.59rem, calc(0.64vw + 1.17rem), 2.19rem);
+    --text-2xl: clamp(1.70rem, calc(0.89vw + 1.04rem), 2.46rem);
+    --text-3xl: clamp(1.81rem, calc(1.15vw + 0.89rem), 2.73rem);
+    --text-4xl: clamp(2.43rem, calc(1.40vw + 0.76rem), 3.0rem);
+    --text-5xl: clamp(2.59rem, calc(2.05vw + 0.12rem), 3.4rem);
+    --text-6xl: clamp(2.75rem, calc(2.70vw - 0.52rem), 3.8rem);
+    --text-7xl: clamp(2.94rem, calc(3.35vw - 1.26rem), 4.1rem);
+    --text-8xl: clamp(3.14rem, calc(4.00vw - 1.90rem), 4.5rem);
+}