@troychaplin/parlour-ui 0.1.0

package/dist/components/Button/styles.css

@@ -0,0 +1,120 @@
+.parlour-button,
+a.parlour-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: var(--parlour--spacing-small) var(--parlour--spacing-medium);
+  font-family: var(--parlour--font-family-inter-tight);
+  font-size: var(--parlour--font-size-medium);
+  font-weight: var(--parlour--font-weight-light);
+  line-height: var(--parlour--line-height-tight);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--parlour--radius-sm);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.parlour-button:hover, .parlour-button.parlour-button--outline:hover,
+a.parlour-button:hover,
+a.parlour-button.parlour-button--outline:hover {
+  text-decoration: none;
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-accent-secondary);
+  border-color: var(--parlour--color-accent-secondary);
+}
+
+.parlour-button--light {
+  color: var(--parlour--color-neutral-900);
+  background-color: var(--parlour--color-neutral-100);
+  border-color: var(--parlour--color-neutral-100);
+}
+.parlour-button--light.parlour-button--outline {
+  color: var(--parlour--color-neutral-900);
+  background-color: var(--parlour--color-neutral-100);
+}
+
+.parlour-button--link {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-accent-secondary);
+  border-color: var(--parlour--color-accent-secondary);
+}
+.parlour-button--link:hover {
+  background-color: var(--parlour--color-neutral-800);
+  border-color: var(--parlour--color-neutral-800);
+}
+.parlour-button--link.parlour-button--outline {
+  color: var(--parlour--color-accent-secondary);
+  background-color: var(--parlour--color-white);
+}
+.parlour-button--link.parlour-button--outline:hover {
+  background-color: var(--parlour--color-neutral-800);
+  border-color: var(--parlour--color-neutral-800);
+}
+
+.parlour-button--medium {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-800);
+  border-color: var(--parlour--color-neutral-800);
+}
+.parlour-button--medium.parlour-button--outline {
+  color: var(--parlour--color-neutral-800);
+  background-color: var(--parlour--color-white);
+}
+
+.parlour-button--dark {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-900);
+  border-color: var(--parlour--color-neutral-900);
+}
+.parlour-button--dark.parlour-button--outline {
+  color: var(--parlour--color-neutral-900);
+  background-color: var(--parlour--color-white);
+}
+
+.parlour-button--white {
+  color: var(--parlour--color-neutral-800);
+  background-color: var(--parlour--color-white);
+  border-color: var(--parlour--color-white);
+}
+.parlour-button--white.parlour-button--outline {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-800);
+}
+
+.parlour-button--disabled {
+  color: var(--parlour--color-neutral-800);
+  background-color: var(--parlour--color-neutral-300);
+  border-color: var(--parlour--color-neutral-300);
+  cursor: default;
+}
+
+.parlour-button--small,
+a.parlour-button--small {
+  padding: var(--parlour--spacing-x-small) var(--parlour--spacing-small);
+  font-size: var(--parlour--font-size-small);
+}
+
+.parlour-button--full {
+  width: 100%;
+}
+
+.parlour-button--radius-sm {
+  border-radius: var(--parlour--radius-sm);
+}
+
+.parlour-button--radius-md {
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-button--radius-lg {
+  border-radius: var(--parlour--radius-lg);
+}
+
+.parlour-button--radius-full {
+  border-radius: var(--parlour--radius-full);
+}
+
+.parlour-button--radius-none {
+  border-radius: 0;
+}

package/dist/components/Button/styles.scss

@@ -0,0 +1,120 @@
+.parlour-button,
+a.parlour-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: var(--parlour--spacing-small) var(--parlour--spacing-medium);
+  font-family: var(--parlour--font-family-inter-tight);
+  font-size: var(--parlour--font-size-medium);
+  font-weight: var(--parlour--font-weight-light);
+  line-height: var(--parlour--line-height-tight);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--parlour--radius-sm);
+  white-space: nowrap;
+  cursor: pointer;
+}
+.parlour-button:hover, .parlour-button.parlour-button--outline:hover,
+a.parlour-button:hover,
+a.parlour-button.parlour-button--outline:hover {
+  text-decoration: none;
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-accent-secondary);
+  border-color: var(--parlour--color-accent-secondary);
+}
+
+.parlour-button--light {
+  color: var(--parlour--color-neutral-900);
+  background-color: var(--parlour--color-neutral-100);
+  border-color: var(--parlour--color-neutral-100);
+}
+.parlour-button--light.parlour-button--outline {
+  color: var(--parlour--color-neutral-900);
+  background-color: var(--parlour--color-neutral-100);
+}
+
+.parlour-button--link {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-accent-secondary);
+  border-color: var(--parlour--color-accent-secondary);
+}
+.parlour-button--link:hover {
+  background-color: var(--parlour--color-neutral-800);
+  border-color: var(--parlour--color-neutral-800);
+}
+.parlour-button--link.parlour-button--outline {
+  color: var(--parlour--color-accent-secondary);
+  background-color: var(--parlour--color-white);
+}
+.parlour-button--link.parlour-button--outline:hover {
+  background-color: var(--parlour--color-neutral-800);
+  border-color: var(--parlour--color-neutral-800);
+}
+
+.parlour-button--medium {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-800);
+  border-color: var(--parlour--color-neutral-800);
+}
+.parlour-button--medium.parlour-button--outline {
+  color: var(--parlour--color-neutral-800);
+  background-color: var(--parlour--color-white);
+}
+
+.parlour-button--dark {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-900);
+  border-color: var(--parlour--color-neutral-900);
+}
+.parlour-button--dark.parlour-button--outline {
+  color: var(--parlour--color-neutral-900);
+  background-color: var(--parlour--color-white);
+}
+
+.parlour-button--white {
+  color: var(--parlour--color-neutral-800);
+  background-color: var(--parlour--color-white);
+  border-color: var(--parlour--color-white);
+}
+.parlour-button--white.parlour-button--outline {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-neutral-800);
+}
+
+.parlour-button--disabled {
+  color: var(--parlour--color-neutral-800);
+  background-color: var(--parlour--color-neutral-300);
+  border-color: var(--parlour--color-neutral-300);
+  cursor: default;
+}
+
+.parlour-button--small,
+a.parlour-button--small {
+  padding: var(--parlour--spacing-x-small) var(--parlour--spacing-small);
+  font-size: var(--parlour--font-size-small);
+}
+
+.parlour-button--full {
+  width: 100%;
+}
+
+.parlour-button--radius-sm {
+  border-radius: var(--parlour--radius-sm);
+}
+
+.parlour-button--radius-md {
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-button--radius-lg {
+  border-radius: var(--parlour--radius-lg);
+}
+
+.parlour-button--radius-full {
+  border-radius: var(--parlour--radius-full);
+}
+
+.parlour-button--radius-none {
+  border-radius: 0;
+}

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { justifyClasses } from '../../utils/propClasses';
+type ButtonGroupAlign = keyof typeof justifyClasses;
+export interface ButtonGroupProps {
+    children: React.ReactNode;
+    align?: ButtonGroupAlign;
+}
+export declare const ButtonGroup: ({ children, align }: ButtonGroupProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/components/ButtonGroup/ButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,eAAe,CAAC;AAEvB,KAAK,gBAAgB,GAAG,MAAM,OAAO,cAAc,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,GAAI,qBAA+B,gBAAgB,sBAE1E,CAAC"}

package/dist/components/ButtonGroup/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/ButtonGroup-ChqwMTps.cjs");exports.ButtonGroup=e.t;

package/dist/components/ButtonGroup/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+declare const justifyClasses: {
+    start: string;
+    end: string;
+    center: string;
+};
+
+type ButtonGroupAlign = keyof typeof justifyClasses;
+interface ButtonGroupProps {
+    children: React.ReactNode;
+    align?: ButtonGroupAlign;
+}
+declare const ButtonGroup: ({ children, align }: ButtonGroupProps) => React.JSX.Element;
+
+export { ButtonGroup };
+export type { ButtonGroupProps };

package/dist/components/ButtonGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/ButtonGroup/index.mjs

@@ -0,0 +1,2 @@
+import { t as e } from "../_shared/ButtonGroup-B0V_8y-2.mjs";
+export { e as ButtonGroup };

package/dist/components/ButtonGroup/styles.css

@@ -0,0 +1,22 @@
+.parlour-buttongroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--parlour--spacing-2-x-small);
+}
+@media (width > 768px) {
+  .parlour-buttongroup {
+    flex: 1 1 0%;
+  }
+}
+
+.parlour-buttongroup--justify-start {
+  justify-content: flex-start;
+}
+
+.parlour-buttongroup--justify-center {
+  justify-content: center;
+}
+
+.parlour-buttongroup--justify-end {
+  justify-content: flex-end;
+}

