Skip to content

feat:Optimizations #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Nov 16, 2025
Merged

feat:Optimizations #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8957653
feat:Optimizations
planetabhi Nov 16, 2025
b211965
feat:Optimizations
planetabhi Nov 16, 2025
64fc97d
feat:Optimizations
planetabhi Nov 16, 2025
83ddd60
feat:Optimizations
planetabhi Nov 16, 2025
7151fc5
feat:Optimizations
planetabhi Nov 16, 2025
f6b22e5
feat:Optimizations
planetabhi Nov 16, 2025
04b20b5
feat:Optimizations
planetabhi Nov 16, 2025
cd21bdb
feat:Optimizations
planetabhi Nov 16, 2025
5fc0f15
feat:Optimizations
planetabhi Nov 16, 2025
8e01183
feat:Optimizations
planetabhi Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 31 additions & 113 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Dark warm | `dark--warm`
Dark cold | `dark--cold`


#### Usage guide
#### Utility classes, naming convention
- All classes associated with the New UI are prefixed with a global namespace followed by a hyphen: `nu-`
- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax.
- `c-` for UI components.
Expand All @@ -47,7 +47,7 @@ Dark cold | `dark--cold`

---

### Design Tokens & Primitives
### Design tokens

#### Colors

Expand Down Expand Up @@ -76,14 +76,6 @@ Button | Role
**`--button-active`** | Primary button active
**`--button-disabled`** | Disabled button background

Icon | Role
:--- | :---
**`--icon-primary`** | Primary icons
**`--icon-secondary`** | Secondary icons
**`--icon-disabled`** | Disabled icons
**`--icon-on-color`** | Icon on interactive colors
**`--icon-inked`** | Inked icons

Link | Role
:--- | :---
**`--link`** | Primary link
Expand All @@ -98,16 +90,16 @@ Support | Role
**`--support-success`** | Success
**`--support-info`** | Information

Text | Role
Content | Role
:--- | :---
**`--text-primary`** | Primary body copy
**`--text-secondary`** | Secondary text color
**`--text-secondary-alt`** | Secondary text color alt
**`--text-placeholder`** | Placeholder text color
**`--text-on-color`** | Text on interactive color
**`--text-error`** | Error message
**`--text-success`** | Success message
**`--text-inked`** | Inked text
**`--content-primary`** | Primary body copy
**`--content-secondary`** | Secondary text color
**`--content-secondary-alt`** | Secondary text color alt
**`--content-placeholder`** | Placeholder text color
**`--content-on-color`** | Text on interactive color
**`--content-error`** | Error message
**`--content-success`** | Success message
**`--content-inked`** | Inked text
Comment on lines +93 to +102
Copy link

@coderabbitai coderabbitai bot Nov 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

Document migration path for breaking token rename (Text → Content).

The renaming of --text-* tokens to --content-* is a breaking change for consumers. While the README reflects the new tokens, there's no migration guide or deprecation notice for users upgrading from previous versions.

Consider:

  1. Adding a migration section to the README or CHANGELOG documenting this breaking change
  2. Verifying that the old --text-* tokens are completely removed (not providing backward compatibility)
  3. Searching the codebase for any remaining references to old tokens

Run the following script to check for old token references:

🏁 Script executed:

#!/bin/bash
# Search for old --text-* token references across the codebase
rg --type scss '\-\-text\-' --files-with-matches
rg --type css '\-\-text\-' --files-with-matches

Length of output: 43

🏁 Script executed:

#!/bin/bash
# Check content of dist/index.css for --text- references
echo "=== Checking dist/index.css for --text- references ==="
grep -c '\-\-text\-' dist/index.css 2>/dev/null || echo "File not found or no matches"
head -50 dist/index.css | grep '\-\-text\-' || echo "No matches in first 50 lines"

# Search all files (not just css/scss) for --text- in source directories
echo -e "\n=== Searching all source files for --text- ==="
rg '\-\-text\-' --type-list | head -20

# Try searching without type restriction
echo -e "\n=== Searching codebase without type restriction ==="
rg '\-\-text\-' -g '!node_modules' -g '!dist' -C 2 | head -100

# Check if there's a migration guide or changelog
echo -e "\n=== Checking for migration documentation ==="
find . -maxdepth 2 -type f \( -name 'CHANGELOG*' -o -name 'MIGRATION*' -o -name 'BREAKING*' \) 2>/dev/null

Length of output: 64445

🏁 Script executed:

#!/bin/bash
# Search for actual token definitions, not CSS properties
echo "=== Searching for --content- token definitions ==="
rg '\-\-content\-' -g '!dist' -g '!node_modules' -C 1 | head -80

echo -e "\n=== Searching for --text- token definitions (in source only) ==="
rg '\-\-text\-' -g '!dist' -g '!node_modules' -C 1 | head -80

echo -e "\n=== Check README for content tokens ==="
grep -n '\-\-content\-' README.md | head -20

