Tất cả các biến

Đơn hàng #1024Đã thanh toán

3 sản phẩm, sẵn sàng giao

Xử lý đơn hàng

Di chuột hoặc focus vào một biến để xem card dùng nó ở đâu. Nhấp để sao chép.

Tìm biến

Giao diện

Sao chép dạng

708 biến

Màu: nền

Màu: chữ

Màu: viền

Màu: icon

Màu: khác

Khoảng cách

• --p-space-00rem
• --p-space-025.0625rem
• --p-space-050.125rem
• --p-space-100.25rem
• --p-space-150.375rem
• --p-space-200.5rem
• --p-space-250.625rem
• --p-space-300.75rem
• --p-space-4001rem
• --p-space-5001.25rem
• --p-space-6001.5rem
• --p-space-7001.75rem
• --p-space-8002rem
• --p-space-10002.5rem
• --p-space-12003rem
• --p-space-16004rem
• --p-space-20005rem
• --p-space-24006rem
• --p-space-28007rem
• --p-space-32008rem
• --p-space-badge-icon-padding-inline-startvar(--p-space-100)
• --p-space-badge-icon-padding-inline-start-large.25rem
• --p-space-badge-padding-inline.375rem
• --p-space-badge-padding-inline-largevar(--p-space-200)
• --p-space-button-group-gapvar(--p-space-200)
• --p-space-card-gapvar(--p-space-400)
• --p-space-card-paddingvar(--p-space-400)
• --p-space-choice-margin.0625rem
• --p-space-choice-size.875rem
• --p-space-table-cell-paddingvar(--p-space-150)

Bo góc

• --p-border-radius-00rem
• --p-border-radius-050.125rem
• --p-border-radius-100.25rem
• --p-border-radius-150.375rem
• --p-border-radius-200.5rem
• --p-border-radius-300.75rem
• --p-border-radius-4001rem
• --p-border-radius-5001.25rem
• --p-border-radius-7501.875rem
• --p-border-radius-actionvar(--p-border-radius-full)
• --p-border-radius-avatarclamp(.375rem, 30%, .75rem)
• --p-border-radius-banner-inner.75rem
• --p-border-radius-checkbox.25rem
• --p-border-radius-checkbox-checkedcalc(var(--p-border-radius-checkbox) + .0625rem)
• --p-border-radius-container1.25rem
• --p-border-radius-content-highlight.125rem
• --p-border-radius-control.625rem
• --p-border-radius-control-inner.375rem
• --p-border-radius-corner-shapesuperellipse(1.333)
• --p-border-radius-dialog1.25rem
• --p-border-radius-element.5rem
• --p-border-radius-focus.25rem
• --p-border-radius-full624.9375rem
• --p-border-radius-mediaclamp(.25rem, 25%, .5rem)
• --p-border-radius-media-compact.25rem
• --p-border-radius-option-item.5rem
• --p-border-radius-popover.75rem
• --p-border-radius-previewvar(--p-border-radius-full)
• --p-border-radius-tag.375rem
• --p-border-radius-tag-inner.25rem
• --p-border-radius-tag-seam.125rem

Độ dày viền

• --p-border-width-00rem
• --p-border-width-025.0625rem
• --p-border-width-050.125rem
• --p-border-width-100.25rem
• --p-border-width-0165.04125rem
• --p-border-width-outline-input-focusnone

Font

