diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 5008ddf..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 61ef8aa..e69de29 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,3 +0,0 @@ -# These are supported funding model platforms - -github: [taurean] diff --git a/README.md b/README.md index 11e60fb..635b9d6 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,11 @@ # Saturn V Documentation A design system springboard. +## Links +- [Code of Conduct](/nice/CODE_OF_CONDUCT.md) +- [License](/nice/LICENSE.md) + ## Quick Facts: * **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. * **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) -* 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. -* 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. - - -## How to get started -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. +* Almost everything in Saturn V from the type scale ratio to the number of generated lighter and darker color options is configurable. diff --git a/_index.scss b/_index.scss new file mode 100644 index 0000000..d6b9c6e --- /dev/null +++ b/_index.scss @@ -0,0 +1,27 @@ +// Tokens +@forward "tokens/base-units"; +@forward "tokens/colors"; +@forward "tokens/media-queries"; +// @forward "tokens/transition"; +@forward "tokens/type"; +@forward "tokens/zindex"; + +// Modules +@forward "module/border-radius"; +@forward "module/color"; +// @forward "module/color-props"; +@forward "module/dark-mode"; +@forward "module/debug"; +@forward "module/disable-text-select"; +@forward "module/focusable-only"; +@forward "module/media-queries"; +@forward "module/rem-calc"; +@forward "module/rice-paper"; +@forward "module/screen-reader-only"; +@forward "module/shadows"; +@forward "module/share-px-val"; +@forward "module/simple-gradient"; +@forward "module/size-multiplier"; +@forward "module/spacing"; +@forward "module/type-all"; +@forward "module/zindex"; diff --git a/_reset.scss b/_reset.scss new file mode 100644 index 0000000..e69de29 diff --git a/_satfive.scss b/_satfive.scss deleted file mode 100644 index ec4c539..0000000 --- a/_satfive.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'satfive/configs'; -@import 'satfive/tokens'; -@import 'satfive/utilities'; -@import 'satfive/patterns'; -@import 'satfive/resets'; \ No newline at end of file diff --git a/docs/CNAME b/docs/CNAME deleted file mode 100644 index 2c731c9..0000000 --- a/docs/CNAME +++ /dev/null @@ -1 +0,0 @@ -saturn-v.guide \ No newline at end of file diff --git a/docs/assets/style.processed.css b/docs/assets/style.processed.css deleted file mode 100644 index 7556301..0000000 --- a/docs/assets/style.processed.css +++ /dev/null @@ -1,508 +0,0 @@ -html, -body { - box-sizing: border-box; - font-size: 100%; - margin: 0; - padding: 0; } - -*, -*:before, -*:after { - box-sizing: inherit; } - -[disabled], -[aria-disabled="true"] { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - opacity: 0.5; - cursor: not-allowed; - text-decoration: none; - pointer-events: none; } - -[hidden] { - display: none; } - -[aria-hidden="true"] { - visibility: hidden; } - -.wrapper { - width: 100%; - display: flex; - padding: 0; - margin: 0; - min-height: 100vh; } - @media screen and (max-width: 1024px) { - .wrapper { - flex-wrap: wrap; } } - -.content-wrapper { - background-color: white; - padding: 0.5rem 12.5rem; - width: calc(100% - 25rem); } - @media screen and (min-width: 2200px) { - .content-wrapper { - width: 70%; } } - @media (prefers-color-scheme: dark) { - .content-wrapper { - background-color: #1c1c1c; - color: white; } } - html[color-scheme="dark"] .content-wrapper { - background-color: #1c1c1c; - color: white; } - @media screen and (max-width: 1440px) { - .content-wrapper { - padding: 0.5rem 5rem; } } - @media screen and (max-width: 1024px) { - .content-wrapper { - width: 100%; } } - -@media screen and (min-width: 1024px) { - .skip-link:not(#specificity-override) { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: .1rem; - margin: -.1rem; - overflow: hidden; - padding: 0; - position: absolute; - width: .1rem; - display: inline-block; - white-space: nowrap; - right: 0; } } - -@keyframes heading-kaleidoscope { - 0% { - color: red; } - 10% { - color: orange; } - 20% { - color: goldenrod; } - 30% { - color: yellowgreen; } - 40% { - color: green; } - 50% { - color: teal; } - 60% { - color: blue; } - 70% { - color: violet; } - 80% { - color: pink; } - 100% { - color: red; } } -.header { - border-bottom: 0.0625rem solid #e3e3e3; - display: block; - margin-bottom: 5rem; } - @media (prefers-color-scheme: dark) { - .header { - border-bottom-color: black; } } - html[color-scheme="dark"] .header { - border-bottom-color: black; } - -.header-nav { - display: flex; - justify-content: space-between; - align-items: center; } - -.header-heading { - font-size: 1.8040672364rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - line-height: 1.6; - font-style: normal; } - -.header-anchor { - background-clip: padding-box; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; - animation-name: heading-kaleidoscope; - animation-iteration-count: infinite; - animation-duration: 60s; - text-decoration: none; - padding: 0.5rem; - margin-left: -0.5rem; } - .header-anchor:focus, .header-anchor:hover { - background-color: papayawhip; } - @media (prefers-color-scheme: dark) { - .header-anchor:focus, .header-anchor:hover { - background-color: #1c0000; } } - html[color-scheme="dark"] .header-anchor:focus, html[color-scheme="dark"] .header-anchor:hover { - background-color: #1c0000; } - -.header-nav__list { - list-style-type: none; - padding: 0; } - -.header-nav__list-item { - display: inline-flex; } - .header-nav__list-item + .header-nav__list-item { - margin-left: 2.5rem; } - -.header-nav__anchor { - font-size: 1.0011291504rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - line-height: 1.6; - font-style: normal; - text-decoration: none; - color: rgba(0, 0, 0, 0.4); - text-transform: uppercase; - position: relative; - padding: 0.125rem; - transition: color 100ms ease; } - @media (prefers-color-scheme: dark) { - .header-nav__anchor { - color: rgba(255, 255, 255, 0.6); } } - html[color-scheme="dark"] .header-nav__anchor { - color: rgba(255, 255, 255, 0.6); } - .header-nav__anchor:after { - width: 100%; - position: relative; - bottom: 0; - height: 0.125rem; - content: ''; - background: linear-gradient(to right, #ffcd71, #e3abb4); - display: block; - transform: scaleX(0); - transition: opacity 100ms ease, transform 150ms ease-in; - opacity: 0; } - .header-nav__anchor:focus, .header-nav__anchor:hover { - color: black; } - @media (prefers-color-scheme: dark) { - .header-nav__anchor:focus, .header-nav__anchor:hover { - color: white; } } - html[color-scheme="dark"] .header-nav__anchor:focus, html[color-scheme="dark"] .header-nav__anchor:hover { - color: white; } - .header-nav__anchor:focus:after, .header-nav__anchor:hover:after { - opacity: 1; - transform: scaleX(1); } - -hr { - border: none; - border-top: 0.0625rem solid #d5d5d5; - margin: 5rem 0 2.5rem; } - -.main-foot__logos { - padding: 0; - margin-bottom: 1rem; - display: flex; - justify-content: flex-start; - align-items: center; } - .main-foot__logos img { - display: block; - height: 3.5rem; } - .main-foot__logos img + img { - margin-left: 0.5rem; } - -.main-foot p { - font-size: 1.0011291504rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - line-height: 1.6; - font-style: normal; - margin-bottom: 2.5rem; } - -.sidebar { - background-color: #f1f1f1; - content: ''; - display: block; - width: 25rem; - padding: 2.5rem 0; } - @media screen and (min-width: 2200px) { - .sidebar { - width: 30%; } } - @media (prefers-color-scheme: dark) { - .sidebar { - background-color: black; } } - html[color-scheme="dark"] .sidebar { - background-color: black; } - @media screen and (max-width: 1024px) { - .sidebar { - width: 100%; - padding: 2.5rem 5rem; } } - -.footer-to-top { - font-size: 1.0011291504rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 600; - line-height: 1.6; - font-style: normal; - line-height: 1; - background-clip: padding-box; - border-top-right-radius: 0.375rem; - border-bottom-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; - box-shadow: 0 0.1875rem 0.1875rem rgba(0, 0, 0, 0.051), 0 0rem 0.125rem rgba(0, 0, 0, 0.03); - position: relative; - box-sizing: border-box; - text-decoration: none; - color: black; - background-color: white; - padding: 0.75rem; - margin-top: 2.5rem; - display: inline-block; } - .footer-to-top:after { - top: 0rem; - right: 0rem; - bottom: 0rem; - left: 0rem; - border-radius: 0rem; - box-shadow: 0 0.5rem 0.5625rem rgba(0, 0, 0, 0.06), 0 0rem 0.1875rem rgba(0, 0, 0, 0.036); - content: ''; - opacity: 0; - position: absolute; - transition: opacity 75ms ease-in; } - .footer-to-top:focus:after, .footer-to-top:hover:after { - opacity: 1; } - .footer-to-top:active:after { - opacity: 0; } - -.nav_wrapper { - max-width: 25rem; - margin: 0 auto; - display: block; } - @media screen and (max-width: 2200px) { - .nav_wrapper { - max-width: 15rem; } } - @media screen and (max-width: 1440px) { - .nav_wrapper { - max-width: 15rem; } } - @media screen and (max-width: 1024px) { - .nav_wrapper { - max-width: 100%; } } - -.nav__list { - list-style-type: none; - padding-left: 0; } - -.nav_wrapper > .nav__list > .nav__list-item { - margin-top: 2.5rem; } - .nav_wrapper > .nav__list > .nav__list-item .nav__list .nav__list-item { - margin-top: 0.25rem; } - -.nav__list-anchor--heading, .nav__list-anchor { - font-size: 1.1262702942rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - line-height: 1.6; - font-style: normal; - text-decoration: none; - color: black; - transform: translateX(0); - transition: transform 150ms ease, color 75ms ease; - display: inline-block; - padding: 0.25rem 0.5rem; - background-clip: padding-box; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - border-top-left-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; } - .nav__list-anchor--heading .nav__anchor-arrow, - .nav__list-anchor .nav__anchor-arrow { - right: -1rem; - display: inline-block; - opacity: 0; - transform: translateX(0); - transition: transform 200ms ease-in-out, opacity 75ms ease-in; } - .nav__list-anchor--heading:focus, .nav__list-anchor--heading:hover, - .nav__list-anchor:focus, - .nav__list-anchor:hover { - transform: translatex(0.75rem); - color: #9c75f3; - padding-right: 2rem; } - .nav__list-anchor--heading:focus .nav__anchor-arrow, .nav__list-anchor--heading:hover .nav__anchor-arrow, - .nav__list-anchor:focus .nav__anchor-arrow, - .nav__list-anchor:hover .nav__anchor-arrow { - opacity: 1; - transform: translateX(1.25rem); } - .nav__list-anchor--heading:focus, - .nav__list-anchor:focus { - outline: none; - background-color: rgba(156, 117, 243, 0.25); } - @media (prefers-color-scheme: dark) { - .nav__list-anchor--heading, .nav__list-anchor { - color: white; } } - html[color-scheme="dark"] .nav__list-anchor--heading, - html[color-scheme="dark"] .nav__list-anchor { - color: white; } - -.nav__list-anchor--heading { - font-size: 1.4254358411rem; - font-weight: 600; } - -.nav__list-anchor { - color: #8e8e8e; } - -.sr-only:not(#specificity-override) { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: .1rem; - margin: -.1rem; - overflow: hidden; - padding: 0; - position: absolute; - width: .1rem; - display: inline-block; - white-space: nowrap; - right: 0; } - -.type-intro__heading { - font-size: 4.6288477772rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - line-height: 1.6; - font-style: normal; - line-height: 1; } - -.type-intro__description { - font-size: 1.8040672364rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - line-height: 1.6; - font-style: normal; - max-width: 50rem; - padding-bottom: 12.5rem; - border-bottom: 0.0625rem solid #e3e3e3; } - @media (prefers-color-scheme: dark) { - .type-intro__description { - border-bottom-color: black; } } - html[color-scheme="dark"] .type-intro__description { - border-bottom-color: black; } - -.section-heading { - font-size: 3.6573612067rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - line-height: 1.6; - font-style: normal; - line-height: 1; } - -.section-description { - font-size: 1.4254358411rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - line-height: 1.6; - font-style: normal; } - -.content-section { - margin-bottom: 12.5rem; - display: block; } - -.section-type { - font-size: 1.1262702942rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 500; - line-height: 1.6; - font-style: normal; - margin-top: -3.125rem; - margin-bottom: 3rem; - letter-spacing: 0.05ex; } - .section-type--mixin { - color: crimson; } - .section-type--function { - color: green; } - -.section-preview { - display: block; - padding: 0; } - -.section-preview__pre { - background-clip: padding-box; - border-top-right-radius: 0.3125rem; - border-bottom-right-radius: 0.3125rem; - border-top-left-radius: 0.3125rem; - border-bottom-left-radius: 0.3125rem; - background-color: #e3e3e3; - padding: 0 2rem; - display: block; - margin-bottom: 2.5rem; } - @media (prefers-color-scheme: dark) { - .section-preview__pre { - background-color: #393939; - color: white; } } - html[color-scheme="dark"] .section-preview__pre { - background-color: #393939; - color: white; } - -.section-preview__code { - font-size: 1.0011291504rem; - font-family: "Andale Mono", AndaleMono, monospace; - font-weight: 400; - line-height: 1.6; - font-style: normal; - display: block; } - -table { - border-collapse: collapse; - width: 100%; } - -table caption:not(#specificity-override) { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: .1rem; - margin: -.1rem; - overflow: hidden; - padding: 0; - position: absolute; - width: .1rem; - display: inline-block; - white-space: nowrap; - right: 0; } - -tr th { - font-size: 1.0011291504rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 600; - line-height: 1.6; - font-style: normal; - text-align: left; } - tr th th + th { - margin-left: 2.5rem; } - -thead { - border-bottom: 0.125rem solid #e3e3e3; } - @media (prefers-color-scheme: dark) { - thead { - border-bottom-color: black; } } - html[color-scheme="dark"] thead { - border-bottom-color: black; } - -td { - font-size: 1.0011291504rem; - font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - line-height: 1.6; - font-style: normal; - padding: 0.5rem; } - -td code { - font-size: 1.0011291504rem; - font-family: "Andale Mono", AndaleMono, monospace; - font-weight: 400; - line-height: 1.6; - font-style: normal; } - -tr:nth-of-type(2n) { - background-color: #f1f1f1; } - @media (prefers-color-scheme: dark) { - tr:nth-of-type(2n) { - background-color: #0e0e0e; } } - html[color-scheme="dark"] tr:nth-of-type(2n) { - background-color: #0e0e0e; } - -/*# sourceMappingURL=style.processed.css.map */ diff --git a/docs/assets/style.scss b/docs/assets/style.scss deleted file mode 100644 index e6a28fe..0000000 --- a/docs/assets/style.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import '../../satfive.scss'; -@import 'styles/base'; -@import 'styles/header'; -@import 'styles/footer'; -@import 'styles/sidebar'; -@import 'styles/sections'; - -@import 'styles/tables'; \ No newline at end of file diff --git a/docs/assets/styles/_base.scss b/docs/assets/styles/_base.scss deleted file mode 100644 index b3ab641..0000000 --- a/docs/assets/styles/_base.scss +++ /dev/null @@ -1,40 +0,0 @@ -.wrapper { - width: 100%; - display: flex; - padding: 0; - margin: 0; - min-height: 100vh; - - @include max-width-viewport(md) { - flex-wrap: wrap; - } -} - -.content-wrapper { - background-color: get-color(white); - padding: set-size(2) set-size(50); - width: calc(100% - #{set-size(100)}); - - @include min-width-viewport(massive) { - width: 70%; - } - - @include dark-mode { - background-color: get-color(black, 1); - color: get-color(white); - } - - @include max-width-viewport(lg) { - padding: set-size(2) set-size(20); - } - - @include max-width-viewport(md) { - width: 100%; - } -} - -.skip-link { - @include min-width-viewport(md) { - @include screen-reader-only; - } -} \ No newline at end of file diff --git a/docs/assets/styles/_footer.scss b/docs/assets/styles/_footer.scss deleted file mode 100644 index b9a291a..0000000 --- a/docs/assets/styles/_footer.scss +++ /dev/null @@ -1,30 +0,0 @@ - - -hr { - border: none; - border-top: set-size(pixel) solid get-color(gray, 6); - margin: set-size(20) 0 set-size(10); -} - -.main-foot__logos { - padding: 0; - margin-bottom: set-size(4); - display: flex; - justify-content: flex-start; - align-items: center; - - img { - display: block; - height: set-size(14); - - } - - img + img { - margin-left: set-size(2); - } -} - -.main-foot p { - @include set-type(body, 5); - margin-bottom: set-size(10); -} \ No newline at end of file diff --git a/docs/assets/styles/_header.scss b/docs/assets/styles/_header.scss deleted file mode 100644 index 0a9ffff..0000000 --- a/docs/assets/styles/_header.scss +++ /dev/null @@ -1,130 +0,0 @@ -@keyframes heading-kaleidoscope { - 0% { - color: get-color(red); - } - 10% { - color: get-color(orange); - } - 20% { - color: get-color(goldenrod); - } - 30% { - color: get-color(yellowgreen); - } - 40% { - color: get-color(green); - } - 50% { - color: get-color(teal); - } - 60% { - color: get-color(blue); - } - 70% { - color: get-color(violet); - } - 80% { - color: get-color(pink); - } - 100% { - color: get-color(red); - } -} - - -@mixin heading-kaleidoscope-animation { - animation-name: heading-kaleidoscope; - animation-iteration-count: infinite; - animation-duration: 60s; -} - -.header { - border-bottom: set-size(pixel) solid get-color(grey, 7); - display: block; - margin-bottom: set-size(20); - - @include dark-mode { - border-bottom-color: get-color(black); - } -} - -.header-nav { - display: flex; - justify-content: space-between; - align-items: center; -} - -.header-heading { - @include set-type(display, 10, light); -} - -.header-anchor { - @include border-radius(4); - @include heading-kaleidoscope-animation; - text-decoration: none; - padding: set-size(2); - margin-left: set-px(-8); - - &:focus, - &:hover { - background-color: papayawhip; - - @include dark-mode { - background-color: get-color(red, -8); - } - } -} - -.header-nav__list { - list-style-type: none; - padding: 0; -} - -.header-nav__list-item { - display: inline-flex; - - & + & { - margin-left: set-size(10); - } -} - -.header-nav__anchor { - @include set-type(interface, 5); - text-decoration: none; - color: get-color(black, 0, 40); - text-transform: uppercase; - position: relative; - padding: set-size(micro); - transition: color 100ms ease; - - @include dark-mode { - color: get-color(white, 0, 60); - } - - &:after { - width: 100%; - position: relative; - bottom: 0; - height: set-size(micro); - content: ''; - background: linear-gradient(to right, get-color(orange, 4), get-color(pink, -1)); - display: block; - transform: scaleX(0); - transition: opacity 100ms ease, transform 150ms ease-in; - opacity: 0; - } - - &:focus, - &:hover { - color: get-color(black); - - @include dark-mode { - color: get-color(white); - } - - &:after { - opacity: 1; - transform: scaleX(1); - } - } -} \ No newline at end of file diff --git a/docs/assets/styles/_sections.scss b/docs/assets/styles/_sections.scss deleted file mode 100644 index 9547c3a..0000000 --- a/docs/assets/styles/_sections.scss +++ /dev/null @@ -1,67 +0,0 @@ -.type-intro__heading { - @include set-type(display, 18, medium); - @include set-type-line-height(xxs); -} - -.type-intro__description { - @include set-type(body, 10); - max-width: set-size(200); - padding-bottom: set-size(50); - border-bottom: set-size(pixel) solid get-color(grey, 7); - - @include dark-mode { - border-bottom-color: get-color(black); - } -} - -.section-heading { - @include set-type(display, 16, light); - @include set-type-line-height(xxs); -} - -.section-description { - @include set-type(text, 8); -} - -.content-section { - margin-bottom: set-size(50); - display: block; -} - -.section-type { - @include set-type(display, 6, medium); - margin-top: set-px(-50); - margin-bottom: set-size(12); - letter-spacing: 0.05ex; - - &--mixin { - color: get-color(crimson); - } - - &--function { - color: get-color(green); - } -} - -.section-preview { - display: block; - padding: 0; -} - -.section-preview__pre { - @include border-radius(5px); - background-color: get-color(black, 8); - padding: 0 set-size(8); - display: block; - margin-bottom: set-size(10); - - @include dark-mode { - background-color: get-color(white, -7); - color: get-color(white); - } -} - -.section-preview__code { - @include set-type(code, 5); - display: block; -} diff --git a/docs/assets/styles/_sidebar.scss b/docs/assets/styles/_sidebar.scss deleted file mode 100644 index c80d0d4..0000000 --- a/docs/assets/styles/_sidebar.scss +++ /dev/null @@ -1,119 +0,0 @@ -.sidebar { - background-color: get-color(grey, 8); - content: ''; - display: block; - width: set-size(100); - padding: set-size(10) 0; - - @include min-width-viewport(massive) { - width: 30%; - } - - @include dark-mode { - background-color: get-color(black); - } - - @include max-width-viewport(md) { - width: 100%; - padding: set-size(10) set-size(20); - } -} - -.footer-to-top { - @include set-type(display, 5, demi-bold); - @include set-type-line-height(xxs); - @include border-radius(6); - @include set-standard-shadow(5, $intensity-multiplier:30); - @include set-interactive-shadow(10, $intensity-multiplier:30); - text-decoration: none; - color: get-color(black); - background-color: get-color(white); - padding: set-size(3); - margin-top: set-size(10); - display: inline-block; -} - -.nav_wrapper { - max-width: set-size(100); - margin: 0 auto; - display: block; - - @include max-width-viewport(massive) { - max-width: set-size(60); - } - - @include max-width-viewport(lg) { - max-width: set-size(60); - } - - @include max-width-viewport(md) { - max-width: 100%; - } -} - -.nav__list { - list-style-type: none; - padding-left: 0; -} - -.nav_wrapper > .nav__list > .nav__list-item { - margin-top: set-size(10); - - & .nav__list .nav__list-item { - margin-top: set-size(1); - } -} - -.nav__list-anchor--heading, -.nav__list-anchor { - @include set-type(display, 6, book); - text-decoration: none; - color: get-color(black); - transform: translateX(0); - transition: transform 150ms ease, color 75ms ease; - display: inline-block; - padding: set-size(1) set-size(2); - @include border-radius(4); - - & .nav__anchor-arrow { - right: set-px(-16); - display: inline-block; - opacity: 0; - transform: translateX(0); - transition: transform 200ms ease-in-out, opacity 75ms ease-in; - } - - &:focus, - &:hover { - transform: translatex(set-size(3)); - color: get-color(primary); - padding-right: set-size(8); - - & .nav__anchor-arrow { - opacity: 1; - transform: translateX(set-size(5)); - } - } - - &:focus { - outline: none; - background-color: get-color(primary, 0, 25); - } - - @include dark-mode { - color: get-color(white); - } -} - -.nav__list-anchor--heading { - @include set-type-size(8); - @include set-type-weight(demi-bold); -} - -.nav__list-anchor { - color: get-color(black, 5); -} - -.sr-only { - @include screen-reader-only; -} \ No newline at end of file diff --git a/docs/assets/styles/_tables.scss b/docs/assets/styles/_tables.scss deleted file mode 100644 index 4092786..0000000 --- a/docs/assets/styles/_tables.scss +++ /dev/null @@ -1,42 +0,0 @@ -table { - border-collapse: collapse; - width: 100%; -} - -table caption { - @include screen-reader-only; -} - -tr th { - @include set-type(display, 5, demi-bold); - text-align: left; - - th + th { - margin-left: set-size(10); - } -} - -thead { - border-bottom: set-size(micro) solid get-color(grey, 7); - - @include dark-mode { - border-bottom-color: get-color(black); - } -} - -td { - @include set-type(interface, 5); - padding: set-size(2); -} - -td code { - @include set-type(code, 5); -} - -tr:nth-of-type(2n) { - background-color: get-color(grey, 8); - - @include dark-mode { - background-color: get-color(grey, -8); - } -} \ No newline at end of file diff --git a/docs/assets/voyager_meatball.svg b/docs/assets/voyager_meatball.svg deleted file mode 100644 index c9ac468..0000000 --- a/docs/assets/voyager_meatball.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/docs/assets/voyager_worm.svg b/docs/assets/voyager_worm.svg deleted file mode 100644 index 2cc4a69..0000000 --- a/docs/assets/voyager_worm.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/docs/configurations.html b/docs/configurations.html deleted file mode 100644 index 48e8dec..0000000 --- a/docs/configurations.html +++ /dev/null @@ -1,521 +0,0 @@ - - - - - - - - Saturn V - Configurations - - - - - - -
-
- - - -
-

