@cuby-ui/core 0.0.592 → 0.0.593

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@cuby-ui/core",
-  "version": "0.0.592",
+  "version": "0.0.593",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
     "@angular/elements": ">=18.0.0",
     "@angular/forms": ">=18.0.0",
-    "@cuby-ui/api": "^0.0.592",
-    "@cuby-ui/cdk": "^0.0.592",
-    "@cuby-ui/icons": "^0.0.592",
+    "@cuby-ui/api": "^0.0.593",
+    "@cuby-ui/cdk": "^0.0.593",
+    "@cuby-ui/icons": "^0.0.593",
     "@editorjs/editorjs": "2.29.1",
     "@editorjs/header": "^2.8.1",
     "@editorjs/list": "^1.9.0",

package/styles/mixins/shadows.scss

@@ -1,36 +1,35 @@
 @use '../variables/colors' as colors;
-// TODO: вынести все цвета в перемнные
 
 @mixin cui-shadow-10() {
     box-shadow:
-        0 1px 4px 0 rgba(0, 0, 0, 0.04),
-        0 1px 4px 0 rgba(0, 0, 0, 0.04);
+        0 1px 4px 0 color-mix(in srgb, colors.$cui-base-200 40%, transparent),
+        0 1px 4px 0 color-mix(in srgb, colors.$cui-base-200 40%, transparent);
 }
 
 @mixin cui-shadow-15() {
     box-shadow:
-        0 1px 2px 0 rgba(0, 0, 0, 0.06),
-        0 1px 3px 0 rgba(0, 0, 0, 0.1);
+        0 1px 2px 0 color-mix(in srgb, colors.$cui-base-200 60%, transparent),
+        0 1px 3px 0 color-mix(in srgb, colors.$cui-base-200 40%, transparent);
 }
 
 @mixin cui-shadow-20() {
     box-shadow:
-        0 2px 4px -1px rgba(0, 0, 0, 0.06),
-        0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        0 2px 4px -1px color-mix(in srgb, colors.$cui-base-200 60%, transparent),
+        0 4px 6px -1px color-mix(in srgb, colors.$cui-base-200 40%, transparent);
 }
 
 @mixin cui-shadow-25() {
     box-shadow:
-        0 4px 6px -2px rgba(0, 0, 0, 0.05),
-        0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        0 4px 6px -2px color-mix(in srgb, colors.$cui-base-200 50%, transparent),
+        0 10px 15px -3px color-mix(in srgb, colors.$cui-base-200 40%, transparent);
 }
 
 @mixin cui-shadow-right() {
-    box-shadow: 5px 0 4px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 5px 0 4px 0 color-mix(in srgb, colors.$cui-base-200 50%, transparent);
 }
 
 @mixin cui-shadow-left() {
-    box-shadow: -5px 0 4px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: -5px 0 4px 0 color-mix(in srgb, colors.$cui-base-200 50%, transparent);
 }
 
 @mixin cui-shadow-focused() {
@@ -38,5 +37,5 @@
 }
 
 @mixin cui-shadow-error-focused() {
-    box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.25);
+    box-shadow: 0 0 0 2px color-mix(in srgb, colors.$cui-danger 25%, transparent);
 }

package/styles/theme.scss

@@ -2,6 +2,175 @@
     --cui-main-font: Inter, sans-serif;
     --cui-nunito-italic-font: Nunito_Italic, Inter, sans-serif;
 
