@@ -22,18 +22,9 @@ configurable in a single variables file. More information about Tachyons can be
2222@custom-media --breakpoint-large screen and (min-width: 60em);
2323
2424:root {
25-
26- --sans-serif: -apple-system, BlinkMacSystemFont,
27- 'avenir next', avenir,
28- helvetica, 'helvetica neue',
29- ubuntu,
30- roboto,
31- noto,
32- 'segoe ui',
33- arial,
34- sans-serif;
35- --serif: georgia, serif;
36- --code: consolas, monaco, monospace;
25+ --sans-serif: -apple-system, BlinkMacSystemFont, -system-ui, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
26+ --serif: athelas, serif;
27+ --monospace: SFMono, consolas, monaco, monospace;
3728
3829 --font-size-headline: 6rem;
3930 --font-size-subheadline: 5rem;
@@ -42,8 +33,12 @@ configurable in a single variables file. More information about Tachyons can be
4233 --font-size-3: 1.5rem;
4334 --font-size-4: 1.25rem;
4435 --font-size-5: 1rem;
45- --font-size-6: .875rem;
46- --font-size-7: .75rem;
36+ --font-size-6: 0.875rem;
37+ --font-size-7: 0.75rem;
38+
39+ --measure: 30em;
40+ --measure-narrow: 20em;
41+ --measure-wide: 34em;
4742
4843 --letter-spacing-tight:-.05em;
4944 --letter-spacing-1:.1em;
@@ -53,21 +48,32 @@ configurable in a single variables file. More information about Tachyons can be
5348 --line-height-title: 1.25;
5449 --line-height-copy: 1.5;
5550
56- --spacing-none: 0;
57- --spacing-extra-small: .25rem;
58- --spacing-small: .5rem;
51+ --spacing-extra-small: 0.25rem;
52+ --spacing-small: 0.5rem;
5953 --spacing-medium: 1rem;
6054 --spacing-large: 2rem;
6155 --spacing-extra-large: 4rem;
6256 --spacing-extra-extra-large: 8rem;
6357 --spacing-extra-extra-extra-large: 16rem;
6458
59+ --border-radius-1: 0.125rem;
60+ --border-radius-2: 0.25rem;
61+ --border-radius-3: 0.5rem;
62+ --border-radius-4: 1rem;
63+ --border-radius-circle: 100%;
64+ --border-radius-pill: 9999px;
65+
66+ --box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 );
67+ --box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
68+ --box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
69+ --box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 );
70+ --box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );
71+
6572 --height-1: 1rem;
6673 --height-2: 2rem;
6774 --height-3: 4rem;
6875 --height-4: 8rem;
6976 --height-5: 16rem;
70-
7177 --width-1: 1rem;
7278 --width-2: 2rem;
7379 --width-3: 4rem;
@@ -84,92 +90,86 @@ configurable in a single variables file. More information about Tachyons can be
8490 --max-width-8: 64rem;
8591 --max-width-9: 96rem;
8692
87- --border-radius-none: 0;
88- --border-radius-1: .125rem;
89- --border-radius-2: .25rem;
90- --border-radius-3: .5rem;
91- --border-radius-4: 1rem;
92- --border-radius-circle: 100%;
93- --border-radius-pill: 9999px;
94-
95- --border-width-none: 0;
96- --border-width-1: .125rem;
97- --border-width-2: .25rem;
98- --border-width-3: .5rem;
99- --border-width-4: 1rem;
100- --border-width-5: 2rem;
101-
102- --box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 );
103- --box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 );
104- --box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 );
105- --box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 );
106- --box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 );
107-
108- --black: #000;
109- --near-black: #111;
110- --dark-gray:#333;
111- --mid-gray:#555;
112- --gray: #777;
113- --silver: #999;
114- --light-silver: #aaa;
115- --moon-gray: #ccc;
116- --light-gray: #eee;
117- --near-white: #f4f4f4;
118- --white: #fff;
119-
120- --transparent:transparent;
121-
122- --black-90: rgba(0,0,0,.9);
123- --black-80: rgba(0,0,0,.8);
124- --black-70: rgba(0,0,0,.7);
125- --black-60: rgba(0,0,0,.6);
126- --black-50: rgba(0,0,0,.5);
127- --black-40: rgba(0,0,0,.4);
128- --black-30: rgba(0,0,0,.3);
129- --black-20: rgba(0,0,0,.2);
130- --black-10: rgba(0,0,0,.1);
131- --black-05: rgba(0,0,0,.05);
132- --black-025: rgba(0,0,0,.025);
133- --black-0125: rgba(0,0,0,.0125);
134-
135- --white-90: rgba(255,255,255,.9);
136- --white-80: rgba(255,255,255,.8);
137- --white-70: rgba(255,255,255,.7);
138- --white-60: rgba(255,255,255,.6);
139- --white-50: rgba(255,255,255,.5);
140- --white-40: rgba(255,255,255,.4);
141- --white-30: rgba(255,255,255,.3);
142- --white-20: rgba(255,255,255,.2);
143- --white-10: rgba(255,255,255,.1);
144- --white-05: rgba(255,255,255,.05);
145- --white-025: rgba(255,255,255,.025);
146- --white-0125: rgba(255,255,255,.0125);
147-
148- --dark-red: #e7040f;
149- --red: #ff4136;
150- --light-red: #ff725c;
151- --orange: #ff6300;
152- --gold: #ffb700;
153- --yellow: #ffd700;
154- --light-yellow: #fbf1a9;
155- --purple: #5e2ca5;
156- --light-purple: #a463f2;
157- --dark-pink: #d5008f;
158- --hot-pink: #ff41b4;
159- --pink: #ff80cc;
160- --light-pink: #ffa3d7;
161- --dark-green: #137752;
162- --green: #19a974;
163- --light-green: #9eebcf;
164- --navy: #001b44;
165- --dark-blue: #00449e;
166- --blue: #357edd;
167- --light-blue: #96ccff;
168- --lightest-blue: #cdecff;
169- --washed-blue: #f6fffe;
170- --washed-green: #e8fdf5;
171- --washed-yellow: #fffceb;
172- --washed-red: #ffdfdf;
93+ --red-000: #2a1311;
94+ --red-100: #4d1d1c;
95+ --red-200: #732627;
96+ --red-300: #9b2e32;
97+ --red-400: #c5363d;
98+ --red-500: #d95857;
99+ --red-600: #e57c76;
100+ --red-700: #f09d97;
101+ --red-800: #f8beb8;
102+ --red-900: #fddedb;
103+ --gold-000: #271609;
104+ --gold-100: #45240f;
105+ --gold-200: #663212;
106+ --gold-300: #894213;
107+ --gold-400: #ad5112;
108+ --gold-500: #d36110;
109+ --gold-600: #e48043;
110+ --gold-700: #f0a071;
111+ --gold-800: #f9bf9f;
112+ --gold-900: #ffdfce;
113+ --green-000: #111c0f;
114+ --green-100: #193218;
115+ --green-200: #1f4920;
116+ --green-300: #246227;
117+ --green-400: #287b2f;
118+ --green-500: #2b9637;
119+ --green-600: #2db13e;
120+ --green-700: #2dcd46;
121+ --green-800: #2cea4e;
122+ --green-900: #96fc93;
123+ --teal-000: #121b1b;
124+ --teal-100: #1b302f;
125+ --teal-200: #234644;
126+ --teal-300: #2b5e5a;
127+ --teal-400: #337672;
128+ --teal-500: #3a8f8a;
129+ --teal-600: #41aaa3;
130+ --teal-700: #48c4bd;
131+ --teal-800: #54e0d8;
132+ --teal-900: #b5f0eb;
133+ --blue-000: #131a26;
134+ --blue-100: #1c2d47;
135+ --blue-200: #22416b;
136+ --blue-300: #255791;
137+ --blue-400: #256db9;
138+ --blue-500: #4884d2;
139+ --blue-600: #769bdb;
140+ --blue-700: #9bb3e5;
141+ --blue-800: #bdccee;
142+ --blue-900: #dee5f6;
143+ --indigo-000: #201237;
144+ --indigo-100: #35196c;
145+ --indigo-200: #491fa7;
146+ --indigo-300: #5d22e6;
147+ --indigo-400: #7d41f8;
148+ --indigo-500: #9962fa;
149+ --indigo-600: #b282fc;
150+ --indigo-700: #c8a1fe;
151+ --indigo-800: #dcc0ff;
152+ --indigo-900: #eedfff;
153+ --violet-000: #2a121d;
154+ --violet-100: #4e1933;
155+ --violet-200: #761c4b;
156+ --violet-300: #9f1d65;
157+ --violet-400: #cb187f;
158+ --violet-500: #dd4a95;
159+ --violet-600: #e873a9;
160+ --violet-700: #f098be;
161+ --violet-800: #f7bbd3;
162+ --violet-900: #fcdde9;
163+ --gray-000: #191a1a;
164+ --gray-100: #2c2d2d;
165+ --gray-200: #3f4141;
166+ --gray-300: #545657;
167+ --gray-400: #696c6d;
168+ --gray-500: #808385;
169+ --gray-600: #979b9d;
170+ --gray-700: #b0b3b4;
171+ --gray-800: #cacccd;
172+ --gray-900: #e4e5e6;
173173}
174174```
175175
0 commit comments