@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/theme/tokens/font.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Raw font CSS variable tokens.
+ */
+export declare const FontSpec: {
+    readonly "font-family-heading": "var(--fds-font-family-heading)";
+    readonly "font-family-body": "var(--fds-font-family-body)";
+    readonly "font-variant": "var(--fds-font-variant)";
+    readonly "weight-light": "var(--fds-font-weight-light)";
+    readonly "weight-regular": "var(--fds-font-weight-regular)";
+    readonly "weight-semibold": "var(--fds-font-weight-semibold)";
+    readonly "weight-bold": "var(--fds-font-weight-bold)";
+    readonly "heading-size-xxl": "var(--fds-font-heading-size-xxl)";
+    readonly "heading-size-xl": "var(--fds-font-heading-size-xl)";
+    readonly "heading-size-lg": "var(--fds-font-heading-size-lg)";
+    readonly "heading-size-md": "var(--fds-font-heading-size-md)";
+    readonly "heading-size-sm": "var(--fds-font-heading-size-sm)";
+    readonly "heading-size-xs": "var(--fds-font-heading-size-xs)";
+    readonly "heading-lh-xxl": "var(--fds-font-heading-lh-xxl)";
+    readonly "heading-lh-xl": "var(--fds-font-heading-lh-xl)";
+    readonly "heading-lh-lg": "var(--fds-font-heading-lh-lg)";
+    readonly "heading-lh-md": "var(--fds-font-heading-lh-md)";
+    readonly "heading-lh-sm": "var(--fds-font-heading-lh-sm)";
+    readonly "heading-lh-xs": "var(--fds-font-heading-lh-xs)";
+    readonly "heading-ls-xxl": "var(--fds-font-heading-ls-xxl)";
+    readonly "heading-ls-xl": "var(--fds-font-heading-ls-xl)";
+    readonly "heading-ls-lg": "var(--fds-font-heading-ls-lg)";
+    readonly "heading-ls-md": "var(--fds-font-heading-ls-md)";
+    readonly "heading-ls-sm": "var(--fds-font-heading-ls-sm)";
+    readonly "heading-ls-xs": "var(--fds-font-heading-ls-xs)";
+    readonly "body-size-baseline": "var(--fds-font-body-size-baseline)";
+    readonly "body-size-md": "var(--fds-font-body-size-md)";
+    readonly "body-size-sm": "var(--fds-font-body-size-sm)";
+    readonly "body-size-xs": "var(--fds-font-body-size-xs)";
+    readonly "body-lh-baseline": "var(--fds-font-body-lh-baseline)";
+    readonly "body-lh-md": "var(--fds-font-body-lh-md)";
+    readonly "body-lh-sm": "var(--fds-font-body-lh-sm)";
+    readonly "body-lh-xs": "var(--fds-font-body-lh-xs)";
+    readonly "body-ls-baseline": "var(--fds-font-body-ls-baseline)";
+    readonly "body-ls-md": "var(--fds-font-body-ls-md)";
+    readonly "body-ls-sm": "var(--fds-font-body-ls-sm)";
+    readonly "body-ls-xs": "var(--fds-font-body-ls-xs)";
+    readonly "form-label-size": "var(--fds-font-form-label-size)";
+    readonly "form-label-lh": "var(--fds-font-form-label-lh)";
+    readonly "form-label-ls": "var(--fds-font-form-label-ls)";
+    readonly "form-description-size": "var(--fds-font-form-description-size)";
+    readonly "form-description-lh": "var(--fds-font-form-description-lh)";
+    readonly "form-description-ls": "var(--fds-font-form-description-ls)";
+};
+/**
+ * Pre-composed font declaration strings for all size & weight combinations.
+ * @keywords design tokens, typography
+ */
+export declare const Font: {
+    readonly "heading-xxl-light": string;
+    readonly "heading-xxl-regular": string;
+    readonly "heading-xxl-semibold": string;
+    readonly "heading-xxl-bold": string;
+    readonly "heading-xl-light": string;
+    readonly "heading-xl-regular": string;
+    readonly "heading-xl-semibold": string;
+    readonly "heading-xl-bold": string;
+    readonly "heading-lg-light": string;
+    readonly "heading-lg-regular": string;
+    readonly "heading-lg-semibold": string;
+    readonly "heading-lg-bold": string;
+    readonly "heading-md-light": string;
+    readonly "heading-md-regular": string;
+    readonly "heading-md-semibold": string;
+    readonly "heading-md-bold": string;
+    readonly "heading-sm-light": string;
+    readonly "heading-sm-regular": string;
+    readonly "heading-sm-semibold": string;
+    readonly "heading-sm-bold": string;
+    readonly "heading-xs-light": string;
+    readonly "heading-xs-regular": string;
+    readonly "heading-xs-semibold": string;
+    readonly "heading-xs-bold": string;
+    readonly "body-baseline-light": string;
+    readonly "body-baseline-regular": string;
+    readonly "body-baseline-semibold": string;
+    readonly "body-baseline-bold": string;
+    readonly "body-md-light": string;
+    readonly "body-md-regular": string;
+    readonly "body-md-semibold": string;
+    readonly "body-md-bold": string;
+    readonly "body-sm-light": string;
+    readonly "body-sm-regular": string;
+    readonly "body-sm-semibold": string;
+    readonly "body-sm-bold": string;
+    readonly "body-xs-light": string;
+    readonly "body-xs-regular": string;
+    readonly "body-xs-semibold": string;
+    readonly "body-xs-bold": string;
+    readonly "form-label": string;
+    readonly "form-description": string;
+    readonly Spec: {
+        readonly "font-family-heading": "var(--fds-font-family-heading)";
+        readonly "font-family-body": "var(--fds-font-family-body)";
+        readonly "font-variant": "var(--fds-font-variant)";
+        readonly "weight-light": "var(--fds-font-weight-light)";
+        readonly "weight-regular": "var(--fds-font-weight-regular)";
+        readonly "weight-semibold": "var(--fds-font-weight-semibold)";
+        readonly "weight-bold": "var(--fds-font-weight-bold)";
+        readonly "heading-size-xxl": "var(--fds-font-heading-size-xxl)";
+        readonly "heading-size-xl": "var(--fds-font-heading-size-xl)";
+        readonly "heading-size-lg": "var(--fds-font-heading-size-lg)";
+        readonly "heading-size-md": "var(--fds-font-heading-size-md)";
+        readonly "heading-size-sm": "var(--fds-font-heading-size-sm)";
+        readonly "heading-size-xs": "var(--fds-font-heading-size-xs)";
+        readonly "heading-lh-xxl": "var(--fds-font-heading-lh-xxl)";
+        readonly "heading-lh-xl": "var(--fds-font-heading-lh-xl)";
+        readonly "heading-lh-lg": "var(--fds-font-heading-lh-lg)";
+        readonly "heading-lh-md": "var(--fds-font-heading-lh-md)";
+        readonly "heading-lh-sm": "var(--fds-font-heading-lh-sm)";
+        readonly "heading-lh-xs": "var(--fds-font-heading-lh-xs)";
+        readonly "heading-ls-xxl": "var(--fds-font-heading-ls-xxl)";
+        readonly "heading-ls-xl": "var(--fds-font-heading-ls-xl)";
+        readonly "heading-ls-lg": "var(--fds-font-heading-ls-lg)";
+        readonly "heading-ls-md": "var(--fds-font-heading-ls-md)";
+        readonly "heading-ls-sm": "var(--fds-font-heading-ls-sm)";
+        readonly "heading-ls-xs": "var(--fds-font-heading-ls-xs)";
+        readonly "body-size-baseline": "var(--fds-font-body-size-baseline)";
+        readonly "body-size-md": "var(--fds-font-body-size-md)";
+        readonly "body-size-sm": "var(--fds-font-body-size-sm)";
+        readonly "body-size-xs": "var(--fds-font-body-size-xs)";
+        readonly "body-lh-baseline": "var(--fds-font-body-lh-baseline)";
+        readonly "body-lh-md": "var(--fds-font-body-lh-md)";
+        readonly "body-lh-sm": "var(--fds-font-body-lh-sm)";
+        readonly "body-lh-xs": "var(--fds-font-body-lh-xs)";
+        readonly "body-ls-baseline": "var(--fds-font-body-ls-baseline)";
+        readonly "body-ls-md": "var(--fds-font-body-ls-md)";
+        readonly "body-ls-sm": "var(--fds-font-body-ls-sm)";
+        readonly "body-ls-xs": "var(--fds-font-body-ls-xs)";
+        readonly "form-label-size": "var(--fds-font-form-label-size)";
+        readonly "form-label-lh": "var(--fds-font-form-label-lh)";
+        readonly "form-label-ls": "var(--fds-font-form-label-ls)";
+        readonly "form-description-size": "var(--fds-font-form-description-size)";
+        readonly "form-description-lh": "var(--fds-font-form-description-lh)";
+        readonly "form-description-ls": "var(--fds-font-form-description-ls)";
+    };
+};

