diff --git a/dictionary-octopus.txt b/dictionary-octopus.txt
index 9b18e664b4..95e5e4d995 100644
--- a/dictionary-octopus.txt
+++ b/dictionary-octopus.txt
@@ -225,6 +225,7 @@ inetmgr
inetsrv
inkey
inlinable
+inlines
INSTALLLOCATION
internalcustomer
ioutil
@@ -633,6 +634,7 @@ windir
windowsfeatures
Wireshark
WIXUI
+wordmark
workerpool
workerpools
workertools
diff --git a/public/docs/css/main.css b/public/docs/css/main.css
index 8c59b348a0..a2a6cf9350 100644
--- a/public/docs/css/main.css
+++ b/public/docs/css/main.css
@@ -69,12 +69,12 @@ hr {
border-bottom: 1px solid var(--header-separator-color);
}
-.page-content a:not(.link) {
+.page-content a:not(.link):not(.top-nav__link) {
color: var(--octo-blue);
}
-.page-content a:hover,
-.page-content a:focus {
+.page-content a:hover:not(.top-nav__link),
+.page-content a:focus:not(.top-nav__link) {
color: var(--body-link-color);
}
@@ -3343,6 +3343,28 @@ img.btn__icon {
color: var(--colorButtonIconDisabled);
}
+/* Loud importance */
+.btn--loud {
+ background: var(--colorButtonBackgroundLoudDefault);
+ /* Keep the border there but transparent as an easy way to ensure the geometry is exactly preserved */
+ border-color: transparent;
+ color: var(--colorButtonTextLoud);
+ font: var(--textBodyBoldMedium);
+}
+
+.btn--loud .btn__icon {
+ color: var(--colorButtonIconLoud);
+}
+
+.btn--loud:hover:not(:disabled),
+.btn--loud:focus-visible {
+ background: var(--colorButtonBackgroundLoudHover);
+}
+
+.btn--loud:active:not(:disabled) {
+ background: var(--colorButtonBackgroundLoudPressed);
+}
+
/* Buttons side by side e.g. a toolbar or the component showcase */
.btn-row {
display: flex;
@@ -3356,7 +3378,85 @@ img.btn__icon {
.btn-row + .btn-row {
margin-block-start: var(--space8);
}
-/* Button.astro component end */
+/* Button component end */
+
+/* TopNav component */
+.top-nav {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space24);
+ padding: var(--space16) var(--space24)
+ calc(var(--space16) - var(--borderWidth1));
+ border-block-end: var(--borderWidth1) solid var(--colorBorderPrimary);
+ background: var(--colorBackgroundPrimaryDefault);
+}
+
+.top-nav__leading,
+.top-nav__trailing {
+ flex-shrink: 0; /* Disallow shrinking so button labels don't wrap across 2 lines */
+}
+
+.top-nav__leading {
+ display: flex;
+ align-items: center;
+ gap: var(--space64);
+}
+
+.top-nav__logo {
+ display: flex;
+}
+
+.top-nav__logo-mark {
+ display: block;
+ height: 2rem;
+ width: auto;
+ color: var(--colorTextPrimary);
+}
+
+.top-nav__links {
+ display: flex;
+ align-items: center;
+ gap: var(--space2);
+}
+
+.top-nav__trailing {
+ display: flex;
+ align-items: center;
+ gap: var(--space12);
+}
+
+a.top-nav__link {
+ box-sizing: border-box;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space8) var(--space12);
+ border-radius: var(--borderRadiusSmall);
+ background: var(--colorNavBackgroundRest);
+ color: var(--colorTextPrimary);
+ font: var(--textBodyRegularMedium);
+ text-align: center;
+ text-decoration: none;
+}
+
+a.top-nav__link:hover:not(.top-nav__link--active),
+a.top-nav__link:focus:not(.top-nav__link--active) {
+ background: var(--colorNavBackgroundHover);
+}
+
+a.top-nav__link:focus-visible {
+ outline: var(--borderWidth2) solid var(--colorBorderSelected);
+ outline-offset: var(--borderWidth1);
+}
+
+a.top-nav__link--active {
+ background: var(--colorNavBackgroundActive);
+ color: var(--colorTextSelected);
+ font: var(--textBodyBoldMedium);
+}
+/* TopNav component end */
.inline-note {
position: absolute;
diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css
index 2ce70aa32e..2c2eff5146 100644
--- a/public/docs/css/vars.css
+++ b/public/docs/css/vars.css
@@ -209,9 +209,10 @@
--octo-blue-lighter: #2f95e3ff;
--octo-blue-lightest: #1fc0ffff;
- --font-family-system: system-ui, -apple-system, BlinkMacSystemFont,
- 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+ --font-family-system:
+ system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+ 'Segoe UI Symbol';
--font-family: var(--font-family-system);
--heading-font: var(--font-family);
--body-font: var(--font-family);
@@ -254,6 +255,11 @@
--grid-gap-main: 1rem;
--standard-radius: 0.5rem;
+
+ /* TODO: drop these once color.nav.background.* are available in design-system-tokens */
+ --colorNavBackgroundRest: rgb(from var(--colorScalesBlue500) r g b / 0);
+ --colorNavBackgroundHover: var(--colorScalesSlate100);
+ --colorNavBackgroundActive: rgb(from var(--colorScalesBlue500) r g b / 0.06);
}
@media (max-width: 860px) {
@@ -309,4 +315,7 @@ html[data-theme='dark'] {
--icon-tile-shadow: 0px 6px 20px 0px var(--bg-color-menu);
--separator-color: var(--navy-700);
--code-background: #0c1a24;
+
+ /* TODO: drop once color.nav.background.* are available in design-system-tokens */
+ --colorNavBackgroundHover: var(--colorScalesNavy800);
}
diff --git a/src/assets/octopus-logo-v2.svg b/src/assets/octopus-logo-v2.svg
new file mode 100644
index 0000000000..bffd0a9517
--- /dev/null
+++ b/src/assets/octopus-logo-v2.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/Button.astro b/src/components/Button.astro
index e97f3dca1e..53d685205a 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -7,6 +7,7 @@ type Props = HTMLAttributes<'button'> & {
icon?: string; // URL to an SVG or a FontAwesome class
iconEnd?: string; // URL to an SVG or a FontAwesome class
size?: 'xSmall' | 'small' | 'medium';
+ importance?: 'default' | 'loud';
};
const {
@@ -14,6 +15,7 @@ const {
icon,
iconEnd,
size = 'medium',
+ importance = 'default',
disabled = false,
type = 'button',
class: className,
@@ -24,7 +26,7 @@ if (!label && !rest['aria-label'] && !rest['aria-labelledby']) {
throw new Error('An icon-only button needs an aria-label for screen readers');
}
-const classes = `btn btn--${size.toLowerCase()}${className ? ` ${className}` : ''}`;
+const classes = `btn btn--${size.toLowerCase()}${importance === 'loud' ? ' btn--loud' : ''}${className ? ` ${className}` : ''}`;
---