@axa-fr/design-system-apollo-css 1.0.3-ci.116

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 (24) hide show
  1. package/dist/Button/ButtonApollo.css +1 -0
  2. package/dist/Button/ButtonApollo.css.map +1 -0
  3. package/dist/Button/ButtonApollo.scss +153 -0
  4. package/dist/Button/ButtonCommon.css +1 -0
  5. package/dist/Button/ButtonCommon.css.map +1 -0
  6. package/dist/Button/ButtonCommon.scss +62 -0
  7. package/dist/Button/ButtonLF.css +1 -0
  8. package/dist/Button/ButtonLF.css.map +1 -0
  9. package/dist/Button/ButtonLF.scss +158 -0
  10. package/dist/Loader/Loader.css +1 -0
  11. package/dist/Loader/Loader.css.map +1 -0
  12. package/dist/Loader/Loader.scss +39 -0
  13. package/dist/apollo.css +1 -0
  14. package/dist/apollo.css.map +1 -0
  15. package/dist/apollo.scss +2 -0
  16. package/dist/common/breakpoints.css +0 -0
  17. package/dist/common/breakpoints.scss +5 -0
  18. package/dist/common/tokens.css +1 -0
  19. package/dist/common/tokens.css.map +1 -0
  20. package/dist/common/tokens.scss +101 -0
  21. package/dist/look-and-feel.css +1 -0
  22. package/dist/look-and-feel.css.map +1 -0
  23. package/dist/look-and-feel.scss +2 -0
  24. package/package.json +69 -0
