@guildofgleks/ui 21.3.1 → 21.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.3.1",
+  "version": "21.3.2",
   "engines": {
     "node": ">=20.19.0"
   },
@@ -20,15 +20,20 @@
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",
-    "@angular/forms": "^21.2.0"
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/guildofgleks-ui.mjs",
-  "typings": "types/guildofgleks-ui.d.ts",
   "exports": {
+    "./styles/*": {
+      "default": "./styles/*"
+    },
+    "./src/styles/*": {
+      "default": "./src/styles/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -37,5 +42,7 @@
       "default": "./fesm2022/guildofgleks-ui.mjs"
     }
   },
+  "module": "fesm2022/guildofgleks-ui.mjs",
+  "typings": "types/guildofgleks-ui.d.ts",
   "type": "module"
 }

package/src/styles/theme.css

@@ -951,7 +951,27 @@
   --gog-textarea-resize-grip-opacity: 0.8;
   --gog-textarea-resize-grip-stripe-width: 1.5px;
   --gog-textarea-resize-grip-stripe-gap: 3px;
+  --gog-textarea-resize-grip-offset: 3px;
+  /*
+     Both default to 0 and are overwritten per instance, as an inline style on the field, from
+     the component's own ResizeObserver — they close the gap that opens once the field has been
+     dragged narrower/shorter than its container. Declared here rather than left to a `var()`
+     fallback so the grip's resting geometry is discoverable in this file like everything else;
+     an inline style outranks this declaration, so the per-instance override still wins.
+  */
+  --gog-textarea-resize-inset-right: 0px;
+  --gog-textarea-resize-inset-bottom: 0px;
   --gog-input-clear-inset: 8px;
+  /*
+     Width of one stepper button, and so of the whole stepper column. Scales with the field's
+     own font size rather than being a fixed px value, so it stays proportional across the five
+     sizes. Read in two places — the buttons themselves, and the offset that moves the clear
+     button clear of them on a clearable number field — which is why it is a token rather than
+     the same `calc()` written twice.
+  */
+  --gog-input-spin-width: calc(
+    var(--gog-input-size-font-size, var(--gog-field-md-font-size)) * 1.35
+  );
   --gog-input-float-label-reserve: var(--gog-field-float-label-reserve);
   --gog-input-float-label-in-top: var(--gog-field-float-label-in-top);
   --gog-input-float-label-over-gap: var(--gog-field-float-label-over-gap);

package/styles/fonts.css

@@ -0,0 +1,16 @@
+/*
+ * Optional typography preset — the families the showcase uses.
+ *
+ * Deliberately not part of `index.css`: importing this downloads three families from
+ * Google Fonts, which a component library should not decide on its consumer's behalf.
+ * The text-size scale lives in `theme.css`; this file only re-points the font families.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  --gog-font-heading: 'Cinzel', serif;
+  --gog-font-body: 'Inter', sans-serif;
+  --gog-font-mono: 'JetBrains Mono', monospace;
+}

package/styles/index.css

@@ -0,0 +1,17 @@
+/*
+ * The single stylesheet a @guildofgleks/ui consumer needs:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *
+ * It brings the baseline theme (every token the components read), the typography helpers
+ * and the utility classes that component templates rely on — `font-body`, `font-heading`
+ * and `gog-contained-layout` are applied inside the components themselves, so without
+ * this import they resolve to nothing.
+ *
+ * `fonts.css` is deliberately NOT included: it pulls three families from Google Fonts,
+ * which a library should not impose on its consumers. Import it explicitly if you want
+ * the showcase's typography.
+ */
+@import './theme.css';
+@import './typography.css';
+@import './utilities.css';

package/styles/presets/one-dark.css

@@ -0,0 +1,48 @@
+/*
+ * `one-dark` — the Atom/JetBrains One Dark palette, as a @guildofgleks/ui theme.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/one-dark.css';
+ *
+ *   <html data-theme="one-dark">
+ *
+ * Like every preset here it declares palette tokens only — see `slate.css` for why that is
+ * enough to restyle the whole library. The syntax-highlighting hues map onto the library's
+ * semantic roles: One Dark's blue is the accent, its green/red/yellow/cyan become
+ * success/danger/warning/info.
+ */
+
+:root[data-theme='one-dark'],
+[data-theme='one-dark'] {
+  color-scheme: dark;
+
+  /* Editor chrome */
+  --gog-background-color: #282c34;
+  --gog-surface-color: #21252b;
+  --gog-hover-color: #2c313a;
+  --gog-border-color: #3e4451;
+
+  /* Type */
+  --gog-text-color: #abb2bf;
+  --gog-accent-text-color: #282c34;
+  --gog-muted-text-color: #5c6370;
+
+  /* Brand — One Dark's blue */
+  --gog-primary-color: #abb2bf;
+  --gog-accent-color: #61afef;
+  --gog-accent-bright: #8ac2f5;
+  --gog-accent-dim: #4b8fca;
+  --gog-accent-pale: #2d3a4a;
+  --gog-secondary-color: #c678dd;
+
+  /* Semantics — the syntax hues in their natural roles */
+  --gog-success-color: #98c379;
+  --gog-danger-color: #e06c75;
+  --gog-warning-color: #e5c07b;
+  --gog-info-color: #56b6c2;
+
+  --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--gog-border-color);
+  --gog-spinner-overlay-bg: rgba(40, 44, 52, 0.85);
+}

