feat: add custom themes

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -1,24 +1,18 @@
-# New Repository Template
+# Pulsar Themes
 
-This template contains all of our basic files for a new GitHub repository. There is also a handy workflow that will create an issue on a new repository made from this template, with a checklist for the steps we usually take in setting up a new repository.
-
-If you're starting a Node.JS project with TypeScript, we have a [specific template](https://github.com/naomi-lgbt/nodejs-typescript-template) for that purpose.
-
-## Readme
-
-Delete all of the above text (including this line), and uncomment the below text to use our standard readme template.
-
-<!-- # Project Name
-
-Project Description
+This repository holds our custom themes for the [Pulsar Editor](https://pulsar-edit.dev).
 
 ## Live Version
 
-This page is currently deployed. [View the live website.]
+This isn't something that can be hosted live, but you *can* use it! Here's how:
+
+- Clone this repository
+- Move `sakura-dreams-syntax` and `sakura-dreams-ui` to your `~/.pulsar/packages` directory (`%USERPROFILE%\.pulsar` on Windows)
+- Change your theme settings in Pulsar to the themes you would like to use
 
 ## Feedback and Bugs
 
-If you have feedback or a bug report, please feel free to open a GitHub issue!
+If you have feedback or a bug report, please feel free to open an issue!
 
 ## Contributing
 
@@ -36,4 +30,4 @@ Copyright held by Naomi Carrigan.
 
 ## Contact
 
-We may be contacted through our [Chat Server](http://chat.nhcarrigan.com) or via email at `contact@nhcarrigan.com`. -->
+We may be contacted through our [Chat Server](http://chat.nhcarrigan.com) or via email at `contact@nhcarrigan.com`.

sakura-dreams-syntax/index.less

@@ -0,0 +1,3 @@
+@import "styles/syntax-variables.less";
+@import "styles/syntax.less";
+@import "styles/editor.less";

sakura-dreams-syntax/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "sakura-dreams-syntax",
+  "theme": "syntax",
+  "version": "0.0.0",
+  "description": "A short description of your syntax theme",
+  "keywords": [
+    "syntax",
+    "theme"
+  ],
+  "repository": "https://github.com/atom/sakura-dreams-syntax",
+  "license": "MIT",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  }
+}

sakura-dreams-syntax/styles/colors.less

@@ -0,0 +1,29 @@
+// Main UI Colors
+@background: #ffefef;
+@foreground: #d87093;
+
+// These are the primary colors used throughout the UI
+@ui-background: #fff0f5;
+@ui-foreground: #d87093;
+@ui-accent: #ff69b4;
+@ui-accent-light: #ff77a8;
+@ui-border: #ffd6e0;
+@ui-selection: #ffb6c1;
+@ui-highlight: #ffb6c180;
+
+@syntax-comment: #e5a3b5;
+@syntax-string: #ff69b4;
+@syntax-constant: #c96385;
+@syntax-variable: #d87093;
+@syntax-keyword: #e35a8f;
+@syntax-function: #d45a88;
+@syntax-class: #ff77a8;
+@syntax-tag: #e35a8f;
+@syntax-attribute: #ff77a8;
+@syntax-type: #ff77a8;
+@syntax-storage: #e35a8f;
+@syntax-operator: #e35a8f;
+@syntax-parameter: #d87093;
+@syntax-property: #ff77a8;
+@syntax-punctuation: #d87093;
+@syntax-decorator: #c96385;

sakura-dreams-syntax/styles/editor.less

@@ -0,0 +1,57 @@
+// This defines styling rules for the editor.
+
+atom-text-editor {
+  background-color: @syntax-background-color;
+  color: @syntax-text-color;
+  font-family: 'OpenDyslexicM Nerd Font', sans-serif;
+
+  .wrap-guide {
+    background-color: @syntax-wrap-guide-color;
+  }
+
+  .indent-guide {
+    color: @syntax-indent-guide-color;
+  }
+
+  .invisible-character {
+    color: @syntax-invisible-character-color;
+  }
+
+  .gutter {
+    background-color: @syntax-gutter-background-color;
+    color: @syntax-gutter-text-color;
+
+    .line-number {
+      &.cursor-line {
+        background-color: @syntax-gutter-background-color-selected;
+        color: @syntax-gutter-text-color-selected;
+      }
+
+      &.cursor-line-no-selection {
+        color: @syntax-gutter-text-color-selected;
+      }
+    }
+  }
+
+  .gutter .line-number.folded,
+  .gutter .line-number:after,
+  .fold-marker:after {
+    color: @syntax-gutter-text-color;
+  }
+
+  .invisible {
+    color: @syntax-text-color;
+  }
+
+  .cursor {
+    color: @syntax-cursor-color;
+  }
+
+  .selection .region {
+    background-color: @syntax-selection-color;
+  }
+}
+
+atom-text-editor[mini] .scroll-view {
+  padding-left: 1px;
+}

sakura-dreams-syntax/styles/syntax-variables.less

@@ -0,0 +1,42 @@
+@import "colors";
+
+// This file defines variables used for syntax highlighting
+// These variables are exported for use in base.less and syntax.less
+
+@syntax-text-color: @foreground;
+@syntax-background-color: @background;
+@syntax-cursor-color: #ff69b4;
+@syntax-selection-color: #ffb6c1;
+@syntax-selection-flash-color: #ffb6c1;
+@syntax-wrap-guide-color: #ffe4e8;
+@syntax-indent-guide-color: #ffe4e8;
+@syntax-invisible-character-color: #ffe4e8;
+@syntax-result-marker-color: rgba(255, 105, 180, 0.3);
+@syntax-result-marker-color-selected: rgba(255, 105, 180, 0.8);
+
+@syntax-gutter-text-color: #e5a3b5;
+@syntax-gutter-text-color-selected: #d87093;
+@syntax-gutter-background-color: #ffefef;
+@syntax-gutter-background-color-selected: #fff0f5;
+
+// For git diff info. i.e. in the gutter
+@syntax-color-renamed: #db7093;
+@syntax-color-added: #ff69b4;
+@syntax-color-modified: #ffb6c1;
+@syntax-color-removed: #ff1493;
+
+// For language entity colors
+@syntax-color-variable: @syntax-variable;
+@syntax-color-comment: @syntax-comment;
+@syntax-color-constant: @syntax-constant;
+@syntax-color-property: @syntax-property;
+@syntax-color-value: @syntax-string;
+@syntax-color-function: @syntax-function;
+@syntax-color-method: @syntax-function;
+@syntax-color-class: @syntax-class;
+@syntax-color-keyword: @syntax-keyword;
+@syntax-color-tag: @syntax-tag;
+@syntax-color-attribute: @syntax-attribute;
+@syntax-color-import: @syntax-keyword;
+@syntax-color-snippet: @syntax-string;
+@syntax-color-string: @syntax-string;

sakura-dreams-syntax/styles/syntax.less

@@ -0,0 +1,142 @@
+// This should go in styles/syntax.less
+// This file styles syntax highlighting in editors
+
+@import "syntax-variables";
+
+atom-text-editor {
+  .syntax--comment {
+    color: @syntax-comment;
+    font-style: italic;
+  }
+
+  .syntax--string {
+    color: @syntax-string;
+  }
+
+  .syntax--constant {
+    &.syntax--numeric,
+    &.syntax--language,
+    &.syntax--character.syntax--escape,
+    &.syntax--other {
+      color: @syntax-constant;
+    }
+  }
+
+  .syntax--variable {
+    color: @syntax-variable;
+
+    &.syntax--parameter {
+      color: @syntax-parameter;
+    }
+
+    &.syntax--property {
+      color: @syntax-property;
+    }
+  }
+
+  .syntax--keyword {
+    color: @syntax-keyword;
+
+    &.syntax--operator {
+      color: @syntax-operator;
+    }
+
+    &.syntax--control {
+      color: @syntax-keyword;
+    }
+
+    &.syntax--other {
+      color: @syntax-keyword;
+    }
+  }
+
+  .syntax--storage {
+    color: @syntax-storage;
+  }
+
+  .syntax--entity {
+    &.syntax--name.syntax--function {
+      color: @syntax-function;
+    }
+
+    &.syntax--name.syntax--type,
+    &.syntax--name.syntax--class,
+    &.syntax--name.syntax--struct,
+    &.syntax--name.syntax--enum,
+    &.syntax--name.syntax--union,
+    &.syntax--name.syntax--trait,
+    &.syntax--name.syntax--interface {
+      color: @syntax-class;
+      font-weight: bold;
+    }
+
+    &.syntax--name.syntax--tag {
+      color: @syntax-tag;
+    }
+
+    &.syntax--other.syntax--attribute-name {
+      color: @syntax-attribute;
+    }
+  }
+
+  .syntax--meta {
+    &.syntax--decorator {
+      color: @syntax-decorator;
+    }
+
+    &.syntax--object-literal.syntax--key {
+      color: @syntax-property;
+    }
+  }
+
+  .syntax--punctuation {
+    color: @syntax-punctuation;
+
+    &.syntax--definition.syntax--comment {
+      color: @syntax-comment;
+    }
+
+    &.syntax--definition.syntax--tag {
+      color: @syntax-tag;
+    }
+  }
+
+  .syntax--support {
+    &.syntax--class,
+    &.syntax--type {
+      color: @syntax-class;
+    }
+
+    &.syntax--function {
+      color: @syntax-function;
+    }
+
+    &.syntax--constant {
+      color: @syntax-constant;
+    }
+
+    &.syntax--variable.syntax--property {
+      color: @syntax-property;
+    }
+  }
+
+  .syntax--markup {
+    &.syntax--heading {
+      color: @syntax-function;
+      font-weight: bold;
+    }
+
+    &.syntax--bold {
+      font-weight: bold;
+    }
+
+    &.syntax--italic {
+      font-style: italic;
+    }
+
+    &.syntax--raw,
+    &.syntax--inline.syntax--raw {
+      color: @syntax-string;
+    }
+  }
+}

sakura-dreams-ui/index.less

@@ -0,0 +1,25 @@
+// UI Theme
+// -------------------
+
+// This is the main file that imports all the Less files from the `/styles` directory.
+
+// For more infos about creating themes, check out:
+// https://pulsar-edit.dev/docs/launch-manual/sections/core-hacking/#creating-a-theme
+
+@import "styles/ui-variables";
+
+@import "styles/base";
+@import "styles/buttons";
+@import "styles/editor";
+@import "styles/find-and-replace";
+@import "styles/git";
+@import "styles/key-binding";
+@import "styles/lists";
+@import "styles/panels";
+@import "styles/progress";
+@import "styles/sites";
+@import "styles/status-bar";
+@import "styles/tabs";
+@import "styles/text";
+@import "styles/tooltips";
+@import "styles/tree-view";

sakura-dreams-ui/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "sakura-dreams-ui",
+  "theme": "ui",
+  "version": "0.0.0",
+  "description": "A short description of your UI theme",
+  "keywords": [
+    "ui",
+    "theme"
+  ],
+  "repository": "https://github.com/pulsar-edit/ui-theme-template",
+  "license": "MIT",
+  "engines": {
+    "atom": ">=1.0.0 <2.0.0"
+  }
+}

