JET CSS Variables

Oracle® JavaScript Extension Toolkit (JET)
10.1.0

F37996-01

Overview

CSS custom properties (aka CSS variables) are available in some CSS files in the Redwood theme. Details of the CSS files available are in the developer's guide, but to summarize.
  • oj-redwood.css, oj-redwood-min.css, oj-redwood-notag.css, oj-redwood-notag-min.css: these files include CSS variables.
  • oj-redwood-novars.css, oj-redwood-novars-min.css, oj-redwood-notag-novars.css, oj-redwood-notag-novars-min.css: these files do not include CSS variables. Certain features that require CSS variables are not supported. NOTE: these files will likely be removed in a future release.

Theming vs Styling

CSS Variables allow you to do both
  • Theming - meaning customize the look application wide by setting variables at the root level
  • Styling - meaning customize the look of a component instance by setting variables in a class
Theming example: if you want to theme buttons to be 4rem high by default you would assign the appropriate variable at the root level:

  :root {
    --oj-button-height: 4rem;
  }

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



Styling Example: if you only want certain buttons to be 4 rem high you would assign the appropriate variable in a class, like so:

  .demo-jumbo-button {
    --oj-button-height: 4rem;
  }

and then style particular buttons by applying that class where needed:

  <oj-button class="demo-jumbo-button"></button>

CSS Variables List


