From 05554f1b54cb14ed9c3b66f11005a55db7b49b88 Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 1 Feb 2024 20:48:59 -0800
Subject: [PATCH] feat: add `--langtag-padding` style prop (#325)

Closes #324
---
 README.md                           | 16 +++++++-----
 src/Highlight.svelte.d.ts           |  9 +++++++
 src/HighlightAuto.svelte.d.ts       |  9 +++++++
 src/HighlightSvelte.svelte.d.ts     |  9 +++++++
 src/LangTag.svelte                  |  4 +--
 src/LangTag.svelte.d.ts             |  1 +
 tests/e2e/HighlightAuto.test.svelte |  2 +-
 www/app.css                         | 10 --------
 www/components/globals/Index.svelte | 38 ++++++++++++++++-------------
 9 files changed, 62 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index c99534fe..82c3e5bb 100644
--- a/README.md
+++ b/README.md
@@ -286,6 +286,7 @@ See the [Languages page](SUPPORTED_LANGUAGES.md) for a list of supported languag
 | --langtag-background    | Background color of the langtag | `inherit`     |
 | --langtag-color         | Text color of the langtag       | `inherit`     |
 | --langtag-border-radius | Border radius of the langtag    | `0`           |
+| --langtag-padding       | Padding of the langtag          | `1em`         |
 
 ```svelte
 <script>
@@ -297,12 +298,15 @@ See the [Languages page](SUPPORTED_LANGUAGES.md) for a list of supported languag
 <HighlightAuto {code} langtag />
 ```
 
-```css
-[data-language="css"] {
-  --langtag-background: linear-gradient(135deg, #2996cf, 80%, white);
-  --langtag-color: #fff;
-  --langtag-border-radius: 8px;
-}
+```svelte
+<HighlightAuto
+  {code}
+  langtag
+  --langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
+  --langtag-color="#fff"
+  --langtag-border-radius="6px"
+  --langtag-padding="0.5rem"
+/>
 ```
 
 ## Custom Language
diff --git a/src/Highlight.svelte.d.ts b/src/Highlight.svelte.d.ts
index 8c0234ae..ddbc2dac 100644
--- a/src/Highlight.svelte.d.ts
+++ b/src/Highlight.svelte.d.ts
@@ -31,18 +31,27 @@ export type HighlightProps = HTMLAttributes<HTMLPreElement> & {
 
   /**
    * Customize the background color of the langtag.
+   * @default "inherit"
    */
   "--langtag-background"?: string;
 
   /**
    * Customize the text color of the langtag.
+   * @default "inherit"
    */
   "--langtag-color"?: string;
 
   /**
    * Customize the border radius of the langtag.
+   * @default 0
    */
   "--langtag-border-radius"?: string;
+
+  /**
+   * Customize the padding of the langtag.
+   * @default "1em"
+   */
+  "--langtag-padding"?: string;
 };
 
 export type HighlightEvents = {
diff --git a/src/HighlightAuto.svelte.d.ts b/src/HighlightAuto.svelte.d.ts
index a41c1f00..6f4d1fb8 100644
--- a/src/HighlightAuto.svelte.d.ts
+++ b/src/HighlightAuto.svelte.d.ts
@@ -22,18 +22,27 @@ export type HighlightAutoProps = HTMLAttributes<HTMLPreElement> & {
 
   /**
    * Customize the background color of the langtag.
+   * @default "inherit"
    */
   "--langtag-background"?: string;
 
   /**
    * Customize the text color of the langtag.
+   * @default "inherit"
    */
   "--langtag-color"?: string;
 
   /**
    * Customize the border radius of the langtag.
+   * @default 0
    */
   "--langtag-border-radius"?: string;
+
+  /**
+   * Customize the padding of the langtag.
+   * @default "1em"
+   */
+  "--langtag-padding"?: string;
 };
 
 export type HighlightAutoEvents = {
diff --git a/src/HighlightSvelte.svelte.d.ts b/src/HighlightSvelte.svelte.d.ts
index 5de2a7b7..747b7b44 100644
--- a/src/HighlightSvelte.svelte.d.ts
+++ b/src/HighlightSvelte.svelte.d.ts
@@ -22,18 +22,27 @@ export type HighlightSvelteProps = HTMLAttributes<HTMLPreElement> & {
 
   /**
    * Customize the background color of the langtag.
+   * @default "inherit"
    */
   "--langtag-background"?: string;
 
   /**
    * Customize the text color of the langtag.
+   * @default "inherit"
    */
   "--langtag-color"?: string;
 
   /**
    * Customize the border radius of the langtag.
+   * @default 0
    */
   "--langtag-border-radius"?: string;
+
+  /**
+   * Customize the padding of the langtag.
+   * @default "1em"
+   */
+  "--langtag-padding"?: string;
 };
 
 export type HighlightSvelteEvents = {
diff --git a/src/LangTag.svelte b/src/LangTag.svelte
index cbd3cf35..44a2643e 100644
--- a/src/LangTag.svelte
+++ b/src/LangTag.svelte
@@ -29,12 +29,12 @@
     position: absolute;
     top: 0;
     right: 0;
-    padding: 1em;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--langtag-background, inherit);
     color: var(--langtag-color, inherit);
-    border-radius: var(--langtag-border-radius);
+    border-radius: var(--langtag-border-radius, 0);
+    padding: var(--langtag-padding, 1em);
   }
 </style>
diff --git a/src/LangTag.svelte.d.ts b/src/LangTag.svelte.d.ts
index ed2c48ee..d4fd2901 100644
--- a/src/LangTag.svelte.d.ts
+++ b/src/LangTag.svelte.d.ts
@@ -26,6 +26,7 @@ export type LangTagProps = HTMLAttributes<HTMLPreElement> & {
    * - `--langtag-background`
    * - `--langtag-color`
    * - `--langtag-border-radius`
+   * - `--langtag-padding`
    *
    * @default false
    */
diff --git a/tests/e2e/HighlightAuto.test.svelte b/tests/e2e/HighlightAuto.test.svelte
index f6166867..aae41ae0 100644
--- a/tests/e2e/HighlightAuto.test.svelte
+++ b/tests/e2e/HighlightAuto.test.svelte
@@ -9,4 +9,4 @@
   {@html atomOneDark}
 </svelte:head>
 
-<HighlightAuto {code} langtag={true} />
+<HighlightAuto {code} langtag />
diff --git a/www/app.css b/www/app.css
index 337227c4..3db28b66 100644
--- a/www/app.css
+++ b/www/app.css
@@ -10,16 +10,6 @@
   line-height: 1.6;
 }
 
-[data-language="css"] {
-  --langtag-background: linear-gradient(135deg, #2996cf, 80%, white);
-  --langtag-color: #fff;
-  --langtag-border-radius: 8px;
-}
-
-[data-language="svelte"] {
-  --langtag-color: #fff;
-}
-
 .code {
   position: relative;
   display: inline;
diff --git a/www/components/globals/Index.svelte b/www/components/globals/Index.svelte
index 25517a07..d8b836b8 100644
--- a/www/components/globals/Index.svelte
+++ b/www/components/globals/Index.svelte
@@ -265,14 +265,11 @@
   <Column xlg={6} lg={12}>
     <p class="mb-5">
       All <code class="code">Highlight</code> components allow for a tag to be added
-      at the top-right of the codeblock displaying the language name.
+      at the top-right of the codeblock displaying the language name. Customize the language tag <code class="code">background</code>,
+      <code class="code">color</code>,
+      <code class="code">border-radius</code>, and
+      <code class="code">padding</code> using style props.
     </p>
-    <p class="mb-5">
-      Customize the language tag <code class="code">background</code>,
-      <code class="code">color</code>, and
-      <code class="code">border-radius</code> using style props.
-    </p>
-    <p class="mb-5">This is also compatible with custom languages.</p>
     <p class="mb-5">Defaults:</p>
     <UnorderedList class="mb-5">
       <ListItem
@@ -280,6 +277,7 @@
       >
       <ListItem><code class="code">--langtag-color: inherit</code></ListItem>
       <ListItem><code class="code">--langtag-border-radius: 0</code></ListItem>
+      <ListItem><code class="code">--langtag-padding: 1em</code></ListItem>
     </UnorderedList>
     <p class="mb-5">
       See the <Link size="lg" href="/languages">Languages page</Link> for a list
@@ -294,20 +292,26 @@
    $: code = \`body {\n  padding: 0;\n  color: red;\n}\`;
 <\/script>
 
-<HighlightAuto {code} langtag="{true}" \/>`}
+<HighlightAuto {code} langtag \/>`}
       class="irBlack"
-      langtag={true}
+      langtag
     />
     <br />
-    <Highlight
-      code={`[data-language="css"] {
-  --langtag-background: linear-gradient(135deg, #2996cf, 80%, white);
-  --langtag-color: #fff;
-  --langtag-border-radius: 8px;
-}`}
-      language={css}
+    <HighlightSvelte
+      code={`<HighlightAuto
+  {code}
+  langtag
+  --langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
+  --langtag-color="#fff"
+  --langtag-border-radius="6px"
+  --langtag-padding="0.5rem"
+/>`}
       class="irBlack"
-      langtag={true}
+      langtag
+      --langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
+      --langtag-color="#fff"
+      --langtag-border-radius="6px"
+      --langtag-padding="0.5rem"
     />
   </Column>
 </Row>