qalim design system

Appearance

Design Tokens ​

Every design decision lives in a token in packages/components/src/tokens/tokens.json: colours, type, spacing, borders and motion. Tokens come in three layers, and each layer may only point at the one below it:

Core (raw values) ← Alias (semantic roles) ← Component (decisions inside a component)

The generator stops with an error if a component token skips the alias layer or an alias points at another alias.

Themes re-point existing alias tokens; they never add new names. Pick one with the DS theme select in the top bar. Every preview below updates live, and alias rows list their theme overrides.

Click a row to see its full chain. For core tokens, that lists every alias and component token built on it and every stylesheet that ends up using it. Hover a duration or easing row to play it.

bash
npm run gen:tokens:css -- --deterministic   # tokens.json → tokens.css (+ layer check)
npm run gen:utilities:css                   # spacing + .text-* typography classes
npm run gen:tokens:penpot                   # Penpot import file
  1. 01 · Core87Raw values. The only layer allowed to hold a literal.
  2. 02 · Alias104Semantic roles. Reference core only.
  3. 03 · Component216Per-component decisions. Reference alias only.

Core

Raw values. The only layer allowed to hold a literal.

color

--color-paper-0#fffffffieldqs-buttonqs-selectqs-dialogqs-tag
Resolves to
#ffffff
Consumed in
field.cssqs-button.cssqs-select.cssqs-dialog.cssqs-tag.css
--color-paper-50#f7f6f2unused
Resolves to
#f7f6f2
Used by alias
--color-canvas
Used by component
Consumed in
No stylesheet reads this token yet.
--color-paper-100#efede6qs-selectqs-imageutilities
Resolves to
#efede6
Consumed in
qs-select.cssqs-image.cssutilities.css
--color-ink-200#d2d2d7utilitiesqs-dialog
Resolves to
#d2d2d7
Used by alias
--color-border
Used by component
--qs-dialog-divider-color
Consumed in
utilities.cssqs-dialog.css
--color-ink-500#6e6e73fieldqs-linkqs-imageqs-text
Resolves to
#6e6e73
Consumed in
field.cssqs-link.cssqs-image.cssqs-text.css
--color-ink-700#424245qs-button
Resolves to
#424245
Consumed in
qs-button.css
--color-ink-900#1d1d1ffieldqs-selectqs-buttonqs-linkqs-tagqs-headingqs-textqs-dialog
Resolves to
#1d1d1f
Used by alias
--color-text
Consumed in
field.cssqs-select.cssqs-button.cssqs-link.cssqs-tag.cssqs-heading.cssqs-text.cssqs-dialog.css
--color-ink-1000#000000qs-tagfieldqs-buttonqs-selectqs-dialog
Resolves to
#000000
Consumed in
qs-tag.cssfield.cssqs-button.cssqs-select.cssqs-dialog.css
--color-vermilion-500#d22b12qs-linkqs-selectqs-tagfieldqs-buttonqs-dialog
Resolves to
#d22b12
Consumed in
qs-link.cssqs-select.cssqs-tag.cssfield.cssqs-button.cssqs-dialog.css
--color-vermilion-600#a8200cqs-button
Resolves to
#a8200c
Consumed in
qs-button.css
--color-blue-500#0071e3qs-buttonqs-linkqs-selectfield
Resolves to
#0071e3
Used by alias
--color-focus
Used by component
--focus-outline-color
Consumed in
qs-button.cssqs-link.cssqs-select.cssfield.css
--color-green-500#1a7f37qs-button
Resolves to
#1a7f37
Used by alias
--color-success
Consumed in
qs-button.css
--color-green-600#116329qs-button
Resolves to
#116329
Consumed in
qs-button.css
--color-crt-950#0a0a0aqs-tagqs-button
Resolves to
#0a0a0a
Consumed in
qs-tag.cssqs-button.css
--color-crt-900#121212fieldqs-buttonqs-selectqs-dialog
Resolves to
#121212
Used by alias
--color-surface
Consumed in
field.cssqs-button.cssqs-select.cssqs-dialog.css
--color-crt-800#1c1c1cqs-buttonqs-selectqs-imageutilities
Resolves to
#1c1c1c
Consumed in
qs-button.cssqs-select.cssqs-image.cssutilities.css
--color-crt-600#3a3a3autilitiesqs-dialog
Resolves to
#3a3a3a
Used by alias
--color-border
Used by component
--qs-dialog-divider-color
Consumed in
utilities.cssqs-dialog.css
--color-phosphor-100#eaeaeaqs-tagfieldqs-selectqs-buttonqs-linkqs-headingqs-textqs-dialog
Resolves to
#eaeaea
Consumed in
qs-tag.cssfield.cssqs-select.cssqs-button.cssqs-link.cssqs-heading.cssqs-text.cssqs-dialog.css
--color-phosphor-400#9a9a9afieldqs-linkqs-imageqs-textqs-button
Resolves to
#9a9a9a
Consumed in
field.cssqs-link.cssqs-image.cssqs-text.cssqs-button.css
--color-hazard-500#e61919qs-buttonqs-selectqs-dialog
Resolves to
#e61919
Used by alias
--color-accent
Consumed in
qs-button.cssqs-select.cssqs-dialog.css
--color-hazard-400#ff2a2aqs-linkqs-selectqs-tagfieldqs-button
Resolves to
#ff2a2a
Consumed in
qs-link.cssqs-select.cssqs-tag.cssfield.cssqs-button.css
--color-terminal-green#4af626qs-button
Resolves to
#4af626
Used by alias
--color-success
Consumed in
qs-button.css
--color-scrimrgb(0 0 0 / 0.4)qs-dialog
Resolves to
rgb(0 0 0 / 0.4)
Used by alias
--color-backdrop
Used by component
--qs-dialog-backdrop
Consumed in
qs-dialog.css
--color-crt-scrimrgb(10 10 10 / 0.85)qs-dialog
Resolves to
rgb(10 10 10 / 0.85)
Used by alias
--color-backdrop
Used by component
--qs-dialog-backdrop
Consumed in
qs-dialog.css

size

--size-00pxqs-buttonqs-selectqs-dialog
Resolves to
0px
Consumed in
qs-button.cssqs-select.cssqs-dialog.css
--size-22pxqs-buttonqs-linkfieldqs-tagutilitiesqs-select
Resolves to
2px
Consumed in
qs-button.cssqs-link.cssfield.cssqs-tag.cssutilities.cssqs-select.css
--size-44pxutilitiesqs-selectfieldqs-linkqs-tagqs-button
Resolves to
4px
Consumed in
utilities.cssqs-select.cssfield.cssqs-link.cssqs-tag.cssqs-button.css
--size-88pxutilitiesfieldqs-buttonqs-selectqs-tagqs-dialog
Resolves to
8px
Consumed in
utilities.cssfield.cssqs-button.cssqs-select.cssqs-tag.cssqs-dialog.css
--size-1616pxutilitiesfieldqs-selectqs-dialogqs-iconqs-button
Resolves to
16px
Consumed in
utilities.cssfield.cssqs-select.cssqs-dialog.cssqs-icon.cssqs-button.css
--size-2424pxutilitiesqs-buttonqs-dialogqs-icon
Resolves to
24px
Consumed in
utilities.cssqs-button.cssqs-dialog.cssqs-icon.css
--size-3232pxutilitiesqs-imageqs-icon
Resolves to
32px
Consumed in
utilities.cssqs-image.cssqs-icon.css
--size-4848pxutilities
Resolves to
48px
Used by component
Consumed in
utilities.css
--size-6464pxutilities
Resolves to
64px
Used by component
Consumed in
utilities.css
--size-9696pxunused
Resolves to
96px
Used by component
Consumed in
No stylesheet reads this token yet.
--size-128128pxunused
Resolves to
128px
Used by alias
--space-5xl
Used by component
Consumed in
No stylesheet reads this token yet.
--size-560560pxqs-dialog
Resolves to
560px
Used by alias
--dimension-dialog
Used by component
--qs-dialog-width
Consumed in
qs-dialog.css

radius

--radius-00qs-selectfieldqs-buttonqs-tagqs-imageqs-dialog
Resolves to
0
Consumed in
qs-select.cssfield.cssqs-button.cssqs-tag.cssqs-image.cssqs-dialog.css
--radius-44pxunused
Resolves to
4px
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--radius-full9999pxunused
Resolves to
9999px
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.

border-width

