@dynatrace/strato-design-tokens 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -0,0 +1,226 @@
+# design-tokens
+
+## 1.5.1
+
+### Updates
+
+#### General
+
+- Changelog files are now included in the published packages for easier agentic access.
+- Added new color token for embedded surface backdrops. (APPDEV-18484)
+
+## 1.5.0
+
+### Updates
+
+#### General
+
+- Updated subdued border color tokens as part of Strato's visual refresh.
+
+## 1.4.0
+
+### Updates
+
+#### General
+
+- Added new color and box-shadow tokens for light and dark mode to support the visual refresh. (APPDEV-16804, APPDEV-17284)
+
+## 1.3.1
+
+## 1.3.0
+
+## 1.2.0
+
+### Updates
+
+#### Charts
+
+- Added category `None` for security risk level palette. (APPDEV-15295)
+- Updated color for category `Muted` for security risk level and vulnerability status palettes (dark only). (APPDEV-15295)
+- Updated color for category `None` for log level and log status palettes (dark only). (APPDEV-15295)
+
+## 1.1.4
+
+### Updates
+
+#### General
+
+- Added new design tokens, `Timing.Slowest` and `Easings.RotateElastic`. (APPDEV-14757)
+
+## 1.1.3
+
+### Updates
+
+#### General
+
+- Updated descriptions of `Breakpoints` tokens.
+- Reduced the `Border.Radius` values to not cut into content as much. (APPDEV-14774)
+
+## 1.1.2
+
+Documentation update.
+
+## 1.1.1
+
+Documentation update.
+
+## 1.1.0
+
+### General
+
+- Adjusted light mode colors to be appear more vivid and less gray. Additionally we've added subtle outlines to our default Surface shadow tokens for both dark and light mode.
+- Design tokens now also have a visual regression test that checks for changes in token values.
+
+## 1.0.1
+
+### General
+
+- Design tokens are now also shipped as pure CSS files. (APPDEV-12996)
+
+## 1.0.0
+
+:::caution Breaking changes
+
+**General**
+
+- Removed deprecated `onAccent` color tokens. (APPDEV-9427)
+
+:::
+
+## 0.20.40
+
+- Updated documentation.
+
+## 0.20.30
+
+- Updated documentation.
+
+## 0.20.20
+
+- Updated documentation.
+
+## 0.20.10
+
+- Updated documentation.
+
+### Colors
+
+- Corrects faulty `neutral` to `critical` jsdoc comments on color tokens.
+- Include None in Log-Level color palette.
+- Update colors of Diverging color palette.
+
+## 0.20.9
+
+### Colors
+
+- `Critical` and `Warning` color are slightly adjusted.
+
+## 0.20.8
+
+### Colors
+
+- Changes `Warning` and `Critical` colors to be more vibrant and introduces new tokens to support proper contrast on new vibrant colors.
+
+## 0.20.7
+
+### General
+
+- Package dependency cleanup.
+
+## 0.20.5
+
+### Typography
+
+- Update DynatraceFlow fonts used.
+
+## 0.20.0
+
+:::note Breaking changes
+
+- Removed `none` color token from the `log-level` color palette.
+
+:::
+
+### Colors
+
+- Updated chart color tokens for color palettes of `swamps` and `log-level` on both light and dark themes.
+
+## 0.19.0
+
+:::note Breaking changes
+
+- Removed `Hover`, `Active`, `DefaultTransparent`, `HoverTransparent` and `ActiveTransparent` token values from `Colors.Charts` tokens. `Default` should be used instead. Updated the color palette from `vulnerability-risk-level` to `security-risk-level`.
+
+:::
+
+### Breakpoints
+
+- BreakpointJS tokens are now exported from the root entry point.
+
+## 0.18.3
+
+### Breakpoints
+
+- Breakpoint tokens are now available as typescript consumable numbers. You can use `import BreakpointsJS from '@dynatrace/strato-design-tokens/breakpoints-js;` in order to consume the numeric values of the breakpoint tokens.
+
+## 0.18.0
+
+### Colors
+
+- Added 'vulnerability-status' color palette.
+
+## 0.17.1
+
+### General
+
+- `jscodeshift` was removed as a dependency as it is no longer needed for the migrations of this package.
+
+## 0.17.0
+
+### Colors
+
+- Adjusted colors to match a11y color-contrast requirements for hover state. Adjusted syntax colors to match a11y color-contrast requirements.
+
+## 0.16.0
+
+### Borders
+
+- Added new subdued Surface border radius token.
+
+## 0.15.0
+
+### General
+
+- React 18 compatibility is now available.
+
+## 0.14.0
+
+### Animations
+
+- Added animation tokens for rescaling.
+
+### Colors
+
+- Added vulnerability risk level color palette for charts.
+
+## 0.13.0
+
+### General
+
+- design-tokens now have comments that populates documentation.
+
+### Colors
+
+- Added threshold chart color design tokens.
+
+## 0.12.1
+
+### General
+
+- Readme file is now included in the shipped package.
+
+## 0.12.0
+
+### Colors
+
+- Fixed success disabled color token.

