@axa-fr/design-system-look-and-feel-css 1.0.5-ci.3 → 1.0.5-ci.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Alert/Alert.css +1 -1
- package/dist/Alert/Alert.css.map +1 -1
- package/dist/Alert/Alert.scss +6 -6
- package/dist/Form/Checkbox/Checkbox.css +1 -1
- package/dist/Form/Checkbox/Checkbox.css.map +1 -1
- package/dist/Form/Checkbox/Checkbox.scss +39 -2
- package/dist/Form/Radio/Radio.css +1 -1
- package/dist/Form/Radio/Radio.css.map +1 -1
- package/dist/Form/Radio/Radio.scss +28 -1
- package/dist/Form/Select/Select.css +1 -1
- package/dist/Form/Select/Select.css.map +1 -1
- package/dist/Form/Select/Select.scss +21 -10
- package/dist/Form/Text/Text.css +1 -1
- package/dist/Form/Text/Text.css.map +1 -1
- package/dist/Form/Text/Text.scss +54 -13
- package/dist/Form/TextArea/TextArea.css +1 -1
- package/dist/Form/TextArea/TextArea.css.map +1 -1
- package/dist/Form/TextArea/TextArea.scss +1 -1
- package/dist/Grid/Grid-demo-example-form.css +1 -1
- package/dist/Grid/Grid-demo-example-form.css.map +1 -1
- package/dist/Grid/Grid-demo-example-form.scss +20 -0
- package/dist/Modal/Modal.css +1 -1
- package/dist/Modal/Modal.css.map +1 -1
- package/dist/Modal/Modal.scss +62 -89
- package/dist/common/common.scss +2 -0
- package/dist/common/tokens.css +1 -1
- package/dist/common/tokens.css.map +1 -1
- package/dist/common/tokens.scss +2 -0
- package/dist/look-and-feel.css +1 -1
- package/dist/look-and-feel.css.map +1 -1
- package/package.json +2 -49
package/dist/Modal/Modal.scss
CHANGED
|
@@ -1,128 +1,101 @@
|
|
|
1
|
-
@use "../common/common" as common;
|
|
1
|
+
@use "../common/common.scss" as common;
|
|
2
2
|
|
|
3
3
|
.af-modal {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
--spacing-modal: calc(16 / var(--font-size-base) * 1rem);
|
|
5
|
+
--font-size-heading: calc(20 / var(--font-size-base) * 1rem);
|
|
6
|
+
--font-size-subtitle: calc(16 / var(--font-size-base) * 1rem);
|
|
7
|
+
--line-height-heading: calc(25 / var(--font-size-base) * 1rem);
|
|
8
|
+
--line-height-subtitle: calc(20 / var(--font-size-base) * 1rem);
|
|
9
|
+
|
|
10
|
+
padding: var(--spacing-modal) 0;
|
|
8
11
|
border: none;
|
|
9
|
-
border-radius:
|
|
10
|
-
background-color: var(--color-white);
|
|
12
|
+
border-radius: var(--radius-8);
|
|
11
13
|
|
|
12
14
|
&::backdrop {
|
|
13
15
|
opacity: 0.4;
|
|
14
16
|
background: var(--color-gray-900);
|
|
15
17
|
}
|
|
16
18
|
|
|
17
|
-
&
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
display: flex;
|
|
22
|
-
padding: 1.5rem;
|
|
19
|
+
&__header {
|
|
20
|
+
display: grid;
|
|
21
|
+
padding-bottom: var(--spacing-modal);
|
|
22
|
+
padding-inline: var(--spacing-modal);
|
|
23
23
|
border-bottom: 1px solid var(--color-gray-400);
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
grid-template-areas: "headertitle closebtn";
|
|
25
|
+
grid-template-columns: 1fr auto;
|
|
26
|
+
gap: var(--spacing-modal);
|
|
27
|
+
|
|
28
|
+
> .af-btn-client {
|
|
29
|
+
width: fit-content;
|
|
30
|
+
height: fit-content;
|
|
31
|
+
grid-area: closebtn;
|
|
32
32
|
align-items: start;
|
|
33
|
-
justify-
|
|
34
|
-
|
|
33
|
+
justify-self: end;
|
|
34
|
+
}
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
&-title {
|
|
37
|
+
display: grid;
|
|
38
|
+
grid-area: headertitle;
|
|
39
|
+
grid-template-areas:
|
|
40
|
+
"icon title"
|
|
41
|
+
"icon subtitle";
|
|
42
|
+
justify-self: start;
|
|
43
|
+
gap: 0 1rem;
|
|
44
|
+
|
|
45
|
+
&-heading {
|
|
46
|
+
margin: 0;
|
|
47
|
+
grid-area: title;
|
|
37
48
|
font-family: var(--font-family-publico);
|
|
38
|
-
font-size:
|
|
39
|
-
line-height:
|
|
49
|
+
font-size: var(--font-size-heading);
|
|
50
|
+
line-height: var(--line-height-heading);
|
|
51
|
+
color: var(--color-gray-900);
|
|
40
52
|
}
|
|
41
53
|
|
|
42
54
|
&-subtitle {
|
|
43
|
-
|
|
44
|
-
font-size:
|
|
45
|
-
|
|
46
|
-
line-height: 1.406rem;
|
|
55
|
+
grid-area: subtitle;
|
|
56
|
+
font-size: var(--font-size-subtitle);
|
|
57
|
+
line-height: var(--line-height-subtitle);
|
|
47
58
|
color: var(--color-gray-700);
|
|
48
59
|
}
|
|
49
60
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
display: flex;
|
|
53
|
-
width: 2rem;
|
|
54
|
-
height: 2rem;
|
|
55
|
-
align-items: center;
|
|
56
|
-
justify-content: center;
|
|
57
|
-
cursor: pointer;
|
|
61
|
+
svg {
|
|
62
|
+
grid-area: icon;
|
|
58
63
|
fill: var(--color-axa);
|
|
59
64
|
}
|
|
60
|
-
|
|
61
|
-
:hover {
|
|
62
|
-
background: none;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
:focus {
|
|
66
|
-
border: none;
|
|
67
|
-
background: none;
|
|
68
|
-
}
|
|
69
65
|
}
|
|
70
66
|
}
|
|
71
67
|
|
|
72
|
-
&
|
|
73
|
-
|
|
74
|
-
display: flex;
|
|
75
|
-
margin-top: 2.5rem;
|
|
76
|
-
padding: 0 1.5rem;
|
|
77
|
-
flex-direction: column;
|
|
78
|
-
gap: 2.5rem;
|
|
79
|
-
font-family: var(--font-family-base);
|
|
80
|
-
font-size: 1.125rem;
|
|
81
|
-
font-weight: 400;
|
|
68
|
+
&__body {
|
|
69
|
+
padding: var(--spacing-modal);
|
|
82
70
|
}
|
|
83
71
|
|
|
84
|
-
&
|
|
72
|
+
&__footer {
|
|
85
73
|
display: flex;
|
|
86
|
-
padding
|
|
87
|
-
flex-direction: column-reverse;
|
|
88
|
-
align-items: flex-end;
|
|
74
|
+
padding: var(--spacing-modal) var(--spacing-modal) 0 var(--spacing-modal);
|
|
89
75
|
justify-content: flex-end;
|
|
90
|
-
gap:
|
|
76
|
+
gap: var(--spacing-modal);
|
|
91
77
|
|
|
92
|
-
|
|
93
|
-
& * {
|
|
94
|
-
width: 100%;
|
|
78
|
+
.af-btn-client {
|
|
95
79
|
flex-grow: 1;
|
|
96
80
|
}
|
|
97
|
-
|
|
98
|
-
&--fullWidth {
|
|
99
|
-
& * {
|
|
100
|
-
width: 100%;
|
|
101
|
-
flex-grow: 1;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
81
|
}
|
|
105
|
-
}
|
|
106
82
|
|
|
107
|
-
@media
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
83
|
+
@media (width > #{common.$breakpoint-sm}) {
|
|
84
|
+
--spacing-modal: calc(24 / var(--font-size-base) * 1rem);
|
|
85
|
+
--font-size-heading: calc(24 / var(--font-size-base) * 1rem);
|
|
86
|
+
--font-size-subtitle: calc(18 / var(--font-size-base) * 1rem);
|
|
87
|
+
--line-height-heading: calc(30 / var(--font-size-base) * 1rem);
|
|
88
|
+
--line-height-subtitle: calc(22.5 / var(--font-size-base) * 1rem);
|
|
112
89
|
|
|
113
|
-
|
|
114
|
-
flex-direction: row-reverse;
|
|
115
|
-
justify-content: flex-start;
|
|
90
|
+
max-width: revert;
|
|
116
91
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
92
|
+
&__footer {
|
|
93
|
+
.af-btn-client {
|
|
94
|
+
min-width: 180px;
|
|
95
|
+
flex-grow: inherit;
|
|
121
96
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
width: 100%;
|
|
125
|
-
flex-grow: 1;
|
|
97
|
+
&:last-child {
|
|
98
|
+
width: 250px;
|
|
126
99
|
}
|
|
127
100
|
}
|
|
128
101
|
}
|
package/dist/common/common.scss
CHANGED
package/dist/common/tokens.css
CHANGED
|
@@ -1 +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;--font-size-base:16;--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}
|
|
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;--font-size-base:16;--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;--radius-8:8px;--radius-100:100%;--transition-duration:0.2s}
|
|
@@ -1 +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,CACA,mBAAA,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 --font-size-base: 16;\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 --font-size-base: 16;\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"]}
|
|
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,CACA,mBAAA,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,CACA,cAAA,CACA,iBAAA,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 --font-size-base: 16;\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 --radius-8: #{common.$radius-8};\n --radius-100: #{common.$radius-100};\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 --font-size-base: 16;\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 --radius-8: #{common.$radius-8};\n --radius-100: #{common.$radius-100};\n\n /* ANIMATIONS *******************************************************************/\n\n --transition-duration: #{common.$transition-duration};\n}\n"]}
|
package/dist/common/tokens.scss
CHANGED
|
@@ -113,6 +113,8 @@
|
|
|
113
113
|
/* BORDERS *******************************************************************/
|
|
114
114
|
|
|
115
115
|
--default-border-radius: #{common.$default-border-radius};
|
|
116
|
+
--radius-8: #{common.$radius-8};
|
|
117
|
+
--radius-100: #{common.$radius-100};
|
|
116
118
|
|
|
117
119
|
/* ANIMATIONS *******************************************************************/
|
|
118
120
|
|