JET Core Pack CSS Variables

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Overview

CSS custom properties (aka CSS variables) are used in JET CSS files. Details on the CSS files available are in the developer's guide.

Theming

CSS variables allow you to customize the look application-wide by setting variables at the root level. 

  :root {
    --oj-c-palette-neutral-20: 245, 244, 242;
  }

Due to CSS specificity, your declarations must be loaded after the JET declarations for them to take effect.

Available Themes

If you are building a custom theme, you can currently use Redwood as a starting point.
  • Redwood - Redwood is the Oracle look and feel, and changes will be made per Oracle's needs, for example, variable values may change. These changes can bleed into a custom theme, so use Redwood as the base of a custom theme only if you want to blend in with Oracle's look and feel.
  • Stable - Stable is not supported in this release. Support will be added in the future.

CSS Variables List 



:root,
.oj-c-colorscheme-dependent {
    /* base cursor */
    /* --oj-c-cursor-clickable: pointer; */
    /* base box shadow */
    /* --oj-c-box-shadow-xs: rgba(var(--oj-c-boxshadow-shadowcolor), .12) 0 calc(.25 * var(--oj-c-size-units, .25rem)) var(--oj-c-size-units, .25rem) 0; */
    /* --oj-c-box-shadow-sm: rgba(var(--oj-c-boxshadow-shadowcolor), .16) 0 var(--oj-c-size-units, .25rem) calc(2 * var(--oj-c-size-units, .25rem)) 0; */
    /* --oj-c-box-shadow-md: rgba(var(--oj-c-boxshadow-shadowcolor), .2) 0 calc(1.5 * var(--oj-c-size-units, .25rem)) calc(3 * var(--oj-c-size-units, .25rem)) 0; */
    /* --oj-c-box-shadow-lg: rgba(var(--oj-c-boxshadow-shadowcolor), .24) 0 calc(2 * var(--oj-c-size-units, .25rem)) calc(4 * var(--oj-c-size-units, .25rem)) 0; */
    /* --oj-c-box-shadow-xl: rgba(var(--oj-c-boxshadow-shadowcolor), .28) 0 calc(3 * var(--oj-c-size-units, .25rem)) calc(5 * var(--oj-c-size-units, .25rem)) 0; */
    /* base border radius */
    /* --oj-c-border-radius-sm: calc(.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-border-radius-md: var(--oj-c-size-units, .25rem); */
    /* --oj-c-border-radius-lg: calc(1.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-border-radius-xl: calc(2 * var(--oj-c-size-units, .25rem)); */
}

:root {
    /* animation easing */
    /* --oj-c-easing-enter: cubic-bezier(0,0,.2,1); */
    /* --oj-c-easing-persist: cubic-bezier(.4,0,.2,1); */
    /* --oj-c-easing-exit: cubic-bezier(.4,0,1,1); */
    /* --oj-c-easing-linear: cubic-bezier(0,0,0,0); */
    /* animation anchor */
    /* --oj-c-anchor-default-vertical: .5; */
    /* --oj-c-anchor-default-horizontal: .5; */
    /* --oj-c-anchor-start-top-corner-vertical: 0; */
    /* --oj-c-anchor-start-top-corner-horizontal: 1; */
    /* --oj-c-anchor-top-vertical: .5; */
    /* --oj-c-anchor-top-horizontal: 1; */
    /* --oj-c-anchor-end-top-corner-vertical: 1; */
    /* --oj-c-anchor-end-top-corner-horizontal: 1; */
    /* --oj-c-anchor-start-vertical: 0; */
    /* --oj-c-anchor-start-horizontal: .5; */
    /* --oj-c-anchor-end-vertical: 1; */
    /* --oj-c-anchor-end-horizontal: .5; */
    /* --oj-c-anchor-start-bottom-corner-vertical: 0; */
    /* --oj-c-anchor-start-bottom-corner-horizontal: 0; */
    /* --oj-c-anchor-bottom-vertical: .5; */
    /* --oj-c-anchor-bottom-horizontal: 0; */
    /* --oj-c-anchor-end-bottom-corner-vertical: 1; */
    /* --oj-c-anchor-end-bottom-corner-horizontal: 0; */
    /* animation duration */
    /* --oj-c-duration-2xs: 25ms; */
    /* --oj-c-duration-xs: 50ms; */
    /* --oj-c-duration-sm: .1s; */
    /* --oj-c-duration-md: .15s; */
    /* --oj-c-duration-lg: .25s; */
    /* --oj-c-duration-xl: .3s; */
    /* --oj-c-duration-2xl: .5s; */
    /* animation delay */
    /* --oj-c-delay-none: 0ms; */
    /* --oj-c-delay-sm: 20ms; */
    /* --oj-c-delay-md: 30ms; */
    /* --oj-c-delay-lg: 50ms; */
    /* animation slide */
    /* --oj-c-slide-up-sm: .25; */
    /* --oj-c-slide-up-md: .5; */
    /* --oj-c-slide-up-lg: .75; */
    /* --oj-c-slide-up-xl: 1; */
    /* --oj-c-slide-down-sm: .25; */
    /* --oj-c-slide-down-md: .5; */
    /* --oj-c-slide-down-lg: .75; */
    /* --oj-c-slide-down-xl: 1; */
    /* --oj-c-slide-start-sm: .25; */
    /* --oj-c-slide-start-md: .5; */
    /* --oj-c-slide-start-lg: .75; */
    /* --oj-c-slide-start-xl: 1; */
    /* --oj-c-slide-end-sm: .25; */
    /* --oj-c-slide-end-md: .5; */
    /* --oj-c-slide-end-lg: .75; */
    /* --oj-c-slide-end-xl: 1; */
    /* animation scale */
    /* --oj-c-scale-down-sm-to: 1; */
    /* --oj-c-scale-down-sm-from: .9; */
    /* --oj-c-scale-down-md-to: 1; */
    /* --oj-c-scale-down-md-from: .7; */
    /* --oj-c-scale-down-full-to: 1; */
    /* --oj-c-scale-down-full-from: 0; */
    /* --oj-c-scale-up-sm-to: .9; */
    /* --oj-c-scale-up-sm-from: 1; */
    /* --oj-c-scale-up-md-to: .7; */
    /* --oj-c-scale-up-md-from: 1; */
    /* --oj-c-scale-up-full-to: 0; */
    /* --oj-c-scale-up-full-from: 1; */
    /* animation fade */
    /* --oj-c-fade-in-sm-to: .6; */
    /* --oj-c-fade-in-sm-from: 1; */
    /* --oj-c-fade-in-full-to: 0; */
    /* --oj-c-fade-in-full-from: 1; */
    /* --oj-c-fade-out-sm-to: 1; */
    /* --oj-c-fade-out-sm-from: .6; */
    /* --oj-c-fade-out-full-to: 1; */
    /* --oj-c-fade-out-full-from: 0; */
}

:root,
.oj-scale-dependent,
:root.oj-scale-sm,
:root.oj-scale-md {
    /* typography heading */
    /* --oj-c-heading-xs-font-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-heading-xs-line-height: 1.4; */
    /* --oj-c-heading-xs-font-weight: 800; */
    /* --oj-c-heading-sm-font-size: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-heading-sm-line-height: 1.3333; */
    /* --oj-c-heading-sm-font-weight: 800; */
    /* --oj-c-heading-md-font-size: calc(7 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-heading-md-line-height: 1.2857; */
    /* --oj-c-heading-md-font-weight: 800; */
    /* --oj-c-heading-lg-font-size: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-heading-lg-line-height: 1.25; */
    /* --oj-c-heading-lg-font-weight: 800; */
    /* --oj-c-heading-xl-font-size: calc(9 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-heading-xl-line-height: 1.222; */
    /* --oj-c-heading-xl-font-weight: 800; */
    /* --oj-c-heading-2xl-font-size: calc(10 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-heading-2xl-line-height: 1.3; */
    /* --oj-c-heading-2xl-font-weight: 800; */
    /* typography subheading */
    /* --oj-c-subheading-2xs-font-size: calc(3.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-2xs-line-height: 1.4286; */
    /* --oj-c-subheading-2xs-font-weight: 700; */
    /* --oj-c-subheading-xs-font-size: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-xs-line-height: 1.5; */
    /* --oj-c-subheading-xs-font-weight: 700; */
    /* --oj-c-subheading-sm-font-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-sm-line-height: 1.4; */
    /* --oj-c-subheading-sm-font-weight: 700; */
    /* --oj-c-subheading-md-font-size: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-md-line-height: 1.3333; */
    /* --oj-c-subheading-md-font-weight: 700; */
    /* --oj-c-subheading-lg-font-size: calc(7 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-lg-line-height: 1.2857; */
    /* --oj-c-subheading-lg-font-weight: 700; */
    /* --oj-c-subheading-xl-font-size: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-xl-line-height: 1.25; */
    /* --oj-c-subheading-xl-font-weight: 700; */
    /* --oj-c-subheading-2xl-font-size: calc(9 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-subheading-2xl-line-height: 1.2222; */
    /* --oj-c-subheading-2xl-font-weight: 700; */
    /* typography body */
    /* --oj-c-body-2xs-font-size: max(calc(2.5 * var(--oj-c-size-units, .25rem)),10px); */
    /* --oj-c-body-2xs-line-height: 1.2; */
    /* --oj-c-body-2xs-font-weight-regular: 400; */
    /* --oj-c-body-2xs-font-weight-semibold: 600; */
    /* --oj-c-body-2xs-font-weight-bold: 700; */
    /* --oj-c-body-xs-font-size: max(calc(3 * var(--oj-c-size-units, .25rem)),12px); */
    /* --oj-c-body-xs-line-height: 1.3333; */
    /* --oj-c-body-xs-font-weight-regular: 400; */
    /* --oj-c-body-xs-font-weight-semibold: 600; */
    /* --oj-c-body-xs-font-weight-bold: 700; */
    /* --oj-c-body-sm-font-size: max(calc(3.4375 * var(--oj-c-size-units, .25rem)),12px); */
    /* --oj-c-body-sm-line-height: 1.2; */
    /* --oj-c-body-sm-font-weight-regular: 400; */
    /* --oj-c-body-sm-font-weight-semibold: 600; */
    /* --oj-c-body-sm-font-weight-bold: 700; */
    /* --oj-c-body-md-font-size: max(calc(4 * var(--oj-c-size-units, .25rem)),12px); */
    /* --oj-c-body-md-line-height: 1.25; */
    /* --oj-c-body-md-font-weight-regular: 400; */
    /* --oj-c-body-md-font-weight-semibold: 600; */
    /* --oj-c-body-md-font-weight-bold: 700; */
    /* --oj-c-body-lg-font-size: max(calc(4.5 * var(--oj-c-size-units, .25rem)),14px); */
    /* --oj-c-body-lg-line-height: 1.3333; */
    /* --oj-c-body-lg-font-weight-regular: 400; */
    /* --oj-c-body-lg-font-weight-semibold: 600; */
    /* --oj-c-body-lg-font-weight-bold: 700; */
    /* --oj-c-body-xl-font-size: max(calc(5 * var(--oj-c-size-units, .25rem)),16px); */
    /* --oj-c-body-xl-line-height: 1.4; */
    /* --oj-c-body-xl-font-weight-regular: 400; */
    /* --oj-c-body-xl-font-weight-semibold: 600; */
    /* --oj-c-body-xl-font-weight-bold: 700; */
}

