@firebase-oss/ui-styles 0.0.1 → 0.0.2

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2016 Google Inc
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/base.css

@@ -0,0 +1,325 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@layer theme {
+  :root {
+    /* The primary color is used for the button and link colors */
+    --fui-primary: var(--color-black);
+    /* The primary hover color is used for the button and link colors when hovered */
+    --fui-primary-hover: --alpha(var(--fui-primary) / 85%);
+    /* The primary surface color is used for the button text color */
+    --fui-primary-surface: var(--color-white);
+    /* The text color used for body text */
+    --fui-text: var(--color-black);
+    /* The muted text color used for body text, such as subtitles */
+    --fui-text-muted: var(--color-gray-800);
+    /* The background color of the cards */
+    --fui-background: var(--color-white);
+    /* The border color used for none input fields */
+    --fui-border: var(--color-gray-200);
+    /* The input color used for input fields */
+    --fui-input: var(--color-gray-300);
+    /* The error color used for error messages */
+    --fui-error: var(--color-red-500);
+    /* The radius used for the input fields */
+    --fui-radius: var(--radius-sm);
+    /* The radius used for the cards */
+    --fui-radius-card: var(--radius-xl);
+
+    /* Apply dark mode styles when the dark variant is applied */
+    /* See https://tailwindcss.com/docs/dark-mode */
+    @variant dark {
+      --fui-primary: var(--color-white);
+      --fui-primary-hover: --alpha(var(--fui-primary) / 85%);
+      --fui-primary-surface: var(--color-black);
+      --fui-text: var(--color-white);
+      --fui-text-muted: var(--color-neutral-300);
+      --fui-background: var(--color-neutral-950);
+      --fui-border: var(--color-neutral-800);
+      --fui-input: var(--color-neutral-700);
+      --fui-error: var(--color-red-700);
+      --fui-radius: var(--radius-sm);
+      --fui-radius-card: var(--radius-xl);
+    }
+  }
+}
+
+
+@theme {
+  --color-primary: var(--fui-primary);
+  --color-primary-hover: var(--fui-primary-hover);
+  --color-primary-surface: var(--fui-primary-surface);
+  --color-text: var(--fui-text);
+  --color-text-muted: var(--fui-text-muted);
+  --color-background: var(--fui-background);
+  --color-border: var(--fui-border);
+  --color-input: var(--fui-input);
+  --color-error: var(--fui-error);
+  --radius: var(--fui-radius);
+  --radius-card: var(--fui-radius-card);
+}
+
+@layer components {
+  /* Using :where() to reduce CSS specificity - allows users to easily override with their own Tailwind classes */
+  :where(.fui-screen) {
+    @apply max-w-sm mx-auto;
+  }
+
+  :where(.fui-screen .fui-screen__children) {
+    @apply space-y-2;
+  }
+
+  :where(.fui-content) {
+    @apply space-y-2;
+  }
+
+  :where(.fui-card) {
+    @apply bg-background p-10 border border-border rounded-card space-y-6;
+  }
+
+  :where(.fui-card__header) {
+    @apply text-center space-y-1;
+  }
+
+  :where(.fui-card__title) {
+    @apply text-xl font-bold text-text;
+  }
+
+  :where(.fui-card__subtitle) {
+    @apply text-sm text-text-muted;
+  }
+
+  :where(.fui-form) {
+    @apply space-y-6;
+  }
+
+  :where(.fui-form fieldset),
+  :where(.fui-form fieldset label) {
+    @apply flex flex-col gap-2 text-text;
+  }
+
+  :where(.fui-form fieldset label div[data-input-label]) {
+    @apply flex gap-3 text-sm font-medium;
+  }
+
+  :where(.fui-form fieldset label div[data-input-label] > div:first-child) {
+    @apply grow;
+  }
+
+  :where(.fui-form fieldset label div[data-input-description]) {
+    @apply text-xs text-text-muted;
+  }
+
+  :where(.fui-form .fui-form__action) {
+    @apply px-1 hover:underline text-xs text-text-muted;
+  }
+
+  :where(.fui-form fieldset label input) {
+    @apply w-full border border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent;
+  }
+
+  :where(.fui-form fieldset label input[aria-invalid="true"]) {
+    @apply border-error outline-error outline-2;
+  }
+
+  :where(.fui-form fieldset label div[data-input-group]) {
+    @apply flex items-center gap-2;
+  }
+
+  :where(.fui-form .fui-qr-code-container) {
+    @apply flex flex-col items-center gap-4 text-text-muted text-xs;
+  }
+
+  :where(.fui-error) {
+    @apply text-error text-left text-xs;
+  }
+
+  :where(.fui-success) {
+    @apply text-center text-xs;
+  }
+
+  :where(.fui-button) {
+    @apply w-full flex items-center justify-center gap-3 px-4 py-2 rounded text-sm font-medium shadow-xs bg-primary text-primary-surface transition hover:bg-primary-hover hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  :where(.fui-button--secondary) {
+    @apply bg-transparent text-text border border-input hover:bg-background hover:border-primary;
+  }
+
+  :where(.fui-button.fui-provider__button) {
+    @apply border border-border;
+  }
+
+  :where(.fui-provider__button svg, .fui-provider__button img) {
+    @apply w-5 h-5;
+  }
+
+  :where(.fui-divider) {
+    @apply flex items-center gap-3 my-4;
+  }
+
+  :where(.fui-divider__line) {
+    @apply flex-1 h-px bg-border;
+  }
+
+  :where(.fui-divider__text) {
+    @apply text-text-muted text-xs;
+  }
+
+  :where(.fui-phone-input) {
+    @apply flex gap-2 items-center;
+  }
+
+  :where(.fui-phone-input__number-input) {
+    @apply border border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent flex-1;
+  }
+
+  :where(.fui-phone-input__number-input[aria-invalid="true"]) {
+    @apply outline-error outline-2;
+  }
+
+  :where(.fui-country-selector) {
+    @apply relative inline-block w-[120px];
+  }
+
+  :where(.fui-country-selector__wrapper) {
+    @apply relative flex items-center outline-1 outline-input rounded bg-transparent overflow-hidden;
+  }
+
+  :where(.fui-country-selector__flag) {
+    @apply absolute left-2 text-lg pointer-events-none;
+  }
+
+  :where(.fui-country-selector select) {
+    @apply w-full pl-8 pr-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent appearance-none cursor-pointer text-transparent;
+  }
+
+  :where(.fui-country-selector__dial-code) {
+    @apply absolute left-8 top-1/2 -translate-y-1/2 text-sm pointer-events-none text-text;
+  }
+
+  :where(.fui-form fieldset label div[data-input-group]:has(input[aria-invalid="true"]) .fui-country-selector) {
+    @apply outline-error outline-2 rounded;
+  }
+
+  :where(.fui-form fieldset label div[data-input-group]:has(input[aria-invalid="true"]) .fui-country-selector .fui-country-selector__wrapper) {
+    @apply outline-error outline-2 rounded;
+  }
+  
+  :where(.fui-policies) {
+    @apply text-text-muted text-center text-xs;
+  }
+
+  :where(.fui-policies a, .fui-policies button) {
+    @apply hover:underline font-semibold;
+  }
+
+  .fui-provider__button[data-provider="google.com"][data-themed="true"] {
+    --google-primary: #131314;
+    --color-primary: var(--google-primary);
+    --color-primary-hover: --alpha(var(--google-primary) / 85%);
+    --color-primary-surface: #FFFFFF;
+    --color-border: var(--google-primary);
+  }
+
+  .fui-provider__button[data-provider="google.com"][data-themed="neutral"] {
+    --google-primary: #F2F2F2;
+    --color-primary: var(--google-primary);
+    --color-primary-hover: --alpha(var(--google-primary) / 85%);
+    --color-primary-surface: #1F1F1F;
+    --color-border: transparent;
+  }
+
+  @variant dark {
+    .fui-provider__button[data-provider="google.com"][data-themed="true"] {
+      --google-primary: #FFFFFF;
+      --color-primary: var(--google-primary);
+      --color-primary-hover: --alpha(var(--google-primary) / 85%);
+      --color-primary-surface: #1F1F1F;
+      --color-border: #747775;
+    }
+  }
+
+  .fui-provider__button[data-provider="facebook.com"][data-themed="true"] {
+    --facebook-primary: #1877F2;
+    --color-primary: var(--facebook-primary);
+    --color-primary-hover: --alpha(var(--facebook-primary) / 85%);
+    --color-primary-surface: var(--color-white);
+    --color-border: var(--facebook-primary);
+  }
+
+  .fui-provider__button[data-provider="apple.com"][data-themed="true"] {
+    --apple-primary: #000000;
+    --color-primary: var(--apple-primary);
+    --color-primary-hover: --alpha(var(--apple-primary) / 85%);
+    --color-primary-surface: #FFFFFF;
+    --color-border: var(--apple-primary);
+  }
+
+  @variant dark {
+    .fui-provider__button[data-provider="apple.com"][data-themed="true"] {
+      --apple-primary: var(--color-white);
+      --color-primary: var(--apple-primary);
+      --color-primary-hover: --alpha(var(--apple-primary) / 85%);
+      --color-primary-surface: var(--color-black);
+      --color-border: var(--color-white);
+    }
+  }
+
+  .fui-provider__button[data-provider="github.com"][data-themed="true"] {
+    --github-primary: #000000;
+    --color-primary: var(--github-primary);
+    --color-primary-hover: --alpha(var(--github-primary) / 85%);
+    --color-primary-surface: #FFFFFF;
+    --color-border: var(--github-primary);
+  }
+
+  @variant dark {
+    .fui-provider__button[data-provider="github.com"][data-themed="true"] {
+      --github-primary: var(--color-white);
+      --color-primary: var(--github-primary);
+      --color-primary-hover: --alpha(var(--github-primary) / 85%);
+      --color-primary-surface: var(--color-black);
+      --color-border: var(--color-white);
+    }
+  }
+
+  .fui-provider__button[data-provider="microsoft.com"][data-themed="true"] {
+    --microsoft-primary: #2F2F2F;
+    --color-primary: var(--microsoft-primary);
+    --color-primary-hover: --alpha(var(--microsoft-primary) / 85%);
+    --color-primary-surface: #FFFFFF;
+    --color-border: var(--microsoft-primary);
+  }
+
+  @variant dark {
+    .fui-provider__button[data-provider="microsoft.com"][data-themed="true"] {
+      --microsoft-primary: var(--color-white);
+      --color-primary: var(--microsoft-primary);
+      --color-primary-hover: --alpha(var(--microsoft-primary) / 85%);
+      --color-primary-surface: #5E5E5E;
+      --color-border: var(--color-white);
+    }
+  }
+  
+  .fui-provider__button[data-provider="twitter.com"][data-themed="true"] {
+    --twitter-primary: #1DA1F2;
+    --color-primary: var(--twitter-primary);
+    --color-primary-hover: --alpha(var(--twitter-primary) / 85%);
+    --color-primary-surface: #FFFFFF;
+    --color-border: var(--twitter-primary);
+  }
+}

package/dist/dist.min.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-800:oklch(27.8% .033 256.848);--color-neutral-300:oklch(87% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:.25rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--radius:var(--fui-radius);--color-primary:var(--fui-primary);--color-primary-hover:var(--fui-primary-hover);--color-primary-surface:var(--fui-primary-surface);--color-text:var(--fui-text);--color-text-muted:var(--fui-text-muted);--color-background:var(--fui-background);--color-border:var(--fui-border);--color-input:var(--fui-input);--color-error:var(--fui-error);--radius-card:var(--fui-radius-card)}:root{--fui-primary:var(--color-black);--fui-primary-hover:var(--fui-primary)}@supports (color:color-mix(in lab, red, red)){:root{--fui-primary-hover:color-mix(in oklab,var(--fui-primary)85%,transparent)}}:root{--fui-primary-surface:var(--color-white);--fui-text:var(--color-black);--fui-text-muted:var(--color-gray-800);--fui-background:var(--color-white);--fui-border:var(--color-gray-200);--fui-input:var(--color-gray-300);--fui-error:var(--color-red-500);--fui-radius:var(--radius-sm);--fui-radius-card:var(--radius-xl)}@media (prefers-color-scheme:dark){:root{--fui-primary:var(--color-white);--fui-primary-hover:var(--fui-primary)}@supports (color:color-mix(in lab, red, red)){:root{--fui-primary-hover:color-mix(in oklab,var(--fui-primary)85%,transparent)}}:root{--fui-primary-surface:var(--color-black);--fui-text:var(--color-white);--fui-text-muted:var(--color-neutral-300);--fui-background:var(--color-neutral-950);--fui-border:var(--color-neutral-800);--fui-input:var(--color-neutral-700);--fui-error:var(--color-red-700);--fui-radius:var(--radius-sm);--fui-radius-card:var(--radius-xl)}}}@layer components{:where(.fui-screen){max-width:var(--container-sm);margin-inline:auto}:where(:where(.fui-screen .fui-screen__children)>:not(:last-child)),:where(:where(.fui-content)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(:where(.fui-card)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.fui-card){border-radius:var(--radius-card);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-background);padding:calc(var(--spacing)*10)}:where(:where(.fui-card__header)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.fui-card__header){text-align:center}:where(.fui-card__title){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-text)}:where(.fui-card__subtitle){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}:where(:where(.fui-form)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.fui-form fieldset),:where(.fui-form fieldset label){gap:calc(var(--spacing)*2);color:var(--color-text);flex-direction:column;display:flex}:where(.fui-form fieldset label div[data-input-label]){gap:calc(var(--spacing)*3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);display:flex}:where(.fui-form fieldset label div[data-input-label]>div:first-child){flex-grow:1}:where(.fui-form fieldset label div[data-input-description]){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}:where(.fui-form .fui-form__action){padding-inline:calc(var(--spacing)*1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}@media (hover:hover){:where(.fui-form .fui-form__action):hover{text-decoration-line:underline}}:where(.fui-form fieldset label input){border-radius:var(--radius);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input);width:100%;padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#0000}:where(.fui-form fieldset label input):focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-primary)}:where(.fui-form fieldset label input[aria-invalid=true]){border-color:var(--color-error);outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-error)}:where(.fui-form fieldset label div[data-input-group]){align-items:center;gap:calc(var(--spacing)*2);display:flex}:where(.fui-form .fui-qr-code-container){align-items:center;gap:calc(var(--spacing)*4);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted);flex-direction:column;display:flex}:where(.fui-error){text-align:left;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-error)}:where(.fui-success){text-align:center;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}:where(.fui-button){justify-content:center;align-items:center;gap:calc(var(--spacing)*3);border-radius:var(--radius);background-color:var(--color-primary);width:100%;padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-primary-surface);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}@media (hover:hover){:where(.fui-button):hover{cursor:pointer;background-color:var(--color-primary-hover)}}:where(.fui-button):disabled{cursor:not-allowed;opacity:.5}:where(.fui-button--secondary){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input);color:var(--color-text);background-color:#0000}@media (hover:hover){:where(.fui-button--secondary):hover{border-color:var(--color-primary);background-color:var(--color-background)}}:where(.fui-button.fui-provider__button){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border)}:where(.fui-provider__button svg,.fui-provider__button img){height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}:where(.fui-divider){margin-block:calc(var(--spacing)*4);align-items:center;gap:calc(var(--spacing)*3);display:flex}:where(.fui-divider__line){background-color:var(--color-border);flex:1;height:1px}:where(.fui-divider__text){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}:where(.fui-phone-input){align-items:center;gap:calc(var(--spacing)*2);display:flex}:where(.fui-phone-input__number-input){border-radius:var(--radius);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#0000;flex:1}:where(.fui-phone-input__number-input):focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-primary)}:where(.fui-phone-input__number-input[aria-invalid=true]){outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-error)}:where(.fui-country-selector){width:120px;display:inline-block;position:relative}:where(.fui-country-selector__wrapper){border-radius:var(--radius);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--color-input);background-color:#0000;align-items:center;display:flex;position:relative;overflow:hidden}:where(.fui-country-selector__flag){pointer-events:none;left:calc(var(--spacing)*2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));position:absolute}:where(.fui-country-selector select){cursor:pointer;appearance:none;width:100%;padding-block:calc(var(--spacing)*2);padding-right:calc(var(--spacing)*2);padding-left:calc(var(--spacing)*8);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:#0000;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#0000}:where(.fui-country-selector select):focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-primary)}:where(.fui-country-selector__dial-code){pointer-events:none;top:50%;left:calc(var(--spacing)*8);--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);position:absolute}:where(.fui-form fieldset label div[data-input-group]:has(input[aria-invalid=true]) .fui-country-selector),:where(.fui-form fieldset label div[data-input-group]:has(input[aria-invalid=true]) .fui-country-selector .fui-country-selector__wrapper){border-radius:var(--radius);outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-error)}:where(.fui-policies){text-align:center;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}:where(.fui-policies a,.fui-policies button){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}@media (hover:hover){:where(.fui-policies a,.fui-policies button):hover{text-decoration-line:underline}}.fui-provider__button[data-provider=google\.com][data-themed=true]{--google-primary:#131314;--color-primary:var(--google-primary);--color-primary-hover:var(--google-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--google-primary)85%,transparent)}}.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--google-primary)}.fui-provider__button[data-provider=google\.com][data-themed=neutral]{--google-primary:#f2f2f2;--color-primary:var(--google-primary);--color-primary-hover:var(--google-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=google\.com][data-themed=neutral]{--color-primary-hover:color-mix(in oklab,var(--google-primary)85%,transparent)}}.fui-provider__button[data-provider=google\.com][data-themed=neutral]{--color-primary-surface:#1f1f1f;--color-border:transparent}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=google\.com][data-themed=true]{--google-primary:#fff;--color-primary:var(--google-primary);--color-primary-hover:var(--google-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--google-primary)85%,transparent)}}.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-surface:#1f1f1f;--color-border:#747775}}.fui-provider__button[data-provider=facebook\.com][data-themed=true]{--facebook-primary:#1877f2;--color-primary:var(--facebook-primary);--color-primary-hover:var(--facebook-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=facebook\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--facebook-primary)85%,transparent)}}.fui-provider__button[data-provider=facebook\.com][data-themed=true]{--color-primary-surface:var(--color-white);--color-border:var(--facebook-primary)}.fui-provider__button[data-provider=apple\.com][data-themed=true]{--apple-primary:#000;--color-primary:var(--apple-primary);--color-primary-hover:var(--apple-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--apple-primary)85%,transparent)}}.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--apple-primary)}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=apple\.com][data-themed=true]{--apple-primary:var(--color-white);--color-primary:var(--apple-primary);--color-primary-hover:var(--apple-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--apple-primary)85%,transparent)}}.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-surface:var(--color-black);--color-border:var(--color-white)}}.fui-provider__button[data-provider=github\.com][data-themed=true]{--github-primary:#000;--color-primary:var(--github-primary);--color-primary-hover:var(--github-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--github-primary)85%,transparent)}}.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--github-primary)}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=github\.com][data-themed=true]{--github-primary:var(--color-white);--color-primary:var(--github-primary);--color-primary-hover:var(--github-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--github-primary)85%,transparent)}}.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-surface:var(--color-black);--color-border:var(--color-white)}}.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--microsoft-primary:#2f2f2f;--color-primary:var(--microsoft-primary);--color-primary-hover:var(--microsoft-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--microsoft-primary)85%,transparent)}}.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--microsoft-primary)}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--microsoft-primary:var(--color-white);--color-primary:var(--microsoft-primary);--color-primary-hover:var(--microsoft-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--microsoft-primary)85%,transparent)}}.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-surface:#5e5e5e;--color-border:var(--color-white)}}.fui-provider__button[data-provider=twitter\.com][data-themed=true]{--twitter-primary:#1da1f2;--color-primary:var(--twitter-primary);--color-primary-hover:var(--twitter-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=twitter\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--twitter-primary)85%,transparent)}}.fui-provider__button[data-provider=twitter\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--twitter-primary)}}@layer utilities;@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}

package/dist/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariant = void 0;
+const cva_1 = require("cva");
+/**
+ * Class variance authority configuration for button variants.
+ *
+ * Defines the CSS class variants for buttons with primary and secondary styles.
+ */
+exports.buttonVariant = (0, cva_1.cva)({
+    base: "fui-button",
+    variants: {
+        variant: {
+            primary: "",
+            secondary: "fui-button--secondary",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});

package/dist/index.d.cts

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type VariantProps } from "cva";
+/**
+ * Class variance authority configuration for button variants.
+ *
+ * Defines the CSS class variants for buttons with primary and secondary styles.
+ */
+export declare const buttonVariant: (props?: ({
+    variant?: "primary" | "secondary" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+/** Button variant type derived from the buttonVariant configuration. */
+export type ButtonVariant = VariantProps<typeof buttonVariant>["variant"];

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type VariantProps } from "cva";
+/**
+ * Class variance authority configuration for button variants.
+ *
+ * Defines the CSS class variants for buttons with primary and secondary styles.
+ */
+export declare const buttonVariant: (props?: ({
+    variant?: "primary" | "secondary" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+/** Button variant type derived from the buttonVariant configuration. */
+export type ButtonVariant = VariantProps<typeof buttonVariant>["variant"];

package/dist/index.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { cva } from "cva";
+/**
+ * Class variance authority configuration for button variants.
+ *
+ * Defines the CSS class variants for buttons with primary and secondary styles.
+ */
+export const buttonVariant = cva({
+    base: "fui-button",
+    variants: {
+        variant: {
+            primary: "",
+            secondary: "fui-button--secondary",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});

package/package.json

@@ -1,49 +1,57 @@
 {
   "name": "@firebase-oss/ui-styles",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
+  "zshy": {
+    "exports": {
+      ".": "./src/index.ts",
+      "./dist.min.css": "./dist/dist.min.css",
+      "./tailwind": "./src/base.css",
+      "./themes/brutalist.css": "./src/themes/brualist.css"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.1.13",
+    "tsup": "8.5.0",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "cva": "1.0.0-beta.4"
+  },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.cts",
   "exports": {
     ".": {
-      "style": "./dist.css",
-      "types": "./dist/index.d.ts",
+      "types": "./dist/index.d.cts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./dist.css": "./dist.css",
-    "./tailwind": "./src/base.css",
-    "./themes/*": "./src/themes/*.css"
+    "./dist.min.css": "./dist/dist.min.css",
+    "./tailwind": "./dist/base.css",
+    "./themes/brutalist.css": "./dist/themes/brualist.css"
   },
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "files": [
-    "dist.css",
-    "src"
-  ],
   "scripts": {
-    "prepare": "pnpm run build",
-    "build": "tsup && pnpm run build:css",
-    "build:css": "pnpm dlx @tailwindcss/cli -i ./src.css -o ./dist.css --minify",
+    "build": "pnpm dlx zshy && pnpm run build:css",
+    "build:css": "pnpm dlx @tailwindcss/cli -i ./src.css -o ./dist/dist.min.css --minify",
     "build:local": "pnpm run build && pnpm pack",
     "lint": "tsc --noEmit",
     "format": "prettier --write \"src/**/*.ts\"",
     "clean": "rimraf dist",
     "test": "vitest run",
     "test:watch": "vitest",
+    "version:bump": "pnpm version patch",
     "publish:tags": "sh -c 'TAG=\"${npm_package_name}@${npm_package_version}\"; git tag --list \"$TAG\" | grep . || git tag \"$TAG\"; git push origin \"$TAG\"'",
+    "publish:npm": "pnpm publish --access public --tag beta",
     "release": "pnpm run build && pnpm pack --pack-destination ../../releases/"
-  },
-  "devDependencies": {
-    "rimraf": "catalog:",
-    "tailwindcss": "catalog:",
-    "tsup": "catalog:",
-    "typescript": "catalog:",
-    "vitest": "catalog:"
-  },
-  "dependencies": {
-    "cva": "1.0.0-beta.4"
   }
-}
+}

package/src/base.css

@@ -38,27 +38,26 @@
     --fui-radius: var(--radius-sm);
     /* The radius used for the cards */
     --fui-radius-card: var(--radius-xl);
-  }
 
-  /* Apply dark mode styles when the dark variant is applied */
-  /* See https://tailwindcss.com/docs/dark-mode */
-  @variant dark {
-    :root {
+    /* Apply dark mode styles when the dark variant is applied */
+    /* See https://tailwindcss.com/docs/dark-mode */
+    @variant dark {
       --fui-primary: var(--color-white);
       --fui-primary-hover: --alpha(var(--fui-primary) / 85%);
       --fui-primary-surface: var(--color-black);
       --fui-text: var(--color-white);
-      --fui-text-muted: var(--color-gray-200);
-      --fui-background: var(--color-black);
-      --fui-border: var(--color-gray-200);
-      --fui-input: var(--color-gray-300);
-      --fui-error: var(--color-red-500);
+      --fui-text-muted: var(--color-neutral-300);
+      --fui-background: var(--color-neutral-950);
+      --fui-border: var(--color-neutral-800);
+      --fui-input: var(--color-neutral-700);
+      --fui-error: var(--color-red-700);
       --fui-radius: var(--radius-sm);
       --fui-radius-card: var(--radius-xl);
     }
   }
 }
 
+
 @theme {
   --color-primary: var(--fui-primary);
   --color-primary-hover: var(--fui-primary-hover);
@@ -76,7 +75,7 @@
 @layer components {
   /* Using :where() to reduce CSS specificity - allows users to easily override with their own Tailwind classes */
   :where(.fui-screen) {
-    @apply pt-24 max-w-md mx-auto;
+    @apply max-w-sm mx-auto;
   }
 
   :where(.fui-screen .fui-screen__children) {
@@ -85,7 +84,6 @@
 
   :where(.fui-content) {
     @apply space-y-2;
-    
   }
 
   :where(.fui-card) {
@@ -121,6 +119,10 @@
     @apply grow;
   }
 
+  :where(.fui-form fieldset label div[data-input-description]) {
+    @apply text-xs text-text-muted;
+  }
+
   :where(.fui-form .fui-form__action) {
     @apply px-1 hover:underline text-xs text-text-muted;
   }
@@ -137,7 +139,11 @@
     @apply flex items-center gap-2;
   }
 
-  :where(.fui-form .fui-form__error) {
+  :where(.fui-form .fui-qr-code-container) {
+    @apply flex flex-col items-center gap-4 text-text-muted text-xs;
+  }
+
+  :where(.fui-error) {
     @apply text-error text-left text-xs;
   }
 
@@ -157,7 +163,7 @@
     @apply border border-border;
   }
 
-  :where(.fui-provider__button > svg, .fui-provider__button > img) {
+  :where(.fui-provider__button svg, .fui-provider__button img) {
     @apply w-5 h-5;
   }
 
@@ -178,7 +184,7 @@
   }
 
   :where(.fui-phone-input__number-input) {
-    @apply border-1 border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent flex-1;
+    @apply border border-input rounded px-2 py-2 text-sm focus:outline-2 focus:outline-primary shadow-xs bg-transparent flex-1;
   }
 
   :where(.fui-phone-input__number-input[aria-invalid="true"]) {

package/src/base.test.ts

@@ -259,7 +259,7 @@ describe("Tailwind :where() pseudo-class", () => {
       styleElement.textContent = `
         /* Base component styles with :where() for zero specificity */
         :where(.fui-form fieldset > label > input) { border: 1px solid rgb(209, 213, 219); padding: 0.5rem; }
-        :where(.fui-form .fui-form__error) { color: rgb(239, 68, 68); }
+        :where(.fui-error) { color: rgb(239, 68, 68); }
         
         /* User Tailwind override classes */
         .border-gray-300 { border-color: rgb(209, 213, 219) !important; }
@@ -268,7 +268,7 @@ describe("Tailwind :where() pseudo-class", () => {
       `;
 
       const inputElement = createTestElement("border-gray-300 px-3");
-      const errorElement = createTestElement("fui-form__error text-red-600");
+      const errorElement = createTestElement("fui-error text-red-600");
 
       expect(getComputedStyleValue(inputElement, "border-color")).toBe("rgb(209, 213, 219)");
       expect(getComputedStyleValue(errorElement, "color")).toBe("rgb(220, 38, 38)");

package/src/index.ts

@@ -1,5 +1,26 @@
+/**
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { cva, type VariantProps } from "cva";
 
+/**
+ * Class variance authority configuration for button variants.
+ *
+ * Defines the CSS class variants for buttons with primary and secondary styles.
+ */
 export const buttonVariant = cva({
   base: "fui-button",
   variants: {
@@ -13,4 +34,5 @@ export const buttonVariant = cva({
   },
 });
 
+/** Button variant type derived from the buttonVariant configuration. */
 export type ButtonVariant = VariantProps<typeof buttonVariant>["variant"];

package/dist.css

@@ -1,2 +0,0 @@
-/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--color-red-500:oklch(63.7% .237 25.331);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-800:oklch(27.8% .033 256.848);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:.25rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--radius:var(--fui-radius);--color-primary:var(--fui-primary);--color-primary-hover:var(--fui-primary-hover);--color-primary-surface:var(--fui-primary-surface);--color-text:var(--fui-text);--color-text-muted:var(--fui-text-muted);--color-background:var(--fui-background);--color-border:var(--fui-border);--color-input:var(--fui-input);--color-error:var(--fui-error);--radius-card:var(--fui-radius-card)}:root{--fui-primary:var(--color-black);--fui-primary-hover:var(--fui-primary)}@supports (color:color-mix(in lab, red, red)){:root{--fui-primary-hover:color-mix(in oklab,var(--fui-primary)85%,transparent)}}:root{--fui-primary-surface:var(--color-white);--fui-text:var(--color-black);--fui-text-muted:var(--color-gray-800);--fui-background:var(--color-white);--fui-border:var(--color-gray-200);--fui-input:var(--color-gray-300);--fui-error:var(--color-red-500);--fui-radius:var(--radius-sm);--fui-radius-card:var(--radius-xl)}@media (prefers-color-scheme:dark){:root{--fui-primary:var(--color-white);--fui-primary-hover:var(--fui-primary)}@supports (color:color-mix(in lab, red, red)){:root{--fui-primary-hover:color-mix(in oklab,var(--fui-primary)85%,transparent)}}:root{--fui-primary-surface:var(--color-black);--fui-text:var(--color-white);--fui-text-muted:var(--color-gray-200);--fui-background:var(--color-black);--fui-border:var(--color-gray-200);--fui-input:var(--color-gray-300);--fui-error:var(--color-red-500);--fui-radius:var(--radius-sm);--fui-radius-card:var(--radius-xl)}}}@layer components{:where(.fui-screen){max-width:var(--container-md);padding-top:calc(var(--spacing)*24);margin-inline:auto}:where(:where(.fui-screen .fui-screen__children)>:not(:last-child)),:where(:where(.fui-content)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(:where(.fui-card)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.fui-card){border-radius:var(--radius-card);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-background);padding:calc(var(--spacing)*10)}:where(:where(.fui-card__header)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.fui-card__header){text-align:center}:where(.fui-card__title){font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-text)}:where(.fui-card__subtitle){font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}:where(:where(.fui-form)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.fui-form fieldset),:where(.fui-form fieldset label){gap:calc(var(--spacing)*2);color:var(--color-text);flex-direction:column;display:flex}:where(.fui-form fieldset label div[data-input-label]){gap:calc(var(--spacing)*3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);display:flex}:where(.fui-form fieldset label div[data-input-label]>div:first-child){flex-grow:1}:where(.fui-form .fui-form__action){padding-inline:calc(var(--spacing)*1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}@media (hover:hover){:where(.fui-form .fui-form__action):hover{text-decoration-line:underline}}:where(.fui-form fieldset label input){border-radius:var(--radius);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input);width:100%;padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#0000}:where(.fui-form fieldset label input):focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-primary)}:where(.fui-form fieldset label input[aria-invalid=true]){border-color:var(--color-error);outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-error)}:where(.fui-form fieldset label div[data-input-group]){align-items:center;gap:calc(var(--spacing)*2);display:flex}:where(.fui-form .fui-form__error){text-align:left;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-error)}:where(.fui-success){text-align:center;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}:where(.fui-button){justify-content:center;align-items:center;gap:calc(var(--spacing)*3);border-radius:var(--radius);background-color:var(--color-primary);width:100%;padding-inline:calc(var(--spacing)*4);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-primary-surface);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));display:flex}@media (hover:hover){:where(.fui-button):hover{cursor:pointer;background-color:var(--color-primary-hover)}}:where(.fui-button):disabled{cursor:not-allowed;opacity:.5}:where(.fui-button--secondary){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input);color:var(--color-text);background-color:#0000}@media (hover:hover){:where(.fui-button--secondary):hover{border-color:var(--color-primary);background-color:var(--color-background)}}:where(.fui-button.fui-provider__button){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border)}:where(.fui-provider__button>svg,.fui-provider__button>img){height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}:where(.fui-divider){margin-block:calc(var(--spacing)*4);align-items:center;gap:calc(var(--spacing)*3);display:flex}:where(.fui-divider__line){background-color:var(--color-border);flex:1;height:1px}:where(.fui-divider__text){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}:where(.fui-phone-input){align-items:center;gap:calc(var(--spacing)*2);display:flex}:where(.fui-phone-input__number-input){border-radius:var(--radius);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-input);padding-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#0000;flex:1}:where(.fui-phone-input__number-input):focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-primary)}:where(.fui-phone-input__number-input[aria-invalid=true]){outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-error)}:where(.fui-country-selector){width:120px;display:inline-block;position:relative}:where(.fui-country-selector__wrapper){border-radius:var(--radius);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--color-input);background-color:#0000;align-items:center;display:flex;position:relative;overflow:hidden}:where(.fui-country-selector__flag){pointer-events:none;left:calc(var(--spacing)*2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));position:absolute}:where(.fui-country-selector select){cursor:pointer;appearance:none;width:100%;padding-block:calc(var(--spacing)*2);padding-right:calc(var(--spacing)*2);padding-left:calc(var(--spacing)*8);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:#0000;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:#0000}:where(.fui-country-selector select):focus{outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-primary)}:where(.fui-country-selector__dial-code){pointer-events:none;top:50%;left:calc(var(--spacing)*8);--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);position:absolute}:where(.fui-form fieldset label div[data-input-group]:has(input[aria-invalid=true]) .fui-country-selector),:where(.fui-form fieldset label div[data-input-group]:has(input[aria-invalid=true]) .fui-country-selector .fui-country-selector__wrapper){border-radius:var(--radius);outline-style:var(--tw-outline-style);outline-width:2px;outline-color:var(--color-error)}:where(.fui-policies){text-align:center;font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));color:var(--color-text-muted)}:where(.fui-policies a,.fui-policies button){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}@media (hover:hover){:where(.fui-policies a,.fui-policies button):hover{text-decoration-line:underline}}.fui-provider__button[data-provider=google\.com][data-themed=true]{--google-primary:#131314;--color-primary:var(--google-primary);--color-primary-hover:var(--google-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--google-primary)85%,transparent)}}.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--google-primary)}.fui-provider__button[data-provider=google\.com][data-themed=neutral]{--google-primary:#f2f2f2;--color-primary:var(--google-primary);--color-primary-hover:var(--google-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=google\.com][data-themed=neutral]{--color-primary-hover:color-mix(in oklab,var(--google-primary)85%,transparent)}}.fui-provider__button[data-provider=google\.com][data-themed=neutral]{--color-primary-surface:#1f1f1f;--color-border:transparent}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=google\.com][data-themed=true]{--google-primary:#fff;--color-primary:var(--google-primary);--color-primary-hover:var(--google-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--google-primary)85%,transparent)}}.fui-provider__button[data-provider=google\.com][data-themed=true]{--color-primary-surface:#1f1f1f;--color-border:#747775}}.fui-provider__button[data-provider=facebook\.com][data-themed=true]{--facebook-primary:#1877f2;--color-primary:var(--facebook-primary);--color-primary-hover:var(--facebook-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=facebook\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--facebook-primary)85%,transparent)}}.fui-provider__button[data-provider=facebook\.com][data-themed=true]{--color-primary-surface:var(--color-white);--color-border:var(--facebook-primary)}.fui-provider__button[data-provider=apple\.com][data-themed=true]{--apple-primary:#000;--color-primary:var(--apple-primary);--color-primary-hover:var(--apple-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--apple-primary)85%,transparent)}}.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--apple-primary)}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=apple\.com][data-themed=true]{--apple-primary:var(--color-white);--color-primary:var(--apple-primary);--color-primary-hover:var(--apple-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--apple-primary)85%,transparent)}}.fui-provider__button[data-provider=apple\.com][data-themed=true]{--color-primary-surface:var(--color-black);--color-border:var(--color-white)}}.fui-provider__button[data-provider=github\.com][data-themed=true]{--github-primary:#000;--color-primary:var(--github-primary);--color-primary-hover:var(--github-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--github-primary)85%,transparent)}}.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--github-primary)}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=github\.com][data-themed=true]{--github-primary:var(--color-white);--color-primary:var(--github-primary);--color-primary-hover:var(--github-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--github-primary)85%,transparent)}}.fui-provider__button[data-provider=github\.com][data-themed=true]{--color-primary-surface:var(--color-black);--color-border:var(--color-white)}}.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--microsoft-primary:#2f2f2f;--color-primary:var(--microsoft-primary);--color-primary-hover:var(--microsoft-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--microsoft-primary)85%,transparent)}}.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--microsoft-primary)}@media (prefers-color-scheme:dark){.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--microsoft-primary:var(--color-white);--color-primary:var(--microsoft-primary);--color-primary-hover:var(--microsoft-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--microsoft-primary)85%,transparent)}}.fui-provider__button[data-provider=microsoft\.com][data-themed=true]{--color-primary-surface:#5e5e5e;--color-border:var(--color-white)}}.fui-provider__button[data-provider=twitter\.com][data-themed=true]{--twitter-primary:#1da1f2;--color-primary:var(--twitter-primary);--color-primary-hover:var(--twitter-primary)}@supports (color:color-mix(in lab, red, red)){.fui-provider__button[data-provider=twitter\.com][data-themed=true]{--color-primary-hover:color-mix(in oklab,var(--twitter-primary)85%,transparent)}}.fui-provider__button[data-provider=twitter\.com][data-themed=true]{--color-primary-surface:#fff;--color-border:var(--twitter-primary)}}@layer utilities;@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}