package/theme/tokens/font.js

@@ -0,0 +1,2 @@
+import{generateFont as d}from"../utils/font.js";const l={"font-family-heading":"var(--fds-font-family-heading)","font-family-body":"var(--fds-font-family-body)","font-variant":"var(--fds-font-variant)","weight-light":"var(--fds-font-weight-light)","weight-regular":"var(--fds-font-weight-regular)","weight-semibold":"var(--fds-font-weight-semibold)","weight-bold":"var(--fds-font-weight-bold)","heading-size-xxl":"var(--fds-font-heading-size-xxl)","heading-size-xl":"var(--fds-font-heading-size-xl)","heading-size-lg":"var(--fds-font-heading-size-lg)","heading-size-md":"var(--fds-font-heading-size-md)","heading-size-sm":"var(--fds-font-heading-size-sm)","heading-size-xs":"var(--fds-font-heading-size-xs)","heading-lh-xxl":"var(--fds-font-heading-lh-xxl)","heading-lh-xl":"var(--fds-font-heading-lh-xl)","heading-lh-lg":"var(--fds-font-heading-lh-lg)","heading-lh-md":"var(--fds-font-heading-lh-md)","heading-lh-sm":"var(--fds-font-heading-lh-sm)","heading-lh-xs":"var(--fds-font-heading-lh-xs)","heading-ls-xxl":"var(--fds-font-heading-ls-xxl)","heading-ls-xl":"var(--fds-font-heading-ls-xl)","heading-ls-lg":"var(--fds-font-heading-ls-lg)","heading-ls-md":"var(--fds-font-heading-ls-md)","heading-ls-sm":"var(--fds-font-heading-ls-sm)","heading-ls-xs":"var(--fds-font-heading-ls-xs)","body-size-baseline":"var(--fds-font-body-size-baseline)","body-size-md":"var(--fds-font-body-size-md)","body-size-sm":"var(--fds-font-body-size-sm)","body-size-xs":"var(--fds-font-body-size-xs)","body-lh-baseline":"var(--fds-font-body-lh-baseline)","body-lh-md":"var(--fds-font-body-lh-md)","body-lh-sm":"var(--fds-font-body-lh-sm)","body-lh-xs":"var(--fds-font-body-lh-xs)","body-ls-baseline":"var(--fds-font-body-ls-baseline)","body-ls-md":"var(--fds-font-body-ls-md)","body-ls-sm":"var(--fds-font-body-ls-sm)","body-ls-xs":"var(--fds-font-body-ls-xs)","form-label-size":"var(--fds-font-form-label-size)","form-label-lh":"var(--fds-font-form-label-lh)","form-label-ls":"var(--fds-font-form-label-ls)","form-description-size":"var(--fds-font-form-description-size)","form-description-lh":"var(--fds-font-form-description-lh)","form-description-ls":"var(--fds-font-form-description-ls)"},e={"heading-xxl-light":d("heading-xxl","light"),"heading-xxl-regular":d("heading-xxl","regular"),"heading-xxl-semibold":d("heading-xxl","semibold"),"heading-xxl-bold":d("heading-xxl","bold"),"heading-xl-light":d("heading-xl","light"),"heading-xl-regular":d("heading-xl","regular"),"heading-xl-semibold":d("heading-xl","semibold"),"heading-xl-bold":d("heading-xl","bold"),"heading-lg-light":d("heading-lg","light"),"heading-lg-regular":d("heading-lg","regular"),"heading-lg-semibold":d("heading-lg","semibold"),"heading-lg-bold":d("heading-lg","bold"),"heading-md-light":d("heading-md","light"),"heading-md-regular":d("heading-md","regular"),"heading-md-semibold":d("heading-md","semibold"),"heading-md-bold":d("heading-md","bold"),"heading-sm-light":d("heading-sm","light"),"heading-sm-regular":d("heading-sm","regular"),"heading-sm-semibold":d("heading-sm","semibold"),"heading-sm-bold":d("heading-sm","bold"),"heading-xs-light":d("heading-xs","light"),"heading-xs-regular":d("heading-xs","regular"),"heading-xs-semibold":d("heading-xs","semibold"),"heading-xs-bold":d("heading-xs","bold"),"body-baseline-light":d("body-baseline","light"),"body-baseline-regular":d("body-baseline","regular"),"body-baseline-semibold":d("body-baseline","semibold"),"body-baseline-bold":d("body-baseline","bold"),"body-md-light":d("body-md","light"),"body-md-regular":d("body-md","regular"),"body-md-semibold":d("body-md","semibold"),"body-md-bold":d("body-md","bold"),"body-sm-light":d("body-sm","light"),"body-sm-regular":d("body-sm","regular"),"body-sm-semibold":d("body-sm","semibold"),"body-sm-bold":d("body-sm","bold"),"body-xs-light":d("body-xs","light"),"body-xs-regular":d("body-xs","regular"),"body-xs-semibold":d("body-xs","semibold"),"body-xs-bold":d("body-xs","bold"),"form-label":d("form-label","semibold"),"form-description":d("form-description","regular"),Spec:l};export{e as Font,l as FontSpec};
+//# sourceMappingURL=font.js.map

