@educarehq/solaris-components 0.2.3 → 0.2.5

package/styles/buttons/solaris-buttons.styles.scss

@@ -1,262 +0,0 @@
-[solaris-button] {
-  --sb-active-filter: none;
-  --solaris-button-px: 1.2rem;
-  --solaris-button-height: 3.4rem;
-  --sb-border: transparent;
-  --sb-fill: var(--sb-tone);
-  --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;
-  text-rendering: auto;
-  display: inline-flex;
-  box-sizing: border-box;
-  justify-content: center;
-  transition: all 300ms ease;
-  color: var(--sb-ink);
-  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 {
-  width: 1.6rem;
-  flex: 0 0 auto;
-  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-tone: var(--solaris-color-success);
-  --sb-fill: color-mix(in srgb, var(--solaris-color-success) 70%, #2f426b);
-  --sb-ink: #fff;
-  --sb-border: color-mix(in srgb, var(--sb-tone) 70%, white);
-}
-
-[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) 70%, white);
-  --sb-fill: color-mix(in srgb, var(--solaris-color-warning) 80%, #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) 70%, white);
-  --sb-fill: color-mix(in srgb, var(--solaris-color-error) 80%, #662931);
-}
-
-[solaris-button]:is([data-color="info"], [color="info"]) {
-  --sb-ink: #fff;
-  --sb-tone: var(--solaris-color-info);
-  --sb-fill: var(--solaris-color-info);
-  --sb-border: color-mix(in srgb, var(--sb-tone) 70%, white);
-}
-
-[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: var(--solaris-color-primary-tint);
-}
-
-[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] > [solaris-button] {
-  border-radius: 0;
-}
-
-[solaris-button-group] > [solaris-button]:first-child {
-  border-top-left-radius: var(--solaris-radius-full);
-  border-bottom-left-radius: var(--solaris-radius-full);
-}
-
-[solaris-button-group] > [solaris-button]:last-child {
-  border-top-right-radius: var(--solaris-radius-full);
-  border-bottom-right-radius: var(--solaris-radius-full);
-}
-
-[solaris-button-group] > [solaris-button] + [solaris-button] {
-  margin-left: -1px;
-}
-
-[solaris-button-group] > [solaris-button]:hover,
-[solaris-button-group] > [solaris-button]:focus-visible {
-  position: relative;
-  z-index: 1;
-}

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

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