Add nimbus colors that are used in pages. Check surface colors

Author: Oksamies

apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.css

@@ -15,7 +15,7 @@
     width: 17rem;
     padding: var(--space-12);
     border-radius: var(--radius-md);
-    background: var(--color-surface-3);
+    background: var(--color-surface-default);
   }
 
   .package-search__search {

apps/cyberstorm-remix/app/p/packageListing.css

@@ -89,7 +89,7 @@
     align-items: center;
     align-self: stretch;
     padding: var(--space-8) var(--space-12);
-    background: var(--color-surface-4);
+    background: var(--color-surface-default);
   }
 
   .package-listing-sidebar__label {
@@ -138,7 +138,7 @@
     align-self: stretch;
     padding: var(--space-16);
     border-radius: var(--radius-md);
-    background-color: var(--color-surface-4);
+    background-color: var(--color-surface-default);
   }
 
   .package-listing-sidebar__header {

apps/cyberstorm-remix/app/styles/colors.css

@@ -0,0 +1,13 @@
+@layer nimbus-colors {
+  :root {
+    --color-body-bg-color: var(--color-surface-2);
+    --color-header-bg-color: hsl(240deg 42% 11% / 0.85);
+    --color-border-dim: var(--color-surface-a6);
+    --color-border-default: var(--color-surface-a7);
+    --color-border-bright: var(--color-surface-a8);
+    --color-surface-dim: var(--color-surface-a3);
+    --color-surface-default: var(--color-surface-a4);
+    --color-skeleton-bg-color: var(--color-surface-default);
+    --color-datalist-row-bg-color: var(--color-surface-default);
+  }
+}

apps/cyberstorm-remix/app/styles/index.css

@@ -1,5 +1,6 @@
-@layer utils, components, theme, theme-components, theme-components-sizes, theme-components-colors, theme-components-layouts, theme-components-miscs, theme-layout, nimbus-components, nimbus-layout, nimbus-overrides;
+@layer utils, components, theme, theme-components, theme-components-sizes, theme-components-colors, theme-components-layouts, theme-components-miscs, theme-layout, nimbus-colors, nimbus-components, nimbus-layout, nimbus-overrides;
 
+@import "colors.css";
 @import "layout.css";
 @import "overrides.css";
 @import "error.css";

apps/cyberstorm-remix/app/styles/layout.css

@@ -9,7 +9,7 @@
 
   body {
     display: flex;
-    background-color: black;
+    background-color: var(--color-surface-1);
   }
 
   .layout__main {