@resolve-components/theme 1.0.0

package/src/lib/styles/themes/_default.scss

@@ -0,0 +1,341 @@
+// =============================================================================
+// Resolve Components — Default Theme (Microsoft Fluent-Inspired)
+// =============================================================================
+// This is the base light theme. All other themes inherit from it.
+//
+// The palette is inspired by Microsoft Fluent Design System:
+//   Primary:  #0078D4  (Microsoft Blue)
+//   Success:  #107C10  (Microsoft Green)
+//   Warning:  #FFB900  (Microsoft Yellow)
+//   Danger:   #D13438  (Microsoft Red)
+//   Info:     #00B7C3  (Microsoft Teal)
+//
+// Each color has a 100–900 ramp. Semantic aliases (e.g. color-primary-default)
+// point to specific ramp steps. Users override these to re-theme.
+// =============================================================================
+
+@use 'sass:string';
+@use '../theming/theming-variables' as vars;
+@use '../theming/register' as reg;
+
+$theme: (
+  // Direct CSS properties (emitted without -- prefix)
+  _color-scheme: light,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // COLOR PALETTE
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ── Primary (Microsoft Blue) ────────────────────────────────────────────
+  color-primary-100: #eff6fc,
+  color-primary-200: #deecf9,
+  color-primary-300: #b4d6fa,
+  color-primary-400: #5ba3e6,
+  color-primary-500: #0078d4,
+  color-primary-600: #106ebe,
+  color-primary-700: #005a9e,
+  color-primary-800: #004578,
+  color-primary-900: #003356,
+
+  // Semantic primary aliases
+  color-primary-default: color-primary-500,
+  color-primary-hover: color-primary-600,
+  color-primary-active: color-primary-700,
+  color-primary-focus: color-primary-500,
+  color-primary-disabled: color-primary-300,
+  color-primary-transparent-default: rgba(0, 120, 212, 0.08),
+  color-primary-transparent-hover: rgba(0, 120, 212, 0.12),
+  color-primary-transparent-active: rgba(0, 120, 212, 0.16),
+  // ── Success (Microsoft Green) ───────────────────────────────────────────
+  color-success-100: #dff6dd,
+  color-success-200: #c8f0c2,
+  color-success-300: #9ae08f,
+  color-success-400: #54b054,
+  color-success-500: #107c10,
+  color-success-600: #0e6b0e,
+  color-success-700: #094509,
+  color-success-800: #063006,
+  color-success-900: #042004,
+
+  color-success-default: color-success-500,
+  color-success-hover: color-success-600,
+  color-success-active: color-success-700,
+
+  // ── Warning (Microsoft Yellow/Amber) ────────────────────────────────────
+  color-warning-100: #fff8e1,
+  color-warning-200: #ffecb3,
+  color-warning-300: #ffe082,
+  color-warning-400: #ffd54f,
+  color-warning-500: #ffb900,
+  color-warning-600: #e6a700,
+  color-warning-700: #cc9500,
+  color-warning-800: #997000,
+  color-warning-900: #664b00,
+
+  color-warning-default: color-warning-500,
+  color-warning-hover: color-warning-600,
+  color-warning-active: color-warning-700,
+
+  // ── Danger (Microsoft Red) ──────────────────────────────────────────────
+  color-danger-100: #fde7e9,
+  color-danger-200: #f9c6ca,
+  color-danger-300: #f3a3a6,
+  color-danger-400: #e74856,
+  color-danger-500: #d13438,
+  color-danger-600: #bc2f32,
+  color-danger-700: #a4262c,
+  color-danger-800: #8b2025,
+  color-danger-900: #6e191d,
+
+  color-danger-default: color-danger-500,
+  color-danger-hover: color-danger-600,
+  color-danger-active: color-danger-700,
+
+  // ── Info (Microsoft Teal) ───────────────────────────────────────────────
+  color-info-100: #e0f7fa,
+  color-info-200: #b2ebf2,
+  color-info-300: #80deea,
+  color-info-400: #26c6da,
+  color-info-500: #00b7c3,
+  color-info-600: #009da5,
+  color-info-700: #008387,
+  color-info-800: #006b6b,
+  color-info-900: #00524f,
+
+  color-info-default: color-info-500,
+  color-info-hover: color-info-600,
+  color-info-active: color-info-700,
+
+  // ── Basic / Neutral (Microsoft Grays) ───────────────────────────────────
+  color-basic-100: #ffffff,
+  color-basic-200: #faf9f8,
+  color-basic-300: #f3f2f1,
+  color-basic-400: #edebe9,
+  color-basic-500: #d2d0ce,
+  color-basic-600: #a19f9d,
+  color-basic-700: #605e5c,
+  color-basic-800: #3b3a39,
+  color-basic-900: #323130,
+  color-basic-1000: #201f1e,
+  color-basic-1100: #11100f,
+
+  // ── Control (text on filled backgrounds) ────────────────────────────────
+  color-control: #ffffff,
+  color-control-muted: rgba(255, 255, 255, 0.72),
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SEMANTIC BACKGROUND COLORS
+  // ═══════════════════════════════════════════════════════════════════════════
+  background-basic-color-1: color-basic-100,
+  background-basic-color-2: color-basic-200,
+  background-basic-color-3: color-basic-300,
+  background-basic-color-4: color-basic-400,
+  background-alternative-color-1: color-basic-900,
+  background-alternative-color-2: color-basic-1000,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SEMANTIC TEXT COLORS
+  // ═══════════════════════════════════════════════════════════════════════════
+  text-basic-color: color-basic-1000,
+  text-alternate-color: color-basic-100,
+  text-control-color: color-control,
+  text-hint-color: color-basic-600,
+  text-disabled-color: color-basic-500,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // BORDERS
+  // ═══════════════════════════════════════════════════════════════════════════
+  border-basic-color: color-basic-400,
+  border-basic-color-2: color-basic-500,
+  border-basic-color-3: color-basic-300,
+  border-primary-color: color-primary-default,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TYPOGRAPHY
+  // ═══════════════════════════════════════════════════════════════════════════
+  font-family-primary: string.unquote(
+      "'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
+    ),
+  font-family-secondary: string.unquote(
+      "'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif"
+    ),
+  font-family-mono: string.unquote(
+      "'Cascadia Code', 'Fira Code', 'Consolas', monospace"
+    ),
+  font-size-xs: 0.75rem,
+  font-size-sm: 0.875rem,
+  font-size-md: 0.9375rem,
+  font-size-lg: 1.125rem,
+  font-size-xl: 1.25rem,
+  font-size-2xl: 1.5rem,
+  font-size-3xl: 2rem,
+
+  font-weight-normal: 400,
+  font-weight-medium: 500,
+  font-weight-semibold: 600,
+  font-weight-bold: 700,
+
+  line-height-sm: 1.25,
+  line-height-md: 1.5,
+  line-height-lg: 1.75,
+
+  // Heading sizes
+  text-heading-1-font-size: 2rem,
+  text-heading-1-font-weight: font-weight-semibold,
+  text-heading-2-font-size: 1.5rem,
+  text-heading-2-font-weight: font-weight-semibold,
+  text-heading-3-font-size: 1.25rem,
+  text-heading-3-font-weight: font-weight-semibold,
+  text-heading-4-font-size: 1.125rem,
+  text-heading-4-font-weight: font-weight-semibold,
+
+  text-body-font-size: font-size-md,
+  text-body-font-weight: font-weight-normal,
+  text-caption-font-size: font-size-xs,
+  text-caption-font-weight: font-weight-normal,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SPACING
+  // ═══════════════════════════════════════════════════════════════════════════
+  spacing-xs: 0.25rem,
+  spacing-sm: 0.5rem,
+  spacing-md: 1rem,
+  spacing-lg: 1.5rem,
+  spacing-xl: 2rem,
+  spacing-2xl: 3rem,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // BORDER RADIUS
+  // ═══════════════════════════════════════════════════════════════════════════
+  border-radius: 4px,
+  radius-sm: 2px,
+  radius-md: 4px,
+  radius-lg: 8px,
+  radius-xl: 12px,
+  radius-full: 9999px,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // SHADOWS (Fluent elevation)
+  // ═══════════════════════════════════════════════════════════════════════════
+  shadow: string.unquote(
+      '0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108)'
+    ),
+  shadow-sm: string.unquote(
+      '0 0.8px 1.8px 0 rgba(0, 0, 0, 0.108), 0 0.15px 0.45px 0 rgba(0, 0, 0, 0.084)'
+    ),
+  shadow-md: string.unquote(
+      '0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108)'
+    ),
+  shadow-lg: string.unquote(
+      '0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108)'
+    ),
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TRANSITIONS
+  // ═══════════════════════════════════════════════════════════════════════════
+  transition-duration-fast: 100ms,
+  transition-duration-medium: 150ms,
+  transition-duration-normal: 200ms,
+  transition-duration-slow: 300ms,
+  transition-timing: cubic-bezier(0.33, 0, 0.67, 1),
+  // ═══════════════════════════════════════════════════════════════════════════
+  // OUTLINE / FOCUS
+  // ═══════════════════════════════════════════════════════════════════════════
+  outline-color: color-basic-1000,
+  outline-width: 2px,
+  focus-ring-color: color-primary-focus,
+  focus-ring-width: 2px,
+  focus-ring-offset: 2px,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // DIVIDER
+  // ═══════════════════════════════════════════════════════════════════════════
+  divider-color: border-basic-color-3,
+  divider-width: 1px,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // ALERT COMPONENT
+  // ═══════════════════════════════════════════════════════════════════════════
+  alert-border-radius: radius-md,
+  alert-padding: string.unquote('0.875rem 1rem'),
+  alert-gap: spacing-sm,
+  alert-font-size: font-size-sm,
+  alert-title-font-weight: font-weight-semibold,
+  alert-title-font-size: font-size-sm,
+  alert-close-size: 1rem,
+
+  // Alert — info (subtle)
+  alert-info-subtle-background: color-info-100,
+  alert-info-subtle-color: color-info-700,
+  alert-info-subtle-border: color-info-300,
+  // Alert — info (filled)
+  alert-info-filled-background: color-info-default,
+  alert-info-filled-color: color-control,
+  alert-info-filled-border: color-info-default,
+  // Alert — info (outline)
+  alert-info-outline-background: transparent,
+  alert-info-outline-color: color-info-700,
+  alert-info-outline-border: color-info-default,
+
+  // Alert — success (subtle)
+  alert-success-subtle-background: color-success-100,
+  alert-success-subtle-color: color-success-700,
+  alert-success-subtle-border: color-success-300,
+  // Alert — success (filled)
+  alert-success-filled-background: color-success-default,
+  alert-success-filled-color: color-control,
+  alert-success-filled-border: color-success-default,
+  // Alert — success (outline)
+  alert-success-outline-background: transparent,
+  alert-success-outline-color: color-success-700,
+  alert-success-outline-border: color-success-default,
+
+  // Alert — warning (subtle)
+  alert-warning-subtle-background: color-warning-100,
+  alert-warning-subtle-color: color-warning-800,
+  alert-warning-subtle-border: color-warning-400,
+  // Alert — warning (filled)
+  alert-warning-filled-background: color-warning-default,
+  alert-warning-filled-color: color-basic-1100,
+  alert-warning-filled-border: color-warning-default,
+  // Alert — warning (outline)
+  alert-warning-outline-background: transparent,
+  alert-warning-outline-color: color-warning-700,
+  alert-warning-outline-border: color-warning-default,
+
+  // Alert — danger (subtle)
+  alert-danger-subtle-background: color-danger-100,
+  alert-danger-subtle-color: color-danger-700,
+  alert-danger-subtle-border: color-danger-300,
+  // Alert — danger (filled)
+  alert-danger-filled-background: color-danger-default,
+  alert-danger-filled-color: color-control,
+  alert-danger-filled-border: color-danger-default,
+  // Alert — danger (outline)
+  alert-danger-outline-background: transparent,
+  alert-danger-outline-color: color-danger-700,
+  alert-danger-outline-border: color-danger-default,
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // TOAST COMPONENT
+  // ═══════════════════════════════════════════════════════════════════════════
+  toast-border-radius: radius-lg,
+  toast-padding: string.unquote('0.875rem 1rem'),
+  toast-gap: spacing-sm,
+  toast-min-width: 20rem,
+  toast-max-width: 24rem,
+  toast-font-size: font-size-sm,
+  toast-title-font-weight: font-weight-semibold,
+  toast-title-font-size: font-size-sm,
+  toast-shadow: shadow-md,
+  toast-background: background-basic-color-1,
+  toast-color: text-basic-color,
+  toast-border-color: border-basic-color,
+  toast-close-size: 1rem,
+  toast-progress-height: 3px,
+
+  toast-info-accent: color-info-default,
+  toast-success-accent: color-success-default,
+  toast-warning-accent: color-warning-default,
+  toast-danger-accent: color-danger-default
+);
+
+// Register as the default theme (no parent)
+vars.$rc-themes: reg.rc-register-theme($theme, default);

