basecoat-css 0.3.3 → 0.3.5

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.
Files changed (6) hide show
  1. package/dist/basecoat.cdn.css +339 -335
  2. package/dist/basecoat.cdn.min.css +1 -1
  3. package/dist/basecoat.css +122 -118
  4. package/dist/js/all.js +149 -0
  5. package/dist/js/all.min.js +1 -1
  6. package/package.json +3 -1
package/dist/basecoat.cdn.css CHANGED
@@ -767,52 +767,54 @@
767
767
  }
768
768
  }
769
769
  }
770
- .button-group {
771
- isolation: isolate;
772
- display: inline-flex;
773
- width: fit-content;
774
- align-items: stretch;
775
- > *:focus-visible, > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
776
- position: relative;
777
- z-index: 10;
778
- }
779
- > hr[role='separator'] {
780
- margin: calc(var(--spacing) * 0);
781
- height: auto;
782
- width: calc(var(--spacing) * 0);
783
- flex-shrink: 0;
784
- align-self: stretch;
785
- border-style: var(--tw-border-style);
786
- border-width: 1px;
787
- border-color: var(--color-input);
788
- }
789
- &:not([data-orientation='vertical']) {
790
- > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
791
- border-top-left-radius: 0;
792
- border-bottom-left-radius: 0;
793
- border-left-style: var(--tw-border-style);
794
- border-left-width: 0px;
795
- }
796
- > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
797
- border-top-right-radius: 0;
798
- border-bottom-right-radius: 0;
770
+ @layer components {
771
+ .button-group {
772
+ isolation: isolate;
773
+ display: inline-flex;
774
+ width: fit-content;
775
+ align-items: stretch;
776
+ > *:focus-visible, > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
777
+ position: relative;
778
+ z-index: 10;
799
779
  }
800
- }
801
- &[data-orientation='vertical'] {
802
- flex-direction: column;
803
780
  > hr[role='separator'] {
804
- height: 1px;
805
- width: auto;
781
+ margin: calc(var(--spacing) * 0);
782
+ height: auto;
783
+ width: calc(var(--spacing) * 0);
784
+ flex-shrink: 0;
785
+ align-self: stretch;
786
+ border-style: var(--tw-border-style);
787
+ border-width: 1px;
788
+ border-color: var(--color-input);
806
789
  }
807
- > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
808
- border-top-left-radius: 0;
809
- border-top-right-radius: 0;
810
- border-top-style: var(--tw-border-style);
811
- border-top-width: 0px;
790
+ &:not([data-orientation='vertical']) {
791
+ > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
792
+ border-top-left-radius: 0;
793
+ border-bottom-left-radius: 0;
794
+ border-left-style: var(--tw-border-style);
795
+ border-left-width: 0px;
796
+ }
797
+ > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
798
+ border-top-right-radius: 0;
799
+ border-bottom-right-radius: 0;
800
+ }
812
801
  }
813
- > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
814
- border-bottom-right-radius: 0;
815
- border-bottom-left-radius: 0;
802
+ &[data-orientation='vertical'] {
803
+ flex-direction: column;
804
+ > hr[role='separator'] {
805
+ height: 1px;
806
+ width: auto;
807
+ }
808
+ > *:not(:first-child), > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
809
+ border-top-left-radius: 0;
810
+ border-top-right-radius: 0;
811
+ border-top-style: var(--tw-border-style);
812
+ border-top-width: 0px;
813
+ }
814
+ > *:not(:last-child), > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
815
+ border-bottom-right-radius: 0;
816
+ border-bottom-left-radius: 0;
817
+ }
816
818
  }
817
819
  }
818
820
  }
@@ -2377,258 +2379,204 @@
2377
2379
  }
2378
2380
  }
2379
2381
  }
