{"id":15041408,"url":"https://github.com/yoonit-labs/sass-yoonit-style","last_synced_at":"2025-04-14T20:20:55.615Z","repository":{"id":42624507,"uuid":"319430008","full_name":"Yoonit-Labs/sass-yoonit-style","owner":"Yoonit-Labs","description":"The SASS Atomic Design System that powers Vue Yoonit Components","archived":false,"fork":false,"pushed_at":"2023-02-04T07:47:08.000Z","size":1355,"stargazers_count":25,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T08:35:38.942Z","etag":null,"topics":["atomic-design","css","design-system","hacktoberfest","sass","sass-framework","scss","scss-framework"],"latest_commit_sha":null,"homepage":"","language":"Sass","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yoonit-Labs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-07T19:59:45.000Z","updated_at":"2024-03-05T13:37:57.000Z","dependencies_parsed_at":"2023-02-18T14:40:19.032Z","dependency_job_id":null,"html_url":"https://github.com/Yoonit-Labs/sass-yoonit-style","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fsass-yoonit-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fsass-yoonit-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fsass-yoonit-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoonit-Labs%2Fsass-yoonit-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yoonit-Labs","download_url":"https://codeload.github.com/Yoonit-Labs/sass-yoonit-style/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952345,"owners_count":21188427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-design","css","design-system","hacktoberfest","sass","sass-framework","scss","scss-framework"],"created_at":"2024-09-24T20:46:04.234Z","updated_at":"2025-04-14T20:20:55.595Z","avatar_url":"https://github.com/Yoonit-Labs.png","language":"Sass","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eSass Yoonit Style\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/v/@yoonit/style?color=lightgrey\u0026style=for-the-badge\u0026logo=npm\"/\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/dm/@yoonit/style?color=lightgrey\u0026logo=npm\u0026style=for-the-badge\"/\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/SASS%20-hotpink.svg?color=lightgrey\u0026logo=SASS\u0026style=for-the-badge\"/\u003e\n\t\u003cimg src=\"https://img.shields.io/npm/l/@yoonit/style?color=lightgrey\u0026style=for-the-badge\"/\u003e\n\u003c/p\u003e\n\nA SASS lib to help you with:\n- Atomic Design System\n- Created using BEM methodology\n- Diverse variables and mixins to improve your awesome layout\n- Responsive grid and flex system\n- Diverse theme range\n- Components styles\n- Possibility of creating themes\n\n\u003cdiv align=\"center\"\u003e\n\t\u003ch3\u003eSponsors\u003c/h3\u003e\n\t\u003ctable\u003e\n\t\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\n\t\t\t\t\t\u003cb\u003ePlatinum\u003c/b\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd align=\"center\" valign=\"middle\"\u003e\n\t\t\t\t\t\u003ca href=\"https://cyberlabs.ai\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/sponsor_cyberlabs.png\" width=\"300\" /\u003e\u003c/a\u003e\n\t\t\t\t\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\u003c/tbody\u003e\n\t\u003c/table\u003e\n\t\u003ch5\u003e\u003ca href=\"mailto:about@yoonit.dev\"\u003eBecome a sponsor!\u003c/a\u003e\u003c/h5\u003e\n\u003c/div\u003e\n\n## Installation\n\n```javascript\nnpm i -s @yoonit/style\n```\n\n## Usage\n\nTo access all the features of yoonit/style, import the SASS theme that you want in your project globally.\n\n```sass\n@import '@yoonit/style'\n```\n\nIf you want to import somenthing especific of this project, for example, the button style, you can import that directy.\n\n```sass\n@import '@yoonit/style/atoms/YooButton'\n```\n\n\n## Themes\n\nThese are all the themes available for now.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/public/readme-img/default.png\" width=\"250\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/public/readme-img/blue.png\" width=\"250\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/public/readme-img/brown.png\" width=\"250\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/public/readme-img/green.png\" width=\"250\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/public/readme-img/orange.png\" width=\"250\"\u003e \u003cimg src=\"https://raw.githubusercontent.com/Yoonit-Labs/sass-yoonit-style/development/public/readme-img/purple.png\" width=\"250\"\u003e\n\n## Creating themes\n\nYoonit 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.\n\nThe default theme has the following variables:\n\n```sass\n  --font-family-primary: 'Montserrat', 'sans-serif'\n  --font-family-second: 'Arial', 'sans-serif'\n\n  --primary-darkest: #008080\n  --primary-dark: #1DBABA\n  --primary-base: #47C8C3\n  --primary-light: #B0E7E5\n  --primary-lightest: #C3ECEb\n  --danger-darkest: #CB0A22\n  --danger-dark: #E83C4B\n  --danger-base: #F4596C\n  --danger-light: #FF7888\n  --danger-lightest: #FF99A5\n  --grey-darkest: #212325\n  --grey-dark: #5A5F67\n  --grey-base: #8F959F\n  --grey-light: #D6DBE2\n  --grey-lightest: #F5F6F7\n  --color-white: #FFFFFF\n  --color-black: #111111\n  --color-transparent: rgba(255, 255, 255, 0)\n\n```\nTo use the variable in your sass file, just use var(VariableName), for example:\n\n```sass\n.myClass\n  color: var(--grey-base)\n```\nTo 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:\n\n`MyTheme.sass`\n\n```sass\n\n$font-base: 16;\n\n@import '@yoonit/style'\n\n/*==== Import Quarks ====*/\n\n[data-composition=\"myTheme\"]\n  --primary-darkest: #49260a\n  --primary-dark: #623b1c\n  --primary-base: #7c5739\n  --primary-light: #caad8c\n  --primary-lightest: #f6eddd\n\n  --font-tn: 8px\n  --font-xs: 10px\n  --font-sm: 12px\n  --font-md: 14px\n  --font-lg: 16px\n  --font-xl: 20px\n  --font-hg: 32px\n\n  --spacing-tn: 2px\n  --spacing-xs: 4px\n  --spacing-sm: 8px\n  --spacing-md: 16px\n  --spacing-lg: 24px\n  --spacing-xl: 32px\n  --spacing-hg: 64px\n\n```\nNow, 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\n\n`Template.vue`\n\n```vue\n \u003cdiv data-composition=\"myTheme\"\u003eMyContainer\u003c/div\u003e\n```\nSo the root variables will be overridden with the theme you made for this added condition.\n\n### Helpers\n\n| Name               | Input/Format | Usage   (sass)                        | Description |\n| -                  | -            | -                                            | -           |\n| flex               | flex-direction, flex-wrap, justify-content, align-content/align-items | `+flex($flex-direction, $flex-wrap, $justify-content, $align-content/align-items` | Helps in the spacial organization on the interface |\n| durationAnimation  | 'slow' or 'normal' or 'fast' or 'very-fast' | `+durationAnimation($modifier)` | Sets the duration of the animation  |\n| stateAnimation     | 'paused' or 'played' | `+stateAnimation($state)` | Sets the state of the animation |\n| delayAnimation     | 'slow' or 'normal' or 'fast' | `+delayAnimation($delay)` | Sets the animation delay |\n| animation          | animation-name, animation-iteration-count, animation-direction, animation-timing-function, 'slow' or 'normal' or 'fast' or 'very-fast', 'paused' or 'played', 'slow' or 'normal' or 'fast' | `+animation($animation-name, $animation-iteration-count, $animation-direction, $animation-timing-function, $animation-duration, $animation-play-state, $animation-delay` | Mixin to build an animation with all properties |\n| border-radius      | 'sm' or 'md' or 'lg' or 'pill' or 'circular' or 'none' | `+border-radius($modifier)` | Defines a rounding for the bordered element |\n| border             | 'xs' or 'sm' or 'md' or 'lg' or 'none', border-color, border-style, 'sm' or 'md' or 'lg' or 'pill' or 'circular' or 'none'  | `+border($border-width, $border-color, $border-style, $border-radius)` | Mixin to build a border with all properties |\n| text-color         | $primary or $danger or $grey, $colorVariation | `+text-color($variation, $color)` |  Sets the color of the text with its respective variation, according to the colors of the theme. |\n| background-color   | $primary or $danger or $grey, $colorVariation | `+background-color($variation, $color)` |  Sets the background color with its respective variation, according to the colors of the theme. |\n| border-color       | $primary or $danger or $grey, $colorVariation | `+border-color($variation, $color)` |  Sets the color of a border with its respective variation, according to the colors of the theme. |\n| box-shadow         | 'soft' or 'low' or 'mid' or 'high' or 'veryHigh' or 'none', color | `+box-shadow($level, color)` | Sets a shadow for the desired element. You can choose the intensity and color of the shadow |\n| text-shadow        | 'soft' or 'low' or 'mid' or 'high' or 'veryHigh' or 'none', color | `+text-shadow($level, color)` | Sets a shadow for text. You can choose the intensity and color of the shadow |\n| font-size          | 'tn' or 'tn' or 'sm' or 'md' or 'lg' or 'xl' or 'hg' | `+font-size($font-size)` | Set font size |\n| font-family        | 'font-primary' or 'font-second' or font-family | `+font-family($font-family)` | Set the family to font |\n| font-weight        | 'bold' or 'semi-bold' or 'medium' or 'regular' | `+font-weight($font-weight)` | Set a font weight |\n| font               | font-color, 'tn' or 'tn' or 'sm' or 'md' or 'lg' or 'xl' or 'hg', 'font-primary' or 'font-second' or font-family, 'bold' or 'semi-bold' or 'medium' or 'regular' | `+font($font-color, $font-size, $font-family, $font-weight)` | Mixin to assist in the construction of the font css with all the properties |\n| pxToRem               | $target, $baseValue | `+fpxToRem($target, $baseValue: $font-base)` | Function that helps convert from `px` to `rem`. `$target` is the value chosen to be converted. `$baseValue` is the base value to perform the conversion and has the default value that is defined in the variable `$font-base` |\n\n### Classes\n\nWe have tons of classes in Yoonit Style, but let's talk about the two main ones, that can be used to set margin and padding.\n\nThe margin class `.m` and the padding class `.p` have elements and modifiers.\n\nThe elements are the position of the margin or padding (left, top, bottom or right) and the modifiers are the size of the margin or padding (extra small, small, medium, large, extra large or none).\n\n| Param              | Input/Format | Description                                   |\n| -                  | -            | -                                             |\n| element            | 'l' or 't' or 'b' or 'r' | Position of the margin or padding |\n| modifier           | 'xs' or 's' or 'm' or 'l' or 'xl' or 'none' | Size of the margin or padding |\n\nTo use them, in your html code, set the `.m` or `.p`, then do `__element`, then `--modifier`.\n\nExample:\n```sass\n.m__b--l //meaning: margin__bottom--large\n\n.m__l--s //meaning: margin__left--small\n\n.p__t--m //meaning: padding__top--medium\n\n.p__r--xl //meaning: padding__right--extra-large\n```\n\n## To contribute and make it better\n\nClone the repo, change what you want and send PR.\nFor commit messages we use \u003ca href=\"https://www.conventionalcommits.org/\"\u003eConventional Commits\u003c/a\u003e.\n\nContributions are always welcome!\n\n\u003ca href=\"https://github.com/Yoonit-Labs/sass-yoonit-style/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=Yoonit-Labs/sass-yoonit-style\" /\u003e\n\u003c/a\u003e\n\n---\n\nCode with ❤ by the [**Yoonit**](https://yoonit.dev/) Team\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonit-labs%2Fsass-yoonit-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoonit-labs%2Fsass-yoonit-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoonit-labs%2Fsass-yoonit-style/lists"}