@dynatrace/strato-design-tokens 0.20.30 → 1.0.0

package/README.md

@@ -1,4 +1,4 @@
-# Strato Design Token
+# Strato Design Tokens
 
 This package includes the design tokens of the Strato Design System.
 
@@ -12,7 +12,7 @@ npm install @dynatrace/strato-design-tokens
 
 ## Documentation
 
-Check out the extensive documentation on the [Dynatrace Developer Documentation](https://developer.dynatrace.com/preview/reference/design-system/)
+Check out the extensive documentation on the [Dynatrace Developer Documentation](https://developer.dynatrace.com/design/design-tokens/)
 
 ## Breaking Changes
 

package/colors/index.d.ts

@@ -489,50 +489,6 @@ declare const _default: {
                  */
                 AccentActive: string;
             };
-            OnAccent: {
-                /**
-                 * Use for disabled fields placed on accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-disabled. Default value: #f3f3f71a.
-                 */
-                Disabled: string;
-                /**
-                 * Use for default fields placed on accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-default. Default value: #f3f3f700.
-                 */
-                Default: string;
-                /**
-                 * Use for hover interaction on default fields on an accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-default-hover. Default value: #f3f3f74d.
-                 */
-                DefaultHover: string;
-                /**
-                 * Use for click interaction on default fields on an accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-default-active. Default value: #f3f3f766.
-                 */
-                DefaultActive: string;
-                /**
-                 * Use for emphasized fields placed on accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-emphasized. Default value: #f3f3f733.
-                 */
-                Emphasized: string;
-                /**
-                 * Use for hover interaction on emphasized fields on an accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-emphasized-hover. Default value: #f3f3f74d.
-                 */
-                EmphasizedHover: string;
-                /**
-                 * Use for click interaction on emphasized fields on an accentuated background.
-                 * @deprecated Will be removed
-                 * Css custom property: --dt-colors-background-field-on-accent-emphasized-active. Default value: #f3f3f766.
-                 */
-                EmphasizedActive: string;
-            };
         };
     };
     Border: {
@@ -831,32 +787,6 @@ declare const _default: {
              */
             AccentActive: string;
         };
-        OnAccent: {
-            /**
-             * Use for border color of elements on an accentuated background in a disabled state.
-             * @deprecated Replace with 'Colors.Border.[Color].OnAccent.Disabled'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-border-on-accent-disabled. Default value: #f3f3f733.
-             */
-            Disabled: string;
-            /**
-             * Use as the default border color of elements on an accentuated background.
-             * @deprecated Replace with 'Colors.Border.[Color].OnAccent.Default'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-border-on-accent-default. Default value: #f3f3f7.
-             */
-            Default: string;
-            /**
-             * Use as border color on hover interaction of elements on an accentuated background.
-             * @deprecated Replace with 'Colors.Border.[Color].OnAccent.DefaultHover'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-border-on-accent-default-hover. Default value: #f3f3f7cc.
-             */
-            DefaultHover: string;
-            /**
-             * Use as border color on click interaction of elements on an accentuated background.
-             * @deprecated Replace with 'Colors.Border.[Color].OnAccent.DefaultActive'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-border-on-accent-default-active. Default value: #f3f3f799.
-             */
-            DefaultActive: string;
-        };
     };
     Text: {
         Neutral: {
@@ -1094,32 +1024,6 @@ declare const _default: {
              */
             DefaultActive: string;
         };
-        OnAccent: {
-            /**
-             * Use for text color placed on accentuated background on disabled state.
-             * @deprecated Replace with 'Colors.Text.[Color].OnAccent.Disabled'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-text-on-accent-disabled. Default value: #f3f3f780.
-             */
-            Disabled: string;
-            /**
-             * Use for text color placed on accentuated background.
-             * @deprecated Replace with 'Colors.Text.[Color].OnAccent.Default'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-text-on-accent-default. Default value: #f3f3f7.
-             */
-            Default: string;
-            /**
-             * Use for text color placed on accentuated background on hover interaction.
-             * @deprecated Replace with 'Colors.Text.[Color].OnAccent.DefaultHover'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-text-on-accent-default-hover. Default value: #f3f3f7cc.
-             */
-            DefaultHover: string;
-            /**
-             * Use for text color placed on accentuated background on click interaction.
-             * @deprecated Replace with 'Colors.Text.[Color].OnAccent.DefaultActive'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-text-on-accent-default-active. Default value: #f3f3f799.
-             */
-            DefaultActive: string;
-        };
     };
     Icon: {
         Neutral: {
@@ -1357,32 +1261,6 @@ declare const _default: {
              */
             DefaultActive: string;
         };
-        OnAccent: {
-            /**
-             * Use for icon color placed on accentuated background on disabled state.
-             * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.Disabled'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-icon-on-accent-disabled. Default value: #f3f3f780.
-             */
-            Disabled: string;
-            /**
-             * Use for icon color placed on accentuated background.
-             * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.Default'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-icon-on-accent-default. Default value: #f3f3f7.
-             */
-            Default: string;
-            /**
-             * Use for icon color placed on accentuated background on hover interaction.
-             * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.DefaultHover'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-icon-on-accent-default-hover. Default value: #f3f3f7cc.
-             */
-            DefaultHover: string;
-            /**
-             * Use for icon color placed on accentuated background on click interaction.
-             * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.DefaultActive'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-             * Css custom property: --dt-colors-icon-on-accent-default-active. Default value: #f3f3f799.
-             */
-            DefaultActive: string;
-        };
     };
     Syntax: {
         /**

package/colors/index.js

@@ -506,50 +506,6 @@ const Background = {
        * Css custom property: --dt-colors-background-field-critical-accent-active. Default value: #a0001f.
        */
       AccentActive: "var(--dt-colors-background-field-critical-accent-active, #a0001f)"
-    },
-    OnAccent: {
-      /**
-       * Use for disabled fields placed on accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-disabled. Default value: #f3f3f71a.
-       */
-      Disabled: "var(--dt-colors-background-field-on-accent-disabled, #f3f3f71a)",
-      /**
-       * Use for default fields placed on accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-default. Default value: #f3f3f700.
-       */
-      Default: "var(--dt-colors-background-field-on-accent-default, #f3f3f700)",
-      /**
-       * Use for hover interaction on default fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-default-hover. Default value: #f3f3f74d.
-       */
-      DefaultHover: "var(--dt-colors-background-field-on-accent-default-hover, #f3f3f74d)",
-      /**
-       * Use for click interaction on default fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-default-active. Default value: #f3f3f766.
-       */
-      DefaultActive: "var(--dt-colors-background-field-on-accent-default-active, #f3f3f766)",
-      /**
-       * Use for emphasized fields placed on accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-emphasized. Default value: #f3f3f733.
-       */
-      Emphasized: "var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733)",
-      /**
-       * Use for hover interaction on emphasized fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-emphasized-hover. Default value: #f3f3f74d.
-       */
-      EmphasizedHover: "var(--dt-colors-background-field-on-accent-emphasized-hover, #f3f3f74d)",
-      /**
-       * Use for click interaction on emphasized fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-emphasized-active. Default value: #f3f3f766.
-       */
-      EmphasizedActive: "var(--dt-colors-background-field-on-accent-emphasized-active, #f3f3f766)"
     }
   }
 };