:root,
.oj-c-colorscheme-light {
    /* neutral palette */
    /* --oj-c-palette-neutral-0: 255,255,255; */
    /* --oj-c-palette-neutral-10: 251,249,248; */
    /* --oj-c-palette-neutral-20: 245,244,242; */
    /* --oj-c-palette-neutral-30: 241,239,237; */
    /* --oj-c-palette-neutral-40: 228,225,221; */
    /* --oj-c-palette-neutral-50: 212,207,202; */
    /* --oj-c-palette-neutral-60: 188,182,177; */
    /* --oj-c-palette-neutral-70: 174,168,162; */
    /* --oj-c-palette-neutral-80: 158,152,146; */
    /* --oj-c-palette-neutral-90: 139,133,128; */
    /* --oj-c-palette-neutral-100: 122,115,110; */
    /* --oj-c-palette-neutral-110: 111,105,100; */
    /* --oj-c-palette-neutral-120: 102,95,91; */
    /* --oj-c-palette-neutral-130: 92,86,81; */
    /* --oj-c-palette-neutral-140: 81,76,71; */
    /* --oj-c-palette-neutral-150: 71,66,62; */
    /* --oj-c-palette-neutral-160: 58,54,50; */
    /* --oj-c-palette-neutral-170: 49,45,42; */
    /* --oj-c-palette-neutral-180: 32,30,28; */
    /* --oj-c-palette-neutral-190: 22,21,19; */
    /* --oj-c-palette-neutral-200: 0,0,0; */
    /* danger palette */
    /* --oj-c-palette-danger-10: 255,248,247; */
    /* --oj-c-palette-danger-20: 255,241,239; */
    /* --oj-c-palette-danger-30: 255,235,232; */
    /* --oj-c-palette-danger-40: 255,217,211; */
    /* --oj-c-palette-danger-50: 255,193,184; */
    /* --oj-c-palette-danger-60: 255,157,144; */
    /* --oj-c-palette-danger-70: 255,134,117; */
    /* --oj-c-palette-danger-80: 254,105,84; */
    /* --oj-c-palette-danger-90: 236,79,58; */
    /* --oj-c-palette-danger-100: 214,59,37; */
    /* --oj-c-palette-danger-110: 195,53,34; */
    /* --oj-c-palette-danger-120: 179,49,31; */
    /* --oj-c-palette-danger-130: 162,44,28; */
    /* --oj-c-palette-danger-140: 143,39,25; */
    /* --oj-c-palette-danger-150: 124,34,22; */
    /* --oj-c-palette-danger-160: 102,28,18; */
    /* --oj-c-palette-danger-170: 86,24,15; */
    /* --oj-c-palette-danger-180: 60,17,11; */
    /* --oj-c-palette-danger-190: 42,12,7; */
    /* success palette */
    /* --oj-c-palette-success-10: 244,252,235; */
    /* --oj-c-palette-success-20: 235,248,222; */
    /* --oj-c-palette-success-30: 228,245,211; */
    /* --oj-c-palette-success-40: 207,235,179; */
    /* --oj-c-palette-success-50: 177,221,136; */
    /* --oj-c-palette-success-60: 138,201,79; */
    /* --oj-c-palette-success-70: 125,186,69; */
    /* --oj-c-palette-success-80: 111,169,57; */
    /* --oj-c-palette-success-90: 94,148,43; */
    /* --oj-c-palette-success-100: 80,130,35; */
    /* --oj-c-palette-success-110: 73,118,32; */
    /* --oj-c-palette-success-120: 67,107,29; */
    /* --oj-c-palette-success-130: 60,96,26; */
    /* --oj-c-palette-success-140: 53,86,23; */
    /* --oj-c-palette-success-150: 46,73,20; */
    /* --oj-c-palette-success-160: 38,61,16; */
    /* --oj-c-palette-success-170: 31,51,14; */
    /* --oj-c-palette-success-180: 21,35,9; */
    /* --oj-c-palette-success-190: 15,23,6; */
    /* warning palette */
    /* --oj-c-palette-warning-10: 254,249,242; */
    /* --oj-c-palette-warning-20: 253,242,229; */
    /* --oj-c-palette-warning-30: 252,237,220; */
    /* --oj-c-palette-warning-40: 249,221,188; */
    /* --oj-c-palette-warning-50: 246,199,146; */
    /* --oj-c-palette-warning-60: 240,169,87; */
    /* --oj-c-palette-warning-70: 235,150,50; */
    /* --oj-c-palette-warning-80: 225,130,18; */
    /* --oj-c-palette-warning-90: 198,113,14; */
    /* --oj-c-palette-warning-100: 172,99,12; */
    /* --oj-c-palette-warning-110: 156,89,11; */
    /* --oj-c-palette-warning-120: 143,82,10; */
    /* --oj-c-palette-warning-130: 129,73,9; */
    /* --oj-c-palette-warning-140: 114,65,8; */
    /* --oj-c-palette-warning-150: 99,56,7; */
    /* --oj-c-palette-warning-160: 81,47,6; */
    /* --oj-c-palette-warning-170: 69,39,5; */
    /* --oj-c-palette-warning-180: 46,26,3; */
    /* --oj-c-palette-warning-190: 32,18,2; */
    /* info palette */
    /* --oj-c-palette-info-10: 246,250,252; */
    /* --oj-c-palette-info-20: 237,246,249; */
    /* --oj-c-palette-info-30: 228,241,247; */
    /* --oj-c-palette-info-40: 208,229,238; */
    /* --oj-c-palette-info-50: 180,213,225; */
    /* --oj-c-palette-info-60: 143,191,208; */
    /* --oj-c-palette-info-70: 121,177,198; */
    /* --oj-c-palette-info-80: 95,162,186; */
    /* --oj-c-palette-info-90: 65,144,172; */
    /* --oj-c-palette-info-100: 34,126,158; */
    /* --oj-c-palette-info-110: 14,114,149; */
    /* --oj-c-palette-info-120: 0,104,140; */
    /* --oj-c-palette-info-130: 2,94,126; */
    /* --oj-c-palette-info-140: 4,83,111; */
    /* --oj-c-palette-info-150: 6,72,95; */
    /* --oj-c-palette-info-160: 6,60,78; */
    /* --oj-c-palette-info-170: 5,50,66; */
    /* --oj-c-palette-info-180: 4,35,45; */
    /* --oj-c-palette-info-190: 2,24,31; */
    /* brand palette */
    /* --oj-c-palette-brand-10: 246,250,252; */
    /* --oj-c-palette-brand-20: 237,246,249; */
    /* --oj-c-palette-brand-30: 228,241,247; */
    /* --oj-c-palette-brand-40: 208,229,238; */
    /* --oj-c-palette-brand-50: 180,213,225; */
    /* --oj-c-palette-brand-60: 143,191,208; */
    /* --oj-c-palette-brand-70: 121,177,198; */
    /* --oj-c-palette-brand-80: 95,162,186; */
    /* --oj-c-palette-brand-90: 65,144,172; */
    /* --oj-c-palette-brand-100: 34,126,158; */
    /* --oj-c-palette-brand-110: 14,114,149; */
    /* --oj-c-palette-brand-120: 0,104,140; */
    /* --oj-c-palette-brand-130: 2,94,126; */
    /* --oj-c-palette-brand-140: 4,83,111; */
    /* --oj-c-palette-brand-150: 6,72,95; */
    /* --oj-c-palette-brand-160: 6,60,78; */
    /* --oj-c-palette-brand-170: 5,50,66; */
    /* --oj-c-palette-brand-180: 4,35,45; */
    /* --oj-c-palette-brand-190: 2,24,31; */
    /* overlay */
    /* --oj-c-overlay-hover: rgba(var(--oj-c-palette-neutral-190), .08); */
    /* --oj-c-overlay-active: rgba(var(--oj-c-palette-neutral-190), .16); */
    /* --oj-c-overlay-danger-hover: rgba(var(--oj-c-palette-danger-60), .24); */
    /* --oj-c-overlay-danger-active: rgba(var(--oj-c-palette-danger-60), .32); */
    /* --oj-c-overlay-scrim: rgba(var(--oj-c-palette-neutral-190), .4); */
    /* --oj-c-overlay-inverse-hover: rgba(var(--oj-c-palette-neutral-0), .08); */
    /* --oj-c-overlay-inverse-active: rgba(var(--oj-c-palette-neutral-0), .12); */
    /* --oj-c-overlay-drop-active: rgb(var(--oj-c-palette-brand-40)); */
    /* page background */
    /* --oj-c-page-background-neutral0: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-page-background-neutral10: rgb(var(--oj-c-palette-neutral-10)); */
    /* --oj-c-page-background-neutral20: rgb(var(--oj-c-palette-neutral-20)); */
    /* --oj-c-page-background-neutral30: rgb(var(--oj-c-palette-neutral-30)); */
    /* --oj-c-page-background-neutral40: rgb(var(--oj-c-palette-neutral-40)); */
    /* surface */
    /* --oj-c-surface-neutral0: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-surface-neutral10: rgb(var(--oj-c-palette-neutral-10)); */
    /* --oj-c-surface-neutral20: rgb(var(--oj-c-palette-neutral-20)); */
    /* --oj-c-surface-neutral30: rgb(var(--oj-c-palette-neutral-30)); */
    /* --oj-c-surface-selected: rgb(var(--oj-c-palette-brand-30)); */
    /* --oj-c-surface-disabled: rgba(var(--oj-c-palette-neutral-190), .04); */
    /* --oj-c-surface-popup: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-surface-neutral-low: rgb(var(--oj-c-palette-neutral-10)); */
    /* --oj-c-surface-neutral-subtle: rgba(var(--oj-c-palette-neutral-190), .08); */
    /* --oj-c-surface-neutral-strong: rgb(var(--oj-c-palette-neutral-100)); */
    /* --oj-c-surface-success-low: rgb(var(--oj-c-palette-success-10)); */
    /* --oj-c-surface-success-subtle: rgba(var(--oj-c-palette-success-60), .4); */
    /* --oj-c-surface-success-strong: rgb(var(--oj-c-palette-success-120)); */
    /* --oj-c-surface-info-low: rgb(var(--oj-c-palette-info-10)); */
    /* --oj-c-surface-info-subtle: rgba(var(--oj-c-palette-info-60), .4); */
    /* --oj-c-surface-info-strong: rgb(var(--oj-c-palette-info-120)); */
    /* --oj-c-surface-warning-low: rgb(var(--oj-c-palette-warning-10)); */
    /* --oj-c-surface-warning-subtle: rgba(var(--oj-c-palette-warning-60), .4); */
    /* --oj-c-surface-warning-strong: rgb(var(--oj-c-palette-warning-120)); */
    /* --oj-c-surface-danger-low: rgb(var(--oj-c-palette-danger-10)); */
    /* --oj-c-surface-danger-subtle: rgba(var(--oj-c-palette-danger-60), .4); */
    /* --oj-c-surface-danger-strong: rgb(var(--oj-c-palette-danger-120)); */
    /* border */
    /* --oj-c-border-enabled: rgba(var(--oj-c-palette-neutral-190), .5); */
    /* --oj-c-border-disabled: rgba(var(--oj-c-palette-neutral-190), .2); */
    /* --oj-c-border-divider: rgba(var(--oj-c-palette-neutral-190), .12); */
    /* --oj-c-border-divider-opaque-color: rgb(var(--oj-c-palette-neutral-190)); */
    /* --oj-c-border-divider-opaque-percent: 12%; */
    /* --oj-c-border-selected: rgb(var(--oj-c-palette-brand-100)); */
    /* --oj-c-border-drop-line: rgb(var(--oj-c-palette-brand-100)); */
    /* --oj-c-border-selected-neutral: rgb(var(--oj-c-palette-neutral-190)); */
    /* --oj-c-border-warning: rgb(var(--oj-c-palette-warning-120)); */
    /* --oj-c-border-danger: rgb(var(--oj-c-palette-danger-120)); */
    /* --oj-c-border-keyboard-focus: rgb(var(--oj-c-palette-neutral-190)); */
    /* --oj-c-border-inverse-keyboard-focus: rgb(var(--oj-c-palette-neutral-0)); */
    /* box shadow color */
    /* --oj-c-boxshadow-shadowcolor: var(--oj-c-palette-neutral-200); */
    /* text and icon */
    /* --oj-c-text-icon-primary: rgb(var(--oj-c-palette-neutral-190)); */
    /* --oj-c-text-icon-secondary: rgba(var(--oj-c-palette-neutral-190), .7); */
    /* --oj-c-text-icon-disabled: rgba(var(--oj-c-palette-neutral-190), .4); */
    /* --oj-c-text-icon-inverse: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-text-icon-on-color: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-text-icon-link: rgb(var(--oj-c-palette-brand-120)); */
    /* --oj-c-text-icon-success: rgb(var(--oj-c-palette-success-120)); */
    /* --oj-c-text-icon-info: rgb(var(--oj-c-palette-info-120)); */
    /* --oj-c-text-icon-warning: rgb(var(--oj-c-palette-warning-120)); */
    /* --oj-c-text-icon-danger: rgb(var(--oj-c-palette-danger-120)); */
    /* text field */
    /* --oj-c-textfield-surface-enabled: var(--oj-c-surface-neutral0); */
    /* --oj-c-textfield-border-enabled: var(--oj-c-border-enabled); */
    /* collection */
    /* --oj-c-collection-header-text: rgb(var(--oj-c-text-icon-primary)); */
    /* --oj-c-collection-header-surface-selected: rgba(var(--oj-c-palette-neutral-190), .12); */
    /* --oj-c-collection-header-surface-partial-selected: rgba(var(--oj-c-palette-neutral-190), .04); */
    /* collection grid */
    /* --oj-c-collection-grid-cell-surface-edit: rgb(var(--oj-c-palette-neutral-0)); */
    /* measure */
    /* --oj-c-measure-track-enabled: rgba(var(--oj-c-palette-neutral-190), .16); */
    /* --oj-c-measure-track-disabled: rgba(var(--oj-c-palette-neutral-190), .16); */
    /* --oj-c-measure-fill-enabled: rgb(var(--oj-c-palette-neutral-190)); */
    /* --oj-c-measure-fill-disabled: rgba(var(--oj-c-palette-neutral-190), .2); */
    /* --oj-c-measure-thumb-surface: rgb(var(--oj-c-palette-neutral-10)); */
    /* --oj-c-measure-reference-line: rgba(var(--oj-c-palette-neutral-190), .8); */
    /* --oj-c-measure-reference-line-contrast: rgba(var(--oj-c-palette-neutral-20), .7); */
    /* --oj-c-measure-reference-area: rgba(var(--oj-c-palette-neutral-170), .08); */
    /* data visualization */
    /* --oj-c-dvt-contrast-line: rgb(var(--oj-c-palette-neutral-20)); */
    /* --oj-c-dvt-palette-qualitative-1: 36, 93, 99; */
    /* --oj-c-dvt-palette-qualitative-2: 215, 121, 15; */
    /* --oj-c-dvt-palette-qualitative-3: 49, 160, 156; */
    /* --oj-c-dvt-palette-qualitative-4: 78, 65, 55; */
    /* --oj-c-dvt-palette-qualitative-5: 105, 158, 97; */
    /* --oj-c-dvt-palette-qualitative-6: 180, 114, 130; */
    /* --oj-c-dvt-palette-qualitative-7: 131, 64, 30; */
    /* --oj-c-dvt-palette-qualitative-8: 158, 127, 204; */
    /* --oj-c-dvt-palette-qualitative-9: 168, 142, 0; */
    /* --oj-c-dvt-palette-qualitative-10: 88, 49, 110; */
    /* --oj-c-dvt-palette-qualitative-11: 89, 153, 181; */
    /* --oj-c-dvt-palette-qualitative-12: 49, 122, 69; */
    /* --oj-c-dvt-threshold-success: rgb(var(--oj-c-palette-success-100)); */
    /* --oj-c-dvt-threshold-warning: rgb(207, 124, 0); */
    /* --oj-c-dvt-threshold-danger: rgb(var(--oj-c-palette-danger-100)); */
    /* --oj-c-dvt-marquee-border: rgba(var(--oj-c-palette-neutral-190), .8); */
    /* --oj-c-dvt-marquee-surface: rgba(var(--oj-c-palette-neutral-20), .1); */
    /* --oj-c-dvt-reference-object-area: rgba(var(--oj-c-palette-neutral-170), .08); */
    /* --oj-c-dvt-reference-object-line: rgba(var(--oj-c-palette-neutral-190), .8); */
    /* --oj-c-dvt-overview-background: rgb(var(--oj-c-palette-neutral-30)); */
    /* --oj-c-dvt-overview-window-background: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-dvt-overview-window-border: rgb(var(--oj-c-palette-neutral-170)); */
}

