contain-css-svelte 0.0.18 → 1.0.1

package/dist/Card.svelte

@@ -1,34 +1,31 @@
-<script>import { injectVars } from "./util";
-export let center = false;
-export let fixedHeight = false;
-export let bg = null;
-export let fg = null;
-export let padding = null;
-export let width = null;
-export let height = null;
-let cssVars = injectVars($$props, "card", [
+<script lang="ts">import { injectVars } from "./util";
+let { header, footer, children, height = "", fixedHeight, center, ...restProps } = $props();
+let cssVars = injectVars({ height, ...restProps }, "card", [
     "bg",
     "fg",
     "padding",
     "width",
     "height",
 ]);
-$: if (height) {
-    fixedHeight = true;
-}
-let hasHeader = $$slots.header;
-let hasFooter = $$slots.footer;
+const forceFixedHeight = (h) => {
+    if (h && !fixedHeight) {
+        fixedHeight = true;
+    }
+};
+$effect(() => forceFixedHeight(height));
+let hasHeader = $derived(Boolean(header));
+let hasFooter = $derived(Boolean(footer));
 </script>
 
 <div class="card" class:center class:fixedHeight style={cssVars}>
   <header class:hide={!hasHeader}>
-    <slot name="header" />
+    {#if header}{@render header()}{/if}
   </header>
   <section>
-    <slot />
+    {#if children}{@render children()}{/if}
   </section>
   <footer class:hide={!hasFooter}>
-    <slot name="footer" />
+    {#if footer}{@render footer()}{/if}
   </footer>
 </div>
 
@@ -47,6 +44,8 @@ let hasFooter = $$slots.footer;
   color: var(--card-fg, var(--container-fg, var(--fg, unset)));
   --link-bg: var(--card-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
   --link-fg: var(--card-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  --fg: var(--card-fg, var(--container-fg, var(--fg, unset)));
+  --bg: var(--card-bg, var(--container-bg, var(--bg, unset)));
   border-radius: var(--card-border-radius, var(--container-border-radius, var(--border-radius, 0)));
   border: var(--card-border, var(--container-border, var(--border, var(--border-width) var(--border-style) var(--border-color))));
   display: flex;
@@ -73,6 +72,7 @@ let hasFooter = $$slots.footer;
   font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, unset)));
   text-align: var(--card-text-align, var(--container-text-align, var(--text-align, unset)));
 }
+
 .card section :global(p),
 .card section :global(blockquote),
 .card section :global(dl),
@@ -85,16 +85,15 @@ let hasFooter = $$slots.footer;
   margin-right: auto;
   font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
 }
+
 .card section :global(h1),
 .card section :global(h2),
 .card section :global(h3),
 .card section :global(h4),
 .card section :global(h5),
 .card section :global(h6) {
-  background: var(--heading-bg, var(--bg, unset));
-  color: var(--heading-fg, var(--fg, unset));
-  --link-bg: var(--heading-link-bg, var(--heading-link-bg, inherit));
-  --link-fg: var(--heading-link-fg, var(--heading-link-fg, inherit));
+  color: var(--card-heading-fg, var(--container-heading-fg, var(--heading-fg, unset)));
+  background: var(--card-heading-bg, var(--container-heading-bg, var(--heading-bg, transparent)));
   max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
   margin-left: auto;
   margin-right: auto;
@@ -120,6 +119,7 @@ let hasFooter = $$slots.footer;
     font-variant: fn.var(--heading-font-variant, var(--body-font-variant, var(--font-variant, inherit)));
     text-align: fn.var(--heading-text-align, var(--body-text-align, var(--text-align, inherit))); */
 }
+
 .card section :global(p) {
   font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
   text-transform: var(--card-paragraph-text-transform, var(--container-paragraph-text-transform, var(--paragraph-text-transform, var(--paragraph-text-transform, inherit))));
@@ -132,6 +132,7 @@ let hasFooter = $$slots.footer;
   font-variant: var(--card-paragraph-font-variant, var(--container-paragraph-font-variant, var(--paragraph-font-variant, var(--paragraph-font-variant, inherit))));
   text-align: var(--card-paragraph-text-align, var(--container-paragraph-text-align, var(--paragraph-text-align, var(--paragraph-text-align, inherit))));
 }
+
 .card section :global(p:first-of-type),
 .card section :global(h1 + p),
 .card section :global(h2 + p),
@@ -151,6 +152,7 @@ let hasFooter = $$slots.footer;
   text-align: var(--card-first-paragraph-text-align, var(--container-first-paragraph-text-align, var(--first-paragraph-text-align, var(--first-paragraph-text-align, inherit))));
   margin-block-start: var(--card-first-paragraph-margin-top, var(--container-first-paragraph-margin-top, var(--first-paragraph-margin-top, 0)));
 }
+
 .card section :global(p:first-of-type::first-line) {
   font-family: var(--first-line-font-family, var(--card-first-line-font-family, var(--container-first-line-font-family, var(--first-line-font-family, var(--first-line-font-family, inherit)))));
   text-transform: var(--first-line-text-transform, var(--card-first-line-text-transform, var(--container-first-line-text-transform, var(--first-line-text-transform, var(--first-line-text-transform, inherit)))));
@@ -163,6 +165,7 @@ let hasFooter = $$slots.footer;
   font-variant: var(--first-line-font-variant, var(--card-first-line-font-variant, var(--container-first-line-font-variant, var(--first-line-font-variant, var(--first-line-font-variant, inherit)))));
   text-align: var(--first-line-text-align, var(--card-first-line-text-align, var(--container-first-line-text-align, var(--first-line-text-align, var(--first-line-text-align, inherit)))));
 }
+
 .card section :global(p:first-of-type::first-letter) {
   font-family: var(--first-letter-font-family, var(--card-first-letter-font-family, var(--container-first-letter-font-family, var(--container-first-letter-font-family, inherit))));
   text-transform: var(--first-letter-text-transform, var(--card-first-letter-text-transform, var(--container-first-letter-text-transform, var(--container-first-letter-text-transform, inherit))));
@@ -217,24 +220,30 @@ let hasFooter = $$slots.footer;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
 }
+
 .card.fixedHeight::-webkit-scrollbar {
   width: var(--card-scrollbar-width, var(--container-scrollbar-width, var(--scrollbar-width, 6px)));
   height: var(--card-scrollbar-height, var(--container-scrollbar-height, var(--scrollbar-height, 6px)));
 }
+
 .card.fixedHeight::-webkit-scrollbar-track {
   background: var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
 }
+
 .card.fixedHeight::-webkit-scrollbar-thumb {
   background: transparent;
   border-radius: var(--card-scrollbar-thumb-radius, var(--container-scrollbar-thumb-radius, var(--scrollbar-thumb-radius, 3px)));
   transition: background var(--card-transition, var(--container-transition, var(--transition, 300ms)));
 }
+
 .card.fixedHeight:hover {
   scrollbar-color: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3)))) var(--card-scrollbar-track-bg, var(--container-scrollbar-track-bg, var(--scrollbar-track-bg, transparent)));
 }
