@sats-group/ui-lib 74.2.0

package/tokens/primitives.scss

@@ -0,0 +1,137 @@
+// Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/%F0%9F%8E%A8-sats-ds-styles?type=design&node-id=8481%3A40159&mode=design&t=4Gq1pqiSLpmo4bBj-1
+
+$black-10: #e5e5e5;
+$black-100: #000000;
+$black-20: #cccccc;
+$black-3: #f7f7f7;
+$black-40: #999999;
+$black-5: #f2f2f2;
+$black-50: #808080;
+$black-55: #707070;
+$black-60: #666666;
+$black-70: #4c4c4c;
+$black-80: #333333;
+$black-85: #262626;
+$black-90: #1a1a1a;
+$black-95: #0d0d0d;
+$black-o20: #00000033;
+$blue-10: #e7e9eb;
+$blue-100: #0d2134;
+$blue-105: #0a1826;
+$blue-110: #06101a;
+$blue-20: #cfd3d6;
+$blue-40: #9ea6ae;
+$blue-5: #f3f4f5;
+$blue-70: #566471;
+$blue-90: #253748;
+$blue-grey-80: #404d5b;
+$bright-blue-10: #e9f1f7;
+$bright-blue-100: #2676b0;
+$bright-blue-110: #226a9e;
+$bright-blue-130: #1b537b;
+$bright-blue-160: #0f2f46;
+$bright-blue-170: #0b2335;
+$bright-blue-20: #d4e4ef;
+$bright-blue-60: #7dadd0;
+$bright-blue-80: #5191c0;
+$cardinal-10: #f8ebed;
+$cardinal-100: #b93947;
+$cardinal-120: #942e39;
+$cardinal-170: #381115;
+$cardinal-30: #eac4c8;
+$cardinal-60: #d58891;
+$caribbean-current-10: #e6efef;
+$caribbean-current-100: #065d63;
+$caribbean-current-140: #054a4f;
+$caribbean-current-160: #04383b;
+$caribbean-current-180: #011314;
+$caribbean-current-20: #cddfe0;
+$caribbean-current-60: #6a9ea1;
+$celadon-10: #f0fdf4;
+$celadon-100: #65e694;
+$celadon-140: #3f965e;
+$celadon-160: #184629;
+$celadon-180: #051e0e;
+$celadon-20: #e0faea;
+$celadon-60: #a3f0bf;
+$chili-red-10: #fbeae9;
+$chili-red-100: #d93226;
+$chili-red-120: #ae281e;
+$chili-red-170: #410f0b;
+$chili-red-60: #e8847d;
+$chili-red-80: #e15b51;
+$coral-10: #ffeeeb;
+$coral-100: #fa5333;
+$coral-120: #c84229;
+$coral-130: #af3a24;
+$coral-170: #4b190f;
+$coral-190: #32110a;
+$coral-40: #fdbaad;
+$coral-5: #fff6f5;
+$coral-60: #fc9885;
+$coral-90: #fb6447;
+$egyptian-purple-10: #ebebf3;
+$egyptian-purple-100: #37378b;
+$egyptian-purple-160: #161638;
+$egyptian-purple-40: #afafd1;
+$egyptian-purple-60: #8787b9;
+$egyptian-purple-80: #5f5fa2;
+$gold-10: #f8f3e8;
+$gold-100: #e2b74a;
+$gold-110: #cca442;
+$gold-130: #9e8034;
+$gold-140: #866c2a;
+$gold-170: #443716;
+$gold-30: #f3e6c5;
+$gold-60: #ecd290;
+$gold-80: #e7c46d;
+$light-grey-15: #dcdee0;
+$salmon-pink-10: #fff1f3;
+$salmon-pink-100: #ff7083;
+$salmon-pink-140: #b54352;
+$salmon-pink-160: #912d3a;
+$salmon-pink-180: #470009;
+$salmon-pink-20: #ffe2e6;
+$salmon-pink-60: #ffa9b5;
+$spring-green-10: #e6f2ee;
+$spring-green-100: #097f58;
+$spring-green-120: #076646;
+$spring-green-170: #03261a;
+$spring-green-30: #b5d9cd;
+$spring-green-60: #6bb29b;
+$spring-green-80: #3a9979;
+$tangerine-10: #fff6e6;
+$tangerine-100: #fba000;
+$tangerine-140: #976000;
+$tangerine-160: #644000;
+$tangerine-180: #322000;
+$tangerine-20: #feeccc;
+$tangerine-60: #fdc666;
+$tropical-indigo-10: #f6f1ff;
+$tropical-indigo-100: #a670ff;
+$tropical-indigo-140: #644399;
+$tropical-indigo-160: #422d66;
+$tropical-indigo-180: #211633;
+$tropical-indigo-20: #ede2ff;
+$tropical-indigo-60: #caa9ff;
+$uranian-blue-10: #f1f9ff;
+$uranian-blue-100: #70c4ff;
+$uranian-blue-140: #2d6891;
+$uranian-blue-160: #16496c;
+$uranian-blue-180: #0b3959;
+$uranian-blue-20: #e2f3ff;
+$uranian-blue-60: #a9dcff;
+$white-0: #ffffff00;
+$white-10: #ffffff1a;
+$white-100: #ffffff;
+$white-15: #ffffff26;
+$white-20: #ffffff33;
+$white-40: #ffffff66;
+$white-5: #ffffff0d;
+$white-50: #ffffff80;
+$white-60: #ffffff99;
+$white-65: #ffffffa6;
+$white-70: #ffffffb2;
+$white-80: #ffffffcc;
+$white-85: #ffffffd9;
+$white-90: #ffffffe5;

package/tokens/spacing.scss

@@ -0,0 +1,12 @@
+// https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/sats-ds-styles?node-id=408%3A85
+$xxs: 4px;
+$xs: 8px;
+$s: 12px;
+$m: 16px;
+$l: 24px;
+$xl: 32px;
+$xxl: 64px;
+$xxxl: 128px;
+
+$hero: 256px;
+$minimum-viewport-width: 320px;