@taikai/rocket-kit 4.0.0 → 4.0.1

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './styles/global.css';
 export { default as AvatarImage } from './atoms/avatar-image';
 export { default as Button } from './atoms/button';
 export { default as ButtonDropdown } from './atoms/button-dropdown';

package/dist/rocket-kit.cjs.development.css

@@ -1,3 +1,183 @@
+:root {
+  /* Colors */
+  --black: #000000;
+  --white: #ffffff;
+  --grey50: #F1F1F3;
+  --grey100: #E3E3E8;
+  --grey150: #D5D6DC;
+  --grey200: #C7C8D1;
+  --grey300: #ABACBA;
+  --grey400: #8F91A3;
+  --grey500: #73758C;
+  --grey600: #5C5E70;
+  --grey700: #454654;
+  --grey800: #2E2F38;
+  --grey850: #23232A;
+  --grey900: #17171C;
+  --grey950: #0C0C0E;
+  --blue50: #ECEDFC;
+  --blue100: #D9DCFA;
+  --blue150: #C6CAF7;
+  --blue200: #B3B9F4;
+  --blue300: #8E96EF;
+  --blue400: #6873E9;
+  --blue500: #4250E4;
+  --blue600: #3540B6;
+  --blue700: #283089;
+  --blue800: #1A205B;
+  --blue850: #141844;
+  --blue900: #0D102E;
+  --blue950: #070817;
+  --purple50: #ECEAF6;
+  --purple100: #D9D4ED;
+  --purple150: #C7BFE4;
+  --purple200: #B4A9DB;
+  --purple300: #8E7FCA;
+  --purple400: #6954B8;
+  --purple500: #4329A6;
+  --purple600: #362185;
+  --purple700: #281964;
+  --purple800: #1B1042;
+  --purple850: #140C32;
+  --purple900: #0D0821;
+  --purple950: #070411;
+  --red50: #FDEEEE;
+  --red100: #FBDDDD;
+  --red150: #F9CDCD;
+  --red200: #F7BCBC;
+  --red300: #F39A9A;
+  --red400: #EF7979;
+  --red500: #EB5757;
+  --red600: #BC4646;
+  --red700: #8D3434;
+  --red800: #5E2323;
+  --red850: #471A1A;
+  --red900: #2F1111;
+  --red950: #180909;
+  --oracle50: #F4F0FD;
+  --oracle100: #EAE1FB;
+  --oracle150: #DFD2FA;
+  --oracle200: #D5C3F8;
+  --oracle300: #C0A5F4;
+  --oracle400: #AB87F1;
+  --oracle500: #9669ED;
+  --oracle600: #7854BE;
+  --oracle700: #5A3F8E;
+  --oracle800: #3C2A5F;
+  --oracle850: #2D2047;
+  --oracle900: #1E152F;
+  --oracle950: #0F0B18;
+  --green50: #EBFCF7;
+  --green100: #D7F9EF;
+  --green150: #C2F6E6;
+  --green200: #AEF3DE;
+  --green300: #86ECCE;
+  --green400: #5DE6BD;
+  --green500: #35E0AD;
+  --green600: #2AB38A;
+  --green700: #208668;
+  --green800: #155A45;
+  --green850: #104334;
+  --green900: #0B2D23;
+  --green950: #051611;
+  --orange50: #FFF0EA;
+  --orange100: #FFE1D5;
+  --orange150: #FFD2C0;
+  --orange200: #FFC3AB;
+  --orange300: #FFA680;
+  --orange400: #FF8856;
+  --orange500: #FF6A2C;
+  --orange600: #CC5523;
+  --orange700: #99401A;
+  --orange800: #662A12;
+  --orange850: #4D200D;
+  --orange900: #331509;
+  --orange950: #1A0B04;
+  --yellow50: #FFFBEC;
+  --yellow100: #FFF7DA;
+  --yellow150: #FFF3C7;
+  --yellow200: #FFEFB5;
+  --yellow300: #FFE690;
+  --yellow400: #FFDE6B;
+  --yellow500: #FFD646;
+  --yellow600: #CCAB38;
+  --yellow700: #99802A;
+  --yellow800: #66561C;
+  --yellow850: #4D4015;
+  --yellow900: #332B0E;
+  --yellow950: #1A1507;
+  --paleBlue50: #F3F9FD;
+  --paleBlue100: #E7F4FB;
+  --paleBlue150: #DBEEF9;
+  --paleBlue200: #CFE9F7;
+  --paleBlue300: #B7DDF4;
+  --paleBlue400: #9FD2F0;
+  --paleBlue500: #87C7EC;
+  --paleBlue600: #6C9FBD;
+  --paleBlue700: #51778E;
+  --paleBlue800: #36505E;
+  --paleBlue850: #293C47;
+  --paleBlue900: #1B282F;
+  --paleBlue950: #0E1418;
+  --paleOrange50: #FDF4EC;
+  --paleOrange100: #FCE9D9;
+  --paleOrange150: #FADEC6;
+  --paleOrange200: #F8D3B3;
+  --paleOrange300: #F5BE8C;
+  --paleOrange400: #F1A866;
+  --paleOrange500: #EE9240;
+  --paleOrange600: #BE7533;
+  --paleOrange700: #8F5826;
+  --paleOrange800: #5F3A1A;
+  --paleOrange850: #472C13;
+  --paleOrange900: #301D0D;
+  --paleOrange950: #180F06;
+
+  /* Typography */
+  --regular: 400;
+  --defaultFont: "Space Grotesk", Verdana, Arial, Helvetica, sans-serif;
+  --fontSizeXs: 0.75rem; /* 12px */
+  --fontSizeS: 0.875rem; /* 14px */
+  --fontSizeM: 1rem; /* 16px */
+  --fontWeightSemiBold: 500;
+
+  /* Misc */
+  --transitionDurationDefault: 0.3s;
+
+  /* Button tokens */
+  --buttonHeight: 2.75rem; /* 44px */
+  --buttonBorderWidth: 0.0625rem; /* 1px */
+  --buttonBorderRadius: 0.5rem; /* 8px */
+  --buttonPadding: 1.5rem; /* 24px */
+  --buttonIconSpacing: 0.875rem; /* 14px */
+  --buttonIconSize: 1.25rem; /* 20px */
+
+  /* Breakpoints */
+  --breakpointXs: 360px;
+  --breakpointS: 700px;
+  --breakpointM: 900px;
+  --breakpointL: 1280px;
+  --breakpointXl: 1600px;
+
+  /* Field tokens */
+  --fieldBorderWidth: 0.0625rem; /* 1px */
+  --fieldBorderRadius: 0.5rem; /* 8px */
+  --fieldBorderColor: var(--purple100);
+  --fieldHoverBorderColor: var(--purple150);
+  --fieldBackgroundColor: var(--white);
+  --fieldBoxShadow: rgba(0, 0, 0, 0.15);
+  --fieldColor: var(--black);
+  --fieldActiveBorderColor: var(--purple500);
+  --fieldActiveColor: var(--purple500);
+  --fieldSuccessBackgroundColor: var(--green500);
+  --fieldSuccessBorderColor: var(--green600);
+  --fieldErrorBorderColor: var(--red500);
+  --fieldErrorBackgroundColor: var(--red300);
+  --fieldDisabledBackgroundColor: var(--grey100);
+  --fieldDisabledColor: var(--grey300);
+  --fieldHeight: 3.125rem; /* 50px */
+  --fieldPlaceholderColor: var(--grey200);
+}
 .styles-module_wrapper__pVAc9 {
   position: relative;
   border: 0.125rem solid var(--grey200); /* 2px */

package/dist/rocket-kit.cjs.development.js

@@ -37,7 +37,7 @@ const AvatarImage = props => {
     '--avatarSize': `${size}px`
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(styles.wrapper, square && styles.square, className),
+    className: clsx('avatar-img', styles.wrapper, square && styles.square, className),
     style: wrapperStyle
   }, boring && !url ? /*#__PURE__*/React__default.createElement(Avatar, {
     size: size,
@@ -789,7 +789,7 @@ const Tag = props => {
     ...style
   };
   return /*#__PURE__*/React__default.createElement("span", {
-    className: clsx(styles$9.tag, variant === 'solid' ? styles$9.variantSolid : styles$9.variantOutline, className),
+    className: clsx('tag', styles$9.tag, variant === 'solid' ? styles$9.variantSolid : styles$9.variantOutline, className),
     style: cssVars,
     title: value
   }, value);