From 2a0b31b8c0e8d99f520f100bdfd4b8e32142a06a Mon Sep 17 00:00:00 2001 From: ignace Date: Sun, 3 Sep 2023 13:09:32 +0200 Subject: [PATCH 1/7] feat: variables for padding --- ember-shiki/src/styles.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/ember-shiki/src/styles.css b/ember-shiki/src/styles.css index a642973..542bcc4 100644 --- a/ember-shiki/src/styles.css +++ b/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; @@ -91,7 +93,7 @@ display: block; font-family: var(--ember-shiki-font) !important; line-height: var(--ember-shiki-line-height); - padding: 20px 0; + padding: var(--ember-shiki-padding-y) 0; } .shiki code .line > span:first-of-type { @@ -99,7 +101,7 @@ } .shiki code .line { - padding: 0 24px; + padding: 0 var(--ember-shiki-padding-x); box-sizing: border-box; display: inline-block; min-width: 100%; From 953221582d8686ca6b5b88f159ed5c016960ad6e Mon Sep 17 00:00:00 2001 From: ignace Date: Sun, 3 Sep 2023 13:10:44 +0200 Subject: [PATCH 2/7] fix: set font-size on code block to prevent browser defaults --- ember-shiki/src/styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/ember-shiki/src/styles.css b/ember-shiki/src/styles.css index 542bcc4..0965a98 100644 --- a/ember-shiki/src/styles.css +++ b/ember-shiki/src/styles.css @@ -92,6 +92,7 @@ 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: var(--ember-shiki-padding-y) 0; } From c4ece27f7c3bb213a8a7f6b18989bede10170222 Mon Sep 17 00:00:00 2001 From: ignace Date: Sun, 3 Sep 2023 13:36:55 +0200 Subject: [PATCH 3/7] tests: add test for css variables --- test-app/tests/helpers/css-helpers.ts | 9 +++++++++ .../integration/components/code-block-test.ts | 18 ++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 test-app/tests/helpers/css-helpers.ts diff --git a/test-app/tests/helpers/css-helpers.ts b/test-app/tests/helpers/css-helpers.ts new file mode 100644 index 0000000..6eeafb7 --- /dev/null +++ b/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); +} diff --git a/test-app/tests/integration/components/code-block-test.ts b/test-app/tests/integration/components/code-block-test.ts index f1cac33..ade54af 100644 --- a/test-app/tests/integration/components/code-block-test.ts +++ b/test-app/tests/integration/components/code-block-test.ts @@ -2,6 +2,7 @@ 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); @@ -24,4 +25,21 @@ 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`` + ); + + 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' + ); + }); }); From 62dda084a8b33e7aeb62a817439a7cc691d737f6 Mon Sep 17 00:00:00 2001 From: ignace Date: Sun, 3 Sep 2023 13:38:15 +0200 Subject: [PATCH 4/7] chore: clean up blueprint code --- test-app/tests/integration/components/code-block-test.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/test-app/tests/integration/components/code-block-test.ts b/test-app/tests/integration/components/code-block-test.ts index ade54af..d8f8559 100644 --- a/test-app/tests/integration/components/code-block-test.ts +++ b/test-app/tests/integration/components/code-block-test.ts @@ -8,9 +8,6 @@ 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`` ); From dbc19dc28e08252075679ee88a140bafee5c636c Mon Sep 17 00:00:00 2001 From: ignace Date: Sun, 3 Sep 2023 13:45:32 +0200 Subject: [PATCH 5/7] docs: document CSS vars --- docs-app/app/components/sidebar.gts | 2 +- docs-app/app/controllers/application.ts | 20 ++++++++++++----- docs-app/app/templates/application.hbs | 29 ++++++++++++------------- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/docs-app/app/components/sidebar.gts b/docs-app/app/components/sidebar.gts index e82434e..d5d1c4d 100644 --- a/docs-app/app/components/sidebar.gts +++ b/docs-app/app/components/sidebar.gts @@ -62,7 +62,7 @@ const Sidebar: TOC<{}> =