• --p-font-family-monoui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospaceThe quick brown fox
• --p-font-family-sans"ShopifyInter", "Noto Sans Arabic", "Noto Sans Hebrew", ui-sans-serif, system-ui, sans-serifThe quick brown fox
• --p-font-feature-settings'calt' on, 'ss03' on, 'cv09' on, 'cv02' on, 'cv03' on, 'cv04' on0123 Il1 ag
• --p-font-letter-spacing-body-largevar(--p-font-letter-spacing-normal)Letter spacing
• --p-font-letter-spacing-body-mediumvar(--p-font-letter-spacing-denser)Letter spacing
• --p-font-letter-spacing-body-smallvar(--p-font-letter-spacing-dense)Letter spacing
• --p-font-letter-spacing-body-x-small0remLetter spacing
• --p-font-letter-spacing-dense-.005emLetter spacing
• --p-font-letter-spacing-denser-.01emLetter spacing
• --p-font-letter-spacing-densest-.02emLetter spacing
• --p-font-letter-spacing-display-largevar(--p-font-letter-spacing-densest)Letter spacing
• --p-font-letter-spacing-display-mediumvar(--p-font-letter-spacing-densest)Letter spacing
• --p-font-letter-spacing-display-smallvar(--p-font-letter-spacing-densest)Letter spacing
• --p-font-letter-spacing-heading-largevar(--p-font-letter-spacing-denser)Letter spacing
• --p-font-letter-spacing-heading-mediumvar(--p-font-letter-spacing-denser)Letter spacing
• --p-font-letter-spacing-heading-smallvar(--p-font-letter-spacing-dense)Letter spacing
• --p-font-letter-spacing-normal0remLetter spacing
• --p-font-line-height-300.75remAa
• --p-font-line-height-4001remAa
• --p-font-line-height-5001.25remAa
• --p-font-line-height-6001.5remAa
• --p-font-line-height-7001.75remAa
• --p-font-line-height-8002remAa
• --p-font-line-height-10002.5remAa
• --p-font-line-height-12003remAa
• --p-font-line-height-body-large1.375remAa
• --p-font-line-height-body-medium1.25remAa
• --p-font-line-height-body-small1.125remAa
• --p-font-line-height-body-x-small.875remAa
• --p-font-line-height-button-label1remAa
• --p-font-line-height-details-text1remAa
• --p-font-line-height-display-large2.25remAa
• --p-font-line-height-display-medium2remAa
• --p-font-line-height-display-small1.75remAa
• --p-font-line-height-heading-large1.375remAa
• --p-font-line-height-heading-medium1.25remAa
• --p-font-line-height-heading-small1.125remAa
• --p-font-line-height-input-label1.25remAa
• --p-font-line-height-input-label-small1remAa
• --p-font-line-height-input-value1.25remAa
• --p-font-size-275.6875remAa
• --p-font-size-300.75remAa
• --p-font-size-325.8125remAa
• --p-font-size-350.875remAa
• --p-font-size-4001remAa
• --p-font-size-4501.125remAa
• --p-font-size-5001.25remAa
• --p-font-size-5501.375remAa
• --p-font-size-6001.5remAa
• --p-font-size-7501.875remAa
• --p-font-size-8002remAa
• --p-font-size-9002.25remAa
• --p-font-size-10002.5remAa
• --p-font-size-adjust-input-valuenoneAa
• --p-font-size-adjust-input-value-arabicnoneAa
• --p-font-size-adjust-input-value-hebrewnoneAa
• --p-font-size-avatar-initialsvar(--p-font-size-400)Aa
• --p-font-size-avatar-initials-longvar(--p-font-size-300)Aa
• --p-font-size-body-large.9375remAa
• --p-font-size-body-medium.8125remAa
• --p-font-size-body-small.75remAa
• --p-font-size-body-x-small.6875remAa
• --p-font-size-button-label.75remAa
• --p-font-size-details-text.75remAa
• --p-font-size-display-large1.8125remAa
• --p-font-size-display-medium1.625remAa
• --p-font-size-display-small1.375remAa
• --p-font-size-heading-large.9375remAa
• --p-font-size-heading-medium.8125remAa
• --p-font-size-heading-small.75remAa
• --p-font-size-input-label.8125remAa
• --p-font-size-input-label-small.75remAa
• --p-font-size-input-value.8125remAa
• --p-font-weight-bold600Aa
• --p-font-weight-button-labelvar(--p-font-weight-medium)Aa
• --p-font-weight-details-textvar(--p-font-weight-regular)Aa
• --p-font-weight-display-largevar(--p-font-weight-medium)Aa
• --p-font-weight-display-mediumvar(--p-font-weight-medium)Aa
• --p-font-weight-display-smallvar(--p-font-weight-medium)Aa
• --p-font-weight-heading-largevar(--p-font-weight-medium)Aa
• --p-font-weight-heading-mediumvar(--p-font-weight-medium)Aa
• --p-font-weight-heading-smallvar(--p-font-weight-medium)Aa
• --p-font-weight-input-labelvar(--p-font-weight-medium)Aa
• --p-font-weight-input-label-smallvar(--p-font-weight-regular)Aa
• --p-font-weight-medium500Aa
• --p-font-weight-regular400Aa
• --p-font-weight-semibold600Aa

