Refactor admin CSS: Promote v3 to canonical admin styles

The Admin V3 styles are now the primary styles for the application. This change promotes the `admin_v3` directory to `admin` and archives the old styles.

Changes:
- Renamed `app/webpacker/css/admin_v3` to `app/webpacker/css/admin`.
- Renamed the previous `app/webpacker/css/admin` to `app/webpacker/css/admin_legacy`.
- Moved all files referenced by V3 styles from the legacy directory to the new `admin` directory.
- Updated imports in `all.scss` to distinct local files instead of relative paths.
- Cleaned up `admin_legacy` by removing files that are duplicates (by name or content) of the new admin styles.
- Updated `admin-style-v3` pack to point to the new location.

app/webpacker/css/admin/all.scss

@@ -0,0 +1,135 @@
+// Admin v3 styles
+// While in feature-toggle, we inherit all files from old admin design.
+// Individual files may be copied in order to replace the old files.
+
+@import "assets/stylesheets/normalize";
+@import "assets/stylesheets/responsive-tables";
+@import "assets/stylesheets/jquery.powertip";
+@import "jquery-ui/themes/base/core";
+@import "jquery-ui/themes/base/button";
+@import "jquery-ui/themes/base/resizable";
+@import "assets/stylesheets/jquery-ui-theme";
+@import "jquery-ui/themes/base/dialog";
+@import "../shared/ng-tags-input.min";
+@import "assets/stylesheets/select2";
+@import "flatpickr/dist/flatpickr";
+@import "flatpickr/dist/themes/material_blue";
+@import "shortcut-buttons-flatpickr/dist/themes/light";
+
+@import "globals/functions";
+@import "globals/palette"; // admin_v3
+@import "globals/variables"; // admin_v3
+@import "globals/mixins";
+@import "mixins"; // admin_v3
+
+@import "plugins/font-awesome";
+
+@import "../shared/variables/layout";
+@import "../shared/variables/variables";
+@import "../shared/utilities";
+@import "shared/typography"; // admin_v3
+@import "shared/tables"; // admin_v3
+@import "shared/icons"; // admin_v3
+@import "shared/forms"; // admin_v3
+@import "shared/layout"; // admin_v3
+@import "shared/scroll_bar";
+
+@import "../shared/trix";
+
+@import "plugins/flatpickr-customization"; // admin_v3
+@import "plugins/powertip"; // admin_v3
+
+@import "sections/orders"; // admin_v3
+@import "sections/products";
+
+@import "hacks/mozilla";
+@import "hacks/opera";
+@import "hacks/ie";
+
+@import "components/actions"; // admin_v3
+@import "components/alert-box";
+@import "components/alert_row";
+@import "components/buttons"; // admin_v3
+@import "components/date-picker"; // admin_v3
+@import "components/dialogs";
+@import "components/input";
+@import "components/jquery_dialog";
+@import "components/messages"; // admin_v3
+@import "components/navigation"; // admin_v3
+@import "components/ng-cloak";
+@import "components/page_actions";
+@import "components/pagination"; // admin_v3
+@import "components/per_page_controls";
+@import "components/product_autocomplete";
+@import "components/progress";
+@import "components/save_bar";
+@import "components/sidebar"; // admin_v3
+@import "components/simple_modal";
+@import "components/states";
+@import "components/stripe_connect_button";
+@import "components/subscriptions_states";
+@import "components/table-filter";
+@import "components/table_loading";
+@import "components/timepicker";
+@import "components/todo";
+@import "components/tooltip";
+@import "components/wizard_progress";
+
+@import "pages/enterprise_form";
+@import "pages/subscription_form";
+@import "pages/subscription_line_items";
+@import "pages/subscription_review";
+
+@import "advanced_settings";
+@import "alert";
+@import "animations";
+@import "pages/change_type_form"; // admin_v3
+@import "connected_apps";
+@import "customers";
+@import "dashboard/dashboard_item"; // admin_v3
+@import "pages/dashboard-single-ent"; // admin_v3
+@import "dialog";
+@import "disabled";
+@import "components/dropdown"; // admin_v3
+@import "pages/edit_variant"; // admin_v3
+@import "pages/enterprise_index_panels"; // admin_v3
+@import "enterprises";
+@import "filters_and_controls";
+@import "grid";
+@import "icons";
+@import "index_panel_buttons";
+@import "index_panels";
+@import "modals";
+@import "offsets";
+@import "openfoodnetwork";
+@import "order_cycles";
+@import "orders";
+@import "pages/product_import"; // admin_v3
+@import "products";
+@import "products_v3";
+@import "question-mark-tooltip";
+@import "relationships";
+@import "reports";
+@import "components/select2"; // admin_v3
+@import "components/sidebar-item"; // admin_v3
+@import "side_menu";
+@import "tables";
+@import "tag_rules";
+@import "terms_of_service_files";
+@import "validation";
+@import "variant_overrides";
+@import "welcome";
+
+@import "shared/question-mark-icon";
+@import "~tom-select/src/scss/tom-select.default";
+@import "components/tom_select"; // admin_v3
+
+@import "modal_component/modal_component";
+@import "vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3
+@import "tag_list_input_component/tag_list_input_component";
+@import "trix";
+
+@import "terms_of_service_banner"; // admin_v3
+
+@import "pages/product_preview"; // admin_v3
+@import "pages/dfc_product_imports"; // admin_v3

