lightMode

@shopify/shop-minis-platform-sdk / theme/gravity/colors/lightMode

LightModeColors

const LightModeColors: object

Type declaration

action-label-background

action-label-background: string = Palette.Poppy.L2

action-label-foreground

action-label-foreground: string = Palette.Poppy.D2

add-a-card-icon

add-a-card-icon: string = Palette.Grayscale.Black

auto-import-hero-text

auto-import-hero-text: string = Palette.Grayscale.White

background-aos-webview-disclaimer-banner

background-aos-webview-disclaimer-banner: string = Palette.Purple.L2

background-chip-1

background-chip-1: string = Palette.Purple.Primary

background-chip-7

background-chip-7: string = Palette.Grayscale.D1

backgrounds-announcement-card

backgrounds-announcement-card: string = Palette.Purple.L2

backgrounds-banner-prompt-primary

backgrounds-banner-prompt-primary: string = Palette.Purple.L2

backgrounds-brand-primary

backgrounds-brand-primary: string = Palette.Purple.L2

backgrounds-brand-secondary

backgrounds-brand-secondary: string = Palette.Brand.Sand

backgrounds-dangerous

backgrounds-dangerous: string = Palette.Poppy.D1

backgrounds-dangerous-subdued

backgrounds-dangerous-subdued: string = Palette.Poppy.L2

backgrounds-floating-tab

backgrounds-floating-tab: string = Palette.Grayscale.White

backgrounds-message-bubble-merchant

backgrounds-message-bubble-merchant: string = Palette.Purple.L2

backgrounds-overlay

backgrounds-overlay: any

backgrounds-placeholder

backgrounds-placeholder: string = Palette.Grayscale.L3

backgrounds-primary

backgrounds-primary: string = Palette.Purple.L2

backgrounds-regular

backgrounds-regular: string = Palette.Grayscale.White

backgrounds-regular-fully-transparent

backgrounds-regular-fully-transparent: any

backgrounds-regular-hover

backgrounds-regular-hover: string = Palette.Grayscale.L4

backgrounds-sash-primary

backgrounds-sash-primary: string = Palette.Purple.L3

backgrounds-shop-cash-secondary

backgrounds-shop-cash-secondary: string = Palette.Green.L3

backgrounds-subdued

backgrounds-subdued: string = Palette.Grayscale.L4

backgrounds-success

backgrounds-success: string = Palette.Green.Primary

backgrounds-success-subdued

backgrounds-success-subdued: string = Palette.Green.L1

badge-background-discounted

badge-background-discounted: string = Palette.Poppy.D1

badge-text-light

badge-text-light: string = Palette.Grayscale.White

banner-important-background

banner-important-background: string = Palette.Ochre.L1

banner-important-foreground

banner-important-foreground: string = Palette.Poppy.D2

banner-primary-close-color

banner-primary-close-color: string = Palette.Purple.L1

banner-primary-text-color

banner-primary-text-color: string = Palette.Purple.D1

bg-fill-caution

bg-fill-caution: string = Palette.Ochre.L2

bg-fill-critical

bg-fill-critical: string = Palette.Poppy.D1

bg-fill-fixed-light

bg-fill-fixed-light: string = Palette.Grayscale.White

bg-fill-secondary

bg-fill-secondary: string = Palette.Grayscale.L4

bg-loading-order-info

bg-loading-order-info: string = Palette.Grayscale.White

blurred-button-background-a00

blurred-button-background-a00: string = 'rgba(40, 40, 40, 0)'

blurred-button-background-a30

blurred-button-background-a30: string = 'rgba(40, 40, 40, 0.3)'

blurred-button-background-a40

blurred-button-background-a40: string = 'rgba(40, 40, 40, 0.4)'

blurred-recommendation-background-android

blurred-recommendation-background-android: string = 'rgba(0, 0, 0, 0.99)'

blurred-recommendation-background-ios

