@zenit-hosting/zenit-ui 0.1.0 → 0.2.0

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.0. 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
@@ -79,9 +79,9 @@ is no `NgModule` and no `forRoot`.
 1. **Install.** The package is not on npm; it is installed from the tarball built by
    `npm pack` inside `dist/zenit-ui`:
    ```bash
-   npm i ./zenit-ui-0.1.0.tgz
+   npm i ./zenit-ui-0.2.0.tgz
    ```
-   `ng add ./zenit-ui-0.1.0.tgz --themes` performs steps 2 to 6 automatically.
+   `ng add ./zenit-ui-0.2.0.tgz --themes` performs steps 2 to 6 automatically.
 
 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 +158,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" />
@@ -4494,7 +4494,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 +4519,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.0 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,7 @@ 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 i ./zenit-ui-0.2.0.tgz` (the package is not on npm). `ng add ./zenit-ui-0.2.0.tgz --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.0",
   "license": "UNLICENSED",
   "publishConfig": {
     "access": "public"

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

@@ -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',

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[];
     /**