Add light themes

Nate Butler created 2 years ago

Change summary

styles/src/themes/atelier-forest-light.ts   | 55 +++++++++++++++++++++++
styles/src/themes/atelier-heath-light.ts    | 55 +++++++++++++++++++++++
styles/src/themes/atelier-lakeside-light.ts | 55 +++++++++++++++++++++++
styles/src/themes/atelier-plateau-light.ts  | 55 +++++++++++++++++++++++
styles/src/themes/atelier-savanna-light.ts  | 55 +++++++++++++++++++++++
styles/src/themes/atelier-seaside-dark.ts   |  2 
styles/src/themes/atelier-seaside-light.ts  | 55 +++++++++++++++++++++++
7 files changed, 331 insertions(+), 1 deletion(-)

Detailed changes

styles/src/themes/atelier-forest-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Forest Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest/",
+    },
+    colors: {
+        base00: "#f1efee",
+        base01: "#e6e2e0",
+        base02: "#a8a19f",
+        base03: "#9c9491",
+        base04: "#766e6b",
+        base05: "#68615e",
+        base06: "#2c2421",
+        base07: "#1b1918",
+        base08: "#f22c40",
+        base09: "#df5320",
+        base0A: "#c38418",
+        base0B: "#7b9726",
+        base0C: "#3d97b8",
+        base0D: "#407ee7",
+        base0E: "#6666ea",
+        base0F: "#c33ff3"
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-heath-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Heath Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/heath/",
+    },
+    colors: {
+        base00: "#f7f3f7",
+        base01: "#d8cad8",
+        base02: "#ab9bab",
+        base03: "#9e8f9e",
+        base04: "#776977",
+        base05: "#695d69",
+        base06: "#292329",
+        base07: "#1b181b",
+        base08: "#ca402b",
+        base09: "#a65926",
+        base0A: "#bb8a35",
+        base0B: "#918b3b",
+        base0C: "#159393",
+        base0D: "#516aec",
+        base0E: "#7b59c0",
+        base0F: "#cc33cc",
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-lakeside-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Lakeside Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/lakeside/",
+    },
+    colors: {
+        base00: "#ebf8ff",
+        base01: "#c1e4f6",
+        base02: "#7ea2b4",
+        base03: "#7195a8",
+        base04: "#5a7b8c",
+        base05: "#516d7b",
+        base06: "#1f292e",
+        base07: "#161b1d",
+        base08: "#d22d72",
+        base09: "#935c25",
+        base0A: "#8a8a0f",
+        base0B: "#568c3b",
+        base0C: "#2d8f6f",
+        base0D: "#257fad",
+        base0E: "#6b6bb8",
+        base0F: "#b72dd2",
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-plateau-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Plateau Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/plateau/",
+    },
+    colors: {
+        base00: "#f4ecec",
+        base01: "#e7dfdf",
+        base02: "#8a8585",
+        base03: "#7e7777",
+        base04: "#655d5d",
+        base05: "#585050",
+        base06: "#292424",
+        base07: "#1b1818",
+        base08: "#ca4949",
+        base09: "#b45a3c",
+        base0A: "#a06e3b",
+        base0B: "#4b8b8b",
+        base0C: "#5485b6",
+        base0D: "#7272ca",
+        base0E: "#8464c4",
+        base0F: "#bd5187"
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-savanna-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Savanna Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna/",
+    },
+    colors: {
+        base00: "#ecf4ee",
+        base01: "#dfe7e2",
+        base02: "#87928a",
+        base03: "#78877d",
+        base04: "#5f6d64",
+        base05: "#526057",
+        base06: "#232a25",
+        base07: "#171c19",
+        base08: "#b16139",
+        base09: "#9f713c",
+        base0A: "#a07e3b",
+        base0B: "#489963",
+        base0C: "#1c9aa0",
+        base0D: "#478c90",
+        base0E: "#55859b",
+        base0F: "#867469",
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta

styles/src/themes/atelier-seaside-dark.ts

@@ -7,7 +7,7 @@ const variant: Variant = {
     meta: {
         name: `${name} Seaside Dark`,
         ...metaCommon,
-        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/savanna/",
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/",
     },
     colors: {
         base00: "#131513",

styles/src/themes/atelier-seaside-light.ts

@@ -0,0 +1,55 @@
+import chroma from "chroma-js"
+import { Meta } from "./common/colorScheme"
+import { colorRamp, createColorScheme } from "./common/ramps"
+import { metaCommon, name, buildSyntax, Variant } from "./common/atelier-common"
+
+const variant: Variant = {
+    meta: {
+        name: `${name} Seaside Light`,
+        ...metaCommon,
+        url: "https://atelierbram.github.io/syntax-highlighting/atelier-schemes/seaside/",
+    },
+    colors: {
+        base00: "#f4fbf4",
+        base01: "#cfe8cf",
+        base02: "#8ca68c",
+        base03: "#809980",
+        base04: "#687d68",
+        base05: "#5e6e5e",
+        base06: "#242924",
+        base07: "#131513",
+        base08: "#e6193c",
+        base09: "#87711d",
+        base0A: "#98981b",
+        base0B: "#29a329",
+        base0C: "#1999b3",
+        base0D: "#3d62f5",
+        base0E: "#ad2bee",
+        base0F: "#e619c3",
+    }
+}
+
+const syntax = buildSyntax(variant)
+
+const theme = (variant: Variant) => {
+    const { meta, colors } = variant
+
+    return createColorScheme(meta.name, true, {
+        neutral: chroma
+            .scale([
+                colors.base00, colors.base01, colors.base02, colors.base03, colors.base04, colors.base05, colors.base06, colors.base07
+            ].reverse()),
+        red: colorRamp(chroma(colors.base08)),
+        orange: colorRamp(chroma(colors.base09)),
+        yellow: colorRamp(chroma(colors.base0A)),
+        green: colorRamp(chroma(colors.base0B)),
+        cyan: colorRamp(chroma(colors.base0C)),
+        blue: colorRamp(chroma(colors.base0D)),
+        violet: colorRamp(chroma(colors.base0E)),
+        magenta: colorRamp(chroma(colors.base0F)),
+    }, syntax)
+}
+
+export const dark = theme(variant)
+
+export const meta: Meta = variant.meta