.oj-c-colorscheme-dark,
.oj-color-invert {
    /* neutral palette */
    /* --oj-c-palette-neutral-0: 0, 0, 0; */
    /* --oj-c-palette-neutral-10: 10, 10, 9; */
    /* --oj-c-palette-neutral-20: 18, 17, 15; */
    /* --oj-c-palette-neutral-30: 23, 22, 20; */
    /* --oj-c-palette-neutral-40: 35, 33, 31; */
    /* --oj-c-palette-neutral-50: 49, 46, 43; */
    /* --oj-c-palette-neutral-60: 67, 63, 59; */
    /* --oj-c-palette-neutral-70: 78, 73, 68; */
    /* --oj-c-palette-neutral-80: 91, 85, 81; */
    /* --oj-c-palette-neutral-90: 107, 101, 96; */
    /* --oj-c-palette-neutral-100: 124, 117, 112; */
    /* --oj-c-palette-neutral-110: 135, 129, 124; */
    /* --oj-c-palette-neutral-120: 146, 139, 134; */
    /* --oj-c-palette-neutral-130: 157, 150, 145; */
    /* --oj-c-palette-neutral-140: 170, 163, 158; */
    /* --oj-c-palette-neutral-150: 184, 178, 173; */
    /* --oj-c-palette-neutral-160: 200, 195, 191; */
    /* --oj-c-palette-neutral-170: 212, 207, 204; */
    /* --oj-c-palette-neutral-180: 231, 227, 225; */
    /* --oj-c-palette-neutral-190: 241, 238, 237; */
    /* --oj-c-palette-neutral-200: 255, 255, 255; */
    /* danger palette */
    /* --oj-c-palette-danger-10: 18, 5, 3; */
    /* --oj-c-palette-danger-20: 32, 9, 5; */
    /* --oj-c-palette-danger-30: 41, 12, 7; */
    /* --oj-c-palette-danger-40: 64, 18, 11; */
    /* --oj-c-palette-danger-50: 89, 24, 15; */
    /* --oj-c-palette-danger-60: 119, 32, 20; */
    /* --oj-c-palette-danger-70: 138, 37, 24; */
    /* --oj-c-palette-danger-80: 160, 43, 28; */
    /* --oj-c-palette-danger-90: 188, 52, 33; */
    /* --oj-c-palette-danger-100: 216, 63, 42; */
    /* --oj-c-palette-danger-110: 224, 82, 62; */
    /* --oj-c-palette-danger-120: 231, 98, 80; */
    /* --oj-c-palette-danger-130: 238, 115, 98; */
    /* --oj-c-palette-danger-140: 245, 133, 118; */
    /* --oj-c-palette-danger-150: 253, 151, 138; */
    /* --oj-c-palette-danger-160: 255, 176, 166; */
    /* --oj-c-palette-danger-170: 255, 193, 185; */
    /* --oj-c-palette-danger-180: 255, 220, 216; */
    /* --oj-c-palette-danger-190: 255, 234, 232; */
    /* success palette */
    /* --oj-c-palette-success-10: 7, 11, 3; */
    /* --oj-c-palette-success-20: 11, 17, 4; */
    /* --oj-c-palette-success-30: 16, 25, 7; */
    /* --oj-c-palette-success-40: 24, 37, 10; */
    /* --oj-c-palette-success-50: 33, 52, 14; */
    /* --oj-c-palette-success-60: 44, 70, 19; */
    /* --oj-c-palette-success-70: 51, 82, 22; */
    /* --oj-c-palette-success-80: 60, 95, 26; */
    /* --oj-c-palette-success-90: 70, 113, 31; */
    /* --oj-c-palette-success-100: 81, 131, 36; */
    /* --oj-c-palette-success-110: 91, 144, 43; */
    /* --oj-c-palette-success-120: 100, 154, 50; */
    /* --oj-c-palette-success-130: 110, 167, 58; */
    /* --oj-c-palette-success-140: 121, 181, 66; */
    /* --oj-c-palette-success-150: 134, 196, 76; */
    /* --oj-c-palette-success-160: 159, 211, 109; */
    /* --oj-c-palette-success-170: 179, 221, 140; */
    /* --oj-c-palette-success-180: 211, 236, 187; */
    /* --oj-c-palette-success-190: 228, 244, 212; */
    /* warning palette */
    /* --oj-c-palette-warning-10: 15, 8, 1; */
    /* --oj-c-palette-warning-20: 25, 14, 2; */
    /* --oj-c-palette-warning-30: 33, 18, 2; */
    /* --oj-c-palette-warning-40: 50, 28, 3; */
    /* --oj-c-palette-warning-50: 70, 39, 5; */
    /* --oj-c-palette-warning-60: 95, 53, 7; */
    /* --oj-c-palette-warning-70: 110, 62, 8; */
    /* --oj-c-palette-warning-80: 128, 72, 9; */
    /* --oj-c-palette-warning-90: 151, 86, 11; */
    /* --oj-c-palette-warning-100: 174, 101, 14; */
    /* --oj-c-palette-warning-110: 185, 113, 27; */
    /* --oj-c-palette-warning-120: 196, 124, 39; */
    /* --oj-c-palette-warning-130: 208, 136, 52; */
    /* --oj-c-palette-warning-140: 221, 149, 66; */
    /* --oj-c-palette-warning-150: 236, 164, 82; */
    /* --oj-c-palette-warning-160: 243, 185, 118; */
    /* --oj-c-palette-warning-170: 246, 201, 148; */
    /* --oj-c-palette-warning-180: 250, 224, 193; */
    /* --oj-c-palette-warning-190: 252, 237, 218; */
    /* info palette */
    /* --oj-c-palette-info-10: 1, 11, 15; */
    /* --oj-c-palette-info-20: 2, 19, 24; */
    /* --oj-c-palette-info-30: 2, 24, 31; */
    /* --oj-c-palette-info-40: 3, 37, 49; */
    /* --oj-c-palette-info-50: 4, 51, 67; */
    /* --oj-c-palette-info-60: 6, 69, 91; */
    /* --oj-c-palette-info-70: 10, 80, 104; */
    /* --oj-c-palette-info-80: 17, 93, 120; */
    /* --oj-c-palette-info-90: 26, 110, 140; */
    /* --oj-c-palette-info-100: 36, 127, 159; */
    /* --oj-c-palette-info-110: 57, 139, 168; */
    /* --oj-c-palette-info-120: 73, 149, 176; */
    /* --oj-c-palette-info-130: 93, 161, 185; */
    /* --oj-c-palette-info-140: 114, 173, 195; */
    /* --oj-c-palette-info-150: 135, 186, 205; */
    /* --oj-c-palette-info-160: 163, 202, 217; */
    /* --oj-c-palette-info-170: 182, 213, 225; */
    /* --oj-c-palette-info-180: 213, 231, 238; */
    /* --oj-c-palette-info-190: 229, 241, 245; */
    /* brand palette */
    /* --oj-c-palette-brand-10: 10, 8, 4; */
    /* --oj-c-palette-brand-20: 19, 16, 9; */
    /* --oj-c-palette-brand-30: 26, 22, 12; */
    /* --oj-c-palette-brand-40: 38, 32, 18; */
    /* --oj-c-palette-brand-50: 54, 46, 25; */
    /* --oj-c-palette-brand-60: 73, 62, 34; */
    /* --oj-c-palette-brand-70: 85, 72, 40; */
    /* --oj-c-palette-brand-80: 99, 84, 47; */
    /* --oj-c-palette-brand-90: 118, 100, 56; */
    /* --oj-c-palette-brand-100: 137, 116, 65; */
    /* --oj-c-palette-brand-110: 150, 127, 71; */
    /* --oj-c-palette-brand-120: 162, 137, 76; */
    /* --oj-c-palette-brand-130: 175, 149, 83; */
    /* --oj-c-palette-brand-140: 190, 162, 90; */
    /* --oj-c-palette-brand-150: 206, 176, 97; */
    /* --oj-c-palette-brand-160: 226, 192, 107; */
    /* --oj-c-palette-brand-170: 240, 204, 114; */
    /* --oj-c-palette-brand-180: 247, 226, 176; */
    /* --oj-c-palette-brand-190: 250, 238, 209; */
    /* overlay */
    /* --oj-c-overlay-hover: rgba(var(--oj-c-palette-neutral-200), .08); */
    /* --oj-c-overlay-active: rgba(var(--oj-c-palette-neutral-200), .12); */
    /* --oj-c-overlay-danger-hover: rgba(var(--oj-c-palette-danger-60), .32); */
    /* --oj-c-overlay-danger-active: rgba(var(--oj-c-palette-danger-60), .2); */
    /* --oj-c-overlay-scrim: rgba(var(--oj-c-palette-neutral-0), .4); */
    /* --oj-c-overlay-inverse-hover: rgba(var(--oj-c-palette-neutral-20), .08); */
    /* --oj-c-overlay-inverse-active: rgba(var(--oj-c-palette-neutral-20), .16); */
    /* --oj-c-overlay-drop-active: rgb(var(--oj-c-palette-brand-40)); */
    /* page background */
    /* --oj-c-page-background-neutral0: rgb(var(--oj-c-palette-neutral-50)); */
    /* --oj-c-page-background-neutral10: rgb(var(--oj-c-palette-neutral-40)); */
    /* --oj-c-page-background-neutral20: rgb(var(--oj-c-palette-neutral-30)); */
    /* --oj-c-page-background-neutral30: rgb(var(--oj-c-palette-neutral-20)); */
    /* --oj-c-page-background-neutral40: rgb(var(--oj-c-palette-neutral-10)); */
    /* surface */
    /* --oj-c-surface-neutral0: rgb(var(--oj-c-palette-neutral-50)); */
    /* --oj-c-surface-neutral10: rgb(var(--oj-c-palette-neutral-40)); */
    /* --oj-c-surface-neutral20: rgb(var(--oj-c-palette-neutral-30)); */
    /* --oj-c-surface-neutral30: rgb(var(--oj-c-palette-neutral-20)); */
    /* --oj-c-surface-selected: rgb(var(--oj-c-palette-brand-70)); */
    /* --oj-c-surface-disabled: rgba(var(--oj-c-palette-neutral-200), .04); */
    /* --oj-c-surface-popup: rgb(var(--oj-c-palette-neutral-50)); */
    /* --oj-c-surface-neutral-low: rgb(var(--oj-c-palette-neutral-40)); */
    /* --oj-c-surface-neutral-subtle: rgba(var(--oj-c-palette-neutral-200), .16); */
    /* --oj-c-surface-neutral-strong: rgb(var(--oj-c-palette-neutral-120)); */
    /* --oj-c-surface-success-low: rgb(var(--oj-c-palette-success-40)); */
    /* --oj-c-surface-success-subtle: rgba(var(--oj-c-palette-success-80), .76); */
    /* --oj-c-surface-success-strong: rgb(var(--oj-c-palette-success-130)); */
    /* --oj-c-surface-info-low: rgb(var(--oj-c-palette-info-40)); */
    /* --oj-c-surface-info-subtle: rgba(var(--oj-c-palette-info-80), .76); */
    /* --oj-c-surface-info-strong: rgb(var(--oj-c-palette-info-130)); */
    /* --oj-c-surface-warning-low: rgb(var(--oj-c-palette-warning-40)); */
    /* --oj-c-surface-warning-subtle: rgba(var(--oj-c-palette-warning-80), .76); */
    /* --oj-c-surface-warning-strong: rgb(var(--oj-c-palette-warning-150)); */
    /* --oj-c-surface-danger-low: rgb(var(--oj-c-palette-danger-40)); */
    /* --oj-c-surface-danger-subtle: rgba(var(--oj-c-palette-danger-80), .76); */
    /* --oj-c-surface-danger-strong: rgb(var(--oj-c-palette-danger-130)); */
    /* border */
    /* --oj-c-border-enabled: rgba(var(--oj-c-palette-neutral-200), .5); */
    /* --oj-c-border-disabled: rgba(var(--oj-c-palette-neutral-200), .2); */
    /* --oj-c-border-divider: rgba(var(--oj-c-palette-neutral-200), .12); */
    /* --oj-c-border-divider-opaque-color: rgb(var(--oj-c-palette-neutral-200)); */
    /* --oj-c-border-divider-opaque-percent: 12%; */
    /* --oj-c-border-selected: rgb(var(--oj-c-palette-brand-170)); */
    /* --oj-c-border-drop-line: rgb(var(--oj-c-palette-brand-170)); */
    /* --oj-c-border-selected-neutral: rgb(var(--oj-c-palette-neutral-200)); */
    /* --oj-c-border-warning: rgb(var(--oj-c-palette-warning-120)); */
    /* --oj-c-border-danger: rgb(var(--oj-c-palette-danger-120)); */
    /* --oj-c-border-keyboard-focus: rgb(var(--oj-c-palette-neutral-200)); */
    /* --oj-c-border-inverse-keyboard-focus: rgb(var(--oj-c-palette-neutral-0)); */
    /* box shadow color */
    /* --oj-c-boxshadow-shadowcolor: var(--oj-c-palette-neutral-0); */
    /* text and icon */
    /* --oj-c-text-icon-primary: rgb(var(--oj-c-palette-neutral-200)); */
    /* --oj-c-text-icon-secondary: rgba(var(--oj-c-palette-neutral-200), .7); */
    /* --oj-c-text-icon-disabled: rgba(var(--oj-c-palette-neutral-200), .4); */
    /* --oj-c-text-icon-inverse: rgb(var(--oj-c-palette-neutral-10)); */
    /* --oj-c-text-icon-link: rgb(var(--oj-c-palette-brand-170)); */
    /* --oj-c-text-icon-success: rgb(var(--oj-c-palette-success-130)); */
    /* --oj-c-text-icon-info: rgb(var(--oj-c-palette-info-130)); */
    /* --oj-c-text-icon-warning: rgb(var(--oj-c-palette-warning-150)); */
    /* --oj-c-text-icon-danger: rgb(var(--oj-c-palette-danger-130)); */
    /* --oj-c-text-icon-on-color: rgb(var(--oj-c-palette-neutral-200)); */
    /* text field */
    /* --oj-c-textfield-surface-enabled: var(--oj-c-surface-neutral20); */
    /* --oj-c-textfield-border-enabled: var(--oj-c-border-enabled); */
    /* collection */
    /* --oj-c-collection-header-text: rgb(var(--oj-c-text-icon-primary)); */
    /* --oj-c-collection-header-surface-selected: rgba(var(--oj-c-palette-neutral-200), .12); */
    /* --oj-c-collection-header-surface-partial-selected: rgba(var(--oj-c-palette-neutral-200), .04); */
    /* collection grid */
    /* --oj-c-collection-grid-cell-surface-edit: rgb(var(--oj-c-palette-neutral-0)); */
    /* measure */
    /* --oj-c-measure-track-enabled: rgba(var(--oj-c-palette-neutral-200), .16); */
    /* --oj-c-measure-track-disabled: rgba(var(--oj-c-palette-neutral-200), .16); */
    /* --oj-c-measure-fill-enabled: rgb(var(--oj-c-palette-neutral-200)); */
    /* --oj-c-measure-fill-disabled: rgba(var(--oj-c-palette-neutral-200), .3); */
    /* --oj-c-measure-thumb-surface: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-measure-reference-line: rgba(var(--oj-c-palette-neutral-200), .8); */
    /* --oj-c-measure-reference-line-contrast: rgba(var(--oj-c-palette-neutral-20), .7); */
    /* --oj-c-measure-reference-area: rgba(var(--oj-c-palette-neutral-200), .08); */
    /* data visualization */
    /* --oj-c-dvt-contrast-line: rgb(var(--oj-c-palette-neutral-20)); */
    /* --oj-c-dvt-palette-qualitative-1: 87, 184, 194; */
    /* --oj-c-dvt-palette-qualitative-2: 175, 97, 9; */
    /* --oj-c-dvt-palette-qualitative-3: 40, 129, 126; */
    /* --oj-c-dvt-palette-qualitative-4: 206, 195, 186; */
    /* --oj-c-dvt-palette-qualitative-5: 78, 124, 70; */
    /* --oj-c-dvt-palette-qualitative-6: 170, 95, 113; */
    /* --oj-c-dvt-palette-qualitative-7: 226, 160, 126; */
    /* --oj-c-dvt-palette-qualitative-8: 130, 91, 189; */
    /* --oj-c-dvt-palette-qualitative-9: 184, 156, 0; */
    /* --oj-c-dvt-palette-qualitative-10: 214, 191, 227; */
    /* --oj-c-dvt-palette-qualitative-11: 62, 115, 137; */
    /* --oj-c-dvt-palette-qualitative-12: 66, 164, 92; */
    /* --oj-c-dvt-threshold-success: rgb(var(--oj-c-palette-success-100)); */
    /* --oj-c-dvt-threshold-warning: rgb(207, 124, 0); */
    /* --oj-c-dvt-threshold-danger: rgb(var(--oj-c-palette-danger-100)); */
    /* --oj-c-dvt-marquee-border: rgba(var(--oj-c-palette-neutral-190), .8); */
    /* --oj-c-dvt-marquee-surface: rgba(var(--oj-c-palette-neutral-20), .1); */
    /* --oj-c-dvt-reference-object-area: rgba(var(--oj-c-palette-neutral-170), .08); */
    /* --oj-c-dvt-reference-object-line: rgba(var(--oj-c-palette-neutral-190), .8); */
    /* --oj-c-dvt-overview-background: rgb(var(--oj-c-palette-neutral-30)); */
    /* --oj-c-dvt-overview-window-background: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-dvt-overview-window-border: rgb(var(--oj-c-palette-neutral-170)); */
}

