mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Rework design tokens
This commit is contained in:
Cory LaViska
@@ -13,49 +13,7 @@ TODO
|
||||
|
||||
Spacing tokens are used to provide consistent spacing in your app.
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; margin: 0 -20px;">
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xxs); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--xxs</code>
|
||||
</div>
|
||||
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xs); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--xs</code>
|
||||
</div>
|
||||
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--sm); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--sm</code>
|
||||
</div>
|
||||
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--md); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--md</code>
|
||||
</div>
|
||||
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--lg); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--lg</code>
|
||||
</div>
|
||||
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xl); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--xl</code>
|
||||
</div>
|
||||
|
||||
<div style="border: solid 1px var(--sl-color-gray-90); border-radius: 3px; padding: 20px; margin: 20px;">
|
||||
<span style="display: inline-block; vertical-align: middle; border-top: solid 6px var(--sl-color-primary-50); padding-left: var(--sl-spacing--xxl); margin-bottom: 10px;"></span>
|
||||
<br>
|
||||
<code>--sl-spacing--xxl</code>
|
||||
</div>
|
||||
</div>
|
||||
TODO
|
||||
|
||||
|
||||
## Elevation
|
||||
@@ -63,11 +21,11 @@ Spacing tokens are used to provide consistent spacing in your app.
|
||||
Elevation tokens are used to give elements the appearance of being raised off the page. They are especially useful for menus, popovers, dialogs, etc.
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; margin: 0 -20px;">
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--xs);"><code>--sl-elevation--xs</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--sm);"><code>--sl-elevation--sm</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--md);"><code>--sl-elevation--md</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--lg);"><code>--sl-elevation--lg</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation--xl);"><code>--sl-elevation--xl</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-0);"><code>--sl-elevation-0</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-1);"><code>--sl-elevation-1</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-2);"><code>--sl-elevation-2</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-3);"><code>--sl-elevation-3</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sl-elevation-4);"><code>--sl-elevation-4</code></div>
|
||||
</div>
|
||||
|
||||
## Animation
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
body {
|
||||
font-family: var(--sl-font-sans-serif);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: 16px;
|
||||
font-weight: var(--sl-font-weight--normal);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
}
|
||||
|
||||
.sidebar h1 {
|
||||
@@ -102,7 +102,7 @@ body.close .sidebar-toggle {
|
||||
.content pre,
|
||||
.content pre > code {
|
||||
border-radius: 3px;
|
||||
font-family: var(--sl-font-monospace);
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 0.825rem;
|
||||
color: var(--sl-color-gray-20);
|
||||
-webkit-font-smoothing: auto;
|
||||
@@ -117,7 +117,7 @@ body.close .sidebar-toggle {
|
||||
|
||||
.content code {
|
||||
background-color: transparent;
|
||||
font-family: var(--sl-font-monospace);
|
||||
font-family: var(--sl-font-mono);
|
||||
font-size: 0.875em;
|
||||
color: var(--sl-color-warning-50);
|
||||
padding: 0;
|
||||
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
@@ -3469,6 +3469,11 @@
|
||||
"remove-trailing-separator": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"normalize.css": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
|
||||
"integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
|
||||
},
|
||||
"now-and-later": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-2.0.1.tgz",
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
"dependencies": {
|
||||
"@stencil/core": "^1.9.2",
|
||||
"@stencil/sass": "^1.1.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"popper.js": "^1.16.0",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"tippy.js": "^5.1.3"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
@@ -11,7 +11,7 @@
|
||||
background-color: var(--sl-color-white);
|
||||
border-left: solid 4px;
|
||||
border-radius: 0;
|
||||
font-family: var(--sl-font-sans-serif);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: 14px;
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
line-height: 1.6;
|
||||
@@ -73,13 +73,13 @@
|
||||
align-items: center;
|
||||
|
||||
::slotted(*) {
|
||||
margin-left: var(--sl-spacing--lg);
|
||||
margin-left: var(--sl-spacing-6);
|
||||
}
|
||||
}
|
||||
|
||||
.sl-alert__body {
|
||||
flex: 1 1 auto;
|
||||
padding: var(--sl-spacing--md) var(--sl-spacing--lg);
|
||||
padding: var(--sl-spacing-5) var(--sl-spacing-6);
|
||||
}
|
||||
|
||||
.sl-alert__close {
|
||||
@@ -91,7 +91,7 @@
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
color: currentColor;
|
||||
padding: 0 var(--sl-spacing--lg);
|
||||
padding: 0 var(--sl-spacing-6);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
transition: var(--sl-form-control-transition-speed) background-color, var(--sl-form-control-transition-speed) color;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'reset';
|
||||
@import 'button.mixins.scss';
|
||||
@import 'component';
|
||||
@import 'mixins/button';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
@@ -16,7 +16,7 @@
|
||||
border-style: solid;
|
||||
border-width: var(--sl-form-control-border-width);
|
||||
font-family: var(--sl-form-control-font-sans-serif);
|
||||
font-weight: var(--sl-font-weight--bold);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
@@ -9,7 +9,7 @@
|
||||
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);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--sl-form-control-color);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
@@ -14,9 +14,9 @@
|
||||
|
||||
.sl-progress-bar__indicator {
|
||||
height: 100%;
|
||||
font-family: var(--sl-font-sans-serif);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: var(--sl-font-weight--normal);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-white);
|
||||
text-align: center;
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
font-family: var(--sl-font-sans-serif);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: var(--sl-font-weight--normal);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
}
|
||||
|
||||
.sl-progress-ring__track {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
@@ -9,7 +9,7 @@
|
||||
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);
|
||||
font-weight: var(--sl-font-weight-normal);
|
||||
color: var(--sl-form-control-color);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
--thumb-size: 20px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
--height: var(--sl-form-control-checkbox-size);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
:host {
|
||||
--focus-ring-box-shadow: inset 0 0 0 var(--sl-focus-ring-width)
|
||||
@@ -8,9 +8,9 @@
|
||||
}
|
||||
|
||||
.sl-tab {
|
||||
font-family: var(--sl-font-sans-serif);
|
||||
font-family: var(--sl-font-sans);
|
||||
font-size: var(--sl-form-control-font-size--medium);
|
||||
font-weight: var(--sl-font-weight--bold);
|
||||
font-weight: var(--sl-font-weight-semibold);
|
||||
border-radius: 4px;
|
||||
color: var(--sl-color-gray-40);
|
||||
padding: 16px 20px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'reset';
|
||||
@import 'mixins';
|
||||
@import 'component';
|
||||
@import 'mixins/hide-scrollbar';
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'component';
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
//
|
||||
// Tooltip styles are imported globally in shoelace.scss because we're using Tippy.js. This library appends tooltips
|
||||
// directly to the <body> element, so we need the styles to not be scoped to the component.
|
||||
//
|
||||
@import 'tippy.js/dist/tippy';
|
||||
|
||||
.tippy-tooltip {
|
||||
border-radius: var(--sl-tooltip-border-radius);
|
||||
background-color: var(--sl-tooltip-background-color);
|
||||
|
||||
.tippy-arrow {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
&[data-placement^='top'] .tippy-arrow {
|
||||
border-top-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement^='bottom'] .tippy-arrow {
|
||||
border-bottom-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement^='left'] .tippy-arrow {
|
||||
border-left-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement^='right'] .tippy-arrow {
|
||||
border-right-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
font-family: var(--sl-tooltip-font-family);
|
||||
font-size: var(--sl-tooltip-font-size);
|
||||
font-weight: var(--sl-tooltip-font-weight);
|
||||
line-height: var(--sl-tooltip-line-height);
|
||||
color: var(--sl-tooltip-color);
|
||||
padding: var(--sl-tooltip-padding-y) var(--sl-tooltip-padding-x);
|
||||
}
|
||||
}
|
||||
@@ -1,83 +1,25 @@
|
||||
@import '../components/tooltip/tooltip';
|
||||
/*! Shoelace */
|
||||
@import './tokens/border-radius.scss';
|
||||
@import './tokens/color.scss';
|
||||
@import './tokens/elevation.scss';
|
||||
@import './tokens/spacing.scss';
|
||||
@import './tokens/transition.scss';
|
||||
@import './tokens/typography.scss';
|
||||
@import './tokens/z-index.scss';
|
||||
|
||||
// Third-party libs
|
||||
@import 'node_modules/normalize.css/normalize';
|
||||
@import 'tippy.js/dist/tippy';
|
||||
|
||||
//
|
||||
// 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 {
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Fonts
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-font-monospace: Menlo, Monaco, 'Courier New', monospace;
|
||||
--sl-font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
--sl-font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
--sl-font-weight--light: 300;
|
||||
--sl-font-weight--normal: 400;
|
||||
--sl-font-weight--bold: 500;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Spacing
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-spacing--xxs: 4px;
|
||||
--sl-spacing--xs: 8px;
|
||||
--sl-spacing--sm: 16px;
|
||||
--sl-spacing--md: 32px;
|
||||
--sl-spacing--lg: 48px;
|
||||
--sl-spacing--xl: 64px;
|
||||
--sl-spacing--xxl: 96px;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Elevation
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-elevation--xs: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
--sl-elevation--sm: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--sl-elevation--md: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
--sl-elevation--lg: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
--sl-elevation--xl: 0 16px 32px rgba(0, 0, 0, 0.1);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Animation & Transitions
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-transition--slow: 500ms;
|
||||
--sl-transition--medium: 325ms;
|
||||
--sl-transition--fast: 150ms;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Colors
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-color-primary-hue: 203;
|
||||
--sl-color-primary-saturation: 100%;
|
||||
--sl-color-primary-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-success-hue: 110;
|
||||
--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-saturation: 10%;
|
||||
--sl-color-info-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-warning-hue: 36;
|
||||
--sl-color-warning-saturation: 90%;
|
||||
--sl-color-warning-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-danger-hue: 0;
|
||||
--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-saturation: 10%;
|
||||
--sl-color-gray-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-white: white;
|
||||
--sl-color-black: black;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 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-saturation), 50%, var(--sl-focus-ring-alpha));
|
||||
@@ -99,11 +41,11 @@
|
||||
--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-serif);
|
||||
--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-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;
|
||||
@@ -115,16 +57,13 @@
|
||||
--sl-form-control-placeholder-color: var(--sl-color-gray-60);
|
||||
--sl-form-control-transition-speed: 150ms;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Menus
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-menu-background-color: var(--sl-color-white);
|
||||
--sl-menu-border-color: var(--sl-color-gray-90);
|
||||
--sl-menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
--sl-menu-font-family: var(--sl-font-sans-serif);
|
||||
--sl-menu-font-family: var(--sl-font-sans);
|
||||
--sl-menu-font-size: var(--text-size-default);
|
||||
--sl-menu-font-weight: var(--sl-font-weight--normal);
|
||||
--sl-menu-font-weight: var(--sl-font-weight-normal);
|
||||
--sl-menu-padding-x: 30px;
|
||||
--sl-menu-padding-y: 10px;
|
||||
--sl-menu-transition-speed: 150ms;
|
||||
@@ -137,10 +76,7 @@
|
||||
--sl-menu-item-color: var(--sl-color-gray-40);
|
||||
--sl-menu-item-transition-speed: 150ms;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Tooltips
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-tooltip-background-color: var(--sl-color-gray-10);
|
||||
--sl-tooltip-border-radius: 4px;
|
||||
--sl-tooltip-color: var(--sl-color-white);
|
||||
@@ -150,128 +86,46 @@
|
||||
--sl-tooltip-line-height: 1.4;
|
||||
--sl-tooltip-padding-x: 10px;
|
||||
--sl-tooltip-padding-y: 5px;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 🐉 Here be color palettes for each theme color. No need to change these...update hues & saturations instead!
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-color-primary-05: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 5%);
|
||||
--sl-color-primary-10: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 10%);
|
||||
--sl-color-primary-15: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 15%);
|
||||
--sl-color-primary-20: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 20%);
|
||||
--sl-color-primary-25: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 25%);
|
||||
--sl-color-primary-30: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 30%);
|
||||
--sl-color-primary-35: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 35%);
|
||||
--sl-color-primary-40: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 40%);
|
||||
--sl-color-primary-45: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 45%);
|
||||
--sl-color-primary-50: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%);
|
||||
--sl-color-primary-55: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 55%);
|
||||
--sl-color-primary-60: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 60%);
|
||||
--sl-color-primary-65: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 65%);
|
||||
--sl-color-primary-70: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 70%);
|
||||
--sl-color-primary-75: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 75%);
|
||||
--sl-color-primary-80: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 80%);
|
||||
--sl-color-primary-85: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 85%);
|
||||
--sl-color-primary-90: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 90%);
|
||||
--sl-color-primary-95: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 95%);
|
||||
|
||||
--sl-color-success-05: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 5%);
|
||||
--sl-color-success-10: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 10%);
|
||||
--sl-color-success-15: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 15%);
|
||||
--sl-color-success-20: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 20%);
|
||||
--sl-color-success-25: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 25%);
|
||||
--sl-color-success-30: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 30%);
|
||||
--sl-color-success-35: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 35%);
|
||||
--sl-color-success-40: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 40%);
|
||||
--sl-color-success-45: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 45%);
|
||||
--sl-color-success-50: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%);
|
||||
--sl-color-success-55: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 55%);
|
||||
--sl-color-success-60: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 60%);
|
||||
--sl-color-success-65: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 65%);
|
||||
--sl-color-success-70: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 70%);
|
||||
--sl-color-success-75: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 75%);
|
||||
--sl-color-success-80: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 80%);
|
||||
--sl-color-success-85: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 85%);
|
||||
--sl-color-success-90: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 90%);
|
||||
--sl-color-success-95: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 95%);
|
||||
|
||||
--sl-color-info-05: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 5%);
|
||||
--sl-color-info-10: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 10%);
|
||||
--sl-color-info-15: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 15%);
|
||||
--sl-color-info-20: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 20%);
|
||||
--sl-color-info-25: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 25%);
|
||||
--sl-color-info-30: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 30%);
|
||||
--sl-color-info-35: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 35%);
|
||||
--sl-color-info-40: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 40%);
|
||||
--sl-color-info-45: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 45%);
|
||||
--sl-color-info-50: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%);
|
||||
--sl-color-info-55: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 55%);
|
||||
--sl-color-info-60: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 60%);
|
||||
--sl-color-info-65: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 65%);
|
||||
--sl-color-info-70: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 70%);
|
||||
--sl-color-info-75: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 75%);
|
||||
--sl-color-info-80: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 80%);
|
||||
--sl-color-info-85: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 85%);
|
||||
--sl-color-info-90: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 90%);
|
||||
--sl-color-info-95: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 95%);
|
||||
|
||||
--sl-color-warning-05: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 5%);
|
||||
--sl-color-warning-10: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 10%);
|
||||
--sl-color-warning-15: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 15%);
|
||||
--sl-color-warning-20: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 20%);
|
||||
--sl-color-warning-25: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 25%);
|
||||
--sl-color-warning-30: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 30%);
|
||||
--sl-color-warning-35: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 35%);
|
||||
--sl-color-warning-40: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 40%);
|
||||
--sl-color-warning-45: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 45%);
|
||||
--sl-color-warning-50: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%);
|
||||
--sl-color-warning-55: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 55%);
|
||||
--sl-color-warning-60: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 60%);
|
||||
--sl-color-warning-65: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 65%);
|
||||
--sl-color-warning-70: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 70%);
|
||||
--sl-color-warning-75: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 75%);
|
||||
--sl-color-warning-80: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 80%);
|
||||
--sl-color-warning-85: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 85%);
|
||||
--sl-color-warning-90: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 90%);
|
||||
--sl-color-warning-95: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 95%);
|
||||
|
||||
--sl-color-danger-05: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 5%);
|
||||
--sl-color-danger-10: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 10%);
|
||||
--sl-color-danger-15: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 15%);
|
||||
--sl-color-danger-20: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 20%);
|
||||
--sl-color-danger-25: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 25%);
|
||||
--sl-color-danger-30: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 30%);
|
||||
--sl-color-danger-35: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 35%);
|
||||
--sl-color-danger-40: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 40%);
|
||||
--sl-color-danger-45: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 45%);
|
||||
--sl-color-danger-50: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%);
|
||||
--sl-color-danger-55: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 55%);
|
||||
--sl-color-danger-60: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 60%);
|
||||
--sl-color-danger-65: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 65%);
|
||||
--sl-color-danger-70: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 70%);
|
||||
--sl-color-danger-75: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 75%);
|
||||
--sl-color-danger-80: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 80%);
|
||||
--sl-color-danger-85: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 85%);
|
||||
--sl-color-danger-90: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 90%);
|
||||
--sl-color-danger-95: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 95%);
|
||||
|
||||
--sl-color-gray-05: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 5%);
|
||||
--sl-color-gray-10: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%);
|
||||
--sl-color-gray-15: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 15%);
|
||||
--sl-color-gray-20: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%);
|
||||
--sl-color-gray-25: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 25%);
|
||||
--sl-color-gray-30: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 30%);
|
||||
--sl-color-gray-35: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 35%);
|
||||
--sl-color-gray-40: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 40%);
|
||||
--sl-color-gray-45: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 45%);
|
||||
--sl-color-gray-50: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%);
|
||||
--sl-color-gray-55: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 55%);
|
||||
--sl-color-gray-60: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 60%);
|
||||
--sl-color-gray-65: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 65%);
|
||||
--sl-color-gray-70: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 70%);
|
||||
--sl-color-gray-75: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 75%);
|
||||
--sl-color-gray-80: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%);
|
||||
--sl-color-gray-85: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 85%);
|
||||
--sl-color-gray-90: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 90%);
|
||||
--sl-color-gray-95: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 95%);
|
||||
}
|
||||
|
||||
// Base styles
|
||||
body {
|
||||
font-family: var(--sl-font-body);
|
||||
font-weight: var(--sl-font-weight-body);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// Customize tooltips using our own tokens
|
||||
.tippy-tooltip {
|
||||
border-radius: var(--sl-tooltip-border-radius);
|
||||
background-color: var(--sl-tooltip-background-color);
|
||||
|
||||
.tippy-arrow {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
&[data-placement^='top'] .tippy-arrow {
|
||||
border-top-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement^='bottom'] .tippy-arrow {
|
||||
border-bottom-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement^='left'] .tippy-arrow {
|
||||
border-left-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
&[data-placement^='right'] .tippy-arrow {
|
||||
border-right-color: var(--sl-tooltip-background-color);
|
||||
}
|
||||
|
||||
.tippy-content {
|
||||
font-family: var(--sl-tooltip-font-family);
|
||||
font-size: var(--sl-tooltip-font-size);
|
||||
font-weight: var(--sl-tooltip-font-weight);
|
||||
line-height: var(--sl-tooltip-line-height);
|
||||
color: var(--sl-tooltip-color);
|
||||
padding: var(--sl-tooltip-padding-y) var(--sl-tooltip-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
10
src/styles/tokens/border-radius.scss
Normal file
10
src/styles/tokens/border-radius.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
:host {
|
||||
--sl-border-radius-0: 0;
|
||||
--sl-border-radius-1: 0.125rem;
|
||||
--sl-border-radius-2: 0.25rem;
|
||||
--sl-border-radius-3: 0.5rem;
|
||||
--sl-border-radius-4: 1rem;
|
||||
|
||||
--sl-border-radius-circle: 50%;
|
||||
--sl-border-radius-pill: 9999px;
|
||||
}
|
||||
152
src/styles/tokens/color.scss
Normal file
152
src/styles/tokens/color.scss
Normal file
@@ -0,0 +1,152 @@
|
||||
:root {
|
||||
--sl-color-primary-hue: 203;
|
||||
--sl-color-primary-saturation: 100%;
|
||||
--sl-color-primary-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-success-hue: 110;
|
||||
--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-saturation: 10%;
|
||||
--sl-color-info-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-warning-hue: 36;
|
||||
--sl-color-warning-saturation: 90%;
|
||||
--sl-color-warning-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-danger-hue: 0;
|
||||
--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-saturation: 10%;
|
||||
--sl-color-gray-text: var(--sl-color-white);
|
||||
|
||||
--sl-color-white: white;
|
||||
--sl-color-black: black;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 🐉 Here be color palettes. No need to change these...just update hues and saturations above!
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sl-color-primary-05: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 5%);
|
||||
--sl-color-primary-10: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 10%);
|
||||
--sl-color-primary-15: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 15%);
|
||||
--sl-color-primary-20: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 20%);
|
||||
--sl-color-primary-25: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 25%);
|
||||
--sl-color-primary-30: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 30%);
|
||||
--sl-color-primary-35: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 35%);
|
||||
--sl-color-primary-40: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 40%);
|
||||
--sl-color-primary-45: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 45%);
|
||||
--sl-color-primary-50: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 50%);
|
||||
--sl-color-primary-55: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 55%);
|
||||
--sl-color-primary-60: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 60%);
|
||||
--sl-color-primary-65: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 65%);
|
||||
--sl-color-primary-70: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 70%);
|
||||
--sl-color-primary-75: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 75%);
|
||||
--sl-color-primary-80: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 80%);
|
||||
--sl-color-primary-85: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 85%);
|
||||
--sl-color-primary-90: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 90%);
|
||||
--sl-color-primary-95: hsl(var(--sl-color-primary-hue), var(--sl-color-primary-saturation), 95%);
|
||||
|
||||
--sl-color-success-05: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 5%);
|
||||
--sl-color-success-10: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 10%);
|
||||
--sl-color-success-15: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 15%);
|
||||
--sl-color-success-20: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 20%);
|
||||
--sl-color-success-25: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 25%);
|
||||
--sl-color-success-30: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 30%);
|
||||
--sl-color-success-35: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 35%);
|
||||
--sl-color-success-40: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 40%);
|
||||
--sl-color-success-45: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 45%);
|
||||
--sl-color-success-50: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 50%);
|
||||
--sl-color-success-55: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 55%);
|
||||
--sl-color-success-60: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 60%);
|
||||
--sl-color-success-65: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 65%);
|
||||
--sl-color-success-70: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 70%);
|
||||
--sl-color-success-75: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 75%);
|
||||
--sl-color-success-80: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 80%);
|
||||
--sl-color-success-85: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 85%);
|
||||
--sl-color-success-90: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 90%);
|
||||
--sl-color-success-95: hsl(var(--sl-color-success-hue), var(--sl-color-success-saturation), 95%);
|
||||
|
||||
--sl-color-info-05: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 5%);
|
||||
--sl-color-info-10: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 10%);
|
||||
--sl-color-info-15: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 15%);
|
||||
--sl-color-info-20: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 20%);
|
||||
--sl-color-info-25: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 25%);
|
||||
--sl-color-info-30: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 30%);
|
||||
--sl-color-info-35: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 35%);
|
||||
--sl-color-info-40: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 40%);
|
||||
--sl-color-info-45: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 45%);
|
||||
--sl-color-info-50: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 50%);
|
||||
--sl-color-info-55: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 55%);
|
||||
--sl-color-info-60: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 60%);
|
||||
--sl-color-info-65: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 65%);
|
||||
--sl-color-info-70: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 70%);
|
||||
--sl-color-info-75: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 75%);
|
||||
--sl-color-info-80: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 80%);
|
||||
--sl-color-info-85: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 85%);
|
||||
--sl-color-info-90: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 90%);
|
||||
--sl-color-info-95: hsl(var(--sl-color-info-hue), var(--sl-color-info-saturation), 95%);
|
||||
|
||||
--sl-color-warning-05: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 5%);
|
||||
--sl-color-warning-10: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 10%);
|
||||
--sl-color-warning-15: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 15%);
|
||||
--sl-color-warning-20: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 20%);
|
||||
--sl-color-warning-25: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 25%);
|
||||
--sl-color-warning-30: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 30%);
|
||||
--sl-color-warning-35: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 35%);
|
||||
--sl-color-warning-40: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 40%);
|
||||
--sl-color-warning-45: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 45%);
|
||||
--sl-color-warning-50: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 50%);
|
||||
--sl-color-warning-55: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 55%);
|
||||
--sl-color-warning-60: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 60%);
|
||||
--sl-color-warning-65: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 65%);
|
||||
--sl-color-warning-70: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 70%);
|
||||
--sl-color-warning-75: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 75%);
|
||||
--sl-color-warning-80: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 80%);
|
||||
--sl-color-warning-85: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 85%);
|
||||
--sl-color-warning-90: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 90%);
|
||||
--sl-color-warning-95: hsl(var(--sl-color-warning-hue), var(--sl-color-warning-saturation), 95%);
|
||||
|
||||
--sl-color-danger-05: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 5%);
|
||||
--sl-color-danger-10: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 10%);
|
||||
--sl-color-danger-15: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 15%);
|
||||
--sl-color-danger-20: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 20%);
|
||||
--sl-color-danger-25: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 25%);
|
||||
--sl-color-danger-30: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 30%);
|
||||
--sl-color-danger-35: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 35%);
|
||||
--sl-color-danger-40: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 40%);
|
||||
--sl-color-danger-45: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 45%);
|
||||
--sl-color-danger-50: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 50%);
|
||||
--sl-color-danger-55: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 55%);
|
||||
--sl-color-danger-60: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 60%);
|
||||
--sl-color-danger-65: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 65%);
|
||||
--sl-color-danger-70: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 70%);
|
||||
--sl-color-danger-75: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 75%);
|
||||
--sl-color-danger-80: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 80%);
|
||||
--sl-color-danger-85: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 85%);
|
||||
--sl-color-danger-90: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 90%);
|
||||
--sl-color-danger-95: hsl(var(--sl-color-danger-hue), var(--sl-color-danger-saturation), 95%);
|
||||
|
||||
--sl-color-gray-05: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 5%);
|
||||
--sl-color-gray-10: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 10%);
|
||||
--sl-color-gray-15: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 15%);
|
||||
--sl-color-gray-20: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%);
|
||||
--sl-color-gray-25: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 25%);
|
||||
--sl-color-gray-30: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 30%);
|
||||
--sl-color-gray-35: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 35%);
|
||||
--sl-color-gray-40: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 40%);
|
||||
--sl-color-gray-45: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 45%);
|
||||
--sl-color-gray-50: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 50%);
|
||||
--sl-color-gray-55: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 55%);
|
||||
--sl-color-gray-60: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 60%);
|
||||
--sl-color-gray-65: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 65%);
|
||||
--sl-color-gray-70: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 70%);
|
||||
--sl-color-gray-75: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 75%);
|
||||
--sl-color-gray-80: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 80%);
|
||||
--sl-color-gray-85: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 85%);
|
||||
--sl-color-gray-90: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 90%);
|
||||
--sl-color-gray-95: hsl(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 95%);
|
||||
}
|
||||
7
src/styles/tokens/elevation.scss
Normal file
7
src/styles/tokens/elevation.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--sl-shadow-0: none;
|
||||
--sl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--sl-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--sl-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--sl-shadow-4: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
15
src/styles/tokens/spacing.scss
Normal file
15
src/styles/tokens/spacing.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
:root {
|
||||
--sl-spacing-0: 0;
|
||||
--sl-spacing-1: 0.25rem;
|
||||
--sl-spacing-2: 0.5rem;
|
||||
--sl-spacing-3: 0.75rem;
|
||||
--sl-spacing-4: 1rem;
|
||||
--sl-spacing-5: 1.25rem;
|
||||
--sl-spacing-6: 1.5rem;
|
||||
--sl-spacing-7: 2rem;
|
||||
--sl-spacing-8: 2.5rem;
|
||||
--sl-spacing-9: 3rem;
|
||||
--sl-spacing-10: 3.5rem;
|
||||
--sl-spacing-11: 4rem;
|
||||
--sl-spacing-12: 4.5rem;
|
||||
}
|
||||
7
src/styles/tokens/transition.scss
Normal file
7
src/styles/tokens/transition.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--sl-transition-slower: 1000ms;
|
||||
--sl-transition-slow: 500ms;
|
||||
--sl-transition-default: 250ms;
|
||||
--sl-transition-fast: 100ms;
|
||||
--sl-transition-faster: 50ms;
|
||||
}
|
||||
50
src/styles/tokens/typography.scss
Normal file
50
src/styles/tokens/typography.scss
Normal file
@@ -0,0 +1,50 @@
|
||||
:root {
|
||||
// Font families
|
||||
--sl-font-mono: Menlo, Monaco, 'Courier New', monospace;
|
||||
--sl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
--sl-font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
|
||||
--sl-font-heading: var(--sl-font-sans);
|
||||
--sl-font-body: var(--sl-font-sans);
|
||||
|
||||
// Font sizes
|
||||
--sl-font-size-0: 0.75rem;
|
||||
--sl-font-size-1: 0.875rem;
|
||||
--sl-font-size-2: 1rem;
|
||||
--sl-font-size-3: 1.125rem;
|
||||
--sl-font-size-4: 1.25rem;
|
||||
--sl-font-size-5: 1.5rem;
|
||||
--sl-font-size-6: 1.75rem;
|
||||
--sl-font-size-7: 2rem;
|
||||
--sl-font-size-8: 2.25rem;
|
||||
--sl-font-size-9: 0.2625rem;
|
||||
--sl-font-size-10: 3rem;
|
||||
--sl-font-size-11: 3.375rem;
|
||||
--sl-font-size-12: 3.75rem;
|
||||
--sl-font-size-13: 4.25rem;
|
||||
--sl-font-size-14: 4.75rem;
|
||||
--sl-font-size-15: 5.25rem;
|
||||
--sl-font-size-16: 5.75rem;
|
||||
|
||||
// Font weights
|
||||
--sl-font-weight-light: 300;
|
||||
--sl-font-weight-normal: 400;
|
||||
--sl-font-weight-semibold: 500;
|
||||
--sl-font-weight-bold: 600;
|
||||
|
||||
--sl-font-weight-body: var(--sl-font-weight-default);
|
||||
|
||||
// Letter spacings
|
||||
--sl-letter-spacing-dense: -0.015em;
|
||||
--sl-letter-spacing-normal: normal;
|
||||
--sl-letter-spacing-loose: 0.075em;
|
||||
|
||||
// Line heights
|
||||
--sl-line-height-dense: 1.25;
|
||||
--sl-line-height-normal: 1.5;
|
||||
--sl-line-height-loose: 1.75;
|
||||
|
||||
--sl-line-height-body: var(--sl-line-height-default);
|
||||
--sl-line-height-heading: var(--sl-line-height-dense);
|
||||
}
|
||||
6
src/styles/tokens/z-index.scss
Normal file
6
src/styles/tokens/z-index.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
:root {
|
||||
--sl-z-index-default: 1;
|
||||
--sl-z-index-panel: 80;
|
||||
--sl-z-index-notification: 90;
|
||||
--sl-z-index-dialog: 100;
|
||||
}
|
||||
Reference in New Issue
Block a user