@maboussoleaidant/design-system 0.1.35 → 0.1.37

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.
@@ -1,4 +1,4 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1
+ /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  @layer theme, base, components, utilities;
4
4
  :root {
@@ -54,6 +54,14 @@
54
54
  --mba-color-pastel-lavender: #EEEDFF;
55
55
  --mba-color-pastel-narcisse: #FFF6E4;
56
56
  --mba-color-pastel-oranger: #FFF2EB;
57
+ --mba-color-pastel-bleuet-dark: #C8DBFF;
58
+ --mba-color-pastel-lavender-dark: #CAC8FF;
59
+ --mba-color-pastel-narcisse-dark: #FFEBC3;
60
+ --mba-color-pastel-oranger-dark: #FFDBC8;
61
+ --mba-color-tag-bleuet: #E0E9F8;
62
+ --mba-color-tag-lavender: #E3E1F8;
63
+ --mba-color-tag-oranger: #FCEAE0;
64
+ --mba-color-tag-narcisse: #F8EEDA;
57
65
  --mba-color-beige: #F9F5F0;
58
66
  --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);
59
67
  --mba-color-background: var(--mba-color-white);
@@ -1979,6 +1987,135 @@ video {
1979
1987
  gap: var(--mba-space-xxs);
1980
1988
  }
1981
1989
  }