+    --cui-soft-black: #141413;
+
+    --cui-soft-gray-0: #ffffff;
+    --cui-soft-gray-10: #f9fafb;
+    --cui-soft-gray-50: #eff0f2;
+    --cui-soft-gray-100: #e9ebee;
+    --cui-soft-gray-200: #dcdee3;
+    --cui-soft-gray-300: #aeb2bc;
+    --cui-soft-gray-400: #7f8493;
+    --cui-soft-gray-500: #595e6a;
+    --cui-soft-gray-600: #474b55;
+    --cui-soft-gray-700: #363840;
+    --cui-soft-gray-800: #24262b;
+    --cui-soft-gray-900: #121315;
+
+    --cui-soft-slate-10: #f6fbff;
+    --cui-soft-slate-50: #e4ecf3;
+    --cui-soft-slate-100: #d3dde8;
+    --cui-soft-slate-200: #c5d1de;
+    --cui-soft-slate-300: #adbac7;
+    --cui-soft-slate-400: #717e8b;
+    --cui-soft-slate-500: #444c56;
+    --cui-soft-slate-600: #373e47;
+    --cui-soft-slate-700: #2d333b;
+    --cui-soft-slate-800: #22272e;
+    --cui-soft-slate-900: #1c2128;
+
+    --cui-soft-cyan-100: #e9f1f1;
+    --cui-soft-cyan-200: #d5e7e6;
+    --cui-soft-cyan-300: #b9dad8;
+    --cui-soft-cyan-400: #99ccc9;
+    --cui-soft-cyan-500: #81c0bc;
+    --cui-soft-cyan-600: #67b4af;
+    --cui-soft-cyan-700: #509d98;
+    --cui-soft-cyan-800: #417b77;
+    --cui-soft-cyan-900: #345d5a;
+
+    --cui-soft-light-green-50: #f6f9f3;
+    --cui-soft-light-green-100: #edf2e8;
+    --cui-soft-light-green-200: #ddead1;
+    --cui-soft-light-green-300: #c8dfb4;
+    --cui-soft-light-green-400: #b1d590;
+    --cui-soft-light-green-500: #9ecb77;
+    --cui-soft-light-green-600: #8ac05b;
+    --cui-soft-light-green-700: #73a944;
+    --cui-soft-light-green-800: #5b8438;
+    --cui-soft-light-green-900: #47632e;
+
+    --cui-soft-green-50: #f6f8f5;
+    --cui-soft-green-100: #eef2e8;
+    --cui-soft-green-200: #dfe9d2;
+    --cui-soft-green-300: #cbdcb7;
+    --cui-soft-green-400: #b7d095;
+    --cui-soft-green-500: #a5c67b;
+    --cui-soft-green-600: #93ba61;
+    --cui-soft-green-700: #7ca34a;
+    --cui-soft-green-800: #63803d;
+    --cui-soft-green-900: #4c6032;
+
+    --cui-soft-yellow-50: #f2ece0;
+    --cui-soft-yellow-100: #f1e5d0;
+    --cui-soft-yellow-200: #eed9b4;
+    --cui-soft-yellow-300: #ebc98e;
+    --cui-soft-yellow-400: #eab862;
+    --cui-soft-yellow-500: #e5a943;
+    --cui-soft-yellow-600: #e09a22;
+    --cui-soft-yellow-700: #b77f1d;
+    --cui-soft-yellow-800: #89601a;
+    --cui-soft-yellow-900: #614716;
+
+    --cui-soft-orange-50: #fdf3ec;
+    --cui-soft-orange-100: #fae7d7;
+    --cui-soft-orange-200: #f6d1bb;
+    --cui-soft-orange-300: #f3b593;
+    --cui-soft-orange-400: #f09568;
+    --cui-soft-orange-500: #ef8051;
+    --cui-soft-orange-600: #ec6d44;
+    --cui-soft-orange-700: #dd5d2a;
+    --cui-soft-orange-800: #b1461d;
+    --cui-soft-orange-900: #7b3115;
+
+    --cui-soft-red-50: #f0dcd9;
+    --cui-soft-red-100: #eecdc9;
+    --cui-soft-red-200: #edb3ab;
+    --cui-soft-red-300: #ea9185;
+    --cui-soft-red-400: #e76b5a;
+    --cui-soft-red-500: #e44e3a;
+    --cui-soft-red-600: #d8351f;
+    --cui-soft-red-700: #ae2d1c;
+    --cui-soft-red-800: #802519;
+    --cui-soft-red-900: #591d15;
+
+    --cui-soft-light-blue-50: #f3f7f9;
+    --cui-soft-light-blue-100: #e6eef5;
+    --cui-soft-light-blue-200: #cee1ee;
+    --cui-soft-light-blue-300: #aecfe5;
+    --cui-soft-light-blue-400: #87bbde;
+    --cui-soft-light-blue-500: #6bacd6;
+    --cui-soft-light-blue-600: #4d9bce;
+    --cui-soft-light-blue-700: #3584b8;
+    --cui-soft-light-blue-800: #2e688f;
+    --cui-soft-light-blue-900: #26506b;
+
+    --cui-soft-blue-50: #f3f6f9;
+    --cui-soft-blue-100: #e5edf5;
+    --cui-soft-blue-200: #cdddef;
+    --cui-soft-blue-300: #acc8e7;
+    --cui-soft-blue-400: #84afe1;
+    --cui-soft-blue-500: #689dd9;
+    --cui-soft-blue-600: #4989d2;
+    --cui-soft-blue-700: #3272bb;
+    --cui-soft-blue-800: #2b5b91;
+    --cui-soft-blue-900: #25476c;
+
+    --cui-soft-magenta-50: #f8f5f6;
+    --cui-soft-magenta-100: #f2e8ed;
+    --cui-soft-magenta-200: #ead2de;
+    --cui-soft-magenta-300: #deb5c9;
+    --cui-soft-magenta-400: #d293b2;
+    --cui-soft-magenta-500: #c879a1;
+    --cui-soft-magenta-600: #bd5e8e;
+    --cui-soft-magenta-700: #a64777;
+    --cui-soft-magenta-800: #823b5e;
+    --cui-soft-magenta-900: #623049;
+
+    --cui-soft-lavender-50: #f7f5f7;
+    --cui-soft-lavender-100: #f1e9f1;
+    --cui-soft-lavender-200: #e7d5e4;
+    --cui-soft-lavender-300: #d9b9d6;
+    --cui-soft-lavender-400: #cb9ac7;
+    --cui-soft-lavender-500: #be83ba;
+    --cui-soft-lavender-600: #b16aab;
+    --cui-soft-lavender-700: #9a5394;
+    --cui-soft-lavender-800: #794474;
+    --cui-soft-lavender-900: #5b3659;
+
+    --cui-soft-violet-50: #f5f5f8;
+    --cui-soft-violet-100: #eae8f2;
+    --cui-soft-violet-200: #d6d2e9;
+    --cui-soft-violet-300: #bcb7dc;
+    --cui-soft-violet-400: #9e95d0;
+    --cui-soft-violet-500: #887bc6;
+    --cui-soft-violet-600: #7061ba;
+    --cui-soft-violet-700: #594aa3;
+    --cui-soft-violet-800: #483d80;
+    --cui-soft-violet-900: #393260;
+
+    --cui-soft-purple-50: #f6f5f7;
+    --cui-soft-purple-100: #ede9f2;
+    --cui-soft-purple-200: #ded4e7;
+    --cui-soft-purple-300: #cab8db;
+    --cui-soft-purple-400: #b498cd;
+    --cui-soft-purple-500: #a27fc2;
+    --cui-soft-purple-600: #9166b5;
+    --cui-soft-purple-700: #7a4f9e;
+    --cui-soft-purple-800: #61407c;
+    --cui-soft-purple-900: #4a345e;
+
+    --cui-soft-terra-50: #f7f6f5;
+    --cui-soft-terra-100: #f1ece9;
+    --cui-soft-terra-200: #e7dad5;
+    --cui-soft-terra-300: #dac4b9;
+    --cui-soft-terra-400: #ccaa99;
+    --cui-soft-terra-500: #c09581;
+    --cui-soft-terra-600: #b48167;
+    --cui-soft-terra-700: #9d6a50;
+    --cui-soft-terra-800: #7b5541;
+    --cui-soft-terra-900: #5d4334;
+
     --cui-black: #000000;
 
     --cui-gray-0: #ffffff;
