@regardio/brand 1.0.2 → 1.1.0

package/README.md

@@ -1,13 +1,12 @@
 # Regardio Brand
 
-> **Design system and branding for the Regardio ecosystem**
+> Design system and branding for the Regardio ecosystem.
 
-Regardio Brand provides the visual identity, design tokens, brand guidelines,
-and branded components for all Regardio applications. The package includes:
+Regardio Brand carries the visual identity, design tokens, and branded components every Regardio application draws on. The package includes:
 
-- **Design system** - Colors, typography, tokens, grid layout system
-- **Branded components** - Button and other UI components with Regardio visual identity
-- **Brand assets** - SVG files and React components for logos, icons, sprites
+- **Design system** — colors, typography, tokens, the grid layout
+- **Branded components** — Button and other UI primitives with the Regardio visual identity
+- **Brand assets** — SVG files and React components for logos, icons, and sprites
 
 ## Installation
 
@@ -15,9 +14,9 @@ and branded components for all Regardio applications. The package includes:
 pnpm add @regardio/brand
 ```
 
-## Branded Components
+## Branded components
 
-Regardio branded components represent the Regardio visual identity (flat blue, no border, ample padding, Georama bold font). Use these consistently across all Regardio applications.
+Branded components wear the Regardio identity: flat blue, no border, generous padding, Georama bold. They read the same across every Regardio application, which is the point.
 
 ```tsx
 import { Button } from '@regardio/brand/button';
@@ -25,18 +24,17 @@ import { Button } from '@regardio/brand/button';
 <Button variant="primary">Click me</Button>
 ```
 
-## Asset Catalog
+## Asset catalog
 
-Run Storybook to browse the complete asset catalog:
+Run Storybook to browse the full asset catalog:
 
 ```bash
 pnpm storybook
 ```
 
-This opens an interactive catalog at `http://localhost:6006` with all icons,
-logos, colors, and compass sprites.
+An interactive catalog opens at `http://localhost:6006` — every icon, logo, color, and compass sprite, in one place.
 
-## Sample Assets
+## Sample assets
 
 <!-- markdownlint-disable MD033 -->
 <p style="background:#f1eded; display: flex; gap: 16px; align-items: center; padding: 16px;">
@@ -47,26 +45,26 @@ logos, colors, and compass sprites.
 </p>
 <!-- markdownlint-enable MD033 -->
 
-## Asset Categories
+## Asset categories
 
-### SVG Files
+### SVG files
 
-Raw SVG assets are available in `src/svg/`:
+Raw SVG assets sit under `src/svg/`:
 
 - **`icons/`** — Regardio logos, icons, and system symbols
 - **`compass-base/`** — Compass sprite components (pursuits, needs, plans, circles, facets, bridges)
 
-### React Components
+### React components
 
 Generated React components are exported from the package:
 
-- **Icons & Logos** — `@regardio/brand/icons/*`
-- **System Layer Icons** — `@regardio/brand/icons/system-layer-*`
+- **Icons & logos** — `@regardio/brand/icons/*`
+- **System layer icons** — `@regardio/brand/icons/system-layer-*`
 - **Sprites** — `@regardio/brand/sprites/*`
 
 ## Usage
 
-### React Components
+### React components
 
 ```tsx
 import { RegardioLogoColor } from "@regardio/brand/icons/regardio-logo-color";
@@ -89,8 +87,7 @@ function App() {
 
 ### CompassSpriteProvider
 
-The `CompassSpriteProvider` embeds SVG symbol definitions for all compass sprites
-directly into the DOM. Include it **once** at the root of your application:
+`CompassSpriteProvider` embeds SVG symbol definitions for every compass sprite directly in the DOM. Include it **once** at the root of the application:
 
 ```tsx
 import { CompassSpriteProvider } from "@regardio/brand/sprites/compass-sprite-provider";
@@ -104,7 +101,7 @@ function App() {
 }
 ```
 
-Then use `CompassSprite` anywhere in your app to reference sprites by ID:
+Afterwards, `CompassSprite` references sprites by ID anywhere in the app:
 
 ```tsx
 import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";