+
 .card.fixedHeight:hover::-webkit-scrollbar-thumb {
   background: var(--card-scrollbar-thumb-bg, var(--container-scrollbar-thumb-bg, var(--scrollbar-thumb-bg, rgba(0, 0, 0, 0.3))));
 }
+
 .card.fixedHeight:hover::-webkit-scrollbar-thumb:hover {
   background: var(--card-scrollbar-thumb-hover-bg, var(--container-scrollbar-thumb-hover-bg, var(--scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.5))));
 }
@@ -252,6 +261,8 @@ header {
   color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--card-header-padding, var(--bar-padding, var(--padding, 4px)));
   border: var(--card-header-border, var(--bar-border, var(--border, inherit)));
@@ -284,6 +295,8 @@ footer :global(h6) {
   color: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-header-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--card-header-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--card-header-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--card-header-bg, var(--secondary-bg, var(--bg, unset)));
 }
 
 footer {
@@ -291,6 +304,8 @@ footer {
   color: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
   --link-bg: var(--card-footer-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
   --link-fg: var(--card-footer-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  --fg: var(--card-footer-fg, var(--secondary-fg, var(--fg, unset)));
+  --bg: var(--card-footer-bg, var(--secondary-bg, var(--bg, unset)));
   box-sizing: border-box;
   padding: var(--card-footer-padding, var(--bar-padding, var(--padding, 4px)));
   border: var(--card-footer-border, var(--bar-border, var(--border, inherit)));

package/dist/Card.svelte.d.ts

@@ -1,27 +1,14 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        center?: boolean | undefined;
-        fixedHeight?: boolean | undefined;
-        bg?: string | null | undefined;
-        fg?: string | null | undefined;
-        padding?: string | null | undefined;
-        width?: string | null | undefined;
-        height?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        header: {};
-        default: {};
-        footer: {};
-    };
-};
-export type CardProps = typeof __propDef.props;
-export type CardEvents = typeof __propDef.events;
-export type CardSlots = typeof __propDef.slots;
-export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
-}
-export {};
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { CardStyleProps } from "./types";
+type Props = {
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    center?: boolean;
+    height?: string;
+    fixedHeight?: boolean;
+} & CardStyleProps & HTMLAttributes<HTMLElement>;
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/controls/Button.svelte

@@ -1,28 +1,11 @@
-<script>import { injectVars } from "../util";
-export let primary = false;
-export let secondary = false;
-export let warning = false;
-export let danger = false;
-export let success = false;
-export let info = false;
-let iconSlotted = $$slots.icon;
-export let bg = null;
-export let fg = null;
-export let padding = null;
-export let width = null;
-export let height = null;
-let cssVars = injectVars($$props, "button", [
-    "bg",
-    "fg",
-    "padding",
-    "width",
-    "height",
-]);
+<script lang="ts">import { injectVars } from "../util";
+let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, icon, children, ...restProps } = $props();
+const style = $derived(injectVars(restProps, "button", ["bg", "fg", "padding", "width", "height"]));
+const iconSlotted = $derived(Boolean(icon));
 </script>
 
 <button
