From ded4219b3a0c9930b99599fc266f2be39ec23773 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 19 Aug 2026 12:00:19 +0400 Subject: [PATCH 01/13] Fluent Next Theme: Add New Topics & Old Topic Updates --- .../00 Styling Overview.md | 1 + .../00 Styling Overview/05 Themes.md | 14 + .../00 Styling Overview/10 CSS Styles.md | 3 + .../15 Fluent Next Theme Customization.md | 1 + ...yling Methods.md => 02 Styling Methods.md} | 0 .../00 Predefined Themes.md | 238 +-- .../00 Fluent Next Theme Customization.md | 1 + .../05 CSS Variables/00 CSS Variables.md | 46 + .../05 Variable Naming Convention.md | 9 + .../10 Accent Colors/00 Accent Colors.md | 1 + .../05 Predefined Accent Colors.md | 1567 +++++++++++++++++ .../10 Custom Accent Colors.md | 29 + 12 files changed, 1803 insertions(+), 107 deletions(-) create mode 100644 concepts/60 Themes and Styles/00 Styling Overview/00 Styling Overview.md create mode 100644 concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md create mode 100644 concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md create mode 100644 concepts/60 Themes and Styles/00 Styling Overview/15 Fluent Next Theme Customization.md rename concepts/60 Themes and Styles/{00 Styling Methods.md => 02 Styling Methods.md} (100%) create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md diff --git a/concepts/60 Themes and Styles/00 Styling Overview/00 Styling Overview.md b/concepts/60 Themes and Styles/00 Styling Overview/00 Styling Overview.md new file mode 100644 index 0000000000..3eb300dfc1 --- /dev/null +++ b/concepts/60 Themes and Styles/00 Styling Overview/00 Styling Overview.md @@ -0,0 +1 @@ +The appearance of DevExtreme-powered applications depends on the app's theme and applied customizations. This topic describes all available options you can use to customize your DevExtreme-powered application. diff --git a/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md b/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md new file mode 100644 index 0000000000..7764bde902 --- /dev/null +++ b/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md @@ -0,0 +1,14 @@ +DevExtreme ships with a set of built-in themes: + +- **Fluent Next** +[Design System](https://docs.devexpress.com/DesignSystem/405636/foundation)-based themes that use CSS variables to declare color, typography, spacing, border, opacity, and shadow styles. Key features include: + + - Predefined accent colors + - Custom accent color support + - Light and dark modes + - Compact mode + - High contrast mode + - Theme customization using public `--dxds-*` CSS variables + +- **Fluent, Material, and Generic** +Themes that use SCSS to implement styles. For more information, refer to the following help topic: [Predefined Themes](). diff --git a/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md b/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md new file mode 100644 index 0000000000..a2cf423f45 --- /dev/null +++ b/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md @@ -0,0 +1,3 @@ +You can apply custom CSS styles to specific classes to customize DevExtreme component appearance. You can also use these CSS classes in custom elements to ensure a consistent look and feel across your app. + +For a list of common DevExtreme classes, refer to the following help topic: [CSS Classes](/Documentation/ApiReference/UI_Components/CSS_Classes/). \ No newline at end of file diff --git a/concepts/60 Themes and Styles/00 Styling Overview/15 Fluent Next Theme Customization.md b/concepts/60 Themes and Styles/00 Styling Overview/15 Fluent Next Theme Customization.md new file mode 100644 index 0000000000..6a7891ffc8 --- /dev/null +++ b/concepts/60 Themes and Styles/00 Styling Overview/15 Fluent Next Theme Customization.md @@ -0,0 +1 @@ +To customize Fluent Next themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/). diff --git a/concepts/60 Themes and Styles/00 Styling Methods.md b/concepts/60 Themes and Styles/02 Styling Methods.md similarity index 100% rename from concepts/60 Themes and Styles/00 Styling Methods.md rename to concepts/60 Themes and Styles/02 Styling Methods.md diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md b/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md index 4fe0e7e7bd..c8f7ccce5a 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md @@ -1,71 +1,50 @@ -DevExtreme provides Generic, Generic Compact, Material Design, and Fluent (all trademarks or registered trademarks are property of their respective owners) themes. These themes are available in the following colors: +DevExtreme ships with the following themes (all trademarks or registered trademarks are property of their respective owners): -## Generic Themes +- **Fluent Next** +- **Fluent** +- **Material Design** +- **Generic** -
-
-

Light

- -
-
-

Light Compact

- -
-
-

Dark

- -
-
-

Dark Compact

- -
-
-

Carmine

- -
-
-

Carmine Compact

- -
-
-

Soft Blue

- -
-
-

Soft Blue Compact

- -
+The following colors are available: + +## Fluent Next Themes + +TBA: Need to discuss images in this section w/ designer + +## Fluent Themes + +
-

Dark Moon

- +

Blue Light

+
-

Dark Moon Compact

- +

Blue Light Compact

+
-

Dark Violet

- +

Blue Dark

+
-

Dark Violet Compact

- +

Blue Dark Compact

+
-

Green Mist

- +

SaaS Light

+
-
-

Green Mist Compact

- +
+

SaaS Light Compact

+
-
-

Contrast

- +
+

SaaS Dark

+
-
-

Contrast Compact

- +
+

SaaS Dark Compact