--border-width-11pxutilitiesqs-linkqs-tagqs-dialogqs-selectfieldqs-button
Resolves to
1px
Consumed in
utilities.cssqs-link.cssqs-tag.cssqs-dialog.cssqs-select.cssfield.cssqs-button.css
--border-width-22pxutilitiesqs-selectfieldqs-buttonqs-linkqs-dialog
Resolves to
2px
Consumed in
utilities.cssqs-select.cssfield.cssqs-button.cssqs-link.cssqs-dialog.css

font-family

--font-family-geistGeistqs-headingutilitiesqs-dialogqs-textfieldqs-button
Resolves to
Geist
Consumed in
qs-heading.cssutilities.cssqs-dialog.cssqs-text.cssfield.cssqs-button.css
--font-family-geist-monoGeist Monoqs-textutilitiesqs-tagqs-dialogfieldqs-buttonqs-heading
Resolves to
Geist Mono
Consumed in
qs-text.cssutilities.cssqs-tag.cssqs-dialog.cssfield.cssqs-button.cssqs-heading.css
--font-family-geist-pixel-squareGeist Pixel Squareqs-textutilities
Resolves to
Geist Pixel Square
Used by alias
--font-print
Used by component
--text-print-family
Consumed in
qs-text.cssutilities.css

font-size

--font-size-1212pxqs-textutilitiesqs-tagfield
Resolves to
12px
Consumed in
qs-text.cssutilities.cssqs-tag.cssfield.css
--font-size-1414pxqs-textutilitiesfieldqs-buttonqs-dialog
Resolves to
14px
Consumed in
qs-text.cssutilities.cssfield.cssqs-button.cssqs-dialog.css
--font-size-1717pxqs-textutilitiesfieldqs-buttonqs-dialogqs-heading
Resolves to
17px
Consumed in
qs-text.cssutilities.cssfield.cssqs-button.cssqs-dialog.cssqs-heading.css
--font-size-2121pxqs-headingutilitiesqs-dialog
Resolves to
21px
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--font-size-2828pxqs-headingutilitiesqs-text
Resolves to
28px
Consumed in
qs-heading.cssutilities.cssqs-text.css
--font-size-fluid-40clamp(2rem, 2vw + 1.5rem, 2.5rem)qs-headingutilitiesqs-text
Resolves to
clamp(2rem, 2vw + 1.5rem, 2.5rem)
Consumed in
qs-heading.cssutilities.cssqs-text.css
--font-size-fluid-64clamp(2.5rem, 4vw + 1.5rem, 4rem)qs-headingutilities
Resolves to
clamp(2.5rem, 4vw + 1.5rem, 4rem)
Consumed in
qs-heading.cssutilities.css
--font-size-fluid-96clamp(3rem, 6vw + 1.5rem, 6rem)qs-headingutilities
Resolves to
clamp(3rem, 6vw + 1.5rem, 6rem)
Used by alias
--type-size-hero
Used by component
--text-hero-size
Consumed in
qs-heading.cssutilities.css

font-weight

--font-weight-400400qs-textutilities
Resolves to
400
Consumed in
qs-text.cssutilities.css
--font-weight-500500qs-textutilitiesqs-selectfieldqs-buttonqs-tag
Resolves to
500
Consumed in
qs-text.cssutilities.cssqs-select.cssfield.cssqs-button.cssqs-tag.css
--font-weight-600600qs-headingutilitiesqs-linkqs-dialog
Resolves to
600
Consumed in
qs-heading.cssutilities.cssqs-link.cssqs-dialog.css
--font-weight-700700qs-headingutilities
Resolves to
700
Used by alias
--type-weight-bold
Used by component
--text-large-title-weight
Consumed in
qs-heading.cssutilities.css
--font-weight-800800qs-headingutilities
Resolves to
800
Used by alias
--type-weight-heavy
Consumed in
qs-heading.cssutilities.css

line-height

--line-height-900.9qs-headingutilitiesqs-text
Resolves to
0.9
Consumed in
qs-heading.cssutilities.cssqs-text.css
--line-height-1001qs-textutilitiesqs-tagqs-heading
Resolves to
1
Consumed in
qs-text.cssutilities.cssqs-tag.cssqs-heading.css
--line-height-1101.1qs-headingutilitiesqs-dialog
Resolves to
1.1
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--line-height-1251.25qs-headingutilitiesqs-dialogqs-textfieldqs-button
Resolves to
1.25
Consumed in
qs-heading.cssutilities.cssqs-dialog.cssqs-text.cssfield.cssqs-button.css
--line-height-1471.47qs-textutilitiesfieldqs-buttonqs-dialog
Resolves to
1.47
Used by alias
--type-leading-body
Consumed in
qs-text.cssutilities.cssfield.cssqs-button.cssqs-dialog.css

letter-spacing

--letter-spacing-tightest-0.05emqs-headingutilities
Resolves to
-0.05em
Consumed in
qs-heading.cssutilities.css
--letter-spacing-tighter-0.03emqs-headingutilitiesqs-dialog
Resolves to
-0.03em
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--letter-spacing-tight-0.01emqs-headingutilitiesqs-textqs-buttonqs-dialog
Resolves to
-0.01em
Consumed in
qs-heading.cssutilities.cssqs-text.cssqs-button.cssqs-dialog.css
--letter-spacing-normal0qs-textutilitiesqs-headingqs-buttonqs-dialog
Resolves to
0
Consumed in
qs-text.cssutilities.cssqs-heading.cssqs-button.cssqs-dialog.css
--letter-spacing-wide0.08emqs-textutilitiesqs-tagqs-headingqs-dialog
Resolves to
0.08em
Consumed in
qs-text.cssutilities.cssqs-tag.cssqs-heading.cssqs-dialog.css

duration

--duration-00msqs-buttonqs-selectqs-dialog
Resolves to
0ms
Consumed in
qs-button.cssqs-select.cssqs-dialog.css
--duration-120120msqs-buttonqs-selectqs-dialogqs-link
Resolves to
120ms
Consumed in
qs-button.cssqs-select.cssqs-dialog.cssqs-link.css
--duration-200200msqs-buttonqs-linkqs-selectqs-imageqs-dialog
Resolves to
200ms
Consumed in
qs-button.cssqs-link.cssqs-select.cssqs-image.cssqs-dialog.css
--duration-280280msqs-button
Resolves to
280ms
Used by alias
--duration-release
Consumed in
qs-button.css
--duration-500500msunused
Resolves to
500ms
Used by alias
--duration-reveal
Used by component
Consumed in
No stylesheet reads this token yet.
--duration-50005000msutilities
Resolves to
5000ms
Used by component
Consumed in
utilities.css
--duration-2400024000msutilities
Resolves to
24000ms
Used by component
Consumed in
utilities.css

easing

--easing-outcubic-bezier(0.32, 0.72, 0, 1)qs-buttonqs-linkqs-selectqs-imageqs-dialogutilities
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
Consumed in
qs-button.cssqs-link.cssqs-select.cssqs-image.cssqs-dialog.cssutilities.css
--easing-springlinear(0, 0.097, 0.301, 0.521, 0.712, 0.855, 0.95, 1.005, 1.031, 1.038, 1.035, 1.028, 1.019, 1.012, 1.006, 1.002, 1 66.7%, 1)qs-button
Resolves to
linear(0, 0.097, 0.301, 0.521, 0.712, 0.855, 0.95, 1.005, 1.031, 1.038, 1.035, 1.028, 1.019, 1.012, 1.006, 1.002, 1 66.7%, 1)
Used by alias
--easing-release
Consumed in
qs-button.css
--easing-stepssteps(4, end)qs-buttonqs-linkqs-selectqs-imageqs-dialog
Resolves to
steps(4, end)
Consumed in
qs-button.cssqs-link.cssqs-select.cssqs-image.cssqs-dialog.css
--easing-linearlinearutilities
Resolves to
linear
Used by component
Consumed in
utilities.css

opacity

--opacity-400.4qs-selectfieldqs-button
Resolves to
0.4
Used by alias
--opacity-disabled
Consumed in
qs-select.cssfield.cssqs-button.css
--opacity-1001unused
Resolves to
1
Used by alias
--opacity-enabled
Used by component
Consumed in
No stylesheet reads this token yet.

scale

--scale-970.97qs-buttonqs-dialog
Resolves to
0.97
Consumed in
qs-button.cssqs-dialog.css
--scale-1001qs-buttonqs-dialog
Resolves to
1
Consumed in
qs-button.cssqs-dialog.css

