@maboussoleaidant/design-system 0.1.36 → 0.1.38

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 {
@@ -58,6 +58,10 @@
58
58
  --mba-color-pastel-lavender-dark: #CAC8FF;
59
59
  --mba-color-pastel-narcisse-dark: #FFEBC3;
60
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;
61
65
  --mba-color-beige: #F9F5F0;
62
66
  --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);
63
67
  --mba-color-background: var(--mba-color-white);
@@ -1983,6 +1987,135 @@ video {
1983
1987
  gap: var(--mba-space-xxs);
1984
1988
  }
1985
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
+ }
1986
2119
  @layer components {
1987
2120
  .mba-header {
1988
2121
  --mba-header-height: 64px;
@@ -3051,6 +3184,9 @@ video {
3051
3184
  .mba-accordion--line.mba-accordion--partenaire .mba-accordion__header:hover {
3052
3185
  background-color: transparent;
3053
3186
  }
3187
+ .mba-accordion__panel .mba-accordion--line .mba-accordion__header {
3188
+ border-bottom-style: dashed;
3189
+ }
3054
3190
  .mba-accordion__title-wrapper {
3055
3191
  display: flex;
3056
3192
  align-items: center;
@@ -3097,14 +3233,14 @@ video {
3097
3233
  color: var(--mba-color-primary-900);
3098
3234
  transition: transform var(--mba-transition-base);
3099
3235
  }
3100
- .mba-accordion--open .mba-accordion__icon {
3236
+ .mba-accordion--open > .mba-accordion__header .mba-accordion__icon {
3101
3237
  transform: rotate(180deg);
3102
3238
  }
3103
3239
  .mba-accordion__panel {
3104
3240
  display: none;
3105
3241
  background-color: var(--mba-color-white);
3106
3242
  }
3107
- .mba-accordion--open .mba-accordion__panel {
3243
+ .mba-accordion--open > .mba-accordion__panel {
3108
3244
  display: block;
3109
3245
  }
3110
3246
  .mba-accordion__panel-inner {
@@ -3326,7 +3462,6 @@ video {
3326
3462
  --spacing-lg: var(--mba-space-lg);
3327
3463
  --spacing-xl: var(--mba-space-xl);
3328
3464
  --spacing-xxl: var(--mba-space-xxl);
3329
- --spacing-2: 0.5rem;
3330
3465
  --spacing-4: 1rem;
3331
3466
  --spacing-6: 1.5rem;
3332
3467
  --spacing-8: 2rem;
@@ -3549,6 +3684,9 @@ video {
3549
3684
  }
3550
3685
  }
3551
3686
  @layer utilities {
3687
+ .\@container {
3688
+ container-type: inline-size;
3689
+ }
3552
3690
  .pointer-events-none {
3553
3691
  pointer-events: none;
3554
3692
  }
@@ -3567,17 +3705,29 @@ video {
3567
3705
  .sticky {
3568
3706
  position: sticky;
3569
3707
  }
3708
+ .-top-lg {
3709
+ top: calc(var(--spacing-lg) * -1);
3710
+ }
3570
3711
  .top-1\/2 {
3571
- top: calc(1/2 * 100%);
3712
+ top: calc(1 / 2 * 100%);
3713
+ }
3714
+ .-right-xl {
3715
+ right: calc(var(--spacing-xl) * -1);
3572
3716
  }
3573
3717
  .right-sm {
3574
3718
  right: var(--spacing-sm);
3575
3719
  }
3720
+ .-bottom-md {
3721
+ bottom: calc(var(--spacing-md) * -1);
3722
+ }
3576
3723
  .bottom-md {
3577
3724
  bottom: var(--spacing-md);
3578
3725
  }
3726
+ .-left-xl {
3727
+ left: calc(var(--spacing-xl) * -1);
3728
+ }
3579
3729
  .left-1\/2 {
3580
- left: calc(1/2 * 100%);
3730
+ left: calc(1 / 2 * 100%);
3581
3731
  }
3582
3732
  .left-sm {
3583
3733
  left: var(--spacing-sm);
@@ -3783,6 +3933,9 @@ video {
3783
3933
  .max-w-\[690px\] {
3784
3934
  max-width: 690px;
3785
3935
  }
3936
+ .max-w-\[738px\] {
3937
+ max-width: 738px;
3938
+ }
3786
3939
  .max-w-lg {
3787
3940
  max-width: var(--max-width-lg);
3788
3941
  }
@@ -3798,6 +3951,9 @@ video {
3798
3951
  .max-w-xs {
3799
3952
  max-width: var(--max-width-xs);
3800
3953
  }
3954
+ .min-w-0 {
3955
+ min-width: var(--spacing-0);
3956
+ }
3801
3957
  .min-w-10 {
3802
3958
  min-width: var(--spacing-10);
3803
3959
  }
@@ -3820,11 +3976,11 @@ video {
3820
3976
  flex: 1;
3821
3977
  }
3822
3978
  .-translate-x-1\/2 {
3823
- --tw-translate-x: calc(calc(1/2 * 100%) * -1);
3979
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
3824
3980
  translate: var(--tw-translate-x) var(--tw-translate-y);
3825
3981
  }
3826
3982
  .-translate-y-1\/2 {
3827
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
3983
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
3828
3984
  translate: var(--tw-translate-x) var(--tw-translate-y);
3829
3985
  }
3830
3986
  .transform {
@@ -3914,6 +4070,9 @@ video {
3914
4070
  .overflow-x-auto {
3915
4071
  overflow-x: auto;
3916
4072
  }
4073
+ .rounded {
4074
+ border-radius: 0.25rem;
4075
+ }
3917
4076
  .rounded-2xs {
3918
4077
  border-radius: var(--radius-2xs);
3919
4078
  }
@@ -4068,6 +4227,9 @@ video {
4068
4227
  background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
4069
4228
  }
4070
4229
  }
4230
+ .object-cover {
4231
+ object-fit: cover;
4232
+ }
4071
4233
  .p-4 {
4072
4234
  padding: var(--spacing-4);
4073
4235
  }
@@ -4110,9 +4272,6 @@ video {
4110
4272
  .px-xxs {
4111
4273
  padding-inline: var(--spacing-xxs);
4112
4274
  }
4113
- .py-2 {
4114
- padding-block: var(--spacing-2);
4115
- }
4116
4275
  .py-sm {
4117
4276
  padding-block: var(--spacing-sm);
4118
4277
  }
@@ -4207,6 +4366,9 @@ video {
4207
4366
  .whitespace-pre {
4208
4367
  white-space: pre;
4209
4368
  }
4369
+ .whitespace-pre-line {
4370
+ white-space: pre-line;
4371
+ }
4210
4372
  .text-\[var\(--mba-color-primary-900\)\] {
4211
4373
  color: var(--mba-color-primary-900);
4212
4374
  }
@@ -4378,6 +4540,36 @@ video {
4378
4540
  grid-template-columns: repeat(3, minmax(0, 1fr));
4379
4541
  }
4380
4542
  }
4543
+ .\@max-lg\:hidden {
4544
+ @container (width < 32rem) {
4545
+ display: none;
4546
+ }
4547
+ }
4548
+ .\@lg\:flex-1 {
4549
+ @container (width >= 32rem) {
4550
+ flex: 1;
4551
+ }
4552
+ }
4553
+ .\@lg\:flex-\[1\.4\] {
4554
+ @container (width >= 32rem) {
4555
+ flex: 1.4;
4556
+ }
4557
+ }
4558
+ .\@lg\:flex-row {
4559
+ @container (width >= 32rem) {
4560
+ flex-direction: row;
4561
+ }
4562
+ }
4563
+ .\@lg\:items-center {
4564
+ @container (width >= 32rem) {
4565
+ align-items: center;
4566
+ }
4567
+ }
4568
+ .\@lg\:text-left {
4569
+ @container (width >= 32rem) {
4570
+ text-align: left;
4571
+ }
4572
+ }
4381
4573
  }
4382
4574
  @property --tw-translate-x {
4383
4575
  syntax: "*";