@@ -848,32 +804,6 @@ const Border = {
      * Css custom property: --dt-colors-border-critical-accent-active. Default value: #720013.
      */
     AccentActive: "var(--dt-colors-border-critical-accent-active, #720013)"
-  },
-  OnAccent: {
-    /**
-     * Use for border color of elements on an accentuated background in a disabled state.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.Disabled'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-disabled. Default value: #f3f3f733.
-     */
-    Disabled: "var(--dt-colors-border-on-accent-disabled, #f3f3f733)",
-    /**
-     * Use as the default border color of elements on an accentuated background.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.Default'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-default. Default value: #f3f3f7.
-     */
-    Default: "var(--dt-colors-border-on-accent-default, #f3f3f7)",
-    /**
-     * Use as border color on hover interaction of elements on an accentuated background.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.DefaultHover'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-default-hover. Default value: #f3f3f7cc.
-     */
-    DefaultHover: "var(--dt-colors-border-on-accent-default-hover, #f3f3f7cc)",
-    /**
-     * Use as border color on click interaction of elements on an accentuated background.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.DefaultActive'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-default-active. Default value: #f3f3f799.
-     */
-    DefaultActive: "var(--dt-colors-border-on-accent-default-active, #f3f3f799)"
   }
 };
 const Text = {
@@ -1111,32 +1041,6 @@ const Text = {
      * Css custom property: --dt-colors-text-critical-default-active. Default value: #720013.
      */
     DefaultActive: "var(--dt-colors-text-critical-default-active, #720013)"
-  },
-  OnAccent: {
-    /**
-     * Use for text color placed on accentuated background on disabled state.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.Disabled'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-disabled. Default value: #f3f3f780.
-     */
-    Disabled: "var(--dt-colors-text-on-accent-disabled, #f3f3f780)",
-    /**
-     * Use for text color placed on accentuated background.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.Default'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-default. Default value: #f3f3f7.
-     */
-    Default: "var(--dt-colors-text-on-accent-default, #f3f3f7)",
-    /**
-     * Use for text color placed on accentuated background on hover interaction.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.DefaultHover'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-default-hover. Default value: #f3f3f7cc.
-     */
-    DefaultHover: "var(--dt-colors-text-on-accent-default-hover, #f3f3f7cc)",
-    /**
-     * Use for text color placed on accentuated background on click interaction.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.DefaultActive'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-default-active. Default value: #f3f3f799.
-     */
-    DefaultActive: "var(--dt-colors-text-on-accent-default-active, #f3f3f799)"
   }
 };
 const Icon = {
@@ -1374,32 +1278,6 @@ const Icon = {
      * Css custom property: --dt-colors-icon-critical-default-active. Default value: #720013.
      */
     DefaultActive: "var(--dt-colors-icon-critical-default-active, #720013)"
-  },
-  OnAccent: {
-    /**
-     * Use for icon color placed on accentuated background on disabled state.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.Disabled'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-disabled. Default value: #f3f3f780.
-     */
-    Disabled: "var(--dt-colors-icon-on-accent-disabled, #f3f3f780)",
-    /**
-     * Use for icon color placed on accentuated background.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.Default'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-default. Default value: #f3f3f7.
-     */
-    Default: "var(--dt-colors-icon-on-accent-default, #f3f3f7)",
-    /**
-     * Use for icon color placed on accentuated background on hover interaction.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.DefaultHover'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-default-hover. Default value: #f3f3f7cc.
-     */
-    DefaultHover: "var(--dt-colors-icon-on-accent-default-hover, #f3f3f7cc)",
-    /**
-     * Use for icon color placed on accentuated background on click interaction.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.DefaultActive'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-default-active. Default value: #f3f3f799.
-     */
-    DefaultActive: "var(--dt-colors-icon-on-accent-default-active, #f3f3f799)"
   }
 };
 const Syntax = {

package/esm/colors/index.js

@@ -484,50 +484,6 @@ const Background = {
        * Css custom property: --dt-colors-background-field-critical-accent-active. Default value: #a0001f.
        */
       AccentActive: "var(--dt-colors-background-field-critical-accent-active, #a0001f)"
-    },
-    OnAccent: {
-      /**
-       * Use for disabled fields placed on accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-disabled. Default value: #f3f3f71a.
-       */
-      Disabled: "var(--dt-colors-background-field-on-accent-disabled, #f3f3f71a)",
-      /**
-       * Use for default fields placed on accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-default. Default value: #f3f3f700.
-       */
-      Default: "var(--dt-colors-background-field-on-accent-default, #f3f3f700)",
-      /**
-       * Use for hover interaction on default fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-default-hover. Default value: #f3f3f74d.
-       */
-      DefaultHover: "var(--dt-colors-background-field-on-accent-default-hover, #f3f3f74d)",
-      /**
-       * Use for click interaction on default fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-default-active. Default value: #f3f3f766.
-       */
-      DefaultActive: "var(--dt-colors-background-field-on-accent-default-active, #f3f3f766)",
-      /**
-       * Use for emphasized fields placed on accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-emphasized. Default value: #f3f3f733.
-       */
-      Emphasized: "var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733)",
-      /**
-       * Use for hover interaction on emphasized fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-emphasized-hover. Default value: #f3f3f74d.
-       */
-      EmphasizedHover: "var(--dt-colors-background-field-on-accent-emphasized-hover, #f3f3f74d)",
-      /**
-       * Use for click interaction on emphasized fields on an accentuated background.
-       * @deprecated Will be removed
-       * Css custom property: --dt-colors-background-field-on-accent-emphasized-active. Default value: #f3f3f766.
-       */
-      EmphasizedActive: "var(--dt-colors-background-field-on-accent-emphasized-active, #f3f3f766)"
     }
   }
 };