text-case

--text-case-nonenoneqs-headingutilitiesqs-dialogqs-button
Resolves to
none
Consumed in
qs-heading.cssutilities.cssqs-dialog.cssqs-button.css
--text-case-uppercaseuppercaseqs-textutilitiesfieldqs-tagqs-headingqs-dialogqs-button
Resolves to
uppercase
Consumed in
qs-text.cssutilities.cssfield.cssqs-tag.cssqs-heading.cssqs-dialog.cssqs-button.css

glyph

--glyph-nonenoneqs-button
Resolves to
none
Consumed in
qs-button.css
--glyph-bracket-open"[" / ""qs-button
Resolves to
"[" / ""
Used by component
--qs-button-prefix
Consumed in
qs-button.css
--glyph-bracket-close"]" / ""qs-button
Resolves to
"]" / ""
Used by component
--qs-button-suffix
Consumed in
qs-button.css

Alias

Semantic roles. Reference core only.

color

--color-canvas→ --color-paper-50industrial → --color-crt-950unused
Resolves to
#f7f6f2
References
--color-paper-50 core
In theme “industrial”
--color-crt-950 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--color-surface→ --color-paper-0industrial → --color-crt-900fieldqs-buttonqs-selectqs-dialog
Resolves to
#ffffff
References
--color-paper-0 core
In theme “industrial”
--color-crt-900 core
Used by alias
Consumed in
field.cssqs-button.cssqs-select.cssqs-dialog.css
--color-surface-hover→ --color-paper-0industrial → --color-crt-800qs-button
Resolves to
#ffffff
References
--color-paper-0 core
In theme “industrial”
--color-crt-800 core
Used by alias
Used by component
--qs-button-bg-hover
Consumed in
qs-button.css
--color-surface-sunken→ --color-paper-100industrial → --color-crt-800qs-selectqs-image
Resolves to
#efede6
References
--color-paper-100 core
In theme “industrial”
--color-crt-800 core
Used by alias
Consumed in
qs-select.cssqs-image.css
--color-surface-inverse→ --color-ink-1000industrial → --color-phosphor-100qs-tag
Resolves to
#000000
References
--color-ink-1000 core
In theme “industrial”
--color-phosphor-100 core
Used by alias
Used by component
--qs-tag-strong-bg
Consumed in
qs-tag.css
--color-text→ --color-ink-900industrial → --color-phosphor-100fieldqs-selectqs-buttonqs-linkqs-tagqs-headingqs-textqs-dialog
Resolves to
#1d1d1f
References
--color-ink-900 core
In theme “industrial”
--color-phosphor-100 core
Used by alias
Consumed in
field.cssqs-select.cssqs-button.cssqs-link.cssqs-tag.cssqs-heading.cssqs-text.cssqs-dialog.css
--color-text-secondary→ --color-ink-500industrial → --color-phosphor-400fieldqs-linkqs-imageqs-text
Resolves to
#6e6e73
References
--color-ink-500 core
In theme “industrial”
--color-phosphor-400 core
Used by alias
Consumed in
field.cssqs-link.cssqs-image.cssqs-text.css
--color-text-inverse→ --color-paper-0industrial → --color-crt-950qs-tag
Resolves to
#ffffff
References
--color-paper-0 core
In theme “industrial”
--color-crt-950 core
Used by alias
Used by component
--qs-tag-strong-text
Consumed in
qs-tag.css
--color-text-accent→ --color-vermilion-500industrial → --color-hazard-400qs-linkqs-selectqs-tag
Resolves to
#d22b12
References
--color-vermilion-500 core
In theme “industrial”
--color-hazard-400 core
Used by alias
Consumed in
qs-link.cssqs-select.cssqs-tag.css
--color-text-danger→ --color-vermilion-500industrial → --color-hazard-400field
Resolves to
#d22b12
References
--color-vermilion-500 core
In theme “industrial”
--color-hazard-400 core
Used by alias
Consumed in
field.css
--color-border→ --color-ink-200industrial → --color-crt-600utilitiesqs-dialog
Resolves to
#d2d2d7
References
--color-ink-200 core
In theme “industrial”
--color-crt-600 core
Used by alias
Used by component
--qs-dialog-divider-color
Consumed in
utilities.cssqs-dialog.css
--color-pattern→ --color-paper-100industrial → --color-crt-800utilities
Resolves to
#efede6
References
--color-paper-100 core
In theme “industrial”
--color-crt-800 core
Used by alias
Used by component
Consumed in
utilities.css
--color-border-strong→ --color-ink-1000industrial → --color-phosphor-100fieldqs-buttonqs-selectqs-tagqs-dialog
Resolves to
#000000
References
--color-ink-1000 core
In theme “industrial”
--color-phosphor-100 core
Used by alias
Consumed in
field.cssqs-button.cssqs-select.cssqs-tag.cssqs-dialog.css
--color-action→ --color-ink-1000industrial → --color-phosphor-100qs-button
Resolves to
#000000
References
--color-ink-1000 core
In theme “industrial”
--color-phosphor-100 core
Used by alias
Consumed in
qs-button.css
--color-action-hover→ --color-ink-700industrial → --color-phosphor-400qs-button
Resolves to
#424245
References
--color-ink-700 core
In theme “industrial”
--color-phosphor-400 core
Used by alias
Consumed in
qs-button.css
--color-on-action→ --color-paper-0industrial → --color-crt-950qs-button
Resolves to
#ffffff
References
--color-paper-0 core
In theme “industrial”
--color-crt-950 core
Used by alias
Used by component
--qs-button-primary-text
Consumed in
qs-button.css
--color-danger→ --color-vermilion-500industrial → --color-vermilion-600qs-button
Resolves to
#d22b12
References
--color-vermilion-500 core
In theme “industrial”
--color-vermilion-600 core
Used by alias
Consumed in
qs-button.css
--color-danger-hover→ --color-vermilion-600industrial → --color-vermilion-500qs-button
Resolves to
#a8200c
References
--color-vermilion-600 core
In theme “industrial”
--color-vermilion-500 core
Used by alias
Consumed in
qs-button.css
--color-on-danger→ --color-paper-0industrial → --color-paper-0qs-button
Resolves to
#ffffff
References
--color-paper-0 core
In theme “industrial”
--color-paper-0 core
Used by alias
Used by component
--qs-button-danger-text
Consumed in
qs-button.css
--color-success→ --color-green-500industrial → --color-terminal-greenqs-button
Resolves to
#1a7f37
References
--color-green-500 core
In theme “industrial”
--color-terminal-green core
Used by alias
Consumed in
qs-button.css
--color-success-hover→ --color-green-600industrial → --color-phosphor-100qs-button
Resolves to
#116329
References
--color-green-600 core
In theme “industrial”
--color-phosphor-100 core
Used by alias
Consumed in
qs-button.css
--color-on-success→ --color-paper-0industrial → --color-crt-950qs-button
Resolves to
#ffffff
References
--color-paper-0 core
In theme “industrial”
--color-crt-950 core
Used by alias
Used by component
--qs-button-success-text
Consumed in
qs-button.css
--color-accent→ --color-vermilion-500industrial → --color-hazard-500qs-buttonqs-selectqs-dialog
Resolves to
#d22b12
References
--color-vermilion-500 core
In theme “industrial”
--color-hazard-500 core
Used by alias
Consumed in
qs-button.cssqs-select.cssqs-dialog.css
--color-focus→ --color-blue-500industrial → --color-hazard-400qs-buttonqs-linkqs-selectfield
Resolves to
#0071e3
References
--color-blue-500 core
In theme “industrial”
--color-hazard-400 core
Used by alias
Used by component
--focus-outline-color
Consumed in
qs-button.cssqs-link.cssqs-select.cssfield.css
--color-backdrop→ --color-scrimindustrial → --color-crt-scrimqs-dialog
Resolves to
rgb(0 0 0 / 0.4)
References
--color-scrim core
In theme “industrial”
--color-crt-scrim core
Used by alias
Used by component
--qs-dialog-backdrop
Consumed in
qs-dialog.css

space

