@educarehq/solaris-ui 0.3.3 → 0.5.0

package/styles/_theme.scss

@@ -1,46 +1,80 @@
-/// 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 design tokens and default configuration to the document root.
+///
+/// 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';
+@use 'token/focus';
+@use 'token/glass';
+
+$-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);
+  $density: map.get($merged, density);
+  $radius: map.get($merged, radius);
+  $motion: map.get($merged, motion);
+
+  :root {
+    @if $color-scheme == light {
+      color-scheme: light;
+    } @else if $color-scheme == dark {
+      color-scheme: dark;
+    } @else {
+      color-scheme: light dark;
+    }
+
+    @if $density == compact {
+      --solaris-density-default: compact;
+    } @else {
+      --solaris-density-default: comfortable;
+    }
+
+    @if $radius ==
+      none or
+      $radius ==
+      sm or
+      $radius ==
+      lg or
+      $radius ==
+      xl or
+      $radius ==
+      full
+    {
+      --solaris-radius-default: var(--solaris-radius-#{$radius});
+    } @else {
+      --solaris-radius-default: var(--solaris-radius-md);
+    }
+
+    @if $motion == reduce {
+      --solaris-motion-duration-fast: 0ms;
+      --solaris-motion-duration-normal: 0ms;
+      --solaris-motion-duration-slow: 0ms;
+      --solaris-motion-duration-slower: 0ms;
+    }
+  }
+}

package/styles/_toast.scss

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

package/styles/_tooltip.scss

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

package/styles/token/border/_border.scss

@@ -1,5 +1,6 @@
-:root {
-  --solaris-border-width-sm: 0.1rem;
-  --solaris-border-width-md: 0.2rem;
-  --solaris-border-width-lg: 0.3rem;
-}
+:root {
+  --solaris-border-width-sm: 1px;
+  --solaris-border-width-md: 2px;
+  --solaris-border-width-lg: 3px;
+  --solaris-border-style-default: solid;
+}

package/styles/token/border/_index.scss

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

package/styles/token/color/_dark.scss

@@ -1,78 +1,81 @@
-@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-surface-reverse: #f2f5fb;
+  --solaris-surface-reverse-subtle: #e1e1e1;
+  --solaris-surface-reverse-muted: #d8d8d8;
+  --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: #0e1711;
+
+  --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: #2e2a21;
+
+  --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;
+  }
+}

package/styles/token/color/_high-contrast.scss

