npm - @educarehq/solaris-ui - Versions diffs - 0.1.0 → 0.2.0 - Mend

@educarehq/solaris-ui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (393) hide show

package/styles/_button.scss CHANGED Viewed

@@ -2,29 +2,29 @@
   --solaris-button-gap: initial;
   --solaris-button-color: initial;
   --solaris-button-radius: initial;
+  --solaris-button-height: initial;
   --solaris-button-padding-x: initial;
   --solaris-button-padding-y: initial;
-  --solaris-button-height: initial;
   --solaris-button-min-width: initial;
   --solaris-button-font-size: initial;
-  --solaris-button-font-weight: initial;
   --solaris-button-icon-size: initial;
   --solaris-button-background: initial;
+  --solaris-button-font-weight: initial;
   --solaris-button-border-color: initial;
   --solaris-button-border-width: initial;
+  --solaris-button-disabled-opacity: 0.5;
   --solaris-button-hover-background: initial;
-  --solaris-button-hover-border-color: initial;
+  --solaris-button-focus-ring-color: initial;
   --solaris-button-active-background: initial;
+  --solaris-button-hover-border-color: initial;
   --solaris-button-active-border-color: initial;
-  --solaris-button-focus-ring-color: initial;
-  --solaris-button-disabled-opacity: 0.5;
   --solaris-button-custom-color: initial;
   --solaris-button-custom-background: initial;
   --solaris-button-custom-border-color: initial;
   --solaris-button-custom-hover-background: initial;
-  --solaris-button-custom-hover-border-color: initial;
   --solaris-button-custom-active-background: initial;
+  --solaris-button-custom-hover-border-color: initial;
   --solaris-button-custom-active-border-color: initial;
   cursor: pointer;
@@ -37,16 +37,16 @@
   gap: var(--solaris-button-gap);
   color: var(--solaris-button-color);
   height: var(--solaris-button-height);
+  line-height: var(--solaris-line-height-sm);
   min-width: var(--solaris-button-min-width);
   font-size: var(--solaris-button-font-size);
   border-radius: var(--solaris-button-radius);
   background: var(--solaris-button-background);
   font-weight: var(--solaris-button-font-weight);
+  font-family: var(--solaris-font-family-sans), system-ui;
   padding: var(--solaris-button-padding-y) var(--solaris-button-padding-x);
   border: var(--solaris-button-border-width) solid
     var(--solaris-button-border-color);
-  line-height: var(--solaris-line-height-sm, 1.25);
-  font-family: var(--solaris-font-family-sans), system-ui;
   transition:
     background var(--solaris-motion-duration-normal, 250ms)
       var(--solaris-motion-easing-standard, ease),
@@ -143,8 +143,8 @@
 }
 [solaris-button][data-appearance='outline'] {
-  --solaris-button-border-width: 1px;
   --solaris-button-background: transparent;
+  --solaris-button-border-width: var(--solaris-border-width-sm);
 }
 [solaris-button][data-appearance='ghost'] {
@@ -154,135 +154,13 @@
 }
 [solaris-button][data-appearance='tonal'] {
-  --solaris-button-border-width: 1px;
+  --solaris-button-border-width: var(--solaris-border-width-sm);
 }
 [solaris-button][data-appearance='surface'] {
   --solaris-button-border-width: 0;
 }
