@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/styles/variables/_elevation.css

@@ -0,0 +1,11 @@
+@value elevationNone: 0;
+
+@value elevationCard: 4;
+
+@value elevationMenu: 12;
+
+@value elevationBackdrop: 40;
+
+@value elevationModal: 40;
+
+@value elevationToast: 60;

package/lib/styles/variables/_elevation.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = void 0;
+
+const elevationNone = '0';
+exports.elevationNone = elevationNone;
+const elevationCard = '4';
+exports.elevationCard = elevationCard;
+const elevationMenu = '12';
+exports.elevationMenu = elevationMenu;
+const elevationBackdrop = '40';
+exports.elevationBackdrop = elevationBackdrop;
+const elevationModal = '40';
+exports.elevationModal = elevationModal;
+const elevationToast = '60';
+exports.elevationToast = elevationToast;

package/lib/styles/variables/_elevation.js.flow

@@ -0,0 +1,13 @@
+// @flow strict
+
+export const elevationNone = '0';
+
+export const elevationCard = '4';
+
+export const elevationMenu = '12';
+
+export const elevationBackdrop = '40';
+
+export const elevationModal = '40';
+
+export const elevationToast = '60';

package/lib/styles/variables/_font.css

@@ -0,0 +1,51 @@
+@value fontFamilyCentra: "Centra No2";
+
+@value fontWeightBook: 400;
+
+@value fontWeightMedium: 500;
+
+@value fontSize12: 12px;
+
+@value fontSize13: 13px;
+
+@value fontSize14: 14px;
+
+@value fontSize16: 16px;
+
+@value fontSize18: 18px;
+
+@value fontSize26: 26px;
+
+@value fontSize46: 46px;
+
+@value fontLetterSpacing0: 0em;
+
+@value fontLetterSpacing1: 0.01em;
+
+@value fontLetterSpacing2: 0.02em;
+
+@value fontLetterSpacing4: 0.04em;
+
+@value fontLetterSpacingMinus1: -0.01em;
+
+@value fontLetterSpacingMinus2: -0.02em;
+
+@value fontLetterSpacingMinus4: -0.04em;
+
+@value fontLineHeight100: 100%;
+
+@value fontLineHeight120: 120%;
+
+@value fontLineHeight130: 130%;
+
+@value fontLineHeight140: 140%;
+
+@value fontLineHeight150: 150%;
+
+@value fontLineHeight170: 170%;
+
+@value fontParagraphSpacing0: 0;
+
+@value fontTextCaseNone: none;
+
+@value fontTextDecorationNone: none;

package/lib/styles/variables/_font.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize26 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = void 0;
+
+const fontFamilyCentra = '"Centra No2"';
+exports.fontFamilyCentra = fontFamilyCentra;
+const fontWeightBook = '400';
+exports.fontWeightBook = fontWeightBook;
+const fontWeightMedium = '500';
+exports.fontWeightMedium = fontWeightMedium;
+const fontSize12 = '12px';
+exports.fontSize12 = fontSize12;
+const fontSize13 = '13px';
+exports.fontSize13 = fontSize13;
+const fontSize14 = '14px';
+exports.fontSize14 = fontSize14;
+const fontSize16 = '16px';
+exports.fontSize16 = fontSize16;
+const fontSize18 = '18px';
+exports.fontSize18 = fontSize18;
+const fontSize26 = '26px';
+exports.fontSize26 = fontSize26;
+const fontSize46 = '46px';
+exports.fontSize46 = fontSize46;
+const fontLetterSpacing0 = '0em';
+exports.fontLetterSpacing0 = fontLetterSpacing0;
+const fontLetterSpacing1 = '0.01em';
+exports.fontLetterSpacing1 = fontLetterSpacing1;
+const fontLetterSpacing2 = '0.02em';
+exports.fontLetterSpacing2 = fontLetterSpacing2;
+const fontLetterSpacing4 = '0.04em';
+exports.fontLetterSpacing4 = fontLetterSpacing4;
+const fontLetterSpacingMinus1 = '-0.01em';
+exports.fontLetterSpacingMinus1 = fontLetterSpacingMinus1;
+const fontLetterSpacingMinus2 = '-0.02em';
+exports.fontLetterSpacingMinus2 = fontLetterSpacingMinus2;
+const fontLetterSpacingMinus4 = '-0.04em';
+exports.fontLetterSpacingMinus4 = fontLetterSpacingMinus4;
+const fontLineHeight100 = '100%';
+exports.fontLineHeight100 = fontLineHeight100;
+const fontLineHeight120 = '120%';
+exports.fontLineHeight120 = fontLineHeight120;
+const fontLineHeight130 = '130%';
+exports.fontLineHeight130 = fontLineHeight130;
+const fontLineHeight140 = '140%';
+exports.fontLineHeight140 = fontLineHeight140;
+const fontLineHeight150 = '150%';
+exports.fontLineHeight150 = fontLineHeight150;
+const fontLineHeight170 = '170%';
+exports.fontLineHeight170 = fontLineHeight170;
+const fontParagraphSpacing0 = '0';
+exports.fontParagraphSpacing0 = fontParagraphSpacing0;
+const fontTextCaseNone = 'none';
+exports.fontTextCaseNone = fontTextCaseNone;
+const fontTextDecorationNone = 'none';
+exports.fontTextDecorationNone = fontTextDecorationNone;

