Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 735ea66

Browse files
authored
chore: added variable.less file (#2361)
1 parent 28f5ae1 commit 735ea66

File tree

3 files changed

+145
-0
lines changed

3 files changed

+145
-0
lines changed

.changeset/forty-schools-relate.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": patch
3+
---
4+
5+
fix: added variables.less back into repo

dist/variables/variables.less

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Responsive Breakpoints
2+
// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
3+
// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
4+
// most mobile devices would be higher in screen width than the smallest viewport width.
5+
6+
// The variables with underscores are to be considered constants. They can be read, but should not be modified.
7+
@_screen-size-XS: 320px;
8+
@_screen-size-SM: 512px;
9+
@_screen-size-MD: 768px;
10+
@_screen-size-LG: 1024px;
11+
@_screen-size-XL: 1280px;
12+
@_screen-size-XL2: 1440px;
13+
@_screen-size-XL3: 1680px;
14+
@_screen-size-XL4: 1920px;
15+
16+
@_page-grid-max-width: 1584px;
17+
@_page-grid-number-cols-small: 8;
18+
@_page-grid-number-cols-large: 16;
19+
@_page-grid-outside-margins-small: 16px;
20+
@_page-grid-outside-margins-large: 32px;
21+
@_page-grid-outside-margins-max: 48px;
22+
@_page-grid-column-gaps-small: var(--spacing-100);
23+
@_page-grid-column-gaps-large: var(--spacing-200);
24+
@_page-grid-row-gaps-small: var(--spacing-100);
25+
@_page-grid-row-gaps-large: var(--spacing-200);
26+
27+
@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
28+
@marketsans-fontname: "Market Sans";
29+
@marketsans-filename-regular: "MarketSans-Regular-WebS";
30+
@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
31+
32+
@font-family-default: @marketsans-fontname, Arial, sans-serif;
33+
// TODO: remove these in next major version
34+
@font-weight-regular: 500;
35+
@font-weight-bold: 700;
36+
37+
@font-size-12: 0.75rem;
38+
@font-size-14: 0.875rem;
39+
@font-size-16: 1rem;
40+
@font-size-18: 1.125rem; // secret size
41+
@font-size-20: 1.25rem;
42+
@font-size-24: 1.5rem;
43+
@font-size-30: 1.875rem;
44+
@font-size-36: 2.25rem;
45+
@font-size-46: 2.875rem;
46+
@font-size-64: 4rem;
47+
48+
@spacing-25: @spacing-100 * 0.25;
49+
@spacing-50: @spacing-100 * 0.5;
50+
@spacing-75: @spacing-100 * 0.75;
51+
@spacing-100: 8px;
52+
@spacing-125: @spacing-100 * 1.25;
53+
@spacing-150: @spacing-100 * 1.5;
54+
@spacing-200: @spacing-100 * 2;
55+
@spacing-250: @spacing-100 * 2.5;
56+
@spacing-300: @spacing-100 * 3;
57+
@spacing-400: @spacing-100 * 4;
58+
@spacing-450: @spacing-100 * 4.5;
59+
@spacing-600: @spacing-100 * 6;
60+
@spacing-700: @spacing-100 * 7;
61+
@spacing-800: @spacing-100 * 8;
62+
63+
@font-size-giant-3: @font-size-46;
64+
@font-size-giant-2: @font-size-36;
65+
@font-size-giant-1: @font-size-30;
66+
@font-size-large-2: @font-size-24;
67+
@font-size-large-1: @font-size-20;
68+
@font-size-medium: @font-size-16;
69+
@font-size-regular: @font-size-14;
70+
@font-size-small: @font-size-12;

src/sass/variables/variables.less

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Responsive Breakpoints
2+
// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
3+
// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
4+
// most mobile devices would be higher in screen width than the smallest viewport width.
5+
6+
// The variables with underscores are to be considered constants. They can be read, but should not be modified.
7+
@_screen-size-XS: 320px;
8+
@_screen-size-SM: 512px;
9+
@_screen-size-MD: 768px;
10+
@_screen-size-LG: 1024px;
11+
@_screen-size-XL: 1280px;
12+
@_screen-size-XL2: 1440px;
13+
@_screen-size-XL3: 1680px;
14+
@_screen-size-XL4: 1920px;
15+
16+
@_page-grid-max-width: 1584px;
17+
@_page-grid-number-cols-small: 8;
18+
@_page-grid-number-cols-large: 16;
19+
@_page-grid-outside-margins-small: 16px;
20+
@_page-grid-outside-margins-large: 32px;
21+
@_page-grid-outside-margins-max: 48px;
22+
@_page-grid-column-gaps-small: var(--spacing-100);
23+
@_page-grid-column-gaps-large: var(--spacing-200);
24+
@_page-grid-row-gaps-small: var(--spacing-100);
25+
@_page-grid-row-gaps-large: var(--spacing-200);
26+
27+
@marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
28+
@marketsans-fontname: "Market Sans";
29+
@marketsans-filename-regular: "MarketSans-Regular-WebS";
30+
@marketsans-filename-bold: "MarketSans-SemiBold-WebS";
31+
32+
@font-family-default: @marketsans-fontname, Arial, sans-serif;
33+
// TODO: remove these in next major version
34+
@font-weight-regular: 500;
35+
@font-weight-bold: 700;
36+
37+
@font-size-12: 0.75rem;
38+
@font-size-14: 0.875rem;
39+
@font-size-16: 1rem;
40+
@font-size-18: 1.125rem; // secret size
41+
@font-size-20: 1.25rem;
42+
@font-size-24: 1.5rem;
43+
@font-size-30: 1.875rem;
44+
@font-size-36: 2.25rem;
45+
@font-size-46: 2.875rem;
46+
@font-size-64: 4rem;
47+
48+
@spacing-25: @spacing-100 * 0.25;
49+
@spacing-50: @spacing-100 * 0.5;
50+
@spacing-75: @spacing-100 * 0.75;
51+
@spacing-100: 8px;
52+
@spacing-125: @spacing-100 * 1.25;
53+
@spacing-150: @spacing-100 * 1.5;
54+
@spacing-200: @spacing-100 * 2;
55+
@spacing-250: @spacing-100 * 2.5;
56+
@spacing-300: @spacing-100 * 3;
57+
@spacing-400: @spacing-100 * 4;
58+
@spacing-450: @spacing-100 * 4.5;
59+
@spacing-600: @spacing-100 * 6;
60+
@spacing-700: @spacing-100 * 7;
61+
@spacing-800: @spacing-100 * 8;
62+
63+
@font-size-giant-3: @font-size-46;
64+
@font-size-giant-2: @font-size-36;
65+
@font-size-giant-1: @font-size-30;
66+
@font-size-large-2: @font-size-24;
67+
@font-size-large-1: @font-size-20;
68+
@font-size-medium: @font-size-16;
69+
@font-size-regular: @font-size-14;
70+
@font-size-small: @font-size-12;

0 commit comments

Comments
 (0)