--space-2xs→ --size-2qs-buttonqs-linkfieldqs-tag
Resolves to
2px
References
--size-2 core
Used by alias
Consumed in
qs-button.cssqs-link.cssfield.cssqs-tag.css
--space-xs→ --size-4industrial → --size-2utilitiesqs-selectfieldqs-linkqs-tag
Resolves to
4px
References
--size-4 core
In theme “industrial”
--size-2 core
Used by alias
Consumed in
utilities.cssqs-select.cssfield.cssqs-link.cssqs-tag.css
--space-sm→ --size-8industrial → --size-4utilitiesfieldqs-buttonqs-selectqs-tag
Resolves to
8px
References
--size-8 core
In theme “industrial”
--size-4 core
Used by alias
Consumed in
utilities.cssfield.cssqs-button.cssqs-select.cssqs-tag.css
--space-md→ --size-16industrial → --size-8utilitiesfieldqs-selectqs-dialog
Resolves to
16px
References
--size-16 core
In theme “industrial”
--size-8 core
Used by alias
Consumed in
utilities.cssfield.cssqs-select.cssqs-dialog.css
--space-lg→ --size-24industrial → --size-16utilitiesqs-buttonqs-dialog
Resolves to
24px
References
--size-24 core
In theme “industrial”
--size-16 core
Used by alias
Consumed in
utilities.cssqs-button.cssqs-dialog.css
--space-xl→ --size-32industrial → --size-24utilities
Resolves to
32px
References
--size-32 core
In theme “industrial”
--size-24 core
Used by alias
Used by component
Consumed in
utilities.css
--space-2xl→ --size-48industrial → --size-32utilities
Resolves to
48px
References
--size-48 core
In theme “industrial”
--size-32 core
Used by alias
Used by component
Consumed in
utilities.css
--space-3xl→ --size-64industrial → --size-48utilities
Resolves to
64px
References
--size-64 core
In theme “industrial”
--size-48 core
Used by alias
Used by component
Consumed in
utilities.css
--space-4xl→ --size-96industrial → --size-64unused
Resolves to
96px
References
--size-96 core
In theme “industrial”
--size-64 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--space-5xl→ --size-128industrial → --size-96unused
Resolves to
128px
References
--size-128 core
In theme “industrial”
--size-96 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--space-gutter→ --size-24industrial → --size-16unused
Resolves to
24px
References
--size-24 core
In theme “industrial”
--size-16 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--space-margin→ --size-32industrial → --size-24unused
Resolves to
32px
References
--size-32 core
In theme “industrial”
--size-24 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.

dimension

--dimension-icon-sm→ --size-16qs-icon
Resolves to
16px
References
--size-16 core
Used by alias
Used by component
--qs-icon-size-sm
Consumed in
qs-icon.css
--dimension-icon-md→ --size-24qs-icon
Resolves to
24px
References
--size-24 core
Used by alias
Used by component
--qs-icon-size-md
Consumed in
qs-icon.css
--dimension-icon-lg→ --size-32qs-imageqs-icon
Resolves to
32px
References
--size-32 core
Used by alias
Consumed in
qs-image.cssqs-icon.css
--dimension-dialog→ --size-560qs-dialog
Resolves to
560px
References
--size-560 core
Used by alias
Used by component
--qs-dialog-width
Consumed in
qs-dialog.css

offset

--offset-rest→ --size-0qs-button
Resolves to
0px
References
--size-0 core
Used by alias
Used by component
--qs-button-shadow-rest
Consumed in
qs-button.css
--offset-nudge→ --size-2industrial → --size-0qs-button
Resolves to
2px
References
--size-2 core
In theme “industrial”
--size-0 core
Used by alias
Used by component
--qs-button-nudge
Consumed in
qs-button.css
--offset-lift→ --size-4industrial → --size-0qs-buttonqs-select
Resolves to
4px
References
--size-4 core
In theme “industrial”
--size-0 core
Used by alias
Consumed in
qs-button.cssqs-select.css
--offset-float→ --size-8industrial → --size-0qs-dialog
Resolves to
8px
References
--size-8 core
In theme “industrial”
--size-0 core
Used by alias
Used by component
--qs-dialog-shadow-offset
Consumed in
qs-dialog.css

radius

--radius-control→ --radius-0qs-selectfieldqs-buttonqs-tag
Resolves to
0
References
--radius-0 core
Used by alias
Consumed in
qs-select.cssfield.cssqs-button.cssqs-tag.css
--radius-surface→ --radius-0qs-imageqs-dialog
Resolves to
0
References
--radius-0 core
Used by alias
Consumed in
qs-image.cssqs-dialog.css

border-width

--border-width-hairline→ --border-width-1utilitiesqs-linkqs-tagqs-dialog
Resolves to
1px
References
--border-width-1 core
Used by alias
Consumed in
utilities.cssqs-link.cssqs-tag.cssqs-dialog.css
--border-width-control→ --border-width-2industrial → --border-width-1utilitiesqs-selectfieldqs-buttonqs-linkqs-dialog
Resolves to
2px
References
--border-width-2 core
In theme “industrial”
--border-width-1 core
Used by alias
Consumed in
utilities.cssqs-select.cssfield.cssqs-button.cssqs-link.cssqs-dialog.css
--border-width-focus→ --border-width-2qs-buttonqs-linkqs-selectfield
Resolves to
2px
References
--border-width-2 core
Used by alias
Used by component
--focus-outline-width
Consumed in
qs-button.cssqs-link.cssqs-select.cssfield.css

font

--font-heading→ --font-family-geistindustrial → --font-family-geist-monoqs-headingutilitiesqs-dialog
Resolves to
Geist
References
--font-family-geist core
In theme “industrial”
--font-family-geist-mono core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--font-body→ --font-family-geistindustrial → --font-family-geist-monoqs-textutilitiesqs-dialog
Resolves to
Geist
References
--font-family-geist core
In theme “industrial”
--font-family-geist-mono core
Used by alias
Consumed in
qs-text.cssutilities.cssqs-dialog.css
--font-control→ --font-family-geistindustrial → --font-family-geist-monofieldqs-button
Resolves to
Geist
References
--font-family-geist core
In theme “industrial”
--font-family-geist-mono core
Used by alias
Consumed in
field.cssqs-button.css
--font-mono→ --font-family-geist-monoqs-textutilitiesqs-tag
Resolves to
Geist Mono
Used by alias
Consumed in
qs-text.cssutilities.cssqs-tag.css
--font-print→ --font-family-geist-pixel-squareqs-textutilities
Resolves to
Geist Pixel Square
Used by alias
Used by component
--text-print-family
Consumed in
qs-text.cssutilities.css

type-size

--type-size-caption→ --font-size-12qs-textutilitiesqs-tag
Resolves to
12px
References
--font-size-12 core
Used by alias
Consumed in
qs-text.cssutilities.cssqs-tag.css
--type-size-footnote→ --font-size-14industrial → --font-size-12qs-textutilitiesfield
Resolves to
14px
References
--font-size-14 core
In theme “industrial”
--font-size-12 core
Used by alias
Consumed in
qs-text.cssutilities.cssfield.css
--type-size-body→ --font-size-17industrial → --font-size-14qs-textutilitiesfieldqs-buttonqs-dialog
Resolves to
17px
References
--font-size-17 core
In theme “industrial”
--font-size-14 core
Used by alias
Consumed in
qs-text.cssutilities.cssfield.cssqs-button.cssqs-dialog.css
--type-size-title→ --font-size-21industrial → --font-size-17qs-headingutilitiesqs-dialog
Resolves to
21px
References
--font-size-21 core
In theme “industrial”
--font-size-17 core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--type-size-headline→ --font-size-28industrial → --font-size-21qs-headingutilities
Resolves to
28px
References
--font-size-28 core
In theme “industrial”
--font-size-21 core
Used by alias
Used by component
--text-headline-size
Consumed in
qs-heading.cssutilities.css
--type-size-large-title→ --font-size-fluid-40industrial → --font-size-28qs-headingutilitiesqs-text
Resolves to
clamp(2rem, 2vw + 1.5rem, 2.5rem)
References
--font-size-fluid-40 core
In theme “industrial”
--font-size-28 core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-text.css
--type-size-display→ --font-size-fluid-64industrial → --font-size-fluid-40qs-headingutilities
Resolves to
clamp(2.5rem, 4vw + 1.5rem, 4rem)
References
--font-size-fluid-64 core
In theme “industrial”
--font-size-fluid-40 core
Used by alias
Used by component
--text-display-size
Consumed in
qs-heading.cssutilities.css
--type-size-hero→ --font-size-fluid-96industrial → --font-size-fluid-64qs-headingutilities
Resolves to
clamp(3rem, 6vw + 1.5rem, 6rem)
References
--font-size-fluid-96 core
In theme “industrial”
--font-size-fluid-64 core
Used by alias
Used by component
--text-hero-size
Consumed in
qs-heading.cssutilities.css

