@ascribed/elements 0.2.1-next.10 → 0.2.1-next.11

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 (4) hide show
  1. package/CONTRACT.md +1 -1
  2. package/README.md +7 -0
  3. package/css/style.css +89 -64
  4. package/package.json +2 -2
package/CONTRACT.md CHANGED
@@ -16,7 +16,7 @@ A change to this contract changes the site emitter (`crates/ascribe-emit`), the
16
16
 
17
17
  ## 0. Rules for every element
18
18
 
19
- **Light DOM, CSS, no behavior.** Elements render into the light DOM, so site styles apply and content stays visible to search engines and assistive technology (SPEC §9.7). They're styled with CSS and themed with custom properties whose names start with `--ascribe-`; the package README lists them. Only `<ascribe-tabs>` runs JavaScript. Everything else must render meaningfully with the library's CSS and no script, and must stay readable with neither.
19
+ **Light DOM, CSS, no behavior.** Elements render into the light DOM, so site styles apply and content stays visible to search engines and assistive technology (SPEC §9.7). They're styled with CSS and themed with custom properties whose names start with `--ascribe-`; the package README lists them. The names are part of this contract; their default values aren't, and a release may change them, noting it in the changelog. Only `<ascribe-tabs>` runs JavaScript. Everything else must render meaningfully with the library's CSS and no script, and must stay readable with neither.
20
20
 
21
21
  **How the emitter writes elements.** Custom elements are raw HTML blocks in CommonMark, so the layout matters:
22
22
 
package/README.md CHANGED
@@ -29,6 +29,12 @@ directly.
29
29
  Set any of these custom properties on `:root`, or on any ancestor of the
30
30
  elements. Defaults are in `css/style.css`.
31
31
 
32
+ The names are part of the [contract](CONTRACT.md) and don't change. The
33
+ default values are Ascribe's design tokens, shared with review and the HTML
34
+ report, and a release may change them; the changelog says so under **Behavior
35
+ change**, with the previous values. A site that needs a fixed look sets the
36
+ properties itself.
37
+
32
38
  | Group | Properties |
33
39
  |---|---|
34
40
  | Type | `--ascribe-font-family`, `--ascribe-font-size-small`, `--ascribe-font-weight-strong` |
