@credenza3/css 0.0.1-rc.2 → 0.0.1-rc.3

package/README.md

@@ -1,6 +1,8 @@
 # @credenza3/css
 
-Credenza design system — CSS tokens, component styles, and a Tailwind CSS preset based on the Credenza style guide.
+Credenza design system — CSS custom properties (design tokens), `cr-` prefixed component classes, and a Tailwind CSS preset based on the Credenza style guide.
+
+> **Every class in this package starts with `cr-`** so it's always clear when you're using a Credenza style.
 
 ## Installation
 
@@ -12,7 +14,7 @@ npm install @credenza3/css
 
 ### 1. Import the CSS
 
-Import the full stylesheet into your project to get all Credenza design tokens (CSS custom properties), base heading styles, and component classes.
+Import the full stylesheet to get all Credenza design tokens and `cr-` component classes:
 
 ```css
 /* In your main CSS file */
@@ -29,10 +31,10 @@ You can also import individual modules:
 
 ```css
 @import "@credenza3/css/variables.css"; /* CSS custom properties only */
-@import "@credenza3/css/base.css";      /* Poppins font + heading styles */
-@import "@credenza3/css/buttons.css";   /* Button components */
-@import "@credenza3/css/badges.css";    /* Badge components */
-@import "@credenza3/css/controls.css";  /* Toggle, avatar, steps */
+@import "@credenza3/css/base.css";      /* Poppins font + cr-h1–cr-h6 */
+@import "@credenza3/css/buttons.css";   /* cr-btn-* components */
+@import "@credenza3/css/badges.css";    /* cr-badge-* components */
+@import "@credenza3/css/controls.css";  /* cr-toggle, cr-avatar, cr-step */
 ```
 
 ### 2. Tailwind CSS Preset
@@ -48,29 +50,21 @@ module.exports = {
 };
 ```
 
-This extends your Tailwind theme with Credenza colors, fonts, and sizes.
+This extends your Tailwind theme with Credenza colors, fonts, and heading sizes.
 
 ### Tree-shaking / Unused CSS
 
-The preset automatically adds the `@credenza3/css` source files to Tailwind's `content` array. This means Tailwind's built-in PurgeCSS will scan the package's CSS for class names and **only include the `.cr-*` component classes you actually use in your markup** — everything else is stripped in production.
+The preset automatically adds the `@credenza3/css` source files to Tailwind's `content` array. This means Tailwind's built-in PurgeCSS will scan the package's CSS for class names and **only include the `cr-` component classes you actually use in your markup** — everything else is stripped in production.
 
 No extra configuration is needed on your side beyond adding the preset.
 
-You can then use classes like:
-
-```html
-<p class="font-poppins text-credenza bg-irish">Hello</p>
-<h1 class="text-h1 font-poppins">Heading 1</h1>
-<span class="text-skol bg-triple-crown px-3 py-1 rounded-pill">Tag</span>
-```
-
 ---
 
 ## Design Tokens
 
 ### CSS Custom Properties
 
-All tokens are available as CSS custom properties on `:root`. Use them anywhere:
+All tokens are defined on `:root` and prefixed with `--cr-`. Use them anywhere:
 
 ```css
 .my-component {
@@ -108,115 +102,247 @@ All tokens are available as CSS custom properties on `:root`. Use them anywhere:
 | `--cr-color-alert` | Alert | `#f44336` |
 | `--cr-color-link` | Link | `#e91e63` |
 
-### Tailwind Color Classes
+### Typography Tokens
 
-With the preset enabled you get:
+| Token | Value |
+| --- | --- |
+| `--cr-font-family` | `"Poppins", sans-serif` |
+| `--cr-font-extralight` | `200` |
+| `--cr-font-light` | `300` |
+| `--cr-font-regular` | `400` |
+| `--cr-font-medium` | `500` |
+| `--cr-font-bold` | `700` |
+| `--cr-font-black` | `900` |
 
-- `bg-credenza`, `text-credenza`, `border-credenza`
-- `bg-skol`, `text-skol`, `border-skol`
-- `bg-the-lake-show`, `text-the-lake-show`
-- `bg-irish`, `bg-oriole`, `bg-rose`, `bg-triple-crown`
-- `bg-cr-success`, `bg-cr-info`, `bg-cr-warning`, `bg-cr-alert`, `bg-cr-link`
-- … and all `text-*`, `border-*`, `ring-*` variants of the above
+### Tailwind Utility Classes (via preset)
 