type-weight

--type-weight-regular→ --font-weight-400qs-textutilities
Resolves to
400
References
--font-weight-400 core
Used by alias
Consumed in
qs-text.cssutilities.css
--type-weight-medium→ --font-weight-500qs-textutilitiesqs-selectfieldqs-buttonqs-tag
Resolves to
500
References
--font-weight-500 core
Used by alias
Consumed in
qs-text.cssutilities.cssqs-select.cssfield.cssqs-button.cssqs-tag.css
--type-weight-semibold→ --font-weight-600qs-headingutilitiesqs-linkqs-dialog
Resolves to
600
References
--font-weight-600 core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-link.cssqs-dialog.css
--type-weight-bold→ --font-weight-700qs-headingutilities
Resolves to
700
References
--font-weight-700 core
Used by alias
Used by component
--text-large-title-weight
Consumed in
qs-heading.cssutilities.css
--type-weight-heavy→ --font-weight-800qs-headingutilities
Resolves to
800
References
--font-weight-800 core
Used by alias
Consumed in
qs-heading.cssutilities.css

type-leading

--type-leading-print→ --line-height-90qs-headingutilitiesqs-text
Resolves to
0.9
References
--line-height-90 core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-text.css
--type-leading-solid→ --line-height-100qs-textutilitiesqs-tag
Resolves to
1
References
--line-height-100 core
Used by alias
Consumed in
qs-text.cssutilities.cssqs-tag.css
--type-leading-display→ --line-height-110industrial → --line-height-100qs-headingutilities
Resolves to
1.1
References
--line-height-110 core
In theme “industrial”
--line-height-100 core
Used by alias
Consumed in
qs-heading.cssutilities.css
--type-leading-heading→ --line-height-125industrial → --line-height-110qs-headingutilitiesqs-dialog
Resolves to
1.25
References
--line-height-125 core
In theme “industrial”
--line-height-110 core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--type-leading-body→ --line-height-147industrial → --line-height-125qs-textutilitiesfieldqs-buttonqs-dialog
Resolves to
1.47
References
--line-height-147 core
In theme “industrial”
--line-height-125 core
Used by alias
Consumed in
qs-text.cssutilities.cssfield.cssqs-button.cssqs-dialog.css

type-tracking

--type-tracking-display→ --letter-spacing-tightestindustrial → --letter-spacing-normalqs-headingutilities
Resolves to
-0.05em
In theme “industrial”
--letter-spacing-normal core
Used by alias
Consumed in
qs-heading.cssutilities.css
--type-tracking-heading→ --letter-spacing-tighterindustrial → --letter-spacing-wideqs-headingutilitiesqs-dialog
Resolves to
-0.03em
In theme “industrial”
--letter-spacing-wide core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--type-tracking-body→ --letter-spacing-tightindustrial → --letter-spacing-normalqs-headingutilitiesqs-textqs-buttonqs-dialog
Resolves to
-0.01em
References
--letter-spacing-tight core
In theme “industrial”
--letter-spacing-normal core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-text.cssqs-button.cssqs-dialog.css
--type-tracking-mono→ --letter-spacing-normalqs-textutilities
Resolves to
0
Used by alias
Consumed in
qs-text.cssutilities.css
--type-tracking-label→ --letter-spacing-wideindustrial → --letter-spacing-wideqs-textutilitiesqs-tag
Resolves to
0.08em
References
--letter-spacing-wide core
In theme “industrial”
--letter-spacing-wide core
Used by alias
Consumed in
qs-text.cssutilities.cssqs-tag.css

duration

--duration-press→ --duration-120industrial → --duration-0qs-button
Resolves to
120ms
References
--duration-120 core
In theme “industrial”
--duration-0 core
Used by alias
Consumed in
qs-button.css
--duration-hover→ --duration-200industrial → --duration-120qs-buttonqs-link
Resolves to
200ms
References
--duration-200 core
In theme “industrial”
--duration-120 core
Used by alias
Consumed in
qs-button.cssqs-link.css
--duration-release→ --duration-280industrial → --duration-200qs-button
Resolves to
280ms
References
--duration-280 core
In theme “industrial”
--duration-200 core
Used by alias
Consumed in
qs-button.css
--duration-reveal→ --duration-500unused
Resolves to
500ms
References
--duration-500 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--duration-enter→ --duration-200qs-selectqs-imageqs-dialog
Resolves to
200ms
References
--duration-200 core
Used by alias
Consumed in
qs-select.cssqs-image.cssqs-dialog.css
--duration-exit→ --duration-120industrial → --duration-0qs-selectqs-dialog
Resolves to
120ms
References
--duration-120 core
In theme “industrial”
--duration-0 core
Used by alias
Consumed in
qs-select.cssqs-dialog.css
--duration-ambient-settle→ --duration-5000utilities
Resolves to
5000ms
References
--duration-5000 core
Used by alias
Used by component
Consumed in
utilities.css
--duration-ambient-loop→ --duration-24000utilities
Resolves to
24000ms
References
--duration-24000 core
Used by alias
Used by component
Consumed in
utilities.css

easing

--easing-hover→ --easing-outindustrial → --easing-stepsqs-buttonqs-link
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-out core
In theme “industrial”
--easing-steps core
Used by alias
Consumed in
qs-button.cssqs-link.css
--easing-press→ --easing-outqs-button
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-out core
Used by alias
Used by component
--qs-button-easing-press
Consumed in
qs-button.css
--easing-release→ --easing-springindustrial → --easing-stepsqs-button
Resolves to
linear(0, 0.097, 0.301, 0.521, 0.712, 0.855, 0.95, 1.005, 1.031, 1.038, 1.035, 1.028, 1.019, 1.012, 1.006, 1.002, 1 66.7%, 1)
References
--easing-spring core
In theme “industrial”
--easing-steps core
Used by alias
Consumed in
qs-button.css
--easing-reveal→ --easing-outunused
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-out core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.
--easing-enter→ --easing-outindustrial → --easing-stepsqs-selectqs-imageqs-dialog
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-out core
In theme “industrial”
--easing-steps core
Used by alias
Consumed in
qs-select.cssqs-image.cssqs-dialog.css
--easing-exit→ --easing-outqs-selectqs-dialog
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-out core
Used by alias
Consumed in
qs-select.cssqs-dialog.css
--easing-ambient-settle→ --easing-oututilities
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-out core
Used by alias
Used by component
Consumed in
utilities.css
--easing-ambient-loop→ --easing-linearutilities
Resolves to
linear
References
--easing-linear core
Used by alias
Used by component
Consumed in
utilities.css

opacity

--opacity-disabled→ --opacity-40qs-selectfieldqs-button
Resolves to
0.4
References
--opacity-40 core
Used by alias
Consumed in
qs-select.cssfield.cssqs-button.css
--opacity-enabled→ --opacity-100unused
Resolves to
1
References
--opacity-100 core
Used by alias
Used by component
Consumed in
No stylesheet reads this token yet.

scale

--scale-pressed→ --scale-97industrial → --scale-100qs-button
Resolves to
0.97
References
--scale-97 core
In theme “industrial”
--scale-100 core
Used by alias
Used by component
--qs-button-scale-pressed
Consumed in
qs-button.css
--scale-rest→ --scale-100qs-buttonqs-dialog
Resolves to
1
References
--scale-100 core
Used by alias
Consumed in
qs-button.cssqs-dialog.css
--scale-enter→ --scale-97industrial → --scale-100qs-dialog
Resolves to
0.97
References
--scale-97 core
In theme “industrial”
--scale-100 core
Used by alias
Used by component
--qs-dialog-scale-enter
Consumed in
qs-dialog.css

type-case

--type-case-heading→ --text-case-noneindustrial → --text-case-uppercaseqs-headingutilitiesqs-dialog
Resolves to
none
References
--text-case-none core
In theme “industrial”
--text-case-uppercase core
Used by alias
Consumed in
qs-heading.cssutilities.cssqs-dialog.css
--type-case-control→ --text-case-noneindustrial → --text-case-uppercaseqs-button
Resolves to
none
References
--text-case-none core
In theme “industrial”
--text-case-uppercase core
Used by alias
Used by component
--qs-button-case
Consumed in
qs-button.css
--type-case-label→ --text-case-uppercaseqs-textutilitiesfieldqs-tag
Resolves to
uppercase
References
--text-case-uppercase core
Used by alias
Consumed in
qs-text.cssutilities.cssfield.cssqs-tag.css

