@educarehq/solaris-components 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@educarehq/solaris-components",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "peerDependencies": {
     "@angular/core": "^21.1.0",
     "intl-tel-input": "^26.0.9",

package/styles/actions/button/button.styles.scss

@@ -0,0 +1,286 @@
+[solaris-button] {
+  --sb-border: transparent;
+  --sb-active-filter: none;
+  --sb-fill: var(--sb-tone);
+  --solaris-button-px: 1.2rem;
+  --solaris-button-height: 3.4rem;
+  --sb-hover-filter: brightness(1.125);
+  --sb-tone: var(--solaris-color-primary);
+  --solaris-button-fs: var(--solaris-fs-16);
+  --solaris-button-gap: var(--solaris-space-2);
+  --sb-tint-base: var(--solaris-color-surface);
+  --sb-ink: var(--solaris-color-primary-contrast);
+  --solaris-button-radius: var(--solaris-radius-sm);
+  --sb-active-bg: color-mix(in srgb, var(--sb-tone) 92%, white);
+  --solaris-button-focus-outline: color-mix(in srgb, var(--sb-tone) 55%, white 45%);
+
+  cursor: pointer;
+  line-height: 1.1;
+  font-weight: 600;
+  align-items: center;
+  color: var(--sb-ink);
+  text-rendering: auto;
+  display: inline-flex;
+  box-sizing: border-box;
+  justify-content: center;
+  transition: all 300ms ease;
+  background: var(--sb-fill);
+  gap: var(--solaris-button-gap);
+  border: 1px solid var(--sb-border);
+  font-size: var(--solaris-button-fs);
+  padding: 0 var(--solaris-button-px);
+  height: var(--solaris-button-height);
+  border-radius: var(--solaris-button-radius);
+  font-family: var(--solaris-font-sans-primary), system-ui;
+}
+
+button[solaris-button] {
+  appearance: none;
+  -webkit-appearance: none;
+}
+button[solaris-button]::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+[solaris-button]:hover {
+  filter: var(--sb-hover-filter);
+}
+
+[solaris-button]:active {
+  background: var(--sb-active-bg);
+  filter: var(--sb-active-filter);
+}
+
+[solaris-button]:focus-visible {
+  outline-offset: 0.2rem;
+  outline: 0.2rem solid var(--solaris-button-focus-outline);
+}
+
+[solaris-button][disabled],
+[solaris-button][aria-disabled="true"] {
+  opacity: 0.55;
+  transform: none;
+  cursor: not-allowed;
+}
+
+[solaris-button] i.ph,
+[solaris-button] svg {
+  flex: 0 0 auto;
+  width: fit-content;
+  height: fit-content;
+}
+
+[solaris-button][aria-busy="true"] {
+  position: relative;
+  color: transparent;
+  pointer-events: none;
+}
+[solaris-button][aria-busy="true"] i.ph,
+[solaris-button][aria-busy="true"] svg {
+  visibility: hidden;
+}
+[solaris-button][aria-busy="true"]::after {
+  content: "";
+  width: 1.6rem;
+  height: 1.6rem;
+  position: absolute;
+  border-radius: var(--solaris-radius-full);
+  animation: solaris-spin 0.8s linear infinite;
+  border: 0.2rem solid color-mix(in srgb, var(--sb-ink) 35%, transparent);
+  border-top-color: var(--sb-ink);
+}
+
+@keyframes solaris-spin {
+  to { transform: rotate(360deg); }
+}
+
+[solaris-button][data-size="sm"] {
+  --solaris-button-px: 1rem;
+  --solaris-button-height: 2.8rem;
+  --solaris-button-fs: var(--solaris-fs-18);
+}
+[solaris-button][data-size="md"] {
+  --solaris-button-px: 1.2rem;
+  --solaris-button-height: 3.4rem;
+  --solaris-button-fs: var(--solaris-fs-20);
+}
+[solaris-button][data-size="lg"] {
+  --solaris-button-px: 1.4rem;
+  --solaris-button-height: 4rem;
+  --solaris-button-fs: var(--solaris-fs-22);
+}
+
+[solaris-button][data-icon-only="true"] {
+  padding: 0;
+  width: var(--solaris-button-height);
+}
+[solaris-button][data-full-width="true"] {
+  width: 100%;
+}
+
+[solaris-button]:is([data-color="primary"], [color="primary"]) {
+  --sb-tone: var(--solaris-color-primary);
+  --sb-fill: var(--solaris-color-primary);
+  --sb-border: var(--solaris-color-primary-tint);
+  --sb-ink: var(--solaris-color-primary-contrast);
+}
+
+[solaris-button]:is([data-color="surface"], [color="surface"]) {
+  --sb-hover-filter: brightness(1.05);
+  --sb-ink: var(--solaris-color-text);
+  --sb-tone: var(--solaris-color-text);
+  --sb-border: var(--solaris-color-border);
+  --sb-fill: var(--solaris-color-surface-2);
+  --sb-tint-base: var(--solaris-color-surface);
+}
+
+[solaris-button]:is([data-color="success"], [color="success"]) {
+  --sb-ink: #fff;
+  --sb-tone: var(--solaris-color-success);
+  --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
+  --sb-fill: color-mix(in srgb, var(--solaris-color-success) 90%, #2f426b);
+}
+
+[solaris-button]:is([data-color="warning"], [color="warning"]) {
+  --sb-ink: #fff;
+  --sb-tone: var(--solaris-color-warning);
+  --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
+  --sb-fill: color-mix(in srgb, var(--solaris-color-warning) 90%, #94913e);
+}
+
+[solaris-button]:is([data-color="error"], [color="error"]) {
+  --sb-ink: #fff;
+  --sb-tone: var(--solaris-color-error);
+  --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
+  --sb-fill: color-mix(in srgb, var(--solaris-color-error) 90%, #662931);
+}
+
+[solaris-button]:is([data-color="info"], [color="info"]) {
+  --sb-ink: #fff;
+  --sb-tone: var(--solaris-color-info);
+  --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
+  --sb-fill: color-mix(in srgb, var(--solaris-color-info) 90%, #662931);
+}
+
+[solaris-button]:is([data-color="gradient"], [color="gradient"]) {
+  --sb-ink: #fff;
+  --sb-active-bg: var(--sb-fill);
+  --sb-active-filter: brightness(1.06);
+  --sb-tone: var(--solaris-color-primary);
+  --sb-fill: var(--solaris-color-gradient);
+  --sb-border: color-mix(in srgb, var(--solaris-color-primary-tint) 80%, white);
+}
+
+[solaris-button][data-color="custom"] {
+  --sb-tone: var(--sb-custom);
+  --sb-ink: var(--sb-custom-ink, #fff);
+  --sb-border: color-mix(in srgb, var(--sb-tone) 70%, white);
+}
+
+[solaris-button][data-custom-ink="true"] {
+  --sb-ink: var(--sb-custom-ink);
+}
+
+[solaris-button]:is([data-variant="outline"], [variant="outline"]) {
+  --sb-fill: transparent;
+  --sb-hover-filter: none;
+  --sb-active-filter: none;
+  --sb-ink: var(--sb-tone);
+  --sb-active-bg: color-mix(in srgb, var(--sb-tone) 16%, transparent);
+  --sb-border: color-mix(in srgb, var(--sb-tone) 40%, var(--solaris-color-border));
+}
+
+[solaris-button]:is([data-variant="outline"], [variant="outline"]):hover {
+  background: color-mix(in srgb, var(--sb-tone) 10%, transparent);
+}
+
+[solaris-button]:is([data-variant="ghost"], [variant="ghost"]) {
+  --sb-fill: transparent;
+  --sb-hover-filter: none;
+  --sb-border: transparent;
+  --sb-ink: var(--sb-tone);
+  --sb-active-filter: none;
+  --sb-active-bg: color-mix(in srgb, var(--sb-tone) 14%, transparent);
+}
+
+[solaris-button]:is([data-variant="ghost"], [variant="ghost"]):hover {
+  background: color-mix(in srgb, var(--solaris-color-surface-2) 80%, transparent);
+}
+[solaris-button]:is([data-variant="ghost"], [variant="ghost"]):active {
+  background: color-mix(in srgb, var(--solaris-color-surface-2) 70%, transparent);
+}
+
+[solaris-button]:is([data-variant="soft"], [variant="soft"]) {
+  --sb-hover-filter: none;
+  --sb-border: transparent;
+  --sb-ink: var(--sb-tone);
+  --sb-active-filter: none;
+  background: color-mix(in srgb, var(--sb-tone) 14%, var(--sb-tint-base));
+  --sb-active-bg: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
+}
+
+[solaris-button]:is([data-variant="soft"], [variant="soft"]):hover {
+  background: color-mix(in srgb, var(--sb-tone) 18%, var(--sb-tint-base));
+}
+
+[solaris-button]:is([data-variant="soft"], [variant="soft"]):active {
+  background: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
+}
+
+[solaris-button]:is([data-color="gradient"], [color="gradient"]):is([data-variant="soft"],
+[variant="soft"]) {
+  --sb-tint-base: var(--solaris-color-bg);
+  background: color-mix(in srgb, var(--sb-tone) 14%, var(--sb-tint-base));
+}
+[solaris-button]:is([data-color="gradient"], [color="gradient"]):is([data-variant="soft"],
+[variant="soft"]):hover {
+  background: color-mix(in srgb, var(--sb-tone) 18%, var(--sb-tint-base));
+}
+[solaris-button]:is([data-color="gradient"], [color="gradient"]):is([data-variant="soft"],
+[variant="soft"]):active {
+  background: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
+}
+
+[solaris-button-group] {
+  display: inline-flex;
+  align-items: stretch;
+  --solaris-button-group-radius: var(--solaris-radius-full);
+}
+
+[solaris-button-group] > [solaris-button] {
+  border-radius: 0;
+}
+
+[solaris-button-group] > [solaris-button]:first-child {
+  border-top-left-radius: var(--solaris-button-group-radius);
+  border-bottom-left-radius: var(--solaris-button-group-radius);
+}
+
+[solaris-button-group] > [solaris-button]:last-child {
+  border-top-right-radius: var(--solaris-button-group-radius);
+  border-bottom-right-radius: var(--solaris-button-group-radius);
+}
+
+[solaris-button-group] > [solaris-button] + [solaris-button] {
+  margin-left: -1px;
+}
+
+[solaris-button-group] > [solaris-button]:hover,
+[solaris-button-group] > [solaris-button]:focus-visible {
+  z-index: 1;
+  position: relative;
+}
+
+[solaris-button][data-badge-overlay="true"] {
+  overflow: visible;
+  position: relative;
+}
+
+[solaris-button][data-badge-overlay="true"] .solaris-badge-host {
+  z-index: 2;
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 0;
+  transform: translate(45%, -45%);
+}

package/styles/forms/input-text/input-text.styles.scss

@@ -0,0 +1,14 @@
+:is(input[solaris-input], textarea[solaris-input]) {
+  border: 0;
+  width: 100%;
+  outline: none;
+  background: transparent;
+  color: var(--atlas-color-text);
+  font-size: var(--solaris-fs-14);
+  font-family: var(--solaris-font-sans-secondary), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+input[type="password"]::-ms-reveal,
+input[type="password"]::-ms-clear {
+  display: none;
+}

package/styles/solaris-components.scss

@@ -1,2 +1,2 @@
-@forward '../src/lib/forms/input-text/styles/input-text.styles';
-@forward '../src/lib/actions/button/styles/button.styles';
+@forward './forms/input-text/input-text.styles';
+@forward './actions/button/button.styles';