blurred-recommendation-background-ios: string = 'rgba(40, 40, 40, 0.3)'

border-loading-order-info

border-loading-order-info: string = Palette.Grayscale.L2

borders-regular

borders-regular: string = Palette.Grayscale.L2L

brand-badge-background

brand-badge-background: string = Palette.Purple.Primary

button-disabled-background

button-disabled-background: string = Palette.Grayscale.L4

button-disabled-foreground

button-disabled-foreground: string = Palette.Grayscale.L1

carbon-impact-asset-instagram-story-background

carbon-impact-asset-instagram-story-background: string = Palette.Purple.L1

carbon-neutral-title

carbon-neutral-title: string = Palette.Grayscale.White

carbon-offset-gradient-to

carbon-offset-gradient-to: string = '#EEEBFF'

carousel-control-active

carousel-control-active: string = Palette.Grayscale.PrimaryLight

carousel-control-inactive

carousel-control-inactive: string = Palette.Grayscale.L2

cart-indicator

cart-indicator: string = Palette.Poppy.D1

cash-badge-text

cash-badge-text: string = Palette.Green.D2

category-tile-text

category-tile-text: string = Palette.Grayscale.White

checkbox-checked

checkbox-checked: string = Palette.Grayscale.Black

checkbox-checkmark

checkbox-checkmark: string = Palette.Grayscale.White

checkbox-unchecked-border

checkbox-unchecked-border: string = Palette.Grayscale.L2

community-product-badge-text

community-product-badge-text: string = Palette.Grayscale.White

confetti-1

confetti-1: string = Palette.Purple.D1

curation-curator-foreground

curation-curator-foreground: string = Palette.Grayscale.White

dashed-border

dashed-border: string = Palette.Purple.PrimaryLight

discount-badge-background

discount-badge-background: string = Palette.Ochre.L2

discount-badge-text

discount-badge-text: string = Palette.Poppy.D2

dividers-regular

dividers-regular: string = Palette.Grayscale.L3

dividers-section

dividers-section: string = Palette.Grayscale.L4

drops-countdown-badge-gray

drops-countdown-badge-gray: string = Palette.Grayscale.L1

drops-countdown-badge-green

drops-countdown-badge-green: string = Palette.Green.D1

drops-info-registered-background

drops-info-registered-background: string = Palette.Purple.L2

drops-info-registered-border

drops-info-registered-border: string = Palette.Purple.Primary

drops-info-registered-text-button

drops-info-registered-text-button: string = Palette.Purple.Primary

email-forwarding-box

email-forwarding-box: string = '#8C83F8'

email-forwarding-list-numbers

email-forwarding-list-numbers: string = '#B1A2F4'

featured-merchant-image-text

featured-merchant-image-text: string = Palette.Grayscale.White

fixed-dark

fixed-dark: string = Palette.Grayscale.Black

fixed-dark-transparent

fixed-dark-transparent: any

fixed-light

fixed-light: string = Palette.Grayscale.White

foreground-chip

foreground-chip: string = Palette.Grayscale.White

foregrounds-contrasting

foregrounds-contrasting: string = Palette.Grayscale.White

foregrounds-contrasting-inverted

foregrounds-contrasting-inverted: string = Palette.Grayscale.Black

foregrounds-discount

foregrounds-discount: string = Palette.Poppy.D2

foregrounds-placeholder

foregrounds-placeholder: string = Palette.Grayscale.L1

foregrounds-primary

foregrounds-primary: string = Palette.Purple.Primary

foregrounds-regular

foregrounds-regular: string = Palette.Grayscale.Black

foregrounds-secondary

foregrounds-secondary: string = Palette.Grayscale.D1

foregrounds-shop-cash-secondary

foregrounds-shop-cash-secondary: string = Palette.Green.D2

foregrounds-subdued

foregrounds-subdued: string = Palette.Grayscale.PrimaryLight