@@ -108,6 +114,7 @@ ascribe-availability::before {
108
114
  `pnpm --filter @ascribed/elements test` compiles the library and drives Chromium
109
115
  through Playwright in Chromium, Firefox, and WebKit. Install them with
110
116
  `pnpm --filter @ascribed/elements exec playwright-core install chromium firefox webkit`.
117
+ CI runs them in Playwright's container image, which has all three.
111
118
  Chromium uses `/opt/pw-browsers/chromium` when present, or the binary in
112
119
  `ASCRIBE_CHROMIUM`. `ASCRIBE_ENGINES=chromium` (a comma-separated subset) runs
113
120
  fewer engines on a machine that can't install all three.
package/css/style.css CHANGED
@@ -19,53 +19,65 @@
19
19
  --ascribe-font-weight-strong: 600;
20
20
 
21
21
  /* Spacing, borders */
22
+ --ascribe-border-width: 1px;
23
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: spacing, light. */
22
24
  --ascribe-space: 1rem;
23
25
  --ascribe-space-small: 0.5rem;
24
- --ascribe-border-width: 1px;
25
- --ascribe-border-color: #d0d7de;
26
+ --ascribe-border-color: #e3e6ec;
26
27
  --ascribe-radius: 0.375rem;
28
+ /* End of generated spacing. */
27
29
 
28
30
  /* Surfaces and text */
29
31
  --ascribe-text-color: inherit;
30
- --ascribe-muted-color: #57606a;
31
32
  --ascribe-surface-color: transparent;
33
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: text, light. */
34
+ --ascribe-muted-color: #676c75;
35
+ /* End of generated text. */
32
36
 
33
37
  /* Note types: an accent color and a tinted background each. */
34
- --ascribe-note-color: #0969da;
35
- --ascribe-note-background: #ddf4ff;
36
- --ascribe-tip-color: #1a7f37;
37
- --ascribe-tip-background: #dafbe1;
38
- --ascribe-important-color: #8250df;
39
- --ascribe-important-background: #fbefff;
40
- --ascribe-warning-color: #9a6700;
41
- --ascribe-warning-background: #fff8c5;
42
- --ascribe-caution-color: #cf222e;
43
- --ascribe-caution-background: #ffebe9;
38
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: notes, light. */
39
+ --ascribe-note-color: #474dc6;
40
+ --ascribe-note-background: #f5f6fe;
41
+ --ascribe-tip-color: #057256;
42
+ --ascribe-tip-background: #e1fff2;
43
+ --ascribe-important-color: #932f8e;
44
+ --ascribe-important-background: #fff2fd;
45
+ --ascribe-warning-color: #845502;
46
+ --ascribe-warning-background: #fef5eb;
47
+ --ascribe-caution-color: #a73303;
48
+ --ascribe-caution-background: #fef4f1;
49
+ /* End of generated notes. */
44
50
 
45
51
  /* Steps */
46
- --ascribe-steps-color: #0969da;
47
52
  --ascribe-steps-marker-size: 1.75rem;
53
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: steps, light. */
54
+ --ascribe-steps-color: #5962e8;
48
55
  --ascribe-steps-marker-text-color: #ffffff;
56
+ /* End of generated steps. */
49
57
 
50
58
  /* Tabs */
51
- --ascribe-tab-color: #57606a;
52
- --ascribe-tab-active-color: #0969da;
53
- --ascribe-tab-focus-color: #0969da;
54
- --ascribe-tab-hover-background: #f6f8fa;
59
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: tabs, light. */
60
+ --ascribe-tab-color: #676c75;
61
+ --ascribe-tab-active-color: #5962e8;
62
+ --ascribe-tab-focus-color: #5962e8;
63
+ --ascribe-tab-hover-background: #f7f9fd;
64
+ /* End of generated tabs. */
55
65
 
56
66
  /* Availability lifecycle states: an accent color and a background each. */
57
- --ascribe-state-color: #57606a;
58
- --ascribe-state-background: #eaeef2;
59
- --ascribe-state-ga-color: #1a7f37;
60
- --ascribe-state-ga-background: #dafbe1;
61
- --ascribe-state-preview-color: #8250df;
62
- --ascribe-state-preview-background: #fbefff;
63
- --ascribe-state-beta-color: #0969da;
64
- --ascribe-state-beta-background: #ddf4ff;
65
- --ascribe-state-deprecated-color: #9a6700;
66
- --ascribe-state-deprecated-background: #fff8c5;
67
- --ascribe-state-removed-color: #cf222e;
68
- --ascribe-state-removed-background: #ffebe9;
67
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: states, light. */
68
+ --ascribe-state-color: #676c75;
69
+ --ascribe-state-background: #f0f3f7;
70
+ --ascribe-state-ga-color: #057256;
71
+ --ascribe-state-ga-background: #e1fff2;
72
+ --ascribe-state-preview-color: #932f8e;
73
+ --ascribe-state-preview-background: #fff2fd;
74
+ --ascribe-state-beta-color: #474dc6;
75
+ --ascribe-state-beta-background: #f5f6fe;
76
+ --ascribe-state-deprecated-color: #845502;
77
+ --ascribe-state-deprecated-background: #fef5eb;
78
+ --ascribe-state-removed-color: #a73303;
79
+ --ascribe-state-removed-background: #fef4f1;
80
+ /* End of generated states. */
69
81
  }
70
82
 
71
83
  /* The same colors, light and dark. `light-dark()` picks by the element's
@@ -73,40 +85,53 @@
73
85
  `light-dark()` keeps the light colors above. */
