myshell-react-lib 0.1.0

package/src/styles/tokens.scss

@@ -0,0 +1,401 @@
+
+@layer base {
+  :root {
+    //basic
+    --black: #000000;
+    --white: #ffffff;
+    --none: #ffffff00;
+ 
+    // neutral
+    --neutral: #1a1c1d;
+    --neutral-10: #202223;
+    --neutral-20: #323436;
+    --neutral-30: #414345;
+    --neutral-40: #5c5f62;
+    --neutral-50: #6d7175;
+    --neutral-60: #8c9196;
+    --neutral-70: #c9ccd0;
+    --neutral-75: #dbdddf;
+    --neutral-80: #e4e5e7;
+    --neutral-85: #edeeef;
+    --neutral-90: #f1f2f3;
+    --neutral-95: #f6f6f7;
+    --neutral-99: #fafafb;
+ 
+    --neutral-variant: #17191c;
+    --neutral-variant-5: #27292c;
+    --neutral-variant-10: #323539;
+    --neutral-variant-15: #42454a;
+    --neutral-variant-20: #363f4d;
+    --neutral-variant-30: #444f61;
+    --neutral-variant-35: #4f5c70;
+    --neutral-variant-40: #9da1a6;
+    --neutral-variant-50: #b6babf;
+    --neutral-variant-60: #cdd2d8;
+    --neutral-variant-70: #dadfe5;
+    --neutral-variant-80: #e4e9f0;
+    --neutral-variant-85: #edf0f5;
+    --neutral-variant-88: #e5effd;
+    --neutral-variant-90: #edf4fe;
+    --neutral-variant-95: #f2f7fe;
+    --neutral-variant-99: #f5f7fa;
+ 
+    --neutral-dark: #17181c;
+    --neutral-dark-5: #1b1c21;
+    --neutral-dark-10: #27282c;
+    --neutral-dark-15: #2d2e33;
+    --neutral-dark-20: #323339;
+    --neutral-dark-25: #42434a;
+    --neutral-dark-30: #54565e;
+    --neutral-dark-40: #666873;
+    --neutral-dark-50: #797b87;
+    --neutral-dark-60: #868996;
+    --neutral-dark-70: #9699a8;
+    --neutral-dark-80: #a6a9ba;
+    --neutral-dark-85: #b8bccf;
+    --neutral-dark-90: #cacfe3;
+    --neutral-dark-95: #d4d8ed;
+    --neutral-dark-99: #e1e6fc;
+ 
+    --neutral-dark-special: #1c1e26;
+    --neutral-dark-special-5: #22242e;
+    --neutral-dark-special-10: #232533;
+    --neutral-dark-special-20: #2b2e3b;
+    --neutral-dark-special-30: #383c52;
+    --neutral-dark-special-40: #464b66;
+ 
+    --blue: #0b1964;
+    --blue-5: #0e2494;
+    --blue-10: #1b35b6;
+    --blue-15: #1b39cf;
+    --blue-20: #2b48d8;
+    --blue-30: #3e5cfa;
+    --blue-40: #5974ff;
+    --blue-50: #788eff;
+    --blue-60: #95a6ff;
+    --blue-70: #ccd4ff;
+    --blue-80: #e0e5ff;
+    --blue-90: #ecefff;
+    --blue-95: #f2f4fe;
+ 
+    --blue-dark-10: #292c38;
+    --blue-dark-20: #2c334f;
+    --blue-dark-30: #2b3561;
+    --blue-dark-40: #2d3770;
+    --blue-dark-50: #354285;
+ 
+    --red: #6c0f00;
+    --red-10: #a21b00;
+    --red-20: #bc2200;
+    --red-25: #cf371c;
+    --red-30: #d72c0d;
+    --red-40: #ec2f0d;
+    --red-50: #fd5749;
+    --red-55: #ff5353;
+    --red-60: #febcb9;
+    --red-70: #fed3d1;
+    --red-80: #ffe9e8;
+    --red-90: #fff0f0;
+    --red-95: #fff4f4;
+ 
+    --red-dark-10: #382a29;
+    --red-dark-20: #4f2e2c;
+    --red-dark-30: #612e2b;
+ 
+    --yellow: #403624;
+    --yellow-5: #7e5700;
+    --yellow-10: #b98900;
+    --yellow-15: #cf9e1b;
+    --yellow-20: #e8a900;
+    --yellow-30: #fda500;
+    --yellow-35: #e1b878;
+    --yellow-40: #ffc453;
+    --yellow-50: #ffd06a;
+    --yellow-60: #ffd79d;
+    --yellow-70: #ffe6bb;
+    --yellow-80: #ffebd3;
+    --yellow-90: #fff2e2;
+    --yellow-95: #fff5ea;
+ 
+    --yellow-dark-10: #383029;
+    --yellow-dark-20: #4f3e2c;
+    --yellow-dark-30: #61472b;
+ 
+    --green: #005231;
+    --green-10: #006d41;
+    --green-20: #0bb26f;
+    --green-25: #1bcf75;
+    --green-30: #0dcc7f;
+    --green-40: #12d687;
+    --green-50: #18ce79;
+    --green-60: #86f7be;
+    --green-70: #baf9d9;
+    --green-80: #d9fae9;
+    --green-90: #e6faf0;
+    --green-95: #f2faf6;
+ 
+    --green-dark-10: #293830;
+    --green-dark-20: #2c4f3e;
+    --green-dark-30: #2b6147;
+ 
+    --aqua: #243640;
+    --aqua-5: #093852;
+    --aqua-10: #0f5c85;
+    --aqua-20: #2980af;
+    --aqua-25: #1b93cf;
+    --aqua-30: #2096d6;
+    --aqua-40: #0da8fc;
+    --aqua-50: #5dc4fc;
+    --aqua-55: #6acbff;
+    --aqua-60: #95d8fc;
+    --aqua-70: #b8e4fc;
+    --aqua-75: #c7ebff;
+    --aqua-80: #d6f0ff;
+    --aqua-90: #e0f4ff;
+    --aqua-95: #f0faff;
+ 
+    --aqua-dark-10: #293338;
+    --aqua-dark-20: #2c434f;
+    --aqua-dark-30: #2b4f61;
+ 
+    --lemon: #24210b;
+    --lemon-20: #454127;
+    --lemon-40: #8f7d1a;
+    --lemon-50: #a48f07;
+    --lemon-60: #cfaf00;
+    --lemon-70: #f3d42d;
+    --lemon-80: #ffe86b;
+    --lemon-90: #fdf5ca;
+ 
+    //alpha black
+    --alpha-black-1: #00000003;
+    --alpha-black-3: #00000008;
+    --alpha-black-5: #0000000d;
+    --alpha-black-8: #00000014;
+    --alpha-black-10: #0000001a;
+    --alpha-black-20: #00000033;
+    --alpha-black-30: #0000004d;
+    --alpha-black-40: #00000066;
+    --alpha-black-50: #00000080;
+    --alpha-black-60: #00000099;
+    --alpha-black-70: #000000b2;
+    --alpha-black-75: #000000bf;
+    --alpha-black-80: #000000cc;
+    --alpha-black-90: #000000e5;
+    --alpha-black-100: #000000;
+ 
+    //alpha white
+    --alpha-white-1: #ffffff03;
+    --alpha-white-3: #ffffff08;
+    --alpha-white-5: #ffffff0d;
+    --alpha-white-8: #ffffff14;
+    --alpha-white-10: #ffffff1a;
+    --alpha-white-20: #ffffff33;
+    --alpha-white-30: #ffffff4d;
+    --alpha-white-40: #ffffff66;
+    --alpha-white-50: #ffffff80;
+    --alpha-white-60: #ffffff99;
+    --alpha-white-70: #ffffffb2;
+    --alpha-white-75: #ffffffbf;
+    --alpha-white-80: #ffffffcc;
+    --alpha-white-90: #ffffffe5;
+    --alpha-white-100: #ffffff;
+ 
+    --moss-25: #fafdf7;
+    --moss-50: #f5fbee;
+    --moss-100: #e6f4d7;
+    --moss-200: #ceeab0;
+    --moss-300: #acdc79;
+    --moss-400: #86cb3c;
+    --moss-500: #669f2a;
+    --moss-600: #4f7a21;
+    --moss-700: #3f621a;
+    --moss-800: #335015;
+    --moss-900: #2b4212;
+    --moss-950: #1a280b;
+ 
+    --teal-25: #f6fefc;
+    --teal-50: #f0fdf9;
+    --teal-100: #ccfbef;
+    --teal-200: #99f6e0;
+    --teal-300: #5fe9d0;
+    --teal-400: #2ed3b7;
+    --teal-500: #15b79e;
+    --teal-600: #0e9384;
+    --teal-700: #107569;
+    --teal-800: #125d56;
+    --teal-900: #134e48;
+    --teal-950: #0a2926;
+ 
+    --cyan-25: #f5feff;
+    --cyan-50: #ecfdff;
+    --cyan-100: #cff9fe;
+    --cyan-200: #a5f0fc;
+    --cyan-300: #67e3f9;
+    --cyan-400: #22ccee;
+    --cyan-500: #06aed4;
+    --cyan-600: #088ab2;
+    --cyan-700: #0e7090;
+    --cyan-800: #155b75;
+    --cyan-900: #164c63;
+    --cyan-950: #0d2d3a;
+ 
+    --sky-blue-25: #f5faff;
+    --sky-blue-50: #eff8ff;
+    --sky-blue-100: #d1e9ff;
+    --sky-blue-200: #b2ddff;
+    --sky-blue-300: #84caff;
+    --sky-blue-400: #53b1fd;
+    --sky-blue-500: #2e90fa;
+    --sky-blue-600: #1570ef;
+    --sky-blue-700: #3538cd;
+    --sky-blue-800: #1849a9;
+    --sky-blue-900: #194185;
+    --sky-blue-950: #102a56;
+ 
+    --indigo-25: #f5f8ff;
+    --indigo-50: #eef4ff;
+    --indigo-100: #e0eaff;
+    --indigo-200: #c7d7fe;
+    --indigo-300: #a4bcfd;
+    --indigo-400: #8098f9;
+    --indigo-500: #6172f3;
+    --indigo-600: #444ce7;
+    --indigo-700: #3538cd;
+    --indigo-800: #2d31a6;
+    --indigo-900: #2d3282;
+    --indigo-950: #1f235b;
+ 
+    --purple-25: #fafaff;
+    --purple-50: #f4f3ff;
+    --purple-100: #ebe9fe;
+    --purple-200: #d9d6fe;
+    --purple-300: #bdb4fe;
+    --purple-400: #bdb4fe;
+    --purple-500: #7a5af8;
+    --purple-600: #6938ef;
+    --purple-700: #5925dc;
+    --purple-800: #4a1fb8;
+    --purple-900: #3e1c96;
+    --purple-950: #27115f;
+ 
+    --pink-25: #fef6fb;
+    --pink-50: #fdf2fa;
+    --pink-100: #fce7f6;
+    --pink-200: #fcceee;
+    --pink-300: #faa7e0;
+    --pink-400: #f670c7;
+    --pink-500: #ee46bc;
+    --pink-600: #dd2590;
+    --pink-700: #c11574;
+    --pink-800: #9e165f;
+    --pink-900: #851651;
+    --pink-950: #4e0d30;
+ 
+    --rose-25: #fff5f6;
+    --rose-50: #fff1f3;
+    --rose-100: #ffe4e8;
+    --rose-200: #fecdd6;
+    --rose-300: #fea3b4;
+    --rose-400: #fd6f8e;
+    --rose-500: #f63d68;
+    --rose-600: #e31b54;
+    --rose-700: #c01048;
+    --rose-800: #a11043;
+    --rose-900: #89123e;
+    --rose-950: #510b24;
+ 
+    --orange-25: #fefaf5;
+    --orange-50: #fef6ee;
+    --orange-100: #fdead7;
+    --orange-200: #f9dbaf;
+    --orange-300: #f7b27a;
+    --orange-400: #f38744;
+    --orange-500: #ef6820;
+    --orange-600: #e04f16;
+    --orange-700: #b93815;
+    --orange-800: #932f19;
+    --orange-900: #772917;
+    --orange-950: #511c10;
+ 
+    --amber-25: #fefdf0;
+    --amber-50: #fefbe8;
+    --amber-100: #fef7c3;
+    --amber-200: #feee95;
+    --amber-300: #fde272;
+    --amber-400: #fac515;
+    --amber-500: #eaaa08;
+    --amber-600: #ca8504;
+    --amber-700: #a15c07;
+    --amber-800: #854a0e;
+    --amber-900: #713b12;
+    --amber-950: #542c0d;
+ 
+    //status
+    --status-01-10: #f4f2ff;
+    --status-01-20: #ece9ff;
+    --status-01-30: #d8d1ff;
+    --status-01-40: #c1b5ff;
+    --status-01-50: #a895ff;
+    --status-01-60: #896bff;
+    --status-01-70: #621bff;
+    --status-01-80: #5919e9;
+    --status-01-90: #5016d0;
+    --status-01-100: #4513b4;
+    --status-01-110: #391093;
+    --status-01-120: #280b68;
+ 
+    --status-02-10: #f2fff9;
+    --status-02-20: #e9fff5;
+    --status-02-30: #d1ffea;
+    --status-02-40: #b6ffe0;
+    --status-02-50: #96ffd4;
+    --status-02-60: #6cffc8;
+    --status-02-70: #1bf7b4;
+    --status-02-80: #1de9ab;
+    --status-02-90: #1ad099;
+    --status-02-100: #17b484;
+    --status-02-110: #12936c;
+    --status-02-120: #0d684c;
+ 
+    --status-03-10: #fdf3ff;
+    --status-03-20: #fbeaff;
+    --status-03-30: #f7d3ff;
+    --status-03-40: #f3baff;
+    --status-03-50: #ef9cff;
+    --status-03-60: #ea77ff;
+    --status-03-70: #e640ff;
+    --status-03-80: #d23ae9;
+    --status-03-90: #bc34d0;
+    --status-03-100: #a32db4;
+    --status-03-110: #852593;
+    --status-03-120: #5e1a68;
+ 
+    --status-04-10: #f3f6ff;
+    --status-04-20: #ebf0ff;
+    --status-04-30: #d4e0ff;
+    --status-04-40: #bbcfff;
+    --status-04-50: #9ebcff;
+    --status-04-60: #7aa7ff;
+    --status-04-70: #458fff;
+    --status-04-80: #3f83e9;
+    --status-04-90: #3875d0;
+    --status-04-100: #3165b4;
+    --status-04-110: #285393;
+    --status-04-120: #1c3a68;
+ 
+    --status-05-10: #f2fbff;
+    --status-05-20: #eaf8ff;
+    --status-05-30: #d2f0ff;
+    --status-05-40: #b7e8ff;
+    --status-05-50: #98e0ff;
+    --status-05-60: #70d8ff;
+    --status-05-70: #2fcfff;
+    --status-05-80: #2bbde9;
+    --status-05-90: #26a9d0;
+    --status-05-100: #2192b4;
+    --status-05-110: #1b7893;
+    --status-05-120: #135468;
+  }
+}
+

package/src/types/scss.d.ts

@@ -0,0 +1,24 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.sass' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.less' {
+  const content: { [className: string]: string };
+  export default content;
+}