.oj-scale-sm,
:root.oj-scale-sm {
    /* scale */
    /* --oj-c-size-units: 3px; */
}

.oj-scale-md,
:root.oj-scale-md {
    /* scale */
    /* --oj-c-size-units: 3.5px; */
}

.oj-scale-lg {
    /* scale */
    /* --oj-c-size-units: 4px; */
}

:root {
    /* scale */
    /* --oj-c-size-units: .25rem; */
}

:root,
.oj-density-standard {
    /* density */
    /* --oj-c-density-units: 0px; */
}

.oj-density-compact {
    /* density */
    /* --oj-c-density-units: -1 * var(--oj-c-size-units); */
}

:root {
    /* html */
    /* --oj-c-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; */
    /* --oj-c-font-size: 1em; */
}

:root {
    /* body */
    /* --oj-c-bg-color: var(--oj-c-surface-neutral10); */
}

:root,
.oj-scale-dependent,
:root.oj-scale-sm,
:root.oj-scale-md {
    /* data visualization labels */
    /* --oj-c-label-sm-font-size: var(--oj-c-body-xs-font-size); */
    /* --oj-c-label-md-font-size: var(--oj-c-body-sm-font-size); */
    /* --oj-c-label-lg-font-size: var(--oj-c-body-md-font-size); */
    /* data visualization opacity */
    /* --oj-c-dimmed-opacity: .35; */
}