@@ -42,7 +211,7 @@
     --cui-light-green-50: #f5fef1;
     --cui-light-green-100: #f0feea;
     --cui-light-green-200: #e1fcd3;
-    --cui-light-green-300: #bef6a2;
+    --cui-light-green-300: #9ef572;
     --cui-light-green-400: #8edd67;
     --cui-light-green-500: #7ec45b;
     --cui-light-green-600: #77b856;
@@ -51,10 +220,10 @@
     --cui-light-green-900: #375628;
 
     --cui-green-50: #ecfff3;
-    --cui-green-100: #d9ffeb;
-    --cui-green-200: #c7ffdd;
-    --cui-green-300: #a3f5c4;
-    --cui-green-400: #59e892;
+    --cui-green-100: #c1ffda;
+    --cui-green-200: #97ffc0;
+    --cui-green-300: #6dffa7;
+    --cui-green-400: #3eee84;
     --cui-green-500: #29cc6a;
     --cui-green-600: #17c174;
     --cui-green-700: #039855;
@@ -118,8 +287,8 @@
 
     --cui-magenta-50: #ffe5ff;
     --cui-magenta-100: #ffe5ff;
-    --cui-magenta-200: #f9c3f0;
-    --cui-magenta-300: #f18de2;
+    --cui-magenta-200: #f38de2;
+    --cui-magenta-300: #ec5fd6;
     --cui-magenta-400: #e633c9;
     --cui-magenta-500: #cc19b0;
     --cui-magenta-600: #a0128a;
