@guildofgleks/ui 21.3.1 → 21.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.3.1",
+  "version": "21.4.0",
   "engines": {
     "node": ">=20.19.0"
   },
@@ -16,19 +16,25 @@
     "standalone",
     "accessible"
   ],
+  "homepage": "https://ui.guildofgleks.com/",
   "license": "Apache-2.0",
   "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 +43,7 @@
       "default": "./fesm2022/guildofgleks-ui.mjs"
     }
   },
+  "module": "fesm2022/guildofgleks-ui.mjs",
+  "typings": "types/guildofgleks-ui.d.ts",
   "type": "module"
 }

package/src/styles/button.css

@@ -0,0 +1,193 @@
+/*
+ * The button's visual block, in a **global** stylesheet rather than the component's own.
+ *
+ * `gog-button` is not the only thing that renders it: `[gogButton]` applies these same classes to
+ * a consumer's own `<a>` or `<button>`, and Angular's emulated encapsulation would never let a
+ * component stylesheet reach an element declared in someone else's template. The same reason
+ * `gogBadge` and `gog-collapsible` keep their CSS here.
+ *
+ * Token layering (see theme.css):
+ *   --gog-btn-<prop>            per-instance override. Never declared here or in the
+ *                               theme, so it always wins when a consumer sets it.
+ *   --gog-btn-variant-<prop>    internal, set by the variant classes below.
+ *   --gog-btn-size-<prop>       internal, set by the size classes below.
+ *   --gog-btn-<variant>-<prop>  the actual values, all in theme.css.
+ * Nothing in this file is a literal: every colour, font, metric and duration resolves
+ * to a theme token, so a theme can restyle the button without touching this stylesheet.
+ */
+.gog-btn {
+  /* Scopes the spinner rendered inside a loading button to the variant's spinner colour. */
+  --gog-spinner-color: var(
+    --gog-btn-spinner-color,
+    var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color))
+  );
+
+  gap: var(--gog-btn-gap);
+  border: var(--gog-btn-border-width) var(--gog-btn-border-style)
+    var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));
+  border-radius: var(--gog-btn-radius);
+  padding: var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));
+  font-family: var(--gog-btn-font-family);
+  font-weight: var(--gog-btn-font-weight);
+  font-size: var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));
+  letter-spacing: var(--gog-btn-letter-spacing);
+  text-transform: var(--gog-btn-text-transform);
+  line-height: var(--gog-btn-line-height);
+  background-color: var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));
+  color: var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));
+  box-shadow: var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));
+  cursor: pointer;
+  /* An `<a>` carries the UA underline; a `<button>` never did, which is why the component never
+     needed this. Reset here so `[gogButton]` on a link is visually identical to the component. */
+  text-decoration: none;
+  transition:
+    background-color var(--gog-btn-transition-duration) var(--gog-easing),
+    box-shadow var(--gog-btn-transition-duration) var(--gog-easing),
+    color var(--gog-btn-transition-duration) var(--gog-easing);
+}
+
+.gog-btn:focus-visible {
+  outline: var(--gog-btn-focus-ring-width) solid
+    var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));
+  outline-offset: var(--gog-btn-focus-ring-offset);
+}
+
+.gog-btn:hover:not(:disabled) {
+  background-color: var(
+    --gog-btn-hover-bg,
+    var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg))
+  );
+  color: var(
+    --gog-btn-hover-color,
+    var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color))
+  );
+  box-shadow: var(
+    --gog-btn-hover-shadow,
+    var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow))
+  );
+}
+
+.gog-btn:active:not(:disabled) {
+  transform: scale(var(--gog-btn-active-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gog-btn {
+    transition: none;
+  }
+
+  .gog-btn:active:not(:disabled) {
+    transform: none;
+  }
+}
+
+.gog-btn:disabled {
+  opacity: var(--gog-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* === Variants === */
+
+/* primary: solid gold */
+.gog-btn--primary {
+  --gog-btn-variant-bg: var(--gog-btn-primary-bg);
+  --gog-btn-variant-color: var(--gog-btn-primary-color);
+  --gog-btn-variant-border: var(--gog-btn-primary-border);
+  --gog-btn-variant-shadow: var(--gog-btn-primary-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color);
+}
+
+.gog-btn--secondary {
+  --gog-btn-variant-bg: var(--gog-btn-secondary-bg);
+  --gog-btn-variant-color: var(--gog-btn-secondary-color);
+  --gog-btn-variant-border: var(--gog-btn-secondary-border);
+  --gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color);
+}
+
+/* outline: transparent with golden border */
+.gog-btn--outline {
+  --gog-btn-variant-bg: var(--gog-btn-outline-bg);
+  --gog-btn-variant-color: var(--gog-btn-outline-color);
+  --gog-btn-variant-border: var(--gog-btn-outline-border);
+  --gog-btn-variant-shadow: var(--gog-btn-outline-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color);
+}
+
+/* ghost: no border, subtle hover */
+.gog-btn--ghost {
+  --gog-btn-variant-bg: var(--gog-btn-ghost-bg);
+  --gog-btn-variant-color: var(--gog-btn-ghost-color);
+  --gog-btn-variant-border: var(--gog-btn-ghost-border);
+  --gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color);
+}
+
+/* === Sizes === */
+.gog-btn--xsm {
+  --gog-btn-size-padding: var(--gog-btn-xsm-padding);
+  --gog-btn-size-font-size: var(--gog-btn-xsm-font-size);
+}
+
+.gog-btn--sm {
+  --gog-btn-size-padding: var(--gog-btn-sm-padding);
+  --gog-btn-size-font-size: var(--gog-btn-sm-font-size);
+}
+
+.gog-btn--md {
+  --gog-btn-size-padding: var(--gog-btn-md-padding);
+  --gog-btn-size-font-size: var(--gog-btn-md-font-size);
+}
+
+.gog-btn--lg {
+  --gog-btn-size-padding: var(--gog-btn-lg-padding);
+  --gog-btn-size-font-size: var(--gog-btn-lg-font-size);
+}
+
+.gog-btn--slg {
+  --gog-btn-size-padding: var(--gog-btn-slg-padding);
+  --gog-btn-size-font-size: var(--gog-btn-slg-font-size);
+}
+
+.gog-btn--loading {
+  position: relative;
+  pointer-events: none;
+  /* Loading buttons stay natively focusable (aria-disabled + aria-busy instead of
+     `disabled`) so keyboard users don't lose focus mid-action. `:disabled` styling
+     below therefore no longer covers this state, so the dim is applied explicitly. */
+  opacity: var(--gog-btn-loading-opacity);
+}
+
+.gog-btn__content--hidden {
+  visibility: hidden;
+}
+
+/* absolute center so the spinner is always in the middle of the button */
+.gog-btn__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: var(--gog-btn-spinner-max-size);
+  max-height: var(--gog-btn-spinner-max-size);
+}
+
+/*
+ * `gog-button` gets its full width through `:host`, having a wrapper element to work with.
+ * `[gogButton]` has none — the element *is* the button — so it needs a class of its own.
+ */
+.gog-btn--full-width {
+  width: 100%;
+}

package/src/styles/index.css

@@ -15,3 +15,5 @@
 @import './theme.css';
 @import './typography.css';
 @import './utilities.css';
+/* Global because `[gogButton]` styles a consumer's own element — see the file's own header. */
+@import './button.css';

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);
@@ -1124,6 +1144,8 @@
   --gog-paginator-ellipsis-color: var(--gog-muted-text-color);
   --gog-paginator-ellipsis-font-size: var(--gog-text-sm);
   --gog-paginator-ellipsis-font-family: var(--gog-font-body);