:root,
.oj-c-colorscheme-dependent {
    /* focus */
    /* --oj-c-keyboard-outline-color: var(--oj-c-border-keyboard-focus); */
    /* --oj-c-keyboard-outline-style: dashed; */
    /* --oj-c-keyboard-outline-width: 2px; */
}

:root,
.oj-c-colorscheme-dependent,
.oj-scale-dependent,
:root.oj-scale-sm,
:root.oj-scale-md,
.oj-density-dependent {
    /* date-picker */
    /* --oj-c-date-picker-cell-font-size: var(--oj-c-body-md-font-size); */
    /* --oj-c-date-picker-cell-border-color-today: var(--oj-c-border-enabled); */
    /* dialog */
    /* --oj-c-dialog-bg-color: var(--oj-c-surface-popup); */
    /* --oj-c-dialog-border-color: var(--oj-c-border-divider); */
    /* --oj-c-dialog-border-radius: var(--oj-c-border-radius-lg); */
    /* --oj-c-dialog-box-shadow: var(--oj-c-box-shadow-lg); */
    /* --oj-c-dialog-title-font-size: var(--oj-c-heading-xs-font-size); */
    /* --oj-c-dialog-title-font-weight: var(--oj-c-heading-xs-font-weight); */
    /* --oj-c-dialog-title-line-height: var(--oj-c-heading-xs-line-height); */
    /* --oj-c-dialog-title-text-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-dialog-header-bg-color: transparent; */
    /* --oj-c-dialog-header-border-color: transparent; */
    /* --oj-c-dialog-header-padding-top: calc(11 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-header-padding-bottom: calc(3 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-header-padding-horizontal: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-header-padding-horizontal-small: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-body-padding-top: calc(0 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-body-padding-bottom: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-body-padding-horizontal: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-body-padding-horizontal-small: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-footer-padding-top: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-footer-padding-bottom: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-footer-padding-bottom-small: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-footer-padding-horizontal: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-dialog-footer-padding-horizontal-small: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* drawer-popup */
    /* --oj-c-drawer-popup-overlay-drawer-background-color: var(--oj-c-surface-neutral10); */
    /* popup */
    /* --oj-c-popup-bg-color: var(--oj-c-surface-popup); */
    /* --oj-c-popup-border-color: var(--oj-c-border-divider); */
    /* --oj-c-popup-border-radius: var(--oj-c-border-radius-sm); */
    /* --oj-c-popup-box-shadow: var(--oj-c-box-shadow-xs); */
    /* --oj-c-popup-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* rating-gauge */
    /* --oj-c-rating-gauge-color-selected: var(--oj-c-text-icon-primary); */
    /* --oj-c-rating-gauge-color-unselected: transparent; */
    /* --oj-c-rating-gauge-color-selected-disabled: var(--oj-c-text-icon-disabled); */
    /* --oj-c-rating-gauge-color-unselected-disabled: rgba(var(--oj-c-palette-neutral-190), .12); */
    /* --oj-c-rating-gauge-color-selected-readonly: var(--oj-c-text-icon-primary); */
    /* --oj-c-rating-gauge-color-unselected-readonly: rgba(var(--oj-c-palette-neutral-170), .15); */
    /* --oj-c-rating-gauge-border-color-selected: var(--oj-c-text-icon-primary); */
    /* --oj-c-rating-gauge-border-color-unselected: var(--oj-c-text-icon-primary); */
    /* --oj-c-rating-gauge-border-color-selected-readonly: transparent; */
    /* --oj-c-rating-gauge-border-color-unselected-readonly: var(--oj-c-border-enabled); */
    /* --oj-c-rating-gauge-colors-gold-border-color-unselected-readonly: var(--oj-c-border-enabled); */
    /* --oj-c-rating-gauge-colors-gold-border-color-selected-readonly: transparent; */
    /* --oj-c-rating-gauge-size-sm: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-rating-gauge-size-md: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-rating-gauge-size-lg: calc(9 * var(--oj-c-size-units, .25rem)); */
    /* meter-bar */
    /* --oj-c-meter-bar-plot-area-color: var(--oj-c-measure-track-enabled); */
    /* --oj-c-meter-bar-plot-area-border-color: var(--oj-c-border-enabled); */
    /* --oj-c-meter-bar-size-sm: var(--oj-c-size-units, .25rem); */
    /* --oj-c-meter-bar-size-md: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-meter-bar-size-lg: calc(3 * var(--oj-c-size-units, .25rem)); */
    /* meter-circle */
    /* --oj-c-meter-circle-track-color: var(--oj-c-measure-track-enabled); */
    /* --oj-c-meter-circle-size-sm: calc(14 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-meter-circle-size-md: calc(24 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-meter-circle-size-lg: calc(49 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-meter-circle-size-fit: 100%; */
    /* --oj-c-meter-circle-track-size-sm: var(--oj-c-size-units, .25rem); */
    /* --oj-c-meter-circle-track-size-md: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-meter-circle-track-size-lg: calc(3 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-meter-circle-track-size-fit: calc(3 * var(--oj-c-size-units, .25rem)); */
    /* conveyor-belt */
    /* --oj-c-conveyor-belt-box-shadow-width: var(--oj-c-size-units, .25rem); */
    /* switch */
    /* --oj-c-switch-track-height: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-switch-track-width: calc(9 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-switch-track-border-radius: var(--oj-c-border-radius-lg); */
    /* --oj-c-switch-track-bg-color: rgb(var(--oj-c-palette-neutral-90)); */
    /* --oj-c-switch-track-border-color: transparent; */
    /* --oj-c-switch-thumb-to-track-horizontal-margin: 0.0625rem; */
    /* --oj-c-switch-thumb-height: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-switch-thumb-width: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-switch-thumb-width-active: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-switch-thumb-border-radius: var(--oj-c-border-radius-md); */
    /* --oj-c-switch-thumb-bg-color: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-border-color: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-box-shadow: none; */
    /* --oj-c-switch-track-bg-color-selected: rgb(var(--oj-c-palette-brand-100)); */
    /* --oj-c-switch-track-border-color-selected: rgb(var(--oj-c-palette-brand-100)); */
    /* --oj-c-switch-thumb-bg-color-selected: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-border-color-selected: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-box-shadow-selected: none; */
    /* --oj-c-switch-track-bg-color-disabled: var(--oj-c-measure-track-disabled); */
    /* --oj-c-switch-track-border-color-disabled: transparent; */
    /* --oj-c-switch-thumb-bg-color-disabled: var(--oj-c-measure-thumb-surface); */
    /* --oj-c-switch-thumb-border-color-disabled: transparent; */
    /* --oj-c-switch-track-bg-color-selected-disabled: var(--oj-c-measure-track-disabled); */
    /* --oj-c-switch-track-border-color-selected-disabled: transparent; */
    /* --oj-c-switch-thumb-bg-color-selected-disabled: var(--oj-c-measure-thumb-surface); */
    /* --oj-c-switch-thumb-border-color-selected-disabled: transparent; */
    /* --oj-c-switch-thumb-box-shadow-hover: none; */
    /* --oj-c-switch-thumb-box-shadow-active: none; */
    /* --oj-c-switch-thumb-box-shadow-selected-hover: none; */
    /* --oj-c-switch-thumb-box-shadow-selected-active: none; */
    /* --oj-c-switch-track-bg-color-hover: var(--oj-c-overlay-hover); */
    /* --oj-c-switch-track-border-color-hover: transparent; */
    /* --oj-c-switch-track-bg-color-selected-hover: var(--oj-c-overlay-hover); */
    /* --oj-c-switch-track-border-color-selected-hover: transparent; */
    /* --oj-c-switch-track-bg-color-active: var(--oj-c-overlay-active); */
    /* --oj-c-switch-track-border-color-active: transparent; */
    /* --oj-c-switch-track-bg-color-selected-active: var(--oj-c-overlay-active); */
    /* --oj-c-switch-track-border-color-selected-active: transparent; */
    /* --oj-c-switch-thumb-bg-color-hover: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-border-color-hover: transparent; */
    /* --oj-c-switch-thumb-bg-color-selected-hover: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-border-color-selected-hover: transparent; */
    /* --oj-c-switch-thumb-bg-color-active: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-border-color-active: transparent; */
    /* --oj-c-switch-thumb-bg-color-selected-active: rgb(var(--oj-c-palette-neutral-0)); */
    /* --oj-c-switch-thumb-border-color-selected-active: transparent; */
    /* tab-bar */
    /* --oj-c-tab-bar-icon-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-tab-bar-item-label-color: var(--oj-c-text-icon-secondary); */
    /* --oj-c-tab-bar-item-label-color-hover: var(--oj-c-text-icon-primary); */
    /* --oj-c-tab-bar-item-label-color-selected: var(--oj-c-text-icon-primary); */
}

:root,
.oj-c-colorscheme-light {
    /* base-button variants */
    /* --oj-c-base-button-variants-outlined-base-background-color: transparent; */
    /* --oj-c-base-button-variants-outlined-base-border-color: var(--oj-c-border-enabled); */
    /* --oj-c-base-button-variants-outlined-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-outlined-disabled-background-color: transparent; */
    /* --oj-c-base-button-variants-outlined-disabled-border-color: var(--oj-c-border-disabled); */
    /* --oj-c-base-button-variants-outlined-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-outlined-hover-background-overlay-color: var(--oj-c-overlay-hover); */
    /* --oj-c-base-button-variants-outlined-active-background-overlay-color: var(--oj-c-overlay-active); */
    /* --oj-c-base-button-variants-call-to-action-base-background-color: rgb(var(--oj-c-palette-neutral-170)); */
    /* --oj-c-base-button-variants-call-to-action-base-border-color: transparent; */
    /* --oj-c-base-button-variants-call-to-action-base-color: var(--oj-c-text-icon-inverse); */
    /* --oj-c-base-button-variants-call-to-action-disabled-background-color: var(--oj-c-surface-disabled); */
    /* --oj-c-base-button-variants-call-to-action-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-call-to-action-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-call-to-action-hover-background-overlay-color: var(--oj-c-overlay-inverse-hover); */
    /* --oj-c-base-button-variants-call-to-action-active-background-overlay-color: var(--oj-c-overlay-inverse-active); */
    /* --oj-c-base-button-variants-borderless-base-background-color: transparent; */
    /* --oj-c-base-button-variants-borderless-base-border-color: transparent; */
    /* --oj-c-base-button-variants-borderless-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-borderless-disabled-background-color: transparent; */
    /* --oj-c-base-button-variants-borderless-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-borderless-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-borderless-hover-background-overlay-color: var(--oj-c-overlay-hover); */
    /* --oj-c-base-button-variants-borderless-active-background-overlay-color: var(--oj-c-overlay-active); */
    /* --oj-c-base-button-variants-ghost-base-background-color: transparent; */
    /* --oj-c-base-button-variants-ghost-base-border-color: transparent; */
    /* --oj-c-base-button-variants-ghost-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-ghost-disabled-background-color: transparent; */
    /* --oj-c-base-button-variants-ghost-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-ghost-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-ghost-hover-background-overlay-color: transparent; */
    /* --oj-c-base-button-variants-ghost-active-background-overlay-color: transparent; */
    /* --oj-c-base-button-variants-solid-base-background-color: rgba(var(--oj-c-palette-neutral-190), .08); */
    /* --oj-c-base-button-variants-solid-base-border-color: transparent; */
    /* --oj-c-base-button-variants-solid-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-solid-disabled-background-color: var(--oj-c-surface-disabled); */
    /* --oj-c-base-button-variants-solid-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-solid-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-solid-hover-background-overlay-color: var(--oj-c-overlay-hover); */
    /* --oj-c-base-button-variants-solid-active-background-overlay-color: var(--oj-c-overlay-active); */
    /* --oj-c-base-button-variants-danger-base-background-color: var(--oj-c-surface-danger-strong); */
    /* --oj-c-base-button-variants-danger-base-border-color: transparent; */
    /* --oj-c-base-button-variants-danger-base-color: var(--oj-c-text-icon-on-color); */
    /* --oj-c-base-button-variants-danger-disabled-background-color: var(--oj-c-surface-disabled); */
    /* --oj-c-base-button-variants-danger-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-danger-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-danger-hover-background-overlay-color: var(--oj-c-overlay-danger-hover); */
    /* --oj-c-base-button-variants-danger-active-background-overlay-color: var(--oj-c-overlay-danger-active); */
}

.oj-c-colorscheme-dark,
.oj-color-invert {
    /* base-button variants */
    /* --oj-c-base-button-variants-outlined-base-background-color: transparent; */
    /* --oj-c-base-button-variants-outlined-base-border-color: var(--oj-c-border-enabled); */
    /* --oj-c-base-button-variants-outlined-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-outlined-disabled-background-color: transparent; */
    /* --oj-c-base-button-variants-outlined-disabled-border-color: var(--oj-c-border-disabled); */
    /* --oj-c-base-button-variants-outlined-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-outlined-hover-background-overlay-color: var(--oj-c-overlay-hover); */
    /* --oj-c-base-button-variants-outlined-active-background-overlay-color: var(--oj-c-overlay-active); */
    /* --oj-c-base-button-variants-call-to-action-base-background-color: rgb(var(--oj-c-palette-neutral-200)); */
    /* --oj-c-base-button-variants-call-to-action-base-border-color: transparent; */
    /* --oj-c-base-button-variants-call-to-action-base-color: var(--oj-c-text-icon-inverse); */
    /* --oj-c-base-button-variants-call-to-action-disabled-background-color: var(--oj-c-surface-disabled); */
    /* --oj-c-base-button-variants-call-to-action-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-call-to-action-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-call-to-action-hover-background-overlay-color: var(--oj-c-overlay-inverse-hover); */
    /* --oj-c-base-button-variants-call-to-action-active-background-overlay-color: var(--oj-c-overlay-inverse-active); */
    /* --oj-c-base-button-variants-borderless-base-background-color: transparent; */
    /* --oj-c-base-button-variants-borderless-base-border-color: transparent; */
    /* --oj-c-base-button-variants-borderless-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-borderless-disabled-background-color: transparent; */
    /* --oj-c-base-button-variants-borderless-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-borderless-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-borderless-hover-background-overlay-color: var(--oj-c-overlay-hover); */
    /* --oj-c-base-button-variants-borderless-active-background-overlay-color: var(--oj-c-overlay-active); */
    /* --oj-c-base-button-variants-ghost-base-background-color: transparent; */
    /* --oj-c-base-button-variants-ghost-base-border-color: transparent; */
    /* --oj-c-base-button-variants-ghost-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-ghost-disabled-background-color: transparent; */
    /* --oj-c-base-button-variants-ghost-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-ghost-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-ghost-hover-background-overlay-color: transparent; */
    /* --oj-c-base-button-variants-ghost-active-background-overlay-color: transparent; */
    /* --oj-c-base-button-variants-solid-base-background-color: rgba(var(--oj-c-palette-neutral-190), .08); */
    /* --oj-c-base-button-variants-solid-base-border-color: transparent; */
    /* --oj-c-base-button-variants-solid-base-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-base-button-variants-solid-disabled-background-color: var(--oj-c-surface-disabled); */
    /* --oj-c-base-button-variants-solid-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-solid-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-solid-hover-background-overlay-color: var(--oj-c-overlay-hover); */
    /* --oj-c-base-button-variants-solid-active-background-overlay-color: var(--oj-c-overlay-active); */
    /* --oj-c-base-button-variants-danger-base-background-color: var(--oj-c-surface-danger-strong); */
    /* --oj-c-base-button-variants-danger-base-border-color: transparent; */
    /* --oj-c-base-button-variants-danger-base-color: var(--oj-c-text-icon-inverse); */
    /* --oj-c-base-button-variants-danger-disabled-background-color: var(--oj-c-surface-disabled); */
    /* --oj-c-base-button-variants-danger-disabled-border-color: transparent; */
    /* --oj-c-base-button-variants-danger-disabled-color: var(--oj-c-text-icon-disabled); */
    /* --oj-c-base-button-variants-danger-hover-background-overlay-color: var(--oj-c-overlay-danger-hover); */
    /* --oj-c-base-button-variants-danger-active-background-overlay-color: var(--oj-c-overlay-danger-active); */
}

