@phantompixeldev/retrocss 2.3.0 → 2.5.0

package/dist/retro.css

@@ -349,6 +349,7 @@
   --retro-line-height: 1.5;
   --retro-line-height-tight: 1.25;
   --retro-font-weight-normal: 400;
+  --retro-font-weight-medium: 600;
   --retro-font-weight-bold: 700;
   --retro-measure: 70ch;
   --retro-spacing-xxs: 2px; /* Fallback for IE11 */
@@ -370,6 +371,7 @@
   --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.15); /* Fallback for IE11 */
   --retro-shadow-light: #ffffff;
   --retro-box-shadow-outset-button: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff;
+  --retro-shadow-rgb: 0, 0, 0;
   --retro-box-shadow-inset: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000;
   --retro-z-index-base: 1;
   --retro-z-index-dropdown: 1000;
@@ -436,19 +438,19 @@
 
 [data-theme=dark] {
   color-scheme: dark;
-  --retro-body-bg: #181818;
-  --retro-bg: #232323;
+  --retro-body-bg: #2b2b2b;
+  --retro-bg: #3a3a3a;
   --retro-primary: #4a90e2;
   --retro-primary-rgb: 74, 144, 226;
-  --retro-light: #222;
-  --retro-white: #232323;
+  --retro-light: #454545;
+  --retro-white: #3a3a3a;
   --retro-black: #fff;
-  --retro-white-rgb: 35, 35, 35;
+  --retro-white-rgb: 58, 58, 58;
   --retro-black-rgb: 255, 255, 255;
-  --retro-light-rgb: 34, 34, 34;
-  --retro-border-light: #444;
-  --retro-border-medium: #666;
-  --retro-border-dark: #888;
+  --retro-light-rgb: 69, 69, 69;
+  --retro-border-light: #909090;
+  --retro-border-medium: #262626;
+  --retro-border-dark: #151515;
   --retro-success: #2ecc71;
   --retro-success-rgb: 46, 204, 113;
   --retro-warning: #f39c12;
@@ -487,54 +489,54 @@
   --retro-silver-rgb: 189, 195, 199;
   --retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
   --retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.4);
-  --retro-card-bg: #23242a;
+  --retro-card-bg: #3a3a3a;
   --retro-card-header-bg: #1a237e;
   --retro-card-header-text: #fff;
-  --retro-card-content-bg: #23242a;
-  --retro-card-content-text: #f3f3f3;
-  --retro-card-footer-bg: #23242a;
-  --retro-card-footer-text: #f3f3f3;
-  --retro-modal-bg: #23242a;
+  --retro-card-content-bg: #333333;
+  --retro-card-content-text: #f2f2f2;
+  --retro-card-footer-bg: #3a3a3a;
+  --retro-card-footer-text: #f2f2f2;
+  --retro-modal-bg: #3a3a3a;
   --retro-modal-header-bg: #1a237e;
   --retro-modal-header-text: #fff;
-  --retro-table-bg: #23242a;
-  --retro-table-header-bg: #23242a;
-  --retro-table-header-text: #f3f3f3;
-  --retro-table-striped-bg: #26282e;
-  --retro-input-bg: #23242a;
-  --retro-input-text: #f3f3f3;
-  --retro-sidebar-bg: #202124;
-  --retro-sidebar-text: #f3f3f3;
-  --retro-dropdown-bg: #23242a;
-  --retro-dropdown-text: #f3f3f3;
-  --retro-list-bg: #23242a;
-  --retro-list-text: #f3f3f3;
-  --retro-progress-bg: #23242a;
+  --retro-table-bg: #333333;
+  --retro-table-header-bg: #3a3a3a;
+  --retro-table-header-text: #f2f2f2;
+  --retro-table-striped-bg: #3f3f3f;
+  --retro-input-bg: #2e2e2e;
+  --retro-input-text: #f2f2f2;
+  --retro-sidebar-bg: #333333;
+  --retro-sidebar-text: #f2f2f2;
+  --retro-dropdown-bg: #3a3a3a;
+  --retro-dropdown-text: #f2f2f2;
+  --retro-list-bg: #333333;
+  --retro-list-text: #f2f2f2;
+  --retro-progress-bg: #2e2e2e;
   --retro-progress-bar-bg: #4a90e2;