package/theme/tokens/font.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font.js","sources":["../../../src/theme/tokens/font.ts"],"sourcesContent":["import { generateFont } from \"../utils/font\";\n\n/**\n * Raw font CSS variable tokens.\n */\nexport const FontSpec = {\n    \"font-family-heading\": \"var(--fds-font-family-heading)\",\n    \"font-family-body\": \"var(--fds-font-family-body)\",\n    \"font-variant\": \"var(--fds-font-variant)\",\n\n    \"weight-light\": \"var(--fds-font-weight-light)\",\n    \"weight-regular\": \"var(--fds-font-weight-regular)\",\n    \"weight-semibold\": \"var(--fds-font-weight-semibold)\",\n    \"weight-bold\": \"var(--fds-font-weight-bold)\",\n\n    \"heading-size-xxl\": \"var(--fds-font-heading-size-xxl)\",\n    \"heading-size-xl\": \"var(--fds-font-heading-size-xl)\",\n    \"heading-size-lg\": \"var(--fds-font-heading-size-lg)\",\n    \"heading-size-md\": \"var(--fds-font-heading-size-md)\",\n    \"heading-size-sm\": \"var(--fds-font-heading-size-sm)\",\n    \"heading-size-xs\": \"var(--fds-font-heading-size-xs)\",\n\n    \"heading-lh-xxl\": \"var(--fds-font-heading-lh-xxl)\",\n    \"heading-lh-xl\": \"var(--fds-font-heading-lh-xl)\",\n    \"heading-lh-lg\": \"var(--fds-font-heading-lh-lg)\",\n    \"heading-lh-md\": \"var(--fds-font-heading-lh-md)\",\n    \"heading-lh-sm\": \"var(--fds-font-heading-lh-sm)\",\n    \"heading-lh-xs\": \"var(--fds-font-heading-lh-xs)\",\n\n    \"heading-ls-xxl\": \"var(--fds-font-heading-ls-xxl)\",\n    \"heading-ls-xl\": \"var(--fds-font-heading-ls-xl)\",\n    \"heading-ls-lg\": \"var(--fds-font-heading-ls-lg)\",\n    \"heading-ls-md\": \"var(--fds-font-heading-ls-md)\",\n    \"heading-ls-sm\": \"var(--fds-font-heading-ls-sm)\",\n    \"heading-ls-xs\": \"var(--fds-font-heading-ls-xs)\",\n\n    \"body-size-baseline\": \"var(--fds-font-body-size-baseline)\",\n    \"body-size-md\": \"var(--fds-font-body-size-md)\",\n    \"body-size-sm\": \"var(--fds-font-body-size-sm)\",\n    \"body-size-xs\": \"var(--fds-font-body-size-xs)\",\n\n    \"body-lh-baseline\": \"var(--fds-font-body-lh-baseline)\",\n    \"body-lh-md\": \"var(--fds-font-body-lh-md)\",\n    \"body-lh-sm\": \"var(--fds-font-body-lh-sm)\",\n    \"body-lh-xs\": \"var(--fds-font-body-lh-xs)\",\n\n    \"body-ls-baseline\": \"var(--fds-font-body-ls-baseline)\",\n    \"body-ls-md\": \"var(--fds-font-body-ls-md)\",\n    \"body-ls-sm\": \"var(--fds-font-body-ls-sm)\",\n    \"body-ls-xs\": \"var(--fds-font-body-ls-xs)\",\n\n    \"form-label-size\": \"var(--fds-font-form-label-size)\",\n    \"form-label-lh\": \"var(--fds-font-form-label-lh)\",\n    \"form-label-ls\": \"var(--fds-font-form-label-ls)\",\n\n    \"form-description-size\": \"var(--fds-font-form-description-size)\",\n    \"form-description-lh\": \"var(--fds-font-form-description-lh)\",\n    \"form-description-ls\": \"var(--fds-font-form-description-ls)\",\n} as const;\n\n// @catalog\n/**\n * Pre-composed font declaration strings for all size & weight combinations.\n * @keywords design tokens, typography\n */\nexport const Font = {\n    \"heading-xxl-light\": generateFont(\"heading-xxl\", \"light\"),\n    \"heading-xxl-regular\": generateFont(\"heading-xxl\", \"regular\"),\n    \"heading-xxl-semibold\": generateFont(\"heading-xxl\", \"semibold\"),\n    \"heading-xxl-bold\": generateFont(\"heading-xxl\", \"bold\"),\n\n    \"heading-xl-light\": generateFont(\"heading-xl\", \"light\"),\n    \"heading-xl-regular\": generateFont(\"heading-xl\", \"regular\"),\n    \"heading-xl-semibold\": generateFont(\"heading-xl\", \"semibold\"),\n    \"heading-xl-bold\": generateFont(\"heading-xl\", \"bold\"),\n\n    \"heading-lg-light\": generateFont(\"heading-lg\", \"light\"),\n    \"heading-lg-regular\": generateFont(\"heading-lg\", \"regular\"),\n    \"heading-lg-semibold\": generateFont(\"heading-lg\", \"semibold\"),\n    \"heading-lg-bold\": generateFont(\"heading-lg\", \"bold\"),\n\n    \"heading-md-light\": generateFont(\"heading-md\", \"light\"),\n    \"heading-md-regular\": generateFont(\"heading-md\", \"regular\"),\n    \"heading-md-semibold\": generateFont(\"heading-md\", \"semibold\"),\n    \"heading-md-bold\": generateFont(\"heading-md\", \"bold\"),\n\n    \"heading-sm-light\": generateFont(\"heading-sm\", \"light\"),\n    \"heading-sm-regular\": generateFont(\"heading-sm\", \"regular\"),\n    \"heading-sm-semibold\": generateFont(\"heading-sm\", \"semibold\"),\n    \"heading-sm-bold\": generateFont(\"heading-sm\", \"bold\"),\n\n    \"heading-xs-light\": generateFont(\"heading-xs\", \"light\"),\n    \"heading-xs-regular\": generateFont(\"heading-xs\", \"regular\"),\n    \"heading-xs-semibold\": generateFont(\"heading-xs\", \"semibold\"),\n    \"heading-xs-bold\": generateFont(\"heading-xs\", \"bold\"),\n\n    \"body-baseline-light\": generateFont(\"body-baseline\", \"light\"),\n    \"body-baseline-regular\": generateFont(\"body-baseline\", \"regular\"),\n    \"body-baseline-semibold\": generateFont(\"body-baseline\", \"semibold\"),\n    \"body-baseline-bold\": generateFont(\"body-baseline\", \"bold\"),\n\n    \"body-md-light\": generateFont(\"body-md\", \"light\"),\n    \"body-md-regular\": generateFont(\"body-md\", \"regular\"),\n    \"body-md-semibold\": generateFont(\"body-md\", \"semibold\"),\n    \"body-md-bold\": generateFont(\"body-md\", \"bold\"),\n\n    \"body-sm-light\": generateFont(\"body-sm\", \"light\"),\n    \"body-sm-regular\": generateFont(\"body-sm\", \"regular\"),\n    \"body-sm-semibold\": generateFont(\"body-sm\", \"semibold\"),\n    \"body-sm-bold\": generateFont(\"body-sm\", \"bold\"),\n\n    \"body-xs-light\": generateFont(\"body-xs\", \"light\"),\n    \"body-xs-regular\": generateFont(\"body-xs\", \"regular\"),\n    \"body-xs-semibold\": generateFont(\"body-xs\", \"semibold\"),\n    \"body-xs-bold\": generateFont(\"body-xs\", \"bold\"),\n\n    \"form-label\": generateFont(\"form-label\", \"semibold\"),\n    \"form-description\": generateFont(\"form-description\", \"regular\"),\n\n    Spec: FontSpec,\n} as const;\n"],"names":["FontSpec","Font","generateFont","Spec"],"mappings":"gDAKO,MAAMA,EAAW,CACpB,sBAAuB,iCACvB,mBAAoB,8BACpB,eAAgB,0BAEhB,eAAgB,+BAChB,iBAAkB,iCAClB,kBAAmB,kCACnB,cAAe,8BAEf,mBAAoB,mCACpB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCACnB,kBAAmB,kCAEnB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,iBAAkB,iCAClB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCACjB,gBAAiB,gCAEjB,qBAAsB,qCACtB,eAAgB,+BAChB,eAAgB,+BAChB,eAAgB,+BAEhB,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,mBAAoB,mCACpB,aAAc,6BACd,aAAc,6BACd,aAAc,6BAEd,kBAAmB,kCACnB,gBAAiB,gCACjB,gBAAiB,gCAEjB,wBAAyB,wCACzB,sBAAuB,sCACvB,sBAAuB,uCAQdC,EAAO,CAChB,oBAAqBC,EAAa,cAAe,SACjD,sBAAuBA,EAAa,cAAe,WACnD,uBAAwBA,EAAa,cAAe,YACpD,mBAAoBA,EAAa,cAAe,QAEhD,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,mBAAoBA,EAAa,aAAc,SAC/C,qBAAsBA,EAAa,aAAc,WACjD,sBAAuBA,EAAa,aAAc,YAClD,kBAAmBA,EAAa,aAAc,QAE9C,sBAAuBA,EAAa,gBAAiB,SACrD,wBAAyBA,EAAa,gBAAiB,WACvD,yBAA0BA,EAAa,gBAAiB,YACxD,qBAAsBA,EAAa,gBAAiB,QAEpD,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,gBAAiBA,EAAa,UAAW,SACzC,kBAAmBA,EAAa,UAAW,WAC3C,mBAAoBA,EAAa,UAAW,YAC5C,eAAgBA,EAAa,UAAW,QAExC,aAAcA,EAAa,aAAc,YACzC,mBAAoBA,EAAa,mBAAoB,WAErDC,KAAMH"}

package/theme/tokens/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./border";
+export * from "./breakpoint";
+export * from "./colour";
+export * from "./component";
+export * from "./font";
+export * from "./media-query";
+export * from "./motion";
+export * from "./radius";
+export * from "./shadow";
+export * from "./spacing";

package/theme/tokens/media-query.d.ts

@@ -0,0 +1,10 @@
+type PseudoMediaQuerySpec<T extends readonly string[]> = Record<T[number], string>;
+/**
+ * CSS class-based pseudo media-query selectors keyed by breakpoint name.
+ * @keywords breakpoint, responsive
+ */
+export declare const MediaQuery: {
+    readonly MaxWidth: PseudoMediaQuerySpec<readonly ["xxs", "xs", "sm", "md", "lg", "xl"]>;
+    readonly MinWidth: PseudoMediaQuerySpec<readonly ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"]>;
+};
+export {};

package/theme/tokens/media-query.js

@@ -0,0 +1,2 @@
+const x=["xxs","xs","sm","md","lg","xl"],t=[...x,"xxl"],n=(x,t)=>{const n={};return x.forEach((x=>{n[x]=((x,t)=>`:where(body.fds-breakpoint-${x}-${t}) &`)(x,t)})),n},o={MaxWidth:n(x,"max"),MinWidth:n(t,"min")};export{o as MediaQuery};
+//# sourceMappingURL=media-query.js.map