:root {

/* General information about variables is available at                               */
/* www.oracle.com/webfolder/technetwork/jet/jsdocs/CssVariablesOverview.html */


/* neutral palette            */
/* -------------------------- */
--oj-palette-neutral-rgb-0:    255, 255, 255;
--oj-palette-neutral-rgb-10:   251, 249, 248;
--oj-palette-neutral-rgb-20:   245, 244, 242;
--oj-palette-neutral-rgb-30:   241, 239, 237;
--oj-palette-neutral-rgb-40:   228, 225, 221;
--oj-palette-neutral-rgb-50:   212, 207, 202;
--oj-palette-neutral-rgb-60:   188, 182, 177;
--oj-palette-neutral-rgb-70:   174, 168, 162;
--oj-palette-neutral-rgb-80:   158, 152, 146;
--oj-palette-neutral-rgb-90:   139, 133, 128;
--oj-palette-neutral-rgb-100:  123, 117, 112;
--oj-palette-neutral-rgb-110:  111, 105, 100;
--oj-palette-neutral-rgb-120:  101, 95, 91;
--oj-palette-neutral-rgb-130:  92, 86, 81;
--oj-palette-neutral-rgb-140:  81, 76, 71;
--oj-palette-neutral-rgb-150:  71, 66, 62;
--oj-palette-neutral-rgb-160:  58, 54, 50;
--oj-palette-neutral-rgb-170:  49, 45, 42;
--oj-palette-neutral-rgb-180:  32, 30, 28;
--oj-palette-neutral-rgb-190:  22, 21, 19;
--oj-palette-neutral-rgb-200:  00, 00, 00;

/* brand palette              */
/* -------------------------- */
--oj-palette-brand-rgb-10:     247, 252, 243;
--oj-palette-brand-rgb-20:     237, 248, 230;
--oj-palette-brand-rgb-30:     229, 244, 220;
--oj-palette-brand-rgb-40:     208, 234, 193;
--oj-palette-brand-rgb-50:     189, 217, 174;
--oj-palette-brand-rgb-60:     163, 193, 148;
--oj-palette-brand-rgb-70:     148, 179, 130;
--oj-palette-brand-rgb-80:     130, 163, 114;
--oj-palette-brand-rgb-90:     111, 145, 93;
--oj-palette-brand-rgb-100:    95, 125, 79;
--oj-palette-brand-rgb-110:    87, 115, 70;
--oj-palette-brand-rgb-120:    79, 105, 63;
--oj-palette-brand-rgb-130:    70, 95, 56;
--oj-palette-brand-rgb-140:    61, 84, 49;
--oj-palette-brand-rgb-150:    53, 72, 42;
--oj-palette-brand-rgb-160:    43, 58, 33;
--oj-palette-brand-rgb-170:    37, 51, 29;

/* alert palettes             */
/* -------------------------- */
--oj-palette-danger-rgb-10:    255, 248, 247;
--oj-palette-danger-rgb-20:    255, 241, 239;
--oj-palette-danger-rgb-30:    255, 235, 232;
--oj-palette-danger-rgb-40:    255, 217, 211;
--oj-palette-danger-rgb-50:    255, 193, 184;
--oj-palette-danger-rgb-60:    255, 157, 144;
--oj-palette-danger-rgb-70:    255, 134, 117;
--oj-palette-danger-rgb-80:    254, 104, 84;
--oj-palette-danger-rgb-90:    236, 79, 58;
--oj-palette-danger-rgb-100:   214, 59, 37;
--oj-palette-danger-rgb-110:   195, 53, 34;
--oj-palette-danger-rgb-120:   179, 49, 31;
--oj-palette-danger-rgb-130:   170, 34, 34;
--oj-palette-danger-rgb-140:   143, 39, 25;
--oj-palette-danger-rgb-150:   124, 34, 22;
--oj-palette-danger-rgb-160:   102, 28, 18;
--oj-palette-danger-rgb-170:   86, 24, 15;

--oj-palette-warning-rgb-10:   254, 249, 242;
--oj-palette-warning-rgb-20:   253, 242, 229;
--oj-palette-warning-rgb-30:   252, 237, 220;
--oj-palette-warning-rgb-40:   249, 221, 188;
--oj-palette-warning-rgb-50:   246, 199, 146;
--oj-palette-warning-rgb-60:   240, 169, 87;
--oj-palette-warning-rgb-70:   235, 150, 50;
--oj-palette-warning-rgb-80:   225, 128, 18;
--oj-palette-warning-rgb-90:   198, 113, 14;
--oj-palette-warning-rgb-100:  172, 99, 12;
--oj-palette-warning-rgb-110:  156, 89, 11;
--oj-palette-warning-rgb-120:  143, 82, 10;
--oj-palette-warning-rgb-130:  129, 73, 9;
--oj-palette-warning-rgb-140:  114, 65, 8;
--oj-palette-warning-rgb-150:  99, 56, 7;
--oj-palette-warning-rgb-160:  81, 47, 6;
--oj-palette-warning-rgb-170:  69, 39, 5;

--oj-palette-success-rgb-10:   244, 252, 235;
--oj-palette-success-rgb-20:   235, 248, 222;
--oj-palette-success-rgb-30:   228, 245, 211;
--oj-palette-success-rgb-40:   207, 235, 179;
--oj-palette-success-rgb-50:   177, 221, 136;
--oj-palette-success-rgb-60:   138, 201, 79;
--oj-palette-success-rgb-70:   125, 186, 69;
--oj-palette-success-rgb-80:   111, 169, 57;
--oj-palette-success-rgb-90:   94, 148, 43;
--oj-palette-success-rgb-100:  80, 130, 35;
--oj-palette-success-rgb-110:  73, 118, 32;
--oj-palette-success-rgb-120:  67, 107, 29;
--oj-palette-success-rgb-130:  60, 96, 26;
--oj-palette-success-rgb-140:  53, 86, 23;
--oj-palette-success-rgb-150:  46, 73, 20;
--oj-palette-success-rgb-160:  38, 61, 16;
--oj-palette-success-rgb-170:  31, 51, 14;

--oj-palette-info-rgb-10:      246, 250, 252;
--oj-palette-info-rgb-20:      237, 246, 249;
--oj-palette-info-rgb-30:      228, 241, 247;
--oj-palette-info-rgb-40:      208, 229, 238;
--oj-palette-info-rgb-50:      180, 213, 225;
--oj-palette-info-rgb-60:      143, 191, 208;
--oj-palette-info-rgb-70:      121, 177, 198;
--oj-palette-info-rgb-80:      95, 162, 186;
--oj-palette-info-rgb-90:      65, 144, 172;
--oj-palette-info-rgb-100:     34, 126, 158;
--oj-palette-info-rgb-110:     14, 114, 151;
--oj-palette-info-rgb-120:     0, 104, 140;
--oj-palette-info-rgb-130:     2, 94, 126;
--oj-palette-info-rgb-140:     4, 83, 111;
--oj-palette-info-rgb-150:     6, 72, 95;
--oj-palette-info-rgb-160:     6, 60, 78;
--oj-palette-info-rgb-170:     5, 50, 66;


/* data visualization palette   */
/* ---------------------------- */
--oj-palette-dvt-rgb-1:      25, 95, 116;
--oj-palette-dvt-rgb-2:      50, 146, 94;
--oj-palette-dvt-rgb-3:      249, 183, 14;
--oj-palette-dvt-rgb-4:      160, 37, 145;
--oj-palette-dvt-rgb-5:      29, 154, 161;
--oj-palette-dvt-rgb-6:      53, 190, 116;
--oj-palette-dvt-rgb-7:      224, 128, 16;
--oj-palette-dvt-rgb-8:      158, 84, 192;
--oj-palette-dvt-rgb-9:      93, 187, 190;
--oj-palette-dvt-rgb-10:     243, 229, 59;
--oj-palette-dvt-rgb-11:     200, 78, 60;
--oj-palette-dvt-rgb-12:     67, 49, 130;


/* typography                 */
/* -------------------------- */
--oj-typography-heading-2xl-font-size:                     2.5rem;
--oj-typography-heading-2xl-font-weight:                   900;
--oj-typography-heading-2xl-line-height:                   1.3;

--oj-typography-heading-xl-font-size:                      2.25rem;
--oj-typography-heading-xl-font-weight:                    900;
--oj-typography-heading-xl-line-height:                    1.222;

--oj-typography-heading-lg-font-size:                      2rem;
--oj-typography-heading-lg-font-weight:                    900;
--oj-typography-heading-lg-line-height:                    1.25;

--oj-typography-heading-md-font-size:                      1.75rem;
--oj-typography-heading-md-font-weight:                    900;
--oj-typography-heading-md-line-height:                    1.2857;

--oj-typography-heading-sm-font-size:                      1.5rem;
--oj-typography-heading-sm-font-weight:                    900;
--oj-typography-heading-sm-line-height:                    1.3333;

--oj-typography-heading-xs-font-size:                      1.25rem;
--oj-typography-heading-xs-font-weight:                    900;
--oj-typography-heading-xs-line-height:                    1.4;


--oj-typography-subheading-2xl-font-size:                  2.25rem;
--oj-typography-subheading-2xl-font-weight:                bold;
--oj-typography-subheading-2xl-line-height:                1.2222;

--oj-typography-subheading-xl-font-size:                   2rem;
--oj-typography-subheading-xl-font-weight:                 bold;
--oj-typography-subheading-xl-line-height:                 1.25;

--oj-typography-subheading-lg-font-size:                   1.75rem;
--oj-typography-subheading-lg-font-weight:                 bold;
--oj-typography-subheading-lg-line-height:                 1.2857;

--oj-typography-subheading-md-font-size:                   1.5rem;
--oj-typography-subheading-md-font-weight:                 bold;
--oj-typography-subheading-md-line-height:                 1.3333;

--oj-typography-subheading-sm-font-size:                   1.25rem;
--oj-typography-subheading-sm-font-weight:                 bold;
--oj-typography-subheading-sm-line-height:                 1.4;

--oj-typography-subheading-xs-font-size:                   1rem;
--oj-typography-subheading-xs-font-weight:                 bold;
--oj-typography-subheading-xs-line-height:                 1.5;


--oj-typography-body-xl-font-size:                         1.25rem;
--oj-typography-body-xl-line-height:                       1.4;

--oj-typography-body-lg-font-size:                         1.125rem;
--oj-typography-body-lg-line-height:                       1.3333;

--oj-typography-body-md-font-size:                         1rem;
--oj-typography-body-md-line-height:                       1.25;

--oj-typography-body-sm-font-size:                         0.859rem;
--oj-typography-body-sm-line-height:                       1.2;

--oj-typography-body-xs-font-size:                         0.75rem;
--oj-typography-body-xs-line-height:                       1.3333;

--oj-typography-body-2xs-font-size:                        0.625rem;
--oj-typography-body-2xs-line-height:                      1.2;


/* text colors                */
/* -------------------------- */
--oj-core-text-color-primary:      rgb(var(--oj-palette-neutral-rgb-190));
--oj-core-text-color-secondary:    rgba(var(--oj-palette-neutral-rgb-190), .6);
--oj-core-text-color-disabled:     rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-core-text-color-brand:        rgb(var(--oj-palette-brand-rgb-110));
--oj-core-text-color-danger:       rgb(var(--oj-palette-danger-rgb-120));
--oj-core-text-color-warning:      rgb(var(--oj-palette-warning-rgb-120));
--oj-core-text-color-success:      rgb(var(--oj-palette-success-rgb-120));

/* state colors               */
/* -------------------------- */
--oj-core-bg-color-content:       rgb(var(--oj-palette-neutral-rgb-0));
--oj-core-bg-color-hover:         rgba(var(--oj-palette-neutral-rgb-190), .04);
--oj-core-bg-color-active:        rgba(var(--oj-palette-neutral-rgb-190), .06);
--oj-core-bg-color-selected:      rgb(var(--oj-palette-brand-rgb-30));
--oj-core-border-color-selected:  var(--oj-core-brand-2);
--oj-core-color-disabled-1:      rgba(var(--oj-palette-neutral-rgb-190), 0.05);
--oj-core-color-disabled-2:  rgba(var(--oj-palette-neutral-rgb-190),.1);

/* dividers                   */
/* -------------------------- */
--oj-core-divider-color:             rgba(var(--oj-palette-neutral-rgb-190),.1);
--oj-core-divider-margin:            0.5rem;

/* Focus Border color         */
/* -------------------------- */
--oj-core-focus-border-color:     rgb(var(--oj-palette-neutral-rgb-190));

/* color neutral              */
/* -------------------------- */
--oj-core-neutral-1:                      rgb(var(--oj-palette-neutral-rgb-100));
--oj-core-neutral-2:                      rgb(var(--oj-palette-neutral-rgb-110));
--oj-core-neutral-3:                      rgb(var(--oj-palette-neutral-rgb-120));
--oj-core-neutral-contrast:               rgb(var(--oj-palette-neutral-rgb-0));

/* color neutral secondary    */
/* -------------------------- */
--oj-core-neutral-secondary-1:            rgb(var(--oj-palette-neutral-rgb-30));
--oj-core-neutral-secondary-2:            rgb(var(--oj-palette-neutral-rgb-20));
--oj-core-neutral-secondary-3:            rgb(var(--oj-palette-neutral-rgb-10));
--oj-core-neutral-secondary-contrast:     rgb(var(--oj-palette-neutral-rgb-120));

/* color brand                */
/* -------------------------- */
--oj-core-brand-1:                      rgb(var(--oj-palette-brand-rgb-100));
--oj-core-brand-2:                      rgb(var(--oj-palette-brand-rgb-110));
--oj-core-brand-3:                      rgb(var(--oj-palette-brand-rgb-120));
--oj-core-brand-contrast:               rgb(var(--oj-palette-neutral-rgb-0));


/* color danger               */
/* -------------------------- */
--oj-core-danger-1:                      rgb(var(--oj-palette-danger-rgb-100));
--oj-core-danger-2:                      rgb(var(--oj-palette-danger-rgb-110));
--oj-core-danger-3:                      rgb(var(--oj-palette-danger-rgb-120));
--oj-core-danger-contrast:               rgb(var(--oj-palette-neutral-rgb-0));


/* color danger  secondary    */
/* -------------------------- */
--oj-core-danger-secondary-1:            rgb(var(--oj-palette-danger-rgb-30));
--oj-core-danger-secondary-2:            rgb(var(--oj-palette-danger-rgb-20));
--oj-core-danger-secondary-3:            rgb(var(--oj-palette-danger-rgb-10));
--oj-core-danger-secondary-contrast:     rgb(var(--oj-palette-danger-rgb-120));


/* color warning              */
/* -------------------------- */
--oj-core-warning-1:                    rgb(var(--oj-palette-warning-rgb-100));
--oj-core-warning-2:                    rgb(var(--oj-palette-warning-rgb-110));
--oj-core-warning-3:                    rgb(var(--oj-palette-warning-rgb-120));
--oj-core-warning-contrast:             rgb(var(--oj-palette-neutral-rgb-0));

/* color warning  secondary   */
/* -------------------------- */
--oj-core-warning-secondary-1:          rgb(var(--oj-palette-warning-rgb-30));
--oj-core-warning-secondary-2:          rgb(var(--oj-palette-warning-rgb-20));
--oj-core-warning-secondary-3:          rgb(var(--oj-palette-warning-rgb-10));
--oj-core-warning-secondary-contrast:   rgb(var(--oj-palette-warning-rgb-120));


/* color success              */
/* -------------------------- */
--oj-core-success-1:                    rgb(var(--oj-palette-success-rgb-100));
--oj-core-success-2:                    rgb(var(--oj-palette-success-rgb-110));
--oj-core-success-3:                    rgb(var(--oj-palette-success-rgb-120));
--oj-core-success-contrast:             rgb(var(--oj-palette-neutral-rgb-0));


/* color success secondary    */
/* -------------------------- */
--oj-core-success-secondary-1:          rgb(var(--oj-palette-success-rgb-30));
--oj-core-success-secondary-2:          rgb(var(--oj-palette-success-rgb-20));
--oj-core-success-secondary-3:          rgb(var(--oj-palette-success-rgb-10));
--oj-core-success-secondary-contrast:   rgb(var(--oj-palette-success-rgb-120));


/* color info                 */
/* -------------------------- */
--oj-core-info-1:                    rgb(var(--oj-palette-info-rgb-100));
--oj-core-info-2:                    rgb(var(--oj-palette-info-rgb-110));
--oj-core-info-3:                    rgb(var(--oj-palette-info-rgb-120));
--oj-core-info-contrast:             rgb(var(--oj-palette-neutral-rgb-0));


/* color info secondary       */
/* -------------------------- */
--oj-core-info-secondary-1:          rgb(var(--oj-palette-info-rgb-30));
--oj-core-info-secondary-2:          rgb(var(--oj-palette-info-rgb-20));
--oj-core-info-secondary-3:          rgb(var(--oj-palette-info-rgb-10));
--oj-core-info-secondary-contrast:   rgb(var(--oj-palette-info-rgb-120));


/* drag and drop              */
/* -------------------------- */
--oj-core-drag-drop-color-1:       rgb(var(--oj-palette-brand-rgb-40));
--oj-core-drag-drop-color-2:       rgb(var(--oj-palette-brand-rgb-100));
--oj-core-drag-drop-line-color:    rgb(var(--oj-palette-brand-rgb-100));

/* icon                       */
/* -------------------------- */
--oj-core-icon-size-lg:              1.5rem;
--oj-core-icon-size-sm:              1rem;

/* touch target               */
/* -------------------------- */
--oj-core-touch-target-min-size:    2.25rem;

/* Cursor                     */
/* -------------------------- */
--oj-core-cursor-clickable:      pointer;

/* border-radius              */
/* -------------------------- */
--oj-core-border-radius-sm:                2px;
--oj-core-border-radius-md:               .25rem;
--oj-core-border-radius-lg:               .375rem;
--oj-core-border-radius-xl:               .5rem;

/* box shadow                 */
/* -------------------------- */
--oj-core-box-shadow-rgb:     var(--oj-palette-neutral-rgb-200);
--oj-core-box-shadow-sm:      0px 2px  4px   0px    rgba(var(--oj-core-box-shadow-rgb),.1);
--oj-core-box-shadow-md:      0px 15px 32px -10px   rgba(var(--oj-core-box-shadow-rgb),.3);
--oj-core-box-shadow-lg:      0px 16px 44px -12px   rgba(var(--oj-core-box-shadow-rgb),0.4);

/* a dropdown is a popup that drops down from a component, for example a menu or select popup */
--oj-core-dropdown-box-shadow:  var(--oj-core-box-shadow-md);

/* overlay scrim              */
/* -------------------------- */

/* this is used for something like a modal dialog to overlay the
/* rest of the screen, indicating it's not reachable */
--oj-core-scrim-color:   rgba(var(--oj-palette-neutral-rgb-190), .4);

/* spacing                    */
/* -------------------------- */
--oj-core-spacing-1x:                  .25rem;
--oj-core-spacing-2x:                  .5rem;
--oj-core-spacing-3x:                  .75rem;
--oj-core-spacing-4x:                  1rem;
--oj-core-spacing-5x:                  1.25rem;
--oj-core-spacing-6x:                  1.5rem;
--oj-core-spacing-7x:                  1.75rem;
--oj-core-spacing-8x:                  2rem;
--oj-core-spacing-9x:                  2.25rem;
--oj-core-spacing-10x:                 2.5rem;
--oj-core-spacing-11x:                 2.75rem;
--oj-core-spacing-12x:                 3rem;



/* z-index                    */
/* -------------------------- */
--oj-core-z-index-popup:                   1000;
--oj-core-z-index-dialog:                  1050;
--oj-core-z-index-messages:                2000;



/* scrollbar                  */
/* -------------------------- */
--oj-scrollbar-thumb-color-hover:rgba(var(--oj-palette-neutral-rgb-170), .15);
--oj-scrollbar-track-color-force:   rgba(var(--oj-palette-neutral-rgb-170), .05);



/* animation                  */
/* -------------------------- */
--oj-animation-duration-xshort:      0.1s;
--oj-animation-duration-short:       0.15s;
--oj-animation-duration-medium:      0.2s;
--oj-animation-duration-long:        0.3s;
--oj-animation-duration-xlong:       0.5s;

--oj-animation-ease-in-out:          cubic-bezier(0.4, 0, 0.2, 1);
--oj-animation-ease-out:             cubic-bezier(0, 0, 0.2, 1);
--oj-animation-ease-in:              cubic-bezier(0.4, 0, 1, 1);

--oj-animation-effect-ripple-bg-color: rgb(var(--oj-palette-neutral-rgb-160));

--oj-animation-skeleton-bg-start-color:  rgba(var(--oj-palette-neutral-rgb-170), 0.05);
--oj-animation-skeleton-bg-end-color: rgba(var(--oj-palette-neutral-rgb-170), 0.15);


/* html tag                   */
/* -------------------------- */

/*-----------------------------------------------------------------------------*/
/* To target popular system fonts consider using the following for --oj-html-font-family
/*    system, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif
/*
/* Details:
/*   * -apple-system targets San Francisco on Mac and ios systems that support it.
/*   * BlinkMacSystemFont targets San Francisco for Chrome on Mac OS X.
/*   * Segoe UI targets Windows and Windows Phone.
/*   * Helvetica Neue targets iOS pre-iOS9 and Mac OS X pre-El Capitan.
/*   * Arial targets Roboto on Android
/*   * sans-serif is the default sans-serif fallback font.
/*-----------------------------------------------------------------------------*/
--oj-html-font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;


/*-----------------------------------------------------------------------------*/
/* font size set on the html element. It's recommended that you use em units,
/* this allows the user's browser font size adjustments to be reflected on the page.
/* The browser default font size is 16px, so for example for 16px use 1em,
/* for 14px use .875em.
/*
/* JET generally uses rem instead of px which means that when you change
/* the html element font size components adjust proportionately.
/*-----------------------------------------------------------------------------*/
--oj-html-font-size:   1em;


/* body tag                   */
/* -------------------------- */
--oj-body-bg-color:                   rgb(var(--oj-palette-neutral-rgb-10));


/* headings                   */
/* -------------------------- */
--oj-heading-text-color:                       var(--oj-core-text-color-primary);
--oj-heading-margin-bottom:                   1rem;
--oj-heading-margin-top:                      1rem;
--oj-subheading-margin-top:                   0;
--oj-subheading-margin-bottom:                0.75rem;

/* paragraph                  */
/* -------------------------- */
--oj-paragraph-margin-bottom:                1rem;


/* list                       */
/* -------------------------- */
--oj-list-margin-top:                   0.5rem;
--oj-list-nested-padding-start:         2.5rem;
--oj-list-item-line-height:             1.5;
--oj-list-unordered-style-type:         square;

/* link                       */
/* -------------------------- */

/* default*/
--oj-link-text-decoration:              none;
--oj-link-text-decoration-hover:        underline;

--oj-link-text-color:                 rgb(var(--oj-palette-info-rgb-120));


/* active */
--oj-link-text-color-active:          var(--oj-link-text-color);

/* visited */
--oj-link-text-color-visited:         var(--oj-link-text-color);


/*-----------------------------------------------------------------------------*/
/* there are 2 classes you can add to links
/*    1. oj-link-embedded - these are links embedded in paragraph text.
/*          For embedded links use the text-decoration vars if you want
/*          the line close to the text, or use border-bottom-width vars
/*          if you want the line further from the text
/*
/*    2. oj-link-standalone - links that are on their own, stand alone links use
/*          borders which are only shown on hover.
/*-----------------------------------------------------------------------------*/
--oj-link-embedded-text-decoration:              none;
--oj-link-embedded-text-decoration-hover:        none;

--oj-link-embedded-border-bottom-width:          1px;
--oj-link-embedded-border-bottom-width-hover:    0px;




/* button                     */
/* -------------------------- */

/* default buttons */
--oj-button-height:                2.75rem;
--oj-button-border-radius:        var(--oj-core-border-radius-md);
--oj-button-font-size:              var(--oj-typography-body-sm-font-size);
--oj-button-font-weight:          600;
--oj-button-icon-size:         1.5rem;
--oj-button-text-to-edge-padding:      1rem;
--oj-button-icon-to-text-padding:       .625rem;
--oj-button-icon-to-edge-padding:       .625rem;


/* small buttons */
--oj-button-sm-height:             2.25rem;
--oj-button-sm-font-size:           var(--oj-typography-body-sm-font-size);
--oj-button-sm-icon-size:      1.25rem;
--oj-button-sm-text-to-edge-padding:   1rem;
--oj-button-sm-icon-to-text-padding:    .5rem;
--oj-button-sm-icon-to-edge-padding:    .5rem;


/* large buttons */
--oj-button-lg-height:             3.25rem;
--oj-button-lg-font-size:           var(--oj-typography-body-sm-font-size);
--oj-button-lg-icon-size:      1.5rem;
--oj-button-lg-text-to-edge-padding:   1.5rem;
--oj-button-lg-icon-to-text-padding:    1rem;
--oj-button-lg-icon-to-edge-padding:    1rem;



/* solid */

/* solid enabled */
--oj-button-solid-chrome-bg-color:                      rgba(var(--oj-palette-neutral-rgb-190),.08);
--oj-button-solid-chrome-border-color:                  transparent;
--oj-button-solid-chrome-text-color:                    var(--oj-core-text-color-primary);

/* solid hover */
--oj-button-solid-chrome-bg-color-hover:                rgba(var(--oj-palette-neutral-rgb-190),.12);
--oj-button-solid-chrome-border-color-hover:            transparent;
--oj-button-solid-chrome-text-color-hover:              var(--oj-core-text-color-primary);

/* solid active */
--oj-button-solid-chrome-bg-color-active:               rgba(var(--oj-palette-neutral-rgb-190),.16);
--oj-button-solid-chrome-border-color-active:           transparent;
--oj-button-solid-chrome-text-color-active:             var(--oj-core-text-color-primary);


/* solid selected */
--oj-button-solid-chrome-bg-color-selected:             var(--oj-button-solid-chrome-bg-color);
--oj-button-solid-chrome-border-color-selected:         var(--oj-button-solid-chrome-border-color);
--oj-button-solid-chrome-text-color-selected:           var(--oj-button-solid-chrome-text-color);

/* solid selected hover */
--oj-button-solid-chrome-text-color-selected-hover:     var(--oj-button-solid-chrome-text-color-active);
--oj-button-solid-chrome-bg-color-selected-hover:       var(--oj-button-solid-chrome-bg-color-active);
--oj-button-solid-chrome-border-color-selected-hover:   var(--oj-button-solid-chrome-border-color-active);

/* solid disabled */
--oj-button-solid-chrome-bg-color-disabled:             var(--oj-core-color-disabled-1);
--oj-button-solid-chrome-border-color-disabled:         transparent;
--oj-button-solid-chrome-text-color-disabled:           var(--oj-core-text-color-disabled);


/* solid selected disabled */
--oj-button-solid-chrome-bg-color-selected-disabled:     rgba(var(--oj-palette-neutral-rgb-100), .3);
--oj-button-solid-chrome-border-color-selected-disabled: transparent;
--oj-button-solid-chrome-text-color-selected-disabled:   var(--oj-core-text-color-disabled);




/* borderless chrome enabled */
--oj-button-borderless-chrome-text-color:        var(--oj-core-text-color-primary);

/* borderless chrome hover */
--oj-button-borderless-chrome-bg-color-hover:        var(--oj-core-bg-color-hover);
--oj-button-borderless-chrome-border-color-hover:    transparent;
--oj-button-borderless-chrome-text-color-hover:      var(--oj-core-text-color-primary);

/* borderless chrome active */
--oj-button-borderless-chrome-bg-color-active:       var(--oj-core-bg-color-active);
--oj-button-borderless-chrome-border-color-active:   transparent;
--oj-button-borderless-chrome-text-color-active:     var(--oj-core-text-color-primary);


/* borderless chrome selected */
--oj-button-borderless-chrome-bg-color-selected:     transparent;
--oj-button-borderless-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-borderless-chrome-text-color-selected:   var(--oj-core-text-color-primary);

/* borderless chrome selected hover */
--oj-button-borderless-chrome-bg-color-selected-hover:     var(--oj-core-bg-color-hover);
--oj-button-borderless-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-borderless-chrome-text-color-selected-hover:   var(--oj-core-text-color-primary);

/* borderless chrome disabled */
--oj-button-borderless-chrome-text-color-disabled:   var(--oj-core-text-color-disabled);


/* borderless chrome selected disabled */
--oj-button-borderless-chrome-bg-color-selected-disabled:     transparent;
--oj-button-borderless-chrome-border-color-selected-disabled: var(--oj-core-color-disabled-2);
--oj-button-borderless-chrome-text-color-selected-disabled:   var(--oj-core-text-color-disabled);



/* outlined enabled */
--oj-button-outlined-chrome-border-color:          rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-outlined-chrome-text-color:            var(--oj-core-text-color-primary);
--oj-button-outlined-chrome-bg-color:              transparent;

/* outlined hover */
--oj-button-outlined-chrome-bg-color-hover:        var(--oj-core-bg-color-hover);
--oj-button-outlined-chrome-border-color-hover:    rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-outlined-chrome-text-color-hover:      var(--oj-core-text-color-primary);

/* outlined active */
--oj-button-outlined-chrome-bg-color-active:       var(--oj-core-bg-color-active);
--oj-button-outlined-chrome-border-color-active:   rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-outlined-chrome-text-color-active:     var(--oj-core-text-color-primary);


/* outlined selected */
--oj-button-outlined-chrome-bg-color-selected:     transparent;
--oj-button-outlined-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-outlined-chrome-text-color-selected:   var(--oj-core-text-color-primary);

/* outlined selected hover */
--oj-button-outlined-chrome-bg-color-selected-hover:    var(--oj-core-bg-color-hover);
--oj-button-outlined-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-190), .3);
--oj-button-outlined-chrome-text-color-selected-hover:   var(--oj-core-text-color-primary);

