https://automaticcss.com/docs/overlay-classes/ Angepasst auf Core Framework
.overlay--primary-10 {
--overlay-background: var(--primary-10);
}
.overlay--primary-20 {
--overlay-background: var(--primary-20);
}
.overlay--primary-30 {
--overlay-background: var(--primary-30);
}
.overlay--primary-40 {
--overlay-background: var(--primary-40);
}
.overlay--primary-50 {
--overlay-background: var(--primary-50);
}
.overlay--primary-60 {
--overlay-background: var(--primary-60);
}
.overlay--primary-70 {
--overlay-background: var(--primary-70);
}
.overlay--primary-80 {
--overlay-background: var(--primary-80);
}
.overlay--primary-90 {
--overlay-background: var(--primary-90);
}
.overlay--primary-light-10 {
--overlay-background: var(--primary-l-10);
}
.overlay--primary-light-20 {
--overlay-background: var(--primary-l-20);
}
.overlay--primary-light-30 {
--overlay-background: var(--primary-l-30);
}
.overlay--primary-light-40 {
--overlay-background: var(--primary-l-40);
}
.overlay--primary-light-50 {
--overlay-background: var(--primary-l-50);
}
.overlay--primary-light-60 {
--overlay-background: var(--primary-l-60);
}
.overlay--primary-light-70 {
--overlay-background: var(--primary-l-70);
}
.overlay--primary-light-80 {
--overlay-background: var(--primary-l-80);
}
.overlay--primary-light-90 {
--overlay-background: var(--primary-l-90);
}
.overlay--primary-dark-10 {
--overlay-background: var(--primary-d-10);
}
.overlay--primary-dark-20 {
--overlay-background: var(--primary-d-20);
}
.overlay--primary-dark-30 {
--overlay-background: var(--primary-d-30);
}
.overlay--primary-dark-40 {
--overlay-background: var(--primary-d-40);
}
.overlay--primary-dark-50 {
--overlay-background: var(--primary-d-50);
}
.overlay--primary-dark-60 {
--overlay-background: var(--primary-d-60);
}
.overlay--primary-dark-70 {
--overlay-background: var(--primary-d-70);
}
.overlay--primary-dark-80 {
--overlay-background: var(--primary-d-80);
}
.overlay--primary-dark-90 {
--overlay-background: var(--primary-d-90);
}
.overlay--secondary-10 {
--overlay-background: var(--secondary-10);
}
.overlay--secondary-20 {
--overlay-background: var(--secondary-20);
}
.overlay--secondary-30 {
--overlay-background: var(--secondary-30);
}
.overlay--secondary-40 {
--overlay-background: var(--secondary-40);
}
.overlay--secondary-50 {
--overlay-background: var(--secondary-50);
}
.overlay--secondary-60 {
--overlay-background: var(--secondary-60);
}
.overlay--secondary-70 {
--overlay-background: var(--secondary-70);
}
.overlay--secondary-80 {
--overlay-background: var(--secondary-80);
}
.overlay--secondary-90 {
--overlay-background: var(--secondary-90);
}
.overlay--secondary-light-10 {
--overlay-background: var(--secondary-l-10);
}
.overlay--secondary-light-20 {
--overlay-background: var(--secondary-l-20);
}
.overlay--secondary-light-30 {
--overlay-background: var(--secondary-l-30);
}
.overlay--secondary-light-40 {
--overlay-background: var(--secondary-l-40);
}
.overlay--secondary-light-50 {
--overlay-background: var(--secondary-l-50);
}
.overlay--secondary-light-60 {
--overlay-background: var(--secondary-l-60);
}
.overlay--secondary-light-70 {
--overlay-background: var(--secondary-l-70);
}
.overlay--secondary-light-80 {
--overlay-background: var(--secondary-l-80);
}
.overlay--secondary-light-90 {
--overlay-background: var(--secondary-l-90);
}
.overlay--secondary-dark-10 {
--overlay-background: var(--secondary-d-10);
}
.overlay--secondary-dark-20 {
--overlay-background: var(--secondary-d-20);
}
.overlay--secondary-dark-30 {
--overlay-background: var(--secondary-d-30);
}
.overlay--secondary-dark-40 {
--overlay-background: var(--secondary-d-40);
}
.overlay--secondary-dark-50 {
--overlay-background: var(--secondary-d-50);
}
.overlay--secondary-dark-60 {
--overlay-background: var(--secondary-d-60);
}
.overlay--secondary-dark-70 {
--overlay-background: var(--secondary-d-70);
}
.overlay--secondary-dark-80 {
--overlay-background: var(--secondary-d-80);
}
.overlay--secondary-dark-90 {
--overlay-background: var(--secondary-d-90);
}
.overlay--base-10 {
--overlay-background: var(--base-10);
}
.overlay--base-20 {
--overlay-background: var(--base-20);
}
.overlay--base-30 {
--overlay-background: var(--base-30);
}
.overlay--base-40 {
--overlay-background: var(--base-40);
}
.overlay--base-50 {
--overlay-background: var(--base-50);
}
.overlay--base-60 {
--overlay-background: var(--base-60);
}
.overlay--base-70 {
--overlay-background: var(--base-70);
}
.overlay--base-80 {
--overlay-background: var(--base-80);
}
.overlay--base-90 {
--overlay-background: var(--base-90);
}
.overlay--base-light-10 {
--overlay-background: var(--base-l-10);
}
.overlay--base-light-20 {
--overlay-background: var(--base-l-20);
}
.overlay--base-light-30 {
--overlay-background: var(--base-l-30);
}
.overlay--base-light-40 {
--overlay-background: var(--base-l-40);
}
.overlay--base-light-50 {
--overlay-background: var(--base-l-50);
}
.overlay--base-light-60 {
--overlay-background: var(--base-l-60);
}
.overlay--base-light-70 {
--overlay-background: var(--base-l-70);
}
.overlay--base-light-80 {
--overlay-background: var(--base-l-80);
}
.overlay--base-light-90 {
--overlay-background: var(--base-l-90);
}
.overlay--base-dark-10 {
--overlay-background: var(--base-d-10);
}
.overlay--base-dark-20 {
--overlay-background: var(--base-d-20);
}
.overlay--base-dark-30 {
--overlay-background: var(--base-d-30);
}
.overlay--base-dark-40 {
--overlay-background: var(--base-d-40);
}
.overlay--base-dark-50 {
--overlay-background: var(--base-d-50);
}
.overlay--base-dark-60 {
--overlay-background: var(--base-d-60);
}
.overlay--base-dark-70 {
--overlay-background: var(--base-d-70);
}
.overlay--base-dark-80 {
--overlay-background: var(--base-d-80);
}
.overlay--base-dark-90 {
--overlay-background: var(--base-d-90);
}
.overlay--neutral-10 {
--overlay-background: var(--neutral-10);
}
.overlay--neutral-20 {
--overlay-background: var(--neutral-20);
}
.overlay--neutral-30 {
--overlay-background: var(--neutral-30);
}
.overlay--neutral-40 {
--overlay-background: var(--neutral-40);
}
.overlay--neutral-50 {
--overlay-background: var(--neutral-50);
}
.overlay--neutral-60 {
--overlay-background: var(--neutral-60);
}
.overlay--neutral-70 {
--overlay-background: var(--neutral-70);
}
.overlay--neutral-80 {
--overlay-background: var(--neutral-80);
}
.overlay--neutral-90 {
--overlay-background: var(--neutral-90);
}
.overlay--neutral-light-10 {
--overlay-background: var(--neutral-l-10);
}
.overlay--neutral-light-20 {
--overlay-background: var(--neutral-l-20);
}
.overlay--neutral-light-30 {
--overlay-background: var(--neutral-l-30);
}
.overlay--neutral-light-40 {
--overlay-background: var(--neutral-l-40);
}
.overlay--neutral-light-50 {
--overlay-background: var(--neutral-l-50);
}
.overlay--neutral-light-60 {
--overlay-background: var(--neutral-l-60);
}
.overlay--neutral-light-70 {
--overlay-background: var(--neutral-l-70);
}
.overlay--neutral-light-80 {
--overlay-background: var(--neutral-l-80);
}
.overlay--neutral-light-90 {
--overlay-background: var(--neutral-l-90);
}
.overlay--neutral-dark-10 {
--overlay-background: var(--neutral-d-10);
}
.overlay--neutral-dark-20 {
--overlay-background: var(--neutral-d-20);
}
.overlay--neutral-dark-30 {
--overlay-background: var(--neutral-d-30);
}
.overlay--neutral-dark-40 {
--overlay-background: var(--neutral-d-40);
}
.overlay--neutral-dark-50 {
--overlay-background: var(--neutral-d-50);
}
.overlay--neutral-dark-60 {
--overlay-background: var(--neutral-d-60);
}
.overlay--neutral-dark-70 {
--overlay-background: var(--neutral-d-70);
}
.overlay--neutral-dark-80 {
--overlay-background: var(--neutral-d-80);
}
.overlay--neutral-dark-90 {
--overlay-background: var(--neutral-d-90);
}
.overlay--white-10 {
--overlay-background: var(--white-10);
}
.overlay--white-20 {
--overlay-background: var(--white-20);
}
.overlay--white-30 {
--overlay-background: var(--white-30);
}
.overlay--white-40 {
--overlay-background: var(--white-40);
}
.overlay--white-50 {
--overlay-background: var(--white-50);
}
.overlay--white-60 {
--overlay-background: var(--white-60);
}
.overlay--white-70 {
--overlay-background: var(--white-70);
}
.overlay--white-80 {
--overlay-background: var(--white-80);
}
.overlay--white-90 {
--overlay-background: var(--white-90);
}
.overlay--black-10 {
--overlay-background: var(--black-10);
}
.overlay--black-20 {
--overlay-background: var(--black-20);
}
.overlay--black-30 {
--overlay-background: var(--black-30);
}
.overlay--black-40 {
--overlay-background: var(--black-40);
}
.overlay--black-50 {
--overlay-background: var(--black-50);
}
.overlay--black-60 {
--overlay-background: var(--black-60);
}
.overlay--black-70 {
--overlay-background: var(--black-70);
}
.overlay--black-80 {
--overlay-background: var(--black-80);
}
.overlay--black-90 {
--overlay-background: var(--black-90);
}
figure[class*="overlay--"]::before {
z-index: 0;
}