@educarehq/solaris-ui 0.3.0 → 0.3.1

package/styles/_theme.scss

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

package/styles/_toast.scss

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

package/styles/_tooltip.scss

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

package/styles/token/border/_border.scss

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

package/styles/token/border/_index.scss

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

package/styles/token/color/_dark.scss

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

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

@@ -0,0 +1,27 @@
+[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;
+}

package/styles/token/color/_index.scss

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

package/styles/token/color/_light.scss

@@ -0,0 +1,69 @@
+: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;
+}

package/styles/token/density/_comfortable.scss

@@ -0,0 +1,15 @@
+[data-density='comfortable'] {
+  --solaris-density-scale: 1;
+  --solaris-density-padding-xs: 0.5rem;
+  --solaris-density-padding-sm: 0.75rem;
+  --solaris-density-padding-md: 1rem;
+  --solaris-density-padding-lg: 1.5rem;
+  --solaris-density-padding-xl: 2rem;
+  --solaris-density-gap-xs: 0.25rem;
+  --solaris-density-gap-sm: 0.5rem;
+  --solaris-density-gap-md: 0.75rem;
+  --solaris-density-gap-lg: 1rem;
+  --solaris-density-gap-xl: 1.5rem;
+  --solaris-density-min-height: 5rem;
+  --solaris-density-min-width: 5rem;
+}

package/styles/token/density/_compact.scss

@@ -0,0 +1,15 @@
+[data-density='compact'] {
+  --solaris-density-scale: 0.75;
+  --solaris-density-padding-xs: 0.125rem;
+  --solaris-density-padding-sm: 0.375rem;
+  --solaris-density-padding-md: 0.5rem;
+  --solaris-density-padding-lg: 1rem;
+  --solaris-density-padding-xl: 1.25rem;
+  --solaris-density-gap-xs: 0.5rem;
+  --solaris-density-gap-sm: 0.75rem;
+  --solaris-density-gap-md: 1rem;
+  --solaris-density-gap-lg: 1.25rem;
+  --solaris-density-gap-xl: 1.5rem;
+  --solaris-density-min-height: 3.5rem;
+  --solaris-density-min-width: 3.5rem;
+}

package/styles/token/density/_index.scss

@@ -0,0 +1,2 @@
+@forward 'compact';
+@forward 'comfortable';

package/styles/token/motion/_index.scss

@@ -0,0 +1,2 @@
+@forward 'motion';
+@forward 'reduced-motion';

package/styles/token/motion/_motion.scss

@@ -0,0 +1,15 @@
+:root {
+  --solaris-motion-duration-instant: 0ms;
+  --solaris-motion-duration-fast: 150ms;
+  --solaris-motion-duration-normal: 300ms;
+  --solaris-motion-duration-slow: 600ms;
+  --solaris-motion-duration-slower: 1200ms;
+
+  --solaris-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --solaris-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --solaris-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --solaris-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  --solaris-motion-scale-active: 0.97;
+  --solaris-motion-scale-enter: 0.95;
+}

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

@@ -0,0 +1,15 @@
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --solaris-motion-duration-fast: 0ms;
+    --solaris-motion-duration-normal: 0ms;
+    --solaris-motion-duration-slow: 0ms;
+    --solaris-motion-duration-slower: 0ms;
+  }
+}
+
+[data-reduced-motion='true'] {
+  --solaris-motion-duration-fast: 0ms;
+  --solaris-motion-duration-normal: 0ms;
+  --solaris-motion-duration-slow: 0ms;
+  --solaris-motion-duration-slower: 0ms;
+}

package/styles/token/opacity/_index.scss

@@ -0,0 +1 @@
+@forward 'opacity';

package/styles/token/opacity/_opacity.scss

@@ -0,0 +1,4 @@
+:root {
+  --solaris-opacity-50: 0.5;
+  --solaris-opacity-100: 1;
+}

package/styles/token/radius/_index.scss

@@ -0,0 +1 @@
+@forward 'radius';

package/styles/token/radius/_radius.scss