/* outlined disabled */
--oj-button-outlined-chrome-border-color-disabled: var(--oj-core-text-color-disabled);
--oj-button-outlined-chrome-text-color-disabled:   var(--oj-core-text-color-disabled);
--oj-button-outlined-chrome-bg-color-disabled:     transparent;


/* outlined selected disabled */
--oj-button-outlined-chrome-bg-color-selected-disabled:     transparent;
--oj-button-outlined-chrome-border-color-selected-disabled: var(--oj-button-outlined-chrome-border-color-disabled);
--oj-button-outlined-chrome-text-color-selected-disabled:   var(--oj-core-text-color-disabled);

/* cta enabled */
--oj-button-call-to-action-chrome-bg-color:                      rgb(var(--oj-palette-neutral-rgb-170));
--oj-button-call-to-action-chrome-border-color:                  transparent;
--oj-button-call-to-action-chrome-text-color:                    var(--oj-core-neutral-contrast);

/* cta hover */
--oj-button-call-to-action-chrome-bg-color-hover:                rgb(var(--oj-palette-neutral-rgb-160));
--oj-button-call-to-action-chrome-border-color-hover:            transparent;
--oj-button-call-to-action-chrome-text-color-hover:              var(--oj-core-neutral-contrast);

/* cta active */
--oj-button-call-to-action-chrome-bg-color-active:               rgb(var(--oj-palette-neutral-rgb-150));
--oj-button-call-to-action-chrome-border-color-active:           transparent;
--oj-button-call-to-action-chrome-text-color-active:             var(--oj-core-neutral-contrast);





/* buttonset                     */
/* ----------------------------- */
--oj-buttonset-outlined-chrome-internal-border-color:                   var(--oj-button-outlined-chrome-border-color);
--oj-buttonset-outlined-chrome-internal-border-color-active:            var(--oj-button-outlined-chrome-border-color);
--oj-buttonset-outlined-chrome-internal-border-color-selected:          var(--oj-button-outlined-chrome-border-color);
--oj-buttonset-outlined-chrome-internal-border-color-selected-disabled: var(--oj-core-color-disabled-1);

/* toolbar                    */
/* -------------------------- */
--oj-toolbar-button-margin:.5rem;
--oj-toolbar-borderless-button-margin:.25rem;
--oj-toolbar-separator-margin:.5rem;



/* menu */
/* -------------------------- */
--oj-menu-icon-size:                      1.5rem;
--oj-menu-icon-to-edge-padding:           1rem;
--oj-menu-text-to-start-icon-padding:     1rem;
--oj-menu-text-to-end-icon-padding:       2rem;
--oj-menu-text-to-edge-padding:           1rem;
--oj-menu-divider-margin:                 var(--oj-core-spacing-2x) 0;

/* menu item */
--oj-menu-item-text-color:                var(--oj-core-text-color-primary);
--oj-menu-icon-color:                     var(--oj-core-text-color-primary);

/* menu sheet */

/* on a phone the menu displays as a sheet, aka 'action sheet',
/* see the doc for open-options.display in the menu doc */
--oj-menu-sheet-margin-horizontal:        0px;


/* label                      */
/* -------------------------- */
--oj-label-font-size:     var(--oj-typography-body-sm-font-size);
--oj-label-font-weight:   600;
--oj-label-line-height:   var(--oj-typography-body-sm-line-height);

--oj-label-color:         var(--oj-core-text-color-secondary);
--oj-label-color-disabled:              var(--oj-core-text-color-disabled);
--oj-label-required-char-font-size:  0.9rem;
--oj-label-required-icon-color: rgb(var(--oj-palette-brand-rgb-110));

--oj-label-inside-edge-font-size:       var(--oj-typography-body-xs-font-size);
--oj-label-inside-edge-font-weight:     600;
--oj-label-inside-edge-line-height:     var(--oj-typography-body-xs-line-height);
--oj-label-inside-edge-position-top:    0.325rem;


/* form Controls              */
/* -------------------------- */
--oj-form-control-font-weight-read-only:  normal;


/* text fields                */
/* -------------------------- */
/*   Text fields allow users to input, edit,
/*   and select text. These variables are used by
/*   oj-input-date
/*   oj-input-date-time
/*   oj-input-number
/*   oj-input-password
/*   oj-input-search
/*   oj-input-text
/*   oj-input-time
/*   oj-combobox-many
/*   oj-combobox-one
/*   oj-select-single
/*   oj-select-many
/*   oj-select-one          */

--oj-text-field-border-radius:       var(--oj-core-border-radius-md);
--oj-text-field-border-width:    1px;

--oj-text-field-icon-to-text-padding: var(--oj-core-spacing-3x);
--oj-text-field-icon-to-edge-padding: var(--oj-core-spacing-3x);
--oj-text-field-text-to-edge-padding: var(--oj-core-spacing-3x);

--oj-text-field-text-align: start;

--oj-text-field-height:              2.75rem;
--oj-text-field-font-size:        var(--oj-typography-body-md-font-size);

