@spaced-out/ui-design-system 0.1.20 → 0.1.21

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.21](https://github.com/spaced-out/ui-design-system/compare/v0.1.20...v0.1.21) (2023-04-24)
+
+
+### Features
+
+* style-dictionary build process changes and global style variable export from styles/index.css ([9a7f418](https://github.com/spaced-out/ui-design-system/commit/9a7f418fa6da4d1266034ee56bd5e052361c809e))
+
 ### [0.1.20](https://github.com/spaced-out/ui-design-system/compare/v0.1.19...v0.1.20) (2023-04-24)
 
 

package/config.js

@@ -40,7 +40,18 @@ module.exports = {
         },
       })),
     },
-    js: {
+    'css/global': {
+      transforms: ['attribute/cti', 'name/cti/camel'],
+      buildPath: `src/styles/`,
+      files: [
+        {
+          destination: `index.css`,
+          format: `customCssFormat`,
+          filter: ({attributes}) => !attributes.category.includes('base'),
+        },
+      ],
+    },
+    'js/category': {
       transforms: ['attribute/cti', 'name/cti/camel'],
       transformGroup: 'js',
       buildPath: `src/styles/variables/`,
@@ -54,5 +65,17 @@ module.exports = {
         },
       })),
     },
+    'js/global': {
+      transforms: ['attribute/cti', 'name/cti/camel'],
+      transformGroup: 'js',
+      buildPath: `src/styles/`,
+      files: [
+        {
+          destination: `index.js`,
+          format: `customJsFormat`,
+          filter: ({attributes}) => !attributes.category.includes('base'),
+        },
+      ],
+    },
   },
 };

package/lib/styles/index.css

