pampering-pets-ui
v1.1.6
Published
UI Kit official of Pampering Pets
Readme
Pampering Pets
Official Pampering Pets UI component & design system library
In the file calles tokens are the files
- colors.js
- numbers.js
In the file called sass are the files
- border.scss
- colors.scss
- margin.scss
- padding.scss
- radius.scss
- sizersp.scss
- sizes.scss
- transitions.scss
- weight.scss
- zindex.scss
Colors to any tag of HTML or background in SaSS
$pamperingPtsDark: #000000;
$pamperingPtsDark100: #1C1C1C;
$pamperingPtsDark200: #1E1E1E;
$pamperingPtsDark300: #010101;
$pamperingPtsDark400: #1F1F1F;
$pamperingPtsDark500: #111111;
$pamperingPtsLight: #FFFFFF;
$pamperingPtsLight100: #FAFAFA;
$pamperingPtsLight200: #EEEEEE;
$pamperingPtsLight300: #FBFBFB;
$pamperingPtsLight400: #F0F0F0;
$pamperingPtsLight500: #F4F4F4;
$pamperingPtsGray: #D9D9D9;
$pamperingPtsGray100: #949494;
$pamperingPtsGray200: #9C9B9B;
$pamperingPtsGray300: #AEACAC;
$pamperingPtsGray400: #9D9D9D;
$pamperingPtsSemiDark: #474747;
$pamperingPtsSemiDark100: #E5E5E5;
$pamperingPtsSemiDark200: #E9E9E9;
$pamperingPtsSemiDark300: #6B6B6B;
Sizes in rem
$pamperingPtsSizeTiny: 0.4rem; // 6.4px
$pamperingPtsSizeLittle: 0.6rem; //12.8px
$pamperingPtsSizeLittleOne: 0.8rem; //12.8px
$pamperingPtsSizeMedium: 1rem; //16px
$pamperingPtsSizeMediumOne: 1.1rem; //17.6px
$pamperingPtsSizeMediumTwo: 1.2rem; //19.2px
$pamperingPtsSizeMediumThree: 1.5rem; //24px
$pamperingPtsSizeMediumFour: 1.7rem; //27.2px
$pamperingPtsSizeMediumFive: 1.8rem; //28.8px
$pamperingPtsSizeMediumLarge: 2rem; //32px
$pamperingPtsSizeMediumLargeOne: 2.1rem; //33.6px
$pamperingPtsSizeMediumLargeTwo: 2.2rem; //35.2px
$pamperingPtsSizeMediumLargeThree: 2.5rem; //40px
$pamperingPtsSizeMediumLargeFour: 2.7rem; //43.2px
$pamperingPtsSizeMediumLargeFive: 2.8rem; //44.8px
$pamperingPtsSizeLarge: 3rem; //48px
$pamperingPtsSizeLargeOne: 3.1rem; //49.6px
$pamperingPtsSizeLargeTwo: 3.2rem; //51.2px
$pamperingPtsSizeLargeThree: 3.3rem; //52.8px
$pamperingPtsSizeLargeFour: 3.4rem; //54.4px
$pamperingPtsSizeLargeFive: 3.5rem; //56px
$pamperingPtsSizeLargeSix: 3.6rem; //57.6px
$pamperingPtsSizeLargeSeven: 3.7rem; //59.2px
$pamperingPtsSizeLargeEight: 3.8rem; //60.8px
$pamperingPtsSizeLargeNine: 3.9rem; //62.4px
$pamperingPtsSizeXLarge: 4rem; //64px
Sizes in Pixels
$pamperingPtsSizeTypePx: 0px;
$pamperingPtsSizeTypePxOne: 1px;
$pamperingPtsSizeTypePxTwo: 2px;
$pamperingPtsSizeTypePxThree: 3px;
$pamperingPtsSizeTypePxFour: 4px;
$pamperingPtsSizeTypePxFive: 5px;
$pamperingPtsSizeTypePxSix: 6px;
$pamperingPtsSizeTypePxSeven: 7px;
$pamperingPtsSizeTypePxEight: 8px;
$pamperingPtsSizeTypePxNine: 9px;
$pamperingPtsSizeTypePxTen: 10px;
$pamperingPtsSizeTypePxMedium: 20px;
$pamperingPtsSizeTypePxMediumOne: 30px;
$pamperingPtsSizeTypePxMediumTwo: 40px;
$pamperingPtsSizeTypePxMediumThree: 50px;
$pamperingPtsSizeTypePxMediumFour: 60px;
$pamperingPtsSizeTypePxMediumFive: 70px;
$pamperingPtsSizeTypePxMediumSix: 80px;
$pamperingPtsSizeTypePxMediumSeven: 90px;
$pamperingPtsSizeTypePxMediumEight: 100px;
$pamperingPtsSizeTypePxLarge: 200px;
$pamperingPtsSizeTypePxLargeOne: 300px;
$pamperingPtsSizeTypePxLargeTwo: 400px;
$pamperingPtsSizeTypePxLargeThree: 500px;
$pamperingPtsSizeTypePxLargeFour: 600px;
$pamperingPtsSizeTypePxLargeFive: 700px;
$pamperingPtsSizeTypePxLargeSix: 800px;
$pamperingPtsSizeTypePxLargeSeven: 900px;
$pamperingPtsSizeTypePxLargeEight: 1000px;
Sizes in Percents
$pamperingPtsSizeTypePercentZero: 0%;
$pamperingPtsSizeTypePercentOne: 1%;
$pamperingPtsSizeTypePercentTwo: 2%;
$pamperingPtsSizeTypePercentThree: 3%;
$pamperingPtsSizeTypePercentFour: 4%;
$pamperingPtsSizeTypePercentFive: 5%;
$pamperingPtsSizeTypePercentSix: 6%;
$pamperingPtsSizeTypePercentSeven: 7%;
$pamperingPtsSizeTypePercentEight: 8%;
$pamperingPtsSizeTypePercentNine: 9%;
$pamperingPtsSizeTypePercentTen: 10%;
$pamperingPtsSizeTypePercentMedium: 20%;
$pamperingPtsSizeTypePercentMediumOne: 30%;
$pamperingPtsSizeTypePercentMediumTwo: 40%;
$pamperingPtsSizeTypePercentMediumThree: 50%;
$pamperingPtsSizeTypePercentMediumFour: 60%;
$pamperingPtsSizeTypePercentMediumFive: 70%;
$pamperingPtsSizeTypePercentMediumSix: 80%;
$pamperingPtsSizeTypePercentMediumSeven: 90%;
$pamperingPtsSizeTypePercentMediumEight: 100%;
$pamperingPtsSizeTypePercentLarge: 200%;
$pamperingPtsSizeTypePercentLargeOne: 300%;
$pamperingPtsSizeTypePercentLargeTwo: 400%;
$pamperingPtsSizeTypePercentLargeThree: 500%;
$pamperingPtsSizeTypePercentLargeFour: 600%;
$pamperingPtsSizeTypePercentLargeFive: 700%;
$pamperingPtsSizeTypePercentLargeSix: 800%;
$pamperingPtsSizeTypePercentLargeSeven: 900%;
$pamperingPtsSizeTypePercentLargeEight: 1000%;
Sizes in Viewport Width
$pamperingPtsSizeTypeVwZero: 0vw;
$pamperingPtsSizeTypeVwOne: 1vw;
$pamperingPtsSizeTypeVwTwo: 2vw;
$pamperingPtsSizeTypeVwThree: 3vw;
$pamperingPtsSizeTypeVwFour: 4vw;
$pamperingPtsSizeTypeVwFive: 5vw;
$pamperingPtsSizeTypeVwSix: 6vw;
$pamperingPtsSizeTypeVwSeven: 7vw;
$pamperingPtsSizeTypeVwEight: 8vw;
$pamperingPtsSizeTypeVwNine: 9vw;
$pamperingPtsSizeTypeVwTen: 10vw;
$pamperingPtsSizeTypeVwMedium: 20vw;
$pamperingPtsSizeTypeVwMediumOne: 30vw;
$pamperingPtsSizeTypeVwMediumTwo: 40vw;
$pamperingPtsSizeTypeVwMediumThree: 50vw;
$pamperingPtsSizeTypeVwMediumFour: 60vw;
$pamperingPtsSizeTypeVwMediumFive: 70vw;
$pamperingPtsSizeTypeVwMediumSix: 80vw;
$pamperingPtsSizeTypeVwMediumSeven: 90vw;
$pamperingPtsSizeTypeVwMediumEight: 100vw;
$pamperingPtsSizeTypeVwLarge: 200vw;
$pamperingPtsSizeTypeVwLargeOne: 300vw;
$pamperingPtsSizeTypeVwLargeTwo: 400vw;
$pamperingPtsSizeTypeVwLargeThree: 500vw;
$pamperingPtsSizeTypeVwLargeFour: 600vw;
$pamperingPtsSizeTypeVwLargeFive: 700vw;
$pamperingPtsSizeTypeVwLargeSix: 800vw;
$pamperingPtsSizeTypeVwLargeSeven: 900vw;
$pamperingPtsSizeTypeVwLargeEight: 1000vw;
Sizes in Viewport Height
$pamperingPtsSizeTypeVhZero: 0vh;
$pamperingPtsSizeTypeVhOne: 1vh;
$pamperingPtsSizeTypeVhTwo: 2vh;
$pamperingPtsSizeTypeVhThree: 3vh;
$pamperingPtsSizeTypeVhFour: 4vh;
$pamperingPtsSizeTypeVhFive: 5vh;
$pamperingPtsSizeTypeVhSix: 6vh;
$pamperingPtsSizeTypeVhSeven: 7vh;
$pamperingPtsSizeTypeVhEight: 8vh;
$pamperingPtsSizeTypeVhNine: 9vh;
$pamperingPtsSizeTypeVhTen: 10vh;
$pamperingPtsSizeTypeVhMedium: 20vh;
$pamperingPtsSizeTypeVhMediumOne: 30vh;
$pamperingPtsSizeTypeVhMediumTwo: 40vh;
$pamperingPtsSizeTypeVhMediumThree: 50vh;
$pamperingPtsSizeTypeVhMediumFour: 60vh;
$pamperingPtsSizeTypeVhMediumFive: 70vh;
$pamperingPtsSizeTypeVhMediumSix: 80vh;
$pamperingPtsSizeTypeVhMediumSeven: 90vh;
$pamperingPtsSizeTypeVhMediumEight: 100vh;
$pamperingPtsSizeTypeVhLarge: 200vh;
$pamperingPtsSizeTypeVhLargeOne: 300vh;
$pamperingPtsSizeTypeVhLargeTwo: 400vh;
$pamperingPtsSizeTypeVhLargeThree: 500vh;
$pamperingPtsSizeTypeVhLargeFour: 600vh;
$pamperingPtsSizeTypeVhLargeFive: 700vh;
$pamperingPtsSizeTypeVhLargeSix: 800vh;
$pamperingPtsSizeTypeVhLargeSeven: 900vh;
$pamperingPtsSizeTypeVhLargeEight: 1000vh;
Weight
$pamperingPtsWeightOne: 100;
$pamperingPtsWeightTwo: 200;
$pamperingPtsWeightThree: 300;
$pamperingPtsWeightFour: 400;
$pamperingPtsWeightFive: 500;
$pamperingPtsWeightSix: 600;
$pamperingPtsWeightSeven: 700;
$pamperingPtsWeightEight: 800;
$pamperingPtsWeightNine: 900;
$pamperingPtsWeightBold: bold;
$pamperingPtsWeightNormal: normal;
$pamperingPtsWeightLighter: lighter;
$pamperingPtsWeightInherit: inherit;
Padding
$pamperingPtsPddRem: 0rem; //0px
$pamperingPtsPddRemOne: 0.2rem; //3.2px
$pamperingPtsPddRemTwo: 0.3rem; //4.8px
$pamperingPtsPddRemThree: 0.5rem; //8px
$pamperingPtsPddRemFour: 0.6rem; //9.6px
$pamperingPtsPddRemFive: 0.7rem; //11.2px
$pamperingPtsPddRemSix: 0.8rem; //12.8px
$pamperingPtsPddRemSeven: 0.9rem; //14.4px
$pamperingPtsPddRemEight: 1rem; //16px
$pamperingPtsPddRemNine: 1.2rem; //19.2px
$pamperingPtsPddRemTen: 1.3rem; //20.8px
$pamperingPtsPddRemMedium: 1.4rem; //22.4px
$pamperingPtsPddRemMediumOne: 1.5rem; //24px
$pamperingPtsPddRemMediumTwo: 1.6rem; //25.6px
$pamperingPtsPddRemMediumThree: 1.7rem; //27.2px
$pamperingPtsPddRemMediumFour: 1.8rem; //28.8px
$pamperingPtsPddRemMediumFive: 1.9rem; //30.4px
$pamperingPtsPddRemLarge: 2rem; //32px
$pamperingPtsPddRemLargeOne: 2.5rem; //40px
$pamperingPtsPddRemLargeTwo: 3rem; //48px
$pamperingPtsPddRemLargeThree: 3.5rem; //56px
$pamperingPtsPddRemLargeFour: 4rem; //64px
$pamperingPtsPddRemLargeFive: 4.5rem; //72px
$pamperingPtsPddRemExtraLarge: 5rem; //80px
$pamperingPtsPddRemExtraLargeOne: 6rem; //96px
$pamperingPtsPddRemExtraLargeTwo: 7rem; //112px
$pamperingPtsPddRemExtraLargeThree: 8rem; //128px
$pamperingPtsPddRemExtraLargeFour: 9rem; //144px
$pamperingPtsPddRemExtraLargeFive: 10rem; //160px
Border
$pamperingPtsBorder: 0px;
$pamperingPtsBorderOne: 1px;
$pamperingPtsBorderTwo: 2px;
$pamperingPtsBorderThree: 3px;
$pamperingPtsBorderFour: 4px;
$pamperingPtsBorderFive: 5px;
$pamperingPtsBorderSix: 6px;
$pamperingPtsBorderSeven: 7px;
$pamperingPtsBorderEight: 8px;
$pamperingPtsBorderNine: 9px;
$pamperingPtsBorderTen: 10px;
$pamperingPtsBorderMedium: 12px;
$pamperingPtsBorderMediumOne: 15px;
$pamperingPtsBorderMediumTwo: 20px;
$pamperingPtsBorderMediumThree: 30px;
$pamperingPtsBorderMediumFour: 40px;
$pamperingPtsBorderMediumFive: 50px;
$pamperingPtsBorderLarge: 100px;
$pamperingPtsBorderLargeOne: 150px;
$pamperingPtsBorderLargeTwo: 200px;
$pamperingPtsBorderLargeThree: 250px;
$pamperingPtsBorderLargeFour: 300px;
$pamperingPtsBorderLargeFive: 400px;
$pamperingPtsBorderLargeSix: 500px;
z-index
$pamperingPtsIndex: 0;
$pamperingPtsIndexOne: 1;
$pamperingPtsIndexTwo: 2;
$pamperingPtsIndexThree: 3;
$pamperingPtsIndexFour: 4;
$pamperingPtsIndexFive: 5;
$pamperingPtsIndexSix: 6;
$pamperingPtsIndexSeven: 7;
$pamperingPtsIndexEight: 8;
$pamperingPtsIndexNine: 9;
$pamperingPtsIndexTen: 10;
$pamperingPtsIndexMedium: 50;
$pamperingPtsIndexHigh: 100;
$pamperingPtsIndexMediumHigh: 300;
$pamperingPtsIndexVeryHigh: 500;
$pamperingPtsIndexMax: 9999;
Size Responsive
$pamperingPtsResponsiveSm: 576px;
$pamperingPtsResponsiveMd: 768px;
$pamperingPtsResponsiveLg: 992px;
$pamperingPtsResponsiveXl: 1200px;
$pamperingPtsResponsiveXxl: 1400px;
Margin
$pamperingPtsMarginRem: 0rem;
$pamperingPtsMarginRemOne: 0.2rem;
$pamperingPtsMarginRemTwo: 0.3rem;
$pamperingPtsMarginRemThree: 0.5rem;
$pamperingPtsMarginRemFour: 0.6rem;
$pamperingPtsMarginRemFive: 0.7rem;
$pamperingPtsMarginRemSix: 0.8rem;
$pamperingPtsMarginRemSeven: 0.9rem;
$pamperingPtsMarginRemEight: 1rem;
$pamperingPtsMarginRemNine: 1.2rem;
$pamperingPtsMarginRemTen: 1.3rem;
$pamperingPtsMarginRemMedium: 1.4rem;
$pamperingPtsMarginRemMediumOne: 1.5rem;
$pamperingPtsMarginRemMediumTwo: 1.6rem;
$pamperingPtsMarginRemMediumThree: 1.7rem;
$pamperingPtsMarginRemMediumFour: 1.8rem;
$pamperingPtsMarginRemMediumFive: 1.9rem;
$pamperingPtsMarginRemLarge: 2rem;
$pamperingPtsMarginRemLargeOne: 2.5rem;
$pamperingPtsMarginRemLargeTwo: 3rem;
$pamperingPtsMarginRemLargeThree: 3.5rem;
$pamperingPtsMarginRemLargeFour: 4rem;
$pamperingPtsMarginRemLargeFive: 4.5rem;
$pamperingPtsMarginRemExtraLarge: 5rem;
$pamperingPtsMarginRemExtraLargeOne: 6rem;
$pamperingPtsMarginRemExtraLargeTwo: 7rem;
$pamperingPtsMarginRemExtraLargeThree: 8rem;
$pamperingPtsMarginRemExtraLargeFour: 9rem;
$pamperingPtsMarginRemExtraLargeFive: 10rem;
Transitions
$pamperingPtsTransitionClassic: 0.3s;
$pamperingPtsTransitionSlow: 0.2s;
$pamperingPtsTransitionFast: 0.5s;
$pamperingPtsEasingEaseInOut: ease-in-out;
Radius in Pixels
$pamperingPtsRadius: 0px;
$pamperingPtsRadiusSmall: 1px;
$pamperingPtsRadiusSmallOne: 2px;
$pamperingPtsRadiusSmallTwo: 3px;
$pamperingPtsRadiusSmallThree: 4px;
$pamperingPtsRadiusSmallFour: 5px;
$pamperingPtsRadiusSmallFive: 6px;
$pamperingPtsRadiusSmallSix: 7px;
$pamperingPtsRadiusSmallSeven: 8px;
$pamperingPtsRadiusSmallEight: 9px;
$pamperingPtsRadiusSmallNine: 10px;
$pamperingPtsRadiusMedium: 12px;
$pamperingPtsRadiusMediumOne: 13px;
$pamperingPtsRadiusMediumTwo: 14px;
$pamperingPtsRadiusMediumThree: 15px;
$pamperingPtsRadiusLarge: 20px;
$pamperingPtsRadiusLargeOne: 25px;
$pamperingPtsRadiusLargeTwo: 30px;
$pamperingPtsRadiusLargeThree: 35px;
$pamperingPtsRadiusLargeFour: 40px;
$pamperingPtsRadiusLargeFive: 45px;
$pamperingPtsRadiusLargeSix: 50px;
$pamperingPtsRadiusXLarge: 100px;
Radius in Percentage
$pamperingPtsRadiusPercentZero: 0%;
$pamperingPtsRadiusPercentSmall: 1%;
$pamperingPtsRadiusPercentSmallOne: 2%;
$pamperingPtsRadiusPercentSmallTwo: 3%;
$pamperingPtsRadiusPercentSmallThree: 4%;
$pamperingPtsRadiusPercentSmallFour: 5%;
$pamperingPtsRadiusPercentSmallFive: 6%;
$pamperingPtsRadiusPercentSmallSix: 7%;
$pamperingPtsRadiusPercentSmallSeven: 8%;
$pamperingPtsRadiusPercentSmallEight: 9%;
$pamperingPtsRadiusPercentSmallNine: 10%;
$pamperingPtsRadiusPercentMedium: 12%;
$pamperingPtsRadiusPercentMediumOne: 13%;
$pamperingPtsRadiusPercentMediumTwo: 14%;
$pamperingPtsRadiusPercentMediumThree: 15%;
$pamperingPtsRadiusPercentLarge: 20%;
$pamperingPtsRadiusPercentLargeOne: 25%;
$pamperingPtsRadiusPercentLargeTwo: 30%;
$pamperingPtsRadiusPercentLargeThree: 35%;
$pamperingPtsRadiusPercentLargeFour: 40%;
$pamperingPtsRadiusPercentLargeFive: 45%;
$pamperingPtsRadiusPercentLargeSix: 50%;
$pamperingPtsRadiusPercentXLarge: 100%;
Radius in rem
$pamperingPtsRadiusRemZero: 0rem;
$pamperingPtsRadiusRemSmall: 1rem;
$pamperingPtsRadiusRemSmallOne: 2rem;
$pamperingPtsRadiusRemSmallTwo: 3rem;
$pamperingPtsRadiusRemSmallThree: 4rem;
$pamperingPtsRadiusRemSmallFour: 5rem;
$pamperingPtsRadiusRemSmallFive: 6rem;
$pamperingPtsRadiusRemSmallSix: 7rem;
$pamperingPtsRadiusRemSmallSeven: 8rem;
$pamperingPtsRadiusRemSmallEight: 9rem;
$pamperingPtsRadiusRemSmallNine: 10rem;
$pamperingPtsRadiusRemMedium: 12rem;
$pamperingPtsRadiusRemMediumOne: 13rem;
$pamperingPtsRadiusRemMediumTwo: 14rem;
$pamperingPtsRadiusRemMediumThree: 15rem;
$pamperingPtsRadiusRemLarge: 20rem;
$pamperingPtsRadiusRemLargeOne: 25rem;
$pamperingPtsRadiusRemLargeTwo: 30rem;
$pamperingPtsRadiusRemLargeThree: 35rem;
$pamperingPtsRadiusRemLargeFour: 40rem;
$pamperingPtsRadiusRemLargeFive: 45rem;
$pamperingPtsRadiusRemLargeSix: 50rem;
$pamperingPtsRadiusRemXLarge: 100rem;