diff --git a/admin/class-admin-asset-manager.php b/admin/class-admin-asset-manager.php index 07f11c50de3..fcd1bbdd91a 100644 --- a/admin/class-admin-asset-manager.php +++ b/admin/class-admin-asset-manager.php @@ -658,6 +658,11 @@ protected function styles_to_be_registered() { [ 'name' => 'tailwind', 'src' => 'tailwind-' . $flat_version, + // Note: The RTL suffix is not added here. + // Tailwind and our UI library provide styling that should be standalone compatible with RTL. + // To make it easier we should use the logical properties and values when possible. + // If there are exceptions, we can use the Tailwind modifier, e.g. `rtl:yst-space-x-reverse`. + 'rtl' => false, ], [ 'name' => 'new-settings', diff --git a/config/grunt/task-config/rtlcss.js b/config/grunt/task-config/rtlcss.js new file mode 100644 index 00000000000..ae282dc8034 --- /dev/null +++ b/config/grunt/task-config/rtlcss.js @@ -0,0 +1,11 @@ +// https://github.com/MohammadYounes/grunt-rtlcss +module.exports = { + build: { + src: [ + "**/*.css", + "!**/*-rtl.css", + // Exclude UI library CSS files, as they are already RTL compatible. + "!tailwind-*.css", + ], + }, +}; diff --git a/css/src/admin-global.css b/css/src/admin-global.css index f2deec79f5c..5ced0085739 100644 --- a/css/src/admin-global.css +++ b/css/src/admin-global.css @@ -725,7 +725,7 @@ body.folded .wpseo-admin-submit-fixed { box-sizing: border-box; display: flex; flex-direction: row; - justify-content: left; + justify-content: flex-start; align-items: center; width: 100%; } diff --git a/package.json b/package.json index 774ecc8814b..365ef67097d 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@babel/core": "^7.18.5", "@slack/webhook": "^5.0.2", "@tailwindcss/container-queries": "^0.1.1", - "@tailwindcss/forms": "^0.5.2", + "@tailwindcss/forms": "^0.5.9", "@wordpress/dependency-extraction-webpack-plugin": "^4.28.0", "@wordpress/scripts": "^26.16.0", "@yoast/babel-preset": "^1.1.1", diff --git a/packages/js/src/academy/app.js b/packages/js/src/academy/app.js index 8e188d3564f..6cf0be445a0 100644 --- a/packages/js/src/academy/app.js +++ b/packages/js/src/academy/app.js @@ -267,7 +267,7 @@ const App = () => { /> { shouldShowPremiumBadge( course.dependencies, isPremium ) && ( -
+
{ __( "Premium", "wordpress-seo" ) }
) } @@ -291,7 +291,7 @@ const App = () => { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + } @@ -309,7 +309,7 @@ const App = () => { rel="noopener" { ...premiumUpsellConfig } > - + { sprintf( /* translators: %1$s expands to Premium. */ __( "Unlock with %1$s", "wordpress-seo" ), @@ -331,7 +331,7 @@ const App = () => { rel="noopener" > { __( "Start the course", "wordpress-seo" ) } - + ) } diff --git a/packages/js/src/components/MetaboxButton.js b/packages/js/src/components/MetaboxButton.js index 8be24fc7a7f..02de58d090b 100644 --- a/packages/js/src/components/MetaboxButton.js +++ b/packages/js/src/components/MetaboxButton.js @@ -12,7 +12,8 @@ import PropTypes from "prop-types"; const MetaboxButtonText = ( { className, ...props } ) => ( ( + ) } ); diff --git a/packages/js/src/first-time-configuration/first-time-configuration-steps.js b/packages/js/src/first-time-configuration/first-time-configuration-steps.js index 3468f1150e8..89c631cd9a9 100644 --- a/packages/js/src/first-time-configuration/first-time-configuration-steps.js +++ b/packages/js/src/first-time-configuration/first-time-configuration-steps.js @@ -473,7 +473,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.optimizeSeoData } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } @@ -502,7 +502,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.siteRepresentation } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } @@ -532,7 +532,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.socialProfiles } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } @@ -557,7 +557,7 @@ export default function FirstTimeConfigurationSteps() { stepId={ STEPS.personalPreferences } beforeGo={ beforeEditing } isVisible={ showEditButton } - additionalClasses={ "yst-ml-auto" } + additionalClasses="yst-ms-auto" > { __( "Edit", "wordpress-seo" ) } diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/alert.js b/packages/js/src/first-time-configuration/tailwind-components/base/alert.js index d5b37538d39..68342fb1bbe 100644 --- a/packages/js/src/first-time-configuration/tailwind-components/base/alert.js +++ b/packages/js/src/first-time-configuration/tailwind-components/base/alert.js @@ -42,7 +42,7 @@ export default function Alert( { type, children, className } ) { return (
{ icon } -
+
{ children }
diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js b/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js index 9f27e34ef01..7367e353c7f 100644 --- a/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js +++ b/packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js @@ -90,22 +90,22 @@ export default function YoastComboBox( { id, value, label, onChange, onQueryChan - { ( filteredOptions.length > 0 ) && ( - { isLoading &&
{ __( "Loading...", "wordpress-seo" ) }
} + { isLoading &&
{ __( "Loading...", "wordpress-seo" ) }
} { filteredOptions.map( ( option ) => ( { option.label } { ( selected || value.value === option.value ) && ( diff --git a/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js b/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js index 862bfa2db76..bd7d461254a 100644 --- a/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js +++ b/packages/js/src/first-time-configuration/tailwind-components/base/image-select.js @@ -79,7 +79,7 @@ export default function ImageSelect( {

- + { addButtonChildren }

diff --git a/packages/js/src/general/components/collapsible.js b/packages/js/src/general/components/collapsible.js index 535e4c23b85..7fbcf846989 100644 --- a/packages/js/src/general/components/collapsible.js +++ b/packages/js/src/general/components/collapsible.js @@ -13,7 +13,7 @@ export const Collapsible = ( { label, children } ) => { { ( { open } ) => (
- +
{ label }
{ title &&
} { isDismissable && -
+
- +

@@ -76,7 +76,7 @@ export function InstallationSuccessPage() { { __( "Start first-time configuration!", "wordpress-seo" ) } - { ( ! isNetworkControlEnabled && isMultisiteAvailable ) && { __( "Network Disabled", "wordpress-seo" ) } } - { ( isNetworkControlEnabled && integration.isNew ) && { __( "New", "wordpress-seo" ) } } + { ( ! isNetworkControlEnabled && isMultisiteAvailable ) && { __( "Network Disabled", "wordpress-seo" ) } } + { ( isNetworkControlEnabled && integration.isNew ) && { __( "New", "wordpress-seo" ) } }
@@ -103,7 +103,7 @@ export const AlgoliaIntegration = ( { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + }

@@ -133,7 +133,7 @@ export const AlgoliaIntegration = ( { target="_blank" > { __( "Unlock with Premium", "wordpress-seo" ) } diff --git a/packages/js/src/integrations-page/simple-integration.js b/packages/js/src/integrations-page/simple-integration.js index fda85bd9a7c..c62850ad159 100644 --- a/packages/js/src/integrations-page/simple-integration.js +++ b/packages/js/src/integrations-page/simple-integration.js @@ -34,7 +34,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { } - { ( integration.isNew ) && { __( "New", "wordpress-seo" ) } } + { ( integration.isNew ) && { __( "New", "wordpress-seo" ) } }
@@ -47,7 +47,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { return (
  • { usp }
    • @@ -66,7 +66,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + }
    @@ -83,7 +83,7 @@ export const SimpleIntegration = ( { integration, isActive, children } ) => { target="_blank" > { __( "Unlock with Premium", "wordpress-seo" ) } diff --git a/packages/js/src/integrations-page/toggleable-integration.js b/packages/js/src/integrations-page/toggleable-integration.js index b8503933e0d..ded8eb9dca3 100644 --- a/packages/js/src/integrations-page/toggleable-integration.js +++ b/packages/js/src/integrations-page/toggleable-integration.js @@ -79,8 +79,8 @@ export const ToggleableIntegration = ( { } - { ( ! isNetworkControlEnabled && isMultisiteAvailable ) && { __( "Network Disabled", "wordpress-seo" ) } } - { ( isNetworkControlEnabled && integration.isNew ) && { __( "New", "wordpress-seo" ) } } + { ( ! isNetworkControlEnabled && isMultisiteAvailable ) && { __( "Network Disabled", "wordpress-seo" ) } } + { ( isNetworkControlEnabled && integration.isNew ) && { __( "New", "wordpress-seo" ) } }
    @@ -100,7 +100,7 @@ export const ToggleableIntegration = ( { __( "(Opens in a new browser tab)", "wordpress-seo" ) } - + }

    @@ -122,7 +122,7 @@ export const ToggleableIntegration = ( { target="_blank" > { __( "Unlock with Premium", "wordpress-seo" ) } diff --git a/packages/js/src/integrations-page/woocommerce-integration.js b/packages/js/src/integrations-page/woocommerce-integration.js index 1b4dadee99e..7f99f3551aa 100644 --- a/packages/js/src/integrations-page/woocommerce-integration.js +++ b/packages/js/src/integrations-page/woocommerce-integration.js @@ -75,7 +75,7 @@ export const WoocommerceIntegration = ( { target="_blank" > { sprintf( diff --git a/packages/js/src/settings/app.js b/packages/js/src/settings/app.js index bcdac0e572b..7ea742e71d9 100644 --- a/packages/js/src/settings/app.js +++ b/packages/js/src/settings/app.js @@ -203,7 +203,7 @@ const App = () => { -
    +
    @@ -259,7 +259,7 @@ const App = () => { /> }
    { ! isPremium && -
    +
    { animateOpacity={ true } >
    -
    +
    } diff --git a/packages/js/src/settings/routes/site-representation.js b/packages/js/src/settings/routes/site-representation.js index d8a707d9597..6bf3bbd540f 100644 --- a/packages/js/src/settings/routes/site-representation.js +++ b/packages/js/src/settings/routes/site-representation.js @@ -262,7 +262,7 @@ const SiteRepresentation = () => { id="input-wpseo_social-mastodon_url" label={ __( "Mastodon", "wordpress-seo" ) } placeholder={ __( "E.g. https://mastodon.social/@yoast", "wordpress-seo" ) } - labelSuffix={ isPremium && Premium } + labelSuffix={ isPremium && Premium } isDummy={ ! isPremium } description={ <> { __( "Get your site verified in your Mastodon profile.", "wordpress-seo" ) } @@ -314,7 +314,7 @@ const SiteRepresentation = () => { ) ) } { /* eslint-disable-next-line react/jsx-no-bind */ } @@ -325,7 +325,7 @@ const SiteRepresentation = () => { { __( "Additional organization info", "wordpress-seo" ) } - { isPremium && Premium } + { isPremium && Premium } } description={ __( "Enrich your organization's profile by providing more in-depth information. The more details you share, the better Google understands your website.", "wordpress-seo" ) } > @@ -411,7 +411,7 @@ const SiteRepresentation = () => { { __( "Organization identifiers", "wordpress-seo" ) } - { isPremium && Premium } + { isPremium && Premium } } description={ __( "Please tell us more about your organization’s identifiers. This information will help Google to display accurate and helpful details about your organization.", "wordpress-seo" ) } > diff --git a/packages/js/src/settings/routes/templates/post-type.js b/packages/js/src/settings/routes/templates/post-type.js index 5cd1c70355e..c09fde9d45e 100644 --- a/packages/js/src/settings/routes/templates/post-type.js +++ b/packages/js/src/settings/routes/templates/post-type.js @@ -320,7 +320,7 @@ const PostType = ( { name, label, singularLabel, hasArchive, hasSchemaArticleTyp name={ `wpseo_titles.page-analyse-extra-${ name }` } id={ `input-wpseo_titles-page-analyse-extra-${ name }` } label={ __( "Add custom fields to page analysis", "wordpress-seo" ) } - labelSuffix={ isPremium && Premium } + labelSuffix={ isPremium && Premium } description={ <> { customFieldsDescription }
    diff --git a/packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js b/packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js index c97b18035aa..7a60a851214 100644 --- a/packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js +++ b/packages/js/src/shared-admin/components/ai-fix-assessments-upsell.js @@ -43,7 +43,7 @@ export const AiFixAssessmentsUpsell = ( { thumbnail={ thumbnail } wistiaEmbedPermission={ wistiaEmbedPermission } /> - + { __( "Beta", "wordpress-seo-premium" ) }
    @@ -92,7 +92,7 @@ export const AiFixAssessmentsUpsell = ( { target="_blank" ref={ initialFocus } > - + { upsellLabel } { diff --git a/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js b/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js index fe44297ea44..e832d05525b 100644 --- a/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js +++ b/packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js @@ -50,7 +50,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( { thumbnail={ thumbnail } wistiaEmbedPermission={ wistiaEmbedPermission } /> - Beta + Beta
    @@ -105,7 +105,7 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( { target="_blank" ref={ initialFocus } > - + { upsellLabel } { diff --git a/packages/js/src/shared-admin/components/premium-upsell-list.js b/packages/js/src/shared-admin/components/premium-upsell-list.js index ecc231bfa3e..fcc04ed9a43 100644 --- a/packages/js/src/shared-admin/components/premium-upsell-list.js +++ b/packages/js/src/shared-admin/components/premium-upsell-list.js @@ -31,7 +31,7 @@ export const PremiumUpsellList = ( { premiumLink, premiumUpsellConfig, isPromoti "Yoast SEO Premium" ) } -
      +
        { getPremiumBenefits().map( ( benefit, index ) => (
      • { createInterpolateElement( benefit, { strong: } ) } diff --git a/packages/js/src/shared-admin/components/unsaved-changes-modal.js b/packages/js/src/shared-admin/components/unsaved-changes-modal.js index e410118f836..40d5dc2cc3e 100644 --- a/packages/js/src/shared-admin/components/unsaved-changes-modal.js +++ b/packages/js/src/shared-admin/components/unsaved-changes-modal.js @@ -28,7 +28,7 @@ export const UnsavedChangesModal = ( { isOpen, onClose = noop, onDiscard = noop, >
    -
    +
    { title } diff --git a/packages/js/src/shared-admin/components/video-flow.js b/packages/js/src/shared-admin/components/video-flow.js index 60130b356ff..18f93958a1c 100644 --- a/packages/js/src/shared-admin/components/video-flow.js +++ b/packages/js/src/shared-admin/components/video-flow.js @@ -91,7 +91,7 @@ export const VideoFlow = ( { videoId, thumbnail, wistiaEmbedPermission } ) => {
    ) } { ( wistiaEmbedPermission.value && videoFlow === VIDEO_FLOW.isPlaying ) && ( -
    +
    { videoId === null && } { videoId !== null &&
    }
    diff --git a/packages/js/src/support/app.js b/packages/js/src/support/app.js index 32e18b7ef7b..dfdb72cf9ae 100644 --- a/packages/js/src/support/app.js +++ b/packages/js/src/support/app.js @@ -83,7 +83,7 @@ export const App = () => { return (
    -
    +
    @@ -113,7 +113,7 @@ export const App = () => { target="_blank" > { title } - + @@ -210,7 +210,7 @@ export const App = () => { { ...premiumUpsellConfig } >
    -
    +

    { __( "Our support team is here to answer any questions you may have. Fill out the (pop-up) contact form, and we'll get back to you as soon as possible!", "wordpress-seo" ) }

    { { ! isPremium && -
    +
    - + ); diff --git a/packages/js/tests/__snapshots__/InstallationSuccessPage.test.js.snap b/packages/js/tests/__snapshots__/InstallationSuccessPage.test.js.snap index 85c68a295e3..a69d26cf215 100644 --- a/packages/js/tests/__snapshots__/InstallationSuccessPage.test.js.snap +++ b/packages/js/tests/__snapshots__/InstallationSuccessPage.test.js.snap @@ -60,7 +60,7 @@ exports[`InstallationSuccessPage should match the snapshot 1`] = `
    ⌘K diff --git a/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap b/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap index e8ba1f077ae..1d6ecc4acf9 100644 --- a/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap +++ b/packages/js/tests/shared-admin/components/__snapshots__/ai-fix-assessments-upsell.test.js.snap @@ -12,7 +12,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = ` class="yst-relative yst-w-full yst-h-0 yst-pt-[56.25%] yst-overflow-hidden yst-rounded-md yst-drop-shadow-md yst-bg-white" >
    Beta @@ -93,7 +93,7 @@ exports[`AiFixAssessmentsUpsell renders the component correctly 1`] = ` >
    Beta @@ -91,7 +91,7 @@ exports[`AiGenerateTitlesAndDescriptionsUpsell renders the component correctly f >
    Beta @@ -213,7 +213,7 @@ exports[`AiGenerateTitlesAndDescriptionsUpsell renders the component correctly f >
    diff --git a/packages/ui-library/src/components/file-import/stories.js b/packages/ui-library/src/components/file-import/stories.js index 044995e2a82..98f69a5021b 100644 --- a/packages/ui-library/src/components/file-import/stories.js +++ b/packages/ui-library/src/components/file-import/stories.js @@ -167,7 +167,7 @@ export const Success = { SEO data successfully imported! However, there were some slight problems with the following data: -
      +
      • This went wrong
      • This also went wrong
      diff --git a/packages/ui-library/src/components/file-import/style.css b/packages/ui-library/src/components/file-import/style.css index dd3b114faf7..3385bdfe9e6 100644 --- a/packages/ui-library/src/components/file-import/style.css +++ b/packages/ui-library/src/components/file-import/style.css @@ -15,7 +15,7 @@ } .yst-file-import__feedback-header { - @apply yst-flex yst-items-start yst-space-x-4; + @apply yst-flex yst-items-start yst-space-x-4 rtl:yst-space-x-reverse; } .yst-file-import__feedback-figure { diff --git a/packages/ui-library/src/components/modal/style.css b/packages/ui-library/src/components/modal/style.css index 6fd1114f2be..84ced92210d 100644 --- a/packages/ui-library/src/components/modal/style.css +++ b/packages/ui-library/src/components/modal/style.css @@ -33,7 +33,7 @@ } .yst-modal__close { - @apply yst-block yst-absolute yst-top-4 yst-right-4; + @apply yst-block yst-absolute yst-top-4 yst-end-4; } .yst-modal__close-button { diff --git a/packages/ui-library/src/components/notifications/style.css b/packages/ui-library/src/components/notifications/style.css index 4da911c1f03..44716e36c81 100644 --- a/packages/ui-library/src/components/notifications/style.css +++ b/packages/ui-library/src/components/notifications/style.css @@ -1,30 +1,30 @@ @layer components { - .yst-root { + .yst-root { - .yst-notifications { - max-width: calc(100vw - 4rem); /* 100vw - top and left of 2rem = 4rem. */ - max-height: calc(100vh - 4rem); /* 100vh - ( top of 2rem * 2 ) = 4rem. */ - @apply yst-fixed yst-w-full yst-z-20 yst-pointer-events-none yst-flex yst-flex-col yst-space-y-4; - } + .yst-notifications { + max-width: calc(100vw - 4rem); /* 100vw - top and left of 2rem = 4rem. */ + max-height: calc(100vh - 4rem); /* 100vh - ( top of 2rem * 2 ) = 4rem. */ + @apply yst-fixed yst-w-full yst-z-20 yst-pointer-events-none yst-flex yst-flex-col yst-space-y-4; + } - .yst-notifications--bottom-center { - @apply yst-bottom-8 yst-items-center; - } + .yst-notifications--bottom-center { + @apply yst-bottom-8 yst-items-center; + } - .yst-notifications--bottom-left { - @apply yst-bottom-8 yst-left-8; - } + .yst-notifications--bottom-left { + @apply yst-bottom-8 yst-start-8; + } - .yst-notifications--top-center { - @apply yst-top-8 yst-items-center; - } + .yst-notifications--top-center { + @apply yst-top-8 yst-items-center; + } .yst-notification--large { @apply yst-w-96; } - .yst-notification__icon { - @apply yst-w-5 yst-h-5; - } - } + .yst-notification__icon { + @apply yst-w-5 yst-h-5; + } + } } diff --git a/packages/ui-library/src/components/pagination/display-text.js b/packages/ui-library/src/components/pagination/display-text.js index f9a56e523e6..b99033c61a3 100644 --- a/packages/ui-library/src/components/pagination/display-text.js +++ b/packages/ui-library/src/components/pagination/display-text.js @@ -8,9 +8,9 @@ import React from "react"; * @returns {JSX.Element} The element. */ const DisplayText = ( { current, total } ) => ( -
      + { current } / { total } -
      + ); DisplayText.displayName = "Pagination.DisplayText"; diff --git a/packages/ui-library/src/components/pagination/index.js b/packages/ui-library/src/components/pagination/index.js index 64008a56e1c..7414379e28f 100644 --- a/packages/ui-library/src/components/pagination/index.js +++ b/packages/ui-library/src/components/pagination/index.js @@ -45,9 +45,9 @@ const Pagination = ( { return ( ); diff --git a/packages/ui-library/src/components/pagination/style.css b/packages/ui-library/src/components/pagination/style.css index 6e31df2ea28..7975ea88018 100644 --- a/packages/ui-library/src/components/pagination/style.css +++ b/packages/ui-library/src/components/pagination/style.css @@ -1,6 +1,9 @@ @layer components { .yst-root { .yst-pagination { + /* Override direction to be LTR due to this component always being numbers. */ + direction: ltr; + @apply yst-isolate yst-inline-flex diff --git a/packages/ui-library/src/components/root/style.css b/packages/ui-library/src/components/root/style.css index 1b98893f38d..4cc0ccd584d 100644 --- a/packages/ui-library/src/components/root/style.css +++ b/packages/ui-library/src/components/root/style.css @@ -2,7 +2,7 @@ * Tailwind CSS preflight, but scoped to the Yoast root class. * This is added to the base layer by design. * - * Source: https://github.com/tailwindlabs/tailwindcss/blob/v3.1.2/src/css/preflight.css + * Source: https://raw.githubusercontent.com/tailwindlabs/tailwindcss/refs/tags/v3.4.16/src/css/preflight.css * Changed `html` and `body` to affect the `.yst-root` instead. */ @layer base { @@ -31,19 +31,30 @@ 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. + 5. Use the user's configured `sans` font-feature-settings by default. + 6. Use the user's configured `sans` font-variation-settings by default. + 7. Disable tap highlights on iOS */ - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - tab-size: 4; /* 3 */ - font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ + &, + :host { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + tab-size: 4; /* 3 */ + font-family: theme('fontFamily.sans', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); /* 4 */ + font-feature-settings: theme('fontFamily.sans[1].fontFeatureSettings', normal); /* 5 */ + font-variation-settings: theme('fontFamily.sans[1].fontVariationSettings', normal); /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ + } /* 1. Remove the margin in all browsers. */ - margin: 0; /* 1 */ + & { + margin: 0; /* 1 */ + } /* 1. Add the correct height in Firefox. @@ -98,8 +109,10 @@ } /* - 1. Use the user's configured `mono` font family by default. - 2. Correct the odd `em` font sizing in all browsers. + 1. Use the user's configured `mono` font-family by default. + 2. Use the user's configured `mono` font-feature-settings by default. + 3. Use the user's configured `mono` font-variation-settings by default. + 4. Correct the odd `em` font sizing in all browsers. */ code, @@ -107,7 +120,9 @@ samp, pre { font-family: theme('fontFamily.mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); /* 1 */ - font-size: 1em; /* 2 */ + font-feature-settings: theme('fontFamily.mono[1].fontFeatureSettings', normal); /* 2 */ + font-variation-settings: theme('fontFamily.mono[1].fontVariationSettings', normal); /* 3 */ + font-size: 1em; /* 4 */ } /* @@ -162,9 +177,12 @@ select, textarea { font-family: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ @@ -185,9 +203,9 @@ */ button, - [type='button'], - [type='reset'], - [type='submit'] { + input:where([type='button']), + input:where([type='reset']), + input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ @@ -299,6 +317,14 @@ padding: 0; } + /* + Reset default styling for dialogs. + */ + + dialog { + padding: 0; + } + /* Prevent resizing textareas horizontally by default. */ @@ -315,7 +341,7 @@ input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ - color: theme('colors.gray.500', #9ca3af); /* 2 */ + color: theme('colors.gray.400', #9ca3af); /* 2 */ } /* @@ -330,6 +356,7 @@ /* Make sure disabled buttons don't get the pointer cursor. */ + :disabled { cursor: default; } @@ -361,6 +388,12 @@ max-width: 100%; height: auto; } + + /* Make elements with the HTML hidden attribute stay hidden by default */ + + [hidden]:where(:not([hidden="until-found"])) { + display: none; + } } } @@ -453,7 +486,7 @@ } svg path { - stroke-width: inherit; - } + stroke-width: inherit; + } } } diff --git a/packages/ui-library/src/components/select-field/stories.js b/packages/ui-library/src/components/select-field/stories.js index f8c366aad4d..4638200c385 100644 --- a/packages/ui-library/src/components/select-field/stories.js +++ b/packages/ui-library/src/components/select-field/stories.js @@ -91,7 +91,7 @@ export const WithLabelSuffix = { options: Factory.args.options, value: Factory.args.options[ 2 ].value, label: "Select field with a label suffix", - labelSuffix: Beta, + labelSuffix: Beta, }, }; diff --git a/packages/ui-library/src/components/sidebar-navigation/collapsible.js b/packages/ui-library/src/components/sidebar-navigation/collapsible.js index 6fb055b7840..65fa939aab3 100644 --- a/packages/ui-library/src/components/sidebar-navigation/collapsible.js +++ b/packages/ui-library/src/components/sidebar-navigation/collapsible.js @@ -31,7 +31,7 @@ export const Collapsible = ( { as: Component = "div", label, icon, children, def diff --git a/packages/ui-library/src/components/sidebar-navigation/mobile.js b/packages/ui-library/src/components/sidebar-navigation/mobile.js index d4e4cb916de..7c152f9e672 100644 --- a/packages/ui-library/src/components/sidebar-navigation/mobile.js +++ b/packages/ui-library/src/components/sidebar-navigation/mobile.js @@ -30,7 +30,7 @@ const Mobile = ( {