/* enabled */
--oj-text-field-bg-color:               rgb(var(--oj-palette-neutral-rgb-0));
--oj-text-field-border-color:           rgba(var(--oj-palette-neutral-rgb-190),.3);
--oj-text-field-placeholder-color:      var(--oj-core-text-color-secondary);
--oj-text-field-placeholder-font-style: normal;
--oj-text-field-text-color:      var(--oj-core-text-color-primary);

/* focus */
--oj-text-field-border-color-focus:        rgb(var(--oj-palette-brand-rgb-110));

/* disabled */
--oj-text-field-bg-color-disabled:      rgba(var(--oj-palette-neutral-rgb-0),.3);
--oj-text-field-border-color-disabled:  var(--oj-core-color-disabled-2);
--oj-text-field-text-color-disabled:   var(--oj-core-text-color-disabled);

/* inside edge */
--oj-text-field-inside-edge-height:                  3.25rem;

/* padding between the border and the actual input element,
/* the inside edge label sits over this padding */
--oj-text-field-inside-edge-padding-top:             0.875rem;

--oj-text-field-inside-edge-label-color-error:       var(--oj-core-danger-1);
--oj-text-field-inside-edge-label-color-warning:     var(--oj-core-warning-1);
--oj-text-field-inside-edge-label-color-focus:       var(--oj-core-brand-2);

/* by default the text field width and max width is 100%,
/* these variables are used in the classes
/* .oj-form-control-max-width-sm, .oj-form-control-max-width-md,
/* .oj-form-control-width-sm, .oj-form-control-width-md */
--oj-text-field-sm-width: calc(var(--oj-form-layout-column-max-width)/2);
--oj-text-field-md-width: var(--oj-form-layout-column-max-width);



/* user assistance           */
/*-------------------------- */
/* user Assistance */
--oj-user-assistance-inline-text-color: var(--oj-core-text-color-secondary);
--oj-user-assistance-inline-font-size: var(--oj-typography-body-xs-font-size);



/* listbox                   */
/*-------------------------- */

/* a listbox is a dropdown used in select and combobox */
--oj-listbox-item-padding-horizontal:  var(--oj-text-field-text-to-edge-padding);


/* date picker     */
/*-----------------*/
--oj-date-picker-cell-font-size:               var(--oj-typography-body-sm-font-size);
--oj-date-picker-cell-border-color-today:      rgb(var(--oj-palette-neutral-rgb-160));


/* radioset/checkboxset      */
/*-------------------------- */
--oj-radio-checkbox-width:                     auto;
--oj-radio-checkbox-row-height:                2.25rem;

--oj-radio-checkbox-input-size:                1rem;
--oj-radio-checkbox-input-color-unselected:    rgb(var(--oj-palette-neutral-rgb-190));
--oj-radio-checkbox-input-color-selected:      rgb(var(--oj-palette-neutral-rgb-190));

--oj-radio-checkbox-label-to-edge-padding:     0;
--oj-radio-checkbox-input-to-label-padding:    0.5rem;
--oj-radio-checkbox-input-to-edge-padding:     0;

--oj-radio-checkbox-item-divider-color:        transparent;

--oj-radio-checkbox-input-transform-active:    scale(0.75);
--oj-radio-checkbox-item-bg-color-active:      transparent;



/* slider                     */
/* -------------------------- */

--oj-slider-thumb-width:                 1.25rem;
--oj-slider-thumb-height:                1.25rem;
--oj-slider-thumb-border-radius:         var(--oj-core-border-radius-lg);
--oj-slider-thumb-border-width:          0.125rem;

--oj-slider-track-thickness:             2px;

/* enabled */
--oj-slider-thumb-bg-color:              rgb(var(--oj-palette-neutral-rgb-10));
--oj-slider-thumb-border-color:          rgb(var(--oj-palette-neutral-rgb-190));

--oj-slider-track-bg-color:              rgba(var(--oj-palette-neutral-rgb-170), 0.15);
--oj-slider-value-bg-color:              rgb(var(--oj-palette-neutral-rgb-180));

/* hover */
--oj-slider-thumb-bg-color-hover:        rgb(var(--oj-palette-neutral-rgb-30));

/* active */
--oj-slider-thumb-bg-color-active:       rgb(var(--oj-palette-neutral-rgb-40));
--oj-slider-thumb-border-color-active:   rgb(var(--oj-palette-neutral-rgb-190));
--oj-slider-thumb-scale-active:          1;

/* disabled */
--oj-slider-thumb-bg-color-disabled:     rgb(var(--oj-palette-neutral-rgb-0));
--oj-slider-thumb-border-color-disabled: var(--oj-core-text-color-disabled);

--oj-slider-track-bg-color-disabled:     var(--oj-core-color-disabled-2);
--oj-slider-value-bg-color-disabled:     var(--oj-core-text-color-disabled);



/* switch                   */
/*------------------------- */

--oj-switch-track-height:                         1.25rem;
--oj-switch-track-width:                          2.25rem;
--oj-switch-track-border-radius:                  var(--oj-core-border-radius-lg);

--oj-switch-thumb-to-track-horizontal-margin:     0.0625rem;


/* enabled off */
--oj-switch-track-bg-color:                       rgb(var(--oj-palette-neutral-rgb-90));
--oj-switch-track-border-color:                   transparent;

--oj-switch-thumb-bg-color:                       rgb(var(--oj-palette-neutral-rgb-0));
--oj-switch-thumb-border-color:                   rgb(var(--oj-palette-neutral-rgb-0));
--oj-switch-thumb-height:                         calc(var(--oj-switch-track-height) - 0.25rem);
--oj-switch-thumb-width:                          var(--oj-switch-thumb-height);
--oj-switch-thumb-border-radius:                  var(--oj-core-border-radius-md);
--oj-switch-thumb-box-shadow:                     0px 0.125rem 0.25rem 0px rgba(var(--oj-core-box-shadow-rgb),.1);

/* selected (on) */
--oj-switch-track-bg-color-selected:              rgb(var(--oj-palette-brand-rgb-100));
--oj-switch-track-border-color-selected:          rgb(var(--oj-palette-brand-rgb-100));

--oj-switch-thumb-bg-color-selected:              rgb(var(--oj-palette-neutral-rgb-0));
--oj-switch-thumb-border-color-selected:          rgb(var(--oj-palette-neutral-rgb-0));
--oj-switch-thumb-box-shadow-selected:            var(--oj-switch-thumb-box-shadow);

/* hover (off) */
--oj-switch-track-bg-color-hover:                 rgba(var(--oj-palette-neutral-rgb-170),.6);
--oj-switch-track-border-color-hover:             transparent;

--oj-switch-thumb-bg-color-hover:                 rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-border-color-hover:             rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-box-shadow-hover:               none;

/* selected hover (on) */
--oj-switch-track-bg-color-selected-hover:        var(--oj-core-brand-2);
--oj-switch-track-border-color-selected-hover:    var(--oj-core-border-color-selected);

--oj-switch-thumb-bg-color-selected-hover:        rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-border-color-selected-hover:    rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-box-shadow-selected-hover:      none;


/* active (off) */
--oj-switch-track-bg-color-active:                rgba(var(--oj-palette-neutral-rgb-170), 0.68);
--oj-switch-track-border-color-active:            transparent;

--oj-switch-thumb-bg-color-active:                rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-border-color-active:            rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-box-shadow-active:              none;
--oj-switch-thumb-width-active:                   var(--oj-switch-thumb-width);

/* selected active (on) */
--oj-switch-track-bg-color-selected-active:       rgb(var(--oj-palette-brand-rgb-120));
--oj-switch-track-border-color-selected-active:   rgb(var(--oj-palette-brand-rgb-120));

--oj-switch-thumb-bg-color-selected-active:       rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-border-color-selected-active:   rgb(var(--oj-palette-neutral-rgb-10));
--oj-switch-thumb-box-shadow-selected-active:     none;

/* disabled (off) */
--oj-switch-track-bg-color-disabled:              var(--oj-core-color-disabled-1);
--oj-switch-track-border-color-disabled:          transparent;

--oj-switch-thumb-bg-color-disabled:              var(--oj-core-color-disabled-2);
--oj-switch-thumb-border-color-disabled:          transparent;


/* selected disabled (on) */
--oj-switch-track-bg-color-selected-disabled:     var(--oj-core-color-disabled-1);
--oj-switch-track-border-color-selected-disabled: transparent;

--oj-switch-thumb-bg-color-selected-disabled:     var(--oj-core-color-disabled-2);
--oj-switch-thumb-border-color-selected-disabled: transparent;




/* color palette                */
/* ---------------------------- */
--oj-color-palette-swatch-inner-border-color:          rgb(var(--oj-palette-neutral-rgb-170));
--oj-color-palette-swatch-outer-border-color-selected: rgb(var(--oj-palette-neutral-rgb-190));
--oj-color-palette-border-radius:                      50%;
--oj-color-palette-swatch-margin:                      1px;
--oj-color-palette-grid-font-size:                     var(--oj-typography-body-xs-font-size);



/* color spectrum */
/* ---------------------------- */
--oj-color-spectrum-border-color:                rgb(var(--oj-palette-neutral-rgb-50));


/* form Layout                */
/* -------------------------- */
--oj-form-layout-horizontal-margin:                     0px;
--oj-form-layout-margin-bottom:                         .875rem;

--oj-form-layout-divider-width:                         0;
--oj-form-layout-divider-margin:                        0;

--oj-form-layout-start-edge-column-min-width:          22rem;
--oj-form-layout-start-edge-column-max-width:          37.5rem;
--oj-form-layout-column-min-width:                      18rem;
--oj-form-layout-column-max-width:                      28rem;

--oj-form-layout-column-gutter:                         1.5rem;

--oj-form-layout-top-edge-label-to-value-padding: 0.5rem;

--oj-form-layout-start-edge-label-text-align: end;
--oj-form-layout-start-edge-value-text-align: start;
--oj-form-layout-start-edge-label-to-value-padding: 1.5rem;


/* collections
/*   These variables are used by
/*    oj-table
/*    oj-data-grid
/*    oj-list-view
/* ---------------------------- */

/*  --oj-collection-list* variables are for list view and table when display=list */
--oj-collection-list-row-height:                         3rem;
--oj-collection-list-cell-padding-vertical:              0.75rem;


/*  --oj-collection-grid* variables are for data grid and table when display=grid */
--oj-collection-grid-row-height:                         2.375rem;
--oj-collection-grid-header-height:                      2.25rem;
--oj-collection-grid-cell-padding:                       .5rem;


--oj-collection-bg-color:                                rgb(var(--oj-palette-neutral-rgb-0));
--oj-collection-border-color:                            rgba(var(--oj-palette-neutral-rgb-190), .1);
--oj-collection-free-space-bg-color:                     rgb(var(--oj-palette-neutral-rgb-0));
--oj-collection-default-sort-icon-display:               block;
--oj-collection-cell-banded-bg-color:                    rgb(var(--oj-palette-neutral-rgb-10));

/* headers */
--oj-collection-header-font-size:                        var(--oj-typography-body-xs-font-size);
--oj-collection-header-font-weight:                      normal;

/* enabled */
--oj-collection-header-bg-color:                         rgb(var(--oj-palette-neutral-rgb-0));
--oj-collection-header-text-color:                       var(--oj-core-text-color-secondary);

/* hover */
--oj-collection-header-bg-color-hover:                   var(--oj-core-bg-color-hover);

/* selected */
--oj-collection-header-bg-color-selected:                var(--oj-core-bg-color-selected);



/* editable */
--oj-collection-editable-cell-border-color-focus:        rgb(var(--oj-palette-brand-rgb-110));
--oj-collection-editable-cell-bg-color-read-only:        var(--oj-core-bg-color-hover);



/* data grid                  */
/* -------------------------- */
--oj-data-grid-column-width:                    6.25rem;



/* list view                  */
/* -------------------------- */

--oj-list-view-item-padding-horizontal: 1rem;

--oj-list-view-group-header-bg-color:          transparent;
--oj-list-view-group-header-bg-color-sticky:   rgb(var(--oj-palette-neutral-rgb-30));
--oj-list-view-group-header-font-weight:  var(--oj-typography-subheading-xs-font-weight);
--oj-list-view-group-header-font-size:    var(--oj-typography-subheading-xs-font-size);
--oj-list-view-group-header-line-height:  var(--oj-typography-subheading-xs-line-height);



