@educarehq/solaris-ui 0.3.2 → 0.3.3

package/styles/_popover.scss

@@ -1,73 +1,73 @@
-.solaris-popover-panel-overlay {
-  z-index: var(--solaris-z-index-popover);
-}
-
-.solaris-popover-panel {
-  --solaris-popover-border-width: 0;
-  --solaris-popover-min-width: auto;
-  --solaris-popover-max-width: none;
-  --solaris-popover-border-color: transparent;
-  --solaris-popover-radius: var(--solaris-radius-md);
-  --solaris-popover-shadow: var(--solaris-shadow-lg);
-  --solaris-popover-padding: var(--solaris-spacing-3);
-  --solaris-popover-color: var(--solaris-text-default);
-  --solaris-popover-background: var(--solaris-surface-raised);
-
-  outline: none;
-  display: block;
-}
-
-.solaris-popover-panel__container {
-  outline: none;
-  box-sizing: border-box;
-  color: var(--solaris-popover-color);
-  padding: var(--solaris-popover-padding);
-  box-shadow: var(--solaris-popover-shadow);
-  min-width: var(--solaris-popover-min-width);
-  max-width: var(--solaris-popover-max-width);
-  border-radius: var(--solaris-popover-radius);
-  background: var(--solaris-popover-background);
-  border: var(--solaris-popover-border-width) solid
-    var(--solaris-popover-border-color);
-}
-
-.solaris-popover-panel__container[data-appearance='outline'] {
-  background: var(--solaris-surface-base);
-  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
-}
-
-.solaris-popover-panel__container[data-padding='none'] {
-  --solaris-popover-padding: 0;
-}
-
-.solaris-popover-panel__container[data-padding='sm'] {
-  --solaris-popover-padding: var(--solaris-spacing-2);
-}
-
-.solaris-popover-panel__container[data-padding='md'] {
-  --solaris-popover-padding: var(--solaris-spacing-3);
-}
-
-.solaris-popover-panel__container[data-padding='lg'] {
-  --solaris-popover-padding: var(--solaris-spacing-4);
-}
-
-.solaris-popover-panel__container[data-radius='none'] {
-  border-radius: var(--solaris-radius-none);
-}
-
-.solaris-popover-panel__container[data-radius='sm'] {
-  border-radius: var(--solaris-radius-sm);
-}
-
-.solaris-popover-panel__container[data-radius='md'] {
-  border-radius: var(--solaris-radius-md);
-}
-
-.solaris-popover-panel__container[data-radius='lg'] {
-  border-radius: var(--solaris-radius-lg);
-}
-
-.solaris-popover-panel__container[data-radius='xl'] {
-  border-radius: var(--solaris-radius-xl);
-}
+.solaris-popover-panel-overlay {
+  z-index: var(--solaris-z-index-popover);
+}
+
+.solaris-popover-panel {
+  --solaris-popover-border-width: 0;
+  --solaris-popover-min-width: auto;
+  --solaris-popover-max-width: none;
+  --solaris-popover-border-color: transparent;
+  --solaris-popover-radius: var(--solaris-radius-md);
+  --solaris-popover-shadow: var(--solaris-shadow-lg);
+  --solaris-popover-padding: var(--solaris-spacing-3);
+  --solaris-popover-color: var(--solaris-text-default);
+  --solaris-popover-background: var(--solaris-surface-raised);
+
+  outline: none;
+  display: block;
+}
+
+.solaris-popover-panel__container {
+  outline: none;
+  box-sizing: border-box;
+  color: var(--solaris-popover-color);
+  padding: var(--solaris-popover-padding);
+  box-shadow: var(--solaris-popover-shadow);
+  min-width: var(--solaris-popover-min-width);
+  max-width: var(--solaris-popover-max-width);
+  border-radius: var(--solaris-popover-radius);
+  background: var(--solaris-popover-background);
+  border: var(--solaris-popover-border-width) solid
+    var(--solaris-popover-border-color);
+}
+
+.solaris-popover-panel__container[data-appearance='outline'] {
+  background: var(--solaris-surface-base);
+  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
+}
+
+.solaris-popover-panel__container[data-padding='none'] {
+  --solaris-popover-padding: 0;
+}
+
+.solaris-popover-panel__container[data-padding='sm'] {
+  --solaris-popover-padding: var(--solaris-spacing-2);
+}
+
+.solaris-popover-panel__container[data-padding='md'] {
+  --solaris-popover-padding: var(--solaris-spacing-3);
+}
+
+.solaris-popover-panel__container[data-padding='lg'] {
+  --solaris-popover-padding: var(--solaris-spacing-4);
+}
+
+.solaris-popover-panel__container[data-radius='none'] {
+  border-radius: var(--solaris-radius-none);
+}
+
+.solaris-popover-panel__container[data-radius='sm'] {
+  border-radius: var(--solaris-radius-sm);
+}
+
+.solaris-popover-panel__container[data-radius='md'] {
+  border-radius: var(--solaris-radius-md);
+}
+
+.solaris-popover-panel__container[data-radius='lg'] {
+  border-radius: var(--solaris-radius-lg);
+}
+
+.solaris-popover-panel__container[data-radius='xl'] {
+  border-radius: var(--solaris-radius-xl);
+}