@@ -1,27 +1,143 @@
-[data-theme='high-contrast'],
-[data-high-contrast='true'] {
-  --solaris-bg-page: #ffffff;
-  --solaris-surface-base: #ffffff;
-  --solaris-surface-subtle: #f0f0f0;
-  --solaris-surface-muted: #e0e0e0;
-  --solaris-surface-raised: #ffffff;
-  --solaris-backdrop: #000000e2;
-
-  --solaris-text-strong: #000000;
-  --solaris-text-default: #000000;
-  --solaris-text-muted: #222222;
-  --solaris-text-subtle: #444444;
-  --solaris-text-inverse: #ffffff;
-
-  --solaris-border-subtle: #666666;
-  --solaris-border-default: #888888;
-  --solaris-border-strong: #aaaaaa;
-
-  --solaris-primary-base: #0000cc;
-  --solaris-primary-hover: #000099;
-  --solaris-primary-active: #000066;
-  --solaris-primary-surface: #e6e6ff;
-  --solaris-primary-border: #9999ff;
-  --solaris-primary-text: #0000aa;
-  --solaris-primary-on-solid: #ffffff;
-}
+[data-theme='high-contrast'],
+[data-high-contrast='true'] {
+  --solaris-bg-page: #ffffff;
+  --solaris-surface-base: #ffffff;
+  --solaris-surface-subtle: #f0f0f0;
+  --solaris-surface-muted: #e0e0e0;
+  --solaris-surface-raised: #ffffff;
+  --solaris-surface-reverse: #000000;
+  --solaris-surface-reverse-subtle: #1a1a1a;
+  --solaris-surface-reverse-muted: #333333;
+  --solaris-backdrop: #000000e2;
+
+  --solaris-text-strong: #000000;
+  --solaris-text-default: #000000;
+  --solaris-text-muted: #222222;
+  --solaris-text-subtle: #444444;
+  --solaris-text-inverse: #ffffff;
+  --solaris-text-glass: #ffffff;
+
+  --solaris-border-subtle: #666666;
+  --solaris-border-default: #888888;
+  --solaris-border-strong: #aaaaaa;
+  --solaris-border-soft: #cccccc;
+
+  --solaris-primary-base: #0000cc;
+  --solaris-primary-hover: #000099;
+  --solaris-primary-active: #000066;
+  --solaris-primary-surface: #e6e6ff;
+  --solaris-primary-border: #9999ff;
+  --solaris-primary-text: #0000aa;
+  --solaris-primary-on-solid: #ffffff;
+
+  --solaris-success-base: #006600;
+  --solaris-success-hover: #004d00;
+  --solaris-success-active: #003300;
+  --solaris-success-surface: #e6f2e6;
+  --solaris-success-border: #99cc99;
+  --solaris-success-text: #004d00;
+  --solaris-success-on-solid: #ffffff;
+
+  --solaris-warning-base: #996600;
+  --solaris-warning-hover: #7a5200;
+  --solaris-warning-active: #5c3d00;
+  --solaris-warning-surface: #fff2cc;
+  --solaris-warning-border: #ffd633;
+  --solaris-warning-text: #664400;
+  --solaris-warning-on-solid: #ffffff;
+
+  --solaris-danger-base: #cc0000;
+  --solaris-danger-hover: #990000;
+  --solaris-danger-active: #660000;
+  --solaris-danger-surface: #ffe6e6;
+  --solaris-danger-border: #ff9999;
+  --solaris-danger-text: #990000;
+  --solaris-danger-on-solid: #ffffff;
+
+  --solaris-info-base: #0044cc;
+  --solaris-info-hover: #003399;
+  --solaris-info-active: #002266;
+  --solaris-info-surface: #e6eeff;
+  --solaris-info-border: #99bbff;
+  --solaris-info-text: #003399;
+  --solaris-info-on-solid: #ffffff;
+
+  --solaris-orange-base: #cc6600;
+  --solaris-orange-hover: #995200;
+  --solaris-orange-active: #663d00;
+  --solaris-orange-surface: #fff0e6;
+  --solaris-orange-border: #ffcca8;
+  --solaris-orange-text: #994d00;
+  --solaris-orange-on-solid: #ffffff;
+}
+
+@media (prefers-contrast: high) {
+  :root:not([data-theme]) {
+    --solaris-bg-page: #ffffff;
+    --solaris-surface-base: #ffffff;
+    --solaris-surface-subtle: #f0f0f0;
+    --solaris-surface-muted: #e0e0e0;
+    --solaris-surface-raised: #ffffff;
+    --solaris-backdrop: #000000e2;
+
+    --solaris-text-strong: #000000;
+    --solaris-text-default: #000000;
+    --solaris-text-muted: #222222;
+    --solaris-text-subtle: #444444;
+    --solaris-text-inverse: #ffffff;
+    --solaris-text-glass: #ffffff;
+
+    --solaris-border-subtle: #666666;
+    --solaris-border-default: #888888;
+    --solaris-border-strong: #aaaaaa;
+    --solaris-border-soft: #cccccc;
+
+    --solaris-primary-base: #0000cc;
+    --solaris-primary-hover: #000099;
+    --solaris-primary-active: #000066;
+    --solaris-primary-surface: #e6e6ff;
+    --solaris-primary-border: #9999ff;
+    --solaris-primary-text: #0000aa;
+    --solaris-primary-on-solid: #ffffff;
+
+    --solaris-success-base: #006600;
+    --solaris-success-hover: #004d00;
+    --solaris-success-active: #003300;
+    --solaris-success-surface: #e6f2e6;
+    --solaris-success-border: #99cc99;
+    --solaris-success-text: #004d00;
+    --solaris-success-on-solid: #ffffff;
+
+    --solaris-warning-base: #996600;
+    --solaris-warning-hover: #7a5200;
+    --solaris-warning-active: #5c3d00;
+    --solaris-warning-surface: #fff2cc;
+    --solaris-warning-border: #ffd633;
+    --solaris-warning-text: #664400;
+    --solaris-warning-on-solid: #ffffff;
+
+    --solaris-danger-base: #cc0000;
+    --solaris-danger-hover: #990000;
+    --solaris-danger-active: #660000;
+    --solaris-danger-surface: #ffe6e6;
+    --solaris-danger-border: #ff9999;
+    --solaris-danger-text: #990000;
+    --solaris-danger-on-solid: #ffffff;
+
+    --solaris-info-base: #0044cc;
+    --solaris-info-hover: #003399;
+    --solaris-info-active: #002266;
+    --solaris-info-surface: #e6eeff;
+    --solaris-info-border: #99bbff;
+    --solaris-info-text: #003399;
+    --solaris-info-on-solid: #ffffff;
+
+    --solaris-orange-base: #cc6600;
+    --solaris-orange-hover: #995200;
+    --solaris-orange-active: #663d00;
+    --solaris-orange-surface: #fff0e6;
+    --solaris-orange-border: #ffcca8;
+    --solaris-orange-text: #994d00;
+    --solaris-orange-on-solid: #ffffff;
+  }
+}