@@ -1,15 +1,427 @@
-@import './variables/_border.css';
-@import './variables/_color.css';
-@import './variables/_elevation.css';
-@import './variables/_font.css';
-@import './variables/_motion.css';
-@import './variables/_opacity.css';
-@import './variables/_opacity.css';
-@import './variables/_shadow.css';
-@import './variables/_size.css';
-@import './variables/_space.css';
-@import './animation.module.css';
-@import './border.module.css';
-@import './shadow.module.css';
-@import './typography.module.css';
-@import './utils.module.css';
+@value borderWidthNone: 0px;
+
+@value borderWidthPrimary: 1px;
+
+@value borderWidthSecondary: 1.5px;
+
+@value borderWidthTertiary: 2px;
+
+@value borderRadiusNone: 0px;
+
+@value borderRadiusXSmall: 4px;
+
+@value borderRadiusRadioButton: 6px;
+
+@value borderRadiusSmall: 8px;
+
+@value borderRadiusMedium: 12px;
+
+@value borderRadiusLarge: 20px;
+
+@value borderRadiusXLarge: 30px;
+
+@value borderRadiusCircle: 50%;
+
+@value colorTextPrimary: #17172A;
+
+@value colorTextSecondary: #565656;
+
+@value colorTextTertiary: #7e7e7e;
+
+@value colorTextDisabled: #d1d1d1;
+
+@value colorTextClickable: #5c34cd;
+
+@value colorTextNeutral: #706F9B;
+
+@value colorTextSuccess: #026b37;
+
+@value colorTextInformation: #0660da;
+
+@value colorTextWarning: #9e5909;
+
+@value colorTextDanger: #cf1945;
+
+@value colorTextInversePrimary: #ffffff;
+
+@value colorTextInverseSecondary: #d1d1d1;
+
+@value colorBorderPrimary: #e1e1e1;
+
+@value colorBorderSecondary: #d1d1d1;
+
+@value colorBorderDanger: #e31c4c;
+
+@value colorBackgroundBrand: #271656;
+
+@value colorBackgroundPrimary: #fafafa;
+
+@value colorBackgroundSecondary: #f4f4f4;
+
+@value colorBackgroundTertiary: #ffffff;
+
+@value colorFocusPrimary: #ccc0f0;
+
+@value colorFocusDanger: #f6b9c8;
+
+@value colorFillPrimary: #5c34cd;
+
+@value colorFillSecondary: #efebfa;
+
+@value colorFillNone: rgba(255,255,255,0);
+
+@value colorFillDisabled: #f4f4f4;
+
+@value colorFillInversePrimary: #17172A;
+
+@value colorTooltipFill: rgba(23, 23, 42, 0.95);
+
+@value colorBackdropFill: rgba(23, 23, 42, 0.7);
+
+@value colorButtonFillPrimaryEnabled: #5c34cd;
+
+@value colorButtonFillPrimaryHovered: #412592;
+
+@value colorButtonFillPrimaryPressed: #412592;
+
+@value colorButtonFillSecondaryEnabled: #efebfa;
+
+@value colorButtonFillSecondaryHovered: #ccc0f0;
+
+@value colorButtonFillSecondaryPressed: #ccc0f0;
+
+@value colorButtonFillTertiaryEnabled: rgba(255,255,255,0);
+
+@value colorButtonFillTertiaryHovered: #EBEBEB;
+
+@value colorButtonFillTertiaryPressed: #EBEBEB;
+
+@value colorButtonFillGhostEnabled: rgba(255,255,255,0);
+
+@value colorButtonFillGhostHovered: #EBEBEB;
+
+@value colorButtonFillGhostPressed: #EBEBEB;
+
+@value colorButtonFillDangerEnabled: #e31c4c;
+
+@value colorButtonFillDangerHovered: #cf1945;
+
+@value colorButtonFillDangerPressed: #cf1945;
+
+@value colorSideMenuIconDefault: #9F9FBC;
+
+@value colorSideMenuIconActive: #ffffff;
+
+@value colorSubMenuBackgroundDefault: #1F1F36;
+
+@value colorGrayLightest: #EBEBEB;
+
+@value colorNeutral: #706F9B;
+
+@value colorNeutralLightest: #f1f1f5;
+
+@value colorNeutralLight: #D3D2E0;
+
+@value colorNeutralDark: #504F6E;
+
+@value colorNeutralDarkest: #2C2C47;
+
+@value colorSuccess: #03964d;
+
+@value colorSuccessLightest: #e6f5ed;
+
+@value colorSuccessLight: #8bcfad;
+
+@value colorSuccessDark: #026b37;
+
+@value colorSuccessDarkest: #013f20;
+
+@value colorInformation: #0769f0;
+
+@value colorInformationLightest: #e6f0fe;
+
+@value colorInformationLight: #8dbaf8;
+
+@value colorInformationDark: #054baa;
+
+@value colorInformationDarkest: #032c65;
+
+@value colorWarning: #df7e0c;
+
+@value colorWarningLightest: #fcf2e7;
+
+@value colorWarningLight: #f0c48f;
+
+@value colorWarningDark: #9e5909;
+
+@value colorWarningDarkest: #5e3505;
+
+@value colorDanger: #e31c4c;
+
+@value colorDangerLightest: #fce8ed;
+
+@value colorDangerLight: #f297ad;
+
+@value colorDangerDark: #a11436;
+
+@value colorDangerDarkest: #5f0c20;
+
+@value elevationNone: 0;
+
+@value elevationCard: 4;
+
+@value elevationTooltip: 4;
+
+@value elevationMenu: 12;
+
+@value elevationBackdrop: 40;
+
+@value elevationModal: 40;
+
+@value elevationToast: 60;
+
+@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;
+
+@value motionDurationFast: 100ms;
+
+@value motionDurationNormal: 200ms;
+
+@value motionDurationSlow: 300ms;
+
+@value motionDurationSlower: 500ms;
+
+@value motionDurationSlowest: 1000ms;
+
+@value motionEaseInEaseOut: ease-in-out;
+
+@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%;
+
+@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;
+
+@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 size22: 22px;
+
+@value size24: 24px;
+
+@value size26: 26px;
+
+@value size30: 30px;
+
+@value size34: 34px;
+
+@value size36: 36px;
+
+@value size38: 38px;
+
+@value size40: 40px;
+
+@value size42: 42px;
+
+@value size48: 48px;
+
+@value size58: 58px;
+
+@value size60: 60px;
+
+@value size90: 90px;
+
+@value size100: 100px;
+
+@value size110: 110px;
+
+@value size140: 140px;
+
+@value size160: 160px;
+
+@value size228: 228px;
+
+@value size240: 240px;
+
+@value size260: 260px;
+
+@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%;
+
+@value sizeFullViewportHeight: 100vh;
+
+@value sizeFullViewportWidth: 100vw;
+
+@value spaceNone: 0px;
+
+@value spaceXXSmall: 4px;
+
+@value spaceXSmall: 8px;
+
+@value spaceSmall: 12px;
+
+@value spaceMedium: 20px;
+
+@value spaceLarge: 32px;
+
+@value spaceXLarge: 52px;
+
+@value spaceXXLarge: 84px;
+
+@value spaceFluid: 100%;
+
+@value spaceNegFluid: -100%;
+
+@value spaceHalfFluid: 50%;
+
+@value spaceNegHalfFluid: -50%;