package/styles/_textarea.scss

@@ -0,0 +1,242 @@
+textarea[solaris-textarea] {
+  --solaris-textarea-background: initial;
+  --solaris-textarea-color: initial;
+  --solaris-textarea-border-color: initial;
+  --solaris-textarea-border-width: initial;
+  --solaris-textarea-radius: initial;
+  --solaris-textarea-padding-x: initial;
+  --solaris-textarea-padding-y: initial;
+  --solaris-textarea-min-height: initial;
+  --solaris-textarea-font-size: initial;
+  --solaris-textarea-line-height: initial;
+  --solaris-textarea-placeholder-color: initial;
+  --solaris-textarea-focus-ring-color: initial;
+  --solaris-textarea-invalid-border-color: initial;
+  --solaris-textarea-disabled-opacity: initial;
+  --solaris-textarea-readonly-background: initial;
+
+  font-family: var(--solaris-font-family-sans), system-ui;
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  color: var(--solaris-textarea-color);
+  background: var(--solaris-textarea-background);
+  border: var(--solaris-textarea-border-width) solid
+    var(--solaris-textarea-border-color);
+  border-radius: var(--solaris-textarea-radius);
+  min-height: var(--solaris-textarea-min-height);
+  padding: var(--solaris-textarea-padding-y) var(--solaris-textarea-padding-x);
+  font-size: var(--solaris-textarea-font-size);
+  line-height: var(--solaris-textarea-line-height);
+  outline: none;
+  transition:
+    border-color var(--solaris-motion-duration-fast, 150ms) ease,
+    box-shadow var(--solaris-motion-duration-fast, 150ms) ease;
+}
+
+textarea[solaris-textarea]::placeholder {
+  color: var(--solaris-textarea-placeholder-color);
+  opacity: 1;
+}
+
+textarea[solaris-textarea]:focus-visible {
+  border-color: var(--solaris-textarea-focus-ring-color);
+  // SOLARIS_TOKEN_EXCEPTION: Focus ring box-shadow uses CSS var with tokenized color. Hardcoded spread required by design.
+  box-shadow: 0 0 0 2px var(--solaris-textarea-focus-ring-color);
+}
+
+textarea[solaris-textarea][data-invalid] {
+  border-color: var(--solaris-textarea-invalid-border-color);
+}
+
+textarea[solaris-textarea][data-invalid]:focus-visible {
+  border-color: var(--solaris-textarea-invalid-border-color);
+  // SOLARIS_TOKEN_EXCEPTION: Invalid state focus ring box-shadow uses CSS var. Hardcoded spread required by design.
+  box-shadow: 0 0 0 2px var(--solaris-textarea-invalid-border-color);
+}
+
+textarea[solaris-textarea]:disabled {
+  cursor: not-allowed;
+  opacity: var(--solaris-textarea-disabled-opacity);
+}
+
+textarea[solaris-textarea][readonly] {
+  background: var(--solaris-textarea-readonly-background);
+  cursor: default;
+}
+
+textarea[solaris-textarea][data-appearance='outline'] {
+  --solaris-textarea-background: var(--solaris-surface-base);
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-border-color: var(--solaris-border-default);
+  --solaris-textarea-border-width: 1px;
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-disabled-opacity: 0.5;
+  --solaris-textarea-readonly-background: var(--solaris-surface-muted);
+}
+
+textarea[solaris-textarea][data-appearance='surface'] {
+  --solaris-textarea-background: var(--solaris-surface-muted);
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-border-color: var(--solaris-border-subtle);
+  --solaris-textarea-border-width: 1px;
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-disabled-opacity: 0.5;
+  --solaris-textarea-readonly-background: var(--solaris-surface-base);
+}
+
+textarea[solaris-textarea][data-appearance='filled'] {
+  --solaris-textarea-background: var(--solaris-surface-muted);
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-border-color: transparent;
+  --solaris-textarea-border-width: 0 0 1px 0;
+  --solaris-textarea-placeholder-color: var(--solaris-text-muted);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-base);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-base);
+  --solaris-textarea-disabled-opacity: 0.5;
+  --solaris-textarea-readonly-background: var(--solaris-surface-base);
+}
+
+textarea[solaris-textarea][data-size='sm'] {
+  --solaris-textarea-padding-x: var(--solaris-spacing-2);
+  --solaris-textarea-padding-y: 0.25rem;
+  --solaris-textarea-min-height: 3rem;
+  --solaris-textarea-font-size: var(--solaris-font-size-sm);
+  --solaris-textarea-line-height: var(--solaris-line-height-sm);
+}
+
+textarea[solaris-textarea][data-size='md'] {
+  --solaris-textarea-padding-x: var(--solaris-spacing-3);
+  --solaris-textarea-padding-y: 0.375rem;
+  --solaris-textarea-min-height: 3.5rem;
+  --solaris-textarea-font-size: var(--solaris-font-size-md);
+  --solaris-textarea-line-height: var(--solaris-line-height-md);
+}
+
+textarea[solaris-textarea][data-size='lg'] {
+  --solaris-textarea-padding-x: var(--solaris-spacing-4);
+  --solaris-textarea-padding-y: 0.5rem;
+  --solaris-textarea-min-height: 4rem;
+  --solaris-textarea-font-size: var(--solaris-font-size-lg);
+  --solaris-textarea-line-height: var(--solaris-line-height-lg);
+}
+
+textarea[solaris-textarea][data-density='compact'] {
+  --solaris-textarea-padding-y: 0.1875rem;
+  --solaris-textarea-line-height: var(--solaris-line-height-sm);
+}
+
+textarea[solaris-textarea][data-density='comfortable'] {
+  --solaris-textarea-padding-y: 0.5rem;
+  --solaris-textarea-line-height: var(--solaris-line-height-md);
+}
+
+textarea[solaris-textarea][data-radius='none'] {
+  --solaris-textarea-radius: 0;
+}
+
+textarea[solaris-textarea][data-radius='sm'] {
+  --solaris-textarea-radius: var(--solaris-radius-sm);
+}
+
+textarea[solaris-textarea][data-radius='md'] {
+  --solaris-textarea-radius: var(--solaris-radius-md);
+}
+
+textarea[solaris-textarea][data-radius='lg'] {
+  --solaris-textarea-radius: var(--solaris-radius-lg);
+}
+
+textarea[solaris-textarea][data-resize='none'] {
+  resize: none;
+}
+
+textarea[solaris-textarea][data-resize='vertical'] {
+  resize: vertical;
+}
+
+textarea[solaris-textarea][data-resize='horizontal'] {
+  resize: horizontal;
+}
+
+textarea[solaris-textarea][data-resize='both'] {
+  resize: both;
+}
+
+textarea[solaris-textarea][data-full-width] {
+  width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  textarea[solaris-textarea] {
+    transition: none;
+  }
+}
+
+[data-reduced-motion='true'] textarea[solaris-textarea] {
+  transition: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  textarea[solaris-textarea]:autofill,
+  textarea[solaris-textarea]:-webkit-autofill {
+    -webkit-text-fill-color: var(--solaris-textarea-color);
+    // SOLARIS_TOKEN_EXCEPTION: WebKit autofill dark mode requires hardcoded box-shadow inset to override browser default.
+    -webkit-box-shadow: 0 0 0 30px var(--solaris-textarea-background) inset;
+  }
+}
+
+solaris-form-field textarea[solaris-textarea] {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+solaris-form-field textarea[solaris-textarea]:focus-visible {
+  border-color: transparent;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+solaris-form-field textarea[solaris-textarea][data-invalid] {
+  border-color: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea][data-invalid]:focus-visible {
+  border-color: transparent;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+solaris-form-field textarea[solaris-textarea][disabled] {
+  opacity: var(--solaris-textarea-disabled-opacity);
+}
+
+solaris-form-field textarea[solaris-textarea][readonly] {
+  background: transparent;
+}
+
+solaris-form-field textarea[solaris-textarea][data-density='compact'] {
+  padding-top: 0.1875rem;
+  padding-bottom: 0.1875rem;
+}
+
+solaris-form-field textarea[solaris-textarea][data-density='comfortable'] {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+solaris-form-field textarea[solaris-textarea]:autofill,
+solaris-form-field textarea[solaris-textarea]:-webkit-autofill {
+  -webkit-text-fill-color: var(--solaris-textarea-color);
+  // SOLARIS_TOKEN_EXCEPTION: WebKit autofill inside form-field requires hardcoded transparent box-shadow inset.
+  -webkit-box-shadow: 0 0 0 30px transparent inset;
+}

package/styles/_theme.scss

@@ -1,46 +1,46 @@
-/// Solaris UI Theme
-/// Applies token CSS custom properties based on configuration.
-///
-/// Usage:
-///   @use '@solaris-ui/angular/styles' as solaris;
-///   @include solaris.theme((
-///     color-scheme: system,
-///     density: comfortable,
-///     radius: md,
-///     motion: auto
-///   ));
-
-@use 'sass:map';
-@use 'token/color';
-@use 'token/density';
-@use 'token/radius';
-@use 'token/spacing';
-@use 'token/typography';
-@use 'token/shadow';
-@use 'token/motion';
-@use 'token/z-index';
-@use 'token/border';
-@use 'token/opacity';
-
-$-default-config: (
-  color-scheme: system,
-  density: comfortable,
-  radius: md,
-  motion: auto,
-);
-
-@mixin theme($config: ()) {
-  $merged: map.merge($-default-config, $config);
-
-  $color-scheme: map.get($merged, color-scheme);
-
-  :root {
-    @if $color-scheme == light {
-      color-scheme: light;
-    } @else if $color-scheme == dark {
-      color-scheme: dark;
-    } @else {
-      color-scheme: light dark;
-    }
-  }
-}
+/// Solaris UI Theme
+/// Applies token CSS custom properties based on configuration.
+///
+/// Usage:
+///   @use '@solaris-ui/angular/styles' as solaris;
+///   @include solaris.theme((
+///     color-scheme: system,
+///     density: comfortable,
+///     radius: md,
+///     motion: auto
+///   ));
+
+@use 'sass:map';
+@use 'token/color';
+@use 'token/density';
+@use 'token/radius';
+@use 'token/spacing';
+@use 'token/typography';
+@use 'token/shadow';
+@use 'token/motion';
+@use 'token/z-index';
+@use 'token/border';
+@use 'token/opacity';
+
+$-default-config: (
+  color-scheme: system,
+  density: comfortable,
+  radius: md,
+  motion: auto,
+);
+
+@mixin theme($config: ()) {
+  $merged: map.merge($-default-config, $config);
+
+  $color-scheme: map.get($merged, color-scheme);
+
+  :root {
+    @if $color-scheme == light {
+      color-scheme: light;
+    } @else if $color-scheme == dark {
+      color-scheme: dark;
+    } @else {
+      color-scheme: light dark;
+    }
+  }
+}

package/styles/_toast.scss

@@ -1,9 +1,9 @@
-.solaris-toast-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: var(--solaris-z-index-toast, 500);
-}
+.solaris-toast-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: var(--solaris-z-index-toast, 500);
+}

package/styles/_tooltip.scss

@@ -1,3 +1,3 @@
-.solaris-tooltip-panel-overlay {
-  z-index: var(--solaris-tooltip-z-index, var(--solaris-z-index-tooltip));
-}
+.solaris-tooltip-panel-overlay {
+  z-index: var(--solaris-tooltip-z-index, var(--solaris-z-index-tooltip));
+}

package/styles/token/border/_border.scss

@@ -1,5 +1,5 @@
-:root {
-  --solaris-border-width-sm: 0.1rem;
-  --solaris-border-width-md: 0.2rem;
-  --solaris-border-width-lg: 0.3rem;
-}
+:root {
+  --solaris-border-width-sm: 0.1rem;
+  --solaris-border-width-md: 0.2rem;
+  --solaris-border-width-lg: 0.3rem;
+}

package/styles/token/border/_index.scss

@@ -1 +1 @@
-@forward 'border';
+@forward 'border';

package/styles/token/color/_dark.scss

@@ -1,78 +1,78 @@
-@mixin solaris-dark-tokens {
-  --solaris-bg-page: #151616;
-  --solaris-surface-base: #111212;
-  --solaris-surface-subtle: #222324;
-  --solaris-surface-muted: #333435;
-  --solaris-surface-raised: #202123;
-  --solaris-backdrop: #000000bf;
-
-  --solaris-text-strong: #f2f5fb;
-  --solaris-text-default: #e4e6ec;
-  --solaris-text-muted: #adafb4;
-  --solaris-text-subtle: #7f8083;
-  --solaris-text-inverse: #151616;
-  --solaris-text-glass: #ffffff;
-
-  --solaris-border-subtle: #3b3b3c;
-  --solaris-border-default: #4a4b4d;
-  --solaris-border-strong: #626367;
-  --solaris-border-soft: #cfcfcf;
-
-  --solaris-primary-base: #155dfc;
-  --solaris-primary-hover: #2c72fa;
-  --solaris-primary-active: #568dff;
-  --solaris-primary-surface: #1b3c7a;
-  --solaris-primary-border: #3c5f88;
-  --solaris-primary-text: #f2f5fb;
-  --solaris-primary-on-solid: #101f26;
-
-  --solaris-success-base: #2dba4c;
-  --solaris-success-hover: #4db862;
-  --solaris-success-active: #66cc7a;
-  --solaris-success-surface: #0d2613;
-  --solaris-success-border: #1a5e28;
-  --solaris-success-text: #a3e0b0;
-  --solaris-success-on-solid: #0d2613;
-
-  --solaris-warning-base: #fae022;
-  --solaris-warning-hover: #e0c82a;
-  --solaris-warning-active: #ead746;
-  --solaris-warning-surface: #2b2504;
-  --solaris-warning-border: #5e5208;
-  --solaris-warning-text: #f0e48a;
-  --solaris-warning-on-solid: #17191e;
-
-  --solaris-danger-base: #f23d45;
-  --solaris-danger-hover: #f7535a;
-  --solaris-danger-active: #f7878c;
-  --solaris-danger-surface: #2e0a0c;
-  --solaris-danger-border: #661618;
-  --solaris-danger-text: #f9aeb2;
-  --solaris-danger-on-solid: #ffffff;
-
-  --solaris-info-base: #4992ef;
-  --solaris-info-hover: #76b0ed;
-  --solaris-info-active: #8dc5f5;
-  --solaris-info-surface: #0e1f30;
-  --solaris-info-border: #244d75;
-  --solaris-info-text: #dfeaf8;
-  --solaris-info-on-solid: #0e1f30;
-
-  --solaris-orange-base: #e98d16;
-  --solaris-orange-hover: #eea33b;
-  --solaris-orange-active: #f2b960;
-  --solaris-orange-surface: #2e1b04;
-  --solaris-orange-border: #663d0a;
-  --solaris-orange-text: #f5cf96;
-  --solaris-orange-on-solid: #2e1b04;
-}
-
-[data-theme='dark'] {
-  @include solaris-dark-tokens;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    @include solaris-dark-tokens;
-  }
-}
+@mixin solaris-dark-tokens {
+  --solaris-bg-page: #151616;
+  --solaris-surface-base: #111212;
+  --solaris-surface-subtle: #222324;
+  --solaris-surface-muted: #333435;
+  --solaris-surface-raised: #202123;
+  --solaris-backdrop: #000000bf;
+
+  --solaris-text-strong: #f2f5fb;
+  --solaris-text-default: #e4e6ec;
+  --solaris-text-muted: #adafb4;
+  --solaris-text-subtle: #7f8083;
+  --solaris-text-inverse: #151616;
+  --solaris-text-glass: #ffffff;
+
+  --solaris-border-subtle: #3b3b3c;
+  --solaris-border-default: #4a4b4d;
+  --solaris-border-strong: #626367;
+  --solaris-border-soft: #cfcfcf;
+
+  --solaris-primary-base: #155dfc;
+  --solaris-primary-hover: #2c72fa;
+  --solaris-primary-active: #568dff;
+  --solaris-primary-surface: #1b3c7a;
+  --solaris-primary-border: #3c5f88;
+  --solaris-primary-text: #f2f5fb;
+  --solaris-primary-on-solid: #101f26;
+
+  --solaris-success-base: #2dba4c;
+  --solaris-success-hover: #4db862;
+  --solaris-success-active: #66cc7a;
+  --solaris-success-surface: #0d2613;
+  --solaris-success-border: #1a5e28;
+  --solaris-success-text: #a3e0b0;
+  --solaris-success-on-solid: #0d2613;
+
+  --solaris-warning-base: #fae022;
+  --solaris-warning-hover: #e0c82a;
+  --solaris-warning-active: #ead746;
+  --solaris-warning-surface: #2b2504;
+  --solaris-warning-border: #5e5208;
+  --solaris-warning-text: #f0e48a;
+  --solaris-warning-on-solid: #17191e;
+
+  --solaris-danger-base: #f23d45;
+  --solaris-danger-hover: #f7535a;
+  --solaris-danger-active: #f7878c;
+  --solaris-danger-surface: #2e0a0c;
+  --solaris-danger-border: #661618;
+  --solaris-danger-text: #f9aeb2;
+  --solaris-danger-on-solid: #ffffff;
+
+  --solaris-info-base: #4992ef;
+  --solaris-info-hover: #76b0ed;
+  --solaris-info-active: #8dc5f5;
+  --solaris-info-surface: #0e1f30;
+  --solaris-info-border: #244d75;
+  --solaris-info-text: #dfeaf8;
+  --solaris-info-on-solid: #0e1f30;
+
+  --solaris-orange-base: #e98d16;
+  --solaris-orange-hover: #eea33b;
+  --solaris-orange-active: #f2b960;
+  --solaris-orange-surface: #2e1b04;
+  --solaris-orange-border: #663d0a;
+  --solaris-orange-text: #f5cf96;
+  --solaris-orange-on-solid: #2e1b04;
+}
+
+[data-theme='dark'] {
+  @include solaris-dark-tokens;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include solaris-dark-tokens;
+  }
+}