├── .DS_Store ├── .github ├── CODEOWNERS ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── feature_request.md │ └── improvement-request.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── README.md ├── _satfive.scss ├── docs ├── CNAME ├── assets │ ├── style.processed.css │ ├── style.scss │ ├── styles │ │ ├── _base.scss │ │ ├── _footer.scss │ │ ├── _header.scss │ │ ├── _sections.scss │ │ ├── _sidebar.scss │ │ └── _tables.scss │ ├── voyager_meatball.svg │ └── voyager_worm.svg ├── configurations.html ├── index.html └── utilities.html ├── package.json └── satfive ├── _configs.scss ├── _patterns.scss ├── _resets.scss ├── _tokens.scss ├── _utilities.scss ├── configs ├── _base-units.scss ├── _color.scss ├── _media-queries.scss ├── _typography.scss └── _z-index.scss ├── patterns ├── _set-type-lineheight.scss ├── _set-type-size.scss ├── _set-type-stack.scss ├── _set-type-style.scss ├── _set-type-weight.scss ├── _set-type.scss └── _shadows.scss ├── resets ├── _accessibility.scss └── _base.scss ├── tokens ├── _color.scss ├── _media-queries.scss └── _typography.scss └── utilities ├── _border-radius.scss ├── _color.scss ├── _darkmode.scss ├── _debug.scss ├── _disable-text-select.scss ├── _focusable-only.scss ├── _media-queries.scss ├── _pow.scss ├── _rem-calc.scss ├── _screenreader-only.scss ├── _shadows.scss ├── _share-px-val.scss ├── _simple-gradient.scss ├── _size-multiplier.scss ├── _strip-unit.scss ├── _type-scale.scss └── _z-index.scss /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/voyagerstudio/saturnfive/80b62a86b6ee94b35d1f25dd600e9bc8ea13987f/.DS_Store -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @taurean 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [taurean] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 1. Go to '...' 13 | 2. Click on '....' 14 | 3. Scroll down to '....' 15 | 4. See error 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Desktop (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Smartphone (please complete the following information):** 29 | - Device: [e.g. iPhone6] 30 | - OS: [e.g. iOS8.1] 31 | - Browser [e.g. stock browser, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/improvement-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Improvement request 3 | about: Suggest an improvement for this project 4 | 5 | --- 6 | 7 | **Is your Improvement request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | notes.md 2 | concat-tool/ 3 | concat-tool/* 4 | *.css.map 5 | *.scssc 6 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at houston@voyager.email. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Voyager Studio 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Saturn V Documentation 2 | A design system springboard. 3 | 4 | ## Quick Facts: 5 | * **Saturn V is not a bootstrap competitor.** Saturn V is built with the intention of writing easier/faster CSS, not avoiding the task altogether (not that I'm knocking bootstrap _at all_). The most complex component you'll see in Saturn V for example is styling buttons. 6 | * **Saturn V is not a matured design system.** Saturn V is designed to help you get going with your own design system, it's a springboard but not the real thing. Modifying the settings via the SCSS Variables/Tokens will help get you through the initial set up but there will still be plenty to do in your own projects (the good thing is Saturn V shouldn't establish any meaningful amount of technical debt) 7 | * You can use Saturn V in both big and small projects. It's my go-to foundation for new projects of all sizes, I just don't always override any of the settings for the smaller projects. 8 | * Almost everything in Saturn V from the type scale ratio to the number of generated lighter and darker color options is configurable. All you have to do is before importing Saturn V define your own values for the corresponding SCSS variables. 9 | 10 | 11 | ## How to get started 12 | Getting started with Saturn V is easy, just treat it as any other SCSS partial. Saturn V should be imported before anything that would utlize it's feature or be impacted by it's default styles. Any Saturn V overrides should also be imported or written before importing Saturn V in order to take effect. 13 | -------------------------------------------------------------------------------- /_satfive.scss: -------------------------------------------------------------------------------- 1 | @import 'satfive/configs'; 2 | @import 'satfive/tokens'; 3 | @import 'satfive/utilities'; 4 | @import 'satfive/patterns'; 5 | @import 'satfive/resets'; -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | saturn-v.guide -------------------------------------------------------------------------------- /docs/assets/style.processed.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | box-sizing: border-box; 4 | font-size: 100%; 5 | margin: 0; 6 | padding: 0; } 7 | 8 | *, 9 | *:before, 10 | *:after { 11 | box-sizing: inherit; } 12 | 13 | [disabled], 14 | [aria-disabled="true"] { 15 | -webkit-touch-callout: none; 16 | -webkit-user-select: none; 17 | -khtml-user-select: none; 18 | -moz-user-select: none; 19 | -ms-user-select: none; 20 | user-select: none; 21 | opacity: 0.5; 22 | cursor: not-allowed; 23 | text-decoration: none; 24 | pointer-events: none; } 25 | 26 | [hidden] { 27 | display: none; } 28 | 29 | [aria-hidden="true"] { 30 | visibility: hidden; } 31 | 32 | .wrapper { 33 | width: 100%; 34 | display: flex; 35 | padding: 0; 36 | margin: 0; 37 | min-height: 100vh; } 38 | @media screen and (max-width: 1024px) { 39 | .wrapper { 40 | flex-wrap: wrap; } } 41 | 42 | .content-wrapper { 43 | background-color: white; 44 | padding: 0.5rem 12.5rem; 45 | width: calc(100% - 25rem); } 46 | @media screen and (min-width: 2200px) { 47 | .content-wrapper { 48 | width: 70%; } } 49 | @media (prefers-color-scheme: dark) { 50 | .content-wrapper { 51 | background-color: #1c1c1c; 52 | color: white; } } 53 | html[color-scheme="dark"] .content-wrapper { 54 | background-color: #1c1c1c; 55 | color: white; } 56 | @media screen and (max-width: 1440px) { 57 | .content-wrapper { 58 | padding: 0.5rem 5rem; } } 59 | @media screen and (max-width: 1024px) { 60 | .content-wrapper { 61 | width: 100%; } } 62 | 63 | @media screen and (min-width: 1024px) { 64 | .skip-link:not(#specificity-override) { 65 | border: 0; 66 | clip: rect(1px, 1px, 1px, 1px); 67 | -webkit-clip-path: inset(50%); 68 | clip-path: inset(50%); 69 | height: .1rem; 70 | margin: -.1rem; 71 | overflow: hidden; 72 | padding: 0; 73 | position: absolute; 74 | width: .1rem; 75 | display: inline-block; 76 | white-space: nowrap; 77 | right: 0; } } 78 | 79 | @keyframes heading-kaleidoscope { 80 | 0% { 81 | color: red; } 82 | 10% { 83 | color: orange; } 84 | 20% { 85 | color: goldenrod; } 86 | 30% { 87 | color: yellowgreen; } 88 | 40% { 89 | color: green; } 90 | 50% { 91 | color: teal; } 92 | 60% { 93 | color: blue; } 94 | 70% { 95 | color: violet; } 96 | 80% { 97 | color: pink; } 98 | 100% { 99 | color: red; } } 100 | .header { 101 | border-bottom: 0.0625rem solid #e3e3e3; 102 | display: block; 103 | margin-bottom: 5rem; } 104 | @media (prefers-color-scheme: dark) { 105 | .header { 106 | border-bottom-color: black; } } 107 | html[color-scheme="dark"] .header { 108 | border-bottom-color: black; } 109 | 110 | .header-nav { 111 | display: flex; 112 | justify-content: space-between; 113 | align-items: center; } 114 | 115 | .header-heading { 116 | font-size: 1.8040672364rem; 117 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 118 | font-weight: 300; 119 | line-height: 1.6; 120 | font-style: normal; } 121 | 122 | .header-anchor { 123 | background-clip: padding-box; 124 | border-top-right-radius: 0.25rem; 125 | border-bottom-right-radius: 0.25rem; 126 | border-top-left-radius: 0.25rem; 127 | border-bottom-left-radius: 0.25rem; 128 | animation-name: heading-kaleidoscope; 129 | animation-iteration-count: infinite; 130 | animation-duration: 60s; 131 | text-decoration: none; 132 | padding: 0.5rem; 133 | margin-left: -0.5rem; } 134 | .header-anchor:focus, .header-anchor:hover { 135 | background-color: papayawhip; } 136 | @media (prefers-color-scheme: dark) { 137 | .header-anchor:focus, .header-anchor:hover { 138 | background-color: #1c0000; } } 139 | html[color-scheme="dark"] .header-anchor:focus, html[color-scheme="dark"] .header-anchor:hover { 140 | background-color: #1c0000; } 141 | 142 | .header-nav__list { 143 | list-style-type: none; 144 | padding: 0; } 145 | 146 | .header-nav__list-item { 147 | display: inline-flex; } 148 | .header-nav__list-item + .header-nav__list-item { 149 | margin-left: 2.5rem; } 150 | 151 | .header-nav__anchor { 152 | font-size: 1.0011291504rem; 153 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 154 | font-weight: 400; 155 | line-height: 1.6; 156 | font-style: normal; 157 | text-decoration: none; 158 | color: rgba(0, 0, 0, 0.4); 159 | text-transform: uppercase; 160 | position: relative; 161 | padding: 0.125rem; 162 | transition: color 100ms ease; } 163 | @media (prefers-color-scheme: dark) { 164 | .header-nav__anchor { 165 | color: rgba(255, 255, 255, 0.6); } } 166 | html[color-scheme="dark"] .header-nav__anchor { 167 | color: rgba(255, 255, 255, 0.6); } 168 | .header-nav__anchor:after { 169 | width: 100%; 170 | position: relative; 171 | bottom: 0; 172 | height: 0.125rem; 173 | content: ''; 174 | background: linear-gradient(to right, #ffcd71, #e3abb4); 175 | display: block; 176 | transform: scaleX(0); 177 | transition: opacity 100ms ease, transform 150ms ease-in; 178 | opacity: 0; } 179 | .header-nav__anchor:focus, .header-nav__anchor:hover { 180 | color: black; } 181 | @media (prefers-color-scheme: dark) { 182 | .header-nav__anchor:focus, .header-nav__anchor:hover { 183 | color: white; } } 184 | html[color-scheme="dark"] .header-nav__anchor:focus, html[color-scheme="dark"] .header-nav__anchor:hover { 185 | color: white; } 186 | .header-nav__anchor:focus:after, .header-nav__anchor:hover:after { 187 | opacity: 1; 188 | transform: scaleX(1); } 189 | 190 | hr { 191 | border: none; 192 | border-top: 0.0625rem solid #d5d5d5; 193 | margin: 5rem 0 2.5rem; } 194 | 195 | .main-foot__logos { 196 | padding: 0; 197 | margin-bottom: 1rem; 198 | display: flex; 199 | justify-content: flex-start; 200 | align-items: center; } 201 | .main-foot__logos img { 202 | display: block; 203 | height: 3.5rem; } 204 | .main-foot__logos img + img { 205 | margin-left: 0.5rem; } 206 | 207 | .main-foot p { 208 | font-size: 1.0011291504rem; 209 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 210 | font-weight: 400; 211 | line-height: 1.6; 212 | font-style: normal; 213 | margin-bottom: 2.5rem; } 214 | 215 | .sidebar { 216 | background-color: #f1f1f1; 217 | content: ''; 218 | display: block; 219 | width: 25rem; 220 | padding: 2.5rem 0; } 221 | @media screen and (min-width: 2200px) { 222 | .sidebar { 223 | width: 30%; } } 224 | @media (prefers-color-scheme: dark) { 225 | .sidebar { 226 | background-color: black; } } 227 | html[color-scheme="dark"] .sidebar { 228 | background-color: black; } 229 | @media screen and (max-width: 1024px) { 230 | .sidebar { 231 | width: 100%; 232 | padding: 2.5rem 5rem; } } 233 | 234 | .footer-to-top { 235 | font-size: 1.0011291504rem; 236 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 237 | font-weight: 600; 238 | line-height: 1.6; 239 | font-style: normal; 240 | line-height: 1; 241 | background-clip: padding-box; 242 | border-top-right-radius: 0.375rem; 243 | border-bottom-right-radius: 0.375rem; 244 | border-top-left-radius: 0.375rem; 245 | border-bottom-left-radius: 0.375rem; 246 | box-shadow: 0 0.1875rem 0.1875rem rgba(0, 0, 0, 0.051), 0 0rem 0.125rem rgba(0, 0, 0, 0.03); 247 | position: relative; 248 | box-sizing: border-box; 249 | text-decoration: none; 250 | color: black; 251 | background-color: white; 252 | padding: 0.75rem; 253 | margin-top: 2.5rem; 254 | display: inline-block; } 255 | .footer-to-top:after { 256 | top: 0rem; 257 | right: 0rem; 258 | bottom: 0rem; 259 | left: 0rem; 260 | border-radius: 0rem; 261 | box-shadow: 0 0.5rem 0.5625rem rgba(0, 0, 0, 0.06), 0 0rem 0.1875rem rgba(0, 0, 0, 0.036); 262 | content: ''; 263 | opacity: 0; 264 | position: absolute; 265 | transition: opacity 75ms ease-in; } 266 | .footer-to-top:focus:after, .footer-to-top:hover:after { 267 | opacity: 1; } 268 | .footer-to-top:active:after { 269 | opacity: 0; } 270 | 271 | .nav_wrapper { 272 | max-width: 25rem; 273 | margin: 0 auto; 274 | display: block; } 275 | @media screen and (max-width: 2200px) { 276 | .nav_wrapper { 277 | max-width: 15rem; } } 278 | @media screen and (max-width: 1440px) { 279 | .nav_wrapper { 280 | max-width: 15rem; } } 281 | @media screen and (max-width: 1024px) { 282 | .nav_wrapper { 283 | max-width: 100%; } } 284 | 285 | .nav__list { 286 | list-style-type: none; 287 | padding-left: 0; } 288 | 289 | .nav_wrapper > .nav__list > .nav__list-item { 290 | margin-top: 2.5rem; } 291 | .nav_wrapper > .nav__list > .nav__list-item .nav__list .nav__list-item { 292 | margin-top: 0.25rem; } 293 | 294 | .nav__list-anchor--heading, .nav__list-anchor { 295 | font-size: 1.1262702942rem; 296 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 297 | font-weight: 400; 298 | line-height: 1.6; 299 | font-style: normal; 300 | text-decoration: none; 301 | color: black; 302 | transform: translateX(0); 303 | transition: transform 150ms ease, color 75ms ease; 304 | display: inline-block; 305 | padding: 0.25rem 0.5rem; 306 | background-clip: padding-box; 307 | border-top-right-radius: 0.25rem; 308 | border-bottom-right-radius: 0.25rem; 309 | border-top-left-radius: 0.25rem; 310 | border-bottom-left-radius: 0.25rem; } 311 | .nav__list-anchor--heading .nav__anchor-arrow, 312 | .nav__list-anchor .nav__anchor-arrow { 313 | right: -1rem; 314 | display: inline-block; 315 | opacity: 0; 316 | transform: translateX(0); 317 | transition: transform 200ms ease-in-out, opacity 75ms ease-in; } 318 | .nav__list-anchor--heading:focus, .nav__list-anchor--heading:hover, 319 | .nav__list-anchor:focus, 320 | .nav__list-anchor:hover { 321 | transform: translatex(0.75rem); 322 | color: #9c75f3; 323 | padding-right: 2rem; } 324 | .nav__list-anchor--heading:focus .nav__anchor-arrow, .nav__list-anchor--heading:hover .nav__anchor-arrow, 325 | .nav__list-anchor:focus .nav__anchor-arrow, 326 | .nav__list-anchor:hover .nav__anchor-arrow { 327 | opacity: 1; 328 | transform: translateX(1.25rem); } 329 | .nav__list-anchor--heading:focus, 330 | .nav__list-anchor:focus { 331 | outline: none; 332 | background-color: rgba(156, 117, 243, 0.25); } 333 | @media (prefers-color-scheme: dark) { 334 | .nav__list-anchor--heading, .nav__list-anchor { 335 | color: white; } } 336 | html[color-scheme="dark"] .nav__list-anchor--heading, 337 | html[color-scheme="dark"] .nav__list-anchor { 338 | color: white; } 339 | 340 | .nav__list-anchor--heading { 341 | font-size: 1.4254358411rem; 342 | font-weight: 600; } 343 | 344 | .nav__list-anchor { 345 | color: #8e8e8e; } 346 | 347 | .sr-only:not(#specificity-override) { 348 | border: 0; 349 | clip: rect(1px, 1px, 1px, 1px); 350 | -webkit-clip-path: inset(50%); 351 | clip-path: inset(50%); 352 | height: .1rem; 353 | margin: -.1rem; 354 | overflow: hidden; 355 | padding: 0; 356 | position: absolute; 357 | width: .1rem; 358 | display: inline-block; 359 | white-space: nowrap; 360 | right: 0; } 361 | 362 | .type-intro__heading { 363 | font-size: 4.6288477772rem; 364 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 365 | font-weight: 500; 366 | line-height: 1.6; 367 | font-style: normal; 368 | line-height: 1; } 369 | 370 | .type-intro__description { 371 | font-size: 1.8040672364rem; 372 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 373 | font-weight: 400; 374 | line-height: 1.6; 375 | font-style: normal; 376 | max-width: 50rem; 377 | padding-bottom: 12.5rem; 378 | border-bottom: 0.0625rem solid #e3e3e3; } 379 | @media (prefers-color-scheme: dark) { 380 | .type-intro__description { 381 | border-bottom-color: black; } } 382 | html[color-scheme="dark"] .type-intro__description { 383 | border-bottom-color: black; } 384 | 385 | .section-heading { 386 | font-size: 3.6573612067rem; 387 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 388 | font-weight: 300; 389 | line-height: 1.6; 390 | font-style: normal; 391 | line-height: 1; } 392 | 393 | .section-description { 394 | font-size: 1.4254358411rem; 395 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 396 | font-weight: 400; 397 | line-height: 1.6; 398 | font-style: normal; } 399 | 400 | .content-section { 401 | margin-bottom: 12.5rem; 402 | display: block; } 403 | 404 | .section-type { 405 | font-size: 1.1262702942rem; 406 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 407 | font-weight: 500; 408 | line-height: 1.6; 409 | font-style: normal; 410 | margin-top: -3.125rem; 411 | margin-bottom: 3rem; 412 | letter-spacing: 0.05ex; } 413 | .section-type--mixin { 414 | color: crimson; } 415 | .section-type--function { 416 | color: green; } 417 | 418 | .section-preview { 419 | display: block; 420 | padding: 0; } 421 | 422 | .section-preview__pre { 423 | background-clip: padding-box; 424 | border-top-right-radius: 0.3125rem; 425 | border-bottom-right-radius: 0.3125rem; 426 | border-top-left-radius: 0.3125rem; 427 | border-bottom-left-radius: 0.3125rem; 428 | background-color: #e3e3e3; 429 | padding: 0 2rem; 430 | display: block; 431 | margin-bottom: 2.5rem; } 432 | @media (prefers-color-scheme: dark) { 433 | .section-preview__pre { 434 | background-color: #393939; 435 | color: white; } } 436 | html[color-scheme="dark"] .section-preview__pre { 437 | background-color: #393939; 438 | color: white; } 439 | 440 | .section-preview__code { 441 | font-size: 1.0011291504rem; 442 | font-family: "Andale Mono", AndaleMono, monospace; 443 | font-weight: 400; 444 | line-height: 1.6; 445 | font-style: normal; 446 | display: block; } 447 | 448 | table { 449 | border-collapse: collapse; 450 | width: 100%; } 451 | 452 | table caption:not(#specificity-override) { 453 | border: 0; 454 | clip: rect(1px, 1px, 1px, 1px); 455 | -webkit-clip-path: inset(50%); 456 | clip-path: inset(50%); 457 | height: .1rem; 458 | margin: -.1rem; 459 | overflow: hidden; 460 | padding: 0; 461 | position: absolute; 462 | width: .1rem; 463 | display: inline-block; 464 | white-space: nowrap; 465 | right: 0; } 466 | 467 | tr th { 468 | font-size: 1.0011291504rem; 469 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 470 | font-weight: 600; 471 | line-height: 1.6; 472 | font-style: normal; 473 | text-align: left; } 474 | tr th th + th { 475 | margin-left: 2.5rem; } 476 | 477 | thead { 478 | border-bottom: 0.125rem solid #e3e3e3; } 479 | @media (prefers-color-scheme: dark) { 480 | thead { 481 | border-bottom-color: black; } } 482 | html[color-scheme="dark"] thead { 483 | border-bottom-color: black; } 484 | 485 | td { 486 | font-size: 1.0011291504rem; 487 | font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 488 | font-weight: 400; 489 | line-height: 1.6; 490 | font-style: normal; 491 | padding: 0.5rem; } 492 | 493 | td code { 494 | font-size: 1.0011291504rem; 495 | font-family: "Andale Mono", AndaleMono, monospace; 496 | font-weight: 400; 497 | line-height: 1.6; 498 | font-style: normal; } 499 | 500 | tr:nth-of-type(2n) { 501 | background-color: #f1f1f1; } 502 | @media (prefers-color-scheme: dark) { 503 | tr:nth-of-type(2n) { 504 | background-color: #0e0e0e; } } 505 | html[color-scheme="dark"] tr:nth-of-type(2n) { 506 | background-color: #0e0e0e; } 507 | 508 | /*# sourceMappingURL=style.processed.css.map */ 509 | -------------------------------------------------------------------------------- /docs/assets/style.scss: -------------------------------------------------------------------------------- 1 | @import '../../satfive.scss'; 2 | @import 'styles/base'; 3 | @import 'styles/header'; 4 | @import 'styles/footer'; 5 | @import 'styles/sidebar'; 6 | @import 'styles/sections'; 7 | 8 | @import 'styles/tables'; -------------------------------------------------------------------------------- /docs/assets/styles/_base.scss: -------------------------------------------------------------------------------- 1 | .wrapper { 2 | width: 100%; 3 | display: flex; 4 | padding: 0; 5 | margin: 0; 6 | min-height: 100vh; 7 | 8 | @include max-width-viewport(md) { 9 | flex-wrap: wrap; 10 | } 11 | } 12 | 13 | .content-wrapper { 14 | background-color: get-color(white); 15 | padding: set-size(2) set-size(50); 16 | width: calc(100% - #{set-size(100)}); 17 | 18 | @include min-width-viewport(massive) { 19 | width: 70%; 20 | } 21 | 22 | @include dark-mode { 23 | background-color: get-color(black, 1); 24 | color: get-color(white); 25 | } 26 | 27 | @include max-width-viewport(lg) { 28 | padding: set-size(2) set-size(20); 29 | } 30 | 31 | @include max-width-viewport(md) { 32 | width: 100%; 33 | } 34 | } 35 | 36 | .skip-link { 37 | @include min-width-viewport(md) { 38 | @include screen-reader-only; 39 | } 40 | } -------------------------------------------------------------------------------- /docs/assets/styles/_footer.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | hr { 4 | border: none; 5 | border-top: set-size(pixel) solid get-color(gray, 6); 6 | margin: set-size(20) 0 set-size(10); 7 | } 8 | 9 | .main-foot__logos { 10 | padding: 0; 11 | margin-bottom: set-size(4); 12 | display: flex; 13 | justify-content: flex-start; 14 | align-items: center; 15 | 16 | img { 17 | display: block; 18 | height: set-size(14); 19 | 20 | } 21 | 22 | img + img { 23 | margin-left: set-size(2); 24 | } 25 | } 26 | 27 | .main-foot p { 28 | @include set-type(body, 5); 29 | margin-bottom: set-size(10); 30 | } -------------------------------------------------------------------------------- /docs/assets/styles/_header.scss: -------------------------------------------------------------------------------- 1 | @keyframes heading-kaleidoscope { 2 | 0% { 3 | color: get-color(red); 4 | } 5 | 10% { 6 | color: get-color(orange); 7 | } 8 | 20% { 9 | color: get-color(goldenrod); 10 | } 11 | 30% { 12 | color: get-color(yellowgreen); 13 | } 14 | 40% { 15 | color: get-color(green); 16 | } 17 | 50% { 18 | color: get-color(teal); 19 | } 20 | 60% { 21 | color: get-color(blue); 22 | } 23 | 70% { 24 | color: get-color(violet); 25 | } 26 | 80% { 27 | color: get-color(pink); 28 | } 29 | 100% { 30 | color: get-color(red); 31 | } 32 | } 33 | 34 | 35 | @mixin heading-kaleidoscope-animation { 36 | animation-name: heading-kaleidoscope; 37 | animation-iteration-count: infinite; 38 | animation-duration: 60s; 39 | } 40 | 41 | .header { 42 | border-bottom: set-size(pixel) solid get-color(grey, 7); 43 | display: block; 44 | margin-bottom: set-size(20); 45 | 46 | @include dark-mode { 47 | border-bottom-color: get-color(black); 48 | } 49 | } 50 | 51 | .header-nav { 52 | display: flex; 53 | justify-content: space-between; 54 | align-items: center; 55 | } 56 | 57 | .header-heading { 58 | @include set-type(display, 10, light); 59 | } 60 | 61 | .header-anchor { 62 | @include border-radius(4); 63 | @include heading-kaleidoscope-animation; 64 | text-decoration: none; 65 | padding: set-size(2); 66 | margin-left: set-px(-8); 67 | 68 | &:focus, 69 | &:hover { 70 | background-color: papayawhip; 71 | 72 | @include dark-mode { 73 | background-color: get-color(red, -8); 74 | } 75 | } 76 | } 77 | 78 | .header-nav__list { 79 | list-style-type: none; 80 | padding: 0; 81 | } 82 | 83 | .header-nav__list-item { 84 | display: inline-flex; 85 | 86 | & + & { 87 | margin-left: set-size(10); 88 | } 89 | } 90 | 91 | .header-nav__anchor { 92 | @include set-type(interface, 5); 93 | text-decoration: none; 94 | color: get-color(black, 0, 40); 95 | text-transform: uppercase; 96 | position: relative; 97 | padding: set-size(micro); 98 | transition: color 100ms ease; 99 | 100 | @include dark-mode { 101 | color: get-color(white, 0, 60); 102 | } 103 | 104 | &:after { 105 | width: 100%; 106 | position: relative; 107 | bottom: 0; 108 | height: set-size(micro); 109 | content: ''; 110 | background: linear-gradient(to right, get-color(orange, 4), get-color(pink, -1)); 111 | display: block; 112 | transform: scaleX(0); 113 | transition: opacity 100ms ease, transform 150ms ease-in; 114 | opacity: 0; 115 | } 116 | 117 | &:focus, 118 | &:hover { 119 | color: get-color(black); 120 | 121 | @include dark-mode { 122 | color: get-color(white); 123 | } 124 | 125 | &:after { 126 | opacity: 1; 127 | transform: scaleX(1); 128 | } 129 | } 130 | } -------------------------------------------------------------------------------- /docs/assets/styles/_sections.scss: -------------------------------------------------------------------------------- 1 | .type-intro__heading { 2 | @include set-type(display, 18, medium); 3 | @include set-type-line-height(xxs); 4 | } 5 | 6 | .type-intro__description { 7 | @include set-type(body, 10); 8 | max-width: set-size(200); 9 | padding-bottom: set-size(50); 10 | border-bottom: set-size(pixel) solid get-color(grey, 7); 11 | 12 | @include dark-mode { 13 | border-bottom-color: get-color(black); 14 | } 15 | } 16 | 17 | .section-heading { 18 | @include set-type(display, 16, light); 19 | @include set-type-line-height(xxs); 20 | } 21 | 22 | .section-description { 23 | @include set-type(text, 8); 24 | } 25 | 26 | .content-section { 27 | margin-bottom: set-size(50); 28 | display: block; 29 | } 30 | 31 | .section-type { 32 | @include set-type(display, 6, medium); 33 | margin-top: set-px(-50); 34 | margin-bottom: set-size(12); 35 | letter-spacing: 0.05ex; 36 | 37 | &--mixin { 38 | color: get-color(crimson); 39 | } 40 | 41 | &--function { 42 | color: get-color(green); 43 | } 44 | } 45 | 46 | .section-preview { 47 | display: block; 48 | padding: 0; 49 | } 50 | 51 | .section-preview__pre { 52 | @include border-radius(5px); 53 | background-color: get-color(black, 8); 54 | padding: 0 set-size(8); 55 | display: block; 56 | margin-bottom: set-size(10); 57 | 58 | @include dark-mode { 59 | background-color: get-color(white, -7); 60 | color: get-color(white); 61 | } 62 | } 63 | 64 | .section-preview__code { 65 | @include set-type(code, 5); 66 | display: block; 67 | } 68 | -------------------------------------------------------------------------------- /docs/assets/styles/_sidebar.scss: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | background-color: get-color(grey, 8); 3 | content: ''; 4 | display: block; 5 | width: set-size(100); 6 | padding: set-size(10) 0; 7 | 8 | @include min-width-viewport(massive) { 9 | width: 30%; 10 | } 11 | 12 | @include dark-mode { 13 | background-color: get-color(black); 14 | } 15 | 16 | @include max-width-viewport(md) { 17 | width: 100%; 18 | padding: set-size(10) set-size(20); 19 | } 20 | } 21 | 22 | .footer-to-top { 23 | @include set-type(display, 5, demi-bold); 24 | @include set-type-line-height(xxs); 25 | @include border-radius(6); 26 | @include set-standard-shadow(5, $intensity-multiplier:30); 27 | @include set-interactive-shadow(10, $intensity-multiplier:30); 28 | text-decoration: none; 29 | color: get-color(black); 30 | background-color: get-color(white); 31 | padding: set-size(3); 32 | margin-top: set-size(10); 33 | display: inline-block; 34 | } 35 | 36 | .nav_wrapper { 37 | max-width: set-size(100); 38 | margin: 0 auto; 39 | display: block; 40 | 41 | @include max-width-viewport(massive) { 42 | max-width: set-size(60); 43 | } 44 | 45 | @include max-width-viewport(lg) { 46 | max-width: set-size(60); 47 | } 48 | 49 | @include max-width-viewport(md) { 50 | max-width: 100%; 51 | } 52 | } 53 | 54 | .nav__list { 55 | list-style-type: none; 56 | padding-left: 0; 57 | } 58 | 59 | .nav_wrapper > .nav__list > .nav__list-item { 60 | margin-top: set-size(10); 61 | 62 | & .nav__list .nav__list-item { 63 | margin-top: set-size(1); 64 | } 65 | } 66 | 67 | .nav__list-anchor--heading, 68 | .nav__list-anchor { 69 | @include set-type(display, 6, book); 70 | text-decoration: none; 71 | color: get-color(black); 72 | transform: translateX(0); 73 | transition: transform 150ms ease, color 75ms ease; 74 | display: inline-block; 75 | padding: set-size(1) set-size(2); 76 | @include border-radius(4); 77 | 78 | & .nav__anchor-arrow { 79 | right: set-px(-16); 80 | display: inline-block; 81 | opacity: 0; 82 | transform: translateX(0); 83 | transition: transform 200ms ease-in-out, opacity 75ms ease-in; 84 | } 85 | 86 | &:focus, 87 | &:hover { 88 | transform: translatex(set-size(3)); 89 | color: get-color(primary); 90 | padding-right: set-size(8); 91 | 92 | & .nav__anchor-arrow { 93 | opacity: 1; 94 | transform: translateX(set-size(5)); 95 | } 96 | } 97 | 98 | &:focus { 99 | outline: none; 100 | background-color: get-color(primary, 0, 25); 101 | } 102 | 103 | @include dark-mode { 104 | color: get-color(white); 105 | } 106 | } 107 | 108 | .nav__list-anchor--heading { 109 | @include set-type-size(8); 110 | @include set-type-weight(demi-bold); 111 | } 112 | 113 | .nav__list-anchor { 114 | color: get-color(black, 5); 115 | } 116 | 117 | .sr-only { 118 | @include screen-reader-only; 119 | } -------------------------------------------------------------------------------- /docs/assets/styles/_tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | border-collapse: collapse; 3 | width: 100%; 4 | } 5 | 6 | table caption { 7 | @include screen-reader-only; 8 | } 9 | 10 | tr th { 11 | @include set-type(display, 5, demi-bold); 12 | text-align: left; 13 | 14 | th + th { 15 | margin-left: set-size(10); 16 | } 17 | } 18 | 19 | thead { 20 | border-bottom: set-size(micro) solid get-color(grey, 7); 21 | 22 | @include dark-mode { 23 | border-bottom-color: get-color(black); 24 | } 25 | } 26 | 27 | td { 28 | @include set-type(interface, 5); 29 | padding: set-size(2); 30 | } 31 | 32 | td code { 33 | @include set-type(code, 5); 34 | } 35 | 36 | tr:nth-of-type(2n) { 37 | background-color: get-color(grey, 8); 38 | 39 | @include dark-mode { 40 | background-color: get-color(grey, -8); 41 | } 42 | } -------------------------------------------------------------------------------- /docs/assets/voyager_meatball.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /docs/assets/voyager_worm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/configurations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Saturn V - Configurations 9 | 10 | 11 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | 44 | 45 |
46 |

Configurations

47 |

This is the complete list of variables that power Saturn V along with their default values and descriptions. 48 |

49 |
50 |
51 |

base units

52 |

foundational variables that dictate base units in Saturn V

53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 |
foundational variables that dictate base units in Saturn V
VariableDefault ValueDescription
$s5_foundation-unit-size4pxThe default value used as a multiplier in the size-multiplier() function.
$s5_color-scale-step-total19This controls how many additional lighter and darker colors get generated. This must be an odd number. 19 color steps means there is 1 base and 9 darker/lighter options.
$s5_type-scale-modifier1.125This controls how much each type size increases
$s5_type-scale-base10pxThis controls what the starting (and smallest) type scale size is.
$s5_type-root-size16pxThis keeps the math accurate for determining rem sizes. If you change the font-size for the html property, you should change this variable also.
$s5_zindex-order"example-one", "example-two", "example-three"This auto-sets z-index values depending on the order in this list. This is used by the zindex() mixin.
95 |
96 |
97 |

Color

98 |

foundational variables that dictate base units in Saturn V

99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 129 | 130 | 131 | 132 | 133 | 135 | 136 | 137 | 138 | 139 | 141 | 142 | 143 | 144 | 145 | 147 | 148 | 149 | 150 | 151 | 153 | 154 | 155 | 156 | 157 | 159 | 160 | 161 | 162 | 163 | 165 | 166 | 167 | 168 | 169 | 171 | 172 | 173 |
foundational variables that dictate base units in Saturn V
VariableDefault ValueDescription
$s5_color-brand-color-1#9C75F3The default brand color. you can access via get-color(primary).
$s5_color-brand-color-2mediumblueThe secondary brand color. you can access via get-color(secondary).
$s5_color-brand-color-3#a10000The tertiary brand color. you can access via get-color(tertiary).
$s5_color-soft-white#FAFCFCa soft grey that's light enough to use as an alternative to white. you can access via 128 | get-color(soft-white).
$s5_color-soft-black#0D0C0Ca dark grey that's dark enough to use as an alternative to black. you can access via 134 | get-color(soft-black).
$s5_color-focus-base#002effa color that is used for UI elements that are being focused. you can access via 140 | get-color(focus).
$s5_color-info-base#002effa color that is used for UI elements that represent info. you can access via 146 | get-color(info).
$s5_color-alert-basegolda color that is used for UI elements that represent alerts. you can access via 152 | get-color(alert).
$s5_color-warning-base#f14400a color that is used for UI elements that represent warnings. you can access via 158 | get-color(warning).
$s5_color-danger-base#dc1414a color that is used for UI elements that represent danger. you can access via 164 | get-color(danger).
$s5_color-success-base#1aaa35a color that is used for UI elements that represent success. you can access via 170 | get-color(success).
174 |
175 |
176 |

media-queries

177 |

viewport breakpoints for adaptive layouts

178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 |
viewport breakpoints for adaptive layouts
VariableDefault ValueDescription
$s5_viewport-micro320pxthe smallest viewport size
$s5_viewport-xs640pxthe "extra-small" viewport size
$s5_viewport-sm768pxthe "small" viewport size
$s5_viewport-md1024pxthe "medium" viewport size
$s5_viewport-lg1440pxthe "large" viewport size
$s5_viewport-xl1600pxthe "extra-large" viewport size
$s5_viewport-massive2200pxthe "massive" viewport size
225 |
226 |
227 |

Type-Stacks

228 |

the various sets of Type families and fallbacks for different contexts.

229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 |
the various sets of Type families and fallbacks for different contexts.
VariableDefault Value
$s5_typestack--monospace"Andale Mono", AndaleMono, monospace
$s5_typestack--sans-serifsans-serif
$s5_typestack--serifserif
$s5_typestack--displayBlinkMacSystemFont,-apple-system,"Roboto","Droid Sans","Segoe UI","Helvetica 253 | Neue",Helvetica,Arial,sans-serif
$s5_typestack--masthead$s5_typestack--display
$s5_typestack--body$s5_typestack--display
$s5_typestack--text$s5_typestack--body
$s5_typestack--code$s5_typestack--monospace
$s5_typestack--interface$s5_typestack--display
$s5_typestack--caption$s5_typestack--display
$s5_typestack--aside$s5_typestack--display
$s5_typestack--blockquote$s5_typestack--display
289 |
290 |
291 |

Type-Weights

292 |

various type-weights.

293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 |
various type-weights.
VariableDefault Value
$s5_weight--thin100
$s5_weight--extra-light200
$s5_weight--light300
$s5_weight--book400
$s5_weight--medium500
$s5_weight--demi-bold600
$s5_weight--bold700
$s5_weight--heavy800
$s5_weight--black900
340 |
341 |
342 |

Line Heights

343 |

various line-heights.

344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 |
various line-heights.
VariableDefault Value
$s5_line-height-xxs1
$s5_line-height-xs1.2
$s5_line-height-sm1.4
$s5_line-height-md1.6
$s5_line-height-lg2
$s5_line-height-xl3
379 |
380 |
381 |
382 |
383 | the worm variant of the voyager logo 384 | the worm variant of the voyager logo 385 |
386 |

2019 — MIT License. Built by Voyager Studio

387 |
388 |
389 | 519 |
520 | 521 | 522 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Saturn V 9 | 10 | 11 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | 45 | 46 |
47 |

MK 2.0.0 β Introduction

48 |

A SASS powered springboard for styling the web. 49 |

50 |
51 |
52 |

Getting Started

53 |

To get started, all you need is the _satfive.scss file and 54 | satfive directory in the same place. from here, just import saturn five as you would any other 55 | SASS/SCSS partial.

56 |

57 | 

 58 |             
 59 | @include 'saturnfive';
 60 |             
 61 |
62 |

63 |

To utilize the configuration options, make sure variables are set before import Saturn Five. The Jump from MK 0.9.0 to MK >2.0.0 is a large one and as a result there will more than likely be some breaking changes either as improvements or bugs. Make sure you read the changelog when downloading versions greather than MK 2.0.0

64 |
65 |
66 |

Contribution Guide

67 |

Saturn V would love your help! If you notice something behaving in a way that it 68 | shouldn't or think that things can improve in some way don't hesitate to either open a new issue or even 70 | submit a pull request yourself. Saturn V will always be Free and Open 72 | Source. Before contributing, make sure to read 73 | through our Code of Conduct.

75 |
76 |
77 |
78 | the worm variant of the voyager logo 79 | the worm variant of the voyager logo 80 |
81 |

2019 — MIT License. Built by Voyager Studio

82 |
83 |
84 | 214 |
215 | 216 | 217 | -------------------------------------------------------------------------------- /docs/utilities.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Saturn V - Configurations 9 | 10 | 11 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | 44 | 45 |
46 |

Utilities

47 |

These are the various utilities that Saturn V provides along with how to use them. 48 |

49 |
50 |
51 |

border-radius

52 |
mixin
53 |

A mixin for easily setting border-radius in rems without managing the math.

54 |

55 | 

 56 |             
 57 | .example {
 58 |   @include border-radius(5px, 'top-left bottom-right');
 59 | }
 60 |             
 61 |
62 |

63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 83 | 84 | 85 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$radii5pxHow round the corners should be. This value is converted to rem automatically.
$radii-location'top-right bottom-right top-left bottom-left'This controls which corners the border-radius should be applied to. you can provide any combination of 82 | the four corner options.
86 |
87 |
88 |

color

89 |
function
90 |

A function for getting and manipulating pre-set colors.

91 |

92 | 

 93 |             
 94 | .example {
 95 |   background-color: get-color(black);
 96 |   color: get-color(white, -2, 40);
 97 | }
 98 |             
 99 |
100 |

101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 116 | 117 | 118 | 119 | 120 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 |
Arguments available in the border-radius mixin
argumentDefaultDescription
$huenoneAny color in the $s5_map--color map (by default any of the 147 color names, plus: 115 | Primary, Secondary, Tertiary, focus, info, warning, and danger)
$shade0This manipulates the color to have either a higher or lighter luminosity relative to the base color. 121 | The number of available shades can be tweaked using the $s5_color-scale-step-total 122 | variable.
opacity100any number between 0-100 is valid.
131 |
132 |
133 |

dark-mode

134 |
mixin
135 |

Mixin for setting specific styles in either a dark or light mode. This uses 136 | prefers-color-scheme media query as well as styles children of <html 137 | color-scheme="dark/light">

138 |

139 | 

140 |             
141 | .example {
142 |   color: blue;
143 | 
144 |   @include dark-mode {
145 |     outline: 1px solid red;
146 |   }
147 | 
148 |   @include light-mode {
149 |     outline: 1px solid blue;
150 |   }
151 | }
152 |             
153 |
154 |

155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
172 |
173 |
174 |

disable-text-select

175 |
mixin
176 |

A mixin for disabling the ability for text to be selectable.

177 |

178 | 

179 |             
180 | .example {
181 |   @include disable-text-select;
182 | }
183 |             
184 |
185 |

186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
203 |
204 |
205 |

focusable-only

206 |
mixin
207 |

A mixin for making an otherwise interactive element only visible when focused.

208 |

209 | 

210 |             
211 | .example {
212 |   @include focusable-only;
213 | }
214 |             
215 |
216 |

217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
234 |
235 |
236 |

media-queries

237 |
mixin
238 |

A pair of mixins for setting styles based on min or max viewport widths. 239 |

240 |

241 | 

242 |             
243 | .example {
244 |   @include min-width-viewport(sm) {
245 |     // some styles
246 |   }
247 | 
248 |   @include max-width-viewport(massive) {
249 |   // some styles
250 |   }
251 | }
252 |             
253 |
254 |

255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
micro320pxthe smallest viewport size
xs640pxthe extra-small viewport size
sm768pxthe small viewport size
md1024pxthe medium viewport size
lg1440pxthe large viewport size
xl1600pxthe extra-large viewport size
massive2200pxthe massive viewport size
302 |
303 |
304 |

rem calculator

305 |
function
306 |

A function for converting values from pixel to rem units. 307 |

308 |

309 | 

310 |             
311 | .example {
312 |   padding: set-px(10) set-px(20);
313 |   margin: set-px(400);
314 |   margin-left: set-px(-200);
315 | }
316 |             
317 |
318 |

319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$sizenonethe size in pixels that you're intending to convert to rem.
336 |
337 |
338 |

screen-reader-only

339 |
mixin
340 |

A mixin for making content only accessible to screen readers. 341 |

342 |

343 | 

344 |             
345 | .example {
346 |   @include screen-reader-only;
347 |   // whatever styles you want, the mixin will still override them.
348 | }
349 |             
350 |
351 |

352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
369 |
370 |
371 |

share-px-value

372 |
mixin
373 |

A mixin for sharing the same pixel value across multiple properties. 374 |

375 |

376 | 

377 |             
378 | .example {
379 |   @include share-px-value(margin-left, padding-left, 5px);
380 | }
381 |             
382 |
383 |

384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$props...nonelist the properties that should share the same value separated by a comma. the last argument should be the pixel value that will be shared (converted to rem)
401 |
402 |
403 |

simple-gradient

404 |
mixin
405 |

A mixin for creating a simple linear-gradient based off a single input color. 406 |

407 |

408 | 

409 |             
410 | .example {
411 |   @include simple-gradient(red, dark);
412 | }
413 |             
414 |
415 |

416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$gradient-colornonethe base color the gradient will use to determine the start and end point
$lightnessbasemodify the brightness of the gradient. Options include: darkest, darker, dark, base, light, lighter, and lightest
438 |
439 |
440 |

size-multiplier

441 |
function
442 |

A function for setting sizes in multiples of some base value (set by the related config variable). 443 |

444 |

445 | 

446 |             
447 | .example {
448 |   padding: set-size(2) set-size(4);
449 |   margin: set-size(pixel);
450 | }
451 |             
452 |
453 |

454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$multiplier1multiplies the base value set by $s5_foundation-unit-size. You can also set 'micro' or 'pixel' as arguments for the rem equivalent of 2 or 1px respectively.
471 |
472 |
473 |

set-type

474 |
mixin
475 |

A mixin shorthand for setting a handful of type properties. 476 |

477 |

478 | 

479 |             
480 | .example {
481 |   @include set-type(display, 8, bold, md, italic);
482 | }
483 |             
484 |
485 |

486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 506 | 507 | 508 | 509 | 510 | 512 | 513 | 514 | 515 | 516 | 518 | 519 | 520 | 521 | 522 | 524 | 525 | 526 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$type-stackbodythis determines the type stack that gets used. options include: monospace, sans-serif, serif, display, masthead, body, text, code, interface, caption, aside, and blockquote.
$font-scale5this sets the type size based on a type scale using the ratio set by $s5_type-scale-modifier. Any whole number greater than 1 is a valid option. 505 |
$weightbookthis sets the type weight. options include: thin, light, book, medium, demi-bold, bold, heavy, and black. 511 |
$line-heightmdthis sets the line height. options include: xxs (1), xs, sm, md, lg, and xl. 517 |
$stylenormalthis sets the type style. options include: normal, italic, and oblique 523 |
527 |
528 |
529 |

set line-height

530 |
mixin
531 |

A mixin for setting the line height. useful for overriding a parents usage of set-type(). 532 |

533 |

534 | 

535 |             
536 | .example {
537 |   @include set-type-line-height(xl);
538 | }
539 |             
540 |
541 |

542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$line-heightmdthis sets the line height. options include: xxs (1), xs, sm, md, lg, and xl.
559 |
560 |
561 |

set type-stack

562 |
mixin
563 |

A mixin for setting the type stack. useful for overriding a parents usage of 564 | set-type(). 565 |

566 |

567 | 

568 |             
569 | .example {
570 |   @include set-type-stack(interface);
571 | }
572 |             
573 |
574 |

575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$contextbodythis determines the type stack that gets used. options include: monospace, sans-serif, serif, display, masthead, body, text, code, interface, caption, aside, and blockquote.
592 |
593 |
594 |

set type-style

595 |
mixin
596 |

A mixin for setting the type style. useful for overriding a parents usage of 597 | set-type(). 598 |

599 |

600 | 

601 |             
602 | .example {
603 |   @include set-type-style(italic);
604 | }
605 |             
606 |
607 |

608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$stylenormalthis sets the type style. options include: normal, italic, and oblique
625 |
626 |
627 |

set type-weight

628 |
mixin
629 |

A mixin for setting the type weight. useful for overriding a parents usage of 630 | set-type(). 631 |

632 |

633 | 

634 |             
635 | .example {
636 |   @include set-type-weight(demi-bold);
637 | }
638 |             
639 |
640 |

641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 656 | 657 | 658 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$weightbookthis sets the type weight. options include: thin, light, book, medium, demi-bold, bold, heavy, and 655 | black.
659 |
660 |
661 |

z index

662 |
mixin
663 |

A mixin for setting the z-index.

664 |

665 | 

666 |             
667 | .example {
668 |   @include zindex(modal);
669 | }
670 |             
671 |
672 |

673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 |
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$objectnonethis should correspond with an item listed by the $s5_zindex-order variable. this sets a z-index value depending on where it falls in the list order.
690 |
691 |
692 |
693 |
694 | the worm variant of the voyager logo 695 | the worm variant of the voyager logo 696 |
697 |

2019 — MIT License. Built by Voyager Studio

698 |
699 |
700 | 828 |
829 | 830 | 831 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@voyagerstudio/saturnfive", 3 | "version": "2.0.4", 4 | "description": "A design system springboard.", 5 | "main": "_saturnfive.scss", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/voyagerstudio/saturnfive.git" 12 | }, 13 | "keywords": [ 14 | "scss", 15 | "framework", 16 | "css", 17 | "frontend-framework", 18 | "mixins" 19 | ], 20 | "PublishConfig": { "registry": "https://npm.pkg.github.com/" }, 21 | "author": "Taurean Bryant", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/voyagerstudio/saturnfive/issues" 25 | }, 26 | "homepage": "https://github.com/voyagerstudio/saturnfive#readme" 27 | } 28 | -------------------------------------------------------------------------------- /satfive/_configs.scss: -------------------------------------------------------------------------------- 1 | @import 'configs/base-units'; 2 | @import 'configs/color'; 3 | @import 'configs/media-queries'; 4 | @import 'configs/typography'; 5 | @import 'configs/z-index'; -------------------------------------------------------------------------------- /satfive/_patterns.scss: -------------------------------------------------------------------------------- 1 | @import 'patterns/shadows'; 2 | @import 'patterns/set-type-lineheight'; 3 | @import 'patterns/set-type-size'; 4 | @import 'patterns/set-type-stack'; 5 | @import 'patterns/set-type-style'; 6 | @import 'patterns/set-type-weight'; 7 | @import 'patterns/set-type'; -------------------------------------------------------------------------------- /satfive/_resets.scss: -------------------------------------------------------------------------------- 1 | @import 'resets/base'; 2 | @import 'resets/accessibility'; -------------------------------------------------------------------------------- /satfive/_tokens.scss: -------------------------------------------------------------------------------- 1 | @import 'tokens/color'; 2 | @import 'tokens/media-queries'; 3 | @import 'tokens/typography'; 4 | @import 'tokens/typography'; -------------------------------------------------------------------------------- /satfive/_utilities.scss: -------------------------------------------------------------------------------- 1 | // P1 2 | @import 'utilities/pow'; // Power Function 3 | @import 'utilities/rem-calc'; 4 | @import 'utilities/strip-unit'; 5 | @import 'utilities/z-index'; 6 | @import 'utilities/share-px-val'; 7 | @import 'utilities/color'; 8 | @import 'utilities/darkmode'; 9 | @import 'utilities/disable-text-select'; 10 | @import 'utilities/focusable-only'; 11 | @import 'utilities/screenreader-only'; 12 | // P2 13 | @import 'utilities/size-multiplier'; 14 | @import 'utilities/type-scale'; 15 | @import 'utilities/media-queries'; 16 | @import 'utilities/debug'; 17 | @import 'utilities/simple-gradient'; 18 | @import 'utilities/border-radius'; 19 | @import 'utilities/shadows'; -------------------------------------------------------------------------------- /satfive/configs/_base-units.scss: -------------------------------------------------------------------------------- 1 | $s5_foundation-unit-size: 4px !default; -------------------------------------------------------------------------------- /satfive/configs/_color.scss: -------------------------------------------------------------------------------- 1 | // Brand Colors 2 | $s5_color-brand-color-1: #9C75F3 !default; 3 | $s5_color-brand-color-2: mediumblue !default; 4 | $s5_color-brand-color-3: #a10000 !default; 5 | 6 | // Greyscale Base Colors 7 | $s5_color-soft-white: #FAFCFC !default; 8 | $s5_color-soft-black: #0D0C0C !default; 9 | 10 | // Contextual Base Colors 11 | $s5_color-focus-base: #002eff !default; 12 | $s5_color-info-base: #002eff !default; 13 | $s5_color-alert-base: gold !default; 14 | $s5_color-warning-base: #f14400 !default; 15 | $s5_color-danger-base: #dc1414 !default; 16 | $s5_color-success-base: #1aaa35 !default; 17 | 18 | 19 | // Color Function Features 20 | $s5_color-scale-step-total: 19 !default; // must be an odd number -------------------------------------------------------------------------------- /satfive/configs/_media-queries.scss: -------------------------------------------------------------------------------- 1 | $s5_viewport-micro: 320px !default; 2 | $s5_viewport-xs: 640px !default; 3 | $s5_viewport-sm: 768px !default; 4 | $s5_viewport-md: 1024px !default; 5 | $s5_viewport-lg: 1440px !default; 6 | $s5_viewport-xl: 1600px !default; 7 | $s5_viewport-massive: 2200px !default; -------------------------------------------------------------------------------- /satfive/configs/_typography.scss: -------------------------------------------------------------------------------- 1 | // Fontstacks 2 | $s5_typestack--monospace: "Andale Mono",AndaleMono,monospace !default; 3 | $s5_typestack--sans-serif: sans-serif !default; 4 | $s5_typestack--serif: serif !default; 5 | 6 | $s5_typestack--display: BlinkMacSystemFont,-apple-system,"Roboto","Droid Sans","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default; 7 | $s5_typestack--masthead: $s5_typestack--display !default; 8 | $s5_typestack--body: $s5_typestack--display !default; 9 | $s5_typestack--text: $s5_typestack--body !default; 10 | $s5_typestack--code: $s5_typestack--monospace !default; 11 | $s5_typestack--interface: $s5_typestack--display !default; 12 | 13 | $s5_typestack--caption: $s5_typestack--display !default; 14 | $s5_typestack--aside: $s5_typestack--display !default; 15 | $s5_typestack--blockquote: $s5_typestack--display !default; 16 | 17 | // Font Weights 18 | $s5_weight--thin: 100 !default; 19 | $s5_weight--extra-light: 200 !default; 20 | $s5_weight--light: 300 !default; 21 | $s5_weight--book: 400 !default; 22 | $s5_weight--medium: 500 !default; 23 | $s5_weight--demi-bold: 600 !default; 24 | $s5_weight--bold: 700 !default; 25 | $s5_weight--heavy: 800 !default; 26 | $s5_weight--black: 900 !default; 27 | 28 | // Line Heights 29 | $s5_line-height-xxs: 1 !default; 30 | $s5_line-height-xs: 1.2 !default; 31 | $s5_line-height-sm: 1.4 !default; 32 | $s5_line-height-md: 1.6 !default; 33 | $s5_line-height-lg: 2 !default; 34 | $s5_line-height-xl: 3 !default; 35 | 36 | // Type Scale Modifiers 37 | $s5_type-scale-modifier: 1.125 !default; 38 | $s5_type-scale-base: 10px !default; 39 | $s5_type-root-size: 16px !default; -------------------------------------------------------------------------------- /satfive/configs/_z-index.scss: -------------------------------------------------------------------------------- 1 | $s5_zindex-order: 2 | "example-one", 3 | "example-two", 4 | "example-three" 5 | !default; 6 | 7 | $s5_permanent-z-order: "debug", "focusable-only"; 8 | 9 | 10 | $s5_z-order: join($s5_permanent-z-order, $s5_zindex-order); -------------------------------------------------------------------------------- /satfive/patterns/_set-type-lineheight.scss: -------------------------------------------------------------------------------- 1 | @mixin set-type-line-height($line-height:md) { 2 | line-height: get-lineheight($line-height); 3 | } -------------------------------------------------------------------------------- /satfive/patterns/_set-type-size.scss: -------------------------------------------------------------------------------- 1 | @mixin set-type-size($type-scale:5) { 2 | font-size: type-scale($type-scale); 3 | } -------------------------------------------------------------------------------- /satfive/patterns/_set-type-stack.scss: -------------------------------------------------------------------------------- 1 | @mixin set-type-stack($context:body) { 2 | font-family: get-typestack($context); 3 | } -------------------------------------------------------------------------------- /satfive/patterns/_set-type-style.scss: -------------------------------------------------------------------------------- 1 | @mixin set-type-style($style:normal) { 2 | @if $style==normal { 3 | font-style: normal; 4 | } 5 | 6 | @else if $style==italic { 7 | font-style: italic; 8 | } 9 | 10 | @else if $style==oblique { 11 | font-style: oblique; 12 | } 13 | } -------------------------------------------------------------------------------- /satfive/patterns/_set-type-weight.scss: -------------------------------------------------------------------------------- 1 | @mixin set-type-weight($weight:book) { 2 | font-weight: get-typeweight($weight); 3 | } -------------------------------------------------------------------------------- /satfive/patterns/_set-type.scss: -------------------------------------------------------------------------------- 1 | @mixin set-type($type-stack:body, $font-scale:5, $weight:book, $line-height:md, $style:normal) { 2 | @include set-type-size($font-scale); 3 | @include set-type-stack($type-stack); 4 | @include set-type-weight($weight); 5 | @include set-type-line-height($line-height); 6 | @include set-type-style($style); 7 | } -------------------------------------------------------------------------------- /satfive/patterns/_shadows.scss: -------------------------------------------------------------------------------- 1 | @mixin set-standard-shadow($step:0, $color:black, $intensity-multiplier:1) { 2 | box-shadow: get-shadow($step, $color, $intensity-multiplier); 3 | } 4 | 5 | @mixin set-interactive-shadow($step:0, $color:black, $intensity-multiplier:1, $border-radius:0, $animation-speed:75ms, $animation-type:ease-in) { 6 | position: relative; 7 | box-sizing: border-box; 8 | 9 | &:after { 10 | @include share-px-value(top, right, bottom, left, 0); 11 | border-radius: set-px($border-radius); 12 | box-shadow: get-shadow($step, $color, $intensity-multiplier); 13 | content: ''; 14 | opacity: 0; 15 | position: absolute; 16 | transition: opacity $animation-speed $animation-type; 17 | } 18 | 19 | &:focus, 20 | &:hover { 21 | 22 | &:after { 23 | opacity: 1; 24 | } 25 | } 26 | 27 | &:active { 28 | &:after { 29 | opacity: 0; 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /satfive/resets/_accessibility.scss: -------------------------------------------------------------------------------- 1 | [disabled], 2 | [aria-disabled="true"] { 3 | @include disable-text-select; 4 | opacity: 0.5; 5 | cursor: not-allowed; 6 | text-decoration: none; 7 | pointer-events: none; 8 | } 9 | 10 | // Hiding Elements 11 | [hidden] { 12 | display: none; 13 | } 14 | 15 | [aria-hidden="true"] { 16 | visibility: hidden; 17 | } -------------------------------------------------------------------------------- /satfive/resets/_base.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | box-sizing: border-box; 4 | font-size: 100%; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | *, 10 | *:before, 11 | *:after { 12 | box-sizing: inherit; 13 | } -------------------------------------------------------------------------------- /satfive/tokens/_color.scss: -------------------------------------------------------------------------------- 1 | $s5_map--color: ( // pinks 2 | pink: pink, 3 | lightpink: lightpink, 4 | hotpink: hotpink, 5 | deeppink: deeppink, 6 | palevioletred: palevioletred, 7 | mediumvioletred: mediumvioletred, 8 | // reds 9 | lightsalmon: lightsalmon, 10 | salmon: salmon, 11 | darksalmon: darksalmon, 12 | lightcoral: lightcoral, 13 | indianred: indianred, 14 | crimson: crimson, 15 | firebrick: firebrick, 16 | darkred: darkred, 17 | red: red, 18 | //oranges 19 | orangered: orangered, 20 | tomato: tomato, 21 | coral: coral, 22 | darkorange: darkorange, 23 | orange: orange, 24 | // yellows 25 | yellow: yellow, 26 | lightyellow: lightyellow, 27 | lemonchiffon: lemonchiffon, 28 | lightgoldenrodyellow: lightgoldenrodyellow, 29 | papayawhip: papayawhip, 30 | moccasin: moccasin, 31 | peachpuff: peachpuff, 32 | palegoldenrod: palegoldenrod, 33 | khaki: khaki, 34 | darkkhaki: darkkhaki, 35 | gold: gold, 36 | // browns 37 | cornsilk: cornsilk, 38 | blanchedalmond: blanchedalmond, 39 | bisque: bisque, 40 | navajowhite: navajowhite, 41 | wheat: wheat, 42 | burlywood: burlywood, 43 | tan: tan, 44 | rosybrown: rosybrown, 45 | sandybrown: sandybrown, 46 | goldenrod: goldenrod, 47 | darkgoldenrod: darkgoldenrod, 48 | peru: peru, 49 | chocolate: chocolate, 50 | saddlebrown: saddlebrown, 51 | sienna: sienna, 52 | brown: brown, 53 | maroon: maroon, 54 | // greens 55 | darkolivegreen: darkolivegreen, 56 | olive: olive, 57 | olivedrab: olivedrab, 58 | yellowgreen: yellowgreen, 59 | limegreen: limegreen, 60 | lime: lime, 61 | lawngreen: lawngreen, 62 | chartreuse: chartreuse, 63 | greenyellow: greenyellow, 64 | springgreen: springgreen, 65 | mediumspringgreen: mediumspringgreen, 66 | lightgreen: lightgreen, 67 | palegreen: palegreen, 68 | darkseagreen: darkseagreen, 69 | mediumaquamarine: mediumaquamarine, 70 | mediumseagreen: mediumseagreen, 71 | seagreen: seagreen, 72 | forestgreen: forestgreen, 73 | green: green, 74 | darkgreen: darkgreen, 75 | // cyans 76 | cyan: cyan, 77 | 'aqua': aqua, 78 | lightcyan: lightcyan, 79 | paleturquoise: paleturquoise, 80 | aquamarine: aquamarine, 81 | turquoise: turquoise, 82 | mediumturquoise: mediumturquoise, 83 | darkturquoise: darkturquoise, 84 | lightseagreen: lightseagreen, 85 | cadetblue: cadetblue, 86 | darkcyan: darkcyan, 87 | teal: teal, 88 | // blues 89 | lightsteelblue: lightsteelblue, 90 | powderblue: powderblue, 91 | lightblue: lightblue, 92 | skyblue: skyblue, 93 | lightskyblue: lightskyblue, 94 | deepskyblue: deepskyblue, 95 | dodgerblue: dodgerblue, 96 | cornflowerblue: cornflowerblue, 97 | steelblue: steelblue, 98 | royalblue: royalblue, 99 | blue: blue, 100 | mediumblue: mediumblue, 101 | darkblue: darkblue, 102 | navy: navy, 103 | midnightblue: midnightblue, 104 | // purples 105 | lavender: lavender, 106 | thistle: thistle, 107 | plum: plum, 108 | violet: violet, 109 | orchid: orchid, 110 | fuchsia: fuchsia, 111 | 'magenta': magenta, 112 | mediumorchid: mediumorchid, 113 | mediumpurple: mediumpurple, 114 | blueviolet: blueviolet, 115 | darkviolet: darkviolet, 116 | darkorchid: darkorchid, 117 | rebeccapurple: rebeccapurple, 118 | darkmagenta: darkmagenta, 119 | purple: purple, 120 | indigo: indigo, 121 | darkslateblue: darkslateblue, 122 | slateblue: slateblue, 123 | mediumslateblue: mediumslateblue, 124 | // lights 125 | white: white, 126 | snow: snow, 127 | honeydew: honeydew, 128 | mintcream: mintcream, 129 | azure: azure, 130 | aliceblue: aliceblue, 131 | ghostwhite: ghostwhite, 132 | whitesmoke: whitesmoke, 133 | seashell: seashell, 134 | beige: beige, 135 | oldlace: oldlace, 136 | floralwhite: floralwhite, 137 | ivory: ivory, 138 | antiquewhite: antiquewhite, 139 | linen: linen, 140 | lavenderblush: lavenderblush, 141 | mistyrose: mistyrose, 142 | // darks 143 | gainsboro: gainsboro, 144 | lightgray: lightgray, 145 | silver: silver, 146 | darkgray: darkgray, 147 | gray: gray, 148 | dimgray: dimgray, 149 | lightslategray: lightslategray, 150 | slategray: slategray, 151 | darkslategray: darkslategray, 152 | black: black, 153 | // custom 154 | primary: $s5_color-brand-color-1, 155 | secondary: $s5_color-brand-color-2, 156 | tertiary: $s5_color-brand-color-3, 157 | soft-white: $s5_color-soft-white, 158 | soft-black: $s5_color-soft-black, 159 | // contextual 160 | focus: $s5_color-focus-base, 161 | info: $s5_color-info-base, 162 | alert: $s5_color-alert-base, 163 | warning: $s5_color-warning-base, 164 | danger: $s5_color-danger-base, 165 | success: $s5_color-success-base, 166 | ) !default; -------------------------------------------------------------------------------- /satfive/tokens/_media-queries.scss: -------------------------------------------------------------------------------- 1 | $s5_map--viewport: ( 2 | micro: $s5_viewport-micro, 3 | xs: $s5_viewport-xs, 4 | sm: $s5_viewport-sm, 5 | md: $s5_viewport-md, 6 | lg: $s5_viewport-lg, 7 | xl: $s5_viewport-xl, 8 | massive: $s5_viewport-massive, 9 | ); 10 | 11 | @function get-viewport($viewport) { 12 | @if map-has-key($s5_map--viewport, $viewport) { 13 | $viewport: map-get($s5_map--viewport, $viewport); 14 | 15 | @return $viewport; 16 | } 17 | 18 | @else if not map-has-key($s5_map--viewport, $viewport) { 19 | @error 'the viewport "#{$viewport}" is not a valid option. please choose from the following options: `#{map-keys($s5_map--viewport)}`.'; 20 | } 21 | } -------------------------------------------------------------------------------- /satfive/tokens/_typography.scss: -------------------------------------------------------------------------------- 1 | $s5_map--typestack: ( 2 | monospace: $s5_typestack--monospace, 3 | sans-serif: $s5_typestack--sans-serif, 4 | serif: $s5_typestack--serif, 5 | display: $s5_typestack--display, 6 | masthead: $s5_typestack--masthead, 7 | body: $s5_typestack--body, 8 | text: $s5_typestack--text, 9 | code: $s5_typestack--code, 10 | interface: $s5_typestack--interface, 11 | caption: $s5_typestack--caption, 12 | aside: $s5_typestack--aside, 13 | blockquote: $s5_typestack--blockquote 14 | ); 15 | 16 | 17 | @function get-typestack($typestack) { 18 | @if map-has-key($s5_map--typestack, $typestack) { 19 | $typestack: map-get($s5_map--typestack, $typestack); 20 | 21 | @return $typestack; 22 | } 23 | 24 | @else if not map-has-key($s5_map--typestack, $typestack) { 25 | @error 'the typestack shorthand "#{$typestack}" is not a valid option. please choose from the following options: `#{map-keys($s5_map--typestack)}`.'; 26 | } 27 | } 28 | 29 | $s5_map--typeweight: ( 30 | thin: $s5_weight--thin, 31 | light: $s5_weight--light, 32 | book: $s5_weight--book, 33 | medium: $s5_weight--medium, 34 | demi-bold: $s5_weight--demi-bold, 35 | bold: $s5_weight--bold, 36 | heavy: $s5_weight--heavy, 37 | black: $s5_weight--black, 38 | ); 39 | 40 | @function get-typeweight($typeweight) { 41 | @if map-has-key($s5_map--typeweight, $typeweight) { 42 | $typeweight: map-get($s5_map--typeweight, $typeweight); 43 | 44 | @return $typeweight; 45 | } 46 | 47 | @else if not map-has-key($s5_map--typeweight, $typeweight) { 48 | @error 'the type-weight "#{$typeweight}" is not a valid option. please choose from the following options: `#{map-has-keys($s5_map--typeweight)}`.'; 49 | } 50 | } 51 | 52 | $s5_map--lineheight: ( 53 | xxs: $s5_line-height-xxs, 54 | xs: $s5_line-height-xs, 55 | sm: $s5_line-height-sm, 56 | md: $s5_line-height-md, 57 | lg: $s5_line-height-lg, 58 | xl: $s5_line-height-xl, 59 | ); 60 | 61 | @function get-lineheight($lineheight) { 62 | @if map-has-key($s5_map--lineheight, $lineheight) { 63 | $lineheight: map-get($s5_map--lineheight, $lineheight); 64 | 65 | @return $lineheight; 66 | } 67 | 68 | @else if not map-has-key($s5_map--lineheight, $lineheight) { 69 | @error 'the font-weight "#{$lineheight}" is not a valid option. please choose from the following options: `#{map-has-keys($s5_map--lineheight)}`.'; 70 | } 71 | } -------------------------------------------------------------------------------- /satfive/utilities/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @mixin border-radius($radii:5px, $radii-location:'top-right bottom-right top-left bottom-left') { 2 | $radii: strip-unit($radii); 3 | $radii: set-px($radii); 4 | 5 | background-clip: padding-box; 6 | 7 | @if str-index($radii-location, 'top-right') { 8 | border-top-right-radius: $radii; 9 | } 10 | 11 | @if str-index($radii-location, 'bottom-right') { 12 | border-bottom-right-radius: $radii; 13 | } 14 | 15 | @if str-index($radii-location, 'top-left') { 16 | border-top-left-radius: $radii; 17 | } 18 | 19 | @if str-index($radii-location, 'bottom-left') { 20 | border-bottom-left-radius: $radii; 21 | } 22 | 23 | @if $radii-location == null { 24 | border-radius: $radii; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /satfive/utilities/_color.scss: -------------------------------------------------------------------------------- 1 | @function get-color($color-input, $step:0, $opacity:100%) { 2 | 3 | // limits the range of accepted colors to just what's in the color map 4 | $color: map-get($s5_map--color, $color-input); 5 | 6 | $opacity: (strip-unit($opacity) / 100); 7 | 8 | $base-red: red($color); 9 | $base-green: green($color); 10 | $base-blue: blue($color); 11 | 12 | // rounds steps to a whole number to eliminate decimal-placed steps 13 | $step: round($step); // unsure if I should keep this 14 | 15 | // converts total number of steps into the positive and negative amounts 16 | $step-count: ($s5_color-scale-step-total - 1) / 2; 17 | 18 | // sets up positive steps 19 | @if $step>0 { 20 | 21 | @for $i from 1 to $step-count { 22 | $transformed-red: $base-red + (((255 - $base-red) / $step-count) * ($step)); 23 | $transformed-green: $base-green + (((255 - $base-green) / $step-count) * ($step)); 24 | $transformed-blue: $base-blue + (((255 - $base-blue) / $step-count) * ($step)); 25 | 26 | @return rgba($transformed-red, $transformed-green, $transformed-blue, $opacity); 27 | } 28 | 29 | } 30 | 31 | // sets up negative steps 32 | @if $step < 0 { 33 | @for $i from -1 to $step-count { 34 | $transformed-red: $base-red + (((0 + $base-red) / $step-count) * ($step)); 35 | $transformed-green: $base-green + (((0 + $base-green) / $step-count) * ($step)); 36 | $transformed-blue: $base-blue + (((0 + $base-blue) / $step-count) * ($step)); 37 | 38 | @return rgba($transformed-red, $transformed-green, $transformed-blue, $opacity); 39 | } 40 | 41 | } 42 | 43 | // allows for use with not transforming a color 44 | @if $step==0 { 45 | $transformed-red: $base-red; 46 | $transformed-green: $base-green; 47 | $transformed-blue: $base-blue; 48 | 49 | @return rgba($transformed-red, $transformed-green, $transformed-blue, $opacity); 50 | } 51 | } -------------------------------------------------------------------------------- /satfive/utilities/_darkmode.scss: -------------------------------------------------------------------------------- 1 | @mixin dark-mode { 2 | @media (prefers-color-scheme: dark) { 3 | @content; 4 | } 5 | 6 | html[color-scheme="dark"] & { 7 | @content; 8 | } 9 | } 10 | 11 | @mixin light-mode { 12 | @media (prefers-color-scheme: light) { 13 | @content; 14 | } 15 | 16 | html[color-scheme="light"] & { 17 | @content; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /satfive/utilities/_debug.scss: -------------------------------------------------------------------------------- 1 | $s5_debug-tool--500grid: 'data:image/png;base64,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'; 2 | 3 | @mixin debug-overlay($type:grid, $location:local, $opacity:100%, $offset-x:0, $offset-y:0) { 4 | $opacity: strip-unit($opacity) * 0.01; 5 | 6 | @if $location=='global' { 7 | html:after { 8 | @include zindex(debug); 9 | content: ''; 10 | background-image: url($s5_debug-tool--500grid); 11 | position: absolute; 12 | top: $offset-y; 13 | left: $offset-x; 14 | right: 0; 15 | bottom: 0; 16 | opacity: $opacity; 17 | } 18 | } 19 | 20 | @if $location=='local' { 21 | $self: &; 22 | 23 | & { 24 | position: relative; 25 | } 26 | 27 | &:after { 28 | content: ''; 29 | @include zindex(debug); 30 | background-image: url($s5_debug-tool--500grid); 31 | position: absolute; 32 | top: $offset-y; 33 | left: $offset-x; 34 | right: 0; 35 | bottom: 0; 36 | opacity: $opacity; 37 | mix-blend-mode: exclusion; 38 | } 39 | } 40 | } 41 | 42 | -------------------------------------------------------------------------------- /satfive/utilities/_disable-text-select.scss: -------------------------------------------------------------------------------- 1 | @mixin disable-text-select { 2 | -webkit-touch-callout: none; // iOS Safari 3 | -webkit-user-select: none; // Chrome/Safari/Opera 4 | -khtml-user-select: none; // Konqueror 5 | -moz-user-select: none; // Firefox 6 | -ms-user-select: none; // Internet Explorer/Edge 7 | user-select: none; // Non-prefixed version, currently not supported by any browser 8 | } -------------------------------------------------------------------------------- /satfive/utilities/_focusable-only.scss: -------------------------------------------------------------------------------- 1 | @mixin focusable-only { 2 | &:not(#specificity-override) { 3 | position: absolute; 4 | width: 1px; 5 | height: 1px; 6 | margin: -1px; 7 | padding: 0; 8 | border: 0; 9 | clip: rect(0 0 0 0); 10 | overflow: hidden; 11 | 12 | &:active, 13 | &:focus { 14 | @include zindex(focusable-only); 15 | width: auto; 16 | height: auto; 17 | margin: 0; 18 | clip: auto; 19 | overflow: visible; 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /satfive/utilities/_media-queries.scss: -------------------------------------------------------------------------------- 1 | @mixin min-width-viewport($viewport) { 2 | @media screen and (min-width: get-viewport($viewport)) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin max-width-viewport($viewport) { 8 | @media screen and (max-width: get-viewport($viewport)) { 9 | @content; 10 | } 11 | } -------------------------------------------------------------------------------- /satfive/utilities/_pow.scss: -------------------------------------------------------------------------------- 1 | // Power Function 2 | // via - https://www.bhalash.com/archives/13544805657 3 | 4 | @function pow($number, $power) { 5 | $exponent: 1; 6 | 7 | @if $power>0 { 8 | @for $i from 1 through $power { 9 | $exponent: $exponent * $number; 10 | } 11 | } 12 | 13 | @else if $power < 0 { 14 | @for $i from 1 through $power { 15 | $exponent: $exponent / $number; 16 | } 17 | } 18 | 19 | @return $exponent; 20 | } -------------------------------------------------------------------------------- /satfive/utilities/_rem-calc.scss: -------------------------------------------------------------------------------- 1 | @function set-px($size) { 2 | $remSize: $size / strip-unit($s5_type-root-size); // target / root type size 3 | @return #{$remSize}rem; 4 | } -------------------------------------------------------------------------------- /satfive/utilities/_screenreader-only.scss: -------------------------------------------------------------------------------- 1 | @mixin screen-reader-only { 2 | &:not(#specificity-override) { 3 | border: 0; 4 | clip: rect(1px, 1px, 1px, 1px); 5 | -webkit-clip-path: inset(50%); 6 | clip-path: inset(50%); 7 | height: .1rem; 8 | margin: -.1rem; 9 | overflow: hidden; 10 | padding: 0; 11 | position: absolute; 12 | width: .1rem; 13 | display: inline-block; 14 | white-space: nowrap; 15 | right: 0; 16 | } 17 | } -------------------------------------------------------------------------------- /satfive/utilities/_shadows.scss: -------------------------------------------------------------------------------- 1 | @function get-shadow($step:0, $color:black, $intensity-multiplier:1) { 2 | $box-shadow-props: (); 3 | 4 | @if ($step==0) { 5 | $box-shadow-props: 0 0 0 get-color($color, 0, 0 * $intensity-modifier); 6 | } 7 | 8 | @if ($step==1) { 9 | $box-shadow-props: 0 0 set-px(2) get-color($color, -5, 05 * $intensity-multiplier); 10 | } 11 | 12 | @if ($step==2) { 13 | $box-shadow-props: 0 0 set-px(2) get-color($color, -5, 12 * $intensity-multiplier); 14 | } 15 | 16 | @if ($step==3) { 17 | $box-shadow-props: 0 0 set-px(4) get-color($color, -5, 15 * $intensity-multiplier); 18 | } 19 | 20 | @if ($step==4) { 21 | $box-shadow-props: 0 set-px(2) set-px(3) get-color($color, -5, 15 * $intensity-multiplier), 22 | 0 set-px(0) set-px(2) get-color($color, -5, 10 * $intensity-multiplier); 23 | } 24 | 25 | @if ($step==5) { 26 | $box-shadow-props: 0 set-px(3) set-px(3) get-color($color, -5, 17 * $intensity-multiplier), 27 | 0 set-px(0) set-px(2) get-color($color, -5, 10 * $intensity-multiplier); 28 | } 29 | 30 | @if ($step==6) { 31 | $box-shadow-props: 0 set-px(4) set-px(4) get-color($color, -5, 17 * $intensity-multiplier), 32 | 0 set-px(0) set-px(2) get-color($color, -5, 10 * $intensity-multiplier); 33 | } 34 | 35 | @if ($step==7) { 36 | $box-shadow-props: 0 set-px(5) set-px(6) get-color($color, -5, 17 * $intensity-multiplier), 37 | 0 set-px(0) set-px(2) get-color($color, -5, 10 * $intensity-multiplier); 38 | } 39 | 40 | @if ($step==8) { 41 | $box-shadow-props: 0 set-px(6) set-px(6) get-color($color, -5, 19 * $intensity-multiplier), 42 | 0 set-px(0) set-px(3) get-color($color, -5, 10 * $intensity-multiplier); 43 | } 44 | 45 | @if ($step==9) { 46 | $box-shadow-props: 0 set-px(7) set-px(8) get-color($color, -5, 19 * $intensity-multiplier), 47 | 0 set-px(0) set-px(3) get-color($color, -5, 12 * $intensity-multiplier); 48 | } 49 | 50 | @if ($step==10) { 51 | $box-shadow-props: 0 set-px(8) set-px(9) get-color($color, -5, 20 * $intensity-multiplier), 52 | 0 set-px(0) set-px(3) get-color($color, -5, 12 * $intensity-multiplier); 53 | } 54 | 55 | @if ($step==11) { 56 | $box-shadow-props: 0 set-px(10) set-px(12) get-color($color, -5, 20 * $intensity-multiplier), 57 | 0 set-px(0) set-px(3) get-color($color, -5, 12 * $intensity-multiplier); 58 | } 59 | 60 | @if ($step==12) { 61 | $box-shadow-props: 0 set-px(13) set-px(14) get-color($color, -5, 20 * $intensity-multiplier), 62 | 0 set-px(0) set-px(5) get-color($color, -5, 12 * $intensity-multiplier); 63 | } 64 | 65 | @if ($step==13) { 66 | $box-shadow-props: 0 set-px(15) set-px(18) get-color($color, -5, 20 * $intensity-multiplier), 67 | 0 set-px(0) set-px(5) get-color($color, -5, 12 * $intensity-multiplier); 68 | } 69 | 70 | @if ($step==14) { 71 | $box-shadow-props: 0 set-px(17) set-px(20) get-color($color, -5, 20 * $intensity-multiplier), 72 | 0 set-px(0) set-px(5) get-color($color, -5, 12 * $intensity-multiplier); 73 | } 74 | 75 | @if ($step==15) { 76 | $box-shadow-props: 0 set-px(20) set-px(22) get-color($color, -5, 20 * $intensity-multiplier), 77 | 0 set-px(0) set-px(5) get-color($color, -5, 12 * $intensity-multiplier); 78 | } 79 | 80 | @if ($step==16) { 81 | $box-shadow-props: 0 set-px(26) set-px(27) get-color($color, -5, 20 * $intensity-multiplier), 82 | 0 set-px(0) set-px(7) get-color($color, -5, 14 * $intensity-multiplier); 83 | } 84 | 85 | @if ($step==17) { 86 | $box-shadow-props: 0 set-px(30) set-px(40) get-color($color, -5, 22 * $intensity-multiplier), 87 | 0 set-px(0) set-px(7) get-color($color, -5, 14 * $intensity-multiplier); 88 | } 89 | 90 | @if ($step==18) { 91 | $box-shadow-props: 0 set-px(40) set-px(45) get-color($color, -5, 22 * $intensity-multiplier), 92 | 0 set-px(2) set-px(9) get-color($color, -5, 16 * $intensity-multiplier); 93 | } 94 | 95 | @if ($step==19) { 96 | $box-shadow-props: 0 set-px(41) set-px(65) get-color($color, -5, 22 * $intensity-multiplier), 97 | 0 set-px(2) set-px(9) get-color($color, -5, 19 * $intensity-multiplier); 98 | } 99 | 100 | @if ($step==20) { 101 | $box-shadow-props: 0 set-px(45) set-px(75) get-color($color, -5, 22 * $intensity-multiplier), 102 | 0 set-px(3) set-px(10) get-color($color, -5, 19 * $intensity-multiplier); 103 | } 104 | 105 | @return $box-shadow-props; 106 | } 107 | -------------------------------------------------------------------------------- /satfive/utilities/_share-px-val.scss: -------------------------------------------------------------------------------- 1 | @mixin share-px-value($props...) { 2 | $grab-val: nth($props, -1); 3 | $unitless-val: strip-unit($grab-val); 4 | $rem-val: set-px($unitless-val); 5 | 6 | @for $i from 1 to length($props) { 7 | #{nth($props, $i)}: $rem-val; 8 | } 9 | } -------------------------------------------------------------------------------- /satfive/utilities/_simple-gradient.scss: -------------------------------------------------------------------------------- 1 | @function simple-gradient($gradient-color, $lightness:base) { 2 | $gradient-val: (); 3 | 4 | @if ($lightness==darkest) { 5 | $gradient-val: -webkit-linear-gradient(get-color($gradient-color, -3), get-color($gradient-color, -4), get-color($gradient-color, -6)); 6 | } 7 | 8 | @if ($lightness==darker) { 9 | $gradient-val: -webkit-linear-gradient(get-color($gradient-color, -1), get-color($gradient-color, -3), get-color($gradient-color, -4)); 10 | } 11 | 12 | @if ($lightness==dark) { 13 | $gradient-val: -webkit-linear-gradient(get-color($gradient-color), get-color($gradient-color, -1), get-color($gradient-color, -3)); 14 | } 15 | 16 | @if ($lightness==base) { 17 | $gradient-val: -webkit-linear-gradient(get-color($gradient-color, 2), get-color($gradient-color), get-color($gradient-color, -2)); 18 | } 19 | 20 | @if ($lightness==light) { 21 | $gradient-val: -webkit-linear-gradient(get-color($gradient-color, 3), get-color($gradient-color, 1), get-color($gradient-color)); 22 | } 23 | 24 | @if ($lightness==lighter) { 25 | $gradient-val: -webkit-linear-gradient(lighten(get-color($gradient-color, 4), 5%), lighten(get-color($gradient-color, 2), 5%), lighten(get-color($gradient-color, 1), 5%)); 26 | } 27 | 28 | @if ($lightness==lightest) { 29 | $gradient-val: -webkit-linear-gradient(lighten(get-color($gradient-color, 6), 5%), lighten(get-color($gradient-color, 4), 5%), lighten(get-color($gradient-color, 2), 5%)); 30 | } 31 | 32 | @return $gradient-val; 33 | } -------------------------------------------------------------------------------- /satfive/utilities/_size-multiplier.scss: -------------------------------------------------------------------------------- 1 | @function set-size($multiplier:'1') { 2 | $unit: strip-unit($s5_foundation-unit-size); 3 | 4 | @if $multiplier=='pixel' { 5 | $calculated-unit: 1; 6 | @return set-px($calculated-unit); 7 | } 8 | 9 | @else if $multiplier=='micro' { 10 | $calculated-unit: 2; 11 | @return set-px($calculated-unit); 12 | } 13 | 14 | @else if $multiplier>=0 { 15 | $calculated-unit: $unit * $multiplier; 16 | 17 | @return set-px($calculated-unit); 18 | } 19 | } -------------------------------------------------------------------------------- /satfive/utilities/_strip-unit.scss: -------------------------------------------------------------------------------- 1 | // Strip Unit 2 | 3 | // input: attribute: strip-unit([number-with-unit]); 4 | // output: attribute: [unitless-number]; 5 | 6 | @function strip-unit($number) { 7 | @if type-of($number)=='number'and not unitless($number) { 8 | @return $number / ($number * 0 + 1); 9 | } 10 | 11 | @return $number; 12 | } 13 | 14 | // I think I originally got this either from Smashing Magazine or from Dropbox's Scooter project that's now depracated -------------------------------------------------------------------------------- /satfive/utilities/_type-scale.scss: -------------------------------------------------------------------------------- 1 | // Font size calculator 2 | @function type-scale($step) { 3 | $stripped-base: (strip-unit($s5_type-scale-base)); 4 | $font-size-calc: ($stripped-base * pow($s5_type-scale-modifier, (($step - 1)))); 5 | $rounded-font-size: round($font-size-calc); 6 | $rem-font-size: (set-px($rounded-font-size)); 7 | 8 | @return $rem-font-size; 9 | } 10 | -------------------------------------------------------------------------------- /satfive/utilities/_z-index.scss: -------------------------------------------------------------------------------- 1 | @function get-zindex($object) { 2 | @if index($s5_z-order, $object) { 3 | @return (length($s5_z-order) - index($s5_z-order, $object))+1; 4 | } 5 | 6 | @else { 7 | @return 'There is no object "#{$object}" in this list; choose from the following: #{$z-order}'; 8 | } 9 | } 10 | 11 | @mixin zindex($object) { 12 | z-index: get-zindex($object); 13 | } --------------------------------------------------------------------------------