+
@@ -154,40 +133,72 @@ DevExtreme provides Generic, Generic Compact, Material Design, and Fluent (all t
-## Fluent Themes +## Generic Themes -
+
-

Blue Light

- +

Light

+
-

Blue Light Compact

- +

Light Compact

+
-

Blue Dark

- +

Dark

+
-

Blue Dark Compact

- +

Dark Compact

+
-

SaaS Light

- +

Carmine

+
-
-

SaaS Light Compact

- +
+

Carmine Compact

+
-
-

SaaS Dark

- +
+

Soft Blue

+
-
-

SaaS Dark Compact

- +
+

Soft Blue Compact

+ +
+
+

Dark Moon

+ +
+
+

Dark Moon Compact

+ +
+
+

Dark Violet

+ +
+
+

Dark Violet Compact

+ +
+
+

Green Mist

+ +
+
+

Green Mist Compact

+ +
+
+

Contrast

+ +
+
+

Contrast Compact

+
@@ -196,29 +207,37 @@ Each theme is a stylesheet that contains a collection of CSS classes. The follow
-
Generic
+
Fluent Next
    -
  • dx.light.css
    • -
  • dx.dark.css
    • -
  • dx.carmine.css
    • -
  • dx.softblue.css
    • -
  • dx.darkmoon.css
    • -
  • dx.darkviolet.css
    • -
  • dx.greenmist.css
    • -
  • dx.contrast.css
    • +
  • dx.fluent-next.blue.light.css
    • +
  • dx.fluent-next.blue.dark.css
-
Generic Compact
+
Fluent Next Compact
    -
  • dx.light.compact.css
    • -
  • dx.dark.compact.css
    • -
  • dx.carmine.compact.css
    • -
  • dx.softblue.compact.css
    • -
  • dx.darkmoon.compact.css
    • -
  • dx.darkviolet.compact.css
    • -
  • dx.greenmist.compact.css
    • -
  • dx.contrast.compact.css
    • +
  • dx.fluent-next.blue.light.compact.css
    • +
  • dx.fluent-next.blue.dark.compact.css
    • +
+
+
+
+
+
Fluent
+
    +
  • dx.fluent.blue.light.css
    • +
  • dx.fluent.blue.dark.css
    • +
  • dx.fluent.saas.light.css
    • +
  • dx.fluent.saas.dark.css
    • +
+
+
+
Fluent Compact
+
    +
  • dx.fluent.blue.light.compact.css
    • +
  • dx.fluent.blue.dark.compact.css
    • +
  • dx.fluent.saas.light.compact.css
    • +
  • dx.fluent.saas.dark.compact.css
@@ -256,24 +275,32 @@ Each theme is a stylesheet that contains a collection of CSS classes. The follow
-
Fluent
+
Generic
    -
  • dx.fluent.blue.light.css
    • -
  • dx.fluent.blue.dark.css
    • -
  • dx.fluent.saas.light.css
    • -
  • dx.fluent.saas.dark.css
    • +
  • dx.light.css
    • +
  • dx.dark.css
    • +
  • dx.carmine.css
    • +
  • dx.softblue.css
    • +
  • dx.darkmoon.css
    • +
  • dx.darkviolet.css
    • +
  • dx.greenmist.css
    • +
  • dx.contrast.css
-
Fluent Compact
+
Generic Compact
    -
  • dx.fluent.blue.light.compact.css
    • -
  • dx.fluent.blue.dark.compact.css
    • -
  • dx.fluent.saas.light.compact.css
    • -
  • dx.fluent.saas.dark.compact.css
    • +
  • dx.light.compact.css
    • +
  • dx.dark.compact.css
    • +
  • dx.carmine.compact.css
    • +
  • dx.softblue.compact.css
    • +
  • dx.darkmoon.compact.css
    • +
  • dx.darkviolet.compact.css
    • +
  • dx.greenmist.compact.css
    • +
  • dx.contrast.compact.css
-
+
CSS themes are designed to customize HTML-based UI components. However, [SVG-based UI components](/concepts/60%20Themes%20and%20Styles/00%20Styling%20Methods.md '/Documentation/Guide/Themes_and_Styles/Styling_Methods/') use their own themes to assume an appearance that matches a particular CSS theme. Refer to the [Themes](/concepts/60%20Themes%20and%20Styles/20%20SVG-Based%20Components%20Customization/15%20Themes/00%20Themes.md '/Documentation/Guide/Themes_and_Styles/SVG-Based_Components_Customization/#Themes') article for more information on themes in SVG-based UI components. @@ -324,7 +351,4 @@ CSS themes are designed to customize HTML-based UI components. However, [SVG-bas margin-right: 15px; vertical-align: middle; } - .second-level:last-child { - border-left: 1px solid #e6e6e6; - } diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md new file mode 100644 index 0000000000..2dcafd952d --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md @@ -0,0 +1 @@ +Fluent Next themes are based on the DevExpress Design System and support multiple customization options. \ No newline at end of file diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md new file mode 100644 index 0000000000..f135716fdb --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -0,0 +1,46 @@ +Fluent Next themes ship with CSS variables defined in the DevExpress Design System. Refer to the following help topics for additional information about key styling principles and a list of available CSS variables: + +- [Colors](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) +- [Typography](https://docs.devexpress.com/DesignSystem/405635/typography) +- [Spacing](https://docs.devexpress.com/DesignSystem/405633/spacing) +- [Borders](https://docs.devexpress.com/DesignSystem/405632/border) +- [Opacity](https://docs.devexpress.com/DesignSystem/405634/opacity) +- [Shadows](https://docs.devexpress.com/DesignSystem/405690/shadows) + +You can apply these variables to custom elements to ensure a consistent look across your application. The following example customizes an element in multiple states (rest and hover): + + + .info-card { + /* Surface and content colors */ + background-color: var(--dxds-color-surface-neutral-default-rest); + color: var(--dxds-color-content-neutral-default-rest); + + /* Spacing */ + padding: var(--dxds-spacing-240); + margin-bottom: var(--dxds-spacing-160); + + /* Borders */ + border: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest); + border-radius: var(--dxds-border-radius-40); + + /* Typography */ + font-size: var(--dxds-font-size-base-md); + line-height: var(--dxds-line-height-base-md); + + /* Shadow */ + box-shadow: var(--dxds-box-shadow-sm); + } + + .info-card:hover { + background-color: var(--dxds-color-surface-neutral-default-hovered); + border-color: var(--dxds-color-border-neutral-default-hovered); + } + +You can also override variables to modify styles for custom elements and DevExtreme components. The following example overrides the primary color within the `.custom-primary` selector: + + + .custom-primary { + --dxds-color-surface-primary-default-rest: var(--dxds-color-surface-utility-green-default-rest); + } + +Apply the `.custom-primary` class to custom elements and DevExtreme components to use the modified primary color. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md new file mode 100644 index 0000000000..0f7f0a3a03 --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md @@ -0,0 +1,9 @@ +The following naming convention applies to CSS variables in Fluent Next themes: + +- `--dxds-*` +Design System CSS variables that serve as public APIs. Use these variables to customize your DevExtreme-powered application. + +- `--dx-*` +Internal CSS variables and classes used by DevExtreme components. May change between versions. + +We recommend that you do not use internal variables and classes to customize your DevExtreme-powered application. Use public `--dxds-*` variables only. \ No newline at end of file diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md new file mode 100644 index 0000000000..39de4eebbd --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md @@ -0,0 +1 @@ +This section describes accent colors in Fluent Next themes. \ No newline at end of file diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md new file mode 100644 index 0000000000..70cee742e0 --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -0,0 +1,1567 @@ +Fluent Next themes ship with 11 predefined accent colors. The blue accent color is available as part of complete theme stylesheets (for instance, `dx.fluent-next.blue.light`). To apply another color, add one of the following `:root` styles to your application before you load a Fluent Next stylesheet: + +--- + +##### Blue + + + :root { + --dxds-primary-10: #f4f8fc; + --dxds-primary-20: #e7eff9; + --dxds-primary-30: #cce1f8; + --dxds-primary-40: #b4d2f4; + --dxds-primary-50: #9cc3f0; + --dxds-primary-60: #82b4ea; + --dxds-primary-70: #67a2e1; + --dxds-primary-80: #4b90d9; + --dxds-primary-90: #2b7ecf; + --dxds-primary-100: #0f6cbd; + --dxds-primary-110: #015fab; + --dxds-primary-120: #005397; + --dxds-primary-130: #004884; + --dxds-primary-140: #003c70; + --dxds-primary-150: #002e58; + --dxds-primary-160: #002244; + --dxds-primary-170: #00162f; + --dxds-primary-180: #010b1c; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Cool Blue + + + :root { + --dxds-primary-10: #f5f8f9; + --dxds-primary-20: #e9f0f3; + --dxds-primary-30: #cfe2ea; + --dxds-primary-40: #b9d4e0; + --dxds-primary-50: #a2c6d6; + --dxds-primary-60: #8ab7cb; + --dxds-primary-70: #72a9bf; + --dxds-primary-80: #5a9ab4; + --dxds-primary-90: #408ca9; + --dxds-primary-100: #2d7d9a; + --dxds-primary-110: #226e89; + --dxds-primary-120: #195f77; + --dxds-primary-130: #125066; + --dxds-primary-140: #0a4255; + --dxds-primary-150: #073342; + --dxds-primary-160: #042632; + --dxds-primary-170: #031922; + --dxds-primary-180: #020d13; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Desert + + + :root { + --dxds-primary-10: #f8f7f5; + --dxds-primary-20: #f0eee9; + --dxds-primary-30: #e2ded1; + --dxds-primary-40: #d5cfbc; + --dxds-primary-50: #c7bfa7; + --dxds-primary-60: #b9af91; + --dxds-primary-70: #aca07c; + --dxds-primary-80: #9f9268; + --dxds-primary-90: #928354; + --dxds-primary-100: #847545; + --dxds-primary-110: #746639; + --dxds-primary-120: #64572f; + --dxds-primary-130: #544925; + --dxds-primary-140: #453b1c; + --dxds-primary-150: #352d14; + --dxds-primary-160: #27210d; + --dxds-primary-170: #1a1607; + --dxds-primary-180: #0e0b03; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Mint + + + :root { + --dxds-primary-10: #f2f9f7; + --dxds-primary-20: #e2f3ef; + --dxds-primary-30: #bce9df; + --dxds-primary-40: #99dfd0; + --dxds-primary-50: #73d4c1; + --dxds-primary-60: #40c8b2; + --dxds-primary-70: #00b9a2; + --dxds-primary-80: #00a792; + --dxds-primary-90: #009683; + --dxds-primary-100: #018574; + --dxds-primary-110: #007566; + --dxds-primary-120: #006558; + --dxds-primary-130: #00564a; + --dxds-primary-140: #00473d; + --dxds-primary-150: #00362e; + --dxds-primary-160: #002922; + --dxds-primary-170: #001b17; + --dxds-primary-180: #000f0b; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Moss + + + :root { + --dxds-primary-10: #f6f8f7; + --dxds-primary-20: #ecefee; + --dxds-primary-30: #d7e0de; + --dxds-primary-40: #c5d2cf; + --dxds-primary-50: #b3c4bf; + --dxds-primary-60: #a0b5af; + --dxds-primary-70: #88a19a; + --dxds-primary-80: #718e86; + --dxds-primary-90: #5b7b73; + --dxds-primary-100: #486860; + --dxds-primary-110: #405e57; + --dxds-primary-120: #39544d; + --dxds-primary-130: #324a44; + --dxds-primary-140: #2c413c; + --dxds-primary-150: #21322d; + --dxds-primary-160: #182522; + --dxds-primary-170: #0f1816; + --dxds-primary-180: #070d0b; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Orchid + + + :root { + --dxds-primary-10: #fbf5fa; + --dxds-primary-20: #f8e9f5; + --dxds-primary-30: #f6d1ee; + --dxds-primary-40: #f1bbe7; + --dxds-primary-50: #eaa5de; + --dxds-primary-60: #e28dd5; + --dxds-primary-70: #dc78ce; + --dxds-primary-80: #d662c7; + --dxds-primary-90: #cf4abf; + --dxds-primary-100: #c239b3; + --dxds-primary-110: #ab2a9e; + --dxds-primary-120: #941d88; + --dxds-primary-130: #7c1272; + --dxds-primary-140: #66055d; + --dxds-primary-150: #4f0449; + --dxds-primary-160: #3d0337; + --dxds-primary-170: #2a0226; + --dxds-primary-180: #180116; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Purple + + + :root { + --dxds-primary-10: #f6f7fc; + --dxds-primary-20: #eceef9; + --dxds-primary-30: #d7dcfa; + --dxds-primary-40: #c5ccf7; + --dxds-primary-50: #b3bbf4; + --dxds-primary-60: #a0a9ee; + --dxds-primary-70: #8d96e7; + --dxds-primary-80: #7b83e0; + --dxds-primary-90: #6a70d7; + --dxds-primary-100: #5b5fc7; + --dxds-primary-110: #5053b3; + --dxds-primary-120: #45479f; + --dxds-primary-130: #3a3c89; + --dxds-primary-140: #303275; + --dxds-primary-150: #24265b; + --dxds-primary-160: #1a1b46; + --dxds-primary-170: #101131; + --dxds-primary-180: #08081d; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Rose + + + :root { + --dxds-primary-10: #fef5f6; + --dxds-primary-20: #fee8eb; + --dxds-primary-30: #ffd0d6; + --dxds-primary-40: #ffb9c3; + --dxds-primary-50: #ffa0ae; + --dxds-primary-60: #ff8399; + --dxds-primary-70: #fd6b89; + --dxds-primary-80: #fb4f79; + --dxds-primary-90: #f72a6a; + --dxds-primary-100: #ea005e; + --dxds-primary-110: #cb0050; + --dxds-primary-120: #ad0043; + --dxds-primary-130: #8f0036; + --dxds-primary-140: #73002a; + --dxds-primary-150: #5a001f; + --dxds-primary-160: #450016; + --dxds-primary-170: #31000d; + --dxds-primary-180: #1e0006; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Rust + + + :root { + --dxds-primary-10: #fdf5f3; + --dxds-primary-20: #fceae5; + --dxds-primary-30: #ffd3c7; + --dxds-primary-40: #fdbeac; + --dxds-primary-50: #faa892; + --dxds-primary-60: #f59176; + --dxds-primary-70: #f17c5d; + --dxds-primary-80: #ed6542; + --dxds-primary-90: #e74d21; + --dxds-primary-100: #da3b01; + --dxds-primary-110: #be3200; + --dxds-primary-120: #a22900; + --dxds-primary-130: #882100; + --dxds-primary-140: #6e1900; + --dxds-primary-150: #561100; + --dxds-primary-160: #420b00; + --dxds-primary-170: #2f0500; + --dxds-primary-180: #1c0200; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Steel + + + :root { + --dxds-primary-10: #f7f7f8; + --dxds-primary-20: #edeef1; + --dxds-primary-30: #dadee4; + --dxds-primary-40: #cad0d8; + --dxds-primary-50: #b8c0cb; + --dxds-primary-60: #a7b0be; + --dxds-primary-70: #96a1b1; + --dxds-primary-80: #8693a5; + --dxds-primary-90: #768498; + --dxds-primary-100: #68768a; + --dxds-primary-110: #5a677a; + --dxds-primary-120: #4d5869; + --dxds-primary-130: #404a59; + --dxds-primary-140: #343c49; + --dxds-primary-150: #272e38; + --dxds-primary-160: #1c222a; + --dxds-primary-170: #12161c; + --dxds-primary-180: #090b0f; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +##### Storm + + + :root { + --dxds-primary-10: #f7f7f7; + --dxds-primary-20: #efeeee; + --dxds-primary-30: #dfdedd; + --dxds-primary-40: #d0cfce; + --dxds-primary-50: #c1bfbe; + --dxds-primary-60: #b1afad; + --dxds-primary-70: #9f9d9b; + --dxds-primary-80: #8e8c8a; + --dxds-primary-90: #7e7b79; + --dxds-primary-100: #6d6a68; + --dxds-primary-110: #615e5c; + --dxds-primary-120: #555250; + --dxds-primary-130: #494745; + --dxds-primary-140: #3d3b3a; + --dxds-primary-150: #2f2d2c; + --dxds-primary-160: #232121; + --dxds-primary-170: #171615; + --dxds-primary-180: #0c0b0b; + --dxds-secondary-10: #f7f7f7; + --dxds-secondary-20: #f3f3f3; + --dxds-secondary-30: #ececec; + --dxds-secondary-40: #e6e6e6; + --dxds-secondary-50: #dfdfdf; + --dxds-secondary-60: #d8d8d8; + --dxds-secondary-70: #d2d2d2; + --dxds-secondary-80: #cccccc; + --dxds-secondary-90: #c5c5c5; + --dxds-secondary-100: #bebebe; + --dxds-secondary-110: #a6a6a6; + --dxds-secondary-120: #8e8e8e; + --dxds-secondary-130: #747474; + --dxds-secondary-140: #5b5b5b; + --dxds-secondary-150: #444444; + --dxds-secondary-160: #303030; + --dxds-secondary-170: #1d1d1d; + --dxds-secondary-180: #0b0b0b; + --dxds-info-10: #f5f7fd; + --dxds-info-20: #e9eefc; + --dxds-info-30: #d1ddff; + --dxds-info-40: #bcceff; + --dxds-info-50: #a7bdff; + --dxds-info-60: #91abff; + --dxds-info-70: #7e9bfe; + --dxds-info-80: #6c8bfc; + --dxds-info-90: #5b7afa; + --dxds-info-100: #4f6bed; + --dxds-info-110: #425bd4; + --dxds-info-120: #374cb9; + --dxds-info-130: #2c3e9e; + --dxds-info-140: #223084; + --dxds-info-150: #192467; + --dxds-info-160: #111a50; + --dxds-info-170: #0a1138; + --dxds-info-180: #040822; + --dxds-success-10: #f5f9f4; + --dxds-success-20: #e8f2e7; + --dxds-success-30: #cee6cc; + --dxds-success-40: #b8dab4; + --dxds-success-50: #a0ce9c; + --dxds-success-60: #88c183; + --dxds-success-70: #6cb068; + --dxds-success-80: #509f4b; + --dxds-success-90: #2f8e2c; + --dxds-success-100: #107c10; + --dxds-success-110: #066f07; + --dxds-success-120: #026304; + --dxds-success-130: #035604; + --dxds-success-140: #024a03; + --dxds-success-150: #023903; + --dxds-success-160: #022b02; + --dxds-success-170: #011d01; + --dxds-success-180: #011001; + --dxds-warning-10: #fdf6f3; + --dxds-warning-20: #fbebe4; + --dxds-warning-30: #fdd4c3; + --dxds-warning-40: #fbc0a8; + --dxds-warning-50: #f7aa8b; + --dxds-warning-60: #f1946d; + --dxds-warning-70: #f68758; + --dxds-warning-80: #f97a41; + --dxds-warning-90: #fc6b21; + --dxds-warning-100: #f7630c; + --dxds-warning-110: #d25100; + --dxds-warning-120: #ad4100; + --dxds-warning-130: #893200; + --dxds-warning-140: #672300; + --dxds-warning-150: #501a00; + --dxds-warning-160: #3d1200; + --dxds-warning-170: #2b0a00; + --dxds-warning-180: #1a0400; + --dxds-danger-10: #fdf5f4; + --dxds-danger-20: #fceae7; + --dxds-danger-30: #ffd2cc; + --dxds-danger-40: #ffbcb4; + --dxds-danger-50: #fca59c; + --dxds-danger-60: #f78d84; + --dxds-danger-70: #ee726a; + --dxds-danger-80: #e4554f; + --dxds-danger-90: #d83334; + --dxds-danger-100: #c50f1f; + --dxds-danger-110: #b20017; + --dxds-danger-120: #9d0013; + --dxds-danger-130: #89000f; + --dxds-danger-140: #76000b; + --dxds-danger-150: #5c0007; + --dxds-danger-160: #470004; + --dxds-danger-170: #320102; + --dxds-danger-180: #1e0101; + --dxds-neutral-10: #ffffff; + --dxds-neutral-20: #fafafa; + --dxds-neutral-30: #f5f5f5; + --dxds-neutral-40: #ebebeb; + --dxds-neutral-50: #e1e1e1; + --dxds-neutral-60: #d7d7d7; + --dxds-neutral-70: #cbcbcb; + --dxds-neutral-80: #c0c0c0; + --dxds-neutral-90: #b6b6b6; + --dxds-neutral-100: #ababab; + --dxds-neutral-110: #a1a1a1; + --dxds-neutral-120: #969696; + --dxds-neutral-130: #8a8a8a; + --dxds-neutral-140: #7f7f7f; + --dxds-neutral-150: #767676; + --dxds-neutral-160: #6e6e6e; + --dxds-neutral-170: #656565; + --dxds-neutral-180: #5c5c5c; + --dxds-neutral-190: #545454; + --dxds-neutral-200: #4c4c4c; + --dxds-neutral-210: #444444; + --dxds-neutral-220: #3b3b3b; + --dxds-neutral-230: #333333; + --dxds-neutral-240: #2c2c2c; + --dxds-neutral-250: #242424; + --dxds-neutral-260: #1d1d1d; + --dxds-neutral-270: #161616; + --dxds-neutral-280: #0a0a0a; + } + +--- diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md new file mode 100644 index 0000000000..7d59c866d2 --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md @@ -0,0 +1,29 @@ +You can define a custom accent color as a CSS variable and use this color to calculate `--dxds-primary-*` variables as follows: + + + /* Set --dx-accent-color to a brand color; load after the theme stylesheet. */ + :root { + --dx-accent-color-source: var(--dx-accent-color, #0f6cbd); + --dx-accent-lightness-max: 0.95; + --dx-accent-lightness-min: 0.15; + --dx-accent-chroma-min: 0.04; + + --dxds-primary-10: oklch(from var(--dx-accent-color-source) calc(l + 9 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 9 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-20: oklch(from var(--dx-accent-color-source) calc(l + 8 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 8 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-30: oklch(from var(--dx-accent-color-source) calc(l + 7 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 7 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-40: oklch(from var(--dx-accent-color-source) calc(l + 6 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 6 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-50: oklch(from var(--dx-accent-color-source) calc(l + 5 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 5 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-60: oklch(from var(--dx-accent-color-source) calc(l + 4 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 4 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-70: oklch(from var(--dx-accent-color-source) calc(l + 3 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 3 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-80: oklch(from var(--dx-accent-color-source) calc(l + 2 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 2 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-90: oklch(from var(--dx-accent-color-source) calc(l + 1 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 1 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); + --dxds-primary-100: oklch(from var(--dx-accent-color-source) l c h); + --dxds-primary-110: oklch(from var(--dx-accent-color-source) calc(l - 1 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 1 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-120: oklch(from var(--dx-accent-color-source) calc(l - 2 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 2 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-130: oklch(from var(--dx-accent-color-source) calc(l - 3 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 3 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-140: oklch(from var(--dx-accent-color-source) calc(l - 4 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 4 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-150: oklch(from var(--dx-accent-color-source) calc(l - 5 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 5 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-160: oklch(from var(--dx-accent-color-source) calc(l - 6 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 6 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-170: oklch(from var(--dx-accent-color-source) calc(l - 7 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 7 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-180: oklch(from var(--dx-accent-color-source) calc(l - 8 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 8 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + } From 6c46a34f9400ce62e1d92e15263869feaf27abb1 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 21 Aug 2026 07:57:42 +0400 Subject: [PATCH 02/13] Add Updates & Code Snippet Fixes --- .../50 Apply a Theme/05 Using SCSS.md | 6 ++++ .../05 Predefined Themes/55 Color Swatches.md | 6 ++++ .../05 CSS Variables/00 CSS Variables.md | 36 ++++++++++++++++--- .../05 Predefined Accent Colors.md | 26 -------------- .../08 ThemeBuilder/ThemeBuilder.md | 7 +++- 5 files changed, 49 insertions(+), 32 deletions(-) diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/50 Apply a Theme/05 Using SCSS.md b/concepts/60 Themes and Styles/05 Predefined Themes/50 Apply a Theme/05 Using SCSS.md index ed3b860bd8..38f6620ff9 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/50 Apply a Theme/05 Using SCSS.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/50 Apply a Theme/05 Using SCSS.md @@ -1,3 +1,9 @@ +[note] + +This section does not apply to Fluent Next themes. + +[/note] + You can import a theme bundle from the `bundles` folder of the `devextreme` package into the root `.scss` file: /* @use 'devextreme/scss/bundles/dx.theme_name.scss'; */ diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/55 Color Swatches.md b/concepts/60 Themes and Styles/05 Predefined Themes/55 Color Swatches.md index 31854af3ab..12a9788edf 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/55 Color Swatches.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/55 Color Swatches.md @@ -1,3 +1,9 @@ +[note] + +This section does not apply to Fluent Next themes. To customize these themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/). + +[/note] + Color swatches are secondary color schemes used alongside a primary color scheme. You can use them to stylize parts of your application differently, for instance, when the navigation sidebar should be dark and the content area light. A color swatch is defined by scoped CSS rules that are prefixed with a specific selector: `dx-swatch-xxx` (for instance, `dx-swatch-green`). To apply a color swatch to a part of an HTML document, wrap this part as follows: diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index f135716fdb..15caf07e5f 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -7,7 +7,7 @@ Fluent Next themes ship with CSS variables defined in the DevExpress Design Syst - [Opacity](https://docs.devexpress.com/DesignSystem/405634/opacity) - [Shadows](https://docs.devexpress.com/DesignSystem/405690/shadows) -You can apply these variables to custom elements to ensure a consistent look across your application. The following example customizes an element in multiple states (rest and hover): +You can apply these variables to custom elements to ensure a consistent look across your application. The following example uses Design System variables for rest and hover element states: .info-card { @@ -36,11 +36,37 @@ You can apply these variables to custom elements to ensure a consistent look acr border-color: var(--dxds-color-border-neutral-default-hovered); } -You can also override variables to modify styles for custom elements and DevExtreme components. The following example overrides the primary color within the `.custom-primary` selector: +You can also override variables to modify styles for DevExtreme components. This allows you to apply unique styles to different parts of your application. For instance, you can use the following [semantic variable](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) overrides to apply dark mode styles to parts of a light mode application: - .custom-primary { - --dxds-color-surface-primary-default-rest: var(--dxds-color-surface-utility-green-default-rest); + /* Using dxds variables */ + .dark-colors-dx { + --dxds-color-surface-neutral-default-rest: var(--dxds-color-surface-neutral-default-inverted-rest); + --dxds-color-content-neutral-default-rest: var(--dxds-color-content-neutral-default-inverted-rest); + --dxds-color-border-neutral-default-rest: var(--dxds-color-border-neutral-default-inverted-rest); + } + + /* Using custom colors */ + .dark-colors-custom { + --dxds-color-surface-neutral-default-rest: #341A51; + --dxds-color-content-neutral-default-rest: #341A51; + --dxds-color-border-neutral-default-rest: #532982; + } + +CSS variable overrides also allow you to apply custom colors to specific parts of your application. You can define custom colors or use [utility palette](https://docs.devexpress.com/DesignSystem/405639/colors/utility-palettes/fluent-utility-palette) colors: + + + /* Utility palette colors */ + .dark-colors-dx { + --dxds-color-surface-primary-default-rest: var(--dxds-utility-yellow-40); + --dxds-color-content-primary-default-rest: var(--dxds-utility-yellow-50); + --dxds-color-border-primary-default-rest: var(--dxds-utility-yellow-60); + } + + /* Custom colors */ + .dark-colors-dx { + --dxds-color-surface-primary-default-rest: #F2C661; + --dxds-color-content-primary-default-rest: #EFB839; + --dxds-color-border-primary-default-rest: #EDAD1C; } -Apply the `.custom-primary` class to custom elements and DevExtreme components to use the modified primary color. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md index 70cee742e0..4db68491c0 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -1,9 +1,5 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color is available as part of complete theme stylesheets (for instance, `dx.fluent-next.blue.light`). To apply another color, add one of the following `:root` styles to your application before you load a Fluent Next stylesheet: ---- - -##### Blue - :root { --dxds-primary-10: #f4f8fc; @@ -144,8 +140,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Cool Blue - :root { --dxds-primary-10: #f5f8f9; @@ -286,8 +280,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Desert - :root { --dxds-primary-10: #f8f7f5; @@ -428,8 +420,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Mint - :root { --dxds-primary-10: #f2f9f7; @@ -570,8 +560,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Moss - :root { --dxds-primary-10: #f6f8f7; @@ -712,8 +700,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Orchid - :root { --dxds-primary-10: #fbf5fa; @@ -854,8 +840,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Purple - :root { --dxds-primary-10: #f6f7fc; @@ -996,8 +980,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Rose - :root { --dxds-primary-10: #fef5f6; @@ -1138,8 +1120,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Rust - :root { --dxds-primary-10: #fdf5f3; @@ -1280,8 +1260,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Steel - :root { --dxds-primary-10: #f7f7f8; @@ -1422,8 +1400,6 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-280: #0a0a0a; } -##### Storm - :root { --dxds-primary-10: #f7f7f7; @@ -1563,5 +1539,3 @@ Fluent Next themes ship with 11 predefined accent colors. The blue accent color --dxds-neutral-270: #161616; --dxds-neutral-280: #0a0a0a; } - ---- diff --git a/concepts/60 Themes and Styles/08 ThemeBuilder/ThemeBuilder.md b/concepts/60 Themes and Styles/08 ThemeBuilder/ThemeBuilder.md index 97deb57c75..a3deda080c 100644 --- a/concepts/60 Themes and Styles/08 ThemeBuilder/ThemeBuilder.md +++ b/concepts/60 Themes and Styles/08 ThemeBuilder/ThemeBuilder.md @@ -2,4 +2,9 @@ The ThemeBuilder allows you to create custom themes based on Bootstrap or predef ![DevExtreme ThemeBuilder UI: Main View](/images/Common/ThemeBuilder/themebuilder-main@2x.png) -[important] The ThemeBuilder works only with HTML-based UI components. To create a custom theme for an SVG-based UI component, follow the instructions from [this article](/concepts/60%20Themes%20and%20Styles/20%20SVG-Based%20Components%20Customization/15%20Themes/30%20Create%20a%20Custom%20Theme.md '/Documentation/Guide/Themes_and_Styles/SVG-Based_Components_Customization/#Themes/Create_a_Custom_Theme'). +[note] + +- The ThemeBuilder supports only HTML-based UI components. To create a custom theme for SVG-based UI components, refer to the following article: [SVG-Based Components Customization - Create a Custom Theme](/concepts/60%20Themes%20and%20Styles/20%20SVG-Based%20Components%20Customization/15%20Themes/30%20Create%20a%20Custom%20Theme.md '/Documentation/Guide/Themes_and_Styles/SVG-Based_Components_Customization/#Themes/Create_a_Custom_Theme'). +- This section does not apply to Fluent Next themes. To customize these themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/). + +[/note] From 0114e719a076c50343ac5d29f706465022e5a500 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 26 Aug 2026 09:01:58 +0400 Subject: [PATCH 03/13] Update Following Feedback --- .../00 Styling Overview/05 Themes.md | 4 +- .../05 CSS Variables/00 CSS Variables.md | 7 +- .../05 Variable Naming Convention.md | 2 +- .../10 Accent Colors/00 Accent Colors.md | 4 +- .../05 Predefined Accent Colors.md | 1597 +---------------- .../10 Custom Accent Colors.md | 64 +- 6 files changed, 113 insertions(+), 1565 deletions(-) diff --git a/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md b/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md index 7764bde902..4456d3dae4 100644 --- a/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md +++ b/concepts/60 Themes and Styles/00 Styling Overview/05 Themes.md @@ -7,8 +7,8 @@ DevExtreme ships with a set of built-in themes: - Custom accent color support - Light and dark modes - Compact mode - - High contrast mode - Theme customization using public `--dxds-*` CSS variables - **Fluent, Material, and Generic** -Themes that use SCSS to implement styles. For more information, refer to the following help topic: [Predefined Themes](). +Themes that use SCSS to implement styles. For more information, refer to the following help topic: [Predefined Themes](/Documentation/Guide/Themes_and_Styles/Predefined_Themes/). + diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index 15caf07e5f..117d008923 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -49,7 +49,7 @@ You can also override variables to modify styles for DevExtreme components. This /* Using custom colors */ .dark-colors-custom { --dxds-color-surface-neutral-default-rest: #341A51; - --dxds-color-content-neutral-default-rest: #341A51; + --dxds-color-content-neutral-default-rest: #F5F0FA; --dxds-color-border-neutral-default-rest: #532982; } @@ -57,16 +57,15 @@ CSS variable overrides also allow you to apply custom colors to specific parts o /* Utility palette colors */ - .dark-colors-dx { + .yellow-accent { --dxds-color-surface-primary-default-rest: var(--dxds-utility-yellow-40); --dxds-color-content-primary-default-rest: var(--dxds-utility-yellow-50); --dxds-color-border-primary-default-rest: var(--dxds-utility-yellow-60); } /* Custom colors */ - .dark-colors-dx { + .yellow-accent { --dxds-color-surface-primary-default-rest: #F2C661; --dxds-color-content-primary-default-rest: #EFB839; --dxds-color-border-primary-default-rest: #EDAD1C; } - diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md index 0f7f0a3a03..8c992889e4 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md @@ -6,4 +6,4 @@ Design System CSS variables that serve as public APIs. Use these variables to cu - `--dx-*` Internal CSS variables and classes used by DevExtreme components. May change between versions. -We recommend that you do not use internal variables and classes to customize your DevExtreme-powered application. Use public `--dxds-*` variables only. \ No newline at end of file +We recommend that you do not use internal variables to customize your DevExtreme-powered application. Use public `--dxds-*` variables only. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md index 39de4eebbd..219a7a4032 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/00 Accent Colors.md @@ -1 +1,3 @@ -This section describes accent colors in Fluent Next themes. \ No newline at end of file +This section describes accent colors in Fluent Next themes. + +[note] Accent colors in Fluent Next themes apply to HTML-based components only. Refer to the following help topic to customize colors in SVG-based components: [SVG-Based Components Customization - Palettes](/Documentation/Guide/Themes_and_Styles/SVG-Based_Components_Customization/#Palettes). diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md index 4db68491c0..ea1957e2db 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -1,1541 +1,70 @@ -Fluent Next themes ship with 11 predefined accent colors. The blue accent color is available as part of complete theme stylesheets (for instance, `dx.fluent-next.blue.light`). To apply another color, add one of the following `:root` styles to your application before you load a Fluent Next stylesheet: +Fluent Next themes ship with 11 predefined accent colors. To apply one of these colors, import an accent stylesheet after the theme: - - :root { - --dxds-primary-10: #f4f8fc; - --dxds-primary-20: #e7eff9; - --dxds-primary-30: #cce1f8; - --dxds-primary-40: #b4d2f4; - --dxds-primary-50: #9cc3f0; - --dxds-primary-60: #82b4ea; - --dxds-primary-70: #67a2e1; - --dxds-primary-80: #4b90d9; - --dxds-primary-90: #2b7ecf; - --dxds-primary-100: #0f6cbd; - --dxds-primary-110: #015fab; - --dxds-primary-120: #005397; - --dxds-primary-130: #004884; - --dxds-primary-140: #003c70; - --dxds-primary-150: #002e58; - --dxds-primary-160: #002244; - --dxds-primary-170: #00162f; - --dxds-primary-180: #010b1c; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } + + import 'devextreme/dist/css/dx.fluent-next.blue.light.css'; + import 'devextreme/dist/css/accents/rose.css'; - - :root { - --dxds-primary-10: #f5f8f9; - --dxds-primary-20: #e9f0f3; - --dxds-primary-30: #cfe2ea; - --dxds-primary-40: #b9d4e0; - --dxds-primary-50: #a2c6d6; - --dxds-primary-60: #8ab7cb; - --dxds-primary-70: #72a9bf; - --dxds-primary-80: #5a9ab4; - --dxds-primary-90: #408ca9; - --dxds-primary-100: #2d7d9a; - --dxds-primary-110: #226e89; - --dxds-primary-120: #195f77; - --dxds-primary-130: #125066; - --dxds-primary-140: #0a4255; - --dxds-primary-150: #073342; - --dxds-primary-160: #042632; - --dxds-primary-170: #031922; - --dxds-primary-180: #020d13; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } + + + - - :root { - --dxds-primary-10: #f8f7f5; - --dxds-primary-20: #f0eee9; - --dxds-primary-30: #e2ded1; - --dxds-primary-40: #d5cfbc; - --dxds-primary-50: #c7bfa7; - --dxds-primary-60: #b9af91; - --dxds-primary-70: #aca07c; - --dxds-primary-80: #9f9268; - --dxds-primary-90: #928354; - --dxds-primary-100: #847545; - --dxds-primary-110: #746639; - --dxds-primary-120: #64572f; - --dxds-primary-130: #544925; - --dxds-primary-140: #453b1c; - --dxds-primary-150: #352d14; - --dxds-primary-160: #27210d; - --dxds-primary-170: #1a1607; - --dxds-primary-180: #0e0b03; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } +The following accent stylesheets are available: - - :root { - --dxds-primary-10: #f2f9f7; - --dxds-primary-20: #e2f3ef; - --dxds-primary-30: #bce9df; - --dxds-primary-40: #99dfd0; - --dxds-primary-50: #73d4c1; - --dxds-primary-60: #40c8b2; - --dxds-primary-70: #00b9a2; - --dxds-primary-80: #00a792; - --dxds-primary-90: #009683; - --dxds-primary-100: #018574; - --dxds-primary-110: #007566; - --dxds-primary-120: #006558; - --dxds-primary-130: #00564a; - --dxds-primary-140: #00473d; - --dxds-primary-150: #00362e; - --dxds-primary-160: #002922; - --dxds-primary-170: #001b17; - --dxds-primary-180: #000f0b; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Accent ColorStylesheet
Blueaccents/blue.css
Cool Blueaccents/cool-blue.css
Desertaccents/desert.css
Mintaccents/mint.css
Mossaccents/moss.css
Orchidaccents/orchid.css
Purpleaccents/purple.css
Roseaccents/rose.css
Rustaccents/rust.css
Steelaccents/steel.css
Stormaccents/storm.css
- - :root { - --dxds-primary-10: #f6f8f7; - --dxds-primary-20: #ecefee; - --dxds-primary-30: #d7e0de; - --dxds-primary-40: #c5d2cf; - --dxds-primary-50: #b3c4bf; - --dxds-primary-60: #a0b5af; - --dxds-primary-70: #88a19a; - --dxds-primary-80: #718e86; - --dxds-primary-90: #5b7b73; - --dxds-primary-100: #486860; - --dxds-primary-110: #405e57; - --dxds-primary-120: #39544d; - --dxds-primary-130: #324a44; - --dxds-primary-140: #2c413c; - --dxds-primary-150: #21322d; - --dxds-primary-160: #182522; - --dxds-primary-170: #0f1816; - --dxds-primary-180: #070d0b; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } +[note] - - :root { - --dxds-primary-10: #fbf5fa; - --dxds-primary-20: #f8e9f5; - --dxds-primary-30: #f6d1ee; - --dxds-primary-40: #f1bbe7; - --dxds-primary-50: #eaa5de; - --dxds-primary-60: #e28dd5; - --dxds-primary-70: #dc78ce; - --dxds-primary-80: #d662c7; - --dxds-primary-90: #cf4abf; - --dxds-primary-100: #c239b3; - --dxds-primary-110: #ab2a9e; - --dxds-primary-120: #941d88; - --dxds-primary-130: #7c1272; - --dxds-primary-140: #66055d; - --dxds-primary-150: #4f0449; - --dxds-primary-160: #3d0337; - --dxds-primary-170: #2a0226; - --dxds-primary-180: #180116; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } +- Blue is the default accent color in Fluent Next themes. You do not need to import the blue accent stylesheet to apply this accent color. +- Theme and accent stylesheets define colors on the same selector (`:root`). To ensure accent colors are applied, load your app's accent stylesheet immediately after the theme stylesheet. +- Accent stylesheets apply to all variations of Fluent Next (light and dark modes, standard and compact sizes). To switch theme modes or sizes, swap the theme stylesheet only. - - :root { - --dxds-primary-10: #f6f7fc; - --dxds-primary-20: #eceef9; - --dxds-primary-30: #d7dcfa; - --dxds-primary-40: #c5ccf7; - --dxds-primary-50: #b3bbf4; - --dxds-primary-60: #a0a9ee; - --dxds-primary-70: #8d96e7; - --dxds-primary-80: #7b83e0; - --dxds-primary-90: #6a70d7; - --dxds-primary-100: #5b5fc7; - --dxds-primary-110: #5053b3; - --dxds-primary-120: #45479f; - --dxds-primary-130: #3a3c89; - --dxds-primary-140: #303275; - --dxds-primary-150: #24265b; - --dxds-primary-160: #1a1b46; - --dxds-primary-170: #101131; - --dxds-primary-180: #08081d; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } - - - :root { - --dxds-primary-10: #fef5f6; - --dxds-primary-20: #fee8eb; - --dxds-primary-30: #ffd0d6; - --dxds-primary-40: #ffb9c3; - --dxds-primary-50: #ffa0ae; - --dxds-primary-60: #ff8399; - --dxds-primary-70: #fd6b89; - --dxds-primary-80: #fb4f79; - --dxds-primary-90: #f72a6a; - --dxds-primary-100: #ea005e; - --dxds-primary-110: #cb0050; - --dxds-primary-120: #ad0043; - --dxds-primary-130: #8f0036; - --dxds-primary-140: #73002a; - --dxds-primary-150: #5a001f; - --dxds-primary-160: #450016; - --dxds-primary-170: #31000d; - --dxds-primary-180: #1e0006; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } - - - :root { - --dxds-primary-10: #fdf5f3; - --dxds-primary-20: #fceae5; - --dxds-primary-30: #ffd3c7; - --dxds-primary-40: #fdbeac; - --dxds-primary-50: #faa892; - --dxds-primary-60: #f59176; - --dxds-primary-70: #f17c5d; - --dxds-primary-80: #ed6542; - --dxds-primary-90: #e74d21; - --dxds-primary-100: #da3b01; - --dxds-primary-110: #be3200; - --dxds-primary-120: #a22900; - --dxds-primary-130: #882100; - --dxds-primary-140: #6e1900; - --dxds-primary-150: #561100; - --dxds-primary-160: #420b00; - --dxds-primary-170: #2f0500; - --dxds-primary-180: #1c0200; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } - - - :root { - --dxds-primary-10: #f7f7f8; - --dxds-primary-20: #edeef1; - --dxds-primary-30: #dadee4; - --dxds-primary-40: #cad0d8; - --dxds-primary-50: #b8c0cb; - --dxds-primary-60: #a7b0be; - --dxds-primary-70: #96a1b1; - --dxds-primary-80: #8693a5; - --dxds-primary-90: #768498; - --dxds-primary-100: #68768a; - --dxds-primary-110: #5a677a; - --dxds-primary-120: #4d5869; - --dxds-primary-130: #404a59; - --dxds-primary-140: #343c49; - --dxds-primary-150: #272e38; - --dxds-primary-160: #1c222a; - --dxds-primary-170: #12161c; - --dxds-primary-180: #090b0f; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } - - - :root { - --dxds-primary-10: #f7f7f7; - --dxds-primary-20: #efeeee; - --dxds-primary-30: #dfdedd; - --dxds-primary-40: #d0cfce; - --dxds-primary-50: #c1bfbe; - --dxds-primary-60: #b1afad; - --dxds-primary-70: #9f9d9b; - --dxds-primary-80: #8e8c8a; - --dxds-primary-90: #7e7b79; - --dxds-primary-100: #6d6a68; - --dxds-primary-110: #615e5c; - --dxds-primary-120: #555250; - --dxds-primary-130: #494745; - --dxds-primary-140: #3d3b3a; - --dxds-primary-150: #2f2d2c; - --dxds-primary-160: #232121; - --dxds-primary-170: #171615; - --dxds-primary-180: #0c0b0b; - --dxds-secondary-10: #f7f7f7; - --dxds-secondary-20: #f3f3f3; - --dxds-secondary-30: #ececec; - --dxds-secondary-40: #e6e6e6; - --dxds-secondary-50: #dfdfdf; - --dxds-secondary-60: #d8d8d8; - --dxds-secondary-70: #d2d2d2; - --dxds-secondary-80: #cccccc; - --dxds-secondary-90: #c5c5c5; - --dxds-secondary-100: #bebebe; - --dxds-secondary-110: #a6a6a6; - --dxds-secondary-120: #8e8e8e; - --dxds-secondary-130: #747474; - --dxds-secondary-140: #5b5b5b; - --dxds-secondary-150: #444444; - --dxds-secondary-160: #303030; - --dxds-secondary-170: #1d1d1d; - --dxds-secondary-180: #0b0b0b; - --dxds-info-10: #f5f7fd; - --dxds-info-20: #e9eefc; - --dxds-info-30: #d1ddff; - --dxds-info-40: #bcceff; - --dxds-info-50: #a7bdff; - --dxds-info-60: #91abff; - --dxds-info-70: #7e9bfe; - --dxds-info-80: #6c8bfc; - --dxds-info-90: #5b7afa; - --dxds-info-100: #4f6bed; - --dxds-info-110: #425bd4; - --dxds-info-120: #374cb9; - --dxds-info-130: #2c3e9e; - --dxds-info-140: #223084; - --dxds-info-150: #192467; - --dxds-info-160: #111a50; - --dxds-info-170: #0a1138; - --dxds-info-180: #040822; - --dxds-success-10: #f5f9f4; - --dxds-success-20: #e8f2e7; - --dxds-success-30: #cee6cc; - --dxds-success-40: #b8dab4; - --dxds-success-50: #a0ce9c; - --dxds-success-60: #88c183; - --dxds-success-70: #6cb068; - --dxds-success-80: #509f4b; - --dxds-success-90: #2f8e2c; - --dxds-success-100: #107c10; - --dxds-success-110: #066f07; - --dxds-success-120: #026304; - --dxds-success-130: #035604; - --dxds-success-140: #024a03; - --dxds-success-150: #023903; - --dxds-success-160: #022b02; - --dxds-success-170: #011d01; - --dxds-success-180: #011001; - --dxds-warning-10: #fdf6f3; - --dxds-warning-20: #fbebe4; - --dxds-warning-30: #fdd4c3; - --dxds-warning-40: #fbc0a8; - --dxds-warning-50: #f7aa8b; - --dxds-warning-60: #f1946d; - --dxds-warning-70: #f68758; - --dxds-warning-80: #f97a41; - --dxds-warning-90: #fc6b21; - --dxds-warning-100: #f7630c; - --dxds-warning-110: #d25100; - --dxds-warning-120: #ad4100; - --dxds-warning-130: #893200; - --dxds-warning-140: #672300; - --dxds-warning-150: #501a00; - --dxds-warning-160: #3d1200; - --dxds-warning-170: #2b0a00; - --dxds-warning-180: #1a0400; - --dxds-danger-10: #fdf5f4; - --dxds-danger-20: #fceae7; - --dxds-danger-30: #ffd2cc; - --dxds-danger-40: #ffbcb4; - --dxds-danger-50: #fca59c; - --dxds-danger-60: #f78d84; - --dxds-danger-70: #ee726a; - --dxds-danger-80: #e4554f; - --dxds-danger-90: #d83334; - --dxds-danger-100: #c50f1f; - --dxds-danger-110: #b20017; - --dxds-danger-120: #9d0013; - --dxds-danger-130: #89000f; - --dxds-danger-140: #76000b; - --dxds-danger-150: #5c0007; - --dxds-danger-160: #470004; - --dxds-danger-170: #320102; - --dxds-danger-180: #1e0101; - --dxds-neutral-10: #ffffff; - --dxds-neutral-20: #fafafa; - --dxds-neutral-30: #f5f5f5; - --dxds-neutral-40: #ebebeb; - --dxds-neutral-50: #e1e1e1; - --dxds-neutral-60: #d7d7d7; - --dxds-neutral-70: #cbcbcb; - --dxds-neutral-80: #c0c0c0; - --dxds-neutral-90: #b6b6b6; - --dxds-neutral-100: #ababab; - --dxds-neutral-110: #a1a1a1; - --dxds-neutral-120: #969696; - --dxds-neutral-130: #8a8a8a; - --dxds-neutral-140: #7f7f7f; - --dxds-neutral-150: #767676; - --dxds-neutral-160: #6e6e6e; - --dxds-neutral-170: #656565; - --dxds-neutral-180: #5c5c5c; - --dxds-neutral-190: #545454; - --dxds-neutral-200: #4c4c4c; - --dxds-neutral-210: #444444; - --dxds-neutral-220: #3b3b3b; - --dxds-neutral-230: #333333; - --dxds-neutral-240: #2c2c2c; - --dxds-neutral-250: #242424; - --dxds-neutral-260: #1d1d1d; - --dxds-neutral-270: #161616; - --dxds-neutral-280: #0a0a0a; - } +[/note] diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md index 7d59c866d2..4e2ea562c6 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md @@ -1,29 +1,47 @@ You can define a custom accent color as a CSS variable and use this color to calculate `--dxds-primary-*` variables as follows: - /* Set --dx-accent-color to a brand color; load after the theme stylesheet. */ + /* Set --my-accent-color to a brand color; load after the theme stylesheet. */ :root { - --dx-accent-color-source: var(--dx-accent-color, #0f6cbd); - --dx-accent-lightness-max: 0.95; - --dx-accent-lightness-min: 0.15; - --dx-accent-chroma-min: 0.04; + --my-accent-color-source: var(--my-accent-color, #0f6cbd); + --my-accent-lightness-max: 0.975; + --my-accent-lightness-min: 0.15; + --my-accent-chroma-min: 0.01; - --dxds-primary-10: oklch(from var(--dx-accent-color-source) calc(l + 9 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 9 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-20: oklch(from var(--dx-accent-color-source) calc(l + 8 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 8 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-30: oklch(from var(--dx-accent-color-source) calc(l + 7 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 7 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-40: oklch(from var(--dx-accent-color-source) calc(l + 6 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 6 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-50: oklch(from var(--dx-accent-color-source) calc(l + 5 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 5 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-60: oklch(from var(--dx-accent-color-source) calc(l + 4 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 4 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-70: oklch(from var(--dx-accent-color-source) calc(l + 3 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 3 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-80: oklch(from var(--dx-accent-color-source) calc(l + 2 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 2 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-90: oklch(from var(--dx-accent-color-source) calc(l + 1 * (var(--dx-accent-lightness-max) - min(l, var(--dx-accent-lightness-max))) / 9) calc(c - 1 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 9) h); - --dxds-primary-100: oklch(from var(--dx-accent-color-source) l c h); - --dxds-primary-110: oklch(from var(--dx-accent-color-source) calc(l - 1 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 1 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-120: oklch(from var(--dx-accent-color-source) calc(l - 2 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 2 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-130: oklch(from var(--dx-accent-color-source) calc(l - 3 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 3 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-140: oklch(from var(--dx-accent-color-source) calc(l - 4 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 4 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-150: oklch(from var(--dx-accent-color-source) calc(l - 5 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 5 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-160: oklch(from var(--dx-accent-color-source) calc(l - 6 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 6 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-170: oklch(from var(--dx-accent-color-source) calc(l - 7 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 7 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); - --dxds-primary-180: oklch(from var(--dx-accent-color-source) calc(l - 8 * (max(l, var(--dx-accent-lightness-min)) - var(--dx-accent-lightness-min)) / 8) calc(c - 8 * (max(c, var(--dx-accent-chroma-min)) - var(--dx-accent-chroma-min)) / 8) h); + --dxds-primary-10: oklch(from var(--my-accent-color-source) calc(l + var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) calc(c - (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min))) h); + --dxds-primary-20: oklch(from var(--my-accent-color-source) calc(l + 8 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 8 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-30: oklch(from var(--my-accent-color-source) calc(l + 7 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 7 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-40: oklch(from var(--my-accent-color-source) calc(l + 6 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 6 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-50: oklch(from var(--my-accent-color-source) calc(l + 5 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 5 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-60: oklch(from var(--my-accent-color-source) calc(l + 4 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 4 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-70: oklch(from var(--my-accent-color-source) calc(l + 3 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 3 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-80: oklch(from var(--my-accent-color-source) calc(l + 2 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 2 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-90: oklch(from var(--my-accent-color-source) calc(l + 1 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 1 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); + --dxds-primary-100: var(--my-accent-color-source); + --dxds-primary-110: oklch(from var(--my-accent-color-source) calc(l - 1 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 1 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-120: oklch(from var(--my-accent-color-source) calc(l - 2 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 2 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-130: oklch(from var(--my-accent-color-source) calc(l - 3 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 3 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-140: oklch(from var(--my-accent-color-source) calc(l - 4 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 4 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-150: oklch(from var(--my-accent-color-source) calc(l - 5 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 5 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-160: oklch(from var(--my-accent-color-source) calc(l - 6 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 6 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-170: oklch(from var(--my-accent-color-source) calc(l - 7 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 7 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dxds-primary-180: oklch(from var(--my-accent-color-source) calc(l - 8 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 8 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); } + +[note] + +Older browsers may not support the [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) CSS function. To ensure these browsers do not override `--dxds-primary-*` variables with invalid values, wrap color calculations in a feature query (a [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports) CSS at-rule): + + :root { + --my-accent-color-source: var(--my-accent-color, #0f6cbd); + /* ... */ + } + + @supports (color: oklch(from red l c h)) { + :root { + --dxds-primary-10: oklch(from var(--my-accent-color-source) calc(l + var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) calc(c - (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min))) h); + /* ... */ + } + } + +[/note] From f13ac7ed46aacfaafc1bab0afa0f64444318a72a Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 26 Aug 2026 15:59:00 +0400 Subject: [PATCH 04/13] Add Additional Updates --- .../00 Predefined Themes.md | 23 ++- .../2 Without Page Reload.md | 2 + .../7 Switch Between Color Swatches.md | 6 + .../05 CSS Variables/00 CSS Variables.md | 143 +++++++++++++++++- 4 files changed, 170 insertions(+), 4 deletions(-) diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md b/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md index c8f7ccce5a..0aaccaab73 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md @@ -5,11 +5,30 @@ DevExtreme ships with the following themes (all trademarks or registered tradema - **Material Design** - **Generic** -The following colors are available: +The following colors are available out of the box: ## Fluent Next Themes -TBA: Need to discuss images in this section w/ designer +
+
+

Blue Light

+ +
+
+

Blue Light Compact

+ +
+
+

Blue Dark

+ +
+
+

Blue Dark Compact

+ +
+
+ +[note] Fluent Next themes ship with 11 predefined accent colors and support custom accent colors. Refer to the following help topic for more information: [Fluent Next Theme Customization - Accent Colors](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/#Accent_Colors). ## Fluent Themes diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md b/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md index b88f95ceb1..0e2bcb28f2 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md @@ -110,6 +110,8 @@ You can use this approach only if the themes belong to the same group. For insta The method accepts the `data-theme` attribute value. For example, if you want to switch to `dx.generic.dark`, pass `generic.dark` (without the 'dx' prefix) as an argument in the method. For a custom theme, specify the theme you used as a base. If both of your themes are derived from the same base, get the `data-theme` value from the `font-family` value of the `dx-theme-marker` CSS class, which is located in each theme's CSS file. +[note] If you use an accent color stylesheet with Fluent Next themes, you do not need to switch the accent stylesheet when switching themes. These stylesheets apply to all variations of Fluent Next (light and dark modes, standard and compact sizes). Refer to the following help topic for more information about accent colors in Fluent Next themes: [Fluent Next Theme Customization - Accent Colors](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/#Accent_Colors). + If you use SVG components, you should also call the [refreshTheme()](/api-reference/50%20Common/utils/viz/refreshTheme().md '/Documentation/ApiReference/Common/Utils/viz/#refreshTheme') method to update their theme. The following example shows how to apply the Generic Contrast theme: --- diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/7 Switch Between Color Swatches.md b/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/7 Switch Between Color Swatches.md index 7989e7705f..f6af6444a5 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/7 Switch Between Color Swatches.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/7 Switch Between Color Swatches.md @@ -1,3 +1,9 @@ +[note] + +This section does not apply to Fluent Next themes. To customize these themes, refer to the following help topic: [Fluent Next Theme Customization](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/). + +[/note] + You can use StyleSheet API to switch between color swatches. In the following code, theme swatches are called `theme.custom-scheme.light.css` and `theme.custom-scheme.dark.css` and are placed in the same folder as `index.html`. The code uses SelectBox to implement the swatch selector. To switch between themes too, call [DevExpress.ui.themes.current(themeName)](/api-reference/50%20Common/utils/ui/themes/current(themeName).md '/Documentation/ApiReference/Common/utils/ui/themes/#currentthemeName') method in the `onValueChanged` callback. --- diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index 117d008923..687b49f6cb 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -36,7 +36,7 @@ You can apply these variables to custom elements to ensure a consistent look acr border-color: var(--dxds-color-border-neutral-default-hovered); } -You can also override variables to modify styles for DevExtreme components. This allows you to apply unique styles to different parts of your application. For instance, you can use the following [semantic variable](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) overrides to apply dark mode styles to parts of a light mode application: +CSS variable overrides also allow you to modify styles of DevExtreme components. You can define overrides for individual components or wrap multiple components in a container and define overrides on the container level. This allows you to apply unique styles to different parts of your application. For instance, you can use the following [semantic variable](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) overrides to apply dark mode styles to parts of a light mode application: /* Using dxds variables */ @@ -53,7 +53,146 @@ You can also override variables to modify styles for DevExtreme components. This --dxds-color-border-neutral-default-rest: #532982; } -CSS variable overrides also allow you to apply custom colors to specific parts of your application. You can define custom colors or use [utility palette](https://docs.devexpress.com/DesignSystem/405639/colors/utility-palettes/fluent-utility-palette) colors: +[note] + +Components that display content in overlays do not apply component element styles to the overlay content. Use one of the following approaches to apply styles to the overlay content: + +1. **Use a `.dx-swatch-*` Component Container** + If you initialize an overlay component in a container with a `dx-swatch-*` class, DevExtreme nests the component's overlay wrapper in a container with the same `dx-swatch-*` class. Use this class in your override definitions to style the overlay content. + + --- + + ##### jQuery + + + + + +
+ +
+ + + + + $('#popup').dxPopup({ + // ... + }); + + ##### Angular + + +
+ +
+ + + import { Component } from '@angular/core'; + + @Component({ + imports: [DxPopupModule, /* ... */], + }) + export class AppComponent { + // ... + } + + ##### Vue + + + + + + + ##### React + + + import { Popup } from 'devextreme-react/popup'; + + export default function App() { + return ( +
+ {/* Styles defined for .dx-swatch-myswatch will apply to the Popup content */} +
+ ); + } + + --- + + Note that DevExtreme does not generate `.dx-swatch-*` wrapper containers for components where the **container** property is defined. + +2. **Use wrapperAttr Properties** +Components that include **wrapperAttr** properties allow you to add selectors that define variable overrides to overlay wrappers: + + --- + + ##### jQuery + + + $("#popup").dxPopup({ + wrapperAttr: { + class: "dark-colors-custom" + } + }); + + ##### Angular + + + + + + import { Component } from '@angular/core'; + + @Component({ + imports: [DxPopupModule, /* ... */], + }) + export class AppComponent { + popupWrapperAttr = { class: 'dark-colors-custom' }; + } + + ##### Vue + + + + + + + ##### React + + + import { Popup } from 'devextreme-react/popup'; + + const popupWrapperAttr = { class: 'dark-colors-custom' }; + + export default function App() { + return ( + + ); + } + + --- + +[/note] + +You can also use CSS variable overrides to apply custom colors to specific parts of your application. You can define custom colors or use [utility palette](https://docs.devexpress.com/DesignSystem/405639/colors/utility-palettes/fluent-utility-palette) colors: /* Utility palette colors */ From 0b173e77cc492723c74346518df49ab8166ed7c2 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 26 Aug 2026 16:14:44 +0400 Subject: [PATCH 05/13] Add Color Variable DS Links --- .../05 CSS Variables/00 CSS Variables.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index 687b49f6cb..68619e2b20 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -1,6 +1,9 @@ Fluent Next themes ship with CSS variables defined in the DevExpress Design System. Refer to the following help topics for additional information about key styling principles and a list of available CSS variables: -- [Colors](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) +- [Colors](https://docs.devexpress.com/DesignSystem/405637/colors) + - [Theme Palettes](https://docs.devexpress.com/DesignSystem/405686/colors/theme-palettes) + - [Utility Palettes](https://docs.devexpress.com/DesignSystem/405687/colors/utility-palettes) + - [Semantic Color Variables](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) - [Typography](https://docs.devexpress.com/DesignSystem/405635/typography) - [Spacing](https://docs.devexpress.com/DesignSystem/405633/spacing) - [Borders](https://docs.devexpress.com/DesignSystem/405632/border) From cd0a7fa608d984e9c015cd72e59613ffce9c0aa0 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Wed, 26 Aug 2026 16:27:46 +0400 Subject: [PATCH 06/13] Add Final Touches --- .../00 Styling Overview/10 CSS Styles.md | 2 +- .../00 Fluent Next Theme Customization.md | 2 +- .../05 Predefined Accent Colors.md | 244 ++++++++++++++++++ 3 files changed, 246 insertions(+), 2 deletions(-) diff --git a/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md b/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md index a2cf423f45..9b2d710f45 100644 --- a/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md +++ b/concepts/60 Themes and Styles/00 Styling Overview/10 CSS Styles.md @@ -1,3 +1,3 @@ You can apply custom CSS styles to specific classes to customize DevExtreme component appearance. You can also use these CSS classes in custom elements to ensure a consistent look and feel across your app. -For a list of common DevExtreme classes, refer to the following help topic: [CSS Classes](/Documentation/ApiReference/UI_Components/CSS_Classes/). \ No newline at end of file +For a list of common DevExtreme classes, refer to the following help topic: [CSS Classes](/Documentation/ApiReference/UI_Components/CSS_Classes/). diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md index 2dcafd952d..5298840303 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md @@ -1 +1 @@ -Fluent Next themes are based on the DevExpress Design System and support multiple customization options. \ No newline at end of file +Fluent Next themes are based on the DevExpress Design System and support multiple customization options. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md index ea1957e2db..ccd4b354ee 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -68,3 +68,247 @@ The following accent stylesheets are available: - Accent stylesheets apply to all variations of Fluent Next (light and dark modes, standard and compact sizes). To switch theme modes or sizes, swap the theme stylesheet only. [/note] + +You can also add accent color styles to an existing stylesheet in your application. Load this stylesheet immediately after the Fluent Next theme to ensure accent color styles are applied correctly: + + + :root { + --dxds-primary-10: #f4f8fc; + --dxds-primary-20: #e7eff9; + --dxds-primary-30: #cce1f8; + --dxds-primary-40: #b4d2f4; + --dxds-primary-50: #9cc3f0; + --dxds-primary-60: #82b4ea; + --dxds-primary-70: #67a2e1; + --dxds-primary-80: #4b90d9; + --dxds-primary-90: #2b7ecf; + --dxds-primary-100: #0f6cbd; + --dxds-primary-110: #015fab; + --dxds-primary-120: #005397; + --dxds-primary-130: #004884; + --dxds-primary-140: #003c70; + --dxds-primary-150: #002e58; + --dxds-primary-160: #002244; + --dxds-primary-170: #00162f; + --dxds-primary-180: #010b1c; + } + + + :root { + --dxds-primary-10: #f5f8f9; + --dxds-primary-20: #e9f0f3; + --dxds-primary-30: #cfe2ea; + --dxds-primary-40: #b9d4e0; + --dxds-primary-50: #a2c6d6; + --dxds-primary-60: #8ab7cb; + --dxds-primary-70: #72a9bf; + --dxds-primary-80: #5a9ab4; + --dxds-primary-90: #408ca9; + --dxds-primary-100: #2d7d9a; + --dxds-primary-110: #226e89; + --dxds-primary-120: #195f77; + --dxds-primary-130: #125066; + --dxds-primary-140: #0a4255; + --dxds-primary-150: #073342; + --dxds-primary-160: #042632; + --dxds-primary-170: #031922; + --dxds-primary-180: #020d13; + } + + + :root { + --dxds-primary-10: #f8f7f5; + --dxds-primary-20: #f0eee9; + --dxds-primary-30: #e2ded1; + --dxds-primary-40: #d5cfbc; + --dxds-primary-50: #c7bfa7; + --dxds-primary-60: #b9af91; + --dxds-primary-70: #aca07c; + --dxds-primary-80: #9f9268; + --dxds-primary-90: #928354; + --dxds-primary-100: #847545; + --dxds-primary-110: #746639; + --dxds-primary-120: #64572f; + --dxds-primary-130: #544925; + --dxds-primary-140: #453b1c; + --dxds-primary-150: #352d14; + --dxds-primary-160: #27210d; + --dxds-primary-170: #1a1607; + --dxds-primary-180: #0e0b03; + } + + + :root { + --dxds-primary-10: #f2f9f7; + --dxds-primary-20: #e2f3ef; + --dxds-primary-30: #bce9df; + --dxds-primary-40: #99dfd0; + --dxds-primary-50: #73d4c1; + --dxds-primary-60: #40c8b2; + --dxds-primary-70: #00b9a2; + --dxds-primary-80: #00a792; + --dxds-primary-90: #009683; + --dxds-primary-100: #018574; + --dxds-primary-110: #007566; + --dxds-primary-120: #006558; + --dxds-primary-130: #00564a; + --dxds-primary-140: #00473d; + --dxds-primary-150: #00362e; + --dxds-primary-160: #002922; + --dxds-primary-170: #001b17; + --dxds-primary-180: #000f0b; + } + + + :root { + --dxds-primary-10: #f6f8f7; + --dxds-primary-20: #ecefee; + --dxds-primary-30: #d7e0de; + --dxds-primary-40: #c5d2cf; + --dxds-primary-50: #b3c4bf; + --dxds-primary-60: #a0b5af; + --dxds-primary-70: #88a19a; + --dxds-primary-80: #718e86; + --dxds-primary-90: #5b7b73; + --dxds-primary-100: #486860; + --dxds-primary-110: #405e57; + --dxds-primary-120: #39544d; + --dxds-primary-130: #324a44; + --dxds-primary-140: #2c413c; + --dxds-primary-150: #21322d; + --dxds-primary-160: #182522; + --dxds-primary-170: #0f1816; + --dxds-primary-180: #070d0b; + } + + + :root { + --dxds-primary-10: #fbf5fa; + --dxds-primary-20: #f8e9f5; + --dxds-primary-30: #f6d1ee; + --dxds-primary-40: #f1bbe7; + --dxds-primary-50: #eaa5de; + --dxds-primary-60: #e28dd5; + --dxds-primary-70: #dc78ce; + --dxds-primary-80: #d662c7; + --dxds-primary-90: #cf4abf; + --dxds-primary-100: #c239b3; + --dxds-primary-110: #ab2a9e; + --dxds-primary-120: #941d88; + --dxds-primary-130: #7c1272; + --dxds-primary-140: #66055d; + --dxds-primary-150: #4f0449; + --dxds-primary-160: #3d0337; + --dxds-primary-170: #2a0226; + --dxds-primary-180: #180116; + } + + + :root { + --dxds-primary-10: #f6f7fc; + --dxds-primary-20: #eceef9; + --dxds-primary-30: #d7dcfa; + --dxds-primary-40: #c5ccf7; + --dxds-primary-50: #b3bbf4; + --dxds-primary-60: #a0a9ee; + --dxds-primary-70: #8d96e7; + --dxds-primary-80: #7b83e0; + --dxds-primary-90: #6a70d7; + --dxds-primary-100: #5b5fc7; + --dxds-primary-110: #5053b3; + --dxds-primary-120: #45479f; + --dxds-primary-130: #3a3c89; + --dxds-primary-140: #303275; + --dxds-primary-150: #24265b; + --dxds-primary-160: #1a1b46; + --dxds-primary-170: #101131; + --dxds-primary-180: #08081d; + } + + + :root { + --dxds-primary-10: #fef5f6; + --dxds-primary-20: #fee8eb; + --dxds-primary-30: #ffd0d6; + --dxds-primary-40: #ffb9c3; + --dxds-primary-50: #ffa0ae; + --dxds-primary-60: #ff8399; + --dxds-primary-70: #fd6b89; + --dxds-primary-80: #fb4f79; + --dxds-primary-90: #f72a6a; + --dxds-primary-100: #ea005e; + --dxds-primary-110: #cb0050; + --dxds-primary-120: #ad0043; + --dxds-primary-130: #8f0036; + --dxds-primary-140: #73002a; + --dxds-primary-150: #5a001f; + --dxds-primary-160: #450016; + --dxds-primary-170: #31000d; + --dxds-primary-180: #1e0006; + } + + + :root { + --dxds-primary-10: #fdf5f3; + --dxds-primary-20: #fceae5; + --dxds-primary-30: #ffd3c7; + --dxds-primary-40: #fdbeac; + --dxds-primary-50: #faa892; + --dxds-primary-60: #f59176; + --dxds-primary-70: #f17c5d; + --dxds-primary-80: #ed6542; + --dxds-primary-90: #e74d21; + --dxds-primary-100: #da3b01; + --dxds-primary-110: #be3200; + --dxds-primary-120: #a22900; + --dxds-primary-130: #882100; + --dxds-primary-140: #6e1900; + --dxds-primary-150: #561100; + --dxds-primary-160: #420b00; + --dxds-primary-170: #2f0500; + --dxds-primary-180: #1c0200; + } + + + :root { + --dxds-primary-10: #f7f7f8; + --dxds-primary-20: #edeef1; + --dxds-primary-30: #dadee4; + --dxds-primary-40: #cad0d8; + --dxds-primary-50: #b8c0cb; + --dxds-primary-60: #a7b0be; + --dxds-primary-70: #96a1b1; + --dxds-primary-80: #8693a5; + --dxds-primary-90: #768498; + --dxds-primary-100: #68768a; + --dxds-primary-110: #5a677a; + --dxds-primary-120: #4d5869; + --dxds-primary-130: #404a59; + --dxds-primary-140: #343c49; + --dxds-primary-150: #272e38; + --dxds-primary-160: #1c222a; + --dxds-primary-170: #12161c; + --dxds-primary-180: #090b0f; + } + + + :root { + --dxds-primary-10: #f7f7f7; + --dxds-primary-20: #efeeee; + --dxds-primary-30: #dfdedd; + --dxds-primary-40: #d0cfce; + --dxds-primary-50: #c1bfbe; + --dxds-primary-60: #b1afad; + --dxds-primary-70: #9f9d9b; + --dxds-primary-80: #8e8c8a; + --dxds-primary-90: #7e7b79; + --dxds-primary-100: #6d6a68; + --dxds-primary-110: #615e5c; + --dxds-primary-120: #555250; + --dxds-primary-130: #494745; + --dxds-primary-140: #3d3b3a; + --dxds-primary-150: #2f2d2c; + --dxds-primary-160: #232121; + --dxds-primary-170: #171615; + --dxds-primary-180: #0c0b0b; + } From 87e7854d9032f71c3e80890a787022d59872cc86 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Thu, 27 Aug 2026 19:56:44 +0400 Subject: [PATCH 07/13] Update Following Feedback --- .../2 Without Page Reload.md | 15 +++++++- .../05 CSS Variables/00 CSS Variables.md | 34 +++++++++---------- .../05 Variable Naming Convention.md | 2 +- .../05 Predefined Accent Colors.md | 4 +-- 4 files changed, 34 insertions(+), 21 deletions(-) diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md b/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md index 0e2bcb28f2..1e28729e8e 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/60 Switch Between Themes at Runtime/2 Without Page Reload.md @@ -110,7 +110,20 @@ You can use this approach only if the themes belong to the same group. For insta The method accepts the `data-theme` attribute value. For example, if you want to switch to `dx.generic.dark`, pass `generic.dark` (without the 'dx' prefix) as an argument in the method. For a custom theme, specify the theme you used as a base. If both of your themes are derived from the same base, get the `data-theme` value from the `font-family` value of the `dx-theme-marker` CSS class, which is located in each theme's CSS file. -[note] If you use an accent color stylesheet with Fluent Next themes, you do not need to switch the accent stylesheet when switching themes. These stylesheets apply to all variations of Fluent Next (light and dark modes, standard and compact sizes). Refer to the following help topic for more information about accent colors in Fluent Next themes: [Fluent Next Theme Customization - Accent Colors](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/#Accent_Colors). +[note] + +If you use an accent color stylesheet with Fluent Next themes, note the following specifics: + +- You do not need to switch the accent stylesheet when switching themes. These stylesheets apply to all variations of Fluent Next (light and dark modes, standard and compact sizes). +- Ensure you load the accent stylesheet after all Fluent Next stylesheets. We recommend that you order theme and accent stylesheets as follows: + + + + + +Refer to the following help topic for more information about accent colors in Fluent Next themes: [Fluent Next Theme Customization - Accent Colors](/Documentation/Guide/Themes_and_Styles/Fluent_Next_Theme_Customization/#Accent_Colors). + +[/note] If you use SVG components, you should also call the [refreshTheme()](/api-reference/50%20Common/utils/viz/refreshTheme().md '/Documentation/ApiReference/Common/Utils/viz/#refreshTheme') method to update their theme. The following example shows how to apply the Generic Contrast theme: diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index 68619e2b20..069ac84949 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -15,15 +15,15 @@ You can apply these variables to custom elements to ensure a consistent look acr .info-card { /* Surface and content colors */ - background-color: var(--dxds-color-surface-neutral-default-rest); - color: var(--dxds-color-content-neutral-default-rest); + background-color: var(--dxds-color-bg); + color: var(--dxds-color-content); /* Spacing */ padding: var(--dxds-spacing-240); margin-bottom: var(--dxds-spacing-160); /* Borders */ - border: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest); + border: var(--dxds-border-width-10) solid var(--dxds-color-border); border-radius: var(--dxds-border-radius-40); /* Typography */ @@ -35,8 +35,8 @@ You can apply these variables to custom elements to ensure a consistent look acr } .info-card:hover { - background-color: var(--dxds-color-surface-neutral-default-hovered); - border-color: var(--dxds-color-border-neutral-default-hovered); + background-color: var(--dxds-color-bg-hovered); + border-color: var(--dxds-color-border-hovered); } CSS variable overrides also allow you to modify styles of DevExtreme components. You can define overrides for individual components or wrap multiple components in a container and define overrides on the container level. This allows you to apply unique styles to different parts of your application. For instance, you can use the following [semantic variable](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) overrides to apply dark mode styles to parts of a light mode application: @@ -44,16 +44,16 @@ CSS variable overrides also allow you to modify styles of DevExtreme components. /* Using dxds variables */ .dark-colors-dx { - --dxds-color-surface-neutral-default-rest: var(--dxds-color-surface-neutral-default-inverted-rest); - --dxds-color-content-neutral-default-rest: var(--dxds-color-content-neutral-default-inverted-rest); - --dxds-color-border-neutral-default-rest: var(--dxds-color-border-neutral-default-inverted-rest); + --dxds-color-bg: var(--dxds-color-bg-inverted); + --dxds-color-content: var(--dxds-color-content-inverted); + --dxds-color-border: var(--dxds-color-border-inverted); } /* Using custom colors */ .dark-colors-custom { - --dxds-color-surface-neutral-default-rest: #341A51; - --dxds-color-content-neutral-default-rest: #F5F0FA; - --dxds-color-border-neutral-default-rest: #532982; + --dxds-color-bg: #341A51; + --dxds-color-content: #F5F0FA; + --dxds-color-border: #532982; } [note] @@ -200,14 +200,14 @@ You can also use CSS variable overrides to apply custom colors to specific parts /* Utility palette colors */ .yellow-accent { - --dxds-color-surface-primary-default-rest: var(--dxds-utility-yellow-40); - --dxds-color-content-primary-default-rest: var(--dxds-utility-yellow-50); - --dxds-color-border-primary-default-rest: var(--dxds-utility-yellow-60); + --dxds-color-bg: var(--dxds-color-bg-yellow); + --dxds-color-content: var(--dxds-color-content-yellow); + --dxds-color-border: var(--dxds-color-bg-yellow-subtle); } /* Custom colors */ .yellow-accent { - --dxds-color-surface-primary-default-rest: #F2C661; - --dxds-color-content-primary-default-rest: #EFB839; - --dxds-color-border-primary-default-rest: #EDAD1C; + --dxds-color-bg: #F2C661; + --dxds-color-content: #EFB839; + --dxds-color-border: #EDAD1C; } diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md index 8c992889e4..b0b8d9a4f1 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md @@ -4,6 +4,6 @@ The following naming convention applies to CSS variables in Fluent Next themes: Design System CSS variables that serve as public APIs. Use these variables to customize your DevExtreme-powered application. - `--dx-*` -Internal CSS variables and classes used by DevExtreme components. May change between versions. +Internal CSS variables used by DevExtreme components. May change between versions. We recommend that you do not use internal variables to customize your DevExtreme-powered application. Use public `--dxds-*` variables only. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md index ccd4b354ee..0aa9ce7950 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -5,8 +5,8 @@ Fluent Next themes ship with 11 predefined accent colors. To apply one of these import 'devextreme/dist/css/accents/rose.css'; - - + + The following accent stylesheets are available: From 96ba63c2f6b336ff8987ac19a03352c09e2d3bbe Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 28 Aug 2026 18:47:28 +0400 Subject: [PATCH 08/13] Add Further Updates --- .../00 Fluent Next Theme Customization.md | 2 +- .../10 Accent Colors/05 Predefined Accent Colors.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md index 5298840303..4e6aef0bc4 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/00 Fluent Next Theme Customization.md @@ -1 +1 @@ -Fluent Next themes are based on the DevExpress Design System and support multiple customization options. +Fluent Next themes are based on the [DevExpress Design System](https://docs.devexpress.com/DesignSystem/405636/foundation) and support multiple customization options. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md index 0aa9ce7950..e6c9237a98 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -1,4 +1,4 @@ -Fluent Next themes ship with 11 predefined accent colors. To apply one of these colors, import an accent stylesheet after the theme: +The DevExpress Design System defines 11 [primary color palettes](https://docs.devexpress.com/DesignSystem/405638/colors/theme-palettes/fluent-theme-palettes) for Fluent themes. These color palettes ship as stylesheets in the DevExtreme NPM package. Import one of these accent stylesheets after a Fluent Next theme to apply an accent color: import 'devextreme/dist/css/dx.fluent-next.blue.light.css'; From fcc2ea172595c0d0bd89dbbb2713ca0417bf27f7 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 31 Aug 2026 15:13:37 +0400 Subject: [PATCH 09/13] Add Updated Images --- .../05 Predefined Themes/00 Predefined Themes.md | 8 ++++---- images/themes/fluent-next-dark-compact.png | Bin 0 -> 7287 bytes images/themes/fluent-next-dark.png | Bin 0 -> 7639 bytes images/themes/fluent-next-light-compact.png | Bin 0 -> 7062 bytes images/themes/fluent-next-light.png | Bin 0 -> 7340 bytes 5 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 images/themes/fluent-next-dark-compact.png create mode 100644 images/themes/fluent-next-dark.png create mode 100644 images/themes/fluent-next-light-compact.png create mode 100644 images/themes/fluent-next-light.png diff --git a/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md b/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md index 0aaccaab73..673e7fdcc6 100644 --- a/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md +++ b/concepts/60 Themes and Styles/05 Predefined Themes/00 Predefined Themes.md @@ -12,19 +12,19 @@ The following colors are available out of the box:

Blue Light

- +

Blue Light Compact

- +

Blue Dark

- +

Blue Dark Compact

- +
diff --git a/images/themes/fluent-next-dark-compact.png b/images/themes/fluent-next-dark-compact.png new file mode 100644 index 0000000000000000000000000000000000000000..b369498a0b822d3ff29a7260f8f105c72e978b1d GIT binary patch literal 7287 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 G`2PS+Z&Pdl literal 0 HcmV?d00001 diff --git a/images/themes/fluent-next-dark.png b/images/themes/fluent-next-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..ce2656941d18ca041dbd69549f4a06adcf8a9c5f GIT binary patch literal 7639 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 literal 0 HcmV?d00001 diff --git a/images/themes/fluent-next-light-compact.png b/images/themes/fluent-next-light-compact.png new file mode 100644 index 0000000000000000000000000000000000000000..5d60ef665cac34e6b7049fdf50f3f84994e4c355 GIT binary patch literal 7062 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 literal 0 HcmV?d00001 diff --git a/images/themes/fluent-next-light.png b/images/themes/fluent-next-light.png new file mode 100644 index 0000000000000000000000000000000000000000..07e4728aed4c1b709d14c95f3d14a7828ba95f81 GIT binary patch literal 7340 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 literal 0 HcmV?d00001 From 9dcf37a27392fa4bbeb8d0c702ec84e7136d2e1b Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 31 Aug 2026 15:35:29 +0400 Subject: [PATCH 10/13] Update Light Images --- images/themes/fluent-next-light-compact.png | Bin 7062 -> 7655 bytes images/themes/fluent-next-light.png | Bin 7340 -> 7814 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/images/themes/fluent-next-light-compact.png b/images/themes/fluent-next-light-compact.png index 5d60ef665cac34e6b7049fdf50f3f84994e4c355..66ce46f3b1b0612b7d6f7ad40dc1b48d5ef78316 100644 GIT binary patch literal 7655 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 IrA&hV53k%TdH?_b literal 7062 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 diff --git a/images/themes/fluent-next-light.png b/images/themes/fluent-next-light.png index 07e4728aed4c1b709d14c95f3d14a7828ba95f81..c5da92bf1f572daefce1976f7df1981a2a4f15f5 100644 GIT binary patch literal 7814 zcmZ`;byQSexE)$Tln|s*WB^G)N?-`70RahNkd*H34k-tQW@r=yq=xQPI;6W1hGvHD zc=P-7t+(DE=bm-WI`@8O-TUqR?YmFZM^%N#M6^Tz0N^oLQC0)fr(l}JBYe!2Bhl&x z(-Ar;>be2|#1#KEEI@kZbIc@`tA>IM05MFzgBjpjN~=f%0F|-Cw_oruV^TLch?}OP zg`4LW7juBTwWa-+?8+2V0Dut-EGw<$g>|q*P-7-HMsSG#ff>m6lIXQ9jQJbQQ#^I8 z50SXfaGpPX`b;91huQfJGlEQqlEOrW&-70uF*~p;h-OF>Arp94;%M6<*3yFJ8Fbmp z6m_(?UM8J-Kop}I&jM|^_3BDfr18@%b(=}}6`$|}Y~u{g0MpE^eSlJFpLi@t=;=$G z3j7^8eB;OCP?8SXpVTx#f{MKVccIQxUE8wSfoI@pE90rpgP#yC$zI;={Ac=S#X2!F z1Cs(Xbu)&(2hTg-?Uf3c-z*)e;&#nV3Vxz9s}j=i!AnuKS~RxsIq*Y#2yNfag$|Sl z-tBowQjg`77#!FjegputK^$3odQnp-QMR}# zRL`-M?TaFUa+J-{Egy!vG%qY6{0>8zGAB#~)B<`??($ zyr(szA#u?-!ku&3#WoNDI{o1tWjYynI;H@(l)RZkvPoWny}LOL$q-x%)3GD|C|9Ir z&b8K@RbI@1s@Q>+(6ZM$`^}IgNE383H_~(QB=E9xP{q+_;usUDR{w5Shu5=p&mb>= zr@Q!JQ@CBXZpmYzsvnq<#B_fcfee1)XMDA=a!++}b3c)D?{;-P({9Lk`kf&8X8EEG zDfw_U!ah9K2KQw;N$pLtH9ScllSG}R}=Jpo;=Hq?nZPA$*V8_`)WD>IH`v;9^eG4Sc`9!3sS+nEKL1$K-t`8y+^ps z*?+3UP%wSl!ra6J>t`c$?4m<4U9RM2zgn$D^8RuiM~hNvk>D$^w;_G6Y!A`w;6Ln| zEl_OP%ivl1m$vK1BHu<2S*zP{d5a;85+P2FjP76mfp)L9-2Y&{^mf}Y@v+s)^>n>F zMUm0pVttE6%?1MN2%;%5AY&cK8EEP0mbExqngPM3?pYp@#2y(}Fr+Wbyj zN@W;LWl-&v2YRlC?tM%n>ndR1or3n;5;I4)Uck_XhauESu^6}`JDKjCa5LNV<_vz^ z*aK4C9l(BPm~0kWjJpik*|bR)Wassr8&tvpGT^!v>(933u1) zIVx%E6br2tE!U6m-UwOAZhK`oPt0|r?DhARPcE=2Joxk7+mn$ea+(z*CwQ-4TG#^L z)h$XbEUGtdNuX&Gr?ve)(37DB>vdq_$9*mf3(Iwx-kWJhcTsHF&x0JPcs)RvcyQi{ z@Uo^#xBO;zwZqMVuaQN^v{L8yIS;p%c5_(mja`8E)%*Fn>Ca$-yT_2Xc+Xpa6Vw2k za^0b03^|DYV_XOP!?mnOSokaa_REs?+hb(LbvP+dB@Q#&Zy6v}q|pES&@-WVP zRj{~5>KWM&2Imt8;BDzXxf+MJxuqTWdnPoYGdPKi83HcXkeDR0Z?WU4TM4)sh1Q)7 z3K~*{J(fmwSv2|j?rP?IPPgU8pm04GMdk9rH&atA;x~nVxnxVw$V@BBz4P_wN3i#b z4n5jC{k|cCJbh^&p~{=jwD8T(7Vh?&(QWzNlvuz-WVfJmd?{`|PQ(&Css+jINTcNW zcMF3Y0LzTIj$DK21)2MQoI?WduVr!@mHt9jYMjfszN`B3B5}nTyu1))(>px6Ax3Rt zpsPfXYnkP){q+d}y;Db@$xbg%^S*{E=xT%TiLI`*d*Wl^#ftr=J;Ycqb?dfVp6Dpt zEuvJ7@yAnlA~LQfRD1~fAm!keo=IZk#S_9MY&v1D*)I{v>o75%7Bb$7fxz)G_0TsJ zi`OHTOQiUX(^;O&qQEyx_}y4B4Ux9YYF>XR209tfD=O0UzuQ9aDbT4u4zm9wKTUk> zCriKi>Rtlvtp>sVQ)Pbpg0ae9?K_#X`ho;(IpY;U_WX+Lhy>21z320bIs-dMw}SXT zGH0`KA)2v*{(OO6+V-ozj=)JQPTMu|_4=Ub2{KvirG^@X20jI91D!zzV%8oEEnO*{ zCL`DFCoLHn28g(+cn#@akdBtu0?lP+kcER+6LP|&G`x9=C3>P43SjT>4d0ox4Xx~p zuTx6!(bnEB9K!`~*se}WVp>F&waRhz>dc*Y+tzZaktFUk$3Rq7jrdYnQQ7{Mm)KI9 zRV+w9(cay(T)fZ2KLCyxy==Z7IG+&YoQV)5f>bB#=dVXZC;F?gkAC5RcCxCMPWcSI z>FwG9*~S4md;f;u<%9wU+r|1A*8d--{i!E#BCHL*DZ z`Oa@Y8e~iH^)U;?TgU%7Q#t!M#~k|M)daS!$Rm0)9{$U^|3@3{+*Q(yC|K4-RP#lY zWlyC@uag;$_?08JOtT+f+@AkO3xdZD-F{xzf=u1RTQ>rs3XQlkC|ApD>zwT|vy(;t zwl->Gq-M%HR?}P)t$+ z{)f`3KVifyNXFCzQt9;6oHNMbOv|RAw9%^XO!H=9&aK&;+l0z{9m(sl*lVm5Qgp*Q z>^D7Im?4Ov0t~2qm#RqtZ&8y{xb4g0P|+4I8BwQAGzR&P6#ujxWYgCaUV1f+Fk41qL?IctAfV~JC@aNnz(ups&*~zI z(GB20alrja4%2#q6{ql+_=(abmluoupl_z9aT);ETw}O3RW2%xvM)(Vyzi8KCOhDI z2bqQTvrIJt=XA&tR(Y{14%k@CnWl&eoD=0U=+ei(T36ba`W{r-`9K0Xl&to z$?15%cJmZzMjO6Ab=v51>$dEG(<`l^e7D~-(e{^Wdv0#D?x;9^qYTiUxc(*a^Ce|z zduhnek9Ts1KhVIA2G$~n+9~a$xs6o2sN(wp^(33{6sdn42rlL~@^kZOjPT2ieWV2V z9n!7yB^vxrCWng%Rz9@BNIj!xw~3>cX6KBs{~dyt=VB_TAQfSZ*Qfu!T?Wr*D6S`S zq?sw#Dy>D&vDH23_v=10oFFA=NaUZc3_hIiW}I})?5cj%80FNpG1wvqac_c$cPxQ^@)=2nm)$pMXR(+8qOL76|yB#{JUq2L@-5pS*a8Q$^Ul4BKlTvZ7GB8XpYC zKTO8q>Y?qB_W)L>;YpwO99M*Ezg=~Cab5O6MW;c&UPzqFyZDH&;-v`tq4;-ffW^i0 zg#=b*?C;iRvlTxb;ca0*|${E@J!Mb0!KwKhjzm$cJtpp{OGO&F5I~KDHW?KA3Q_+# zRktLOus#Ixjx!Q(oi@oiaKvv@faSXueCl=6!6mcmc4KIf_gRefD1CVT2;wNemiemV|R``t||h9Kfeg0an~ zed~t^W>UArRJNVw^D;R5acrra!l(GP@AwT^fwkxGWDjUGROb>sYd?M#GBwQ`nE z7-?Eom0wJ0X0#Ik$P)HVrEpui6r?UXd$8Vc@>Cy}8D>0Ak&DLrz72&;i&tYaC+3(A zGvqrH{!ziN*ejnUO9c#hb;+Rw0<>iVU3-fR-Djfu1a$Z5D{s>Q6M*aDMvV2$1-h8RJnV*|Z!uAK?L?HVpdUomurA(6i$Lra~B85g4ybRLyPAd|TWgHUQZhn_7kEqMy z=uiY;>{3^Z!uI`Y>4?SGJuKQuDgBB)Jk+%r7q*+JXPM8=%1=+~ax^eET8Z>Z9GfQa zoTu}vxIH>W4?tBE6P;CIu!eCowi|jvj0(#x!xDpEaSos4q($!OtIbhz0F8IMg_1hb zu}G<Ge+(StrGtAgl>_M`4Zf(k>L z4a*O+63n0Kulc=3aCH8>em%IddfbN%!J<%{Oe5%`ku=YVam@8u%HxtwILZ##ltwgZ zl)IJr-5Mor!`ntD%pS1A21i6QxW0lJtRzMEeetxFmc?dzGYfBY*b|etiZk|?=We0N zJ0eB=9XY@J{CeNgr6HE5q7+Q<5}K=s%*+WuOLvLMYSdlB1x6ECro~O#;ZYV%K00hE z84gC_Tb2LInoFaCywBZbc8#|V7Mywb@UAaeuK-v3Lfl-4aw3$3zf5$%GK=9{lszMQ z-8W9UiQja3Lp*Y@`rC_hTC>+_&H%yD=a2d6(mt8By~{c#t@0T(4*6ft|9`AMj7MlI zUZH)ardBejW&rn;^zjD*30V~{q;HNM+Lm<|mL4FI@W7b__YFzh9Cl$x{i@bmwUe}1 zIN>vc-5<9+Mf1DRAb0=f|J~^P+~VcDv8nP&Aw)-p!-loLnl0PQ}1VZ3BRRnu5cnq@Xkl9EOTd7ma&1FJ#Xr98=purt9GDUMlsoOWL-jP6h} z2h%NJtP~dKPbT?q-D#Tn6Oa|GX!9KYY#b52A0HNRslrN8JQ1C;xm*+HWJ7Cv2}9`{ z_J)^*39?=8yGc>p86qb{I@-}<-W(R#UvWvZ`J(<%{gl<7+vlH4#%kNpB{l)_qYGFl z#LT5LwEUE+5;f!8S-lmS!jE1J@Yt@nAw@;k6L^@7%v#!t7F_}^FuEV4fpiWqKX(Ns z3K<$Tk*y}^Mweh&rc8SKn{}H}O+dLUSDG0Mlew&Ex(qzi5_ZspK?t`*SxqxpPxl0b zM@t(I88q4^ZDT9bRh27XJfA)e%fUI{p{ljULo~;lZ*$2+od|^U)km_j=;3$+W;Ds)f&9q8YVmv=N|M5F>L7bBQWd2wO_H{;wj~?}t zz8A-%g4ITo(PKxC)LfMhr1XTuvlLxYBbb4 z2MtJF7?6+BgtqOnkUmDyc4NJKs!zW8_#milqSf1kHGUSng=X!kY9b3>B~pZbpJ>b# zxR>z@zI-N374pQP)0eZmE7dD2#V1y_Gw4w8VO8wsw{aqHoC;LO=hyA|jCPH~1OlExvB>k7KQTEI6UWrsDap4tw(zyuV>VPP_}tDF zRR8_$^V@XaQWe5l-L!e^UE>JbX;wt1enhatdWMod zhVmDqbD=!N|5Z)m)<~%V+{SWi*d7z=q^M2)tE*k zA8ysNo|C>I6&j>*ule4B!dMS^E+71RBIS7TC|*oUlZ2x>w`Ud)G0Zm{J(c=~pm^c4 zop!CE({H>yUn(xhM>v-*|Fz%kQLjRK1=*(fgzK;zFa6I&ro9C09qlw@##}rEL_Jj% z_--A@Ib>t8+x-H9f`lxF-|YE_DVt0^5~C$YJn{-5ZRd&&v zyqqSxpqSt-lBJh{yomM&FLkC@lzNzgrGRy^m0bsOEw7N|%AGISGDtXMTnAw!H?UOI zoXH{((k=I)RA4hLDPI{bpY{Bf-{aqLmD=f=fIRJVSS{_!66=m6HYL>1?K+4%mXAavH^bM`QcS0b#oL2 z*i+x_QRJ0B_UC^wvnA9zeRwrkcw=@tsh>Bi55(mW6?ls*n%^>?rP<&ZwKxX&ZcrsB z*5&Rk`=S}pdQN&7&*+m&a)|ppnh|lFs{?U!1x~HkZ*pqwbsN~ z2f1=k`7;{0w@r$Z8&iFFO`Yxm*$%h$8})|wC__oY`dJ{yF4&riWszlk!L7Xz<7of7 z#T@$(8SLpPRUfZ;#Dp?7uiI-2o-VjY^$aD~0RqB~>X=)Ep!DbkL~Wf)_b(pV`acPo z)I61YJzETrTfyIdI6X#RkPMh0sBj4?(mA2F6*w7@7zQe1bRBv_CizyFjA(RiGa#3K zg0E-Q;y6?yH3Y2Zt<0GF%>Vhi}okOb@$fY`9e9P&-RZoM&plW z=Q%Ye8S|ww6wxmha(l>2`N1%gV2B-|*F{6U?jK_@(CuO8d!1#+hP7}kN@hC+rn5elSo*1~ zj=yjA5*waME%X!!p~>wAKsax$UnosNf6y3rr}X4MnS0Vi4YjuYj~W!4M4hpx-vOsR zW_Wte=TyHrZUWOjH*;I)kaV%mj+0x=yU(7Cihe7!>u-c0I_~}vU5NNrzL(u_r2eV$ zHvW~T%C$K`p(;Xp$aIfEELC--^;E7s?w^M)Dxm@1EOp0j;pX-o1f87y_~l(}RpI~( zMI{_vrPfvXbyic%qpiQqlCA$)k*0XpvpIj{$ZNyX)Q8Amx|+df7Nab6l6GU>i$9qD z$)ePJ7pqda`ZqMTraQLk#Ce#X=x;x59;76 zNSe{hHS2mw8ur*3_}#GYNej2N@JagqpzMKLV0lSajPm_HKce$?hRfR@CT98z0Rz(M z)WeQ!t6`ZDi|oi$V0y`Nkf5HfE$wvkkxOU?Xn&t5vJ@gIohnNeG5IM8A!M+kll);S zcJ9;})KfhVu&u*}s4g*-x`bL^KM~un7*msfUw4jV(}5UIfdkkw_e>c>hsyQ81WzR& vRaZ#!1nRQ%mE%j51@McXfd229>I07EZ&8jt7SVXjF);uvrz(q(F%J13nq`?i literal 7340 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 From 6b483d576ec4703fea95929d7c797f27402e2151 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 7 Sep 2026 22:34:40 +0400 Subject: [PATCH 11/13] Add Custom Accent Color Rework --- .../05 Variable Naming Convention.md | 4 +- .../05 Predefined Accent Colors.md | 398 +++++++++--------- .../10 Custom Accent Colors.md | 47 +-- 3 files changed, 212 insertions(+), 237 deletions(-) diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md index b0b8d9a4f1..c70e1834d8 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/05 Variable Naming Convention.md @@ -4,6 +4,4 @@ The following naming convention applies to CSS variables in Fluent Next themes: Design System CSS variables that serve as public APIs. Use these variables to customize your DevExtreme-powered application. - `--dx-*` -Internal CSS variables used by DevExtreme components. May change between versions. - -We recommend that you do not use internal variables to customize your DevExtreme-powered application. Use public `--dxds-*` variables only. +Internal CSS variables used by DevExtreme components. Undocumented variables may change between versions. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md index e6c9237a98..4b9620cc78 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/05 Predefined Accent Colors.md @@ -73,242 +73,244 @@ You can also add accent color styles to an existing stylesheet in your applicati :root { - --dxds-primary-10: #f4f8fc; - --dxds-primary-20: #e7eff9; - --dxds-primary-30: #cce1f8; - --dxds-primary-40: #b4d2f4; - --dxds-primary-50: #9cc3f0; - --dxds-primary-60: #82b4ea; - --dxds-primary-70: #67a2e1; - --dxds-primary-80: #4b90d9; - --dxds-primary-90: #2b7ecf; - --dxds-primary-100: #0f6cbd; - --dxds-primary-110: #015fab; - --dxds-primary-120: #005397; - --dxds-primary-130: #004884; - --dxds-primary-140: #003c70; - --dxds-primary-150: #002e58; - --dxds-primary-160: #002244; - --dxds-primary-170: #00162f; - --dxds-primary-180: #010b1c; + --dxds-primary-10: var(--dx-accent-color-10, #f4f8fc); + --dxds-primary-20: var(--dx-accent-color-20, #e7eff9); + --dxds-primary-30: var(--dx-accent-color-30, #cce1f8); + --dxds-primary-40: var(--dx-accent-color-40, #b4d2f4); + --dxds-primary-50: var(--dx-accent-color-50, #9cc3f0); + --dxds-primary-60: var(--dx-accent-color-60, #82b4ea); + --dxds-primary-70: var(--dx-accent-color-70, #67a2e1); + --dxds-primary-80: var(--dx-accent-color-80, #4b90d9); + --dxds-primary-90: var(--dx-accent-color-90, #2b7ecf); + --dxds-primary-100: var(--dx-accent-color-100, #0f6cbd); + --dxds-primary-110: var(--dx-accent-color-110, #015fab); + --dxds-primary-120: var(--dx-accent-color-120, #005397); + --dxds-primary-130: var(--dx-accent-color-130, #004884); + --dxds-primary-140: var(--dx-accent-color-140, #003c70); + --dxds-primary-150: var(--dx-accent-color-150, #002e58); + --dxds-primary-160: var(--dx-accent-color-160, #002244); + --dxds-primary-170: var(--dx-accent-color-170, #00162f); + --dxds-primary-180: var(--dx-accent-color-180, #010b1c); } :root { - --dxds-primary-10: #f5f8f9; - --dxds-primary-20: #e9f0f3; - --dxds-primary-30: #cfe2ea; - --dxds-primary-40: #b9d4e0; - --dxds-primary-50: #a2c6d6; - --dxds-primary-60: #8ab7cb; - --dxds-primary-70: #72a9bf; - --dxds-primary-80: #5a9ab4; - --dxds-primary-90: #408ca9; - --dxds-primary-100: #2d7d9a; - --dxds-primary-110: #226e89; - --dxds-primary-120: #195f77; - --dxds-primary-130: #125066; - --dxds-primary-140: #0a4255; - --dxds-primary-150: #073342; - --dxds-primary-160: #042632; - --dxds-primary-170: #031922; - --dxds-primary-180: #020d13; + --dxds-primary-10: var(--dx-accent-color-10, #f5f8f9); + --dxds-primary-20: var(--dx-accent-color-20, #e9f0f3); + --dxds-primary-30: var(--dx-accent-color-30, #cfe2ea); + --dxds-primary-40: var(--dx-accent-color-40, #b9d4e0); + --dxds-primary-50: var(--dx-accent-color-50, #a2c6d6); + --dxds-primary-60: var(--dx-accent-color-60, #8ab7cb); + --dxds-primary-70: var(--dx-accent-color-70, #72a9bf); + --dxds-primary-80: var(--dx-accent-color-80, #5a9ab4); + --dxds-primary-90: var(--dx-accent-color-90, #408ca9); + --dxds-primary-100: var(--dx-accent-color-100, #2d7d9a); + --dxds-primary-110: var(--dx-accent-color-110, #226e89); + --dxds-primary-120: var(--dx-accent-color-120, #195f77); + --dxds-primary-130: var(--dx-accent-color-130, #125066); + --dxds-primary-140: var(--dx-accent-color-140, #0a4255); + --dxds-primary-150: var(--dx-accent-color-150, #073342); + --dxds-primary-160: var(--dx-accent-color-160, #042632); + --dxds-primary-170: var(--dx-accent-color-170, #031922); + --dxds-primary-180: var(--dx-accent-color-180, #020d13); } :root { - --dxds-primary-10: #f8f7f5; - --dxds-primary-20: #f0eee9; - --dxds-primary-30: #e2ded1; - --dxds-primary-40: #d5cfbc; - --dxds-primary-50: #c7bfa7; - --dxds-primary-60: #b9af91; - --dxds-primary-70: #aca07c; - --dxds-primary-80: #9f9268; - --dxds-primary-90: #928354; - --dxds-primary-100: #847545; - --dxds-primary-110: #746639; - --dxds-primary-120: #64572f; - --dxds-primary-130: #544925; - --dxds-primary-140: #453b1c; - --dxds-primary-150: #352d14; - --dxds-primary-160: #27210d; - --dxds-primary-170: #1a1607; - --dxds-primary-180: #0e0b03; + --dxds-primary-10: var(--dx-accent-color-10, #f8f7f5); + --dxds-primary-20: var(--dx-accent-color-20, #f0eee9); + --dxds-primary-30: var(--dx-accent-color-30, #e2ded1); + --dxds-primary-40: var(--dx-accent-color-40, #d5cfbc); + --dxds-primary-50: var(--dx-accent-color-50, #c7bfa7); + --dxds-primary-60: var(--dx-accent-color-60, #b9af91); + --dxds-primary-70: var(--dx-accent-color-70, #aca07c); + --dxds-primary-80: var(--dx-accent-color-80, #9f9268); + --dxds-primary-90: var(--dx-accent-color-90, #928354); + --dxds-primary-100: var(--dx-accent-color-100, #847545); + --dxds-primary-110: var(--dx-accent-color-110, #746639); + --dxds-primary-120: var(--dx-accent-color-120, #64572f); + --dxds-primary-130: var(--dx-accent-color-130, #544925); + --dxds-primary-140: var(--dx-accent-color-140, #453b1c); + --dxds-primary-150: var(--dx-accent-color-150, #352d14); + --dxds-primary-160: var(--dx-accent-color-160, #27210d); + --dxds-primary-170: var(--dx-accent-color-170, #1a1607); + --dxds-primary-180: var(--dx-accent-color-180, #0e0b03); } :root { - --dxds-primary-10: #f2f9f7; - --dxds-primary-20: #e2f3ef; - --dxds-primary-30: #bce9df; - --dxds-primary-40: #99dfd0; - --dxds-primary-50: #73d4c1; - --dxds-primary-60: #40c8b2; - --dxds-primary-70: #00b9a2; - --dxds-primary-80: #00a792; - --dxds-primary-90: #009683; - --dxds-primary-100: #018574; - --dxds-primary-110: #007566; - --dxds-primary-120: #006558; - --dxds-primary-130: #00564a; - --dxds-primary-140: #00473d; - --dxds-primary-150: #00362e; - --dxds-primary-160: #002922; - --dxds-primary-170: #001b17; - --dxds-primary-180: #000f0b; + --dxds-primary-10: var(--dx-accent-color-10, #f2f9f7); + --dxds-primary-20: var(--dx-accent-color-20, #e2f3ef); + --dxds-primary-30: var(--dx-accent-color-30, #bce9df); + --dxds-primary-40: var(--dx-accent-color-40, #99dfd0); + --dxds-primary-50: var(--dx-accent-color-50, #73d4c1); + --dxds-primary-60: var(--dx-accent-color-60, #40c8b2); + --dxds-primary-70: var(--dx-accent-color-70, #00b9a2); + --dxds-primary-80: var(--dx-accent-color-80, #00a792); + --dxds-primary-90: var(--dx-accent-color-90, #009683); + --dxds-primary-100: var(--dx-accent-color-100, #018574); + --dxds-primary-110: var(--dx-accent-color-110, #007566); + --dxds-primary-120: var(--dx-accent-color-120, #006558); + --dxds-primary-130: var(--dx-accent-color-130, #00564a); + --dxds-primary-140: var(--dx-accent-color-140, #00473d); + --dxds-primary-150: var(--dx-accent-color-150, #00362e); + --dxds-primary-160: var(--dx-accent-color-160, #002922); + --dxds-primary-170: var(--dx-accent-color-170, #001b17); + --dxds-primary-180: var(--dx-accent-color-180, #000f0b); } :root { - --dxds-primary-10: #f6f8f7; - --dxds-primary-20: #ecefee; - --dxds-primary-30: #d7e0de; - --dxds-primary-40: #c5d2cf; - --dxds-primary-50: #b3c4bf; - --dxds-primary-60: #a0b5af; - --dxds-primary-70: #88a19a; - --dxds-primary-80: #718e86; - --dxds-primary-90: #5b7b73; - --dxds-primary-100: #486860; - --dxds-primary-110: #405e57; - --dxds-primary-120: #39544d; - --dxds-primary-130: #324a44; - --dxds-primary-140: #2c413c; - --dxds-primary-150: #21322d; - --dxds-primary-160: #182522; - --dxds-primary-170: #0f1816; - --dxds-primary-180: #070d0b; + --dxds-primary-10: var(--dx-accent-color-10, #f6f8f7); + --dxds-primary-20: var(--dx-accent-color-20, #ecefee); + --dxds-primary-30: var(--dx-accent-color-30, #d7e0de); + --dxds-primary-40: var(--dx-accent-color-40, #c5d2cf); + --dxds-primary-50: var(--dx-accent-color-50, #b3c4bf); + --dxds-primary-60: var(--dx-accent-color-60, #a0b5af); + --dxds-primary-70: var(--dx-accent-color-70, #88a19a); + --dxds-primary-80: var(--dx-accent-color-80, #718e86); + --dxds-primary-90: var(--dx-accent-color-90, #5b7b73); + --dxds-primary-100: var(--dx-accent-color-100, #486860); + --dxds-primary-110: var(--dx-accent-color-110, #405e57); + --dxds-primary-120: var(--dx-accent-color-120, #39544d); + --dxds-primary-130: var(--dx-accent-color-130, #324a44); + --dxds-primary-140: var(--dx-accent-color-140, #2c413c); + --dxds-primary-150: var(--dx-accent-color-150, #21322d); + --dxds-primary-160: var(--dx-accent-color-160, #182522); + --dxds-primary-170: var(--dx-accent-color-170, #0f1816); + --dxds-primary-180: var(--dx-accent-color-180, #070d0b); } :root { - --dxds-primary-10: #fbf5fa; - --dxds-primary-20: #f8e9f5; - --dxds-primary-30: #f6d1ee; - --dxds-primary-40: #f1bbe7; - --dxds-primary-50: #eaa5de; - --dxds-primary-60: #e28dd5; - --dxds-primary-70: #dc78ce; - --dxds-primary-80: #d662c7; - --dxds-primary-90: #cf4abf; - --dxds-primary-100: #c239b3; - --dxds-primary-110: #ab2a9e; - --dxds-primary-120: #941d88; - --dxds-primary-130: #7c1272; - --dxds-primary-140: #66055d; - --dxds-primary-150: #4f0449; - --dxds-primary-160: #3d0337; - --dxds-primary-170: #2a0226; - --dxds-primary-180: #180116; + --dxds-primary-10: var(--dx-accent-color-10, #fbf5fa); + --dxds-primary-20: var(--dx-accent-color-20, #f8e9f5); + --dxds-primary-30: var(--dx-accent-color-30, #f6d1ee); + --dxds-primary-40: var(--dx-accent-color-40, #f1bbe7); + --dxds-primary-50: var(--dx-accent-color-50, #eaa5de); + --dxds-primary-60: var(--dx-accent-color-60, #e28dd5); + --dxds-primary-70: var(--dx-accent-color-70, #dc78ce); + --dxds-primary-80: var(--dx-accent-color-80, #d662c7); + --dxds-primary-90: var(--dx-accent-color-90, #cf4abf); + --dxds-primary-100: var(--dx-accent-color-100, #c239b3); + --dxds-primary-110: var(--dx-accent-color-110, #ab2a9e); + --dxds-primary-120: var(--dx-accent-color-120, #941d88); + --dxds-primary-130: var(--dx-accent-color-130, #7c1272); + --dxds-primary-140: var(--dx-accent-color-140, #66055d); + --dxds-primary-150: var(--dx-accent-color-150, #4f0449); + --dxds-primary-160: var(--dx-accent-color-160, #3d0337); + --dxds-primary-170: var(--dx-accent-color-170, #2a0226); + --dxds-primary-180: var(--dx-accent-color-180, #180116); } :root { - --dxds-primary-10: #f6f7fc; - --dxds-primary-20: #eceef9; - --dxds-primary-30: #d7dcfa; - --dxds-primary-40: #c5ccf7; - --dxds-primary-50: #b3bbf4; - --dxds-primary-60: #a0a9ee; - --dxds-primary-70: #8d96e7; - --dxds-primary-80: #7b83e0; - --dxds-primary-90: #6a70d7; - --dxds-primary-100: #5b5fc7; - --dxds-primary-110: #5053b3; - --dxds-primary-120: #45479f; - --dxds-primary-130: #3a3c89; - --dxds-primary-140: #303275; - --dxds-primary-150: #24265b; - --dxds-primary-160: #1a1b46; - --dxds-primary-170: #101131; - --dxds-primary-180: #08081d; + --dxds-primary-10: var(--dx-accent-color-10, #f6f7fc); + --dxds-primary-20: var(--dx-accent-color-20, #eceef9); + --dxds-primary-30: var(--dx-accent-color-30, #d7dcfa); + --dxds-primary-40: var(--dx-accent-color-40, #c5ccf7); + --dxds-primary-50: var(--dx-accent-color-50, #b3bbf4); + --dxds-primary-60: var(--dx-accent-color-60, #a0a9ee); + --dxds-primary-70: var(--dx-accent-color-70, #8d96e7); + --dxds-primary-80: var(--dx-accent-color-80, #7b83e0); + --dxds-primary-90: var(--dx-accent-color-90, #6a70d7); + --dxds-primary-100: var(--dx-accent-color-100, #5b5fc7); + --dxds-primary-110: var(--dx-accent-color-110, #5053b3); + --dxds-primary-120: var(--dx-accent-color-120, #45479f); + --dxds-primary-130: var(--dx-accent-color-130, #3a3c89); + --dxds-primary-140: var(--dx-accent-color-140, #303275); + --dxds-primary-150: var(--dx-accent-color-150, #24265b); + --dxds-primary-160: var(--dx-accent-color-160, #1a1b46); + --dxds-primary-170: var(--dx-accent-color-170, #101131); + --dxds-primary-180: var(--dx-accent-color-180, #08081d); } :root { - --dxds-primary-10: #fef5f6; - --dxds-primary-20: #fee8eb; - --dxds-primary-30: #ffd0d6; - --dxds-primary-40: #ffb9c3; - --dxds-primary-50: #ffa0ae; - --dxds-primary-60: #ff8399; - --dxds-primary-70: #fd6b89; - --dxds-primary-80: #fb4f79; - --dxds-primary-90: #f72a6a; - --dxds-primary-100: #ea005e; - --dxds-primary-110: #cb0050; - --dxds-primary-120: #ad0043; - --dxds-primary-130: #8f0036; - --dxds-primary-140: #73002a; - --dxds-primary-150: #5a001f; - --dxds-primary-160: #450016; - --dxds-primary-170: #31000d; - --dxds-primary-180: #1e0006; + --dxds-primary-10: var(--dx-accent-color-10, #fef5f6); + --dxds-primary-20: var(--dx-accent-color-20, #fee8eb); + --dxds-primary-30: var(--dx-accent-color-30, #ffd0d6); + --dxds-primary-40: var(--dx-accent-color-40, #ffb9c3); + --dxds-primary-50: var(--dx-accent-color-50, #ffa0ae); + --dxds-primary-60: var(--dx-accent-color-60, #ff8399); + --dxds-primary-70: var(--dx-accent-color-70, #fd6b89); + --dxds-primary-80: var(--dx-accent-color-80, #fb4f79); + --dxds-primary-90: var(--dx-accent-color-90, #f72a6a); + --dxds-primary-100: var(--dx-accent-color-100, #ea005e); + --dxds-primary-110: var(--dx-accent-color-110, #cb0050); + --dxds-primary-120: var(--dx-accent-color-120, #ad0043); + --dxds-primary-130: var(--dx-accent-color-130, #8f0036); + --dxds-primary-140: var(--dx-accent-color-140, #73002a); + --dxds-primary-150: var(--dx-accent-color-150, #5a001f); + --dxds-primary-160: var(--dx-accent-color-160, #450016); + --dxds-primary-170: var(--dx-accent-color-170, #31000d); + --dxds-primary-180: var(--dx-accent-color-180, #1e0006); } :root { - --dxds-primary-10: #fdf5f3; - --dxds-primary-20: #fceae5; - --dxds-primary-30: #ffd3c7; - --dxds-primary-40: #fdbeac; - --dxds-primary-50: #faa892; - --dxds-primary-60: #f59176; - --dxds-primary-70: #f17c5d; - --dxds-primary-80: #ed6542; - --dxds-primary-90: #e74d21; - --dxds-primary-100: #da3b01; - --dxds-primary-110: #be3200; - --dxds-primary-120: #a22900; - --dxds-primary-130: #882100; - --dxds-primary-140: #6e1900; - --dxds-primary-150: #561100; - --dxds-primary-160: #420b00; - --dxds-primary-170: #2f0500; - --dxds-primary-180: #1c0200; + --dxds-primary-10: var(--dx-accent-color-10, #fdf5f3); + --dxds-primary-20: var(--dx-accent-color-20, #fceae5); + --dxds-primary-30: var(--dx-accent-color-30, #ffd3c7); + --dxds-primary-40: var(--dx-accent-color-40, #fdbeac); + --dxds-primary-50: var(--dx-accent-color-50, #faa892); + --dxds-primary-60: var(--dx-accent-color-60, #f59176); + --dxds-primary-70: var(--dx-accent-color-70, #f17c5d); + --dxds-primary-80: var(--dx-accent-color-80, #ed6542); + --dxds-primary-90: var(--dx-accent-color-90, #e74d21); + --dxds-primary-100: var(--dx-accent-color-100, #da3b01); + --dxds-primary-110: var(--dx-accent-color-110, #be3200); + --dxds-primary-120: var(--dx-accent-color-120, #a22900); + --dxds-primary-130: var(--dx-accent-color-130, #882100); + --dxds-primary-140: var(--dx-accent-color-140, #6e1900); + --dxds-primary-150: var(--dx-accent-color-150, #561100); + --dxds-primary-160: var(--dx-accent-color-160, #420b00); + --dxds-primary-170: var(--dx-accent-color-170, #2f0500); + --dxds-primary-180: var(--dx-accent-color-180, #1c0200); } :root { - --dxds-primary-10: #f7f7f8; - --dxds-primary-20: #edeef1; - --dxds-primary-30: #dadee4; - --dxds-primary-40: #cad0d8; - --dxds-primary-50: #b8c0cb; - --dxds-primary-60: #a7b0be; - --dxds-primary-70: #96a1b1; - --dxds-primary-80: #8693a5; - --dxds-primary-90: #768498; - --dxds-primary-100: #68768a; - --dxds-primary-110: #5a677a; - --dxds-primary-120: #4d5869; - --dxds-primary-130: #404a59; - --dxds-primary-140: #343c49; - --dxds-primary-150: #272e38; - --dxds-primary-160: #1c222a; - --dxds-primary-170: #12161c; - --dxds-primary-180: #090b0f; + --dxds-primary-10: var(--dx-accent-color-10, #f7f7f8); + --dxds-primary-20: var(--dx-accent-color-20, #edeef1); + --dxds-primary-30: var(--dx-accent-color-30, #dadee4); + --dxds-primary-40: var(--dx-accent-color-40, #cad0d8); + --dxds-primary-50: var(--dx-accent-color-50, #b8c0cb); + --dxds-primary-60: var(--dx-accent-color-60, #a7b0be); + --dxds-primary-70: var(--dx-accent-color-70, #96a1b1); + --dxds-primary-80: var(--dx-accent-color-80, #8693a5); + --dxds-primary-90: var(--dx-accent-color-90, #768498); + --dxds-primary-100: var(--dx-accent-color-100, #68768a); + --dxds-primary-110: var(--dx-accent-color-110, #5a677a); + --dxds-primary-120: var(--dx-accent-color-120, #4d5869); + --dxds-primary-130: var(--dx-accent-color-130, #404a59); + --dxds-primary-140: var(--dx-accent-color-140, #343c49); + --dxds-primary-150: var(--dx-accent-color-150, #272e38); + --dxds-primary-160: var(--dx-accent-color-160, #1c222a); + --dxds-primary-170: var(--dx-accent-color-170, #12161c); + --dxds-primary-180: var(--dx-accent-color-180, #090b0f); } :root { - --dxds-primary-10: #f7f7f7; - --dxds-primary-20: #efeeee; - --dxds-primary-30: #dfdedd; - --dxds-primary-40: #d0cfce; - --dxds-primary-50: #c1bfbe; - --dxds-primary-60: #b1afad; - --dxds-primary-70: #9f9d9b; - --dxds-primary-80: #8e8c8a; - --dxds-primary-90: #7e7b79; - --dxds-primary-100: #6d6a68; - --dxds-primary-110: #615e5c; - --dxds-primary-120: #555250; - --dxds-primary-130: #494745; - --dxds-primary-140: #3d3b3a; - --dxds-primary-150: #2f2d2c; - --dxds-primary-160: #232121; - --dxds-primary-170: #171615; - --dxds-primary-180: #0c0b0b; + --dxds-primary-10: var(--dx-accent-color-10, #f7f7f7); + --dxds-primary-20: var(--dx-accent-color-20, #efeeee); + --dxds-primary-30: var(--dx-accent-color-30, #dfdedd); + --dxds-primary-40: var(--dx-accent-color-40, #d0cfce); + --dxds-primary-50: var(--dx-accent-color-50, #c1bfbe); + --dxds-primary-60: var(--dx-accent-color-60, #b1afad); + --dxds-primary-70: var(--dx-accent-color-70, #9f9d9b); + --dxds-primary-80: var(--dx-accent-color-80, #8e8c8a); + --dxds-primary-90: var(--dx-accent-color-90, #7e7b79); + --dxds-primary-100: var(--dx-accent-color-100, #6d6a68); + --dxds-primary-110: var(--dx-accent-color-110, #615e5c); + --dxds-primary-120: var(--dx-accent-color-120, #555250); + --dxds-primary-130: var(--dx-accent-color-130, #494745); + --dxds-primary-140: var(--dx-accent-color-140, #3d3b3a); + --dxds-primary-150: var(--dx-accent-color-150, #2f2d2c); + --dxds-primary-160: var(--dx-accent-color-160, #232121); + --dxds-primary-170: var(--dx-accent-color-170, #171615); + --dxds-primary-180: var(--dx-accent-color-180, #0c0b0b); } + +[note] We recommend that you add predefined accent shades as [var()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var) fallback values to `--dx-accent-color-*` to ensure your application can later use a custom accent color. diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md index 4e2ea562c6..110e45b485 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/10 Accent Colors/10 Custom Accent Colors.md @@ -1,47 +1,22 @@ -You can define a custom accent color as a CSS variable and use this color to calculate `--dxds-primary-*` variables as follows: +Fluent Next stylesheets ship with a CSS rule that calculates [primary shades](https://docs.devexpress.com/DesignSystem/405638/colors/theme-palettes/fluent-theme-palettes#fluent-primary) from the `--dx-accent-color` variable. Assign a color to this variable to use Fluent Next themes with a custom accent color: - - /* Set --my-accent-color to a brand color; load after the theme stylesheet. */ + :root { - --my-accent-color-source: var(--my-accent-color, #0f6cbd); - --my-accent-lightness-max: 0.975; - --my-accent-lightness-min: 0.15; - --my-accent-chroma-min: 0.01; - - --dxds-primary-10: oklch(from var(--my-accent-color-source) calc(l + var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) calc(c - (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min))) h); - --dxds-primary-20: oklch(from var(--my-accent-color-source) calc(l + 8 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 8 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-30: oklch(from var(--my-accent-color-source) calc(l + 7 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 7 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-40: oklch(from var(--my-accent-color-source) calc(l + 6 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 6 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-50: oklch(from var(--my-accent-color-source) calc(l + 5 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 5 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-60: oklch(from var(--my-accent-color-source) calc(l + 4 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 4 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-70: oklch(from var(--my-accent-color-source) calc(l + 3 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 3 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-80: oklch(from var(--my-accent-color-source) calc(l + 2 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 2 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-90: oklch(from var(--my-accent-color-source) calc(l + 1 * (var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) / 9) calc(c - 1 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 9) h); - --dxds-primary-100: var(--my-accent-color-source); - --dxds-primary-110: oklch(from var(--my-accent-color-source) calc(l - 1 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 1 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-120: oklch(from var(--my-accent-color-source) calc(l - 2 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 2 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-130: oklch(from var(--my-accent-color-source) calc(l - 3 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 3 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-140: oklch(from var(--my-accent-color-source) calc(l - 4 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 4 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-150: oklch(from var(--my-accent-color-source) calc(l - 5 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 5 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-160: oklch(from var(--my-accent-color-source) calc(l - 6 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 6 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-170: oklch(from var(--my-accent-color-source) calc(l - 7 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 7 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); - --dxds-primary-180: oklch(from var(--my-accent-color-source) calc(l - 8 * (max(l, var(--my-accent-lightness-min)) - var(--my-accent-lightness-min)) / 8) calc(c - 8 * (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min)) / 8) h); + --dx-accent-color: SlateBlue; } -[note] +To ensure your app is accessible to users with vision impairments, we recommend that you specify a bright color as your custom accent. Use a color that has high contrast ratios with background and content colors in your chosen theme mode (light or dark). Avoid light or pastel colors, as well as grayscale colors such as white or black. Refer to the following help topic for more information about color contrast: [Color Contrast - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast). -Older browsers may not support the [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) CSS function. To ensure these browsers do not override `--dxds-primary-*` variables with invalid values, wrap color calculations in a feature query (a [@supports](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports) CSS at-rule): +[note] - :root { - --my-accent-color-source: var(--my-accent-color, #0f6cbd); - /* ... */ - } +- Fluent Next stylesheets use the [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) CSS function to calculate primary color shades. Older browsers may not support this function and may revert to predefined accents. +- Certain calculated primary shades may not have sufficient color contrast with corresponding background or content colors. You can override these shades individually as follows: - @supports (color: oklch(from red l c h)) { + :root { - --dxds-primary-10: oklch(from var(--my-accent-color-source) calc(l + var(--my-accent-lightness-max) - min(l, var(--my-accent-lightness-max))) calc(c - (max(c, var(--my-accent-chroma-min)) - var(--my-accent-chroma-min))) h); - /* ... */ + --dx-accent-color-90: SlateBlue; } - } + + To ensure shade overrides are applied, load the stylesheet where you define these overrides immediately after your Fluent Next stylesheet. [/note] From 0d2ccba6fd723b945723526ffa4a87171557a378 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 7 Sep 2026 22:37:55 +0400 Subject: [PATCH 12/13] Update concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md Co-authored-by: EugeniyKiyashko --- .../05 CSS Variables/00 CSS Variables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index 069ac84949..294662d8d5 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -202,7 +202,7 @@ You can also use CSS variable overrides to apply custom colors to specific parts .yellow-accent { --dxds-color-bg: var(--dxds-color-bg-yellow); --dxds-color-content: var(--dxds-color-content-yellow); - --dxds-color-border: var(--dxds-color-bg-yellow-subtle); + --dxds-color-border: var(--dxds-color-border-yellow); } /* Custom colors */ From a387afb3946fad3faeb269298953421a924ce3f5 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Thu, 10 Sep 2026 13:33:43 +0400 Subject: [PATCH 13/13] Add Theme Mode Information --- .../05 CSS Variables/00 CSS Variables.md | 6 +- .../15 Theme Modes/00 Theme Modes.md | 4 + .../05 Container-Specific Theme Modes.md | 166 ++++++++++++++++++ 3 files changed, 173 insertions(+), 3 deletions(-) create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/00 Theme Modes.md create mode 100644 concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/05 Container-Specific Theme Modes.md diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md index 294662d8d5..abac17a18b 100644 --- a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/05 CSS Variables/00 CSS Variables.md @@ -39,18 +39,18 @@ You can apply these variables to custom elements to ensure a consistent look acr border-color: var(--dxds-color-border-hovered); } -CSS variable overrides also allow you to modify styles of DevExtreme components. You can define overrides for individual components or wrap multiple components in a container and define overrides on the container level. This allows you to apply unique styles to different parts of your application. For instance, you can use the following [semantic variable](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables) overrides to apply dark mode styles to parts of a light mode application: +CSS variable overrides also allow you to modify styles of DevExtreme components. You can define overrides for individual components or wrap multiple components in a container and define overrides on the container level. This allows you to apply unique styles to different parts of your application. The following code snippet overrides [semantic variables](https://docs.devexpress.com/DesignSystem/405706/colors/color-css-variables): /* Using dxds variables */ - .dark-colors-dx { + .custom-colors-var { --dxds-color-bg: var(--dxds-color-bg-inverted); --dxds-color-content: var(--dxds-color-content-inverted); --dxds-color-border: var(--dxds-color-border-inverted); } /* Using custom colors */ - .dark-colors-custom { + .custom-colors-hex { --dxds-color-bg: #341A51; --dxds-color-content: #F5F0FA; --dxds-color-border: #532982; diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/00 Theme Modes.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/00 Theme Modes.md new file mode 100644 index 0000000000..faac40cc6d --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/00 Theme Modes.md @@ -0,0 +1,4 @@ +Fluent Next themes ship with light and dark theme modes. These modes are available as separate stylesheets: + +- `dx.fluent-next.blue.light.css` +- `dx.fluent-next.blue.dark.css` diff --git a/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/05 Container-Specific Theme Modes.md b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/05 Container-Specific Theme Modes.md new file mode 100644 index 0000000000..c6fd9c50dd --- /dev/null +++ b/concepts/60 Themes and Styles/07 Fluent Next Theme Customization/15 Theme Modes/05 Container-Specific Theme Modes.md @@ -0,0 +1,166 @@ +Fluent Next themes allow you to define theme modes for specific containers in your application. Container-specific modes allow you to use dark mode styles in a lght mode application and vice versa. These modes apply to DevExtreme components and HTML elements. + +[note] + +- SVG components do not support container-specific theme modes and always use the application's theme mode (from the active Fluent Next stylesheet). +- You do not need to import both light and dark stylesheets to use container-specific theme modes. All Fluent Next stylesheets ship with both light and dark CSS rules. + +[/note] + +Use one of the following classes to specify a theme mode for a container: + +- `dx-theme-mode-light`: Applies **light** mode styles to a container and its children +- `dx-theme-mode-dark`: Applies **dark** mode styles to a container and its children +- `dx-theme-mode-inverted`: Applies the opposite theme mode relative to a container's parent + +You can change container theme modes at runtime. To ensure DevExtreme component styles are updated, call [refreshMode()]() after you update a container's theme mode: + +--- + +##### jQuery + + +
+
+
+ + + $('#button-container').dxButton({ + text: 'Change Theme Mode', + onClick() { + $('.dx-theme-mode-light') + .removeClass('dx-theme-mode-light') + .addClass('dx-theme-mode-dark'); + DevExpress.ui.themes.refreshMode(); + }, + }) + +##### Angular + + + import refreshMode from "devextreme/ui/themes"; + import { DxButtonModule } from "devextreme-angular"; + + @Component({ + template: ` +
+ +
+ `, + }) + export class AppComponent { + containerClass: string = 'dx-theme-mode-light'; + + changeThemeMode() { + this.containerClass = 'dx-theme-mode-dark'; + refreshTheme(); + } + } + +##### Vue + + + + + + +##### React + + + import React, { useCallback, useState } from 'react'; + import Button from 'devextreme-react/button'; + import refreshMode from 'devextreme/ui/themes'; + + export default function App() { + const [containerClass, setContainerClass] = useState('dx-theme-mode-light'); + + const changeThemeMode = useCallback(() => { + setContainerClass('dx-theme-mode-dark'); + refreshMode(); + }, []); + + return ( +
+
+ ); + } + +--- + +`dx-theme-mode-inverted` supports nesting. The following code snippet demonstrates three nesting levels: + + + + + +
+ +
+ +
+ +
+
+
+ + +You can call the [mode(element)]() method to get the calculated theme mode of an element (*"light"* or *"dark"*). The following code snippet returns *"light"* for the `.three` element from the previous sample: + +--- + +##### jQuery + + + const calculatedMode = DevExpress.ui.themes.mode('.three'); + +##### Angular + + + import mode from "devextreme/ui/themes"; + + // ... + export class AppComponent { + calculatedMode: string = mode('.three'); + } + +##### Vue + + + + +##### React + + + import mode from "devextreme/ui/themes"; + + const calculatedMode: string = mode('.three'); + +---