├── LICENSE ├── README.md ├── styles-core-1.css └── styles-core-2.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Nader Ferjani 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # clerk-shadcn-theme 2 | Easily synchronize your Clerk components with your Shadcn styles using the provided CSS styles. 3 | 4 | ![Screenshot_4](https://github.com/stormynight9/clerk-shadcn-theme/assets/81434423/65804b03-cf66-43e0-ab19-9158c6ecf003) 5 | 6 | 7 | This theme supports: 8 | * `````` 9 | * `````` 10 | * `````` 11 | * `````` 12 | 13 | ## Setup 14 | 15 | 1. Configure your primary color: 16 | ```jsx 17 | 24 | ... 25 | 26 | ``` 27 | # Clerk Core 2 28 | If you're using older version of Clerk, scroll down. 29 | 30 | 2. Copy and paste the following code into your global CSS file, and you're good to go! 31 | ```css 32 | .cl-formButtonPrimary { 33 | @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3 font-medium text-primary-foreground !shadow-none ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50; 34 | } 35 | 36 | .cl-card, 37 | .cl-socialButtonsBlockButton, 38 | .cl-alert, 39 | .cl-phoneInputBox, 40 | .cl-userButtonPopoverCard { 41 | @apply rounded-lg border border-input bg-background; 42 | } 43 | 44 | .cl-headerTitle, 45 | .cl-socialButtonsBlockButtonText, 46 | .cl-loading, 47 | .cl-formFieldLabel, 48 | .cl-formHeaderTitle, 49 | .cl-selectButton__countryCode, 50 | .cl-selectButton__countryCode p, 51 | .cl-selectOption p, 52 | .cl-selectOption div, 53 | .cl-modalCloseButton, 54 | .cl-navbarButton, 55 | .cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage, 56 | .cl-profileSectionTitle p, 57 | .cl-userPreviewTextContainer, 58 | .cl-profileSectionContent p, 59 | .cl-form p, 60 | .cl-accordionTriggerButton { 61 | @apply dark:text-foreground; 62 | } 63 | 64 | .cl-headerSubtitle, 65 | .cl-dividerText, 66 | .cl-footerActionText, 67 | .cl-alertText, 68 | .cl-formFieldInfoText, 69 | .cl-formFieldSuccessText, 70 | .cl-identityPreviewText, 71 | .cl-userButtonPopoverActionButton, 72 | .cl-userButtonPopoverActionButton svg, 73 | .cl-userButtonPopoverActionButtonText, 74 | .cl-userButtonPopoverFooter p, 75 | .cl-userButtonPopoverFooter a, 76 | .cl-formHeaderSubtitle, 77 | .cl-breadcrumbsItem, 78 | .cl-breadcrumbsItemDivider, 79 | .cl-fileDropAreaHint, 80 | .cl-fileDropAreaFooterHint, 81 | .cl-form 82 | p[data-localization-key='userProfile.emailAddressPage.emailCode.formHint'], 83 | p[data-localization-key='userProfile.profilePage.successMessage'] { 84 | @apply text-muted-foreground; 85 | } 86 | 87 | .cl-dividerLine { 88 | @apply bg-border; 89 | } 90 | 91 | .cl-formFieldInput[type='text'], 92 | .cl-formFieldInput[type='email'], 93 | .cl-formFieldInput[type='password'] { 94 | @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 95 | } 96 | 97 | .cl-footerActionLink { 98 | @apply text-accent-foreground underline hover:text-accent-foreground/90; 99 | } 100 | 101 | .cl-otpCodeFieldInput { 102 | @apply !border !border-input text-foreground; 103 | } 104 | 105 | .cl-formResendCodeLink { 106 | @apply text-primary disabled:opacity-90; 107 | } 108 | 109 | .cl-selectSearchInput__countryCode { 110 | @apply flex h-10 w-full rounded-md border border-b border-input bg-background text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 111 | } 112 | 113 | .cl-selectOptionsContainer__countryCode { 114 | @apply border border-input bg-background; 115 | } 116 | 117 | .cl-internal-icon, 118 | .cl-userPreviewSecondaryIdentifier__userButton { 119 | @apply text-foreground; 120 | } 121 | 122 | button[data-localization-key='userProfile.start.dangerSection.deleteAccountButton'] { 123 | @apply bg-destructive text-destructive-foreground hover:bg-destructive/90; 124 | } 125 | 126 | .cl-fileDropAreaBox { 127 | @apply dark:bg-gray-900; 128 | } 129 | 130 | .cl-fileDropAreaIconBox { 131 | @apply dark:bg-gray-800; 132 | } 133 | 134 | .cl-fileDropAreaIcon { 135 | @apply dark:text-gray-400; 136 | } 137 | 138 | .cl-fileDropAreaButtonPrimary { 139 | @apply h-10 px-4 py-2 text-foreground transition-colors hover:bg-secondary hover:text-accent-foreground; 140 | } 141 | 142 | .cl-userButtonPopoverActionButton, 143 | .cl-profileSectionPrimaryButton, 144 | .cl-accordionTriggerButton, 145 | .cl-navbarButton { 146 | @apply hover:bg-accent hover:text-accent-foreground; 147 | } 148 | 149 | .cl-card { 150 | @apply rounded-lg shadow-md; 151 | } 152 | 153 | .cl-userButtonPopoverCard { 154 | @apply rounded-md; 155 | } 156 | 157 | .cl-userButtonPopoverFooter a { 158 | @apply hover:text-muted-foreground; 159 | } 160 | 161 | .cl-badge { 162 | @apply rounded-full border border-input bg-background px-2.5 py-0.5 text-xs text-foreground !shadow-none; 163 | } 164 | 165 | .cl-badge[data-localization-key='badge__unverified'] { 166 | @apply border bg-transparent text-destructive dark:text-red-500; 167 | } 168 | 169 | .cl-formButtonReset { 170 | @apply text-foreground hover:bg-secondary; 171 | } 172 | 173 | .cl-footer { 174 | @apply rounded-b-lg border-x border-b bg-background bg-gradient-to-t from-background to-background text-muted-foreground; 175 | } 176 | .cl-userButtonPopoverFooter { 177 | @apply rounded-b-lg bg-gradient-to-t from-background to-background; 178 | } 179 | 180 | .cl-signIn-start, 181 | .cl-signUp-start, 182 | .cl-signIn-password, 183 | .cl-signIn-alternativeMethods, 184 | .cl-signIn-emailCode { 185 | @apply rounded-b-none border-b-0; 186 | } 187 | 188 | .cl-cardBox { 189 | @apply rounded-lg shadow-sm; 190 | } 191 | 192 | .cl-socialButtonsBlockButton { 193 | @apply h-10 !border; 194 | } 195 | 196 | .cl-alternativeMethods .cl-alternativeMethodsBlockButton { 197 | @apply h-10 !border border-input text-muted-foreground; 198 | } 199 | 200 | .cl-alternativeMethodsBlockButton { 201 | @apply h-10 !shadow-none; 202 | } 203 | 204 | .cl-navbar { 205 | @apply rounded-lg border-y border-l bg-gradient-to-t from-background to-background; 206 | } 207 | 208 | .cl-scrollBox { 209 | @apply rounded-lg rounded-l-none border border-input bg-gradient-to-t from-background to-background; 210 | } 211 | 212 | h1[data-localization-key='userProfile.navbar.title'] { 213 | @apply text-foreground; 214 | } 215 | 216 | .cl-profilePage > .cl-header { 217 | @apply border-b; 218 | } 219 | 220 | .cl-profileSection__profile, 221 | .cl-profileSection__emailAddresses { 222 | @apply border-b; 223 | } 224 | 225 | .cl-menuButton { 226 | @apply text-foreground hover:text-foreground; 227 | } 228 | 229 | .cl-menuList { 230 | @apply border border-input bg-background; 231 | } 232 | 233 | .cl-actionCard { 234 | @apply border border-input bg-background; 235 | } 236 | 237 | .cl-menuItem[data-color='neutral'] { 238 | @apply text-foreground hover:bg-muted; 239 | } 240 | 241 | .cl-avatarImageActionsUpload { 242 | @apply !border border-input text-foreground; 243 | } 244 | 245 | .cl-userButtonPopoverMain { 246 | @apply rounded-lg border-input bg-background; 247 | } 248 | 249 | .cl-navbarMobileMenuRow { 250 | @apply rounded-lg border-x border-t bg-gradient-to-t from-background to-background; 251 | } 252 | 253 | .cl-navbarMobileMenuButton { 254 | @apply text-foreground; 255 | } 256 | 257 | ``` 258 | 259 | # Clerk Core 1 260 | ### For older version 261 | 2. Copy and paste the following code into your global CSS file, and you're good to go! 262 | ```css 263 | .cl-formButtonPrimary { 264 | @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50; 265 | } 266 | 267 | .cl-card, 268 | .cl-socialButtonsBlockButton, 269 | .cl-alert, 270 | .cl-identityPreview, 271 | .cl-phoneInputBox, 272 | .cl-userButtonPopoverCard { 273 | @apply border border-input bg-background; 274 | } 275 | 276 | .cl-headerTitle, 277 | .cl-socialButtonsBlockButtonText, 278 | .cl-loading, 279 | .cl-formFieldLabel, 280 | .cl-formHeaderTitle, 281 | .cl-selectButton__countryCode, 282 | .cl-selectButton__countryCode p, 283 | .cl-selectOption p, 284 | .cl-selectOption div, 285 | .cl-modalCloseButton, 286 | .cl-navbarButton, 287 | .cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage, 288 | .cl-profileSectionTitle p, 289 | .cl-userPreviewTextContainer, 290 | .cl-profileSectionContent p, 291 | .cl-form p, 292 | .cl-accordionTriggerButton { 293 | @apply dark:text-foreground; 294 | } 295 | 296 | .cl-headerSubtitle, 297 | .cl-dividerText, 298 | .cl-footerActionText, 299 | .cl-alertText, 300 | .cl-formFieldInfoText, 301 | .cl-formFieldSuccessText, 302 | .cl-identityPreviewText, 303 | .cl-userButtonPopoverActionButton, 304 | .cl-userButtonPopoverActionButton svg, 305 | .cl-userButtonPopoverActionButtonText, 306 | .cl-userButtonPopoverFooter p, 307 | .cl-userButtonPopoverFooter a, 308 | .cl-formHeaderSubtitle, 309 | .cl-breadcrumbsItem, 310 | .cl-breadcrumbsItemDivider, 311 | .cl-fileDropAreaHint, 312 | .cl-fileDropAreaFooterHint, 313 | .cl-form 314 | p[data-localization-key='userProfile.emailAddressPage.emailCode.formHint'], 315 | p[data-localization-key='userProfile.profilePage.successMessage'] { 316 | @apply text-muted-foreground; 317 | } 318 | 319 | .cl-dividerLine { 320 | @apply bg-border; 321 | } 322 | 323 | .cl-formFieldInput[type='text'], 324 | .cl-formFieldInput[type='email'], 325 | .cl-formFieldInput[type='password'] { 326 | @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 327 | } 328 | 329 | .cl-footerActionLink { 330 | @apply text-accent-foreground underline hover:text-accent-foreground/90; 331 | } 332 | 333 | .cl-otpCodeFieldInput { 334 | @apply border border-b-input text-foreground; 335 | } 336 | 337 | .cl-formResendCodeLink { 338 | @apply text-primary disabled:opacity-90; 339 | } 340 | 341 | .cl-selectSearchInput__countryCode { 342 | @apply flex h-10 w-full rounded-md border border-b border-input bg-background text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 343 | } 344 | 345 | .cl-selectOptionsContainer__countryCode { 346 | @apply border border-input bg-background; 347 | } 348 | 349 | .cl-internal-icon, 350 | .cl-userPreviewSecondaryIdentifier__userButton { 351 | @apply text-foreground; 352 | } 353 | 354 | .cl-profileSectionTitle { 355 | @apply border-b border-input; 356 | } 357 | 358 | button[data-localization-key='userProfile.start.dangerSection.deleteAccountButton'] { 359 | @apply bg-destructive text-destructive-foreground hover:bg-destructive/90; 360 | } 361 | 362 | .cl-fileDropAreaBox { 363 | @apply dark:bg-gray-900; 364 | } 365 | 366 | .cl-fileDropAreaIconBox { 367 | @apply dark:bg-gray-800; 368 | } 369 | 370 | .cl-fileDropAreaIcon { 371 | @apply dark:text-gray-400; 372 | } 373 | 374 | .cl-fileDropAreaButtonPrimary { 375 | @apply h-10 px-4 py-2 text-foreground transition-colors hover:bg-secondary hover:text-accent-foreground; 376 | } 377 | 378 | .cl-userButtonPopoverActionButton, 379 | .cl-profileSectionPrimaryButton, 380 | .cl-accordionTriggerButton, 381 | .cl-navbarButton { 382 | @apply hover:bg-accent hover:text-accent-foreground; 383 | } 384 | 385 | .cl-card { 386 | @apply rounded-lg shadow-md; 387 | } 388 | 389 | .cl-userButtonPopoverCard { 390 | @apply rounded-md; 391 | } 392 | 393 | .cl-userButtonPopoverFooter a { 394 | @apply hover:text-muted-foreground; 395 | } 396 | 397 | .cl-badge { 398 | @apply rounded-full px-2.5 py-0.5 text-xs; 399 | } 400 | 401 | .cl-badge[data-localization-key='badge__unverified'] { 402 | @apply border bg-transparent text-destructive dark:text-red-500; 403 | } 404 | 405 | .cl-formButtonReset { 406 | @apply text-foreground hover:bg-secondary; 407 | } 408 | 409 | 410 | ``` 411 | If you encounter any issues with the theme, please create an issue, and I'll gladly address it. 412 | -------------------------------------------------------------------------------- /styles-core-1.css: -------------------------------------------------------------------------------- 1 | .cl-formButtonPrimary { 2 | @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50; 3 | } 4 | 5 | .cl-card, 6 | .cl-socialButtonsBlockButton, 7 | .cl-alert, 8 | .cl-identityPreview, 9 | .cl-phoneInputBox, 10 | .cl-userButtonPopoverCard { 11 | @apply border border-input bg-background; 12 | } 13 | 14 | .cl-headerTitle, 15 | .cl-socialButtonsBlockButtonText, 16 | .cl-loading, 17 | .cl-formFieldLabel, 18 | .cl-formHeaderTitle, 19 | .cl-selectButton__countryCode, 20 | .cl-selectButton__countryCode p, 21 | .cl-selectOption p, 22 | .cl-selectOption div, 23 | .cl-modalCloseButton, 24 | .cl-navbarButton, 25 | .cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage, 26 | .cl-profileSectionTitle p, 27 | .cl-userPreviewTextContainer, 28 | .cl-profileSectionContent p, 29 | .cl-form p, 30 | .cl-accordionTriggerButton { 31 | @apply dark:text-foreground; 32 | } 33 | 34 | .cl-headerSubtitle, 35 | .cl-dividerText, 36 | .cl-footerActionText, 37 | .cl-alertText, 38 | .cl-formFieldInfoText, 39 | .cl-formFieldSuccessText, 40 | .cl-identityPreviewText, 41 | .cl-userButtonPopoverActionButton, 42 | .cl-userButtonPopoverActionButton svg, 43 | .cl-userButtonPopoverActionButtonText, 44 | .cl-userButtonPopoverFooter p, 45 | .cl-userButtonPopoverFooter a, 46 | .cl-formHeaderSubtitle, 47 | .cl-breadcrumbsItem, 48 | .cl-breadcrumbsItemDivider, 49 | .cl-fileDropAreaHint, 50 | .cl-fileDropAreaFooterHint, 51 | .cl-form 52 | p[data-localization-key='userProfile.emailAddressPage.emailCode.formHint'], 53 | p[data-localization-key='userProfile.profilePage.successMessage'] { 54 | @apply text-muted-foreground; 55 | } 56 | 57 | .cl-dividerLine { 58 | @apply bg-border; 59 | } 60 | 61 | .cl-formFieldInput[type='text'], 62 | .cl-formFieldInput[type='email'], 63 | .cl-formFieldInput[type='password'] { 64 | @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 65 | } 66 | 67 | .cl-footerActionLink { 68 | @apply text-accent-foreground underline hover:text-accent-foreground/90; 69 | } 70 | 71 | .cl-otpCodeFieldInput { 72 | @apply border border-b-input text-foreground; 73 | } 74 | 75 | .cl-formResendCodeLink { 76 | @apply text-primary disabled:opacity-90; 77 | } 78 | 79 | .cl-selectSearchInput__countryCode { 80 | @apply flex h-10 w-full rounded-md border border-b border-input bg-background text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 81 | } 82 | 83 | .cl-selectOptionsContainer__countryCode { 84 | @apply border border-input bg-background; 85 | } 86 | 87 | .cl-internal-icon, 88 | .cl-userPreviewSecondaryIdentifier__userButton { 89 | @apply text-foreground; 90 | } 91 | 92 | .cl-profileSectionTitle { 93 | @apply border-b border-input; 94 | } 95 | 96 | button[data-localization-key='userProfile.start.dangerSection.deleteAccountButton'] { 97 | @apply bg-destructive text-destructive-foreground hover:bg-destructive/90; 98 | } 99 | 100 | .cl-fileDropAreaBox { 101 | @apply dark:bg-gray-900; 102 | } 103 | 104 | .cl-fileDropAreaIconBox { 105 | @apply dark:bg-gray-800; 106 | } 107 | 108 | .cl-fileDropAreaIcon { 109 | @apply dark:text-gray-400; 110 | } 111 | 112 | .cl-fileDropAreaButtonPrimary { 113 | @apply h-10 px-4 py-2 text-foreground transition-colors hover:bg-secondary hover:text-accent-foreground; 114 | } 115 | 116 | .cl-userButtonPopoverActionButton, 117 | .cl-profileSectionPrimaryButton, 118 | .cl-accordionTriggerButton, 119 | .cl-navbarButton { 120 | @apply hover:bg-accent hover:text-accent-foreground; 121 | } 122 | 123 | .cl-card { 124 | @apply rounded-lg shadow-md; 125 | } 126 | 127 | .cl-userButtonPopoverCard { 128 | @apply rounded-md; 129 | } 130 | 131 | .cl-userButtonPopoverFooter a { 132 | @apply hover:text-muted-foreground; 133 | } 134 | 135 | .cl-badge { 136 | @apply rounded-full px-2.5 py-0.5 text-xs; 137 | } 138 | 139 | .cl-badge[data-localization-key='badge__unverified'] { 140 | @apply border bg-transparent text-destructive dark:text-red-500; 141 | } 142 | 143 | .cl-formButtonReset { 144 | @apply text-foreground hover:bg-secondary; 145 | } 146 | -------------------------------------------------------------------------------- /styles-core-2.css: -------------------------------------------------------------------------------- 1 | .cl-formButtonPrimary { 2 | @apply inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md bg-primary px-3 font-medium text-primary-foreground !shadow-none ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50; 3 | } 4 | 5 | .cl-card, 6 | .cl-socialButtonsBlockButton, 7 | .cl-alert, 8 | .cl-phoneInputBox, 9 | .cl-userButtonPopoverCard { 10 | @apply rounded-lg border border-input bg-background; 11 | } 12 | 13 | .cl-headerTitle, 14 | .cl-socialButtonsBlockButtonText, 15 | .cl-loading, 16 | .cl-formFieldLabel, 17 | .cl-formHeaderTitle, 18 | .cl-selectButton__countryCode, 19 | .cl-selectButton__countryCode p, 20 | .cl-selectOption p, 21 | .cl-selectOption div, 22 | .cl-modalCloseButton, 23 | .cl-navbarButton, 24 | .cl-breadcrumbsItem.cl-breadcrumbsItem__currentPage, 25 | .cl-profileSectionTitle p, 26 | .cl-userPreviewTextContainer, 27 | .cl-profileSectionContent p, 28 | .cl-form p, 29 | .cl-accordionTriggerButton { 30 | @apply dark:text-foreground; 31 | } 32 | 33 | .cl-headerSubtitle, 34 | .cl-dividerText, 35 | .cl-footerActionText, 36 | .cl-alertText, 37 | .cl-formFieldInfoText, 38 | .cl-formFieldSuccessText, 39 | .cl-identityPreviewText, 40 | .cl-userButtonPopoverActionButton, 41 | .cl-userButtonPopoverActionButton svg, 42 | .cl-userButtonPopoverActionButtonText, 43 | .cl-userButtonPopoverFooter p, 44 | .cl-userButtonPopoverFooter a, 45 | .cl-formHeaderSubtitle, 46 | .cl-breadcrumbsItem, 47 | .cl-breadcrumbsItemDivider, 48 | .cl-fileDropAreaHint, 49 | .cl-fileDropAreaFooterHint, 50 | .cl-form 51 | p[data-localization-key='userProfile.emailAddressPage.emailCode.formHint'], 52 | p[data-localization-key='userProfile.profilePage.successMessage'] { 53 | @apply text-muted-foreground; 54 | } 55 | 56 | .cl-dividerLine { 57 | @apply bg-border; 58 | } 59 | 60 | .cl-formFieldInput[type='text'], 61 | .cl-formFieldInput[type='email'], 62 | .cl-formFieldInput[type='password'] { 63 | @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 64 | } 65 | 66 | .cl-footerActionLink { 67 | @apply text-accent-foreground underline hover:text-accent-foreground/90; 68 | } 69 | 70 | .cl-otpCodeFieldInput { 71 | @apply !border !border-input text-foreground; 72 | } 73 | 74 | .cl-formResendCodeLink { 75 | @apply text-primary disabled:opacity-90; 76 | } 77 | 78 | .cl-selectSearchInput__countryCode { 79 | @apply flex h-10 w-full rounded-md border border-b border-input bg-background text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50; 80 | } 81 | 82 | .cl-selectOptionsContainer__countryCode { 83 | @apply border border-input bg-background; 84 | } 85 | 86 | .cl-internal-icon, 87 | .cl-userPreviewSecondaryIdentifier__userButton { 88 | @apply text-foreground; 89 | } 90 | 91 | button[data-localization-key='userProfile.start.dangerSection.deleteAccountButton'] { 92 | @apply bg-destructive text-destructive-foreground hover:bg-destructive/90; 93 | } 94 | 95 | .cl-fileDropAreaBox { 96 | @apply dark:bg-gray-900; 97 | } 98 | 99 | .cl-fileDropAreaIconBox { 100 | @apply dark:bg-gray-800; 101 | } 102 | 103 | .cl-fileDropAreaIcon { 104 | @apply dark:text-gray-400; 105 | } 106 | 107 | .cl-fileDropAreaButtonPrimary { 108 | @apply h-10 px-4 py-2 text-foreground transition-colors hover:bg-secondary hover:text-accent-foreground; 109 | } 110 | 111 | .cl-userButtonPopoverActionButton, 112 | .cl-profileSectionPrimaryButton, 113 | .cl-accordionTriggerButton, 114 | .cl-navbarButton { 115 | @apply hover:bg-accent hover:text-accent-foreground; 116 | } 117 | 118 | .cl-card { 119 | @apply rounded-lg shadow-md; 120 | } 121 | 122 | .cl-userButtonPopoverCard { 123 | @apply rounded-md; 124 | } 125 | 126 | .cl-userButtonPopoverFooter a { 127 | @apply hover:text-muted-foreground; 128 | } 129 | 130 | .cl-badge { 131 | @apply rounded-full border border-input bg-background px-2.5 py-0.5 text-xs text-foreground !shadow-none; 132 | } 133 | 134 | .cl-badge[data-localization-key='badge__unverified'] { 135 | @apply border bg-transparent text-destructive dark:text-red-500; 136 | } 137 | 138 | .cl-formButtonReset { 139 | @apply text-foreground hover:bg-secondary; 140 | } 141 | 142 | .cl-footer { 143 | @apply rounded-b-lg border-x border-b bg-background bg-gradient-to-t from-background to-background text-muted-foreground; 144 | } 145 | .cl-userButtonPopoverFooter { 146 | @apply rounded-b-lg bg-gradient-to-t from-background to-background; 147 | } 148 | 149 | .cl-signIn-start, 150 | .cl-signUp-start, 151 | .cl-signIn-password, 152 | .cl-signIn-alternativeMethods, 153 | .cl-signIn-emailCode { 154 | @apply rounded-b-none border-b-0; 155 | } 156 | 157 | .cl-cardBox { 158 | @apply rounded-lg shadow-sm; 159 | } 160 | 161 | .cl-socialButtonsBlockButton { 162 | @apply h-10 !border; 163 | } 164 | 165 | .cl-alternativeMethods .cl-alternativeMethodsBlockButton { 166 | @apply h-10 !border border-input text-muted-foreground; 167 | } 168 | 169 | .cl-alternativeMethodsBlockButton { 170 | @apply h-10 !shadow-none; 171 | } 172 | 173 | .cl-navbar { 174 | @apply rounded-lg border-y border-l bg-gradient-to-t from-background to-background; 175 | } 176 | 177 | .cl-scrollBox { 178 | @apply rounded-lg rounded-l-none border border-input bg-gradient-to-t from-background to-background; 179 | } 180 | 181 | h1[data-localization-key='userProfile.navbar.title'] { 182 | @apply text-foreground; 183 | } 184 | 185 | .cl-profilePage > .cl-header { 186 | @apply border-b; 187 | } 188 | 189 | .cl-profileSection__profile, 190 | .cl-profileSection__emailAddresses { 191 | @apply border-b; 192 | } 193 | 194 | .cl-menuButton { 195 | @apply text-foreground hover:text-foreground; 196 | } 197 | 198 | .cl-menuList { 199 | @apply border border-input bg-background; 200 | } 201 | 202 | .cl-actionCard { 203 | @apply border border-input bg-background; 204 | } 205 | 206 | .cl-menuItem[data-color='neutral'] { 207 | @apply text-foreground hover:bg-muted; 208 | } 209 | 210 | .cl-avatarImageActionsUpload { 211 | @apply !border border-input text-foreground; 212 | } 213 | 214 | .cl-userButtonPopoverMain { 215 | @apply rounded-lg border-input bg-background; 216 | } 217 | 218 | .cl-navbarMobileMenuRow { 219 | @apply rounded-lg border-x border-t bg-gradient-to-t from-background to-background; 220 | } 221 | 222 | .cl-navbarMobileMenuButton { 223 | @apply text-foreground; 224 | } 225 | --------------------------------------------------------------------------------