@photonix/basic 3.0.0 → 3.2.0

package/dist/index.css

@@ -14,6 +14,15 @@
   --surface-brand-subtle: var(--color-primary-100);
   --surface-brand-primary-subtle: var(--color-primary-100);
 }
+:root,
+[data-theme] {
+  --shadow-xs: var(--shadow-down-xs);
+  --shadow-sm: var(--shadow-down-sm);
+  --shadow-md: var(--shadow-down-md);
+  --shadow-lg: var(--shadow-down-lg);
+  --shadow-xl: var(--shadow-down-xl);
+  --shadow-2xl: var(--shadow-down-2xl);
+}
 
 /* ../ultimate/src/styles/global.css */
 :root {
@@ -5980,6 +5989,12 @@
   border: var(--border-sm) solid transparent;
   color: var(--badge-text-subtle);
 }
+.brand {
+  --badge-color: var(--surface-brand-primary);
+  --badge-on-color: var(--text-neutral-primary-inverse);
+  --badge-bg-subtle: var(--surface-brand-subtle);
+  --badge-text-subtle: var(--text-brand-primary);
+}
 .gray {
   --badge-color: var(--surface-neutral-on-surface);
   --badge-on-color: var(--text-neutral-secondary);
@@ -6653,8 +6668,11 @@
   gap: var(--space-xs);
   vertical-align: middle;
 }
-.checkboxContainer .checkboxRoot {
-  margin: calc((var(--dimensions-20) - var(--dimensions-40)) / 2);
+.checkboxContainer .checkboxRoot.medium {
+  margin: calc((var(--dimensions-24) - var(--dimensions-40)) / 2);
+}
+.checkboxContainer .checkboxRoot.small {
+  margin: calc((var(--dimensions-20) - var(--dimensions-32)) / 2);
 }
 .checkboxContainer.disabled {
   cursor: not-allowed;
@@ -6750,7 +6768,7 @@
   position: relative;
   z-index: var(--z-local-below);
 }
-.small {
+.radioRoot.small {
   block-size: var(--dimensions-32);
   inline-size: var(--dimensions-32);
 }
@@ -6758,7 +6776,7 @@
   block-size: var(--dimensions-20);
   inline-size: var(--dimensions-20);
 }
-.medium {
+.radioRoot.medium {
   block-size: var(--dimensions-40);
   inline-size: var(--dimensions-40);
 }
@@ -6775,8 +6793,11 @@
   min-inline-size: max-content;
   vertical-align: middle;
 }
-.radioContainer .radioRoot {
-  margin: calc((var(--dimensions-20) - var(--dimensions-40)) / 2);
+.radioContainer .radioRoot.medium {
+  margin: calc((var(--dimensions-24) - var(--dimensions-40)) / 2);
+}
+.radioContainer .radioRoot.small {
+  margin: calc((var(--dimensions-20) - var(--dimensions-32)) / 2);
 }
 .radioContainer.disabled {
   cursor: not-allowed;
@@ -7359,6 +7380,7 @@
   line-height: var(--title-md-line-height);
 }
 .textFieldContainer {
+  --text-field-content-gap: var(--space-xs);
   align-items: center;
   border: var(--border-sm) solid var(--border-neutral-tertiary);
   border-radius: var(--radius-2xs);
@@ -7401,6 +7423,7 @@
   min-block-size: var(--dimensions-44);
 }
 .medium {
+  --text-field-content-gap: var(--space-xs);
   font-size: var(--body-md-size);
   line-height: var(--body-md-line-height);
   min-block-size: var(--dimensions-44);
@@ -7410,6 +7433,7 @@
   min-block-size: var(--dimensions-36);
 }
 .small {
+  --text-field-content-gap: var(--space-2xs);
   font-size: var(--body-sm-size);
   line-height: var(--body-sm-line-height);
   min-block-size: var(--dimensions-36);
@@ -7444,7 +7468,7 @@
   color: var(--foreground-neutral-primary);
   display: flex;
   justify-content: center;
-  margin-inline-end: var(--space-xs);
+  margin-inline-end: var(--text-field-content-gap);
 }
 .textFieldLeadingText {
   align-items: center;
@@ -7456,7 +7480,7 @@
   font-size: var(--body-lg-size);
   font-weight: var(--body-lg-weight);
   justify-content: center;
-  margin-inline-end: var(--space-xs);
+  margin-inline-end: var(--text-field-content-gap);
   padding: var(--space-4xs) var(--space-2xs);
   white-space: nowrap;
 }
@@ -7465,7 +7489,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding-inline-end: var(--space-xs);
+  padding-inline-end: var(--text-field-content-gap);
   position: relative;
 }
 .textFieldInlineLabel {
@@ -7538,7 +7562,7 @@
 .textFieldTrailingGroup {
   align-items: center;
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--text-field-content-gap);
 }
 .textFieldClearButton {
   block-size: var(--dimensions-20) !important;
@@ -7585,7 +7609,7 @@
   font-family: var(--body-lg-family);
   font-size: var(--body-lg-size);
   font-weight: var(--body-lg-weight);
-  gap: var(--space-xs);
+  gap: var(--text-field-content-gap);
   line-height: var(--body-lg-line-height);
   transition: color var(--motion-duration-normal) var(--motion-ease-standard);
 }
@@ -7593,9 +7617,6 @@
 .activeDropdown {
   color: var(--text-neutral-primary);
 }
-.textFieldTrailingDropdown span {
-  margin-inline-end: calc(var(--dimensions-4) * -1);
-}
 .textFieldChevronIcon {
   align-items: center;
   color: var(--foreground-neutral-primary);
@@ -7613,7 +7634,7 @@
   color: var(--foreground-neutral-primary);
   cursor: pointer;
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--text-field-content-gap);
   z-index: var(--z-local-below);
 }
 .textFieldPasswordToggleButton {
@@ -7754,17 +7775,12 @@
   font-size: var(--body-sm-size);
   font-weight: var(--body-sm-weight);
   line-height: var(--body-sm-line-height);
-  margin-inline-end: var(--space-2xs);
   padding: 0 var(--space-3xs);
 }