Đổ bóng

• --p-shadow-0none
• --p-shadow-100
  Xem giá trị

  0rem .3125rem .3125rem -.15625rem rgba(0, 0, 0, .03), 0rem .1875rem .1875rem -.09375rem #00000005, 0rem .125rem .125rem -.0625rem #00000005, 0rem .0625rem .0625rem -.03125rem #00000008, 0rem .03125rem .03125rem 0rem #0000000a, 0rem 0rem 0rem .0625rem #0000000f
• --p-shadow-200
  Xem giá trị

  0rem .5rem .625rem -.3125rem rgba(0, 0, 0, .08), 0rem .3125rem .3125rem -.15625rem #00000008, 0rem .1875rem .1875rem -.09375rem #00000005, 0rem .125rem .125rem -.0625rem #00000005, 0rem .0625rem .0625rem -.03125rem #00000008, 0rem .03125rem .03125rem 0rem #0000000a, 0rem 0rem 0rem .0625rem #0000000f
• --p-shadow-300
  Xem giá trị

  0rem .5rem 1.5rem -.5rem #00000047, 0rem .5rem 1rem -.25rem #0000000d, 0rem .1875rem .375rem 0rem #0000000d, 0rem .125rem .25rem 0rem #0000000d, 0rem .0625rem .125rem 0rem #0000000d, 0rem 0rem 0rem .0625rem #0000000f
• --p-shadow-400
  Xem giá trị

  0rem 1.25rem 2rem -.75rem #00000033, 0rem .625rem 1rem -.375rem #00000014, 0rem .1875rem .375rem 0rem #00000014, 0rem .125rem .25rem 0rem #00000014, 0rem .0625rem .125rem 0rem #0000000d, 0rem 0rem 0rem .0625rem #0000000f
• --p-shadow-500
  Xem giá trị

  0rem 1.5rem 2.25rem -.75rem #0000001f, 0rem 1.5rem 1.5rem -.75rem #00000014, 0rem .5rem 1rem -.375rem #00000014, 0rem .1875rem .375rem 0rem #00000014, 0rem .125rem .25rem 0rem #00000014, 0rem .0625rem .125rem 0rem #0000000d, 0rem 0rem 0rem .0625rem #0000000f
• --p-shadow-600
  Xem giá trị

  0rem 1.5rem 3.5rem -.75rem #0000003d, 0rem 1.5rem 1.5rem -.75rem #0000001f, 0rem .1875rem .375rem 0rem #0000000d, 0rem .125rem .25rem 0rem #0000000d, 0rem .0625rem .125rem 0rem #0000000d, 0rem 0rem 0rem .0625rem #00000012
• --p-shadow-banner
  Xem giá trị

  0rem 0rem .125rem 0rem #0000003d, 0rem .125rem .75rem 0rem #00000005, 0rem .25rem 1rem 0rem #00000005, 0rem .25rem 3rem 0rem #00000005
• --p-shadow-bevel-100
  Xem giá trị

  .0625rem 0rem 0rem 0rem #00000021 inset, -.0625rem 0rem 0rem 0rem #00000021 inset, 0rem -.0625rem 0rem 0rem #0000002b inset, 0rem .0625rem 0rem 0rem #cccccc80 inset
• --p-shadow-border-inset
  Xem giá trị

  0rem 0rem 0rem .0625rem #00000014 inset
