@simple-base/css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Reda Salmi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,172 @@
+# @simple-base/css
+
+Simple Base component styles and typography.
+
+Styles cover components and their internal parts, including functional wrappers
+such as select arrows and scrollable tables. Page layouts, component galleries,
+and external grouping or showcase helpers belong in the consuming application.
+
+## Visual defaults
+
+- Use `.sb-heading-1` through `.sb-heading-6` for utility headings: sans serif,
+  sized 32, 24, 20, 18, 16, and 14px. Reserve `.sb-display` for an intentional
+  expressive serif heading, not routine page sections or dialogs.
+- Write captions, table headings, and optional dialog kickers in sentence case.
+  Monospace is for code, identifiers, shortcuts, and alignment-dependent values;
+  omit eyebrows that repeat the heading or add no context.
+- Cards group content through surfaces and borders, without default elevation.
+  Menus and dialogs use restrained shadows, lighter in light themes. Modal
+  backdrops separate context with a scrim, not blur.
+- Generic dialog kickers are neutral. Danger styling belongs to destructive
+  confirmations, not ordinary settings or editing dialogs.
+- Buttons stay in place on hover and press. Color and border changes provide
+  feedback; focus rings remain visible.
+
+## All styles
+
+Import the stylesheet for its side effects through a CSS-aware bundler:
+
+```ts
+import "@simple-base/css";
+```
+
+Or import it from CSS:
+
+```css
+@import "@simple-base/css";
+```
+
+The package root includes the token stylesheet. Stylesheet imports do not export
+a JavaScript value or CSS string.
+
+## Individual stylesheets
+
+Load tokens once, then select the component styles you need:
+
+```css
+@import "@simple-base/tokens/css";
+@import "@simple-base/css/button";
+@import "@simple-base/css/badge";
+```
+
+Individual stylesheets use explicit, extensionless exports such as `/button`,
+`/badge`, `/alert-dialog`, and `/typography`. The internal `styles/` directory and
+`.css` filenames are not public import paths. These exports also support
+side-effect imports in TypeScript:
+
+```ts
+import "@simple-base/css/button";
+```
+
+## Selector API
+
+The selectors are the public API of this package. Component roots and parts are
+classes; configuration and state are attributes, never modifier classes.
+
+### Cascade layer
+
+Every rule is wrapped in the `sb` cascade layer and declared before the imports:
+
+```css
+@layer sb;
+```
+
+Because the library is layered, any unlayered CSS in the consuming app wins over
+it regardless of specificity, so overrides do not need `!important`:
+
+```css
+/* app styles, unlayered */
+.sb-button {
+  border-radius: 0;
+}
+```
+
+Note on order: if a layered framework such as Tailwind CSS is imported _before_
+this package, the `sb` layer is declared after the framework layers and wins on
+ties. Import this package first if framework utilities need the higher priority.
+
+### Conventions
+
+- `.sb-<component>` is the required root class.
+- `.sb-<component>-<part>` is a part of that component.
+- Configuration uses `data-*` attributes; state uses `data-*`, `aria-*`, or
+  native pseudo-classes (`:checked`, `:disabled`, `:hover`, `:focus-visible`,
+  `[open]`).
+- Element selectors are only used as descendants of a root class, to style the
+  structure a component renders. They are not standalone hooks and imply the
+  markup contract listed below.
+
+### Variants and options
+
+| Attribute      | Component                                   | Values                                                                                     |
+| -------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `data-variant` | `.sb-badge`                                 | `default`, `success`, `danger`, `warning`, `info`, `accent`, `command`, `outline`, `muted` |
+| `data-variant` | `.sb-button`                                | `primary`, `secondary`, `tertiary`, `ghost`, `danger`, `danger-subtle`                     |
+| `data-variant` | `.sb-card`                                  | `flat`, `rule`                                                                             |
+| `data-variant` | `.sb-table` cell                            | `code`, `number`                                                                           |
+| `data-size`    | `.sb-badge`                                 | `small`, `medium`                                                                          |
+| `data-size`    | `.sb-button`                                | `small`, `medium`, `large`                                                                 |
+| `data-status`  | `.sb-status-line`, `.sb-alert`, `.sb-toast` | `success`, `danger`, `info`                                                                |
+| `data-padding` | `.sb-card`                                  | `true`                                                                                     |
+
+### State attributes
+
+- `[aria-invalid="true"]` — `.sb-input`, `.sb-textarea`.
+- `[data-invalid]` — `.sb-select-control`, `.sb-combobox-control`, `.sb-field-help`.
+- `[aria-selected="true"]` — `.sb-tab`, and `.sb-table tbody tr`.
+- `[aria-pressed="true"]` — `.sb-segment`.
+- `[aria-current="page"]` — `.sb-page-button`.
+- `[aria-disabled="true"]`, `:disabled` — `.sb-button`, `.sb-select`, form controls.
+- `[data-state="open"]` — `.sb-select-trigger`, `.sb-combobox-trigger`.
+- `[data-highlighted]` — `.sb-select-item`, `.sb-combobox-item`.
+- `[data-placeholder-shown]`, `[data-required]` — `.sb-select`, `.sb-combobox`.
+- `[open]` — `.sb-dialog`, `.sb-alert-dialog`, `.sb-disclosure`, `.sb-menu`.
+
+### Component reference
+
+| Component         | Root                                                                         | Parts                                                                                                 |
+| ----------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Alert dialog      | `.sb-alert-dialog`                                                           | `-icon`, `-content`, `-kicker`, `-title`, `-description`, `-actions`, `-close`                        |
+| Badge             | `.sb-badge`                                                                  | —                                                                                                     |
+| Breadcrumb        | `.sb-breadcrumb`                                                             | `-separator`                                                                                          |
+| Button            | `.sb-button`                                                                 | —                                                                                                     |
+| Card              | `.sb-card`                                                                   | —                                                                                                     |
+| Checkbox          | `.sb-checkbox`                                                               | —                                                                                                     |
+| Combobox          | `.sb-combobox`                                                               | `-label`, `-control`, `-input`, `-trigger`, `-content`, `-list`, `-item`, `-empty`                    |
+| Dialog            | `.sb-dialog`                                                                 | `-head`, `-title`, `-kicker`, `-copy`, `-actions`, `-close`                                           |
+| Disclosure        | `.sb-disclosure`                                                             | `-copy`                                                                                               |
+| Empty state       | `.sb-empty-state`                                                            | `-mark` (alias `.sb-empty-mark`)                                                                      |
+| Field             | `.sb-field`, `.sb-fieldset`                                                  | `-title`, `-help`, `.sb-choice-list`, `.sb-choice`                                                    |
+| Input             | `.sb-input`                                                                  | —                                                                                                     |
+| Keyboard shortcut | `.sb-shortcut`                                                               | —                                                                                                     |
+| Menu              | `.sb-menu`                                                                   | `-panel`, `-item`                                                                                     |
+| Pagination        | `.sb-pagination`                                                             | `.sb-page-button`                                                                                     |
+| Progress          | `.sb-progress`                                                               | —                                                                                                     |
+| Radio             | `.sb-radio`                                                                  | —                                                                                                     |
+| Range             | `.sb-range`                                                                  | `.sb-range-readout`                                                                                   |
+| Segmented control | `.sb-segmented-control` (alias `.sb-segmented`)                              | `.sb-segment`                                                                                         |
+| Select            | `.sb-select-root` (compound)                                                 | `-label`, `-control`, `-trigger`, `-value-text`, `-indicator`, `-content`, `-list`, `-item`, `-empty` |
+| Select (native)   | `.sb-select-wrap`                                                            | `.sb-select`                                                                                          |
+| Status            | `.sb-status-line`, `.sb-alert`, `.sb-toast`                                  | `-dot`, `-icon`, `.sb-alert-mark`, `.sb-live-region`                                                  |
+| Switch            | `.sb-switch`                                                                 | —                                                                                                     |
+| Table             | `.sb-table-wrap`, `.sb-table`                                                | —                                                                                                     |
+| Tabs              | `.sb-tabs`                                                                   | `.sb-tab`, `.sb-tab-panel`                                                                            |
+| Textarea          | `.sb-textarea`                                                               | —                                                                                                     |
+| Typography        | `.sb-display`, `.sb-heading-1` … `.sb-heading-6`, `.sb-text-*`, `.sb-code-*` | —                                                                                                     |
+
+### Element selectors
+
+These rules style the markup a component renders. Use the listed elements, or
+add a part class where one is available.
+
+| Parent                                                                                    | Elements                     |
+| ----------------------------------------------------------------------------------------- | ---------------------------- |
+| `.sb-alert-dialog-icon`, `.sb-alert-mark`, `.sb-select-indicator`, `.sb-combobox-trigger` | `svg`                        |
+| `.sb-breadcrumb`                                                                          | `a`                          |
+| `.sb-disclosure`, `.sb-menu`                                                              | `summary`                    |
+| `.sb-empty-state`                                                                         | `p`                          |
+| `.sb-status-line`, `.sb-alert`, `.sb-toast`                                               | `strong`, `p`                |
+| `.sb-field`                                                                               | `label`, `legend`, `small`   |
+| `.sb-choice`                                                                              | `span`, `input` (via `:has`) |
+| `.sb-progress`                                                                            | `span`                       |
+| `.sb-table`                                                                               | `th`, `td`, `tbody`, `tr`    |

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "@simple-base/css",
+  "version": "0.1.0",
+  "license": "MIT",
+  "files": [
+    "styles.css",
+    "styles",
+    "styles.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./styles.d.ts",
+      "default": "./styles.css"
+    },
+    "./alert-dialog": {
+      "types": "./styles.d.ts",
+      "default": "./styles/alert-dialog.css"
+    },
+    "./badge": {
+      "types": "./styles.d.ts",
+      "default": "./styles/badge.css"
+    },
+    "./breadcrumb": {
+      "types": "./styles.d.ts",
+      "default": "./styles/breadcrumb.css"
+    },
+    "./button": {
+      "types": "./styles.d.ts",
+      "default": "./styles/button.css"
+    },
+    "./card": {
+      "types": "./styles.d.ts",
+      "default": "./styles/card.css"
+    },
+    "./checkbox": {
+      "types": "./styles.d.ts",
+      "default": "./styles/checkbox.css"
+    },
+    "./combobox": {
+      "types": "./styles.d.ts",
+      "default": "./styles/combobox.css"
+    },
+    "./dialog": {
+      "types": "./styles.d.ts",
+      "default": "./styles/dialog.css"
+    },
+    "./disclosure": {
+      "types": "./styles.d.ts",
+      "default": "./styles/disclosure.css"
+    },
+    "./empty-state": {
+      "types": "./styles.d.ts",
+      "default": "./styles/empty-state.css"
+    },
+    "./field": {
+      "types": "./styles.d.ts",
+      "default": "./styles/field.css"
+    },
+    "./input": {
+      "types": "./styles.d.ts",
+      "default": "./styles/input.css"
+    },
+    "./keyboard-shortcut": {
+      "types": "./styles.d.ts",
+      "default": "./styles/keyboard-shortcut.css"
+    },
+    "./menu": {
+      "types": "./styles.d.ts",
+      "default": "./styles/menu.css"
+    },
+    "./pagination": {
+      "types": "./styles.d.ts",
+      "default": "./styles/pagination.css"
+    },
+    "./progress": {
+      "types": "./styles.d.ts",
+      "default": "./styles/progress.css"
+    },
+    "./radio": {
+      "types": "./styles.d.ts",
+      "default": "./styles/radio.css"
+    },
+    "./range": {
+      "types": "./styles.d.ts",
+      "default": "./styles/range.css"
+    },
+    "./segmented-control": {
+      "types": "./styles.d.ts",
+      "default": "./styles/segmented-control.css"
+    },
+    "./select": {
+      "types": "./styles.d.ts",
+      "default": "./styles/select.css"
+    },
+    "./status": {
+      "types": "./styles.d.ts",
+      "default": "./styles/status.css"
+    },
+    "./switch": {
+      "types": "./styles.d.ts",
+      "default": "./styles/switch.css"
+    },
+    "./table": {
+      "types": "./styles.d.ts",
+      "default": "./styles/table.css"
+    },
+    "./tabs": {
+      "types": "./styles.d.ts",
+      "default": "./styles/tabs.css"
+    },
+    "./textarea": {
+      "types": "./styles.d.ts",
+      "default": "./styles/textarea.css"
+    },
+    "./typography": {
+      "types": "./styles.d.ts",
+      "default": "./styles/typography.css"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@simple-base/tokens": "^0.1.0"
+  }
+}

