@affinda/wc 0.0.16 → 0.0.18

package/dist/collection/components/af-text/af-text.js

@@ -1,25 +1,23 @@
 import { h } from "@stencil/core";
 /**
  * Text/body component that inherits color from theme context.
- * Color is determined by the parent theme (af-section, af-hero-section, etc.)
+ * Color is determined by the parent theme (af-section, af-card, etc.)
  * via CSS custom properties.
  */
 export class AfText {
     constructor() {
         /** Text variant */
         this.variant = 'medium';
-        /** Visual alignment */
-        this.align = 'left';
         /** Semantic element to render */
         this.as = 'p';
     }
     render() {
         const Tag = this.as;
-        return (h(Tag, { key: '824ada09e3f1b9eff027c758087e8369f4de5daa', class: {
+        return (h(Tag, { key: '522550f1e2027db872a76232f0833571b558e817', class: {
                 'text': true,
                 [`variant-${this.variant}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: '3c9762436be40ed4920db1dea3a38561e275848e' })));
+                [`align-${this.align}`]: !!this.align
+            }, part: "base" }, h("slot", { key: '8968ce08e3080dcefa3583520dcc75894140c057' })));
     }
     static get is() { return "af-text"; }
     static get encapsulation() { return "shadow"; }
@@ -60,20 +58,19 @@ export class AfText {
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'center' | 'right'",
-                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "resolved": "\"center\" | \"left\" | \"right\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Visual alignment"
+                    "text": "Visual alignment. When not set, inherits from parent context (e.g. typography lockup)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "align",
-                "defaultValue": "'left'"
+                "attribute": "align"
             },
             "as": {
                 "type": "string",

package/dist/collection/components/af-text/af-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA4C,QAAQ,CAAC;QAEpE,uBAAuB;QACf,UAAK,GAAgC,MAAM,CAAC;QAEpD,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;KAkBlD;IAhBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;aAC9B,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-hero-section, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' = 'medium';\n\n  /** Visual alignment */\n  @Prop() align: 'left' | 'center' | 'right' = 'left';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: true\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-text.js","sourceRoot":"","sources":["../../../src/components/af-text/af-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;GAIG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME,mBAAmB;QACX,YAAO,GAA4C,QAAQ,CAAC;QAKpE,iCAAiC;QACzB,OAAE,GAAmC,GAAG,CAAC;KAkBlD;IAhBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAS,CAAC;QAE3B,OAAO,CACL,EAAC,GAAG,qDACF,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;aACtC,EACD,IAAI,EAAC,MAAM;YAEX,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text/body component that inherits color from theme context.\n * Color is determined by the parent theme (af-section, af-card, etc.)\n * via CSS custom properties.\n */\n@Component({\n  tag: 'af-text',\n  styleUrl: 'af-text.css',\n  shadow: true\n})\nexport class AfText {\n  /** Text variant */\n  @Prop() variant: 'xlarge' | 'large' | 'medium' | 'small' = 'medium';\n\n  /** Visual alignment. When not set, inherits from parent context (e.g. typography lockup). */\n  @Prop() align?: 'left' | 'center' | 'right';\n\n  /** Semantic element to render */\n  @Prop() as: 'p' | 'span' | 'div' | 'label' = 'p';\n\n  render() {\n    const Tag = this.as as any;\n\n    return (\n      <Tag\n        class={{\n          'text': true,\n          [`variant-${this.variant}`]: true,\n          [`align-${this.align}`]: !!this.align\n        }}\n        part=\"base\"\n      >\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-text-image-nest/af-text-image-nest.js

@@ -29,7 +29,7 @@ export class AfTextImageNest {
             'nest__grid': true,
             [`grid-${this.layout}`]: true,
         };
-        return (h(Host, { key: 'bad121a0f47a7711ea1586c316f3363dd5e252ba' }, h("div", { key: '43be16c007ea9b8c7baa75cb038a4bf154730980', class: containerClasses }, h("div", { key: 'da6148be4838273374c0c040b1bb3793f4d3472c', class: "nest__content" }, h("div", { key: 'bccad6fe0a18ccb503f740afc8862a99408f17d5', class: gridClasses }, h("slot", { key: 'b8707c094e88a7c6a09b8e8321ba8edc4d32eb2a' })), h("div", { key: 'bd902e59ee14c2e3d9e4a3bdceb3e9b1603929bb', class: "nest__footer" }, h("slot", { key: '96f63716916447a563125dae4073a0e472becfba', name: "buttons" }))))));
+        return (h(Host, { key: 'fda547a6eaca9705f52fbbed04113534e438f3c8' }, h("div", { key: '565730e0ed6a4b127ef191536b1f10f1c8b417d6', class: containerClasses }, h("div", { key: '65e97a6335b837f1ffd259e5c128c01c1c212f17', class: "nest__content" }, h("div", { key: 'c6eab25a6e3fc7c6c864a6aa6182c6adc7b22032', class: gridClasses }, h("slot", { key: 'e936abaaf1854605ebb1be90130df7d2d100ef49' })), h("div", { key: '11f48762fb08c787ac90256b55bb1a351e92c505', class: "nest__footer" }, h("slot", { key: '8a0f8c1ad853f3aa9deea5df5a3f0b565a1f631e', name: "buttons" }))))));
     }
     static get is() { return "af-text-image-nest"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-textarea/af-textarea.css

@@ -24,12 +24,12 @@
   font-weight: var(--font-weight-book, 500);
   font-size: 16px;
   line-height: 24px;
-  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-input-label, var(--af-typography-body-dark, #14343b));
   cursor: default;
 }
 
 .required {
-  color: var(--forms-fields-error, #be292a);
+  color: var(--af-input-error, var(--colour-error, #be292a));
   margin-left: 2px;
 }
 
@@ -44,7 +44,7 @@
   border: none;
   background: none;
   cursor: pointer;
-  color: var(--forms-fields-label, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-input-icon, var(--af-background-icon-default, #14343b));
   flex-shrink: 0;
 }
 
@@ -58,7 +58,7 @@
 }
 
 .info-icon:focus-visible {
-  outline: 2px solid var(--buttons-secondary-stroke, #14343b);
+  outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -69,15 +69,15 @@
   font-weight: var(--font-weight-regular, 400);
   font-size: 16px;
   line-height: 24px;
-  color: var(--forms-fields-description, var(--colour-inkwell-400, #2b484f));
+  color: var(--af-input-description, var(--af-typography-body-default, #2b484f));
   margin: 0;
 }
 
 /* Textarea container */
 .textarea-container {
   display: flex;
-  background: var(--forms-fields-bg-default, #ffffff);
-  border: 1px solid var(--forms-fields-stroke-default, #d0d6d8);
+  background: var(--af-input-bg, #ffffff);
+  border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));
   border-radius: var(--radii-input, 8px);
   transition: all 0.15s ease;
   box-sizing: border-box;
@@ -86,27 +86,28 @@
 
 /* Hover state */
 .textarea-container.hovered {
-  background: var(--forms-fields-bg-hover, #f3f5f5);
+  background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));
+  border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));
 }
 
 /* Focus state */
 .textarea-container.focused {
-  background: var(--forms-fields-bg-default, #ffffff);
-  border-color: var(--forms-fields-stroke-active, var(--colour-brand-inkwell, #14343b));
+  background: var(--af-input-bg, #ffffff);
+  border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));
   box-shadow: 
-    0 0 0 4px var(--background-base, #ffffff), 
-    0 0 0 5px var(--buttons-secondary-stroke, #14343b);
+    0 0 0 4px var(--af-background-base, #ffffff), 
+    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));
 }
 
 /* Error state */
 .textarea-container.error {
-  border-color: var(--forms-fields-stroke-error, #be292a);
+  border-color: var(--af-input-border-error, var(--colour-error, #be292a));
 }
 
 /* Disabled state */
 .textarea-container.disabled {
-  background: var(--forms-fields-bg-disabled, #e8ebeb);
-  border-color: var(--forms-fields-stroke-default, #d0d6d8);
+  background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));
+  border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));
   cursor: not-allowed;
 }
 
@@ -122,24 +123,24 @@
   font-weight: var(--font-weight-regular, 400);
   font-size: 16px;
   line-height: 24px;
-  color: var(--forms-fields-input, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-input-text, var(--af-typography-body-dark, #14343b));
   outline: none;
   resize: vertical;
 }
 
 .textarea::placeholder {
-  color: var(--forms-fields-placeholder, #60767b);
+  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));
   opacity: 1;
 }
 
 .textarea:disabled {
   cursor: not-allowed;
-  color: var(--forms-fields-placeholder, #60767b);
+  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));
   resize: none;
 }
 
 .textarea:disabled::placeholder {
-  color: var(--forms-fields-placeholder, #60767b);
+  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));
 }
 
 /* Error row */
@@ -156,7 +157,7 @@
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  color: var(--forms-fields-error, #be292a);
+  color: var(--af-input-error, var(--colour-error, #be292a));
 }
 
 .error-icon svg {
@@ -170,6 +171,6 @@
   font-weight: var(--font-weight-regular, 400);
   font-size: 16px;
   line-height: 24px;
-  color: var(--forms-fields-error, #be292a);
+  color: var(--af-input-error, var(--colour-error, #be292a));
 }
 

package/dist/collection/components/af-textarea/af-textarea.js

@@ -79,7 +79,7 @@ export class AfTextarea {
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (h(Host, { key: '84f322a374d364669942e9153c6ba42221af1059' }, h("div", { key: '4b5a62e919a479bcf741f2d1d9e39a7b0e1e49ac', class: wrapperClasses }, this.label && (h("div", { key: 'e73b88c28588b8f3e5b9823467e8c972fd671391', class: "label-row" }, h("label", { key: '01c16777469e037495997efc2cacc51778fcd9c7', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '6da50443dadd3a6eec5655b4ff2fa19affa38006', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'c731c726f54946273a330c0173f09faeb9fe583b', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '24a1ee4fb10ebd9a84a897cefef09ad7e7b63565', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3523e8495fc5ffa06d793318f55ba79043174931', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd2caa0b33fccc6289f00fc22fc329df52d86a6ed', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'db8d8ee03abe2638265d192be6efb992a6041199', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '8325f2fc490d8261a596398da7cc68d74ccfce11', name: "label-end" }))), this.description && (h("p", { key: '7db9b0e06615f5a13b7759cd81c23ee6ab124769', class: "description" }, this.description)), h("div", { key: '939c306f7a56735956e2ef4badeb4cfa39abf759', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '0dffd719ed83955990ae1935fb8d39ab92fd9b94', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '1f7f83da7518216eb63ff9cb685ffb92b3b37fb1', class: "error-row", id: "error-message" }, h("span", { key: 'a1af53a449805506ac0abddae3a236232a538bd9', class: "error-icon" }, h("svg", { key: 'b52e5c14a8986c502e1e0dce8a95c7d381c7a8e3', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'af8c97b747c960065f7461e84c893e644b66d9c5', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '145226126e4ba52c6234b3c454e43d87b495789c', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '7b94917ac5c96c6abbfc93826b07fa967b49506a', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '9f097e0c43b1a6b19d0275fed8a216e901ce2d86', class: "error-text" }, this.error))))));
+        return (h(Host, { key: '96a657d6aaed47264bb66750440e1c7fd8020eea' }, h("div", { key: 'cead5c6a37e1e6b8b6b6eb6292c85c5bc8731646', class: wrapperClasses }, this.label && (h("div", { key: '085b08a6337ff9fed164bf964d2ec9bdd45780b0', class: "label-row" }, h("label", { key: 'edf6d4f74707ad3f6dcca97b6093451de4d7f728', class: "label", htmlFor: "textarea" }, this.label, this.required && h("span", { key: '1e8ac41140dae27ec44ce22ea0579cb452ab33b1', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: 'b1853be2ab1c4683180b596b03caff7f25f5b0bc', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '3781cac4e5fda9e91df1de36f846b91d7ec4ff30', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7723e07ea2201d8e2a31c8827a321dad88b4b792', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '1f161dcff4b6d39b178dd930790016f17e0b2190', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'fe06a5d4a08c3fac58e58b0ae25ebb40e72c574b', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '7bd92220bb03929a39772f2411f8db0f7c9bf82c', name: "label-end" }))), this.description && (h("p", { key: '56fbec9391c269a2c6c7b9f26f1f6f5e5fac1ae5', class: "description" }, this.description)), h("div", { key: '052fdfd7ba49b36754f8384bcf3f18da97357374', class: textareaContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("textarea", { key: '7c41dc6194fbe085e592ba0206e6820a5e47e957', ref: (el) => this.textareaEl = el ?? undefined, id: "textarea", class: "textarea", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: 'b7ff36f947861a248eab5cb5ebe4af6152abf061', class: "error-row", id: "error-message" }, h("span", { key: 'fe93eddb75471c06db6270715d8851c90695492a', class: "error-icon" }, h("svg", { key: '9125de267b317a583032a63549b1efa78da41448', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b99a6c173c0fb789f1428556a8ec403ec512641c', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'b6b6547fcfab22a743161404c4157c3946e87e18', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '0022ce718a6e9c1b35cadf9a7bfa7a618489c84e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: 'dcd81e02efa888584032c12cc15b451d9c4dc82c', class: "error-text" }, this.error))))));
     }
     static get is() { return "af-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-theme-override/af-theme-override.css

@@ -0,0 +1,376 @@
+/**
+ * Theme Override Component Styles
+ * 
+ * Sets theme CSS custom properties WITHOUT applying background color.
+ * This allows overriding the theme context for child components while
+ * maintaining the parent's visual background.
+ */
+
+:host {
+  display: contents;
+}
+
+.theme-override {
+  display: contents;
+}
+
+/* ==========================================================================
+   WHITE THEME
+   ========================================================================== */
+
+.theme-white {
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-white, #FFFFFF);
+  --af-background-base-hover: var(--colour-mistgreen-100, #f4f7f6);
+  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-level-1: var(--colour-mistgreen-200, #e8eeed);
+  --af-background-level-1-hover: var(--colour-mistgreen-300, #dde6e3);
+  --af-background-border-subtle: var(--colour-mistgreen-200, #e8eeed);
+  --af-background-border-default: var(--colour-mistgreen-400, #d1ddda);
+  --af-background-border-heavy: var(--colour-mistgreen-500, #c6d5d1);
+  --af-background-border-active: var(--colour-softclay-800, #8a7049);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
+  
+  /* Input tokens */
+  --af-input-label: var(--af-typography-body-dark);
+  --af-input-description: var(--af-typography-body-default);
+  --af-input-text: var(--af-typography-body-dark);
+  --af-input-placeholder: var(--af-typography-body-subtle);
+  --af-input-icon: var(--af-background-icon-default);
+  --af-input-bg: var(--colour-brand-white, #ffffff);
+  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);
+  --af-input-bg-disabled: var(--af-background-level-1);
+  --af-input-border: var(--af-background-border-default);
+  --af-input-border-hover: var(--af-background-border-heavy);
+  --af-input-border-active: var(--af-typography-body-dark);
+  --af-input-border-error: var(--colour-error, #be292a);
+  --af-input-error: var(--colour-error, #be292a);
+  --af-input-focus-ring: var(--af-typography-body-dark);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --af-form-control-bg: var(--colour-brand-white, #ffffff);
+  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-bg-disabled: var(--colour-mistgreen-200, #e8ebeb);
+  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);
+  --af-form-control-stroke: var(--colour-mistgreen-500, #d0d6d8);
+  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-stroke-disabled: var(--colour-mistgreen-500, #d0d6d8);
+  --af-form-control-icon: var(--colour-brand-white, #ffffff);
+  --af-form-control-label: var(--colour-brand-inkwell, #14343b);
+}
+
+/* ==========================================================================
+   INKWELL THEME (Dark)
+   ========================================================================== */
+
+.theme-inkwell {
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-inkwell, #14343b);
+  --af-background-base-hover: var(--colour-inkwell-600, #102a2f);
+  --af-background-contrast: var(--colour-inkwell-700, #102a2f);
+  --af-background-level-1: var(--colour-inkwell-450, #203e45);
+  --af-background-level-1-hover: var(--colour-inkwell-400, #2b484f);
+  --af-background-border-subtle: var(--colour-inkwell-450, #203e45);
+  --af-background-border-default: var(--colour-inkwell-400, #2b484f);
+  --af-background-border-heavy: var(--colour-inkwell-700, #102a2f);
+  --af-background-border-active: var(--colour-brand-ice, #a6fffb);
+  --af-background-icon-default: var(--colour-brand-white, #ffffff);
+  --af-background-icon-accent: var(--colour-brand-ice, #a6fffb);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);
+  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);
+  --af-typography-body-dark: var(--colour-brand-white, #ffffff);
+  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);
+  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);
+  
+  /* Input tokens */
+  --af-input-label: var(--af-typography-body-dark);
+  --af-input-description: var(--af-typography-body-default);
+  --af-input-text: var(--af-typography-body-dark);
+  --af-input-placeholder: var(--af-typography-body-subtle);
+  --af-input-icon: var(--af-background-icon-default);
+  --af-input-bg: var(--colour-inkwell-450, #203e45);
+  --af-input-bg-hover: var(--colour-inkwell-400, #2b484f);
+  --af-input-bg-disabled: var(--colour-inkwell-600, #102a2f);
+  --af-input-border: var(--af-background-border-default);
+  --af-input-border-hover: var(--af-background-border-heavy);
+  --af-input-border-active: var(--colour-brand-ice, #a6fffb);
+  --af-input-border-error: var(--colour-error, #be292a);
+  --af-input-error: var(--colour-error, #be292a);
+  --af-input-focus-ring: var(--colour-brand-ice, #a6fffb);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --af-form-control-bg: var(--colour-inkwell-450, #203e45);
+  --af-form-control-bg-checked: var(--colour-brand-mist-green, #c6d5d1);
+  --af-form-control-bg-disabled: var(--colour-inkwell-400, #2b484f);
+  --af-form-control-bg-checked-disabled: var(--colour-mistgreen-700, #9eaaa7);
+  --af-form-control-stroke: var(--colour-inkwell-350, #60767b);
+  --af-form-control-stroke-hover: var(--colour-brand-white, #ffffff);
+  --af-form-control-stroke-disabled: var(--colour-inkwell-400, #2b484f);
+  --af-form-control-icon: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-label: var(--colour-brand-white, #ffffff);
+}
+
+/* ==========================================================================
+   MIST-GREEN THEME
+   ========================================================================== */
+
+.theme-mist-green {
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-base-hover: var(--colour-mistgreen-600, #b2c0bc);
+  --af-background-contrast: var(--colour-brand-soft-clay, #b09670);
+  --af-background-level-1: var(--colour-mistgreen-300, #dde6e3);
+  --af-background-level-1-hover: var(--colour-mistgreen-400, #d1ddda);
+  --af-background-border-subtle: var(--colour-mistgreen-600, #b2c0bc);
+  --af-background-border-default: var(--colour-mistgreen-700, #9eaaa7);
+  --af-background-border-heavy: var(--colour-mistgreen-700, #9eaaa7);
+  --af-background-border-active: var(--colour-softclay-800, #8a7049);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
+  
+  /* Input tokens */
+  --af-input-label: var(--af-typography-body-dark);
+  --af-input-description: var(--af-typography-body-default);
+  --af-input-text: var(--af-typography-body-dark);
+  --af-input-placeholder: var(--af-typography-body-subtle);
+  --af-input-icon: var(--af-background-icon-default);
+  --af-input-bg: var(--colour-brand-white, #ffffff);
+  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);
+  --af-input-bg-disabled: var(--af-background-level-1);
+  --af-input-border: var(--af-background-border-default);
+  --af-input-border-hover: var(--af-background-border-heavy);
+  --af-input-border-active: var(--af-typography-body-dark);
+  --af-input-border-error: var(--colour-error, #be292a);
+  --af-input-error: var(--colour-error, #be292a);
+  --af-input-focus-ring: var(--af-typography-body-dark);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --af-form-control-bg: var(--colour-brand-white, #ffffff);
+  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-bg-disabled: var(--colour-mistgreen-300, #dde6e3);
+  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);
+  --af-form-control-stroke: var(--colour-mistgreen-700, #9eaaa7);
+  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-stroke-disabled: var(--colour-mistgreen-600, #b2c0bc);
+  --af-form-control-icon: var(--colour-brand-white, #ffffff);
+  --af-form-control-label: var(--colour-brand-inkwell, #14343b);
+}
+
+/* ==========================================================================
+   SOFT-CLAY THEME
+   ========================================================================== */
+
+.theme-soft-clay {
+  /* Background tokens */
+  --af-background-base: var(--colour-softclay-400, #c0ab8d);
+  --af-background-base-hover: var(--colour-softclay-500, #b09670);
+  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-level-1: var(--colour-softclay-500, #b09670);
+  --af-background-level-1-hover: var(--colour-softclay-600, #9e8765);
+  --af-background-border-subtle: var(--colour-softclay-600, #9e8765);
+  --af-background-border-default: var(--colour-softclay-700, #8d785a);
+  --af-background-border-heavy: var(--colour-brand-inkwell, #14343b);
+  --af-background-border-active: var(--colour-brand-ice, #a6fffb);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-ivory-paper, #fff9ee);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Input tokens */
+  --af-input-label: var(--af-typography-body-dark);
+  --af-input-description: var(--af-typography-body-default);
+  --af-input-text: var(--af-typography-body-dark);
+  --af-input-placeholder: var(--af-typography-body-subtle);
+  --af-input-icon: var(--af-background-icon-default);
+  --af-input-bg: var(--colour-brand-white, #ffffff);
+  --af-input-bg-hover: var(--colour-mistgreen-100, #f4f7f6);
+  --af-input-bg-disabled: var(--af-background-level-1);
+  --af-input-border: var(--af-background-border-default);
+  --af-input-border-hover: var(--af-background-border-heavy);
+  --af-input-border-active: var(--af-typography-body-dark);
+  --af-input-border-error: var(--colour-error, #be292a);
+  --af-input-error: var(--colour-error, #be292a);
+  --af-input-focus-ring: var(--af-typography-body-dark);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --af-form-control-bg: var(--colour-brand-white, #ffffff);
+  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-bg-disabled: var(--colour-softclay-300, #d0c1a8);
+  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);
+  --af-form-control-stroke: var(--colour-softclay-700, #8d785a);
+  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-stroke-disabled: var(--colour-softclay-600, #9e8765);
+  --af-form-control-icon: var(--colour-brand-white, #ffffff);
+  --af-form-control-label: var(--colour-brand-inkwell, #14343b);
+}
+
+/* ==========================================================================
+   WHITE-IVORY THEME
+   ========================================================================== */
+
+.theme-white-ivory {
+  /* Background tokens */
+  --af-background-base: var(--colour-brand-ivory-paper, #fff9ee);
+  --af-background-base-hover: var(--colour-ivory-100, #fff5e0);
+  --af-background-contrast: var(--colour-brand-mist-green, #c6d5d1);
+  --af-background-level-1: var(--colour-ivory-200, #ffefcc);
+  --af-background-level-1-hover: var(--colour-ivory-300, #ffe9b8);
+  --af-background-border-subtle: var(--colour-ivory-200, #ffefcc);
+  --af-background-border-default: var(--colour-ivory-400, #ffe3a3);
+  --af-background-border-heavy: var(--colour-brand-soft-clay, #b09670);
+  --af-background-border-active: var(--colour-brand-soft-clay, #b09670);
+  --af-background-icon-default: var(--colour-brand-inkwell, #14343b);
+  --af-background-icon-accent: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Typography tokens */
+  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);
+  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);
+  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);
+  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);
+  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);
+  
+  /* Button - Primary */
+  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);
+  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);
+  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Secondary */
+  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-secondary-bg: transparent;
+  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);
+  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
+  
+  /* Button - Tertiary */
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);
+  
+  /* Input tokens */
+  --af-input-label: var(--af-typography-body-dark);
+  --af-input-description: var(--af-typography-body-default);
+  --af-input-text: var(--af-typography-body-dark);
+  --af-input-placeholder: var(--af-typography-body-subtle);
+  --af-input-icon: var(--af-background-icon-default);
+  --af-input-bg: var(--colour-brand-white, #ffffff);
+  --af-input-bg-hover: var(--colour-ivory-100, #fff5e0);
+  --af-input-bg-disabled: var(--af-background-level-1);
+  --af-input-border: var(--af-background-border-default);
+  --af-input-border-hover: var(--af-background-border-heavy);
+  --af-input-border-active: var(--af-typography-body-dark);
+  --af-input-border-error: var(--colour-error, #be292a);
+  --af-input-error: var(--colour-error, #be292a);
+  --af-input-focus-ring: var(--af-typography-body-dark);
+  
+  /* Form control tokens (checkbox, radio, switch) */
+  --af-form-control-bg: var(--colour-brand-white, #ffffff);
+  --af-form-control-bg-checked: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-bg-disabled: var(--colour-ivory-200, #ffefcc);
+  --af-form-control-bg-checked-disabled: var(--colour-inkwell-350, #708380);
+  --af-form-control-stroke: var(--colour-ivory-400, #ffe3a3);
+  --af-form-control-stroke-hover: var(--colour-brand-inkwell, #14343b);
+  --af-form-control-stroke-disabled: var(--colour-ivory-300, #ffe9b8);
+  --af-form-control-icon: var(--colour-brand-white, #ffffff);
+  --af-form-control-label: var(--colour-brand-inkwell, #14343b);
+}
+