package/theme/tokens/media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-query.js","sources":["../../../src/theme/tokens/media-query.ts"],"sourcesContent":["const MAX_WIDTH_BREAKPOINTS = [\"xxs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\nconst MIN_WIDTH_BREAKPOINTS = [...MAX_WIDTH_BREAKPOINTS, \"xxl\"] as const;\n\ntype WidthConstraint = \"min\" | \"max\";\ntype PseudoMediaQuerySpec<T extends readonly string[]> = Record<\n    T[number],\n    string\n>;\n\nconst getPseudoMediaQuery = (breakpoint: string, type: WidthConstraint) =>\n    `:where(body.fds-breakpoint-${breakpoint}-${type}) &`;\n\nconst getPseudoMediaQuerySpec = <T extends readonly string[]>(\n    breakpoints: T,\n    type: WidthConstraint\n): PseudoMediaQuerySpec<T> => {\n    const spec = {} as Record<T[number], string>;\n\n    breakpoints.forEach((breakpoint) => {\n        spec[breakpoint as T[number]] = getPseudoMediaQuery(breakpoint, type);\n    });\n\n    return spec;\n};\n\n// @catalog\n/**\n * CSS class-based pseudo media-query selectors keyed by breakpoint name.\n * @keywords breakpoint, responsive\n */\nexport const MediaQuery = {\n    MaxWidth: getPseudoMediaQuerySpec(MAX_WIDTH_BREAKPOINTS, \"max\"),\n    MinWidth: getPseudoMediaQuerySpec(MIN_WIDTH_BREAKPOINTS, \"min\"),\n} as const;\n"],"names":["MAX_WIDTH_BREAKPOINTS","MIN_WIDTH_BREAKPOINTS","getPseudoMediaQuerySpec","breakpoints","type","spec","forEach","breakpoint","getPseudoMediaQuery","MediaQuery","MaxWidth","MinWidth"],"mappings":"AAAA,MAAMA,EAAwB,CAAC,MAAO,KAAM,KAAM,KAAM,KAAM,MACxDC,EAAwB,IAAID,EAAuB,OAWnDE,EAA0B,CAC5BC,EACAC,KAEA,MAAMC,EAAO,CAAA,EAMb,OAJAF,EAAYG,SAASC,IACjBF,EAAKE,GAVe,EAACA,EAAoBH,IAC7C,8BAA8BG,KAAcH,OASRI,CAAoBD,EAAYH,EAAK,IAGlEC,CAAI,EAQFI,EAAa,CACtBC,SAAUR,EAAwBF,EAAuB,OACzDW,SAAUT,EAAwBD,EAAuB"}

package/theme/tokens/motion.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Animation tokens consisting of durations and easing functions.
+ * @keywords animation, design tokens, transition
+ */
+export declare const Motion: {
+    readonly "duration-150": "var(--fds-motion-duration-150)";
+    readonly "duration-250": "var(--fds-motion-duration-250)";
+    readonly "duration-350": "var(--fds-motion-duration-350)";
+    readonly "duration-500": "var(--fds-motion-duration-500)";
+    readonly "duration-800": "var(--fds-motion-duration-800)";
+    readonly "duration-1000": "var(--fds-motion-duration-1000)";
+    readonly "ease-default": "var(--fds-motion-timing-ease-default)";
+    readonly "ease-standard": "var(--fds-motion-timing-ease-standard)";
+    readonly "ease-entrance": "var(--fds-motion-timing-ease-entrance)";
+    readonly "ease-exit": "var(--fds-motion-timing-ease-exit)";
+};

package/theme/tokens/motion.js

@@ -0,0 +1,2 @@
+const a={"duration-150":"var(--fds-motion-duration-150)","duration-250":"var(--fds-motion-duration-250)","duration-350":"var(--fds-motion-duration-350)","duration-500":"var(--fds-motion-duration-500)","duration-800":"var(--fds-motion-duration-800)","duration-1000":"var(--fds-motion-duration-1000)","ease-default":"var(--fds-motion-timing-ease-default)","ease-standard":"var(--fds-motion-timing-ease-standard)","ease-entrance":"var(--fds-motion-timing-ease-entrance)","ease-exit":"var(--fds-motion-timing-ease-exit)"};export{a as Motion};
+//# sourceMappingURL=motion.js.map

package/theme/tokens/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sources":["../../../src/theme/tokens/motion.ts"],"sourcesContent":["// @catalog\n/**\n * Animation tokens consisting of durations and easing functions.\n * @keywords animation, design tokens, transition\n */\nexport const Motion = {\n    \"duration-150\": \"var(--fds-motion-duration-150)\",\n    \"duration-250\": \"var(--fds-motion-duration-250)\",\n    \"duration-350\": \"var(--fds-motion-duration-350)\",\n    \"duration-500\": \"var(--fds-motion-duration-500)\",\n    \"duration-800\": \"var(--fds-motion-duration-800)\",\n    \"duration-1000\": \"var(--fds-motion-duration-1000)\",\n\n    \"ease-default\": \"var(--fds-motion-timing-ease-default)\",\n    \"ease-standard\": \"var(--fds-motion-timing-ease-standard)\",\n    \"ease-entrance\": \"var(--fds-motion-timing-ease-entrance)\",\n    \"ease-exit\": \"var(--fds-motion-timing-ease-exit)\",\n} as const;\n"],"names":["Motion"],"mappings":"AAKO,MAAMA,EAAS,CAClB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,eAAgB,iCAChB,gBAAiB,kCAEjB,eAAgB,wCAChB,gBAAiB,yCACjB,gBAAiB,yCACjB,YAAa"}

package/theme/tokens/radius.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Border radius tokens.
+ * @keywords border radius, design tokens, shape
+ */
+export declare const Radius: {
+    readonly none: "var(--fds-radius-none)";
+    readonly xs: "var(--fds-radius-xs)";
+    readonly sm: "var(--fds-radius-sm)";
+    readonly md: "var(--fds-radius-md)";
+    readonly lg: "var(--fds-radius-lg)";
+    readonly full: "var(--fds-radius-full)";
+};

package/theme/tokens/radius.js

@@ -0,0 +1,2 @@
+const s={none:"var(--fds-radius-none)",xs:"var(--fds-radius-xs)",sm:"var(--fds-radius-sm)",md:"var(--fds-radius-md)",lg:"var(--fds-radius-lg)",full:"var(--fds-radius-full)"};export{s as Radius};
+//# sourceMappingURL=radius.js.map

package/theme/tokens/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.js","sources":["../../../src/theme/tokens/radius.ts"],"sourcesContent":["// @catalog\n/**\n * Border radius tokens.\n * @keywords border radius, design tokens, shape\n */\nexport const Radius = {\n    none: \"var(--fds-radius-none)\",\n    xs: \"var(--fds-radius-xs)\",\n    sm: \"var(--fds-radius-sm)\",\n    md: \"var(--fds-radius-md)\",\n    lg: \"var(--fds-radius-lg)\",\n    full: \"var(--fds-radius-full)\",\n} as const;\n"],"names":["Radius","none","xs","sm","md","lg","full"],"mappings":"AAKO,MAAMA,EAAS,CAClBC,KAAM,yBACNC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,GAAI,uBACJC,KAAM"}

package/theme/tokens/shadow.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Box-shadow tokens.
+ * @keywords box-shadow, depth, design tokens, elevation
+ */
+export declare const Shadow: {
+    readonly "xs-subtle": "var(--fds-shadow-xs-subtle)";
+    readonly "xs-strong": "var(--fds-shadow-xs-strong)";
+    readonly "xs-focus-strong": "var(--fds-shadow-xs-focus-strong)";
+    readonly "xs-error-strong": "var(--fds-shadow-xs-error-strong)";
+    readonly "sm-subtle": "var(--fds-shadow-sm-subtle)";
+    readonly "sm-strong": "var(--fds-shadow-sm-strong)";
+    readonly "md-subtle": "var(--fds-shadow-md-subtle)";
+    readonly "md-strong": "var(--fds-shadow-md-strong)";
+    readonly "lg-subtle": "var(--fds-shadow-lg-subtle)";
+    readonly "lg-strong": "var(--fds-shadow-lg-strong)";
+};

package/theme/tokens/shadow.js