package/lib/styles/variables/_font.js.flow

@@ -0,0 +1,53 @@
+// @flow strict
+
+export const fontFamilyCentra = '"Centra No2"';
+
+export const fontWeightBook = '400';
+
+export const fontWeightMedium = '500';
+
+export const fontSize12 = '12px';
+
+export const fontSize13 = '13px';
+
+export const fontSize14 = '14px';
+
+export const fontSize16 = '16px';
+
+export const fontSize18 = '18px';
+
+export const fontSize26 = '26px';
+
+export const fontSize46 = '46px';
+
+export const fontLetterSpacing0 = '0em';
+
+export const fontLetterSpacing1 = '0.01em';
+
+export const fontLetterSpacing2 = '0.02em';
+
+export const fontLetterSpacing4 = '0.04em';
+
+export const fontLetterSpacingMinus1 = '-0.01em';
+
+export const fontLetterSpacingMinus2 = '-0.02em';
+
+export const fontLetterSpacingMinus4 = '-0.04em';
+
+export const fontLineHeight100 = '100%';
+
+export const fontLineHeight120 = '120%';
+
+export const fontLineHeight130 = '130%';
+
+export const fontLineHeight140 = '140%';
+
+export const fontLineHeight150 = '150%';
+
+export const fontLineHeight170 = '170%';
+
+export const fontParagraphSpacing0 = '0';
+
+export const fontTextCaseNone = 'none';
+
+export const fontTextDecorationNone = 'none';

package/lib/styles/variables/_motion.css

@@ -0,0 +1,11 @@
+@value motionDurationFast: 100ms;
+
+@value motionDurationNormal: 200ms;
+
+@value motionDurationSlow: 300ms;
+
+@value motionDurationSlower: 500ms;
+
+@value motionDurationSlowest: 1000ms;
+
+@value motionEaseInEaseOut: ease-in-out;

package/lib/styles/variables/_motion.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = void 0;
+
+const motionDurationFast = '100ms';
+exports.motionDurationFast = motionDurationFast;
+const motionDurationNormal = '200ms';
+exports.motionDurationNormal = motionDurationNormal;
+const motionDurationSlow = '300ms';
+exports.motionDurationSlow = motionDurationSlow;
+const motionDurationSlower = '500ms';
+exports.motionDurationSlower = motionDurationSlower;
+const motionDurationSlowest = '1000ms';
+exports.motionDurationSlowest = motionDurationSlowest;
+const motionEaseInEaseOut = 'ease-in-out';
+exports.motionEaseInEaseOut = motionEaseInEaseOut;

package/lib/styles/variables/_motion.js.flow

