Styling: CSSVariables
Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01
Description
CSS Variables
-
CSS Variables
-
Palette Neutral
-
Palette Brand
-
Palette Danger
-
Palette Warning
-
Palette Success
-
Palette Info
-
Palette Data Visualization
-
Core
-
Core Color
-
Typography
-
Scrollbar
-
Animation Duration CSS
-
Animation Timing Function CSS
-
Animation Color CSS
-
Tags
-
Text Field
-
User Assistance CSS
-
Collection
-
DVT
-
Buttonset
-
Form Control
-
List box
-
Radioset-checkboxset
-
Tooltip
See JET CSS Variables for additional details.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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-border-color-enabled |
<color> | Enabled 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 |
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 |
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 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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 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 |
CSS variables used in form controls
| Name | Type | Description |
|---|---|---|
--oj-form-control-font-weight-read-only |
<font_weight> | Form control font weight read only |
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 |
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 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 |