@usefragments/ui 1.0.0

package/src/tokens/_mixins.scss

@@ -0,0 +1,471 @@
+// ============================================
+// @usefragments/ui Shared Mixins
+// ============================================
+
+@use "variables" as *;
+
+// Focus ring for keyboard accessibility
+@mixin focus-ring {
+  outline: none;
+  box-shadow:
+    0 0 0 1px
+      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 28%, transparent),
+    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
+      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 12%, transparent),
+    0 10px 24px -16px
+      color-mix(in srgb, var(--fui-focus-ring-color, #{$fui-focus-ring-color}) 32%, transparent);
+}
+
+// Reset button styles
+@mixin button-reset {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+// Base interactive element
+@mixin interactive-base {
+  transition:
+    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    border-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
+    opacity var(--fui-transition-fast, #{$fui-transition-fast});
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+// Enforce minimum pointer target dimensions for interactive controls.
+@mixin min-target-size($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
+  min-width: $size;
+  min-height: $size;
+}
+
+// Centered interactive hit area with minimum dimensions.
+@mixin touch-target($size: var(--fui-target-size-min, #{$fui-target-size-min})) {
+  @include min-target-size($size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Typography base
+@mixin text-base {
+  font-family: var(--fui-font-sans, #{$fui-font-sans});
+  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
+  line-height: var(--fui-line-height-normal, #{$fui-line-height-normal});
+  color: var(--fui-text-primary, #{$fui-text-primary});
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Label text
+@mixin label-text {
+  font-family: var(--fui-font-sans, #{$fui-font-sans});
+  font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
+  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
+  color: var(--fui-text-primary, #{$fui-text-primary});
+}
+
+// Helper/caption text
+@mixin helper-text {
+  font-family: var(--fui-font-sans, #{$fui-font-sans});
+  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
+  color: var(--fui-text-secondary, #{$fui-text-secondary});
+}
+
+// Section label text (e.g. sidebar headings, TOC label).
+// 11px uppercase reads cleanly where 10px starts to crush; semibold + 0.06em
+// tracking gives the label enough weight to register without shouting.
+@mixin section-label-text {
+  @include helper-text;
+  font-size: 0.786rem; // 11px at 14px root
+  font-weight: var(--fui-font-weight-semibold, #{$fui-font-weight-semibold});
+  text-transform: uppercase;
+  letter-spacing: var(--fui-letter-spacing-wide, #{$fui-letter-spacing-wide});
+}
+
+// Card surface
+@mixin surface-elevated {
+  background-color: var(--fui-bg-elevated, #{$fui-bg-elevated});
+  border: 1px solid var(--fui-border, #{$fui-border});
+  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+}
+
+// Dropdown / popup container base styles.
+// Compose with @include surface-elevated for the full treatment.
+// Consumer sets min-width and optionally max-height/overflow.
+@mixin popup-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: var(--fui-space-1, #{$fui-space-1});
+  box-shadow: var(--fui-shadow-md, #{$fui-shadow-md});
+}
+
+// ============================================
+// Popup / menu item — canonical interaction model
+// ============================================
+// Shared by every list-popup surface (Combobox, Select, Menu, Listbox, Command,
+// NavigationMenu) so hover / keyboard-active / selected / disabled read identically
+// everywhere, in both light and dark mode.
+//
+//   rest        → transparent
+//   highlight   → @include popup-item-highlight  (pointer hover AND keyboard-active —
+//                 one neutral indicator; map [data-highlighted], :hover, .active to it)
+//   selected    → @include popup-item-selected   (accent-tinted + inset accent ring)
+//   disabled    → @include popup-item-disabled
+//
+// Base UI components set [data-highlighted] on both hover and keyboard nav, so a single
+// `&[data-highlighted] { @include popup-item-highlight; }` covers both. Custom popups
+// should map `&:hover, &.<active>, &[data-highlighted]` to the same mixin.
+
+// Dropdown/popup item base. Includes button-reset and text-base.
+@mixin popup-item {
+  @include button-reset;
+  @include text-base;
+
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-1, #{$fui-space-1});
+  width: 100%;
+  padding: var(--fui-space-1, #{$fui-space-1}) var(--fui-space-2, #{$fui-space-2});
+  border-radius: var(--fui-radius-sm, #{$fui-radius-sm});
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    color var(--fui-transition-fast, #{$fui-transition-fast});
+}
+
+// Active item — pointer-hover and keyboard-active share this single neutral highlight.
+// Falls back to --fui-bg-active then the SCSS value where --fui-bg-highlight is unset.
+@mixin popup-item-highlight {
+  background-color: var(--fui-bg-highlight, var(--fui-bg-active, #{$fui-bg-active}));
+  color: var(--fui-text-primary, #{$fui-text-primary});
+}
+
+// Disabled item — uniform across every popup.
+@mixin popup-item-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+// Group label within a dropdown/popup.
+@mixin popup-group-label {
+  padding: var(--fui-space-1, #{$fui-space-1}) var(--fui-space-2, #{$fui-space-2});
+  font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
+  font-weight: var(--fui-font-weight-medium, #{$fui-font-weight-medium});
+  color: var(--fui-text-tertiary, #{$fui-text-tertiary});
+  text-transform: uppercase;
+  letter-spacing: var(--fui-letter-spacing-wide, #{$fui-letter-spacing-wide});
+}
+
+// Shared shell for field-like controls.
+@mixin field-shell {
+  background-color: var(--fui-field-bg, transparent);
+  border: 1px solid var(--fui-field-border, var(--fui-border-strong, #{$fui-border-strong}));
+  border-radius: var(--fui-radius-md, #{$fui-radius-md});
+  transition:
+    background-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    border-color var(--fui-transition-fast, #{$fui-transition-fast}),
+    box-shadow var(--fui-transition-fast, #{$fui-transition-fast}),
+    color var(--fui-transition-fast, #{$fui-transition-fast});
+
+  &:hover:not(:disabled):not([data-disabled]):not(:focus-visible) {
+    border-color: var(--fui-field-border-hover, var(--fui-text-tertiary, #{$fui-text-tertiary}));
+  }
+
+  &:focus:not(:disabled):not([data-disabled]) {
+    border-color: var(--fui-field-border-focus, var(--fui-color-accent, #{$fui-color-accent}));
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    background-color: var(--fui-field-bg-disabled, var(--fui-bg-tertiary, #{$fui-bg-tertiary}));
+    color: var(--fui-text-tertiary, #{$fui-text-tertiary});
+  }
+}
+
+@mixin field-shell-focus {
+  @include focus-ring;
+  border-color: var(--fui-field-border-focus, var(--fui-color-accent, #{$fui-color-accent}));
+}
+
+@mixin popup-item-selected {
+  background-color: var(--fui-field-selection-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+  color: var(--fui-field-selection-color, var(--fui-text-primary, #{$fui-text-primary}));
+  box-shadow: inset 0 0 0 1px
+    var(--fui-field-selection-border, var(--fui-color-accent, #{$fui-color-accent}));
+}
+
+@mixin form-group-surface {
+  background-color: var(--fui-form-group-bg, var(--fui-bg-secondary, #{$fui-bg-secondary}));
+  border: 1px solid var(--fui-form-group-border, var(--fui-border, #{$fui-border}));
+  border-radius: var(--fui-radius-lg, #{$fui-radius-lg});
+}
+
+// Responsive breakpoint mixins (mobile-first, min-width)
+@mixin breakpoint-sm {
+  @media (min-width: $fui-breakpoint-sm) {
+    @content;
+  }
+}
+@mixin breakpoint-md {
+  @media (min-width: $fui-breakpoint-md) {
+    @content;
+  }
+}
+@mixin breakpoint-lg {
+  @media (min-width: $fui-breakpoint-lg) {
+    @content;
+  }
+}
+@mixin breakpoint-xl {
+  @media (min-width: $fui-breakpoint-xl) {
+    @content;
+  }
+}
+
+// Responsive breakpoint mixins (desktop-first, max-width)
+// Use for hiding/changing elements below a breakpoint
+@mixin below-sm {
+  @media (max-width: #{$fui-breakpoint-sm - 1px}) {
+    @content;
+  }
+}
+@mixin below-md {
+  @media (max-width: #{$fui-breakpoint-md - 1px}) {
+    @content;
+  }
+}
+@mixin below-lg {
+  @media (max-width: #{$fui-breakpoint-lg - 1px}) {
+    @content;
+  }
+}
+@mixin below-xl {
+  @media (max-width: #{$fui-breakpoint-xl - 1px}) {
+    @content;
+  }
+}
+
+// ============================================
+// Container Queries
+// ============================================
+// Component-level responsive design via container queries.
+// Unlike media queries (viewport-based), these respond to the component's
+// own container width — making components intrinsically responsive.
+// Browser support: ~96% (Chrome 105+, Firefox 110+, Safari 16+)
+
+/// Make an element a container query context.
+/// @param {String} $name - Container name for targeting in @container rules
+@mixin container($name) {
+  container-type: inline-size;
+  container-name: #{$name};
+}
+
+/// Container query: apply styles when named container is at least $width wide.
+/// @param {Length} $width - Minimum width threshold
+/// @param {String} $name - Optional container name (omit for nearest ancestor container)
+@mixin container-min($width, $name: null) {
+  @if $name {
+    @container #{$name} (min-width: #{$width}) {
+      @content;
+    }
+  } @else {
+    @container (min-width: #{$width}) {
+      @content;
+    }
+  }
+}
+
+/// Container query: apply styles when named container is below $width wide.
+/// @param {Length} $width - Maximum width threshold
+/// @param {String} $name - Optional container name (omit for nearest ancestor container)
+@mixin container-max($width, $name: null) {
+  @if $name {
+    @container #{$name} (max-width: #{$width}) {
+      @content;
+    }
+  } @else {
+    @container (max-width: #{$width}) {
+      @content;
+    }
+  }
+}
+
+// Visually hidden (for screen readers)
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// ============================================
+// Accessibility Mixins
+// ============================================
+
+// Reduced motion preference - respects user's system setting
+@mixin prefers-reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}
+
+// High contrast mode support - for users who need more visual contrast
+@mixin prefers-contrast {
+  @media (prefers-contrast: more) {
+    @content;
+  }
+}
+
+// Safe transition - respects reduced motion preference
+// Usage: @include safe-transition(background-color 150ms ease, border-color 150ms ease);
+@mixin safe-transition($transitions...) {
+  transition: $transitions;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// Safe animation - respects reduced motion preference
+// Usage: @include safe-animation(fadeIn 200ms ease);
+@mixin safe-animation($animation) {
+  animation: $animation;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+// Focus ring for success states (e.g., validated form fields)
+@mixin focus-ring-success {
+  outline: none;
+  box-shadow:
+    0 0 0 1px
+      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 42%, transparent),
+    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
+      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 14%, transparent),
+    0 10px 24px -16px
+      color-mix(in srgb, var(--fui-color-success-text, #{$fui-color-success-text}) 28%, transparent);
+}
+
+// Focus ring for error states (e.g., invalid form fields)
+@mixin focus-ring-error {
+  outline: none;
+  box-shadow:
+    0 0 0 1px
+      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 42%, transparent),
+    0 0 0 calc(var(--fui-focus-ring-width, #{$fui-focus-ring-width}) + 1px)
+      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 14%, transparent),
+    0 10px 24px -16px
+      color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 28%, transparent);
+}
+
+// ============================================
+// Size Variant Mixins
+// ============================================
+
+/// Control size mixin for standardized sizing across buttons, inputs, selects
+/// @param {String} $size - Size variant: 'sm', 'md', or 'lg'
+/// @param {String} $component - Component type: 'button', 'input', or 'select'
+@mixin control-size($size, $component: "button") {
+  // Global accessibility floor: component-specific height tokens may be customized,
+  // but controls should not shrink below the minimum target size.
+  min-height: var(--fui-target-size-min, #{$fui-target-size-min});
+
+  @if $size == "sm" {
+    @if $component == "input" {
+      height: var(--fui-input-height-sm, #{$fui-input-height-sm});
+      padding: 0 var(--fui-space-2, #{$fui-space-2});
+      font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
+    } @else {
+      height: var(--fui-button-height-sm, #{$fui-button-height-sm});
+      padding: 0 var(--fui-space-2, #{$fui-space-2});
+      font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
+    }
+  } @else if $size == "md" {
+    @if $component == "input" {
+      height: var(--fui-input-height, #{$fui-input-height});
+      padding: 0 var(--fui-space-3, #{$fui-space-3});
+      font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
+    } @else {
+      height: var(--fui-button-height-md, #{$fui-button-height-md});
+      padding: 0 var(--fui-space-4, #{$fui-space-4});
+      font-size: var(--fui-font-size-sm, #{$fui-font-size-sm});
+    }
+  } @else if $size == "lg" {
+    @if $component == "input" {
+      height: var(--fui-input-height-lg, #{$fui-input-height-lg});
+      padding: 0 var(--fui-space-4, #{$fui-space-4});
+      font-size: var(--fui-font-size-base, #{$fui-font-size-base});
+    } @else {
+      height: var(--fui-button-height-lg, #{$fui-button-height-lg});
+      padding: 0 var(--fui-space-5, #{$fui-space-5});
+      font-size: var(--fui-font-size-base, #{$fui-font-size-base});
+    }
+  }
+}
+
+// ============================================
+// Form Field Wrapper
+// Generates .wrapper, .label, .helper, .helperError, .errorMessage
+// for consistent form field layout across all form components.
+// ============================================
+
+@mixin form-field-wrapper {
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .label {
+    @include label-text;
+    margin-bottom: var(--fui-space-1, #{$fui-space-1});
+  }
+
+  .required {
+    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
+    margin-left: 2px;
+  }
+
+  .helper {
+    @include helper-text;
+    margin-top: var(--fui-space-1, #{$fui-space-1});
+  }
+
+  .helperError {
+    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
+  }
+
+  .errorMessage {
+    font-size: var(--fui-font-size-xs, #{$fui-font-size-xs});
+    color: var(--fui-color-danger-text, #{$fui-color-danger-text});
+    margin-top: var(--fui-space-1, #{$fui-space-1});
+  }
+}

package/src/tokens/_palettes.scss

@@ -0,0 +1,225 @@
+// ============================================
+// @usefragments/ui Elemental Palettes
+// ============================================
+//
+// Defines 5 elemental palettes with 11 shades (50-950).
+// Each palette has a distinct tonal character.
+//
+// ============================================
+
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+// --------------------------------------------
+// Stone - Muted cool neutrals (Default)
+// Subtle, balanced feel - matches current zinc-like palette
+// --------------------------------------------
+$palette-stone: (
+  50:  #fafafa,
+  100: #f4f4f5,
+  200: #e4e4e7,
+  300: #d4d4d8,
+  400: #a1a1aa,
+  500: #71717a,
+  600: #52525b,
+  700: #3f3f46,
+  800: #27272a,
+  900: #18181b,
+  950: #09090b
+);
+
+// --------------------------------------------
+// Mono - Restraint-first neutral palette
+// Dark mode is intentionally close to true black so product surfaces feel
+// unified, not like separate panels pasted onto a grey shell.
+// --------------------------------------------
+$palette-mono: (
+  50:  #fafafa,
+  100: #f5f5f5,
+  200: #e5e5e5,
+  300: #d4d4d4,
+  400: #a3a3a3,
+  500: #737373,
+  600: #525252,
+  700: #404040,
+  800: #171717,
+  900: #0a0a0a,
+  950: #000000
+);
+
+// --------------------------------------------
+// Ice - Cool blue tones
+// Professional, tech feel
+// --------------------------------------------
+$palette-ice: (
+  50:  #f0f9ff,
+  100: #e0f2fe,
+  200: #bae6fd,
+  300: #7dd3fc,
+  400: #38bdf8,
+  500: #0ea5e9,
+  600: #0284c7,
+  700: #0369a1,
+  800: #0f2d3d,  // Darkened and desaturated for dark mode
+  900: #0a1f2c,  // Darkened and desaturated for dark mode
+  950: #06141c   // Very dark blue-gray for dark mode bg
+);
+
+// --------------------------------------------
+// Sand - Warm brown/terracotta tones
+// Organic, earthy feel
+// --------------------------------------------
+$palette-sand: (
+  50:  #fdf8f3,
+  100: #f5ebe0,
+  200: #e8d5c4,
+  300: #d4b89c,
+  400: #c19a6b,
+  500: #a67c52,
+  600: #8b5e34,
+  700: #6f4518,
+  800: #231a12,  // Darkened and desaturated for dark mode
+  900: #181210,  // Darkened and desaturated for dark mode
+  950: #0f0c09   // Very dark warm gray for dark mode bg
+);
+
+// --------------------------------------------
+// Earth - Green/olive tones
+// Natural, growth feel
+// --------------------------------------------
+$palette-earth: (
+  50:  #f5f7f2,
+  100: #e8ede3,
+  200: #d1dbc6,
+  300: #b3c4a0,
+  400: #8fa872,
+  500: #6b8c4e,
+  600: #517035,
+  700: #3d5527,
+  800: #1a2316,  // Darkened and desaturated for dark mode
+  900: #121810,  // Darkened and desaturated for dark mode
+  950: #0a0f08   // Very dark green-gray for dark mode bg
+);
+
+// --------------------------------------------
+// Fragments - Rich saturated green tones
+// The Fragments brand palette — deep forest greens
+// --------------------------------------------
+$palette-fragments: (
+  50:  #f0f7f3,
+  100: #dceee3,
+  200: #b8ddc6,
+  300: #88c5a0,
+  400: #5aaa7a,
+  500: #3d8f60,
+  600: #2d7049,
+  700: #235536,
+  800: #1a3025,  // Dark card surface
+  900: #142318,  // Dark surface
+  950: #0d1f17   // Darkest bg
+);
+
+// --------------------------------------------
+// Fire - Warm red/orange tones
+// Energy, passion feel
+// --------------------------------------------
+$palette-fire: (
+  50:  #fff7ed,
+  100: #ffedd5,
+  200: #fed7aa,
+  300: #fdba74,
+  400: #fb923c,
+  500: #f97316,
+  600: #ea580c,
+  700: #c2410c,
+  800: #2d1810,  // Darkened and desaturated for dark mode
+  900: #1c100a,  // Darkened and desaturated for dark mode
+  950: #120a06   // Very dark warm gray for dark mode bg
+);
+
+// --------------------------------------------
+// Palette Map for Dynamic Access
+// --------------------------------------------
+$palettes: (
+  "stone": $palette-stone,
+  "mono": $palette-mono,
+  "ice": $palette-ice,
+  "sand": $palette-sand,
+  "earth": $palette-earth,
+  "fire": $palette-fire,
+  "fragments": $palette-fragments,
+  "wind": $palette-stone  // Legacy alias — "wind" was renamed to "stone"
+);
+
+// --------------------------------------------
+// Helper Functions
+// --------------------------------------------
+
+/// Get a palette map by name
+/// @param {String} $name - Palette name (stone, ice, sand, earth, fire, fragments)
+/// @return {Map} The palette map with shades 50-950
+@function get-palette($name) {
+  @if not map.has-key($palettes, $name) {
+    @warn "Unknown palette '#{$name}'. Using 'stone' as fallback.";
+    @return $palette-stone;
+  }
+  @return map.get($palettes, $name);
+}
+
+/// Get a specific shade from a palette
+/// @param {Map} $palette - A palette map
+/// @param {Number} $level - Shade level (50, 100, 200, ..., 950)
+/// @return {Color} The color at that shade level
+@function get-shade($palette, $level) {
+  @if not map.has-key($palette, $level) {
+    @warn "Unknown shade level '#{$level}'. Using 500 as fallback.";
+    @return map.get($palette, 500);
+  }
+  @return map.get($palette, $level);
+}
+
+/// Interpolate between two shade levels for half-steps (e.g., 925)
+/// @param {Map} $palette - A palette map
+/// @param {Number} $level - Target shade level (can be non-standard like 925)
+/// @return {Color} The interpolated color
+@function interpolate-shade($palette, $level) {
+  // Handle standard levels
+  @if map.has-key($palette, $level) {
+    @return map.get($palette, $level);
+  }
+
+  // Find surrounding levels for interpolation
+  $levels: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950);
+  $lower: null;
+  $upper: null;
+
+  @each $l in $levels {
+    @if $l < $level {
+      $lower: $l;
+    }
+    @if $l > $level and $upper == null {
+      $upper: $l;
+    }
+  }
+
+  @if $lower == null or $upper == null {
+    @warn "Cannot interpolate shade '#{$level}'. Using 500 as fallback.";
+    @return map.get($palette, 500);
+  }
+
+  $lower-color: map.get($palette, $lower);
+  $upper-color: map.get($palette, $upper);
+  $ratio: math.div($level - $lower, $upper - $lower);
+
+  @return color.mix($upper-color, $lower-color, $ratio * 100%);
+}
+
+/// Get a palette by name and return a specific shade
+/// @param {String} $name - Palette name
+/// @param {Number} $level - Shade level
+/// @return {Color} The color
+@function palette-shade($name, $level) {
+  $palette: get-palette($name);
+  @return get-shade($palette, $level);
+}