@simple-base/css 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +66 -62
  2. package/package.json +7 -2
package/README.md CHANGED
@@ -1,100 +1,93 @@
1
1
  # @simple-base/css
2
2
 
3
- Simple Base component styles and typography.
3
+ Component styles and typography for Simple Base. Plain CSS, no build step, no runtime — the selectors are the API.
4
4
 
5
- Styles cover components and their internal parts, including functional wrappers
6
- such as select arrows and scrollable tables. Page layouts, component galleries,
7
- and external grouping or showcase helpers belong in the consuming application.
5
+ Styles cover components and their internal parts, including functional wrappers such as select arrows and scrollable tables. Page layouts, component galleries, and showcase helpers belong in your application.
8
6
 
9
- ## Visual defaults
7
+ ## Install
10
8
 
11
- - Use `.sb-heading-1` through `.sb-heading-6` for utility headings: sans serif,
12
- sized 32, 24, 20, 18, 16, and 14px. Reserve `.sb-display` for an intentional
13
- expressive serif heading, not routine page sections or dialogs.
14
- - Write captions, table headings, and optional dialog kickers in sentence case.
15
- Monospace is for code, identifiers, shortcuts, and alignment-dependent values;
16
- omit eyebrows that repeat the heading or add no context.
17
- - Cards group content through surfaces and borders, without default elevation.
18
- Menus and dialogs use restrained shadows, lighter in light themes. Modal
19
- backdrops separate context with a scrim, not blur.
20
- - Generic dialog kickers are neutral. Danger styling belongs to destructive
21
- confirmations, not ordinary settings or editing dialogs.
22
- - Buttons stay in place on hover and press. Color and border changes provide
23
- feedback; focus rings remain visible.
9
+ ```sh
10
+ pnpm add @simple-base/css
11
+ ```
24
12
 
25
- ## All styles
13
+ ## Quick start
26
14
 
27
- Import the stylesheet for its side effects through a CSS-aware bundler:
15
+ The package root includes the tokens and every component stylesheet. Import it once for its side effects:
28
16
 
29
17
  ```ts
30
18
  import "@simple-base/css";
31
19
  ```
32
20
 
33
- Or import it from CSS:
21
+ Or from CSS:
34
22
 
35
23
  ```css
36
24
  @import "@simple-base/css";
37
25
  ```
38
26
 
39
- The package root includes the token stylesheet. Stylesheet imports do not export
40
- a JavaScript value or CSS string.
41
-
42
- ## Individual stylesheets
27
+ Neither form exports a JavaScript value or a CSS string — the import exists for its side effects.
43
28
 
44
- Load tokens once, then select the component styles you need:
29
+ To load only what you use, import the tokens first and then the components you need:
45
30
 
46
31
  ```css
47
32
  @import "@simple-base/tokens/css";
48
33
  @import "@simple-base/css/button";
49
34
  @import "@simple-base/css/badge";
35
+ @import "@simple-base/css/table";
50
36
  ```
51
37
 
52
- Individual stylesheets use explicit, extensionless exports such as `/button`,
53
- `/badge`, `/alert-dialog`, and `/typography`. The internal `styles/` directory and
54
- `.css` filenames are not public import paths. These exports also support
55
- side-effect imports in TypeScript:
38
+ Then apply the root class and configuration attributes:
56
39
 
57
- ```ts
58
- import "@simple-base/css/button";
40
+ ```html
41
+ <button class="sb-button" data-variant="primary" data-size="medium">Save</button>
42
+ <span class="sb-badge" data-variant="success" data-size="small">Active</span>
59
43
  ```
60
44
 
61
- ## Selector API
45
+ ## Theming
62
46
 
63
- The selectors are the public API of this package. Component roots and parts are
64
- classes; configuration and state are attributes, never modifier classes.
47
+ Colors come from [@simple-base/tokens](https://www.npmjs.com/package/@simple-base/tokens), which ships nine themes. Set `data-theme` on the root or on any nested region:
65
48
 
66
- ### Cascade layer
49
+ ```html
50
+ <html data-theme="nord"></html>
51
+ ```
52
+
53
+ ## Cascade layer
67
54
 
68
- Every rule is wrapped in the `sb` cascade layer and declared before the imports:
55
+ Every rule lives in the `sb` cascade layer, declared before the imports:
69
56
 
70
57
  ```css
71
58
  @layer sb;
72
59
  ```
73
60
 
74
- Because the library is layered, any unlayered CSS in the consuming app wins over
75
- it regardless of specificity, so overrides do not need `!important`:
61
+ Because the library is layered, any unlayered CSS in your application wins over it regardless of specificity — no `!important` needed:
76
62
 
77
63
  ```css
78
- /* app styles, unlayered */
64
+ /* application styles, unlayered */
79
65
  .sb-button {
80
66
  border-radius: 0;
81
67
  }