package/src/lib/styles/theming/_animation.scss

@@ -0,0 +1,92 @@
+// =============================================================================
+// Resolve Components — rc-component-animation mixin
+// =============================================================================
+// Wraps CSS `transition` declarations in `@media (prefers-reduced-motion: no-preference)`
+// so that users who opt out of motion receive no transitions whatsoever.
+//
+// Usage:
+//   @use '../styles/theming/animation' as *;
+//
+//   .my-element {
+//     @include rc-component-animation(background color);
+//     @include rc-component-animation(transform, $speed: 'normal');
+//     @include rc-component-animation(border-color, $speed: 'medium');
+//     @include rc-component-animation(
+//       background,
+//       $duration: rc-theme('accordion-transition-duration'),
+//       $timing: rc-theme('accordion-transition-timing')
+//     );
+//   }
+// =============================================================================
+
+@use 'sass:list';
+@use 'get-value' as *;
+
+/// Emits a CSS `transition` declaration wrapped in
+/// `@media (prefers-reduced-motion: no-preference)`.
+///
+/// @param {List}   $properties  Space-separated CSS properties to animate.
+///                              E.g. `background color` or just `transform`.
+///
+/// @param {String} $speed       Pre-defined duration tier.
+///                              `'fast'` → 100ms · `'medium'` → 150ms ·
+///                              `'normal'` → 200ms · `'slow'` → 300ms.
+///                              Default: `'fast'`. Ignored when `$duration` is given.
+///
+/// @param {*}      $timing      Custom CSS timing function.
+///                              Defaults to the `transition-timing` theme token.
+///
+/// @param {*}      $duration    Raw duration value (e.g. `rc-theme('accordion-transition-duration')`).
+///                              When provided, `$speed` is ignored for the duration.
+///
+/// @example scss — simple, multiple props
+///   .rc-button { @include rc-component-animation(background color); }
+///
+/// @example scss — speed tier
+///   .rc-toggle-thumb { @include rc-component-animation(transform, $speed: 'normal'); }
+///
+/// @example scss — component token
+///   .rc-accordion-header {
+///     @include rc-component-animation(
+///       background,
+///       $duration: rc-theme('accordion-transition-duration'),
+///       $timing: rc-theme('accordion-transition-timing')
+///     );
+///   }
+@mixin rc-component-animation(
+  $properties,
+  $speed: 'fast',
+  $timing: null,
+  $duration: null
+) {
+  $d: $duration;
+
+  @if $d == null {
+    @if $speed == 'fast' {
+      $d: rc-theme('transition-duration-fast');
+    } @else if $speed == 'medium' {
+      $d: rc-theme('transition-duration-medium');
+    } @else if $speed == 'normal' {
+      $d: rc-theme('transition-duration-normal');
+    } @else {
+      $d: rc-theme('transition-duration-slow');
+    }
+  }
+
+  $t: null;
+  @if $timing != null {
+    $t: $timing;
+  } @else {
+    $t: rc-theme('transition-timing');
+  }
+
+  $result: ();
+
+  @each $prop in $properties {
+    $result: list.append($result, $prop $d $t, $separator: comma);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: $result;
+  }
+}

