docs(css): update brand colors and button styles for Robot Framework theme

Author: d-biehl

docs/.vitepress/theme/style.css

@@ -49,15 +49,16 @@
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
-  --vp-c-brand-1: var(--vp-c-indigo-1);
-  --vp-c-brand-2: var(--vp-c-indigo-2);
-  --vp-c-brand-3: var(--vp-c-indigo-3);
-  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+  /* Robot Framework-like brand: teal / blue-green */
+  --vp-c-brand-1: #0b7285; /* strong teal for text and accents */
+  --vp-c-brand-2: #138496; /* hover */
+  --vp-c-brand-3: #0a6b73; /* button bg */
+  --vp-c-brand-soft: rgba(10,107,115,0.08);
 
-  --vp-c-tip-1: var(--vp-c-brand-1);
-  --vp-c-tip-2: var(--vp-c-brand-2);
-  --vp-c-tip-3: var(--vp-c-brand-3);
-  --vp-c-tip-soft: var(--vp-c-brand-soft);
+  --vp-c-tip-1: #0b7285;
+  --vp-c-tip-2: #138496;
+  --vp-c-tip-3: #0a6b73;
+  --vp-c-tip-soft: rgba(10,107,115,0.06);
 
   --vp-c-warning-1: var(--vp-c-yellow-1);
   --vp-c-warning-2: var(--vp-c-yellow-2);
@@ -84,34 +85,26 @@
   --vp-button-brand-active-border: transparent;
   --vp-button-brand-active-text: var(--vp-c-white);
   --vp-button-brand-active-bg: var(--vp-c-brand-1);
+
+/* Slightly larger buttons to match Robot Framework site feel */
+.vp-theme-default .vp-button {
+  padding: 0.6rem 1rem;
+  border-radius: 8px;
+}
 }
 
 /**
  * Component: Home
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(90deg,
-      #234a34 10%,
-      #e9e9e2);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg,
-      #242f29 50%,
-      #2e4e31 50%);
-  --vp-home-hero-image-filter: blur(44px);
-}
+  --vp-home-hero-name-color: #ffffff;
+  --vp-home-hero-name-background: linear-gradient(90deg, #0b7285 0%, #138496 100%);
 
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
+/* Hero adjustments */
+.VPHero {
+  background: linear-gradient(180deg, rgba(11,114,133,0.06) 0%, transparent 60%);
 }
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(68px);
-  }
 }
 
 /**
@@ -121,8 +114,12 @@
 :root {
   --vp-custom-block-tip-border: transparent;
   --vp-custom-block-tip-text: var(--vp-c-text-1);
-  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
-  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-bg: rgba(10,107,115,0.06);
+  --vp-custom-block-tip-code-bg: rgba(10,107,115,0.04);
+
+/* Warning / danger softer palettes */
+  --vp-c-warning-soft: rgba(255,193,7,0.06);
+  --vp-c-danger-soft: rgba(220,53,69,0.06);
 }
 
 /**
@@ -138,18 +135,18 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-font-family-base: 'Inter', ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --vp-font-family-mono: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
-    'Liberation Mono', 'Courier New', monospace;
+  --vp-font-family-base:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --vp-font-family-mono: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
   font-optical-sizing: auto;
 }
 
 :root:where(:lang(zh)) {
-  --vp-font-family-base: 'Punctuation SC', 'Inter', ui-sans-serif, system-ui,
-    'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', 'Heiti SC', 'DengXian',
-    'Microsoft YaHei', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --vp-font-family-base:
+    "Punctuation SC", "Inter", ui-sans-serif, system-ui, "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Heiti SC",
+    "DengXian", "Microsoft YaHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
 }
 
 .VPHero .name {
@@ -177,4 +174,4 @@ kbd {
   background-color: var(--vp-input-switch-bg-color);
   border: 1px solid var(--vp-input-border-color);
   border-radius: 6px;
-}
+}