+  /* Enough for a three-digit page size plus the chevron, so the row doesn't shift on change. */
+  --gog-paginator-page-size-min-width: 5rem;
   --gog-paginator-ellipsis-min-width: 32px;
 
   /* ── Progressbar ──────────────────────────────────────────────────────────── */
@@ -1397,11 +1419,15 @@
   --gog-table-border-width: 2px;
   --gog-table-border-style: solid;
   --gog-table-row-border-width: 1px;
+  /* The selection column is sized to its checkbox and never grows with content. */
+  --gog-table-select-col-width: 44px;
   --gog-table-surface: var(--gog-surface-color);
   --gog-table-text-color: var(--gog-text-color);
   --gog-table-accent-color: var(--gog-accent-color);
   --gog-table-accent-bright: var(--gog-accent-bright);
   --gog-table-hover-bg: var(--gog-accent-pale);
+  /* Selected rows keep this tint through hover, so hovering one never reads as clearing it. */
+  --gog-table-selected-bg: var(--gog-accent-pale);
   --gog-table-muted-color: var(--gog-muted-text-color);
   --gog-table-focus-ring: var(--gog-accent-color);
   --gog-table-focus-ring-width: var(--gog-focus-ring-width);

package/styles/button.css

@@ -0,0 +1,193 @@
+/*
+ * The button's visual block, in a **global** stylesheet rather than the component's own.
+ *
+ * `gog-button` is not the only thing that renders it: `[gogButton]` applies these same classes to
+ * a consumer's own `<a>` or `<button>`, and Angular's emulated encapsulation would never let a
+ * component stylesheet reach an element declared in someone else's template. The same reason
+ * `gogBadge` and `gog-collapsible` keep their CSS here.
+ *
+ * Token layering (see theme.css):
+ *   --gog-btn-<prop>            per-instance override. Never declared here or in the
+ *                               theme, so it always wins when a consumer sets it.
+ *   --gog-btn-variant-<prop>    internal, set by the variant classes below.
+ *   --gog-btn-size-<prop>       internal, set by the size classes below.
+ *   --gog-btn-<variant>-<prop>  the actual values, all in theme.css.
+ * Nothing in this file is a literal: every colour, font, metric and duration resolves
+ * to a theme token, so a theme can restyle the button without touching this stylesheet.
+ */
+.gog-btn {
+  /* Scopes the spinner rendered inside a loading button to the variant's spinner colour. */
+  --gog-spinner-color: var(
+    --gog-btn-spinner-color,
+    var(--gog-btn-variant-spinner-color, var(--gog-btn-primary-spinner-color))
+  );
+
+  gap: var(--gog-btn-gap);
+  border: var(--gog-btn-border-width) var(--gog-btn-border-style)
+    var(--gog-btn-border, var(--gog-btn-variant-border, var(--gog-btn-primary-border)));
+  border-radius: var(--gog-btn-radius);
+  padding: var(--gog-btn-padding, var(--gog-btn-size-padding, var(--gog-btn-md-padding)));
+  font-family: var(--gog-btn-font-family);
+  font-weight: var(--gog-btn-font-weight);
+  font-size: var(--gog-btn-font-size, var(--gog-btn-size-font-size, var(--gog-btn-md-font-size)));
+  letter-spacing: var(--gog-btn-letter-spacing);
+  text-transform: var(--gog-btn-text-transform);
+  line-height: var(--gog-btn-line-height);
+  background-color: var(--gog-btn-bg, var(--gog-btn-variant-bg, var(--gog-btn-primary-bg)));
+  color: var(--gog-btn-color, var(--gog-btn-variant-color, var(--gog-btn-primary-color)));
+  box-shadow: var(--gog-btn-shadow, var(--gog-btn-variant-shadow, var(--gog-btn-primary-shadow)));
+  cursor: pointer;
+  /* An `<a>` carries the UA underline; a `<button>` never did, which is why the component never
+     needed this. Reset here so `[gogButton]` on a link is visually identical to the component. */
+  text-decoration: none;
+  transition:
+    background-color var(--gog-btn-transition-duration) var(--gog-easing),
+    box-shadow var(--gog-btn-transition-duration) var(--gog-easing),
+    color var(--gog-btn-transition-duration) var(--gog-easing);
+}
+
+.gog-btn:focus-visible {
+  outline: var(--gog-btn-focus-ring-width) solid
+    var(--gog-btn-hover-bg, var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg)));
+  outline-offset: var(--gog-btn-focus-ring-offset);
+}
+
+.gog-btn:hover:not(:disabled) {
+  background-color: var(
+    --gog-btn-hover-bg,
+    var(--gog-btn-variant-hover-bg, var(--gog-btn-primary-hover-bg))
+  );
+  color: var(
+    --gog-btn-hover-color,
+    var(--gog-btn-variant-hover-color, var(--gog-btn-primary-hover-color))
+  );
+  box-shadow: var(
+    --gog-btn-hover-shadow,
+    var(--gog-btn-variant-hover-shadow, var(--gog-btn-primary-hover-shadow))
+  );
+}
+
+.gog-btn:active:not(:disabled) {
+  transform: scale(var(--gog-btn-active-scale));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gog-btn {
+    transition: none;
+  }
+
+  .gog-btn:active:not(:disabled) {
+    transform: none;
+  }
+}
+
+.gog-btn:disabled {
+  opacity: var(--gog-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* === Variants === */
+
+/* primary: solid gold */
+.gog-btn--primary {
+  --gog-btn-variant-bg: var(--gog-btn-primary-bg);
+  --gog-btn-variant-color: var(--gog-btn-primary-color);
+  --gog-btn-variant-border: var(--gog-btn-primary-border);
+  --gog-btn-variant-shadow: var(--gog-btn-primary-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-primary-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-primary-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-primary-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-primary-spinner-color);
+}
+
+.gog-btn--secondary {
+  --gog-btn-variant-bg: var(--gog-btn-secondary-bg);
+  --gog-btn-variant-color: var(--gog-btn-secondary-color);
+  --gog-btn-variant-border: var(--gog-btn-secondary-border);
+  --gog-btn-variant-shadow: var(--gog-btn-secondary-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-secondary-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-secondary-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-secondary-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-secondary-spinner-color);
+}
+
+/* outline: transparent with golden border */
+.gog-btn--outline {
+  --gog-btn-variant-bg: var(--gog-btn-outline-bg);
+  --gog-btn-variant-color: var(--gog-btn-outline-color);
+  --gog-btn-variant-border: var(--gog-btn-outline-border);
+  --gog-btn-variant-shadow: var(--gog-btn-outline-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-outline-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-outline-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-outline-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-outline-spinner-color);
+}
+
+/* ghost: no border, subtle hover */
+.gog-btn--ghost {
+  --gog-btn-variant-bg: var(--gog-btn-ghost-bg);
+  --gog-btn-variant-color: var(--gog-btn-ghost-color);
+  --gog-btn-variant-border: var(--gog-btn-ghost-border);
+  --gog-btn-variant-shadow: var(--gog-btn-ghost-shadow);
+  --gog-btn-variant-hover-bg: var(--gog-btn-ghost-hover-bg);
+  --gog-btn-variant-hover-color: var(--gog-btn-ghost-hover-color);
+  --gog-btn-variant-hover-shadow: var(--gog-btn-ghost-hover-shadow);
+  --gog-btn-variant-spinner-color: var(--gog-btn-ghost-spinner-color);
+}
+
+/* === Sizes === */
+.gog-btn--xsm {
+  --gog-btn-size-padding: var(--gog-btn-xsm-padding);
+  --gog-btn-size-font-size: var(--gog-btn-xsm-font-size);
+}
+
+.gog-btn--sm {
+  --gog-btn-size-padding: var(--gog-btn-sm-padding);
+  --gog-btn-size-font-size: var(--gog-btn-sm-font-size);
+}
+
+.gog-btn--md {
+  --gog-btn-size-padding: var(--gog-btn-md-padding);
+  --gog-btn-size-font-size: var(--gog-btn-md-font-size);
+}
+
+.gog-btn--lg {
+  --gog-btn-size-padding: var(--gog-btn-lg-padding);
+  --gog-btn-size-font-size: var(--gog-btn-lg-font-size);
+}
+
+.gog-btn--slg {
+  --gog-btn-size-padding: var(--gog-btn-slg-padding);
+  --gog-btn-size-font-size: var(--gog-btn-slg-font-size);
+}
+
+.gog-btn--loading {
+  position: relative;
+  pointer-events: none;
+  /* Loading buttons stay natively focusable (aria-disabled + aria-busy instead of
+     `disabled`) so keyboard users don't lose focus mid-action. `:disabled` styling
+     below therefore no longer covers this state, so the dim is applied explicitly. */
+  opacity: var(--gog-btn-loading-opacity);
+}
+
+.gog-btn__content--hidden {
+  visibility: hidden;
+}
+
+/* absolute center so the spinner is always in the middle of the button */
+.gog-btn__spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: var(--gog-btn-spinner-max-size);
+  max-height: var(--gog-btn-spinner-max-size);
+}
+
+/*
+ * `gog-button` gets its full width through `:host`, having a wrapper element to work with.
+ * `[gogButton]` has none — the element *is* the button — so it needs a class of its own.
+ */
+.gog-btn--full-width {
+  width: 100%;
+}

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,19 @@
+/*
+ * 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';
+/* Global because `[gogButton]` styles a consumer's own element — see the file's own header. */
+@import './button.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);
+}