74
86
  @supports (color: light-dark(#000, #fff)) {
75
87
  :root {
76
- --ascribe-border-color: light-dark(#d0d7de, #3d444d);
77
- --ascribe-muted-color: light-dark(#57606a, #9198a1);
78
-
79
- --ascribe-note-color: light-dark(#0969da, #4493f8);
80
- --ascribe-note-background: light-dark(#ddf4ff, #121d2f);
81
- --ascribe-tip-color: light-dark(#1a7f37, #3fb950);
82
- --ascribe-tip-background: light-dark(#dafbe1, #12261e);
83
- --ascribe-important-color: light-dark(#8250df, #ab7df8);
84
- --ascribe-important-background: light-dark(#fbefff, #1f1a33);
85
- --ascribe-warning-color: light-dark(#9a6700, #d29922);
86
- --ascribe-warning-background: light-dark(#fff8c5, #272115);
87
- --ascribe-caution-color: light-dark(#cf222e, #f85149);
88
- --ascribe-caution-background: light-dark(#ffebe9, #2d1517);
89
-
90
- --ascribe-steps-color: light-dark(#0969da, #4493f8);
91
- --ascribe-steps-marker-text-color: light-dark(#ffffff, #0d1117);
92
-
93
- --ascribe-tab-color: light-dark(#57606a, #9198a1);
94
- --ascribe-tab-active-color: light-dark(#0969da, #4493f8);
95
- --ascribe-tab-focus-color: light-dark(#0969da, #4493f8);
96
- --ascribe-tab-hover-background: light-dark(#f6f8fa, #151b23);
97
-
98
- --ascribe-state-color: light-dark(#57606a, #9198a1);
99
- --ascribe-state-background: light-dark(#eaeef2, #212830);
100
- --ascribe-state-ga-color: light-dark(#1a7f37, #3fb950);
101
- --ascribe-state-ga-background: light-dark(#dafbe1, #12261e);
102
- --ascribe-state-preview-color: light-dark(#8250df, #ab7df8);
103
- --ascribe-state-preview-background: light-dark(#fbefff, #1f1a33);
104
- --ascribe-state-beta-color: light-dark(#0969da, #4493f8);
105
- --ascribe-state-beta-background: light-dark(#ddf4ff, #121d2f);
106
- --ascribe-state-deprecated-color: light-dark(#9a6700, #d29922);
107
- --ascribe-state-deprecated-background: light-dark(#fff8c5, #272115);
108
- --ascribe-state-removed-color: light-dark(#cf222e, #f85149);
109
- --ascribe-state-removed-background: light-dark(#ffebe9, #2d1517);
88
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: spacing, light-dark. */
89
+ --ascribe-border-color: light-dark(#e3e6ec, #393d46);
90
+ /* End of generated spacing. */
91
+
92
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: text, light-dark. */
93
+ --ascribe-muted-color: light-dark(#676c75, #a5a9b2);
94
+ /* End of generated text. */
95
+
96
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: notes, light-dark. */
97
+ --ascribe-note-color: light-dark(#474dc6, #91a1fe);
98
+ --ascribe-note-background: light-dark(#f5f6fe, #161b3a);
99
+ --ascribe-tip-color: light-dark(#057256, #22c598);
100
+ --ascribe-tip-background: light-dark(#e1fff2, #02251a);
101
+ --ascribe-important-color: light-dark(#932f8e, #ffc8f9);
102
+ --ascribe-important-background: light-dark(#fff2fd, #2d132b);
103
+ --ascribe-warning-color: light-dark(#845502, #e0992e);
104
+ --ascribe-warning-background: light-dark(#fef5eb, #2b1a03);
105
+ --ascribe-caution-color: light-dark(#a73303, #fe7f57);
106
+ --ascribe-caution-background: light-dark(#fef4f1, #341308);
107
+ /* End of generated notes. */
108
+
109
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: steps, light-dark. */
110
+ --ascribe-steps-color: light-dark(#5962e8, #91a1fe);
111
+ --ascribe-steps-marker-text-color: light-dark(#ffffff, #0c0f16);
112
+ /* End of generated steps. */
113
+
114
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: tabs, light-dark. */
115
+ --ascribe-tab-color: light-dark(#676c75, #a5a9b2);
116
+ --ascribe-tab-active-color: light-dark(#5962e8, #91a1fe);
117
+ --ascribe-tab-focus-color: light-dark(#5962e8, #b3c0ff);
118
+ --ascribe-tab-hover-background: light-dark(#f7f9fd, #13171f);
119
+ /* End of generated tabs. */
120
+
121
+ /* Generated from design/tokens.toml by scripts/design/tokens.ts: states, light-dark. */
122
+ --ascribe-state-color: light-dark(#676c75, #a5a9b2);
123
+ --ascribe-state-background: light-dark(#f0f3f7, #22272e);
124
+ --ascribe-state-ga-color: light-dark(#057256, #22c598);
125
+ --ascribe-state-ga-background: light-dark(#e1fff2, #02251a);
126
+ --ascribe-state-preview-color: light-dark(#932f8e, #ffc8f9);
127
+ --ascribe-state-preview-background: light-dark(#fff2fd, #2d132b);
128
+ --ascribe-state-beta-color: light-dark(#474dc6, #91a1fe);
129
+ --ascribe-state-beta-background: light-dark(#f5f6fe, #161b3a);
130
+ --ascribe-state-deprecated-color: light-dark(#845502, #e0992e);
131
+ --ascribe-state-deprecated-background: light-dark(#fef5eb, #2b1a03);
132
+ --ascribe-state-removed-color: light-dark(#a73303, #fe7f57);
133
+ --ascribe-state-removed-background: light-dark(#fef4f1, #341308);
134
+ /* End of generated states. */
110
135
  }
111
136
 
112
137
  /* A page that says which it is. */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ascribed/elements",
3
- "version": "0.2.1-next.10",
3
+ "version": "0.2.1-next.11",
4
4
  "description": "Ascribe's web component library for the site output.",
5
5
  "type": "module",
6
6
  "license": "MPL-2.0",
@@ -36,7 +36,7 @@
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "737a7e8afe84147602ddbe83628c1d4dfcddaf90",
39
+ "gitHead": "dd64394135ff782efb8db030c81ac3b38e0f92c5",
40
40
  "scripts": {
41
41
  "build": "tsc -p tsconfig.build.json",
42
42
  "typecheck": "tsc --noEmit",