@transferwise/neptune-tokens 8.23.0 → 8.24.0

package/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:43 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 @custom-media --screen-400-zoom (width <= 320px);

package/breakpoints.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Thu, 14 May 2026 16:11:43 GMT
+// Generated on Wed, 27 May 2026 15:50:09 GMT
 
 // @deprecated Use @screen-xs-min
 @screen-xs: 320px;

package/colors-base.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly, this file was auto-generated.
- * Generated on Thu, 14 May 2026 16:11:43 GMT
+ * Generated on Wed, 27 May 2026 15:50:09 GMT
  */
 
 :root {

package/colors-base.less

@@ -1,6 +1,6 @@
 
 // Do not edit directly, this file was auto-generated.
-// Generated on Thu, 14 May 2026 16:11:43 GMT
+// Generated on Wed, 27 May 2026 15:50:09 GMT
 
 @color-base-blue-light: #00b9ff;
 @color-base-blue-mid: #00a2dd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/neptune-tokens",
-  "version": "8.23.0",
+  "version": "8.24.0",
   "description": "Design tokens for the Neptune Design System",
   "license": "UNLICENSED",
   "type": "module",
@@ -31,7 +31,8 @@
     "*.d.cts",
     "*.json",
     "*.less",
-    "themes/**/*"
+    "themes/**/*",
+    "sentiment/**/*"
   ],
   "devDependencies": {
     "@changesets/changelog-github": "^0.6.0",
@@ -39,7 +40,7 @@
     "chroma-js": "^3.2.0",
     "cz-conventional-changelog": "3.3.0",
     "prettier": "^3.8.3",
-    "style-dictionary": "^5.4.0",
+    "style-dictionary": "^5.4.1",
     "tsdown": "^0.22.0",
     "typescript": "^6.0.3"
   },

package/sentiment/negative/dark/base.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-negative-dark-base {
+  --color-sentiment-content-primary: #FFA8AD;
+  --color-sentiment-content-primary-hover: #FFBDC0;
+  --color-sentiment-content-primary-active: #FFD1D3;
+  --color-sentiment-interactive-primary: #FFA8AD;
+  --color-sentiment-interactive-primary-hover: #FFBDC0;
+  --color-sentiment-interactive-primary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary: #410B0D;
+  --color-sentiment-interactive-secondary-hover: #641115;
+  --color-sentiment-interactive-secondary-active: #761418;
+  --color-sentiment-interactive-secondary-neutral: #601013;
+  --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
+  --color-sentiment-interactive-secondary-neutral-active: #90181D;
+  --color-sentiment-interactive-control: #410B0D;
+  --color-sentiment-interactive-control-hover: #641115;
+  --color-sentiment-interactive-control-active: #761418;
+  --color-sentiment-background-surface: #410B0D;
+  --color-sentiment-background-surface-hover: #641115;
+  --color-sentiment-background-surface-active: #761418;
+  --color-sentiment-border-overlay: #ffa8ad4d;
+}

package/sentiment/negative/dark/base.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #FFA8AD;
+  --color-sentiment-content-primary-hover: #FFBDC0;
+  --color-sentiment-content-primary-active: #FFD1D3;
+  --color-sentiment-interactive-primary: #FFA8AD;
+  --color-sentiment-interactive-primary-hover: #FFBDC0;
+  --color-sentiment-interactive-primary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary: #410B0D;
+  --color-sentiment-interactive-secondary-hover: #641115;
+  --color-sentiment-interactive-secondary-active: #761418;
+  --color-sentiment-interactive-secondary-neutral: #601013;
+  --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
+  --color-sentiment-interactive-secondary-neutral-active: #90181D;
+  --color-sentiment-interactive-control: #410B0D;
+  --color-sentiment-interactive-control-hover: #641115;
+  --color-sentiment-interactive-control-active: #761418;
+  --color-sentiment-background-surface: #410B0D;
+  --color-sentiment-background-surface-hover: #641115;
+  --color-sentiment-background-surface-active: #761418;
+  --color-sentiment-border-overlay: #ffa8ad4d;
+}