package/src/lib/styles/theming/_functions.scss

@@ -0,0 +1,34 @@
+// =============================================================================
+// Resolve Components — Helper Functions
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+
+/// Deeply merge two maps recursively.
+/// @param {Map} $map1 - Base map.
+/// @param {Map} $map2 - Override map.
+/// @return {Map} Merged map.
+@function rc-map-deep-merge($map1, $map2) {
+  $result: $map1;
+
+  @each $key, $value in $map2 {
+    @if meta.type-of($value) == 'map' and map.has-key($result, $key) and meta.type-of(map.get($result, $key)) == 'map' {
+      $result: map.set($result, $key, rc-map-deep-merge(map.get($result, $key), $value));
+    } @else {
+      $result: map.set($result, $key, $value);
+    }
+  }
+
+  @return $result;
+}
+
+/// Set a key in a map, returning the new map.
+/// @param {Map} $map
+/// @param {String} $key
+/// @param {*} $value
+/// @return {Map}
+@function rc-map-set($map, $key, $value) {
+  @return map.merge($map, ($key: $value));
+}

package/src/lib/styles/theming/_get-value.scss

@@ -0,0 +1,70 @@
+// =============================================================================
+// Resolve Components — Theme Value Resolution
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'theming-variables' as vars;
+@use 'register' as reg;
+
+/// Recursively resolve an alias chain in a theme map.
+///
+/// If the value of a key is itself a key in the same map, follow the chain
+/// until a terminal (non-key) value is found.
+///
+/// Example: card-bg → background-basic-color-1 → color-basic-100 → #ffffff
+///
+/// @param {Map} $theme - The theme map.
+/// @param {String} $key - Original key (for error reporting).
+/// @param {*} $value - Current value to resolve.
+/// @return {*} Terminal value.
+@function rc-deep-find-value($theme, $key, $value) {
+  @if $value == null {
+    @return null;
+  }
+
+  $parent-value: map.get($theme, $value);
+
+  @if $parent-value != null and $parent-value != $value {
+    @return rc-deep-find-value($theme, $value, $parent-value);
+  }
+
+  @return $value;
+}
+
+/// Retrieve a themed value by variable name.
+///
+/// In CSS custom properties mode (default), returns `var(--variable-name)`.
+/// In pre-process mode, returns the resolved SCSS value.
+/// In lazy-process mode, resolves at compile time by walking the alias chain.
+///
+/// @param {String} $key - The theme variable name.
+/// @return {*} The resolved value or CSS var() reference.
+///
+/// @example scss
+///   .my-component {
+///     background: rc-theme('card-background-color');
+///     // → var(--card-background-color) in CSS custom properties mode
+///   }
+@function rc-theme($key) {
+  $value: null;
+
+  @if vars.$rc-enable-css-custom-properties == true {
+    // CSS custom properties mode → emit var(--key)
+    $value: var(--#{$key});
+  } @else if vars.$rc-theme-process-mode == 'pre-process' {
+    // Pre-processed: value already resolved
+    $value: map.get(vars.$rc-processed-theme, $key);
+  } @else {
+    // Lazy mode: resolve at call time
+    $theme: reg.rc-get-registered-theme(vars.$rc-theme-name);
+    $raw: map.get($theme, $key);
+    $value: rc-deep-find-value($theme, $key, $raw);
+  }
+
+  @if $value == null {
+    @warn 'rc-theme: Variable "#{$key}" not found in theme "#{vars.$rc-theme-name}".';
+  }
+
+  @return $value;
+}

package/src/lib/styles/theming/_install.scss

@@ -0,0 +1,141 @@
+// =============================================================================
+// Resolve Components — Theme Installation
+// =============================================================================
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'theming-variables' as vars;
+@use 'register' as reg;
+
+// =============================================================================
+// Public API
+// =============================================================================
+
+/// Main install mixin. Call this once in your application's global stylesheet.
+///
+/// In CSS custom properties mode (default), it:
+///   1. Emits the @content block (global styles) once.
+///   2. Emits `.rc-theme-{name} { --var: value; }` blocks for each theme.
+///
+/// @example scss
+///   // In your styles.scss:
+///   @use '@resolve-components/styles/theming' as *;
+///
+///   @include rc-install() {
+///     // Optional global styles
+///     body { margin: 0; font-family: var(--font-family-primary); }
+///   }
+@mixin rc-install() {
+  @if vars.$rc-enable-css-custom-properties {
+    @include _rc-install-global-with-css-props() {
+      @content;
+    }
+  } @else {
+    @include _rc-install-global-without-css-props() {
+      @content;
+    }
+  }
+}
+
+/// Wraps component styles. Use this in every component's SCSS file.
+///
+/// In CSS custom properties mode, simply emits the content.
+/// In legacy mode, duplicates styles for each `.rc-theme-{name} :host { ... }`.
+///
+/// @example scss
+///   @use '@resolve-components/styles/theming' as *;
+///
+///   @include rc-install-component() {
+///     :host {
+///       background: rc-theme('card-background-color');
+///     }
+///   }
+@mixin rc-install-component() {
+  @if vars.$rc-enable-css-custom-properties {
+    @content;
+  } @else {
+    @each $theme-name in reg.rc-get-enabled-themes() {
+      .rc-theme-#{$theme-name} {
+        @content;
+      }
+    }
+  }
+}
+
+// =============================================================================
+// Conditional Theme Mixins
+// =============================================================================
+
+/// Only emit styles for a specific theme.
+/// @param {String} $name - Theme name.
+@mixin rc-for-theme($name) {
+  @if vars.$rc-theme-name == $name {
+    @content;
+  }
+}
+
+/// Emit styles for all themes except the named one.
+/// @param {String} $name - Theme name to exclude.
+@mixin rc-except-theme($name) {
+  @if vars.$rc-theme-name != $name {
+    @content;
+  }
+}
+
+// =============================================================================
+// Private Implementation
+// =============================================================================
+
+/// CSS Custom Properties installation (modern mode).
+@mixin _rc-install-global-with-css-props() {
+  // Emit global styles once
+  @content;
+
+  // Emit CSS custom property blocks per theme
+  @each $theme-name in reg.rc-get-enabled-themes() {
+    $theme: reg.rc-get-registered-theme($theme-name);
+    @include _rc-install-css-properties($theme-name, $theme);
+  }
+}
+
+/// Emit CSS custom properties for a single theme.
+/// Keys prefixed with `_` are emitted as direct CSS properties (e.g. `_color-scheme` → `color-scheme: dark`).
+/// Aliases become `var(--other-var)` references, terminal values are emitted directly.
+@mixin _rc-install-css-properties($theme-name, $theme) {
+  .rc-theme-#{$theme-name} {
+    @each $var, $value in $theme {
+      @if string.slice('#{$var}', 1, 1) == '_' {
+        // Direct CSS property — strip the leading underscore
+        #{string.slice('#{$var}', 2)}: #{$value};
+      } @else if
+        meta.type-of($value) ==
+        'string' and
+        map.has-key($theme, $value)
+      {
+        // Value is an alias to another theme variable → CSS var reference
+        --#{$var}: var(--#{$value});
+      } @else {
+        // Terminal value → emit directly
+        --#{$var}: #{$value};
+      }
+    }
+  }
+}
+
+/// Legacy (non-CSS-props) installation.
+@mixin _rc-install-global-without-css-props() {
+  @each $theme-name in reg.rc-get-enabled-themes() {
+    $theme: reg.rc-get-registered-theme($theme-name);
+
+    vars.$rc-theme-name: $theme-name;
+    vars.$rc-theme: $theme;
+
+    .rc-theme-#{$theme-name} {
+      @content;
+    }
+  }
+
+  vars.$rc-theme-name: null;
+  vars.$rc-theme: ();
+}