@@ -0,0 +1,2 @@
+const s={"xs-subtle":"var(--fds-shadow-xs-subtle)","xs-strong":"var(--fds-shadow-xs-strong)","xs-focus-strong":"var(--fds-shadow-xs-focus-strong)","xs-error-strong":"var(--fds-shadow-xs-error-strong)","sm-subtle":"var(--fds-shadow-sm-subtle)","sm-strong":"var(--fds-shadow-sm-strong)","md-subtle":"var(--fds-shadow-md-subtle)","md-strong":"var(--fds-shadow-md-strong)","lg-subtle":"var(--fds-shadow-lg-subtle)","lg-strong":"var(--fds-shadow-lg-strong)"};export{s as Shadow};
+//# sourceMappingURL=shadow.js.map

package/theme/tokens/shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.js","sources":["../../../src/theme/tokens/shadow.ts"],"sourcesContent":["// @catalog\n/**\n * Box-shadow tokens.\n * @keywords box-shadow, depth, design tokens, elevation\n */\nexport const Shadow = {\n    \"xs-subtle\": \"var(--fds-shadow-xs-subtle)\",\n    \"xs-strong\": \"var(--fds-shadow-xs-strong)\",\n    \"xs-focus-strong\": \"var(--fds-shadow-xs-focus-strong)\",\n    \"xs-error-strong\": \"var(--fds-shadow-xs-error-strong)\",\n    \"sm-subtle\": \"var(--fds-shadow-sm-subtle)\",\n    \"sm-strong\": \"var(--fds-shadow-sm-strong)\",\n    \"md-subtle\": \"var(--fds-shadow-md-subtle)\",\n    \"md-strong\": \"var(--fds-shadow-md-strong)\",\n    \"lg-subtle\": \"var(--fds-shadow-lg-subtle)\",\n    \"lg-strong\": \"var(--fds-shadow-lg-strong)\",\n} as const;\n"],"names":["Shadow"],"mappings":"AAKO,MAAMA,EAAS,CAClB,YAAa,8BACb,YAAa,8BACb,kBAAmB,oCACnB,kBAAmB,oCACnB,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,YAAa"}

package/theme/tokens/spacing.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Spacing tokens consisting of component spacing and layout spacing.
+ * @keywords design tokens, gap, layout, margin
+ */
+export declare const Spacing: {
+    readonly "spacing-0": "var(--fds-spacing-0)";
+    readonly "spacing-4": "var(--fds-spacing-4)";
+    readonly "spacing-8": "var(--fds-spacing-8)";
+    readonly "spacing-12": "var(--fds-spacing-12)";
+    readonly "spacing-16": "var(--fds-spacing-16)";
+    readonly "spacing-20": "var(--fds-spacing-20)";
+    readonly "spacing-24": "var(--fds-spacing-24)";
+    readonly "spacing-32": "var(--fds-spacing-32)";
+    readonly "spacing-40": "var(--fds-spacing-40)";
+    readonly "spacing-48": "var(--fds-spacing-48)";
+    readonly "spacing-64": "var(--fds-spacing-64)";
+    readonly "spacing-72": "var(--fds-spacing-72)";
+    readonly "layout-xs": "var(--fds-layout-xs)";
+    readonly "layout-sm": "var(--fds-layout-sm)";
+    readonly "layout-md": "var(--fds-layout-md)";
+    readonly "layout-lg": "var(--fds-layout-lg)";
+    readonly "layout-xl": "var(--fds-layout-xl)";
+    readonly "layout-xxl": "var(--fds-layout-xxl)";
+    readonly "layout-xxxl": "var(--fds-layout-xxxl)";
+};

package/theme/tokens/spacing.js

@@ -0,0 +1,2 @@
+const a={"spacing-0":"var(--fds-spacing-0)","spacing-4":"var(--fds-spacing-4)","spacing-8":"var(--fds-spacing-8)","spacing-12":"var(--fds-spacing-12)","spacing-16":"var(--fds-spacing-16)","spacing-20":"var(--fds-spacing-20)","spacing-24":"var(--fds-spacing-24)","spacing-32":"var(--fds-spacing-32)","spacing-40":"var(--fds-spacing-40)","spacing-48":"var(--fds-spacing-48)","spacing-64":"var(--fds-spacing-64)","spacing-72":"var(--fds-spacing-72)","layout-xs":"var(--fds-layout-xs)","layout-sm":"var(--fds-layout-sm)","layout-md":"var(--fds-layout-md)","layout-lg":"var(--fds-layout-lg)","layout-xl":"var(--fds-layout-xl)","layout-xxl":"var(--fds-layout-xxl)","layout-xxxl":"var(--fds-layout-xxxl)"};export{a as Spacing};
+//# sourceMappingURL=spacing.js.map

package/theme/tokens/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.js","sources":["../../../src/theme/tokens/spacing.ts"],"sourcesContent":["// @catalog\n/**\n * Spacing tokens consisting of component spacing and layout spacing.\n * @keywords design tokens, gap, layout, margin\n */\nexport const Spacing = {\n    \"spacing-0\": \"var(--fds-spacing-0)\",\n    \"spacing-4\": \"var(--fds-spacing-4)\",\n    \"spacing-8\": \"var(--fds-spacing-8)\",\n    \"spacing-12\": \"var(--fds-spacing-12)\",\n    \"spacing-16\": \"var(--fds-spacing-16)\",\n    \"spacing-20\": \"var(--fds-spacing-20)\",\n    \"spacing-24\": \"var(--fds-spacing-24)\",\n    \"spacing-32\": \"var(--fds-spacing-32)\",\n    \"spacing-40\": \"var(--fds-spacing-40)\",\n    \"spacing-48\": \"var(--fds-spacing-48)\",\n    \"spacing-64\": \"var(--fds-spacing-64)\",\n    \"spacing-72\": \"var(--fds-spacing-72)\",\n\n    \"layout-xs\": \"var(--fds-layout-xs)\",\n    \"layout-sm\": \"var(--fds-layout-sm)\",\n    \"layout-md\": \"var(--fds-layout-md)\",\n    \"layout-lg\": \"var(--fds-layout-lg)\",\n    \"layout-xl\": \"var(--fds-layout-xl)\",\n    \"layout-xxl\": \"var(--fds-layout-xxl)\",\n    \"layout-xxxl\": \"var(--fds-layout-xxxl)\",\n} as const;\n"],"names":["Spacing"],"mappings":"AAKO,MAAMA,EAAU,CACnB,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBACd,aAAc,wBAEd,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,YAAa,uBACb,aAAc,wBACd,cAAe"}

package/theme/types.d.ts

