@yoonit/style - npm Package Compare versions

Comparing version 1.1.5 to 2.0.0

index.js

@@ -1,1 +0,1 @@
-import './themes/default.sass'
+import './index.sass'

package.json

 {
   "name": "@yoonit/style",
   "description": "The SASS Atomic Design System that powers Web & Native Yoonit Components",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "private": false,
@@ -6,0 +6,0 @@ "main": "index",

README.md

@@ -32,3 +32,2 @@ [<img src="https://raw.githubusercontent.com/Yoonit-Labs/nativescript-yoonit-camera/development/logo_cyberlabs.png" width="300">](https://cyberlabs.ai/)
 @import '@yoonit/style'
-@import '@yoonit/style/themes/{themeName}'
 ```
@@ -39,3 +38,2 @@
 ```sass
-@import '@yoonit/style'
 @import '@yoonit/style/atoms/YooButton'
@@ -53,118 +51,99 @@ ```
 
-Create a scss file in your project, in this file, import the Yoonit Style and all the components styles you want.
+Yoonit Style has global root variables, with a default theme. In addition to the default theme, we have 5 more themes available, as shown above in the images.
 
-Yoonit Style has 3 color objects ($primary, $danger, $grey) with 5 variables each, to change the color, declare the object and the variables and change the values as you wish.
+The default theme has the following variables:
 
-The variables names are the name of the object + the shade range. The shade ranges are: Darkest, Dark, Base, Light, Lightest.
+```sass
+  --fontFamily-primary: 'Montserrat', 'sans-serif'
+  --fontFamily-second: 'Arial', 'sans-serif'
 
-Example: `primaryDarkest`, `dangerBase`, `greyLightest`.
+  --fontWeight-regular: 400
+  --fontWeight-medium: 500
+  --fontWeight-semibold: 600
+  --fontWeight-bold: 700
+  --fontWeight-black: 800
 
-You can create other objects and other color variables, but the components will not react to them unless you change the components styles.
+  --primaryDarkest: #008080
+  --primaryDark: #1DBABA
+  --primaryBase: #47C8C3
+  --primaryLight: #B0E7E5
+  --primaryLightest: #C3ECEb
+  --dangerDarkest: #CB0A22
+  --dangerDark: #E83C4B
+  --dangerBase: #F4596C
+  --dangerLight: #FF7888
+  --dangerLightest: #FF99A5
+  --greyDarkest: #212325
+  --greyDark: #5A5F67
+  --greyBase: #8F959F
+  --greyLight: #D6DBE2
+  --greyLightest: #F5F6F7
+  --color-white: #FFFFFF
+  --color-black: #111111
+  --color-transparent: rgba(255, 255, 255, 0)
 
-The project has two fonts variables, `$font-primary` and `$font-second`, to change them, just set the variable to the new value.
+  --font-tn: 8px
+  --font-xs: 10px
+  --font-sm: 12px
+  --font-md: 14px
+  --font-lg: 16px
+  --font-xl: 20px
+  --font-hg: 32px
 
-This is the default theme, take this as a base to construct your own:
+  --spacing-tn: 2px
+  --spacing-xs: 4px
+  --spacing-sm: 8px
+  --spacing-md: 16px
+  --spacing-lg: 24px
+  --spacing-xl: 32px
+  --spacing-hg: 64px
+  
+```
+To use the variable in your sass file, just use var(VariableName), for example:
 
-`MyTheme.scss`
+```sass
+.myClass
+  color: var(--greyBase)
+```
+To create a custom theme, in your project create a sass file and overwrite the root variables, involved in a "data-composition", let's see an example:
 
-```scss
-@import '@yoonit/style';
+`MyTheme.sass`
 
+```sass
+@import '@yoonit/style'
+
 /*==== Import Quarks ====*/
 
-@import '@yoonit/style/quarks/YooIndicator.sass';
+[data-composition="myTheme"] 
+  --primaryDarkest: #49260a
+  --primaryDark: #623b1c
+  --primaryBase: #7c5739
+  --primaryLight: #caad8c
+  --primaryLightest: #f6eddd
 
-/*==== Import Bosons ====*/
+  --font-tn: 8px
+  --font-xs: 10px
+  --font-sm: 12px
+  --font-md: 14px
+  --font-lg: 16px
+  --font-xl: 20px
+  --font-hg: 32px
 
-@import '@yoonit/style/bosons/YooFlexLayout.sass';
-@import '@yoonit/style/bosons/YooGridLayout.sass';
-@import '@yoonit/style/bosons/YooScrollView.sass';
+  --spacing-tn: 2px
+  --spacing-xs: 4px
+  --spacing-sm: 8px
+  --spacing-md: 16px
+  --spacing-lg: 24px
+  --spacing-xl: 32px
+  --spacing-hg: 64px
 
-/*==== Import Atoms ====*/
+```
+Now, in your template, add a div wrapped in the elements you want to change the theme to, and add in this div the data-composition="myTheme" attribute
 
-@import '@yoonit/style/atoms/YooAnimation.sass';
-@import '@yoonit/style/atoms/YooAvatar.sass';
-@import '@yoonit/style/atoms/YooButton.sass';
-@import '@yoonit/style/atoms/YooCheckButton.sass';
-@import '@yoonit/style/atoms/YooDropDown.sass';
-@import '@yoonit/style/atoms/YooIcon.sass';
-@import '@yoonit/style/atoms/YooStepper.sass';
-@import '@yoonit/style/atoms/YooSwitch.sass';
+`Template.vue`
 
-/*==== Import Molecules ====*/
-
-@import '@yoonit/style/molecules/YooButtonToggle.sass';
-@import '@yoonit/style/molecules/YooCard.sass';
-@import '@yoonit/style/molecules/YooFormGroup.sass';
-@import '@yoonit/style/molecules/YooHeader.sass';
-@import '@yoonit/style/molecules/YooModal.sass';
-@import '@yoonit/style/molecules/YooNotify.sass';
-@import '@yoonit/style/molecules/YooPagination.sass';
-@import '@yoonit/style/molecules/YooPostCard.sass';
-@import '@yoonit/style/molecules/YooQuizQuestion.sass';
-@import '@yoonit/style/molecules/YooSegmentedBar.sass';
-@import '@yoonit/style/molecules/YooSelectButton.sass';
-@import '@yoonit/style/molecules/YooSwitchCard.sass';
-@import '@yoonit/style/molecules/YooTableAttribute.sass';
-
-/*==== Brand Color ====*/
-
-$primary: (
-  'primaryDarkest': #008080,
-  'primaryDark': #1DBABA,
-  'primaryBase': #47C8C3,
-  'primaryLight': #B0E7E5,
-  'primaryLightest': #C3ECEb
-);
-
-/*==== Danger Color ====*/
-
-$danger: (
-  'dangerDarkest': #CB0A22,
-  'dangerDark': #E83C4B,
-  'dangerBase': #F4596C,
-  'dangerLight': #FF7888,
-  'dangerLightest': #FF99A5
-);
-
-/*==== Neutral Color ====*/
-
-$grey: (
-  'greyDarkest': #212325,
-  'greyDark': #5A5F67,
-  'greyBase': #8F959F,
-  'greyLight': #D6DBE2,
-  'greyLightest': #F5F6F7
-);
-
-/*==== Basic Colors ====*/
-
-$black: #000000;
-$white: #FFFFFF;
-$transparent: rgba(255, 255, 255, 0);
-
-/*==== Font ====*/
-
-$font-primary: Montserrat, sans-serif;
-$font-second: Arial, sans-serif;
-
-$font-size-tn: 8px;
-$font-size-xs: 10px;
-$font-size-sm: 12px;
-$font-size-md: 14px;
-$font-size-lg: 16px;
-$font-size-xl: 20px;
-$font-size-hg: 32px;
-
-/*==== Spacing ====*/
-
-$spacing-tn: 2px;
-$spacing-xs: 4px;
-$spacing-sm: 8px;
-$spacing-md: 16px;
-$spacing-lg: 24px;
-$spacing-xl: 32px;
-$spacing-hg: 64px;
-
+```vue
+ <div data-composition="myTheme">MyContainer</div>
 ```
+So the root variables will be overridden with the theme you made for this added condition.
 
@@ -171,0 +150,0 @@ ### Helpers

No alert changes

Improved metrics

Total package byte prevSize

1287519

1730.14%

Number of package files

55

3.77%

Lines of code

45

136.84%

Worsened metrics

Number of lines in readme file

204

-9.33%

No dependency changes