google-logo

google-logo: string = '#666666'

highlight

highlight: string = 'rgba(0,0,0,0.10)'

highlight-inverted

highlight-inverted: string = 'rgba(255,255,255,0.10)'

highlights-dangerous

highlights-dangerous: string = Palette.Poppy.D1

highlights-discounted

highlights-discounted: string = Palette.Poppy.D1

highlights-primary

highlights-primary: string = Palette.Purple.Primary

highlights-success

highlights-success: string = Palette.Green.D1

highlights-success-subdued

highlights-success-subdued: string = Palette.Green.L1

image-border

image-border: string = 'rgba(0,0,0,0.06)'

image-tint

image-tint: string = 'rgba(0,0,0,0.25)'

image-tint-light

image-tint-light: string = 'rgba(0,0,0,0.05)'

inactive-button-background

inactive-button-background: string = Palette.Grayscale.L3

inactive-button-foreground

inactive-button-foreground: string = Palette.Grayscale.L1

inputs-background

inputs-background: string = Palette.Grayscale.White

inputs-background-disabled

inputs-background-disabled: string = Palette.Grayscale.L3

inputs-border

inputs-border: string = Palette.Grayscale.L2

inputs-border-color

inputs-border-color: string = Palette.Grayscale.PrimaryLight

inputs-clear-button

inputs-clear-button: string = Palette.Grayscale.L2

inputs-placeholder-text

inputs-placeholder-text: string = Palette.Grayscale.L1

logo-placeholder-background

logo-placeholder-background: string = Palette.Grayscale.D2

main-nav-tab-active

main-nav-tab-active: string = Palette.Grayscale.Black

main-nav-tab-active-foreground

main-nav-tab-active-foreground: string = Palette.Grayscale.White

main-nav-tab-inactive

main-nav-tab-inactive: string = Palette.Grayscale.PrimaryLight

mini-frame-legal-notice-text

mini-frame-legal-notice-text: string = Palette.Grayscale.L2

mini-viewer-shopping-bag-badge

mini-viewer-shopping-bag-badge: string = Palette.Grayscale.White

multiplier-badge-background

multiplier-badge-background: string = Palette.Green.D1

multiplier-badge-foreground

multiplier-badge-foreground: string = Palette.Grayscale.White

new-rating-stars-background

new-rating-stars-background: string = Palette.Grayscale.L2L

no-image-found-background

no-image-found-background: string = '#E6E6E6'

notification-highlight-background

notification-highlight-background: string = Palette.Purple.L2

notification-highlight-bar

notification-highlight-bar: string = Palette.Purple.Primary

opaque-black

opaque-black: string = 'rgba(0, 0, 0, 1)'

opaque-white

opaque-white: string = 'rgba(255, 255, 255, 1)'

outlined-button-border

outlined-button-border: string = Palette.Grayscale.L2L

popover-background

popover-background: string = Palette.Purple.Primary

price-slider-background

price-slider-background: string = Palette.Purple.PrimaryLight

price-slider-selected-background

price-slider-selected-background: string = Palette.Purple.Primary

primary-button-background

primary-button-background: string = Palette.Purple.Primary

primary-button-background-hover

primary-button-background-hover: string = Palette.Purple.D0

product-image-background

product-image-background: string = Palette.Grayscale.White

product-image-overlay

product-image-overlay: string = 'rgba(0,0,0,0.04)'

product-image-placeholder

product-image-placeholder: string = Palette.Grayscale.L2

progress-bar-completed

progress-bar-completed: string = Palette.Purple.Primary

rating-stars-background

rating-stars-background: string = Palette.Grayscale.White

rating-stars-fill

rating-stars-fill: string = Palette.Grayscale.D2

rating-stars-void

rating-stars-void: string = Palette.Grayscale.L2

reviews-search-highlights-background

reviews-search-highlights-background: string = Palette.Purple.PrimaryLight