/* table                        */
/* ---------------------------- */
--oj-table-cell-padding-horizontal:             1rem;



/* tree view                    */
/* ---------------------------- */
--oj-tree-view-row-height:                      2.5rem;
--oj-tree-view-text-color:                      var(--oj-core-text-color-primary);
--oj-tree-view-indent-width:                    1.5rem;


/* indexer                    */
/* -------------------------- */
--oj-indexer-text-color:            var(--oj-core-text-color-primary);
--oj-indexer-font-size:             var(--oj-typography-body-sm-font-size);


/* refresher                  */
/* -------------------------- */
--oj-refresher-bg-color:           rgb(var(--oj-palette-neutral-rgb-40));



/* panel                     */
/*-------------------------- */
--oj-panel-padding:                   var(--oj-core-spacing-2x);
--oj-panel-border-radius:             var(--oj-core-border-radius-lg);
--oj-panel-bg-color:                  var(--oj-core-bg-color-content);
--oj-panel-border-color:              var(--oj-core-divider-color);
--oj-panel-gutter:                    var(--oj-core-spacing-4x);


/* action card               */
/*-------------------------- */
--oj-action-card-scale-hover: 1.02;


/* badge                      */
/* -------------------------- */
--oj-badge-height: 1.5rem;
--oj-badge-border-radius: var(--oj-core-border-radius-lg);

--oj-badge-bg-color: var(--oj-core-neutral-1);
--oj-badge-text-color: var(--oj-core-neutral-contrast);

--oj-badge-font-size: 0.6875rem;
--oj-badge-font-weight: 700;
--oj-badge-font-stretch: condensed;


/* avatar                     */
/* -------------------------- */
--oj-avatar-bg-color:                       rgb(var(--oj-palette-neutral-rgb-130));
--oj-avatar-text-color:                     var(--oj-core-neutral-contrast);
--oj-avatar-pattern-display:                block;

--oj-avatar-size:                        4.5rem;
--oj-avatar-border-radius:               var(--oj-core-border-radius-md);
--oj-avatar-initials-font-size:          var(--oj-typography-heading-lg-font-size);
--oj-avatar-initials-font-weight:        lighter;



/* conveyor belt               */
/* -------------------------- */
--oj-conveyor-belt-box-shadow-width: 0.25rem;


/* popup                      */
/* -------------------------- */

--oj-popup-bg-color:                 rgb(var(--oj-palette-neutral-rgb-0));
--oj-popup-border-color:             var(--oj-core-divider-color);
--oj-popup-border-radius:            var(--oj-core-border-radius-sm);
--oj-popup-box-shadow:               var(--oj-core-box-shadow-sm);
--oj-popup-padding:          0.5rem;

--oj-popup-tail-height:             5px;
--oj-popup-tail-width:              10px;




/* dialog                     */
/* -------------------------- */

--oj-dialog-box-shadow:               var(--oj-core-box-shadow-md);
--oj-dialog-border-color:             rgba(var(--oj-palette-neutral-rgb-190),.1);
--oj-dialog-border-radius:            var(--oj-core-border-radius-lg);
--oj-dialog-bg-color:                 rgb(var(--oj-palette-neutral-rgb-0));

--oj-dialog-header-padding:           2rem 2rem 0.75rem;
--oj-dialog-body-padding:             0 2rem 1rem 2rem;
--oj-dialog-footer-padding:           1rem 2rem 2rem 2rem;

--oj-dialog-header-bg-color:          transparent;
--oj-dialog-header-border-color:      transparent;

--oj-dialog-title-text-color:        var(--oj-core-text-color-primary);
--oj-dialog-title-font-size:         var(--oj-typography-heading-xs-font-size);
--oj-dialog-title-line-height:       var(--oj-typography-heading-xs-line-height);
--oj-dialog-title-font-weight:       var(--oj-typography-heading-xs-font-weight);

--oj-dialog-cancel-icon-margin-top: -1.5rem;
--oj-dialog-cancel-icon-margin-end: -1.5rem;




/* file picker                */
/* -------------------------- */

--oj-file-picker-border-color:              rgb(var(--oj-palette-neutral-rgb-190));
--oj-file-picker-border-width:              1px;
--oj-file-picker-border-radius:             var(--oj-core-border-radius-xl);



/* masonry layout             */
/* -------------------------- */
--oj-masonry-layout-tile-width:    10rem;                 /*  width of a 1x1 masonryLayout tile, not including margin */
--oj-masonry-layout-tile-height:   10rem;                 /*  height of a 1x1 masonryLayout tile, not including margin */



/* navigation list            */
/* -------------------------- */

--oj-navigation-list-font-size:                          var(--oj-typography-body-md-font-size);
--oj-navigation-list-font-weight:                        600;

--oj-navigation-list-icon-margin:                        0;
--oj-navigation-list-icon-to-text-padding:               0.5rem;


--oj-navigation-list-item-min-height:                    3rem;
--oj-navigation-list-item-margin:                        2rem;
--oj-navigation-list-item-padding:                       0;


/* default */
--oj-navigation-list-item-label-color:               var(--oj-core-text-color-secondary);

/* hover */
--oj-navigation-list-item-label-color-hover:                 var(--oj-core-text-color-primary);
--oj-navigation-list-item-bg-color-hover:                    var(--oj-core-bg-color-hover);

/* selected */
--oj-navigation-list-item-bg-color-selected:                 transparent;
--oj-navigation-list-item-border-color-selected:             var(--oj-core-border-color-selected);
--oj-navigation-list-item-label-color-selected:              var(--oj-core-text-color-primary);


/* sliding */
--oj-navigation-list-sliding-heading-font-size:          var(--oj-typography-subheading-xs-font-size);
--oj-navigation-list-sliding-heading-font-weight:        var(--oj-typography-subheading-xs-font-weight);
--oj-navigation-list-sliding-heading-line-height:        var(--oj-typography-subheading-xs-line-height);


/* tab bar                    */
/* -------------------------- */

--oj-tab-bar-icon-to-text-padding:                0.5rem;
--oj-tab-bar-icon-margin:                         0;

--oj-tab-bar-item-margin:                         2rem;
--oj-tab-bar-item-min-height:                     3rem;
--oj-tab-bar-item-line-height:                    var(--oj-typography-body-md-line-height);
--oj-tab-bar-item-font-size:                      var(--oj-typography-body-md-font-size);

--oj-tab-bar-item-padding:                         0;

/* default */
--oj-tab-bar-item-font-weight:                    600;
--oj-tab-bar-item-label-color:                    var(--oj-core-text-color-secondary);


/* hover */
--oj-tab-bar-item-label-color-hover:              var(--oj-core-text-color-primary);
--oj-tab-bar-item-bg-color-hover:                 transparent;

/* active */
--oj-tab-bar-item-bg-color-active:                transparent;
--oj-tab-bar-item-border-color-active:    rgb(var(--oj-palette-brand-rgb-70));

/* selected */
--oj-tab-bar-item-font-weight-selected:           600;
--oj-tab-bar-item-label-color-selected:           var(--oj-core-text-color-primary);
--oj-tab-bar-item-bg-color-selected:              transparent;
--oj-tab-bar-item-border-color-selected:          var(--oj-core-border-color-selected);


/* progress Bar               */
/* -------------------------- */

--oj-progress-bar-height:                        6px;
--oj-progress-bar-border-radius:                 3px;
--oj-progress-bar-track-bg-color:                rgba(var(--oj-palette-neutral-rgb-170), .15);
--oj-progress-bar-value-bg-color:                rgb(var(--oj-palette-neutral-rgb-190));


/* progress circle            */
/* -------------------------- */

--oj-progress-circle-value-bg-color:             rgb(var(--oj-palette-neutral-rgb-190));
--oj-progress-circle-sm-size:                    1.5rem;
--oj-progress-circle-md-size:                    3rem;
--oj-progress-circle-lg-size:                    6rem;
--oj-progress-circle-sm-track-width:             2px;
--oj-progress-circle-md-track-width:             0.25rem;
--oj-progress-circle-lg-track-width:             0.375rem;
--oj-progress-circle-determinate-track-bg-color: rgba(var(--oj-palette-neutral-rgb-170), .15);



/* train                      */
/* -------------------------- */
--oj-train-step-width:                       7rem;
--oj-train-padding:                          0.75rem 0 0.75rem 0;
--oj-train-label-font-size:                  var(--oj-typography-body-sm-font-size);
--oj-train-label-font-weight:                bold;
--oj-train-label-padding-top:                0.75rem;
--oj-train-button-diameter:                  1.5rem;
--oj-train-button-font-size:                 var(--oj-typography-body-xs-font-size);
--oj-train-connector-height:                 2px;
--oj-train-connector-padding:                0.625rem;

/* default */
--oj-train-button-bg-color:                  rgb(var(--oj-palette-neutral-rgb-0));
--oj-train-button-border-color:              rgba(var(--oj-palette-neutral-rgb-190),.6);
--oj-train-button-text-color:                var(--oj-core-text-color-secondary);
--oj-train-label-color:                      var(--oj-core-text-color-secondary);
--oj-train-connector-color:                  rgba(var(--oj-palette-neutral-rgb-190),.3);

/* visited */
--oj-train-button-bg-color-visited:          rgb(var(--oj-palette-success-rgb-110));
--oj-train-button-border-color-visited:      transparent;
--oj-train-button-text-color-visited:        var(--oj-core-neutral-contrast);
--oj-train-label-color-visited:              var(--oj-core-text-color-primary);

/* hover */
--oj-train-button-bg-color-hover:            rgb(var(--oj-palette-neutral-rgb-0));
--oj-train-button-border-color-hover:        rgba(var(--oj-palette-brand-rgb-160),.6);
--oj-train-button-text-color-hover:          rgba(var(--oj-palette-brand-rgb-160),.6);
--oj-train-step-bg-color-hover:              var(--oj-core-bg-color-hover);
--oj-train-step-border-radius:               var(--oj-core-border-radius-xl);


/* active */
--oj-train-button-bg-color-active:           rgb(var(--oj-palette-neutral-rgb-190));
--oj-train-button-border-color-active:       rgb(var(--oj-palette-neutral-rgb-190));
--oj-train-button-text-color-active:         rgb(var(--oj-palette-neutral-rgb-0));
--oj-train-label-font-weight-active:         bold;
--oj-train-step-bg-color-active:             var(--oj-core-bg-color-active);

/* selected */
--oj-train-button-bg-color-selected:         rgb(var(--oj-palette-neutral-rgb-190));
--oj-train-button-border-color-selected:     rgb(var(--oj-palette-neutral-rgb-190));
--oj-train-button-text-color-selected:       rgb(var(--oj-palette-neutral-rgb-0));
--oj-train-label-font-weight-selected:       bold;
--oj-train-label-color-selected:             var(--oj-core-text-color-primary);
--oj-train-connector-color-selected:         rgba(var(--oj-palette-neutral-rgb-190),.3);
--oj-train-connector-padding-selected:       0px;

/* disabled */
--oj-train-button-bg-color-disabled:         rgb(var(--oj-palette-neutral-rgb-0));
--oj-train-button-border-color-disabled:     var(--oj-core-text-color-disabled);
--oj-train-button-text-color-disabled:       var(--oj-core-text-color-disabled);
--oj-train-button-opacity-disabled:          1;
--oj-train-label-color-disabled:             var(--oj-core-text-color-disabled);




/* tooltip                    */
/* -------------------------- */
--oj-tooltip-text-color:    rgb(var(--oj-palette-neutral-rgb-0));
--oj-tooltip-bg-color:      rgb(var(--oj-palette-neutral-rgb-170));
--oj-tooltip-font-size:     var(--oj-typography-body-xs-font-size);
--oj-tooltip-padding:       var(--oj-core-spacing-2x);
--oj-tooltip-border-radius: var(--oj-core-border-radius-md);
--oj-tooltip-line-height:   var(--oj-typography-body-xs-line-height);
--oj-tooltip-border-color:  rgb(var(--oj-palette-neutral-rgb-170));





/* dvt                        */
/* -------------------------- */

/* used for gauge thresholds and stock chart rising and falling colors */
--oj-dvt-danger-color:              rgb(var(--oj-palette-danger-rgb-120));
--oj-dvt-warning-color:             rgb(var(--oj-palette-warning-rgb-70));
--oj-dvt-success-color:             rgb(var(--oj-palette-success-rgb-90));

