@educarehq/solaris-ui 0.3.3 → 0.6.0

package/styles/_icon-button.scss

@@ -1,28 +1,27 @@
 [solaris-icon-button] {
-  --solaris-icon-button-size: initial;
-  --solaris-icon-button-color: initial;
-  --solaris-icon-button-radius: initial;
-  --solaris-icon-button-background: initial;
-  --solaris-icon-button-border-color: initial;
-  --solaris-icon-button-border-width: initial;
-  --solaris-icon-button-disabled-opacity: 0.5;
-  --solaris-icon-button-focus-ring-color: initial;
-  --solaris-icon-button-hover-background: initial;
-  --solaris-icon-button-active-background: initial;
-  --solaris-icon-button-hover-border-color: initial;
-  --solaris-icon-button-active-border-color: initial;
-
+  --solaris-icon-button-border-width: 0;
   --solaris-icon-button-custom-color: initial;
+  --solaris-icon-button-border-color: transparent;
   --solaris-icon-button-custom-background: initial;
   --solaris-icon-button-custom-border-color: initial;
+  --solaris-icon-button-size: var(--solaris-spacing-10);
+  --solaris-icon-button-hover-border-color: transparent;
+  --solaris-icon-button-radius: var(--solaris-radius-sm);
+  --solaris-icon-button-active-border-color: transparent;
   --solaris-icon-button-custom-hover-background: initial;
-  --solaris-icon-button-custom-hover-border-color: initial;
   --solaris-icon-button-custom-active-background: initial;
+  --solaris-icon-button-color: var(--solaris-primary-text);
+  --solaris-icon-button-custom-hover-border-color: initial;
   --solaris-icon-button-custom-active-border-color: initial;
+  --solaris-icon-button-background: var(--solaris-primary-base);
+  --solaris-icon-button-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
+  --solaris-icon-button-hover-background: var(--solaris-primary-hover);
+  --solaris-icon-button-active-background: var(--solaris-primary-active);
 
   padding: 0;
   flex-shrink: 0;
-  line-height: 1;
+  line-height: var(--solaris-line-height-none);
   cursor: pointer;
   user-select: none;
   position: relative;
@@ -105,19 +104,20 @@
   border-radius: 50%;
   border: 2px solid var(--solaris-icon-button-color);
   border-top-color: transparent;
-  animation: solaris-icon-button-spin 0.6s linear infinite;
+  animation: solaris-icon-button-spin 0.6s var(--solaris-motion-easing-linear)
+    infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
   [solaris-icon-button][data-loading]::before {
-    opacity: 0.5;
     animation: none;
+    opacity: var(--solaris-opacity-50);
   }
 }
 
 [data-reduced-motion='true'] [solaris-icon-button][data-loading]::before {
   animation: none;
-  opacity: 0.5;
+  opacity: var(--solaris-opacity-50);
 }
 
 @keyframes solaris-icon-button-spin {
@@ -208,7 +208,7 @@
 }
 
 [solaris-icon-button][data-color='primary'][data-appearance='outline'] {
-  --solaris-icon-button-color: var(--solaris-primary-text);
+  --solaris-icon-button-color: var(--solaris-primary-base);
   --solaris-icon-button-border-color: var(--solaris-primary-border);
   --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
   --solaris-icon-button-hover-background: var(--solaris-primary-surface);
@@ -216,7 +216,7 @@
 }
 
 [solaris-icon-button][data-color='primary'][data-appearance='ghost'] {
-  --solaris-icon-button-color: var(--solaris-primary-text);
+  --solaris-icon-button-color: var(--solaris-primary-base);
   --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
   --solaris-icon-button-hover-background: var(--solaris-primary-surface);
   --solaris-icon-button-active-background: var(--solaris-primary-surface);
@@ -241,8 +241,8 @@
 }
 
 [solaris-icon-button][data-color='success'][data-appearance='solid'] {
-  --solaris-icon-button-background: var(--solaris-success-base);
   --solaris-icon-button-color: var(--solaris-success-on-solid);
+  --solaris-icon-button-background: var(--solaris-success-base);
   --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
   --solaris-icon-button-hover-background: var(--solaris-success-hover);
   --solaris-icon-button-active-background: var(--solaris-success-active);
@@ -282,11 +282,11 @@
 }
 
 [solaris-icon-button][data-color='warning'][data-appearance='solid'] {
-  --solaris-icon-button-background: var(--solaris-warning-base);
   --solaris-icon-button-color: var(--solaris-warning-on-solid);
+  --solaris-icon-button-background: var(--solaris-warning-base);
+  --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
   --solaris-icon-button-hover-background: var(--solaris-warning-hover);
   --solaris-icon-button-active-background: var(--solaris-warning-active);
-  --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
 }
 
 [solaris-icon-button][data-color='warning'][data-appearance='outline'] {
@@ -323,8 +323,8 @@
 }
 
 [solaris-icon-button][data-color='danger'][data-appearance='solid'] {
-  --solaris-icon-button-background: var(--solaris-danger-base);
   --solaris-icon-button-color: var(--solaris-danger-on-solid);
+  --solaris-icon-button-background: var(--solaris-danger-base);
   --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
   --solaris-icon-button-hover-background: var(--solaris-danger-hover);
   --solaris-icon-button-active-background: var(--solaris-danger-active);
@@ -436,18 +436,21 @@
 }
 
 [solaris-icon-button][data-size='sm'] {
-  font-size: var(--solaris-font-size-sm);
   --solaris-icon-button-size: var(--solaris-spacing-8);
+
+  font-size: var(--solaris-font-size-sm);
 }
 
 [solaris-icon-button][data-size='md'] {
-  font-size: var(--solaris-font-size-md);
   --solaris-icon-button-size: var(--solaris-spacing-10);
+
+  font-size: var(--solaris-font-size-md);
 }
 
 [solaris-icon-button][data-size='lg'] {
-  font-size: var(--solaris-font-size-lg);
   --solaris-icon-button-size: var(--solaris-spacing-12);
+
+  font-size: var(--solaris-font-size-lg);
 }
 
 [solaris-icon-button][data-radius='none'] {
@@ -471,11 +474,13 @@
 }
 
 [solaris-icon-button][data-density='compact'] {
-  font-size: var(--solaris-font-size-sm);
   --solaris-icon-button-size: var(--solaris-density-min-height);
+
+  font-size: var(--solaris-font-size-sm);
 }
 
 [solaris-icon-button][data-density='comfortable'] {
-  font-size: var(--solaris-font-size-md);
   --solaris-icon-button-size: var(--solaris-density-min-height);
+
+  font-size: var(--solaris-font-size-md);
 }