@@ -1,78 +1,43 @@
-import { ReactNode } from "react";
-import { V2_ThemeSpec } from "../v2_theme/types";
-import { BorderSetOptions } from "./border/types";
-import { BreakpointSetOptions } from "./breakpoint/types";
-import { PrimitiveColourSetOptions } from "./colour-primitive/types";
-import { SemanticColourSetOptions } from "./colour-semantic/types";
-import { ComponentOverrideOptions } from "./components/types";
-import { FontSpecSetOptions } from "./font-spec/types";
-import { FontSetOptions } from "./font/types";
-import { MotionSetOptions } from "./motion/types";
-import { RadiusSetOptions } from "./radius/types";
-import { ShadowSetOptions } from "./shadow/types";
-import { SpacingSetOptions } from "./spacing/types";
-export type { PrimitiveColourSet, PrimitiveColourSetOptions, } from "./colour-primitive/types";
-export type { SemanticColourSet, SemanticColourSetOptions, } from "./colour-semantic/types";
-export type { FontSpecSet, FontSpecSetOptions } from "./font-spec/types";
-export type { FontSet, FontSetOptions } from "./font/types";
-export type { MotionSet, MotionSetOptions } from "./motion/types";
-export type { BorderSet, BorderSetOptions } from "./border/types";
-export type { RadiusSet, RadiusSetOptions } from "./radius/types";
-export type { ShadowSet, ShadowSetOptions } from "./shadow/types";
-export type { SpacingSet, SpacingSetOptions } from "./spacing/types";
-export type { BreakpointSet, BreakpointSetOptions } from "./breakpoint/types";
-export type ColourScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube" | "oneservice" | "pa" | "a11yplayground" | "supportgowhere" | "sgwdigitallobby" | "imda" | "spf" | "smgs" | "careercompass" | "toteboard";
-export type FontScheme = "default" | "bookingsg" | "mylegacy" | "pa" | "a11yplayground" | "supportgowhere" | "sgwdigitallobby" | "imda" | "spf" | "oneservice" | "toteboard";
-export type MotionScheme = "default";
-export type BorderScheme = "default";
-export type SpacingScheme = "default";
-export type RadiusScheme = "default" | "spf";
-export type ShadowScheme = "default";
-export type BreakpointScheme = "default";
-export type ComponentScheme = "default" | "pa" | "a11yplayground" | "lifesg" | "spf" | "smgs";
-export type ResourceScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube" | "oneservice" | "pa" | "a11yplayground" | "supportgowhere" | "imda" | "spf" | "smgs" | "careercompass" | "toteboard";
-export type ColourMode = "light" | "dark";
-export interface ThemeSpecOptions {
-    primitiveColour?: PrimitiveColourSetOptions | undefined;
-    primitiveColourDark?: PrimitiveColourSetOptions | undefined;
-    semanticColour?: SemanticColourSetOptions | undefined;
-    semanticColourDark?: SemanticColourSetOptions | undefined;
-    fontSpec?: FontSpecSetOptions | undefined;
-    font?: FontSetOptions | undefined;
-    motion?: MotionSetOptions | undefined;
-    spacing?: SpacingSetOptions | undefined;
-    border?: BorderSetOptions | undefined;
-    radius?: RadiusSetOptions | undefined;
-    shadow?: ShadowSetOptions | undefined;
-    resourceScheme?: ResourceScheme | undefined;
-    breakpoint?: BreakpointSetOptions | undefined;
-}
-export interface ThemeSpec {
-    colourScheme: ColourScheme;
-    colourMode?: ColourMode | undefined;
-    fontScheme: FontScheme;
-    motionScheme: MotionScheme;
-    borderScheme: BorderScheme;
-    spacingScheme: SpacingScheme;
-    radiusScheme: RadiusScheme;
-    shadowScheme: ShadowScheme;
-    breakpointScheme: BreakpointScheme;
-    resourceScheme: ResourceScheme;
-    componentScheme?: ComponentScheme | undefined;
-    componentOverrides?: ComponentOverrideOptions | undefined;
-    overrides?: ThemeSpecOptions | undefined;
-    maxColumns?: any;
-    /** @deprecated For backwards compatibility with V2 theme */
-    _v2?: V2_ThemeSpec;
-}
-export interface ThemeStyleProps {
-    theme?: ThemeSpec;
-}
-export interface DSThemeProviderProps {
-    theme: ThemeSpec;
-    children: ReactNode;
-}
-export interface DSTheme {
-    colourMode: ColourMode;
-    theme: ThemeSpec | null;
-}
+import type { ValueOf } from "../util/utility-types";
+import type { Border, Breakpoint, ComponentToken, FontSpec, Motion, PrimitiveColours, Radius, SemanticColours, Shadow, Spacing } from "./tokens";
+/** All available theme names. */
+export declare const THEME_TYPES: readonly ["a11y-playground", "bookingsg", "careercompass", "ccube", "imda", "lifesg", "mylegacy", "oneservice", "pa", "rbs", "sgw-digital-lobby", "smgs", "spf", "supportgowhere", "tote-board"];
+/** Union of all supported theme names. */
+export type ThemeType = (typeof THEME_TYPES)[number];
+/**
+ * Colour mode accepted by `ThemeProvider`.
+ * — `"auto"` follows OS preference.
+ * - `"light"` light mode.
+ * - `"dark"` dark mode.
+ */
+export type ThemeMode = "light" | "dark" | "auto";
+/** Resolved colour mode. */
+export type ResolvedThemeMode = "light" | "dark";
+/** Available typography size presets. */
+export type FontSize = "heading-xxl" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-baseline" | "body-md" | "body-sm" | "body-xs" | "form-label" | "form-description";
+/** Available typography weight presets. */
+export type FontWeight = "light" | "regular" | "semibold" | "bold";
+/** Accepted breakpoint CSS variable strings. */
+export type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;
+/** Accepted border CSS variable strings. */
+export type BorderCSSVariableString = ValueOf<typeof Border>;
+/** Accepted component-scoped CSS variable strings. */
+export type ComponentTokenCSSVariableString = ValueOf<typeof ComponentToken.Animation> | ValueOf<typeof ComponentToken.Button> | ValueOf<typeof ComponentToken.Footer> | ValueOf<typeof ComponentToken.Navbar>;
+/** Accepted font CSS variable strings. */
+export type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;
+/** Accepted motion CSS variable strings. */
+export type MotionCSSVariableString = ValueOf<typeof Motion>;
+/** Accepted primitive colour CSS variable strings. */
+export type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;
+/** Accepted radius CSS variable strings. */
+export type RadiusCSSVariableString = ValueOf<typeof Radius>;
+/** Accepted semantic colour CSS variable strings. */
+export type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;
+/** Accepted colour CSS variable strings. */
+export type ColourCSSVariableString = PrimitiveColourCSSVariableString | SemanticColourCSSVariableString;
+/** Accepted shadow CSS variable strings. */
+export type ShadowCSSVariableString = ValueOf<typeof Shadow>;
+/** Accepted spacing and layout CSS variable strings. */
+export type SpacingCSSVariableString = ValueOf<typeof Spacing>;
+/** Union of all design-token CSS variable string literals. */
+export type CSSVariableString = BreakpointCSSVariableString | BorderCSSVariableString | ColourCSSVariableString | ComponentTokenCSSVariableString | FontSpecCSSVariableString | MotionCSSVariableString | RadiusCSSVariableString | ShadowCSSVariableString | SpacingCSSVariableString;

package/theme/types.js

@@ -0,0 +1,2 @@
+const e=["a11y-playground","bookingsg","careercompass","ccube","imda","lifesg","mylegacy","oneservice","pa","rbs","sgw-digital-lobby","smgs","spf","supportgowhere","tote-board"];export{e as THEME_TYPES};
+//# sourceMappingURL=types.js.map

package/theme/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../src/theme/types.ts"],"sourcesContent":["import type { ValueOf } from \"../util/utility-types\";\nimport type {\n    Border,\n    Breakpoint,\n    ComponentToken,\n    FontSpec,\n    Motion,\n    PrimitiveColours,\n    Radius,\n    SemanticColours,\n    Shadow,\n    Spacing,\n} from \"./tokens\";\n\n/** All available theme names. */\nexport const THEME_TYPES = [\n    \"a11y-playground\",\n    \"bookingsg\",\n    \"careercompass\",\n    \"ccube\",\n    \"imda\",\n    \"lifesg\",\n    \"mylegacy\",\n    \"oneservice\",\n    \"pa\",\n    \"rbs\",\n    \"sgw-digital-lobby\",\n    \"smgs\",\n    \"spf\",\n    \"supportgowhere\",\n    \"tote-board\",\n] as const;\n\n/** Union of all supported theme names. */\nexport type ThemeType = (typeof THEME_TYPES)[number];\n/**\n * Colour mode accepted by `ThemeProvider`.\n * — `\"auto\"` follows OS preference.\n * - `\"light\"` light mode.\n * - `\"dark\"` dark mode.\n */\nexport type ThemeMode = \"light\" | \"dark\" | \"auto\";\n\n/** Resolved colour mode. */\nexport type ResolvedThemeMode = \"light\" | \"dark\";\n\n/** Available typography size presets. */\nexport type FontSize =\n    | \"heading-xxl\"\n    | \"heading-xl\"\n    | \"heading-lg\"\n    | \"heading-md\"\n    | \"heading-sm\"\n    | \"heading-xs\"\n    | \"body-baseline\"\n    | \"body-md\"\n    | \"body-sm\"\n    | \"body-xs\"\n    | \"form-label\"\n    | \"form-description\";\n\n/** Available typography weight presets. */\nexport type FontWeight = \"light\" | \"regular\" | \"semibold\" | \"bold\";\n\n/** Accepted breakpoint CSS variable strings. */\nexport type BreakpointCSSVariableString = ValueOf<typeof Breakpoint>;\n/** Accepted border CSS variable strings. */\nexport type BorderCSSVariableString = ValueOf<typeof Border>;\n/** Accepted component-scoped CSS variable strings. */\nexport type ComponentTokenCSSVariableString =\n    | ValueOf<typeof ComponentToken.Animation>\n    | ValueOf<typeof ComponentToken.Button>\n    | ValueOf<typeof ComponentToken.Footer>\n    | ValueOf<typeof ComponentToken.Navbar>;\n/** Accepted font CSS variable strings. */\nexport type FontSpecCSSVariableString = ValueOf<typeof FontSpec>;\n/** Accepted motion CSS variable strings. */\nexport type MotionCSSVariableString = ValueOf<typeof Motion>;\n/** Accepted primitive colour CSS variable strings. */\nexport type PrimitiveColourCSSVariableString = ValueOf<typeof PrimitiveColours>;\n/** Accepted radius CSS variable strings. */\nexport type RadiusCSSVariableString = ValueOf<typeof Radius>;\n/** Accepted semantic colour CSS variable strings. */\nexport type SemanticColourCSSVariableString = ValueOf<typeof SemanticColours>;\n/** Accepted colour CSS variable strings. */\nexport type ColourCSSVariableString =\n    | PrimitiveColourCSSVariableString\n    | SemanticColourCSSVariableString;\n/** Accepted shadow CSS variable strings. */\nexport type ShadowCSSVariableString = ValueOf<typeof Shadow>;\n/** Accepted spacing and layout CSS variable strings. */\nexport type SpacingCSSVariableString = ValueOf<typeof Spacing>;\n\n/** Union of all design-token CSS variable string literals. */\nexport type CSSVariableString =\n    | BreakpointCSSVariableString\n    | BorderCSSVariableString\n    | ColourCSSVariableString\n    | ComponentTokenCSSVariableString\n    | FontSpecCSSVariableString\n    | MotionCSSVariableString\n    | RadiusCSSVariableString\n    | ShadowCSSVariableString\n    | SpacingCSSVariableString;\n"],"names":["THEME_TYPES"],"mappings":"AAeO,MAAMA,EAAc,CACvB,kBACA,YACA,gBACA,QACA,OACA,SACA,WACA,aACA,KACA,MACA,oBACA,OACA,MACA,iBACA"}