/* marquee */
--oj-dvt-marquee-color:                    rgba(var(--oj-palette-neutral-rgb-20),.1);
--oj-dvt-marquee-border-color:             rgba(var(--oj-palette-neutral-rgb-190), 0.8);

/* selected nodes in sunburst, diagram, treemap, timeline, thematic map, nbox, gantt*/
--oj-dvt-item-border-color-selected:   rgb(var(--oj-palette-neutral-rgb-190));

/* hover/selected inner contrast color in sunburst, diagram, treemap, nbox , thematic map nodes */
--oj-dvt-item-contrast-color:           rgb(var(--oj-palette-neutral-rgb-20));

/* hover nodes in sunburst, treemap */
--oj-dvt-node-border-color-hover:         rgb(var(--oj-palette-neutral-rgb-20));

/* reference line contrast line, data cursor contrast line in chart, marquee inner stroke */
--oj-dvt-contrast-line-color:              rgba(var(--oj-palette-neutral-rgb-20), 0.7);

/* reference area color in chart, gantt */
--oj-dvt-reference-object-area-color:      rgba(var(--oj-palette-neutral-rgb-170), 0.08);

/* reference line primary line, data cursor contrast line in chart, gantt */
--oj-dvt-reference-object-line-color:      rgba(var(--oj-palette-neutral-rgb-190), 0.8);

/* overview window for dvt components, currently timeline and diagram */
--oj-dvt-overview-bg-color:                rgb(var(--oj-palette-neutral-rgb-50));
--oj-dvt-overview-window-bg-color:         rgb(var(--oj-palette-neutral-rgb-0));
--oj-dvt-overview-window-border-color:     rgb(var(--oj-palette-neutral-rgb-170));


/* chart axis, datalabel and legend text */
--oj-dvt-label-font-size-sm:              var(--oj-typography-body-2xs-font-size);

/* sunburst, diagram, nbox node data labels */
--oj-dvt-label-font-size-md:              var(--oj-typography-body-xs-font-size);




/* chart                      */
/* -------------------------- */
--oj-chart-axis-title-text-color:         var(--oj-core-text-color-secondary);
--oj-chart-axis-tick-label-text-color:    var(--oj-core-text-color-secondary);
--oj-chart-animation-rising-icon-color:   rgb(var(--oj-palette-info-rgb-90));
--oj-chart-animation-falling-icon-color:  rgb(var(--oj-palette-danger-rgb-90));
--oj-chart-animation-marker-color:        rgb(var(--oj-palette-neutral-rgb-20));
--oj-chart-polar-axis-tick-label-inside-bg-color: rgba(var(--oj-palette-neutral-rgb-0), .6);
--oj-chart-polar-axis-tick-label-outside-bg-color:    rgb(var(--oj-palette-neutral-rgb-0));
--oj-chart-data-cursor-line-color: rgba(var(--oj-palette-neutral-rgb-190), 0.8);

/* stock charts */
--oj-chart-stock-falling-bg-color:        var(--oj-dvt-danger-color);
--oj-chart-stock-range-bg-color:          rgb(var(--oj-palette-neutral-rgb-100));
--oj-chart-stock-rising-bg-color:         var(--oj-dvt-success-color);


/* diagram                    */
/* -------------------------- */
--oj-diagram-link-color:                           rgb(var(--oj-palette-neutral-rgb-120));
--oj-diagram-node-border-color-hover:              rgb(var(--oj-palette-neutral-rgb-120));
--oj-diagram-node-bg-color:               rgb(var(--oj-palette-neutral-rgb-170));


/* rating gauge               */
/* -------------------------- */

--oj-rating-gauge-sm-size:                           16px;
--oj-rating-gauge-md-size:                           20px;
--oj-rating-gauge-lg-size:                           36px;

--oj-rating-gauge-border-color-hover:          var(--oj-rating-gauge-border-color-selected);
--oj-rating-gauge-color-hover:                 var(--oj-rating-gauge-color-selected);

--oj-rating-gauge-border-color-unselected:     rgb(var(--oj-palette-neutral-rgb-190));
--oj-rating-gauge-color-unselected:            transparent;

--oj-rating-gauge-border-color-selected:       rgb(var(--oj-palette-neutral-rgb-190));
--oj-rating-gauge-color-selected:              rgb(var(--oj-palette-neutral-rgb-190));

--oj-rating-gauge-border-color-changed:        var(--oj-rating-gauge-border-color-selected);
--oj-rating-gauge-color-changed:               var(--oj-rating-gauge-color-selected);

--oj-rating-gauge-color-selected-disabled:              var(--oj-core-text-color-disabled);

--oj-rating-gauge-color-unselected-disabled:            var(--oj-core-color-disabled-2);




/* n-box               */
/* -------------------------- */
--oj-n-box-cell-bg-color:            rgb(var(--oj-palette-neutral-rgb-0));
--oj-n-box-cell-bg-color-maximized:  rgb(var(--oj-palette-neutral-rgb-10));
--oj-n-box-node-bg-color:            rgb(var(--oj-palette-neutral-rgb-30));



/* picto chart                */
/* -------------------------- */
--oj-picto-chart-item-bg-color: rgba(var(--oj-palette-neutral-rgb-170),.15);


/* thematic map               */
/* -------------------------- */
--oj-thematic-map-bg-color:            rgb(var(--oj-palette-neutral-rgb-30));
--oj-thematic-map-border-color:        rgb(var(--oj-palette-neutral-rgb-50));
--oj-thematic-map-marker-bg-color:     rgb(var(--oj-palette-neutral-rgb-190));
--oj-thematic-map-marker-border-color: rgb(var(--oj-palette-neutral-rgb-190));
--oj-thematic-map-link-color:          rgb(var(--oj-palette-neutral-rgb-190));



/* treemap                    */
/* -------------------------- */
--oj-treemap-node-header-bg-color:                   rgb(var(--oj-palette-neutral-rgb-20));
--oj-treemap-node-header-bg-color-selected:          rgb(var(--oj-palette-brand-rgb-40));
--oj-treemap-node-header-border-color:               rgb(var(--oj-palette-neutral-rgb-40));
--oj-treemap-node-header-border-color-hover:         rgb(var(--oj-palette-neutral-rgb-40));

}

.oj-avatar-bg-purple {
  --oj-avatar-bg-color:                       #846a92;
}
.oj-avatar-bg-orange {
  --oj-avatar-bg-color:                       #9b5734;
}
.oj-avatar-bg-teal {
  --oj-avatar-bg-color:                       #4f7d7b;
}
.oj-avatar-bg-green {
  --oj-avatar-bg-color:                       #4c825c;
}
.oj-avatar-bg-pink {
  --oj-avatar-bg-color:                       #925865;
}
.oj-avatar-bg-slate {
  --oj-avatar-bg-color:                       #798b8a;
}
.oj-avatar-bg-blue {
  --oj-avatar-bg-color:                       #437c94;
}
.oj-avatar-bg-lilac {
  --oj-avatar-bg-color:                       #6b7494;
}
.oj-avatar-bg-gray {
  --oj-avatar-bg-color:                       #6f757e;
}
.oj-avatar-xxs {
  --oj-avatar-size:                       1.75rem;
  --oj-avatar-border-radius:             var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size:         var(--oj-typography-body-xs-font-size); 
  --oj-avatar-initials-font-weight:       600; 
}
.oj-avatar-xs {
  --oj-avatar-size:                        2.75rem;
  --oj-avatar-border-radius:               var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size:          var(--oj-typography-body-md-font-size);
  --oj-avatar-initials-font-weight:        400;
}
.oj-avatar-sm {
  --oj-avatar-size:                        3.5rem;
  --oj-avatar-border-radius:               var(--oj-core-border-radius-md);
  --oj-avatar-initials-font-size:          var(--oj-typography-heading-xs-font-size);
  --oj-avatar-initials-font-weight:        normal;
}
.oj-avatar-lg {
  --oj-avatar-size:                        6rem;
  --oj-avatar-border-radius:               var(--oj-core-border-radius-lg);
  --oj-avatar-initials-font-size:          40px;
}
.oj-avatar-xl {
  --oj-avatar-size:                        9rem;
  --oj-avatar-border-radius:               var(--oj-core-border-radius-xl);
  --oj-avatar-initials-font-size:          48px;
}
.oj-avatar-xxl {
  --oj-avatar-size:                       12.25rem;
  --oj-avatar-border-radius:              var(--oj-core-border-radius-xl);
  --oj-avatar-initials-font-size:         72px;
}
.oj-badge-sm {
    --oj-badge-height: 1rem;
    --oj-badge-font-size: 0.5625rem;
    --oj-badge-font-weight: 700;
    --oj-badge-border-radius: var(--oj-core-border-radius-md);
  }

