@zenit-hosting/zenit-ui 0.1.0

package/styles/themes/contrast.css

@@ -0,0 +1,67 @@
+/* Zenit themes / contrast.
+
+   A high contrast variant of the dark scheme, for glare, cheap panels and
+   everyone who turns the operating system setting on. Same token names, same
+   roles, same hues: only the distance between them grows. The derivation:
+
+   1. Surfaces. The ground drops to pure black and the three steps above it grow
+      wider than in the dark scheme (#000000, #0b0b0e, #17171d, #24242c), so the
+      four levels stay apart although the whole ramp is darker.
+   2. Text. text is pure white, text-muted and text-subtle are lifted until they
+      clear 7:1 and 4.5:1 with room to spare on all three surfaces; in the dark
+      scheme text-subtle sits at 4.78:1 on surface-raised, here at 8.77:1.
+   3. Borders. This is the one place where a role really changes: border is no
+      longer purely decorative. In the dark scheme it is a hairline at about
+      1.3:1; here it reaches 3:1 on surface (3.07:1, and 3.29:1 on bg, 2.79:1
+      on surface-raised), so the line between two rows is visible without
+      relying on the difference between the two surfaces. border-control stays
+      clearly above it (2.75:1 between the two lines).
+   4. Accent. The fill is the one of the dark scheme. A deeper fill sinks into
+      the black ground (the former hover #ab1033 stood at 2.85:1 against bg), a
+      lighter one costs white as on-accent its 4.5:1: 4.70:1 on accent, 6.29:1
+      on accent-hover. accent-text is brightened so red text clears 4.5:1 on a
+      black ground.
+   5. Status. The four status colours are brightened versions of the dark ones
+      and the -subtle fills go from 12 % to 16 % opacity, so a badge is a fill
+      and not a guess. danger is pushed towards orange: with a red-green
+      deficiency (deuteranopia) the former #ffa08c sat next to success at a
+      colour difference of about 3.5, #ff9661 at about 17.8. It keeps its
+      distance from accent-text in luminance as well.
+   6. focus stays white; against every surface and against accent it is far
+      above the required 3:1.
+   7. scrim and shadow-overlay go to 80 % black: on a black ground a 50 % scrim
+      no longer separates the dialog from the page.
+
+   No new effects: no gradient, one shadow, same radii, same type scale.
+   All values are verified by tools/check-theme-contrast.mjs. */
+[data-theme="contrast"] {
+  color-scheme: dark;
+  --bg: #000000;
+  --surface: #0b0b0e;
+  --surface-raised: #17171d;
+  --surface-hover: #24242c;
+  --border: #5e5e6a;
+  --border-control: #a9a9b5;
+  --text: #ffffff;
+  --text-muted: #d5d9e1;
+  --text-subtle: #b0b6c2;
+  --accent: #e11d48;
+  --accent-hover: #be123c;
+  --on-accent: #ffffff;
+  --accent-text: #ff6b85;
+  --accent-subtle: rgba(255, 107, 133, 0.16);
+  --scrim: rgba(0, 0, 0, 0.8);
+  --focus: #ffffff;
+  --success: #7ce38b;
+  --success-subtle: rgba(124, 227, 139, 0.16);
+  --warning: #ffc75c;
+  --warning-subtle: rgba(255, 199, 92, 0.16);
+  --danger: #ff9661;
+  --danger-subtle: rgba(255, 150, 97, 0.16);
+  --info: #9ccdff;
+  --info-subtle: rgba(156, 205, 255, 0.16);
+  --mc-accent: #78d964;
+  --mc-accent-hover: #63bd51;
+  --on-mc: #031e06;
+  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.8);
+}

package/styles/themes/light.css

