diff --git a/web/src/assets/styles/app.scss b/web/src/assets/styles/app.scss deleted file mode 100644 index a8b41c1464..0000000000 --- a/web/src/assets/styles/app.scss +++ /dev/null @@ -1,111 +0,0 @@ -// Better alignment for expandable section with a sibling list -ul.pf-v5-c-list + div.pf-v5-c-expandable-section { - > button { - margin-inline-start: calc( - var(--pf-v5-global--spacer--lg) - var(--pf-v5-global--spacer--sm) - var( - --pf-v5-global--icon--FontSize--sm - ) - ); - } - - > div { - margin-block-start: 0; - } -} - -// *DataLists custom styles -li.pf-v5-c-data-list__item { - border-block-end-width: thin; -} - -div.pf-v5-c-data-list__item-row:has(button.remove-link:hover) { - background-color: #fafafa; -} - -button.remove-link:hover { - color: var(--pf-v5-c-button--m-danger--BackgroundColor); -} - -.first-username-dropdown { - position: absolute; - width: 100%; -} - -.first-username-wrapper { - position: relative; - width: 100%; -} - -#productSelectionForm { - input[type="radio"] { - align-self: center; - flex-shrink: 0; - inline-size: 20px; - block-size: 20px; - } - - .pf-v5-c-card { - img { - max-inline-size: 80px; - } - - label { - cursor: pointer; - } - - label::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - } -} - -.agama-install-button { - padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md); - font-size: var(--fs-large); -} - -.agama-issues-mark { - background: white; - width: 24px; - height: 24px; - border-radius: 24px; - top: -7px; - right: -7px; - position: absolute; - display: flex; - align-content: center; - justify-content: center; -} - -.agama-issues-drawer-body { - padding: var(--pf-v5-global--spacer--lg); - - h4 a { - text-decoration: underline; - font-weight: var(--fw-bold); - } - - ul li.pf-m-info, - ul li.pf-m-warning { - --pf-v5-c-notification-drawer__list-item--before--BackgroundColor: none; - } -} - -.menu-toggle-inline { - padding: 1px 0.5ch; - margin-block-end: 0.5em; - background: var(--color-gray); - border-radius: 4px; - - &.pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text) { - text-decoration: none; - color: black; - } -} diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss deleted file mode 100644 index 33de6e471e..0000000000 --- a/web/src/assets/styles/blocks.scss +++ /dev/null @@ -1,192 +0,0 @@ -// CSS rules used for the standard Agama section (core/Section.jsx) -// In the future we might add different section layouts by using data-variant attribute -// or similar strategy - -// Make progress more compact -.dasd-format-progress { - .pf-v5-c-progress { - --pf-v5-c-progress--GridGap: var(--spacer-small); - } -} - -.issue { - --icon-size: 1rem; - - div:first-child { - svg { - width: var(--icon-size); - height: var(--icon-size); - } - } - - div:nth-child(2) { - padding-left: calc(var(--icon-size) + var(--pf-v5-c-helper-text__item-icon--MarginRight)); - } -} - -table[data-type="agama/tree-table"] { - th:first-child { - padding-inline-end: var(--spacer-normal); - } - - /** - * Temporary PF/Table overrides for small devices - **/ - @media (width <= 768px) { - &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="1"] td { - padding-inline-start: var(--spacer-medium); - } - - &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="2"] th { - padding-inline-start: calc(var(--spacer-large) * 1.1); - } - - &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="2"] td { - padding-inline-start: calc(var(--spacer-large) * 1.4); - } - - &.pf-m-tree-view-grid-md.pf-v5-c-table - tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded { - padding-block-end: var(--spacer-smaller); - } - - &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:empty, - &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td *:empty, - &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:has(> *:empty) { - display: none; - } - - &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:has(> *:not(:empty)) { - display: inherit; - } - - &.pf-m-tree-view-grid-md.pf-v5-c-table - tbody:where(.pf-v5-c-table__tbody) - tr:where(.pf-v5-c-table__tr)::before { - inset-inline-start: 0; - } - - &.pf-v5-c-table.pf-m-compact - tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) - > *:last-child { - padding-inline-end: 8px; - } - - tbody th:first-child { - font-size: var(--fs-large); - padding-block-start: var(--spacer-small); - } - } -} - -table.devices-table { - tr.dimmed-row { - background-color: #fff; - opacity: 0.8; - background: repeating-linear-gradient(-45deg, #fcfcff, #fcfcff 3px, #fff 3px, #fff 10px); - - td { - color: var(--color-gray-dimmed); - padding-block: 0; - } - } -} - -table.proposal-result { - @extend .devices-table; - - /** - * Temporary hack because the collapse/expand callback was not given to the - * tree table - **/ - th button { - display: none; - } - - tbody th .pf-v5-c-table__tree-view-main { - padding-inline-start: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft); - cursor: auto; - } - - tbody tr[aria-level="2"] th .pf-v5-c-table__tree-view-main { - padding-inline-start: calc( - var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft) + var(--spacer-large) - ); - } - /** End of temporary hack */ -} - -// compact lists in popover -.pf-v5-c-popover li + li { - margin: 0; -} - -.radio-group { - .pf-v5-c-radio { - position: relative; - padding-block-end: var(--spacer-small); - padding-inline-end: var(--spacer-small); - - &.selected::after { - --arrow-size: var(--spacer-small, 10px); - - content: ""; - position: absolute; - bottom: -1px; - left: 50%; - width: 0; - height: 0; - border-bottom: solid var(--arrow-size) var(--color-gray); - border-left: solid var(--arrow-size) transparent; - border-right: solid var(--arrow-size) transparent; - } - } -} - -.size-input-group { - max-inline-size: 20ch; - - input { - text-align: end; - } - - select { - min-inline-size: fit-content; - } -} - -[role="dialog"] { - section:not([class^="pf-c"]) { - > svg:first-child { - block-size: 24px; - inline-size: 24px; - } - - h2 { - font-size: var(--fs-h3); - } - } -} - -[data-type="agama/expandable-selector"] { - // The expandable selector is built on top of PF/Table#expandable - // Let's tweak some styles - tr { - td:first-child { - padding-inline-start: 0; - } - - td:last-child { - padding-inline-end: 0; - } - } - - tr.pf-v5-c-table__expandable-row.pf-m-expanded { - border-bottom: 0; - - .pf-v5-c-table__expandable-row-content { - font-size: var(--fs-medium); - padding-block: var(--spacer-small); - } - } -} diff --git a/web/src/assets/styles/composition.scss b/web/src/assets/styles/composition.scss deleted file mode 100644 index e6f7956fd3..0000000000 --- a/web/src/assets/styles/composition.scss +++ /dev/null @@ -1,41 +0,0 @@ -// TODO: make it less specific. -.location-layout > div { - display: flex; - - form { - display: flex; - flex-direction: column; - flex: 1 1 0; - gap: 0; - } - - form > div:nth-child(2) { - overflow-y: auto; - min-block-size: 120px; - margin-block-end: var(--spacer-medium); - - table { - background: transparent; - } - } - - form > div:last-child { - min-block-size: min-content; - } -} - -// FIXME: Temporary solution to hide expand button. The button should be removed instead. -.location-layout table button[id^="expand-toggle"] { - display: none; -} - -.location-layout table tbody tr:not(:first-child) { - td:nth-child(3) { - padding-inline-start: 5ch; - } -} - -body > div[inert], -body > div[aria-hidden="true"] { - filter: grayscale(1) blur(2px); -} diff --git a/web/src/assets/styles/fonts/LatoLatin-Bold.woff2 b/web/src/assets/styles/fonts/LatoLatin-Bold.woff2 deleted file mode 100644 index 2615c853d5..0000000000 Binary files a/web/src/assets/styles/fonts/LatoLatin-Bold.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/LatoLatin-BoldItalic.woff2 b/web/src/assets/styles/fonts/LatoLatin-BoldItalic.woff2 deleted file mode 100644 index f7bace1377..0000000000 Binary files a/web/src/assets/styles/fonts/LatoLatin-BoldItalic.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/LatoLatin-Italic.woff2 b/web/src/assets/styles/fonts/LatoLatin-Italic.woff2 deleted file mode 100644 index aaa5a35c3d..0000000000 Binary files a/web/src/assets/styles/fonts/LatoLatin-Italic.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/LatoLatin-Regular.woff2 b/web/src/assets/styles/fonts/LatoLatin-Regular.woff2 deleted file mode 100644 index a4d084bfb7..0000000000 Binary files a/web/src/assets/styles/fonts/LatoLatin-Regular.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/SUSE-VariableFont_wght.ttf b/web/src/assets/styles/fonts/SUSE-VariableFont_wght.ttf new file mode 100644 index 0000000000..f9b43eeba9 Binary files /dev/null and b/web/src/assets/styles/fonts/SUSE-VariableFont_wght.ttf differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300.woff b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300.woff deleted file mode 100644 index 047c485b58..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300.woff and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300.woff2 b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300.woff2 deleted file mode 100644 index d831896f4b..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300italic.woff b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300italic.woff deleted file mode 100644 index 243fe7559f..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300italic.woff and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300italic.woff2 b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300italic.woff2 deleted file mode 100644 index 4583a9d38f..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-300italic.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500.woff b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500.woff deleted file mode 100644 index d5e713b461..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500.woff and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500.woff2 b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500.woff2 deleted file mode 100644 index 6e1053fbc7..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500italic.woff b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500italic.woff deleted file mode 100644 index 347a5352bd..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500italic.woff and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500italic.woff2 b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500italic.woff2 deleted file mode 100644 index b3acaa16da..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-500italic.woff2 and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-regular.woff b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-regular.woff deleted file mode 100644 index ccce523feb..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-regular.woff and /dev/null differ diff --git a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-regular.woff2 b/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-regular.woff2 deleted file mode 100644 index 7457692a28..0000000000 Binary files a/web/src/assets/styles/fonts/poppins-v19-latin-ext_latin_devanagari-regular.woff2 and /dev/null differ diff --git a/web/src/assets/styles/global.scss b/web/src/assets/styles/global.scss deleted file mode 100644 index 98cfaa3635..0000000000 --- a/web/src/assets/styles/global.scss +++ /dev/null @@ -1,103 +0,0 @@ -// Global CSS starts -h1, -h2, -h3, -h4, -h5, -h6 { - // margin: 0; - font-family: var(--ff-headlines); - font-weight: var(--fw-bold); -} - -h1 { - font-size: var(--pf-v5-global--FontSize--2xl); -} - -h2 { - font-size: var(--pf-v5-global--FontSize--xl); -} - -h3 { - font-size: var(--pf-v5-global--FontSize--lg); -} - -h4 { - font-size: var(--pf-v5-global--FontSize--md); -} - -a { - color: currentcolor; -} - -a:not(.pf-v5-c-button,.pf-v5-c-nav__link,.pf-v5-c-menu__item), -// TODO: make it better, using PatternFly custom properties for overriding it -button.pf-m-plain, -button.pf-m-link { - text-decoration: underline; - text-decoration-thickness: 0.1em; - text-underline-offset: 0.2em; - transition: all 0.15s ease-in-out; - - &:hover { - color: var(--color-link-hover); - } -} - -.pf-v5-c-page__sidebar { - button.pf-m-link, - a.pf-m-link { - color: white; - text-decoration: underline; - } -} - -// Do not reserve space for empty nodes. -div:empty { - display: none; -} - -fieldset { - padding: var(--fs-base); - border: 0; - border-top: 1px solid var(--color-gray); - border-image: linear-gradient(45deg, var(--color-gray), transparent) 1; - - legend { - padding-inline-end: var(--fs-base); - margin-inline-start: calc(var(--fs-base) * -1); - } -} - -table { - border-collapse: collapse; -} - -th { - text-align: start; -} - -svg { - vertical-align: middle; -} - -li { - svg { - vertical-align: middle; - } -} - -// Style focus making use of :focus-visible -*:focus { - outline: none; -} - -*:focus:not(:focus-visible) { - box-shadow: none; -} - -*:focus-visible { - // outline: 1px dotted; - // outline-offset: 0.25rem; - box-shadow: 0 0 0 1px var(--focus-color); -} diff --git a/web/src/assets/styles/index.scss b/web/src/assets/styles/index.scss index d8a72887da..c2a3851ceb 100644 --- a/web/src/assets/styles/index.scss +++ b/web/src/assets/styles/index.scss @@ -1,11 +1,127 @@ +// Temporary CSS rules as part of the migration to PF6. They are expected to +// change significantly, especially the token names, as the interface +// customization is refined. +@font-face { + font-family: "SUSE Text"; + font-optical-sizing: auto; + font-weight: 400; + font-style: normal; + src: local(""), url("./fonts/SUSE-VariableFont_wght.ttf"); +} + +@font-face { + font-family: "SUSE Display"; + font-optical-sizing: auto; + font-weight: 600; + font-style: normal; + src: local(""), url("./fonts/SUSE-VariableFont_wght.ttf"); +} + +:root { + --agm-t--color--pine: #0c322c; + --agm-t--color--jungle: #30ba78; + --agm-t--color--jungle--hover: #c0efde; + --agm-t--color--fog: #efefef; + + --agm-t--action--background--color--hover: #c0efde; // #eafaf4; + + --pf-t--global--background--color--secondary--default: var(--agm-t--color--fog); + --pf-t--global--background--color--action--plain--hover: var( + --agm-t--action--background--color--hover + ); + --pf-t--global--background--color--action--plain--alt--hover: var( + --agm-t--action--background--color--hover + ); + --pf-t--global--background--color--action--plain--alt--clicked: var(--agm-t--color--jungle); + + --agm-t--install--button--background: var(--agm-t--color--pine); + --agm-t--install--button--color: var(--pf-t--color--white); + + --pf-t--global--font--family--100: "SUSE Text"; + --pf-t--global--font--family--200: "SUSE Display"; + --pf-t--global--font--family--300: "Roboto mono", monospace; + --pf-t--global--font--line-height--100: 1.3; + --pf-t--global--font--line-height--200: 1.5; + --pf-t--global--font--size--100: 0.875rem; + --pf-t--global--font--size--200: 1em; + --pf-t--global--font--size--300: 1.125rem; + --pf-t--global--font--size--400: 1.25rem; + --pf-t--global--font--size--500: 1.5rem; + --pf-t--global--font--size--600: 1.75rem; + --pf-t--global--font--size--700: 2rem; + --pf-t--global--font--size--800: 2.25rem; + --pf-t--global--font--weight--100: 400; + --pf-t--global--font--weight--200: 500; + --pf-t--global--font--weight--300: 500; + --pf-t--global--font--weight--400: 700; +} + +// Temporary CSS rules written during migration to PFv6 + +#productSelectionForm img { + max-inline-size: 100px; +} + +.agm-install-button { + background: var(--agm-t--install--button--background); + color: var(--agm-t--install--button--color); + font-weight: 600; + font-size: var(--pf-t--global--font--size--md); + align-items: center; + + svg { + fill: var(--agm-t--install--button--color); + } +} + +.agm-inline-menu-toggle { + inline-size: fit-content; + flex-direction: row-reverse; + align-items: center; + padding: 0 var(--pf-t--global--spacer--control--vertical--compact); + background: var(--agm-t--color--fog); + + &:hover { + background: #c0efde; // var(--agm-t--action--background--color--hover); + } + + &.pf-m-expanded { + background: var(--agm-t--color--jungle); + } + + .pf-v6-c-menu-toggle__icon svg { + block-size: var(--pf-t--global--icon--size--lg); + inline-size: var(--pf-t--global--icon--size--lg); + } +} + // PatternFly overrides -@use "~/assets/styles/patternfly-overrides.scss"; - -@use "~/assets/fonts.scss"; -@use "~/assets/styles/variables.scss"; -// TODO: merge app and global -@use "~/assets/styles/global.scss"; -@use "~/assets/styles/app.scss"; -@use "~/assets/styles/utilities.scss"; -@use "~/assets/styles/composition.scss"; -@use "~/assets/styles/blocks.scss"; + +.pf-v6-c-masthead__main { + inline-size: 50dvw; +} + +.pf-v6-c-masthead { + --pf-v6-c-masthead__logo--Width: fit-content; +} + +.pf-v6-c-menu { + --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--lg); + // background: #eafaf8; +} + +.pf-v6-c-menu__item.pf-m-selected { + background: #eafaf4; +} + +.pf-v6-c-nav__link { + --pf-v6-c-nav__link--AlignItems: center; +} + +.pf-v6-c-nav__link.pf-m-current { + font-weight: 600; +} + +.pf-v6-c-button { + --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--small); +} diff --git a/web/src/assets/styles/patternfly-overrides.scss b/web/src/assets/styles/patternfly-overrides.scss deleted file mode 100644 index c65bf208d9..0000000000 --- a/web/src/assets/styles/patternfly-overrides.scss +++ /dev/null @@ -1,376 +0,0 @@ -:root { - // Overrides some PatternFly CSS variables using values - // from brand.suse.com - - // Font families - --pf-v5-global--FontFamily--text: var(--ff); - --pf-v5-global--FontFamily--text--vf: var(--ff); - --pf-v5-global--FontFamily--heading: var(--ff-headings); - --pf-v5-global--FontFamily--heading--vf: var(--ff-headings); - --pf-v5-global--FontFamily--monospace: var(--ff-code); - --pf-v5-global--FontFamily--monospace--vf: var(--ff-code); - - // Font sizes - --pf-v5-global--FontSize--4xl: 2em; - --pf-v5-global--FontSize--3xl: 1.75em; - --pf-v5-global--FontSize--2xl: 1.5em; - --pf-v5-global--FontSize--xl: 1.3em; - --pf-v5-global--FontSize--lg: 1.15em; - --pf-v5-global--FontSize--md: var(--fs-base); - - // Font weight - --pf-v5-global--FontWeight--light: var(--fw-light); - --pf-v5-global--FontWeight--normal: var(--fw-normal); - --pf-v5-global--FontWeight--semi-bold: var(--fw-medium); - --pf-v5-global--FontWeight--overpass--semi-bold: var(--fw-medium); - --pf-v5-global--FontWeight--bold: var(--fw-bold); - --pf-v5-global--FontWeight--overpass--bold: var(--fw-bold); - - // Colors - --pf-v5-global--primary-color--100: var(--color-primary); - --pf-v5-global--primary-color--200: var(--color-primary); - --pf-v5-global--link--Color: var(--color-link); - --pf-v5-global--link--Color--hover: var(--color-link-hover); - --pf-v5-global--BackgroundColor--dark-100: var(--color-primary); -} - -.pf-v5-c-button.pf-m-primary { - --pf-v5-c-button--m-primary--BackgroundColor: var(--color-button-primary); - --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--color-button-primary-hover); -} - -// Make :hover style visible when the button is in a :focus state too -.pf-v5-c-button.pf-m-primary:focus:hover { - --pf-v5-c-button--m-primary--BackgroundColor: var(--color-button-primary-hover); -} - -.pf-v5-c-button.pf-m-link { - // Colors for buttons modifiers - --pf-v5-c-button--m-link--Color: var(--color-link); - --pf-v5-c-button--m-link--Color--hover: var(--color-link-hover); - --pf-v5-c-button--m-link--m-inline--hover--Color: var(--link-color-hover); -} - -.pf-v5-c-button.pf-m-plain { - --pf-v5-c-button--m-plain--Color: var(--color-button-plain-link); - --pf-v5-c-button--m-plain--hover--Color: var(--color-button-plain-link-hover); -} - -.pf-v5-c-button.pf-m-secondary { - --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--color-link-hover); - --pf-v5-c-button--m-secondary--hover--Color: var(--color-link-hover); -} - -// Make :hover style visible when the button is in a :focus state too -.pf-v5-c-button.pf-m-secondary:focus:hover { - --pf-v5-c-button--after--BorderColor: var(--color-link-hover); - --pf-v5-c-button--m-secondary--Color: var(--color-link-hover); -} - -// Redefine style for primary buttons placed at top bar -.pf-v5-c-masthead__content { - .pf-v5-c-button.pf-m-primary { - --pf-v5-c-button--FontSize: 120%; - --pf-v5-c-button--m-primary--BackgroundColor: var(--color-button-primary-hover); - letter-spacing: 1px; - } - - .pf-v5-c-button.pf-m-primary:hover { - --pf-v5-c-button--m-primary--BackgroundColor: #1ea064; // var(--color-button-primary); - } - - .pf-v5-c-button.pf-m-primary:focus:hover { - --pf-v5-c-button--m-primary--BackgroundColor: #1ea064; // var(--color-button-primary); - } - - .pf-v5-c-button.pf-m-warning { - color: var(--color-button-primary); - } -} - -.pf-v5-c-button.pf-m-primary .pf-v5-c-modal-box__body { - padding-block: var(--pf-v5-c-modal-box__body--PaddingTop); -} - -.pf-v5-c-modal-box__footer { - // We prefer buttons placed at the right - flex-direction: row-reverse; - - // Overrides buttons margins. In row-reverse mode, we need margin - // for the :last-child too. - // See https://github.com/patternfly/patternfly/blob/9c8cb7c8609613ab53eef3fe05addda16bc63233/src/patternfly/components/ModalBox/modal-box.scss#L211 - > .pf-v5-c-button { - margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight); - } -} - -// Do not change the default cursor for labels forms because it is confusing -// -// See: -// * https://github.com/openSUSE/Agama/issues/115#issuecomment-1090205696 -// * https://github.com/patternfly/patternfly/issues/4777#issuecomment-1092090484 -.pf-v5-c-form__label { - --pf-v5-c-form__label--hover--Cursor: default; - --pf-v5-c-form__label--m-disabled--hover--Cursor: default; -} - -// Do not show top border for empty data lists -.pf-v5-c-data-list:empty { - --pf-v5-c-data-list--BorderTopWidth: 0; -} - -// Do not use thick border-top for data lists -.pf-v5-c-data-list { - --pf-v5-c-data-list--BorderTopWidth: 2px; -} - -.pf-v5-c-toolbar { - --pf-v5-c-toolbar--PaddingTop: 0; - --pf-v5-c-toolbar--PaddingBottom: 0; -} - -.pf-v5-c-toolbar__content { - --pf-v5-c-toolbar__content--PaddingRight: 0; - --pf-v5-c-toolbar__content--PaddingLeft: 0; -} - -.pf-v5-c-text-input-group__utilities .pf-v5-c-button { - padding: 0; -} - -.pf-m-grid-md { - &.pf-v5-c-table { - tbody:first-of-type { - --pf-v5-c-table--tbody--responsive--border-width--base: 4px; - } - - tr:not(.pf-v5-c-table__expandable-row) { - --pf-v5-c-table-tr--responsive--border-width--base: 4px; - } - } -} - -.pf-v5-c-switch { - // We prefer having same label color for checked and not checked switches - --pf-v5-c-switch__input--not-checked__label--Color: var( - --pf-v5-c-switch__input--checked__label--Color - ); -} - -// Make the switch focus looks like the rest -.pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle { - outline: none; - box-shadow: 0 0 0 1px var(--focus-color); -} - -// Avoid form select toggle icon overlap input Text -.pf-v5-c-form-control__toggle-icon { - padding-inline-end: 0; - margin-inline-start: calc(var(--pf-v5-c-form-control__toggle-icon--PaddingRight) * 2); -} - -// Adjust icons for a menu item -.pf-v5-c-menu__item { - svg { - // let SVGs inherit the same color than text - // useful for a `isDanger` item, for example. - fill: var(--pf-v5-c-menu__item--Color); - // and keep them centered - vertical-align: middle; - } -} - -// Center icon in the visibility button of password input form fields -.password-toggler span.pf-c-button__icon { - display: flex; -} - -.pf-v5-c-toggle-group__button.pf-m-selected { - --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--color-primary); - --pf-v5-c-toggle-group__button--Color: var(--color-gray-light); -} - -// Reduce padding of PF/Hint because it looks like an option of current Agama -// select -.pf-v5-c-hint { - --pf-v5-c-hint--PaddingTop: var(--spacer-small); - --pf-v5-c-hint--PaddingRight: var(--spacer-small); - --pf-v5-c-hint--PaddingBottom: var(--spacer-small); - --pf-v5-c-hint--PaddingLeft: var(--spacer-small); -} - -// Do not reserve space for PF/Hint actions when there are none -.pf-v5-c-hint__actions:empty { - display: none; -} - -// Make PF/ExpandableSection looks a bit different when wrapped in a PF/Hint -.pf-v5-c-hint { - .pf-v5-c-expandable-section { - --pf-v5-c-expandable-section__toggle--Color: var(--color-primary); - } - - .pf-v5-c-expandable-section__toggle, - .pf-v5-c-expandable-section__toggle:hover { - // NOTE. would be nice to being able to use darker variant of primary color - // when hovering the link, but we aren't ready yet. We should switch to hsla - // colors or so. - --pf-v5-c-expandable-section__toggle--Color: var(--color-primary); - text-decoration: underline; - } - - .pf-v5-c-expandable-section__content { - --pf-v5-c-expandable-section__content--PaddingRight: var(--spacer-normal); - --pf-v5-c-expandable-section__content--PaddingLeft: var(--spacer-normal); - } -} - -.pf-v5-c-form__group.pf-m-action { - --pf-v5-c-form__group--m-action--MarginTop: var(--spacer-small); -} - -.pf-v5-c-form__group-label-help { - margin: 0; - padding: 0; - vertical-align: top; -} - -.pf-m-grid-md.pf-v5-c-table .pf-v5-c-menu-toggle { - padding-inline: 0; -} - -// Styles for tree table used by storage page. - -.pf-v5-c-table tbody { - border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor); -} - -.pf-v5-c-table td > .pf-v5-c-form-control { - inline-size: max-content; -} - -.pf-v5-c-table tr[aria-level="1"] { - border-block-end: 0; - border-block-start: var(--pf-v5-c-table--border-width--base) solid - var(--pf-v5-c-table--BorderColor); -} - -.pf-v5-c-table tr[aria-level="2"] { - border-block-end: 0; -} - -.pf-v5-c-radio { - align-items: center; -} - -.pf-v5-c-radio__label { - font-size: var(--pf-v5-c-form__label--FontSize); -} - -@media screen and (width <= 768px) { - .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) { - padding-inline: 0; - } -} - -// New-ui overrides -// ================ - -// For using icons, set fill as color. -.pf-v5-c-nav__link { - fill: var(--pf-v5-c-nav__link--Color); -} - -.pf-v5-c-page__sidebar-body { - fill: white; -} - -// center alignment and a bit of gap makes links with icons looks better -.pf-v5-c-nav__link { - align-items: center; - gap: calc(var(--pf-v5-c-nav__link--FontSize) / 2); -} - -// Allows the pf-m-current directly in the a element instead of li. -// Needed because setting the pf-m-current in ReactRouter/NavLink (the one -// that know the link "isActive") - -.pf-v5-c-tabs__link.pf-m-current { - --pf-v5-c-tabs__link--after--BorderColor: var( - --pf-v5-c-tabs__item--m-current__link--after--BorderColor - ); - --pf-v5-c-tabs__link--after--BorderWidth: var( - --pf-v5-c-tabs__item--m-current__link--after--BorderWidth - ); -} - -// Color for icons in Masthead -.pf-v5-c-masthead { - fill: white; -} - -:not(.pf-m-light-200).pf-v5-c-masthead { - .pf-v5-c-button.pf-m-link, - .pf-v5-c-button.pf-m-plain { - color: white; - } -} - -// Force sidebar to only use needed width plus an extra padding at the end. -.pf-v5-c-page__sidebar.pf-m-expanded { - --pf-v5-c-page__sidebar--Width: fit-content; - - .pf-v5-c-nav__link { - padding-inline-end: calc(var(--pf-v5-global--spacer--xl) * 1.2); - } -} - -// Makes the NotificationDrawerHeader "plain" -.pf-v5-c-notification-drawer { - --pf-v5-c-notification-drawer--BackgroundColor: white; -} - -.pf-v5-c-notification-drawer__list-item { - --pf-v5-c-notification-drawer__list-item--PaddingBottom: 0; - --pf-v5-c-notification-drawer__list-item--BoxShadow: none; -} - -.pf-v5-c-notification-drawer__list-item-description { - padding-inline-start: calc( - 1em + var(--pf-v5-c-notification-drawer__list-item-header-icon--MarginRight) - ); -} - -.pf-v5-c-progress-stepper.progress-report { - .pf-v5-c-progress-stepper__step-connector, - .pf-v5-c-progress-stepper__step-main { - inline-size: 250px; - } -} - -// A temporary workaround to fix "stacking contexts" problems with scroll and -// sticky page sections in Agama layout. It will not be needed when migrating to -// latest PF6 release, since the root of the problem has been addressed there by -// removing the DrawerContentBody from the Page component. See -// https://github.com/patternfly/patternfly/pull/7130 and related links -.pf-v5-c-drawer__body { - display: contents; -} - -.menu-toggle-inline { - padding-inline-start: 0.5ch; -} - -// FIXME: Some of these pf-v5-c-menu__list overrides shouldn't be needed, specially after migrating a PF6 -.pf-v5-c-menu__list { - --pf-v5-c-list--nested--MarginTop: 0; - --pf-v5-c-list--nested--MarginLeft: 0; - --pf-v5-c-menu__list--PaddingTop: 0; - --pf-v5-c-menu__list--PaddingBottom: 0; - --pf-v5-c-menu__list--c-divider--MarginTop: 0; - --pf-v5-c-menu__list--c-divider--MarginBottom: 0; - - li + li { - --pf-v5-c-list--li--MarginTop: 0; - } -} diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss deleted file mode 100644 index 3205abd5a0..0000000000 --- a/web/src/assets/styles/utilities.scss +++ /dev/null @@ -1,147 +0,0 @@ -// Sadly, Firefox does not support :has pseudo-selector yet. -// See @components/layout/Center documentation. -// -// main:has(.vertically-centered) { -// display: grid; -// place-items: center; -// block-size: 100%; -// } - -//.content-block-centered { -.vertically-centered { - display: grid; - place-items: center; - block-size: 100%; - inline-size: 100%; -} - -// Utility classes for sizing icons -.icon-xxxs { - block-size: var(--icon-size-xxxs); - inline-size: var(--icon-size-xxxs); -} - -.icon-xxs { - block-size: var(--icon-size-xxs); - inline-size: var(--icon-size-xxs); -} - -.icon-xs { - block-size: var(--icon-size-xs); - inline-size: var(--icon-size-xs); -} - -.icon-s { - block-size: var(--icon-size-s); - inline-size: var(--icon-size-s); -} - -.icon-xl { - block-size: var(--icon-size-xl); - inline-size: var(--icon-size-xl); -} - -.icon-xxl { - block-size: var(--icon-size-xxl); - inline-size: var(--icon-size-xxl); -} - -.icon-xxxl { - block-size: var(--icon-size-xxxl); - inline-size: var(--icon-size-xxxl); -} - -.color-success { - color: var(--color-success); - fill: var(--color-success); -} - -.full-width { - inline-size: 100%; -} - -.block-size-auto { - block-size: auto; -} - -.inline-size-auto { - inline-size: auto; -} - -.block-size-small, -.block-size-medium, -.block-size-large { - block-size: calc(100dvb - var(--space-large)); -} - -.inline-size-small, -.inline-size-medium, -.inline-size-large { - inline-size: calc(100dvi - var(--spacer-large)); -} - -@media (height > 500px) { - .block-size-small { - block-size: 30dvb; - } - - .block-size-medium { - block-size: 60dvb; - } - - .block-size-large { - block-size: 90dvb; - } -} - -@media (width > 500px) { - .inline-size-small, - .inline-size-medium, - .inline-size-large { - min-inline-size: calc(500px - var(--spacer-large)); - } - - .inline-size-small { - inline-size: 30dvi; - } - - .inline-size-medium { - inline-size: 60dvi; - max-inline-size: var(--ui-max-inline-size); - } - - .inline-size-large { - inline-size: 90dvi; - max-inline-size: calc(var(--ui-max-inline-size) * 2); - } -} - -.scrollbox { - background: - linear-gradient(#fff 33%, rgb(255 255 255 / 0%)), - linear-gradient(rgb(255 255 255 / 0%), #fff 66%) 0 100%, - radial-gradient(farthest-side at 50% 0, rgb(102 102 102 / 50%), rgb(0 0 0 / 0%)), - radial-gradient(farthest-side at 50% 100%, rgba(102 102 102 / 50%), rgb(0 0 0 / 0%)) 0 100%; - background-color: #fff; - background-repeat: no-repeat; - background-attachment: local, local, scroll, scroll; - background-size: - 100% 48px, - 100% 48px, - 100% 16px, - 100% 16px; -} - -.cursor-pointer { - cursor: pointer; -} - -// FIXME: drop as soon as Tip component gets rethought / refactored -.label-tip .pf-v5-c-label__text { - display: flex; - gap: var(--spacer-smaller); -} - -.no-padding { - padding: 0; -} diff --git a/web/src/assets/styles/variables.scss b/web/src/assets/styles/variables.scss deleted file mode 100644 index 7e35e4e433..0000000000 --- a/web/src/assets/styles/variables.scss +++ /dev/null @@ -1,58 +0,0 @@ -:root { - --ff: "Lato", arial, helvetica, sans-serif; - --ff-headlines: "Poppins", sans-serif; - --ff-code: "Roboto Mono", monospace; - - --fw-light: 300; - --fw-normal: 400; - --fw-medium: 500; - --fw-bold: 700; - - --fs-small: 0.7rem; - --fs-medium: 12px; - --fs-base: 14px; - --fs-large: 1rem; - --fs-h1: 1.5rem; - --fs-h2: 1.2rem; - --fs-h3: 1rem; - - --lh-normal: 1.5; - --lh-medium: 1.6; - --lh-large: 1.7; - - --ui-max-inline-size: 1024px; - - // FIXME: this should be changed to --spacer-xs, --spacer-s, and so - --spacer-smaller: 0.3rem; - --spacer-small: 0.5rem; - --spacer-normal: 1rem; - --spacer-medium: 1.5rem; - --spacer-large: 2rem; - - --icon-size-xxxs: 12px; - --icon-size-xxs: 16px; - --icon-size-xs: 20px; - --icon-size-s: 24px; - --icon-size: 28px; - --icon-size-m: 32px; - --icon-size-l: 36px; - --icon-size-xl: 40px; - --icon-size-xxl: 5rem; - --icon-size-xxxl: 10rem; - - --color-primary: #0c322c; - --color-gray-light: #fcfcfc; - --color-gray: #f2f2f2; - --color-gray-dark: #efefef; // Fog - --color-gray-dimmed: #888; - --color-success: #30ba78; - - --color-link: #0c322c; - --color-link-hover: #30ba78; - --color-button-primary: var(--color-link); - --color-button-primary-hover: var(--color-link-hover); - --color-button-plain-link: var(--color-link); - --color-button-plain-link-hover: var(--color-link-hover); - - --focus-color: #00b2e2; //cerulean 500 -} diff --git a/web/src/components/core/InstallButton.test.tsx b/web/src/components/core/InstallButton.test.tsx index 405be9e851..206183a215 100644 --- a/web/src/components/core/InstallButton.test.tsx +++ b/web/src/components/core/InstallButton.test.tsx @@ -69,12 +69,10 @@ describe("InstallButton", () => { it("renders additional information to warn users about found problems", () => { const { container } = installerRender(); - const button = screen.getByRole("button", { name: /Install/ }); + screen.getByRole("button", { name: /Install/ }); // An exlamation icon as visual mark const icon = container.querySelector("svg"); - expect(icon).toHaveAttribute("data-icon-name", "exclamation"); - // An aria-label for users using an screen reader - within(button).getByLabelText(/Not possible with the current setup/); + expect(icon).toHaveAttribute("data-icon-name", "error_fill"); }); it("triggers the onClickWithIssues callback without rendering the confirmation dialog", async () => { diff --git a/web/src/components/core/InstallButton.tsx b/web/src/components/core/InstallButton.tsx index 0faaf87461..3fb7b40db4 100644 --- a/web/src/components/core/InstallButton.tsx +++ b/web/src/components/core/InstallButton.tsx @@ -20,8 +20,8 @@ * find current contact information at www.suse.com. */ -import React, { useState } from "react"; -import { Button, ButtonProps, Stack } from "@patternfly/react-core"; +import React, { useId, useState } from "react"; +import { Button, ButtonProps, Stack, Tooltip } from "@patternfly/react-core"; import { Popup } from "~/components/core"; import { startInstallation } from "~/api/manager"; import { useAllIssues } from "~/queries/issues"; @@ -41,7 +41,7 @@ import { Icon } from "../layout"; const InstallConfirmationPopup = ({ onAccept, onClose }) => { return ( - +

{_( @@ -77,6 +77,8 @@ according to the provided installation settings.", const InstallButton = ( props: Omit & { onClickWithIssues?: () => void }, ) => { + const labelId = useId(); + const tooltipId = useId(); const issues = useAllIssues(); const [isOpen, setIsOpen] = useState(false); const location = useLocation(); @@ -94,24 +96,23 @@ const InstallButton = ( // TRANSLATORS: The install button label const buttonText = _("Install"); - // TRANSLATORS: Accessible text included with the install button when there are issues - const withIssuesAriaLabel = _("Not possible with the current setup. Click to know more."); + // TRANSLATORS: Text included with the install button when there are issues + const withIssuesText = _("Not possible with the current setup. Click to know more."); return ( <> - + + + {isOpen && } diff --git a/web/src/components/core/InstallationFinished.tsx b/web/src/components/core/InstallationFinished.tsx index d510638203..5f585667b6 100644 --- a/web/src/components/core/InstallationFinished.tsx +++ b/web/src/components/core/InstallationFinished.tsx @@ -138,7 +138,7 @@ function InstallationFinished() { - diff --git a/web/src/components/core/Page.test.tsx b/web/src/components/core/Page.test.tsx index e85dc4baf3..0b302ffef1 100644 --- a/web/src/components/core/Page.test.tsx +++ b/web/src/components/core/Page.test.tsx @@ -72,12 +72,6 @@ describe("Page", () => { screen.getByRole("button", { name: "Save" }); }); - it("renders an 'lg' button when size prop is not given", () => { - plainRender(Cancel); - const button = screen.getByRole("button", { name: "Cancel" }); - expect(button.classList.contains("pf-m-display-lg")).toBe(true); - }); - describe("when user clicks on it", () => { it("triggers given onClick handler, if valid", async () => { const onClick = jest.fn(); @@ -144,11 +138,10 @@ describe("Page", () => { expect(mockNavigateFn).toHaveBeenCalledWith(-1); }); - it("uses `lg` size and `link` variant by default", () => { + it("uses `link` variant by default", () => { plainRender(); const button = screen.getByRole("button", { name: "Back" }); expect(button.classList.contains("pf-m-link")).toBe(true); - expect(button.classList.contains("pf-m-display-lg")).toBe(true); }); }); diff --git a/web/src/components/core/Page.tsx b/web/src/components/core/Page.tsx index 83d3593d61..f68b5de323 100644 --- a/web/src/components/core/Page.tsx +++ b/web/src/components/core/Page.tsx @@ -37,6 +37,7 @@ import { PageSectionProps, Split, Stack, + Title, TitleProps, } from "@patternfly/react-core"; import { Flex } from "~/components/layout"; @@ -65,7 +66,7 @@ type SectionProps = { /** A React node with a brief description of what the section is for */ description?: React.ReactNode; /** The heading level used for the section title */ - headerLevel?: TitleProps["headingLevel"]; + headingLevel?: TitleProps["headingLevel"]; /** Props to influence PF/Card component wrapping the section */ pfCardProps?: CardProps; /** Props to influence PF/CardHeader component wrapping the section title */ @@ -128,7 +129,7 @@ const Section = ({ value, description, actions, - headerLevel: Title = "h3", + headingLevel = "h3", pfCardProps, pfCardHeaderProps, pfCardBodyProps, @@ -155,7 +156,11 @@ const Section = ({ - {hasTitle && {title}} + {hasTitle && ( + + {title} + + )} {hasValue && ( {value} @@ -219,11 +224,7 @@ const Action = ({ navigateTo, children, ...props }: ActionProps) => { if (navigateTo) navigate(navigateTo); }; - return ( - - ); + return ; }; /** @@ -257,7 +258,7 @@ const Back = ({ children, ...props }: Omit) => { const navigate = useNavigate(); return ( - ); diff --git a/web/src/components/core/Popup.tsx b/web/src/components/core/Popup.tsx index 8bf1f7fb5b..95a110231c 100644 --- a/web/src/components/core/Popup.tsx +++ b/web/src/components/core/Popup.tsx @@ -46,7 +46,7 @@ export type PopupProps = { isLoading?: boolean; /** Text displayed when `isLoading` is set to `true` */ loadingText?: string; -} & Omit & +} & Omit & Pick; /** @@ -210,6 +210,7 @@ const Popup = ({ loadingText = _("Loading data..."), inlineSize = "medium", blockSize = "auto", + variant = "medium", className = "", children, ...props @@ -224,6 +225,7 @@ const Popup = ({ return ( /** @ts-ignore */ ( - - ); - return ( @@ -146,10 +143,10 @@ function ProgressReport({ title, firstStep }: { title: string; firstStep?: React alignItems={{ default: "alignItemsCenter" }} > -

+ {title} -

- + + diff --git a/web/src/components/l10n/KeyboardSelection.tsx b/web/src/components/l10n/KeyboardSelection.tsx index dce08d3192..5a5d0ae1b4 100644 --- a/web/src/components/l10n/KeyboardSelection.tsx +++ b/web/src/components/l10n/KeyboardSelection.tsx @@ -75,7 +75,7 @@ export default function KeyboardSelection() { return ( -

{_("Keyboard selection")}

+ {_("Keyboard selection")} diff --git a/web/src/components/l10n/L10nPage.tsx b/web/src/components/l10n/L10nPage.tsx index 4e0121f788..64ed22dd09 100644 --- a/web/src/components/l10n/L10nPage.tsx +++ b/web/src/components/l10n/L10nPage.tsx @@ -21,7 +21,7 @@ */ import React from "react"; -import { Gallery, GalleryItem } from "@patternfly/react-core"; +import { Content, Gallery, GalleryItem } from "@patternfly/react-core"; import { Link, Page } from "~/components/core"; import { L10N as PATHS } from "~/routes/paths"; import { _ } from "~/i18n"; @@ -39,7 +39,7 @@ export default function L10nPage() { return ( -

{_("Localization")}

+ {_("Localization")} diff --git a/web/src/components/l10n/LocaleSelection.tsx b/web/src/components/l10n/LocaleSelection.tsx index 2446a52e09..e2b7830af6 100644 --- a/web/src/components/l10n/LocaleSelection.tsx +++ b/web/src/components/l10n/LocaleSelection.tsx @@ -21,7 +21,7 @@ */ import React, { useState } from "react"; -import { Flex, Form, FormGroup, Radio } from "@patternfly/react-core"; +import { Content, Flex, Form, FormGroup, Radio } from "@patternfly/react-core"; import { useNavigate } from "react-router-dom"; import { ListSearch, Page } from "~/components/core"; import { _ } from "~/i18n"; @@ -78,7 +78,7 @@ export default function LocaleSelection() { return ( -

{_("Locale selection")}

+ {_("Locale selection")} diff --git a/web/src/components/l10n/TimezoneSelection.tsx b/web/src/components/l10n/TimezoneSelection.tsx index 30136056fe..7720a9df7f 100644 --- a/web/src/components/l10n/TimezoneSelection.tsx +++ b/web/src/components/l10n/TimezoneSelection.tsx @@ -117,7 +117,7 @@ export default function TimezoneSelection() { return ( -

{_(" Timezone selection")}

+ {_(" Timezone selection")}