@uniai-fe/uds-templates 0.1.0 → 0.1.1

package/dist/styles.css

@@ -260,3 +260,509 @@
     transition: none;
   }
 }
+:root {
+  --auth-container-max-width: 335px;
+  --auth-container-gap: var(--spacing-padding-7, 28px);
+  --auth-container-padding-inline: var(--spacing-padding-6, 24px);
+  --auth-container-padding-top: calc(
+    var(--spacing-padding-9, 32px) + env(safe-area-inset-top, 0px)
+  );
+  --auth-container-padding-bottom: var(--spacing-padding-10, 40px);
+}
+
+.auth-container {
+  min-height: min(100svh, 100dvh);
+  padding: var(--auth-container-padding-top) var(--auth-container-padding-inline) calc(var(--auth-container-padding-bottom) + env(safe-area-inset-bottom, 0px));
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--color-common-100, #ffffff);
+  color: inherit;
+}
+
+.auth-container__inner {
+  width: min(100%, var(--auth-container-max-width, 335px));
+  display: flex;
+  flex-direction: column;
+  gap: var(--auth-container-gap);
+  margin-block: auto;
+}
+
+.auth-container__header {
+  width: 100%;
+}
+
+.auth-container__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-container__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-container__footer {
+  margin-top: auto;
+}
+
+.auth-complete-container {
+  width: 100%;
+}
+
+.auth-complete-wrapper {
+  text-align: center;
+}
+
+.auth-complete-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 12px;
+}
+
+.auth-complete-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.auth-complete-title {
+  font-size: var(--font-heading-medium-size, 24px);
+  font-weight: var(--font-heading-medium-weight, 600);
+  color: var(--color-cool-gray-20);
+  line-height: var(--font-heading-medium-line-height, 1.4em);
+}
+
+.auth-complete-description {
+  margin-top: 4px;
+  font-size: var(--font-caption-large-size, 12px);
+  color: var(--color-label-standard);
+  line-height: var(--font-caption-large-line-height, 1.5em);
+}
+
+.auth-complete-contents {
+  width: 100%;
+  margin-top: var(--spacing-padding-4, 16px);
+}
+
+.auth-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-7, 28px);
+  margin-top: var(--spacing-padding-10, 40px);
+}
+
+.auth-login-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-login-util-container {
+  margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-login-find-account {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --divider-height: 13px;
+  --divider-color: var(--color-label-neutral);
+}
+
+.auth-login-find-account-button {
+  color: var(--color-label-standard);
+  font-size: 13px;
+  line-height: 1em;
+  font-weight: 400;
+  padding-inline: var(--spacing-padding-1, 4px);
+}
+.auth-login-find-account-button:hover {
+  color: var(--color-primary-50, #2563eb);
+}
+
+.auth-login-signup {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-login-signup-button {
+  text-decoration: none;
+  min-width: 160px;
+  justify-content: center;
+  --theme-button-font-label-medium-size: var(--font-caption-medium-size);
+}
+
+.auth-find-account-container {
+  width: 100%;
+}
+
+.auth-find-account-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-find-account-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-find-account-form--code .auth-find-account-fields {
+  margin-bottom: var(--spacing-padding-4, 16px);
+}
+
+.auth-find-account-email-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+  margin-bottom: var(--spacing-padding-7, 28px);
+}
+
+.auth-find-account-email-label {
+  color: var(--color-label-standard, var(--primitive-coolgray-20, #3d3f43));
+  font-size: var(--font-label-small-size, 13px);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.auth-find-account-email-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border-standard, var(--primitive-coolgray-90, #e4e5e7));
+  min-height: var(--spacing-padding-14, 56px);
+  padding-bottom: var(--spacing-padding-2, 8px);
+}
+
+.auth-find-account-email-value {
+  font-size: var(--font-body-large-size, 19px);
+  color: var(--color-label-strong, var(--primitive-coolgray-10, #18191b));
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.auth-find-account-email-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-alternative, var(--primitive-coolgray-50, #afb1b6));
+  margin: 0;
+}
+
+.auth-find-account-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-find-account-timer-text {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-primary-50, #2563eb);
+}
+
+.auth-find-account-timer-helper,
+.auth-find-account-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-neutral, var(--primitive-coolgray-40, #797e86));
+  margin: 0;
+}
+
+.auth-find-account-result-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+  padding: var(--spacing-padding-7, 28px);
+  border-radius: var(--shape-rounded-3, 16px);
+  background: var(--color-background-subtle);
+  margin-bottom: var(--spacing-padding-6, 24px);
+}
+
+.auth-find-account-result-label {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-assistive);
+  margin: 0;
+}
+
+.auth-find-account-result-value {
+  font-size: var(--font-heading-medium-size, 21px);
+  font-weight: 700;
+  color: var(--color-label-strong);
+  margin: 0;
+  word-break: break-word;
+}
+
+.auth-find-account-result-sub {
+  font-size: var(--font-body-medium-size, 15px);
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-find-account-result-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-assistive);
+  margin: 0;
+}
+
+.auth-find-account-id-summary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-padding-4, 16px);
+  width: 100%;
+}
+
+.auth-find-account-id-summary-card {
+  width: fit-content;
+  min-width: 230px;
+  padding: 0 var(--spacing-padding-6, 16px);
+  border-radius: var(--theme-radius-medium-3, 8px);
+  background: var(--color-background-alternative-cool_gray, var(--color-cool-gray-95, #f2f2f3));
+}
+
+.auth-find-account-id-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-padding-5, 20px);
+  margin: var(--spacing-gap-5, 12px) 0;
+}
+.auth-find-account-id-summary-row .auth-find-account-id-summary-text {
+  font-size: 0;
+}
+.auth-find-account-id-summary-row .auth-find-account-id-summary-text span {
+  font-size: var(--font-caption-large-size);
+  line-height: var(--font-caption-large-line-height);
+}
+.auth-find-account-id-summary-row dt {
+  color: var(--color-label-neutral);
+}
+.auth-find-account-id-summary-row dd {
+  color: var(--color-label-strong);
+}
+
+.auth-find-account-password-rules {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.auth-find-account-password-rule {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  font-size: var(--font-body-medium-size, 15px);
+  color: var(--color-label-assistive);
+}
+
+.auth-find-account-password-rule::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-border-standard);
+  flex-shrink: 0;
+}
+
+.auth-find-account-password-rule[data-satisfied=true] {
+  color: var(--color-label-positive);
+}
+
+.auth-find-account-password-rule[data-satisfied=true]::before {
+  background: var(--color-label-positive);
+}
+
+.auth-find-account-password-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-neutral);
+  margin: 0;
+}
+
+.auth-signup-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-8, 32px);
+  margin-top: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-agreements {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+  background: var(--color-background-subtle);
+  border-radius: var(--shape-rounded-3, 16px);
+  padding: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-agreement-all {
+  background: var(--color-background-soft, #f2f2f3);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreements-list {
+  width: 100%;
+  background: var(--color-common-100, #ffffff);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-toggle {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  flex-wrap: nowrap;
+  font-size: 14px;
+}
+
+.auth-signup-agreement-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-label-assistive, #94989e);
+  flex-shrink: 0;
+}
+.auth-signup-agreement-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.auth-signup-agreement-icon svg path {
+  stroke: currentColor;
+}
+
+.auth-signup-agreement-toggle[data-checked=true] .auth-signup-agreement-icon {
+  color: var(--color-primary-default);
+  border-color: var(--color-primary-default);
+}
+
+.auth-signup-agreement-label {
+  display: inline-flex;
+  gap: var(--spacing-padding-1, 4px);
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+
+.auth-signup-agreement-badge {
+  font-size: 14px;
+  color: var(--color-primary-default);
+}
+.auth-signup-agreement-badge[data-required=false] {
+  color: var(--color-label-standard);
+}
+
+.auth-signup-agreement-title {
+  font-size: 14px;
+  color: var(--color-label-standard);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.auth-signup-agreement-description {
+  font-size: 13px;
+  color: var(--color-label-assistive);
+  margin: 0;
+  padding-left: calc(20px + var(--spacing-padding-3, 12px));
+}
+
+.auth-signup-agreement-detail {
+  border: none;
+  background: none;
+  color: var(--color-label-assistive);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+.auth-signup-agreement-detail svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.auth-signup-agreement-detail:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.auth-signup-agreement-detail:hover svg path {
+  fill: var(--color-label-standard);
+}
+
+.auth-signup-complete {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-7, 28px);
+  text-align: center;
+}
+
+.auth-signup-complete-illustration {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-signup-complete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-signup-complete-description {
+  margin: var(--spacing-padding-2, 8px) 0 0;
+  color: var(--color-label-assistive);
+}
+
+.auth-signup-complete-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreement-drawer-body p {
+  font-weight: 400;
+  color: var(--color-label-standard);
+  font-size: var(--font-body-xxsmall-size);
+  line-height: 1.5em;
+  letter-spacing: 0px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/auth/common/find/styles/result.scss

@@ -49,7 +49,7 @@
   border-radius: var(--theme-radius-medium-3, 8px);
   background: var(
     --color-background-alternative-cool_gray,
-    var(--colot-cool-gray-95, #f2f2f3)
+    var(--color-cool-gray-95, #f2f2f3)
   );
 }
 

package/src/index.scss

@@ -6,3 +6,10 @@
 @use "./page-frame/mobile/index.scss" as *;
 @use "./page-frame/navigation/index.scss" as *;
 @use "./modal/index.scss" as *;
+
+@use "./auth/common/container/index.scss" as *;
+@use "./auth/common/complete/index.scss" as *;
+@use "./auth/login/index.scss" as *;
+@use "./auth/find-id/index.scss" as *;
+@use "./auth/find-password/index.scss" as *;
+@use "./auth/signup/styles/signup.scss" as *;