@@ -0,0 +1,74 @@
+/* Zenit themes / light.
+
+   Every token name and role of tokens.css stays as it is; only the values
+   change. The dark scheme is not touched. These values are derived, not
+   specified: spec/tokens.json knows one colour scheme (dark). The derivation:
+
+   1. Surfaces. Dark steps up from the page ground (#060608) to the active row
+      (#1b1b21) in four values. Light mirrors that and steps DOWN from white, in
+      slightly larger absolute steps because the eye separates light greys less
+      well: #ffffff, #f4f4f6, #eaeaee, #dfdfe5. The faint blue cast of the dark
+      ramp (blue channel a few points above red and green) is kept.
+   2. Text. Three levels, measured against bg, surface AND surface-raised; the
+      darkest of the three (surface-raised) is the worst case for dark type.
+      text >= 12:1, text-muted >= 7:1, text-subtle >= 4.5:1.
+   3. Borders. border is decorative and stays low contrast. border-control
+      carries meaning and keeps >= 3:1 on surface.
+   4. Accent. Rot stays the brand. The fill (accent, accent-hover) is deepened
+      until white as on-accent clears 4.5:1 on both, and accent-text is deepened
+      further until it clears 4.5:1 on bg and on surface.
+   5. Status. On a light ground a status colour has to be dark, so success,
+      warning, danger and info are the deep variants of the dark hues. The
+      -subtle fills are NOT the same colour at 10 % opacity: on a light ground
+      that darkens the badge and eats the contrast the word inside it needs.
+      They are opaque light tints of the same hue instead, lighter than
+      surface-raised, which keeps the status word above 4.5:1 on its own badge.
+   6. danger stays visibly apart from accent-text (CLAUDE.md, "Farbe"): it is
+      the more orange and the lighter of the two, measured as >= 1.25:1 between
+      the two colours. It is also read on surface-raised and surface-hover (the
+      danger item of a menu and its hover), so it clears 4.5:1 there as well;
+      surface-hover is the binding ground (4.59:1).
+   7. focus is near black here, the counterpart of white in the dark scheme. It
+      keeps >= 3:1 against all four surfaces and against accent. It does not
+      against accent-hover (2.41:1 with rot), and it cannot: a fill that keeps
+      white at 4.5:1 and near black at 3:1 has to sit in a band so narrow that
+      hover would look like rest. The ring does not need it, because it is
+      drawn with a 2px offset and lies on the surface around the button, never
+      on the fill.
+   8. scrim and shadow-overlay stay black based but lose weight; a light page
+      does not need a 50 % shadow to lift a dialog.
+   9. Minecraft subtheme: mc-accent is deepened so the primary button carries on
+      a white ground, and on-mc becomes white instead of the dark green.
+
+   All values are verified by tools/check-theme-contrast.mjs. */
+[data-theme="light"] {
+  color-scheme: light;
+  --bg: #ffffff;
+  --surface: #f4f4f6;
+  --surface-raised: #eaeaee;
+  --surface-hover: #dfdfe5;
+  --border: #dcdce2;
+  --border-control: #85858f;
+  --text: #18181b;
+  --text-muted: #4a4a54;
+  --text-subtle: #66666f;
+  --accent: #c2123f;
+  --accent-hover: #9d0e33;
+  --on-accent: #ffffff;
+  --accent-text: #a11039;
+  --accent-subtle: #fbe7ec;
+  --scrim: rgba(9, 9, 11, 0.5);
+  --focus: #09090b;
+  --success: #166534;
+  --success-subtle: #e4f3e7;
+  --warning: #8a5300;
+  --warning-subtle: #fdf0dc;
+  --danger: #b5330f;
+  --danger-subtle: #fdece7;
+  --info: #17548f;
+  --info-subtle: #e4eefa;
+  --mc-accent: #2f7d32;
+  --mc-accent-hover: #276b2a;
+  --on-mc: #ffffff;
+  --shadow-overlay: 0 8px 24px rgba(9, 9, 11, 0.18);
+}

package/styles/themes.css

