diff --git a/src/styles/shoelace.scss b/src/styles/shoelace.scss index e5078c890..0f4dcbd39 100644 --- a/src/styles/shoelace.scss +++ b/src/styles/shoelace.scss @@ -4,7 +4,7 @@ :root { ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Color + // Color tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-color-primary-hue: 203; @@ -42,7 +42,7 @@ @include make-color-palette('gray'); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Border Radius + // Border radius tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-border-radius-small: 0.125rem; // 2px @@ -54,7 +54,7 @@ --sl-border-radius-pill: 9999px; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Elevation + // Elevation tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-shadow-x-small: 0 1px 0 rgba(0, 0, 0, 0.05); @@ -64,7 +64,7 @@ --sl-shadow-x-large: 0 4px 16px rgba(0, 0, 0, 0.1); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Spacing + // Spacing tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-spacing-xxx-small: 0.125rem; // 2px @@ -79,7 +79,7 @@ --sl-spacing-xxxx-large: 4.5rem; // 72px ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Transition + // Transition tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-transition-x-slow: 1000ms; @@ -89,7 +89,7 @@ --sl-transition-x-fast: 50ms; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Typography + // Typography tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Fonts @@ -126,7 +126,7 @@ --sl-line-height-loose: 1.75; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Form + // Form tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // Focus ring @@ -197,13 +197,13 @@ --sl-toggle-size: 14px; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Overlays + // Overlay tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-overlay-background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%, 0.5); ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Tooltips + // Tooltip tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-tooltip-border-radius: var(--sl-border-radius-medium); @@ -218,7 +218,7 @@ --sl-tooltip-arrow-start-end-offset: 8px; ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - // Z-index + // Z-index tokens ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// --sl-z-index-drawer: 700;