Skip to content

Commit 9081f90

Browse files
dieghernandieghernan
committed
Improve brand and dual theme
1 parent fabbdfb commit 9081f90

File tree

5 files changed

+283
-10
lines changed

5 files changed

+283
-10
lines changed

‎inst/brand_yml/_brand-dark.yaml‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
# Not fully tested yet
1+
meta:
2+
name: gitdevr
3+
description: >
4+
A pkgdown template for my packages. Template based on skin GitDev of my
5+
Jekyll template chulapa <https://dieghernan.github.io/chulapa/skins/gitdev>.
6+
links:
7+
home: https://dieghernan.github.io/gitdevr
8+
github: https://github.com/dieghernan/gitdevr
9+
twitter: https://x.com/dhernangomez
210

311
logo:
412
images:
@@ -9,8 +17,8 @@ logo:
917

1018
color:
1119
palette:
12-
dark: "#24292f"
13-
black: "#383d43"
20+
dark: "#343a40"
21+
black: "#373e47"
1422
white: "#ffffff"
1523
gray: "#6c757d"
1624
light: "#f8f9fa"
@@ -19,21 +27,25 @@ color:
1927
orange: "#d4a72c"
2028
purple: "#9686be"
2129
red: "#d86f75"
22-
primary: black
30+
code: "#e75ca2"
31+
primary: "#383d43"
2332
secondary: gray
2433
success: green
2534
warning: orange
2635
danger: red
2736
info: purple
37+
dark: dark
38+
light: light
2839
foreground: white
29-
background: dark
40+
background: black
3041

3142
typography:
3243
fonts:
3344
- family: Inter
3445
source: google
3546
- family: Inter Tight
3647
source: google
48+
weight: [400, 700, 800]
3749
- family: Fira Code
3850
source: google
3951
- family: Roboto
@@ -50,7 +62,50 @@ typography:
5062
defaults:
5163
bootstrap:
5264
defaults:
53-
navbar-bg: "#24292f"
54-
navbar-color: "#ffffff"
55-
input-placeholder-color: "#8b949e"
56-
65+
base_font: >
66+
"Inter, Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial"
67+
heading_font: >
68+
"'Inter Tight', Roboto, system-ui, -apple-system, 'Helvetica Neue',
69+
Arial"
70+
code_font: "'Fira Code', 'Courier New', monospace"
71+
code-color: "#e83e8c"
72+
code-color-dark: "#e75ca2"
73+
navbar-light-bg: "#22272e"
74+
navbar-light-color: "#ffffff"
75+
navbar-light-toggler-border-color: "#22272e"
76+
navbar-light-toggler-icon-bg: >
77+
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
78+
viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)'
79+
stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4
80+
7h22M4 15h22M4 23h22'/></svg>")
81+
navbar-light-brand-color: "#ffffff"
82+
navbar-light-brand-hover-color: "#ffffff"
83+
navbar-light-hover-color: "#6a788a"
84+
navbar-light-active-color: "#d3d4d5"
85+
navbar-dark-bg: "#24292f"
86+
navbar-dark-color: "#ffffff"
87+
navbar-dark-brand-color: "#ffffff"
88+
navbar-dark-toggler-icon-bg: >
89+
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
90+
viewBox='0 0 30 30'><path stroke='rgba(255, 255, 255, 1)'
91+
stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4
92+
7h22M4 15h22M4 23h22'/></svg>")
93+
navbar-dark-brand-hover-color: "#ffffff"
94+
navbar-dark-toggler-border-color: "#24292f"
95+
navbar-dark-hover-color: "#6a788a"
96+
navbar-dark-active-color: "#d3d4d5"
97+
input-placeholder-color: "#6a788a"
98+
link-decoration: none
99+
pkgdown-footer-bg: "#0d1117"
100+
pkgdown-footer-color: "#8b949e"
101+
dropdown-bg: "#22272e"
102+
dropdown-border-color: "#6c757d80"
103+
dropdown-divider-bg: "#6c757d80"
104+
dropdown-dark-bg: "#24292f"
105+
dropdown-dark-border-color: "#6c757d80"
106+
dropdown-dark-divider-bg: "#6c757d80"
107+
nav-pills-link-active-bg: "#24292f"
108+
nav-pills-link-active-color: "#ffffff"
109+
nav-link-hover-color: "#6a788a"
110+
nav-link-color: "#6c757d"
111+
nav-link-font-weight: 800

