fix: add support for github-flavored alerts, update callout colors (#5)

* fix(example/components): add github-flavored alerts * fix: update callout colors to match mdbook admonitions * fix: details bg styling * fix: details bg styling --------- Co-authored-by: willow <[email protected]>
catppuccin · Sep 7, 2024 · 2564299 · 2564299
1 parent 648c6a2
commit 2564299
Show file tree

Hide file tree

Showing 44 changed files with 782 additions and 170 deletions.
diff --git a/site/src/components.md b/site/src/components.md
@@ -24,6 +24,23 @@ This is a dangerous warning.
 This is a details block.
 :::
 
+## GitHub-flavored Alerts
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
 ## Code Blocks
 
 ```js{1,4,6-8}

diff --git a/theme/frappe/blue.css b/theme/frappe/blue.css
@@ -30,10 +30,15 @@
   --vp-c-text-3: #6c6f85;
 
   /* Callout Colors */
-  --vp-c-default-soft: #ccd0da;
-  --vp-c-tip-soft: hsla(220, 91%, 54%, 0.20);
+  --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20);
   --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20);
   --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-important-soft: hsla(266, 85%, 58%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20);
+  --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20);
+  --vp-custom-block-details-bg: #ccd0da;
 
   /* Catppuccin Accents */
   --ctp-latte-rosewater: #dc8a78;
@@ -69,6 +74,8 @@
   --vp-c-gray-3: rgb(239, 241, 245);
   --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
 
+  --vp-c-default-soft: ##ccd0da;
+
   --vp-c-indigo-1: rgb(30, 102, 245);
   --vp-c-indigo-2: rgb(21, 99, 255);
   --vp-c-indigo-3: rgb(39, 77, 158);
@@ -133,10 +140,15 @@
   --vp-c-text-3: #a5adce;
 
   /* Callout Colors */
-  --vp-c-default-soft: #414559;
-  --vp-c-tip-soft: hsla(222, 74%, 74%, 0.20);
+  --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20);
   --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20);
   --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-important-soft: hsla(277, 59%, 76%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20);
+  --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20);
+  --vp-custom-block-details-bg: #414559;
 
   /* Catppuccin Accents */
   --ctp-frappe-rosewater: #f2d5cf;
@@ -172,6 +184,8 @@
   --vp-c-gray-3: rgb(48, 52, 70);
   --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
 
+  --vp-c-default-soft: ##414559;
+
   --vp-c-indigo-1: rgb(140, 170, 238);
   --vp-c-indigo-2: rgb(133, 167, 245);
   --vp-c-indigo-3: rgb(94, 111, 154);

diff --git a/theme/frappe/flamingo.css b/theme/frappe/flamingo.css
@@ -30,10 +30,15 @@
   --vp-c-text-3: #6c6f85;
 
   /* Callout Colors */
-  --vp-c-default-soft: #ccd0da;
-  --vp-c-tip-soft: hsla(220, 91%, 54%, 0.20);
+  --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20);
   --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20);
   --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-important-soft: hsla(266, 85%, 58%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20);
+  --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20);
+  --vp-custom-block-details-bg: #ccd0da;
 
   /* Catppuccin Accents */
   --ctp-latte-rosewater: #dc8a78;
@@ -69,6 +74,8 @@
   --vp-c-gray-3: rgb(239, 241, 245);
   --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
 
+  --vp-c-default-soft: ##ccd0da;
+
   --vp-c-indigo-1: rgb(30, 102, 245);
   --vp-c-indigo-2: rgb(21, 99, 255);
   --vp-c-indigo-3: rgb(39, 77, 158);
@@ -133,10 +140,15 @@
   --vp-c-text-3: #a5adce;
 
   /* Callout Colors */
-  --vp-c-default-soft: #414559;
-  --vp-c-tip-soft: hsla(222, 74%, 74%, 0.20);
+  --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20);
   --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20);
   --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-important-soft: hsla(277, 59%, 76%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20);
+  --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20);
+  --vp-custom-block-details-bg: #414559;
 
   /* Catppuccin Accents */
   --ctp-frappe-rosewater: #f2d5cf;
@@ -172,6 +184,8 @@
   --vp-c-gray-3: rgb(48, 52, 70);
   --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
 
+  --vp-c-default-soft: ##414559;
+
   --vp-c-indigo-1: rgb(140, 170, 238);
   --vp-c-indigo-2: rgb(133, 167, 245);
   --vp-c-indigo-3: rgb(94, 111, 154);

diff --git a/theme/frappe/green.css b/theme/frappe/green.css
@@ -30,10 +30,15 @@
   --vp-c-text-3: #6c6f85;
 
   /* Callout Colors */
-  --vp-c-default-soft: #ccd0da;
-  --vp-c-tip-soft: hsla(220, 91%, 54%, 0.20);
+  --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20);
   --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20);
   --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-important-soft: hsla(266, 85%, 58%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20);
+  --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20);
+  --vp-custom-block-details-bg: #ccd0da;
 
   /* Catppuccin Accents */
   --ctp-latte-rosewater: #dc8a78;
@@ -69,6 +74,8 @@
   --vp-c-gray-3: rgb(239, 241, 245);
   --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
 
+  --vp-c-default-soft: ##ccd0da;
+
   --vp-c-indigo-1: rgb(30, 102, 245);
   --vp-c-indigo-2: rgb(21, 99, 255);
   --vp-c-indigo-3: rgb(39, 77, 158);
@@ -133,10 +140,15 @@
   --vp-c-text-3: #a5adce;
 
   /* Callout Colors */
-  --vp-c-default-soft: #414559;
-  --vp-c-tip-soft: hsla(222, 74%, 74%, 0.20);
+  --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20);
   --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20);
   --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-important-soft: hsla(277, 59%, 76%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20);
+  --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20);
+  --vp-custom-block-details-bg: #414559;
 
   /* Catppuccin Accents */
   --ctp-frappe-rosewater: #f2d5cf;
@@ -172,6 +184,8 @@
   --vp-c-gray-3: rgb(48, 52, 70);
   --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
 
+  --vp-c-default-soft: ##414559;
+
   --vp-c-indigo-1: rgb(140, 170, 238);
   --vp-c-indigo-2: rgb(133, 167, 245);
   --vp-c-indigo-3: rgb(94, 111, 154);

diff --git a/theme/frappe/lavender.css b/theme/frappe/lavender.css
@@ -30,10 +30,15 @@
   --vp-c-text-3: #6c6f85;
 
   /* Callout Colors */
-  --vp-c-default-soft: #ccd0da;
-  --vp-c-tip-soft: hsla(220, 91%, 54%, 0.20);
+  --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20);
   --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20);
   --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-important-soft: hsla(266, 85%, 58%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20);
+  --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20);
+  --vp-custom-block-details-bg: #ccd0da;
 
   /* Catppuccin Accents */
   --ctp-latte-rosewater: #dc8a78;
@@ -69,6 +74,8 @@
   --vp-c-gray-3: rgb(239, 241, 245);
   --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
 
+  --vp-c-default-soft: ##ccd0da;
+
   --vp-c-indigo-1: rgb(30, 102, 245);
   --vp-c-indigo-2: rgb(21, 99, 255);
   --vp-c-indigo-3: rgb(39, 77, 158);
@@ -133,10 +140,15 @@
   --vp-c-text-3: #a5adce;
 
   /* Callout Colors */
-  --vp-c-default-soft: #414559;
-  --vp-c-tip-soft: hsla(222, 74%, 74%, 0.20);
+  --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20);
   --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20);
   --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-important-soft: hsla(277, 59%, 76%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20);
+  --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20);
+  --vp-custom-block-details-bg: #414559;
 
   /* Catppuccin Accents */
   --ctp-frappe-rosewater: #f2d5cf;
@@ -172,6 +184,8 @@
   --vp-c-gray-3: rgb(48, 52, 70);
   --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
 
+  --vp-c-default-soft: ##414559;
+
   --vp-c-indigo-1: rgb(140, 170, 238);
   --vp-c-indigo-2: rgb(133, 167, 245);
   --vp-c-indigo-3: rgb(94, 111, 154);

diff --git a/theme/frappe/maroon.css b/theme/frappe/maroon.css
@@ -30,10 +30,15 @@
   --vp-c-text-3: #6c6f85;
 
   /* Callout Colors */
-  --vp-c-default-soft: #ccd0da;
-  --vp-c-tip-soft: hsla(220, 91%, 54%, 0.20);
+  --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20);
   --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20);
   --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-important-soft: hsla(266, 85%, 58%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20);
+  --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20);
+  --vp-custom-block-details-bg: #ccd0da;
 
   /* Catppuccin Accents */
   --ctp-latte-rosewater: #dc8a78;
@@ -69,6 +74,8 @@
   --vp-c-gray-3: rgb(239, 241, 245);
   --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
 
+  --vp-c-default-soft: ##ccd0da;
+
   --vp-c-indigo-1: rgb(30, 102, 245);
   --vp-c-indigo-2: rgb(21, 99, 255);
   --vp-c-indigo-3: rgb(39, 77, 158);
@@ -133,10 +140,15 @@
   --vp-c-text-3: #a5adce;
 
   /* Callout Colors */
-  --vp-c-default-soft: #414559;
-  --vp-c-tip-soft: hsla(222, 74%, 74%, 0.20);
+  --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20);
   --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20);
   --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-important-soft: hsla(277, 59%, 76%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20);
+  --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20);
+  --vp-custom-block-details-bg: #414559;
 
   /* Catppuccin Accents */
   --ctp-frappe-rosewater: #f2d5cf;
@@ -172,6 +184,8 @@
   --vp-c-gray-3: rgb(48, 52, 70);
   --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
 
+  --vp-c-default-soft: ##414559;
+
   --vp-c-indigo-1: rgb(140, 170, 238);
   --vp-c-indigo-2: rgb(133, 167, 245);
   --vp-c-indigo-3: rgb(94, 111, 154);

diff --git a/theme/frappe/mauve.css b/theme/frappe/mauve.css
@@ -30,10 +30,15 @@
   --vp-c-text-3: #6c6f85;
 
   /* Callout Colors */
-  --vp-c-default-soft: #ccd0da;
-  --vp-c-tip-soft: hsla(220, 91%, 54%, 0.20);
+  --vp-c-tip-soft: hsla(109, 58%, 40%, 0.20);
   --vp-c-warning-soft: hsla(35, 77%, 49%, 0.20);
   --vp-c-danger-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-caution-soft: hsla(347, 87%, 44%, 0.20);
+  --vp-c-important-soft: hsla(266, 85%, 58%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(197, 96%, 46%, 0.20);
+  --vp-custom-block-note-bg: hsla(220, 91%, 54%, 0.20);
+  --vp-custom-block-details-bg: #ccd0da;
 
   /* Catppuccin Accents */
   --ctp-latte-rosewater: #dc8a78;
@@ -69,6 +74,8 @@
   --vp-c-gray-3: rgb(239, 241, 245);
   --vp-c-gray-soft: hsla(220, 23%, 65%, 0.14);
 
+  --vp-c-default-soft: ##ccd0da;
+
   --vp-c-indigo-1: rgb(30, 102, 245);
   --vp-c-indigo-2: rgb(21, 99, 255);
   --vp-c-indigo-3: rgb(39, 77, 158);
@@ -133,10 +140,15 @@
   --vp-c-text-3: #a5adce;
 
   /* Callout Colors */
-  --vp-c-default-soft: #414559;
-  --vp-c-tip-soft: hsla(222, 74%, 74%, 0.20);
+  --vp-c-tip-soft: hsla(96, 44%, 68%, 0.20);
   --vp-c-warning-soft: hsla(40, 62%, 73%, 0.20);
   --vp-c-danger-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-caution-soft: hsla(359, 68%, 71%, 0.20);
+  --vp-c-important-soft: hsla(277, 59%, 76%, 0.20);
+
+  --vp-custom-block-info-bg: hsla(189, 48%, 73%, 0.20);
+  --vp-custom-block-note-bg: hsla(222, 74%, 74%, 0.20);
+  --vp-custom-block-details-bg: #414559;
 
   /* Catppuccin Accents */
   --ctp-frappe-rosewater: #f2d5cf;
@@ -172,6 +184,8 @@
   --vp-c-gray-3: rgb(48, 52, 70);
   --vp-c-gray-soft: hsla(229, 19%, 53%, 0.14);
 
+  --vp-c-default-soft: ##414559;
+
   --vp-c-indigo-1: rgb(140, 170, 238);
   --vp-c-indigo-2: rgb(133, 167, 245);
   --vp-c-indigo-3: rgb(94, 111, 154);