js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove --wa-flow-spacing from theming API

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-11 22:25:40 -04:00
parent a9e0a71fa1
commit 670a581d12
13 changed files with 64 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/styles/docs.css
View File

@@ -4,6 +4,10 @@
@import 'outline.css';
@import 'search.css';
wa-page {
--wa-flow-spacing: var(--wa-space-xl);
}
wa-page[view='desktop'] [data-toggle-nav] {
display: none;
}

50
docs/assets/styles/theme-headers.css Normal file
View File

@@ -0,0 +1,50 @@
/* #region Custom Styles */
@container preview (min-width: 0) {
.hero-background {
height: 47rem;
background-color: var(--wa-color-brand-fill-loud);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.hero-background::after {
background: url(/assets/images/themer/default/hero.png) 10rem bottom no-repeat;
background-size: 95%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
}
.project-header {
color: var(--wa-color-brand-on-loud);
}
.strata.hero {
height: 26rem;
}
.hero .title {
margin-inline-end: 40%;
color: var(--wa-color-brand-on-loud);
}
}
/* responsive */
@container preview (min-width: 1040px) {
.hero-background::after {
background-position: right bottom;
background-size: 90%;
}
}
/* #endregion */

2
src/themes/active.css
View File

@@ -352,8 +352,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

10
src/themes/applied.css
View File

@@ -63,7 +63,7 @@ pre,
table,
ul,
video {
margin: 0 0 var(--wa-flow-spacing) 0;
margin: 0 0 var(--wa-space-xl) 0;
}
/* Headings & text */
@@ -106,7 +106,7 @@ h6 {
hr {
border: none;
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-flow-spacing) 0;
margin: var(--wa-space-xl) 0;
}
em,
@@ -254,7 +254,7 @@ blockquote > :last-child {
ul,
ol {
padding: 0;
margin: 0 0 var(--wa-flow-spacing) var(--wa-space-xl);
margin: 0 0 var(--wa-space-xl) var(--wa-space-xl);
}
ul {
@@ -277,7 +277,7 @@ details {
padding: 0;
margin: 0;
padding-inline: var(--wa-space-m);
margin-block-end: var(--wa-flow-spacing);
margin-block-end: var(--wa-space-xl);
}
details :last-child {
@@ -321,7 +321,7 @@ details[open] > summary::before {
}
details + details {
margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-s));
margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s));
}
/* Tables */

2
src/themes/brutalist.css
View File

@@ -353,8 +353,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

2
src/themes/classic.css
View File

@@ -350,8 +350,6 @@
--wa-panel-border-radius: var(--wa-border-radius-s);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

55
src/themes/default.css
View File

@@ -6,7 +6,7 @@
/**
* Literal Colors
* Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
* Lightness on this scale strongly correlates to relative luminance, so each lightness value has nearly uniform WCAG 2.1 contrast across hues.
* Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
* A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
@@ -414,8 +414,6 @@
--wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
--wa-flow-spacing: var(--wa-space-2xl);
}
.wa-theme-default-dark,
@@ -497,54 +495,3 @@
--wa-color-neutral-on-normal: var(--wa-color-base-70);
--wa-color-neutral-on-loud: var(--wa-color-base-05);
}
/* #region Custom Styles */
@container preview (min-width: 0) {
.hero-background {
height: 47rem;
background-color: var(--wa-color-brand-fill-loud);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.hero-background::after {
background: url(/assets/images/themer/default/hero.png) 10rem bottom no-repeat;
background-size: 95%;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
}
.project-header {
color: var(--wa-color-brand-on-loud);
}
.strata.hero {
height: 26rem;
}
.hero .title {
margin-inline-end: 40%;
color: var(--wa-color-brand-on-loud);
}
}
/* responsive */
@container preview (min-width: 1040px) {
.hero-background::after {
background-position: right bottom;
background-size: 90%;
}
}
/* #endregion */

2
src/themes/fa.css
View File

@@ -357,8 +357,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

2
src/themes/glassy.css
View File

@@ -351,8 +351,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

2
src/themes/mellow.css
View File

@@ -351,8 +351,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

2
src/themes/migration.css
View File

@@ -354,8 +354,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/

6
src/themes/playful.css
View File

@@ -366,8 +366,6 @@
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
@@ -769,8 +767,8 @@
.product-card .badge-stock {
position: absolute;
top: var(--wa-flow-spacing);
right: var(--wa-flow-spacing);
top: var(--wa-space-xl);
right: var(--wa-space-xl);
}
.product-card {

6
src/themes/premium.css
View File

@@ -354,8 +354,6 @@
--wa-panel-border-radius: var(--wa-border-radius-s);
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
@@ -593,8 +591,8 @@
.product-card .badge-stock {
position: absolute;
top: var(--wa-flow-spacing);
right: var(--wa-flow-spacing);
top: var(--wa-space-xl);
right: var(--wa-space-xl);
}
.product-card wa-rating {