sfc-utils 1.3.54 → 1.3.56

package/styles/values.less

@@ -0,0 +1,128 @@
+@import (less) './variables.less';
+
+//sizing and spacing tachyons
+.text-width {
+    max-width: @md;
+    padding: 0 @s16;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mb-xxs {margin-bottom: @s4;}
+.mb-xs {margin-bottom: @s8;}
+.mb-sm {margin-bottom: @s16;}
+.mb-md {margin-bottom: @s24;}
+.mb-lg {margin-bottom: @s32;}
+.mb-xl {margin-bottom: @s40;}
+.mb-xxl {margin-bottom: @s48;}
+.mb-auto {margin-bottom: auto;}
+
+.mt-xxs {margin-top: @s4;}
+.mt-xs {margin-top: @s8;}
+.mt-sm {margin-top: @s16;}
+.mt-md {margin-top: @s24;}
+.mt-lg {margin-top: @s32;}
+.mt-xl {margin-top: @s40;}
+.mt-xxl {margin-top: @s48;}
+.mt-auto {margin-top: auto;}
+
+.mr-xxs {margin-right: @s4;}
+.mr-xs {margin-right: @s8;}
+.mr-sm {margin-right: @s16;}
+.mr-md {margin-right: @s24;}
+.mr-lg {margin-right: @s32;}
+.mr-xl {margin-right: @s40;}
+.mr-xxl {margin-right: @s48;}
+.mr-auto {margin-right: auto;}
+
+.ml-xxs {margin-left: @s4;}
+.ml-xs {margin-left: @s8;}
+.ml-sm {margin-left: @s16;}
+.ml-md {margin-left: @s24;}
+.ml-lg {margin-left: @s32;}
+.ml-xl {margin-left: @s40;}
+.ml-xxl {margin-left: @s48;}
+.ml-auto {margin-left: auto;}
+
+.ma-xxs {margin: @s4;}
+.ma-xs {margin: @s8;}
+.ma-sm {margin: @s16;}
+.ma-md {margin: @s24;}
+.ma-lg {margin: @s32;}
+.ma-xl {margin: @s40;}
+.ma-xxl {margin: @s48;}
+.ma-auto {margin: auto;}
+
+//padding
+.pb-xxs {padding-bottom: @s4;}
+.pb-xs {padding-bottom: @s8;}
+.pb-sm {padding-bottom: @s16;}
+.pb-md {padding-bottom: @s24;}
+.pb-lg {padding-bottom: @s32;}
+.pb-xl {padding-bottom: @s40;}
+.pb-xxl {padding-bottom: @s48;}
+
+.pt-xxs {padding-top: @s4;}
+.pt-xs {padding-top: @s8;}
+.pt-sm {padding-top: @s16;}
+.pt-md {padding-top: @s24;}
+.pt-lg {padding-top: @s32;}
+.pt-xl {padding-top: @s40;}
+.pt-xxl {padding-top: @s48;}
+
+.pr-xxs {padding-right: @s4;}
+.pr-xs {padding-right: @s8;}
+.pr-sm {padding-right: @s16;}
+.pr-md {padding-right: @s24;}
+.pr-lg {padding-right: @s32;}
+.pr-xl {padding-right: @s40;}
+.pr-xxl {padding-right: @s48;}
+
+.pl-xxs {padding-left: @s4;}
+.pl-xs {padding-left: @s8;}
+.pl-sm {padding-left: @s16;}
+.pl-md {padding-left: @s24;}
+.pl-lg {padding-left: @s32;}
+.pl-xl {padding-left: @s40;}
+.pl-xxl {padding-left: @s48;}
+
+.pa-xxs {padding: @s4;}
+.pa-xs {padding: @s8;}
+.pa-sm {padding: @s16;}
+.pa-md {padding: @s24;}
+.pa-lg {padding: @s32;}
+.pa-xl {padding: @s40;}
+.pa-xxl {padding: @s48;}
+
+.mw-sm {max-width: @sm;}
+.mw-md {max-width: @md;}
+.mw-lg {max-width: @lg;}
+.mw-xl {max-width: @xl;}
+.mw-100 {max-width: 100%;}
+
+//alignment
+.center {text-align: center;}
+.left {text-align: left;}
+.right {text-align: right;}
+
+
+// accessibility styles from https://github.com/mike-engel/a11y-css-reset/
+/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
+.visually-hidden() {
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  border: 0;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  margin: -1px;
+}
+
+/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
+.plain-list() {
+  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
+  padding-left: 0;
+}

package/styles/variables.less

@@ -0,0 +1,143 @@
+//sizing variables
+@s4: 0.25rem;
+@s8: 0.5rem;
+@s16: 1rem;
+@s24: 1.5rem;
+@s32: 2rem;
+@s40: 2.5rem;
+@s48: 3rem;
+@s56: 3.5rem;
+@s64: 4rem;
+@s72: 4.5rem;
+@s80: 5rem;
+@s88: 5.5rem;
+@s96: 6rem;
+@s104: 6.5rem;
+@s112: 7rem;
+@s120: 7.5rem;
+@s128: 8rem;
+@s136: 8.5rem;
+@s144: 9rem;
+@s152: 9.5rem;
+@s160: 10rem;
+
+//font-only variables
+@s12: 0.75rem;
+@s14: 0.875rem;
+@s18: 1.125rem;
+@s20: 1.25rem;
+
+//widths
+@xs: 320px;
+@sm: 480px;
+@md: 672px;
+@lg: 928px;
+@xl: 1200px;
+@w-text-width: 640px;
+@w-tablet: 768px;
+@w-mobile: 480px;
+
+//media queries
+@mobile: ~"(max-width: 480px)";
+@tablet: ~"(max-width: 768px)";
+@max: ~"(max-width: 1000000px)";
+
+@max-sm: ~"(max-width: 400px)";
+@max-tablet: ~"(max-width: 768px)";
+@max-text-width: ~"(max-width: 672px)";
+@max-desktop: ~"(max-width: 1200px)";
+@max: ~"(max-width: 1000000px)";
+
+@min-mobile: ~"(min-width: 480px)";
+@min-tablet: ~"(min-width: 768px)";
+@min-text-width: ~"(min-width: 672px)";
+@min-desktop: ~"(min-width: 1200px)";
+
+//color variables
+@white: #FFFFFF;
+@black: #111111;
+
+@grey-100: #3E3E3E;
+@grey-75: #676767;
+@grey-50: #909090;
+@grey-25: #C7C7C7;
+@grey-0: #E1E1E1;
+@grey-pale: #F4F4F4;
+
+//brights: best used as highlights or spot colors
+@red-bright: #D20C0E;
+@blue-bright: #1874CB;
+@pink-bright: #E94B73;
+@teal-bright: #26A0A5;
+@gold-bright: #FFBC30;
+@orange-bright: #FF7500;
+@green-bright: #7CA735;
+@purple-bright: #B87790;
+
+//pales: best used as backgrounds or large color blocks/screens
+@red-pale: #FBF5F5;
+@blue-pale: #EFF5FA;
+@pink-pale: #FCF2F3;
+@teal-pale: #EDF7F9;
+@gold-pale: #FCF9F0;
+@orange-pale: #FCF4EE;
+@green-pale: #F5F7F1;
+@purple-pale: #F8F5F8;
+
+//color scales - 100 is the base, higher values are darker, lower values are lighter
+@red-300: #7F0D0A;
+@red-100: #BA142D;
+@red-75: #D06566;
+@red-50: #D18786;
+@red-25: #DDABAA;
+@red-0: #F2E1E1;
+
+@blue-300: #003166;
+@blue-100: #025BAF;
+@blue-75: #428BCA;
+@blue-50: #67A2D4;
+@blue-25: #95C1E8;
+@blue-0: #CFE0EF;
+
+@pink-300: #951D3A;
+@pink-100: #D1365E;
+@pink-75: #DA5E7D;
+@pink-50: #E3879D;
+@pink-25: #ECAFBC;
+@pink-0: #F5D7DB;
+
+@teal-300: #00505A;
+@teal-100: #189196;
+@teal-75: #45A6AC;
+@teal-50: #71BBC2;
+@teal-25: #9ED1D8;
+@teal-0: #CAE6EE;
+
+@gold-300: #B17A00;
+@gold-200: #D39213;
+@gold-100: #E5A72C;
+@gold-75: #E8BD62;
+@gold-50: #EDCE87;
+@gold-25: #F1DEAD;
+@gold-0: #F6EED2;
+
+@orange-300: #B05A0C;
+@orange-100: #DF7821;
+@orange-75: #E4914B;
+@orange-50: #EAAB76;
+@orange-25: #F0C4A1;
+@orange-0: #F5DECB;
+
+@green-300: #5F7539;
+@green-100: #819958;
+@green-75: #99AC78;
+@green-50: #B1C097;
+@green-25: #C8D3B7;
+@green-0: #E0E6D6;
+
+@purple-300: #724C6C;
+@purple-100: #97668F;
+@purple-75: #AC84A5;
+@purple-50: #C1A3BC;
+@purple-25: #D6C1D3;
+@purple-0: #EBE0E9;