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

Rework form tokens

Browse Source
This commit is contained in:
Cory LaViska
2020-04-17 22:37:44 -04:00
parent cb71752fdb
commit 15e3ff88a8
14 changed files with 246 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -87,7 +87,7 @@ body.close .sidebar-toggle {
.sidebar-toggle:focus,
body.close .sidebar-toggle:focus {
border-color: var(--sl-form-control-border-color--focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
}
@@ -103,19 +103,18 @@ body.close .sidebar-toggle:focus {
}
.sidebar .search input {
border: solid 1px var(--sl-form-control-border-color);
border: solid 1px var(--sl-input-border-color);
border-radius: 3px;
padding: 0 var(--sl-form-control-padding-x--medium);
transition: var(--sl-form-control-transition-speed) color, var(--sl-form-control-transition-speed) border,
var(--sl-form-control-transition-speed) box-shadow;
padding: 0 var(--sl-spacing-small);
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
}
.sidebar .search input:hover {
border-color: var(--sl-form-control-border-color--hover);
border-color: var(--sl-input-border-color-hover);
}
.sidebar .search input:focus {
border-color: var(--sl-form-control-border-color--focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
}
@@ -186,7 +185,7 @@ body.close .sidebar-toggle:focus {
.content p.tip,
.content tr:nth-child(2n) {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-sat), 97%);
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 97%);
}
.content .docsify-copy-code-button {
@@ -217,7 +216,7 @@ body.close .sidebar-toggle:focus {
}
.content code {
background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-sat), 50%, 0.075);
background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%, 0.075);
font-family: var(--sl-font-mono);
font-size: 0.875em;
color: var(--sl-color-gray-20);
@@ -343,11 +342,11 @@ pre.code-block__source {
}
.code-block__toggle:hover {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-sat), 98%);
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 98%);
}
.code-block__toggle:active {
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-sat), 96%);
background-color: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 96%);
}
.code-block__toggle:focus {

1
docs/tokens/color.md
View File

@@ -3,6 +3,7 @@
TODO
- Describe how color tokens are generated using HSL
- Show hue + saturation tokens for each base color
## Primary

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

@@ -96,7 +96,7 @@
padding: 0 var(--sl-spacing-large);
cursor: pointer;
-webkit-appearance: none;
transition: var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color;
transition: var(--sl-transition-fast) background-color, var(--sl-transition-fast) color;
&:focus {
outline: none;
@@ -110,6 +110,6 @@
&.sl-alert--using-keyboard .sl-alert__close:focus {
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-sat), 50%, var(--sl-focus-ring-alpha));
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
}

60
src/components/button/button.scss
View File