package/colors/index.d.ts

@@ -14,6 +14,10 @@ declare const _default: {
                 /** Css custom property: --dt-colors-theme-background-shell-default. Default value: #f2f2f5. */
                 Default: string;
             };
+            Surface: {
+                /** Css custom property: --dt-colors-theme-background-surface-backdrop-embedded. Default value: #f9f9facc. */
+                BackdropEmbedded: string;
+            };
             /** Css custom property: --dt-colors-theme-background-10. Default value: #f9f9fa. */
             '10': string;
             /** Css custom property: --dt-colors-theme-background-20. Default value: #fff. */
@@ -134,6 +138,11 @@ declare const _default: {
              * Css custom property: --dt-colors-background-surface-backdrop. Default value: #f9f9facc.
              */
             Backdrop: string;
+            /**
+             * Use as the backdrop for embedded overlays to reduce the visual noise of background elements.
+             * Css custom property: --dt-colors-background-surface-backdrop-embedded. Default value: #f9f9facc.
+             */
+            BackdropEmbedded: string;
             /**
              * Use for default surface background.
              * Css custom property: --dt-colors-background-surface-default. Default value: #fff.
@@ -563,17 +572,17 @@ declare const _default: {
             AccentActive: string;
             /**
              * Use as border color of subtle elements.
-             * Css custom property: --dt-colors-border-neutral-subdued. Default value: #ebecf0.
+             * Css custom property: --dt-colors-border-neutral-subdued. Default value: #e4e5eb.
              */
             Subdued: string;
             /**
              * Use as border color of subtle elements on hover interaction.
-             * Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #dadbe4.
+             * Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #d0d1dc.
              */
             SubduedHover: string;
             /**
              * Use for click interactions on subtle elements.
-             * Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #d0d1dc.
+             * Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #c6c7d5.
              */
             SubduedActive: string;
         };

package/colors/index.js

@@ -32,6 +32,10 @@ const Theme = {
       /** Css custom property: --dt-colors-theme-background-shell-default. Default value: #f2f2f5. */
       Default: "var(--dt-colors-theme-background-shell-default, #f2f2f5)"
     },
+    Surface: {
+      /** Css custom property: --dt-colors-theme-background-surface-backdrop-embedded. Default value: #f9f9facc. */
+      BackdropEmbedded: "var(--dt-colors-theme-background-surface-backdrop-embedded, #f9f9facc)"
+    },
     /** Css custom property: --dt-colors-theme-background-10. Default value: #f9f9fa. */
     "10": "var(--dt-colors-theme-background-10, #f9f9fa)",
     /** Css custom property: --dt-colors-theme-background-20. Default value: #fff. */