package/theme/utils/css-variable.d.ts

@@ -0,0 +1,36 @@
+import type { CSSProperties } from "react";
+import type { CSSVariableString } from "../types";
+/**
+ * Extracts an fds CSS variable name from raw token input.
+ * Supports values like `"var(--fds-breakpoint-sm-max)"` and `"--fds-breakpoint-sm-max"`.
+ *
+ * @returns The extracted `--fds-*` variable name, or `undefined` if the input
+ * does not contain a valid fds token.
+ */
+export declare const extractFdsCssVariableName: (value: string | undefined) => `--fds-${string}` | undefined;
+/**
+ * Parse a CSS variable string and return its computed value.
+ * @param cssVarString CSS variable string (e.g., "var(--fds-breakpoint-xxs-min)")
+ * @param sourceElement Element to compute the CSS variable value from
+ * @returns The CSS variable value, or an empty string if not found or invalid
+ */
+export declare function parseCSSVariableValue(cssVarString: CSSVariableString | undefined, sourceElement: HTMLElement | null): string;
+/**
+ * Parse a pixel or rem value and return its numeric value.
+ * @param cssValue CSS unit value (e.g., "12px", "1.5rem")
+ * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid
+ */
+export declare function parsePxOrRemValue(cssValue: string): number;
+/**
+ * Extracts inline token CSS custom properties from the theme element.
+ *
+ * @returns An object of `--fds-*` properties, or `{}` when the element is
+ * `null` or has no inline styles.
+ */
+export declare const getInheritedInlineCssVariables: (themeElement: HTMLElement | null) => CSSProperties;
+/**
+ * Convert a numeric value to a CSS unit string (e.g., `12` → `"12px"`).
+ *
+ * @returns The formatted string, or `null` for non-numeric values.
+ */
+export declare const formatUnitValue: (value: unknown, unit: string) => string | null;

package/theme/utils/css-variable.js

@@ -0,0 +1,2 @@
+const e=/^(-?\d*\.?\d+)(px|rem)$/i,t=e=>{var t;if(!e)return;const n=null===(t=/--fds-[\w-]+/.exec(e))||void 0===t?void 0:t[0];return n||void 0};function n(e,n){if(!e)return"";if(!globalThis.window||!n)return console.warn(`Cannot parse CSS variable value for "${e}" because window or sourceElement is not available.`),"";const r=t(e);return r?getComputedStyle(n).getPropertyValue(r).trim():(console.warn(`Invalid CSS variable string: ${e}. Expected format: var(--fds-token-name)`),"")}function r(t){const n=t.trim(),r=e.exec(n);if(!r)return 0;const o=Number.parseFloat(r[1]);if(Number.isNaN(o))return 0;if("px"===r[2].toLowerCase())return o;const i=globalThis.window?Number.parseFloat(getComputedStyle(document.documentElement).fontSize):16;return o*(Number.isNaN(i)?16:i)}const o=e=>{if(!e||0===e.style.length)return{};const t={};return((e,t)=>{const{style:n}=e;for(let e=0;e<n.length;e++){const r=n.item(e);if(!(null==r?void 0:r.startsWith("--fds")))continue;const o=n.getPropertyValue(r).trim();o&&(t[r]=o)}})(e,t),t},i=(e,t)=>"number"==typeof e?`${e}${t}`:null;export{t as extractFdsCssVariableName,i as formatUnitValue,o as getInheritedInlineCssVariables,n as parseCSSVariableValue,r as parsePxOrRemValue};
+//# sourceMappingURL=css-variable.js.map

