Add multiple colour schemes

This commit is contained in:
James Panther
2021-08-20 17:02:08 +10:00
parent 62703a114b
commit ecfa2d395b
33 changed files with 331 additions and 176 deletions
+13 -13
View File
@@ -46,7 +46,7 @@ body button {
/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
@apply text-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 dark:text-gray-200;
@apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
}
/* Other */
.chroma .x {
@@ -73,13 +73,13 @@ body button {
}
/* LineNumbersTable */
.chroma .lnt {
@apply text-gray-600 dark:text-gray-300;
@apply text-neutral-600 dark:text-neutral-300;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
/* LineNumbers */
.chroma .ln {
@apply text-gray-600 dark:text-gray-300;
@apply text-neutral-600 dark:text-neutral-300;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
@@ -300,31 +300,31 @@ body button {
}
/* Comment */
.chroma .c {
@apply italic text-gray-400 dark:text-gray-500;
@apply italic text-neutral-400 dark:text-neutral-500;
}
/* CommentHashbang */
.chroma .ch {
@apply italic font-semibold text-gray-400 dark:text-gray-500;
@apply italic font-semibold text-neutral-400 dark:text-neutral-500;
}
/* CommentMultiline */
.chroma .cm {
@apply italic text-gray-400 dark:text-gray-500;
@apply italic text-neutral-400 dark:text-neutral-500;
}
/* CommentSingle */
.chroma .c1 {
@apply italic text-gray-400 dark:text-gray-500;
@apply italic text-neutral-400 dark:text-neutral-500;
}
/* CommentSpecial */
.chroma .cs {
@apply italic text-gray-400 dark:text-gray-500;
@apply italic text-neutral-400 dark:text-neutral-500;
}
/* CommentPreproc */
.chroma .cp {
@apply italic text-gray-400 dark:text-gray-500;
@apply italic text-neutral-400 dark:text-neutral-500;
}
/* CommentPreprocFile */
.chroma .cpf {
@apply italic text-gray-400 dark:text-gray-500;
@apply italic text-neutral-400 dark:text-neutral-500;
}
/* Generic */
.chroma .g {
@@ -341,7 +341,7 @@ body button {
}
/* GenericHeading */
.chroma .gh {
@apply font-semibold text-gray-500;
@apply font-semibold text-neutral-500;
}
/* GenericInserted */
.chroma .gi {
@@ -361,11 +361,11 @@ body button {
}
/* GenericSubheading */
.chroma .gu {
@apply text-gray-500;
@apply text-neutral-500;
}
/* GenericTraceback */
.chroma .gt {
@apply text-gray-500;
@apply text-neutral-500;
}
/* GenericUnderline */
.chroma .gl {
+37
View File
@@ -0,0 +1,37 @@
/* Avocado scheme */
:root {
--color-neutral: #fff;
/* Warm Gray */
--color-neutral-50: #fafaf9;
--color-neutral-100: #f5f5f4;
--color-neutral-200: #e7e5e4;
--color-neutral-300: #d6d3d1;
--color-neutral-400: #a8a29e;
--color-neutral-500: #78716c;
--color-neutral-600: #57534e;
--color-neutral-700: #44403c;
--color-neutral-800: #292524;
--color-neutral-900: #1c1917;
/* Lime */
--color-primary-50: #f7fee7;
--color-primary-100: #ecfccb;
--color-primary-200: #d9f99d;
--color-primary-300: #bef264;
--color-primary-400: #a3e635;
--color-primary-500: #84cc16;
--color-primary-600: #65a30d;
--color-primary-700: #4d7c0f;
--color-primary-800: #3f6212;
--color-primary-900: #365314;
/* Emerald */
--color-secondary-50: #ecfdf5;
--color-secondary-100: #d1fae5;
--color-secondary-200: #a7f3d0;
--color-secondary-300: #6ee7b7;
--color-secondary-400: #34d399;
--color-secondary-500: #10b981;
--color-secondary-600: #059669;
--color-secondary-700: #047857;
--color-secondary-800: #065f46;
--color-secondary-900: #064e3b;
}
+37
View File
@@ -0,0 +1,37 @@
/* Congo scheme */
:root {
--color-neutral: #fff;
/* Gray */
--color-neutral-50: #fafafa;
--color-neutral-100: #f4f4f5;
--color-neutral-200: #e4e4e7;
--color-neutral-300: #d4d4d8;
--color-neutral-400: #a1a1aa;
--color-neutral-500: #71717a;
--color-neutral-600: #52525b;
--color-neutral-700: #3f3f46;
--color-neutral-800: #27272a;
--color-neutral-900: #18181b;
/* Violet */
--color-primary-50: #f5f3ff;
--color-primary-100: #ede9fe;
--color-primary-200: #ddd6fe;
--color-primary-300: #c4b5fd;
--color-primary-400: #a78bfa;
--color-primary-500: #8b5cf6;
--color-primary-600: #7c3aed;
--color-primary-700: #6d28d9;
--color-primary-800: #5b21b6;
--color-primary-900: #4c1d95;
/* Fuchsia */
--color-secondary-50: #fdf4ff;
--color-secondary-100: #fae8ff;
--color-secondary-200: #f5d0fe;
--color-secondary-300: #f0abfc;
--color-secondary-400: #e879f9;
--color-secondary-500: #d946ef;
--color-secondary-600: #c026d3;
--color-secondary-700: #a21caf;
--color-secondary-800: #86198f;
--color-secondary-900: #701a75;
}
+37
View File
@@ -0,0 +1,37 @@
/* Fire scheme */
:root {
--color-neutral: #fff;
/* Warm Gray */
--color-neutral-50: #fafaf9;
--color-neutral-100: #f5f5f4;
--color-neutral-200: #e7e5e4;
--color-neutral-300: #d6d3d1;
--color-neutral-400: #a8a29e;
--color-neutral-500: #78716c;
--color-neutral-600: #57534e;
--color-neutral-700: #44403c;
--color-neutral-800: #292524;
--color-neutral-900: #1c1917;
/* Orange */
--color-primary-50: #fff7ed;
--color-primary-100: #ffedd5;
--color-primary-200: #fed7aa;
--color-primary-300: #fdba74;
--color-primary-400: #fb923c;
--color-primary-500: #f97316;
--color-primary-600: #ea580c;
--color-primary-700: #c2410c;
--color-primary-800: #9a3412;
--color-primary-900: #7c2d12;
/* Rose */
--color-secondary-50: #fff1f2;
--color-secondary-100: #ffe4e6;
--color-secondary-200: #fecdd3;
--color-secondary-300: #fda4af;
--color-secondary-400: #fb7185;
--color-secondary-500: #f43f5e;
--color-secondary-600: #e11d48;
--color-secondary-700: #be123c;
--color-secondary-800: #9f1239;
--color-secondary-900: #881337;
}
+37
View File
@@ -0,0 +1,37 @@
/* Ocean scheme */
:root {
--color-neutral: #fff;
/* Cool Gray */
--color-neutral-50: #f8fafc;
--color-neutral-100: #f1f5f9;
--color-neutral-200: #e2e8f0;
--color-neutral-300: #cbd5e1;
--color-neutral-400: #94a3b8;
--color-neutral-500: #64748b;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1e293b;
--color-neutral-900: #0f172a;
/* Blue */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-300: #93c5fd;
--color-primary-400: #60a5fa;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
/* Cyan */
--color-secondary-50: #ecfeff;
--color-secondary-100: #cffafe;
--color-secondary-200: #a5f3fc;
--color-secondary-300: #67e8f9;
--color-secondary-400: #22d3ee;
--color-secondary-500: #06b6d4;
--color-secondary-600: #0891b2;
--color-secondary-700: #0e7490;
--color-secondary-800: #155e75;
--color-secondary-900: #164e63;
}