diff --git a/docs/auth-flow/overview.md b/docs/auth-flow/overview.md index 8597b6177..e60a58dec 100644 --- a/docs/auth-flow/overview.md +++ b/docs/auth-flow/overview.md @@ -37,10 +37,7 @@ Enhance the auth flow functionality and give your customers the ability to manag
@@ -50,7 +47,7 @@ Enhance the auth flow functionality and give your customers the ability to manag
@@ -61,10 +58,7 @@ Enhance the auth flow functionality and give your customers the ability to manag
diff --git a/docs/bank-feeds/overview.mdx b/docs/bank-feeds/overview.mdx index 0583e884f..d52ab7c9e 100644 --- a/docs/bank-feeds/overview.mdx +++ b/docs/bank-feeds/overview.mdx @@ -11,7 +11,8 @@ hide_description: true hide_table_of_contents: true banner_title: Bank Feeds banner_class: bank-feeds -banner_icon: "/img/logos/products/logo_bankfeeds_clear.svg" +banner_icon: "/img/logos/products/logo-bank-feeds_clear.svg" +banner_icon_dark: "/img/logos/products/logo-bank-feeds_dark.svg" banner_image: "/img/banners/bank-feeds.png" banner_text: "Easily deploy an automated bank statement feed into your application to write @@ -67,7 +68,7 @@ experience with your app as a result.
@@ -77,7 +78,7 @@ experience with your app as a result.
@@ -87,7 +88,7 @@ experience with your app as a result.
diff --git a/docs/commerce/overview.md b/docs/commerce/overview.md index 4b149fcb4..5dc95a4f5 100644 --- a/docs/commerce/overview.md +++ b/docs/commerce/overview.md @@ -9,7 +9,6 @@ hide_description: true hide_table_of_contents: true banner_title: Sync for Commerce banner_class: commerce -banner_icon: "/img/logos/products/logo_sfc_clear.svg" banner_image: "/img/banners/sfc-charts.png" banner_text: "Embedded accounting integrations for Point of Sale, Payment, and eCommerce software" // video_url: "https://www.youtube.com/embed/4zLgo0iP6MI" @@ -57,8 +56,7 @@ We do all the heavy lifting, integrating with merchant’s systems and mapping t
@@ -68,7 +66,7 @@ We do all the heavy lifting, integrating with merchant’s systems and mapping t
@@ -79,7 +77,7 @@ We do all the heavy lifting, integrating with merchant’s systems and mapping t
@@ -91,7 +89,7 @@ We do all the heavy lifting, integrating with merchant’s systems and mapping t
@@ -102,7 +100,7 @@ We do all the heavy lifting, integrating with merchant’s systems and mapping t
@@ -114,8 +112,7 @@ We do all the heavy lifting, integrating with merchant’s systems and mapping t
diff --git a/docs/core-concepts/data-type.md b/docs/core-concepts/data-type.md index 09a286783..e99b7daee 100644 --- a/docs/core-concepts/data-type.md +++ b/docs/core-concepts/data-type.md @@ -14,28 +14,28 @@ The data types you use will depend on the Codat solution you use. For reference,
For example, invoices and bills from an accounting software.
For example, bank transactions from a bank account.
For example, customers and payments from a POS system.
For example, bank feed bank accounts.
diff --git a/docs/core-concepts/integrations.md b/docs/core-concepts/integrations.md index a31320874..73a3931f1 100644 --- a/docs/core-concepts/integrations.md +++ b/docs/core-concepts/integrations.md @@ -14,7 +14,7 @@ You can connect a company to a single accounting source and a single bank feeds@@ -30,7 +30,7 @@ You can connect a company to a single accounting source and a single bank feeds
@@ -45,7 +45,7 @@ You can connect a company to a single accounting source and a single bank feeds
@@ -60,7 +60,7 @@ You can connect a company to a single accounting source and a single bank feeds
@@ -75,7 +75,7 @@ You can connect a company to a single accounting source and a single bank feeds
diff --git a/docs/enterprise/overview.md b/docs/enterprise/overview.md index 045470d7b..5200850d3 100644 --- a/docs/enterprise/overview.md +++ b/docs/enterprise/overview.md @@ -34,7 +34,7 @@ banner_text: "Gain additional insight into the technology suite and implementati
@@ -52,7 +50,7 @@ With Expenses, corporate card providers, expense management providers, and neoba
@@ -63,7 +61,7 @@ With Expenses, corporate card providers, expense management providers, and neoba
@@ -74,7 +72,7 @@ With Expenses, corporate card providers, expense management providers, and neoba
@@ -85,7 +83,7 @@ With Expenses, corporate card providers, expense management providers, and neoba
@@ -96,7 +94,7 @@ With Expenses, corporate card providers, expense management providers, and neoba
diff --git a/docs/get-started/accounting-for-beginners.md b/docs/get-started/accounting-for-beginners.md index 9289f21b1..89d422b78 100644 --- a/docs/get-started/accounting-for-beginners.md +++ b/docs/get-started/accounting-for-beginners.md @@ -31,7 +31,7 @@ Throughout our documentation, you may see unfamiliar terms and accounting-specif
Modern Treasury @@ -54,7 +54,7 @@ Throughout our documentation, you may see unfamiliar terms and accounting-specif
Modern Treasury @@ -76,7 +76,7 @@ Throughout our documentation, you may see unfamiliar terms and accounting-specif
Martin Kleppman
diff --git a/docs/get-started/overview.md b/docs/get-started/overview.md
index a2bd74450..d8e9a4324 100644
--- a/docs/get-started/overview.md
+++ b/docs/get-started/overview.md
@@ -4,24 +4,27 @@ description: "Take your first steps through the information and support availabl
---
import Cards from "@components/Cards";
+import FilesGearIcon from "@components/FilesGearIcon";
+import ShieldLockIcon from "@components/ShieldLockIcon";
+import GearFinanceDownIcon from "@components/GearFinanceDownIcon";
## Reference content
A practical introduction to Codat's Portal and API. From signing up to syncing data in 10 minutes.
@@ -27,7 +29,7 @@ const RaiseSupportTicket = () => {
@@ -43,7 +45,7 @@ const RaiseSupportTicket = () => {
diff --git a/src/styles/components/_blog.scss b/src/styles/components/_blog.scss
index b1cb9d5be..98c1bf5b6 100644
--- a/src/styles/components/_blog.scss
+++ b/src/styles/components/_blog.scss
@@ -19,8 +19,9 @@
main {
article {
align-items: flex-start;
- border: 2px solid var(--token-secondary-bg-c-alt);
+ border: 2px solid #B2D4C7;
border-radius: 8px;
+ background-color: rgba(236, 237, 229, 0.5);
display: flex;
flex-direction: column;
font-size: 0.9em !important;
@@ -46,17 +47,100 @@
}
}
+ html[data-theme="dark"] & {
+ main article {
+ border-color: #D1E100;
+ background-color: rgba(24, 16, 58, 0.8);
+ }
+
+ [class^="tag_"] {
+ --docusaurus-tag-list-border: #D1E100;
+ color: #ECEDE5;
+ }
+
+ footer .text--right a {
+ color: var(--ifm-link-color);
+ }
+
+ [class*="container_"] {
+ color: #ECEDE5;
+ font-family: var(--ifm-font-family-base);
+ font-weight: normal;
+ }
+
+ .avatar .avatar__intro {
+ .avatar__name a,
+ .avatar__name {
+ color: #ECEDE5;
+ }
+
+ [class*="authorTitle"] {
+ color: #ECEDE5;
+ font-family: var(--ifm-font-family-base);
+ font-weight: normal;
+ }
+ }
+ }
+
+ .pagination-nav__link {
+ border-color: #B2D4C7;
+
+ .pagination-nav__sublabel {
+ font-family: var(--ifm-font-family-base);
+ font-weight: normal;
+ color: #18103A;
+ }
+
+ .pagination-nav__label {
+ font-family: var(--heading-font);
+ font-weight: normal;
+ color: #18103A;
+ }
+ }
+
+ html[data-theme="dark"] & .pagination-nav__link {
+ border-color: #D1E100;
+
+ .pagination-nav__sublabel {
+ color: #ECEDE5;
+ }
+
+ .pagination-nav__label {
+ color: #ECEDE5;
+ }
+ }
+
.theme-edit-this-page {
display: none;
}
[class^="tag_"] {
+ --docusaurus-tag-list-border: #B2D4C7;
background: var(--token-secondary-bg-c);
- border: 1px solid var(--token-secondary-bg-c-alt);
- color: var(--ifm-font-color-base);
+ color: #18103A;
text-decoration: none;
}
+ footer .col > b {
+ display: none;
+ }
+
+ footer .text--right a {
+ color: var(--ifm-link-color);
+
+ b {
+ color: inherit;
+ font-weight: normal;
+ }
+ }
+
+ // date / reading time
+ [class*="container_"] {
+ color: #18103A;
+ font-family: var(--ifm-font-family-base);
+ font-weight: normal;
+ }
+
footer {
width: 100%;
flex-wrap: nowrap;
@@ -78,22 +162,51 @@
}
.avatar {
+ --ifm-avatar-intro-margin: 0.5rem;
+
+ .avatar__photo-link {
+ display: flex;
+ align-self: center;
+ }
+
.avatar__photo {
- width: 20px;
- height: 20px;
+ width: 34px !important;
+ height: 34px !important;
+ min-width: 34px;
+ }
+
+ [class*="authorSocials"] {
+ display: none;
}
.avatar__intro {
- .avatar__name a {
- color: var(--ifm-font-color-base);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 0.1em;
+
+ .avatar__name a,
+ .avatar__name {
+ color: #18103A;
text-decoration: none;
- font-size: 0.8em;
+ font-size: 0.7em;
font-weight: normal;
+ font-family: var(--heading-font);
+ line-height: 1.2;
+ margin-bottom: 0.25em;
}
.avatar__subtitle {
display: none;
}
+
+ [class*="authorTitle"] {
+ color: #18103A;
+ line-height: 1.2;
+ font-family: var(--ifm-font-family-base);
+ font-weight: normal;
+ letter-spacing: 0.04em;
+ }
}
}
}
diff --git a/src/styles/components/_cards.scss b/src/styles/components/_cards.scss
index 5ff64e97a..5be886109 100644
--- a/src/styles/components/_cards.scss
+++ b/src/styles/components/_cards.scss
@@ -29,18 +29,26 @@ ul.card-container {
&.col-3 {
grid-template-columns: repeat(3, 1fr);
-
+
p {
font-size: 0.95em;
}
+
+ .card .header h3 {
+ font-size: 18px;
+ }
}
&.col-2 {
grid-template-columns: repeat(2, 1fr);
-
+
p {
font-size: 0.98em;
}
+
+ .card .header h3 {
+ font-size: 18px;
+ }
}
&.mini {
@@ -65,12 +73,12 @@ ul.card-container {
html[data-theme="light"] {
.card {
- background-color: var(--token-primary-bg-c);
- border: 2px solid var(--token-secondary-bg-c-alt);
+ background-color: rgba(224, 233, 209, 0.4);
+ border: 1px solid rgba(100, 130, 167, 0.3);
&.dark {
- background-color: #15095D;
- color: white;
+ background-color: #18103A;
+ color: #ECEDE5;
img {
fill: white;
@@ -78,7 +86,7 @@ html[data-theme="light"] {
}
a {
- color: white;
+ color: #ECEDE5;
}
}
}
@@ -86,8 +94,8 @@ html[data-theme="light"] {
html[data-theme="dark"] {
.card {
- background-color: var(--token-secondary-bg-c);
- border: 2px solid var(--token-secondary-bg-c-alt);
+ background-color: rgba(236, 237, 229, 0.05);
+ border: 1px solid rgba(236, 237, 229, 0.15);
}
}
@@ -134,9 +142,12 @@ html[data-theme="dark"] {
h3 {
font-size: 16px;
+ font-family: var(--heading-font);
+ font-weight: 200;
}
- img + h3 {
+ img + h3,
+ svg + h3 {
margin: 0.5em;
}
}
diff --git a/src/styles/components/_checkbox.scss b/src/styles/components/_checkbox.scss
index a478efd87..94ffcfb4a 100644
--- a/src/styles/components/_checkbox.scss
+++ b/src/styles/components/_checkbox.scss
@@ -4,14 +4,14 @@
align-items: center;
input[type=checkbox] {
- --active: #275EFE;
- --active-inner: #fff;
- --focus: 2px rgba(39, 94, 254, .3);
- --border: #BBC1E1;
- --border-hover: #275EFE;
- --background: #fff;
- --disabled: #F6F8FF;
- --disabled-inner: #E1E6F9;
+ --active: #18103A;
+ --active-inner: #ECEDE5;
+ --focus: 2px rgba(24, 16, 58, .3);
+ --border: rgba(24, 16, 58, 0.3);
+ --border-hover: #18103A;
+ --background: #ECEDE5;
+ --disabled: rgba(236, 237, 229, 0.5);
+ --disabled-inner: rgba(24, 16, 58, 0.2);
-webkit-appearance: none;
-moz-appearance: none;
diff --git a/src/styles/components/_code.scss b/src/styles/components/_code.scss
index 6b95c6880..15c5ee55e 100644
--- a/src/styles/components/_code.scss
+++ b/src/styles/components/_code.scss
@@ -5,17 +5,23 @@
--code-block-line-height: 1.5;
- --ifm-pre-color: var(--color-interface-core);
- --ifm-code-background: var(--c-indigo-10);
+ --ifm-pre-color: #18103A;
+ --ifm-code-background: #18103A;
}
html[data-theme="light"] {
- --code-block-bg-c: var(--color-interface-10);
+ --code-block-bg-c: rgba(224, 233, 209, 0.4);
+ --ifm-pre-background: rgba(224, 233, 209, 0.4);
+ --inline-code-bg-c: rgba(224, 233, 209, 0.5);
+ --inline-code-color: #18103A;
--color-string: var(--color-warning-dark);
}
html[data-theme="dark"] {
- --code-block-bg-c: var(--token-secondary-bg-c);
+ --inline-code-bg-c: rgba(224, 233, 209, 0.12);
+ --inline-code-color: #ECEDE5;
+ --code-block-bg-c: rgba(24, 16, 58, 0.6);
+ --ifm-pre-background: rgba(24, 16, 58, 0.6);
--color-string: var(--color-warning-20);
}
@@ -23,6 +29,10 @@ html[data-theme="dark"] {
color: var(--ifm-pre-color) !important;
}
+html[data-theme="dark"] .token-line {
+ color: #ECEDE5 !important;
+}
+
.token.string {
color: var(--color-string) !important;
}
@@ -30,10 +40,10 @@ html[data-theme="dark"] {
:not(pre) > code {
position: relative;
margin-block-start: -0.125rem;
- background-color: inherit;
vertical-align: baseline;
- background-color: var(--code-block-bg-c);
+ background-color: var(--inline-code-bg-c);
+ color: var(--inline-code-color);
padding-block-start: 0.25rem;
padding-block-end: 0.25rem;
@@ -65,12 +75,24 @@ html[data-theme="dark"] {
#__docusaurus {
[class*="codeBlockContainer_"] {
box-shadow: none;
- border: 2px solid var(--token-secondary-bg-c-alt);
+ border: 1px solid rgba(236, 237, 229, 0.2);
overflow: hidden;
&:last-child {
margin-bottom: 0;
}
+
+ pre {
+ background-color: rgba(24, 16, 58, 0.6) !important;
+ }
+
+ html[data-theme="light"] & {
+ border-color: #D1E100;
+
+ pre {
+ background-color: rgba(224, 233, 209, 0.4) !important;
+ }
+ }
}
}
@@ -119,12 +141,12 @@ pre[class*="language-"] {
white-space: normal;
}
-/* Tomorrow Comment */
+/* Syntax tokens — tuned for Bedrock background */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
- color: #8c9296;
+ color: rgba(236, 237, 229, 0.45);
}
.token.punctuation {
@@ -136,13 +158,13 @@ pre[class*="language-"] {
}
.token.tag {
- color: #91c5ff;
+ color: #B2D4C7;
}
.token.tag.punctuation,
.token.tag.class-name,
.token.tag.punctuation + .token.tag:not(.attr-value):not([class*="language-"]) {
- color: #2b90ff;
+ color: #7ebfae;
}
.token.property,
@@ -151,7 +173,7 @@ pre[class*="language-"] {
.token.number,
.token.constant,
.token.symbol {
- color: #8454ff;
+ color: #8AAFD4;
}
.token.selector,
@@ -159,7 +181,7 @@ pre[class*="language-"] {
.token.function,
.token.builtin,
.token.inserted {
- color: #ff6810;
+ color: #ffaa6e;
}
.token.operator,
@@ -174,7 +196,7 @@ pre[class*="language-"] {
}
.token.atrule {
- color: #ffbb01;
+ color: #D1E100;
}
.token.regex,
diff --git a/src/styles/components/_doc-sidebar.scss b/src/styles/components/_doc-sidebar.scss
index 99d055f6e..975572961 100644
--- a/src/styles/components/_doc-sidebar.scss
+++ b/src/styles/components/_doc-sidebar.scss
@@ -5,7 +5,7 @@
--dropdown-icon-width: 0.625rem;
--dropdown-icon-height: 0.375rem;
- --dropdown-icon-gap: 0.688rem;
+ --dropdown-icon-gap: 1rem;
--sidebar-vertical-gap: 0.6em;
--sidebar-horizontal-gap: 0.5em;
@@ -23,19 +23,21 @@
}
html[data-theme="light"] {
- --sidebar-category-c: var(--c-gray-100);
+ --sidebar-category-c: #18103A;
--sidebar-border-c: var(--c-gray-0);
--ifm-menu-color-background-active: var(--c-blue-0);
- --ifm-menu-color: var(--c-indigo-80);
+ --ifm-menu-color: #18103A;
+ --ifm-menu-color-active: #6482A7;
--sidebar-background: var(--color-interface-5);
}
html[data-theme="dark"] {
- --sidebar-category-c: var(--c-gray-0);
+ --sidebar-category-c: #ECEDE5;
--sidebar-border-c: var(--c-gray-90);
- --ifm-menu-color: var(--c-gray-20);
+ --ifm-menu-color: #ECEDE5;
+ --ifm-menu-color-active: #B2D4C7;
--sidebar-background: var(--token-primary-bg-c);
}
@@ -56,6 +58,15 @@ aside.theme-doc-sidebar-container {
height: var(--ifm-navbar-height);
padding-inline-start: var(--sidebar-spacing-horizontal);
padding-inline-end: var(--sidebar-spacing-horizontal);
+
+ .navbar__logo {
+ height: auto;
+
+ img {
+ height: auto;
+ width: 120px;
+ }
+ }
}
}
@@ -82,7 +93,8 @@ a[class^="sidebarLogo"] {
.menu {
hr {
margin: 1em 0 !important;
- opacity: 0.3;
+ height: 1px !important;
+ border: 0 !important;
}
}
@@ -116,11 +128,17 @@ a[class^="sidebarLogo"] {
}
.menu-item-section-header {
- opacity: 0.5;
margin-top: 1.5em;
margin-bottom: 0.5em;
- font-size: 0.85em;
+ font-size: 0.95em;
+ font-weight: normal;
+ font-family: var(--ifm-font-family-base);
padding-left: 1rem;
+ color: rgba(24, 16, 58, 0.5);
+
+ html[data-theme="dark"] & {
+ color: rgba(236, 237, 229, 0.5);
+ }
}
.menu__link--sublist-caret:after {
@@ -151,7 +169,7 @@ a[class^="sidebarLogo"] {
margin-bottom: var(--sidebar-vertical-gap);
a {
- font-weight: bold;
+ font-weight: normal;
font-size: 1em;
}
}
@@ -183,11 +201,11 @@ a[class^="sidebarLogo"] {
}
.menu__link {
- font-weight: 500;
- line-height: 1em; /* identical to box height */
+ font-weight: normal;
+ line-height: 1em;
display: flex;
align-items: center;
- letter-spacing: -0.01em;
+ letter-spacing: 0.02em;
&,
&:after {
@@ -372,8 +390,8 @@ a[class^="sidebarLogo"] {
&.top-level-item {
> .menu__link,
- > div > .menu__link {
- font-weight: 600;
+ > div > .menu__link {
+ font-weight: normal;
}
}
}
@@ -424,11 +442,7 @@ html[data-theme="light"] {
}
&.config {
- --icon-url: url("/img/sidebar/gear-fine.svg");
- }
-
- &.data {
- --icon-url: url("/img/sidebar/data-model.svg");
+ --icon-url: url("/img/sidebar/configure.svg");
}
&.integrations {
@@ -436,57 +450,32 @@ html[data-theme="light"] {
}
&.usecases {
- --icon-url: url("/img/sidebar/usecase.svg");
- }
-
- &.tutorials {
- --icon-url: url("/img/sidebar/other-guides.svg");
+ --icon-url: url("/img/sidebar/use-cases.svg");
}
&.product {
--icon-url: url("/img/sidebar/products.svg");
}
- &.product.accounting {
- --icon-url: url("/img/sidebar/coins.svg");
- }
-
&.product.assess,
&.product.lending {
- --icon-url: url("/img/sidebar/icon_lending.svg");
- }
-
- &.product.banking {
- --icon-url: url("/img/sidebar/bank.svg");
+ --icon-url: url("/img/sidebar/logo-lending.svg");
}
&.product.bankfeed {
- --icon-url: url("/img/sidebar/bank.svg");
- //--icon-url: url("/img/sidebar/icon_bankfeeds.svg");
- }
-
- &.product.commerce {
- --icon-url: url("/img/sidebar/cart.svg");
+ --icon-url: url("/img/sidebar/logo-bank-feeds.svg");
}
&.product.sfe {
- --icon-url: url("/img/sidebar/icon_expenses.svg");
- }
-
- &.product.sfc {
- --icon-url: url("/img/sidebar/icon_commerce.svg");
+ --icon-url: url("/img/sidebar/logo-expenses.svg");
}
&.product.sfpayables {
- --icon-url: url("/img/sidebar/icon_payables.svg");
- }
-
- &.product.sfpayroll {
- --icon-url: url("/img/sidebar/icon_payroll.svg");
+ --icon-url: url("/img/sidebar/logo-bill-pay.svg");
}
&.product.spend-insights {
- --icon-url: url("/img/sidebar/icon_supplier_enablement.svg");
+ --icon-url: url("/img/sidebar/logo_spend_insights.svg");
}
}
}
@@ -502,73 +491,44 @@ html[data-theme="dark"] {
}
&.config {
- --icon-url: url("/img/sidebar-dark/gear-fine.svg");
+ --icon-url: url("/img/sidebar-dark/configure.svg");
}
&.api {
--icon-url: url("/img/sidebar-dark/api.svg");
}
-
+
&.auth {
--icon-url: url("/img/sidebar-dark/auth-flow.svg");
}
- &.data {
- --icon-url: url("/img/sidebar-dark/data-model.svg");
- }
-
&.integrations {
--icon-url: url("/img/sidebar-dark/integrations.svg");
}
&.usecases {
- --icon-url: url("/img/sidebar-dark/usecase.svg");
- }
-
- &.tutorials {
- --icon-url: url("/img/sidebar-dark/other-guides.svg");
- }
-
- &.product.accounting {
- --icon-url: url("/img/sidebar-dark/coins_light.svg");
+ --icon-url: url("/img/sidebar-dark/use-cases.svg");
}
&.product.assess,
- &.product.lending {
- --icon-url: url("/img/sidebar-dark/icon_lending_light.svg");
- }
-
- &.product.banking {
- --icon-url: url("/img/sidebar-dark/bank_light.svg");
- }
-
- &.product.bankfeed {
- //--icon-url: url("/img/sidebar-dark/icon_bankfeeds_light.svg");
- --icon-url: url("/img/sidebar-dark/bank_light.svg");
+ &.product.lending {
+ --icon-url: url("/img/sidebar-dark/logo-lending_light.svg");
}
- &.product.commerce {
- --icon-url: url("/img/sidebar-dark/cart_light.svg");
+ &.product.bankfeed {
+ --icon-url: url("/img/sidebar-dark/logo-bank-feeds_light.svg");
}
&.product.sfe {
- --icon-url: url("/img/sidebar-dark/icon_expenses_light.svg");
- }
-
- &.product.sfc {
- --icon-url: url("/img/sidebar-dark/icon_commerce_light.svg");
+ --icon-url: url("/img/sidebar-dark/logo-expenses_light.svg");
}
&.product.sfpayables {
- --icon-url: url("/img/sidebar-dark/icon_payables_light.svg");
- }
-
- &.product.sfpayroll {
- --icon-url: url("/img/sidebar-dark/icon_payroll_light.svg");
+ --icon-url: url("/img/sidebar-dark/logo-bill-pay_light.svg");
}
&.product.spend-insights {
- --icon-url: url("/img/sidebar-dark/icon_supplier_enablement_light.svg");
+ --icon-url: url("/img/sidebar-dark/logo_spend_insights_light.svg");
}
}
}
diff --git a/src/styles/components/_icons.scss b/src/styles/components/_icons.scss
index 9b3ac8e80..955619d29 100644
--- a/src/styles/components/_icons.scss
+++ b/src/styles/components/_icons.scss
@@ -45,20 +45,7 @@
//background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%) !important;
&::before {
- content: "";
- width: 100%;
- height: 100%;
- border-radius: 10px;
- background-image: linear-gradient(
- var(--rotate),
- var(--hypercard-color-1),
- var(--hypercard-color-2) 43%,
- var(--hypercard-color-3));
- position: absolute;
- z-index: -1;
- top: 0;
- left: 0;
- animation: spin var(--timer) linear infinite;
+ content: none;
}
// &::after {
@@ -151,9 +138,8 @@
}
&.spend-insights {
- // blurple - #6164EA
- --hypercard-color-1: #6164EA;
- --hypercard-color-2: #2F1BA6;
- --hypercard-color-3: #7F82F3;
+ --hypercard-color-1: #B2D4C7;
+ --hypercard-color-2: #6482A7;
+ --hypercard-color-3: #21524F;
}
}
diff --git a/src/styles/components/_labels.scss b/src/styles/components/_labels.scss
index ac057da07..adc77b0e4 100644
--- a/src/styles/components/_labels.scss
+++ b/src/styles/components/_labels.scss
@@ -5,13 +5,13 @@
.label {
font-size: 0.8em;
+ font-family: var(--sans-serif);
padding: 0;
outline: none;
- border: none;
appearance: none;
- background: var(--token-secondary-bg-c-alt);
- color: var(--ifm-heading-color);
- border: 2px solid var(--token-secondary-bg-c-alt-dark);
+ background: #ECEDE5;
+ color: #18103A;
+ border: 1px solid rgba(24, 16, 58, 0.3);
white-space: nowrap;
border-radius: 4px;
width: fit-content;
@@ -22,12 +22,27 @@
&:not(:last-child) {
margin-right: 0.5em;
}
+
+ html[data-theme="dark"] & {
+ background: rgba(236, 237, 229, 0.08);
+ color: #ECEDE5;
+ border-color: rgba(236, 237, 229, 0.2);
+ }
}
ul li .tag {
+ font-family: var(--sans-serif);
margin-top: 0.5em;
- background: var(--token-secondary-bg-c-alt);
+ background: #ECEDE5;
+ color: #18103A;
+ border: 1px solid rgba(24, 16, 58, 0.3);
border-radius: 2px;
width: fit-content;
padding: 5px;
+
+ html[data-theme="dark"] & {
+ background: rgba(236, 237, 229, 0.08);
+ color: #ECEDE5;
+ border-color: rgba(236, 237, 229, 0.2);
+ }
}
\ No newline at end of file
diff --git a/src/styles/components/_lists.scss b/src/styles/components/_lists.scss
index 1f00aefa9..75621fcdd 100644
--- a/src/styles/components/_lists.scss
+++ b/src/styles/components/_lists.scss
@@ -1,27 +1,33 @@
/* Lists */
-article .markdown > ol {
+article .markdown ul li,
+article .markdown ol li {
+ font-weight: 300;
+ color: var(--ifm-font-color-base);
+}
+
+article .markdown ol {
list-style: none;
padding: 0em !important;
margin: 2em 0 !important;
}
-article .markdown > ol:not([start]) {
+article .markdown ol:not([start]) {
counter-reset: li-counter;
}
-article .markdown > ol > li {
+article .markdown ol > li {
counter-increment: li-counter;
margin-bottom: 1.5em !important;
position: relative;
margin-left: 3em;
}
-article .markdown > ol > li::before {
+article .markdown ol > li::before {
content: counter(li-counter);
- color: var(--ifm-color-base);
- background-color: var(--token-secondary-bg-c-alt);
- font-weight: bold;
+ color: #18103A;
+ background-color: #E0E9D1;
+ font-weight: 500;
border-radius: 50%;
margin-right: 0.5em;
font-family: monospace;
@@ -36,10 +42,21 @@ article .markdown > ol > li::before {
text-wrap: nowrap;
}
-article .markdown > ol ul,
-article .markdown > ul ul,
-article .markdown > ol ol,
-article .markdown > ul ol {
+html[data-theme="dark"] article .markdown ol > li::before {
+ color: #E0E9D1;
+ background-color: transparent;
+ border: 1.5px solid #E0E9D1;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+}
+
+article .markdown ol ul,
+article .markdown ul ul,
+article .markdown ol ol,
+article .markdown ul ol {
margin-top: 0.5em !important;
}
diff --git a/src/styles/components/_markdown.scss b/src/styles/components/_markdown.scss
index 9a35a2184..a389f295f 100644
--- a/src/styles/components/_markdown.scss
+++ b/src/styles/components/_markdown.scss
@@ -2,14 +2,14 @@ html[data-theme="light"] {
--markdown-toc-title-c: var(--c-indigo-60);
--markdown-toc-list-item-c: var(--c-indigo-70);
--markdown-text-intro-c: var(--c-carbon-80);
- --markdown-bold-c: var(--c-carbon-100);
+ --markdown-bold-c: #18103A;
}
html[data-theme="dark"] {
- --markdown-toc-title-c: #fff;
- --markdown-toc-list-item-c: #fff;
+ --markdown-toc-title-c: #ECEDE5;
+ --markdown-toc-list-item-c: #ECEDE5;
--markdown-text-intro-c: var(--c-indigo-40);
- --markdown-bold-c: #fff;
+ --markdown-bold-c: #ECEDE5;
}
.markdown {
@@ -28,7 +28,7 @@ html[data-theme="dark"] {
strong,
b {
- font-weight: 600;
+ font-weight: 500;
color: var(--markdown-bold-c);
}
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
index 2b4986391..cef870ff2 100644
--- a/src/styles/components/_navbar.scss
+++ b/src/styles/components/_navbar.scss
@@ -1,6 +1,6 @@
html[data-theme="light"] {
--navbar-link-c: var(--ifm-font-color-base);
- --navbar-separator-bg-c: var(--c-indigo-40);
+ --navbar-separator-bg-c: rgba(24, 16, 58, 0.3);
--ifm-dropdown-background-color: var(--token-primary-bg-c);
--ifm-navbar-link-color: var(--color-codat-primary);
@@ -13,7 +13,7 @@ html[data-theme="light"] {
html[data-theme="dark"] {
--navbar-link-c: var(--ifm-font-color-base);
- --navbar-separator-bg-c: var(--c-carbon-80);
+ --navbar-separator-bg-c: rgba(236, 237, 229, 0.3);
--button-border: var(--ifm-color-primary);
--button-text: white;
@@ -56,8 +56,8 @@ html[data-theme="dark"] {
display: flex;
align-items: center;
padding: 0.375rem 0.625rem;
- background: linear-gradient(90deg, #495fff 0%, #18c6ff 114.68%);
- color: #fff;
+ background: #D1E100;
+ color: #18103A;
border-radius: 200px;
white-space: nowrap;
font-weight: 600;
@@ -173,10 +173,18 @@ html[data-theme="dark"] {
}
&--active {
- color: var(--ifm-link-color);
+ color: #6482A7;
&::after {
- background: var(--ifm-link-color);
+ background: #6482A7;
+ }
+
+ html[data-theme="dark"] & {
+ color: #B2D4C7;
+
+ &::after {
+ background: #B2D4C7;
+ }
}
}
}
@@ -191,6 +199,15 @@ html[data-theme="dark"] {
display: flex;
cursor: pointer;
+ .navbar__link--active,
+ &.dropdown--show > .navbar__link {
+ color: #6482A7;
+
+ html[data-theme="dark"] & {
+ color: #B2D4C7;
+ }
+ }
+
.navbar__link {
display: flex;
align-items: center;
@@ -217,6 +234,20 @@ html[data-theme="dark"] {
margin: 0.25em !important;
}
+ .dropdown__section-title {
+ list-style: none;
+ padding: 0.75em 1em 0.25em;
+ font-size: 0.7rem;
+ font-weight: 600;
+ letter-spacing: 0.08em;
+ color: rgba(24, 16, 58, 0.4);
+ pointer-events: none;
+
+ html[data-theme="dark"] & {
+ color: rgba(236, 237, 229, 0.4);
+ }
+ }
+
.dropdown__link {
padding: 0.5em 1em;
@@ -302,6 +333,12 @@ html[data-theme="dark"] {
color: white !important;
}
+ &.secondary {
+ background: #D1E100 !important;
+ border-color: #D1E100 !important;
+ color: #18103A !important;
+ }
+
svg {
display: none;
}
diff --git a/src/styles/components/_read-next.scss b/src/styles/components/_read-next.scss
index 36beff950..80f136997 100644
--- a/src/styles/components/_read-next.scss
+++ b/src/styles/components/_read-next.scss
@@ -9,7 +9,11 @@
list-style-type: none;
li {
- border: 2px solid var(--token-secondary-bg-c-alt);
+ border: 2px solid rgba(100, 130, 167, 0.3);
+
+ html[data-theme="dark"] & {
+ border-color: rgba(178, 212, 199, 0.4);
+ }
background: var(--token-primary-bg-c);
padding: 0.5em 1em;
border-radius: 4px;
diff --git a/src/styles/components/_scrollbar.scss b/src/styles/components/_scrollbar.scss
index 2054d71d5..1f9481a49 100644
--- a/src/styles/components/_scrollbar.scss
+++ b/src/styles/components/_scrollbar.scss
@@ -1,13 +1,18 @@
/* Scrollbar */
:root {
- --scrollbar-track-color: #eef0f2;
- --scrollbar-thumb-color: #bec2c9;
+ --scrollbar-track-color: #ECEDE5;
+ --scrollbar-thumb-color: rgba(24, 16, 58, 0.3);
+}
+
+html[data-theme="dark"] {
+ --scrollbar-track-color: #18103A;
+ --scrollbar-thumb-color: rgba(236, 237, 229, 0.3);
}
::-webkit-scrollbar {
- height: 8px;
- width: 8px;
+ height: 4px;
+ width: 4px;
}
::-webkit-scrollbar-thumb {
diff --git a/src/styles/components/_search.scss b/src/styles/components/_search.scss
index bdaf14749..4049169d3 100644
--- a/src/styles/components/_search.scss
+++ b/src/styles/components/_search.scss
@@ -8,25 +8,25 @@
}
html[data-theme="light"] {
- --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-indigo-30);
-
- --search-keys-border-c: var(--c-indigo-20);
+ --docsearch-searchbox-shadow: none;
+ --search-keys-border-c: rgba(24, 16, 58, 0.2);
.DocSearch-Button {
&:hover {
- --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-indigo-50);
+ border-color: rgba(24, 16, 58, 0.6) !important;
}
}
}
html[data-theme="dark"] {
- --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-90);
-
- --search-keys-border-c: var(--c-gray-80);
+ --docsearch-searchbox-shadow: none;
+ --search-keys-border-c: rgba(236, 237, 229, 0.2);
.DocSearch-Button {
+ border-color: rgba(236, 237, 229, 0.3) !important;
+
&:hover {
- --docsearch-searchbox-shadow: inset 0 0 0 1px var(--c-gray-70);
+ border-color: rgba(236, 237, 229, 0.6) !important;
}
}
}
@@ -59,7 +59,7 @@ html[data-theme="dark"] {
.DocSearch-Button {
width: 100%;
box-shadow: var(--docsearch-searchbox-shadow);
- border: 2px solid var(--token-secondary-bg-c-alt);
+ border: 2px solid rgba(24, 16, 58, 0.3);
border-radius: 4px;
height: 32px;
font-family: var(--font-family);
diff --git a/src/styles/components/_table.scss b/src/styles/components/_table.scss
index 7b72a026d..4d8ec6e63 100644
--- a/src/styles/components/_table.scss
+++ b/src/styles/components/_table.scss
@@ -1,15 +1,19 @@
html[data-theme="light"] {
- --ifm-table-border-color: var(--c-indigo-30);
- --ifm-table-border-color: #ededed;
- --ifm-table-header-color: var(--color-interface-10);
-
- --table-stripe: var(--color-interface-10);
+ --ifm-table-border-color: #E0E9D1;
+ --ifm-table-header-color: #E0E9D1;
+ --ifm-table-background: #ECEDE5;
+ --table-stripe: #F4F5F0;
}
html[data-theme="dark"] {
- --ifm-table-border-color: var(--c-gray-90);
+ --ifm-table-border-color: #B2D4C7;
+ --ifm-table-header-color: rgba(178, 212, 199, 0.2);
+ --ifm-table-background: #18103A;
+ --table-stripe: #21524F;
- --table-stripe: var(--token-secondary-bg-c);
+ .markdown .table-wrapper table {
+ border-color: #B2D4C7;
+ }
}
:root {
@@ -44,6 +48,8 @@ table {
th {
text-align: start;
+ font-family: var(--heading-font);
+ font-weight: 200;
}
th,
@@ -51,6 +57,15 @@ td {
line-height: 1.6;
}
+td {
+ font-size: 16px;
+ font-weight: 300;
+}
+
+td:first-child {
+ font-family: var(--heading-font);
+}
+
thead th:empty {
display: none;
}
@@ -101,37 +116,36 @@ thead th:empty {
width: auto !important;
table {
- border: 1px solid var(--ifm-table-border-color);
+ border: 2px solid #E0E9D1;
border-radius: 8px;
overflow: hidden;
- border-collapse: collapse;
- //border: none !important;
+ border-collapse: separate;
+ border-spacing: 0;
+ box-shadow: none;
+
+ tr, th, td {
+ border: none !important;
+ }
thead tr {
background-color: var(--ifm-table-header-color);
+ border-width: 0 !important;
}
thead tr th {
padding: 1em 13px;
- border-top: none;
+ border-bottom: 1px solid var(--ifm-table-border-color) !important;
}
- thead tr {
- border-left: none;
- border-right: none;
+ tbody tr td {
+ border-bottom: 1px solid var(--ifm-table-border-color) !important;
}
- thead tr th,
- tbody tr td {
- border-left: none;
- border-right: none;
+ tbody tr:last-child td {
+ border-bottom: none !important;
}
tbody tr {
- td:last-child {
- border-bottom: none;
- }
-
&:nth-child(even) {
background-color: var(--table-stripe);
}
diff --git a/src/styles/components/_tabs.scss b/src/styles/components/_tabs.scss
index 6312b927b..f20b6b28d 100644
--- a/src/styles/components/_tabs.scss
+++ b/src/styles/components/_tabs.scss
@@ -1,13 +1,15 @@
html[data-theme="light"] {
--ifm-tabs-color: var(--c-indigo-90);
--ifm-tabs-color-active: var(--c-carbon-100);
- --tabs-border-c: var(--c-indigo-40);
+ --tabs-border-c: #E0E9D1;
+ --tabs-panel-border-c: #D1E100;
}
html[data-theme="dark"] {
- --ifm-tabs-color: #fff;
- --ifm-tabs-color-active: #fff;
- --tabs-border-c: #fff;
+ --ifm-tabs-color: #ECEDE5;
+ --ifm-tabs-color-active: #ECEDE5;
+ --tabs-border-c: rgba(236, 237, 229, 0.2);
+ --tabs-panel-border-c: rgba(236, 237, 229, 0.2);
}
:root {
@@ -27,7 +29,12 @@ html[data-theme="dark"] {
> ul + div {
border-radius: 4px;
padding: 1em;
- border: 1px solid #eee;
+ border: 1px solid var(--tabs-panel-border-c);
+ background-color: #F4F5F0;
+
+ html[data-theme="dark"] & {
+ background-color: rgba(236, 237, 229, 0.06);
+ }
}
.tabs-container {
@@ -46,7 +53,12 @@ html[data-theme="dark"] {
}
> div:nth-child(2) {
- border: 2px solid var(--token-secondary-bg-c-alt);
+ border: 1px solid var(--tabs-panel-border-c);
+ background-color: #F4F5F0;
+
+ html[data-theme="dark"] & {
+ background-color: rgba(236, 237, 229, 0.06);
+ }
}
}
diff --git a/src/styles/components/_toc.scss b/src/styles/components/_toc.scss
index 563bc07e3..27432a700 100644
--- a/src/styles/components/_toc.scss
+++ b/src/styles/components/_toc.scss
@@ -1,11 +1,15 @@
html[data-theme="light"] {
--toc-separator-c: var(--c-indigo-20);
- --ifm-toc-link-color: var(--c-indigo-80);
+ --ifm-toc-link-color: #18103A;
+ --toc-active-c: #6482A7;
+ --toc-edit-c: #6482A7;
}
html[data-theme="dark"] {
--toc-separator-c: var(--c-carbon-90);
- --ifm-toc-link-color: var(--c-carbon-0);
+ --ifm-toc-link-color: #ECEDE5;
+ --toc-active-c: #B2D4C7;
+ --toc-edit-c: #B2D4C7;
}
:root {
@@ -33,11 +37,16 @@ html[data-theme="dark"] {
margin-block-start: 4rem;
h2 {
- font-size: 0.625rem;
+ font-size: 0.85rem;
line-height: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-interface-core);
+ font-family: var(--heading-font);
+
+ html[data-theme="dark"] & {
+ color: #B2D4C7;
+ }
}
.table-of-contents {
@@ -53,13 +62,24 @@ html[data-theme="dark"] {
> li:last-of-type {
margin-block-end: 0;
}
+
+ .table-of-contents__link {
+ font-family: var(--ifm-font-family-base);
+ }
+
+ .table-of-contents__link--active,
+ .table-of-contents__link--active code,
+ .table-of-contents__link:hover,
+ .table-of-contents__link:hover code {
+ color: var(--toc-active-c);
+ }
}
.theme-edit-this-page {
- --edit-this-page-c: var(--color-interface-core);
-
- font-weight: 600;
+ color: var(--toc-edit-c);
+ font-weight: normal;
font-size: 0.875rem;
+ font-family: var(--ifm-font-family-base);
}
}
diff --git a/src/styles/custom.scss b/src/styles/custom.scss
index bb8e4d9d3..d28513ffc 100644
--- a/src/styles/custom.scss
+++ b/src/styles/custom.scss
@@ -49,19 +49,16 @@
@import '~@fortawesome/fontawesome-svg-core/styles.css';
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap");
-
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
-/* 600 weight */
+@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@200&family=Inter:wght@300;400;500&display=swap");
:root {
// ------------- Colors
- --color-black: #0d0d0d;
+ --color-black: #18103A;
--color-interface-core: #556680;
--color-interface-dark: #556680;
- --color-interface-5: #f7fafd;
+ --color-interface-5: #ECEDE5;
--color-interface-10: #f0f4fa;
--color-interface-20: #e4ecf6;
--color-interface-40: #BBCADD;
@@ -86,9 +83,9 @@
--color-positive-20: #eaf6ed;
--color-positive-dark: #004c00;
- --color-codat-primary: #482deb;
- --color-codat-primary-dark: #351dc6;
- --color-link-primary: #482deb;
+ --color-codat-primary: #6482A7;
+ --color-codat-primary-dark: #4a6389;
+ --color-link-primary: #6482A7;
--ifm-color-link: var(--color-codat-primary);
--ifm-background-color: var(--token-primary-bg-c);
@@ -96,23 +93,17 @@
// ------------ Fonts
- --sans-serif: "Poppins", -apple-system, BlinkMacSystemFont, Inter, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
- --serif: "Source Serif Pro", Iowan Old Style, Apple Garamond, Palatino Linotype, Times New Roman, "Droid Serif", Times, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+ --heading-font: "Lexend", Verdana, sans-serif;
+ --sans-serif: "Inter", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji";
--mono: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-
- // Print best practice
- //--ifm-font-family-base: var(--serif);
- //--ifm-heading-font-family: var(--sans-serif);
- //--ifm-font-family-monospace: var(--mono);
-
--ifm-font-family-base: var(--sans-serif);
- // --ifm-heading-font-family: var(--serif);
+ --ifm-heading-font-family: var(--heading-font);
--ifm-font-family-monospace: var(--mono);
--ifm-font-color-base: var(--color-black);
- --font-weight: 400;
+ --font-weight: 300;
--font-weight-bold: 500;
--ifm-menu-link-sublist-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04Ljk5OTg4IDVMNC45OTk4OCAxTDAuOTk5ODc4IDUiIHN0cm9rZT0iIzAzMDYwQiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
@@ -140,7 +131,7 @@
}
html[data-theme="light"] {
- --token-primary-bg-c: #ffffff;
+ --token-primary-bg-c: #ECEDE5;
--token-secondary-bg-c: var(--color-interface-5);
--token-secondary-bg-c-alt: var(--color-interface-10);
--token-secondary-bg-c-alt-dark: var(--color-interface-20);
@@ -162,11 +153,12 @@ html[data-theme="light"] {
--header-color: var(--color-black);
--ifm-heading-color: var(--header-color);
--sidebar-category-c: var(--header-color);
- --ifm-heading-color: var(--c-carbon-100);
+ --ifm-heading-color: var(--color-black);
--ifm-code-background: var(--c-indigo-10);
- --ifm-font-color-base: var(--c-carbon-90);
+ --ifm-font-color-base: var(--color-black);
//--ifm-font-color-base: var(--color-primary);
--markdown-text-intro-c: var(--color-primary);
+ --ifm-hr-background-color: rgba(24, 16, 58, 0.3);
}
html[data-theme="dark"] {
@@ -195,13 +187,13 @@ html[data-theme="dark"] {
--color-surface-mixed-a40: #706c77;
--color-surface-mixed-a50: #8b8890;
- --token-primary-bg-c: #03060b;
+ --token-primary-bg-c: #18103A;
--token-secondary-bg-c: #13171c;
--token-secondary-bg-c-alt: #252c35;
--token-secondary-bg-c-alt-dark: #303842;
- --ifm-link-color: var(--color-primary-a50);
- --ifm-link-hover-color: var(--color-primary-a40);
+ --ifm-link-color: #B2D4C7;
+ --ifm-link-hover-color: #c8e3d9;
--color-primary: white;
--ifm-color-primary: var(--color-codat-primary);
@@ -212,12 +204,13 @@ html[data-theme="dark"] {
--ifm-navbar-background-color: var(--token-primary-bg-c);
--ifm-navbar-shadow: 0 1px 0 0 var(--c-gray-90);
- --ifm-heading-color: #fff;
- --ifm-font-color-base: var(--c-carbon-10);
+ --ifm-heading-color: #ECEDE5;
+ --ifm-font-color-base: #ECEDE5;
--ifm-background-color: var(--token-primary-bg-c);
--ifm-dropdown-background-color: var(--token-primary-bg-c);
--ifm-menu-link-sublist-icon-filter: invert(100%);
+ --ifm-hr-background-color: rgba(236, 237, 229, 0.3);
}
html {
@@ -237,7 +230,9 @@ html {
p {
font-size: 16px;
- letter-spacing: 0.2px;
+ font-weight: 300;
+ line-height: 150%;
+ letter-spacing: 0;
}
h1,
@@ -246,10 +241,17 @@ h3,
h4,
h5,
h6 {
- font-weight: 500;
+ font-family: var(--heading-font);
+ font-weight: 200;
+ line-height: 122%;
+ letter-spacing: normal;
text-wrap: balance;
}
+h1 {
+ letter-spacing: -1px;
+}
+
a {
text-decoration: none;
@@ -312,8 +314,9 @@ img {
// }
hr {
- border-bottom: 0;
- border-top: 1px solid var(--ifm-hr-background-color);
+ border: 0;
+ height: 1px;
+ background-color: var(--ifm-hr-background-color);
margin: 3em 0 !important;
}
@@ -360,6 +363,17 @@ hr {
// right: 3em;
// }
+// Logo
+.navbar__logo {
+ height: auto !important;
+
+ img {
+ height: auto !important;
+ width: 120px !important;
+ object-fit: contain !important;
+ }
+}
+
.theme-back-to-top-button {
bottom: 13px !important;
right: 12.5em !important;
@@ -389,43 +403,44 @@ hr {
padding: 5px 14px !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
- color: #4b5563 !important;
- background-color: #f3f4f6 !important;
- border: 1px solid #e5e7eb !important;
+ color: rgba(24, 16, 58, 0.6) !important;
+ background-color: #E0E9D1 !important;
+ border: 1px solid #E0E9D1 !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
line-height: 1.4 !important;
+ letter-spacing: 0.04em !important;
margin: 0 !important;
}
-
+
ul.tabs .tabs__item:hover:not(.tabs__item--active) {
- background-color: #ede9fe !important;
- color: #482deb !important;
- border-color: #c4b5fd !important;
+ background-color: #eaf0df !important;
+ color: #18103A !important;
+ border-color: #D1E100 !important;
}
-
+
ul.tabs .tabs__item--active {
- background-color: #482deb !important;
- color: #ffffff !important;
- border-color: #482deb !important;
+ background-color: #D1E100 !important;
+ color: #18103A !important;
+ border-color: #D1E100 !important;
font-weight: 600 !important;
}
-
+
/* Dark mode */
[data-theme='dark'] ul.tabs .tabs__item {
- color: #9ca3af !important;
- background-color: #1f2937 !important;
- border-color: #374151 !important;
+ color: rgba(236, 237, 229, 0.6) !important;
+ background-color: rgba(236, 237, 229, 0.08) !important;
+ border-color: rgba(236, 237, 229, 0.15) !important;
}
-
+
[data-theme='dark'] ul.tabs .tabs__item:hover:not(.tabs__item--active) {
- background-color: #2e1f6b !important;
- color: #a78bfa !important;
- border-color: #5b3fd6 !important;
+ background-color: rgba(209, 225, 0, 0.15) !important;
+ color: #ECEDE5 !important;
+ border-color: #D1E100 !important;
}
-
+
[data-theme='dark'] ul.tabs .tabs__item--active {
- background-color: #482deb !important;
- color: #ffffff !important;
- border-color: #482deb !important;
+ background-color: #D1E100 !important;
+ color: #18103A !important;
+ border-color: #D1E100 !important;
}
\ No newline at end of file
diff --git a/src/theme/BlogSidebar/Desktop/index.tsx b/src/theme/BlogSidebar/Desktop/index.tsx
index ba411d877..2602196c7 100644
--- a/src/theme/BlogSidebar/Desktop/index.tsx
+++ b/src/theme/BlogSidebar/Desktop/index.tsx
@@ -59,7 +59,7 @@ export default function BlogSidebarDesktop({ sidebar }: Props): JSX.Element {
))
: "No deprecations"}
Ctrl-K to bring up the quick search bar to find the information you need.
+ First steps guide
+ Video guide: Your first 10 minutes
+
Core concepts
@@ -82,7 +80,7 @@ new products and experiences for small and medium-sized businesses.
+
Tutorials
@@ -96,7 +94,7 @@ new products and experiences for small and medium-sized businesses.
+
Client libraries
@@ -117,7 +115,7 @@ new products and experiences for small and medium-sized businesses.
+
API keys
@@ -131,7 +129,7 @@ new products and experiences for small and medium-sized businesses.
+
Webhook service
@@ -145,7 +143,7 @@ new products and experiences for small and medium-sized businesses.
+
Accounting integrations
@@ -156,7 +154,7 @@ new products and experiences for small and medium-sized businesses.
+
Auth flow SDK
@@ -169,7 +167,7 @@ new products and experiences for small and medium-sized businesses.
+
API reference
@@ -183,10 +181,7 @@ new products and experiences for small and medium-sized businesses.
+
{title}
@@ -57,7 +62,6 @@ const PageHeader = ({
{videoUrl &&
+
+
{product.name}
diff --git a/src/components/RelationshipsIcon/index.js b/src/components/RelationshipsIcon/index.js
new file mode 100644
index 000000000..59de8ed75
--- /dev/null
+++ b/src/components/RelationshipsIcon/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "../FeatureBullet/styles.module.scss";
+
+export default function RelationshipsIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/ShieldLockIcon/index.js b/src/components/ShieldLockIcon/index.js
new file mode 100644
index 000000000..d9b4ad144
--- /dev/null
+++ b/src/components/ShieldLockIcon/index.js
@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "../FeatureBullet/styles.module.scss";
+
+export default function ShieldLockIcon() {
+ return (
+
+ );
+}
diff --git a/src/components/UserBoxesIcon/index.js b/src/components/UserBoxesIcon/index.js
new file mode 100644
index 000000000..6e5db69c9
--- /dev/null
+++ b/src/components/UserBoxesIcon/index.js
@@ -0,0 +1,18 @@
+import React from "react";
+import styles from "../FeatureBullet/styles.module.scss";
+
+export default function UserBoxesIcon() {
+ return (
+
+ );
+}
diff --git a/src/pages/support/index.tsx b/src/pages/support/index.tsx
index 1a20f8607..2961d9673 100644
--- a/src/pages/support/index.tsx
+++ b/src/pages/support/index.tsx
@@ -1,4 +1,6 @@
import React from "react";
+import GearFinanceDownIcon from "@components/GearFinanceDownIcon";
+import FeatureBullet from "@components/FeatureBullet";
import Layout from "@theme/Layout";
import Navbar from "@theme/Navbar";
import Logo from "@theme/Logo";
@@ -17,7 +19,7 @@ const RaiseSupportTicket = () => {
- See all...
+ See all...
+ Get technical support
+ Request a feature
+ Billing inquiry
diff --git a/src/theme/BlogSidebar/Desktop/styles.module.css b/src/theme/BlogSidebar/Desktop/styles.module.css
index fbcb7d69e..0e6861dac 100644
--- a/src/theme/BlogSidebar/Desktop/styles.module.css
+++ b/src/theme/BlogSidebar/Desktop/styles.module.css
@@ -37,7 +37,14 @@
.sidebarItemTitle {
font-size: var(--ifm-h3-font-size);
- font-weight: var(--ifm-font-weight-bold);
+ font-weight: var(--ifm-font-weight-light);
+ font-family: var(--heading-font);
+ color: #18103A;
+ letter-spacing: 0.04em;
+}
+
+html[data-theme="dark"] .sidebarItemTitle {
+ color: #ECEDE5;
}
.sidebarItemList {
@@ -58,7 +65,11 @@
}
.sidebarItemLinkActive {
- color: var(--ifm-color-primary) !important;
+ color: #6482A7 !important;
+}
+
+html[data-theme="dark"] .sidebarItemLinkActive {
+ color: #B2D4C7 !important;
}
@media (max-width: 996px) {
diff --git a/src/theme/DocItem/Layout/Vote/styles.module.scss b/src/theme/DocItem/Layout/Vote/styles.module.scss
index 40c619c80..47d093fba 100644
--- a/src/theme/DocItem/Layout/Vote/styles.module.scss
+++ b/src/theme/DocItem/Layout/Vote/styles.module.scss
@@ -4,11 +4,16 @@
}
.voteHeader {
- font-weight: bold;
+ font-weight: 400;
+ color: #18103A;
margin-bottom: 1em;
opacity: 0.75;
}
+html[data-theme="dark"] .voteHeader {
+ color: #ECEDE5;
+}
+
.feedbackOptions {
display: flex;
text-align: center;
diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js
index a4ba7619d..5da62956a 100644
--- a/src/theme/DocItem/Layout/index.js
+++ b/src/theme/DocItem/Layout/index.js
@@ -68,6 +68,7 @@ export default function DocItemLayout(props) {
banner_image: bannerImg,
banner_text: bannerText,
banner_icon: bannerIcon,
+ banner_icon_dark: bannerIconDark,
banner_class: bannerClass,
video_url: videoUrl,
video_text: videoText,
@@ -91,6 +92,7 @@ export default function DocItemLayout(props) {
img={bannerImg}
text={bannerText}
icon={bannerIcon}
+ iconDark={bannerIconDark}
videoUrl={videoUrl}
videoText={videoText}
/>
diff --git a/src/theme/GlossaryTerm/index.js b/src/theme/GlossaryTerm/index.js
new file mode 100644
index 000000000..e311f46a5
--- /dev/null
+++ b/src/theme/GlossaryTerm/index.js
@@ -0,0 +1,150 @@
+import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { usePluginData } from '@docusaurus/useGlobalData';
+import styles from './styles.module.css';
+
+export default function GlossaryTerm({ term, definition, routePath = '/glossary', children }) {
+ const [showTooltip, setShowTooltip] = useState(false);
+ const [tooltipStyle, setTooltipStyle] = useState(null);
+ const [placement, setPlacement] = useState('top');
+ const [isInsideLink, setIsInsideLink] = useState(false);
+ const wrapperRef = useRef(null);
+ const tooltipRef = useRef(null);
+
+ // Check if this term is rendered inside an existing tag
+ useEffect(() => {
+ if (wrapperRef.current) {
+ const parentLink = wrapperRef.current.parentElement?.closest('a');
+ setIsInsideLink(!!parentLink);
+ }
+ }, []);
+
+ const updatePosition = useCallback(() => {
+ if (!wrapperRef.current || !tooltipRef.current) return;
+ const wrapperRect = wrapperRef.current.getBoundingClientRect();
+ const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ const preferredGap = 8;
+
+ const hasSpaceAbove = wrapperRect.top >= tooltipRect.height + preferredGap;
+ const hasSpaceBelow = viewportHeight - wrapperRect.bottom >= tooltipRect.height + preferredGap;
+ const nextPlacement = hasSpaceAbove || !hasSpaceBelow ? 'top' : 'bottom';
+
+ let top;
+ if (nextPlacement === 'top') {
+ top = wrapperRect.top - tooltipRect.height - preferredGap;
+ } else {
+ top = wrapperRect.bottom + preferredGap;
+ }
+
+ const horizontalMargin = 8;
+ let left = wrapperRect.left + wrapperRect.width / 2 - tooltipRect.width / 2;
+ left = Math.max(
+ horizontalMargin,
+ Math.min(left, viewportWidth - tooltipRect.width - horizontalMargin)
+ );
+
+ setPlacement(nextPlacement);
+ setTooltipStyle({ top: Math.max(4, top), left });
+ }, []);
+
+ useEffect(() => {
+ if (!showTooltip) return;
+
+ let rafId2;
+ const rafId1 = requestAnimationFrame(() => {
+ rafId2 = requestAnimationFrame(() => {
+ updatePosition();
+ });
+ });
+
+ const onScroll = () => updatePosition();
+ const onResize = () => updatePosition();
+ window.addEventListener('scroll', onScroll, true);
+ window.addEventListener('resize', onResize);
+ return () => {
+ cancelAnimationFrame(rafId1);
+ if (rafId2) cancelAnimationFrame(rafId2);
+ window.removeEventListener('scroll', onScroll, true);
+ window.removeEventListener('resize', onResize);
+ };
+ }, [showTooltip, updatePosition]);
+
+ const pluginData = usePluginData('docusaurus-plugin-glossary');
+ const effectiveDefinition = useMemo(() => {
+ if (definition && typeof definition === 'string' && definition.length > 0) {
+ return definition;
+ }
+ const terms = (pluginData && pluginData.terms) || [];
+ const found = terms.find(
+ t => typeof t.term === 'string' && t.term.toLowerCase() === String(term).toLowerCase()
+ );
+ return found && found.definition ? found.definition : undefined;
+ }, [definition, pluginData, term]);
+
+ const effectiveRoutePath = useMemo(() => {
+ if (routePath && typeof routePath === 'string' && routePath.length > 0) return routePath;
+ return (pluginData && pluginData.routePath) || '/glossary';
+ }, [pluginData, routePath]);
+
+ const displayText = children || term;
+ const termId = term.toLowerCase().replace(/\s+/g, '-');
+
+ const tooltipContent = effectiveDefinition && (
+
+ {term} {effectiveDefinition}
+
+ );
+
+ // If inside a link, render as span to avoid nested tags
+ if (isInsideLink) {
+ return (
+
+ setShowTooltip(true)}
+ onMouseLeave={() => setShowTooltip(false)}
+ onFocus={() => setShowTooltip(true)}
+ onBlur={() => setShowTooltip(false)}
+ aria-describedby={`tooltip-${termId}`}
+ >
+ {displayText}
+
+ {tooltipContent}
+
+ );
+ }
+
+ return (
+
+ setShowTooltip(true)}
+ onMouseLeave={() => setShowTooltip(false)}
+ onFocus={() => setShowTooltip(true)}
+ onBlur={() => setShowTooltip(false)}
+ aria-describedby={`tooltip-${termId}`}
+ >
+ {displayText}
+
+ {tooltipContent}
+
+ );
+}
diff --git a/src/theme/GlossaryTerm/styles.module.css b/src/theme/GlossaryTerm/styles.module.css
new file mode 100644
index 000000000..2e41bca60
--- /dev/null
+++ b/src/theme/GlossaryTerm/styles.module.css
@@ -0,0 +1,150 @@
+.glossaryTermWrapper {
+ position: relative;
+ display: inline;
+}
+
+.glossaryTerm {
+ color: var(--ifm-font-color-base);
+ text-decoration: none;
+ border-bottom: 1px dotted;
+ border-bottom-color: color-mix(in srgb, var(--ifm-font-color-base) 20%, transparent);
+ cursor: help;
+ transition: all 0.2s;
+}
+
+.glossaryTerm:hover {
+ color: var(--ifm-color-primary-dark);
+ border-bottom-style: solid;
+ border-bottom-color: var(--ifm-color-primary-dark);
+ border-bottom: none;
+}
+
+/* When inside a hyperlink, inherit the link colour */
+a .glossaryTerm,
+a .glossaryTermWrapper span.glossaryTerm {
+ color: inherit;
+ border-bottom-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+a .glossaryTerm:hover,
+a .glossaryTermWrapper span.glossaryTerm:hover {
+ color: inherit;
+}
+
+.tooltip {
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-8px);
+ padding: 0.75rem 1rem;
+ background: var(--ifm-background-surface-color);
+ color: var(--ifm-font-color-base);
+ border: 1px solid var(--ifm-color-emphasis-300);
+ border-radius: 0.5rem;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+ font-size: 0.875rem;
+ font-weight: normal;
+ font-style: normal;
+ text-decoration: none;
+ line-height: 1.4;
+ white-space: normal;
+ max-width: 300px;
+ min-width: 200px;
+ z-index: 9999;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s;
+ visibility: hidden;
+}
+
+/* When we compute viewport-safe placement via JS */
+.tooltipFloating {
+ position: fixed;
+ bottom: auto;
+ transform: none;
+ left: 0; /* overridden inline */
+ top: 0; /* overridden inline */
+}
+
+/* Base arrow removed; arrows are defined per-placement to avoid inversion */
+
+/* Arrow for top placement (tooltip above anchor) */
+.tooltipTop::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: -6px;
+ border: 6px solid transparent;
+ border-top-color: var(--ifm-background-surface-color);
+}
+.tooltipTop::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: -7px;
+ border: 7px solid transparent;
+ border-top-color: var(--ifm-color-emphasis-300);
+}
+
+/* Arrow for bottom placement (tooltip below anchor) */
+.tooltipBottom::after {
+ content: '';
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: -6px;
+ border: 6px solid transparent;
+ border-bottom-color: var(--ifm-background-surface-color);
+}
+.tooltipBottom::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: -7px;
+ border: 7px solid transparent;
+ border-bottom-color: var(--ifm-color-emphasis-300);
+}
+
+.tooltipVisible {
+ opacity: 1;
+ pointer-events: auto;
+ visibility: visible;
+}
+
+.tooltip strong {
+ display: block;
+ margin-bottom: 0.25rem;
+ color: var(--ifm-color-primary);
+}
+
+/* Dark mode adjustments */
+[data-theme='dark'] .tooltip {
+ background: var(--ifm-background-surface-color);
+ border-color: var(--ifm-color-emphasis-400);
+}
+
+/* Dark mode arrow overrides scoped to placement to avoid upside-down arrows */
+[data-theme='dark'] .tooltipTop::after {
+ border-top-color: var(--ifm-background-surface-color);
+}
+[data-theme='dark'] .tooltipTop::before {
+ border-top-color: var(--ifm-color-emphasis-400);
+}
+[data-theme='dark'] .tooltipBottom::after {
+ border-bottom-color: var(--ifm-background-surface-color);
+}
+[data-theme='dark'] .tooltipBottom::before {
+ border-bottom-color: var(--ifm-color-emphasis-400);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+ .tooltip {
+ max-width: 250px;
+ min-width: 180px;
+ font-size: 0.8rem;
+ }
+}
diff --git a/src/theme/MDXComponents/index.js b/src/theme/MDXComponents/index.js
index 2a4f56cc7..48084963f 100644
--- a/src/theme/MDXComponents/index.js
+++ b/src/theme/MDXComponents/index.js
@@ -10,6 +10,17 @@ import MDXLi from "@theme/MDXComponents/Li";
import MDXImg from "@theme/MDXComponents/Img";
import Admonition from "@theme/Admonition";
import Mermaid from "@theme/Mermaid";
+import FeatureBullet from "@components/FeatureBullet";
+import MagnifyingIcon from "@components/MagnifyingIcon";
+import EyeIcon from "@components/EyeIcon";
+import PeopleIcon from "@components/PeopleIcon";
+import RelationshipsIcon from "@components/RelationshipsIcon";
+import FolderLockIcon from "@components/FolderLockIcon";
+import ShieldLockIcon from "@components/ShieldLockIcon";
+import FilesGearIcon from "@components/FilesGearIcon";
+import GearFinanceDownIcon from "@components/GearFinanceDownIcon";
+import PeopleTickIcon from "@components/PeopleTickIcon";
+import UserBoxesIcon from "@components/UserBoxesIcon";
const MDXComponents = {
Head,
details: MDXDetails, // For MD mode support, see https://github.com/facebook/docusaurus/issues/9092#issuecomment-1602902274
@@ -28,6 +39,17 @@ const MDXComponents = {
h6: (props) =>
}
+ {typeof hr === 'string' &&