package/theme/utils/css-variable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-variable.js","sources":["../../../src/theme/utils/css-variable.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\nimport type { CSSVariableString } from \"../types\";\n\ntype InlineCssVariables = Record<`--${string}`, string>;\n\nconst DEFAULT_FONT_SIZE_PX = 16;\nconst CSS_PX_OR_REM_CAPTURE_PATTERN = /^(-?\\d*\\.?\\d+)(px|rem)$/i;\n\n/**\n * Extracts an fds CSS variable name from raw token input.\n * Supports values like `\"var(--fds-breakpoint-sm-max)\"` and `\"--fds-breakpoint-sm-max\"`.\n *\n * @returns The extracted `--fds-*` variable name, or `undefined` if the input\n * does not contain a valid fds token.\n */\nexport const extractFdsCssVariableName = (\n    value: string | undefined\n): `--fds-${string}` | undefined => {\n    if (!value) return undefined;\n\n    const variableName = /--fds-[\\w-]+/.exec(value)?.[0];\n\n    if (!variableName) {\n        return undefined;\n    }\n\n    return variableName as `--fds-${string}`;\n};\n\n/**\n * Parse a CSS variable string and return its computed value.\n * @param cssVarString CSS variable string (e.g., \"var(--fds-breakpoint-xxs-min)\")\n * @param sourceElement Element to compute the CSS variable value from\n * @returns The CSS variable value, or an empty string if not found or invalid\n */\nexport function parseCSSVariableValue(\n    cssVarString: CSSVariableString | undefined,\n    sourceElement: HTMLElement | null\n): string {\n    if (!cssVarString) return \"\";\n\n    if (!globalThis.window || !sourceElement) {\n        console.warn(\n            `Cannot parse CSS variable value for \"${cssVarString}\" because window or sourceElement is not available.`\n        );\n        return \"\";\n    }\n\n    const variableName = extractFdsCssVariableName(cssVarString);\n    if (!variableName) {\n        console.warn(\n            `Invalid CSS variable string: ${cssVarString}. Expected format: var(--fds-token-name)`\n        );\n        return \"\";\n    }\n\n    return getComputedStyle(sourceElement)\n        .getPropertyValue(variableName)\n        .trim();\n}\n\n/**\n * Parse a pixel or rem value and return its numeric value.\n * @param cssValue CSS unit value (e.g., \"12px\", \"1.5rem\")\n * @returns Parsed numeric value, or 0 if the value is not px/rem or invalid\n */\nexport function parsePxOrRemValue(cssValue: string): number {\n    const value = cssValue.trim();\n    const match = CSS_PX_OR_REM_CAPTURE_PATTERN.exec(value);\n    if (!match) return 0;\n\n    const parsedValue = Number.parseFloat(match[1]);\n    if (Number.isNaN(parsedValue)) return 0;\n\n    const unit = match[2].toLowerCase();\n    if (unit === \"px\") return parsedValue;\n\n    const rootFontSize = globalThis.window\n        ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize)\n        : DEFAULT_FONT_SIZE_PX;\n\n    const resolvedRootFontSize = Number.isNaN(rootFontSize)\n        ? DEFAULT_FONT_SIZE_PX\n        : rootFontSize;\n\n    return parsedValue * resolvedRootFontSize;\n}\n\nconst mergeInlineCssVariables = (\n    element: HTMLElement,\n    target: InlineCssVariables\n) => {\n    const { style } = element;\n\n    for (let i = 0; i < style.length; i++) {\n        const propertyName = style.item(i);\n        if (!propertyName?.startsWith(\"--fds\")) continue;\n\n        const value = style.getPropertyValue(propertyName).trim();\n        if (!value) continue;\n\n        target[propertyName as `--${string}`] = value;\n    }\n};\n\n/**\n * Extracts inline token CSS custom properties from the theme element.\n *\n * @returns An object of `--fds-*` properties, or `{}` when the element is\n * `null` or has no inline styles.\n */\nexport const getInheritedInlineCssVariables = (\n    themeElement: HTMLElement | null\n): CSSProperties => {\n    if (!themeElement || themeElement.style.length === 0) return {};\n\n    const variables: InlineCssVariables = {};\n    mergeInlineCssVariables(themeElement, variables);\n\n    return variables;\n};\n\n/**\n * Convert a numeric value to a CSS unit string (e.g., `12` → `\"12px\"`).\n *\n * @returns The formatted string, or `null` for non-numeric values.\n */\nexport const formatUnitValue = (\n    value: unknown,\n    unit: string\n): string | null => {\n    if (typeof value === \"number\") {\n        return `${value}${unit}`;\n    }\n    return null;\n};\n"],"names":["CSS_PX_OR_REM_CAPTURE_PATTERN","extractFdsCssVariableName","value","variableName","_a","exec","parseCSSVariableValue","cssVarString","sourceElement","globalThis","window","console","warn","getComputedStyle","getPropertyValue","trim","parsePxOrRemValue","cssValue","match","parsedValue","Number","parseFloat","isNaN","toLowerCase","rootFontSize","document","documentElement","fontSize","getInheritedInlineCssVariables","themeElement","style","length","variables","element","target","i","propertyName","item","startsWith","mergeInlineCssVariables","formatUnitValue","unit"],"mappings":"AAMA,MACMA,EAAgC,2BASzBC,EACTC,UAEA,IAAKA,EAAO,OAEZ,MAAMC,EAAyC,QAA1BC,EAAA,eAAeC,KAAKH,UAAM,IAAAE,OAAA,EAAAA,EAAG,GAElD,OAAKD,QAAL,CAIwC,EAStC,SAAUG,EACZC,EACAC,GAEA,IAAKD,EAAc,MAAO,GAE1B,IAAKE,WAAWC,SAAWF,EAIvB,OAHAG,QAAQC,KACJ,wCAAwCL,wDAErC,GAGX,MAAMJ,EAAeF,EAA0BM,GAC/C,OAAKJ,EAOEU,iBAAiBL,GACnBM,iBAAiBX,GACjBY,QARDJ,QAAQC,KACJ,gCAAgCL,6CAE7B,GAMf,CAOM,SAAUS,EAAkBC,GAC9B,MAAMf,EAAQe,EAASF,OACjBG,EAAQlB,EAA8BK,KAAKH,GACjD,IAAKgB,EAAO,OAAO,EAEnB,MAAMC,EAAcC,OAAOC,WAAWH,EAAM,IAC5C,GAAIE,OAAOE,MAAMH,GAAc,OAAO,EAGtC,GAAa,OADAD,EAAM,GAAGK,cACH,OAAOJ,EAE1B,MAAMK,EAAef,WAAWC,OAC1BU,OAAOC,WAAWR,iBAAiBY,SAASC,iBAAiBC,UAzE1C,GAgFzB,OAAOR,GAJsBC,OAAOE,MAAME,GA5EjB,GA8EnBA,EAGV,CAEA,MAuBaI,EACTC,IAEA,IAAKA,GAA8C,IAA9BA,EAAaC,MAAMC,OAAc,MAAO,CAAA,EAE7D,MAAMC,EAAgC,CAAA,EAGtC,MA/B4B,EAC5BC,EACAC,KAEA,MAAMJ,MAAEA,GAAUG,EAElB,IAAK,IAAIE,EAAI,EAAGA,EAAIL,EAAMC,OAAQI,IAAK,CACnC,MAAMC,EAAeN,EAAMO,KAAKF,GAChC,KAAKC,aAAY,EAAZA,EAAcE,WAAW,UAAU,SAExC,MAAMpC,EAAQ4B,EAAMhB,iBAAiBsB,GAAcrB,OAC9Cb,IAELgC,EAAOE,GAAiClC,EAC5C,GAeAqC,CAAwBV,EAAcG,GAE/BA,CAAS,EAQPQ,EAAkB,CAC3BtC,EACAuC,IAEqB,iBAAVvC,EACA,GAAGA,IAAQuC,IAEf"}

package/theme/utils/font.d.ts

@@ -0,0 +1,32 @@
+import type { FontSize, FontWeight } from "../types";
+interface FontDeclarationProperties {
+    "font-family": string;
+    "font-variant": string;
+    "font-size": string;
+    "font-weight": string;
+    "line-height": string;
+    "letter-spacing": string;
+}
+/**
+ * Generates a CSS font declaration map using FDS CSS variables.
+ *
+ * @example
+ * generateFontProperties("heading-xxl", "light")
+ * // => { "font-family": "var(--fds-font-family-heading)", ... }
+ */
+export declare const generateFontProperties: (size: FontSize, weight: FontWeight, options?: {
+    noCommonLigatures?: boolean;
+    fontVariant?: string;
+}) => FontDeclarationProperties;
+/**
+ * Generates a CSS declaration string using FDS CSS variables.
+ *
+ * @example
+ * generateFont("heading-xxl", "light")
+ * // => "font-family: var(--fds-font-family-heading); font-variant: var(--fds-font-variant); ..."
+ */
+export declare const generateFont: (size: FontSize, weight: FontWeight, options?: {
+    noCommonLigatures?: boolean;
+    fontVariant?: string;
+}) => string;
+export {};

package/theme/utils/font.js

@@ -0,0 +1,2 @@
+const f={"heading-xxl":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-xxl)",lh:"var(--fds-font-heading-lh-xxl)",ls:"var(--fds-font-heading-ls-xxl)"},"heading-xl":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-xl)",lh:"var(--fds-font-heading-lh-xl)",ls:"var(--fds-font-heading-ls-xl)"},"heading-lg":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-lg)",lh:"var(--fds-font-heading-lh-lg)",ls:"var(--fds-font-heading-ls-lg)"},"heading-md":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-md)",lh:"var(--fds-font-heading-lh-md)",ls:"var(--fds-font-heading-ls-md)"},"heading-sm":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-sm)",lh:"var(--fds-font-heading-lh-sm)",ls:"var(--fds-font-heading-ls-sm)"},"heading-xs":{fontFamily:"var(--fds-font-family-heading)",size:"var(--fds-font-heading-size-xs)",lh:"var(--fds-font-heading-lh-xs)",ls:"var(--fds-font-heading-ls-xs)"},"body-baseline":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-baseline)",lh:"var(--fds-font-body-lh-baseline)",ls:"var(--fds-font-body-ls-baseline)"},"body-md":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-md)",lh:"var(--fds-font-body-lh-md)",ls:"var(--fds-font-body-ls-md)"},"body-sm":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-sm)",lh:"var(--fds-font-body-lh-sm)",ls:"var(--fds-font-body-ls-sm)"},"body-xs":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-body-size-xs)",lh:"var(--fds-font-body-lh-xs)",ls:"var(--fds-font-body-ls-xs)"},"form-label":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-form-label-size)",lh:"var(--fds-font-form-label-lh)",ls:"var(--fds-font-form-label-ls)"},"form-description":{fontFamily:"var(--fds-font-family-body)",size:"var(--fds-font-form-description-size)",lh:"var(--fds-font-form-description-lh)",ls:"var(--fds-font-form-description-ls)"}},s={light:"var(--fds-font-weight-light)",regular:"var(--fds-font-weight-regular)",semibold:"var(--fds-font-weight-semibold)",bold:"var(--fds-font-weight-bold)"},a=(a,d,n)=>{const{fontFamily:o,size:i,lh:l,ls:t}=f[a],e=s[d],r=[void 0,""].filter(Boolean).join(" ");return{"font-family":o,"font-variant":"var(--fds-font-variant)"+(r?` ${r}`:""),"font-size":i,"font-weight":e,"line-height":l,"letter-spacing":t}},d=(f,s,d)=>{const n=a(f,s);return Object.entries(n).map((([f,s])=>`${f}: ${s};`)).join(" ")};export{d as generateFont,a as generateFontProperties};
+//# sourceMappingURL=font.js.map