@educarehq/solaris-ui 0.1.0 → 0.2.0

package/styles/_input.scss

@@ -0,0 +1,255 @@
+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;
+
+  font-family: var(--solaris-font-family-sans), system-ui;
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  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);
+  line-height: var(--solaris-input-line-height);
+  outline: none;
+  transition:
+    border-color var(--solaris-motion-duration-fast, 150ms) ease,
+    box-shadow var(--solaris-motion-duration-fast, 150ms) ease;
+}
+
+input[solaris-input]::placeholder {
+  color: var(--solaris-input-placeholder-color);
+  opacity: 1;
+}
+
+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.
+  box-shadow: 0 0 0 2px var(--solaris-input-focus-ring-color);
+}
+
+input[solaris-input][data-invalid] {
+  border-color: var(--solaris-input-invalid-border-color);
+}
+
+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.
+  box-shadow: 0 0 0 2px var(--solaris-input-invalid-border-color);
+}
+
+input[solaris-input]:disabled {
+  cursor: not-allowed;
+  opacity: var(--solaris-input-disabled-opacity);
+}
+
+input[solaris-input][readonly] {
+  background: var(--solaris-input-readonly-background);
+  cursor: default;
+}
+
+input[solaris-input]::-webkit-search-decoration,
+input[solaris-input]::-webkit-search-cancel-button,
+input[solaris-input]::-webkit-search-results-button,
+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]: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.
+  -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-border-color: var(--solaris-border-default);
+  --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-border-color: var(--solaris-border-subtle);
+  --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-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-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-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-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-line-height: var(--solaris-line-height-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);
+}
+
+input[solaris-input][data-density='comfortable'] {
+  --solaris-input-padding-y: var(--solaris-density-padding-sm);
+  --solaris-input-line-height: var(--solaris-line-height-md);
+}
+
+input[solaris-input][data-radius='none'] {
+  --solaris-input-radius: var(--solaris-radius-none);
+}
+
+input[solaris-input][data-radius='sm'] {
+  --solaris-input-radius: var(--solaris-radius-sm);
+}
+
+input[solaris-input][data-radius='md'] {
+  --solaris-input-radius: var(--solaris-radius-md);
+}
+
+input[solaris-input][data-radius='lg'] {
+  --solaris-input-radius: var(--solaris-radius-lg);
+}
+
+input[solaris-input][data-full-width] {
+  width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  input[solaris-input] {
+    transition: none;
+  }
+}
+
+[data-reduced-motion='true'] input[solaris-input] {
+  transition: none;
+}
+
+@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-box-shadow: 0 0 0 30px var(--solaris-input-background) inset;
+  }
+}
+
+solaris-form-field input[solaris-input] {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  height: auto;
+  padding-left: 0;
+  padding-right: 0;
+  // SOLARIS_TOKEN_EXCEPTION: Resetting box-shadow inside form-field context is intentional to inherit from parent.
+  box-shadow: none;
+}
+
+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;
+}
+
+solaris-form-field input[solaris-input][data-invalid] {
+  border-color: transparent;
+}
+
+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;
+}
+
+solaris-form-field input[solaris-input][disabled] {
+  opacity: var(--solaris-input-disabled-opacity);
+}
+
+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 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]::-webkit-search-decoration,
+solaris-form-field input[solaris-input]::-webkit-search-cancel-button,
+solaris-form-field input[solaris-input]::-webkit-search-results-button,
+solaris-form-field input[solaris-input]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+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;
+}

package/styles/_popover.scss

@@ -0,0 +1,68 @@
+.solaris-popover-panel-overlay {
+  z-index: var(--solaris-z-index-popover, 1000);
+}
+
+.solaris-popover-panel {
+  display: block;
+  outline: none;
+}
+
+.solaris-popover-panel__container {
+  box-sizing: border-box;
+  background: var(--solaris-popover-background, var(--solaris-surface-raised));
+  color: var(--solaris-popover-color, var(--solaris-text-default));
+  border: var(--solaris-popover-border-width, 0) solid
+    var(--solaris-popover-border-color, transparent);
+  border-radius: var(--solaris-popover-radius, var(--solaris-radius-md));
+  box-shadow: var(--solaris-popover-shadow, var(--solaris-shadow-lg));
+  padding: var(--solaris-popover-padding, var(--solaris-spacing-3));
+  min-width: var(--solaris-popover-min-width, auto);
+  max-width: var(--solaris-popover-max-width, none);
+  outline: none;
+}
+
+.solaris-popover-panel__container[data-appearance='outline'] {
+  background: var(--solaris-popover-background, var(--solaris-surface-raised));
+  border: var(--solaris-popover-border-width, var(--solaris-border-width-sm))
+    solid
+    var(
+      --solaris-popover-border-color,
+      var(--solaris-popover-outline-border-color, var(--solaris-border-default))
+    );
+}
+
+.solaris-popover-panel__container[data-padding='none'] {
+  --solaris-popover-padding: 0;
+}
+
+.solaris-popover-panel__container[data-padding='sm'] {
+  --solaris-popover-padding: var(--solaris-spacing-2);
+}
+
+.solaris-popover-panel__container[data-padding='md'] {
+  --solaris-popover-padding: var(--solaris-spacing-3);
+}
+
+.solaris-popover-panel__container[data-padding='lg'] {
+  --solaris-popover-padding: var(--solaris-spacing-4);
+}
+
+.solaris-popover-panel__container[data-radius='none'] {
+  border-radius: var(--solaris-radius-none);
+}
+
+.solaris-popover-panel__container[data-radius='sm'] {
+  border-radius: var(--solaris-radius-sm);
+}
+
+.solaris-popover-panel__container[data-radius='md'] {
+  border-radius: var(--solaris-radius-md);
+}
+
+.solaris-popover-panel__container[data-radius='lg'] {
+  border-radius: var(--solaris-radius-lg);
+}
+
+.solaris-popover-panel__container[data-radius='xl'] {
+  border-radius: var(--solaris-radius-xl);
+}

package/styles/_theme.scss

@@ -1,36 +1,36 @@
-/// 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';
+
+$-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/_tooltip.scss

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