sakura-dreams-ui/styles/base.less

@@ -0,0 +1,22 @@
+
+// Base
+// -------------------
+
+// Used for global styles
+// Or to override certain Pulsar core styles
+
+// -------------------
+
+
+body {
+  font-size: @font-size;
+  color: @text-color;
+  background-color: @app-background-color;
+}
+
+atom-pane {
+  border-right: 1px solid @base-border-color;
+  &:last-child {
+    border-right: none;
+  }
+}

sakura-dreams-ui/styles/buttons.less

@@ -0,0 +1,63 @@
+
+// Buttons
+// -------------------
+
+// Overrides: atom/atom/static/buttons.less
+
+
+.btn {
+  color: @button-text-color;
+  background-color: @button-background-color;
+  &:hover,
+  &:focus {
+    color: @button-text-color;
+    background-color: @button-background-color-hover;
+  }
+  &:active {
+    color: @button-text-color;
+    background-color: darken(@button-background-color, 2%);
+  }
+  &.selected {
+    color: @button-text-color;
+    background-color: @button-background-color-selected;
+  }
+  &:focus,
+  &:focus:active {
+    outline: none;
+  }
+}
+
+
+// Colored buttons -----------------------
+
+.btn.btn-primary { .btn-color(@background-color-info); }
+.btn.btn-info    { .btn-color(@background-color-info); }
+.btn.btn-success { .btn-color(@background-color-success); }
+.btn.btn-warning { .btn-color(@background-color-warning); }
+.btn.btn-error   { .btn-color(@background-color-error); }
+
+.btn-color(@bg) {
+  color: @text-color-selected;
+  background-color: @bg;
+  &:hover,
+  &:focus {
+    background-color: lighten(@bg, 4%);
+  }
+  &:active {
+    background-color: darken(@bg, 4%);
+  }
+  &.selected {
+    background-color: lighten(@bg, 4%);
+  }
+  &.selected:focus,
+  &.selected:hover {
+    background-color: lighten(@bg, 8%);
+  }
+}
+
+
+// Button Group -----------------------
+
+.btn-group > .btn {
+  border-color: hsla(0,0%,0%,.2);
+}

