rename base.css to light.css

docs/getting-started/customizing.md

@@ -8,7 +8,7 @@ Shoelace makes use of several design tokens to provide a consistent appearance a
 
 Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [Component Parts](#component-parts).
 
-Design tokens are accessed through CSS custom properties that are defined in `themes/base.css`. The base stylesheet must be imported when you install Shoelace so design tokens are available on your page. Because design tokens live at the page level, they're prefixed with `--sl-` to avoid collisions with other libraries.
+Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--sl-` to avoid collisions with other libraries.
 
 To customize a design token, simply override it in your stylesheet using a `:root` block. Here's an example that changes the primary theme to purple based on existing [color primitives](/tokens/color#primitives).
 
@@ -29,9 +29,9 @@ To customize a design token, simply override it in your stylesheet using a `:roo
 }
 ```
 
-Many design tokens are described further along in this documentation. For a complete list, refer to `themes/base.css` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/styles/shoelace.css).
+Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/light.styles.ts` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/base.styles.ts).
 
-!> **Never modify variables directly in `themes/base.css`** because your changes will be overwritten when you upgrade Shoelace. Even if you don't plan on upgrading, it's always better to override design tokens in your own stylesheet for better maintainability.
+!> **Never modify variables directly in `src/themes/light.styles.ts`** because your changes will be overwritten when you upgrade Shoelace. Even if you don't plan on upgrading, it's always better to override design tokens in your own stylesheet for better maintainability.
 
 ## Component Parts
 

docs/getting-started/installation.md

@@ -7,7 +7,7 @@ You can use Shoelace via CDN or by installing it locally.
 The easiest way to install Shoelace is with the CDN. Just add the following tags to your page.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/base.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
 <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 
@@ -26,7 +26,7 @@ It's up to you to make the source files available to your app. One way to do thi
 Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
 
 ```html
-<link rel="stylesheet" href="/scripts/shoelace/dist/themes/base.css">
+<link rel="stylesheet" href="/scripts/shoelace/dist/themes/light.css">
 <script type="module" src="/scripts/shoelace/dist/shoelace.js"></script>
 ```
 
@@ -62,7 +62,7 @@ Here's an example that loads only the button component. Again, if you're not usi
 
 ```html
 <!-- The base stylesheet is always required -->
-<link rel="stylesheet" href="@shoelace-style/shoelace/dist/themes/base.css">
+<link rel="stylesheet" href="@shoelace-style/shoelace/dist/themes/light.css">
 
 <script type="module" data-shoelace="/scripts/shoelace">
   import '@shoelace-style/shoelace/dist/components/button/button.js';
@@ -95,7 +95,7 @@ Now it's time to configure your bundler. Configurations vary for each tool, but
 Once your bundler is configured, you'll be able to import Shoelace components and utilities.
 
 ```js
-import '@shoelace-style/shoelace/dist/themes/base.css';
+import '@shoelace-style/shoelace/dist/themes/light.css';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/input/input.js';

docs/getting-started/overview.md

@@ -31,7 +31,7 @@ Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
 Add the following code to your page.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/base.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/themes/light.css">
 <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/shoelace.js"></script>
 ```
 

docs/getting-started/usage.md

@@ -148,7 +148,7 @@ npm install @shoelace-style/react
 Include the base theme and any components you want to use in your app.
 
 ```jsx
-import '@shoelace-style/shoelace/dist/themes/base.css';
+import '@shoelace-style/shoelace/dist/themes/light.css';
 
 import SlButton from '@shoelace-style/react/dist/button';
 

docs/index.html

@@ -39,7 +39,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/touch-icon.png" />
 
     <!-- Import Shoelace -->
-    <link rel="stylesheet" href="/dist/themes/base.css" />
+    <link rel="stylesheet" href="/dist/themes/light.css" />
     <link rel="stylesheet" href="/dist/themes/dark.css" />
     <script type="module" src="/dist/shoelace.js"></script>
   </head>

docs/resources/changelog.md

@@ -8,7 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-This release adds a variety of new color primitives and changes the way color tokens are consumed. Previously, color tokens were in hexidecimal format. Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
+This release improves theming by offering both light and dark themes that can be used autonomously. It also adds a variety of new color primitives and changes the way color tokens are consumed. Previously, color tokens were in hexidecimal format. Now, Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
 
 ```css
 .example {
@@ -17,7 +17,7 @@ This release adds a variety of new color primitives and changes the way color to
 }
 ```
 
-This is more verbose than before, but it has the advantage of letting you set the alpha channel of any color token.
+This is more verbose than previous versions, but it has the advantage of letting you set the alpha channel of any color token.
 
 ```css
 .example-with-alpha {
@@ -33,6 +33,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
 - 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors instead)
 - 🚨 BREAKING: removed `info` variant from `sl-alert`, `sl-badge`, `sl-button`, and `sl-tag` (use `neutral` instead)
 - 🚨 BREAKING: removed `--sl-color-info-*` design token (use `--sl-color-neutral-*` instead)
+- 🚨 BREAKING: renamed `dist/themes/base.css` to `dist/themes/light.css`
 - Added new color primitives to the base set of design tokens
 - Added `--sl-color-*-950` swatches to all color palettes
 - Added a console error that appears when menu items have duplicate values in `sl-select`

docs/tutorials/integrating-with-nextjs.md

@@ -22,7 +22,7 @@ yarn add @shoelace-style/shoelace @shoelace-style/react-wrapper copy-webpack-plu
 The next step is to import Shoelace's base theme (stylesheet) in your `_app.js` file:
 
 ```css
-import '@shoelace-style/shoelace/dist/themes/base.css';
+import '@shoelace-style/shoelace/dist/themes/light.css';
 ```
 
 ### Defining Custom Elements