Skip to content

Commit

Permalink
docs: Add initial theme config
Browse files Browse the repository at this point in the history
  • Loading branch information
@kitten
kitten committed Jan 16, 2024
1 parent 826f321 commit 042c3ee
Show file tree
Hide file tree
Showing 5 changed files with 245 additions and 19 deletions.
7 changes: 7 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 14 additions & 7 deletions website/astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,23 +27,30 @@ export default defineConfig({
}, {
label: 'Writing GraphQL',
link: '/get-started/writing-graphql/'
}]
}
]
},
/*
{
label: 'Guides',
autogenerate: { directory: 'guides' },
},
{
label: 'Guides',
autogenerate: { directory: 'guides' },
},
*/
{
label: 'Reference',
autogenerate: {
directory: 'reference'
}
}],
customCss: ['./src/tailwind.css'],
customCss: [
'@fontsource/inter/latin-400.css',
'@fontsource/inter/latin-500.css',
'@fontsource/inter/latin-600.css',
'./src/tailwind.css'
],
expressiveCode: {
plugins: [pluginCollapsibleSections()]
plugins: [pluginCollapsibleSections()],
themes: ['github-dark-dimmed', 'github-light'],
}
}),

Expand Down
1 change: 1 addition & 0 deletions website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@astrojs/starlight-tailwind": "^2.0.1",
"@astrojs/tailwind": "^5.1.0",
"@expressive-code/plugin-collapsible-sections": "^0.31.0",
"@fontsource/inter": "^5.0.16",
"astro": "^4.1.2",
"sharp": "^0.32.5",
"tailwindcss": "^3.3.3"
Expand Down
170 changes: 170 additions & 0 deletions website/src/tailwind.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,173 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
--sl-color-bg-nav: var(--sl-color-bg);
--sl-color-bg-overlay: rgba(0, 0, 0, 0.62);
--sl-color-bg-sidebar: transparent;
--sl-text-code: 0.8rem;
--sl-line-height: 1.65;
--sl-sidebar-pad-x: 1.8rem;

--sl-color-text: theme('colors.gray.200');
--sl-color-hairline: theme('colors.gray.700');
--sl-color-bg-inline-code: theme('colors.gray.700');
--sl-color-bg-inline-code-brd: theme('colors.gray.600');
--sl-color-text-link: theme('colors.blue.400');
--sl-color-blue: theme('colors.blue.500');
--sl-color-blue-low: theme('colors.blue.950');
}

:root[data-theme="light"] {
--sl-color-text: theme('colors.gray.900');
--sl-color-bg-sidebar: transparent;
--sl-color-bg-overlay: rgba(255, 255, 255, 0.62);
--sl-color-hairline: theme('colors.gray.200');
--sl-color-bg-inline-code: theme('colors.gray.100');
--sl-color-bg-inline-code-brd: theme('colors.gray.200');
--sl-color-text-link: theme('colors.blue.700');
}

:root header.header {
background: transparent;
border: none;
}

@media (min-width: 72rem) {
:root[data-has-sidebar] header.header {
backdrop-filter: blur(24px) saturate(250%);
background: var(--sl-color-bg-overlay);
}
}

:root mobile-starlight-toc nav {
backdrop-filter: blur(32px) saturate(250%);
background: var(--sl-color-bg-overlay);
margin-top: calc(-1 * var(--sl-nav-height));
margin-left: calc(-1 * var(--sl-sidebar-width));
padding-top: var(--sl-nav-height);
padding-left: var(--sl-sidebar-width);
}

:root mobile-starlight-toc summary {
border: none;
}

:root .expressive-code .frame {
--ec-frm-frameBoxShdCssVal: none;
--code-background: theme('colors.gray.800');
--ec-brdCol: theme('colors.gray.700');
--ec-tm-markBg: theme('colors.gray.700');
--ec-frm-trmTtbBg: var(--ec-brdCol);
--ec-frm-trmTtbBrdBtmCol: var(--ec-brdCol);
--ec-frm-edTabBarBrdBtmCol: var(--ec-brdCol);
--ec-frm-edTabBarBrdCol: var(--ec-brdCol);
--ec-frm-edTabBarBg: var(--sl-color-bg);
--ec-frm-edActTabBg: var(--ec-brdCol);
--tmLineBrdCol: var(--sl-color-blue-low);
--ec-frm-edActTabIndTopCol: transparent;
--ec-frm-edActTabIndBtmCol: transparent;
--ec-frm-edTabsMargBlkStart: -5px;
--ec-brdWd: 1.45px;
--tab-border-radius: 7px;
--ec-brdRad: 7px;
}

