Trying to Make Webdev an Easier & Better Place One Line at a Time
Plugin Contains
GIT REPO: https://github.com/steckReed/npm-Full-Steck-Tools
// // Package imports
// @import '@npm/full-steck-tools/themes/animal-crossing/_-color-palette.scss';
// @import '@npm/full-steck-tools/sassy/-fs-mixins.scss';
// @import '@npm/full-steck-tools/themes/animal-crossing/_-styles.scss';
// Testing imports
@import './full-steck-tools/themes/animal-crossing/_-color-palette.scss';
@import './full-steck-tools/sassy/-fs-mixins.scss';
@import './full-steck-tools/themes/animal-crossing/_-styles.scss';
@Required:
npm i lodash @types/webpack-env react-icons
lodash : https://lodash.com/
@types/webpack-env : https://webpack.js.org/guides/dependency-management/#requirecontext
react-icons : https://react-icons.github.io/react-icons/
Create A Global Stylesheet (SCSS)
Include Global Styles within _app.js or Header File (Global Scope)
Create a '_color-palette.scss' File With the Contents Below
''' // Default Theme // {Add Color(s) Here}
// Light Theme $light-primary: hsl(0, 0%, 100%); $light-secondary: hsl(39, 90%, 55%); $light-tertiary: hsl(162, 90%, 46%); $light-text-primary: hsl(0, 0%, 11%); $light-text-secondary: hsl(194, 72%, 52%);
// Dark Theme $dark-primary: hsl(215, 26%, 24%); $dark-secondary: hsl(206, 59%, 44%); $dark-tertiary: hsl(12, 85%, 60%); $dark-text-primary: hsl(0, 0%, 100%); $dark-text-secondary: hsl(10, 72%, 50%);
// Add Any & All HSL Colors here to auto generate classes based on those colors $auto-class-generator:( // Normal 'primary':( 'light' : $light-secondary, 'dark' : $dark-secondary ), 'secondary':( 'light' : $light-tertiary, 'dark' : $dark-tertiary ), // Normal ); '''
Add the Following to your Global Stylesheet ''' @import './color-palette'; @import '../../../node_modules/full-steck-tools/Sassy/-fs-mixins'; '''
This Package Works Best With Icons, Who Doesnt Like Those?
''' npm i react-icons --save '''
Created to auto-gen classes from specified color palettes Note: Text Color is soon to be auto generated by Chromes accessibility scoring (Default: AA)
EXAMPLE: (Add below code to own color-palette.scss file)
$auto-class-generator:( // Light/Dark Themed Classes (Changes based on light/dark themes) 'primary':( 'light' : $light-secondary, 'dark' : $dark-secondary ), 'secondary':( 'light' : $light-tertiary, 'dark' : $dark-tertiary ),
// Single Color Classes (Doesn't change on light/dark themes)
'success' : $colorSuccess,
);
.active
.active-{colorName}
.outline
.outline-{colorName}
Note: short-hand for below class is 'bg'
.bg-{colorName}
.background-{colorName}
.border-dotted-{colorName}
.border-dashed-{colorName}
.border-solid-{colorName}
.border-double-{colorName}
.border-groove-{colorName}
.border-ridge-{colorName}
.border-inset-{colorName}
.border-outset-{colorName}
.border-none-{colorName}
.border-hidden-{colorName}
.btn-{colorName}
.show
.hide
Note: short-hand for below class is 'color'
.color-{colorName}
.font-color-{colorName}
grid
grid-container
flex
flex-container
.grid-pos
- Fixed
.position-fixed-top-left
.position-fixed-top-middle
.position-fixed-top-right
.position-fixed-center-left
.position-fixed-center-middle
.position-fixed-center-right
.position-fixed-bottom-left
.position-fixed-bottom-middle
.position-fixed-bottom-right
Note: Needs updated
Note: In order for textures to work properly, or if you're getting a white background.
Convert all HEX colors to HSL. Background-image doesn't support HEX :'(
.texture
.texture-transparent
.texture-{colorName}
sa_EleId = (REQUIRED)
sa_TopEleId = (REQUIRED)
sa_AnimationIn = (REQUIRED)
sa_BottomEleId =
sa_AnimationOut =
sa_TimeDelay =
sa_RepeatAnimation =