@@ -0,0 +1,13 @@
+// @flow strict
+
+export const motionDurationFast = '100ms';
+
+export const motionDurationNormal = '200ms';
+
+export const motionDurationSlow = '300ms';
+
+export const motionDurationSlower = '500ms';
+
+export const motionDurationSlowest = '1000ms';
+
+export const motionEaseInEaseOut = 'ease-in-out';

package/lib/styles/variables/_opacity.css

@@ -0,0 +1,29 @@
+@value opacity100: 100%;
+
+@value opacity95: 95%;
+
+@value opacity90: 90%;
+
+@value opacity85: 85%;
+
+@value opacity80: 80%;
+
+@value opacity70: 70%;
+
+@value opacity60: 60%;
+
+@value opacity50: 50%;
+
+@value opacity40: 40%;
+
+@value opacity30: 30%;
+
+@value opacity20: 20%;
+
+@value opacity15: 15%;
+
+@value opacity10: 10%;
+
+@value opacity5: 5%;
+
+@value opacity0: 0%;

package/lib/styles/variables/_opacity.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = void 0;
+
+const opacity100 = '100%';
+exports.opacity100 = opacity100;
+const opacity95 = '95%';
+exports.opacity95 = opacity95;
+const opacity90 = '90%';
+exports.opacity90 = opacity90;
+const opacity85 = '85%';
+exports.opacity85 = opacity85;
+const opacity80 = '80%';
+exports.opacity80 = opacity80;
+const opacity70 = '70%';
+exports.opacity70 = opacity70;
+const opacity60 = '60%';
+exports.opacity60 = opacity60;
+const opacity50 = '50%';
+exports.opacity50 = opacity50;
+const opacity40 = '40%';
+exports.opacity40 = opacity40;
+const opacity30 = '30%';
+exports.opacity30 = opacity30;
+const opacity20 = '20%';
+exports.opacity20 = opacity20;
+const opacity15 = '15%';
+exports.opacity15 = opacity15;
+const opacity10 = '10%';
+exports.opacity10 = opacity10;
+const opacity5 = '5%';
+exports.opacity5 = opacity5;
+const opacity0 = '0%';
+exports.opacity0 = opacity0;

package/lib/styles/variables/_opacity.js.flow

@@ -0,0 +1,31 @@
+// @flow strict
+
+export const opacity100 = '100%';
+
+export const opacity95 = '95%';
+
+export const opacity90 = '90%';
+
+export const opacity85 = '85%';
+
+export const opacity80 = '80%';
+
+export const opacity70 = '70%';
+
+export const opacity60 = '60%';
+
+export const opacity50 = '50%';
+
+export const opacity40 = '40%';
+
+export const opacity30 = '30%';
+
+export const opacity20 = '20%';
+
+export const opacity15 = '15%';
+
+export const opacity10 = '10%';
+
+export const opacity5 = '5%';
+
+export const opacity0 = '0%';

package/lib/styles/variables/_shadow.css

@@ -0,0 +1,47 @@
+@value shadowBoxShadow1Color: #12121214;
+
+@value shadowBoxShadow1Type: dropShadow;
+
+@value shadowBoxShadow1X: 0px;
+
+@value shadowBoxShadow1Y: 4px;
+
+@value shadowBoxShadow1Blur: 4px;
+
+@value shadowBoxShadow1Spread: 0px;
+
+@value shadowBoxShadow2Color: #12121214;
+
+@value shadowBoxShadow2Type: dropShadow;
+
+@value shadowBoxShadow2X: 0px;
+
+@value shadowBoxShadow2Y: 8px;
+
+@value shadowBoxShadow2Blur: 8px;
+
+@value shadowBoxShadow2Spread: 0px;
+
+@value shadowBoxShadow3Color: #1212121f;
+
+@value shadowBoxShadow3Type: dropShadow;
+
+@value shadowBoxShadow3X: 0px;
+
+@value shadowBoxShadow3Y: 12px;
+
+@value shadowBoxShadow3Blur: 12px;
+
+@value shadowBoxShadow3Spread: 0px;
+
+@value shadowBoxShadow4Color: #12121233;
+
+@value shadowBoxShadow4Type: dropShadow;
+
+@value shadowBoxShadow4X: 0px;
+
+@value shadowBoxShadow4Y: 20px;
+
+@value shadowBoxShadow4Blur: 20px;
+
+@value shadowBoxShadow4Spread: 0px;

