@educarehq/solaris-ui 0.27.3 → 2.0.0

package/styles/token/focus/_focus.scss

@@ -1,12 +1,14 @@
 :root {
   --solaris-focus-ring-width: 2px;
   --solaris-focus-ring-offset: 2px;
-  --solaris-focus-ring-color: var(--solaris-primary-base);
+  --solaris-focus-ring-color: var(--solaris-primary-solid);
   --solaris-focus-ring-style: solid;
+  --solaris-focus-ring-shadow: 0 0 0 var(--solaris-focus-ring-width)
+    var(--solaris-focus-ring-color);
 }
 
 [data-theme='dark'] {
-  --solaris-focus-ring-color: var(--solaris-primary-hover);
+  --solaris-focus-ring-color: var(--solaris-primary-solid-hover);
 }
 
 [data-theme='high-contrast'] {

package/styles/token/motion/_index.scss

@@ -1,2 +1,4 @@
 @forward 'motion';
+@forward 'motion-keyframes';
+@forward 'motion-mixins';
 @forward 'reduced-motion';

package/styles/token/motion/_motion-keyframes.scss

@@ -0,0 +1,188 @@
+/// Solaris UI — Shared motion keyframes.
+///
+/// Emitted once globally via `core()`. Components reference these keyframes by
+/// name together with the `--solaris-motion-duration-*` / `--solaris-motion-easing-*`
+/// tokens. Never hardcode durations or easings here.
+///
+/// Convention: `-enter` runs with `decelerate`, `-exit` runs with `accelerate`.
+/// Slide distance follows `--solaris-motion-translate-sm` (4px, subtle by design).
+
+@mixin solaris-motion-keyframes {
+  @keyframes solaris-motion-overlay-enter {
+    from {
+      opacity: 0;
+      transform: translateY(var(--solaris-motion-translate-sm)) scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes solaris-motion-overlay-exit {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(var(--solaris-motion-translate-sm)) scale(0.98);
+    }
+  }
+
+  @keyframes solaris-motion-overlay-enter-top {
+    from {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--solaris-motion-translate-sm)))
+        scale(0.98);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes solaris-motion-overlay-exit-top {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(calc(-1 * var(--solaris-motion-translate-sm)))
+        scale(0.98);
+    }
+  }
+
+  @keyframes solaris-motion-dialog-enter {
+    from {
+      opacity: 0;
+      transform: scale(var(--solaris-motion-scale-enter));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes solaris-motion-dialog-exit {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(var(--solaris-motion-scale-enter));
+    }
+  }
+
+  @keyframes solaris-motion-backdrop-enter {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes solaris-motion-backdrop-exit {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes solaris-motion-tooltip-enter {
+    from {
+      opacity: 0;
+      transform: scale(var(--solaris-motion-scale-enter));
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes solaris-motion-tooltip-exit {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(var(--solaris-motion-scale-enter));
+    }
+  }
+
+  @keyframes solaris-motion-drawer-enter-left {
+    from {
+      opacity: 0;
+      transform: translateX(calc(-2 * var(--solaris-motion-translate-sm)));
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes solaris-motion-drawer-exit-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(calc(-2 * var(--solaris-motion-translate-sm)));
+    }
+  }
+
+  @keyframes solaris-motion-drawer-enter-right {
+    from {
+      opacity: 0;
+      transform: translateX(calc(2 * var(--solaris-motion-translate-sm)));
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes solaris-motion-drawer-exit-right {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(calc(2 * var(--solaris-motion-translate-sm)));
+    }
+  }
+
+  @keyframes solaris-motion-pop-in {
+    from {
+      opacity: 0;
+      transform: scale(0.6);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

package/styles/token/motion/_motion-mixins.scss

@@ -0,0 +1,213 @@
+/// Solaris UI — Shared motion mixins.
+///
+/// Opt-in helpers for enter/exit animations. Default consumption remains plain
+/// CSS custom properties; use these mixins when a component needs the standard
+/// overlay/dialog/backdrop/tooltip motion without copy-pasting declarations.
+///
+/// Every animation mixin only sets `animation`. Pair it with the reduced-motion
+/// guard (`solaris-motion-reduced-off`) following the collapsible pattern:
+/// `@media (prefers-reduced-motion: reduce)` + `:host-context([data-reduced-motion='true'])`.
+
+/// Standard overlay (popover, dropdown, select panels, mega-menu) enter.
+@mixin solaris-motion-overlay-enter(
+  $duration: var(--solaris-motion-duration-normal),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-overlay-enter $duration $easing both;
+}
+
+/// Standard overlay exit. Runs on `[data-closing]` (see motion refactor docs).
+@mixin solaris-motion-overlay-exit(
+  $duration: var(
+      --solaris-motion-duration-exit,
+      var(--solaris-motion-duration-fast)
+    ),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-overlay-exit $duration $easing both;
+}
+
+/// Overlay enter for panels attached above the trigger (`data-connected-side="top"`).
+@mixin solaris-motion-overlay-enter-top(
+  $duration: var(--solaris-motion-duration-normal),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-overlay-enter-top $duration $easing both;
+}
+
+/// Overlay exit for panels attached above the trigger.
+@mixin solaris-motion-overlay-exit-top(
+  $duration: var(
+      --solaris-motion-duration-exit,
+      var(--solaris-motion-duration-fast)
+    ),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-overlay-exit-top $duration $easing both;
+}
+
+/// Dialog panel enter (scale + fade, no slide — the panel is large).
+@mixin solaris-motion-dialog-enter(
+  $duration: var(--solaris-motion-duration-normal),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-dialog-enter $duration $easing both;
+}
+
+/// Dialog panel exit.
+@mixin solaris-motion-dialog-exit(
+  $duration: var(
+      --solaris-motion-duration-exit,
+      var(--solaris-motion-duration-fast)
+    ),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-dialog-exit $duration $easing both;
+}
+
+/// Backdrop fade enter.
+@mixin solaris-motion-backdrop-enter(
+  $duration: var(--solaris-motion-duration-normal),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-backdrop-enter $duration $easing both;
+}
+
+/// Backdrop fade exit.
+@mixin solaris-motion-backdrop-exit(
+  $duration: var(
+      --solaris-motion-duration-exit,
+      var(--solaris-motion-duration-fast)
+    ),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-backdrop-exit $duration $easing both;
+}
+
+/// Tooltip enter (fast by design — tooltips are ephemeral).
+@mixin solaris-motion-tooltip-enter(
+  $duration: var(--solaris-motion-duration-fast),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-tooltip-enter $duration $easing both;
+}
+
+/// Tooltip exit.
+@mixin solaris-motion-tooltip-exit(
+  $duration: var(--solaris-motion-duration-fast),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-tooltip-exit $duration $easing both;
+}
+
+/// Side drawer enter (dialog placements left/right). Slides 8px from the edge.
+@mixin solaris-motion-drawer-enter-left(
+  $duration: var(--solaris-motion-duration-normal),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-drawer-enter-left $duration $easing both;
+}
+
+/// Side drawer exit (left edge).
+@mixin solaris-motion-drawer-exit-left(
+  $duration: var(
+      --solaris-motion-duration-exit,
+      var(--solaris-motion-duration-fast)
+    ),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-drawer-exit-left $duration $easing both;
+}
+
+/// Side drawer enter (right edge).
+@mixin solaris-motion-drawer-enter-right(
+  $duration: var(--solaris-motion-duration-normal),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-drawer-enter-right $duration $easing both;
+}
+
+/// Side drawer exit (right edge).
+@mixin solaris-motion-drawer-exit-right(
+  $duration: var(
+      --solaris-motion-duration-exit,
+      var(--solaris-motion-duration-fast)
+    ),
+  $easing: var(--solaris-motion-easing-accelerate)
+) {
+  animation: solaris-motion-drawer-exit-right $duration $easing both;
+}
+
+/// Press feedback (buttons, icon-buttons). Include on the host; pair with
+/// `solaris-motion-press-active` under `:active` / `[data-active]` / `[data-pressed]`.
+/// Components with existing color transitions keep their own `transition` list and
+/// only add the `transform` line plus the active-state mixin (see `_button.scss`).
+@mixin solaris-motion-press {
+  transition: transform var(--solaris-motion-duration-fast)
+    var(--solaris-motion-easing-decelerate);
+}
+
+/// Press feedback (active state, under `:active`).
+@mixin solaris-motion-press-active {
+  transform: scale(var(--solaris-motion-scale-active));
+}
+
+/// Pop-in for small selection indicators (checkbox icon, radio dot).
+/// The target node is inserted on check, so the enter replays per toggle with
+/// zero TS. Skipped under reduced motion via the standard doubled guard.
+@mixin solaris-motion-pop-in(
+  $duration: var(--solaris-motion-duration-fast),
+  $easing: var(--solaris-motion-easing-decelerate)
+) {
+  animation: solaris-motion-pop-in $duration $easing both;
+}
+
+/// Reduced-motion guard. Disables animation/transition on the including selector.
+/// Component must ALSO mirror it under `:host-context([data-reduced-motion='true'])`.
+@mixin solaris-motion-reduced-off {
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    transition: none;
+  }
+}
+
+/// Expand/collapse panel (closed state). Open state uses
+/// `solaris-motion-expand-panel-open` under `[data-open]`.
+/// Reference: `collapsible.component.scss` (grid 0fr→1fr + inner opacity).
+@mixin solaris-motion-expand-panel {
+  display: grid;
+  grid-template-rows: minmax(0, 0fr);
+  transition: grid-template-rows var(--solaris-motion-duration-normal)
+    var(--solaris-motion-easing-standard);
+}
+
+/// Expand/collapse panel (open state, under `[data-open]`).
+@mixin solaris-motion-expand-panel-open {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+/// Expand/collapse inner content (closed state). Keeps `overflow: hidden` +
+/// `opacity: 0`; components keep their own padding declarations/transitions.
+@mixin solaris-motion-expand-inner {
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--solaris-motion-duration-normal)
+    var(--solaris-motion-easing-standard);
+}
+
+/// Expand/collapse inner content (open state, under `[data-open]`).
+@mixin solaris-motion-expand-inner-open {
+  opacity: 1;
+}
+
+/// Expand/collapse chevron (closed state, on the icon).
+@mixin solaris-motion-chevron {
+  transition: transform var(--solaris-motion-duration-normal)
+    var(--solaris-motion-easing-standard);
+}
+
+/// Expand/collapse chevron (open state, under `[data-open]`).
+@mixin solaris-motion-chevron-open {
+  transform: rotate(180deg);
+}

package/styles/token/motion/_motion.scss

@@ -13,5 +13,8 @@
   --solaris-motion-easing-linear: linear;
 
   --solaris-motion-scale-active: 0.97;
-  --solaris-motion-scale-enter: 0.95;
+  --solaris-motion-scale-enter: 0.96;
+
+  --solaris-motion-duration-exit: var(--solaris-motion-duration-fast);
+  --solaris-motion-translate-sm: 4px;
 }

package/styles/token/motion/_reduced-motion.scss

@@ -4,6 +4,7 @@
     --solaris-motion-duration-normal: 0ms;
     --solaris-motion-duration-slow: 0ms;
     --solaris-motion-duration-slower: 0ms;
+    --solaris-motion-duration-slowest: 0ms;
   }
 }
 
@@ -12,4 +13,5 @@
   --solaris-motion-duration-normal: 0ms;
   --solaris-motion-duration-slow: 0ms;
   --solaris-motion-duration-slower: 0ms;
+  --solaris-motion-duration-slowest: 0ms;
 }

package/styles/token/radius/_radius.scss

@@ -4,5 +4,6 @@
   --solaris-radius-md: 4px;
   --solaris-radius-lg: 8px;
   --solaris-radius-xl: 12px;
+  --solaris-radius-xxl: 16px;
   --solaris-radius-full: 9999px;
 }

package/styles/token/sizing/_control-height.scss

@@ -0,0 +1,42 @@
+/// Solaris UI — Control height tokens.
+///
+/// Deterministic heights for every size x density combination, forming a
+/// chained ladder from 28px to 52px in 4px steps: the `sm` of a denser
+/// scale always equals the `lg` of the previous one
+/// (`compact-lg` = `normal-sm` = 36px, `normal-lg` = `comfortable-sm` = 44px).
+///
+/// The ladder measures the control's outer box (what devtools reports for
+/// the host element). It holds because segmented controls render their
+/// container padding at zero, so outer height always equals item height:
+/// keep `--solaris-segmented-control-container-padding: 0` on every
+/// size x density combination or the outer box drifts above the token.
+///
+/// `md` is the base of each density and always matches that density's
+/// `min-height`, so a default (`md`) control aligns with sibling controls
+/// that only consume `--solaris-density-min-height` (form fields, buttons,
+/// selection cards, OTP boxes). This is the contract every component must
+/// follow: the rendered outer height of any size x density combination
+/// must equal its token below, whether the component references the token
+/// directly or arrives at the same value through its own padding and
+/// content math.
+///
+/// Referencing rule: always use the token of your own combination, even
+/// when values coincide across densities (e.g. `normal-sm`, never
+/// `compact-lg`, for a `normal` + `sm` control). Value coincidences are
+/// alignment features, not aliases.
+///
+/// compact:     sm 28px | md 32px | lg 36px
+/// normal:      sm 36px | md 40px | lg 44px
+/// comfortable: sm 44px | md 48px | lg 52px
+
+:root {
+  --solaris-control-height-compact-sm: 28px;
+  --solaris-control-height-compact-md: 32px;
+  --solaris-control-height-compact-lg: 36px;
+  --solaris-control-height-normal-sm: 36px;
+  --solaris-control-height-normal-md: 40px;
+  --solaris-control-height-normal-lg: 44px;
+  --solaris-control-height-comfortable-sm: 44px;
+  --solaris-control-height-comfortable-md: 48px;
+  --solaris-control-height-comfortable-lg: 52px;
+}

package/styles/token/sizing/_control-matrix.scss

@@ -0,0 +1,37 @@
+@mixin solaris-control-matrix($property) {
+  &[data-size='sm'][data-density='compact'] {
+    #{$property}: var(--solaris-control-height-compact-sm);
+  }
+
+  &[data-size='md'][data-density='compact'] {
+    #{$property}: var(--solaris-control-height-compact-md);
+  }
+
+  &[data-size='lg'][data-density='compact'] {
+    #{$property}: var(--solaris-control-height-compact-lg);
+  }
+
+  &[data-size='sm'][data-density='normal'] {
+    #{$property}: var(--solaris-control-height-normal-sm);
+  }
+
+  &[data-size='md'][data-density='normal'] {
+    #{$property}: var(--solaris-control-height-normal-md);
+  }
+
+  &[data-size='lg'][data-density='normal'] {
+    #{$property}: var(--solaris-control-height-normal-lg);
+  }
+
+  &[data-size='sm'][data-density='comfortable'] {
+    #{$property}: var(--solaris-control-height-comfortable-sm);
+  }
+
+  &[data-size='md'][data-density='comfortable'] {
+    #{$property}: var(--solaris-control-height-comfortable-md);
+  }
+
+  &[data-size='lg'][data-density='comfortable'] {
+    #{$property}: var(--solaris-control-height-comfortable-lg);
+  }
+}

package/styles/token/sizing/_index.scss

@@ -0,0 +1,2 @@
+@forward 'control-height';
+@forward 'control-matrix';

package/styles/token/spacing/_spacing.scss

@@ -1,18 +1,21 @@
 :root {
-  --solaris-spacing-0: 0;
-  --solaris-spacing-quarter: 1px;
-  --solaris-spacing-half: 2px;
-  --solaris-spacing-1: 4px;
-  --solaris-spacing-2: 8px;
-  --solaris-spacing-3: 12px;
-  --solaris-spacing-4: 16px;
-  --solaris-spacing-5: 20px;
-  --solaris-spacing-6: 24px;
-  --solaris-spacing-8: 32px;
-  --solaris-spacing-9: 36px;
-  --solaris-spacing-10: 40px;
-  --solaris-spacing-12: 48px;
-  --solaris-spacing-16: 64px;
-  --solaris-spacing-20: 80px;
-  --solaris-spacing-24: 96px;
+  --solaris-spacing-0: 00px;
+  --solaris-spacing-1: 01px;
+  --solaris-spacing-2: 02px;
+  --solaris-spacing-3: 04px;
+  --solaris-spacing-4: 06px;
+  --solaris-spacing-5: 08px;
+  --solaris-spacing-6: 12px;
+  --solaris-spacing-7: 16px;
+  --solaris-spacing-8: 20px;
+  --solaris-spacing-9: 24px;
+  --solaris-spacing-10: 32px;
+  --solaris-spacing-11: 36px;
+  --solaris-spacing-12: 40px;
+  --solaris-spacing-13: 48px;
+  --solaris-spacing-14: 56px;
+  --solaris-spacing-15: 64px;
+  --solaris-spacing-16: 80px;
+  --solaris-spacing-17: 96px;
+  --solaris-spacing-18: 128px;
 }

package/styles/token/typography/_font-family.scss

@@ -1,7 +1,6 @@
 :root {
   --solaris-font-family-sans:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', sans-serif;
+    Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --solaris-font-family-mono:
     'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     monospace;

package/styles/token/typography/_typography.scss

@@ -1,23 +1,27 @@
 :root {
-  --solaris-font-size-2xs: 8px;
-  --solaris-font-size-xs: 12px;
-  --solaris-font-size-sm: 14px;
-  --solaris-font-size-md: 16px;
-  --solaris-font-size-lg: 18px;
-  --solaris-font-size-xl: 20px;
-  --solaris-font-size-2xl: 24px;
-  --solaris-font-size-3xl: 32px;
+  --solaris-font-size-3xs: 8px;
+  --solaris-font-size-2xs: 12px;
+  --solaris-font-size-xs: 14px;
+  --solaris-font-size-sm: 16px;
+  --solaris-font-size-md: 18px;
+  --solaris-font-size-lg: 20px;
+  --solaris-font-size-xl: 24px;
+  --solaris-font-size-2xl: 32px;
+  --solaris-font-size-3xl: 36px;
   --solaris-font-size-4xl: 48px;
 
+  --solaris-font-weight-thin: 300;
   --solaris-font-weight-regular: 400;
   --solaris-font-weight-medium: 500;
   --solaris-font-weight-semibold: 600;
   --solaris-font-weight-bold: 700;
+  --solaris-font-weight-bolder: 800;
 
   --solaris-line-height-none: 1;
-  --solaris-line-height-xs: 1.15;
-  --solaris-line-height-sm: 1.25;
-  --solaris-line-height-md: 1.4;
+  --solaris-line-height-2xs: 1.15;
+  --solaris-line-height-xs: 1.25;
+  --solaris-line-height-sm: 1.4;
+  --solaris-line-height-md: 1.5;
   --solaris-line-height-lg: 1.6;
 
   --solaris-letter-spacing-tight: -0.01em;