@@ -15,14 +15,14 @@
justify-content: center;
width: 100%;
border-style: solid;
border-width: var(--sl-form-control-border-width);
font-family: var(--sl-form-control-font-sans-serif);
border-width: var(--sl-input-border-width);
font-family: var(--sl-input-font-family);
font-weight: var(--sl-font-weight-semibold);
user-select: none;
white-space: nowrap;
vertical-align: middle;
transition: var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color,
var(--sl-form-control-transition-speed) border;
transition: var(--sl-transition-fast) background-color, var(--sl-transition-fast) color,
var(--sl-transition-fast) border;
cursor: pointer;
&::-moz-focus-inner {
@@ -46,13 +46,11 @@
}
.sl-button__prefix ::slotted(:first-child) {
margin-left: -0.5em;
margin-right: 0.5em;
}
.sl-button__suffix ::slotted(:last-child) {
margin-left: 0.5em;
margin-right: -0.5em;
}
}
@@ -73,7 +71,7 @@
$border-color--focus: var(--sl-color-primary-70),
$color--focus: var(--sl-color-primary-40),
$box-shadow--focus: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-sat), 50%, var(--sl-focus-ring-alpha)),
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha)),
$background-color--active: var(--sl-color-primary-95),
$border-color--active: var(--sl-color-primary-50),
$color--active: var(--sl-color-primary-30)
@@ -92,7 +90,7 @@
$border-color--focus: var(--sl-color-primary-60),
$color--focus: var(--sl-color-primary-text),
$box-shadow--focus: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-sat), 50%, var(--sl-focus-ring-alpha)),
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha)),
$background-color--active: var(--sl-color-primary-50),
$border-color--active: var(--sl-color-primary-50),
$color--active: var(--sl-color-primary-text)
@@ -111,7 +109,7 @@
$border-color--focus: var(--sl-color-success-60),
$color--focus: var(--sl-color-success-text),
$box-shadow--focus: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-success-hue), var(--sl-color-success-sat), 50%, var(--sl-focus-ring-alpha)),
hsla(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%, var(--sl-focus-ring-alpha)),
$background-color--active: var(--sl-color-success-50),
$border-color--active: var(--sl-color-success-50),
$color--active: var(--sl-color-success-text)
@@ -130,7 +128,7 @@
$border-color--focus: var(--sl-color-info-60),
$color--focus: var(--sl-color-info-text),
$box-shadow--focus: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-info-hue), var(--sl-color-info-sat), 50%, var(--sl-focus-ring-alpha)),
hsla(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%, var(--sl-focus-ring-alpha)),
$background-color--active: var(--sl-color-info-50),
$border-color--active: var(--sl-color-info-50),
$color--active: var(--sl-color-info-text)
@@ -149,7 +147,7 @@
$border-color--focus: var(--sl-color-warning-60),
$color--focus: var(--sl-color-warning-text),
$box-shadow--focus: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-warning-hue), var(--sl-color-warning-sat), 50%, var(--sl-focus-ring-alpha)),
hsla(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%, var(--sl-focus-ring-alpha)),
$background-color--active: var(--sl-color-warning-50),
$border-color--active: var(--sl-color-warning-50),
$color--active: var(--sl-color-warning-text)
@@ -168,7 +166,7 @@
$border-color--focus: var(--sl-color-danger-60),
$color--focus: var(--sl-color-danger-text),
$box-shadow--focus: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-danger-hue), var(--sl-color-danger-sat), 50%, var(--sl-focus-ring-alpha)),
hsla(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%, var(--sl-focus-ring-alpha)),
$background-color--active: var(--sl-color-danger-50),
$border-color--active: var(--sl-color-danger-50),
$color--active: var(--sl-color-danger-text)
@@ -196,7 +194,7 @@
border-color: transparent;
color: var(--sl-color-primary-60);
box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-sat), 50%, var(--sl-focus-ring-alpha));
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
}
&:active:not(:disabled) {
@@ -219,26 +217,26 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-button--small {
font-size: var(--sl-form-control-font-size--small);
height: var(--sl-form-control-height--small);
line-height: calc(var(--sl-form-control-height--small) - var(--sl-form-control-border-width) * 2);
border-radius: var(--sl-form-control-border-radius--small);
font-size: var(--sl-input-font-size-small);
height: var(--sl-input-height-small);
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
border-radius: var(--sl-input-border-radius-small);
padding: 0 16px;
}
.sl-button--medium {
font-size: var(--sl-form-control-font-size--medium);
height: var(--sl-form-control-height--medium);
line-height: calc(var(--sl-form-control-height--medium) - var(--sl-form-control-border-width) * 2);
border-radius: var(--sl-form-control-border-radius--medium);
font-size: var(--sl-input-font-size-medium);
height: var(--sl-input-height-medium);
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
border-radius: var(--sl-input-border-radius-medium);
padding: 0 20px;
}
.sl-button--large {
font-size: var(--sl-form-control-font-size--large);
height: var(--sl-form-control-height--large);
line-height: calc(var(--sl-form-control-height--large) - var(--sl-form-control-border-width) * 2);
border-radius: var(--sl-form-control-border-radius--large);
font-size: var(--sl-input-font-size-large);
height: var(--sl-input-height-large);
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
border-radius: var(--sl-input-border-radius-large);
padding: 0 24px;
}
@@ -248,15 +246,15 @@
.sl-button--pill {
&.sl-button--small {
border-radius: var(--sl-form-control-height--small);
border-radius: var(--sl-input-height-small);
}
&.sl-button--medium {
border-radius: var(--sl-form-control-height--medium);
border-radius: var(--sl-input-height-medium);
}
&.sl-button--large {
border-radius: var(--sl-form-control-height--large);
border-radius: var(--sl-input-height-large);
}
}
@@ -275,17 +273,17 @@
}
&.sl-button--small {
width: var(--sl-form-control-height--small);
width: var(--sl-input-height-small);
border-radius: 50%;
}
&.sl-button--medium {
width: var(--sl-form-control-height--medium);
width: var(--sl-input-height-medium);
border-radius: 50%;
}
&.sl-button--large {
width: var(--sl-form-control-height--large);
width: var(--sl-input-height-large);
border-radius: 50%;
}

35
src/components/checkbox/checkbox.scss
View File