package/styles/alert-dialog.css

@@ -0,0 +1,112 @@
+@layer sb {
+  .sb-alert-dialog {
+    box-sizing: border-box;
+    width: min(560px, calc(100vw - 40px));
+    max-width: 100%;
+    margin: auto;
+    padding: var(--sb-semantic-space-6);
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
+    border-radius: var(--sb-semantic-radius-lg);
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-raised);
+    box-shadow: var(--sb-semantic-shadow-overlay);
+  }
+
+  .sb-alert-dialog[open] {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--sb-semantic-space-4);
+  }
+
+  .sb-alert-dialog::backdrop {
+    background: var(--sb-semantic-color-overlay-scrim);
+  }
+
+  .sb-alert-dialog-icon {
+    display: grid;
+    place-items: center;
+    width: var(--sb-semantic-space-6);
+    height: var(--sb-semantic-space-6);
+    flex: 0 0 auto;
+    color: var(--sb-semantic-color-status-danger-text);
+    background: var(--sb-semantic-color-status-danger-soft);
+    border-radius: var(--sb-semantic-radius-full);
+  }
+
+  .sb-alert-dialog-icon svg {
+    width: var(--sb-semantic-typography-size-md);
+    height: var(--sb-semantic-typography-size-md);
+  }
+
+  .sb-alert-dialog-content {
+    min-width: 0;
+  }
+
+  .sb-alert-dialog-kicker {
+    margin: 0;
+    color: var(--sb-semantic-color-status-danger-text);
+    font-family: var(--sb-semantic-typography-family-body);
+    font-size: var(--sb-semantic-typography-size-sm);
+    line-height: var(--sb-semantic-typography-line-height-normal);
+  }
+
+  .sb-alert-dialog-title {
+    margin: var(--sb-semantic-space-2) 0 0;
+    color: var(--sb-semantic-color-foreground-primary);
+    font-family: var(--sb-semantic-typography-family-body);
+    font-size: var(--sb-semantic-typography-size-2xl);
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+    line-height: var(--sb-semantic-typography-line-height-snug);
+    letter-spacing: var(--sb-semantic-typography-letter-spacing-normal);
+  }
+
+  .sb-alert-dialog-description {
+    margin: var(--sb-semantic-space-3) 0 0;
+    color: var(--sb-semantic-color-foreground-secondary);
+    font-size: var(--sb-semantic-typography-size-md);
+    line-height: var(--sb-semantic-typography-line-height-relaxed);
+  }
+
+  .sb-alert-dialog-actions {
+    grid-column: 2;
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--sb-semantic-space-3);
+    margin-top: var(--sb-semantic-space-2);
+  }
+
+  .sb-alert-dialog-close {
+    display: inline-grid;
+    place-items: center;
+    width: var(--sb-semantic-size-target-minimum);
+    height: var(--sb-semantic-size-target-minimum);
+    padding: 0;
+    border: 0;
+    border-radius: var(--sb-semantic-radius-sm);
+    color: var(--sb-semantic-color-foreground-muted);
+    background: transparent;
+    font-size: var(--sb-semantic-typography-size-2xl);
+    line-height: var(--sb-semantic-typography-line-height-none);
+  }
+
+  .sb-alert-dialog-close:hover {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-subtle);
+  }
+
+  @media (max-width: 480px) {
+    .sb-alert-dialog[open] {
+      grid-template-columns: 1fr;
+    }
+
+    .sb-alert-dialog-actions {
+      grid-column: 1;
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .sb-alert-dialog-actions > * {
+      width: 100%;
+    }
+  }
+}

