@zenit-hosting/zenit-ui 0.1.0 → 0.2.1

package/llms-full.txt

@@ -1,6 +1,6 @@
 # zenit-ui — complete reference
 
-> Version 0.1.0. Everything needed to use this library correctly, with no other file and
+> Version 0.2.1. Everything needed to use this library correctly, with no other file and
 > no access to its sources. Generated from the sources; do not edit by hand.
 
 ## Contents
@@ -76,12 +76,14 @@ is no `NgModule` and no `forRoot`.
 
 ## 3. Setup
 
-1. **Install.** The package is not on npm; it is installed from the tarball built by
-   `npm pack` inside `dist/zenit-ui`:
+1. **Install.** The package is `@zenit-hosting/zenit-ui` on npmjs.org. Install it under the
+   alias `zenit-ui`, so imports and stylesheet paths stay `zenit-ui`:
    ```bash
-   npm i ./zenit-ui-0.1.0.tgz
+   npm install zenit-ui@npm:@zenit-hosting/zenit-ui@^0.2.1
    ```
-   `ng add ./zenit-ui-0.1.0.tgz --themes` performs steps 2 to 6 automatically.
+   Never `npm i zenit-ui` or `ng add zenit-ui`: the unscoped name belongs to somebody else.
+   `ng generate zenit-ui:ng-add --themes` then performs steps 2 to 6 automatically (not
+   `ng add`, which would add the package a second time without the alias).
 
 2. **Register the stylesheets** in `angular.json` (`projects.<app>.architect.build.options.styles`)
    or via `@import` in your entry stylesheet. The order is binding:
@@ -158,7 +160,7 @@ is no `NgModule` and no `forRoot`.
           the first paint; ZTheme only gets to it after bootstrap, a few frames late.
           Generated, not written: a test in projects/zenit-ui/schematics compares it. -->
      <!-- prettier-ignore -->
-     <script>(function(k,S,A,ds,da){var s=ds,a=da,d=document.documentElement,m=function(q,f){try{return matchMedia(q).matches}catch(e){return f}};try{var v=JSON.parse((k&&localStorage.getItem(k))||'null');if(v&&typeof v==='object'){if(v.scheme==='system'||S.indexOf(v.scheme)>-1)s=v.scheme;if(A.indexOf(v.accent)>-1)a=v.accent}}catch(e){}if(s==='system')s=S.indexOf('contrast')>-1&&m('(prefers-contrast: more)',false)?'contrast':m('(prefers-color-scheme: dark)',true)?'dark':'light';d.setAttribute('data-theme',s);if(a!==da)d.setAttribute('data-accent',a)})("zenit-theme",["dark","light","contrast"],["rot","blau","gruen","violett"],"system","rot")</script>
+     <script>(function(k,S,A,ds,da){var s=ds,a=da,d=document.documentElement,m=function(q,f){try{return matchMedia(q).matches}catch(e){return f}};try{var v=JSON.parse((k&&localStorage.getItem(k))||'null');if(v&&typeof v==='object'){if(v.scheme==='system'||S.indexOf(v.scheme)>-1)s=v.scheme;if(A.indexOf(v.accent)>-1)a=v.accent}}catch(e){}if(s==='system')s=S.indexOf('contrast')>-1&&m('(prefers-contrast: more)',false)?'contrast':m('(prefers-color-scheme: dark)',true)?'dark':'light';d.setAttribute('data-theme',s);if(a!==da)d.setAttribute('data-accent',a)})("zenit-theme",["dark","light","contrast"],["rot","blau","gruen","violett","indigo","orange","rose","schwarz"],"system","rot")</script>
      <title>Gameserver · Zenit-Hosting Beispiel</title>
      <base href="/" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -4136,7 +4138,7 @@ The stylesheet has to block rendering as well. The Angular CLI inlines
 "critical" CSS and loads the rest late; `[data-theme="light"]` is never
 critical, because nothing in `index.html` matches it. Set
 `optimization.styles.inlineCritical` to `false` in the `production`
-configuration of the build target; `ng add zenit-ui --themes` writes both
+configuration of the build target; `ng generate zenit-ui:ng-add --themes` writes both
 the script and that setting.
 
 With a Content Security Policy the returned string is what you hash
