ampless 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/index.d.ts

@@ -667,6 +667,28 @@ declare function themeSettingKey(fieldKey: string): string;
  *
  * Returns the normalized value, or null if the input is rejected.
  */
+/**
+ * Split a stored color value into its light / dark components.
+ *
+ * Accepts two storage forms:
+ *   - Single value: `oklch(...)` / `#abcdef` / etc. → `{ light: value, dark: null }`
+ *   - Pair: `light-dark(L, D)` → `{ light: L, dark: D }`
+ *
+ * Splits on the top-level comma (depth-aware) so nested commas inside
+ * `rgb(...)` / `hsl(...)` don't trip the parser.
+ */
+declare function parseColorPair(value: string): {
+    light: string;
+    dark: string | null;
+};
+/**
+ * Build the storage string for a color field. When `dark` is non-empty
+ * and differs from `light`, returns `light-dark(light, dark)`; otherwise
+ * returns the bare `light` value. The runtime emits the result verbatim
+ * into the inline `:root { --foo: <value> }` override; `light-dark()`
+ * is a Baseline-2024 CSS function so the browser picks per mode.
+ */
+declare function formatColorPair(light: string, dark?: string | null): string;
 declare function validateThemeValue(field: ThemeField, raw: unknown): string | null;
 /** Parse a stored linkList JSON value into typed items. Tolerant: bad
  *  shapes resolve to []. Throwing here would cascade into rendering. */
@@ -690,4 +712,4 @@ declare function resolveThemeValues(manifest: ThemeManifest, stored: Record<stri
 
 declare const VERSION = "0.0.1";
 
-export { type AmplessEvent, type AmplessPlugin, type AuthContext, type Config, type ContentEventPayload, type ContentEventType, type ContentFormat, type ContentTypeDefinition, type CreatePostInput, DEFAULT_SITE_ID, type DateFormat, type EventPayloadOf, type EventType, type FieldDefinition, type FieldType, type ImageDisplay, type KvItem, type KvStore, type LinkListItem, type ListOptions, type LocalizedString, type Media, type MediaEventPayload, type MediaEventType, type MediaProcessingDefaults, type OgImageConfig, type OgImageFont, type OgImageRenderContext, type Page, type PluginEventHandler, type PluginMetadata, type PluginRuntimeContext, type Post, type PostMetadata, type PostStatus, type PostsProvider, type Role, SITE_CONFIG_PK, type SiteConfig, type SiteSettingsEventPayload, type SiteSettingsEventType, type StaticPostBody, type StreamEventName, type ThemeColorField, type ThemeField, type ThemeFieldType, type ThemeFontFamilyField, type ThemeImageField, type ThemeLengthField, type ThemeLinkListField, type ThemeManifest, type ThemeModule, type ThemeRouteContext, type ThemeSelectField, type ThemeTextField, type TrustLevel, VERSION, composeSiteIdSlug, composeSiteIdStatus, createPost, defineConfig, definePlugin, defineSchema, defineTheme, defineThemeModule, deletePost, deleteSiteSetting, detectContentEvents, escapeXml, extractFirstImageUrl, flattenSettings, formatDate, formatPublicAssetUrl, getPost, getPostById, getSiteSetting, hasKvStore, hasPostsProvider, isMultiSite, isTagListUrl, listPosts, listSiteSettings, parseLinkList, resolveLocalized, resolveSiteId, resolveThemeValues, setKvStore, setPostsProvider, setSiteSetting, siteFor, stringifyLinkList, themeSettingKey, unflattenSettings, updatePost, validateThemeValue };
+export { type AmplessEvent, type AmplessPlugin, type AuthContext, type Config, type ContentEventPayload, type ContentEventType, type ContentFormat, type ContentTypeDefinition, type CreatePostInput, DEFAULT_SITE_ID, type DateFormat, type EventPayloadOf, type EventType, type FieldDefinition, type FieldType, type ImageDisplay, type KvItem, type KvStore, type LinkListItem, type ListOptions, type LocalizedString, type Media, type MediaEventPayload, type MediaEventType, type MediaProcessingDefaults, type OgImageConfig, type OgImageFont, type OgImageRenderContext, type Page, type PluginEventHandler, type PluginMetadata, type PluginRuntimeContext, type Post, type PostMetadata, type PostStatus, type PostsProvider, type Role, SITE_CONFIG_PK, type SiteConfig, type SiteSettingsEventPayload, type SiteSettingsEventType, type StaticPostBody, type StreamEventName, type ThemeColorField, type ThemeField, type ThemeFieldType, type ThemeFontFamilyField, type ThemeImageField, type ThemeLengthField, type ThemeLinkListField, type ThemeManifest, type ThemeModule, type ThemeRouteContext, type ThemeSelectField, type ThemeTextField, type TrustLevel, VERSION, composeSiteIdSlug, composeSiteIdStatus, createPost, defineConfig, definePlugin, defineSchema, defineTheme, defineThemeModule, deletePost, deleteSiteSetting, detectContentEvents, escapeXml, extractFirstImageUrl, flattenSettings, formatColorPair, formatDate, formatPublicAssetUrl, getPost, getPostById, getSiteSetting, hasKvStore, hasPostsProvider, isMultiSite, isTagListUrl, listPosts, listSiteSettings, parseColorPair, parseLinkList, resolveLocalized, resolveSiteId, resolveThemeValues, setKvStore, setPostsProvider, setSiteSetting, siteFor, stringifyLinkList, themeSettingKey, unflattenSettings, updatePost, validateThemeValue };

package/dist/index.js

@@ -325,14 +325,48 @@ function themeSettingKey(fieldKey) {
 var COLOR_RE = /^(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\)|hsl\([^)]+\)|hsla\([^)]+\)|oklch\([^)]+\)|oklab\([^)]+\))$/;
 var LENGTH_RE = /^[\d.]+(px|rem|em|%|vh|vw)$/;
 var DANGEROUS_IMAGE_URL_RE = /^\s*(javascript|vbscript):/i;