package/dist/components/ButtonGroup/styles.scss

@@ -0,0 +1,22 @@
+.parlour-buttongroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--parlour--spacing-2-x-small);
+}
+@media (width > 768px) {
+  .parlour-buttongroup {
+    flex: 1 1 0%;
+  }
+}
+
+.parlour-buttongroup--justify-start {
+  justify-content: flex-start;
+}
+
+.parlour-buttongroup--justify-center {
+  justify-content: center;
+}
+
+.parlour-buttongroup--justify-end {
+  justify-content: flex-end;
+}

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,16 @@
+import { backgroundColorClasses, borderRadiusClasses, spacingClasses } from '../../utils/propClasses';
+type surfaceKeys = keyof typeof backgroundColorClasses;
+type borderRadiusKeys = keyof typeof borderRadiusClasses;
+type spacingKeys = keyof typeof spacingClasses;
+export interface CardProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    as?: 'div' | 'article' | 'li';
+    backgroundColor?: surfaceKeys;
+    border?: boolean;
+    borderColor?: surfaceKeys;
+    borderRadius?: borderRadiusKeys;
+    padding?: spacingKeys;
+}
+export declare const Card: ({ children, as, backgroundColor, border, borderColor, borderRadius, padding, className, ...rest }: CardProps) => import('react').JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,EACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,eAAe,CAAC;AAEvB,KAAK,WAAW,GAAG,MAAM,OAAO,sBAAsB,CAAC;AACvD,KAAK,gBAAgB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AACzD,KAAK,WAAW,GAAG,MAAM,OAAO,cAAc,CAAC;AAE/C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAChE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,OAAO,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,eAAO,MAAM,IAAI,GAAI,mGAUlB,SAAS,gCAoBX,CAAC"}