.oj-color-invert {

  /*  solid enabled */
  --oj-button-solid-chrome-bg-color:                      rgba(var(--oj-palette-neutral-rgb-10), 0.08);
  --oj-button-solid-chrome-border-color:                  transparent;
  --oj-button-solid-chrome-text-color:                    var(--oj-core-neutral-contrast); 


  /*  solid hover */
  --oj-button-solid-chrome-bg-color-hover:                rgba(var(--oj-palette-neutral-rgb-10), 0.12);
  --oj-button-solid-chrome-border-color-hover:            transparent;
  --oj-button-solid-chrome-text-color-hover:              var(--oj-core-neutral-contrast);


  /*  solid active */
  --oj-button-solid-chrome-bg-color-active:               rgba(var(--oj-palette-neutral-rgb-10), 0.16);
  --oj-button-solid-chrome-border-color-active:           transparent;
  --oj-button-solid-chrome-text-color-active:             var(--oj-core-neutral-contrast);


  /*  solid disabled */
  --oj-button-solid-chrome-bg-color-disabled:             rgba(var(--oj-palette-neutral-rgb-0), 0.16);
  --oj-button-solid-chrome-border-color-disabled:         transparent;
  --oj-button-solid-chrome-text-color-disabled:           var(--oj-core-text-color-disabled);


  /*  solid selected */
  --oj-button-solid-chrome-bg-color-selected:             rgba(var(--oj-palette-neutral-rgb-10), 0.08);
  --oj-button-solid-chrome-border-color-selected:         transparent;
  --oj-button-solid-chrome-text-color-selected:           var(--oj-core-neutral-contrast);


  /*  solid selected hover */
  --oj-button-solid-chrome-bg-color-selected-hover:       rgba(var(--oj-palette-neutral-rgb-10), 0.12);
  --oj-button-solid-chrome-border-color-selected-hover:   transparent;
  --oj-button-solid-chrome-text-color-selected-hover:     var(--oj-core-neutral-contrast);


  /*  solid selected disabled TODO */
  --oj-button-solid-chrome-bg-color-selected-disabled:     rgba(var(--oj-palette-neutral-rgb-0), 0.16);
  --oj-button-solid-chrome-border-color-selected-disabled: transparent;
  --oj-button-solid-chrome-text-color-selected-disabled:   var(--oj-core-text-color-disabled);


  /*  borderless-chrome enabled */
  --oj-button-borderless-chrome-text-color:        var(--oj-core-text-color-primary);


  /*  borderless chrome hover */
  --oj-button-borderless-chrome-bg-color-hover:        var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-hover:    transparent;
  --oj-button-borderless-chrome-text-color-hover:      var(--oj-core-text-color-primary);


  /*  borderless chrome-active */
  --oj-button-borderless-chrome-bg-color-active:       var(--oj-core-bg-color-active);
  --oj-button-borderless-chrome-border-color-active:   transparent;
  --oj-button-borderless-chrome-text-color-active:     var(--oj-core-text-color-primary);


  /*  borderless chrome disabled */
  --oj-button-borderless-chrome-text-color-disabled:   var(--oj-core-text-color-disabled);


  /*  borderless-chrome-selected */
  --oj-button-borderless-chrome-bg-color-selected:     transparent;
  --oj-button-borderless-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-borderless-chrome-text-color-selected:   var(--oj-core-text-color-primary);


  /*  borderless chrome selected hover */
  --oj-button-borderless-chrome-bg-color-selected-hover:     var(--oj-core-bg-color-hover);
  --oj-button-borderless-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-borderless-chrome-text-color-selected-hover:   var(--oj-core-text-color-primary);


  /*  borderless chrome selected disabled */
  --oj-button-borderless-chrome-bg-color-selected-disabled:     transparent;
  --oj-button-borderless-chrome-border-color-selected-disabled: rgba(rgb(var(--oj-palette-neutral-rgb-0)), .6);
  --oj-button-borderless-chrome-text-color-selected-disabled:   var(--oj-core-text-color-disabled);


  /* outlined enabled */
  --oj-button-outlined-chrome-border-color:          rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-outlined-chrome-text-color:            var(--oj-core-text-color-primary);


  /*  outlined hover */
  --oj-button-outlined-chrome-bg-color-hover:        var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-hover:    rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-outlined-chrome-text-color-hover:      var(--oj-core-text-color-primary);


  /*  outlined active */
  --oj-button-outlined-chrome-bg-color-active:       var(--oj-core-bg-color-active);
  --oj-button-outlined-chrome-border-color-active:   rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-outlined-chrome-text-color-active:     var(--oj-core-text-color-primary);


  /*  outlined disabled */
  --oj-button-outlined-chrome-border-color-disabled: rgba(var(--oj-palette-neutral-rgb-0), .1);
  --oj-button-outlined-chrome-text-color-disabled:   var(--oj-core-text-color-disabled);


  /*  outlined selected */
  --oj-button-outlined-chrome-bg-color-selected:     transparent;
  --oj-button-outlined-chrome-border-color-selected: rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-outlined-chrome-text-color-selected:   var(--oj-core-text-color-primary);


  /*  outlined selected hover */
  --oj-button-outlined-chrome-bg-color-selected-hover:    var(--oj-core-bg-color-hover);
  --oj-button-outlined-chrome-border-color-selected-hover: rgba(var(--oj-palette-neutral-rgb-0), .3);
  --oj-button-outlined-chrome-text-color-selected-hover:   var(--oj-core-text-color-primary);


  /*  outlined selected disabled */
  --oj-button-outlined-chrome-bg-color-selected-disabled:     transparent;
  --oj-button-outlined-chrome-border-color-selected-disabled: var(--oj-button-outlined-chrome-border-color-disabled);
  --oj-button-outlined-chrome-text-color-selected-disabled:   var(--oj-core-text-color-disabled);


   /*  cta enabled */
   --oj-button-call-to-action-chrome-bg-color:                      rgb(var(--oj-palette-neutral-rgb-0));
   --oj-button-call-to-action-chrome-border-color:                  transparent;
   --oj-button-call-to-action-chrome-text-color:                    rgb(var(--oj-palette-neutral-rgb-190));

 
   /*  cta hover */
   --oj-button-call-to-action-chrome-bg-color-hover:                rgb(var(--oj-palette-neutral-rgb-10));
   --oj-button-call-to-action-chrome-border-color-hover:            transparent;
   --oj-button-call-to-action-chrome-text-color-hover:              rgb(var(--oj-palette-neutral-rgb-190));

 
   /*  cta active */
   --oj-button-call-to-action-chrome-bg-color-active:               rgb(var(--oj-palette-neutral-rgb-20));
   --oj-button-call-to-action-chrome-border-color-active:           transparent;
   --oj-button-call-to-action-chrome-text-color-active:             rgb(var(--oj-palette-neutral-rgb-190));
   
}
.oj-color-invert,
  oj-buttonset-many.oj-color-invert,
  .oj-color-invert oj-buttonset-one,
  .oj-color-invert oj-buttonset-many {
    --oj-button-outlined-chrome-bg-color:                          var(--oj-core-bg-color-active);
    --oj-button-outlined-chrome-text-color:                        var(--oj-core-text-color-secondary);
    --oj-button-outlined-chrome-bg-color-disabled:                 var(--oj-button-solid-chrome-bg-color-disabled);
    --oj-buttonset-outlined-chrome-internal-border-color:          var(--oj-button-outlined-chrome-border-color);
    --oj-buttonset-outlined-chrome-internal-border-color-selected: var(--oj-button-outlined-chrome-border-color);
  }

.oj-color-invert {
  --oj-core-text-color-primary:   rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-text-color-secondary: rgba(var(--oj-palette-neutral-rgb-0), .6);
  --oj-core-text-color-disabled:  rgba(var(--oj-palette-neutral-rgb-0), .3);

  --oj-core-bg-color-content:     rgb(var(--oj-palette-neutral-rgb-170)); 
  --oj-core-bg-color-hover:       rgba(var(--oj-palette-neutral-rgb-0), .08);
  --oj-core-bg-color-active:      rgba(var(--oj-palette-neutral-rgb-0), .12);
  --oj-core-divider-color:        rgba(var(--oj-palette-neutral-rgb-0), .3);
  
  /*  core text colors */
  /*  -------------------------- */
  
  --oj-core-text-color-danger:    rgb(var(--oj-palette-danger-rgb-70));
  --oj-core-text-color-warning:   rgb(var(--oj-palette-warning-rgb-70));
  --oj-core-text-color-success:   rgb(var(--oj-palette-success-rgb-70));
 
  
  /*  brand */
  /*  -------------------------- */
  --oj-core-brand-1:                      rgb(var(--oj-palette-brand-rgb-50));
  --oj-core-brand-2:                      rgb(var(--oj-palette-brand-rgb-60));
  --oj-core-brand-3:                      rgb(var(--oj-palette-brand-rgb-70));
  --oj-core-brand-contrast:               rgb(var(--oj-palette-neutral-rgb-190));
  
  /*  neutral */
  /*  -------------------------- */
  --oj-core-neutral-1:                      rgb(var(--oj-palette-neutral-rgb-100));
  --oj-core-neutral-2:                      rgb(var(--oj-palette-neutral-rgb-90));
  --oj-core-neutral-3:                      rgb(var(--oj-palette-neutral-rgb-70));
  --oj-core-neutral-contrast:               rgb(var(--oj-palette-neutral-rgb-0));
  --oj-core-neutral-secondary-1:            rgb(var(--oj-palette-neutral-rgb-140));
  --oj-core-neutral-secondary-2:            rgb(var(--oj-palette-neutral-rgb-150));
  --oj-core-neutral-secondary-3:            rgb(var(--oj-palette-neutral-rgb-160));
  --oj-core-neutral-secondary-contrast:     rgb(var(--oj-palette-neutral-rgb-40));
  
  /*  success */
  /*  -------------------------- */
  --oj-core-success-1:                    rgb(var(--oj-palette-success-rgb-100));
  --oj-core-success-2:                    rgb(var(--oj-palette-success-rgb-90));
  --oj-core-success-3:                    rgb(var(--oj-palette-success-rgb-70));
  --oj-core-success-contrast:             rgb(var(--oj-palette-neutral-rgb-0));

  /*  success secondary */
  /*  -------------------------- */
  --oj-core-success-secondary-1:          rgb(var(--oj-palette-success-rgb-140));
  --oj-core-success-secondary-2:          rgb(var(--oj-palette-success-rgb-150));
  --oj-core-success-secondary-3:          rgb(var(--oj-palette-success-rgb-160));
  --oj-core-success-secondary-contrast:   rgb(var(--oj-palette-success-rgb-40));

  /*  warning */
  /*  -------------------------- */
  --oj-core-warning-1:                    rgb(var(--oj-palette-warning-rgb-100));
  --oj-core-warning-2:                    rgb(var(--oj-palette-warning-rgb-90));
  --oj-core-warning-3:                    rgb(var(--oj-palette-warning-rgb-70));
  --oj-core-warning-contrast:             rgb(var(--oj-palette-neutral-rgb-0));

  /*  warning secondary */
  /*  -------------------------- */
  --oj-core-warning-secondary-1:          rgb(var(--oj-palette-warning-rgb-140));
  --oj-core-warning-secondary-2:          rgb(var(--oj-palette-warning-rgb-150));
  --oj-core-warning-secondary-3:          rgb(var(--oj-palette-warning-rgb-160));
  --oj-core-warning-secondary-contrast:   rgb(var(--oj-palette-warning-rgb-40));
  
  /*  danger */
  /*  -------------------------- */
  --oj-core-danger-1:                      rgb(var(--oj-palette-danger-rgb-100));
  --oj-core-danger-2:                      rgb(var(--oj-palette-danger-rgb-90));
  --oj-core-danger-3:                      rgb(var(--oj-palette-danger-rgb-70));
  --oj-core-danger-contrast:               rgb(var(--oj-palette-neutral-rgb-0));
  
  /*  danger secondary */
  /*  -------------------------- */
  --oj-core-danger-secondary-1:            rgb(var(--oj-palette-danger-rgb-140));
  --oj-core-danger-secondary-2:            rgb(var(--oj-palette-danger-rgb-150));
  --oj-core-danger-secondary-3:            rgb(var(--oj-palette-danger-rgb-160));
  --oj-core-danger-secondary-contrast:     rgb(var(--oj-palette-danger-rgb-40));
  
  /*  info */
  /*  -------------------------- */
  --oj-core-info-1:                    rgb(var(--oj-palette-info-rgb-100));
  --oj-core-info-2:                    rgb(var(--oj-palette-info-rgb-90));
  --oj-core-info-3:                    rgb(var(--oj-palette-info-rgb-70));
  --oj-core-info-contrast:             rgb(var(--oj-palette-neutral-rgb-0));

  /*  info secondary */
  /*  -------------------------- */
  --oj-core-info-secondary-1:          rgb(var(--oj-palette-info-rgb-140));
  --oj-core-info-secondary-2:          rgb(var(--oj-palette-info-rgb-150));
  --oj-core-info-secondary-3:          rgb(var(--oj-palette-info-rgb-160));
  --oj-core-info-secondary-contrast:   rgb(var(--oj-palette-info-rgb-40));
  
  /*  Box-shadows */
  --oj-core-box-shadow-rgb:     var(--oj-palette-neutral-rgb-200);
  --oj-core-box-shadow-sm:      0px 2px 4px 0px rgba(var(--oj-core-box-shadow-rgb),0.4); 
  --oj-core-box-shadow-md:      0px 8px 32px -10px rgba(var(--oj-core-box-shadow-rgb),.6);
  --oj-core-box-shadow-lg:      0px 16px 44px -12px rgba(var(--oj-core-box-shadow-rgb),0.7);
}
.oj-color-invert {
    color: var(--oj-core-text-color-primary);
}


.oj-input-search-hero {
      --oj-text-field-font-size: 1.5rem;
      --oj-button-sm-icon-size: 1.5rem;
      --oj-text-field-height: 4.5rem;
      --oj-text-field-text-to-edge-padding: 2.5rem;
      --oj-text-field-icon-to-text-padding: 1rem;
      --oj-text-field-icon-to-edge-padding: 1rem;
    }
.oj-color-invert {
    --oj-label-color:         var(--oj-core-text-color-secondary); 
    --oj-label-color-disabled:var(--oj-core-text-color-disabled);

}
.oj-navigationlist-vertical {
    --oj-navigation-list-item-bg-color-selected:                 var(--oj-core-bg-color-active); 
  }
.oj-navigationlist-vertical.oj-navigationlist-icon-only {
    --oj-navigation-list-item-margin:                            0;

    --oj-navigation-list-item-bg-color-hover:                    var(--oj-core-bg-color-hover);
    --oj-navigation-list-item-bg-color-selected:                 var(--oj-core-bg-color-active); 
  }
.oj-navigationlist-horizontal.oj-navigationlist-icon-only {
    --oj-navigation-list-item-margin:                            2rem;

    --oj-navigation-list-item-bg-color-hover:                    transparent;
    --oj-navigation-list-item-bg-color-selected:                 transparent;
  }