-  --retro-alert-bg: #23242a;
-  --retro-alert-text: #f3f3f3;
-  --retro-badge-bg: #444;
+  --retro-alert-bg: #3a3a3a;
+  --retro-alert-text: #f2f2f2;
+  --retro-badge-bg: #4a4a4a;
   --retro-badge-text: #fff;
-  --retro-toast-bg: #2f2f22;
-  --retro-toast-text: #f3f3f3;
-  --retro-primary-text: #4b91e2;
-  --retro-success-text: #2ecc71;
-  --retro-danger-text: #ea6456;
-  --retro-warning-text: #f39c12;
-  --retro-info-text: #3498db;
-  --retro-teal-text: #1abc9c;
+  --retro-toast-bg: #3a3a3a;
+  --retro-toast-text: #f2f2f2;
+  --retro-primary-text: #8fbaed;
+  --retro-success-text: #31d074;
+  --retro-danger-text: #f3a29a;
+  --retro-warning-text: #f4a72b;
+  --retro-info-text: #7ebee8;
+  --retro-teal-text: #1cceab;
   --retro-tan-text: #d4b483;
-  --retro-pink-text: #eb59a0;
-  --retro-lime-text: #00b894;
+  --retro-pink-text: #f39dc6;
+  --retro-lime-text: #00cfa6;
   --retro-cyan-text: #00cec9;
-  --retro-orange-text: #e67e22;
-  --retro-brown-text: #af875e;
-  --retro-violet-text: #af7bc5;
-  --retro-gray-text: #95a5a6;
-  --retro-maroon-text: #dc6e62;
+  --retro-orange-text: #eea869;
+  --retro-brown-text: #ccb399;
+  --retro-violet-text: #ccabda;
+  --retro-gray-text: #adb9ba;
+  --retro-maroon-text: #e9a69f;
   --retro-gold-text: #f1c40f;
-  --retro-navy-text: #7292b1; /* fill is 1.41:1 as text -- worst case in the framework */
-  --retro-olive-text: #859192;
+  --retro-navy-text: #a5b9cd; /* fill is 1.41:1 as text -- worst case in the framework */
+  --retro-olive-text: #b1b9b9;
   --retro-silver-text: #bdc3c7;
   --retro-primary-fg: #000000;
   --retro-success-fg: #000000;
@@ -555,9 +557,9 @@
   --retro-navy-fg: #ffffff;
   --retro-olive-fg: #000000;
   --retro-silver-fg: #000000;
-  --retro-text: #f3f3f3;
-  --retro-text-muted: #a8a8a8;
-  --retro-text-inverse: #181818;
+  --retro-text: #f2f2f2;
+  --retro-text-muted: #b8b8b8;
+  --retro-text-inverse: #1a1a1a;
   --retro-primary-hover: #76abe9;
   --retro-primary-active: #2378db;
   --retro-success-hover: #54d98c;
@@ -597,18 +599,18 @@
   --retro-silver-hover: #d9dcde;
   --retro-silver-active: #a1aab0;
   --retro-primary-dark: #2378db;
-  --retro-gray-100: #2a2b31;
-  --retro-shadow-light: #444;
-  --retro-syntax-keyword: #569cd6;
-  --retro-syntax-string: #ce9178;
-  --retro-syntax-comment: #7ba05b;
+  --retro-gray-100: #454545;
+  --retro-shadow-light: #909090;
+  --retro-syntax-keyword: #6ba9db;
+  --retro-syntax-string: #d0967e;
+  --retro-syntax-comment: #8cad6f;
   --retro-syntax-function: #dcdcaa;
   --retro-syntax-number: #b5cea8;
   --retro-syntax-operator: #9cdcfe;
   --retro-syntax-variable: #d4d4d4;
   --retro-syntax-class: #4ec9b0;
   --retro-syntax-property: #9cdcfe;