sakura-dreams-ui/styles/editor.less

@@ -0,0 +1,24 @@
+
+// Mini Editor
+// -------------------
+
+// Mini Editors are the "text inputs" used in find+replace or in the settings.
+
+
+atom-text-editor[mini] {
+  padding-left: @component-padding/2;
+  color: @text-color;
+  border-radius: @component-border-radius;
+  background-color: @input-background-color;
+
+  &.is-focused {
+    background-color: darken(@input-background-color, 5%);
+  }
+
+  .placeholder-text {
+    color: @text-color-subtle;
+  }
+  .selection .region {
+    background-color: @background-color-selected;
+  }
+}

sakura-dreams-ui/styles/find-and-replace.less

@@ -0,0 +1,10 @@
+
+// Find + Replace
+// -------------------
+
+// Find and replace in the current buffer or across the entire project.
+// Overrides: pulsar-edit/find-and-replace
+
+.find-and-replace {
+  border-top: 1px solid @base-border-color;
+}

sakura-dreams-ui/styles/git.less

@@ -0,0 +1,12 @@
+
+// Git
+// -------------------
+
+// Used to color git status
+
+.status          { color: @text-color; }
+.status-added    { color: @text-color-success; } // green
+.status-ignored  { color: @text-color-subtle; }  // faded
+.status-modified { color: @text-color-warning; } // orange
+.status-removed  { color: @text-color-error; }   // red
+.status-renamed  { color: @text-color-info; }    // blue

