From dcc9858a6c77e2949bb061bd8d37f76f4d70e892 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Wed, 19 Nov 2025 16:52:50 -0500 Subject: [PATCH 1/3] Add stylelint plugin to enforce logical properties --- .stylelintrc.json | 5 +++-- package.json | 1 + yarn.lock | 10 ++++++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index c89e682d..4bddff73 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,6 +1,6 @@ { "extends": ["stylelint-config-idiomatic-order"], - "plugins": ["stylelint-prettier"], + "plugins": ["stylelint-prettier", "stylelint-use-logical"], "overrides": [], "rules": { "prettier/prettier": true, @@ -10,6 +10,7 @@ "message": "CSS variables should be prefixed with op-" } ], - "selector-class-pattern": null + "selector-class-pattern": null, + "csstools/use-logical": "always" } } diff --git a/package.json b/package.json index 8908666d..db5d8223 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "stylelint": "^16.23.1", "stylelint-config-idiomatic-order": "^10.0.0", "stylelint-prettier": "^5.0.3", + "stylelint-use-logical": "^2.1.2", "vite": "^7.1.4" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 242c84bb..c431ee84 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1575,6 +1575,7 @@ __metadata: stylelint: "npm:^16.23.1" stylelint-config-idiomatic-order: "npm:^10.0.0" stylelint-prettier: "npm:^5.0.3" + stylelint-use-logical: "npm:^2.1.2" vite: "npm:^7.1.4" peerDependencies: tom-select: ^2.0.0 @@ -6170,6 +6171,15 @@ __metadata: languageName: node linkType: hard +"stylelint-use-logical@npm:^2.1.2": + version: 2.1.2 + resolution: "stylelint-use-logical@npm:2.1.2" + peerDependencies: + stylelint: ">= 11 < 17" + checksum: 10c0/a9b178725e14b65c05c01f0fc8f979546bde0da87ff4314fb169a91a5b1f809448b89c0dbab7fc6d71c3cb2696fc89f54bb56bf373dce2a616335b301587b3e8 + languageName: node + linkType: hard + "stylelint@npm:^16.23.1": version: 16.23.1 resolution: "stylelint@npm:16.23.1" From 7f90058c7c668945f5e4402831432d37af16b16f Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Wed, 19 Nov 2025 16:58:58 -0500 Subject: [PATCH 2/3] Convert all css files to use logical properties --- src/addons/panel.css | 6 +- src/addons/tom-select.css | 10 +-- src/components/accordion.css | 6 +- src/components/alert.css | 4 +- src/components/avatar.css | 12 +-- src/components/button.css | 6 +- src/components/button_group.css | 8 +- src/components/card.css | 8 +- src/components/confirm-dialog.css | 2 +- src/components/divider.css | 11 ++- src/components/form.css | 27 +++--- src/components/icon.css | 8 +- src/components/modal.css | 4 +- src/components/navbar.css | 6 +- src/components/pagination.css | 2 +- src/components/segmented-control.css | 10 +-- src/components/side_panel.css | 8 +- src/components/sidebar.css | 15 ++-- src/components/spinner.css | 6 +- src/components/switch.css | 16 ++-- src/components/table.css | 6 +- src/components/tooltip.css | 4 +- src/core/base.css | 7 +- src/core/layout.css | 14 +-- src/core/tokens/base_tokens.css | 8 +- src/core/utilities.css | 126 ++++++++++++--------------- src/recipes/16six-sidebar.css | 4 +- src/recipes/aligned-header.css | 2 +- 28 files changed, 167 insertions(+), 179 deletions(-) diff --git a/src/addons/panel.css b/src/addons/panel.css index b3022fb2..5b23d315 100644 --- a/src/addons/panel.css +++ b/src/addons/panel.css @@ -3,10 +3,10 @@ position: absolute; z-index: var(--op-z-index-sidebar); - width: var(--op-panel-width); - height: 100vh; background-color: var(--op-color-background); + block-size: 100vh; color: var(--op-color-on-background); + inline-size: var(--op-panel-width); inset-inline-end: calc(-1 * var(--op-panel-width)); /* this pushes the panel off the screen to the right */ overflow-y: scroll; padding-block-end: var(--op-space-large); @@ -23,7 +23,7 @@ padding: var(--op-space-medium); border-radius: 100%; cursor: pointer; - float: right; + float: inline-end; &:hover { background-color: var(--op-color-neutral-plus-seven); diff --git a/src/addons/tom-select.css b/src/addons/tom-select.css index a66f1fd1..6246728c 100644 --- a/src/addons/tom-select.css +++ b/src/addons/tom-select.css @@ -2,7 +2,6 @@ .ts-wrapper { /* Control */ .ts-control { - min-height: var(--op-input-height-large); align-items: center; border: none; border-radius: var(--op-radius-large); @@ -12,13 +11,14 @@ font-size: var(--op-font-x-small); font-weight: var(--op-font-weight-light); line-height: var(--op-line-height-base); + min-block-size: var(--op-input-height-large); } /* Active control */ &.dropdown-active { .ts-control { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-end-end-radius: 0; + border-end-start-radius: 0; } } @@ -26,8 +26,8 @@ .ts-dropdown { border: none; margin: 0; - border-bottom-left-radius: var(--op-radius-large); - border-bottom-right-radius: var(--op-radius-large); + border-end-end-radius: var(--op-radius-large); + border-end-start-radius: var(--op-radius-large); box-shadow: var(--op-border-all) var(--op-color-border); contain: paint; diff --git a/src/components/accordion.css b/src/components/accordion.css index 2f6d8ead..16ad669a 100644 --- a/src/components/accordion.css +++ b/src/components/accordion.css @@ -9,11 +9,11 @@ summary { display: grid; - min-height: var(--_op-accordion-summary-min-height); align-items: center; cursor: pointer; gap: var(--op-space-2x-small); grid-template-columns: auto 1fr auto; + min-block-size: var(--_op-accordion-summary-min-height); &::marker, &::-webkit-details-marker { @@ -38,7 +38,7 @@ } &::details-content { - height: 0; + block-size: 0; transition: var(--op-transition-accordion-content); } @@ -48,7 +48,7 @@ } &::details-content { - height: auto; + block-size: auto; } } diff --git a/src/components/alert.css b/src/components/alert.css index 78680519..82a0a4a7 100644 --- a/src/components/alert.css +++ b/src/components/alert.css @@ -36,9 +36,9 @@ &.alert--flash { position: fixed; z-index: var(--op-z-index-alert-group); - top: var(--op-space-large); - right: var(--op-space-large); animation: var(--op-animation-flash); + inset-block-start: var(--op-space-large); + inset-inline-end: var(--op-space-large); } &.alert--warning { diff --git a/src/components/avatar.css b/src/components/avatar.css index 826ec7a2..8812c66f 100644 --- a/src/components/avatar.css +++ b/src/components/avatar.css @@ -18,11 +18,11 @@ z-index: 1; display: block; overflow: hidden; - width: var(--__op-avatar-size); - min-width: var(--__op-avatar-size); - height: var(--__op-avatar-size); - min-height: var(--__op-avatar-size); border-radius: var(--_op-avatar-border-radius); + block-size: var(--__op-avatar-size); + inline-size: var(--__op-avatar-size); + min-block-size: var(--__op-avatar-size); + min-inline-size: var(--__op-avatar-size); &::before { position: absolute; @@ -43,8 +43,8 @@ } img { - width: 100%; - height: 100%; + block-size: 100%; + inline-size: 100%; object-fit: cover; } diff --git a/src/components/button.css b/src/components/button.css index 28f91154..a73cb7b1 100644 --- a/src/components/button.css +++ b/src/components/button.css @@ -16,7 +16,6 @@ --__op-btn-padding: var(--_op-btn-padding-large); display: inline-flex; - min-height: var(--__op-btn-height); align-items: center; justify-content: center; padding: var(--__op-btn-padding); @@ -29,6 +28,7 @@ font-size: var(--__op-btn-font-size); font-weight: var(--op-font-weight-normal); gap: var(--op-space-x-small); + min-block-size: var(--__op-btn-height); text-align: center; text-decoration: none; transition: var(--op-transition-input); @@ -92,9 +92,9 @@ /* Icon Modifier */ &.btn--icon { - width: var(--__op-btn-height); - min-width: var(--__op-btn-height); padding: 0; + inline-size: var(--__op-btn-height); + min-inline-size: var(--__op-btn-height); } /* Icon With Label Modifier */ diff --git a/src/components/button_group.css b/src/components/button_group.css index 1fbe7689..3c39be6f 100644 --- a/src/components/button_group.css +++ b/src/components/button_group.css @@ -30,13 +30,13 @@ } &:first-child:not(:last-child) { - border-bottom-right-radius: 0; - border-top-right-radius: 0; + border-end-end-radius: 0; + border-start-end-radius: 0; } &:last-child:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; + border-end-start-radius: 0; + border-start-start-radius: 0; } } } diff --git a/src/components/card.css b/src/components/card.css index 23f50185..541503af 100644 --- a/src/components/card.css +++ b/src/components/card.css @@ -50,8 +50,8 @@ } .card__header { - border-top-left-radius: var(--_op-card-radius); - border-top-right-radius: var(--_op-card-radius); + border-start-end-radius: var(--_op-card-radius); + border-start-start-radius: var(--_op-card-radius); h1, h2, @@ -64,7 +64,7 @@ } .card__footer { - border-bottom-left-radius: var(--_op-card-radius); - border-bottom-right-radius: var(--_op-card-radius); + border-end-end-radius: var(--_op-card-radius); + border-end-start-radius: var(--_op-card-radius); } } diff --git a/src/components/confirm-dialog.css b/src/components/confirm-dialog.css index dccb5562..42843861 100644 --- a/src/components/confirm-dialog.css +++ b/src/components/confirm-dialog.css @@ -44,13 +44,13 @@ --_op-confirm-dialog-width: calc(100 * var(--op-size-unit)); /* 400px */ z-index: var(--op-z-index-dialog-content); - width: var(--_op-confirm-dialog-width); border-radius: var(--op-radius-medium); background-color: var(--op-color-background); box-shadow: var(--op-border-all) var(--op-color-border); color: var(--op-color-on-background); contain: paint; font-size: var(--op-font-medium); + inline-size: var(--_op-confirm-dialog-width); line-height: var(--op-line-height-base); opacity: var(--op-opacity-none); transform: scale(0.7); diff --git a/src/components/divider.css b/src/components/divider.css index 98febb27..712e2295 100644 --- a/src/components/divider.css +++ b/src/components/divider.css @@ -11,10 +11,9 @@ /* Private API (component option defaults) */ --__op-divider-height: var(--_op-divider-height-small); --__op-divider-padding: 0; - - width: 100%; - height: var(--__op-divider-height); background-color: var(--op-color-border); + block-size: var(--__op-divider-height); + inline-size: 100%; margin-block: var(--__op-divider-padding); margin-inline: 0; @@ -46,10 +45,10 @@ /* Direction Modifier */ &.divider--vertical { - width: var(--__op-divider-height); - height: 100%; - min-height: var(--_op-divider-vertical-min-height); + block-size: 100%; + inline-size: var(--__op-divider-height); margin-block: 0; margin-inline: var(--__op-divider-padding); + min-block-size: var(--_op-divider-vertical-min-height); } } diff --git a/src/components/form.css b/src/components/form.css index 9c941029..fe7c7e9f 100644 --- a/src/components/form.css +++ b/src/components/form.css @@ -10,9 +10,8 @@ /* Private API (component option defaults) */ --__op-form-control-height: var(--_op-form-control-height-large); --__op-form-control-font-size: var(--_op-form-control-font-large); - - min-width: var(--__op-form-control-height); - height: var(--__op-form-control-height); + block-size: var(--__op-form-control-height); + min-inline-size: var(--__op-form-control-height); /* Size Modifiers */ &.form-control--small { @@ -60,12 +59,12 @@ --_op-form-control-height-medium: var(--op-space-large); --_op-form-control-height-large: var(--op-space-x-large); - width: var(--__op-form-control-height); - height: var(--__op-form-control-height); align-self: center; margin: 0; accent-color: var(--op-color-primary-base); + block-size: var(--__op-form-control-height); cursor: pointer; + inline-size: var(--__op-form-control-height); & + label { align-self: center; @@ -81,18 +80,18 @@ --__op-form-control-border-color: var(--op-color-neutral-plus-four); display: block; - width: 100%; - min-width: var(--__op-form-control-height); - height: var(--__op-form-control-height); border: none; border-radius: var(--op-radius-medium); appearance: none; background-color: var(--op-color-neutral-plus-eight); + block-size: var(--__op-form-control-height); box-shadow: var(--op-border-all) var(--__op-form-control-border-color); color: var(--op-color-neutral-on-plus-eight); cursor: text; font-size: var(--__op-form-control-font-size); + inline-size: 100%; line-height: var(--op-line-height-base); + min-inline-size: var(--__op-form-control-height); padding-block: var(--op-space-2x-small); padding-inline: var(--op-space-small) var(--op-space-x-small); @@ -159,7 +158,6 @@ --__op-btn-height: var(--__op-btn-base-height); display: inline-flex; - min-height: var(--__op-btn-height); align-items: center; justify-content: center; border: none; @@ -173,6 +171,7 @@ font-weight: var(--op-font-weight-normal); gap: var(--op-space-x-small); margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2)); + min-block-size: var(--__op-btn-height); padding-block: 0; padding-inline: var(--op-space-x-small); text-align: center; @@ -199,13 +198,13 @@ select.form-control:not([multiple], [type='radio'], [type='checkbox']) { } select.form-control[multiple] { - min-height: calc(2 * var(--__op-form-control-height)); + min-block-size: calc(2 * var(--__op-form-control-height)); } textarea.form-control:not([type='radio'], [type='checkbox']) { - max-width: 100%; - height: calc(2 * var(--__op-form-control-height)); - min-height: var(--__op-form-control-height); + block-size: calc(2 * var(--__op-form-control-height)); + max-inline-size: 100%; + min-block-size: var(--__op-form-control-height); } .form-label { @@ -217,9 +216,9 @@ textarea.form-control:not([type='radio'], [type='checkbox']) { } .form-error { - width: fit-content; color: var(--op-color-alerts-danger-base); font-size: var(--op-font-x-small); + inline-size: fit-content; } .form-hint { diff --git a/src/components/icon.css b/src/components/icon.css index 6c8bd13d..7482f314 100644 --- a/src/components/icon.css +++ b/src/components/icon.css @@ -34,10 +34,10 @@ --__op-icon-optical-size: var(--_op-icon-optical-size-medium); display: inline-block; - width: var(--__op-icon-font-size); - height: var(--__op-icon-font-size); + block-size: var(--__op-icon-font-size); font-size: var(--__op-icon-font-size); font-weight: var(--__op-icon-weight); + inline-size: var(--__op-icon-font-size); line-height: var(--op-line-height-densest); vertical-align: middle; @@ -115,7 +115,7 @@ /* Custom SVG Icons app specific */ .custom-icons { svg { - width: 100%; - height: 100%; + block-size: 100%; + inline-size: 100%; } } diff --git a/src/components/modal.css b/src/components/modal.css index e498ca11..83a54fd5 100644 --- a/src/components/modal.css +++ b/src/components/modal.css @@ -48,13 +48,13 @@ --_op-modal-max-height: calc(125 * var(--op-size-unit)); /* 500px */ z-index: var(--op-z-index-dialog-content); - width: var(--_op-modal-width); border-radius: var(--op-radius-medium); background-color: var(--op-color-background); box-shadow: var(--op-border-all) var(--op-color-border); color: var(--op-color-on-background); contain: paint; font-size: var(--op-font-medium); + inline-size: var(--_op-modal-width); line-height: var(--op-line-height-base); opacity: var(--op-opacity-none); transform: scale(0.7); @@ -75,8 +75,8 @@ } .modal__body { - max-height: var(--_op-modal-max-height); box-shadow: var(--op-border-all) var(--op-color-border); + max-block-size: var(--_op-modal-max-height); overflow-y: auto; } diff --git a/src/components/navbar.css b/src/components/navbar.css index 787b43db..db74452e 100644 --- a/src/components/navbar.css +++ b/src/components/navbar.css @@ -23,11 +23,11 @@ /* Elements */ .navbar__brand { - height: var(--_op-navbar-brand-height); - margin-right: var(--_op-navbar-horizontal-spacing); + block-size: var(--_op-navbar-brand-height); + margin-inline-end: var(--_op-navbar-horizontal-spacing); img { - height: 100%; + block-size: 100%; } } diff --git a/src/components/pagination.css b/src/components/pagination.css index 3d2400d6..b8fc3344 100644 --- a/src/components/pagination.css +++ b/src/components/pagination.css @@ -18,7 +18,7 @@ /* ... Gap */ .pagination__divider { - height: 100%; + block-size: 100%; padding-inline: var(--op-space-x-small); } } diff --git a/src/components/segmented-control.css b/src/components/segmented-control.css index 751caad7..3187b721 100644 --- a/src/components/segmented-control.css +++ b/src/components/segmented-control.css @@ -36,19 +36,19 @@ position: relative; display: grid; - width: fit-content; - height: var(--__op-segmented-control-height); padding: var(--op-space-2x-small); border-radius: var(--op-radius-medium); background-color: var(--op-color-neutral-plus-eight); + block-size: var(--__op-segmented-control-height); box-shadow: var(--op-border-all) var(--op-color-border); color: var(--op-color-neutral-on-plus-eight); font-size: var(--__op-segmented-control-font-size); gap: var(--op-space-2x-small); grid-auto-flow: column; + inline-size: fit-content; &.segmented-control--full-width { - width: 100%; + inline-size: 100%; } .icon { @@ -58,12 +58,12 @@ .segmented-control__input { position: absolute; overflow: hidden; - width: 1px; - height: 1px; padding: 0; border-width: 0; margin: -1px; + block-size: 1px; clip: rect(0, 0, 0, 0); + inline-size: 1px; white-space: nowrap; /* Selected Option */ diff --git a/src/components/side_panel.css b/src/components/side_panel.css index 2e20160b..b750db72 100644 --- a/src/components/side_panel.css +++ b/src/components/side_panel.css @@ -7,13 +7,13 @@ --_op-side-panel-section-padding: var(--op-space-medium); display: flex; - width: var(--_op-side-panel-width); - min-width: var(--_op-side-panel-width); - height: 100vh; - max-height: 100%; flex-direction: column; background-color: var(--op-color-background); + block-size: 100vh; color: var(--op-color-on-background); + inline-size: var(--_op-side-panel-width); + max-block-size: 100%; + min-inline-size: var(--_op-side-panel-width); /* Modifiers */ &.side-panel--border-left { diff --git a/src/components/sidebar.css b/src/components/sidebar.css index 9da2c001..7ea36eda 100644 --- a/src/components/sidebar.css +++ b/src/components/sidebar.css @@ -29,23 +29,23 @@ z-index: var(--op-z-index-sidebar); display: flex; - width: var(--__op-sidebar-width); - min-width: var(--__op-sidebar-width); flex-direction: column; background-color: var(--_op-sidebar-background-color); box-shadow: var(--op-border-right) var(--_op-sidebar-border-color); color: var(--_op-sidebar-text-color); + inline-size: var(--__op-sidebar-width); + min-inline-size: var(--__op-sidebar-width); overflow-y: auto; transition: var(--_op-sidebar-transition); /* Elements */ .sidebar__brand { - height: var(--__op-sidebar-brand-width); padding: var(--_op-sidebar-brand-spacing); + block-size: var(--__op-sidebar-brand-width); margin-inline: auto; img { - height: 100%; + block-size: 100%; } } @@ -118,13 +118,14 @@ align-items: center; > * { - /* Need to get icon behavior */ - width: var(--__op-btn-height); - min-width: var(--__op-btn-height); justify-content: center; padding: 0; font-size: 0; gap: 0; + + /* Need to get icon behavior */ + inline-size: var(--__op-btn-height); + min-inline-size: var(--__op-btn-height); } } } diff --git a/src/components/spinner.css b/src/components/spinner.css index de756351..d4367907 100644 --- a/src/components/spinner.css +++ b/src/components/spinner.css @@ -17,12 +17,12 @@ --__op-spinner-diameter: var(--_op-spinner-diameter-large); --__op-spinner-track-width: var(--_op-spinner-track-width-large); - width: var(--__op-spinner-diameter); - height: var(--__op-spinner-diameter); border: var(--__op-spinner-track-width) solid var(--_op-spinner-track-color); border-radius: var(--__op-spinner-diameter); - border-top-color: var(--_op-spinner-indicator-color); animation: spinner var(--_op-spinner-animation-duration) var(--_op-spinner-animation-timing-function) infinite; + block-size: var(--__op-spinner-diameter); + border-block-start-color: var(--_op-spinner-indicator-color); + inline-size: var(--__op-spinner-diameter); &.spinner--x-small { --__op-spinner-diameter: var(--_op-spinner-diameter-x-small); diff --git a/src/components/switch.css b/src/components/switch.css index e0c42e0e..ae61d6f5 100644 --- a/src/components/switch.css +++ b/src/components/switch.css @@ -20,20 +20,20 @@ label { position: relative; display: block; - width: var(--__op-switch-width); - height: var(--__op-switch-height); border-radius: var(--op-radius-pill); background: var(--op-color-neutral-base); + block-size: var(--__op-switch-height); box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-three); + inline-size: var(--__op-switch-width); text-indent: -9999px; /* Normally text would not be put in the label, but this hides it in case you do put text in the label */ &::after { position: absolute; - width: var(--__op-switch-switch-size); - height: var(--__op-switch-switch-size); border-radius: var(--op-radius-circle); background-color: var(--op-color-neutral-plus-eight); + block-size: var(--__op-switch-switch-size); content: ''; + inline-size: var(--__op-switch-switch-size); inset-block-start: var(--__op-switch-half-switch-padding); inset-inline-start: var(--__op-switch-half-switch-padding); transition: var(--op-transition-input); @@ -42,12 +42,12 @@ /* Prevent labels after the toggle being full width */ & + label { - width: fit-content; + inline-size: fit-content; } input { - width: 0; - height: 0; + block-size: 0; + inline-size: 0; margin-inline-end: calc(-1 * var(--op-space-x-small)); &:disabled { @@ -64,7 +64,7 @@ box-shadow: none; &::after { - left: calc(100% - var(--__op-switch-half-switch-padding)); + inset-inline-start: calc(100% - var(--__op-switch-half-switch-padding)); transform: translateX(-100%); } } diff --git a/src/components/table.css b/src/components/table.css index 331eced6..a72fab20 100644 --- a/src/components/table.css +++ b/src/components/table.css @@ -11,11 +11,11 @@ /* These allow for overriding specific padding versions easier. */ --__op-table-cell-height: var(--_op-table-cell-height-default); - width: 100%; border-radius: var(--op-radius-medium); border-collapse: collapse; box-shadow: var(--op-border-all) var(--op-color-border); contain: paint; + inline-size: 100%; table-layout: auto; /* Elements */ @@ -33,7 +33,7 @@ th { font-weight: var(--op-font-weight-semi-bold); - text-align: left; + text-align: start; } tbody, @@ -44,7 +44,7 @@ th, td { - height: var(--__op-table-cell-height); + block-size: var(--__op-table-cell-height); font-size: var(--op-font-small); padding-block: var(--op-space-2x-small); padding-inline: var(--op-space-small); diff --git a/src/components/tooltip.css b/src/components/tooltip.css index db20f0b4..86ef54a3 100644 --- a/src/components/tooltip.css +++ b/src/components/tooltip.css @@ -24,8 +24,6 @@ position: absolute; z-index: var(--op-z-index-tooltip); display: block; - width: max-content; - max-width: var(--_op-tooltip-max-width); padding: var(--_op-tooltip-padding); border-radius: var(--_op-tooltip-tooltip-radius); background-color: var(--_op-tooltip-background-color); @@ -33,6 +31,8 @@ content: attr(data-tooltip-text); font-family: var(--op-font-family); /* Makes tooltips on icons work */ font-size: var(--_op-tooltip-tooltip-font-size); + inline-size: max-content; + max-inline-size: var(--_op-tooltip-max-width); overflow-wrap: break-word; pointer-events: none; text-align: center; diff --git a/src/core/base.css b/src/core/base.css index e4eaeb86..413dc417 100644 --- a/src/core/base.css +++ b/src/core/base.css @@ -8,8 +8,8 @@ html { body { overflow: auto; - height: 100vh; background: var(--op-color-background); + block-size: 100vh; color: var(--op-color-on-background); font-size: var(--op-font-medium); } @@ -56,9 +56,8 @@ h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: var(--op-space-small); font-weight: var(--op-font-weight-normal); + margin-block: 0 var(--op-space-small); } h1 { @@ -86,8 +85,8 @@ h6 { } p { - margin-bottom: var(--op-space-small); font-size: var(--op-font-medium); + margin-block-end: var(--op-space-small); } small { diff --git a/src/core/layout.css b/src/core/layout.css index 093a224b..cdc016c1 100644 --- a/src/core/layout.css +++ b/src/core/layout.css @@ -1,8 +1,8 @@ .app-with-sidebar { display: grid; - width: 100%; - height: 100vh; + block-size: 100vh; grid-template-columns: auto 1fr auto; + inline-size: 100%; } .app-body { @@ -14,30 +14,30 @@ .app__header { position: sticky; z-index: var(--op-z-index-header); - top: 0; flex-grow: 0; flex-shrink: 0; + inset-block-start: 0; } .app__content { - width: 100%; - max-width: var(--op-breakpoint-medium); flex-grow: 1; padding: 0 var(--op-space-large); margin: 0 auto; + inline-size: 100%; + max-inline-size: var(--op-breakpoint-medium); } .app__content-no-margin { - width: 100%; flex-grow: 1; padding: 0 var(--op-space-large); + inline-size: 100%; overflow-y: auto; } .app__footer { position: sticky; z-index: var(--op-z-index-footer); - bottom: 0; flex-grow: 0; flex-shrink: 0; + inset-block-end: 0; } diff --git a/src/core/tokens/base_tokens.css b/src/core/tokens/base_tokens.css index 810c5fe4..c8127f8c 100644 --- a/src/core/tokens/base_tokens.css +++ b/src/core/tokens/base_tokens.css @@ -324,21 +324,21 @@ Start off the Screen */ 0% { - right: -100%; + inset-inline-end: -100%; } /* Animate onto the screen for 0.5s */ 10% { - right: var(--op-space-large); + inset-inline-end: var(--op-space-large); } /* Stay on the screen for 3s */ 70% { - right: var(--op-space-large); + inset-inline-end: var(--op-space-large); } /* Animate off the screen for 1.5s */ 100% { - right: -100%; + inset-inline-end: -100%; } } diff --git a/src/core/utilities.css b/src/core/utilities.css index 1c876519..be98ce9a 100644 --- a/src/core/utilities.css +++ b/src/core/utilities.css @@ -1,14 +1,16 @@ /* Container Properties */ .container { - width: 100%; - max-width: var(--op-breakpoint-medium); - padding: 0 var(--op-space-large); - margin: 0 auto; + inline-size: 100%; + margin-block: 0; + margin-inline: auto; + max-inline-size: var(--op-breakpoint-medium); + padding-block: 0; + padding-inline: var(--op-space-large); } .container--sm { - max-width: var(--op-breakpoint-small); + max-inline-size: var(--op-breakpoint-small); } .container--md-padding { @@ -20,49 +22,49 @@ } .container--xs { - max-width: var(--op-breakpoint-x-small); + max-inline-size: var(--op-breakpoint-x-small); } /* Width Properties */ .full-width { - width: 100%; + inline-size: 100%; } .half-width { - width: 50%; + inline-size: 50%; } .four-fifths-width { - width: calc(100% * 4 / 5); + inline-size: calc(100% * 4 / 5); } .three-fifths-width { - width: calc(100% * 3 / 5); + inline-size: calc(100% * 3 / 5); } .two-fifths-width { - width: calc(100% * 2 / 5); + inline-size: calc(100% * 2 / 5); } .one-fifth-width { - width: calc(100% * 1 / 5); + inline-size: calc(100% * 1 / 5); } .three-quarters-width { - width: calc(100% * 3 / 4); + inline-size: calc(100% * 3 / 4); } .one-quarter-width { - width: calc(100% * 1 / 4); + inline-size: calc(100% * 1 / 4); } .two-thirds-width { - width: calc(100% * 2 / 3); + inline-size: calc(100% * 2 / 3); } .one-third-width { - width: calc(100% * 1 / 3); + inline-size: calc(100% * 1 / 3); } /* Flex Properties */ @@ -201,7 +203,7 @@ /* Text Alignment */ .text-left { - text-align: left; + text-align: start; } .text-center { @@ -209,7 +211,7 @@ } .text-right { - text-align: right; + text-align: end; } .text-justify { @@ -249,169 +251,157 @@ /* Vertical Margin */ .margin-y-xl { - margin-top: var(--op-space-x-large); - margin-bottom: var(--op-space-x-large); + margin-block: var(--op-space-x-large); } .margin-y-lg { - margin-top: var(--op-space-large); - margin-bottom: var(--op-space-large); + margin-block: var(--op-space-large); } .margin-y-md { - margin-top: var(--op-space-medium); - margin-bottom: var(--op-space-medium); + margin-block: var(--op-space-medium); } .margin-y-sm { - margin-top: var(--op-space-small); - margin-bottom: var(--op-space-small); + margin-block: var(--op-space-small); } .margin-y-xs { - margin-top: var(--op-space-x-small); - margin-bottom: var(--op-space-x-small); + margin-block: var(--op-space-x-small); } .margin-y-none { - margin-top: 0; - margin-bottom: 0; + margin-block: 0; } /* Horizontal Margin */ .margin-x-xl { - margin-right: var(--op-space-x-large); - margin-left: var(--op-space-x-large); + margin-inline: var(--op-space-x-large); } .margin-x-lg { - margin-right: var(--op-space-large); - margin-left: var(--op-space-large); + margin-inline: var(--op-space-large); } .margin-x-md { - margin-right: var(--op-space-medium); - margin-left: var(--op-space-medium); + margin-inline: var(--op-space-medium); } .margin-x-sm { - margin-right: var(--op-space-small); - margin-left: var(--op-space-small); + margin-inline: var(--op-space-small); } .margin-x-xs { - margin-right: var(--op-space-x-small); - margin-left: var(--op-space-x-small); + margin-inline: var(--op-space-x-small); } .margin-x-none { - margin-right: 0; - margin-left: 0; + margin-inline: 0; } /* Top Margin */ .margin-top-xl { - margin-top: var(--op-space-x-large); + margin-block-start: var(--op-space-x-large); } .margin-top-lg { - margin-top: var(--op-space-large); + margin-block-start: var(--op-space-large); } .margin-top-md { - margin-top: var(--op-space-medium); + margin-block-start: var(--op-space-medium); } .margin-top-sm { - margin-top: var(--op-space-small); + margin-block-start: var(--op-space-small); } .margin-top-xs { - margin-top: var(--op-space-x-small); + margin-block-start: var(--op-space-x-small); } .margin-top-none { - margin-top: 0; + margin-block-start: 0; } /* Bottom Margin */ .margin-bottom-xl { - margin-bottom: var(--op-space-x-large); + margin-block-end: var(--op-space-x-large); } .margin-bottom-lg { - margin-bottom: var(--op-space-large); + margin-block-end: var(--op-space-large); } .margin-bottom-md { - margin-bottom: var(--op-space-medium); + margin-block-end: var(--op-space-medium); } .margin-bottom-sm { - margin-bottom: var(--op-space-small); + margin-block-end: var(--op-space-small); } .margin-bottom-xs { - margin-bottom: var(--op-space-x-small); + margin-block-end: var(--op-space-x-small); } .margin-bottom-none { - margin-bottom: 0; + margin-block-end: 0; } /* Right Margin */ .margin-right-xl { - margin-right: var(--op-space-x-large); + margin-inline-end: var(--op-space-x-large); } .margin-right-lg { - margin-right: var(--op-space-large); + margin-inline-end: var(--op-space-large); } .margin-right-md { - margin-right: var(--op-space-medium); + margin-inline-end: var(--op-space-medium); } .margin-right-sm { - margin-right: var(--op-space-small); + margin-inline-end: var(--op-space-small); } .margin-right-xs { - margin-right: var(--op-space-x-small); + margin-inline-end: var(--op-space-x-small); } .margin-right-none { - margin-left: 0; + margin-inline-start: 0; } /* Left Margin */ .margin-left-xl { - margin-left: var(--op-space-x-large); + margin-inline-start: var(--op-space-x-large); } .margin-left-lg { - margin-left: var(--op-space-large); + margin-inline-start: var(--op-space-large); } .margin-left-md { - margin-left: var(--op-space-medium); + margin-inline-start: var(--op-space-medium); } .margin-left-sm { - margin-left: var(--op-space-small); + margin-inline-start: var(--op-space-small); } .margin-left-xs { - margin-left: var(--op-space-x-small); + margin-inline-start: var(--op-space-x-small); } .margin-left-none { - margin-left: 0; + margin-inline-start: 0; } /* @@ -422,8 +412,8 @@ .sr-only { position: absolute !important; overflow: hidden; - width: 1px; - height: 1px; + block-size: 1px; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); + inline-size: 1px; } diff --git a/src/recipes/16six-sidebar.css b/src/recipes/16six-sidebar.css index 227d2f10..3966d3c1 100644 --- a/src/recipes/16six-sidebar.css +++ b/src/recipes/16six-sidebar.css @@ -36,8 +36,8 @@ text-decoration: none; svg { - width: var(--op-space-3x-large); - height: var(--op-space-3x-large); + block-size: var(--op-space-3x-large); + inline-size: var(--op-space-3x-large); } .sidebar__brand-label { diff --git a/src/recipes/aligned-header.css b/src/recipes/aligned-header.css index f540c014..039da78e 100644 --- a/src/recipes/aligned-header.css +++ b/src/recipes/aligned-header.css @@ -9,8 +9,8 @@ .aligned-header__centered-suffix { display: inline-flex; - height: calc(var(--_op-line-height) * var(--_op-font-size)); align-items: center; + block-size: calc(var(--_op-line-height) * var(--_op-font-size)); vertical-align: top; } } From 19939851406683b2a0d697b3e78f4934585f72d2 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Wed, 19 Nov 2025 17:04:10 -0500 Subject: [PATCH 3/3] Convert mentions in documentation to physical properties to use logical properties --- src/stories/Recipes/AlignedHeader/AlignedHeader.mdx | 2 +- src/stories/Recipes/CustomSidebar/CustomSidebar.mdx | 4 ++-- src/stories/Recipes/Layout/Layout.js | 9 +++++---- src/stories/Tokens/Breakpoint.mdx | 2 +- src/stories/Tokens/Input/InputHeight.mdx | 8 ++++---- src/stories/Tokens/Sizing.mdx | 6 +++--- src/stories/Tokens/Spacing.mdx | 4 ++-- 7 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx b/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx index b819dac7..f5cbc471 100644 --- a/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx +++ b/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx @@ -38,7 +38,7 @@ This is not a common problem and your particular use-case may need to tweak the .aligned-header__centered-suffix { display: inline-flex; - height: calc(var(--_op-line-height) * var(--_op-font-size)); + block-size: calc(var(--_op-line-height) * var(--_op-font-size)); align-items: center; vertical-align: top; } diff --git a/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx b/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx index 68baf335..dbae6dbd 100644 --- a/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx +++ b/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx @@ -112,8 +112,8 @@ Your app may want to customize the sidebar to change the look and feel. Here are text-decoration: none; svg { - width: var(--op-space-3x-large); - height: var(--op-space-3x-large); + inline-size: var(--op-space-3x-large); + block-size: var(--op-space-3x-large); } .sidebar__brand-label { diff --git a/src/stories/Recipes/Layout/Layout.js b/src/stories/Recipes/Layout/Layout.js index 27538cbf..c5ad4b1b 100644 --- a/src/stories/Recipes/Layout/Layout.js +++ b/src/stories/Recipes/Layout/Layout.js @@ -129,10 +129,11 @@ const createLoginLayout = () => {