:root[theme="bootstrap4-light-purple"],
:root[data-theme="bootstrap4-light-purple"] {
  --surface-a: #ffffff;
  --surface-b: #efefef;
  --surface-c: #e9ecef;
  --surface-d: #dee2e6;
  --surface-e: #ffffff;
  --surface-f: #ffffff;
  --text-color: #212529;
  --text-color-secondary: #6c757d;
  --primary-color: #883cae;
  --primary-color-text: #ffffff;
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;
  --surface-0: #ffffff;
  --surface-50: #f9fafb;
  --surface-100: #f8f9fa;
  --surface-200: #e9ecef;
  --surface-300: #dee2e6;
  --surface-400: #ced4da;
  --surface-500: #adb5bd;
  --surface-600: #6c757d;
  --surface-700: #495057;
  --surface-800: #343a40;
  --surface-900: #212529;
  --gray-50: #f9fafb;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;
  --border-radius: 4px;
  --surface-ground: #efefef;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #dee2e6;
  --surface-hover: #e9ecef;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: var(--primaryColor);
  --highlight-text-color: #ffffff;
  --focus-ring: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

:root[theme="bootstrap4-light-purple"],
:root[data-theme="bootstrap4-light-purple"] {
  --blue-50: #f3f8ff;
  --blue-100: #c5dcff;
  --blue-200: #97c1fe;
  --blue-300: #69a5fe;
  --blue-400: #3b8afd;
  --blue-500: #0d6efd;
  --blue-600: #0b5ed7;
  --blue-700: #094db1;
  --blue-800: #073d8b;
  --blue-900: #052c65;
  --green-50: #f4f9f6;
  --green-100: #c8e2d6;
  --green-200: #9ccbb5;
  --green-300: #70b595;
  --green-400: #459e74;
  --green-500: #198754;
  --green-600: #157347;
  --green-700: #125f3b;
  --green-800: #0e4a2e;
  --green-900: #0a3622;
  --yellow-50: #fffcf3;
  --yellow-100: #fff0c3;
  --yellow-200: #ffe494;
  --yellow-300: #ffd965;
  --yellow-400: #ffcd36;
  --yellow-500: #ffc107;
  --yellow-600: #d9a406;
  --yellow-700: #b38705;
  --yellow-800: #8c6a04;
  --yellow-900: #664d03;
  --cyan-50: #f3fcfe;
  --cyan-100: #c5f2fb;
  --cyan-200: #97e8f9;
  --cyan-300: #69def6;
  --cyan-400: #3bd4f3;
  --cyan-500: #0dcaf0;
  --cyan-600: #0baccc;
  --cyan-700: #098da8;
  --cyan-800: #076f84;
  --cyan-900: #055160;
  --pink-50: #fdf5f9;
  --pink-100: #f5cee1;
  --pink-200: #eda7ca;
  --pink-300: #e681b3;
  --pink-400: #de5a9b;
  --pink-500: #d63384;
  --pink-600: #b62b70;
  --pink-700: #96245c;
  --pink-800: #761c49;
  --pink-900: #561435;
  --indigo-50: #f7f3fe;
  --indigo-100: #dac6fc;
  --indigo-200: #bd98f9;
  --indigo-300: #a06bf7;
  --indigo-400: #833df4;
  --indigo-500: #6610f2;
  --indigo-600: #570ece;
  --indigo-700: #470ba9;
  --indigo-800: #380985;
  --indigo-900: #290661;
  --teal-50: #f4fcfa;
  --teal-100: #c9f2e6;
  --teal-200: #9fe8d2;
  --teal-300: #75debf;
  --teal-400: #4ad3ab;
  --teal-500: #20c997;
  --teal-600: #1bab80;
  --teal-700: #168d6a;
  --teal-800: #126f53;
  --teal-900: #0d503c;
  --orange-50: #fff9f3;
  --orange-100: #ffe0c7;
  --orange-200: #fec89a;
  --orange-300: #feaf6d;
  --orange-400: #fd9741;
  --orange-500: #fd7e14;
  --orange-600: #d76b11;
  --orange-700: #b1580e;
  --orange-800: #8b450b;
  --orange-900: #653208;
  --bluegray-50: #f8f9fb;
  --bluegray-100: #e0e4ea;
  --bluegray-200: #c7ced9;
  --bluegray-300: #aeb9c8;
  --bluegray-400: #95a3b8;
  --bluegray-500: #7c8ea7;
  --bluegray-600: #69798e;
  --bluegray-700: #576375;
  --bluegray-800: #444e5c;
  --bluegray-900: #323943;
  --purple-50: #f8f6fc;
  --purple-100: #dcd2f0;
  --purple-200: #c1aee4;
  --purple-300: #a68ad9;
  --purple-400: #8a66cd;
  --purple-500: #6f42c1;
  --purple-600: #5e38a4;
  --purple-700: #4e2e87;
  --purple-800: #3d246a;
  --purple-900: #2c1a4d;
}

:root[theme="bootstrap4-light-purple"],
:root[data-theme="bootstrap4-light-purple"] {
  --primaryColor: #883cae;
  --primaryColorRGBValue: 136, 60, 174;
  --primaryDarkColor: #7a38a7;
  --primaryDarkColorRGBValue: 122, 56, 167;
  --primaryDarkerColor: #68329e;
  --primaryDarkerColorRGBValue: 104, 50, 158;
  --primaryTextColor: #ffffff;

  --primary-color-h: 270;
  --primary-color-s: 52%;
  --primary-color-l: 41%;

  --borderRadius: 4px;

  --buttonPadding: 0.5rem 0.75rem;

  --inputHoverBorderColor: #ced4da;
  --inputPadding: 0.5rem 0.75rem;

  --inputListItemPadding: 0.5rem 1.5rem;
  --inputListHeaderPadding: 0.5rem 1.5rem;

  --inputSwitchBorderRadius: 4px;
  --inputSwitchHandleBorderRadius: 4px;

  --panelHeaderPadding: 0.75rem 1rem;

  --tabviewHeaderBorder: solid;
  --tabviewHeaderBorderWidth: 1px 1px 2px 1px;
  --tabviewHeaderHoverBorderColor: #dee2e6 #dee2e6 #dee2e6 #dee2e6;
  --tabviewHeaderActiveBorderColor: #dee2e6 #dee2e6 #ffffff #dee2e6;
  --tabviewHeaderTextActiveColor: var(--textColor);
  --tabviewNavBorderWidth: 0 0 1px 0;

  --secondaryButtonBg: #6c757d;
  --secondaryButtonTextColor: #ffffff;
  --secondaryButtonBorder: 1px solid #6c757d;
  --secondaryButtonHoverBg: #59626a;
  --secondaryButtonTextHoverColor: #ffffff;
  --secondaryButtonHoverBorderColor: #59626a;
  --secondaryButtonActiveBg: #4f5860;
  --secondaryButtonTextActiveColor: #ffffff;
  --secondaryButtonActiveBorderColor: #4f5860;
  --secondaryButtonFocusShadow: 0 0 0 0.2rem hsl(208, 7%, calc(46% + 30%));
  --successButtonBg: #28a745;
  --successButtonTextColor: #ffffff;
  --successButtonBorder: 1px solid #28a745;
  --successButtonHoverBg: #1e9636;
  --successButtonTextHoverColor: #ffffff;
  --successButtonHoverBorderColor: #1e9636;
  --successButtonActiveBg: #188c2e;
  --successButtonTextActiveColor: #ffffff;
  --successButtonActiveBorderColor: #188c2e;
  --successButtonFocusShadow: 0 0 0 0.2rem hsl(134, 61%, calc(41% + 30%));
  --infoButtonBg: #26a69a;
  --infoButtonTextColor: #ffffff;
  --infoButtonBorder: 1px solid #26a69a;
  --infoButtonHoverBg: #1c9588;
  --infoButtonTextHoverColor: #ffffff;
  --infoButtonHoverBorderColor: #1c9588;
  --infoButtonActiveBg: #178b7e;
  --infoButtonTextActiveColor: #ffffff;
  --infoButtonActiveBorderColor: #178b7e;
  --infoButtonFocusShadow: 0 0 0 0.2rem hsl(174, 63%, calc(40% + 30%));
  --warningButtonBg: #ffc107;
  --warningButtonTextColor: var(--textColor);
  --warningButtonBorder: 1px solid #ffc107;
  --warningButtonHoverBg: #ffb305;
  --warningButtonTextHoverColor: var(--textColor);
  --warningButtonHoverBorderColor: #ffb305;
  --warningButtonActiveBg: #ffab04;
  --warningButtonTextActiveColor: var(--textColor);
  --warningButtonActiveBorderColor: #ffab04;
  --warningButtonFocusShadow: 0 0 0 0.2rem hsl(45, 100%, calc(51% + 30%));
  --helpButtonBg: #6f42c1;
  --helpButtonTextColor: #ffffff;
  --helpButtonBorder: 1px solid #6f42c1;
  --helpButtonHoverBg: #5c33b3;
  --helpButtonTextHoverColor: #ffffff;
  --helpButtonHoverBorderColor: #5c33b3;
  --helpButtonActiveBg: #522bab;
  --helpButtonTextActiveColor: #ffffff;
  --helpButtonActiveBorderColor: #522bab;
  --helpButtonFocusShadow: 0 0 0 0.2rem hsl(261, 51%, calc(51% + 30%));
  --dangerButtonBg: #dc3545;
  --dangerButtonTextColor: #ffffff;
  --dangerButtonBorder: 1px solid #dc3545;
  --dangerButtonHoverBg: #d32836;
  --dangerButtonTextHoverColor: #ffffff;
  --dangerButtonHoverBorderColor: #d32836;
  --dangerButtonActiveBg: #ce222e;
  --dangerButtonTextActiveColor: #ffffff;
  --dangerButtonActiveBorderColor: #ce222e;
  --dangerButtonFocusShadow: 0 0 0 0.2rem hsl(354, 70%, calc(54% + 30%));
}
