@oneli8/core 1.0.0-beta.7 → 1.0.0-beta.9
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.
- package/README.md +44 -28
- package/ai-context.json +5 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,51 +1,67 @@
|
|
|
1
1
|
# @oneli8/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@oneli8/core)
|
|
4
|
+
[](https://github.com/Akshay007ad/OneLi8-Design-System/blob/main/LICENSE)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
**OneLi8 means One Light.**
|
|
7
|
+
|
|
8
|
+
A design system created by Akshay Dhore, intended for broad human benefit and
|
|
9
|
+
conceived as service to Guruji Shrii Arnav, whose teachings inspire it. Service,
|
|
10
|
+
clarity, harmony, proportion, restraint and evolution guide its decisions.
|
|
11
|
+
|
|
12
|
+
The practical intention is narrower and easier to check. Most design systems
|
|
13
|
+
hand you components and hope you stay inside them. This one hands you the
|
|
14
|
+
reasoning as well, so when you need something it does not ship, you can build it
|
|
15
|
+
and have it still belong. The rules travel inside this package, not in a wiki
|
|
16
|
+
someone forgets to read.
|
|
17
|
+
|
|
18
|
+
This is the framework free build. It runs anywhere HTML is produced as a string:
|
|
19
|
+
Rails, Django, Laravel, Astro, Eleventy, a CMS theme, or hand written markup.
|
|
8
20
|
|
|
9
21
|
```sh
|
|
10
22
|
npm install @oneli8/core
|
|
11
23
|
```
|
|
12
24
|
|
|
13
25
|
```js
|
|
14
|
-
import {
|
|
26
|
+
import { renderMultiSelectField, hydrateMultiSelectFields } from '@oneli8/core';
|
|
15
27
|
import '@oneli8/core/styles.css';
|
|
16
28
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
29
|
+
element.innerHTML = renderMultiSelectField({
|
|
30
|
+
label: 'Skills',
|
|
31
|
+
options: skills,
|
|
32
|
+
values: chosen,
|
|
33
|
+
placeholder: 'Add skill…',
|
|
20
34
|
});
|
|
21
|
-
|
|
22
|
-
hydrateButtons();
|
|
35
|
+
hydrateMultiSelectFields();
|
|
23
36
|
```
|
|
24
37
|
|
|
38
|
+
`render*` returns markup. `hydrate*` wires up only what markup genuinely cannot
|
|
39
|
+
express. Both halves produce the same DOM as `@oneli8/react`, checked on every
|
|
40
|
+
build.
|
|
41
|
+
|
|
25
42
|
## What is included
|
|
26
43
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
| Organism | `Tabs`, `Tab Bar`, `Segmented Control`, `Choice Group`, `Selection Popup`, `Combobox`, `Multi-select Field`, `Choice Picker` |
|
|
32
|
-
| Material | `Gem`, an attribute adapter, not a tier |
|
|
44
|
+
Twenty one components, every one of them drawn from a component set in the Figma
|
|
45
|
+
source rather than invented here. Anything not listed is not exported. Tokens
|
|
46
|
+
exist for families whose implementations are not in this release; a token is not
|
|
47
|
+
a promise of a component.
|
|
33
48
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
Tokens exist for families whose implementations are not in this release; a token
|
|
37
|
-
is not a promise of a component.
|
|
49
|
+
**Atoms** · `Icon` · `Selection Indicator` (checkbox, radio, switch)
|
|
50
|
+
· `Navigation Badge`
|
|
38
51
|
|
|
39
|
-
|
|
52
|
+
**Molecules** · `Button` · `Icon Button` · `Link` · `Text Field` · `Form Message`
|
|
53
|
+
· `Select` · `Choice Item` · `Selection Option` · `Choice Chip` · `Token`
|
|
54
|
+
|
|
55
|
+
**Organisms** · `Tabs` · `Tab Bar` · `Segmented Control` · `Choice Group`
|
|
56
|
+
· `Selection Popup` · `Combobox` · `Multi-select Field` · `Choice Picker`
|
|
40
57
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
decisions. `PRINCIPLES.md` ships inside this package and sets them out in full.
|
|
58
|
+
**Material** · `Gem`, an attribute adapter, not a tier
|
|
59
|
+
|
|
60
|
+
## Why this exists
|
|
45
61
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
62
|
+
`PRINCIPLES.md` ships inside this package and sets out the six values in full,
|
|
63
|
+
along with the three operating laws every component obeys. It is the document to
|
|
64
|
+
read before extending anything.
|
|
49
65
|
|
|
50
66
|
## Naming
|
|
51
67
|
|
package/ai-context.json
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$comment": "GENERATED by packages/sync/src/build-package-context.mjs — do not edit.",
|
|
3
3
|
"system": "OneLi8",
|
|
4
|
-
"version": "1.0.0-beta.
|
|
4
|
+
"version": "1.0.0-beta.9",
|
|
5
5
|
"meaning": "OneLi8 means One Light.",
|
|
6
6
|
"foundations": {
|
|
7
7
|
"package": "@oneli8/tokens",
|
|
8
8
|
"css": "@oneli8/tokens/css",
|
|
9
9
|
"tokenPrefix": "--ol8-",
|
|
10
|
-
"
|
|
10
|
+
"naming": {
|
|
11
|
+
"grammar": "Sanskrit grammar, not a CSS convention. Two rules follow from it and together they explain every name in the system. First, a compound that names ONE thing is written as one word: actionprimary is a single role rather than action plus primary, and cutedge is one feature of the Gem material, so action-primary would suggest two things where there is one. Second, a qualifier stays SEPARATE from what it qualifies: in --ol8-material-control-gem--primary-hover-start, hover is a state applied to start, two grammatical roles, so they stay apart. That is why disabledcontent is joined while hover-start is not. Hyphens separate levels of the hierarchy, never words inside a level. Words stay readable: no abbreviations, no truncation, no btn where button will do.",
|
|
12
|
+
"authority": "Figma is the authority on the result. Every variable there carries an explicit codeSyntax, copied verbatim into packages/tokens/src/figma-code-syntax.txt. Read a name from that record rather than re-deriving it from the grammar, because the file is not perfectly regular between siblings and guessing is how code and design drifted apart before. The grammar is the rule; the record is the spelling."
|
|
13
|
+
},
|
|
11
14
|
"rules": [
|
|
12
15
|
"Components consume SEMANTIC roles only. Primitives (color-<family>-<step>) are hidden from pickers in Figma and must not appear in component code.",
|
|
13
16
|
"color-primary-* is an alias ramp onto color-blue-* — identical values, distinct names. Prefer the semantic role over either.",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneli8/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.9",
|
|
4
4
|
"description": "OneLi8 Design System, framework agnostic. renderX returns an HTML string, hydrateX wires existing DOM. Ships the design language and the rules it follows.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"NOTICE"
|
|
90
90
|
],
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@oneli8/tokens": "1.0.0-beta.
|
|
92
|
+
"@oneli8/tokens": "1.0.0-beta.9"
|
|
93
93
|
},
|
|
94
94
|
"engines": {
|
|
95
95
|
"node": ">=20"
|