.oj-navigationlist-stack-icon-label {
    --oj-navigation-list-item-min-height:                        2.75rem;
  }

  .oj-color-invert {

  /*  default */
  --oj-navigation-list-item-label-color:                       var(--oj-core-text-color-secondary);

  /*  hover */
  --oj-navigation-list-item-label-color-hover:                 var(--oj-core-text-color-primary);
  --oj-navigation-list-item-bg-color-hover:                    var(--oj-core-bg-color-hover);

    /*  selected */
    --oj-navigation-list-item-border-color-selected:             rgb(var(--oj-palette-brand-rgb-50));
    --oj-navigation-list-item-label-color-selected:              var(--oj-core-text-color-primary);
  }

  
  .oj-color-invert .oj-navigationlist-vertical,
  .oj-color-invert.oj-navigationlist-vertical {
    --oj-navigation-list-item-bg-color-selected:                 var(--oj-core-bg-color-active);
  }

  
  .oj-color-invert .oj-navigationlist-icon-only,
  .oj-color-invert.oj-navigationlist-icon-only {
    --oj-navigation-list-item-bg-color-hover:                   var(--oj-core-bg-color-hover);
  }

.oj-color-invert {
  
  --oj-palette-brand-rgb-10:     254, 249, 233;
  --oj-palette-brand-rgb-20:     253, 244, 223;
  --oj-palette-brand-rgb-30:     252, 239, 203;
  --oj-palette-brand-rgb-40:     247, 224, 161;
  --oj-palette-brand-rgb-50:     240, 204, 113;
  --oj-palette-brand-rgb-60:     213, 179, 100;
  --oj-palette-brand-rgb-70:     199, 165, 93;
  --oj-palette-brand-rgb-80:     179, 149, 84;
  --oj-palette-brand-rgb-90:     157, 130, 73;
  --oj-palette-brand-rgb-100:    137, 114, 63;
  --oj-palette-brand-rgb-110:    113, 94, 52;
  --oj-palette-brand-rgb-120:    113, 94, 52;
  --oj-palette-brand-rgb-130:    102, 85, 47;
  --oj-palette-brand-rgb-140:    91, 74, 41;
  --oj-palette-brand-rgb-150:    79, 66, 36;
  --oj-palette-brand-rgb-160:    64, 54, 29;
  --oj-palette-brand-rgb-170:    55, 44, 24;
}
.oj-color-invert {
  --oj-panel-bg-color:                  var(--oj-core-bg-color-content); 
  --oj-panel-border-color:              var(--oj-core-divider-color);
}
.oj-color-invert {
  --oj-progress-bar-track-bg-color:   rgba(var(--oj-palette-neutral-rgb-10), .15);
  --oj-progress-bar-value-bg-color:   rgb(var(--oj-palette-neutral-rgb-0));
}
.oj-color-invert {
  --oj-progress-circle-determinate-track-bg-color:   rgba(var(--oj-palette-neutral-rgb-10), .15);
  --oj-progress-circle-value-bg-color:   rgb(var(--oj-palette-neutral-rgb-0));
}
.oj-color-invert {
  --oj-radio-checkbox-input-color-unselected:    rgb(var(--oj-palette-neutral-rgb-0));
  --oj-radio-checkbox-input-color-selected:      rgb(var(--oj-palette-neutral-rgb-0));

}
.oj-color-invert {
    /*  hover */
    --oj-scrollbar-thumb-color-hover:   rgba(var(--oj-palette-neutral-rgb-0), .3);

    /*  colors when you need to force a scrollbar */
    --oj-scrollbar-track-color-force:   rgba(var(--oj-palette-neutral-rgb-0), .3);
  }
.oj-tabbar-vertical {
    --oj-tab-bar-item-padding:                           1.3125rem;
  }
.oj-tabbar-vertical.oj-tabbar-icon-only {
    --oj-tab-bar-item-padding:                           1.5rem;
    --oj-tab-bar-item-margin:                            0;
  }
.oj-tabbar-stack-icon-label {
    --oj-tab-bar-icon-to-text-padding:                 0.5rem;
    --oj-tab-bar-item-min-height:                      5rem;
    --oj-tab-bar-item-padding:                         1rem 1rem 0;
  }

  .oj-color-invert {
    /*  selected */
    --oj-tab-bar-item-label-color-selected:             var(--oj-core-text-color-primary);
    --oj-tab-bar-item-border-color-selected:            rgb(var(--oj-palette-brand-rgb-50));
    
    /*  default */
    --oj-tab-bar-item-label-color:                      var(--oj-core-text-color-secondary);
    
    /*  hover */
    --oj-tab-bar-item-label-color-hover:                var(--oj-core-text-color-primary);
    
    /*  active */
    --oj-tab-bar-item-border-color-active:              rgb(var(--oj-palette-brand-rgb-50));
  }

.oj-color-invert {
  --oj-link-text-color:                 rgb(var(--oj-palette-brand-rgb-50));
  --oj-link-text-color-active:          var(--oj-link-text-color);
  --oj-link-text-color-visited:         var(--oj-link-text-color);
  
  --oj-heading-text-color:               var(--oj-core-text-color-primary);
}
.oj-color-invert {
  --oj-text-field-text-highlight-color: rgb(var(--oj-palette-brand-rgb-50)); 


  /*  enabled */
  --oj-text-field-bg-color:               rgb(var(--oj-palette-neutral-rgb-180));
  --oj-text-field-border-color:           rgba(var(--oj-palette-neutral-rgb-0),.3);
  --oj-text-field-placeholder-color:      var(--oj-core-text-color-secondary);
  --oj-text-field-text-color:      var(--oj-core-text-color-primary);

  /*  disabled */
  --oj-text-field-bg-color-disabled:      rgba(var(--oj-palette-neutral-rgb-0), 0.16); /*  need to double check with design team as there is no specification */

  --oj-text-field-border-color-disabled:  rgba(var(--oj-palette-neutral-rgb-0),.1);
  --oj-text-field-text-color-disabled:   var(--oj-core-text-color-disabled);

  /*  readonly */

  /*  focus */
  --oj-text-field-border-color-focus: rgb(var(--oj-palette-brand-rgb-50));

  /*  variables that apply when the label-edge is inside */
  /*  todo: disabled color should apply regardless of location, error and focus only apply when label is inside */
  --oj-text-field-inside-edge-label-color-error:       var(--oj-core-danger-3);
  --oj-text-field-inside-edge-label-color-focus:       var(--oj-core-brand-1);
  --oj-text-field-inside-edge-label-color-warning:     var(--oj-core-warning-3);

  /*  User Assistance */
  --oj-user-assistance-inline-text-color: var(--oj-core-text-color-secondary);
}

General Variables

General variables have the following prefixes:

  1. --oj-palette - for color ramps
  2. --oj-typography - for font size, weight, and line-height
  3. --oj-core - for shared properties

Palette Variables

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

  • --oj-palette-neutral-rgb - neutral color ramp
  • --oj-palette-brand-rgb - brand color ramp
  • --oj-palette-danger-rgb - ramp for failure, negative, or destructive state colors
  • --oj-palette-warning-rgb - ramp for caution or notification state colors
  • --oj-palette-success-rgb - ramp for valid, positive, or completed state colors
  • --oj-palette-info-rgb - ramp for informational state colors
  • --oj-palette-dvt-rgb- colors for data visualizations, for example charts

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 passed to the rgba function to create semi-transparent colors. For example:


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

Note that if you're using these variables in sass you may need to uppercase the function names to RGB() and RGBA() due to sass issue 2251.

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. Input your neutral color as the 'Key Color'. Multiple key colors can also be used to generate a ramp, click the '+' button to try adding an additional color. See this article for details.
  3. Convert the generated HEX values to RGB and assign the values to the --oj-palette-neutral-rgb-* css variables as seen below.
JET Neutral CSS Variables RGB value Color
--oj-palette-neutral-rgb-0: 254, 254, 254;
--oj-palette-neutral-rgb-10: 249, 249, 249;
--oj-palette-neutral-rgb-20: 244, 244, 244;
--oj-palette-neutral-rgb-30: 239, 239, 239;
--oj-palette-neutral-rgb-40: 226, 226, 226;
--oj-palette-neutral-rgb-50: 207, 207, 207;
--oj-palette-neutral-rgb-60: 184, 184, 184;
--oj-palette-neutral-rgb-70: 169, 169, 169;
--oj-palette-neutral-rgb-80: 153, 153, 153;
--oj-palette-neutral-rgb-90: 133, 133, 133;
--oj-palette-neutral-rgb-100: 117, 117, 117;
--oj-palette-neutral-rgb-110: 106, 106, 106;
--oj-palette-neutral-rgb-120: 97, 97, 97;
--oj-palette-neutral-rgb-130: 87, 87, 87;
--oj-palette-neutral-rgb-140: 77, 77, 77;
--oj-palette-neutral-rgb-150: 66, 66, 66;
--oj-palette-neutral-rgb-160: 54, 54, 54;
--oj-palette-neutral-rgb-170: 46, 46, 46;
--oj-palette-neutral-rgb-180: 31, 31, 31;
--oj-palette-neutral-rgb-190: 22, 22, 22;
--oj-palette-neutral-rgb-200: 00, 00, 00;

Generating Other Palette Ramps

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

HTML Tag Variables

The html element font family is controlled by the --oj-html-font-family variable.

The --oj-html-font-size variable is set on the html element. It's recommended that you use em units, this allows browser font size settings to be reflected on the page. JET generally uses rem instead of px which means that when you change the html element font size components adjust proportionately. Rem can be used for anything that takes a length unit like font size, line-height, width, height, padding, margin, etc.

Typography Variables

Font size, font weight, and line height are controlled by variables that start with --typography, for example

  • --oj-typography-heading-lg-font-size
  • --oj-typography-heading-lg-font-weight
  • --oj-typography-heading-lg-line-height - typography line height variables must be a unitless number

Core Variables

Core variables are used by many components.

Core Text Variables

Text color variables are used directly and indirectly by many components.
  • --oj-core-text-color-primary
  • --oj-core-text-color-secondary
  • --oj-core-text-color-disabled
  • --oj-core-text-color-danger
  • --oj-core-text-color-warning
  • --oj-core-text-color-success

Core State Variables

Some or all of the variables below are used by oj-list-view, oj-table and oj-data-grid cells (headers are controlled by collection variables), oj-menu, select and combobox dropdowns, oj-file-picker, oj-date-picker, oj-tab-bar, oj-navigation-list.
  • --oj-core-bg-color-content - default content background
  • --oj-core-bg-color-hover
  • --oj-core-bg-color-active
  • --oj-core-bg-color-selected
  • --oj-core-border-color-selected
  • --oj-core-divider-color - color of lines/separators between items

Core Alert Variables

There are neutral, brand, danger, warning, success, and info color groupings in core. These are used on components like badges, swipe actions, and messages. Each group has several shades that can be used as backgrounds or borders, plus a contrast color that is normally used for text and icons. For example:
  • --oj-core-danger-1: rgb(var(--oj-palette-danger-rgb-100));
  • --oj-core-danger-2: rgb(var(--oj-palette-danger-rgb-110));
  • --oj-core-danger-3: rgb(var(--oj-palette-danger-rgb-120));
  • --oj-core-danger-contrast: rgb(var(--oj-palette-neutral-rgb-0));

Component Variables

Component variable names are as self documenting as possible and follow the naming convention --oj-[component-name]-[element-name]-[property-name]-[state]

  • [component-name]: examples are button, list-view
  • [element-name]: (optional) examples are header, node, list-item
  • [property-name]: examples are bg-color, border-color, text-color, icon-color
  • [state]: (optional) example are hover, active, disabled, selected

some examples

  • --oj-button-solid-chrome-bg-color-hover
  • --oj-slider-thumb-border-color-active
  • --oj-switch-track-border-radius

Text Fields

Text field variables are used by oj-input-text, oj-input-password, oj-input-number, oj-input-date, oj-input-time, oj-input-date-time, oj-input-search, oj-select-single, oj-select-many, oj-combobox-one, oj-combobox-many, and oj-text-area. Variables to control text fields start with --oj-text-field.

Collections

Collection variables start with --oj-collection and control table, data grid, list view, and tree view.

Local Scope

Components that have different configurations may use local scoping. For example tab bar can render horizontally or vertically depending on the edge attribute. When rendering vertically variables can be scoped locally in class oj-tabbar-vertical, for example:

::root {
  // this value will be applied when the tab bar is horiztal
  --oj-tab-bar-item-min-height: 2rem;
}

.oj-tabbar-vertical {
  // this value will be applied when the tab bar is vertical
  --oj-tab-bar-item-min-height: 3rem;
}
Other examples of components that use local scoping are navigation list, avatar, badge, and buttonset. In the cookbook go to Framework > CSS Variables > App Wide Theming for details.