Skip to content

Commit

Permalink
feat: spectrum 2 styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@dylandepass
dylandepass committed Mar 13, 2024
1 parent a0eb254 commit 7e9f40a
Show file tree
Hide file tree
Showing 7 changed files with 300 additions and 104 deletions.
101 changes: 101 additions & 0 deletions src/extension/app/aem-sidekick.css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,107 @@ export const style = css`
width: 100%;
pointer-events: none;
z-index: 999999999999;
--preview-background-default-light: #EEFAFEFF;
--preview-background-default-dark: #002B3BFF;
--preview-background-hover-light: #D9F4FDFF;
--preview-background-hover-dark: #00394EFF;
--preview-content-default-light: #1286CDFF;
--preview-content-default-dark: #5CC0FFFF;
--preview-border-default-light: #B7E7FCFF;
--preview-border-default-dark: #004762FF;
--preview-border-hover-light: #5CC0FFFF;
--preview-border-hover-dark: #046691FF;
--preview-border-open-light: #30A7FEFF;
--preview-border-open-dark: #0B78B3FF;
--live-content-default-light: #079355FF;
--live-content-default-dark: #2BD17DFF;
--live-background-default-light: #EDFCF1FF;
--live-background-default-dark: #002E22FF;
--live-background-hover-light: #D7F7E1FF;
--live-background-hover-dark: #003D2CFF;
--live-border-default-light: #ADEEC5FF;
--live-border-default-dark: #014C34FF;
--live-border-hover-light: #2BD17DFF;
--live-border-hover-dark: #036E45FF;
--live-border-open-light: #12B867FF;
--live-border-open-dark: #05834EFF;
--edit-content-default-light: #292929FF;
--edit-content-default-dark: #DADADAFF;
--edit-background-default-light: #F8F8F8FF;
--edit-background-default-dark: #292929FF;
--edit-background-hover-light: #F3F3F3FF;
--edit-background-hover-dark: #292929FF;
--edit-border-default-light: #DADADAFF;
--edit-border-default-dark: #505050FF;
--edit-border-hover-light: #C6C6C6FF;
--edit-border-hover-dark: #717171FF;
--edit-border-open-light: #8F8F8FFF;
--edit-border-open-dark: #8F8F8FFF;
--sidekick-background-light: #FFFFFFCC;
--sidekick-background-dark: #222222CC;
--sidekick-border-color-dark: #393939;
--sidekick-border-color-light: #DADADA;
--spectrum2-edit-content-default: var(--edit-content-default-dark);
--spectrum2-edit-background-default: var(--edit-background-default-dark);
--spectrum2-edit-background-hover: var(--edit-background-hover-dark);
--spectrum2-edit-border-default: var(--edit-border-default-dark);
--spectrum2-edit-border-hover: var(--edit-border-hover-dark);
--spectrum2-edit-border-open: var(--edit-border-open-dark);
--spectrum2-preview-background-default: var(--preview-background-default-dark);
--spectrum2-preview-background-hover: var(--preview-background-hover-dark);
--spectrum2-preview-content-default: var(--preview-content-default-dark);
--spectrum2-preview-border-default: var(--preview-border-default-dark);
--spectrum2-preview-border-hover: var(--preview-border-hover-dark);
--spectrum2-preview-border-open: var(--preview-border-open-dark);
--spectrum2-live-content-default: var(--live-content-default-dark);
--spectrum2-live-background-default: var(--live-background-default-dark);
--spectrum2-live-background-hover: var(--live-background-hover-dark);
--spectrum2-live-border-default: var(--live-border-default-dark);
--spectrum2-live-border-hover: var(--live-border-hover-dark);
--spectrum2-live-border-open: var(--live-border-open-dark);
--spectrum2-sidekick-border-radius: 8px;
--spectrum2-sidekick-background: var(--sidekick-background-dark);
--spectrum2-sidekick-border-color: var(--sidekick-border-color-dark);
--spectrum2-sidekick-backdrop-filter: blur(12px);
--spectrum2-sidekick-box-shadow:
0px 0px 3px 0px rgba(0, 0, 0, 0.12),
0px 3px 8px 0px rgba(0, 0, 0, 0.04),
0px 4px 16px 0px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: light) {
:host {
--spectrum2-preview-background-default: var(--preview-background-default-light);
--spectrum2-preview-background-hover: var(--preview-background-hover-light);
--spectrum2-preview-content-default: var(--preview-content-default-light);
--spectrum2-preview-border-default: var(--preview-border-default-light);
--spectrum2-preview-border-hover: var(--preview-border-hover-light);
--spectrum2-preview-border-open: var(--preview-border-open-light);
--spectrum2-live-content-default: var(--live-content-default-light);
--spectrum2-live-background-default: var(--live-background-default-light);
--spectrum2-live-background-hover: var(--live-background-hover-light);
--spectrum2-live-border-default: var(--live-border-default-light);
--spectrum2-live-border-hover: var(--live-border-hover-light);
--spectrum2-live-border-open: var(--live-border-open-light);
--spectrum2-edit-content-default: var(--edit-content-default-light);
--spectrum2-edit-background-default: var(--edit-background-default-light);
--spectrum2-edit-background-hover: var(--edit-background-hover-light);
--spectrum2-edit-border-default: var(--edit-border-default-light);
--spectrum2-edit-border-hover: var(--edit-border-hover-light);
--spectrum2-edit-border-open: var(--edit-border-open-light);
--spectrum2-sidekick-background: var(--sidekick-background-light);
--spectrum2-sidekick-border-color: var(--sidekick-border-color-light);
}
}
:host([open='true']) {
Expand Down
29 changes: 0 additions & 29 deletions src/extension/app/components/action-bar/action-bar.css.js
View file

This file was deleted.

15 changes: 6 additions & 9 deletions src/extension/app/components/action-bar/action-bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,13 @@ export class ActionBar extends LitElement {
static styles = css`
.action-bar {
display: flex;
border-radius: 8px;
border-radius: var(--spectrum2-sidekick-border-radius);
color: var(--spectrum-global-color-gray-800);
background-color: var(--spectrum-global-color-gray-200);
border: 1px solid var(--spectrum-global-color-gray-300);
}
@media (prefers-color-scheme: light) {
.action-bar {
background-color: var(--spectrum-global-color-gray-100);
}
background-color: var(--spectrum2-sidekick-background);
border: 1px solid var(--spectrum2-sidekick-border-color);
box-shadow: var(--spectrum2-sidekick-box-shadow);
backdrop-filter: var(--spectrum2-sidekick-backdrop-filter);
-webkit-backdrop-filter: var(--spectrum2-sidekick-backdrop-filter);
}
`;

Expand Down
40 changes: 31 additions & 9 deletions src/extension/app/components/action-bar/menu-item/menu-item.css.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,19 @@
import { css } from 'lit';

export const style = css`
:host(.current-env) {
margin-bottom: 7px;
}
:host(.current-env) #label {
font-weight: 700;
}
:host(:hover) {
background-color: var(--spectrum2-preview-background-hover);
border-radius: var(--spectrum2-sidekick-border-radius);
}
:host(.current-env.env-edit[aria-disabled="true"]) #label,
:host(.current-env.env-edit[disabled]) #label,
:host(.current-env.env-edit[aria-disabled="true"]) [name="description"]::slotted(*),
Expand All @@ -27,27 +36,39 @@ export const style = css`
}
:host(.current-env.env-preview){
background-color: #1379F3;
border-radius: 4px;
background-color: var(--spectrum2-preview-background-default);
border: 1px solid var(--spectrum2-preview-border-default);
border-radius: var(--spectrum2-sidekick-border-radius);
--mod-menu-item-background-color-hover: var(--spectrum2-preview-background-hover);
}
:host(.current-env.env-preview) #label {
:host(.current-env.env-preview) #label,
:host(.current-env.env-live) #label,
:host(.current-env.env-prod) #label {
color: var(--spectrum-white);
font-weight: 700;
}
:host(.current-env) [name="description"]::slotted(*){
color: var(--spectrum-gray-800);
color: var(--spectrum2-preview-content-default);
font-weight: 400;
}
:host(.current-env.env-live),
:host(.current-env.env-prod) {
background-color: #009112;
border-radius: 4px;
background-color: var(--spectrum2-live-background-default);
border: 1px solid var(--spectrum2-live-border-default);
border-radius: var(--spectrum2-sidekick-border-radius);
font-weight: 700;
}
:host(.current-env.env-live[aria-disabled="true"]) [name="description"]::slotted(*),
:host(.current-env.env-prod[aria-disabled="true"]) [name="description"]::slotted(*),
:host(.current-env.env-live[disabled]) [name="description"]::slotted(*),
:host(.current-env.env-prod[disabled]) [name="description"]::slotted(*) {
color: var(--spectrum2-live-content-default);
}
sp-status-light {
position: absolute;
top: 0;
Expand Down Expand Up @@ -89,9 +110,10 @@ export const style = css`
}
@media (prefers-color-scheme: light) {
:host(.current-env) #label,
:host(.current-env) [name="description"]::slotted(*){
color: var(--spectrum-white);
:host(.current-env.env-preview) #label,
:host(.current-env.env-live) #label,
:host(.current-env.env-prod) #label {
color: var(--spectrum-gray-800);
}
:host(:not(.env-edit, .current-env)[class]),
Expand Down
Loading

0 comments on commit 7e9f40a

Please sign in to comment.