@@ -114,22 +111,21 @@ import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";
 <CompassSprite id="bridge-view-enables" width={100} height={70} />
 ```
 
-### Regardio Color Scheme with Tailwind CSS
+### Regardio color scheme with Tailwind CSS
 
-Import `colors.css` to use the Regardio color palette with Tailwind CSS v4:
+Import `colors.css` to pull the Regardio palette into Tailwind CSS v4:
 
 ```css
 @import "@regardio/brand/styles/colors.css";
 ```
 
-This provides CSS custom properties using the `@theme` directive, making colors
-available as Tailwind utilities. The palette includes:
+The file defines CSS custom properties through the `@theme` directive, making every color available as a Tailwind utility. The palette covers:
 
-- **coral**, **orange**, **yellow**, **olive**, **lime**, **green**, **teal**, **aqua**, **blue**, **violet**, **plum**, **red** — full spectrum
+- **coral**, **orange**, **yellow**, **olive**, **lime**, **green**, **teal**, **aqua**, **blue**, **violet**, **plum**, **red** — the full spectrum
 - **gray** — neutral tones with warm undertones
 - **white**, **black** — base colors
 
-Each color has shades from `50` (lightest) to `950` (darkest):
+Each color carries shades from `50` (lightest) to `950` (darkest):
 
 ```html
 <div class="bg-coral-500 text-white">Coral background</div>
@@ -137,10 +133,9 @@ Each color has shades from `50` (lightest) to `950` (darkest):
 <div class="border-violet-300">Violet border</div>
 ```
 
-The compass sprites use these colors via Tailwind classes (e.g., `fill-green-300`),
-so the color scheme must be loaded for sprites to render correctly.
+Compass sprites lean on these colors through Tailwind classes (for example, `fill-green-300`), so the color scheme is a prerequisite for sprites to render correctly.
 
-### Design System Styles
+### Design system styles
 
 Import the complete design system (colors, tokens, typography, base styles, grid):
 
@@ -148,7 +143,7 @@ Import the complete design system (colors, tokens, typography, base styles, grid
 @import "@regardio/brand/styles/index.css";
 ```
 
-Or import individual style modules:
+Or pull in individual style modules:
 
 ```css
 @import "@regardio/brand/styles/colors.css";
@@ -158,7 +153,7 @@ Or import individual style modules:
 @import "@regardio/brand/styles/grid.css";
 ```
 
-### Grid System
+### Grid system
 
 Regardio's standard container and grid layout utilities:
 
@@ -171,7 +166,7 @@ Regardio's standard container and grid layout utilities:
 </div>
 ```
 
-See [Grid System documentation](./docs/grid-system.md) for complete usage guide.
+See [Grid System documentation](./docs/grid-system.md) for the complete usage guide.
 
 ## Scripts
 
@@ -179,9 +174,9 @@ See [Grid System documentation](./docs/grid-system.md) for complete usage guide.
 |--------|-------------|
 | `pnpm build` | Build TypeScript to `dist/` |
 | `pnpm dev` | Watch mode for development |
-| `pnpm generate` | Regenerate all React components from SVGs |
-| `pnpm storybook` | Launch Storybook asset catalog |
-| `pnpm storybook:build` | Build static Storybook site |
+| `pnpm generate` | Regenerate React components from SVGs |
+| `pnpm storybook` | Launch the Storybook asset catalog |
+| `pnpm storybook:build` | Build the static Storybook site |
 | `pnpm lint` | Run linting checks |
 | `pnpm fix` | Auto-fix linting issues |
 | `pnpm typecheck` | TypeScript type checking |
@@ -197,9 +192,8 @@ See [Grid System documentation](./docs/grid-system.md) for complete usage guide.
 
 ## License
 
-**CC BY-SA 4.0** — Regardio Brand assets are freely available for use and adaptation.
+**CC BY-SA 4.0** — Regardio Brand assets are free to use and adapt.
 
 ---
 
-*Part of the [Regardio Ensemble](https://regard.io/ensemble) toolkit for
-shared well-being.*
+*Part of the [Regardio Ensemble](https://regard.io/ensemble) toolkit for shared well-being.*

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/brand",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "private": false,
   "description": "Regardio Brand Assets",
   "homepage": "https://codeberg.org/regardio/commons/src/branch/main/packages/brand",
@@ -110,8 +110,8 @@
   ],
   "dependencies": {
     "@fontsource-variable/georama": "5.2.8",
-    "@regardio/react": "1.0.2",
-    "@regardio/tailwind": "1.0.2"
+    "@regardio/react": "1.1.0",
+    "@regardio/tailwind": "1.1.0"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.3.5",
@@ -138,12 +138,12 @@
     "storybook": "10.3.5",
     "svgo": "4.0.1",
     "tailwindcss": "4.2.4",
-    "tsdown": "0.21.9",
+    "tsdown": "0.21.10",
     "tsx": "4.21.0",
     "typescript": "6.0.3",
-    "vite": "8.0.9",
+    "vite": "8.0.10",
     "vitest": "4.1.5",
-    "@regardio/dev": "2.0.2"
+    "@regardio/dev": "2.1.0"
   },
   "scripts": {
     "build": "tsdown",