@plus234feed/ds 0.0.0-stage → 0.3.0

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 (15) hide show
  1. package/README.md +168 -2
  2. package/build/tokens-auto.css +68 -0
  3. package/build/tokens.css +283 -0
  4. package/build/tokens.json +1514 -0
  5. package/build/type.css +141 -0
  6. package/package.json +50 -4
  7. package/src/components.css +1391 -0
  8. package/src/fonts/LICENSE.charter.txt +10 -0
  9. package/src/fonts/charter_bold.woff2 +0 -0
  10. package/src/fonts/charter_bold_italic.woff2 +0 -0
  11. package/src/fonts/charter_italic.woff2 +0 -0
  12. package/src/fonts/charter_regular.woff2 +0 -0
  13. package/src/fonts.css +45 -0
  14. package/tokens/core.tokens.json +364 -0
  15. package/tokens/themes/dark.tokens.json +82 -0
package/build/type.css ADDED
@@ -0,0 +1,141 @@
1
+ /* Generated from tokens/. Do not edit by hand: run `npm run build:tokens`. */
2
+
3
+ .p234-display-1 {
4
+ font-family: var(--p234-type-display-1-family);
5
+ font-size: var(--p234-type-display-1-size);
6
+ line-height: var(--p234-type-display-1-leading);
7
+ font-weight: var(--p234-type-display-1-weight);
8
+ letter-spacing: var(--p234-type-display-1-tracking);
9
+ } /* The one dominant story. One per page, never two. */
10
+
11
+ .p234-display-2 {
12
+ font-family: var(--p234-type-display-2-family);
13
+ font-size: var(--p234-type-display-2-size);
14
+ line-height: var(--p234-type-display-2-leading);
15
+ font-weight: var(--p234-type-display-2-weight);
16
+ letter-spacing: var(--p234-type-display-2-tracking);
17
+ } /* Article H1, secondary lead. */
18
+
19
+ .p234-headline {
20
+ font-family: var(--p234-type-headline-family);
21
+ font-size: var(--p234-type-headline-size);
22
+ line-height: var(--p234-type-headline-leading);
23
+ font-weight: var(--p234-type-headline-weight);
24
+ letter-spacing: var(--p234-type-headline-tracking);
25
+ } /* Strong secondary story in a grid. */
26
+
27
+ .p234-headline-sm {
28
+ font-family: var(--p234-type-headline-sm-family);
29
+ font-size: var(--p234-type-headline-sm-size);
30
+ line-height: var(--p234-type-headline-sm-leading);
31
+ font-weight: var(--p234-type-headline-sm-weight);
32
+ letter-spacing: var(--p234-type-headline-sm-tracking);
33
+ } /* Card headline, sidebar lead. */
34
+
35
+ .p234-headline-xs {
36
+ font-family: var(--p234-type-headline-xs-family);
37
+ font-size: var(--p234-type-headline-xs-size);
38
+ line-height: var(--p234-type-headline-xs-leading);
39
+ font-weight: var(--p234-type-headline-xs-weight);
40
+ letter-spacing: var(--p234-type-headline-xs-tracking);
41
+ } /* Compact supporting headline, the stacked list items. */
42
+
43
+ .p234-standfirst {
44
+ font-family: var(--p234-type-standfirst-family);
45
+ font-size: var(--p234-type-standfirst-size);
46
+ line-height: var(--p234-type-standfirst-leading);
47
+ font-weight: var(--p234-type-standfirst-weight);
48
+ letter-spacing: var(--p234-type-standfirst-tracking);
49
+ } /* The deck under a headline. One sentence that says why the story matters. */
50
+
51
+ .p234-body {
52
+ font-family: var(--p234-type-body-family);
53
+ font-size: var(--p234-type-body-size);
54
+ line-height: var(--p234-type-body-leading);
55
+ font-weight: var(--p234-type-body-weight);
56
+ letter-spacing: var(--p234-type-body-tracking);
57
+ } /* Article copy. 18px serif. The floor for running text is 16px anywhere on the site. */
58
+
59
+ .p234-body-sm {
60
+ font-family: var(--p234-type-body-sm-family);
61
+ font-size: var(--p234-type-body-sm-size);
62
+ line-height: var(--p234-type-body-sm-leading);
63
+ font-weight: var(--p234-type-body-sm-weight);
64
+ letter-spacing: var(--p234-type-body-sm-tracking);
65
+ } /* Summary text in cards and rails. 16px, the minimum for running text. */
66
+
67
+ .p234-ui {
68
+ font-family: var(--p234-type-ui-family);
69
+ font-size: var(--p234-type-ui-size);
70
+ line-height: var(--p234-type-ui-leading);
71
+ font-weight: var(--p234-type-ui-weight);
72
+ letter-spacing: var(--p234-type-ui-tracking);
73
+ } /* Navigation, buttons, tabs, form labels. */
74
+
75
+ .p234-ui-sm {
76
+ font-family: var(--p234-type-ui-sm-family);
77
+ font-size: var(--p234-type-ui-sm-size);
78
+ line-height: var(--p234-type-ui-sm-leading);
79
+ font-weight: var(--p234-type-ui-sm-weight);
80
+ letter-spacing: var(--p234-type-ui-sm-tracking);
81
+ } /* Dense controls, filter chips, table headers. */
82
+
83
+ .p234-kicker {
84
+ font-family: var(--p234-type-kicker-family);
85
+ font-size: var(--p234-type-kicker-size);
86
+ line-height: var(--p234-type-kicker-leading);
87
+ font-weight: var(--p234-type-kicker-weight);
88
+ letter-spacing: var(--p234-type-kicker-tracking);
89
+ text-transform: var(--p234-type-kicker-case);
90
+ } /* The section label above a headline. Carries the section colour. */
91
+
92
+ .p234-meta {
93
+ font-family: var(--p234-type-meta-family);
94
+ font-size: var(--p234-type-meta-size);
95
+ line-height: var(--p234-type-meta-leading);
96
+ font-weight: var(--p234-type-meta-weight);
97
+ letter-spacing: var(--p234-type-meta-tracking);
98
+ } /* Source, timestamp, coverage count. Always ink-muted. */
99
+
100
+ .p234-caption {
101
+ font-family: var(--p234-type-caption-family);
102
+ font-size: var(--p234-type-caption-size);
103
+ line-height: var(--p234-type-caption-leading);
104
+ font-weight: var(--p234-type-caption-weight);
105
+ letter-spacing: var(--p234-type-caption-tracking);
106
+ } /* Photo credits and footnotes. The only role allowed below 13px. */
107
+
108
+ .p234-data-lg {
109
+ font-family: var(--p234-type-data-lg-family);
110
+ font-size: var(--p234-type-data-lg-size);
111
+ line-height: var(--p234-type-data-lg-leading);
112
+ font-weight: var(--p234-type-data-lg-weight);
113
+ letter-spacing: var(--p234-type-data-lg-tracking);
114
+ font-variant-numeric: var(--p234-type-data-lg-numeric);
115
+ } /* The headline figure on a price or market page. */
116
+
117
+ .p234-data {
118
+ font-family: var(--p234-type-data-family);
119
+ font-size: var(--p234-type-data-size);
120
+ line-height: var(--p234-type-data-leading);
121
+ font-weight: var(--p234-type-data-weight);
122
+ letter-spacing: var(--p234-type-data-tracking);
123
+ font-variant-numeric: var(--p234-type-data-numeric);
124
+ } /* Figures in tables and tiles. Tabular so columns align. */
125
+
126
+ .p234-data-sm {
127
+ font-family: var(--p234-type-data-sm-family);
128
+ font-size: var(--p234-type-data-sm-size);
129
+ line-height: var(--p234-type-data-sm-leading);
130
+ font-weight: var(--p234-type-data-sm-weight);
131
+ letter-spacing: var(--p234-type-data-sm-tracking);
132
+ font-variant-numeric: var(--p234-type-data-sm-numeric);
133
+ } /* Deltas and units beside a figure. */
134
+
135
+ .p234-quote {
136
+ font-family: var(--p234-type-quote-family);
137
+ font-size: var(--p234-type-quote-size);
138
+ line-height: var(--p234-type-quote-leading);
139
+ font-weight: var(--p234-type-quote-weight);
140
+ letter-spacing: var(--p234-type-quote-tracking);
141
+ } /* Pull quotes and the lead sentence of a brief. */
package/package.json CHANGED
@@ -1,6 +1,52 @@
1
1
  {
2
2
  "name": "@plus234feed/ds",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.3.0",
4
+ "description": "Plus234Feed design system. Editorial tokens, type scale and components for a news intelligence platform: newspaper hierarchy, accessible colour in both themes, one component per job.",
5
+ "keywords": [
6
+ "design-system",
7
+ "design-tokens",
8
+ "editorial",
9
+ "news",
10
+ "nigeria",
11
+ "plus234feed"
12
+ ],
13
+ "license": "UNLICENSED",
14
+ "author": "Abimbola Omoyola",
15
+ "homepage": "https://ds.plus234feed.com",
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "git+https://github.com/Plus234Feed/ds.git"
19
+ },
20
+ "type": "module",
21
+ "style": "./build/tokens.css",
22
+ "exports": {
23
+ "./tokens.css": "./build/tokens.css",
24
+ "./tokens-auto.css": "./build/tokens-auto.css",
25
+ "./type.css": "./build/type.css",
26
+ "./fonts.css": "./src/fonts.css",
27
+ "./fonts/*": "./src/fonts/*",
28
+ "./components.css": "./src/components.css",
29
+ "./tokens.json": "./build/tokens.json",
30
+ "./tokens/*": "./tokens/*",
31
+ "./package.json": "./package.json"
32
+ },
33
+ "files": [
34
+ "build",
35
+ "src",
36
+ "tokens",
37
+ "README.md"
38
+ ],
39
+ "engines": {
40
+ "node": ">=20"
41
+ },
42
+ "scripts": {
43
+ "build:tokens": "node scripts/build-tokens.mjs",
44
+ "build:docs": "node scripts/build-docs.mjs",
45
+ "build": "npm run build:tokens && npm run build:docs",
46
+ "test": "node --test test/*.test.js",
47
+ "check": "npm run build && npm test"
48
+ },
49
+ "publishConfig": {
50
+ "access": "public"
51
+ }
52
+ }