mjs/nebula
mjs/nebula
1
0
Fork 0
mirror of https://github.com/onsonr/nebula.git synced 2025-03-10 17:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a new _site.zip file and updated button styles and theme line heights.

Browse Source
This commit is contained in:
Prad Nukala 2024-07-17 19:14:45 -04:00 committed by Prad Nukala (aider)
parent 45f9fd2f3a
commit 6a2b99d6b3
4 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
_site.zip Normal file
View File

Binary file not shown.

36
src/components/button/button.styles.ts
View File

@ -10,10 +10,10 @@ export default css`
.button { .button {
display: inline-flex; display: inline-flex;
align-items: stretch; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
border-style: solid; border-style: none;
border-width: var(--sl-input-border-width); border-width: var(--sl-input-border-width);
font-family: var(--sl-input-font-family); font-family: var(--sl-input-font-family);
font-weight: var(--sl-font-weight-semibold); font-weight: var(--sl-font-weight-semibold);
@ -28,6 +28,7 @@ export default css`
var(--sl-transition-x-fast) color, var(--sl-transition-x-fast) color,
var(--sl-transition-x-fast) border, var(--sl-transition-x-fast) border,
var(--sl-transition-x-fast) box-shadow; var(--sl-transition-x-fast) box-shadow;
border-radius: var(--sl-border-radius-medium);
cursor: inherit; cursor: inherit;
} }
@ -77,20 +78,20 @@ export default css`
/* Default */ /* Default */
.button--standard.button--default { .button--standard.button--default {
background-color: var(--sl-color-neutral-900); background-color: var(--sl-color-neutral-900);
border-color: var(--sl-input-border-color); border-color: var(--sl-color-neutral-800);
color: var(--sl-color-neutral-50); color: var(--sl-color-neutral-50);
} }
.button--standard.button--default:hover:not(.button--disabled) { .button--standard.button--default:hover:not(.button--disabled) {
background-color: var(--sl-color-neutral-800); background-color: var(--sl-color-neutral-800);
border-color: var(--sl-color-primary-300); border-color: var(--sl-color-neutral-300);
color: var(--sl-color-neutral-200); color: var(--sl-color-neutral-200);
} }
.button--standard.button--default:active:not(.button--disabled) { .button--standard.button--default:active:not(.button--disabled) {
background-color: var(--sl-color-primary-100); background-color: var(--sl-color-neutral-900);
border-color: var(--sl-color-primary-400); border-color: var(--sl-color-neutral-400);
color: var(--sl-color-primary-700); color: var(--sl-color-neutral-100);
} }
/* Primary */ /* Primary */
@ -136,18 +137,21 @@ export default css`
background-color: var(--sl-color-neutral-300); background-color: var(--sl-color-neutral-300);
border-color: var(--sl-color-neutral-300); border-color: var(--sl-color-neutral-300);
color: var(--sl-color-neutral-800); color: var(--sl-color-neutral-800);
opacity: 80%;
} }
.button--standard.button--neutral:hover:not(.button--disabled) { .button--standard.button--neutral:hover:not(.button--disabled) {
background-color: var(--sl-color-neutral-400); background-color: var(--sl-color-neutral-400);
border-color: var(--sl-color-neutral-400); border-color: var(--sl-color-neutral-400);
color: var(--sl-color-neutral-700); color: var(--sl-color-neutral-700);
background-opacity: 80%;
} }
.button--standard.button--neutral:active:not(.button--disabled) { .button--standard.button--neutral:active:not(.button--disabled) {
background-color: var(--sl-color-neutral-600); background-color: var(--sl-color-neutral-600);
border-color: var(--sl-color-neutral-600); border-color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-0); color: var(--sl-color-neutral-0);
opacity: 80%;
} }
/* Warning */ /* Warning */
@ -251,24 +255,6 @@ export default css`
color: var(--sl-color-neutral-0); color: var(--sl-color-neutral-0);
} }
/* Neutral */
.button--outline.button--neutral {
border-color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-600);
}
.button--outline.button--neutral:hover:not(.button--disabled),
.button--outline.button--neutral.button--checked:not(.button--disabled) {
background-color: var(--sl-color-neutral-600);
color: var(--sl-color-neutral-0);
}
.button--outline.button--neutral:active:not(.button--disabled) {
border-color: var(--sl-color-neutral-700);
background-color: var(--sl-color-neutral-700);
color: var(--sl-color-neutral-0);
}
/* Warning */ /* Warning */
.button--outline.button--warning { .button--outline.button--warning {
border-color: var(--sl-color-warning-600); border-color: var(--sl-color-warning-600);

8
src/themes/dark.css
View File

@ -410,10 +410,10 @@
/* Line heights */ /* Line heights */
--sl-line-height-denser: 1; --sl-line-height-denser: 1;
--sl-line-height-dense: 1.4; --sl-line-height-dense: 1.5;
--sl-line-height-normal: 1.8; --sl-line-height-normal: 1.625;
--sl-line-height-loose: 2.2; --sl-line-height-loose: 1.75;
--sl-line-height-looser: 2.6; --sl-line-height-looser: 2;
/* Focus rings */ /* Focus rings */
--sl-focus-ring-color: var(--sl-color-primary-700); --sl-focus-ring-color: var(--sl-color-primary-700);

8
src/themes/light.css
View File

@ -410,10 +410,10 @@
/* Line heights */ /* Line heights */
--sl-line-height-denser: 1; --sl-line-height-denser: 1;
--sl-line-height-dense: 1.4; --sl-line-height-dense: 1.5;
--sl-line-height-normal: 1.8; --sl-line-height-normal: 1.625;
--sl-line-height-loose: 2.2; --sl-line-height-loose: 1.75;
--sl-line-height-looser: 2.6; --sl-line-height-looser: 2;
/* Focus rings */ /* Focus rings */
--sl-focus-ring-color: var(--sl-color-primary-600); --sl-focus-ring-color: var(--sl-color-primary-600);