prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add primer base styles

Browse source
This commit is contained in:
EnixCoda 2022-05-29 02:00:11 +08:00
parent b97a850100
commit a5baa23c77
3 changed files with 13 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/MetaBar.tsx
View file

@ -33,8 +33,10 @@ export function MetaBar({ metaData }: Props) {
<BranchName
href={branchUrl}
as="a"
className={'branch-name'}
onClick={createAnchorClickHandler(branchUrl)}
sx={{
color: 'fg.muted',
}}
{...platform.delegatePJAXProps?.()}
>
{branchName || '...'}

15
src/containers/Theme.tsx
View file

@ -1,11 +1,7 @@
import { ThemeProvider } from '@primer/react'
import { BaseStyles, ThemeProvider } from '@primer/react'
import theme from '@primer/react/lib-esm/theme'
import * as React from 'react'
// <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" ...
// <html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" ...
// <html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark" ...
const colorModeMap: Record<string, 'night' | 'day'> = {
dark: 'night',
light: 'day',
@ -27,6 +23,9 @@ const validColorSchemes = Object.keys(theme.colorSchemes) as EnumString<
// BUT: Do not remove the validation, there might be other themes in future
const getPreferenceFromDOM = () => {
// <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" ...
// <html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark" ...
// <html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark" ...
const { colorMode, lightTheme, darkTheme } = document.documentElement.dataset
return {
@ -49,5 +48,9 @@ function useThemePreference() {
export function Theme({ children }: React.PropsWithChildren<{}>) {
const themePreference = useThemePreference()
return <ThemeProvider {...themePreference} {...{ children }} />
return (
<ThemeProvider {...themePreference}>
<BaseStyles>{children}</BaseStyles>
</ThemeProvider>
)
}

18
src/styles/index.scss
View file

@ -369,15 +369,6 @@ $minimal-z-index: max(
@include hide-for-print();
@include enableThemes;
@import '~@primer/css/base/index.scss';
button {
border-radius: 6px;
font-weight: 600;
}
a {
color: var(--color-accent-fg);
}
$resizeHandlerWidth: 1px;
.#{$name}-side-bar-body-wrapper {
position: fixed;
@ -483,14 +474,6 @@ $minimal-z-index: max(
}
}
.branch-name {
margin-left: 4px;
padding: 4px 6px; // did not align well for some reason :/
color: var(--color-fg-muted);
background-color: var(--color-accent-subtle);
word-break: break-word;
}
.close-side-bar-button-position {
float: right;
z-index: 1; // prevent being covered by following elements
@ -657,6 +640,7 @@ $minimal-z-index: max(
cursor: pointer;
white-space: nowrap;
transition: padding 0.3s ease; // on toggle expansion in search results
color: var(--color-accent-fg);
border-bottom: 1px solid var(--color-border-muted);
&.compact {