‎inst/brand_yml/_brand.yaml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ color:
2828
purple: "#8250df"
2929
red: "#cf222e"
3030
code: "#e83e8c"
31+
dk-dark: "#343a40"
3132
dk-black: "#373e47"
3233
dk-blue: "#2b8ffd"
3334
dk-green: "#2da44e"
@@ -41,6 +42,8 @@ color:
4142
warning: orange
4243
danger: red
4344
info: purple
45+
dark: dk-dark
46+
light: light
4447
foreground: dark
4548
background: white
4649

‎inst/pkgdown/_pkgdown.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ template:
2424
purple: "#8250df"
2525
red: "#cf222e"
2626
code: "#e83e8c"
27+
dk-dark: "#343a40"
2728
dk-black: "#373e47"
2829
dk-blue: "#2b8ffd"
2930
dk-green: "#2da44e"
@@ -37,6 +38,8 @@ template:
3738
warning: orange
3839
danger: red
3940
info: purple
41+
dark: dk-dark
42+
light: light
4043
foreground: dark
4144
background: white
4245
typography:

‎inst/pkgdown/assets/BS5/gitdevr.css‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1118,3 +1118,215 @@ div.callout-body-container.callout-body .btn-copy-ex {
11181118
padding: 0;
11191119
width: 1px;
11201120
}
1121+
1122+
/* --- Buttons in dark mode--- */
1123+
[data-bs-theme="dark"] {
1124+
.btn-default {
1125+
--bs-btn-color: #373e47;
1126+
--bs-btn-bg: #c3c5c8;
1127+
--bs-btn-border-color: #c3c5c8;
1128+
--bs-btn-hover-color: #373e47;
1129+
--bs-btn-hover-bg: #ccced0;
1130+
--bs-btn-hover-border-color: #c9cbce;
1131+
--bs-btn-focus-shadow-rgb: 174, 177, 181;
1132+
--bs-btn-active-color: #373e47;
1133+
--bs-btn-active-bg: #cfd1d3;
1134+
--bs-btn-active-border-color: #c9cbce;
1135+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1136+
--bs-btn-disabled-color: #373e47;
1137+
--bs-btn-disabled-bg: #c3c5c8;
1138+
--bs-btn-disabled-border-color: #c3c5c8;
1139+
}
1140+
1141+
.btn-primary {
1142+
--bs-btn-bg: var(--bs-primary-color);
1143+
--bs-btn-border-color: var(--bs-primary-color);
1144+
--bs-btn-hover-bg: #303439;
1145+
--bs-btn-hover-border-color: #2d3136;
1146+
--bs-btn-focus-shadow-rgb: 86, 90, 95;
1147+
--bs-btn-active-bg: #2d3136;
1148+
--bs-btn-active-border-color: #2a2e32;
1149+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1150+
--bs-btn-disabled-bg: var(--bs-primary-color);
1151+
--bs-btn-disabled-border-color: var(--bs-primary-color);
1152+
}
1153+
1154+
.btn-success {
1155+
--bs-btn-bg: var(--bs-success-color);
1156+
--bs-btn-border-color: var(--bs-success-color);
1157+
--bs-btn-hover-bg: #4db269;
1158+
--bs-btn-hover-border-color: #42ad60;
1159+
--bs-btn-focus-shadow-rgb: 47, 149, 77;
1160+
--bs-btn-active-bg: #57b671;
1161+
--bs-btn-active-border-color: #42ad60;
1162+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1163+
--bs-btn-disabled-bg: var(--bs-success-color);
1164+
--bs-btn-disabled-border-color: var(--bs-success-color);
1165+
}
1166+
1167+
.btn-info {
1168+
--bs-btn-bg: var(--bs-info-color);
1169+
--bs-btn-border-color: var(--bs-info-color);
1170+
--bs-btn-hover-bg: #a698c8;
1171+
--bs-btn-hover-border-color: #a192c5;
1172+
--bs-btn-focus-shadow-rgb: 136, 123, 172;
1173+
--bs-btn-active-bg: #ab9ecb;
1174+
--bs-btn-active-border-color: #a192c5;
1175+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1176+
--bs-btn-disabled-bg: var(--bs-info-color);
1177+
--bs-btn-disabled-border-color: var(--bs-info-color);
1178+
}
1179+
1180+
.btn-warning {
1181+
--bs-btn-color: #373e47;
1182+
--bs-btn-bg: var(--bs-warning-color);
1183+
--bs-btn-border-color: var(--bs-warning-color);
1184+
--bs-btn-hover-color: var(--bs-white);
1185+
--bs-btn-hover-bg: #dab44c;
1186+
--bs-btn-hover-border-color: #d8b041;
1187+
--bs-btn-focus-shadow-rgb: 188, 151, 48;
1188+
--bs-btn-active-color: #373e47;
1189+
--bs-btn-active-bg: #ddb956;
1190+
--bs-btn-active-border-color: #d8b041;
1191+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1192+
--bs-btn-disabled-color: #373e47;
1193+
--bs-btn-disabled-bg: var(--bs-warning-color);
1194+
--bs-btn-disabled-border-color: var(--bs-warning-color);
1195+
}
1196+
1197+
.btn-danger {
1198+
--bs-btn-bg: var(--bs-danger-color);
1199+
--bs-btn-border-color: var(--bs-danger-color);
1200+
--bs-btn-hover-bg: #de858a;
1201+
--bs-btn-hover-border-color: #dc7d83;
1202+
--bs-btn-focus-shadow-rgb: 192, 104, 110;
1203+
--bs-btn-active-bg: #e08c91;
1204+
--bs-btn-active-border-color: #dc7d83;
1205+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1206+
--bs-btn-disabled-bg: var(--bs-danger-color);
1207+
--bs-btn-disabled-border-color: var(--bs-danger-color);
1208+
}
1209+
1210+
.btn-outline-default {
1211+
--bs-btn-color: #c3c5c8;
1212+
--bs-btn-border-color: #c3c5c8;
1213+
--bs-btn-hover-color: #373e47;
1214+
--bs-btn-hover-bg: #c3c5c8;
1215+
--bs-btn-hover-border-color: #c3c5c8;
1216+
--bs-btn-focus-shadow-rgb: 195, 197, 200;
1217+
--bs-btn-active-color: #373e47;
1218+
--bs-btn-active-bg: #c3c5c8;
1219+
--bs-btn-active-border-color: #c3c5c8;
1220+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1221+
--bs-btn-disabled-color: #c3c5c8;
1222+
--bs-btn-disabled-bg: transparent;
1223+
--bs-btn-disabled-border-color: #c3c5c8;
1224+
--bs-btn-bg: transparent;
1225+
--bs-gradient: none;
1226+
}
1227+
1228+
.btn-outline-primary {
1229+
--bs-btn-color: var(--bs-primary-color);
1230+
--bs-btn-border-color: var(--bs-primary-color);
1231+
--bs-btn-hover-bg: var(--bs-primary-color);
1232+
--bs-btn-hover-border-color: var(--bs-primary-color);
1233+
--bs-btn-focus-shadow-rgb: 56, 61, 67;
1234+
--bs-btn-active-bg: var(--bs-primary-color);
1235+
--bs-btn-active-border-color: var(--bs-primary-color);
1236+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1237+
--bs-btn-disabled-color: var(--bs-primary-color);
1238+
--bs-btn-disabled-bg: transparent;
1239+
--bs-btn-disabled-border-color: var(--bs-primary-color);
1240+
--bs-btn-bg: transparent;
1241+
--bs-gradient: none;
1242+
}
1243+
1244+
.btn-outline-success {
1245+
--bs-btn-color: var(--bs-success-color);
1246+
--bs-btn-border-color: var(--bs-success-color);
1247+
--bs-btn-hover-bg: var(--bs-success-color);
1248+
--bs-btn-hover-border-color: var(--bs-success-color);
1249+
--bs-btn-focus-shadow-rgb: 45, 164, 78;
1250+
--bs-btn-active-bg: var(--bs-success-color);
1251+
--bs-btn-active-border-color: var(--bs-success-color);
1252+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1253+
--bs-btn-disabled-color: var(--bs-success-color);
1254+
--bs-btn-disabled-bg: transparent;
1255+
--bs-btn-disabled-border-color: var(--bs-success-color);
1256+
--bs-btn-bg: transparent;
1257+
--bs-gradient: none;
1258+
}
1259+
1260+
.btn-outline-info {
1261+
--bs-btn-color: var(--bs-info-color);
1262+
--bs-btn-border-color: var(--bs-info-color);
1263+
--bs-btn-hover-bg: var(--bs-info-color);
1264+
--bs-btn-hover-border-color: var(--bs-info-color);
1265+
--bs-btn-focus-shadow-rgb: 150, 134, 190;
1266+
--bs-btn-active-bg: var(--bs-info-color);
1267+
--bs-btn-active-border-color: var(--bs-info-color);
1268+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1269+
--bs-btn-disabled-color: var(--bs-info-color);
1270+
--bs-btn-disabled-bg: transparent;
1271+
--bs-btn-disabled-border-color: var(--bs-info-color);
1272+
--bs-btn-bg: transparent;
1273+
--bs-gradient: none;
1274+
}
1275+
1276+
.btn-outline-warning {
1277+
--bs-btn-color: var(--bs-warning-color);
1278+
--bs-btn-border-color: var(--bs-warning-color);
1279+
--bs-btn-hover-color: #373e47;
1280+
--bs-btn-hover-bg: var(--bs-warning-color);
1281+
--bs-btn-hover-border-color: var(--bs-warning-color);
1282+
--bs-btn-focus-shadow-rgb: 212, 167, 44;
1283+
--bs-btn-active-color: #373e47;
1284+
--bs-btn-active-bg: var(--bs-warning-color);
1285+
--bs-btn-active-border-color: var(--bs-warning-color);
1286+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1287+
--bs-btn-disabled-color: var(--bs-warning-color);
1288+
--bs-btn-disabled-bg: transparent;
1289+
--bs-btn-disabled-border-color: var(--bs-warning-color);
1290+
--bs-btn-bg: transparent;
1291+
--bs-gradient: none;
1292+
}
1293+
1294+
.btn-outline-danger {
1295+
--bs-btn-color: var(--bs-danger-color);
1296+
--bs-btn-border-color: var(--bs-danger-color);
1297+
--bs-btn-hover-bg: var(--bs-danger-color);
1298+
--bs-btn-hover-border-color: var(--bs-danger-color);
1299+
--bs-btn-focus-shadow-rgb: 216, 111, 117;
1300+
--bs-btn-active-bg: var(--bs-danger-color);
1301+
--bs-btn-active-border-color: var(--bs-danger-color);
1302+
--bs-btn-active-shadow: inset 0 3px 5px rgba(55, 62, 71, 0.125);
1303+
--bs-btn-disabled-color: var(--bs-danger-color);
1304+
--bs-btn-disabled-bg: transparent;
1305+
--bs-btn-disabled-border-color: var(--bs-danger-color);
1306+
--bs-btn-bg: transparent;
1307+
--bs-gradient: none;
1308+
}
1309+
1310+
.btn-link {
1311+
--bs-btn-font-weight: 400;
1312+
--bs-btn-color: var(--bs-link-color);
1313+
--bs-btn-bg: transparent;
1314+
--bs-btn-border-color: transparent;
1315+
--bs-btn-hover-color: var(--bs-link-hover-color);
1316+
--bs-btn-hover-border-color: transparent;
1317+
--bs-btn-active-color: var(--bs-link-hover-color);
1318+
--bs-btn-active-border-color: transparent;
1319+
--bs-btn-disabled-color: #878b91;
1320+
--bs-btn-disabled-border-color: transparent;
1321+
--bs-btn-box-shadow: 0 0 0 #000;
1322+
--bs-btn-focus-shadow-rgb: 45, 131, 226;
1323+
}
1324+
1325+
.btn-link:focus-visible {
1326+
color: var(--bs-btn-color);
1327+
}
1328+
1329+
.btn-link:hover {
1330+
color: var(--bs-btn-hover-color);
1331+
}
1332+
}

‎inst/pkgdown/assets/BS5/gitdevr.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)