@@ -248,6 +417,13 @@
     --cui-badge-gray-label-inverse: var(--cui-gray-900);
     --cui-badge-gray-stroke: var(--cui-gray-500);
 
+    --cui-badge-dark-gray-bg-bold: var(--cui-base-500);
+    --cui-badge-dark-gray-bg-subtle: var(--cui-base-200);
+    --cui-badge-dark-gray-border-bold: var(--cui-base-400);
+    --cui-badge-dark-gray-border-subtle: var(--cui-base-300);
+    --cui-badge-dark-gray-label: var(--cui-base-900);
+    --cui-badge-dark-gray-label-inverse: var(--cui-base-0);
+
     --cui-badge-green-bg: var(--cui-green-50);
     --cui-badge-green-bg-bold: var(--cui-success);
     --cui-badge-green-bg-subtle: var(--cui-green-100);
@@ -358,6 +534,146 @@
     --cui-badge-violet-label-inverse: var(--cui-base-900);
     --cui-badge-violet-stroke: var(--cui-violet-400);
 
+    --cui-badge-soft-blue-bg: var(--cui-soft-blue-50);
+    --cui-badge-soft-blue-bg-bold: var(--cui-info);
+    --cui-badge-soft-blue-bg-subtle: var(--cui-soft-blue-100);
+    --cui-badge-soft-blue-border: var(--cui-soft-blue-200);
+    --cui-badge-soft-blue-border-bold: var(--cui-info);
+    --cui-badge-soft-blue-border-subtle: var(--cui-soft-blue-300);
+    --cui-badge-soft-blue-label: var(--cui-info);
+    --cui-badge-soft-blue-label-inverse: var(--cui-base-900);
+    --cui-badge-soft-blue-stroke: var(--cui-info);
+
+    --cui-badge-soft-cyan-bg: var(--cui-soft-cyan-100);
+    --cui-badge-soft-cyan-bg-bold: var(--cui-soft-cyan-500);
+    --cui-badge-soft-cyan-bg-subtle: var(--cui-soft-cyan-200);
+    --cui-badge-soft-cyan-border: var(--cui-soft-cyan-200);
+    --cui-badge-soft-cyan-border-bold: var(--cui-soft-cyan-500);
+    --cui-badge-soft-cyan-border-subtle: var(--cui-soft-cyan-300);
+    --cui-badge-soft-cyan-label: var(--cui-soft-cyan-500);
+    --cui-badge-soft-cyan-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-cyan-stroke: var(--cui-soft-cyan-500);
+
+    --cui-badge-soft-gray-bg: var(--cui-soft-gray-100);
+    --cui-badge-soft-gray-bg-bold: var(--cui-soft-gray-400);
+    --cui-badge-soft-gray-bg-subtle: var(--cui-soft-gray-200);
+    --cui-badge-soft-gray-border: var(--cui-soft-gray-200);
+    --cui-badge-soft-gray-border-bold: var(--cui-soft-gray-500);
+    --cui-badge-soft-gray-border-subtle: var(--cui-soft-gray-300);
+    --cui-badge-soft-gray-label: var(--cui-soft-gray-500);
+    --cui-badge-soft-gray-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-gray-stroke: var(--cui-soft-gray-500);
+
+    --cui-badge-soft-green-bg: var(--cui-soft-green-50);
+    --cui-badge-soft-green-bg-bold: var(--cui-success);
+    --cui-badge-soft-green-bg-subtle: var(--cui-soft-green-100);
+    --cui-badge-soft-green-border: var(--cui-soft-green-100);
+    --cui-badge-soft-green-border-bold: var(--cui-soft-green-300);
+    --cui-badge-soft-green-border-subtle: var(--cui-soft-green-200);
+    --cui-badge-soft-green-label: var(--cui-success);
+    --cui-badge-soft-green-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-green-stroke: var(--cui-success);
+
+    --cui-badge-soft-red-bg: var(--cui-soft-red-50);
+    --cui-badge-soft-red-bg-bold: var(--cui-danger);
+    --cui-badge-soft-red-bg-subtle: var(--cui-soft-red-100);
+    --cui-badge-soft-red-border: var(--cui-soft-red-100);
+    --cui-badge-soft-red-border-bold: var(--cui-danger);
+    --cui-badge-soft-red-border-subtle: var(--cui-soft-red-200);
+    --cui-badge-soft-red-label: var(--cui-danger);
+    --cui-badge-soft-red-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-red-stroke: var(--cui-danger);
+
+    --cui-badge-soft-yellow-bg: var(--cui-soft-yellow-50);
+    --cui-badge-soft-yellow-bg-bold: var(--cui-soft-yellow-400);
+    --cui-badge-soft-yellow-bg-subtle: var(--cui-soft-yellow-100);
+    --cui-badge-soft-yellow-border: var(--cui-soft-yellow-100);
+    --cui-badge-soft-yellow-border-bold: var(--cui-soft-yellow-300);
+    --cui-badge-soft-yellow-border-subtle: var(--cui-soft-yellow-200);
+    --cui-badge-soft-yellow-label: var(--cui-soft-yellow-500);
+    --cui-badge-soft-yellow-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-yellow-stroke: var(--cui-warning);
+
+    --cui-badge-soft-lavender-bg: var(--cui-soft-lavender-50);
+    --cui-badge-soft-lavender-bg-bold: var(--cui-soft-lavender-400);
+    --cui-badge-soft-lavender-bg-subtle: var(--cui-soft-lavender-100);
+    --cui-badge-soft-lavender-border: var(--cui-soft-lavender-200);
+    --cui-badge-soft-lavender-border-bold: var(--cui-soft-lavender-400);
+    --cui-badge-soft-lavender-border-subtle: var(--cui-soft-lavender-300);
+    --cui-badge-soft-lavender-label: var(--cui-soft-lavender-400);
+    --cui-badge-soft-lavender-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-lavender-stroke: var(--cui-soft-lavender-400);
+
+    --cui-badge-soft-light-blue-bg: var(--cui-soft-light-blue-50);
+    --cui-badge-soft-light-blue-bg-bold: var(--cui-soft-light-blue-500);
+    --cui-badge-soft-light-blue-bg-subtle: var(--cui-soft-light-blue-100);
+    --cui-badge-soft-light-blue-border: var(--cui-soft-light-blue-200);
+    --cui-badge-soft-light-blue-border-bold: var(--cui-soft-light-blue-500);
+    --cui-badge-soft-light-blue-border-subtle: var(--cui-soft-light-blue-400);
+    --cui-badge-soft-light-blue-label: var(--cui-soft-light-blue-500);
+    --cui-badge-soft-light-blue-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-light-blue-stroke: var(--cui-soft-light-blue-500);
+
+    --cui-badge-soft-light-green-bg: var(--cui-soft-light-green-100);
+    --cui-badge-soft-light-green-bg-bold: var(--cui-soft-light-green-600);
+    --cui-badge-soft-light-green-bg-subtle: var(--cui-soft-light-green-200);
+    --cui-badge-soft-light-green-border: var(--cui-soft-light-green-200);
+    --cui-badge-soft-light-green-border-bold: var(--cui-soft-light-green-600);
+    --cui-badge-soft-light-green-border-subtle: var(--cui-soft-light-green-300);
+    --cui-badge-soft-light-green-label: var(--cui-soft-light-green-600);
+    --cui-badge-soft-light-green-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-light-green-stroke: var(--cui-soft-light-green-600);
+
+    --cui-badge-soft-magenta-bg: var(--cui-soft-magenta-50);
+    --cui-badge-soft-magenta-bg-bold: var(--cui-soft-magenta-500);
+    --cui-badge-soft-magenta-bg-subtle: var(--cui-soft-magenta-100);
+    --cui-badge-soft-magenta-border: var(--cui-soft-magenta-200);
+    --cui-badge-soft-magenta-border-bold: var(--cui-soft-magenta-500);
+    --cui-badge-soft-magenta-border-subtle: var(--cui-soft-magenta-200);
+    --cui-badge-soft-magenta-label: var(--cui-soft-magenta-500);
+    --cui-badge-soft-magenta-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-magenta-stroke: var(--cui-soft-magenta-500);
+
+    --cui-badge-soft-orange-bg: var(--cui-soft-orange-50);
+    --cui-badge-soft-orange-bg-bold: var(--cui-soft-orange-600);
+    --cui-badge-soft-orange-bg-subtle: var(--cui-soft-orange-100);
+    --cui-badge-soft-orange-border: var(--cui-soft-orange-200);
+    --cui-badge-soft-orange-border-bold: var(--cui-soft-orange-600);
+    --cui-badge-soft-orange-border-subtle: var(--cui-soft-orange-300);
+    --cui-badge-soft-orange-label: var(--cui-soft-orange-600);
+    --cui-badge-soft-orange-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-orange-stroke: var(--cui-soft-orange-600);
+
+    --cui-badge-soft-purple-bg: var(--cui-soft-purple-50);
+    --cui-badge-soft-purple-bg-bold: var(--cui-soft-purple-500);
+    --cui-badge-soft-purple-bg-subtle: var(--cui-soft-purple-100);
+    --cui-badge-soft-purple-border: var(--cui-soft-purple-100);
+    --cui-badge-soft-purple-border-bold: var(--cui-soft-purple-400);
+    --cui-badge-soft-purple-border-subtle: var(--cui-soft-purple-200);
+    --cui-badge-soft-purple-label: var(--cui-soft-purple-400);
+    --cui-badge-soft-purple-label-inverse: var(--cui-base-900);
+    --cui-badge-soft-purple-stroke: var(--cui-soft-purple-400);
+
+    --cui-badge-soft-terra-bg: var(--cui-soft-terra-50);
+    --cui-badge-soft-terra-bg-bold: var(--cui-soft-terra-500);
+    --cui-badge-soft-terra-bg-subtle: var(--cui-soft-terra-100);
+    --cui-badge-soft-terra-border: var(--cui-soft-terra-200);
+    --cui-badge-soft-terra-border-bold: var(--cui-soft-terra-500);
+    --cui-badge-soft-terra-border-subtle: var(--cui-soft-terra-300);
+    --cui-badge-soft-terra-label: var(--cui-soft-terra-600);
+    --cui-badge-soft-terra-label-inverse: var(--cui-soft-gray-900);
+    --cui-badge-soft-terra-stroke: var(--cui-soft-terra-600);
+
+    --cui-badge-soft-violet-bg: var(--cui-soft-violet-50);
+    --cui-badge-soft-violet-bg-bold: var(--cui-soft-violet-500);
+    --cui-badge-soft-violet-bg-subtle: var(--cui-soft-violet-100);
+    --cui-badge-soft-violet-border: var(--cui-soft-violet-100);
+    --cui-badge-soft-violet-border-bold: var(--cui-soft-violet-400);
+    --cui-badge-soft-violet-border-subtle: var(--cui-soft-violet-200);
+    --cui-badge-soft-violet-label: var(--cui-soft-violet-400);
+    --cui-badge-soft-violet-label-inverse: var(--cui-base-900);
+    --cui-badge-soft-violet-stroke: var(--cui-soft-violet-400);
+
     --cui-banner-alert-bg: var(--cui-yellow-100);
     --cui-banner-alert-text: var(--cui-orange-800);
     --cui-banner-alert-icon: var(--cui-orange-800);
