js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

add neutral color palette

Browse Source
This commit is contained in:
Cory LaViska
2021-08-06 08:32:46 -04:00
parent 04a2d45334
commit 9dbee4c686
46 changed files with 265 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/assets/plugins/code-block/code-block.css
View File

@@ -1,21 +1,21 @@
.code-block {
position: relative;
border-radius: 3px;
background-color: rgb(var(--sl-color-gray-50));
background-color: rgb(var(--sl-color-neutral-50));
margin-bottom: 1.5rem;
}
.sl-theme-dark .code-block {
background-color: rgb(var(--sl-color-gray-200));
background-color: rgb(var(--sl-color-neutral-200));
}
.code-block__preview {
position: relative;
border: solid 1px rgb(var(--sl-color-gray-200));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
min-width: 20rem;
max-width: 100%;
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@@ -43,9 +43,9 @@
bottom: 0;
width: 1.75rem;
font-size: 20px;
color: rgb(var(--sl-color-gray-500));
background-color: rgb(var(--sl-color-empty));
border-left: solid 1px rgb(var(--sl-color-gray-200));
color: rgb(var(--sl-color-neutral-500));
background-color: rgb(var(--sl-color-1000));
border-left: solid 1px rgb(var(--sl-color-neutral-200));
border-top-right-radius: 3px;
cursor: ew-resize;
transition: 250ms background-color;
@@ -71,7 +71,7 @@
}
.code-block__source {
border: solid 1px rgb(var(--sl-color-gray-200));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-bottom: none;
border-radius: 0 !important;
margin: 0;
@@ -94,13 +94,13 @@
justify-content: center;
width: 100%;
height: 2.5rem;
border: solid 1px rgb(var(--sl-color-gray-200));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: rgb(var(--sl-color-empty));
background: rgb(var(--sl-color-1000));
font: inherit;
font-size: 0.875rem;
color: rgb(var(--sl-color-gray-600));
color: rgb(var(--sl-color-neutral-600));
cursor: pointer;
transition: 250ms background-color;
-webkit-appearance: none;

6
docs/assets/plugins/metadata/metadata.js
View File

@@ -315,10 +315,10 @@
return next(content);
}
let badgeType = 'info';
let badgeType = 'neutral';
if (component.status === 'stable') badgeType = 'primary';
if (component.status === 'experimental') badgeType = 'warning';
if (component.status === 'planned') badgeType = 'info';
if (component.status === 'planned') badgeType = 'neutral';
if (component.status === 'deprecated') badgeType = 'danger';
result += `
@@ -328,7 +328,7 @@
</div>
<div class="component-header__info">
<sl-badge type="info" pill>
<sl-badge type="neutral" pill>
Since ${component.since || '?'}
</sl-badge>

90
docs/assets/styles/docs.css
View File

@@ -13,8 +13,8 @@ body {
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
letter-spacing: var(--sl-letter-spacing-normal);
background-color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-gray-800));
background-color: rgb(var(--sl-color-1000));
color: rgb(var(--sl-color-neutral-800));
line-height: var(--sl-line-height-normal);
}
@@ -28,8 +28,8 @@ strong {
/* Sidebar */
.sidebar {
background: rgb(var(--sl-color-empty));
border-right: solid 1px rgb(var(--sl-color-gray-200));
background: rgb(var(--sl-color-1000));
border-right: solid 1px rgb(var(--sl-color-neutral-200));
}
.sidebar .app-name {
@@ -40,7 +40,7 @@ strong {
.sidebar-version {
font-size: var(--sl-font-size-x-small);
font-weight: var(--sl-font-weight-normal);
color: rgb(var(--sl-color-gray-400));
color: rgb(var(--sl-color-neutral-400));
text-align: right;
padding: 0 var(--sl-spacing-small);
margin: -1.25rem 0 0.6rem 0;
@@ -68,6 +68,10 @@ strong {
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
}
.sidebar .search input[type='search']::placeholder {
color: rgb(var(--sl-input-placeholder-color));
}
.sidebar .search input[type='search']:hover {
background-color: rgb(var(--sl-input-background-color-hover));
border-color: rgb(var(--sl-input-border-color-hover));
@@ -101,11 +105,11 @@ strong {
}
.sidebar .clear-button svg circle {
fill: rgb(var(--sl-color-gray-400));
fill: rgb(var(--sl-color-neutral-400));
}
.sidebar .clear-button svg path {
stroke: rgb(var(--sl-color-empty));
stroke: rgb(var(--sl-color-1000));
}
.sidebar .clear-button:focus {
@@ -117,7 +121,7 @@ strong {
}
.search .matching-post {
border-bottom: solid 1px rgb(var(--sl-color-gray-500)) !important;
border-bottom: solid 1px rgb(var(--sl-color-neutral-500)) !important;
padding: 0.25rem 1.5rem;
}
@@ -142,7 +146,7 @@ strong {
width: 2rem;
height: 2rem;
border-radius: var(--sl-border-radius-medium);
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
padding: 0.5rem;
}
@@ -188,7 +192,7 @@ strong {
.sidebar li > p {
font-weight: var(--sl-font-weight-bold);
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
margin: 0 0.75rem 0.5rem 0;
}
@@ -269,12 +273,12 @@ strong {
}
.anchor span {
color: rgb(var(--sl-color-full));
color: rgb(var(--sl-color-0));
}
.markdown-section blockquote {
position: relative;
border-left: solid 4px rgb(var(--sl-color-gray-200));
border-left: solid 4px rgb(var(--sl-color-neutral-200));
font-style: italic;
padding: 1rem 1.5rem;
margin: 0 0 1rem 0;
@@ -298,7 +302,7 @@ strong {
}
.docsify-pagination-container {
border-top-color: rgb(var(--sl-color-gray-200)) !important;
border-top-color: rgb(var(--sl-color-neutral-200)) !important;
}
.markdown-section h1,
@@ -317,7 +321,7 @@ strong {
.markdown-section h2 {
font-size: var(--sl-font-size-x-large);
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
margin-top: 2rem;
}
@@ -348,39 +352,39 @@ strong {
.markdown-section code {
font-family: var(--sl-font-mono);
font-size: 87.5%;
background-color: rgb(var(--sl-color-gray-50));
background-color: rgb(var(--sl-color-neutral-50));
border-radius: var(--sl-border-radius-small);
padding: 2px 4px;
}
.sl-theme-dark .markdown-section code {
background-color: rgb(var(--sl-color-gray-100));
background-color: rgb(var(--sl-color-neutral-100));
}
.markdown-section kbd {
font-family: var(--sl-font-mono);
font-size: 87.5%;
border-radius: var(--sl-border-radius-small);
border: solid 1px rgb(var(--sl-color-gray-200));
border: solid 1px rgb(var(--sl-color-neutral-200));
padding: 2px 4px;
}
/* Code blocks */
.markdown-section pre {
position: relative;
background-color: rgb(var(--sl-color-gray-50));
background-color: rgb(var(--sl-color-neutral-50));
border-radius: var(--sl-border-radius-medium);
}
.sl-theme-dark .markdown-section pre {
background-color: rgb(var(--sl-color-gray-100));
background-color: rgb(var(--sl-color-neutral-100));
}
.markdown-section pre > code {
display: block;
background: none;
border-radius: 0;
color: rgb(var(--sl-color-gray-700));
color: rgb(var(--sl-color-neutral-700));
padding: var(--sl-spacing-medium);
overflow: auto;
hyphens: none;
@@ -388,18 +392,18 @@ strong {
}
.markdown-section pre .token.comment {
color: rgb(var(--sl-color-gray-400));
color: rgb(var(--sl-color-neutral-400));
}
.markdown-section pre .token.prolog,
.markdown-section pre .token.doctype,
.markdown-section pre .token.cdata,
.markdown-section pre .token.operator {
color: rgb(var(--sl-color-gray-600));
color: rgb(var(--sl-color-neutral-600));
}
.markdown-section pre .token.punctuation {
color: rgb(var(--sl-color-gray-600));
color: rgb(var(--sl-color-neutral-600));
}
.namespace {
@@ -466,11 +470,11 @@ strong {
}
.markdown-section tr:nth-child(2n) {
background: rgb(var(--sl-color-gray-50));
background: rgb(var(--sl-color-neutral-50));
}
.sl-theme-dark .markdown-section tr:nth-child(2n) {
background: rgb(var(--sl-color-gray-100));
background: rgb(var(--sl-color-neutral-100));
}
.markdown-section th {
@@ -480,8 +484,8 @@ strong {
}
.markdown-section td {
border-top: solid 1px rgb(var(--sl-color-gray-200));
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
border-top: solid 1px rgb(var(--sl-color-neutral-200));
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
border-left: none;
border-right: none;
}
@@ -499,7 +503,7 @@ strong {
.markdown-section p.tip,
.markdown-section p.warn {
position: relative;
background-color: rgb(var(--sl-color-gray-50));
background-color: rgb(var(--sl-color-neutral-50));
border-left: solid 4px transparent;
border-radius: var(--sl-border-radius-medium);
padding-left: 1.5rem;
@@ -507,14 +511,14 @@ strong {
.sl-theme-dark .markdown-section p.tip,
.sl-theme-dark .markdown-section p.warn {
background-color: rgb(var(--sl-color-gray-100));
background-color: rgb(var(--sl-color-neutral-100));
}
.markdown-section p.tip:before,
.markdown-section p.warn:before {
content: '!';
border-radius: 100%;
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
font-size: 14px;
font-weight: bold;
left: -12px;
@@ -544,12 +548,12 @@ strong {
.markdown-section p.tip code,
.markdown-section p.warn code {
background-color: rgb(var(--sl-color-gray-100));
background-color: rgb(var(--sl-color-neutral-100));
}
/* Component headers */
.component-header {
border-bottom: solid 1px rgb(var(--sl-color-gray-200));
border-bottom: solid 1px rgb(var(--sl-color-neutral-200));
padding-bottom: 2rem;
margin-top: -1rem;
margin-bottom: 2rem;
@@ -563,7 +567,7 @@ strong {
.component-header__tag code {
background: none;
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
font-size: var(--sl-font-size-large);
padding: 0;
margin: 0;
@@ -590,15 +594,15 @@ strong {
html .repo-button {
display: inline-flex;
align-items: center;
background-color: rgb(var(--sl-color-empty));
border: solid 1px rgb(var(--sl-color-gray-200));
background-color: rgb(var(--sl-color-1000));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-radius: var(--sl-border-radius-medium);
box-shadow: var(--sl-shadow-x-small);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
line-height: 2;
text-decoration: none;
color: rgb(var(--sl-color-gray-700));
color: rgb(var(--sl-color-neutral-700));
padding: var(--sl-spacing-xx-small) var(--sl-spacing-small);
margin-bottom: var(--sl-spacing-xx-small);
transition: 0.25s all;
@@ -606,12 +610,12 @@ html .repo-button {
html .repo-button:hover {
text-decoration: none;
background-color: rgb(var(--sl-color-gray-50));
border: solid 1px rgb(var(--sl-color-gray-200));
background-color: rgb(var(--sl-color-neutral-50));
border: solid 1px rgb(var(--sl-color-neutral-200));
}
.sl-theme-dark .repo-button:hover {
background-color: rgb(var(--sl-color-gray-100));
background-color: rgb(var(--sl-color-neutral-100));
}
html .repo-button:focus {
@@ -640,7 +644,7 @@ html .repo-button--sponsor sl-icon {
}
html .repo-button--github sl-icon {
color: rgb(var(--sl-color-gray-600));
color: rgb(var(--sl-color-neutral-600));
}
html .repo-button--twitter sl-icon {
@@ -662,7 +666,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
/* Transition demo */
.transition-demo {
position: relative;
background: rgb(var(--sl-color-gray-200));
background: rgb(var(--sl-color-neutral-200));
width: 8rem;
height: 2rem;
}
@@ -691,7 +695,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
/* Elevation dmeo */
.elevation-demo {
background: rgb(var(--sl-color-empty));
background: rgb(var(--sl-color-1000));
border-radius: 3px;
width: 4rem;
height: 4rem;
@@ -727,7 +731,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
}
.color-palette__swatch--border {
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-full) / 10%);
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-0) / 10%);
}
@media screen and (max-width: 1200px) {

8
docs/components/alert.md
View File

@@ -36,7 +36,7 @@ Set the `type` attribute to change the alert's type.
<br>
<sl-alert type="info" open>
<sl-alert type="neutral" open>
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br>
Settings will take affect on next login.
@@ -126,7 +126,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
<div class="alert-toast">
<sl-button type="primary">Primary</sl-button>
<sl-button type="success">Success</sl-button>
<sl-button type="info">Info</sl-button>
<sl-button type="neutral">Info</sl-button>
<sl-button type="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button>
@@ -142,7 +142,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
You can safely exit the app now.
</sl-alert>
<sl-alert type="info" duration="3000" closable>
<sl-alert type="neutral" duration="3000" closable>
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br>
Settings will take affect on next login.
@@ -164,7 +164,7 @@ You should always use the `closable` attribute so users can dismiss the notifica
<script>
const container = document.querySelector('.alert-toast');
['primary', 'success', 'info', 'warning', 'danger'].map(type => {
['primary', 'success', 'neutral', 'warning', 'danger'].map(type => {
const button = container.querySelector(`sl-button[type="${type}"]`);
const alert = container.querySelector(`sl-alert[type="${type}"]`);

2
docs/components/avatar.md
View File

@@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS.
}
.avatar-group sl-avatar::part(base) {
border: solid 2px rgb(var(--sl-color-empty));
border: solid 2px rgb(var(--sl-color-1000));
}
</style>
```