@@ -7,10 +7,10 @@
.sl-checkbox {
display: flex;
align-items: center;
font-family: var(--sl-form-control-font-sans-serif);
font-size: var(--sl-form-control-font-size--medium);
font-weight: var(--sl-font-weight-normal);
color: var(--sl-form-control-color);
font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-color);
vertical-align: middle;
cursor: pointer;
}
@@ -20,15 +20,14 @@
display: flex;
align-items: center;
justify-content: center;
width: var(--sl-form-control-checkbox-size);
height: var(--sl-form-control-checkbox-size);
border: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
width: var(--sl-toggle-size);
height: var(--sl-toggle-size);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-radius: 2px;
background-color: var(--sl-form-control-background-color);
background-color: var(--sl-input-background-color);
color: var(--sl-color-white);
transition: var(--sl-form-control-transition-speed) border-color,
var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color,
var(--sl-form-control-transition-speed) box-shadow;
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
input[type='checkbox'] {
position: absolute;
@@ -40,8 +39,8 @@
}
.sl-checkbox__icon {
width: var(--sl-form-control-checkbox-size);
height: var(--sl-form-control-checkbox-size);
width: var(--sl-toggle-size);
height: var(--sl-toggle-size);
svg {
width: 100%;
@@ -52,14 +51,14 @@
// Hover
.sl-checkbox:not(.sl-checkbox--checked):not(.sl-checkbox--disabled) .sl-checkbox__control:hover {
border-color: var(--sl-form-control-border-color--hover);
background-color: var(--sl-form-control-background-color--hover);
border-color: var(--sl-input-border-color-hover);
background-color: var(--sl-input-background-color-hover);
}
// Focus
.sl-checkbox.sl-checkbox--focused:not(.sl-checkbox--checked):not(.sl-checkbox--disabled) .sl-checkbox__control {
border-color: var(--sl-form-control-border-color--focus);
background-color: var(--sl-form-control-background-color--focus);
border-color: var(--sl-input-border-color-focus);
background-color: var(--sl-input-background-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
}
@@ -92,7 +91,7 @@
}
.sl-checkbox__label {
line-height: var(--sl-form-control-checkbox-size);
line-height: var(--sl-toggle-size);
margin-left: 0.5em;
user-select: none;
}

125
src/components/input/input.scss
View File

@@ -13,14 +13,13 @@
align-items: stretch;
justify-content: center;
position: relative;
font-family: var(--sl-form-control-font-family);
font-weight: var(--sl-form-control-font-weight);
background-color: var(--sl-form-control-background-color);
border: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
font-family: var(--sl-input-font-family);
font-weight: var(--sl-input-font-weight);
background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
vertical-align: middle;
overflow: hidden;
transition: var(--sl-form-control-transition-speed) color, var(--sl-form-control-transition-speed) border,
var(--sl-form-control-transition-speed) box-shadow;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
cursor: text;
.sl-input__control {
@@ -30,7 +29,7 @@
font-weight: inherit;
min-width: 0;
height: 100%;
color: var(--sl-form-control-color);
color: var(--sl-input-color);
border: none;
background: none;
padding: 0;
@@ -45,7 +44,7 @@
}
&::placeholder {
color: var(--sl-form-control-placeholder-color);
color: var(--sl-input-placeholder-color);
user-select: none;
}
@@ -55,35 +54,29 @@
}
&:hover:not(.sl-input--disabled) {
background-color: var(--sl-form-control-background-color--hover);
border-color: var(--sl-form-control-border-color--hover);
color: var(--sl-form-control-color--hover);
.sl-input__control {
&::placeholder {
color: var(--sl-form-control-placeholder-color--hover);
}
}
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
&.sl-input--focused:not(.sl-input--disabled) {
background-color: var(--sl-form-control-background-color--focus);
border-color: var(--sl-form-control-border-color--focus);
background-color: var(--sl-input-background-color-focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
color: var(--sl-form-control-color--focus);
color: var(--sl-input-color-focus);
}
&.sl-input--disabled {
background-color: var(--sl-form-control-background-color--disabled);
border-color: var(--sl-form-control-border-color--disabled);
background-color: var(--sl-input-background-color-disabled);
border-color: var(--sl-input-border-color-disabled);
opacity: 0.5;
.sl-input__control {
color: var(--sl-form-control-color--disabled);
color: var(--sl-input-color-disabled);
cursor: not-allowed;
&::placeholder {
color: var(--sl-form-control-placeholder-color--disabled);
color: var(--sl-input-placeholder-color-disabled);
}
}
}
@@ -108,15 +101,15 @@
}
.sl-input__before ::slotted(*) {
border-right: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
border-top-left-radius: var(--sl-form-control-border-radius--medium);
border-bottom-left-radius: var(--sl-form-control-border-radius--medium);
border-right: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-top-left-radius: var(--sl-input-border-radius-medium);
border-bottom-left-radius: var(--sl-input-border-radius-medium);
}
.sl-input__after ::slotted(*) {
border-left: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
border-top-right-radius: var(--sl-form-control-border-radius--medium);
border-bottom-right-radius: var(--sl-form-control-border-radius--medium);
border-left: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-top-right-radius: var(--sl-input-border-radius-medium);
border-bottom-right-radius: var(--sl-input-border-radius-medium);
}
.sl-input__prefix,
@@ -124,7 +117,7 @@
display: flex;
flex: 0 0 auto;
align-items: center;
color: var(--sl-form-control-placeholder-color);
color: var(--sl-input-placeholder-color);
}
}
@@ -133,95 +126,95 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-input--small {
border-radius: var(--sl-form-control-border-radius--small);
font-size: var(--sl-form-control-font-size--small);
height: var(--sl-form-control-height--small);
line-height: calc(var(--sl-form-control-height--small) - var(--sl-form-control-border-width) * 2);
border-radius: var(--sl-input-border-radius-small);
font-size: var(--sl-input-font-size-small);
height: var(--sl-input-height-small);
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
.sl-input__control {
height: calc(var(--sl-form-control-height--small) - var(--sl-form-control-border-width) * 2);
line-height: calc(var(--sl-form-control-height--small) - var(--sl-form-control-border-width) * 2);
margin: 0 var(--sl-form-control-padding-x--small);
height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
margin: 0 var(--sl-input-spacing-small);
}
.sl-input__clear,
.sl-input__password-toggle {
margin-right: var(--sl-form-control-padding-x--small);
margin-right: var(--sl-input-spacing-small);
}
.sl-input__prefix ::slotted(*) {
margin-left: var(--sl-form-control-padding-x--small);
margin-left: var(--sl-input-spacing-small);
}
.sl-input__suffix ::slotted(*) {
margin-right: var(--sl-form-control-padding-x--small);
margin-right: var(--sl-input-spacing-small);
}
.sl-input__before ::slotted(*),
.sl-input__after ::slotted(*) {
padding: 0 var(--sl-form-control-padding-x--small);
padding: 0 var(--sl-input-spacing-small);
}
}
.sl-input--medium {
border-radius: var(--sl-form-control-border-radius--medium);
font-size: var(--sl-form-control-font-size--medium);
height: var(--sl-form-control-height--medium);
line-height: calc(var(--sl-form-control-height--medium) - var(--sl-form-control-border-width) * 2);
border-radius: var(--sl-input-border-radius-medium);
font-size: var(--sl-input-font-size-medium);
height: var(--sl-input-height-medium);
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
.sl-input__control {
height: calc(var(--sl-form-control-height--medium) - var(--sl-form-control-border-width) * 2);
line-height: calc(var(--sl-form-control-height--medium) - var(--sl-form-control-border-width) * 2);
margin: 0 var(--sl-form-control-padding-x--medium);
height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
margin: 0 var(--sl-input-spacing-medium);
}
.sl-input__clear,
.sl-input__password-toggle {
margin-right: var(--sl-form-control-padding-x--medium);
margin-right: var(--sl-input-spacing-medium);
}
.sl-input__prefix ::slotted(*) {
margin-left: var(--sl-form-control-padding-x--medium);
margin-left: var(--sl-input-spacing-medium);
}
.sl-input__suffix ::slotted(*) {
margin-right: var(--sl-form-control-padding-x--medium);
margin-right: var(--sl-input-spacing-medium);
}
.sl-input__before ::slotted(*),
.sl-input__after ::slotted(*) {
padding: 0 var(--sl-form-control-padding-x--medium);
padding: 0 var(--sl-input-spacing-medium);
}
}
.sl-input--large {
border-radius: var(--sl-form-control-border-radius--large);
font-size: var(--sl-form-control-font-size--large);
height: var(--sl-form-control-height--large);
line-height: calc(var(--sl-form-control-height--large) - var(--sl-form-control-border-width) * 2);
border-radius: var(--sl-input-border-radius-large);
font-size: var(--sl-input-font-size-large);
height: var(--sl-input-height-large);
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
.sl-input__control {
height: calc(var(--sl-form-control-height--large) - var(--sl-form-control-border-width) * 2);
line-height: calc(var(--sl-form-control-height--large) - var(--sl-form-control-border-width) * 2);
margin: 0 var(--sl-form-control-padding-x--large);
height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
margin: 0 var(--sl-input-spacing-large);
}
.sl-input__clear,
.sl-input__password-toggle {
margin-right: var(--sl-form-control-padding-x--large);
margin-right: var(--sl-input-spacing-large);
}
.sl-input__prefix ::slotted(*) {
margin-left: var(--sl-form-control-padding-x--large);
margin-left: var(--sl-input-spacing-large);
}
.sl-input__suffix ::slotted(*) {
margin-right: var(--sl-form-control-padding-x--large);
margin-right: var(--sl-input-spacing-large);
}
.sl-input__before ::slotted(*),
.sl-input__after ::slotted(*) {
padding: 0 var(--sl-form-control-padding-x--large);
padding: 0 var(--sl-input-spacing-large);
}
}
@@ -234,7 +227,7 @@
display: flex;
align-items: center;
font-size: inherit;
color: var(--sl-form-control-placeholder-color);
color: var(--sl-input-placeholder-color);
border: none;
background: none;
padding: 0;
@@ -243,7 +236,7 @@
svg {
width: 1.2em;
height: 1.2em;
transition: var(--sl-form-control-transition-speed) filter;
transition: var(--sl-transition-fast) filter;
}
}