package/dist/components/Card/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../_shared/propClasses-CLbmpfVJ.cjs");let t=require("react/jsx-runtime");var n=({children:n,as:r=`div`,backgroundColor:i=`light`,border:a=!0,borderColor:o=`light`,borderRadius:s=`none`,padding:c=`large`,className:l,...u})=>{let d=r,f=[`parlour-card`,`parlour-card--bg-${e.t[i]}`,a&&`parlour-card--border`,a&&`parlour-card--border-${e.t[o]}`,`parlour-card--radius-${e.n[s]}`,`parlour-card--padding-${e.s[c]}`,l].filter(Boolean).join(` `);return(0,t.jsx)(d,{className:f,...u,children:n})};exports.Card=n;

package/dist/components/Card/index.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+
+declare const spacingClasses: {
+    '3-x-small': "3-x-small";
+    '2-x-small': "2-x-small";
+    'x-small': "x-small";
+    small: "small";
+    normal: "normal";
+    medium: "medium";
+    large: "large";
+    'x-large': "x-large";
+    '2-x-large': "2-x-large";
+    '3-x-large': "3-x-large";
+    '4-x-large': "4-x-large";
+    '5-x-large': "5-x-large";
+    none: string;
+};
+declare const borderRadiusClasses: {
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+    xl: "xl";
+    full: "full";
+    none: string;
+};
+declare const backgroundColorClasses: {
+    light: string;
+    medium: string;
+    dark: string;
+    white: string;
+};
+
+type surfaceKeys = keyof typeof backgroundColorClasses;
+type borderRadiusKeys = keyof typeof borderRadiusClasses;
+type spacingKeys = keyof typeof spacingClasses;
+interface CardProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    as?: 'div' | 'article' | 'li';
+    backgroundColor?: surfaceKeys;
+    border?: boolean;
+    borderColor?: surfaceKeys;
+    borderRadius?: borderRadiusKeys;
+    padding?: spacingKeys;
+}
+declare const Card: ({ children, as, backgroundColor, border, borderColor, borderRadius, padding, className, ...rest }: CardProps) => react.JSX.Element;
+
+export { Card };
+export type { CardProps };