package/sentiment/negative/dark/elevated.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-negative-dark-elevated {
+  --color-sentiment-content-primary: #410B0D;
+  --color-sentiment-content-primary-hover: #641115;
+  --color-sentiment-content-primary-active: #761418;
+  --color-sentiment-interactive-primary: #410B0D;
+  --color-sentiment-interactive-primary-hover: #641115;
+  --color-sentiment-interactive-primary-active: #761418;
+  --color-sentiment-interactive-secondary: #FFA8AD;
+  --color-sentiment-interactive-secondary-hover: #FFBDC0;
+  --color-sentiment-interactive-secondary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary-neutral: #D9898D;
+  --color-sentiment-interactive-secondary-neutral-hover: #D68084;
+  --color-sentiment-interactive-secondary-neutral-active: #D06C71;
+  --color-sentiment-interactive-control: #FFA8AD;
+  --color-sentiment-interactive-control-hover: #FFBDC0;
+  --color-sentiment-interactive-control-active: #FFD1D3;
+  --color-sentiment-background-surface: #FFA8AD;
+  --color-sentiment-background-surface-hover: #FFBDC0;
+  --color-sentiment-background-surface-active: #FFD1D3;
+  --color-sentiment-border-overlay: #410b0d4d;
+}

package/sentiment/negative/dark/elevated.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #410B0D;
+  --color-sentiment-content-primary-hover: #641115;
+  --color-sentiment-content-primary-active: #761418;
+  --color-sentiment-interactive-primary: #410B0D;
+  --color-sentiment-interactive-primary-hover: #641115;
+  --color-sentiment-interactive-primary-active: #761418;
+  --color-sentiment-interactive-secondary: #FFA8AD;
+  --color-sentiment-interactive-secondary-hover: #FFBDC0;
+  --color-sentiment-interactive-secondary-active: #FFD1D3;
+  --color-sentiment-interactive-secondary-neutral: #D9898D;
+  --color-sentiment-interactive-secondary-neutral-hover: #D68084;
+  --color-sentiment-interactive-secondary-neutral-active: #D06C71;
+  --color-sentiment-interactive-control: #FFA8AD;
+  --color-sentiment-interactive-control-hover: #FFBDC0;
+  --color-sentiment-interactive-control-active: #FFD1D3;
+  --color-sentiment-background-surface: #FFA8AD;
+  --color-sentiment-background-surface-hover: #FFBDC0;
+  --color-sentiment-background-surface-active: #FFD1D3;
+  --color-sentiment-border-overlay: #410b0d4d;
+}

package/sentiment/negative/light/base.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-negative-light-base {
+  --color-sentiment-content-primary: #CB272F;
+  --color-sentiment-content-primary-hover: #B8232B;
+  --color-sentiment-content-primary-active: #A72027;
+  --color-sentiment-interactive-primary: #CB272F;
+  --color-sentiment-interactive-primary-hover: #B8232B;
+  --color-sentiment-interactive-primary-active: #A72027;
+  --color-sentiment-interactive-secondary: #FBEAEA;
+  --color-sentiment-interactive-secondary-hover: #F9E1E1;
+  --color-sentiment-interactive-secondary-active: #F8D8D8;
+  --color-sentiment-interactive-secondary-neutral: #F5D3D4;
+  --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
+  --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
+  --color-sentiment-interactive-control: #FBEAEA;
+  --color-sentiment-interactive-control-hover: #F9E1E1;
+  --color-sentiment-interactive-control-active: #F8D8D8;
+  --color-sentiment-background-surface: #FBEAEA;
+  --color-sentiment-background-surface-hover: #F9E1E1;
+  --color-sentiment-background-surface-active: #F8D8D8;
+  --color-sentiment-border-overlay: #cb272f4d;
+}

package/sentiment/negative/light/base.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #CB272F;
+  --color-sentiment-content-primary-hover: #B8232B;
+  --color-sentiment-content-primary-active: #A72027;
+  --color-sentiment-interactive-primary: #CB272F;
+  --color-sentiment-interactive-primary-hover: #B8232B;
+  --color-sentiment-interactive-primary-active: #A72027;
+  --color-sentiment-interactive-secondary: #FBEAEA;
+  --color-sentiment-interactive-secondary-hover: #F9E1E1;
+  --color-sentiment-interactive-secondary-active: #F8D8D8;
+  --color-sentiment-interactive-secondary-neutral: #F5D3D4;
+  --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
+  --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
+  --color-sentiment-interactive-control: #FBEAEA;
+  --color-sentiment-interactive-control-hover: #F9E1E1;
+  --color-sentiment-interactive-control-active: #F8D8D8;
+  --color-sentiment-background-surface: #FBEAEA;
+  --color-sentiment-background-surface-hover: #F9E1E1;
+  --color-sentiment-background-surface-active: #F8D8D8;
+  --color-sentiment-border-overlay: #cb272f4d;
+}