package/styles/_index.scss

@@ -1,12 +1,13 @@
 /// Solaris UI — Design System Styles
 ///
 /// Public entry point for the Solaris design system SCSS API.
+/// All tokens use browser default font-size (1rem = 16px).
 ///
 /// Usage:
 ///   @use '@solaris-ui/angular/styles' as solaris;
 ///
-///   // Apply core foundation (root font-size, resets)
-///   @include solaris.core((root-font-size: rem-10));
+///   // Apply core foundation
+///   @include solaris.core();
 ///
 ///   // Apply theme tokens
 ///   @include solaris.theme((

package/styles/_input.scss

@@ -1,47 +1,49 @@
 input[solaris-input] {
-  --solaris-input-background: initial;
-  --solaris-input-color: initial;
-  --solaris-input-border-color: initial;
-  --solaris-input-border-width: initial;
-  --solaris-input-radius: initial;
-  --solaris-input-height: initial;
-  --solaris-input-padding-x: initial;
-  --solaris-input-padding-y: initial;
-  --solaris-input-font-size: initial;
-  --solaris-input-line-height: initial;
-  --solaris-input-placeholder-color: initial;
-  --solaris-input-focus-ring-color: initial;
-  --solaris-input-invalid-border-color: initial;
-  --solaris-input-disabled-opacity: initial;
-  --solaris-input-readonly-background: initial;
+  --solaris-input-radius: var(--solaris-radius-sm);
+  --solaris-input-height: var(--solaris-spacing-10);
+  --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-padding-x: var(--solaris-spacing-3);
+  --solaris-input-padding-y: var(--solaris-spacing-2);
+  --solaris-input-font-size: var(--solaris-font-size-md);
+  --solaris-input-background: var(--solaris-surface-base);
+  --solaris-input-line-height: var(--solaris-line-height-md);
+  --solaris-input-border-color: var(--solaris-border-default);
+  --solaris-input-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-input-border-width: var(--solaris-border-width-sm);
+  --solaris-input-placeholder-color: var(--solaris-text-muted);
+  --solaris-input-focus-ring-color: var(--solaris-primary-base);
+  --solaris-input-invalid-border-color: var(--solaris-danger-base);
+  --solaris-input-readonly-background: var(--solaris-surface-muted);
 
-  font-family: var(--solaris-font-family-sans), system-ui;
-  box-sizing: border-box;
   margin: 0;
   width: 100%;
+  outline: none;
+  box-sizing: border-box;
   color: var(--solaris-input-color);
-  background: var(--solaris-input-background);
-  border: var(--solaris-input-border-width) solid
-    var(--solaris-input-border-color);
-  border-radius: var(--solaris-input-radius);
   height: var(--solaris-input-height);
-  padding: var(--solaris-input-padding-y) var(--solaris-input-padding-x);
   font-size: var(--solaris-input-font-size);
+  border-radius: var(--solaris-input-radius);
+  background: var(--solaris-input-background);
   line-height: var(--solaris-input-line-height);
-  outline: none;
+  font-family: var(--solaris-font-family-sans), system-ui;
+  padding: var(--solaris-input-padding-y) var(--solaris-input-padding-x);
+  border: var(--solaris-input-border-width) solid
+    var(--solaris-input-border-color);
   transition:
-    border-color var(--solaris-motion-duration-fast, 150ms) ease,
-    box-shadow var(--solaris-motion-duration-fast, 150ms) ease;
+    border-color var(--solaris-motion-duration-fast)
+      var(--solaris-motion-easing-standard),
+    box-shadow var(--solaris-motion-duration-fast)
+      var(--solaris-motion-easing-standard);
 }
 
 input[solaris-input]::placeholder {
-  color: var(--solaris-input-placeholder-color);
   opacity: 1;
+  color: var(--solaris-input-placeholder-color);
 }
 
 input[solaris-input]:focus-visible {
-  border-color: var(--solaris-input-focus-ring-color);
   // SOLARIS_TOKEN_EXCEPTION: Focus ring box-shadow uses CSS var with tokenized color. Hardcoded spread is required by design.
+  border-color: var(--solaris-input-focus-ring-color);
   box-shadow: 0 0 0 2px var(--solaris-input-focus-ring-color);
 }
 
