From 93b36fef0bfeb2445c34d32ef93135980438fb35 Mon Sep 17 00:00:00 2001 From: intergrav Date: Fri, 12 Jul 2024 05:21:01 -0400 Subject: [PATCH] feat: catppuccin themes --- README.md | 2 +- package.json | 2 +- theme/catppuccin-frappe.css | 47 ++++++++++++++++++++++++++++++++++ theme/catppuccin-macchiato.css | 47 ++++++++++++++++++++++++++++++++++ theme/catppuccin-mocha.css | 47 ++++++++++++++++++++++++++++++++++ 5 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 theme/catppuccin-frappe.css create mode 100644 theme/catppuccin-macchiato.css create mode 100644 theme/catppuccin-mocha.css diff --git a/README.md b/README.md index 3def585..fb71d51 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ This turns the header into a sidebar on displays that are wide enough to support ## Themes -You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, place this after your main stylesheet: +You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. To use a theme, simply apply it after the dev.css stylesheet. I provide a terminal-like theme, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, place this after your main stylesheet: ```html diff --git a/package.json b/package.json index 90da25b..cccdba0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@intergrav/dev.css", - "version": "3.1.0", + "version": "3.1.1", "description": "Tiny, simple, classless CSS framework in the style of Vercel's Geist design system", "author": "intergrav (https://intergrav.xyz)", "license": "MIT", diff --git a/theme/catppuccin-frappe.css b/theme/catppuccin-frappe.css new file mode 100644 index 0000000..dc53990 --- /dev/null +++ b/theme/catppuccin-frappe.css @@ -0,0 +1,47 @@ +/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ +/* about: catppuccin's frappé color scheme - https://github.com/catppuccin */ +/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ + +:root { + /* light colors - latte */ + --dc-tx-1: #4c4f69; /* primary text | Text */ + --dc-tx-2: #4c4f69; /* secondary text | Text */ + --dc-bg-1: #e6e9ef; /* main background | Mantle */ + --dc-bg-2: #eff1f5; /* secondary background | Base */ + --dc-bg-3: #ccd0da; /* outlines | Surface0 */ + --dc-lk-1: #1e66f5; /* link text | Blue */ + --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ + --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ + --dc-lkb-tx: #4c4f69; /* link button text | Text */ + --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */ + --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */ + + /* dark colors */ + --dc-d-tx-1: #c6d0f5; /* primary text | Text */ + --dc-d-tx-2: #c6d0f5; /* secondary text | Text */ + --dc-d-bg-1: #292c3c; /* main background | Mantle */ + --dc-d-bg-2: #303446; /* secondary background | Base */ + --dc-d-bg-3: #414559; /* outlines | Surface0 */ + --dc-d-lk-1: #8caaee; /* link text | Blue */ + --dc-d-lkb-1: #51576d; /* link button background | Surface1 */ + --dc-d-lkb-2: #414559; /* link button background (hover) | Surface0 */ + --dc-d-lkb-tx: #c6d0f5; /* link button text | Text */ + --dc-d-ac-1: #949cbb1e; /* accent/selection color | Overlay2 + 1e */ + --dc-d-ac-tx: #c6d0f5; /* accent/selection color text | Text */ +} + +@media (prefers-color-scheme: dark) { + :root { + --dc-tx-1: var(--dc-d-tx-1); + --dc-tx-2: var(--dc-d-tx-2); + --dc-bg-1: var(--dc-d-bg-1); + --dc-bg-2: var(--dc-d-bg-2); + --dc-bg-3: var(--dc-d-bg-3); + --dc-lk-1: var(--dc-d-lk-1); + --dc-lkb-1: var(--dc-d-lkb-1); + --dc-lkb-2: var(--dc-d-lkb-2); + --dc-lkb-tx: var(--dc-d-lkb-tx); + --dc-ac-1: var(--dc-d-ac-1); + --dc-ac-tx: var(--dc-d-ac-tx); + } +} diff --git a/theme/catppuccin-macchiato.css b/theme/catppuccin-macchiato.css new file mode 100644 index 0000000..bd66640 --- /dev/null +++ b/theme/catppuccin-macchiato.css @@ -0,0 +1,47 @@ +/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ +/* about: catppuccin's macchiato color scheme - https://github.com/catppuccin */ +/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ + +:root { + /* light colors - latte */ + --dc-tx-1: #4c4f69; /* primary text | Text */ + --dc-tx-2: #4c4f69; /* secondary text | Text */ + --dc-bg-1: #e6e9ef; /* main background | Mantle */ + --dc-bg-2: #eff1f5; /* secondary background | Base */ + --dc-bg-3: #ccd0da; /* outlines | Surface0 */ + --dc-lk-1: #1e66f5; /* link text | Blue */ + --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ + --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ + --dc-lkb-tx: #4c4f69; /* link button text | Text */ + --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */ + --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */ + + /* dark colors */ + --dc-d-tx-1: #cad3f5; /* primary text | Text */ + --dc-d-tx-2: #cad3f5; /* secondary text | Text */ + --dc-d-bg-1: #1e2030; /* main background | Mantle */ + --dc-d-bg-2: #24273a; /* secondary background | Base */ + --dc-d-bg-3: #363a4f; /* outlines | Surface0 */ + --dc-d-lk-1: #8aadf4; /* link text | Blue */ + --dc-d-lkb-1: #494d64; /* link button background | Surface1 */ + --dc-d-lkb-2: #363a4f; /* link button background (hover) | Surface0 */ + --dc-d-lkb-tx: #cad3f5; /* link button text | Text */ + --dc-d-ac-1: #939ab71e; /* accent/selection color | Overlay2 + 1e */ + --dc-d-ac-tx: #cad3f5; /* accent/selection color text | Text */ +} + +@media (prefers-color-scheme: dark) { + :root { + --dc-tx-1: var(--dc-d-tx-1); + --dc-tx-2: var(--dc-d-tx-2); + --dc-bg-1: var(--dc-d-bg-1); + --dc-bg-2: var(--dc-d-bg-2); + --dc-bg-3: var(--dc-d-bg-3); + --dc-lk-1: var(--dc-d-lk-1); + --dc-lkb-1: var(--dc-d-lkb-1); + --dc-lkb-2: var(--dc-d-lkb-2); + --dc-lkb-tx: var(--dc-d-lkb-tx); + --dc-ac-1: var(--dc-d-ac-1); + --dc-ac-tx: var(--dc-d-ac-tx); + } +} diff --git a/theme/catppuccin-mocha.css b/theme/catppuccin-mocha.css new file mode 100644 index 0000000..15121e2 --- /dev/null +++ b/theme/catppuccin-mocha.css @@ -0,0 +1,47 @@ +/* theme for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ +/* about: catppuccin's mocha color scheme - https://github.com/catppuccin */ +/* note: this will use catppuccin latte if the user's device prefers light mode for accessibility and consistency */ + +:root { + /* light colors - latte */ + --dc-tx-1: #4c4f69; /* primary text | Text */ + --dc-tx-2: #4c4f69; /* secondary text | Text */ + --dc-bg-1: #e6e9ef; /* main background | Mantle */ + --dc-bg-2: #eff1f5; /* secondary background | Base */ + --dc-bg-3: #ccd0da; /* outlines | Surface0 */ + --dc-lk-1: #1e66f5; /* link text | Blue */ + --dc-lkb-1: #bcc0cc; /* link button background | Surface1 */ + --dc-lkb-2: #ccd0da; /* link button background (hover) | Surface0 */ + --dc-lkb-tx: #4c4f69; /* link button text | Text */ + --dc-ac-1: #7c7f931e; /* accent/selection color | Overlay2 + 1e */ + --dc-ac-tx: #4c4f69; /* accent/selection color text | Text */ + + /* dark colors */ + --dc-d-tx-1: #cdd6f4; /* primary text | Text */ + --dc-d-tx-2: #cdd6f4; /* secondary text | Text */ + --dc-d-bg-1: #181825; /* main background | Mantle */ + --dc-d-bg-2: #1e1e2e; /* secondary background | Base */ + --dc-d-bg-3: #313244; /* outlines | Surface0 */ + --dc-d-lk-1: #89b4fa; /* link text | Blue */ + --dc-d-lkb-1: #45475a; /* link button background | Surface1 */ + --dc-d-lkb-2: #313244; /* link button background (hover) | Surface0 */ + --dc-d-lkb-tx: #cdd6f4; /* link button text | Text */ + --dc-d-ac-1: #9399b21e; /* accent/selection color | Overlay2 + 1e */ + --dc-d-ac-tx: #cdd6f4; /* accent/selection color text | Text */ +} + +@media (prefers-color-scheme: dark) { + :root { + --dc-tx-1: var(--dc-d-tx-1); + --dc-tx-2: var(--dc-d-tx-2); + --dc-bg-1: var(--dc-d-bg-1); + --dc-bg-2: var(--dc-d-bg-2); + --dc-bg-3: var(--dc-d-bg-3); + --dc-lk-1: var(--dc-d-lk-1); + --dc-lkb-1: var(--dc-d-lkb-1); + --dc-lkb-2: var(--dc-d-lkb-2); + --dc-lkb-tx: var(--dc-d-lkb-tx); + --dc-ac-1: var(--dc-d-ac-1); + --dc-ac-tx: var(--dc-d-ac-tx); + } +} -- 2.51.2