glyph

--glyph-control-open→ --glyph-noneindustrial → --glyph-bracket-openqs-button
Resolves to
none
References
--glyph-none core
In theme “industrial”
--glyph-bracket-open core
Used by alias
Used by component
--qs-button-prefix
Consumed in
qs-button.css
--glyph-control-close→ --glyph-noneindustrial → --glyph-bracket-closeqs-button
Resolves to
none
References
--glyph-none core
In theme “industrial”
--glyph-bracket-close core
Used by alias
Used by component
--qs-button-suffix
Consumed in
qs-button.css

Component

Per-component decisions. Reference alias only.

text

--text-hero-family→ --font-headingqs-headingutilities
Resolves to
Geist
References
--font-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-hero-size→ --type-size-heroqs-headingutilities
Resolves to
clamp(3rem, 6vw + 1.5rem, 6rem)
References
--type-size-hero alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-hero-weight→ --type-weight-heavyqs-headingutilities
Resolves to
800
References
--type-weight-heavy alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-hero-line→ --type-leading-printqs-headingutilities
Resolves to
0.9
References
--type-leading-print alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-hero-tracking→ --type-tracking-displayqs-headingutilities
Resolves to
-0.05em
References
--type-tracking-display alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-hero-case→ --type-case-headingqs-headingutilities
Resolves to
none
References
--type-case-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-display-family→ --font-headingqs-headingutilities
Resolves to
Geist
References
--font-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-display-size→ --type-size-displayqs-headingutilities
Resolves to
clamp(2.5rem, 4vw + 1.5rem, 4rem)
References
--type-size-display alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-display-weight→ --type-weight-heavyqs-headingutilities
Resolves to
800
References
--type-weight-heavy alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-display-line→ --type-leading-displayqs-headingutilities
Resolves to
1.1
References
--type-leading-display alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-display-tracking→ --type-tracking-displayqs-headingutilities
Resolves to
-0.05em
References
--type-tracking-display alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-display-case→ --type-case-headingqs-headingutilities
Resolves to
none
References
--type-case-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-large-title-family→ --font-headingqs-headingutilities
Resolves to
Geist
References
--font-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-large-title-size→ --type-size-large-titleqs-headingutilities
Resolves to
clamp(2rem, 2vw + 1.5rem, 2.5rem)
References
--type-size-large-title alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-large-title-weight→ --type-weight-boldqs-headingutilities
Resolves to
700
References
--type-weight-bold alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-large-title-line→ --type-leading-displayqs-headingutilities
Resolves to
1.1
References
--type-leading-display alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-large-title-tracking→ --type-tracking-headingqs-headingutilities
Resolves to
-0.03em
References
--type-tracking-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-large-title-case→ --type-case-headingqs-headingutilities
Resolves to
none
References
--type-case-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-headline-family→ --font-headingqs-headingutilities
Resolves to
Geist
References
--font-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-headline-size→ --type-size-headlineqs-headingutilities
Resolves to
28px
References
--type-size-headline alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-headline-weight→ --type-weight-semiboldqs-headingutilities
Resolves to
600
References
--type-weight-semibold alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-headline-line→ --type-leading-headingqs-headingutilities
Resolves to
1.25
References
--type-leading-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-headline-tracking→ --type-tracking-headingqs-headingutilities
Resolves to
-0.03em
References
--type-tracking-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-headline-case→ --type-case-headingqs-headingutilities
Resolves to
none
References
--type-case-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-title-family→ --font-headingqs-headingutilities
Resolves to
Geist
References
--font-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-title-size→ --type-size-titleqs-headingutilities
Resolves to
21px
References
--type-size-title alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-title-weight→ --type-weight-semiboldqs-headingutilities
Resolves to
600
References
--type-weight-semibold alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-title-line→ --type-leading-headingqs-headingutilities
Resolves to
1.25
References
--type-leading-heading alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-title-tracking→ --type-tracking-bodyqs-headingutilities
Resolves to
-0.01em
References
--type-tracking-body alias
Used by alias
Used by component
Consumed in
qs-heading.cssutilities.css
--text-body-family→ --font-bodyqs-textutilities
Resolves to
Geist
References
--font-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-body-size→ --type-size-bodyqs-textutilities
Resolves to
17px
References
--type-size-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-body-weight→ --type-weight-regularqs-textutilities
Resolves to
400
References
--type-weight-regular alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-body-line→ --type-leading-bodyqs-textutilities
Resolves to
1.47
References
--type-leading-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-body-tracking→ --type-tracking-bodyqs-textutilities
Resolves to
-0.01em
References
--type-tracking-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-footnote-family→ --font-bodyqs-textutilities
Resolves to
Geist
References
--font-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-footnote-size→ --type-size-footnoteqs-textutilities
Resolves to
14px
References
--type-size-footnote alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-footnote-weight→ --type-weight-regularqs-textutilities
Resolves to
400
References
--type-weight-regular alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-footnote-line→ --type-leading-bodyqs-textutilities
Resolves to
1.47
References
--type-leading-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-footnote-tracking→ --type-tracking-bodyqs-textutilities
Resolves to
-0.01em
References
--type-tracking-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-label-family→ --font-monoqs-textutilities
Resolves to
Geist Mono
References
--font-mono alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-label-size→ --type-size-captionqs-textutilities
Resolves to
12px
References
--type-size-caption alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-label-weight→ --type-weight-mediumqs-textutilities
Resolves to
500
References
--type-weight-medium alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-label-line→ --type-leading-solidqs-textutilities
Resolves to
1
References
--type-leading-solid alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-label-tracking→ --type-tracking-labelqs-textutilities
Resolves to
0.08em
References
--type-tracking-label alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-label-case→ --type-case-labelqs-textutilities
Resolves to
uppercase
References
--type-case-label alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-print-family→ --font-printqs-textutilities
Resolves to
Geist Pixel Square
References
--font-print alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-print-size→ --type-size-large-titleqs-textutilities
Resolves to
clamp(2rem, 2vw + 1.5rem, 2.5rem)
References
--type-size-large-title alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-print-weight→ --type-weight-regularqs-textutilities
Resolves to
400
References
--type-weight-regular alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-print-line→ --type-leading-printqs-textutilities
Resolves to
0.9
References
--type-leading-print alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-print-tracking→ --type-tracking-monoqs-textutilities
Resolves to
0
References
--type-tracking-mono alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-code-family→ --font-monoqs-textutilities
Resolves to
Geist Mono
References
--font-mono alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-code-size→ --type-size-footnoteqs-textutilities
Resolves to
14px
References
--type-size-footnote alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-code-weight→ --type-weight-regularqs-textutilities
Resolves to
400
References
--type-weight-regular alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-code-line→ --type-leading-bodyqs-textutilities
Resolves to
1.47
References
--type-leading-body alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css
--text-code-tracking→ --type-tracking-monoqs-textutilities
Resolves to
0
References
--type-tracking-mono alias
Used by alias
Used by component
Consumed in
qs-text.cssutilities.css

focus

--focus-outline-color→ --color-focusqs-buttonqs-linkqs-selectfield
Resolves to
#0071e3
References
--color-focus alias
Used by alias
Used by component
Consumed in
qs-button.cssqs-link.cssqs-select.cssfield.css
--focus-outline-width→ --border-width-focusqs-buttonqs-linkqs-selectfield
Resolves to
2px
References
--border-width-focus alias
Used by alias
Used by component
Consumed in
qs-button.cssqs-link.cssqs-select.cssfield.css
--focus-outline-offset→ --space-2xsqs-buttonqs-linkfield
Resolves to
2px
References
--space-2xs alias
Used by alias
Used by component
Consumed in
qs-button.cssqs-link.cssfield.css

field

