Skip to content

Commit

Permalink
feat(ui)!: scope all payload css to payload-default layer (#8545)
Browse files Browse the repository at this point in the history 
All payload css is now encapsulated inside CSS layers under `@layer
payload-default`

Any custom css will now have the highest possible specificity.
We have also provided a new layer `@layer payload` if you want to use
layers and ensure that your styles are applied after payload.

To override existing styles in a way that the existing rules of
specificity would be respected you can use the default layer like so
```css
@layer payload-default {
  // my styles within the payload specificity
}
```
  • Loading branch information
@paulpopus
paulpopus authored Oct 4, 2024
1 parent 400293b commit 7c62e2a
Show file tree
Hide file tree
Showing 234 changed files with 11,662 additions and 11,168 deletions.
13 changes: 13 additions & 0 deletions docs/admin/customizing-css.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,19 @@ Here is an example of how you might target the Dashboard View and change the bac
If you are building [Custom Components](./overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
</Banner>

### Specificity rules

All Payload CSS is encapsulated inside CSS layers under `@layer payload-default`. Any custom css will now have the highest possible specificity.

We have also provided a layer `@layer payload` if you want to use layers and ensure that your styles are applied after payload.

To override existing styles in a way that the previous rules of specificity would be respected you can use the default layer like so
```css
@layer payload-default {
// my styles within the payload specificity
}
```

## Re-using Payload SCSS variables and utilities

You can re-use Payload's SCSS variables and utilities in your own stylesheets by importing it from the UI package.
Expand Down
328 changes: 166 additions & 162 deletions packages/next/src/scss/app.scss
View file
Original file line number Diff line number Diff line change
@@ -1,203 +1,207 @@
@layer payload-default, payload;

@import 'styles';
@import './toasts.scss';
@import './colors.scss';

:root {
--base-px: 20;
--base-body-size: 13;
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);

--breakpoint-xs-width: #{$breakpoint-xs-width};
--breakpoint-s-width: #{$breakpoint-s-width};
--breakpoint-m-width: #{$breakpoint-m-width};
--breakpoint-l-width: #{$breakpoint-l-width};
--scrollbar-width: 17px;

--theme-bg: var(--theme-elevation-0);
--theme-input-bg: var(--theme-elevation-0);
--theme-text: var(--theme-elevation-800);
--theme-overlay: rgba(5, 5, 5, 0.5);
--theme-baseline: #{$baseline-px};
--theme-baseline-body-size: #{$baseline-body-size};
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;

--style-radius-s: #{$style-radius-s};
--style-radius-m: #{$style-radius-m};
--style-radius-l: #{$style-radius-l};

--z-popup: 10;
--z-nav: 20;
--z-modal: 30;
--z-status: 40;

--accessibility-outline: 2px solid var(--theme-text);
--accessibility-outline-offset: 2px;

--gutter-h: #{base(3)};
--spacing-view-bottom: var(--gutter-h);
--doc-controls-height: calc(var(--base) * 2.8);
--app-header-height: calc(var(--base) * 2.8);
--nav-width: 275px;
--nav-trans-time: 150ms;

@include mid-break {
--gutter-h: #{base(2)};
--app-header-height: calc(var(--base) * 2.4);
--doc-controls-height: calc(var(--base) * 2.4);
}

@include small-break {
--gutter-h: #{base(0.8)};
--spacing-view-bottom: calc(var(--base) * 2);
--nav-width: 100vw;
}
}
@layer payload-default {
:root {
--base-px: 20;
--base-body-size: 13;
--base: calc((var(--base-px) / var(--base-body-size)) * 1rem);

/////////////////////////////
// GLOBAL STYLES
/////////////////////////////
--breakpoint-xs-width: #{$breakpoint-xs-width};
--breakpoint-s-width: #{$breakpoint-s-width};
--breakpoint-m-width: #{$breakpoint-m-width};
--breakpoint-l-width: #{$breakpoint-l-width};
--scrollbar-width: 17px;

* {
box-sizing: border-box;
}
--theme-bg: var(--theme-elevation-0);
--theme-input-bg: var(--theme-elevation-0);
--theme-text: var(--theme-elevation-800);
--theme-overlay: rgba(5, 5, 5, 0.5);
--theme-baseline: #{$baseline-px};
--theme-baseline-body-size: #{$baseline-body-size};
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
sans-serif;
--font-serif: 'Georgia', 'Bitstream Charter', 'Charis SIL', Utopia, 'URW Bookman L', serif;
--font-mono: 'SF Mono', Menlo, Consolas, Monaco, monospace;

--style-radius-s: #{$style-radius-s};
--style-radius-m: #{$style-radius-m};
--style-radius-l: #{$style-radius-l};

--z-popup: 10;
--z-nav: 20;
--z-modal: 30;
--z-status: 40;

--accessibility-outline: 2px solid var(--theme-text);
--accessibility-outline-offset: 2px;

--gutter-h: #{base(3)};
--spacing-view-bottom: var(--gutter-h);
--doc-controls-height: calc(var(--base) * 2.8);
--app-header-height: calc(var(--base) * 2.8);
--nav-width: 275px;
--nav-trans-time: 150ms;

@include mid-break {
--gutter-h: #{base(2)};
--app-header-height: calc(var(--base) * 2.4);
--doc-controls-height: calc(var(--base) * 2.4);
}

html {
@extend %body;
background: var(--theme-bg);
-webkit-font-smoothing: antialiased;
@include small-break {
--gutter-h: #{base(0.8)};
--spacing-view-bottom: calc(var(--base) * 2);
--nav-width: 100vw;
}
}

&[data-theme='dark'] {
--theme-bg: var(--theme-elevation-0);
--theme-text: var(--theme-elevation-1000);
--theme-input-bg: var(--theme-elevation-50);
--theme-overlay: rgba(5, 5, 5, 0.75);
color-scheme: dark;
/////////////////////////////
// GLOBAL STYLES
/////////////////////////////

* {
box-sizing: border-box;
}

::selection {
color: var(--color-base-1000);
html {
@extend %body;
background: var(--theme-bg);
-webkit-font-smoothing: antialiased;

&[data-theme='dark'] {
--theme-bg: var(--theme-elevation-0);
--theme-text: var(--theme-elevation-1000);
--theme-input-bg: var(--theme-elevation-50);
--theme-overlay: rgba(5, 5, 5, 0.75);
color-scheme: dark;

::selection {
color: var(--color-base-1000);
}

::-moz-selection {
color: var(--color-base-1000);
}
}

::-moz-selection {
color: var(--color-base-1000);
@include mid-break {
font-size: 12px;
}
}

@include mid-break {
font-size: 12px;
html,
body,
#app {
height: 100%;
}
}

html,
body,
#app {
height: 100%;
}
body {
font-family: var(--font-body);
font-weight: 400;
color: var(--theme-text);
margin: 0;
// this is for the nav to be able to push the document over
overflow-x: hidden;
}

body {
font-family: var(--font-body);
font-weight: 400;
color: var(--theme-text);
margin: 0;
// this is for the nav to be able to push the document over
overflow-x: hidden;
}
::selection {
background: var(--color-success-250);
color: var(--theme-base-800);
}

::selection {
background: var(--color-success-250);
color: var(--theme-base-800);
}
::-moz-selection {
background: var(--color-success-250);
color: var(--theme-base-800);
}

::-moz-selection {
background: var(--color-success-250);
color: var(--theme-base-800);
}
img {
max-width: 100%;
height: auto;
display: block;
}

img {
max-width: 100%;
height: auto;
display: block;
}
h1 {
@extend %h1;
}

h1 {
@extend %h1;
}
h2 {
@extend %h2;
}

h2 {
@extend %h2;
}
h3 {
@extend %h3;
}

h3 {
@extend %h3;
}
h4 {
@extend %h4;
}

h4 {
@extend %h4;
}
h5 {
@extend %h5;
}

h5 {
@extend %h5;
}
h6 {
@extend %h6;
}

h6 {
@extend %h6;
}
p {
margin: 0;
}

p {
margin: 0;
}
ul,
ol {
padding-left: $baseline;
margin: 0;
}

ul,
ol {
padding-left: $baseline;
margin: 0;
}
:focus-visible {
outline: var(--accessibility-outline);
}

:focus-visible {
outline: var(--accessibility-outline);
}
a {
color: currentColor;

a {
color: currentColor;
&:focus {
&:not(:focus-visible) {
opacity: 0.8;
}
outline: none;
}

&:focus {
&:not(:focus-visible) {
opacity: 0.8;
&:active {
opacity: 0.7;
outline: none;
}
outline: none;
}

&:active {
opacity: 0.7;
outline: none;
svg {
vertical-align: middle;
}
}

svg {
vertical-align: middle;
}
dialog {
width: 100%;
border: 0;
padding: 0;
color: currentColor;
}

dialog {
width: 100%;
border: 0;
padding: 0;
color: currentColor;
}
.payload__modal-item {
min-height: 100%;
background: transparent;
}

.payload__modal-item {
min-height: 100%;
background: transparent;
}
.payload__modal-container--enterDone {
overflow: auto;
}

.payload__modal-container--enterDone {
overflow: auto;
}
.payload__modal-item--enter,
.payload__modal-item--enterDone {
z-index: var(--z-modal);
}

.payload__modal-item--enter,
.payload__modal-item--enterDone {
z-index: var(--z-modal);
// @import '~payload-user-css'; TODO: re-enable this
}

// @import '~payload-user-css'; TODO: re-enable this
Loading

0 comments on commit 7c62e2a

Please sign in to comment.