-  style={cssVars}
-  on:click
+  {style}
   class:primary
   class:secondary
   class:warning
@@ -30,10 +13,12 @@ let cssVars = injectVars($$props, "button", [
   class:success
   class:info
   class:has-icon={iconSlotted}
-  {...$$restProps}
+  {...restProps}
 >
-  <span class="content"><slot /></span>
-  <span class:hidden={!iconSlotted} class="icon"><slot name="icon" /></span>
+  <span class="content">{@render children?.()}</span>
+  <span class:hidden={!iconSlotted} class="icon">
+    {@render icon?.()}
+  </span>
 </button>
 
 <style>/* Warning: because we define a fallback
@@ -69,6 +54,8 @@ button {
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
   box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
   font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
   text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
@@ -82,32 +69,41 @@ button {
   text-align: var(--button-text-align, var(--control-text-align, var(--control-text-align, inherit)));
   cursor: var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
   transition: filter, transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
-  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
 }
+
 button:hover {
-  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
+  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
 }
+
 button:active {
   filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
 }
+
 button:disabled {
   cursor: var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
   transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
   filter: var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
 }
+
 button:focus-visible {
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
   outline-offset: var(--focus-outline-offset, 2px);
   box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
 }
 
+button {
+  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
+}
+
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--primary-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--primary-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--primary-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -125,6 +121,8 @@ button.warning {
   color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--warning-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--warning-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--warning-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--warning-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--warning-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -142,6 +140,8 @@ button.danger {
   color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--danger-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--danger-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--danger-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -159,6 +159,8 @@ button.success {
   color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--success-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--success-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--success-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));
@@ -176,6 +178,8 @@ button.info {
   color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
   --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
   --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--info-font-family, var(--button-font-family, var(--button-font-family, inherit)));
   text-transform: var(--info-text-transform, var(--button-text-transform, var(--button-text-transform, inherit)));
   text-decoration: var(--info-text-decoration, var(--button-text-decoration, var(--button-text-decoration, inherit)));

package/dist/controls/Button.svelte.d.ts

@@ -1,32 +1,16 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        primary?: boolean | undefined;
-        secondary?: boolean | undefined;
-        warning?: boolean | undefined;
-        danger?: boolean | undefined;
-        success?: boolean | undefined;
-        info?: boolean | undefined;
-        bg?: string | null | undefined;
-        fg?: string | null | undefined;
-        padding?: string | null | undefined;
-        width?: string | null | undefined;
-        height?: string | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        icon: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { BaseStyleProps } from "../types";
+type Props = {
+    primary?: boolean;
+    secondary?: boolean;
+    warning?: boolean;
+    danger?: boolean;
+    success?: boolean;
+    info?: boolean;
+    icon?: Snippet;
+    children?: Snippet;
+} & BaseStyleProps & HTMLButtonAttributes;
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/controls/ButtonLink.svelte

@@ -1,38 +1,21 @@
-<script>import { injectVars } from "../util";
-export let primary = false;
-export let secondary = false;
-export let warning = false;
-export let danger = false;
-export let success = false;
-export let info = false;
-let iconSlotted = $$slots.icon;
-/* svelte-ignore unused-export-let */
-export let bg = null;
-/* svelte-ignore unused-export-let */
-export let fg = null;
-/* svelte-ignore unused-export-let */
-export let padding = null;
-/* svelte-ignore unused-export-let */
-export let width = null;
-/* svelte-ignore unused-export-let */
-export let height = null;
-let cssVars = injectVars($$props, "button", [
+<script lang="ts">import { injectVars } from "../util";
+let { primary = false, secondary = false, warning = false, danger = false, success = false, info = false, href = "#", id = null, icon, children, ...restProps } = $props();
+const { style: inlineStyle, ...elementProps } = restProps;
+const style = $derived(`${injectVars(elementProps, "button", [
     "bg",
     "fg",
     "padding",
     "width",
     "height",
-]);
-export let href = "#";
-export let id = null;
+])}${inlineStyle ?? ""}`);
+const iconSlotted = $derived(Boolean(icon));
 </script>
 
 <a
   role="button"
-  style={cssVars}
-  on:click
+  {style}
   {href}
-  {id}
+  id={id ?? undefined}
   class:primary
   class:secondary
   class:warning
@@ -40,10 +23,12 @@ export let id = null;
   class:success
   class:info
   class:has-icon={iconSlotted}
-  {...$$restProps}
+  {...elementProps}
 >
-  <span class="content"><slot /></span>
-  <span class:hidden={!iconSlotted} class="icon"><slot name="icon" /></span>
+  <span class="content">{@render children?.()}</span>
+  <span class:hidden={!iconSlotted} class="icon">
+    {@render icon?.()}
+  </span>
 </a>
 
 <style>/* Warning: because we define a fallback
@@ -80,6 +65,8 @@ a[role=button] {
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
   box-shadow: var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-distance, var(--control-shadow-distance, var(--shadow-distance, var(--space)))) var(--button-shadow-blur, var(--control-shadow-blur, var(--shadow-blur, var(--space)))) var(--button-shadow-color, var(--control-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
   font-family: var(--button-font-family, var(--control-font-family, var(--control-font-family, inherit)));
   text-transform: var(--button-text-transform, var(--control-text-transform, var(--control-text-transform, inherit)));
@@ -93,35 +80,45 @@ a[role=button] {
   text-align: var(--button-text-align, var(--control-text-align, var(--control-text-align, inherit)));
   cursor: var(--button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
   transition: filter, transform var(--button-transition, var(--clickable-transition, var(--transition, 300ms)));
-  text-decoration: none;
-  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
 }
+
 a[role=button]:hover {
-  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
+  filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.05))));
   transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
 }
+
 a[role=button]:active {
   filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
 }
+
 a[role=button]:disabled {
   cursor: var(--button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
   transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
   filter: var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
 }
+
 a[role=button]:focus-visible {
   outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
   outline-offset: var(--focus-outline-offset, 2px);
   box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
 }
 
+a[role=button] {
+  text-decoration: none;
+  margin: var(--button-margin, var(--control-margin, var(--margin, var(--space))));
+}
+
 a[role=button]:hover {
   text-decoration: none;
-  /* Override other link styles that may be outside us */
+  /* Override other link styles that may be outside
+  us */
   background: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
   color: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
   --link-bg: var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit))));
   --link-fg: var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit))));
