@labcat2020/rocketship-svelte 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,99 @@
-# Temporary Holding Version
+# @labcat2020/rocketship-svelte
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Svelte 5 port of the Rocketship component library. Components reuse the same design system as the Astro package (`@labcat2020/rocketship`): design tokens, the mixin barrel, and the base resets are shared, not duplicated.
+
+Components are either copy-style ports of their Astro originals, or Svelte-first components with no Astro original yet. Either way they render the same BEM classes and follow the same props, token, `:global` style, container-query and a11y conventions, so an Astro version can be ported back from a Svelte-first component. A Svelte-first component is provisional — it may change once the matching Astro component's platinum standard lands, and Astro is the source of truth when the two diverge.
+
+## Components
+
+| Component    | Export                                                | Astro original     |
+| ------------ | ----------------------------------------------------- | ------------------ |
+| `Container`  | `@labcat2020/rocketship-svelte/components/Container`  | `Container.astro`  |
+| `Grid`       | `@labcat2020/rocketship-svelte/components/Grid`       | `Grid.astro`       |
+| `Card`       | `@labcat2020/rocketship-svelte/components/Card`       | `Card.astro`       |
+| `Typography` | `@labcat2020/rocketship-svelte/components/Typography` | `Typography.astro` |
+| `Button`     | `@labcat2020/rocketship-svelte/components/Button`     | `Button.astro`     |
+| `Alert`      | `@labcat2020/rocketship-svelte/components/Alert`      | `Alert.astro`      |
+| `Table`      | `@labcat2020/rocketship-svelte/components/Table`      | — (Svelte-first)   |
+| `Field`      | `@labcat2020/rocketship-svelte/components/Field`      | — (Svelte-first)   |
+| `Label`      | `@labcat2020/rocketship-svelte/components/Label`      | — (Svelte-first)   |
+| `Disclosure` | `@labcat2020/rocketship-svelte/components/Disclosure` | — (Svelte-first)   |
+| `Accordion`  | `@labcat2020/rocketship-svelte/components/Accordion`  | — (Svelte-first)   |
+| `Figure`     | `@labcat2020/rocketship-svelte/components/Figure`     | — (Svelte-first)   |
+
+Import components from their `./components/*` subpaths. Those subpaths are the package's public surface; deep imports such as `@labcat2020/rocketship-svelte/src/components/Container.svelte` are not exported and will not resolve.
+
+```svelte
+<script lang="ts">
+  import Container from '@labcat2020/rocketship-svelte/components/Container'
+  import Grid from '@labcat2020/rocketship-svelte/components/Grid'
+  import Card from '@labcat2020/rocketship-svelte/components/Card'
+  import Typography from '@labcat2020/rocketship-svelte/components/Typography'
+  import Button from '@labcat2020/rocketship-svelte/components/Button'
+</script>
+
+<Container as="main" size="content" padded>
+  <Typography as="article">
+    <h1>Title</h1>
+    <p>Body copy.</p>
+  </Typography>
+  <Grid columns={3}>
+    <Card>…</Card>
+    <Card>…</Card>
+    <Card>…</Card>
+  </Grid>
+  <Button variant="primary">Continue</Button>
+</Container>
+```
+
+Each component spreads unknown attributes onto its rendered element and composes an incoming `class` with its BEM block.
+
+| Component    | Props                                                                                                                                         |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Container`  | `as` (`div`, `section`, `main`, `article`, `header`, `footer`, `nav`), `size` (`default`, `content`, `wide`, `full`), `padded`, `class`       |
+| `Grid`       | `as` (`div`, `ul`, `ol`), `columns` (`2`, `3`, `4`), `class`                                                                                  |
+| `Card`       | `as` (`article`, `section`, `div`, `li`), `media` snippet, `meta` snippet, `class`                                                            |
+| `Typography` | `as` (`div`, `section`, `article`), `html`, `class`                                                                                           |
+| `Button`     | `as` (`button`, `a`), `href`, `variant` (`primary`, `secondary`, `ghost`), `size` (`small`, `medium`, `large`), `disabled`, `type`, `class`   |
+| `Alert`      | `as` (`div`, `section`, `aside`, `article`), `variant` (`info`, `success`, `warning`, `error`), `title`, `titleSlot` snippet, `role`, `class` |
+| `Figure`     | `as` (`figure`, `div`), `variant` (`default`, `bordered`), `captionAlign` (`start`, `center`), `caption`, `captionSlot` snippet, `class`      |
+
+### `Typography` `html` prop
+
+`Typography` keeps the `html` prop: pass a string and it renders as raw markup inside the wrapper, taking precedence over the `children` snippet. It is the Svelte equivalent of the Astro component's `set:html`.
+
+**Sanitize before you pass it.** The prop renders trusted HTML verbatim and does not sanitize its input, so it is only safe for content you control or content already sanitized at the boundary. Never pass unsanitized user input, request data, or third-party HTML through it — run it through a sanitizer (for example DOMPurify) first, or render structured markup with the `children` snippet instead.
+
+## Install
+
+```bash
+npm install @labcat2020/rocketship-svelte @labcat2020/rocketship
+```
+
+## Usage
+
+Import the base styles (tokens + default theme) once in your app, exactly as with the Astro package:
+
+```js
+import '@labcat2020/rocketship/styles'
+```
+
+Inside a component's `<style lang="scss">` block, import the shared mixin barrel:
+
+```scss
+@use '@labcat2020/rocketship/styles/mixins' as *;
+```
+
+`./styles/mixins` is a stable export of `@labcat2020/rocketship` and resolves to `src/styles/mixins.scss`, the barrel that forwards the functions, breakpoint, container-query, and typography mixins. Import the barrel — never individual partials under `mixins/`.
+
+## Theming
+
+Theming is CSS-variable based and unchanged from the Astro library. Components reference the global `--rs-*` tokens and expose `--rs-<component>-*` override hooks. Adopters can override tokens and component variables from `:root` or any ancestor.
+
+## Scripts
+
+```bash
+pnpm build   # compile TypeScript
+pnpm check   # svelte-check
+pnpm test    # node --test
+```

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as Figure } from './components/Figure.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Table } from './components/Table.svelte';
+export type * from './components/Accordion.svelte';
+export type * from './components/Disclosure.svelte';
+export type * from './components/Field.svelte';
+export type * from './components/Figure.svelte';
+export type * from './components/Label.svelte';
+export type * from './components/Table.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,4BAA4B,CAAA;AAC/C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA"}

package/dist/index.js

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as Figure } from './components/Figure.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Table } from './components/Table.svelte';

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@labcat2020/rocketship-svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "private": false,
+  "type": "module",
+  "description": "Rocketship Svelte port — Svelte 5 components that reuse the Rocketship design system (tokens, mixins, base resets)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LABCAT/rocketship.git",
+    "directory": "packages/svelte"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./components/Alert": "./src/components/Alert.svelte",
+    "./components/Accordion": "./src/components/Accordion.svelte",
+    "./components/Button": "./src/components/Button.svelte",
+    "./components/Card": "./src/components/Card.svelte",
+    "./components/Container": "./src/components/Container.svelte",
+    "./components/Disclosure": "./src/components/Disclosure.svelte",
+    "./components/Field": "./src/components/Field.svelte",
+    "./components/Figure": "./src/components/Figure.svelte",
+    "./components/Grid": "./src/components/Grid.svelte",
+    "./components/Label": "./src/components/Label.svelte",
+    "./components/Table": "./src/components/Table.svelte",
+    "./components/Typography": "./src/components/Typography.svelte"
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@labcat2020/rocketship": "0.2.0"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "axe-core": "4.11.1",
+    "jsdom": "^30.1.2",
+    "sass": "^1.105.1",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.6",
+    "vite": "^8.2.1"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "node --test"
+  }
 }

package/src/components/Accordion.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { untrack } from 'svelte'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { setAccordion, type AccordionItem } from './Disclosure.svelte'
+
+  export type AccordionMode = 'multiple' | 'single'
+  export type AccordionTag = 'div' | 'section' | 'article' | 'ul'
+
+  type Props = {
+    as?: AccordionTag
+    mode?: AccordionMode
+    class?: string
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    mode = 'multiple',
+    class: className = '',
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const items = new Set<AccordionItem>()
+  let lastOpened: AccordionItem | undefined
+
+  const closeSiblings = (item: AccordionItem) => {
+    if (mode !== 'single') return
+    for (const other of items) {
+      if (other !== item) other.close()
+    }
+  }
+
+  setAccordion({
+    register: (item) => {
+      items.add(item)
+    },
+    unregister: (item) => {
+      items.delete(item)
+      if (lastOpened === item) lastOpened = undefined
+    },
+    opened: (item) => {
+      lastOpened = item
+      closeSiblings(item)
+    },
+  })
+
+  // Switching to single mode at runtime must reconcile panels that are already open,
+  // keeping the most recently opened one. `untrack` avoids subscribing to child state.
+  $effect(() => {
+    if (mode !== 'single') return
+    untrack(() => {
+      const open = [...items].filter((item) => item.isOpen())
+      if (open.length <= 1) return
+      const keep = lastOpened && open.includes(lastOpened) ? lastOpened : open[open.length - 1]
+      for (const item of open) {
+        if (item !== keep) item.close()
+      }
+    })
+  })
+
+  const classes = $derived(
+    ['rs-accordion', mode === 'single' ? 'rs-accordion--single' : undefined, className]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<svelte:element this={as} {...attrs} class={classes}>
+  {@render children?.()}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-accordion {
+      --rs-accordion-gap: var(--rs-space-2, 8px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--rs-accordion-gap);
+
+      &--single {
+        --rs-accordion-gap: 0;
+      }
+    }
+  }
+</style>

package/src/components/Alert.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type AlertVariant = 'info' | 'success' | 'warning' | 'error'
+  export type AlertTag = 'div' | 'section' | 'aside' | 'article'
+
+  type Props = {
+    as?: AlertTag
+    variant?: AlertVariant
+    title?: string
+    role?: 'alert' | 'status'
+    class?: string
+    titleSlot?: Snippet
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    variant = 'info',
+    title,
+    role: roleProp,
+    class: className = '',
+    titleSlot,
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const role = $derived(roleProp ?? (variant === 'error' || variant === 'warning' ? 'alert' : 'status'))
+
+  const classes = $derived(['rs-alert', `rs-alert--${variant}`, className].filter(Boolean).join(' '))
+</script>
+
+<svelte:element this={as} {...attrs} class={classes} role={role}>
+  {#if title}
+    <h4 class="rs-alert__title">{title}</h4>
+  {:else if titleSlot}
+    <h4 class="rs-alert__title">
+      {@render titleSlot()}
+    </h4>
+  {/if}
+  <div class="rs-alert__body">
+    {@render children?.()}
+  </div>
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-alert {
+      --rs-alert-bg: var(--rs-color-surface-elevated, #eef2ff);
+      --rs-alert-color: var(--rs-color-fg, #131a2f);
+      --rs-alert-border-color: var(--rs-color-border, #c8d2eb);
+      --rs-alert-accent-color: var(--rs-color-accent, #2f5bdb);
+      display: flex;
+      flex-direction: column;
+      gap: var(--rs-alert-gap, var(--rs-space-2, 8px));
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      background: var(--rs-alert-bg);
+      border: var(--rs-alert-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-alert-border-color);
+      border-inline-start: var(--rs-alert-accent-width, var(--rs-border-width-lg, 4px)) solid
+        var(--rs-alert-accent-color);
+      border-radius: var(--rs-alert-border-radius, var(--rs-radius-md, 10px));
+      color: var(--rs-alert-color);
+      padding-block: var(--rs-alert-padding-block, var(--rs-space-3, 12px));
+      padding-inline: var(--rs-alert-padding-inline, var(--rs-space-4, 16px));
+
+      @include container-query-up($rs-cq-sm) {
+        gap: var(--rs-alert-gap, var(--rs-space-3, 12px));
+        padding-block: var(--rs-alert-padding-block, var(--rs-space-4, 16px));
+        padding-inline: var(--rs-alert-padding-inline, var(--rs-space-5, 20px));
+      }
+
+      &--success {
+        --rs-alert-bg: var(--rs-color-success-bg, #e6f4ea);
+        --rs-alert-border-color: var(--rs-color-success-border, #a7d8b5);
+        --rs-alert-accent-color: var(--rs-color-success-accent, #1a7a32);
+        --rs-alert-color: var(--rs-color-success-fg, #0f2a18);
+      }
+
+      &--warning {
+        --rs-alert-bg: var(--rs-color-warning-bg, #fff8e1);
+        --rs-alert-border-color: var(--rs-color-warning-border, #f0c36a);
+        --rs-alert-accent-color: var(--rs-color-warning-accent, #9a5d00);
+        --rs-alert-color: var(--rs-color-warning-fg, #3d2800);
+      }
+
+      &--error {
+        --rs-alert-bg: var(--rs-color-danger-bg, #ffeef0);
+        --rs-alert-border-color: var(--rs-color-danger-border, #f0a8b0);
+        --rs-alert-accent-color: var(--rs-color-danger-accent, #c5221f);
+        --rs-alert-color: var(--rs-color-danger-fg, #3d0a08);
+      }
+
+      &__title {
+        color: var(--rs-alert-color);
+        font-size: var(--rs-alert-title-font-size, var(--rs-font-size-md, #{to-rem(16)}));
+        font-weight: var(--rs-alert-title-font-weight, var(--rs-font-weight-semibold, 600));
+        line-height: var(--rs-alert-title-line-height, var(--rs-line-height-tight, 1.2));
+        margin: 0;
+
+        @include container-query-up($rs-cq-sm) {
+          font-size: var(--rs-alert-title-font-size, var(--rs-font-size-lg, #{to-rem(18)}));
+        }
+      }
+
+      &__body {
+        color: var(--rs-alert-color);
+        font-size: var(--rs-alert-body-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+        line-height: var(--rs-alert-body-line-height, var(--rs-line-height-base, 1.45));
+        margin: 0;
+
+        @include container-query-up($rs-cq-sm) {
+          font-size: var(--rs-alert-body-font-size, var(--rs-font-size-md, #{to-rem(16)}));
+        }
+      }
+    }
+  }
+</style>

package/src/components/Button.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+
+  export type ButtonVariant = 'primary' | 'secondary' | 'ghost'
+  export type ButtonSize = 'small' | 'medium' | 'large'
+  export type ButtonTag = 'button' | 'a'
+
+  type NativeButtonType = 'button' | 'submit' | 'reset'
+
+  type Props = {
+    as?: ButtonTag
+    href?: string
+    variant?: ButtonVariant
+    size?: ButtonSize
+    disabled?: boolean
+    type?: NativeButtonType
+    class?: string
+    children?: Snippet
+  } & HTMLButtonAttributes &
+    HTMLAnchorAttributes
+
+  let {
+    as = 'button',
+    href,
+    variant = 'primary',
+    size = 'medium',
+    disabled = false,
+    type = 'button',
+    class: className = '',
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const classes = $derived(
+    ['rs-button', `rs-button--${variant}`, `rs-button--${size}`, className].filter(Boolean).join(' '),
+  )
+
+  const shouldRenderAsLink = $derived(as === 'a' || Boolean(href))
+</script>
+
+{#if shouldRenderAsLink}
+  <a
+    {...attrs}
+    aria-disabled={disabled || undefined}
+    class={classes}
+    href={disabled ? undefined : (href ?? '#')}
+    role={disabled ? 'link' : undefined}
+    tabindex={disabled ? -1 : undefined}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button {...attrs} class={classes} disabled={disabled} type={type}>
+    {@render children?.()}
+  </button>
+{/if}
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-button {
+      all: unset;
+      --rs-button-bg: var(--rs-color-accent, #2f5bdb);
+      --rs-button-color: var(--rs-color-accent-contrast, #ffffff);
+      --rs-button-border-color: var(--rs-color-accent, #2f5bdb);
+      --rs-button-border-width: var(--rs-border-width, 1px);
+      --rs-button-border-radius: var(--rs-radius-pill, 999px);
+      --rs-button-font-size: var(--rs-font-size-sm, #{to-rem(14)});
+      --rs-button-font-weight: var(--rs-font-weight-semibold, 600);
+      --rs-button-line-height: var(--rs-line-height-tight, 1.2);
+      --rs-button-padding-inline: var(--rs-space-3, 12px);
+      --rs-button-min-height: 36px;
+      --rs-button-gap: var(--rs-space-2, 8px);
+      --rs-button-focus-ring-color: var(--rs-color-focus-ring, #296dff);
+      box-sizing: border-box;
+      align-items: center;
+      background: var(--rs-button-bg);
+      border: var(--rs-button-border-width) solid var(--rs-button-border-color);
+      border-radius: var(--rs-button-border-radius);
+      color: var(--rs-button-color);
+      cursor: pointer;
+      display: inline-flex;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-button-font-size);
+      font-weight: var(--rs-button-font-weight);
+      gap: var(--rs-button-gap);
+      justify-content: center;
+      line-height: var(--rs-button-line-height);
+      min-height: var(--rs-button-min-height);
+      padding-block: 8px;
+      padding-inline: var(--rs-button-padding-inline);
+      text-decoration: none;
+      transition:
+        background-color var(--rs-transition-fast, 140ms) ease,
+        border-color var(--rs-transition-fast, 140ms) ease,
+        color var(--rs-transition-fast, 140ms) ease,
+        opacity var(--rs-transition-fast, 140ms) ease;
+      white-space: nowrap;
+
+      &:hover {
+        filter: brightness(1.08);
+      }
+
+      &:active {
+        filter: brightness(0.94);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--rs-button-focus-ring-color);
+        outline-offset: 2px;
+      }
+
+      &:disabled,
+      &[aria-disabled='true'] {
+        cursor: not-allowed;
+        opacity: 0.55;
+        pointer-events: none;
+      }
+
+      &--secondary {
+        --rs-button-bg: var(--rs-color-surface, #ffffff);
+        --rs-button-border-color: var(--rs-color-accent, #2f5bdb);
+        --rs-button-border-width: var(--rs-border-width-md, 2px);
+        --rs-button-color: var(--rs-color-accent, #2f5bdb);
+
+        &:hover {
+          filter: none;
+          --rs-button-bg: var(--rs-color-surface-elevated, #eef2ff);
+          --rs-button-border-color: var(--rs-color-link-hover, #173ea8);
+          --rs-button-color: var(--rs-color-link-hover, #173ea8);
+        }
+      }
+
+      &--ghost {
+        --rs-button-bg: transparent;
+        --rs-button-border-color: transparent;
+        --rs-button-border-width: var(--rs-border-width-md, 2px);
+        --rs-button-color: var(--rs-color-accent, #2f5bdb);
+
+        &:hover {
+          filter: none;
+          --rs-button-bg: var(--rs-color-surface-elevated, #eef2ff);
+        }
+      }
+
+      &--small {
+        --rs-button-font-size: var(--rs-button-font-size-sm);
+        --rs-button-min-height: var(--rs-button-min-height-sm);
+        --rs-button-padding-inline: var(--rs-button-padding-inline-sm);
+      }
+
+      &--medium {
+        --rs-button-font-size: var(--rs-button-font-size-md);
+        --rs-button-min-height: var(--rs-button-min-height-md);
+        --rs-button-padding-inline: var(--rs-button-padding-inline-md);
+      }
+
+      &--large {
+        --rs-button-font-size: var(--rs-button-font-size-lg);
+        --rs-button-min-height: var(--rs-button-min-height-lg);
+        --rs-button-padding-inline: var(--rs-button-padding-inline-lg);
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-button-font-size-sm: var(--rs-button-font-size-sm-cq);
+        --rs-button-font-size-md: var(--rs-button-font-size-md-cq);
+        --rs-button-font-size-lg: var(--rs-button-font-size-lg-cq);
+        --rs-button-min-height-sm: var(--rs-button-min-height-sm-cq);
+        --rs-button-min-height-md: var(--rs-button-min-height-md-cq);
+        --rs-button-min-height-lg: var(--rs-button-min-height-lg-cq);
+        --rs-button-padding-inline-sm: var(--rs-button-padding-inline-sm-cq);
+        --rs-button-padding-inline-md: var(--rs-button-padding-inline-md-cq);
+        --rs-button-padding-inline-lg: var(--rs-button-padding-inline-lg-cq);
+      }
+    }
+  }
+</style>