-.small .textFieldInputWrapper {
-  padding-inline-end: var(--space-2xs);
-}
 .small .textFieldTrailingDropdown {
   font-family: var(--body-sm-family);
   font-size: var(--body-sm-size);
   font-weight: var(--body-sm-weight);
-  gap: var(--space-3xs);
   line-height: var(--body-sm-line-height);
 }
 .small .textFieldChevronIcon svg {
@@ -8384,6 +8400,9 @@
   user-select: none;
   vertical-align: middle;
 }
+.chipRoot.rounded {
+  border-radius: var(--radius-2xs);
+}
 .chipRoot::after {
   background-color: transparent;
   content: "";
@@ -8567,6 +8586,42 @@
   block-size: var(--dimensions-16);
   inline-size: var(--dimensions-16);
 }
+.small {
+  block-size: var(--dimensions-32);
+  font-size: var(--title-sm-size);
+  font-weight: var(--title-sm-weight-emphasize);
+  letter-spacing: var(--title-sm-letter-spacing);
+  line-height: var(--title-sm-line-height);
+  padding: 0 var(--dimensions-6);
+}
+.small.hasAvatar {
+  padding: var(--dimensions-4);
+}
+.small .chipIcon,
+.small .chipIcon :global(svg) {
+  block-size: var(--dimensions-16);
+  inline-size: var(--dimensions-16);
+}
+.small .chipAvatar {
+  block-size: var(--dimensions-24);
+  flex-shrink: 0;
+  inline-size: var(--dimensions-24);
+}
+.small .chipContent {
+  padding: 0 var(--dimensions-4);
+}
+.small .chipTrailingIcon,
+.small .chipDelete,
+.small .chipAction,
+.small .chipTrailingIcon :global(svg),
+.small .chipDelete :global(svg),
+.small .chipAction :global(svg) {
+  block-size: var(--dimensions-16);
+  inline-size: var(--dimensions-16);
+}
+.outline .chipDelete {
+  color: var(--foreground-neutral-primary);
+}
 .clickable {
   cursor: pointer;
 }
@@ -8843,3 +8898,216 @@
     background: var(--surface-neutral-elevator);
   }
 }
