@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.
- package/AGENTS.md +2 -0
- package/dist/mba-design-system.css +250 -3
- package/dist/mba-design-system.css.map +1 -1
- package/dist/mba-design-system.min.css +2 -2
- package/dist/mba-tailwind.css +203 -11
- package/dist/mba-tailwind.css.map +1 -1
- package/dist/mba-tailwind.min.css +2 -2
- package/dist/mba-tokens-only.css +11 -0
- package/dist/mba-tokens-only.css.map +1 -1
- package/package.json +1 -1
- package/src/tokens/_colors.css +11 -0
package/dist/mba-tailwind.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.
|
|
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: "*";
|