Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 208 insertions, 0 deletions

diff --git a/browser/components/storybook/.storybook/preview-head.html b/browser/components/storybook/.storybook/preview-head.html
new file mode 100644
index 0000000000..c2f9e8d1a2
--- /dev/null
+++ b/browser/components/storybook/.storybook/preview-head.html
@@ -0,0 +1,208 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
+   - You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<link
+  rel="stylesheet"
+  href="chrome://global/skin/design-system/text-and-typography.css"
+/>
+<link
+  rel="stylesheet"
+  href="chrome://global/skin/design-system/tokens-brand.css"
+/>
+
+<style>
+  :root {
+    font-size: var(--font-size-root);
+  }
+
+  a {
+    color: var(--link-color) !important;
+    text-decoration: underline !important;
+  }
+
+  /* Override the default Storybook padding in favour of styles
+   provided by our WithCommonStyles wrapper */
+  .sb-show-main.sb-main-padded {
+    padding: 0;
+  }
+
+  /* Ensure WithCommonStyles can grow to fit the page */
+  #root-inner {
+    height: 100vh;
+  }
+
+  /* Docs stories are being given unnecessary height, possibly because we
+   turned off certain controls */
+  .docs-story div div {
+    height: unset;
+  }
+
+  /* Typography preview and design tokens table */
+  table.sb-preview-design-tokens {
+    -moz-osx-font-smoothing: auto;
+    border-collapse: separate;
+    table-layout: fixed;
+    text-align: left;
+    width: 100%;
+
+    & h1.sb-preview-font-size-xxlarge {
+      font-size: var(--font-size-xxlarge);
+    }
+
+    & th {
+      background: #ebf5fc;
+    }
+
+    & tr td,
+    & tr th {
+      padding: 8px;
+    }
+
+    & td {
+      background: #ffffff;
+    }
+  }
+
+  td.sb-preview-chrome-typescale {
+    & .docs-story {
+      * {
+        font: message-box;
+      }
+
+      & h1 {
+        font-weight: var(--font-weight-bold) !important;
+      }
+    }
+
+    &.sb-preview-chrome-menu .docs-story * {
+      font: menu;
+    }
+  }
+
+  h1.sb-preview-chrome-typescale {
+    font: message-box;
+    font-weight: var(--font-weight-bold) !important;
+
+    &.sb-preview-chrome-menu {
+      font: menu;
+    }
+  }
+
+  table .sb-preview-font-size-small {
+    font-size: var(--font-size-small);
+  }
+
+  .box {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+
+    &.width-max-content {
+      width: max-content;
+    }
+
+    &.relative {
+      position: relative;
+    }
+    &.absolute {
+      position: absolute;
+    }
+
+    &.justify-center {
+      justify-content: center;
+    }
+
+    &.align-center {
+      align-items: center;
+    }
+
+    &.align-end {
+      align-items: flex-end;
+    }
+
+    &.vertical {
+      flex-direction: column;
+    }
+
+    &.left {
+      left: 0;
+    }
+
+    &.right {
+      right: 0;
+    }
+
+    &.top {
+      top: 0;
+    }
+
+    & + h1,
+    & + h2,
+    & + h3 {
+      margin-top: 16px !important;
+    }
+  }
+
+  .post-it {
+    align-items: center;
+    background: linear-gradient(
+          to left bottom,
+          transparent 50%,
+          rgba(0, 0, 0, 0.4) 0
+        )
+        no-repeat 100% 0 / 1em 1em,
+      linear-gradient(-135deg, transparent 0.7em, var(--color-red-05) 0);
+    display: flex;
+    font-size: 14px !important;
+    height: 85px;
+    justify-content: center;
+    margin: 12px 0;
+    position: relative;
+    text-align: center;
+    width: 85px;
+
+    &.green {
+      background: linear-gradient(
+            to left bottom,
+            transparent 50%,
+            rgba(0, 0, 0, 0.4) 0
+          )
+          no-repeat 100% 0 / 1em 1em,
+        linear-gradient(-135deg, transparent 0.7em, var(--color-green-05) 0);
+    }
+
+    &.blue {
+      background: linear-gradient(
+            to left bottom,
+            transparent 50%,
+            rgba(0, 0, 0, 0.4) 0
+          )
+          no-repeat 100% 0 / 1em 1em,
+        linear-gradient(-135deg, transparent 0.7em, var(--color-blue-05) 0);
+    }
+
+    &.orange {
+      background: linear-gradient(
+            to left bottom,
+            transparent 50%,
+            rgba(0, 0, 0, 0.4) 0
+          )
+          no-repeat 100% 0 / 1em 1em,
+        linear-gradient(-135deg, transparent 0.7em, var(--color-yellow-05) 0);
+    }
+
+    &.big {
+      height: 160px;
+      width: 160px;
+    }
+
+    &.disabled {
+      opacity: 0.4;
+    }
+  }
+
+  .container-width-large {
+    min-width: 968px;
+  }
+</style>