Configurations

-

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

-
-
-

base units

-

foundational variables that dictate base units in Saturn V

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
-
-
-

Color

-

foundational variables that dictate base units in Saturn V

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 - 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 - get-color(soft-black).
$s5_color-focus-base#002effa color that is used for UI elements that are being focused. you can access via - get-color(focus).
$s5_color-info-base#002effa color that is used for UI elements that represent info. you can access via - get-color(info).
$s5_color-alert-basegolda color that is used for UI elements that represent alerts. you can access via - get-color(alert).
$s5_color-warning-base#f14400a color that is used for UI elements that represent warnings. you can access via - get-color(warning).
$s5_color-danger-base#dc1414a color that is used for UI elements that represent danger. you can access via - get-color(danger).
$s5_color-success-base#1aaa35a color that is used for UI elements that represent success. you can access via - get-color(success).
-
-
-

media-queries

-

viewport breakpoints for adaptive layouts

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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
-
-
-

Type-Stacks

-

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 - 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
-
-
-

Type-Weights

-

various type-weights.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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
-
-
-

Line Heights

-

various line-heights.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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
-
- -
- -
- - diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index 8a45a50..0000000 --- a/docs/index.html +++ /dev/null @@ -1,216 +0,0 @@ - - - - - - - - Saturn V - - - - - - -
-
- - - -
-

MK 2.0.0 β Introduction

-

A SASS powered springboard for styling the web. -

-
-
-

Getting Started

-

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

-

- 

-            
-@include 'saturnfive';
-            
-
-

-

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

-
-
-

Contribution Guide

-

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

- -
- -
- - diff --git a/docs/utilities.html b/docs/utilities.html deleted file mode 100644 index a7fad14..0000000 --- a/docs/utilities.html +++ /dev/null @@ -1,830 +0,0 @@ - - - - - - - - Saturn V - Configurations - - - - - - -
-
- - - -
-

Utilities

-

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

-
-
-

border-radius

-
mixin
-

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

-

- 

-            
-.example {
-  @include border-radius(5px, 'top-left bottom-right');
-}
-            
-
-

- - - - - - - - - - - - - - - - - - - - - -
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 - the four corner options.
-
-
-

color

-
function
-

A function for getting and manipulating pre-set colors.

-

- 

-            
-.example {
-  background-color: get-color(black);
-  color: get-color(white, -2, 40);
-}
-            
-
-

- - - - - - - - - - - - - - - - - - - - - - - - - - -
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: - 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. - The number of available shades can be tweaked using the $s5_color-scale-step-total - variable.
opacity100any number between 0-100 is valid.
-
-
-

dark-mode

-
mixin
-

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

-

- 

-            
-.example {
-  color: blue;
-
-  @include dark-mode {
-    outline: 1px solid red;
-  }
-
-  @include light-mode {
-    outline: 1px solid blue;
-  }
-}
-            
-
-

- - - - - - - - - - - - - - - - -
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
-
-
-

disable-text-select

-
mixin
-

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

-

- 

-            
-.example {
-  @include disable-text-select;
-}
-            
-
-

- - - - - - - - - - - - - - - - -
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
-
-
-

focusable-only

-
mixin
-

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

-

- 

-            
-.example {
-  @include focusable-only;
-}
-            
-
-

- - - - - - - - - - - - - - - - -
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
-
-
-

media-queries

-
mixin
-

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

-

- 

-            
-.example {
-  @include min-width-viewport(sm) {
-    // some styles
-  }
-
-  @include max-width-viewport(massive) {
-  // some styles
-  }
-}
-            
-
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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
-
-
-

rem calculator

-
function
-

A function for converting values from pixel to rem units. -

-

- 

