Storybook Update: Annotations display redesign (#9835)

docs/iframe.html

@@ -361,4 +361,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"**/Welcome.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)Welcome\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.7f946721.iframe.bundle.js"></script><script src="vendors~main.31d6fdcb.iframe.bundle.js"></script><script src="main.fcdaf0a8.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./stories","files":"**/Welcome.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)Welcome\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.e754bcd3.iframe.bundle.js"></script><script src="vendors~main.31d6fdcb.iframe.bundle.js"></script><script src="main.1b4326cb.iframe.bundle.js"></script></body></html>

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1696498756980,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/vue":{"version":"6.5.16"},"storybook-auto-events":{"version":"0.1.1"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"storybook-dark-mode":{"version":"1.1.2"},"@storybook/addon-actions":{"version":"6.5.16"}}}
+{"generatedAt":1696501451860,"builder":{"name":"webpack4"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Workspaces","packageManager":{"type":"yarn","version":"1.22.19"},"storybookVersion":"6.5.16","language":"javascript","storybookPackages":{"@storybook/vue":{"version":"6.5.16"},"storybook-auto-events":{"version":"0.1.1"}},"framework":{"name":"vue"},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"version":"6.5.16"},"@storybook/addon-a11y":{"version":"6.5.16"},"storybook-dark-mode":{"version":"1.1.2"},"@storybook/addon-actions":{"version":"6.5.16"}}}

docs/styles/themes/_dark.scss

@@ -31,6 +31,24 @@
 
   $drag-over: #DCDEE7;
 
+  // The library that decorates the code blocks in CodeMirror uses the same colours for light and dark themes.
+  // This causes a contrast and accessibility issues.
+  // To fix the issues we have added new colors to the code blocks in CodeMirror for light and dark themes.
+  $cm-meta: #FFFFFF;
+  $cm-string: #5CE6FF;
+  $cm-number: #63F7C1;
+  $cm-keyword: #FF9C9C;
+  $cm-atom: #CC8DBF;
+  $cm-comment: #E78957;
+
+  // Status colors Yaml variables
+  --cm-meta: #{$cm-meta};
+  --cm-string: #{$cm-string};
+  --cm-number: #{$cm-number};
+  --cm-keyword: #{$cm-keyword};
+  --cm-atom: #{$cm-atom};
+  --cm-comment: #{$cm-comment};
+
   --default                    : #{$dark};
   --default-text               : #{$light};
   --default-hover-bg           : #{darken($dark, 10%)};
@@ -211,4 +229,5 @@
 
   --product-icon               : #{$lighter};
   --product-icon-active        : #{$lightest};
+  --annotations-hover-bg       : #{$darkest};
 }

docs/styles/themes/_light.scss

@@ -42,6 +42,17 @@ $selected: rgba(#3D98D3, .5);
 
 $drag-over: #DCDEE7;
 
+
+// The library that decorates the code blocks in CodeMirror uses the same colours for light and dark themes.
+// This causes a contrast and accessibility issues.
+// To fix the issues we have added new colors to the code blocks in CodeMirror for light and dark themes.
+$cm-meta: #141419;
+$cm-string: #00529F;
+$cm-number: #005E3B;
+$cm-keyword: #B94545;
+$cm-atom: #921E80;
+$cm-comment: #8F5536;
+
 BODY, .theme-light {
 
   --primary                    : #{$primary};
@@ -55,6 +66,14 @@ BODY, .theme-light {
   --primary-light-bg           : #{rgba($primary, 0.05)};
 
 
+  // Status colors Yaml variables
+  --cm-meta: #{$cm-meta};
+  --cm-string: #{$cm-string};
+  --cm-number: #{$cm-number};
+  --cm-keyword: #{$cm-keyword};
+  --cm-atom: #{$cm-atom};
+  --cm-comment: #{$cm-comment};
+
   .text-primary {
     color: var(--primary) !important;
   }
@@ -86,7 +105,6 @@ BODY, .theme-light {
   --link-light-bg           : #{rgba($link, 0.05)};
 
 
-
   .text-link {
     color: var(--link) !important;
   }
@@ -541,4 +559,6 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
+
+  --annotations-hover-bg       : #{$lighter};
 }

docs/translations/en-us.yaml

@@ -111,6 +111,8 @@ generic:
           =1 {Matches 1 of {total, number}: "{sample}"}
           other {Matches {matched, number} of {total, number}, including "{sample}"}
         }
+  copyValue: Copy value
+  valueCopied: Value copied!
 
 locale:
   en-us: English