diff --git a/docusaurus.config.ts b/docusaurus.config.ts index c9a61032..54f2ac72 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -130,9 +130,8 @@ const config: Config = { ], themes: ["docusaurus-theme-openapi-docs", "@docusaurus/theme-mermaid"], - stylesheets: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"], - clientModules: [require.resolve("./src/theme/Openapi-Store.tsx")], + clientModules: [require.resolve("./src/client/load-fonts.ts"), require.resolve("./src/theme/Openapi-Store.tsx")], themeConfig: { image: "img/tago-social-card.png", @@ -187,8 +186,8 @@ const config: Config = { alt: "TagoIO Logo", src: "img/tagoio-official-logo.svg", srcDark: "img/tagoio-official-logo-white.svg", - width: 110, - height: 26, + width: 99, + height: 28, }, items: [ { @@ -252,14 +251,14 @@ const config: Config = { }, options: { themeVariables: { - primaryColor: "#2cb1bc", - primaryTextColor: "#ffffff", + primaryColor: "#0067C0", + primaryTextColor: "#FCFCFC", primaryBorderColor: "transparent", - lineColor: "#707070", + lineColor: "#A1A1A1", edgeLabelBackground: "transparent", clusterBkg: "transparent", - clusterBorder: "#2a2a2a", - fontFamily: "Menlo, Consolas, 'Liberation Mono', Courier, monospace", + clusterBorder: "#404040", + fontFamily: "'Monaspace Neon', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", fontSize: "16px", }, }, diff --git a/package-lock.json b/package-lock.json index 4c7f61eb..250d6036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@docusaurus/core": "3.9.2", "@docusaurus/preset-classic": "3.9.2", "@docusaurus/theme-mermaid": "^3.9.2", + "@fontsource-variable/inter": "^5.2.8", + "@fontsource/monaspace-neon": "^5.2.5", "@mdx-js/react": "^3.1.0", "clsx": "^2.0.0", "docusaurus-plugin-openapi-docs": "^4.7.1", @@ -5335,6 +5337,24 @@ "deprecated": "Please update to a newer version.", "license": "MIT" }, + "node_modules/@fontsource-variable/inter": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz", + "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/monaspace-neon": { + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/@fontsource/monaspace-neon/-/monaspace-neon-5.2.5.tgz", + "integrity": "sha512-TjSSuHC37DroyhP5YCKRCAxdUb3In/uqHzqqW/8Ul+JWilz37d8lr8jFeapnbD3QdYXgiQoU2Rf/CmTdyl06DA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", diff --git a/package.json b/package.json index 6da27b32..ea1b1a70 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,8 @@ "@docusaurus/core": "3.9.2", "@docusaurus/preset-classic": "3.9.2", "@docusaurus/theme-mermaid": "^3.9.2", + "@fontsource-variable/inter": "^5.2.8", + "@fontsource/monaspace-neon": "^5.2.5", "@mdx-js/react": "^3.1.0", "clsx": "^2.0.0", "docusaurus-plugin-openapi-docs": "^4.7.1", diff --git a/src/client/load-fonts.ts b/src/client/load-fonts.ts new file mode 100644 index 00000000..0636e507 --- /dev/null +++ b/src/client/load-fonts.ts @@ -0,0 +1,6 @@ +/* oxlint-disable import/no-unassigned-import -- font side-effect imports */ +import "@fontsource-variable/inter"; +import "@fontsource/monaspace-neon/400.css"; +import "@fontsource/monaspace-neon/500.css"; +import "@fontsource/monaspace-neon/700.css"; +/* oxlint-enable import/no-unassigned-import */ diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx index ef54b7ab..0213e813 100644 --- a/src/components/HomepageFeatures/index.tsx +++ b/src/components/HomepageFeatures/index.tsx @@ -1,29 +1,32 @@ import Link from "@docusaurus/Link"; import useBaseUrl from "@docusaurus/useBaseUrl"; import Heading from "@theme/Heading"; +import ThemedImage from "@theme/ThemedImage"; import type { ReactNode } from "react"; import styles from "./styles.module.css"; type FeatureItem = { title: string; - imgSrc: string; + imgLight: string; + imgDark: string; href: string; description: ReactNode; }; -function Feature({ title, imgSrc, href, description }: FeatureItem) { +function Feature({ title, imgLight, imgDark, href, description }: FeatureItem) { return (
- {title}
@@ -41,7 +44,8 @@ export default function HomepageFeatures(): ReactNode { const FeatureList: FeatureItem[] = [ { title: "TagoIO Platform", - imgSrc: "/img/tagoio-icon-original.png", + imgLight: "/img/tagoio-mark-black.svg", + imgDark: "/img/tagoio-mark-white.svg", href: "/docs/tagoio/getting-started", description: ( <> @@ -53,7 +57,8 @@ export default function HomepageFeatures(): ReactNode { }, { title: "TagoRUN", - imgSrc: "/img/tagorun-icon-original.png", + imgLight: "/img/tagorun-mark-black.svg", + imgDark: "/img/tagorun-mark-white.svg", href: "/docs/tagoio/tagorun", description: ( <> @@ -65,7 +70,8 @@ export default function HomepageFeatures(): ReactNode { }, { title: "TagoDeploy", - imgSrc: "/img/tagodeploy-icon-original.png", + imgLight: "/img/tagodeploy-mark-black.svg", + imgDark: "/img/tagodeploy-mark-white.svg", href: "/docs/tagodeploy", description: ( <> @@ -77,7 +83,8 @@ export default function HomepageFeatures(): ReactNode { }, { title: "TagoCore", - imgSrc: "/img/tagocore-icon-original.png", + imgLight: "/img/tagocore-mark-black.svg", + imgDark: "/img/tagocore-mark-white.svg", href: "/docs/tagocore", description: ( <> @@ -89,7 +96,8 @@ export default function HomepageFeatures(): ReactNode { }, { title: "TagoTiP", - imgSrc: "/img/tip-logo.png", + imgLight: "/img/tagotip-mark-black.svg", + imgDark: "/img/tagotip-mark-white.svg", href: "/docs/tagotip", description: ( <> diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css index 077da406..6d4c70d6 100644 --- a/src/components/HomepageFeatures/styles.module.css +++ b/src/components/HomepageFeatures/styles.module.css @@ -7,30 +7,29 @@ background: var(--home-features-bg); } -/* Feature card icons with stronger shadows for light mode */ +/* Monochrome SVG logomarks — color follows the active theme */ .featureImg { height: 80px; width: 80px; object-fit: contain; - transition: filter 0.3s ease; - filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.15)); + transition: transform 0.3s ease; } -/* Icon container with stronger gradient for light mode visibility */ +/* Icon container — neutral info tint */ .featureCard > :first-child { min-height: 120px; display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, rgba(44, 177, 188, 0.08) 0%, rgba(44, 177, 188, 0.04) 100%); + background: linear-gradient(135deg, rgba(0, 103, 192, 0.06) 0%, rgba(0, 103, 192, 0.03) 100%); border-radius: 16px; margin-bottom: 1.5rem; position: relative; overflow: hidden; - border: 1px solid rgba(44, 177, 188, 0.1); + border: 1px solid rgba(0, 103, 192, 0.1); } -/* Light mode specific stronger shine effect */ +/* Light mode shine effect */ .featureCard > :first-child::before { content: ""; position: absolute; @@ -41,18 +40,18 @@ background: linear-gradient( 135deg, transparent 0%, - rgba(44, 177, 188, 0.2) 30%, + rgba(0, 103, 192, 0.15) 30%, rgba(255, 255, 255, 0.3) 50%, - rgba(44, 177, 188, 0.15) 70%, + rgba(0, 103, 192, 0.1) 70%, transparent 100% ); opacity: 0; transition: opacity 0.3s ease; } -/* Dark mode keeps the original subtle white shine */ +/* Dark mode keeps a subtle white shine */ html[data-theme="dark"] .featureCard > :first-child::before { - background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); + background: linear-gradient(135deg, transparent 0%, rgba(250, 250, 250, 0.08) 50%, transparent 100%); } /* Row layout for feature cards */ @@ -128,7 +127,7 @@ html[data-theme="dark"] .featureCard > :first-child::before { /* Dark theme specific adjustments */ html[data-theme="dark"] .featureCard { background: var(--surface-elevated); - border-color: #363749; + border-color: var(--border-visible); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); @@ -139,12 +138,12 @@ html[data-theme="dark"] .featureCard { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.12); - border-color: rgba(44, 177, 188, 0.25); + border-color: rgba(0, 103, 192, 0.3); } -/* More visible icon shadows on hover */ +/* Subtle lift on hover */ .featureCard:hover .featureImg { - filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.25)); + transform: translateY(-2px); } /* Show shine effect on icon container */ @@ -152,29 +151,19 @@ html[data-theme="dark"] .featureCard { opacity: 1; } -/* Dark theme - stronger gradient for icon containers */ +/* Dark theme - info gradient for icon containers */ html[data-theme="dark"] .featureCard > :first-child { - background: linear-gradient(135deg, rgba(44, 177, 188, 0.08) 0%, rgba(44, 177, 188, 0.03) 100%); -} - -/* Enhanced dark theme icon shadows */ -html[data-theme="dark"] .featureImg { - filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); + background: linear-gradient(135deg, rgba(40, 166, 250, 0.1) 0%, rgba(40, 166, 250, 0.04) 100%); } /* Dark theme hover effects - enhanced lighting only */ html[data-theme="dark"] .featureCard:hover { - border-color: rgba(44, 177, 188, 0.3); + border-color: rgba(40, 166, 250, 0.4); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3); } -/* Enhanced dark theme icon shadows on hover */ -html[data-theme="dark"] .featureCard:hover .featureImg { - filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5)); -} - /* Card title styling with improved typography */ .featureCard h3 { color: var(--ifm-heading-color); @@ -187,7 +176,7 @@ html[data-theme="dark"] .featureCard:hover .featureImg { /* Title color change on hover */ .featureCard:hover h3 { - color: #2cb1bc; + color: var(--info); } /* Card description text styling */ diff --git a/src/css/api-docs.css b/src/css/api-docs.css index 9babcb6a..97c4940e 100644 --- a/src/css/api-docs.css +++ b/src/css/api-docs.css @@ -305,3 +305,11 @@ details.openapi-explorer__details-container { .openapi-params__list-item { padding-bottom: 0.5rem; } + +/* The OpenAPI theme paints its
arrow as a black SVG and relies on + --ifm-menu-link-sublist-icon-filter to invert it in dark mode. We set that + variable to `none` globally because our sidebar arrow already has the right + stroke baked in, so invert the OpenAPI arrow explicitly in dark mode. */ +html[data-theme="dark"] .openapi-markdown__details > summary::before { + filter: invert(1) !important; +} diff --git a/src/css/custom.css b/src/css/custom.css index 4c0b5b31..b8247709 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,80 +1,94 @@ @import "./api-docs.css"; :root { - /* Legacy aliases (kept for any remaining references) */ - --c-blue-0: #e6f5f3; - --c-blue-70: #2cb1bc; - --c-blue-90: #1a9aa0; - --c-indigo-10: #f6f8fc; - --c-indigo-20: #e8e7e0; - --c-indigo-30: #e8e7e0; - --c-indigo-40: #ced6e0; - --c-indigo-60: #92a0b3; - --c-indigo-80: #445b78; - --c-indigo-90: #2d4665; - --c-carbon-0: #eef1f3; - --c-carbon-30: #98a2ad; - --c-carbon-90: #222d3a; - --c-carbon-100: #03060b; - --c-gray-0: #f8f9fa; - --c-gray-90: #2f2f2f; - - /* Primary: warm teal */ - --ifm-color-primary: #17888d; - --ifm-link-color: #17888d; - --ifm-link-hover-color: #126f73; + --background: #ffffff; + --foreground: #0a0a0a; + --muted: #f5f5f5; + --muted-foreground: #6f6f6f; + --accent: #f5f5f5; + --secondary: #f5f5f5; + --primary: #171717; + --primary-foreground: #fafafa; + --ring: #a1a1a1; + --border: #e5e5e5; + --input: #e5e5e5; + --destructive: #e7000b; + --destructive-foreground: #fafafa; + --success: #006a04; + --success-foreground: #fcfcfc; + --warning: #ebaa2d; + --warning-foreground: #161616; + --info: #0067c0; + --info-foreground: #fcfcfc; + + /* Links use --info so monochrome --primary stays off link surfaces. */ + --ifm-color-primary: var(--primary); + --ifm-color-primary-dark: #0f0f0f; + --ifm-color-primary-darker: #0a0a0a; + --ifm-color-primary-darkest: #050505; + --ifm-color-primary-light: #2e2e2e; + --ifm-color-primary-lighter: #3a3a3a; + --ifm-color-primary-lightest: #525252; + --ifm-link-color: var(--info); + --ifm-link-hover-color: #004f95; --ifm-font-family-base: - "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI emoji"; - --ifm-font-family-monospace: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", Menlo, Courier, monospace; + "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, + sans-serif; + --ifm-font-family-monospace: + "Monaspace Neon", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --ifm-font-weight-semibold: 600; --ifm-font-weight-bold: 700; --ifm-navbar-height: 3.75rem; - --ifm-navbar-background-color: #f5f5f2; - --ifm-navbar-link-color: var(--ifm-font-color-base); - --ifm-navbar-link-hover-color: initial; - - /* Light mode: warm cream */ - --ifm-background-color: #fafaf8; - --ifm-background-surface-color: #f5f5f2; - --ifm-color-content: #1a1b26; - --ifm-font-color-base: var(--ifm-color-content); - - --home-features-bg: #f5f5f2; - - --ifm-code-background: #f0efe8; - --ifm-code-border-radius: 0.4rem; - --ifm-pre-background: var(--ifm-code-background); - - --ifm-menu-color: var(--c-indigo-80); - --ifm-menu-color-active: var(--ifm-link-color); - --ifm-menu-color-background-hover: var(--ifm-hover-overlay); - --ifm-menu-color-background-active: #e6f5f3; + --ifm-navbar-background-color: var(--muted); + --ifm-navbar-link-color: var(--foreground); + --ifm-navbar-link-hover-color: var(--primary); + + --ifm-background-color: var(--background); + --ifm-background-surface-color: var(--muted); + --ifm-color-content: var(--foreground); + --ifm-font-color-base: var(--foreground); + --ifm-heading-color: var(--foreground); + + --home-features-bg: var(--muted); + + --ifm-code-background: var(--muted); + --ifm-code-border-radius: 0.5rem; + --ifm-pre-background: var(--muted); + + --ifm-menu-color: var(--muted-foreground); + --ifm-menu-color-active: var(--info); + --ifm-menu-color-background-hover: var(--accent); + --ifm-menu-color-background-active: rgba(0, 103, 192, 0.1); --ifm-menu-link-padding-vertical: 0.5rem; --dropdown-icon-width: 0.625rem; --dropdown-icon-height: 0.375rem; --dropdown-icon-gap: 0.688rem; - --ifm-menu-link-sublist-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiBmaWxsPSJub25lIj48cGF0aCBzdHJva2U9IiMwMzA2MEIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik05IDUgNSAxIDEgNSIvPjwvc3ZnPg=="); + --ifm-menu-link-sublist-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiBmaWxsPSJub25lIj48cGF0aCBzdHJva2U9IiMwQTBBMEEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik05IDUgNSAxIDEgNSIvPjwvc3ZnPg=="); --ifm-menu-link-sublist-icon-filter: none; - --sidebar-border-c: #e8e7e0; - + --sidebar-border-c: var(--border); --doc-sidebar-width: 300px; --doc-item-container-width: 50rem; - --sidebar-category-c: var(--c-carbon-100); - --footer-border-c: #e8e7e0; + --sidebar-category-c: var(--foreground); + --footer-border-c: var(--border); /* Surface hierarchy */ --surface-elevated: #ffffff; - --surface-raised: #f0efe8; - --border-visible: #e8e7e0; + --surface-raised: var(--muted); + --border-visible: #d4d4d4; /* Animation durations */ --animation-fast: 200ms; --animation-medium: 300ms; --animation-slow: 500ms; + + /* Code block highlighted line — info-tinted overlay (Docusaurus default + is opaque charcoal that destroys contrast on light surfaces) */ + --docusaurus-highlighted-code-line-bg: rgba(0, 103, 192, 0.12); + /* OpenAPI specific surface color override used by plugin inline styles */ --openapi-card-background-color: var(--ifm-background-surface-color); } @@ -82,55 +96,86 @@ html[data-theme="dark"] { --ifm-color-scheme: dark; - /* Dark mode: neutral gray (VitePress-inspired) */ - --ifm-background-color: #121212; - --ifm-background-surface-color: #1a1a1a; - --ifm-color-content: #e0e0e0; - --ifm-font-color-base: var(--ifm-color-content); - --ifm-heading-color: #ebebeb; - --ifm-code-background: #161616; + --background: #0a0a0a; + --foreground: #fafafa; + --muted: #262626; + --muted-foreground: #a1a1a1; + --accent: #262626; + --secondary: #262626; + --primary: #fafafa; + --primary-foreground: #171717; + --ring: #525252; + --border: #262626; + --input: #262626; + --destructive: #82181a; + --destructive-foreground: #fafafa; + --success: #4db956; + --success-foreground: #0b0b0b; + --warning: #f9b73f; + --warning-foreground: #0b0b0b; + --info: #28a6fa; + --info-foreground: #0b0b0b; + + --ifm-color-primary-dark: #e5e5e5; + --ifm-color-primary-darker: #d4d4d4; + --ifm-color-primary-darkest: #a1a1a1; + --ifm-color-primary-light: #ffffff; + --ifm-color-primary-lighter: #ffffff; + --ifm-color-primary-lightest: #ffffff; + --ifm-link-hover-color: #5cbcfb; + + --ifm-heading-color: var(--foreground); + --ifm-code-background: var(--muted); /* Surface hierarchy */ - --surface-elevated: #1e1e1e; - --surface-raised: #252525; - --border-visible: #333333; + --surface-elevated: #1a1a1a; + --surface-raised: var(--muted); + --border-visible: #404040; /* Emphasis scale overrides */ - --ifm-color-emphasis-200: #1e1e1e; - --ifm-color-emphasis-300: #2a2a2a; - --ifm-color-emphasis-600: #707070; - --ifm-color-emphasis-700: #a0a0a0; - --ifm-color-emphasis-800: #e0e0e0; - --ifm-color-emphasis-900: #ebebeb; - --ifm-color-emphasis-1000: #ebebeb; - - --ifm-menu-color: #a0a0a0; - --ifm-menu-color-background-active: #2cb1bc1a; - --ifm-menu-link-sublist-icon-filter: invert(100%); - --sidebar-border-c: #2a2a2a; - --ifm-hover-overlay: #ffffff0d; - - /* Primary: teal for dark mode */ - --ifm-color-primary: #2cb1bc; - --ifm-link-color: #2cb1bc; - --ifm-link-hover-color: #36c5c9; - - --sidebar-category-c: #ebebeb; - --ifm-navbar-background-color: #1a1a1a; - --ifm-navbar-link-color: #e0e0e0; - --ifm-navbar-link-hover-color: #2cb1bc; - --ifm-navbar-shadow: 0 1px 0 0 #2a2a2a; - --ifm-navbar-search-input-background-color: #252525; - --ifm-navbar-search-input-color: #e0e0e0; - --ifm-navbar-search-input-placeholder-color: #707070; - --footer-border-c: #2a2a2a; - --home-features-bg: #121212; + --ifm-color-emphasis-200: #1a1a1a; + --ifm-color-emphasis-300: #262626; + --ifm-color-emphasis-600: #a1a1a1; + --ifm-color-emphasis-700: #d4d4d4; + --ifm-color-emphasis-800: #e5e5e5; + --ifm-color-emphasis-900: #f5f5f5; + --ifm-color-emphasis-1000: var(--foreground); + + --ifm-menu-color: var(--muted-foreground); + --ifm-menu-color-background-active: rgba(40, 166, 250, 0.16); + --ifm-menu-link-sublist-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSI2IiBmaWxsPSJub25lIj48cGF0aCBzdHJva2U9IiNGQUZBRkEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik05IDUgNSAxIDEgNSIvPjwvc3ZnPg=="); + --ifm-menu-link-sublist-icon-filter: none; + --sidebar-border-c: var(--border); + --ifm-hover-overlay: rgba(250, 250, 250, 0.06); + + --sidebar-category-c: var(--foreground); + --ifm-navbar-background-color: var(--background); + --ifm-navbar-link-color: var(--foreground); + --ifm-navbar-link-hover-color: var(--info); + --ifm-navbar-shadow: 0 1px 0 0 var(--border); + --ifm-navbar-search-input-background-color: var(--muted); + --ifm-navbar-search-input-color: var(--foreground); + --ifm-navbar-search-input-placeholder-color: var(--muted-foreground); + --footer-border-c: var(--border); + --home-features-bg: var(--background); /* TOC and misc borders */ - --ifm-toc-border-color: #2a2a2a; + --ifm-toc-border-color: var(--border); + + /* Code block highlighted line — info-tinted overlay */ + --docusaurus-highlighted-code-line-bg: rgba(40, 166, 250, 0.16); /* Keep right panel cards readable in dark */ - --openapi-card-background-color: #1e1e1e; + --openapi-card-background-color: var(--surface-elevated); +} + +/* Inter rendering rules (per brand book) */ +body { + font-feature-settings: + "liga" 1, + "calt" 1; + font-optical-sizing: auto; + font-synthesis: none; } /* Navbar */ @@ -162,7 +207,7 @@ html[data-theme="dark"] { } html[data-theme="dark"] .navbar { - box-shadow: 0 1px 0 0 #2a2a2a; + box-shadow: 0 1px 0 0 var(--border-visible); } /* Tighten navbar in narrow desktop range to prevent overlap */ @@ -270,15 +315,15 @@ html[data-theme="dark"] .home-status-badge .status-badge--dark { /* Light mode-only footer background */ html[data-theme="light"] .footer { - background: #f2f2ee; + background: var(--surface-raised); } /* Light mode footer title color for better contrast */ html[data-theme="light"] .footer__title { - color: var(--c-indigo-90); + color: var(--foreground); } /* Light mode footer bottom text color for better contrast */ html[data-theme="light"] .footer__bottom { - color: var(--c-indigo-90); + color: var(--foreground); } .navbar__link { @@ -314,7 +359,7 @@ html[data-theme="light"] .footer__bottom { /* Better contrast in dark mode */ html[data-theme="dark"] .navbar__items:not(.navbar__items--right) .navbar__link--active { - color: #2cb1bc; + color: var(--info); } /* Remove active underline bar to avoid floating blue bar */ @@ -709,7 +754,7 @@ code { text-align: center; } .changelog-timeline__item a { - color: var(--c-indigo-90) !important; + color: var(--foreground); text-decoration: none; opacity: 1; font-weight: 500; @@ -718,7 +763,7 @@ code { border-radius: 4px; } .changelog-timeline__item a:hover { - color: var(--c-indigo-90) !important; + color: var(--info); background-color: var(--ifm-hover-overlay); text-decoration: underline; text-underline-offset: 2px; @@ -726,17 +771,17 @@ code { /* Dark mode colors for better contrast */ html[data-theme="dark"] .changelog-timeline__item a { - color: #a0a0a0 !important; + color: var(--muted-foreground); } html[data-theme="dark"] .changelog-timeline__item a:hover { - color: #e0e0e0 !important; + color: var(--info); } /* Breadcrumbs – dark mode accessibility */ html[data-theme="dark"] { /* Ensure active crumb has adequate contrast without implying interactivity */ --ifm-breadcrumb-color-active: var(--ifm-font-color-base); - --ifm-breadcrumb-item-background-active: #252525; + --ifm-breadcrumb-item-background-active: var(--muted); } /* Only real links should look interactive */ html[data-theme="dark"] a.breadcrumbs__link { @@ -793,15 +838,15 @@ html[data-theme="dark"] .breadcrumbs__item--active .breadcrumbs__link { background: var(--sidebar-border-c); } .timeline--current-year:before { - background: linear-gradient(to bottom, var(--c-indigo-80), var(--sidebar-border-c)); + background: linear-gradient(to bottom, var(--info), var(--sidebar-border-c)); } -/* Improve contrast in dark mode with teal glow and animation */ +/* Improve contrast in dark mode with info glow and animation */ html[data-theme="dark"] { - --timeline-line: rgba(44, 177, 188, 0.22); - --timeline-line-strong: rgba(44, 177, 188, 0.7); - --timeline-dot: #2cb1bc; - --timeline-dot-glow: rgba(44, 177, 188, 0.35); + --timeline-line: rgba(40, 166, 250, 0.22); + --timeline-line-strong: rgba(40, 166, 250, 0.7); + --timeline-dot: var(--info); + --timeline-dot-glow: rgba(40, 166, 250, 0.35); } html[data-theme="dark"] .timeline:before { background: var(--timeline-line); @@ -830,13 +875,13 @@ html[data-theme="dark"] .timeline--current-year:before { } @keyframes pulse { 0% { - box-shadow: 0 0 0 0 rgba(44, 177, 188, 0.5); + box-shadow: 0 0 0 0 rgba(40, 166, 250, 0.5); } 70% { - box-shadow: 0 0 0 8px rgba(44, 177, 188, 0.05); + box-shadow: 0 0 0 8px rgba(40, 166, 250, 0.05); } 100% { - box-shadow: 0 0 0 0 rgba(44, 177, 188, 0.05); + box-shadow: 0 0 0 0 rgba(40, 166, 250, 0.05); } } @@ -884,19 +929,19 @@ html[data-theme="dark"] .timeline--current-year:before { color: var(--ifm-color-emphasis-700); } -/* Dark mode: teal links with semi-transparent underline */ +/* Dark mode: info-colored links with semi-transparent underline */ html[data-theme="dark"] .markdown a, html[data-theme="dark"] .theme-doc-markdown a { - color: #2cb1bc !important; + color: var(--info); text-decoration: underline; - text-decoration-color: #2cb1bc66; + text-decoration-color: rgba(40, 166, 250, 0.4); text-underline-offset: 2px; text-decoration-thickness: 1.5px; } html[data-theme="dark"] .markdown a:hover, html[data-theme="dark"] .theme-doc-markdown a:hover { - color: #36c5c9 !important; - text-decoration-color: #36c5c9; + color: var(--ifm-link-hover-color); + text-decoration-color: var(--ifm-link-hover-color); } /* Make whole card clickable affordance */ @@ -1041,7 +1086,7 @@ html[data-theme="dark"] .youtube-container { .docusaurus-mermaid-container rect.actor, .docusaurus-mermaid-container .node rect { stroke: none !important; - fill: #17888d !important; + fill: var(--info) !important; } .docusaurus-mermaid-container .actor tspan { fill: white !important; @@ -1084,39 +1129,39 @@ html[data-theme="light"] pre { /* Dark mode code blocks — inset feel */ html[data-theme="dark"] pre { - background: #161616 !important; - border: 1px solid #2a2a2a; + background: var(--muted) !important; + border: 1px solid var(--border-visible); } /* Dark mode sidebar surface */ html[data-theme="dark"] .theme-doc-sidebar-container { - background: #1a1a1a; - border-right-color: #2a2a2a; + background: var(--background); + border-right-color: var(--border); } /* Dark mode footer surface */ html[data-theme="dark"] .footer { - background: #1a1a1a; + background: var(--muted); } /* Dark mode cards — elevated surface */ html[data-theme="dark"] .timeline-card { background: var(--surface-elevated); - border-color: #2a2a2a; + border-color: var(--border-visible); } html[data-theme="dark"] .changelog-chip { background: var(--surface-elevated); - border-color: #2a2a2a; + border-color: var(--border-visible); } /* Dark mode OpenAPI cards and forms */ html[data-theme="dark"] .openapi-explorer__request-form { background: var(--surface-elevated); - border-color: #2a2a2a; + border-color: var(--border-visible); } html[data-theme="dark"] details.openapi-explorer__details-container { - background: #121212; - border-color: #2a2a2a; + background: var(--background); + border-color: var(--border-visible); } /* ============================================================ @@ -1132,52 +1177,74 @@ html[data-theme="dark"] details.openapi-explorer__details-container { } html[data-theme="dark"] .alert { border: none; - border-left: 4px solid #2cb1bc; - background: rgba(44, 177, 188, 0.06); + border-left: 4px solid var(--info); + background: rgba(40, 166, 250, 0.08); border-radius: 0 8px 8px 0; box-shadow: none; color: var(--ifm-font-color-base); } html[data-theme="dark"] .alert--warning { - border-left-color: #f0c040; - background: rgba(240, 192, 64, 0.06); + border-left-color: var(--warning); + background: rgba(249, 183, 63, 0.08); } html[data-theme="dark"] .alert--danger { - border-left-color: #f38ba8; - background: rgba(243, 139, 168, 0.06); + border-left-color: var(--destructive); + background: rgba(130, 24, 26, 0.12); } /* Heading text color matches left border */ html[data-theme="dark"] .alert--info [class*="admonitionHeading"], html[data-theme="dark"] .alert--success [class*="admonitionHeading"], html[data-theme="dark"] .alert--secondary [class*="admonitionHeading"] { - color: #2cb1bc; + color: var(--info); } html[data-theme="dark"] .alert--warning [class*="admonitionHeading"] { - color: #f0c040; + color: var(--warning); } html[data-theme="dark"] .alert--danger [class*="admonitionHeading"] { - color: #f38ba8; + color: var(--destructive); } /* ============================================================ Mermaid — shared overrides (both light and dark) ============================================================ */ -/* All node labels white — teal backgrounds need white text */ .docusaurus-mermaid-container .nodeLabel { color: #fff !important; fill: #fff !important; } -/* Light mode only: stadium/path nodes have light backgrounds — reset to dark text */ -html[data-theme="light"] .docusaurus-mermaid-container .node:has(path) .nodeLabel { - color: #333 !important; - fill: #333 !important; +/* Every node shape is filled with --info blue, so labels stay white. */ +.docusaurus-mermaid-container .node .nodeLabel, +.docusaurus-mermaid-container .node .nodeLabel *, +.docusaurus-mermaid-container .node foreignObject, +.docusaurus-mermaid-container .node foreignObject *, +.docusaurus-mermaid-container g.block .nodeLabel, +.docusaurus-mermaid-container g.block .nodeLabel *, +.docusaurus-mermaid-container g.block foreignObject, +.docusaurus-mermaid-container g.block foreignObject *, +.docusaurus-mermaid-container g.block .label, +.docusaurus-mermaid-container g.block text, +.docusaurus-mermaid-container g.block tspan { + color: #ffffff !important; + fill: #ffffff !important; +} + +/* Scoped via aria-roledescription="block" (set by mermaid on block-beta + SVGs only) so flowcharts keep default sizing. */ +.docusaurus-mermaid-container svg[aria-roledescription="block"] foreignObject { + display: flex; + align-items: center; + justify-content: center; } - -/* Block-beta text — always white on teal blocks */ -.docusaurus-mermaid-container .block .nodeLabel { - color: #fff !important; +.docusaurus-mermaid-container svg[aria-roledescription="block"] foreignObject > div { + width: 100%; +} +.docusaurus-mermaid-container svg[aria-roledescription="block"] .nodeLabel, +.docusaurus-mermaid-container svg[aria-roledescription="block"] foreignObject > div, +.docusaurus-mermaid-container svg[aria-roledescription="block"] foreignObject p, +.docusaurus-mermaid-container svg[aria-roledescription="block"] foreignObject span { + font-size: 0.82em; + text-align: center !important; } /* ============================================================ @@ -1203,8 +1270,8 @@ html[data-theme="dark"] .docusaurus-mermaid-container .label span { /* Edge labels (e.g. "TagoTiP", "TagoTiP/S") */ html[data-theme="dark"] .docusaurus-mermaid-container .labelBkg { - background: #1e1e1e !important; - outline: 1px solid rgba(44, 177, 188, 0.35); + background: var(--surface-elevated) !important; + outline: 1px solid rgba(40, 166, 250, 0.35); border-radius: 3px !important; } html[data-theme="dark"] .docusaurus-mermaid-container .labelBkg p, @@ -1230,36 +1297,35 @@ html[data-theme="dark"] .docusaurus-mermaid-container marker path { /* Secondary/tertiary node shapes (stadium, circle, etc.) — darken light fills */ html[data-theme="dark"] .docusaurus-mermaid-container .node path, html[data-theme="dark"] .docusaurus-mermaid-container .node circle { - fill: #1a5c60 !important; - stroke: #2cb1bc !important; + fill: #0a3a66 !important; + stroke: var(--info) !important; } -/* Block-beta text inside blocks */ -html[data-theme="dark"] .docusaurus-mermaid-container .block .nodeLabel, +/* Edge labels need explicit white; node labels are handled above. */ html[data-theme="dark"] .docusaurus-mermaid-container foreignObject div { color: #fff !important; } /* ============================================================ - Inline code dark mode — subtle border for distinction + Inline code: muted surface with foreground text (brand book) ============================================================ */ html[data-theme="light"] :not(pre) > code { - color: #17888d; - background: rgba(23, 136, 141, 0.08); - border: 1px solid rgba(23, 136, 141, 0.2); + color: var(--foreground); + background: var(--muted); + border: 1px solid var(--border); } html[data-theme="dark"] :not(pre) > code { - color: #2cb1bc; - background: rgba(44, 177, 188, 0.1); - border: 1px solid rgba(44, 177, 188, 0.25); + color: var(--foreground); + background: var(--muted); + border: 1px solid var(--border); } /* ============================================================ Blockquote — callout style (both modes) ============================================================ */ .markdown blockquote { - border-left: 4px solid var(--ifm-color-emphasis-300); - background: rgba(44, 177, 188, 0.05); + border-left: 4px solid var(--info); + background: rgba(0, 103, 192, 0.05); margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; @@ -1270,7 +1336,7 @@ html[data-theme="dark"] :not(pre) > code { } /* ============================================================ - Tables — teal accent header, clean rows + Tables — primary accent header, clean rows ============================================================ */ .markdown table { display: table; @@ -1279,7 +1345,7 @@ html[data-theme="dark"] :not(pre) > code { } .markdown thead tr { background: transparent; - border-bottom: 2px solid #2cb1bc; + border-bottom: 2px solid var(--info); } .markdown thead th { font-weight: 600; @@ -1333,15 +1399,15 @@ html[data-theme="dark"] :not(pre) > code { .transport-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); - border-color: var(--ifm-color-primary); + border-color: var(--info); } html[data-theme="dark"] .transport-card { - border-color: #2a2a2a; + border-color: var(--border-visible); background: var(--surface-elevated); } html[data-theme="dark"] .transport-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - border-color: #2cb1bc; + border-color: var(--info); } .transport-card h3 { margin: 0 0 0.5rem; diff --git a/src/og/docs-renderer.tsx b/src/og/docs-renderer.tsx index 3cb68b04..15f0e5cd 100644 --- a/src/og/docs-renderer.tsx +++ b/src/og/docs-renderer.tsx @@ -9,6 +9,13 @@ const interBold = readFileSync(join(__dirname, "../static/fonts/Inter-Bold.ttf") const logoPng = readFileSync(join(__dirname, "../static/img/tagoio-logo-white.png")); const LOGO_DATA_URI = `data:image/png;base64,${logoPng.toString("base64")}`; +// Default dark palette +const COLOR_BG = "#0A0A0A"; +const COLOR_FG = "#FAFAFA"; +const COLOR_MUTED_FG = "#A1A1A1"; +const COLOR_ACCENT = "#28A6FA"; +const COLOR_BORDER = "#262626"; + export const docsRenderer: ImageRenderer = (data) => [ // oxlint-disable-next-line react/jsx-key -- Satori renders JSX to an image, not a React tree
= (data) => [ flexDirection: "column", width: "100%", height: "100%", - backgroundColor: "#121212", - color: "#ebebeb", + backgroundColor: COLOR_BG, + color: COLOR_FG, fontFamily: "Inter, sans-serif", }} > - {/* Teal accent bar at the top */} + {/* Primary accent bar at the top */}
@@ -44,20 +51,20 @@ export const docsRenderer: ImageRenderer = (data) => [ > {/* Logo + Documentation */}
- TagoIO + TagoIO
@@ -79,7 +86,7 @@ export const docsRenderer: ImageRenderer = (data) => [ fontSize: "52px", fontWeight: 700, lineHeight: 1.15, - color: "#ebebeb", + color: COLOR_FG, }} > {data.metadata.title} @@ -89,7 +96,7 @@ export const docsRenderer: ImageRenderer = (data) => [ style={{ fontSize: "22px", fontWeight: 400, - color: "#a0a0a0", + color: COLOR_MUTED_FG, lineHeight: 1.4, }} > @@ -108,8 +115,8 @@ export const docsRenderer: ImageRenderer = (data) => [ justifyContent: "space-between", }} > - docs.tago.io - IoT Cloud Platform + docs.tago.io + IoT Cloud Platform
, diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 1fc971bb..4d01aa54 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -86,30 +86,36 @@ .buttons .button { font-weight: 600; padding: 0.75rem 2rem; - border-radius: 8px; + border-radius: 999px; font-size: 1rem; - transition: all 0.2s ease; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transition: + background var(--animation-fast) ease, + color var(--animation-fast) ease, + border-color var(--animation-fast) ease, + transform var(--animation-fast) ease; } .demoButton { - background: var(--ifm-color-emphasis-1000); - color: var(--ifm-color-emphasis-0); - border: 2px solid var(--ifm-color-emphasis-1000); + background: var(--primary); + color: var(--primary-foreground); + border: 1.5px solid var(--primary); } .demoButton:hover { - opacity: 0.9; + background: var(--ifm-color-primary-darker); + border-color: var(--ifm-color-primary-darker); + color: var(--primary-foreground); } .demoButton:active { - opacity: 0.85; + transform: translateY(1px); } .getStartedButton { - border: 2px solid var(--ifm-color-emphasis-700); - color: var(--ifm-color-emphasis-800); + background: transparent; + border: 1.5px solid var(--foreground); + color: var(--foreground); } .getStartedButton:hover { - background: var(--ifm-color-emphasis-700); - color: var(--ifm-color-emphasis-0); - border-color: var(--ifm-color-emphasis-700); + background: var(--foreground); + color: var(--background); + border-color: var(--foreground); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fb0fc1ec..71016e88 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -21,8 +21,8 @@ function HomepageHeader() { dark: useBaseUrl("/img/tagoio-official-logo-white.svg"), }} alt="TagoIO" - width={160} - height={40} + width={158} + height={45} className={styles.brandLogo} />
diff --git a/src/pages/search.module.css b/src/pages/search.module.css index 9b1c64f2..212ec2da 100644 --- a/src/pages/search.module.css +++ b/src/pages/search.module.css @@ -1,10 +1,10 @@ .main { min-height: calc(100vh - var(--ifm-navbar-height)); - background: radial-gradient(circle at top, rgba(23, 136, 141, 0.06), transparent 55%), var(--ifm-background-color); + background: radial-gradient(circle at top, rgba(0, 103, 192, 0.06), transparent 55%), var(--ifm-background-color); } html[data-theme="dark"] .main { - background: radial-gradient(circle at top, rgba(44, 177, 188, 0.08), transparent 55%), var(--ifm-background-color); + background: radial-gradient(circle at top, rgba(0, 103, 192, 0.08), transparent 55%), var(--ifm-background-color); } .page { @@ -44,7 +44,7 @@ html[data-theme="dark"] .main { .summary { margin: 0; font-size: 0.875rem; - color: var(--c-indigo-60); + color: var(--muted-foreground); } .inputCard { @@ -64,7 +64,7 @@ html[data-theme="dark"] .main { .inputCard:focus-within { border-color: var(--ifm-color-primary); - box-shadow: 0 4px 16px rgba(23, 136, 141, 0.12); + box-shadow: 0 4px 16px rgba(0, 103, 192, 0.12); } html[data-theme="dark"] .inputCard { @@ -75,7 +75,7 @@ html[data-theme="dark"] .inputCard { html[data-theme="dark"] .inputCard:focus-within { border-color: var(--ifm-color-primary); - box-shadow: 0 4px 16px rgba(44, 177, 188, 0.18); + box-shadow: 0 4px 16px rgba(40, 166, 250, 0.16); } .inputIcon { @@ -96,7 +96,7 @@ html[data-theme="dark"] .inputCard:focus-within { } .input::placeholder { - color: var(--c-indigo-60); + color: var(--muted-foreground); font-weight: 400; } @@ -105,7 +105,7 @@ html[data-theme="dark"] .inputCard:focus-within { border: 1px solid var(--border-visible); border-radius: 6px; background: transparent; - color: var(--c-indigo-60); + color: var(--muted-foreground); font-size: 0.8125rem; font-weight: 600; cursor: pointer; @@ -136,13 +136,13 @@ html[data-theme="dark"] .clearButton:hover { gap: 0.625rem; padding: 4rem 1rem; text-align: center; - color: var(--c-indigo-60); + color: var(--muted-foreground); } .empty p { margin: 0; font-size: 0.9375rem; - color: var(--c-indigo-60); + color: var(--muted-foreground); max-width: 28rem; } @@ -159,11 +159,11 @@ html[data-theme="dark"] .empty p { } .emptyError .emptyEyebrow { - color: #c0392b; + color: var(--destructive); } html[data-theme="dark"] .emptyError .emptyEyebrow { - color: #ff6b6b; + color: var(--destructive); } .retryButton { @@ -180,7 +180,7 @@ html[data-theme="dark"] .emptyError .emptyEyebrow { } .retryButton:hover { - background: rgba(23, 136, 141, 0.08); + background: rgba(0, 103, 192, 0.08); } .spinner { @@ -236,7 +236,7 @@ html[data-theme="dark"] .groupHeader { .groupCount { font-size: 0.6875rem; font-weight: 600; - color: var(--c-indigo-60); + color: var(--muted-foreground); padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ifm-code-background); @@ -272,13 +272,13 @@ html[data-theme="dark"] .groupCount { } .resultLink:hover { - background: rgba(23, 136, 141, 0.08); + background: rgba(0, 103, 192, 0.08); text-decoration: none; color: var(--ifm-font-color-base); } html[data-theme="dark"] .resultLink:hover { - background: rgba(44, 177, 188, 0.14); + background: rgba(40, 166, 250, 0.16); } .resultIcon { @@ -290,7 +290,7 @@ html[data-theme="dark"] .resultLink:hover { height: 2.25rem; border-radius: 8px; background: var(--ifm-code-background); - color: var(--c-indigo-80); + color: var(--foreground); transition: background var(--animation-fast) ease, color var(--animation-fast) ease; @@ -339,7 +339,7 @@ html[data-theme="dark"] .resultLink:hover .resultIcon { flex-wrap: wrap; gap: 0.375rem; font-size: 0.7rem; - color: var(--c-indigo-80); + color: var(--foreground); line-height: 1.2; } @@ -352,7 +352,7 @@ html[data-theme="dark"] .resultPath { } .resultPathSep { - color: var(--c-indigo-60); + color: var(--muted-foreground); } html[data-theme="dark"] .resultPathSep { @@ -361,7 +361,7 @@ html[data-theme="dark"] .resultPathSep { .chevron { flex-shrink: 0; - color: var(--c-indigo-60); + color: var(--muted-foreground); opacity: 0; transform: translateX(-6px); transition: diff --git a/src/theme/SearchBar/styles.module.css b/src/theme/SearchBar/styles.module.css index 8494476d..a243a846 100644 --- a/src/theme/SearchBar/styles.module.css +++ b/src/theme/SearchBar/styles.module.css @@ -10,7 +10,7 @@ border: 1px solid var(--border-visible); border-radius: 10px; background: var(--ifm-background-surface-color); - color: var(--c-indigo-60); + color: var(--muted-foreground); font-size: 0.9375rem; cursor: pointer; transition: @@ -22,7 +22,7 @@ .searchBarTrigger:hover { border-color: var(--ifm-color-primary); background: var(--surface-elevated); - box-shadow: 0 1px 3px rgba(23, 136, 141, 0.08); + box-shadow: 0 1px 3px rgba(0, 103, 192, 0.08); } html[data-theme="dark"] .searchBarTrigger { @@ -154,7 +154,7 @@ html[data-theme="dark"] .inputRow { } .input::placeholder { - color: var(--c-indigo-60); + color: var(--muted-foreground); font-weight: 400; } @@ -168,7 +168,7 @@ html[data-theme="dark"] .inputRow { border: 1px solid var(--border-visible); border-radius: 8px; background: var(--ifm-background-surface-color); - color: var(--c-indigo-60); + color: var(--muted-foreground); cursor: pointer; font-family: inherit; transition: @@ -241,7 +241,7 @@ html[data-theme="dark"] .group + .group { .groupCount { font-size: 0.6875rem; font-weight: 600; - color: var(--c-indigo-60); + color: var(--muted-foreground); padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--ifm-code-background); @@ -290,7 +290,7 @@ html[data-theme="dark"] .groupCount { height: 2rem; border-radius: 8px; background: var(--ifm-code-background); - color: var(--c-indigo-80); + color: var(--foreground); transition: background var(--animation-fast) ease, color var(--animation-fast) ease, @@ -326,7 +326,7 @@ html[data-theme="dark"] .resultIcon { flex-wrap: wrap; gap: 0.375rem; font-size: 0.7rem; - color: var(--c-indigo-80); + color: var(--foreground); line-height: 1.2; } @@ -339,7 +339,7 @@ html[data-theme="dark"] .resultPath { } .resultPathSep { - color: var(--c-indigo-60); + color: var(--muted-foreground); } html[data-theme="dark"] .resultPathSep { @@ -348,7 +348,7 @@ html[data-theme="dark"] .resultPathSep { .chevron { flex-shrink: 0; - color: var(--c-indigo-60); + color: var(--muted-foreground); opacity: 0; transform: translateX(-4px); transition: @@ -357,7 +357,7 @@ html[data-theme="dark"] .resultPathSep { } .resultItem[aria-selected="true"] .resultLink { - background: rgba(23, 136, 141, 0.08); + background: rgba(0, 103, 192, 0.08); } .resultItem[aria-selected="true"] .resultTitle { @@ -376,7 +376,7 @@ html[data-theme="dark"] .resultPathSep { } html[data-theme="dark"] .resultItem[aria-selected="true"] .resultLink { - background: rgba(44, 177, 188, 0.14); + background: rgba(40, 166, 250, 0.16); } html[data-theme="dark"] .resultItem[aria-selected="true"] .resultIcon { @@ -389,7 +389,7 @@ html[data-theme="dark"] .resultItem[aria-selected="true"] .resultIcon { .statusRow { padding: 2.5rem 1.25rem; text-align: center; - color: var(--c-indigo-60); + color: var(--muted-foreground); display: flex; flex-direction: column; align-items: center; @@ -407,7 +407,7 @@ html[data-theme="dark"] .resultItem[aria-selected="true"] .resultIcon { .statusBody { margin: 0; font-size: 0.9375rem; - color: var(--c-indigo-60); + color: var(--muted-foreground); max-width: 24rem; } @@ -416,11 +416,11 @@ html[data-theme="dark"] .statusBody { } .statusRowError .statusEyebrow { - color: #c0392b; + color: var(--destructive); } html[data-theme="dark"] .statusRowError .statusEyebrow { - color: #ff6b6b; + color: var(--destructive); } .retryButton { @@ -438,7 +438,7 @@ html[data-theme="dark"] .statusRowError .statusEyebrow { } .retryButton:hover { - background: rgba(23, 136, 141, 0.08); + background: rgba(0, 103, 192, 0.08); } /* ----------- See all results CTA ----------- */ @@ -475,7 +475,7 @@ html[data-theme="dark"] .statusRowError .statusEyebrow { .seeAllActive { border-color: var(--ifm-color-primary); border-style: solid; - background: rgba(23, 136, 141, 0.06); + background: rgba(0, 103, 192, 0.06); color: var(--ifm-color-primary); } @@ -485,7 +485,7 @@ html[data-theme="dark"] .seeAll { html[data-theme="dark"] .seeAll:hover, html[data-theme="dark"] .seeAllActive { - background: rgba(44, 177, 188, 0.12); + background: rgba(40, 166, 250, 0.14); border-color: var(--ifm-color-primary); } @@ -495,7 +495,7 @@ html[data-theme="dark"] .seeAllActive { padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-visible); font-size: 0.75rem; - color: var(--c-indigo-60); + color: var(--muted-foreground); display: flex; justify-content: flex-start; gap: 1.25rem; diff --git a/static/img/tagocore-mark-black.svg b/static/img/tagocore-mark-black.svg new file mode 100644 index 00000000..6aa5ba7e --- /dev/null +++ b/static/img/tagocore-mark-black.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/img/tagocore-mark-white.svg b/static/img/tagocore-mark-white.svg new file mode 100644 index 00000000..02770c4f --- /dev/null +++ b/static/img/tagocore-mark-white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/img/tagodeploy-mark-black.svg b/static/img/tagodeploy-mark-black.svg new file mode 100644 index 00000000..70f88ec2 --- /dev/null +++ b/static/img/tagodeploy-mark-black.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/tagodeploy-mark-white.svg b/static/img/tagodeploy-mark-white.svg new file mode 100644 index 00000000..6e53f1d2 --- /dev/null +++ b/static/img/tagodeploy-mark-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/tagoio-logo-blue.svg b/static/img/tagoio-logo-blue.svg deleted file mode 100644 index c38541bf..00000000 --- a/static/img/tagoio-logo-blue.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/static/img/tagoio-logo-white.png b/static/img/tagoio-logo-white.png index 999b6f58..8aeb4bc7 100644 Binary files a/static/img/tagoio-logo-white.png and b/static/img/tagoio-logo-white.png differ diff --git a/static/img/tagoio-mark-black.svg b/static/img/tagoio-mark-black.svg new file mode 100644 index 00000000..efca9e45 --- /dev/null +++ b/static/img/tagoio-mark-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/tagoio-mark-white.svg b/static/img/tagoio-mark-white.svg new file mode 100644 index 00000000..6e407982 --- /dev/null +++ b/static/img/tagoio-mark-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/tagoio-official-logo-white.svg b/static/img/tagoio-official-logo-white.svg index 24099956..0c4182c1 100644 --- a/static/img/tagoio-official-logo-white.svg +++ b/static/img/tagoio-official-logo-white.svg @@ -1,7 +1,12 @@ - + - - - + + + + + + + + diff --git a/static/img/tagoio-official-logo.svg b/static/img/tagoio-official-logo.svg index 35a1a44d..d3b82767 100644 --- a/static/img/tagoio-official-logo.svg +++ b/static/img/tagoio-official-logo.svg @@ -1,7 +1,12 @@ - + - - - + + - \ No newline at end of file + + + + + + + diff --git a/static/img/tagorun-icon-original.png b/static/img/tagorun-icon-original.png deleted file mode 100644 index 9658fe84..00000000 Binary files a/static/img/tagorun-icon-original.png and /dev/null differ diff --git a/static/img/tagorun-mark-black.svg b/static/img/tagorun-mark-black.svg new file mode 100644 index 00000000..4d6adbb3 --- /dev/null +++ b/static/img/tagorun-mark-black.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/tagorun-mark-white.svg b/static/img/tagorun-mark-white.svg new file mode 100644 index 00000000..e38fd792 --- /dev/null +++ b/static/img/tagorun-mark-white.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/tagotip-mark-black.svg b/static/img/tagotip-mark-black.svg new file mode 100644 index 00000000..fd54b3d4 --- /dev/null +++ b/static/img/tagotip-mark-black.svg @@ -0,0 +1 @@ + diff --git a/static/img/tagotip-mark-white.svg b/static/img/tagotip-mark-white.svg new file mode 100644 index 00000000..d44352a2 --- /dev/null +++ b/static/img/tagotip-mark-white.svg @@ -0,0 +1 @@ + diff --git a/static/img/tip-logo.png b/static/img/tip-logo.png deleted file mode 100644 index 4fdb9471..00000000 Binary files a/static/img/tip-logo.png and /dev/null differ