Rename the classic theme to shoelace; fixes #909 (#959)

* rename classic => shoelace; fixes #909

* Update Shoelace theme description

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>

docs/docs/experimental/themer.md

@@ -508,7 +508,7 @@ hasOutline: false
       <wa-option value="tailspin">Tailspin</wa-option>
       <wa-option value="glossy">Glossy</wa-option>
       <wa-option value="active">Active</wa-option>
-      <wa-option value="classic">Classic</wa-option>
+      <wa-option value="shoelace">Shoelace</wa-option>
     </wa-select>
   </div>
   <wa-details summary="Branding">
@@ -545,8 +545,8 @@ hasOutline: false
         Standard<br>
         <span style="background-color: #545868;"></span><span style="background-color: #ef6982;"></span><span style="background-color: #fcc041;"></span><span style="background-color: #98bb4a;"></span><span style="background-color: #00ae5f;"></span><span style="background-color: #259af4;"></span><span style="background-color: #8f8aea;"></span><span style="background-color: #c07ad6;"></span>
       </wa-radio>
-      <wa-radio value="classic">
-        Classic<br>
+      <wa-radio value="shoelace">
+        Shoelace<br>
         <span style="background-color: #4f5967;"></span><span style="background-color: #ee6c6c;"></span><span style="background-color: #fbc129;"></span><span style="background-color: #7dc115;"></span><span style="background-color: #38a961;"></span><span style="background-color: #0d9ee0;"></span><span style="background-color: #818cf7;"></span><span style="background-color: #b976f9;"></span>
       </wa-radio>
       <wa-radio value="bright">
@@ -875,9 +875,9 @@ hasOutline: false
     let colorPalette;
 
     switch(themeSelect.value) {
-      case 'classic':
+      case 'shoelace':
       case 'tailspin':
-        colorPalette = 'classic';
+        colorPalette = 'shoelace';
         break;
       case 'awesome':
         colorPalette = 'bright';
@@ -1047,7 +1047,7 @@ hasOutline: false
       case 'tailspin':
       case 'playful':
       case 'brutalist':
-      case 'classic':
+      case 'shoelace':
       case 'awesome':
       case 'glossy':
       case 'active':
@@ -1495,7 +1495,7 @@ hasOutline: false
         iconStyle.value = 'solid';
         useFaIcons();
         break;
-      case 'classic':
+      case 'shoelace':
         iconFamily.value = 'custom';
         registerIconLibrary('default', {
           resolver: name => `/assets/icons/bootstrap/${name}.svg`,

docs/docs/palettes/shoelace.md

@@ -1,4 +1,4 @@
 ---
-title: Classic
+title: Shoelace
 description: The original Shoelace color palette.
 ---

docs/docs/resources/changelog.md

@@ -12,10 +12,14 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
 During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
 :::
 
+## Next
+
+- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
+
 ## 3.0.0-alpha.13
 
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparison>` and improved compatibility for non-image content
-- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
+- 🚨 BREAKING: Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
 - Added [a theme builder](/docs/themes/edit/) to create your own themes
 - Added a new Blog & News pattern category
 - Added a new free component: `<wa-scroller>` (#1 of 14 per stretch goals)

docs/docs/themes/classic.md

@@ -1,5 +0,0 @@
----
-title: Classic
-description: Timeless elegance that never goes out of style.
-order: 0.1
----

docs/docs/themes/shoelace.md

@@ -0,0 +1,5 @@
+---
+title: Shoelace
+description: The original, familiar look you know and love from Shoelace.
+order: 0.1
+---

src/styles/color/shoelace.css

@@ -3,7 +3,7 @@
 :where(:root),
 :host,
 :where([class^='wa-theme-'], [class*=' wa-theme-']),
-.wa-palette-classic {
+.wa-palette-shoelace {
   --wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
   --wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
   --wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;

src/styles/themes/shoelace.css

@@ -1,16 +1,16 @@
-@import url('classic/color.css');
+@import url('shoelace/color.css');
 @import url('default/space.css');
 @import url('default/outlines.css');
-@import url('classic/typography.css');
+@import url('shoelace/typography.css');
 @import url('default/rounding.css');
 @import url('default/shadows.css');
 @import url('default/transitions.css');
 @import url('default/groups.css');
-@import url('classic/overrides.css');
+@import url('shoelace/overrides.css');
 
 :where(:root),
 :host,
-.wa-theme-classic,
+.wa-theme-shoelace,
 .wa-dark,
 .wa-light,
 .wa-invert {

src/styles/themes/shoelace/color.css

@@ -1,4 +1,4 @@
-@import url('../../color/classic.css');
+@import url('../../color/shoelace.css');
 @import url('../default/color.css');
 @import url('../../brand/blue.css');
 @import url('../../success/green.css');
@@ -8,7 +8,7 @@
 
 :where(:root),
 :host,
-.wa-theme-classic,
+.wa-theme-shoelace,
 .wa-light,
 .wa-dark .wa-invert {
   color-scheme: light;

src/styles/themes/shoelace/overrides.css

@@ -1,6 +1,6 @@
 :where(:root),
 :host,
-.wa-theme-classic {
+.wa-theme-shoelace {
   wa-avatar {
     --background-color: var(--wa-color-neutral-fill-loud);
     --text-color: var(--wa-color-neutral-on-loud);

src/styles/themes/shoelace/typography.css

@@ -2,7 +2,7 @@
 
 :where(:root),
 :host,
-.wa-theme-classic {
+.wa-theme-shoelace {
   --wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --wa-font-family-heading: var(--wa-font-family-body);