@blocklet/payment-react/src/theme/index.css

Reusable react components for payment kit v2

:root {
  /* Light Theme */
  /* Color */
  /* background.default */
  --backgrounds-bg-base: #ffffff;
  --backgrounds-bg-base-hover: #f9fafb;
  --backgrounds-bg-base-pressed: #f3f4f6;
  /* grey.100 */
  --backgrounds-bg-component: #f1f3f5;
  --backgrounds-bg-component-hover: #e5e7eb;
  /* grey.100 */
  --backgrounds-bg-disabled: #f3f4f6;
  /* grey.50 */
  --backgrounds-bg-field: #f9fafb;
  --backgrounds-bg-field-hover: #f3f4f6;
  --backgrounds-bg-glass: #ffffffb8;
  /* grey.100 */
  --backgrounds-bg-highlight: #eff6ff;
  --backgrounds-bg-highlight-hover: #dbeafe;
  --backgrounds-bg-interactive: #3b82f6;
  --backgrounds-bg-interactive-hover: #2563eb;
  --backgrounds-bg-overlay: #03071266;
  /* grey.50 */
  --backgrounds-bg-subtle: #f9fafb;
  --backgrounds-bg-subtle-hover: #f3f4f6;
  --backgrounds-bg-subtle-pressed: #e5e7eb;
  --backgrounds-bg-switch-off: #e5e7eb;
  --backgrounds-bg-switch-off-hover: #d1d5db;
  --buttons-button-danger: #e11d48;
  --buttons-button-danger-hover: #be123c;
  --buttons-button-danger-pressed: #9f1239;
  --buttons-button-inverted: #030712;
  --buttons-button-inverted-hover: #111827;
  --buttons-button-inverted-pressed: #1f2937;
  --buttons-button-neutral: #ffffff;
  --buttons-button-neutral-hover: #f3f4f6;
  --buttons-button-neutral-pressed: #e5e7eb;
  --buttons-button-transparent: #ffffff00;
  --buttons-button-transparent-hover: #f3f4f6;
  --buttons-button-transparent-pressed: #e5e7eb;
  /* grey.A700 */
  --foregrounds-fg-base: #030712;
  --foregrounds-fg-danger: #e11d48;
  --foregrounds-fg-disabled: #d1d5db;
  /* text.link */
  --foregrounds-fg-interactive: #3b82f6;
  --foregrounds-fg-interactive-hover: #2563eb;
  /* text.lighter */
  --foregrounds-fg-muted: #9ca3af;
  /* primary.contrastText */
  --foregrounds-fg-on-color: #ffffff;
  --foregrounds-fg-on-inverted: #ffffff;
  --foregrounds-fg-subtle: #4b5563;
  /* grey.200 */
  --foregrounds-fg-border: #e0e0e0;
  --others-spacer: #ffffff00;
  --shadows-card-hover-1: #03071214;
  --shadows-card-hover-2: #03071214;
  --shadows-card-hover-3: #0307121a;
  --shadows-card-rest-1: #03071214;
  --shadows-card-rest-2: #03071214;
  --shadows-card-rest-3: #0307120a;
  --shadows-danger-1: #e11d48;
  --shadows-error-2: #e11d4826;
  --shadows-flyout-1: #03071214;
  --shadows-flyout-2: #03071214;
  --shadows-interactive-with-active-1: #3b82f6;
  --shadows-interactive-with-active-2: #3b82f633;
  --shadows-interactive-with-shadow-1: #1e3a8a80;
  --shadows-interactive-with-shadow-2: #3b82f6;
  --shadows-modal-1: #ffffff;
  --shadows-modal-2: #e5e7eb66;
  --shadows-modal-3: #03071214;
  --shadows-modal-4: #03071214;
  --shadows-modal-5: #03071214;
  --shadows-switch-background-1: #0307120a;
  --shadows-switch-background-2: #0307120a;
  --shadows-switch-background-3: #0307120f;
  --shadows-switch-background-4: #03071205;
  --shadows-switch-background-5: #0307120a;
  --shadows-switch-handle-1: #ffffff;
  --shadows-switch-handle-2: #ffffff;
  --shadows-switch-handle-3: #03071205;
  --shadows-switch-handle-4: #03071205;
  --shadows-switch-handle-5: #0307120a;
  --shadows-switch-handle-6: #0307121f;
  --shadows-switch-handle-7: #03071214;
  --shadows-tooltip-1: #03071214;
  --shadows-tooltip-2: #03071214;
  /* grey.100 */
  --stroke-border-base: #eff1f5;
  --stroke-border-error: #e11d48;
  /* secondary.main */
  --stroke-border-interactive: #3b82f6;
  --stroke-border-loud: #030712;
  --stroke-border-strong: #d1d5db;
  /* grey.200 */
  --stroke-sep: #eff1f5;
  /* chip.info.background */
  --tags-tag-blue-bg: #dbeafe;
  --tags-tag-blue-bg-hover: #bfdbfe;
  /* chip.info.border */
  --tags-tag-blue-border: #bfdbfe;
  --tags-tag-blue-icon: #2563eb;
  /* chip.info.text */
  --tags-tag-blue-text: #1d4ed8;
  /* chip.success.background */
  --tags-tag-green-bg: #d1fae5;
  --tags-tag-green-bg-hover: #a7f3d0;
  /* chip.success.border */
  --tags-tag-green-border: #a7f3d0;
  --tags-tag-green-icon: #059669;
  /* chip.success.text */
  --tags-tag-green-text: #047857;
  /* chip.default.background */
  --tags-tag-neutral-bg: #f3f4f6;
  --tags-tag-neutral-bg-hover: #e5e7eb;
  /* chip.default.border */
  --tags-tag-neutral-border: #e5e7eb;
  --tags-tag-neutral-icon: #6b7280;
  /* chip.default.text */
  --tags-tag-neutral-text: #4b5563;
  /* chip.warning.background */
  --tags-tag-orange-bg: #fef4c7;
  --tags-tag-orange-bg-hover: #fde68a;
  /* chip.warning.border */
  --tags-tag-orange-border: #fde68a;
  --tags-tag-orange-icon: #d97706;
  /* chip.warning.text */
  --tags-tag-orange-text: #b45309;
  /* chip.secondary.background */
  --tags-tag-purple-bg: #ede9fe;
  --tags-tag-purple-bg-hover: #ddd6fe;
  /* chip.secondary.border */
  --tags-tag-purple-border: #ddd6fe;
  --tags-tag-purple-icon: #7c3aed;
  /* chip.secondary.text */
  --tags-tag-purple-text: #6d28d9;
  /* chip.error.background */
  --tags-tag-red-bg: #ffe4e6;
  --tags-tag-red-bg-hover: #fecdd3;
  /* chip.error.border */
  --tags-tag-red-border: #fecdd3;
  --tags-tag-red-icon: #e11d48;
  /* chip.error.text */
  --tags-tag-red-text: #be123c;
  /* Number */
  /* borderRadius: 0.5 */
  --radius-s: 0.25rem;
  /* borderRadius: 1 */
  --radius-m: 0.5rem;
  /* borderRadius: 1.5 */
  --radius-l: 0.75rem;
  --radius-round: 624.9375rem;
  /* grey.200 */
  --stroke-button-secondary-border: #e5e7eb;
}
[data-theme='dark'] {
  /* Dark Theme */
  /* Color */
  --backgrounds-bg-base: #1b1b1f;
  --backgrounds-bg-base-hover: #27282d;
  --backgrounds-bg-base-pressed: #2e3035;
  --backgrounds-bg-component: #27282d;
  --backgrounds-bg-component-hover: #27282d;
  --backgrounds-bg-disabled: #27282d;
  --backgrounds-bg-field: #27282d;
  --backgrounds-bg-field-hover: #2e3035;
  --backgrounds-bg-glass: #1b1b1fb8;
  --backgrounds-bg-highlight: #172554;
  --backgrounds-bg-highlight-hover: #1e3a8a;
  --backgrounds-bg-interactive: #60a5fa;
  --backgrounds-bg-interactive-hover: #60a5fa;
  --backgrounds-bg-overlay: #18181ab2;
  --backgrounds-bg-subtle: #18181a;
  --backgrounds-bg-subtle-hover: #1b1b1f;
  --backgrounds-bg-subtle-pressed: #27282d;
  --backgrounds-bg-switch-off: #35373c;
  --backgrounds-bg-switch-off-hover: #464b50;
  --buttons-button-danger: #9f1239;
  --buttons-button-danger-hover: #be123c;
  --buttons-button-danger-pressed: #e11d48;
  --buttons-button-inverted: #edeef0;
  --buttons-button-inverted-hover: #ffffff;
  --buttons-button-inverted-pressed: #edeef0;
  --buttons-button-neutral: #27282d;
  --buttons-button-neutral-hover: #35373c;
  --buttons-button-neutral-pressed: #3c3f44;
  --buttons-button-transparent: #ffffff00;
  --buttons-button-transparent-hover: #27282d;
  --buttons-button-transparent-pressed: #2e3035;
  --foregrounds-fg-base: #edeef0;
  --foregrounds-fg-danger: #fb7185;
  --foregrounds-fg-disabled: #3c3f44;
  --foregrounds-fg-interactive: #60a5fa;
  --foregrounds-fg-interactive-hover: #3b82f6;
  --foregrounds-fg-muted: #696e77;
  --foregrounds-fg-on-color: #ffffff;
  --foregrounds-fg-on-inverted: #0a0a0a;
  --foregrounds-fg-subtle: #adb1b8;
  --others-spacer: #ffffff;
  --shadows-card-hover-1: #ffffff1a;
  --shadows-card-hover-2: #ffffff29;
  --shadows-card-hover-3: #00000066;
  --shadows-card-rest-1: #ffffff1a;
  --shadows-card-rest-2: #ffffff29;
  --shadows-card-rest-3: #00000066;
  --shadows-danger-1: #f43f5e1a;
  --shadows-error-2: #e11d4840;
  --shadows-flyout-1: #ffffff1a;
  --shadows-flyout-2: #00000052;
  --shadows-interactive-with-active-1: #60a5fa;
  --shadows-interactive-with-active-2: #3b82f640;
  --shadows-interactive-with-shadow-1: #dbeafe80;
  --shadows-interactive-with-shadow-2: #60a5fa;
  --shadows-modal-1: #171717;
  --shadows-modal-2: #2e303566;
  --shadows-modal-3: #ffffff1a;
  --shadows-modal-4: #00000052;
  --shadows-modal-5: #00000052;
  --shadows-switch-background-1: #0000001a;
  --shadows-switch-background-2: #0000001a;
  --shadows-switch-background-3: #ffffff29;
  --shadows-switch-background-4: #0000001a;
  --shadows-switch-background-5: #00000033;
  --shadows-switch-handle-1: #ffffff;
  --shadows-switch-handle-2: #ffffff;
  --shadows-switch-handle-3: #00000029;
  --shadows-switch-handle-4: #0000001a;
  --shadows-switch-handle-5: #0000001a;
  --shadows-switch-handle-6: #0000001a;
  --shadows-switch-handle-7: #0000001a;
  --shadows-tooltip-1: #ffffff1a;
  --shadows-tooltip-2: #00000052;
  --stroke-border-base: #2e3035;
  --stroke-border-error: #f43f5e;
  --stroke-border-interactive: #60a5fa;
  --stroke-border-loud: #edeef0;
  --stroke-border-strong: #35373c;
  --stroke-sep: #2e3035;
  --tags-tag-blue-bg: #172554;
  --tags-tag-blue-bg-hover: #1e2a8a;
  --tags-tag-blue-border: #1e3a8a;
  --tags-tag-blue-icon: #1d4ed8;
  --tags-tag-blue-text: #3b82f6;
  --tags-tag-green-bg: #022c22;
  --tags-tag-green-bg-hover: #064e3b;
  --tags-tag-green-border: #064e3b;
  --tags-tag-green-icon: #047857;
  --tags-tag-green-text: #10b981;
  --tags-tag-neutral-bg: #2e3035;
  --tags-tag-neutral-bg-hover: #35373c;
  --tags-tag-neutral-border: #3c3f44;
  --tags-tag-neutral-icon: #7d828a;
  --tags-tag-neutral-text: #adb1b8;
  --tags-tag-orange-bg: #451a03;
  --tags-tag-orange-bg-hover: #78350f;
  --tags-tag-orange-border: #78350f;
  --tags-tag-orange-icon: #b45309;
  --tags-tag-orange-text: #f59e0b;
  --tags-tag-purple-bg: #2e1064;
  --tags-tag-purple-bg-hover: #4c1d95;
  --tags-tag-purple-border: #3c3f44;
  --tags-tag-purple-icon: #6d28d9;
  --tags-tag-purple-text: #8b5cf6;
  --tags-tag-red-bg: #4c0519;
  --tags-tag-red-bg-hover: #881337;
  --tags-tag-red-border: #881337;
  --tags-tag-red-icon: #f43f5e;
  --tags-tag-red-text: #ff6369;
  /* number */
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 0.75rem;
  --radius-round: 624.9375rem;
  --stroke-button-secondary-border: #27282d;
}