package/sentiment/negative/light/elevated.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-negative-light-elevated {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #F5CCCC;
+  --color-sentiment-content-primary-active: #F1B7B7;
+  --color-sentiment-interactive-primary: #FBEAEA;
+  --color-sentiment-interactive-primary-hover: #F5CCCC;
+  --color-sentiment-interactive-primary-active: #F1B7B7;
+  --color-sentiment-interactive-secondary: #CB272F;
+  --color-sentiment-interactive-secondary-hover: #B8232B;
+  --color-sentiment-interactive-secondary-active: #A72027;
+  --color-sentiment-interactive-secondary-neutral: #9B141B;
+  --color-sentiment-interactive-secondary-neutral-hover: #831116;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-control: #CB272F;
+  --color-sentiment-interactive-control-hover: #B8232B;
+  --color-sentiment-interactive-control-active: #A72027;
+  --color-sentiment-background-surface: #CB272F;
+  --color-sentiment-background-surface-hover: #B8232B;
+  --color-sentiment-background-surface-active: #A72027;
+  --color-sentiment-border-overlay: #ffffff4d;
+}

package/sentiment/negative/light/elevated.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #F5CCCC;
+  --color-sentiment-content-primary-active: #F1B7B7;
+  --color-sentiment-interactive-primary: #FBEAEA;
+  --color-sentiment-interactive-primary-hover: #F5CCCC;
+  --color-sentiment-interactive-primary-active: #F1B7B7;
+  --color-sentiment-interactive-secondary: #CB272F;
+  --color-sentiment-interactive-secondary-hover: #B8232B;
+  --color-sentiment-interactive-secondary-active: #A72027;
+  --color-sentiment-interactive-secondary-neutral: #9B141B;
+  --color-sentiment-interactive-secondary-neutral-hover: #831116;
+  --color-sentiment-interactive-secondary-neutral-active: #6D0E13;
+  --color-sentiment-interactive-control: #CB272F;
+  --color-sentiment-interactive-control-hover: #B8232B;
+  --color-sentiment-interactive-control-active: #A72027;
+  --color-sentiment-background-surface: #CB272F;
+  --color-sentiment-background-surface-hover: #B8232B;
+  --color-sentiment-background-surface-active: #A72027;
+  --color-sentiment-border-overlay: #ffffff4d;
+}

package/sentiment/neutral/dark/base.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-neutral-dark-base {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #ffffff1a;
+  --color-sentiment-interactive-secondary-hover: #ffffff33;
+  --color-sentiment-interactive-secondary-active: #ffffff4d;
+  --color-sentiment-interactive-secondary-neutral: #ffffff1a;
+  --color-sentiment-interactive-secondary-neutral-hover: #ffffff33;
+  --color-sentiment-interactive-secondary-neutral-active: #ffffff4d;
+  --color-sentiment-interactive-control: #2A2C29;
+  --color-sentiment-interactive-control-hover: #414441;
+  --color-sentiment-interactive-control-active: #595B58;
+  --color-sentiment-background-surface: #ffffff1a;
+  --color-sentiment-background-surface-hover: #ffffff33;
+  --color-sentiment-background-surface-active: #ffffff4d;
+  --color-sentiment-border-overlay: #f1f1ed4d;
+}

package/sentiment/neutral/dark/base.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #ffffff1a;
+  --color-sentiment-interactive-secondary-hover: #ffffff33;
+  --color-sentiment-interactive-secondary-active: #ffffff4d;
+  --color-sentiment-interactive-secondary-neutral: #ffffff1a;
+  --color-sentiment-interactive-secondary-neutral-hover: #ffffff33;
+  --color-sentiment-interactive-secondary-neutral-active: #ffffff4d;
+  --color-sentiment-interactive-control: #2A2C29;
+  --color-sentiment-interactive-control-hover: #414441;
+  --color-sentiment-interactive-control-active: #595B58;
+  --color-sentiment-background-surface: #ffffff1a;
+  --color-sentiment-background-surface-hover: #ffffff33;
+  --color-sentiment-background-surface-active: #ffffff4d;
+  --color-sentiment-border-overlay: #f1f1ed4d;
+}