@@ -0,0 +1,8 @@
+:root {
+  --solaris-radius-none: 0;
+  --solaris-radius-sm: 0.2rem;
+  --solaris-radius-md: 0.4rem;
+  --solaris-radius-lg: 0.8rem;
+  --solaris-radius-xl: 1.2rem;
+  --solaris-radius-full: 9999rem;
+}

package/styles/token/shadow/_index.scss

@@ -0,0 +1 @@
+@forward 'shadow';

package/styles/token/shadow/_shadow.scss

@@ -0,0 +1,26 @@
+:root {
+  --solaris-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --solaris-shadow-sm:
+    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --solaris-shadow-md:
+    0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --solaris-shadow-lg:
+    0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
+  --solaris-shadow-xl:
+    0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
+  --solaris-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme='dark'],
+[data-theme='high-contrast'] {
+  --solaris-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --solaris-shadow-sm:
+    0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
+  --solaris-shadow-md:
+    0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
+  --solaris-shadow-lg:
+    0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
+  --solaris-shadow-xl:
+    0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.25);
+  --solaris-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.5);
+}

package/styles/token/spacing/_index.scss

@@ -0,0 +1 @@
+@forward 'spacing';

package/styles/token/spacing/_spacing.scss

@@ -0,0 +1,15 @@
+:root {
+  --solaris-spacing-0: 0;
+  --solaris-spacing-1: 0.4rem;
+  --solaris-spacing-2: 0.8rem;
+  --solaris-spacing-3: 1.2rem;
+  --solaris-spacing-4: 1.6rem;
+  --solaris-spacing-5: 2rem;
+  --solaris-spacing-6: 2.4rem;
+  --solaris-spacing-8: 3.2rem;
+  --solaris-spacing-10: 4rem;
+  --solaris-spacing-12: 4.8rem;
+  --solaris-spacing-16: 6.4rem;
+  --solaris-spacing-20: 8rem;
+  --solaris-spacing-24: 9.6rem;
+}

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

@@ -0,0 +1,13 @@
+:root {
+  --solaris-font-family-sans:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', sans-serif;
+  --solaris-font-family-mono:
+    'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
+    monospace;
+  --solaris-font-family-display:
+    'Space Grotesk', Inter, ui-sans-serif, system-ui, sans-serif;
+  --solaris-font-family-serif:
+    'IBM Plex Serif', ui-serif, Georgia, Cambria, 'Times New Roman', Times,
+    serif;
+}

package/styles/token/typography/_index.scss

@@ -0,0 +1,2 @@
+@forward 'font-family';
+@forward 'typography';

package/styles/token/typography/_typography.scss

@@ -0,0 +1,25 @@
+:root {
+  --solaris-font-size-2xs: 0.8rem;
+  --solaris-font-size-xs: 1.2rem;
+  --solaris-font-size-sm: 1.4rem;
+  --solaris-font-size-md: 1.6rem;
+  --solaris-font-size-lg: 1.8rem;
+  --solaris-font-size-xl: 2rem;
+  --solaris-font-size-2xl: 2.4rem;
+  --solaris-font-size-3xl: 3rem;
+  --solaris-font-size-4xl: 3.6rem;
+
+  --solaris-font-weight-regular: 400;
+  --solaris-font-weight-medium: 500;
+  --solaris-font-weight-semibold: 600;
+  --solaris-font-weight-bold: 700;
+
+  --solaris-line-height-xs: 1.15;
+  --solaris-line-height-sm: 1.25;
+  --solaris-line-height-md: 1.4;
+  --solaris-line-height-lg: 1.6;
+
+  --solaris-letter-spacing-tight: -0.01em;
+  --solaris-letter-spacing-normal: 0;
+  --solaris-letter-spacing-wide: 0.02em;
+}

package/styles/token/z-index/_index.scss

@@ -0,0 +1 @@
+@forward 'z-index';

package/styles/token/z-index/_z-index.scss

@@ -0,0 +1,10 @@
+:root {
+  --solaris-z-index-base: 0;
+  --solaris-z-index-dropdown: 100;
+  --solaris-z-index-sticky: 200;
+  --solaris-z-index-overlay: 300;
+  --solaris-z-index-modal: 400;
+  --solaris-z-index-toast: 500;
+  --solaris-z-index-tooltip: 600;
+  --solaris-z-index-popover: 1000;
+}