sakura-dreams-ui/styles/key-binding.less

@@ -0,0 +1,19 @@
+
+// Key Binding
+// -------------------
+
+// Styles key-bindings used in a Select List
+// Overrides: Bootstrap's `kbd`.
+
+
+.key-binding {
+  display: inline-block;
+  margin-left: 1px;
+  padding: 0 @component-padding/2;
+  line-height: 2;
+  font-family: 'Helvetica Neue', Arial, sans-serif;
+  font-size: .8em;
+  letter-spacing: 1px;
+  border-radius: @component-border-radius;
+  background-color: @app-background-color;
+}

sakura-dreams-ui/styles/lists.less

@@ -0,0 +1,64 @@
+
+// Lists
+// -------------------
+
+// Used in different places, like the Tree View, Commmand Palette etc.
+// Overrides: pulsar/static/atom-ui/styles/lists.less
+
+// List Group -------------------
+.list-group {
+  li {
+    padding-left: @component-padding/2;
+
+    // We want to highlight the background of the list items because we dont know their size.
+    &.selected {
+      color: @text-color-selected;
+      background-color: @background-color-selected;
+      &:before{ display: none; }
+    }
+  }
+}
+
+
+// List Tree -------------------
+.list-tree {
+  color: @text-color;
+  .selected {
+    color: @text-color-selected;
+  }
+}
+
+
+// Select List -------------------
+.select-list {
+  li {
+    padding: @component-padding/2 @component-padding;
+  }
+  .status {
+    float: right;
+  }
+}
+
+
+// Popover List -------------------
+// Used as a popover for something like autocomplete.
+.select-list.popover-list {
+  @popover-list-padding: @component-padding/2;
+
+  padding: @popover-list-padding;
+  border-radius: @component-border-radius;
+  background-color: @overlay-background-color;
+  box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
+
+  .list-group {
+    margin-top: @popover-list-padding;
+    li {
+      padding-left: @popover-list-padding;
+    }
+  }
+}
+
+// Select menus
+select {
+  color: @button-text-color !important;
+}

