@primer/react
Version:
An implementation of GitHub's Primer Design System using React
1,173 lines • 40.2 kB
TypeScript
import type { KeyPaths } from './utils/types/KeyPaths';
declare const theme: {
animation: {
easeOutCubic: string;
};
borderWidths: (string | number)[];
breakpoints: string[];
fonts: {
normal: any;
mono: string;
};
fontSizes: string[];
fontWeights: {
light: number;
normal: number;
semibold: number;
bold: number;
};
lineHeights: {
condensedUltra: number;
condensed: number;
default: number;
};
radii: string[];
sizes: {
small: string;
medium: string;
large: string;
xlarge: string;
};
space: string[];
colorSchemes: Record<"light" | "light_high_contrast" | "light_colorblind" | "light_tritanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind" | "dark_tritanopia", {
colors: Partial<{
colors: {
canvasDefaultTransparent: string;
pageHeaderBg: string;
marketingIcon: {
primary: string;
secondary: string;
};
diffBlob: {
addition: {
numText: string;
fg: string;
numBg: string;
lineBg: string;
wordBg: string;
};
deletion: {
numText: string;
fg: string;
numBg: string;
lineBg: string;
wordBg: string;
};
hunk: {
numBg: string;
};
expander: {
icon: string;
};
selectedLineHighlightMixBlendMode: string;
};
diffstat: {
deletionBorder: string;
additionBorder: string;
additionBg: string;
};
searchKeyword: {
hl: string;
};
prettylights: {
syntax: {
comment: string;
constant: string;
entity: string;
storageModifierImport: string;
entityTag: string;
keyword: string;
string: string;
variable: string;
brackethighlighterUnmatched: string;
invalidIllegalText: string;
invalidIllegalBg: string;
carriageReturnText: string;
carriageReturnBg: string;
stringRegexp: string;
markupList: string;
markupHeading: string;
markupItalic: string;
markupBold: string;
markupDeletedText: string;
markupDeletedBg: string;
markupInsertedText: string;
markupInsertedBg: string;
markupChangedText: string;
markupChangedBg: string;
markupIgnoredText: string;
markupIgnoredBg: string;
metaDiffRange: string;
brackethighlighterAngle: string;
sublimelinterGutterMark: string;
constantOtherReferenceLink: string;
};
};
codemirror: {
text: string;
bg: string;
guttersBg: string;
guttermarkerText: string;
guttermarkerSubtleText: string;
linenumberText: string;
cursor: string;
selectionBg: string;
activelineBg: string;
matchingbracketText: string;
linesBg: string;
syntax: {
comment: string;
constant: string;
entity: string;
keyword: string;
storage: string;
string: string;
support: string;
variable: string;
};
};
checks: {
bg: string;
runBorderWidth: string;
containerBorderWidth: string;
textPrimary: string;
textSecondary: string;
textLink: string;
btnIcon: string;
btnHoverIcon: string;
btnHoverBg: string;
inputText: string;
inputPlaceholderText: string;
inputFocusText: string;
inputBg: string;
inputShadow: string;
donutError: string;
donutPending: string;
donutSuccess: string;
donutNeutral: string;
dropdownText: string;
dropdownBg: string;
dropdownBorder: string;
dropdownShadow: string;
dropdownHoverText: string;
dropdownHoverBg: string;
dropdownBtnHoverText: string;
dropdownBtnHoverBg: string;
scrollbarThumbBg: string;
headerLabelText: string;
headerLabelOpenText: string;
headerBorder: string;
headerIcon: string;
lineText: string;
lineNumText: string;
lineTimestampText: string;
lineHoverBg: string;
lineSelectedBg: string;
lineSelectedNumText: string;
lineDtFmText: string;
lineDtFmBg: string;
gateBg: string;
gateText: string;
gateWaitingText: string;
stepHeaderOpenBg: string;
stepErrorText: string;
stepWarningText: string;
loglineText: string;
loglineNumText: string;
loglineDebugText: string;
loglineErrorText: string;
loglineErrorNumText: string;
loglineErrorBg: string;
loglineWarningText: string;
loglineWarningNumText: string;
loglineWarningBg: string;
loglineCommandText: string;
loglineSectionText: string;
ansi: {
black: string;
blackBright: string;
white: string;
whiteBright: string;
gray: string;
red: string;
redBright: string;
green: string;
greenBright: string;
yellow: string;
yellowBright: string;
blue: string;
blueBright: string;
magenta: string;
magentaBright: string;
cyan: string;
cyanBright: string;
};
};
project: {
headerBg: string;
sidebarBg: string;
gradientIn: string;
gradientOut: string;
};
mktg: {
btn: {
bg: string;
};
};
control: {
borderColor: {
emphasis: string;
};
};
avatar: {
bg: string;
border: string;
stackFade: string;
stackFadeMore: string;
};
topicTag: {
border: string;
};
counter: {
border: string;
};
selectMenu: {
backdropBorder: string;
tapHighlight: string;
tapFocusBg: string;
};
overlay: {
backdrop: string;
};
header: {
text: string;
bg: string;
divider: string;
logo: string;
};
headerSearch: {
bg: string;
border: string;
};
sidenav: {
selectedBg: string;
};
menu: {
bgActive: string;
};
input: {
disabledBg: string;
};
timeline: {
badgeBg: string;
};
ansi: {
black: string;
blackBright: string;
white: string;
whiteBright: string;
gray: string;
red: string;
redBright: string;
green: string;
greenBright: string;
yellow: string;
yellowBright: string;
blue: string;
blueBright: string;
magenta: string;
magentaBright: string;
cyan: string;
cyanBright: string;
};
btn: {
text: string;
bg: string;
border: string;
hoverBg: string;
hoverBorder: string;
activeBg: string;
activeBorder: string;
selectedBg: string;
counterBg: string;
primary: {
text: string;
bg: string;
border: string;
hoverBg: string;
hoverBorder: string;
selectedBg: string;
disabledText: string;
disabledBg: string;
disabledBorder: string;
icon: string;
counterBg: string;
};
outline: {
text: string;
hoverText: string;
hoverBg: string;
hoverBorder: string;
hoverCounterBg: string;
selectedText: string;
selectedBg: string;
selectedBorder: string;
disabledText: string;
disabledBg: string;
disabledCounterBg: string;
counterBg: string;
counterFg: string;
hoverCounterFg: string;
disabledCounterFg: string;
};
danger: {
text: string;
hoverText: string;
hoverBg: string;
hoverBorder: string;
hoverCounterBg: string;
selectedText: string;
selectedBg: string;
selectedBorder: string;
disabledText: string;
disabledBg: string;
disabledCounterBg: string;
counterBg: string;
icon: string;
hoverIcon: string;
counterFg: string;
hoverCounterFg: string;
disabledCounterFg: string;
};
inactive: {
bg: string;
text: string;
};
};
underlinenav: {
icon: string;
borderHover: string;
};
actionListItem: {
inlineDivider: string;
default: {
hoverBg: string;
hoverBorder: string;
activeBg: string;
activeBorder: string;
selectedBg: string;
};
danger: {
hoverBg: string;
activeBg: string;
hoverText: string;
};
};
switchTrack: {
bg: string;
hoverBg: string;
activeBg: string;
disabledBg: string;
fg: string;
disabledFg: string;
border: string;
checked: {
bg: string;
hoverBg: string;
activeBg: string;
fg: string;
disabledFg: string;
border: string;
};
};
switchKnob: {
bg: string;
disabledBg: string;
border: string;
checked: {
bg: string;
disabledBg: string;
border: string;
};
};
segmentedControl: {
bg: string;
button: {
bg: string;
hover: {
bg: string;
};
active: {
bg: string;
};
selected: {
border: string;
};
};
};
treeViewItem: {
chevron: {
hoverBg: string;
};
directory: {
fill: string;
};
};
fg: {
default: string;
muted: string;
subtle: string;
onEmphasis: string;
};
canvas: {
default: string;
overlay: string;
inset: string;
subtle: string;
};
border: {
default: string;
muted: string;
subtle: string;
};
neutral: {
emphasisPlus: string;
emphasis: string;
muted: string;
subtle: string;
};
accent: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
success: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
attention: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
severe: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
danger: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
open: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
closed: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
done: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
sponsors: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
primer: {
fg: {
disabled: string;
};
canvas: {
backdrop: string;
sticky: string;
};
border: {
active: string;
contrast: string;
};
};
};
shadows: {
mktg: {
btn: {
shadow: {
outline: string;
focus: string;
hover: string;
hoverMuted: string;
};
};
};
avatar: {
childShadow: string;
};
overlay: {
shadow: string;
};
btn: {
shadow: string;
insetShadow: string;
primary: {
shadow: string;
insetShadow: string;
selectedShadow: string;
};
outline: {
hoverShadow: string;
hoverInsetShadow: string;
selectedShadow: string;
};
danger: {
hoverShadow: string;
hoverInsetShadow: string;
selectedShadow: string;
};
};
shadow: {
small: string;
medium: string;
large: string;
extraLarge: string;
};
primer: {
shadow: {
highlight: string;
inset: string;
};
};
};
}>;
shadows: Partial<{
colors: {
canvasDefaultTransparent: string;
pageHeaderBg: string;
marketingIcon: {
primary: string;
secondary: string;
};
diffBlob: {
addition: {
numText: string;
fg: string;
numBg: string;
lineBg: string;
wordBg: string;
};
deletion: {
numText: string;
fg: string;
numBg: string;
lineBg: string;
wordBg: string;
};
hunk: {
numBg: string;
};
expander: {
icon: string;
};
selectedLineHighlightMixBlendMode: string;
};
diffstat: {
deletionBorder: string;
additionBorder: string;
additionBg: string;
};
searchKeyword: {
hl: string;
};
prettylights: {
syntax: {
comment: string;
constant: string;
entity: string;
storageModifierImport: string;
entityTag: string;
keyword: string;
string: string;
variable: string;
brackethighlighterUnmatched: string;
invalidIllegalText: string;
invalidIllegalBg: string;
carriageReturnText: string;
carriageReturnBg: string;
stringRegexp: string;
markupList: string;
markupHeading: string;
markupItalic: string;
markupBold: string;
markupDeletedText: string;
markupDeletedBg: string;
markupInsertedText: string;
markupInsertedBg: string;
markupChangedText: string;
markupChangedBg: string;
markupIgnoredText: string;
markupIgnoredBg: string;
metaDiffRange: string;
brackethighlighterAngle: string;
sublimelinterGutterMark: string;
constantOtherReferenceLink: string;
};
};
codemirror: {
text: string;
bg: string;
guttersBg: string;
guttermarkerText: string;
guttermarkerSubtleText: string;
linenumberText: string;
cursor: string;
selectionBg: string;
activelineBg: string;
matchingbracketText: string;
linesBg: string;
syntax: {
comment: string;
constant: string;
entity: string;
keyword: string;
storage: string;
string: string;
support: string;
variable: string;
};
};
checks: {
bg: string;
runBorderWidth: string;
containerBorderWidth: string;
textPrimary: string;
textSecondary: string;
textLink: string;
btnIcon: string;
btnHoverIcon: string;
btnHoverBg: string;
inputText: string;
inputPlaceholderText: string;
inputFocusText: string;
inputBg: string;
inputShadow: string;
donutError: string;
donutPending: string;
donutSuccess: string;
donutNeutral: string;
dropdownText: string;
dropdownBg: string;
dropdownBorder: string;
dropdownShadow: string;
dropdownHoverText: string;
dropdownHoverBg: string;
dropdownBtnHoverText: string;
dropdownBtnHoverBg: string;
scrollbarThumbBg: string;
headerLabelText: string;
headerLabelOpenText: string;
headerBorder: string;
headerIcon: string;
lineText: string;
lineNumText: string;
lineTimestampText: string;
lineHoverBg: string;
lineSelectedBg: string;
lineSelectedNumText: string;
lineDtFmText: string;
lineDtFmBg: string;
gateBg: string;
gateText: string;
gateWaitingText: string;
stepHeaderOpenBg: string;
stepErrorText: string;
stepWarningText: string;
loglineText: string;
loglineNumText: string;
loglineDebugText: string;
loglineErrorText: string;
loglineErrorNumText: string;
loglineErrorBg: string;
loglineWarningText: string;
loglineWarningNumText: string;
loglineWarningBg: string;
loglineCommandText: string;
loglineSectionText: string;
ansi: {
black: string;
blackBright: string;
white: string;
whiteBright: string;
gray: string;
red: string;
redBright: string;
green: string;
greenBright: string;
yellow: string;
yellowBright: string;
blue: string;
blueBright: string;
magenta: string;
magentaBright: string;
cyan: string;
cyanBright: string;
};
};
project: {
headerBg: string;
sidebarBg: string;
gradientIn: string;
gradientOut: string;
};
mktg: {
btn: {
bg: string;
};
};
control: {
borderColor: {
emphasis: string;
};
};
avatar: {
bg: string;
border: string;
stackFade: string;
stackFadeMore: string;
};
topicTag: {
border: string;
};
counter: {
border: string;
};
selectMenu: {
backdropBorder: string;
tapHighlight: string;
tapFocusBg: string;
};
overlay: {
backdrop: string;
};
header: {
text: string;
bg: string;
divider: string;
logo: string;
};
headerSearch: {
bg: string;
border: string;
};
sidenav: {
selectedBg: string;
};
menu: {
bgActive: string;
};
input: {
disabledBg: string;
};
timeline: {
badgeBg: string;
};
ansi: {
black: string;
blackBright: string;
white: string;
whiteBright: string;
gray: string;
red: string;
redBright: string;
green: string;
greenBright: string;
yellow: string;
yellowBright: string;
blue: string;
blueBright: string;
magenta: string;
magentaBright: string;
cyan: string;
cyanBright: string;
};
btn: {
text: string;
bg: string;
border: string;
hoverBg: string;
hoverBorder: string;
activeBg: string;
activeBorder: string;
selectedBg: string;
counterBg: string;
primary: {
text: string;
bg: string;
border: string;
hoverBg: string;
hoverBorder: string;
selectedBg: string;
disabledText: string;
disabledBg: string;
disabledBorder: string;
icon: string;
counterBg: string;
};
outline: {
text: string;
hoverText: string;
hoverBg: string;
hoverBorder: string;
hoverCounterBg: string;
selectedText: string;
selectedBg: string;
selectedBorder: string;
disabledText: string;
disabledBg: string;
disabledCounterBg: string;
counterBg: string;
counterFg: string;
hoverCounterFg: string;
disabledCounterFg: string;
};
danger: {
text: string;
hoverText: string;
hoverBg: string;
hoverBorder: string;
hoverCounterBg: string;
selectedText: string;
selectedBg: string;
selectedBorder: string;
disabledText: string;
disabledBg: string;
disabledCounterBg: string;
counterBg: string;
icon: string;
hoverIcon: string;
counterFg: string;
hoverCounterFg: string;
disabledCounterFg: string;
};
inactive: {
bg: string;
text: string;
};
};
underlinenav: {
icon: string;
borderHover: string;
};
actionListItem: {
inlineDivider: string;
default: {
hoverBg: string;
hoverBorder: string;
activeBg: string;
activeBorder: string;
selectedBg: string;
};
danger: {
hoverBg: string;
activeBg: string;
hoverText: string;
};
};
switchTrack: {
bg: string;
hoverBg: string;
activeBg: string;
disabledBg: string;
fg: string;
disabledFg: string;
border: string;
checked: {
bg: string;
hoverBg: string;
activeBg: string;
fg: string;
disabledFg: string;
border: string;
};
};
switchKnob: {
bg: string;
disabledBg: string;
border: string;
checked: {
bg: string;
disabledBg: string;
border: string;
};
};
segmentedControl: {
bg: string;
button: {
bg: string;
hover: {
bg: string;
};
active: {
bg: string;
};
selected: {
border: string;
};
};
};
treeViewItem: {
chevron: {
hoverBg: string;
};
directory: {
fill: string;
};
};
fg: {
default: string;
muted: string;
subtle: string;
onEmphasis: string;
};
canvas: {
default: string;
overlay: string;
inset: string;
subtle: string;
};
border: {
default: string;
muted: string;
subtle: string;
};
neutral: {
emphasisPlus: string;
emphasis: string;
muted: string;
subtle: string;
};
accent: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
success: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
attention: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
severe: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
danger: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
open: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
closed: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
done: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
sponsors: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
primer: {
fg: {
disabled: string;
};
canvas: {
backdrop: string;
sticky: string;
};
border: {
active: string;
contrast: string;
};
};
};
shadows: {
mktg: {
btn: {
shadow: {
outline: string;
focus: string;
hover: string;
hoverMuted: string;
};
};
};
avatar: {
childShadow: string;
};
overlay: {
shadow: string;
};
btn: {
shadow: string;
insetShadow: string;
primary: {
shadow: string;
insetShadow: string;
selectedShadow: string;
};
outline: {
hoverShadow: string;
hoverInsetShadow: string;
selectedShadow: string;
};
danger: {
hoverShadow: string;
hoverInsetShadow: string;
selectedShadow: string;
};
};
shadow: {
small: string;
medium: string;
large: string;
extraLarge: string;
};
primer: {
shadow: {
highlight: string;
inset: string;
};
};
};
}>;
}>;
};
export default theme;
type ThemeColors = {
fg: {
default: string;
muted: string;
subtle: string;
onEmphasis: string;
};
canvas: {
default: string;
overlay: string;
inset: string;
subtle: string;
};
border: {
default: string;
muted: string;
subtle: string;
};
neutral: {
emphasisPlus: string;
emphasis: string;
muted: string;
subtle: string;
};
accent: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
success: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
attention: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
severe: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
danger: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
open: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
closed: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
done: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
sponsors: {
fg: string;
emphasis: string;
muted: string;
subtle: string;
};
};
type ThemeShadows = {
shadow: {
small: string;
medium: string;
large: string;
extraLarge: string;
};
};
export type ThemeColorPaths = KeyPaths<ThemeColors>;
export type ThemeShadowPaths = KeyPaths<ThemeShadows>;
//# sourceMappingURL=theme.d.ts.map