1990
+ @layer components {
1991
+ .mba-tab {
1992
+ position: relative;
1993
+ isolation: isolate;
1994
+ display: inline-flex;
1995
+ width: fit-content;
1996
+ height: 38px;
1997
+ padding: var(--mba-space-xs) var(--mba-space-sm);
1998
+ justify-content: center;
1999
+ align-items: center;
2000
+ gap: var(--mba-space-xs);
2001
+ font-family: var(--mba-font-family-text);
2002
+ font-size: var(--mba-font-size-xs);
2003
+ font-weight: var(--mba-font-weight-semibold);
2004
+ line-height: var(--mba-leading-snug);
2005
+ text-decoration: none;
2006
+ border: 1px solid transparent;
2007
+ border-radius: var(--mba-radius-full);
2008
+ cursor: pointer;
2009
+ transition: color var(--mba-transition-base);
2010
+ user-select: none;
2011
+ white-space: nowrap;
2012
+ background-color: transparent;
2013
+ color: var(--mba-color-primary-900);
2014
+ }
2015
+ .mba-tab::before {
2016
+ content: "";
2017
+ position: absolute;
2018
+ inset: 0;
2019
+ z-index: -1;
2020
+ border-radius: inherit;
2021
+ background-color: var(--mba-color-primary-500);
2022
+ transform: scale(0);
2023
+ transform-origin: center;
2024
+ transition: transform var(--mba-transition-base);
2025
+ }
2026
+ .mba-tab.is-active,
2027
+ .mba-tab[aria-pressed="true"],
2028
+ .mba-tab[aria-selected="true"] {
2029
+ color: var(--mba-color-white);
2030
+ }
2031
+ .mba-tab.is-active::before,
2032
+ .mba-tab[aria-pressed="true"]::before,
2033
+ .mba-tab[aria-selected="true"]::before {
2034
+ transform: scale(1);
2035
+ }
2036
+ .mba-tab-partner::before {
2037
+ background-color: var(--mba-color-primary-pro-800);
2038
+ }
2039
+ .mba-tab:disabled,
2040
+ .mba-tab.is-disabled {
2041
+ background-color: var(--mba-color-grey-50);
2042
+ color: var(--mba-color-grey-400);
2043
+ cursor: not-allowed;
2044
+ pointer-events: none;
2045
+ }
2046
+ .mba-tabs {
2047
+ display: flex;
2048
+ flex-wrap: wrap;
2049
+ align-items: center;
2050
+ gap: var(--mba-space-sm);
2051
+ }
2052
+ }
2053
+ @layer components {
2054
+ .mba-tag {
2055
+ display: inline-flex;
2056
+ align-items: center;
2057
+ justify-content: center;
2058
+ gap: var(--mba-space-xxs);
2059
+ width: fit-content;
2060
+ max-width: 100%;
2061
+ padding: var(--mba-space-xxs) var(--mba-space-xs);
2062
+ border-radius: var(--mba-radius-xs);
2063
+ font-family: var(--mba-font-family-text);
2064
+ font-weight: var(--mba-font-weight-semibold);
2065
+ font-size: var(--mba-font-size-xxs);
2066
+ line-height: normal;
2067
+ white-space: nowrap;
2068
+ color: var(--mba-color-grey-800);
2069
+ background-color: var(--mba-color-primary-100);
2070
+ }
2071
+ .mba-tag .material-symbols-rounded {
2072
+ font-size: 16px;
2073
+ flex-shrink: 0;
2074
+ color: inherit;
2075
+ }
2076
+ .mba-tag--sm {
2077
+ font-size: var(--mba-font-size-xxxs);
2078
+ }
2079
+ .mba-tag--rounded {
2080
+ border-radius: var(--mba-radius-md);
2081
+ }
2082
+ .mba-tag--primary {
2083
+ background-color: var(--mba-color-primary-100);
2084
+ color: var(--mba-color-grey-800);
2085
+ }
2086
+ .mba-tag--bleuet {
2087
+ background-color: var(--mba-color-tag-bleuet);
2088
+ color: var(--mba-color-grey-800);
2089
+ }
2090
+ .mba-tag--lavender {
2091
+ background-color: var(--mba-color-tag-lavender);
2092
+ color: var(--mba-color-grey-800);
2093
+ }
2094
+ .mba-tag--oranger {
2095
+ background-color: var(--mba-color-tag-oranger);
2096
+ color: var(--mba-color-grey-800);
2097
+ }
2098
+ .mba-tag--narcisse {
2099
+ background-color: var(--mba-color-tag-narcisse);
2100
+ color: var(--mba-color-grey-800);
2101
+ }
2102
+ .mba-tag--grey {
2103
+ background-color: var(--mba-color-grey-50);
2104
+ color: var(--mba-color-grey-800);
2105
+ }
2106
+ .mba-tag--red {
2107
+ background-color: var(--mba-color-error-100);
2108
+ color: var(--mba-color-error-800);
2109
+ }
2110
+ .mba-tag--green {
2111
+ background-color: var(--mba-color-success-100);
2112
+ color: var(--mba-color-success-800);
2113
+ }
2114
+ .mba-tag--yellow {
2115
+ background-color: var(--mba-color-warning-100);
2116
+ color: var(--mba-color-warning-800);
2117
+ }
2118
+ }
1982
2119
  @layer components {
1983
2120
  .mba-header {
1984
2121
  --mba-header-height: 64px;
@@ -3545,6 +3682,9 @@ video {
3545
3682
  }
3546
3683
  }
3547
3684
  @layer utilities {
3685
+ .\@container {
3686
+ container-type: inline-size;
3687
+ }
3548
3688
  .pointer-events-none {
3549
3689
  pointer-events: none;
3550
3690
  }
@@ -3563,17 +3703,29 @@ video {
3563
3703
  .sticky {
3564
3704
  position: sticky;
3565
3705
  }
3706
+ .-top-lg {
3707
+ top: calc(var(--spacing-lg) * -1);
3708
+ }
3566
3709
  .top-1\/2 {
3567
- top: calc(1/2 * 100%);
3710
+ top: calc(1 / 2 * 100%);
3711
+ }
3712
+ .-right-xl {
3713
+ right: calc(var(--spacing-xl) * -1);
3568
3714
  }
3569
3715
  .right-sm {
3570
3716
  right: var(--spacing-sm);
3571
3717
  }
3718
+ .-bottom-md {
3719
+ bottom: calc(var(--spacing-md) * -1);
3720
+ }
3572
3721
  .bottom-md {
3573
3722
  bottom: var(--spacing-md);
3574
3723
  }
3724
+ .-left-xl {
3725
+ left: calc(var(--spacing-xl) * -1);
3726
+ }
3575
3727
  .left-1\/2 {
3576
- left: calc(1/2 * 100%);
3728
+ left: calc(1 / 2 * 100%);
3577
3729
  }
3578
3730
  .left-sm {
3579
3731
  left: var(--spacing-sm);
@@ -3779,6 +3931,9 @@ video {
3779
3931
  .max-w-\[690px\] {
3780
3932
  max-width: 690px;
3781
3933
  }
3934
+ .max-w-\[738px\] {
3935
+ max-width: 738px;
3936
+ }
3782
3937
  .max-w-lg {
3783
3938
  max-width: var(--max-width-lg);
3784
3939
  }
@@ -3794,6 +3949,9 @@ video {
3794
3949
  .max-w-xs {
3795
3950
  max-width: var(--max-width-xs);
3796
3951
  }
3952
+ .min-w-0 {
3953
+ min-width: var(--spacing-0);
3954
+ }
3797
3955
  .min-w-10 {
3798
3956
  min-width: var(--spacing-10);
3799
3957
  }
@@ -3816,11 +3974,11 @@ video {
3816
3974
  flex: 1;
3817
3975
  }
3818
3976
  .-translate-x-1\/2 {
3819
- --tw-translate-x: calc(calc(1/2 * 100%) * -1);
3977
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
3820
3978
  translate: var(--tw-translate-x) var(--tw-translate-y);
3821
3979
  }
3822
3980
  .-translate-y-1\/2 {
3823
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
3981
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
3824
3982
  translate: var(--tw-translate-x) var(--tw-translate-y);
3825
3983
  }
3826
3984
  .transform {
@@ -3910,6 +4068,9 @@ video {
3910
4068
  .overflow-x-auto {
3911
4069
  overflow-x: auto;
3912
4070
  }
4071
+ .rounded {
4072
+ border-radius: 0.25rem;
4073
+ }
3913
4074
  .rounded-2xs {
3914
4075
  border-radius: var(--radius-2xs);
3915
4076
  }
@@ -4064,6 +4225,9 @@ video {
4064
4225
  background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
4065
4226
  }
4066
4227
  }
4228
+ .object-cover {
4229
+ object-fit: cover;
4230
+ }
4067
4231
  .p-4 {
4068
4232
  padding: var(--spacing-4);
4069
4233
  }
@@ -4203,6 +4367,9 @@ video {
4203
4367
  .whitespace-pre {
4204
4368
  white-space: pre;
4205
4369
  }
4370
+ .whitespace-pre-line {
4371
+ white-space: pre-line;
4372
+ }
4206
4373
  .text-\[var\(--mba-color-primary-900\)\] {
4207
4374
  color: var(--mba-color-primary-900);
4208
4375
  }
@@ -4374,6 +4541,36 @@ video {
4374
4541
  grid-template-columns: repeat(3, minmax(0, 1fr));
4375
4542
  }
4376
4543
  }
4544
+ .\@max-lg\:hidden {
4545
+ @container (width < 32rem) {
4546
+ display: none;
4547
+ }
4548
+ }
4549
+ .\@lg\:flex-1 {
4550
+ @container (width >= 32rem) {
4551
+ flex: 1;
4552
+ }
4553
+ }
4554
+ .\@lg\:flex-\[1\.4\] {
4555
+ @container (width >= 32rem) {
4556
+ flex: 1.4;
4557
+ }
4558
+ }
4559
+ .\@lg\:flex-row {
4560
+ @container (width >= 32rem) {
4561
+ flex-direction: row;
4562
+ }
4563
+ }
4564
+ .\@lg\:items-center {
4565
+ @container (width >= 32rem) {
4566
+ align-items: center;
4567
+ }
4568
+ }
4569
+ .\@lg\:text-left {
4570
+ @container (width >= 32rem) {
4571
+ text-align: left;
4572
+ }
4573
+ }
4377
4574
  }
4378
4575
  @property --tw-translate-x {
4379
4576
  syntax: "*";