--field-gap→ --space-xsqs-selectfield
Resolves to
4px
References
--space-xs alias
Used by alias
Used by component
Consumed in
qs-select.cssfield.css
--field-label-font→ --font-controlfield
Resolves to
Geist
References
--font-control alias
Used by alias
Used by component
Consumed in
field.css
--field-label-size→ --type-size-footnotefield
Resolves to
14px
References
--type-size-footnote alias
Used by alias
Used by component
Consumed in
field.css
--field-label-weight→ --type-weight-mediumqs-selectfield
Resolves to
500
References
--type-weight-medium alias
Used by alias
Used by component
Consumed in
qs-select.cssfield.css
--field-label-case→ --type-case-labelfield
Resolves to
uppercase
References
--type-case-label alias
Used by alias
Used by component
Consumed in
field.css
--field-label-color→ --color-textfield
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
field.css
--field-required-color→ --color-text-secondaryfield
Resolves to
#6e6e73
References
--color-text-secondary alias
Used by alias
Used by component
Consumed in
field.css
--field-hint-size→ --type-size-footnotefield
Resolves to
14px
References
--type-size-footnote alias
Used by alias
Used by component
Consumed in
field.css
--field-hint-color→ --color-text-secondaryfield
Resolves to
#6e6e73
References
--color-text-secondary alias
Used by alias
Used by component
Consumed in
field.css
--field-error-size→ --type-size-footnotefield
Resolves to
14px
References
--type-size-footnote alias
Used by alias
Used by component
Consumed in
field.css
--field-error-color→ --color-text-dangerfield
Resolves to
#d22b12
References
--color-text-danger alias
Used by alias
Used by component
Consumed in
field.css
--field-font→ --font-controlfield
Resolves to
Geist
References
--font-control alias
Used by alias
Used by component
Consumed in
field.css
--field-font-size→ --type-size-bodyfield
Resolves to
17px
References
--type-size-body alias
Used by alias
Used by component
Consumed in
field.css
--field-line-height→ --type-leading-bodyfield
Resolves to
1.47
References
--type-leading-body alias
Used by alias
Used by component
Consumed in
field.css
--field-text→ --color-textqs-selectfield
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-select.cssfield.css
--field-bg→ --color-surfacefield
Resolves to
#ffffff
References
--color-surface alias
Used by alias
Used by component
Consumed in
field.css
--field-border-width→ --border-width-controlqs-selectfield
Resolves to
2px
References
--border-width-control alias
Used by alias
Used by component
Consumed in
qs-select.cssfield.css
--field-border-stylesolidfield
Resolves to
solid
Used by alias
Used by component
Consumed in
field.css
--field-border-color→ --color-border-strongfield
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
field.css
--field-border-color-invalid→ --color-text-dangerfield
Resolves to
#d22b12
References
--color-text-danger alias
Used by alias
Used by component
Consumed in
field.css
--field-radius→ --radius-controlqs-selectfield
Resolves to
0
References
--radius-control alias
Used by alias
Used by component
Consumed in
qs-select.cssfield.css
--field-padding-x→ --space-mdfield
Resolves to
16px
References
--space-md alias
Used by alias
Used by component
Consumed in
field.css
--field-padding-y→ --space-smfield
Resolves to
8px
References
--space-sm alias
Used by alias
Used by component
Consumed in
field.css
--field-disabled-opacity→ --opacity-disabledqs-selectfield
Resolves to
0.4
References
--opacity-disabled alias
Used by alias
Used by component
Consumed in
qs-select.cssfield.css

qs-button

--qs-button-font→ --font-controlqs-button
Resolves to
Geist
References
--font-control alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-font-size→ --type-size-bodyqs-button
Resolves to
17px
References
--type-size-body alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-font-weight→ --type-weight-mediumqs-button
Resolves to
500
References
--type-weight-medium alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-line-height→ --type-leading-bodyqs-button
Resolves to
1.47
References
--type-leading-body alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-tracking→ --type-tracking-bodyqs-button
Resolves to
-0.01em
References
--type-tracking-body alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-case→ --type-case-controlqs-button
Resolves to
none
References
--type-case-control alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-prefix→ --glyph-control-openqs-button
Resolves to
none
References
--glyph-control-open alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-suffix→ --glyph-control-closeqs-button
Resolves to
none
References
--glyph-control-close alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-gap→ --space-smqs-button
Resolves to
8px
References
--space-sm alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-padding-x→ --space-lgqs-button
Resolves to
24px
References
--space-lg alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-padding-y→ --space-smqs-button
Resolves to
8px
References
--space-sm alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-radius→ --radius-controlqs-button
Resolves to
0
References
--radius-control alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-border-width→ --border-width-controlqs-button
Resolves to
2px
References
--border-width-control alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-border-stylesolidqs-button
Resolves to
solid
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-bg→ --color-surfaceqs-button
Resolves to
#ffffff
References
--color-surface alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-bg-hover→ --color-surface-hoverqs-button
Resolves to
#ffffff
References
--color-surface-hover alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-text→ --color-textqs-button
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-border-color→ --color-border-strongqs-button
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-shadow-color→ --color-accentqs-button
Resolves to
#d22b12
References
--color-accent alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-primary-bg→ --color-actionqs-button
Resolves to
#000000
References
--color-action alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-primary-bg-hover→ --color-action-hoverqs-button
Resolves to
#424245
References
--color-action-hover alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-primary-text→ --color-on-actionqs-button
Resolves to
#ffffff
References
--color-on-action alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-primary-border-color→ --color-actionqs-button
Resolves to
#000000
References
--color-action alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-primary-shadow-color→ --color-accentqs-button
Resolves to
#d22b12
References
--color-accent alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-danger-bg→ --color-dangerqs-button
Resolves to
#d22b12
References
--color-danger alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-danger-bg-hover→ --color-danger-hoverqs-button
Resolves to
#a8200c
References
--color-danger-hover alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-danger-text→ --color-on-dangerqs-button
Resolves to
#ffffff
References
--color-on-danger alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-danger-border-color→ --color-dangerqs-button
Resolves to
#d22b12
References
--color-danger alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-danger-shadow-color→ --color-border-strongqs-button
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-success-bg→ --color-successqs-button
Resolves to
#1a7f37
References
--color-success alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-success-bg-hover→ --color-success-hoverqs-button
Resolves to
#116329
References
--color-success-hover alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-success-text→ --color-on-successqs-button
Resolves to
#ffffff
References
--color-on-success alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-success-border-color→ --color-successqs-button
Resolves to
#1a7f37
References
--color-success alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-success-shadow-color→ --color-border-strongqs-button
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-shadow-rest→ --offset-restqs-button
Resolves to
0px
References
--offset-rest alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-shadow-lift→ --offset-liftqs-button
Resolves to
4px
References
--offset-lift alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-nudge→ --offset-nudgeqs-button
Resolves to
2px
References
--offset-nudge alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-scale-rest→ --scale-restqs-button
Resolves to
1
References
--scale-rest alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-scale-pressed→ --scale-pressedqs-button
Resolves to
0.97
References
--scale-pressed alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-duration-hover→ --duration-hoverqs-button
Resolves to
200ms
References
--duration-hover alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-easing-hover→ --easing-hoverqs-button
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-hover alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-duration-press→ --duration-pressqs-button
Resolves to
120ms
References
--duration-press alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-easing-press→ --easing-pressqs-button
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-press alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-duration-release→ --duration-releaseqs-button
Resolves to
280ms
References
--duration-release alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-easing-release→ --easing-releaseqs-button
Resolves to
linear(0, 0.097, 0.301, 0.521, 0.712, 0.855, 0.95, 1.005, 1.031, 1.038, 1.035, 1.028, 1.019, 1.012, 1.006, 1.002, 1 66.7%, 1)
References
--easing-release alias
Used by alias
Used by component
Consumed in
qs-button.css
--qs-button-disabled-opacity→ --opacity-disabledqs-button
Resolves to
0.4
References
--opacity-disabled alias
Used by alias
Used by component
Consumed in
qs-button.css

qs-link

--qs-link-text→ --color-text-accentqs-link
Resolves to
#d22b12
References
--color-text-accent alias
Used by alias
Used by component
Consumed in
qs-link.css
--qs-link-text-hover→ --color-textqs-link
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-link.css
--qs-link-text-visited→ --color-text-secondaryqs-link
Resolves to
#6e6e73
References
--color-text-secondary alias
Used by alias
Used by component
Consumed in
qs-link.css
--qs-link-text-current→ --color-textqs-link
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-link.css

qs-select

