summaryrefslogtreecommitdiffstats
path: root/browser/components/storybook/.storybook/preview-head.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /browser/components/storybook/.storybook/preview-head.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/storybook/.storybook/preview-head.html')
-rw-r--r--browser/components/storybook/.storybook/preview-head.html208
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>