-### Typography
+With the preset enabled you get Tailwind classes mapped to Credenza tokens:
 
-| Heading | Font | Weight | Size |
-| --- | --- | --- | --- |
-| H1 | Poppins | Regular (400) | 30px |
-| H2 | Poppins | Light (300) | 24px |
-| H3 | Poppins | Medium (500) | 18px |
-| H4 | Poppins | Regular (400) | 16px |
-| H5 | Poppins | Regular (400) | 14px |
-| H6 | Poppins | Regular (400) | 12px |
+| Category | Example classes |
+| --- | --- |
+| Colors | `bg-credenza`, `text-skol`, `border-the-lake-show`, `bg-irish`, `text-cr-alert` … |
+| Font family | `font-poppins` |
+| Font weight | `font-extralight`, `font-light`, `font-regular`, `font-medium`, `font-bold`, `font-black` |
+| Heading sizes | `text-h1`, `text-h2`, `text-h3`, `text-h4`, `text-h5`, `text-h6` |
+| Border radius | `rounded-pill` |
+| Focus rings | `shadow-cr-focus`, `shadow-cr-focus-alert`, `ring-skol` |
+
+---
+
+## Component Classes Reference
+
+Every component class is prefixed with `cr-`.
 
-Native `<h1>` – `<h6>` elements are styled automatically when you import `base.css`.
+### Headings (`cr-h1` – `cr-h6`)
 
-With the Tailwind preset you can also apply heading styles to any element:
+Apply heading styles to **any** element. These don't style bare `<h1>`–`<h6>` elements — you always opt in explicitly.
+
+| Class | Font | Weight | Size |
+| --- | --- | --- | --- |
+| `cr-h1` | Poppins | Regular (400) | 30px / 1.875rem |
+| `cr-h2` | Poppins | Light (300) | 24px / 1.5rem |
+| `cr-h3` | Poppins | Medium (500) | 18px / 1.125rem |
+| `cr-h4` | Poppins | Regular (400) | 16px / 1rem |
+| `cr-h5` | Poppins | Regular (400) | 14px / 0.875rem |
+| `cr-h6` | Poppins | Regular (400) | 12px / 0.75rem |
 
 ```html
-<span class="text-h1 font-poppins">Looks like an H1</span>
-<div class="text-h3 font-poppins">Looks like an H3</div>
+<h1 class="cr-h1">Page Title</h1>
+<span class="cr-h3">Looks like an H3</span>
+<p class="cr-h5">Small heading style on a paragraph</p>
 ```
 
-Font weight classes: `font-extralight`, `font-light`, `font-regular`, `font-medium`, `font-bold`, `font-black`.
-
 ---
 
-## Component Classes
-
 ### Buttons
 
-```html
-<!-- Primary button -->
-<button class="cr-btn cr-btn-primary">Button</button>
+#### Base + Variants
+
+Every button starts with `cr-btn` and adds a variant modifier:
 
-<!-- Outline button -->
-<button class="cr-btn cr-btn-outline">Button</button>
+| Class | Description |
+| --- | --- |
+| `cr-btn` | Base button (required) |
+| `cr-btn-primary` | Dark filled button (Credenza #333) |
+| `cr-btn-outline` | Transparent with border |
+| `cr-btn-success` | Green status button |
+| `cr-btn-info` | Purple status button |
+| `cr-btn-warning` | Orange status button |
+| `cr-btn-alert` | Red status button |
+| `cr-btn-link` | Text-only link-style button |
 
-<!-- Status buttons -->
+```html
+<button class="cr-btn cr-btn-primary">Button</button>
+<button class="cr-btn cr-btn-outline">Outline</button>
 <button class="cr-btn cr-btn-success">Success</button>
 <button class="cr-btn cr-btn-info">Info</button>
 <button class="cr-btn cr-btn-warning">Warning</button>
 <button class="cr-btn cr-btn-alert">Alert</button>
-
-<!-- Link-style button -->
 <button class="cr-btn cr-btn-link">Link</button>