echo -e "\n=== Check README for text tokens ==="
grep -n '\-\-text\-' README.md | head -20

echo -e "\n=== Check if CHANGELOG exists anywhere ==="
find . -name '*CHANGE*' -o -name '*change*' 2>/dev/null | grep -v node_modules | grep -v dist

Length of output: 3606

Add migration guide for breaking token rename (Text → Content).

The --text-* tokens have been successfully removed from the source code and replaced with --content-* tokens throughout (verified in packages/colors/src/_theme-mixins.scss and packages/colors/src/_utilities.scss). However, no migration documentation exists for consumers upgrading from previous versions who rely on the old token names.

Add a migration section to the README or create a CHANGELOG entry documenting this breaking change and providing a mapping of old to new token names for users to reference during their upgrade.

🤖 Prompt for AI Agents 
In README.md around lines 93 to 102, add a migration section documenting the
breaking rename of design tokens from --text-* to --content-*; create a clear
heading like "Migration: Text → Content tokens", include a simple mapping table
of old -> new token names for all renamed tokens, reference the source files
where the change occurred (packages/colors/src/_theme-mixins.scss and
packages/colors/src/_utilities.scss), state the release/version that contains
the breaking change, and provide a short upgrade instruction telling consumers
to replace usages of --text-* with the corresponding --content-* tokens (and how
to verify via the mapped list).


#### Effects

Expand All @@ -125,34 +117,28 @@ Focus | Role
**`--focus-accent`** | Accent focus
**`--focus-inverse`** | Focus inverse

Borders | Role
:--- | :---
**`--border-width-01`** | Default border width
**`--border-width-02`** | Used for the selection and focus order

#### Spacings

Token | Size (px/rem)
:--- | :---
**`--spacing-00`** | 0 / 0
**`--spacing-01`** | 2 / 0.125
**`--spacing-02`** | 4 / 0.25
**`--spacing-03`** | 6 / 0.375
**`--spacing-04`** | 8 / 0.5
**`--spacing-05`** | 12 / 0.75
**`--spacing-06`** | 16 / 1
**`--spacing-07`** | 20 / 1.25
**`--spacing-08`** | 24 / 1.5
**`--spacing-09`** | 32 / 2
**`--spacing-10`** | 40 / 2.5
**`--spacing-11`** | 48 / 3
**`--spacing-12`** | 56 / 3.5
**`--spacing-13`** | 64 / 4
**`--spacing-14`** | 72 / 4.5
**`--spacing-15`** | 80 / 5
**`--spacing-16`** | 96 / 6
**`--spacing-17`** | 120 / 7.5
**`--spacing-18`** | 160 / 10
Token | Source | Size (px/rem)
:--- | :--- | :---
**`--spacing-zero`** | `--spacing-00` | 0 / 0
**`--spacing-xs`** | `--spacing-02` | 4 / 0.25
**`--spacing-s`** | `--spacing-04` | 8 / 0.5
**`--spacing-m`** | `--spacing-05` | 12 / 0.75
**`--spacing-l`** | `--spacing-06` | 16 / 1
**`--spacing-xl`** | `--spacing-08` | 24 / 1.5
**`--spacing-xxl`** | `--spacing-09` | 32 / 2
**`--spacing-xxxl`** | `--spacing-11` | 48 / 3

#### Sizing

Token | Source | Size (px/rem)
:--- | :--- | :---
**`--size-xs`** | `--spacing-06` | 16 / 1
**`--size-s`** | `--spacing-08` | 24 / 1.5
**`--size-m`** | `--spacing-09` | 32 / 2
**`--controls-size-default`** | `--spacing-09` | 32 / 2
**`--controls-size-small`** | `--spacing-08` | 24 / 1.5

#### Typography

Expand All @@ -178,71 +164,3 @@ Utility (Desktop) | Utility (Mobile) | Role
**`--desktop-code`** | **`--mobile-code`** | Code

> Note: To set line height, simply add the prefix `--lh` to the font size variables. For instance, `--desktop-body-xl` becomes `--lh-desktop-body-xl`.

---

### The new reset

A thoughtful SCSS, CSS reset that preserves browser defaults while giving you complete design control. New UI reset eliminates cross-browser inconsistencies without being overly opinionated, allowing you to build upon a clean foundation.

```scss
// https://cdn.jsdelivr.net/npm/@new-ui/reset@latest/dist/index.css

*, *::before, *::after {
box-sizing: border-box;
}

html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
vertical-align: baseline;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
margin: 0;
padding: 0;
margin-block-end: 0;
}

ul[role='list'],
ol[role='list'] {
list-style: none;
}

body {
min-height: 100vh;
line-height: 1.5;
}

h1, h2,
h3, h4 {
text-wrap: balance;
}

a:not([class]) {
text-decoration-skip-ink: auto;
}

img,
picture {
max-width: 100%;
display: block;
}

input, textarea, button, select {
font-family: inherit;
font-size: inherit;
margin: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

:target {
scroll-margin-block: 5ex;
}
```
Loading