Skip to content

Commit

Permalink
Themes 1222 - Logical Properties on Article Body Block (#1845)
Browse files Browse the repository at this point in the history 
* updated block styles to use logical properties

* added rtl story for storybook

* updated storybook styles for article body

* updated commerce block

* updated commerce storybook file

* fixed padding error
  • Loading branch information
@blakeganderson
blakeganderson authored Dec 11, 2023
1 parent a020553 commit 7dab7a7
Show file tree
Hide file tree
Showing 5 changed files with 592 additions and 352 deletions.
147 changes: 97 additions & 50 deletions .storybook/themes/commerce.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@
),
"carousel-track": (
"gap": initial,
"max-width": initial
"max-inline-size": initial
),
"carousel-button-next": (
"background-color": transparent
Expand All @@ -244,8 +244,11 @@
"box-shadow": inset 5px 0 0 0 var(--global-neutral-4),
"font-style": italic,
"gap": var(--global-spacing-2),
"padding": var(--global-spacing-4) 0 var(--global-spacing-4) var(--global-spacing-5),
"text-align": left,
"padding-block-start": var(--global-spacing-4),
"padding-inline-end": 0,
"padding-block-end": var(--global-spacing-4),
"padding-inline-start": var(--global-spacing-5),
"text-align": "start",
"components": (
"paragraph": (
"font-size": var(--heading-level-6-font-size),
Expand All @@ -254,7 +257,7 @@
)
),
"article-body-children": (
"margin-bottom": var(--global-spacing-5)
"margin-block-end": var(--global-spacing-5)
),
"article-body-citation": (
"font-family": var(--font-family-primary),
Expand All @@ -264,7 +267,7 @@
"article-body-correction": (
"box-shadow": inset 0 -1px 0 0 var(--border-color),
"font-style": italic,
"padding-bottom": var(--global-spacing-6),
"padding-block-end": var(--global-spacing-6),
"components": (
"heading": (
"font-size": var(--heading-level-6-font-size),
Expand All @@ -277,28 +280,28 @@
),
"article-body-divider": (
"background-color": var(--border-color),
"height": 1px
"block-size": 1px
),
"article-body-embed-responsive": (
"aspect-ratio": calc(16 / 9),
"width": 100%
"inline-size": 100%
),
"article-body-embed-responsive-item": (
"aspect-ratio": calc(16 / 9),
"height": auto,
"width": 100%
"block-size": auto,
"inline-size": 100%
),
"article-body-full-screen-icon": (
"fill": var(--text-color),
"height": var(--global-spacing-4),
"width": var(--global-spacing-4)
"block-size": var(--global-spacing-4),
"inline-size": var(--global-spacing-4)
),
"article-body-gallery": (
"components": (
"icon": (
"fill": var(--global-white),
"height": var(--global-spacing-8),
"width": var(--global-spacing-8)
"block-size": var(--global-spacing-8),
"inline-size": var(--global-spacing-8)
),
"carousel-button": (
"background-color": transparent,
Expand All @@ -313,16 +316,16 @@
"box-shadow": none,
"color": var(--text-color),
"font-size": var(--body-font-size-small),
"height": auto,
"width": auto
"block-size": auto,
"inline-size": auto
),
"carousel-button-toggle-auto-play": (
"background-color": transparent,
"box-shadow": none,
"color": var(--text-color),
"font-size": var(--body-font-size-small),
"height": auto,
"width": auto
"block-size": auto,
"inline-size": auto
),
"carousel-image-counter": (
"font-size": var(--body-font-size-small)
Expand All @@ -331,37 +334,37 @@
"background-color": var(--global-neutral-9),
"gap": 0,
"justify-content": center,
"width": 100%
"inline-size": 100%
),
"media-item-fig-caption": (
"background-color": var(--global-white),
"padding-top": var(--global-spacing-2)
"padding-block-start": var(--global-spacing-2)
)
)
),
"article-body-gallery-additional-next": (
"border": none,
"display": none,
"height": var(--global-spacing-6),
"width": var(--global-spacing-6),
"block-size": var(--global-spacing-6),
"inline-size": var(--global-spacing-6),
"components": (
"icon": (
"fill": var(--text-color),
"height": var(--global-spacing-4),
"width": var(--global-spacing-4)
"block-size": var(--global-spacing-4),
"inline-size": var(--global-spacing-4)
)
)
),
"article-body-gallery-additional-previous": (
"border": none,
"display": none,
"height": var(--global-spacing-6),
"width": var(--global-spacing-6),
"block-size": var(--global-spacing-6),
"inline-size": var(--global-spacing-6),
"components": (
"icon": (
"fill": var(--text-color),
"height": var(--global-spacing-4),
"width": var(--global-spacing-4)
"block-size": var(--global-spacing-4),
"inline-size": var(--global-spacing-4)
)
)
),
Expand Down Expand Up @@ -398,30 +401,30 @@
"article-body-image": (
"components": (
"image": (
"max-width": 100%
"max-inline-size": 100%
)
)
),
"article-body-image-float-left": (
"width": 50%,
"float": left,
"margin-right": var(--global-spacing-5)
"inline-size": 50%,
"float": inline-start,
"margin-inline-end": var(--global-spacing-5)
),
"article-body-image-float-right": (
"width": 50%,
"float": right,
"margin-left": var(--global-spacing-5)
"inline-size": 50%,
"float": inline-end,
"margin-inline-start": var(--global-spacing-5)
),
"article-body-image-wrapper": (
"align-items": center,
"display": flex,
"justify-content": center,
"max-height": 75vh,
"max-block-size": 75vh,
"components": (
"image": (
"height": auto,
"max-height": 75vh,
"max-width": 100%
"block-size": auto,
"max-block-size": 75vh,
"max-inline-size": 100%
)
)
),
Expand All @@ -430,7 +433,9 @@
"font-style": italic,
"components": (
"link": (
"border-bottom": 1px solid var(--color-primary),
"border-block-end-width": 1px,
"border-block-end-style": solid,
"border-block-end-color": var(--color-primary),
"color": var(--color-primary)
)
)
Expand All @@ -447,7 +452,10 @@
"article-body-pullquote": (
"box-shadow": (inset 0 -5px 0 0 var(--border-color), inset 0 5px 0 0 var(--border-color)),
"gap": var(--global-spacing-4),
"padding": var(--global-spacing-6) 0 var(--global-spacing-5),
"padding-block-start": var(--global-spacing-6) 0,
"padding-inline-end": var(--global-spacing-5),
"padding-block-end": var(--global-spacing-6) 0,
"padding-inline-start": var(--global-spacing-5),
"text-align": center,
"components": (
"paragraph": (
Expand All @@ -460,33 +468,72 @@
),
"article-body-start-icon": (
"fill": var(--text-color),
"height": var(--global-spacing-4),
"width": var(--global-spacing-4)
"block-size": var(--global-spacing-4),
"inline-size": var(--global-spacing-4)
),
"article-body-stop-icon": (
"fill": var(--text-color),
"height": var(--global-spacing-4),
"width": var(--global-spacing-4)
"block-size": var(--global-spacing-4),
"inline-size": var(--global-spacing-4)
),
"article-body-table": (
"font-family": var(--font-family-primary),
"font-size": var(--body-font-size-small),
"line-height": var(--body-line-height-small),
"text-align": center,
"width": 100%
"inline-size": 100%
),
"article-body-table-td": (
"border": 1px solid var(--border-color),
"padding": var(--global-spacing-1) var(--global-spacing-2)
"border-block-start-width": 1px,
"border-block-end-width": 1px,
"border-inline-start-width": 1px,
"border-inline-end-width": 1px,
"border-block-start-style": solid,
"border-block-end-style": solid,
"border-inline-start-style": solid,
"border-inline-end-style": solid,
"border-block-start-color": var(--border-color),
"border-block-end-color": var(--border-color),
"border-inline-start-color": var(--border-color),
"border-inline-end-color": var(--border-color),
"padding-block-start": var(--global-spacing-1),
"padding-inline-end": var(--global-spacing-2),
"padding-block-end": var(--global-spacing-1),
"padding-inline-start": var(--global-spacing-2)
),
"article-body-table-th": (
"border": 1px solid var(--border-color),
"border-block-start-width": 1px,
"border-block-end-width": 1px,
"border-inline-start-width": 1px,
"border-inline-end-width": 1px,
"border-block-start-style": solid,
"border-block-end-style": solid,
"border-inline-start-style": solid,
"border-inline-end-style": solid,
"border-block-start-color": var(--border-color),
"border-block-end-color": var(--border-color),
"border-inline-start-color": var(--border-color),
"border-inline-end-color": var(--border-color),
"font-weight": var(--global-font-weight-7),
"padding": var(--global-spacing-1) var(--global-spacing-2)
"padding-block-start": var(--global-spacing-1),
"padding-inline-end": var(--global-spacing-2),
"padding-block-end": var(--global-spacing-1),
"padding-inline-start": var(--global-spacing-2)
),
"article-body-table-thead": (
"background-color": var(--global-neutral-4),
"border": 2px solid var(--border-color)
"border-block-start-width": 2px,
"border-block-end-width": 2px,
"border-inline-start-width": 2px,
"border-inline-end-width": 2px,
"border-block-start-style": solid,
"border-block-end-style": solid,
"border-inline-start-style": solid,
"border-inline-end-style": solid,
"border-block-start-color": var(--border-color),
"border-block-end-color": var(--border-color),
"border-inline-start-color": var(--border-color),
"border-inline-end-color": var(--border-color)
),
"article-body-ul": (
"font-size": var(--body-font-size),
Expand Down
Loading

0 comments on commit 7dab7a7

Please sign in to comment.