+```
+
+#### States
+
+| Class / Attribute | Description |
+| --- | --- |
+| `:hover` | Automatic hover style |
+| `:active` | Automatic click/press style |
+| `disabled` attribute | Native disabled state |
+| `cr-btn-disabled` | Class-based disabled state |
+| `cr-btn-focused` | Class-based focus ring |
+| `:focus-visible` | Automatic keyboard focus ring |
 
-<!-- Disabled state -->
+```html
 <button class="cr-btn cr-btn-primary" disabled>Disabled</button>
+<button class="cr-btn cr-btn-primary cr-btn-focused">Focused</button>
+```
 
-<!-- Sizes -->
+#### Sizes
+
+| Class | Description |
+| --- | --- |
+| `cr-btn-sm` | Small button |
+| `cr-btn-lg` | Large button |
+
+```html
 <button class="cr-btn cr-btn-primary cr-btn-sm">Small</button>
 <button class="cr-btn cr-btn-primary cr-btn-lg">Large</button>
+```
+
+#### Login / Social Buttons
 
-<!-- Login / social button -->
+| Class | Description |
+| --- | --- |
+| `cr-btn-login` | Full-width social login button |
+| `cr-btn-login-icon` | Icon inside a login button |
+| `cr-btn-login-icon-only` | Square icon-only social button |
+
+```html
 <button class="cr-btn-login">
   <img class="cr-btn-login-icon" src="google.svg" alt="" />
   Continue with Google
 </button>
 
-<!-- Icon-only social button -->
 <button class="cr-btn-login-icon-only">
   <img class="cr-btn-login-icon" src="google.svg" alt="Google" />
 </button>
+```
+
+#### App Buttons (Open Gmail / Outlook)
+
+| Class | Description |
+| --- | --- |
+| `cr-btn-app` | Bordered app-launch button |
+| `cr-btn-app-icon` | Icon inside an app button |
 
-<!-- App button (e.g. Open Gmail) -->
+```html
 <a class="cr-btn-app" href="#">
   <img class="cr-btn-app-icon" src="gmail.svg" alt="" />
   Open Gmail
 </a>
 ```
 
+#### Icon Button Helper
+
+| Class | Description |
+| --- | --- |
+| `cr-btn-icon` | Inline-flex container for icon + label |
+
+```html
+<button class="cr-btn cr-btn-primary cr-btn-icon">
+  <svg>…</svg>
+  Save
+</button>
+```
+
+---
+
 ### Badges
 
+#### Base + Status Variants
+
+| Class | Description |
+| --- | --- |
+| `cr-badge` | Base badge (required) |
+| `cr-badge-success` | Green badge |
+| `cr-badge-pending` | Orange badge |
+| `cr-badge-failed` | Red badge |
+| `cr-badge-info` | Purple badge |
+
 ```html
-<!-- Status badges -->
 <span class="cr-badge cr-badge-success">Success</span>
 <span class="cr-badge cr-badge-pending">Pending</span>
 <span class="cr-badge cr-badge-failed">Failed</span>
 <span class="cr-badge cr-badge-info">Info</span>
+```
+
+#### Outline Variants
+
+| Class | Description |
+| --- | --- |
+| `cr-badge-outline-success` | Green outline badge |
+| `cr-badge-outline-pending` | Orange outline badge |
+| `cr-badge-outline-failed` | Red outline badge |
+| `cr-badge-outline-info` | Purple outline badge |
 
-<!-- Outline badges -->
+```html
 <span class="cr-badge cr-badge-outline-success">Success</span>
+```
+
+#### Count Badges (number pills)
 
-<!-- Count badges -->
+| Class | Description |
+| --- | --- |
+| `cr-badge-count` | Base count pill (dark) |
+| `cr-badge-count-success` | Green count pill |
+| `cr-badge-count-warning` | Orange count pill |
+| `cr-badge-count-alert` | Red count pill |
+| `cr-badge-count-info` | Purple count pill |
+
+```html
 <span class="cr-badge-count">1</span>
 <span class="cr-badge-count">10</span>
 <span class="cr-badge-count cr-badge-count-alert">100</span>
