Add malva to dprint

.github/workflows/ci.yaml

@@ -70,7 +70,7 @@ jobs:
       - name: Install docs dependencies
         run: poetry install --with docs
 
-      - name: Check markdown, toml formatting
+      - name: Check markdown, toml, css formatting
         uses: dprint/[email protected]
         if: runner.os == 'Linux'
 

docs/docs/developer/contributing.md

@@ -18,6 +18,10 @@ Our configuration can be found in [KPOps](https://github.com/bakdata/kpops)' top
 
 To ensure a consistent markdown style, we use [dprint](https://dprint.dev)'s [Markdown code formatter](https://dprint.dev/plugins/markdown/). Our configuration can be found [here](https://github.com/bakdata/kpops/blob/main/dprint.json).
 
+### CSS
+
+To ensure a consistent CSS style, we use the [malva](https://github.com/g-plane/malva) [dprint](https://dprint.dev)'s plugin. Our configuration can be found [here](https://github.com/bakdata/kpops/blob/main/dprint.json).
+
 ### TOML
 
 To ensure a consistent TOML style, we use [dprint](https://dprint.dev)'s [TOML code formatter](https://dprint.dev/plugins/toml/). Our configuration can be found [here](https://github.com/bakdata/kpops/blob/main/dprint.json).

docs/docs/stylesheets/extra.css

@@ -1,41 +1,65 @@
 :root > * {
-    /* The primary color of KPOps docs */
-    --md-primary-fg-color: #a599ff;
+  /* The primary color of KPOps docs */
+  --md-primary-fg-color: #a599ff;
 
-    /* The second color of KPOps docs */
-    --md-accent-fg-color: #B0A5FF;
+  /* The second color of KPOps docs */
+  --md-accent-fg-color: #b0a5ff;
 
-    /* Create custom color variable to use for the buttons */
-    --kpops-button-color: #7068AD;
+  /* Create custom color variable to use for the buttons */
+  --kpops-button-color: #7068ad;
 
-    /* The footer color needs to be set sparately */
-    --md-footer-bg-color: var(--md-primary-fg-color);
+  /* The footer color needs to be set sparately */
+  --md-footer-bg-color: var(--md-primary-fg-color);
 
-    /* Color the links with the primary color */
-    --md-typeset-a-color: var(--md-primary-fg-color);
+  /* Color the links with the primary color */
+  --md-typeset-a-color: var(--md-primary-fg-color);
 
-    --md-admonition-icon--wip: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.78 15.3 6 6 2.11-2.16-6-6-2.11 2.16m3.72-5.2c-.39 0-.81-.05-1.14-.19L4.97 21.25l-2.11-2.11 7.41-7.4L8.5 9.96l-.72.7-1.45-1.41v2.86l-.7.7-3.52-3.56.7-.7h2.81l-1.4-1.41 3.56-3.56a2.976 2.976 0 0 1 4.22 0L9.89 5.74l1.41 1.4-.71.71 1.79 1.78 1.82-1.88c-.14-.33-.2-.75-.2-1.12a3.49 3.49 0 0 1 3.5-3.52c.59 0 1.11.14 1.58.42L16.41 6.2l1.5 1.5 2.67-2.67c.28.47.42.97.42 1.6 0 1.92-1.55 3.47-3.5 3.47Z"/></svg>')
+  --md-admonition-icon--wip: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m13.78 15.3 6 6 2.11-2.16-6-6-2.11 2.16m3.72-5.2c-.39 0-.81-.05-1.14-.19L4.97 21.25l-2.11-2.11 7.41-7.4L8.5 9.96l-.72.7-1.45-1.41v2.86l-.7.7-3.52-3.56.7-.7h2.81l-1.4-1.41 3.56-3.56a2.976 2.976 0 0 1 4.22 0L9.89 5.74l1.41 1.4-.71.71 1.79 1.78 1.82-1.88c-.14-.33-.2-.75-.2-1.12a3.49 3.49 0 0 1 3.5-3.52c.59 0 1.11.14 1.58.42L16.41 6.2l1.5 1.5 2.67-2.67c.28.47.42.97.42 1.6 0 1.92-1.55 3.47-3.5 3.47Z\"/></svg>");
 }
 
 .md-typeset .md-button, .md-button--primary {
-    background-color: var(--kpops-button-color);
+  background-color: var(--kpops-button-color);
 }
 
 .md-typeset .md-button:hover, .md-button--primary:hover {
-    border-color: white;
+  border-color: white;
 }
 
-.md-typeset .admonition.wip,
-.md-typeset details.wip {
-border-color: rgb(160, 45, 0);
+.md-typeset .admonition.wip, .md-typeset details.wip {
+  border-color: rgb(160, 45, 0);
 }
-.md-typeset .wip > .admonition-title,
-.md-typeset .wip > summary {
-background-color: rgb(255, 195, 172);
+.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
+  background-color: rgb(255, 195, 172);
 }
 .md-typeset .wip > .admonition-title::before,
 .md-typeset .wip > summary::before {
-background-color: rgb(255, 77, 6);
--webkit-mask-image: var(--md-admonition-icon--wip);
-        mask-image: var(--md-admonition-icon--wip);
+  background-color: rgb(255, 77, 6);
+  -webkit-mask-image: var(--md-admonition-icon--wip);
+  mask-image: var(--md-admonition-icon--wip);
+}
+
+.md-typeset .admonition.wip, .md-typeset details.wip {
+  border-color: rgb(160, 45, 0);
+}
+.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
+  background-color: rgb(255, 195, 172);
+}
+.md-typeset .wip > .admonition-title::before,
+.md-typeset .wip > summary::before {
+  background-color: rgb(255, 77, 6);
+  -webkit-mask-image: var(--md-admonition-icon--wip);
+  mask-image: var(--md-admonition-icon--wip);
+}
+
+.md-typeset .admonition.wip, .md-typeset details.wip {
+  border-color: rgb(160, 45, 0);
+}
+.md-typeset .wip > .admonition-title, .md-typeset .wip > summary {
+  background-color: rgb(255, 195, 172);
+}
+.md-typeset .wip > .admonition-title::before,
+.md-typeset .wip > summary::before {
+  background-color: rgb(255, 77, 6);
+  -webkit-mask-image: var(--md-admonition-icon--wip);
+  mask-image: var(--md-admonition-icon--wip);
 }

dprint.json

@@ -3,9 +3,11 @@
   "incremental": true,
   "markdown": {},
   "toml": {},
+  "malva": {},
   "includes": [
     "**/*.{md}",
-    "**/*.{toml}"
+    "**/*.{toml}",
+    "**/*.{css}"
   ],
   "excludes": [
     ".pytest_cache/**",
@@ -18,6 +20,7 @@
   ],
   "plugins": [
     "https://plugins.dprint.dev/markdown-0.16.0.wasm",
-    "https://plugins.dprint.dev/toml-0.5.4.wasm"
+    "https://plugins.dprint.dev/toml-0.5.4.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.1.2.wasm"
   ]
 }