mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
Rework design tokens
This commit is contained in:
Cory LaViska
@@ -3,9 +3,8 @@
|
||||
Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the `box-shadow` property. Elevation tokens are especially useful for menus, popovers, and dialogs.
|
||||
|
||||
<div style="display: flex; flex-wrap: wrap; margin: 0 -20px;">
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-0);"><code>--sh-shadow-0</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-1);"><code>--sh-shadow-1</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-2);"><code>--sh-shadow-2</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-3);"><code>--sh-shadow-3</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-4);"><code>--sh-shadow-4</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-sm);"><code>--sh-shadow-sm</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-md);"><code>--sh-shadow-md</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-lg);"><code>--sh-shadow-lg</code></div>
|
||||
<div style="border-radius: 3px; padding: 20px; margin: 20px; box-shadow: var(--sh-shadow-xl);"><code>--sh-shadow-xl</code></div>
|
||||
</div>
|
||||
@@ -73,13 +73,13 @@
|
||||
align-items: center;
|
||||
|
||||
::slotted(*) {
|
||||
margin-left: var(--sh-spacing-6);
|
||||
margin-left: var(--sh-spacing-5);
|
||||
}
|
||||
}
|
||||
|
||||
.sh-alert__body {
|
||||
flex: 1 1 auto;
|
||||
padding: var(--sh-spacing-5) var(--sh-spacing-6);
|
||||
padding: var(--sh-spacing-5);
|
||||
}
|
||||
|
||||
.sh-alert__close {
|
||||
@@ -91,7 +91,7 @@
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
color: currentColor;
|
||||
padding: 0 var(--sh-spacing-6);
|
||||
padding: 0 var(--sh-spacing-5);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
transition: var(--sh-form-control-transition-speed) background-color, var(--sh-form-control-transition-speed) color;
|
||||
|
||||
@@ -1,16 +1,267 @@
|
||||
/*! 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';
|
||||
|
||||
:root {
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Color
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-color-primary-hue: 203;
|
||||
--sh-color-primary-saturation: 100%;
|
||||
--sh-color-primary-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-success-hue: 110;
|
||||
--sh-color-success-saturation: 60%;
|
||||
--sh-color-success-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-info-hue: var(--sh-color-primary-hue);
|
||||
--sh-color-info-saturation: 10%;
|
||||
--sh-color-info-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-warning-hue: 36;
|
||||
--sh-color-warning-saturation: 90%;
|
||||
--sh-color-warning-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-danger-hue: 0;
|
||||
--sh-color-danger-saturation: 80%;
|
||||
--sh-color-danger-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-gray-hue: var(--sh-color-primary-hue);
|
||||
--sh-color-gray-saturation: 10%;
|
||||
--sh-color-gray-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-white: white;
|
||||
--sh-color-black: black;
|
||||
|
||||
--sh-color-primary-05: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 5%);
|
||||
--sh-color-primary-10: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 10%);
|
||||
--sh-color-primary-15: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 15%);
|
||||
--sh-color-primary-20: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 20%);
|
||||
--sh-color-primary-25: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 25%);
|
||||
--sh-color-primary-30: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 30%);
|
||||
--sh-color-primary-35: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 35%);
|
||||
--sh-color-primary-40: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 40%);
|
||||
--sh-color-primary-45: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 45%);
|
||||
--sh-color-primary-50: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 50%);
|
||||
--sh-color-primary-55: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 55%);
|
||||
--sh-color-primary-60: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 60%);
|
||||
--sh-color-primary-65: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 65%);
|
||||
--sh-color-primary-70: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 70%);
|
||||
--sh-color-primary-75: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 75%);
|
||||
--sh-color-primary-80: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 80%);
|
||||
--sh-color-primary-85: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 85%);
|
||||
--sh-color-primary-90: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 90%);
|
||||
--sh-color-primary-95: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 95%);
|
||||
|
||||
--sh-color-success-05: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 5%);
|
||||
--sh-color-success-10: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 10%);
|
||||
--sh-color-success-15: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 15%);
|
||||
--sh-color-success-20: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 20%);
|
||||
--sh-color-success-25: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 25%);
|
||||
--sh-color-success-30: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 30%);
|
||||
--sh-color-success-35: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 35%);
|
||||
--sh-color-success-40: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 40%);
|
||||
--sh-color-success-45: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 45%);
|
||||
--sh-color-success-50: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 50%);
|
||||
--sh-color-success-55: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 55%);
|
||||
--sh-color-success-60: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 60%);
|
||||
--sh-color-success-65: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 65%);
|
||||
--sh-color-success-70: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 70%);
|
||||
--sh-color-success-75: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 75%);
|
||||
--sh-color-success-80: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 80%);
|
||||
--sh-color-success-85: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 85%);
|
||||
--sh-color-success-90: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 90%);
|
||||
--sh-color-success-95: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 95%);
|
||||
|
||||
--sh-color-info-05: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 5%);
|
||||
--sh-color-info-10: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 10%);
|
||||
--sh-color-info-15: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 15%);
|
||||
--sh-color-info-20: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 20%);
|
||||
--sh-color-info-25: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 25%);
|
||||
--sh-color-info-30: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 30%);
|
||||
--sh-color-info-35: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 35%);
|
||||
--sh-color-info-40: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 40%);
|
||||
--sh-color-info-45: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 45%);
|
||||
--sh-color-info-50: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 50%);
|
||||
--sh-color-info-55: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 55%);
|
||||
--sh-color-info-60: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 60%);
|
||||
--sh-color-info-65: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 65%);
|
||||
--sh-color-info-70: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 70%);
|
||||
--sh-color-info-75: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 75%);
|
||||
--sh-color-info-80: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 80%);
|
||||
--sh-color-info-85: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 85%);
|
||||
--sh-color-info-90: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 90%);
|
||||
--sh-color-info-95: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 95%);
|
||||
|
||||
--sh-color-warning-05: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 5%);
|
||||
--sh-color-warning-10: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 10%);
|
||||
--sh-color-warning-15: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 15%);
|
||||
--sh-color-warning-20: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 20%);
|
||||
--sh-color-warning-25: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 25%);
|
||||
--sh-color-warning-30: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 30%);
|
||||
--sh-color-warning-35: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 35%);
|
||||
--sh-color-warning-40: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 40%);
|
||||
--sh-color-warning-45: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 45%);
|
||||
--sh-color-warning-50: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 50%);
|
||||
--sh-color-warning-55: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 55%);
|
||||
--sh-color-warning-60: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 60%);
|
||||
--sh-color-warning-65: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 65%);
|
||||
--sh-color-warning-70: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 70%);
|
||||
--sh-color-warning-75: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 75%);
|
||||
--sh-color-warning-80: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 80%);
|
||||
--sh-color-warning-85: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 85%);
|
||||
--sh-color-warning-90: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 90%);
|
||||
--sh-color-warning-95: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 95%);
|
||||
|
||||
--sh-color-danger-05: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 5%);
|
||||
--sh-color-danger-10: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 10%);
|
||||
--sh-color-danger-15: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 15%);
|
||||
--sh-color-danger-20: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 20%);
|
||||
--sh-color-danger-25: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 25%);
|
||||
--sh-color-danger-30: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 30%);
|
||||
--sh-color-danger-35: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 35%);
|
||||
--sh-color-danger-40: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 40%);
|
||||
--sh-color-danger-45: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 45%);
|
||||
--sh-color-danger-50: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 50%);
|
||||
--sh-color-danger-55: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 55%);
|
||||
--sh-color-danger-60: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 60%);
|
||||
--sh-color-danger-65: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 65%);
|
||||
--sh-color-danger-70: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 70%);
|
||||
--sh-color-danger-75: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 75%);
|
||||
--sh-color-danger-80: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 80%);
|
||||
--sh-color-danger-85: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 85%);
|
||||
--sh-color-danger-90: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 90%);
|
||||
--sh-color-danger-95: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 95%);
|
||||
|
||||
--sh-color-gray-05: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 5%);
|
||||
--sh-color-gray-10: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 10%);
|
||||
--sh-color-gray-15: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 15%);
|
||||
--sh-color-gray-20: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 20%);
|
||||
--sh-color-gray-25: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 25%);
|
||||
--sh-color-gray-30: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 30%);
|
||||
--sh-color-gray-35: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 35%);
|
||||
--sh-color-gray-40: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 40%);
|
||||
--sh-color-gray-45: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 45%);
|
||||
--sh-color-gray-50: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 50%);
|
||||
--sh-color-gray-55: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 55%);
|
||||
--sh-color-gray-60: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 60%);
|
||||
--sh-color-gray-65: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 65%);
|
||||
--sh-color-gray-70: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 70%);
|
||||
--sh-color-gray-75: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 75%);
|
||||
--sh-color-gray-80: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 80%);
|
||||
--sh-color-gray-85: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 85%);
|
||||
--sh-color-gray-90: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 90%);
|
||||
--sh-color-gray-95: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 95%);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Border Radius
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-border-radius-sm: 0.125rem; // 2px
|
||||
--sh-border-radius-md: 0.25rem; // 4px
|
||||
--sh-border-radius-lg: 0.5rem; // 8px
|
||||
--sh-border-radius-xl: 1rem; // 16px
|
||||
|
||||
--sh-border-radius-circle: 50%;
|
||||
--sh-border-radius-pill: 9999px;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Elevation
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
--sh-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--sh-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
--sh-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Spacing
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-spacing-0: 0; // 0px
|
||||
--sh-spacing-1: 0.25rem; // 4px
|
||||
--sh-spacing-2: 0.5rem; // 8px
|
||||
--sh-spacing-3: 0.75rem; // 12px
|
||||
--sh-spacing-4: 1rem; // 16px
|
||||
--sh-spacing-5: 1.25rem; // 20px
|
||||
--sh-spacing-6: 1.5rem; // 24px
|
||||
--sh-spacing-7: 2rem; // 32px
|
||||
--sh-spacing-8: 2.5rem; // 40px
|
||||
--sh-spacing-9: 3rem; // 48px
|
||||
--sh-spacing-10: 3.5rem; // 56px
|
||||
--sh-spacing-11: 4rem; // 64px
|
||||
--sh-spacing-12: 4.5rem; // 72px
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Transition
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-transition-slower: 1000ms;
|
||||
--sh-transition-slow: 500ms;
|
||||
--sh-transition-default: 250ms;
|
||||
--sh-transition-fast: 150ms;
|
||||
--sh-transition-faster: 50ms;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Typography
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// Fonts
|
||||
--sh-font-mono: Menlo, Monaco, 'Courier New', monospace;
|
||||
--sh-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
--sh-font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
|
||||
--sh-font-heading: var(--sh-font-sans);
|
||||
--sh-font-body: var(--sh-font-sans);
|
||||
|
||||
// Font sizes
|
||||
--sh-font-size-1: 0.75rem; // 12px
|
||||
--sh-font-size-2: 0.875rem; // 14px
|
||||
--sh-font-size-3: 1rem; // 16px
|
||||
--sh-font-size-4: 1.125rem; // 18px
|
||||
--sh-font-size-5: 1.25rem; // 20px
|
||||
--sh-font-size-6: 1.5rem; // 24px
|
||||
--sh-font-size-7: 1.75rem; // 28px
|
||||
--sh-font-size-8: 2.25rem; // 36px
|
||||
--sh-font-size-9: 3rem; // 48px
|
||||
--sh-font-size-10: 3.5rem; // 56px
|
||||
--sh-font-size-11: 4rem; // 64px
|
||||
--sh-font-size-12: 4.5rem; // 72px
|
||||
|
||||
// Font weights
|
||||
--sh-font-weight-light: 300;
|
||||
--sh-font-weight-normal: 400;
|
||||
--sh-font-weight-semibold: 500;
|
||||
--sh-font-weight-bold: 600;
|
||||
|
||||
--sh-font-weight-body: var(--sh-font-weight-default);
|
||||
|
||||
// Letter spacings
|
||||
--sh-letter-spacing-dense: -0.015em;
|
||||
--sh-letter-spacing-normal: normal;
|
||||
--sh-letter-spacing-loose: 0.075em;
|
||||
|
||||
// Line heights
|
||||
--sh-line-height-dense: 1.25;
|
||||
--sh-line-height-normal: 1.5;
|
||||
--sh-line-height-loose: 1.75;
|
||||
|
||||
--sh-line-height-body: var(--sh-line-height-default);
|
||||
--sh-line-height-heading: var(--sh-line-height-dense);
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Z-index
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-z-index-default: 1;
|
||||
--sh-z-index-panel: 80;
|
||||
--sh-z-index-notification: 90;
|
||||
--sh-z-index-dialog: 100;
|
||||
}
|
||||
|
||||
//
|
||||
// TODO:
|
||||
//
|
||||
@@ -95,6 +346,16 @@ body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--sh-color-primary-50);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--sh-color-primary-60);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Customize tooltips using our own tokens
|
||||
.tippy-tooltip {
|
||||
border-radius: var(--sh-tooltip-border-radius);
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
:host {
|
||||
--sh-border-radius-0: 0;
|
||||
--sh-border-radius-1: 0.125rem;
|
||||
--sh-border-radius-2: 0.25rem;
|
||||
--sh-border-radius-3: 0.5rem;
|
||||
--sh-border-radius-4: 1rem;
|
||||
|
||||
--sh-border-radius-circle: 50%;
|
||||
--sh-border-radius-pill: 9999px;
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
:root {
|
||||
--sh-color-primary-hue: 203;
|
||||
--sh-color-primary-saturation: 100%;
|
||||
--sh-color-primary-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-success-hue: 110;
|
||||
--sh-color-success-saturation: 60%;
|
||||
--sh-color-success-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-info-hue: var(--sh-color-primary-hue);
|
||||
--sh-color-info-saturation: 10%;
|
||||
--sh-color-info-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-warning-hue: 36;
|
||||
--sh-color-warning-saturation: 90%;
|
||||
--sh-color-warning-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-danger-hue: 0;
|
||||
--sh-color-danger-saturation: 80%;
|
||||
--sh-color-danger-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-gray-hue: var(--sh-color-primary-hue);
|
||||
--sh-color-gray-saturation: 10%;
|
||||
--sh-color-gray-text: var(--sh-color-white);
|
||||
|
||||
--sh-color-white: white;
|
||||
--sh-color-black: black;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// 🐉 Here be color palettes. No need to change these...just update hues and saturations above!
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
--sh-color-primary-05: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 5%);
|
||||
--sh-color-primary-10: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 10%);
|
||||
--sh-color-primary-15: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 15%);
|
||||
--sh-color-primary-20: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 20%);
|
||||
--sh-color-primary-25: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 25%);
|
||||
--sh-color-primary-30: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 30%);
|
||||
--sh-color-primary-35: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 35%);
|
||||
--sh-color-primary-40: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 40%);
|
||||
--sh-color-primary-45: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 45%);
|
||||
--sh-color-primary-50: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 50%);
|
||||
--sh-color-primary-55: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 55%);
|
||||
--sh-color-primary-60: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 60%);
|
||||
--sh-color-primary-65: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 65%);
|
||||
--sh-color-primary-70: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 70%);
|
||||
--sh-color-primary-75: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 75%);
|
||||
--sh-color-primary-80: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 80%);
|
||||
--sh-color-primary-85: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 85%);
|
||||
--sh-color-primary-90: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 90%);
|
||||
--sh-color-primary-95: hsl(var(--sh-color-primary-hue), var(--sh-color-primary-saturation), 95%);
|
||||
|
||||
--sh-color-success-05: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 5%);
|
||||
--sh-color-success-10: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 10%);
|
||||
--sh-color-success-15: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 15%);
|
||||
--sh-color-success-20: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 20%);
|
||||
--sh-color-success-25: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 25%);
|
||||
--sh-color-success-30: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 30%);
|
||||
--sh-color-success-35: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 35%);
|
||||
--sh-color-success-40: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 40%);
|
||||
--sh-color-success-45: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 45%);
|
||||
--sh-color-success-50: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 50%);
|
||||
--sh-color-success-55: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 55%);
|
||||
--sh-color-success-60: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 60%);
|
||||
--sh-color-success-65: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 65%);
|
||||
--sh-color-success-70: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 70%);
|
||||
--sh-color-success-75: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 75%);
|
||||
--sh-color-success-80: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 80%);
|
||||
--sh-color-success-85: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 85%);
|
||||
--sh-color-success-90: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 90%);
|
||||
--sh-color-success-95: hsl(var(--sh-color-success-hue), var(--sh-color-success-saturation), 95%);
|
||||
|
||||
--sh-color-info-05: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 5%);
|
||||
--sh-color-info-10: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 10%);
|
||||
--sh-color-info-15: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 15%);
|
||||
--sh-color-info-20: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 20%);
|
||||
--sh-color-info-25: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 25%);
|
||||
--sh-color-info-30: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 30%);
|
||||
--sh-color-info-35: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 35%);
|
||||
--sh-color-info-40: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 40%);
|
||||
--sh-color-info-45: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 45%);
|
||||
--sh-color-info-50: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 50%);
|
||||
--sh-color-info-55: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 55%);
|
||||
--sh-color-info-60: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 60%);
|
||||
--sh-color-info-65: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 65%);
|
||||
--sh-color-info-70: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 70%);
|
||||
--sh-color-info-75: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 75%);
|
||||
--sh-color-info-80: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 80%);
|
||||
--sh-color-info-85: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 85%);
|
||||
--sh-color-info-90: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 90%);
|
||||
--sh-color-info-95: hsl(var(--sh-color-info-hue), var(--sh-color-info-saturation), 95%);
|
||||
|
||||
--sh-color-warning-05: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 5%);
|
||||
--sh-color-warning-10: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 10%);
|
||||
--sh-color-warning-15: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 15%);
|
||||
--sh-color-warning-20: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 20%);
|
||||
--sh-color-warning-25: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 25%);
|
||||
--sh-color-warning-30: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 30%);
|
||||
--sh-color-warning-35: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 35%);
|
||||
--sh-color-warning-40: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 40%);
|
||||
--sh-color-warning-45: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 45%);
|
||||
--sh-color-warning-50: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 50%);
|
||||
--sh-color-warning-55: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 55%);
|
||||
--sh-color-warning-60: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 60%);
|
||||
--sh-color-warning-65: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 65%);
|
||||
--sh-color-warning-70: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 70%);
|
||||
--sh-color-warning-75: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 75%);
|
||||
--sh-color-warning-80: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 80%);
|
||||
--sh-color-warning-85: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 85%);
|
||||
--sh-color-warning-90: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 90%);
|
||||
--sh-color-warning-95: hsl(var(--sh-color-warning-hue), var(--sh-color-warning-saturation), 95%);
|
||||
|
||||
--sh-color-danger-05: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 5%);
|
||||
--sh-color-danger-10: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 10%);
|
||||
--sh-color-danger-15: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 15%);
|
||||
--sh-color-danger-20: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 20%);
|
||||
--sh-color-danger-25: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 25%);
|
||||
--sh-color-danger-30: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 30%);
|
||||
--sh-color-danger-35: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 35%);
|
||||
--sh-color-danger-40: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 40%);
|
||||
--sh-color-danger-45: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 45%);
|
||||
--sh-color-danger-50: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 50%);
|
||||
--sh-color-danger-55: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 55%);
|
||||
--sh-color-danger-60: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 60%);
|
||||
--sh-color-danger-65: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 65%);
|
||||
--sh-color-danger-70: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 70%);
|
||||
--sh-color-danger-75: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 75%);
|
||||
--sh-color-danger-80: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 80%);
|
||||
--sh-color-danger-85: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 85%);
|
||||
--sh-color-danger-90: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 90%);
|
||||
--sh-color-danger-95: hsl(var(--sh-color-danger-hue), var(--sh-color-danger-saturation), 95%);
|
||||
|
||||
--sh-color-gray-05: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 5%);
|
||||
--sh-color-gray-10: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 10%);
|
||||
--sh-color-gray-15: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 15%);
|
||||
--sh-color-gray-20: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 20%);
|
||||
--sh-color-gray-25: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 25%);
|
||||
--sh-color-gray-30: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 30%);
|
||||
--sh-color-gray-35: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 35%);
|
||||
--sh-color-gray-40: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 40%);
|
||||
--sh-color-gray-45: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 45%);
|
||||
--sh-color-gray-50: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 50%);
|
||||
--sh-color-gray-55: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 55%);
|
||||
--sh-color-gray-60: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 60%);
|
||||
--sh-color-gray-65: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 65%);
|
||||
--sh-color-gray-70: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 70%);
|
||||
--sh-color-gray-75: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 75%);
|
||||
--sh-color-gray-80: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 80%);
|
||||
--sh-color-gray-85: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 85%);
|
||||
--sh-color-gray-90: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 90%);
|
||||
--sh-color-gray-95: hsl(var(--sh-color-gray-hue), var(--sh-color-gray-saturation), 95%);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
:root {
|
||||
--sh-shadow-0: none;
|
||||
--sh-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
--sh-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
--sh-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
--sh-shadow-4: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
:root {
|
||||
--sh-spacing-0: 0;
|
||||
--sh-spacing-1: 0.25rem;
|
||||
--sh-spacing-2: 0.5rem;
|
||||
--sh-spacing-3: 0.75rem;
|
||||
--sh-spacing-4: 1rem;
|
||||
--sh-spacing-5: 1.25rem;
|
||||
--sh-spacing-6: 1.5rem;
|
||||
--sh-spacing-7: 2rem;
|
||||
--sh-spacing-8: 2.5rem;
|
||||
--sh-spacing-9: 3rem;
|
||||
--sh-spacing-10: 3.5rem;
|
||||
--sh-spacing-11: 4rem;
|
||||
--sh-spacing-12: 4.5rem;
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
:root {
|
||||
--sh-transition-slower: 1000ms;
|
||||
--sh-transition-slow: 500ms;
|
||||
--sh-transition-default: 250ms;
|
||||
--sh-transition-fast: 100ms;
|
||||
--sh-transition-faster: 50ms;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
:root {
|
||||
// Font families
|
||||
--sh-font-mono: Menlo, Monaco, 'Courier New', monospace;
|
||||
--sh-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
--sh-font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
|
||||
--sh-font-heading: var(--sh-font-sans);
|
||||
--sh-font-body: var(--sh-font-sans);
|
||||
|
||||
// Font sizes
|
||||
--sh-font-size-0: 0.75rem;
|
||||
--sh-font-size-1: 0.875rem;
|
||||
--sh-font-size-2: 1rem;
|
||||
--sh-font-size-3: 1.125rem;
|
||||
--sh-font-size-4: 1.25rem;
|
||||
--sh-font-size-5: 1.5rem;
|
||||
--sh-font-size-6: 1.75rem;
|
||||
--sh-font-size-7: 2rem;
|
||||
--sh-font-size-8: 2.25rem;
|
||||
--sh-font-size-9: 0.2625rem;
|
||||
--sh-font-size-10: 3rem;
|
||||
--sh-font-size-11: 3.375rem;
|
||||
--sh-font-size-12: 3.75rem;
|
||||
--sh-font-size-13: 4.25rem;
|
||||
--sh-font-size-14: 4.75rem;
|
||||
--sh-font-size-15: 5.25rem;
|
||||
--sh-font-size-16: 5.75rem;
|
||||
|
||||
// Font weights
|
||||
--sh-font-weight-light: 300;
|
||||
--sh-font-weight-normal: 400;
|
||||
--sh-font-weight-semibold: 500;
|
||||
--sh-font-weight-bold: 600;
|
||||
|
||||
--sh-font-weight-body: var(--sh-font-weight-default);
|
||||
|
||||
// Letter spacings
|
||||
--sh-letter-spacing-dense: -0.015em;
|
||||
--sh-letter-spacing-normal: normal;
|
||||
--sh-letter-spacing-loose: 0.075em;
|
||||
|
||||
// Line heights
|
||||
--sh-line-height-dense: 1.25;
|
||||
--sh-line-height-normal: 1.5;
|
||||
--sh-line-height-loose: 1.75;
|
||||
|
||||
--sh-line-height-body: var(--sh-line-height-default);
|
||||
--sh-line-height-heading: var(--sh-line-height-dense);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
:root {
|
||||
--sh-z-index-default: 1;
|
||||
--sh-z-index-panel: 80;
|
||||
--sh-z-index-notification: 90;
|
||||
--sh-z-index-dialog: 100;
|
||||
}
|
||||
Reference in New Issue
Block a user