Skip to content

Commit

Permalink
Improved default styles
Browse files Browse the repository at this point in the history 
* harmonized color names
* fixed issues when closing modals by clicking the backdrop
* fixed focus issue on toggle buttons (using `aria-disabled` instead of
`disabled` prevents losing focus when the state changes)
  • Loading branch information
@felixgirault
felixgirault committed Oct 11, 2024
1 parent 146c99e commit dbf4db2
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 148 deletions.
5 changes: 4 additions & 1 deletion dist/example-assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,5 +291,8 @@ a.Tile:active {
}

.orejime-Env {
--orejime-background: #eff9fd !important;
--orejime-color-background: #eff9fd !important;
--orejime-color-text: var(--on-surface) !important;
--orejime-color-interactive: var(--interactive) !important;
--orejime-color-shadow: 2, 10, 15 !important;
}
169 changes: 99 additions & 70 deletions src/styles/orejime.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
$orejime-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19) !default;

$orejime-breakpoint-notice: 990px !default;

// micro css reset for everything orejime related
[class^="orejime-"] {
margin: 0;
padding: 0;
border: 0;
line-height: var(--orejime-space-1);
line-height: var(--orejime-space-m);
font-family: var(--orejime-font-family);
font-size: inherit;
color: inherit;
Expand All @@ -20,21 +18,25 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-Env {
--orejime-space-1: 1.4em;
--orejime-space-2: calc(2 * var(--orejime-space-1));
--orejime-space-05: calc(var(--orejime-space-1) / 2);
--orejime-space-025: calc(var(--orejime-space-1) / 4);
--orejime-space-m: 1.4em;
--orejime-space-l: calc(2 * var(--orejime-space-m));
--orejime-space-s: calc(var(--orejime-space-m) / 2);
--orejime-space-xs: calc(var(--orejime-space-m) / 4);
--orejime-font-size-small: 0.8rem;
--orejime-font-family: sans-serif;
--orejime-gap: 1ch;
--orejime-radius: calc(var(--orejime-space-1) / 4);
--orejime-overlay-background: rgba(0,0,0,0.5);
--orejime-background: #fff;
--orejime-color: #222;
--orejime-color-subdued: #555;
--orejime-color-interactive: #d6084f;
--orejime-radius: calc(var(--orejime-space-m) / 4);
--orejime-color-background: #fff;
--orejime-color-text: #222;
--orejime-color-subdued: #666;
--orejime-color-interactive: royalblue;
--orejime-color-on-interactive: #fff;
--orejime-color-backdrop: rgba(0, 0, 0, 0.5);
--orejime-color-shadow: 0, 0, 0;
--orejime-shadow:
0.1em 0.2em 0.4em rgba(var(--orejime-color-shadow), 0.25),
0.2em 0.6em 1.5em rgba(var(--orejime-color-shadow), 0.2);
--orejime-banner-max-width: 45ch;
--orejime-modal-max-width: 75ch;
--orejime-modal-max-width: 65ch;

all: unset;

Expand All @@ -50,39 +52,48 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-Button {
box-shadow: inset 0 0 0 2px currentColor;
margin: 0;
border: 0;
border-radius: var(--orejime-radius);
padding: var(--orejime-space-025) var(--orejime-space-05);
color: var(--orejime-color-interactive);
background: transparent;
padding: var(--orejime-space-xs) var(--orejime-space-s);
color: var(--orejime-color-on-interactive);
background: var(--orejime-color-interactive);
font: inherit;
cursor: pointer;
}

&[disabled] {
color: var(--orejime-color-subdued);
}
.orejime-Button:is([disabled], [aria-disabled="true"]) {
background: var(--orejime-color-subdued);
}

.orejime-Button:not(:is([disabled], [aria-disabled="true"])):is(:hover, :focus) {
outline: 1px solid var(--orejime-color-interactive);
outline-offset: 1px;
}

.orejime-Button:not(:is([disabled], [aria-disabled="true"])):active {
outline-width: 2px;
}

.orejime-Button:not([disabled]):hover,
.orejime-Button:not([disabled]):focus {
box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1px currentColor;
.orejime-ButtonList {
display: flex;
flex-wrap: wrap;
gap: 0.5ch;
}

.orejime-Banner {
background: var(--orejime-background);
color: var(--orejime-color);
background: var(--orejime-color-background);
color: var(--orejime-color-text);
position: fixed;
z-index: 1000;
width: 100%;
bottom: 0;

@media (min-width: $orejime-breakpoint-notice) {
box-shadow: $orejime-box-shadow;
box-shadow: var(--orejime-shadow);
border-radius: var(--orejime-radius);
bottom: var(--orejime-space-1);
right: var(--orejime-space-1);
bottom: var(--orejime-space-m);
right: var(--orejime-space-m);
max-width: var(--orejime-banner-max-width);
}

Expand All @@ -102,18 +113,18 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-Banner-body {
padding: var(--orejime-space-1);
padding: var(--orejime-space-m);
}

.orejime-Banner-logo {
max-width: 10ch;
}

.orejime-Banner-title {
margin-bottom: var(--orejime-space-05);
margin-bottom: var(--orejime-space-s);
font-weight: bold;
font-size: 1em;
line-height: var(--orejime-space-1);
line-height: var(--orejime-space-m);
}

.orejime-Banner-description {
Expand All @@ -125,15 +136,12 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-Banner-changes {
margin-top: var(--orejime-space-05);
margin-top: var(--orejime-space-s);
font-weight: bold;
}

.orejime-Banner-actions {
display: flex;
flex-wrap: wrap;
gap: var(--orejime-gap);
margin-top: var(--orejime-space-1);
margin-top: var(--orejime-space-s);
}

.orejime-Banner-actionItem {
Expand All @@ -158,62 +166,75 @@ $orejime-breakpoint-notice: 990px !default;
.orejime-ModalOverlay,
.orejime-BannerOverlay {
z-index: 1000;
background: var(--orejime-overlay-background);
background: var(--orejime-color-backdrop);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.orejime-ModalWrapper {
.orejime-ModalOverlay {
z-index: 1001;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
width: var(--orejime-modal-max-width);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

.orejime-ModalWrapper {
box-shadow: var(--orejime-shadow);
border-radius: var(--orejime-radius);
max-width: 100%;
max-height: 100%;
overflow: auto;
}

.orejime-Modal {
padding: var(--orejime-space-2);
background: var(--orejime-background);
color: var(--orejime-color);
border-radius: var(--orejime-radius);
box-shadow: $orejime-box-shadow;
position: relative;
padding: var(--orejime-space-l);
max-width: var(--orejime-modal-max-width);
background: var(--orejime-color-background);
color: var(--orejime-color-text);
}

.orejime-Modal-header {
margin-bottom: calc(var(--orejime-space-1) + var(--orejime-space-05));
margin-bottom: calc(var(--orejime-space-m) + var(--orejime-space-s));
}

.orejime-Modal-title {
display: block;
margin: 0 0 var(--orejime-space-05) 0;
margin: 0 0 var(--orejime-space-s) 0;
font-size: 2em;
font-weight: bold;
}

.orejime-Modal-closeButton {
border: none;
background: none;
color: inherit;
color: var(--orejime-color-subdued);
position: absolute;
top: calc(-1 * var(--orejime-space-1));
right: calc(-1 * var(--orejime-space-1));
top: var(--orejime-space-s);
right: var(--orejime-space-s);
padding: var(--orejime-space-s);
cursor: pointer;
}

.orejime-CloseIcon {
display: block;
stroke: currentColor;
stroke-width: 2px;
width: 1em;
height: 1em;
}

.orejime-Modal-closeButton:is(:hover, :focus) .orejime-CloseIcon {
color: var(--orejime-color-text);
}

.orejime-Modal-body {
margin-bottom: var(--orejime-space-2);
margin-bottom: var(--orejime-space-l);
}

.orejime-Modal-description {
Expand All @@ -225,7 +246,7 @@ $orejime-breakpoint-notice: 990px !default;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: var(--orejime-gap);
gap: 1ch;
}

.orejime-Modal-poweredByLink {
Expand All @@ -234,22 +255,26 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-PurposeToggles {
display: flex;
flex-wrap: wrap;
gap: var(--orejime-gap);
margin-bottom: var(--orejime-space-1);
margin-bottom: var(--orejime-space-m);
}

.orejime-PurposeList {
list-style: none;
}

.orejime-Purpose {
margin-top: var(--orejime-space-05);
display: grid;
grid-template:
'input label'
'empty description'
'empty children'
/ min-content auto;
gap: 0 1ch;
margin-top: var(--orejime-space-s);
}

.orejime-Purpose .orejime-Purpose {
padding-left: var(--orejime-space-2);
.orejime-Purpose-label {
grid-area: label;
}

.orejime-Purpose-title {
Expand All @@ -258,7 +283,7 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-Purpose-description {
padding-left: var(--orejime-space-2);
grid-area: description;
color: var(--orejime-color-subdued);
white-space: pre-line;
}
Expand All @@ -283,10 +308,10 @@ $orejime-breakpoint-notice: 990px !default;
}

.orejime-Purpose-input {
float: left;
margin-right: var(--orejime-space-1);
width: var(--orejime-space-1);
height: var(--orejime-space-1);
grid-area: input;
align-self: center;
width: var(--orejime-space-m);
height: var(--orejime-space-m);
appearance: revert;
background: revert;
accent-color: var(--orejime-color-interactive);
Expand All @@ -295,3 +320,7 @@ $orejime-breakpoint-notice: 990px !default;
.orejime-Purpose-input:disabled {
accent-color: var(--orejime-color-subdued);
}

.orejime-Purpose-children {
grid-area: children;
}
Loading

0 comments on commit dbf4db2

Please sign in to comment.