@@ -152,6 +156,11 @@ const Background = {
      * Css custom property: --dt-colors-background-surface-backdrop. Default value: #f9f9facc.
      */
     Backdrop: "var(--dt-colors-background-surface-backdrop, #f9f9facc)",
+    /**
+     * Use as the backdrop for embedded overlays to reduce the visual noise of background elements.
+     * Css custom property: --dt-colors-background-surface-backdrop-embedded. Default value: #f9f9facc.
+     */
+    BackdropEmbedded: "var(--dt-colors-background-surface-backdrop-embedded, #f9f9facc)",
     /**
      * Use for default surface background.
      * Css custom property: --dt-colors-background-surface-default. Default value: #fff.
@@ -581,19 +590,19 @@ const Border = {
     AccentActive: "var(--dt-colors-border-neutral-accent-active, #2f2f4f)",
     /**
      * Use as border color of subtle elements.
-     * Css custom property: --dt-colors-border-neutral-subdued. Default value: #ebecf0.
+     * Css custom property: --dt-colors-border-neutral-subdued. Default value: #e4e5eb.
      */
-    Subdued: "var(--dt-colors-border-neutral-subdued, #ebecf0)",
+    Subdued: "var(--dt-colors-border-neutral-subdued, #e4e5eb)",
     /**
      * Use as border color of subtle elements on hover interaction.
-     * Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #dadbe4.
+     * Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #d0d1dc.
      */
-    SubduedHover: "var(--dt-colors-border-neutral-subdued-hover, #dadbe4)",
+    SubduedHover: "var(--dt-colors-border-neutral-subdued-hover, #d0d1dc)",
     /**
      * Use for click interactions on subtle elements.
-     * Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #d0d1dc.
+     * Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #c6c7d5.
      */
-    SubduedActive: "var(--dt-colors-border-neutral-subdued-active, #d0d1dc)"
+    SubduedActive: "var(--dt-colors-border-neutral-subdued-active, #c6c7d5)"
   },
   Primary: {
     OnAccent: {

package/esm/colors/index.js

@@ -10,6 +10,10 @@ const Theme = {
       /** Css custom property: --dt-colors-theme-background-shell-default. Default value: #f2f2f5. */
       Default: "var(--dt-colors-theme-background-shell-default, #f2f2f5)"
     },
+    Surface: {
+      /** Css custom property: --dt-colors-theme-background-surface-backdrop-embedded. Default value: #f9f9facc. */
+      BackdropEmbedded: "var(--dt-colors-theme-background-surface-backdrop-embedded, #f9f9facc)"
+    },
     /** Css custom property: --dt-colors-theme-background-10. Default value: #f9f9fa. */
     "10": "var(--dt-colors-theme-background-10, #f9f9fa)",
     /** Css custom property: --dt-colors-theme-background-20. Default value: #fff. */
@@ -130,6 +134,11 @@ const Background = {
      * Css custom property: --dt-colors-background-surface-backdrop. Default value: #f9f9facc.
      */
     Backdrop: "var(--dt-colors-background-surface-backdrop, #f9f9facc)",
+    /**
+     * Use as the backdrop for embedded overlays to reduce the visual noise of background elements.
+     * Css custom property: --dt-colors-background-surface-backdrop-embedded. Default value: #f9f9facc.
+     */
+    BackdropEmbedded: "var(--dt-colors-background-surface-backdrop-embedded, #f9f9facc)",
     /**
      * Use for default surface background.
      * Css custom property: --dt-colors-background-surface-default. Default value: #fff.
@@ -559,19 +568,19 @@ const Border = {
     AccentActive: "var(--dt-colors-border-neutral-accent-active, #2f2f4f)",
     /**
      * Use as border color of subtle elements.
-     * Css custom property: --dt-colors-border-neutral-subdued. Default value: #ebecf0.
+     * Css custom property: --dt-colors-border-neutral-subdued. Default value: #e4e5eb.
      */
-    Subdued: "var(--dt-colors-border-neutral-subdued, #ebecf0)",
+    Subdued: "var(--dt-colors-border-neutral-subdued, #e4e5eb)",
     /**
      * Use as border color of subtle elements on hover interaction.
-     * Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #dadbe4.
+     * Css custom property: --dt-colors-border-neutral-subdued-hover. Default value: #d0d1dc.
      */
-    SubduedHover: "var(--dt-colors-border-neutral-subdued-hover, #dadbe4)",
+    SubduedHover: "var(--dt-colors-border-neutral-subdued-hover, #d0d1dc)",
     /**
      * Use for click interactions on subtle elements.
-     * Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #d0d1dc.
+     * Css custom property: --dt-colors-border-neutral-subdued-active. Default value: #c6c7d5.
      */
-    SubduedActive: "var(--dt-colors-border-neutral-subdued-active, #d0d1dc)"
+    SubduedActive: "var(--dt-colors-border-neutral-subdued-active, #c6c7d5)"
   },
   Primary: {
     OnAccent: {