Skip to content

Instantly share code, notes, and snippets.

@ajgagnon

ajgagnon/base.css

Last active October 17, 2022 17:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ajgagnon/43de528c851bc5026f4aa33063a0319a to your computer and use it in GitHub Desktop.
Save ajgagnon/43de528c851bc5026f4aa33063a0319a to your computer and use it in GitHub Desktop.
Download ZIP
SureCart CSS variables
Raw
base.css
:root {
/** Brand */
--sc-color-brand-primary: #08BA4F;
--sc-color-brand-secondary: #2CC965;
--sc-color-brand-heading: #002E33;
--sc-color-brand-body: #45505F;
--sc-color-brand-main-background: #F2FAFC;
--sc-color-brand-content-background: #FFFFFF;
--sc-color-brand-stroke: #E7ECEE;
--sc-color-brand-subheading: #9CA7AB;
--sc-color-brand-pastel-pink: #FCF2F7;
--sc-color-brand-pastel-orange: #FEF9F6;
--sc-color-brand-pastel-purple: #F7F6FE;
--sc-color-brand-pastel-green: #E6F9EE;
/** Colors */
--sc-color-black: #000;
--sc-color-white: #fff;
--sc-color-gray-50: #f9fafb;
--sc-color-gray-100: #f3f4f6;
--sc-color-gray-200: #e5e7eb;
--sc-color-gray-300: #dce0e6;
--sc-color-gray-400: #9ca3af;
--sc-color-gray-500: #6b7280;
--sc-color-gray-600: #4b5563;
--sc-color-gray-700: #374151;
--sc-color-gray-800: #1f2937;
--sc-color-gray-900: #111827;
--sc-color-gray-950: #0d131e;
--sc-color-neutral-50: #fafafa;
--sc-color-neutral-100: whitesmoke;
--sc-color-neutral-200: #e5e5e5;
--sc-color-neutral-300: #d4d4d4;
--sc-color-neutral-400: #a3a3a3;
--sc-color-neutral-500: #737373;
--sc-color-neutral-600: #525252;
--sc-color-neutral-700: #404040;
--sc-color-neutral-800: #262626;
--sc-color-neutral-900: #171717;
--sc-color-neutral-950: #0f0f0f;
--sc-color-primary: 217;
--sc-color-primary-luminance: 60%;
--sc-color-primary-saturation: 91%;
--sc-color-primary-50: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.55), 100%));
--sc-color-primary-100: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.45), 100%));
--sc-color-primary-200: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.35), 100%));
--sc-color-primary-300: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.25), 100%));
--sc-color-primary-400: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), min(calc(var(--sc-color-primary-luminance) * 1.15), 100%));
--sc-color-primary-500: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), var(--sc-color-primary-luminance));
--sc-color-primary-600: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.9), 0%));
--sc-color-primary-700: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.75), 0%));
--sc-color-primary-800: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.6), 0%));
--sc-color-primary-900: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.35), 0%));
--sc-color-primary-950: hsl(var(--sc-color-primary), var(--sc-color-primary-saturation), max(calc(var(--sc-color-primary-luminance) * 0.2), 0%));
--sc-color-primary-text: var(--sc-color-white);
--sc-color-success-50: #f0fdf4;
--sc-color-success-100: #dcfce7;
--sc-color-success-200: #bbf7d0;
--sc-color-success-300: #86efac;
--sc-color-success-400: #4ade80;
--sc-color-success-500: #22c55e;
--sc-color-success-600: #16a34a;
--sc-color-success-700: #15803d;
--sc-color-success-800: #166534;
--sc-color-success-900: #14532d;
--sc-color-success-950: #0d381e;
--sc-color-success-text: var(--sc-color-white);
--sc-color-info-50: #eff6ff;
--sc-color-info-100: #dbeafe;
--sc-color-info-200: #bfdbfe;
--sc-color-info-300: #93c5fd;
--sc-color-info-400: #60a5fa;
--sc-color-info-500: #3b82f6;
--sc-color-info-600: #2563eb;
--sc-color-info-700: #1d4ed8;
--sc-color-info-800: #1e40af;
--sc-color-info-900: #1e3a8a;
--sc-color-info-text: var(--sc-color-white);
--sc-color-warning-50: #fffbeb;
--sc-color-warning-100: #fef3c7;
--sc-color-warning-200: #fde68a;
--sc-color-warning-300: #fcd34d;
--sc-color-warning-400: #fbbf24;
--sc-color-warning-500: #f59e0b;
--sc-color-warning-600: #d97706;
--sc-color-warning-700: #b45309;
--sc-color-warning-800: #92400e;
--sc-color-warning-900: #78350f;
--sc-color-warning-950: #4d220a;
--sc-color-warning-text: var(--sc-color-white);
--sc-color-danger-50: #fef2f2;
--sc-color-danger-100: #fee2e2;
--sc-color-danger-200: #fecaca;
--sc-color-danger-300: #fca5a5;
--sc-color-danger-400: #f87171;
--sc-color-danger-500: #ef4444;
--sc-color-danger-600: #dc2626;
--sc-color-danger-700: #b91c1c;
--sc-color-danger-800: #991b1b;
--sc-color-danger-900: #7f1d1d;
--sc-color-danger-950: #481111;
--sc-color-danger-text: var(--sc-color-white);
--sc-border-radius-small: 0.15em;
--sc-border-radius-medium: 0.25em;
--sc-border-radius-large: 0.5em;
--sc-border-radius-x-large: 0.75em;
--sc-border-radius-circle: 50%;
--sc-border-radius-pill: 9999px;
--sc-shadow-x-small: 0 1px 0 #0d131e0d;
--sc-shadow-small: 0 1px 2px #0d131e1a;
--sc-shadow-medium: 0 0 #000,0 0 #000,0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--sc-shadow-large: 0 2px 8px #0d131e1a;
--sc-shadow-x-large: 0 4px 16px #0d131e1a;
--sc-spacing-xxx-small: 0.125em;
--sc-spacing-xx-small: 0.25em;
--sc-spacing-x-small: 0.5em;
--sc-spacing-small: 0.75em;
--sc-spacing-medium: 1em;
--sc-spacing-large: 1.25em;
--sc-spacing-x-large: 1.75em;
--sc-spacing-xx-large: 2.25em;
--sc-spacing-xxx-large: 3em;
--sc-spacing-xxxx-large: 4.5em;
--sc-transition-x-slow: 1000ms;
--sc-transition-slow: 500ms;
--sc-transition-medium: 250ms;
--sc-transition-fast: 150ms;
--sc-transition-x-fast: 50ms;
--sc-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--sc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--sc-font-serif: Georgia, 'Times New Roman', serif;
--sc-font-size-xx-small: 0.625em;
--sc-font-size-x-small: 0.75em;
--sc-font-size-small: 0.875em;
--sc-font-size-medium: 1em;
--sc-font-size-large: 1.15em;
--sc-font-size-x-large: 1.25em;
--sc-font-size-xx-large: 1.45em;
--sc-font-size-xxx-large: 3em;
--sc-font-size-xxxx-large: 4.5em;
--sc-font-weight-light: 300;
--sc-font-weight-normal: 400;
--sc-font-weight-semibold: 500;
--sc-font-weight-bold: 600;
--sc-letter-spacing-dense: -0.015em;
--sc-letter-spacing-normal: normal;
--sc-letter-spacing-loose: 0.075em;
--sc-line-height-dense: 1.4;
--sc-line-height-normal: 1.8;
--sc-line-height-loose: 2.2;
--sc-focus-ring-color-primary: var(--sc-color-primary-500);
--sc-focus-ring-color-success: #22c55e54;
--sc-focus-ring-color-info: #6b728054;
--sc-focus-ring-color-warning: #f59e0b54;
--sc-focus-ring-color-danger: #ef444454;
--sc-focus-ring-width: 1px;
--sc-button-font-size-small: var(--sc-font-size-x-small);
--sc-button-font-size-medium: var(--sc-font-size-medium);
--sc-button-font-size-large: var(--sc-font-size-large);
--sc-column-spacing: var(--sc-spacing-xx-large);
--sc-form-row-spacing: var(--sc-spacing-small);
--sc-form-row-spacing-large: var(--sc-spacing-xx-large);
--sc-form-title-font-weight: var(--sc-font-weight-semibold);
--sc-form-title-font-size: var(--sc-font-size-x-large);
--sc-form-title-description-color: var(--sc-color-gray-500);
--sc-form-title-description-size: var(--sc-font-size-medium);
--sc-choice-background-color: var(--sc-color-white);
--sc-card-border: solid 1px var(--sc-input-border-color);
--sc-choice-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
--sc-choice-box-shadow: var(--sc-input-box-shadow);
--sc-drawer-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
--sc-drawer-header-spacing: var(--sc-spacing-large);
--sc-drawer-body-spacing: var(--sc-spacing-large);
--sc-drawer-footer-spacing: var(--sc-spacing-large);
--sc-input-box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
--sc-input-height-small: 2.25em;
--sc-input-height-medium: 2.8em;
--sc-input-height-large: 3.0em;
--sc-input-background-color: var(--sc-color-white);
--sc-input-background-color-hover: var(--sc-color-white);
--sc-input-background-color-focus: var(--sc-color-white);
--sc-input-background-color-disabled: var(--sc-color-gray-100);
--sc-input-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
--sc-input-border-color: var(--sc-color-gray-300);
--sc-input-border-color-hover: var(--sc-color-gray-400);
--sc-input-border-color-focus: var(--sc-color-primary-500);
--sc-input-border-color-disabled: var(--sc-color-gray-300);
--sc-input-border-color-invalid: var(--sc-color-danger-500);
--sc-input-border-width: 1px;
--sc-input-border-radius-small: var(--sc-border-radius-small);
--sc-input-border-radius-medium: var(--sc-border-radius-medium);
--sc-input-border-radius-large: var(--sc-border-radius-medium);
--sc-input-font-family: var(--sc-font-sans);
--sc-input-font-weight: var(--sc-font-weight-normal);
--sc-input-font-size-small: var(--sc-font-size-small);
--sc-input-font-size-medium: var(--sc-font-size-medium);
--sc-input-font-size-large: var(--sc-font-size-large);
--sc-input-label-font-weight: var(--sc-font-weight-semibold);
--sc-input-label-margin: var(--sc-spacing-xx-small);
--sc-input-letter-spacing: var(--sc-letter-spacing-normal);
--sc-input-color: var(--sc-color-gray-700);
--sc-input-color-hover: var(--sc-color-gray-700);
--sc-input-color-focus: var(--sc-color-gray-700);
--sc-input-color-disabled: var(--sc-color-gray-900);
--sc-input-icon-color: var(--sc-color-gray-400);
--sc-input-icon-color-hover: var(--sc-color-gray-600);
--sc-input-icon-color-focus: var(--sc-color-gray-600);
--sc-input-placeholder-color: var(--sc-color-gray-400);
--sc-input-placeholder-color-disabled: var(--sc-color-gray-600);
--sc-input-spacing-small: var(--sc-spacing-small);
--sc-input-spacing-medium: var(--sc-spacing-medium);
--sc-input-spacing-large: var(--sc-spacing-large);
--sc-input-label-font-size-small: var(--sc-font-size-small);
--sc-input-label-font-size-medium: var(--sc-font-size-medium);
--sc-input-label-font-size-large: var(--sc-font-size-large);
--sc-input-label-color: var(--sc-color-gray-600);
--sc-input-help-text-font-size-small: var(--sc-font-size-x-small);
--sc-input-help-text-font-size-medium: var(--sc-font-size-small);
--sc-input-help-text-font-size-large: var(--sc-font-size-medium);
--sc-input-help-text-color: var(--sc-color-gray-500);
--sc-input-error-text-font-size-small: var(--sc-input-help-text-font-size-small);
--sc-input-error-text-font-size-medium: var(--sc-input-help-text-font-size-small);
--sc-input-error-text-font-size-large: var(--sc-input-help-text-font-size-small);
--sc-input-error-text-color: var(--sc-color-danger-500);
--sc-toggle-size: 1em;
--sc-toggle-shady-color: var(--sc-color-gray-50);
--sc-radio-size: 1em;
--sc-checkbox-size: 1em;
--sc-overlay-background-color: #37415180;
--sc-panel-background-color: var(--sc-color-white);
--sc-panel-border-color: var(--sc-color-gray-200);
--sc-tooltip-border-radius: var(--sc-border-radius-medium);
--sc-tooltip-background-color: var(--sc-color-gray-900);
--sc-tooltip-color: var(--sc-color-white);
--sc-tooltip-font-family: var(--sc-font-sans);
--sc-tooltip-font-weight: var(--sc-font-weight-normal);
--sc-tooltip-font-size: var(--sc-font-size-small);
--sc-tooltip-line-height: var(--sc-line-height-dense);
--sc-tooltip-padding: var(--sc-spacing-xx-small) var(--sc-spacing-x-small);
--sc-tooltip-arrow-size: 5px;
--sc-tooltip-arrow-start-end-offset: 8px;
--sc-quantity-control-height: 2em;
--sc-z-index-drawer: 99999;
--sc-z-index-dialog: 100000;
--sc-z-index-dropdown: 900;
--sc-z-index-toast: 950;
--sc-z-index-tooltip: 1000;
--sc-checkout-columns: 1;
--sc-dashboard-module-spacing: var(--sc-spacing-x-small);
--sc-border-width-zero: 0px;
}
[hidden] {
display: none !important;
}
.sc-scroll-lock {
overflow: hidden !important;
}
.surecart-theme-dark {
/** Let's make these less blue for basic dark mode **/
--sc-color-gray-50: var(--sc-color-neutral-50);
--sc-color-gray-100: var(--sc-color-neutral-100);
--sc-color-gray-200: var(--sc-color-neutral-200);
--sc-color-gray-300: var(--sc-color-neutral-300);
--sc-color-gray-400: var(--sc-color-neutral-400);
--sc-color-gray-500: var(--sc-color-neutral-500);
--sc-color-gray-600: var(--sc-color-neutral-600);
--sc-color-gray-700: var(--sc-color-neutral-700);
--sc-color-gray-800: var(--sc-color-neutral-800);
--sc-color-gray-900: var(--sc-color-neutral-900);
--sc-color-gray-950: var(--sc-color-neutral-950);
/* Inputs */
--sc-input-label-color: var(--sc-color-gray-300);
--sc-input-background-color: var(--sc-color-gray-900);
--sc-input-background-color-hover: var(--sc-color-gray-900);
--sc-input-background-color-focus: var(--sc-color-gray-900);
--sc-input-background-color-disabled: var(--sc-color-gray-800);
--sc-input-border-color-hover: var(--sc-color-gray-600);
--sc-input-border-color-focus: var(--sc-color-gray-500);
--sc-input-border-color-disabled: var(--sc-color-gray-200);
--sc-input-border-color-invalid: var(--sc-color-danger-500);
--sc-input-font-family: var(--sc-font-sans);
--sc-input-font-weight: var(--sc-font-weight-normal);
--sc-input-font-size-small: var(--sc-font-size-small);
--sc-input-font-size-medium: var(--sc-font-size-medium);
--sc-input-font-size-large: var(--sc-font-size-large);
--sc-input-letter-spacing: var(--sc-letter-spacing-normal);
--sc-input-border-color: var(--sc-color-gray-700);
--sc-input-border-color-hover: var(--sc-color-gray-600);
--sc-input-border-color-focus: var(--sc-color-primary-500);
--sc-input-border-color-disabled: var(--sc-color-gray-700);
--sc-input-border-color-invalid: var(--sc-color-danger-500);
--sc-input-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
--sc-input-color: var(--sc-color-gray-200);
--sc-input-color-hover: var(--sc-color-gray-200);
--sc-input-color-focus: var(--sc-color-gray-200);
--sc-input-color-disabled: var(--sc-color-gray-100);
--sc-input-color-invalid: var(--sc-color-danger-600);
--sc-input-icon-color: var(--sc-color-gray-500);
--sc-input-icon-color-hover: var(--sc-color-gray-300);
--sc-input-icon-color-focus: var(--sc-color-gray-300);
--sc-input-placeholder-color: var(--sc-color-gray-500);
--sc-input-placeholder-color-disabled: var(--sc-color-gray-400);
--sc-input-help-text-color: var(--sc-color-gray-400);
--sc-list-row-background-color: var(--sc-color-gray-950);
--sc-badge-notice-background-color: var(--sc-color-gray-950);
--sc-divider-text-background-color: var(--sc-color-gray-900);
--sc-badge-notice-text-color: var(--sc-color-gray-300);
--sc-list-row-color: var(--sc-color-gray-300);
--sc-empty-color: var(--sc-color-gray-300);
--sc-empty-icon-color: var(--sc-color-gray-300);
--sc-tab-active-background: var(--sc-color-gray-800);
--sc-menu-item-color: var(--sc-color-gray-300);
--sc-line-item-title-color: var(--sc-color-gray-300);
--sc-order-summary-color: var(--sc-color-gray-300);
--sc-order-collapse-link-icon-color: var(--sc-color-gray-300);
--sc-input-control-background-color: var(--sc-color-gray-900);
--sc-block-ui-background-color: var(--sc-color-gray-800);
--sc-select-background-color: var(--sc-color-gray-900);
--sc-input-background-color: var(--sc-color-gray-900);
--sc-button-default-background-color: var(--sc-color-gray-900);
--sc-button-default-hover-background-color: var(--sc-color-gray-900);
--sc-button-default-active-background-color: var(--sc-button-default-hover-background-color);
--sc-button-default-focus-background-color: var(--sc-button-default-hover-background-color);
--sc-button-default-active-border-color: var(--sc-color-gray-600);
--sc-button-default-focus-border-color: var(--sc-color-gray-600);
--sc-toggle-background-color: var(--sc-color-gray-950);
--sc-card-background-color: var(--sc-color-gray-950);
--sc-table-cell-background-color: var(--sc-color-gray-800);
--sc-alert-background-color: var(--sc-color-gray-800);
--sc-alert-title-color: var(--sc-color-white);
--sc-input-control-color: var(--sc-color-gray-300);
--sc-alert-primary-color: var(--sc-color-gray-300);
--sc-alert-info-color: var(--sc-color-gray-300);
--sc-alert-danger-color: var(--sc-color-gray-300);
--sc-alert-warning-color: var(--sc-color-gray-300);
--sc-alert-success-color: var(--sc-color-gray-300);
--sc-alert-primary-title-color: var(--sc-color-gray-300);
--sc-alert-info-title-color: var(--sc-color-gray-300);
--sc-alert-danger-title-color: var(--sc-color-gray-300);
--sc-alert-warning-title-color: var(--sc-color-gray-300);
--sc-alert-success-title-color: var(--sc-color-gray-300);
--sc-breadcrumb-item-label-color: var(--sc-color-gray-300);
--sc-breadcrumb-item-label-active-color: var(--sc-color-gray-200);
--sc-button-default-color: var(--sc-color-gray-300);
--sc-breadcrumb-color: var(--sc-color-gray-300);
--sc-stacked-list-row-text-color: var(--sc-color-gray-300);
--sc-order-confirmation-color: var(--sc-color-gray-300);
--sc-card-boderless-border-color: var(--sc-color-gray-600);
--sc-select-border-color: var(--sc-color-gray-600);
--sc-button-default-border-color: var(--sc-color-gray-600);
--sc-stacked-list-border-color: var(--sc-color-gray-600);
--sc-divider-border-top-color: var(--sc-color-gray-600);
--sc-input-border-color: var(--sc-color-gray-600);
--sc-table-border-bottom-color: var(--sc-color-gray-600);
--sc-toggle-border-color: var(--sc-color-gray-600);
--sc-toggle-shady-color: var(--sc-color-gray-800);
--sc-table-row-border-bottom-color: var(--sc-color-gray-600);
--sc-badge-notice-border-color: var(--sc-color-gray-600);
--sc-stacked-list-row-hover-color: var(--sc-color-gray-800);
--sc-skeleton-color: var(--sc-color-gray-800);
--sc-skeleton-sheen-color: var(--sc-color-gray-700);
--sc-switch-background-thumb-color: var(--sc-color-gray-900);
--sc-switch-background-thumb-hover-color: var(--sc-color-gray-900);
--sc-swith-label-color: var(--sc-color-gray-300);
--sc-switch-description-color: var(--sc-color-gray-400);
--sc-switch-control-background-color: var(--sc-color-gray-700);
--sc-switch-border-color: var(--sc-color-gray-700);
--sc-switch-control-hover-background-color: var(--sc-color-gray-600);
--sc-switch-control-hover-border-color: var(--sc-color-gray-600);
--sc-switch-checked-control-background-color: var(--sc-color-primary-600);
--sc-switch-checked-control-border-color: var(--sc-color-primary-600);
/* Overlays */
--sc-overlay-background-color: #d1d5db22;
/* Panels */
--sc-panel-background-color: var(--sc-color-gray-900);
--sc-panel-border-color: var(--sc-color-gray-800);
/* Tooltips */
--sc-tooltip-background-color: var(--sc-color-gray-200);
--sc-tooltip-color: var(--sc-color-black);
/* Choice */
--sc-choice-background-color: var(--sc-color-gray-900);
--sc-choice-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
/** Stripe */
--sc-stripe-color-logo: 'dark';
--sc-stripe-color-tag: 'dark';
--sc-stripe-color-logo-tab-selected: 'dark';
--sc-stripe-color-tab-selected: 'dark';
/** Drawer **/
--sc-drawer-border: solid var(--sc-input-border-width) var(--sc-input-border-color);
/** Cart **/
--sc-cart-counter-background: var(--sc-color-gray-50);
--sc-cart-counter-color: var(--sc-color-gray-950);
}
sc-button-group:not([separate]) > sc-button:first-child::part(base),
sc-button-group:not([separate]) > sc-dropdown:first-child > sc-button[slot='trigger']::part(base),
sc-button-group:not([separate]) > sc-tooltip:first-child > sc-button::part(base) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
sc-button-group:not([separate]) > sc-button:last-child::part(base),
sc-button-group:not([separate]) > sc-dropdown:last-child > sc-button[slot='trigger']::part(base),
sc-button-group:not([separate]) > sc-tooltip:last-child > sc-button::part(base) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
sc-button-group:not([separate]) > sc-button:not(:first-child):not(:last-child)::part(base),
sc-button-group:not([separate]) > sc-dropdown:not(:first-child):not(:last-child) > sc-button[slot='trigger']::part(base),
sc-button-group:not([separate]) > sc-tooltip:not(:first-child):not(:last-child) > sc-button::part(base) {
border-radius: 0;
}
sc-button-group:not([separate]) > sc-button:not(:first-child),
sc-button-group:not([separate]) > sc-dropdown:not(:first-child) > sc-button[slot='trigger'],
sc-button-group:not([separate]) > sc-tooltip:not(:first-child) > sc-button {
margin-left: calc(-1 * var(--sc-input-border-width));
}
sc-button-group > sc-button:not(:first-child):not([type='default'])::part(base):not(:hover):not(:active):not(:focus):after,
sc-button-group > sc-dropdown:not(:first-child) > sc-button[slot='trigger']:not([type='default'])::part(base):not(:hover):not(:active):not(:focus):after,
sc-button-group > sc-tooltip:not(:first-child) > sc-button:not([type='default'])::part(base):not(:hover):not(:active):not(:focus):after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
border-left: solid 1px #ffffff40;
}
sc-button-group > sc-button:hover,
sc-button-group > sc-dropdown:hover > sc-button[slot='trigger'],
sc-button-group > sc-tooltip:hover > sc-button {
z-index: 1;
}
sc-button-group > sc-button.sc-focus,
sc-button-group > sc-dropdown > sc-button[slot='trigger'].sc-focus,
sc-button-group > sc-tooltip > sc-button.sc-focus {
z-index: 2;
}
/* Avatar */
.surecart-theme-dark sc-table {
color: var(--sc-color-gray-300);
}
/* Avatar */
.surecart-theme-dark sc-avatar::part(base) {
background-color: var(--sc-color-gray-700);
color: var(--sc-color-gray-300);
}
/* Button */
.surecart-theme-dark sc-button[type='default']::part(base) {
background-color: var(--sc-color-gray-900);
border-color: var(--sc-color-gray-700);
color: var(--sc-color-gray-400);
}
.surecart-theme-dark sc-button[type='default']:not([disabled])::part(base):hover {
background-color: var(--sc-color-primary-950);
border-color: var(--sc-color-primary-800);
color: var(--sc-color-primary-500);
}
.surecart-theme-dark sc-button[type='default']:not([disabled])::part(base):focus {
background-color: var(--sc-color-primary-950);
border-color: var(--sc-color-primary-800);
color: var(--sc-color-primary-500);
box-shadow: 0 0 0 var(--sc-focus-ring-width) hsla(var(--sc-color-primary-hue), var(--sc-color-primary-saturation), 50%, var(--sc-focus-ring-alpha));
}
.surecart-theme-dark sc-button[type='default']:not([disabled])::part(base):active {
background-color: var(--sc-color-primary-900);
border-color: var(--sc-color-primary-700);
color: var(--sc-color-primary-300);
}
.surecart-theme-dark sc-button[type='text']::part(base) {
color: var(--sc-color-gray-400);
}
.surecart-theme-dark sc-button[type='text']:not([disabled])::part(base):active,
.surecart-theme-dark sc-button[type='text']:not([disabled])::part(base):hover,
.surecart-theme-dark sc-button[type='text']:not([disabled])::part(base):focus {
color: var(--sc-color-gray-300);
}
/* Card */
.surecart-theme-dark sc-card::part(base) {
background-color: var(--sc-color-gray-900);
--border-color: var(--sc-color-gray-800);
}
/* Color picker */
.surecart-theme-dark sc-color-picker::part(format-button) {
background-color: var(--sc-color-gray-900);
border-color: var(--sc-color-gray-700);
color: var(--sc-color-gray-400);
}
.surecart-theme-dark sc-color-picker::part(format-button):hover {
background-color: var(--sc-color-primary-950);
border-color: var(--sc-color-primary-800);
color: var(--sc-color-primary-500);
}
.surecart-theme-dark sc-color-picker::part(format-button):focus {
background-color: var(--sc-color-primary-950);
border-color: var(--sc-color-primary-800);
color: var(--sc-color-primary-500);
box-shadow: 0 0 0 var(--sc-focus-ring-width) hsla(var(--sc-color-primary-hue), var(--sc-color-primary-saturation), 50%, var(--sc-focus-ring-alpha));
}
.surecart-theme-dark sc-color-picker::part(format-button):active {
background-color: var(--sc-color-primary-900);
border-color: var(--sc-color-primary-700);
color: var(--sc-color-primary-300);
}
.surecart-theme-dark sc-color-picker::part(panel) {
background-color: var(--sc-color-gray-900);
border-color: var(--sc-color-gray-800);
}
.surecart-theme-dark sc-color-picker::part(slider-handle) {
background-color: var(--sc-color-gray-800);
box-shadow: 0 0 0 1px var(--sc-color-gray-600);
}
.surecart-theme-dark sc-color-picker::part(slider-handle):focus {
box-shadow: 0 0 0 1px var(--sc-color-primary-500), 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);
}
.surecart-theme-dark sc-color-picker::part(grid-handle) {
border-color: var(--sc-color-gray-900);
}
.surecart-theme-dark sc-color-picker::part(preview),
.surecart-theme-dark sc-color-picker::part(opacity-slider),
.surecart-theme-dark sc-color-picker::part(trigger) {
background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(45deg, transparent 75%, #333 75%),
linear-gradient(45deg, #333 25%, transparent 25%);
}
.surecart-theme-dark sc-color-picker::part(swatches) {
border-top-color: var(--sc-color-gray-800);
}
/* Details */
.surecart-theme-dark sc-details::part(base) {
border-color: var(--sc-color-gray-800);
}
/* Icon button */
.surecart-theme-dark sc-icon-button::part(base) {
color: var(--sc-color-gray-400);
}
.surecart-theme-dark sc-icon-button:not([disabled])::part(base):hover,
.surecart-theme-dark sc-icon-button:not([disabled])::part(base):focus {
color: var(--sc-color-primary-500);
}
.surecart-theme-dark sc-icon-button:not([disabled])::part(base):active {
color: var(--sc-color-primary-500);
}
/* Image comparer */
.surecart-theme-dark sc-image-comparer::part(divider),
.surecart-theme-dark sc-image-comparer::part(handle) {
background-color: var(--sc-color-gray-900);
color: var(--sc-color-gray-400);
}
/* Menu item */
.surecart-theme-dark sc-menu-item::part(base) {
color: var(--sc-color-gray-200);
}
.surecart-theme-dark sc-menu-item::part(base):focus {
background-color: var(--sc-color-primary-600);
color: var(--sc-color-white);
}
.surecart-theme-dark sc-menu-item[disabled]::part(base) {
color: var(--sc-color-gray-600);
}
/* Menu label */
.surecart-theme-dark sc-menu-label::part(base) {
color: var(--sc-color-gray-600);
}
/* Progress bar */
.surecart-theme-dark sc-progress-bar::part(base) {
background-color: var(--sc-color-gray-800);
}
.surecart-theme-dark sc-progress-bar::part(indicator) {
color: var(--sc-color-gray-900);
}
/* Progress ring */
.surecart-theme-dark sc-progress-ring::part(base) {
--track-color: var(--sc-color-gray-800);
}
/* Range */
.surecart-theme-dark sc-range {
--track-color: var(--sc-color-gray-800);
}
/* Rating */
.surecart-theme-dark sc-rating {
--symbol-color: var(--sc-color-gray-700);
}
/* Select */
.surecart-theme-dark sc-select::part(tag) {
background-color: var(--sc-color-info-800);
border-color: var(--sc-color-info-700);
color: var(--sc-color-info-300);
}
/* Spinner */
.surecart-theme-dark sc-spinner {
--track-color: #f9fafb20;
}
/* Secure notice */
.surecart-theme-dark sc-secure-notice::part(icon) {
color: var(--sc-color-gray-700);
}
.surecart-theme-dark sc-secure-notice::part(text) {
color: var(--sc-color-gray-400);
}
/* Tab group */
.surecart-theme-dark sc-tab-group::part(tabs) {
--tabs-border-color: var(--sc-color-gray-800);
}
/* Tab */
.surecart-theme-dark sc-tab::part(base) {
color: var(--sc-color-gray-400);
}
.surecart-theme-dark sc-tab:not([disabled])::part(base):hover,
.surecart-theme-dark sc-tab[active]::part(base) {
color: var(--sc-color-primary-500);
}
/* Tag */
.surecart-theme-dark sc-tag[type='primary']::part(base) {
background-color: var(--sc-color-primary-950);
border-color: var(--sc-color-primary-900);
color: var(--sc-color-primary-300);
}
.surecart-theme-dark sc-tag[type='success']::part(base) {
background-color: var(--sc-color-success-950);
border-color: var(--sc-color-success-900);
color: var(--sc-color-success-300);
}
.surecart-theme-dark sc-tag[type='info']::part(base) {
background-color: var(--sc-color-info-800);
border-color: var(--sc-color-info-700);
color: var(--sc-color-info-300);
}
.surecart-theme-dark sc-tag[type='warning']::part(base) {
background-color: var(--sc-color-warning-950);
border-color: var(--sc-color-warning-900);
color: var(--sc-color-warning-300);
}
.surecart-theme-dark sc-tag[type='danger']::part(base) {
background-color: var(--sc-color-danger-950);
border-color: var(--sc-color-danger-900);
color: var(--sc-color-danger-300);
}
.surecart-theme-dark sc-form-section::part(title) {
color: var(--sc-color-white);
}
.surecart-theme-dark sc-form-section::part(description) {
color: var(--sc-color-gray-400);
}
.surecart-theme-dark sc-heading,
.surecart-theme-dark sc-form-row,
.surecart-theme-dark sc-form-control,
.surecart-theme-dark sc-menu-label,
.surecart-theme-dark sc-customer-details,
.surecart-theme-dark .menu-item,
.surecart-theme-dark sc-column,
.surecart-theme-dark paypal-buttons,
.surecart-theme-dark sc-stacked-list,
.surecart-theme-dark sc-stripe-element,
.surecart-theme-dark sc-stripe-payment-element,
.surecart-theme-dark sc-stripe-payment-request,
.surecart-theme-dark sc-text,
.surecart-theme-dark sc-card,
.surecart-theme-dark sc-tooltip,
.surecart-theme-dark sc-tag-panel,
.surecart-theme-dark sc-toggles,
.surecart-theme-dark sc-dashboard-module,
.surecart-theme-dark entry-title,
.surecart-theme-dark sc-toggle,
.surecart-theme-dark sc-tab-group,
.surecart-theme-dark sc-login-form
{
color: var(--sc-color-gray-300);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment