message: Add CSS variables to Freestyle
diff: @@ -9,6 +9,7 @@ import { on } from '@ember/modifier';
  import copyToClipboard from '@cardstack/boxel/helpers/copy-to-clipboard';
  import { later } from '@ember/runloop';
  import { A } from '@ember/array';
  +import cssVar from '@cardstack/boxel/helpers/css-var';
  interface Token {
  name: string;
  @@ -24,6 +25,12 @@ export default class BoxelInputGroupUsage extends Component {
  @tracked disabled = false;
  @tracked invalid = false;
  @tracked isShowingCopiedConfirmation = false;
  + @tracked paddingX = "var(--boxel-sp-sm)";
  + @tracked paddingY = "var(--boxel-sp-xxs)";
  + @tracked borderColor = "var(--boxel-purple-300)";
  + @tracked borderRadius = "var(--boxel-border-radius-sm)";
  + @tracked interiorBorderWidth = "0";
  +
  tokens = [
  { name: 'CARD', icon: 'card' },
  { name: 'HI', icon: 'emoji' },
  @@ -77,6 +84,13 @@ export default class BoxelInputGroupUsage extends Component {
  @invalid={{this.invalid}}
  @errorMessage={{this.errorMessage}}
  @helperText={{this.helperText}}
  + style={{cssVar
  + boxel-input-group-padding-x=this.paddingX
  + boxel-input-group-padding-y=this.paddingY
  + boxel-input-group-border-color=this.borderColor
  + boxel-input-group-border-radius=this.borderRadius
  + boxel-input-group-interior-border-width=this.interiorBorderWidth
  + }}
  >
  <:before as |Accessories|>
  <Accessories.Text>Something before</Accessories.Text>
  @@ -136,6 +150,41 @@ export default class BoxelInputGroupUsage extends Component {
  @name="onBlur"
  @description="Action to call when the input value loses focus"
  />
  + <Args.String
  + @name="--boxel-input-group-padding-x"
  + @description="Horizontal padding (CSS Variable)"
  + @value={{this.paddingX}}
  + @defaultValue={{unbound this.paddingX}}
  + @onInput={{fn (mut this.paddingX)}}
  + />
  + <Args.String
  + @name="--boxel-input-group-padding-y"
  + @description="Vertical padding (CSS Variable)"
  + @value={{this.paddingY}}
  + @defaultValue={{unbound this.paddingY}}
  + @onInput={{fn (mut this.paddingY)}}
  + />
  + <Args.String
  + @name="--boxel-input-group-border-color"
  + @description="Border color (CSS Variable)"
  + @value={{this.borderColor}}
  + @defaultValue={{unbound this.borderColor}}
  + @onInput={{fn (mut this.borderColor)}}
  + />
  + <Args.String
  + @name="--boxel-input-group-border-radius"
  + @description="Border radius (CSS Variable)"
  + @value={{this.borderRadius}}
  + @defaultValue={{unbound this.borderRadius}}
  + @onInput={{fn (mut this.borderRadius)}}
  + />
  + <Args.String
  + @name="--boxel-input-group-interior-border-width"
  + @description="Interior border width (CSS Variable). Set to zero for no interior borders"
  + @value={{this.interiorBorderWidth}}
  + @defaultValue={{unbound this.interiorBorderWidth}}
  + @onInput={{fn (mut this.interiorBorderWidth)}}
  + />
  </:api>
  </FreestyleUsage>
  <style>
  