sakura-dreams-ui/styles/panels.less

@@ -0,0 +1,27 @@
+
+// Panels
+// -------------------
+
+// Overrides: pulsar/static/atom-ui/styles/panels.less
+
+.panel-heading {
+  border-bottom: 1px solid @panel-heading-border-color;
+  background-color: @panel-heading-background-color;
+}
+
+.inset-panel {
+  background-color: @inset-panel-background-color;
+  .panel-heading {
+    background-color: lighten(@inset-panel-background-color, 4%);
+  }
+}
+
+
+// Modal -------------------
+// Used on top of the editor, like the Command Palette.
+
+atom-panel.modal {
+  border: 1px solid @overlay-border-color;
+  border-top: none;
+  box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
+}

sakura-dreams-ui/styles/progress.less

@@ -0,0 +1,26 @@
+
+// Progress
+// -------------------
+
+// The `progress` element is unstyled and defined by the OS.
+// See https://css-tricks.com/html5-progress-element/ in case you want to customize it.
+
+
+// Spinner -------------------
+
+.loading-spinner-large  { .loading-spinner(64px); }
+.loading-spinner-medium { .loading-spinner(48px); }
+.loading-spinner-small  { .loading-spinner(32px); }
+.loading-spinner-tiny   { .loading-spinner(16px); }
+
+.loading-spinner(@size) {
+  display: block;
+  width: @size;
+  height: @size;
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: @size @size;
+  &.inline-block {
+    display: inline-block;
+  }
+}

sakura-dreams-ui/styles/sites.less

@@ -0,0 +1,11 @@
+
+// Site Colors
+// -------------------
+
+// Used when a few different/random colors are needed.
+
+.ui-site-1 { background-color: @ui-site-color-1; }
+.ui-site-2 { background-color: @ui-site-color-2; }
+.ui-site-3 { background-color: @ui-site-color-3; }
+.ui-site-4 { background-color: @ui-site-color-4; }
+.ui-site-5 { background-color: @ui-site-color-5; }

sakura-dreams-ui/styles/status-bar.less

@@ -0,0 +1,14 @@
+
+// Status Bar
+// -------------------
+
+// Located at the bottom.
+// Displays information about the current editor.
+// Overrides: pulsar-edit/status-bar
+
+.status-bar {
+  font-size: @font-size;
+  color: @text-color;
+  border-top: 1px solid @base-border-color;
+  background-color: @tree-view-background-color;
+}

