diff --git a/.storybook/main.js b/.storybook/main.js
index 5dc87af38..0c68122e6 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,15 +1,13 @@
/**
* @file Configuration.
- * @copyright IBM Security 2020
+ * @copyright IBM Security 2020 - 2021
*/
-const { sync } = require('git-branch');
-const { merge } = require('webpack-merge');
-
const { BRANCH, CIRCLE_BRANCH } = process.env;
// Pass the branch name from Netlify, CircleCI, or the local branch.
-process.env.STORYBOOK_BRANCH = BRANCH || CIRCLE_BRANCH || sync();
+process.env.STORYBOOK_BRANCH =
+ BRANCH || CIRCLE_BRANCH || require('git-branch').sync();
module.exports = {
addons: [
@@ -26,7 +24,10 @@ module.exports = {
],
stories: ['../src/**/*.stories.*'],
webpackFinal: async configuration =>
- merge(configuration, {
+ require('webpack-merge').merge(configuration, {
+ devServer: {
+ stats: 'errors-only',
+ },
module: {
rules: [
{
diff --git a/docs/migration/2.x/themes.md b/docs/migration/2.x/themes.md
index 3fe99b02b..9abe7aa4d 100644
--- a/docs/migration/2.x/themes.md
+++ b/docs/migration/2.x/themes.md
@@ -1,5 +1,13 @@
# Themes
+To align with [Carbon's support for inline theming with CSS custom properties](https://medium.com/carbondesign/whats-coming-to-carbon-in-2021-39a4c7d1762a), theme-related feature flags and variables, instead of referencing Carbon for IBM Security-specific members, now directly reference underlying Carbon feature flags and members to provide consistency in accessing common variables.
+
+### Feature flags
+
+| `1.x` | `2.x` |
+| --------------------------------------- | ------------------------------ |
+| `security--css-custom-property-theming` | `enable-css-custom-properties` |
+
### Functions
| `1.x` | `2.x` |
@@ -8,6 +16,7 @@
### Variables
-| `1.x` | `2.x` |
-| ------------------ | -------------------------------- |
-| `$security--theme` | [Themes](../../themes/README.md) |
+| `1.x` | `2.x` |
+| --------------------------------------------------- | --------------------------------------- |
+| `$security--theme` | [Themes](../../themes/README.md) |
+| `var(--token)`, for example `var(--interactive-01)` | `$token`, for example `$interactive-01` |
diff --git a/docs/themes/README.md b/docs/themes/README.md
index 4a6bdcb5c..cacf92aad 100644
--- a/docs/themes/README.md
+++ b/docs/themes/README.md
@@ -4,7 +4,7 @@
## Usage
-Themes are used for applying color and offered by outputting Carbon for IBM Security-specific [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) as theme tokens, independently of [Carbon's experimental `enable-css-custom-properties` feature flag](https://github.com/carbon-design-system/carbon/blob/main/packages/components/src/globals/scss/_feature-flags.scss).
+Themes are used for applying color and offered by outputting [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) as theme tokens.
Each theme is assigned universal color variables, which are determined by [common roles and usage](https://www.carbondesignsystem.com/guidelines/color/usage). This allows for uniform color application across themes while maintaining full styling flexibility.
@@ -22,15 +22,6 @@ Currently, only 2 themes are supported: **Gray 100**, activated by default, and
| Gray 100 (default) | `security--theme--g100` |
| Cool gray 10 | `security--theme--cg10` |
-#### Tokens
-
-All of the components' processed and minified styles automatically includes and initializes all tokens as CSS custom properties for use with CSS. For example:
-
-```css
-var(--interactive-01);
-var(--interactive-02);
-```
-
### Sass
If your project is using Sass, you can include the following in your Sass file:
diff --git a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
index c854853a9..8fb7f5651 100644
--- a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
+++ b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
@@ -3,210 +3,666 @@
exports[`SCSS Bundle 1`] = `
".security--input__background__color--light .bx--date-picker__input, .security--input__background__color--light .bx--dropdown,
.security--input__background__color--light .bx--number input[type=\\"number\\"], .security--input__background__color--light .bx--search-input, .security--input__background__color--light .bx--select-input, .security--input__background__color--light .bx--text-area, .security--input__background__color--light .bx--text-input, .security--input__background__color--light .bx--list-box, .security--input__background__color--light .bx--list-box__menu, .security--input__background__color--light .security--button--icon:focus, .security--input__background__color--light .security--button--icon:hover, .security--card .bx--number .security--input__background__color--light input[type=\\"number\\"], .security--tearsheet--small .bx--number .security--input__background__color--light input[type=\\"number\\"], .security--tearsheet .bx--number .security--input__background__color--light input[type=\\"number\\"] {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.security--theme--cg10 {
- --interactive-01: #0f62fe;
- --interactive-02: #343a3f;
- --interactive-03: #0f62fe;
- --interactive-04: #0f62fe;
- --ui-background: #f2f4f8;
- --ui-01: #ffffff;
- --ui-02: #f2f4f8;
- --ui-03: #dde1e6;
- --ui-04: #878d96;
- --ui-05: #121619;
- --text-01: #121619;
- --text-02: #4d5358;
- --text-03: #a2a9b0;
- --text-04: #ffffff;
- --text-05: #697077;
- --text-error: #da1e28;
- --icon-01: #121619;
- --icon-02: #4d5358;
- --icon-03: #ffffff;
- --link-01: #0f62fe;
- --link-02: #0043ce;
- --inverse-link: #78a9ff;
- --field-01: #ffffff;
- --field-02: #f2f4f8;
- --inverse-01: #ffffff;
- --inverse-02: #343a3f;
- --support-01: #da1e28;
- --support-02: #24a148;
- --support-03: #f1c21b;
- --support-04: #0043ce;
- --inverse-support-01: #fa4d56;
- --inverse-support-02: #42be65;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #4589ff;
- --overlay-01: rgba(22, 22, 22, 0.5);
- --danger-01: #da1e28;
- --danger-02: #da1e28;
- --focus: #0f62fe;
- --inverse-focus-ui: #ffffff;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #0043ce;
- --hover-secondary: #464c51;
- --active-secondary: #697077;
- --hover-tertiary: #0353e9;
- --active-tertiary: #002d9c;
- --hover-ui: #e0e4ea;
- --hover-light-ui: #e5e5e5;
- --active-ui: #c1c7cd;
- --active-light-ui: #c1c7cd;
- --selected-ui: #dde1e6;
- --selected-light-ui: #dde1e6;
- --inverse-hover-ui: #464c51;
- --hover-selected-ui: #c4c9d1;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #e0e4ea;
- --visited-link: #8a3ffc;
- --disabled-01: #ffffff;
- --disabled-02: #c1c7cd;
- --disabled-03: #878d96;
- --highlight: #edf5ff;
- --decorative-01: #dde1e6;
- --button-separator: #dde1e6;
- --skeleton-01: #e0e4ea;
- --skeleton-02: #c1c7cd;
- --brand-01: #0f62fe;
- --brand-02: #343a3f;
- --brand-03: #0f62fe;
- --active-01: #c1c7cd;
- --hover-field: #e0e4ea;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #343a3f;
+ --cds-interactive-03: #0f62fe;
+ --cds-interactive-04: #0f62fe;
+ --cds-ui-background: #f2f4f8;
+ --cds-ui-01: #ffffff;
+ --cds-ui-02: #f2f4f8;
+ --cds-ui-03: #dde1e6;
+ --cds-ui-04: #878d96;
+ --cds-ui-05: #121619;
+ --cds-text-01: #121619;
+ --cds-text-02: #4d5358;
+ --cds-text-03: #a2a9b0;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #697077;
+ --cds-text-error: #da1e28;
+ --cds-icon-01: #121619;
+ --cds-icon-02: #4d5358;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #0f62fe;
+ --cds-link-02: #0043ce;
+ --cds-inverse-link: #78a9ff;
+ --cds-field-01: #ffffff;
+ --cds-field-02: #f2f4f8;
+ --cds-inverse-01: #ffffff;
+ --cds-inverse-02: #343a3f;
+ --cds-support-01: #da1e28;
+ --cds-support-02: #24a148;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #0043ce;
+ --cds-inverse-support-01: #fa4d56;
+ --cds-inverse-support-02: #42be65;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #4589ff;
+ --cds-overlay-01: rgba(22, 22, 22, 0.5);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #da1e28;
+ --cds-focus: #0f62fe;
+ --cds-inverse-focus-ui: #ffffff;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #0043ce;
+ --cds-hover-secondary: #464c51;
+ --cds-active-secondary: #697077;
+ --cds-hover-tertiary: #0353e9;
+ --cds-active-tertiary: #002d9c;
+ --cds-hover-ui: #e0e4ea;
+ --cds-hover-light-ui: #e5e5e5;
+ --cds-hover-selected-ui: #c4c9d1;
+ --cds-active-ui: #c1c7cd;
+ --cds-active-light-ui: #c1c7cd;
+ --cds-selected-ui: #dde1e6;
+ --cds-selected-light-ui: #dde1e6;
+ --cds-inverse-hover-ui: #464c51;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #e0e4ea;
+ --cds-visited-link: #8a3ffc;
+ --cds-disabled-01: #ffffff;
+ --cds-disabled-02: #c1c7cd;
+ --cds-disabled-03: #878d96;
+ --cds-highlight: #edf5ff;
+ --cds-decorative-01: #dde1e6;
+ --cds-button-separator: #dde1e6;
+ --cds-skeleton-01: #e0e4ea;
+ --cds-skeleton-02: #c1c7cd;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #343a3f;
+ --cds-brand-03: #0f62fe;
+ --cds-active-01: #c1c7cd;
+ --cds-hover-field: #e0e4ea;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #343a3f);
+ --interactive-03: var(--cds-interactive-03, #0f62fe);
+ --interactive-04: var(--cds-interactive-04, #0f62fe);
+ --ui-background: var(--cds-ui-background, #f2f4f8);
+ --ui-01: var(--cds-ui-01, #ffffff);
+ --ui-02: var(--cds-ui-02, #f2f4f8);
+ --ui-03: var(--cds-ui-03, #dde1e6);
+ --ui-04: var(--cds-ui-04, #878d96);
+ --ui-05: var(--cds-ui-05, #121619);
+ --text-01: var(--cds-text-01, #121619);
+ --text-02: var(--cds-text-02, #4d5358);
+ --text-03: var(--cds-text-03, #a2a9b0);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #697077);
+ --text-error: var(--cds-text-error, #da1e28);
+ --icon-01: var(--cds-icon-01, #121619);
+ --icon-02: var(--cds-icon-02, #4d5358);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #0f62fe);
+ --link-02: var(--cds-link-02, #0043ce);
+ --inverse-link: var(--cds-inverse-link, #78a9ff);
+ --field-01: var(--cds-field-01, #ffffff);
+ --field-02: var(--cds-field-02, #f2f4f8);
+ --inverse-01: var(--cds-inverse-01, #ffffff);
+ --inverse-02: var(--cds-inverse-02, #343a3f);
+ --support-01: var(--cds-support-01, #da1e28);
+ --support-02: var(--cds-support-02, #24a148);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #0043ce);
+ --inverse-support-01: var(--cds-inverse-support-01, #fa4d56);
+ --inverse-support-02: var(--cds-inverse-support-02, #42be65);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #4589ff);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #da1e28);
+ --focus: var(--cds-focus, #0f62fe);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #ffffff);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #0043ce);
+ --hover-secondary: var(--cds-hover-secondary, #464c51);
+ --active-secondary: var(--cds-active-secondary, #697077);
+ --hover-tertiary: var(--cds-hover-tertiary, #0353e9);
+ --active-tertiary: var(--cds-active-tertiary, #002d9c);
+ --hover-ui: var(--cds-hover-ui, #e0e4ea);
+ --hover-light-ui: var(--cds-hover-light-ui, #e5e5e5);
+ --active-ui: var(--cds-active-ui, #c1c7cd);
+ --active-light-ui: var(--cds-active-light-ui, #c1c7cd);
+ --selected-ui: var(--cds-selected-ui, #dde1e6);
+ --selected-light-ui: var(--cds-selected-light-ui, #dde1e6);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #464c51);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #c4c9d1);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #e0e4ea);
+ --visited-link: var(--cds-visited-link, #8a3ffc);
+ --disabled-01: var(--cds-disabled-01, #ffffff);
+ --disabled-02: var(--cds-disabled-02, #c1c7cd);
+ --disabled-03: var(--cds-disabled-03, #878d96);
+ --highlight: var(--cds-highlight, #edf5ff);
+ --decorative-01: var(--cds-decorative-01, #dde1e6);
+ --button-separator: var(--cds-button-separator, #dde1e6);
+ --skeleton-01: var(--cds-skeleton-01, #e0e4ea);
+ --skeleton-02: var(--cds-skeleton-02, #c1c7cd);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #343a3f);
+ --brand-03: var(--cds-brand-03, #0f62fe);
+ --active-01: var(--cds-active-01, #c1c7cd);
+ --hover-field: var(--cds-hover-field, #e0e4ea);
+ --danger: var(--cds-danger, #da1e28);
}
.security--theme--g100 {
- --interactive-01: #0f62fe;
- --interactive-02: #6f6f6f;
- --interactive-03: #ffffff;
- --interactive-04: #4589ff;
- --ui-background: #161616;
- --ui-01: #262626;
- --ui-02: #393939;
- --ui-03: #393939;
- --ui-04: #6f6f6f;
- --ui-05: #f4f4f4;
- --text-01: #f4f4f4;
- --text-02: #c6c6c6;
- --text-03: #6f6f6f;
- --text-04: #ffffff;
- --text-05: #8d8d8d;
- --text-error: #ff8389;
- --icon-01: #f4f4f4;
- --icon-02: #c6c6c6;
- --icon-03: #ffffff;
- --link-01: #78a9ff;
- --link-02: #a6c8ff;
- --inverse-link: #0f62fe;
- --field-01: #262626;
- --field-02: #393939;
- --inverse-01: #161616;
- --inverse-02: #f4f4f4;
- --support-01: #fa4d56;
- --support-02: #42be65;
- --support-03: #f1c21b;
- --support-04: #4589ff;
- --inverse-support-01: #da1e28;
- --inverse-support-02: #24a148;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #0f62fe;
- --overlay-01: rgba(22, 22, 22, 0.7);
- --danger-01: #da1e28;
- --danger-02: #fa4d56;
- --focus: #ffffff;
- --inverse-focus-ui: #0f62fe;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #a6c8ff;
- --hover-secondary: #606060;
- --active-secondary: #393939;
- --hover-tertiary: #f4f4f4;
- --active-tertiary: #c6c6c6;
- --hover-ui: #353535;
- --hover-light-ui: #4c4c4c;
- --active-ui: #525252;
- --active-light-ui: #6f6f6f;
- --selected-ui: #393939;
- --selected-light-ui: #525252;
- --inverse-hover-ui: #e5e5e5;
- --hover-selected-ui: #4c4c4c;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #353535;
- --visited-link: #be95ff;
- --disabled-01: #262626;
- --disabled-02: #525252;
- --disabled-03: #8d8d8d;
- --highlight: #002d9c;
- --decorative-01: #525252;
- --button-separator: #161616;
- --skeleton-01: #353535;
- --skeleton-02: #525252;
- --brand-01: #0f62fe;
- --brand-02: #6f6f6f;
- --brand-03: #ffffff;
- --active-01: #525252;
- --hover-field: #353535;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #6f6f6f;
+ --cds-interactive-03: #ffffff;
+ --cds-interactive-04: #4589ff;
+ --cds-ui-background: #161616;
+ --cds-ui-01: #262626;
+ --cds-ui-02: #393939;
+ --cds-ui-03: #393939;
+ --cds-ui-04: #6f6f6f;
+ --cds-ui-05: #f4f4f4;
+ --cds-text-01: #f4f4f4;
+ --cds-text-02: #c6c6c6;
+ --cds-text-03: #6f6f6f;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #8d8d8d;
+ --cds-text-error: #ff8389;
+ --cds-icon-01: #f4f4f4;
+ --cds-icon-02: #c6c6c6;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #78a9ff;
+ --cds-link-02: #a6c8ff;
+ --cds-inverse-link: #0f62fe;
+ --cds-field-01: #262626;
+ --cds-field-02: #393939;
+ --cds-inverse-01: #161616;
+ --cds-inverse-02: #f4f4f4;
+ --cds-support-01: #fa4d56;
+ --cds-support-02: #42be65;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #4589ff;
+ --cds-inverse-support-01: #da1e28;
+ --cds-inverse-support-02: #24a148;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #0f62fe;
+ --cds-overlay-01: rgba(22, 22, 22, 0.7);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #fa4d56;
+ --cds-focus: #ffffff;
+ --cds-inverse-focus-ui: #0f62fe;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #a6c8ff;
+ --cds-hover-secondary: #606060;
+ --cds-active-secondary: #393939;
+ --cds-hover-tertiary: #f4f4f4;
+ --cds-active-tertiary: #c6c6c6;
+ --cds-hover-ui: #353535;
+ --cds-hover-light-ui: #4c4c4c;
+ --cds-hover-selected-ui: #4c4c4c;
+ --cds-active-ui: #525252;
+ --cds-active-light-ui: #6f6f6f;
+ --cds-selected-ui: #393939;
+ --cds-selected-light-ui: #525252;
+ --cds-inverse-hover-ui: #e5e5e5;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #353535;
+ --cds-visited-link: #be95ff;
+ --cds-disabled-01: #262626;
+ --cds-disabled-02: #525252;
+ --cds-disabled-03: #8d8d8d;
+ --cds-highlight: #002d9c;
+ --cds-decorative-01: #525252;
+ --cds-button-separator: #161616;
+ --cds-skeleton-01: #353535;
+ --cds-skeleton-02: #525252;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #6f6f6f;
+ --cds-brand-03: #ffffff;
+ --cds-active-01: #525252;
+ --cds-hover-field: #353535;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #6f6f6f);
+ --interactive-03: var(--cds-interactive-03, #ffffff);
+ --interactive-04: var(--cds-interactive-04, #4589ff);
+ --ui-background: var(--cds-ui-background, #161616);
+ --ui-01: var(--cds-ui-01, #262626);
+ --ui-02: var(--cds-ui-02, #393939);
+ --ui-03: var(--cds-ui-03, #393939);
+ --ui-04: var(--cds-ui-04, #6f6f6f);
+ --ui-05: var(--cds-ui-05, #f4f4f4);
+ --text-01: var(--cds-text-01, #f4f4f4);
+ --text-02: var(--cds-text-02, #c6c6c6);
+ --text-03: var(--cds-text-03, #6f6f6f);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #8d8d8d);
+ --text-error: var(--cds-text-error, #ff8389);
+ --icon-01: var(--cds-icon-01, #f4f4f4);
+ --icon-02: var(--cds-icon-02, #c6c6c6);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #78a9ff);
+ --link-02: var(--cds-link-02, #a6c8ff);
+ --inverse-link: var(--cds-inverse-link, #0f62fe);
+ --field-01: var(--cds-field-01, #262626);
+ --field-02: var(--cds-field-02, #393939);
+ --inverse-01: var(--cds-inverse-01, #161616);
+ --inverse-02: var(--cds-inverse-02, #f4f4f4);
+ --support-01: var(--cds-support-01, #fa4d56);
+ --support-02: var(--cds-support-02, #42be65);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #4589ff);
+ --inverse-support-01: var(--cds-inverse-support-01, #da1e28);
+ --inverse-support-02: var(--cds-inverse-support-02, #24a148);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #0f62fe);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #fa4d56);
+ --focus: var(--cds-focus, #ffffff);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #0f62fe);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #a6c8ff);
+ --hover-secondary: var(--cds-hover-secondary, #606060);
+ --active-secondary: var(--cds-active-secondary, #393939);
+ --hover-tertiary: var(--cds-hover-tertiary, #f4f4f4);
+ --active-tertiary: var(--cds-active-tertiary, #c6c6c6);
+ --hover-ui: var(--cds-hover-ui, #353535);
+ --hover-light-ui: var(--cds-hover-light-ui, #4c4c4c);
+ --active-ui: var(--cds-active-ui, #525252);
+ --active-light-ui: var(--cds-active-light-ui, #6f6f6f);
+ --selected-ui: var(--cds-selected-ui, #393939);
+ --selected-light-ui: var(--cds-selected-light-ui, #525252);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #e5e5e5);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #4c4c4c);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #353535);
+ --visited-link: var(--cds-visited-link, #be95ff);
+ --disabled-01: var(--cds-disabled-01, #262626);
+ --disabled-02: var(--cds-disabled-02, #525252);
+ --disabled-03: var(--cds-disabled-03, #8d8d8d);
+ --highlight: var(--cds-highlight, #002d9c);
+ --decorative-01: var(--cds-decorative-01, #525252);
+ --button-separator: var(--cds-button-separator, #161616);
+ --skeleton-01: var(--cds-skeleton-01, #353535);
+ --skeleton-02: var(--cds-skeleton-02, #525252);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #6f6f6f);
+ --brand-03: var(--cds-brand-03, #ffffff);
+ --active-01: var(--cds-active-01, #525252);
+ --hover-field: var(--cds-hover-field, #353535);
+ --danger: var(--cds-danger, #da1e28);
}
h1 {
- font-size: 2.625rem;
- font-weight: 300;
- line-height: 1.199;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-06-font-size, 2.625rem);
+ font-weight: var(--cds-productive-heading-06-font-weight, 300);
+ line-height: var(--cds-productive-heading-06-line-height, 1.199);
+ letter-spacing: var(--cds-productive-heading-06-letter-spacing, 0);
}
h2 {
- font-size: 2rem;
- font-weight: 400;
- line-height: 1.25;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-05-font-size, 2rem);
+ font-weight: var(--cds-productive-heading-05-font-weight, 400);
+ line-height: var(--cds-productive-heading-05-line-height, 1.25);
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
}
h3 {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
}
h4 {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
}
h5 {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
}
h6 {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
}
p {
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.5;
- letter-spacing: 0;
+ font-size: var(--cds-body-long-02-font-size, 1rem);
+ font-weight: var(--cds-body-long-02-font-weight, 400);
+ line-height: var(--cds-body-long-02-line-height, 1.5);
+ letter-spacing: var(--cds-body-long-02-letter-spacing, 0);
}
a {
- color: var(--link-01, #78a9ff);
+ color: #78a9ff;
}
em {
@@ -2225,38 +2681,38 @@ body {
}
.ibm-type-a {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.ibm-type-b {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
}
.ibm-type-c {
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-body-short-02-font-size, 1rem);
+ font-weight: var(--cds-body-short-02-font-weight, 400);
+ line-height: var(--cds-body-short-02-line-height, 1.375);
+ letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
}
.ibm-type-d {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-heading-02-font-size, 1rem);
+ font-weight: var(--cds-heading-02-font-weight, 600);
+ line-height: var(--cds-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-heading-02-letter-spacing, 0);
}
.ibm-type-e {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
}
.ibm-type-f {
@@ -2264,20 +2720,36 @@ body {
font-weight: 400;
line-height: 1.29;
letter-spacing: 0;
+ font-size: calc(1.75rem + 0 * ((100vw - 20rem) / 62));
+}
+
+@media (min-width: 82rem) {
+ .ibm-type-f {
+ font-size: 1.75rem;
+ line-height: 1.25;
+ font-size: calc(1.75rem + 0.25 * ((100vw - 82rem) / 17));
+ }
+}
+
+@media (min-width: 99rem) {
+ .ibm-type-f {
+ font-size: 2rem;
+ font-size: 2rem;
+ }
}
.ibm-type-g {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
}
.ibm-type-h {
- font-size: 2rem;
- font-weight: 400;
- line-height: 1.25;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-05-font-size, 2rem);
+ font-weight: var(--cds-productive-heading-05-font-weight, 400);
+ line-height: var(--cds-productive-heading-05-line-height, 1.25);
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
}
.ibm-type-i {
@@ -2285,6 +2757,37 @@ body {
font-weight: 300;
line-height: 1.19;
letter-spacing: 0;
+ font-size: calc(2.625rem + 0 * ((100vw - 20rem) / 22));
+}
+
+@media (min-width: 42rem) {
+ .ibm-type-i {
+ font-size: 2.625rem;
+ font-size: calc(2.625rem + 0.75 * ((100vw - 42rem) / 24));
+ }
+}
+
+@media (min-width: 66rem) {
+ .ibm-type-i {
+ font-size: 3.375rem;
+ font-size: calc(3.375rem + 0.375 * ((100vw - 66rem) / 16));
+ }
+}
+
+@media (min-width: 82rem) {
+ .ibm-type-i {
+ font-size: 3.75rem;
+ line-height: 1.17;
+ font-size: calc(3.75rem + 1 * ((100vw - 82rem) / 17));
+ }
+}
+
+@media (min-width: 99rem) {
+ .ibm-type-i {
+ font-size: 4.75rem;
+ line-height: 1.13;
+ font-size: 4.75rem;
+ }
}
.ibm-type-j {
@@ -2292,6 +2795,41 @@ body {
font-weight: 300;
line-height: 1.19;
letter-spacing: 0;
+ font-size: calc(2.625rem + 1.625 * ((100vw - 20rem) / 22));
+}
+
+@media (min-width: 42rem) {
+ .ibm-type-j {
+ font-size: 4.25rem;
+ line-height: 1.15;
+ font-size: calc(4.25rem + 1.5 * ((100vw - 42rem) / 24));
+ }
+}
+
+@media (min-width: 66rem) {
+ .ibm-type-j {
+ font-size: 5.75rem;
+ line-height: 1.11;
+ letter-spacing: -0.64px;
+ font-size: calc(5.75rem + 1.875 * ((100vw - 66rem) / 16));
+ }
+}
+
+@media (min-width: 82rem) {
+ .ibm-type-j {
+ font-size: 7.625rem;
+ line-height: 1.07;
+ font-size: calc(7.625rem + 2.125 * ((100vw - 82rem) / 17));
+ }
+}
+
+@media (min-width: 99rem) {
+ .ibm-type-j {
+ font-size: 9.75rem;
+ line-height: 1.05;
+ letter-spacing: -0.96px;
+ font-size: 9.75rem;
+ }
}
.ibm-type-k {
@@ -2299,6 +2837,42 @@ body {
font-weight: 600;
line-height: 1.19;
letter-spacing: 0;
+ font-size: calc(2.625rem + 1.625 * ((100vw - 20rem) / 22));
+}
+
+@media (min-width: 42rem) {
+ .ibm-type-k {
+ font-size: 4.25rem;
+ line-height: 1.15;
+ font-size: calc(4.25rem + 1.5 * ((100vw - 42rem) / 24));
+ }
+}
+
+@media (min-width: 66rem) {
+ .ibm-type-k {
+ font-size: 5.75rem;
+ line-height: 1.11;
+ letter-spacing: -0.64px;
+ font-size: calc(5.75rem + 1.875 * ((100vw - 66rem) / 16));
+ }
+}
+
+@media (min-width: 82rem) {
+ .ibm-type-k {
+ font-size: 7.625rem;
+ line-height: 1.07;
+ letter-spacing: -0.64px;
+ font-size: calc(7.625rem + 2.125 * ((100vw - 82rem) / 17));
+ }
+}
+
+@media (min-width: 99rem) {
+ .ibm-type-k {
+ font-size: 9.75rem;
+ line-height: 1.05;
+ letter-spacing: -0.96px;
+ font-size: 9.75rem;
+ }
}
.bx--link {
@@ -2309,11 +2883,11 @@ body {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--link-01, #78a9ff);
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+ color: var(--cds-link-01, #78a9ff);
text-decoration: none;
outline: none;
transition: color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -2326,17 +2900,17 @@ body {
}
.bx--link:hover {
- color: var(--hover-primary-text, #a6c8ff);
+ color: var(--cds-hover-primary-text, #a6c8ff);
text-decoration: underline;
}
.bx--link:active, .bx--link:active:visited, .bx--link:active:visited:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
text-decoration: underline;
}
.bx--link:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -2346,11 +2920,11 @@ body {
}
.bx--link:visited {
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
}
.bx--link:visited:hover {
- color: var(--hover-primary-text, #a6c8ff);
+ color: var(--cds-hover-primary-text, #a6c8ff);
}
.bx--link--disabled,
@@ -2362,12 +2936,12 @@ body {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: inline;
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
font-weight: 400;
text-decoration: none;
cursor: not-allowed;
@@ -2383,11 +2957,11 @@ body {
}
.bx--link.bx--link--visited:visited {
- color: var(--visited-link, #be95ff);
+ color: var(--cds-visited-link, #be95ff);
}
.bx--link.bx--link--visited:visited:hover {
- color: var(--hover-primary-text, #a6c8ff);
+ color: var(--cds-hover-primary-text, #a6c8ff);
}
.bx--link.bx--link--inline {
@@ -2403,16 +2977,16 @@ body {
}
.bx--link--sm {
- font-size: 0.75rem;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
+ line-height: var(--cds-helper-text-01-line-height, 1.34);
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
}
.bx--link--lg {
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-body-short-02-font-size, 1rem);
+ font-weight: var(--cds-body-short-02-font-weight, 400);
+ line-height: var(--cds-body-short-02-line-height, 1.375);
+ letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
}
.bx--breadcrumb {
@@ -2423,10 +2997,10 @@ body {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: inline;
}
@@ -2451,16 +3025,16 @@ body {
}
.bx--breadcrumb-item .bx--link:visited {
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
}
.bx--breadcrumb-item .bx--link:visited:hover {
- color: var(--hover-primary-text, #a6c8ff);
+ color: var(--cds-hover-primary-text, #a6c8ff);
}
.bx--breadcrumb-item::after {
margin-left: 0.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
content: \\"/\\";
}
@@ -2479,7 +3053,7 @@ body {
.bx--breadcrumb-item [aria-current=\\"page\\"],
.bx--breadcrumb-item.bx--breadcrumb-item--current .bx--link {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
cursor: auto;
}
@@ -2495,7 +3069,7 @@ body {
}
.bx--breadcrumb-item .bx--overflow-menu:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
.bx--breadcrumb-item .bx--overflow-menu:hover {
@@ -2507,7 +3081,7 @@ body {
bottom: 2px;
width: 0.75rem;
height: 1px;
- background: var(--hover-primary-text, #a6c8ff);
+ background: var(--cds-hover-primary-text, #a6c8ff);
opacity: 0;
transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
content: \\"\\";
@@ -2525,11 +3099,11 @@ body {
.bx--breadcrumb-item .bx--overflow-menu__icon {
position: relative;
transform: translateY(4px);
- fill: var(--link-01, #78a9ff);
+ fill: var(--cds-link-01, #78a9ff);
}
.bx--breadcrumb-item .bx--overflow-menu:hover .bx--overflow-menu__icon {
- fill: var(--hover-primary-text, #a6c8ff);
+ fill: var(--cds-hover-primary-text, #a6c8ff);
}
.bx--breadcrumb-menu-options:focus {
@@ -2544,14 +3118,14 @@ body {
margin: 0 auto;
background: transparent;
border-right: 0.4375rem solid transparent;
- border-bottom: 0.4375rem solid var(--field-01, #262626);
+ border-bottom: 0.4375rem solid var(--cds-field-01, #262626);
border-left: 0.4375rem solid transparent;
}
.bx--breadcrumb.bx--skeleton .bx--link {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -2569,7 +3143,7 @@ body {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -2588,10 +3162,10 @@ body {
.bx--breadcrumb,
.bx--breadcrumb .bx--breadcrumb-item > .bx--link {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.bx--breadcrumb .bx--breadcrumb-item > .bx--link {
@@ -2601,13 +3175,13 @@ body {
}
.bx--breadcrumb .bx--breadcrumb-item > .bx--link:visited {
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
}
.bx--skeleton__text {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -2626,7 +3200,7 @@ body {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -2664,15 +3238,15 @@ body {
min-width: 12rem;
min-height: 6rem;
padding: 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--ui-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-ui-01, #262626);
flex-direction: column;
word-break: break-word;
}
.security--input__background__color--light .bx--number .security--card input[type=\\"number\\"], .security--card .bx--date-picker__input, .security--card .bx--dropdown,
.security--card .bx--number input[type=\\"number\\"], .security--card .bx--search-input, .security--card .bx--select-input, .security--card .bx--text-area, .security--card .bx--text-input, .security--card .bx--list-box, .security--card .bx--list-box__menu, .security--card .security--button--icon:focus, .security--card .security--button--icon:hover, .security--tearsheet--small .bx--number .security--card input[type=\\"number\\"], .security--tearsheet .bx--number .security--card input[type=\\"number\\"] {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.security--card__link {
@@ -2685,11 +3259,11 @@ body {
}
.security--card__link:focus, .security--card__link:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.security--card__link:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -2706,19 +3280,19 @@ body {
}
.security--card__header__title {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-heading-01-font-weight, 600);
+ line-height: var(--cds-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
margin-top: 0;
margin-bottom: 1rem;
}
.security--card__header__tag {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
@@ -2728,18 +3302,18 @@ body {
}
.security--card__body__text {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
margin-bottom: 1rem;
}
.security--card__footer {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
margin-top: auto;
}
@@ -2765,13 +3339,13 @@ body {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--text-01, #f4f4f4);
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+ color: var(--cds-text-01, #f4f4f4);
line-height: 1;
- background-color: var(--ui-background, #161616);
+ background-color: var(--cds-ui-background, #161616);
}
.bx--body *,
@@ -2788,10 +3362,10 @@ body {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
display: inline-flex;
flex-shrink: 0;
@@ -2817,9 +3391,9 @@ body {
}
.bx--btn:disabled, .bx--btn:hover:disabled, .bx--btn:focus:disabled, .bx--btn.bx--btn--disabled, .bx--btn.bx--btn--disabled:hover, .bx--btn.bx--btn--disabled:focus {
- color: var(--disabled-03, #8d8d8d);
- background: var(--disabled-02, #525252);
- border-color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-03, #8d8d8d);
+ background: var(--cds-disabled-02, #525252);
+ border-color: var(--cds-disabled-02, #525252);
box-shadow: none;
cursor: not-allowed;
}
@@ -2838,20 +3412,20 @@ body {
}
.bx--btn--primary {
- color: var(--text-04, #ffffff);
- background-color: var(--interactive-01, #0f62fe);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-interactive-01, #0f62fe);
border-color: transparent;
border-style: solid;
border-width: 1px;
}
.bx--btn--primary:hover {
- background-color: var(--hover-primary, #0353e9);
+ background-color: var(--cds-hover-primary, #0353e9);
}
.bx--btn--primary:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -2862,7 +3436,7 @@ body {
}
.bx--btn--primary:active {
- background-color: var(--active-primary, #002d9c);
+ background-color: var(--cds-active-primary, #002d9c);
}
.bx--btn--primary .bx--btn__icon,
@@ -2871,24 +3445,24 @@ body {
}
.bx--btn--primary:hover {
- color: var(--text-04, #ffffff);
+ color: var(--cds-text-04, #ffffff);
}
.bx--btn--secondary {
- color: var(--text-04, #ffffff);
- background-color: var(--interactive-02, #6f6f6f);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-interactive-02, #6f6f6f);
border-color: transparent;
border-style: solid;
border-width: 1px;
}
.bx--btn--secondary:hover {
- background-color: var(--hover-secondary, #606060);
+ background-color: var(--cds-hover-secondary, #606060);
}
.bx--btn--secondary:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -2899,7 +3473,7 @@ body {
}
.bx--btn--secondary:active {
- background-color: var(--active-secondary, #393939);
+ background-color: var(--cds-active-secondary, #393939);
}
.bx--btn--secondary .bx--btn__icon,
@@ -2908,24 +3482,24 @@ body {
}
.bx--btn--secondary:hover, .bx--btn--secondary:focus {
- color: var(--text-04, #ffffff);
+ color: var(--cds-text-04, #ffffff);
}
.bx--btn--tertiary {
- color: var(--interactive-03, #ffffff);
+ color: var(--cds-interactive-03, #ffffff);
background-color: transparent;
- border-color: var(--interactive-03, #ffffff);
+ border-color: var(--cds-interactive-03, #ffffff);
border-style: solid;
border-width: 1px;
}
.bx--btn--tertiary:hover {
- background-color: var(--hover-tertiary, #f4f4f4);
+ background-color: var(--cds-hover-tertiary, #f4f4f4);
}
.bx--btn--tertiary:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -2936,7 +3510,7 @@ body {
}
.bx--btn--tertiary:active {
- background-color: var(--active-tertiary, #c6c6c6);
+ background-color: var(--cds-active-tertiary, #c6c6c6);
}
.bx--btn--tertiary .bx--btn__icon,
@@ -2945,28 +3519,28 @@ body {
}
.bx--btn--tertiary:hover {
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
}
.bx--btn--tertiary:focus {
- color: var(--inverse-01, #161616);
- background-color: var(--interactive-03, #ffffff);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-interactive-03, #ffffff);
}
.bx--btn--tertiary:active {
- color: var(--inverse-01, #161616);
- background-color: var(--active-tertiary, #c6c6c6);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-active-tertiary, #c6c6c6);
border-color: transparent;
}
.bx--btn--tertiary:disabled, .bx--btn--tertiary:hover:disabled, .bx--btn--tertiary:focus:disabled, .bx--btn--tertiary.bx--btn--disabled, .bx--btn--tertiary.bx--btn--disabled:hover, .bx--btn--tertiary.bx--btn--disabled:focus {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
background: transparent;
outline: none;
}
.bx--btn--ghost {
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
background-color: transparent;
border-color: transparent;
border-style: solid;
@@ -2975,12 +3549,12 @@ body {
}
.bx--btn--ghost:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--btn--ghost:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -2991,7 +3565,7 @@ body {
}
.bx--btn--ghost:active {
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.bx--btn--ghost .bx--btn__icon,
@@ -3005,15 +3579,15 @@ body {
}
.bx--btn--ghost:hover, .bx--btn--ghost:active {
- color: var(--hover-primary-text, #a6c8ff);
+ color: var(--cds-hover-primary-text, #a6c8ff);
}
.bx--btn--ghost:active {
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.bx--btn--ghost:disabled, .bx--btn--ghost:hover:disabled, .bx--btn--ghost:focus:disabled, .bx--btn--ghost.bx--btn--disabled, .bx--btn--ghost.bx--btn--disabled:hover, .bx--btn--ghost.bx--btn--disabled:focus {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
background: transparent;
border-color: transparent;
outline: none;
@@ -3036,7 +3610,7 @@ body {
}
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -3050,7 +3624,7 @@ body {
}
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -3112,16 +3686,16 @@ body {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -3224,7 +3798,7 @@ body {
}
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger:focus {
- border-color: var(--focus, #ffffff);
+ border-color: var(--cds-focus, #ffffff);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -3246,7 +3820,7 @@ body {
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:focus,
.bx--btn.bx--btn--icon-only.bx--tooltip__trigger[disabled]:active {
cursor: not-allowed;
- fill: var(--disabled-03, #8d8d8d);
+ fill: var(--cds-disabled-03, #8d8d8d);
}
.bx--btn--icon-only--top {
@@ -3258,7 +3832,7 @@ body {
}
.bx--btn--icon-only--top:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -3272,7 +3846,7 @@ body {
}
.bx--btn--icon-only--top:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -3334,16 +3908,16 @@ body {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -3446,7 +4020,7 @@ body {
.bx--btn--icon-only--top::before {
top: -0.5rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -3478,7 +4052,7 @@ body {
.bx--btn--icon-only--bottom::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -3505,7 +4079,7 @@ body {
}
.bx--btn--icon-only.bx--btn--selected {
- background: var(--selected-ui, #393939);
+ background: var(--cds-selected-ui, #393939);
}
.bx--btn path[data-icon-path=\\"inner-path\\"] {
@@ -3521,13 +4095,13 @@ body {
.bx--btn--ghost.bx--btn--icon-only .bx--btn__icon path:not([data-icon-path]),
.bx--btn--ghost.bx--btn--icon-only .bx--btn__icon {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--btn--ghost.bx--btn--icon-only[disabled] .bx--btn__icon path,
.bx--btn--ghost.bx--btn--icon-only[disabled] .bx--btn__icon,
.bx--btn.bx--btn--icon-only.bx--btn--ghost[disabled]:hover .bx--btn__icon {
- fill: var(--disabled-03, #8d8d8d);
+ fill: var(--cds-disabled-03, #8d8d8d);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -3553,20 +4127,20 @@ body {
}
.bx--btn--danger {
- color: var(--text-04, #ffffff);
- background-color: var(--danger-01, #da1e28);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-danger-01, #da1e28);
border-color: transparent;
border-style: solid;
border-width: 1px;
}
.bx--btn--danger:hover {
- background-color: var(--hover-danger, #b81921);
+ background-color: var(--cds-hover-danger, #b81921);
}
.bx--btn--danger:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -3577,7 +4151,7 @@ body {
}
.bx--btn--danger:active {
- background-color: var(--active-danger, #750e13);
+ background-color: var(--cds-active-danger, #750e13);
}
.bx--btn--danger .bx--btn__icon,
@@ -3586,24 +4160,24 @@ body {
}
.bx--btn--danger:hover {
- color: var(--text-04, #ffffff);
+ color: var(--cds-text-04, #ffffff);
}
.bx--btn--danger-tertiary, .bx--btn--danger--tertiary {
- color: var(--danger-02, #fa4d56);
+ color: var(--cds-danger-02, #fa4d56);
background-color: transparent;
- border-color: var(--danger-02, #fa4d56);
+ border-color: var(--cds-danger-02, #fa4d56);
border-style: solid;
border-width: 1px;
}
.bx--btn--danger-tertiary:hover, .bx--btn--danger--tertiary:hover {
- background-color: var(--hover-danger, #b81921);
+ background-color: var(--cds-hover-danger, #b81921);
}
.bx--btn--danger-tertiary:focus, .bx--btn--danger--tertiary:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -3614,7 +4188,7 @@ body {
}
.bx--btn--danger-tertiary:active, .bx--btn--danger--tertiary:active {
- background-color: var(--active-danger, #750e13);
+ background-color: var(--cds-active-danger, #750e13);
}
.bx--btn--danger-tertiary .bx--btn__icon,
@@ -3624,28 +4198,28 @@ body {
}
.bx--btn--danger-tertiary:hover, .bx--btn--danger--tertiary:hover {
- color: var(--text-04, #ffffff);
- border-color: var(--hover-danger, #b81921);
+ color: var(--cds-text-04, #ffffff);
+ border-color: var(--cds-hover-danger, #b81921);
}
.bx--btn--danger-tertiary:focus, .bx--btn--danger--tertiary:focus {
- color: var(--text-04, #ffffff);
- background-color: var(--danger-01, #da1e28);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-danger-01, #da1e28);
}
.bx--btn--danger-tertiary:active, .bx--btn--danger--tertiary:active {
- color: var(--text-04, #ffffff);
- border-color: var(--active-danger, #750e13);
+ color: var(--cds-text-04, #ffffff);
+ border-color: var(--cds-active-danger, #750e13);
}
.bx--btn--danger-tertiary:disabled, .bx--btn--danger-tertiary:hover:disabled, .bx--btn--danger-tertiary:focus:disabled, .bx--btn--danger-tertiary.bx--btn--disabled, .bx--btn--danger-tertiary.bx--btn--disabled:hover, .bx--btn--danger-tertiary.bx--btn--disabled:focus, .bx--btn--danger--tertiary:disabled, .bx--btn--danger--tertiary:hover:disabled, .bx--btn--danger--tertiary:focus:disabled, .bx--btn--danger--tertiary.bx--btn--disabled, .bx--btn--danger--tertiary.bx--btn--disabled:hover, .bx--btn--danger--tertiary.bx--btn--disabled:focus {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
background: transparent;
outline: none;
}
.bx--btn--danger-ghost, .bx--btn--danger--ghost {
- color: var(--danger-02, #fa4d56);
+ color: var(--cds-danger-02, #fa4d56);
background-color: transparent;
border-color: transparent;
border-style: solid;
@@ -3654,12 +4228,12 @@ body {
}
.bx--btn--danger-ghost:hover, .bx--btn--danger--ghost:hover {
- background-color: var(--hover-danger, #b81921);
+ background-color: var(--cds-hover-danger, #b81921);
}
.bx--btn--danger-ghost:focus, .bx--btn--danger--ghost:focus {
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff), inset 0 0 0 2px var(--ui-background, #161616);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -3670,7 +4244,7 @@ body {
}
.bx--btn--danger-ghost:active, .bx--btn--danger--ghost:active {
- background-color: var(--active-danger, #750e13);
+ background-color: var(--cds-active-danger, #750e13);
}
.bx--btn--danger-ghost .bx--btn__icon,
@@ -3685,11 +4259,11 @@ body {
}
.bx--btn--danger-ghost:hover, .bx--btn--danger-ghost:active, .bx--btn--danger--ghost:hover, .bx--btn--danger--ghost:active {
- color: var(--text-04, #ffffff);
+ color: var(--cds-text-04, #ffffff);
}
.bx--btn--danger-ghost:disabled, .bx--btn--danger-ghost:hover:disabled, .bx--btn--danger-ghost:focus:disabled, .bx--btn--danger-ghost.bx--btn--disabled, .bx--btn--danger-ghost.bx--btn--disabled:hover, .bx--btn--danger-ghost.bx--btn--disabled:focus, .bx--btn--danger--ghost:disabled, .bx--btn--danger--ghost:hover:disabled, .bx--btn--danger--ghost:focus:disabled, .bx--btn--danger--ghost.bx--btn--disabled, .bx--btn--danger--ghost.bx--btn--disabled:hover, .bx--btn--danger--ghost.bx--btn--disabled:focus {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
background: transparent;
border-color: transparent;
outline: none;
@@ -3710,17 +4284,17 @@ body {
.bx--btn--xl:not(.bx--btn--icon-only) {
align-items: baseline;
- padding-top: 1rem;
- padding-right: 4rem;
- padding-left: 1rem;
+ padding-top: var(--cds-spacing-05, 1rem);
+ padding-right: var(--cds-spacing-10, 4rem);
+ padding-left: var(--cds-spacing-05, 1rem);
min-height: 5rem;
}
.bx--btn--lg:not(.bx--btn--icon-only) {
align-items: baseline;
- padding-top: 1rem;
- padding-right: 4rem;
- padding-left: 1rem;
+ padding-top: var(--cds-spacing-05, 1rem);
+ padding-right: var(--cds-spacing-10, 4rem);
+ padding-left: var(--cds-spacing-05, 1rem);
min-height: 4rem;
}
@@ -3732,7 +4306,7 @@ body {
.bx--btn.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -3749,7 +4323,7 @@ body {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -3775,7 +4349,7 @@ body {
}
.bx--btn-set .bx--btn:not(:focus) {
- box-shadow: -0.0625rem 0 0 0 var(--button-separator, #161616);
+ box-shadow: -0.0625rem 0 0 0 var(--cds-button-separator, #161616);
}
.bx--btn-set .bx--btn:first-of-type:not(:focus) {
@@ -3787,7 +4361,7 @@ body {
}
.bx--btn-set--stacked .bx--btn:not(:focus) {
- box-shadow: 0 -0.0625rem 0 0 var(--button-separator, #161616);
+ box-shadow: 0 -0.0625rem 0 0 var(--cds-button-separator, #161616);
}
.bx--btn-set--stacked .bx--btn:first-of-type:not(:focus) {
@@ -3795,7 +4369,7 @@ body {
}
.bx--btn-set .bx--btn.bx--btn--disabled {
- box-shadow: -0.0625rem 0 0 0 var(--disabled-03, #8d8d8d);
+ box-shadow: -0.0625rem 0 0 0 var(--cds-disabled-03, #8d8d8d);
}
.bx--btn-set .bx--btn.bx--btn--disabled:first-of-type {
@@ -3803,7 +4377,7 @@ body {
}
.bx--btn-set--stacked .bx--btn.bx--btn--disabled {
- box-shadow: 0 -0.0625rem 0 0 var(--disabled-03, #8d8d8d);
+ box-shadow: 0 -0.0625rem 0 0 var(--cds-disabled-03, #8d8d8d);
}
.bx--btn-set--stacked .bx--btn.bx--btn--disabled:first-of-type {
@@ -3811,12 +4385,12 @@ body {
}
.security--button--ghost-danger {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--button--ghost-danger:focus, .security--button--ghost-danger:hover {
- color: var(--text-04, #ffffff);
- background-color: var(--hover-danger, #b81921);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-hover-danger, #b81921);
}
.security--button--ghost-danger:hover > .bx--btn__icon > path {
@@ -3837,10 +4411,10 @@ body {
}
.bx--list-box__wrapper--inline .bx--label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.bx--list-box__wrapper--inline .bx--label,
@@ -3869,10 +4443,10 @@ body {
width: 100%;
height: 2.5rem;
max-height: 2.5rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
cursor: pointer;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -3884,7 +4458,7 @@ body {
}
.bx--list-box:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--list-box--xl {
@@ -3898,15 +4472,15 @@ body {
}
.bx--list-box--expanded {
- border-bottom-color: var(--ui-03, #393939);
+ border-bottom-color: var(--cds-ui-03, #393939);
}
.bx--list-box--expanded:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--list-box--expanded:hover.bx--list-box--light:hover {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--list-box .bx--text-input {
@@ -3919,11 +4493,11 @@ body {
top: 50%;
right: 2.5rem;
transform: translateY(-50%);
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--list-box__invalid-icon--warning {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--list-box__invalid-icon--warning path[fill] {
@@ -3942,19 +4516,19 @@ body {
}
.bx--list-box--light {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--list-box--light:hover {
- background-color: var(--hover-light-ui, #4c4c4c);
+ background-color: var(--cds-hover-light-ui, #4c4c4c);
}
.bx--list-box--light .bx--list-box__menu {
- background: var(--field-02, #393939);
+ background: var(--cds-field-02, #393939);
}
.bx--list-box--light .bx--list-box__menu-item__option {
- border-top-color: var(--decorative-01, #525252);
+ border-top-color: var(--cds-decorative-01, #525252);
}
.bx--list-box--light.bx--list-box--expanded {
@@ -3962,11 +4536,11 @@ body {
}
.bx--list-box--disabled:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--list-box--light.bx--list-box--disabled {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--list-box--disabled,
@@ -3978,12 +4552,12 @@ body {
.bx--list-box--disabled .bx--list-box__label,
.bx--list-box--disabled.bx--list-box--inline .bx--list-box__label {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--list-box--disabled .bx--list-box__menu-icon > svg,
.bx--list-box--disabled .bx--list-box__selection > svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -4002,7 +4576,7 @@ body {
.bx--list-box--disabled .bx--list-box__menu-item,
.bx--list-box--disabled .bx--list-box__menu-item:hover,
.bx--list-box--disabled .bx--list-box__menu-item--highlighted {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
text-decoration: none;
}
@@ -4024,7 +4598,7 @@ body {
}
.bx--list-box.bx--list-box--inline:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--list-box.bx--list-box--inline.bx--list-box--expanded {
@@ -4040,7 +4614,7 @@ body {
}
.bx--list-box.bx--list-box--inline.bx--list-box--expanded:hover {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--list-box.bx--list-box--inline .bx--list-box__field {
@@ -4056,7 +4630,7 @@ body {
}
.bx--list-box--inline .bx--list-box__label {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--list-box--inline .bx--list-box__field {
@@ -4117,7 +4691,7 @@ body {
}
.bx--list-box__field:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -4134,7 +4708,7 @@ body {
}
.bx--list-box__field[disabled] {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
outline: none;
}
@@ -4167,12 +4741,12 @@ body {
}
.bx--list-box__label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
overflow: hidden;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
white-space: nowrap;
text-overflow: ellipsis;
user-select: none;
@@ -4215,7 +4789,7 @@ body {
}
.bx--list-box__menu-icon > svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -4270,7 +4844,7 @@ body {
}
.bx--list-box__selection:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -4281,7 +4855,7 @@ body {
}
.bx--list-box__selection:focus:hover {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -4292,7 +4866,7 @@ body {
}
.bx--list-box__selection > svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -4306,10 +4880,10 @@ body {
}
.bx--list-box__selection--multi {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
position: static;
top: auto;
display: flex;
@@ -4320,9 +4894,9 @@ body {
margin-right: 0.625rem;
padding: 0.5rem;
padding-right: 0.125rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
line-height: 0;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.75rem;
transform: none;
}
@@ -4338,11 +4912,11 @@ body {
height: 1.25rem;
margin-left: 0.25rem;
padding: 0.125rem;
- fill: var(--inverse-01, #161616);
+ fill: var(--cds-inverse-01, #161616);
}
.bx--list-box__selection--multi > svg:hover {
- background-color: var(--hover-secondary, #606060);
+ background-color: var(--cds-hover-secondary, #606060);
border-radius: 50%;
}
@@ -4353,17 +4927,17 @@ body {
}
.bx--list-box--disabled .bx--list-box__selection--multi {
- color: var(--disabled-01, #262626);
- background-color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-01, #262626);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--list-box--disabled .bx--list-box__selection--multi.bx--tag--interactive:hover,
.bx--list-box--disabled .bx--list-box__selection--multi .bx--tag__close-icon:hover {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--list-box--disabled .bx--list-box__selection--multi > svg {
- fill: var(--disabled-01, #262626);
+ fill: var(--cds-disabled-01, #262626);
}
.bx--list-box--disabled .bx--list-box__selection--multi > svg:hover {
@@ -4388,12 +4962,12 @@ body {
z-index: 9100;
width: 100%;
overflow-y: auto;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--list-box__menu:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -4419,28 +4993,28 @@ body {
}
.bx--list-box__menu-item {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
height: 2.5rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
cursor: pointer;
transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
user-select: none;
}
.bx--list-box__menu-item:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--list-box__menu-item:active {
- background-color: var(--selected-ui, #393939);
+ background-color: var(--cds-selected-ui, #393939);
}
.bx--list-box--light .bx--list-box__menu-item:hover {
- background-color: var(--hover-light-ui, #4c4c4c);
+ background-color: var(--cds-hover-light-ui, #4c4c4c);
}
.bx--list-box--sm .bx--list-box__menu-item {
@@ -4456,11 +5030,11 @@ body {
}
.bx--list-box--light .bx--list-box__menu-item:active {
- background-color: var(--selected-light-ui, #525252);
+ background-color: var(--cds-selected-light-ui, #525252);
}
.bx--list-box--disabled .bx--list-box__menu-item__option:hover {
- border-top-color: var(--ui-03, #393939);
+ border-top-color: var(--cds-ui-03, #393939);
}
.bx--list-box__menu-item:first-of-type .bx--list-box__menu-item__option {
@@ -4468,7 +5042,7 @@ body {
}
.bx--list-box__menu-item:hover .bx--list-box__menu-item__option {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--list-box__menu-item:hover + .bx--list-box__menu-item .bx--list-box__menu-item__option {
@@ -4476,7 +5050,7 @@ body {
}
.bx--list-box--disabled .bx--list-box__menu-item:hover + .bx--list-box__menu-item .bx--list-box__menu-item__option {
- border-top-color: var(--ui-03, #393939);
+ border-top-color: var(--cds-ui-03, #393939);
}
.bx--list-box__menu-item__option {
@@ -4488,20 +5062,20 @@ body {
padding: 0.6875rem 0;
padding-right: 1.5rem;
overflow: hidden;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
font-weight: normal;
line-height: 1rem;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
border-top: 1px solid transparent;
- border-top-color: var(--ui-03, #393939);
+ border-top-color: var(--cds-ui-03, #393939);
border-bottom: 1px solid transparent;
transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--list-box__menu-item__option:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
margin: 0;
padding: 0.6875rem 1rem;
@@ -4522,7 +5096,7 @@ body {
}
.bx--list-box__menu-item__option:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
border-color: transparent;
}
@@ -4540,7 +5114,7 @@ body {
.bx--list-box--disabled .bx--list-box__menu-item:hover .bx--list-box__menu-item__option,
.bx--list-box--disabled .bx--list-box__menu-item__option {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--list-box.bx--list-box--inline .bx--list-box__menu-item__option {
@@ -4554,8 +5128,8 @@ body {
}
.bx--list-box__menu-item--highlighted {
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
border-color: transparent;
}
@@ -4572,28 +5146,28 @@ body {
}
.bx--list-box__menu-item--highlighted .bx--list-box__menu-item__option {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--list-box__menu-item--active {
- color: var(--text-01, #f4f4f4);
- background-color: var(--selected-ui, #393939);
- border-bottom-color: var(--selected-ui, #393939);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-selected-ui, #393939);
+ border-bottom-color: var(--cds-selected-ui, #393939);
}
.bx--list-box--light .bx--list-box__menu-item--active {
- background-color: var(--selected-light-ui, #525252);
- border-bottom-color: var(--selected-light-ui, #525252);
+ background-color: var(--cds-selected-light-ui, #525252);
+ border-bottom-color: var(--cds-selected-light-ui, #525252);
}
.bx--list-box__menu-item--active:hover,
.bx--list-box__menu-item--active.bx--list-box__menu-item--highlighted {
- background-color: var(--selected-ui, #393939);
- border-bottom-color: var(--selected-ui, #393939);
+ background-color: var(--cds-selected-ui, #393939);
+ border-bottom-color: var(--cds-selected-ui, #393939);
}
.bx--list-box__menu-item--active .bx--list-box__menu-item__option {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--list-box__menu-item--active + .bx--list-box__menu-item > .bx--list-box__menu-item__option {
@@ -4606,7 +5180,7 @@ body {
right: 1rem;
display: none;
transform: translateY(-50%);
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--list-box--inline .bx--list-box__menu-item__selected-icon {
@@ -4655,10 +5229,10 @@ body {
}
.bx--dropdown__wrapper--inline .bx--label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.bx--dropdown__wrapper--inline .bx--label,
@@ -4685,11 +5259,11 @@ body {
display: block;
width: 100%;
height: 2.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
list-style: none;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
outline: 2px solid transparent;
cursor: pointer;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -4702,7 +5276,7 @@ body {
}
.bx--dropdown:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--dropdown .bx--list-box__field {
@@ -4734,11 +5308,11 @@ body {
}
.bx--dropdown--open {
- border-bottom-color: var(--ui-03, #393939);
+ border-bottom-color: var(--cds-ui-03, #393939);
}
.bx--dropdown--invalid {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
}
@@ -4755,19 +5329,19 @@ body {
.bx--dropdown--invalid + .bx--form-requirement {
display: inline-block;
max-height: 12.5rem;
- color: var(--text-error, #ff8389);
+ color: var(--cds-text-error, #ff8389);
}
.bx--dropdown__invalid-icon {
position: absolute;
top: 50%;
- right: 2.5rem;
+ right: var(--cds-spacing-08, 2.5rem);
transform: translateY(-50%);
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--dropdown--open:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--dropdown--open:focus {
@@ -4781,11 +5355,11 @@ body {
}
.bx--dropdown--light {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--dropdown--light:hover {
- background-color: var(--hover-light-ui, #4c4c4c);
+ background-color: var(--cds-hover-light-ui, #4c4c4c);
}
.bx--dropdown--up .bx--dropdown-list {
@@ -4799,19 +5373,19 @@ body {
transform-origin: 50% 45%;
transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
pointer-events: none;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
button.bx--dropdown-text {
width: 100%;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
text-align: left;
background: none;
border: none;
}
button.bx--dropdown-text:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -4822,10 +5396,10 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown-text {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: block;
height: calc(100% + 1px);
padding-right: 2.625rem;
@@ -4846,10 +5420,10 @@ button.bx--dropdown-text:focus {
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: absolute;
z-index: 9100;
display: flex;
@@ -4859,7 +5433,7 @@ button.bx--dropdown-text:focus {
overflow-x: hidden;
overflow-y: auto;
list-style: none;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -4870,7 +5444,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown--light .bx--dropdown-list {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--dropdown:not(.bx--dropdown--open) .bx--dropdown-item {
@@ -4885,7 +5459,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown-item:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--dropdown-item:hover + .bx--dropdown-item .bx--dropdown-link {
@@ -4893,7 +5467,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown-item:active {
- background-color: var(--selected-ui, #393939);
+ background-color: var(--cds-selected-ui, #393939);
}
.bx--dropdown-item:first-of-type .bx--dropdown-link {
@@ -4912,23 +5486,23 @@ button.bx--dropdown-text:focus {
margin: 0 1rem;
padding: 0.6875rem 0;
overflow: hidden;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
font-weight: normal;
line-height: 1rem;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
border: 1px solid transparent;
- border-top-color: var(--ui-03, #393939);
+ border-top-color: var(--cds-ui-03, #393939);
}
.bx--dropdown-link:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
border-color: transparent;
}
.bx--dropdown--light .bx--dropdown-link {
- border-top-color: var(--decorative-01, #525252);
+ border-top-color: var(--cds-decorative-01, #525252);
}
.bx--dropdown--sm .bx--dropdown-link {
@@ -4945,7 +5519,7 @@ button.bx--dropdown-text:focus {
.bx--dropdown--focused,
.bx--dropdown-link:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
margin: 0;
padding: 0.6875rem 1rem;
@@ -4965,7 +5539,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown-list[aria-activedescendant] .bx--dropdown--focused:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
margin: 0;
padding: 0.6875rem 1rem;
@@ -4982,7 +5556,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown-item:hover .bx--dropdown-link {
- border-bottom-color: var(--hover-ui, #353535);
+ border-bottom-color: var(--cds-hover-ui, #353535);
}
.bx--dropdown--selected {
@@ -5010,7 +5584,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown--disabled:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--dropdown--disabled:focus {
@@ -5019,16 +5593,16 @@ button.bx--dropdown-text:focus {
.bx--dropdown--disabled .bx--dropdown-text,
.bx--dropdown--disabled .bx--list-box__label {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--dropdown--disabled .bx--dropdown__arrow,
.bx--dropdown--disabled .bx--list-box__menu-icon svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--dropdown--disabled.bx--dropdown--light:hover {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--dropdown--disabled .bx--list-box__field,
@@ -5051,7 +5625,7 @@ button.bx--dropdown-text:focus {
}
.bx--dropdown--inline:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--dropdown--inline.bx--dropdown--disabled {
@@ -5072,11 +5646,11 @@ button.bx--dropdown-text:focus {
height: 2rem;
padding: 0.4375rem 2rem 0.4375rem 0.75rem;
overflow: visible;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--dropdown--inline.bx--dropdown--disabled .bx--dropdown-text {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--dropdown--inline.bx--dropdown--disabled:focus .bx--dropdown-text {
@@ -5101,12 +5675,12 @@ button.bx--dropdown-text:focus {
.bx--dropdown--show-selected .bx--dropdown--selected {
display: block;
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--dropdown--show-selected .bx--dropdown--selected:hover {
- background-color: var(--selected-ui, #393939);
+ background-color: var(--cds-selected-ui, #393939);
}
.bx--dropdown--show-selected .bx--dropdown--selected .bx--dropdown-link {
@@ -5125,7 +5699,7 @@ button.bx--dropdown-text:focus {
.bx--dropdown.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -5145,7 +5719,7 @@ button.bx--dropdown-text:focus {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -5218,7 +5792,7 @@ button.bx--dropdown-text:focus {
.bx--overflow-menu:focus,
.bx--overflow-menu__trigger:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -5231,7 +5805,7 @@ button.bx--dropdown-text:focus {
.bx--overflow-menu:hover,
.bx--overflow-menu__trigger:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--overflow-menu--sm {
@@ -5245,7 +5819,7 @@ button.bx--dropdown-text:focus {
}
.bx--overflow-menu__trigger.bx--tooltip--a11y.bx--tooltip__trigger:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -5262,19 +5836,19 @@ button.bx--dropdown-text:focus {
.bx--overflow-menu.bx--overflow-menu--open,
.bx--overflow-menu.bx--overflow-menu--open .bx--overflow-menu__trigger {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
transition: none;
}
.bx--overflow-menu--light.bx--overflow-menu--open,
.bx--overflow-menu--light.bx--overflow-menu--open .bx--overflow-menu__trigger {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--overflow-menu__icon {
width: 1rem;
height: 1rem;
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -5301,7 +5875,7 @@ button.bx--dropdown-text:focus {
align-items: flex-start;
width: 10rem;
list-style: none;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--overflow-menu-options *,
@@ -5313,25 +5887,25 @@ button.bx--dropdown-text:focus {
.bx--overflow-menu-options::after {
position: absolute;
display: block;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
transition: background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
content: \\"\\";
}
.bx--overflow-menu.bx--overflow-menu--open:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--overflow-menu-options--light {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--overflow-menu-options--light::after {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--overflow-menu.bx--overflow-menu--light.bx--overflow-menu--open:hover {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--overflow-menu-options[data-floating-menu-direction=\\"bottom\\"]::after {
@@ -5430,11 +6004,11 @@ button.bx--dropdown-text:focus {
}
.bx--overflow-menu--divider {
- border-top: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
}
.bx--overflow-menu--light .bx--overflow-menu--divider {
- border-top: 1px solid var(--decorative-01, #525252);
+ border-top: 1px solid var(--cds-decorative-01, #525252);
}
a.bx--overflow-menu-options__btn::before {
@@ -5445,10 +6019,10 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--overflow-menu-options__btn {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
display: inline-flex;
@@ -5457,7 +6031,7 @@ a.bx--overflow-menu-options__btn::before {
max-width: 11.25rem;
height: 100%;
padding: 0 1rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
font-weight: 400;
text-align: left;
background-color: transparent;
@@ -5467,11 +6041,11 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--overflow-menu-options__btn:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--overflow-menu-options__btn:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -5486,11 +6060,11 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--overflow-menu-options__btn svg {
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
.bx--overflow-menu-options__btn:hover svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--overflow-menu-options__option-content {
@@ -5500,13 +6074,13 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--overflow-menu-options__option:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover,
.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:focus {
- color: var(--text-04, #ffffff);
- background-color: var(--danger-01, #da1e28);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-danger-01, #da1e28);
}
.bx--overflow-menu-options__option--danger .bx--overflow-menu-options__btn:hover svg,
@@ -5515,23 +6089,23 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--overflow-menu-options__option--disabled:hover {
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
cursor: not-allowed;
}
.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
pointer-events: none;
}
.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:hover, .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:active, .bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn:focus {
outline: 2px solid transparent;
outline-offset: -2px;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--overflow-menu-options__option--disabled .bx--overflow-menu-options__btn svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--overflow-menu--flip {
@@ -5563,28 +6137,28 @@ a.bx--overflow-menu-options__btn::before {
}
.security--combo-button__icon {
- fill: var(--icon-03, #ffffff);
+ fill: var(--cds-icon-03, #ffffff);
pointer-events: none;
}
.security--combo-button .security--combo-button__overflow-menu {
width: 3rem;
- background-color: var(--interactive-01, #0f62fe);
+ background-color: var(--cds-interactive-01, #0f62fe);
margin-left: 1px;
}
.security--combo-button .security--combo-button__overflow-menu:hover, .security--combo-button .security--combo-button__overflow-menu.bx--overflow-menu--open {
- background-color: var(--hover-primary, #0353e9);
+ background-color: var(--cds-hover-primary, #0353e9);
}
.security--combo-button .security--combo-button__overflow-menu:active {
- background-color: var(--active-primary, #002d9c);
+ background-color: var(--cds-active-primary, #002d9c);
}
.security--combo-button .bx--overflow-menu-options {
display: grid;
width: 100%;
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
outline: unset;
}
@@ -5593,7 +6167,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--combo-button .bx--overflow-menu-options__option:hover {
- background-color: var(--hover-selected-ui, #4c4c4c);
+ background-color: var(--cds-hover-selected-ui, #4c4c4c);
}
.security--combo-button .bx--overflow-menu-options__option:first-child .security--combo-button-item__wrapper {
@@ -5618,7 +6192,7 @@ a.bx--overflow-menu-options__btn::before {
outline: unset;
padding: 0;
margin: 0 1rem;
- border-top: 1px solid var(--active-ui, #525252);
+ border-top: 1px solid var(--cds-active-ui, #525252);
border-bottom: 1px solid transparent;
display: flex;
width: unset;
@@ -5627,7 +6201,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--combo-button .security--combo-button-item__wrapper:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
margin: 0;
padding: 0 1rem;
@@ -5641,7 +6215,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--combo-button .security--combo-button-item__wrapper:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
background-color: unset;
}
@@ -5651,11 +6225,11 @@ a.bx--overflow-menu-options__btn::before {
}
.security--combo-button .security--combo-button-item__wrapper:disabled, .security--combo-button .security--combo-button-item__wrapper:disabled:hover {
- color: var(--text-03, #6f6f6f);
+ color: var(--cds-text-03, #6f6f6f);
}
.security--combo-button .security--combo-button-item__wrapper:disabled svg, .security--combo-button .security--combo-button-item__wrapper:disabled:hover svg {
- fill: var(--text-03, #6f6f6f);
+ fill: var(--cds-text-03, #6f6f6f);
}
.security--button--icon {
@@ -5680,7 +6254,7 @@ a.bx--overflow-menu-options__btn::before {
padding-top: 0;
padding-right: 0;
padding-left: 0;
- color: var(--icon-01, #f4f4f4);
+ color: var(--cds-icon-01, #f4f4f4);
background-color: inherit;
align-items: center;
border: 0;
@@ -5704,11 +6278,11 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon:hover, .security--button--icon:focus {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.security--button--icon:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border-width: 0;
}
@@ -5720,12 +6294,12 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon:disabled {
- fill: var(--disabled-03, #8d8d8d);
+ fill: var(--cds-disabled-03, #8d8d8d);
cursor: not-allowed;
}
.security--button--icon:disabled, .security--button--icon:disabled:hover, .security--button--icon:disabled:focus {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.security--button--icon:disabled:focus {
@@ -5764,15 +6338,15 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon--tooltip::before {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
position: absolute;
padding: 0.125rem 1rem;
- color: var(--inverse-01, #161616);
- background-color: var(--inverse-02, #f4f4f4);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-inverse-02, #f4f4f4);
align-items: center;
border-radius: 0.125rem;
opacity: 0;
@@ -5817,7 +6391,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon--tooltip--top::after {
- border-top-color: var(--inverse-02, #f4f4f4);
+ border-top-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-50%, 0.25rem);
}
@@ -5830,7 +6404,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon--tooltip--right::after {
- border-right-color: var(--inverse-02, #f4f4f4);
+ border-right-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-0.25rem, -50%);
}
@@ -5843,7 +6417,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon--tooltip--bottom::after {
- border-bottom-color: var(--inverse-02, #f4f4f4);
+ border-bottom-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-50%, -0.25rem);
}
@@ -5856,7 +6430,7 @@ a.bx--overflow-menu-options__btn::before {
}
.security--button--icon--tooltip--left::after {
- border-left-color: var(--inverse-02, #f4f4f4);
+ border-left-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(0.25rem, -50%);
}
@@ -5867,8 +6441,8 @@ a.bx--overflow-menu-options__btn::before {
right: 0;
height: 100%;
width: 20rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--ui-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-ui-01, #262626);
flex-direction: column;
justify-content: space-between;
outline: none;
@@ -5876,78 +6450,306 @@ a.bx--overflow-menu-options__btn::before {
}
.security--theme--cg10 .security--panel--v2 {
- --interactive-01: #0f62fe;
- --interactive-02: #697077;
- --interactive-03: #ffffff;
- --interactive-04: #4589ff;
- --ui-background: #121619;
- --ui-01: #21272a;
- --ui-02: #343a3f;
- --ui-03: #343a3f;
- --ui-04: #697077;
- --ui-05: #f2f4f8;
- --text-01: #f2f4f8;
- --text-02: #c1c7cd;
- --text-03: #697077;
- --text-04: #ffffff;
- --text-05: #878d96;
- --text-error: #ff8389;
- --icon-01: #f2f4f8;
- --icon-02: #c1c7cd;
- --icon-03: #ffffff;
- --link-01: #78a9ff;
- --link-02: #a6c8ff;
- --inverse-link: #0f62fe;
- --field-01: #21272a;
- --field-02: #343a3f;
- --inverse-01: #121619;
- --inverse-02: #f2f4f8;
- --support-01: #fa4d56;
- --support-02: #42be65;
- --support-03: #f1c21b;
- --support-04: #4589ff;
- --inverse-support-01: #da1e28;
- --inverse-support-02: #24a148;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #0f62fe;
- --overlay-01: rgba(22, 22, 22, 0.7);
- --danger-01: #da1e28;
- --danger-02: #fa4d56;
- --focus: #ffffff;
- --inverse-focus-ui: #0f62fe;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #a6c8ff;
- --hover-secondary: #5a6066;
- --active-secondary: #343a3f;
- --hover-tertiary: #f2f4f8;
- --active-tertiary: #c1c7cd;
- --hover-ui: #2f353a;
- --hover-light-ui: #4c4c4c;
- --active-ui: #4d5358;
- --active-light-ui: #697077;
- --selected-ui: #343a3f;
- --selected-light-ui: #4d5358;
- --inverse-hover-ui: #e0e4ea;
- --hover-selected-ui: #464c51;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #2f353a;
- --visited-link: #be95ff;
- --disabled-01: #21272a;
- --disabled-02: #4d5358;
- --disabled-03: #878d96;
- --highlight: #002d9c;
- --decorative-01: #4d5358;
- --button-separator: #121619;
- --skeleton-01: #2f353a;
- --skeleton-02: #4d5358;
- --brand-01: #0f62fe;
- --brand-02: #697077;
- --brand-03: #ffffff;
- --active-01: #4d5358;
- --hover-field: #2f353a;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #697077;
+ --cds-interactive-03: #ffffff;
+ --cds-interactive-04: #4589ff;
+ --cds-ui-background: #121619;
+ --cds-ui-01: #21272a;
+ --cds-ui-02: #343a3f;
+ --cds-ui-03: #343a3f;
+ --cds-ui-04: #697077;
+ --cds-ui-05: #f2f4f8;
+ --cds-text-01: #f2f4f8;
+ --cds-text-02: #c1c7cd;
+ --cds-text-03: #697077;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #878d96;
+ --cds-text-error: #ff8389;
+ --cds-icon-01: #f2f4f8;
+ --cds-icon-02: #c1c7cd;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #78a9ff;
+ --cds-link-02: #a6c8ff;
+ --cds-inverse-link: #0f62fe;
+ --cds-field-01: #21272a;
+ --cds-field-02: #343a3f;
+ --cds-inverse-01: #121619;
+ --cds-inverse-02: #f2f4f8;
+ --cds-support-01: #fa4d56;
+ --cds-support-02: #42be65;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #4589ff;
+ --cds-inverse-support-01: #da1e28;
+ --cds-inverse-support-02: #24a148;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #0f62fe;
+ --cds-overlay-01: rgba(22, 22, 22, 0.7);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #fa4d56;
+ --cds-focus: #ffffff;
+ --cds-inverse-focus-ui: #0f62fe;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #a6c8ff;
+ --cds-hover-secondary: #5a6066;
+ --cds-active-secondary: #343a3f;
+ --cds-hover-tertiary: #f2f4f8;
+ --cds-active-tertiary: #c1c7cd;
+ --cds-hover-ui: #2f353a;
+ --cds-hover-light-ui: #4c4c4c;
+ --cds-hover-selected-ui: #464c51;
+ --cds-active-ui: #4d5358;
+ --cds-active-light-ui: #697077;
+ --cds-selected-ui: #343a3f;
+ --cds-selected-light-ui: #4d5358;
+ --cds-inverse-hover-ui: #e0e4ea;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #2f353a;
+ --cds-visited-link: #be95ff;
+ --cds-disabled-01: #21272a;
+ --cds-disabled-02: #4d5358;
+ --cds-disabled-03: #878d96;
+ --cds-highlight: #002d9c;
+ --cds-decorative-01: #4d5358;
+ --cds-button-separator: #121619;
+ --cds-skeleton-01: #2f353a;
+ --cds-skeleton-02: #4d5358;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #697077;
+ --cds-brand-03: #ffffff;
+ --cds-active-01: #4d5358;
+ --cds-hover-field: #2f353a;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #697077);
+ --interactive-03: var(--cds-interactive-03, #ffffff);
+ --interactive-04: var(--cds-interactive-04, #4589ff);
+ --ui-background: var(--cds-ui-background, #121619);
+ --ui-01: var(--cds-ui-01, #21272a);
+ --ui-02: var(--cds-ui-02, #343a3f);
+ --ui-03: var(--cds-ui-03, #343a3f);
+ --ui-04: var(--cds-ui-04, #697077);
+ --ui-05: var(--cds-ui-05, #f2f4f8);
+ --text-01: var(--cds-text-01, #f2f4f8);
+ --text-02: var(--cds-text-02, #c1c7cd);
+ --text-03: var(--cds-text-03, #697077);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #878d96);
+ --text-error: var(--cds-text-error, #ff8389);
+ --icon-01: var(--cds-icon-01, #f2f4f8);
+ --icon-02: var(--cds-icon-02, #c1c7cd);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #78a9ff);
+ --link-02: var(--cds-link-02, #a6c8ff);
+ --inverse-link: var(--cds-inverse-link, #0f62fe);
+ --field-01: var(--cds-field-01, #21272a);
+ --field-02: var(--cds-field-02, #343a3f);
+ --inverse-01: var(--cds-inverse-01, #121619);
+ --inverse-02: var(--cds-inverse-02, #f2f4f8);
+ --support-01: var(--cds-support-01, #fa4d56);
+ --support-02: var(--cds-support-02, #42be65);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #4589ff);
+ --inverse-support-01: var(--cds-inverse-support-01, #da1e28);
+ --inverse-support-02: var(--cds-inverse-support-02, #24a148);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #0f62fe);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #fa4d56);
+ --focus: var(--cds-focus, #ffffff);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #0f62fe);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #a6c8ff);
+ --hover-secondary: var(--cds-hover-secondary, #5a6066);
+ --active-secondary: var(--cds-active-secondary, #343a3f);
+ --hover-tertiary: var(--cds-hover-tertiary, #f2f4f8);
+ --active-tertiary: var(--cds-active-tertiary, #c1c7cd);
+ --hover-ui: var(--cds-hover-ui, #2f353a);
+ --hover-light-ui: var(--cds-hover-light-ui, #4c4c4c);
+ --active-ui: var(--cds-active-ui, #4d5358);
+ --active-light-ui: var(--cds-active-light-ui, #697077);
+ --selected-ui: var(--cds-selected-ui, #343a3f);
+ --selected-light-ui: var(--cds-selected-light-ui, #4d5358);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #e0e4ea);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #464c51);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #2f353a);
+ --visited-link: var(--cds-visited-link, #be95ff);
+ --disabled-01: var(--cds-disabled-01, #21272a);
+ --disabled-02: var(--cds-disabled-02, #4d5358);
+ --disabled-03: var(--cds-disabled-03, #878d96);
+ --highlight: var(--cds-highlight, #002d9c);
+ --decorative-01: var(--cds-decorative-01, #4d5358);
+ --button-separator: var(--cds-button-separator, #121619);
+ --skeleton-01: var(--cds-skeleton-01, #2f353a);
+ --skeleton-02: var(--cds-skeleton-02, #4d5358);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #697077);
+ --brand-03: var(--cds-brand-03, #ffffff);
+ --active-01: var(--cds-active-01, #4d5358);
+ --hover-field: var(--cds-hover-field, #2f353a);
+ --danger: var(--cds-danger, #da1e28);
}
.security--panel--v2[dir=\\"rtl\\"],
@@ -5986,7 +6788,7 @@ a.bx--overflow-menu-options__btn::before {
box-sizing: border-box;
flex-direction: row-reverse;
justify-content: space-between;
- border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f);
+ border-bottom: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
}
.security--panel--v2__header__container--title {
@@ -5994,25 +6796,25 @@ a.bx--overflow-menu-options__btn::before {
}
.security--panel--v2__header--title, .security--panel--v2__header--subtitle {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
word-break: break-word;
}
.security--panel--v2__header--title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
display: block;
margin-top: 1rem;
margin-bottom: 0.75rem;
}
.security--panel--v2__header--subtitle {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.security--panel--v2__body {
@@ -6022,13 +6824,13 @@ a.bx--overflow-menu-options__btn::before {
}
.security--panel--v2__body--content {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
padding-top: 1rem;
padding-bottom: 1rem;
- border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f);
+ border-bottom: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
}
.security--panel--v2__body--content:last-child {
@@ -6079,15 +6881,15 @@ a.bx--overflow-menu-options__btn::before {
}
.security--decorator {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: inline-flex;
box-sizing: border-box;
font-family: \\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif;
height: 1.625rem;
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
font-style: normal;
font-stretch: normal;
text-align: left;
@@ -6096,7 +6898,7 @@ a.bx--overflow-menu-options__btn::before {
padding: unset;
border: unset;
vertical-align: middle;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
text-decoration: none;
}
@@ -6110,24 +6912,24 @@ a.bx--overflow-menu-options__btn::before {
}
.security--decorator--interactive:not(.security--decorator--active) .security--decorator__type {
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--decorator--interactive:not(.security--decorator--active) .security--decorator__value {
- color: var(--hover-primary-text, #a6c8ff);
+ color: var(--cds-hover-primary-text, #a6c8ff);
}
.security--decorator--interactive:not(.security--decorator--active):visited .security--decorator__value {
- color: var(--visited-link, #be95ff);
+ color: var(--cds-visited-link, #be95ff);
}
.security--decorator.security--decorator--interactive:hover {
cursor: pointer;
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.security--decorator.security--decorator--interactive:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -6147,14 +6949,14 @@ a.bx--overflow-menu-options__btn::before {
}
.security--decorator.security--decorator--active, .security--decorator.security--decorator--active:hover, .security--decorator.security--decorator:focus:active {
- background-color: var(--ui-05, #f4f4f4);
- color: var(--active-ui, #525252);
+ background-color: var(--cds-ui-05, #f4f4f4);
+ color: var(--cds-active-ui, #525252);
}
.security--decorator.security--decorator--active:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
}
@media screen and (prefers-contrast) {
@@ -6173,10 +6975,10 @@ a.bx--overflow-menu-options__btn::before {
}
.security--decorator.security--decorator--inline {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
height: 1.25rem;
vertical-align: middle;
}
@@ -6195,11 +6997,11 @@ a.bx--overflow-menu-options__btn::before {
}
.security--decorator--unknown .security--decorator__icon, .security--decorator__icon--unknown {
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
.security--decorator--low .security--decorator__icon, .security--decorator__icon--low {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.security--decorator--medium .security--decorator__icon, .security--decorator__icon--medium {
@@ -6207,24 +7009,24 @@ a.bx--overflow-menu-options__btn::before {
}
.security--decorator__icon--high, .security--decorator__icon--critical {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.security--decorator--high .security--decorator__icon, .security--decorator--critical .security--decorator__icon {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.security--decorator--high--active .security--decorator__icon, .security--decorator--high:focus:active .security--decorator__icon, .security--decorator--critical--active .security--decorator__icon, .security--decorator--critical:focus:active .security--decorator__icon {
- fill: var(--hover-danger, #b81921);
+ fill: var(--cds-hover-danger, #b81921);
}
.security--decorator__type {
- border-right: 1px solid var(--ui-01, #262626);
+ border-right: 1px solid var(--cds-ui-01, #262626);
white-space: nowrap;
}
.security--decorator--active .security--decorator__type {
- border-right: 1px solid var(--ui-04, #6f6f6f);
+ border-right: 1px solid var(--cds-ui-04, #6f6f6f);
}
.security--decorator__value {
@@ -6258,10 +7060,10 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--form-item {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
flex: 1 1 auto;
flex-direction: column;
@@ -6276,13 +7078,13 @@ a.bx--overflow-menu-options__btn::before {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
display: inline-block;
margin-bottom: 0.5rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
font-weight: 400;
line-height: 1rem;
vertical-align: baseline;
@@ -6295,16 +7097,16 @@ a.bx--overflow-menu-options__btn::before {
}
.bx--label .bx--tooltip__trigger {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
}
.bx--label.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -6322,7 +7124,7 @@ a.bx--overflow-menu-options__btn::before {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -6345,7 +7147,7 @@ input[data-invalid]:not(:focus),
.bx--select-input__wrapper[data-invalid] .bx--select-input:not(:focus),
.bx--list-box[data-invalid]:not(:focus),
.bx--combo-box[data-invalid] .bx--text-input:not(:focus) {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
}
@@ -6393,7 +7195,7 @@ input[data-invalid] ~ .bx--form-requirement,
.bx--select-input__wrapper[data-invalid] ~ .bx--form-requirement,
.bx--time-picker[data-invalid] ~ .bx--form-requirement,
.bx--list-box[data-invalid] ~ .bx--form-requirement {
- color: var(--text-error, #ff8389);
+ color: var(--cds-text-error, #ff8389);
}
.bx--form--fluid .bx--text-input__field-wrapper[data-invalid],
@@ -6426,10 +7228,10 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
display: none;
max-height: 0;
margin: 0.25rem 0 0;
@@ -6447,24 +7249,24 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
}
.bx--form__helper-text {
- font-size: 0.75rem;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
+ line-height: var(--cds-helper-text-01-line-height, 1.34);
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
z-index: 0;
width: 100%;
margin-top: 0.25rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
opacity: 1;
}
.bx--label--disabled,
.bx--form__helper-text--disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
fieldset[disabled] .bx--label,
fieldset[disabled] .bx--form__helper-text {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--form-item.bx--checkbox-wrapper {
@@ -6504,10 +7306,10 @@ fieldset[disabled] .bx--form__helper-text {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
display: flex;
min-height: 1.5rem;
@@ -6540,7 +7342,7 @@ fieldset[disabled] .bx--form__helper-text {
height: 1rem;
margin: 0.125rem 0.125rem 0.125rem 0.1875rem;
background-color: transparent;
- border: 1px solid var(--icon-01, #f4f4f4);
+ border: 1px solid var(--cds-icon-01, #f4f4f4);
border-radius: 1px;
content: \\"\\";
}
@@ -6553,8 +7355,8 @@ fieldset[disabled] .bx--form__helper-text {
height: 0.3125rem;
margin-top: -0.1875rem /*rtl:0rem*/;
background: none;
- border-bottom: 2px solid var(--inverse-01, #161616);
- border-left: 2px solid var(--inverse-01, #161616);
+ border-bottom: 2px solid var(--cds-inverse-01, #161616);
+ border-left: 2px solid var(--cds-inverse-01, #161616);
transform: scale(0) rotate(-45deg);
transform-origin: bottom right /*rtl:center*/;
content: \\"\\";
@@ -6564,8 +7366,8 @@ fieldset[disabled] .bx--form__helper-text {
.bx--checkbox:indeterminate + .bx--checkbox-label::before,
.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"]::before,
.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"]::before {
- background-color: var(--icon-01, #f4f4f4);
- border-color: var(--icon-01, #f4f4f4);
+ background-color: var(--cds-icon-01, #f4f4f4);
+ border-color: var(--cds-icon-01, #f4f4f4);
border-width: 1px;
}
@@ -6578,8 +7380,8 @@ fieldset[disabled] .bx--form__helper-text {
.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"]::after {
top: 0.6875rem;
width: 0.5rem;
- border-bottom: 2px solid var(--inverse-01, #161616);
- border-left: 0 solid var(--inverse-01, #161616);
+ border-bottom: 2px solid var(--cds-inverse-01, #161616);
+ border-left: 0 solid var(--cds-inverse-01, #161616);
transform: scale(1) rotate(0deg);
}
@@ -6589,37 +7391,37 @@ fieldset[disabled] .bx--form__helper-text {
.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"].bx--checkbox-label__focus::before,
.bx--checkbox:indeterminate:focus + .bx--checkbox-label::before,
.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"].bx--checkbox-label__focus::before {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: 1px;
}
.bx--checkbox:disabled + .bx--checkbox-label,
.bx--checkbox-label[data-contained-checkbox-disabled=\\"true\\"] {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
cursor: not-allowed;
}
.bx--checkbox:disabled + .bx--checkbox-label::before,
.bx--checkbox-label[data-contained-checkbox-disabled=\\"true\\"]::before {
- border-color: var(--disabled-02, #525252);
+ border-color: var(--cds-disabled-02, #525252);
}
.bx--checkbox:checked:disabled + .bx--checkbox-label::before,
.bx--checkbox:indeterminate:disabled + .bx--checkbox-label::before,
.bx--checkbox-label[data-contained-checkbox-state=\\"true\\"][data-contained-checkbox-disabled=\\"true\\"]::before,
.bx--checkbox-label[data-contained-checkbox-state=\\"mixed\\"][data-contained-checkbox-disabled=\\"true\\"]::before {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--checkbox-label-text.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
width: 6.25rem;
- height: 1rem;
+ height: var(--cds-spacing-05, 1rem);
margin: 0.0625rem 0 0 0.375rem;
}
@@ -6633,7 +7435,7 @@ fieldset[disabled] .bx--form__helper-text {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -6745,20 +7547,20 @@ fieldset[disabled] .bx--form__helper-text {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
order: 1;
width: 100%;
padding: 0 2.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
text-overflow: ellipsis;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
appearance: none;
}
@@ -6770,7 +7572,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--search-input:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -6781,7 +7583,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--search-input::placeholder {
- color: var(--text-05, #8d8d8d);
+ color: var(--cds-text-05, #8d8d8d);
opacity: 1;
}
@@ -6790,23 +7592,23 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--search-input[disabled] {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
border-bottom: 1px solid transparent;
cursor: not-allowed;
}
.bx--search-input[disabled]::placeholder {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--search--light .bx--search-input {
- background: var(--field-02, #393939);
+ background: var(--cds-field-02, #393939);
}
.bx--search--sm .bx--search-input {
height: 2rem;
- padding: 0 2rem;
+ padding: 0 var(--cds-spacing-07, 2rem);
}
.bx--search--sm .bx--search-magnifier {
@@ -6815,7 +7617,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--search--lg .bx--search-input {
height: 2.5rem;
- padding: 0 2.5rem;
+ padding: 0 var(--cds-spacing-08, 2.5rem);
}
.bx--search--lg .bx--search-magnifier {
@@ -6824,19 +7626,19 @@ fieldset[disabled] .bx--form__helper-text {
.bx--search--xl .bx--search-input {
height: 3rem;
- padding: 0 3rem;
+ padding: 0 var(--cds-spacing-09, 3rem);
}
.bx--search-magnifier {
position: absolute;
top: 50%;
- left: 1rem;
+ left: var(--cds-spacing-05, 1rem);
z-index: 2;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
pointer-events: none;
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -6883,23 +7685,23 @@ fieldset[disabled] .bx--form__helper-text {
display: block;
width: 2px;
height: calc(100% - 2px);
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
content: \\"\\";
}
.bx--search-close:hover {
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
}
.bx--search-close:hover::before {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--search-button {
flex-shrink: 0;
margin-left: 0.125rem;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--search-button svg {
@@ -6931,17 +7733,17 @@ fieldset[disabled] .bx--form__helper-text {
cursor: pointer;
opacity: 1;
transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), border 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--search-close:hover,
.bx--search-button:hover {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--search-close:focus,
.bx--search-button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -6954,9 +7756,9 @@ fieldset[disabled] .bx--form__helper-text {
.bx--search-close:active,
.bx--search-button:active {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- background-color: var(--selected-ui, #393939);
+ background-color: var(--cds-selected-ui, #393939);
}
@media screen and (prefers-contrast) {
@@ -6981,16 +7783,16 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--search--disabled svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--search-close:focus::before,
.bx--search-close:active::before {
- background-color: var(--focus, #ffffff);
+ background-color: var(--cds-focus, #ffffff);
}
.bx--search-input:focus ~ .bx--search-close:hover {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -7028,7 +7830,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--search--sm.bx--skeleton .bx--search-input {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -7053,7 +7855,7 @@ fieldset[disabled] .bx--form__helper-text {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -7074,23 +7876,23 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--search-button, .bx--search-close {
- color: var(--icon-01, #f4f4f4);
+ color: var(--cds-icon-01, #f4f4f4);
}
.bx--table-toolbar {
position: relative;
display: flex;
width: 100%;
- height: 3rem;
+ height: var(--cds-spacing-09, 3rem);
overflow: hidden;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--toolbar-content {
display: flex;
justify-content: flex-end;
width: 100%;
- height: 3rem;
+ height: var(--cds-spacing-09, 3rem);
transform: translate3d(0, 0, 0);
transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -7112,15 +7914,15 @@ fieldset[disabled] .bx--form__helper-text {
.bx--toolbar-search-container-expandable {
position: relative;
- width: 3rem;
- height: 3rem;
+ width: var(--cds-spacing-09, 3rem);
+ height: var(--cds-spacing-09, 3rem);
box-shadow: none;
cursor: pointer;
transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
.bx--toolbar-search-container-expandable:hover {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--toolbar-search-container-expandable .bx--search-input {
@@ -7132,13 +7934,13 @@ fieldset[disabled] .bx--form__helper-text {
.bx--toolbar-search-container-expandable .bx--search-magnifier {
left: 0;
- width: 3rem;
- height: 3rem;
- padding: 1rem;
+ width: var(--cds-spacing-09, 3rem);
+ height: var(--cds-spacing-09, 3rem);
+ padding: var(--cds-spacing-05, 1rem);
}
.bx--toolbar-search-container-expandable.bx--search--disabled .bx--search-magnifier {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
cursor: not-allowed;
transition: background-color none;
}
@@ -7152,18 +7954,18 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--toolbar-search-container-expandable.bx--search .bx--search-close {
- width: 3rem;
- height: 3rem;
+ width: var(--cds-spacing-09, 3rem);
+ height: var(--cds-spacing-09, 3rem);
}
.bx--toolbar-search-container-expandable.bx--search .bx--search-close::before {
top: 0.125rem;
height: calc(100% - 0.25rem);
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--toolbar-search-container-expandable.bx--search .bx--search-close:focus::before {
- background-color: var(--focus, #ffffff);
+ background-color: var(--cds-focus, #ffffff);
}
.bx--toolbar-search-container-active.bx--search {
@@ -7176,7 +7978,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--toolbar-search-container-active .bx--label,
.bx--toolbar-search-container-active .bx--search-input {
- padding: 0 3rem;
+ padding: 0 var(--cds-spacing-09, 3rem);
cursor: text;
}
@@ -7187,7 +7989,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--toolbar-search-container-active .bx--search-input:not(:placeholder-shown) {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
border: none;
}
@@ -7227,9 +8029,9 @@ fieldset[disabled] .bx--form__helper-text {
appearance: none;
width: 100%;
display: flex;
- width: 3rem;
- height: 3rem;
- padding: 1rem;
+ width: var(--cds-spacing-09, 3rem);
+ height: var(--cds-spacing-09, 3rem);
+ padding: var(--cds-spacing-05, 1rem);
cursor: pointer;
transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
@@ -7260,8 +8062,8 @@ fieldset[disabled] .bx--form__helper-text {
appearance: none;
width: 100%;
display: flex;
- width: 3rem;
- height: 3rem;
+ width: var(--cds-spacing-09, 3rem);
+ height: var(--cds-spacing-09, 3rem);
cursor: pointer;
transition: background 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
@@ -7277,11 +8079,11 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--toolbar-action:hover:not([disabled]) {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--toolbar-action:hover[aria-expanded=\\"true\\"] {
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--toolbar-action[disabled] {
@@ -7290,12 +8092,12 @@ fieldset[disabled] .bx--form__helper-text {
.bx--toolbar-action[disabled] .bx--toolbar-action__icon {
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--toolbar-action:focus:not([disabled]),
.bx--toolbar-action:active:not([disabled]) {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -7318,20 +8120,20 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--overflow-menu--data-table {
- height: 3rem;
+ height: var(--cds-spacing-09, 3rem);
}
.bx--toolbar-action__icon {
width: auto;
- max-width: 1rem;
- height: 1rem;
- fill: var(--icon-01, #f4f4f4);
+ max-width: var(--cds-spacing-05, 1rem);
+ height: var(--cds-spacing-05, 1rem);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--toolbar-search-container-persistent {
position: relative;
width: 100%;
- height: 3rem;
+ height: var(--cds-spacing-09, 3rem);
opacity: 1;
}
@@ -7345,17 +8147,17 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--toolbar-search-container-persistent .bx--search-magnifier {
- left: 1rem;
+ left: var(--cds-spacing-05, 1rem);
}
.bx--toolbar-search-container-persistent .bx--search-input {
- height: 3rem;
- padding: 0 3rem;
+ height: var(--cds-spacing-09, 3rem);
+ padding: 0 var(--cds-spacing-09, 3rem);
border: none;
}
.bx--toolbar-search-container-persistent .bx--search-input:focus:not([disabled]) {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -7366,17 +8168,17 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--toolbar-search-container-persistent .bx--search-input:hover:not([disabled]) {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--toolbar-search-container-persistent .bx--search-input:active:not([disabled]),
.bx--toolbar-search-container-persistent .bx--search-input:not(:placeholder-shown) {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--toolbar-search-container-persistent .bx--search-close {
- width: 3rem;
- height: 3rem;
+ width: var(--cds-spacing-09, 3rem);
+ height: var(--cds-spacing-09, 3rem);
}
.bx--batch-actions--active ~ .bx--toolbar-search-container,
@@ -7394,10 +8196,10 @@ fieldset[disabled] .bx--form__helper-text {
align-items: center;
width: 100%;
height: 100%;
- padding-right: 1.5rem;
- padding-left: 1.5rem;
+ padding-right: var(--cds-spacing-06, 1.5rem);
+ padding-left: var(--cds-spacing-06, 1.5rem);
overflow-x: auto;
- background-color: var(--interactive-01, #0f62fe);
+ background-color: var(--cds-interactive-01, #0f62fe);
transform: translate3d(0, 48px, 0);
transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), clip-path 110ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
@@ -7406,7 +8208,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--batch-actions:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -7430,17 +8232,17 @@ fieldset[disabled] .bx--form__helper-text {
.bx--action-list .bx--btn {
min-width: 0;
padding: calc(0.875rem - 3px) 16px;
- color: var(--text-04, #ffffff);
+ color: var(--cds-text-04, #ffffff);
}
.bx--action-list .bx--btn:disabled {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
}
.bx--action-list .bx--btn .bx--btn__icon {
position: static;
- margin-left: 0.5rem;
- fill: var(--icon-03, #ffffff);
+ margin-left: var(--cds-spacing-03, 0.5rem);
+ fill: var(--cds-icon-03, #ffffff);
}
.bx--action-list .bx--btn .bx--btn__icon .st0 {
@@ -7459,7 +8261,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--action-list .bx--btn--primary:focus {
- outline: 2px solid var(--ui-01, #262626);
+ outline: 2px solid var(--cds-ui-01, #262626);
outline-offset: -0.125rem;
}
@@ -7474,8 +8276,8 @@ fieldset[disabled] .bx--form__helper-text {
left: 0;
display: block;
width: 0.0625rem;
- height: 1rem;
- background-color: var(--text-04, #ffffff);
+ height: var(--cds-spacing-05, 1rem);
+ background-color: var(--cds-text-04, #ffffff);
border: none;
opacity: 1;
transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -7489,7 +8291,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--batch-summary__cancel {
position: relative;
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
.bx--batch-summary {
@@ -7497,15 +8299,15 @@ fieldset[disabled] .bx--form__helper-text {
left: 0;
display: flex;
align-items: center;
- margin-left: 1rem;
- color: var(--text-04, #ffffff);
+ margin-left: var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-04, #ffffff);
}
.bx--batch-summary__para {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.bx--table-toolbar--small {
@@ -7532,7 +8334,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--table-toolbar--small .bx--toolbar-search-container-persistent .bx--search-magnifier {
width: 2rem;
height: 2rem;
- padding: 0.5rem;
+ padding: var(--cds-spacing-03, 0.5rem);
}
.bx--table-toolbar--small .bx--toolbar-action.bx--toolbar-search-container-persistent {
@@ -7544,7 +8346,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--table-toolbar--small .bx--toolbar-search-container-expandable .bx--search .bx--search-input {
- padding: 0 3rem;
+ padding: 0 var(--cds-spacing-09, 3rem);
}
.bx--table-toolbar--small .bx--toolbar-search-container-active {
@@ -7557,9 +8359,9 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
@media screen and (prefers-contrast) {
@@ -7570,7 +8372,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:active,
.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-input:not(:placeholder-shown) {
- background-color: var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
}
.bx--table-toolbar--small .bx--toolbar-search-container-active .bx--search-magnifier:focus,
@@ -7592,7 +8394,7 @@ fieldset[disabled] .bx--form__helper-text {
.bx--table-toolbar--small .bx--toolbar-action {
width: 2rem;
height: 2rem;
- padding: 0.5rem 0;
+ padding: var(--cds-spacing-03, 0.5rem) 0;
}
.bx--table-toolbar--small .bx--btn--primary {
@@ -7612,7 +8414,7 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table-container {
- padding-top: 0.125rem;
+ padding-top: var(--cds-spacing-01, 0.125rem);
}
.bx--data-table-content {
@@ -7620,24 +8422,24 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table-header {
- padding: 1rem 0 1.5rem 1rem;
- background: var(--ui-01, #262626);
+ padding: var(--cds-spacing-05, 1rem) 0 var(--cds-spacing-06, 1.5rem) var(--cds-spacing-05, 1rem);
+ background: var(--cds-ui-01, #262626);
}
.bx--data-table-header__title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
- color: var(--text-01, #f4f4f4);
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--data-table-header__description {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--text-02, #c6c6c6);
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--data-table {
@@ -7647,25 +8449,25 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table thead {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
- background-color: var(--ui-03, #393939);
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--data-table tbody {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
width: 100%;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--data-table tr {
width: 100%;
- height: 3rem;
+ height: var(--cds-spacing-09, 3rem);
border: none;
}
@@ -7676,20 +8478,20 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table tbody tr:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.bx--data-table tbody tr:hover td,
.bx--data-table tbody tr:hover th {
- color: var(--text-01, #f4f4f4);
- background: var(--hover-ui, #353535);
- border-top: 1px solid var(--hover-ui, #353535);
- border-bottom: 1px solid var(--hover-ui, #353535);
+ color: var(--cds-text-01, #f4f4f4);
+ background: var(--cds-hover-ui, #353535);
+ border-top: 1px solid var(--cds-hover-ui, #353535);
+ border-bottom: 1px solid var(--cds-hover-ui, #353535);
}
.bx--data-table tbody tr:hover td .bx--link,
.bx--data-table tbody tr:hover th .bx--link {
- color: var(--link-02, #a6c8ff);
+ color: var(--cds-link-02, #a6c8ff);
}
.bx--data-table th,
@@ -7699,10 +8501,10 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table th {
- padding-right: 1rem;
- padding-left: 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--ui-03, #393939);
+ padding-right: var(--cds-spacing-05, 1rem);
+ padding-left: var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--data-table th:last-of-type {
@@ -7716,17 +8518,17 @@ fieldset[disabled] .bx--form__helper-text {
.bx--data-table td,
.bx--data-table tbody th {
- padding-right: 1rem;
- padding-left: 1rem;
- color: var(--text-02, #c6c6c6);
- background: var(--ui-01, #262626);
- border-top: 1px solid var(--ui-01, #262626);
- border-bottom: 1px solid var(--ui-03, #393939);
+ padding-right: var(--cds-spacing-05, 1rem);
+ padding-left: var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-02, #c6c6c6);
+ background: var(--cds-ui-01, #262626);
+ border-top: 1px solid var(--cds-ui-01, #262626);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
.bx--data-table td + td:first-of-type,
.bx--data-table tbody th + td:first-of-type {
- padding-left: 0.75rem;
+ padding-left: var(--cds-spacing-04, 0.75rem);
}
@supports (-moz-appearance: none) {
@@ -7744,11 +8546,11 @@ fieldset[disabled] .bx--form__helper-text {
.bx--number__control-btn::after,
.bx--text-input,
.bx--select-input {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--data-table td.bx--table-column-menu .bx--overflow-menu[aria-expanded=\\"false\\"]:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -7782,21 +8584,21 @@ fieldset[disabled] .bx--form__helper-text {
.bx--table-row--menu-option .bx--overflow-menu-options__btn .bx--overflow-menu-options__option-content svg {
position: relative;
top: 0.1875rem;
- margin-right: 0.5rem;
+ margin-right: var(--cds-spacing-03, 0.5rem);
}
.bx--data-table .bx--overflow-menu:hover,
.bx--data-table .bx--overflow-menu__trigger:hover {
- background-color: var(--hover-selected-ui, #4c4c4c);
+ background-color: var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--data-table--selected .bx--overflow-menu:hover,
.bx--data-table--selected .bx--overflow-menu__trigger:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--data-table--selected .bx--link {
- color: var(--link-02, #a6c8ff);
+ color: var(--cds-link-02, #a6c8ff);
}
.bx--data-table--compact td.bx--table-column-menu,
@@ -7811,35 +8613,35 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table--tall .bx--table-column-menu {
- padding-top: 0.5rem;
+ padding-top: var(--cds-spacing-03, 0.5rem);
}
.bx--data-table--zebra tbody tr:not(.bx--parent-row):nth-child(odd) td {
- border-bottom: 1px solid var(--ui-01, #262626);
+ border-bottom: 1px solid var(--cds-ui-01, #262626);
}
.bx--data-table--zebra tbody tr:not(.bx--parent-row):nth-child(even) td {
- background-color: var(--ui-02, #393939);
- border-top: 1px solid var(--ui-02, #393939);
- border-bottom: 1px solid var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
+ border-top: 1px solid var(--cds-ui-02, #393939);
+ border-bottom: 1px solid var(--cds-ui-02, #393939);
}
.bx--data-table--zebra tbody tr:not(.bx--parent-row):hover td {
- background-color: var(--hover-ui, #353535);
- border-top: 1px solid var(--hover-ui, #353535);
- border-bottom: 1px solid var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
+ border-top: 1px solid var(--cds-hover-ui, #353535);
+ border-bottom: 1px solid var(--cds-hover-ui, #353535);
}
.bx--table-column-checkbox .bx--checkbox-label {
- padding-left: 1rem;
+ padding-left: var(--cds-spacing-05, 1rem);
}
.bx--data-table th.bx--table-column-checkbox {
position: static;
width: 2.75rem;
- padding-right: 1rem;
- padding-left: 1rem;
- background: var(--ui-03, #393939);
+ padding-right: var(--cds-spacing-05, 1rem);
+ padding-left: var(--cds-spacing-05, 1rem);
+ background: var(--cds-ui-03, #393939);
transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
}
@@ -7853,8 +8655,8 @@ fieldset[disabled] .bx--form__helper-text {
.bx--data-table thead th.bx--table-column-checkbox,
.bx--data-table tbody td.bx--table-column-checkbox {
width: 1rem;
- padding-right: 1rem;
- padding-left: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
+ padding-left: var(--cds-spacing-05, 1rem);
}
.bx--data-table thead th.bx--table-expand,
@@ -7885,11 +8687,11 @@ fieldset[disabled] .bx--form__helper-text {
}
.bx--data-table--tall .bx--table-column-radio {
- padding-top: 1rem;
+ padding-top: var(--cds-spacing-05, 1rem);
}
.bx--date-table tbody th.bx--table-column-checkbox:hover {
- background: var(--hover-selected-ui, #4c4c4c);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--table-column-radio {
@@ -7902,38 +8704,38 @@ fieldset[disabled] .bx--form__helper-text {
.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected td,
tr.bx--data-table--selected td {
- color: var(--text-01, #f4f4f4);
- background-color: var(--selected-ui, #393939);
- border-top: 1px solid var(--selected-ui, #393939);
- border-bottom: 1px solid var(--active-ui, #525252);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-selected-ui, #393939);
+ border-top: 1px solid var(--cds-selected-ui, #393939);
+ border-bottom: 1px solid var(--cds-active-ui, #525252);
}
.bx--data-table--zebra tbody tr:first-of-type:nth-child(odd).bx--data-table--selected td,
tr.bx--data-table--selected:first-of-type td {
- border-top: 1px solid var(--active-ui, #525252);
+ border-top: 1px solid var(--cds-active-ui, #525252);
}
.bx--data-table--zebra tbody tr:last-of-type:nth-child(odd).bx--data-table--selected td,
.bx--data-table--zebra tbody tr:last-of-type:nth-child(even).bx--data-table--selected td,
tr.bx--data-table--selected:last-of-type td {
- border-top: 1px solid var(--selected-ui, #393939);
- border-bottom: 1px solid var(--selected-ui, #393939);
+ border-top: 1px solid var(--cds-selected-ui, #393939);
+ border-bottom: 1px solid var(--cds-selected-ui, #393939);
}
.bx--data-table--zebra tbody tr:nth-child(even).bx--data-table--selected td {
- border-bottom: 1px solid var(--active-ui, #525252);
+ border-bottom: 1px solid var(--cds-active-ui, #525252);
}
.bx--data-table--zebra tbody tr:nth-child(even).bx--data-table--selected:hover td {
- border-bottom: 1px solid var(--hover-selected-ui, #4c4c4c);
+ border-bottom: 1px solid var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--data-table--zebra tbody tr:nth-child(odd).bx--data-table--selected:hover td,
.bx--data-table tbody .bx--data-table--selected:hover td {
- color: var(--text-01, #f4f4f4);
- background: var(--hover-selected-ui, #4c4c4c);
- border-top: 1px solid var(--hover-selected-ui, #4c4c4c);
- border-bottom: 1px solid var(--hover-selected-ui, #4c4c4c);
+ color: var(--cds-text-01, #f4f4f4);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
+ border-top: 1px solid var(--cds-hover-selected-ui, #4c4c4c);
+ border-bottom: 1px solid var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--data-table--selected .bx--overflow-menu .bx--overflow-menu__icon {
@@ -8005,8 +8807,8 @@ tr.bx--data-table--selected:last-of-type td {
}
.bx--data-table--tall .bx--table-header-label {
- padding-top: 1rem;
- padding-bottom: 1rem;
+ padding-top: var(--cds-spacing-05, 1rem);
+ padding-bottom: var(--cds-spacing-05, 1rem);
}
.bx--data-table--tall td,
@@ -8020,10 +8822,10 @@ tr.bx--data-table--selected:last-of-type td {
}
.bx--data-table--cell-secondary-text {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
}
.bx--data-table--static {
@@ -8031,7 +8833,7 @@ tr.bx--data-table--selected:last-of-type td {
}
.bx--data-table_inner-container {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
transform: translateZ(0);
}
@@ -8060,7 +8862,7 @@ tr.bx--data-table--selected:last-of-type td {
}
.bx--data-table--sticky-header thead tr th {
- border-bottom: 1px solid var(--active-ui, #525252);
+ border-bottom: 1px solid var(--cds-active-ui, #525252);
}
.bx--data-table--sticky-header tbody {
@@ -8096,7 +8898,7 @@ tr.bx--data-table--selected:last-of-type td {
}
.bx--data-table--sticky-header tr.bx--parent-row.bx--expandable-row:hover + tr[data-child-row] td {
- border-top: 1px solid var(--hover-ui, #353535);
+ border-top: 1px solid var(--cds-hover-ui, #353535);
}
.bx--data-table--sticky-header tr.bx--expandable-row:last-of-type {
@@ -8234,12 +9036,12 @@ tr.bx--data-table--selected:last-of-type td {
}
.bx--data-table tr.bx--parent-row:first-of-type td {
- border-top: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
}
.bx--expandable-row--hidden td {
width: auto;
- padding: 1rem;
+ padding: var(--cds-spacing-05, 1rem);
border-top: 0;
}
@@ -8251,7 +9053,7 @@ tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] {
tr.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] td {
padding-top: 0;
padding-bottom: 0;
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
border: 0;
transition: padding 150ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -8267,7 +9069,7 @@ tr.bx--parent-row.bx--expandable-row + tr[data-child-row] {
tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td {
padding-left: 4rem;
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
transition: padding-bottom 110ms cubic-bezier(0.2, 0, 0.38, 0.9), transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -8289,8 +9091,8 @@ tr.bx--parent-row.bx--expandable-row + tr[data-child-row] td .bx--child-row-inne
.bx--parent-row.bx--expandable-row > td,
.bx--parent-row.bx--expandable-row + tr[data-child-row] > td {
- border-bottom: 1px solid var(--ui-03, #393939);
- box-shadow: 0 1px var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
+ box-shadow: 0 1px var(--cds-ui-03, #393939);
}
.bx--parent-row:not(.bx--expandable-row) + tr[data-child-row] > td {
@@ -8308,40 +9110,40 @@ tr.bx--parent-row.bx--expandable-row {
}
tr.bx--parent-row:not(.bx--expandable-row):first-of-type:hover td {
- border-top: 1px solid var(--ui-03, #393939);
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
tr.bx--parent-row.bx--expandable-row:hover td {
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
- border-top: 1px solid var(--ui-03, #393939);
- border-bottom: 1px solid var(--ui-03, #393939);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
+ border-top: 1px solid var(--cds-ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
tr.bx--parent-row.bx--expandable-row:hover td:first-of-type {
- border-bottom: 1px solid var(--hover-ui, #353535);
+ border-bottom: 1px solid var(--cds-hover-ui, #353535);
}
tr.bx--parent-row.bx--expandable-row:hover + tr[data-child-row] td {
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
- border-bottom: 1px solid var(--ui-03, #393939);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
tr.bx--expandable-row--hover + tr[data-child-row] td {
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
tr.bx--expandable-row--hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
tr.bx--expandable-row--hover td {
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
- border-top: 1px solid var(--ui-03, #393939);
- border-bottom: 1px solid var(--ui-03, #393939);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
+ border-top: 1px solid var(--cds-ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type {
@@ -8349,7 +9151,7 @@ tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type
}
.bx--data-table td.bx--table-expand {
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
.bx--data-table th.bx--table-expand + .bx--table-column-checkbox,
@@ -8406,7 +9208,7 @@ tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type
.bx--table-expand__button:focus {
outline: none;
- box-shadow: inset 0 0 0 2px var(--focus, #ffffff);
+ box-shadow: inset 0 0 0 2px var(--cds-focus, #ffffff);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -8418,7 +9220,7 @@ tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td:first-of-type
.bx--table-expand__svg {
transform: rotate(90deg);
transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -8438,13 +9240,13 @@ tr.bx--parent-row.bx--expandable-row td.bx--table-expand + td::after {
left: 0;
width: 0.5rem;
height: 0.0625rem;
- background: var(--ui-03, #393939);
+ background: var(--cds-ui-03, #393939);
content: \\"\\";
}
tr.bx--parent-row.bx--expandable-row:hover td.bx--table-expand + td::after,
tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td.bx--table-expand + td::after {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
tr.bx--parent-row.bx--data-table--selected td.bx--table-expand + td::after {
@@ -8453,14 +9255,14 @@ tr.bx--parent-row.bx--data-table--selected td.bx--table-expand + td::after {
.bx--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td,
.bx--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 4) td {
- border-bottom: 1px solid var(--ui-01, #262626);
+ border-bottom: 1px solid var(--cds-ui-01, #262626);
}
.bx--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td,
.bx--data-table--zebra tbody tr[data-child-row]:nth-child(4n + 2) td {
- background-color: var(--ui-02, #393939);
- border-top: 1px solid var(--ui-02, #393939);
- border-bottom: 1px solid var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
+ border-top: 1px solid var(--cds-ui-02, #393939);
+ border-bottom: 1px solid var(--cds-ui-02, #393939);
}
.bx--data-table--zebra tr.bx--parent-row td,
@@ -8471,81 +9273,81 @@ tr.bx--parent-row.bx--data-table--selected td.bx--table-expand + td::after {
.bx--data-table--zebra tbody tr[data-parent-row]:hover td,
.bx--data-table--zebra tbody tr[data-parent-row]:hover + tr[data-child-row] td,
.bx--data-table--zebra tbody tr[data-child-row]:hover td {
- background-color: var(--hover-field, #353535);
- border-top: 1px solid var(--hover-field, #353535);
- border-bottom: 1px solid var(--hover-field, #353535);
+ background-color: var(--cds-hover-field, #353535);
+ border-top: 1px solid var(--cds-hover-field, #353535);
+ border-bottom: 1px solid var(--cds-hover-field, #353535);
}
.bx--data-table--zebra tr.bx--parent-row.bx--expandable-row.bx--expandable-row--hover td {
- background: var(--hover-ui, #353535);
- border-top: 1px solid var(--hover-field, #353535);
- border-bottom: 1px solid var(--hover-field, #353535);
+ background: var(--cds-hover-ui, #353535);
+ border-top: 1px solid var(--cds-hover-field, #353535);
+ border-bottom: 1px solid var(--cds-hover-field, #353535);
}
tr.bx--parent-row.bx--data-table--selected:first-of-type td {
- background: var(--selected-ui, #393939);
- border-top: 1px solid var(--active-ui, #525252);
- border-bottom: 1px solid var(--ui-03, #393939);
- box-shadow: 0 1px var(--active-ui, #525252);
+ background: var(--cds-selected-ui, #393939);
+ border-top: 1px solid var(--cds-active-ui, #525252);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
+ box-shadow: 0 1px var(--cds-active-ui, #525252);
}
tr.bx--parent-row.bx--data-table--selected td {
- color: var(--text-01, #f4f4f4);
- background: var(--selected-ui, #393939);
+ color: var(--cds-text-01, #f4f4f4);
+ background: var(--cds-selected-ui, #393939);
border-bottom: 1px solid transparent;
- box-shadow: 0 1px var(--active-ui, #525252);
+ box-shadow: 0 1px var(--cds-active-ui, #525252);
}
tr.bx--parent-row.bx--data-table--selected:last-of-type td {
- background: var(--selected-ui, #393939);
+ background: var(--cds-selected-ui, #393939);
border-bottom: 1px solid transparent;
- box-shadow: 0 1px var(--ui-03, #393939);
+ box-shadow: 0 1px var(--cds-ui-03, #393939);
}
tr.bx--parent-row.bx--data-table--selected:not(.bx--expandable-row):hover td {
- background: var(--hover-selected-ui, #4c4c4c);
- border-top: 1px solid var(--hover-selected-ui, #4c4c4c);
- border-bottom: 1px solid var(--ui-03, #393939);
- box-shadow: 0 1px var(--hover-selected-ui, #4c4c4c);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
+ border-top: 1px solid var(--cds-hover-selected-ui, #4c4c4c);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
+ box-shadow: 0 1px var(--cds-hover-selected-ui, #4c4c4c);
}
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row td,
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row td:first-of-type {
border-bottom: 1px solid transparent;
- box-shadow: 0 1px var(--selected-ui, #393939);
+ box-shadow: 0 1px var(--cds-selected-ui, #393939);
}
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row:hover td,
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row:hover td:first-of-type,
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover td,
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover td:first-of-type {
- background: var(--hover-selected-ui, #4c4c4c);
- border-top: 1px solid var(--hover-selected-ui, #4c4c4c);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
+ border-top: 1px solid var(--cds-hover-selected-ui, #4c4c4c);
border-bottom: 1px solid transparent;
- box-shadow: 0 1px var(--hover-selected-ui, #4c4c4c);
+ box-shadow: 0 1px var(--cds-hover-selected-ui, #4c4c4c);
}
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row] td {
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
- border-top: 1px solid var(--active-ui, #525252);
- border-bottom: 1px solid var(--ui-03, #393939);
- box-shadow: 0 1px var(--active-ui, #525252);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
+ border-top: 1px solid var(--cds-active-ui, #525252);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
+ box-shadow: 0 1px var(--cds-active-ui, #525252);
}
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row + tr[data-child-row]:last-of-type td {
padding-bottom: 1.5rem;
- box-shadow: inset 0 -1px var(--active-ui, #525252);
+ box-shadow: inset 0 -1px var(--cds-active-ui, #525252);
}
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row:hover + tr[data-child-row] td,
tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-child-row] td {
- background: var(--selected-ui, #393939);
+ background: var(--cds-selected-ui, #393939);
}
.bx--data-table--sort th,
.bx--data-table th[aria-sort] {
- height: 3rem;
+ height: var(--cds-spacing-09, 3rem);
padding: 0;
border-top: none;
border-bottom: none;
@@ -8570,11 +9372,11 @@ tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-c
justify-content: space-between;
width: 100%;
min-height: 100%;
- padding-left: 1rem;
- color: var(--text-01, #f4f4f4);
+ padding-left: var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-01, #f4f4f4);
font: inherit;
line-height: 1;
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
}
@@ -8589,7 +9391,7 @@ tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-c
}
.bx--table-sort:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -8600,7 +9402,7 @@ tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-c
}
.bx--table-sort:hover {
- background: var(--hover-selected-ui, #4c4c4c);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--table-sort:focus svg,
@@ -8609,8 +9411,8 @@ tr.bx--parent-row.bx--data-table--selected.bx--expandable-row--hover + tr[data-c
}
.bx--data-table.bx--data-table--sort th > .bx--table-header-label {
- padding-right: 1rem;
- padding-left: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
+ padding-left: var(--cds-spacing-05, 1rem);
}
th .bx--table-sort__flex {
@@ -8656,15 +9458,15 @@ th .bx--table-sort__flex {
.bx--table-sort__icon-unsorted {
width: 1.25rem;
- min-width: 1rem;
- margin-right: 0.5rem;
- margin-left: 0.5rem;
+ min-width: var(--cds-spacing-05, 1rem);
+ margin-right: var(--cds-spacing-03, 0.5rem);
+ margin-left: var(--cds-spacing-03, 0.5rem);
opacity: 0;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.bx--table-sort.bx--table-sort--active {
- background: var(--hover-selected-ui, #4c4c4c);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--table-sort.bx--table-sort--active .bx--table-sort__icon-unsorted {
@@ -8682,13 +9484,13 @@ th .bx--table-sort__flex {
.bx--table-sort__icon {
width: 1.25rem;
- min-width: 1rem;
- margin-right: 0.5rem;
- margin-left: 0.5rem;
+ min-width: var(--cds-spacing-05, 1rem);
+ margin-right: var(--cds-spacing-03, 0.5rem);
+ margin-left: var(--cds-spacing-03, 0.5rem);
transform: rotate(0);
opacity: 1;
transition: transform 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -8765,8 +9567,8 @@ th .bx--table-sort__flex {
}
.bx--inline-edit-label__action:focus {
- outline: 1px solid var(--focus, #ffffff);
- padding: 0.125rem;
+ outline: 1px solid var(--cds-focus, #ffffff);
+ padding: var(--cds-spacing-01, 0.125rem);
}
@media screen and (prefers-contrast) {
@@ -8782,7 +9584,7 @@ th .bx--table-sort__flex {
.bx--inline-edit-label__icon {
opacity: 0;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.bx--inline-edit-input {
@@ -8795,7 +9597,7 @@ th .bx--table-sort__flex {
}
.bx--inline-edit-input--active input {
- padding-left: 0.75rem;
+ padding-left: var(--cds-spacing-04, 0.75rem);
}
.bx--data-table.bx--skeleton th {
@@ -8807,7 +9609,7 @@ th .bx--table-sort__flex {
.bx--data-table.bx--skeleton td span {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -8830,7 +9632,7 @@ th .bx--table-sort__flex {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -8845,11 +9647,11 @@ th .bx--table-sort__flex {
.bx--data-table.bx--skeleton tr:hover td {
background: transparent;
- border-color: var(--ui-03, #393939);
+ border-color: var(--cds-ui-03, #393939);
}
.bx--data-table.bx--skeleton tr:hover td:first-of-type, .bx--data-table.bx--skeleton tr:hover td:last-of-type {
- border-color: var(--ui-03, #393939);
+ border-color: var(--cds-ui-03, #393939);
}
.bx--data-table.bx--skeleton .bx--table-sort-v2 {
@@ -8857,17 +9659,17 @@ th .bx--table-sort__flex {
}
.bx--data-table.bx--skeleton th span {
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
}
.bx--data-table.bx--skeleton th span::before {
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
}
.bx--data-table-container.bx--skeleton .bx--data-table-header__title {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -8885,7 +9687,7 @@ th .bx--table-sort__flex {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -8900,13 +9702,13 @@ th .bx--table-sort__flex {
.bx--data-table-container.bx--skeleton .bx--data-table-header__description {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
width: 10rem;
height: 1rem;
- margin-top: 0.5rem;
+ margin-top: var(--cds-spacing-03, 0.5rem);
}
.bx--data-table-container.bx--skeleton .bx--data-table-header__description:hover, .bx--data-table-container.bx--skeleton .bx--data-table-header__description:focus, .bx--data-table-container.bx--skeleton .bx--data-table-header__description:active {
@@ -8919,7 +9721,7 @@ th .bx--table-sort__flex {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -8940,7 +9742,7 @@ th .bx--table-sort__flex {
}
.security--data-table .bx--data-table {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.security--data-table .bx--data-table-content {
@@ -8971,10 +9773,10 @@ th .bx--table-sort__flex {
}
.security--error-page__title {
- font-size: 2rem;
- font-weight: 400;
- line-height: 1.25;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-05-font-size, 2rem);
+ font-weight: var(--cds-productive-heading-05-font-weight, 400);
+ line-height: var(--cds-productive-heading-05-line-height, 1.25);
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
margin-top: 0.75rem;
margin-bottom: 3rem;
}
@@ -8984,24 +9786,24 @@ th .bx--table-sort__flex {
}
.security--error-page__sub-title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
margin-bottom: 1rem;
}
.security--error-page__description {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-heading-02-font-size, 1rem);
+ font-weight: var(--cds-heading-02-font-weight, 600);
+ line-height: var(--cds-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-heading-02-letter-spacing, 0);
margin-bottom: 2rem;
}
.security--error-page__content-wrapper {
display: flex;
- padding: 6rem 2rem;
+ padding: 6rem var(--cds-spacing-07, 2rem);
flex-direction: column;
justify-content: space-between;
}
@@ -9020,10 +9822,10 @@ th .bx--table-sort__flex {
}
.security--link--external {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
box-shadow: none;
word-wrap: break-word;
@@ -9091,12 +9893,12 @@ th .bx--table-sort__flex {
.bx--accordion__item {
overflow: visible;
- border-top: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--accordion__item:last-child {
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
}
.bx--accordion__heading {
@@ -9123,7 +9925,7 @@ th .bx--table-sort__flex {
min-height: 2.5rem;
margin: 0;
padding: 0.625rem 0;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
cursor: pointer;
transition: background-color cubic-bezier(0.2, 0, 0.38, 0.9) 110ms;
}
@@ -9148,7 +9950,7 @@ th .bx--table-sort__flex {
}
.bx--accordion__heading:hover::before {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--accordion__heading:focus {
@@ -9157,7 +9959,7 @@ th .bx--table-sort__flex {
.bx--accordion__heading:focus::before {
box-sizing: border-box;
- border: 2px solid var(--focus, #ffffff);
+ border: 2px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -9176,12 +9978,12 @@ th .bx--table-sort__flex {
}
.bx--accordion__heading[disabled] {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
cursor: not-allowed;
}
.bx--accordion__heading[disabled] .bx--accordion__arrow {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--accordion__heading[disabled]:hover::before {
@@ -9190,11 +9992,11 @@ th .bx--table-sort__flex {
.bx--accordion__item--disabled,
.bx--accordion__item--disabled + .bx--accordion__item {
- border-top: 1px solid var(--disabled-02, #525252);
+ border-top: 1px solid var(--cds-disabled-02, #525252);
}
li.bx--accordion__item--disabled:last-of-type {
- border-bottom: 1px solid var(--disabled-02, #525252);
+ border-bottom: 1px solid var(--cds-disabled-02, #525252);
}
.bx--accordion__arrow {
@@ -9206,7 +10008,7 @@ li.bx--accordion__item--disabled:last-of-type {
margin: 2px 1rem 0 0;
transform: rotate(90deg) /*rtl:ignore*/;
transition: all 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -9216,10 +10018,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--accordion__title {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
z-index: 1;
width: 100%;
margin: 0 0 0 1rem;
@@ -9246,10 +10048,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--accordion__content > p {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
}
.bx--accordion--start .bx--accordion__heading {
@@ -9283,14 +10085,14 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--accordion__item--active .bx--accordion__content {
display: block;
- padding-top: 0.5rem;
+ padding-top: var(--cds-spacing-03, 0.5rem);
padding-bottom: 1.5rem;
transition: padding-top cubic-bezier(0, 0, 0.38, 0.9) 110ms, padding-bottom cubic-bezier(0, 0, 0.38, 0.9) 110ms;
}
.bx--accordion__item--active .bx--accordion__arrow {
transform: rotate(-90deg) /*rtl:ignore*/;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -9307,7 +10109,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--accordion.bx--skeleton .bx--accordion__arrow {
cursor: default;
pointer-events: none;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.bx--accordion.bx--skeleton .bx--accordion__arrow:hover, .bx--accordion.bx--skeleton .bx--accordion__arrow:focus, .bx--accordion.bx--skeleton .bx--accordion__arrow:active {
@@ -9321,7 +10123,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--accordion--end.bx--skeleton .bx--accordion__arrow {
- margin-left: 1rem;
+ margin-left: var(--cds-spacing-05, 1rem);
}
.bx--skeleton .bx--accordion__heading:focus .bx--accordion__arrow {
@@ -9353,14 +10155,14 @@ li.bx--accordion__item--disabled:last-of-type {
.security--filter-category {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
- border-top: 0.0625rem solid var(--ui-03, #393939);
+ border-top: 0.0625rem solid var(--cds-ui-03, #393939);
}
.security--filter-category__title {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
font-weight: 600;
display: flex;
margin-top: 0.5rem;
@@ -9370,7 +10172,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--filter-category__count {
font-weight: 400;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--filter-search {
@@ -9385,7 +10187,7 @@ li.bx--accordion__item--disabled:last-of-type {
width: 100%;
max-height: 19rem;
padding: 0.5rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
box-sizing: border-box;
overflow-y: auto;
z-index: 9100;
@@ -9400,23 +10202,23 @@ li.bx--accordion__item--disabled:last-of-type {
.security--filter-search__subcategory {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
- border-top: 0.0625rem solid var(--ui-04, #6f6f6f);
+ border-top: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
}
.security--filter-search__subcategory__title {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
margin-top: 0;
margin-bottom: 0.5rem;
}
.security--filter-search__results--none {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.security--filter-search__results--visible {
@@ -9425,10 +10227,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-selector {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
}
@@ -9447,12 +10249,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-selector__count {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
margin-left: 0.75rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--filter-selector__label {
@@ -9486,7 +10288,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-height: 2rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--filter-subcategory > .bx--accordion__content {
@@ -9494,7 +10296,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-subcategory.bx--accordion__item--active > .bx--accordion__heading {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--filter-subcategory__button--toggle {
@@ -9507,7 +10309,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-subcategory__button--toggle.bx--btn, .security--filter-subcategory__button--toggle.bx--btn:active, .security--filter-subcategory__button--toggle.bx--btn:hover {
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--filter-subcategory__button--toggle.bx--btn > .bx--btn__icon, .security--filter-subcategory__button--toggle.bx--btn:hover > .bx--btn__icon {
@@ -9535,20 +10337,20 @@ li.bx--accordion__item--disabled:last-of-type {
.security--filter-panel-label__count {
margin-left: 0.75rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--filter-panel-group {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
- border-top: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
}
.security--filter-panel-group__title {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
font-weight: 600;
margin-top: 0;
margin-bottom: 1rem;
@@ -9606,18 +10408,18 @@ li.bx--accordion__item--disabled:last-of-type {
padding: 0;
border: none;
background: transparent;
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
margin-top: 1px;
}
.security--truncated-list__expand-button:hover {
background: transparent;
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
}
.security--truncated-list__expand-button:active {
background: transparent;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--filter-panel-accordion-item {
@@ -9629,10 +10431,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-panel-accordion-item__count {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.security--filter-panel-accordion-item__list {
@@ -9645,7 +10447,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
min-height: 2rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
border: 2px solid transparent;
}
@@ -9655,7 +10457,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-panel-accordion-item > .bx--accordion__heading:focus::before {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border: none;
}
@@ -9675,14 +10477,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-panel-accordion-item.bx--accordion__item--active > .bx--accordion__heading {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
-
-.security--filter-panel-checkbox__wrapper {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+
+.security--filter-panel-checkbox__wrapper {
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
max-width: 100%;
}
@@ -9692,10 +10494,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-panel-checkbox__count {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.security--filter-panel-checkbox__count::before {
@@ -9723,14 +10525,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter-panel-checkbox-with-overflow-menu--open, .security--filter-panel-checkbox-with-overflow-menu:hover, .security--filter-panel-checkbox-with-overflow-menu:focus-within {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.security--filter-panel-checkbox-with-overflow-menu__overflow-button {
position: absolute;
top: 0;
right: 0;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
height: 1.5rem;
width: 1.5rem;
}
@@ -9760,17 +10562,17 @@ li.bx--accordion__item--disabled:last-of-type {
width: 100%;
max-height: 19rem;
padding: 0.5rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
box-sizing: border-box;
overflow-y: auto;
z-index: 9100;
}
.security--filter-panel__title {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
@@ -9787,7 +10589,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--ica-skeleton .security--ica-skeleton__value {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -9807,7 +10609,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -9832,28 +10634,28 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--ica__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
display: block;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
margin: 0;
}
.security--ica__value {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
margin-bottom: 0;
}
.security--ica__total {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-bottom: 0;
padding-top: 0.875rem;
}
@@ -9868,53 +10670,53 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--ica__percentage {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
}
.security--ica__percentage-mark {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.security--ica--lg .security--ica__value, .security--ica--lg .security--ica__percentage {
- font-size: 2.625rem;
- font-weight: 300;
- line-height: 1.199;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-06-font-size, 2.625rem);
+ font-weight: var(--cds-productive-heading-06-font-weight, 300);
+ line-height: var(--cds-productive-heading-06-line-height, 1.199);
+ letter-spacing: var(--cds-productive-heading-06-letter-spacing, 0);
}
.security--ica--lg .security--ica__total, .security--ica--lg .security--ica__percentage-mark {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
padding-top: 1.25rem;
}
.security--ica--xl .security--ica__label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.security--ica--xl .security--ica__value, .security--ica--xl .security--ica__percentage {
- font-size: 3.375rem;
- font-weight: 300;
- line-height: 1.19;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-07-font-size, 3.375rem);
+ font-weight: var(--cds-productive-heading-07-font-weight, 300);
+ line-height: var(--cds-productive-heading-07-line-height, 1.19);
+ letter-spacing: var(--cds-productive-heading-07-letter-spacing, 0);
}
.security--ica--xl .security--ica__total, .security--ica--xl .security--ica__percentage-mark {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
padding-top: 1.5rem;
}
@@ -9986,7 +10788,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--icon-button-bar__divider__inner {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
width: 1px;
}
@@ -10070,7 +10872,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--loading__stroke {
- stroke: var(--interactive-04, #4589ff);
+ stroke: var(--cds-interactive-04, #4589ff);
stroke-dashoffset: 16;
}
@@ -10100,11 +10902,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--loading--small .bx--loading__svg {
- stroke: var(--interactive-04, #4589ff);
+ stroke: var(--cds-interactive-04, #4589ff);
}
.bx--loading__background {
- stroke: var(--ui-03, #393939);
+ stroke: var(--cds-ui-03, #393939);
stroke-dashoffset: -22;
}
@@ -10127,7 +10929,7 @@ li.bx--accordion__item--disabled:last-of-type {
justify-content: center;
width: 100%;
height: 100%;
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
transition: background-color 720ms cubic-bezier(0.4, 0.14, 0.3, 1);
}
@@ -10157,11 +10959,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-loading__text {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- color: var(--text-02, #c6c6c6);
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--inline-loading__animation {
@@ -10173,7 +10975,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-loading__checkmark-container {
- fill: var(--support-02, #42be65);
+ fill: var(--cds-support-02, #42be65);
}
.bx--inline-loading__checkmark-container.bx--inline-loading__svg {
@@ -10192,7 +10994,7 @@ li.bx--accordion__item--disabled:last-of-type {
animation-duration: 250ms;
animation-fill-mode: forwards;
fill: none;
- stroke: var(--interactive-04, #4589ff);
+ stroke: var(--cds-interactive-04, #4589ff);
stroke-width: 1.8;
stroke-dasharray: 12;
stroke-dashoffset: 12;
@@ -10201,7 +11003,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--inline-loading--error {
width: 1rem;
height: 1rem;
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--inline-loading--error[hidden] {
@@ -10209,7 +11011,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--loading--small .bx--inline-loading__svg {
- stroke: var(--interactive-04, #4589ff);
+ stroke: var(--cds-interactive-04, #4589ff);
}
/* If IE11 Don\\"t show check animation */
@@ -10239,12 +11041,12 @@ li.bx--accordion__item--disabled:last-of-type {
border: 0;
cursor: pointer;
appearance: none;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- color: #393939;
- background-color: #e0e0e0;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+ color: var(--cds-tag-color-gray, #c6c6c6);
+ background-color: var(--cds-tag-background-gray, #393939);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -10271,7 +11073,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tag.bx--tag--interactive:hover,
.bx--tag .bx--tag__close-icon:hover {
- background-color: #c6c6c6;
+ background-color: var(--cds-tag-hover-gray, #525252);
}
.bx--tag:not(:first-child) {
@@ -10279,120 +11081,120 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tag--red {
- color: #750e13;
- background-color: #ffd7d9;
+ color: var(--cds-tag-color-red, #ffb3b8);
+ background-color: var(--cds-tag-background-red, #750e13);
}
.bx--tag--red.bx--tag--interactive:hover,
.bx--tag--red .bx--tag__close-icon:hover {
- background-color: #ffb3b8;
+ background-color: var(--cds-tag-hover-red, #a2191f);
}
.bx--tag--magenta {
- color: #740937;
- background-color: #ffd6e8;
+ color: var(--cds-tag-color-magenta, #ffafd2);
+ background-color: var(--cds-tag-background-magenta, #740937);
}
.bx--tag--magenta.bx--tag--interactive:hover,
.bx--tag--magenta .bx--tag__close-icon:hover {
- background-color: #ffafd2;
+ background-color: var(--cds-tag-hover-magenta, #9f1853);
}
.bx--tag--purple {
- color: #491d8b;
- background-color: #e8daff;
+ color: var(--cds-tag-color-purple, #d4bbff);
+ background-color: var(--cds-tag-background-purple, #491d8b);
}
.bx--tag--purple.bx--tag--interactive:hover,
.bx--tag--purple .bx--tag__close-icon:hover {
- background-color: #d4bbff;
+ background-color: var(--cds-tag-hover-purple, #6929c4);
}
.bx--tag--blue {
- color: #002d9c;
- background-color: #d0e2ff;
+ color: var(--cds-tag-color-blue, #a6c8ff);
+ background-color: var(--cds-tag-background-blue, #002d9c);
}
.bx--tag--blue.bx--tag--interactive:hover,
.bx--tag--blue .bx--tag__close-icon:hover {
- background-color: #a6c8ff;
+ background-color: var(--cds-tag-hover-blue, #0043ce);
}
.bx--tag--cyan {
- color: #003a6d;
- background-color: #bae6ff;
+ color: var(--cds-tag-color-cyan, #82cfff);
+ background-color: var(--cds-tag-background-cyan, #003a6d);
}
.bx--tag--cyan.bx--tag--interactive:hover,
.bx--tag--cyan .bx--tag__close-icon:hover {
- background-color: #82cfff;
+ background-color: var(--cds-tag-hover-cyan, #00539a);
}
.bx--tag--teal {
- color: #004144;
- background-color: #9ef0f0;
+ color: var(--cds-tag-color-teal, #3ddbd9);
+ background-color: var(--cds-tag-background-teal, #004144);
}
.bx--tag--teal.bx--tag--interactive:hover,
.bx--tag--teal .bx--tag__close-icon:hover {
- background-color: #3ddbd9;
+ background-color: var(--cds-tag-hover-teal, #005d5d);
}
.bx--tag--green {
- color: #044317;
- background-color: #a7f0ba;
+ color: var(--cds-tag-color-green, #6fdc8c);
+ background-color: var(--cds-tag-background-green, #044317);
}
.bx--tag--green.bx--tag--interactive:hover,
.bx--tag--green .bx--tag__close-icon:hover {
- background-color: #6fdc8c;
+ background-color: var(--cds-tag-hover-green, #0e6027);
}
.bx--tag--gray {
- color: #393939;
- background-color: #e0e0e0;
+ color: var(--cds-tag-color-gray, #c6c6c6);
+ background-color: var(--cds-tag-background-gray, #393939);
}
.bx--tag--gray.bx--tag--interactive:hover,
.bx--tag--gray .bx--tag__close-icon:hover {
- background-color: #c6c6c6;
+ background-color: var(--cds-tag-hover-gray, #525252);
}
.bx--tag--cool-gray {
- color: #343a3f;
- background-color: #dde1e6;
+ color: var(--cds-tag-color-cool-gray, #c1c7cd);
+ background-color: var(--cds-tag-background-cool-gray, #343a3f);
}
.bx--tag--cool-gray.bx--tag--interactive:hover,
.bx--tag--cool-gray .bx--tag__close-icon:hover {
- background-color: #c1c7cd;
+ background-color: var(--cds-tag-hover-cool-gray, #4d5358);
}
.bx--tag--warm-gray {
- color: #3c3838;
- background-color: #e5e0df;
+ color: var(--cds-tag-color-warm-gray, #cac5c4);
+ background-color: var(--cds-tag-background-warm-gray, #3c3838);
}
.bx--tag--warm-gray.bx--tag--interactive:hover,
.bx--tag--warm-gray .bx--tag__close-icon:hover {
- background-color: #cac5c4;
+ background-color: var(--cds-tag-hover-warm-gray, #565151);
}
.bx--tag--high-contrast {
- color: var(--inverse-01, #161616);
- background-color: var(--inverse-02, #f4f4f4);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-inverse-02, #f4f4f4);
}
.bx--tag--high-contrast.bx--tag--interactive:hover,
.bx--tag--high-contrast .bx--tag__close-icon:hover {
- background-color: var(--inverse-hover-ui, #e5e5e5);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
}
.bx--tag--disabled,
.bx--tag--filter.bx--tag--disabled,
.bx--tag--interactive.bx--tag--disabled {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--tag--disabled.bx--tag--interactive:hover,
@@ -10401,7 +11203,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover,
.bx--tag--interactive.bx--tag--disabled.bx--tag--interactive:hover,
.bx--tag--interactive.bx--tag--disabled .bx--tag__close-icon:hover {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--tag--disabled:hover,
@@ -10419,7 +11221,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tag--interactive:focus {
outline: none;
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff);
}
.bx--tag--interactive:hover {
@@ -10466,7 +11268,7 @@ li.bx--accordion__item--disabled:last-of-type {
flex-shrink: 0;
width: 1rem;
height: 1rem;
- margin-right: 0.25rem;
+ margin-right: var(--cds-spacing-02, 0.25rem);
padding: 0;
color: currentColor;
background-color: transparent;
@@ -10485,7 +11287,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tag__close-icon:focus {
border-radius: 50%;
outline: none;
- box-shadow: inset 0 0 0 1px var(--focus, #ffffff);
+ box-shadow: inset 0 0 0 1px var(--cds-focus, #ffffff);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -10495,7 +11297,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tag--high-contrast .bx--tag__close-icon:focus {
- box-shadow: inset 0 0 0 1px var(--inverse-focus-ui, #0f62fe);
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-focus-ui, #0f62fe);
}
.bx--tag--filter.bx--tag--disabled .bx--tag__close-icon:hover {
@@ -10503,7 +11305,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tag--filter.bx--tag--disabled svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--tag--sm {
@@ -10524,12 +11326,12 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tag.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
- color: var(--text-01, #f4f4f4);
- background-color: var(--skeleton-01, #353535);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-skeleton-01, #353535);
width: 3.75rem;
overflow: hidden;
}
@@ -10544,7 +11346,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -10558,7 +11360,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tag.bx--skeleton.bx--tag--interactive:hover,
.bx--tag.bx--skeleton .bx--tag__close-icon:hover {
- background-color: var(--skeleton-01, #353535);
+ background-color: var(--cds-skeleton-01, #353535);
}
@media not all and (min-resolution: 0.001dpcm) {
@@ -10570,8 +11372,8 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tag--interactive--default {
- color: var(--text-01, #f4f4f4);
- background-color: var(--active-ui, #525252);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-active-ui, #525252);
}
.security--tag--interactive > .bx--tag__close-icon:hover {
@@ -10579,10 +11381,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--layout-module--action-bar {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
padding-bottom: 0.5rem;
align-items: center;
@@ -10598,12 +11400,12 @@ li.bx--accordion__item--disabled:last-of-type {
.security--layout-module--button-cluster__button {
display: flex;
- border-bottom: 0.0625rem solid var(--ui-03, #393939);
+ border-bottom: 0.0625rem solid var(--cds-ui-03, #393939);
flex-flow: column;
}
.security--layout-module--button-cluster__button:first-of-type {
- border-top: 0.0625rem solid var(--ui-03, #393939);
+ border-top: 0.0625rem solid var(--cds-ui-03, #393939);
}
.security--layout-module--button-cluster__button > .bx--btn {
@@ -10631,10 +11433,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--layout-module--description__content {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
margin-top: 0;
margin-bottom: 1.25125rem;
}
@@ -10658,7 +11460,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--layout-module--ica--hover:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.security--layout-module--title-bar {
@@ -10666,10 +11468,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--layout-module--title-bar__title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
margin-top: 1rem;
margin-bottom: 1rem;
}
@@ -10680,10 +11482,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--layout-module--title-bar--subsection > .security--layout-module--title-bar__title {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
}
.security--layout-module--title-bar--subsection > .security--layout-module--title-bar__items {
@@ -10717,7 +11519,7 @@ li.bx--accordion__item--disabled:last-of-type {
right: 2rem;
bottom: 0;
width: auto;
- border-bottom: 0.0625rem solid var(--ui-02, #393939);
+ border-bottom: 0.0625rem solid var(--cds-ui-02, #393939);
content: \\"\\";
}
@@ -10738,22 +11540,22 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--nav__heading {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
padding: 0.75rem 2rem;
margin-top: unset;
margin-bottom: unset;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
font-weight: 400;
}
.security--nav__list {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
flex-direction: column;
list-style: none;
@@ -10764,12 +11566,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--nav__list:focus {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
outline-width: 0;
}
.security--nav__list:focus > .security--nav__list__item__link {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -10786,7 +11588,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
top: 25%;
left: 1rem;
- fill: var(--text-01, #f4f4f4);
+ fill: var(--cds-text-01, #f4f4f4);
transform: translate3d(-50%, 0, 0) rotate(270deg);
}
@@ -10797,10 +11599,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--nav__list__item {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
}
@@ -10835,7 +11637,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--nav__list__item--disabled > .security--nav__list__item__link {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
}
.security--nav__list__item--active {
@@ -10848,7 +11650,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--nav__list__item--active::before {
- background-color: var(--interactive-01, #0f62fe);
+ background-color: var(--cds-interactive-01, #0f62fe);
transform: translate3d(0, 0, 0);
}
@@ -10859,18 +11661,18 @@ li.bx--accordion__item--disabled:last-of-type {
position: relative;
display: flex;
padding: 0.375rem 2rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
text-decoration: none;
cursor: pointer;
justify-content: space-between;
}
.security--nav__list__item__link:hover, .security--nav__list__item__link:focus {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.security--nav__list__item__link:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -10883,7 +11685,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--nav__list__item__link--external .security--nav__list__item__link--external__icon {
margin-left: 0.25rem;
align-self: center;
- fill: var(--text-01, #f4f4f4);
+ fill: var(--cds-text-01, #f4f4f4);
opacity: 0;
flex-shrink: 0;
}
@@ -12978,7 +13780,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--ne-section__title, .security--ne-section__sub-title, .security--ne-section__description {
- color: var(--ui-05, #f4f4f4);
+ color: var(--cds-ui-05, #f4f4f4);
font-weight: normal;
line-height: initial;
}
@@ -13029,7 +13831,7 @@ li.bx--accordion__item--disabled:last-of-type {
min-height: 3rem;
margin-top: 1rem;
margin-bottom: 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
}
.bx--inline-notification *,
@@ -13065,7 +13867,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification:not(.bx--inline-notification--low-contrast) a {
- color: var(--inverse-link, #0f62fe);
+ color: var(--cds-inverse-link, #0f62fe);
}
.bx--inline-notification a {
@@ -13077,11 +13879,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification a:focus {
- outline: 1px solid var(--inverse-link, #0f62fe);
+ outline: 1px solid var(--cds-inverse-link, #0f62fe);
}
.bx--inline-notification.bx--inline-notification--low-contrast a:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -13091,7 +13893,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification--low-contrast {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--inline-notification--low-contrast::before {
@@ -13109,113 +13911,113 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification--error {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-01, #da1e28);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-01, #da1e28);
}
.bx--inline-notification--error .bx--inline-notification__icon,
.bx--inline-notification--error .bx--toast-notification__icon {
- fill: var(--inverse-support-01, #da1e28);
+ fill: var(--cds-inverse-support-01, #da1e28);
}
.bx--inline-notification--low-contrast.bx--inline-notification--error {
- background: #fff1f1;
- border-left: 3px solid var(--support-01, #fa4d56);
+ background: var(--cds-notification-background-error, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-01, #fa4d56);
}
.bx--inline-notification--low-contrast.bx--inline-notification--error .bx--inline-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--error .bx--toast-notification__icon {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--inline-notification--low-contrast.bx--inline-notification--error::before {
- border-color: var(--support-01, #fa4d56);
+ border-color: var(--cds-support-01, #fa4d56);
}
.bx--inline-notification--success {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-02, #24a148);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-02, #24a148);
}
.bx--inline-notification--success .bx--inline-notification__icon,
.bx--inline-notification--success .bx--toast-notification__icon {
- fill: var(--inverse-support-02, #24a148);
+ fill: var(--cds-inverse-support-02, #24a148);
}
.bx--inline-notification--low-contrast.bx--inline-notification--success {
- background: #defbe6;
- border-left: 3px solid var(--support-02, #42be65);
+ background: var(--cds-notification-background-success, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-02, #42be65);
}
.bx--inline-notification--low-contrast.bx--inline-notification--success .bx--inline-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--success .bx--toast-notification__icon {
- fill: var(--support-02, #42be65);
+ fill: var(--cds-support-02, #42be65);
}
.bx--inline-notification--low-contrast.bx--inline-notification--success::before {
- border-color: var(--support-02, #42be65);
+ border-color: var(--cds-support-02, #42be65);
}
.bx--inline-notification--info,
.bx--inline-notification--info-square {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-04, #0f62fe);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-04, #0f62fe);
}
.bx--inline-notification--info .bx--inline-notification__icon,
.bx--inline-notification--info .bx--toast-notification__icon,
.bx--inline-notification--info-square .bx--inline-notification__icon,
.bx--inline-notification--info-square .bx--toast-notification__icon {
- fill: var(--inverse-support-04, #0f62fe);
+ fill: var(--cds-inverse-support-04, #0f62fe);
}
.bx--inline-notification--low-contrast.bx--inline-notification--info,
.bx--inline-notification--low-contrast.bx--inline-notification--info-square {
- background: #edf5ff;
- border-left: 3px solid var(--support-04, #4589ff);
+ background: var(--cds-notification-background-info, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-04, #4589ff);
}
.bx--inline-notification--low-contrast.bx--inline-notification--info .bx--inline-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--info .bx--toast-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--info-square .bx--inline-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--info-square .bx--toast-notification__icon {
- fill: var(--support-04, #4589ff);
+ fill: var(--cds-support-04, #4589ff);
}
.bx--inline-notification--low-contrast.bx--inline-notification--info::before,
.bx--inline-notification--low-contrast.bx--inline-notification--info-square::before {
- border-color: var(--support-04, #4589ff);
+ border-color: var(--cds-support-04, #4589ff);
}
.bx--inline-notification--warning,
.bx--inline-notification--warning-alt {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-03, #f1c21b);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-03, #f1c21b);
}
.bx--inline-notification--warning .bx--inline-notification__icon,
.bx--inline-notification--warning .bx--toast-notification__icon,
.bx--inline-notification--warning-alt .bx--inline-notification__icon,
.bx--inline-notification--warning-alt .bx--toast-notification__icon {
- fill: var(--inverse-support-03, #f1c21b);
+ fill: var(--cds-inverse-support-03, #f1c21b);
}
.bx--inline-notification--low-contrast.bx--inline-notification--warning,
.bx--inline-notification--low-contrast.bx--inline-notification--warning-alt {
- background: #fdf6dd;
- border-left: 3px solid var(--support-03, #f1c21b);
+ background: var(--cds-notification-background-warning, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-03, #f1c21b);
}
.bx--inline-notification--low-contrast.bx--inline-notification--warning .bx--inline-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--warning .bx--toast-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--warning-alt .bx--inline-notification__icon,
.bx--inline-notification--low-contrast.bx--inline-notification--warning-alt .bx--toast-notification__icon {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--inline-notification--low-contrast.bx--inline-notification--warning::before,
.bx--inline-notification--low-contrast.bx--inline-notification--warning-alt::before {
- border-color: var(--support-03, #f1c21b);
+ border-color: var(--cds-support-03, #f1c21b);
}
.bx--inline-notification--warning .bx--inline-notification__icon path[opacity=\\"0\\"] {
@@ -13248,18 +14050,18 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification__title {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
margin: 0 0.25rem 0 0;
}
.bx--inline-notification__subtitle {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
word-break: break-word;
}
@@ -13276,22 +14078,22 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification:not(.bx--inline-notification--low-contrast) .bx--inline-notification__action-button.bx--btn--ghost {
- color: var(--inverse-link, #0f62fe);
+ color: var(--cds-inverse-link, #0f62fe);
}
.bx--inline-notification__action-button.bx--btn--ghost:active,
.bx--inline-notification__action-button.bx--btn--ghost:hover {
- background-color: var(--inverse-hover-ui, #e5e5e5);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
}
.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:active,
.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:hover {
- background-color: #ffffff;
+ background-color: var(--cds-notification-action-hover, var(--cds-hover-ui, #353535));
}
.bx--inline-notification__action-button.bx--btn--ghost:focus {
border-color: transparent;
- outline: 2px solid var(--inverse-focus-ui, #0f62fe);
+ outline: 2px solid var(--cds-inverse-focus-ui, #0f62fe);
outline-offset: -2px;
box-shadow: none;
}
@@ -13304,7 +14106,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification--low-contrast .bx--inline-notification__action-button.bx--btn--ghost:focus {
- outline-color: var(--focus, #ffffff);
+ outline-color: var(--cds-focus, #ffffff);
}
.bx--inline-notification--hide-close-button .bx--inline-notification__action-button.bx--btn--ghost {
@@ -13333,7 +14135,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification__close-button:focus {
- outline: 2px solid var(--inverse-focus-ui, #0f62fe);
+ outline: 2px solid var(--cds-inverse-focus-ui, #0f62fe);
outline-offset: -2px;
}
@@ -13344,7 +14146,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification__close-button .bx--inline-notification__close-icon {
- fill: var(--inverse-01, #161616);
+ fill: var(--cds-inverse-01, #161616);
}
@media (min-width: 42rem) {
@@ -13354,7 +14156,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification--low-contrast .bx--inline-notification__close-button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -13365,7 +14167,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--inline-notification--low-contrast .bx--inline-notification__close-button .bx--inline-notification__close-icon {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--toast-notification {
@@ -13383,7 +14185,7 @@ li.bx--accordion__item--disabled:last-of-type {
margin-right: 1rem;
margin-bottom: 0.5rem;
padding-left: 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}
@@ -13411,7 +14213,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--toast-notification:not(.bx--toast-notification--low-contrast) a {
- color: var(--inverse-link, #0f62fe);
+ color: var(--cds-inverse-link, #0f62fe);
}
.bx--toast-notification a {
@@ -13423,11 +14225,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--toast-notification a:focus {
- outline: 1px solid var(--inverse-link, #0f62fe);
+ outline: 1px solid var(--cds-inverse-link, #0f62fe);
}
.bx--toast-notification.bx--toast-notification--low-contrast a:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -13437,99 +14239,99 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--toast-notification--low-contrast {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--toast-notification--error {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-01, #da1e28);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-01, #da1e28);
}
.bx--toast-notification--error .bx--inline-notification__icon,
.bx--toast-notification--error .bx--toast-notification__icon {
- fill: var(--inverse-support-01, #da1e28);
+ fill: var(--cds-inverse-support-01, #da1e28);
}
.bx--toast-notification--low-contrast.bx--toast-notification--error {
- background: #fff1f1;
- border-left: 3px solid var(--support-01, #fa4d56);
+ background: var(--cds-notification-background-error, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-01, #fa4d56);
}
.bx--toast-notification--low-contrast.bx--toast-notification--error .bx--inline-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--error .bx--toast-notification__icon {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--toast-notification--success {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-02, #24a148);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-02, #24a148);
}
.bx--toast-notification--success .bx--inline-notification__icon,
.bx--toast-notification--success .bx--toast-notification__icon {
- fill: var(--inverse-support-02, #24a148);
+ fill: var(--cds-inverse-support-02, #24a148);
}
.bx--toast-notification--low-contrast.bx--toast-notification--success {
- background: #defbe6;
- border-left: 3px solid var(--support-02, #42be65);
+ background: var(--cds-notification-background-success, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-02, #42be65);
}
.bx--toast-notification--low-contrast.bx--toast-notification--success .bx--inline-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--success .bx--toast-notification__icon {
- fill: var(--support-02, #42be65);
+ fill: var(--cds-support-02, #42be65);
}
.bx--toast-notification--info,
.bx--toast-notification--info-square {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-04, #0f62fe);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-04, #0f62fe);
}
.bx--toast-notification--info .bx--inline-notification__icon,
.bx--toast-notification--info .bx--toast-notification__icon,
.bx--toast-notification--info-square .bx--inline-notification__icon,
.bx--toast-notification--info-square .bx--toast-notification__icon {
- fill: var(--inverse-support-04, #0f62fe);
+ fill: var(--cds-inverse-support-04, #0f62fe);
}
.bx--toast-notification--low-contrast.bx--toast-notification--info,
.bx--toast-notification--low-contrast.bx--toast-notification--info-square {
- background: #edf5ff;
- border-left: 3px solid var(--support-04, #4589ff);
+ background: var(--cds-notification-background-info, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-04, #4589ff);
}
.bx--toast-notification--low-contrast.bx--toast-notification--info .bx--inline-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--info .bx--toast-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--info-square .bx--inline-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--info-square .bx--toast-notification__icon {
- fill: var(--support-04, #4589ff);
+ fill: var(--cds-support-04, #4589ff);
}
.bx--toast-notification--warning,
.bx--toast-notification--warning-alt {
- background: var(--inverse-02, #f4f4f4);
- border-left: 3px solid var(--inverse-support-03, #f1c21b);
+ background: var(--cds-inverse-02, #f4f4f4);
+ border-left: 3px solid var(--cds-inverse-support-03, #f1c21b);
}
.bx--toast-notification--warning .bx--inline-notification__icon,
.bx--toast-notification--warning .bx--toast-notification__icon,
.bx--toast-notification--warning-alt .bx--inline-notification__icon,
.bx--toast-notification--warning-alt .bx--toast-notification__icon {
- fill: var(--inverse-support-03, #f1c21b);
+ fill: var(--cds-inverse-support-03, #f1c21b);
}
.bx--toast-notification--low-contrast.bx--toast-notification--warning,
.bx--toast-notification--low-contrast.bx--toast-notification--warning-alt {
- background: #fdf6dd;
- border-left: 3px solid var(--support-03, #f1c21b);
+ background: var(--cds-notification-background-warning, var(--cds-ui-01, #262626));
+ border-left: 3px solid var(--cds-support-03, #f1c21b);
}
.bx--toast-notification--low-contrast.bx--toast-notification--warning .bx--inline-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--warning .bx--toast-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--warning-alt .bx--inline-notification__icon,
.bx--toast-notification--low-contrast.bx--toast-notification--warning-alt .bx--toast-notification__icon {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--toast-notification--warning .bx--toast-notification__icon path[opacity=\\"0\\"] {
@@ -13567,7 +14369,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--toast-notification__close-button:focus {
- outline: 2px solid var(--inverse-focus-ui, #0f62fe);
+ outline: 2px solid var(--cds-inverse-focus-ui, #0f62fe);
outline-offset: -2px;
}
@@ -13578,11 +14380,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--toast-notification__close-button .bx--toast-notification__close-icon {
- fill: var(--inverse-01, #161616);
+ fill: var(--cds-inverse-01, #161616);
}
.bx--toast-notification--low-contrast .bx--toast-notification__close-button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -13593,46 +14395,46 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--toast-notification--low-contrast .bx--toast-notification__close-button .bx--toast-notification__close-icon {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--toast-notification__title {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
margin-top: 1rem;
font-weight: 600;
word-break: break-word;
}
.bx--toast-notification__subtitle {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-top: 0;
margin-bottom: 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
word-break: break-word;
}
.bx--toast-notification--low-contrast .bx--toast-notification__subtitle {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--toast-notification__caption {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-bottom: 1rem;
padding-top: 0.5rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
}
.bx--toast-notification--low-contrast .bx--toast-notification__caption {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--panel {
@@ -13642,86 +14444,314 @@ li.bx--accordion__item--disabled:last-of-type {
right: 0;
height: 100%;
width: 20rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--ui-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-ui-01, #262626);
flex-direction: column;
justify-content: space-between;
z-index: 9000;
}
.security--theme--cg10 .security--panel {
- --interactive-01: #0f62fe;
- --interactive-02: #697077;
- --interactive-03: #ffffff;
- --interactive-04: #4589ff;
- --ui-background: #121619;
- --ui-01: #21272a;
- --ui-02: #343a3f;
- --ui-03: #343a3f;
- --ui-04: #697077;
- --ui-05: #f2f4f8;
- --text-01: #f2f4f8;
- --text-02: #c1c7cd;
- --text-03: #697077;
- --text-04: #ffffff;
- --text-05: #878d96;
- --text-error: #ff8389;
- --icon-01: #f2f4f8;
- --icon-02: #c1c7cd;
- --icon-03: #ffffff;
- --link-01: #78a9ff;
- --link-02: #a6c8ff;
- --inverse-link: #0f62fe;
- --field-01: #21272a;
- --field-02: #343a3f;
- --inverse-01: #121619;
- --inverse-02: #f2f4f8;
- --support-01: #fa4d56;
- --support-02: #42be65;
- --support-03: #f1c21b;
- --support-04: #4589ff;
- --inverse-support-01: #da1e28;
- --inverse-support-02: #24a148;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #0f62fe;
- --overlay-01: rgba(22, 22, 22, 0.7);
- --danger-01: #da1e28;
- --danger-02: #fa4d56;
- --focus: #ffffff;
- --inverse-focus-ui: #0f62fe;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #a6c8ff;
- --hover-secondary: #5a6066;
- --active-secondary: #343a3f;
- --hover-tertiary: #f2f4f8;
- --active-tertiary: #c1c7cd;
- --hover-ui: #2f353a;
- --hover-light-ui: #4c4c4c;
- --active-ui: #4d5358;
- --active-light-ui: #697077;
- --selected-ui: #343a3f;
- --selected-light-ui: #4d5358;
- --inverse-hover-ui: #e0e4ea;
- --hover-selected-ui: #464c51;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #2f353a;
- --visited-link: #be95ff;
- --disabled-01: #21272a;
- --disabled-02: #4d5358;
- --disabled-03: #878d96;
- --highlight: #002d9c;
- --decorative-01: #4d5358;
- --button-separator: #121619;
- --skeleton-01: #2f353a;
- --skeleton-02: #4d5358;
- --brand-01: #0f62fe;
- --brand-02: #697077;
- --brand-03: #ffffff;
- --active-01: #4d5358;
- --hover-field: #2f353a;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #697077;
+ --cds-interactive-03: #ffffff;
+ --cds-interactive-04: #4589ff;
+ --cds-ui-background: #121619;
+ --cds-ui-01: #21272a;
+ --cds-ui-02: #343a3f;
+ --cds-ui-03: #343a3f;
+ --cds-ui-04: #697077;
+ --cds-ui-05: #f2f4f8;
+ --cds-text-01: #f2f4f8;
+ --cds-text-02: #c1c7cd;
+ --cds-text-03: #697077;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #878d96;
+ --cds-text-error: #ff8389;
+ --cds-icon-01: #f2f4f8;
+ --cds-icon-02: #c1c7cd;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #78a9ff;
+ --cds-link-02: #a6c8ff;
+ --cds-inverse-link: #0f62fe;
+ --cds-field-01: #21272a;
+ --cds-field-02: #343a3f;
+ --cds-inverse-01: #121619;
+ --cds-inverse-02: #f2f4f8;
+ --cds-support-01: #fa4d56;
+ --cds-support-02: #42be65;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #4589ff;
+ --cds-inverse-support-01: #da1e28;
+ --cds-inverse-support-02: #24a148;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #0f62fe;
+ --cds-overlay-01: rgba(22, 22, 22, 0.7);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #fa4d56;
+ --cds-focus: #ffffff;
+ --cds-inverse-focus-ui: #0f62fe;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #a6c8ff;
+ --cds-hover-secondary: #5a6066;
+ --cds-active-secondary: #343a3f;
+ --cds-hover-tertiary: #f2f4f8;
+ --cds-active-tertiary: #c1c7cd;
+ --cds-hover-ui: #2f353a;
+ --cds-hover-light-ui: #4c4c4c;
+ --cds-hover-selected-ui: #464c51;
+ --cds-active-ui: #4d5358;
+ --cds-active-light-ui: #697077;
+ --cds-selected-ui: #343a3f;
+ --cds-selected-light-ui: #4d5358;
+ --cds-inverse-hover-ui: #e0e4ea;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #2f353a;
+ --cds-visited-link: #be95ff;
+ --cds-disabled-01: #21272a;
+ --cds-disabled-02: #4d5358;
+ --cds-disabled-03: #878d96;
+ --cds-highlight: #002d9c;
+ --cds-decorative-01: #4d5358;
+ --cds-button-separator: #121619;
+ --cds-skeleton-01: #2f353a;
+ --cds-skeleton-02: #4d5358;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #697077;
+ --cds-brand-03: #ffffff;
+ --cds-active-01: #4d5358;
+ --cds-hover-field: #2f353a;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #697077);
+ --interactive-03: var(--cds-interactive-03, #ffffff);
+ --interactive-04: var(--cds-interactive-04, #4589ff);
+ --ui-background: var(--cds-ui-background, #121619);
+ --ui-01: var(--cds-ui-01, #21272a);
+ --ui-02: var(--cds-ui-02, #343a3f);
+ --ui-03: var(--cds-ui-03, #343a3f);
+ --ui-04: var(--cds-ui-04, #697077);
+ --ui-05: var(--cds-ui-05, #f2f4f8);
+ --text-01: var(--cds-text-01, #f2f4f8);
+ --text-02: var(--cds-text-02, #c1c7cd);
+ --text-03: var(--cds-text-03, #697077);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #878d96);
+ --text-error: var(--cds-text-error, #ff8389);
+ --icon-01: var(--cds-icon-01, #f2f4f8);
+ --icon-02: var(--cds-icon-02, #c1c7cd);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #78a9ff);
+ --link-02: var(--cds-link-02, #a6c8ff);
+ --inverse-link: var(--cds-inverse-link, #0f62fe);
+ --field-01: var(--cds-field-01, #21272a);
+ --field-02: var(--cds-field-02, #343a3f);
+ --inverse-01: var(--cds-inverse-01, #121619);
+ --inverse-02: var(--cds-inverse-02, #f2f4f8);
+ --support-01: var(--cds-support-01, #fa4d56);
+ --support-02: var(--cds-support-02, #42be65);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #4589ff);
+ --inverse-support-01: var(--cds-inverse-support-01, #da1e28);
+ --inverse-support-02: var(--cds-inverse-support-02, #24a148);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #0f62fe);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #fa4d56);
+ --focus: var(--cds-focus, #ffffff);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #0f62fe);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #a6c8ff);
+ --hover-secondary: var(--cds-hover-secondary, #5a6066);
+ --active-secondary: var(--cds-active-secondary, #343a3f);
+ --hover-tertiary: var(--cds-hover-tertiary, #f2f4f8);
+ --active-tertiary: var(--cds-active-tertiary, #c1c7cd);
+ --hover-ui: var(--cds-hover-ui, #2f353a);
+ --hover-light-ui: var(--cds-hover-light-ui, #4c4c4c);
+ --active-ui: var(--cds-active-ui, #4d5358);
+ --active-light-ui: var(--cds-active-light-ui, #697077);
+ --selected-ui: var(--cds-selected-ui, #343a3f);
+ --selected-light-ui: var(--cds-selected-light-ui, #4d5358);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #e0e4ea);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #464c51);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #2f353a);
+ --visited-link: var(--cds-visited-link, #be95ff);
+ --disabled-01: var(--cds-disabled-01, #21272a);
+ --disabled-02: var(--cds-disabled-02, #4d5358);
+ --disabled-03: var(--cds-disabled-03, #878d96);
+ --highlight: var(--cds-highlight, #002d9c);
+ --decorative-01: var(--cds-decorative-01, #4d5358);
+ --button-separator: var(--cds-button-separator, #121619);
+ --skeleton-01: var(--cds-skeleton-01, #2f353a);
+ --skeleton-02: var(--cds-skeleton-02, #4d5358);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #697077);
+ --brand-03: var(--cds-brand-03, #ffffff);
+ --active-01: var(--cds-active-01, #4d5358);
+ --hover-field: var(--cds-hover-field, #2f353a);
+ --danger: var(--cds-danger, #da1e28);
}
.security--panel[dir=\\"rtl\\"],
@@ -13759,7 +14789,7 @@ li.bx--accordion__item--disabled:last-of-type {
margin-left: 1rem;
box-sizing: border-box;
justify-content: space-between;
- border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f);
+ border-bottom: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
}
.security--panel__header__container--title {
@@ -13767,24 +14797,24 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--panel__header--title, .security--panel__header--subtitle {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
word-break: break-word;
}
.security--panel__header--title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
display: block;
margin-bottom: 0.75rem;
}
.security--panel__header--subtitle {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.security--panel__body {
@@ -13794,12 +14824,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--panel__body--content {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
padding: 1rem;
- border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f);
+ border-bottom: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
}
.security--panel__body--content:last-child {
@@ -13834,16 +14864,16 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--profile-image {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: inline-flex;
width: 1.75rem;
height: 1.75rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
align-items: center;
- background-color: var(--icon-02, #c6c6c6);
+ background-color: var(--cds-icon-02, #c6c6c6);
border-radius: 50%;
justify-content: center;
object-fit: cover;
@@ -13851,10 +14881,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--profile-image--large {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
width: 3.5rem;
height: 3.5rem;
}
@@ -13916,18 +14946,18 @@ li.bx--accordion__item--disabled:last-of-type {
height: 1rem;
margin: 0.625rem 0.5rem 0 0;
border-radius: 50%;
- fill: var(--interactive-04, #4589ff);
+ fill: var(--cds-interactive-04, #4589ff);
}
.bx--progress-label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
max-width: 5.5rem;
margin: 0.5rem 0 0 0;
overflow: hidden;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
line-height: 1.45;
white-space: nowrap;
text-overflow: ellipsis;
@@ -13940,15 +14970,15 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--progress-label:hover {
- color: var(--link-01, #78a9ff);
- box-shadow: 0 0.0625rem var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
+ box-shadow: 0 0.0625rem var(--cds-link-01, #78a9ff);
cursor: pointer;
}
.bx--progress-label:focus {
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
outline: none;
- box-shadow: 0 0.1875rem 0 0 var(--link-01, #78a9ff);
+ box-shadow: 0 0.1875rem 0 0 var(--cds-link-01, #78a9ff);
}
.bx--progress--space-equal .bx--progress-label {
@@ -13957,8 +14987,8 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--progress-label:active {
- color: var(--interactive-01, #0f62fe);
- box-shadow: 0 0.1875rem 0 0 var(--interactive-01, #0f62fe);
+ color: var(--cds-interactive-01, #0f62fe);
+ box-shadow: 0 0.1875rem 0 0 var(--cds-interactive-01, #0f62fe);
}
.bx--progress-label-overflow:hover ~ .bx--tooltip,
@@ -13977,10 +15007,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--progress-step .bx--tooltip {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
display: block;
width: 7.8125rem;
min-width: 7.1875rem;
@@ -13988,47 +15018,47 @@ li.bx--accordion__item--disabled:last-of-type {
margin-top: 2.5rem;
margin-left: 1.375rem;
padding: 0.5rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
visibility: hidden;
}
.bx--progress-step .bx--tooltip_multi {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
width: 9.375rem;
height: auto;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
}
.bx--progress-optional {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
position: absolute;
left: 0;
margin-top: 1.75rem;
margin-left: 1.5rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
text-align: start;
}
.bx--progress-step--current .bx--progress-line {
- background-color: var(--interactive-04, #4589ff);
+ background-color: var(--cds-interactive-04, #4589ff);
}
.bx--progress-step--incomplete svg {
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.bx--progress-step--incomplete .bx--progress-line {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--progress-step--complete .bx--progress-line {
- background-color: var(--interactive-04, #4589ff);
+ background-color: var(--cds-interactive-04, #4589ff);
}
.bx--progress-step-button {
@@ -14066,14 +15096,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--progress-step-button--unclickable .bx--progress-label:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
box-shadow: none;
cursor: default;
}
.bx--progress-step-button--unclickable .bx--tooltip__label:hover {
- color: var(--link-01, #78a9ff);
- box-shadow: 0 0.0625rem var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
+ box-shadow: 0 0.0625rem var(--cds-link-01, #78a9ff);
cursor: pointer;
}
@@ -14084,12 +15114,12 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--progress-step--disabled svg {
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--progress-step--disabled .bx--progress-label,
.bx--progress-step--disabled .bx--progress-label:hover {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
box-shadow: none;
cursor: not-allowed;
}
@@ -14109,13 +15139,13 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--progress__warning > * {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--progress.bx--skeleton .bx--progress-label {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -14134,7 +15164,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -14229,7 +15259,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--multi-select .bx--list-box__menu-item .bx--checkbox:checked ~ .bx--checkbox-label-text {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--multi-select--filterable {
@@ -14243,7 +15273,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--multi-select--filterable--input-focused {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -14258,11 +15288,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--multi-select--filterable.bx--list-box--disabled:hover .bx--text-input {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--multi-select--filterable .bx--list-box__selection--multi {
- margin: 0 0 0 1rem;
+ margin: 0 0 0 var(--cds-spacing-05, 1rem);
}
.bx--multi-select--filterable.bx--multi-select--inline,
@@ -14317,7 +15347,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--stacked-notification {
border-width: 0;
- box-shadow: 0.25rem 0.25rem var(--ui-04, #6f6f6f), 0.5rem 0.5rem 0 var(--ui-03, #393939);
+ box-shadow: 0.25rem 0.25rem var(--cds-ui-04, #6f6f6f), 0.5rem 0.5rem 0 var(--cds-ui-03, #393939);
}
@keyframes rotate {
@@ -14376,8 +15406,8 @@ li.bx--accordion__item--disabled:last-of-type {
.security--status-icon__icon--success {
padding: 0.5rem;
- fill: var(--icon-01, #f4f4f4);
- border: 0.125rem solid var(--support-02, #42be65);
+ fill: var(--cds-icon-01, #f4f4f4);
+ border: 0.125rem solid var(--cds-support-02, #42be65);
border-radius: 100%;
box-sizing: border-box;
transform: scale3d(0.55, 0.55, 0.55);
@@ -14386,24 +15416,24 @@ li.bx--accordion__item--disabled:last-of-type {
.security--status-icon__icon--color {
width: 0.5rem;
height: 0.5rem;
- background-color: var(--icon-02, #c6c6c6);
+ background-color: var(--cds-icon-02, #c6c6c6);
border-radius: 50%;
}
.security--status-icon__icon--color--error {
- background-color: var(--support-01, #fa4d56);
+ background-color: var(--cds-support-01, #fa4d56);
}
.security--status-icon__icon--color--info {
- background-color: var(--support-04, #4589ff);
+ background-color: var(--cds-support-04, #4589ff);
}
.security--status-icon__icon--color--success {
- background-color: var(--support-02, #42be65);
+ background-color: var(--cds-support-02, #42be65);
}
.security--status-icon__icon--color--warning {
- background-color: var(--support-03, #f1c21b);
+ background-color: var(--cds-support-03, #f1c21b);
}
.security--status-icon--lg > .security--status-icon__icon {
@@ -14431,10 +15461,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--status-indicator__title {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-heading-02-font-size, 1rem);
+ font-weight: var(--cds-heading-02-font-weight, 600);
+ line-height: var(--cds-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-heading-02-letter-spacing, 0);
margin-top: 0;
margin-bottom: 0.25rem;
}
@@ -14452,7 +15482,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--status-indicator__step__icon-wrapper > .bx--inline-loading__text, .security--status-indicator__step-wrapper > .bx--inline-loading__text {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--status-indicator__step__icon-wrapper {
@@ -14467,36 +15497,36 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--status-indicator__step__label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-top: 0;
margin-bottom: 0;
}
.security--status-indicator__step--failed__icon {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.security--status-indicator__step--incomplete__icon {
- fill: var(--disabled-03, #8d8d8d);
+ fill: var(--cds-disabled-03, #8d8d8d);
}
.security--status-indicator__step--incomplete__label {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
}
.security--status-indicator__step__error-message {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
display: inline-block;
margin-top: 0;
margin-bottom: 0.25rem;
margin-left: 2rem;
- color: var(--support-01, #fa4d56);
+ color: var(--cds-support-01, #fa4d56);
}
.security--status-indicator__button--retry {
@@ -14504,17 +15534,17 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
display: inline-flex;
align-items: center;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--tooltip__label:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -14524,7 +15554,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger svg {
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -14564,8 +15594,8 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger:not(.bx--btn--icon-only):focus {
- outline: 1px solid var(--focus, #ffffff);
- fill: var(--hover-primary, #0353e9);
+ outline: 1px solid var(--cds-focus, #ffffff);
+ fill: var(--cds-hover-primary, #0353e9);
}
@media screen and (prefers-contrast) {
@@ -14598,9 +15628,9 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 18rem;
margin-top: 0.25rem;
padding: 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
word-wrap: break-word;
- background: var(--inverse-02, #f4f4f4);
+ background: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
}
@@ -14618,7 +15648,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip:focus {
outline: 0;
- box-shadow: inset 0 0 0 1px var(--inverse-02, #f4f4f4), inset 0 0 0 2px var(--ui-background, #161616);
+ box-shadow: inset 0 0 0 1px var(--cds-inverse-02, #f4f4f4), inset 0 0 0 2px var(--cds-ui-background, #161616);
}
.bx--tooltip.bx--tooltip--top.bx--tooltip--align-start, .bx--tooltip.bx--tooltip--bottom.bx--tooltip--align-start {
@@ -14672,10 +15702,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip p {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.bx--tooltip button {
@@ -14683,26 +15713,26 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip .bx--btn:focus {
- border-color: var(--inverse-focus-ui, #0f62fe);
- outline-color: var(--inverse-02, #f4f4f4);
+ border-color: var(--cds-inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-02, #f4f4f4);
}
.bx--tooltip .bx--link {
- color: var(--inverse-link, #0f62fe);
+ color: var(--cds-inverse-link, #0f62fe);
font-size: 0.875rem;
}
.bx--tooltip .bx--link:focus {
- outline: 1px solid var(--inverse-focus-ui, #0f62fe);
+ outline: 1px solid var(--cds-inverse-focus-ui, #0f62fe);
outline-offset: 2px;
}
.bx--tooltip .bx--link:active, .bx--tooltip .bx--link:active:visited, .bx--tooltip .bx--link:active:visited:hover {
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
}
.bx--tooltip .bx--link:visited {
- color: var(--inverse-link, #0f62fe);
+ color: var(--cds-inverse-link, #0f62fe);
}
.bx--tooltip .bx--tooltip__content[tabindex=\\"-1\\"]:focus {
@@ -14718,7 +15748,7 @@ li.bx--accordion__item--disabled:last-of-type {
height: 0;
margin: 0 auto;
border-right: 0.42969rem solid transparent;
- border-bottom: 0.42969rem solid var(--inverse-02, #f4f4f4);
+ border-bottom: 0.42969rem solid var(--cds-inverse-02, #f4f4f4);
border-left: 0.42969rem solid transparent;
content: \\"\\";
}
@@ -14751,11 +15781,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__heading {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
- margin-bottom: 0.5rem;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
}
.bx--tooltip--shown {
@@ -14781,14 +15811,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip--definition .bx--tooltip__trigger {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
position: relative;
display: inline-flex;
- color: var(--text-01, #f4f4f4);
- border-bottom: 1px dotted var(--interactive-01, #0f62fe);
+ color: var(--cds-text-01, #f4f4f4);
+ border-bottom: 1px dotted var(--cds-interactive-01, #0f62fe);
}
.bx--tooltip--definition .bx--tooltip__trigger:hover {
@@ -14801,7 +15831,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip--definition .bx--tooltip__trigger:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -14824,7 +15854,7 @@ li.bx--accordion__item--disabled:last-of-type {
width: 13rem;
margin-top: 0.75rem;
padding: 0.5rem 1rem;
- background: var(--inverse-02, #f4f4f4);
+ background: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
cursor: pointer;
pointer-events: none;
@@ -14832,11 +15862,11 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip--definition__bottom p,
.bx--tooltip--definition__top p {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--inverse-01, #161616);
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+ color: var(--cds-inverse-01, #161616);
}
.bx--tooltip--definition__bottom .bx--tooltip__caret,
@@ -14847,7 +15877,7 @@ li.bx--accordion__item--disabled:last-of-type {
width: 0.6rem;
height: 0.6rem;
margin-left: 1rem;
- background: var(--inverse-02, #f4f4f4);
+ background: var(--cds-inverse-02, #f4f4f4);
}
.bx--tooltip--definition__bottom .bx--tooltip__caret {
@@ -14901,17 +15931,17 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip__trigger--definition {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- border-bottom: 0.0625rem dotted var(--text-02, #c6c6c6);
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+ border-bottom: 0.0625rem dotted var(--cds-text-02, #c6c6c6);
transition: border-color 110ms;
}
.bx--tooltip__trigger.bx--tooltip__trigger--definition:hover,
.bx--tooltip__trigger.bx--tooltip__trigger--definition:focus {
- border-bottom-color: var(--interactive-04, #4589ff);
+ border-bottom-color: var(--cds-interactive-04, #4589ff);
}
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top {
@@ -14923,7 +15953,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -14985,16 +16015,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.5rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -15097,7 +16127,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top::before {
top: -0.25rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -15129,7 +16159,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-start::before {
top: -0.25rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -15161,7 +16191,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-center::before {
top: -0.25rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -15193,7 +16223,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--top.bx--tooltip--align-end::before {
top: -0.25rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -15216,7 +16246,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -15278,16 +16308,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.5rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -15390,7 +16420,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom::before {
bottom: -0.25rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -15427,7 +16457,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-start::before {
bottom: -0.25rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -15464,7 +16494,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-center::before {
bottom: -0.25rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -15500,7 +16530,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip__trigger--definition.bx--tooltip--bottom.bx--tooltip--align-end::before {
bottom: -0.25rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -15553,10 +16583,10 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip--icon__top::before, .bx--tooltip--icon__top::after,
.bx--tooltip--icon__bottom::before,
.bx--tooltip--icon__bottom::after {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: absolute;
display: flex;
align-items: center;
@@ -15574,7 +16604,7 @@ li.bx--accordion__item--disabled:last-of-type {
margin: 0 auto;
margin-top: 1px;
margin-left: 50%;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-style: solid;
border-width: 0 0.25rem 0.3125rem 0.25rem;
content: \\"\\";
@@ -15588,10 +16618,10 @@ li.bx--accordion__item--disabled:last-of-type {
height: 1.5rem;
margin-left: 50%;
padding: 0 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
white-space: nowrap;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
content: attr(aria-label);
@@ -15609,7 +16639,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip--icon__top:hover svg, .bx--tooltip--icon__top:focus svg,
.bx--tooltip--icon__bottom:hover svg,
.bx--tooltip--icon__bottom:focus svg {
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
.bx--tooltip--icon__top:focus,
@@ -15619,7 +16649,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip--icon__top:focus svg,
.bx--tooltip--icon__bottom:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -15709,7 +16739,7 @@ li.bx--accordion__item--disabled:last-of-type {
/* end legacy tooltip icon */
.bx--tooltip__trigger:hover svg, .bx--tooltip__trigger:focus svg {
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -15727,7 +16757,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--top:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -15741,7 +16771,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--top:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -15803,16 +16833,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -15915,7 +16945,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--top::before {
top: -0.5rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -15947,7 +16977,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-start::before {
top: -0.5rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -15979,7 +17009,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-center::before {
top: -0.5rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -16011,7 +17041,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--top.bx--tooltip--align-end::before {
top: -0.5rem;
- border-color: var(--inverse-02, #f4f4f4) transparent transparent transparent;
+ border-color: var(--cds-inverse-02, #f4f4f4) transparent transparent transparent;
border-width: 0.3125rem 0.25rem 0 0.25rem;
transform: translate(-50%, -100%);
}
@@ -16034,7 +17064,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--right:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -16048,7 +17078,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--right:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -16110,16 +17140,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -16222,7 +17252,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--right::before {
right: -0.5rem;
- border-color: transparent var(--inverse-02, #f4f4f4) transparent transparent;
+ border-color: transparent var(--cds-inverse-02, #f4f4f4) transparent transparent;
border-width: 0.25rem 0.3125rem 0.25rem 0;
transform: translate(100%, -50%);
}
@@ -16253,7 +17283,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-start::before {
right: -0.5rem;
- border-color: transparent var(--inverse-02, #f4f4f4) transparent transparent;
+ border-color: transparent var(--cds-inverse-02, #f4f4f4) transparent transparent;
border-width: 0.25rem 0.3125rem 0.25rem 0;
transform: translate(100%, -50%);
}
@@ -16284,7 +17314,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-center::before {
right: -0.5rem;
- border-color: transparent var(--inverse-02, #f4f4f4) transparent transparent;
+ border-color: transparent var(--cds-inverse-02, #f4f4f4) transparent transparent;
border-width: 0.25rem 0.3125rem 0.25rem 0;
transform: translate(100%, -50%);
}
@@ -16315,7 +17345,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--right.bx--tooltip--align-end::before {
right: -0.5rem;
- border-color: transparent var(--inverse-02, #f4f4f4) transparent transparent;
+ border-color: transparent var(--cds-inverse-02, #f4f4f4) transparent transparent;
border-width: 0.25rem 0.3125rem 0.25rem 0;
transform: translate(100%, -50%);
}
@@ -16336,7 +17366,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--bottom:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -16350,7 +17380,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--bottom:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -16412,16 +17442,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -16524,7 +17554,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--bottom::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -16555,7 +17585,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-start::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -16587,7 +17617,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-center::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -16618,7 +17648,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--bottom.bx--tooltip--align-end::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -16641,7 +17671,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--left:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -16655,7 +17685,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--tooltip__trigger.bx--tooltip--left:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -16717,16 +17747,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -16829,7 +17859,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--left::before {
left: -0.5rem;
- border-color: transparent transparent transparent var(--inverse-02, #f4f4f4);
+ border-color: transparent transparent transparent var(--cds-inverse-02, #f4f4f4);
border-width: 0.25rem 0 0.25rem 0.3125rem;
transform: translate(-100%, -50%);
}
@@ -16860,7 +17890,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-start::before {
left: -0.5rem;
- border-color: transparent transparent transparent var(--inverse-02, #f4f4f4);
+ border-color: transparent transparent transparent var(--cds-inverse-02, #f4f4f4);
border-width: 0.25rem 0 0.25rem 0.3125rem;
transform: translate(-100%, -50%);
}
@@ -16891,7 +17921,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-center::before {
left: -0.5rem;
- border-color: transparent transparent transparent var(--inverse-02, #f4f4f4);
+ border-color: transparent transparent transparent var(--cds-inverse-02, #f4f4f4);
border-width: 0.25rem 0 0.25rem 0.3125rem;
transform: translate(-100%, -50%);
}
@@ -16922,7 +17952,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--tooltip__trigger.bx--tooltip--left.bx--tooltip--align-end::before {
left: -0.5rem;
- border-color: transparent transparent transparent var(--inverse-02, #f4f4f4);
+ border-color: transparent transparent transparent var(--cds-inverse-02, #f4f4f4);
border-width: 0.25rem 0 0.25rem 0.3125rem;
transform: translate(-100%, -50%);
}
@@ -16988,20 +18018,20 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--select-input {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
display: block;
width: 100%;
height: 2.5rem;
- padding: 0 3rem 0 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ padding: 0 var(--cds-spacing-09, 3rem) 0 var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
border-radius: 0;
cursor: pointer;
opacity: 1;
@@ -17010,7 +18040,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--select-input:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--select-input::-ms-expand {
@@ -17026,9 +18056,9 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--select-input:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
@media screen and (prefers-contrast) {
@@ -17038,9 +18068,9 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--select-input:disabled, .bx--select-input:hover:disabled {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
- border-bottom-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
+ border-bottom-color: var(--cds-disabled-01, #262626);
cursor: not-allowed;
}
@@ -17056,7 +18086,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--select--disabled .bx--label,
.bx--select--disabled .bx--form__helper-text {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--select-input__wrapper[data-invalid] .bx--select-input,
@@ -17065,30 +18095,30 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--select-input:disabled ~ .bx--select__arrow {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--select--light .bx--select-input {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--select--light .bx--select-input:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--select--light .bx--select-input:disabled, .bx--select--light .bx--select-input:hover:disabled {
- color: var(--disabled-02, #525252);
- background-color: var(--field-02, #393939);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-field-02, #393939);
cursor: not-allowed;
}
.bx--select__arrow {
position: absolute;
top: 0;
- right: 1rem;
+ right: var(--cds-spacing-05, 1rem);
height: 100%;
pointer-events: none;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -17099,15 +18129,15 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--select__invalid-icon {
position: absolute;
- right: 2.5rem;
+ right: var(--cds-spacing-08, 2.5rem);
}
.bx--select-input__wrapper[data-invalid] .bx--select-input ~ .bx--select__invalid-icon {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--select__invalid-icon--warning {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--select__invalid-icon--warning path[fill] {
@@ -17117,16 +18147,16 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--select-optgroup,
.bx--select-option {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
@-moz-document url-prefix() {
.bx--select-option {
- color: var(--text-01, #f4f4f4);
- background-color: var(--ui-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--select-optgroup {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
}
@@ -17144,7 +18174,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--select--inline .bx--form__helper-text {
margin-bottom: 0;
- margin-left: 0.5rem;
+ margin-left: var(--cds-spacing-03, 0.5rem);
}
.bx--select--inline .bx--label {
@@ -17154,16 +18184,16 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--select--inline .bx--select-input {
width: auto;
- padding-right: 2rem;
+ padding-right: var(--cds-spacing-07, 2rem);
padding-left: 0.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
background-color: transparent;
border-bottom: none;
}
.bx--select--inline .bx--select-input[disabled],
.bx--select--inline .bx--select-input[disabled]:hover {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--select--inline .bx--select__arrow {
@@ -17175,11 +18205,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--select--inline.bx--select--invalid .bx--select-input ~ .bx--select__invalid-icon {
- right: 2rem;
+ right: var(--cds-spacing-07, 2rem);
}
.bx--select--inline .bx--select-input:disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
cursor: not-allowed;
}
@@ -17190,7 +18220,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--select.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -17208,7 +18238,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -17245,10 +18275,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--summary-card__body {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
overflow: hidden;
display: flex;
flex-direction: column;
@@ -17266,11 +18296,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--summary-card__header__title {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- color: var(--text-02, #c6c6c6);
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
+ color: var(--cds-text-02, #c6c6c6);
flex-grow: 1;
margin: 0;
padding: 0;
@@ -17279,8 +18309,8 @@ li.bx--accordion__item--disabled:last-of-type {
.security--summary-card__footer {
position: relative;
display: flex;
- background-color: var(--ui-01, #262626);
- border-top: 1px solid var(--ui-02, #393939);
+ background-color: var(--cds-ui-01, #262626);
+ border-top: 1px solid var(--cds-ui-02, #393939);
z-index: 0;
}
@@ -17329,7 +18359,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
display: flex;
flex-direction: column;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
z-index: 6000;
top: -18rem;
bottom: 3rem;
@@ -17343,10 +18373,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--summary-card__action-overlay__title, .security--summary-card__action-overlay__content {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
margin: 0;
}
@@ -17364,11 +18394,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--summary-card__action-overlay__close-button, .security--summary-card__action-overlay__close-button:hover, .security--summary-card__action-overlay__close-button:focus, .security--summary-card__action-overlay__close-button:active {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--summary-card__action-overlay__close-button .bx--btn__icon path, .security--summary-card__action-overlay__close-button:hover .bx--btn__icon path, .security--summary-card__action-overlay__close-button:focus .bx--btn__icon path, .security--summary-card__action-overlay__close-button:active .bx--btn__icon path {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.security--summary-card__action-overlay__close-button .bx--btn__icon {
@@ -17403,7 +18433,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--summary-card__action-overlay--transparent {
position: absolute;
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
top: -21rem;
bottom: 3rem;
right: 0;
@@ -17412,10 +18442,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tag-wall__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
@@ -17436,19 +18466,19 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
width: 100%;
height: 2.5rem;
padding: 0 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -17459,7 +18489,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--text-input:focus, .bx--text-input:active {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -17486,12 +18516,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--text-input::placeholder {
- color: var(--text-05, #8d8d8d);
+ color: var(--cds-text-05, #8d8d8d);
opacity: 1;
}
.bx--text-input--light {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--text-input__field-wrapper {
@@ -17506,11 +18536,11 @@ li.bx--accordion__item--disabled:last-of-type {
top: 50%;
right: 1rem;
transform: translateY(-50%);
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--text-input__field-wrapper .bx--text-input__invalid-icon--warning {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--text-input__field-wrapper .bx--text-input__invalid-icon--warning path:first-of-type {
@@ -17527,7 +18557,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--text-input__field-wrapper .bx--text-input--password__visibility:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -17541,7 +18571,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--text-input__field-wrapper .bx--text-input--password__visibility:focus svg {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -17603,16 +18633,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -17715,7 +18745,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--text-input__field-wrapper .bx--text-input--password__visibility::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -17749,7 +18779,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--text-input__field-wrapper .bx--text-input--password__visibility svg,
.bx--text-input__field-wrapper .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger svg {
transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -17760,7 +18790,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--text-input__field-wrapper .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -17772,7 +18802,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--text-input__field-wrapper .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:hover,
.bx--text-input__field-wrapper .bx--btn.bx--text-input--password__visibility__toggle.bx--tooltip__trigger:focus svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--text-input__field-wrapper .bx--text-input--invalid {
@@ -17795,35 +18825,35 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--text-input:disabled + .bx--text-input--password__visibility svg,
.bx--text-input:disabled + .bx--text-input--password__visibility__toggle svg {
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--text-input:disabled + .bx--text-input--password__visibility svg:hover,
.bx--text-input:disabled + .bx--text-input--password__visibility__toggle svg:hover {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--text-input:disabled {
outline: 2px solid transparent;
outline-offset: -2px;
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
border-bottom: 1px solid transparent;
-webkit-text-fill-color: currentColor;
cursor: not-allowed;
}
.bx--text-input--light:disabled {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--text-input:disabled::placeholder {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
opacity: 1;
}
.bx--text-input--invalid {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
box-shadow: none;
}
@@ -17842,7 +18872,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--skeleton.bx--text-input {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -17858,7 +18888,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -17872,7 +18902,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--form--fluid .bx--text-input-wrapper {
position: relative;
- background: var(--field-01, #262626);
+ background: var(--cds-field-01, #262626);
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -17907,7 +18937,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--form--fluid .bx--text-input--warn + .bx--text-input__divider {
display: block;
margin: 0 1rem;
- border-color: var(--ui-03, #393939);
+ border-color: var(--cds-ui-03, #393939);
border-style: solid;
border-bottom: none;
}
@@ -17917,7 +18947,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--form--fluid .bx--text-input-wrapper--light {
- background: var(--field-02, #393939);
+ background: var(--cds-field-02, #393939);
}
.bx--form--fluid .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid {
@@ -17926,7 +18956,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--form--fluid .bx--text-input__field-wrapper[data-invalid]:not(:focus) {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
}
@@ -17937,7 +18967,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--form--fluid .bx--text-input__field-wrapper[data-invalid] > .bx--text-input--invalid:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -18016,7 +19046,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter__search__icon {
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
.security--filter__add {
@@ -18029,7 +19059,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter__list-container {
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.security--filter__list-container:empty {
@@ -18042,7 +19072,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter__list-item:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -18053,7 +19083,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--filter__list-item:hover {
- background: var(--ui-02, #393939);
+ background: var(--cds-ui-02, #393939);
position: relative;
}
@@ -18061,7 +19091,7 @@ li.bx--accordion__item--disabled:last-of-type {
content: \\"\\";
position: absolute;
width: 100%;
- background: var(--ui-02, #393939);
+ background: var(--cds-ui-02, #393939);
height: 1px;
bottom: 0;
transform: translateY(1px);
@@ -18128,7 +19158,7 @@ li.bx--accordion__item--disabled:last-of-type {
min-height: 20rem;
margin-right: 1rem;
margin-left: 1rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
transform: translate3d(calc( -50% - 1rem), 0, 0);
z-index: 9000;
flex-direction: column;
@@ -18136,7 +19166,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--input__background__color--light .bx--number .security--tearsheet--small input[type=\\"number\\"], .security--card .bx--number .security--tearsheet--small input[type=\\"number\\"], .security--tearsheet--small .bx--date-picker__input, .security--tearsheet--small .bx--dropdown,
.security--tearsheet--small .bx--number input[type=\\"number\\"], .security--tearsheet--small .bx--search-input, .security--tearsheet--small .bx--select-input, .security--tearsheet--small .bx--text-area, .security--tearsheet--small .bx--text-input, .security--tearsheet--small .bx--list-box, .security--tearsheet--small .bx--list-box__menu, .security--tearsheet--small .security--button--icon:focus, .security--tearsheet--small .security--button--icon:hover, .security--tearsheet .bx--number .security--tearsheet--small input[type=\\"number\\"] {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.security--tearsheet--small__transition--enter--active, .security--tearsheet--small__transition--leave--active {
@@ -18169,11 +19199,11 @@ li.bx--accordion__item--disabled:last-of-type {
.security--tearsheet--small > .bx--loading-overlay {
position: absolute;
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
}
.security--tearsheet--small__loading .bx--loading__stroke {
- stroke: var(--inverse-focus-ui, #0f62fe);
+ stroke: var(--cds-inverse-focus-ui, #0f62fe);
}
@media (min-width: 42rem) {
@@ -18203,10 +19233,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tearsheet--small__title {
- font-size: 2rem;
- font-weight: 400;
- line-height: 1.25;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-05-font-size, 2rem);
+ font-weight: var(--cds-productive-heading-05-font-weight, 400);
+ line-height: var(--cds-productive-heading-05-line-height, 1.25);
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
margin-top: 0;
margin-bottom: 1rem;
}
@@ -18225,10 +19255,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tearsheet--small__description {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.security--tearsheet--small__content {
@@ -18267,7 +19297,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tag-wall-filter__tag-wall__label {
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--tag-wall-filter__description {
@@ -18295,7 +19325,7 @@ li.bx--accordion__item--disabled:last-of-type {
right: 0;
bottom: 0;
left: 0;
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
justify-content: center;
z-index: 6000;
}
@@ -18362,14 +19392,14 @@ li.bx--accordion__item--disabled:last-of-type {
min-height: 20rem;
margin-right: 1rem;
margin-left: 1rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
transform: translate3d(calc( -50% - 1rem), 0, 0);
z-index: 9000;
}
.security--input__background__color--light .bx--number .security--tearsheet input[type=\\"number\\"], .security--card .bx--number .security--tearsheet input[type=\\"number\\"], .security--tearsheet--small .bx--number .security--tearsheet input[type=\\"number\\"], .security--tearsheet .bx--date-picker__input, .security--tearsheet .bx--dropdown,
.security--tearsheet .bx--number input[type=\\"number\\"], .security--tearsheet .bx--search-input, .security--tearsheet .bx--select-input, .security--tearsheet .bx--text-area, .security--tearsheet .bx--text-input, .security--tearsheet .bx--list-box, .security--tearsheet .bx--list-box__menu, .security--tearsheet .security--button--icon:focus, .security--tearsheet .security--button--icon:hover {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.security--tearsheet__transition--enter--active, .security--tearsheet__transition--leave--active {
@@ -18402,11 +19432,11 @@ li.bx--accordion__item--disabled:last-of-type {
.security--tearsheet > .bx--loading-overlay {
position: absolute;
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
}
.security--tearsheet__loading .bx--loading__stroke {
- stroke: var(--inverse-focus-ui, #0f62fe);
+ stroke: var(--cds-inverse-focus-ui, #0f62fe);
}
.security--tearsheet__button {
@@ -18423,11 +19453,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tearsheet__button--tertiary__text {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- color: var(--text-01, #f4f4f4);
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--tearsheet__sidebar {
@@ -18435,26 +19465,26 @@ li.bx--accordion__item--disabled:last-of-type {
width: 33%;
max-width: 16.5rem;
padding: 1.5rem;
- border-right: 0.0625rem solid var(--ui-background, #161616);
+ border-right: 0.0625rem solid var(--cds-ui-background, #161616);
}
.security--tearsheet__sidebar__title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
margin-top: 0;
margin-bottom: 0.25rem;
}
.security--tearsheet__sidebar__subtitle {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
margin-top: 0;
margin-bottom: 1.5rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--tearsheet__sidebar__footer {
@@ -18489,10 +19519,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--tearsheet__main__title {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
padding-right: 1.5rem;
margin-top: 0;
margin-bottom: 1.5rem;
@@ -18570,18 +19600,18 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--time-indicator {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
display: flex;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
align-items: center;
}
.security--time-indicator__icon {
margin-right: 0.5rem;
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.security--toolbar {
@@ -18590,8 +19620,8 @@ li.bx--accordion__item--disabled:last-of-type {
bottom: 0;
left: 0;
width: 3rem;
- padding: 0.5rem 0.25rem;
- background-color: var(--ui-background, #161616);
+ padding: var(--cds-spacing-03, 0.5rem) 0.25rem;
+ background-color: var(--cds-ui-background, #161616);
box-sizing: border-box;
z-index: 8002;
}
@@ -18609,78 +19639,306 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--theme--cg10 .security--toolbar, .security--theme--cg10 .security--toolbar__panel {
- --interactive-01: #0f62fe;
- --interactive-02: #697077;
- --interactive-03: #ffffff;
- --interactive-04: #4589ff;
- --ui-background: #121619;
- --ui-01: #21272a;
- --ui-02: #343a3f;
- --ui-03: #343a3f;
- --ui-04: #697077;
- --ui-05: #f2f4f8;
- --text-01: #f2f4f8;
- --text-02: #c1c7cd;
- --text-03: #697077;
- --text-04: #ffffff;
- --text-05: #878d96;
- --text-error: #ff8389;
- --icon-01: #f2f4f8;
- --icon-02: #c1c7cd;
- --icon-03: #ffffff;
- --link-01: #78a9ff;
- --link-02: #a6c8ff;
- --inverse-link: #0f62fe;
- --field-01: #21272a;
- --field-02: #343a3f;
- --inverse-01: #121619;
- --inverse-02: #f2f4f8;
- --support-01: #fa4d56;
- --support-02: #42be65;
- --support-03: #f1c21b;
- --support-04: #4589ff;
- --inverse-support-01: #da1e28;
- --inverse-support-02: #24a148;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #0f62fe;
- --overlay-01: rgba(22, 22, 22, 0.7);
- --danger-01: #da1e28;
- --danger-02: #fa4d56;
- --focus: #ffffff;
- --inverse-focus-ui: #0f62fe;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #a6c8ff;
- --hover-secondary: #5a6066;
- --active-secondary: #343a3f;
- --hover-tertiary: #f2f4f8;
- --active-tertiary: #c1c7cd;
- --hover-ui: #2f353a;
- --hover-light-ui: #4c4c4c;
- --active-ui: #4d5358;
- --active-light-ui: #697077;
- --selected-ui: #343a3f;
- --selected-light-ui: #4d5358;
- --inverse-hover-ui: #e0e4ea;
- --hover-selected-ui: #464c51;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #2f353a;
- --visited-link: #be95ff;
- --disabled-01: #21272a;
- --disabled-02: #4d5358;
- --disabled-03: #878d96;
- --highlight: #002d9c;
- --decorative-01: #4d5358;
- --button-separator: #121619;
- --skeleton-01: #2f353a;
- --skeleton-02: #4d5358;
- --brand-01: #0f62fe;
- --brand-02: #697077;
- --brand-03: #ffffff;
- --active-01: #4d5358;
- --hover-field: #2f353a;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #697077;
+ --cds-interactive-03: #ffffff;
+ --cds-interactive-04: #4589ff;
+ --cds-ui-background: #121619;
+ --cds-ui-01: #21272a;
+ --cds-ui-02: #343a3f;
+ --cds-ui-03: #343a3f;
+ --cds-ui-04: #697077;
+ --cds-ui-05: #f2f4f8;
+ --cds-text-01: #f2f4f8;
+ --cds-text-02: #c1c7cd;
+ --cds-text-03: #697077;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #878d96;
+ --cds-text-error: #ff8389;
+ --cds-icon-01: #f2f4f8;
+ --cds-icon-02: #c1c7cd;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #78a9ff;
+ --cds-link-02: #a6c8ff;
+ --cds-inverse-link: #0f62fe;
+ --cds-field-01: #21272a;
+ --cds-field-02: #343a3f;
+ --cds-inverse-01: #121619;
+ --cds-inverse-02: #f2f4f8;
+ --cds-support-01: #fa4d56;
+ --cds-support-02: #42be65;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #4589ff;
+ --cds-inverse-support-01: #da1e28;
+ --cds-inverse-support-02: #24a148;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #0f62fe;
+ --cds-overlay-01: rgba(22, 22, 22, 0.7);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #fa4d56;
+ --cds-focus: #ffffff;
+ --cds-inverse-focus-ui: #0f62fe;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #a6c8ff;
+ --cds-hover-secondary: #5a6066;
+ --cds-active-secondary: #343a3f;
+ --cds-hover-tertiary: #f2f4f8;
+ --cds-active-tertiary: #c1c7cd;
+ --cds-hover-ui: #2f353a;
+ --cds-hover-light-ui: #4c4c4c;
+ --cds-hover-selected-ui: #464c51;
+ --cds-active-ui: #4d5358;
+ --cds-active-light-ui: #697077;
+ --cds-selected-ui: #343a3f;
+ --cds-selected-light-ui: #4d5358;
+ --cds-inverse-hover-ui: #e0e4ea;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #2f353a;
+ --cds-visited-link: #be95ff;
+ --cds-disabled-01: #21272a;
+ --cds-disabled-02: #4d5358;
+ --cds-disabled-03: #878d96;
+ --cds-highlight: #002d9c;
+ --cds-decorative-01: #4d5358;
+ --cds-button-separator: #121619;
+ --cds-skeleton-01: #2f353a;
+ --cds-skeleton-02: #4d5358;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #697077;
+ --cds-brand-03: #ffffff;
+ --cds-active-01: #4d5358;
+ --cds-hover-field: #2f353a;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #697077);
+ --interactive-03: var(--cds-interactive-03, #ffffff);
+ --interactive-04: var(--cds-interactive-04, #4589ff);
+ --ui-background: var(--cds-ui-background, #121619);
+ --ui-01: var(--cds-ui-01, #21272a);
+ --ui-02: var(--cds-ui-02, #343a3f);
+ --ui-03: var(--cds-ui-03, #343a3f);
+ --ui-04: var(--cds-ui-04, #697077);
+ --ui-05: var(--cds-ui-05, #f2f4f8);
+ --text-01: var(--cds-text-01, #f2f4f8);
+ --text-02: var(--cds-text-02, #c1c7cd);
+ --text-03: var(--cds-text-03, #697077);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #878d96);
+ --text-error: var(--cds-text-error, #ff8389);
+ --icon-01: var(--cds-icon-01, #f2f4f8);
+ --icon-02: var(--cds-icon-02, #c1c7cd);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #78a9ff);
+ --link-02: var(--cds-link-02, #a6c8ff);
+ --inverse-link: var(--cds-inverse-link, #0f62fe);
+ --field-01: var(--cds-field-01, #21272a);
+ --field-02: var(--cds-field-02, #343a3f);
+ --inverse-01: var(--cds-inverse-01, #121619);
+ --inverse-02: var(--cds-inverse-02, #f2f4f8);
+ --support-01: var(--cds-support-01, #fa4d56);
+ --support-02: var(--cds-support-02, #42be65);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #4589ff);
+ --inverse-support-01: var(--cds-inverse-support-01, #da1e28);
+ --inverse-support-02: var(--cds-inverse-support-02, #24a148);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #0f62fe);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #fa4d56);
+ --focus: var(--cds-focus, #ffffff);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #0f62fe);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #a6c8ff);
+ --hover-secondary: var(--cds-hover-secondary, #5a6066);
+ --active-secondary: var(--cds-active-secondary, #343a3f);
+ --hover-tertiary: var(--cds-hover-tertiary, #f2f4f8);
+ --active-tertiary: var(--cds-active-tertiary, #c1c7cd);
+ --hover-ui: var(--cds-hover-ui, #2f353a);
+ --hover-light-ui: var(--cds-hover-light-ui, #4c4c4c);
+ --active-ui: var(--cds-active-ui, #4d5358);
+ --active-light-ui: var(--cds-active-light-ui, #697077);
+ --selected-ui: var(--cds-selected-ui, #343a3f);
+ --selected-light-ui: var(--cds-selected-light-ui, #4d5358);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #e0e4ea);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #464c51);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #2f353a);
+ --visited-link: var(--cds-visited-link, #be95ff);
+ --disabled-01: var(--cds-disabled-01, #21272a);
+ --disabled-02: var(--cds-disabled-02, #4d5358);
+ --disabled-03: var(--cds-disabled-03, #878d96);
+ --highlight: var(--cds-highlight, #002d9c);
+ --decorative-01: var(--cds-decorative-01, #4d5358);
+ --button-separator: var(--cds-button-separator, #121619);
+ --skeleton-01: var(--cds-skeleton-01, #2f353a);
+ --skeleton-02: var(--cds-skeleton-02, #4d5358);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #697077);
+ --brand-03: var(--cds-brand-03, #ffffff);
+ --active-01: var(--cds-active-01, #4d5358);
+ --hover-field: var(--cds-hover-field, #2f353a);
+ --danger: var(--cds-danger, #da1e28);
}
.security--toolbar__group {
@@ -18696,7 +19954,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--toolbar__button--active, .security--toolbar__button:hover, .security--toolbar__button:focus {
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.security--toolbar__button--active .security--toolbar__icon, .security--toolbar__button:hover .security--toolbar__icon, .security--toolbar__button:focus .security--toolbar__icon {
@@ -18708,78 +19966,306 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--theme--cg10 .security--toolbar__button::after, .security--theme--cg10 .security--toolbar__button::before {
- --interactive-01: #0f62fe;
- --interactive-02: #343a3f;
- --interactive-03: #0f62fe;
- --interactive-04: #0f62fe;
- --ui-background: #f2f4f8;
- --ui-01: #ffffff;
- --ui-02: #f2f4f8;
- --ui-03: #dde1e6;
- --ui-04: #878d96;
- --ui-05: #121619;
- --text-01: #121619;
- --text-02: #4d5358;
- --text-03: #a2a9b0;
- --text-04: #ffffff;
- --text-05: #697077;
- --text-error: #da1e28;
- --icon-01: #121619;
- --icon-02: #4d5358;
- --icon-03: #ffffff;
- --link-01: #0f62fe;
- --link-02: #0043ce;
- --inverse-link: #78a9ff;
- --field-01: #ffffff;
- --field-02: #f2f4f8;
- --inverse-01: #ffffff;
- --inverse-02: #343a3f;
- --support-01: #da1e28;
- --support-02: #24a148;
- --support-03: #f1c21b;
- --support-04: #0043ce;
- --inverse-support-01: #fa4d56;
- --inverse-support-02: #42be65;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #4589ff;
- --overlay-01: rgba(22, 22, 22, 0.5);
- --danger-01: #da1e28;
- --danger-02: #da1e28;
- --focus: #0f62fe;
- --inverse-focus-ui: #ffffff;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #0043ce;
- --hover-secondary: #464c51;
- --active-secondary: #697077;
- --hover-tertiary: #0353e9;
- --active-tertiary: #002d9c;
- --hover-ui: #e0e4ea;
- --hover-light-ui: #e5e5e5;
- --active-ui: #c1c7cd;
- --active-light-ui: #c1c7cd;
- --selected-ui: #dde1e6;
- --selected-light-ui: #dde1e6;
- --inverse-hover-ui: #464c51;
- --hover-selected-ui: #c4c9d1;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #e0e4ea;
- --visited-link: #8a3ffc;
- --disabled-01: #ffffff;
- --disabled-02: #c1c7cd;
- --disabled-03: #878d96;
- --highlight: #edf5ff;
- --decorative-01: #dde1e6;
- --button-separator: #dde1e6;
- --skeleton-01: #e0e4ea;
- --skeleton-02: #c1c7cd;
- --brand-01: #0f62fe;
- --brand-02: #343a3f;
- --brand-03: #0f62fe;
- --active-01: #c1c7cd;
- --hover-field: #e0e4ea;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #343a3f;
+ --cds-interactive-03: #0f62fe;
+ --cds-interactive-04: #0f62fe;
+ --cds-ui-background: #f2f4f8;
+ --cds-ui-01: #ffffff;
+ --cds-ui-02: #f2f4f8;
+ --cds-ui-03: #dde1e6;
+ --cds-ui-04: #878d96;
+ --cds-ui-05: #121619;
+ --cds-text-01: #121619;
+ --cds-text-02: #4d5358;
+ --cds-text-03: #a2a9b0;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #697077;
+ --cds-text-error: #da1e28;
+ --cds-icon-01: #121619;
+ --cds-icon-02: #4d5358;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #0f62fe;
+ --cds-link-02: #0043ce;
+ --cds-inverse-link: #78a9ff;
+ --cds-field-01: #ffffff;
+ --cds-field-02: #f2f4f8;
+ --cds-inverse-01: #ffffff;
+ --cds-inverse-02: #343a3f;
+ --cds-support-01: #da1e28;
+ --cds-support-02: #24a148;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #0043ce;
+ --cds-inverse-support-01: #fa4d56;
+ --cds-inverse-support-02: #42be65;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #4589ff;
+ --cds-overlay-01: rgba(22, 22, 22, 0.5);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #da1e28;
+ --cds-focus: #0f62fe;
+ --cds-inverse-focus-ui: #ffffff;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #0043ce;
+ --cds-hover-secondary: #464c51;
+ --cds-active-secondary: #697077;
+ --cds-hover-tertiary: #0353e9;
+ --cds-active-tertiary: #002d9c;
+ --cds-hover-ui: #e0e4ea;
+ --cds-hover-light-ui: #e5e5e5;
+ --cds-hover-selected-ui: #c4c9d1;
+ --cds-active-ui: #c1c7cd;
+ --cds-active-light-ui: #c1c7cd;
+ --cds-selected-ui: #dde1e6;
+ --cds-selected-light-ui: #dde1e6;
+ --cds-inverse-hover-ui: #464c51;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #e0e4ea;
+ --cds-visited-link: #8a3ffc;
+ --cds-disabled-01: #ffffff;
+ --cds-disabled-02: #c1c7cd;
+ --cds-disabled-03: #878d96;
+ --cds-highlight: #edf5ff;
+ --cds-decorative-01: #dde1e6;
+ --cds-button-separator: #dde1e6;
+ --cds-skeleton-01: #e0e4ea;
+ --cds-skeleton-02: #c1c7cd;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #343a3f;
+ --cds-brand-03: #0f62fe;
+ --cds-active-01: #c1c7cd;
+ --cds-hover-field: #e0e4ea;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #343a3f);
+ --interactive-03: var(--cds-interactive-03, #0f62fe);
+ --interactive-04: var(--cds-interactive-04, #0f62fe);
+ --ui-background: var(--cds-ui-background, #f2f4f8);
+ --ui-01: var(--cds-ui-01, #ffffff);
+ --ui-02: var(--cds-ui-02, #f2f4f8);
+ --ui-03: var(--cds-ui-03, #dde1e6);
+ --ui-04: var(--cds-ui-04, #878d96);
+ --ui-05: var(--cds-ui-05, #121619);
+ --text-01: var(--cds-text-01, #121619);
+ --text-02: var(--cds-text-02, #4d5358);
+ --text-03: var(--cds-text-03, #a2a9b0);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #697077);
+ --text-error: var(--cds-text-error, #da1e28);
+ --icon-01: var(--cds-icon-01, #121619);
+ --icon-02: var(--cds-icon-02, #4d5358);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #0f62fe);
+ --link-02: var(--cds-link-02, #0043ce);
+ --inverse-link: var(--cds-inverse-link, #78a9ff);
+ --field-01: var(--cds-field-01, #ffffff);
+ --field-02: var(--cds-field-02, #f2f4f8);
+ --inverse-01: var(--cds-inverse-01, #ffffff);
+ --inverse-02: var(--cds-inverse-02, #343a3f);
+ --support-01: var(--cds-support-01, #da1e28);
+ --support-02: var(--cds-support-02, #24a148);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #0043ce);
+ --inverse-support-01: var(--cds-inverse-support-01, #fa4d56);
+ --inverse-support-02: var(--cds-inverse-support-02, #42be65);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #4589ff);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #da1e28);
+ --focus: var(--cds-focus, #0f62fe);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #ffffff);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #0043ce);
+ --hover-secondary: var(--cds-hover-secondary, #464c51);
+ --active-secondary: var(--cds-active-secondary, #697077);
+ --hover-tertiary: var(--cds-hover-tertiary, #0353e9);
+ --active-tertiary: var(--cds-active-tertiary, #002d9c);
+ --hover-ui: var(--cds-hover-ui, #e0e4ea);
+ --hover-light-ui: var(--cds-hover-light-ui, #e5e5e5);
+ --active-ui: var(--cds-active-ui, #c1c7cd);
+ --active-light-ui: var(--cds-active-light-ui, #c1c7cd);
+ --selected-ui: var(--cds-selected-ui, #dde1e6);
+ --selected-light-ui: var(--cds-selected-light-ui, #dde1e6);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #464c51);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #c4c9d1);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #e0e4ea);
+ --visited-link: var(--cds-visited-link, #8a3ffc);
+ --disabled-01: var(--cds-disabled-01, #ffffff);
+ --disabled-02: var(--cds-disabled-02, #c1c7cd);
+ --disabled-03: var(--cds-disabled-03, #878d96);
+ --highlight: var(--cds-highlight, #edf5ff);
+ --decorative-01: var(--cds-decorative-01, #dde1e6);
+ --button-separator: var(--cds-button-separator, #dde1e6);
+ --skeleton-01: var(--cds-skeleton-01, #e0e4ea);
+ --skeleton-02: var(--cds-skeleton-02, #c1c7cd);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #343a3f);
+ --brand-03: var(--cds-brand-03, #0f62fe);
+ --active-01: var(--cds-active-01, #c1c7cd);
+ --hover-field: var(--cds-hover-field, #e0e4ea);
+ --danger: var(--cds-danger, #da1e28);
}
.security--toolbar__icon {
@@ -18798,10 +20284,10 @@ li.bx--accordion__item--disabled:last-of-type {
left: 3rem;
bottom: 0;
width: 16rem;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- background-color: var(--ui-01, #262626);
- box-shadow: 0.125rem 0 0 0 var(--overlay-01, rgba(22, 22, 22, 0.7));
+ padding-top: var(--cds-spacing-03, 0.5rem);
+ padding-bottom: var(--cds-spacing-03, 0.5rem);
+ background-color: var(--cds-ui-01, #262626);
+ box-shadow: 0.125rem 0 0 0 var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
@@ -18812,14 +20298,14 @@ li.bx--accordion__item--disabled:last-of-type {
[dir=\\"rtl\\"] .security--toolbar__panel {
right: 3rem;
left: unset;
- box-shadow: -0.125rem 0 0 0 var(--overlay-01, rgba(22, 22, 22, 0.7));
+ box-shadow: -0.125rem 0 0 0 var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
}
.security--toolbar__content {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
height: 95%;
width: 13rem;
overflow: hidden;
@@ -18837,14 +20323,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--toolbar__content a {
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
}
.security--toolbar__content h1 {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
}
.security--toolbar__transition--enter--active, .security--toolbar__transition--leave--active {
@@ -18941,17 +20427,17 @@ li.bx--accordion__item--disabled:last-of-type {
display: block;
min-width: 12rem;
padding: 1rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
transition-duration: 0.1s;
text-decoration: unset;
}
.security--trending-card:focus, .security--trending-card:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.security--trending-card:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -18969,21 +20455,21 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--trending-card__title {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
margin-top: 0;
margin-bottom: 0.25rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--trending-card__subtitle {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- color: var(--text-02, #c6c6c6);
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--structured-list--selection .bx--structured-list-td,
@@ -19034,27 +20520,27 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--structured-list-row {
display: table-row;
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
- background-color: var(--hover-row, #353535);
- border-bottom: 1px solid var(--hover-row, #353535);
+ background-color: var(--cds-hover-row, #353535);
+ border-bottom: 1px solid var(--cds-hover-row, #353535);
cursor: pointer;
}
.bx--structured-list-row.bx--structured-list-row--selected {
- background-color: var(--selected-ui, #393939);
+ background-color: var(--cds-selected-ui, #393939);
}
.bx--structured-list-row.bx--structured-list-row--header-row {
- border-bottom: 1px solid var(--selected-ui, #393939);
+ border-bottom: 1px solid var(--cds-selected-ui, #393939);
cursor: inherit;
}
.bx--structured-list-row:focus:not(.bx--structured-list-row--header-row) {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -19066,11 +20552,11 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td,
.bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--structured-list--selection .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row) > .bx--structured-list-td {
- border-top: 1px solid var(--ui-01, #262626);
+ border-top: 1px solid var(--cds-ui-01, #262626);
}
.bx--structured-list-thead {
@@ -19087,13 +20573,13 @@ li.bx--accordion__item--disabled:last-of-type {
vertical-align: baseline;
border: 0;
padding: 1rem 1rem 0.5rem 1rem;
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
display: table-cell;
height: 2.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
font-weight: 600;
text-align: left;
text-transform: none;
@@ -19119,15 +20605,15 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
padding: 1rem 1rem 1.5rem 1rem;
position: relative;
display: table-cell;
max-width: 36rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
transition: color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -19154,7 +20640,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--structured-list-input:checked + .bx--structured-list-row .bx--structured-list-svg,
.bx--structured-list-input:checked + .bx--structured-list-td .bx--structured-list-svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -19179,7 +20665,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--structured-list.bx--skeleton span {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -19198,7 +20684,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -19235,10 +20721,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--type-layout__container__cell {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}
@@ -19268,10 +20754,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--type-layout__container--sm__cell, .security--type-layout__container--xs__cell {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.security--type-layout__container--sm .security--type-layout__container__cell {
@@ -19290,7 +20776,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--type-layout__container__cell:last-of-type {
padding-right: 0;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--type-layout__container--bordered .security--type-layout__container__row {
@@ -19428,9 +20914,9 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__content:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
transform: translate3d(0, 0, 0);
opacity: 1;
}
@@ -19446,27 +20932,27 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__content > .bx--tooltip--definition > .bx--tooltip__trigger:focus {
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
}
.security--header__notification__content > .bx--tooltip--definition > .bx--tooltip__trigger.bx--tooltip--bottom + .bx--assistive-text, .security--header__notification__content > .bx--tooltip--definition > .bx--tooltip__trigger.bx--tooltip--top + .bx--assistive-text {
- background-color: var(--inverse-01, #161616);
- color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-01, #161616);
+ color: var(--cds-inverse-02, #f4f4f4);
}
.security--header__notification__content > .bx--tooltip--definition > .bx--tooltip__trigger.bx--tooltip--bottom::before {
- border-bottom-color: var(--inverse-01, #161616);
+ border-bottom-color: var(--cds-inverse-01, #161616);
}
.security--header__notification__content > .bx--tooltip--definition > .bx--tooltip__trigger.bx--tooltip--top::before {
- border-top-color: var(--inverse-01, #161616);
+ border-top-color: var(--cds-inverse-01, #161616);
}
.security--header__notification__details {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
display: block;
margin-bottom: 0.5rem;
}
@@ -19497,7 +20983,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-top: 0;
padding-right: 0;
padding-left: 0;
- color: var(--icon-01, #f4f4f4);
+ color: var(--cds-icon-01, #f4f4f4);
background-color: inherit;
align-items: center;
border: 0;
@@ -19505,7 +20991,7 @@ li.bx--accordion__item--disabled:last-of-type {
justify-content: center;
transition: 0.2s cubic-bezier(0.2, 0, 0.38, 0.9) background-color;
margin-left: auto;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
transition: 0.1s background-color cubic-bezier(0.2, 0, 0.38, 0.9);
cursor: inherit;
flex-shrink: 0;
@@ -19531,11 +21017,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button:hover, .security--header__notification__button:focus {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.security--header__notification__button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border-width: 0;
}
@@ -19547,12 +21033,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button:disabled {
- fill: var(--disabled-03, #8d8d8d);
+ fill: var(--cds-disabled-03, #8d8d8d);
cursor: not-allowed;
}
.security--header__notification__button:disabled, .security--header__notification__button:disabled:hover, .security--header__notification__button:disabled:focus {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.security--header__notification__button:disabled:focus {
@@ -19591,15 +21077,15 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button--tooltip::before {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
position: absolute;
padding: 0.125rem 1rem;
- color: var(--inverse-01, #161616);
- background-color: var(--inverse-02, #f4f4f4);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-inverse-02, #f4f4f4);
align-items: center;
border-radius: 0.125rem;
opacity: 0;
@@ -19644,7 +21130,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button--tooltip--top::after {
- border-top-color: var(--inverse-02, #f4f4f4);
+ border-top-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-50%, 0.25rem);
}
@@ -19657,7 +21143,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button--tooltip--right::after {
- border-right-color: var(--inverse-02, #f4f4f4);
+ border-right-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-0.25rem, -50%);
}
@@ -19670,7 +21156,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button--tooltip--bottom::after {
- border-bottom-color: var(--inverse-02, #f4f4f4);
+ border-bottom-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-50%, -0.25rem);
}
@@ -19683,19 +21169,19 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__notification__button--tooltip--left::after {
- border-left-color: var(--inverse-02, #f4f4f4);
+ border-left-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(0.25rem, -50%);
}
.security--header__notification__button:focus, .security--header__notification__button:hover {
- background-color: var(--inverse-hover-ui, #e5e5e5);
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
}
.security--header__notification__button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
transform: translate3d(0, 0, 0);
opacity: 1;
}
@@ -19708,7 +21194,7 @@ li.bx--accordion__item--disabled:last-of-type {
.security--header__notification__button:active, .security--header__notification__button:focus, .security--header__notification__button:hover {
cursor: pointer;
- background-color: var(--active-tertiary, #c6c6c6);
+ background-color: var(--cds-active-tertiary, #c6c6c6);
}
.security--header__notification__transition--enter--active, .security--header__notification__transition--leave--active {
@@ -19750,18 +21236,18 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__header__title {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-heading-02-font-size, 1rem);
+ font-weight: var(--cds-heading-02-font-weight, 600);
+ line-height: var(--cds-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-heading-02-letter-spacing, 0);
}
.security--header__popover__link--secondary, .security--header__popover__link--secondary:focus, .security--header__popover__link--secondary:hover, .security--header__popover__link--secondary:visited {
- color: var(--inverse-link, #0f62fe);
+ color: var(--cds-inverse-link, #0f62fe);
}
.security--header__popover__link--secondary:focus {
- outline-color: var(--inverse-link, #0f62fe);
+ outline-color: var(--cds-inverse-link, #0f62fe);
}
.security--header {
@@ -19781,14 +21267,14 @@ li.bx--accordion__item--disabled:last-of-type {
width: 100%;
height: 3rem;
padding-top: 0.5rem;
- background-color: var(--ui-background, #161616);
+ background-color: var(--cds-ui-background, #161616);
}
.security--header__link {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-left: 2rem;
}
@@ -19797,14 +21283,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__link:hover, .security--header__link:focus {
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.security--header__link__title--domain {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-heading-01-font-weight, 600);
+ line-height: var(--cds-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
}
.security--header__group {
@@ -19830,7 +21316,7 @@ li.bx--accordion__item--disabled:last-of-type {
bottom: 0;
width: 100%;
height: 0.25rem;
- background-color: var(--interactive-01, #0f62fe);
+ background-color: var(--cds-interactive-01, #0f62fe);
transition: 0.2s height cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -19841,23 +21327,23 @@ li.bx--accordion__item--disabled:last-of-type {
right: 0.5rem;
width: 0.5rem;
height: 0.5rem;
- background-color: var(--support-01, #fa4d56);
+ background-color: var(--cds-support-01, #fa4d56);
border-radius: 50%;
content: \\"\\";
z-index: 6000;
}
.security--header__popover {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: absolute;
right: 0;
width: 100%;
max-width: 100%;
- color: var(--inverse-01, #161616);
- background-color: var(--inverse-02, #f4f4f4);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-inverse-02, #f4f4f4);
}
@media (min-width: 42rem) {
@@ -19879,10 +21365,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
}
.security--header__popover__content {
@@ -19914,7 +21400,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-top: 0;
padding-right: 0;
padding-left: 0;
- color: var(--icon-01, #f4f4f4);
+ color: var(--cds-icon-01, #f4f4f4);
background-color: inherit;
align-items: center;
border: 0;
@@ -19922,7 +21408,7 @@ li.bx--accordion__item--disabled:last-of-type {
justify-content: center;
transition: 0.2s cubic-bezier(0.2, 0, 0.38, 0.9) background-color;
margin-left: auto;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
transition: 0.1s background-color cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -19941,11 +21427,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button:hover, .security--header__popover__button:focus {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.security--header__popover__button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border-width: 0;
}
@@ -19957,12 +21443,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button:disabled {
- fill: var(--disabled-03, #8d8d8d);
+ fill: var(--cds-disabled-03, #8d8d8d);
cursor: not-allowed;
}
.security--header__popover__button:disabled, .security--header__popover__button:disabled:hover, .security--header__popover__button:disabled:focus {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.security--header__popover__button:disabled:focus {
@@ -20001,15 +21487,15 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button--tooltip::before {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
position: absolute;
padding: 0.125rem 1rem;
- color: var(--inverse-01, #161616);
- background-color: var(--inverse-02, #f4f4f4);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-inverse-02, #f4f4f4);
align-items: center;
border-radius: 0.125rem;
opacity: 0;
@@ -20054,7 +21540,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button--tooltip--top::after {
- border-top-color: var(--inverse-02, #f4f4f4);
+ border-top-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-50%, 0.25rem);
}
@@ -20067,7 +21553,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button--tooltip--right::after {
- border-right-color: var(--inverse-02, #f4f4f4);
+ border-right-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-0.25rem, -50%);
}
@@ -20080,7 +21566,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button--tooltip--bottom::after {
- border-bottom-color: var(--inverse-02, #f4f4f4);
+ border-bottom-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(-50%, -0.25rem);
}
@@ -20093,20 +21579,20 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__button--tooltip--left::after {
- border-left-color: var(--inverse-02, #f4f4f4);
+ border-left-color: var(--cds-inverse-02, #f4f4f4);
transform: translate(0.25rem, -50%);
}
.security--header__popover__button:focus, .security--header__popover__button:hover {
- background-color: var(--inverse-hover-ui, #e5e5e5);
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
}
.security--header__popover__label {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-heading-01-font-weight, 600);
+ line-height: var(--cds-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
}
.security--header__popover__list {
@@ -20126,7 +21612,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__list-item .security--header__notification {
- box-shadow: inset 0 -0.0625rem 0 0 var(--inverse-hover-ui, #e5e5e5);
+ box-shadow: inset 0 -0.0625rem 0 0 var(--cds-inverse-hover-ui, #e5e5e5);
}
.security--header__popover__list-item .security--header__notification__wrapper {
@@ -20142,7 +21628,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__list-item:focus, .security--header__popover__list-item:hover {
- background-color: var(--inverse-hover-ui, #e5e5e5);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
}
.security--header__popover__list-item:focus .security--header__notification__button, .security--header__popover__list-item:hover .security--header__notification__button {
@@ -20151,7 +21637,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__list-item:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -20185,19 +21671,19 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__profile__header__title {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
hyphens: auto;
word-break: break-word;
}
.security--header__popover__profile__header__email {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
word-break: break-all;
}
@@ -20213,18 +21699,18 @@ li.bx--accordion__item--disabled:last-of-type {
padding-left: 1.5rem;
}
-.security--header__popover__profile__body__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+.security--header__popover__profile__body__label {
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.security--header__popover__profile__body__name {
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-body-short-02-font-size, 1rem);
+ font-weight: var(--cds-body-short-02-font-weight, 400);
+ line-height: var(--cds-body-short-02-line-height, 1.375);
+ letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
text-align: left;
width: 13rem;
overflow: hidden;
@@ -20256,13 +21742,13 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__profile__body__accordion__item .bx--accordion__heading:focus::before, .security--header__popover__profile__body__accordion__item .bx--accordion__heading:hover::before {
- background-color: var(--inverse-hover-ui, #e5e5e5);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
}
.security--header__popover__profile__body__accordion__item .bx--accordion__heading:focus::before {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
}
@media screen and (prefers-contrast) {
@@ -20304,10 +21790,10 @@ li.bx--accordion__item--disabled:last-of-type {
cursor: pointer;
appearance: none;
width: 100%;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
padding: 1rem 1.5rem;
color: inherit;
text-align: left;
@@ -20324,13 +21810,13 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__profile__body__account__button:focus, .security--header__popover__profile__body__account__button:hover {
- background-color: var(--inverse-hover-ui, #e5e5e5);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
}
.security--header__popover__profile__body__account__button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--inverse-focus-ui, #0f62fe);
+ outline-color: var(--cds-inverse-focus-ui, #0f62fe);
}
@media screen and (prefers-contrast) {
@@ -20345,7 +21831,7 @@ li.bx--accordion__item--disabled:last-of-type {
right: 1.5rem;
bottom: 0;
left: 1.5rem;
- background-color: var(--inverse-hover-ui, #e5e5e5);
+ background-color: var(--cds-inverse-hover-ui, #e5e5e5);
height: 0.0625rem;
content: \\"\\";
transform: translate3d(0, -0.125rem, 0);
@@ -20360,14 +21846,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--header__popover__footer {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
padding: 0.75rem 1.5rem;
align-items: center;
- border-top: 0.0625rem solid var(--inverse-hover-ui, #e5e5e5);
+ border-top: 0.0625rem solid var(--cds-inverse-hover-ui, #e5e5e5);
justify-content: space-between;
}
@@ -20461,7 +21947,7 @@ li.bx--accordion__item--disabled:last-of-type {
left: 0;
height: inherit;
padding-left: 1rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
background-position: left;
background-repeat: no-repeat;
background-size: 10rem 1.5rem;
@@ -20471,82 +21957,310 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--theme--cg10 .security--shell__banner {
- --interactive-01: #0f62fe;
- --interactive-02: #697077;
- --interactive-03: #ffffff;
- --interactive-04: #4589ff;
- --ui-background: #121619;
- --ui-01: #21272a;
- --ui-02: #343a3f;
- --ui-03: #343a3f;
- --ui-04: #697077;
- --ui-05: #f2f4f8;
- --text-01: #f2f4f8;
- --text-02: #c1c7cd;
- --text-03: #697077;
- --text-04: #ffffff;
- --text-05: #878d96;
- --text-error: #ff8389;
- --icon-01: #f2f4f8;
- --icon-02: #c1c7cd;
- --icon-03: #ffffff;
- --link-01: #78a9ff;
- --link-02: #a6c8ff;
- --inverse-link: #0f62fe;
- --field-01: #21272a;
- --field-02: #343a3f;
- --inverse-01: #121619;
- --inverse-02: #f2f4f8;
- --support-01: #fa4d56;
- --support-02: #42be65;
- --support-03: #f1c21b;
- --support-04: #4589ff;
- --inverse-support-01: #da1e28;
- --inverse-support-02: #24a148;
- --inverse-support-03: #f1c21b;
- --inverse-support-04: #0f62fe;
- --overlay-01: rgba(22, 22, 22, 0.7);
- --danger-01: #da1e28;
- --danger-02: #fa4d56;
- --focus: #ffffff;
- --inverse-focus-ui: #0f62fe;
- --hover-primary: #0353e9;
- --active-primary: #002d9c;
- --hover-primary-text: #a6c8ff;
- --hover-secondary: #5a6066;
- --active-secondary: #343a3f;
- --hover-tertiary: #f2f4f8;
- --active-tertiary: #c1c7cd;
- --hover-ui: #2f353a;
- --hover-light-ui: #4c4c4c;
- --active-ui: #4d5358;
- --active-light-ui: #697077;
- --selected-ui: #343a3f;
- --selected-light-ui: #4d5358;
- --inverse-hover-ui: #e0e4ea;
- --hover-selected-ui: #464c51;
- --hover-danger: #b81921;
- --active-danger: #750e13;
- --hover-row: #2f353a;
- --visited-link: #be95ff;
- --disabled-01: #21272a;
- --disabled-02: #4d5358;
- --disabled-03: #878d96;
- --highlight: #002d9c;
- --decorative-01: #4d5358;
- --button-separator: #121619;
- --skeleton-01: #2f353a;
- --skeleton-02: #4d5358;
- --brand-01: #0f62fe;
- --brand-02: #697077;
- --brand-03: #ffffff;
- --active-01: #4d5358;
- --hover-field: #2f353a;
- --danger: #da1e28;
+ --cds-interactive-01: #0f62fe;
+ --cds-interactive-02: #697077;
+ --cds-interactive-03: #ffffff;
+ --cds-interactive-04: #4589ff;
+ --cds-ui-background: #121619;
+ --cds-ui-01: #21272a;
+ --cds-ui-02: #343a3f;
+ --cds-ui-03: #343a3f;
+ --cds-ui-04: #697077;
+ --cds-ui-05: #f2f4f8;
+ --cds-text-01: #f2f4f8;
+ --cds-text-02: #c1c7cd;
+ --cds-text-03: #697077;
+ --cds-text-04: #ffffff;
+ --cds-text-05: #878d96;
+ --cds-text-error: #ff8389;
+ --cds-icon-01: #f2f4f8;
+ --cds-icon-02: #c1c7cd;
+ --cds-icon-03: #ffffff;
+ --cds-link-01: #78a9ff;
+ --cds-link-02: #a6c8ff;
+ --cds-inverse-link: #0f62fe;
+ --cds-field-01: #21272a;
+ --cds-field-02: #343a3f;
+ --cds-inverse-01: #121619;
+ --cds-inverse-02: #f2f4f8;
+ --cds-support-01: #fa4d56;
+ --cds-support-02: #42be65;
+ --cds-support-03: #f1c21b;
+ --cds-support-04: #4589ff;
+ --cds-inverse-support-01: #da1e28;
+ --cds-inverse-support-02: #24a148;
+ --cds-inverse-support-03: #f1c21b;
+ --cds-inverse-support-04: #0f62fe;
+ --cds-overlay-01: rgba(22, 22, 22, 0.7);
+ --cds-danger-01: #da1e28;
+ --cds-danger-02: #fa4d56;
+ --cds-focus: #ffffff;
+ --cds-inverse-focus-ui: #0f62fe;
+ --cds-hover-primary: #0353e9;
+ --cds-active-primary: #002d9c;
+ --cds-hover-primary-text: #a6c8ff;
+ --cds-hover-secondary: #5a6066;
+ --cds-active-secondary: #343a3f;
+ --cds-hover-tertiary: #f2f4f8;
+ --cds-active-tertiary: #c1c7cd;
+ --cds-hover-ui: #2f353a;
+ --cds-hover-light-ui: #4c4c4c;
+ --cds-hover-selected-ui: #464c51;
+ --cds-active-ui: #4d5358;
+ --cds-active-light-ui: #697077;
+ --cds-selected-ui: #343a3f;
+ --cds-selected-light-ui: #4d5358;
+ --cds-inverse-hover-ui: #e0e4ea;
+ --cds-hover-danger: #b81921;
+ --cds-active-danger: #750e13;
+ --cds-hover-row: #2f353a;
+ --cds-visited-link: #be95ff;
+ --cds-disabled-01: #21272a;
+ --cds-disabled-02: #4d5358;
+ --cds-disabled-03: #878d96;
+ --cds-highlight: #002d9c;
+ --cds-decorative-01: #4d5358;
+ --cds-button-separator: #121619;
+ --cds-skeleton-01: #2f353a;
+ --cds-skeleton-02: #4d5358;
+ --cds-brand-01: #0f62fe;
+ --cds-brand-02: #697077;
+ --cds-brand-03: #ffffff;
+ --cds-active-01: #4d5358;
+ --cds-hover-field: #2f353a;
+ --cds-danger: #da1e28;
+ --cds-caption-01-font-size: 0.75rem;
+ --cds-caption-01-font-weight: 400;
+ --cds-caption-01-line-height: 1.34;
+ --cds-caption-01-letter-spacing: 0.32px;
+ --cds-label-01-font-size: 0.75rem;
+ --cds-label-01-font-weight: 400;
+ --cds-label-01-line-height: 1.34;
+ --cds-label-01-letter-spacing: 0.32px;
+ --cds-helper-text-01-font-size: 0.75rem;
+ --cds-helper-text-01-line-height: 1.34;
+ --cds-helper-text-01-letter-spacing: 0.32px;
+ --cds-body-short-01-font-size: 0.875rem;
+ --cds-body-short-01-font-weight: 400;
+ --cds-body-short-01-line-height: 1.29;
+ --cds-body-short-01-letter-spacing: 0.16px;
+ --cds-body-long-01-font-size: 0.875rem;
+ --cds-body-long-01-font-weight: 400;
+ --cds-body-long-01-line-height: 1.43;
+ --cds-body-long-01-letter-spacing: 0.16px;
+ --cds-body-short-02-font-size: 1rem;
+ --cds-body-short-02-font-weight: 400;
+ --cds-body-short-02-line-height: 1.375;
+ --cds-body-short-02-letter-spacing: 0;
+ --cds-body-long-02-font-size: 1rem;
+ --cds-body-long-02-font-weight: 400;
+ --cds-body-long-02-line-height: 1.5;
+ --cds-body-long-02-letter-spacing: 0;
+ --cds-code-01-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-01-font-size: 0.75rem;
+ --cds-code-01-font-weight: 400;
+ --cds-code-01-line-height: 1.34;
+ --cds-code-01-letter-spacing: 0.32px;
+ --cds-code-02-font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
+ --cds-code-02-font-size: 0.875rem;
+ --cds-code-02-font-weight: 400;
+ --cds-code-02-line-height: 1.43;
+ --cds-code-02-letter-spacing: 0.32px;
+ --cds-heading-01-font-size: 0.875rem;
+ --cds-heading-01-font-weight: 600;
+ --cds-heading-01-line-height: 1.29;
+ --cds-heading-01-letter-spacing: 0.16px;
+ --cds-productive-heading-01-font-size: 0.875rem;
+ --cds-productive-heading-01-font-weight: 600;
+ --cds-productive-heading-01-line-height: 1.29;
+ --cds-productive-heading-01-letter-spacing: 0.16px;
+ --cds-heading-02-font-size: 1rem;
+ --cds-heading-02-font-weight: 600;
+ --cds-heading-02-line-height: 1.375;
+ --cds-heading-02-letter-spacing: 0;
+ --cds-productive-heading-02-font-size: 1rem;
+ --cds-productive-heading-02-font-weight: 600;
+ --cds-productive-heading-02-line-height: 1.375;
+ --cds-productive-heading-02-letter-spacing: 0;
+ --cds-productive-heading-03-font-size: 1.25rem;
+ --cds-productive-heading-03-font-weight: 400;
+ --cds-productive-heading-03-line-height: 1.4;
+ --cds-productive-heading-03-letter-spacing: 0;
+ --cds-productive-heading-04-font-size: 1.75rem;
+ --cds-productive-heading-04-font-weight: 400;
+ --cds-productive-heading-04-line-height: 1.29;
+ --cds-productive-heading-04-letter-spacing: 0;
+ --cds-productive-heading-05-font-size: 2rem;
+ --cds-productive-heading-05-font-weight: 400;
+ --cds-productive-heading-05-line-height: 1.25;
+ --cds-productive-heading-05-letter-spacing: 0;
+ --cds-productive-heading-06-font-size: 2.625rem;
+ --cds-productive-heading-06-font-weight: 300;
+ --cds-productive-heading-06-line-height: 1.199;
+ --cds-productive-heading-06-letter-spacing: 0;
+ --cds-productive-heading-07-font-size: 3.375rem;
+ --cds-productive-heading-07-font-weight: 300;
+ --cds-productive-heading-07-line-height: 1.19;
+ --cds-productive-heading-07-letter-spacing: 0;
+ --cds-expressive-heading-01-font-size: 0.875rem;
+ --cds-expressive-heading-01-font-weight: 600;
+ --cds-expressive-heading-01-line-height: 1.25;
+ --cds-expressive-heading-01-letter-spacing: 0.16px;
+ --cds-expressive-heading-02-font-size: 1rem;
+ --cds-expressive-heading-02-font-weight: 600;
+ --cds-expressive-heading-02-line-height: 1.5;
+ --cds-expressive-heading-02-letter-spacing: 0;
+ --cds-expressive-heading-03-font-size: 1.25rem;
+ --cds-expressive-heading-03-font-weight: 400;
+ --cds-expressive-heading-03-line-height: 1.4;
+ --cds-expressive-heading-03-letter-spacing: 0;
+ --cds-expressive-heading-04-font-size: 1.75rem;
+ --cds-expressive-heading-04-font-weight: 400;
+ --cds-expressive-heading-04-line-height: 1.29;
+ --cds-expressive-heading-04-letter-spacing: 0;
+ --cds-expressive-heading-05-font-size: 2rem;
+ --cds-expressive-heading-05-font-weight: 400;
+ --cds-expressive-heading-05-line-height: 1.25;
+ --cds-expressive-heading-05-letter-spacing: 0;
+ --cds-expressive-heading-06-font-size: 2rem;
+ --cds-expressive-heading-06-font-weight: 600;
+ --cds-expressive-heading-06-line-height: 1.25;
+ --cds-expressive-heading-06-letter-spacing: 0;
+ --cds-expressive-paragraph-01-font-size: 1.5rem;
+ --cds-expressive-paragraph-01-font-weight: 300;
+ --cds-expressive-paragraph-01-line-height: 1.334;
+ --cds-expressive-paragraph-01-letter-spacing: 0;
+ --cds-quotation-01-font-size: 1.25rem;
+ --cds-quotation-01-font-weight: 400;
+ --cds-quotation-01-line-height: 1.3;
+ --cds-quotation-01-letter-spacing: 0;
+ --cds-quotation-02-font-size: 2rem;
+ --cds-quotation-02-font-weight: 300;
+ --cds-quotation-02-line-height: 1.25;
+ --cds-quotation-02-letter-spacing: 0;
+ --cds-display-01-font-size: 2.625rem;
+ --cds-display-01-font-weight: 300;
+ --cds-display-01-line-height: 1.19;
+ --cds-display-01-letter-spacing: 0;
+ --cds-display-02-font-size: 2.625rem;
+ --cds-display-02-font-weight: 600;
+ --cds-display-02-line-height: 1.19;
+ --cds-display-02-letter-spacing: 0;
+ --cds-display-03-font-size: 2.625rem;
+ --cds-display-03-font-weight: 300;
+ --cds-display-03-line-height: 1.19;
+ --cds-display-03-letter-spacing: 0;
+ --cds-display-04-font-size: 2.625rem;
+ --cds-display-04-font-weight: 600;
+ --cds-display-04-line-height: 1.19;
+ --cds-display-04-letter-spacing: 0;
+ --cds-spacing-01: 0.125rem;
+ --cds-spacing-02: 0.25rem;
+ --cds-spacing-03: 0.5rem;
+ --cds-spacing-04: 0.75rem;
+ --cds-spacing-05: 1rem;
+ --cds-spacing-06: 1.5rem;
+ --cds-spacing-07: 2rem;
+ --cds-spacing-08: 2.5rem;
+ --cds-spacing-09: 3rem;
+ --cds-spacing-10: 4rem;
+ --cds-spacing-11: 5rem;
+ --cds-spacing-12: 6rem;
+ --cds-spacing-13: 10rem;
+ --cds-fluid-spacing-01: 0;
+ --cds-fluid-spacing-02: 2vw;
+ --cds-fluid-spacing-03: 5vw;
+ --cds-fluid-spacing-04: 10vw;
+ --cds-layout-01: 1rem;
+ --cds-layout-02: 1.5rem;
+ --cds-layout-03: 2rem;
+ --cds-layout-04: 3rem;
+ --cds-layout-05: 4rem;
+ --cds-layout-06: 6rem;
+ --cds-layout-07: 10rem;
+ --cds-container-01: 1.5rem;
+ --cds-container-02: 2rem;
+ --cds-container-03: 2.5rem;
+ --cds-container-04: 3rem;
+ --cds-container-05: 4rem;
+ --cds-icon-size-01: 1rem;
+ --cds-icon-size-02: 1.25rem;
+ --interactive-01: var(--cds-interactive-01, #0f62fe);
+ --interactive-02: var(--cds-interactive-02, #697077);
+ --interactive-03: var(--cds-interactive-03, #ffffff);
+ --interactive-04: var(--cds-interactive-04, #4589ff);
+ --ui-background: var(--cds-ui-background, #121619);
+ --ui-01: var(--cds-ui-01, #21272a);
+ --ui-02: var(--cds-ui-02, #343a3f);
+ --ui-03: var(--cds-ui-03, #343a3f);
+ --ui-04: var(--cds-ui-04, #697077);
+ --ui-05: var(--cds-ui-05, #f2f4f8);
+ --text-01: var(--cds-text-01, #f2f4f8);
+ --text-02: var(--cds-text-02, #c1c7cd);
+ --text-03: var(--cds-text-03, #697077);
+ --text-04: var(--cds-text-04, #ffffff);
+ --text-05: var(--cds-text-05, #878d96);
+ --text-error: var(--cds-text-error, #ff8389);
+ --icon-01: var(--cds-icon-01, #f2f4f8);
+ --icon-02: var(--cds-icon-02, #c1c7cd);
+ --icon-03: var(--cds-icon-03, #ffffff);
+ --link-01: var(--cds-link-01, #78a9ff);
+ --link-02: var(--cds-link-02, #a6c8ff);
+ --inverse-link: var(--cds-inverse-link, #0f62fe);
+ --field-01: var(--cds-field-01, #21272a);
+ --field-02: var(--cds-field-02, #343a3f);
+ --inverse-01: var(--cds-inverse-01, #121619);
+ --inverse-02: var(--cds-inverse-02, #f2f4f8);
+ --support-01: var(--cds-support-01, #fa4d56);
+ --support-02: var(--cds-support-02, #42be65);
+ --support-03: var(--cds-support-03, #f1c21b);
+ --support-04: var(--cds-support-04, #4589ff);
+ --inverse-support-01: var(--cds-inverse-support-01, #da1e28);
+ --inverse-support-02: var(--cds-inverse-support-02, #24a148);
+ --inverse-support-03: var(--cds-inverse-support-03, #f1c21b);
+ --inverse-support-04: var(--cds-inverse-support-04, #0f62fe);
+ --overlay-01: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
+ --danger-01: var(--cds-danger-01, #da1e28);
+ --danger-02: var(--cds-danger-02, #fa4d56);
+ --focus: var(--cds-focus, #ffffff);
+ --inverse-focus-ui: var(--cds-inverse-focus-ui, #0f62fe);
+ --hover-primary: var(--cds-hover-primary, #0353e9);
+ --active-primary: var(--cds-active-primary, #002d9c);
+ --hover-primary-text: var(--cds-hover-primary-text, #a6c8ff);
+ --hover-secondary: var(--cds-hover-secondary, #5a6066);
+ --active-secondary: var(--cds-active-secondary, #343a3f);
+ --hover-tertiary: var(--cds-hover-tertiary, #f2f4f8);
+ --active-tertiary: var(--cds-active-tertiary, #c1c7cd);
+ --hover-ui: var(--cds-hover-ui, #2f353a);
+ --hover-light-ui: var(--cds-hover-light-ui, #4c4c4c);
+ --active-ui: var(--cds-active-ui, #4d5358);
+ --active-light-ui: var(--cds-active-light-ui, #697077);
+ --selected-ui: var(--cds-selected-ui, #343a3f);
+ --selected-light-ui: var(--cds-selected-light-ui, #4d5358);
+ --inverse-hover-ui: var(--cds-inverse-hover-ui, #e0e4ea);
+ --hover-selected-ui: var(--cds-hover-selected-ui, #464c51);
+ --hover-danger: var(--cds-hover-danger, #b81921);
+ --active-danger: var(--cds-active-danger, #750e13);
+ --hover-row: var(--cds-hover-row, #2f353a);
+ --visited-link: var(--cds-visited-link, #be95ff);
+ --disabled-01: var(--cds-disabled-01, #21272a);
+ --disabled-02: var(--cds-disabled-02, #4d5358);
+ --disabled-03: var(--cds-disabled-03, #878d96);
+ --highlight: var(--cds-highlight, #002d9c);
+ --decorative-01: var(--cds-decorative-01, #4d5358);
+ --button-separator: var(--cds-button-separator, #121619);
+ --skeleton-01: var(--cds-skeleton-01, #2f353a);
+ --skeleton-02: var(--cds-skeleton-02, #4d5358);
+ --brand-01: var(--cds-brand-01, #0f62fe);
+ --brand-02: var(--cds-brand-02, #697077);
+ --brand-03: var(--cds-brand-03, #ffffff);
+ --active-01: var(--cds-active-01, #4d5358);
+ --hover-field: var(--cds-hover-field, #2f353a);
+ --danger: var(--cds-danger, #da1e28);
}
.security--shell__banner, .security--shell__banner:hover, .security--shell__banner:visited {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.security--shell__banner__container {
@@ -20554,14 +22268,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--shell__banner__icon {
- fill: var(--icon-03, #ffffff);
+ fill: var(--cds-icon-03, #ffffff);
}
.security--shell__banner__text {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
padding-left: 0.75rem;
max-width: 26.5rem;
overflow: hidden;
@@ -20574,7 +22288,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.security--shell__banner:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -20592,10 +22306,10 @@ li.bx--accordion__item--disabled:last-of-type {
.security--shell__skip-to-content__link.bx--skip-to-content:focus {
left: auto;
- border-color: var(--focus, #ffffff);
- background-color: var(--interactive-01, #0f62fe);
+ border-color: var(--cds-focus, #ffffff);
+ background-color: var(--cds-interactive-01, #0f62fe);
margin-top: 0.5rem;
- color: var(--text-04, #ffffff);
+ color: var(--cds-text-04, #ffffff);
}
@keyframes collapse-accordion {
@@ -20664,28 +22378,28 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--snippet--disabled,
.bx--snippet--disabled .bx--btn.bx--snippet-btn--expand {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--snippet--disabled .bx--snippet-btn--expand:hover,
.bx--snippet--disabled .bx--copy-btn:hover {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
cursor: not-allowed;
}
.bx--snippet--disabled .bx--snippet__icon,
.bx--snippet--disabled .bx--snippet-btn--expand .bx--icon-chevron--down {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--snippet code {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-01-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-01-font-size, 0.75rem);
+ font-weight: var(--cds-code-01-font-weight, 400);
+ line-height: var(--cds-code-01-line-height, 1.34);
+ letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
}
.bx--snippet--inline {
@@ -20699,8 +22413,8 @@ li.bx--accordion__item--disabled:last-of-type {
position: relative;
display: inline;
padding: 0;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
@@ -20713,15 +22427,15 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--inline:hover {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--snippet--inline:active {
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.bx--snippet--inline:focus {
- border: 2px solid var(--focus, #ffffff);
+ border: 2px solid var(--cds-focus, #ffffff);
outline: none;
}
@@ -20749,16 +22463,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: none;
box-sizing: content-box;
margin: auto;
@@ -20809,7 +22523,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--snippet--inline::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -20837,7 +22551,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--inline code {
- padding: 0 0.5rem;
+ padding: 0 var(--cds-spacing-03, 0.5rem);
}
.bx--snippet--inline.bx--snippet--no-copy {
@@ -20845,25 +22559,25 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--inline.bx--snippet--no-copy:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
cursor: auto;
}
.bx--snippet--light.bx--snippet--inline.bx--snippet--no-copy:hover {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
cursor: auto;
}
.bx--snippet--single {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-01-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-01-font-size, 0.75rem);
+ font-weight: var(--cds-code-01-font-weight, 400);
+ line-height: var(--cds-code-01-line-height, 1.34);
+ letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
position: relative;
width: 100%;
max-width: 48rem;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
display: flex;
align-items: center;
height: 2.5rem;
@@ -20894,7 +22608,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--single .bx--snippet-container:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -20905,12 +22619,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--single pre {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- padding-right: 0.5rem;
+ font-family: var(--cds-code-01-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-01-font-size, 0.75rem);
+ font-weight: var(--cds-code-01-font-weight, 400);
+ line-height: var(--cds-code-01-line-height, 1.34);
+ letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
+ padding-right: var(--cds-spacing-03, 0.5rem);
}
.bx--snippet--single pre,
@@ -20919,15 +22633,15 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--multi {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-01-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-01-font-size, 0.75rem);
+ font-weight: var(--cds-code-01-font-weight, 400);
+ line-height: var(--cds-code-01-line-height, 1.34);
+ letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
position: relative;
width: 100%;
max-width: 48rem;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
display: flex;
padding: 1rem;
}
@@ -20948,7 +22662,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--multi.bx--snippet--expand .bx--snippet-container {
- padding-bottom: 1rem;
+ padding-bottom: var(--cds-spacing-05, 1rem);
transition: max-height 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -20977,7 +22691,7 @@ li.bx--accordion__item--disabled:last-of-type {
right: 0;
width: 1rem;
height: 100%;
- background-image: linear-gradient(to right, rgba(var(--field-01, #262626), 0), var(--field-01, #262626));
+ background-image: linear-gradient(to right, rgba(var(--cds-field-01, #262626), 0), var(--cds-field-01, #262626));
content: \\"\\";
}
@@ -20989,7 +22703,7 @@ li.bx--accordion__item--disabled:last-of-type {
width: 1rem;
height: 1rem;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -21016,7 +22730,7 @@ li.bx--accordion__item--disabled:last-of-type {
height: 2.5rem;
padding: 0;
overflow: visible;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
border: none;
outline: none;
cursor: pointer;
@@ -21029,9 +22743,9 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet-button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--focus, #ffffff);
+ outline-color: var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -21041,25 +22755,25 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--multi .bx--snippet-button {
- top: 0.5rem;
- right: 0.5rem;
+ top: var(--cds-spacing-03, 0.5rem);
+ right: var(--cds-spacing-03, 0.5rem);
width: 2rem;
height: 2rem;
}
.bx--snippet-button:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.bx--snippet-button:active {
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.bx--btn--copy__feedback {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
font-family: \\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif;
top: 0.75rem;
right: 1.25rem;
@@ -21070,7 +22784,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--btn--copy__feedback::before,
.bx--btn--copy__feedback::after {
- background: var(--inverse-02, #f4f4f4);
+ background: var(--cds-inverse-02, #f4f4f4);
}
.bx--btn--copy__feedback::after {
@@ -21085,10 +22799,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet-btn--expand {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
font-family: \\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif;
position: absolute;
right: 0;
@@ -21096,9 +22810,9 @@ li.bx--accordion__item--disabled:last-of-type {
z-index: 10;
display: inline-flex;
align-items: center;
- padding: 0.5rem 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: 0;
}
@@ -21112,23 +22826,23 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet-btn--expand .bx--icon-chevron--down {
- margin-left: 0.5rem;
+ margin-left: var(--cds-spacing-03, 0.5rem);
transform: rotate(0deg);
transition: 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--text-01, #f4f4f4);
+ fill: var(--cds-text-01, #f4f4f4);
}
.bx--snippet-btn--expand:hover {
- color: var(--text-01, #f4f4f4);
- background: var(--hover-ui, #353535);
+ color: var(--cds-text-01, #f4f4f4);
+ background: var(--cds-hover-ui, #353535);
}
.bx--snippet-btn--expand:active {
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.bx--snippet-btn--expand:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border-color: transparent;
}
@@ -21148,26 +22862,26 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--snippet--light .bx--snippet-button,
.bx--snippet--light .bx--btn.bx--snippet-btn--expand,
.bx--snippet--light .bx--copy-btn {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--snippet--light.bx--snippet--inline:hover,
.bx--snippet--light .bx--snippet-button:hover,
.bx--snippet--light .bx--btn.bx--snippet-btn--expand:hover,
.bx--snippet--light .bx--copy-btn:hover {
- background-color: var(--hover-light-ui, #4c4c4c);
+ background-color: var(--cds-hover-light-ui, #4c4c4c);
}
.bx--snippet--light.bx--snippet--inline:active,
.bx--snippet--light .bx--snippet-button:active,
.bx--snippet--light .bx--btn.bx--snippet-btn--expand:active,
.bx--snippet--light .bx--copy-btn:active {
- background-color: var(--active-light-ui, #6f6f6f);
+ background-color: var(--cds-active-light-ui, #6f6f6f);
}
.bx--snippet--light.bx--snippet--single::after,
.bx--snippet--light.bx--snippet--multi .bx--snippet-container pre::after {
- background-image: linear-gradient(to right, rgba(var(--field-02, #393939), 0), var(--field-02, #393939));
+ background-image: linear-gradient(to right, rgba(var(--cds-field-02, #393939), 0), var(--cds-field-02, #393939));
}
.bx--snippet.bx--skeleton .bx--snippet-container {
@@ -21217,13 +22931,13 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--snippet__overflow-indicator--left {
order: 0;
margin-right: -1rem;
- background-image: linear-gradient(to left, transparent, var(--field-01, #262626));
+ background-image: linear-gradient(to left, transparent, var(--cds-field-01, #262626));
}
.bx--snippet__overflow-indicator--right {
order: 2;
margin-left: -1rem;
- background-image: linear-gradient(to right, transparent, var(--field-01, #262626));
+ background-image: linear-gradient(to right, transparent, var(--cds-field-01, #262626));
}
.bx--snippet--single .bx--snippet__overflow-indicator--right,
@@ -21246,20 +22960,20 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--snippet--light .bx--snippet__overflow-indicator--left {
- background-image: linear-gradient(to left, transparent, var(--field-02, #393939));
+ background-image: linear-gradient(to left, transparent, var(--cds-field-02, #393939));
}
.bx--snippet--light .bx--snippet__overflow-indicator--right {
- background-image: linear-gradient(to right, transparent, var(--field-02, #393939));
+ background-image: linear-gradient(to right, transparent, var(--cds-field-02, #393939));
}
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
.bx--snippet__overflow-indicator--left {
- background-image: linear-gradient(to left, rgba(var(--field-01, #262626), 0), var(--field-01, #262626));
+ background-image: linear-gradient(to left, rgba(var(--cds-field-01, #262626), 0), var(--cds-field-01, #262626));
}
.bx--snippet__overflow-indicator--right {
- background-image: linear-gradient(to right, rgba(var(--field-01, #262626), 0), var(--field-01, #262626));
+ background-image: linear-gradient(to right, rgba(var(--cds-field-01, #262626), 0), var(--cds-field-01, #262626));
}
}
}
@@ -21275,7 +22989,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--snippet.bx--skeleton span {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -21295,7 +23009,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -21362,19 +23076,19 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--btn--copy__feedback:focus {
- border: 2px solid var(--support-01, #fa4d56);
+ border: 2px solid var(--cds-support-01, #fa4d56);
}
.bx--btn--copy__feedback::before {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
top: 1.1rem;
z-index: 2;
- padding: 0.25rem;
- color: var(--inverse-01, #161616);
+ padding: var(--cds-spacing-02, 0.25rem);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
white-space: nowrap;
border-radius: 4px;
@@ -21389,8 +23103,8 @@ li.bx--accordion__item--disabled:last-of-type {
z-index: 1;
width: 0.6rem;
height: 0.6rem;
- border-right: 1px solid var(--inverse-02, #f4f4f4);
- border-bottom: 1px solid var(--inverse-02, #f4f4f4);
+ border-right: 1px solid var(--cds-inverse-02, #f4f4f4);
+ border-bottom: 1px solid var(--cds-inverse-02, #f4f4f4);
transform: rotate(-135deg);
content: \\"\\";
}
@@ -21399,7 +23113,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--btn--copy__feedback::after {
position: absolute;
display: block;
- background: var(--inverse-02, #f4f4f4);
+ background: var(--cds-inverse-02, #f4f4f4);
}
.bx--btn--copy__feedback--displayed {
@@ -21421,7 +23135,7 @@ li.bx--accordion__item--disabled:last-of-type {
width: 2.5rem;
height: 2.5rem;
padding: 0;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
border: none;
cursor: pointer;
}
@@ -21433,11 +23147,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--copy-btn:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--copy-btn:active {
- background-color: var(--active-ui, #525252);
+ background-color: var(--cds-active-ui, #525252);
}
.bx--copy-btn::before {
@@ -21458,16 +23172,16 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: 13rem;
height: auto;
padding: 0.1875rem 1rem;
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
font-weight: 400;
text-align: left;
- background-color: var(--inverse-02, #f4f4f4);
+ background-color: var(--cds-inverse-02, #f4f4f4);
border-radius: 0.125rem;
transform: translateX(-50%);
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: none;
box-sizing: content-box;
margin: auto;
@@ -21518,7 +23232,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--copy-btn::before {
bottom: -0.5rem;
- border-color: transparent transparent var(--inverse-02, #f4f4f4) transparent;
+ border-color: transparent transparent var(--cds-inverse-02, #f4f4f4) transparent;
border-width: 0 0.25rem 0.3125rem 0.25rem;
transform: translate(-50%, 100%);
}
@@ -21531,9 +23245,9 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--copy-btn:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--focus, #ffffff);
+ outline-color: var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -21562,11 +23276,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--combo-box:hover {
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--combo-box.bx--list-box--light:hover {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--combo-box .bx--text-input::-ms-clear {
@@ -21574,7 +23288,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--combo-box.bx--list-box--expanded .bx--text-input {
- border-bottom-color: var(--ui-03, #393939);
+ border-bottom-color: var(--cds-ui-03, #393939);
}
.bx--combo-box .bx--list-box__field,
@@ -21612,10 +23326,10 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
position: relative;
@@ -21625,14 +23339,14 @@ li.bx--accordion__item--disabled:last-of-type {
margin: 0;
padding: 0.5rem 1rem;
overflow: hidden;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
white-space: nowrap;
text-align: left;
text-decoration: none;
background-color: transparent;
border: none;
- border-top: 0.0625rem solid var(--ui-05, #f4f4f4);
- border-bottom: 0.0625rem solid var(--ui-05, #f4f4f4);
+ border-top: 0.0625rem solid var(--cds-ui-05, #f4f4f4);
+ border-bottom: 0.0625rem solid var(--cds-ui-05, #f4f4f4);
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -21644,8 +23358,8 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--content-switcher-btn:focus {
z-index: 3;
- border-color: var(--focus, #ffffff);
- box-shadow: inset 0 0 0 2px var(--focus, #ffffff), inset 0 0 0 3px var(--ui-01, #262626);
+ border-color: var(--cds-focus, #ffffff);
+ box-shadow: inset 0 0 0 2px var(--cds-focus, #ffffff), inset 0 0 0 3px var(--cds-ui-01, #262626);
}
@media screen and (prefers-contrast) {
@@ -21655,20 +23369,20 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--content-switcher-btn:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
cursor: pointer;
}
.bx--content-switcher-btn:hover, .bx--content-switcher-btn:active {
z-index: 3;
- color: var(--text-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--content-switcher-btn:disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
background-color: transparent;
- border-color: var(--disabled-02, #525252);
+ border-color: var(--cds-disabled-02, #525252);
}
.bx--content-switcher-btn:disabled:hover {
@@ -21676,17 +23390,17 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--content-switcher-btn:disabled:first-child, .bx--content-switcher-btn:disabled:last-child {
- border-color: var(--disabled-02, #525252);
+ border-color: var(--cds-disabled-02, #525252);
}
.bx--content-switcher-btn:first-child {
- border-left: 0.0625rem solid var(--ui-05, #f4f4f4);
+ border-left: 0.0625rem solid var(--cds-ui-05, #f4f4f4);
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.bx--content-switcher-btn:last-child {
- border-right: 0.0625rem solid var(--ui-05, #f4f4f4);
+ border-right: 0.0625rem solid var(--cds-ui-05, #f4f4f4);
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
@@ -21704,7 +23418,7 @@ li.bx--accordion__item--disabled:last-of-type {
display: block;
width: 0.0625rem;
height: 1rem;
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
content: \\"\\";
}
@@ -21723,7 +23437,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--content-switcher-btn:disabled::before,
.bx--content-switcher-btn:disabled:hover + .bx--content-switcher-btn:disabled::before {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--content-switcher-btn.bx--content-switcher--selected:disabled + .bx--content-switcher-btn::before,
@@ -21733,7 +23447,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--content-switcher__icon {
transition: fill 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--text-02, #c6c6c6);
+ fill: var(--cds-text-02, #c6c6c6);
}
.bx--content-switcher__icon + span {
@@ -21749,22 +23463,22 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--content-switcher-btn:hover .bx--content-switcher__icon,
.bx--content-switcher-btn:focus .bx--content-switcher__icon {
- fill: var(--text-01, #f4f4f4);
+ fill: var(--cds-text-01, #f4f4f4);
}
.bx--content-switcher-btn.bx--content-switcher--selected {
z-index: 3;
- color: var(--inverse-01, #161616);
- background-color: var(--ui-05, #f4f4f4);
+ color: var(--cds-inverse-01, #161616);
+ background-color: var(--cds-ui-05, #f4f4f4);
}
.bx--content-switcher-btn.bx--content-switcher--selected:disabled {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-03, #8d8d8d);
}
.bx--content-switcher-btn.bx--content-switcher--selected .bx--content-switcher__icon {
- fill: var(--inverse-01, #161616);
+ fill: var(--cds-inverse-01, #161616);
}
@keyframes hide-feedback {
@@ -21834,11 +23548,11 @@ li.bx--accordion__item--disabled:last-of-type {
border: none;
margin-top: -2px;
overflow: hidden;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.flatpickr-calendar.open:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -21902,15 +23616,15 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-month {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
height: 2.5rem;
display: flex;
align-items: center;
background-color: transparent;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
line-height: 1;
text-align: center;
}
@@ -21933,14 +23647,14 @@ li.bx--accordion__item--disabled:last-of-type {
height: 2.5rem;
width: 2.5rem;
padding: 0;
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
transform: scale(1, 1) /*rtl: scale(-1,1)*/;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
@media screen and (-ms-high-contrast: active), (prefers-contrast) {
@@ -21952,20 +23666,20 @@ li.bx--accordion__item--disabled:last-of-type {
.flatpickr-next-month.disabled svg,
.flatpickr-prev-month.disabled svg {
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
cursor: not-allowed;
}
.flatpickr-next-month.disabled:hover svg,
.flatpickr-prev-month.disabled:hover svg {
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.flatpickr-current-month {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
display: flex;
align-items: center;
justify-content: center;
@@ -21979,7 +23693,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-current-month .cur-month:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.numInputWrapper {
@@ -21988,7 +23702,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.numInputWrapper:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.numInputWrapper:hover .arrowUp,
@@ -22007,18 +23721,18 @@ li.bx--accordion__item--disabled:last-of-type {
padding: 0.25rem;
margin: 0;
border: none;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
font-size: inherit;
font-family: inherit;
font-weight: 600;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
cursor: default;
-moz-appearance: textfield;
/* Firefox */
}
.numInputWrapper .numInput:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -22028,8 +23742,8 @@ li.bx--accordion__item--disabled:last-of-type {
}
.numInputWrapper .numInput[disabled], .numInputWrapper .numInput[disabled]:hover {
- color: var(--disabled-02, #525252);
- background-color: var(--ui-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-ui-01, #262626);
pointer-events: none;
}
@@ -22040,11 +23754,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.numInput[disabled] ~ .arrowUp::after {
- border-bottom-color: var(--disabled-02, #525252);
+ border-bottom-color: var(--cds-disabled-02, #525252);
}
.numInput[disabled] ~ .arrowDown::after {
- border-top-color: var(--disabled-02, #525252);
+ border-top-color: var(--cds-disabled-02, #525252);
}
.numInputWrapper .arrowUp,
@@ -22072,14 +23786,14 @@ li.bx--accordion__item--disabled:last-of-type {
.numInputWrapper .arrowUp:hover::after,
.numInputWrapper .arrowDown:hover::after {
- border-bottom-color: var(--interactive-01, #0f62fe);
- border-top-color: var(--interactive-01, #0f62fe);
+ border-bottom-color: var(--cds-interactive-01, #0f62fe);
+ border-top-color: var(--cds-interactive-01, #0f62fe);
}
.numInputWrapper .arrowUp:active::after,
.numInputWrapper .arrowDown:active::after {
- border-bottom-color: var(--interactive-04, #4589ff);
- border-top-color: var(--interactive-04, #4589ff);
+ border-bottom-color: var(--cds-interactive-04, #4589ff);
+ border-top-color: var(--cds-interactive-04, #4589ff);
}
.numInputWrapper .arrowUp {
@@ -22088,7 +23802,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.numInputWrapper .arrowUp::after {
- border-bottom: 0.25rem solid var(--icon-01, #f4f4f4);
+ border-bottom: 0.25rem solid var(--cds-icon-01, #f4f4f4);
}
.numInputWrapper .arrowDown {
@@ -22096,7 +23810,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.numInputWrapper .arrowDown::after {
- border-top: 0.25rem solid var(--icon-01, #f4f4f4);
+ border-top: 0.25rem solid var(--cds-icon-01, #f4f4f4);
}
.flatpickr-weekdays {
@@ -22111,12 +23825,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-weekday {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
cursor: default;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
flex: 1;
}
@@ -22156,28 +23870,28 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-day {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
height: 2.5rem;
width: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
cursor: pointer;
transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.flatpickr-day:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.flatpickr-day:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- outline-color: var(--interactive-01, #0f62fe);
+ outline-color: var(--cds-interactive-01, #0f62fe);
}
@media screen and (prefers-contrast) {
@@ -22188,12 +23902,12 @@ li.bx--accordion__item--disabled:last-of-type {
.nextMonthDay,
.prevMonthDay {
- color: var(--text-05, #8d8d8d);
+ color: var(--cds-text-05, #8d8d8d);
}
.flatpickr-day.today {
position: relative;
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
font-weight: 600;
}
@@ -22206,7 +23920,7 @@ li.bx--accordion__item--disabled:last-of-type {
transform: translateX(-50%);
height: 0.25rem;
width: 0.25rem;
- background-color: var(--link-01, #78a9ff);
+ background-color: var(--cds-link-01, #78a9ff);
}
.flatpickr-day.today.no-border {
@@ -22214,7 +23928,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-day.today.selected {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -22229,17 +23943,17 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-day.inRange {
- background-color: var(--highlight, #002d9c);
- color: var(--text-01, #f4f4f4);
+ background-color: var(--cds-highlight, #002d9c);
+ color: var(--cds-text-01, #f4f4f4);
}
.flatpickr-day.selected {
- color: var(--text-04, #ffffff);
- background-color: var(--interactive-01, #0f62fe);
+ color: var(--cds-text-04, #ffffff);
+ background-color: var(--cds-interactive-01, #0f62fe);
}
.flatpickr-day.selected:focus {
- outline: 0.0625rem solid var(--ui-02, #393939);
+ outline: 0.0625rem solid var(--cds-ui-02, #393939);
outline-offset: -0.1875rem;
}
@@ -22250,9 +23964,9 @@ li.bx--accordion__item--disabled:last-of-type {
.flatpickr-day.startRange.inRange:not(.selected),
.flatpickr-day.endRange.inRange {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- background: var(--ui-01, #262626);
+ background: var(--cds-ui-01, #262626);
z-index: 3;
}
@@ -22264,10 +23978,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-day.endRange:hover {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
- background: var(--ui-01, #262626);
- color: var(--text-01, #f4f4f4);
+ background: var(--cds-ui-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
}
@media screen and (prefers-contrast) {
@@ -22277,13 +23991,13 @@ li.bx--accordion__item--disabled:last-of-type {
}
.flatpickr-day.endRange.inRange.selected {
- color: var(--text-04, #ffffff);
- background: var(--interactive-01, #0f62fe);
+ color: var(--cds-text-04, #ffffff);
+ background: var(--cds-interactive-01, #0f62fe);
}
.flatpickr-day.flatpickr-disabled {
cursor: not-allowed;
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.flatpickr-day.flatpickr-disabled:hover {
@@ -22364,7 +24078,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker--light .bx--date-picker__input {
- background: var(--field-02, #393939);
+ background: var(--cds-field-02, #393939);
}
.bx--date-picker ~ .bx--label {
@@ -22405,7 +24119,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker .bx--date-picker-input__wrapper--warn ~ .bx--form-requirement {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--date-picker__input {
@@ -22416,21 +24130,21 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-02-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-02-font-size, 0.875rem);
+ font-weight: var(--cds-code-02-font-weight, 400);
+ line-height: var(--cds-code-02-line-height, 1.43);
+ letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
outline: 2px solid transparent;
outline-offset: -2px;
position: relative;
display: block;
height: 2.5rem;
padding: 0 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
transition: 70ms cubic-bezier(0.2, 0, 0.38, 0.9) all;
}
@@ -22441,7 +24155,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker__input:focus, .bx--date-picker__input.bx--focused {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -22452,14 +24166,14 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker__input:disabled {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
border-bottom: 1px solid transparent;
cursor: not-allowed;
}
.bx--date-picker__input:disabled::placeholder {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--date-picker__input:disabled:hover {
@@ -22467,7 +24181,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker__input::placeholder {
- color: var(--text-05, #8d8d8d);
+ color: var(--cds-text-05, #8d8d8d);
opacity: 1;
}
@@ -22486,7 +24200,7 @@ li.bx--accordion__item--disabled:last-of-type {
z-index: 1;
transform: translateY(-50%);
cursor: pointer;
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -22501,7 +24215,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker__icon--warn {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--date-picker__icon--warn path:first-of-type {
@@ -22510,7 +24224,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--date-picker__icon--invalid {
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--date-picker__icon ~ .bx--date-picker__input {
@@ -22519,7 +24233,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--date-picker__input:disabled ~ .bx--date-picker__icon {
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--date-picker--range > .bx--date-picker-container:first-child {
@@ -22535,7 +24249,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--date-picker__input.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -22556,7 +24270,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -22577,7 +24291,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--date-picker.bx--skeleton .bx--label {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -22595,7 +24309,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -22609,84 +24323,84 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--date-picker__day.inRange,
.flatpickr-day.inRange {
- background: var(--selected-ui, #393939);
+ background: var(--cds-selected-ui, #393939);
}
.bx--date-picker__day.inRange:hover,
.flatpickr-day.inRange:hover {
- background: var(--hover-selected-ui, #4c4c4c);
+ background: var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--date-picker__day.selected,
.flatpickr-day.selected {
- background: var(--link-01, #78a9ff);
- color: var(--inverse-01, #161616);
+ background: var(--cds-link-01, #78a9ff);
+ color: var(--cds-inverse-01, #161616);
}
.bx--date-picker__day.selected,
.flatpickr-day.endRange.inRange.selected {
- background: var(--link-01, #78a9ff);
- color: var(--inverse-01, #161616);
+ background: var(--cds-link-01, #78a9ff);
+ color: var(--cds-inverse-01, #161616);
}
.flatpickr-current-month input.cur-year:disabled {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
}
.bx--date-picker__month .numInputWrapper .numInput:focus,
.flatpickr-month .numInputWrapper .numInput:focus,
.bx--date-picker__day:focus,
.flatpickr-day:focus {
- outline: 1px solid var(--interactive-04, #4589ff);
+ outline: 1px solid var(--cds-interactive-04, #4589ff);
}
.bx--date-picker__day.today,
.flatpickr-day.today {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--date-picker__day.today:after,
.flatpickr-day.today:after {
- background-color: var(--interactive-04, #4589ff);
+ background-color: var(--cds-interactive-04, #4589ff);
}
.bx--date-picker__day.today.selected,
.flatpickr-day.today.selected {
- color: var(--inverse-01, #161616);
+ color: var(--cds-inverse-01, #161616);
border: none;
}
.bx--date-picker__day.today.selected:after,
.flatpickr-day.today.selected:after {
- background-color: var(--inverse-01, #161616);
+ background-color: var(--cds-inverse-01, #161616);
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.flatpickr-prev-month svg:hover, .flatpickr-prev-month svg:focus, .flatpickr-prev-month svg:active,
.flatpickr-next-month svg:hover,
.flatpickr-next-month svg:focus,
.flatpickr-next-month svg:active {
- fill: var(--interactive-04, #4589ff);
+ fill: var(--cds-interactive-04, #4589ff);
}
.bx--date-picker__month .numInputWrapper span.arrowUp::after,
.bx--date-picker__month .numInputWrapper span.arrowDown::after,
.flatpickr-month .numInputWrapper span.arrowUp::after,
.flatpickr-month .numInputWrapper span.arrowDown::after {
- border-bottom-color: var(--icon-01, #f4f4f4);
- border-top-color: var(--icon-01, #f4f4f4);
+ border-bottom-color: var(--cds-icon-01, #f4f4f4);
+ border-top-color: var(--cds-icon-01, #f4f4f4);
}
.bx--date-picker__month .numInputWrapper span.arrowUp:hover::after,
.bx--date-picker__month .numInputWrapper span.arrowDown:hover::after,
.flatpickr-month .numInputWrapper span.arrowUp:hover::after,
.flatpickr-month .numInputWrapper span.arrowDown:hover::after {
- border-bottom-color: var(--interactive-04, #4589ff);
- border-top-color: var(--interactive-04, #4589ff);
+ border-bottom-color: var(--cds-interactive-04, #4589ff);
+ border-top-color: var(--cds-interactive-04, #4589ff);
}
@keyframes rotate {
@@ -22735,7 +24449,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--file--invalid {
margin-right: 0.5rem;
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--file--label {
@@ -22746,12 +24460,12 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
margin-bottom: 0.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--file--label *,
@@ -22761,7 +24475,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file--label--disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--file-input {
@@ -22788,7 +24502,7 @@ li.bx--accordion__item--disabled:last-of-type {
width: 100%;
max-width: 20rem;
margin-bottom: 0.5rem;
- color: var(--link-01, #78a9ff);
+ color: var(--cds-link-01, #78a9ff);
outline: 2px solid transparent;
outline-offset: -2px;
cursor: pointer;
@@ -22796,7 +24510,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file-browse-btn:focus, .bx--file-browse-btn:hover {
- outline: 2px solid var(--interactive-03, #ffffff);
+ outline: 2px solid var(--cds-interactive-03, #ffffff);
}
.bx--file-browse-btn:hover, .bx--file-browse-btn:focus, .bx--file-browse-btn:active, .bx--file-browse-btn:active:visited {
@@ -22804,23 +24518,23 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file-browse-btn:active {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--file-browse-btn--disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
text-decoration: none;
cursor: no-drop;
}
.bx--file-browse-btn--disabled:hover, .bx--file-browse-btn--disabled:focus {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
text-decoration: none;
outline: none;
}
.bx--file-browse-btn--disabled .bx--file__drop-container {
- border: 1px dashed var(--disabled-02, #525252);
+ border: 1px dashed var(--cds-disabled-02, #525252);
}
.bx--label-description {
@@ -22831,12 +24545,12 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-bottom: 1rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--label-description *,
@@ -22846,7 +24560,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--label-description--disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--file-btn ~ .bx--file-container {
@@ -22872,7 +24586,7 @@ li.bx--accordion__item--disabled:last-of-type {
min-height: 3rem;
margin-bottom: 0.5rem;
word-break: break-word;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
}
.bx--file__selected-file:last-child {
@@ -22891,10 +24605,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file__selected-file .bx--file-filename {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-left: 1rem;
overflow: hidden;
white-space: nowrap;
@@ -22918,11 +24632,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file__selected-file--invalid__wrapper {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
max-width: 20rem;
margin-bottom: 0.5rem;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
outline-width: 1px;
}
@@ -22933,7 +24647,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file__selected-file--invalid {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
padding: 0.75rem 0;
}
@@ -22954,7 +24668,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--file__selected-file--invalid .bx--form-requirement {
padding-top: 1rem;
- border-top: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
}
.bx--file__selected-file--invalid.bx--file__selected-file--sm .bx--form-requirement {
@@ -22967,37 +24681,37 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--file__selected-file--invalid .bx--form-requirement__title,
.bx--file__selected-file--invalid .bx--form-requirement__supplement {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
padding: 0 1rem;
}
.bx--file__selected-file--invalid .bx--form-requirement__title {
- color: var(--text-error, #ff8389);
+ color: var(--cds-text-error, #ff8389);
}
.bx--file__selected-file--invalid .bx--form-requirement__supplement {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--file__selected-file--invalid + .bx--form-requirement {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
display: block;
max-height: 12.5rem;
padding: 0.5rem 1rem;
overflow: visible;
- color: var(--text-error, #ff8389);
+ color: var(--cds-text-error, #ff8389);
font-weight: 400;
}
.bx--file__selected-file--invalid + .bx--form-requirement .bx--form-requirement__supplement {
padding-bottom: 0.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--file__state-container {
@@ -23009,16 +24723,16 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file__state-container .bx--loading__svg {
- stroke: var(--ui-05, #f4f4f4);
+ stroke: var(--cds-ui-05, #f4f4f4);
}
.bx--file__state-container .bx--file-complete {
cursor: pointer;
- fill: var(--interactive-04, #4589ff);
+ fill: var(--cds-interactive-04, #4589ff);
}
.bx--file__state-container .bx--file-complete:focus {
- outline: 1px solid var(--focus, #ffffff);
+ outline: 1px solid var(--cds-focus, #ffffff);
}
@media screen and (prefers-contrast) {
@@ -23029,13 +24743,13 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--file__state-container .bx--file-complete [data-icon-path=\\"inner-path\\"] {
opacity: 1;
- fill: var(--icon-03, #ffffff);
+ fill: var(--cds-icon-03, #ffffff);
}
.bx--file__state-container .bx--file-invalid {
width: 1rem;
height: 1rem;
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--file__state-container .bx--file-close {
@@ -23048,11 +24762,11 @@ li.bx--accordion__item--disabled:last-of-type {
background-color: transparent;
border: none;
cursor: pointer;
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--file__state-container .bx--file-close:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -23063,7 +24777,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--file__state-container .bx--file-close svg path {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -23083,12 +24797,12 @@ li.bx--accordion__item--disabled:last-of-type {
height: 6rem;
padding: 1rem;
overflow: hidden;
- border: 1px dashed var(--ui-04, #6f6f6f);
+ border: 1px dashed var(--cds-ui-04, #6f6f6f);
}
.bx--file__drop-container--drag-over {
background: none;
- outline: 2px solid var(--interactive-03, #ffffff);
+ outline: 2px solid var(--cds-interactive-03, #ffffff);
outline-offset: -2px;
}
@@ -23112,10 +24826,10 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
list-style: none;
}
@@ -23139,7 +24853,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--list__item {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--list--nested {
@@ -23243,7 +24957,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--modal.is-visible {
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
visibility: inherit;
opacity: 1;
transition: background-color 720ms cubic-bezier(0, 0, 0.3, 1), opacity 240ms cubic-bezier(0, 0, 0.3, 1), visibility 0ms linear;
@@ -23257,7 +24971,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal .bx--dropdown-list,
.bx--modal .bx--number input[type=\\"number\\"],
.bx--modal .bx--date-picker__input {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--modal.is-visible .bx--modal-container {
@@ -23275,7 +24989,7 @@ li.bx--accordion__item--disabled:last-of-type {
height: 100%;
max-height: 100%;
overflow: hidden;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
outline: 3px solid transparent;
outline-offset: -3px;
transform: translate3d(0, -24px, 0);
@@ -23296,7 +25010,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-right: 20%;
}
.bx--modal-container .bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
}
@@ -23315,17 +25029,17 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal-header,
.bx--modal-content {
- padding-left: 1rem;
+ padding-left: var(--cds-spacing-05, 1rem);
}
.bx--modal-header,
.bx--modal-content,
.bx--modal-content__regular-content {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
.bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
.bx--modal-container--xs .bx--modal-header {
@@ -23335,7 +25049,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal-container--xs .bx--modal-content,
.bx--modal-container--xs .bx--modal-content__regular-content,
.bx--modal-container--xs .bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
@media (min-width: 42rem) {
@@ -23364,7 +25078,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal-container--sm .bx--modal-content,
.bx--modal-container--sm .bx--modal-content__regular-content,
.bx--modal-container--sm .bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
@media (min-width: 42rem) {
@@ -23390,7 +25104,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-right: 20%;
}
.bx--modal-container--sm .bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
}
@@ -23401,7 +25115,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal-container--lg .bx--modal-content,
.bx--modal-container--lg .bx--modal-content__regular-content,
.bx--modal-container--lg .bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
@media (min-width: 42rem) {
@@ -23414,7 +25128,7 @@ li.bx--accordion__item--disabled:last-of-type {
padding-right: 20%;
}
.bx--modal-container--lg .bx--modal-content--with-form {
- padding-right: 1rem;
+ padding-right: var(--cds-spacing-05, 1rem);
}
}
@@ -23434,45 +25148,45 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal-header {
grid-row: 1/1;
grid-column: 1/-1;
- margin-bottom: 0.5rem;
- padding-top: 1rem;
- padding-right: 3rem;
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
+ padding-top: var(--cds-spacing-05, 1rem);
+ padding-right: var(--cds-spacing-09, 3rem);
}
.bx--modal-header__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
- margin-bottom: 0.25rem;
- color: var(--text-02, #c6c6c6);
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+ margin-bottom: var(--cds-spacing-02, 0.25rem);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--modal-header__heading {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
- color: var(--text-01, #f4f4f4);
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--modal-content {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
position: relative;
grid-row: 2/-2;
grid-column: 1/-1;
- margin-bottom: 3rem;
- padding-top: 0.5rem;
+ margin-bottom: var(--cds-spacing-09, 3rem);
+ padding-top: var(--cds-spacing-03, 0.5rem);
overflow-y: auto;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
font-weight: 400;
}
.bx--modal-content:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -23483,25 +25197,25 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--modal-content > p {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
}
.bx--modal-scroll-content > *:last-child {
- padding-bottom: 2rem;
+ padding-bottom: var(--cds-spacing-07, 2rem);
}
.bx--modal-content--overflow-indicator {
position: absolute;
- bottom: 3rem;
+ bottom: var(--cds-spacing-09, 3rem);
left: 0;
grid-row: 2/-2;
grid-column: 1/-1;
width: 100%;
height: 2rem;
- background-image: linear-gradient(to bottom, rgba(var(--ui-01, #262626), 0), var(--ui-01, #262626));
+ background-image: linear-gradient(to bottom, rgba(var(--cds-ui-01, #262626), 0), var(--cds-ui-01, #262626));
content: \\"\\";
pointer-events: none;
}
@@ -23534,8 +25248,8 @@ li.bx--accordion__item--disabled:last-of-type {
max-width: none;
height: 4rem;
margin: 0;
- padding-top: 1rem;
- padding-bottom: 2rem;
+ padding-top: var(--cds-spacing-05, 1rem);
+ padding-bottom: var(--cds-spacing-07, 2rem);
}
.bx--modal-footer--three-button .bx--btn {
@@ -23565,11 +25279,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--modal-close:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--modal-close:focus {
- border-color: var(--focus, #ffffff);
+ border-color: var(--cds-focus, #ffffff);
outline: none;
}
@@ -23586,7 +25300,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--modal-close__icon {
width: 1.25rem;
height: 1.25rem;
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -23624,10 +25338,10 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number input[type=\\"number\\"] {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
display: inline-flex;
@@ -23637,19 +25351,19 @@ li.bx--accordion__item--disabled:last-of-type {
height: 2.5rem;
padding-right: 8rem;
padding-left: 1rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
font-weight: 300;
font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
border: 0;
- border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f);
+ border-bottom: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
border-radius: 0;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
-moz-appearance: textfield;
}
.bx--number input[type=\\"number\\"]:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -23665,7 +25379,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number input[type=\\"number\\"]:disabled ~ .bx--number__controls svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--number input[type=\\"number\\"]::-ms-clear {
@@ -23686,8 +25400,8 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--number input[type=\\"number\\"]:disabled,
.bx--number--readonly input[type=\\"number\\"] {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
border-bottom-color: transparent;
cursor: not-allowed;
}
@@ -23751,8 +25465,8 @@ li.bx--accordion__item--disabled:last-of-type {
align-items: center;
justify-content: center;
height: 100%;
- color: var(--icon-01, #f4f4f4);
- border-bottom: 0.0625rem solid var(--ui-04, #6f6f6f);
+ color: var(--cds-icon-01, #f4f4f4);
+ border-bottom: 0.0625rem solid var(--cds-ui-04, #6f6f6f);
}
.bx--number__control-btn *,
@@ -23771,7 +25485,7 @@ li.bx--accordion__item--disabled:last-of-type {
display: block;
width: 0.125rem;
height: 2.25rem;
- background-color: var(--field-01, #262626);
+ background-color: var(--cds-field-01, #262626);
content: \\"\\";
}
@@ -23788,8 +25502,8 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number__control-btn:focus {
- outline: 1px solid var(--focus, #ffffff);
- color: var(--icon-01, #f4f4f4);
+ outline: 1px solid var(--cds-focus, #ffffff);
+ color: var(--cds-icon-01, #f4f4f4);
outline-width: 2px;
outline-offset: -2px;
}
@@ -23801,13 +25515,13 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number__control-btn:hover {
- color: var(--icon-01, #f4f4f4);
- background-color: var(--hover-ui, #353535);
+ color: var(--cds-icon-01, #f4f4f4);
+ background-color: var(--cds-hover-ui, #353535);
cursor: pointer;
}
.bx--number__control-btn:hover::before, .bx--number__control-btn:hover::after {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--number__control-btn:focus::before, .bx--number__control-btn:focus::after, .bx--number__control-btn:hover:focus::before, .bx--number__control-btn:hover:focus::after {
@@ -23815,7 +25529,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number__control-btn:disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
border-bottom-color: transparent;
cursor: not-allowed;
}
@@ -23833,7 +25547,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number input[type=\\"number\\"]:focus ~ .bx--number__controls .bx--number__control-btn:hover {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border: 0;
}
@@ -23849,7 +25563,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number input[type=\\"number\\"][data-invalid]:not(:focus) ~ .bx--number__controls .bx--number__control-btn:hover {
- outline: 2px solid var(--support-01, #fa4d56);
+ outline: 2px solid var(--cds-support-01, #fa4d56);
outline-offset: -2px;
}
@@ -23864,12 +25578,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number input[type=\\"number\\"][data-invalid] ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
- background-color: var(--support-01, #fa4d56);
+ background-color: var(--cds-support-01, #fa4d56);
}
.bx--number input[type=\\"number\\"][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after,
.bx--number input[type=\\"number\\"][data-invalid] ~ .bx--number__controls .bx--number__control-btn.up-icon:focus::after {
- background-color: var(--focus, #ffffff);
+ background-color: var(--cds-focus, #ffffff);
}
.bx--number__rule-divider {
@@ -23877,7 +25591,7 @@ li.bx--accordion__item--disabled:last-of-type {
z-index: 6000;
width: 0.0625rem;
height: 1rem;
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--number__rule-divider:first-of-type {
@@ -23890,12 +25604,12 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number__invalid + .bx--number__controls .bx--number__rule-divider:first-of-type {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--number--light .bx--number__rule-divider,
.bx--number--light .bx--number__invalid + .bx--number__controls .bx--number__rule-divider:first-of-type {
- background-color: var(--decorative-01, #525252);
+ background-color: var(--cds-decorative-01, #525252);
}
.bx--number input[type=\\"number\\"]:disabled + .bx--number__controls .bx--number__rule-divider:first-of-type {
@@ -23903,7 +25617,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number input[type=\\"number\\"]:disabled + .bx--number__controls .bx--number__rule-divider {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--number__control-btn:focus ~ .bx--number__rule-divider {
@@ -23917,7 +25631,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--number__invalid {
position: absolute;
right: 6rem;
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--number--xl .bx--number__invalid {
@@ -23949,7 +25663,7 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number__invalid--warning {
- fill: var(--support-03, #f1c21b);
+ fill: var(--cds-support-03, #f1c21b);
}
.bx--number__invalid--warning path:first-of-type {
@@ -23958,17 +25672,17 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--number--light input[type=\\"number\\"] {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--number--light input[type=\\"number\\"]:disabled,
.bx--number--light .bx--number--readonly input[type=\\"number\\"] {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--number--light .bx--number__control-btn::before,
.bx--number--light .bx--number__control-btn::after {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--number--light .bx--number__control-btn:focus::before,
@@ -23979,7 +25693,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--number--light .bx--number__control-btn:hover,
.bx--number--light .bx--number__control-btn:hover::before,
.bx--number--light .bx--number__control-btn:hover::after {
- background-color: var(--hover-light-ui, #4c4c4c);
+ background-color: var(--cds-hover-light-ui, #4c4c4c);
}
.bx--number--xl input[type=\\"number\\"] {
@@ -24021,7 +25735,7 @@ li.bx--accordion__item--disabled:last-of-type {
.bx--number.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -24039,7 +25753,7 @@ li.bx--accordion__item--disabled:last-of-type {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -24067,18 +25781,18 @@ li.bx--accordion__item--disabled:last-of-type {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 1px);
min-height: 3rem;
overflow-x: auto;
- background-color: var(--ui-01, #262626);
- border-top: 1px solid var(--ui-03, #393939);
+ background-color: var(--cds-ui-01, #262626);
+ border-top: 1px solid var(--cds-ui-03, #393939);
}
.bx--pagination *,
@@ -24120,18 +25834,18 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--pagination .bx--select-input {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
width: auto;
min-width: auto;
height: 3rem;
- padding: 0 2.25rem 0 1rem;
+ padding: 0 2.25rem 0 var(--cds-spacing-05, 1rem);
}
.bx--pagination .bx--select-input:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.bx--pagination .bx--select__arrow {
@@ -24140,11 +25854,11 @@ li.bx--accordion__item--disabled:last-of-type {
}
.bx--pagination .bx--select__item-count .bx--select-input {
- border-right: 0.0625rem solid var(--ui-03, #393939);
+ border-right: 0.0625rem solid var(--cds-ui-03, #393939);
}
.bx--pagination .bx--select__page-number .bx--select-input {
- border-left: 1px solid var(--ui-03, #393939);
+ border-left: 1px solid var(--cds-ui-03, #393939);
}
.bx--pagination__left,
@@ -24191,7 +25905,7 @@ li.bx--accordion__item--disabled:last-of-type {
span.bx--pagination__text {
margin-left: 1rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--pagination__button,
@@ -24211,10 +25925,10 @@ span.bx--pagination__text {
margin: 0;
background: none;
border: none;
- border-left: 1px solid var(--ui-03, #393939);
+ border-left: 1px solid var(--cds-ui-03, #393939);
cursor: pointer;
transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.bx--pagination__button *,
@@ -24235,7 +25949,7 @@ span.bx--pagination__text {
.bx--pagination__button:focus,
.bx--btn--ghost:focus.bx--pagination__button {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
border-left: 0;
}
@@ -24249,23 +25963,23 @@ span.bx--pagination__text {
.bx--pagination__button:hover,
.bx--btn--ghost:hover.bx--pagination__button {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.bx--pagination__button--no-index,
.bx--btn--ghost.bx--pagination__button--no-index {
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--pagination__button:disabled:hover,
.bx--pagination__button--no-index:hover,
.bx--btn--ghost:disabled:hover.bx--pagination__button,
.bx--btn--ghost:hover.bx--pagination__button--no-index {
- background: var(--ui-01, #262626);
- border-color: var(--ui-03, #393939);
+ background: var(--cds-ui-01, #262626);
+ border-color: var(--cds-ui-03, #393939);
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--pagination.bx--skeleton .bx--skeleton__text {
@@ -24315,10 +26029,10 @@ span.bx--pagination__text {
}
.bx--radio-button__label {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
align-items: center;
margin-right: 1rem;
@@ -24338,7 +26052,7 @@ span.bx--pagination__text {
height: 1.125rem;
margin: 0.125rem 0.5rem 0.125rem 0.125rem;
background-color: transparent;
- border: 1px solid var(--icon-01, #f4f4f4);
+ border: 1px solid var(--cds-icon-01, #f4f4f4);
border-radius: 50%;
}
@@ -24352,7 +26066,7 @@ span.bx--pagination__text {
display: flex;
align-items: center;
justify-content: center;
- border-color: var(--icon-01, #f4f4f4);
+ border-color: var(--cds-icon-01, #f4f4f4);
}
.bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
@@ -24360,7 +26074,7 @@ span.bx--pagination__text {
display: inline-block;
width: 100%;
height: 100%;
- background-color: var(--icon-01, #f4f4f4);
+ background-color: var(--cds-icon-01, #f4f4f4);
border-radius: 50%;
transform: scale(0.5);
content: \\"\\";
@@ -24379,29 +26093,29 @@ span.bx--pagination__text {
}
.bx--radio-button:disabled + .bx--radio-button__label {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
cursor: not-allowed;
}
.bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance,
.bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance {
- border-color: var(--disabled-02, #525252);
+ border-color: var(--cds-disabled-02, #525252);
}
.bx--radio-button:disabled + .bx--radio-button__label .bx--radio-button__appearance::before,
.bx--radio-button:disabled:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--radio-button:focus + .bx--radio-button__label .bx--radio-button__appearance {
outline: 1px solid transparent;
- box-shadow: 0 0 0 2px var(--focus, #ffffff);
+ box-shadow: 0 0 0 2px var(--cds-focus, #ffffff);
}
.bx--radio-button__label.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -24419,7 +26133,7 @@ span.bx--pagination__text {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -24482,12 +26196,12 @@ span.bx--pagination__text {
}
.bx--slider__range-label {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.32px;
- color: var(--text-01, #f4f4f4);
+ font-family: var(--cds-code-02-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-02-font-size, 0.875rem);
+ font-weight: var(--cds-code-02-font-weight, 400);
+ line-height: var(--cds-code-02-line-height, 1.43);
+ letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
+ color: var(--cds-text-01, #f4f4f4);
white-space: nowrap;
}
@@ -24499,7 +26213,7 @@ span.bx--pagination__text {
position: absolute;
width: 100%;
height: 0.125rem;
- background: var(--ui-03, #393939);
+ background: var(--cds-ui-03, #393939);
transform: translate(0%, -50%);
cursor: pointer;
}
@@ -24517,7 +26231,7 @@ span.bx--pagination__text {
display: inline-block;
width: 0.125rem;
height: 0.25rem;
- background: var(--ui-03, #393939);
+ background: var(--cds-ui-03, #393939);
transform: translate(-50%, 0);
content: \\"\\";
}
@@ -24526,7 +26240,7 @@ span.bx--pagination__text {
position: absolute;
width: 100%;
height: 0.125rem;
- background: var(--ui-05, #f4f4f4);
+ background: var(--cds-ui-05, #f4f4f4);
transform: translate(0%, -50%);
transform-origin: left;
transition: background 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -24545,7 +26259,7 @@ span.bx--pagination__text {
z-index: 3;
width: 0.875rem;
height: 0.875rem;
- background: var(--ui-05, #f4f4f4);
+ background: var(--cds-ui-05, #f4f4f4);
border-radius: 50%;
outline: none;
box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
@@ -24559,8 +26273,8 @@ span.bx--pagination__text {
}
.bx--slider__thumb:focus {
- background-color: var(--interactive-04, #4589ff);
- box-shadow: inset 0 0 0 2px var(--interactive-04, #4589ff), inset 0 0 0 3px var(--ui-01, #262626);
+ background-color: var(--cds-interactive-04, #4589ff);
+ box-shadow: inset 0 0 0 2px var(--cds-interactive-04, #4589ff), inset 0 0 0 3px var(--cds-ui-01, #262626);
transform: translate(-50%, -50%) scale(1.4286);
}
@@ -24571,7 +26285,7 @@ span.bx--pagination__text {
}
.bx--slider__thumb:active {
- box-shadow: inset 0 0 0 2px var(--interactive-04, #4589ff);
+ box-shadow: inset 0 0 0 2px var(--cds-interactive-04, #4589ff);
transform: translate(-50%, -50%) scale(1.4286);
}
@@ -24600,15 +26314,15 @@ span.bx--pagination__text {
}
.bx--slider__thumb:focus ~ .bx--slider__filled-track {
- background-color: var(--interactive-04, #4589ff);
+ background-color: var(--cds-interactive-04, #4589ff);
}
.bx--label--disabled ~ .bx--slider-container > .bx--slider__range-label {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--slider--disabled .bx--slider__thumb {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--slider--disabled .bx--slider__thumb:hover {
@@ -24617,28 +26331,28 @@ span.bx--pagination__text {
}
.bx--slider--disabled .bx--slider__thumb:focus {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
outline: none;
box-shadow: none;
transform: translate(-50%, -50%);
}
.bx--slider--disabled .bx--slider__thumb:active {
- background: var(--ui-03, #393939);
+ background: var(--cds-ui-03, #393939);
transform: translate(-50%, -50%);
}
.bx--slider--disabled .bx--slider__track,
.bx--slider--disabled .bx--slider__filled-track,
.bx--slider--disabled .bx--slider__thumb:focus ~ .bx--slider__filled-track {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
cursor: not-allowed;
}
.bx--slider--disabled ~ .bx--form-item .bx--slider-text-input,
.bx--slider--disabled ~ .bx--slider-text-input {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
border: none;
cursor: not-allowed;
transition: none;
@@ -24648,14 +26362,14 @@ span.bx--pagination__text {
.bx--slider--disabled ~ .bx--slider-text-input:active,
.bx--slider--disabled ~ .bx--slider-text-input:focus,
.bx--slider--disabled ~ .bx--slider-text-input:hover {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
outline: none;
}
.bx--slider-container.bx--skeleton .bx--slider__range-label {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -24673,7 +26387,7 @@ span.bx--pagination__text {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -24704,14 +26418,14 @@ span.bx--pagination__text {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
width: 100%;
height: auto;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--tabs *,
@@ -24738,10 +26452,10 @@ span.bx--pagination__text {
align-items: center;
justify-content: space-between;
height: 2.5rem;
- padding: 0 3rem 0 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ padding: 0 var(--cds-spacing-09, 3rem) 0 var(--cds-spacing-05, 1rem);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
outline: 2px solid transparent;
cursor: pointer;
}
@@ -24754,7 +26468,7 @@ span.bx--pagination__text {
.bx--tabs-trigger:focus,
.bx--tabs-trigger:active {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -24767,9 +26481,9 @@ span.bx--pagination__text {
.bx--tabs-trigger svg {
position: absolute;
- right: 1rem;
+ right: var(--cds-spacing-05, 1rem);
transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
.bx--tabs-trigger--open:focus,
@@ -24780,7 +26494,7 @@ span.bx--pagination__text {
}
.bx--tabs-trigger--open {
- background: var(--ui-03, #393939);
+ background: var(--cds-ui-03, #393939);
}
.bx--tabs-trigger--open svg {
@@ -24790,13 +26504,13 @@ span.bx--pagination__text {
}
.bx--tabs--light.bx--tabs-trigger {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--tabs-trigger-text {
padding-top: 2px;
overflow: hidden;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
font-weight: 400;
white-space: nowrap;
text-decoration: none;
@@ -24804,7 +26518,7 @@ span.bx--pagination__text {
}
.bx--tabs-trigger-text:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--tabs-trigger-text:focus {
@@ -24822,7 +26536,7 @@ span.bx--pagination__text {
margin: 0;
padding: 0;
list-style: none;
- background: var(--ui-01, #262626);
+ background: var(--cds-ui-01, #262626);
transition: max-height 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -24865,7 +26579,7 @@ span.bx--pagination__text {
width: 100%;
height: 2.5rem;
padding: 0;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
cursor: pointer;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -24888,11 +26602,11 @@ span.bx--pagination__text {
@media (min-width: 42rem) {
.bx--tabs--container .bx--tabs__nav-item {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--tabs--container .bx--tabs__nav-item + .bx--tabs__nav-item {
margin-left: 0;
- box-shadow: -1px 0 0 0 var(--ui-04, #6f6f6f);
+ box-shadow: -1px 0 0 0 var(--cds-ui-04, #6f6f6f);
}
.bx--tabs--container .bx--tabs__nav-item + .bx--tabs__nav-item.bx--tabs__nav-item--selected,
.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--selected + .bx--tabs__nav-item {
@@ -24911,8 +26625,8 @@ span.bx--pagination__text {
}
.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled) {
- background-color: var(--hover-ui, #353535);
- box-shadow: 0 -1px 0 var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
+ box-shadow: 0 -1px 0 var(--cds-hover-ui, #353535);
}
@media (min-width: 42rem) {
@@ -24926,7 +26640,7 @@ span.bx--pagination__text {
@media (min-width: 42rem) {
.bx--tabs--container .bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled) {
- background-color: var(--hover-selected-ui, #4c4c4c);
+ background-color: var(--cds-hover-selected-ui, #4c4c4c);
}
}
@@ -24939,13 +26653,13 @@ span.bx--pagination__text {
@media (min-width: 42rem) {
.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--disabled,
.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--disabled:hover {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
}
@media (min-width: 42rem) {
.bx--tabs--container .bx--tabs__nav-item--disabled .bx--tabs__nav-link {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
border-bottom: none;
}
}
@@ -24963,26 +26677,26 @@ span.bx--pagination__text {
.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,
.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus,
.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--text-01, #f4f4f4);
- border-bottom: 2px solid var(--interactive-04, #4589ff);
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+ color: var(--cds-text-01, #f4f4f4);
+ border-bottom: 2px solid var(--cds-interactive-04, #4589ff);
}
}
@media (min-width: 42rem) {
.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled),
.bx--tabs--container .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) {
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,
.bx--tabs--container .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link {
- padding: 0.5rem 1rem;
- line-height: calc(3rem - (0.5rem * 2));
+ padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
+ line-height: calc(3rem - (var(--cds-spacing-03, 0.5rem) * 2));
border-bottom: none;
- box-shadow: inset 0 2px 0 0 var(--interactive-04, #4589ff);
+ box-shadow: inset 0 2px 0 0 var(--cds-interactive-04, #4589ff);
}
.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus,
.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active,
@@ -24998,21 +26712,21 @@ a.bx--tabs__nav-link {
display: inline-block;
width: calc(100% - 32px);
height: 2.5rem;
- margin: 0 1rem;
- padding: 0.75rem 0;
+ margin: 0 var(--cds-spacing-05, 1rem);
+ padding: var(--cds-spacing-04, 0.75rem) 0;
overflow: hidden;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
font-weight: 400;
line-height: 1rem;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
- border-bottom: 1px solid var(--ui-03, #393939);
+ border-bottom: 1px solid var(--cds-ui-03, #393939);
transition: border 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
width: 100%;
margin: 0;
@@ -25029,9 +26743,9 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
a.bx--tabs__nav-link {
width: 10rem;
margin: 0;
- padding: 0.75rem 1rem 0.5rem;
+ padding: var(--cds-spacing-04, 0.75rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem);
line-height: inherit;
- border-bottom: 2px solid var(--ui-03, #393939);
+ border-bottom: 2px solid var(--cds-ui-03, #393939);
}
a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
width: 10rem;
@@ -25042,20 +26756,20 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
@media (min-width: 42rem) {
.bx--tabs--container a.bx--tabs__nav-link {
height: 3rem;
- padding: 0.5rem 1rem;
- line-height: calc(3rem - (0.5rem * 2));
+ padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
+ line-height: calc(3rem - (var(--cds-spacing-03, 0.5rem) * 2));
border-bottom: none;
}
}
.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
@media (min-width: 42rem) {
.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link {
- color: var(--text-01, #f4f4f4);
- border-bottom: 2px solid var(--ui-04, #6f6f6f);
+ color: var(--cds-text-01, #f4f4f4);
+ border-bottom: 2px solid var(--cds-ui-04, #6f6f6f);
}
}
@@ -25066,25 +26780,25 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs__nav-item--disabled .bx--tabs__nav-link {
- color: var(--disabled-02, #525252);
- border-bottom: 2px solid var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ border-bottom: 2px solid var(--cds-disabled-01, #262626);
pointer-events: none;
}
.bx--tabs__nav-item--disabled:hover .bx--tabs__nav-link {
- border-bottom: 2px solid var(--disabled-01, #262626);
+ border-bottom: 2px solid var(--cds-disabled-01, #262626);
cursor: no-drop;
}
.bx--tabs__nav-item--disabled .bx--tabs__nav-link:focus,
.bx--tabs__nav-item--disabled a.bx--tabs__nav-link:active {
- border-bottom: 2px solid var(--disabled-01, #262626);
+ border-bottom: 2px solid var(--cds-disabled-01, #262626);
outline: none;
}
.bx--tabs__nav-item:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected) .bx--tabs__nav-link:focus,
.bx--tabs__nav-item:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected) a.bx--tabs__nav-link:active {
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
.bx--tab-content {
@@ -25097,7 +26811,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--skeleton.bx--tabs--scrollable:not(.bx--tabs--scrollable--container) .bx--tabs--scrollable__nav-item {
- border-bottom: 2px solid var(--skeleton-02, #525252);
+ border-bottom: 2px solid var(--cds-skeleton-02, #525252);
}
.bx--tabs.bx--skeleton .bx--tabs__nav-link {
@@ -25111,7 +26825,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs.bx--skeleton .bx--tabs__nav-link span {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -25130,7 +26844,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -25145,7 +26859,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs.bx--skeleton .bx--tabs-trigger {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -25162,7 +26876,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -25195,15 +26909,15 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
width: 100%;
height: auto;
min-height: 2.5rem;
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
}
.bx--tabs--scrollable *,
@@ -25243,43 +26957,43 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable .bx--tabs__overflow-indicator--left {
margin-right: -0.5rem;
- background-image: linear-gradient(to left, transparent, var(--ui-background, #161616));
+ background-image: linear-gradient(to left, transparent, var(--cds-ui-background, #161616));
}
.bx--tabs--scrollable .bx--tabs__overflow-indicator--right {
margin-left: -0.5rem;
- background-image: linear-gradient(to right, transparent, var(--ui-background, #161616));
+ background-image: linear-gradient(to right, transparent, var(--cds-ui-background, #161616));
}
.bx--tabs--scrollable .bx--tabs--scrollable--light .bx--tabs__overflow-indicator--left {
- background-image: linear-gradient(to left, transparent, var(--ui-01, #262626));
+ background-image: linear-gradient(to left, transparent, var(--cds-ui-01, #262626));
}
.bx--tabs--scrollable .bx--tabs--scrollable--light .bx--tabs__overflow-indicator--right {
- background-image: linear-gradient(to right, transparent, var(--ui-01, #262626));
+ background-image: linear-gradient(to right, transparent, var(--cds-ui-01, #262626));
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs__overflow-indicator--left {
- background-image: linear-gradient(to left, transparent, var(--ui-03, #393939));
+ background-image: linear-gradient(to left, transparent, var(--cds-ui-03, #393939));
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs__overflow-indicator--right {
- background-image: linear-gradient(to right, transparent, var(--ui-03, #393939));
+ background-image: linear-gradient(to right, transparent, var(--cds-ui-03, #393939));
}
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
.bx--tabs--scrollable .bx--tabs__overflow-indicator--left {
- background-image: linear-gradient(to left, rgba(var(--ui-background, #161616), 0), var(--ui-background, #161616));
+ background-image: linear-gradient(to left, rgba(var(--cds-ui-background, #161616), 0), var(--cds-ui-background, #161616));
}
.bx--tabs--scrollable .bx--tabs__overflow-indicator--right {
- background-image: linear-gradient(to right, rgba(var(--ui-background, #161616), 0), var(--ui-background, #161616));
+ background-image: linear-gradient(to right, rgba(var(--cds-ui-background, #161616), 0), var(--cds-ui-background, #161616));
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs__overflow-indicator--left {
- background-image: linear-gradient(to left, rgba(var(--ui-03, #393939), 0), var(--ui-03, #393939));
+ background-image: linear-gradient(to left, rgba(var(--cds-ui-03, #393939), 0), var(--cds-ui-03, #393939));
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs__overflow-indicator--right {
- background-image: linear-gradient(to right, rgba(var(--ui-03, #393939), 0), var(--ui-03, #393939));
+ background-image: linear-gradient(to right, rgba(var(--cds-ui-03, #393939), 0), var(--cds-ui-03, #393939));
}
}
}
@@ -25317,7 +27031,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs--scrollable .bx--tab--overflow-nav-button:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -25334,11 +27048,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tab--overflow-nav-button {
width: 3rem;
margin: 0;
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--tabs--scrollable .bx--tab--overflow-nav-button svg {
- fill: var(--icon-01, #f4f4f4);
+ fill: var(--cds-icon-01, #f4f4f4);
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item {
@@ -25366,12 +27080,12 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item {
- background-color: var(--ui-03, #393939);
+ background-color: var(--cds-ui-03, #393939);
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item + .bx--tabs--scrollable__nav-item {
margin-left: 0;
- box-shadow: -0.0625rem 0 0 0 var(--ui-04, #6f6f6f);
+ box-shadow: -0.0625rem 0 0 0 var(--cds-ui-04, #6f6f6f);
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item + .bx--tabs--scrollable__nav-item.bx--tabs--scrollable__nav-item--selected,
@@ -25384,7 +27098,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item:hover {
- background-color: var(--hover-selected-ui, #4c4c4c);
+ background-color: var(--cds-hover-selected-ui, #4c4c4c);
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled,
@@ -25396,7 +27110,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item.bx--tabs--scrollable__nav-item--disabled,
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item.bx--tabs--scrollable__nav-item--disabled:hover {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--selected {
@@ -25406,17 +27120,17 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--selected .bx--tabs--scrollable__nav-link,
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--selected .bx--tabs--scrollable__nav-link:focus,
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--selected .bx--tabs--scrollable__nav-link:active {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--text-01, #f4f4f4);
- border-bottom: 2px solid var(--interactive-04, #4589ff);
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
+ color: var(--cds-text-01, #f4f4f4);
+ border-bottom: 2px solid var(--cds-interactive-04, #4589ff);
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--selected,
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--selected:hover {
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--selected .bx--tabs--scrollable__nav-link:focus,
@@ -25427,13 +27141,13 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--selected .bx--tabs--scrollable__nav-link {
- line-height: calc(3rem - (0.5rem * 2));
- box-shadow: inset 0 2px 0 0 var(--interactive-04, #4589ff);
+ line-height: calc(3rem - (var(--cds-spacing-03, 0.5rem) * 2));
+ box-shadow: inset 0 2px 0 0 var(--cds-interactive-04, #4589ff);
}
.bx--tabs--scrollable.bx--tabs--scrollable--light.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--selected,
.bx--tabs--scrollable.bx--tabs--scrollable--light.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--selected:hover {
- background-color: var(--ui-background, #161616);
+ background-color: var(--cds-ui-background, #161616);
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-link {
@@ -25452,19 +27166,19 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
appearance: none;
outline: 2px solid transparent;
outline-offset: -2px;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
width: 10rem;
- padding: 0.75rem 1rem 0.5rem;
+ padding: var(--cds-spacing-04, 0.75rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-03, 0.5rem);
overflow: hidden;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
white-space: nowrap;
text-align: left;
text-decoration: none;
text-overflow: ellipsis;
- border-bottom: 2px solid var(--ui-03, #393939);
+ border-bottom: 2px solid var(--cds-ui-03, #393939);
transition: border 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -25479,7 +27193,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-link:focus, .bx--tabs--scrollable .bx--tabs--scrollable__nav-link:active {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -25491,14 +27205,14 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-link {
height: 3rem;
- padding: 0.5rem 1rem;
- line-height: calc(3rem - (0.5rem * 2));
+ padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
+ line-height: calc(3rem - (var(--cds-spacing-03, 0.5rem) * 2));
border-bottom: 0;
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item:hover .bx--tabs--scrollable__nav-link {
- color: var(--text-01, #f4f4f4);
- border-bottom: 2px solid var(--ui-04, #6f6f6f);
+ color: var(--cds-text-01, #f4f4f4);
+ border-bottom: 2px solid var(--cds-ui-04, #6f6f6f);
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item .bx--tabs--scrollable__nav-link {
@@ -25506,38 +27220,38 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link {
- color: var(--disabled-02, #525252);
- border-bottom: 2px solid var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ border-bottom: 2px solid var(--cds-disabled-01, #262626);
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled:hover .bx--tabs--scrollable__nav-link {
- color: var(--disabled-02, #525252);
- border-bottom: 2px solid var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ border-bottom: 2px solid var(--cds-disabled-01, #262626);
cursor: not-allowed;
pointer-events: none;
}
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link:focus,
.bx--tabs--scrollable .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link:active {
- border-bottom: 2px solid var(--disabled-01, #262626);
+ border-bottom: 2px solid var(--cds-disabled-01, #262626);
outline: none;
}
.bx--tabs--scrollable .bx--tabs--scrollable--light .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link {
- border-bottom-color: var(--ui-03, #393939);
+ border-bottom-color: var(--cds-ui-03, #393939);
}
.bx--tabs--scrollable .bx--tabs--scrollable--light .bx--tabs--scrollable__nav-item--disabled:hover .bx--tabs--scrollable__nav-link {
- border-bottom-color: var(--ui-03, #393939);
+ border-bottom-color: var(--cds-ui-03, #393939);
}
.bx--tabs--scrollable .bx--tabs--scrollable--light .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link:focus,
.bx--tabs--scrollable .bx--tabs--scrollable--light .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link:active {
- border-bottom-color: var(--ui-03, #393939);
+ border-bottom-color: var(--cds-ui-03, #393939);
}
.bx--tabs--scrollable.bx--tabs--scrollable--container .bx--tabs--scrollable__nav-item--disabled .bx--tabs--scrollable__nav-link {
- color: var(--disabled-03, #8d8d8d);
+ color: var(--cds-disabled-03, #8d8d8d);
border-bottom: none;
}
@@ -25553,7 +27267,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable .bx--tabs.bx--skeleton .bx--tabs--scrollable__nav-link {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -25570,7 +27284,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -25585,7 +27299,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tabs--scrollable .bx--tabs.bx--skeleton .bx--tabs-trigger {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -25603,7 +27317,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -25636,10 +27350,10 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
width: 100%;
@@ -25647,10 +27361,10 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
height: 100%;
min-height: 2.5rem;
padding: 0.6875rem 1rem;
- color: var(--text-01, #f4f4f4);
- background-color: var(--field-01, #262626);
+ color: var(--cds-text-01, #f4f4f4);
+ background-color: var(--cds-field-01, #262626);
border: none;
- border-bottom: 1px solid var(--ui-04, #6f6f6f);
+ border-bottom: 1px solid var(--cds-ui-04, #6f6f6f);
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
resize: vertical;
}
@@ -25663,7 +27377,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--text-area:focus,
.bx--text-area:active {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -25675,16 +27389,16 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--text-area::placeholder {
- color: var(--text-05, #8d8d8d);
+ color: var(--cds-text-05, #8d8d8d);
opacity: 1;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
}
.bx--text-area--light {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--text-area--invalid {
@@ -25701,29 +27415,29 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
position: absolute;
top: 0.75rem;
right: 1rem;
- fill: var(--support-01, #fa4d56);
+ fill: var(--cds-support-01, #fa4d56);
}
.bx--text-area:disabled {
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
border-bottom: 1px solid transparent;
outline: none;
cursor: not-allowed;
}
.bx--text-area:disabled::placeholder {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--text-area.bx--text-area--light:disabled {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--text-area.bx--skeleton {
position: relative;
padding: 0;
- background: var(--skeleton-01, #353535);
+ background: var(--cds-skeleton-01, #353535);
border: none;
box-shadow: none;
pointer-events: none;
@@ -25740,7 +27454,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
position: absolute;
width: 100%;
height: 100%;
- background: var(--skeleton-02, #525252);
+ background: var(--cds-skeleton-02, #525252);
animation: 3000ms ease-in-out skeleton infinite;
content: \\"\\";
will-change: transform-origin, transform, opacity;
@@ -25762,13 +27476,13 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
min-width: 8rem;
min-height: 4rem;
padding: 1rem;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
outline: 2px solid transparent;
outline-offset: -2px;
}
.bx--tile:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -25779,7 +27493,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tile--light {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.bx--tile--clickable,
@@ -25792,12 +27506,12 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tile--clickable:hover,
.bx--tile--selectable:hover,
.bx--tile--expandable:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.bx--tile--clickable:focus,
.bx--tile--expandable:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -25826,11 +27540,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--text-01, #f4f4f4);
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+ color: var(--cds-text-01, #f4f4f4);
text-decoration: none;
}
@@ -25844,18 +27558,18 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tile--clickable:active,
.bx--tile--clickable:visited,
.bx--tile--clickable:visited:hover {
- color: var(--text-01, #f4f4f4);
+ color: var(--cds-text-01, #f4f4f4);
text-decoration: none;
}
.bx--tile--clickable.bx--link--disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--tile--clickable:hover.bx--link--disabled {
display: block;
- color: var(--disabled-02, #525252);
- background-color: var(--disabled-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--tile--selectable {
@@ -25879,11 +27593,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--tile__checkmark svg {
border-radius: 50%;
- fill: var(--icon-02, #c6c6c6);
+ fill: var(--cds-icon-02, #c6c6c6);
}
.bx--tile__checkmark:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -25906,7 +27620,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
margin-left: 0.5rem;
transform-origin: center;
transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -25960,7 +27674,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tile--is-selected {
- outline: 1px solid var(--ui-05, #f4f4f4);
+ outline: 1px solid var(--cds-ui-05, #f4f4f4);
outline-offset: -1px;
}
@@ -25969,7 +27683,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tile--is-selected .bx--tile__checkmark svg {
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -25997,7 +27711,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tile-input:focus + .bx--tile {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -26008,21 +27722,21 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--tile--disabled.bx--tile--selectable {
- color: var(--disabled-02, #525252);
- background-color: var(--ui-01, #262626);
+ color: var(--cds-disabled-02, #525252);
+ background-color: var(--cds-ui-01, #262626);
cursor: not-allowed;
}
.bx--tile--disabled.bx--tile--selectable.bx--tile--light {
- background-color: var(--ui-02, #393939);
+ background-color: var(--cds-ui-02, #393939);
}
.bx--tile--disabled.bx--tile--is-selected {
- outline-color: var(--disabled-02, #525252);
+ outline-color: var(--cds-disabled-02, #525252);
}
.bx--tile--disabled.bx--tile--is-selected .bx--tile__checkmark svg {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--tile-group {
@@ -26070,11 +27784,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--time-picker__input-field {
outline: 2px solid transparent;
outline-offset: -2px;
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-02-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-02-font-size, 0.875rem);
+ font-weight: var(--cds-code-02-font-weight, 400);
+ line-height: var(--cds-code-02-line-height, 1.43);
+ letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
display: flex;
align-items: center;
width: 4.875rem;
@@ -26083,20 +27797,20 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--time-picker__input-field::placeholder {
- color: var(--text-05, #8d8d8d);
+ color: var(--cds-text-05, #8d8d8d);
opacity: 1;
}
.bx--time-picker--light .bx--select-input {
- background-color: var(--field-02, #393939);
+ background-color: var(--cds-field-02, #393939);
}
.bx--time-picker--light .bx--select-input:hover {
- background-color: var(--hover-ui, #353535);
+ background-color: var(--cds-hover-ui, #353535);
}
.bx--time-picker--light .bx--select-input:disabled, .bx--time-picker--light .bx--select-input:hover:disabled {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
background-color: transparent;
border-bottom: 1px solid transparent;
cursor: not-allowed;
@@ -26132,10 +27846,10 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
position: relative;
display: flex;
align-items: center;
@@ -26156,7 +27870,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
box-sizing: border-box;
width: 3rem;
height: 1.5rem;
- background-color: var(--ui-04, #6f6f6f);
+ background-color: var(--cds-ui-04, #6f6f6f);
border-radius: 0.9375rem;
box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
cursor: pointer;
@@ -26173,7 +27887,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
box-sizing: border-box;
width: 1.125rem;
height: 1.125rem;
- background-color: var(--icon-03, #ffffff);
+ background-color: var(--cds-icon-03, #ffffff);
border-radius: 50%;
cursor: pointer;
transition: transform 70ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -26189,15 +27903,15 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
height: 0.3125rem;
transform: scale(0.2);
transition: 70ms cubic-bezier(0.2, 0, 1, 0.9);
- fill: var(--icon-03, #ffffff);
+ fill: var(--cds-icon-03, #ffffff);
}
.bx--toggle__text--left,
.bx--toggle__text--right {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: relative;
margin-left: 0.5rem;
}
@@ -26218,11 +27932,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle:checked + .bx--toggle__label .bx--toggle__appearance::before {
- background-color: var(--support-02, #42be65);
+ background-color: var(--cds-support-02, #42be65);
}
.bx--toggle:checked + .bx--toggle__label .bx--toggle__appearance::after {
- background-color: var(--icon-03, #ffffff);
+ background-color: var(--cds-icon-03, #ffffff);
transform: translateX(1.5rem);
}
@@ -26232,7 +27946,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--toggle:focus + .bx--toggle__label,
.bx--toggle:active + .bx--toggle__label .bx--toggle__appearance::before {
- box-shadow: 0 0 0 1px var(--ui-02, #393939), 0 0 0 3px var(--focus, #ffffff);
+ box-shadow: 0 0 0 1px var(--cds-ui-02, #393939), 0 0 0 3px var(--cds-focus, #ffffff);
}
.bx--toggle:disabled + .bx--toggle__label {
@@ -26240,11 +27954,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle:disabled + .bx--toggle__label .bx--toggle__appearance::before {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--toggle:disabled + .bx--toggle__label .bx--toggle__appearance::after {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--toggle:disabled + .bx--toggle__label .bx--toggle__appearance::before, .bx--toggle:disabled + .bx--toggle__label .bx--toggle__appearance::after {
@@ -26254,7 +27968,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--toggle:disabled + .bx--toggle__label .bx--toggle__text--left,
.bx--toggle:disabled + .bx--toggle__label .bx--toggle__text--right {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
}
.bx--toggle:disabled:active + .bx--toggle__label .bx--toggle__appearance:before {
@@ -26262,7 +27976,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle:disabled + .bx--toggle__label .bx--toggle__check {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
}
.bx--toggle--small + .bx--toggle__label .bx--toggle__appearance {
@@ -26287,7 +28001,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--toggle--small:checked + .bx--toggle__label .bx--toggle__check {
transform: scale(1) translateX(1rem);
- fill: var(--support-02, #42be65);
+ fill: var(--cds-support-02, #42be65);
}
.bx--toggle--small + .bx--toggle__label .bx--toggle__text--left {
@@ -26317,14 +28031,14 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle-input__label {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
display: flex;
flex-direction: column;
align-items: flex-start;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
cursor: pointer;
}
@@ -26344,7 +28058,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
box-sizing: border-box;
width: 3rem;
height: 1.5rem;
- background-color: var(--ui-04, #6f6f6f);
+ background-color: var(--cds-ui-04, #6f6f6f);
border-radius: 0.9375rem;
box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
transition: box-shadow 70ms cubic-bezier(0.2, 0, 1, 0.9), background-color 70ms cubic-bezier(0.2, 0, 1, 0.9);
@@ -26366,7 +28080,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
box-sizing: border-box;
width: 1.125rem;
height: 1.125rem;
- background-color: var(--icon-03, #ffffff);
+ background-color: var(--cds-icon-03, #ffffff);
border-radius: 50%;
transition: transform 70ms cubic-bezier(0.2, 0, 1, 0.9);
content: \\"\\";
@@ -26384,10 +28098,10 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--toggle__text--off,
.bx--toggle__text--on {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
position: absolute;
top: 50%;
margin-left: 3.5rem;
@@ -26402,17 +28116,17 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle-input:checked + .bx--toggle-input__label > .bx--toggle__switch::before {
- background-color: var(--support-02, #42be65);
+ background-color: var(--cds-support-02, #42be65);
}
.bx--toggle-input:checked + .bx--toggle-input__label > .bx--toggle__switch::after {
- background-color: var(--icon-03, #ffffff);
+ background-color: var(--cds-icon-03, #ffffff);
transform: translateX(1.5rem);
}
.bx--toggle-input:focus + .bx--toggle-input__label > .bx--toggle__switch::before,
.bx--toggle-input:active + .bx--toggle-input__label > .bx--toggle__switch::before {
- box-shadow: 0 0 0 1px var(--ui-02, #393939), 0 0 0 3px var(--focus, #ffffff);
+ box-shadow: 0 0 0 1px var(--cds-ui-02, #393939), 0 0 0 3px var(--cds-focus, #ffffff);
}
@media screen and (-ms-high-contrast: active), screen and (prefers-contrast) {
@@ -26423,7 +28137,7 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle-input:disabled + .bx--toggle-input__label {
- color: var(--disabled-02, #525252);
+ color: var(--cds-disabled-02, #525252);
cursor: not-allowed;
}
@@ -26432,11 +28146,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--toggle-input:disabled + .bx--toggle-input__label > .bx--toggle__switch::before {
- background-color: var(--disabled-01, #262626);
+ background-color: var(--cds-disabled-01, #262626);
}
.bx--toggle-input:disabled + .bx--toggle-input__label > .bx--toggle__switch::after {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--toggle-input:disabled + .bx--toggle-input__label > .bx--toggle__switch::before, .bx--toggle-input:disabled + .bx--toggle-input__label > .bx--toggle__switch::after {
@@ -26449,11 +28163,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
.bx--data-table .bx--toggle-input:disabled + .bx--toggle-input__label > .bx--toggle__switch::before {
- background-color: var(--disabled-02, #525252);
+ background-color: var(--cds-disabled-02, #525252);
}
.bx--data-table .bx--toggle-input:disabled + .bx--toggle-input__label > .bx--toggle__switch::after {
- background-color: var(--disabled-03, #8d8d8d);
+ background-color: var(--cds-disabled-03, #8d8d8d);
}
.bx--toggle-input--small + .bx--toggle-input__label > .bx--toggle__switch {
@@ -26483,11 +28197,11 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
.bx--toggle-input--small:checked + .bx--toggle-input__label .bx--toggle__check {
transform: scale(1) translateX(1rem);
- fill: var(--support-02, #42be65);
+ fill: var(--cds-support-02, #42be65);
}
.bx--toggle-input--small:disabled:checked + .bx--toggle-input__label .bx--toggle__check {
- fill: var(--disabled-01, #262626);
+ fill: var(--cds-disabled-01, #262626);
}
.bx--toggle__label.bx--skeleton {
@@ -26606,10 +28320,10 @@ a.bx--tabs__nav-link:focus, a.bx--tabs__nav-link:active {
}
a.bx--header__name {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
align-items: center;
height: 100%;
@@ -26734,7 +28448,7 @@ a.bx--header__menu-item[aria-current=\\"page\\"]::after,
bottom: -2px;
left: 0;
width: 100%;
- border-bottom: 3px solid var(--inverse-support-04, #0f62fe);
+ border-bottom: 3px solid var(--cds-inverse-support-04, #0f62fe);
content: \\"\\";
}
@@ -26900,10 +28614,10 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
.bx--product-switcher__subheader,
.bx--product-switcher__all-btn {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
padding: 0.5rem;
color: #c6c6c6;
}
@@ -26939,10 +28653,10 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
}
.bx--product-switcher__back-btn {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
display: flex;
align-items: center;
padding: 0.5rem 1rem;
@@ -26983,10 +28697,10 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
}
.bx--product-link__name {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
margin-left: 0.25rem;
color: #c6c6c6;
font-weight: 400;
@@ -27039,30 +28753,30 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
.bx--switcher__item {
width: 100%;
- height: 2rem;
+ height: var(--cds-spacing-07, 2rem);
}
.bx--switcher__item:nth-child(1) {
- margin-top: 1rem;
+ margin-top: var(--cds-spacing-05, 1rem);
}
.bx--switcher__item--divider {
display: block;
width: 14rem;
height: 1px;
- margin: 0.5rem 1rem;
+ margin: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
background: #393939;
border: none;
}
.bx--switcher__item-link {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
display: block;
- height: 2rem;
- padding: 0.375rem 1rem;
+ height: var(--cds-spacing-07, 2rem);
+ padding: 0.375rem var(--cds-spacing-05, 1rem);
color: #c6c6c6;
text-decoration: none;
}
@@ -27104,7 +28818,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
}
.bx--side-nav--ux {
- top: 3rem;
+ top: var(--cds-spacing-09, 3rem);
width: 16rem;
}
@@ -27142,7 +28856,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
.bx--side-nav__overlay-active {
width: 100vw;
height: 100vh;
- background-color: var(--overlay-01, rgba(22, 22, 22, 0.7));
+ background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.7));
opacity: 1;
transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -27259,7 +28973,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
}
.bx--side-nav__select:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -27309,7 +29023,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
}
.bx--side-nav__toggle:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -27366,7 +29080,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
.bx--side-nav__divider {
height: 1px;
- margin: 0.5rem 1rem;
+ margin: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-05, 1rem);
background-color: #e0e0e0;
}
@@ -27385,10 +29099,10 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
cursor: pointer;
appearance: none;
width: 100%;
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
outline: 2px solid transparent;
outline-offset: -2px;
display: flex;
@@ -27416,7 +29130,7 @@ a.bx--header__menu-item.bx--header__menu-item--current:focus {
}
.bx--side-nav__submenu:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -27519,10 +29233,10 @@ a.bx--side-nav__link,
.bx--side-nav .bx--header__menu-title[aria-expanded=\\"true\\"] + .bx--header__menu {
outline: 2px solid transparent;
outline-offset: -2px;
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
position: relative;
display: flex;
align-items: center;
@@ -27550,7 +29264,7 @@ a.bx--side-nav__link > .bx--side-nav__link-text,
a.bx--side-nav__link:focus,
.bx--side-nav a.bx--header__menu-item:focus {
- outline: 2px solid var(--focus, #ffffff);
+ outline: 2px solid var(--cds-focus, #ffffff);
outline-offset: -2px;
}
@@ -27903,7 +29617,7 @@ a.bx--navigation-link:focus {
.bx--content {
padding: 2rem;
- background: var(--ui-02, #393939);
+ background: var(--cds-ui-02, #393939);
will-change: margin-left;
}
@@ -27920,8 +29634,8 @@ a.bx--navigation-link:focus {
}
.security--unstable--background {
- background-color: var(--ui-01, #262626);
- outline: 0.0625rem solid var(--ui-background, #161616);
+ background-color: var(--cds-ui-01, #262626);
+ outline: 0.0625rem solid var(--cds-ui-background, #161616);
}
.security--unstable-pagination {
@@ -27932,16 +29646,16 @@ a.bx--navigation-link:focus {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
width: 100%;
- background-color: var(--ui-01, #262626);
+ background-color: var(--cds-ui-01, #262626);
display: flex;
align-items: center;
justify-content: space-between;
- border-top: 1px solid var(--ui-03, #393939);
+ border-top: 1px solid var(--cds-ui-03, #393939);
height: 3rem;
overflow: hidden;
}
@@ -27954,7 +29668,7 @@ a.bx--navigation-link:focus {
.security--unstable-pagination__text {
margin: 0 1rem;
- color: var(--text-02, #c6c6c6);
+ color: var(--cds-text-02, #c6c6c6);
}
@media (min-width: 42rem) {
@@ -28000,11 +29714,11 @@ a.bx--navigation-link:focus {
height: 100%;
margin: 0;
padding: 0 0.875rem;
- border-left: 1px solid var(--ui-03, #393939);
+ border-left: 1px solid var(--cds-ui-03, #393939);
display: flex;
justify-content: center;
align-items: center;
- fill: var(--ui-05, #f4f4f4);
+ fill: var(--cds-ui-05, #f4f4f4);
transition: outline 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
@@ -28023,27 +29737,27 @@ a.bx--navigation-link:focus {
.security--unstable-pagination__button, .security--unstable-pagination__button:disabled {
background: none;
border: 0;
- border-left: 1px solid var(--ui-03, #393939);
+ border-left: 1px solid var(--cds-ui-03, #393939);
}
.security--unstable-pagination__button:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.security--unstable-pagination__button.bx--btn--icon-only.bx--tooltip__trigger:focus {
outline: none;
- border: 2px solid var(--focus, #ffffff);
+ border: 2px solid var(--cds-focus, #ffffff);
}
.security--unstable-pagination__button--no-index {
- fill: var(--disabled-02, #525252);
+ fill: var(--cds-disabled-02, #525252);
cursor: not-allowed;
}
.security--unstable-pagination__button:disabled:hover, .security--unstable-pagination__button--no-index:hover {
cursor: not-allowed;
- fill: var(--disabled-02, #525252);
- background: var(--ui-01, #262626);
+ fill: var(--cds-disabled-02, #525252);
+ background: var(--cds-ui-01, #262626);
}
.security--unstable-pagination__page-selector, .security--unstable-pagination__page-sizer {
@@ -28057,10 +29771,10 @@ a.bx--navigation-link:focus {
}
.security--unstable-pagination__page-selector .bx--select-input, .security--unstable-pagination__page-sizer .bx--select-input {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
width: auto;
min-width: auto;
height: 100%;
@@ -28076,7 +29790,7 @@ a.bx--navigation-link:focus {
}
.security--unstable-pagination__page-selector .bx--select-input:hover, .security--unstable-pagination__page-sizer .bx--select-input:hover {
- background: var(--hover-ui, #353535);
+ background: var(--cds-hover-ui, #353535);
}
.security--unstable-pagination__page-selector .bx--select__arrow, .security--unstable-pagination__page-sizer .bx--select__arrow {
@@ -28091,11 +29805,11 @@ a.bx--navigation-link:focus {
}
.security--unstable-pagination__page-selector {
- border-left: 1px solid var(--ui-02, #393939);
+ border-left: 1px solid var(--cds-ui-02, #393939);
}
.security--unstable-pagination__page-sizer {
- border-right: 1px solid var(--ui-02, #393939);
+ border-right: 1px solid var(--cds-ui-02, #393939);
}
body {
@@ -28106,13 +29820,13 @@ body {
font-family: inherit;
vertical-align: baseline;
border: 0;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
- color: var(--text-01, #f4f4f4);
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+ color: var(--cds-text-01, #f4f4f4);
line-height: 1;
- background-color: var(--ui-background, #161616);
+ background-color: var(--cds-ui-background, #161616);
}
body *,
@@ -30211,130 +31925,130 @@ strong {
}
.bx--type-caption-01 {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-caption-01-font-size, 0.75rem);
+ font-weight: var(--cds-caption-01-font-weight, 400);
+ line-height: var(--cds-caption-01-line-height, 1.34);
+ letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
}
.bx--type-label-01 {
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-label-01-font-size, 0.75rem);
+ font-weight: var(--cds-label-01-font-weight, 400);
+ line-height: var(--cds-label-01-line-height, 1.34);
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
}
.bx--type-helper-text-01 {
- font-size: 0.75rem;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-size: var(--cds-helper-text-01-font-size, 0.75rem);
+ line-height: var(--cds-helper-text-01-line-height, 1.34);
+ letter-spacing: var(--cds-helper-text-01-letter-spacing, 0.32px);
}
.bx--type-body-short-01 {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-short-01-font-weight, 400);
+ line-height: var(--cds-body-short-01-line-height, 1.29);
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
}
.bx--type-body-short-02 {
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-body-short-02-font-size, 1rem);
+ font-weight: var(--cds-body-short-02-font-weight, 400);
+ line-height: var(--cds-body-short-02-line-height, 1.375);
+ letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
}
.bx--type-body-long-01 {
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.16px;
+ font-size: var(--cds-body-long-01-font-size, 0.875rem);
+ font-weight: var(--cds-body-long-01-font-weight, 400);
+ line-height: var(--cds-body-long-01-line-height, 1.43);
+ letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
}
.bx--type-body-long-02 {
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.5;
- letter-spacing: 0;
+ font-size: var(--cds-body-long-02-font-size, 1rem);
+ font-weight: var(--cds-body-long-02-font-weight, 400);
+ line-height: var(--cds-body-long-02-line-height, 1.5);
+ letter-spacing: var(--cds-body-long-02-letter-spacing, 0);
}
.bx--type-code-01 {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.75rem;
- font-weight: 400;
- line-height: 1.34;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-01-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-01-font-size, 0.75rem);
+ font-weight: var(--cds-code-01-font-weight, 400);
+ line-height: var(--cds-code-01-line-height, 1.34);
+ letter-spacing: var(--cds-code-01-letter-spacing, 0.32px);
}
.bx--type-code-02 {
- font-family: \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace;
- font-size: 0.875rem;
- font-weight: 400;
- line-height: 1.43;
- letter-spacing: 0.32px;
+ font-family: var(--cds-code-02-font-family, \\"IBM Plex Mono\\", \\"Menlo\\", \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace);
+ font-size: var(--cds-code-02-font-size, 0.875rem);
+ font-weight: var(--cds-code-02-font-weight, 400);
+ line-height: var(--cds-code-02-line-height, 1.43);
+ letter-spacing: var(--cds-code-02-letter-spacing, 0.32px);
}
.bx--type-heading-01 {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-heading-01-font-weight, 600);
+ line-height: var(--cds-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
}
.bx--type-heading-02 {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-heading-02-font-size, 1rem);
+ font-weight: var(--cds-heading-02-font-weight, 600);
+ line-height: var(--cds-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-heading-02-letter-spacing, 0);
}
.bx--type-productive-heading-01 {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.29;
- letter-spacing: 0.16px;
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
+ line-height: var(--cds-productive-heading-01-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
}
.bx--type-productive-heading-02 {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.375;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-02-font-size, 1rem);
+ font-weight: var(--cds-productive-heading-02-font-weight, 600);
+ line-height: var(--cds-productive-heading-02-line-height, 1.375);
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
}
.bx--type-productive-heading-03 {
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.4;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
}
.bx--type-productive-heading-04 {
- font-size: 1.75rem;
- font-weight: 400;
- line-height: 1.29;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+ font-weight: var(--cds-productive-heading-04-font-weight, 400);
+ line-height: var(--cds-productive-heading-04-line-height, 1.29);
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
}
.bx--type-productive-heading-05 {
- font-size: 2rem;
- font-weight: 400;
- line-height: 1.25;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-05-font-size, 2rem);
+ font-weight: var(--cds-productive-heading-05-font-weight, 400);
+ line-height: var(--cds-productive-heading-05-line-height, 1.25);
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing, 0);
}
.bx--type-productive-heading-06 {
- font-size: 2.625rem;
- font-weight: 300;
- line-height: 1.199;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-06-font-size, 2.625rem);
+ font-weight: var(--cds-productive-heading-06-font-weight, 300);
+ line-height: var(--cds-productive-heading-06-line-height, 1.199);
+ letter-spacing: var(--cds-productive-heading-06-letter-spacing, 0);
}
.bx--type-productive-heading-07 {
- font-size: 3.375rem;
- font-weight: 300;
- line-height: 1.19;
- letter-spacing: 0;
+ font-size: var(--cds-productive-heading-07-font-size, 3.375rem);
+ font-weight: var(--cds-productive-heading-07-font-weight, 300);
+ line-height: var(--cds-productive-heading-07-line-height, 1.19);
+ letter-spacing: var(--cds-productive-heading-07-letter-spacing, 0);
}
.bx--type-expressive-paragraph-01 {
@@ -30362,17 +32076,17 @@ strong {
}
.bx--type-expressive-heading-01 {
- font-size: 0.875rem;
- font-weight: 600;
- line-height: 1.25;
- letter-spacing: 0.16px;
+ font-size: var(--cds-expressive-heading-01-font-size, 0.875rem);
+ font-weight: var(--cds-expressive-heading-01-font-weight, 600);
+ line-height: var(--cds-expressive-heading-01-line-height, 1.25);
+ letter-spacing: var(--cds-expressive-heading-01-letter-spacing, 0.16px);
}
.bx--type-expressive-heading-02 {
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.5;
- letter-spacing: 0;
+ font-size: var(--cds-expressive-heading-02-font-size, 1rem);
+ font-weight: var(--cds-expressive-heading-02-font-weight, 600);
+ line-height: var(--cds-expressive-heading-02-line-height, 1.5);
+ letter-spacing: var(--cds-expressive-heading-02-letter-spacing, 0);
}
.bx--type-expressive-heading-03 {
diff --git a/src/components/DataTable/DataTablePagination/__tests__/__snapshots__/DataTablePagination.spec.js.snap b/src/components/DataTable/DataTablePagination/__tests__/__snapshots__/DataTablePagination.spec.js.snap
index 61ff531c2..7e21d53c9 100644
--- a/src/components/DataTable/DataTablePagination/__tests__/__snapshots__/DataTablePagination.spec.js.snap
+++ b/src/components/DataTable/DataTablePagination/__tests__/__snapshots__/DataTablePagination.spec.js.snap
@@ -133,7 +133,7 @@ exports[`DataTablePagination Rendering renders the HTML of the node's subtree 1`
aria-hidden="true"
class="security--scroll-gradient__before"
role="presentation"
- style="background-image:linear-gradient(-90deg, rgba(0,0,0,0), var(--ui-01, #262626) 90%)"
+ style="background-image:linear-gradient(-90deg, rgba(0,0,0,0), var(--cds-ui-01, #262626) 90%)"
/>
diff --git a/src/components/DataTable/__tests__/__snapshots__/DataTable.spec.js.snap b/src/components/DataTable/__tests__/__snapshots__/DataTable.spec.js.snap
index 41ce47be9..0a50fcdd7 100644
--- a/src/components/DataTable/__tests__/__snapshots__/DataTable.spec.js.snap
+++ b/src/components/DataTable/__tests__/__snapshots__/DataTable.spec.js.snap
@@ -285,7 +285,7 @@ exports[`DataTable Rendering renders 1`] = `
>
@@ -1652,7 +1652,7 @@ exports[`DataTable Rendering renders 1`] = `
role="presentation"
style={
Object {
- "backgroundImage": "linear-gradient(-90deg, var(--ui-01, #262626) 10%, rgba(0,0,0,0))",
+ "backgroundImage": "linear-gradient(-90deg, var(--cds-ui-01, #262626) 10%, rgba(0,0,0,0))",
}
}
/>
@@ -1943,7 +1943,7 @@ exports[`DataTable Rendering renders a custom table 1`] = `
>
@@ -3310,7 +3310,7 @@ exports[`DataTable Rendering renders a custom table 1`] = `
role="presentation"
style={
Object {
- "backgroundImage": "linear-gradient(-90deg, var(--ui-01, #262626) 10%, rgba(0,0,0,0))",
+ "backgroundImage": "linear-gradient(-90deg, var(--cds-ui-01, #262626) 10%, rgba(0,0,0,0))",
}
}
/>
@@ -3601,7 +3601,7 @@ exports[`DataTable Rendering renders a selectable table 1`] = `
>
@@ -4968,7 +4968,7 @@ exports[`DataTable Rendering renders a selectable table 1`] = `
role="presentation"
style={
Object {
- "backgroundImage": "linear-gradient(-90deg, var(--ui-01, #262626) 10%, rgba(0,0,0,0))",
+ "backgroundImage": "linear-gradient(-90deg, var(--cds-ui-01, #262626) 10%, rgba(0,0,0,0))",
}
}
/>
@@ -5259,7 +5259,7 @@ exports[`DataTable Rendering renders a sortable table 1`] = `
>
@@ -6626,7 +6626,7 @@ exports[`DataTable Rendering renders a sortable table 1`] = `
role="presentation"
style={
Object {
- "backgroundImage": "linear-gradient(-90deg, var(--ui-01, #262626) 10%, rgba(0,0,0,0))",
+ "backgroundImage": "linear-gradient(-90deg, var(--cds-ui-01, #262626) 10%, rgba(0,0,0,0))",
}
}
/>
diff --git a/src/components/FilterPanel/LEGACY_FilterPanel/FilterSubcategory/__tests__/__snapshots__/FilterSubcategory.spec.js.snap b/src/components/FilterPanel/LEGACY_FilterPanel/FilterSubcategory/__tests__/__snapshots__/FilterSubcategory.spec.js.snap
index 98c0197c1..879c67e34 100644
--- a/src/components/FilterPanel/LEGACY_FilterPanel/FilterSubcategory/__tests__/__snapshots__/FilterSubcategory.spec.js.snap
+++ b/src/components/FilterPanel/LEGACY_FilterPanel/FilterSubcategory/__tests__/__snapshots__/FilterSubcategory.spec.js.snap
@@ -10,7 +10,7 @@ exports[`FilterSubcategory Events collapses expanded truncated list of filters 1
className="security--filter-subcategory__filter-list"
>
@@ -1722,7 +1722,7 @@ exports[`TagWallFilter tests FilterTagFragment should render the fragment 1`] =
>
@@ -2562,7 +2562,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon