@axa-fr/design-system-look-and-feel-css 0.3.0-ci.288 → 0.3.0-ci.290

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 (103) hide show
  1. package/dist/Accordion/Accordion.css +1 -1
  2. package/dist/Accordion/Accordion.css.map +1 -1
  3. package/dist/Accordion/Accordion.scss +3 -3
  4. package/dist/AccordionCore/AccordionCore.css +1 -1
  5. package/dist/AccordionCore/AccordionCore.css.map +1 -1
  6. package/dist/AccordionCore/AccordionCore.scss +4 -4
  7. package/dist/Alert/Alert.css +1 -1
  8. package/dist/Alert/Alert.css.map +1 -1
  9. package/dist/Alert/Alert.scss +21 -23
  10. package/dist/Button/Button.css +1 -1
  11. package/dist/Button/Button.css.map +1 -1
  12. package/dist/Button/Button.scss +39 -41
  13. package/dist/Card/Card.css +1 -1
  14. package/dist/Card/Card.css.map +1 -1
  15. package/dist/Card/Card.scss +5 -6
  16. package/dist/Divider/Divider.css +1 -1
  17. package/dist/Divider/Divider.css.map +1 -1
  18. package/dist/Divider/Divider.scss +1 -3
  19. package/dist/Form/Checkbox/Checkbox.css +1 -1
  20. package/dist/Form/Checkbox/Checkbox.css.map +1 -1
  21. package/dist/Form/Checkbox/Checkbox.scss +29 -31
  22. package/dist/Form/FileUpload/FileUpload.css +1 -1
  23. package/dist/Form/FileUpload/FileUpload.css.map +1 -1
  24. package/dist/Form/FileUpload/FileUpload.scss +19 -21
  25. package/dist/Form/InputError/InputError.css +1 -1
  26. package/dist/Form/InputError/InputError.css.map +1 -1
  27. package/dist/Form/InputError/InputError.scss +4 -6
  28. package/dist/Form/Radio/Radio.css +1 -1
  29. package/dist/Form/Radio/Radio.css.map +1 -1
  30. package/dist/Form/Radio/Radio.scss +27 -29
  31. package/dist/Form/Select/Select.css +1 -1
  32. package/dist/Form/Select/Select.css.map +1 -1
  33. package/dist/Form/Select/Select.scss +24 -25
  34. package/dist/Form/Text/Text.css +1 -1
  35. package/dist/Form/Text/Text.css.map +1 -1
  36. package/dist/Form/Text/Text.scss +10 -10
  37. package/dist/IconBg/IconBg.css +1 -1
  38. package/dist/IconBg/IconBg.css.map +1 -1
  39. package/dist/IconBg/IconBg.scss +6 -6
  40. package/dist/Layout/Footer/Footer.css +1 -1
  41. package/dist/Layout/Footer/Footer.css.map +1 -1
  42. package/dist/Layout/Footer/Footer.scss +24 -24
  43. package/dist/Layout/Header/Header.css +1 -1
  44. package/dist/Layout/Header/Header.css.map +1 -1
  45. package/dist/Layout/Header/Header.scss +9 -9
  46. package/dist/Layout/Header/NavBar/NavBar.css +1 -1
  47. package/dist/Layout/Header/NavBar/NavBar.css.map +1 -1
  48. package/dist/Layout/Header/NavBar/NavBar.scss +6 -8
  49. package/dist/Layout/Header/PreviousLink/PreviousLink.css +1 -1
  50. package/dist/Layout/Header/PreviousLink/PreviousLink.css.map +1 -1
  51. package/dist/Layout/Header/PreviousLink/PreviousLink.scss +5 -5
  52. package/dist/Link/Link.css +1 -1
  53. package/dist/Link/Link.css.map +1 -1
  54. package/dist/Link/Link.scss +8 -10
  55. package/dist/List/ClickList/ClickList.css +1 -1
  56. package/dist/List/ClickList/ClickList.css.map +1 -1
  57. package/dist/List/ClickList/ClickList.scss +12 -12
  58. package/dist/List/ContentItemDuo/ContentItemDuo.css +1 -1
  59. package/dist/List/ContentItemDuo/ContentItemDuo.css.map +1 -1
  60. package/dist/List/ContentItemDuo/ContentItemDuo.scss +5 -5
  61. package/dist/List/ContentItemMono/ContentItemMono.css +1 -1
  62. package/dist/List/ContentItemMono/ContentItemMono.css.map +1 -1
  63. package/dist/List/ContentItemMono/ContentItemMono.scss +12 -12
  64. package/dist/List/ContentTabList/ContentTabList.css +1 -1
  65. package/dist/List/ContentTabList/ContentTabList.css.map +1 -1
  66. package/dist/List/ContentTabList/ContentTabList.scss +5 -5
  67. package/dist/List/List.css +1 -1
  68. package/dist/List/List.css.map +1 -1
  69. package/dist/List/List.scss +1 -1
  70. package/dist/Loader/Loader.css +1 -1
  71. package/dist/Loader/Loader.css.map +1 -1
  72. package/dist/Loader/Loader.scss +2 -4
  73. package/dist/Modal/Modal.css +1 -1
  74. package/dist/Modal/Modal.css.map +1 -1
  75. package/dist/Modal/Modal.scss +10 -10
  76. package/dist/Pagination/Pagination.css +1 -1
  77. package/dist/Pagination/Pagination.css.map +1 -1
  78. package/dist/Pagination/Pagination.scss +1 -3
  79. package/dist/Pagination/PaginationDesktop.css +1 -1
  80. package/dist/Pagination/PaginationDesktop.css.map +1 -1
  81. package/dist/Pagination/PaginationDesktop.scss +4 -6
  82. package/dist/Pagination/PaginationMobile.css +1 -1
  83. package/dist/Pagination/PaginationMobile.css.map +1 -1
  84. package/dist/Pagination/PaginationMobile.scss +4 -6
  85. package/dist/Stepper/Stepper.css +1 -1
  86. package/dist/Stepper/Stepper.css.map +1 -1
  87. package/dist/Stepper/Stepper.scss +8 -10
  88. package/dist/Tabs/Tabs.css +1 -1
  89. package/dist/Tabs/Tabs.css.map +1 -1
  90. package/dist/Tabs/Tabs.scss +6 -8
  91. package/dist/Tag/Tag.css +1 -1
  92. package/dist/Tag/Tag.css.map +1 -1
  93. package/dist/Tag/Tag.scss +12 -12
  94. package/dist/Title/Title.css +1 -1
  95. package/dist/Title/Title.css.map +1 -1
  96. package/dist/Title/Title.scss +32 -36
  97. package/dist/common/tokens.css +1 -0
  98. package/dist/common/tokens.css.map +1 -0
  99. package/dist/common/tokens.scss +119 -0
  100. package/dist/look-and-feel.css +1 -1
  101. package/dist/look-and-feel.css.map +1 -1
  102. package/dist/look-and-feel.scss +1 -0
  103. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Title/Title.scss%23sass","../../src/Title/Title.scss","../../src/common/common.scss"],"names":[],"mappings":"AAEA,UCAA,UAAA,CDCE,UCAF,CDGE,iBAEE,4BAAA,CACA,eAAA,CAFA,QCCJ,CDIE,oBACE,aAAA,CACA,4CEZqB,CFarB,kBAAA,CACA,eAAA,CACA,kBCFJ,CDKE,gBACE,oBAAA,CACA,sCCHJ,CDME,0BACE,YAAA,CACA,UCJJ,CDOE,+BACE,YAAA,CACA,UCLJ,CDOI,gDACE,aCLN,CDUI,iCACE,cAAA,CACA,kBCRN,CDaI,gCACE,gBAAA,CACA,oBCXN,CDgBA,yBAGM,iCACE,gBAAA,CACA,oBCfN,CDoBI,gCClBJ,iBAAA,CDoBM,mBClBN,CDsBE,kCACE,cAAA,CCpBJ,mBACF,CACA","file":"Title.css","sourcesContent":["@use \"../common/common\" as common;\n\n.af-title {\n gap: 0.25rem;\n color: common.$color-gray-900;\n\n &__title {\n margin: 0;\n font-family: common.$font-family-publico;\n font-weight: 700;\n }\n\n &__subtitle {\n display: block;\n font-family: common.$font-family-base;\n font-size: 1.125rem;\n font-weight: 400;\n line-height: 1.4rem;\n }\n\n &__icon {\n border-radius: 0.75rem;\n box-shadow: 0 0.125rem 0.5rem 0 rgba(common.$color-axa, 0.15);\n }\n\n &__text-container {\n display: grid;\n gap: 0.25rem;\n }\n\n &:has(&__icon) {\n display: flex;\n gap: 0.75rem;\n\n .af-title__title {\n color: common.$color-axa;\n }\n }\n\n &--xl {\n h1.af-title__title {\n font-size: 2rem;\n line-height: 2.5rem;\n }\n }\n\n &--l {\n h1.af-title__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n .af-title {\n &--xl {\n h1.af-title__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n }\n\n &--l {\n h1.af-title__title {\n font-size: 1.25rem;\n line-height: 1.56rem;\n }\n }\n\n span.af-title__subtitle {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n}\n","@use \"../common/common\" as common;\n\n.af-title {\n gap: 0.25rem;\n color: common.$color-gray-900;\n\n &__title {\n margin: 0;\n font-family: common.$font-family-publico;\n font-weight: 700;\n }\n\n &__subtitle {\n display: block;\n font-family: common.$font-family-base;\n font-size: 1.125rem;\n font-weight: 400;\n line-height: 1.4rem;\n }\n\n &__icon {\n border-radius: 0.75rem;\n box-shadow: 0 0.125rem 0.5rem 0 rgba(common.$color-axa, 0.15);\n }\n\n &__text-container {\n display: grid;\n gap: 0.25rem;\n }\n\n &:has(&__icon) {\n display: flex;\n gap: 0.75rem;\n\n .af-title__title {\n color: common.$color-axa;\n }\n }\n\n &--xl {\n h1.af-title__title {\n font-size: 2rem;\n line-height: 2.5rem;\n }\n }\n\n &--l {\n h1.af-title__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n .af-title {\n &--xl {\n h1.af-title__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n }\n\n &--l {\n h1.af-title__title {\n font-size: 1.25rem;\n line-height: 1.56rem;\n }\n }\n\n span.af-title__subtitle {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n}\n","@import \"./mixins\";\n\n$font-family-sans-serif: \"Source Sans Pro\", arial, sans-serif !default;\n$font-family-serif: georgia, times, \"Times New Roman\", serif !default;\n$font-family-base: $font-family-sans-serif !default;\n$font-family-publico-bold: \"Publico Headline Bold\" !default;\n$font-family-publico: \"Publico Headline\" !default;\n// colors\n\n$color-axa: #00008f !default;\n$color-white: #fff !default;\n$color-black: #000 !default;\n$color-red: #ff1721 !default;\n$color-gray: #5f5f5f !default;\n$color-red-700: #c91432 !default;\n$color-blue-1: #000072 !default;\n$color-blue-2: #f8f8ff !default;\n$color-blue-3: #36f !default;\n$color-btn-light: #3333a5 !default;\n$color-btn-business: #c94e14 !default;\n$color-btn-business-dark: #a8391c !default;\n$color-btn-business-light: #df7e65 !default;\n$color-btn-disabled-text: #999 !default;\n$color-btn-error-text: #a11028 !default;\n$color-btn-error-bg: #fff3f5 !default;\n$color-btn-tertiary-bg: #eef !default;\n$color-btn-tertiary-bg-darker: #e4e4ff !default;\n$color-btn-tertiary-bg-lighter: #f8f8ff !default;\n$color-oceanBlue: #4976ba !default;\n$color-gray-1: #ccc !default;\n$color-gray-200: #f3f3f3;\n$color-gray-300: #e9ecf2;\n$color-gray-400: #e5e5e5;\n$color-gray-500: #999;\n$color-gray-700: #5f5f5f;\n$color-gray-900: #333 !default;\n$color-green-600: #118635 !default;\n$color-border: #f3f3f3 !default;\n$color-focus: #36f !default;\n\n// others\n\n$default-border-radius: 4px !default;\n\n$transition-duration: 0.2s !default;\n\n// spacing\n\n$sizing-u0: 0 !default;\n$sizing-u05: 0.4rem !default;\n$sizing-u1: 0.8rem !default;\n$sizing-u2: 1.6rem !default;\n$sizing-u3: 2.4rem !default;\n$sizing-u4: 3.2rem !default;\n$sizing-u5: 4rem !default;\n$sizing-u6: 4.8rem !default;\n$sizing-u7: 5.6rem !default;\n$sizing-u8: 6.4rem !default;\n$sizing-u9: 7.2rem !default;\n$sizing-u10: 8rem !default;\n$spacing-u0: 0 !default;\n$spacing-u05: 0.4rem !default;\n$spacing-u1: 0.8rem !default;\n$spacing-u2: 1.6rem !default;\n$spacing-u3: 2.4rem !default;\n$spacing-u4: 3.2rem !default;\n$spacing-u5: 4rem !default;\n$spacing-u6: 4.8rem !default;\n$spacing-u7: 5.6rem !default;\n$spacing-u8: 6.4rem !default;\n$spacing-u9: 7.2rem !default;\n$spacing-u10: 8rem !default;\n$spacing-u11: 8.8rem !default;\n$spacing-u12: 9.6rem !default;\n$spacing-u13: 10.4rem !default;\n$spacing-u14: 11.2rem !default;\n$spacing-u15: 12rem !default;\n$spacing-u16: 12.8rem !default;\n$spacing-u17: 13.6rem !default;\n$spacing-u18: 14.4rem !default;\n$spacing-u19: 15.2rem !default;\n$spacing-u20: 16rem !default;\n$screen-size-668: s !default;\n$screen-size-1024: m !default;\n$screen-size-1200: oldl !default;\n$screen-size-1280: l !default;\n$screen-size-1540: oldxl !default;\n$screen-size-1600: xl !default;\n$screen-size-s: 668px !default;\n$screen-size-m: 1024px !default;\n$screen-size-l: 1280px !default;\n$screen-size-xl: 1600px !default;\n$screen-size-oldl: 1200px !default;\n$screen-size-oldxl: 1540px !default;\n\n$error-custom-border: #d18e8e !default;\n$error-custom-bg: #ffbfbf !default;\n\n$color-alertDanger-colorBorder: #c8b282 !default;\n$color-alertDanger-bgColor: #f1d596 !default;\n\n// breakpoints\n\n$breakpoint-xs: 0 !default;\n$breakpoint-sm: 667px !default;\n$breakpoint-md: 1023px !default;\n$breakpoint-lg: 1279px !default;\n$breakpoint-xl: 1599px !default;\n"]}
1
+ {"version":3,"sources":["../../src/common/reboot.scss","../../src/Title/Title.scss","../../src/Title/Title.scss%23sass"],"names":[],"mappings":"AAAA,iBCGA,qBACA,CDEA,KACE,sBAAA,CACA,gBAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CACA,uCCCF,CDEA,sEAUE,aCCF,CDEA,KAQE,qBAAA,CADA,UAAA,CALA,4CAAA,CACA,cAAA,CACA,eAAA,CACA,eAAA,CAJA,QAAA,CAKA,eCGF,CDEA,sBACE,mBCCF,CDEA,GACE,kBAAA,CACA,QAAA,CACA,gBCCF,CDEA,kBCOA,mBAAA,CDDE,YCEF,CDEA,EAEE,kBAAA,CADA,YCEF,CDEA,sCAEE,eAAA,CAIA,WAAA,CAHA,yBAAA,CACA,wCAAA,CAAA,gCAAA,CACA,qCAAA,CAAA,6BCEF,CDEA,QAEE,iBAAA,CACA,mBCCF,CDEA,iBALE,kBCUF,CDLA,SAGE,YCEF,CDEA,wBAIE,eCCF,CDEA,GACE,eCCF,CDEA,GACE,mBAAA,CACA,aCCF,CDEA,WACE,eCCF,CDEA,SAEE,kBCCF,CDEA,MACE,aCCF,CDEA,QAIE,aAAA,CACA,aAAA,CAHA,iBAAA,CACA,sBCGF,CDEA,IACE,aCCF,CDEA,IACE,SCCF,CDEA,EAGE,wBAAA,CADA,aAAA,CADA,oBCGF,CDEA,QAEE,aAAA,CADA,yBCEF,CDOA,uFAGE,aAAA,CADA,oBCEF,CDEA,+BACE,SCCF,CDEA,kBAIE,sFAAA,CAEA,aCAF,CDGA,IAEE,kBAAA,CADA,YAAA,CAEA,aCAF,CDGA,OACE,eCAF,CDGA,IACE,iBCCF,CDGA,QAHE,qBCKF,CDFA,IAEE,eCAF,CDGA,MACE,wBCAF,CDGA,QAGE,mBAAA,CAEA,aAAA,CAHA,oBAAA,CADA,iBAAA,CAGA,eCCF,CDGA,GACE,kBCAF,CDGA,OACE,eCAF,CDGA,sCAME,mBAAA,CACA,iBAAA,CACA,mBAAA,CAHA,QCGF,CDGA,aAEE,gBCAF,CDGA,cAEE,mBCAF,CDGA,OACE,gBCAF,CDGA,gDAIE,yBAAA,CAAA,iBCAF,CDGA,aACE,kBAAA,CACA,yCCAF,CDGA,4GAIE,cCAF,CDGA,wHAKE,iBAAA,CADA,SCCF,CDGA,uCAEE,qBAAA,CACA,SCAF,CDGA,+EAIE,0BAAA,CAAA,kBCAF,CDGA,SACE,aAAA,CACA,eCAF,CDGA,SAIE,QAAA,CAFA,QAAA,CADA,WAAA,CAEA,SCCF,CDGA,OASE,aAAA,CARA,aAAA,CAKA,gBAAA,CACA,mBAAA,CAHA,mBAAA,CADA,cAAA,CAEA,SAAA,CAGA,kBAAA,CANA,UCOF,CDGA,SACE,sBCAF,CDGA,kFAEE,WCAF,CDGA,cAEE,uBAAA,CAAA,eAAA,CADA,mBCCF,CDGA,yCACE,uBAAA,CAAA,eCAF,CDGA,6BAEE,yBAAA,CAAA,iBAAA,CADA,YCCF,CDGA,OACE,oBCAF,CDGA,QAEE,cAAA,CADA,iBCCF,CDGA,SACE,YCAF,CDGA,SACE,sBCAF,CCvUA,UACE,gBAAA,CAIA,2BAAA,CAFA,YAAA,CACA,iBD0UF,CCvUE,iBAGE,sCAAA,CACA,eAAA,CAFA,+BAAA,CADA,QD4UJ,CCtUE,oBACE,aAAA,CAEA,mCAAA,CACA,kBAAA,CACA,eAAA,CAHA,+BAAA,CAIA,kBDwUJ,CCrUE,gBACE,oBAAA,CAGA,uDAAA,CAFA,aAAA,CACA,YDwUJ,CCpUE,+BACE,cAAA,CACA,kBDsUJ,CCnUE,8BACE,gBAAA,CACA,oBDqUJ,CClUE,+BACE,gBAAA,CAEA,8BDmUJ,CCjUI,gDACE,sBDmUN,CC9TA,yBAEI,+BACE,gBAAA,CACA,oBDgUJ,CC7TE,8BACE,iBAAA,CACA,mBD+TJ,CC5TE,oBACE,cAAA,CACA,mBD8TJ,CACF","file":"Title.css","sourcesContent":["*,\n::after,\n::before {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n line-height: 1.15;\n text-size-adjust: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n\narticle,\naside,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection {\n display: block;\n}\n\nbody {\n margin: 0;\n font-family: \"Source Sans Pro\", Arial, sans-serif;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n text-align: left;\n color: #333;\n background-color: #fff;\n}\n\n[tabindex=\"-1\"]:focus {\n outline: 0 !important;\n}\n\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n\np {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nabbr[data-original-title],\nabbr[title] {\n border-bottom: 0;\n text-decoration: underline;\n text-decoration: underline dotted;\n text-decoration-skip-ink: none;\n cursor: help;\n}\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\ndl,\nol,\nul {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nol ul,\nul ol,\nul ul {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: 700;\n}\n\ndd {\n margin-bottom: 0.5rem;\n margin-left: 0;\n}\n\nblockquote {\n margin: 0 0 1rem;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n position: relative;\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\na {\n text-decoration: none;\n color: #00008f;\n background-color: transparent;\n}\n\na:hover {\n text-decoration: underline;\n color: #000043;\n}\n\na:not([href], [tabindex]) {\n text-decoration: none;\n color: inherit;\n}\n\na:not([href], [tabindex]):focus,\na:not([href], [tabindex]):hover {\n text-decoration: none;\n color: inherit;\n}\n\na:not([href], [tabindex]):focus {\n outline: 0;\n}\n\ncode,\nkbd,\npre,\nsamp {\n font-family: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n font-size: 1em;\n}\n\npre {\n margin-top: 0;\n margin-bottom: 1rem;\n overflow: auto;\n}\n\nfigure {\n margin: 0 0 1rem;\n}\n\nimg {\n border-style: none;\n vertical-align: middle;\n}\n\nsvg {\n vertical-align: middle;\n overflow: hidden;\n}\n\ntable {\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n caption-side: bottom;\n text-align: left;\n color: #6c757d;\n}\n\nth {\n text-align: inherit;\n}\n\nbutton {\n border-radius: 0;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nselect {\n word-wrap: normal;\n}\n\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\nbutton {\n appearance: button;\n}\n\nbutton:focus {\n outline: 1px dotted;\n outline: 5px auto -webkit-focus-ring-color;\n}\n\n[type=\"button\"]:not(:disabled),\n[type=\"reset\"]:not(:disabled),\n[type=\"submit\"]:not(:disabled),\nbutton:not(:disabled) {\n cursor: pointer;\n}\n\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner,\nbutton::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\ninput[type=\"date\"],\ninput[type=\"datetime-local\"],\ninput[type=\"month\"],\ninput[type=\"time\"] {\n appearance: listbox;\n}\n\ntextarea {\n overflow: auto;\n resize: vertical;\n}\n\nfieldset {\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n}\n\nlegend {\n display: block;\n width: 100%;\n max-width: 100%;\n margin-bottom: 0.5rem;\n padding: 0;\n font-size: 1.5rem;\n line-height: inherit;\n white-space: normal;\n color: inherit;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n outline-offset: -2px;\n appearance: none;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n appearance: none;\n}\n\n::-webkit-file-upload-button {\n font: inherit;\n appearance: button;\n}\n\noutput {\n display: inline-block;\n}\n\nsummary {\n display: list-item;\n cursor: pointer;\n}\n\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none !important;\n}\n","@use \"../common/common\" as common;\n@use \"../common/reboot\";\n\n.af-title {\n --texts-column: 1;\n\n display: grid;\n gap: common.rem(4) common.rem(12);\n color: var(--color-gray-900);\n\n &__title {\n margin: 0;\n grid-column: var(--texts-column);\n font-family: var(--font-family-publico);\n font-weight: 700;\n }\n\n &__subtitle {\n display: block;\n grid-column: var(--texts-column);\n font-family: var(--font-family-base);\n font-size: 1.125rem;\n font-weight: 400;\n line-height: 1.4rem;\n }\n\n &__icon {\n border-radius: 0.75rem;\n grid-column: 1;\n grid-row: 1/3;\n box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n }\n\n &--xl &__title {\n font-size: 2rem;\n line-height: 2.5rem;\n }\n\n &--l &__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n\n &:has(&__icon) {\n --texts-column: 2;\n\n grid-template-columns: auto 1fr;\n\n .af-title__title {\n color: var(--color-axa);\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n .af-title {\n &--xl &__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n\n &--l &__title {\n font-size: 1.25rem;\n line-height: 1.56rem;\n }\n\n &__subtitle {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n}\n","@use \"../common/common\" as common;\n@use \"../common/reboot\";\n\n.af-title {\n --texts-column: 1;\n\n display: grid;\n gap: common.rem(4) common.rem(12);\n color: var(--color-gray-900);\n\n &__title {\n margin: 0;\n grid-column: var(--texts-column);\n font-family: var(--font-family-publico);\n font-weight: 700;\n }\n\n &__subtitle {\n display: block;\n grid-column: var(--texts-column);\n font-family: var(--font-family-base);\n font-size: 1.125rem;\n font-weight: 400;\n line-height: 1.4rem;\n }\n\n &__icon {\n border-radius: 0.75rem;\n grid-column: 1;\n grid-row: 1/3;\n box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);\n }\n\n &--xl &__title {\n font-size: 2rem;\n line-height: 2.5rem;\n }\n\n &--l &__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n\n &:has(&__icon) {\n --texts-column: 2;\n\n grid-template-columns: auto 1fr;\n\n .af-title__title {\n color: var(--color-axa);\n }\n }\n}\n\n@media (width <= #{common.$breakpoint-md}) {\n .af-title {\n &--xl &__title {\n font-size: 1.5rem;\n line-height: 1.875rem;\n }\n\n &--l &__title {\n font-size: 1.25rem;\n line-height: 1.56rem;\n }\n\n &__subtitle {\n font-size: 1rem;\n line-height: 1.25rem;\n }\n }\n}\n"]}
@@ -1,18 +1,24 @@
1
1
  @use "../common/common" as common;