+function parseColorPair(value) {
+  const v = value.trim();
+  const prefix = "light-dark(";
+  if (!v.startsWith(prefix) || !v.endsWith(")")) {
+    return { light: value, dark: null };
+  }
+  const inner = v.slice(prefix.length, -1);
+  let depth = 0;
+  for (let i = 0; i < inner.length; i++) {
+    const ch = inner[i];
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    else if (ch === "," && depth === 0) {
+      return {
+        light: inner.slice(0, i).trim(),
+        dark: inner.slice(i + 1).trim()
+      };
+    }
+  }
+  return { light: value, dark: null };
+}
+function formatColorPair(light, dark) {
+  const l = light.trim();
+  const d = (dark ?? "").trim();
+  if (!d || d === l) return l;
+  return `light-dark(${l}, ${d})`;
+}
 function validateThemeValue(field, raw) {
   if (field.type === "linkList") return validateLinkListValue(field, raw);
   if (typeof raw !== "string") return null;
   const v = raw.trim();
   if (!v) return null;
   switch (field.type) {
-    case "color":
+    case "color": {
+      if (v.startsWith("light-dark(")) {
+        const { light, dark } = parseColorPair(v);
+        if (dark === null) return null;
+        if (!COLOR_RE.test(light) || !COLOR_RE.test(dark)) return null;
+        return formatColorPair(light, dark);
+      }
       return COLOR_RE.test(v) ? v : null;
+    }
     case "length":
       return LENGTH_RE.test(v) ? v : null;
     case "image":
@@ -438,6 +472,7 @@ export {
   escapeXml,
   extractFirstImageUrl,
   flattenSettings,
+  formatColorPair,
   formatDate,
   formatPublicAssetUrl,
   getPost,
@@ -449,6 +484,7 @@ export {
   isTagListUrl,
   listPosts,
   listSiteSettings,
+  parseColorPair,
   parseLinkList,
   resolveLocalized,
   resolveSiteId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ampless",
-  "version": "0.2.0-alpha.3",
+  "version": "0.2.0-alpha.4",
   "description": "Serverless CMS for AWS Amplify",
   "license": "MIT",
   "type": "module",