@@ -4494,7 +4496,7 @@ Configuration of `provideZenitTheme`. Every field is optional; the defaults matc
 | Field | Type | Default | Description |
 | --- | --- | --- | --- |
 | `schemes?` | `readonly string[]` | `['dark', 'light', 'contrast']` | Ids of the selectable colour schemes. Each id is written to the target as `data-theme="<id>"` and needs a matching CSS block; the ids shipped with the library are `dark`, `light` and `contrast`. Own ids are allowed and are validated against exactly this list. (from ZThemeInitConfig) |
-| `accents?` | `readonly string[]` | `['rot', 'blau', 'gruen', 'violett']` | Ids of the selectable accents, written as `data-accent="<id>"`. The entry named by `defaultAccent` carries no attribute, because the default accent already lives in `tokens.css` and in the scheme blocks. (from ZThemeInitConfig) |
+| `accents?` | `readonly string[]` | `['rot', 'blau', 'gruen', 'violett', 'indigo', 'orange', 'rose', 'schwarz']` | Ids of the selectable accents, written as `data-accent="<id>"`. The entry named by `defaultAccent` carries no attribute, because the default accent already lives in `tokens.css` and in the scheme blocks. (from ZThemeInitConfig) |
 | `defaultScheme?` | `string` | `'dark'` | Scheme before the first choice of the user. Either one of `schemes` or `'system'`, which follows the operating system: `contrast` while `prefers-contrast: more` matches and `contrast` is one of `schemes`, otherwise `dark` or `light` after `prefers-color-scheme`. (from ZThemeInitConfig) |
 | `defaultAccent?` | `string` | `'rot'` | Accent before the first choice of the user. It has to be one of `accents` and gets no `data-accent` attribute. (from ZThemeInitConfig) |
 | `storageKey?` | `string \| null` | `'zenit-theme'` | Key under which the choice is stored in `localStorage`. `null` turns the storage off: nothing is read or written, and `ZTheme` starts from the `data-theme` and `data-accent` that are already on the target, which is how an application with its own preference storage hands its choice over. Without such attributes the theme starts from the defaults on every load. The init script does not look at them, it always writes the defaults. (from ZThemeInitConfig) |
@@ -4519,7 +4521,7 @@ The part of the theme configuration that decides which attributes end up on the
 | Field | Type | Default | Description |
 | --- | --- | --- | --- |
 | `schemes?` | `readonly string[]` | `['dark', 'light', 'contrast']` | Ids of the selectable colour schemes. Each id is written to the target as `data-theme="<id>"` and needs a matching CSS block; the ids shipped with the library are `dark`, `light` and `contrast`. Own ids are allowed and are validated against exactly this list. |
-| `accents?` | `readonly string[]` | `['rot', 'blau', 'gruen', 'violett']` | Ids of the selectable accents, written as `data-accent="<id>"`. The entry named by `defaultAccent` carries no attribute, because the default accent already lives in `tokens.css` and in the scheme blocks. |
+| `accents?` | `readonly string[]` | `['rot', 'blau', 'gruen', 'violett', 'indigo', 'orange', 'rose', 'schwarz']` | Ids of the selectable accents, written as `data-accent="<id>"`. The entry named by `defaultAccent` carries no attribute, because the default accent already lives in `tokens.css` and in the scheme blocks. |
 | `defaultScheme?` | `string` | `'dark'` | Scheme before the first choice of the user. Either one of `schemes` or `'system'`, which follows the operating system: `contrast` while `prefers-contrast: more` matches and `contrast` is one of `schemes`, otherwise `dark` or `light` after `prefers-color-scheme`. |
 | `defaultAccent?` | `string` | `'rot'` | Accent before the first choice of the user. It has to be one of `accents` and gets no `data-accent` attribute. |
 | `storageKey?` | `string \| null` | `'zenit-theme'` | Key under which the choice is stored in `localStorage`. `null` turns the storage off: nothing is read or written, and `ZTheme` starts from the `data-theme` and `data-accent` that are already on the target, which is how an application with its own preference storage hands its choice over. Without such attributes the theme starts from the defaults on every load. The init script does not look at them, it always writes the defaults. |