• --p-shadow-buttonnone
• --p-shadow-button-disablednone
• --p-shadow-button-hover
  Xem giá trị

  0rem .0625rem 0rem 0rem #ebebeb inset, -.0625rem 0rem 0rem 0rem #ebebeb inset, .0625rem 0rem 0rem 0rem #ebebeb inset, 0rem -.0625rem 0rem 0rem #ccc inset
• --p-shadow-button-inset
  Xem giá trị

  inset 0rem .125rem .375rem -.0625rem rgba(0, 0, 0, .07), inset 0rem .1875rem .125rem -.125rem #0000000d, inset 0rem .125rem .1875rem -.125rem #00000008, inset 0rem .0625rem .0625rem -.03125rem #0000000f, inset 0rem 0rem 0rem .03125rem #0000000d
• --p-shadow-button-primary
  Xem giá trị

  0rem .0625rem .03125rem -.03125rem #00000021, 0rem .0625rem .125rem -.03125rem #00000021, 0rem .25rem .375rem -.125rem #00000021, 0rem .125rem .1875rem -.09375rem #00000021, inset 0rem 0rem .25rem .0625rem #101010, inset 0rem 0rem .25rem .125rem #ffffff1a, inset 0rem 0rem .75rem -.375rem #ffffffbf
• --p-shadow-button-primary-critical
  Xem giá trị

  0rem .0625rem .03125rem -.03125rem rgba(229, 0, 0, .16), 0rem .0625rem .125rem -.03125rem #e5000029, 0rem .25rem .375rem -.125rem #e5000029, 0rem .125rem .1875rem -.09375rem #ff00001a, inset 0rem 0rem .25rem .0625rem #f50000, inset 0rem 0rem .25rem .125rem #ffffff1a, inset 0rem 0rem .75rem -.375rem #ffffffbf
• --p-shadow-button-primary-critical-hover
  Xem giá trị

  0rem .0625rem .03125rem -.03125rem rgba(229, 0, 0, .12), 0rem .0625rem .125rem -.03125rem #e500001f, 0rem .25rem .375rem -.125rem #e500001f, 0rem .125rem .1875rem -.09375rem #ff00001f, inset 0rem 0rem .25rem .0625rem #f50000, inset 0rem 0rem .25rem .125rem #ffffff1a, inset 0rem 0rem .75rem -.375rem #ffffffbf
• --p-shadow-button-primary-critical-inset
  Xem giá trị

  0rem .0625rem .03125rem -.03125rem rgba(0, 0, 0, .13), inset 0rem 0rem .75rem -.375rem #ffffffbf, inset 0rem 0rem .25rem .125rem #ffffff1a, inset 0rem 0rem .25rem .0625rem #e0000b
• --p-shadow-button-primary-hover
  Xem giá trị

  0rem .0625rem .03125rem -.03125rem #00000021, 0rem .0625rem .125rem -.03125rem #00000021, 0rem .25rem .375rem -.125rem #00000021, 0rem .125rem .1875rem -.09375rem #00000021, inset 0rem 0rem .25rem .0625rem #101010, inset 0rem 0rem .25rem .125rem #ffffff1a, inset 0rem 0rem .75rem -.375rem #ffffffbf
• --p-shadow-button-primary-inset
  Xem giá trị

  0rem .0625rem .03125rem -.03125rem #00000021, inset 0rem 0rem .75rem -.375rem #ffffffbf, inset 0rem 0rem .25rem .125rem #ffffff1a, inset 0rem 0rem .25rem .0625rem #101010
• --p-shadow-button-primary-success
  Xem giá trị

  0rem -.0625rem 0rem .0625rem #0c5132cc inset, 0rem 0rem 0rem .0625rem #136f45cc inset, 0rem .03125rem 0rem .09375rem #ffffff40 inset
• --p-shadow-button-primary-success-hover
  Xem giá trị

  0rem .0625rem 0rem 0rem #ffffff7a inset, .0625rem 0rem 0rem 0rem #ffffff33 inset, -.0625rem 0rem 0rem 0rem #ffffff33 inset, 0rem -.09375rem 0rem 0rem #00000040 inset