package/styles/badge.css

@@ -0,0 +1,100 @@
+@layer sb {
+  .sb-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--sb-semantic-space-6);
+    gap: var(--sb-semantic-space-2);
+    padding: 0 var(--sb-semantic-space-3);
+    border-radius: var(--sb-semantic-radius-full);
+    font-size: var(--sb-semantic-typography-size-xs);
+    font-weight: var(--sb-semantic-typography-weight-semibold);
+    line-height: var(--sb-semantic-typography-line-height-none);
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .sb-badge,
+  .sb-badge[data-variant="default"] {
+    color: var(--sb-semantic-color-foreground-secondary);
+    background: var(--sb-semantic-color-background-overlay);
+    border: var(--sb-semantic-border-width-hairline) solid var(--sb-semantic-color-border-strong);
+  }
+
+  .sb-badge[data-variant="success"] {
+    color: var(--sb-semantic-color-status-success-text);
+    background: var(--sb-semantic-color-status-success-soft);
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-success-base) 48%,
+      var(--sb-semantic-color-border-default)
+    );
+  }
+
+  .sb-badge[data-variant="danger"] {
+    color: var(--sb-semantic-color-status-danger-text);
+    background: var(--sb-semantic-color-status-danger-soft);
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-danger-base) 48%,
+      var(--sb-semantic-color-border-default)
+    );
+  }
+
+  .sb-badge[data-variant="warning"] {
+    color: var(--sb-semantic-color-status-warning-text);
+    background: var(--sb-semantic-color-status-warning-soft);
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-warning-base) 48%,
+      var(--sb-semantic-color-border-default)
+    );
+  }
+
+  .sb-badge[data-variant="info"] {
+    color: var(--sb-semantic-color-status-info-text);
+    background: var(--sb-semantic-color-status-info-soft);
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-status-info-base) 48%,
+      var(--sb-semantic-color-border-default)
+    );
+  }
+
+  .sb-badge[data-variant="accent"] {
+    color: var(--sb-semantic-color-accent-text);
+    background: var(--sb-semantic-color-accent-soft);
+    border-color: color-mix(
+      in oklch,
+      var(--sb-semantic-color-accent-surface) 48%,
+      var(--sb-semantic-color-border-default)
+    );
+  }
+
+  .sb-badge[data-variant="command"] {
+    color: var(--sb-semantic-color-foreground-primary);
+    background: var(--sb-semantic-color-background-overlay);
+  }
+
+  .sb-badge[data-variant="outline"] {
+    color: var(--sb-semantic-color-foreground-secondary);
+    background: transparent;
+    border-color: var(--sb-semantic-color-border-default);
+  }
+
+  .sb-badge[data-variant="muted"] {
+    color: var(--sb-semantic-color-foreground-muted);
+    background: var(--sb-semantic-color-background-subtle);
+    border-color: var(--sb-semantic-color-border-subtle);
+  }
+
+  .sb-badge[data-size="small"] {
+    min-height: var(--sb-semantic-space-5);
+    padding-inline: var(--sb-semantic-space-2);
+  }
+
+  .sb-badge[data-size="medium"] {
+    min-height: var(--sb-semantic-space-6);
+    padding-inline: var(--sb-semantic-space-3);
+  }
+}

package/styles/breadcrumb.css

@@ -0,0 +1,23 @@
+@layer sb {
+  .sb-breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sb-semantic-space-2);
+    color: var(--sb-semantic-color-foreground-muted);
+    font-size: 13px;
+  }
+
+  .sb-breadcrumb a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .sb-breadcrumb a:hover {
+    color: var(--sb-semantic-color-foreground-primary);
+  }
+
+  .sb-breadcrumb-separator {
+    color: var(--sb-semantic-color-border-strong);
+  }
+}