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

improve variance between depth levels

Browse Source
This commit is contained in:
lindsaym-fa
2023-12-01 12:12:49 -05:00
parent 5701bef6e9
commit 340351ca4b
8 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/themes/chic.css
View File

@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..600&display=swap');
@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
@import 'depth_3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
@import 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.css */
:root,
@@ -343,7 +343,7 @@
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);

4
src/themes/default.css
View File

@@ -107,7 +107,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);
@@ -238,7 +238,7 @@
*/
/* Corners are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-corners-base: 0.25;
--wa-corners-base: 0.375;
--wa-corners-xs: calc(var(--wa-corners-base) * 0.75rem);
--wa-corners-s: calc(var(--wa-corners-base) * 1rem);
--wa-corners-m: calc(var(--wa-corners-base) * 2rem);

27
src/themes/depth_2_chunky.css
View File

@@ -25,7 +25,7 @@
--wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
--wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
--wa-shadow-offset-x-base: 0;
--wa-shadow-offset-x-base: 0.25;
--wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
--wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
--wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
@@ -49,14 +49,35 @@ wa-button {
--wa-transition-faster: 0ms;
&:not([variant='text']) {
--box-shadow: 0 var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-base) var(--box-shadow-color);
--box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
var(--box-shadow-color);
margin-bottom: var(--wa-shadow-offset-y-level-1);
margin-right: var(--wa-shadow-offset-x-level-1);
&:active {
--box-shadow: none;
transform: translateY(var(--wa-shadow-offset-y-level-1));
transform: translateX(var(--wa-shadow-offset-x-level-1)) translateY(var(--wa-shadow-offset-y-level-1));
}
}
&[variant='brand'] {
--box-shadow-color: var(--wa-color-brand-spot-darker);
}
&[variant='success'] {
--box-shadow-color: var(--wa-color-success-spot-darker);
}
&[variant='neutral'] {
--box-shadow-color: var(--wa-color-neutral-spot-darker);
}
&[variant='warning'] {
--box-shadow-color: var(--wa-color-warning-spot-darker);
}
&[variant='danger'] {
--box-shadow-color: var(--wa-color-danger-spot-darker);
}
}
/* #endregion */

36
src/themes/depth_3_punchy.css
View File

@@ -11,7 +11,7 @@
*/
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
* The base value is intended for calculations and is not used by components directly. */
--wa-shadow-blur-base: 0;
--wa-shadow-blur-base: 0.125;
--wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
--wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
--wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
@@ -19,13 +19,13 @@
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
* or transforming elements with shadows. */
--wa-shadow-offset-y-base: 0.25;
--wa-shadow-offset-y-base: 0.125;
--wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
--wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
--wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
--wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
--wa-shadow-offset-x-base: 0.25;
--wa-shadow-offset-x-base: 0;
--wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
--wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
--wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
@@ -44,29 +44,17 @@
/* #region Buttons */
wa-button:not([variant='text']) {
--wa-transition-normal: 0ms;
--wa-transition-fast: 0ms;
--wa-transition-faster: 0ms;
--box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
var(--box-shadow-color);
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-level-1) /* outer shadow */;
margin-bottom: var(--wa-shadow-offset-y-level-1);
margin-right: var(--wa-shadow-offset-x-level-1);
&:not([disabled]) {
&:hover {
--box-shadow: var(--wa-shadow-offset-x-level-2) var(--wa-shadow-offset-y-level-2) var(--wa-shadow-blur-level-2)
var(--box-shadow-color);
transform: translateY(calc((var(--wa-shadow-offset-y-level-2) - var(--wa-shadow-offset-y-level-1)) * -1))
translateX(calc((var(--wa-shadow-offset-x-level-2) - var(--wa-shadow-offset-x-level-1)) * -1));
}
&:active {
--box-shadow: none;
transform: translateY(var(--wa-shadow-offset-y-level-1)) translateX(var(--wa-shadow-offset-x-level-1));
--box-shadow: inset 0 0 0 0 transparent /* shine */,
inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
}
}
}
@@ -80,4 +68,10 @@ wa-textarea {
--box-shadow: var(--wa-shadow-inset);
}
}
wa-switch {
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.1) /* inner highlight */,
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, var(--wa-shadow-level-1) /* outer shadow */;
}
/* #endregion */

12
src/themes/depth_4_glossy.css
View File

@@ -102,9 +102,9 @@
/* #region Buttons */
wa-button:not([variant='text']) {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */, inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
margin-bottom: var(--wa-shadow-offset-y-inset);
transition: transform var(--wa-transition-faster);
@@ -112,7 +112,7 @@ wa-button:not([variant='text']) {
&:not([disabled]) {
&:hover {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-level-2) /* outer shadow */;
@@ -120,7 +120,7 @@ wa-button:not([variant='text']) {
&:active {
--box-shadow: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.08) /* top highlight */,
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */, 0 0 0 0 transparent /* outer shadow */;
@@ -234,8 +234,8 @@ wa-button:not([outline]) {
wa-input:not(:focus),
wa-select {
&:not([filled]):not([disabled]) {
--box-shadow: var(--wa-shadow-inset), inset 0 1.25em 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.02) /* lower shade */;
--box-shadow: var(--wa-shadow-inset), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
}
}

2
src/themes/glassy.css
View File

@@ -108,7 +108,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);

6
src/themes/mellow.css
View File

@@ -89,7 +89,7 @@
/* Text colors are used for standard text elements.
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-30);
--wa-color-text-normal: var(--wa-color-base-40);
--wa-color-text-quiet: var(--wa-color-base-50);
--wa-color-text-link: var(--wa-color-blue-50);
@@ -108,7 +108,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);
@@ -193,7 +193,7 @@
--wa-font-weight-medium: 500;
--wa-font-weight-heavy: 600;
--wa-font-weight-heading: var(--wa-font-weight-heavy);
--wa-font-weight-heading: var(--wa-font-weight-medium);
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-medium);

4
src/themes/playful.css
View File

@@ -1,5 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300..700&family=Roboto+Slab:wght@300..700&display=swap');
@import 'depth_3_punchy.css';
@import 'depth_2_chunky.css';
@import 'borders_4_heavy.css';
:root,
@@ -108,7 +108,7 @@
/* Shadow specifies the default color for box shadows that indicate elevation. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 6%),
transparent
);