• --p-shadow-button-primary-success-inset
  Xem giá trị

  -.0625rem 0rem .0625rem 0rem #00000033 inset, .0625rem 0rem .0625rem 0rem #00000033 inset, 0rem .125rem 0rem 0rem #00000099 inset
• --p-shadow-choice-checked
  Xem giá trị

  0rem .0625rem .0625rem -.03125rem #00000021, inset 0rem 0rem 0rem .03125rem #00000066, inset 0rem .09375rem .125rem -.0625rem #ffffff6b
• --p-shadow-choice-critical-checked
  Xem giá trị

  0rem .0625rem .0625rem -.03125rem #00000021, inset 0rem 0rem 0rem .03125rem #0000001a, inset 0rem .09375rem .125rem -.0625rem #ffffff6b
• --p-shadow-container
  Xem giá trị

  0rem 0rem .125rem 0rem rgba(0, 0, 0, .24), 0rem .125rem .75rem 0rem #00000005, 0rem .25rem 1rem 0rem #00000005, 0rem .25rem 3rem 0rem #00000005
• --p-shadow-control-inset
  Xem giá trị

  inset 0rem 0rem 0rem .03125rem #00000005, 0rem 0rem 0rem .0625rem #ffffff8c, 0rem .0625rem 0rem 0rem #fff, 0rem 0rem .5rem 0rem #00000005, inset 0rem .0625rem .125rem 0rem #00000005
• --p-shadow-control-knob
  Xem giá trị

  0 .0625rem .0625rem -.03125rem #0000000f, 0 .125rem .125rem -.0625rem #0000000f, 0 .25rem .25rem -.125rem #0000000f, 0 .125rem .5rem 0 #0000000f
• --p-shadow-dialog
  Xem giá trị

  0rem .125rem .1875rem -.0625rem rgba(0, 0, 0, .06), 0rem .25rem .375rem -.125rem #0000000f, 0rem .5rem .75rem -.25rem #0000000f, 0rem 1rem 1.5rem -.375rem #0000000f, 0rem 2rem 3rem -.5rem #0000000f, 0rem 0rem 0rem .0625rem #00000014
• --p-shadow-input
  Xem giá trị

  0rem .125rem .1875rem -.0625rem rgba(0, 0, 0, .04), 0rem .1875rem .25rem -.09375rem #0000000a, 0rem 0rem 0rem .0625rem #00000021
• --p-shadow-input-ai
  Xem giá trị

  0 0 .5rem .0625rem #7e5cff0d inset, 0 .125rem .1875rem -.0625rem #0000000a, 0 .1875rem .25rem -.09375rem #0000000a, 0 .25rem .3125rem -.125rem #0000000a, 0 0 0 .0625rem #7e5cff
• --p-shadow-input-ai-focusinitial
• --p-shadow-input-critical
  Xem giá trị

  0rem 0rem 0rem .0625rem #eb0014, 0rem .25rem .3125rem -.125rem #0000000a, 0rem .1875rem .25rem -.09375rem #0000000a, 0rem .125rem .1875rem -.0625rem #0000000a, inset 0rem 0rem .5rem .0625rem #e03d500d
• --p-shadow-input-critical-focus
  Xem giá trị

  0 0 .5rem .0625rem rgba(255, 43, 58, .05) inset, 0 0 0 .1875rem #ff2b3a24, 0 0 0 .0625rem #ff2b3a, 0 .25rem .3125rem -.125rem #0000000a, 0 .1875rem .25rem -.09375rem #0000000a, 0 .125rem .1875rem -.0625rem #0000000a
• --p-shadow-input-disabled
  Xem giá trị

  0rem 0rem 0rem .0625rem rgba(0, 0, 0, .10)
• --p-shadow-input-error
  Xem giá trị

  var(--p-shadow-input-critical)
• --p-shadow-input-error-focus
  Xem giá trị

  var(--p-shadow-input-critical-focus)