package/sentiment/neutral/dark/elevated.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-neutral-dark-elevated {
+  --color-sentiment-content-primary: #2A2C29;
+  --color-sentiment-content-primary-hover: #414441;
+  --color-sentiment-content-primary-active: #595B58;
+  --color-sentiment-interactive-primary: #2A2C29;
+  --color-sentiment-interactive-primary-hover: #414441;
+  --color-sentiment-interactive-primary-active: #595B58;
+  --color-sentiment-interactive-secondary: #F1F1ED;
+  --color-sentiment-interactive-secondary-hover: #E7E7E1;
+  --color-sentiment-interactive-secondary-active: #DFDED5;
+  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
+  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
+  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #F1F1ED;
+  --color-sentiment-background-surface-hover: #E7E7E1;
+  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-border-overlay: #2a2c294d;
+}

package/sentiment/neutral/dark/elevated.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #2A2C29;
+  --color-sentiment-content-primary-hover: #414441;
+  --color-sentiment-content-primary-active: #595B58;
+  --color-sentiment-interactive-primary: #2A2C29;
+  --color-sentiment-interactive-primary-hover: #414441;
+  --color-sentiment-interactive-primary-active: #595B58;
+  --color-sentiment-interactive-secondary: #F1F1ED;
+  --color-sentiment-interactive-secondary-hover: #E7E7E1;
+  --color-sentiment-interactive-secondary-active: #DFDED5;
+  --color-sentiment-interactive-secondary-neutral: #E4E4DC;
+  --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
+  --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #F1F1ED;
+  --color-sentiment-background-surface-hover: #E7E7E1;
+  --color-sentiment-background-surface-active: #DFDED5;
+  --color-sentiment-border-overlay: #2a2c294d;
+}

package/sentiment/neutral/light/base.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-neutral-light-base {
+  --color-sentiment-content-primary: #454745;
+  --color-sentiment-content-primary-hover: #353635;
+  --color-sentiment-content-primary-active: #232423;
+  --color-sentiment-interactive-primary: #454745;
+  --color-sentiment-interactive-primary-hover: #353635;
+  --color-sentiment-interactive-primary-active: #232423;
+  --color-sentiment-interactive-secondary: #3e3b0712;
+  --color-sentiment-interactive-secondary-hover: #3e3b071f;
+  --color-sentiment-interactive-secondary-active: #3e3b072b;
+  --color-sentiment-interactive-secondary-neutral: #3e3b0712;
+  --color-sentiment-interactive-secondary-neutral-hover: #3e3b071f;
+  --color-sentiment-interactive-secondary-neutral-active: #3e3b072b;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #3e3b0712;
+  --color-sentiment-background-surface-hover: #3e3b071f;
+  --color-sentiment-background-surface-active: #3e3b072b;
+  --color-sentiment-border-overlay: #4547454d;
+}

package/sentiment/neutral/light/base.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #454745;
+  --color-sentiment-content-primary-hover: #353635;
+  --color-sentiment-content-primary-active: #232423;
+  --color-sentiment-interactive-primary: #454745;
+  --color-sentiment-interactive-primary-hover: #353635;
+  --color-sentiment-interactive-primary-active: #232423;
+  --color-sentiment-interactive-secondary: #3e3b0712;
+  --color-sentiment-interactive-secondary-hover: #3e3b071f;
+  --color-sentiment-interactive-secondary-active: #3e3b072b;
+  --color-sentiment-interactive-secondary-neutral: #3e3b0712;
+  --color-sentiment-interactive-secondary-neutral-hover: #3e3b071f;
+  --color-sentiment-interactive-secondary-neutral-active: #3e3b072b;
+  --color-sentiment-interactive-control: #F1F1ED;
+  --color-sentiment-interactive-control-hover: #E7E7E1;
+  --color-sentiment-interactive-control-active: #DFDED5;
+  --color-sentiment-background-surface: #3e3b0712;
+  --color-sentiment-background-surface-hover: #3e3b071f;
+  --color-sentiment-background-surface-active: #3e3b072b;
+  --color-sentiment-border-overlay: #4547454d;
+}

package/sentiment/neutral/light/elevated.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-neutral-light-elevated {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #454745;
+  --color-sentiment-interactive-secondary-hover: #353635;
+  --color-sentiment-interactive-secondary-active: #232423;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
+  --color-sentiment-interactive-control: #454745;
+  --color-sentiment-interactive-control-hover: #353635;
+  --color-sentiment-interactive-control-active: #232423;
+  --color-sentiment-background-surface: #454745;
+  --color-sentiment-background-surface-hover: #353635;
+  --color-sentiment-background-surface-active: #232423;
+  --color-sentiment-border-overlay: #f1f1ed4d;
+}