+  --fg: var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset))));
+  --bg: var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset))));
 }
 
 a.primary[role=button]:hover {
@@ -129,6 +126,8 @@ a.primary[role=button]:hover {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
 }
 
 a.primary {
@@ -136,6 +135,8 @@ a.primary {
   color: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
   --link-bg: var(--primary-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
   --link-fg: var(--primary-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  --fg: var(--primary-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
+  --bg: var(--primary-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
   font-family: var(--primary-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--primary-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--primary-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -149,10 +150,12 @@ a.primary {
 }
 
 a.warning {
-  background: var(--warning-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--bg, unset)))));
-  color: var(--warning-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--fg, unset)))));
-  --link-bg: var(--warning-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
-  --link-fg: var(--warning-link-fg, var(--button-link-fg, var(--control-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
+  background: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--warning-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--warning-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--warning-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--warning-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--warning-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--warning-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--warning-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -166,10 +169,12 @@ a.warning {
 }
 
 a.danger {
-  background: var(--danger-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  color: var(--danger-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
-  --link-bg: var(--danger-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
-  --link-fg: var(--danger-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  background: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--danger-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--danger-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--danger-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--danger-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--danger-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--danger-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--danger-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -183,10 +188,12 @@ a.danger {
 }
 
 a.success {
-  background: var(--success-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  color: var(--success-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
-  --link-bg: var(--success-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
-  --link-fg: var(--success-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  background: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--success-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--success-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--success-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--success-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--success-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--success-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--success-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));
@@ -200,10 +207,12 @@ a.success {
 }
 
 a.info {
-  background: var(--info-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));
-  color: var(--info-fg, var(--button-fg, var(--control-fg, var(--fg, unset))));
-  --link-bg: var(--info-link-bg, var(--button-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
-  --link-fg: var(--info-link-fg, var(--button-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  background: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
+  color: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --link-bg: var(--info-link-bg, var(--a-link-bg, var(--control-link-bg, var(--control-link-bg, inherit))));
+  --link-fg: var(--info-link-fg, var(--a-link-fg, var(--control-link-fg, var(--control-link-fg, inherit))));
+  --fg: var(--info-fg, var(--a-fg, var(--control-fg, var(--fg, unset))));
+  --bg: var(--info-bg, var(--a-bg, var(--control-bg, var(--bg, unset))));
   font-family: var(--info-font-family, var(--a-font-family, var(--a-font-family, inherit)));
   text-transform: var(--info-text-transform, var(--a-text-transform, var(--a-text-transform, inherit)));
   text-decoration: var(--info-text-decoration, var(--a-text-decoration, var(--a-text-decoration, inherit)));