• --p-shadow-input-focus
  Xem giá trị

  0rem .125rem .1875rem -.0625rem rgba(0, 0, 0, .04), 0rem .1875rem .25rem -.09375rem #0000000a, 0rem .25rem .3125rem -.125rem #0000000a, 0rem 0rem 0rem .0625rem var(--p-color-border-focus), 0rem 0rem 0rem .1875rem #3573f60f, 0rem .25rem 1.25rem .125rem #3573f60f, inset 0rem 0rem .5rem .0625rem #3573f60d
• --p-shadow-input-strong
  Xem giá trị

  0rem .125rem .1875rem -.0625rem rgba(0, 0, 0, .04), 0rem .1875rem .25rem -.09375rem #0000000a, 0rem 0rem 0rem .0625rem #00000033
• --p-shadow-inset-100
  Xem giá trị

  0rem .0625rem .125rem 0rem #1a1a1a26 inset, 0rem .0625rem .0625rem 0rem #1a1a1a26 inset
• --p-shadow-inset-200
  Xem giá trị

  0rem .125rem .0625rem 0rem #1a1a1a33 inset, .0625rem 0rem .0625rem 0rem #1a1a1a1f inset, -.0625rem 0rem .0625rem 0rem #1a1a1a1f inset
• --p-shadow-item-focus
  Xem giá trị

  inset 0 0 0 .0625rem var(--p-color-border-focus), inset 0 0 .5rem .0625rem #5083f00d, inset 0 .25rem 1.25rem .125rem #5083f00f
• --p-shadow-nav-item-active
  Xem giá trị

  inset 0rem 0rem .75rem rgba(255, 255, 255, .04), inset 0rem .0625rem .0625rem #ffffff0a, inset 0rem 0rem 0rem .0625rem #ffffff05
• --p-shadow-nav-selected
  Xem giá trị

  0rem 0rem 0rem .0625rem rgba(255, 255, 255, .02) inset, 0rem .0625rem .0625rem 0rem #ffffff0f inset, 0rem 0rem .75rem .0625rem #ffffff0f inset, 0rem .0625rem .125rem 0rem #0000001a, 0rem 0rem 0rem .0625rem #0000001a
• --p-shadow-page-button
  Xem giá trị

  var(--p-shadow-toolbar-action)
• --p-shadow-page-button-active
  Xem giá trị

  var(--p-shadow-toolbar-action-active)
• --p-shadow-popover
  Xem giá trị

  0rem .125rem .125rem -.0625rem rgba(0, 0, 0, .06), 0rem .1875rem .25rem -.125rem #0000000f, 0rem .375rem .5rem -.1875rem #0000000f, 0rem .75rem 1rem -.25rem #0000000f, 0rem 0rem 0rem .0625rem #00000014
• --p-shadow-section
  Xem giá trị

  0rem 0rem .125rem 0rem rgba(0, 0, 0, .24), 0rem .125rem .75rem 0rem #00000005, 0rem .25rem 1rem 0rem #00000005, 0rem .25rem 3rem 0rem #00000005
• --p-shadow-toast
  Xem giá trị

  0rem .125rem .25rem -.0625rem #00000014, 0rem .25rem .5rem -.125rem #00000014, 0rem .5rem 1rem -.25rem #00000014, 0rem 1rem 2rem -.5rem #00000014, 0rem 2rem 4rem -1rem #00000014, 0rem 4rem 8rem -2rem #00000014, 0rem 0rem 0rem .0625rem #00000014
• --p-shadow-toolbar-action
  Xem giá trị

  0 0 0 .0625rem rgba(0, 0, 0, .07), 0 .125rem 1.25rem 0 #00000008, 0 .3125rem 1.25rem 0 #00000008, 0 .5rem 3.75rem 0 #00000008
• --p-shadow-toolbar-action-active
  Xem giá trị

  0 0 0 .0625rem rgba(0, 0, 0, .07), 0 .125rem 1.25rem 0 #00000008, 0 .3125rem 1.25rem 0 #00000008, 0 .5rem 3.75rem 0 #00000008

