@guildofgleks/ui 21.4.4 → 21.5.0

package/src/styles/button.css

@@ -1,193 +0,0 @@
-/*
- * 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/fonts.css

@@ -1,16 +0,0 @@
-/*
- * 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/src/styles/index.css

@@ -1,19 +0,0 @@
-/*
- * 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/src/styles/presets/one-dark.css

@@ -1,48 +0,0 @@
-/*
- * `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/src/styles/presets/one-light.css

@@ -1,47 +0,0 @@
-/*
- * `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/src/styles/presets/slate.css

@@ -1,55 +0,0 @@
-/*
- * `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);
-}