Merge pull request #19 from IgnaceMaes/css-vars-padding

feat: CSS variables for padding

.changeset/plenty-lamps-sleep.md

@@ -0,0 +1,5 @@
+---
+"ember-shiki": minor
+---
+
+Add CSS variables for padding

docs-app/app/components/sidebar.gts

@@ -62,7 +62,7 @@ const Sidebar: TOC<{}> = <template>
         <SidebarItem @text='Line numbers' />
         <SidebarItem @text='Line highlighting' />
         <SidebarItem @text='Loading state' />
-        <SidebarItem @text='Custom fonts' />
+        <SidebarItem @text='Styling' />
         <Separator />
 
         <SidebarTitle @text='Advanced' />

docs-app/app/controllers/application.ts

@@ -107,11 +107,21 @@ function foo(x, y) {
 />`;
   }
 
-  fontComicSans = `<CodeBlock
-  @code="const foo = (bar) => { bar === 1 };"
-  @language="js"
-  style="--ember-shiki-font: 'Comic Sans MS', 'Comic Sans'"
-/>`;
+  cssVariables = `:root {
+  --ember-shiki-padding-x: 24px;
+  --ember-shiki-padding-y: 20px;
+  --ember-shiki-border-radius: 6px;
+  --ember-shiki-background-color: #161b22;
+  --ember-shiki-copy-background-color: #161b22;
+  --ember-shiki-line-number-color: rgb(115 138 148 / 40%);
+  --ember-shiki-font: ui-monospace, sfmono-regular, "SF Mono", menlo, monaco,
+    consolas, "Liberation Mono", "Courier New", monospace;
+  --ember-shiki-line-number-start: 1;
+  --ember-shiki-line-height: 1.7;
+  --ember-shiki-font-size: 0.875rem;
+  --ember-shiki-icon-copy: url('data:image/svg+xml,<svg fill="none" stroke="rgba(128,128,128,1)" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"></path></svg>');
+  --ember-shiki-icon-copied: url('data:image/svg+xml,<svg fill="none" stroke="rgba(128,128,128,1)" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75"></path></svg>');
+}`;
 
   loadingState = `<CodeBlock
   @code="const foo = (bar) => { bar === 1 };"

docs-app/app/templates/application.hbs

@@ -317,9 +317,10 @@ function foo(x, y) {
 
       <CodeBlock @code={{this.loadingState}} @language="hbs" />
 
-      <SectionSubtitle @text="Custom fonts" />
-      <p>Load any external font and set it using the CSS variable. Even fonts
-        with ligature support work out of the box.</p>
+      <SectionSubtitle @text="Styling" />
+      <p>The components in this addon can be styled by overriding CSS variables.
+        For example, any external font can be loaded and used. Even fonts with
+        ligature support work out of the box.</p>
 
       <div class="render-preview">
         <CodeBlock
@@ -330,15 +331,8 @@ function foo(x, y) {
       </div>
       <CodeBlock @code={{this.fontLigaturesCode}} @language="hbs" />
 
-      <p>Or even Comic Sans, if you would really like to</p>
-      <div class="render-preview">
-        <CodeBlock
-          @code="const foo = (bar) => { bar === 1 };"
-          @language="js"
-          style="--ember-shiki-font: 'Comic Sans MS', 'Comic Sans'"
-        />
-      </div>
-      <CodeBlock @code={{this.fontComicSans}} @language="hbs" />
+      <p>Here is a list of CSS variables which are currently defined:</p>
+      <CodeBlock @code={{this.cssVariables}} @language="css" />
 
       <hr class="my-16 h-px border-0 bg-gray-700" />
 
@@ -364,7 +358,9 @@ function foo(x, y) {
         @code={{this.loadCustomGrammar}}
         @language="js"
       />
-      <p>Note: this is just an example way of how it's made possible, but not the recommended approach per se. In the future a more ergonomic, officially recommended way might be added.</p>
+      <p>Note: this is just an example way of how it's made possible, but not
+        the recommended approach per se. In the future a more ergonomic,
+        officially recommended way might be added.</p>
 
       <SectionSubtitle @text="Custom theme" />
       <p>Shiki ships with 29 themes available by default, but any VS Code theme
@@ -373,7 +369,8 @@ function foo(x, y) {
         <InlineCode>CodeBlock</InlineCode>
         component.</p>
 
-      <p>The following example shows a custom theme <InlineCode>Night Owl</InlineCode>:</p>
+      <p>The following example shows a custom theme
+        <InlineCode>Night Owl</InlineCode>:</p>
 
       <CodeBlock
         @name="app/routes/application.js"
@@ -382,7 +379,9 @@ function foo(x, y) {
         @theme="Night Owl"
         style="--ember-shiki-background-color: #011627"
       />
-      <p>Note: this is just an example way of how it's made possible, but not the recommended approach per se. In the future a more ergonomic, officially recommended way might be added.</p>
+      <p>Note: this is just an example way of how it's made possible, but not
+        the recommended approach per se. In the future a more ergonomic,
+        officially recommended way might be added.</p>
 
       <SectionSubtitle @text="Fastboot" />
       <p>The

ember-shiki/src/styles.css

@@ -1,4 +1,6 @@
 :root {
+  --ember-shiki-padding-x: 24px;
+  --ember-shiki-padding-y: 20px;
   --ember-shiki-border-radius: 6px;
   --ember-shiki-background-color: #161b22;
   --ember-shiki-copy-background-color: #161b22;
@@ -23,18 +25,18 @@
 .code-tab-header {
   background: var(--ember-shiki-background-color);
   color: #fffd;
-  padding: 20px 24px;
+  padding: var(--ember-shiki-padding-y) var(--ember-shiki-padding-x);
   border-top-left-radius: var(--ember-shiki-border-radius);
   border-top-right-radius: var(--ember-shiki-border-radius);
   border-bottom: 1px solid var(--ember-shiki-line-number-color);
 }
 
 .code-tab-header {
-  padding: 0 20px;
+  padding: 0 var(--ember-shiki-padding-x);
 }
 
 .code-tab-header__name {
-  padding: 20px 0;
+  padding: var(--ember-shiki-padding-y) 0;
   margin: 0 8px;
   cursor: pointer;
   display: inline-block;
@@ -90,16 +92,17 @@
   overflow-x: auto;
   display: block;
   font-family: var(--ember-shiki-font) !important;
+  font-size: var(--ember-shiki-font-size);
   line-height: var(--ember-shiki-line-height);
-  padding: 20px 0;
+  padding: var(--ember-shiki-padding-y) 0;
 }
 
 .shiki code .line > span:first-of-type {
   position: relative;
 }
 
 .shiki code .line {
-  padding: 0 24px;
+  padding: 0 var(--ember-shiki-padding-x);
   box-sizing: border-box;
   display: inline-block;
   min-width: 100%;

test-app/tests/helpers/css-helpers.ts

@@ -0,0 +1,9 @@
+import { find } from '@ember/test-helpers';
+
+export function getCssValue(selector: string, property: string) {
+  const domElement = find(selector);
+  if (domElement === null) {
+    throw new Error('Element is null');
+  }
+  return window.getComputedStyle(domElement, null).getPropertyValue(property);
+}

test-app/tests/integration/components/code-block-test.ts

@@ -2,14 +2,12 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'test-app/tests/helpers';
 import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import { getCssValue } from 'test-app/tests/helpers/css-helpers';
 
 module('Integration | Component | code-block', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.set('myAction', function(val) { ... });
-
     await render(
       hbs`<CodeBlock @code="const x = 1;" @language="js" @theme="github-dark" />`
     );
@@ -24,4 +22,24 @@ module('Integration | Component | code-block', function (hooks) {
 
     assert.dom().hasText('console.log("hello world");');
   });
+
+  test('it applies CSS padding variables correctly', async function (assert) {
+    await render(
+      hbs`
+        {{! template-lint-disable no-inline-styles }}
+        <CodeBlock @code="Hello world" style="--ember-shiki-padding-x: 12px; --ember-shiki-padding-y: 8px;" />
+      `
+    );
+
+    assert.strictEqual(getCssValue('.shiki code', 'padding-top'), '8px');
+    assert.strictEqual(getCssValue('.shiki code', 'padding-bottom'), '8px');
+    assert.strictEqual(
+      getCssValue('.shiki code .line', 'padding-left'),
+      '12px'
+    );
+    assert.strictEqual(
+      getCssValue('.shiki code .line', 'padding-right'),
+      '12px'
+    );
+  });
 });