@tempots/beatui 0.78.2 → 0.79.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1485,7 +1485,7 @@ a:focus-visible {
1485
1485
  justify-content: center;
1486
1486
  background-color: var(--color-white);
1487
1487
  border-radius: var(--radius-full);
1488
- padding: calc(var(--spacing-base) * 2);
1488
+ padding: calc(var(--spacing-base) * 1);
1489
1489
  }
1490
1490
 
1491
1491
  .b-dark .bc-social-login-button__icon {
@@ -1509,24 +1509,144 @@ a:focus-visible {
1509
1509
  padding-inline: calc(var(--spacing-base) * 4);
1510
1510
  }
1511
1511
 
1512
+ /* Provider-specific icon backgrounds and colors */
1513
+
1514
+ /* Google - colorful logo needs white background */
1512
1515
  .bc-social-login-button--google .bc-social-login-button__icon {
1513
1516
  background-color: var(--color-white);
1514
1517
  }
1515
1518
 
1519
+ /* GitHub - black icon needs contrasting background */
1516
1520
  .bc-social-login-button--github .bc-social-login-button__icon {
1517
- background-color: var(--color-black);
1521
+ background-color: var(--color-white);
1518
1522
  }
1519
1523
 
1520
- .bc-social-login-button--github .bc-social-login-button__icon-inner {
1521
- color: var(--color-white);
1524
+ /* Apple - black icon needs contrasting background */
1525
+ .bc-social-login-button--apple .bc-social-login-button__icon {
1526
+ background-color: var(--color-white);
1522
1527
  }
1523
1528
 
1524
- .bc-social-login-button--apple .bc-social-login-button__icon {
1529
+ /* X (Twitter rebrand) - black icon needs contrasting background */
1530
+ .bc-social-login-button--x .bc-social-login-button__icon {
1531
+ background-color: var(--color-white);
1532
+ }
1533
+
1534
+ /* Microsoft - colorful logo needs white background */
1535
+ .bc-social-login-button--microsoft .bc-social-login-button__icon {
1536
+ background-color: var(--color-white);
1537
+ }
1538
+
1539
+ /* Steam - dark icon needs contrasting background */
1540
+ .bc-social-login-button--steam .bc-social-login-button__icon {
1541
+ background-color: var(--color-white);
1542
+ }
1543
+
1544
+ /* Epic Games - simple-icons, dark icon on white background */
1545
+ .bc-social-login-button--epic .bc-social-login-button__icon {
1546
+ background-color: var(--color-white);
1547
+ }
1548
+ .bc-social-login-button--epic .bc-social-login-button__icon-inner {
1549
+ color: var(--color-black);
1550
+ }
1551
+
1552
+ /* PlayStation - simple-icons, blue icon on white background */
1553
+ .bc-social-login-button--playstation .bc-social-login-button__icon {
1554
+ background-color: var(--color-white);
1555
+ }
1556
+ .bc-social-login-button--playstation .bc-social-login-button__icon-inner {
1557
+ color: #003791;
1558
+ }
1559
+
1560
+ /* Xbox - simple-icons, green icon on white background */
1561
+ .bc-social-login-button--xbox .bc-social-login-button__icon {
1562
+ background-color: var(--color-white);
1563
+ }
1564
+ .bc-social-login-button--xbox .bc-social-login-button__icon-inner {
1565
+ color: #107c10;
1566
+ }
1567
+
1568
+ /* TikTok - has dark elements that need contrasting background */
1569
+ .bc-social-login-button--tiktok .bc-social-login-button__icon {
1570
+ background-color: var(--color-white);
1571
+ }
1572
+
1573
+ /* Snapchat - simple-icons, yellow icon on black background */
1574
+ .bc-social-login-button--snapchat .bc-social-login-button__icon {
1525
1575
  background-color: var(--color-black);
1526
1576
  }
1577
+ .bc-social-login-button--snapchat .bc-social-login-button__icon-inner {
1578
+ color: #fffc00;
1579
+ }
1527
1580
 
1528
- .bc-social-login-button--apple .bc-social-login-button__icon-inner {
1529
- color: var(--color-white);
1581
+ /* Amazon - simple-icons, orange icon on white background */
1582
+ .bc-social-login-button--amazon .bc-social-login-button__icon {
1583
+ background-color: var(--color-white);
1584
+ }
1585
+ .bc-social-login-button--amazon .bc-social-login-button__icon-inner {
1586
+ color: #ff9900;
1587
+ }
1588
+
1589
+ /* WeChat - simple-icons, green icon on white background */
1590
+ .bc-social-login-button--wechat .bc-social-login-button__icon {
1591
+ background-color: var(--color-white);
1592
+ }
1593
+ .bc-social-login-button--wechat .bc-social-login-button__icon-inner {
1594
+ color: #07c160;
1595
+ }
1596
+
1597
+ /* Yahoo - purple icon needs white background for visibility */
1598
+ .bc-social-login-button--yahoo .bc-social-login-button__icon {
1599
+ background-color: var(--color-white);
1600
+ }
1601
+
1602
+ /* PayPal - blue icon needs white background */
1603
+ .bc-social-login-button--paypal .bc-social-login-button__icon {
1604
+ background-color: var(--color-white);
1605
+ }
1606
+
1607
+ /* Facebook - blue logo needs white background */
1608
+ .bc-social-login-button--facebook .bc-social-login-button__icon {
1609
+ background-color: var(--color-white);
1610
+ }
1611
+
1612
+ /* Twitter - blue bird needs white background */
1613
+ .bc-social-login-button--twitter .bc-social-login-button__icon {
1614
+ background-color: var(--color-white);
1615
+ }
1616
+
1617
+ /* Discord - purple icon works on white background */
1618
+ .bc-social-login-button--discord .bc-social-login-button__icon {
1619
+ background-color: var(--color-white);
1620
+ }
1621
+
1622
+ /* LinkedIn - blue icon needs white background */
1623
+ .bc-social-login-button--linkedin .bc-social-login-button__icon {
1624
+ background-color: var(--color-white);
1625
+ }
1626
+
1627
+ /* Instagram - gradient icon needs white background */
1628
+ .bc-social-login-button--instagram .bc-social-login-button__icon {
1629
+ background-color: var(--color-white);
1630
+ }
1631
+
1632
+ /* Reddit - orange icon needs white background */
1633
+ .bc-social-login-button--reddit .bc-social-login-button__icon {
1634
+ background-color: var(--color-white);
1635
+ }
1636
+
1637
+ /* Pinterest - red icon needs white background */
1638
+ .bc-social-login-button--pinterest .bc-social-login-button__icon {
1639
+ background-color: var(--color-white);
1640
+ }
1641
+
1642
+ /* Twitch - purple icon needs white background */
1643
+ .bc-social-login-button--twitch .bc-social-login-button__icon {
1644
+ background-color: var(--color-white);
1645
+ }
1646
+
1647
+ /* WhatsApp - green icon needs white background */
1648
+ .bc-social-login-button--whatsapp .bc-social-login-button__icon {
1649
+ background-color: var(--color-white);
1530
1650
  }
1531
1651
 
1532
1652
  /* Badge Component */