+
+/* ../ultimate/src/components/star/Star.module.css */
+.starRoot {
+  align-items: center;
+  background: transparent;
+  block-size: var(--dimensions-40);
+  border: none;
+  border-radius: 50%;
+  color: var(--foreground-neutral-primary);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--dimensions-40);
+  isolation: isolate;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
+}
+.starRoot:focus-visible {
+  outline: var(--border-md) solid var(--border-state-focus);
+  outline-offset: var(--dimensions-2);
+}
+.starRoot:disabled {
+  color: var(--foreground-state-disabled);
+  cursor: not-allowed;
+}
+.starRoot::before {
+  background-color: transparent;
+  border-radius: 50%;
+  content: "";
+  inset: 0;
+  opacity: var(--opacity-visible);
+  pointer-events: none;
+  position: absolute;
+  transform: scale(1);
+  transition:
+    background-color var(--motion-duration-fast) ease-out,
+    transform var(--motion-duration-fast) ease-out,
+    opacity var(--motion-duration-fast) ease-out;
+}
+.starRoot:hover:not(:disabled)::before {
+  background-color: var(--surface-neutral-on-surface);
+}
+.starRoot:active:not(:disabled)::before {
+  background-color: var(--surface-state-press);
+}
+.starStatePressed::before {
+  animation: star-pressed-expand var(--motion-duration-medium) var(--motion-ease-out) forwards;
+}
+@keyframes star-pressed-expand {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+.starIconWrapper {
+  align-items: center;
+  block-size: var(--dimensions-24);
+  display: flex;
+  inline-size: var(--dimensions-24);
+  justify-content: center;
+  position: relative;
+  transition: color 150ms ease-out;
+  z-index: var(--z-local-content);
+}
+.starStateChecked.starVariantDefault {
+  color: var(--surface-accent-yellow);
+}
+.starStateChecked.starVariantNeutral {
+  color: var(--foreground-neutral-primary);
+}
+.starSizeSmall {
+  block-size: var(--dimensions-32);
+  inline-size: var(--dimensions-32);
+}
+.starSizeSmall .starIconWrapper {
+  block-size: var(--dimensions-20);
+  inline-size: var(--dimensions-20);
+}
+.starSizeMedium {
+  block-size: var(--dimensions-40);
+  inline-size: var(--dimensions-40);
+}
+.starSizeMedium .starIconWrapper {
+  block-size: var(--dimensions-24);
+  inline-size: var(--dimensions-24);
+}
+
+/* ../ultimate/src/components/otp/OTP.module.css */
+.separator {
+  align-self: center;
+  color: var(--text-neutral-secondary);
+  text-align: center;
+  user-select: none;
+}
+.cellSlot {
+  display: flex;
+  min-inline-size: 0;
+  position: relative;
+}
+.dot {
+  background-color: var(--text-neutral-primary);
+  block-size: var(--dimensions-8);
+  border-radius: 50%;
+  inline-size: var(--dimensions-8);
+  inset: 0;
+  margin: auto;
+  pointer-events: none;
+  position: absolute;
+}
+.cell {
+  appearance: none;
+  background: transparent;
+  block-size: 100%;
+  border: var(--border-sm) solid var(--border-neutral-tertiary);
+  border-radius: var(--radius-2xs);
+  box-sizing: border-box;
+  caret-color: var(--text-neutral-primary);
+  color: var(--text-neutral-primary);
+  display: block;
+  font: inherit;
+  inline-size: 100%;
+  letter-spacing: inherit;
+  margin: 0;
+  min-inline-size: 0;
+  outline: none;
+  padding: var(--space-5xs) var(--space-4xs);
+  text-align: center;
+  transition: background-color var(--motion-duration-normal) var(--motion-ease-standard), border-color var(--motion-duration-normal) var(--motion-ease-standard);
+}
+.masked {
+  caret-color: transparent;
+  color: transparent;
+}
+.masked::selection {
+  background-color: transparent;
+  color: transparent;
+}
+.large {
+  block-size: var(--dimensions-44);
+}
+.medium {
+  block-size: var(--dimensions-36);
+}
+.small {
+  block-size: var(--dimensions-28);
+}
+.small .cell {
+  padding-block: 0;
+}
+.cell:focus {
+  border-color: var(--border-state-focus);
+  box-shadow: inset 0 0 0 var(--border-sm) var(--border-state-focus);
+}
+.cell[aria-invalid=true] {
+  background-color: var(--surface-state-error);
+  border-color: var(--border-state-error);
+}
+.cell[aria-invalid=true]:focus {
+  box-shadow: inset 0 0 0 var(--border-sm) var(--border-state-error);
+}
+.cell:disabled {
+  background-color: var(--surface-state-disabled);
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.cell:disabled + .dot {
+  opacity: var(--opacity-disabled);
+}
+.cell:read-only:not(:disabled, [aria-invalid=true]) {
+  background-color: var(--surface-neutral-secondary);
+  cursor: text;
+}
+.cell:hover:not(:focus, :disabled, :read-only, [aria-invalid=true]) {
+  background-color: var(--surface-state-hover);
+  border-color: var(--border-state-hover);
+}
+.dotField.large,
+.dotField.medium,
+.dotField.small {
+  block-size: var(--dimensions-16);
+}
+.cell.dotFieldInput {
+  border-radius: 50%;
+  padding: 0;
+}
+.cell.dotFieldInput[data-filled=true] {
+  background-color: var(--text-neutral-primary);
+  border-color: var(--text-neutral-primary);
+}
+.cell.dotFieldInput[aria-invalid=true][data-filled=true] {
+  background-color: var(--border-state-error);
+  border-color: var(--border-state-error);
+}
+.cell.dotFieldInput:focus {
+  outline: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cell {
+    transition: none;
+  }
+}