-  --retro-syntax-tag: #569cd6;
+  --retro-syntax-tag: #6ba9db;
   --retro-syntax-attribute: #c8a2e0;
 }
 
@@ -647,14 +649,44 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* Vertical rhythm.
+   The reset above zeroes every margin, and nothing restored it for flow
+   content — so every paragraph, list and table in the framework sat flush
+   against the next one. Only .retro-prose had spacing. These are the base
+   defaults; components that manage their own spacing still override them. */
+p,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+figure,
+table {
+  margin-bottom: var(--retro-spacing-md);
+}
+
+li > ul,
+li > ol {
+  margin-bottom: 0;
+}
+
+/* A Win9x etched divider: one dark line with a light one under it. */
+hr {
+  height: 0;
+  margin: var(--retro-spacing-md) 0;
+  border: none;
+  border-top: 1px solid var(--retro-border-medium);
+  border-bottom: 1px solid var(--retro-border-light);
+}
+
 /* Links */
 a {
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
   text-decoration: none;
   transition: var(--retro-transition-base);
 }
 a:hover {
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
   text-decoration: underline;
 }
 a:focus {
@@ -950,7 +982,7 @@ h5, h6 {
   margin-bottom: 0.5rem;
   color: var(--retro-text);
   border: 2.5px double var(--retro-border-dark);
-  box-shadow: inset 0 2px 8px rgba(var(--retro-white-rgb), 0.53), 0 2px 0 rgba(var(--retro-black-rgb), 0.27);
+  box-shadow: inset 0 2px 8px var(--retro-border-light), 0 2px 0 rgba(var(--retro-shadow-rgb), 0.27);
   background: var(--retro-bg);
   display: flex;
   align-items: center;
@@ -966,7 +998,7 @@ h5, h6 {
   font-weight: var(--retro-font-weight-bold);
   letter-spacing: 0.5px;
   box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark), 2px 2px 0 rgba(var(--retro-black-rgb), 0.2);
-  text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.3);
+  text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.3);
   background: linear-gradient(to bottom, rgba(var(--retro-white-rgb), 0.1) 0%, rgba(var(--retro-white-rgb), 0) 100%);
   transform: translateZ(0);
   transition: transform 0.1s ease;