package/lib/styles/variables/_shadow.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = void 0;
+
+const shadowBoxShadow1Color = '#12121214';
+exports.shadowBoxShadow1Color = shadowBoxShadow1Color;
+const shadowBoxShadow1Type = 'dropShadow';
+exports.shadowBoxShadow1Type = shadowBoxShadow1Type;
+const shadowBoxShadow1X = '0px';
+exports.shadowBoxShadow1X = shadowBoxShadow1X;
+const shadowBoxShadow1Y = '4px';
+exports.shadowBoxShadow1Y = shadowBoxShadow1Y;
+const shadowBoxShadow1Blur = '4px';
+exports.shadowBoxShadow1Blur = shadowBoxShadow1Blur;
+const shadowBoxShadow1Spread = '0px';
+exports.shadowBoxShadow1Spread = shadowBoxShadow1Spread;
+const shadowBoxShadow2Color = '#12121214';
+exports.shadowBoxShadow2Color = shadowBoxShadow2Color;
+const shadowBoxShadow2Type = 'dropShadow';
+exports.shadowBoxShadow2Type = shadowBoxShadow2Type;
+const shadowBoxShadow2X = '0px';
+exports.shadowBoxShadow2X = shadowBoxShadow2X;
+const shadowBoxShadow2Y = '8px';
+exports.shadowBoxShadow2Y = shadowBoxShadow2Y;
+const shadowBoxShadow2Blur = '8px';
+exports.shadowBoxShadow2Blur = shadowBoxShadow2Blur;
+const shadowBoxShadow2Spread = '0px';
+exports.shadowBoxShadow2Spread = shadowBoxShadow2Spread;
+const shadowBoxShadow3Color = '#1212121f';
+exports.shadowBoxShadow3Color = shadowBoxShadow3Color;
+const shadowBoxShadow3Type = 'dropShadow';
+exports.shadowBoxShadow3Type = shadowBoxShadow3Type;
+const shadowBoxShadow3X = '0px';
+exports.shadowBoxShadow3X = shadowBoxShadow3X;
+const shadowBoxShadow3Y = '12px';
+exports.shadowBoxShadow3Y = shadowBoxShadow3Y;
+const shadowBoxShadow3Blur = '12px';
+exports.shadowBoxShadow3Blur = shadowBoxShadow3Blur;
+const shadowBoxShadow3Spread = '0px';
+exports.shadowBoxShadow3Spread = shadowBoxShadow3Spread;
+const shadowBoxShadow4Color = '#12121233';
+exports.shadowBoxShadow4Color = shadowBoxShadow4Color;
+const shadowBoxShadow4Type = 'dropShadow';
+exports.shadowBoxShadow4Type = shadowBoxShadow4Type;
+const shadowBoxShadow4X = '0px';
+exports.shadowBoxShadow4X = shadowBoxShadow4X;
+const shadowBoxShadow4Y = '20px';
+exports.shadowBoxShadow4Y = shadowBoxShadow4Y;
+const shadowBoxShadow4Blur = '20px';
+exports.shadowBoxShadow4Blur = shadowBoxShadow4Blur;
+const shadowBoxShadow4Spread = '0px';
+exports.shadowBoxShadow4Spread = shadowBoxShadow4Spread;

package/lib/styles/variables/_shadow.js.flow