:root,
.oj-scale-dependent,
:root.oj-scale-sm,
:root.oj-scale-md,
.oj-density-dependent {
    /* base-button scale */
    /* --oj-c-base-button-border-radius: var(--oj-c-border-radius-md); */
    /* --oj-c-base-button-font-size: var(--oj-c-body-sm-font-size); */
    /* --oj-c-base-button-sizes-xs-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-xs-height: max(calc(6 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-sm-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-sm-height: max(calc(9 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-md-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-md-height: calc(11 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
    /* --oj-c-base-button-sizes-lg-text-to-edge-padding: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-lg-height: calc(13 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
}

.oj-scale-sm,
:root.oj-scale-sm {
    /* base-button scale */
    /* --oj-c-base-button-border-radius: var(--oj-c-border-radius-md); */
    /* --oj-c-base-button-font-size: var(--oj-c-body-md-font-size); */
    /* --oj-c-base-button-sizes-xs-text-to-edge-padding: calc(5.33 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-xs-height: max(calc(8 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-sm-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-sm-height: max(calc(9 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-md-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-md-height: max(calc(9.33 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-lg-text-to-edge-padding: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-lg-height: calc(13 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
}

.oj-scale-md,
:root.oj-scale-md {
    /* base-button scale */
    /* --oj-c-base-button-border-radius: var(--oj-c-border-radius-md); */
    /* --oj-c-base-button-font-size: var(--oj-c-body-md-font-size); */
    /* --oj-c-base-button-sizes-xs-text-to-edge-padding: calc(4.57 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-xs-height: max(calc(6.86 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-sm-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-sm-height: max(calc(9 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-md-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-md-height: calc(11 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
    /* --oj-c-base-button-sizes-lg-text-to-edge-padding: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-lg-height: calc(13 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
}

.oj-scale-lg {
    /* base-button scale */
    /* --oj-c-base-button-border-radius: var(--oj-c-border-radius-md); */
    /* --oj-c-base-button-font-size: var(--oj-c-body-sm-font-size); */
    /* --oj-c-base-button-sizes-xs-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-xs-height: max(calc(6 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-sm-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-sm-height: max(calc(9 * var(--oj-c-size-units, .25rem) + 3 * var(--oj-c-density-units, 0px)), 24px); */
    /* --oj-c-base-button-sizes-md-text-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-md-height: calc(11 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
    /* --oj-c-base-button-sizes-lg-text-to-edge-padding: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-base-button-sizes-lg-height: calc(13 * var(--oj-c-size-units, .25rem) + 2 * var(--oj-c-density-units, 0px)); */
}

:root,
.oj-scale-dependent,
:root.oj-scale-sm,
:root.oj-scale-md {
    /* button-label-layout */
    /* --oj-c-button-label-layout-sizes-sm-icon-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-edge-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-text-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-size: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-edge-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-text-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-size: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-text-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* menu-item scale */
    /* --oj-c-menu-item-icon-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-menu-item-start-edge-to-start-icon-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-menu-item-end-icon-to-end-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-menu-item-start-icon-to-label-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-menu-item-label-to-end-icon-padding: calc(8 * var(--oj-c-size-units, .25rem)); */
    /* menu-separator */
    /* --oj-c-menu-separator-vertical-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
}

.oj-scale-sm,
:root.oj-scale-sm {
    /* button-label-layout */
    /* --oj-c-button-label-layout-sizes-sm-icon-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-edge-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-text-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-size: calc(5.333 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-edge-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-text-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-size: calc(5.333 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-text-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
}

.oj-scale-md,
:root.oj-scale-md {
    /* button-label-layout */
    /* --oj-c-button-label-layout-sizes-sm-icon-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-edge-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-text-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-size: calc(5.714 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-edge-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-text-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-size: calc(5.714 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-text-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
}

.oj-scale-lg {
    /* button-label-layout */
    /* --oj-c-button-label-layout-sizes-sm-icon-size: calc(5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-edge-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-sm-icon-to-text-padding: calc(2 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-size: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-edge-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-md-icon-to-text-padding: calc(2.5 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-size: calc(6 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-edge-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
    /* --oj-c-button-label-layout-sizes-lg-icon-to-text-padding: calc(4 * var(--oj-c-size-units, .25rem)); */
}

:root,
.oj-c-colorscheme-dependent {
    /* menu-item color */
    /* --oj-c-menu-item-text-color: var(--oj-c-text-icon-primary); */
    /* --oj-c-menu-item-icon-color: var(--oj-c-text-icon-primary); */
}

This generated list is the exhaustive list of current public Core Pack CSS variables. Private/internal variables, including hashed implementation variables and variables with private prefixes such as --oj-c-PRIVATE, are not supported for application use.

General Variables

General variables have the following prefixes:

  1. --oj-c-palette - for color ramps
  2. In the future, we will provide further customization support.

Core Pack variables use the --oj-c- prefix. The main public groups are:

  • --oj-c-palette - color ramps
  • --oj-c-surface, --oj-c-page-background, and --oj-c-overlay - surfaces, page backgrounds, and interaction overlays
  • --oj-c-border, --oj-c-border-radius, --oj-c-box-shadow, and --oj-c-cursor - shared borders, shape, elevation, and cursor values
  • --oj-c-text-icon - text and icon colors
  • --oj-c-font and --oj-c-bg-color - document font and body background values
  • --oj-c-heading, --oj-c-subheading, --oj-c-body, and --oj-c-label - typography
  • --oj-c-duration, --oj-c-delay, --oj-c-easing, --oj-c-fade, --oj-c-slide, and --oj-c-anchor - motion and animation
  • --oj-c-size and --oj-c-density - scale and density units
  • --oj-c-keyboard-outline - keyboard focus outline values
  • --oj-c-measure - shared measure and meter values
  • --oj-c-collection and --oj-c-collection-grid - shared collection values
  • --oj-c-textfield - shared text field values
  • --oj-c-dvt - shared data visualization values
  • --oj-c-date-picker - date picker component variables
  • --oj-c-dialog - dialog component variables
  • --oj-c-drawer-popup - drawer popup component variables
  • --oj-c-popup - popup component variables
  • --oj-c-rating-gauge - rating gauge component variables
  • --oj-c-meter-bar - meter bar component variables
  • --oj-c-meter-circle - meter circle component variables
  • --oj-c-conveyor-belt - conveyor belt component variables
  • --oj-c-switch - switch component variables
  • --oj-c-tab-bar - tab bar component variables
  • --oj-c-base-button - base button component variables
  • --oj-c-button-label-layout - button label layout component variables
  • --oj-c-menu-item - menu item component variables
  • --oj-c-menu-separator - menu separator component variables

Palette Variables

There are a few different palettes available with the following prefixes:

  • --oj-c-palette-neutral - neutral color ramp
  • --oj-c-palette-brand - brand color ramp
  • --oj-c-palette-danger - ramp for failure, negative, or destructive state colors
  • --oj-c-palette-warning - ramp for caution or notification state colors
  • --oj-c-palette-success - ramp for valid, positive, or completed state colors
  • --oj-c-palette-info - ramp for informational state colors

Using palette variables

Palette variables cannot be used directly as a color; instead, palette variables must be passed to either the rgb() function to create opaque colors or to the rgba function to create semi-transparent colors. For example: 


background-color: rgb(var(--oj-c-palette-neutral-0));
background-color: rgba(var(--oj-c-palette-neutral-0), 0.5);

Generating a Neutral Palette Ramp

Many core and component specific variables point to the neutral and brand palette variables, so if you want to change the look and feel, then changing those variables first will have the biggest impact. To create a color palette, we recommend using Leonardo. Leonardo generates colors based on a desired contrast ratio, which helps to create accessible color ramps.

  1. To generate a new neutral, ramp open the following link to generate a neutral color palette
  2. Click the pencil icon next to the second color ('Slate grey'), then input your neutral color as the 'Key Color'. See the articles page for some documentation.
  3. To get the rgb values in the top nav, click the 'Use' tab, on the right, click the 'CSS' tab, on the left, under 'Output color format' choose 'RGB'. Take only the numbers, for example '231, 201, 200' and assign the values to the equivalent --oj-c-palette-neutral-* css variables as seen below.