35
src/components/radio/radio.scss
View File

@@ -7,17 +7,17 @@
.sl-radio {
display: flex;
align-items: center;
font-family: var(--sl-form-control-font-sans-serif);
font-size: var(--sl-form-control-font-size--medium);
font-weight: var(--sl-font-weight-normal);
color: var(--sl-form-control-color);
font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-color);
vertical-align: middle;
cursor: pointer;
}
.sl-radio__icon {
width: var(--sl-form-control-checkbox-size);
height: var(--sl-form-control-checkbox-size);
width: var(--sl-toggle-size);
height: var(--sl-toggle-size);
svg {
width: 100%;
@@ -30,15 +30,14 @@
display: flex;
align-items: center;
justify-content: center;
width: var(--sl-form-control-checkbox-size);
height: var(--sl-form-control-checkbox-size);
border: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
width: var(--sl-toggle-size);
height: var(--sl-toggle-size);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-radius: 50%;
background-color: var(--sl-form-control-background-color);
background-color: var(--sl-input-background-color);
color: var(--sl-color-white);
transition: var(--sl-form-control-transition-speed) border-color,
var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color,
var(--sl-form-control-transition-speed) box-shadow;
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
input[type='radio'] {
position: absolute;
@@ -52,14 +51,14 @@
// Hover
.sl-radio:not(.sl-radio--checked):not(.sl-radio--disabled) .sl-radio__control:hover {
border-color: var(--sl-form-control-border-color--hover);
background-color: var(--sl-form-control-background-color--hover);
border-color: var(--sl-input-border-color-hover);
background-color: var(--sl-input-background-color-hover);
}
// Focus
.sl-radio.sl-radio--focused:not(.sl-radio--checked):not(.sl-radio--disabled) .sl-radio__control {
border-color: var(--sl-form-control-border-color--focus);
background-color: var(--sl-form-control-background-color--focus);
border-color: var(--sl-input-border-color-focus);
background-color: var(--sl-input-background-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
}
@@ -89,7 +88,7 @@
}
.sl-radio__label {
line-height: var(--sl-form-control-checkbox-size);
line-height: var(--sl-toggle-size);
margin-left: 0.5em;
user-select: none;
}

16
src/components/range/range.scss
View File

@@ -14,9 +14,9 @@
.sl-range__control {
-webkit-appearance: none;
width: 100%;
height: var(--sl-form-control-height--medium);
height: var(--sl-input-height-medium);
background: transparent;
line-height: var(--sl-form-control-height--medium);
line-height: var(--sl-input-height-medium);
vertical-align: middle;
// Webkit
@@ -34,12 +34,11 @@
height: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-50);
border: solid var(--sl-form-control-border-width) var(--sl-color-primary-50);
border: solid var(--sl-input-border-width) var(--sl-color-primary-50);
-webkit-appearance: none;
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
transition: var(--sl-form-control-transition-speed) border-color,
var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color,
var(--sl-form-control-transition-speed) box-shadow, var(--sl-form-control-transition-speed) transform;
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
cursor: pointer;
}
@@ -80,9 +79,8 @@
border-radius: 50%;
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-50);
transition: var(--sl-form-control-transition-speed) border-color,
var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color,
var(--sl-form-control-transition-speed) box-shadow, var(--sl-form-control-transition-speed) transform;
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
cursor: pointer;
}

28
src/components/switch/switch.scss
View File

@@ -1,8 +1,8 @@
@import 'component';
:host {
--height: var(--sl-form-control-checkbox-size);
--thumb-size: calc(var(--height) + 4px);
--height: var(--sl-toggle-size);
--thumb-size: calc(var(--height) + var(--height) / 4);
--track-border-radius: var(--height);
--width: calc(var(--height) * 2);
@@ -12,10 +12,10 @@
.sl-switch {
display: flex;
align-items: center;
font-family: var(--sl-form-control-font-family);
font-size: var(--sl-form-control-font-size--medium);
font-weight: var(--sl-form-control-font-weight);
color: var(--form-control-color);
font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-color);
vertical-align: middle;
cursor: pointer;
}
@@ -28,21 +28,19 @@
width: var(--width);
height: var(--height);
background-color: var(--sl-color-gray-80);
border: solid var(--sl-form-control-border-width) var(--sl-color-gray-80);
border: solid var(--sl-input-border-width) var(--sl-color-gray-80);
border-radius: var(--track-border-radius);
transition: var(--sl-form-control-transition-speed) border-color,
var(--sl-form-control-transition-speed) background-color;
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
.sl-switch__thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--sl-color-white);
border-radius: 50%;
border: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));
transition: var(--sl-form-control-transition-speed) transform ease,
var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) border-color,
var(--sl-form-control-transition-speed) box-shadow;
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
}
input[type='checkbox'] {
@@ -62,7 +60,7 @@
.sl-switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-form-control-border-color);
border-color: var(--sl-input-border-color);
}
}
@@ -73,7 +71,7 @@
.sl-switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-form-control-border-color);
border-color: var(--sl-input-border-color);
box-shadow: var(--sl-focus-ring-box-shadow);
}
}