10
docs/components/badge.md
View File

@@ -17,7 +17,7 @@ Set the `type` attribute to change the badge's type.
```html preview
<sl-badge type="primary">Primary</sl-badge>
<sl-badge type="success">Success</sl-badge>
<sl-badge type="info">Info</sl-badge>
<sl-badge type="neutral">Neutral</sl-badge>
<sl-badge type="warning">Warning</sl-badge>
<sl-badge type="danger">Danger</sl-badge>
```
@@ -29,7 +29,7 @@ Use the `pill` attribute to give badges rounded edges.
```html preview
<sl-badge type="primary" pill>Primary</sl-badge>
<sl-badge type="success" pill>Success</sl-badge>
<sl-badge type="info" pill>Info</sl-badge>
<sl-badge type="neutral" pill>Neutral</sl-badge>
<sl-badge type="warning" pill>Warning</sl-badge>
<sl-badge type="danger" pill>Danger</sl-badge>
```
@@ -42,7 +42,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
<div class="badge-pulse">
<sl-badge type="primary" pill pulse>1</sl-badge>
<sl-badge type="success" pill pulse>1</sl-badge>
<sl-badge type="info" pill pulse>1</sl-badge>
<sl-badge type="neutral" pill pulse>1</sl-badge>
<sl-badge type="warning" pill pulse>1</sl-badge>
<sl-badge type="danger" pill pulse>1</sl-badge>
</div>
@@ -82,8 +82,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
```html preview
<sl-menu style="max-width: 240px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
<sl-menu-label>Messages</sl-menu-label>
<sl-menu-item>Comments <sl-badge slot="suffix" type="info" pill>4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix" type="info" pill>12</sl-badge></sl-menu-item>
<sl-menu-item>Comments <sl-badge slot="suffix" type="neutral" pill>4</sl-badge></sl-menu-item>
<sl-menu-item>Replies <sl-badge slot="suffix" type="neutral" pill>12</sl-badge></sl-menu-item>
</sl-menu>
```