-[solaris-button][data-appearance='glass'] {
-  --solaris-button-border-width: 1px;
-  --solaris-button-glass-blur: 22px;
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-background:
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.24) 0%,
-      rgba(255, 255, 255, 0.1) 34%,
-      rgba(255, 255, 255, 0.04) 100%
-    ),
-    rgba(24, 20, 18, 0.34);
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-hover-background:
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.3) 0%,
-      rgba(255, 255, 255, 0.14) 34%,
-      rgba(255, 255, 255, 0.06) 100%
-    ),
-    rgba(24, 20, 18, 0.4);
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-active-background:
-    linear-gradient(
-      135deg,
-      rgba(255, 255, 255, 0.22) 0%,
-      rgba(255, 255, 255, 0.1) 34%,
-      rgba(255, 255, 255, 0.04) 100%
-    ),
-    rgba(24, 20, 18, 0.46);
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance requires translucent rgba values for frosted glass effect.
-  --solaris-button-border-color: rgba(255, 255, 255, 0.22);
-  --solaris-button-hover-border-color: rgba(255, 255, 255, 0.3);
-  --solaris-button-active-border-color: rgba(255, 255, 255, 0.26);
-  --solaris-button-glass-accent: rgba(255, 110, 24, 0.36);
-  --solaris-button-glass-accent-hover: rgba(255, 110, 24, 0.46);
-  position: relative;
-  isolation: isolate;
-  overflow: hidden;
-  background: var(--solaris-button-background);
-  border-color: var(--solaris-button-border-color);
-  // SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/box-shadow for the frosted glass depth effect.
-  box-shadow:
-    0 12px 36px rgba(0, 0, 0, 0.34),
-    inset 0 1px 0 rgba(255, 255, 255, 0.28),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
-  backdrop-filter: blur(var(--solaris-button-glass-blur)) saturate(150%)
-    contrast(108%);
-  -webkit-backdrop-filter: blur(var(--solaris-button-glass-blur)) saturate(150%)
-    contrast(108%);
-}
-[solaris-button][data-appearance='glass']::before {
-  inset: 0;
-  content: '';
-  z-index: -1;
-  opacity: 0.95;
-  position: absolute;
-  pointer-events: none;
-  border-radius: inherit;
-  // SOLARIS_TOKEN_EXCEPTION: glass ::before requires translucent rgba for inner highlights.
-  background:
-    radial-gradient(
-      circle at 72% 58%,
-      var(--solaris-button-glass-accent),
-      transparent 42%
-    ),
-    radial-gradient(
-      circle at 22% 16%,
-      rgba(255, 255, 255, 0.2),
-      transparent 34%
-    ),
-    // SOLARIS_TOKEN_EXCEPTION: glass ::before requires translucent rgba for inner highlights.
-    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 46%);
-  transition:
-    opacity var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease),
-    filter var(--solaris-motion-duration-normal, 250ms)
-      var(--solaris-motion-easing-standard, ease);
-}
-[solaris-button][data-appearance='glass']:hover {
-  background: var(--solaris-button-hover-background);
-  border-color: var(--solaris-button-hover-border-color);
-  // SOLARIS_TOKEN_EXCEPTION: glass hover requires translucent rgba/box-shadow for the depth effect.
-  box-shadow:
-    0 14px 42px rgba(0, 0, 0, 0.38),
-    inset 0 1px 0 rgba(255, 255, 255, 0.34),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
-}
-[solaris-button][data-appearance='glass']:hover::before {
-  opacity: 1;
-  filter: saturate(115%);
-}
-[solaris-button][data-appearance='glass']:active,
-[solaris-button][data-appearance='glass'][data-active] {
-  transform: translateY(1px);
-  background: var(--solaris-button-active-background);
-  border-color: var(--solaris-button-active-border-color);
-  // SOLARIS_TOKEN_EXCEPTION: glass active requires translucent rgba/box-shadow for the depth effect.
-  box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.34),
-    inset 0 1px 0 rgba(255, 255, 255, 0.2),
-    inset 0 2px 8px rgba(0, 0, 0, 0.18);
-}
 [solaris-button][data-color='neutral'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-text-inverse);
   --solaris-button-background: var(--solaris-text-default);
@@ -325,14 +203,6 @@
   --solaris-button-active-background: var(--solaris-surface-subtle);
 }
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='neutral'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-text-glass);
-  --solaris-button-glass-accent: rgba(255, 110, 24, 0.36);
-  --solaris-button-glass-accent-hover: rgba(255, 110, 24, 0.46);
-  --solaris-button-focus-ring-color: var(--solaris-text-default);
-}
 [solaris-button][data-color='primary'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-primary-text);
   --solaris-button-background: var(--solaris-primary-base);
@@ -374,14 +244,6 @@
   --solaris-button-active-background: var(--solaris-primary-active);
 }
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='primary'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-primary-text);
-  --solaris-button-glass-accent: rgba(22, 119, 255, 0.32);
-  --solaris-button-glass-accent-hover: rgba(22, 119, 255, 0.42);
-  --solaris-button-focus-ring-color: var(--solaris-primary-base);
-}
 [solaris-button][data-color='success'][data-appearance='solid'] {
   --solaris-button-background: var(--solaris-success-base);
   --solaris-button-color: var(--solaris-success-on-solid);
@@ -423,14 +285,6 @@
   --solaris-button-active-background: var(--solaris-success-active);
 }
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='success'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-success-text);
-  --solaris-button-glass-accent: rgba(22, 163, 74, 0.32);
-  --solaris-button-glass-accent-hover: rgba(22, 163, 74, 0.42);
-  --solaris-button-focus-ring-color: var(--solaris-success-base);
-}
 [solaris-button][data-color='warning'][data-appearance='solid'] {
   --solaris-button-background: var(--solaris-warning-base);
   --solaris-button-color: var(--solaris-warning-on-solid);
@@ -472,14 +326,6 @@
   --solaris-button-active-background: var(--solaris-warning-active);
 }
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='warning'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-warning-text);
-  --solaris-button-glass-accent: rgba(255, 110, 24, 0.38);
-  --solaris-button-glass-accent-hover: rgba(255, 110, 24, 0.48);
-  --solaris-button-focus-ring-color: var(--solaris-warning-base);
-}
 [solaris-button][data-color='danger'][data-appearance='solid'] {
   --solaris-button-background: var(--solaris-danger-base);
   --solaris-button-color: var(--solaris-danger-on-solid);
@@ -521,14 +367,6 @@
   --solaris-button-active-background: var(--solaris-danger-active);
 }
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='danger'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-danger-text);
-  --solaris-button-glass-accent: rgba(220, 38, 38, 0.34);
-  --solaris-button-glass-accent-hover: rgba(220, 38, 38, 0.44);
-  --solaris-button-focus-ring-color: var(--solaris-danger-base);
-}
 [solaris-button][data-color='info'][data-appearance='solid'] {
   --solaris-button-color: var(--solaris-info-text);
   --solaris-button-background: var(--solaris-info-base);
@@ -570,14 +408,6 @@
   --solaris-button-active-background: var(--solaris-info-active);
 }
