diff --git a/packages/thorin-core/src/button/index.ts b/packages/thorin-core/src/button/index.ts index 0c6361f..c8efc2f 100644 --- a/packages/thorin-core/src/button/index.ts +++ b/packages/thorin-core/src/button/index.ts @@ -15,8 +15,8 @@ export class ThorinButton extends LitElement { appearance: none; border: none; outline: none; - border-radius: 24px; - padding: 8px 16px; + border-radius: var(--thorin-radius-button); + padding: 10px 20px; } button.full { width: 100%; @@ -26,6 +26,7 @@ export class ThorinButton extends LitElement { background: var(--thorin-blue-bright); color: var(--thorin-text-accent); cursor: pointer; + transform: translateY(-1px); } button:focus { box-shadow: 0 0 0 2px var(--thorin-blue-bright); diff --git a/packages/thorin-core/src/modal/index.ts b/packages/thorin-core/src/modal/index.ts index 213104d..f8ecd4d 100644 --- a/packages/thorin-core/src/modal/index.ts +++ b/packages/thorin-core/src/modal/index.ts @@ -34,7 +34,7 @@ export class ThorinModal extends LitElement { /* overflow: hidden; Smooth resizing */ background: var(--thorin-background-primary); padding: 16px; - border-radius: 24px; + border-radius: var(--thorin-radius-card); max-width: 100vw; width: auto; @@ -103,8 +103,7 @@ export class ThorinModal extends LitElement { console.log('Resize observed', height, width); modal?.setAttribute( 'style', - `--max-height: ${height + padding * 2}px; --max-width: ${ - width + padding * 2 + `--max-height: ${height + padding * 2}px; --max-width: ${width + padding * 2 }px` ); // modalContent?.setAttribute( diff --git a/packages/thorin-core/src/style.css b/packages/thorin-core/src/style.css index 4ef2e7e..e43452b 100644 --- a/packages/thorin-core/src/style.css +++ b/packages/thorin-core/src/style.css @@ -132,6 +132,9 @@ p { --thorin-spacing-1: 4px; --thorin-spacing-2: 8px; --thorin-spacing-4: 16px; + + --thorin-radius-button: 8px; + --thorin-radius-card: 16px; } @media (prefers-color-scheme: dark) {