-            
-.example {
-  padding: set-px(10) set-px(20);
-  margin: set-px(400);
-  margin-left: set-px(-200);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$sizenonethe size in pixels that you're intending to convert to rem.
-
-
-

screen-reader-only

-
mixin
-

A mixin for making content only accessible to screen readers. -

-

- 

-            
-.example {
-  @include screen-reader-only;
-  // whatever styles you want, the mixin will still override them.
-}
-            
-
-

- - - - - - - - - - - - - - - - -
Arguments available in the border-radius mixin
argumentDefault ValueDescription
no arguments
-
-
-

share-px-value

-
mixin
-

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

-

- 

-            
-.example {
-  @include share-px-value(margin-left, padding-left, 5px);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
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)
-
-
-

simple-gradient

-
mixin
-

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

-

- 

-            
-.example {
-  @include simple-gradient(red, dark);
-}
-            
-
-

- - - - - - - - - - - - - - - - - - - - - -
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
-
-
-

size-multiplier

-
function
-

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

-

- 

-            
-.example {
-  padding: set-size(2) set-size(4);
-  margin: set-size(pixel);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
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.
-
-
-

set-type

-
mixin
-

A mixin shorthand for setting a handful of type properties. -

-

- 

-            
-.example {
-  @include set-type(display, 8, bold, md, italic);
-}
-            
-
-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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. -
$weightbookthis sets the type weight. options include: thin, light, book, medium, demi-bold, bold, heavy, and black. -
$line-heightmdthis sets the line height. options include: xxs (1), xs, sm, md, lg, and xl. -
$stylenormalthis sets the type style. options include: normal, italic, and oblique -
-
-
-

set line-height

-
mixin
-

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

-

- 

-            
-.example {
-  @include set-type-line-height(xl);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
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.
-
-
-

set type-stack

-
mixin
-

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

-

- 

-            
-.example {
-  @include set-type-stack(interface);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
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.
-
-
-

set type-style

-
mixin
-

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

-

- 

-            
-.example {
-  @include set-type-style(italic);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
Arguments available in the border-radius mixin
argumentDefault ValueDescription
$stylenormalthis sets the type style. options include: normal, italic, and oblique
-
-
-

set type-weight

-
mixin
-

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

-

- 

-            
-.example {
-  @include set-type-weight(demi-bold);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
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 - black.
-
-
-

z index

-
mixin
-

A mixin for setting the z-index.

-

- 

-            
-.example {
-  @include zindex(modal);
-}
-            
-
-

- - - - - - - - - - - - - - - - -
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.
-
- -
- -
- - diff --git a/CODE_OF_CONDUCT.md b/misc/CODE_OF_CONDUCT.md similarity index 100% rename from CODE_OF_CONDUCT.md rename to misc/CODE_OF_CONDUCT.md diff --git a/LICENSE.md b/misc/LICENSE.md similarity index 100% rename from LICENSE.md rename to misc/LICENSE.md diff --git a/satfive/utilities/_border-radius.scss b/module/_border-radius.scss similarity index 63% rename from satfive/utilities/_border-radius.scss rename to module/_border-radius.scss index 0bc10d7..ca25681 100644 --- a/satfive/utilities/_border-radius.scss +++ b/module/_border-radius.scss @@ -1,26 +1,30 @@ +@use "strip-unit" as *; +@use "rem-calc" as *; +@use "sass:string" as *; + @mixin border-radius($radii:5px, $radii-location:'top-right bottom-right top-left bottom-left') { $radii: strip-unit($radii); $radii: set-px($radii); background-clip: padding-box; - @if str-index($radii-location, 'top-right') { + @if index($radii-location, 'top-right') { border-top-right-radius: $radii; } - @if str-index($radii-location, 'bottom-right') { + @if index($radii-location, 'bottom-right') { border-bottom-right-radius: $radii; } - @if str-index($radii-location, 'top-left') { + @if index($radii-location, 'top-left') { border-top-left-radius: $radii; } - @if str-index($radii-location, 'bottom-left') { + @if index($radii-location, 'bottom-left') { border-bottom-left-radius: $radii; } @if $radii-location == null { border-radius: $radii; } -} +} \ No newline at end of file diff --git a/module/_color-props.scss b/module/_color-props.scss new file mode 100644 index 0000000..ea7547f --- /dev/null +++ b/module/_color-props.scss @@ -0,0 +1,18 @@ +@use "../tokens/colors" as *; + +@mixin set-background() {} + +@mixin text-color($color, $step:0, $opacity:100) {} + +@mixin border-color() { + // future i18n support - https://developer.mozilla.org/en-US/docs/Web/CSS/border-block-color +} + +@mixin border-color-x-start() {} +@mixin border-color-x-end() {} +@mixin border-color-y-start() {} +@mixin border-color-y-end() {} + +@mixin outline-color($color, $step:0, $opacity:100) { + +} \ No newline at end of file diff --git a/satfive/utilities/_color.scss b/module/_color.scss similarity index 94% rename from satfive/utilities/_color.scss rename to module/_color.scss index 6f595c3..106c223 100644 --- a/satfive/utilities/_color.scss +++ b/module/_color.scss @@ -1,3 +1,8 @@ +@use "../tokens/colors" as *; +@use "strip-unit" as *; +@use "sass:map" as *; +@use "sass:math" as *; + @function get-color($color-input, $step:0, $opacity:100%) { // limits the range of accepted colors to just what's in the color map diff --git a/module/_dark-mode.scss b/module/_dark-mode.scss new file mode 100644 index 0000000..ff9c455 --- /dev/null +++ b/module/_dark-mode.scss @@ -0,0 +1,19 @@ +@mixin dark-mode { + @media (prefers-color-scheme: dark) { + @content; + } + + html[color-scheme="dark"] & { + @content; + } +} + +@mixin light-mode { + @media (prefers-color-scheme: light) { + @content; + } + + html[color-scheme="light"] & { + @content; + } +} \ No newline at end of file diff --git a/satfive/utilities/_debug.scss b/module/_debug.scss similarity index 99% rename from satfive/utilities/_debug.scss rename to module/_debug.scss index ae9a70d..7ccb327 100644 --- a/satfive/utilities/_debug.scss +++ b/module/_debug.scss @@ -1,3 +1,6 @@ +@use "strip-unit" as *; +@use "zindex" as *; + $s5_debug-tool--500grid: 'data:image/png;base64,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'; @mixin debug-overlay($type:grid, $location:local, $opacity:100%, $offset-x:0, $offset-y:0) { @@ -37,5 +40,4 @@ $s5_debug-tool--500grid: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfUAAAH1 mix-blend-mode: exclusion; } } -} - +} \ No newline at end of file diff --git a/satfive/utilities/_disable-text-select.scss b/module/_disable-text-select.scss similarity index 100% rename from satfive/utilities/_disable-text-select.scss rename to module/_disable-text-select.scss diff --git a/satfive/utilities/_focusable-only.scss b/module/_focusable-only.scss similarity index 61% rename from satfive/utilities/_focusable-only.scss rename to module/_focusable-only.scss index 55bd736..7ea2e83 100644 --- a/satfive/utilities/_focusable-only.scss +++ b/module/_focusable-only.scss @@ -1,3 +1,5 @@ +@use "zindex" as *; + @mixin focusable-only { &:not(#specificity-override) { position: absolute; @@ -10,7 +12,8 @@ overflow: hidden; &:active, - &:focus { + &:focus, + &:focus-within { @include zindex(focusable-only); width: auto; height: auto; @@ -19,4 +22,12 @@ overflow: visible; } } +} + +@mixin focusable-only-styles { + &:not(#specificity-override):active, + &:not(#specificity-override):focus, + &:not(#specificity-override):focus-within { + @content; + } } \ No newline at end of file diff --git a/satfive/utilities/_media-queries.scss b/module/_media-queries.scss similarity index 85% rename from satfive/utilities/_media-queries.scss rename to module/_media-queries.scss index 7cfe3da..69796cf 100644 --- a/satfive/utilities/_media-queries.scss +++ b/module/_media-queries.scss @@ -1,3 +1,5 @@ +@use "../tokens/media-queries" as *; + @mixin min-width-viewport($viewport) { @media screen and (min-width: get-viewport($viewport)) { @content; diff --git a/satfive/utilities/_pow.scss b/module/_pow.scss similarity index 89% rename from satfive/utilities/_pow.scss rename to module/_pow.scss index 6b6ceca..4cd54c1 100644 --- a/satfive/utilities/_pow.scss +++ b/module/_pow.scss @@ -1,6 +1,6 @@ // Power Function // via - https://www.bhalash.com/archives/13544805657 - +// duplicated by math.pow() in sass:math @function pow($number, $power) { $exponent: 1; diff --git a/module/_rem-calc.scss b/module/_rem-calc.scss new file mode 100644 index 0000000..93da541 --- /dev/null +++ b/module/_rem-calc.scss @@ -0,0 +1,7 @@ +@use "../tokens/type" as prop-type; +@use "strip-unit" as strip-unit; + +@function set-px($size) { + $remSize: $size / strip-unit.strip-unit(prop-type.$s5_type-root-size); // target / root type size + @return #{$remSize}rem; +} \ No newline at end of file diff --git a/module/_rice-paper.scss b/module/_rice-paper.scss new file mode 100644 index 0000000..ea3d8a0 --- /dev/null +++ b/module/_rice-paper.scss @@ -0,0 +1,40 @@ +@use "color" as *; +@use "size-multiplier" as *; +// @use "sass:color" as *; + +@mixin ricepaper($type:light,$intensity:4) { + + @if $type == 'light' { + @supports (-webkit-backdrop-filter: blur()) { + // & { + -webkit-backdrop-filter: saturate(360%) blur(#{set-size($intensity)}); + background-color: get-color(soft-white, 0, 80); + // } + } + + background-color: get-color(soft-white, 0, 96); + } + + @if $type == 'medium' { + @supports (-webkit-backdrop-filter: blur()) { + // & { + -webkit-backdrop-filter: saturate(360%) blur(#{set-size($intensity)}); + background-color: get-color(grey, 0, 80); + // } + } + + background-color: get-color(grey, 0, 97); + } + + @if $type == 'dark' { + @supports (-webkit-backdrop-filter: blur()) { + // & { + -webkit-backdrop-filter: saturate(360%) blur(#{set-size($intensity)}); + background-color: get-color(soft-black, 0, 85); + // } + } + + background-color: get-color(soft-black, 0, 93); + } + +} diff --git a/satfive/utilities/_screenreader-only.scss b/module/_screen-reader-only.scss similarity index 94% rename from satfive/utilities/_screenreader-only.scss rename to module/_screen-reader-only.scss index 5781b8f..095488f 100644 --- a/satfive/utilities/_screenreader-only.scss +++ b/module/_screen-reader-only.scss @@ -9,7 +9,7 @@ overflow: hidden; padding: 0; position: absolute; - width: .1rem; + width: .0001rem; display: inline-block; white-space: nowrap; right: 0; diff --git a/satfive/utilities/_shadows.scss b/module/_shadows.scss similarity index 82% rename from satfive/utilities/_shadows.scss rename to module/_shadows.scss index 55b1109..f7509e7 100644 --- a/satfive/utilities/_shadows.scss +++ b/module/_shadows.scss @@ -1,3 +1,7 @@ +@use "share-px-val"as *; +@use "rem-calc" as *; +@use "color" as *; + @function get-shadow($step:0, $color:black, $intensity-multiplier:1) { $box-shadow-props: (); @@ -104,3 +108,36 @@ @return $box-shadow-props; } + +@mixin set-standard-shadow($step:0, $color:black, $intensity-multiplier:1) { + box-shadow: get-shadow($step, $color, $intensity-multiplier); +} + +@mixin set-interactive-shadow($step:0, $color:black, $intensity-multiplier:1, $border-radius:0, $animation-speed:175ms, $animation-type:ease-in) { + position: relative; + box-sizing: border-box; + + &:after { + @include share-px-value(top, right, bottom, left, 0); + border-radius: set-px($border-radius); + box-shadow: get-shadow($step, $color, $intensity-multiplier); + content: ''; + opacity: 0; + position: absolute; + transition: opacity $animation-speed $animation-type; + } + + &:focus, + &:hover { + + &:after { + opacity: 1; + } + } + + &:active { + &:after { + opacity: 0; + } + } +} \ No newline at end of file diff --git a/satfive/utilities/_share-px-val.scss b/module/_share-px-val.scss similarity index 81% rename from satfive/utilities/_share-px-val.scss rename to module/_share-px-val.scss index b3721aa..5d481c7 100644 --- a/satfive/utilities/_share-px-val.scss +++ b/module/_share-px-val.scss @@ -1,3 +1,6 @@ +@use "strip-unit" as *; +@use "rem-calc" as *; + @mixin share-px-value($props...) { $grab-val: nth($props, -1); $unitless-val: strip-unit($grab-val); diff --git a/satfive/utilities/_simple-gradient.scss b/module/_simple-gradient.scss similarity index 98% rename from satfive/utilities/_simple-gradient.scss rename to module/_simple-gradient.scss index 432e5f0..8f99595 100644 --- a/satfive/utilities/_simple-gradient.scss +++ b/module/_simple-gradient.scss @@ -1,3 +1,5 @@ +@use "color" as *; + @function simple-gradient($gradient-color, $lightness:base) { $gradient-val: (); diff --git a/satfive/utilities/_size-multiplier.scss b/module/_size-multiplier.scss similarity index 82% rename from satfive/utilities/_size-multiplier.scss rename to module/_size-multiplier.scss index e8201ea..ef7a1ce 100644 --- a/satfive/utilities/_size-multiplier.scss +++ b/module/_size-multiplier.scss @@ -1,3 +1,7 @@ +@use "../tokens/base-units" as *; +@use "strip-unit" as *; +@use "rem-calc" as *; + @function set-size($multiplier:'1') { $unit: strip-unit($s5_foundation-unit-size); diff --git a/module/_spacing.scss b/module/_spacing.scss new file mode 100644 index 0000000..62b4176 --- /dev/null +++ b/module/_spacing.scss @@ -0,0 +1,409 @@ +@use "strip-unit" as *; +@use "rem-calc" as *; + +@mixin margin($margin-location: 'shorthand top right bottom left', $size...) { + + @if $margin-location == number { + @error '`#{$margin-location}` is not a valid value for $margin-location. Please set $margin-location to a string value. '; + } + @if $margin-location == undefined { + @error '`#{$margin-location}` is not a valid value for $margin-location. Please set $margin-location to a string value. '; + } + $margin-location: quote($margin-location); + + @if length($size)==1 { + + $size-1-output: 0 !default; + $size-1-val: nth($size, 1); + + @if type-of($size-1-val)=='string' { + $size-1-output: $size-1-val; + } + + @else if type-of($size-1-val)=='number' { + $size-1-unitless: strip-unit($size-1-val); + $size-1-rem: set-px($size-1-unitless); + $size-1-output: $size-1-rem; + } + + $margin-location: inspect($margin-location); + + @if str-index($margin-location, 'shorthand') { + margin: $size-1-output; + } + + @if str-index($margin-location, 'top') { + margin-top: $size-1-output; + } + + @if str-index($margin-location, 'right') { + margin-right: $size-1-output; + } + + @if str-index($margin-location, 'bottom') { + margin-bottom: $size-1-output; + } + + @if str-index($margin-location, 'left') { + margin-left: $size-1-output; + } + } + + @else if length($size)==2 { + + // checks for incorrect margin-location values + @if str-index($margin-location, 'top') { + @error '`#{$margin-location}` is not a valid value for $margin-location when two $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'right') { + @error '`#{$margin-location}` is not a valid value for $margin-location when two $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'bottom') { + @error '`#{$margin-location}` is not a valid value for $margin-location when two $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'left') { + @error '`#{$margin-location}` is not a valid value for $margin-location when two $size values are set. please set $margin-location to `shorthand`. '; + } + + $size-1-output: 0 !default; + $size-1-val: nth($size, 1); + + @if type-of($size-1-val)=='string' { + $size-1-output: $size-1-val; + } + + @else if type-of($size-1-val)=='number' { + $size-1-unitless: strip-unit($size-1-val); + $size-1-rem: set-px($size-1-unitless); + $size-1-output: $size-1-rem; + } + + $size-2-output: 0 !default; + $size-2-val: nth($size, 2); + + @if type-of($size-2-val)=='string' { + $size-2-output: $size-2-val; + } + + @else if type-of($size-2-val)=='number' { + $size-2-unitless: strip-unit($size-2-val); + $size-2-rem: set-px($size-2-unitless); + $size-2-output: $size-2-rem; + } + + + @if str-index($margin-location, 'shorthand') { + margin: $size-1-output $size-2-output; + } + } + + @else if length($size)==3 { + + // checks for incorrect margin-location values + @if str-index($margin-location, 'top') { + @error '`#{$margin-location}` is not a valid value for $margin-location when three $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'right') { + @error '`#{$margin-location}` is not a valid value for $margin-location when three $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'bottom') { + @error '`#{$margin-location}` is not a valid value for $margin-location when three $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'left') { + @error '`#{$margin-location}` is not a valid value for $margin-location when three $size values are set. please set $margin-location to `shorthand`. '; + } + + $size-1-output: 0 !default; + $size-1-val: nth($size, 1); + + @if type-of($size-1-val)=='string' { + $size-1-output: $size-1-val; + } + + @else if type-of($size-1-val)=='number' { + $size-1-unitless: strip-unit($size-1-val); + $size-1-rem: set-px($size-1-unitless); + $size-1-output: $size-1-rem; + } + + $size-2-output: 0 !default; + $size-2-val: nth($size, 2); + + @if type-of($size-2-val)=='string' { + $size-2-output: $size-2-val; + } + + @else if type-of($size-2-val)=='number' { + $size-2-unitless: strip-unit($size-2-val); + $size-2-rem: set-px($size-2-unitless); + $size-2-output: $size-2-rem; + } + + $size-3-output: 0 !default; + $size-3-val: nth($size, 3); + + @if type-of($size-3-val)=='string' { + $size-3-output: $size-3-val; + } + + @else if type-of($size-3-val)=='number' { + $size-3-unitless: strip-unit($size-3-val); + $size-3-rem: set-px($size-3-unitless); + $size-3-output: $size-3-rem; + } + + + @if str-index($margin-location, 'shorthand') { + margin: $size-1-output $size-2-output $size-3-output; + } + } + + @else if length($size)==4 { + + // checks for incorrect margin-location values + @if str-index($margin-location, 'top') { + @error '`#{$margin-location}` is not a valid value for $margin-location when four $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'right') { + @error '`#{$margin-location}` is not a valid value for $margin-location when four $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'bottom') { + @error '`#{$margin-location}` is not a valid value for $margin-location when four $size values are set. please set $margin-location to `shorthand`. '; + } + + @if str-index($margin-location, 'left') { + @error '`#{$margin-location}` is not a valid value for $margin-location when four $size values are set. please set $margin-location to `shorthand`. '; + } + + $size-1-output: 0 !default; + $size-1-val: nth($size, 1); + + @if type-of($size-1-val)=='string' { + $size-1-output: $size-1-val; + } + + @else if type-of($size-1-val)=='number' { + $size-1-unitless: strip-unit($size-1-val); + $size-1-rem: set-px($size-1-unitless); + $size-1-output: $size-1-rem; + } + + $size-2-output: 0 !default; + $size-2-val: nth($size, 2); + + @if type-of($size-2-val)=='string' { + $size-2-output: $size-2-val; + } + + @else if type-of($size-2-val)=='number' { + $size-2-unitless: strip-unit($size-2-val); + $size-2-rem: set-px($size-2-unitless); + $size-2-output: $size-2-rem; + } + + $size-3-output: 0 !default; + $size-3-val: nth($size, 3); + + @if type-of($size-3-val)=='string' { + $size-3-output: $size-3-val; + } + + @else if type-of($size-3-val)=='number' { + $size-3-unitless: strip-unit($size-3-val); + $size-3-rem: set-px($size-3-unitless); + $size-3-output: $size-3-rem; + } + + $size-4-output: 0 !default; + $size-4-val: nth($size, 4); + + @if type-of($size-4-val)=='string' { + $size-4-output: $size-4-val; + } + + @else if type-of($size-4-val)=='number' { + $size-4-unitless: strip-unit($size-4-val); + $size-4-rem: set-px($size-4-unitless); + $size-4-output: $size-4-rem; + } + + + @if str-index($margin-location, 'shorthand') { + margin: $size-1-output $size-2-output $size-3-output $size-4-output; + } + } + + @else if length($size)>4 { + $size-count: length($size) - 4; + @error 'You have included #{$size-count} too many size arguments. please restrict `$size` to at the most four values'; + } +} + +@mixin padding($padding-location: 'shorthand top right bottom left', $size...) { + + @if $padding-location == number { + @error '`#{$padding-location}` is not a valid value for $padding-location. Please set $padding-location to a string value. '; + } + @if $padding-location == undefined { + @error '`#{$padding-location}` is not a valid value for $padding-location. Please set $padding-location to a string value. '; + } + $padding-location: quote($padding-location); + + @if length($size)==1 { + $size-val: nth($size, 1); + $size-val: strip-unit($size-val); + $size-rem: set-px($size-val); + $size-output: $size-rem; + + @if str-index($padding-location, 'shorthand') { + padding: $size-output; + } + + @if str-index($padding-location, 'top') { + padding-top: $size-output; + } + + @if str-index($padding-location, 'right') { + padding-right: $size-output; + } + + @if str-index($padding-location, 'bottom') { + padding-bottom: $size-output; + } + + @if str-index($padding-location, 'left') { + padding-left: $size-output; + } + } + + @else if length($size)==2 { + + // checks for incorrect padding-location values + @if str-index($padding-location, 'top') { + @error '`#{$padding-location}` is not a valid value for $padding-location when two $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'right') { + @error '`#{$padding-location}` is not a valid value for $padding-location when two $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'bottom') { + @error '`#{$padding-location}` is not a valid value for $padding-location when two $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'left') { + @error '`#{$padding-location}` is not a valid value for $padding-location when two $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'shorthand') { + $top-bottom-val: nth($size, 1); + $top-bottom-strip: strip-unit($top-bottom-val); + $top-bottom-rem: set-px($top-bottom-strip); + $top-bottom-output: $top-bottom-rem; + + $left-right-val: nth($size, 2); + $left-right-strip: strip-unit($left-right-val); + $left-right-rem: set-px($left-right-strip); + $left-right-output: $left-right-rem; + + + padding: $top-bottom-output $left-right-output; + } + } + + @else if length($size)==3 { + + // checks for incorrect padding-location values + @if str-index($padding-location, 'top') { + @error '`#{$padding-location}` is not a valid value for $padding-location when three $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'right') { + @error '`#{$padding-location}` is not a valid value for $padding-location when three $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'bottom') { + @error '`#{$padding-location}` is not a valid value for $padding-location when three $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'left') { + @error '`#{$padding-location}` is not a valid value for $padding-location when three $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'shorthand') { + $top-val: nth($size, 1); + $top-strip: strip-unit($top-val); + $top-rem: set-px($top-strip); + $top-output: $top-rem; + + $left-right-val: nth($size, 2); + $left-right-strip: strip-unit($left-right-val); + $left-right-rem: set-px($left-right-strip); + $left-right-output: $left-right-rem; + + $bottom-val: nth($size, 3); + $bottom-strip: strip-unit($bottom-val); + $bottom-rem: set-px($bottom-strip); + $bottom-output: $bottom-rem; + + padding: $top-output $left-right-output $bottom-output; + } + } + + @else if length($size)==4 { + + // checks for incorrect padding-location values + @if str-index($padding-location, 'top') { + @error '`#{$padding-location}` is not a valid value for $padding-location when four $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'right') { + @error '`#{$padding-location}` is not a valid value for $padding-location when four $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'bottom') { + @error '`#{$padding-location}` is not a valid value for $padding-location when four $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'left') { + @error '`#{$padding-location}` is not a valid value for $padding-location when four $size values are set. please set $padding-location to `shorthand`. '; + } + + @if str-index($padding-location, 'shorthand') { + $top-val: nth($size, 1); + $top-strip: strip-unit($top-val); + $top-rem: set-px($top-strip); + $top-output: $top-rem; + + $right-val: nth($size, 2); + $right-strip: strip-unit($right-val); + $right-rem: set-px($right-strip); + $right-output: $right-rem; + + $bottom-val: nth($size, 3); + $bottom-strip: strip-unit($bottom-val); + $bottom-rem: set-px($bottom-strip); + $bottom-output: $bottom-rem; + + $left-val: nth($size, 4); + $left-strip: strip-unit($left-val); + $left-rem: set-px($left-strip); + $left-output: $left-rem; + + padding: $top-output $right-output $bottom-output $left-output; + } + } + + @else if length($size)>4 { + $size-count: length($size) - 4; + @error 'You have included #{$size-count} too many size arguments. please restrict `$size` to at the most four values'; + } +} diff --git a/satfive/utilities/_strip-unit.scss b/module/_strip-unit.scss similarity index 52% rename from satfive/utilities/_strip-unit.scss rename to module/_strip-unit.scss index d663f11..1ea0c17 100644 --- a/satfive/utilities/_strip-unit.scss +++ b/module/_strip-unit.scss @@ -4,11 +4,11 @@ // output: attribute: [unitless-number]; @function strip-unit($number) { - @if type-of($number)=='number'and not unitless($number) { - @return $number / ($number * 0 + 1); - } + @if type-of($number)=='number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } - @return $number; + @return $number; } // I think I originally got this either from Smashing Magazine or from Dropbox's Scooter project that's now depracated \ No newline at end of file diff --git a/module/_type-all.scss b/module/_type-all.scss new file mode 100644 index 0000000..bfa9ded --- /dev/null +++ b/module/_type-all.scss @@ -0,0 +1,74 @@ +@forward "type-size"; +@forward "type-stack"; +@forward "type-weight"; +@forward "type-lineheight"; +@forward "type-style"; + +@use "type-size" as *; +@use "type-stack" as *; +@use "type-weight" as *; +@use "type-lineheight" as *; +@use "type-style" as *; + +@mixin set-type($type-stack:body, $font-scale:5, $weight:book, $style:normal) { + @include set-type-stack($type-stack); + @include set-type-size($font-scale); + @include set-type-weight($weight); + @include set-type-style($style); + + // Line Heights should generally be larger + // when the characters per line is longer and + // smaller when the characters per line is shorter + // for greater legibility + // + // users can override this by using the + // `set-type-line-height` mixin themselves + // + @if $type-stack == monospace { + @include set-type-line-height(md); + } + + @if $type-stack == sans-serif { + @include set-type-line-height(md); + } + + @if $type-stack == serif { + @include set-type-line-height(md); + } + + @if $type-stack == display { + @include set-type-line-height(sm); + } + + @if $type-stack == masthead { + @include set-type-line-height(xs); + } + + @if $type-stack == body { + @include set-type-line-height(md); + } + + @if $type-stack == text { + @include set-type-line-height(md); + } + + @if $type-stack == code { + @include set-type-line-height(md); + } + + @if $type-stack == interface { + @include set-type-line-height(xxs); + } + + @if $type-stack == caption { + @include set-type-line-height(lg); + } + + @if $type-stack == aside { + @include set-type-line-height(md); + } + + @if $type-stack == blockquote { + @include set-type-line-height(sm); + } +} \ No newline at end of file diff --git a/satfive/patterns/_set-type-lineheight.scss b/module/_type-lineheight.scss similarity index 74% rename from satfive/patterns/_set-type-lineheight.scss rename to module/_type-lineheight.scss index 93d4bd5..8f07c18 100644 --- a/satfive/patterns/_set-type-lineheight.scss +++ b/module/_type-lineheight.scss @@ -1,3 +1,5 @@ +@use "../tokens/type" as *; + @mixin set-type-line-height($line-height:md) { line-height: get-lineheight($line-height); -} \ No newline at end of file +} diff --git a/satfive/utilities/_type-scale.scss b/module/_type-scale.scss similarity index 55% rename from satfive/utilities/_type-scale.scss rename to module/_type-scale.scss index 12f639c..94c51e6 100644 --- a/satfive/utilities/_type-scale.scss +++ b/module/_type-scale.scss @@ -1,9 +1,14 @@ +@use "../tokens/type" as *; +@use "strip-unit" as *; +@use "sass:math"; +@use "rem-calc" as *; + // Font size calculator @function type-scale($step) { $stripped-base: (strip-unit($s5_type-scale-base)); - $font-size-calc: ($stripped-base * pow($s5_type-scale-modifier, (($step - 1)))); + $font-size-calc: ($stripped-base * math.pow($s5_type-scale-modifier, (($step - 1)))); $rounded-font-size: round($font-size-calc); $rem-font-size: (set-px($rounded-font-size)); @return $rem-font-size; -} +} \ No newline at end of file diff --git a/satfive/patterns/_set-type-size.scss b/module/_type-size.scss similarity index 73% rename from satfive/patterns/_set-type-size.scss rename to module/_type-size.scss index e094f1f..84eafc4 100644 --- a/satfive/patterns/_set-type-size.scss +++ b/module/_type-size.scss @@ -1,3 +1,5 @@ +@use "type-scale" as *; + @mixin set-type-size($type-scale:5) { font-size: type-scale($type-scale); -} \ No newline at end of file +} diff --git a/module/_type-stack.scss b/module/_type-stack.scss new file mode 100644 index 0000000..cd702d0 --- /dev/null +++ b/module/_type-stack.scss @@ -0,0 +1,5 @@ +@use "../tokens/type" as *; + +@mixin set-type-stack($context:body) { + font-family: get-typestack($context); +} diff --git a/module/_type-style.scss b/module/_type-style.scss new file mode 100644 index 0000000..ee9428a --- /dev/null +++ b/module/_type-style.scss @@ -0,0 +1,13 @@ +@mixin set-type-style($style:normal) { + @if $style==normal { + font-style: normal; + } + + @else if $style==italic { + font-style: italic; + } + + @else if $style==oblique { + font-style: oblique; + } +} \ No newline at end of file diff --git a/module/_type-weight.scss b/module/_type-weight.scss new file mode 100644 index 0000000..61c04ec --- /dev/null +++ b/module/_type-weight.scss @@ -0,0 +1,5 @@ +@use "../tokens/type" as *; + +@mixin set-type-weight($weight:book) { + font-weight: get-typeweight($weight); +} \ No newline at end of file diff --git a/satfive/utilities/_z-index.scss b/module/_zindex.scss similarity index 51% rename from satfive/utilities/_z-index.scss rename to module/_zindex.scss index f661996..4c3cc60 100644 --- a/satfive/utilities/_z-index.scss +++ b/module/_zindex.scss @@ -1,6 +1,10 @@ +@use "../tokens/zindex" as *; +@use "sass:string" as *; +@use "sass:list" as list; + @function get-zindex($object) { - @if index($s5_z-order, $object) { - @return (length($s5_z-order) - index($s5_z-order, $object))+1; + @if list.index($s5_z-order, $object) { + @return (list.length($s5_z-order) - list.index($s5_z-order, $object))+1; } @else { diff --git a/package.json b/package.json index 54fe650..efc50c2 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "@voyagerstudio/saturnfive", - "version": "2.0.4", + "version": "3.0.0-beta.1", "description": "A design system springboard.", "main": "_saturnfive.scss", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "compile-testbed": "sass --watch testbed/scss/style.scss:testbed/style.css" }, "repository": { "type": "git", diff --git a/satfive/_configs.scss b/satfive/_configs.scss deleted file mode 100644 index a13b8a2..0000000 --- a/satfive/_configs.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import 'configs/base-units'; -@import 'configs/color'; -@import 'configs/media-queries'; -@import 'configs/typography'; -@import 'configs/z-index'; \ No newline at end of file diff --git a/satfive/_patterns.scss b/satfive/_patterns.scss deleted file mode 100644 index 7720bbd..0000000 --- a/satfive/_patterns.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'patterns/shadows'; -@import 'patterns/set-type-lineheight'; -@import 'patterns/set-type-size'; -@import 'patterns/set-type-stack'; -@import 'patterns/set-type-style'; -@import 'patterns/set-type-weight'; -@import 'patterns/set-type'; \ No newline at end of file diff --git a/satfive/_resets.scss b/satfive/_resets.scss deleted file mode 100644 index c1eed28..0000000 --- a/satfive/_resets.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'resets/base'; -@import 'resets/accessibility'; \ No newline at end of file diff --git a/satfive/_tokens.scss b/satfive/_tokens.scss deleted file mode 100644 index 420092c..0000000 --- a/satfive/_tokens.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'tokens/color'; -@import 'tokens/media-queries'; -@import 'tokens/typography'; -@import 'tokens/typography'; \ No newline at end of file diff --git a/satfive/_utilities.scss b/satfive/_utilities.scss deleted file mode 100644 index 2c3a0dc..0000000 --- a/satfive/_utilities.scss +++ /dev/null @@ -1,19 +0,0 @@ -// P1 -@import 'utilities/pow'; // Power Function -@import 'utilities/rem-calc'; -@import 'utilities/strip-unit'; -@import 'utilities/z-index'; -@import 'utilities/share-px-val'; -@import 'utilities/color'; -@import 'utilities/darkmode'; -@import 'utilities/disable-text-select'; -@import 'utilities/focusable-only'; -@import 'utilities/screenreader-only'; -// P2 -@import 'utilities/size-multiplier'; -@import 'utilities/type-scale'; -@import 'utilities/media-queries'; -@import 'utilities/debug'; -@import 'utilities/simple-gradient'; -@import 'utilities/border-radius'; -@import 'utilities/shadows'; \ No newline at end of file diff --git a/satfive/configs/_color.scss b/satfive/configs/_color.scss deleted file mode 100644 index f3bbea7..0000000 --- a/satfive/configs/_color.scss +++ /dev/null @@ -1,20 +0,0 @@ -// Brand Colors -$s5_color-brand-color-1: #9C75F3 !default; -$s5_color-brand-color-2: mediumblue !default; -$s5_color-brand-color-3: #a10000 !default; - -// Greyscale Base Colors -$s5_color-soft-white: #FAFCFC !default; -$s5_color-soft-black: #0D0C0C !default; - -// Contextual Base Colors -$s5_color-focus-base: #002eff !default; -$s5_color-info-base: #002eff !default; -$s5_color-alert-base: gold !default; -$s5_color-warning-base: #f14400 !default; -$s5_color-danger-base: #dc1414 !default; -$s5_color-success-base: #1aaa35 !default; - - -// Color Function Features -$s5_color-scale-step-total: 19 !default; // must be an odd number \ No newline at end of file diff --git a/satfive/configs/_media-queries.scss b/satfive/configs/_media-queries.scss deleted file mode 100644 index 4cd251b..0000000 --- a/satfive/configs/_media-queries.scss +++ /dev/null @@ -1,7 +0,0 @@ -$s5_viewport-micro: 320px !default; -$s5_viewport-xs: 640px !default; -$s5_viewport-sm: 768px !default; -$s5_viewport-md: 1024px !default; -$s5_viewport-lg: 1440px !default; -$s5_viewport-xl: 1600px !default; -$s5_viewport-massive: 2200px !default; \ No newline at end of file diff --git a/satfive/configs/_typography.scss b/satfive/configs/_typography.scss deleted file mode 100644 index 1552192..0000000 --- a/satfive/configs/_typography.scss +++ /dev/null @@ -1,39 +0,0 @@ -// Fontstacks -$s5_typestack--monospace: "Andale Mono",AndaleMono,monospace !default; -$s5_typestack--sans-serif: sans-serif !default; -$s5_typestack--serif: serif !default; - -$s5_typestack--display: BlinkMacSystemFont,-apple-system,"Roboto","Droid Sans","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default; -$s5_typestack--masthead: $s5_typestack--display !default; -$s5_typestack--body: $s5_typestack--display !default; -$s5_typestack--text: $s5_typestack--body !default; -$s5_typestack--code: $s5_typestack--monospace !default; -$s5_typestack--interface: $s5_typestack--display !default; - -$s5_typestack--caption: $s5_typestack--display !default; -$s5_typestack--aside: $s5_typestack--display !default; -$s5_typestack--blockquote: $s5_typestack--display !default; - -// Font Weights -$s5_weight--thin: 100 !default; -$s5_weight--extra-light: 200 !default; -$s5_weight--light: 300 !default; -$s5_weight--book: 400 !default; -$s5_weight--medium: 500 !default; -$s5_weight--demi-bold: 600 !default; -$s5_weight--bold: 700 !default; -$s5_weight--heavy: 800 !default; -$s5_weight--black: 900 !default; - -// Line Heights -$s5_line-height-xxs: 1 !default; -$s5_line-height-xs: 1.2 !default; -$s5_line-height-sm: 1.4 !default; -$s5_line-height-md: 1.6 !default; -$s5_line-height-lg: 2 !default; -$s5_line-height-xl: 3 !default; - -// Type Scale Modifiers -$s5_type-scale-modifier: 1.125 !default; -$s5_type-scale-base: 10px !default; -$s5_type-root-size: 16px !default; \ No newline at end of file diff --git a/satfive/configs/_z-index.scss b/satfive/configs/_z-index.scss deleted file mode 100644 index 22aafb9..0000000 --- a/satfive/configs/_z-index.scss +++ /dev/null @@ -1,10 +0,0 @@ -$s5_zindex-order: -"example-one", -"example-two", -"example-three" -!default; - -$s5_permanent-z-order: "debug", "focusable-only"; - - -$s5_z-order: join($s5_permanent-z-order, $s5_zindex-order); \ No newline at end of file diff --git a/satfive/patterns/_set-type-stack.scss b/satfive/patterns/_set-type-stack.scss deleted file mode 100644 index 94f4f62..0000000 --- a/satfive/patterns/_set-type-stack.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin set-type-stack($context:body) { - font-family: get-typestack($context); -} \ No newline at end of file diff --git a/satfive/patterns/_set-type-style.scss b/satfive/patterns/_set-type-style.scss deleted file mode 100644 index 8e6485e..0000000 --- a/satfive/patterns/_set-type-style.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin set-type-style($style:normal) { - @if $style==normal { - font-style: normal; - } - - @else if $style==italic { - font-style: italic; - } - - @else if $style==oblique { - font-style: oblique; - } -} \ No newline at end of file diff --git a/satfive/patterns/_set-type-weight.scss b/satfive/patterns/_set-type-weight.scss deleted file mode 100644 index a0e0ea9..0000000 --- a/satfive/patterns/_set-type-weight.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin set-type-weight($weight:book) { - font-weight: get-typeweight($weight); -} \ No newline at end of file diff --git a/satfive/patterns/_set-type.scss b/satfive/patterns/_set-type.scss deleted file mode 100644 index 7509f50..0000000 --- a/satfive/patterns/_set-type.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin set-type($type-stack:body, $font-scale:5, $weight:book, $line-height:md, $style:normal) { - @include set-type-size($font-scale); - @include set-type-stack($type-stack); - @include set-type-weight($weight); - @include set-type-line-height($line-height); - @include set-type-style($style); -} \ No newline at end of file diff --git a/satfive/patterns/_shadows.scss b/satfive/patterns/_shadows.scss deleted file mode 100644 index 918d773..0000000 --- a/satfive/patterns/_shadows.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin set-standard-shadow($step:0, $color:black, $intensity-multiplier:1) { - box-shadow: get-shadow($step, $color, $intensity-multiplier); -} - -@mixin set-interactive-shadow($step:0, $color:black, $intensity-multiplier:1, $border-radius:0, $animation-speed:75ms, $animation-type:ease-in) { - position: relative; - box-sizing: border-box; - - &:after { - @include share-px-value(top, right, bottom, left, 0); - border-radius: set-px($border-radius); - box-shadow: get-shadow($step, $color, $intensity-multiplier); - content: ''; - opacity: 0; - position: absolute; - transition: opacity $animation-speed $animation-type; - } - - &:focus, - &:hover { - - &:after { - opacity: 1; - } - } - - &:active { - &:after { - opacity: 0; - } - } -} \ No newline at end of file diff --git a/satfive/resets/_accessibility.scss b/satfive/resets/_accessibility.scss deleted file mode 100644 index 4116178..0000000 --- a/satfive/resets/_accessibility.scss +++ /dev/null @@ -1,17 +0,0 @@ -[disabled], -[aria-disabled="true"] { - @include disable-text-select; - opacity: 0.5; - cursor: not-allowed; - text-decoration: none; - pointer-events: none; -} - -// Hiding Elements -[hidden] { - display: none; -} - -[aria-hidden="true"] { - visibility: hidden; -} \ No newline at end of file diff --git a/satfive/resets/_base.scss b/satfive/resets/_base.scss deleted file mode 100644 index fa1586e..0000000 --- a/satfive/resets/_base.scss +++ /dev/null @@ -1,13 +0,0 @@ -html, -body { - box-sizing: border-box; - font-size: 100%; - margin: 0; - padding: 0; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} \ No newline at end of file diff --git a/satfive/tokens/_color.scss b/satfive/tokens/_color.scss deleted file mode 100644 index 723bc8c..0000000 --- a/satfive/tokens/_color.scss +++ /dev/null @@ -1,166 +0,0 @@ -$s5_map--color: ( // pinks -pink: pink, -lightpink: lightpink, -hotpink: hotpink, -deeppink: deeppink, -palevioletred: palevioletred, -mediumvioletred: mediumvioletred, -// reds -lightsalmon: lightsalmon, -salmon: salmon, -darksalmon: darksalmon, -lightcoral: lightcoral, -indianred: indianred, -crimson: crimson, -firebrick: firebrick, -darkred: darkred, -red: red, -//oranges -orangered: orangered, -tomato: tomato, -coral: coral, -darkorange: darkorange, -orange: orange, -// yellows -yellow: yellow, -lightyellow: lightyellow, -lemonchiffon: lemonchiffon, -lightgoldenrodyellow: lightgoldenrodyellow, -papayawhip: papayawhip, -moccasin: moccasin, -peachpuff: peachpuff, -palegoldenrod: palegoldenrod, -khaki: khaki, -darkkhaki: darkkhaki, -gold: gold, -// browns -cornsilk: cornsilk, -blanchedalmond: blanchedalmond, -bisque: bisque, -navajowhite: navajowhite, -wheat: wheat, -burlywood: burlywood, -tan: tan, -rosybrown: rosybrown, -sandybrown: sandybrown, -goldenrod: goldenrod, -darkgoldenrod: darkgoldenrod, -peru: peru, -chocolate: chocolate, -saddlebrown: saddlebrown, -sienna: sienna, -brown: brown, -maroon: maroon, -// greens -darkolivegreen: darkolivegreen, -olive: olive, -olivedrab: olivedrab, -yellowgreen: yellowgreen, -limegreen: limegreen, -lime: lime, -lawngreen: lawngreen, -chartreuse: chartreuse, -greenyellow: greenyellow, -springgreen: springgreen, -mediumspringgreen: mediumspringgreen, -lightgreen: lightgreen, -palegreen: palegreen, -darkseagreen: darkseagreen, -mediumaquamarine: mediumaquamarine, -mediumseagreen: mediumseagreen, -seagreen: seagreen, -forestgreen: forestgreen, -green: green, -darkgreen: darkgreen, -// cyans -cyan: cyan, -'aqua': aqua, -lightcyan: lightcyan, -paleturquoise: paleturquoise, -aquamarine: aquamarine, -turquoise: turquoise, -mediumturquoise: mediumturquoise, -darkturquoise: darkturquoise, -lightseagreen: lightseagreen, -cadetblue: cadetblue, -darkcyan: darkcyan, -teal: teal, -// blues -lightsteelblue: lightsteelblue, -powderblue: powderblue, -lightblue: lightblue, -skyblue: skyblue, -lightskyblue: lightskyblue, -deepskyblue: deepskyblue, -dodgerblue: dodgerblue, -cornflowerblue: cornflowerblue, -steelblue: steelblue, -royalblue: royalblue, -blue: blue, -mediumblue: mediumblue, -darkblue: darkblue, -navy: navy, -midnightblue: midnightblue, -// purples -lavender: lavender, -thistle: thistle, -plum: plum, -violet: violet, -orchid: orchid, -fuchsia: fuchsia, -'magenta': magenta, -mediumorchid: mediumorchid, -mediumpurple: mediumpurple, -blueviolet: blueviolet, -darkviolet: darkviolet, -darkorchid: darkorchid, -rebeccapurple: rebeccapurple, -darkmagenta: darkmagenta, -purple: purple, -indigo: indigo, -darkslateblue: darkslateblue, -slateblue: slateblue, -mediumslateblue: mediumslateblue, -// lights -white: white, -snow: snow, -honeydew: honeydew, -mintcream: mintcream, -azure: azure, -aliceblue: aliceblue, -ghostwhite: ghostwhite, -whitesmoke: whitesmoke, -seashell: seashell, -beige: beige, -oldlace: oldlace, -floralwhite: floralwhite, -ivory: ivory, -antiquewhite: antiquewhite, -linen: linen, -lavenderblush: lavenderblush, -mistyrose: mistyrose, -// darks -gainsboro: gainsboro, -lightgray: lightgray, -silver: silver, -darkgray: darkgray, -gray: gray, -dimgray: dimgray, -lightslategray: lightslategray, -slategray: slategray, -darkslategray: darkslategray, -black: black, -// custom -primary: $s5_color-brand-color-1, -secondary: $s5_color-brand-color-2, -tertiary: $s5_color-brand-color-3, -soft-white: $s5_color-soft-white, -soft-black: $s5_color-soft-black, -// contextual -focus: $s5_color-focus-base, -info: $s5_color-info-base, -alert: $s5_color-alert-base, -warning: $s5_color-warning-base, -danger: $s5_color-danger-base, -success: $s5_color-success-base, -) !default; \ No newline at end of file diff --git a/satfive/tokens/_typography.scss b/satfive/tokens/_typography.scss deleted file mode 100644 index 1ea6700..0000000 --- a/satfive/tokens/_typography.scss +++ /dev/null @@ -1,71 +0,0 @@ -$s5_map--typestack: ( - monospace: $s5_typestack--monospace, - sans-serif: $s5_typestack--sans-serif, - serif: $s5_typestack--serif, - display: $s5_typestack--display, - masthead: $s5_typestack--masthead, - body: $s5_typestack--body, - text: $s5_typestack--text, - code: $s5_typestack--code, - interface: $s5_typestack--interface, - caption: $s5_typestack--caption, - aside: $s5_typestack--aside, - blockquote: $s5_typestack--blockquote -); - - -@function get-typestack($typestack) { - @if map-has-key($s5_map--typestack, $typestack) { - $typestack: map-get($s5_map--typestack, $typestack); - - @return $typestack; - } - - @else if not map-has-key($s5_map--typestack, $typestack) { - @error 'the typestack shorthand "#{$typestack}" is not a valid option. please choose from the following options: `#{map-keys($s5_map--typestack)}`.'; - } -} - -$s5_map--typeweight: ( - thin: $s5_weight--thin, - light: $s5_weight--light, - book: $s5_weight--book, - medium: $s5_weight--medium, - demi-bold: $s5_weight--demi-bold, - bold: $s5_weight--bold, - heavy: $s5_weight--heavy, - black: $s5_weight--black, -); - -@function get-typeweight($typeweight) { - @if map-has-key($s5_map--typeweight, $typeweight) { - $typeweight: map-get($s5_map--typeweight, $typeweight); - - @return $typeweight; - } - - @else if not map-has-key($s5_map--typeweight, $typeweight) { - @error 'the type-weight "#{$typeweight}" is not a valid option. please choose from the following options: `#{map-has-keys($s5_map--typeweight)}`.'; - } -} - -$s5_map--lineheight: ( - xxs: $s5_line-height-xxs, - xs: $s5_line-height-xs, - sm: $s5_line-height-sm, - md: $s5_line-height-md, - lg: $s5_line-height-lg, - xl: $s5_line-height-xl, -); - -@function get-lineheight($lineheight) { - @if map-has-key($s5_map--lineheight, $lineheight) { - $lineheight: map-get($s5_map--lineheight, $lineheight); - - @return $lineheight; - } - - @else if not map-has-key($s5_map--lineheight, $lineheight) { - @error 'the font-weight "#{$lineheight}" is not a valid option. please choose from the following options: `#{map-has-keys($s5_map--lineheight)}`.'; - } -} \ No newline at end of file diff --git a/satfive/utilities/_darkmode.scss b/satfive/utilities/_darkmode.scss deleted file mode 100644 index c54ba2f..0000000 --- a/satfive/utilities/_darkmode.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin dark-mode { - @media (prefers-color-scheme: dark) { - @content; - } - - html[color-scheme="dark"] & { - @content; - } -} - -@mixin light-mode { - @media (prefers-color-scheme: light) { - @content; - } - - html[color-scheme="light"] & { - @content; - } -} diff --git a/satfive/utilities/_rem-calc.scss b/satfive/utilities/_rem-calc.scss deleted file mode 100644 index 53ead62..0000000 --- a/satfive/utilities/_rem-calc.scss +++ /dev/null @@ -1,4 +0,0 @@ -@function set-px($size) { - $remSize: $size / strip-unit($s5_type-root-size); // target / root type size - @return #{$remSize}rem; -} \ No newline at end of file diff --git a/testbed/index.html b/testbed/index.html new file mode 100644 index 0000000..30ad309 --- /dev/null +++ b/testbed/index.html @@ -0,0 +1,256 @@ + + + + + + Saturn V Test Bed + + + +
+

Saturn V Test Bed

+ +
+
+
+

border-radius()

+

Shortcut for the border-radius property.

+
border-radius(10, 'top-left bottom-left')
+
+
+

get-color()

+

Function for transforming base color values.

+
+
get-color(red)
+
get-color(red, 5)
+
get-color(red, -5)
+
+
+
+

dark-mode()

+

only applies style when dark-mode is enabled.

+
+
red-bg in light mode, blue-bg in dark
+
+
+
+

light-mode()

+

only applies style when dark-mode is enabled.

+
+
green-bg in light mode, orange-bg in dark
+
+
+
+

debug-overlay()

+

a tool for quickly checking spacing/alignment.

+
+
some div
+
+
+
+

disable-text-select()

+

disables the ability to highlight text

+
+
some disabled text
+
+
+
+

focusable-only()

+

makes element visible only when focused

+
+ +
+
+
+

min-width-viewport()

+

applies style only when viewport is greater than a certain size

+
+
red > 600px
+
+
+
+

max-width-viewport()

+

applies style only when viewport is less than a certain size

+
+
red < 600px
+
+
+
+

set-px()

+

converts px values to rem

+
+
width: set-px(200)
+
+
+
+

ricepaper()

+

creates a ricepaper blur effect on supported browsers

+
+
example div
+
+
+
+

screen-reader-only()

+

makes element only accessible by screenreaders

+
+
visible to screen readers
+
+
+
+

get-shadow()

+

function shorthand for different elevation shadows

+
+
get-shadow(5, red, 2)
+
+
+
+

set-standard-shadow()

+

mixin shorthand for different elevation (non-interactive) shadows

+
+
set-standard-shadow(5, red, 2)
+
+
+
+

set-interactive-shadow()

+

mixin shorthand for different elevation (interactive) shadows

+
+
set-interactive-shadow(10, red, 2)
+
+
+
+

share-px-value()

+

sets multiple properties to the same rem value (converted from px)

+ +
+
+

simple-gradient()

+

function to make a simple verticle gradient from one base color

+
+
simple-gradient(blue)
+
+
+
+

set-size()

+

function for quickly setting a rem value in increments equal to 4px

+
+
width: set-size(50)
+
+
+
+

margin()

+

shorthand for margin property, converts px to rem. In future patch will use inline and block properties instead of directional properties.

+
+
margin('right bottom', 20px)
+
margin('right bottom', 20px)
+
+
+
+

padding()

+

shorthand for padding property, converts px to rem. In future patch will use + inline and block properties instead of directional properties.

+
+
padding('right bottom', 20px)
+
padding('right bottom', 20px)
+
+
+
+

strip-unit()

+

function for checking if a number includes a unit and if so, strips it to just a number.

+
+
preview unavailable
+
+
+
+

set-type()

+

shorthand for setting typeface and fallback, font size, line height, font style, and font weight.

+
+
set-type(display, 10, light, oblique)
+
+
+
+

set-type-lineheight()

+

set type line height

+
+
set-type-line-height(xl)
+
+
+
+

set-type-size()

+

set type size using a scale.

+
+
set-type-size(6)
+
+
+
+

set-type-stack()

+

set typeface and fallbacks

+
+
set-type-stack(code)
+
+
+
+

set-type-style()

+

set type style.

+
+
set-type-style(oblique)
+
+
+
+

set-type-weight()

+

sets the type weight

+
+
set-type-weight(black)
+
+
+
+

zindex()

+

a mixin for assigning a z-index value based on it's place in the configurable z-index list

+
+
preview unavailable
+
+
+ Back to Top +
+ + \ No newline at end of file diff --git a/testbed/scss/_config.scss b/testbed/scss/_config.scss new file mode 100644 index 0000000..e69de29 diff --git a/testbed/scss/_global.scss b/testbed/scss/_global.scss new file mode 100644 index 0000000..c9215e2 --- /dev/null +++ b/testbed/scss/_global.scss @@ -0,0 +1,109 @@ +@use "../../index" as *; + +html { + scroll-behavior: smooth; +} + +html, +body { + background-color: get-color(soft-black); +} + +.header, +.content-wrapper { + max-width: set-size(150); + @include padding(shorthand, 20px, 10px); + @include margin(shorthand, 0, auto); +} + + +.header__heading { + @include set-type(display, 5, bold); + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 5px; + color: white; +} + +.header__nav-list { + list-style-type: none; + padding: 0 0 20px; + display: block; + border-bottom: 2px solid white; +} + +.header__nav-item { + display: inline-block; + padding: 0; + +} + +.header__nav-item + .header__nav-item { + padding: 8px 8px 8px 0; +} + +.header__nav-link { + @include set-type(interface, 5); + background-color: get-color(soft-white, 0, 50); + padding: 4px; + border-radius: 4px; + text-decoration: none; + color: get-color(soft-white); + scroll-behavior: smooth; + border: 1px solid transparent; + + &[disabled], + &[aria-disabled="true"] { + @include disable-text-select; + opacity: 0.5; + cursor: not-allowed; + } + + &:hover, + &:focus { + text-decoration: underline; + } + + &:focus { + outline: none; + border-color: white; + } +} + +.section { + color: get-color(white); +} + +.section + .section { + margin-top: set-size(14); +} + +.section__heading { + @include set-type(display, 6, demi-bold); +} + +.section__description { + @include set-type(body, 5); +} + +.demo { + display: flex; + background-color: get-color(white); + width: 100%; + min-height: 200px; + justify-content: center; + align-items: center; + border-radius: 8px; +} + +.back-to-top { + @include set-type(interface, 8); + @include border-radius(10); + display: block; + text-decoration: none; + padding: set-size(4); + background-color: get-color(white, 0, 20); + color: get-color(white); + margin: set-size(10) 0; + text-align: center; +} \ No newline at end of file diff --git a/testbed/scss/module/_border-radius.scss b/testbed/scss/module/_border-radius.scss new file mode 100644 index 0000000..a1bbd32 --- /dev/null +++ b/testbed/scss/module/_border-radius.scss @@ -0,0 +1,8 @@ +@use "../../../index" as *; + +.demo--border-radius .demo__element { + background-color: get-color(black); + @include border-radius(10, 'top-left bottom-left'); + padding: 5px; + @include set-type(interface, 4); +} \ No newline at end of file diff --git a/testbed/scss/module/_color.scss b/testbed/scss/module/_color.scss new file mode 100644 index 0000000..6d8bebb --- /dev/null +++ b/testbed/scss/module/_color.scss @@ -0,0 +1,25 @@ +@use "../../../index"as *; + +.demo--get-color { + flex-direction: column; + flex-wrap: wrap; +} + +.demo--get-color .demo__element { + background-color: get-color(gray); + @include set-type(interface, 4); + margin: set-size(2) 0; + padding: set-size(1); +} + +.demo--get-color .demo__element--red1 { + background-color: get-color(red); +} + +.demo--get-color .demo__element--red2 { + background-color: get-color(red, 5); +} + +.demo--get-color .demo__element--red3 { + background-color: get-color(red, -5); +} \ No newline at end of file diff --git a/testbed/scss/module/_dark-mode.scss b/testbed/scss/module/_dark-mode.scss new file mode 100644 index 0000000..e266793 --- /dev/null +++ b/testbed/scss/module/_dark-mode.scss @@ -0,0 +1,25 @@ +@use "../../../index" as *; + +.demo--dark-mode .demo__element, +.demo--light-mode .demo__element { + background-color: get-color(gray); + @include set-type(interface, 4); + margin: set-size(2) 0; + padding: set-size(1); +} + +.demo--dark-mode .demo__element { + background-color: get-color(red); + + @include dark-mode { + background-color: get-color(blue); + } +} + +.demo--light-mode .demo__element { + background-color: get-color(orange); + + @include light-mode { + background-color: get-color(green); + } +} \ No newline at end of file diff --git a/testbed/scss/module/_debug.scss b/testbed/scss/module/_debug.scss new file mode 100644 index 0000000..543b959 --- /dev/null +++ b/testbed/scss/module/_debug.scss @@ -0,0 +1,11 @@ +@use "../../../index" as *; + +.demo--debug-overlay { + @include debug-overlay; +} + +.demo--debug-overlay .demo__element { + background-color: get-color(blue); + @include set-type(interface, 5); + padding: set-size(1); +} \ No newline at end of file diff --git a/testbed/scss/module/_disable-text-select.scss b/testbed/scss/module/_disable-text-select.scss new file mode 100644 index 0000000..6d6beaf --- /dev/null +++ b/testbed/scss/module/_disable-text-select.scss @@ -0,0 +1,8 @@ +@use "../../../index" as *; + +.demo--disable-text-select .demo__element { + @include disable-text-select; + background-color: get-color(black); + padding: 5px; + @include set-type(interface, 4); +} \ No newline at end of file diff --git a/testbed/scss/module/_focusable-only.scss b/testbed/scss/module/_focusable-only.scss new file mode 100644 index 0000000..bdc472e --- /dev/null +++ b/testbed/scss/module/_focusable-only.scss @@ -0,0 +1,12 @@ +@use "../../../index"as *; + +.demo--focusable-only .demo__element { + @include focusable-only; + color: black; + outline: 1px solid red; + @include focusable-only-styles { + @include border-radius(4); + outline: 1px solid blue; + padding: 20px; + } +} \ No newline at end of file diff --git a/testbed/scss/module/_media-queries.scss b/testbed/scss/module/_media-queries.scss new file mode 100644 index 0000000..47ebc27 --- /dev/null +++ b/testbed/scss/module/_media-queries.scss @@ -0,0 +1,20 @@ +@use "../../../index"as *; + +.demo--min-width-viewport .demo__element, +.demo--max-width-viewport .demo__element { + @include set-type(interface, 4); + background-color: get-color(black); + padding: 5px; +} + +.demo--min-width-viewport .demo__element { + @include min-width-viewport(sm) { + background-color: get-color(red); + } +} + +.demo--max-width-viewport .demo__element { + @include max-width-viewport(sm) { + background-color: get-color(red); + } +} \ No newline at end of file diff --git a/testbed/scss/module/_rem-calc.scss b/testbed/scss/module/_rem-calc.scss new file mode 100644 index 0000000..44bc544 --- /dev/null +++ b/testbed/scss/module/_rem-calc.scss @@ -0,0 +1,7 @@ +@use "../../../index"as *; + +.demo--set-px .demo__element { + @include set-type(interface, 4); + background-color: get-color(black); + width: set-px(200); +} \ No newline at end of file diff --git a/testbed/scss/module/_ricepaper.scss b/testbed/scss/module/_ricepaper.scss new file mode 100644 index 0000000..a70fa6f --- /dev/null +++ b/testbed/scss/module/_ricepaper.scss @@ -0,0 +1,13 @@ +@use "../../../index"as *; + +.demo--ricepaper { + background-image: url('https://eoimages.gsfc.nasa.gov/images/imagerecords/146000/146892/namibia_oli_2020130_lrg.jpg'); +} + +.demo--ricepaper .demo__element { + @include set-type(interface, 4); + @include ricepaper($intensity:1); + @include border-radius(10); + color: black; + padding: set-size(8); +} \ No newline at end of file diff --git a/testbed/scss/module/_screen-reader-only.scss b/testbed/scss/module/_screen-reader-only.scss new file mode 100644 index 0000000..f979e96 --- /dev/null +++ b/testbed/scss/module/_screen-reader-only.scss @@ -0,0 +1,5 @@ +@use "../../../index"as *; + +.demo--screen-reader-only .demo__element { + @include screen-reader-only; +} \ No newline at end of file diff --git a/testbed/scss/module/_set-type.scss b/testbed/scss/module/_set-type.scss new file mode 100644 index 0000000..63c3517 --- /dev/null +++ b/testbed/scss/module/_set-type.scss @@ -0,0 +1,42 @@ +@use "../../../index" as *; + +.demo--set-type .demo__element { + @include set-type(display, 10, light, oblique); + color: get-color(black); + position: relative; +} + +.demo--set-type-lineheight .demo__element { + @include set-type(display, 10); + @include set-type-line-height(xl); + color: get-color(black); + position: relative; +} + +.demo--set-type-size .demo__element { + @include set-type(display, 10); + @include set-type-size(6); + color: get-color(black); + position: relative; +} + +.demo--set-type-stack .demo__element { + @include set-type(display, 10); + @include set-type-stack(code); + color: get-color(black); + position: relative; +} + +.demo--set-type-style .demo__element { + @include set-type(display, 10); + @include set-type-style(oblique); + color: get-color(black); + position: relative; +} + +.demo--set-type-weight .demo__element { + @include set-type(display, 10); + @include set-type-weight(black); + color: get-color(black); + position: relative; +} \ No newline at end of file diff --git a/testbed/scss/module/_shadows.scss b/testbed/scss/module/_shadows.scss new file mode 100644 index 0000000..761c909 --- /dev/null +++ b/testbed/scss/module/_shadows.scss @@ -0,0 +1,34 @@ +@use "../../../index"as *; + +.demo--get-shadow .demo__element { + @include border-radius(5); + @include set-type(interface, 4); + background: get-color(red, -1); + color: get-color(white); + padding: 20px; + box-shadow: get-shadow(5, red, 2); +} + +.demo--set-standard-shadow .demo__element { + @include border-radius(5); + @include set-type(interface, 4); + @include set-standard-shadow(5, red, 2); + background: get-color(red, -1); + color: get-color(white); + padding: 20px; +} + +.demo--set-interactive-shadow .demo__element { + @include border-radius(5); + @include set-type(interface, 4); + @include set-standard-shadow(5, red, 2); + @include set-interactive-shadow(10, red, 2); + background: get-color(red, -1); + color: get-color(white); + padding: 20px; + cursor: pointer; + + &:after { + @include border-radius(5); + } +} \ No newline at end of file diff --git a/testbed/scss/module/_share-px-value.scss b/testbed/scss/module/_share-px-value.scss new file mode 100644 index 0000000..6790360 --- /dev/null +++ b/testbed/scss/module/_share-px-value.scss @@ -0,0 +1,7 @@ +@use "../../../index" as *; + +.demo--share-px-value .demo__element { + background-color: get-color(black); + @include set-type(interface, 4); + @include share-px-value(margin, padding, 5px); +} \ No newline at end of file diff --git a/testbed/scss/module/_simple-gradient.scss b/testbed/scss/module/_simple-gradient.scss new file mode 100644 index 0000000..83bab95 --- /dev/null +++ b/testbed/scss/module/_simple-gradient.scss @@ -0,0 +1,7 @@ +@use "../../../index"as *; + +.demo--simple-gradient .demo__element { + background: simple-gradient(blue); + @include set-type(interface, 4); + @include share-px-value(margin, padding, 5px); +} \ No newline at end of file diff --git a/testbed/scss/module/_size-multiplier.scss b/testbed/scss/module/_size-multiplier.scss new file mode 100644 index 0000000..e9d7ce5 --- /dev/null +++ b/testbed/scss/module/_size-multiplier.scss @@ -0,0 +1,7 @@ +@use "../../../index"as *; + +.demo--set-size .demo__element { + @include set-type(interface, 4); + background-color: get-color(black); + width: set-size(50); +} \ No newline at end of file diff --git a/testbed/scss/module/_spacing.scss b/testbed/scss/module/_spacing.scss new file mode 100644 index 0000000..b5cfc82 --- /dev/null +++ b/testbed/scss/module/_spacing.scss @@ -0,0 +1,14 @@ +@use "../../../index" as *; + +.demo--margin .demo__element { + @include set-type(interface, 4); + @include margin('right bottom', 20px); + background-color: get-color(black); +} + +.demo--padding .demo__element { + @include set-type(interface, 4); + @include margin('shorthand', 5px); + @include padding('right bottom', 20px); + background-color: get-color(black); +} \ No newline at end of file diff --git a/testbed/scss/module/_strip-unit.scss b/testbed/scss/module/_strip-unit.scss new file mode 100644 index 0000000..1087392 --- /dev/null +++ b/testbed/scss/module/_strip-unit.scss @@ -0,0 +1,7 @@ +@use "../../../index" as *; + +.demo--strip-unit .demo__element { + @include set-type(interface, 4); + color: get-color(gray); + position: relative; +} \ No newline at end of file diff --git a/testbed/scss/module/_zindex.scss b/testbed/scss/module/_zindex.scss new file mode 100644 index 0000000..c7a54ff --- /dev/null +++ b/testbed/scss/module/_zindex.scss @@ -0,0 +1,7 @@ +@use "../../../index"as *; + +.demo--zindex .demo__element { + @include set-type(interface, 4); + color: get-color(gray); + position: relative; +} \ No newline at end of file diff --git a/testbed/scss/style.scss b/testbed/scss/style.scss new file mode 100644 index 0000000..a621939 --- /dev/null +++ b/testbed/scss/style.scss @@ -0,0 +1,27 @@ +// Sets configured variable values for Saturn V +@use "config" as *; + +// Imports Saturn V +@use "../../index" as *; + +// Imports Styles for the Full page +@use "global"; + +// Module Tests +@use "module/border-radius"; +@use "module/color"; +@use "module/dark-mode"; +@use "module/debug"; +@use "module/disable-text-select"; +@use "module/focusable-only"; +@use "module/media-queries"; +@use "module/rem-calc"; +@use "module/ricepaper"; +@use "module/screen-reader-only"; +@use "module/shadows"; +@use "module/share-px-value"; +@use "module/simple-gradient"; +@use "module/size-multiplier"; +@use "module/spacing"; +@use "module/strip-unit"; +@use "module/set-type"; \ No newline at end of file diff --git a/testbed/style.css b/testbed/style.css new file mode 100644 index 0000000..c59e998 --- /dev/null +++ b/testbed/style.css @@ -0,0 +1,566 @@ +html { + scroll-behavior: smooth; +} + +html, +body { + background-color: #0d0c0c; +} + +.header, +.content-wrapper { + max-width: 37.5rem; + padding: 1.25rem 0.625rem; + margin: 0rem auto; +} + +.header__heading { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + font-weight: 700; + font-style: normal; + line-height: 1.4; + text-decoration: underline; + text-decoration-thickness: 2px; + text-underline-offset: 5px; + color: white; +} + +.header__nav-list { + list-style-type: none; + padding: 0 0 20px; + display: block; + border-bottom: 2px solid white; +} + +.header__nav-item { + display: inline-block; + padding: 0; +} + +.header__nav-item + .header__nav-item { + padding: 8px 8px 8px 0; +} + +.header__nav-link { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background-color: rgba(250, 252, 252, 0.5); + padding: 4px; + border-radius: 4px; + text-decoration: none; + color: #fafcfc; + scroll-behavior: smooth; + border: 1px solid transparent; +} +.header__nav-link[disabled], .header__nav-link[aria-disabled=true] { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0.5; + cursor: not-allowed; +} +.header__nav-link:hover, .header__nav-link:focus { + text-decoration: underline; +} +.header__nav-link:focus { + outline: none; + border-color: white; +} + +.section { + color: white; +} + +.section + .section { + margin-top: 3.5rem; +} + +.section__heading { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.125rem; + font-weight: 600; + font-style: normal; + line-height: 1.4; +} + +.section__description { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + font-style: normal; + line-height: 1.6; +} + +.demo { + display: flex; + background-color: white; + width: 100%; + min-height: 200px; + justify-content: center; + align-items: center; + border-radius: 8px; +} + +.back-to-top { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.4375rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background-clip: padding-box; + border-top-right-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + border-top-left-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; + display: block; + text-decoration: none; + padding: 1rem; + background-color: rgba(255, 255, 255, 0.2); + color: white; + margin: 2.5rem 0; + text-align: center; +} + +.demo--border-radius .demo__element { + background-color: black; + background-clip: padding-box; + border-top-left-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; + padding: 5px; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; +} + +.demo--get-color { + flex-direction: column; + flex-wrap: wrap; +} + +.demo--get-color .demo__element { + background-color: gray; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + margin: 0.5rem 0; + padding: 0.25rem; +} + +.demo--get-color .demo__element--red1 { + background-color: red; +} + +.demo--get-color .demo__element--red2 { + background-color: #ff8e8e; +} + +.demo--get-color .demo__element--red3 { + background-color: #710000; +} + +.demo--dark-mode .demo__element, +.demo--light-mode .demo__element { + background-color: gray; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + margin: 0.5rem 0; + padding: 0.25rem; +} + +.demo--dark-mode .demo__element { + background-color: red; +} +@media (prefers-color-scheme: dark) { + .demo--dark-mode .demo__element { + background-color: blue; + } +} +html[color-scheme=dark] .demo--dark-mode .demo__element { + background-color: blue; +} + +.demo--light-mode .demo__element { + background-color: orange; +} +@media (prefers-color-scheme: light) { + .demo--light-mode .demo__element { + background-color: green; + } +} +html[color-scheme=light] .demo--light-mode .demo__element { + background-color: green; +} + +.demo--debug-overlay { + position: relative; +} +.demo--debug-overlay:after { + content: ""; + z-index: 5; + background-image: url("data:image/png;base64,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"); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 1; + mix-blend-mode: exclusion; +} + +.demo--debug-overlay .demo__element { + background-color: blue; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + font-style: normal; + line-height: 1; + padding: 0.25rem; +} + +.demo--disable-text-select .demo__element { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: black; + padding: 5px; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; +} + +.demo--focusable-only .demo__element { + color: black; + outline: 1px solid red; +} +.demo--focusable-only .demo__element:not(#specificity-override) { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + clip: rect(0 0 0 0); + overflow: hidden; +} +.demo--focusable-only .demo__element:not(#specificity-override):active, .demo--focusable-only .demo__element:not(#specificity-override):focus { + z-index: 4; + width: auto; + height: auto; + margin: 0; + clip: auto; + overflow: visible; +} +.demo--focusable-only .demo__element:not(#specificity-override):active, .demo--focusable-only .demo__element:not(#specificity-override):focus { + background-clip: padding-box; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + border-top-left-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; + outline: 1px solid blue; + padding: 20px; +} + +.demo--min-width-viewport .demo__element, +.demo--max-width-viewport .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background-color: black; + padding: 5px; +} + +@media screen and (min-width: 800px) { + .demo--min-width-viewport .demo__element { + background-color: red; + } +} + +@media screen and (max-width: 800px) { + .demo--max-width-viewport .demo__element { + background-color: red; + } +} + +.demo--set-px .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background-color: black; + width: 12.5rem; +} + +.demo--ricepaper { + background-image: url("https://eoimages.gsfc.nasa.gov/images/imagerecords/146000/146892/namibia_oli_2020130_lrg.jpg"); +} + +.demo--ricepaper .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background-color: rgba(250, 252, 252, 0.96); + background-clip: padding-box; + border-top-right-radius: 0.625rem; + border-bottom-right-radius: 0.625rem; + border-top-left-radius: 0.625rem; + border-bottom-left-radius: 0.625rem; + color: black; + padding: 2rem; +} +@supports (-webkit-backdrop-filter: blur()) { + .demo--ricepaper .demo__element { + -webkit-backdrop-filter: saturate(360%) blur(0.25rem); + background-color: rgba(250, 252, 252, 0.8); + } +} + +.demo--screen-reader-only .demo__element:not(#specificity-override) { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 0.1rem; + margin: -0.1rem; + overflow: hidden; + padding: 0; + position: absolute; + width: 0.0001rem; + display: inline-block; + white-space: nowrap; + right: 0; +} + +.demo--get-shadow .demo__element { + background-clip: padding-box; + border-top-right-radius: 0.3125rem; + border-bottom-right-radius: 0.3125rem; + border-top-left-radius: 0.3125rem; + border-bottom-left-radius: 0.3125rem; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background: #e30000; + color: white; + padding: 20px; + box-shadow: 0 0.1875rem 0.1875rem rgba(113, 0, 0, 0.34), 0 0rem 0.125rem rgba(113, 0, 0, 0.2); +} + +.demo--set-standard-shadow .demo__element { + background-clip: padding-box; + border-top-right-radius: 0.3125rem; + border-bottom-right-radius: 0.3125rem; + border-top-left-radius: 0.3125rem; + border-bottom-left-radius: 0.3125rem; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + box-shadow: 0 0.1875rem 0.1875rem rgba(113, 0, 0, 0.34), 0 0rem 0.125rem rgba(113, 0, 0, 0.2); + background: #e30000; + color: white; + padding: 20px; +} + +.demo--set-interactive-shadow .demo__element { + background-clip: padding-box; + border-top-right-radius: 0.3125rem; + border-bottom-right-radius: 0.3125rem; + border-top-left-radius: 0.3125rem; + border-bottom-left-radius: 0.3125rem; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + box-shadow: 0 0.1875rem 0.1875rem rgba(113, 0, 0, 0.34), 0 0rem 0.125rem rgba(113, 0, 0, 0.2); + position: relative; + box-sizing: border-box; + background: #e30000; + color: white; + padding: 20px; + cursor: pointer; +} +.demo--set-interactive-shadow .demo__element:after { + top: 0rem; + right: 0rem; + bottom: 0rem; + left: 0rem; + border-radius: 0rem; + box-shadow: 0 0.5rem 0.5625rem rgba(113, 0, 0, 0.4), 0 0rem 0.1875rem rgba(113, 0, 0, 0.24); + content: ""; + opacity: 0; + position: absolute; + transition: opacity 175ms ease-in; +} +.demo--set-interactive-shadow .demo__element:focus:after, .demo--set-interactive-shadow .demo__element:hover:after { + opacity: 1; +} +.demo--set-interactive-shadow .demo__element:active:after { + opacity: 0; +} +.demo--set-interactive-shadow .demo__element:after { + background-clip: padding-box; + border-top-right-radius: 0.3125rem; + border-bottom-right-radius: 0.3125rem; + border-top-left-radius: 0.3125rem; + border-bottom-left-radius: 0.3125rem; +} + +.demo--share-px-value .demo__element { + background-color: black; + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + margin: 0.3125rem; + padding: 0.3125rem; +} + +.demo--simple-gradient .demo__element { + background: -webkit-linear-gradient(#3939ff, blue, #0000c6); + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + margin: 0.3125rem; + padding: 0.3125rem; +} + +.demo--set-size .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + background-color: black; + width: 12.5rem; +} + +.demo--margin .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + margin-right: 1.25rem; + margin-bottom: 1.25rem; + background-color: black; +} + +.demo--padding .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + margin: 0.3125rem; + padding-right: 1.25rem; + padding-bottom: 1.25rem; + background-color: black; +} + +.demo--strip-unit .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + line-height: 1; + color: gray; + position: relative; +} + +.demo--set-type .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.8125rem; + font-weight: 300; + font-style: oblique; + line-height: 1.4; + color: black; + position: relative; +} + +.demo--set-type-lineheight .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.8125rem; + font-weight: 400; + font-style: normal; + line-height: 1.4; + line-height: 3; + color: black; + position: relative; +} + +.demo--set-type-size .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.8125rem; + font-weight: 400; + font-style: normal; + line-height: 1.4; + font-size: 1.125rem; + color: black; + position: relative; +} + +.demo--set-type-stack .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.8125rem; + font-weight: 400; + font-style: normal; + line-height: 1.4; + font-family: "Andale Mono", AndaleMono, monospace; + color: black; + position: relative; +} + +.demo--set-type-style .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.8125rem; + font-weight: 400; + font-style: normal; + line-height: 1.4; + font-style: oblique; + color: black; + position: relative; +} + +.demo--set-type-weight .demo__element { + font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Droid Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 1.8125rem; + font-weight: 400; + font-style: normal; + line-height: 1.4; + font-weight: 900; + color: black; + position: relative; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/satfive/configs/_base-units.scss b/tokens/_base-units.scss similarity index 100% rename from satfive/configs/_base-units.scss rename to tokens/_base-units.scss diff --git a/tokens/_colors.scss b/tokens/_colors.scss new file mode 100644 index 0000000..ffaaa0d --- /dev/null +++ b/tokens/_colors.scss @@ -0,0 +1,189 @@ +@use "sass:map"; + +// Brand Colors +$s5_color-brand-color-1: #9C75F3 !default; +$s5_color-brand-color-2: mediumblue !default; +$s5_color-brand-color-3: #a10000 !default; + +// Greyscale Base Colors +$s5_color-soft-white: #FAFCFC !default; +$s5_color-soft-black: #0D0C0C !default; + +// Contextual Base Colors +$s5_color-focus-base: #002eff !default; +$s5_color-info-base: #002eff !default; +$s5_color-alert-base: gold !default; +$s5_color-warning-base: #f14400 !default; +$s5_color-danger-base: #dc1414 !default; +$s5_color-success-base: #1aaa35 !default; + + +// Color Function Features +$s5_color-scale-step-total: 19 !default; // must be an odd number + +$s5_map--color: ( // pinks + pink: pink, + lightpink: lightpink, + hotpink: hotpink, + deeppink: deeppink, + palevioletred: palevioletred, + mediumvioletred: mediumvioletred, + // reds + lightsalmon: lightsalmon, + salmon: salmon, + darksalmon: darksalmon, + lightcoral: lightcoral, + indianred: indianred, + crimson: crimson, + firebrick: firebrick, + darkred: darkred, + red: red, + //oranges + orangered: orangered, + tomato: tomato, + coral: coral, + darkorange: darkorange, + orange: orange, + // yellows + yellow: yellow, + lightyellow: lightyellow, + lemonchiffon: lemonchiffon, + lightgoldenrodyellow: lightgoldenrodyellow, + papayawhip: papayawhip, + moccasin: moccasin, + peachpuff: peachpuff, + palegoldenrod: palegoldenrod, + khaki: khaki, + darkkhaki: darkkhaki, + gold: gold, + // browns + cornsilk: cornsilk, + blanchedalmond: blanchedalmond, + bisque: bisque, + navajowhite: navajowhite, + wheat: wheat, + burlywood: burlywood, + tan: tan, + rosybrown: rosybrown, + sandybrown: sandybrown, + goldenrod: goldenrod, + darkgoldenrod: darkgoldenrod, + peru: peru, + chocolate: chocolate, + saddlebrown: saddlebrown, + sienna: sienna, + brown: brown, + maroon: maroon, + // greens + darkolivegreen: darkolivegreen, + olive: olive, + olivedrab: olivedrab, + yellowgreen: yellowgreen, + limegreen: limegreen, + lime: lime, + lawngreen: lawngreen, + chartreuse: chartreuse, + greenyellow: greenyellow, + springgreen: springgreen, + mediumspringgreen: mediumspringgreen, + lightgreen: lightgreen, + palegreen: palegreen, + darkseagreen: darkseagreen, + mediumaquamarine: mediumaquamarine, + mediumseagreen: mediumseagreen, + seagreen: seagreen, + forestgreen: forestgreen, + green: green, + darkgreen: darkgreen, + // cyans + cyan: cyan, + 'aqua': aqua, + lightcyan: lightcyan, + paleturquoise: paleturquoise, + aquamarine: aquamarine, + turquoise: turquoise, + mediumturquoise: mediumturquoise, + darkturquoise: darkturquoise, + lightseagreen: lightseagreen, + cadetblue: cadetblue, + darkcyan: darkcyan, + teal: teal, + // blues + lightsteelblue: lightsteelblue, + powderblue: powderblue, + lightblue: lightblue, + skyblue: skyblue, + lightskyblue: lightskyblue, + deepskyblue: deepskyblue, + dodgerblue: dodgerblue, + cornflowerblue: cornflowerblue, + steelblue: steelblue, + royalblue: royalblue, + blue: blue, + mediumblue: mediumblue, + darkblue: darkblue, + navy: navy, + midnightblue: midnightblue, + // purples + lavender: lavender, + thistle: thistle, + plum: plum, + violet: violet, + orchid: orchid, + fuchsia: fuchsia, + 'magenta': magenta, + mediumorchid: mediumorchid, + mediumpurple: mediumpurple, + blueviolet: blueviolet, + darkviolet: darkviolet, + darkorchid: darkorchid, + rebeccapurple: rebeccapurple, + darkmagenta: darkmagenta, + purple: purple, + indigo: indigo, + darkslateblue: darkslateblue, + slateblue: slateblue, + mediumslateblue: mediumslateblue, + // lights + white: white, + snow: snow, + honeydew: honeydew, + mintcream: mintcream, + azure: azure, + aliceblue: aliceblue, + ghostwhite: ghostwhite, + whitesmoke: whitesmoke, + seashell: seashell, + beige: beige, + oldlace: oldlace, + floralwhite: floralwhite, + ivory: ivory, + antiquewhite: antiquewhite, + linen: linen, + lavenderblush: lavenderblush, + mistyrose: mistyrose, + // darks + gainsboro: gainsboro, + lightgray: lightgray, + silver: silver, + darkgray: darkgray, + gray: gray, + dimgray: dimgray, + lightslategray: lightslategray, + slategray: slategray, + darkslategray: darkslategray, + black: black, + // custom + primary: $s5_color-brand-color-1, + secondary: $s5_color-brand-color-2, + tertiary: $s5_color-brand-color-3, + soft-white: $s5_color-soft-white, + soft-black: $s5_color-soft-black, + // contextual + focus: $s5_color-focus-base, + info: $s5_color-info-base, + alert: $s5_color-alert-base, + warning: $s5_color-warning-base, + danger: $s5_color-danger-base, + success: $s5_color-success-base, +) !default; \ No newline at end of file diff --git a/satfive/tokens/_media-queries.scss b/tokens/_media-queries.scss similarity index 68% rename from satfive/tokens/_media-queries.scss rename to tokens/_media-queries.scss index 9559a52..8e357d0 100644 --- a/satfive/tokens/_media-queries.scss +++ b/tokens/_media-queries.scss @@ -1,3 +1,13 @@ +@use "sass:map"; + +$s5_viewport-micro: 360px !default; +$s5_viewport-xs: 600px !default; +$s5_viewport-sm: 800px !default; +$s5_viewport-md: 1000px !default; +$s5_viewport-lg: 1200px !default; +$s5_viewport-xl: 1600px !default; +$s5_viewport-massive: 2000px !default; + $s5_map--viewport: ( micro: $s5_viewport-micro, xs: $s5_viewport-xs, diff --git a/tokens/_type.scss b/tokens/_type.scss new file mode 100644 index 0000000..0d0e49b --- /dev/null +++ b/tokens/_type.scss @@ -0,0 +1,119 @@ +@use "sass:map"; + +// Fontstacks +$s5_typestack--monospace: "Andale Mono", +AndaleMono, +monospace !default; +$s5_typestack--sans-serif: sans-serif !default; +$s5_typestack--serif: serif !default; + +$s5_typestack--display: BlinkMacSystemFont, +-apple-system, +"Roboto", +"Droid Sans", +"Segoe UI", +"Helvetica Neue", +Helvetica, +Arial, +sans-serif !default; +$s5_typestack--masthead: $s5_typestack--display !default; +$s5_typestack--body: $s5_typestack--display !default; +$s5_typestack--text: $s5_typestack--body !default; +$s5_typestack--code: $s5_typestack--monospace !default; +$s5_typestack--interface: $s5_typestack--display !default; + +$s5_typestack--caption: $s5_typestack--display !default; +$s5_typestack--aside: $s5_typestack--display !default; +$s5_typestack--blockquote: $s5_typestack--display !default; + +// Font Weights +$s5_weight--thin: 100 !default; +$s5_weight--extra-light: 200 !default; +$s5_weight--light: 300 !default; +$s5_weight--book: 400 !default; +$s5_weight--medium: 500 !default; +$s5_weight--demi-bold: 600 !default; +$s5_weight--bold: 700 !default; +$s5_weight--heavy: 800 !default; +$s5_weight--black: 900 !default; + +// Line Heights +$s5_line-height-xxs: 1 !default; +$s5_line-height-xs: 1.2 !default; +$s5_line-height-sm: 1.4 !default; +$s5_line-height-md: 1.6 !default; +$s5_line-height-lg: 2 !default; +$s5_line-height-xl: 3 !default; + +// Type Scale Modifiers +$s5_type-scale-modifier: 1.125 !default; +$s5_type-scale-base: 10px !default; +$s5_type-root-size: 16px !default; + +$s5_map--typestack: (monospace: $s5_typestack--monospace, + sans-serif: $s5_typestack--sans-serif, + serif: $s5_typestack--serif, + display: $s5_typestack--display, + masthead: $s5_typestack--masthead, + body: $s5_typestack--body, + text: $s5_typestack--text, + code: $s5_typestack--code, + interface: $s5_typestack--interface, + caption: $s5_typestack--caption, + aside: $s5_typestack--aside, + blockquote: $s5_typestack--blockquote); + + +@function get-typestack($typestack) { + @if map-has-key($s5_map--typestack, $typestack) { + $typestack: map-get($s5_map--typestack, $typestack); + + @return $typestack; + } + + @else if not map-has-key($s5_map--typestack, $typestack) { + @error 'the typestack shorthand "#{$typestack}" is not a valid option. please choose from the following options: `#{map-keys($s5_map--typestack)}`.'; + } +} + +$s5_map--typeweight: (thin: $s5_weight--thin, + light: $s5_weight--light, + book: $s5_weight--book, + medium: $s5_weight--medium, + demi-bold: $s5_weight--demi-bold, + bold: $s5_weight--bold, + heavy: $s5_weight--heavy, + black: $s5_weight--black, +); + +@function get-typeweight($typeweight) { + @if map-has-key($s5_map--typeweight, $typeweight) { + $typeweight: map-get($s5_map--typeweight, $typeweight); + + @return $typeweight; + } + + @else if not map-has-key($s5_map--typeweight, $typeweight) { + @error 'the type-weight "#{$typeweight}" is not a valid option. please choose from the following options: `#{map-has-keys($s5_map--typeweight)}`.'; + } +} + +$s5_map--lineheight: (xxs: $s5_line-height-xxs, + xs: $s5_line-height-xs, + sm: $s5_line-height-sm, + md: $s5_line-height-md, + lg: $s5_line-height-lg, + xl: $s5_line-height-xl, +); + +@function get-lineheight($lineheight) { + @if map-has-key($s5_map--lineheight, $lineheight) { + $lineheight: map-get($s5_map--lineheight, $lineheight); + + @return $lineheight; + } + + @else if not map-has-key($s5_map--lineheight, $lineheight) { + @error 'the font-weight "#{$lineheight}" is not a valid option. please choose from the following options: `#{map-has-keys($s5_map--lineheight)}`.'; + } +} \ No newline at end of file diff --git a/tokens/_zindex.scss b/tokens/_zindex.scss new file mode 100644 index 0000000..0fe90ef --- /dev/null +++ b/tokens/_zindex.scss @@ -0,0 +1,12 @@ +@use "sass:list"; + +$s5_zindex-order: "example-one", +"example-two", +"example-three" + !default; + +$s5_permanent-z-order: "debug", +"focusable-only"; + + +$s5_z-order: join($s5_permanent-z-order, $s5_zindex-order); \ No newline at end of file