@@ -0,0 +1,49 @@
+// @flow strict
+
+export const shadowBoxShadow1Color = '#12121214';
+
+export const shadowBoxShadow1Type = 'dropShadow';
+
+export const shadowBoxShadow1X = '0px';
+
+export const shadowBoxShadow1Y = '4px';
+
+export const shadowBoxShadow1Blur = '4px';
+
+export const shadowBoxShadow1Spread = '0px';
+
+export const shadowBoxShadow2Color = '#12121214';
+
+export const shadowBoxShadow2Type = 'dropShadow';
+
+export const shadowBoxShadow2X = '0px';
+
+export const shadowBoxShadow2Y = '8px';
+
+export const shadowBoxShadow2Blur = '8px';
+
+export const shadowBoxShadow2Spread = '0px';
+
+export const shadowBoxShadow3Color = '#1212121f';
+
+export const shadowBoxShadow3Type = 'dropShadow';
+
+export const shadowBoxShadow3X = '0px';
+
+export const shadowBoxShadow3Y = '12px';
+
+export const shadowBoxShadow3Blur = '12px';
+
+export const shadowBoxShadow3Spread = '0px';
+
+export const shadowBoxShadow4Color = '#12121233';
+
+export const shadowBoxShadow4Type = 'dropShadow';
+
+export const shadowBoxShadow4X = '0px';
+
+export const shadowBoxShadow4Y = '20px';
+
+export const shadowBoxShadow4Blur = '20px';
+
+export const shadowBoxShadow4Spread = '0px';

package/lib/styles/variables/_size.css

@@ -0,0 +1,59 @@
+@value size2: 2px;
+
+@value size4: 4px;
+
+@value size5: 5px;
+
+@value size8: 8px;
+
+@value size10: 10px;
+
+@value size12: 12px;
+
+@value size18: 18px;
+
+@value size20: 20px;
+
+@value size24: 24px;
+
+@value size30: 30px;
+
+@value size34: 34px;
+
+@value size36: 36px;
+
+@value size40: 40px;
+
+@value size42: 42px;
+
+@value size60: 60px;
+
+@value size110: 110px;
+
+@value size140: 140px;
+
+@value size160: 160px;
+
+@value size228: 228px;
+
+@value size240: 240px;
+
+@value size276: 276px;
+
+@value size300: 300px;
+
+@value size380: 380px;
+
+@value size400: 400px;
+
+@value size480: 480px;
+
+@value size500: 500px;
+
+@value size580: 580px;
+
+@value size720: 720px;
+
+@value size960: 960px;
+
+@value sizeFluid: 100%;

package/lib/styles/variables/_size.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size10 = void 0;
+
+const size2 = '2px';
+exports.size2 = size2;
+const size4 = '4px';
+exports.size4 = size4;
+const size5 = '5px';
+exports.size5 = size5;
+const size8 = '8px';
+exports.size8 = size8;
+const size10 = '10px';
+exports.size10 = size10;
+const size12 = '12px';
+exports.size12 = size12;
+const size18 = '18px';
+exports.size18 = size18;
+const size20 = '20px';
+exports.size20 = size20;
+const size24 = '24px';
+exports.size24 = size24;
+const size30 = '30px';
+exports.size30 = size30;
+const size34 = '34px';
+exports.size34 = size34;
+const size36 = '36px';
+exports.size36 = size36;
+const size40 = '40px';
+exports.size40 = size40;
+const size42 = '42px';
+exports.size42 = size42;
+const size60 = '60px';
+exports.size60 = size60;
+const size110 = '110px';
+exports.size110 = size110;
+const size140 = '140px';
+exports.size140 = size140;
+const size160 = '160px';
+exports.size160 = size160;
+const size228 = '228px';
+exports.size228 = size228;
+const size240 = '240px';
+exports.size240 = size240;
+const size276 = '276px';
+exports.size276 = size276;
+const size300 = '300px';
+exports.size300 = size300;
+const size380 = '380px';
+exports.size380 = size380;
+const size400 = '400px';
+exports.size400 = size400;
+const size480 = '480px';
+exports.size480 = size480;
+const size500 = '500px';
+exports.size500 = size500;
+const size580 = '580px';
+exports.size580 = size580;
+const size720 = '720px';
+exports.size720 = size720;
+const size960 = '960px';
+exports.size960 = size960;
+const sizeFluid = '100%';
+exports.sizeFluid = sizeFluid;