Chuyển động

• --p-motion-duration-00ms
• --p-motion-duration-5050ms
• --p-motion-duration-100100ms
• --p-motion-duration-150150ms
• --p-motion-duration-200200ms
• --p-motion-duration-250250ms
• --p-motion-duration-300300ms
• --p-motion-duration-350350ms
• --p-motion-duration-400400ms
• --p-motion-duration-450450ms
• --p-motion-duration-500500ms
• --p-motion-duration-50005000ms
• --p-motion-easecubic-bezier(.25, .1, .25, 1)
• --p-motion-ease-incubic-bezier(.42, 0, 1, 1)
• --p-motion-ease-in-outcubic-bezier(.42, 0, .58, 1)
• --p-motion-ease-outcubic-bezier(.19, .91, .38, 1)
• --p-motion-ease-out-emphasizedcubic-bezier(.2, .8, 0, 1)
• --p-motion-keyframes-appear-abovep-motion-keyframes-appear-above
• --p-motion-keyframes-appear-belowp-motion-keyframes-appear-below
• --p-motion-keyframes-bouncep-motion-keyframes-bounce
• --p-motion-keyframes-fade-inp-motion-keyframes-fade-in
• --p-motion-keyframes-pulsep-motion-keyframes-pulse
• --p-motion-keyframes-spinp-motion-keyframes-spin
• --p-motion-linearcubic-bezier(0, 0, 1, 1)

Z-index

Biến	Giá trị	Xem trước
--p-z-index-0	auto
--p-z-index-1	100
--p-z-index-2	400
--p-z-index-3	510
--p-z-index-4	512
--p-z-index-5	513
--p-z-index-6	514
--p-z-index-7	515
--p-z-index-8	516
--p-z-index-9	517
--p-z-index-10	518
--p-z-index-11	519
--p-z-index-12	520

Chiều rộng

Biến	Giá trị	Xem trước
--p-width-0	0rem
--p-width-025	.0625rem
--p-width-050	.125rem
--p-width-100	.25rem
--p-width-150	.375rem
--p-width-200	.5rem
--p-width-300	.75rem
--p-width-400	1rem
--p-width-500	1.25rem
--p-width-600	1.5rem
--p-width-700	1.75rem
--p-width-800	2rem
--p-width-900	2.25rem
--p-width-1000	2.5rem
--p-width-1200	3rem
--p-width-1600	4rem
--p-width-2000	5rem
--p-width-2400	6rem
--p-width-2800	7rem
--p-width-3200	8rem

Chiều cao

Biến	Giá trị	Xem trước
--p-height-0	0rem
--p-height-025	.0625rem
--p-height-050	.125rem
--p-height-100	.25rem
--p-height-150	.375rem
--p-height-200	.5rem
--p-height-300	.75rem
--p-height-400	1rem
--p-height-500	1.25rem
--p-height-600	1.5rem
--p-height-700	1.75rem
--p-height-800	2rem
--p-height-900	2.25rem
--p-height-1000	2.5rem
--p-height-1200	3rem
--p-height-1600	4rem
--p-height-2000	5rem
--p-height-2400	6rem
--p-height-2800	7rem
--p-height-3200	8rem
--p-height-field-min-block-size	1.875rem

Breakpoint

Các biến breakpoint chứa giá trị độ rộng, nhưng CSS không thể dùng var() bên trong media query, nên hãy viết trực tiếp giá trị: @media (min-width: 48rem).

Biến	Giá trị	Xem trước
--p-breakpoints-lg	65rem
--p-breakpoints-md	48rem
--p-breakpoints-sm	30.625rem
--p-breakpoints-xl	90rem
--p-breakpoints-xs	0rem

Khác

Biến	Giá trị	Xem trước
--p-filter-nav-icon	saturate(0) invert(1) brightness(1.5) contrast(1.5) opacity(.9)
--p-filter-nav-icon-active	saturate(0) invert(1) brightness(2) contrast(1.5) opacity(.9)