2
+ @use "../common/reboot";
2
3
 
3
4
  .af-title {
4
- gap: 0.25rem;
5
- color: common.$color-gray-900;
5
+ --texts-column: 1;
6
+
7
+ display: grid;
8
+ gap: common.rem(4) common.rem(12);
9
+ color: var(--color-gray-900);
6
10
 
7
11
  &__title {
8
12
  margin: 0;
9
- font-family: common.$font-family-publico;
13
+ grid-column: var(--texts-column);
14
+ font-family: var(--font-family-publico);
10
15
  font-weight: 700;
11
16
  }
12
17
 
13
18
  &__subtitle {
14
19
  display: block;
15
- font-family: common.$font-family-base;
20
+ grid-column: var(--texts-column);
21
+ font-family: var(--font-family-base);
16
22
  font-size: 1.125rem;
17
23
  font-weight: 400;
18
24
  line-height: 1.4rem;
@@ -20,55 +26,45 @@
20
26
 
21
27
  &__icon {
22
28
  border-radius: 0.75rem;
23
- box-shadow: 0 0.125rem 0.5rem 0 rgba(common.$color-axa, 0.15);
29
+ grid-column: 1;
30
+ grid-row: 1/3;
31
+ box-shadow: 0 0.125rem 0.5rem 0 rgba(var(--color-axa), 0.15);
24
32
  }
25
33
 
26
- &__text-container {
27
- display: grid;
28
- gap: 0.25rem;
34
+ &--xl &__title {
35
+ font-size: 2rem;
36
+ line-height: 2.5rem;
29
37
  }
30
38
 
31
- &:has(&__icon) {
32
- display: flex;
33
- gap: 0.75rem;
34
-
35
- .af-title__title {
36
- color: common.$color-axa;
37
- }
39
+ &--l &__title {
40
+ font-size: 1.5rem;
41
+ line-height: 1.875rem;
38
42
  }
39
43
 
40
- &--xl {
41
- h1.af-title__title {
42
- font-size: 2rem;
43
- line-height: 2.5rem;
44
- }
45
- }
44
+ &:has(&__icon) {
45
+ --texts-column: 2;
46
46
 
47
- &--l {
48
- h1.af-title__title {
49
- font-size: 1.5rem;
50
- line-height: 1.875rem;
47
+ grid-template-columns: auto 1fr;
48
+
49
+ .af-title__title {
50
+ color: var(--color-axa);
51
51
  }
52
52
  }
53
53
  }
54
54
 
55
55
  @media (width <= #{common.$breakpoint-md}) {
56
56
  .af-title {
57
- &--xl {
58
- h1.af-title__title {
59
- font-size: 1.5rem;
60
- line-height: 1.875rem;
61
- }
57
+ &--xl &__title {
58
+ font-size: 1.5rem;
59
+ line-height: 1.875rem;
62
60
  }
63
61
 
64
- &--l {
65
- h1.af-title__title {
66
- font-size: 1.25rem;
67
- line-height: 1.56rem;
68
- }
62
+ &--l &__title {
63
+ font-size: 1.25rem;
64
+ line-height: 1.56rem;
69
65
  }
70
66
 
71
- span.af-title__subtitle {
67
+ &__subtitle {
72
68
  font-size: 1rem;
73
69
  line-height: 1.25rem;
74
70
  }
@@ -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:Source Sans Pro,arial,sans-serif;--font-family-publico-bold:Publico Headline Bold;--font-family-publico:Publico Headline;--color-white:#fff;--color-black:#000;--color-axa:#00008f;--color-blue-1:#000072;--color-blue-2:#f8f8ff;--color-blue-3:#36f;--color-ocean-blue:#4976ba;--color-btn-light:#3333a5;--color-focus:#36f;--color-btn-tertiary-bg:#eef;--color-btn-tertiary-bg-darker:#e4e4ff;--color-btn-tertiary-bg-lighter:#f8f8ff;--color-red:#ff1721;--color-red-700:#c91432;--color-btn-error-text:#a11028;--color-btn-error-bg:#fff3f5;--error-custom-border:#d18e8e;--error-custom-bg:#ffbfbf;--color-alert-danger-color-border:#c8b282;--color-alert-danger-bg-color:#f1d596;--color-btn-business:#c94e14;--color-btn-business-dark:#a8391c;--color-btn-business-light:#df7e65;--color-gray:#5f5f5f;--color-gray-1:#ccc;--color-gray-200:#f3f3f3;--color-gray-300:#e9ecf2;--color-gray-400:#e5e5e5;--color-gray-500:#999;--color-gray-700:#5f5f5f;--color-gray-900:#333;--color-btn-disabled-text:#999;--color-border:#f3f3f3;--color-green-600:#118635;--sizing-u0:0;--sizing-u05:0.4rem;--sizing-u1:0.8rem;--sizing-u2:1.6rem;--sizing-u3:2.4rem;--sizing-u4:3.2rem;--sizing-u5:4rem;--sizing-u6:4.8rem;--sizing-u7:5.6rem;--sizing-u8:6.4rem;--sizing-u9:7.2rem;--sizing-u10:8rem;--spacing-u05:0.4rem;--spacing-u0:0;--spacing-u1:0.8rem;--spacing-u2:1.6rem;--spacing-u3:2.4rem;--spacing-u4:3.2rem;--spacing-u5:4rem;--spacing-u6:4.8rem;--spacing-u7:5.6rem;--spacing-u8:6.4rem;--spacing-u9:7.2rem;--spacing-u10:8rem;--spacing-u11:8.8rem;--spacing-u12:9.6rem;--spacing-u13:10.4rem;--spacing-u14:11.2rem;--spacing-u15:12rem;--spacing-u16:12.8rem;--spacing-u17:13.6rem;--spacing-u18:14.4rem;--spacing-u19:15.2rem;--spacing-u20:16rem;--screen-size-s:668px;--screen-size-m:1024px;--screen-size-l:1280px;--screen-size-xl:1600px;--screen-size-oldl:1200px;--screen-size-oldxl:1540px;--breakpoint-xs:0;--breakpoint-sm:667px;--breakpoint-md:1023px;--breakpoint-lg:1279px;--breakpoint-xl:1599px;--default-border-radius:4px;--transition-duration:0.2s}
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/common/tokens.scss%23sass","../../src/common/tokens.scss"],"names":[],"mappings":"AAEA,MCAA,yDAAA,CDGE,uDAAA,CACA,mDAAA,CACA,gDAAA,CACA,sCAAA,CAIA,kBAAA,CACA,kBAAA,CAGA,mBAAA,CACA,sBAAA,CACA,sBAAA,CACA,mBAAA,CACA,0BAAA,CACA,yBAAA,CACA,kBAAA,CACA,4BAAA,CACA,sCAAA,CACA,uCAAA,CAGA,mBAAA,CACA,uBAAA,CACA,8BAAA,CACA,4BAAA,CACA,6BAAA,CACA,yBAAA,CAGA,yCAAA,CACA,qCAAA,CACA,4BAAA,CACA,iCAAA,CACA,kCAAA,CAGA,oBAAA,CACA,mBAAA,CACA,wBAAA,CACA,wBAAA,CACA,wBAAA,CACA,qBAAA,CACA,wBAAA,CACA,qBAAA,CACA,8BAAA,CACA,sBAAA,CAGA,yBAAA,CAIA,aAAA,CACA,mBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,gBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,kBAAA,CACA,iBAAA,CAIA,oBAAA,CACA,cAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,iBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kBAAA,CACA,oBAAA,CACA,oBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,qBAAA,CACA,mBAAA,CAIA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,uBAAA,CACA,yBAAA,CACA,0BAAA,CACA,iBAAA,CACA,qBAAA,CACA,sBAAA,CACA,sBAAA,CACA,sBAAA,CAIA,2BAAA,CAIA,0BClBF","file":"tokens.css","sourcesContent":["@use \"./common\" as common;\n\n:root {\n /* FONTS *******************************************************************/\n --font-family-sans-serif: #{common.$font-family-sans-serif};\n --font-family-serif: #{common.$font-family-serif};\n --font-family-base: #{common.$font-family-base};\n --font-family-publico-bold: #{common.$font-family-publico-bold};\n --font-family-publico: #{common.$font-family-publico};\n\n /* COLORS *******************************************************************/\n\n --color-white: #{common.$color-white};\n --color-black: #{common.$color-black};\n\n /* blue */\n --color-axa: #{common.$color-axa};\n --color-blue-1: #{common.$color-blue-1};\n --color-blue-2: #{common.$color-blue-2};\n --color-blue-3: #{common.$color-blue-3};\n --color-ocean-blue: #{common.$color-oceanBlue};\n --color-btn-light: #{common.$color-btn-light};\n --color-focus: #{common.$color-focus};\n --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n /* red */\n --color-red: #{common.$color-red};\n --color-red-700: #{common.$color-red-700};\n --color-btn-error-text: #{common.$color-btn-error-text};\n --color-btn-error-bg: #{common.$color-btn-error-bg};\n --error-custom-border: #{common.$error-custom-border};\n --error-custom-bg: #{common.$error-custom-bg};\n\n /* orange */\n --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n --color-btn-business: #{common.$color-btn-business};\n --color-btn-business-dark: #{common.$color-btn-business-dark};\n --color-btn-business-light: #{common.$color-btn-business-light};\n\n /* gray */\n --color-gray: #{common.$color-gray};\n --color-gray-1: #{common.$color-gray-1};\n --color-gray-200: #{common.$color-gray-200};\n --color-gray-300: #{common.$color-gray-300};\n --color-gray-400: #{common.$color-gray-400};\n --color-gray-500: #{common.$color-gray-500};\n --color-gray-700: #{common.$color-gray-700};\n --color-gray-900: #{common.$color-gray-900};\n --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n --color-border: #{common.$color-border};\n\n /* green */\n --color-green-600: #{common.$color-green-600};\n\n /* SIZING *******************************************************************/\n\n --sizing-u0: #{common.$sizing-u0};\n --sizing-u05: #{common.$sizing-u05};\n --sizing-u1: #{common.$sizing-u1};\n --sizing-u2: #{common.$sizing-u2};\n --sizing-u3: #{common.$sizing-u3};\n --sizing-u4: #{common.$sizing-u4};\n --sizing-u5: #{common.$sizing-u5};\n --sizing-u6: #{common.$sizing-u6};\n --sizing-u7: #{common.$sizing-u7};\n --sizing-u8: #{common.$sizing-u8};\n --sizing-u9: #{common.$sizing-u9};\n --sizing-u10: #{common.$sizing-u10};\n\n /* SPACING *******************************************************************/\n\n --spacing-u05: #{common.$spacing-u05};\n --spacing-u0: #{common.$spacing-u0};\n --spacing-u1: #{common.$spacing-u1};\n --spacing-u2: #{common.$spacing-u2};\n --spacing-u3: #{common.$spacing-u3};\n --spacing-u4: #{common.$spacing-u4};\n --spacing-u5: #{common.$spacing-u5};\n --spacing-u6: #{common.$spacing-u6};\n --spacing-u7: #{common.$spacing-u7};\n --spacing-u8: #{common.$spacing-u8};\n --spacing-u9: #{common.$spacing-u9};\n --spacing-u10: #{common.$spacing-u10};\n --spacing-u11: #{common.$spacing-u11};\n --spacing-u12: #{common.$spacing-u12};\n --spacing-u13: #{common.$spacing-u13};\n --spacing-u14: #{common.$spacing-u14};\n --spacing-u15: #{common.$spacing-u15};\n --spacing-u16: #{common.$spacing-u16};\n --spacing-u17: #{common.$spacing-u17};\n --spacing-u18: #{common.$spacing-u18};\n --spacing-u19: #{common.$spacing-u19};\n --spacing-u20: #{common.$spacing-u20};\n\n /* SCREENS & BREAKPOINTS *******************************************************************/\n\n --screen-size-s: #{common.$screen-size-s};\n --screen-size-m: #{common.$screen-size-m};\n --screen-size-l: #{common.$screen-size-l};\n --screen-size-xl: #{common.$screen-size-xl};\n --screen-size-oldl: #{common.$screen-size-oldl};\n --screen-size-oldxl: #{common.$screen-size-oldxl};\n --breakpoint-xs: #{common.$breakpoint-xs};\n --breakpoint-sm: #{common.$breakpoint-sm};\n --breakpoint-md: #{common.$breakpoint-md};\n --breakpoint-lg: #{common.$breakpoint-lg};\n --breakpoint-xl: #{common.$breakpoint-xl};\n\n /* BORDERS *******************************************************************/\n\n --default-border-radius: #{common.$default-border-radius};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n","@use \"./common\" as common;\n\n:root {\n /* FONTS *******************************************************************/\n --font-family-sans-serif: #{common.$font-family-sans-serif};\n --font-family-serif: #{common.$font-family-serif};\n --font-family-base: #{common.$font-family-base};\n --font-family-publico-bold: #{common.$font-family-publico-bold};\n --font-family-publico: #{common.$font-family-publico};\n\n /* COLORS *******************************************************************/\n\n --color-white: #{common.$color-white};\n --color-black: #{common.$color-black};\n\n /* blue */\n --color-axa: #{common.$color-axa};\n --color-blue-1: #{common.$color-blue-1};\n --color-blue-2: #{common.$color-blue-2};\n --color-blue-3: #{common.$color-blue-3};\n --color-ocean-blue: #{common.$color-oceanBlue};\n --color-btn-light: #{common.$color-btn-light};\n --color-focus: #{common.$color-focus};\n --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};\n --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};\n --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};\n\n /* red */\n --color-red: #{common.$color-red};\n --color-red-700: #{common.$color-red-700};\n --color-btn-error-text: #{common.$color-btn-error-text};\n --color-btn-error-bg: #{common.$color-btn-error-bg};\n --error-custom-border: #{common.$error-custom-border};\n --error-custom-bg: #{common.$error-custom-bg};\n\n /* orange */\n --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};\n --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};\n --color-btn-business: #{common.$color-btn-business};\n --color-btn-business-dark: #{common.$color-btn-business-dark};\n --color-btn-business-light: #{common.$color-btn-business-light};\n\n /* gray */\n --color-gray: #{common.$color-gray};\n --color-gray-1: #{common.$color-gray-1};\n --color-gray-200: #{common.$color-gray-200};\n --color-gray-300: #{common.$color-gray-300};\n --color-gray-400: #{common.$color-gray-400};\n --color-gray-500: #{common.$color-gray-500};\n --color-gray-700: #{common.$color-gray-700};\n --color-gray-900: #{common.$color-gray-900};\n --color-btn-disabled-text: #{common.$color-btn-disabled-text};\n --color-border: #{common.$color-border};\n\n /* green */\n --color-green-600: #{common.$color-green-600};\n\n /* SIZING *******************************************************************/\n\n --sizing-u0: #{common.$sizing-u0};\n --sizing-u05: #{common.$sizing-u05};\n --sizing-u1: #{common.$sizing-u1};\n --sizing-u2: #{common.$sizing-u2};\n --sizing-u3: #{common.$sizing-u3};\n --sizing-u4: #{common.$sizing-u4};\n --sizing-u5: #{common.$sizing-u5};\n --sizing-u6: #{common.$sizing-u6};\n --sizing-u7: #{common.$sizing-u7};\n --sizing-u8: #{common.$sizing-u8};\n --sizing-u9: #{common.$sizing-u9};\n --sizing-u10: #{common.$sizing-u10};\n\n /* SPACING *******************************************************************/\n\n --spacing-u05: #{common.$spacing-u05};\n --spacing-u0: #{common.$spacing-u0};\n --spacing-u1: #{common.$spacing-u1};\n --spacing-u2: #{common.$spacing-u2};\n --spacing-u3: #{common.$spacing-u3};\n --spacing-u4: #{common.$spacing-u4};\n --spacing-u5: #{common.$spacing-u5};\n --spacing-u6: #{common.$spacing-u6};\n --spacing-u7: #{common.$spacing-u7};\n --spacing-u8: #{common.$spacing-u8};\n --spacing-u9: #{common.$spacing-u9};\n --spacing-u10: #{common.$spacing-u10};\n --spacing-u11: #{common.$spacing-u11};\n --spacing-u12: #{common.$spacing-u12};\n --spacing-u13: #{common.$spacing-u13};\n --spacing-u14: #{common.$spacing-u14};\n --spacing-u15: #{common.$spacing-u15};\n --spacing-u16: #{common.$spacing-u16};\n --spacing-u17: #{common.$spacing-u17};\n --spacing-u18: #{common.$spacing-u18};\n --spacing-u19: #{common.$spacing-u19};\n --spacing-u20: #{common.$spacing-u20};\n\n /* SCREENS & BREAKPOINTS *******************************************************************/\n\n --screen-size-s: #{common.$screen-size-s};\n --screen-size-m: #{common.$screen-size-m};\n --screen-size-l: #{common.$screen-size-l};\n --screen-size-xl: #{common.$screen-size-xl};\n --screen-size-oldl: #{common.$screen-size-oldl};\n --screen-size-oldxl: #{common.$screen-size-oldxl};\n --breakpoint-xs: #{common.$breakpoint-xs};\n --breakpoint-sm: #{common.$breakpoint-sm};\n --breakpoint-md: #{common.$breakpoint-md};\n --breakpoint-lg: #{common.$breakpoint-lg};\n --breakpoint-xl: #{common.$breakpoint-xl};\n\n /* BORDERS *******************************************************************/\n\n --default-border-radius: #{common.$default-border-radius};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n"]}
@@ -0,0 +1,119 @@
1
+ @use "./common" as common;
2
+
3
+ :root {
4
+ /* FONTS *******************************************************************/
5
+ --font-family-sans-serif: #{common.$font-family-sans-serif};
6
+ --font-family-serif: #{common.$font-family-serif};
7
+ --font-family-base: #{common.$font-family-base};
8
+ --font-family-publico-bold: #{common.$font-family-publico-bold};
9
+ --font-family-publico: #{common.$font-family-publico};
10
+
11
+ /* COLORS *******************************************************************/
12
+
13
+ --color-white: #{common.$color-white};
14
+ --color-black: #{common.$color-black};
15
+
16
+ /* blue */
17
+ --color-axa: #{common.$color-axa};
18
+ --color-blue-1: #{common.$color-blue-1};
19
+ --color-blue-2: #{common.$color-blue-2};
20
+ --color-blue-3: #{common.$color-blue-3};
21
+ --color-ocean-blue: #{common.$color-oceanBlue};
22
+ --color-btn-light: #{common.$color-btn-light};
23
+ --color-focus: #{common.$color-focus};
24
+ --color-btn-tertiary-bg: #{common.$color-btn-tertiary-bg};
25
+ --color-btn-tertiary-bg-darker: #{common.$color-btn-tertiary-bg-darker};
26
+ --color-btn-tertiary-bg-lighter: #{common.$color-btn-tertiary-bg-lighter};
27
+
28
+ /* red */
29
+ --color-red: #{common.$color-red};
30
+ --color-red-700: #{common.$color-red-700};
31
+ --color-btn-error-text: #{common.$color-btn-error-text};
32
+ --color-btn-error-bg: #{common.$color-btn-error-bg};
33
+ --error-custom-border: #{common.$error-custom-border};
34
+ --error-custom-bg: #{common.$error-custom-bg};
35
+
36
+ /* orange */
37
+ --color-alert-danger-color-border: #{common.$color-alertDanger-colorBorder};
38
+ --color-alert-danger-bg-color: #{common.$color-alertDanger-bgColor};
39
+ --color-btn-business: #{common.$color-btn-business};
40
+ --color-btn-business-dark: #{common.$color-btn-business-dark};
41
+ --color-btn-business-light: #{common.$color-btn-business-light};
42
+
43
+ /* gray */
44
+ --color-gray: #{common.$color-gray};
45
+ --color-gray-1: #{common.$color-gray-1};
46
+ --color-gray-200: #{common.$color-gray-200};
47
+ --color-gray-300: #{common.$color-gray-300};
48
+ --color-gray-400: #{common.$color-gray-400};
49
+ --color-gray-500: #{common.$color-gray-500};
50
+ --color-gray-700: #{common.$color-gray-700};
51
+ --color-gray-900: #{common.$color-gray-900};
52
+ --color-btn-disabled-text: #{common.$color-btn-disabled-text};
53
+ --color-border: #{common.$color-border};
54
+
55
+ /* green */
56
+ --color-green-600: #{common.$color-green-600};
57
+
58
+ /* SIZING *******************************************************************/
59
+
60
+ --sizing-u0: #{common.$sizing-u0};
61
+ --sizing-u05: #{common.$sizing-u05};
62
+ --sizing-u1: #{common.$sizing-u1};
63
+ --sizing-u2: #{common.$sizing-u2};
64
+ --sizing-u3: #{common.$sizing-u3};
65
+ --sizing-u4: #{common.$sizing-u4};
66
+ --sizing-u5: #{common.$sizing-u5};
67
+ --sizing-u6: #{common.$sizing-u6};
68
+ --sizing-u7: #{common.$sizing-u7};
69
+ --sizing-u8: #{common.$sizing-u8};
70
+ --sizing-u9: #{common.$sizing-u9};
71
+ --sizing-u10: #{common.$sizing-u10};
72
+
73
+ /* SPACING *******************************************************************/
74
+
75
+ --spacing-u05: #{common.$spacing-u05};
76
+ --spacing-u0: #{common.$spacing-u0};
77
+ --spacing-u1: #{common.$spacing-u1};
78
+ --spacing-u2: #{common.$spacing-u2};
79
+ --spacing-u3: #{common.$spacing-u3};
80
+ --spacing-u4: #{common.$spacing-u4};
81
+ --spacing-u5: #{common.$spacing-u5};
82
+ --spacing-u6: #{common.$spacing-u6};
83
+ --spacing-u7: #{common.$spacing-u7};
84
+ --spacing-u8: #{common.$spacing-u8};
85
+ --spacing-u9: #{common.$spacing-u9};
86
+ --spacing-u10: #{common.$spacing-u10};
87
+ --spacing-u11: #{common.$spacing-u11};
88
+ --spacing-u12: #{common.$spacing-u12};
89
+ --spacing-u13: #{common.$spacing-u13};
90
+ --spacing-u14: #{common.$spacing-u14};
91
+ --spacing-u15: #{common.$spacing-u15};
92
+ --spacing-u16: #{common.$spacing-u16};
93
+ --spacing-u17: #{common.$spacing-u17};
94
+ --spacing-u18: #{common.$spacing-u18};
95
+ --spacing-u19: #{common.$spacing-u19};
96
+ --spacing-u20: #{common.$spacing-u20};
97
+
98
+ /* SCREENS & BREAKPOINTS *******************************************************************/
99
+
100
+ --screen-size-s: #{common.$screen-size-s};
101
+ --screen-size-m: #{common.$screen-size-m};
102
+ --screen-size-l: #{common.$screen-size-l};
103
+ --screen-size-xl: #{common.$screen-size-xl};
104
+ --screen-size-oldl: #{common.$screen-size-oldl};
105
+ --screen-size-oldxl: #{common.$screen-size-oldxl};
106
+ --breakpoint-xs: #{common.$breakpoint-xs};
107
+ --breakpoint-sm: #{common.$breakpoint-sm};
108
+ --breakpoint-md: #{common.$breakpoint-md};
109
+ --breakpoint-lg: #{common.$breakpoint-lg};
110
+ --breakpoint-xl: #{common.$breakpoint-xl};
111
+
112
+ /* BORDERS *******************************************************************/
113
+
114
+ --default-border-radius: #{common.$default-border-radius};
115
+
116
+ /* ANIMATIONS *******************************************************************/
117
+
118
+ --transition-duration: #{common.$transition-duration};
119
+ }