--qs-select-picker-bg→ --color-surfaceqs-select
Resolves to
#ffffff
References
--color-surface alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-picker-border-color→ --color-border-strongqs-select
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-picker-shadow-offset→ --offset-liftqs-select
Resolves to
4px
References
--offset-lift alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-picker-shadow-color→ --color-accentqs-select
Resolves to
#d22b12
References
--color-accent alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-picker-gap→ --space-xsqs-select
Resolves to
4px
References
--space-xs alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-picker-offset-enter→ --offset-liftqs-select
Resolves to
4px
References
--offset-lift alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-option-padding-x→ --space-mdqs-select
Resolves to
16px
References
--space-md alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-option-padding-y→ --space-smqs-select
Resolves to
8px
References
--space-sm alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-option-bg-active→ --color-surface-sunkenqs-select
Resolves to
#efede6
References
--color-surface-sunken alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-checkmark-color→ --color-text-accentqs-select
Resolves to
#d22b12
References
--color-text-accent alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-duration-enter→ --duration-enterqs-select
Resolves to
200ms
References
--duration-enter alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-easing-enter→ --easing-enterqs-select
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-enter alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-duration-exit→ --duration-exitqs-select
Resolves to
120ms
References
--duration-exit alias
Used by alias
Used by component
Consumed in
qs-select.css
--qs-select-easing-exit→ --easing-exitqs-select
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-exit alias
Used by alias
Used by component
Consumed in
qs-select.css

qs-tag

--qs-tag-font→ --font-monoqs-tag
Resolves to
Geist Mono
References
--font-mono alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-font-size→ --type-size-captionqs-tag
Resolves to
12px
References
--type-size-caption alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-font-weight→ --type-weight-mediumqs-tag
Resolves to
500
References
--type-weight-medium alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-line-height→ --type-leading-solidqs-tag
Resolves to
1
References
--type-leading-solid alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-tracking→ --type-tracking-labelqs-tag
Resolves to
0.08em
References
--type-tracking-label alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-case→ --type-case-labelqs-tag
Resolves to
uppercase
References
--type-case-label alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-padding-x→ --space-smqs-tag
Resolves to
8px
References
--space-sm alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-padding-y→ --space-2xsqs-tag
Resolves to
2px
References
--space-2xs alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-gap→ --space-xsqs-tag
Resolves to
4px
References
--space-xs alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-border-width→ --border-width-hairlineqs-tag
Resolves to
1px
References
--border-width-hairline alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-border-stylesolidqs-tag
Resolves to
solid
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-radius→ --radius-controlqs-tag
Resolves to
0
References
--radius-control alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-text→ --color-textqs-tag
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-border-color→ --color-border-strongqs-tag
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-strong-bg→ --color-surface-inverseqs-tag
Resolves to
#000000
References
--color-surface-inverse alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-strong-text→ --color-text-inverseqs-tag
Resolves to
#ffffff
References
--color-text-inverse alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-accent-text→ --color-text-accentqs-tag
Resolves to
#d22b12
References
--color-text-accent alias
Used by alias
Used by component
Consumed in
qs-tag.css
--qs-tag-accent-border-color→ --color-text-accentqs-tag
Resolves to
#d22b12
References
--color-text-accent alias
Used by alias
Used by component
Consumed in
qs-tag.css

qs-image

--qs-image-bg→ --color-surface-sunkenqs-image
Resolves to
#efede6
References
--color-surface-sunken alias
Used by alias
Used by component
Consumed in
qs-image.css
--qs-image-icon-color→ --color-text-secondaryqs-image
Resolves to
#6e6e73
References
--color-text-secondary alias
Used by alias
Used by component
Consumed in
qs-image.css
--qs-image-icon-size→ --dimension-icon-lgqs-image
Resolves to
32px
References
--dimension-icon-lg alias
Used by alias
Used by component
Consumed in
qs-image.css
--qs-image-radius→ --radius-surfaceqs-image
Resolves to
0
References
--radius-surface alias
Used by alias
Used by component
Consumed in
qs-image.css
--qs-image-duration-enter→ --duration-enterqs-image
Resolves to
200ms
References
--duration-enter alias
Used by alias
Used by component
Consumed in
qs-image.css
--qs-image-easing-enter→ --easing-enterqs-image
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-enter alias
Used by alias
Used by component
Consumed in
qs-image.css

qs-icon

--qs-icon-size1emqs-icon
Resolves to
1em
Used by alias
Used by component
Consumed in
qs-icon.css
--qs-icon-size-sm→ --dimension-icon-smqs-icon
Resolves to
16px
References
--dimension-icon-sm alias
Used by alias
Used by component
Consumed in
qs-icon.css
--qs-icon-size-md→ --dimension-icon-mdqs-icon
Resolves to
24px
References
--dimension-icon-md alias
Used by alias
Used by component
Consumed in
qs-icon.css
--qs-icon-size-lg→ --dimension-icon-lgqs-icon
Resolves to
32px
References
--dimension-icon-lg alias
Used by alias
Used by component
Consumed in
qs-icon.css
--qs-icon-colorcurrentColorqs-icon
Resolves to
currentColor
Used by alias
Used by component
Consumed in
qs-icon.css
--qs-icon-baseline-shift-0.125emqs-icon
Resolves to
-0.125em
Used by alias
Used by component
Consumed in
qs-icon.css

qs-heading

--qs-heading-color→ --color-textqs-heading
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-heading.css

qs-text

--qs-text-color→ --color-textqs-text
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-text.css
--qs-text-footnote-color→ --color-text-secondaryqs-text
Resolves to
#6e6e73
References
--color-text-secondary alias
Used by alias
Used by component
Consumed in
qs-text.css

qs-dialog

--qs-dialog-width→ --dimension-dialogqs-dialog
Resolves to
560px
References
--dimension-dialog alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-viewport-gap→ --space-mdqs-dialog
Resolves to
16px
References
--space-md alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-bg→ --color-surfaceqs-dialog
Resolves to
#ffffff
References
--color-surface alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-text→ --color-textqs-dialog
Resolves to
#1d1d1f
References
--color-text alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-border-width→ --border-width-controlqs-dialog
Resolves to
2px
References
--border-width-control alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-border-color→ --color-border-strongqs-dialog
Resolves to
#000000
References
--color-border-strong alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-radius→ --radius-surfaceqs-dialog
Resolves to
0
References
--radius-surface alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-shadow-offset→ --offset-floatqs-dialog
Resolves to
8px
References
--offset-float alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-shadow-color→ --color-accentqs-dialog
Resolves to
#d22b12
References
--color-accent alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-backdrop→ --color-backdropqs-dialog
Resolves to
rgb(0 0 0 / 0.4)
References
--color-backdrop alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-padding→ --space-lgqs-dialog
Resolves to
24px
References
--space-lg alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-gap→ --space-mdqs-dialog
Resolves to
16px
References
--space-md alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-divider-width→ --border-width-hairlineqs-dialog
Resolves to
1px
References
--border-width-hairline alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-divider-color→ --color-borderqs-dialog
Resolves to
#d2d2d7
References
--color-border alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-title-family→ --font-headingqs-dialog
Resolves to
Geist
References
--font-heading alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-title-size→ --type-size-titleqs-dialog
Resolves to
21px
References
--type-size-title alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-title-weight→ --type-weight-semiboldqs-dialog
Resolves to
600
References
--type-weight-semibold alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-title-line→ --type-leading-headingqs-dialog
Resolves to
1.25
References
--type-leading-heading alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-title-tracking→ --type-tracking-headingqs-dialog
Resolves to
-0.03em
References
--type-tracking-heading alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-title-case→ --type-case-headingqs-dialog
Resolves to
none
References
--type-case-heading alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-body-family→ --font-bodyqs-dialog
Resolves to
Geist
References
--font-body alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-body-size→ --type-size-bodyqs-dialog
Resolves to
17px
References
--type-size-body alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-body-line→ --type-leading-bodyqs-dialog
Resolves to
1.47
References
--type-leading-body alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-body-tracking→ --type-tracking-bodyqs-dialog
Resolves to
-0.01em
References
--type-tracking-body alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-duration-enter→ --duration-enterqs-dialog
Resolves to
200ms
References
--duration-enter alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-easing-enter→ --easing-enterqs-dialog
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-enter alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-duration-exit→ --duration-exitqs-dialog
Resolves to
120ms
References
--duration-exit alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-easing-exit→ --easing-exitqs-dialog
Resolves to
cubic-bezier(0.32, 0.72, 0, 1)
References
--easing-exit alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-scale-enter→ --scale-enterqs-dialog
Resolves to
0.97
References
--scale-enter alias
Used by alias
Used by component
Consumed in
qs-dialog.css
--qs-dialog-scale-rest→ --scale-restqs-dialog
Resolves to
1
References
--scale-rest alias
Used by alias
Used by component
Consumed in
qs-dialog.css