@asante-org/atlascopco-vt-litesitegenerator 1.6.26 → 1.6.28

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 (9) hide show
  1. package/dist/index.esm.scss +155 -159
  2. package/dist/index.scss +155 -159
  3. package/dist/themes/theme-1.css +184 -187
  4. package/dist/themes/theme-1.css.map +1 -1
  5. package/dist/themes/theme-2.css +184 -187
  6. package/dist/themes/theme-2.css.map +1 -1
  7. package/dist/themes/theme-3.css +184 -187
  8. package/dist/themes/theme-3.css.map +1 -1
  9. package/package.json +1 -1
package/dist/index.esm.scss CHANGED
@@ -63,167 +63,163 @@
63
63
  --text-xl-line-height: 1.4;
64
64
  --text-xxl-size: 64px;
65
65
  --text-xxl-line-height: 1;
66
+ --lsg-color-primary: #14532d;
67
+ --lsg-color-secondary: #3f3f46;
68
+ --lsg-color-tertiary: #c2410c;
69
+ --lsg-color-light: #eeeeee;
70
+ --lsg-color-dark: #18181b;
71
+ --lsg-color-black: #09090b;
72
+ --lsg-color-white: #ffffff;
73
+ --lsg-size-Small: 14px;
74
+ --lsg-size-body: 18px;
75
+ --lsg-size-Pretitle: 18px;
76
+ --lsg-size-H6: 18px;
77
+ --lsg-size-H5: 21px;
78
+ --lsg-size-H4: 28px;
79
+ --lsg-size-H3: 30px;
80
+ --lsg-size-H2: 36px;
81
+ --lsg-size-H1: 45px;
82
+ --lsg-size-large: 54px;
83
+ --lsg-size-xl: 72px;
84
+ --lsg-size-xxl: 90px;
85
+ --lsg-size-xxxl: 108px;
86
+ --lsg-font-family-primary: Calibri;
87
+ --lsg-font-family-secondary: "Times New Roman";
88
+ --lsg-font-weight-regular: 400;
89
+ --lsg-font-weight-semibold: 600;
90
+ --lsg-font-weight-bold: 700;
91
+ --lsg-line-height-tight: 1.1;
92
+ --lsg-line-height-heading: 1.2;
93
+ --lsg-line-height-copy: 1.5;
94
+ --lsg-type-heading-family: var(--lsg-font-family-secondary);
95
+ --lsg-type-body-family: var(--lsg-font-family-primary);
96
+ --lsg-type-h1-mobile-size: 36px;
97
+ --lsg-type-h1-desktop-size: var(--lsg-size-H1);
98
+ --lsg-type-h1-mobile-line-height: var(--lsg-line-height-tight);
99
+ --lsg-type-h1-desktop-line-height: var(--lsg-line-height-tight);
100
+ --lsg-type-h2-mobile-size: 32px;
101
+ --lsg-type-h2-desktop-size: var(--lsg-size-H2);
102
+ --lsg-type-h2-mobile-line-height: var(--lsg-line-height-heading);
103
+ --lsg-type-h2-desktop-line-height: var(--lsg-line-height-heading);
104
+ --lsg-type-h3-mobile-size: 28px;
105
+ --lsg-type-h3-desktop-size: var(--lsg-size-H3);
106
+ --lsg-type-h3-mobile-line-height: var(--lsg-line-height-heading);
107
+ --lsg-type-h3-desktop-line-height: var(--lsg-line-height-heading);
108
+ --lsg-type-h4-mobile-size: 24px;
109
+ --lsg-type-h4-desktop-size: var(--lsg-size-H4);
110
+ --lsg-type-h4-mobile-line-height: var(--lsg-line-height-heading);
111
+ --lsg-type-h4-desktop-line-height: var(--lsg-line-height-heading);
112
+ --lsg-type-h5-mobile-size: 20px;
113
+ --lsg-type-h5-desktop-size: var(--lsg-size-H5);
114
+ --lsg-type-h5-mobile-line-height: var(--lsg-line-height-heading);
115
+ --lsg-type-h5-desktop-line-height: var(--lsg-line-height-heading);
116
+ --lsg-type-h6-mobile-size: 18px;
117
+ --lsg-type-h6-desktop-size: var(--lsg-size-H6);
118
+ --lsg-type-h6-mobile-line-height: var(--lsg-line-height-copy);
119
+ --lsg-type-h6-desktop-line-height: var(--lsg-line-height-copy);
120
+ --lsg-type-pretitle-mobile-size: 16px;
121
+ --lsg-type-pretitle-desktop-size: var(--lsg-size-Pretitle);
122
+ --lsg-type-pretitle-mobile-line-height: var(--lsg-line-height-copy);
123
+ --lsg-type-pretitle-desktop-line-height: var(--lsg-line-height-copy);
124
+ --lsg-type-body-mobile-size: 16px;
125
+ --lsg-type-body-desktop-size: var(--lsg-size-body);
126
+ --lsg-type-body-mobile-line-height: var(--lsg-line-height-copy);
127
+ --lsg-type-body-desktop-line-height: var(--lsg-line-height-copy);
128
+ --lsg-type-large-mobile-size: 40px;
129
+ --lsg-type-large-desktop-size: var(--lsg-size-large);
130
+ --lsg-type-large-mobile-line-height: var(--lsg-line-height-tight);
131
+ --lsg-type-large-desktop-line-height: var(--lsg-line-height-tight);
132
+ --lsg-type-xlarge-mobile-size: 48px;
133
+ --lsg-type-xlarge-desktop-size: var(--lsg-size-xl);
134
+ --lsg-type-xlarge-mobile-line-height: var(--lsg-line-height-tight);
135
+ --lsg-type-xlarge-desktop-line-height: var(--lsg-line-height-tight);
136
+ --lsg-type-xxlarge-mobile-size: 56px;
137
+ --lsg-type-xxlarge-desktop-size: var(--lsg-size-xxl);
138
+ --lsg-type-xxlarge-mobile-line-height: var(--lsg-line-height-tight);
139
+ --lsg-type-xxlarge-desktop-line-height: var(--lsg-line-height-tight);
140
+ --lsg-type-xxxlarge-mobile-size: 64px;
141
+ --lsg-type-xxxlarge-desktop-size: var(--lsg-size-xxxl);
142
+ --lsg-type-xxxlarge-mobile-line-height: var(--lsg-line-height-tight);
143
+ --lsg-type-xxxlarge-desktop-line-height: var(--lsg-line-height-tight);
144
+ --lsg-radius-square: 0px;
145
+ --lsg-radius-rounded: 10px;
146
+ --lsg-radius-pill: 25px;
147
+ --lsg-theme-radius: 10px;
148
+ --lsg-spacing-size-2XS: 4px;
149
+ --lsg-spacing-size-XS: 8px;
150
+ --lsg-spacing-size-SM: 16px;
151
+ --lsg-spacing-size-MD: 24px;
152
+ --lsg-spacing-size-LG: 32px;
153
+ --lsg-spacing-size-XL: 64px;
154
+ --lsg-spacing-size-2XL: 96px;
155
+ --lsg-spacing-size-3XL: 128px;
156
+ --lsg-spacing-size-48: 48px;
157
+ --lsg-spacing-size-72: 72px;
158
+ --lsg-spacing-size-120: 120px;
159
+ --lsg-spacing-size-140: 140px;
160
+ --lsg-container-width-full: 100%;
161
+ --lsg-container-width-medium: 1280px;
162
+ --lsg-container-width-narrow: 840px;
163
+ --lsg-ai-banner-bg: var(--lsg-color-dark);
164
+ --lsg-ai-banner-icon-color: var(--lsg-color-primary);
165
+ --lsg-ai-banner-text-color: var(--lsg-color-white);
166
+ --lsg-ai-banner-height: 50px;
167
+ --lsg-ai-banner-icon-size: 18px;
168
+ --lsg-ai-banner-font-size: 0.75rem;
169
+ --lsg-ai-banner-gap: var(--lsg-spacing-size-XS);
170
+ --lsg-ai-banner-max-width: var(--lsg-container-width-medium);
171
+ --lsg-accordion-max-width: 600px;
172
+ --lsg-accordion-divider-color: var(--atlascopco-beige-3, #e7e0da);
173
+ --lsg-accordion-active-color: var(--lsg-color-primary);
174
+ --lsg-accordion-active-border-width: 3px;
175
+ --lsg-accordion-title-color: var(--lsg-color-black);
176
+ --lsg-accordion-title-font-size: 1rem;
177
+ --lsg-accordion-icon-color: var(--lsg-color-secondary, #5b6770);
178
+ --lsg-accordion-icon-size: 16px;
179
+ --lsg-accordion-icon-gap: 16px;
180
+ --lsg-accordion-content-color: var(--lsg-color-secondary, #5b6770);
181
+ --lsg-accordion-content-font-size: 1rem;
182
+ --lsg-accordion-content-line-height: 1.6;
183
+ --lsg-accordion-header-height: 60px;
184
+ --lsg-accordion-header-padding-y: 12px;
185
+ --lsg-accordion-content-indent: 16px;
186
+ --lsg-accordion-content-border-width: 1px;
187
+ --lsg-accordion-content-padding-bottom: 16px;
188
+ --lsg-accordion-border-radius: var(--lsg-theme-radius);
189
+ --lsg-accordion-transition: 300ms ease;
190
+ --lsg-accordion-faq-title-font-size: 1.125rem;
191
+ --lsg-accordion-faq-content-font-size: 1rem;
192
+ --lsg-video-max-width: 960px;
193
+ --lsg-video-poster-height: 600px;
194
+ --lsg-video-poster-bg: var(--lsg-color-light, #eeeeee);
195
+ --lsg-video-tags-inset: 24px;
196
+ --lsg-video-tags-max-width-desktop: 419px;
197
+ --lsg-video-tags-max-width-mobile: 290px;
198
+ --lsg-video-tag-gap: 10px;
199
+ --lsg-video-tag-height: 54px;
200
+ --lsg-video-tag-padding-x: 16px;
201
+ --lsg-video-tag-radius: var(--lsg-theme-radius);
202
+ --lsg-video-tag-bg: rgba(238, 238, 238, 0.10);
203
+ --lsg-video-tag-bg-hover: rgba(238, 238, 238, 0.20);
204
+ --lsg-video-tag-border: rgba(255, 255, 255, 0.2);
205
+ --lsg-video-tag-blur: 8px;
206
+ --lsg-video-tag-color: var(--lsg-color-primary);
207
+ --lsg-video-tag-font-size: 1.125rem;
208
+ --lsg-video-play-size: 60px;
209
+ --lsg-video-play-color: var(--lsg-color-primary);
210
+ --lsg-video-caption-bg: var(--lsg-color-white);
211
+ --lsg-video-caption-height: 81px;
212
+ --lsg-video-caption-height-hover: 116px;
213
+ --lsg-video-caption-padding-x: 24px;
214
+ --lsg-video-caption-padding-y: 12px;
215
+ --lsg-video-title-color: var(--lsg-color-black, #090909);
216
+ --lsg-video-title-font-size: 1.3125rem;
217
+ --lsg-video-text-font-size: 1.125rem;
218
+ --lsg-video-divider-color: var(--lsg-color-primary);
219
+ --lsg-video-divider-width: 1px;
220
+ --lsg-video-transition: 300ms ease;
66
221
  }
67
222
 
68
- @layer storybook-defaults {
69
- :root {
70
- --lsg-color-primary: #14532d;
71
- --lsg-color-secondary: #3f3f46;
72
- --lsg-color-tertiary: #c2410c;
73
- --lsg-color-light: #eeeeee;
74
- --lsg-color-dark: #18181b;
75
- --lsg-color-black: #09090b;
76
- --lsg-color-white: #ffffff;
77
- --lsg-size-Small: 14px;
78
- --lsg-size-body: 18px;
79
- --lsg-size-Pretitle: 18px;
80
- --lsg-size-H6: 18px;
81
- --lsg-size-H5: 21px;
82
- --lsg-size-H4: 28px;
83
- --lsg-size-H3: 30px;
84
- --lsg-size-H2: 36px;
85
- --lsg-size-H1: 45px;
86
- --lsg-size-large: 54px;
87
- --lsg-size-xl: 72px;
88
- --lsg-size-xxl: 90px;
89
- --lsg-size-xxxl: 108px;
90
- --lsg-font-family-primary: Calibri;
91
- --lsg-font-family-secondary: "Times New Roman";
92
- --lsg-font-weight-regular: 400;
93
- --lsg-font-weight-semibold: 600;
94
- --lsg-font-weight-bold: 700;
95
- --lsg-line-height-tight: 1.1;
96
- --lsg-line-height-heading: 1.2;
97
- --lsg-line-height-copy: 1.5;
98
- --lsg-type-heading-family: var(--lsg-font-family-secondary);
99
- --lsg-type-body-family: var(--lsg-font-family-primary);
100
- --lsg-type-h1-mobile-size: 36px;
101
- --lsg-type-h1-desktop-size: var(--lsg-size-H1);
102
- --lsg-type-h1-mobile-line-height: var(--lsg-line-height-tight);
103
- --lsg-type-h1-desktop-line-height: var(--lsg-line-height-tight);
104
- --lsg-type-h2-mobile-size: 32px;
105
- --lsg-type-h2-desktop-size: var(--lsg-size-H2);
106
- --lsg-type-h2-mobile-line-height: var(--lsg-line-height-heading);
107
- --lsg-type-h2-desktop-line-height: var(--lsg-line-height-heading);
108
- --lsg-type-h3-mobile-size: 28px;
109
- --lsg-type-h3-desktop-size: var(--lsg-size-H3);
110
- --lsg-type-h3-mobile-line-height: var(--lsg-line-height-heading);
111
- --lsg-type-h3-desktop-line-height: var(--lsg-line-height-heading);
112
- --lsg-type-h4-mobile-size: 24px;
113
- --lsg-type-h4-desktop-size: var(--lsg-size-H4);
114
- --lsg-type-h4-mobile-line-height: var(--lsg-line-height-heading);
115
- --lsg-type-h4-desktop-line-height: var(--lsg-line-height-heading);
116
- --lsg-type-h5-mobile-size: 20px;
117
- --lsg-type-h5-desktop-size: var(--lsg-size-H5);
118
- --lsg-type-h5-mobile-line-height: var(--lsg-line-height-heading);
119
- --lsg-type-h5-desktop-line-height: var(--lsg-line-height-heading);
120
- --lsg-type-h6-mobile-size: 18px;
121
- --lsg-type-h6-desktop-size: var(--lsg-size-H6);
122
- --lsg-type-h6-mobile-line-height: var(--lsg-line-height-copy);
123
- --lsg-type-h6-desktop-line-height: var(--lsg-line-height-copy);
124
- --lsg-type-pretitle-mobile-size: 16px;
125
- --lsg-type-pretitle-desktop-size: var(--lsg-size-Pretitle);
126
- --lsg-type-pretitle-mobile-line-height: var(--lsg-line-height-copy);
127
- --lsg-type-pretitle-desktop-line-height: var(--lsg-line-height-copy);
128
- --lsg-type-body-mobile-size: 16px;
129
- --lsg-type-body-desktop-size: var(--lsg-size-body);
130
- --lsg-type-body-mobile-line-height: var(--lsg-line-height-copy);
131
- --lsg-type-body-desktop-line-height: var(--lsg-line-height-copy);
132
- --lsg-type-large-mobile-size: 40px;
133
- --lsg-type-large-desktop-size: var(--lsg-size-large);
134
- --lsg-type-large-mobile-line-height: var(--lsg-line-height-tight);
135
- --lsg-type-large-desktop-line-height: var(--lsg-line-height-tight);
136
- --lsg-type-xlarge-mobile-size: 48px;
137
- --lsg-type-xlarge-desktop-size: var(--lsg-size-xl);
138
- --lsg-type-xlarge-mobile-line-height: var(--lsg-line-height-tight);
139
- --lsg-type-xlarge-desktop-line-height: var(--lsg-line-height-tight);
140
- --lsg-type-xxlarge-mobile-size: 56px;
141
- --lsg-type-xxlarge-desktop-size: var(--lsg-size-xxl);
142
- --lsg-type-xxlarge-mobile-line-height: var(--lsg-line-height-tight);
143
- --lsg-type-xxlarge-desktop-line-height: var(--lsg-line-height-tight);
144
- --lsg-type-xxxlarge-mobile-size: 64px;
145
- --lsg-type-xxxlarge-desktop-size: var(--lsg-size-xxxl);
146
- --lsg-type-xxxlarge-mobile-line-height: var(--lsg-line-height-tight);
147
- --lsg-type-xxxlarge-desktop-line-height: var(--lsg-line-height-tight);
148
- --lsg-radius-square: 0px;
149
- --lsg-radius-rounded: 10px;
150
- --lsg-radius-pill: 25px;
151
- --lsg-theme-radius: 10px;
152
- --lsg-spacing-size-2XS: 4px;
153
- --lsg-spacing-size-XS: 8px;
154
- --lsg-spacing-size-SM: 16px;
155
- --lsg-spacing-size-MD: 24px;
156
- --lsg-spacing-size-LG: 32px;
157
- --lsg-spacing-size-XL: 64px;
158
- --lsg-spacing-size-2XL: 96px;
159
- --lsg-spacing-size-3XL: 128px;
160
- --lsg-spacing-size-48: 48px;
161
- --lsg-spacing-size-72: 72px;
162
- --lsg-spacing-size-120: 120px;
163
- --lsg-spacing-size-140: 140px;
164
- --lsg-container-width-full: 100%;
165
- --lsg-container-width-medium: 1280px;
166
- --lsg-container-width-narrow: 840px;
167
- --lsg-ai-banner-bg: var(--lsg-color-dark);
168
- --lsg-ai-banner-icon-color: var(--lsg-color-primary);
169
- --lsg-ai-banner-text-color: var(--lsg-color-white);
170
- --lsg-ai-banner-height: 50px;
171
- --lsg-ai-banner-icon-size: 18px;
172
- --lsg-ai-banner-font-size: 0.75rem;
173
- --lsg-ai-banner-gap: var(--lsg-spacing-size-XS);
174
- --lsg-ai-banner-max-width: var(--lsg-container-width-medium);
175
- --lsg-accordion-max-width: 600px;
176
- --lsg-accordion-divider-color: var(--atlascopco-beige-3, #e7e0da);
177
- --lsg-accordion-active-color: var(--lsg-color-primary);
178
- --lsg-accordion-active-border-width: 3px;
179
- --lsg-accordion-title-color: var(--lsg-color-black);
180
- --lsg-accordion-title-font-size: 1rem;
181
- --lsg-accordion-icon-color: var(--lsg-color-secondary, #5b6770);
182
- --lsg-accordion-icon-size: 16px;
183
- --lsg-accordion-icon-gap: 16px;
184
- --lsg-accordion-content-color: var(--lsg-color-secondary, #5b6770);
185
- --lsg-accordion-content-font-size: 1rem;
186
- --lsg-accordion-content-line-height: 1.6;
187
- --lsg-accordion-header-height: 60px;
188
- --lsg-accordion-header-padding-y: 12px;
189
- --lsg-accordion-content-indent: 16px;
190
- --lsg-accordion-content-border-width: 1px;
191
- --lsg-accordion-content-padding-bottom: 16px;
192
- --lsg-accordion-border-radius: var(--lsg-theme-radius);
193
- --lsg-accordion-transition: 300ms ease;
194
- --lsg-accordion-faq-title-font-size: 1.125rem;
195
- --lsg-accordion-faq-content-font-size: 1rem;
196
- --lsg-video-max-width: 960px;
197
- --lsg-video-poster-height: 600px;
198
- --lsg-video-poster-bg: var(--lsg-color-light, #eeeeee);
199
- --lsg-video-tags-inset: 24px;
200
- --lsg-video-tags-max-width-desktop: 419px;
201
- --lsg-video-tags-max-width-mobile: 290px;
202
- --lsg-video-tag-gap: 10px;
203
- --lsg-video-tag-height: 54px;
204
- --lsg-video-tag-padding-x: 16px;
205
- --lsg-video-tag-radius: var(--lsg-theme-radius);
206
- --lsg-video-tag-bg: rgba(238, 238, 238, 0.10);
207
- --lsg-video-tag-bg-hover: rgba(238, 238, 238, 0.20);
208
- --lsg-video-tag-border: rgba(255, 255, 255, 0.2);
209
- --lsg-video-tag-blur: 8px;
210
- --lsg-video-tag-color: var(--lsg-color-primary);
211
- --lsg-video-tag-font-size: 1.125rem;
212
- --lsg-video-play-size: 60px;
213
- --lsg-video-play-color: var(--lsg-color-primary);
214
- --lsg-video-caption-bg: var(--lsg-color-white);
215
- --lsg-video-caption-height: 81px;
216
- --lsg-video-caption-height-hover: 116px;
217
- --lsg-video-caption-padding-x: 24px;
218
- --lsg-video-caption-padding-y: 12px;
219
- --lsg-video-title-color: var(--lsg-color-black, #090909);
220
- --lsg-video-title-font-size: 1.3125rem;
221
- --lsg-video-text-font-size: 1.125rem;
222
- --lsg-video-divider-color: var(--lsg-color-primary);
223
- --lsg-video-divider-width: 1px;
224
- --lsg-video-transition: 300ms ease;
225
- }
226
- }
227
223
  .lsg-button {
228
224
  display: inline-flex;
229
225
  align-items: center;
package/dist/index.scss CHANGED
@@ -63,167 +63,163 @@
63
63
  --text-xl-line-height: 1.4;
64
64
  --text-xxl-size: 64px;
65
65
  --text-xxl-line-height: 1;
66
+ --lsg-color-primary: #14532d;
67
+ --lsg-color-secondary: #3f3f46;
68
+ --lsg-color-tertiary: #c2410c;
69
+ --lsg-color-light: #eeeeee;
70
+ --lsg-color-dark: #18181b;
71
+ --lsg-color-black: #09090b;
72
+ --lsg-color-white: #ffffff;
73
+ --lsg-size-Small: 14px;
74
+ --lsg-size-body: 18px;
75
+ --lsg-size-Pretitle: 18px;
76
+ --lsg-size-H6: 18px;
77
+ --lsg-size-H5: 21px;
78
+ --lsg-size-H4: 28px;
79
+ --lsg-size-H3: 30px;
80
+ --lsg-size-H2: 36px;
81
+ --lsg-size-H1: 45px;
82
+ --lsg-size-large: 54px;
83
+ --lsg-size-xl: 72px;
84
+ --lsg-size-xxl: 90px;
85
+ --lsg-size-xxxl: 108px;
86
+ --lsg-font-family-primary: Calibri;
87
+ --lsg-font-family-secondary: "Times New Roman";
88
+ --lsg-font-weight-regular: 400;
89
+ --lsg-font-weight-semibold: 600;
90
+ --lsg-font-weight-bold: 700;
91
+ --lsg-line-height-tight: 1.1;
92
+ --lsg-line-height-heading: 1.2;
93
+ --lsg-line-height-copy: 1.5;
94
+ --lsg-type-heading-family: var(--lsg-font-family-secondary);
95
+ --lsg-type-body-family: var(--lsg-font-family-primary);
96
+ --lsg-type-h1-mobile-size: 36px;
97
+ --lsg-type-h1-desktop-size: var(--lsg-size-H1);
98
+ --lsg-type-h1-mobile-line-height: var(--lsg-line-height-tight);
99
+ --lsg-type-h1-desktop-line-height: var(--lsg-line-height-tight);
100
+ --lsg-type-h2-mobile-size: 32px;
101
+ --lsg-type-h2-desktop-size: var(--lsg-size-H2);
102
+ --lsg-type-h2-mobile-line-height: var(--lsg-line-height-heading);
103
+ --lsg-type-h2-desktop-line-height: var(--lsg-line-height-heading);
104
+ --lsg-type-h3-mobile-size: 28px;
105
+ --lsg-type-h3-desktop-size: var(--lsg-size-H3);
106
+ --lsg-type-h3-mobile-line-height: var(--lsg-line-height-heading);
107
+ --lsg-type-h3-desktop-line-height: var(--lsg-line-height-heading);
108
+ --lsg-type-h4-mobile-size: 24px;
109
+ --lsg-type-h4-desktop-size: var(--lsg-size-H4);
110
+ --lsg-type-h4-mobile-line-height: var(--lsg-line-height-heading);
111
+ --lsg-type-h4-desktop-line-height: var(--lsg-line-height-heading);
112
+ --lsg-type-h5-mobile-size: 20px;
113
+ --lsg-type-h5-desktop-size: var(--lsg-size-H5);
114
+ --lsg-type-h5-mobile-line-height: var(--lsg-line-height-heading);
115
+ --lsg-type-h5-desktop-line-height: var(--lsg-line-height-heading);
116
+ --lsg-type-h6-mobile-size: 18px;
117
+ --lsg-type-h6-desktop-size: var(--lsg-size-H6);
118
+ --lsg-type-h6-mobile-line-height: var(--lsg-line-height-copy);
119
+ --lsg-type-h6-desktop-line-height: var(--lsg-line-height-copy);
120
+ --lsg-type-pretitle-mobile-size: 16px;
121
+ --lsg-type-pretitle-desktop-size: var(--lsg-size-Pretitle);
122
+ --lsg-type-pretitle-mobile-line-height: var(--lsg-line-height-copy);
123
+ --lsg-type-pretitle-desktop-line-height: var(--lsg-line-height-copy);
124
+ --lsg-type-body-mobile-size: 16px;
125
+ --lsg-type-body-desktop-size: var(--lsg-size-body);
126
+ --lsg-type-body-mobile-line-height: var(--lsg-line-height-copy);
127
+ --lsg-type-body-desktop-line-height: var(--lsg-line-height-copy);
128
+ --lsg-type-large-mobile-size: 40px;
129
+ --lsg-type-large-desktop-size: var(--lsg-size-large);
130
+ --lsg-type-large-mobile-line-height: var(--lsg-line-height-tight);
131
+ --lsg-type-large-desktop-line-height: var(--lsg-line-height-tight);
132
+ --lsg-type-xlarge-mobile-size: 48px;
133
+ --lsg-type-xlarge-desktop-size: var(--lsg-size-xl);
134
+ --lsg-type-xlarge-mobile-line-height: var(--lsg-line-height-tight);
135
+ --lsg-type-xlarge-desktop-line-height: var(--lsg-line-height-tight);
136
+ --lsg-type-xxlarge-mobile-size: 56px;
137
+ --lsg-type-xxlarge-desktop-size: var(--lsg-size-xxl);
138
+ --lsg-type-xxlarge-mobile-line-height: var(--lsg-line-height-tight);
139
+ --lsg-type-xxlarge-desktop-line-height: var(--lsg-line-height-tight);
140
+ --lsg-type-xxxlarge-mobile-size: 64px;
141
+ --lsg-type-xxxlarge-desktop-size: var(--lsg-size-xxxl);
142
+ --lsg-type-xxxlarge-mobile-line-height: var(--lsg-line-height-tight);
143
+ --lsg-type-xxxlarge-desktop-line-height: var(--lsg-line-height-tight);
144
+ --lsg-radius-square: 0px;
145
+ --lsg-radius-rounded: 10px;
146
+ --lsg-radius-pill: 25px;
147
+ --lsg-theme-radius: 10px;
148
+ --lsg-spacing-size-2XS: 4px;
149
+ --lsg-spacing-size-XS: 8px;
150
+ --lsg-spacing-size-SM: 16px;
151
+ --lsg-spacing-size-MD: 24px;
152
+ --lsg-spacing-size-LG: 32px;
153
+ --lsg-spacing-size-XL: 64px;
154
+ --lsg-spacing-size-2XL: 96px;
155
+ --lsg-spacing-size-3XL: 128px;
156
+ --lsg-spacing-size-48: 48px;
157
+ --lsg-spacing-size-72: 72px;
158
+ --lsg-spacing-size-120: 120px;
159
+ --lsg-spacing-size-140: 140px;
160
+ --lsg-container-width-full: 100%;
161
+ --lsg-container-width-medium: 1280px;
162
+ --lsg-container-width-narrow: 840px;
163
+ --lsg-ai-banner-bg: var(--lsg-color-dark);
164
+ --lsg-ai-banner-icon-color: var(--lsg-color-primary);
165
+ --lsg-ai-banner-text-color: var(--lsg-color-white);
166
+ --lsg-ai-banner-height: 50px;
167
+ --lsg-ai-banner-icon-size: 18px;
168
+ --lsg-ai-banner-font-size: 0.75rem;
169
+ --lsg-ai-banner-gap: var(--lsg-spacing-size-XS);
170
+ --lsg-ai-banner-max-width: var(--lsg-container-width-medium);
171
+ --lsg-accordion-max-width: 600px;
172
+ --lsg-accordion-divider-color: var(--atlascopco-beige-3, #e7e0da);
173
+ --lsg-accordion-active-color: var(--lsg-color-primary);
174
+ --lsg-accordion-active-border-width: 3px;
175
+ --lsg-accordion-title-color: var(--lsg-color-black);
176
+ --lsg-accordion-title-font-size: 1rem;
177
+ --lsg-accordion-icon-color: var(--lsg-color-secondary, #5b6770);
178
+ --lsg-accordion-icon-size: 16px;
179
+ --lsg-accordion-icon-gap: 16px;
180
+ --lsg-accordion-content-color: var(--lsg-color-secondary, #5b6770);
181
+ --lsg-accordion-content-font-size: 1rem;
182
+ --lsg-accordion-content-line-height: 1.6;
183
+ --lsg-accordion-header-height: 60px;
184
+ --lsg-accordion-header-padding-y: 12px;
185
+ --lsg-accordion-content-indent: 16px;
186
+ --lsg-accordion-content-border-width: 1px;
187
+ --lsg-accordion-content-padding-bottom: 16px;
188
+ --lsg-accordion-border-radius: var(--lsg-theme-radius);
189
+ --lsg-accordion-transition: 300ms ease;
190
+ --lsg-accordion-faq-title-font-size: 1.125rem;
191
+ --lsg-accordion-faq-content-font-size: 1rem;
192
+ --lsg-video-max-width: 960px;
193
+ --lsg-video-poster-height: 600px;
194
+ --lsg-video-poster-bg: var(--lsg-color-light, #eeeeee);
195
+ --lsg-video-tags-inset: 24px;
196
+ --lsg-video-tags-max-width-desktop: 419px;
197
+ --lsg-video-tags-max-width-mobile: 290px;
198
+ --lsg-video-tag-gap: 10px;
199
+ --lsg-video-tag-height: 54px;
200
+ --lsg-video-tag-padding-x: 16px;
201
+ --lsg-video-tag-radius: var(--lsg-theme-radius);
202
+ --lsg-video-tag-bg: rgba(238, 238, 238, 0.10);
203
+ --lsg-video-tag-bg-hover: rgba(238, 238, 238, 0.20);
204
+ --lsg-video-tag-border: rgba(255, 255, 255, 0.2);
205
+ --lsg-video-tag-blur: 8px;
206
+ --lsg-video-tag-color: var(--lsg-color-primary);
207
+ --lsg-video-tag-font-size: 1.125rem;
208
+ --lsg-video-play-size: 60px;
209
+ --lsg-video-play-color: var(--lsg-color-primary);
210
+ --lsg-video-caption-bg: var(--lsg-color-white);
211
+ --lsg-video-caption-height: 81px;
212
+ --lsg-video-caption-height-hover: 116px;
213
+ --lsg-video-caption-padding-x: 24px;
214
+ --lsg-video-caption-padding-y: 12px;
215
+ --lsg-video-title-color: var(--lsg-color-black, #090909);
216
+ --lsg-video-title-font-size: 1.3125rem;
217
+ --lsg-video-text-font-size: 1.125rem;
218
+ --lsg-video-divider-color: var(--lsg-color-primary);
219
+ --lsg-video-divider-width: 1px;
220
+ --lsg-video-transition: 300ms ease;
66
221
  }
67
222
 
68
- @layer storybook-defaults {
69
- :root {
70
- --lsg-color-primary: #14532d;
71
- --lsg-color-secondary: #3f3f46;
72
- --lsg-color-tertiary: #c2410c;
73
- --lsg-color-light: #eeeeee;
74
- --lsg-color-dark: #18181b;
75
- --lsg-color-black: #09090b;
76
- --lsg-color-white: #ffffff;
77
- --lsg-size-Small: 14px;
78
- --lsg-size-body: 18px;
79
- --lsg-size-Pretitle: 18px;
80
- --lsg-size-H6: 18px;
81
- --lsg-size-H5: 21px;
82
- --lsg-size-H4: 28px;
83
- --lsg-size-H3: 30px;
84
- --lsg-size-H2: 36px;
85
- --lsg-size-H1: 45px;
86
- --lsg-size-large: 54px;
87
- --lsg-size-xl: 72px;
88
- --lsg-size-xxl: 90px;
89
- --lsg-size-xxxl: 108px;
90
- --lsg-font-family-primary: Calibri;
91
- --lsg-font-family-secondary: "Times New Roman";
92
- --lsg-font-weight-regular: 400;
93
- --lsg-font-weight-semibold: 600;
94
- --lsg-font-weight-bold: 700;
95
- --lsg-line-height-tight: 1.1;
96
- --lsg-line-height-heading: 1.2;
97
- --lsg-line-height-copy: 1.5;
98
- --lsg-type-heading-family: var(--lsg-font-family-secondary);
99
- --lsg-type-body-family: var(--lsg-font-family-primary);
100
- --lsg-type-h1-mobile-size: 36px;
101
- --lsg-type-h1-desktop-size: var(--lsg-size-H1);
102
- --lsg-type-h1-mobile-line-height: var(--lsg-line-height-tight);
103
- --lsg-type-h1-desktop-line-height: var(--lsg-line-height-tight);
104
- --lsg-type-h2-mobile-size: 32px;
105
- --lsg-type-h2-desktop-size: var(--lsg-size-H2);
106
- --lsg-type-h2-mobile-line-height: var(--lsg-line-height-heading);
107
- --lsg-type-h2-desktop-line-height: var(--lsg-line-height-heading);
108
- --lsg-type-h3-mobile-size: 28px;
109
- --lsg-type-h3-desktop-size: var(--lsg-size-H3);
110
- --lsg-type-h3-mobile-line-height: var(--lsg-line-height-heading);
111
- --lsg-type-h3-desktop-line-height: var(--lsg-line-height-heading);
112
- --lsg-type-h4-mobile-size: 24px;
113
- --lsg-type-h4-desktop-size: var(--lsg-size-H4);
114
- --lsg-type-h4-mobile-line-height: var(--lsg-line-height-heading);
115
- --lsg-type-h4-desktop-line-height: var(--lsg-line-height-heading);
116
- --lsg-type-h5-mobile-size: 20px;
117
- --lsg-type-h5-desktop-size: var(--lsg-size-H5);
118
- --lsg-type-h5-mobile-line-height: var(--lsg-line-height-heading);
119
- --lsg-type-h5-desktop-line-height: var(--lsg-line-height-heading);
120
- --lsg-type-h6-mobile-size: 18px;
121
- --lsg-type-h6-desktop-size: var(--lsg-size-H6);
122
- --lsg-type-h6-mobile-line-height: var(--lsg-line-height-copy);
123
- --lsg-type-h6-desktop-line-height: var(--lsg-line-height-copy);
124
- --lsg-type-pretitle-mobile-size: 16px;
125
- --lsg-type-pretitle-desktop-size: var(--lsg-size-Pretitle);
126
- --lsg-type-pretitle-mobile-line-height: var(--lsg-line-height-copy);
127
- --lsg-type-pretitle-desktop-line-height: var(--lsg-line-height-copy);
128
- --lsg-type-body-mobile-size: 16px;
129
- --lsg-type-body-desktop-size: var(--lsg-size-body);
130
- --lsg-type-body-mobile-line-height: var(--lsg-line-height-copy);
131
- --lsg-type-body-desktop-line-height: var(--lsg-line-height-copy);
132
- --lsg-type-large-mobile-size: 40px;
133
- --lsg-type-large-desktop-size: var(--lsg-size-large);
134
- --lsg-type-large-mobile-line-height: var(--lsg-line-height-tight);
135
- --lsg-type-large-desktop-line-height: var(--lsg-line-height-tight);
136
- --lsg-type-xlarge-mobile-size: 48px;
137
- --lsg-type-xlarge-desktop-size: var(--lsg-size-xl);
138
- --lsg-type-xlarge-mobile-line-height: var(--lsg-line-height-tight);
139
- --lsg-type-xlarge-desktop-line-height: var(--lsg-line-height-tight);
140
- --lsg-type-xxlarge-mobile-size: 56px;
141
- --lsg-type-xxlarge-desktop-size: var(--lsg-size-xxl);
142
- --lsg-type-xxlarge-mobile-line-height: var(--lsg-line-height-tight);
143
- --lsg-type-xxlarge-desktop-line-height: var(--lsg-line-height-tight);
144
- --lsg-type-xxxlarge-mobile-size: 64px;
145
- --lsg-type-xxxlarge-desktop-size: var(--lsg-size-xxxl);
146
- --lsg-type-xxxlarge-mobile-line-height: var(--lsg-line-height-tight);
147
- --lsg-type-xxxlarge-desktop-line-height: var(--lsg-line-height-tight);
148
- --lsg-radius-square: 0px;
149
- --lsg-radius-rounded: 10px;
150
- --lsg-radius-pill: 25px;
151
- --lsg-theme-radius: 10px;
152
- --lsg-spacing-size-2XS: 4px;
153
- --lsg-spacing-size-XS: 8px;
154
- --lsg-spacing-size-SM: 16px;
155
- --lsg-spacing-size-MD: 24px;
156
- --lsg-spacing-size-LG: 32px;
157
- --lsg-spacing-size-XL: 64px;
158
- --lsg-spacing-size-2XL: 96px;
159
- --lsg-spacing-size-3XL: 128px;
160
- --lsg-spacing-size-48: 48px;
161
- --lsg-spacing-size-72: 72px;
162
- --lsg-spacing-size-120: 120px;
163
- --lsg-spacing-size-140: 140px;
164
- --lsg-container-width-full: 100%;
165
- --lsg-container-width-medium: 1280px;
166
- --lsg-container-width-narrow: 840px;
167
- --lsg-ai-banner-bg: var(--lsg-color-dark);
168
- --lsg-ai-banner-icon-color: var(--lsg-color-primary);
169
- --lsg-ai-banner-text-color: var(--lsg-color-white);
170
- --lsg-ai-banner-height: 50px;
171
- --lsg-ai-banner-icon-size: 18px;
172
- --lsg-ai-banner-font-size: 0.75rem;
173
- --lsg-ai-banner-gap: var(--lsg-spacing-size-XS);
174
- --lsg-ai-banner-max-width: var(--lsg-container-width-medium);
175
- --lsg-accordion-max-width: 600px;
176
- --lsg-accordion-divider-color: var(--atlascopco-beige-3, #e7e0da);
177
- --lsg-accordion-active-color: var(--lsg-color-primary);
178
- --lsg-accordion-active-border-width: 3px;
179
- --lsg-accordion-title-color: var(--lsg-color-black);
180
- --lsg-accordion-title-font-size: 1rem;
181
- --lsg-accordion-icon-color: var(--lsg-color-secondary, #5b6770);
182
- --lsg-accordion-icon-size: 16px;
183
- --lsg-accordion-icon-gap: 16px;
184
- --lsg-accordion-content-color: var(--lsg-color-secondary, #5b6770);
185
- --lsg-accordion-content-font-size: 1rem;
186
- --lsg-accordion-content-line-height: 1.6;
187
- --lsg-accordion-header-height: 60px;
188
- --lsg-accordion-header-padding-y: 12px;
189
- --lsg-accordion-content-indent: 16px;
190
- --lsg-accordion-content-border-width: 1px;
191
- --lsg-accordion-content-padding-bottom: 16px;
192
- --lsg-accordion-border-radius: var(--lsg-theme-radius);
193
- --lsg-accordion-transition: 300ms ease;
194
- --lsg-accordion-faq-title-font-size: 1.125rem;
195
- --lsg-accordion-faq-content-font-size: 1rem;
196
- --lsg-video-max-width: 960px;
197
- --lsg-video-poster-height: 600px;
198
- --lsg-video-poster-bg: var(--lsg-color-light, #eeeeee);
199
- --lsg-video-tags-inset: 24px;
200
- --lsg-video-tags-max-width-desktop: 419px;
201
- --lsg-video-tags-max-width-mobile: 290px;
202
- --lsg-video-tag-gap: 10px;
203
- --lsg-video-tag-height: 54px;
204
- --lsg-video-tag-padding-x: 16px;
205
- --lsg-video-tag-radius: var(--lsg-theme-radius);
206
- --lsg-video-tag-bg: rgba(238, 238, 238, 0.10);
207
- --lsg-video-tag-bg-hover: rgba(238, 238, 238, 0.20);
208
- --lsg-video-tag-border: rgba(255, 255, 255, 0.2);
209
- --lsg-video-tag-blur: 8px;
210
- --lsg-video-tag-color: var(--lsg-color-primary);
211
- --lsg-video-tag-font-size: 1.125rem;
212
- --lsg-video-play-size: 60px;
213
- --lsg-video-play-color: var(--lsg-color-primary);
214
- --lsg-video-caption-bg: var(--lsg-color-white);
215
- --lsg-video-caption-height: 81px;
216
- --lsg-video-caption-height-hover: 116px;
217
- --lsg-video-caption-padding-x: 24px;
218
- --lsg-video-caption-padding-y: 12px;
219
- --lsg-video-title-color: var(--lsg-color-black, #090909);
220
- --lsg-video-title-font-size: 1.3125rem;
221
- --lsg-video-text-font-size: 1.125rem;
222
- --lsg-video-divider-color: var(--lsg-color-primary);
223
- --lsg-video-divider-width: 1px;
224
- --lsg-video-transition: 300ms ease;
225
- }
226
- }
227
223
  .lsg-button {
228
224
  display: inline-flex;
229
225
  align-items: center;