@educarehq/solaris-ui 0.27.3 → 2.0.0

package/styles/_index.scss

@@ -19,11 +19,14 @@
 
 @forward './core';
 @forward './theme';
+@forward './motion';
 @forward './button';
 @forward './icon-button';
 @forward './input';
 @forward './textarea';
+@forward './form-field';
 @forward './popover';
 @forward './tooltip';
 @forward './toast';
+@forward './loading-zone';
 @forward './dropdown-menu';

package/styles/_input.scss

@@ -1,19 +1,24 @@
 input[solaris-input] {
   --solaris-input-radius: var(--solaris-radius-sm);
   --solaris-input-height: var(--solaris-spacing-10);
-  --solaris-input-color: var(--solaris-text-default);
+  --solaris-input-color: var(--solaris-neutral-text-body);
   --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-background: var(--solaris-neutral-default);
   --solaris-input-line-height: var(--solaris-line-height-md);
-  --solaris-input-border-color: var(--solaris-border-default);
+  --solaris-input-border-color: var(--solaris-neutral-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);
+  --solaris-input-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-input-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-input-focus-ring-width: var(--solaris-focus-ring-width);
+  --solaris-input-focus-ring-shadow: 0 0 0 var(--solaris-input-focus-ring-width)
+    var(--solaris-input-focus-ring-color);
+  --solaris-input-error-ring-shadow: 0 0 0 var(--solaris-input-focus-ring-width)
+    var(--solaris-input-invalid-border-color);
+  --solaris-input-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-input-readonly-background: var(--solaris-neutral-sunken);
 
   margin: 0;
   width: 100%;
@@ -30,21 +35,24 @@ input[solaris-input] {
   border: var(--solaris-input-border-width) solid
     var(--solaris-input-border-color);
   transition:
-    border-color var(--solaris-motion-duration-fast)
+    border-color var(--solaris-motion-duration-normal)
       var(--solaris-motion-easing-standard),
-    box-shadow var(--solaris-motion-duration-fast)
+    box-shadow var(--solaris-motion-duration-normal)
       var(--solaris-motion-easing-standard);
 }
 
 input[solaris-input]::placeholder {
-  opacity: 1;
+  opacity: var(--solaris-opacity-70);
   color: var(--solaris-input-placeholder-color);
 }
 
 input[solaris-input]:focus-visible {
-  // 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);
+  box-shadow: var(--solaris-input-focus-ring-shadow);
+}
+
+input[solaris-input]:hover:not(:disabled, [readonly]) {
+  border-color: var(--solaris-neutral-border-strong);
 }
 
 input[solaris-input][data-invalid] {
@@ -52,9 +60,8 @@ input[solaris-input][data-invalid] {
 }
 
 input[solaris-input][data-invalid]:focus-visible {
-  // 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);
+  box-shadow: var(--solaris-input-error-ring-shadow);
 }
 
 input[solaris-input]:disabled {
@@ -74,9 +81,15 @@ input[solaris-input]::-webkit-search-results-decoration {
   -webkit-appearance: none;
 }
 
-input[solaris-input]::-webkit-inner-spin-button,
-input[solaris-input]::-webkit-outer-spin-button {
-  opacity: 1;
+input[solaris-input][type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+input[solaris-input][type='number']::-webkit-inner-spin-button,
+input[solaris-input][type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
 }
 
 input[solaris-input]:autofill,
@@ -88,86 +101,116 @@ input[solaris-input]:-webkit-autofill {
 }
 
 input[solaris-input][data-appearance='outline'] {
-  --solaris-input-color: var(--solaris-text-default);
-  --solaris-input-background: var(--solaris-surface-base);
-  --solaris-input-border-color: var(--solaris-border-default);
+  --solaris-input-color: var(--solaris-neutral-text-body);
+  --solaris-input-background: var(--solaris-neutral-default);
+  --solaris-input-border-color: var(--solaris-neutral-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-readonly-background: var(--solaris-surface-muted);
+  --solaris-input-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-input-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-input-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-input-readonly-background: var(--solaris-neutral-sunken);
 }
 
 input[solaris-input][data-appearance='surface'] {
-  --solaris-input-color: var(--solaris-text-default);
-  --solaris-input-background: var(--solaris-surface-muted);
-  --solaris-input-border-color: var(--solaris-border-subtle);
+  --solaris-input-color: var(--solaris-neutral-text-body);
+  --solaris-input-background: var(--solaris-neutral-subtle);
+  --solaris-input-border-color: var(--solaris-neutral-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-readonly-background: var(--solaris-surface-base);
+  --solaris-input-border-width: 0;
+  --solaris-input-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-input-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-input-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-input-readonly-background: var(--solaris-neutral-default);
 }
 
 input[solaris-input][data-appearance='filled'] {
-  --solaris-input-border-color: transparent;
-  --solaris-input-color: var(--solaris-text-default);
-  --solaris-input-background: var(--solaris-surface-muted);
+  --solaris-input-border-color: var(--solaris-neutral-border-subtle);
+  --solaris-input-color: var(--solaris-neutral-text-body);
+  --solaris-input-background: var(--solaris-neutral-subtle);
   --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-readonly-background: var(--solaris-surface-base);
-  --solaris-input-border-width: 0 0 var(--solaris-border-width-sm) 0;
+  --solaris-input-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-input-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-input-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-input-readonly-background: var(--solaris-neutral-sunken);
+  --solaris-input-border-width: var(--solaris-border-width-sm);
 }
 
 input[solaris-input][data-size='sm'] {
-  --solaris-input-height: var(--solaris-spacing-8);
   --solaris-input-padding-x: var(--solaris-spacing-2);
   --solaris-input-padding-y: var(--solaris-spacing-1);
-  --solaris-input-font-size: var(--solaris-font-size-sm);
+  --solaris-input-font-size: var(--solaris-font-size-xs);
   --solaris-input-line-height: var(--solaris-line-height-sm);
 }
 
 input[solaris-input][data-size='md'] {
-  --solaris-input-height: var(--solaris-spacing-10);
   --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-font-size: var(--solaris-font-size-sm);
   --solaris-input-line-height: var(--solaris-line-height-md);
 }
 
 input[solaris-input][data-size='lg'] {
-  --solaris-input-height: var(--solaris-spacing-12);
   --solaris-input-padding-x: var(--solaris-spacing-4);
   --solaris-input-padding-y: var(--solaris-spacing-2);
-  --solaris-input-font-size: var(--solaris-font-size-lg);
+  --solaris-input-font-size: var(--solaris-font-size-md);
   --solaris-input-line-height: var(--solaris-line-height-lg);
 }
 
 input[solaris-input][data-density='compact'] {
-  --solaris-input-height: var(--solaris-density-min-height);
   --solaris-input-line-height: var(--solaris-line-height-sm);
-  --solaris-input-font-size: var(--solaris-density-font-size);
+  --solaris-input-font-size: var(--solaris-font-size-xs);
   --solaris-input-padding-y: var(--solaris-density-padding-xs);
 }
 
 input[solaris-input][data-density='normal'] {
-  --solaris-input-height: var(--solaris-density-min-height);
   --solaris-input-line-height: var(--solaris-line-height-sm);
-  --solaris-input-font-size: var(--solaris-density-font-size);
+  --solaris-input-font-size: var(--solaris-font-size-sm);
   --solaris-input-padding-y: var(--solaris-density-padding-xs);
 }
 
 input[solaris-input][data-density='comfortable'] {
-  --solaris-input-height: var(--solaris-density-min-height);
   --solaris-input-line-height: var(--solaris-line-height-md);
-  --solaris-input-font-size: var(--solaris-density-font-size);
+  --solaris-input-font-size: var(--solaris-font-size-md);
   --solaris-input-padding-y: var(--solaris-density-padding-sm);
 }
 
+input[solaris-input][data-size='sm'][data-density='compact'] {
+  --solaris-input-height: var(--solaris-control-height-compact-sm);
+}
+
+input[solaris-input][data-size='md'][data-density='compact'] {
+  --solaris-input-height: var(--solaris-control-height-compact-md);
+}
+
+input[solaris-input][data-size='lg'][data-density='compact'] {
+  --solaris-input-height: var(--solaris-control-height-compact-lg);
+}
+
+input[solaris-input][data-size='sm'][data-density='normal'] {
+  --solaris-input-height: var(--solaris-control-height-normal-sm);
+}
+
+input[solaris-input][data-size='md'][data-density='normal'] {
+  --solaris-input-height: var(--solaris-control-height-normal-md);
+}
+
+input[solaris-input][data-size='lg'][data-density='normal'] {
+  --solaris-input-height: var(--solaris-control-height-normal-lg);
+}
+
+input[solaris-input][data-size='sm'][data-density='comfortable'] {
+  --solaris-input-height: var(--solaris-control-height-comfortable-sm);
+}
+
+input[solaris-input][data-size='md'][data-density='comfortable'] {
+  --solaris-input-height: var(--solaris-control-height-comfortable-md);
+}
+
+input[solaris-input][data-size='lg'][data-density='comfortable'] {
+  --solaris-input-height: var(--solaris-control-height-comfortable-lg);
+}
+
 input[solaris-input][data-radius='none'] {
   --solaris-input-radius: var(--solaris-radius-none);
 }
@@ -184,6 +227,10 @@ input[solaris-input][data-radius='lg'] {
   --solaris-input-radius: var(--solaris-radius-lg);
 }
 
+input[solaris-input][data-radius='xl'] {
+  --solaris-input-radius: var(--solaris-radius-full);
+}
+
 input[solaris-input][data-full-width] {
   width: 100%;
 }
@@ -211,9 +258,8 @@ solaris-form-field input[solaris-input] {
   // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   border: none;
   height: auto;
-  padding-left: 0;
+  padding: 0;
   border-radius: 0;
-  padding-right: 0;
   box-shadow: none;
   background: transparent;
 }
@@ -242,19 +288,23 @@ solaris-form-field input[solaris-input][readonly] {
   background: transparent;
 }
 
-solaris-form-field input[solaris-input][data-density='compact'] {
-  padding-top: var(--solaris-density-padding-xs);
-  padding-bottom: var(--solaris-density-padding-xs);
+solaris-form-field[data-loading] input[solaris-input] {
+  padding-inline-end: calc(
+    var(--solaris-form-field-affix-size) + var(--solaris-form-field-control-gap)
+  );
 }
 
-solaris-form-field input[solaris-input][data-density='normal'] {
-  padding-top: var(--solaris-density-padding-xs);
-  padding-bottom: var(--solaris-density-padding-xs);
+solaris-form-field input[solaris-input][type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
 }
 
-solaris-form-field input[solaris-input][data-density='comfortable'] {
-  padding-top: var(--solaris-density-padding-sm);
-  padding-bottom: var(--solaris-density-padding-sm);
+solaris-form-field
+  input[solaris-input][type='number']::-webkit-inner-spin-button,
+solaris-form-field
+  input[solaris-input][type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
 }
 
 solaris-form-field input[solaris-input]::-webkit-search-decoration,

package/styles/_loading-zone.scss

@@ -0,0 +1,7 @@
+.solaris-loading-zone {
+  position: relative;
+}
+
+.solaris-loading-zone[data-loading] {
+  cursor: progress;
+}

package/styles/_motion.scss

@@ -0,0 +1,14 @@
+/// Solaris UI — Motion API (consumers).
+///
+/// Re-exports the shared motion mixins. Keyframes themselves are emitted
+/// globally by `core()`, so consumers only need this module when authoring
+/// custom CSS that should follow the Solaris motion language.
+///
+/// Usage:
+///   @use '@solaris-ui/angular/styles/motion' as motion;
+///
+///   .my-panel {
+///     @include motion.solaris-motion-overlay-enter;
+///   }
+
+@forward 'token/motion/motion-mixins';

package/styles/_popover.scss

@@ -10,8 +10,8 @@
   --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);
+  --solaris-popover-color: var(--solaris-neutral-text-body);
+  --solaris-popover-background: var(--solaris-neutral-overlay);
 
   outline: none;
   display: block;
@@ -32,8 +32,9 @@
 }
 
 .solaris-popover-panel__container[data-appearance='outline'] {
-  background: var(--solaris-surface-base);
-  border: var(--solaris-border-width-sm) solid var(--solaris-border-subtle);
+  background: var(--solaris-neutral-overlay);
+  border: var(--solaris-border-width-sm) solid
+    var(--solaris-neutral-border-subtle);
 }
 
 .solaris-popover-panel__container[data-padding='none'] {

package/styles/_textarea.scss

@@ -1,18 +1,25 @@
 textarea[solaris-textarea] {
   --solaris-textarea-radius: var(--solaris-radius-sm);
-  --solaris-textarea-color: var(--solaris-text-default);
+  --solaris-textarea-color: var(--solaris-neutral-text-body);
   --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-background: var(--solaris-neutral-default);
   --solaris-textarea-line-height: var(--solaris-line-height-md);
-  --solaris-textarea-border-color: var(--solaris-border-default);
+  --solaris-textarea-border-color: var(--solaris-neutral-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-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-textarea-focus-ring-width: var(--solaris-focus-ring-width);
+  --solaris-textarea-focus-ring-shadow: 0 0 0
+    var(--solaris-textarea-focus-ring-width)
+    var(--solaris-textarea-focus-ring-color);
+  --solaris-textarea-error-ring-shadow: 0 0 0
+    var(--solaris-textarea-focus-ring-width)
+    var(--solaris-textarea-invalid-border-color);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-textarea-readonly-background: var(--solaris-neutral-sunken);
   --solaris-textarea-min-height: calc(
     var(--solaris-spacing-8) + var(--solaris-spacing-1)
   );
@@ -32,21 +39,24 @@ textarea[solaris-textarea] {
   border: var(--solaris-textarea-border-width) solid
     var(--solaris-textarea-border-color);
   transition:
-    border-color var(--solaris-motion-duration-fast)
+    border-color var(--solaris-motion-duration-normal)
       var(--solaris-motion-easing-standard),
-    box-shadow var(--solaris-motion-duration-fast)
+    box-shadow var(--solaris-motion-duration-normal)
       var(--solaris-motion-easing-standard);
 }
 
 textarea[solaris-textarea]::placeholder {
-  opacity: 1;
+  opacity: var(--solaris-opacity-70);
   color: var(--solaris-textarea-placeholder-color);
 }
 
 textarea[solaris-textarea]:focus-visible {
-  // 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);
+  box-shadow: var(--solaris-textarea-focus-ring-shadow);
+}
+
+textarea[solaris-textarea]:hover:not(:disabled, [readonly]) {
+  border-color: var(--solaris-neutral-border-strong);
 }
 
 textarea[solaris-textarea][data-invalid] {
@@ -54,9 +64,8 @@ textarea[solaris-textarea][data-invalid] {
 }
 
 textarea[solaris-textarea][data-invalid]:focus-visible {
-  // 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);
+  box-shadow: var(--solaris-textarea-error-ring-shadow);
 }
 
 textarea[solaris-textarea]:disabled {
@@ -70,53 +79,53 @@ textarea[solaris-textarea][readonly] {
 }
 
 textarea[solaris-textarea][data-appearance='outline'] {
-  --solaris-textarea-color: var(--solaris-text-default);
-  --solaris-textarea-background: var(--solaris-surface-base);
-  --solaris-textarea-border-color: var(--solaris-border-default);
+  --solaris-textarea-color: var(--solaris-neutral-text-body);
+  --solaris-textarea-background: var(--solaris-neutral-default);
+  --solaris-textarea-border-color: var(--solaris-neutral-border-subtle);
   --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-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-textarea-readonly-background: var(--solaris-neutral-sunken);
 }
 
 textarea[solaris-textarea][data-appearance='surface'] {
-  --solaris-textarea-color: var(--solaris-text-default);
-  --solaris-textarea-background: var(--solaris-surface-muted);
-  --solaris-textarea-border-color: var(--solaris-border-subtle);
+  --solaris-textarea-color: var(--solaris-neutral-text-body);
+  --solaris-textarea-background: var(--solaris-neutral-subtle);
+  --solaris-textarea-border-color: var(--solaris-neutral-border-subtle);
   --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-base);
+  --solaris-textarea-border-width: 0;
+  --solaris-textarea-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-textarea-readonly-background: var(--solaris-neutral-default);
 }
 
 textarea[solaris-textarea][data-appearance='filled'] {
-  --solaris-textarea-border-color: transparent;
-  --solaris-textarea-color: var(--solaris-text-default);
-  --solaris-textarea-background: var(--solaris-surface-muted);
+  --solaris-textarea-border-color: var(--solaris-neutral-border-subtle);
+  --solaris-textarea-color: var(--solaris-neutral-text-body);
+  --solaris-textarea-background: var(--solaris-neutral-subtle);
   --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-readonly-background: var(--solaris-surface-base);
-  --solaris-textarea-border-width: 0 0 var(--solaris-border-width-sm) 0;
+  --solaris-textarea-placeholder-color: var(--solaris-neutral-text-secondary);
+  --solaris-textarea-focus-ring-color: var(--solaris-primary-solid);
+  --solaris-textarea-invalid-border-color: var(--solaris-danger-solid);
+  --solaris-textarea-readonly-background: var(--solaris-neutral-sunken);
+  --solaris-textarea-border-width: var(--solaris-border-width-sm);
 }
 
 textarea[solaris-textarea][data-size='sm'] {
   --solaris-textarea-padding-x: var(--solaris-spacing-2);
   --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-padding-y: var(--solaris-spacing-2);
+  --solaris-textarea-font-size: var(--solaris-font-size-xs);
   --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: var(--solaris-spacing-1);
-  --solaris-textarea-font-size: var(--solaris-font-size-md);
+  --solaris-textarea-font-size: var(--solaris-font-size-sm);
   --solaris-textarea-line-height: var(--solaris-line-height-md);
   --solaris-textarea-min-height: calc(
     var(--solaris-spacing-8) + var(--solaris-spacing-1)
@@ -127,28 +136,64 @@ textarea[solaris-textarea][data-size='lg'] {
   --solaris-textarea-padding-x: var(--solaris-spacing-4);
   --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-font-size: var(--solaris-font-size-md);
   --solaris-textarea-line-height: var(--solaris-line-height-lg);
 }
 
 textarea[solaris-textarea][data-density='compact'] {
-  --solaris-textarea-font-size: var(--solaris-density-font-size);
+  --solaris-textarea-font-size: var(--solaris-font-size-xs);
   --solaris-textarea-line-height: var(--solaris-line-height-sm);
-  --solaris-textarea-padding-y: var(--solaris-spacing-half);
+  --solaris-textarea-padding-y: var(--solaris-spacing-2);
 }
 
 textarea[solaris-textarea][data-density='normal'] {
-  --solaris-textarea-font-size: var(--solaris-density-font-size);
+  --solaris-textarea-font-size: var(--solaris-font-size-sm);
   --solaris-textarea-line-height: var(--solaris-line-height-sm);
   --solaris-textarea-padding-y: var(--solaris-spacing-1);
 }
 
 textarea[solaris-textarea][data-density='comfortable'] {
-  --solaris-textarea-font-size: var(--solaris-density-font-size);
+  --solaris-textarea-font-size: var(--solaris-font-size-md);
   --solaris-textarea-padding-y: var(--solaris-spacing-1);
   --solaris-textarea-line-height: var(--solaris-line-height-md);
 }
 
+textarea[solaris-textarea][data-size='sm'][data-density='compact'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-compact-sm);
+}
+
+textarea[solaris-textarea][data-size='md'][data-density='compact'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-compact-md);
+}
+
+textarea[solaris-textarea][data-size='lg'][data-density='compact'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-compact-lg);
+}
+
+textarea[solaris-textarea][data-size='sm'][data-density='normal'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-normal-sm);
+}
+
+textarea[solaris-textarea][data-size='md'][data-density='normal'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-normal-md);
+}
+
+textarea[solaris-textarea][data-size='lg'][data-density='normal'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-normal-lg);
+}
+
+textarea[solaris-textarea][data-size='sm'][data-density='comfortable'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-comfortable-sm);
+}
+
+textarea[solaris-textarea][data-size='md'][data-density='comfortable'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-comfortable-md);
+}
+
+textarea[solaris-textarea][data-size='lg'][data-density='comfortable'] {
+  --solaris-textarea-min-height: var(--solaris-control-height-comfortable-lg);
+}
+
 textarea[solaris-textarea][data-radius='none'] {
   --solaris-textarea-radius: var(--solaris-radius-none);
 }
@@ -165,6 +210,10 @@ textarea[solaris-textarea][data-radius='lg'] {
   --solaris-textarea-radius: var(--solaris-radius-lg);
 }
 
+textarea[solaris-textarea][data-radius='xl'] {
+  --solaris-textarea-radius: var(--solaris-radius-full);
+}
+
 textarea[solaris-textarea][data-resize='none'] {
   resize: none;
 }
@@ -207,9 +256,10 @@ textarea[solaris-textarea][data-full-width] {
 solaris-form-field textarea[solaris-textarea] {
   // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
   border: none;
-  padding-left: 0;
+  height: auto;
+  min-height: 0;
+  padding-inline: 0;
   border-radius: 0;
-  padding-right: 0;
   box-shadow: none;
   background: transparent;
 }

package/styles/_theme.scss

@@ -14,6 +14,7 @@
 @use 'token/color';
 @use 'token/density';
 @use 'token/radius';
+@use 'token/sizing';
 @use 'token/spacing';
 @use 'token/typography';
 @use 'token/shadow';
@@ -49,6 +50,16 @@ $-default-config: (
       color-scheme: dark;
       @include color.solaris-dark-tokens;
     }
+  } @else if $color-scheme == high-contrast {
+    :root:not([data-theme]) {
+      color-scheme: light;
+      @include color.solaris-high-contrast-tokens;
+    }
+  } @else if $color-scheme == high-contrast-dark {
+    :root:not([data-theme]) {
+      color-scheme: dark;
+      @include color.solaris-high-contrast-dark-tokens;
+    }
   } @else {
     :root {
       color-scheme: light dark;
@@ -85,6 +96,7 @@ $-default-config: (
       --solaris-motion-duration-normal: 0ms;
       --solaris-motion-duration-slow: 0ms;
       --solaris-motion-duration-slower: 0ms;
+      --solaris-motion-duration-slowest: 0ms;
     }
   }
 }