CSS variables
Every --opsin-* custom property, its default in both themes, what it controls and which selectors read it.
How this is generated
Source: tokens/*.json, compiled to app/tokens.generated.css.
Script: scripts/build-tokens.mts emits the stylesheet;
scripts/build-reference.mts writes this page from the same data.
Command: pnpm run generate.
Every custom property the system defines is prefixed --opsin-. The prefix is
not decoration: it is how you can tell, in a devtools panel showing four
stylesheets, which variables you are allowed to override and which belong to the
documentation chrome or to Tailwind. If it does not start with --opsin-, it is
not ours and it is not covered by the
versioning policy.
Five columns. Variable is the property name. Light and Dark are the resolved defaults in each theme, printed as the value actually computed rather than as the expression that produced it. Controls is the one thing it decides. Read by names the selectors that consume it. That is what tells you whether overriding it in one place is safe.
This page lists variables, not overrides. Setting a variable is described in
Theming → CSS variables, which is written for
consumers who are not using Tailwind. Adding one of your own is
Adding your own tokens. The rule those pages
share: override at a scope you own, never on :root in a library.
What is deliberately excluded. shadcn's --background / --foreground
family, fumadocs' --fd-* variables and lyra's chrome variables all appear in
the same cascade on this site and none of them are opsinjs tokens. Also excluded
are internal variables used to pass a computed value between two rules inside one
component; those are unprefixed, undocumented, and may change in a patch.
CSS variables
:root, .opsin-product
| Variable | Value | Controls |
|---|---|---|
--opsin-neutral-0 | oklch(1 0 0) | Neutral ramp, step 0. |
--opsin-neutral-50 | oklch(0.985 0.002 250) | Neutral ramp, step 50. |
--opsin-neutral-100 | oklch(0.967 0.003 250) | Neutral ramp, step 100. |
--opsin-neutral-200 | oklch(0.929 0.004 250) | Neutral ramp, step 200. |
--opsin-neutral-300 | oklch(0.871 0.005 250) | Neutral ramp, step 300. |
--opsin-neutral-400 | oklch(0.708 0.008 250) | Neutral ramp, step 400. |
--opsin-neutral-500 | oklch(0.556 0.009 250) | Neutral ramp, step 500. |
--opsin-neutral-600 | oklch(0.439 0.009 250) | Neutral ramp, step 600. |
--opsin-neutral-700 | oklch(0.371 0.008 250) | Neutral ramp, step 700. |
--opsin-neutral-800 | oklch(0.269 0.007 250) | Neutral ramp, step 800. |
--opsin-neutral-900 | oklch(0.205 0.006 250) | Neutral ramp, step 900. |
--opsin-neutral-950 | oklch(0.145 0.005 250) | Neutral ramp, step 950. |
--opsin-neutral-1000 | oklch(0 0 0) | Neutral ramp, step 1000. |
--opsin-chrome-background | oklch(0.985 0.002 250) | Chrome role background, resolved to the ladder step it names. |
--opsin-chrome-foreground | oklch(0.205 0.006 250) | Chrome role foreground, resolved to the ladder step it names. |
--opsin-chrome-card | oklch(1 0 0) | Chrome role card, resolved to the ladder step it names. |
--opsin-chrome-card-foreground | oklch(0.205 0.006 250) | Chrome role cardForeground, resolved to the ladder step it names. |
--opsin-chrome-muted | oklch(0.967 0.003 250) | Chrome role muted, resolved to the ladder step it names. |
--opsin-chrome-muted-foreground | oklch(0.439 0.009 250) | Chrome role mutedForeground, resolved to the ladder step it names. |
--opsin-chrome-border | oklch(0.556 0.009 250) | Chrome role border, resolved to the ladder step it names. |
--opsin-chrome-input | oklch(0.556 0.009 250) | Chrome role input, resolved to the ladder step it names. |
--opsin-chrome-ring | oklch(0.55 0.13 250) | Chrome role ring, resolved to the ladder step it names. |
--opsin-chrome-primary | oklch(0.51 0.135 250) | Chrome role primary, resolved to the ladder step it names. |
--opsin-chrome-primary-foreground | oklch(0.99 0 0) | Chrome role primaryForeground, resolved to the ladder step it names. |
--opsin-category-sleep-50 | oklch(0.972 0.013 275) | Sleep ramp, step 50. |
--opsin-category-sleep-100 | oklch(0.941 0.028 275) | Sleep ramp, step 100. |
--opsin-category-sleep-200 | oklch(0.884 0.057 275) | Sleep ramp, step 200. |
--opsin-category-sleep-300 | oklch(0.806 0.092 275) | Sleep ramp, step 300. |
--opsin-category-sleep-400 | oklch(0.714 0.123 275) | Sleep ramp, step 400. |
--opsin-category-sleep-500 | oklch(0.622 0.14 275) | Sleep ramp, step 500. |
--opsin-category-sleep-600 | oklch(0.541 0.136 275) | Sleep ramp, step 600. |
--opsin-category-sleep-700 | oklch(0.452 0.123 275) | Sleep ramp, step 700. |
--opsin-category-sleep-800 | oklch(0.362 0.104 275) | Sleep ramp, step 800. |
--opsin-category-sleep-900 | oklch(0.276 0.081 275) | Sleep ramp, step 900. |
--opsin-category-sleep-950 | oklch(0.208 0.062 275) | Sleep ramp, step 950. |
--opsin-category-sleep-surface | oklch(0.972 0.013 275) | The tinted background a component in this ramp sits on. |
--opsin-category-sleep-line | oklch(0.541 0.136 275) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-sleep-ink | oklch(0.362 0.104 275) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-sleep-accent | oklch(0.58 0.14 275) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-heart-50 | oklch(0.972 0.014 15) | Heart ramp, step 50. |
--opsin-category-heart-100 | oklch(0.941 0.03 15) | Heart ramp, step 100. |
--opsin-category-heart-200 | oklch(0.884 0.062 15) | Heart ramp, step 200. |
--opsin-category-heart-300 | oklch(0.806 0.112 15) | Heart ramp, step 300. |
--opsin-category-heart-400 | oklch(0.714 0.15 15) | Heart ramp, step 400. |
--opsin-category-heart-500 | oklch(0.622 0.17 15) | Heart ramp, step 500. |
--opsin-category-heart-600 | oklch(0.541 0.165 15) | Heart ramp, step 600. |
--opsin-category-heart-700 | oklch(0.452 0.15 15) | Heart ramp, step 700. |
--opsin-category-heart-800 | oklch(0.362 0.126 15) | Heart ramp, step 800. |
--opsin-category-heart-900 | oklch(0.276 0.099 15) | Heart ramp, step 900. |
--opsin-category-heart-950 | oklch(0.208 0.075 15) | Heart ramp, step 950. |
--opsin-category-heart-surface | oklch(0.972 0.014 15) | The tinted background a component in this ramp sits on. |
--opsin-category-heart-line | oklch(0.541 0.165 15) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-heart-ink | oklch(0.362 0.126 15) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-heart-accent | oklch(0.62 0.17 15) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-activity-50 | oklch(0.972 0.022 140) | Activity ramp, step 50. |
--opsin-category-activity-100 | oklch(0.941 0.038 140) | Activity ramp, step 100. |
--opsin-category-activity-200 | oklch(0.884 0.067 140) | Activity ramp, step 200. |
--opsin-category-activity-300 | oklch(0.806 0.106 140) | Activity ramp, step 300. |
--opsin-category-activity-400 | oklch(0.714 0.141 140) | Activity ramp, step 400. |
--opsin-category-activity-500 | oklch(0.622 0.16 140) | Activity ramp, step 500. |
--opsin-category-activity-600 | oklch(0.541 0.155 140) | Activity ramp, step 600. |
--opsin-category-activity-700 | oklch(0.452 0.141 140) | Activity ramp, step 700. |
--opsin-category-activity-800 | oklch(0.362 0.118 140) | Activity ramp, step 800. |
--opsin-category-activity-900 | oklch(0.276 0.092 140) | Activity ramp, step 900. |
--opsin-category-activity-950 | oklch(0.208 0.07 140) | Activity ramp, step 950. |
--opsin-category-activity-surface | oklch(0.972 0.022 140) | The tinted background a component in this ramp sits on. |
--opsin-category-activity-line | oklch(0.541 0.155 140) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-activity-ink | oklch(0.362 0.118 140) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-activity-accent | oklch(0.7 0.16 140) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-nutrition-50 | oklch(0.972 0.02 70) | Nutrition ramp, step 50. |
--opsin-category-nutrition-100 | oklch(0.941 0.034 70) | Nutrition ramp, step 100. |
--opsin-category-nutrition-200 | oklch(0.884 0.059 70) | Nutrition ramp, step 200. |
--opsin-category-nutrition-300 | oklch(0.806 0.092 70) | Nutrition ramp, step 300. |
--opsin-category-nutrition-400 | oklch(0.714 0.123 70) | Nutrition ramp, step 400. |
--opsin-category-nutrition-500 | oklch(0.622 0.135 70) | Nutrition ramp, step 500. |
--opsin-category-nutrition-600 | oklch(0.541 0.118 70) | Nutrition ramp, step 600. |
--opsin-category-nutrition-700 | oklch(0.452 0.099 70) | Nutrition ramp, step 700. |
--opsin-category-nutrition-800 | oklch(0.362 0.08 70) | Nutrition ramp, step 800. |
--opsin-category-nutrition-900 | oklch(0.276 0.062 70) | Nutrition ramp, step 900. |
--opsin-category-nutrition-950 | oklch(0.208 0.049 70) | Nutrition ramp, step 950. |
--opsin-category-nutrition-surface | oklch(0.972 0.02 70) | The tinted background a component in this ramp sits on. |
--opsin-category-nutrition-line | oklch(0.541 0.118 70) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-nutrition-ink | oklch(0.362 0.08 70) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-nutrition-accent | oklch(0.75 0.14 70) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-mind-50 | oklch(0.972 0.018 310) | Mind ramp, step 50. |
--opsin-category-mind-100 | oklch(0.941 0.034 310) | Mind ramp, step 100. |
--opsin-category-mind-200 | oklch(0.884 0.059 310) | Mind ramp, step 200. |
--opsin-category-mind-300 | oklch(0.806 0.092 310) | Mind ramp, step 300. |
--opsin-category-mind-400 | oklch(0.714 0.123 310) | Mind ramp, step 400. |
--opsin-category-mind-500 | oklch(0.622 0.14 310) | Mind ramp, step 500. |
--opsin-category-mind-600 | oklch(0.541 0.136 310) | Mind ramp, step 600. |
--opsin-category-mind-700 | oklch(0.452 0.123 310) | Mind ramp, step 700. |
--opsin-category-mind-800 | oklch(0.362 0.104 310) | Mind ramp, step 800. |
--opsin-category-mind-900 | oklch(0.276 0.081 310) | Mind ramp, step 900. |
--opsin-category-mind-950 | oklch(0.208 0.062 310) | Mind ramp, step 950. |
--opsin-category-mind-surface | oklch(0.972 0.018 310) | The tinted background a component in this ramp sits on. |
--opsin-category-mind-line | oklch(0.541 0.136 310) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-mind-ink | oklch(0.362 0.104 310) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-mind-accent | oklch(0.62 0.14 310) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-labs-50 | oklch(0.972 0.015 210) | Labs ramp, step 50. |
--opsin-category-labs-100 | oklch(0.941 0.026 210) | Labs ramp, step 100. |
--opsin-category-labs-200 | oklch(0.884 0.046 210) | Labs ramp, step 200. |
--opsin-category-labs-300 | oklch(0.806 0.073 210) | Labs ramp, step 300. |
--opsin-category-labs-400 | oklch(0.714 0.097 210) | Labs ramp, step 400. |
--opsin-category-labs-500 | oklch(0.622 0.108 210) | Labs ramp, step 500. |
--opsin-category-labs-600 | oklch(0.541 0.094 210) | Labs ramp, step 600. |
--opsin-category-labs-700 | oklch(0.452 0.079 210) | Labs ramp, step 700. |
--opsin-category-labs-800 | oklch(0.362 0.063 210) | Labs ramp, step 800. |
--opsin-category-labs-900 | oklch(0.276 0.049 210) | Labs ramp, step 900. |
--opsin-category-labs-950 | oklch(0.208 0.038 210) | Labs ramp, step 950. |
--opsin-category-labs-surface | oklch(0.972 0.015 210) | The tinted background a component in this ramp sits on. |
--opsin-category-labs-line | oklch(0.541 0.094 210) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-labs-ink | oklch(0.362 0.063 210) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-labs-accent | oklch(0.6 0.11 210) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-steady-50 | oklch(0.972 0.015 178) | Steady ramp, step 50. |
--opsin-status-steady-100 | oklch(0.941 0.026 178) | Steady ramp, step 100. |
--opsin-status-steady-200 | oklch(0.884 0.046 178) | Steady ramp, step 200. |
--opsin-status-steady-300 | oklch(0.806 0.073 178) | Steady ramp, step 300. |
--opsin-status-steady-400 | oklch(0.714 0.097 178) | Steady ramp, step 400. |
--opsin-status-steady-500 | oklch(0.622 0.11 178) | Steady ramp, step 500. |
--opsin-status-steady-600 | oklch(0.541 0.1 178) | Steady ramp, step 600. |
--opsin-status-steady-700 | oklch(0.452 0.084 178) | Steady ramp, step 700. |
--opsin-status-steady-800 | oklch(0.362 0.067 178) | Steady ramp, step 800. |
--opsin-status-steady-900 | oklch(0.276 0.052 178) | Steady ramp, step 900. |
--opsin-status-steady-950 | oklch(0.208 0.041 178) | Steady ramp, step 950. |
--opsin-status-steady-surface | oklch(0.972 0.015 178) | The tinted background a component in this ramp sits on. |
--opsin-status-steady-line | oklch(0.541 0.1 178) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-steady-ink | oklch(0.362 0.067 178) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-steady-accent | oklch(0.62 0.11 178) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-watch-50 | oklch(0.972 0.02 82) | Watch ramp, step 50. |
--opsin-status-watch-100 | oklch(0.941 0.034 82) | Watch ramp, step 100. |
--opsin-status-watch-200 | oklch(0.884 0.059 82) | Watch ramp, step 200. |
--opsin-status-watch-300 | oklch(0.806 0.092 82) | Watch ramp, step 300. |
--opsin-status-watch-400 | oklch(0.714 0.123 82) | Watch ramp, step 400. |
--opsin-status-watch-500 | oklch(0.622 0.129 82) | Watch ramp, step 500. |
--opsin-status-watch-600 | oklch(0.541 0.112 82) | Watch ramp, step 600. |
--opsin-status-watch-700 | oklch(0.452 0.094 82) | Watch ramp, step 700. |
--opsin-status-watch-800 | oklch(0.362 0.076 82) | Watch ramp, step 800. |
--opsin-status-watch-900 | oklch(0.276 0.059 82) | Watch ramp, step 900. |
--opsin-status-watch-950 | oklch(0.208 0.046 82) | Watch ramp, step 950. |
--opsin-status-watch-surface | oklch(0.972 0.02 82) | The tinted background a component in this ramp sits on. |
--opsin-status-watch-line | oklch(0.541 0.112 82) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-watch-ink | oklch(0.362 0.076 82) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-watch-accent | oklch(0.60 0.123 82) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-attention-50 | oklch(0.972 0.015 45) | Needs attention ramp, step 50. |
--opsin-status-attention-100 | oklch(0.941 0.032 45) | Needs attention ramp, step 100. |
--opsin-status-attention-200 | oklch(0.884 0.063 45) | Needs attention ramp, step 200. |
--opsin-status-attention-300 | oklch(0.806 0.099 45) | Needs attention ramp, step 300. |
--opsin-status-attention-400 | oklch(0.714 0.132 45) | Needs attention ramp, step 400. |
--opsin-status-attention-500 | oklch(0.622 0.15 45) | Needs attention ramp, step 500. |
--opsin-status-attention-600 | oklch(0.541 0.145 45) | Needs attention ramp, step 600. |
--opsin-status-attention-700 | oklch(0.452 0.13 45) | Needs attention ramp, step 700. |
--opsin-status-attention-800 | oklch(0.362 0.105 45) | Needs attention ramp, step 800. |
--opsin-status-attention-900 | oklch(0.276 0.082 45) | Needs attention ramp, step 900. |
--opsin-status-attention-950 | oklch(0.208 0.065 45) | Needs attention ramp, step 950. |
--opsin-status-attention-surface | oklch(0.972 0.015 45) | The tinted background a component in this ramp sits on. |
--opsin-status-attention-line | oklch(0.541 0.145 45) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-attention-ink | oklch(0.362 0.105 45) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-attention-accent | oklch(0.58 0.15 45) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-urgent-50 | oklch(0.972 0.014 27) | Urgent ramp, step 50. |
--opsin-status-urgent-100 | oklch(0.941 0.03 27) | Urgent ramp, step 100. |
--opsin-status-urgent-200 | oklch(0.884 0.061 27) | Urgent ramp, step 200. |
--opsin-status-urgent-300 | oklch(0.806 0.11 27) | Urgent ramp, step 300. |
--opsin-status-urgent-400 | oklch(0.714 0.176 27) | Urgent ramp, step 400. |
--opsin-status-urgent-500 | oklch(0.622 0.2 27) | Urgent ramp, step 500. |
--opsin-status-urgent-600 | oklch(0.541 0.194 27) | Urgent ramp, step 600. |
--opsin-status-urgent-700 | oklch(0.452 0.176 27) | Urgent ramp, step 700. |
--opsin-status-urgent-800 | oklch(0.362 0.148 27) | Urgent ramp, step 800. |
--opsin-status-urgent-900 | oklch(0.276 0.115 27) | Urgent ramp, step 900. |
--opsin-status-urgent-950 | oklch(0.208 0.088 27) | Urgent ramp, step 950. |
--opsin-status-urgent-surface | oklch(0.972 0.014 27) | The tinted background a component in this ramp sits on. |
--opsin-status-urgent-line | oklch(0.541 0.194 27) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-urgent-ink | oklch(0.362 0.148 27) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-urgent-accent | oklch(0.52 0.2 27) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-unknown-50 | oklch(0.972 0.003 250) | Unknown ramp, step 50. |
--opsin-status-unknown-100 | oklch(0.941 0.005 250) | Unknown ramp, step 100. |
--opsin-status-unknown-200 | oklch(0.884 0.008 250) | Unknown ramp, step 200. |
--opsin-status-unknown-300 | oklch(0.806 0.013 250) | Unknown ramp, step 300. |
--opsin-status-unknown-400 | oklch(0.714 0.018 250) | Unknown ramp, step 400. |
--opsin-status-unknown-500 | oklch(0.622 0.02 250) | Unknown ramp, step 500. |
--opsin-status-unknown-600 | oklch(0.541 0.019 250) | Unknown ramp, step 600. |
--opsin-status-unknown-700 | oklch(0.452 0.018 250) | Unknown ramp, step 700. |
--opsin-status-unknown-800 | oklch(0.362 0.015 250) | Unknown ramp, step 800. |
--opsin-status-unknown-900 | oklch(0.276 0.012 250) | Unknown ramp, step 900. |
--opsin-status-unknown-950 | oklch(0.208 0.009 250) | Unknown ramp, step 950. |
--opsin-status-unknown-surface | oklch(0.972 0.003 250) | The tinted background a component in this ramp sits on. |
--opsin-status-unknown-line | oklch(0.541 0.019 250) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-unknown-ink | oklch(0.362 0.015 250) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-unknown-accent | oklch(0.72 0.02 250) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-material-canvas-tint | var(--opsin-neutral-0) | Rung 0 (canvas): the tint over what is behind it. The application background. Nothing is behind it, so nothing shows through it. |
--opsin-material-canvas-tint-alpha | 1 | Rung 0 (canvas): how opaque that tint is. |
--opsin-material-canvas-blur | 0px | Rung 0 (canvas): backdrop blur radius. |
--opsin-material-canvas-saturation | 1 | Rung 0 (canvas): backdrop saturation multiplier. |
--opsin-material-canvas-border | none | Rung 0 (canvas): the boundary. |
--opsin-material-canvas-shadow | none | Rung 0 (canvas): the shadow that separates it from what is behind. |
--opsin-material-canvas-scrim | 0 | Rung 0 (canvas): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-canvas-opaque | var(--opsin-neutral-0) | Rung 0 (canvas): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-inset-tint | var(--opsin-neutral-100) | Rung 0.5 (inset): the tint over what is behind it. The recessed well inside a card: the explanatory note a Callout draws inside the reading it annotates, and the track a RangeBar lays its range along. Its fill sits below the card fill in both themes, so the well reads as carved into the card rather than lifted off it. In light it is neutral-100, one step under the white card, which is where a Callout already sat. In dark it is a value between the page and the card, below the card so the well is a recess and above the page so a Callout used on its own is still visible. |
--opsin-material-inset-tint-alpha | 1 | Rung 0.5 (inset): how opaque that tint is. |
--opsin-material-inset-blur | 0px | Rung 0.5 (inset): backdrop blur radius. |
--opsin-material-inset-saturation | 1 | Rung 0.5 (inset): backdrop saturation multiplier. |
--opsin-material-inset-border | none | Rung 0.5 (inset): the boundary. |
--opsin-material-inset-shadow | none | Rung 0.5 (inset): the shadow that separates it from what is behind. |
--opsin-material-inset-scrim | 0 | Rung 0.5 (inset): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-inset-opaque | var(--opsin-neutral-100) | Rung 0.5 (inset): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-card-tint | var(--opsin-neutral-0) | Rung 1 (card): the tint over what is behind it. The default home for a health value. Opaque, bounded by a line rather than a shadow, and the rung every ResultCard, MetricTile and RangeBar sits on. |
--opsin-material-card-tint-alpha | 1 | Rung 1 (card): how opaque that tint is. |
--opsin-material-card-blur | 0px | Rung 1 (card): backdrop blur radius. |
--opsin-material-card-saturation | 1 | Rung 1 (card): backdrop saturation multiplier. |
--opsin-material-card-border | var(--opsin-neutral-200) | Rung 1 (card): the boundary. |
--opsin-material-card-shadow | none | Rung 1 (card): the shadow that separates it from what is behind. |
--opsin-material-card-scrim | 0 | Rung 1 (card): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-card-opaque | var(--opsin-neutral-0) | Rung 1 (card): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-raised-tint | var(--opsin-neutral-0) | Rung 2 (raised): the tint over what is behind it. Menus, popovers, tooltips, a dragged card. Still opaque: the shadow, not translucency, is what says 'above'. |
--opsin-material-raised-tint-alpha | 1 | Rung 2 (raised): how opaque that tint is. |
--opsin-material-raised-blur | 0px | Rung 2 (raised): backdrop blur radius. |
--opsin-material-raised-saturation | 1 | Rung 2 (raised): backdrop saturation multiplier. |
--opsin-material-raised-border | var(--opsin-neutral-200) | Rung 2 (raised): the boundary. |
--opsin-material-raised-shadow | 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 12px oklch(0 0 0 / 0.06) | Rung 2 (raised): the shadow that separates it from what is behind. |
--opsin-material-raised-scrim | 0 | Rung 2 (raised): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-raised-opaque | var(--opsin-neutral-0) | Rung 2 (raised): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-sheet-tint | var(--opsin-neutral-0) | Rung 3 (sheet): the tint over what is behind it. A bottom sheet or side panel the reader can dismiss by dragging. Its tint is now near opaque, so the panel lands close to the card colour and a white control inside it no longer floats above a greyer surface. What keeps the covered page recognisable is the scrim around the panel rather than the page reading through the panel, because at this opacity very little of the page shows through the tint. |
--opsin-material-sheet-tint-alpha | 0.93 | Rung 3 (sheet): how opaque that tint is. |
--opsin-material-sheet-blur | 20px | Rung 3 (sheet): backdrop blur radius. |
--opsin-material-sheet-saturation | 1.6 | Rung 3 (sheet): backdrop saturation multiplier. |
--opsin-material-sheet-border | oklch(0 0 0 / 0.08) | Rung 3 (sheet): the boundary. |
--opsin-material-sheet-shadow | 0 -1px 2px oklch(0 0 0 / 0.05) | Rung 3 (sheet): the shadow that separates it from what is behind. |
--opsin-material-sheet-scrim | 0.93 | Rung 3 (sheet): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-sheet-opaque | var(--opsin-neutral-0) | Rung 3 (sheet): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-overlay-tint | var(--opsin-neutral-0) | Rung 4 (overlay): the tint over what is behind it. A pinned toolbar, a tab bar and a floating action bar are all chrome that content scrolls beneath. |
--opsin-material-overlay-tint-alpha | 0.74 | Rung 4 (overlay): how opaque that tint is. |
--opsin-material-overlay-blur | 28px | Rung 4 (overlay): backdrop blur radius. |
--opsin-material-overlay-saturation | 1.8 | Rung 4 (overlay): backdrop saturation multiplier. |
--opsin-material-overlay-border | oklch(0 0 0 / 0.10) | Rung 4 (overlay): the boundary. |
--opsin-material-overlay-shadow | 0 8px 32px oklch(0 0 0 / 0.12) | Rung 4 (overlay): the shadow that separates it from what is behind. |
--opsin-material-overlay-scrim | 0.74 | Rung 4 (overlay): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-overlay-opaque | var(--opsin-neutral-0) | Rung 4 (overlay): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-scrim-tint | var(--opsin-neutral-950) | Rung 5 (scrim): the tint over what is behind it. The dimming layer behind a modal dialog or a consent sheet. Its job is to remove the page from consideration, not to look like glass. |
--opsin-material-scrim-tint-alpha | 0.44 | Rung 5 (scrim): how opaque that tint is. |
--opsin-material-scrim-blur | 2px | Rung 5 (scrim): backdrop blur radius. |
--opsin-material-scrim-saturation | 1 | Rung 5 (scrim): backdrop saturation multiplier. |
--opsin-material-scrim-border | none | Rung 5 (scrim): the boundary. |
--opsin-material-scrim-shadow | none | Rung 5 (scrim): the shadow that separates it from what is behind. |
--opsin-material-scrim-scrim | 0.44 | Rung 5 (scrim): the minimum scrim opacity needed for text on this rung to clear the contrast floor. |
--opsin-material-scrim-opaque | oklch(0.205 0.006 250 / 0.72) | Rung 5 (scrim): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-ease-spring-snap | linear(0, 0.0715, 0.2271, 0.4053, 0.5722, 0.7119, 0.8198, 0.8978, 0.9505, 0.9836, 1.0025, 1.0118, 1.015, 1.0147, 1.0126, 1.01, 1.0073, 1.0051, 1.0033, 1.0019, 1) | Direct manipulation only: a switch the reader just flipped, a segmented control, a pressed button settling. It overshoots by 1.5%. That is enough to feel physical but not enough to look playful. The 1.5% is the largest overshoot in the system but not the only one: spring-settle overshoots by 0.88%. Only spring-calm and spring-sheet reach their target without passing it. |
--opsin-duration-spring-snap | 283ms | Settle time for the spring-snap spring, measured from its own parameters. |
--opsin-ease-spring-settle | linear(0, 0.0742, 0.2328, 0.4113, 0.5758, 0.7116, 0.8157, 0.8905, 0.9412, 0.9736, 0.9928, 1.003, 1.0076, 1.0088, 1.0082, 1.0068, 1.0053, 1.0038, 1.0026, 1.0017, 1) | The workhorse for chrome: popovers, tooltips, menus, chips appearing and disappearing. |
--opsin-duration-spring-settle | 382ms | Settle time for the spring-settle spring, measured from its own parameters. |
--opsin-ease-spring-calm | linear(0, 0.0829, 0.2457, 0.4157, 0.5642, 0.6832, 0.774, 0.841, 0.8893, 0.9236, 0.9476, 0.9643, 0.9757, 0.9836, 0.9889, 0.9926, 0.995, 0.9967, 0.9978, 0.9985, 1) | A health value that changes while it is already on screen: a bar re-filling from one reading to the next, a dial travelling between two values the reader has already been shown. Never a first paint and never a first reveal. A value arrives at its final figure, with no count-up, no dial sweep and no line drawing itself in (health/motion-in-health-ui rule 2). Slightly overdamped (zeta just over 1) so it never overshoots and never bounces. |
--opsin-duration-spring-calm | 550ms | Settle time for the spring-calm spring, measured from its own parameters. |
--opsin-ease-spring-sheet | linear(0, 0.0881, 0.2576, 0.431, 0.5798, 0.6971, 0.7854, 0.8497, 0.8958, 0.9282, 0.9508, 0.9664, 0.9771, 0.9845, 0.9895, 0.9929, 0.9952, 0.9967, 0.9978, 0.9985, 1) | Large surfaces travelling a long distance: sheets, dialogs, full-screen pushes. Overdamped, because a sheet that bounces at the top of its travel reads as a dropped object. |
--opsin-duration-spring-sheet | 483ms | Settle time for the spring-sheet spring, measured from its own parameters. |
--opsin-ease-standard | cubic-bezier(0.2, 0, 0, 1) | Non-spring transitions where a spring would be overkill: colour, opacity, border. Fast out, slow in. |
--opsin-ease-enter | cubic-bezier(0.05, 0.7, 0.1, 1) | Something arriving from off-screen or from nothing. Decelerating, because an arrival should feel like it is coming to rest. |
--opsin-ease-exit | cubic-bezier(0.3, 0, 0.8, 0.15) | Something leaving. Accelerating and shorter than its enter, because a reader does not need to watch a dismissal finish. |
--opsin-duration-instant | 80ms | State change with no travel: hover tint, focus ring, checkbox tick. |
--opsin-duration-fast | 140ms | Small elements moving a small distance. |
--opsin-duration-base | 220ms | The default for chrome that is not spring-driven. |
--opsin-duration-slow | 360ms | Layout change: a list reflowing, a card expanding. |
--opsin-duration-deliberate | 560ms | The ceiling on a transition a reader is waiting on, such as a first-run reveal or a consent sheet, where the point is that the reader notices. No such transition may exceed it. A looping placeholder period, like the skeleton shimmer, is bounded instead by its iteration count, so a single sweep of it may run longer. |
--opsin-duration-shimmer | 1600ms | One sweep of a loading placeholder's sheen. This is a period, the time for the sheen to make one pass across the bar, and not a travel time. At 1600ms the movement reads as calm rather than as urgency, which the first motion rule requires of anything that is not a value the reader controls. Its consumer pairs it with a finite iteration count so the total motion stays under the five seconds at which WCAG 2.2 SC 2.2.2 engages. |
--opsin-font-sans | system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | The sans family stack. |
--opsin-font-mono | ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace | The mono family stack. |
--opsin-font-numeric | system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif | The numeric family stack. |
--opsin-text-large-title-size | 2.125rem | The largest step in the scale, reserved for a surface whose entire subject is one number or one word. No component in the system sets a value at this step yet. |
--opsin-text-large-title-leading | 1.206 | Line height for largeTitle, unitless so it scales with the size. |
--opsin-text-large-title-tracking | -0.011em | Letter spacing for largeTitle. |
--opsin-text-large-title-weight | 700 | Font weight for largeTitle. |
--opsin-text-title1-size | 1.75rem | A screen title, and the hero treatment a value's number takes at size display. |
--opsin-text-title1-leading | 1.214 | Line height for title1, unitless so it scales with the size. |
--opsin-text-title1-tracking | -0.009em | Letter spacing for title1. |
--opsin-text-title1-weight | 700 | Font weight for title1. |
--opsin-text-title2-size | 1.375rem | Section title; the floor for a primary health value inside a card. |
--opsin-text-title2-leading | 1.273 | Line height for title2, unitless so it scales with the size. |
--opsin-text-title2-tracking | -0.006em | Letter spacing for title2. |
--opsin-text-title2-weight | 600 | Font weight for title2. |
--opsin-text-title3-size | 1.25rem | A Dialog or Sheet title, and the unit beside a value's number at size display. |
--opsin-text-title3-leading | 1.25 | Line height for title3, unitless so it scales with the size. |
--opsin-text-title3-tracking | -0.004em | Letter spacing for title3. |
--opsin-text-title3-weight | 600 | Font weight for title3. |
--opsin-text-headline-size | 1.0625rem | An emphasised line of body text, such as a status sentence or a question in a form. |
--opsin-text-headline-leading | 1.294 | Line height for headline, unitless so it scales with the size. |
--opsin-text-headline-tracking | -0.003em | Letter spacing for headline. |
--opsin-text-headline-weight | 600 | Font weight for headline. |
--opsin-text-body-size | 1.0625rem | Everything a reader reads as prose. The anchor of the scale. |
--opsin-text-body-leading | 1.294 | Line height for body, unitless so it scales with the size. |
--opsin-text-body-tracking | -0.003em | Letter spacing for body. |
--opsin-text-body-weight | 400 | Font weight for body. |
--opsin-text-callout-size | 1rem | Secondary prose inside a card or a callout. |
--opsin-text-callout-leading | 1.313 | Line height for callout, unitless so it scales with the size. |
--opsin-text-callout-tracking | -0.002em | Letter spacing for callout. |
--opsin-text-callout-weight | 400 | Font weight for callout. |
--opsin-text-subheadline-size | 0.9375rem | A supporting line under a title. |
--opsin-text-subheadline-leading | 1.333 | Line height for subheadline, unitless so it scales with the size. |
--opsin-text-subheadline-tracking | -0.001em | Letter spacing for subheadline. |
--opsin-text-subheadline-weight | 400 | Font weight for subheadline. |
--opsin-text-subheadline-emphasis-size | 0.9375rem | The emphasised twin of subheadline, for a compact control's label, where the control must read as narrower and never as quieter. |
--opsin-text-subheadline-emphasis-leading | 1.333 | Line height for subheadlineEmphasis, unitless so it scales with the size. |
--opsin-text-subheadline-emphasis-tracking | -0.001em | Letter spacing for subheadlineEmphasis. |
--opsin-text-subheadline-emphasis-weight | 600 | Font weight for subheadlineEmphasis. |
--opsin-text-footnote-size | 0.8125rem | Provenance: who measured this, when, with what. |
--opsin-text-footnote-leading | 1.385 | Line height for footnote, unitless so it scales with the size. |
--opsin-text-footnote-tracking | 0em | Letter spacing for footnote. |
--opsin-text-footnote-weight | 400 | Font weight for footnote. |
--opsin-text-caption1-size | 0.75rem | Axis labels, legend text, and legal text. |
--opsin-text-caption1-leading | 1.333 | Line height for caption1, unitless so it scales with the size. |
--opsin-text-caption1-tracking | 0.002em | Letter spacing for caption1. |
--opsin-text-caption1-weight | 400 | Font weight for caption1. |
--opsin-text-caption2-size | 0.6875rem | The smallest text the system permits, and only for text that repeats a label already present elsewhere. Never the only place a fact appears. |
--opsin-text-caption2-leading | 1.182 | Line height for caption2, unitless so it scales with the size. |
--opsin-text-caption2-tracking | 0.005em | Letter spacing for caption2. |
--opsin-text-caption2-weight | 500 | Font weight for caption2. |
--opsin-numerals | tabular-nums | Every component that renders a number sets this, so a changing value does not shift its own layout. |
--opsin-space-0 | 0rem | 0px. |
--opsin-space-1 | 0.25rem | Gap between an icon and its label. |
--opsin-space-2 | 0.5rem | Gap between tightly related lines. For the separation between two interactive targets see targets.separation, which is the same number and carries its scope. |
--opsin-space-3 | 0.75rem | Inner padding of a compact control. |
--opsin-space-4 | 1rem | The default gap between elements inside a card. |
--opsin-space-5 | 1.25rem | Card inner padding on a phone. |
--opsin-space-6 | 1.5rem | Card inner padding on a wide screen; gap between cards. |
--opsin-space-8 | 2rem | Gap between sections within a screen. |
--opsin-space-10 | 2.5rem | Space above a section heading. |
--opsin-space-12 | 3rem | Gap between major regions of a screen. |
--opsin-space-16 | 4rem | Top of a screen below the safe area; the space a consent sheet leaves above its first question. |
--opsin-space-20 | 5rem | Empty-state vertical rhythm. |
--opsin-space-24 | 6rem | The largest step. Beyond this, use a layout, not a gap. |
--opsin-space-px | 0.0625rem | Hairline borders only. |
--opsin-space-0-5 | 0.125rem | Optical nudges. Not a layout step. |
--opsin-target-minimum | 2.75rem | The opsinjs floor for any interactive control, applied to the hit area rather than to the visible box. |
--opsin-target-comfortable | 3rem | The default for a primary action in the product theme. |
--opsin-target-generous | 3.5rem | A single primary action on a consent, escalation or emergency surface, where a mis-tap has a real cost. |
--opsin-target-separation | 0.5rem | The minimum gap between two adjacent targets whose visible boxes are smaller than 44px. It is a floor for undersized targets only. Two targets that both meet the 44px minimum are outside its scope, and separating those is governed by the differing cost of a mis-tap between them rather than by a fixed gap. |
--opsin-gutter-phone | 16px | The screen gutter in the phone responsive mode. |
--opsin-gutter-tablet | 24px | The screen gutter in the tablet responsive mode. |
--opsin-gutter-wide | 32px | The screen gutter in the wide responsive mode. |
--opsin-measure-tight | 45ch | A caption or a legend. |
--opsin-measure-comfortable | 66ch | The maximum line length for prose anywhere in the product, including a disclaimer nobody wants to read. |
--opsin-measure-wide | 80ch | Code and machine output only. |
--opsin-graphic-dial | 17rem | The maximum width of the ScoreDial arc. This is 16em against the product body of 1.0625rem, which is 17rem and lands on the 4px grid at 68 steps, and it yields to w-full when the column is narrower. |
--opsin-safe-top | env(safe-area-inset-top, 0px) | The top safe-area inset, for installed web apps where browser chrome does not protect the edge. |
--opsin-safe-right | env(safe-area-inset-right, 0px) | The right safe-area inset, for installed web apps where browser chrome does not protect the edge. |
--opsin-safe-bottom | env(safe-area-inset-bottom, 0px) | The bottom safe-area inset, for installed web apps where browser chrome does not protect the edge. |
--opsin-safe-left | env(safe-area-inset-left, 0px) | The left safe-area inset, for installed web apps where browser chrome does not protect the edge. |
--opsin-radius-base | 0.875rem | The one radius the whole ladder is derived from. |
--opsin-radius-none | 0rem | Full-bleed media and anything that meets a screen edge. |
--opsin-radius-xs | 0.25rem | The floor for a nested corner. Tags inside a chip, a swatch inside a legend. |
--opsin-radius-sm | 0.4375rem | Inputs and small controls inside a card. |
--opsin-radius-md | 0.875rem | The default. Buttons, chips, cards. |
--opsin-radius-lg | 1.3125rem | Cards on a phone, where the card is nearly the width of the screen. |
--opsin-radius-xl | 1.75rem | Sheets and dialogs. Applied to the leading edge only when the surface meets a screen edge on the other side. |
--opsin-radius-inner-card | max(calc(0.875rem - 5 * var(--spacing)), var(--opsin-radius-xs)) | A box inside a card at the comfortable density (card padding p-5). |
--opsin-radius-inner-card-compact | max(calc(0.875rem - 4 * var(--spacing)), var(--opsin-radius-xs)) | A box inside a card at the compact density (card padding p-4). |
--opsin-corner-shape | superellipse(4) | The squircle curvature. Degrades to round where corner-shape is unsupported. |
--opsin-border-hairline | 1px | Every boundary in the system by default. |
--opsin-border-emphasis | 2px | The boundary of a surface carrying attention or urgent, where the boundary is one of the three non-colour carriers of the status. |
--opsin-border-focus | 2px | The focus ring. Always 2px with a 2px offset, always in a colour measured against both the surface and the page behind it, and never removed. See /docs/accessibility/keyboard-and-focus. |
--opsin-border-focus-offset | 2px | Offset for the focus boundary. |
.dark, .opsin-product.dark
| Variable | Value | Controls |
|---|---|---|
--opsin-chrome-background | oklch(0.145 0.005 250) | Chrome role background, resolved to the ladder step it names. |
--opsin-chrome-foreground | oklch(0.967 0.003 250) | Chrome role foreground, resolved to the ladder step it names. |
--opsin-chrome-card | oklch(0.205 0.006 250) | Chrome role card, resolved to the ladder step it names. |
--opsin-chrome-card-foreground | oklch(0.967 0.003 250) | Chrome role cardForeground, resolved to the ladder step it names. |
--opsin-chrome-muted | oklch(0.269 0.007 250) | Chrome role muted, resolved to the ladder step it names. |
--opsin-chrome-muted-foreground | oklch(0.871 0.005 250) | Chrome role mutedForeground, resolved to the ladder step it names. |
--opsin-chrome-border | oklch(0.556 0.009 250) | Chrome role border, resolved to the ladder step it names. |
--opsin-chrome-input | oklch(0.556 0.009 250) | Chrome role input, resolved to the ladder step it names. |
--opsin-chrome-ring | oklch(0.68 0.115 250) | Chrome role ring, resolved to the ladder step it names. |
--opsin-chrome-primary | oklch(0.72 0.12 250) | Chrome role primary, resolved to the ladder step it names. |
--opsin-chrome-primary-foreground | oklch(0.16 0.01 260) | Chrome role primaryForeground, resolved to the ladder step it names. |
--opsin-category-sleep-surface | oklch(0.208 0.062 275) | The tinted background a component in this ramp sits on. |
--opsin-category-sleep-line | oklch(0.806 0.092 275) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-sleep-ink | oklch(0.884 0.057 275) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-sleep-accent | oklch(0.714 0.123 275) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-heart-surface | oklch(0.208 0.075 15) | The tinted background a component in this ramp sits on. |
--opsin-category-heart-line | oklch(0.806 0.112 15) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-heart-ink | oklch(0.884 0.062 15) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-heart-accent | oklch(0.714 0.15 15) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-activity-surface | oklch(0.208 0.07 140) | The tinted background a component in this ramp sits on. |
--opsin-category-activity-line | oklch(0.806 0.106 140) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-activity-ink | oklch(0.884 0.067 140) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-activity-accent | oklch(0.714 0.141 140) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-nutrition-surface | oklch(0.208 0.049 70) | The tinted background a component in this ramp sits on. |
--opsin-category-nutrition-line | oklch(0.806 0.092 70) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-nutrition-ink | oklch(0.884 0.059 70) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-nutrition-accent | oklch(0.714 0.123 70) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-mind-surface | oklch(0.208 0.062 310) | The tinted background a component in this ramp sits on. |
--opsin-category-mind-line | oklch(0.806 0.092 310) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-mind-ink | oklch(0.884 0.059 310) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-mind-accent | oklch(0.714 0.123 310) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-category-labs-surface | oklch(0.208 0.038 210) | The tinted background a component in this ramp sits on. |
--opsin-category-labs-line | oklch(0.806 0.073 210) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-category-labs-ink | oklch(0.884 0.046 210) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-category-labs-accent | oklch(0.714 0.097 210) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-steady-surface | oklch(0.208 0.041 178) | The tinted background a component in this ramp sits on. |
--opsin-status-steady-line | oklch(0.806 0.073 178) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-steady-ink | oklch(0.884 0.046 178) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-steady-accent | oklch(0.714 0.097 178) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-watch-surface | oklch(0.208 0.046 82) | The tinted background a component in this ramp sits on. |
--opsin-status-watch-line | oklch(0.806 0.092 82) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-watch-ink | oklch(0.884 0.059 82) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-watch-accent | oklch(0.714 0.123 82) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-attention-surface | oklch(0.208 0.065 45) | The tinted background a component in this ramp sits on. |
--opsin-status-attention-line | oklch(0.806 0.099 45) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-attention-ink | oklch(0.884 0.063 45) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-attention-accent | oklch(0.714 0.132 45) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-urgent-surface | oklch(0.208 0.088 27) | The tinted background a component in this ramp sits on. |
--opsin-status-urgent-line | oklch(0.806 0.11 27) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-urgent-ink | oklch(0.884 0.061 27) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-urgent-accent | oklch(0.714 0.176 27) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-status-unknown-surface | oklch(0.208 0.009 250) | The tinted background a component in this ramp sits on. |
--opsin-status-unknown-line | oklch(0.806 0.013 250) | The boundary, icon stroke or chart mark. The lightest value in the ramp that clears the non-text floor against surface. |
--opsin-status-unknown-ink | oklch(0.884 0.008 250) | Text and text-sized icons on surface. Clears the text floor against surface. |
--opsin-status-unknown-accent | oklch(0.714 0.018 250) | The identity fill: a bar fill, a dial track, a legend dot. Chosen for recognition, not for contrast. It must be bounded by line or labelled in ink; it is never the only thing that carries the meaning. |
--opsin-material-canvas-tint | var(--opsin-neutral-950) | Rung 0 (canvas): the tint over what is behind it. The application background. Nothing is behind it, so nothing shows through it. |
--opsin-material-canvas-opaque | var(--opsin-neutral-950) | Rung 0 (canvas): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-inset-tint | oklch(0.178 0.006 250) | Rung 0.5 (inset): the tint over what is behind it. The recessed well inside a card: the explanatory note a Callout draws inside the reading it annotates, and the track a RangeBar lays its range along. Its fill sits below the card fill in both themes, so the well reads as carved into the card rather than lifted off it. In light it is neutral-100, one step under the white card, which is where a Callout already sat. In dark it is a value between the page and the card, below the card so the well is a recess and above the page so a Callout used on its own is still visible. |
--opsin-material-inset-opaque | oklch(0.178 0.006 250) | Rung 0.5 (inset): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-card-tint | var(--opsin-neutral-900) | Rung 1 (card): the tint over what is behind it. The default home for a health value. Opaque, bounded by a line rather than a shadow, and the rung every ResultCard, MetricTile and RangeBar sits on. |
--opsin-material-card-border | var(--opsin-neutral-800) | Rung 1 (card): the boundary. |
--opsin-material-card-opaque | var(--opsin-neutral-900) | Rung 1 (card): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-raised-tint | var(--opsin-neutral-800) | Rung 2 (raised): the tint over what is behind it. Menus, popovers, tooltips, a dragged card. Still opaque: the shadow, not translucency, is what says 'above'. |
--opsin-material-raised-border | var(--opsin-neutral-700) | Rung 2 (raised): the boundary. |
--opsin-material-raised-opaque | var(--opsin-neutral-800) | Rung 2 (raised): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-sheet-tint | var(--opsin-neutral-900) | Rung 3 (sheet): the tint over what is behind it. A bottom sheet or side panel the reader can dismiss by dragging. Its tint is now near opaque, so the panel lands close to the card colour and a white control inside it no longer floats above a greyer surface. What keeps the covered page recognisable is the scrim around the panel rather than the page reading through the panel, because at this opacity very little of the page shows through the tint. |
--opsin-material-sheet-tint-alpha | 0.9 | Rung 3 (sheet): how opaque that tint is. |
--opsin-material-sheet-border | oklch(1 0 0 / 0.10) | Rung 3 (sheet): the boundary. |
--opsin-material-sheet-opaque | var(--opsin-neutral-900) | Rung 3 (sheet): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-overlay-tint | var(--opsin-neutral-900) | Rung 4 (overlay): the tint over what is behind it. A pinned toolbar, a tab bar and a floating action bar are all chrome that content scrolls beneath. |
--opsin-material-overlay-tint-alpha | 0.7 | Rung 4 (overlay): how opaque that tint is. |
--opsin-material-overlay-border | oklch(1 0 0 / 0.12) | Rung 4 (overlay): the boundary. |
--opsin-material-overlay-opaque | var(--opsin-neutral-900) | Rung 4 (overlay): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
--opsin-material-scrim-tint | var(--opsin-neutral-1000) | Rung 5 (scrim): the tint over what is behind it. The dimming layer behind a modal dialog or a consent sheet. Its job is to remove the page from consideration, not to look like glass. |
--opsin-material-scrim-tint-alpha | 0.6 | Rung 5 (scrim): how opaque that tint is. |
--opsin-material-scrim-opaque | oklch(0 0 0 / 0.8) | Rung 5 (scrim): the opaque substitute used under prefers-reduced-transparency and where backdrop-filter is unsupported. |
@supports (color-gamut: p3)
| Variable | Value | Controls |
|---|---|---|
--opsin-category-sleep-50 | oklch(0.972 0.015 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-100 | oklch(0.941 0.031 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-200 | oklch(0.884 0.062 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-300 | oklch(0.806 0.107 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-400 | oklch(0.714 0.145 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-500 | oklch(0.622 0.165 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-600 | oklch(0.541 0.16 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-700 | oklch(0.452 0.145 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-800 | oklch(0.362 0.122 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-900 | oklch(0.276 0.096 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-950 | oklch(0.208 0.073 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-surface | oklch(0.972 0.015 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-line | oklch(0.541 0.16 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-ink | oklch(0.362 0.122 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-sleep-accent | oklch(0.714 0.145 275) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-50 | oklch(0.972 0.018 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-100 | oklch(0.941 0.039 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-200 | oklch(0.884 0.081 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-300 | oklch(0.806 0.132 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-400 | oklch(0.714 0.177 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-500 | oklch(0.622 0.201 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-600 | oklch(0.541 0.195 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-700 | oklch(0.452 0.177 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-800 | oklch(0.362 0.148 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-900 | oklch(0.276 0.116 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-950 | oklch(0.208 0.088 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-surface | oklch(0.972 0.018 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-line | oklch(0.541 0.195 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-ink | oklch(0.362 0.148 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-heart-accent | oklch(0.714 0.177 15) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-50 | oklch(0.972 0.026 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-100 | oklch(0.941 0.045 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-200 | oklch(0.884 0.079 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-300 | oklch(0.806 0.125 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-400 | oklch(0.714 0.166 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-500 | oklch(0.622 0.189 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-600 | oklch(0.541 0.183 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-700 | oklch(0.452 0.166 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-800 | oklch(0.362 0.139 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-900 | oklch(0.276 0.108 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-950 | oklch(0.208 0.083 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-surface | oklch(0.972 0.026 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-line | oklch(0.541 0.183 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-ink | oklch(0.362 0.139 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-activity-accent | oklch(0.714 0.166 140) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-50 | oklch(0.972 0.023 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-100 | oklch(0.941 0.04 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-200 | oklch(0.884 0.069 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-300 | oklch(0.806 0.109 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-400 | oklch(0.714 0.145 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-500 | oklch(0.622 0.155 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-600 | oklch(0.541 0.135 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-700 | oklch(0.452 0.113 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-800 | oklch(0.362 0.091 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-900 | oklch(0.276 0.071 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-950 | oklch(0.208 0.056 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-surface | oklch(0.972 0.023 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-line | oklch(0.541 0.135 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-ink | oklch(0.362 0.091 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-nutrition-accent | oklch(0.714 0.145 70) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-50 | oklch(0.972 0.02 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-100 | oklch(0.941 0.04 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-200 | oklch(0.884 0.069 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-300 | oklch(0.806 0.109 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-400 | oklch(0.714 0.145 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-500 | oklch(0.622 0.165 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-600 | oklch(0.541 0.16 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-700 | oklch(0.452 0.145 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-800 | oklch(0.362 0.122 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-900 | oklch(0.276 0.096 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-950 | oklch(0.208 0.073 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-surface | oklch(0.972 0.02 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-line | oklch(0.541 0.16 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-ink | oklch(0.362 0.122 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-mind-accent | oklch(0.714 0.145 310) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-50 | oklch(0.972 0.018 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-100 | oklch(0.941 0.031 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-200 | oklch(0.884 0.055 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-300 | oklch(0.806 0.086 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-400 | oklch(0.714 0.114 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-500 | oklch(0.622 0.13 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-600 | oklch(0.541 0.125 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-700 | oklch(0.452 0.105 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-800 | oklch(0.362 0.084 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-900 | oklch(0.276 0.065 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-950 | oklch(0.208 0.051 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-surface | oklch(0.972 0.018 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-line | oklch(0.541 0.125 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-ink | oklch(0.362 0.084 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-category-labs-accent | oklch(0.714 0.114 210) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-50 | oklch(0.972 0.018 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-100 | oklch(0.941 0.031 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-200 | oklch(0.884 0.055 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-300 | oklch(0.806 0.086 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-400 | oklch(0.714 0.114 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-500 | oklch(0.622 0.13 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-600 | oklch(0.541 0.126 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-700 | oklch(0.452 0.114 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-800 | oklch(0.362 0.091 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-900 | oklch(0.276 0.071 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-950 | oklch(0.208 0.055 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-surface | oklch(0.972 0.018 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-line | oklch(0.541 0.126 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-ink | oklch(0.362 0.091 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-steady-accent | oklch(0.714 0.114 178) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-50 | oklch(0.972 0.023 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-100 | oklch(0.941 0.04 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-200 | oklch(0.884 0.069 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-300 | oklch(0.806 0.109 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-400 | oklch(0.714 0.145 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-500 | oklch(0.622 0.148 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-600 | oklch(0.541 0.129 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-700 | oklch(0.452 0.108 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-800 | oklch(0.362 0.087 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-900 | oklch(0.276 0.068 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-950 | oklch(0.208 0.054 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-surface | oklch(0.972 0.023 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-line | oklch(0.541 0.129 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-ink | oklch(0.362 0.087 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-watch-accent | oklch(0.60 0.14 82) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-50 | oklch(0.972 0.019 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-100 | oklch(0.941 0.041 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-200 | oklch(0.884 0.074 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-300 | oklch(0.806 0.117 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-400 | oklch(0.714 0.156 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-500 | oklch(0.622 0.177 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-600 | oklch(0.541 0.172 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-700 | oklch(0.452 0.148 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-800 | oklch(0.362 0.119 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-900 | oklch(0.276 0.093 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-950 | oklch(0.208 0.074 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-surface | oklch(0.972 0.019 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-line | oklch(0.541 0.172 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-ink | oklch(0.362 0.119 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-attention-accent | oklch(0.714 0.156 45) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-50 | oklch(0.972 0.018 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-100 | oklch(0.941 0.039 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-200 | oklch(0.884 0.079 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-300 | oklch(0.806 0.142 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-400 | oklch(0.714 0.208 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-500 | oklch(0.622 0.236 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-600 | oklch(0.541 0.229 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-700 | oklch(0.452 0.208 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-800 | oklch(0.362 0.168 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-900 | oklch(0.276 0.129 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-950 | oklch(0.208 0.1 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-surface | oklch(0.972 0.018 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-line | oklch(0.541 0.229 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-ink | oklch(0.362 0.168 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-urgent-accent | oklch(0.714 0.208 27) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-100 | oklch(0.941 0.006 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-200 | oklch(0.884 0.01 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-300 | oklch(0.806 0.016 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-400 | oklch(0.714 0.021 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-500 | oklch(0.622 0.024 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-600 | oklch(0.541 0.023 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-700 | oklch(0.452 0.021 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-800 | oklch(0.362 0.017 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-900 | oklch(0.276 0.014 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-950 | oklch(0.208 0.01 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-surface | oklch(0.208 0.01 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-line | oklch(0.541 0.023 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-ink | oklch(0.362 0.017 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |
--opsin-status-unknown-accent | oklch(0.714 0.021 250) | Chroma escalation only: same hue, same lightness, so measured contrast is unchanged. |