6
docs/components/button-group.md
View File

@@ -64,9 +64,9 @@ Theme buttons are supported through the button's `type` attribute.
<br><br>
<sl-button-group>
<sl-button type="info">Left</sl-button>
<sl-button type="info">Center</sl-button>
<sl-button type="info">Right</sl-button>
<sl-button type="neutral">Left</sl-button>
<sl-button type="neutral">Center</sl-button>
<sl-button type="neutral">Right</sl-button>
</sl-button-group>
<br><br>

6
docs/components/button.md
View File

@@ -18,7 +18,7 @@ Use the `type` attribute to set the button's type.
<sl-button type="default">Default</sl-button>
<sl-button type="primary">Primary</sl-button>
<sl-button type="success">Success</sl-button>
<sl-button type="info">Info</sl-button>
<sl-button type="neutral">Neutral</sl-button>
<sl-button type="warning">Warning</sl-button>
<sl-button type="danger">Danger</sl-button>
```
@@ -162,7 +162,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
<sl-button type="default" loading>Default</sl-button>
<sl-button type="primary" loading>Primary</sl-button>
<sl-button type="success" loading>Success</sl-button>
<sl-button type="info" loading>Info</sl-button>
<sl-button type="neutral" loading>Neutral</sl-button>
<sl-button type="warning" loading>Warning</sl-button>
<sl-button type="danger" loading>Danger</sl-button>
```
@@ -175,7 +175,7 @@ Use the `disabled` attribute to disable a button. Clicks will be suppressed unti
<sl-button type="default" disabled>Default</sl-button>
<sl-button type="primary" disabled>Primary</sl-button>
<sl-button type="success" disabled>Success</sl-button>
<sl-button type="info" disabled>Info</sl-button>
<sl-button type="neutral" disabled>Neutral</sl-button>
<sl-button type="warning" disabled>Warning</sl-button>
<sl-button type="danger" disabled>Danger</sl-button>
```

2
docs/components/card.md
View File

@@ -28,7 +28,7 @@ Cards can be used to group related subjects in a container.
}
.card-overview small {
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
}
.card-overview [slot="footer"] {

2
docs/components/dialog.md
View File

@@ -58,7 +58,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
```html preview
<sl-dialog label="Dialog" class="dialog-scrolling">
<div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
<div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-neutral-200)); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary">Close</sl-button>

2
docs/components/drawer.md
View File

@@ -146,7 +146,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
```html preview
<sl-drawer label="Drawer" class="drawer-scrolling">
<div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-gray-200)); padding: 0 1rem;">
<div style="height: 150vh; border: dashed 2px rgb(var(--sl-color-neutral-200)); padding: 0 1rem;">
<p>Scroll down and give it a try! 👇</p>
</div>
<sl-button slot="footer" type="primary">Close</sl-button>

2
docs/components/tag.md
View File

@@ -7,7 +7,7 @@ Tags are used as labels to organize things or to indicate a selection.
```html preview
<sl-tag type="primary">Primary</sl-tag>
<sl-tag type="success">Success</sl-tag>
<sl-tag type="info">Info</sl-tag>
<sl-tag type="neutral">Neutral</sl-tag>
<sl-tag type="warning">Warning</sl-tag>
<sl-tag type="danger">Danger</sl-tag>
```

2
docs/getting-started/themes.md
View File

@@ -6,6 +6,8 @@ The default theme is included as part of `themes/base.css` and should always be
## Dark Mode
The dark theme uses an "inverted" color scale, so if you're using design tokens correctly, you'll get a decent dark mode for free.
To install the dark theme, add the following to the `<head>` section of your app.
```html

8
docs/resources/changelog.md
View File

@@ -13,7 +13,7 @@ This release adds a variety of new color primitives and changes the way color to
```css
.example {
/* rgb() is required now */
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
}
```
@@ -22,15 +22,17 @@ This is more verbose than before, but it has the advantage of letting you set th
```css
.example-with-alpha {
/* easily adjust opacity for any color token */
color: rgb(var(--sl-color-gray-500) / 50%);
color: rgb(var(--sl-color-neutral-500) / 50%);
}
```
This change applies to all design tokens that implement a color. Refer to the [color tokens](/tokens/color) page for more details.
- 🚨 BREAKING: all design tokens that implement colors have been converted to `R G B` and must be used with the `rgb()` function
- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-empty|full` instead)
- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-1000|full` instead)
- 🚨 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)
- 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`

2
docs/resources/contributing.md
View File

@@ -216,7 +216,7 @@ To expose custom properties as part of a component's API, scope them to the `:ho
```css
:host {
--color: rgb(var(--sl-color-primary-500));
--background-color: rgb(var(--sl-color-gray-100));
--background-color: rgb(var(--sl-color-neutral-100));
}
```

51
docs/tokens/color.md
View File

@@ -10,7 +10,7 @@ All color tokens are defined as a set of RGB integers, eg. `113 113 122`. CSS do
```css
.example {
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
}
```
@@ -22,7 +22,7 @@ By default, color tokens produce an opaque color. With this syntax, you can easi
```css
.example-with-alpha {
color: rgb(var(--sl-color-gray-500) / 50%);
color: rgb(var(--sl-color-neutral-500) / 50%);
}
```
@@ -32,7 +32,7 @@ This syntax may not look familiar, but it's perfectly valid per the [CSS Color M
## Theme Tokens
Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, info, warning, and danger are used to visualize actions that correspond to their respective meanings.
Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.
<div class="color-palette">
<div class="color-palette__name">
@@ -70,24 +70,6 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-950));"></div>950</div>
</div>
<div class="color-palette">
<div class="color-palette__name">
Info<br>
<code>--sl-color-info-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-50));"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-100));"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-200));"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-300));"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-400));"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-500));"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-600));"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-700));"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-800));"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-900));"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-950));"></div>950</div>
</div>
<div class="color-palette">
<div class="color-palette__name">
Warning<br>
@@ -126,11 +108,29 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
<div class="color-palette">
<div class="color-palette__name">
Full & Empty<br>
<code>--sl-color-<em>{n}</em></code>
Neutral<br>
<code>--sl-color-neutral-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-full));"></div>full</div>
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-empty));"></div>empty</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-50));"></div>50</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-100));"></div>100</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-200));"></div>200</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-300));"></div>300</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-400));"></div>400</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-500));"></div>500</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-600));"></div>600</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-700));"></div>700</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-800));"></div>800</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-900));"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-950));"></div>950</div>
</div>
<div class="color-palette">
<div class="color-palette__name">
Black & White<br>
<code>--sl-color-neutral-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-0));"></div>0</div>
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-1000));"></div>1000</div>
</div>
## Primitives
@@ -532,4 +532,3 @@ Additional palettes are provided in the form of color primitives. Use these when
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-900));"></div>900</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-950));"></div>950</div>
</div>

14
src/components/alert/alert.styles.ts
View File

@@ -15,8 +15,8 @@ export default css`
position: relative;
display: flex;
align-items: stretch;
background-color: rgb(var(--sl-color-empty));
border: solid 1px rgb(var(--sl-color-gray-200));
background-color: rgb(var(--sl-color-1000));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-top-width: 3px;
border-radius: var(--sl-border-radius-medium);
box-shadow: var(--box-shadow);
@@ -24,7 +24,7 @@ export default css`
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-normal);
line-height: 1.6;
color: rgb(var(--sl-color-gray-700));
color: rgb(var(--sl-color-neutral-700));
margin: inherit;
}
@@ -55,12 +55,12 @@ export default css`
color: rgb(var(--sl-color-success-500));
}
.alert--info {
border-top-color: rgb(var(--sl-color-info-500));
.alert--neutral {
border-top-color: rgb(var(--sl-color-neutral-500));
}
.alert--info .alert__icon {
color: rgb(var(--sl-color-info-500));
.alert--neutral .alert__icon {
color: rgb(var(--sl-color-neutral-500));
}
.alert--warning {

4
src/components/alert/alert.ts
View File

@@ -52,7 +52,7 @@ export default class SlAlert extends LitElement {
@property({ type: Boolean, reflect: true }) closable = false;
/** The type of alert. */
@property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
@property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
/**
* The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
@@ -180,7 +180,7 @@ export default class SlAlert extends LitElement {
'alert--closable': this.closable,
'alert--primary': this.type === 'primary',
'alert--success': this.type === 'success',
'alert--info': this.type === 'info',
'alert--neutral': this.type === 'neutral',
'alert--warning': this.type === 'warning',
'alert--danger': this.type === 'danger'
})}

4
src/components/avatar/avatar.styles.ts
View File

@@ -17,11 +17,11 @@ export default css`
position: relative;
width: var(--size);
height: var(--size);
background-color: rgb(var(--sl-color-gray-400));
background-color: rgb(var(--sl-color-neutral-400));
font-family: var(--sl-font-sans);
font-size: calc(var(--size) * 0.5);
font-weight: var(--sl-font-weight-normal);
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
overflow: hidden;
user-select: none;
vertical-align: middle;

18
src/components/badge/badge.styles.ts
View File

@@ -26,27 +26,27 @@ export default css`
/* Type modifiers */
.badge--primary {
background-color: rgb(var(--sl-color-primary-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.badge--success {
background-color: rgb(var(--sl-color-success-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.badge--info {
background-color: rgb(var(--sl-color-info-500));
color: rgb(var(--sl-color-empty));
.badge--neutral {
background-color: rgb(var(--sl-color-neutral-500));
color: rgb(var(--sl-color-1000));
}
.badge--warning {
background-color: rgb(var(--sl-color-warning-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.badge--danger {
background-color: rgb(var(--sl-color-danger-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
/* Pill modifier */
@@ -67,8 +67,8 @@ export default css`
--pulse-color: rgb(var(--sl-color-success-500));
}
.badge--pulse.badge--info {
--pulse-color: rgb(var(--sl-color-info-500));
.badge--pulse.badge--neutral {
--pulse-color: rgb(var(--sl-color-neutral-500));
}
.badge--pulse.badge--warning {

4
src/components/badge/badge.ts
View File

@@ -16,7 +16,7 @@ export default class SlBadge extends LitElement {
static styles = styles;
/** The badge's type. */
@property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' = 'primary';
@property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
/** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
@@ -32,7 +32,7 @@ export default class SlBadge extends LitElement {
badge: true,
'badge--primary': this.type === 'primary',
'badge--success': this.type === 'success',
'badge--info': this.type === 'info',
'badge--neutral': this.type === 'neutral',
'badge--warning': this.type === 'warning',
'badge--danger': this.type === 'danger',
'badge--pill': this.pill,

76
src/components/button/button.styles.ts
View File

@@ -69,9 +69,9 @@ export default css`
/* Default */
.button.button--default {
background-color: rgb(var(--sl-color-empty));
border-color: rgb(var(--sl-color-gray-300));
color: rgb(var(--sl-color-gray-600));
background-color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-color-neutral-300));
color: rgb(var(--sl-color-neutral-600));
}
.button.button--default:hover:not(.button--disabled) {
@@ -97,129 +97,129 @@ export default css`
.button.button--primary {
background-color: rgb(var(--sl-color-primary-500));
border-color: rgb(var(--sl-color-primary-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--primary:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-primary-400));
border-color: rgb(var(--sl-color-primary-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--primary:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-primary-400));
border-color: rgb(var(--sl-color-primary-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / 25%);
}
.button.button--primary:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-primary-500));
border-color: rgb(var(--sl-color-primary-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
/* Success */
.button.button--success {
background-color: rgb(var(--sl-color-success-500));
border-color: rgb(var(--sl-color-success-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--success:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-success-400));
border-color: rgb(var(--sl-color-success-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--success:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-success-400));
border-color: rgb(var(--sl-color-success-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-success) / 25%);
}
.button.button--success:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-success-500));
border-color: rgb(var(--sl-color-success-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
/* Info */
.button.button--info {
background-color: rgb(var(--sl-color-info-500));
border-color: rgb(var(--sl-color-info-500));
color: rgb(var(--sl-color-empty));
/* Neutral */
.button.button--neutral {
background-color: rgb(var(--sl-color-neutral-500));
border-color: rgb(var(--sl-color-neutral-500));
color: rgb(var(--sl-color-1000));
}
.button.button--info:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-info-400));
border-color: rgb(var(--sl-color-info-400));
color: rgb(var(--sl-color-empty));
.button.button--neutral:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-neutral-400));
border-color: rgb(var(--sl-color-neutral-400));
color: rgb(var(--sl-color-1000));
}
.button.button--info:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-info-400));
border-color: rgb(var(--sl-color-info-400));
color: rgb(var(--sl-color-empty));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-info) / 25%);
.button.button--neutral:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-neutral-400));
border-color: rgb(var(--sl-color-neutral-400));
color: rgb(var(--sl-color-1000));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / 25%);
}
.button.button--info:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-info-500));
border-color: rgb(var(--sl-color-info-500));
color: rgb(var(--sl-color-empty));
.button.button--neutral:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-neutral-500));
border-color: rgb(var(--sl-color-neutral-500));
color: rgb(var(--sl-color-1000));
}
/* Warning */
.button.button--warning {
background-color: rgb(var(--sl-color-warning-500));
border-color: rgb(var(--sl-color-warning-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--warning:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-warning-400));
border-color: rgb(var(--sl-color-warning-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--warning:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-warning-400));
border-color: rgb(var(--sl-color-warning-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-warning) / 25%);
}
.button.button--warning:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-warning-500));
border-color: rgb(var(--sl-color-warning-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
/* Danger */
.button.button--danger {
background-color: rgb(var(--sl-color-danger-500));
border-color: rgb(var(--sl-color-danger-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--danger:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-danger-400));
border-color: rgb(var(--sl-color-danger-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.button.button--danger:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-danger-400));
border-color: rgb(var(--sl-color-danger-400));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-danger) / 25%);
}
.button.button--danger:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-danger-500));
border-color: rgb(var(--sl-color-danger-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
/*
@@ -482,7 +482,7 @@ export default css`
top: 0;
left: 0;
bottom: 0;
border-left: solid 1px rgb(var(--sl-color-empty) / 20%);
border-left: solid 1px rgb(var(--sl-color-1000) / 20%);
}
/* Bump focused buttons up so their focus ring isn't clipped */

6
src/components/button/button.ts
View File

@@ -39,7 +39,7 @@ export default class SlButton extends LitElement {
@state() private hasSuffix = false;
/** The button's type. */
@property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' =
@property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
'default';
/** The button's size. */
@@ -161,7 +161,7 @@ export default class SlButton extends LitElement {
'button--default': this.type === 'default',
'button--primary': this.type === 'primary',
'button--success': this.type === 'success',
'button--info': this.type === 'info',
'button--neutral': this.type === 'neutral',
'button--warning': this.type === 'warning',
'button--danger': this.type === 'danger',
'button--text': this.type === 'text',
@@ -199,7 +199,7 @@ export default class SlButton extends LitElement {
'button--default': this.type === 'default',
'button--primary': this.type === 'primary',
'button--success': this.type === 'success',
'button--info': this.type === 'info',
'button--neutral': this.type === 'neutral',
'button--warning': this.type === 'warning',
'button--danger': this.type === 'danger',
'button--text': this.type === 'text',

4
src/components/card/card.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--border-color: rgb(var(--sl-color-gray-200));
--border-color: rgb(var(--sl-color-neutral-200));
--border-radius: var(--sl-border-radius-medium);
--border-width: 1px;
--padding: var(--sl-spacing-large);
@@ -16,7 +16,7 @@ export default css`
.card {
display: flex;
flex-direction: column;
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
box-shadow: var(--sl-shadow-x-small);
border: solid var(--border-width) var(--border-color);
border-radius: var(--border-radius);

2
src/components/checkbox/checkbox.styles.ts
View File

@@ -30,7 +30,7 @@ export default css`
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
border-radius: 2px;
background-color: rgb(var(--sl-input-background-color));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
}

12
src/components/color-picker/color-picker.styles.ts
View File

@@ -172,7 +172,7 @@ export default css`
width: calc(var(--sl-input-height-small) / 2);
height: calc(var(--sl-input-height-small) / 2);
color: white;
background-color: rgb(var(--sl-color-gray-900));
background-color: rgb(var(--sl-color-neutral-900));
border-radius: var(--sl-border-radius-circle);
opacity: 0;
}
@@ -225,7 +225,7 @@ export default css`
grid-template-columns: repeat(8, 1fr);
grid-gap: 6px;
justify-items: center;
border-top: solid 1px rgb(var(--sl-color-gray-200));
border-top: solid 1px rgb(var(--sl-color-neutral-200));
padding: var(--sl-spacing-small);
}
@@ -253,10 +253,10 @@ export default css`
}
.color-picker__transparent-bg {
background-image: linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-gray-300)) 75%),
linear-gradient(45deg, rgb(var(--sl-color-gray-300)) 25%, transparent 25%);
background-image: linear-gradient(45deg, rgb(var(--sl-color-neutral-300)) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-neutral-300)) 75%),
linear-gradient(45deg, transparent 75%, rgb(var(--sl-color-neutral-300)) 75%),
linear-gradient(45deg, rgb(var(--sl-color-neutral-300)) 25%, transparent 25%);
background-size: 10px 10px;
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
}

2
src/components/details/details.styles.ts
View File

@@ -9,7 +9,7 @@ export default css`
}
.details {
border: solid 1px rgb(var(--sl-color-gray-200));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-radius: var(--sl-border-radius-medium);
overflow-anchor: none;
}

2
src/components/icon-button/icon-button.styles.ts
View File

@@ -16,7 +16,7 @@ export default css`
border: none;
border-radius: var(--sl-border-radius-medium);
font-size: inherit;
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
padding: var(--sl-spacing-x-small);
cursor: pointer;
transition: var(--sl-transition-medium) color;

6
src/components/image-comparer/image-comparer.styles.ts
View File

@@ -48,7 +48,7 @@ export default css`
top: 0;
width: var(--divider-width);
height: 100%;
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
transform: translateX(calc(var(--divider-width) / -2));
cursor: ew-resize;
}
@@ -61,10 +61,10 @@ export default css`
top: calc(50% - (var(--handle-size) / 2));
width: var(--handle-size);
height: var(--handle-size);
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-radius: var(--sl-border-radius-circle);
font-size: calc(var(--handle-size) * 0.5);
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
cursor: inherit;
z-index: 10;
}

6
src/components/menu-item/menu-item.styles.ts
View File

@@ -18,7 +18,7 @@ export default css`
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
text-align: left;
color: rgb(var(--sl-color-gray-700));
color: rgb(var(--sl-color-neutral-700));
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
transition: var(--sl-transition-fast) fill;
user-select: none;
@@ -27,7 +27,7 @@ export default css`
}
.menu-item.menu-item--disabled {
outline: none;
color: rgb(var(--sl-color-gray-400));
color: rgb(var(--sl-color-neutral-400));
cursor: not-allowed;
}
@@ -63,7 +63,7 @@ export default css`
:host(:focus:not([aria-disabled='true'])) .menu-item {
outline: none;
background-color: rgb(var(--sl-color-primary-500));
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
}
.menu-item .menu-item__check {

2
src/components/menu-label/menu-label.styles.ts
View File

@@ -14,7 +14,7 @@ export default css`
font-weight: var(--sl-font-weight-semibold);
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
color: rgb(var(--sl-color-gray-500));
color: rgb(var(--sl-color-neutral-500));
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
user-select: none;
}

4
src/components/progress-bar/progress-bar.styles.ts
View File

@@ -6,9 +6,9 @@ export default css`
:host {
--height: 16px;
--track-color: rgb(var(--sl-color-gray-200));
--track-color: rgb(var(--sl-color-neutral-500) / 20%);
--indicator-color: rgb(var(--sl-color-primary-500));
--label-color: rgb(var(--sl-color-empty));
--label-color: rgb(var(--sl-color-1000));
display: block;
}

2
src/components/progress-ring/progress-ring.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--track-color: rgb(var(--sl-color-gray-200));
--track-color: rgb(var(--sl-color-neutral-500) / 15%);
--indicator-color: rgb(var(--sl-color-primary-500));
display: inline-flex;

2
src/components/radio/radio.styles.ts
View File

@@ -69,7 +69,7 @@ export default css`
/* Checked */
.radio--checked .radio__control {
color: rgb(var(--sl-color-empty));
color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-color-primary-500));
background-color: rgb(var(--sl-color-primary-500));
}

2
src/components/range/range.styles.ts
View File

@@ -9,7 +9,7 @@ export default css`
:host {
--thumb-size: 20px;
--tooltip-offset-y: 10px;
--track-color: rgb(var(--sl-color-gray-200));
--track-color: rgb(var(--sl-color-neutral-200));
--track-height: 6px;
display: block;

2
src/components/rating/rating.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--symbol-color: rgb(var(--sl-color-gray-300));
--symbol-color: rgb(var(--sl-color-neutral-300));
--symbol-color-active: #ffbe00;
--symbol-size: 1.2rem;
--symbol-spacing: var(--sl-spacing-xxx-small);

4
src/components/select/select.ts
View File

@@ -368,7 +368,7 @@ export default class SlSelect extends LitElement {
return html`
<sl-tag
exportparts="base:tag"
type="info"
type="neutral"
size=${this.size}
?pill=${this.pill}
clearable
@@ -392,7 +392,7 @@ export default class SlSelect extends LitElement {
this.displayLabel = '';
this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
this.displayTags.push(html`
<sl-tag exportparts="base:tag" type="info" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
<sl-tag exportparts="base:tag" type="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
`);
}
} else {

4
src/components/skeleton/skeleton.styles.ts
View File

@@ -6,8 +6,8 @@ export default css`
:host {
--border-radius: var(--sl-border-radius-pill);
--color: rgb(var(--sl-color-gray-200));
--sheen-color: rgb(var(--sl-color-gray-300));
--color: rgb(var(--sl-color-neutral-200));
--sheen-color: rgb(var(--sl-color-neutral-300));
display: block;
position: relative;

2
src/components/spinner/spinner.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--track-color: rgb(var(--sl-color-full) / 10%);
--track-color: rgb(var(--sl-color-neutral-500) / 15%);
--indicator-color: rgb(var(--sl-color-primary-500));
--stroke-width: 2px;

24
src/components/switch/switch.styles.ts
View File

@@ -31,8 +31,8 @@ export default css`
justify-content: center;
width: var(--width);
height: var(--height);
background-color: rgb(var(--sl-color-gray-300));
border: solid var(--sl-input-border-width) rgb(var(--sl-color-gray-300));
background-color: rgb(var(--sl-color-neutral-300));
border: solid var(--sl-input-border-width) rgb(var(--sl-color-neutral-300));
border-radius: var(--height);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
}
@@ -40,7 +40,7 @@ export default css`
.switch__control .switch__thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-radius: 50%;
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
transform: translateX(calc((var(--width) - var(--height)) / -2));
@@ -58,22 +58,22 @@ export default css`
/* Hover */
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
background-color: rgb(var(--sl-color-gray-200));
border-color: rgb(var(--sl-color-gray-200));
background-color: rgb(var(--sl-color-neutral-200));
border-color: rgb(var(--sl-color-neutral-200));
}
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-input-border-color));
}
/* Focus */
.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {
background-color: rgb(var(--sl-color-gray-200));
border-color: rgb(var(--sl-color-gray-200));
background-color: rgb(var(--sl-color-neutral-200));
border-color: rgb(var(--sl-color-neutral-200));
}
.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-color-primary-500));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
}
@@ -84,7 +84,7 @@ export default css`
border-color: rgb(var(--sl-color-primary-500));
}
.switch--checked .switch__control .switch__thumb {
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-color-primary-500));
transform: translateX(calc((var(--width) - var(--height)) / 2));
}
@@ -95,7 +95,7 @@ export default css`
border-color: rgb(var(--sl-color-primary-400));
}
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-color-primary-500));
}
@@ -106,7 +106,7 @@ export default css`
}
.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
background-color: rgb(var(--sl-color-empty));
background-color: rgb(var(--sl-color-1000));
border-color: rgb(var(--sl-color-primary-500));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / var(--sl-focus-ring-alpha));
}

2
src/components/tab-group/tab-group.styles.ts
View File

@@ -5,7 +5,7 @@ export default css`
${componentStyles}
:host {
--tabs-border-color: rgb(var(--sl-color-gray-200));
--tabs-border-color: rgb(var(--sl-color-neutral-200));
display: block;
}

2
src/components/tab/tab.styles.ts
View File

@@ -18,7 +18,7 @@ export default css`
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
border-radius: 4px;
color: rgb(var(--sl-color-gray-600));
color: rgb(var(--sl-color-neutral-600));
padding: var(--sl-spacing-medium) var(--sl-spacing-large);
white-space: nowrap;
user-select: none;

8
src/components/tag/tag.styles.ts
View File

@@ -39,10 +39,10 @@ export default css`
color: rgb(var(--sl-color-success-700));
}
.tag--info {
background-color: rgb(var(--sl-color-info-100));
border-color: rgb(var(--sl-color-info-200));
color: rgb(var(--sl-color-info-700));
.tag--neutral {
background-color: rgb(var(--sl-color-neutral-100));
border-color: rgb(var(--sl-color-neutral-200));
color: rgb(var(--sl-color-neutral-700));
}
.tag--warning {

4
src/components/tag/tag.ts
View File

@@ -25,7 +25,7 @@ export default class SlTag extends LitElement {
static styles = styles;
/** The tag's type. */
@property({ reflect: true }) type: 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'primary';
@property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'primary';
/** The tag's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -50,7 +50,7 @@ export default class SlTag extends LitElement {
// Types
'tag--primary': this.type === 'primary',
'tag--success': this.type === 'success',
'tag--info': this.type === 'info',
'tag--neutral': this.type === 'neutral',
'tag--warning': this.type === 'warning',
'tag--danger': this.type === 'danger',
'tag--text': this.type === 'text',

74
src/themes/base.styles.ts
View File

@@ -298,8 +298,8 @@ export default css`
* Theme Tokens
*/
--sl-color-full: 0 0 0;
--sl-color-empty: 255 255 255;
--sl-color-0: 0 0 0;
--sl-color-1000: 255 255 255;
/* Primary */
--sl-color-primary-50: var(--sl-color-sky-50);
@@ -327,19 +327,6 @@ export default css`
--sl-color-success-900: var(--sl-color-green-900);
--sl-color-success-950: var(--sl-color-green-950);
/* Info */
--sl-color-info-50: var(--sl-color-gray-50);
--sl-color-info-100: var(--sl-color-gray-100);
--sl-color-info-200: var(--sl-color-gray-200);
--sl-color-info-300: var(--sl-color-gray-300);
--sl-color-info-400: var(--sl-color-gray-400);
--sl-color-info-500: var(--sl-color-gray-500);
--sl-color-info-600: var(--sl-color-gray-600);
--sl-color-info-700: var(--sl-color-gray-700);
--sl-color-info-800: var(--sl-color-gray-800);
--sl-color-info-900: var(--sl-color-gray-900);
--sl-color-info-950: var(--sl-color-gray-950);
/* Warning */
--sl-color-warning-50: var(--sl-color-amber-50);
--sl-color-warning-100: var(--sl-color-amber-100);
@@ -366,6 +353,19 @@ export default css`
--sl-color-danger-900: var(--sl-color-red-900);
--sl-color-danger-950: var(--sl-color-red-950);
/* Neutral */
--sl-color-neutral-50: var(--sl-color-gray-50);
--sl-color-neutral-100: var(--sl-color-gray-100);
--sl-color-neutral-200: var(--sl-color-gray-200);
--sl-color-neutral-300: var(--sl-color-gray-300);
--sl-color-neutral-400: var(--sl-color-gray-400);
--sl-color-neutral-500: var(--sl-color-gray-500);
--sl-color-neutral-600: var(--sl-color-gray-600);
--sl-color-neutral-700: var(--sl-color-gray-700);
--sl-color-neutral-800: var(--sl-color-gray-800);
--sl-color-neutral-900: var(--sl-color-gray-900);
--sl-color-neutral-950: var(--sl-color-gray-950);
/*
* Border radius tokens
*/
@@ -457,7 +457,7 @@ export default css`
/* Focus ring */
--sl-focus-ring-color-primary: var(--sl-color-primary-500);
--sl-focus-ring-color-success: var(--sl-color-success-500);
--sl-focus-ring-color-info: var(--sl-color-info-500);
--sl-focus-ring-color-neutral: var(--sl-color-neutral-500);
--sl-focus-ring-color-warning: var(--sl-color-warning-500);
--sl-focus-ring-color-danger: var(--sl-color-danger-500);
--sl-focus-ring-width: 3px;
@@ -473,14 +473,14 @@ export default css`
--sl-input-height-medium: 2.5rem; /* 40px */
--sl-input-height-large: 3.125rem; /* 50px */
--sl-input-background-color: var(--sl-color-empty);
--sl-input-background-color-hover: var(--sl-color-empty);
--sl-input-background-color-focus: var(--sl-color-empty);
--sl-input-background-color-disabled: var(--sl-color-gray-100);
--sl-input-border-color: var(--sl-color-gray-300);
--sl-input-border-color-hover: var(--sl-color-gray-400);
--sl-input-background-color: var(--sl-color-1000);
--sl-input-background-color-hover: var(--sl-color-1000);
--sl-input-background-color-focus: var(--sl-color-1000);
--sl-input-background-color-disabled: var(--sl-color-neutral-100);
--sl-input-border-color: var(--sl-color-neutral-300);
--sl-input-border-color-hover: var(--sl-color-neutral-400);
--sl-input-border-color-focus: var(--sl-color-primary-500);
--sl-input-border-color-disabled: var(--sl-color-gray-300);
--sl-input-border-color-disabled: var(--sl-color-neutral-300);
--sl-input-border-width: 1px;
--sl-input-border-radius-small: var(--sl-border-radius-medium);
@@ -494,15 +494,15 @@ export default css`
--sl-input-font-size-large: var(--sl-font-size-large);
--sl-input-letter-spacing: var(--sl-letter-spacing-normal);
--sl-input-color: var(--sl-color-gray-700);
--sl-input-color-hover: var(--sl-color-gray-700);
--sl-input-color-focus: var(--sl-color-gray-700);
--sl-input-color-disabled: var(--sl-color-gray-900);
--sl-input-icon-color: var(--sl-color-gray-400);
--sl-input-icon-color-hover: var(--sl-color-gray-600);
--sl-input-icon-color-focus: var(--sl-color-gray-600);
--sl-input-placeholder-color: var(--sl-color-gray-400);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
--sl-input-color: var(--sl-color-neutral-700);
--sl-input-color-hover: var(--sl-color-neutral-700);
--sl-input-color-focus: var(--sl-color-neutral-700);
--sl-input-color-disabled: var(--sl-color-neutral-900);
--sl-input-icon-color: var(--sl-color-neutral-400);
--sl-input-icon-color-hover: var(--sl-color-neutral-600);
--sl-input-icon-color-focus: var(--sl-color-neutral-600);
--sl-input-placeholder-color: var(--sl-color-neutral-400);
--sl-input-placeholder-color-disabled: var(--sl-color-neutral-600);
--sl-input-spacing-small: var(--sl-spacing-small);
--sl-input-spacing-medium: var(--sl-spacing-medium);
--sl-input-spacing-large: var(--sl-spacing-large);
@@ -519,7 +519,7 @@ export default css`
--sl-input-help-text-font-size-medium: var(--sl-font-size-small);
--sl-input-help-text-font-size-large: var(--sl-font-size-medium);
--sl-input-help-text-color: var(--sl-color-gray-400);
--sl-input-help-text-color: var(--sl-color-neutral-400);
/* Toggle (checkboxes, radios, switches) */
--sl-toggle-size: 1rem;
@@ -534,15 +534,15 @@ export default css`
* Panels
*/
--sl-panel-background-color: var(--sl-color-empty);
--sl-panel-border-color: var(--sl-color-gray-200);
--sl-panel-background-color: var(--sl-color-1000);
--sl-panel-border-color: var(--sl-color-neutral-200);
/*
* Tooltip tokens
*/
--sl-tooltip-border-radius: var(--sl-border-radius-medium);
--sl-tooltip-background-color: var(--sl-color-gray-900);
--sl-tooltip-color: var(--sl-color-empty);
--sl-tooltip-background-color: var(--sl-color-neutral-900);
--sl-tooltip-color: var(--sl-color-1000);
--sl-tooltip-font-family: var(--sl-font-sans);
--sl-tooltip-font-weight: var(--sl-font-weight-normal);
--sl-tooltip-font-size: var(--sl-font-size-small);

4
src/themes/dark.styles.ts
View File

@@ -3,8 +3,8 @@ import { css } from 'lit';
export default css`
:host,
.sl-theme-dark {
--sl-color-full: 255 255 255;
--sl-color-empty: var(--sl-color-gray-50);
--sl-color-0: 255 255 255;
--sl-color-1000: var(--sl-color-gray-50);
/* Blue Gray */
--sl-color-blue-gray-950: 248 250 252;