3
src/components/tab-group/tab-group.scss
View File

@@ -17,8 +17,7 @@
.sl-tab-group__active-tab-indicator {
position: absolute;
transition: var(--sl-form-control-transition-speed) transform ease,
var(--sl-form-control-transition-speed) width ease;
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;
}
// Show a focus ring if the user is interacting with a keyboard

4
src/components/tab/tab.scss
View File

@@ -2,14 +2,14 @@
:host {
--focus-ring-box-shadow: inset 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-sat), 50%, var(--sl-focus-ring-alpha));
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%, var(--sl-focus-ring-alpha));
display: inline-block;
}
.sl-tab {
font-family: var(--sl-font-sans);
font-size: var(--sl-form-control-font-size--medium);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-font-weight-semibold);
border-radius: 4px;
color: var(--sl-color-gray-40);

59
src/components/textarea/textarea.scss
View File

@@ -12,13 +12,12 @@
display: flex;
align-items: center;
position: relative;
font-family: var(--sl-form-control-font-family);
font-weight: var(--sl-form-control-font-weight);
background-color: var(--sl-form-control-background-color);
border: solid var(--sl-form-control-border-width) var(--sl-form-control-border-color);
font-family: var(--sl-input-font-family);
font-weight: var(--sl-input-font-weight);
background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
vertical-align: middle;
transition: var(--sl-form-control-transition-speed) color, var(--sl-form-control-transition-speed) border,
var(--sl-form-control-transition-speed) box-shadow;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
.sl-textarea__control {
flex: 1 1 auto;
@@ -26,7 +25,7 @@
font-size: inherit;
font-weight: inherit;
line-height: 1.4;
color: var(--sl-form-control-color);
color: var(--sl-input-color);
border: none;
background: none;
-webkit-appearance: none;
@@ -39,7 +38,7 @@
}
&::placeholder {
color: var(--sl-form-control-placeholder-color);
color: var(--sl-input-placeholder-color);
user-select: none;
}
@@ -49,35 +48,29 @@
}
&:hover:not(.sl-textarea--disabled) {
background-color: var(--sl-form-control-background-color--hover);
border-color: var(--sl-form-control-border-color--hover);
color: var(--sl-form-control-color--hover);
.sl-textarea__control {
&::placeholder {
color: var(--sl-form-control-placeholder-color--hover);
}
}
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
&.sl-textarea--focused:not(.sl-textarea--disabled) {
background-color: var(--sl-form-control-background-color--focus);
border-color: var(--sl-form-control-border-color--focus);
background-color: var(--sl-input-background-color-focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: var(--sl-focus-ring-box-shadow);
color: var(--sl-form-control-color--focus);
color: var(--sl-input-color-focus);
}
&.sl-textarea--disabled {
background-color: var(--sl-form-control-background-color--disabled);
border-color: var(--sl-form-control-border-color--disabled);
color: var(--sl-form-control-color--disabled);
background-color: var(--sl-input-background-color-disabled);
border-color: var(--sl-input-border-color-disabled);
color: var(--sl-input-color-disabled);
opacity: 0.5;
.sl-textarea__control {
cursor: not-allowed;
&::placeholder {
color: var(--sl-form-control-placeholder-color--disabled);
color: var(--sl-input-placeholder-color-disabled);
}
}
}
@@ -88,29 +81,29 @@
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.sl-textarea--small {
border-radius: var(--sl-form-control-border-radius--small);
font-size: var(--sl-form-control-font-size--small);
border-radius: var(--sl-input-border-radius-small);
font-size: var(--sl-input-font-size-small);
.sl-textarea__control {
padding: 0.5em var(--sl-form-control-padding-x--small);
padding: 0.5em var(--sl-input-spacing-small);
}
}
.sl-textarea--medium {
border-radius: var(--sl-form-control-border-radius--medium);
font-size: var(--sl-form-control-font-size--medium);
border-radius: var(--sl-input-border-radius-medium);
font-size: var(--sl-input-font-size-medium);
.sl-textarea__control {
padding: 0.5em var(--sl-form-control-padding-x--medium);
padding: 0.5em var(--sl-input-spacing-medium);
}
}
.sl-textarea--large {
border-radius: var(--sl-form-control-border-radius--large);
font-size: var(--sl-form-control-font-size--large);
border-radius: var(--sl-input-border-radius-large);
font-size: var(--sl-input-font-size-large);
.sl-textarea__control {
padding: 0.5em var(--sl-form-control-padding-x--large);
padding: 0.5em var(--sl-input-spacing-large);
}
}

2
src/styles/mixins/make-color-palette.scss
View File

@@ -2,7 +2,7 @@
@mixin make-color-palette($name) {
@for $i from 5 through 95 {
@if $i == 95 or $i % 10 == 0 {
--sl-color-#{$name}-#{$i}: hsl(var(--sl-color-#{$name}-hue), var(--sl-color-#{$name}-sat), #{$i * 1%});
--sl-color-#{$name}-#{$i}: hsl(var(--sl-color-#{$name}-hue), var(--sl-color-#{$name}-saturation), #{$i * 1%});
}
}
}

114
src/styles/shoelace.scss
View File

@@ -10,27 +10,27 @@
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
--sl-color-primary-hue: 203;
--sl-color-primary-sat: 100%;
--sl-color-primary-saturation: 100%;
--sl-color-primary-text: var(--sl-color-white);
--sl-color-success-hue: 110;
--sl-color-success-sat: 60%;
--sl-color-success-saturation: 60%;
--sl-color-success-text: var(--sl-color-white);
--sl-color-info-hue: var(--sl-color-primary-hue);
--sl-color-info-sat: 10%;
--sl-color-info-saturation: 10%;
--sl-color-info-text: var(--sl-color-white);
--sl-color-warning-hue: 36;
--sl-color-warning-sat: 90%;
--sl-color-warning-saturation: 90%;
--sl-color-warning-text: var(--sl-color-white);
--sl-color-danger-hue: 0;
--sl-color-danger-sat: 80%;
--sl-color-danger-saturation: 80%;
--sl-color-danger-text: var(--sl-color-white);
--sl-color-gray-hue: var(--sl-color-primary-hue);
--sl-color-gray-sat: 20%;
--sl-color-gray-saturation: 20%;
--sl-color-gray-text: var(--sl-color-white);
--sl-color-white: white;
@@ -129,6 +129,61 @@
// Form
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Focus ring
--sl-focus-ring-hue: var(--sl-color-primary-hue);
--sl-focus-ring-saturation: var(--sl-color-primary-saturation);
--sl-focus-ring-lightness: 50%;
--sl-focus-ring-alpha: 0.33;
--sl-focus-ring-width: 3px;
--sl-focus-ring-box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(
var(--sl-focus-ring-hue),
var(--sl-focus-ring-saturation),
var(--sl-focus-ring-lightness),
var(--sl-focus-ring-alpha)
);
// Inputs
--sl-input-height-small: 30px;
--sl-input-height-medium: 40px;
--sl-input-height-large: 50px;
--sl-input-background-color: var(--sl-color-white);
--sl-input-background-color-hover: var(--sl-color-white);
--sl-input-background-color-focus: var(--sl-color-white);
--sl-input-background-color-disabled: var(--sl-color-gray-95);
--sl-input-border-color: var(--sl-color-gray-80);
--sl-input-border-color-hover: var(--sl-color-gray-70);
--sl-input-border-color-focus: var(--sl-color-primary-50);
--sl-input-border-color-disabled: var(--sl-color-gray-80);
--sl-input-border-width: 1px;
--sl-input-border-radius-small: 4px;
--sl-input-border-radius-medium: 4px;
--sl-input-border-radius-large: 4px;
--sl-input-font-family: var(--sl-font-sans);
--sl-input-font-weight: var(--sl-font-weight-normal);
--sl-input-font-size-small: 12px;
--sl-input-font-size-medium: 14px;
--sl-input-font-size-large: 16px;
--sl-input-color: var(--sl-color-gray-30);
--sl-input-color-hover: var(--sl-color-gray-30);
--sl-input-color-focus: var(--sl-color-gray-30);
--sl-input-color-disabled: var(--sl-color-gray-10);
--sl-input-placeholder-color: var(--sl-color-gray-60);
--sl-input-placeholder-color-disabled: var(--sl-color-gray-40);
--sl-input-spacing-small: 10px;
--sl-input-spacing-medium: 12px;
--sl-input-spacing-large: 14px;
// Toggles (checkboxes, radios, switches)
--sl-toggle-size: 16px;
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Z-index
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -142,53 +197,6 @@
--sl-z-index-tooltip: 1000;
}
//
// TODO:
//
// - eliminate what we can using spacing and other tokens
// - remove CSS vars that are only being used for customizations (we have ::part now)
// - Add new tokens based on what's left as necessary
//
:root {
// Form controls
--sl-focus-ring-alpha: 0.33;
--sl-focus-ring-box-shadow: 0 0 0 var(--sl-focus-ring-width)
hsla(var(--sl-color-primary-hue), var(--sl-color-primary-sat), 50%, var(--sl-focus-ring-alpha));
--sl-focus-ring-width: 3px;
--sl-form-control-background-color--disabled: var(--sl-color-gray-95);
--sl-form-control-background-color--focus: var(--sl-color-white);
--sl-form-control-background-color--hover: var(--sl-color-white);
--sl-form-control-background-color: var(--sl-color-white);
--sl-form-control-border-color--disabled: var(--sl-color-gray-80);
--sl-form-control-border-color--focus: var(--sl-color-primary-50);
--sl-form-control-border-color--hover: var(--sl-color-gray-70);
--sl-form-control-border-color: var(--sl-color-gray-80);
--sl-form-control-border-radius--large: 4px;
--sl-form-control-border-radius--medium: 4px;
--sl-form-control-border-radius--small: 4px;
--sl-form-control-border-width: 1px;
--sl-form-control-checkbox-size: 14px;
--sl-form-control-color--disabled: var(--sl-color-gray-10);
--sl-form-control-color--focus: var(--sl-color-gray-30);
--sl-form-control-color--hover: var(--sl-color-gray-30);
--sl-form-control-color: var(--sl-color-gray-30);
--sl-form-control-font-family: var(--sl-font-sans);
--sl-form-control-font-size--large: 16px;
--sl-form-control-font-size--medium: 14px;
--sl-form-control-font-size--small: 12px;
--sl-form-control-font-weight: var(--sl-font-weight-normal);
--sl-form-control-height--large: 50px;
--sl-form-control-height--medium: 40px;
--sl-form-control-height--small: 30px;
--sl-form-control-padding-x--large: 12px;
--sl-form-control-padding-x--medium: 10px;
--sl-form-control-padding-x--small: 8px;
--sl-form-control-placeholder-color--disabled: var(--sl-color-gray-40);
--sl-form-control-placeholder-color--hover: var(--sl-color-gray-60);
--sl-form-control-placeholder-color: var(--sl-color-gray-60);
--sl-form-control-transition-speed: 150ms;
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Tooltips
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////