@@ -50,8 +52,8 @@ input[solaris-input][data-invalid] {
 }
 
 input[solaris-input][data-invalid]:focus-visible {
-  border-color: var(--solaris-input-invalid-border-color);
   // SOLARIS_TOKEN_EXCEPTION: Invalid state focus ring box-shadow uses CSS var. Hardcoded spread required by design.
+  border-color: var(--solaris-input-invalid-border-color);
   box-shadow: 0 0 0 2px var(--solaris-input-invalid-border-color);
 }
 
@@ -61,8 +63,8 @@ input[solaris-input]:disabled {
 }
 
 input[solaris-input][readonly] {
-  background: var(--solaris-input-readonly-background);
   cursor: default;
+  background: var(--solaris-input-readonly-background);
 }
 
 input[solaris-input]::-webkit-search-decoration,
@@ -79,46 +81,46 @@ input[solaris-input]::-webkit-outer-spin-button {
 
 input[solaris-input]:autofill,
 input[solaris-input]:-webkit-autofill {
-  -webkit-text-fill-color: var(--solaris-input-color);
   // SOLARIS_TOKEN_EXCEPTION: WebKit autofill requires hardcoded box-shadow inset to override browser default yellow background.
+  transition: background-color 5000s var(--solaris-motion-easing-standard) 0s;
+  -webkit-text-fill-color: var(--solaris-input-color);
   -webkit-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
-  transition: background-color 5000s ease-in-out 0s;
 }
 
 input[solaris-input][data-appearance='outline'] {
-  --solaris-input-background: var(--solaris-surface-base);
   --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-background: var(--solaris-surface-base);
   --solaris-input-border-color: var(--solaris-border-default);
+  --solaris-input-disabled-opacity: var(--solaris-opacity-50);
   --solaris-input-border-width: var(--solaris-border-width-sm);
   --solaris-input-placeholder-color: var(--solaris-text-muted);
   --solaris-input-focus-ring-color: var(--solaris-primary-base);
   --solaris-input-invalid-border-color: var(--solaris-danger-base);
-  --solaris-input-disabled-opacity: 0.5;
   --solaris-input-readonly-background: var(--solaris-surface-muted);
 }
 
 input[solaris-input][data-appearance='surface'] {
-  --solaris-input-background: var(--solaris-surface-muted);
   --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-background: var(--solaris-surface-muted);
   --solaris-input-border-color: var(--solaris-border-subtle);
+  --solaris-input-disabled-opacity: var(--solaris-opacity-50);
   --solaris-input-border-width: var(--solaris-border-width-sm);
   --solaris-input-placeholder-color: var(--solaris-text-muted);
   --solaris-input-focus-ring-color: var(--solaris-primary-base);
   --solaris-input-invalid-border-color: var(--solaris-danger-base);
-  --solaris-input-disabled-opacity: 0.5;
   --solaris-input-readonly-background: var(--solaris-surface-base);
 }
 
 input[solaris-input][data-appearance='filled'] {
-  --solaris-input-background: var(--solaris-surface-muted);
-  --solaris-input-color: var(--solaris-text-default);
   --solaris-input-border-color: transparent;
-  --solaris-input-border-width: 0 0 var(--solaris-border-width-sm) 0;
+  --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-background: var(--solaris-surface-muted);
+  --solaris-input-disabled-opacity: var(--solaris-opacity-50);
   --solaris-input-placeholder-color: var(--solaris-text-muted);
   --solaris-input-focus-ring-color: var(--solaris-primary-base);
   --solaris-input-invalid-border-color: var(--solaris-danger-base);
-  --solaris-input-disabled-opacity: 0.5;
   --solaris-input-readonly-background: var(--solaris-surface-base);
+  --solaris-input-border-width: 0 0 var(--solaris-border-width-sm) 0;
 }
 
 input[solaris-input][data-size='sm'] {
@@ -147,13 +149,13 @@ input[solaris-input][data-size='lg'] {
 
 input[solaris-input][data-density='compact'] {
   --solaris-input-height: var(--solaris-density-min-height);
-  --solaris-input-padding-y: var(--solaris-density-padding-xs);
   --solaris-input-line-height: var(--solaris-line-height-sm);
+  --solaris-input-padding-y: var(--solaris-density-padding-xs);
 }
 
 input[solaris-input][data-density='comfortable'] {
-  --solaris-input-padding-y: var(--solaris-density-padding-sm);
   --solaris-input-line-height: var(--solaris-line-height-md);
+  --solaris-input-padding-y: var(--solaris-density-padding-sm);
 }
 
 input[solaris-input][data-radius='none'] {
@@ -189,27 +191,27 @@ input[solaris-input][data-full-width] {
 @media (prefers-color-scheme: dark) {
   input[solaris-input]:autofill,
   input[solaris-input]:-webkit-autofill {
-    -webkit-text-fill-color: var(--solaris-input-color);
     // SOLARIS_TOKEN_EXCEPTION: WebKit autofill dark mode requires hardcoded box-shadow inset override.
+    -webkit-text-fill-color: var(--solaris-input-color);
     -webkit-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
   }
 }
 
 solaris-form-field input[solaris-input] {
-  background: transparent;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   border: none;
-  border-radius: 0;
   height: auto;
   padding-left: 0;
+  border-radius: 0;
   padding-right: 0;
-  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   box-shadow: none;
+  background: transparent;
 }
 
 solaris-form-field input[solaris-input]:focus-visible {
-  border-color: transparent;
   // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   box-shadow: none;
+  border-color: transparent;
 }
 
 solaris-form-field input[solaris-input][data-invalid] {
@@ -217,9 +219,9 @@ solaris-form-field input[solaris-input][data-invalid] {
 }
 
 solaris-form-field input[solaris-input][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;
+  border-color: transparent;
 }
 
 solaris-form-field input[solaris-input][disabled] {
@@ -249,7 +251,7 @@ solaris-form-field input[solaris-input]::-webkit-search-results-decoration {
 
 solaris-form-field input[solaris-input]:autofill,
 solaris-form-field input[solaris-input]:-webkit-autofill {
-  -webkit-text-fill-color: var(--solaris-input-color);
   // SOLARIS_TOKEN_EXCEPTION: WebKit autofill inside form-field requires hardcoded transparent box-shadow inset.
   -webkit-box-shadow: 0 0 0 30px transparent inset;
+  -webkit-text-fill-color: var(--solaris-input-color);
 }

package/styles/_textarea.scss

@@ -1,47 +1,51 @@
 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;
+  --solaris-textarea-radius: var(--solaris-radius-sm);
+  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-padding-x: var(--solaris-spacing-3);
+  --solaris-textarea-padding-y: var(--solaris-spacing-2);
+  --solaris-textarea-font-size: var(--solaris-font-size-md);
+  --solaris-textarea-background: var(--solaris-surface-base);
+  --solaris-textarea-line-height: var(--solaris-line-height-md);
+  --solaris-textarea-border-color: var(--solaris-border-default);
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
+  --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-readonly-background: var(--solaris-surface-muted);
+  --solaris-textarea-min-height: calc(
+    var(--solaris-spacing-8) + var(--solaris-spacing-1)
+  );
 
-  font-family: var(--solaris-font-family-sans), system-ui;
-  box-sizing: border-box;
   margin: 0;
   width: 100%;
+  outline: none;
+  box-sizing: border-box;
   color: var(--solaris-textarea-color);
-  background: var(--solaris-textarea-background);
-  border: var(--solaris-textarea-border-width) solid
-    var(--solaris-textarea-border-color);
+  font-size: var(--solaris-textarea-font-size);
   border-radius: var(--solaris-textarea-radius);
+  background: var(--solaris-textarea-background);
   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;
+  font-family: var(--solaris-font-family-sans), system-ui;
+  padding: var(--solaris-textarea-padding-y) var(--solaris-textarea-padding-x);
+  border: var(--solaris-textarea-border-width) solid
+    var(--solaris-textarea-border-color);
   transition:
-    border-color var(--solaris-motion-duration-fast, 150ms) ease,
-    box-shadow var(--solaris-motion-duration-fast, 150ms) ease;
+    border-color var(--solaris-motion-duration-fast)
+      var(--solaris-motion-easing-standard),
+    box-shadow var(--solaris-motion-duration-fast)
+      var(--solaris-motion-easing-standard);
 }
 
 textarea[solaris-textarea]::placeholder {
-  color: var(--solaris-textarea-placeholder-color);
   opacity: 1;
+  color: var(--solaris-textarea-placeholder-color);
 }
 
 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.
+  border-color: var(--solaris-textarea-focus-ring-color);
   box-shadow: 0 0 0 2px var(--solaris-textarea-focus-ring-color);
 }
 
@@ -50,8 +54,8 @@ textarea[solaris-textarea][data-invalid] {
 }
 
 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.
+  border-color: var(--solaris-textarea-invalid-border-color);
   box-shadow: 0 0 0 2px var(--solaris-textarea-invalid-border-color);
 }
 
@@ -61,82 +65,84 @@ textarea[solaris-textarea]:disabled {
 }
 
 textarea[solaris-textarea][readonly] {
-  background: var(--solaris-textarea-readonly-background);
   cursor: default;
+  background: var(--solaris-textarea-readonly-background);
 }
 
 textarea[solaris-textarea][data-appearance='outline'] {
-  --solaris-textarea-background: var(--solaris-surface-base);
   --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-background: var(--solaris-surface-base);
   --solaris-textarea-border-color: var(--solaris-border-default);
-  --solaris-textarea-border-width: 1px;
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
   --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-background: var(--solaris-surface-muted);
   --solaris-textarea-border-color: var(--solaris-border-subtle);
-  --solaris-textarea-border-width: 1px;
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
   --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-color: var(--solaris-text-default);
+  --solaris-textarea-background: var(--solaris-surface-muted);
+  --solaris-textarea-disabled-opacity: var(--solaris-opacity-50);
   --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);
+  --solaris-textarea-border-width: 0 0 var(--solaris-border-width-sm) 0;
 }
 
 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-min-height: var(--solaris-spacing-8);
+  --solaris-textarea-padding-y: var(--solaris-spacing-half);
   --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-padding-y: var(--solaris-spacing-1);
   --solaris-textarea-font-size: var(--solaris-font-size-md);
   --solaris-textarea-line-height: var(--solaris-line-height-md);
+  --solaris-textarea-min-height: calc(
+    var(--solaris-spacing-8) + var(--solaris-spacing-1)
+  );
 }
 
 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-padding-y: var(--solaris-spacing-1);
+  --solaris-textarea-min-height: var(--solaris-spacing-10);
   --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);
+  --solaris-textarea-padding-y: var(--solaris-spacing-half);
 }
 
 textarea[solaris-textarea][data-density='comfortable'] {
-  --solaris-textarea-padding-y: 0.5rem;
+  --solaris-textarea-padding-y: var(--solaris-spacing-1);
   --solaris-textarea-line-height: var(--solaris-line-height-md);
 }
 
 textarea[solaris-textarea][data-radius='none'] {
-  --solaris-textarea-radius: 0;
+  --solaris-textarea-radius: var(--solaris-radius-none);
 }
 
 textarea[solaris-textarea][data-radius='sm'] {
@@ -184,26 +190,26 @@ textarea[solaris-textarea][data-full-width] {
 @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-text-fill-color: var(--solaris-textarea-color);
     -webkit-box-shadow: 0 0 0 30px var(--solaris-textarea-background) inset;
   }
 }
 
 solaris-form-field textarea[solaris-textarea] {
-  background: transparent;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   border: none;
-  border-radius: 0;
   padding-left: 0;
+  border-radius: 0;
   padding-right: 0;
-  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   box-shadow: none;
+  background: transparent;
 }
 
 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;
+  border-color: transparent;
 }
 
 solaris-form-field textarea[solaris-textarea][data-invalid] {
@@ -211,9 +217,9 @@ solaris-form-field textarea[solaris-textarea][data-invalid] {
 }
 
 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;
+  border-color: transparent;
 }
 
 solaris-form-field textarea[solaris-textarea][disabled] {
@@ -225,18 +231,18 @@ solaris-form-field textarea[solaris-textarea][readonly] {
 }
 
 solaris-form-field textarea[solaris-textarea][data-density='compact'] {
-  padding-top: 0.1875rem;
-  padding-bottom: 0.1875rem;
+  padding-top: var(--solaris-spacing-half);
+  padding-bottom: var(--solaris-spacing-half);
 }
 
 solaris-form-field textarea[solaris-textarea][data-density='comfortable'] {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: var(--solaris-spacing-1);
+  padding-bottom: var(--solaris-spacing-1);
 }
 
 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;
+  -webkit-text-fill-color: var(--solaris-textarea-color);
 }