CSS variables
Use Chassis CSS’s CSS custom properties for fast and forward-looking design and development.
On this page
Chassis CSS includes many CSS custom properties (variables) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.
All our custom properties are prefixed with cx- to avoid conflicts with third party CSS.
Root variables
Here are the variables we include (note that the :root is required) that can be accessed anywhere Chassis CSS’s CSS is loaded. They’re located in our _root.scss file and included in our compiled dist files.
Default
These CSS variables are available everywhere, regardless of color mode.
:root,
[data-cx-theme=light] {
--cx-default: oklch(0% 0 none);
--cx-alternate: oklch(100% 0 none);
--cx-primary: oklch(66.72% 0.125 223.3deg);
--cx-secondary: oklch(65.65% 0.21 38.97deg);
--cx-neutral: oklch(58.78% 0.021 217.37deg);
--cx-warning: oklch(77.74% 0.165 73.18deg);
--cx-success: oklch(71.38% 0.187 151.56deg);
--cx-danger: oklch(61.98% 0.24 29.73deg);
--cx-info: oklch(44.95% 0.296 265.73deg);
--cx-black: oklch(0% 0 none);
--cx-white: oklch(100% 0 none);
--cx-default-contrast: oklch(100% 0 none);
--cx-alternate-contrast: oklch(0% 0 none);
--cx-primary-contrast: oklch(100% 0 none);
--cx-secondary-contrast: oklch(100% 0 none);
--cx-neutral-contrast: oklch(100% 0 none);
--cx-warning-contrast: oklch(0% 0 none);
--cx-success-contrast: oklch(100% 0 none);
--cx-danger-contrast: oklch(100% 0 none);
--cx-info-contrast: oklch(100% 0 none);
--cx-black-contrast: oklch(100% 0 none);
--cx-white-contrast: oklch(0% 0 none);
--cx-primary-05: oklch(97.38% 0.013 208.77deg);
--cx-primary-10: oklch(94.24% 0.027 214.43deg);
--cx-primary-20: oklch(88.86% 0.053 214.36deg);
--cx-primary-30: oklch(81.84% 0.085 215.09deg);
--cx-primary-40: oklch(73.71% 0.114 217.55deg);
--cx-primary-50: oklch(66.72% 0.125 223.3deg);
--cx-primary-60: oklch(51.52% 0.096 222.48deg);
--cx-primary-70: oklch(40.64% 0.075 221.53deg);
--cx-primary-80: oklch(31.88% 0.058 220.29deg);
--cx-primary-90: oklch(25.95% 0.047 218.54deg);
--cx-primary-95: oklch(19.65% 0.035 215.2deg);
--cx-secondary-05: oklch(97.11% 0.014 50.81deg);
--cx-secondary-10: oklch(93.9% 0.032 47.35deg);
--cx-secondary-20: oklch(87.88% 0.065 47.47deg);
--cx-secondary-30: oklch(80.46% 0.111 47.53deg);
--cx-secondary-40: oklch(72.08% 0.168 44.91deg);
--cx-secondary-50: oklch(65.65% 0.21 38.97deg);
--cx-secondary-60: oklch(50.62% 0.16 39.72deg);
--cx-secondary-70: oklch(39.99% 0.123 41.14deg);
--cx-secondary-80: oklch(31.51% 0.093 43.4deg);
--cx-secondary-90: oklch(25.33% 0.072 45.42deg);
--cx-secondary-95: oklch(19.17% 0.05 51.02deg);
--cx-neutral-05: oklch(97.24% 0.001 197.14deg);
--cx-neutral-10: oklch(94.11% 0.004 219.53deg);
--cx-neutral-20: oklch(88.17% 0.006 211.04deg);
--cx-neutral-30: oklch(80.14% 0.01 212.53deg);
--cx-neutral-40: oklch(69.67% 0.016 218.11deg);
--cx-neutral-50: oklch(58.78% 0.021 217.37deg);
--cx-neutral-60: oklch(45.83% 0.016 214.47deg);
--cx-neutral-70: oklch(36.53% 0.012 222.32deg);
--cx-neutral-80: oklch(29.21% 0.009 219.79deg);
--cx-neutral-90: oklch(23.98% 0.006 214.42deg);
--cx-neutral-95: oklch(18.49% 0.004 229.03deg);
--cx-danger-05: oklch(96.59% 0.015 22.4deg);
--cx-danger-10: oklch(92.65% 0.036 22.08deg);
--cx-danger-20: oklch(85.46% 0.073 22.86deg);
--cx-danger-30: oklch(76.61% 0.128 24.53deg);
--cx-danger-40: oklch(67.58% 0.195 27.49deg);
--cx-danger-50: oklch(61.98% 0.24 29.73deg);
--cx-danger-60: oklch(47.79% 0.182 29.73deg);
--cx-danger-70: oklch(37.66% 0.14 29.65deg);
--cx-danger-80: oklch(29.52% 0.106 29.32deg);
--cx-danger-90: oklch(23.84% 0.081 29.75deg);
--cx-danger-95: oklch(17.85% 0.056 29.65deg);
--cx-success-05: oklch(97.65% 0.016 162.76deg);
--cx-success-10: oklch(94.97% 0.034 163.24deg);
--cx-success-20: oklch(90.1% 0.068 161.2deg);
--cx-success-30: oklch(84.06% 0.11 159.24deg);
--cx-success-40: oklch(77.01% 0.155 156.23deg);
--cx-success-50: oklch(71.38% 0.187 151.56deg);
--cx-success-60: oklch(55.01% 0.142 151.91deg);
--cx-success-70: oklch(43.32% 0.108 152.84deg);
--cx-success-80: oklch(34.09% 0.082 153.6deg);
--cx-success-90: oklch(27.67% 0.065 154.57deg);
--cx-success-95: oklch(20.48% 0.044 157.89deg);
--cx-warning-05: oklch(98.27% 0.017 88deg);
--cx-warning-10: oklch(96.21% 0.034 82.91deg);
--cx-warning-20: oklch(92.47% 0.068 83.57deg);
--cx-warning-30: oklch(87.89% 0.11 83.4deg);
--cx-warning-40: oklch(82.57% 0.15 80.33deg);
--cx-warning-50: oklch(77.74% 0.165 73.18deg);
--cx-warning-60: oklch(59.82% 0.127 73.85deg);
--cx-warning-70: oklch(47.2% 0.099 75.61deg);
--cx-warning-80: oklch(36.9% 0.077 76.91deg);
--cx-warning-90: oklch(29.73% 0.062 80.16deg);
--cx-warning-95: oklch(22% 0.045 81.78deg);
--cx-info-05: oklch(95.65% 0.02 286.01deg);
--cx-info-10: oklch(90.51% 0.046 285.44deg);
--cx-info-20: oklch(80.97% 0.094 284.1deg);
--cx-info-30: oklch(68.39% 0.162 281.23deg);
--cx-info-40: oklch(54.12% 0.243 274.61deg);
--cx-info-50: oklch(44.95% 0.296 265.73deg);
--cx-info-60: oklch(34.81% 0.225 266.31deg);
--cx-info-70: oklch(27.64% 0.174 267.16deg);
--cx-info-80: oklch(21.94% 0.132 268.39deg);
--cx-info-90: oklch(17.88% 0.102 269.77deg);
--cx-info-95: oklch(13.66% 0.072 271.72deg);
--cx-default-base-color: oklch(0% 0 none);
--cx-alternate-base-color: oklch(100% 0 none);
--cx-primary-base-color: oklch(66.72% 0.125 223.3deg);
--cx-secondary-base-color: oklch(65.65% 0.21 38.97deg);
--cx-neutral-base-color: oklch(58.78% 0.021 217.37deg);
--cx-danger-base-color: oklch(61.98% 0.24 29.73deg);
--cx-success-base-color: oklch(71.38% 0.187 151.56deg);
--cx-warning-base-color: oklch(77.74% 0.165 73.18deg);
--cx-info-base-color: oklch(44.95% 0.296 265.73deg);
--cx-black-base-color: oklch(0% 0 none);
--cx-white-base-color: oklch(100% 0 none);
--cx-default-contrast-color: oklch(100% 0 none);
--cx-alternate-contrast-color: oklch(0% 0 none);
--cx-primary-contrast-color: oklch(100% 0 none);
--cx-secondary-contrast-color: oklch(100% 0 none);
--cx-neutral-contrast-color: oklch(100% 0 none);
--cx-danger-contrast-color: oklch(100% 0 none);
--cx-success-contrast-color: oklch(100% 0 none);
--cx-warning-contrast-color: oklch(0% 0 none);
--cx-info-contrast-color: oklch(100% 0 none);
--cx-black-contrast-color: oklch(100% 0 none);
--cx-white-contrast-color: oklch(0% 0 none);
--cx-default-transparent-color: oklch(0% 0 none / 0);
--cx-alternate-transparent-color: oklch(100% 0 none / 0);
--cx-primary-transparent-color: oklch(66.72% 0.125 223.3deg / 0);
--cx-secondary-transparent-color: oklch(65.65% 0.21 38.97deg / 0);
--cx-neutral-transparent-color: oklch(58.78% 0.021 217.37deg / 0);
--cx-danger-transparent-color: oklch(61.98% 0.24 29.73deg / 0);
--cx-success-transparent-color: oklch(71.38% 0.187 151.56deg / 0);
--cx-warning-transparent-color: oklch(77.74% 0.165 73.18deg / 0);
--cx-info-transparent-color: oklch(44.95% 0.296 265.73deg / 0);
--cx-black-transparent-color: oklch(0% 0 none / 0);
--cx-white-transparent-color: oklch(100% 0 none / 0);
--cx-default-fg-main: oklch(23.98% 0.006 214.42deg);
--cx-alternate-fg-main: oklch(94.11% 0.004 219.53deg);
--cx-primary-fg-main: oklch(51.52% 0.096 222.48deg);
--cx-secondary-fg-main: oklch(50.62% 0.16 39.72deg);
--cx-neutral-fg-main: oklch(45.83% 0.016 214.47deg);
--cx-danger-fg-main: oklch(47.79% 0.182 29.73deg);
--cx-success-fg-main: oklch(55.01% 0.142 151.91deg);
--cx-warning-fg-main: oklch(59.82% 0.127 73.85deg);
--cx-info-fg-main: oklch(34.81% 0.225 266.31deg);
--cx-black-fg-main: oklch(0% 0 none);
--cx-white-fg-main: oklch(100% 0 none);
--cx-default-fg-subtle: oklch(23.98% 0.006 214.42deg / 0.5);
--cx-alternate-fg-subtle: oklch(94.11% 0.004 219.53deg / 0.5);
--cx-primary-fg-subtle: oklch(51.52% 0.096 222.48deg / 0.5);
--cx-secondary-fg-subtle: oklch(50.62% 0.16 39.72deg / 0.5);
--cx-neutral-fg-subtle: oklch(45.83% 0.016 214.47deg / 0.5);
--cx-danger-fg-subtle: oklch(47.79% 0.182 29.73deg / 0.5);
--cx-success-fg-subtle: oklch(55.01% 0.142 151.91deg / 0.5);
--cx-warning-fg-subtle: oklch(59.82% 0.127 73.85deg / 0.5);
--cx-info-fg-subtle: oklch(34.81% 0.225 266.31deg / 0.5);
--cx-black-fg-subtle: oklch(0% 0 none / 0.5);
--cx-white-fg-subtle: oklch(100% 0 none / 0.5);
--cx-default-fg-slight: oklch(23.98% 0.006 214.42deg / 0.25);
--cx-alternate-fg-slight: oklch(94.11% 0.004 219.53deg / 0.25);
--cx-primary-fg-slight: oklch(51.52% 0.096 222.48deg / 0.25);
--cx-secondary-fg-slight: oklch(50.62% 0.16 39.72deg / 0.25);
--cx-neutral-fg-slight: oklch(45.83% 0.016 214.47deg / 0.25);
--cx-danger-fg-slight: oklch(47.79% 0.182 29.73deg / 0.25);
--cx-success-fg-slight: oklch(55.01% 0.142 151.91deg / 0.25);
--cx-warning-fg-slight: oklch(59.82% 0.127 73.85deg / 0.25);
--cx-info-fg-slight: oklch(34.81% 0.225 266.31deg / 0.25);
--cx-black-fg-slight: oklch(0% 0 none / 0.3);
--cx-white-fg-slight: oklch(100% 0 none / 0.3);
--cx-default-fg-inverse: oklch(94.11% 0.004 219.53deg);
--cx-alternate-fg-inverse: oklch(23.98% 0.006 214.42deg);
--cx-primary-fg-inverse: oklch(94.24% 0.027 214.43deg);
--cx-secondary-fg-inverse: oklch(93.9% 0.032 47.35deg);
--cx-neutral-fg-inverse: oklch(94.11% 0.004 219.53deg);
--cx-danger-fg-inverse: oklch(92.65% 0.036 22.08deg);
--cx-success-fg-inverse: oklch(94.97% 0.034 163.24deg);
--cx-warning-fg-inverse: oklch(96.21% 0.034 82.91deg);
--cx-info-fg-inverse: oklch(90.51% 0.046 285.44deg);
--cx-black-fg-inverse: oklch(100% 0 none);
--cx-white-fg-inverse: oklch(0% 0 none);
--cx-default-fg-solid: oklch(0% 0 none);
--cx-alternate-fg-solid: oklch(100% 0 none);
--cx-primary-fg-solid: oklch(100% 0 none);
--cx-secondary-fg-solid: oklch(100% 0 none);
--cx-neutral-fg-solid: oklch(100% 0 none);
--cx-danger-fg-solid: oklch(100% 0 none);
--cx-success-fg-solid: oklch(100% 0 none);
--cx-warning-fg-solid: oklch(0% 0 none);
--cx-info-fg-solid: oklch(100% 0 none);
--cx-black-fg-solid: oklch(100% 0 none);
--cx-white-fg-solid: oklch(0% 0 none);
--cx-default-fg-highlight: oklch(51.52% 0.096 222.48deg);
--cx-alternate-fg-highlight: oklch(88.86% 0.053 214.36deg);
--cx-primary-fg-highlight: oklch(51.52% 0.096 222.48deg);
--cx-secondary-fg-highlight: oklch(50.62% 0.16 39.72deg);
--cx-neutral-fg-highlight: oklch(45.83% 0.016 214.47deg);
--cx-danger-fg-highlight: oklch(47.79% 0.182 29.73deg);
--cx-success-fg-highlight: oklch(55.01% 0.142 151.91deg);
--cx-warning-fg-highlight: oklch(59.82% 0.127 73.85deg);
--cx-info-fg-highlight: oklch(34.81% 0.225 266.31deg);
--cx-black-fg-highlight: oklch(0% 0 none);
--cx-white-fg-highlight: oklch(100% 0 none);
--cx-default-fg-idle: oklch(23.98% 0.006 214.42deg);
--cx-alternate-fg-idle: oklch(94.11% 0.004 219.53deg);
--cx-primary-fg-idle: oklch(100% 0 none);
--cx-secondary-fg-idle: oklch(100% 0 none);
--cx-neutral-fg-idle: oklch(100% 0 none);
--cx-danger-fg-idle: oklch(100% 0 none);
--cx-success-fg-idle: oklch(100% 0 none);
--cx-warning-fg-idle: oklch(0% 0 none);
--cx-info-fg-idle: oklch(100% 0 none);
--cx-black-fg-idle: oklch(100% 0 none);
--cx-white-fg-idle: oklch(0% 0 none);
--cx-default-fg-disabled: oklch(23.98% 0.006 214.42deg / 0.25);
--cx-alternate-fg-disabled: oklch(94.11% 0.004 219.53deg / 0.25);
--cx-primary-fg-disabled: oklch(100% 0 none / 0.25);
--cx-secondary-fg-disabled: oklch(100% 0 none / 0.25);
--cx-neutral-fg-disabled: oklch(100% 0 none / 0.25);
--cx-danger-fg-disabled: oklch(100% 0 none / 0.25);
--cx-success-fg-disabled: oklch(100% 0 none / 0.25);
--cx-warning-fg-disabled: oklch(0% 0 none / 0.25);
--cx-info-fg-disabled: oklch(100% 0 none / 0.25);
--cx-black-fg-disabled: oklch(100% 0 none / 0.25);
--cx-white-fg-disabled: oklch(0% 0 none / 0.25);
--cx-default-fg-hover: oklch(23.98% 0.006 214.42deg / 0.9);
--cx-alternate-fg-hover: oklch(94.11% 0.004 219.53deg / 0.9);
--cx-primary-fg-hover: oklch(100% 0 none / 0.9);
--cx-secondary-fg-hover: oklch(100% 0 none / 0.9);
--cx-neutral-fg-hover: oklch(100% 0 none / 0.9);
--cx-danger-fg-hover: oklch(100% 0 none / 0.9);
--cx-success-fg-hover: oklch(100% 0 none / 0.9);
--cx-warning-fg-hover: oklch(0% 0 none / 0.9);
--cx-info-fg-hover: oklch(100% 0 none / 0.9);
--cx-black-fg-hover: oklch(100% 0 none / 0.9);
--cx-white-fg-hover: oklch(0% 0 none / 0.9);
--cx-default-fg-press: oklch(23.98% 0.006 214.42deg / 0.9);
--cx-alternate-fg-press: oklch(94.11% 0.004 219.53deg / 0.9);
--cx-primary-fg-press: oklch(100% 0 none / 0.9);
--cx-secondary-fg-press: oklch(100% 0 none / 0.9);
--cx-neutral-fg-press: oklch(100% 0 none / 0.9);
--cx-danger-fg-press: oklch(100% 0 none / 0.9);
--cx-success-fg-press: oklch(100% 0 none / 0.9);
--cx-warning-fg-press: oklch(0% 0 none / 0.9);
--cx-info-fg-press: oklch(100% 0 none / 0.9);
--cx-black-fg-press: oklch(100% 0 none / 0.9);
--cx-white-fg-press: oklch(0% 0 none / 0.9);
--cx-default-bg-main: oklch(100% 0 none);
--cx-alternate-bg-main: oklch(29.21% 0.009 219.79deg);
--cx-primary-bg-main: oklch(97.38% 0.013 208.77deg);
--cx-secondary-bg-main: oklch(97.11% 0.014 50.81deg);
--cx-neutral-bg-main: oklch(97.24% 0.001 197.14deg);
--cx-danger-bg-main: oklch(96.59% 0.015 22.4deg);
--cx-success-bg-main: oklch(97.65% 0.016 162.76deg);
--cx-warning-bg-main: oklch(98.27% 0.017 88deg);
--cx-info-bg-main: oklch(95.65% 0.02 286.01deg);
--cx-black-bg-main: oklch(0% 0 none / 0.05);
--cx-white-bg-main: oklch(100% 0 none / 0.05);
--cx-default-bg-even: oklch(97.24% 0.001 197.14deg);
--cx-alternate-bg-even: oklch(23.98% 0.006 214.42deg);
--cx-primary-bg-even: oklch(94.24% 0.027 214.43deg);
--cx-secondary-bg-even: oklch(93.9% 0.032 47.35deg);
--cx-neutral-bg-even: oklch(94.11% 0.004 219.53deg);
--cx-danger-bg-even: oklch(92.65% 0.036 22.08deg);
--cx-success-bg-even: oklch(94.97% 0.034 163.24deg);
--cx-warning-bg-even: oklch(96.21% 0.034 82.91deg);
--cx-info-bg-even: oklch(90.51% 0.046 285.44deg);
--cx-black-bg-even: oklch(0% 0 none / 0.1);
--cx-white-bg-even: oklch(100% 0 none / 0.1);
--cx-default-bg-evident: oklch(94.11% 0.004 219.53deg);
--cx-alternate-bg-evident: oklch(18.49% 0.004 229.03deg);
--cx-primary-bg-evident: oklch(88.86% 0.053 214.36deg);
--cx-secondary-bg-evident: oklch(87.88% 0.065 47.47deg);
--cx-neutral-bg-evident: oklch(88.17% 0.006 211.04deg);
--cx-danger-bg-evident: oklch(85.46% 0.073 22.86deg);
--cx-success-bg-evident: oklch(90.1% 0.068 161.2deg);
--cx-warning-bg-evident: oklch(92.47% 0.068 83.57deg);
--cx-info-bg-evident: oklch(80.97% 0.094 284.1deg);
--cx-black-bg-evident: oklch(0% 0 none / 0.2);
--cx-white-bg-evident: oklch(100% 0 none / 0.2);
--cx-default-bg-inverse: oklch(23.98% 0.006 214.42deg);
--cx-alternate-bg-inverse: oklch(94.11% 0.004 219.53deg);
--cx-primary-bg-inverse: oklch(25.95% 0.047 218.54deg);
--cx-secondary-bg-inverse: oklch(25.33% 0.072 45.42deg);
--cx-neutral-bg-inverse: oklch(23.98% 0.006 214.42deg);
--cx-danger-bg-inverse: oklch(23.84% 0.081 29.75deg);
--cx-success-bg-inverse: oklch(27.67% 0.065 154.57deg);
--cx-warning-bg-inverse: oklch(29.73% 0.062 80.16deg);
--cx-info-bg-inverse: oklch(17.88% 0.102 269.77deg);
--cx-black-bg-inverse: oklch(0% 0 none / 0.9);
--cx-white-bg-inverse: oklch(100% 0 none / 0.95);
--cx-default-bg-solid: oklch(94.11% 0.004 219.53deg);
--cx-alternate-bg-solid: oklch(18.49% 0.004 229.03deg);
--cx-primary-bg-solid: oklch(66.72% 0.125 223.3deg);
--cx-secondary-bg-solid: oklch(65.65% 0.21 38.97deg);
--cx-neutral-bg-solid: oklch(58.78% 0.021 217.37deg);
--cx-danger-bg-solid: oklch(61.98% 0.24 29.73deg);
--cx-success-bg-solid: oklch(71.38% 0.187 151.56deg);
--cx-warning-bg-solid: oklch(77.74% 0.165 73.18deg);
--cx-info-bg-solid: oklch(44.95% 0.296 265.73deg);
--cx-black-bg-solid: oklch(0% 0 none);
--cx-white-bg-solid: oklch(100% 0 none);
--cx-default-bg-highlight: oklch(94.24% 0.027 214.43deg);
--cx-alternate-bg-highlight: oklch(31.88% 0.058 220.29deg);
--cx-primary-bg-highlight: oklch(81.84% 0.085 215.09deg);
--cx-secondary-bg-highlight: oklch(80.46% 0.111 47.53deg);
--cx-neutral-bg-highlight: oklch(80.14% 0.01 212.53deg);
--cx-danger-bg-highlight: oklch(76.61% 0.128 24.53deg);
--cx-success-bg-highlight: oklch(84.06% 0.11 159.24deg);
--cx-warning-bg-highlight: oklch(87.89% 0.11 83.4deg);
--cx-info-bg-highlight: oklch(68.39% 0.162 281.23deg);
--cx-black-bg-highlight: oklch(0% 0 none / 0.2);
--cx-white-bg-highlight: oklch(100% 0 none / 0.2);
--cx-default-bg-idle: oklch(100% 0 none);
--cx-alternate-bg-idle: oklch(29.21% 0.009 219.79deg);
--cx-primary-bg-idle: oklch(66.72% 0.125 223.3deg);
--cx-secondary-bg-idle: oklch(65.65% 0.21 38.97deg);
--cx-neutral-bg-idle: oklch(58.78% 0.021 217.37deg);
--cx-danger-bg-idle: oklch(61.98% 0.24 29.73deg);
--cx-success-bg-idle: oklch(71.38% 0.187 151.56deg);
--cx-warning-bg-idle: oklch(77.74% 0.165 73.18deg);
--cx-info-bg-idle: oklch(44.95% 0.296 265.73deg);
--cx-black-bg-idle: oklch(0% 0 none);
--cx-white-bg-idle: oklch(100% 0 none);
--cx-default-bg-disabled: oklch(88.17% 0.006 211.04deg);
--cx-alternate-bg-disabled: oklch(29.21% 0.009 219.79deg);
--cx-primary-bg-disabled: oklch(88.86% 0.053 214.36deg);
--cx-secondary-bg-disabled: oklch(87.88% 0.065 47.47deg);
--cx-neutral-bg-disabled: oklch(88.17% 0.006 211.04deg);
--cx-danger-bg-disabled: oklch(85.46% 0.073 22.86deg);
--cx-success-bg-disabled: oklch(90.1% 0.068 161.2deg);
--cx-warning-bg-disabled: oklch(92.47% 0.068 83.57deg);
--cx-info-bg-disabled: oklch(80.97% 0.094 284.1deg);
--cx-black-bg-disabled: oklch(0% 0 none / 0.2);
--cx-white-bg-disabled: oklch(100% 0 none / 0.2);
--cx-default-bg-hover: oklch(97.24% 0.001 197.14deg);
--cx-alternate-bg-hover: oklch(23.98% 0.006 214.42deg);
--cx-primary-bg-hover: oklch(73.71% 0.114 217.55deg);
--cx-secondary-bg-hover: oklch(72.08% 0.168 44.91deg);
--cx-neutral-bg-hover: oklch(69.67% 0.016 218.11deg);
--cx-danger-bg-hover: oklch(67.58% 0.195 27.49deg);
--cx-success-bg-hover: oklch(77.01% 0.155 156.23deg);
--cx-warning-bg-hover: oklch(82.57% 0.15 80.33deg);
--cx-info-bg-hover: oklch(54.12% 0.243 274.61deg);
--cx-black-bg-hover: oklch(0% 0 none / 0.9);
--cx-white-bg-hover: oklch(100% 0 none / 0.9);
--cx-default-bg-press: oklch(94.11% 0.004 219.53deg);
--cx-alternate-bg-press: oklch(18.49% 0.004 229.03deg);
--cx-primary-bg-press: oklch(51.52% 0.096 222.48deg);
--cx-secondary-bg-press: oklch(50.62% 0.16 39.72deg);
--cx-neutral-bg-press: oklch(45.83% 0.016 214.47deg);
--cx-danger-bg-press: oklch(47.79% 0.182 29.73deg);
--cx-success-bg-press: oklch(55.01% 0.142 151.91deg);
--cx-warning-bg-press: oklch(59.82% 0.127 73.85deg);
--cx-info-bg-press: oklch(34.81% 0.225 266.31deg);
--cx-black-bg-press: oklch(0% 0 none / 0.95);
--cx-white-bg-press: oklch(100% 0 none / 0.95);
--cx-default-border-main: oklch(69.67% 0.016 218.11deg);
--cx-alternate-border-main: oklch(45.83% 0.016 214.47deg);
--cx-primary-border-main: oklch(73.71% 0.114 217.55deg);
--cx-secondary-border-main: oklch(72.08% 0.168 44.91deg);
--cx-neutral-border-main: oklch(69.67% 0.016 218.11deg);
--cx-danger-border-main: oklch(67.58% 0.195 27.49deg);
--cx-success-border-main: oklch(77.01% 0.155 156.23deg);
--cx-warning-border-main: oklch(82.57% 0.15 80.33deg);
--cx-info-border-main: oklch(54.12% 0.243 274.61deg);
--cx-black-border-main: oklch(0% 0 none / 0.3);
--cx-white-border-main: oklch(100% 0 none / 0.3);
--cx-default-border-subtle: oklch(23.98% 0.006 214.42deg / 0.15);
--cx-alternate-border-subtle: oklch(94.11% 0.004 219.53deg / 0.15);
--cx-primary-border-subtle: oklch(51.52% 0.096 222.48deg / 0.15);
--cx-secondary-border-subtle: oklch(50.62% 0.16 39.72deg / 0.15);
--cx-neutral-border-subtle: oklch(45.83% 0.016 214.47deg / 0.15);
--cx-danger-border-subtle: oklch(47.79% 0.182 29.73deg / 0.15);
--cx-success-border-subtle: oklch(55.01% 0.142 151.91deg / 0.15);
--cx-warning-border-subtle: oklch(59.82% 0.127 73.85deg / 0.15);
--cx-info-border-subtle: oklch(34.81% 0.225 266.31deg / 0.15);
--cx-black-border-subtle: oklch(0% 0 none / 0.15);
--cx-white-border-subtle: oklch(100% 0 none / 0.15);
--cx-default-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-alternate-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-primary-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-secondary-icon-main: oklch(65.65% 0.21 38.97deg);
--cx-neutral-icon-main: oklch(58.78% 0.021 217.37deg);
--cx-danger-icon-main: oklch(61.98% 0.24 29.73deg);
--cx-success-icon-main: oklch(71.38% 0.187 151.56deg);
--cx-warning-icon-main: oklch(77.74% 0.165 73.18deg);
--cx-info-icon-main: oklch(44.95% 0.296 265.73deg);
--cx-black-icon-main: oklch(0% 0 none);
--cx-white-icon-main: oklch(100% 0 none);
--cx-default-icon-subtle: oklch(23.98% 0.006 214.42deg / 0.4);
--cx-alternate-icon-subtle: oklch(94.11% 0.004 219.53deg / 0.4);
--cx-primary-icon-subtle: oklch(51.52% 0.096 222.48deg / 0.4);
--cx-secondary-icon-subtle: oklch(50.62% 0.16 39.72deg / 0.4);
--cx-neutral-icon-subtle: oklch(45.83% 0.016 214.47deg / 0.4);
--cx-danger-icon-subtle: oklch(47.79% 0.182 29.73deg / 0.4);
--cx-success-icon-subtle: oklch(55.01% 0.142 151.91deg / 0.4);
--cx-warning-icon-subtle: oklch(59.82% 0.127 73.85deg / 0.4);
--cx-info-icon-subtle: oklch(34.81% 0.225 266.31deg / 0.4);
--cx-black-icon-subtle: oklch(0% 0 none / 0.4);
--cx-white-icon-subtle: oklch(100% 0 none / 0.4);
--cx-default-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-alternate-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-primary-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-secondary-icon-slight: oklch(65.65% 0.21 38.97deg / 0.2);
--cx-neutral-icon-slight: oklch(58.78% 0.021 217.37deg / 0.2);
--cx-danger-icon-slight: oklch(61.98% 0.24 29.73deg / 0.2);
--cx-success-icon-slight: oklch(71.38% 0.187 151.56deg / 0.2);
--cx-warning-icon-slight: oklch(77.74% 0.165 73.18deg / 0.2);
--cx-info-icon-slight: oklch(44.95% 0.296 265.73deg / 0.2);
--cx-black-icon-slight: oklch(0% 0 none / 0.2);
--cx-white-icon-slight: oklch(100% 0 none / 0.2);
--cx-default-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-alternate-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-primary-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-secondary-cue-main: oklch(65.65% 0.21 38.97deg);
--cx-neutral-cue-main: oklch(58.78% 0.021 217.37deg);
--cx-danger-cue-main: oklch(61.98% 0.24 29.73deg);
--cx-success-cue-main: oklch(71.38% 0.187 151.56deg);
--cx-warning-cue-main: oklch(77.74% 0.165 73.18deg);
--cx-info-cue-main: oklch(44.95% 0.296 265.73deg);
--cx-black-cue-main: oklch(0% 0 none);
--cx-white-cue-main: oklch(100% 0 none);
--cx-default-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-alternate-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-primary-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-secondary-cue-slight: oklch(65.65% 0.21 38.97deg / 0.2);
--cx-neutral-cue-slight: oklch(58.78% 0.021 217.37deg / 0.2);
--cx-danger-cue-slight: oklch(61.98% 0.24 29.73deg / 0.2);
--cx-success-cue-slight: oklch(71.38% 0.187 151.56deg / 0.2);
--cx-warning-cue-slight: oklch(77.74% 0.165 73.18deg / 0.2);
--cx-info-cue-slight: oklch(44.95% 0.296 265.73deg / 0.2);
--cx-black-cue-slight: oklch(0% 0 none / 0.2);
--cx-white-cue-slight: oklch(100% 0 none / 0.2);
--cx-default-dim-slight: oklch(0% 0 none / 0.05);
--cx-alternate-dim-slight: oklch(100% 0 none / 0.05);
--cx-primary-dim-slight: oklch(66.72% 0.125 223.3deg / 0.1);
--cx-secondary-dim-slight: oklch(65.65% 0.21 38.97deg / 0.1);
--cx-neutral-dim-slight: oklch(58.78% 0.021 217.37deg / 0.1);
--cx-danger-dim-slight: oklch(61.98% 0.24 29.73deg / 0.1);
--cx-success-dim-slight: oklch(71.38% 0.187 151.56deg / 0.1);
--cx-warning-dim-slight: oklch(77.74% 0.165 73.18deg / 0.1);
--cx-info-dim-slight: oklch(44.95% 0.296 265.73deg / 0.1);
--cx-black-dim-slight: oklch(0% 0 none / 0.1);
--cx-white-dim-slight: oklch(100% 0 none / 0.1);
--cx-default-dim-main: oklch(0% 0 none / 0.7);
--cx-alternate-dim-main: oklch(100% 0 none / 0.7);
--cx-primary-dim-main: oklch(66.72% 0.125 223.3deg / 0.7);
--cx-secondary-dim-main: oklch(65.65% 0.21 38.97deg / 0.7);
--cx-neutral-dim-main: oklch(58.78% 0.021 217.37deg / 0.7);
--cx-danger-dim-main: oklch(61.98% 0.24 29.73deg / 0.7);
--cx-success-dim-main: oklch(71.38% 0.187 151.56deg / 0.7);
--cx-warning-dim-main: oklch(77.74% 0.165 73.18deg / 0.7);
--cx-info-dim-main: oklch(44.95% 0.296 265.73deg / 0.7);
--cx-black-dim-main: oklch(0% 0 none / 0.7);
--cx-white-dim-main: oklch(100% 0 none / 0.7);
--cx-default-dim-subtle: oklch(0% 0 none / 0.3);
--cx-alternate-dim-subtle: oklch(100% 0 none / 0.3);
--cx-primary-dim-subtle: oklch(66.72% 0.125 223.3deg / 0.3);
--cx-secondary-dim-subtle: oklch(65.65% 0.21 38.97deg / 0.3);
--cx-neutral-dim-subtle: oklch(58.78% 0.021 217.37deg / 0.3);
--cx-danger-dim-subtle: oklch(61.98% 0.24 29.73deg / 0.3);
--cx-success-dim-subtle: oklch(71.38% 0.187 151.56deg / 0.3);
--cx-warning-dim-subtle: oklch(77.74% 0.165 73.18deg / 0.3);
--cx-info-dim-subtle: oklch(44.95% 0.296 265.73deg / 0.3);
--cx-black-dim-subtle: oklch(0% 0 none / 0.3);
--cx-white-dim-subtle: oklch(100% 0 none / 0.3);
--cx-default-link-main: oklch(66.72% 0.125 223.3deg);
--cx-alternate-link-main: oklch(66.72% 0.125 223.3deg);
--cx-primary-link-main: oklch(66.72% 0.125 223.3deg);
--cx-secondary-link-main: oklch(65.65% 0.21 38.97deg);
--cx-neutral-link-main: oklch(58.78% 0.021 217.37deg);
--cx-danger-link-main: oklch(61.98% 0.24 29.73deg);
--cx-success-link-main: oklch(71.38% 0.187 151.56deg);
--cx-warning-link-main: oklch(77.74% 0.165 73.18deg);
--cx-info-link-main: oklch(44.95% 0.296 265.73deg);
--cx-black-link-main: oklch(0% 0 none);
--cx-white-link-main: oklch(100% 0 none);
--cx-default-link-hover: oklch(73.71% 0.114 217.55deg);
--cx-alternate-link-hover: oklch(73.71% 0.114 217.55deg);
--cx-primary-link-hover: oklch(73.71% 0.114 217.55deg);
--cx-secondary-link-hover: oklch(72.08% 0.168 44.91deg);
--cx-neutral-link-hover: oklch(69.67% 0.016 218.11deg);
--cx-danger-link-hover: oklch(67.58% 0.195 27.49deg);
--cx-success-link-hover: oklch(77.01% 0.155 156.23deg);
--cx-warning-link-hover: oklch(82.57% 0.15 80.33deg);
--cx-info-link-hover: oklch(54.12% 0.243 274.61deg);
--cx-black-link-hover: oklch(0% 0 none / 0.9);
--cx-white-link-hover: oklch(100% 0 none / 0.9);
--cx-default-link-active: oklch(61.98% 0.24 29.73deg);
--cx-alternate-link-active: oklch(61.98% 0.24 29.73deg);
--cx-primary-link-active: oklch(66.72% 0.125 223.3deg);
--cx-secondary-link-active: oklch(65.65% 0.21 38.97deg);
--cx-neutral-link-active: oklch(58.78% 0.021 217.37deg);
--cx-danger-link-active: oklch(61.98% 0.24 29.73deg);
--cx-success-link-active: oklch(71.38% 0.187 151.56deg);
--cx-warning-link-active: oklch(77.74% 0.165 73.18deg);
--cx-info-link-active: oklch(44.95% 0.296 265.73deg);
--cx-black-link-active: oklch(61.98% 0.24 29.73deg);
--cx-white-link-active: oklch(61.98% 0.24 29.73deg);
--cx-default-link-visited: oklch(51.52% 0.096 222.48deg);
--cx-alternate-link-visited: oklch(51.52% 0.096 222.48deg);
--cx-primary-link-visited: oklch(51.52% 0.096 222.48deg);
--cx-secondary-link-visited: oklch(50.62% 0.16 39.72deg);
--cx-neutral-link-visited: oklch(45.83% 0.016 214.47deg);
--cx-danger-link-visited: oklch(47.79% 0.182 29.73deg);
--cx-success-link-visited: oklch(55.01% 0.142 151.91deg);
--cx-warning-link-visited: oklch(59.82% 0.127 73.85deg);
--cx-info-link-visited: oklch(34.81% 0.225 266.31deg);
--cx-black-link-visited: oklch(0% 0 none / 0.6);
--cx-white-link-visited: oklch(100% 0 none / 0.6);
--cx-font-family-text: Inter, system-ui, -apple-system, Helvetica, Arial, sans-serif;
--cx-font-family-display: Archivo Narrow, Georgia, Times New Roman, Times, serif;
--cx-font-family-code: Fira Code, Menlo, Monaco, Consolas, Courier New, monospace;
--cx-font-family-html: Inter, system-ui, -apple-system, Helvetica, Arial, sans-serif;
--cx-font-family-icon: Chassis-Icons;
--cx-font-size-5xlarge: var(--cx-font-size-text-5xlarge);
--cx-font-size-4xlarge: var(--cx-font-size-text-4xlarge);
--cx-font-size-3xlarge: var(--cx-font-size-text-3xlarge);
--cx-font-size-2xlarge: var(--cx-font-size-text-2xlarge);
--cx-font-size-xlarge: var(--cx-font-size-text-xlarge);
--cx-font-size-large: var(--cx-font-size-text-large);
--cx-font-size-medium: var(--cx-font-size-text-medium);
--cx-font-size-small: var(--cx-font-size-text-small);
--cx-font-size-xsmall: var(--cx-font-size-text-xsmall);
--cx-font-size-2xsmall: var(--cx-font-size-text-2xsmall);
--cx-font-weight-normal: var(--cx-font-weight-text-normal);
--cx-font-weight-strong: var(--cx-font-weight-text-strong);
--cx-font-weight-mass: var(--cx-font-weight-text-mass);
--cx-font-weight-elegant: var(--cx-font-weight-text-elegant);
--cx-line-height-5xlarge: var(--cx-line-height-text-5xlarge);
--cx-line-height-4xlarge: var(--cx-line-height-text-4xlarge);
--cx-line-height-3xlarge: var(--cx-line-height-text-3xlarge);
--cx-line-height-2xlarge: var(--cx-line-height-text-2xlarge);
--cx-line-height-xlarge: var(--cx-line-height-text-xlarge);
--cx-line-height-large: var(--cx-line-height-text-large);
--cx-line-height-medium: var(--cx-line-height-text-medium);
--cx-line-height-small: var(--cx-line-height-text-small);
--cx-line-height-xsmall: var(--cx-line-height-text-xsmall);
--cx-line-height-2xsmall: var(--cx-line-height-text-2xsmall);
--cx-font-size-text-5xlarge: calc(1.4rem + 1.8vw);
--cx-font-size-text-4xlarge: calc(1.3625rem + 1.35vw);
--cx-font-size-text-3xlarge: calc(1.325rem + 0.9vw);
--cx-font-size-text-2xlarge: calc(1.2875rem + 0.45vw);
--cx-font-size-text-xlarge: calc(1.2625rem + 0.15vw);
--cx-font-size-text-large: 1.1875rem;
--cx-font-size-text-medium: 1rem;
--cx-font-size-text-small: 0.875rem;
--cx-font-size-text-xsmall: 0.75rem;
--cx-font-size-text-2xsmall: 0.625rem;
--cx-font-weight-text-normal: 400;
--cx-font-weight-text-strong: 600;
--cx-font-weight-text-mass: 700;
--cx-font-weight-text-elegant: 300;
--cx-line-height-text-5xlarge: 1.273em;
--cx-line-height-text-4xlarge: 1.263em;
--cx-line-height-text-3xlarge: 1.25em;
--cx-line-height-text-2xlarge: 1.385em;
--cx-line-height-text-xlarge: 1.455em;
--cx-line-height-text-large: 1.474em;
--cx-line-height-text-medium: 1.5em;
--cx-line-height-text-small: 1.429em;
--cx-line-height-text-xsmall: 1.5em;
--cx-line-height-text-2xsmall: 1.4em;
--cx-font-size-display-5xlarge: calc(1.4rem + 1.8vw);
--cx-font-size-display-4xlarge: calc(1.3625rem + 1.35vw);
--cx-font-size-display-3xlarge: calc(1.325rem + 0.9vw);
--cx-font-size-display-2xlarge: calc(1.2875rem + 0.45vw);
--cx-font-size-display-xlarge: calc(1.2625rem + 0.15vw);
--cx-font-size-display-large: 1.1875rem;
--cx-font-size-display-medium: 1rem;
--cx-font-size-display-small: 0.875rem;
--cx-font-size-display-xsmall: 0.75rem;
--cx-font-size-display-2xsmall: 0.625rem;
--cx-font-weight-display-normal: 500;
--cx-font-weight-display-strong: 600;
--cx-font-weight-display-mass: 700;
--cx-font-weight-display-elegant: 400;
--cx-line-height-display-5xlarge: 1.273em;
--cx-line-height-display-4xlarge: 1.263em;
--cx-line-height-display-3xlarge: 1.25em;
--cx-line-height-display-2xlarge: 1.385em;
--cx-line-height-display-xlarge: 1.455em;
--cx-line-height-display-large: 1.474em;
--cx-line-height-display-medium: 1.5em;
--cx-line-height-display-small: 1.429em;
--cx-line-height-display-xsmall: 1.5em;
--cx-line-height-display-2xsmall: 1.4em;
--cx-font-size-html-body: 1rem;
--cx-font-size-html-h1: calc(1.3625rem + 1.35vw);
--cx-font-size-html-h2: calc(1.325rem + 0.9vw);
--cx-font-size-html-h3: calc(1.2875rem + 0.45vw);
--cx-font-size-html-h4: calc(1.2625rem + 0.15vw);
--cx-font-size-html-h5: 1.1875rem;
--cx-font-size-html-h6: 1rem;
--cx-font-size-html-paragraph: 1rem;
--cx-font-size-html-blockquote: 1rem;
--cx-font-size-html-cite: 0.875rem;
--cx-font-size-html-code: 1rem;
--cx-font-size-html-list: 1rem;
--cx-font-weight-html-body: 400;
--cx-font-weight-html-heading: 700;
--cx-font-weight-html-paragraph: 400;
--cx-font-weight-html-blockquote: 300;
--cx-font-weight-html-cite: 600;
--cx-font-weight-html-list: 400;
--cx-font-weight-html-code: 400;
--cx-line-height-html-body: 1.5em;
--cx-line-height-html-h1: 1.211em;
--cx-line-height-html-h2: 1.25em;
--cx-line-height-html-h3: 1.231em;
--cx-line-height-html-h4: 1.273em;
--cx-line-height-html-h5: 1.263em;
--cx-line-height-html-h6: 1.25em;
--cx-line-height-html-paragraph: 1.5em;
--cx-line-height-html-blockquote: 1.5em;
--cx-line-height-html-cite: 1.429em;
--cx-line-height-html-list: 1.5em;
--cx-line-height-html-code: 1.5em;
--cx-font-size-code-large: 1.1875rem;
--cx-font-size-code-medium: 1rem;
--cx-font-size-code-small: 0.875rem;
--cx-font-weight-code-normal: 400;
--cx-font-weight-code-strong: 700;
--cx-line-height-code-large: 1.474em;
--cx-line-height-code-medium: 1.5em;
--cx-line-height-code-small: 1.429em;
--cx-space-zero: 0rem;
--cx-space-4xsmall: 0.0625rem;
--cx-space-3xsmall: 0.125rem;
--cx-space-2xsmall: 0.25rem;
--cx-space-xsmall: 0.5rem;
--cx-space-small: 0.75rem;
--cx-space-medium: 1rem;
--cx-space-large: 1.25rem;
--cx-space-xlarge: 1.5rem;
--cx-space-2xlarge: 1.75rem;
--cx-space-3xlarge: 2rem;
--cx-space-4xlarge: 2.25rem;
--cx-space-5xlarge: 2.5rem;
--cx-space-6xlarge: 3rem;
--cx-space-0: 0;
--cx-space-1: 0.25rem;
--cx-space-2: 0.5rem;
--cx-space-3: 1rem;
--cx-space-4: 1.5rem;
--cx-space-5: 3rem;
--cx-icon-4xlarge: 3rem;
--cx-icon-3xlarge: 2.5rem;
--cx-icon-2xlarge: 2.25rem;
--cx-icon-xlarge: 2rem;
--cx-icon-large: 1.75rem;
--cx-icon-medium: 1.5rem;
--cx-icon-small: 1.25rem;
--cx-icon-xsmall: 1rem;
--cx-icon-2xsmall: 0.75rem;
--cx-icon-3xsmall: 0.5rem;
--cx-border-width-zero: 0rem;
--cx-border-width-small: 0.0313rem;
--cx-border-width-medium: 0.0625rem;
--cx-border-width-large: 0.0938rem;
--cx-border-width-xlarge: 0.125rem;
--cx-border-width-2xlarge: 0.25rem;
--cx-border-radius-zero: 0rem;
--cx-border-radius-xsmall: 0.125rem;
--cx-border-radius-small: 0.25rem;
--cx-border-radius-medium: 0.375rem;
--cx-border-radius-large: 0.625rem;
--cx-border-radius-xlarge: 0.75rem;
--cx-border-radius-2xlarge: 1rem;
--cx-border-radius-3xlarge: 1.25rem;
--cx-border-radius-circle: 50%;
--cx-border-radius-round: 16rem;
--cx-border-radius-pill: 16rem;
--cx-opacity-solid: 1;
--cx-opacity-95: 0.95;
--cx-opacity-90: 0.9;
--cx-opacity-80: 0.8;
--cx-opacity-70: 0.7;
--cx-opacity-60: 0.6;
--cx-opacity-50: 0.5;
--cx-opacity-40: 0.4;
--cx-opacity-30: 0.3;
--cx-opacity-20: 0.2;
--cx-opacity-10: 0.1;
--cx-opacity-05: 0.05;
--cx-opacity-zero: 0;
--cx-opacity-fg-subtle: 0.5;
--cx-opacity-fg-slight: 0.25;
--cx-opacity-border-main: 0.4;
--cx-opacity-border-subtle: 0.15;
--cx-opacity-icon-subtle: 0.4;
--cx-opacity-icon-slight: 0.2;
--cx-opacity-dim-main: 0.7;
--cx-opacity-dim-subtle: 0.3;
--cx-opacity-dim-slight: 0.05;
--cx-opacity-transparent-color: 0;
--cx-font-family: var(--cx-font-family-text);
--cx-font-size: var(--cx-font-size-medium);
--cx-font-weight: var(--cx-font-weight-normal);
--cx-line-height: var(--cx-line-height-medium);
--cx-separator-size: 0.0625rem;
--cx-indicator-size: 0.25rem;
--cx-base-color: var(--cx-default-base-color);
--cx-contrast-color: var(--cx-default-contrast-color);
--cx-transparent-color: var(--cx-default-transparent-color);
--cx-fg-main: var(--cx-default-fg-main);
--cx-fg-subtle: var(--cx-default-fg-subtle);
--cx-fg-slight: var(--cx-default-fg-slight);
--cx-fg-inverse: var(--cx-default-fg-inverse);
--cx-fg-solid: var(--cx-default-fg-solid);
--cx-fg-highlight: var(--cx-default-fg-highlight);
--cx-fg-idle: var(--cx-default-fg-idle);
--cx-fg-disabled: var(--cx-default-fg-disabled);
--cx-fg-hover: var(--cx-default-fg-hover);
--cx-fg-press: var(--cx-default-fg-press);
--cx-bg-main: var(--cx-default-bg-main);
--cx-bg-even: var(--cx-default-bg-even);
--cx-bg-evident: var(--cx-default-bg-evident);
--cx-bg-inverse: var(--cx-default-bg-inverse);
--cx-bg-solid: var(--cx-default-bg-solid);
--cx-bg-highlight: var(--cx-default-bg-highlight);
--cx-bg-idle: var(--cx-default-bg-idle);
--cx-bg-disabled: var(--cx-default-bg-disabled);
--cx-bg-hover: var(--cx-default-bg-hover);
--cx-bg-press: var(--cx-default-bg-press);
--cx-border-main: var(--cx-default-border-main);
--cx-border-subtle: var(--cx-default-border-subtle);
--cx-icon-main: var(--cx-default-icon-main);
--cx-icon-subtle: var(--cx-default-icon-subtle);
--cx-icon-slight: var(--cx-default-icon-slight);
--cx-cue-main: var(--cx-default-cue-main);
--cx-cue-slight: var(--cx-default-cue-slight);
--cx-dim-main: var(--cx-default-dim-main);
--cx-dim-subtle: var(--cx-default-dim-subtle);
--cx-dim-slight: var(--cx-default-dim-slight);
--cx-link-main: var(--cx-default-link-main);
--cx-link-hover: var(--cx-default-link-hover);
--cx-link-active: var(--cx-default-link-active);
--cx-link-visited: var(--cx-default-link-visited);
--cx-fg-color: var(--cx-context-fg-main, var(--cx-fg-main));
--cx-bg-color: var(--cx-context-bg-main, var(--cx-bg-main));
--cx-border-color: var(--cx-context-border-subtle, var(--cx-border-subtle));
--cx-separator-color: var(--cx-context-border-subtle, var(--cx-border-subtle));
--cx-icon-color: var(--cx-context-icon-main, var(--cx-icon-main));
--cx-bullet-color: var(--cx-context-icon-subtle, var(--cx-icon-subtle));
--cx-cue-color: var(--cx-context-cue-main, var(--cx-cue-main));
--cx-link-main-color: var(--cx-context-link-main, var(--cx-link-main));
--cx-link-hover-color: var(--cx-context-link-hover, var(--cx-link-hover));
--cx-link-active-color: var(--cx-context-link-active, var(--cx-link-active));
--cx-link-visited-color: var(--cx-context-link-visited, var(--cx-link-visited));
--cx-code-color: #f39;
--cx-mark-fg-color: var(--cx-default-fg-highlight);
--cx-mark-bg-color: var(--cx-default-bg-highlight);
--cx-icon-size: 1.5rem;
--cx-link-decoration: underline;
--cx-border-width: 0.0625rem;
--cx-border-style: solid;
--cx-border-color: #93a0a4;
--cx-border-radius: 0.375rem;
--cx-box-shadow-small: 0rem 0.0625rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.1), 0rem 0.0313rem 0.125rem -0.0313rem rgba(0, 0, 0, 0.1);
--cx-box-shadow-medium: 0rem 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1), 0rem 0.125rem 0.5rem -0.125rem rgba(0, 0, 0, 0.1);
--cx-box-shadow-large: 0rem 0.5rem 2rem -0.5rem rgba(0, 0, 0, 0.1), 0rem 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1);
--cx-box-shadow-inset: inset 0 0.125rem 0.25rem oklch(from #000 l c h / 0.125);
--cx-focus-ring-width: 0.25rem;
--cx-focus-ring-opacity: 0.25;
--cx-focus-ring-color: oklch(from var(--cx-default-cue-main) l c h / 0.25);
--cx-bg-gradient: linear-gradient(180deg, oklch(from #fff l c h / 0.15), oklch(from #fff l c h / 0));
--cx-heading-color: var(--cx-fg-main);
}Dark mode
These variables are scoped to our built-in dark mode.
[data-cx-theme=dark] {
color-scheme: dark;
--cx-default: oklch(100% 0 none);
--cx-alternate: oklch(100% 0 none);
--cx-primary: oklch(66.72% 0.125 223.3deg);
--cx-secondary: oklch(65.65% 0.21 38.97deg);
--cx-neutral: oklch(58.78% 0.021 217.37deg);
--cx-warning: oklch(77.74% 0.165 73.18deg);
--cx-success: oklch(71.38% 0.187 151.56deg);
--cx-danger: oklch(61.98% 0.24 29.73deg);
--cx-info: oklch(44.95% 0.296 265.73deg);
--cx-black: oklch(0% 0 none);
--cx-white: oklch(100% 0 none);
--cx-default-contrast: oklch(0% 0 none);
--cx-alternate-contrast: oklch(0% 0 none);
--cx-primary-contrast: oklch(100% 0 none);
--cx-secondary-contrast: oklch(100% 0 none);
--cx-neutral-contrast: oklch(100% 0 none);
--cx-warning-contrast: oklch(0% 0 none);
--cx-success-contrast: oklch(100% 0 none);
--cx-danger-contrast: oklch(100% 0 none);
--cx-info-contrast: oklch(100% 0 none);
--cx-black-contrast: oklch(100% 0 none);
--cx-white-contrast: oklch(0% 0 none);
--cx-default-base-color: oklch(100% 0 none);
--cx-alternate-base-color: oklch(100% 0 none);
--cx-primary-base-color: oklch(66.72% 0.125 223.3deg);
--cx-secondary-base-color: oklch(65.65% 0.21 38.97deg);
--cx-neutral-base-color: oklch(58.78% 0.021 217.37deg);
--cx-danger-base-color: oklch(61.98% 0.24 29.73deg);
--cx-success-base-color: oklch(71.38% 0.187 151.56deg);
--cx-warning-base-color: oklch(77.74% 0.165 73.18deg);
--cx-info-base-color: oklch(44.95% 0.296 265.73deg);
--cx-black-base-color: oklch(0% 0 none);
--cx-white-base-color: oklch(100% 0 none);
--cx-default-contrast-color: oklch(0% 0 none);
--cx-alternate-contrast-color: oklch(0% 0 none);
--cx-primary-contrast-color: oklch(100% 0 none);
--cx-secondary-contrast-color: oklch(100% 0 none);
--cx-neutral-contrast-color: oklch(100% 0 none);
--cx-danger-contrast-color: oklch(100% 0 none);
--cx-success-contrast-color: oklch(100% 0 none);
--cx-warning-contrast-color: oklch(0% 0 none);
--cx-info-contrast-color: oklch(100% 0 none);
--cx-black-contrast-color: oklch(100% 0 none);
--cx-white-contrast-color: oklch(0% 0 none);
--cx-default-transparent-color: oklch(0% 0 none / 0);
--cx-alternate-transparent-color: oklch(0% 0 none / 0);
--cx-primary-transparent-color: oklch(66.72% 0.125 223.3deg / 0);
--cx-secondary-transparent-color: oklch(65.65% 0.21 38.97deg / 0);
--cx-neutral-transparent-color: oklch(58.78% 0.021 217.37deg / 0);
--cx-danger-transparent-color: oklch(61.98% 0.24 29.73deg / 0);
--cx-success-transparent-color: oklch(71.38% 0.187 151.56deg / 0);
--cx-warning-transparent-color: oklch(77.74% 0.165 73.18deg / 0);
--cx-info-transparent-color: oklch(44.95% 0.296 265.73deg / 0);
--cx-black-transparent-color: oklch(0% 0 none / 0);
--cx-white-transparent-color: oklch(100% 0 none / 0);
--cx-default-fg-main: oklch(94.11% 0.004 219.53deg);
--cx-alternate-fg-main: oklch(100% 0 none);
--cx-primary-fg-main: oklch(73.71% 0.114 217.55deg);
--cx-secondary-fg-main: oklch(72.08% 0.168 44.91deg);
--cx-neutral-fg-main: oklch(69.67% 0.016 218.11deg);
--cx-danger-fg-main: oklch(67.58% 0.195 27.49deg);
--cx-success-fg-main: oklch(77.01% 0.155 156.23deg);
--cx-warning-fg-main: oklch(82.57% 0.15 80.33deg);
--cx-info-fg-main: oklch(54.12% 0.243 274.61deg);
--cx-black-fg-main: oklch(0% 0 none);
--cx-white-fg-main: oklch(100% 0 none);
--cx-default-fg-subtle: oklch(94.11% 0.004 219.53deg / 0.5);
--cx-alternate-fg-subtle: oklch(100% 0 none / 0.5);
--cx-primary-fg-subtle: oklch(73.71% 0.114 217.55deg / 0.5);
--cx-secondary-fg-subtle: oklch(72.08% 0.168 44.91deg / 0.5);
--cx-neutral-fg-subtle: oklch(69.67% 0.016 218.11deg / 0.5);
--cx-danger-fg-subtle: oklch(67.58% 0.195 27.49deg / 0.5);
--cx-success-fg-subtle: oklch(77.01% 0.155 156.23deg / 0.5);
--cx-warning-fg-subtle: oklch(82.57% 0.15 80.33deg / 0.5);
--cx-info-fg-subtle: oklch(54.12% 0.243 274.61deg / 0.5);
--cx-black-fg-subtle: oklch(0% 0 none / 0.5);
--cx-white-fg-subtle: oklch(100% 0 none / 0.5);
--cx-default-fg-slight: oklch(94.11% 0.004 219.53deg / 0.25);
--cx-alternate-fg-slight: oklch(100% 0 none / 0.25);
--cx-primary-fg-slight: oklch(73.71% 0.114 217.55deg / 0.25);
--cx-secondary-fg-slight: oklch(72.08% 0.168 44.91deg / 0.25);
--cx-neutral-fg-slight: oklch(69.67% 0.016 218.11deg / 0.25);
--cx-danger-fg-slight: oklch(67.58% 0.195 27.49deg / 0.25);
--cx-success-fg-slight: oklch(77.01% 0.155 156.23deg / 0.25);
--cx-warning-fg-slight: oklch(82.57% 0.15 80.33deg / 0.25);
--cx-info-fg-slight: oklch(54.12% 0.243 274.61deg / 0.25);
--cx-black-fg-slight: oklch(0% 0 none / 0.3);
--cx-white-fg-slight: oklch(100% 0 none / 0.3);
--cx-default-fg-inverse: oklch(23.98% 0.006 214.42deg);
--cx-alternate-fg-inverse: oklch(0% 0 none);
--cx-primary-fg-inverse: oklch(25.95% 0.047 218.54deg);
--cx-secondary-fg-inverse: oklch(25.33% 0.072 45.42deg);
--cx-neutral-fg-inverse: oklch(23.98% 0.006 214.42deg);
--cx-danger-fg-inverse: oklch(23.84% 0.081 29.75deg);
--cx-success-fg-inverse: oklch(27.67% 0.065 154.57deg);
--cx-warning-fg-inverse: oklch(29.73% 0.062 80.16deg);
--cx-info-fg-inverse: oklch(17.88% 0.102 269.77deg);
--cx-black-fg-inverse: oklch(100% 0 none);
--cx-white-fg-inverse: oklch(0% 0 none);
--cx-default-fg-solid: oklch(100% 0 none);
--cx-alternate-fg-solid: oklch(100% 0 none);
--cx-primary-fg-solid: oklch(100% 0 none);
--cx-secondary-fg-solid: oklch(100% 0 none);
--cx-neutral-fg-solid: oklch(100% 0 none);
--cx-danger-fg-solid: oklch(100% 0 none);
--cx-success-fg-solid: oklch(100% 0 none);
--cx-warning-fg-solid: oklch(0% 0 none);
--cx-info-fg-solid: oklch(100% 0 none);
--cx-black-fg-solid: oklch(100% 0 none);
--cx-white-fg-solid: oklch(0% 0 none);
--cx-default-fg-highlight: oklch(81.84% 0.085 215.09deg);
--cx-alternate-fg-highlight: oklch(81.84% 0.085 215.09deg);
--cx-primary-fg-highlight: oklch(81.84% 0.085 215.09deg);
--cx-secondary-fg-highlight: oklch(80.46% 0.111 47.53deg);
--cx-neutral-fg-highlight: oklch(80.14% 0.01 212.53deg);
--cx-danger-fg-highlight: oklch(76.61% 0.128 24.53deg);
--cx-success-fg-highlight: oklch(84.06% 0.11 159.24deg);
--cx-warning-fg-highlight: oklch(87.89% 0.11 83.4deg);
--cx-info-fg-highlight: oklch(68.39% 0.162 281.23deg);
--cx-black-fg-highlight: oklch(0% 0 none);
--cx-white-fg-highlight: oklch(100% 0 none);
--cx-default-bg-main: oklch(18.49% 0.004 229.03deg);
--cx-alternate-bg-main: oklch(0% 0 none);
--cx-primary-bg-main: oklch(19.65% 0.035 215.2deg);
--cx-secondary-bg-main: oklch(19.17% 0.05 51.02deg);
--cx-neutral-bg-main: oklch(18.49% 0.004 229.03deg);
--cx-danger-bg-main: oklch(17.85% 0.056 29.65deg);
--cx-success-bg-main: oklch(20.48% 0.044 157.89deg);
--cx-warning-bg-main: oklch(22% 0.045 81.78deg);
--cx-info-bg-main: oklch(13.66% 0.072 271.72deg);
--cx-black-bg-main: oklch(0% 0 none / 0.1);
--cx-white-bg-main: oklch(100% 0 none / 0.1);
--cx-default-bg-even: oklch(23.98% 0.006 214.42deg);
--cx-alternate-bg-even: oklch(18.49% 0.004 229.03deg);
--cx-primary-bg-even: oklch(25.95% 0.047 218.54deg);
--cx-secondary-bg-even: oklch(25.33% 0.072 45.42deg);
--cx-neutral-bg-even: oklch(23.98% 0.006 214.42deg);
--cx-danger-bg-even: oklch(23.84% 0.081 29.75deg);
--cx-success-bg-even: oklch(27.67% 0.065 154.57deg);
--cx-warning-bg-even: oklch(29.73% 0.062 80.16deg);
--cx-info-bg-even: oklch(17.88% 0.102 269.77deg);
--cx-black-bg-even: oklch(0% 0 none / 0.2);
--cx-white-bg-even: oklch(100% 0 none / 0.2);
--cx-default-bg-evident: oklch(29.21% 0.009 219.79deg);
--cx-alternate-bg-evident: oklch(23.98% 0.006 214.42deg);
--cx-primary-bg-evident: oklch(31.88% 0.058 220.29deg);
--cx-secondary-bg-evident: oklch(31.51% 0.093 43.4deg);
--cx-neutral-bg-evident: oklch(29.21% 0.009 219.79deg);
--cx-danger-bg-evident: oklch(29.52% 0.106 29.32deg);
--cx-success-bg-evident: oklch(34.09% 0.082 153.6deg);
--cx-warning-bg-evident: oklch(36.9% 0.077 76.91deg);
--cx-info-bg-evident: oklch(21.94% 0.132 268.39deg);
--cx-black-bg-evident: oklch(0% 0 none / 0.3);
--cx-white-bg-evident: oklch(100% 0 none / 0.3);
--cx-default-bg-inverse: oklch(94.11% 0.004 219.53deg);
--cx-alternate-bg-inverse: oklch(100% 0 none);
--cx-primary-bg-inverse: oklch(94.24% 0.027 214.43deg);
--cx-secondary-bg-inverse: oklch(93.9% 0.032 47.35deg);
--cx-neutral-bg-inverse: oklch(94.11% 0.004 219.53deg);
--cx-danger-bg-inverse: oklch(92.65% 0.036 22.08deg);
--cx-success-bg-inverse: oklch(94.97% 0.034 163.24deg);
--cx-warning-bg-inverse: oklch(96.21% 0.034 82.91deg);
--cx-info-bg-inverse: oklch(90.51% 0.046 285.44deg);
--cx-black-bg-inverse: oklch(0% 0 none / 0.9);
--cx-white-bg-inverse: oklch(100% 0 none / 0.95);
--cx-default-bg-solid: oklch(29.21% 0.009 219.79deg);
--cx-alternate-bg-solid: oklch(0% 0 none);
--cx-primary-bg-solid: oklch(66.72% 0.125 223.3deg);
--cx-secondary-bg-solid: oklch(65.65% 0.21 38.97deg);
--cx-neutral-bg-solid: oklch(58.78% 0.021 217.37deg);
--cx-danger-bg-solid: oklch(61.98% 0.24 29.73deg);
--cx-success-bg-solid: oklch(71.38% 0.187 151.56deg);
--cx-warning-bg-solid: oklch(77.74% 0.165 73.18deg);
--cx-info-bg-solid: oklch(44.95% 0.296 265.73deg);
--cx-black-bg-solid: oklch(0% 0 none);
--cx-white-bg-solid: oklch(100% 0 none);
--cx-default-bg-highlight: oklch(31.88% 0.058 220.29deg);
--cx-alternate-bg-highlight: oklch(40.64% 0.075 221.53deg);
--cx-primary-bg-highlight: oklch(40.64% 0.075 221.53deg);
--cx-secondary-bg-highlight: oklch(39.99% 0.123 41.14deg);
--cx-neutral-bg-highlight: oklch(36.53% 0.012 222.32deg);
--cx-danger-bg-highlight: oklch(37.66% 0.14 29.65deg);
--cx-success-bg-highlight: oklch(43.32% 0.108 152.84deg);
--cx-warning-bg-highlight: oklch(47.2% 0.099 75.61deg);
--cx-info-bg-highlight: oklch(27.64% 0.174 267.16deg);
--cx-black-bg-highlight: oklch(0% 0 none / 0.2);
--cx-white-bg-highlight: oklch(100% 0 none / 0.2);
--cx-default-border-main: oklch(45.83% 0.016 214.47deg);
--cx-alternate-border-main: oklch(45.83% 0.016 214.47deg);
--cx-primary-border-main: oklch(51.52% 0.096 222.48deg);
--cx-secondary-border-main: oklch(50.62% 0.16 39.72deg);
--cx-neutral-border-main: oklch(45.83% 0.016 214.47deg);
--cx-danger-border-main: oklch(47.79% 0.182 29.73deg);
--cx-success-border-main: oklch(55.01% 0.142 151.91deg);
--cx-warning-border-main: oklch(59.82% 0.127 73.85deg);
--cx-info-border-main: oklch(34.81% 0.225 266.31deg);
--cx-black-border-main: oklch(0% 0 none / 0.3);
--cx-white-border-main: oklch(100% 0 none / 0.3);
--cx-default-border-subtle: oklch(94.11% 0.004 219.53deg / 0.15);
--cx-alternate-border-subtle: oklch(100% 0 none / 0.15);
--cx-primary-border-subtle: oklch(73.71% 0.114 217.55deg / 0.15);
--cx-secondary-border-subtle: oklch(72.08% 0.168 44.91deg / 0.15);
--cx-neutral-border-subtle: oklch(69.67% 0.016 218.11deg / 0.15);
--cx-danger-border-subtle: oklch(67.58% 0.195 27.49deg / 0.15);
--cx-success-border-subtle: oklch(77.01% 0.155 156.23deg / 0.15);
--cx-warning-border-subtle: oklch(82.57% 0.15 80.33deg / 0.15);
--cx-info-border-subtle: oklch(54.12% 0.243 274.61deg / 0.15);
--cx-black-border-subtle: oklch(0% 0 none / 0.15);
--cx-white-border-subtle: oklch(100% 0 none / 0.15);
--cx-default-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-alternate-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-primary-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-secondary-icon-main: oklch(65.65% 0.21 38.97deg);
--cx-neutral-icon-main: oklch(58.78% 0.021 217.37deg);
--cx-danger-icon-main: oklch(61.98% 0.24 29.73deg);
--cx-success-icon-main: oklch(71.38% 0.187 151.56deg);
--cx-warning-icon-main: oklch(77.74% 0.165 73.18deg);
--cx-info-icon-main: oklch(44.95% 0.296 265.73deg);
--cx-black-icon-main: oklch(0% 0 none);
--cx-white-icon-main: oklch(100% 0 none);
--cx-default-icon-subtle: oklch(94.11% 0.004 219.53deg / 0.4);
--cx-alternate-icon-subtle: oklch(100% 0 none / 0.4);
--cx-primary-icon-subtle: oklch(73.71% 0.114 217.55deg / 0.4);
--cx-secondary-icon-subtle: oklch(72.08% 0.168 44.91deg / 0.4);
--cx-neutral-icon-subtle: oklch(69.67% 0.016 218.11deg / 0.4);
--cx-danger-icon-subtle: oklch(67.58% 0.195 27.49deg / 0.4);
--cx-success-icon-subtle: oklch(77.01% 0.155 156.23deg / 0.4);
--cx-warning-icon-subtle: oklch(82.57% 0.15 80.33deg / 0.4);
--cx-info-icon-subtle: oklch(54.12% 0.243 274.61deg / 0.4);
--cx-black-icon-subtle: oklch(0% 0 none / 0.4);
--cx-white-icon-subtle: oklch(100% 0 none / 0.4);
--cx-default-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-alternate-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-primary-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-secondary-icon-slight: oklch(65.65% 0.21 38.97deg / 0.2);
--cx-neutral-icon-slight: oklch(58.78% 0.021 217.37deg / 0.2);
--cx-danger-icon-slight: oklch(61.98% 0.24 29.73deg / 0.2);
--cx-success-icon-slight: oklch(71.38% 0.187 151.56deg / 0.2);
--cx-warning-icon-slight: oklch(77.74% 0.165 73.18deg / 0.2);
--cx-info-icon-slight: oklch(44.95% 0.296 265.73deg / 0.2);
--cx-black-icon-slight: oklch(0% 0 none / 0.2);
--cx-white-icon-slight: oklch(100% 0 none / 0.2);
--cx-default-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-alternate-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-primary-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-secondary-cue-main: oklch(65.65% 0.21 38.97deg);
--cx-neutral-cue-main: oklch(58.78% 0.021 217.37deg);
--cx-danger-cue-main: oklch(61.98% 0.24 29.73deg);
--cx-success-cue-main: oklch(71.38% 0.187 151.56deg);
--cx-warning-cue-main: oklch(77.74% 0.165 73.18deg);
--cx-info-cue-main: oklch(44.95% 0.296 265.73deg);
--cx-black-cue-main: oklch(0% 0 none);
--cx-white-cue-main: oklch(100% 0 none);
--cx-default-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-alternate-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-primary-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-secondary-cue-slight: oklch(65.65% 0.21 38.97deg / 0.2);
--cx-neutral-cue-slight: oklch(58.78% 0.021 217.37deg / 0.2);
--cx-danger-cue-slight: oklch(61.98% 0.24 29.73deg / 0.2);
--cx-success-cue-slight: oklch(71.38% 0.187 151.56deg / 0.2);
--cx-warning-cue-slight: oklch(77.74% 0.165 73.18deg / 0.2);
--cx-info-cue-slight: oklch(44.95% 0.296 265.73deg / 0.2);
--cx-black-cue-slight: oklch(0% 0 none / 0.2);
--cx-white-cue-slight: oklch(100% 0 none / 0.2);
--cx-default-link-main: oklch(73.71% 0.114 217.55deg);
--cx-alternate-link-main: oklch(73.71% 0.114 217.55deg);
--cx-primary-link-main: oklch(73.71% 0.114 217.55deg);
--cx-secondary-link-main: oklch(72.08% 0.168 44.91deg);
--cx-neutral-link-main: oklch(69.67% 0.016 218.11deg);
--cx-danger-link-main: oklch(67.58% 0.195 27.49deg);
--cx-success-link-main: oklch(77.01% 0.155 156.23deg);
--cx-warning-link-main: oklch(82.57% 0.15 80.33deg);
--cx-info-link-main: oklch(54.12% 0.243 274.61deg);
--cx-black-link-main: oklch(0% 0 none);
--cx-white-link-main: oklch(100% 0 none);
--cx-default-link-visited: oklch(81.84% 0.085 215.09deg);
--cx-alternate-link-visited: oklch(81.84% 0.085 215.09deg);
--cx-primary-link-visited: oklch(81.84% 0.085 215.09deg);
--cx-secondary-link-visited: oklch(80.46% 0.111 47.53deg);
--cx-neutral-link-visited: oklch(80.14% 0.01 212.53deg);
--cx-danger-link-visited: oklch(76.61% 0.128 24.53deg);
--cx-success-link-visited: oklch(84.06% 0.11 159.24deg);
--cx-warning-link-visited: oklch(87.89% 0.11 83.4deg);
--cx-info-link-visited: oklch(68.39% 0.162 281.23deg);
--cx-black-link-visited: oklch(0% 0 none / 0.6);
--cx-white-link-visited: oklch(100% 0 none / 0.6);
--cx-default-link-hover: oklch(81.84% 0.085 215.09deg);
--cx-alternate-link-hover: oklch(81.84% 0.085 215.09deg);
--cx-primary-link-hover: oklch(81.84% 0.085 215.09deg);
--cx-secondary-link-hover: oklch(80.46% 0.111 47.53deg);
--cx-neutral-link-hover: oklch(80.14% 0.01 212.53deg);
--cx-danger-link-hover: oklch(76.61% 0.128 24.53deg);
--cx-success-link-hover: oklch(84.06% 0.11 159.24deg);
--cx-warning-link-hover: oklch(87.89% 0.11 83.4deg);
--cx-info-link-hover: oklch(68.39% 0.162 281.23deg);
--cx-black-link-hover: oklch(0% 0 none / 0.9);
--cx-white-link-hover: oklch(100% 0 none / 0.9);
--cx-default-link-active: oklch(67.58% 0.195 27.49deg);
--cx-alternate-link-active: oklch(67.58% 0.195 27.49deg);
--cx-primary-link-active: oklch(73.71% 0.114 217.55deg);
--cx-secondary-link-active: oklch(72.08% 0.168 44.91deg);
--cx-neutral-link-active: oklch(69.67% 0.016 218.11deg);
--cx-danger-link-active: oklch(67.58% 0.195 27.49deg);
--cx-success-link-active: oklch(77.01% 0.155 156.23deg);
--cx-warning-link-active: oklch(82.57% 0.15 80.33deg);
--cx-info-link-active: oklch(54.12% 0.243 274.61deg);
--cx-black-link-active: oklch(61.98% 0.24 29.73deg);
--cx-white-link-active: oklch(61.98% 0.24 29.73deg);
--cx-default-dim-slight: oklch(100% 0 none / 0.05);
--cx-alternate-dim-slight: oklch(0% 0 none / 0.05);
--cx-primary-dim-slight: oklch(66.72% 0.125 223.3deg / 0.1);
--cx-secondary-dim-slight: oklch(65.65% 0.21 38.97deg / 0.1);
--cx-neutral-dim-slight: oklch(58.78% 0.021 217.37deg / 0.1);
--cx-danger-dim-slight: oklch(61.98% 0.24 29.73deg / 0.1);
--cx-success-dim-slight: oklch(71.38% 0.187 151.56deg / 0.1);
--cx-warning-dim-slight: oklch(77.74% 0.165 73.18deg / 0.1);
--cx-info-dim-slight: oklch(44.95% 0.296 265.73deg / 0.1);
--cx-black-dim-slight: oklch(0% 0 none / 0.1);
--cx-white-dim-slight: oklch(100% 0 none / 0.1);
--cx-default-dim-main: oklch(100% 0 none / 0.7);
--cx-alternate-dim-main: oklch(0% 0 none / 0.7);
--cx-primary-dim-main: oklch(66.72% 0.125 223.3deg / 0.7);
--cx-secondary-dim-main: oklch(65.65% 0.21 38.97deg / 0.7);
--cx-neutral-dim-main: oklch(58.78% 0.021 217.37deg / 0.7);
--cx-danger-dim-main: oklch(61.98% 0.24 29.73deg / 0.7);
--cx-success-dim-main: oklch(71.38% 0.187 151.56deg / 0.7);
--cx-warning-dim-main: oklch(77.74% 0.165 73.18deg / 0.7);
--cx-info-dim-main: oklch(44.95% 0.296 265.73deg / 0.7);
--cx-black-dim-main: oklch(0% 0 none / 0.7);
--cx-white-dim-main: oklch(100% 0 none / 0.7);
--cx-default-dim-subtle: oklch(100% 0 none / 0.3);
--cx-alternate-dim-subtle: oklch(0% 0 none / 0.3);
--cx-primary-dim-subtle: oklch(66.72% 0.125 223.3deg / 0.3);
--cx-secondary-dim-subtle: oklch(65.65% 0.21 38.97deg / 0.3);
--cx-neutral-dim-subtle: oklch(58.78% 0.021 217.37deg / 0.3);
--cx-danger-dim-subtle: oklch(61.98% 0.24 29.73deg / 0.3);
--cx-success-dim-subtle: oklch(71.38% 0.187 151.56deg / 0.3);
--cx-warning-dim-subtle: oklch(77.74% 0.165 73.18deg / 0.3);
--cx-info-dim-subtle: oklch(44.95% 0.296 265.73deg / 0.3);
--cx-black-dim-subtle: oklch(0% 0 none / 0.3);
--cx-white-dim-subtle: oklch(100% 0 none / 0.3);
--cx-default-fg-idle: oklch(94.11% 0.004 219.53deg);
--cx-alternate-fg-idle: oklch(100% 0 none);
--cx-primary-fg-idle: oklch(100% 0 none);
--cx-secondary-fg-idle: oklch(100% 0 none);
--cx-neutral-fg-idle: oklch(100% 0 none);
--cx-danger-fg-idle: oklch(100% 0 none);
--cx-success-fg-idle: oklch(100% 0 none);
--cx-warning-fg-idle: oklch(0% 0 none);
--cx-info-fg-idle: oklch(100% 0 none);
--cx-black-fg-idle: oklch(100% 0 none);
--cx-white-fg-idle: oklch(0% 0 none);
--cx-default-fg-disabled: oklch(94.11% 0.004 219.53deg / 0.25);
--cx-alternate-fg-disabled: oklch(100% 0 none / 0.25);
--cx-primary-fg-disabled: oklch(100% 0 none / 0.25);
--cx-secondary-fg-disabled: oklch(100% 0 none / 0.25);
--cx-neutral-fg-disabled: oklch(100% 0 none / 0.25);
--cx-danger-fg-disabled: oklch(100% 0 none / 0.25);
--cx-success-fg-disabled: oklch(100% 0 none / 0.25);
--cx-warning-fg-disabled: oklch(0% 0 none / 0.25);
--cx-info-fg-disabled: oklch(100% 0 none / 0.25);
--cx-black-fg-disabled: oklch(100% 0 none / 0.25);
--cx-white-fg-disabled: oklch(0% 0 none / 0.25);
--cx-default-fg-hover: oklch(94.11% 0.004 219.53deg / 0.9);
--cx-alternate-fg-hover: oklch(100% 0 none / 0.9);
--cx-primary-fg-hover: oklch(100% 0 none / 0.9);
--cx-secondary-fg-hover: oklch(100% 0 none / 0.9);
--cx-neutral-fg-hover: oklch(100% 0 none / 0.9);
--cx-danger-fg-hover: oklch(100% 0 none / 0.9);
--cx-success-fg-hover: oklch(100% 0 none / 0.9);
--cx-warning-fg-hover: oklch(0% 0 none / 0.9);
--cx-info-fg-hover: oklch(100% 0 none / 0.9);
--cx-black-fg-hover: oklch(100% 0 none / 0.9);
--cx-white-fg-hover: oklch(0% 0 none / 0.9);
--cx-default-fg-press: oklch(94.11% 0.004 219.53deg / 0.9);
--cx-alternate-fg-press: oklch(100% 0 none / 0.9);
--cx-primary-fg-press: oklch(100% 0 none / 0.9);
--cx-secondary-fg-press: oklch(100% 0 none / 0.9);
--cx-neutral-fg-press: oklch(100% 0 none / 0.9);
--cx-danger-fg-press: oklch(100% 0 none / 0.9);
--cx-success-fg-press: oklch(100% 0 none / 0.9);
--cx-warning-fg-press: oklch(0% 0 none / 0.9);
--cx-info-fg-press: oklch(100% 0 none / 0.9);
--cx-black-fg-press: oklch(100% 0 none / 0.9);
--cx-white-fg-press: oklch(0% 0 none / 0.9);
--cx-default-bg-idle: oklch(18.49% 0.004 229.03deg);
--cx-alternate-bg-idle: oklch(0% 0 none);
--cx-primary-bg-idle: oklch(66.72% 0.125 223.3deg);
--cx-secondary-bg-idle: oklch(65.65% 0.21 38.97deg);
--cx-neutral-bg-idle: oklch(58.78% 0.021 217.37deg);
--cx-danger-bg-idle: oklch(61.98% 0.24 29.73deg);
--cx-success-bg-idle: oklch(71.38% 0.187 151.56deg);
--cx-warning-bg-idle: oklch(77.74% 0.165 73.18deg);
--cx-info-bg-idle: oklch(44.95% 0.296 265.73deg);
--cx-black-bg-idle: oklch(0% 0 none);
--cx-white-bg-idle: oklch(100% 0 none);
--cx-default-bg-disabled: oklch(29.21% 0.009 219.79deg);
--cx-alternate-bg-disabled: oklch(29.21% 0.009 219.79deg);
--cx-primary-bg-disabled: oklch(31.88% 0.058 220.29deg);
--cx-secondary-bg-disabled: oklch(31.51% 0.093 43.4deg);
--cx-neutral-bg-disabled: oklch(29.21% 0.009 219.79deg);
--cx-danger-bg-disabled: oklch(29.52% 0.106 29.32deg);
--cx-success-bg-disabled: oklch(34.09% 0.082 153.6deg);
--cx-warning-bg-disabled: oklch(36.9% 0.077 76.91deg);
--cx-info-bg-disabled: oklch(21.94% 0.132 268.39deg);
--cx-black-bg-disabled: oklch(0% 0 none / 0.2);
--cx-white-bg-disabled: oklch(100% 0 none / 0.2);
--cx-default-bg-hover: oklch(23.98% 0.006 214.42deg);
--cx-alternate-bg-hover: oklch(18.49% 0.004 229.03deg);
--cx-primary-bg-hover: oklch(73.71% 0.114 217.55deg);
--cx-secondary-bg-hover: oklch(72.08% 0.168 44.91deg);
--cx-neutral-bg-hover: oklch(69.67% 0.016 218.11deg);
--cx-danger-bg-hover: oklch(67.58% 0.195 27.49deg);
--cx-success-bg-hover: oklch(77.01% 0.155 156.23deg);
--cx-warning-bg-hover: oklch(82.57% 0.15 80.33deg);
--cx-info-bg-hover: oklch(54.12% 0.243 274.61deg);
--cx-black-bg-hover: oklch(0% 0 none / 0.9);
--cx-white-bg-hover: oklch(100% 0 none / 0.9);
--cx-default-bg-press: oklch(29.21% 0.009 219.79deg);
--cx-alternate-bg-press: oklch(23.98% 0.006 214.42deg);
--cx-primary-bg-press: oklch(51.52% 0.096 222.48deg);
--cx-secondary-bg-press: oklch(50.62% 0.16 39.72deg);
--cx-neutral-bg-press: oklch(45.83% 0.016 214.47deg);
--cx-danger-bg-press: oklch(47.79% 0.182 29.73deg);
--cx-success-bg-press: oklch(55.01% 0.142 151.91deg);
--cx-warning-bg-press: oklch(59.82% 0.127 73.85deg);
--cx-info-bg-press: oklch(34.81% 0.225 266.31deg);
--cx-black-bg-press: oklch(0% 0 none / 0.95);
--cx-white-bg-press: oklch(100% 0 none / 0.95);
--cx-base-color: oklch(100% 0 none);
--cx-contrast-color: oklch(0% 0 none);
--cx-transparent-color: oklch(0% 0 none / 0);
--cx-fg-main: oklch(94.11% 0.004 219.53deg);
--cx-fg-subtle: oklch(94.11% 0.004 219.53deg / 0.5);
--cx-fg-slight: oklch(94.11% 0.004 219.53deg / 0.25);
--cx-fg-inverse: oklch(23.98% 0.006 214.42deg);
--cx-fg-solid: oklch(100% 0 none);
--cx-fg-highlight: oklch(81.84% 0.085 215.09deg);
--cx-bg-main: oklch(18.49% 0.004 229.03deg);
--cx-bg-even: oklch(23.98% 0.006 214.42deg);
--cx-bg-evident: oklch(29.21% 0.009 219.79deg);
--cx-bg-inverse: oklch(94.11% 0.004 219.53deg);
--cx-bg-solid: oklch(29.21% 0.009 219.79deg);
--cx-bg-highlight: oklch(31.88% 0.058 220.29deg);
--cx-border-main: oklch(45.83% 0.016 214.47deg);
--cx-border-subtle: oklch(94.11% 0.004 219.53deg / 0.15);
--cx-icon-main: oklch(66.72% 0.125 223.3deg);
--cx-icon-subtle: oklch(94.11% 0.004 219.53deg / 0.4);
--cx-icon-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-cue-main: oklch(66.72% 0.125 223.3deg);
--cx-cue-slight: oklch(66.72% 0.125 223.3deg / 0.2);
--cx-link-main: oklch(73.71% 0.114 217.55deg);
--cx-link-hover: oklch(81.84% 0.085 215.09deg);
--cx-link-active: oklch(67.58% 0.195 27.49deg);
--cx-link-visited: oklch(81.84% 0.085 215.09deg);
--cx-dim-main: oklch(100% 0 none / 0.7);
--cx-dim-subtle: oklch(100% 0 none / 0.3);
--cx-dim-slight: oklch(100% 0 none / 0.05);
--cx-fg-idle: oklch(94.11% 0.004 219.53deg);
--cx-fg-disabled: oklch(94.11% 0.004 219.53deg / 0.25);
--cx-fg-hover: oklch(94.11% 0.004 219.53deg / 0.9);
--cx-fg-press: oklch(94.11% 0.004 219.53deg / 0.9);
--cx-bg-idle: oklch(18.49% 0.004 229.03deg);
--cx-bg-disabled: oklch(29.21% 0.009 219.79deg);
--cx-bg-hover: oklch(23.98% 0.006 214.42deg);
--cx-bg-press: oklch(29.21% 0.009 219.79deg);
}Component variables
Chassis CSS 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren’t inherited in places like nested tables, and allow some basic restyling and extending of Chassis CSS components after Sass compilation.
Have a look at our table documentation for some insight into how we’re using CSS variables. Our navbars also use CSS variables as of v5.2.0. We’re also using CSS variables across our grids—primarily for gutters the new opt-in CSS grid—with more component usage coming in the future.
Whenever possible, we'll assign CSS variables at the base component level (e.g., .navbar for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates.
Prefix
Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the -- that’s required on every CSS variable.
Customize the prefix via the $prefix Sass variable. By default, it’s set to cx- (note the trailing dash).
Examples
CSS variables offer similar flexibility to Sass’s variables, but without the need for compilation before being served to the browser. For example, here we’re resetting our page’s font and link styles with CSS variables.
body {
font: 1rem/1.5 var(--cx-font-sans-serif);
}
a {
color: var(--cx-blue);
}
Focus variables
Added in v5.3.0Chassis CSS provides custom :focus styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all :focus styles.
In our Sass, we set default values that can be customized before compiling.
$focus-ring-width: .25rem;
$focus-ring-opacity: .25;
$focus-ring-color: #{to-opacity($cue-main, $focus-ring-opacity)};
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
Those variables are then reassigned to :root level CSS variables that can be customized in real-time, including with options for x and y offsets (which default to their fallback value of 0).
--#{$prefix}focus-ring-width: #{$focus-ring-width};
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
--#{$prefix}focus-ring-color: #{$focus-ring-color};
Grid breakpoints
While we include our grid breakpoints as CSS variables (except for xs), be aware that CSS variables do not work in media queries. This is by design in the CSS spec for variables, but may change in coming years with support for env() variables. Check out this Stack Overflow answer for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript.