diff --git a/html5/_main_toc.html.slim b/html5/_main_toc.html.slim
index 1d982ffb0..6c26cd0c3 100644
--- a/html5/_main_toc.html.slim
+++ b/html5/_main_toc.html.slim
@@ -5,7 +5,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Understand Kill Bill
ul.nav.navbar-nav
li
@@ -32,7 +32,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Get Started
ul.nav.navbar-nav
li
@@ -64,7 +64,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Core Concepts
ul.nav.navbar-nav
li
@@ -84,7 +84,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Integration
ul.nav.navbar-nav
li
@@ -128,7 +128,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Deploy & Operate
ul.nav.navbar-nav
li
@@ -157,7 +157,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Plugins
ul.nav.navbar-nav
li
@@ -222,7 +222,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Tutorials & Examples
ul.nav.navbar-nav
li
@@ -252,7 +252,7 @@ nav.sidebar-nav
| AWS
span.badge-premium Premium
ul.nav.navbar-nav
li
@@ -315,7 +315,7 @@ nav.sidebar-nav
| Aviate
span.badge-premium Premium
ul.nav.navbar-nav
li
@@ -414,7 +414,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Reference
ul.nav.navbar-nav
li
@@ -431,7 +431,7 @@ nav.sidebar-nav
a.bd-toc-link.main-link role="button"
| Internal
ul.nav.navbar-nav
li
diff --git a/html5/document.html.slim b/html5/document.html.slim
index a817c8395..7ccac4f75 100644
--- a/html5/document.html.slim
+++ b/html5/document.html.slim
@@ -11,6 +11,7 @@
+
meta name="description" content=((title) || (attr 'untitled-label'))
diff --git a/javascripts/kb.js b/javascripts/kb.js
index c47717cbf..2f665ccd7 100644
--- a/javascripts/kb.js
+++ b/javascripts/kb.js
@@ -41,7 +41,7 @@ setTimeout(function () {
}, 500);
});
- $('.content-wrapper .note td.icon').append(``);
+ $('.content-wrapper .note td.icon').append(``);
$('.content pre').each(function () {
let codeEl = $(this).find('code');
@@ -50,7 +50,7 @@ setTimeout(function () {
|| '';
let label = lang ? lang.toUpperCase() : '';
$(this).parent('.content').prepend(
- ''
+ ''
);
});
diff --git a/stylesheets/kb.css b/stylesheets/kb.css
index 4946cbea0..18dae8e5a 100644
--- a/stylesheets/kb.css
+++ b/stylesheets/kb.css
@@ -2,7 +2,7 @@
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
-@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";
+/* Design tokens (colors, typography, radius, shadow, spacing) live in tokens.css */
*,
*::before,
@@ -34,113 +34,6 @@ dd {
margin: 0;
}
-:root {
- --color: #474B6B;
- --primary-color: #155EEF;
- --link-color: #2970ff;
- --heading-color: #293056;
- --content-bg: #5C6287;
- --background-color: #ffffff;
- --sidebar-item-color: #101828;
- --color-gray-200: #EAECF0;
- --color-searchbar: #ffffff;
- --color-base-white: #D1D5DB;
- --color-gray-100: #F5F8FF;
- --color-gray-50:#F9FAFB;
- --color-primary-50: #EFF4FF;
- --color-primary-100: #D1E0FF;
- --color-table-bg: #ffffff;
- --btn-primary-hover: #0040C1;
-
- --sidebar-control-bg: #F3F4F6;
- --sidebar-control-color: #2970FF;
-
- --main-text-color: #D0D5DD;
-
- --header-height: 70px;
-
- --snippet-header-bg: #475467;
- --snippet-header-color: #EFF4FF;
- --snippet-body-bg: #344054;
- --snippet-body-color: #E0E4EB;
- --snippet-body-border-color: #475467;
-
- /* Spacing scale (4px base) */
- --space-1: 4px;
- --space-2: 8px;
- --space-3: 16px;
- --space-4: 24px;
- --space-5: 32px;
- --space-6: 48px;
-
- /* Docs typography */
- --docs-content-max-width: 820px;
- --docs-line-height: 1.65;
- --font-size-sm: 13px;
- --font-size-xs: 12px;
- --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-
- /* Inline code */
- --inline-code-bg: #F3F4F6;
- --inline-code-border: #E5E7EB;
-
- /* Admonition: tip */
- --admon-tip-bg: #F0FDF4;
- --admon-tip-border: #BBF7D0;
- --admon-tip-accent: #16A34A;
- /* Admonition: warning */
- --admon-warning-bg: #FFFBEB;
- --admon-warning-border: #FDE68A;
- --admon-warning-accent: #D97706;
- /* Admonition: important / caution */
- --admon-important-bg: #FEF2F2;
- --admon-important-border: #FECACA;
- --admon-important-accent: #DC2626;
- /* Admonition: note (existing colors) */
- --admon-note-accent: #2970FF;
-}
-
-[data-theme="dark"] {
- --color: #D8DCE4;
- --heading-color: #EAECF0;
- --content-bg: #F2F4F7;
- --background-color: #101828;
- --sidebar-item-color: #FFFFFF;
- --color-gray-200: #1D2939;
- --color-searchbar: #344054;
- --color-base-white: #4d5f7e;
- --color-gray-100: #1D2939;
- --color-gray-50: #1D2939;
- --color-primary-50: #1D2939;
- --color-primary-100: #344054;
- --color-table-bg: #101828;
- color-scheme: dark;
-
- --link-color: #528BFF;
-
- --sidebar-control-bg: #1D2939;
- --sidebar-control-color: #fff;
-
- /* Inline code (dark) */
- --inline-code-bg: #1D2939;
- --inline-code-border: #344054;
-
- /* Admonition: tip (dark) */
- --admon-tip-bg: #052E16;
- --admon-tip-border: #14532D;
- --admon-tip-accent: #22C55E;
- /* Admonition: warning (dark) */
- --admon-warning-bg: #422006;
- --admon-warning-border: #78350F;
- --admon-warning-accent: #FBBF24;
- /* Admonition: important / caution (dark) */
- --admon-important-bg: #450A0A;
- --admon-important-border: #7F1D1D;
- --admon-important-accent: #F87171;
- /* Admonition: note (dark) */
- --admon-note-accent: #528BFF;
-}
-
html {
scroll-padding-top: 60px;
}
@@ -149,11 +42,12 @@ body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
- font-family: 'Inter', sans-serif;
- font-size: 15px;
- line-height: var(--docs-line-height);
- color: var(--color);
- background-color: var(--background-color) !important;
+ font-family: var(--font-product);
+ font-size: var(--text-body-large);
+ line-height: var(--text-body-large--line-height);
+ font-weight: var(--text-body-large--font-weight);
+ color: var(--color-on-surface-secondary);
+ background-color: var(--color-surface-container-lowest) !important;
max-width: 100%;
overflow-x: hidden;
position: relative;
@@ -184,65 +78,59 @@ select {
font: inherit;
}
a {
- color: var(--link-color);
+ color: var(--color-primary);
word-break: break-word;
transition: color 0.15s;
}
a:not(.btn):hover {
- color: var(--link-color)!important;
+ color: var(--color-primary)!important;
text-decoration: underline;
}
a:focus-visible {
- outline: 2px solid var(--link-color);
+ outline: 2px solid var(--color-primary);
outline-offset: 2px;
- border-radius: 2px;
+ border-radius: var(--radius-sm);
}
button:focus-visible,
input:focus-visible {
- outline: 2px solid var(--link-color);
+ outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
h1,
-h3,
-h4 {
- font-weight: 500;
-}
h2,
h3,
h4 {
- color: var(--heading-color);
+ color: var(--color-on-surface-primary);
}
h1 {
- font-size: 40px;
- line-height: 1.15;
- letter-spacing: -0.02em;
- color: var(--heading-color);
+ font-size: var(--text-display-small);
+ line-height: var(--text-display-small--line-height);
+ font-weight: var(--text-display-small--font-weight);
}
h2 {
- font-size: 30px;
- font-weight: 500;
- line-height: 1.25;
- letter-spacing: -0.015em;
+ font-size: var(--text-headline-large);
+ line-height: var(--text-headline-large--line-height);
+ font-weight: var(--text-headline-large--font-weight);
}
h3 {
- font-size: 24px;
- line-height: 1.3;
+ font-size: var(--text-headline-small);
+ line-height: var(--text-headline-small--line-height);
+ font-weight: var(--text-headline-small--font-weight);
}
h4 {
- font-size: 18px;
- font-weight: 500;
- line-height: 1.4;
+ font-size: var(--text-title-large);
+ line-height: var(--text-title-large--line-height);
+ font-weight: var(--text-title-large--font-weight);
}
strong {
- font-weight: 600;
+ font-weight: var(--font-weight-semibold);
}
.header {
- padding: 16px 0;
- background: var(--background-color);
- /* box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06); */
- border-bottom: solid 1px var(--color-gray-200);
+ padding: var(--space-3) 0;
+ background: var(--color-surface-container-lowest);
+ border-bottom: solid 1px var(--color-outline-primary);
}
.header.sticky{
position: fixed;
@@ -317,32 +205,6 @@ strong {
width: 50px !important;
}
}
-.header-wrapper .search-form {
- position: relative;
-}
-.header-wrapper .search-form .algolia-autocomplete {
- width: 100%;
-}
-.header-wrapper .search-form input[type="search"] {
- width: 100%;
- padding: 9px 9px 9px 40px;
- border: 1px solid #D1D5DB;
- border-radius: 6px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-}
-.header-wrapper .search-form .ds-dropdown-menu {
- max-width: none;
- width: 100%;
-}
-.header-wrapper .search-form .search-form-icon {
- position: absolute;
- left: 13px;
- top: 9px;
- z-index: 1;
- width: 20px;
- height: 20px;
- pointer-events: none;
-}
.content-wrapper {
padding: var(--space-4);
width: 100%;
@@ -375,7 +237,7 @@ strong {
display: flex;
align-items: center;
padding: 40px 0px var(--space-4) 0px;
- border-radius: 8px;
+ border-radius: var(--radius-lg);
max-width: var(--docs-content-max-width);
}
.content-wrapper .banner .bg-image {
@@ -389,7 +251,7 @@ strong {
.main {
position: relative;
- line-height: 1.5;
+ line-height: var(--text-body-large--line-height);
}
.main p {
@@ -427,10 +289,6 @@ strong {
transform: rotate(180deg);
}
-.main .sidebar .icon-title.bd-link-active-wrap .bd-toc-link {
- /* color: var(--link-color); */
-}
-
.main .sidebar .open .icon-title .chevron,
.main .sidebar .open .icon-title.bd-link-active-wrap .chevron{
transform: rotate(0);
@@ -438,12 +296,12 @@ strong {
transform-origin: center;
}
-.main .sidebar .bd-link-active-wrap .chevron path {
- fill: #D1D5DB;
+.main .sidebar .icon-title .chevron path {
+ fill: var(--color-outline-secondary);
}
.main .sidebar .bd-link-active-wrap svg path {
- fill: var(--link-color);
+ fill: var(--color-primary);
}
.main .sidebar .icon-title svg {
@@ -471,7 +329,7 @@ strong {
*::-webkit-scrollbar, *:hover::-webkit-scrollbar {
width: 6px;
height: 6px;
- color: var(--color-gray-200);
+ color: var(--color-outline-primary);
background-color: transparent !important;
}
@@ -482,9 +340,9 @@ strong {
::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
- background-color: var(--color-gray-200);
+ background-color: var(--color-outline-primary);
width: 6px;
- border-radius: 32px;
+ border-radius: var(--radius-4xl);
border: none;
}
@@ -493,40 +351,41 @@ strong {
*:active,
*:focus {
scrollbar-track-color: transparent !important;
- scrollbar-color: var(--color-gray-200) transparent !important;
+ scrollbar-color: var(--color-outline-primary) transparent !important;
scrollbar-width: thin !important;
}
.main .sidebar-nav a.nav-link {
padding: 5px 10px;
margin-left: 6px;
- font-size: 13px;
- line-height: 1.4;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
transition: background-color 0.15s, color 0.15s;
}
.main .sidebar-nav a.nav-link:hover {
- color: var(--link-color);
- background-color: var(--color-gray-100);
- border-radius: 6px;
+ color: var(--color-primary);
+ background-color: var(--color-primary-25);
+ border-radius: var(--radius-md);
}
.main .sidebar-nav a {
- color: var(--color);
- font-weight: 400;
+ color: var(--color-on-surface-secondary);
+ font-weight: var(--font-weight-regular);
}
.main .sidebar-nav a.bd-toc-link {
padding-left: 12px;
- font-weight: 500;
- font-size: 13.5px;
+ font-size: var(--text-label-large);
+ line-height: var(--text-label-large--line-height);
+ font-weight: var(--text-label-large--font-weight);
display: block;
- color: var(--heading-color);
+ color: var(--color-on-surface-primary);
transition-duration: .25s;
transition-property: color;
}
.main .sidebar-nav li:hover a.bd-toc-link,
.main .sidebar-nav li.active a.bd-toc-link,
.main .sidebar-nav .open a.bd-toc-link {
- color: var(--color);
+ color: var(--color-on-surface-secondary);
}
.sidebar-toggler {
display: none;
@@ -551,8 +410,8 @@ strong {
position: fixed;
top: 0;
padding-top: var(--header-height);
- background-color: var(--background-color);
- border-right: 1.5px solid var(--color-gray-200);
+ background-color: var(--color-surface-container-lowest);
+ border-right: 1.5px solid var(--color-outline-primary);
width: 320px;
margin-left: -300px;
flex-shrink: 0;
@@ -571,10 +430,10 @@ strong {
right: -12px;
width: 24px;
height: 24px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
cursor: pointer;
- color: var(--sidebar-control-color);
- background-color: var(--sidebar-control-bg);
+ color: var(--color-primary);
+ background-color: var(--color-surface-container);
z-index: 2;
}
.sidebar__control>svg {
@@ -631,18 +490,18 @@ strong {
}
pre.pygments .tok-o {
- color: #84ADFF;
+ color: var(--color-primary-200);
}
/* Inline code styling */
.main #content code:not(pre code) {
background-color: var(--inline-code-bg);
border: 1px solid var(--inline-code-border);
- border-radius: 4px;
+ border-radius: var(--radius-sm);
padding: 1px 5px;
font-size: 0.88em;
- font-family: var(--font-mono);
- color: var(--color);
+ font-family: var(--font-family-mono);
+ color: var(--color-on-surface-secondary);
word-break: break-word;
}
.main p code {
@@ -651,63 +510,63 @@ pre.pygments .tok-o {
}
.main .table-wrap {
- border-radius: 12px;
- border: 1px solid var(--color-gray-200);
- background: linear-gradient(180deg, var(--color-gray-50), transparent);
+ border-radius: var(--radius-xl);
+ border: 1px solid var(--color-outline-primary);
+ background: linear-gradient(180deg, var(--color-surface-container-low), transparent);
margin-bottom: var(--space-4);
overflow-x: auto;
}
.main .table-wrap .tableblock tbody {
- border-radius: 9px;
+ border-radius: var(--radius-lg);
}
.main .table-wrap .tableblock tbody:is(:nth-child(2)) tr:first-child td:first-child {
- border-top-left-radius: 12px;
+ border-top-left-radius: var(--radius-xl);
}
.main .table-wrap .tableblock tbody:is(:nth-child(2)) tr:first-child td:last-child {
- border-top-right-radius: 12px;
+ border-top-right-radius: var(--radius-xl);
}
.main .table-wrap .tableblock tbody tr:last-child td:first-child {
- border-bottom-left-radius: 12px;
+ border-bottom-left-radius: var(--radius-xl);
}
.main .table-wrap .tableblock tbody tr:last-child td:last-child {
- border-bottom-right-radius: 12px;
+ border-bottom-right-radius: var(--radius-xl);
}
.main .table-wrap table tbody {
- background: var(--color-table-bg);
+ background: var(--color-surface-container-lowest);
border: none;
}
.main table, .main table td,.main table th {
padding: 14px 16px;
- font-weight: 500;
- font-size: 14px;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ font-weight: var(--font-weight-medium);
}
.main table th {
- background-color: var(--color-gray-50);
- font-weight: 600;
- color: var(--heading-color);
- font-size: 13px;
+ background-color: var(--color-surface-container-low);
+ font-size: var(--text-label-large-emphasis);
+ line-height: var(--text-label-large-emphasis--line-height);
+ font-weight: var(--text-label-large-emphasis--font-weight);
+ color: var(--color-on-surface-primary);
text-transform: none;
}
.main table td:not(:first-child),.main table th:not(:first-child) {
- border-left: 1px solid var(--color-gray-200);
- font-size: 14px;
- line-height: 1.5;
+ border-left: 1px solid var(--color-outline-primary);
}
.main table td {
- font-weight: 400 !important;
- color: var(--color);
+ font-weight: var(--font-weight-regular) !important;
+ color: var(--color-on-surface-secondary);
vertical-align: top;
}
.main table, .main .admonitionblock table tr, .main table tr:not(:first-child):is(:last-child) {
border-bottom: none !important;
}
.main table,.main table tr:not(:last-child) {
- border-bottom: 1px solid var(--color-gray-200);
+ border-bottom: 1px solid var(--color-outline-primary);
}
.main table,.main table thead tr:first-child {
- border-bottom: 1px solid var(--color-gray-200);
+ border-bottom: 1px solid var(--color-outline-primary);
}
.main .note table,.main .note table td,.main .note table th {
@@ -730,16 +589,21 @@ pre.pygments .tok-o {
}
.main .note .content {
- font-weight: 400;
- font-size: 14px;
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ font-weight: var(--text-body-medium--font-weight);
+ color: var(--color-on-surface-secondary);
padding-left: 12px;
}
.main .note .content strong:is(:first-child) {
display: block;
height: 21px;
- color: var(--heading-color);
+ color: var(--color-on-surface-primary);
+}
+
+.main .note .info-icon {
+ color: var(--color-primary);
}
.main table td.icon svg{
@@ -754,25 +618,20 @@ pre.pygments .tok-o {
width: 100%;
border-collapse: collapse;
}
-/* tr td:first-child.tableblock p {
- background-color: var(--color-gray-100);
- border-radius: 8px;
- padding: 4px 10px 4px 10px;
-} */
.main .tableblock p {
display: inline-block;
margin-bottom: 0px !important;
- font-size: 14px;
- font-weight: 400;
+ font-size: var(--text-body-medium);
+ font-weight: var(--text-body-medium--font-weight);
}
.main .tableblock thead tr {
- border-top-left-radius: 12px;
- border-top-right-radius: 12px;
+ border-top-left-radius: var(--radius-xl);
+ border-top-right-radius: var(--radius-xl);
padding: 12px 24px 12px 24px;
}
.main table .title {
text-transform: uppercase;
- font-weight: 600;
+ font-weight: var(--font-weight-semibold);
padding: 0 5px;
}
@@ -780,8 +639,8 @@ pre.pygments .tok-o {
display: none;
margin-left: 12px;
padding-bottom: 4px;
- font-size: 13px;
- border-left: 1px solid var(--color-gray-200);
+ font-size: var(--font-size-14);
+ border-left: 1px solid var(--color-outline-primary);
}
.main .sidebar-nav > ul li ul.active-list {
@@ -792,21 +651,21 @@ pre.pygments .tok-o {
display: block;
position: relative;
padding-left: 14px;
- font-size: 13px;
+ font-size: var(--text-body-medium);
}
.main .sidebar-nav .list-item-active a {
- color: var(--link-color);
+ color: var(--color-primary);
margin-bottom: 2px;
- background-color: var(--color-gray-100);
- border-radius: 6px;
- font-weight: 500;
+ background-color: var(--color-primary-25);
+ border-radius: var(--radius-md);
+ font-weight: var(--font-weight-medium);
}
.main .sidebar-nav > .navbar-nav > li {
margin-bottom: 0;
padding-bottom: 4px;
- border-bottom: 1px solid var(--color-gray-200);
+ border-bottom: 1px solid var(--color-outline-primary);
}
.main .sidebar-nav > .navbar-nav > li:last-child {
border-bottom: none;
@@ -860,17 +719,17 @@ ul.nav.navbar-nav {
content: "On this page";
display: block;
margin-bottom: var(--space-4);
- font-weight: 500;
- font-size: var(--font-size-xs);
- line-height: 18px;
+ font-size: var(--text-label-medium);
+ line-height: var(--text-label-medium--line-height);
+ font-weight: var(--text-label-medium--font-weight);
letter-spacing: 0.04em;
text-transform: uppercase;
- color: var(--heading-color);
+ color: var(--color-on-surface-primary);
}
.main .right-side-menu > ul > li > a {
- font-size: var(--font-size-sm);
- font-weight: 400;
+ font-size: var(--text-body-medium);
+ font-weight: var(--text-body-medium--font-weight);
margin-bottom: 10px;
padding: 0;
}
@@ -878,39 +737,38 @@ ul.nav.navbar-nav {
.main .right-side-menu .nav-link {
padding-left: 10px !important;
border-left: 2px solid transparent;
- color: var(--color) !important;
- line-height: 20px;
- font-size: var(--font-size-sm);
- font-weight: 400;
+ color: var(--color-on-surface-secondary) !important;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ font-weight: var(--text-body-medium--font-weight);
transition: color 0.15s, border-color 0.15s;
}
.main .right-side-menu ul ul li .nav-link {
padding-left: 25px !important;
- line-height: 18px;
padding-top: 0px;
padding-bottom: 0px;
}
.main .right-side-menu .nav-link:hover {
border-left: solid 2px transparent !important;
- color: var(--link-color)!important;
+ color: var(--color-primary)!important;
}
.main .right-side-menu .nav-link.active{
padding-left: 10px;
- border-left: solid 2px var(--link-color) !important;
- color: var(--link-color)!important;
- font-weight: 500 !important;
+ border-left: solid 2px var(--color-primary) !important;
+ color: var(--color-primary)!important;
+ font-weight: var(--font-weight-medium) !important;
}
.main .right-side-menu .navbar-nav .navbar-nav .nav-link.active{
padding-left: 10px;
border-left: solid 2px transparent !important;
- color: var(--link-color)!important;
- border-left: solid 2px var(--link-color) !important;
- font-weight: 500;
+ color: var(--color-primary)!important;
+ border-left: solid 2px var(--color-primary) !important;
+ font-weight: var(--font-weight-medium);
}
.main .right-side-menu .navbar-nav {
@@ -923,7 +781,7 @@ ul.nav.navbar-nav {
}
.main nav[data-toggle=toc] .nav > li > a:focus,
.main nav[data-toggle=toc] .nav > li > a:hover {
- color: var(--link-color)!important;
+ color: var(--color-primary)!important;
}
.main nav[data-toggle=toc] .nav .nav > li > a:focus,
.main nav[data-toggle=toc] .nav .nav > li > a:hover,
@@ -973,17 +831,17 @@ ul.nav.navbar-nav {
color-scheme: dark;
}
.main .listingblock .content pre {
- color: white !important;
+ color: var(--color-neutral-0) !important;
}
.main .listingblock, .literalblock > .content pre {
padding: 14px 18px;
background: var(--snippet-body-bg) !important;
border: 1px solid var(--snippet-body-border-color);
- border-radius: 12px;
+ border-radius: var(--radius-xl);
margin-bottom: var(--space-4);
- font-size: 14px;
- font-weight: 400;
- color: white !important;
+ font-size: var(--text-body-medium);
+ font-weight: var(--text-body-medium--font-weight);
+ color: var(--color-neutral-0) !important;
}
pre.pygments {
background: var(--snippet-body-bg) !important;
@@ -996,14 +854,11 @@ pre.pygments .table-wrap, pre.pygments tbody {
border: none !important;
}
pre.pygments table td:not(:first-child) {
- border-left: 1px solid #374a63 !important;
-}
-.main .listingblock .tok-nt {
- color: #29A9C9 !important
+ border-left: 1px solid var(--snippet-body-border-color) !important;
}
.main .listingblock .tok-s, pre.pygments .tok-s1, pre.pygments .tok-s2,
pre.pygments .tok-ss {
- color: #FDA29B !important;
+ color: var(--color-error-200) !important;
}
.main .listingblock .tok-p {
color: var(--snippet-body-color) !important
@@ -1012,14 +867,14 @@ pre.pygments .tok-ss {
.main ol {
counter-reset: my-awesome-counter;
list-style: none;
- color: var(--link-color);
+ color: var(--color-primary);
margin-left: 20px;
margin-bottom: var(--space-3);
}
.main ol > li {
position: relative;
counter-increment: my-awesome-counter;
- font-weight: 600;
+ font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
@@ -1034,23 +889,20 @@ pre.pygments .tok-ss {
width: 24px;
height: 24px;
border-radius: 50%;
- background-color: #E5E7EB;
- color: var(--color);
- background-color: var(--color-primary-50);
- font-weight: 400;
- font-size: 12px;
-}
-.main ol > li::before {
+ color: var(--color-on-surface-secondary);
+ background-color: var(--color-primary-25);
+ font-size: var(--text-body-small);
+ font-weight: var(--text-body-small--font-weight);
}
.main ol.arabic:first-child p {
- color: var(--color);
+ color: var(--color-on-surface-secondary);
margin-left: 10px;
- font-weight: 400;
+ font-weight: var(--font-weight-regular);
}
.main .content-wrapper ul{
- color: var(--color);
+ color: var(--color-on-surface-secondary);
list-style: disc;
margin-left: 20px;
margin-bottom: var(--space-3);
@@ -1064,13 +916,6 @@ pre.pygments .tok-ss {
margin-top: var(--space-1);
}
-/* @media (max-width: 1200px) {
- .main .article-container {
- margin-left: 80px;
- width: calc(100vw - 320px);
- }
-} */
-
.main .article-container .center-content {
display:flex;
justify-content: space-between;
@@ -1084,14 +929,14 @@ pre.pygments .tok-ss {
margin-bottom: -1px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link {
- color: var(--heading-color);
+ color: var(--color-on-surface-primary);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:hover {
border-color: transparent;
background-color: transparent;
border-bottom: 2.5px solid;
- color: var(--link-color);
+ color: var(--color-primary);
}
.main ol ol {
margin-left: 30px;
@@ -1103,7 +948,7 @@ pre.pygments .tok-ss {
list-style-type: lower-roman;
}
.main ol li::marker {
- color: #6B7280;
+ color: var(--color-on-surface-tertiary);
}
.main h2 {
@@ -1136,7 +981,7 @@ pre.pygments .tok-ss {
transition: opacity 0.15s ease;
}
.content-wrapper h2 a, .content-wrapper h3 a, .content-wrapper h4 a svg{
- fill: var(--color);
+ fill: var(--color-on-surface-secondary);
}
.content-wrapper h4 a svg {
height: 14px;
@@ -1167,7 +1012,7 @@ pre.pygments .tok-ss {
display: flex;
align-items: center;
letter-spacing: -0.025em;
- color: var(--color);
+ color: var(--color-on-surface-secondary);
}
.breadcrumbs-list a svg {
width: 24px;
@@ -1176,14 +1021,25 @@ pre.pygments .tok-ss {
}
.note table code {
- color: var(--color);
+ color: var(--color-on-surface-secondary);
}
.banner h1 {
- font-size: clamp(28px, 4vw, 38px);
- font-weight: 600;
- line-height: 1.15;
- letter-spacing: -0.02em;
+ font-size: var(--text-display-small);
+ line-height: var(--text-display-small--line-height);
+ font-weight: var(--text-display-small--font-weight);
+}
+@media (max-width: 1024px) {
+ .banner h1 {
+ font-size: var(--text-headline-large);
+ line-height: var(--text-headline-large--line-height);
+ }
+}
+@media (max-width: 480px) {
+ .banner h1 {
+ font-size: var(--text-headline-medium);
+ line-height: var(--text-headline-medium--line-height);
+ }
}
.banner .absolute-figure {
@@ -1237,26 +1093,27 @@ pre.pygments .tok-ss {
position: fixed;
bottom: 0;
padding: 0 15px 10px;
- background-color: var(--background-color);
+ background-color: var(--color-surface-container-lowest);
z-index: 1000;
- font-size: 12px;
+ font-size: var(--text-body-small);
+ line-height: var(--text-body-small--line-height);
}
.btn-primary {
- background-color: var(--link-color);
- border-color: var(--link-color);
+ background-color: var(--color-primary);
+ border-color: var(--color-primary);
}
.btn-primary:hover {
- background-color: var(--btn-primary-hover);
- border-color: var(--btn-primary-hover);
+ background-color: var(--color-primary-hover);
+ border-color: var(--color-primary-hover);
}
.card {
height: 100%;
- background-color: var(--background-color);
- border-color: var(--color-gray-200);
- border-radius: 8px;
+ background-color: var(--color-surface-container-lowest);
+ border-color: var(--color-outline-primary);
+ border-radius: var(--radius-lg);
}
.card-wrapper .card-text {
min-height: 80px;
@@ -1279,22 +1136,24 @@ pre.pygments .tok-ss {
.content-wrapper .card-group > .card {
flex: 1 1 240px;
max-width: 100%;
- border: 1px solid var(--color-gray-200);
- border-radius: 8px;
+ border: 1px solid var(--color-outline-primary);
+ border-radius: var(--radius-lg);
}
.content-wrapper .card-group > .card + .card {
- border-left: 1px solid var(--color-gray-200);
+ border-left: 1px solid var(--color-outline-primary);
}
.content-wrapper .card-group .card-body {
padding: var(--space-3);
}
.content-wrapper .card-group .card-title {
- font-size: 16px;
- font-weight: 600;
+ font-size: var(--text-title-medium);
+ line-height: var(--text-title-medium--line-height);
+ font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-2);
}
.content-wrapper .card-group .btn {
- font-size: 13px;
+ font-size: var(--text-label-large);
+ line-height: var(--text-label-large--line-height);
padding: 6px 14px;
}
@@ -1303,36 +1162,36 @@ pre code {
}
pre.pygments span {
- font-weight: 400 !important;
- font-size: 13px;
- line-height: 21px;
+ font-weight: var(--font-weight-regular) !important;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
color: var(--snippet-body-color);
}
pre.pygments .tok-kd, pre.pygments .tok-kt, pre.pygments .tok-kc,
pre.pygments .tok-k, pre.pygments .tok-c1, .main .listingblock .tok-nt,
pre.pygments .tok-nv, pre.pygments .tok-nb, pre.pygments .tok-nn,
pre.pygments .tok-mf, pre.pygments .tok-cp, pre.pygments .tok-mi {
- color: #84ADFF !important;
+ color: var(--color-primary-200) !important;
}
pre.pygments .tok-n {
- color: #D0D5DD !important;
+ color: var(--color-neutral-200) !important;
}
pre.pygments .tok-mi, pre.pygments .tok-cp, pre.pygments .tok-m, pre.pygments .tok-mf {
- color: #9B8AFB !important;
+ color: var(--color-purple-300) !important;
}
pre.pygments .tok-nf, pre.pygments .tok-na, pre.pygments .tok-kn,
pre.pygments .tok-no, pre.pygments .tok-kp, pre.pygments .tok-cm, pre.pygments .tok-nc,
pre.pygments .tok-ch, pre.pygments .tok-nd {
- color: #6CE9A6 !important;
+ color: var(--color-success-200) !important;
}
pre.pygments .tok-se {
- color: #FDA29B !important;
+ color: var(--color-error-200) !important;
}
pre.pygments [data-lang="bash"] .tok-s2,
pre.pygments [data-lang="bash"] .tok-s1 {
- color: #FACC61 !important;
+ color: var(--color-warning-200) !important;
}
@media screen and (max-width: 1520px) {
@@ -1341,20 +1200,21 @@ pre.pygments [data-lang="bash"] .tok-s1 {
}
}
-.DocSearch-Modal, .DocSearch-Hit-source, .DocSearch-Hit a, .DocSearch-Footer {
- background-color: var(--background-color);
+/* Third-party DocSearch widget accent */
+body {
+ --docsearch-primary-color: var(--color-primary);
}
-.DocSearch-Hit a, .DocSearch-Footer, .DocSearch-Modal {
- box-shadow: var(--color);
+.DocSearch-Modal, .DocSearch-Hit-source, .DocSearch-Hit a, .DocSearch-Footer {
+ background-color: var(--color-surface-container-lowest);
}
.DocSearch-Form {
- background-color: var(--background-color);
+ background-color: var(--color-surface-container-lowest);
}
.DocSearch-Form .DocSearch-Input {
- color: var(--color);
+ color: var(--color-on-surface-secondary);
}
.DocSearch.DocSearch-Button {
@@ -1362,14 +1222,14 @@ pre.pygments [data-lang="bash"] .tok-s1 {
width: 100%;
height: 38px;
padding: 0 15px;
- background-color: var(--color-searchbar);
- border: 1px solid var(--color-base-white);
- box-shadow: 0 1px 2px #1018280D;
- border-radius: 6px;
- font-weight: 400;
- font-size: 14px;
- line-height: 20px;
- color: #6B7280;
+ background-color: var(--color-surface-container-low);
+ border: 1px solid var(--color-outline-secondary);
+ box-shadow: none;
+ border-radius: var(--radius-lg);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ font-weight: var(--text-body-medium--font-weight);
+ color: var(--color-on-surface-tertiary);
}
.search-form-wrapper .DocSearch-Button-Keys {
display: none;
@@ -1378,7 +1238,7 @@ pre.pygments [data-lang="bash"] .tok-s1 {
overflow-x: inherit !important;
}
.search-form-wrapper .DocSearch-Button .DocSearch-Search-Icon {
- color: #9CA3AF;
+ color: var(--color-on-surface-tertiary);
width: 20px;
height: 20px;
}
@@ -1405,9 +1265,9 @@ pre.pygments [data-lang="bash"] .tok-s1 {
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
- border-radius: 10px;
- background-color: var(--color-base-white);
- color: var(--color);
+ border-radius: var(--radius-md);
+ background-color: var(--color-outline-secondary);
+ color: var(--color-on-surface-secondary);
bottom: 40px;
left: 40px;
}
@@ -1418,8 +1278,8 @@ pre.pygments [data-lang="bash"] .tok-s1 {
height: 36px;
margin: -14px -18px 10px;
padding: 0 16px;
- border-top-left-radius: 12px;
- border-top-right-radius: 12px;
+ border-top-left-radius: var(--radius-xl);
+ border-top-right-radius: var(--radius-xl);
background-color: var(--snippet-header-bg);
color: var(--snippet-header-color) !important;
}
@@ -1430,7 +1290,8 @@ pre.pygments [data-lang="bash"] .tok-s1 {
.copy-icon p {
margin-bottom: 0;
color: var(--snippet-header-color) !important;
- font-size: var(--font-size-xs);
+ font-size: var(--text-label-medium);
+ line-height: var(--text-label-medium--line-height);
text-transform: uppercase;
letter-spacing: 0.05em;
}
@@ -1445,25 +1306,25 @@ pre.pygments [data-lang="bash"] .tok-s1 {
text-align: center;
}
.icon-warning {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='554.2' height='554.199' xml:space='preserve' fill='%23E44C3A'%3E%3Cpath d='M538.5 386.199 356.5 70.8a91.803 91.803 0 0 0-79.501-45.9c-32.8 0-63.1 17.5-79.5 45.9L12.3 391.6a91.793 91.793 0 0 0 0 91.8c16.4 28.4 46.7 45.9 79.5 45.9H462.4c50.7 0 91.8-41.101 91.8-91.8 0-19-5.8-36.7-15.7-51.301zm-222.2 30.7c0 21.7-16.7 38.3-39.2 38.3s-39.2-16.6-39.2-38.3V416c0-21.601 16.7-38.301 39.2-38.301S316.3 394.3 316.3 416v.899zm.9-258.199-19.4 169.4c-1.3 12.2-9.4 19.8-20.7 19.8s-19.4-7.7-20.7-19.8L237 158.6c-1.3-13.1 5.801-23 18-23h44.1c12.2.1 19.4 10 18.1 23.1z'/%3E%3C/svg%3E%0A");
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='554.2' height='554.199' xml:space='preserve' fill='%23F04438'%3E%3Cpath d='M538.5 386.199 356.5 70.8a91.803 91.803 0 0 0-79.501-45.9c-32.8 0-63.1 17.5-79.5 45.9L12.3 391.6a91.793 91.793 0 0 0 0 91.8c16.4 28.4 46.7 45.9 79.5 45.9H462.4c50.7 0 91.8-41.101 91.8-91.8 0-19-5.8-36.7-15.7-51.301zm-222.2 30.7c0 21.7-16.7 38.3-39.2 38.3s-39.2-16.6-39.2-38.3V416c0-21.601 16.7-38.301 39.2-38.301S316.3 394.3 316.3 416v.899zm.9-258.199-19.4 169.4c-1.3 12.2-9.4 19.8-20.7 19.8s-19.4-7.7-20.7-19.8L237 158.6c-1.3-13.1 5.801-23 18-23h44.1c12.2.1 19.4 10 18.1 23.1z'/%3E%3C/svg%3E%0A");
width: 40px;
height: 39px;
background-size: 100%;
}
.icon-important {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg transform='scale(.521)'%3E%3Ccircle cx='96' cy='96' r='74' fill='%23E44C3A'/%3E%3Cpath d='M86 48h20l-4 72H90z' fill='%23fff'/%3E%3Ccircle cx='96' cy='140' r='10' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg transform='scale(.521)'%3E%3Ccircle cx='96' cy='96' r='74' fill='%23F04438'/%3E%3Cpath d='M86 48h20l-4 72H90z' fill='%23FFFFFF'/%3E%3Ccircle cx='96' cy='140' r='10' fill='%23FFFFFF'/%3E%3C/g%3E%3C/svg%3E");
width: 40px;
height: 40px;
background-size: 100%;
}
.main .admonitionblock {
- background-color: var(--color-primary-50);
- border: 1px solid var(--color-primary-100);
+ background-color: var(--admon-note-bg);
+ border: 1px solid var(--admon-note-border);
border-left: 3px solid var(--admon-note-accent);
padding: var(--space-3);
margin-top: var(--space-3);
margin-bottom: var(--space-4);
- border-radius: 12px;
+ border-radius: var(--radius-xl);
}
/* Admonition type differentiation */
.main .admonitionblock.tip {
@@ -1502,7 +1363,7 @@ pre.pygments [data-lang="bash"] .tok-s1 {
all: unset;
}
.main .table-wrap .content {
- line-height: 1.5;
+ line-height: var(--text-body-medium--line-height);
width: 100%;
}
/*Light box start*/
@@ -1516,7 +1377,7 @@ pre.pygments [data-lang="bash"] .tok-s1 {
padding: 20px;
transform: translate(-50%, -50%);
z-index: 100;
- border-radius: 8px;
+ border-radius: var(--radius-lg);
max-width: 95vw;
width: 100%;
height: 90vh;
@@ -1546,20 +1407,20 @@ pre.pygments [data-lang="bash"] .tok-s1 {
top: -45px;
display: block;
width: 30px;
- font-size: 28px;
- border-radius: 8px;
+ font-size: var(--font-size-28);
+ border-radius: var(--radius-lg);
cursor: pointer;
- color: rgba(255, 255, 255, 0.8);
+ color: var(--color-neutral-0);
+ opacity: 0.8;
}
#close-ligtbox:hover {
- color: #fff;
+ opacity: 1;
}
@media (max-width: 1023px) {
#close-ligtbox {
right: 0;
top: -40px;
width: 24px;
- font-size: 28px;
}
}
.overlay {
@@ -1573,13 +1434,13 @@ pre.pygments [data-lang="bash"] .tok-s1 {
z-index: 99;
}
.paragraph {
- font-size: 15px;
- font-weight: 400;
+ font-size: var(--text-body-large);
+ font-weight: var(--text-body-large--font-weight);
margin-bottom: var(--space-3);
}
.imageblock .content {
- background-color: #ffff;
- border-radius: 16px;
+ background-color: var(--color-neutral-0);
+ border-radius: var(--radius-2xl);
margin-bottom: 10px;
}
.imageblock img, .paragraph .image img {
@@ -1596,8 +1457,8 @@ pre.pygments [data-lang="bash"] .tok-s1 {
}
.ulist li::marker {
- font-size: 20px;
- color: #6d7176;
+ font-size: var(--font-size-20);
+ color: var(--color-on-surface-tertiary);
}
.ulist li ul {
list-style-type: none;
@@ -1613,7 +1474,7 @@ pre.pygments [data-lang="bash"] .tok-s1 {
top: 9px;
width: 7px;
height: 7px;
- background-color: #6d7176;
+ background-color: var(--color-on-surface-tertiary);
border-radius: 50%;
}
.right-side-menu ul ul li:not(:last-child) {
@@ -1646,7 +1507,7 @@ pre.pygments [data-lang="bash"] .tok-s1 {
right: 0;
bottom: 0;
height: 18px;
- background-color: #D1E0FF;
+ background-color: var(--color-primary-50);
-webkit-transition: .4s;
transition: .4s;
}
@@ -1661,38 +1522,34 @@ pre.pygments [data-lang="bash"] .tok-s1 {
height: 30px;
width: 30px;
bottom: 4px;
- border: 1px solid #EAECF0;
+ border: 1px solid var(--color-outline-primary);
top: -5px;
- background-color: white;
+ background-color: var(--color-neutral-0);
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
- background-color: var(--link-color);
+ background-color: var(--color-primary);
}
input:focus + .slider {
- box-shadow: 0 0 1px var(--link-color);
-}
-
-input:focus + .slider {
- box-shadow: 0 0 1px var(--link-color);
+ box-shadow: 0 0 1px var(--color-primary);
}
input:checked + .slider:before {
-webkit-transform: translateX(15px);
-ms-transform: translateX(15px);
transform: translateX(15px);
- border: 1px solid #344054;
- background: url(images/toggle/dark.svg) no-repeat, var(--background-color);
+ border: 1px solid var(--color-neutral-600);
+ background: url(images/toggle/dark.svg) no-repeat, var(--color-neutral-600);
background-position-y: center;
background-position-x: center;
}
/* Rounded sliders */
.slider.round {
- border-radius: 34px;
+ border-radius: var(--radius-4xl);
}
.slider.round:before {
@@ -1708,7 +1565,7 @@ input:checked + .slider:before {
height: 16px;
margin-top: auto;
margin-bottom: auto;
- fill: var(--color);
+ fill: var(--color-on-surface-secondary);
}
.arrow-icon {
@@ -1732,7 +1589,7 @@ input:checked + .slider:before {
align-items: center;
min-width: calc(50% - 16px);
flex-wrap: wrap;
- border-radius: 12px;
+ border-radius: var(--radius-xl);
}
@media (max-width: 612px) {
.bottom-nav-links {
@@ -1747,46 +1604,46 @@ input:checked + .slider:before {
display: flex;
flex-direction: column;
justify-content: space-between;
- background-color: var(--background-color);
- border-color: var(--color-gray-200);
+ background-color: var(--color-surface-container-lowest);
+ border-color: var(--color-outline-primary);
transition: 0.2s ease-in-out;
}
.bottom-nav-links .bottom-nav-link:hover {
- border-color: var(--link-color);
+ border-color: var(--color-primary);
}
.bottom-nav-links .bottom-nav-link.prev {
margin-right: auto;
align-items: start;
- color: var(--color) !important;
+ color: var(--color-on-surface-secondary) !important;
}
.bottom-nav-links .bottom-nav-link.next {
margin-left: auto;
align-items: end;
- color: var(--color) !important;
+ color: var(--color-on-surface-secondary) !important;
}
.bottom-nav-links .bottom-nav-link.next .next-text{
margin-right: 6px;
- font-size: 14px;
- font-weight: 500;
+ font-size: var(--text-label-large);
+ font-weight: var(--text-label-large--font-weight);
}
.bottom-nav-links .bottom-nav-link.prev .prev-text {
margin-left: 6px;
- font-size: 14px;
- font-weight: 500;
+ font-size: var(--text-label-large);
+ font-weight: var(--text-label-large--font-weight);
}
.bottom-nav-links .bottom-nav-text {
- color: var(--link-color);
- font-weight: 400;
+ color: var(--color-primary);
+ font-weight: var(--font-weight-regular);
}
.hamburger {
- fill: var(--color);
+ fill: var(--color-on-surface-secondary);
rotate: 0deg;
}
@@ -1812,7 +1669,7 @@ input:checked + .slider:before {
}
.sidebar-toggler .hamburger path:is(:nth-child(2)) {
- fill: var(--color) !important;
+ fill: var(--color-on-surface-secondary) !important;
}
.sidebar-toggler .hamburger path:is(:nth-child(3)) {
@@ -1827,11 +1684,11 @@ input:checked + .slider:before {
}
.nav-link.external::after, .bottom-nav-text.external::after {
- content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.5 4.5L10.5 1.5M10.5 1.5H7.49999M10.5 1.5L6 6M5 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V7' stroke='%23ACAEBC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+ content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10.5 4.5L10.5 1.5M10.5 1.5H7.49999M10.5 1.5L6 6M5 1.5H3.9C3.05992 1.5 2.63988 1.5 2.31901 1.66349C2.03677 1.8073 1.8073 2.03677 1.66349 2.31901C1.5 2.63988 1.5 3.05992 1.5 3.9V8.1C1.5 8.94008 1.5 9.36012 1.66349 9.68099C1.8073 9.96323 2.03677 10.1927 2.31901 10.3365C2.63988 10.5 3.05992 10.5 3.9 10.5H8.1C8.94008 10.5 9.36012 10.5 9.68099 10.3365C9.96323 10.1927 10.1927 9.96323 10.3365 9.68099C10.5 9.36012 10.5 8.94008 10.5 8.1V7' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
padding-left: 3px;
}
.loader-wrapper {
- background-color: #fff;
+ background-color: var(--color-surface-container-lowest);
position: absolute;
top: 0;
bottom: 0;
@@ -1844,9 +1701,9 @@ input:checked + .slider:before {
display: inline-block;
width: 50px;
height: 50px;
- border: 5px solid var(--link-color);
+ border: 5px solid var(--color-primary);
border-radius: 50%;
- border-top-color: #fff;
+ border-top-color: var(--color-surface-container-lowest);
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
position: fixed;
@@ -1893,22 +1750,22 @@ span.dot {
align-items: center;
margin-left: 8px;
padding: 1px 7px;
- font-size: 10px;
- font-weight: 600;
+ font-size: var(--text-label-small);
+ font-weight: var(--font-weight-semibold);
letter-spacing: 0.03em;
- line-height: 18px;
- color: #6D28D9;
- background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
- border: 1px solid #C4B5FD;
- border-radius: 4px;
+ line-height: var(--line-height-16);
+ color: var(--color-on-purple-container);
+ background: linear-gradient(135deg, var(--color-purple-50), var(--color-purple-container));
+ border: 1px solid var(--color-purple-200);
+ border-radius: var(--radius-sm);
white-space: nowrap;
vertical-align: middle;
text-transform: uppercase;
}
[data-theme="dark"] .badge-premium {
- color: #C4B5FD;
- background: linear-gradient(135deg, #2E1065, #3B1A8E);
- border-color: #5B21B6;
+ color: var(--color-purple-200);
+ background: linear-gradient(135deg, var(--color-purple-800), var(--color-purple-700));
+ border-color: var(--color-purple-600);
}
/* ========================================
@@ -1922,19 +1779,19 @@ span.dot {
/* Hero */
.landing-hero {
padding: var(--space-5) 0 var(--space-6);
- border-bottom: 1px solid var(--color-gray-200);
+ border-bottom: 1px solid var(--color-outline-primary);
}
.landing-hero-subtitle {
- font-size: 17px;
- font-weight: 500;
- color: var(--link-color);
+ font-size: var(--text-title-medium);
+ line-height: var(--text-title-medium--line-height);
+ font-weight: var(--text-title-medium--font-weight);
+ color: var(--color-primary);
margin-bottom: var(--space-2);
- letter-spacing: -0.01em;
}
.landing-hero-desc {
- font-size: 16px;
- line-height: 1.6;
- color: var(--color);
+ font-size: var(--text-body-large);
+ line-height: var(--text-body-large--line-height);
+ color: var(--color-on-surface-secondary);
max-width: 600px;
margin-bottom: var(--space-4);
}
@@ -1945,21 +1802,22 @@ span.dot {
}
.landing-btn {
padding: 10px 24px;
- font-size: 14px;
- font-weight: 500;
- border-radius: 8px;
+ font-size: var(--text-label-large);
+ line-height: var(--text-label-large--line-height);
+ font-weight: var(--text-label-large--font-weight);
+ border-radius: var(--radius-lg);
text-decoration: none !important;
transition: background-color 0.15s, border-color 0.15s;
}
.landing-btn-outline {
background-color: transparent;
- color: var(--color) !important;
- border: 1px solid var(--color-gray-200);
+ color: var(--color-on-surface-secondary) !important;
+ border: 1px solid var(--color-outline-primary);
}
.landing-btn-outline:hover {
- background-color: var(--color-gray-50);
- border-color: var(--color-base-white);
- color: var(--color) !important;
+ background-color: var(--color-surface-container-low);
+ border-color: var(--color-outline-secondary);
+ color: var(--color-on-surface-secondary) !important;
}
/* Section headings */
@@ -1967,11 +1825,11 @@ span.dot {
padding: var(--space-6) 0 0;
}
.landing-section-title {
- font-size: 20px;
- font-weight: 600;
- color: var(--heading-color);
+ font-size: var(--text-title-large);
+ line-height: var(--text-title-large--line-height);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-on-surface-primary);
margin-bottom: var(--space-4);
- letter-spacing: -0.01em;
}
/* Card grid */
@@ -2001,17 +1859,17 @@ span.dot {
.landing-card {
display: block;
padding: 20px;
- border: 1px solid var(--color-gray-200);
- border-radius: 10px;
- background-color: var(--background-color);
+ border: 1px solid var(--color-outline-primary);
+ border-radius: var(--radius-xl);
+ background-color: var(--color-surface-container-lowest);
text-decoration: none !important;
- color: var(--color) !important;
+ color: var(--color-on-surface-secondary) !important;
transition: border-color 0.15s, box-shadow 0.15s;
}
.landing-card:hover {
- border-color: var(--link-color);
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
- color: var(--color) !important;
+ border-color: var(--color-primary);
+ box-shadow: var(--shadow-sm);
+ color: var(--color-on-surface-secondary) !important;
}
.landing-card-icon {
width: 40px;
@@ -2019,9 +1877,9 @@ span.dot {
display: flex;
align-items: center;
justify-content: center;
- border-radius: 8px;
- background-color: var(--color-primary-50);
- color: var(--link-color);
+ border-radius: var(--radius-lg);
+ background-color: var(--color-primary-25);
+ color: var(--color-primary);
margin-bottom: 14px;
}
.landing-card-icon svg {
@@ -2029,30 +1887,30 @@ span.dot {
height: 20px;
}
.landing-card-title {
- font-size: 15px;
- font-weight: 600;
- color: var(--heading-color);
+ font-size: var(--text-title-medium);
+ line-height: var(--text-title-medium--line-height);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-on-surface-primary);
margin-bottom: 6px;
- line-height: 1.3;
}
.landing-card-desc {
- font-size: 13.5px;
- line-height: 1.55;
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-on-surface-secondary);
margin-bottom: 0;
}
/* Premium variant */
.landing-card-premium {
- border-color: #C4B5FD;
- background: linear-gradient(180deg, var(--background-color) 60%, #FAF5FF);
+ border-color: var(--color-purple-200);
+ background: linear-gradient(180deg, var(--color-surface-container-lowest) 60%, var(--color-purple-25));
}
[data-theme="dark"] .landing-card-premium {
- border-color: #5B21B6;
- background: linear-gradient(180deg, var(--background-color) 60%, #1E0A3C);
+ border-color: var(--color-purple-600);
+ background: linear-gradient(180deg, var(--color-surface-container-lowest) 60%, var(--color-purple-800));
}
.landing-card-premium:hover {
- border-color: #8B5CF6;
+ border-color: var(--color-purple-400);
}
.landing-card-header {
display: flex;
@@ -2072,10 +1930,10 @@ span.dot {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
- border: 1px solid var(--color-gray-200);
- border-radius: 10px;
+ border: 1px solid var(--color-outline-primary);
+ border-radius: var(--radius-xl);
overflow: hidden;
- background-color: var(--background-color);
+ background-color: var(--color-surface-container-lowest);
}
@media (max-width: 768px) {
.landing-links-grid {
@@ -2091,25 +1949,26 @@ span.dot {
display: flex;
align-items: center;
padding: 14px 18px;
- font-size: 14px;
- font-weight: 400;
- color: var(--color) !important;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ font-weight: var(--text-body-medium--font-weight);
+ color: var(--color-on-surface-secondary) !important;
text-decoration: none !important;
- border-bottom: 1px solid var(--color-gray-200);
- border-right: 1px solid var(--color-gray-200);
+ border-bottom: 1px solid var(--color-outline-primary);
+ border-right: 1px solid var(--color-outline-primary);
transition: background-color 0.15s, color 0.15s;
}
.landing-link:hover {
- background-color: var(--color-gray-50);
- color: var(--link-color) !important;
+ background-color: var(--color-surface-container-low);
+ color: var(--color-primary) !important;
}
.landing-link::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
- border-right: 1.5px solid var(--link-color);
- border-top: 1.5px solid var(--link-color);
+ border-right: 1.5px solid var(--color-primary);
+ border-top: 1.5px solid var(--color-primary);
transform: rotate(45deg);
margin-right: 10px;
flex-shrink: 0;
@@ -2121,16 +1980,20 @@ span.dot {
@media (max-width: 480px) {
h1 {
- font-size: 32px;
+ font-size: var(--text-headline-large);
+ line-height: var(--text-headline-large--line-height);
}
h2 {
- font-size: 24px;
+ font-size: var(--text-headline-small);
+ line-height: var(--text-headline-small--line-height);
}
h3 {
- font-size: 20px;
+ font-size: var(--text-title-large);
+ line-height: var(--text-title-large--line-height);
}
h4 {
- font-size: 16px;
+ font-size: var(--text-title-medium);
+ line-height: var(--text-title-medium--line-height);
}
.content-wrapper {
padding: var(--space-3) !important;
@@ -2162,13 +2025,14 @@ span.dot {
display: inline-flex;
align-items: center;
padding: 4px 12px;
- font-size: var(--font-size-xs);
- font-weight: 500;
+ font-size: var(--text-label-medium);
+ line-height: var(--text-label-medium--line-height);
+ font-weight: var(--text-label-medium--font-weight);
letter-spacing: 0.02em;
- color: var(--primary-color);
- background: var(--color-primary-50);
- border: 1px solid var(--color-primary-100);
- border-radius: 100px;
+ color: var(--color-primary);
+ background: var(--color-primary-25);
+ border: 1px solid var(--color-primary-50);
+ border-radius: var(--radius-4xl);
}
/* ========================================
@@ -2181,34 +2045,35 @@ span.dot {
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-5);
- border: 1px solid #C4B5FD;
- border-radius: 12px;
- background: linear-gradient(90deg, var(--background-color) 60%, #FAF5FF);
- font-size: var(--font-size-sm);
- line-height: 1.5;
+ border: 1px solid var(--color-purple-200);
+ border-radius: var(--radius-xl);
+ background: linear-gradient(90deg, var(--color-surface-container-lowest) 60%, var(--color-purple-25));
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
}
.premium-notice-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
- font-size: var(--font-size-xs);
- font-weight: 600;
+ font-size: var(--text-label-medium);
+ line-height: var(--text-label-medium--line-height);
+ font-weight: var(--font-weight-semibold);
letter-spacing: 0.03em;
text-transform: uppercase;
- color: #7C3AED;
- background: #EDE9FE;
- border-radius: 100px;
+ color: var(--color-purple-500);
+ background: var(--color-purple-50);
+ border-radius: var(--radius-4xl);
white-space: nowrap;
}
.premium-notice-text {
- color: var(--color);
+ color: var(--color-on-surface-secondary);
}
.premium-notice-text a {
- color: var(--primary-color);
- font-weight: 500;
+ color: var(--color-primary);
+ font-weight: var(--font-weight-medium);
text-decoration: none;
}
@@ -2217,13 +2082,13 @@ span.dot {
}
[data-theme="dark"] .premium-notice {
- border-color: #5B21B6;
- background: linear-gradient(90deg, var(--background-color) 60%, #1E0A3C);
+ border-color: var(--color-purple-600);
+ background: linear-gradient(90deg, var(--color-surface-container-lowest) 60%, var(--color-purple-800));
}
[data-theme="dark"] .premium-notice-badge {
- color: #C4B5FD;
- background: #2E1065;
+ color: var(--color-purple-200);
+ background: var(--color-purple-800);
}
/* ========================================
@@ -2236,11 +2101,11 @@ span.dot {
gap: var(--space-2);
padding: var(--space-4);
margin-bottom: var(--space-5);
- border: 1px solid #F59E0B;
- border-radius: 12px;
- background: linear-gradient(135deg, var(--background-color) 50%, #FFFBEB);
- font-size: var(--font-size-sm);
- line-height: 1.5;
+ border: 1px solid var(--color-warning-400);
+ border-radius: var(--radius-xl);
+ background: linear-gradient(135deg, var(--color-surface-container-lowest) 50%, var(--color-warning-25));
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
}
.insider-preview-header {
display: flex;
@@ -2252,14 +2117,15 @@ span.dot {
align-items: center;
gap: 6px;
padding: 3px 12px;
- font-size: var(--font-size-xs);
- font-weight: 600;
+ font-size: var(--text-label-medium);
+ line-height: var(--text-label-medium--line-height);
+ font-weight: var(--font-weight-semibold);
letter-spacing: 0.04em;
text-transform: uppercase;
- color: #92400E;
- background: linear-gradient(135deg, #FEF3C7, #FDE68A);
- border: 1px solid #FCD34D;
- border-radius: 100px;
+ color: var(--color-on-warning-container);
+ background: linear-gradient(135deg, var(--color-warning-50), var(--color-warning-container));
+ border: 1px solid var(--color-warning-200);
+ border-radius: var(--radius-4xl);
white-space: nowrap;
}
.insider-preview-body {
@@ -2270,12 +2136,12 @@ span.dot {
}
.insider-preview-text {
flex: 1;
- color: var(--color);
+ color: var(--color-on-surface-secondary);
min-width: 200px;
}
.insider-preview-text a {
- color: var(--primary-color);
- font-weight: 500;
+ color: var(--color-primary);
+ font-weight: var(--font-weight-medium);
text-decoration: none;
}
.insider-preview-text a:hover {
@@ -2285,40 +2151,41 @@ span.dot {
display: inline-flex;
align-items: center;
padding: 8px 20px;
- font-size: 13px;
- font-weight: 600;
- color: #92400E !important;
- background: linear-gradient(135deg, #FDE68A, #FCD34D);
- border: 1px solid #F59E0B;
- border-radius: 8px;
+ font-size: var(--text-label-large-emphasis);
+ line-height: var(--text-label-large-emphasis--line-height);
+ font-weight: var(--text-label-large-emphasis--font-weight);
+ color: var(--color-on-warning-container) !important;
+ background: linear-gradient(135deg, var(--color-warning-100), var(--color-warning-200));
+ border: 1px solid var(--color-warning-400);
+ border-radius: var(--radius-lg);
text-decoration: none !important;
white-space: nowrap;
transition: background 0.15s, box-shadow 0.15s;
}
.insider-preview-cta:hover {
- background: linear-gradient(135deg, #FCD34D, #FBBF24);
- box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
- color: #78350F !important;
+ background: linear-gradient(135deg, var(--color-warning-200), var(--color-warning-300));
+ box-shadow: var(--shadow-sm);
+ color: var(--color-warning-800) !important;
}
[data-theme="dark"] .insider-preview-notice {
- border-color: #B45309;
- background: linear-gradient(135deg, var(--background-color) 50%, #1C1107);
+ border-color: var(--color-warning-600);
+ background: linear-gradient(135deg, var(--color-surface-container-lowest) 50%, var(--color-warning-800));
}
[data-theme="dark"] .insider-preview-badge {
- color: #FDE68A;
- background: linear-gradient(135deg, #451A03, #78350F);
- border-color: #B45309;
+ color: var(--color-warning-100);
+ background: linear-gradient(135deg, var(--color-warning-800), var(--color-warning-700));
+ border-color: var(--color-warning-600);
}
[data-theme="dark"] .insider-preview-cta {
- color: #FEF3C7 !important;
- background: linear-gradient(135deg, #78350F, #92400E);
- border-color: #B45309;
+ color: var(--color-warning-50) !important;
+ background: linear-gradient(135deg, var(--color-warning-800), var(--color-warning-700));
+ border-color: var(--color-warning-600);
}
[data-theme="dark"] .insider-preview-cta:hover {
- background: linear-gradient(135deg, #92400E, #B45309);
- box-shadow: 0 2px 8px rgba(180, 83, 9, 0.4);
- color: #FEF3C7 !important;
+ background: linear-gradient(135deg, var(--color-warning-700), var(--color-warning-600));
+ box-shadow: var(--shadow-sm);
+ color: var(--color-warning-50) !important;
}
/* ========================================
@@ -2326,9 +2193,9 @@ span.dot {
======================================== */
.preview-features-section {
- border: 1px solid #F59E0B;
- border-radius: 14px;
- background: linear-gradient(135deg, var(--background-color) 40%, #FFFBEB);
+ border: 1px solid var(--color-warning-400);
+ border-radius: var(--radius-xl);
+ background: linear-gradient(135deg, var(--color-surface-container-lowest) 40%, var(--color-warning-25));
padding: var(--space-5);
margin-bottom: var(--space-6);
}
@@ -2339,16 +2206,16 @@ span.dot {
margin-bottom: var(--space-2);
}
.preview-features-title {
- font-size: 18px;
- font-weight: 700;
- color: var(--heading-color);
- letter-spacing: -0.01em;
+ font-size: var(--text-title-large);
+ line-height: var(--text-title-large--line-height);
+ font-weight: var(--font-weight-semibold);
+ color: var(--color-on-surface-primary);
}
.preview-features-intro {
- font-size: var(--font-size-sm);
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-on-surface-secondary);
margin-bottom: var(--space-4);
- line-height: 1.5;
}
.preview-features-grid {
display: grid;
@@ -2366,32 +2233,33 @@ span.dot {
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
- border-radius: 10px;
- background: rgba(255, 255, 255, 0.6);
- border: 1px solid rgba(245, 158, 11, 0.2);
+ border-radius: var(--radius-xl);
+ background: var(--color-surface-container-lowest);
+ border: 1px solid var(--color-warning-50);
transition: border-color 0.15s, box-shadow 0.15s;
}
.preview-feature-card:hover {
- border-color: rgba(245, 158, 11, 0.45);
- box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
+ border-color: var(--color-warning-100);
+ box-shadow: var(--shadow-sm);
}
.preview-feature-icon {
- font-size: 20px;
- line-height: 1;
+ font-size: var(--font-size-20);
+ line-height: var(--line-height-20);
flex-shrink: 0;
margin-top: 2px;
}
.preview-feature-card strong {
display: block;
- font-size: var(--font-size-sm);
- font-weight: 600;
- color: var(--heading-color);
+ font-size: var(--text-label-large-emphasis);
+ line-height: var(--text-label-large-emphasis--line-height);
+ font-weight: var(--text-label-large-emphasis--font-weight);
+ color: var(--color-on-surface-primary);
margin-bottom: 2px;
}
.preview-feature-card span {
- font-size: 13px;
- line-height: 1.45;
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-on-surface-secondary);
}
.preview-features-footer {
display: flex;
@@ -2399,17 +2267,18 @@ span.dot {
gap: var(--space-4);
flex-wrap: wrap;
padding-top: var(--space-3);
- border-top: 1px solid rgba(245, 158, 11, 0.25);
+ border-top: 1px solid var(--color-warning-50);
}
.preview-features-footer > span {
flex: 1;
- font-size: var(--font-size-sm);
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-on-surface-secondary);
min-width: 200px;
}
.preview-features-footer a:not(.insider-preview-cta) {
- color: var(--primary-color);
- font-weight: 500;
+ color: var(--color-primary);
+ font-weight: var(--font-weight-medium);
text-decoration: none;
}
.preview-features-footer a:not(.insider-preview-cta):hover {
@@ -2418,19 +2287,17 @@ span.dot {
/* Dark mode */
[data-theme="dark"] .preview-features-section {
- border-color: #B45309;
- background: linear-gradient(135deg, var(--background-color) 40%, #1C1107);
+ border-color: var(--color-warning-600);
+ background: linear-gradient(135deg, var(--color-surface-container-lowest) 40%, var(--color-warning-800));
}
[data-theme="dark"] .preview-feature-card {
- background: rgba(28, 17, 7, 0.5);
- border-color: rgba(180, 83, 9, 0.25);
+ border-color: var(--color-warning-800);
}
[data-theme="dark"] .preview-feature-card:hover {
- border-color: rgba(180, 83, 9, 0.5);
- box-shadow: 0 2px 8px rgba(180, 83, 9, 0.12);
+ border-color: var(--color-warning-700);
}
[data-theme="dark"] .preview-features-footer {
- border-top-color: rgba(180, 83, 9, 0.3);
+ border-top-color: var(--color-warning-800);
}
/* ========================================
@@ -2443,17 +2310,18 @@ span.dot {
gap: 8px;
padding: 14px 16px 6px;
margin-top: 6px;
- border-top: 1px solid var(--color-gray-200);
+ border-top: 1px solid var(--color-outline-primary);
}
.sidebar-divider-label {
display: inline-flex;
align-items: center;
gap: 5px;
- font-size: 10px;
- font-weight: 700;
+ font-size: var(--text-label-small);
+ line-height: var(--text-label-small--line-height);
+ font-weight: var(--font-weight-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
- color: #B45309;
+ color: var(--color-warning-600);
white-space: nowrap;
}
.sidebar-divider-label svg {
@@ -2462,10 +2330,7 @@ span.dot {
flex-shrink: 0;
}
[data-theme="dark"] .sidebar-divider-label {
- color: #FBBF24;
-}
-[data-theme="dark"] .sidebar-divider {
- border-top-color: var(--color-gray-200);
+ color: var(--color-warning-300);
}
.badge-insider {
@@ -2473,22 +2338,22 @@ span.dot {
align-items: center;
margin-left: 8px;
padding: 1px 7px;
- font-size: 10px;
- font-weight: 600;
+ font-size: var(--text-label-small);
+ font-weight: var(--font-weight-semibold);
letter-spacing: 0.03em;
- line-height: 18px;
- color: #92400E;
- background: linear-gradient(135deg, #FEF3C7, #FDE68A);
- border: 1px solid #FCD34D;
- border-radius: 4px;
+ line-height: var(--line-height-16);
+ color: var(--color-on-warning-container);
+ background: linear-gradient(135deg, var(--color-warning-50), var(--color-warning-container));
+ border: 1px solid var(--color-warning-200);
+ border-radius: var(--radius-sm);
white-space: nowrap;
vertical-align: middle;
text-transform: uppercase;
}
[data-theme="dark"] .badge-insider {
- color: #FDE68A;
- background: linear-gradient(135deg, #451A03, #78350F);
- border-color: #B45309;
+ color: var(--color-warning-100);
+ background: linear-gradient(135deg, var(--color-warning-800), var(--color-warning-700));
+ border-color: var(--color-warning-600);
}
/* Insider links: locked state in sidebar */
@@ -2502,14 +2367,14 @@ span.dot {
width: 10px;
height: 10px;
margin-left: 6px;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B54708' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
flex-shrink: 0;
}
[data-theme="dark"] .insider-locked::after {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBBF24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FDB022' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
/* ========================================
@@ -2528,14 +2393,14 @@ span.dot {
-webkit-backdrop-filter: blur(6px);
}
.insider-gate-modal {
- background: var(--background-color);
- border: 1px solid var(--color-gray-200);
- border-radius: 16px;
+ background: var(--color-surface-container-lowest);
+ border: 1px solid var(--color-outline-primary);
+ border-radius: var(--radius-2xl);
padding: 48px 40px;
max-width: 440px;
width: 90%;
text-align: center;
- box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
+ box-shadow: var(--shadow-lg);
animation: insiderGateIn 0.3s ease;
}
@keyframes insiderGateIn {
@@ -2549,26 +2414,26 @@ span.dot {
display: flex;
align-items: center;
justify-content: center;
- background: linear-gradient(135deg, #FEF3C7, #FDE68A);
- border-radius: 14px;
- border: 1px solid #FCD34D;
+ background: linear-gradient(135deg, var(--color-warning-50), var(--color-warning-container));
+ border-radius: var(--radius-xl);
+ border: 1px solid var(--color-warning-200);
}
.insider-gate-icon svg {
width: 28px;
height: 28px;
- color: #92400E;
+ color: var(--color-on-warning-container);
}
.insider-gate-title {
- font-size: 22px;
- font-weight: 700;
- color: var(--heading-color);
+ font-size: var(--text-headline-small);
+ line-height: var(--text-headline-small--line-height);
+ font-weight: var(--text-headline-small--font-weight);
+ color: var(--color-on-surface-primary);
margin-bottom: 8px;
- letter-spacing: -0.01em;
}
.insider-gate-subtitle {
- font-size: 14px;
- line-height: 1.6;
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-on-surface-secondary);
margin-bottom: 28px;
}
.insider-gate-input-group {
@@ -2579,22 +2444,23 @@ span.dot {
.insider-gate-input {
flex: 1;
padding: 10px 16px;
- font-size: 14px;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
font-family: inherit;
- color: var(--color);
- background: var(--background-color);
- border: 1px solid var(--color-gray-200);
- border-radius: 8px;
+ color: var(--color-on-surface-secondary);
+ background: var(--color-surface-container-lowest);
+ border: 1px solid var(--color-outline-primary);
+ border-radius: var(--radius-lg);
outline: none;
transition: border-color 0.15s;
}
.insider-gate-input:focus {
- border-color: #F59E0B;
- box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
+ border-color: var(--color-warning-400);
+ box-shadow: 0 0 0 3px var(--color-warning-50);
}
.insider-gate-input.error {
- border-color: #EF4444;
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+ border-color: var(--color-error);
+ box-shadow: 0 0 0 3px var(--color-error-50);
animation: insiderShake 0.4s ease;
}
@keyframes insiderShake {
@@ -2606,33 +2472,36 @@ span.dot {
}
.insider-gate-btn {
padding: 10px 20px;
- font-size: 14px;
- font-weight: 600;
+ font-size: var(--text-label-large-emphasis);
+ line-height: var(--text-label-large-emphasis--line-height);
+ font-weight: var(--text-label-large-emphasis--font-weight);
font-family: inherit;
- color: #92400E;
- background: linear-gradient(135deg, #FDE68A, #FCD34D);
- border: 1px solid #F59E0B;
- border-radius: 8px;
+ color: var(--color-on-warning-container);
+ background: linear-gradient(135deg, var(--color-warning-100), var(--color-warning-200));
+ border: 1px solid var(--color-warning-400);
+ border-radius: var(--radius-lg);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, box-shadow 0.15s;
}
.insider-gate-btn:hover {
- background: linear-gradient(135deg, #FCD34D, #FBBF24);
- box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
+ background: linear-gradient(135deg, var(--color-warning-200), var(--color-warning-300));
+ box-shadow: var(--shadow-sm);
}
.insider-gate-error {
- font-size: 13px;
- color: #EF4444;
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-error);
min-height: 20px;
margin-bottom: 16px;
}
.insider-gate-back {
- font-size: 13px;
- color: var(--color);
+ font-size: var(--text-body-medium);
+ line-height: var(--text-body-medium--line-height);
+ color: var(--color-on-surface-secondary);
}
.insider-gate-back a {
- color: var(--primary-color);
+ color: var(--color-primary);
text-decoration: none;
}
.insider-gate-back a:hover {
@@ -2640,19 +2509,19 @@ span.dot {
}
[data-theme="dark"] .insider-gate-icon {
- background: linear-gradient(135deg, #451A03, #78350F);
- border-color: #B45309;
+ background: linear-gradient(135deg, var(--color-warning-800), var(--color-warning-700));
+ border-color: var(--color-warning-600);
}
[data-theme="dark"] .insider-gate-icon svg {
- color: #FDE68A;
+ color: var(--color-warning-100);
}
[data-theme="dark"] .insider-gate-btn {
- color: #FEF3C7;
- background: linear-gradient(135deg, #78350F, #92400E);
- border-color: #B45309;
+ color: var(--color-warning-50);
+ background: linear-gradient(135deg, var(--color-warning-800), var(--color-warning-700));
+ border-color: var(--color-warning-600);
}
[data-theme="dark"] .insider-gate-btn:hover {
- background: linear-gradient(135deg, #92400E, #B45309);
+ background: linear-gradient(135deg, var(--color-warning-700), var(--color-warning-600));
}
/* ========================================
@@ -2660,10 +2529,10 @@ span.dot {
======================================== */
.prerequisites {
- background: var(--color-gray-50);
- border: 1px solid var(--color-gray-200);
- border-left: 3px solid var(--primary-color);
- border-radius: 12px;
+ background: var(--color-surface-container-low);
+ border: 1px solid var(--color-outline-primary);
+ border-left: 3px solid var(--color-primary);
+ border-radius: var(--radius-xl);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
}
@@ -2671,16 +2540,33 @@ span.dot {
.prerequisites::before {
content: "Prerequisites";
display: block;
- font-weight: 600;
- font-size: var(--font-size-sm);
+ font-size: var(--text-label-large-emphasis);
+ line-height: var(--text-label-large-emphasis--line-height);
+ font-weight: var(--text-label-large-emphasis--font-weight);
text-transform: uppercase;
letter-spacing: 0.03em;
- color: var(--heading-color);
+ color: var(--color-on-surface-primary);
margin-bottom: var(--space-2);
}
[data-theme="dark"] .prerequisites {
- background: var(--color-gray-100);
+ background: var(--color-surface-container);
+}
+
+/* ========================================
+ Dark-theme tints with no semantic token equivalent
+ ======================================== */
+
+[data-theme="dark"] .main .sidebar-nav a.nav-link:hover,
+[data-theme="dark"] .main .sidebar-nav .list-item-active a,
+[data-theme="dark"] .main ol.arabic > li::before,
+[data-theme="dark"] .landing-card-icon {
+ background-color: var(--color-surface-container);
+}
+
+[data-theme="dark"] .landing-badge {
+ background: var(--color-surface-container);
+ border-color: var(--color-neutral-600);
}
/* ========================================
@@ -2717,41 +2603,42 @@ span.dot {
max-width: 100%;
}
+ /* Print is always light: use primitives, which dark mode never remaps */
body {
- color: #000;
- background: #fff !important;
+ color: var(--color-neutral-900);
+ background: var(--color-neutral-0) !important;
font-size: 12pt;
line-height: 1.5;
}
a {
- color: #000;
+ color: var(--color-neutral-900);
text-decoration: underline;
}
.main .listingblock,
.literalblock > .content pre {
- border: 1px solid #ccc;
- background: #f5f5f5 !important;
- color: #333 !important;
+ border: 1px solid var(--color-neutral-200);
+ background: var(--color-neutral-50) !important;
+ color: var(--color-neutral-700) !important;
color-scheme: light;
}
.main .listingblock .content pre {
- color: #333 !important;
+ color: var(--color-neutral-700) !important;
}
pre.pygments span {
- color: #333 !important;
+ color: var(--color-neutral-700) !important;
}
.main .admonitionblock {
- border: 1px solid #ccc;
- background: #f9f9f9;
+ border: 1px solid var(--color-neutral-200);
+ background: var(--color-neutral-25);
}
.main .table-wrap {
- border: 1px solid #ccc;
+ border: 1px solid var(--color-neutral-200);
}
.main img {
diff --git a/stylesheets/tokens.css b/stylesheets/tokens.css
new file mode 100644
index 000000000..2482f2653
--- /dev/null
+++ b/stylesheets/tokens.css
@@ -0,0 +1,334 @@
+/* Kill Bill design tokens.
+ Mirrors the aviate-admin design system (src/assets/main.css @theme) and the
+ slate API docs port (source/stylesheets/_variables.scss). Radius and shadow
+ scales are the Tailwind v4 defaults aviate-admin relies on. */
+
+@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";
+
+:root {
+ /* ==========================================================================
+ Primitives (raw color palettes)
+ ========================================================================== */
+
+ /* neutral */
+ --color-neutral-0: #ffffff;
+ --color-neutral-25: #f9fafb;
+ --color-neutral-50: #f2f4f7;
+ --color-neutral-100: #e8e9eb;
+ --color-neutral-200: #d0d5dd;
+ --color-neutral-300: #98a2b3;
+ --color-neutral-400: #667085;
+ --color-neutral-500: #475467;
+ --color-neutral-600: #344054;
+ --color-neutral-700: #1d2939;
+ --color-neutral-800: #101828;
+ --color-neutral-900: #0b0d12;
+
+ /* primary */
+ --color-primary-25: #eff4ff;
+ --color-primary-50: #d1e0ff;
+ --color-primary-100: #b2ccff;
+ --color-primary-200: #84adff;
+ --color-primary-300: #528bff;
+ --color-primary-400: #2970ff;
+ --color-primary-500: #155eef;
+ --color-primary-600: #0040c1;
+ --color-primary-700: #00359e;
+ --color-primary-800: #0e2555;
+
+ /* error */
+ --color-error-25: #fef3f2;
+ --color-error-50: #fee4e2;
+ --color-error-100: #fecdca;
+ --color-error-200: #fda29b;
+ --color-error-300: #f97066;
+ --color-error-400: #f04438;
+ --color-error-500: #d92d20;
+ --color-error-600: #b42318;
+ --color-error-700: #912018;
+ --color-error-800: #7a271a;
+
+ /* warning */
+ --color-warning-25: #fffaeb;
+ --color-warning-50: #fef0c7;
+ --color-warning-100: #fedf89;
+ --color-warning-200: #fec84b;
+ --color-warning-300: #fdb022;
+ --color-warning-400: #f79009;
+ --color-warning-500: #dc6803;
+ --color-warning-600: #b54708;
+ --color-warning-700: #93370d;
+ --color-warning-800: #7a2e0e;
+
+ /* success */
+ --color-success-25: #ecfdf3;
+ --color-success-50: #d1fadf;
+ --color-success-100: #a6f4c5;
+ --color-success-200: #6ce9a6;
+ --color-success-300: #32d583;
+ --color-success-400: #12b76a;
+ --color-success-500: #039855;
+ --color-success-600: #027a48;
+ --color-success-700: #05603a;
+ --color-success-800: #054f31;
+
+ /* purple */
+ --color-purple-25: #f4f3ff;
+ --color-purple-50: #ebe9fe;
+ --color-purple-100: #d9d6fe;
+ --color-purple-200: #bdb4fe;
+ --color-purple-300: #9b8afb;
+ --color-purple-400: #7a5af8;
+ --color-purple-500: #6938ef;
+ --color-purple-600: #4a1fb8;
+ --color-purple-700: #3e1c96;
+ --color-purple-800: #181232;
+
+ /* ==========================================================================
+ Semantic tokens (each references a primitive)
+ ========================================================================== */
+
+ /* primary */
+ --color-primary: var(--color-primary-500);
+ --color-primary-hover: var(--color-primary-600);
+ --color-primary-pressed: var(--color-primary-400);
+ --color-on-primary: var(--color-neutral-0);
+
+ /* surface */
+ --color-surface-container-lowest: var(--color-neutral-0);
+ --color-surface-container-low: var(--color-neutral-25);
+ --color-surface-container: var(--color-neutral-50);
+ --color-surface-container-high: var(--color-neutral-100);
+
+ /* on surface */
+ --color-on-surface-primary: var(--color-neutral-900);
+ --color-on-surface-secondary: var(--color-neutral-500);
+ --color-on-surface-tertiary: var(--color-neutral-400);
+ --color-on-surface-quaternary: var(--color-neutral-300);
+
+ /* outline */
+ --color-outline-primary: var(--color-neutral-100);
+ --color-outline-secondary: var(--color-neutral-200);
+ --color-outline-tertiary: var(--color-neutral-300);
+
+ /* error */
+ --color-error: var(--color-error-500);
+ --color-error-hover: var(--color-error-600);
+ --color-error-pressed: var(--color-error-400);
+ --color-on-error: var(--color-neutral-0);
+
+ /* warning */
+ --color-warning: var(--color-warning-500);
+ --color-warning-hover: var(--color-warning-600);
+ --color-warning-pressed: var(--color-warning-400);
+ --color-on-warning: var(--color-neutral-0);
+
+ /* success */
+ --color-success: var(--color-success-500);
+ --color-success-hover: var(--color-success-600);
+ --color-success-pressed: var(--color-success-400);
+ --color-on-success: var(--color-neutral-0);
+
+ /* disabled */
+ --color-disable-primary: var(--color-neutral-300);
+ --color-disable-secondary: var(--color-neutral-200);
+ --color-disable-tertiary: var(--color-neutral-100);
+
+ /* tags / containers */
+ --color-neutral-container: var(--color-neutral-50);
+ --color-on-neutral-container: var(--color-neutral-700);
+ --color-primary-container: var(--color-primary-100);
+ --color-on-primary-container: var(--color-primary-700);
+ --color-error-container: var(--color-error-100);
+ --color-on-error-container: var(--color-error-700);
+ --color-warning-container: var(--color-warning-100);
+ --color-on-warning-container: var(--color-warning-700);
+ --color-success-container: var(--color-success-100);
+ --color-on-success-container: var(--color-success-700);
+ --color-purple-container: var(--color-purple-100);
+ --color-on-purple-container: var(--color-purple-700);
+
+ /* ==========================================================================
+ Typography primitives
+ ========================================================================== */
+
+ --font-product: 'Inter', ui-sans-serif, system-ui, sans-serif;
+ --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+ --font-weight-regular: 400;
+ --font-weight-medium: 500;
+ --font-weight-semibold: 600;
+
+ --font-size-10: 0.625rem;
+ --font-size-12: 0.75rem;
+ --font-size-14: 0.875rem;
+ --font-size-16: 1rem;
+ --font-size-20: 1.25rem;
+ --font-size-24: 1.5rem;
+ --font-size-28: 1.75rem;
+ --font-size-32: 2rem;
+ --font-size-40: 2.5rem;
+ --font-size-48: 3rem;
+ --font-size-56: 3.5rem;
+
+ --line-height-12: 0.75rem;
+ --line-height-16: 1rem;
+ --line-height-20: 1.25rem;
+ --line-height-22: 1.375rem;
+ --line-height-26: 1.625rem;
+ --line-height-30: 1.875rem;
+ --line-height-36: 2.25rem;
+ --line-height-40: 2.5rem;
+ --line-height-50: 3.125rem;
+ --line-height-60: 3.75rem;
+ --line-height-70: 4.375rem;
+
+ /* ==========================================================================
+ Typography semantic tokens (size + line-height + weight per style)
+ ========================================================================== */
+
+ /* display */
+ --text-display-large: var(--font-size-56);
+ --text-display-large--line-height: var(--line-height-70);
+ --text-display-large--font-weight: var(--font-weight-semibold);
+ --text-display-medium: var(--font-size-48);
+ --text-display-medium--line-height: var(--line-height-60);
+ --text-display-medium--font-weight: var(--font-weight-semibold);
+ --text-display-small: var(--font-size-40);
+ --text-display-small--line-height: var(--line-height-50);
+ --text-display-small--font-weight: var(--font-weight-semibold);
+
+ /* headline */
+ --text-headline-large: var(--font-size-32);
+ --text-headline-large--line-height: var(--line-height-40);
+ --text-headline-large--font-weight: var(--font-weight-semibold);
+ --text-headline-medium: var(--font-size-28);
+ --text-headline-medium--line-height: var(--line-height-36);
+ --text-headline-medium--font-weight: var(--font-weight-semibold);
+ --text-headline-small: var(--font-size-24);
+ --text-headline-small--line-height: var(--line-height-30);
+ --text-headline-small--font-weight: var(--font-weight-semibold);
+
+ /* title */
+ --text-title-large: var(--font-size-20);
+ --text-title-large--line-height: var(--line-height-26);
+ --text-title-large--font-weight: var(--font-weight-medium);
+ --text-title-medium: var(--font-size-16);
+ --text-title-medium--line-height: var(--line-height-22);
+ --text-title-medium--font-weight: var(--font-weight-medium);
+ --text-title-small: var(--font-size-14);
+ --text-title-small--line-height: var(--line-height-20);
+ --text-title-small--font-weight: var(--font-weight-medium);
+
+ /* body */
+ --text-body-large: var(--font-size-16);
+ --text-body-large--line-height: var(--line-height-22);
+ --text-body-large--font-weight: var(--font-weight-regular);
+ --text-body-medium: var(--font-size-14);
+ --text-body-medium--line-height: var(--line-height-20);
+ --text-body-medium--font-weight: var(--font-weight-regular);
+ --text-body-small: var(--font-size-12);
+ --text-body-small--line-height: var(--line-height-16);
+ --text-body-small--font-weight: var(--font-weight-regular);
+
+ /* label */
+ --text-label-large-emphasis: var(--font-size-14);
+ --text-label-large-emphasis--line-height: var(--line-height-20);
+ --text-label-large-emphasis--font-weight: var(--font-weight-semibold);
+ --text-label-large: var(--font-size-14);
+ --text-label-large--line-height: var(--line-height-20);
+ --text-label-large--font-weight: var(--font-weight-medium);
+ --text-label-medium: var(--font-size-12);
+ --text-label-medium--line-height: var(--line-height-16);
+ --text-label-medium--font-weight: var(--font-weight-medium);
+ --text-label-small: var(--font-size-10);
+ --text-label-small--line-height: var(--line-height-12);
+ --text-label-small--font-weight: var(--font-weight-medium);
+
+ /* ==========================================================================
+ Radius & shadow (Tailwind v4 default scale)
+ ========================================================================== */
+
+ --radius-sm: 0.25rem;
+ --radius-md: 0.375rem;
+ --radius-lg: 0.5rem;
+ --radius-xl: 0.75rem;
+ --radius-2xl: 1rem;
+ --radius-4xl: 2rem;
+
+ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+ /* ==========================================================================
+ Spacing (multiples of the Tailwind 0.25rem / 4px base) & layout
+ ========================================================================== */
+
+ --space-1: 4px;
+ --space-2: 8px;
+ --space-3: 16px;
+ --space-4: 24px;
+ --space-5: 32px;
+ --space-6: 48px;
+
+ --header-height: 70px;
+ --docs-content-max-width: 820px;
+}
+
+/* Component tokens (docs-specific roles). Declared on body, where data-theme
+ lives, so references to semantic tokens resolve against the active theme. */
+body {
+ /* code blocks */
+ --snippet-header-bg: var(--color-neutral-500);
+ --snippet-header-color: var(--color-primary-25);
+ --snippet-body-bg: var(--color-neutral-600);
+ --snippet-body-color: var(--color-neutral-100);
+ --snippet-body-border-color: var(--color-neutral-500);
+
+ /* inline code */
+ --inline-code-bg: var(--color-surface-container);
+ --inline-code-border: var(--color-outline-primary);
+
+ /* admonitions */
+ --admon-note-bg: var(--color-primary-25);
+ --admon-note-border: var(--color-primary-50);
+ --admon-note-accent: var(--color-primary);
+ --admon-tip-bg: var(--color-success-25);
+ --admon-tip-border: var(--color-success-container);
+ --admon-tip-accent: var(--color-success);
+ --admon-warning-bg: var(--color-warning-25);
+ --admon-warning-border: var(--color-warning-container);
+ --admon-warning-accent: var(--color-warning);
+ --admon-important-bg: var(--color-error-25);
+ --admon-important-border: var(--color-error-container);
+ --admon-important-accent: var(--color-error);
+}
+
+/* Dark theme (body[data-theme] is set by kb.js): remap semantic and component
+ tokens only; primitives never change. */
+[data-theme="dark"] {
+ color-scheme: dark;
+
+ --color-primary: var(--color-primary-300);
+ --color-surface-container-lowest: var(--color-neutral-800);
+ --color-surface-container-low: var(--color-neutral-600);
+ --color-surface-container: var(--color-neutral-700);
+ --color-on-surface-primary: var(--color-neutral-100);
+ --color-on-surface-secondary: var(--color-neutral-200);
+ --color-outline-primary: var(--color-neutral-700);
+ --color-outline-secondary: var(--color-neutral-400);
+
+ --inline-code-border: var(--color-neutral-600);
+
+ --admon-note-bg: var(--color-neutral-600);
+ --admon-note-border: var(--color-neutral-600);
+ --admon-tip-bg: var(--color-success-800);
+ --admon-tip-border: var(--color-success-700);
+ --admon-tip-accent: var(--color-success-400);
+ --admon-warning-bg: var(--color-warning-800);
+ --admon-warning-border: var(--color-warning-700);
+ --admon-warning-accent: var(--color-warning-300);
+ --admon-important-bg: var(--color-error-800);
+ --admon-important-border: var(--color-error-700);
+ --admon-important-accent: var(--color-error-300);
+}
diff --git a/userguide/preview/includes/diagram-approvals.adoc b/userguide/preview/includes/diagram-approvals.adoc
index 047315ab7..6ba8669a5 100644
--- a/userguide/preview/includes/diagram-approvals.adoc
+++ b/userguide/preview/includes/diagram-approvals.adoc
@@ -1,5 +1,5 @@
++++
-
+