package/llms.txt

@@ -1,6 +1,6 @@
 # zenit-ui
 
-> Component library 0.1.0 for Angular 22 of the Zenit design system:
+> Component library 0.2.1 for Angular 22 of the Zenit design system:
 > 84 standalone components and directives, dark by default, token-driven,
 > `@angular/cdk` for overlays and no Angular Material anywhere. This file is the index;
 > `llms-full.txt` next to it is the complete reference and needs no other file.
@@ -42,7 +42,8 @@ Business logic, routes and copy stay in your application.
 
 ## Setup in 6 steps
 
-1. `npm i ./zenit-ui-0.1.0.tgz` (the package is not on npm). `ng add ./zenit-ui-0.1.0.tgz --themes`
+1. `npm install zenit-ui@npm:@zenit-hosting/zenit-ui@^0.2.1` (the alias keeps the import
+   path `zenit-ui`; never install the unscoped `zenit-ui`). `ng generate zenit-ui:ng-add --themes`
    does steps 2 to 6 for you.
 2. Register the stylesheets in `angular.json`, in this order:
    `zenit-ui/styles/tokens.css`, `@angular/cdk/overlay-prebuilt.css`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenit-hosting/zenit-ui",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"

package/schematics/ng-add/index.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ngAdd = ngAdd;
 /**
- * `ng add zenit-ui`.
+ * the `ng-add` schematic.
  *
  * Performs the setup that `projects/zenit-ui/README.md` documents by hand:
  * style entries in `angular.json`, `z-root` in `index.html`, `@angular/cdk`,

package/schematics/ng-add/init-script.js

@@ -1,6 +1,6 @@
 "use strict";
 /*
- * Plain TypeScript without a single import, on purpose: `ng add zenit-ui`
+ * Plain TypeScript without a single import, on purpose: the `ng-add` schematic
  * needs the same script, and schematics are compiled apart from the library
  * (CommonJS, no DOM types, `rootDir: schematics`). A byte-identical copy of
  * this file therefore lives at `schematics/ng-add/init-script.ts`; the test in
@@ -14,7 +14,7 @@ exports.zenitThemeInitScript = zenitThemeInitScript;
 /** @internal Defaults shared by `ZTheme` and the init script. */
 exports.THEME_STANDARD = {
     schemes: ['dark', 'light', 'contrast'],
-    accents: ['rot', 'blau', 'gruen', 'violett'],
+    accents: ['rot', 'blau', 'gruen', 'violett', 'indigo', 'orange', 'rose', 'schwarz'],
     defaultScheme: 'dark',
     defaultAccent: 'rot',
     storageKey: 'zenit-theme',
@@ -86,7 +86,7 @@ function alsLiteral(wert) {
  * "critical" CSS and loads the rest late; `[data-theme="light"]` is never
  * critical, because nothing in `index.html` matches it. Set
  * `optimization.styles.inlineCritical` to `false` in the `production`
- * configuration of the build target; `ng add zenit-ui --themes` writes both
+ * configuration of the build target; `ng generate zenit-ui:ng-add --themes` writes both
  * the script and that setting.
  *
  * With a Content Security Policy the returned string is what you hash

package/styles/themes/accents.css

@@ -36,8 +36,11 @@
    4. accent-subtle follows accent-text: 12 % of it on the dark grounds, an
       opaque light tint of the same hue on the light ground.
 
-   Known overlap: with gruen, accent-text sits close to --success, and with
-   blau close to --info. The design system answers that itself, because a
+   Known overlap: with gruen, accent-text sits close to --success, with blau
+   close to --info, and with orange close to --warning. orange on the light
+   ground is the one accent whose accent-text is deeper than accent-hover
+   (#7c2d12): at #9a3412 it stood 1.20:1 from --danger, below the 1.25:1 the
+   check asks for. The design system answers that itself, because a
    status is always written out as a word as well (CLAUDE.md, "Farbe").
 
    All values are verified by tools/check-theme-contrast.mjs. */
@@ -89,3 +92,75 @@
   --accent-text: #6b1fae;
   --accent-subtle: #f0e4fb;
 }
+
+/* Indigo */
+[data-accent="indigo"] {
+  --accent: #4f46e5;
+  --accent-hover: #4338ca;
+  --on-accent: #ffffff;
+  --accent-text: #a5b4fc;
+  --accent-subtle: rgba(165, 180, 252, 0.12);
+}
+[data-theme="light"][data-accent="indigo"] {
+  --accent: #4f46e5;
+  --accent-hover: #4338ca;
+  --on-accent: #ffffff;
+  --accent-text: #4338ca;
+  --accent-subtle: #e8e7fc;
+}
+
+/* Orange */
+[data-accent="orange"] {
+  --accent: #c2410c;
+  --accent-hover: #9a3412;
+  --on-accent: #ffffff;
+  --accent-text: #fdba74;
+  --accent-subtle: rgba(253, 186, 116, 0.12);
+}
+[data-theme="light"][data-accent="orange"] {
+  --accent: #c2410c;
+  --accent-hover: #9a3412;
+  --on-accent: #ffffff;
+  --accent-text: #7c2d12;
+  --accent-subtle: #fdeee3;
+}
+
+/* Rose */
+[data-accent="rose"] {
+  --accent: #db2777;
+  --accent-hover: #be185d;
+  --on-accent: #ffffff;
+  --accent-text: #f9a8d4;
+  --accent-subtle: rgba(249, 168, 212, 0.12);
+}
+[data-theme="light"][data-accent="rose"] {
+  --accent: #db2777;
+  --accent-hover: #be185d;
+  --on-accent: #ffffff;
+  --accent-text: #9d174d;
+  --accent-subtle: #fce7f3;
+}
+
+/* Schwarz. Der einzige Akzent ohne Farbton: auf hellem Grund ist die Handlung
+   schwarz statt farbig. Zwei Abweichungen von den übrigen Akzenten:
+   - Auf dem dunklen Grund gibt es kein Schwarz, das sich vom Grund abhebt, und
+     ein helles Grau hielte die 3:1 gegen den weißen Fokus nicht. Die Fläche ist
+     dort Graphit (#52525b) mit weißer Schrift, accent-text ein helles Grau.
+   - Auf dem hellen Grund ist focus fast schwarz und läge auf einer schwarzen
+     Fläche bei 1:1. Nur hier setzt der Akzent deshalb auch focus, und zwar auf
+     ein Blau, das gegen alle vier Flächen und gegen accent über 3:1 bleibt. */
+[data-accent="schwarz"] {
+  --accent: #52525b;
+  --accent-hover: #3f3f46;
+  --on-accent: #ffffff;
+  --accent-text: #d4d4d8;
+  --accent-subtle: rgba(212, 212, 216, 0.12);
+}
+[data-theme="light"][data-accent="schwarz"] {
+  --accent: #18181b;
+  --accent-hover: #3f3f46;
+  --on-accent: #ffffff;
+  --accent-text: #18181b;
+  --accent-subtle: #e4e4e7;
+  --focus: #2563eb;
+}

package/types/zenit-hosting-zenit-ui.d.ts

@@ -5686,7 +5686,7 @@ interface ZThemeInitConfig {
      * named by {@link defaultAccent} carries no attribute, because the default
      * accent already lives in `tokens.css` and in the scheme blocks.
      *
-     * @default ['rot', 'blau', 'gruen', 'violett']
+     * @default ['rot', 'blau', 'gruen', 'violett', 'indigo', 'orange', 'rose', 'schwarz']
      */
     readonly accents?: readonly string[];
     /**
@@ -5733,7 +5733,7 @@ interface ZThemeInitConfig {
  * "critical" CSS and loads the rest late; `[data-theme="light"]` is never
  * critical, because nothing in `index.html` matches it. Set
  * `optimization.styles.inlineCritical` to `false` in the `production`
- * configuration of the build target; `ng add zenit-ui --themes` writes both
+ * configuration of the build target; `ng generate zenit-ui:ng-add --themes` writes both
  * the script and that setting.
  *
  * With a Content Security Policy the returned string is what you hash