@@ -486,6 +802,7 @@
 
     --cui-badge-yellow-bg: var(--cui-yellow-900);
     --cui-badge-yellow-bg-bold: var(--cui-yellow-500);
+    --cui-badge-yellow-bg-subtle: var(--cui-yellow-800);
     --cui-badge-yellow-border: var(--cui-yellow-800);
     --cui-badge-yellow-border-bold: var(--cui-yellow-500);
     --cui-badge-yellow-border-subtle: var(--cui-yellow-600);
@@ -564,6 +881,76 @@
     --cui-badge-violet-label-inverse: var(--cui-violet-400);
     --cui-badge-violet-stroke: var(--cui-violet-500);
 
+    --cui-badge-soft-blue-bg: var(--cui-soft-blue-900);
+    --cui-badge-soft-blue-border: var(--cui-soft-blue-800);
+    --cui-badge-soft-blue-label: var(--cui-soft-blue-300);
+    --cui-badge-soft-blue-stroke: var(--cui-soft-blue-500);
+
+    --cui-badge-soft-cyan-bg: var(--cui-soft-cyan-900);
+    --cui-badge-soft-cyan-border: var(--cui-soft-cyan-800);
+    --cui-badge-soft-cyan-label: var(--cui-soft-cyan-300);
+    --cui-badge-soft-cyan-stroke: var(--cui-soft-cyan-500);
+
+    --cui-badge-soft-gray-bg: var(--cui-soft-gray-800);
+    --cui-badge-soft-gray-border: var(--cui-soft-gray-700);
+    --cui-badge-soft-gray-label: var(--cui-soft-gray-300);
+    --cui-badge-soft-gray-stroke: var(--cui-soft-gray-500);
+
+    --cui-badge-soft-green-bg: var(--cui-soft-green-900);
+    --cui-badge-soft-green-border: var(--cui-soft-green-800);
+    --cui-badge-soft-green-label: var(--cui-soft-green-300);
+    --cui-badge-soft-green-stroke: var(--cui-soft-green-500);
+
+    --cui-badge-soft-red-bg: var(--cui-soft-red-900);
+    --cui-badge-soft-red-border: var(--cui-soft-red-800);
+    --cui-badge-soft-red-label: var(--cui-soft-red-300);
+    --cui-badge-soft-red-stroke: var(--cui-soft-red-500);
+
+    --cui-badge-soft-yellow-bg: var(--cui-soft-yellow-900);
+    --cui-badge-soft-yellow-border: var(--cui-soft-yellow-800);
+    --cui-badge-soft-yellow-label: var(--cui-soft-yellow-300);
+    --cui-badge-soft-yellow-stroke: var(--cui-soft-yellow-500);
+
+    --cui-badge-soft-lavender-bg: var(--cui-soft-lavender-900);
+    --cui-badge-soft-lavender-border: var(--cui-soft-lavender-800);
+    --cui-badge-soft-lavender-label: var(--cui-soft-lavender-300);
+    --cui-badge-soft-lavender-stroke: var(--cui-soft-lavender-500);
+
+    --cui-badge-soft-light-blue-bg: var(--cui-soft-light-blue-900);
+    --cui-badge-soft-light-blue-border: var(--cui-soft-light-blue-800);
+    --cui-badge-soft-light-blue-label: var(--cui-soft-light-blue-300);
+    --cui-badge-soft-light-blue-stroke: var(--cui-soft-light-blue-500);
+
+    --cui-badge-soft-light-green-bg: var(--cui-soft-light-green-900);
+    --cui-badge-soft-light-green-border: var(--cui-soft-light-green-800);
+    --cui-badge-soft-light-green-label: var(--cui-soft-light-green-300);
+    --cui-badge-soft-light-green-stroke: var(--cui-soft-light-green-500);
+
+    --cui-badge-soft-magenta-bg: var(--cui-soft-magenta-900);
+    --cui-badge-soft-magenta-border: var(--cui-soft-magenta-800);
+    --cui-badge-soft-magenta-label: var(--cui-soft-magenta-300);
+    --cui-badge-soft-magenta-stroke: var(--cui-soft-magenta-500);
+
+    --cui-badge-soft-orange-bg: var(--cui-soft-orange-900);
+    --cui-badge-soft-orange-border: var(--cui-soft-orange-800);
+    --cui-badge-soft-orange-label: var(--cui-soft-orange-300);
+    --cui-badge-soft-orange-stroke: var(--cui-soft-orange-500);
+
+    --cui-badge-soft-purple-bg: var(--cui-soft-purple-900);
+    --cui-badge-soft-purple-border: var(--cui-soft-purple-800);
+    --cui-badge-soft-purple-label: var(--cui-soft-purple-300);
+    --cui-badge-soft-purple-stroke: var(--cui-soft-purple-500);
+
+    --cui-badge-soft-terra-bg: var(--cui-soft-terra-900);
+    --cui-badge-soft-terra-border: var(--cui-soft-terra-800);
+    --cui-badge-soft-terra-label: var(--cui-soft-terra-300);
+    --cui-badge-soft-terra-stroke: var(--cui-soft-terra-500);
+
+    --cui-badge-soft-violet-bg: var(--cui-soft-violet-900);
+    --cui-badge-soft-violet-border: var(--cui-soft-violet-800);
+    --cui-badge-soft-violet-label: var(--cui-soft-violet-300);
+    --cui-badge-soft-violet-stroke: var(--cui-soft-violet-500);
+
     --cui-banner-alert-bg: var(--cui-yellow-900);
     --cui-banner-alert-text: var(--cui-gray-0);
     --cui-banner-alert-icon: var(--cui-yellow-300);