@@ -826,32 +782,6 @@ const Border = {
      * Css custom property: --dt-colors-border-critical-accent-active. Default value: #720013.
      */
     AccentActive: "var(--dt-colors-border-critical-accent-active, #720013)"
-  },
-  OnAccent: {
-    /**
-     * Use for border color of elements on an accentuated background in a disabled state.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.Disabled'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-disabled. Default value: #f3f3f733.
-     */
-    Disabled: "var(--dt-colors-border-on-accent-disabled, #f3f3f733)",
-    /**
-     * Use as the default border color of elements on an accentuated background.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.Default'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-default. Default value: #f3f3f7.
-     */
-    Default: "var(--dt-colors-border-on-accent-default, #f3f3f7)",
-    /**
-     * Use as border color on hover interaction of elements on an accentuated background.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.DefaultHover'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-default-hover. Default value: #f3f3f7cc.
-     */
-    DefaultHover: "var(--dt-colors-border-on-accent-default-hover, #f3f3f7cc)",
-    /**
-     * Use as border color on click interaction of elements on an accentuated background.
-     * @deprecated Replace with 'Colors.Border.[Color].OnAccent.DefaultActive'. [Color] is the accent color the border is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-border-on-accent-default-active. Default value: #f3f3f799.
-     */
-    DefaultActive: "var(--dt-colors-border-on-accent-default-active, #f3f3f799)"
   }
 };
 const Text = {
@@ -1089,32 +1019,6 @@ const Text = {
      * Css custom property: --dt-colors-text-critical-default-active. Default value: #720013.
      */
     DefaultActive: "var(--dt-colors-text-critical-default-active, #720013)"
-  },
-  OnAccent: {
-    /**
-     * Use for text color placed on accentuated background on disabled state.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.Disabled'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-disabled. Default value: #f3f3f780.
-     */
-    Disabled: "var(--dt-colors-text-on-accent-disabled, #f3f3f780)",
-    /**
-     * Use for text color placed on accentuated background.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.Default'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-default. Default value: #f3f3f7.
-     */
-    Default: "var(--dt-colors-text-on-accent-default, #f3f3f7)",
-    /**
-     * Use for text color placed on accentuated background on hover interaction.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.DefaultHover'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-default-hover. Default value: #f3f3f7cc.
-     */
-    DefaultHover: "var(--dt-colors-text-on-accent-default-hover, #f3f3f7cc)",
-    /**
-     * Use for text color placed on accentuated background on click interaction.
-     * @deprecated Replace with 'Colors.Text.[Color].OnAccent.DefaultActive'. [Color] is the accent color the text is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-text-on-accent-default-active. Default value: #f3f3f799.
-     */
-    DefaultActive: "var(--dt-colors-text-on-accent-default-active, #f3f3f799)"
   }
 };
 const Icon = {
@@ -1352,32 +1256,6 @@ const Icon = {
      * Css custom property: --dt-colors-icon-critical-default-active. Default value: #720013.
      */
     DefaultActive: "var(--dt-colors-icon-critical-default-active, #720013)"
-  },
-  OnAccent: {
-    /**
-     * Use for icon color placed on accentuated background on disabled state.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.Disabled'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-disabled. Default value: #f3f3f780.
-     */
-    Disabled: "var(--dt-colors-icon-on-accent-disabled, #f3f3f780)",
-    /**
-     * Use for icon color placed on accentuated background.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.Default'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-default. Default value: #f3f3f7.
-     */
-    Default: "var(--dt-colors-icon-on-accent-default, #f3f3f7)",
-    /**
-     * Use for icon color placed on accentuated background on hover interaction.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.DefaultHover'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-default-hover. Default value: #f3f3f7cc.
-     */
-    DefaultHover: "var(--dt-colors-icon-on-accent-default-hover, #f3f3f7cc)",
-    /**
-     * Use for icon color placed on accentuated background on click interaction.
-     * @deprecated Replace with 'Colors.Icon.[Color].OnAccent.DefaultActive'. [Color] is the accent color the icon is placed on, for example, 'Neutral'.
-     * Css custom property: --dt-colors-icon-on-accent-default-active. Default value: #f3f3f799.
-     */
-    DefaultActive: "var(--dt-colors-icon-on-accent-default-active, #f3f3f799)"
   }
 };
 const Syntax = {