app/webpacker/css/admin/globals/palette.scss

@@ -1,20 +1,38 @@
-// Basic color palette for admin
-$spree-green: #9fc820;
-$spree-blue: #5498da;
+// Basic color palette for admin styles v3
+$white: #ffffff !default; // White
+$green: #9fc820 !default; // Green
+$teal: #008397 !default; // Teal (Allports)
+$orient: #006878 !default; // Orient (Cerulean)
+$dark-blue: #004e5b !default; // Dark Blue (Sherpa)
+$pale-blue: #cee1f4; // Pale blue
+$red: #c85136 !default; // Red/Orange (Mojo)
+$bright-orange: #ffa92e; // Bright orange
+$yellow: #ff9300 !default; // Yellow
+$mystic: #d9e8eb !default; // Mystic
+$lighter-grey: #f8f9fa !default; // Lighter grey
+$light-grey: #eff1f2 !default; // Light grey (Porcelain)
+$medium-light-grey: #babdbe !default; // Silver Sand
+$medium-grey: #919191 !default; // Medium grey
+$dark-grey: #2e3132 !default; // Dark Grey
+$near-black: #191c1d !default; // Near-black (Shark)
+$fair-pink: #ffefeb !default; // Fair Pink
+$roof-terracotta: #b83b1f !default; // Roof Terracotta
+
+// Old colour variables for backwards compatibility
+$spree-green: $green;
+$spree-blue: $teal;
 $spree-light-blue: #eff5fc;
-$pale-blue: #cee1f4;
-$bright-orange: #ffa92e;
-$medium-grey: #919191;
-$light-grey: #ccc;
-
-$color-1: #ffffff !default; // White
-$color-2: $spree-green !default; // Green
-$color-3: $spree-blue !default; // Light Blue
-$color-4: #6788a2 !default; // Dark Blue
-$color-5: #c60f13 !default; // Red
-$color-6: #ff9300 !default; // Yellow
-$color-14: #f8f9fa !default; // Lighter grey
-
-$dark-grey: #333;
-$light-grey: #ddd;
-$near-black: #222;
+$color-1: $white;
+$color-2: $green;
+$color-3: $teal;
+$color-4: $dark-blue;
+$color-5: $red;
+$color-6: $yellow;
+$color-7: $light-grey;
+$color-8: $near-black;
+$color-9: $dark-grey;
+$color-10: $orient;
+$color-11: $mystic;
+$color-12: $fair-pink;
+$color-13: $roof-terracotta;
+$color-14: $lighter-grey;

app/webpacker/css/admin/products_v3.scss

@@ -1,6 +1,6 @@
 // Customisations for the new Bulk Edit Products page only
 // Scoped to containing div, because Turbo messes with body classes
-@import "../admin_v3/pages/unit_popout";
+@import "pages/unit_popout";
 
 #products_v3_page {
   #content > .row:first-child > .container:first-child {
@@ -59,6 +59,7 @@
         overflow: visible;
         background-color: white;
       }
