Created
August 18, 2022 15:19
-
-
Save ajgagnon/b7bec34a0f343d2c42212f837cd5d96c to your computer and use it in GitHub Desktop.
SureCart CSS Variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** 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-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-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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment