diff --git a/.changeset/warm-dots-worry.md b/.changeset/warm-dots-worry.md new file mode 100644 index 000000000..7e6496fad --- /dev/null +++ b/.changeset/warm-dots-worry.md @@ -0,0 +1,5 @@ +--- +"@shopware-ag/meteor-component-library": major +--- + +Updated global styles diff --git a/packages/component-library/src/components/assets/scss/all.scss b/packages/component-library/src/components/assets/scss/all.scss index 6ffca8840..3e1fde556 100644 --- a/packages/component-library/src/components/assets/scss/all.scss +++ b/packages/component-library/src/components/assets/scss/all.scss @@ -1,7 +1,7 @@ @import "fonts/inter.font"; @import "variables"; @import "typography"; -@import "global.scss"; +@import "global.css"; @import "directives/tooltip"; @import "directives/dragdrop"; @import "@shopware-ag/meteor-tokens/administration/light.css"; diff --git a/packages/component-library/src/components/assets/scss/global.css b/packages/component-library/src/components/assets/scss/global.css new file mode 100644 index 000000000..aea2be5be --- /dev/null +++ b/packages/component-library/src/components/assets/scss/global.css @@ -0,0 +1,96 @@ +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Prevent font size inflation */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* Remove default margin in favour of better control in authored CSS */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role="list"], +ol[role="list"] { + list-style: none; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* Set shorter line heights on headings and interactive elements */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} + +/* Balance text wrapping on headings */ +h1, +h2, +h3, +h4 { + text-wrap: balance; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font-family: inherit; + font-size: inherit; +} + +/* Make sure textareas without a rows attribute are not tiny */ +textarea:not([rows]) { + min-height: 10em; +} + +/* Anything that has been anchored to should have extra scroll margin */ +:target { + scroll-margin-block: 5ex; +} + +/* Hide elements visually, keep them visible to screen reader technology */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} diff --git a/packages/component-library/src/components/assets/scss/global.scss b/packages/component-library/src/components/assets/scss/global.scss deleted file mode 100644 index 26a9ec0b5..000000000 --- a/packages/component-library/src/components/assets/scss/global.scss +++ /dev/null @@ -1,82 +0,0 @@ -@import "./variables.scss"; - -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - font-family: $font-family-default; - font-size: $font-size-default; - color: $color-menu-start; - background: $color-gray-50; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -@supports (font-variation-settings: normal) { - body { - font-family: $font-family-variables; - font-feature-settings: $font-family-default-feature-settings; - } -} - -.mt-drag-select-box { - position: absolute; - background: $color-drag-select-box; - z-index: $z-index-drag-select-box; -} - -.link { - display: inline-block; - color: $color-shopware-brand-500; -} - -/* style inline external links */ -a[target="_blank"]:not(.mt-external-link, .mt-internal-link, .mt-button) { - display: inline-block; - position: relative; - color: $color-shopware-brand-500; - font-size: $font-size-small; - text-decoration: underline; - cursor: pointer; - word-break: break-word; - - &::after { - content: ""; - display: inline-block; - width: 0.715em; - height: 0.715em; - position: relative; - margin-left: 0.285em; - -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A"); - -webkit-mask-repeat: no-repeat; - -webkit-mask-size: 0.715em 0.715em; - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23758CA3' fill-rule='evenodd' d='M12.5857864,2 L10,2 C9.44771525,2 9,1.55228475 9,1 C9,0.44771525 9.44771525,0 10,0 L15,0 C15.5522847,0 16,0.44771525 16,1 L16,6 C16,6.55228475 15.5522847,7 15,7 C14.4477153,7 14,6.55228475 14,6 L14,3.41421356 L7.20710678,10.2071068 C6.81658249,10.5976311 6.18341751,10.5976311 5.79289322,10.2071068 C5.40236893,9.81658249 5.40236893,9.18341751 5.79289322,8.79289322 L12.5857864,2 Z M6,1 C6.55228475,1 7,1.44771525 7,2 C7,2.55228475 6.55228475,3 6,3 L3,3 C2.44771525,3 2,3.44771525 2,4 L2,13 C2,13.5522847 2.44771525,14 3,14 L11.9673236,14 C12.5153749,14 12.9613171,13.5588713 12.9672647,13.0108522 L13.0000589,9.98914776 C13.0060524,9.43689554 13.4586,8.99406536 14.0108522,9.00005889 C14.5631045,9.00605241 15.0059346,9.45860001 14.9999411,10.0108522 L14.9671469,13.0325567 C14.9493042,14.6766139 13.6114776,16 11.9673236,16 L3,16 C1.34314575,16 -2.77555756e-16,14.6568542 -4.4408921e-16,13 L0,4 C-1.66533454e-16,2.34314575 1.34314575,1 3,1 L6,1 Z'/%3E%3C/svg%3E%0A"); - mask-repeat: no-repeat; - mask-size: 0.715em 0.715em; - background-color: $color-shopware-brand-500; - } -} - -button { - appearance: none; - padding: 0; - border: none; - font: inherit; - color: inherit; - background: none; - cursor: pointer; -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -}