diff --git a/.changeset/famous-bulldogs-sing.md b/.changeset/famous-bulldogs-sing.md new file mode 100644 index 0000000..0e63970 --- /dev/null +++ b/.changeset/famous-bulldogs-sing.md @@ -0,0 +1,6 @@ +--- +"ada-ui": minor +--- + +Added separate padding tokens that are responsive, unlike the already existing +spacing tokens diff --git a/index.html b/index.html index c094b18..6180090 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,7 @@
+ Padding Spacing Colors Page Layout @@ -104,6 +105,29 @@
+
+

Padding

+
+ --padding-xs + 0.15rem +
+ --padding-sm + 0.4rem +
+ --padding + 0.75rem +
+ --padding-lg + 1rem +
+

→ Paddings are responsive (in rem).

+

+ Usage: paddings, anything which should grow/shrink with the + font-size +

+
+ +

Spacing

@@ -119,6 +143,11 @@ --spacing-lg 14px
+

→ Spacings are not responsive (in px).

+

+ Usage: spacings, gaps, anything which should be stable regardless + of the font-size +

diff --git a/scss/_command.scss b/scss/_command.scss index 5bb1352..719a95b 100644 --- a/scss/_command.scss +++ b/scss/_command.scss @@ -8,7 +8,7 @@ border-style: solid; border-color: transparent; border-width: var(--border-width); - padding: var(--spacing-xs) var(--spacing-sm); + padding: var(--padding-xs) var(--padding-sm); min-height: 3rem; min-width: 3rem; border-radius: var(--border-radius); @@ -95,7 +95,7 @@ font-size: var(--scale-3xl); line-height: var(--scale-3xl); align-self: center; - padding: var(--spacing-xs); + padding: var(--padding-xs); } > .command, diff --git a/scss/_global.scss b/scss/_global.scss index c338acf..a33a8b3 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -9,6 +9,10 @@ --scale-2xl: 1.6rem; --scale-3xl: 1.8rem; --box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4); + --padding-xs: 0.15rem; + --padding-sm: 0.4rem; + --padding: 0.75rem; + --padding-lg: 1rem; --spacing-xs: 2px; --spacing-sm: 6px; --spacing: 10px; @@ -50,7 +54,7 @@ html { body { font-size: 1rem; - padding: var(--spacing); + padding: var(--padding); background: var(--bg-body); color: var(--fg-body); transition: background-color 0.15s ease-in-out; diff --git a/scss/_input.scss b/scss/_input.scss index 07d2b3c..6739b2c 100644 --- a/scss/_input.scss +++ b/scss/_input.scss @@ -7,7 +7,7 @@ font-family: inherit; background-color: transparent; transition: border-color 0.15s ease-in-out; - padding: var(--spacing); + padding: var(--padding); font-size: var(--scale-base); &:focus { diff --git a/scss/_panel.scss b/scss/_panel.scss index de64898..4280495 100644 --- a/scss/_panel.scss +++ b/scss/_panel.scss @@ -31,7 +31,7 @@ @extend %header; font-size: var(--scale-2xl); - padding: var(--spacing-sm) var(--spacing); + padding: var(--padding-sm) var(--padding); &:empty { padding: 0; @@ -55,7 +55,7 @@ > article { z-index: 1; - padding: var(--spacing); + padding: var(--padding); overflow: auto; @extend %scrollbar; @@ -63,7 +63,7 @@ > footer { position: relative; - padding: var(--spacing-sm) var(--spacing); + padding: var(--padding-sm) var(--padding); font-size: var(--scale-sm); text-align: right; diff --git a/style.css b/style.css index 1a579f2..8dc8ba4 100644 --- a/style.css +++ b/style.css @@ -48,7 +48,7 @@ body { @media (max-width: 48rem) { grid-template-columns: 1fr; - gap: var(--spacing-xs); + gap: var(--padding-xs); } } } @@ -120,6 +120,14 @@ body { gap: var(--spacing); align-items: center; + > p { + grid-column: span 3; + + &:first-of-type { + margin-top: var(--padding-lg); + } + } + > .spacing-box { display: inline-block; background: var(--color500); @@ -143,6 +151,43 @@ body { } } +.padding { + display: grid; + grid-template-columns: repeat(2, auto) 1fr; + gap: var(--spacing); + align-items: center; + + > p { + grid-column: span 3; + + &:first-of-type { + margin-top: var(--padding-lg); + } + } + + > .padding-box { + display: inline-block; + background: var(--color500); + width: var(--padding); + height: var(--padding); + + &.xs { + width: var(--padding-xs); + height: var(--padding-xs); + } + + &.sm { + width: var(--padding-sm); + height: var(--padding-sm); + } + + &.lg { + width: var(--padding-lg); + height: var(--padding-lg); + } + } +} + input { max-width: 20rem; }