sakura-dreams-ui/styles/tabs.less

@@ -0,0 +1,57 @@
+
+// Tabs
+// -------------------
+
+// Displays selectable tabs above the editor.
+// Overrides: pulsar-edit/tabs
+
+.tab-bar {
+  background-color: @tab-bar-background-color;
+  border-bottom: 1px solid @base-border-color;
+
+  .tab {
+    color: @text-color;
+    height: @tab-height;
+    line-height: @tab-height;
+    font-size: @font-size;
+    border-right: 1px solid @tab-border-color;
+    background-color: @tab-background-color;
+    &.active {
+      color: @text-color-selected;
+      background-color: @tab-background-color-active;
+    }
+
+
+    // Modified Icon (the circle) -------------------
+    &.modified:not(:hover) .close-icon {
+      top: 50%;
+      right: @component-padding + 4px; // 4px -> half of icon size
+      margin-top: -3px;
+      border-color: @text-color-info;
+    }
+    &.modified:hover .close-icon {
+      color: currentColor;
+    }
+
+
+    // Close Icon (the X) -------------------
+    .close-icon:hover {
+      color: @text-color-selected;
+    }
+    &.active .close-icon:hover {
+      color: @text-color;
+    }
+
+
+    // Dragging -------------------
+    // Styles get applied while dragging a tab
+    &.is-dragging {
+      background: darken(@tab-background-color, 10%);
+      border-color: transparent;
+      opacity: .5;
+      & .close-icon {
+        visibility: hidden;
+      }
+    }
+  }
+}

sakura-dreams-ui/styles/text.less

@@ -0,0 +1,40 @@
+
+// Text
+// -------------------
+
+.text-smaller {
+  font-size: smaller;
+}
+
+.text-subtle    { color: @text-color-subtle; }
+.text-highlight { color: @text-color-highlight; }
+
+.text-info    { color: @text-color-info; }
+.text-success { color: @text-color-success; }
+.text-warning { color: @text-color-warning; }
+.text-error   { color: @text-color-error; }
+
+
+// Highlights ---------------
+
+.highlight         { .highlight-mixin(@background-color-highlight); }
+.highlight-info    { .highlight-mixin(@background-color-info); }
+.highlight-warning { .highlight-mixin(@background-color-warning); }
+.highlight-error   { .highlight-mixin(@background-color-error); }
+.highlight-success { .highlight-mixin(@background-color-success); }
+
+.highlight-mixin(@color) {
+  padding: 1px 4px;
+  color: @text-color-highlight;
+  border-radius: @component-border-radius;
+  background-color: @color;
+}
+
+
+// Background Message ---------------
+// Shown when no tabs are open.
+
+.background-message {
+  font-weight: bold;
+  color: @text-color-subtle;
+}

sakura-dreams-ui/styles/tooltips.less

@@ -0,0 +1,23 @@
+
+// Tooltips
+// -------------------
+
+// Overrides: Bootstrap's `.tooltip`.
+
+
+.tooltip {
+  .tooltip-inner {
+    line-height: 1;
+    padding: .75em;
+    white-space: nowrap;
+    max-width: none;
+  }
+
+  .keystroke {
+    padding: .15em .4em;
+    margin: 0 -.3em 0 .25em;
+    border-radius: max(2px, @component-border-radius / 2);
+    color: @text-color-selected;
+    background: @background-color-selected;
+  }
+}

sakura-dreams-ui/styles/tree-view.less

@@ -0,0 +1,20 @@
+
+// Tree View
+// -------------------
+
+// Used to explore and open files in the current project.
+// Overrides: pulsar-edit/tree-view
+
+
+.tree-view-resizer {
+  border-right: 1px solid @base-border-color;
+}
+
+.tree-view {
+  color: @text-color;
+  background-color: @tree-view-background-color;
+
+  .list-item.selected {
+    color: @text-color-selected;
+  }
+}

