Make page-select portable

By using it's own css file and include that in the component
we can use the page select outside of Alchemy UI (ie. Solidus).

Making use of custom properties with default values so that
the style can be overwritten if necessary.

app/assets/stylesheets/alchemy/admin.scss

@@ -27,7 +27,6 @@
 @import "alchemy/admin/node-select";
 @import "alchemy/admin/nodes";
 @import "alchemy/admin/notices";
-@import "alchemy/admin/page-select";
 @import "alchemy/admin/pagination";
 @import "alchemy/admin/preview_window";
 @import "alchemy/admin/resource_info";

app/assets/stylesheets/alchemy/admin/page-select.scss

@@ -7,16 +7,32 @@
 }
 
 .page-select--page {
+  /* Need to redefine these variables here with the defaults from Alchemy,
+   * because they are not available if you only load this file.
+   */
+  --size-1: var(--spacing-0, 2px);
+  --size-2: var(--spacing-1, 4px);
+  --size-3: var(--spacing-2, 8px);
+  --small-font-size: var(--font-size_small, 10px);
+  --grey: var(--color-grey_light, hsl(0deg, 0%, 94%));
+  --color: var(--color-text, hsla(224deg, 23%, 26%, 0.8));
+  --highlight-color: var(--grey);
+
   display: flex;
   flex-direction: column;
+  color: var(--color);
 
   alchemy-icon {
-    margin-right: var(--spacing-1);
+    margin-right: var(--size-2);
 
     .icon {
       fill: currentColor;
     }
   }
+
+  .select2-highlighted & {
+    color: var(--highlight-color);
+  }
 }
 
 .page-select--top,
@@ -27,40 +43,39 @@
 }
 
 .page-select--bottom {
-  font-size: var(--font-size_small);
-  padding-left: var(--spacing-0);
+  font-size: var(--small-font-size);
+  padding-left: var(--size-1);
 }
 
 .page-select--page-urlname {
-  color: var(--color-text_muted);
-  padding-right: var(--spacing-1);
+  color: var(--color-text_muted, hsla(224deg, 23%, 26%, 0.5));
+  padding-right: var(--size-2);
 
   .select2-highlighted & {
-    color: var(--color-grey_light);
+    color: var(--highlight-color);
   }
 }
 
 .page-select--language-code {
+  --bg-color: var(--grey);
+  --highlight-bg-color: var(--color-white, hsl(0deg, 0%, 100%));
+  --border-radius: var(--border-radius_medium, 3px);
+
   display: inline-block;
-  background-color: var(--color-grey_light);
+  background-color: var(--bg-color);
   margin-left: auto;
-  border-radius: $default-border-radius;
-  padding: var(--spacing-0) var(--spacing-1);
+  border-radius: var(--border-radius);
+  padding: var(--size-1) var(--size-2);
   text-transform: uppercase;
 
   .select2-highlighted & {
-    color: $select-hover-bg-color;
-    background-color: white;
+    color: var(--color);
+    background-color: var(--highlight-bg-color);
   }
 }
 
 .page-select--site-name {
   margin-left: auto;
-  padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-2);
-  color: var(--color-grey_dark);
-  font-size: var(--font-size_small);
-
-  .select2-highlighted & {
-    color: var(--color-white);
-  }
+  padding: var(--size-2) 0 var(--size-2) var(--size-3);
+  font-size: var(--small-font-size);
 }

app/components/alchemy/admin/page_select.rb

@@ -12,7 +12,9 @@ def initialize(page = nil, url: nil, allow_clear: false, placeholder: Alchemy.t(
       end
 
       def call
-        content_tag("alchemy-page-select", content, attributes)
+        content_tag("alchemy-page-select", attributes) do
+          stylesheet_link_tag("alchemy/admin/page-select") + content
+        end
       end
 
       private

package.json

@@ -5,7 +5,7 @@
     "lint": "prettier --check 'app/javascript/**/*.js'",
     "eslint": "eslint app/javascript/**/*.js",
     "build:js": "rollup -c",
-    "build:css": "sass --style=compressed --source-map --load-path app/assets/stylesheets --load-path vendor/assets/stylesheets app/assets/stylesheets/alchemy/admin.scss:app/assets/builds/alchemy/admin.css app/assets/stylesheets/alchemy/admin/print.scss:app/assets/builds/alchemy/admin/print.css app/assets/stylesheets/alchemy/welcome.scss:app/assets/builds/alchemy/welcome.css app/assets/stylesheets/tinymce/skins/content/alchemy/content.scss:app/assets/builds/tinymce/skins/content/alchemy/content.min.css app/assets/stylesheets/tinymce/skins/ui/alchemy/skin.scss:app/assets/builds/tinymce/skins/ui/alchemy/skin.min.css",
+    "build:css": "sass --style=compressed --source-map --load-path app/assets/stylesheets --load-path vendor/assets/stylesheets app/assets/stylesheets/alchemy/admin.scss:app/assets/builds/alchemy/admin.css app/assets/stylesheets/alchemy/admin/print.scss:app/assets/builds/alchemy/admin/print.css app/assets/stylesheets/alchemy/welcome.scss:app/assets/builds/alchemy/welcome.css app/assets/stylesheets/tinymce/skins/content/alchemy/content.scss:app/assets/builds/tinymce/skins/content/alchemy/content.min.css app/assets/stylesheets/tinymce/skins/ui/alchemy/skin.scss:app/assets/builds/tinymce/skins/ui/alchemy/skin.min.css app/assets/stylesheets/alchemy/admin/page-select.scss:app/assets/builds/alchemy/admin/page-select.css",
     "build": "bun run --bun build:js && bun run --bun build:css"
   },
   "keywords": [],