@@ -1142,7 +1174,7 @@ h5, h6 {
   text-fill-color: transparent;
   animation: rainbow-hue 3s linear infinite;
   font-weight: bold;
-  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-black-rgb), 0.13);
+  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-shadow-rgb), 0.13);
 }
 
 @keyframes rainbow-hue {
@@ -1174,7 +1206,7 @@ h5, h6 {
   color: transparent;
   text-fill-color: transparent;
   font-weight: var(--retro-font-weight-bold);
-  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-black-rgb), 0.13);
+  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-shadow-rgb), 0.13);
 }
 
 .retro-text-outline-strong {
@@ -1238,7 +1270,7 @@ h5, h6 {
   text-fill-color: transparent;
   font-weight: bold;
   -webkit-text-stroke: 1px var(--retro-border-dark);
-  text-shadow: 0 1px 2px var(--retro-bg), 0 2px 4px rgba(var(--retro-black-rgb), 0.53);
+  text-shadow: 0 1px 2px var(--retro-bg), 0 2px 4px rgba(var(--retro-shadow-rgb), 0.53);
 }
 
 .retro-text-fire {
@@ -1280,7 +1312,7 @@ h5, h6 {
 .retro-blockquote::before {
   content: '"';
   font-size: 2.5em;
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
   position: absolute;
   left: 0.3rem;
   top: -0.2rem;
@@ -1290,7 +1322,7 @@ h5, h6 {
 .retro-blockquote::after {
   content: '"';
   font-size: 2.5em;
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
   position: absolute;
   right: 0.3rem;
   bottom: -0.5rem;
@@ -1674,10 +1706,9 @@ h5, h6 {
 /* Retro Card - Win9x Style Only */
 .retro-card {
   background: var(--retro-card-bg);
-  border-top: 2px solid var(--retro-border-medium);
-  border-left: 2px solid var(--retro-border-medium);
-  border-right: 2px solid var(--retro-border-light);
-  border-bottom: 2px solid var(--retro-border-light);
+  border: 2px solid;
+  border-color: var(--retro-border-light) var(--retro-border-dark) var(--retro-border-dark) var(--retro-border-light);
+  box-shadow: inset 1px 1px 0 var(--retro-bg), inset -1px -1px 0 var(--retro-border-medium);
   font-family: var(--retro-font);
   margin-bottom: 24px;
   position: relative;
@@ -1752,7 +1783,7 @@ h5, h6 {
 .retro-form-group > label {
   display: block;
   margin-bottom: 4px;
-  font-weight: bold;
+  font-weight: var(--retro-font-weight-normal);
   color: var(--retro-input-text);
 }
 
@@ -2052,21 +2083,24 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-input-icon {
   position: relative;
-  display: flex;
-  align-items: center;
+  display: block;
   width: 100%;
 }
 .retro-input-icon > .retro-input,
-.retro-input-icon > input {
+.retro-input-icon > input,
+.retro-input-icon > .retro-select,
+.retro-input-icon > select {
   width: 100%;
   padding-left: 2.2em;
 }
-.retro-input-icon > :first-child:not(input):not(.retro-input) {
+.retro-input-icon > :first-child:not(input):not(select):not(.retro-input):not(.retro-select) {
   position: absolute;
+  top: 0.55em;
   left: 0.6em;
   pointer-events: none;
   color: var(--retro-text-muted);
   line-height: 1;
+  z-index: 1;
 }
 
 .retro-file-input {
@@ -2090,11 +2124,22 @@ input[type=radio].retro-input:focus-visible {
   box-shadow: var(--retro-border-sunken);
   font-family: var(--retro-font);
   font-size: var(--retro-font-size);
+  margin: 0;
+  list-style: none;
+  overflow-y: auto;
 }
-.retro-listbox option {
+.retro-listbox option,
+.retro-listbox li {
+  display: block;
   padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
+  list-style: none;
 }
-.retro-listbox option:checked {
+.retro-listbox li + li {
+  border-top: 1px solid var(--retro-border-light);
+}
+.retro-listbox option:checked,
+.retro-listbox li[aria-selected=true],
+.retro-listbox li.active {
   background: var(--retro-primary);
   color: var(--retro-primary-fg);
 }
@@ -2514,7 +2559,7 @@ input[type=radio].retro-input:focus-visible {
 }
 
 .retro-toast {
-  box-shadow: 2px 4px 16px rgba(var(--retro-black-rgb), 0.18), 1px 1px 0 var(--retro-border-light), 2px 2px 0 var(--retro-border-medium);
+  box-shadow: 2px 4px 16px rgba(var(--retro-shadow-rgb), 0.18), 1px 1px 0 var(--retro-border-light), 2px 2px 0 var(--retro-border-medium);
   border-width: 1.5px;
   margin-bottom: 0.75em;
   animation: retro-toast-fadein 0.3s;
@@ -2752,8 +2797,7 @@ input[type=radio].retro-input:focus-visible {
   margin: 1.75rem auto;
   background: var(--retro-modal-bg);
   border: 2px solid var(--retro-border-dark);
-  box-shadow: 4px 4px 8px rgba(var(--retro-black-rgb), 0.5), inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
-  border-radius: 4px !important;
+  box-shadow: 4px 4px 8px rgba(var(--retro-shadow-rgb), 0.5), inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
   font-family: var(--retro-font-heading);
   transition: none;
   text-align: left;
@@ -2769,14 +2813,13 @@ input[type=radio].retro-input:focus-visible {
   border-top: 2px solid var(--retro-border-light);
   border-bottom: 2px solid var(--retro-border-dark);
   border-left: 8px solid var(--retro-modal-header-bg);
-  border-radius: 4px 4px 0 0 !important;
   font-family: var(--retro-font-heading);
   font-size: var(--retro-font-size-lg);
   font-weight: bold;
   line-height: 1.5;
   user-select: none;
   letter-spacing: 0.5px;
-  text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.8), 0 1px 0 rgba(var(--retro-black-rgb), 0.8);
+  text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.8), 0 1px 0 rgba(var(--retro-shadow-rgb), 0.8);
 }
 .retro-modal-close-floating {
   position: absolute;
@@ -2801,7 +2844,6 @@ input[type=radio].retro-input:focus-visible {
   color: var(--retro-text);
   text-shadow: none;
   cursor: pointer;
-  border-radius: 2px;
   font-family: inherit;
   transition: background 0.1s, border 0.1s;
 }
@@ -2880,7 +2922,7 @@ input[type=radio].retro-input:focus-visible {
   font-weight: bold;
   margin: 0;
   font-family: inherit;
-  text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.8), 0 1px 0 rgba(var(--retro-black-rgb), 0.8);
+  text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.8), 0 1px 0 rgba(var(--retro-shadow-rgb), 0.8);
 }
 
 /* RetroCSS - A Retro-Inspired CSS Framework */
@@ -2926,8 +2968,8 @@ input[type=radio].retro-input:focus-visible {
   transition: none;
 }
 .retro-nav-item:hover, .retro-tab:hover {
-  background: var(--retro-white);
-  color: var(--retro-primary);
+  background: var(--retro-light);
+  color: var(--retro-primary-text);
 }
 .retro-nav-item.active, .active.retro-tab {
   background: var(--retro-primary);
@@ -2987,8 +3029,8 @@ input[type=radio].retro-input:focus-visible {
   text-shadow: none;
 }
 .retro-tab:hover:not(.active) {
-  background: var(--retro-border-light);
-  color: var(--retro-primary);
+  background: var(--retro-light);
+  color: var(--retro-primary-text);
 }
 
 .retro-nav-tabs {
@@ -3191,14 +3233,14 @@ input[type=radio].retro-input:focus-visible {
 }
 .retro-nav-underlined .retro-nav-item:hover, .retro-nav-underlined .retro-tab:hover {
   background: transparent;
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
 }
 .retro-nav-underlined .retro-nav-item:hover:after, .retro-nav-underlined .retro-tab:hover:after {
   background: rgba(var(--retro-primary-rgb), 0.3);
 }
 .retro-nav-underlined .retro-nav-item.active, .retro-nav-underlined .active.retro-tab {
   background: transparent;
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
   font-weight: normal;
 }
 .retro-nav-underlined .retro-nav-item.active:after, .retro-nav-underlined .active.retro-tab:after {
@@ -3355,7 +3397,7 @@ input[type=radio].retro-input:focus-visible {
   padding: 2px 10px;
   font-size: var(--retro-font-size-sm);
   font-family: var(--retro-font-heading);
-  font-weight: var(--retro-font-weight-bold);
+  font-weight: var(--retro-font-weight-medium);
   letter-spacing: 0.3px;
   text-transform: uppercase;
   color: var(--retro-badge-text);
@@ -3570,7 +3612,7 @@ input[type=radio].retro-input:focus-visible {
 
 .retro-badge-pixel {
   font-family: var(--retro-font-heading);
-  font-weight: var(--retro-font-weight-bold);
+  font-weight: var(--retro-font-weight-medium);
   image-rendering: pixelated;
   border: 2px solid var(--retro-border-dark);
   border-radius: 0;
@@ -3701,7 +3743,7 @@ input[type=radio].retro-input:focus-visible {
 }
 
 .retro-breadcrumb {
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -4131,7 +4173,7 @@ input[type=radio].retro-input:focus-visible {
   font-size: var(--retro-font-size-sm);
   border-radius: 4px;
   white-space: nowrap;
-  box-shadow: 3px 3px 0 rgba(var(--retro-black-rgb), 0.2);
+  box-shadow: 3px 3px 0 rgba(var(--retro-shadow-rgb), 0.2);
   z-index: 1050;
   pointer-events: none;
   opacity: 0;
@@ -4302,7 +4344,7 @@ input[type=radio].retro-input:focus-visible {
   background: var(--retro-list-bg);
   color: var(--retro-list-text);
   border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(var(--retro-black-rgb), 0.04);
+  box-shadow: 0 1px 4px rgba(var(--retro-shadow-rgb), 0.04);
 }
 .retro-list li {
   padding: var(--retro-spacing-sm) var(--retro-spacing-md);
@@ -4338,7 +4380,7 @@ input[type=radio].retro-input:focus-visible {
 .retro-list-bordered {
   border: 1px solid var(--retro-border-medium);
   background: var(--retro-white);
-  box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.03);
+  box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.03);
 }
 .retro-list-bordered li {
   border-bottom: 1px solid var(--retro-border-light);
@@ -4358,7 +4400,7 @@ input[type=radio].retro-input:focus-visible {
 .retro-list-hover li:hover, .retro-list-hover li:focus-visible {
   background-color: var(--retro-primary);
   color: var(--retro-white);
-  box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.06);
+  box-shadow: 0 2px 8px rgba(var(--retro-shadow-rgb), 0.06);
   outline: none;
 }
 
@@ -4395,7 +4437,7 @@ ol.retro-list li::before {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 2px rgba(var(--retro-black-rgb), 0.08);
+  box-shadow: 0 1px 2px rgba(var(--retro-shadow-rgb), 0.08);
   border: 2px solid var(--retro-border-dark);
 }
 ol.retro-list li ol.retro-list {
@@ -4424,7 +4466,7 @@ ol.retro-list li ol.retro-list li::before {
 dl.retro-list dt {
   font-weight: bold;
   margin-top: var(--retro-spacing-sm);
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
 }
 dl.retro-list dd {
   margin-left: var(--retro-spacing-md);
@@ -4669,7 +4711,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
 
 .retro-infinite-item:hover {
   background: var(--retro-border-light);
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
 }
 
 .retro-infinite-loader {
@@ -4711,7 +4753,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
   letter-spacing: 2px;
   background: var(--retro-bg);
   border: 2px solid var(--retro-border-dark);
-  box-shadow: 2px 2px 8px rgba(var(--retro-black-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
+  box-shadow: 2px 2px 8px rgba(var(--retro-shadow-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
   padding: 4px 16px;
   border-radius: 4px;
   filter: blur(0.2px);
@@ -4772,7 +4814,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
 }
 .retro-sidebar .active {
   font-weight: bold;
-  color: var(--retro-primary);
+  color: var(--retro-primary-text);
 }
 .retro-sidebar ul, .retro-sidebar ol {
   list-style: none;
@@ -4797,7 +4839,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
     margin: 16px;
     margin-right: 0;
     border-right: 2px solid var(--retro-border-medium);
-    box-shadow: 2px 0 5px rgba(var(--retro-black-rgb), 0.05);
+    box-shadow: 2px 0 5px rgba(var(--retro-shadow-rgb), 0.05);
   }
 }
 
@@ -6580,6 +6622,10 @@ input[type=datetime-local].retro-input.retro-input-sm {
   font-weight: var(--retro-font-weight-normal) !important;
 }
 
+.retro-font-medium {
+  font-weight: var(--retro-font-weight-medium) !important;
+}
+
 .retro-font-bold {
   font-weight: var(--retro-font-weight-bold) !important;
 }
@@ -6674,7 +6720,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
 }
 
 .retro-shadow-lg {
-  box-shadow: 3px 3px 0 var(--retro-border-medium), 0 4px 12px rgba(var(--retro-black-rgb), 0.18) !important;
+  box-shadow: 3px 3px 0 var(--retro-border-medium), 0 4px 12px rgba(var(--retro-shadow-rgb), 0.18) !important;
 }
 
 .retro-rounded {