82
68
  ```
83
69
 
84
- Note on order: if a layered framework such as Tailwind CSS is imported _before_
85
- this package, the `sb` layer is declared after the framework layers and wins on
86
- ties. Import this package first if framework utilities need the higher priority.
70
+ Order matters with other layered frameworks: if you import a layered framework such as Tailwind CSS **before** this package, the `sb` layer is declared after the framework's layers and wins ties. Import this package first when framework utilities should take priority.
71
+
72
+ ## Individual stylesheets
73
+
74
+ Each entry point is an explicit, extensionless subpath. The internal `styles/` directory and `.css` filenames are not public import paths.
75
+
76
+ `alert-dialog` · `badge` · `breadcrumb` · `button` · `card` · `checkbox` · `combobox` · `dialog` · `disclosure` · `empty-state` · `field` · `input` · `keyboard-shortcut` · `menu` · `pagination` · `progress` · `radio` · `range` · `segmented-control` · `select` · `status` · `switch` · `table` · `tabs` · `textarea` · `typography`
77
+
78
+ ## Design conventions
79
+
80
+ - 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.
81
+ - Write captions, table headings, and optional dialog kickers in sentence case. Monospace is for code, identifiers, shortcuts, and alignment-dependent values.
82
+ - Cards group content with surfaces and borders, without default elevation. Menus and dialogs use restrained shadows. Modal backdrops separate context with a scrim, not blur.
83
+ - Buttons stay in place on hover and press. Color and border changes provide feedback; focus rings remain visible.
87
84
 
88
- ### Conventions
85
+ ## Selector conventions
89
86
 
90
87
  - `.sb-<component>` is the required root class.
91
88
  - `.sb-<component>-<part>` is a part of that component.
92
- - Configuration uses `data-*` attributes; state uses `data-*`, `aria-*`, or
93
- native pseudo-classes (`:checked`, `:disabled`, `:hover`, `:focus-visible`,
94
- `[open]`).
95
- - Element selectors are only used as descendants of a root class, to style the
96
- structure a component renders. They are not standalone hooks and imply the
97
- markup contract listed below.
89
+ - Configuration uses `data-*` attributes; state uses `data-*`, `aria-*`, or native pseudo-classes (`:checked`, `:disabled`, `:hover`, `:focus-visible`, `[open]`).
90
+ - Element selectors only appear as descendants of a root class, to style the structure a component renders. They are not standalone hooks.
98
91
 
99
92
  ### Variants and options
100
93
 
@@ -111,16 +104,18 @@ ties. Import this package first if framework utilities need the higher priority.
111
104
 
112
105
  ### State attributes
113
106
 
114
- - `[aria-invalid="true"]` — `.sb-input`, `.sb-textarea`.
115
- - `[data-invalid]` — `.sb-select-control`, `.sb-combobox-control`, `.sb-field-help`.
116
- - `[aria-selected="true"]` — `.sb-tab`, and `.sb-table tbody tr`.
117
- - `[aria-pressed="true"]` — `.sb-segment`.
118
- - `[aria-current="page"]` — `.sb-page-button`.
119
- - `[aria-disabled="true"]`, `:disabled` — `.sb-button`, `.sb-select`, form controls.
120
- - `[data-state="open"]` — `.sb-select-trigger`, `.sb-combobox-trigger`.
121
- - `[data-highlighted]` — `.sb-select-item`, `.sb-combobox-item`.
122
- - `[data-placeholder-shown]`, `[data-required]` — `.sb-select`, `.sb-combobox`.
123
- - `[open]` — `.sb-dialog`, `.sb-alert-dialog`, `.sb-disclosure`, `.sb-menu`.
107
+ | Selector | Applies to |
108
+ | --------------------------------------------- | -------------------------------------------------------------- |
109
+ | `[aria-invalid="true"]` | `.sb-input`, `.sb-textarea` |
110
+ | `[data-invalid]` | `.sb-select-control`, `.sb-combobox-control`, `.sb-field-help` |
111
+ | `[aria-selected="true"]` | `.sb-tab`, `.sb-table tbody tr` |
112
+ | `[aria-pressed="true"]` | `.sb-segment` |
113
+ | `[aria-current="page"]` | `.sb-page-button` |
114
+ | `[aria-disabled="true"]`, `:disabled` | `.sb-button`, `.sb-select`, form controls |
115
+ | `[data-state="open"]` | `.sb-select-trigger`, `.sb-combobox-trigger` |
116
+ | `[data-highlighted]` | `.sb-select-item`, `.sb-combobox-item` |
117
+ | `[data-placeholder-shown]`, `[data-required]` | `.sb-select`, `.sb-combobox` |
118
+ | `[open]` | `.sb-dialog`, `.sb-alert-dialog`, `.sb-disclosure`, `.sb-menu` |
124
119
 
125
120
  ### Component reference
126
121
 
@@ -156,8 +151,7 @@ ties. Import this package first if framework utilities need the higher priority.
156
151
 
157
152
  ### Element selectors
158
153
 
159
- These rules style the markup a component renders. Use the listed elements, or
160
- add a part class where one is available.
154
+ These rules style the markup a component renders. Use the listed elements, or add a part class where one is available.
161
155
 
162
156
  | Parent | Elements |
163
157
  | ----------------------------------------------------------------------------------------- | ---------------------------- |
@@ -170,3 +164,13 @@ add a part class where one is available.
170
164
  | `.sb-choice` | `span`, `input` (via `:has`) |
171
165
  | `.sb-progress` | `span` |
172
166
  | `.sb-table` | `th`, `td`, `tbody`, `tr` |
167
+
168
+ ## Links
169
+
170
+ - [Repository](https://github.com/redasalmi/simple-base)
171
+ - [Design tokens](https://www.npmjs.com/package/@simple-base/tokens)
172
+ - [Solid components](https://www.npmjs.com/package/@simple-base/solid)
173
+
174
+ ## License
175
+
176
+ [MIT](https://github.com/redasalmi/simple-base/blob/main/LICENSE)
package/package.json CHANGED
@@ -1,7 +1,12 @@
1
1
  {
2
2
  "name": "@simple-base/css",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "license": "MIT",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "git+https://github.com/redasalmi/simple-base.git",
8
+ "directory": "packages/css"
9
+ },
5
10
  "files": [
6
11
  "styles.css",
7
12
  "styles",
@@ -122,6 +127,6 @@
122
127
  "registry": "https://registry.npmjs.org/"
123
128
  },
124
129
  "dependencies": {
125
- "@simple-base/tokens": "^0.1.0"
130
+ "@simple-base/tokens": "^0.1.1"
126
131
  }
127
132
  }