From b0f0c1b6c418799f5087a0fa49167476a95cb7e1 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Mon, 28 Sep 2026 08:10:29 +0200 Subject: [PATCH 1/3] docs(sushi): clarify package description and add badges --- sushi/README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/sushi/README.md b/sushi/README.md index 2c235a6..39b0a5d 100644 --- a/sushi/README.md +++ b/sushi/README.md @@ -1,6 +1,13 @@ -# Sushi in Angular +# Sushi Angular -Accessible, themeable Angular components for Ramen Suite, published as `@sushi-kit/angular`. +[![npm version](https://img.shields.io/npm/v/%40sushi-kit%2Fangular)](https://www.npmjs.com/package/@sushi-kit/angular) +[![CI](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml?query=branch%3Amain) +[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE) +[![Playground](https://img.shields.io/badge/docs-Playground-f2b66d)](https://ramen-suite.github.io/sushi-angular/) + +Sushi is an open-source UI component library for Angular applications, published as `@sushi-kit/angular`. It provides standalone components for forms, navigation, data display, and overlays, with typed signal APIs and customizable light and dark themes. + +Interactions build on native HTML semantics, Angular Aria, and the CDK. Component styles are included; customize their appearance with CSS tokens to match your application. ## Compatibility From b9bb5066e48ad5dafe91ac278187c44628fe176d Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Wed, 30 Sep 2026 23:05:32 +0200 Subject: [PATCH 2/3] docs(sushi): polish public package guidance --- README.md | 6 +++--- docs/getting-started.md | 8 ++++---- playground/src/styles.css | 4 ---- sushi/README.md | 4 ++-- 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 5561c91..6973984 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Sushi in Angular +# Sushi Kit for Angular -Sushi is the Angular component library in Ramen Suite, published as `@sushi-kit/angular`. It provides accessible, themeable components with typed signal APIs. Application state stays in Angular; interactions use native HTML semantics, Angular Aria, and the CDK. +Sushi Kit is an open-source component library for Angular applications, published as `@sushi-kit/angular`. It provides accessible, themeable components with typed signal APIs. Interactions build on native HTML semantics, Angular Aria, and the CDK. ## Compatibility @@ -16,7 +16,7 @@ Sushi ships the compiled CSS required by its components. The [Getting started guide](docs/getting-started.md) contains the same setup as the Playground and is the maintained setup reference. -See [Styling and themes](docs/styling-and-themes.md) for theme tokens, component tokens, recommended Tailwind usage, and custom themes. +See [Styling and themes](docs/styling-and-themes.md) for component tokens, recommended Tailwind usage, and custom themes. All built-in values are listed in the [theme token reference](docs/theme-tokens.md). ```bash npm install @sushi-kit/angular diff --git a/docs/getting-started.md b/docs/getting-started.md index d0bd03d..749dcbc 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -6,9 +6,9 @@ The package peer dependencies are the source of truth for the supported Angular range. -# Getting started +## Getting started -## 1. Install +### 1. Install ```bash npm install @sushi-kit/angular @@ -16,7 +16,7 @@ npm install @sushi-kit/angular npm also installs the required peer dependencies, including [Lucide Angular](https://lucide.dev) and [PhotoSwipe](https://photoswipe.com/). Lucide uses the ISC license; PhotoSwipe uses MIT. -## 2. Load the styles +### 2. Load the styles Import the compiled stylesheet once in `src/styles.css`: @@ -44,7 +44,7 @@ Alternatively, add it before the application stylesheet in `angular.json`: Choose one method. The consumer does not need a Sushi-specific PostCSS configuration. -## 3. Use a component +### 3. Use a component Import each standalone declaration used by a component: diff --git a/playground/src/styles.css b/playground/src/styles.css index 077f3d5..87861bd 100644 --- a/playground/src/styles.css +++ b/playground/src/styles.css @@ -214,10 +214,6 @@ pg-example-code { margin-top: 0; } -.pg-markdown__prose > h1:not(:first-child) { - margin-top: 3rem; -} - .pg-markdown h2 { margin-top: 2.75rem; font-size: 1.45rem; diff --git a/sushi/README.md b/sushi/README.md index 39b0a5d..7c20e91 100644 --- a/sushi/README.md +++ b/sushi/README.md @@ -1,4 +1,4 @@ -# Sushi Angular +# Sushi Kit for Angular [![npm version](https://img.shields.io/npm/v/%40sushi-kit%2Fangular)](https://www.npmjs.com/package/@sushi-kit/angular) [![CI](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml?query=branch%3Amain) @@ -57,4 +57,4 @@ Theme tokens, component APIs, and examples are documented in the [Sushi Playgrou ## License -[MIT](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE) +[MIT](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE). Third-party notices are included with the package. From 6a09f105ec411b487c0f2d42624f0527ab85cd66 Mon Sep 17 00:00:00 2001 From: Sebastian Enns Date: Thu, 1 Oct 2026 00:52:37 +0200 Subject: [PATCH 3/3] docs(sushi): polish package readmes --- README.md | 12 ++++++++---- sushi/README.md | 17 ++++++++++------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 6973984..e23be28 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,11 @@ # Sushi Kit for Angular +[![License: MIT](https://img.shields.io/badge/license-MIT-7a0712?labelColor=282a36)](LICENSE) +[![npm version](https://img.shields.io/npm/v/%40sushi-kit%2Fangular?labelColor=282a36&color=7a0712)](https://www.npmjs.com/package/@sushi-kit/angular) +[![npm downloads](https://img.shields.io/npm/dm/%40sushi-kit%2Fangular?labelColor=282a36&color=7a0712)](https://www.npmjs.com/package/@sushi-kit/angular) +[![CI](https://img.shields.io/github/actions/workflow/status/ramen-suite/sushi-angular/ci.yml?branch=main&label=CI&labelColor=282a36)](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml?query=branch%3Amain) +[![Playground](https://img.shields.io/badge/docs-Playground-996400?labelColor=282a36)](https://ramen-suite.github.io/sushi-angular/) + Sushi Kit is an open-source component library for Angular applications, published as `@sushi-kit/angular`. It provides accessible, themeable components with typed signal APIs. Interactions build on native HTML semantics, Angular Aria, and the CDK. ## Compatibility @@ -14,10 +20,6 @@ Sushi ships the compiled CSS required by its components. ## Install -The [Getting started guide](docs/getting-started.md) contains the same setup as the Playground and is the maintained setup reference. - -See [Styling and themes](docs/styling-and-themes.md) for component tokens, recommended Tailwind usage, and custom themes. All built-in values are listed in the [theme token reference](docs/theme-tokens.md). - ```bash npm install @sushi-kit/angular ``` @@ -30,6 +32,8 @@ Import the public stylesheet from the application's global `src/styles.css`: No Sushi-specific PostCSS or Tailwind configuration is required. +Continue with [Getting started](docs/getting-started.md) for the complete setup. See [Styling and themes](docs/styling-and-themes.md) for component tokens, recommended Tailwind usage, and custom themes. All built-in values are listed in the [theme token reference](docs/theme-tokens.md). + ## Use a component Every public declaration is standalone. Import only what the consuming component uses: diff --git a/sushi/README.md b/sushi/README.md index 7c20e91..3a27e54 100644 --- a/sushi/README.md +++ b/sushi/README.md @@ -1,11 +1,12 @@ # Sushi Kit for Angular -[![npm version](https://img.shields.io/npm/v/%40sushi-kit%2Fangular)](https://www.npmjs.com/package/@sushi-kit/angular) -[![CI](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml/badge.svg?branch=main&event=push)](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml?query=branch%3Amain) -[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE) -[![Playground](https://img.shields.io/badge/docs-Playground-f2b66d)](https://ramen-suite.github.io/sushi-angular/) +[![License: MIT](https://img.shields.io/badge/license-MIT-7a0712?labelColor=282a36)](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE) +[![npm version](https://img.shields.io/npm/v/%40sushi-kit%2Fangular?labelColor=282a36&color=7a0712)](https://www.npmjs.com/package/@sushi-kit/angular) +[![npm downloads](https://img.shields.io/npm/dm/%40sushi-kit%2Fangular?labelColor=282a36&color=7a0712)](https://www.npmjs.com/package/@sushi-kit/angular) +[![CI](https://img.shields.io/github/actions/workflow/status/ramen-suite/sushi-angular/ci.yml?branch=main&label=CI&labelColor=282a36)](https://github.com/ramen-suite/sushi-angular/actions/workflows/ci.yml?query=branch%3Amain) +[![Playground](https://img.shields.io/badge/docs-Playground-996400?labelColor=282a36)](https://ramen-suite.github.io/sushi-angular/) -Sushi is an open-source UI component library for Angular applications, published as `@sushi-kit/angular`. It provides standalone components for forms, navigation, data display, and overlays, with typed signal APIs and customizable light and dark themes. +Sushi Kit is an open-source UI component library for Angular applications, published as `@sushi-kit/angular`. It provides standalone components for forms, navigation, data display, and overlays, with typed signal APIs and customizable light and dark themes. Interactions build on native HTML semantics, Angular Aria, and the CDK. Component styles are included; customize their appearance with CSS tokens to match your application. @@ -29,6 +30,8 @@ Load the component styles once in the application's global stylesheet: @import '@sushi-kit/angular/styles.css'; ``` +See [Getting started](https://ramen-suite.github.io/sushi-angular/getting-started) for the complete setup. + ## Use a component Sushi declarations are standalone. Import only what the consuming component uses: @@ -53,8 +56,8 @@ export class Checkout {} ``` -Theme tokens, component APIs, and examples are documented in the [Sushi Playground](https://ramen-suite.github.io/sushi-angular/). +Browse component examples and APIs in the [Sushi Playground](https://ramen-suite.github.io/sushi-angular/). See [Styling and themes](https://ramen-suite.github.io/sushi-angular/styling-and-themes) for customization and the [theme token reference](https://ramen-suite.github.io/sushi-angular/theme-tokens) for built-in values. ## License -[MIT](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE). Third-party notices are included with the package. +[MIT](https://github.com/ramen-suite/sushi-angular/blob/main/LICENSE). Third-party notices are included with the published package.