search-input-background

search-input-background: string = Palette.Grayscale.L4

secondary-button-background-hover

secondary-button-background-hover: string = Palette.Grayscale.D2D

shadows-soft

shadows-soft: string = Palette.Grayscale.Black

sheet-background

sheet-background: string = Palette.Grayscale.White

sheet-close-button

sheet-close-button: string = Palette.Grayscale.L4

shop-cash-claiming-flow-default-background

shop-cash-claiming-flow-default-background: string = '#008552'

shop-cash-claiming-flow-transparent-dark

shop-cash-claiming-flow-transparent-dark: string = 'rgba(0, 0, 0, 0.2)'

shop-cash-claiming-flow-transparent-light

shop-cash-claiming-flow-transparent-light: string = 'rgba(255, 255, 255, 0.2)'

shop-cash-dark-button-background

shop-cash-dark-button-background: string = Palette.Grayscale.D3

shop-cash-offer-card-button-background

shop-cash-offer-card-button-background: string = Palette.Grayscale.White

shop-cash-offer-card-button-foreground

shop-cash-offer-card-button-foreground: string = Palette.Grayscale.Black

smart-onboarding-icon-background

smart-onboarding-icon-background: string = Palette.Grayscale.White

smart-onboarding-product-box-background

smart-onboarding-product-box-background: string = Palette.Grayscale.White

smart-onboarding-product-box-shadow

smart-onboarding-product-box-shadow: string = 'rgba(0,0,0,1)'

splash-shopify-logo

splash-shopify-logo: string = Palette.Grayscale.Black

sponsored-badge-background

sponsored-badge-background: string = 'rgba(0, 0, 0, 0.3)'

status-icon-dimmed

status-icon-dimmed: string = Palette.Grayscale.D1

subdued-button-background

subdued-button-background: string = Palette.Purple.PrimaryLight

subdued-button-foreground

subdued-button-foreground: string = Palette.Purple.Primary

tertiary-button-background

tertiary-button-background: string = Palette.Grayscale.L4

tertiary-button-background-hover

tertiary-button-background-hover: string = Palette.Grayscale.L2L

tertiary-button-disabled-outline

tertiary-button-disabled-outline: string = Palette.Grayscale.L2L

tertiary-button-foreground

tertiary-button-foreground: string = Palette.Grayscale.D2

text-brand

text-brand: string = Palette.Purple.Primary

text-caution

text-caution: string = Palette.Poppy.D2

text-fixed-dark

text-fixed-dark: string = Palette.Grayscale.Black

text-fixed-light

text-fixed-light: string = Palette.Grayscale.White

text-shadow-30

text-shadow-30: string = 'rgba(0,0,0,0.3)'

text-tertiary

text-tertiary: string = Palette.Grayscale.PrimaryLight

toasts-background

toasts-background: string = Palette.Purple.Primary

toasts-foreground

toasts-foreground: string = Palette.Grayscale.White

toasts-secondary

toasts-secondary: string = Palette.Purple.L2

tracker-map-fallback-background

tracker-map-fallback-background: string = Palette.Grayscale.L4

tracking-card-blurred-background

tracking-card-blurred-background: string = 'rgba(255, 255, 255, 0.7)'

tracking-info-globe-image-background

tracking-info-globe-image-background: string = '#010101'

tracking-info-white-text

tracking-info-white-text: string = Palette.Grayscale.White

tracking-item-pill-background

tracking-item-pill-background: string = Palette.Grayscale.White

tracking-item-pill-text

tracking-item-pill-text: string = Palette.Grayscale.D2

transparent

transparent: string = 'transparent'

unbranded-button-background

unbranded-button-background: string = Palette.Grayscale.D3

unbranded-button-foreground

unbranded-button-foreground: string = Palette.Grayscale.White

unverified-confirm-product-background

unverified-confirm-product-background: string = Palette.Grayscale.White