+```
+
+#### Powered-by Badge
 
-<!-- Powered by badge -->
+| Class | Description |
+| --- | --- |
+| `cr-badge-powered` | "Powered by Credenza" container |
+| `cr-badge-powered-icon` | Icon inside powered badge |
+
+```html
 <span class="cr-badge-powered">
   <img class="cr-badge-powered-icon" src="credenza-icon.svg" alt="" />
   Powered by Credenza
 </span>
+```
+
+#### Badge Sizes
+
+| Class | Description |
+| --- | --- |
+| `cr-badge-sm` | Small badge |
+| `cr-badge-lg` | Large badge |
 
-<!-- Sizes -->
+```html
 <span class="cr-badge cr-badge-success cr-badge-sm">Small</span>
 <span class="cr-badge cr-badge-success cr-badge-lg">Large</span>
 ```
 
-### Toggle
+---
+
+### Toggle Switch
+
+| Class | Description |
+| --- | --- |
+| `cr-toggle` | Wrapper `<label>` |
+| `cr-toggle-input` | Hidden `<input type="checkbox">` |
+| `cr-toggle-track` | Visual track + thumb |
+| `cr-toggle-label` | Label text |
+| `cr-toggle-label-off` | "Off" helper text |
+| `cr-toggle-label-on` | "On" helper text |
 
 ```html
 <label class="cr-toggle">
@@ -234,8 +360,27 @@ Font weight classes: `font-extralight`, `font-light`, `font-regular`, `font-medi
 </label>
 ```
 
+States handled automatically: `:checked`, `:focus-visible`, `:disabled`.
+
+---
+
 ### Avatars
 
+| Class | Description |
+| --- | --- |
+| `cr-avatar` | Base avatar (required) |
+| `cr-avatar-xs` | 20px |
+| `cr-avatar-sm` | 28px |
+| `cr-avatar-md` | 36px |
+| `cr-avatar-lg` | 48px |
+| `cr-avatar-xl` | 64px |
+| `cr-avatar-ring` | Skol-colored ring around avatar |
+| `cr-avatar-group` | Overlapping avatar row |
+| `cr-avatar-initials` | Centered uppercase initials |
+| `cr-avatar-status` | Online status dot (green) |
+| `cr-avatar-status-offline` | Offline status dot (gray) |
+| `cr-avatar-status-busy` | Busy status dot (red) |
+
 ```html
 <!-- Image avatar -->
 <span class="cr-avatar cr-avatar-md">
@@ -252,17 +397,28 @@ Font weight classes: `font-extralight`, `font-light`, `font-regular`, `font-medi
   <img src="photo.jpg" alt="User" />
 </span>
 
-<!-- Avatar group -->
+<!-- Avatar group (overlapping) -->
 <div class="cr-avatar-group">
   <span class="cr-avatar cr-avatar-sm"><img src="a.jpg" alt="" /></span>
   <span class="cr-avatar cr-avatar-sm"><img src="b.jpg" alt="" /></span>
   <span class="cr-avatar cr-avatar-sm"><img src="c.jpg" alt="" /></span>
 </div>
-
-<!-- Sizes: cr-avatar-xs, cr-avatar-sm, cr-avatar-md, cr-avatar-lg, cr-avatar-xl -->
 ```
 
-### Steps
+---
+
+### Steps / Stepper
+
+| Class | Description |
+| --- | --- |
+| `cr-steps` | Wrapper flex container |
+| `cr-step` | Individual step |
+| `cr-step-indicator` | Numbered circle |
+| `cr-step-label` | Step label text |
+| `cr-step-connector` | Line between steps |
+| `cr-step-active` | Currently active step |
+| `cr-step-completed` | Completed step |
+| `cr-step-dot` | Dot-style variant (small dot instead of number) |
 
 ```html
 <div class="cr-steps">