package/dist/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/Card/index.mjs

@@ -0,0 +1,21 @@
+import { n as e, s as t, t as n } from "../_shared/propClasses-R9s_eOfA.mjs";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Card/Card.tsx
+var i = ({ children: i, as: a = "div", backgroundColor: o = "light", border: s = !0, borderColor: c = "light", borderRadius: l = "none", padding: u = "large", className: d, ...f }) => {
+	let p = a, m = [
+		"parlour-card",
+		`parlour-card--bg-${n[o]}`,
+		s && "parlour-card--border",
+		s && `parlour-card--border-${n[c]}`,
+		`parlour-card--radius-${e[l]}`,
+		`parlour-card--padding-${t[u]}`,
+		d
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ r(p, {
+		className: m,
+		...f,
+		children: i
+	});
+};
+//#endregion
+export { i as Card };

package/dist/components/Card/styles.css

@@ -0,0 +1,133 @@
+.parlour-card {
+  min-width: 0;
+}
+.parlour-card > :first-child {
+  margin-top: 0;
+}
+.parlour-card > :last-child {
+  margin-bottom: 0;
+}
+.parlour-card.parlour-card :is(h1, h2, h3, h4, h5, h6) {
+  color: inherit;
+}
+
+li.parlour-card {
+  list-style: none;
+}
+
+.parlour-card--bg-white {
+  background-color: var(--parlour--color-white);
+  color: var(--parlour--color-black);
+}
+
+.parlour-card--bg-light {
+  background-color: var(--parlour--color-neutral-50);
+  color: var(--parlour--color-black);
+}
+
+.parlour-card--bg-medium {
+  background-color: var(--parlour--color-neutral-900);
+  color: var(--parlour--color-white);
+}
+
+.parlour-card--bg-dark {
+  background-color: var(--parlour--color-neutral-950);
+  color: var(--parlour--color-white);
+}
+
+.parlour-card--border {
+  border-width: 1px;
+  border-style: solid;
+}
+
+.parlour-card--border-white {
+  border-color: var(--parlour--color-white);
+}
+
+.parlour-card--border-light {
+  border-color: var(--parlour--color-neutral-300);
+}
+
+.parlour-card--border-medium {
+  border-color: var(--parlour--color-neutral-500);
+}
+
+.parlour-card--border-dark {
+  border-color: var(--parlour--color-neutral-900);
+}
+
+.parlour-card--radius-none {
+  border-radius: 0;
+}
+
+.parlour-card--radius-sm {
+  border-radius: var(--parlour--radius-sm);
+}
+
+.parlour-card--radius-md {
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-card--radius-lg {
+  border-radius: var(--parlour--radius-lg);
+}
+
+.parlour-card--radius-xl {
+  border-radius: var(--parlour--radius-xl);
+}
+
+.parlour-card--radius-full {
+  border-radius: var(--parlour--radius-full);
+}
+
+.parlour-card--padding-none {
+  padding: 0;
+}
+
+.parlour-card--padding-3-x-small {
+  padding: var(--parlour--spacing-3-x-small);
+}
+
+.parlour-card--padding-2-x-small {
+  padding: var(--parlour--spacing-2-x-small);
+}
+
+.parlour-card--padding-x-small {
+  padding: var(--parlour--spacing-x-small);
+}
+
+.parlour-card--padding-small {
+  padding: var(--parlour--spacing-small);
+}
+
+.parlour-card--padding-normal {
+  padding: var(--parlour--spacing-normal);
+}
+
+.parlour-card--padding-medium {
+  padding: var(--parlour--spacing-medium);
+}
+
+.parlour-card--padding-large {
+  padding: var(--parlour--spacing-large);
+}
+
+.parlour-card--padding-x-large {
+  padding: var(--parlour--spacing-x-large);
+}
+
+.parlour-card--padding-2-x-large {
+  padding: var(--parlour--spacing-2-x-large);
+}
+
+.parlour-card--padding-3-x-large {
+  padding: var(--parlour--spacing-3-x-large);
+}
+
+.parlour-card--padding-4-x-large {
+  padding: var(--parlour--spacing-4-x-large);
+}
+
+.parlour-card--padding-5-x-large {
+  padding: var(--parlour--spacing-5-x-large);
+}

package/dist/components/Card/styles.scss

@@ -0,0 +1,133 @@
+.parlour-card {
+  min-width: 0;
+}
+.parlour-card > :first-child {
+  margin-top: 0;
+}
+.parlour-card > :last-child {
+  margin-bottom: 0;
+}
+.parlour-card.parlour-card :is(h1, h2, h3, h4, h5, h6) {
+  color: inherit;
+}
+
+li.parlour-card {
+  list-style: none;
+}
+
+.parlour-card--bg-white {
+  background-color: var(--parlour--color-white);
+  color: var(--parlour--color-black);
+}
+
+.parlour-card--bg-light {
+  background-color: var(--parlour--color-neutral-50);
+  color: var(--parlour--color-black);
+}
+
+.parlour-card--bg-medium {
+  background-color: var(--parlour--color-neutral-900);
+  color: var(--parlour--color-white);
+}
+
+.parlour-card--bg-dark {
+  background-color: var(--parlour--color-neutral-950);
+  color: var(--parlour--color-white);
+}
+
+.parlour-card--border {
+  border-width: 1px;
+  border-style: solid;
+}
+
+.parlour-card--border-white {
+  border-color: var(--parlour--color-white);
+}
+
+.parlour-card--border-light {
+  border-color: var(--parlour--color-neutral-300);
+}
+
+.parlour-card--border-medium {
+  border-color: var(--parlour--color-neutral-500);
+}
+
+.parlour-card--border-dark {
+  border-color: var(--parlour--color-neutral-900);
+}
+
+.parlour-card--radius-none {
+  border-radius: 0;
+}
+
+.parlour-card--radius-sm {
+  border-radius: var(--parlour--radius-sm);
+}
+
+.parlour-card--radius-md {
+  border-radius: var(--parlour--radius-md);
+}
+
+.parlour-card--radius-lg {
+  border-radius: var(--parlour--radius-lg);
+}
+
+.parlour-card--radius-xl {
+  border-radius: var(--parlour--radius-xl);
+}
+
+.parlour-card--radius-full {
+  border-radius: var(--parlour--radius-full);
+}
+
+.parlour-card--padding-none {
+  padding: 0;
+}
+
+.parlour-card--padding-3-x-small {
+  padding: var(--parlour--spacing-3-x-small);
+}
+
+.parlour-card--padding-2-x-small {
+  padding: var(--parlour--spacing-2-x-small);
+}
+
+.parlour-card--padding-x-small {
+  padding: var(--parlour--spacing-x-small);
+}
+
+.parlour-card--padding-small {
+  padding: var(--parlour--spacing-small);
+}
+
+.parlour-card--padding-normal {
+  padding: var(--parlour--spacing-normal);
+}
+
+.parlour-card--padding-medium {
+  padding: var(--parlour--spacing-medium);
+}
+
+.parlour-card--padding-large {
+  padding: var(--parlour--spacing-large);
+}
+
+.parlour-card--padding-x-large {
+  padding: var(--parlour--spacing-x-large);
+}
+
+.parlour-card--padding-2-x-large {
+  padding: var(--parlour--spacing-2-x-large);
+}
+
+.parlour-card--padding-3-x-large {
+  padding: var(--parlour--spacing-3-x-large);
+}
+
+.parlour-card--padding-4-x-large {
+  padding: var(--parlour--spacing-4-x-large);
+}
+
+.parlour-card--padding-5-x-large {
+  padding: var(--parlour--spacing-5-x-large);
+}