package/sentiment/neutral/light/elevated.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #F1F1ED;
+  --color-sentiment-content-primary-hover: #E7E7E1;
+  --color-sentiment-content-primary-active: #DFDED5;
+  --color-sentiment-interactive-primary: #F1F1ED;
+  --color-sentiment-interactive-primary-hover: #E7E7E1;
+  --color-sentiment-interactive-primary-active: #DFDED5;
+  --color-sentiment-interactive-secondary: #454745;
+  --color-sentiment-interactive-secondary-hover: #353635;
+  --color-sentiment-interactive-secondary-active: #232423;
+  --color-sentiment-interactive-secondary-neutral: #585958;
+  --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
+  --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
+  --color-sentiment-interactive-control: #454745;
+  --color-sentiment-interactive-control-hover: #353635;
+  --color-sentiment-interactive-control-active: #232423;
+  --color-sentiment-background-surface: #454745;
+  --color-sentiment-background-surface-hover: #353635;
+  --color-sentiment-background-surface-active: #232423;
+  --color-sentiment-border-overlay: #f1f1ed4d;
+}

package/sentiment/proposition/dark/base.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-proposition-dark-base {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #EAF9F9;
+  --color-sentiment-content-primary-active: #D5F4F4;
+  --color-sentiment-interactive-primary: #E0F7F7;
+  --color-sentiment-interactive-primary-hover: #CAF1F1;
+  --color-sentiment-interactive-primary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
+  --color-sentiment-border-overlay: #ffffff4d;
+}

package/sentiment/proposition/dark/base.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #FFFFFF;
+  --color-sentiment-content-primary-hover: #EAF9F9;
+  --color-sentiment-content-primary-active: #D5F4F4;
+  --color-sentiment-interactive-primary: #E0F7F7;
+  --color-sentiment-interactive-primary-hover: #CAF1F1;
+  --color-sentiment-interactive-primary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary: #054D4D;
+  --color-sentiment-interactive-secondary-hover: #043A3A;
+  --color-sentiment-interactive-secondary-active: #022626;
+  --color-sentiment-interactive-secondary-neutral: #1F6161;
+  --color-sentiment-interactive-secondary-neutral-hover: #247070;
+  --color-sentiment-interactive-secondary-neutral-active: #298080;
+  --color-sentiment-interactive-control: #054D4D;
+  --color-sentiment-interactive-control-hover: #043A3A;
+  --color-sentiment-interactive-control-active: #022626;
+  --color-sentiment-background-surface: #054D4D;
+  --color-sentiment-background-surface-hover: #043A3A;
+  --color-sentiment-background-surface-active: #022626;
+  --color-sentiment-border-overlay: #ffffff4d;
+}

package/sentiment/proposition/dark/elevated.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-proposition-dark-elevated {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #0B312F;
+  --color-sentiment-interactive-primary-hover: #104744;
+  --color-sentiment-interactive-primary-active: #16605C;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+  --color-sentiment-border-overlay: #0e0f0c4d;
+}

package/sentiment/proposition/dark/elevated.less

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+& {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #0B312F;
+  --color-sentiment-interactive-primary-hover: #104744;
+  --color-sentiment-interactive-primary-active: #16605C;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+  --color-sentiment-border-overlay: #0e0f0c4d;
+}

package/sentiment/proposition/light/base.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Wed, 27 May 2026 15:50:11 GMT
+ */
+
+.wds-sentiment-proposition-light-base {
+  --color-sentiment-content-primary: #0E0F0C;
+  --color-sentiment-content-primary-hover: #0A2826;
+  --color-sentiment-content-primary-active: #074140;
+  --color-sentiment-interactive-primary: #054D4D;
+  --color-sentiment-interactive-primary-hover: #043A3A;
+  --color-sentiment-interactive-primary-active: #022626;
+  --color-sentiment-interactive-secondary: #E0F7F7;
+  --color-sentiment-interactive-secondary-hover: #CAF1F1;
+  --color-sentiment-interactive-secondary-active: #B6ECEC;
+  --color-sentiment-interactive-secondary-neutral: #B4D5D5;
+  --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
+  --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
+  --color-sentiment-interactive-control: #E0F7F7;
+  --color-sentiment-interactive-control-hover: #CAF1F1;
+  --color-sentiment-interactive-control-active: #B6ECEC;
+  --color-sentiment-background-surface: #E0F7F7;
+  --color-sentiment-background-surface-hover: #CAF1F1;
+  --color-sentiment-background-surface-active: #B6ECEC;
+  --color-sentiment-border-overlay: #0e0f0c4d;
+}