@troychaplin/parlour-ui 0.1.0

package/dist/wordpress/block-theme.css

@@ -0,0 +1,157 @@
+@charset "UTF-8";
+/* Auto-generated by component2block — do not edit manually */
+:root {
+  /* Colors */
+  --parlour--color-black: #191919;
+  --parlour--color-white: #ffffff;
+  --parlour--color-accent-primary: #a34f3e;
+  --parlour--color-accent-secondary: #ca2135;
+  --parlour--color-neutral-50: #f9f7f3;
+  --parlour--color-neutral-100: #f2f0ea;
+  --parlour--color-neutral-200: #efeae2;
+  --parlour--color-neutral-300: #e0d6c8;
+  --parlour--color-neutral-400: #d8d5cf;
+  --parlour--color-neutral-500: #8d7661;
+  --parlour--color-neutral-600: #766051;
+  --parlour--color-neutral-700: #5e4c42;
+  --parlour--color-neutral-800: #51413a;
+  --parlour--color-neutral-900: #473a35;
+  --parlour--color-neutral-950: #271f1c;
+  --parlour--color-info: #2571eb;
+  --parlour--color-success: #16a34a;
+  --parlour--color-warning: #fff154;
+  --parlour--color-error: #dc2626;
+  --parlour--color-linkedin: #0A66C2;
+  --parlour--color-facebook: #1877F2;
+  --parlour--color-bluesky: #1185FE;
+  --parlour--color-twitter: #000000;
+  --parlour--color-instagram: #E4405F;
+  --parlour--color-youtube: #FF0000;
+  --parlour--color-tiktok: #010101;
+  /* Gradients */
+  --parlour--gradient-white-to-neutral-50: linear-gradient(135deg,rgb(250,250,250) 0%,rgb(249, 247, 243) 90%);
+  /* Spacing */
+  --parlour--spacing-3-x-small: 0.175rem;
+  --parlour--spacing-2-x-small: 0.25rem;
+  --parlour--spacing-x-small: 0.5rem;
+  --parlour--spacing-small: clamp(0.625rem, 0.625rem + ((1vw - 0.2rem) * 0.240), 0.75rem);
+  --parlour--spacing-normal: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.361), 1rem);
+  --parlour--spacing-medium: clamp(0.9375rem, 0.9375rem + ((1vw - 0.2rem) * 0.601), 1.25rem);
+  --parlour--spacing-large: clamp(1.0625rem, 1.0625rem + ((1vw - 0.2rem) * 0.841), 1.5rem);
+  --parlour--spacing-x-large: clamp(1.1875rem, 1.1875rem + ((1vw - 0.2rem) * 1.563), 2rem);
+  --parlour--spacing-2-x-large: clamp(1.3125rem, 1.3125rem + ((1vw - 0.2rem) * 2.284), 2.5rem);
+  --parlour--spacing-3-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 3.005), 3rem);
+  --parlour--spacing-4-x-large: clamp(1.625rem, 1.625rem + ((1vw - 0.2rem) * 4.567), 4rem);
+  --parlour--spacing-5-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 6.250), 5rem);
+  /* Font Families */
+  --parlour--font-family-inter-tight: 'Inter Tight', system-ui, 'Segoe UI', roboto, sans-serif;
+  --parlour--font-family-source-serif-4: 'Source Serif 4', ui-serif, georgia, serif;
+  --parlour--font-family-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  /* Font Sizes */
+  --parlour--font-size-2-x-small: clamp(0.6875rem, 0.6875rem + ((1vw - 0.2rem) * 0.12), 0.75rem);
+  --parlour--font-size-x-small: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.12), 0.875rem);
+  --parlour--font-size-small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.24), 1rem);
+  --parlour--font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.481), 1.25rem);
+  --parlour--font-size-large: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 1.082), 2rem);
+  --parlour--font-size-2-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.803), 2.6875rem);
+  --parlour--font-size-3-x-large: clamp(2.0625rem, 2.0625rem + ((1vw - 0.2rem) * 2.885), 3.5625rem);
+  --parlour--font-size-4-x-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 4.327), 4.75rem);
+  --parlour--font-size-5-x-large: clamp(2.375rem, 2.375rem + ((1vw - 0.2rem) * 6.418), 5.7125rem);
+  --parlour--font-size-hero: clamp(3.5625rem, 3.5625rem + ((1vw - 0.2rem) * 9.375), 8.4375rem);
+  --parlour--font-size-heading-small: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-heading-medium: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.962), 1.75rem);
+  --parlour--font-size-heading-large: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.442), 2.25rem);
+  --parlour--font-size-heading-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.442), 2.5rem);
+  --parlour--font-size-heading-primary: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.404), 3rem);
+  /* Shadows */
+  --parlour--shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
+  --parlour--shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
+  --parlour--shadow-crisp: 6px 6px 0px rgb(0, 0, 0);
+  /* Font Weights */
+  --parlour--font-weight-thin: 100;
+  --parlour--font-weight-extra-light: 200;
+  --parlour--font-weight-light: 300;
+  --parlour--font-weight-normal: 400;
+  --parlour--font-weight-medium: 500;
+  --parlour--font-weight-semibold: 600;
+  --parlour--font-weight-bold: 700;
+  --parlour--font-weight-extra-bold: 800;
+  --parlour--font-weight-black: 900;
+  /* Line Heights */
+  --parlour--line-height-tight: 1.3;
+  --parlour--line-height-normal: 1.6;
+  --parlour--line-height-loose: 1.8;
+  /* Border Radius */
+  --parlour--radius-sm: 2px;
+  --parlour--radius-md: 4px;
+  --parlour--radius-lg: 8px;
+  --parlour--radius-xl: 12px;
+  --parlour--radius-full: 9999px;
+  /* Transitions */
+  --parlour--transition-fast: 150ms ease;
+  --parlour--transition-base: 250ms ease;
+  /* Z-Index */
+  --parlour--z-100: 100;
+  --parlour--z-200: 200;
+  --parlour--z-500: 500;
+  /* Layout */
+  --parlour--layout-content-size: 768px;
+  --parlour--layout-wide-size: 1152px;
+  --parlour--layout-small-size: 600px;
+  --parlour--layout-full-size: 100vw;
+  /* Viewport */
+  --parlour--viewport-mobile: 600px;
+  --parlour--viewport-tablet: 768px;
+  /* Root Spacing */
+  --parlour--root-padding-x: var(--parlour--spacing-x-large);
+  --parlour--root-padding-y: 0;
+  --parlour--root-padding-top: var(--parlour--root-padding-y);
+  --parlour--root-padding-right: var(--parlour--root-padding-x);
+  --parlour--root-padding-bottom: var(--parlour--root-padding-y);
+  --parlour--root-padding-left: var(--parlour--root-padding-x);
+  --parlour--root-block-gap: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Auto-generated by component2block — do not edit manually */
+.is-layout-constrained > * + h1 {
+  margin-block-start: var(--parlour--spacing-large);
+}
+
+.is-layout-constrained > * + h2 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h3 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h4 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h5 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h6 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-block-start: var(--parlour--spacing-small);
+}