package/dist/Button/ButtonApollo.css ADDED
@@ -0,0 +1 @@
1
+ .af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-radius:var(--radius-32);--button-shadow-color:var(--axa-blue-100);--button-padding:calc(12/var(--font-size-base)*1rem) calc(16/var(--font-size-base)*1rem);--button-line-height:calc(24/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-padding:calc(12/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem);--button-line-height:calc(32/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--axa-blue-120)}.af-btn-client:active{--button-bg-color-default:var(--axa-blue-80)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--axa-blue-65)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--neutral-50);--button-shadow-color:var(--neutral-50)}.af-btn-client--primary-business{--button-bg-color-default:var(--warning-100);--button-text-color-default:var(--white)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible,.af-btn-client--primary-business:hover{--button-bg-color-default:var(--warning-120)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.af-btn-client--ghost:active{--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--axa-blue-120);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--secondary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-80)}.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-120)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-shadow-color:var(--white)}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80);--button-shadow-color:var(--neutral-5)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120);--button-shadow-color:var(--neutral-14)}.af-btn-client--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible,.af-btn-client--tertiary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white)}
package/dist/Button/ButtonApollo.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonApollo.scss","../../src/Button/ButtonApollo.scss%23sass"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CCDF,kCAAA,CDUE,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CCXF,6BDEE,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCFF,CDIE,kDAEE,6CAAA,CACA,kBCHJ,CDME,2DAEE,mBCLJ,CDOI,mFACE,YCLN,CDSE,mBACE,cAAA,CACA,iBCPJ,CDUE,sBACE,sCCRJ,CDUI,4FAGE,yBCVN,CDkBE,4DACE,qDCbJ,CCxCA,eACE,6CAAA,CACA,wCAAA,CACA,gCAAA,CACA,yCAAA,CACA,wFAAA,CAEA,wDAAA,CACA,sDD2CF,CCzCE,wBAVF,eAWI,wFAAA,CAEA,wDAAA,CACA,sDD4CF,CACF,CC1CE,qBACE,6CD4CJ,CCzCE,sBACE,4CD2CJ,CCxCE,kDAEE,yCDyCJ,CCtCE,2DAEE,0CAAA,CACA,6CAAA,CACA,uCDuCJ,CCpCE,iCACE,4CAAA,CACA,wCDsCJ,CCpCI,wCACE,2CDsCN,CCnCI,6HAGE,4CDmCN,CC/BE,gCACE,sCAAA,CACA,+CDiCJ,CC/BI,uCACE,0CAAA,CACA,8CDiCN,CC9BI,0HAGE,2CAAA,CACA,+CD8BN,CC1BE,sBACE,+BAAA,CACA,+CAAA,CACA,kBD4BJ,CC1BI,6BACE,8CD4BN,CCzBI,4FAGE,+CAAA,CACA,+BDyBN,CCtBI,yEAEE,+BDuBN,CCnBE,0BACE,sCAAA,CACA,+CDqBJ,CCnBI,iCACE,4CAAA,CACA,wCAAA,CACA,wCDqBN,CClBI,wGAGE,6CAAA,CACA,wCAAA,CACA,yCDkBN,CCdE,kCACE,6CAAA,CACA,wCAAA,CACA,kCDgBJ,CCdI,yCACE,0CAAA,CACA,8CAAA,CACA,sCDgBN,CCbI,gIAGE,2CAAA,CACA,+CAAA,CACA,uCDaN,CCTE,yBACE,2CAAA,CACA,+CDWJ,CCTI,gCACE,4CAAA,CDWN,wCACA,CCRI,qGAGE,6CAAA,CACA,wCDQN","file":"ButtonApollo.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-radius: var(--radius-32);\n --button-shadow-color: var(--axa-blue-100);\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(16 / var(--font-size-base) * 1rem);\n --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--axa-blue-120);\n }\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n }\n\n &:focus-visible,\n &:focus {\n --button-outline-color: var(--axa-blue-65);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--neutral-50);\n --button-shadow-color: var(--neutral-50);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--warning-100);\n --button-text-color-default: var(--white);\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n }\n }\n\n &--ghost {\n --button-bg-color-default: transparent;\n --button-text-color-default: var(--axa-blue-100);\n --button-padding: 0;\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-120);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--white);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n --button-shadow-color: var(--neutral-5);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n --button-shadow-color: var(--neutral-14);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n }\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-radius: var(--radius-32);\n --button-shadow-color: var(--axa-blue-100);\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(16 / var(--font-size-base) * 1rem);\n --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--axa-blue-120);\n }\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n }\n\n &:focus-visible,\n &:focus {\n --button-outline-color: var(--axa-blue-65);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--neutral-50);\n --button-shadow-color: var(--neutral-50);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--warning-100);\n --button-text-color-default: var(--white);\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n }\n }\n\n &--ghost {\n --button-bg-color-default: transparent;\n --button-text-color-default: var(--axa-blue-100);\n --button-padding: 0;\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-120);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--white);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n --button-shadow-color: var(--neutral-5);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n --button-shadow-color: var(--neutral-14);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n }\n }\n}\n"]}
package/dist/Button/ButtonApollo.scss ADDED
@@ -0,0 +1,153 @@
1
+ /* Apollo first and mobile first approch */
2
+
3
+ @use "../common/breakpoints" as breakpoints;
4
+
5
+ @use "./ButtonCommon";
6
+
7
+ .af-btn-client {
8
+ --button-bg-color-default: var(--axa-blue-100);
9
+ --button-text-color-default: var(--white);
10
+ --button-radius: var(--radius-32);
11
+ --button-shadow-color: var(--axa-blue-100);
12
+ --button-padding: calc(12 / var(--font-size-base) * 1rem)
13
+ calc(16 / var(--font-size-base) * 1rem);
14
+ --button-line-height: calc(24 / var(--font-size-base) * 1rem);
15
+ --button-font-size: calc(16 / var(--font-size-base) * 1rem);
16
+
17
+ @media (width > #{breakpoints.$breakpoint-lg}) {
18
+ --button-padding: calc(12 / var(--font-size-base) * 1rem)
19
+ calc(24 / var(--font-size-base) * 1rem);
20
+ --button-line-height: calc(32 / var(--font-size-base) * 1rem);
21
+ --button-font-size: calc(18 / var(--font-size-base) * 1rem);
22
+ }
23
+
24
+ &:hover {
25
+ --button-bg-color-default: var(--axa-blue-120);
26
+ }
27
+
28
+ &:active {
29
+ --button-bg-color-default: var(--axa-blue-80);
30
+ }
31
+
32
+ &:focus-visible,
33
+ &:focus {
34
+ --button-outline-color: var(--axa-blue-65);
35
+ }
36
+
37
+ &:disabled,
38
+ &[aria-disabled="true"] {
39
+ --button-bg-color-default: var(--neutral-5);
40
+ --button-text-color-default: var(--neutral-50);
41
+ --button-shadow-color: var(--neutral-50);
42
+ }
43
+
44
+ &--primary-business {
45
+ --button-bg-color-default: var(--warning-100);
46
+ --button-text-color-default: var(--white);
47
+
48
+ &:active {
49
+ --button-bg-color-default: var(--warning-80);
50
+ }
51
+
52
+ &:hover,
53
+ &:focus,
54
+ &:focus-visible {
55
+ --button-bg-color-default: var(--warning-120);
56
+ }
57
+ }
58
+
59
+ &--primary-inverse {
60
+ --button-bg-color-default: var(--white);
61
+ --button-text-color-default: var(--axa-blue-100);
62
+
63
+ &:active {
64
+ --button-bg-color-default: var(--neutral-5);
65
+ --button-text-color-default: var(--axa-blue-80);
66
+ }
67
+
68
+ &:hover,
69
+ &:focus,
70
+ &:focus-visible {
71
+ --button-bg-color-default: var(--neutral-14);
72
+ --button-text-color-default: var(--axa-blue-120);
73
+ }
74
+ }
75
+
76
+ &--ghost {
77
+ --button-bg-color-default: transparent;
78
+ --button-text-color-default: var(--axa-blue-100);
79
+ --button-padding: 0;
80
+
81
+ &:active {
82
+ --button-text-color-default: var(--axa-blue-80);
83
+ }
84
+
85
+ &:hover,
86
+ &:focus,
87
+ &:focus-visible {
88
+ --button-text-color-default: var(--axa-blue-120);
89
+ --button-bg-color-default: transparent;
90
+ }
91
+
92
+ &:disabled,
93
+ &[aria-disabled="true"] {
94
+ --button-bg-color-default: transparent;
95
+ }
96
+ }
97
+
98
+ &--secondary {
99
+ --button-bg-color-default: var(--white);
100
+ --button-text-color-default: var(--axa-blue-100);
101
+
102
+ &:active {
103
+ --button-bg-color-default: var(--axa-blue-80);
104
+ --button-text-color-default: var(--white);
105
+ --button-shadow-color: var(--axa-blue-80);
106
+ }
107
+
108
+ &:hover,
109
+ &:focus,
110
+ &:focus-visible {
111
+ --button-bg-color-default: var(--axa-blue-120);
112
+ --button-text-color-default: var(--white);
113
+ --button-shadow-color: var(--axa-blue-120);
114
+ }
115
+ }
116
+
117
+ &--secondary-inverse {
118
+ --button-bg-color-default: var(--axa-blue-100);
119
+ --button-text-color-default: var(--white);
120
+ --button-shadow-color: var(--white);
121
+
122
+ &:active {
123
+ --button-bg-color-default: var(--neutral-5);
124
+ --button-text-color-default: var(--axa-blue-80);
125
+ --button-shadow-color: var(--neutral-5);
126
+ }
127
+
128
+ &:hover,
129
+ &:focus,
130
+ &:focus-visible {
131
+ --button-bg-color-default: var(--neutral-14);
132
+ --button-text-color-default: var(--axa-blue-120);
133
+ --button-shadow-color: var(--neutral-14);
134
+ }
135
+ }
136
+
137
+ &--tertiary {
138
+ --button-bg-color-default: var(--axa-blue-8);
139
+ --button-text-color-default: var(--axa-blue-100);
140
+
141
+ &:active {
142
+ --button-bg-color-default: var(--axa-blue-80);
143
+ --button-text-color-default: var(--white);
144
+ }
145
+
146
+ &:hover,
147
+ &:focus,
148
+ &:focus-visible {
149
+ --button-bg-color-default: var(--axa-blue-120);
150
+ --button-text-color-default: var(--white);
151
+ }
152
+ }
153
+ }
package/dist/Button/ButtonCommon.css ADDED
@@ -0,0 +1 @@
1
+ .af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}
package/dist/Button/ButtonCommon.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Button/ButtonCommon.scss%23sass","../../src/Button/ButtonCommon.scss"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CCbF,QAAA,CDIE,kCAAA,CAQA,sCAAA,CCdF,YAAA,CDUE,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCHF,CDKE,kDAEE,6CAAA,CACA,kBCJJ,CDOE,2DAEE,mBCNJ,CDQI,mFACE,YCNN,CDUE,mBACE,cAAA,CACA,iBCRJ,CDWE,sBACE,sCCTJ,CDWI,4FAGE,yBCXN,CDmBE,4DACE,qDCdJ","file":"ButtonCommon.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n"]}
package/dist/Button/ButtonCommon.scss ADDED
@@ -0,0 +1,62 @@
1
+ /* Apollo first and mobile first approch */
2
+
3
+ @use "../common/breakpoints" as breakpoints;
4
+
5
+ .af-btn-client {
6
+ display: flex;
7
+ padding: var(--button-padding);
8
+ border: 0;
9
+ border-radius: var(--button-radius);
10
+ align-items: center;
11
+ justify-content: center;
12
+ gap: 1rem;
13
+ font-family: var(--font-family-base);
14
+ font-size: var(--button-font-size);
15
+ font-weight: 600;
16
+ line-height: var(--button-line-height);
17
+ color: var(--button-text-color-default);
18
+ background-color: var(--button-bg-color-default);
19
+ transition-duration: var(--transition-duration);
20
+ transition-property: width, height, border, color, background-color, outline,
21
+ box-shadow;
22
+ transition-timing-function: linear;
23
+ user-select: none;
24
+
25
+ &:focus-visible,
26
+ &:focus {
27
+ outline: 2px solid var(--button-outline-color);
28
+ outline-offset: 3px;
29
+ }
30
+
31
+ &:disabled,
32
+ &[aria-disabled="true"] {
33
+ pointer-events: none;
34
+
35
+ & > [aria-live] {
36
+ margin: unset;
37
+ }
38
+ }
39
+
40
+ & > svg {
41
+ aspect-ratio: 1;
42
+ fill: currentcolor;
43
+ }
44
+
45
+ &--ghost {
46
+ gap: calc(4 / var(--font-size-base) * 1rem);
47
+
48
+ &:hover,
49
+ &:focus,
50
+ &:focus-visible {
51
+ text-decoration: underline;
52
+ }
53
+ }
54
+
55
+ &--secondary {
56
+ box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
57
+ }
58
+
59
+ &--secondary-inverse {
60
+ box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
61
+ }
62
+ }
package/dist/Button/ButtonLF.css ADDED
@@ -0,0 +1 @@
1
+ .af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-radius:var(--radius-8);--button-shadow-color:var(--color-axa);--button-padding:calc(16/var(--font-size-base)*1rem) calc(61.5/var(--font-size-base)*1rem);--button-line-height:calc(20/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-line-height:calc(22.5/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus,.af-btn-client:focus-visible{--button-bg-color-default:var(--color-btn-light)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--color-blue-3)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--color-gray-300);--button-text-color-default:var(--color-gray-500);--button-shadow-color:var(--color-gray-500)}.af-btn-client--primary-business{--button-bg-color-default:var(--color-btn-business)}.af-btn-client--primary-business:active,.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible{--button-bg-color-default:var(--color-btn-business-light)}.af-btn-client--primary-business:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-inverse{--button-text-color-default:var(--color-axa);--button-bg-color-default:var(--color-white)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1)}.af-btn-client--ghost{--button-text-color-default:var(--color-axa);--button-bg-color-default:#0000;--button-padding:0}@media (width > 1279px){.af-btn-client--ghost{--button-font-size:calc(16/var(--font-size-base)*1rem)}}.af-btn-client--ghost:active{--button-text-color-default:var(--color-btn-light)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--color-blue-1);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-axa);--button-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--button-shadow-color) inset}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1);box-shadow:0 0 0 2px var(--color-blue-1) inset}.af-btn-client--secondary:active{--button-bg-color-default:var(--color-blue-2)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-shadow-color:var(--color-white);box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--color-gray-200);--button-text-color-default:var(--color-btn-light);--button-shadow-color:var(--color-gray-200)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--color-gray-400);--button-text-color-default:var(--color-blue-1);--button-shadow-color:var(--color-gray-400)}.af-btn-client--tertiary{--button-bg-color-default:var(--color-btn-tertiary-bg);--button-text-color-default:var(--color-axa)}.af-btn-client--tertiary:hover{--button-bg-color-default:var(--color-btn-tertiary-bg-darker)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}
package/dist/Button/ButtonLF.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Button/ButtonCommon.scss","../../src/Button/ButtonLF.scss","../../src/Button/ButtonLF.scss%23sass"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CCbF,QAAA,CDIE,kCAAA,CAQA,sCAAA,CCdF,YAAA,CDUE,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCHF,CDKE,kDAEE,6CAAA,CACA,kBCJJ,CDOE,2DAEE,mBCNJ,CDQI,mFACE,YCNN,CDUE,mBACE,cAAA,CACA,iBCRJ,CDWE,sBACE,sCCTJ,CDWI,4FAGE,yBCXN,CDeE,0BACE,qDCbJ,CCtCA,eACE,0CAAA,CACA,8CAAA,CACA,+BAAA,CACA,sCAAA,CACA,0FAAA,CAEA,wDAAA,CACA,sDD4CF,CC1CE,wBAVF,eAWI,0DAAA,CACA,sDD6CF,CACF,CC3CE,qBACE,6CD6CJ,CC1CE,wEAGE,gDD0CJ,CCvCE,kDAEE,0CDwCJ,CCrCE,2DAEE,+CAAA,CACA,iDAAA,CACA,2CDsCJ,CCnCE,iCACE,mDDqCJ,CCnCI,8HAGE,yDDmCN,CChCI,uCACE,wDDkCN,CC9BE,gCACE,4CAAA,CACA,4CDgCJ,CC9BI,uCACE,4CAAA,CACA,2DDgCN,CC7BI,0HAGE,4CAAA,CACA,+CD6BN,CCzBE,sBACE,4CAAA,CACA,+BAAA,CACA,kBD2BJ,CCzBI,wBALF,sBAMI,sDD4BJ,CACF,CC1BI,6BACE,kDD4BN,CCzBI,4FAGE,+CAAA,CACA,+BDyBN,CCtBI,yEAEE,+BDuBN,CCnBE,0BACE,4CAAA,CACA,4CAAA,CACA,sCAAA,CAEA,qDDoBJ,CClBI,yIAIE,4CAAA,CACA,+CAAA,CAEA,8CDgBN,CCbI,iCACE,6CDeN,CCXE,kCACE,0CAAA,CACA,8CAAA,CACA,wCAAA,CAEA,qDDYJ,CCVI,yCACE,+CAAA,CACA,kDAAA,CACA,2CDYN,CCTI,gIAGE,+CAAA,CACA,+CAAA,CACA,2CDSN,CCLE,yBACE,sDAAA,CACA,4CDOJ,CCLI,+BACE,6DDON,CCJI,sGAGE,8DAAA,CDIN,4CACA","file":"ButtonLF.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-radius: var(--radius-8);\n --button-shadow-color: var(--color-axa);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(61.5 / var(--font-size-base) * 1rem);\n --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-light);\n }\n\n &:focus,\n &:focus-visible {\n --button-outline-color: var(--color-blue-3);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--color-gray-300);\n --button-text-color-default: var(--color-gray-500);\n --button-shadow-color: var(--color-gray-500);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--color-btn-business);\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\n\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n }\n }\n\n &--ghost {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: transparent;\n --button-padding: 0;\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-axa);\n --button-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n &:hover,\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n --button-bg-color-default: var(--color-blue-2);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-shadow-color: var(--color-white);\n\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n &:active {\n --button-bg-color-default: var(--color-gray-200);\n --button-text-color-default: var(--color-btn-light);\n --button-shadow-color: var(--color-gray-200);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-gray-400);\n --button-text-color-default: var(--color-blue-1);\n --button-shadow-color: var(--color-gray-400);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--color-btn-tertiary-bg);\n --button-text-color-default: var(--color-axa);\n\n &:hover {\n --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-radius: var(--radius-8);\n --button-shadow-color: var(--color-axa);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(61.5 / var(--font-size-base) * 1rem);\n --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-light);\n }\n\n &:focus,\n &:focus-visible {\n --button-outline-color: var(--color-blue-3);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--color-gray-300);\n --button-text-color-default: var(--color-gray-500);\n --button-shadow-color: var(--color-gray-500);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--color-btn-business);\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\n\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n }\n }\n\n &--ghost {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: transparent;\n --button-padding: 0;\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-axa);\n --button-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n &:hover,\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n --button-bg-color-default: var(--color-blue-2);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-shadow-color: var(--color-white);\n\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n &:active {\n --button-bg-color-default: var(--color-gray-200);\n --button-text-color-default: var(--color-btn-light);\n --button-shadow-color: var(--color-gray-200);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-gray-400);\n --button-text-color-default: var(--color-blue-1);\n --button-shadow-color: var(--color-gray-400);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--color-btn-tertiary-bg);\n --button-text-color-default: var(--color-axa);\n\n &:hover {\n --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n"]}
package/dist/Button/ButtonLF.scss ADDED
@@ -0,0 +1,158 @@
1
+ @use "../common/breakpoints" as breakpoints;
2
+
3
+ @use "./ButtonCommon";
4
+
5
+ .af-btn-client {
6
+ --button-bg-color-default: var(--color-axa);
7
+ --button-text-color-default: var(--color-white);
8
+ --button-radius: var(--radius-8);
9
+ --button-shadow-color: var(--color-axa);
10
+ --button-padding: calc(16 / var(--font-size-base) * 1rem)
11
+ calc(61.5 / var(--font-size-base) * 1rem);
12
+ --button-line-height: calc(20 / var(--font-size-base) * 1rem);
13
+ --button-font-size: calc(16 / var(--font-size-base) * 1rem);
14
+
15
+ @media (width > #{breakpoints.$breakpoint-lg}) {
16
+ --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);
17
+ --button-font-size: calc(18 / var(--font-size-base) * 1rem);
18
+ }
19
+
20
+ &:hover {
21
+ --button-bg-color-default: var(--color-blue-1);
22
+ }
23
+
24
+ &:active,
25
+ &:focus,
26
+ &:focus-visible {
27
+ --button-bg-color-default: var(--color-btn-light);
28
+ }
29
+
30
+ &:focus,
31
+ &:focus-visible {
32
+ --button-outline-color: var(--color-blue-3);
33
+ }
34
+
35
+ &:disabled,
36
+ &[aria-disabled="true"] {
37
+ --button-bg-color-default: var(--color-gray-300);
38
+ --button-text-color-default: var(--color-gray-500);
39
+ --button-shadow-color: var(--color-gray-500);
40
+ }
41
+
42
+ &--primary-business {
43
+ --button-bg-color-default: var(--color-btn-business);
44
+
45
+ &:active,
46
+ &:focus,
47
+ &:focus-visible {
48
+ --button-bg-color-default: var(--color-btn-business-light);
49
+ }
50
+
51
+ &:hover {
52
+ --button-bg-color-default: var(--color-btn-business-dark);
53
+ }
54
+ }
55
+
56
+ &--primary-inverse {
57
+ --button-text-color-default: var(--color-axa);
58
+ --button-bg-color-default: var(--color-white);
59
+
60
+ &:active {
61
+ --button-bg-color-default: var(--color-white);
62
+ --button-text-color-default: var(--color-btn-business-light);
63
+ }
64
+
65
+ &:hover,
66
+ &:focus,
67
+ &:focus-visible {
68
+ --button-bg-color-default: var(--color-white);
69
+ --button-text-color-default: var(--color-blue-1);
70
+ }
71
+ }
72
+
73
+ &--ghost {
74
+ --button-text-color-default: var(--color-axa);
75
+ --button-bg-color-default: transparent;
76
+ --button-padding: 0;
77
+
78
+ @media (width > #{breakpoints.$breakpoint-lg}) {
79
+ --button-font-size: calc(16 / var(--font-size-base) * 1rem);
80
+ }
81
+
82
+ &:active {
83
+ --button-text-color-default: var(--color-btn-light);
84
+ }
85
+
86
+ &:hover,
87
+ &:focus,
88
+ &:focus-visible {
89
+ --button-text-color-default: var(--color-blue-1);
90
+ --button-bg-color-default: transparent;
91
+ }
92
+
93
+ &:disabled,
94
+ &[aria-disabled="true"] {
95
+ --button-bg-color-default: transparent;
96
+ }
97
+ }
98
+
99
+ &--secondary {
100
+ --button-bg-color-default: var(--color-white);
101
+ --button-text-color-default: var(--color-axa);
102
+ --button-shadow-color: var(--color-axa);
103
+
104
+ box-shadow: 0 0 0 1px var(--button-shadow-color) inset;
105
+
106
+ &:hover,
107
+ &:focus,
108
+ &:focus-visible,
109
+ &:active {
110
+ --button-bg-color-default: var(--color-white);
111
+ --button-text-color-default: var(--color-blue-1);
112
+
113
+ box-shadow: 0 0 0 2px var(--color-blue-1) inset;
114
+ }
115
+
116
+ &:active {
117
+ --button-bg-color-default: var(--color-blue-2);
118
+ }
119
+ }
120
+
121
+ &--secondary-inverse {
122
+ --button-bg-color-default: var(--color-axa);
123
+ --button-text-color-default: var(--color-white);
124
+ --button-shadow-color: var(--color-white);
125
+
126
+ box-shadow: 0 0 0 2px var(--button-shadow-color) inset;
127
+
128
+ &:active {
129
+ --button-bg-color-default: var(--color-gray-200);
130
+ --button-text-color-default: var(--color-btn-light);
131
+ --button-shadow-color: var(--color-gray-200);
132
+ }
133
+
134
+ &:hover,
135
+ &:focus,
136
+ &:focus-visible {
137
+ --button-bg-color-default: var(--color-gray-400);
138
+ --button-text-color-default: var(--color-blue-1);
139
+ --button-shadow-color: var(--color-gray-400);
140
+ }
141
+ }
142
+
143
+ &--tertiary {
144
+ --button-bg-color-default: var(--color-btn-tertiary-bg);
145
+ --button-text-color-default: var(--color-axa);
146
+
147
+ &:hover {
148
+ --button-bg-color-default: var(--color-btn-tertiary-bg-darker);
149
+ }
150
+
151
+ &:focus,
152
+ &:focus-visible,
153
+ &:active {
154
+ --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);
155
+ --button-text-color-default: var(--color-axa);
156
+ }
157
+ }
158
+ }
package/dist/Loader/Loader.css ADDED
@@ -0,0 +1 @@
1
+ .af-loader__container{align-items:center;animation:spin 2s linear infinite;border-top:1px solid var(--color-gray-200);border:1px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-axa);container-type:inline-size;display:flex;flex-direction:column;justify-content:center;margin:auto}.af-loader__container--blue{border:solid color-mix(in srgb,var(--color-axa),#0000 80%);border-top:solid var(--color-axa)}.af-loader__container--gray{border:solid color-mix(in srgb,var(--color-gray),#0000 80%);border-top:solid var(--color-gray)}.af-loader__container--white{border:solid color-mix(in srgb,var(--color-white),#0000 80%);border-top:solid var(--color-white)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
package/dist/Loader/Loader.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Loader/Loader.scss%23sass","../../src/Loader/Loader.scss"],"names":[],"mappings":"AACE,sBAQE,kBAAA,CAEA,iCAAA,CANA,0CAAA,CACA,sCAAA,CACA,iBAAA,CADA,iCAAA,CAHA,0BAAA,CADA,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WCOJ,CDEI,4BAEE,0DAAA,CAAA,iCCAN,CDGI,4BAEE,2DAAA,CAAA,kCCDN,CDII,6BAEE,4DAAA,CAAA,mCCFN,CDOA,gBACE,GCJA,sBACF,CDOE,GCLF,uBACE,CACF","file":"Loader.css","sourcesContent":[".af-loader {\n &__container {\n display: flex;\n container-type: inline-size;\n margin: auto;\n border: 1px solid var(--color-gray-200);\n border-top: 1px solid var(--color-axa);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n\n &--blue {\n border: solid color-mix(in srgb, var(--color-axa), transparent 80%);\n border-top: solid var(--color-axa);\n }\n\n &--gray {\n border: solid color-mix(in srgb, var(--color-gray), transparent 80%);\n border-top: solid var(--color-gray);\n }\n\n &--white {\n border: solid color-mix(in srgb, var(--color-white), transparent 80%);\n border-top: solid var(--color-white);\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n",".af-loader {\n &__container {\n display: flex;\n container-type: inline-size;\n margin: auto;\n border: 1px solid var(--color-gray-200);\n border-top: 1px solid var(--color-axa);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n\n &--blue {\n border: solid color-mix(in srgb, var(--color-axa), transparent 80%);\n border-top: solid var(--color-axa);\n }\n\n &--gray {\n border: solid color-mix(in srgb, var(--color-gray), transparent 80%);\n border-top: solid var(--color-gray);\n }\n\n &--white {\n border: solid color-mix(in srgb, var(--color-white), transparent 80%);\n border-top: solid var(--color-white);\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"]}
package/dist/Loader/Loader.scss ADDED
@@ -0,0 +1,39 @@
1
+ .af-loader {
2
+ &__container {
3
+ display: flex;
4
+ container-type: inline-size;
5
+ margin: auto;
6
+ border: 1px solid var(--color-gray-200);
7
+ border-top: 1px solid var(--color-axa);
8
+ border-radius: 50%;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: center;
12
+ animation: spin 2s linear infinite;
13
+
14
+ &--blue {
15
+ border: solid color-mix(in srgb, var(--color-axa), transparent 80%);
16
+ border-top: solid var(--color-axa);
17
+ }
18
+
19
+ &--gray {
20
+ border: solid color-mix(in srgb, var(--color-gray), transparent 80%);
21
+ border-top: solid var(--color-gray);
22
+ }
23
+
24
+ &--white {
25
+ border: solid color-mix(in srgb, var(--color-white), transparent 80%);
26
+ border-top: solid var(--color-white);
27
+ }
28
+ }
29
+ }
30
+
31
+ @keyframes spin {
32
+ 0% {
33
+ transform: rotate(0deg);
34
+ }
35
+
36
+ 100% {
37
+ transform: rotate(360deg);
38
+ }
39
+ }
package/dist/apollo.css ADDED
@@ -0,0 +1 @@
1
+ .af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary,.af-btn-client--secondary-inverse{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-radius:var(--radius-32);--button-shadow-color:var(--axa-blue-100);--button-padding:calc(12/var(--font-size-base)*1rem) calc(16/var(--font-size-base)*1rem);--button-line-height:calc(24/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-padding:calc(12/var(--font-size-base)*1rem) calc(24/var(--font-size-base)*1rem);--button-line-height:calc(32/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--axa-blue-120)}.af-btn-client:active{--button-bg-color-default:var(--axa-blue-80)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--axa-blue-65)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--neutral-50);--button-shadow-color:var(--neutral-50)}.af-btn-client--primary-business{--button-bg-color-default:var(--warning-100);--button-text-color-default:var(--white)}.af-btn-client--primary-business:active{--button-bg-color-default:var(--warning-80)}.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible,.af-btn-client--primary-business:hover{--button-bg-color-default:var(--warning-120)}.af-btn-client--primary-inverse{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120)}.af-btn-client--ghost{--button-bg-color-default:#0000;--button-text-color-default:var(--axa-blue-100);--button-padding:0}.af-btn-client--ghost:active{--button-text-color-default:var(--axa-blue-80)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--axa-blue-120);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--white);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--secondary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-80)}.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white);--button-shadow-color:var(--axa-blue-120)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--axa-blue-100);--button-text-color-default:var(--white);--button-shadow-color:var(--white)}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--neutral-5);--button-text-color-default:var(--axa-blue-80);--button-shadow-color:var(--neutral-5)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--neutral-14);--button-text-color-default:var(--axa-blue-120);--button-shadow-color:var(--neutral-14)}.af-btn-client--tertiary{--button-bg-color-default:var(--axa-blue-8);--button-text-color-default:var(--axa-blue-100)}.af-btn-client--tertiary:active{--button-bg-color-default:var(--axa-blue-80);--button-text-color-default:var(--white)}.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible,.af-btn-client--tertiary:hover{--button-bg-color-default:var(--axa-blue-120);--button-text-color-default:var(--white)}.af-loader__container{align-items:center;animation:spin 2s linear infinite;border-top:1px solid var(--color-gray-200);border:1px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-axa);container-type:inline-size;display:flex;flex-direction:column;justify-content:center;margin:auto}.af-loader__container--blue{border:solid color-mix(in srgb,var(--color-axa),#0000 80%);border-top:solid var(--color-axa)}.af-loader__container--gray{border:solid color-mix(in srgb,var(--color-gray),#0000 80%);border-top:solid var(--color-gray)}.af-loader__container--white{border:solid color-mix(in srgb,var(--color-white),#0000 80%);border-top:solid var(--color-white)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
package/dist/apollo.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Button/ButtonCommon.scss","../src/apollo.scss","../src/Button/ButtonApollo.scss","../src/Loader/Loader.scss"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CACA,kCAAA,CAQA,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCFF,CDIE,kDAEE,6CAAA,CACA,kBCHJ,CDME,2DAEE,mBCLJ,CDOI,mFACE,YCLN,CDSE,mBACE,cAAA,CACA,iBCPJ,CDUE,sBACE,sCCRJ,CDUI,4FAGE,yBCVN,CDkBE,4DACE,qDCbJ,CCxCA,eACE,6CAAA,CACA,wCAAA,CACA,gCAAA,CACA,yCAAA,CACA,wFAAA,CAEA,wDAAA,CACA,sDD2CF,CCzCE,wBAVF,eAWI,wFAAA,CAEA,wDAAA,CACA,sDD4CF,CACF,CC1CE,qBACE,6CD4CJ,CCzCE,sBACE,4CD2CJ,CCxCE,kDAEE,yCDyCJ,CCtCE,2DAEE,0CAAA,CACA,6CAAA,CACA,uCDuCJ,CCpCE,iCACE,4CAAA,CACA,wCDsCJ,CCpCI,wCACE,2CDsCN,CCnCI,6HAGE,4CDmCN,CC/BE,gCACE,sCAAA,CACA,+CDiCJ,CC/BI,uCACE,0CAAA,CACA,8CDiCN,CC9BI,0HAGE,2CAAA,CACA,+CD8BN,CC1BE,sBACE,+BAAA,CACA,+CAAA,CACA,kBD4BJ,CC1BI,6BACE,8CD4BN,CCzBI,4FAGE,+CAAA,CACA,+BDyBN,CCtBI,yEAEE,+BDuBN,CCnBE,0BACE,sCAAA,CACA,+CDqBJ,CCnBI,iCACE,4CAAA,CACA,wCAAA,CACA,wCDqBN,CClBI,wGAGE,6CAAA,CACA,wCAAA,CACA,yCDkBN,CCdE,kCACE,6CAAA,CACA,wCAAA,CACA,kCDgBJ,CCdI,yCACE,0CAAA,CACA,8CAAA,CACA,sCDgBN,CCbI,gIAGE,2CAAA,CACA,+CAAA,CACA,uCDaN,CCTE,yBACE,2CAAA,CACA,+CDWJ,CCTI,gCACE,4CAAA,CACA,wCDWN,CCRI,qGAGE,6CAAA,CACA,wCDQN,CE5JE,sBAQE,kBAAA,CAEA,iCAAA,CANA,0CAAA,CACA,sCAAA,CACA,iBAAA,CADA,iCAAA,CAHA,0BAAA,CADA,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WFsKJ,CE7JI,4BAEE,0DAAA,CAAA,iCF+JN,CE5JI,4BAEE,2DAAA,CAAA,kCF8JN,CE3JI,6BAEE,4DAAA,CAAA,mCF6JN,CExJA,gBACE,GACE,sBF2JF,CExJA,GACE,uBF0JF,CACF","file":"apollo.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","@use \"./Button/ButtonApollo\";\n@use \"./Loader/Loader\";\n","/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-radius: var(--radius-32);\n --button-shadow-color: var(--axa-blue-100);\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(16 / var(--font-size-base) * 1rem);\n --button-line-height: calc(24 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-padding: calc(12 / var(--font-size-base) * 1rem)\n calc(24 / var(--font-size-base) * 1rem);\n --button-line-height: calc(32 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--axa-blue-120);\n }\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n }\n\n &:focus-visible,\n &:focus {\n --button-outline-color: var(--axa-blue-65);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--neutral-50);\n --button-shadow-color: var(--neutral-50);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--warning-100);\n --button-text-color-default: var(--white);\n\n &:active {\n --button-bg-color-default: var(--warning-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--warning-120);\n }\n }\n\n &--primary-inverse {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n }\n }\n\n &--ghost {\n --button-bg-color-default: transparent;\n --button-text-color-default: var(--axa-blue-100);\n --button-padding: 0;\n\n &:active {\n --button-text-color-default: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--axa-blue-120);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--white);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-80);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--axa-blue-120);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--axa-blue-100);\n --button-text-color-default: var(--white);\n --button-shadow-color: var(--white);\n\n &:active {\n --button-bg-color-default: var(--neutral-5);\n --button-text-color-default: var(--axa-blue-80);\n --button-shadow-color: var(--neutral-5);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--neutral-14);\n --button-text-color-default: var(--axa-blue-120);\n --button-shadow-color: var(--neutral-14);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--axa-blue-8);\n --button-text-color-default: var(--axa-blue-100);\n\n &:active {\n --button-bg-color-default: var(--axa-blue-80);\n --button-text-color-default: var(--white);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--axa-blue-120);\n --button-text-color-default: var(--white);\n }\n }\n}\n",".af-loader {\n &__container {\n display: flex;\n container-type: inline-size;\n margin: auto;\n border: 1px solid var(--color-gray-200);\n border-top: 1px solid var(--color-axa);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n\n &--blue {\n border: solid color-mix(in srgb, var(--color-axa), transparent 80%);\n border-top: solid var(--color-axa);\n }\n\n &--gray {\n border: solid color-mix(in srgb, var(--color-gray), transparent 80%);\n border-top: solid var(--color-gray);\n }\n\n &--white {\n border: solid color-mix(in srgb, var(--color-white), transparent 80%);\n border-top: solid var(--color-white);\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"]}
package/dist/apollo.scss ADDED
@@ -0,0 +1,2 @@
1
+ @use "./Button/ButtonApollo";
2
+ @use "./Loader/Loader";
package/dist/common/breakpoints.css ADDED
File without changes
package/dist/common/breakpoints.scss ADDED
@@ -0,0 +1,5 @@
1
+ $breakpoint-xs: 0 !default;
2
+ $breakpoint-sm: 667px !default;
3
+ $breakpoint-md: 1023px !default;
4
+ $breakpoint-lg: 1279px !default;
5
+ $breakpoint-xl: 1599px !default;
package/dist/common/tokens.css ADDED
@@ -0,0 +1 @@
1
+ :root{--font-family-sans-serif:"Source Sans Pro",arial,sans-serif;--font-family-serif:georgia,times,"Times New Roman",serif;--font-family-base:var(--font-family-sans-serif);--font-family-publico-bold:"Publico Headline Bold";--font-family-publico:"Publico Headline";--font-size-base:16;--black:#000;--black-20:hsl(from var(--black) h s l/20%);--white:#fff;--white-20:hsl(from var(--white) h s l/20%);--axa-blue-100:#00008f;--axa-blue-100-20:hsl(from var(--axa-blue-100) h s l/20%);--axa-blue-100-40:hsl(from var(--axa-blue-100) h s l/40%);--axa-blue-20:#d6d6ea;--axa-blue-4:#f1f1f8;--axa-blue-65:#6060af;--axa-blue-8:#e0e0f0;--axa-blue-80:#22a;--axa-blue-120:#000070;--axa-red-100:#ff1420;--axa-red-4:#fff0f0;--axa-red-digital-100:#ff424c;--red-alert-100:#e60000;--red-alert-80:#ff1f1f;--warning-100:#c35822;--warning-120:#a14112;--warning-4:#fef9f6;--warning-80:#e08152;--dark:hsl(from var(--black) h s 7%);--neutral-100:hsl(from var(--black) h s 20%);--neutral-80:hsl(from var(--black) h s 36%);--neutral-50:hsl(from var(--black) h s 60%);--neutral-50-20:hsl(from var(--neutral-50) h s l/20%);--neutral-25:hsl(from var(--black) h s 80%);--neutral-14:hsl(from var(--black) h s 90%);--neutral-5:hsl(from var(--black) h s 96%);--green-100:#109352;--aqua-green-12:#edfdf5;--radius-8:8px;--radius-32:32px;--radius-100:100vmax}
package/dist/common/tokens.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AACA,MAME,2DAAA,CACA,yDAAA,CACA,gDAAA,CACA,kDAAA,CACA,wCAAA,CACA,mBAAA,CAUA,YAAA,CACA,2CAAA,CACA,YAAA,CACA,2CAAA,CAIA,sBAAA,CACA,yDAAA,CACA,yDAAA,CACA,qBAAA,CACA,oBAAA,CACA,qBAAA,CACA,oBAAA,CACA,kBAAA,CACA,sBAAA,CAIA,qBAAA,CACA,mBAAA,CACA,6BAAA,CACA,uBAAA,CACA,sBAAA,CAGA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,oBAAA,CAGA,oCAAA,CACA,4CAAA,CACA,2CAAA,CACA,2CAAA,CACA,qDAAA,CACA,2CAAA,CACA,2CAAA,CACA,0CAAA,CAGA,mBAAA,CACA,uBAAA,CA0BA,cAAA,CACA,gBAAA,CACA,oBCvBF","file":"tokens.css","sourcesContent":["/* stylelint-disable color-function-notation */\n:root {\n /* *************************************************************************/\n\n /* FONTS */\n\n /* *************************************************************************/\n --font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif;\n --font-family-serif: georgia, times, \"Times New Roman\", serif;\n --font-family-base: var(--font-family-sans-serif);\n --font-family-publico-bold: \"Publico Headline Bold\";\n --font-family-publico: \"Publico Headline\";\n --font-size-base: 16;\n\n /* *************************************************************************/\n\n /* COLORS */\n\n /* *************************************************************************/\n\n /* PRIMITIVES **************************************************************/\n\n --black: hsl(0deg, 0%, 0%);\n --black-20: hsl(from var(--black) h s l / 20%);\n --white: hsl(0deg, 0%, 100%);\n --white-20: hsl(from var(--white) h s l / 20%);\n\n /* blue */\n\n --axa-blue-100: hsl(240deg, 100%, 28%);\n --axa-blue-100-20: hsl(from var(--axa-blue-100) h s l / 20%);\n --axa-blue-100-40: hsl(from var(--axa-blue-100) h s l / 40%);\n --axa-blue-20: hsl(240deg, 33%, 88%);\n --axa-blue-4: hsl(240deg, 33%, 96%);\n --axa-blue-65: hsl(240deg, 33%, 53%);\n --axa-blue-8: hsl(240deg, 33%, 91%);\n --axa-blue-80: hsl(240deg, 67%, 40%);\n --axa-blue-120: hsl(240deg, 100%, 22%);\n\n /* red */\n\n --axa-red-100: hsl(357deg, 100%, 54%);\n --axa-red-4: hsl(357deg, 100%, 97%);\n --axa-red-digital-100: hsl(357deg, 100%, 63%);\n --red-alert-100: hsl(0deg, 100%, 45%);\n --red-alert-80: hsl(0deg, 100%, 56%);\n\n /* orange */\n --warning-100: hsl(20deg, 70%, 45%);\n --warning-120: hsl(20deg, 80%, 35%);\n --warning-4: hsl(20deg, 80%, 98%);\n --warning-80: hsl(20deg, 70%, 60%);\n\n /* gray */\n --dark: hsl(from var(--black) h s 7%);\n --neutral-100: hsl(from var(--black) h s 20%);\n --neutral-80: hsl(from var(--black) h s 36%);\n --neutral-50: hsl(from var(--black) h s 60%);\n --neutral-50-20: hsl(from var(--neutral-50) h s l / 20%);\n --neutral-25: hsl(from var(--black) h s 80%);\n --neutral-14: hsl(from var(--black) h s 90%);\n --neutral-5: hsl(from var(--black) h s 96%);\n\n /* green */\n --green-100: hsl(150deg, 80%, 32%);\n --aqua-green-12: hsl(150deg, 80%, 96%);\n\n /* *************************************************************************/\n\n /* SIZING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* SPACING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BREAKPOINTS */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BORDERS */\n\n /* *************************************************************************/\n\n --radius-8: 8px;\n --radius-32: 32px;\n --radius-100: 100vmax;\n\n /* *************************************************************************/\n\n /* ANIMATIONS */\n\n /* *************************************************************************/\n}\n","/* stylelint-disable color-function-notation */\n:root {\n /* *************************************************************************/\n\n /* FONTS */\n\n /* *************************************************************************/\n --font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif;\n --font-family-serif: georgia, times, \"Times New Roman\", serif;\n --font-family-base: var(--font-family-sans-serif);\n --font-family-publico-bold: \"Publico Headline Bold\";\n --font-family-publico: \"Publico Headline\";\n --font-size-base: 16;\n\n /* *************************************************************************/\n\n /* COLORS */\n\n /* *************************************************************************/\n\n /* PRIMITIVES **************************************************************/\n\n --black: hsl(0deg, 0%, 0%);\n --black-20: hsl(from var(--black) h s l / 20%);\n --white: hsl(0deg, 0%, 100%);\n --white-20: hsl(from var(--white) h s l / 20%);\n\n /* blue */\n\n --axa-blue-100: hsl(240deg, 100%, 28%);\n --axa-blue-100-20: hsl(from var(--axa-blue-100) h s l / 20%);\n --axa-blue-100-40: hsl(from var(--axa-blue-100) h s l / 40%);\n --axa-blue-20: hsl(240deg, 33%, 88%);\n --axa-blue-4: hsl(240deg, 33%, 96%);\n --axa-blue-65: hsl(240deg, 33%, 53%);\n --axa-blue-8: hsl(240deg, 33%, 91%);\n --axa-blue-80: hsl(240deg, 67%, 40%);\n --axa-blue-120: hsl(240deg, 100%, 22%);\n\n /* red */\n\n --axa-red-100: hsl(357deg, 100%, 54%);\n --axa-red-4: hsl(357deg, 100%, 97%);\n --axa-red-digital-100: hsl(357deg, 100%, 63%);\n --red-alert-100: hsl(0deg, 100%, 45%);\n --red-alert-80: hsl(0deg, 100%, 56%);\n\n /* orange */\n --warning-100: hsl(20deg, 70%, 45%);\n --warning-120: hsl(20deg, 80%, 35%);\n --warning-4: hsl(20deg, 80%, 98%);\n --warning-80: hsl(20deg, 70%, 60%);\n\n /* gray */\n --dark: hsl(from var(--black) h s 7%);\n --neutral-100: hsl(from var(--black) h s 20%);\n --neutral-80: hsl(from var(--black) h s 36%);\n --neutral-50: hsl(from var(--black) h s 60%);\n --neutral-50-20: hsl(from var(--neutral-50) h s l / 20%);\n --neutral-25: hsl(from var(--black) h s 80%);\n --neutral-14: hsl(from var(--black) h s 90%);\n --neutral-5: hsl(from var(--black) h s 96%);\n\n /* green */\n --green-100: hsl(150deg, 80%, 32%);\n --aqua-green-12: hsl(150deg, 80%, 96%);\n\n /* *************************************************************************/\n\n /* SIZING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* SPACING */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BREAKPOINTS */\n\n /* *************************************************************************/\n\n /* *************************************************************************/\n\n /* BORDERS */\n\n /* *************************************************************************/\n\n --radius-8: 8px;\n --radius-32: 32px;\n --radius-100: 100vmax;\n\n /* *************************************************************************/\n\n /* ANIMATIONS */\n\n /* *************************************************************************/\n}\n"]}
package/dist/common/tokens.scss ADDED
@@ -0,0 +1,101 @@
1
+ /* stylelint-disable color-function-notation */
2
+ :root {
3
+ /* *************************************************************************/
4
+
5
+ /* FONTS */
6
+
7
+ /* *************************************************************************/
8
+ --font-family-sans-serif: "Source Sans Pro", arial, sans-serif;
9
+ --font-family-serif: georgia, times, "Times New Roman", serif;
10
+ --font-family-base: var(--font-family-sans-serif);
11
+ --font-family-publico-bold: "Publico Headline Bold";
12
+ --font-family-publico: "Publico Headline";
13
+ --font-size-base: 16;
14
+
15
+ /* *************************************************************************/
16
+
17
+ /* COLORS */
18
+
19
+ /* *************************************************************************/
20
+
21
+ /* PRIMITIVES **************************************************************/
22
+
23
+ --black: hsl(0deg, 0%, 0%);
24
+ --black-20: hsl(from var(--black) h s l / 20%);
25
+ --white: hsl(0deg, 0%, 100%);
26
+ --white-20: hsl(from var(--white) h s l / 20%);
27
+
28
+ /* blue */
29
+
30
+ --axa-blue-100: hsl(240deg, 100%, 28%);
31
+ --axa-blue-100-20: hsl(from var(--axa-blue-100) h s l / 20%);
32
+ --axa-blue-100-40: hsl(from var(--axa-blue-100) h s l / 40%);
33
+ --axa-blue-20: hsl(240deg, 33%, 88%);
34
+ --axa-blue-4: hsl(240deg, 33%, 96%);
35
+ --axa-blue-65: hsl(240deg, 33%, 53%);
36
+ --axa-blue-8: hsl(240deg, 33%, 91%);
37
+ --axa-blue-80: hsl(240deg, 67%, 40%);
38
+ --axa-blue-120: hsl(240deg, 100%, 22%);
39
+
40
+ /* red */
41
+
42
+ --axa-red-100: hsl(357deg, 100%, 54%);
43
+ --axa-red-4: hsl(357deg, 100%, 97%);
44
+ --axa-red-digital-100: hsl(357deg, 100%, 63%);
45
+ --red-alert-100: hsl(0deg, 100%, 45%);
46
+ --red-alert-80: hsl(0deg, 100%, 56%);
47
+
48
+ /* orange */
49
+ --warning-100: hsl(20deg, 70%, 45%);
50
+ --warning-120: hsl(20deg, 80%, 35%);
51
+ --warning-4: hsl(20deg, 80%, 98%);
52
+ --warning-80: hsl(20deg, 70%, 60%);
53
+
54
+ /* gray */
55
+ --dark: hsl(from var(--black) h s 7%);
56
+ --neutral-100: hsl(from var(--black) h s 20%);
57
+ --neutral-80: hsl(from var(--black) h s 36%);
58
+ --neutral-50: hsl(from var(--black) h s 60%);
59
+ --neutral-50-20: hsl(from var(--neutral-50) h s l / 20%);
60
+ --neutral-25: hsl(from var(--black) h s 80%);
61
+ --neutral-14: hsl(from var(--black) h s 90%);
62
+ --neutral-5: hsl(from var(--black) h s 96%);
63
+
64
+ /* green */
65
+ --green-100: hsl(150deg, 80%, 32%);
66
+ --aqua-green-12: hsl(150deg, 80%, 96%);
67
+
68
+ /* *************************************************************************/
69
+
70
+ /* SIZING */
71
+
72
+ /* *************************************************************************/
73
+
74
+ /* *************************************************************************/
75
+
76
+ /* SPACING */
77
+
78
+ /* *************************************************************************/
79
+
80
+ /* *************************************************************************/
81
+
82
+ /* BREAKPOINTS */
83
+
84
+ /* *************************************************************************/
85
+
86
+ /* *************************************************************************/
87
+
88
+ /* BORDERS */
89
+
90
+ /* *************************************************************************/
91
+
92
+ --radius-8: 8px;
93
+ --radius-32: 32px;
94
+ --radius-100: 100vmax;
95
+
96
+ /* *************************************************************************/
97
+
98
+ /* ANIMATIONS */
99
+
100
+ /* *************************************************************************/
101
+ }
package/dist/look-and-feel.css ADDED
@@ -0,0 +1 @@
1
+ .af-btn-client{align-items:center;background-color:var(--button-bg-color-default);border:0;border-radius:var(--button-radius);color:var(--button-text-color-default);display:flex;font-family:var(--font-family-base);font-size:var(--button-font-size);font-weight:600;gap:1rem;justify-content:center;line-height:var(--button-line-height);padding:var(--button-padding);transition-duration:var(--transition-duration);transition-property:width,height,border,color,background-color,outline,box-shadow;transition-timing-function:linear;-webkit-user-select:none;user-select:none}.af-btn-client:focus,.af-btn-client:focus-visible{outline:2px solid var(--button-outline-color);outline-offset:3px}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{pointer-events:none}.af-btn-client:disabled>[aria-live],.af-btn-client[aria-disabled=true]>[aria-live]{margin:unset}.af-btn-client>svg{aspect-ratio:1;fill:currentcolor}.af-btn-client--ghost{gap:calc(4/var(--font-size-base)*1rem)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{text-decoration:underline}.af-btn-client--secondary{box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-radius:var(--radius-8);--button-shadow-color:var(--color-axa);--button-padding:calc(16/var(--font-size-base)*1rem) calc(61.5/var(--font-size-base)*1rem);--button-line-height:calc(20/var(--font-size-base)*1rem);--button-font-size:calc(16/var(--font-size-base)*1rem)}@media (width > 1279px){.af-btn-client{--button-line-height:calc(22.5/var(--font-size-base)*1rem);--button-font-size:calc(18/var(--font-size-base)*1rem)}}.af-btn-client:hover{--button-bg-color-default:var(--color-blue-1)}.af-btn-client:active,.af-btn-client:focus,.af-btn-client:focus-visible{--button-bg-color-default:var(--color-btn-light)}.af-btn-client:focus,.af-btn-client:focus-visible{--button-outline-color:var(--color-blue-3)}.af-btn-client:disabled,.af-btn-client[aria-disabled=true]{--button-bg-color-default:var(--color-gray-300);--button-text-color-default:var(--color-gray-500);--button-shadow-color:var(--color-gray-500)}.af-btn-client--primary-business{--button-bg-color-default:var(--color-btn-business)}.af-btn-client--primary-business:active,.af-btn-client--primary-business:focus,.af-btn-client--primary-business:focus-visible{--button-bg-color-default:var(--color-btn-business-light)}.af-btn-client--primary-business:hover{--button-bg-color-default:var(--color-btn-business-dark)}.af-btn-client--primary-inverse{--button-text-color-default:var(--color-axa);--button-bg-color-default:var(--color-white)}.af-btn-client--primary-inverse:active{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-btn-business-light)}.af-btn-client--primary-inverse:focus,.af-btn-client--primary-inverse:focus-visible,.af-btn-client--primary-inverse:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1)}.af-btn-client--ghost{--button-text-color-default:var(--color-axa);--button-bg-color-default:#0000;--button-padding:0}@media (width > 1279px){.af-btn-client--ghost{--button-font-size:calc(16/var(--font-size-base)*1rem)}}.af-btn-client--ghost:active{--button-text-color-default:var(--color-btn-light)}.af-btn-client--ghost:focus,.af-btn-client--ghost:focus-visible,.af-btn-client--ghost:hover{--button-text-color-default:var(--color-blue-1);--button-bg-color-default:#0000}.af-btn-client--ghost:disabled,.af-btn-client--ghost[aria-disabled=true]{--button-bg-color-default:#0000}.af-btn-client--secondary{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-axa);--button-shadow-color:var(--color-axa);box-shadow:0 0 0 1px var(--button-shadow-color) inset}.af-btn-client--secondary:active,.af-btn-client--secondary:focus,.af-btn-client--secondary:focus-visible,.af-btn-client--secondary:hover{--button-bg-color-default:var(--color-white);--button-text-color-default:var(--color-blue-1);box-shadow:0 0 0 2px var(--color-blue-1) inset}.af-btn-client--secondary:active{--button-bg-color-default:var(--color-blue-2)}.af-btn-client--secondary-inverse{--button-bg-color-default:var(--color-axa);--button-text-color-default:var(--color-white);--button-shadow-color:var(--color-white);box-shadow:0 0 0 2px var(--button-shadow-color) inset}.af-btn-client--secondary-inverse:active{--button-bg-color-default:var(--color-gray-200);--button-text-color-default:var(--color-btn-light);--button-shadow-color:var(--color-gray-200)}.af-btn-client--secondary-inverse:focus,.af-btn-client--secondary-inverse:focus-visible,.af-btn-client--secondary-inverse:hover{--button-bg-color-default:var(--color-gray-400);--button-text-color-default:var(--color-blue-1);--button-shadow-color:var(--color-gray-400)}.af-btn-client--tertiary{--button-bg-color-default:var(--color-btn-tertiary-bg);--button-text-color-default:var(--color-axa)}.af-btn-client--tertiary:hover{--button-bg-color-default:var(--color-btn-tertiary-bg-darker)}.af-btn-client--tertiary:active,.af-btn-client--tertiary:focus,.af-btn-client--tertiary:focus-visible{--button-bg-color-default:var(--color-btn-tertiary-bg-lighter);--button-text-color-default:var(--color-axa)}.af-loader__container{align-items:center;animation:spin 2s linear infinite;border-top:1px solid var(--color-gray-200);border:1px solid var(--color-gray-200);border-radius:50%;border-top-color:var(--color-axa);container-type:inline-size;display:flex;flex-direction:column;justify-content:center;margin:auto}.af-loader__container--blue{border:solid color-mix(in srgb,var(--color-axa),#0000 80%);border-top:solid var(--color-axa)}.af-loader__container--gray{border:solid color-mix(in srgb,var(--color-gray),#0000 80%);border-top:solid var(--color-gray)}.af-loader__container--white{border:solid color-mix(in srgb,var(--color-white),#0000 80%);border-top:solid var(--color-white)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
package/dist/look-and-feel.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Button/ButtonCommon.scss","../src/look-and-feel.scss","../src/Button/ButtonLF.scss","../src/Loader/Loader.scss"],"names":[],"mappings":"AAIA,eAKE,kBAAA,CAQA,+CAAA,CAVA,QAAA,CACA,kCAAA,CAQA,sCAAA,CAXA,YAAA,CAOA,mCAAA,CACA,iCAAA,CACA,eAAA,CAHA,QAAA,CADA,sBAAA,CAKA,qCAAA,CATA,6BAAA,CAYA,8CAAA,CACA,iFAAA,CAEA,iCAAA,CACA,wBAAA,CAAA,gBCHF,CDKE,kDAEE,6CAAA,CACA,kBCJJ,CDOE,2DAEE,mBCNJ,CDQI,mFACE,YCNN,CDUE,mBACE,cAAA,CACA,iBCRJ,CDWE,sBACE,sCCTJ,CDWI,4FAGE,yBCXN,CDeE,0BACE,qDCbJ,CCtCA,eACE,0CAAA,CACA,8CAAA,CACA,+BAAA,CACA,sCAAA,CACA,0FAAA,CAEA,wDAAA,CACA,sDD4CF,CC1CE,wBAVF,eAWI,0DAAA,CACA,sDD6CF,CACF,CC3CE,qBACE,6CD6CJ,CC1CE,wEAGE,gDD0CJ,CCvCE,kDAEE,0CDwCJ,CCrCE,2DAEE,+CAAA,CACA,iDAAA,CACA,2CDsCJ,CCnCE,iCACE,mDDqCJ,CCnCI,8HAGE,yDDmCN,CChCI,uCACE,wDDkCN,CC9BE,gCACE,4CAAA,CACA,4CDgCJ,CC9BI,uCACE,4CAAA,CACA,2DDgCN,CC7BI,0HAGE,4CAAA,CACA,+CD6BN,CCzBE,sBACE,4CAAA,CACA,+BAAA,CACA,kBD2BJ,CCzBI,wBALF,sBAMI,sDD4BJ,CACF,CC1BI,6BACE,kDD4BN,CCzBI,4FAGE,+CAAA,CACA,+BDyBN,CCtBI,yEAEE,+BDuBN,CCnBE,0BACE,4CAAA,CACA,4CAAA,CACA,sCAAA,CAEA,qDDoBJ,CClBI,yIAIE,4CAAA,CACA,+CAAA,CAEA,8CDgBN,CCbI,iCACE,6CDeN,CCXE,kCACE,0CAAA,CACA,8CAAA,CACA,wCAAA,CAEA,qDDYJ,CCVI,yCACE,+CAAA,CACA,kDAAA,CACA,2CDYN,CCTI,gIAGE,+CAAA,CACA,+CAAA,CACA,2CDSN,CCLE,yBACE,sDAAA,CACA,4CDOJ,CCLI,+BACE,6DDON,CCJI,sGAGE,8DAAA,CACA,4CDIN,CE7JE,sBAQE,kBAAA,CAEA,iCAAA,CANA,0CAAA,CACA,sCAAA,CACA,iBAAA,CADA,iCAAA,CAHA,0BAAA,CADA,YAAA,CAMA,qBAAA,CAEA,sBAAA,CANA,WFuKJ,CE9JI,4BAEE,0DAAA,CAAA,iCFgKN,CE7JI,4BAEE,2DAAA,CAAA,kCF+JN,CE5JI,6BAEE,4DAAA,CAAA,mCF8JN,CEzJA,gBACE,GACE,sBF4JF,CEzJA,GACE,uBF2JF,CACF","file":"look-and-feel.css","sourcesContent":["/* Apollo first and mobile first approch */\n\n@use \"../common/breakpoints\" as breakpoints;\n\n.af-btn-client {\n display: flex;\n padding: var(--button-padding);\n border: 0;\n border-radius: var(--button-radius);\n align-items: center;\n justify-content: center;\n gap: 1rem;\n font-family: var(--font-family-base);\n font-size: var(--button-font-size);\n font-weight: 600;\n line-height: var(--button-line-height);\n color: var(--button-text-color-default);\n background-color: var(--button-bg-color-default);\n transition-duration: var(--transition-duration);\n transition-property: width, height, border, color, background-color, outline,\n box-shadow;\n transition-timing-function: linear;\n user-select: none;\n\n &:focus-visible,\n &:focus {\n outline: 2px solid var(--button-outline-color);\n outline-offset: 3px;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n pointer-events: none;\n\n & > [aria-live] {\n margin: unset;\n }\n }\n\n & > svg {\n aspect-ratio: 1;\n fill: currentcolor;\n }\n\n &--ghost {\n gap: calc(4 / var(--font-size-base) * 1rem);\n\n &:hover,\n &:focus,\n &:focus-visible {\n text-decoration: underline;\n }\n }\n\n &--secondary {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n\n &--secondary-inverse {\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n }\n}\n","@use \"./Button/ButtonLF\";\n@use \"./Loader/Loader\";\n","@use \"../common/breakpoints\" as breakpoints;\n\n@use \"./ButtonCommon\";\n\n.af-btn-client {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-radius: var(--radius-8);\n --button-shadow-color: var(--color-axa);\n --button-padding: calc(16 / var(--font-size-base) * 1rem)\n calc(61.5 / var(--font-size-base) * 1rem);\n --button-line-height: calc(20 / var(--font-size-base) * 1rem);\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-line-height: calc(22.5 / var(--font-size-base) * 1rem);\n --button-font-size: calc(18 / var(--font-size-base) * 1rem);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-blue-1);\n }\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-light);\n }\n\n &:focus,\n &:focus-visible {\n --button-outline-color: var(--color-blue-3);\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: var(--color-gray-300);\n --button-text-color-default: var(--color-gray-500);\n --button-shadow-color: var(--color-gray-500);\n }\n\n &--primary-business {\n --button-bg-color-default: var(--color-btn-business);\n\n &:active,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-btn-business-light);\n }\n\n &:hover {\n --button-bg-color-default: var(--color-btn-business-dark);\n }\n }\n\n &--primary-inverse {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: var(--color-white);\n\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-btn-business-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n }\n }\n\n &--ghost {\n --button-text-color-default: var(--color-axa);\n --button-bg-color-default: transparent;\n --button-padding: 0;\n\n @media (width > #{breakpoints.$breakpoint-lg}) {\n --button-font-size: calc(16 / var(--font-size-base) * 1rem);\n }\n\n &:active {\n --button-text-color-default: var(--color-btn-light);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-text-color-default: var(--color-blue-1);\n --button-bg-color-default: transparent;\n }\n\n &:disabled,\n &[aria-disabled=\"true\"] {\n --button-bg-color-default: transparent;\n }\n }\n\n &--secondary {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-axa);\n --button-shadow-color: var(--color-axa);\n\n box-shadow: 0 0 0 1px var(--button-shadow-color) inset;\n\n &:hover,\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-white);\n --button-text-color-default: var(--color-blue-1);\n\n box-shadow: 0 0 0 2px var(--color-blue-1) inset;\n }\n\n &:active {\n --button-bg-color-default: var(--color-blue-2);\n }\n }\n\n &--secondary-inverse {\n --button-bg-color-default: var(--color-axa);\n --button-text-color-default: var(--color-white);\n --button-shadow-color: var(--color-white);\n\n box-shadow: 0 0 0 2px var(--button-shadow-color) inset;\n\n &:active {\n --button-bg-color-default: var(--color-gray-200);\n --button-text-color-default: var(--color-btn-light);\n --button-shadow-color: var(--color-gray-200);\n }\n\n &:hover,\n &:focus,\n &:focus-visible {\n --button-bg-color-default: var(--color-gray-400);\n --button-text-color-default: var(--color-blue-1);\n --button-shadow-color: var(--color-gray-400);\n }\n }\n\n &--tertiary {\n --button-bg-color-default: var(--color-btn-tertiary-bg);\n --button-text-color-default: var(--color-axa);\n\n &:hover {\n --button-bg-color-default: var(--color-btn-tertiary-bg-darker);\n }\n\n &:focus,\n &:focus-visible,\n &:active {\n --button-bg-color-default: var(--color-btn-tertiary-bg-lighter);\n --button-text-color-default: var(--color-axa);\n }\n }\n}\n",".af-loader {\n &__container {\n display: flex;\n container-type: inline-size;\n margin: auto;\n border: 1px solid var(--color-gray-200);\n border-top: 1px solid var(--color-axa);\n border-radius: 50%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n animation: spin 2s linear infinite;\n\n &--blue {\n border: solid color-mix(in srgb, var(--color-axa), transparent 80%);\n border-top: solid var(--color-axa);\n }\n\n &--gray {\n border: solid color-mix(in srgb, var(--color-gray), transparent 80%);\n border-top: solid var(--color-gray);\n }\n\n &--white {\n border: solid color-mix(in srgb, var(--color-white), transparent 80%);\n border-top: solid var(--color-white);\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"]}
package/dist/look-and-feel.scss ADDED
@@ -0,0 +1,2 @@
1
+ @use "./Button/ButtonLF";
2
+ @use "./Loader/Loader";
package/package.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "name": "@axa-fr/design-system-apollo-css",
3
+ "version": "1.0.3-ci.116",
4
+ "description": "",
5
+ "sass": "dist/apollo.scss",
6
+ "style": "dist/apollo.css",
7
+ "exports": {
8
+ "./dist/*": {
9
+ "development": "./src/*",
10
+ "default": "./dist/*"
11
+ }
12
+ },
13
+ "files": [
14
+ "dist"
15
+ ],
16
+ "scripts": {
17
+ "predev": "rimraf dist",
18
+ "prebuild": "rimraf dist",
19
+ "dev": "postcss \"src/**/*.{scss,css}\" --base src --dir dist --ext css --verbose --watch --env development --config ../../../config/postcss.config.js",
20
+ "build": "postcss \"src/**/*.{scss,css}\" --base src --dir dist --ext css --verbose --env production --config ../../../config/postcss.config.js",
21
+ "eslint": "eslint src --ext js,jsx,ts,tsx",
22
+ "eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
23
+ "stylelint": "stylelint \"src/**/*.{scss,css}\"",
24
+ "stylelint:fix": "stylelint \"src/**/*.{scss,css}\" --fix",
25
+ "prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --check --ignore-unknown",
26
+ "prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|scss|css)\" --write --ignore-unknown"
27
+ },
28
+ "peerDependencies": {
29
+ "@material-symbols/svg-400": ">= 0.19.0"
30
+ },
31
+ "peerDependenciesMeta": {
32
+ "@material-symbols/svg-400": {
33
+ "optional": true
34
+ }
35
+ },
36
+ "repository": {
37
+ "type": "git",
38
+ "url": "git+https://github.com/AxaFrance/design-system.git"
39
+ },
40
+ "author": {
41
+ "name": "AxaFrance"
42
+ },
43
+ "license": "MIT",
44
+ "bugs": {
45
+ "url": "https://github.com/AxaFrance/design-system/issues"
46
+ },
47
+ "homepage": "https://github.com/AxaFrance/design-system#readme",
48
+ "browserslist": {
49
+ "production": [
50
+ ">0.2%",
51
+ "not dead",
52
+ "not op_mini all"
53
+ ],
54
+ "development": [
55
+ "last 1 chrome version",
56
+ "last 1 firefox version",
57
+ "last 1 safari version"
58
+ ]
59
+ },
60
+ "lint-staged": {
61
+ "*.(js|jsx|ts|tsx)": "eslint --fix",
62
+ "*.(ts|tsx)": "tsc-files --noEmit",
63
+ "*.(scss|css)": "stylelint --fix",
64
+ "*.mdx": "prettier --write"
65
+ },
66
+ "volta": {
67
+ "extends": "../../../package.json"
68
+ }
69
+ }