@soyio/soyio-widget 2.26.0 → 3.0.0

package/README.md

@@ -595,19 +595,31 @@ Built-in themes provide pre-configured color palettes and component styles:
 | Theme | Description |
 | ----- | ----------- |
 | `"soyio"` | Default light theme with Soyio brand colors (purple/indigo), uppercase titles |
-| `"night"` | Dark mode theme with deep blues, muted colors, and subtle borders |
 | `"flat"` | Minimal theme with square corners, normal-case titles, thicker borders |
+| `"neutral"` | Neutral palette that works well for both light and dark modes |
+| `"night"` | Deprecated alias for `theme: "soyio"` with `mode: "dark"` |
 
 **Theme style differences:**
 
 - **soyio**: Standard styling with rounded corners and uppercase card titles
-- **night**: Dark backgrounds, lighter text, borders using theme variables
 - **flat**: No border radius, sentence-case titles (no uppercase), 2px borders, lighter font weights
+- **neutral**: Balanced grayscale palette intended for a more subdued branded experience
+
+### Color Modes
+
+Appearance now supports a `mode` field:
+
+| Mode | Description |
+| ---- | ----------- |
+| `"light"` | Forces light mode |
+| `"dark"` | Forces dark mode |
+| `"auto"` | Follows the user's system color scheme |
 
 **Example:**
 ```javascript
 const appearance = {
-  theme: "night", // Use the dark theme
+  theme: "soyio",
+  mode: "dark",
   variables: {
     // You can still override specific variables
     colorPrimary: "#FF6B6B",
@@ -621,6 +633,8 @@ const appearance = {
 
 Theme variables and rules are applied first, then your custom overrides take precedence.
 
+> `theme: "night"` is still accepted as a deprecated alias for backwards compatibility, but new integrations should use `theme + mode`.
+
 ### Config
 
 The `config` object allows you to adjust component behavior settings.
@@ -1055,7 +1069,8 @@ const ajv = new Ajv();
 const validate = ajv.compile(appearanceSchema);
 
 const appearance = {
-  theme: "night",
+  theme: "soyio",
+  mode: "dark",
   variables: {
     colorPrimary: "#007bff",
     borderRadius: "8px"

package/dist/index.d.ts

@@ -412,10 +412,11 @@ declare type SignatureRequestConfig = {
     developmentUrl?: string;
 };
 
-declare type SkeletonConstructor = new (id: string, theme?: SoyioTheme) => ISkeletonView;
+declare type SkeletonConstructor = new (id: string, appearance?: SoyioAppearance) => ISkeletonView;
 
 declare interface SoyioAppearance {
     theme?: SoyioTheme;
+    mode?: SoyioColorMode;
     variables?: SoyioAppearanceVariables;
     rules?: SoyioRule;
     config?: SoyioAppearanceConfig;
@@ -518,6 +519,15 @@ declare interface SoyioAppearanceVariables {
 
 declare type SoyioBaseRule = '.MainContainer' | '.Button' | '.Checkbox' | '.CheckboxInput' | '.CheckboxLabel' | '.CheckboxCheck' | '.Input' | '.Label' | '.HintIcon' | '.Title' | '.CategoryTag' | '.StepTitle' | '.Link' | '.Card' | '.CardTitle' | '.Select' | '.Loader' | '.TextArea' | '.ErrorMessage' | '.Description' | '.Switch' | '.SwitchRoot' | '.SwitchThumb' | '.SwitchIcon' | '.Alert' | '.AlertIcon' | '.AlertContent' | '.Radio' | '.RadioButton' | '.RadioIndicator' | '.RadioLabel' | '.Chip' | '.Dialog' | '.DialogOverlay' | '.DialogContent' | '.DialogTitle' | '.DialogDescription' | '.Combobox' | '.NinInput' | '.TrackingCodeInput' | '.TrackingCodeInputCell' | '.TrackingCodeInputSeparator' | '.RadioCard' | '.RadioCardButton' | '.RadioCardIndicator' | '.RadioCardTitle' | '.StepIndicatorContainer' | '.StepIndicator' | '.StepIndicatorLine' | '.StepIndicatorIcon' | '.StepIndicatorDot' | '.StepIndicatorNumber' | '.TooltipContent';
 
+/**
+ * Appearance color mode.
+ *
+ * - `light`: force light mode
+ * - `dark`: force dark mode
+ * - `auto`: follow the consumer's system color scheme
+ */
+declare type SoyioColorMode = 'light' | 'dark' | 'auto';
+
 declare type SoyioElementState = '--checked';
 
 declare interface SoyioIconConfig {
@@ -556,7 +566,12 @@ declare type SoyioRuleKey = `${SoyioBaseRule}${SoyioElementState | SoyioPseudoCl
 
 declare type SoyioStateRule = '.Input--error' | '.Alert--error' | '.Alert--warning' | '.Alert--info' | '.Alert--note' | '.Alert--success' | '.Chip--info' | '.Chip--green' | '.Chip--red' | '.Chip--amber' | '.RadioCard--checked' | '.RadioCardIndicator--checked' | '.StepIndicator--active' | '.StepIndicator--completed' | '.StepIndicator--pending' | '.StepIndicatorLine--top' | '.StepIndicatorLine--bottom';
 
-declare type SoyioTheme = 'soyio' | 'night' | 'flat';
+/**
+ * Appearance theme palette.
+ *
+ * `night` is kept as a deprecated alias for `theme: 'soyio'` + `mode: 'dark'`.
+ */
+declare type SoyioTheme = 'soyio' | 'flat' | 'neutral' | 'night';
 
 declare namespace SoyioTypes {
     export {
@@ -564,6 +579,10 @@ declare namespace SoyioTypes {
         ConsentConfig,
         PrivacyCenterConfig,
         SoyioAppearance,
+        SoyioAppearanceConfig,
+        SoyioAppearanceVariables,
+        SoyioColorMode,
+        SoyioTheme,
         Request_2 as Request,
         NewDisclosureRequestProps,
         ExistingDisclosureRequestProps,