JET Neutral CSS Variables RGB value Color
--oj-c-palette-neutral-0: 254, 254, 254;
--oj-c-palette-neutral-10: 249, 249, 249;
--oj-c-palette-neutral-20: 244, 244, 244;
--oj-c-palette-neutral-30: 239, 239, 239;
--oj-c-palette-neutral-40: 226, 226, 226;
--oj-c-palette-neutral-50: 207, 207, 207;
--oj-c-palette-neutral-60: 184, 184, 184;
--oj-c-palette-neutral-70: 169, 169, 169;
--oj-c-palette-neutral-80: 153, 153, 153;
--oj-c-palette-neutral-90: 133, 133, 133;
--oj-c-palette-neutral-100: 117, 117, 117;
--oj-c-palette-neutral-110: 106, 106, 106;
--oj-c-palette-neutral-120: 97, 97, 97;
--oj-c-palette-neutral-130: 87, 87, 87;
--oj-c-palette-neutral-140: 77, 77, 77;
--oj-c-palette-neutral-150: 66, 66, 66;
--oj-c-palette-neutral-160: 54, 54, 54;
--oj-c-palette-neutral-170: 46, 46, 46;
--oj-c-palette-neutral-180: 31, 31, 31;
--oj-c-palette-neutral-190: 22, 22, 22;
--oj-c-palette-neutral-200: 0, 0, 0;

Generating a Dark Color Scheme

To create a dark color scheme, define your neutral palette values under the dark scheme selectors .oj-c-colorscheme-dark and .oj-color-invert. You can generate an accessible dark palette with Leonardo, using a dark base.

  1. Open the following link to generate a dark neutral color palette.
  2. Click the pencil icon next to the second color, then set your desired dark neutral as the Key Color. Refer to Leonardo’s documentation if needed.
  3. In the top nav, click the Use tab, then the CSS tab. Choose RGB as the output color format and copy just the numbers (e.g., 22, 22, 22). Assign them to the corresponding --oj-c-palette-neutral-* CSS variables under the dark selectors as shown below.
JET Neutral CSS Variables (Dark) RGB value Color
--oj-c-palette-neutral-0: 0, 0, 0;
--oj-c-palette-neutral-10: 22, 22, 22;
--oj-c-palette-neutral-20: 31, 31, 31;
--oj-c-palette-neutral-30: 46, 46, 46;
--oj-c-palette-neutral-40: 54, 54, 54;
--oj-c-palette-neutral-50: 66, 66, 66;
--oj-c-palette-neutral-60: 77, 77, 77;
--oj-c-palette-neutral-70: 87, 87, 87;
--oj-c-palette-neutral-80: 97, 97, 97;
--oj-c-palette-neutral-90: 106, 106, 106;
--oj-c-palette-neutral-100: 117, 117, 117;
--oj-c-palette-neutral-110: 133, 133, 133;
--oj-c-palette-neutral-120: 153, 153, 153;
--oj-c-palette-neutral-130: 169, 169, 169;
--oj-c-palette-neutral-140: 184, 184, 184;
--oj-c-palette-neutral-150: 207, 207, 207;
--oj-c-palette-neutral-160: 226, 226, 226;
--oj-c-palette-neutral-170: 239, 239, 239;
--oj-c-palette-neutral-180: 244, 244, 244;
--oj-c-palette-neutral-190: 249, 249, 249;
--oj-c-palette-neutral-200: 254, 254, 254;

Generating Other Palette Ramps

  • Open the following link to generate a brand color palette.
  • You'll notice this link is a bit different from the neutral link, with fewer colors. This is because the brand palette omits some contrast levels.
  • The same link can be used for the --oj-c-palette-danger, --oj-c-palette-warning, --oj-c-palette-success, and --oj-c-palette-info ramps.
JET Brand CSS Variables RGB value Color
--oj-c-palette-brand-10: 252, 248, 254;
--oj-c-palette-brand-20: 249, 242, 253;
--oj-c-palette-brand-30: 246, 236, 252;
--oj-c-palette-brand-40: 239, 219, 250;
--oj-c-palette-brand-50: 229, 196, 246;
--oj-c-palette-brand-60: 215, 165, 242;
--oj-c-palette-brand-70: 206, 145, 239;
--oj-c-palette-brand-80: 196, 123, 235;
--oj-c-palette-brand-90: 183, 94, 231;
--oj-c-palette-brand-100: 169, 64, 227;
--oj-c-palette-brand-110: 159, 40, 223;
--oj-c-palette-brand-120: 146, 35, 207;
--oj-c-palette-brand-130: 132, 32, 186;
--oj-c-palette-brand-140: 117, 28, 166;
--oj-c-palette-brand-150: 102, 24, 144;
--oj-c-palette-brand-160: 84, 20, 119;
--oj-c-palette-brand-170: 72, 17, 101;

Color, Surface, and State Variables

Use semantic variables where possible instead of reaching directly for palette ramps. Semantic variables are mapped to the current color scheme and are used across Core Pack components.

  • --oj-c-surface-* - component and popup surfaces, selected and disabled surfaces, and semantic low/subtle/strong surfaces
  • --oj-c-page-background-* - page-level neutral background colors
  • --oj-c-overlay-* - hover, active, scrim, inverse, danger, and drop-active overlays
  • --oj-c-border-* - enabled, disabled, divider, selected, warning, danger, drop-line, and keyboard-focus borders
  • --oj-c-text-icon-* - primary, secondary, disabled, inverse, on-color, link, success, info, warning, and danger text/icon colors

:root {
  --oj-c-surface-neutral10: rgb(var(--oj-c-palette-neutral-10));
  --oj-c-border-selected: rgb(var(--oj-c-palette-brand-100));
  --oj-c-text-icon-link: rgb(var(--oj-c-palette-brand-120));
}

Base Variables

Base variables define shared cursor, shape, and elevation values.

  • --oj-c-cursor-clickable - clickable cursor
  • --oj-c-border-radius-sm, --oj-c-border-radius-md, --oj-c-border-radius-lg, and --oj-c-border-radius-xl - shared corner radii
  • --oj-c-box-shadow-xs, --oj-c-box-shadow-sm, --oj-c-box-shadow-md, --oj-c-box-shadow-lg, and --oj-c-box-shadow-xl - shared shadows
  • --oj-c-boxshadow-shadowcolor - color value used to construct shared shadows

Typography Variables

Typography variables define font size, font weight, and line height for headings, subheadings, body text, and data visualization labels.

  • --oj-c-heading-*-font-size, --oj-c-heading-*-font-weight, and --oj-c-heading-*-line-height
  • --oj-c-subheading-*-font-size, --oj-c-subheading-*-font-weight, and --oj-c-subheading-*-line-height
  • --oj-c-body-*-font-size, --oj-c-body-*-font-weight-*, and --oj-c-body-*-line-height
  • --oj-c-label-sm-font-size, --oj-c-label-md-font-size, and --oj-c-label-lg-font-size

Motion, Scale, and Density Variables

Motion variables define timing, easing, anchor, slide, scale, and fade values. Scale and density variables define shared sizing units that many Core Pack component variables use.

  • --oj-c-duration-*, --oj-c-delay-*, and --oj-c-easing-* - animation timing
  • --oj-c-anchor-*, --oj-c-slide-*, --oj-c-scale-*, and --oj-c-fade-* - animation geometry and opacity values
  • --oj-c-size-units - base spacing and sizing unit
  • --oj-c-density-units - density adjustment unit

Core Pack also exposes document-level variables:

  • --oj-c-font-family and --oj-c-font-size - html font values
  • --oj-c-bg-color - body background color

Focus Variables

Keyboard focus variables define the shared outline color, style, and width used by Core Pack focus affordances.

  • --oj-c-keyboard-outline-color
  • --oj-c-keyboard-outline-style
  • --oj-c-keyboard-outline-width

Collection, Form, and Measure Variables

Shared collection variables are used by collection components and collection-like layouts. Shared form variables are used by text fields. Shared measure variables are used by measure and meter components.

  • --oj-c-collection-header-* and --oj-c-collection-grid-cell-surface-edit
  • --oj-c-textfield-surface-enabled and --oj-c-textfield-border-enabled
  • --oj-c-measure-track-*, --oj-c-measure-fill-*, --oj-c-measure-thumb-surface, and --oj-c-measure-reference-*

Data Visualization Variables

Data visualization variables define shared DVT palettes, status colors, labels, reference objects, marquee, overview, contrast line, and dimmed opacity values.

  • --oj-c-dvt-palette-qualitative-* - qualitative data visualization colors
  • --oj-c-dvt-threshold-* - threshold colors
  • --oj-c-dvt-reference-object-*, --oj-c-dvt-marquee-*, and --oj-c-dvt-overview-* - shared DVT interaction and reference values
  • --oj-c-dvt-contrast-line, --oj-c-label-*-font-size, and --oj-c-dimmed-opacity

Public Component Variables

Some components expose public component-scoped global variables. These variables are global CSS variables, but their names include the component name. The exact public variable names and selector dependencies are listed in the CSS Variables List. Private/internal variables, including variables with prefixes such as --oj-c-PRIVATE, are not supported for override usage.

  • --oj-c-date-picker-* - date picker component variables
  • --oj-c-dialog-* - dialog component variables
  • --oj-c-drawer-popup-* - drawer popup component variables
  • --oj-c-popup-* - popup component variables
  • --oj-c-rating-gauge-* - rating gauge component variables
  • --oj-c-meter-bar-* - meter bar component variables
  • --oj-c-meter-circle-* - meter circle component variables
  • --oj-c-conveyor-belt-* - conveyor belt component variables
  • --oj-c-switch-* - switch component variables
  • --oj-c-tab-bar-* - tab bar component variables
  • --oj-c-base-button-* - base button component variables
  • --oj-c-button-label-layout-* - button label layout component variables
  • --oj-c-menu-item-* - menu item component variables
  • --oj-c-menu-separator-* - menu separator component variables

Color Scheme

Themes can be displayed in light or dark mode. To apply custom light and dark color schemes, declare your CSS vars under the appropriate class names: 

 :root,
 .oj-c-colorscheme-light {
    --oj-c-palette-neutral-0: 255, 255, 255;
 }

 .oj-c-colorscheme-dark,
 .oj-color-invert {
   --oj-c-palette-neutral-0: 0, 0, 0;
  }
For default and light color mode, make your CSS var declaration with :root, .oj-c-colorscheme-light. For inverted color and dark color mode, make your CSS var declaration with .oj-c-colorscheme-dark, .oj-color-invert. Color-scheme dependent groups include palette, surface, page background, overlay, border, text/icon, text field, collection, measure, data visualization, and color-dependent public component variables.