@@ -295,17 +451,30 @@ Font weight classes: `font-extralight`, `font-light`, `font-regular`, `font-medi
 
 ---
 
+## Complete `cr-` Class List
+
+| Category | Classes |
+| --- | --- |
+| **Headings** | `cr-h1` `cr-h2` `cr-h3` `cr-h4` `cr-h5` `cr-h6` |
+| **Buttons** | `cr-btn` `cr-btn-primary` `cr-btn-outline` `cr-btn-success` `cr-btn-info` `cr-btn-warning` `cr-btn-alert` `cr-btn-link` `cr-btn-disabled` `cr-btn-focused` `cr-btn-sm` `cr-btn-lg` `cr-btn-icon` `cr-btn-login` `cr-btn-login-icon` `cr-btn-login-icon-only` `cr-btn-app` `cr-btn-app-icon` |
+| **Badges** | `cr-badge` `cr-badge-success` `cr-badge-pending` `cr-badge-failed` `cr-badge-info` `cr-badge-outline-success` `cr-badge-outline-pending` `cr-badge-outline-failed` `cr-badge-outline-info` `cr-badge-count` `cr-badge-count-success` `cr-badge-count-warning` `cr-badge-count-alert` `cr-badge-count-info` `cr-badge-powered` `cr-badge-powered-icon` `cr-badge-sm` `cr-badge-lg` |
+| **Toggle** | `cr-toggle` `cr-toggle-input` `cr-toggle-track` `cr-toggle-label` `cr-toggle-label-off` `cr-toggle-label-on` |
+| **Avatars** | `cr-avatar` `cr-avatar-xs` `cr-avatar-sm` `cr-avatar-md` `cr-avatar-lg` `cr-avatar-xl` `cr-avatar-ring` `cr-avatar-group` `cr-avatar-initials` `cr-avatar-status` `cr-avatar-status-offline` `cr-avatar-status-busy` |
+| **Steps** | `cr-steps` `cr-step` `cr-step-indicator` `cr-step-label` `cr-step-connector` `cr-step-active` `cr-step-completed` `cr-step-dot` |
+
+---
+
 ## File Structure
 
 ```
-@credenza3/css/
+@credenza3/css
 ├── src/
 │   ├── index.css        ← main entry (imports everything)
-│   ├── variables.css    ← CSS custom properties (design tokens)
-│   ├── base.css         ← Poppins font import & heading styles
-│   ├── buttons.css      ← Button component classes
-│   ├── badges.css       ← Badge component classes
-│   └── controls.css     ← Toggle, avatar, steps components
+│   ├── variables.css    ← --cr-* CSS custom properties
+│   ├── base.css         ← Poppins font import + cr-h1–cr-h6
+│   ├── buttons.css      ← cr-btn-* component classes
+│   ├── badges.css       ← cr-badge-* component classes
+│   └── controls.css     ← cr-toggle, cr-avatar, cr-step components
 ├── tailwind-preset.js   ← Tailwind CSS theme preset
 ├── package.json
 └── README.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@credenza3/css",
-  "version": "0.0.1-rc.2",
+  "version": "0.0.1-rc.3",
   "description": "Credenza design system — CSS tokens, component styles, and Tailwind CSS preset based on the Credenza style guide.",
   "main": "src/index.css",
   "style": "src/index.css",

package/src/base.css

@@ -15,47 +15,47 @@
    H6 — Poppins Regular 12
    ----------------------------------------------------------------------- */
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+.cr-h1,
+.cr-h2,
+.cr-h3,
+.cr-h4,
+.cr-h5,
+.cr-h6 {
   font-family: var(--cr-font-family);
   color: var(--cr-color-credenza);
 }
 
-h1 {
+.cr-h1 {
   font-size: 1.875rem; /* 30px */
   font-weight: var(--cr-font-regular);
   line-height: 1.25;
 }
 
-h2 {
+.cr-h2 {
   font-size: 1.5rem; /* 24px */
   font-weight: var(--cr-font-light);
   line-height: 1.25;
 }
 
-h3 {
+.cr-h3 {
   font-size: 1.125rem; /* 18px */
   font-weight: var(--cr-font-medium);
   line-height: 1.375;
 }
 
-h4 {
+.cr-h4 {
   font-size: 1rem; /* 16px */
   font-weight: var(--cr-font-regular);
   line-height: 1.375;
 }
 
-h5 {
+.cr-h5 {
   font-size: 0.875rem; /* 14px */
   font-weight: var(--cr-font-regular);
   line-height: 1.5;
 }
 
-h6 {
+.cr-h6 {
   font-size: 0.75rem; /* 12px */
   font-weight: var(--cr-font-regular);
   line-height: 1.5;