sakura-dreams-ui/styles/ui-variables.less

@@ -0,0 +1,90 @@
+// UI Variables
+// -------------------
+
+// These are the official UI variables that every UI theme should define.
+// It allows other packages to match your theme.
+
+// Overrides: pulsar/static/variables/ui-variables.less
+
+// Text Colors
+@text-color:           #d87093; // Palevioletred for main text
+@text-color-subtle:    #e5a3b5; // Lighter pink for subtle text
+@text-color-highlight: #ff77a8; // Brighter pink for highlights
+@text-color-selected:  #d87093; // Hot pink for selected text
+
+@text-color-info:    #c96385; // Dusty pink for info
+@text-color-success: #ff69b4; // Hot pink for success
+@text-color-warning: #ffb6c1; // Light pink for warning
+@text-color-error:   #ff1493; // Deep pink for error
+
+// Background colors
+@background-color-info:    #ffd6e0;
+@background-color-success: #ffb6c1;
+@background-color-warning: #ffa6c9;
+@background-color-error:   #ff85a2;
+
+@background-color-highlight: lighten(@base-background-color, 3%);
+@background-color-selected:  lighten(@base-background-color, 5%);
+@app-background-color:       #ffefef; // Same as editor background
+
+// Base colors
+@base-background-color: #fff0f5; // Lavender blush for UI base
+@base-border-color:     #ffd6e0; // Light pink for borders
+
+// Component colors
+@pane-item-background-color: #ffefef; // Light pink background for panes
+@pane-item-border-color:     @base-border-color;
+
+@input-background-color: #fff0f5; // Lavender blush for input
+@input-border-color:     #ffd6e0; // Light pink border
+
+@tool-panel-background-color: @base-background-color;
+@tool-panel-border-color:     @base-border-color;
+
+@inset-panel-background-color: #ffefef; // Light pink for inset panels
+@inset-panel-border-color:     @base-border-color;
+
+@panel-heading-background-color: #ffd6e0; // Pink header background
+@panel-heading-border-color:     @base-border-color;
+
+@overlay-background-color: #fff0f5; // Lavender blush for overlays
+@overlay-border-color:     @base-border-color;
+
+@button-text-color:                #fff0f5;
+@button-background-color:          #ff69b4; // Hot pink for buttons
+@button-background-color-hover:    #ff77a8; // Lighter pink on hover
+@button-background-color-selected: #ff77a8; // Lighter pink when selected
+@button-border-color:              #ff69b4; // Hot pink border
+
+@tab-bar-background-color:    #ffe4e8; // Very light pink for tab bar
+@tab-bar-border-color:        @base-border-color;
+@tab-background-color:        #ffd6e0; // Light pink for inactive tabs
+@tab-background-color-active: #ffefef; // White-pink for active tab
+@tab-border-color:            @base-border-color;
+
+@tree-view-background-color: #fff0f5; // Lavender blush for tree view
+@tree-view-border-color:     @base-border-color;
+
+// Site colors
+@ui-site-color-1: #d45a88; // Darker pink (function color)
+@ui-site-color-2: #ff69b4; // Hot pink (string color)
+@ui-site-color-3: #e35a8f; // Medium pink (keyword color)
+@ui-site-color-4: #ff77a8; // Bright pink (class color)
+@ui-site-color-5: #c96385; // Dusty pink (constant color)
+
+// Sizes
+@font-size: 12px;
+@input-font-size: 14px;
+
+@disclosure-arrow-size: 12px;
+
+@component-padding: 10px;
+@component-icon-padding: 5px;
+@component-icon-size: 16px;
+@component-line-height: 25px;
+
+@tab-height: 30px;
+
+// Misc
+@component-border-radius: 4px; // Slightly rounder corners
+@font-family: 'OpenDyslexicM Nerd Font', sans-serif;