package/styles/presets/one-light.css

@@ -0,0 +1,47 @@
+/*
+ * `one-light` — the Atom/JetBrains One Light palette, as a @guildofgleks/ui theme.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/one-light.css';
+ *
+ *   <html data-theme="one-light">
+ *
+ * The light counterpart to `one-dark.css`, using the same hue roles: blue is the accent,
+ * green/red/yellow/cyan become success/danger/warning/info. Pair the two behind a toggle and
+ * `ThemeService.setTheme('one-dark' | 'one-light')` switches between them.
+ */
+
+:root[data-theme='one-light'],
+[data-theme='one-light'] {
+  color-scheme: light;
+
+  /* Editor chrome */
+  --gog-background-color: #fafafa;
+  --gog-surface-color: #ffffff;
+  --gog-hover-color: #eaeaeb;
+  --gog-border-color: #d3d3d4;
+
+  /* Type */
+  --gog-text-color: #383a42;
+  --gog-accent-text-color: #ffffff;
+  --gog-muted-text-color: #a0a1a7;
+
+  /* Brand — One Light's blue */
+  --gog-primary-color: #383a42;
+  --gog-accent-color: #4078f2;
+  --gog-accent-bright: #5b8dff;
+  --gog-accent-dim: #2f5fd0;
+  --gog-accent-pale: #dce7fd;
+  --gog-secondary-color: #a626a4;
+
+  /* Semantics — the syntax hues in their natural roles */
+  --gog-success-color: #50a14f;
+  --gog-danger-color: #e45649;
+  --gog-warning-color: #c18401;
+  --gog-info-color: #0184bc;
+
+  --gog-panel-shadow: 0 10px 30px rgba(56, 58, 66, 0.12), 0 0 0 1px var(--gog-border-color);
+  --gog-spinner-overlay-bg: rgba(250, 250, 250, 0.85);
+}

package/styles/presets/slate.css

@@ -0,0 +1,55 @@
+/*
+ * `slate` — an alternative preset, and a worked example of the whole theming contract.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/slate.css';
+ *
+ *   <html data-theme="slate">
+ *
+ * Note what this file does *not* contain: no component tokens, no `--gog-btn-*`, no
+ * `--gog-table-*`. It declares the palette and nothing else. Every component token in
+ * `theme.css`'s derived layer is re-declared on `[data-theme]`, so it re-resolves against
+ * whichever palette is in scope — which is exactly why a theme this short can restyle the
+ * entire library. If you find yourself listing component tokens in a theme, something in the
+ * derived layer is missing instead.
+ *
+ * Both selectors are listed for the same reason `theme.css` lists both: `:root[data-theme]`
+ * themes the page, the bare `[data-theme]` themes any subtree, so several themes can render
+ * side by side.
+ */
+
+:root[data-theme='slate'],
+[data-theme='slate'] {
+  color-scheme: light;
+
+  /* Surfaces — cool neutrals rather than the house obsidian */
+  --gog-background-color: #f4f6f8;
+  --gog-surface-color: #ffffff;
+  --gog-hover-color: #e8edf2;
+  --gog-border-color: #cbd5e1;
+
+  /* Type */
+  --gog-text-color: #1e293b;
+  --gog-accent-text-color: #ffffff;
+  --gog-muted-text-color: #64748b;
+
+  /* Brand — indigo instead of gold, to make the swap unmistakable */
+  --gog-primary-color: #1e293b;
+  --gog-accent-color: #4f46e5;
+  --gog-accent-bright: #6366f1;
+  --gog-accent-dim: #4338ca;
+  --gog-accent-pale: #e0e7ff;
+  --gog-secondary-color: #0ea5e9;
+
+  /* Semantics */
+  --gog-success-color: #059669;
+  --gog-danger-color: #dc2626;
+  --gog-warning-color: #d97706;
+  --gog-info-color: #0284c7;
+
+  /* The two palette-shaped tokens that are not plain colours. */
+  --gog-panel-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--gog-border-color);
+  --gog-spinner-overlay-bg: rgba(244, 246, 248, 0.85);
+}