Styling: CSSVariables

Oracle® JavaScript Extension Toolkit (JET)
11.0.0

F37993-01

Description

CSS Variables


CSS Variables

See JET CSS Variables for additional details.
Palette Neutral
CSS variables that specify the neutral palette colors
Name Type Description
--oj-palette-neutral-rgb-10 <rgb_values> Neutral palette color 10
--oj-palette-neutral-rgb-20 <rgb_values> Neutral palette color 20
--oj-palette-neutral-rgb-30 <rgb_values> Neutral palette color 30
--oj-palette-neutral-rgb-40 <rgb_values> Neutral palette color 40
--oj-palette-neutral-rgb-50 <rgb_values> Neutral palette color 50
--oj-palette-neutral-rgb-60 <rgb_values> Neutral palette color 60
--oj-palette-neutral-rgb-70 <rgb_values> Neutral palette color 70
--oj-palette-neutral-rgb-80 <rgb_values> Neutral palette color 80
--oj-palette-neutral-rgb-90 <rgb_values> Neutral palette color 90
--oj-palette-neutral-rgb-100 <rgb_values> Neutral palette color 100
--oj-palette-neutral-rgb-110 <rgb_values> Neutral palette color 110
--oj-palette-neutral-rgb-120 <rgb_values> Neutral palette color 120
--oj-palette-neutral-rgb-130 <rgb_values> Neutral palette color 130
--oj-palette-neutral-rgb-140 <rgb_values> Neutral palette color 140
--oj-palette-neutral-rgb-150 <rgb_values> Neutral palette color 150
--oj-palette-neutral-rgb-160 <rgb_values> Neutral palette color 160
--oj-palette-neutral-rgb-170 <rgb_values> Neutral palette color 170
--oj-palette-neutral-rgb-180 <rgb_values> Neutral palette color 180
--oj-palette-neutral-rgb-190 <rgb_values> Neutral palette color 190
--oj-palette-neutral-rgb-200 <rgb_values> Neutral palette color 200
Palette Brand
CSS variables that specify the brand palette colors
Name Type Description
--oj-palette-brand-rgb-10 <rgb_values> Brand palette color 10
--oj-palette-brand-rgb-20 <rgb_values> Brand palette color 20
--oj-palette-brand-rgb-30 <rgb_values> Brand palette color 30
--oj-palette-brand-rgb-40 <rgb_values> Brand palette color 40
--oj-palette-brand-rgb-50 <rgb_values> Brand palette color 50
--oj-palette-brand-rgb-60 <rgb_values> Brand palette color 60
--oj-palette-brand-rgb-70 <rgb_values> Brand palette color 70
--oj-palette-brand-rgb-80 <rgb_values> Brand palette color 80
--oj-palette-brand-rgb-90 <rgb_values> Brand palette color 90
--oj-palette-brand-rgb-100 <rgb_values> Brand palette color 100
--oj-palette-brand-rgb-110 <rgb_values> Brand palette color 110
--oj-palette-brand-rgb-120 <rgb_values> Brand palette color 120
--oj-palette-brand-rgb-130 <rgb_values> Brand palette color 130
--oj-palette-brand-rgb-140 <rgb_values> Brand palette color 140
--oj-palette-brand-rgb-150 <rgb_values> Brand palette color 150
--oj-palette-brand-rgb-160 <rgb_values> Brand palette color 160
--oj-palette-brand-rgb-170 <rgb_values> Brand palette color 170
Palette Danger
CSS variables that specify the danger palette colors
Name Type Description
--oj-palette-danger-rgb-10 <rgb_values> Danger palette color 10
--oj-palette-danger-rgb-20 <rgb_values> Danger palette color 20
--oj-palette-danger-rgb-30 <rgb_values> Danger palette color 30
--oj-palette-danger-rgb-40 <rgb_values> Danger palette color 40
--oj-palette-danger-rgb-50 <rgb_values> Danger palette color 50
--oj-palette-danger-rgb-60 <rgb_values> Danger palette color 60
--oj-palette-danger-rgb-70 <rgb_values> Danger palette color 70
--oj-palette-danger-rgb-80 <rgb_values> Danger palette color 80
--oj-palette-danger-rgb-90 <rgb_values> Danger palette color 90
--oj-palette-danger-rgb-100 <rgb_values> Danger palette color 100
--oj-palette-danger-rgb-110 <rgb_values> Danger palette color 110
--oj-palette-danger-rgb-120 <rgb_values> Danger palette color 120
--oj-palette-danger-rgb-130 <rgb_values> Danger palette color 130
--oj-palette-danger-rgb-140 <rgb_values> Danger palette color 140
--oj-palette-danger-rgb-150 <rgb_values> Danger palette color 150
--oj-palette-danger-rgb-160 <rgb_values> Danger palette color 160
--oj-palette-danger-rgb-170 <rgb_values> Danger palette color 170
Palette Warning
CSS variables that specify the warning palette colors
Name Type Description
--oj-palette-warning-rgb-10 <rgb_values> Warning palette color 10
--oj-palette-warning-rgb-20 <rgb_values> Warning palette color 20
--oj-palette-warning-rgb-30 <rgb_values> Warning palette color 30
--oj-palette-warning-rgb-40 <rgb_values> Warning palette color 40
--oj-palette-warning-rgb-50 <rgb_values> Warning palette color 50
--oj-palette-warning-rgb-60 <rgb_values> Warning palette color 60
--oj-palette-warning-rgb-70 <rgb_values> Warning palette color 70
--oj-palette-warning-rgb-80 <rgb_values> Warning palette color 80
--oj-palette-warning-rgb-90 <rgb_values> Warning palette color 90
--oj-palette-warning-rgb-100 <rgb_values> Warning palette color 100
--oj-palette-warning-rgb-110 <rgb_values> Warning palette color 110
--oj-palette-warning-rgb-120 <rgb_values> Warning palette color 120
--oj-palette-warning-rgb-130 <rgb_values> Warning palette color 130
--oj-palette-warning-rgb-140 <rgb_values> Warning palette color 140
--oj-palette-warning-rgb-150 <rgb_values> Warning palette color 150
--oj-palette-warning-rgb-160 <rgb_values> Warning palette color 160
--oj-palette-warning-rgb-170 <rgb_values> Warning palette color 170
Palette Success
CSS variables that specify the success palette colors
Name Type Description
--oj-palette-success-rgb-10 <rgb_values> Success palette color 10
--oj-palette-success-rgb-20 <rgb_values> Success palette color 20
--oj-palette-success-rgb-30 <rgb_values> Success palette color 30
--oj-palette-success-rgb-40 <rgb_values> Success palette color 40
--oj-palette-success-rgb-50 <rgb_values> Success palette color 50
--oj-palette-success-rgb-60 <rgb_values> Success palette color 60
--oj-palette-success-rgb-70 <rgb_values> Success palette color 70
--oj-palette-success-rgb-80 <rgb_values> Success palette color 80
--oj-palette-success-rgb-90 <rgb_values> Success palette color 90
--oj-palette-success-rgb-100 <rgb_values> Success palette color 100
--oj-palette-success-rgb-110 <rgb_values> Success palette color 110
--oj-palette-success-rgb-120 <rgb_values> Success palette color 120
--oj-palette-success-rgb-130 <rgb_values> Success palette color 130
--oj-palette-success-rgb-140 <rgb_values> Success palette color 140
--oj-palette-success-rgb-150 <rgb_values> Success palette color 150
--oj-palette-success-rgb-160 <rgb_values> Success palette color 160
--oj-palette-success-rgb-170 <rgb_values> Success palette color 170
Palette Info
CSS variables that specify the info palette colors
Name Type Description
--oj-palette-info-rgb-10 <rgb_values> Info palette color 10
--oj-palette-info-rgb-20 <rgb_values> Info palette color 20
--oj-palette-info-rgb-30 <rgb_values> Info palette color 30
--oj-palette-info-rgb-40 <rgb_values> Info palette color 40
--oj-palette-info-rgb-50 <rgb_values> Info palette color 50
--oj-palette-info-rgb-60 <rgb_values> Info palette color 60
--oj-palette-info-rgb-70 <rgb_values> Info palette color 70
--oj-palette-info-rgb-80 <rgb_values> Info palette color 80
--oj-palette-info-rgb-90 <rgb_values> Info palette color 90
--oj-palette-info-rgb-100 <rgb_values> Info palette color 100
--oj-palette-info-rgb-110 <rgb_values> Info palette color 110
--oj-palette-info-rgb-120 <rgb_values> Info palette color 120
--oj-palette-info-rgb-130 <rgb_values> Info palette color 130
--oj-palette-info-rgb-140 <rgb_values> Info palette color 140
--oj-palette-info-rgb-150 <rgb_values> Info palette color 150
--oj-palette-info-rgb-160 <rgb_values> Info palette color 160
--oj-palette-info-rgb-170 <rgb_values> Info palette color 170
Palette Data Visualization
Data Visualization Web Components share a common color palette. Each data series is mapped in sequence to a palette color; once the last color in the palette is mapped, the sequence is restarted for any subsequent data series.
Name Type Description
--oj-palette-dvt-rgb-1 <rgb_values> Data Visualization palette color - 1st series
--oj-palette-dvt-rgb-2 <rgb_values> Data Visualization palette color - 2nd series
--oj-palette-dvt-rgb-3 <rgb_values> Data Visualization palette color - 3rd series
--oj-palette-dvt-rgb-4 <rgb_values> Data Visualization palette color - 4th series
--oj-palette-dvt-rgb-5 <rgb_values> Data Visualization palette color - 5th series
--oj-palette-dvt-rgb-6 <rgb_values> Data Visualization palette color - 6th series
--oj-palette-dvt-rgb-7 <rgb_values> Data Visualization palette color - 7th series
--oj-palette-dvt-rgb-8 <rgb_values> Data Visualization palette color - 8th series
--oj-palette-dvt-rgb-9 <rgb_values> Data Visualization palette color - 9th series
--oj-palette-dvt-rgb-10 <rgb_values> Data Visualization palette color - 10th series
--oj-palette-dvt-rgb-11 <rgb_values> Data Visualization palette color - 11th series
--oj-palette-dvt-rgb-12 <rgb_values> Data Visualization palette color - 12th series
Core
CSS variables used across many components.
Name Type Description
--oj-core-text-color-primary <color> Main text color
--oj-core-text-color-secondary <color> Secondary text color
--oj-core-text-color-disabled <color> Disabled text color
--oj-core-text-color-brand <color> Brand text color
--oj-core-text-color-danger <color> Danger text color
--oj-core-text-color-warning <color> Warning text color
--oj-core-text-color-success <color> Success text color
--oj-core-bg-color-content <color> General background color for content, for example for panels
--oj-core-bg-color-hover <color> Hover background color
--oj-core-bg-color-active <color> Active background color
--oj-core-bg-color-selected <color> Selected background color
--oj-core-border-color-selected <color> Selected border color
--oj-core-color-disabled-1 <color> Disabled color 1
--oj-core-color-disabled-2 <color> Disabled color 2
--oj-core-icon-size-lg <length> Large icon size
--oj-core-icon-size-sm <length> Small icon size
--oj-core-divider-color <color> Divider color
--oj-core-divider-margin <length> Divider margin
--oj-core-focus-border-color <color> Focus border color
--oj-core-cursor-clickable auto | pointer Clickable cursor
--oj-core-drag-drop-color-1 <color> Drag and drop color 1
--oj-core-drag-drop-color-2 <color> Drag and drop color 2
--oj-core-drag-drop-line-color <color> Drag and drop line color
--oj-core-touch-target-min-size <length> Touch target min size
--oj-core-box-shadow-rgb <rgb_values> Box shadow rgb values
--oj-core-box-shadow-xs Extra small box shadow
--oj-core-box-shadow-sm Small box shadow
--oj-core-box-shadow-md Medium box shadow
--oj-core-box-shadow-lg Large box shadow
--oj-core-box-shadow-xl Extra large box shadow
--oj-core-dropdown-box-shadow <color> Dropdown box shadow
--oj-core-scrim-color <color> Modal scrim color
--oj-core-spacing-1x <length> 1*x spacing, where x is a small unit like .25rem
--oj-core-spacing-2x <length> 2*x spacing, where x is some small unit like .25rem
--oj-core-spacing-3x <length> 3*x spacing, where x is some small unit like .25rem
--oj-core-spacing-4x <length> 4*x spacing, where x is some small unit like .25rem
--oj-core-spacing-5x <length> 5*x spacing, where x is some small unit like .25rem
--oj-core-spacing-6x <length> 6*x spacing, where x is some small unit like .25rem
--oj-core-spacing-7x <length> 7*x spacing, where x is some small unit like .25rem
--oj-core-spacing-8x <length> 8*x spacing, where x is some small unit like .25rem
--oj-core-spacing-9x <length> 9*x spacing, where x is some small unit like .25rem
--oj-core-spacing-10x <length> 10*x spacing, where x is some small unit like .25rem
--oj-core-spacing-11x <length> 11*x spacing, where x is some small unit like .25rem
--oj-core-spacing-12x <length> 12*x spacing, where x is some small unit like .25rem
--oj-core-border-radius-sm <length> Small border radius
--oj-core-border-radius-md <length> Medium border radius
--oj-core-border-radius-lg <length> Large border radius
--oj-core-border-radius-xl <length> xl border radius
--oj-core-z-index-popup <number> Z index for popup
--oj-core-z-index-dialog <number> Z index for dialog
--oj-core-z-index-messages <number> Z index for messages
Core Color
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.
Name Type Description
--oj-core-neutral-1 <color> Neutral color
--oj-core-neutral-2 <color> Neutral color 2
--oj-core-neutral-3 <color> Neutral color 3
--oj-core-neutral-contrast <color> Neutral contrast color
--oj-core-neutral-secondary-1 <color> Neutral secondary color
--oj-core-neutral-secondary-2 <color> Neutral secondary color 2
--oj-core-neutral-secondary-3 <color> Neutral secondary color 3
--oj-core-neutral-secondary-contrast <color> Neutral secondary contrast color
--oj-core-brand-1 <color> Brand color 1
--oj-core-brand-2 <color> Brand color 2
--oj-core-brand-3 <color> Brand color 3
--oj-core-brand-contrast <color> Brand color contrast
--oj-core-danger-1 <color> Danger color 1
--oj-core-danger-2 <color> Danger color 2
--oj-core-danger-3 <color> Danger color 3
--oj-core-danger-contrast <color> Danger color contrast
--oj-core-danger-secondary-1 <color> Danger color secondary 1
--oj-core-danger-secondary-2 <color> Danger color secondary 2
--oj-core-danger-secondary-3 <color> Danger color secondary 3
--oj-core-danger-secondary-contrast <color> Danger color secondary contrast
--oj-core-warning-1 <color> Warning color 1
--oj-core-warning-2 <color> Warning color 2
--oj-core-warning-3 <color> Warning color 3
--oj-core-warning-contrast <color> Warning color contrast
--oj-core-warning-secondary-1 <color> Warning secondary color 1
--oj-core-warning-secondary-2 <color> Warning secondary color 2
--oj-core-warning-secondary-3 <color> Warning secondary color 3
--oj-core-warning-secondary-contrast <color> Warning secondary color contrast
--oj-core-success-1 <color> Success color 1
--oj-core-success-2 <color> Success color 2
--oj-core-success-3 <color> Success color 3
--oj-core-success-contrast <color> Success color contrast
--oj-core-success-secondary-1 <color> Success secondary color 1
--oj-core-success-secondary-2 <color> Success secondary color 2
--oj-core-success-secondary-3 <color> Success secondary color 3
--oj-core-success-secondary-contrast <color> Success secondary color contrast
--oj-core-info-1 <color> Info color 1
--oj-core-info-2 <color> Info color 2
--oj-core-info-3 <color> Info color 3
--oj-core-info-contrast <color> Info color contrast
--oj-core-info-secondary-1 <color> Info secondary color 1
--oj-core-info-secondary-2 <color> Info secondary color 2
--oj-core-info-secondary-3 <color> Info secondary color 3
--oj-core-info-secondary-contrast <color> Info secondary color contrast
Typography
CSS variables that specify typography properties.
Name Type Description
--oj-typography-heading-2xl-font-size <length> 2xl heading font size
--oj-typography-heading-2xl-font-weight <font_weight> 2xl heading font weight
--oj-typography-heading-2xl-line-height <number> 2xl heading line height, value must be a unitless number
--oj-typography-heading-xl-font-size <length> xl heading font size
--oj-typography-heading-xl-font-weight <font_weight> xl heading font weight
--oj-typography-heading-xl-line-height <number> xl heading line height, value must be a unitless number
--oj-typography-heading-lg-font-size <length> Large heading font size
--oj-typography-heading-lg-font-weight <font_weight> Large heading font weight
--oj-typography-heading-lg-line-height <number> Large heading line height, value must be a unitless number
--oj-typography-heading-md-font-size <length> Medium heading font size
--oj-typography-heading-md-font-weight <font_weight> Medium heading font weight
--oj-typography-heading-md-line-height <number> Medium heading line height, value must be a unitless number
--oj-typography-heading-sm-font-size <length> Small heading font size
--oj-typography-heading-sm-font-weight <font_weight> Small heading font weight
--oj-typography-heading-sm-line-height <number> Small heading line height, value must be a unitless number
--oj-typography-heading-xs-font-size <length> xs heading font size
--oj-typography-heading-xs-font-weight <font_weight> xs heading font weight
--oj-typography-heading-xs-line-height <number> xs heading line height, value must be a unitless number
--oj-typography-subheading-2xl-font-size <length> 2xl subheading font size
--oj-typography-subheading-2xl-font-weight <font_weight> 2xl subheading font weight
--oj-typography-subheading-2xl-line-height <number> 2xl subheading line height, value must be a unitless number
--oj-typography-subheading-xl-font-size <length> xl subheading font size
--oj-typography-subheading-xl-font-weight <font_weight> xl subheading font weight
--oj-typography-subheading-xl-line-height <number> xl subheading line height, value must be a unitless number
--oj-typography-subheading-lg-font-size <length> Large subheading font size
--oj-typography-subheading-lg-font-weight <font_weight> Large subheading font weight
--oj-typography-subheading-lg-line-height <number> Large subheading line height, value must be a unitless number
--oj-typography-subheading-md-font-size <length> Medium subheading font size
--oj-typography-subheading-md-font-weight <font_weight> Medium subheading font weight
--oj-typography-subheading-md-line-height <number> Medium subheading line height, value must be a unitless number
--oj-typography-subheading-sm-font-size <length> Small subheading font size
--oj-typography-subheading-sm-font-weight <font_weight> Small subheading font weight
--oj-typography-subheading-sm-line-height <number> Small subheading line height, value must be a unitless number
--oj-typography-subheading-xs-font-size <length> xs subheading font size
--oj-typography-subheading-xs-font-weight <font_weight> xs subheading font weight
--oj-typography-subheading-xs-line-height <number> xs subheading line height, value must be a unitless number
--oj-typography-body-xl-font-size <length> xl body font size
--oj-typography-body-xl-line-height <number> xl body line height, value must be a unitless number
--oj-typography-body-lg-font-size <length> Large body font size
--oj-typography-body-lg-line-height <number> Large body line height, value must be a unitless number
--oj-typography-body-md-font-size <length> Medium body font size
--oj-typography-body-md-line-height <number> Medium body line height, value must be a unitless number
--oj-typography-body-sm-font-size <length> Small body font size
--oj-typography-body-sm-line-height <number> Small body line height, value must be a unitless number
--oj-typography-body-xs-font-size <length> xs body font size
--oj-typography-body-xs-line-height <number> xs body line height, value must be a unitless number
--oj-typography-body-2xs-font-size <length> 2xs body font size
--oj-typography-body-2xs-line-height <number> 2xs body line height, value must be a unitless number
Scrollbar
Scrollbar variables.
Name Type Description
--oj-scrollbar-thumb-color-hover <color> Scrollbar thumb hover color. Note that scrollbar variables are only applied on Windows
--oj-scrollbar-track-color-force <color> The track color is normally transparent, but this background color is used when a scrollbar is forced to show. Note that scrollbar variables are only applied on Windows
Animation Duration CSS
CSS variables that specify animation durations.
Name Type Description
--oj-animation-duration-xshort <time> Extra short animation duration
--oj-animation-duration-short <time> Short animation duration
--oj-animation-duration-medium <time> Medium animation duration
--oj-animation-duration-long <time> Long animation duration
--oj-animation-duration-xlong <time> Extra long animation duration
Animation Timing Function CSS
CSS variables that specify animation timing functions.
Name Description
--oj-animation-ease-in-out Timing function for animation ease-in-out
--oj-animation-ease-out Timing function for animation ease-out
--oj-animation-ease-in Timing function for animation ease-in
Animation Color CSS
CSS variables that specify animation colors.
Name Type Description
--oj-animation-effect-ripple-bg-color <color> Ripple animation effect background color
--oj-animation-skeleton-bg-start-color <color> Animation skeleton background start color
--oj-animation-skeleton-bg-end-color <color> Animation skeleton background end color
Tags
Variables used on tags like html, body, h1-h6, p, ul, ol, li, a.
Name Type Description
--oj-html-font-family Default font family
--oj-html-font-size <length> Default font size
--oj-body-bg-color <color> Body background color
--oj-heading-text-color <color> Heading text color
--oj-heading-margin-bottom <length> Heading bottom margin
--oj-heading-margin-top <length> Heading top margin
--oj-subheading-margin-top <length> Subheading top margin
--oj-subheading-margin-bottom <length> Subheading bottom margin
--oj-paragraph-margin-bottom <length> Paragraph bottom margin
--oj-list-margin-top <length> List top margin
--oj-list-nested-padding-start <length> Nested list start padding
--oj-list-item-line-height <number> List item line height
--oj-list-unordered-style-type Unordered list style type
--oj-link-text-decoration Link text decoration
--oj-link-text-decoration-hover Link hover text decoration
--oj-link-text-color <color> Link text color
--oj-link-text-color-active <color> Active link text color
--oj-link-text-color-visited <color> Visited link text color
--oj-link-embedded-text-decoration Embedded link text decoration
--oj-link-embedded-text-decoration-hover Embedded link hover text decoration
--oj-link-embedded-border-bottom-width <length> Embedded link bottom border width
--oj-link-embedded-border-bottom-width-hover <length> Embedded link bottom border hover width
Text Field
CSS variables that specify text field properties. Text fields allow users to input, edit, and select text. These variables are used by components like 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, and oj-select-many.
Name Type Description
--oj-text-field-sm-width <length> Small text field width
--oj-text-field-md-width <length> Medium text field width
--oj-text-field-border-radius <length> | <percentage> Text field border radius
--oj-text-field-border-width <length> Text field border width
--oj-text-field-icon-to-text-padding <length> Text field spacing between icon and text
--oj-text-field-icon-to-edge-padding <length> Text field spacing between icon and element edge
--oj-text-field-text-to-edge-padding <length> Text field spacing between text and element edge
--oj-text-field-text-align start | end Text field text align
--oj-text-field-height <length> Text field height
--oj-text-field-font-size <length> Text field font size
--oj-text-field-text-color <color> Text field text color
--oj-text-field-bg-color <color> Text field background color
--oj-text-field-border-color <color> Text field border color
--oj-text-field-placeholder-color <color> Text field placeholder color
--oj-text-field-placeholder-font-style Text field placeholder font style
--oj-text-field-bg-color-disabled <color> Disabled text field background color
--oj-text-field-border-color-disabled <color> Disabled text field border color
--oj-text-field-text-color-disabled <color> Disabled text field text color
--oj-text-field-border-color-focus <color> Focus text field border color
--oj-text-field-inside-edge-height <length> Text field inside edge height
--oj-text-field-inside-edge-padding-top <length> Text field inside edge top padding
--oj-text-field-inside-edge-label-color-error <color> Text field inside label edge error color
--oj-text-field-inside-edge-label-color-focus <color> Text field inside label edge focus color
--oj-text-field-inside-edge-label-color-warning <color> Text field inside label edge warning color
User Assistance CSS
CSS variables for user assistance.
Name Type Description
--oj-user-assistance-inline-text-color <color> User assistance inline text color
--oj-user-assistance-inline-font-size <length> User assistance inline font size
Collection
CSS variables used in collection components such as oj-table, oj-data-grid, and oj-list-view.
Name Type Description
--oj-collection-list-row-height <length> Collection list row height, --oj-collection-list* variables are for list view and table when display=list
--oj-collection-list-cell-padding-vertical <length> Collection list cell padding vertical, --oj-collection-list* variables are for list view and table when display=list
--oj-collection-grid-row-height <length> Collection grid row height, --oj-collection-grid* variables are for data grid and table when display=grid
--oj-collection-grid-header-height <length> Collection grid header height, --oj-collection-grid* variables are for data grid and table when display=grid
--oj-collection-grid-cell-padding <length> Collection grid cell padding, --oj-collection-grid* variables are for data grid and table when display=grid
--oj-collection-bg-color <color> Collection background color
--oj-collection-border-color <color> Collection border color
--oj-collection-free-space-bg-color <color> Collection free space background color
--oj-collection-default-sort-icon-display none | block Collection default sort icon display
--oj-collection-cell-banded-bg-color <color> Collection banded cell background color
--oj-collection-header-font-size <length> Collection header font size
--oj-collection-header-font-weight <font_weight> Collection header font weight
--oj-collection-header-bg-color <color> Collection header background color
--oj-collection-header-text-color <color> Collection header text color
--oj-collection-header-bg-color-hover <color> Collection header hover background color
--oj-collection-header-bg-color-selected <color> Collection header selected background color
--oj-collection-editable-cell-border-color-focus <color> Collection editable cell border color focus
--oj-collection-editable-cell-bg-color-read-only <color> Collection editable cell background color on read only
DVT
Shared data visualization variables.
Name Type Description
--oj-dvt-danger-color <color> DVT danger color, used as a gauge threshold color and stock chart falling color
--oj-dvt-warning-color <color> DVT warning color, used as a gauge threshold color
--oj-dvt-success-color <color> DVT success color, used as a gauge threshold color and stock chart rising color
--oj-dvt-item-border-color-selected <color> DVT item selected border color, used for selected node borders in sunburst, diagram, treemap, timeline, thematic map, nbox, and gantt
--oj-dvt-item-contrast-color <color> DVT item contrast color, used as hover/selected inner contrast color in sunburst, diagram, treemap, nbox , and thematic map nodes
--oj-dvt-marquee-color <color> DVT marquee color, used by marquee multiple selection-mode in chart
--oj-dvt-marquee-border-color <color> DVT marquee border color, used by marquee multiple selection-mode in chart
--oj-dvt-contrast-line-color <color> DVT contrast line color, used for reference line contrast line, data cursor contrast line in chart, and marquee inner stroke
--oj-dvt-reference-object-area-color <color> DVT reference object area color, used for reference area color in chart and gantt
--oj-dvt-reference-object-line-color <color> DVT reference object line color, used for reference line primary line, data cursor contrast line in chart and gantt
--oj-dvt-overview-bg-color <color> DVT overview background color, used in overview in diagram and timeline
--oj-dvt-overview-window-bg-color <color> DVT overview window background color, used in overview in diagram and timeline
--oj-dvt-overview-window-border-color <color> DVT overview window border color, used in overview in diagram and timeline
--oj-dvt-label-font-size-sm <length> DVT label small font size, used in chart axis, data label, and legend text
--oj-dvt-label-font-size-md <length> DVT label medium font size, used in sunburst, diagram, and n-box node data labels
--oj-dvt-node-border-color-hover <color> DVT node hover border color, used when hovering over nodes in sunburst and treemap
Buttonset
Buttonset variables.
Name Type Description
--oj-buttonset-outlined-chrome-internal-border-color <color> Outlined chrome buttonset internal border color
--oj-buttonset-outlined-chrome-internal-border-color-active <color> Outlined chrome buttonset internal active border color
--oj-buttonset-outlined-chrome-internal-border-color-selected <color> Outlined chrome buttonset internal selected border color
--oj-buttonset-outlined-chrome-internal-border-color-selected-disabled <color> Outlined chrome buttonset internal selected disabled border color
Form Control
CSS variables used in form controls
Name Type Description
--oj-form-control-font-weight-read-only <font_weight> Form control font weight read only
List box
CSS variables used in list box. List box is a dropdown used in select and combobox.
Name Type Description
--oj-listbox-item-padding-horizontal <length> List box item padding horizontal
Radioset-checkboxset
CSS variables used by oj-radioset and oj-checkboxset.
Name Type Description
--oj-radio-checkbox-width <length> | <percentage> | auto Radio button or checkbox width
--oj-radio-checkbox-row-height <length> Radio button or checkbox row height
--oj-radio-checkbox-input-size <length> Size of the radio button or checkbox
--oj-radio-checkbox-input-color-unselected <color> Color of the radio button or checkbox when not selected
--oj-radio-checkbox-input-color-selected <color> Color of the radio button or checkbox when selected
--oj-radio-checkbox-label-to-edge-padding <length> Radio button or checkbox label-edge padding
--oj-radio-checkbox-input-to-label-padding <length> Padding between radio button or checkbox and label
--oj-radio-checkbox-input-to-edge-padding <length> Padding between radioset edge and radio button or checkboxset edge and checkbox
--oj-radio-checkbox-item-divider-color <color> Radioset or checkboxset item divider color
--oj-radio-checkbox-input-transform-active Radio button or checkbox transformation when active
--oj-radio-checkbox-item-bg-color-active <color> Radioset or checkboxset item background color when active
Tooltip
Tooltip variables used by data visualizations.
Name Type Description
--oj-tooltip-border-radius <length> | <percentage> Tooltip border radius
--oj-tooltip-bg-color <color> Tooltip background color
--oj-tooltip-border-color <color> Tooltip border color
--oj-tooltip-text-color <color> Tooltip text color
--oj-tooltip-font-size <length> Tooltip font size
--oj-tooltip-line-height <number> Tooltip line height
--oj-tooltip-padding <length> Tooltip padding