:root .expressive-code .frame.is-terminal {
--code-background: theme('colors.gray.800');
}

:root[data-theme="light"] .expressive-code .frame {
--code-background: theme('colors.gray.100');
--ec-brdCol: theme('colors.gray.200');
--ec-tm-markBg: theme('colors.gray.200');
}

:root[data-theme="light"] .expressive-code .frame.is-terminal {
--code-background: theme('colors.gray.100');
}

:root .expressive-code .frame.has-title:not(.is-terminal) .title {
border: none;
}

:root .pagination-links a {
background: linear-gradient(180deg, theme('colors.accent.900') 0%, theme('colors.accent.950') 100%);
border: 1px solid theme('colors.accent.800');
box-shadow: var(--sl-shadow-sm);
opacity: 0.78;
}

:root[data-theme="light"] .pagination-links a {
background: linear-gradient(180deg, theme('colors.accent.50') 0%, theme('colors.accent.100') 80%);
border: 1px solid theme('colors.accent.200');
box-shadow: var(--sl-shadow-sm);
}

:root .sl-markdown-content video:not(:where(.not-content *)) {
border: 1px solid var(--sl-color-bg-inline-code-brd);
border-radius: 7px;
}

:root .sl-markdown-content code:not(:where(.not-content *)) {
white-space: nowrap;
border: 1px solid var(--sl-color-bg-inline-code-brd);
border-radius: 4px;
}

:root .sl-markdown-content a:not(:where(.not-content *)) {
color: var(--sl-color-text-link);
text-decoration: none;
}

:root .sl-markdown-content a:hover:not(:where(.not-content *)) {
text-decoration: underline;
}

:root .starlight-aside__content a {
color: var(--sl-color-white);
text-decoration: underline;
}

:root .sidebar-content a {
@apply transition-colors;
cursor: pointer;
color: var(--sl-color-gray-3);
}

:root .sidebar-content a:hover {
text-decoration: underline;
}

:root .sidebar-content summary {
justify-content: flex-start;
}

:root .sidebar-content a[aria-current="page"]:where(*, :hover, :focus) {
font-weight: 500;
color: var(--sl-color-white);
background: none;
}

:root .right-sidebar {
border-inline-start: none;
}

:root .right-sidebar a {
@apply transition-colors;
}

:root .right-sidebar a[aria-current="true"]:where(*, :hover, :focus) {
font-weight: 500;
color: var(--sl-color-white);
background: none;
}

:root .right-sidebar a:not([aria-current="true"]):where(:hover, :focus) {
color: var(--sl-color-white);
}

:root starlight-theme-select > select {
color: var(--sl-color-gray-3);
}
65 changes: 53 additions & 12 deletions website/tailwind.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,59 @@
import colors from 'tailwindcss/colors';
import defaultTheme from 'tailwindcss/defaultTheme';
import starlightPlugin from '@astrojs/starlight-tailwind';

/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
colors: {
// Your preferred accent color. Indigo is closest to Starlight’s defaults.
accent: colors.indigo,
// Your preferred gray scale. Zinc is closest to Starlight’s defaults.
gray: colors.zinc,
},
},
},
plugins: [starlightPlugin()],
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
extend: {
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},

colors: {
accent: {
50: '#ffffff',
100: '#fbfbfc',
200: '#dbdce6',
300: '#babccf',
400: '#999cb8',
500: '#787ca1',
600: '#5c6084',
700: '#454863',
800: '#2e3042',
900: '#171821',
950: '#0c0c11',
},

gray: {
100: 'hsl(235, 5%, 99%)',
200: 'hsl(235, 5%, 87%)',
300: 'hsl(235, 5%, 72%)',
400: 'hsl(235, 5%, 57%)',
500: 'hsl(235, 5%, 41%)',
600: 'hsl(235, 5%, 27%)',
700: 'hsl(235, 5%, 12%)',
800: 'hsl(235, 5%, 4%)',
900: 'hsl(235, 5%, 1%)',
},

blue: {
DEFAULT: '#2973E1',
50: '#A2C2F2',
100: '#94B9F0',
200: '#7AA8EC',
300: '#5F96E9',
400: '#4485E5',
500: '#2973E1',
600: '#1C62CA',
700: '#1853AB',
800: '#14448B',
900: '#0F356C',
950: '#0D2D5C',
},
},
},
},
plugins: [starlightPlugin()],
};

0 comments on commit 042c3ee

Please sign in to comment.