package/styles/token/color/_index.scss

@@ -1,3 +1,3 @@
-@forward 'light';
-@forward 'dark';
-@forward 'high-contrast';
+@forward 'light';
+@forward 'dark';
+@forward 'high-contrast';

package/styles/token/color/_light.scss

@@ -1,69 +1,72 @@
-:root,
-[data-theme='light'] {
-  --solaris-bg-page: #ffffff;
-  --solaris-surface-base: #ffffff;
-  --solaris-surface-subtle: #f7f8fb;
-  --solaris-surface-muted: #eeeeee;
-  --solaris-surface-raised: #ffffff;
-  --solaris-backdrop: #000000bf;
-
-  --solaris-text-strong: #16191e;
-  --solaris-text-default: #24262d;
-  --solaris-text-muted: #5d5f61;
-  --solaris-text-subtle: #7a7d84;
-  --solaris-text-inverse: #ffffff;
-  --solaris-text-glass: #ffffff;
-
-  --solaris-border-subtle: #e4e6ee;
-  --solaris-border-default: #d7d9e3;
-  --solaris-border-strong: #b9bdca;
-  --solaris-border-soft: #474747;
-
-  --solaris-primary-base: #4282fb;
-  --solaris-primary-hover: #3947bd;
-  --solaris-primary-active: #303c99;
-  --solaris-primary-surface: #f0f3ff;
-  --solaris-primary-border: #c9d2ff;
-  --solaris-primary-text: #ffffff;
-  --solaris-primary-on-solid: #ffffff;
-
-  --solaris-success-base: #33a44b;
-  --solaris-success-hover: #2b8c3f;
-  --solaris-success-active: #237334;
-  --solaris-success-surface: #eaf8ed;
-  --solaris-success-border: #b3e0bd;
-  --solaris-success-text: #1e6b2e;
-  --solaris-success-on-solid: #ffffff;
-
-  --solaris-warning-base: #f1d008;
-  --solaris-warning-hover: #b89e0d;
-  --solaris-warning-active: #9a830b;
-  --solaris-warning-surface: #fef9df;
-  --solaris-warning-border: #f0e6a0;
-  --solaris-warning-text: #7a6808;
-  --solaris-warning-on-solid: #17191e;
-
-  --solaris-danger-base: #dc252d;
-  --solaris-danger-hover: #bb1f26;
-  --solaris-danger-active: #9b1920;
-  --solaris-danger-surface: #fde8e9;
-  --solaris-danger-border: #f4b3b6;
-  --solaris-danger-text: #8a161b;
-  --solaris-danger-on-solid: #ffffff;
-
-  --solaris-info-base: #5f9be4;
-  --solaris-info-hover: #4f85c7;
-  --solaris-info-active: #3f6faa;
-  --solaris-info-surface: #edf4fc;
-  --solaris-info-border: #bfd9f3;
-  --solaris-info-text: #181919;
-  --solaris-info-on-solid: #ffffff;
-
-  --solaris-orange-base: #e98d16;
-  --solaris-orange-hover: #c97812;
-  --solaris-orange-active: #a9630f;
-  --solaris-orange-surface: #fef2e0;
-  --solaris-orange-border: #f5d6a8;
-  --solaris-orange-text: #8a4f0b;
-  --solaris-orange-on-solid: #ffffff;
-}
+:root,
+[data-theme='light'] {
+  --solaris-bg-page: #ffffff;
+  --solaris-surface-base: #ffffff;
+  --solaris-surface-subtle: #f7f8fb;
+  --solaris-surface-muted: #eeeeee;
+  --solaris-surface-raised: #ffffff;
+  --solaris-surface-reverse: #16191e;
+  --solaris-surface-reverse-subtle: #222324;
+  --solaris-surface-reverse-muted: #333435;
+  --solaris-backdrop: #000000bf;
+
+  --solaris-text-strong: #16191e;
+  --solaris-text-default: #24262d;
+  --solaris-text-muted: #5d5f61;
+  --solaris-text-subtle: #7a7d84;
+  --solaris-text-inverse: #ffffff;
+  --solaris-text-glass: #ffffff;
+
+  --solaris-border-subtle: #e4e6ee;
+  --solaris-border-default: #d7d9e3;
+  --solaris-border-strong: #b9bdca;
+  --solaris-border-soft: #474747;
+
+  --solaris-primary-base: #4282fb;
+  --solaris-primary-hover: #3947bd;
+  --solaris-primary-active: #303c99;
+  --solaris-primary-surface: #f0f3ff;
+  --solaris-primary-border: #c9d2ff;
+  --solaris-primary-text: #ffffff;
+  --solaris-primary-on-solid: #ffffff;
+
+  --solaris-success-base: #33a44b;
+  --solaris-success-hover: #2b8c3f;
+  --solaris-success-active: #237334;
+  --solaris-success-surface: #eaf8ed;
+  --solaris-success-border: #b3e0bd;
+  --solaris-success-text: #1e6b2e;
+  --solaris-success-on-solid: #ffffff;
+
+  --solaris-warning-base: #f1d008;
+  --solaris-warning-hover: #b89e0d;
+  --solaris-warning-active: #9a830b;
+  --solaris-warning-surface: #fef9df;
+  --solaris-warning-border: #f0e6a0;
+  --solaris-warning-text: #7a6808;
+  --solaris-warning-on-solid: #17191e;
+
+  --solaris-danger-base: #dc252d;
+  --solaris-danger-hover: #bb1f26;
+  --solaris-danger-active: #9b1920;
+  --solaris-danger-surface: #fde8e9;
+  --solaris-danger-border: #f4b3b6;
+  --solaris-danger-text: #8a161b;
+  --solaris-danger-on-solid: #ffffff;
+
+  --solaris-info-base: #5f9be4;
+  --solaris-info-hover: #4f85c7;
+  --solaris-info-active: #3f6faa;
+  --solaris-info-surface: #edf4fc;
+  --solaris-info-border: #bfd9f3;
+  --solaris-info-text: #181919;
+  --solaris-info-on-solid: #ffffff;
+
+  --solaris-orange-base: #e98d16;
+  --solaris-orange-hover: #c97812;
+  --solaris-orange-active: #a9630f;
+  --solaris-orange-surface: #fef2e0;
+  --solaris-orange-border: #f5d6a8;
+  --solaris-orange-text: #8a4f0b;
+  --solaris-orange-on-solid: #ffffff;
+}