feat: add --langtag-padding style prop (#325)

Closes #324
metonym · Feb 2, 2024 · 05554f1 · 05554f1
1 parent 96bc5db
commit 05554f1
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 36 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -265,21 +265,19 @@
   <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
         ><code class="code">--langtag-background: inherit</code></ListItem
       >
       <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>