package/dist/wordpress/hybrid-theme.css

@@ -0,0 +1,324 @@
+@charset "UTF-8";
+/* Auto-generated by component2block — do not edit manually */
+:root {
+  /* Colors */
+  --parlour--color-black: #191919;
+  --parlour--color-white: #ffffff;
+  --parlour--color-accent-primary: #a34f3e;
+  --parlour--color-accent-secondary: #ca2135;
+  --parlour--color-neutral-50: #f9f7f3;
+  --parlour--color-neutral-100: #f2f0ea;
+  --parlour--color-neutral-200: #efeae2;
+  --parlour--color-neutral-300: #e0d6c8;
+  --parlour--color-neutral-400: #d8d5cf;
+  --parlour--color-neutral-500: #8d7661;
+  --parlour--color-neutral-600: #766051;
+  --parlour--color-neutral-700: #5e4c42;
+  --parlour--color-neutral-800: #51413a;
+  --parlour--color-neutral-900: #473a35;
+  --parlour--color-neutral-950: #271f1c;
+  --parlour--color-info: #2571eb;
+  --parlour--color-success: #16a34a;
+  --parlour--color-warning: #fff154;
+  --parlour--color-error: #dc2626;
+  --parlour--color-linkedin: #0A66C2;
+  --parlour--color-facebook: #1877F2;
+  --parlour--color-bluesky: #1185FE;
+  --parlour--color-twitter: #000000;
+  --parlour--color-instagram: #E4405F;
+  --parlour--color-youtube: #FF0000;
+  --parlour--color-tiktok: #010101;
+  /* Gradients */
+  --parlour--gradient-white-to-neutral-50: linear-gradient(135deg,rgb(250,250,250) 0%,rgb(249, 247, 243) 90%);
+  /* Spacing */
+  --parlour--spacing-3-x-small: 0.175rem;
+  --parlour--spacing-2-x-small: 0.25rem;
+  --parlour--spacing-x-small: 0.5rem;
+  --parlour--spacing-small: clamp(0.625rem, 0.625rem + ((1vw - 0.2rem) * 0.240), 0.75rem);
+  --parlour--spacing-normal: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.361), 1rem);
+  --parlour--spacing-medium: clamp(0.9375rem, 0.9375rem + ((1vw - 0.2rem) * 0.601), 1.25rem);
+  --parlour--spacing-large: clamp(1.0625rem, 1.0625rem + ((1vw - 0.2rem) * 0.841), 1.5rem);
+  --parlour--spacing-x-large: clamp(1.1875rem, 1.1875rem + ((1vw - 0.2rem) * 1.563), 2rem);
+  --parlour--spacing-2-x-large: clamp(1.3125rem, 1.3125rem + ((1vw - 0.2rem) * 2.284), 2.5rem);
+  --parlour--spacing-3-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 3.005), 3rem);
+  --parlour--spacing-4-x-large: clamp(1.625rem, 1.625rem + ((1vw - 0.2rem) * 4.567), 4rem);
+  --parlour--spacing-5-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 6.250), 5rem);
+  /* Font Families */
+  --parlour--font-family-inter-tight: 'Inter Tight', system-ui, 'Segoe UI', roboto, sans-serif;
+  --parlour--font-family-source-serif-4: 'Source Serif 4', ui-serif, georgia, serif;
+  --parlour--font-family-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  /* Font Sizes */
+  --parlour--font-size-2-x-small: clamp(0.6875rem, 0.6875rem + ((1vw - 0.2rem) * 0.12), 0.75rem);
+  --parlour--font-size-x-small: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.12), 0.875rem);
+  --parlour--font-size-small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.24), 1rem);
+  --parlour--font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.481), 1.25rem);
+  --parlour--font-size-large: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 1.082), 2rem);
+  --parlour--font-size-2-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.803), 2.6875rem);
+  --parlour--font-size-3-x-large: clamp(2.0625rem, 2.0625rem + ((1vw - 0.2rem) * 2.885), 3.5625rem);
+  --parlour--font-size-4-x-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 4.327), 4.75rem);
+  --parlour--font-size-5-x-large: clamp(2.375rem, 2.375rem + ((1vw - 0.2rem) * 6.418), 5.7125rem);
+  --parlour--font-size-hero: clamp(3.5625rem, 3.5625rem + ((1vw - 0.2rem) * 9.375), 8.4375rem);
+  --parlour--font-size-heading-small: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-heading-medium: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.962), 1.75rem);
+  --parlour--font-size-heading-large: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.442), 2.25rem);
+  --parlour--font-size-heading-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.442), 2.5rem);
+  --parlour--font-size-heading-primary: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.404), 3rem);
+  /* Shadows */
+  --parlour--shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
+  --parlour--shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
+  --parlour--shadow-crisp: 6px 6px 0px rgb(0, 0, 0);
+  /* Font Weights */
+  --parlour--font-weight-thin: 100;
+  --parlour--font-weight-extra-light: 200;
+  --parlour--font-weight-light: 300;
+  --parlour--font-weight-normal: 400;
+  --parlour--font-weight-medium: 500;
+  --parlour--font-weight-semibold: 600;
+  --parlour--font-weight-bold: 700;
+  --parlour--font-weight-extra-bold: 800;
+  --parlour--font-weight-black: 900;
+  /* Line Heights */
+  --parlour--line-height-tight: 1.3;
+  --parlour--line-height-normal: 1.6;
+  --parlour--line-height-loose: 1.8;
+  /* Border Radius */
+  --parlour--radius-sm: 2px;
+  --parlour--radius-md: 4px;
+  --parlour--radius-lg: 8px;
+  --parlour--radius-xl: 12px;
+  --parlour--radius-full: 9999px;
+  /* Transitions */
+  --parlour--transition-fast: 150ms ease;
+  --parlour--transition-base: 250ms ease;
+  /* Z-Index */
+  --parlour--z-100: 100;
+  --parlour--z-200: 200;
+  --parlour--z-500: 500;
+  /* Layout */
+  --parlour--layout-content-size: 768px;
+  --parlour--layout-wide-size: 1152px;
+  --parlour--layout-small-size: 600px;
+  --parlour--layout-full-size: 100vw;
+  /* Viewport */
+  --parlour--viewport-mobile: 600px;
+  --parlour--viewport-tablet: 768px;
+  /* Root Spacing */
+  --parlour--root-padding-x: var(--parlour--spacing-x-large);
+  --parlour--root-padding-y: 0;
+  --parlour--root-padding-top: var(--parlour--root-padding-y);
+  --parlour--root-padding-right: var(--parlour--root-padding-x);
+  --parlour--root-padding-bottom: var(--parlour--root-padding-y);
+  --parlour--root-padding-left: var(--parlour--root-padding-x);
+  --parlour--root-block-gap: 0;
+}
+
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+:focus-visible {
+  outline: 2px solid var(--parlour--color-accent-primary);
+  outline-offset: 2px;
+}
+
+::selection {
+  background-color: var(--parlour--color-accent-primary);
+  color: var(--parlour--color-white);
+}
+
+.alignsmall {
+  max-width: var(--parlour--layout-small-size) !important;
+}
+
+.aligncontent {
+  max-width: var(--parlour--layout-content-size);
+}
+
+.alignwide {
+  max-width: var(--parlour--layout-wide-size);
+}
+
+.alignfull {
+  max-width: var(--parlour--layout-full-size);
+}
+
+.parlour-main > div > .parlour-layout + .parlour-layout,
+.parlour-main > div > .parlour-layout + :not(.parlour-layout),
+.parlour-main > div > :not(.parlour-layout) + .parlour-layout {
+  margin-top: var(--parlour--spacing-4-x-large);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Auto-generated by component2block — do not edit manually */
+body {
+  font-family: var(--parlour--font-family-source-serif-4);
+  font-size: var(--parlour--font-size-medium);
+  font-weight: 300;
+  line-height: var(--parlour--line-height-normal);
+  color: var(--parlour--color-black);
+  background-color: var(--parlour--color-neutral-50);
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--parlour--font-family-inter-tight);
+  line-height: 1.1;
+  color: var(--parlour--color-neutral-800);
+}
+
+:where(h1) {
+  font-size: var(--parlour--font-size-3-x-large);
+  font-style: normal;
+  font-weight: 600;
+}
+
+:where(h2) {
+  font-size: var(--parlour--font-size-2-x-large);
+  font-style: normal;
+  font-weight: 600;
+}
+
+:where(h3) {
+  font-size: var(--parlour--font-size-x-large);
+  font-style: normal;
+  font-weight: 600;
+}
+
+:where(h4) {
+  font-size: var(--parlour--font-size-large);
+  font-style: normal;
+  font-weight: 600;
+}
+
+:where(h5) {
+  font-size: var(--parlour--font-size-medium);
+  font-style: normal;
+  font-weight: 600;
+}
+
+:where(h6) {
+  font-size: var(--parlour--font-size-medium);
+  font-style: italic;
+  font-weight: 600;
+}
+
+:where(figcaption) {
+  font-size: var(--parlour--font-size-small);
+  font-style: italic;
+  font-weight: var(--parlour--font-weight-light);
+  color: var(--parlour--color-warning);
+}
+
+:where(button) {
+  color: var(--parlour--color-white);
+  background-color: var(--parlour--color-black);
+}
+
+:where(a) {
+  color: var(--parlour--color-accent-primary);
+}
+
+:where(a:hover) {
+  color: var(--parlour--color-error);
+}
+
+/* Auto-generated by component2block — do not edit manually */
+:where(.is-layout-constrained) > * {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+:where(.is-layout-constrained) > * + * {
+  margin-block-start: var(--parlour--root-block-gap);
+}
+
+:where(.is-layout-flex) {
+  gap: var(--parlour--root-block-gap);
+}
+
+:where(.is-layout-grid) {
+  gap: var(--parlour--root-block-gap);
+}
+
+:where(.entry-content) > * + * {
+  margin-block-start: var(--parlour--spacing-normal);
+}
+
+.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
+  max-width: var(--parlour--layout-content-size);
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.is-layout-constrained > .alignwide {
+  max-width: var(--parlour--layout-wide-size);
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.has-global-padding {
+  padding-right: var(--parlour--root-padding-right);
+  padding-left: var(--parlour--root-padding-left);
+}
+
+.has-global-padding > .alignfull {
+  max-width: none;
+  margin-right: calc(var(--parlour--root-padding-right) * -1);
+  margin-left: calc(var(--parlour--root-padding-left) * -1);
+}
+
+.has-global-padding > .alignfull > .has-global-padding {
+  padding-right: var(--parlour--root-padding-right);
+  padding-left: var(--parlour--root-padding-left);
+}
+
+/* Auto-generated by component2block — do not edit manually */
+.is-layout-constrained > * + h1 {
+  margin-block-start: var(--parlour--spacing-large);
+}
+
+.is-layout-constrained > * + h2 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h3 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h4 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h5 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h6 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-block-start: var(--parlour--spacing-small);
+}

package/dist/wordpress/integrate.php

@@ -0,0 +1,139 @@
+<?php
+/**
+ * Component Library WordPress Integration
+ *
+ * Loads the library's theme-parlour.json as a default base layer and enqueues
+ * design token CSS variables. Automatically loads tokens.wp.css
+ * (themeable) if present, otherwise falls back to parlour-tokens.css (locked).
+ *
+ * Setup:
+ *   1. Add this function to your theme
+ *   2. Copy theme-parlour.json to the root of your theme, and your token CSS file into your theme
+ *   2. Add parlour-tokens.css to your theme and include it in your build, or enqueue it
+ *      require_once get_template_directory() . '/assets/c2b/integrate.php';
+ *
+ * @package component2block
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Inject the library's theme-parlour.json as a WordPress default base layer.
+ *
+ * This registers design tokens (colors, spacing, fonts, etc.) as
+ * WordPress presets. The active theme's theme-parlour.json overrides any
+ * values defined here.
+ */
+add_filter( 'wp_theme_json_data_default', function ( $theme_json ) {
+	$library_json_path = __DIR__ . '/theme-parlour.json';
+
+	if ( ! file_exists( $library_json_path ) ) {
+		return $theme_json;
+	}
+
+	$library_data = json_decode(
+		file_get_contents( $library_json_path ),
+		true
+	);
+
+	if ( ! is_array( $library_data ) ) {
+		return $theme_json;
+	}
+
+	return $theme_json->update_with( $library_data );
+} );
+
+/**
+ * Enqueue design token CSS variables.
+ *
+ * Prefers tokens.wp.css (themeable — maps to --wp--preset--* variables)
+ * over parlour-tokens.css (locked — hardcoded values). Both are looked for in
+ * the same directory as this file.
+ *
+ * Loads on both the frontend and inside the block editor iframe.
+ */
+$c2b_enqueue_tokens = function () {
+	if ( file_exists( __DIR__ . '/tokens.wp.css' ) ) {
+		$file = 'tokens.wp.css';
+	} elseif ( file_exists( __DIR__ . '/parlour-tokens.css' ) ) {
+		$file = 'parlour-tokens.css';
+	} else {
+		return;
+	}
+
+	$base_url = content_url(
+		str_replace(
+			wp_normalize_path( WP_CONTENT_DIR ),
+			'',
+			wp_normalize_path( __DIR__ )
+		)
+	);
+
+	wp_enqueue_style(
+		'c2b-tokens',
+		$base_url . '/' . $file,
+		array(),
+		filemtime( __DIR__ . '/' . $file )
+	);
+};
+
+add_action( 'wp_enqueue_scripts', $c2b_enqueue_tokens );
+add_action( 'enqueue_block_editor_assets', $c2b_enqueue_tokens );
+
+/**
+ * Locked mode enforcement.
+ *
+ * When the library was built with themeable: false (detected by the
+ * absence of tokens.wp.css), enforce design system restrictions at the
+ * theme layer so the theme's theme-parlour.json cannot override them:
+ *
+ *   - Layout sizes (contentSize, wideSize) are locked
+ *   - Viewport breakpoints (mobile, tablet) are locked
+ *   - Custom color/gradient creation is disabled in the Site Editor
+ *
+ * When themeable: true (tokens.wp.css exists), none of these
+ * restrictions apply — the theme has full control.
+ */
+if ( ! file_exists( __DIR__ . '/tokens.wp.css' ) ) {
+	add_filter( 'wp_theme_json_data_theme', function ( $theme_json ) {
+		$library_json_path = __DIR__ . '/theme-parlour.json';
+
+		if ( ! file_exists( $library_json_path ) ) {
+			return $theme_json;
+		}
+
+		$library_data = json_decode(
+			file_get_contents( $library_json_path ),
+			true
+		);
+
+		if ( ! is_array( $library_data ) ) {
+			return $theme_json;
+		}
+
+		$enforced = array(
+			'version'  => $library_data['version'] ?? 3,
+			'settings' => array(
+				'color' => array(
+					'custom'         => false,
+					'customDuotone'  => false,
+					'customGradient' => false,
+				),
+			),
+		);
+
+		// Lock layout sizes if defined
+		if ( isset( $library_data['settings']['layout'] ) ) {
+			$enforced['settings']['layout'] = $library_data['settings']['layout'];
+		}
+
+		// Lock viewport breakpoints if defined
+		if ( isset( $library_data['settings']['viewport'] ) ) {
+			$enforced['settings']['viewport'] = $library_data['settings']['viewport'];
+		}
+
+		return $theme_json->update_with( $enforced );
+	} );
+}