Tweaked the custom gtk theme

11 files changed, 1692 insertions, 0 deletions

diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss
new file mode 100644
index 00000000..265978ec
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_accessibility.scss
@@ -0,0 +1,46 @@
+// on screen keyboard
+#keyboard {
+    background-color: $dark_bg_color_trans;
+}
+.keyboard-key {
+    @extend %shared-button;
+
+    &:grayed {
+        color: $selected_fg_color;
+        border-color: $selected_fg_color;
+    }
+    &:checked {
+        border-color: $selected_border;
+    }
+    &:hover {
+        @extend %shared-button-hover;
+    }
+    &:active {
+        @extend %shared-button-active;
+    }
+}
+.keyboard-layout {
+    spacing: 8px;
+    padding: 8px;
+}
+.keyboard-row {
+    spacing: 16px;
+}
+.keyboard-subkeys {
+    color: $dark_fg_color;
+    padding: 4px;
+    -arrow-border-radius: $roundness;
+    -arrow-background-color: $dark_bg_color;
+    -arrow-border-width: 1px;
+    -arrow-border-color: $dark_fg_color;
+    -arrow-base: 16px;
+    -arrow-rise: 8px;
+    -boxpointer-gap: 4px;
+}
+// desktop zoom feature
+.magnifier-zoom-region {
+    border: 3px solid $exterior_border;
+    &.full-screen {
+        border-width: 0;
+    }
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss
new file mode 100644
index 00000000..06e57e16
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_alt-tab.scss
@@ -0,0 +1,66 @@
+// non 3D alt-tab options
+#altTabPopup {
+    padding: 8px;
+    spacing: 16px;
+}
+.switcher-list {
+    @extend %bg-grad-to-bottom;
+
+    border-radius: $roundness;
+    border: 1px solid $exterior_border;
+    padding: 16px;
+    color: $dark_fg_color;
+    .item-box {
+        padding: 8px;
+        border-radius: $roundness;
+        &:selected {
+            @extend %selected-bg-grad-to-bottom;
+
+            color: $selected_fg_color;
+        }
+    }
+    .thumbnail-box {
+        padding: 2px;
+        spacing: 4px;
+        color: $dark_fg_color;
+    }
+    .thumbnail {
+        min-width: 20em;
+    }
+    .separator {
+        width: 1px;
+        background-color: $selected_bg_color;
+    }
+}
+.switcher-list-item-container {
+    spacing: 8px;
+}
+.thumbnail-scroll-gradient-left {
+    background-gradient-direction: horizontal;
+    background-gradient-start: rgba(51, 51, 51, 1.0);
+    background-gradient-end: rgba(51, 51, 51, 0);
+    border-radius: $roundness;
+    border-radius-topright: 0;
+    border-radius-bottomright: 0;
+    width: 60px;
+}
+.thumbnail-scroll-gradient-right {
+    background-gradient-direction: horizontal;
+    background-gradient-start: rgba(51, 51, 51, 0);
+    background-gradient-end: rgba(51, 51, 51, 1.0);
+    border-radius: $roundness;
+    border-radius-topleft: 0;
+    border-radius-bottomleft: 0;
+    width: 60px;
+}
+.switcher-arrow {
+    border-color: rgba(0,0,0,0);
+    color: $dark_fg_color;
+    &:highlighted {
+        border-color: rgba(0,0,0,0);
+        color: $selected_fg_color;
+    }
+}
+.switcher-preview-backdrop {
+    background-color: rgba(25,25,25,0.65);
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss
new file mode 100644
index 00000000..1bf695c1
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_calendar.scss
@@ -0,0 +1,120 @@
+// the calendar displayed by the calendar applet is a heavily modified menu and inherits from the .menu selectosr
+// indivudual elements within the menu can be themed seperately with these selectors
+.calendar {
+    padding: 1em 1.75em;
+    spacing-rows: 1px;
+    spacing-columns: 5px;
+}
+// also covers the year label
+.calendar-month-label {
+    color: $dark_fg_color;
+    font-size: 0.8em;
+    padding: 5px 10px;
+    border-radius: $roundness;
+    font-weight: bold;
+    text-align: center;
+}
+.calendar-change-month-back {
+    @extend %calendar-shared;
+
+    border: 1px solid transparent;
+    background-image: url(assets/calendar-arrow-left.svg);
+    &:rtl {
+        background-image: url(assets/calendar-arrow-right.svg);
+    }
+    &:hover {
+        border: 1px solid $selected_bg_color;
+    }
+    &:active {
+        background-color: $selected_bg_color;
+    }
+}
+.calendar-change-month-forward {
+    @extend %calendar-shared;
+
+    border: 1px solid transparent;
+    background-image: url(assets/calendar-arrow-right.svg);
+    &:rtl {
+        background-image: url(assets/calendar-arrow-left.svg);
+    }
+    &:hover {
+        border: 1px solid $selected_bg_color;
+    }
+    &:active {
+        background-color: $selected_bg_color;
+    }
+}
+.datemenu-date-label {
+    padding: 1em 1.75em;
+    color: $dark_fg_color;
+    font-weight: bold;
+    text-align: center;
+}
+.calendar-day-base {
+    font-size: 0.8em;
+    text-align: center;
+    width: 2.4em;
+    height: 1.8em;
+    border-radius: $roundness;
+    &:active {
+        background-color: $selected_bg_color;
+    }
+    &:hover {
+    }
+}
+.calendar-day-heading {
+    color: $dark_fg_color;
+    padding-top: 0.9em;
+}
+.calendar-week-number {
+    color: $dark_fg_color;
+    font-weight: bold;
+    padding-top: 0.6em;
+}
+.calendar-day {
+    &:ltr {
+        color: $dark_fg_color;
+        padding: 2px;
+    }
+    &:rtl {
+        color: $dark_fg_color;
+        padding: 3px;
+    }
+}
+.calendar-day-top {
+    &:ltr {
+    }
+    &:rtl {
+    }
+}
+.calendar-day-left {
+    &:ltr {
+    }
+    &:rtl {
+    }
+}
+.calendar-work-day {
+}
+.calendar-nonwork-day {
+    font-weight: bold;
+}
+// this is always is an active state
+.calendar-today {
+    @extend %selected-bg-grad-to-bottom;
+
+    font-weight: bold;
+    &:active {
+        color: $selected_fg_color;
+    }
+}
+.calendar-other-month-day {
+    font-style: italic;
+}
+// this is always is an active state
+.calendar-day-with-events {
+    background-color: $selected_bg_color;
+    font-weight: bold;
+    &:active {
+        color: $selected_fg_color;
+    }
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss
new file mode 100644
index 00000000..74f88664
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_desklets.scss
@@ -0,0 +1,65 @@
+// desklets - the base .desklet selector is for 'undecorated' desklets however some subtle background themeing is desirable
+// to maintain visibility irrespctive of wallpaper and to allow for the highlighting scheme to work
+.desklet {
+    font-size: 0.9em;
+    padding: 8px;
+    color: $dark_fg_color;
+    border-radius: $roundness;
+    background-color: $dark_bg_color_trans;
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+}
+// these do not inherit from .desklet
+.desklet-with-borders {
+    @extend %desklet-shared;
+
+    font-size: 0.9em;
+    border-radius: $roundness;
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+}
+.desklet-with-borders-and-header {
+    @extend %desklet-shared;
+
+    font-size: 0.9em;
+    border-radius-bottomleft: $roundness;
+    border-radius-bottomright: $roundness;
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+}
+.desklet-header {
+    @extend %desklet-shared;
+
+    font-size: 1.2em;
+    border-radius-topleft: $roundness;
+    border-radius-topright: $roundness;
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+}
+.photoframe-box {
+    @extend %desklet-shared;
+
+    border-radius: $roundness;
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+}
+.desklet-drag-placeholder {
+    border: 2px solid $selected_bg_color;
+    background-color: $dark_bg_color_trans;
+    border-radius: $roundness;
+}
+.launcher {
+    padding: 1px;
+    transition-duration: 150;
+    .icon-box {
+        padding-top: 2px;
+    }
+}
+// inherits font characteristics from .desklet-header
+.clock-desklet-label {
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss
new file mode 100644
index 00000000..9f1ee3f6
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_dialogs.scss
@@ -0,0 +1,201 @@
+// on screen messages and input boxes
+.modal-dialog {
+    @extend %bg-grad-to-right;
+
+    border: 1px solid $exterior_border;
+    border-radius: $roundness;
+    color: $dark_fg_color;
+    padding: 16px 20px;
+}
+.modal-dialog-button-box {
+    spacing: 16px;
+}
+.modal-dialog-button {
+    @extend %shared-button;
+
+    min-width: 5em;
+    min-height: 1em;
+    padding: $spacing_plus2;
+    &:hover {
+        @extend %shared-button-hover;
+    }
+    &:focus {
+        color: $selected_fg_color;
+    }
+    &:active {
+        @extend %shared-button-active;
+    }
+    &:pressed {
+        @extend %shared-button-active;
+    }
+    &:disabled {
+        color: rgb(60, 60, 60);
+    }
+}
+// run dialog (ALT-F2)
+.run-dialog-label {
+    color: $dark_fg_color;
+    padding-bottom: 10px;
+}
+.run-dialog-error-label {
+    color: $selected_bg_color;
+}
+.run-dialog-error-box {
+    padding-top: 15px;
+    spacing: 5px;
+}
+.run-dialog-completion-box {
+    padding-left: 15px;
+}
+.run-dialog-entry {
+        @extend %dialog-entry;
+
+        &:focus  {
+            border: 1px solid $selected_border;
+        }
+}
+.run-dialog {
+    border-radius: $roundness;
+    padding: 16px 20px;
+}
+// removable media dialogs
+.cinnamon-mount-operation-icon {
+    icon-size: 4.8em;
+}
+.mount-password-reask {
+    color: $warning_color;
+}
+.show-processes-dialog {
+    spacing: 24px;
+}
+.mount-question-dialog {
+    spacing: 24px;
+}
+.show-processes-dialog-subject {
+    @extend %shared-dialogs-subject;
+
+    &:rtl {
+        @extend %shared-dialogs-subject-rtl;
+    }
+}
+.mount-question-dialog-subject {
+    @extend %shared-dialogs-subject;
+
+    &:rtl {
+        @extend %shared-dialogs-subject-rtl;
+    }
+}
+.show-processes-dialog-description {
+    @extend %shared-dialogs-description;
+
+    &:rtl {
+        padding-right: 17px;
+    }
+}
+.mount-question-dialog-description {
+    @extend %shared-dialogs-description;
+
+    &:rtl {
+        padding-right: 17px;
+    }
+}
+.show-processes-dialog-app-list {
+    max-height: 200px;
+    padding-top: 24px;
+    padding-left: 49px;
+    padding-right: 32px;
+    &:rtl {
+        padding-right: 49px;
+        padding-left: 32px;
+    }
+}
+.show-processes-dialog-app-list-item {
+    color: $dark_fg_color;
+    &:hover {
+        color: $dark_fg_color;
+    }
+    &:ltr {
+        padding-right: 1em;
+    }
+    &:rtl {
+        padding-left: 1em;
+    }
+}
+.show-processes-dialog-app-list-item-icon {
+    &:ltr {
+        padding-right: 17px;
+    }
+    &:rtl {
+        padding-left: 17px;
+    }
+}
+.show-processes-dialog-app-list-item-name {
+}
+// displayed when media keys are pressed.
+.osd-window {
+    @extend %osd-shared;
+
+    spacing: 1em;
+    padding: 16px;
+    .level {
+        height: 0.7em;
+        border-radius: 0.3em;
+        background-color: $scrollbar_bg_color;
+    }
+    .level-bar {
+        border-radius: 0.3em;
+        background-color: $scrollbar_slider_hover_color;
+    }
+}
+.info-osd, .workspace-osd, .overview-empty-placeholder {
+    @extend %osd-shared;
+
+    font-size: 1.5em;
+    text-align: center;
+    padding: 8px 10px;
+}
+// this is an full screen overlay that is displayed with any cinnamon OSD or modal dialog which needs to always be semi transparent
+.lightbox {
+    background-color: $dark_bg_color_trans;
+}
+// applet 'about' OSDs - inherits from modal dialogs
+.about-content {
+    min-width: 250px;
+    min-height: 150px;
+    spacing: 8px;
+    padding-bottom: 16px;
+}
+.about-title {
+    font-size: 1.4em;
+    font-weight: bold;
+}
+.about-uuid {
+    font-size: 0.8em;
+}
+.about-icon {
+    padding-right: 20px;
+}
+.about-scrollBox {
+    border: 1px solid $exterior_border;
+    border-radius: $roundness;
+}
+.about-scrollBox-innerBox {
+    padding: 1.2em;
+    spacing: 1.2em;
+}
+.about-description {
+    padding-top: 4px;
+}
+.about-version {
+    padding-left: 7px;
+}
+// dialog box for the cinnamon debug utility
+#LookingGlassDialog {
+    @extend %bg-grad-to-bottom;
+
+    spacing: 4px;
+    padding: 8px;
+    border: 1px solid $exterior_border;
+    border-radius: $roundness;
+    color: $dark_fg_color;
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss
new file mode 100644
index 00000000..c4e45be8
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_menu.scss
@@ -0,0 +1,238 @@
+.menu {
+    @extend %shared-menu;
+
+    min-width: 100px;
+    margin: 4px;
+}
+// scale view right click menu
+.popup-combo-menu {
+    @extend %shared-menu;
+}
+.popup-menu-arrow {
+    icon-size: 1.14em;
+}
+// applet submenus
+// the margin here causes the 'bounce' on opening the sub menu
+// does StScrollBar need to be here? No as long as it isnt themed differently to staging
+.popup-sub-menu {
+    @extend %bg-grad-to-bottom;
+
+    border: 1px solid $interior_border;
+    border-radius: $roundness;
+    padding: 8px;
+}
+.popup-menu-content {
+    padding: 0;
+}
+// individual menu entries are themed here
+.popup-menu-item {
+    @extend %menu-buttons-shared;
+
+    color: $dark_fg_color;
+    spacing: .5em;
+    &:active {
+        background-color: $selected_bg_color;
+        border-radius: $roundness;
+        color: $selected_fg_color;
+    }
+    &:insensitive {
+        font-style: italic;
+    }
+}
+.popup-combobox-item {
+    @extend %menu-buttons-shared;
+}
+// sliders and separators in menus
+.popup-separator-menu-item {
+    @extend %separator-shared;
+
+    -gradient-direction: horizontal;
+}
+.popup-slider-menu-item {
+    @extend %slider-shared;
+}
+.popup-device-menu-item {
+    spacing: .5em;
+}
+.popup-inactive-menu-item {
+    font-style: italic;
+    color: $dark_fg_color;
+}
+.popup-subtitle-menu-item {
+    font-weight: bold;
+    font-size: 1em;
+}
+.popup-menu-icon {
+    icon-size: 1.14em;
+}
+.popup-menu-item-dot {
+}
+.popup-submenu-menu-item:open {
+}
+.popup-alternating-menu-item:alternate {
+    font-weight: bold;
+}
+// toggles in menus
+.toggle-switch {
+    width: 64px;
+    height: 22px;
+}
+.toggle-switch-us {
+    background-image: url(assets/toggle-off-us.svg);
+    &:checked {
+        background-image: url(assets/toggle-on-us.svg);
+    }
+}
+.toggle-switch-intl {
+    background-image: url(assets/toggle-off-intl.svg);
+    &:checked {
+        background-image: url(assets/toggle-on-intl.svg);
+    }
+}
+.nm-menu-item-icons {
+    spacing: .5em;
+    icon-size: 1.14em;
+}
+// all the remaining code is for the main menu applet
+.menu-favorites-box {
+    @extend %bg-grad-to-right;
+
+    padding: 0.8em;
+    border: 1px solid $interior_border;
+    border-radius: $roundness;
+    transition-duration: 150;
+    spacing: 1em;
+}
+// This is for the stock menu in Cinnamon 4.0.2 and later - adds more vfade to the scrollable favorites box and fakes a seperator from the system buttons with a bottom border.
+.menu-favorites-scrollbox {
+    padding-bottom: 1em;
+    border-bottom: 1px solid;
+    border-color: $interior_border;
+    &.vfade {
+        -st-vfade-offset: 136px;
+    }   
+}
+.menu-favorites-button {
+    @extend %menu-buttons-shared;
+
+    &:hover {
+        background-color: $selected_bg_color;
+        border-radius: $roundness;
+        color: $selected_fg_color;
+    }
+}
+.menu-categories-box {
+    padding: 0.8em;
+}
+.menu-applications-inner-box {
+    @extend %bg-grad-to-right;
+
+    padding: 0.8em;
+    border-radius: $roundness;
+    border: 1px solid $interior_border;
+    StScrollView {
+        @extend %menu-context-shared;
+    }
+}
+.menu-applications-outer-box {
+    @extend %bg-grad-to-right;
+
+    padding: 0.8em;
+    border: 1px solid $interior_border;
+    border-radius: $roundness;
+}
+.menu-application-button {
+    @extend %menu-buttons-shared;
+
+    &:highlighted {
+        font-weight: bold;
+    }
+}
+.menu-application-button-selected {
+    @extend %menu-buttons-shared;
+
+    background-color: $selected_bg_color;
+    border-radius: $roundness;
+    color: $selected_fg_color;
+    &:highlighted {
+        font-weight: bold;
+    }
+}
+.menu-application-button-label {
+    @extend %menu-button-label-shared;
+}
+.menu-category-button {
+	@extend %menu-buttons-shared;
+}
+.menu-category-button-greyed {
+    @extend %menu-buttons-shared;
+
+    color: $dark_fg_color;
+    font-style: italic;
+}
+.menu-category-button-selected {
+    @extend %menu-buttons-shared;
+
+    background-color: $selected_bg_color;
+    border-radius: $roundness;
+    color: $selected_fg_color;
+    &:hover {
+    }
+}
+.menu-category-button-label {
+    @extend %menu-button-label-shared;
+}
+// in the stock menu app descriptions are shown at the base of the menu
+.menu-selected-app-box {
+    padding: 2px 8px;
+    text-align: right;
+    &:rtl {
+        text-align: left;
+    }
+}
+.menu-selected-app-title {
+    font-weight: bold;
+    font-size: 0.8em;
+}
+.menu-selected-app-description {
+    max-width: 150px;
+    font-size: 0.8em;
+}
+// the menus search box
+.menu-search-box {
+    &:ltr {
+        padding-left: 30px;
+        padding-bottom: 5px;
+        padding-top: 5px;
+    }
+    &:rtl {
+        padding-right: 30px;
+        padding-bottom: 5px;
+        padding-top: 5px;
+    }
+}
+#menu-search-entry {
+    @extend %dialog-entry;
+
+    margin-bottom: 0.5em;
+    &:focus {
+        border: 1px solid $selected_border;
+    }
+    &:hover {
+    }
+}
+.menu-search-entry-icon {
+    icon-size: 1em;
+    color: $tooltip_fg_color;
+}
+// new styleclasses for the Cinnamon 4.0.0 stock menu - note this menu was dropped in Cinnamon 4.0.1 but retain styling in case it's revived.
+.menu-top-box {
+  spacing: 10px; }
+.menu-systembuttons-box {
+  padding-bottom: 12px;
+  padding-top: 12px;
+  margin-bottom: 0.5em; }
+// cinnVIIstark menu right click favourites context menu
+.starkmenu-favorites-box .menu-context-menu, .menu-context-menu {
+        @extend %menu-context-shared;
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss
new file mode 100644
index 00000000..9bd5097e
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_notifications.scss
@@ -0,0 +1,91 @@
+// notification system
+#notification {
+    @extend %bg-grad-to-right;
+
+    border-radius: $roundness;
+    border: 1px solid $exterior_border;
+    padding: 8px;
+    spacing-rows: 5px;
+    spacing-columns: 10px;
+    margin-from-right-edge-of-screen: 20px;
+    width: 34em;
+    color: $dark_fg_color;
+    &.multi-line-notification {
+        padding-bottom: 8px;
+        color: $dark_fg_color;
+    }
+    StEntry {
+        @extend %dialog-entry;
+
+        &:focus {
+            border: 1px solid $selected_border;
+        }
+    }
+    .url-highlighter {
+        link-color: $link_color;
+    }
+}
+.notification-with-image {
+    min-height: 159px;
+    color: $dark_fg_color;
+}
+#notification-scrollview {
+    max-height: 10em;
+    > {
+        .top-shadow {
+            height: 1em;
+        }
+        .bottom-shadow {
+            height: 1em;
+        }
+    }
+    &:ltr > StScrollBar {
+        padding-left: 6px;
+    }
+    &:rtl > StScrollBar {
+        padding-right: 6px;
+    }
+}
+#notification-body {
+    spacing: 4px;
+}
+#notification-actions {
+    spacing: 8px;
+}
+.notification-button {
+    @extend %shared-button;
+
+    border-radius: $roundness;
+    min-width: 5em;
+    min-height: 1em;
+    padding: $spacing_plus2;
+    &:hover {
+        @extend %shared-button-hover;
+    }
+    &:focus {
+        color: $selected_fg_color;
+    }
+    &:active {
+        @extend %shared-button-active;
+    }
+}
+.notification-icon-button {
+    @extend %shared-button;
+
+    border-radius: $roundness;
+    min-width: 2em;
+    min-height: 2em;
+    padding: $spacing_plus2;
+    &:hover {
+        @extend %shared-button-hover;
+    }
+    &:focus {
+        color: $selected_fg_color;
+    }
+    &:active {
+        @extend %shared-button-active;
+    }
+    > StIcon {
+        icon-size: 1.5em;
+    }
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss
new file mode 100644
index 00000000..c87d5d0d
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_overview.scss
@@ -0,0 +1,119 @@
+// scale and expo views
+#overview {
+    spacing: 12px;
+}
+.workspace-thumbnails {
+    spacing: 14px;
+}
+.workspace-add-button {
+    background-image: url(assets/add-workspace.png);
+    height: 200px;
+    width: 35px;
+    border-radius-topleft: 10px;
+    border-radius-bottomleft: 10px;
+    transition-duration: 150;
+    background-color: $info_bg_color;
+    border-top: 1px solid;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+    border-color: $button_border;
+    &:hover {
+        background-image: url(assets/add-workspace-hover.png);
+        border-color: $selected_border;
+    }
+    &:active {
+        background-image: url(assets/add-workspace.png);
+        border-color: $selected_border;
+        background-color: $success_color;
+    }
+}
+.workspace-close-button {
+    background-image: url(assets/close-window.svg);
+    height: 32px;
+    width: 32px;
+    -cinnamon-close-overlap: 20px;
+}
+// this always looks better semi transparent
+.workspace-overview-background-shade {
+    background-color: $dark_bg_color_trans;
+}
+.window-caption {
+    @extend %bg-grad-to-bottom;
+
+    padding: 4px 6px;
+    border: 1px solid $exterior_border;
+    border-radius: $roundness;
+    color: $dark_fg_color;
+    -cinnamon-caption-spacing: 4px;
+    &:focus, &#selected {
+        @extend %selected-bg-grad-to-bottom;
+
+        color: $selected_fg_color;
+        border: 1px solid $selected_border;
+    }
+}
+.window-border {
+    border: 1px solid $selected_border;
+}
+.window-close {
+    background-image: url(assets/close-window.svg);
+    height: 32px;
+    width: 32px;
+    -cinnamon-close-overlap: 20px;
+    &:rtl {
+        -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5);
+    }
+}
+.window-close-area {
+    background-image: url(assets/trash-icon.png);
+    background-size: 100px;
+    background-color: $dark_bg_color_trans;
+    border: 1px solid $exterior_border;
+    border-bottom-width: 0;
+    border-radius: 20px 20px 0 0;
+    height: 120px;
+    width: 400px;
+}
+.expo-background {
+    @extend %bg-grad-to-bottom;
+}
+.expo-workspace-thumbnail-frame {
+    border: 1px solid $exterior_border;
+    &#active {
+        border: 1px solid $selected_border;
+    }
+}
+.expo-workspaces-name-entry {
+    @extend %bg-grad-to-bottom;
+
+    padding: 4px 6px;
+    height: 1.5em;
+    border: 1px solid $exterior_border;
+    border-radius: $roundness;
+    selected-color: $selected_fg_color;
+    selection-background-color: $selected_bg_color;
+    color: $dark_fg_color;
+    text-align: center;
+    &#selected {
+        @extend %selected-bg-grad-to-bottom;
+
+        color: $selected_fg_color;
+        selected-color: $dark_fg_color;
+        selection-background-color: $selected_bg_color;
+        border: 1px solid $selected_border;
+    }
+    &:focus {
+        border: 1px solid $selected_border;
+    }
+    &:hover {
+        border: 1px solid $selected_border;
+    }
+}
+// hot corners animation
+.ripple-box {
+    width: 104px;
+    height: 104px;
+    background-image: url(assets/corner-ripple.png);
+    background-color: $selected_bg_color;
+    border-radius: 52px;
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss
new file mode 100644
index 00000000..f1743f54
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_panel.scss
@@ -0,0 +1,573 @@
+// panels can be on any side of the screen
+// some panel item theming is specific to panel orientation and is included in this section
+// each panel is also split into three zones
+// dnd is for panel edit mode
+// dummy is for adding or moving panels
+#panel {
+    color: $dark_fg_color;
+    height: 2.5em;
+    width: 3.2em;
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+}
+.panel-dummy {
+    background-color: rgba(255, 0, 0, 0.6);
+    &:entered {
+        background-color: rgba(0, 255, 0, 0.6);
+    }
+}
+.panelLeft {
+    spacing: 4px;
+    &:dnd {
+        background-color: rgba(255, 0, 0, 0.6);
+    }
+    &:ltr {
+        padding-right: 4px;
+    }
+    &:rtl {
+        padding-left: 4px;
+    }
+    &.vertical {
+        padding: 0;
+        &:dnd {
+        }
+    }
+}
+.panelCenter {
+    spacing: 4px;
+    &:dnd {
+        background-color: rgba(0, 255, 0, 0.6);
+    }
+    &.vertical {
+        padding-left: 0;
+        padding-right: 0;
+        &:dnd {
+        }
+    }
+}
+.panelRight {
+    spacing: 4px;
+    &:dnd {
+        background-color: rgba(0, 0, 255, 0.6);
+    }
+    &:ltr {
+        padding-left: 0;
+        spacing: 0;
+    }
+    &:rtl {
+        padding-right: 0;
+        spacing: 0;
+    }
+    &.vertical {
+        padding: 0;
+        &:dnd {
+        }
+    }
+}
+// panel borders must be defined with a border-top color or other color definition that encompasses border-top
+// panels do not support different colors of borders on different edges
+// due to a bug in cinnamons placing of panel items on a bordered panel small margins are used to ensure that bordered panel objects
+// do not overlap the panel border
+.panel-top {
+    @extend %bg-grad-to-bottom;
+
+    box-shadow: 0 -1px 0 0 $exterior_border inset;
+    .window-list-item-box {
+        @extend %bg-grad-to-top;
+        margin-bottom: 1px;
+        &:hover {
+            @extend %hover-bg-grad-to-top;
+        }
+        &:active, &:checked, &:focus, &:running {
+            @extend %panel-top-shared;
+
+            &:hover {
+                @extend %hover-selected-grad-to-top;
+                }
+        }
+    }
+    .grouped-window-list-item-box {
+        &:active, &:checked {      
+          box-shadow: 0 2px 0 0 $dark_fg_color inset;
+          }
+        &:hover {
+          box-shadow: 0 2px 0 0 $selected_border inset;
+          }
+        &:focus {
+          box-shadow: 0 4px 0 0 $selected_border inset;
+          }
+    }
+    .workspace-switcher, .workspace-graph {
+        padding: 1px $spacing;
+    }
+    .panel-launchers .launcher:hover {
+        box-shadow: 0 2px 0 0 $selected_border inset;
+    }
+    .applet-separator {
+        padding: 3px $spacing;
+    }
+}
+.panel-bottom {
+    @extend %bg-grad-to-top;
+
+    box-shadow: 0 1px 0 0 $exterior_border inset;
+    .window-list-item-box {
+        @extend %bg-grad-to-bottom;
+        margin-top: 1px;
+
+        &:hover {
+            @extend %hover-bg-grad-to-bottom;
+        }
+        &:active, &:checked, &:focus, &:running {
+            @extend %panel-bottom-shared;
+
+            &:hover {
+                @extend %hover-selected-grad-to-bottom;
+                }
+        }
+    }
+    .grouped-window-list-item-box {
+        &:active, &:checked {      
+          box-shadow: 0 -2px 0 0 $dark_fg_color inset;
+          }
+        &:hover {
+          box-shadow: 0 -2px 0 0 $selected_border inset;
+          }
+        &:focus {
+          box-shadow: 0 -4px 0 0 $selected_border inset;
+          }
+    }
+    .workspace-switcher, .workspace-graph {
+        padding: 1px $spacing;
+    }
+    .panel-launchers .launcher:hover {
+        box-shadow: 0 -2px 0 0 $selected_border inset;
+    }
+    .applet-separator {
+        padding: 3px $spacing;
+    }
+}
+.panel-left {
+    @extend %bg-grad-to-right;
+
+    box-shadow: -1px 0 0 0 $exterior_border inset;
+    .window-list-item-box {
+        margin-right: 1px;
+        @extend %bg-grad-to-left;
+
+        &:hover {
+            @extend %hover-bg-grad-to-left;
+        }
+        &:active, &:checked, &:focus, &:running {
+            @extend %panel-left-shared;
+
+            &:hover {
+                @extend %hover-selected-grad-to-left;
+            }
+        }
+    }
+    .grouped-window-list-item-box {
+        &:active, &:checked {      
+          box-shadow: 2px 0 0 0 $dark_fg_color inset;
+          }
+        &:hover {
+          box-shadow: 2px 0 0 0 $selected_border inset;
+          }
+        &:focus {
+          box-shadow: 4px 0 0 0 $selected_border inset;
+          }
+    }
+    .workspace-switcher, .workspace-graph {
+        padding: $spacing 1px;
+    }
+    .panel-launchers .launcher:hover {
+        box-shadow: 2px 0 0 0 $selected_border inset;
+    }
+    .applet-separator {
+        padding: $spacing 3px;
+    }
+}
+.panel-right {
+    @extend %bg-grad-to-left;
+
+     box-shadow: 1px 0 0 0 $exterior_border inset;
+    .window-list-item-box {
+        margin-left: 1px;
+        @extend %bg-grad-to-right;
+
+        &:hover {
+            @extend %hover-bg-grad-to-right;
+        }
+        &:active, &:checked, &:focus, &:running {
+            @extend %panel-right-shared;
+
+            &:hover {
+                @extend %hover-selected-grad-to-right;
+                }
+        }
+    }
+     .grouped-window-list-item-box {
+        &:active, &:checked {      
+          box-shadow: -2px 0 0 0 $dark_fg_color inset;
+          }
+        &:hover {
+          box-shadow: -2px 0 0 0 $selected_border inset;
+          }
+        &:focus {
+          box-shadow: -4px 0 0 0 $selected_border inset;
+          }
+    }
+    .workspace-switcher, .workspace-graph {
+        padding: $spacing 1px;
+    }
+    .panel-launchers .launcher:hover {
+        box-shadow: -2px 0 0 0 $selected_border inset;
+    }
+    .applet-separator {
+        padding: $spacing 3px;
+    }
+}
+// a non feature - not worth themeing
+.panel-corner {
+    &:active {
+    }
+    &:overview {
+    }
+    &:focus {
+    }
+}
+// remaining code is for panel items starting with the generic applets
+.applet-separator-line {
+    width: 2px;
+    background: $selected_bg_color;
+}
+.applet-separator-line-vertical {
+    border-color: $selected_bg_color;
+    border-bottom: 2px solid;
+}
+.applet-spacer:highlight {
+    background-color: $selected_bg_color;
+}
+.applet-box {
+    color: $dark_fg_color;
+    transition-duration: 150;
+    border-radius: $roundness;
+    padding: 0 $spacing;
+    &.vertical {
+        padding: $spacing 0;
+    }
+    &:checked {
+        color: $selected_bg_color;
+        .applet-label {
+            color: $selected_bg_color;
+        }
+    }
+    &:hover {
+        color: $selected_bg_color;
+        .applet-label {
+            color: $selected_bg_color;
+        }
+    }
+    &:highlight {
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+        .applet-label {
+            color: $selected_fg_color;
+        }
+    }
+}
+.applet-label {
+    font-weight: bold;
+    color: $dark_fg_color;
+    padding-left: 3px;
+}
+// icon-size set to 22 to match hard-coded menu icon size - applet-icon style is used for search provider results in menu
+.applet-icon {
+    color: $dark_fg_color;
+    padding: 0;
+    spacing: 0;
+    icon-size: 22px;
+}
+// used by power applet to warn of low battery
+.system-status-icon {
+    icon-size: 1.14em;
+    padding: 0;
+    spacing: 0;
+    &.warning {
+        color: $warning_color;
+    }
+    &.error {
+        color: $error_color;
+    }
+}
+// keyboard layout applet
+.panel-status-button {
+    -natural-hpadding: 4px;
+    -minimum-hpadding: 4px;
+    font-weight: bold;
+    color: $dark_fg_color;
+    &:hover {
+        color: $selected_bg_color;
+    }
+}
+// user applet specific themeing
+.user-box {
+    padding: 0.4em 1.3em;
+    spacing: 10px;
+}
+.user-icon {
+    padding: 4px;
+    border: none;
+}
+.user-label {
+    color: $dark_fg_color;
+    font-weight: bold;
+    font-size: 1em;
+}
+// the window list applet. Some third party applets inherit some of this theming.
+.window-list-box {
+    spacing: $spacing;
+    padding: 1px 3px;
+    font-size: 0.9em;
+    border-radius: $roundness;
+    &.vertical {
+        spacing: $spacing;
+        padding: 3px 1px;
+    }
+    &:highlight {
+        background-color: $selected_bg_color;
+    }
+    #appMenuIcon {
+    }
+}
+// progress was added with cinnamon 3.6 and allows compatible applications to use the window list as a progress bar
+.window-list-item {
+    &-box {
+        border: 1px solid $interior_border;
+        border-radius: $roundness;
+        transition-duration: 150;
+        &:hover {
+            border: 1px solid $selected_border;
+        }
+        &.top StLabel, &.bottom StLabel {
+            padding-left: 3px;
+        }
+        .progress {
+            background-color: $success_color;
+            border: 1px solid $selected_border;
+            border-radius: $roundness;
+            color: $info_fg_color;
+        }
+        #appMenuIcon {
+		    padding-right: 0.2em;
+        }
+    }
+    &-demands-attention {
+        background-color: $info_bg_color;
+        color: $info_fg_color;
+    }
+}
+// cinnamon 3.8 will support an improved window-list-thumbnail preview which now has it's own selector
+.window-list-preview {
+    @extend %bg-grad-to-right;
+
+    border-radius: $roundness;
+    border: 1px solid $exterior_border;
+    padding: 6px 12px;
+    spacing: $spacing;
+    color: $dark_fg_color;
+}
+// Cinnamon 4.0 has a new grouped window list applet with it's own selectors.
+// Initial theme support is defined here.
+
+.grouped-window-list {
+    &-thumbnail-label {
+        padding-left: 3px;
+    }
+    &-number-label {
+        z-index: 99;
+        font-size: 0.8em;
+        color: $dark_fg_color;
+    }
+    // May need to revise depending on upstream GWL developments
+    &-button-label {
+        padding: 0;
+    }
+    &-badge {
+        border-radius: 256px;
+        background-color: $dark_bg_color; 
+    }
+    &-thumbnail-alert {
+        background: $warning_color;
+    }
+    &-item-box {
+        transition-duration: 150;
+        spacing: 1em;
+        background-color: rgba(0, 0, 0, 0.01);
+        &:hover, &:focus, {
+           color: $selected_bg_color;
+        }
+        &:focus  {
+           font-weight: bold;
+        }
+        .progress {
+           background-color: $success_color;
+        }
+    }
+    &-demands-attention {
+        background-color: $info_bg_color;
+        color: $info_fg_color;
+    }
+    &-thumbnail-menu {
+        @extend %bg-grad-to-right;
+
+        border-radius: $roundness;
+        padding: 10px 15px;
+        spacing: $spacing;
+        color: $dark_fg_color;
+        .item-box {
+            padding: 8px;
+            border-radius: $roundness;
+            border: 1px solid $interior_border;
+            &:outlined {
+                border: 1px solid $selected_border;
+            }
+            &:selected {
+                background-color: $selected_bg_color;
+                border: 1px solid $selected_border;
+                color: $selected_fg_color;
+            }
+        }
+        .thumbnail-box {
+            padding: 2px;
+            spacing: $spacing;
+        }
+        .thumbnail {
+            width: 256px;
+        }
+        .separator {
+            width: 1px;
+            background: $selected_bg_color;
+        }
+    }
+}
+// the sound player applet
+.sound-player {
+    StButton {
+        @extend %shared-button;
+        
+        min-width: 2em;
+        min-height: 2em;
+        padding: $spacing_plus2;
+        color: $button_fg_color;
+        border-radius: $roundness;
+        &:small {
+            min-width: 1.5em;
+            min-height: 1.5em;
+            padding: $spacing;
+            StIcon {
+                icon-size: 1em;
+            }
+        }
+        StIcon {
+            icon-size: 1.5em;
+        }
+        &:hover {
+            @extend %shared-button-hover;
+        }
+        &:focus {
+            color: $selected_fg_color;
+        }
+        &:active {
+            @extend %shared-button-active;
+        }
+    }
+    .slider {
+        @extend %slider-shared;
+        height: 4px;
+    }
+    StBoxLayout {
+        spacing: 0.5em;
+    }
+    > StBoxLayout {
+        padding: 5px;
+    }
+}
+.sound-player-generic-coverart {
+    background: rgba(0,0,0,0.2);
+}
+.sound-player-overlay {
+    @extend %bg-grad-to-bottom;
+
+    min-width: 300px;
+    padding: 12px 16px;
+    spacing: 0.5em;
+    color: $dark_fg_color;
+}
+// workspace switcher applet simple button view
+.workspace-button {
+    width: 2em;
+    height: 1em;
+    color: $dark_fg_color;
+    border: 1px solid $interior_border;
+    margin: 2px;
+    transition-duration: 150;
+    &.vertical {
+    height: 1.5em;
+    }
+    &:outlined {
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+        border-color: $selected_border;
+    }
+}
+// workspace switcher applet graph view
+.workspace-graph {
+    .workspace {
+        @extend %bg-grad-to-bottom;
+
+        border: 1px solid $interior_border;
+        &:active {
+            @extend %selected-bg-grad-to-bottom;
+
+            border: 1px solid $interior_border;
+            .windows {
+                -active-window-background: rgba(255, 255, 255, 0.8);
+                -active-window-border: rgba(0, 0, 0, 0.9);
+                -inactive-window-background: rgba(140, 140, 140, 0.8);
+                -inactive-window-border: rgba(0, 0, 0, 0.7);
+            }
+        }
+        .windows {
+            -active-window-background: rgba(140, 140, 140, 0.8);
+            -active-window-border: rgba(0, 0, 0, 0.7);
+            -inactive-window-background: rgba(140, 140, 140, 0.8);
+            -inactive-window-border: rgba(0, 0, 0, 0.7);
+        }
+    }
+}
+// most panel launcher themeing is orientation specific
+.panel-launchers {
+    padding: 0 $spacing;
+    spacing: $spacing;
+    .launcher {
+        background-color:rgba(0, 0, 0, 0.01);
+    }
+    &.vertical {
+        padding: $spacing 0;
+    }
+}
+.notification-applet-padding {
+    padding: .5em 1em;
+}
+.notification-applet-container {
+    max-height: 100px;
+}
+.systray {
+    spacing: $spacing;
+}
+.flashspot {
+    background-color: $selected_bg_color;
+}
+
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss
new file mode 100644
index 00000000..e6944a66
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_stage.scss
@@ -0,0 +1,114 @@
+// defines font family and standard font size across the whole theme
+// em is preferred for better support for text scaling
+stage {
+    font-family: roboto, Noto Sans, sans, sans-serif;
+    font-size: 1em;
+}
+.cinnamon-link {
+    color: $link_color;
+    font-style: italic;
+    &:hover {
+        color: $selected_fg_color;
+    }
+}
+.label-shadow {
+    color: rgba(0,0,0,0.5);
+}
+// themeing for various standard elements
+StScrollBar {
+    padding: 2px;
+    StButton {
+        &#vhandle {
+            background-color: $scrollbar_slider_color;
+            border-radius: $roundness;
+            &:hover {
+                background-color: $scrollbar_slider_hover_color;
+            }
+        }
+        &#hhandle {
+            background-color: $scrollbar_slider_color;
+            border-radius: $roundness;
+            &:hover {
+                background-color: $scrollbar_slider_hover_color;
+            }
+        }
+    }
+    StBin#trough {
+        background-color: $scrollbar_bg_color;
+        border-radius: $roundness;
+    }
+}
+StScrollView {
+    &.vfade {
+        -st-vfade-offset: 68px;
+    }
+    &.hfade {
+        -st-hfade-offset: 68px;
+    }
+    StScrollBar {
+        min-width: 0.8em;
+        min-height: 0.8em;
+    }
+}
+.separator {
+    @extend %separator-shared;
+}
+.slider {
+    @extend %slider-shared;
+}
+.check-box {
+    CinnamonGenericContainer {
+        spacing: .2em;
+    }
+    StBin {
+        @extend %check-box-shared;
+    }
+    &:focus {
+        StBin {
+            @extend %check-box-shared;
+        }
+        &:checked StBin {
+            background-image: url(assets/checkbox.svg);
+        }
+    }
+    StLabel {
+        font-weight: normal;
+    }
+    &:checked StBin {
+        background-image: url(assets/checkbox.svg);
+    }
+}
+.radiobutton {
+    CinnamonGenericContainer {
+        spacing: .2em;
+        height: 18px;
+        padding-top: 2px;
+    }
+    StBin {
+        @extend %radiobutton-shared;
+    }
+    &:focus {
+        StBin {
+            @extend %radiobutton-shared;
+        }
+        &:checked StBin {
+            background-image: url(assets/radiobutton.svg);
+        }
+    }
+    StLabel {
+        padding-top: 4px;
+        font-size: 0.8em;
+        box-shadow: none;
+    }
+    &:checked StBin {
+        background-image: url(assets/radiobutton.svg);
+    }
+}
+#Tooltip {
+    @extend %tooltip-bg-grad-to-top;
+
+    padding: 5px 8px;
+    color: $tooltip_fg_color;
+    text-align: center;
+    border-radius: $roundness;
+}
diff --git a/.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss b/.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss
new file mode 100644
index 00000000..35f5ed8e
--- /dev/null
+++ b/.themes/MikunoNaka/cinnamon/scss/sections/_tile-hud.scss
@@ -0,0 +1,59 @@
+// on screen preview of windows tiling placement
+.tile-preview {
+    @extend %tile-shared;
+
+    &.snap {
+        @extend %tile-shared-snap;
+    }
+}
+.tile-hud {
+    @extend %tile-shared;
+
+    &.snap {
+        @extend %tile-shared-snap;
+    }
+    &:top {
+        border-top-width: 0;
+
+        border-radius: 0 0 10px 10px;
+    }
+    &:bottom {
+        border-bottom-width: 0;
+
+        border-radius: $roundness $roundness 0 0;
+    }
+    &:left {
+        border-left-width: 0;
+
+        border-radius: 0 10px 10px 0;
+    }
+    &:right {
+        border-right-width: 0;
+
+        border-radius: 10px 0 0 10px;
+    }
+    &:top-left {
+        border-top-width: 0;
+        border-left-width: 0;
+
+        border-radius: 0 0 10px 0;
+    }
+    &:top-right {
+        border-top-width: 0;
+        border-right-width: 0;
+
+        border-radius: 0 0 0 10px;
+    }
+    &:bottom-left {
+        border-bottom-width: 0;
+        border-left-width: 0;
+
+        border-radius: 0 10px 0 0;
+    }
+    &:bottom-right {
+        border-bottom-width: 0;
+        border-right-width: 0;
+
+        border-radius: 10px 0 0 0;
+    }
+}