feat: gradient

packages/i18n/strings/en.json

@@ -841,6 +841,7 @@
     "tools": {
       "api": {
         "name": "API",
+        "button": "Nerd out",
         "description": "BlitzKit API docs",
         "seo_description": "Comprehensive documentation and detailed insights into BlitzKit's API, enabling developers to integrate and utilize advanced features for World of Tanks Blitz efficiently."
       },

packages/website/src/core/radix/var.ts

@@ -10,18 +10,7 @@ export type VarName =
   | `space-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
   | `shadow-${1 | 2 | 3 | 4 | 5 | 6}`
   | `${RadixColor | 'accent' | 'gray'}-${
-      | 1
-      | 2
-      | 3
-      | 4
-      | 5
-      | 6
-      | 7
-      | 8
-      | 9
-      | 10
-      | 11
-      | 12
+      | `${'' | 'a'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
       | 'surface'
       | 'indicator'
       | 'track'

packages/website/src/pages/[...locale]/api/_index.tsx

@@ -1,6 +1,7 @@
 import { OpenInNewWindowIcon } from '@radix-ui/react-icons';
-import { Code, IconButton, Link, Table } from '@radix-ui/themes';
+import { Box, Code, IconButton, Link, Table } from '@radix-ui/themes';
 import { useState } from 'react';
+import { Var } from '../../../core/radix/var';
 import type { APIPath } from './index.astro';
 
 interface SlugsTableProps {
@@ -71,6 +72,19 @@ export function SlugsTable({ slugs, path }: SlugsTableProps) {
         })}
 
         <Table.Row style={{ position: 'relative' }}>
+          {!expanded && (
+            <Box
+              width="100%"
+              height="100%"
+              position="absolute"
+              top="0"
+              style={{
+                transform: 'translate(0, -100%)',
+                background: `linear-gradient(${Var('black-a1')}, ${Var('black-a5')})`,
+              }}
+            />
+          )}
+
           <Table.Cell />
 
           <Link

packages/website/src/pages/[...locale]/api/index.astro

@@ -126,7 +126,7 @@ apis.sort((a, b) => a.path.localeCompare(b.path));
 ---
 
 <ToolLayout tool={apiTool}>
-  <PageWrapper py="9" color="iris">
+  <PageWrapper py="9" color="indigo">
     <Flex direction="column" gap="6">
       {
         apis.map((api, index) => (

packages/website/src/pages/[...locale]/index.astro

@@ -10,6 +10,7 @@ import HomeHero from '../../components/HomeHero.astro';
 import { Plugs } from '../../components/Plugs';
 import ToolCard from '../../components/ToolCard.astro';
 import {
+  apiTool,
   compareTool,
   discordTool,
   embedTool,
@@ -102,10 +103,11 @@ export const getStaticPaths = (() => {
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={embedTool} />
-        <ToolCard tool={moreTool} />
+        <ToolCard tool={apiTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={moreTool} />
         <Box flexGrow="1" />
       </Flex>