2380
- .sidebar {
2381
- &:not([data-sidebar-initialized]) {
2382
- @media (width < 48rem) {
2383
- display: none;
2384
- }
2385
- }
2386
- &:not([aria-hidden]), &[aria-hidden=false] {
2387
- @media (width < 48rem) {
2388
- position: fixed;
2389
- }
2390
- @media (width < 48rem) {
2391
- inset: calc(var(--spacing) * 0);
2392
- }
2393
- @media (width < 48rem) {
2394
- z-index: 40;
2395
- }
2396
- @media (width < 48rem) {
2397
- background-color: color-mix(in srgb, #000 50%, transparent);
2398
- @supports (color: color-mix(in lab, red, red)) {
2399
- background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
2382
+ @layer components {
2383
+ .sidebar {
2384
+ &:not([data-sidebar-initialized]) {
2385
+ @media (width < 48rem) {
2386
+ display: none;
2400
2387
  }
2401
2388
  }
2402
- }
2403
- nav {
2404
- position: fixed;
2405
- inset-block: calc(var(--spacing) * 0);
2406
- z-index: 50;
2407
- display: flex;
2408
- width: var(--sidebar-mobile-width);
2409
- flex-direction: column;
2410
- background-color: var(--color-sidebar);
2411
- color: var(--color-sidebar-foreground);
2412
- transition-property: transform, translate, scale, rotate;
2413
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2414
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2415
- --tw-duration: 300ms;
2416
- transition-duration: 300ms;
2417
- --tw-ease: var(--ease-in-out);
2418
- transition-timing-function: var(--ease-in-out);
2419
- @media (width >= 48rem) {
2420
- width: var(--sidebar-width);
2389
+ &:not([aria-hidden]), &[aria-hidden=false] {
2390
+ @media (width < 48rem) {
2391
+ position: fixed;
2392
+ }
2393
+ @media (width < 48rem) {
2394
+ inset: calc(var(--spacing) * 0);
2395
+ }
2396
+ @media (width < 48rem) {
2397
+ z-index: 40;
2398
+ }
2399
+ @media (width < 48rem) {
2400
+ background-color: color-mix(in srgb, #000 50%, transparent);
2401
+ @supports (color: color-mix(in lab, red, red)) {
2402
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
2403
+ }
2404
+ }
2421
2405
  }
2422
- }
2423
- & + * {
2424
- transition-property: margin;
2425
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2426
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2427
- --tw-duration: 300ms;
2428
- transition-duration: 300ms;
2429
- --tw-ease: var(--ease-in-out);
2430
- transition-timing-function: var(--ease-in-out);
2431
- }
2432
- &:not([data-side]), &[data-side=left] {
2433
2406
  nav {
2434
- left: calc(var(--spacing) * 0);
2435
- border-right-style: var(--tw-border-style);
2436
- border-right-width: 1px;
2437
- }
2438
- & + * {
2439
- position: relative;
2407
+ position: fixed;
2408
+ inset-block: calc(var(--spacing) * 0);
2409
+ z-index: 50;
2410
+ display: flex;
2411
+ width: var(--sidebar-mobile-width);
2412
+ flex-direction: column;
2413
+ background-color: var(--color-sidebar);
2414
+ color: var(--color-sidebar-foreground);
2415
+ transition-property: transform, translate, scale, rotate;
2416
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2417
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2418
+ --tw-duration: 300ms;
2419
+ transition-duration: 300ms;
2420
+ --tw-ease: var(--ease-in-out);
2421
+ transition-timing-function: var(--ease-in-out);
2440
2422
  @media (width >= 48rem) {
2441
- margin-left: var(--sidebar-width);
2423
+ width: var(--sidebar-width);
2442
2424
  }
2443
2425
  }
2444
- &[aria-hidden=true] {
2426
+ & + * {
2427
+ transition-property: margin;
2428
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2429
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2430
+ --tw-duration: 300ms;
2431
+ transition-duration: 300ms;
2432
+ --tw-ease: var(--ease-in-out);
2433
+ transition-timing-function: var(--ease-in-out);
2434
+ }
2435
+ &:not([data-side]), &[data-side=left] {
2445
2436
  nav {
2446
- --tw-translate-x: -100%;
2447
- translate: var(--tw-translate-x) var(--tw-translate-y);
2437
+ left: calc(var(--spacing) * 0);
2438
+ border-right-style: var(--tw-border-style);
2439
+ border-right-width: 1px;
2448
2440
  }
2449
2441
  & + * {
2442
+ position: relative;
2450
2443
  @media (width >= 48rem) {
2451
- margin-left: calc(var(--spacing) * 0);
2444
+ margin-left: var(--sidebar-width);
2452
2445
  }
2453
2446
  }
2454
- }
2455
- }
2456
- &[data-side=right] {
2457
- nav {
2458
- right: calc(var(--spacing) * 0);
2459
- border-left-style: var(--tw-border-style);
2460
- border-left-width: 1px;
2461
- }
2462
- & + * {
2463
- position: relative;
2464
- @media (width >= 48rem) {
2465
- margin-right: var(--sidebar-width);
2447
+ &[aria-hidden=true] {
2448
+ nav {
2449
+ --tw-translate-x: -100%;
2450
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2451
+ }
2452
+ & + * {
2453
+ @media (width >= 48rem) {
2454
+ margin-left: calc(var(--spacing) * 0);
2455
+ }
2456
+ }
2466
2457
  }
2467
2458
  }
2468
- &[aria-hidden=true] {
2459
+ &[data-side=right] {
2469
2460
  nav {
2470
- --tw-translate-x: 100%;
2471
- translate: var(--tw-translate-x) var(--tw-translate-y);
2461
+ right: calc(var(--spacing) * 0);
2462
+ border-left-style: var(--tw-border-style);
2463
+ border-left-width: 1px;
2472
2464
  }
2473
2465
  & + * {
2466
+ position: relative;
2474
2467
  @media (width >= 48rem) {
2475
- margin-right: calc(var(--spacing) * 0);
2468
+ margin-right: var(--sidebar-width);
2469
+ }
2470
+ }
2471
+ &[aria-hidden=true] {
2472
+ nav {
2473
+ --tw-translate-x: 100%;
2474
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2475
+ }
2476
+ & + * {
2477
+ @media (width >= 48rem) {
2478
+ margin-right: calc(var(--spacing) * 0);
2479
+ }
2476
2480
  }
2477
2481
  }
2478
2482
  }
2479
- }
2480
- nav {
2481
- > header, > footer {
2482
- display: flex;
2483
- flex-direction: column;
2484
- gap: calc(var(--spacing) * 2);
2485
- padding: calc(var(--spacing) * 2);
2486
- }
2487
- [role=separator] {
2488
- margin-inline: calc(var(--spacing) * 2);
2489
- width: auto;
2490
- border-color: var(--color-sidebar-border);
2491
- }
2492
- > section {
2493
- display: flex;
2494
- min-height: calc(var(--spacing) * 0);
2495
- flex: 1;
2496
- flex-direction: column;
2497
- gap: calc(var(--spacing) * 2);
2498
- overflow-y: auto;
2499
- > [role=group] {
2500
- position: relative;
2483
+ nav {
2484
+ > header, > footer {
2501
2485
  display: flex;
2502
- width: 100%;
2503
- min-width: calc(var(--spacing) * 0);
2504
2486
  flex-direction: column;
2487
+ gap: calc(var(--spacing) * 2);
2505
2488
  padding: calc(var(--spacing) * 2);
2506
2489
  }
2507
- h3 {
2508
- display: flex;
2509
- height: calc(var(--spacing) * 8);
2510
- flex-shrink: 0;
2511
- align-items: center;
2512
- border-radius: var(--radius-md);
2513
- padding-inline: calc(var(--spacing) * 2);
2514
- font-size: var(--text-xs);
2515
- line-height: var(--tw-leading, var(--text-xs--line-height));
2516
- --tw-font-weight: var(--font-weight-medium);
2517
- font-weight: var(--font-weight-medium);
2518
- color: var(--color-sidebar-foreground);
2519
- @supports (color: color-mix(in lab, red, red)) {
2520
- color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
2521
- }
2522
- --tw-ring-color: var(--color-sidebar-ring);
2523
- --tw-outline-style: none;
2524
- outline-style: none;
2525
- @media (forced-colors: active) {
2526
- outline: 2px solid transparent;
2527
- outline-offset: 2px;
2528
- }
2529
- transition-property: margin,opacity;
2530
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2531
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2532
- --tw-duration: 200ms;
2533
- transition-duration: 200ms;
2534
- --tw-ease: linear;
2535
- transition-timing-function: linear;
2536
- &:focus-visible {
2537
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2538
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2539
- }
2540
- &>svg {
2541
- width: calc(var(--spacing) * 4);
2542
- height: calc(var(--spacing) * 4);
2543
- }
2544
- &>svg {
2545
- flex-shrink: 0;
2546
- }
2490
+ [role=separator] {
2491
+ margin-inline: calc(var(--spacing) * 2);
2492
+ width: auto;
2493
+ border-color: var(--color-sidebar-border);
2547
2494
  }
2548
- ul {
2495
+ > section {
2549
2496
  display: flex;
2550
- width: 100%;
2551
- min-width: calc(var(--spacing) * 0);
2497
+ min-height: calc(var(--spacing) * 0);
2498
+ flex: 1;
2552
2499
  flex-direction: column;
2553
- gap: calc(var(--spacing) * 1);
2554
- li {
2500
+ gap: calc(var(--spacing) * 2);
2501
+ overflow-y: auto;
2502
+ > [role=group] {
2555
2503
  position: relative;
2556
- > a, > details > summary {
2557
- display: flex;
2558
- width: 100%;
2559
- align-items: center;
2560
- gap: calc(var(--spacing) * 2);
2561
- overflow: hidden;
2562
- border-radius: var(--radius-md);
2563
- padding: calc(var(--spacing) * 2);
2564
- text-align: left;
2565
- font-size: var(--text-sm);
2566
- line-height: var(--tw-leading, var(--text-sm--line-height));
2567
- --tw-ring-color: var(--color-sidebar-ring);
2568
- --tw-outline-style: none;
2569
- outline-style: none;
2570
- @media (forced-colors: active) {
2571
- outline: 2px solid transparent;
2572
- outline-offset: 2px;
2573
- }
2574
- transition-property: width,height,padding;
2575
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2576
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2577
- &:hover {
2578
- @media (hover: hover) {
2579
- background-color: var(--color-sidebar-accent);
2580
- }
2581
- }
2582
- &:hover {
2583
- @media (hover: hover) {
2584
- color: var(--color-sidebar-accent-foreground);
2585
- }
2586
- }
2587
- &:focus-visible {
2588
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2589
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2590
- }
2591
- &:active {
2592
- background-color: var(--color-sidebar-accent);
2593
- }
2594
- &:active {
2595
- color: var(--color-sidebar-accent-foreground);
2596
- }
2597
- &:disabled {
2598
- pointer-events: none;
2599
- }
2600
- &:disabled {
2601
- opacity: 50%;
2602
- }
2603
- &[aria-disabled="true"] {
2604
- pointer-events: none;
2605
- }
2606
- &[aria-disabled="true"] {
2607
- opacity: 50%;
2608
- }
2609
- &>span:last-child {
2504
+ display: flex;
2505
+ width: 100%;
2506
+ min-width: calc(var(--spacing) * 0);
2507
+ flex-direction: column;
2508
+ padding: calc(var(--spacing) * 2);
2509
+ }
2510
+ h3 {
2511
+ display: flex;
2512
+ height: calc(var(--spacing) * 8);
2513
+ flex-shrink: 0;
2514
+ align-items: center;
2515
+ border-radius: var(--radius-md);
2516
+ padding-inline: calc(var(--spacing) * 2);
2517
+ font-size: var(--text-xs);
2518
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2519
+ --tw-font-weight: var(--font-weight-medium);
2520
+ font-weight: var(--font-weight-medium);
2521
+ color: var(--color-sidebar-foreground);
2522
+ @supports (color: color-mix(in lab, red, red)) {
2523
+ color: color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent);
2524
+ }
2525
+ --tw-ring-color: var(--color-sidebar-ring);
2526
+ --tw-outline-style: none;
2527
+ outline-style: none;
2528
+ @media (forced-colors: active) {
2529
+ outline: 2px solid transparent;
2530
+ outline-offset: 2px;
2531
+ }
2532
+ transition-property: margin,opacity;
2533
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2534
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2535
+ --tw-duration: 200ms;
2536
+ transition-duration: 200ms;
2537
+ --tw-ease: linear;
2538
+ transition-timing-function: linear;
2539
+ &:focus-visible {
2540
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2541
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2542
+ }
2543
+ &>svg {
2544
+ width: calc(var(--spacing) * 4);
2545
+ height: calc(var(--spacing) * 4);
2546
+ }
2547
+ &>svg {
2548
+ flex-shrink: 0;
2549
+ }
2550
+ }
2551
+ ul {
2552
+ display: flex;
2553
+ width: 100%;
2554
+ min-width: calc(var(--spacing) * 0);
2555
+ flex-direction: column;
2556
+ gap: calc(var(--spacing) * 1);
2557
+ li {
2558
+ position: relative;
2559
+ > a, > details > summary {
2560
+ display: flex;
2561
+ width: 100%;
2562
+ align-items: center;
2563
+ gap: calc(var(--spacing) * 2);
2610
2564
  overflow: hidden;
2611
- text-overflow: ellipsis;
2612
- white-space: nowrap;
2613
- }
2614
- &>svg {
2615
- width: calc(var(--spacing) * 4);
2616
- height: calc(var(--spacing) * 4);
2617
- }
2618
- &>svg {
2619
- flex-shrink: 0;
2620
- }
2621
- &[aria-current=page] {
2622
- background-color: var(--color-sidebar-accent);
2623
- }
2624
- &[aria-current=page] {
2625
- --tw-font-weight: var(--font-weight-medium);
2626
- font-weight: var(--font-weight-medium);
2627
- }
2628
- &[aria-current=page] {
2629
- color: var(--color-sidebar-accent-foreground);
2630
- }
2631
- &:not([data-variant]), &[data-variant=default] {
2565
+ border-radius: var(--radius-md);
2566
+ padding: calc(var(--spacing) * 2);
2567
+ text-align: left;
2568
+ font-size: var(--text-sm);
2569
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2570
+ --tw-ring-color: var(--color-sidebar-ring);
2571
+ --tw-outline-style: none;
2572
+ outline-style: none;
2573
+ @media (forced-colors: active) {
2574
+ outline: 2px solid transparent;
2575
+ outline-offset: 2px;
2576
+ }
2577
+ transition-property: width,height,padding;
2578
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2579
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2632
2580
  &:hover {
2633
2581
  @media (hover: hover) {
2634
2582
  background-color: var(--color-sidebar-accent);
@@ -2639,93 +2587,149 @@
2639
2587
  color: var(--color-sidebar-accent-foreground);
2640
2588
  }
2641
2589
  }
2642
- }
2643
- &[data-variant=outline] {
2644
- background-color: var(--color-background);
2645
- --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
2646
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2647
- &:hover {
2648
- @media (hover: hover) {
2649
- background-color: var(--color-sidebar-accent);
2590
+ &:focus-visible {
2591
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2592
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2593
+ }
2594
+ &:active {
2595
+ background-color: var(--color-sidebar-accent);
2596
+ }
2597
+ &:active {
2598
+ color: var(--color-sidebar-accent-foreground);
2599
+ }
2600
+ &:disabled {
2601
+ pointer-events: none;
2602
+ }
2603
+ &:disabled {
2604
+ opacity: 50%;
2605
+ }
2606
+ &[aria-disabled="true"] {
2607
+ pointer-events: none;
2608
+ }
2609
+ &[aria-disabled="true"] {
2610
+ opacity: 50%;
2611
+ }
2612
+ &>span:last-child {
2613
+ overflow: hidden;
2614
+ text-overflow: ellipsis;
2615
+ white-space: nowrap;
2616
+ }
2617
+ &>svg {
2618
+ width: calc(var(--spacing) * 4);
2619
+ height: calc(var(--spacing) * 4);
2620
+ }
2621
+ &>svg {
2622
+ flex-shrink: 0;
2623
+ }
2624
+ &[aria-current=page] {
2625
+ background-color: var(--color-sidebar-accent);
2626
+ }
2627
+ &[aria-current=page] {
2628
+ --tw-font-weight: var(--font-weight-medium);
2629
+ font-weight: var(--font-weight-medium);
2630
+ }
2631
+ &[aria-current=page] {
2632
+ color: var(--color-sidebar-accent-foreground);
2633
+ }
2634
+ &:not([data-variant]), &[data-variant=default] {
2635
+ &:hover {
2636
+ @media (hover: hover) {
2637
+ background-color: var(--color-sidebar-accent);
2638
+ }
2639
+ }
2640
+ &:hover {
2641
+ @media (hover: hover) {
2642
+ color: var(--color-sidebar-accent-foreground);
2643
+ }
2650
2644
  }
2651
2645
  }
2652
- &:hover {
2653
- @media (hover: hover) {
2654
- color: var(--color-sidebar-accent-foreground);
2646
+ &[data-variant=outline] {
2647
+ background-color: var(--color-background);
2648
+ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-border)));
2649
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2650
+ &:hover {
2651
+ @media (hover: hover) {
2652
+ background-color: var(--color-sidebar-accent);
2653
+ }
2654
+ }
2655
+ &:hover {
2656
+ @media (hover: hover) {
2657
+ color: var(--color-sidebar-accent-foreground);
2658
+ }
2659
+ }
2660
+ &:hover {
2661
+ @media (hover: hover) {
2662
+ --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent)));
2663
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2664
+ }
2655
2665
  }
2656
2666
  }
2657
- &:hover {
2658
- @media (hover: hover) {
2659
- --tw-shadow: 0 0 0 1px var(--tw-shadow-color, hsl(var(--sidebar-accent)));
2660
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2667
+ &:not([data-size]), &[data-size=default] {
2668
+ height: calc(var(--spacing) * 8);
2669
+ font-size: var(--text-sm);
2670
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2671
+ }
2672
+ &[data-size=sm] {
2673
+ height: calc(var(--spacing) * 7);
2674
+ font-size: var(--text-xs);
2675
+ line-height: var(--tw-leading, var(--text-xs--line-height));
2676
+ }
2677
+ &[data-size=lg] {
2678
+ height: calc(var(--spacing) * 12);
2679
+ font-size: var(--text-sm);
2680
+ line-height: var(--tw-leading, var(--text-sm--line-height));
2681
+ &:is(:where(.group)[data-collapsible="icon"] *) {
2682
+ padding: calc(var(--spacing) * 0) !important;
2661
2683
  }
2662
2684
  }
2663
2685
  }
2664
- &:not([data-size]), &[data-size=default] {
2665
- height: calc(var(--spacing) * 8);
2666
- font-size: var(--text-sm);
2667
- line-height: var(--tw-leading, var(--text-sm--line-height));
2668
- }
2669
- &[data-size=sm] {
2670
- height: calc(var(--spacing) * 7);
2671
- font-size: var(--text-xs);
2672
- line-height: var(--tw-leading, var(--text-xs--line-height));
2673
- }
2674
- &[data-size=lg] {
2675
- height: calc(var(--spacing) * 12);
2676
- font-size: var(--text-sm);
2677
- line-height: var(--tw-leading, var(--text-sm--line-height));
2678
- &:is(:where(.group)[data-collapsible="icon"] *) {
2679
- padding: calc(var(--spacing) * 0) !important;
2686
+ > details {
2687
+ &:not([open]) {
2688
+ > summary {
2689
+ &::after {
2690
+ rotate: calc(90deg * -1);
2691
+ }
2692
+ }
2680
2693
  }
2681
- }
2682
- }
2683
- > details {
2684
- &:not([open]) {
2685
2694
  > summary {
2686
2695
  &::after {
2687
- rotate: calc(90deg * -1);
2696
+ margin-left: auto;
2697
+ display: block;
2698
+ width: calc(var(--spacing) * 3.5);
2699
+ height: calc(var(--spacing) * 3.5);
2700
+ background-color: var(--color-primary);
2701
+ transition-property: transform, translate, scale, rotate;
2702
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2703
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
2704
+ --tw-ease: linear;
2705
+ transition-timing-function: linear;
2706
+ --tw-content: '';
2707
+ content: var(--tw-content);
2708
+ mask-image: var(--chevron-down-icon);
2709
+ mask-size: 1rem;
2710
+ mask-position: center;
2711
+ mask-repeat: no-repeat;
2688
2712
  }
2689
2713
  }
2690
- }
2691
- > summary {
2692
- &::after {
2693
- margin-left: auto;
2694
- display: block;
2695
- width: calc(var(--spacing) * 3.5);
2696
- height: calc(var(--spacing) * 3.5);
2697
- background-color: var(--color-primary);
2698
- transition-property: transform, translate, scale, rotate;
2699
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
2700
- transition-duration: var(--tw-duration, var(--default-transition-duration));
2701
- --tw-ease: linear;
2702
- transition-timing-function: linear;
2703
- --tw-content: '';
2704
- content: var(--tw-content);
2705
- mask-image: var(--chevron-down-icon);
2706
- mask-size: 1rem;
2707
- mask-position: center;
2708
- mask-repeat: no-repeat;
2714
+ &::details-content {
2715
+ padding-inline: calc(var(--spacing) * 3.5);
2709
2716
  }
2710
2717
  }
2711
- &::details-content {
2712
- padding-inline: calc(var(--spacing) * 3.5);
2713
- }
2714
2718
  }
2715
- }
2716
- ul {
2717
- display: flex;
2718
- width: 100%;
2719
- min-width: calc(var(--spacing) * 0);
2720
- --tw-translate-x: 1px;
2721
- translate: var(--tw-translate-x) var(--tw-translate-y);
2722
- flex-direction: column;
2723
- gap: calc(var(--spacing) * 1);
2724
- border-left-style: var(--tw-border-style);
2725
- border-left-width: 1px;
2726
- border-color: var(--color-sidebar-border);
2727
- padding-inline: calc(var(--spacing) * 2.5);
2728
- padding-block: calc(var(--spacing) * 0.5);
2719
+ ul {
2720
+ display: flex;
2721
+ width: 100%;
2722
+ min-width: calc(var(--spacing) * 0);
2723
+ --tw-translate-x: 1px;
2724
+ translate: var(--tw-translate-x) var(--tw-translate-y);
2725
+ flex-direction: column;
2726
+ gap: calc(var(--spacing) * 1);
2727
+ border-left-style: var(--tw-border-style);
2728
+ border-left-width: 1px;
2729
+ border-color: var(--color-sidebar-border);
2730
+ padding-inline: calc(var(--spacing) * 2.5);
2731
+ padding-block: calc(var(--spacing) * 0.5);
2732
+ }
2729
2733
  }
2730
2734
  }
2731
2735
  }