@@ -0,0 +1,21 @@
+/* Zenit themes: every colour scheme and every accent of the library in one
+   file. Opt in, never part of zenit-ui.css, because a product that only ships
+   the dark scheme should not pay for the rest.
+
+   Include order: tokens.css, then this file, then zenit-ui.css. tokens.css has
+   to come first: :root and [data-theme="light"] have the same specificity
+   (0,1,0), so the later rule wins, not the more specific one.
+
+   From a package:   @import "zenit-ui/styles/themes.css";
+   Single schemes:   @import "zenit-ui/styles/themes/base.css";
+                     @import "zenit-ui/styles/themes/light.css";
+   The order inside this file is fixed: base sets color-scheme for dark, light
+   and contrast override it, accents override the accent tokens of all three.
+
+   Checked by tools/check-theme-contrast.mjs, which reads this file to learn
+   the include order. */
+
+@import "./themes/base.css";
+@import "./themes/light.css";
+@import "./themes/contrast.css";
+@import "./themes/accents.css";

package/styles/tokens.css

@@ -0,0 +1,76 @@
+/* Zenit tokens.css: kompiliert aus tokens.json (Version 1). Einzige Stelle mit Hex- und Pixel-Werten. Nicht von Hand ändern. */
+:root, [data-theme="dark"] {
+  --bg: #060608;
+  --surface: #0e0e11;
+  --surface-raised: #15151a;
+  --surface-hover: #1b1b21;
+  --border: #26262c;
+  --border-control: #62626d;
+  --text: #f2f2f3;
+  --text-muted: #9ca3af;
+  --text-subtle: #7d838f;
+  --accent: #e11d48;
+  --accent-hover: #be123c;
+  --on-accent: #ffffff;
+  --accent-text: #ff2d4f;
+  --accent-subtle: rgba(255, 45, 79, 0.1);
+  --scrim: rgba(0, 0, 0, 0.6);
+  --focus: #ffffff;
+  --success: #4caf50;
+  --success-subtle: rgba(76, 175, 80, 0.12);
+  --warning: #f5a524;
+  --warning-subtle: rgba(245, 165, 36, 0.12);
+  --danger: #ff6b6b;
+  --danger-subtle: rgba(255, 107, 107, 0.12);
+  --info: #6cb6ff;
+  --info-subtle: rgba(108, 182, 255, 0.12);
+  --mc-accent: #5fb84e;
+  --mc-accent-hover: #4ea03f;
+  --on-mc: #06280a;
+  --chart-1: #3987e5;
+  --chart-2: #d95926;
+  --chart-3: #199e70;
+  --chart-4: #c98500;
+  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+  --space-9: 96px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-full: 9999px;
+  --control-sm: 32px;
+  --control-md: 40px;
+  --control-lg: 48px;
+  --icon: 20px;
+  --container: 1120px;
+  --sidebar: 240px;
+  --header: 56px;
+  --measure: 65ch;
+  --z-header: 100;
+  --z-overlay: 1000;
+  --z-toast: 1100;
+  --font-display: "Space Grotesk", system-ui, sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
+.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
+.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
+.heading-1 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
+.heading-2 { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; }
+.body-lg { font-family: var(--font-body); font-size: 20px; line-height: 30px; font-weight: 400; }
+.body { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
+.body-sm { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 400; }
+.title-sm { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 600; }
+.caption { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 400; }
+.mono-xl { font-family: var(--font-mono); font-size: 28px; line-height: 34px; font-weight: 600; }
+.mono-lg { font-family: var(--font-mono); font-size: 20px; line-height: 28px; font-weight: 600; }
+.mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; }
+.mono-sm { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }

package/styles/zenit-ui.css

@@ -0,0 +1,12 @@
+/* Zenit UI: styles of the zenit-ui library. Every value comes from tokens.css.
+   Include order: tokens.css, then @angular/cdk/overlay-prebuilt.css, then this file.
+   The class z-root belongs on <html> and <body>. */
+
+@import "./_grundlage.css";
+@import "./_formulare.css";
+@import "./_navigation.css";
+@import "./_daten.css";
+@import "./_rueckmeldung.css";
+@import "./_overlays.css";
+@import "./_werkzeuge.css";
+@import "./_konfigurator.css";