-/* SOLARIS_TOKEN_EXCEPTION: glass appearance uses translucent rgba/backdrop-filter for frosted glass effect. */
-[solaris-button][data-color='info'][data-appearance='glass'] {
-  --solaris-button-color: var(--solaris-info-text);
-  --solaris-button-glass-accent: rgba(59, 130, 246, 0.32);
-  --solaris-button-focus-ring-color: var(--solaris-info-base);
-  --solaris-button-glass-accent-hover: rgba(59, 130, 246, 0.42);
-}
 [solaris-button][data-color='custom'] {
   --solaris-button-hover-background: var(
     --solaris-button-custom-hover-background
@@ -610,71 +440,71 @@
 }
 [solaris-button][data-size='sm'] {
-  --solaris-button-height: 2rem;
-  --solaris-button-gap: 0.25rem;
-  --solaris-button-min-width: 4rem;
-  --solaris-button-padding-x: 0.75rem;
-  --solaris-button-padding-y: 0.25rem;
-  --solaris-button-icon-size: 0.875rem;
-  --solaris-button-font-size: var(--solaris-font-size-sm, 0.875rem);
-  --solaris-button-font-weight: var(--solaris-font-weight-medium, 500);
+  --solaris-button-gap: var(--solaris-spacing-1);
+  --solaris-button-height: var(--solaris-spacing-8);
+  --solaris-button-padding-x: var(--solaris-spacing-3);
+  --solaris-button-padding-y: var(--solaris-spacing-1);
+  --solaris-button-min-width: var(--solaris-spacing-16);
+  --solaris-button-icon-size: var(--solaris-font-size-sm);
+  --solaris-button-font-size: var(--solaris-font-size-sm);
+  --solaris-button-font-weight: var(--solaris-font-weight-medium);
 }
 [solaris-button][data-size='md'] {
-  --solaris-button-gap: 0.375rem;
-  --solaris-button-height: 2.5rem;
-  --solaris-button-min-width: 5rem;
-  --solaris-button-padding-x: 1rem;
-  --solaris-button-icon-size: 1rem;
-  --solaris-button-padding-y: 0.375rem;
-  --solaris-button-font-size: var(--solaris-font-size-md, 0.875rem);
-  --solaris-button-font-weight: var(--solaris-font-weight-medium, 500);
+  --solaris-button-gap: var(--solaris-spacing-2);
+  --solaris-button-height: var(--solaris-spacing-10);
+  --solaris-button-padding-y: var(--solaris-spacing-2);
+  --solaris-button-padding-x: var(--solaris-spacing-4);
+  --solaris-button-icon-size: var(--solaris-spacing-4);
+  --solaris-button-min-width: var(--solaris-spacing-20);
+  --solaris-button-font-size: var(--solaris-font-size-md);
+  --solaris-button-font-weight: var(--solaris-font-weight-medium);
 }
 [solaris-button][data-size='lg'] {
-  --solaris-button-gap: 0.5rem;
-  --solaris-button-height: 3rem;
-  --solaris-button-min-width: 6rem;
-  --solaris-button-padding-y: 0.5rem;
-  --solaris-button-padding-x: 1.25rem;
-  --solaris-button-icon-size: 1.25rem;
-  --solaris-button-font-size: var(--solaris-font-size-lg, 1rem);
-  --solaris-button-font-weight: var(--solaris-font-weight-semibold, 600);
+  --solaris-button-gap: var(--solaris-spacing-2);
+  --solaris-button-height: var(--solaris-spacing-12);
+  --solaris-button-padding-y: var(--solaris-spacing-2);
+  --solaris-button-padding-x: var(--solaris-spacing-5);
+  --solaris-button-icon-size: var(--solaris-spacing-5);
+  --solaris-button-min-width: var(--solaris-spacing-24);
+  --solaris-button-font-size: var(--solaris-font-size-lg);
+  --solaris-button-font-weight: var(--solaris-font-weight-semibold);
 }
 [solaris-button][data-radius='none'] {
-  --solaris-button-radius: var(--solaris-radius-none, 0);
+  --solaris-button-radius: var(--solaris-radius-none);
 }
 [solaris-button][data-radius='sm'] {
-  --solaris-button-radius: var(--solaris-radius-sm, 0.25rem);
+  --solaris-button-radius: var(--solaris-radius-sm);
 }
 [solaris-button][data-radius='md'] {
-  --solaris-button-radius: var(--solaris-radius-md, 0.5rem);
+  --solaris-button-radius: var(--solaris-radius-md);
 }
 [solaris-button][data-radius='lg'] {
-  --solaris-button-radius: var(--solaris-radius-lg, 0.75rem);
+  --solaris-button-radius: var(--solaris-radius-lg);
 }
 [solaris-button][data-radius='full'] {
-  --solaris-button-radius: var(--solaris-radius-full, 624.9375rem);
+  --solaris-button-radius: var(--solaris-radius-full);
 }
 [solaris-button][data-density='compact'] {
-  --solaris-button-height: 2rem;
-  --solaris-button-gap: 0.25rem;
-  --solaris-button-min-width: 4rem;
-  --solaris-button-padding-x: 0.75rem;
-  --solaris-button-icon-size: 0.875rem;
-  --solaris-button-padding-y: 0.1875rem;
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-padding-y: var(--solaris-spacing-4);
+  --solaris-button-min-width: var(--solaris-spacing-10);
+  --solaris-button-icon-size: var(--solaris-font-size-sm);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
 }
 [solaris-button][data-density='comfortable'] {
-  --solaris-button-gap: 0.5rem;
-  --solaris-button-height: 2.5rem;
-  --solaris-button-padding-x: 1rem;
-  --solaris-button-icon-size: 1rem;
-  --solaris-button-padding-y: 0.5rem;
+  --solaris-button-gap: var(--solaris-density-gap-md);
+  --solaris-button-icon-size: var(--solaris-spacing-4);
+  --solaris-button-padding-y: var(--solaris-spacing-4);
+  --solaris-button-height: var(--solaris-density-min-height);
+  --solaris-button-padding-x: var(--solaris-density-padding-lg);
 }

package/styles/_core.scss CHANGED Viewed

@@ -1,37 +1,37 @@
-/// Solaris UI Core
-/// Provides root font-size strategy and base resets.
-///
-/// The default `none` strategy respects the browser's default font-size (typically 16px)
-/// and produces no additional CSS. Consumers who prefer the `rem-10` strategy may opt in,
-/// but must ensure token SCSS files are imported at the correct scope.
-///
-/// Usage:
-///   @use '@solaris-ui/angular/styles' as solaris;
-///
-///   // Default: no root font-size override (browser default)
-///   @include solaris.core();
-///
-///   // rem-10 strategy: 1rem = 10px at root, body reset to 16px
-///   @include solaris.core((root-font-size: rem-10));
-@use 'sass:map';
-$-default-config: (
-  root-font-size: none,
-);
-@mixin core($config: ()) {
-  $merged: map.merge($-default-config, $config);
-  $root-font-size: map.get($merged, root-font-size);
-  @if $root-font-size == rem-10 {
-    :root {
-      font-size: 62.5%;
-    }
-    body {
-      font-size: 1.6rem;
-    }
-  }
-}
+/// Solaris UI Core
+/// Provides root font-size strategy and base resets.
+///
+/// The default `none` strategy respects the browser's default font-size (typically 16px)
+/// and produces no additional CSS. Consumers who prefer the `rem-10` strategy may opt in,
+/// but must ensure token SCSS files are imported at the correct scope.
+///
+/// Usage:
+///   @use '@solaris-ui/angular/styles' as solaris;
+///
+///   // Default: no root font-size override (browser default)
+///   @include solaris.core();
+///
+///   // rem-10 strategy: 1rem = 10px at root, body reset to 16px
+///   @include solaris.core((root-font-size: rem-10));
+@use 'sass:map';
+$-default-config: (
+  root-font-size: none,
+);
+@mixin core($config: ()) {
+  $merged: map.merge($-default-config, $config);
+  $root-font-size: map.get($merged, root-font-size);
+  @if $root-font-size == rem-10 {
+    :root {
+      font-size: 62.5%;
+    }
+    body {
+      font-size: 1.6rem;
+    }
+  }
+}