+
       .form-actions-wrapper2 {
         position: relative;
         // Stretch to cover table side borders
@@ -157,6 +158,7 @@
       tr:first-child td {
         border-top: 4px solid $color-tbl-bg;
       }
+
       tr:last-child td {
         border-bottom: 1px solid $color-tbl-cell-shadow;
       }
@@ -187,6 +189,7 @@
     $columns:
       "image", "name", "sku", "unit_scale", "unit", "price", "on_hand", "producer", "category",
       "tax_category", "tags", "inherits_properties";
+
     @each $col in $columns {
       &.hide-#{$col} {
         .col-#{$col} {
@@ -237,6 +240,7 @@
       align-items: center;
       gap: 10px;
     }
+
     .per-page {
       width: 9em;
     }
@@ -286,6 +290,7 @@
 
       .search-button {
         position: relative;
+
         > input {
           padding-left: 30px;
         }
@@ -295,6 +300,7 @@
 
   // Blurred and non-clickable
   $disabled-blur: 1.5px;
+
   .disabled-section {
     position: relative;
 
@@ -346,6 +352,7 @@
     from {
       transform: scaleY(1);
     }
+
     to {
       transform: scaleY(0);
     }
@@ -360,6 +367,7 @@
     from {
       transform: scaleY(0);
     }
+
     to {
       transform: scaleY(1);
     }

app/webpacker/css/admin_v3/all.scss

@@ -1,137 +0,0 @@
-// Admin v3 styles
-// While in feature-toggle, we inherit all files from old admin design.
-// Individual files may be copied in order to replace the old files.
-
-@import "assets/stylesheets/normalize";
-@import "assets/stylesheets/responsive-tables";
-@import "assets/stylesheets/jquery.powertip";
-@import "jquery-ui/themes/base/core";
-@import "jquery-ui/themes/base/button";
-@import "jquery-ui/themes/base/resizable";
-@import "assets/stylesheets/jquery-ui-theme";
-@import "jquery-ui/themes/base/dialog";
-@import "../shared/ng-tags-input.min";
-@import "assets/stylesheets/select2";
-@import "flatpickr/dist/flatpickr";
-@import "flatpickr/dist/themes/material_blue";
-@import "shortcut-buttons-flatpickr/dist/themes/light";
-
-@import "../admin/globals/functions";
-@import "globals/palette"; // admin_v3
-@import "globals/variables"; // admin_v3
-@import "../admin/globals/mixins";
-@import "mixins"; // admin_v3
-
-@import "../admin/plugins/font-awesome";
-
-@import "../shared/variables/layout";
-@import "../shared/variables/variables";
-@import "../shared/utilities";
-@import "shared/typography"; // admin_v3
-@import "shared/tables"; // admin_v3
-@import "shared/icons"; // admin_v3
-@import "shared/forms"; // admin_v3
-@import "shared/layout"; // admin_v3
-@import "../admin/shared/scroll_bar";
-
-@import "../shared/trix";
-
-@import "plugins/flatpickr-customization"; // admin_v3
-@import "plugins/powertip"; // admin_v3
-
-@import "sections/orders"; // admin_v3
-@import "../admin/sections/products";
-
-@import "../admin/hacks/mozilla";
-@import "../admin/hacks/opera";
-@import "../admin/hacks/ie";
-
-@import "components/actions"; // admin_v3
-@import "../admin/components/alert-box";
-@import "../admin/components/alert_row";
-@import "components/buttons"; // admin_v3
-@import "components/date-picker"; // admin_v3
-@import "../admin/components/dialogs";
-@import "../admin/components/input";
-@import "../admin/components/jquery_dialog";
-@import "components/messages"; // admin_v3
-@import "components/navigation"; // admin_v3
-@import "../admin/components/ng-cloak";
-@import "../admin/components/page_actions";
-@import "components/pagination"; // admin_v3
-@import "../admin/components/per_page_controls";
-@import "../admin/components/product_autocomplete";
-@import "../admin/components/progress";
-@import "../admin/components/save_bar";
-@import "components/sidebar"; // admin_v3
-@import "../admin/components/simple_modal";
-@import "../admin/components/states";
-@import "../admin/components/stripe_connect_button";
-@import "../admin/components/subscriptions_states";
-@import "../admin/components/table-filter";
-@import "../admin/components/table_loading";
-@import "../admin/components/timepicker";
-@import "../admin/components/todo";
-@import "../admin/components/tooltip";
-@import "../admin/components/wizard_progress";
-
-@import "../admin/pages/enterprise_form";
-@import "../admin/pages/subscription_form";
-@import "../admin/pages/subscription_line_items";
-@import "../admin/pages/subscription_review";
-
-@import "../admin/advanced_settings";
-@import "../admin/alert";
-@import "../admin/animations";
-@import "pages/change_type_form"; // admin_v3
-@import "../admin/connected_apps";
-@import "../admin/customers";
-@import "dashboard/dashboard_item"; // admin_v3
-@import "pages/dashboard-single-ent"; // admin_v3
-@import "../admin/dialog";
-@import "../admin/disabled";
-@import "components/dropdown"; // admin_v3
-@import "pages/edit_variant"; // admin_v3
-@import "pages/enterprise_index_panels"; // admin_v3
-@import "../admin/enterprises";
-@import "../admin/filters_and_controls";
-@import "../admin/grid";
-@import "../admin/icons";
-@import "../admin/index_panel_buttons";
-@import "../admin/index_panels";
-@import "../admin/modals";
-@import "../admin/offsets";
-@import "../admin/openfoodnetwork";
-@import "../admin/order_cycles";
-@import "../admin/orders";
-@import "pages/product_import"; // admin_v3
-@import "../admin/products";
-@import "../admin/products_v3";
-@import "../admin/question-mark-tooltip";
-@import "../admin/relationships";
-@import "../admin/reports";
-@import "components/select2"; // admin_v3
-@import "components/sidebar-item"; // admin_v3
-@import "../admin/side_menu";
-@import "../admin/tables";
-@import "../admin/tag_rules";
-@import "../admin/terms_of_service_files";
-@import "../admin/validation";
-@import "../admin/variant_overrides";
-@import "../admin/welcome";
-
-@import "shared/question-mark-icon";
-@import "../admin/question-mark-tooltip";
-
-@import "tom-select/src/scss/tom-select.default";
-@import "components/tom_select"; // admin_v3
-
-@import "modal_component/modal_component";
-@import "vertical_ellipsis_menu_component/vertical_ellipsis_menu_component"; // admin_v3 and only V3
-@import "tag_list_input_component/tag_list_input_component";
-@import "admin/trix";
-
-@import "terms_of_service_banner"; // admin_v3
-
-@import "pages/product_preview"; // admin_v3
-@import "pages/dfc_product_imports"; // admin_v3

app/webpacker/css/admin_v3/globals/palette.scss

@@ -1,38 +0,0 @@
-// Basic color palette for admin styles v3
-$white: #ffffff !default; // White
-$green: #9fc820 !default; // Green
-$teal: #008397 !default; // Teal (Allports)
-$orient: #006878 !default; // Orient (Cerulean)
-$dark-blue: #004e5b !default; // Dark Blue (Sherpa)
-$pale-blue: #cee1f4; // Pale blue
-$red: #c85136 !default; // Red/Orange (Mojo)
-$bright-orange: #ffa92e; // Bright orange
-$yellow: #ff9300 !default; // Yellow
-$mystic: #d9e8eb !default; // Mystic
-$lighter-grey: #f8f9fa !default; // Lighter grey
-$light-grey: #eff1f2 !default; // Light grey (Porcelain)
-$medium-light-grey: #babdbe !default; // Silver Sand
-$medium-grey: #919191 !default; // Medium grey
-$dark-grey: #2e3132 !default; // Dark Grey
-$near-black: #191c1d !default; // Near-black (Shark)
-$fair-pink: #ffefeb !default; // Fair Pink
-$roof-terracotta: #b83b1f !default; // Roof Terracotta
-
-// Old colour variables for backwards compatibility
-$spree-green: $green;
-$spree-blue: $teal;
-$spree-light-blue: #eff5fc;
-$color-1: $white;
-$color-2: $green;
-$color-3: $teal;
-$color-4: $dark-blue;
-$color-5: $red;
-$color-6: $yellow;
-$color-7: $light-grey;
-$color-8: $near-black;
-$color-9: $dark-grey;
-$color-10: $orient;
-$color-11: $mystic;
-$color-12: $fair-pink;
-$color-13: $roof-terracotta;
-$color-14: $lighter-grey;

app/webpacker/packs/admin-style-v3.scss

@@ -1,5 +1,5 @@
-@import "../css/admin_v3/all.scss";
+@import "../css/admin/all.scss";
 
-@import "../css/admin_v3/components/spinner.scss";
+@import "../css/admin/components/spinner.scss";
 
 @import "../../../node_modules/trix/dist/trix.css";