diff --git a/.gitignore b/.gitignore index 1eb2b05e97..d300f2e33a 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,5 @@ coverage tsconfig.tsbuildinfo ## OS -.DS_Store \ No newline at end of file +.DS_Store +.idea \ No newline at end of file diff --git a/packages/chlorophyll-storybook/.storybook/preview-head.html b/packages/chlorophyll-storybook/.storybook/preview-head.html index c767d1dc6a..fe4260ed4e 100644 --- a/packages/chlorophyll-storybook/.storybook/preview-head.html +++ b/packages/chlorophyll-storybook/.storybook/preview-head.html @@ -1,9 +1,8 @@ - + \ No newline at end of file diff --git a/packages/chlorophyll-storybook/.storybook/preview.js b/packages/chlorophyll-storybook/.storybook/preview.js index 0c9f415fbd..4d475e313a 100644 --- a/packages/chlorophyll-storybook/.storybook/preview.js +++ b/packages/chlorophyll-storybook/.storybook/preview.js @@ -1,3 +1,4 @@ +import "../public/green-chlorophyll.css" export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, diff --git a/packages/chlorophyll-storybook/public/green-chlorophyll.css b/packages/chlorophyll-storybook/public/green-chlorophyll.css index 36f50dfedf..0810d176b3 100644 --- a/packages/chlorophyll-storybook/public/green-chlorophyll.css +++ b/packages/chlorophyll-storybook/public/green-chlorophyll.css @@ -1,305 +1,302 @@ +/** + * Calculate the luminance for a color. + * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests + */ +/** + * Calculate the contrast ratio between two colors. + * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests + */ +/** + * Determine whether to use dark or light text on top of given color. + * Returns black for dark text and white for light text. + */ /* Forward all mixins and variables so that they can be used by referencing a single file. Mixins and variables can be access using forward prefix like this -. Ie. 'button-base' (mixin), badge-padding (variable). */ -.ds-green .badge { - margin: 0; - display: block; - background: none; -} -.ds-green button, -.ds-green button[type=button] { - display: inline-block; - text-align: center; - text-decoration: none; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - border-radius: 0.25em; - background-color: #0092e1; - color: #fff; - padding: 0.5em 1em; -} -.ds-green button:hover, .ds-green button:active, -.ds-green button[type=button]:hover, -.ds-green button[type=button]:active { - background-color: #41b0ee; -} -.ds-green button.danger, -.ds-green button.delete { - background: #fff; - color: #d81a1a; - border-color: transparent; -} -.ds-green button.danger:hover, .ds-green button.danger:active, -.ds-green button.delete:hover, -.ds-green button.delete:active { - color: #fff; - background-color: #f03529; - border-color: transparent; -} -.ds-green button.delete.confirm { - background: #d81a1a; - color: #fff; - border-color: transparent; -} -.ds-green button.delete.confirm:hover, .ds-green button.delete.confirm:active { - color: #fff; - background-color: #f03529; - border-color: transparent; -} -.ds-green button.ghost { - background: #fff; - color: #333; - border-color: #333; -} -.ds-green button.ghost:hover, .ds-green button.ghost:active { - color: #fff; - background-color: #333; - border-color: transparent; -} -.ds-green button.link { - background: #fff; - color: #0092e1; - border-color: #0092e1; - border-color: transparent; -} -.ds-green button.link:hover, .ds-green button.link:active { - color: #fff; - background-color: #41b0ee; - border-color: transparent; -} -.ds-green button.link:hover, .ds-green button.link:active { - border-color: transparent; -} -.ds-green button[type=menu] { - background: #fff; - color: #0092e1; - border-color: #0092e1; - border-color: transparent; -} -.ds-green button[type=menu]:hover, .ds-green button[type=menu]:active { - color: #fff; - background-color: #41b0ee; - border-color: transparent; -} -.ds-green button[type=menu]:hover, .ds-green button[type=menu]:active { - border-color: transparent; -} -.ds-green button[type=reset] { - display: inline-block; - text-align: center; - text-decoration: none; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - border-radius: 0.25em; - background-color: #0092e1; - color: #fff; - padding: 0.5em 1em; - background: #d81a1a; - color: #fff; - border-color: transparent; -} -.ds-green button[type=reset]:hover, .ds-green button[type=reset]:active { - background-color: #41b0ee; -} -.ds-green button[type=reset]:hover, .ds-green button[type=reset]:active { - color: #fff; - background-color: #f03529; - border-color: transparent; -} -.ds-green button.secondary { - background: #fff; - color: #0092e1; - border-color: #0092e1; -} -.ds-green button.secondary:hover, .ds-green button.secondary:active { - color: #fff; - background-color: #41b0ee; - border-color: transparent; -} -.ds-green button[type=submit] { - display: inline-block; - text-align: center; - text-decoration: none; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - border-radius: 0.25em; - background-color: #0092e1; - color: #fff; - padding: 0.5em 1em; -} -.ds-green button[type=submit]:hover, .ds-green button[type=submit]:active { - background-color: #41b0ee; -} -.ds-green input[type=button] { - display: inline-block; - text-align: center; - text-decoration: none; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - border-radius: 0.25em; - background-color: #0092e1; - color: #fff; - padding: 0.5em 1em; - background: #fff; - color: #0092e1; - border-color: #0092e1; +/*.btn, +.btn[type='button'] { + @include button.base; + @include button.primary; +}*/ +.btn { + border: none; + background-color: transparent; + font-family: inherit; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.75rem; + padding-top: 0.75rem; + border-radius: 4px; + border: solid 1px; + font-weight: 500; } -.ds-green input[type=button]:hover, .ds-green input[type=button]:active { - background-color: #41b0ee; +@media screen and (-ms-high-contrast: active) { + .btn { + border: 2px solid currentcolor; + } } -.ds-green input[type=button]:hover, .ds-green input[type=button]:active { - color: #fff; - background-color: #41b0ee; - border-color: transparent; + +.btn-primary { + background: #0092e1; + color: black; + /*&:hover, + &:active { + color: tokens.$theme-light-secondary-opposite2; + background-color: tokens.$theme-light-secondary-color2; + border-color: transparent; + }*/ +} +.btn-primary:focus:not(:focus-visible) { + outline: 0; +} +.btn-primary:focus-visible { + outline-style: solid; + box-shadow: 0 0 0 4px #000099; + outline-color: transparent; } -.ds-green input[type=date] { - display: inline-block; - border: 1px solid #cecece; + +button:not([class]), a { + border: none; + background-color: transparent; + font-family: inherit; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.75rem; + padding-top: 0.75rem; border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + border: solid 1px; + font-weight: 500; + background: #0092e1; + color: black; + /*&:hover, + &:active { + color: tokens.$theme-light-secondary-opposite2; + background-color: tokens.$theme-light-secondary-color2; + border-color: transparent; + }*/ +} +@media screen and (-ms-high-contrast: active) { + button:not([class]), a { + border: 2px solid currentcolor; + } +} +button:not([class]):focus:not(:focus-visible), a:focus:not(:focus-visible) { + outline: 0; +} +button:not([class]):focus-visible, a:focus-visible { + outline-style: solid; + box-shadow: 0 0 0 4px #000099; + outline-color: transparent; } -.ds-green input[type=datetime] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; + +/*@use 'delete'; +@use 'ghost'; +@use 'link'; +@use 'menu'; +@use 'reset'; +@use 'secondary'; +@use 'submit';*/ +/*@use "../../tokens"; +@use "../button"; + +$selector: 'input:not([type])'; +$selector-button: 'input[type=button]'; +$selector-checkbox: 'input[type=checkbox]'; +$selector-color: 'input[type=color]'; +$selector-date: 'input[type=date]'; +$selector-datetime: 'input[type=datetime]'; +$selector-datetime-local: 'input[type=datetime-local]'; +$selector-email: 'input[type=email]'; +$selector-hidden: 'input[type=hidden]'; +$selector-image: 'input[type=image]'; +$selector-month: 'input[type=month]'; +$selector-number: 'input[type=number]'; +$selector-password: 'input[type=password]'; +$selector-radio: 'input[type=radio]'; +$selector-range: 'input[type=range]'; +$selector-reset: 'input[type=reset]'; +$selector-search: 'input[type=search]'; +$selector-submit: 'input[type=submit]'; +$selector-tel: 'input[type=tel]'; +$selector-text: 'input[type=text]'; +$selector-time: 'input[type=time]'; +$selector-url: 'input[type=url]'; +$selector-week: 'input[type=week]'; + +@mixin input-field { + display: tokens.$shape-input-display; + border: 1px solid tokens.$color-grey-400; + border-radius: tokens.$shape-input-border-radius; + color: tokens.$theme-light-background-opposite; + padding: tokens.$shape-input-padding-v tokens.$shape-input-padding-h; min-height: 44px; } -.ds-green input[type=datetime-local] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +@mixin button { + @include button.base; + @include button.secondary; } -.ds-green input[type=email] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +@mixin reset { + @include button.base; + @include button.danger-opposite; } -.ds-green input[type=month] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +@mixin submit { + @include button.base; } -.ds-green input[type=number] { - display: inline-block; - border: 1px solid #cecece; +*/ +.form-input { + background-color: transparent; + font-family: inherit; + padding: 0; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 0.75rem; + padding-top: 0.75rem; border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + border: solid 1px; } -.ds-green input[type=password] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; +@media screen and (-ms-high-contrast: active) { + .form-input { + border: 2px solid currentcolor; + } } -.ds-green input[type=reset] { - display: inline-block; - text-align: center; - text-decoration: none; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - border-radius: 0.25em; - background-color: #0092e1; - color: #fff; - padding: 0.5em 1em; - background: #d81a1a; - color: #fff; - border-color: transparent; + +/*@use 'button'; +@use 'checkbox'; +@use 'color'; +@use 'date'; +@use 'datetime'; +@use 'datetime-local'; +@use 'email'; +@use 'file'; +@use 'hidden'; +@use 'image'; +@use 'month'; +@use 'number'; +@use 'password'; +@use 'radio'; +@use 'range'; +@use 'reset'; +@use 'search'; +@use 'submit'; +@use 'tel'; +@use 'text'; +@use 'time'; +@use 'url'; +@use 'week'; +*/ +body html { + font-size: 16px; +} +body body { + font-weight: 400; + font-family: 'SEBSansSerif',Arial,sans-serif; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} +.display-01 { + font-size: 3rem; + font-weight: 800; + line-height: 56px; + letter-spacing: 0; } -.ds-green input[type=reset]:hover, .ds-green input[type=reset]:active { - background-color: #41b0ee; + +h1 { + font-size: 2rem; + font-weight: 800; + line-height: 40px; + letter-spacing: 0; } -.ds-green input[type=reset]:hover, .ds-green input[type=reset]:active { - color: #fff; - background-color: #f03529; - border-color: transparent; + +h2 { + font-size: 1.5rem; + font-weight: 800; + line-height: 32px; + letter-spacing: 0; } -.ds-green input[type=search] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +h3 { + font-size: 1.25rem; + font-weight: 800; + line-height: 28px; + letter-spacing: 0; } -.ds-green input[type=submit] { - display: inline-block; - text-align: center; - text-decoration: none; - vertical-align: middle; - user-select: none; - border: 1px solid transparent; - border-radius: 0.25em; - background-color: #0092e1; - color: #fff; - padding: 0.5em 1em; + +h4 { + font-size: 1.25rem; + font-weight: 800; + line-height: 28px; + letter-spacing: 0; } -.ds-green input[type=submit]:hover, .ds-green input[type=submit]:active { - background-color: #41b0ee; + +h5 { + font-size: 1rem; + font-weight: 800; + line-height: 24px; + letter-spacing: 0; } -.ds-green input[type=tel] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +h6 { + font-size: 0.875rem; + font-weight: 800; + line-height: 20px; + letter-spacing: 0; } -.ds-green input:not([type]), -.ds-green input[type=text] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +p { + font-size: 1rem; + font-weight: 400; + line-height: 24px; + letter-spacing: 0; } -.ds-green input[type=time] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +p.small { + font-size: 0.75rem; + font-weight: 400; + line-height: 20px; + letter-spacing: 0; } -.ds-green input[type=url] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +/*.ds-green { + @import 'badge'; + @import 'button'; + @import 'input'; +}*/ +.size-sm { + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-bottom: 0.25rem; + padding-top: 0.25rem; + font-size: 0.75rem; + line-height: 1; } -.ds-green input[type=week] { - display: inline-block; - border: 1px solid #cecece; - border-radius: 4px; - color: #1a1a1a; - padding: 0 16px; - min-height: 44px; + +.size-lg { + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-bottom: 1rem; + padding-top: 1rem; + font-size: 1.25rem; + line-height: 1.3; } /* import specific class like this: diff --git a/packages/chlorophyll-storybook/public/green-chlorophyll.css.map b/packages/chlorophyll-storybook/public/green-chlorophyll.css.map index 090bbfa616..fc18e3c2dd 100644 --- a/packages/chlorophyll-storybook/public/green-chlorophyll.css.map +++ b/packages/chlorophyll-storybook/public/green-chlorophyll.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../chlorophyll/src/scss/mixins/_index.scss","../../chlorophyll/src/scss/classes/badge/_base.scss","../../chlorophyll/src/scss/mixins/badge/_index.scss","../../chlorophyll/src/scss/classes/button/_base.scss","../../chlorophyll/src/scss/mixins/button/_index.scss","../../chlorophyll/src/scss/tokens/_shapes.scss","../../chlorophyll/src/scss/tokens/_themes.scss","../../chlorophyll/src/scss/classes/button/_delete.scss","../../chlorophyll/src/scss/classes/button/_ghost.scss","../../chlorophyll/src/scss/classes/button/_link.scss","../../chlorophyll/src/scss/classes/button/_menu.scss","../../chlorophyll/src/scss/classes/button/_reset.scss","../../chlorophyll/src/scss/classes/button/_secondary.scss","../../chlorophyll/src/scss/classes/button/_submit.scss","../../chlorophyll/src/scss/classes/input/_button.scss","../../chlorophyll/src/scss/classes/input/_date.scss","../../chlorophyll/src/scss/mixins/input/_index.scss","../../chlorophyll/src/scss/classes/input/_datetime.scss","../../chlorophyll/src/scss/classes/input/_datetime-local.scss","../../chlorophyll/src/scss/classes/input/_email.scss","../../chlorophyll/src/scss/classes/input/_month.scss","../../chlorophyll/src/scss/classes/input/_number.scss","../../chlorophyll/src/scss/classes/input/_password.scss","../../chlorophyll/src/scss/classes/input/_reset.scss","../../chlorophyll/src/scss/classes/input/_search.scss","../../chlorophyll/src/scss/classes/input/_submit.scss","../../chlorophyll/src/scss/classes/input/_tel.scss","../../chlorophyll/src/scss/classes/input/_text.scss","../../chlorophyll/src/scss/classes/input/_time.scss","../../chlorophyll/src/scss/classes/input/_url.scss","../../chlorophyll/src/scss/classes/input/_week.scss","../../chlorophyll/src/scss/index.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACEA;ECCE;EACA;EACA;;ACHF;AAAA;ECGE,SCLe;EDMf;EACA;EACA;EACA;EACA;EACA,eCPqB;EDQrB,kBERoB;EFSpB,OERuB;EFSvB;;AAEA;AAAA;AAAA;EAEE,kBEZmB;;ACHvB;AAAA;EH2CE,YEjCmB;EFkCnB,OEjCsB;EFkCtB;;AAEA;AAAA;AAAA;EAEE,OEpCqB;EFqCrB,kBEtCkB;EFuClB;;AG9CJ;EHmDE,YE7CsB;EF8CtB,OE/CmB;EFgDnB;;AAEA;EAEE,OEjDqB;EFkDrB,kBEnDkB;EFoDlB;;AIhEJ;EJqEE,YE7DkB;EF8DlB,OE7DqB;EF8DrB,cE9DqB;;AFgErB;EAEE,OEnEgB;EFoEhB,kBEnEmB;EFoEnB;;AK7EJ;ELoBE,YEhBsB;EFiBtB,OEhByB;EFiBzB,cEjByB;EF6BzB;;AAVA;EAEE,OEnBwB;EFoBxB,kBErBqB;EFsBrB;;AAQF;EAEE;;AMvCJ;ENqBE,YEhBsB;EFiBtB,OEhByB;EFiBzB,cEjByB;EF6BzB;;AAVA;EAEE,OEnBwB;EFoBxB,kBErBqB;EFsBrB;;AAQF;EAEE;;AOtCJ;EPEE,SCLe;EDMf;EACA;EACA;EACA;EACA;EACA,eCPqB;EDQrB,kBERoB;EFSpB,OERuB;EFSvB;EA6CA,YE7CsB;EF8CtB,OE/CmB;EFgDnB;;AA7CA;EAEE,kBEZmB;;AFyDrB;EAEE,OEjDqB;EFkDrB,kBEnDkB;EFoDlB;;AQhEJ;ERoBE,YEhBsB;EFiBtB,OEhByB;EFiBzB,cEjByB;;AFmBzB;EAEE,OEnBwB;EFoBxB,kBErBqB;EFsBrB;;AS5BJ;ETEE,SCLe;EDMf;EACA;EACA;EACA;EACA;EACA,eCPqB;EDQrB,kBERoB;EFSpB,OERuB;EFSvB;;AAEA;EAEE,kBEZmB;;AQJvB;EVGE,SCLe;EDMf;EACA;EACA;EACA;EACA;EACA,eCPqB;EDQrB,kBERoB;EFSpB,OERuB;EFSvB;EASA,YEhBsB;EFiBtB,OEhByB;EFiBzB,cEjByB;;AFQzB;EAEE,kBEZmB;;AFqBrB;EAEE,OEnBwB;EFoBxB,kBErBqB;EFsBrB;;AW7BJ;EC0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AC/BF;ED0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AE/BF;EF0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AG/BF;EH0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AI/BF;EJ0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AK/BF;EL0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AM/BF;EN0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AO/BF;EnBGE,SCLe;EDMf;EACA;EACA;EACA;EACA;EACA,eCPqB;EDQrB,kBERoB;EFSpB,OERuB;EFSvB;EA6CA,YE7CsB;EF8CtB,OE/CmB;EFgDnB;;AA7CA;EAEE,kBEZmB;;AFyDrB;EAEE,OEjDqB;EFkDrB,kBEnDkB;EFoDlB;;AoBjEJ;ER0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AS/BF;ErBGE,SCLe;EDMf;EACA;EACA;EACA;EACA;EACA,eCPqB;EDQrB,kBERoB;EFSpB,OERuB;EFSvB;;AAEA;EAEE,kBEZmB;;AoBJvB;EV0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AW/BF;AAAA;EX0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;AY/BF;EZ0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;Aa/BF;Eb0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;Ac/BF;Ed0BE,SXrBc;EWsBd;EACA,eXnBoB;EWoBpB,OV9B0B;EU+B1B;EACA;;;Ae7BF;AAAA;AAAA;AAAA","file":"green-chlorophyll.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../chlorophyll/src/scss/functions/_index.scss","../../chlorophyll/src/scss/mixins/_index.scss","../../chlorophyll/src/scss/classes/button/_base.scss","../../chlorophyll/src/scss/mixins/button/_index.scss","../../chlorophyll/src/scss/mixins/utility/_spacing.scss","../../chlorophyll/src/scss/mixins/utility/_border.scss","../../chlorophyll/src/scss/scss-tokens/_border.scss","../../chlorophyll/src/scss/mixins/utility/_typography.scss","../../chlorophyll/src/scss/classes/button/_primary.scss","../../chlorophyll/src/scss/mixins/utility/_focus.scss","../../chlorophyll/src/scss/classes/button/_default.scss","../../chlorophyll/src/scss/classes/button/_index.scss","../../chlorophyll/src/scss/mixins/input/_index.scss","../../chlorophyll/src/scss/classes/input/_index.scss","../../chlorophyll/src/scss/mixins/typography/_reset.scss","../../chlorophyll/src/scss/scss-tokens/_typography.scss","../../chlorophyll/src/scss/classes/typography/_index.scss","../../chlorophyll/src/scss/mixins/typography/_index.scss","../../chlorophyll/src/scss/classes/_index.scss","../../chlorophyll/src/scss/index.scss"],"names":[],"mappings":"AA4QA;AAAA;AAAA;AAAA;AAYA;AAAA;AAAA;AAAA;AAWA;AAAA;AAAA;AAAA;ACnSA;AAAA;AAAA;AAAA;AAAA;ACEA;AAAA;AAAA;AAAA;AAAA;AAKA;ECEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECNA;EACA;EAIA;EACA;ECdA,eCFO;EDMP;EEEA;;AJiBA;EDlBF;ICmBI;;;;AKxBJ;EL+BE;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AMnCA;EACE;;AAGF;EACE;EACA;EACA;;;ACNJ;EPOE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECNA;EACA;EAIA;EACA;ECdA,eCFO;EDMP;EEEA;EJyBA;EACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAXA;EOvBF;IPwBI;;;AMzBF;EACE;;AAGF;EACE;EACA;EACA;;;AELJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACsBA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;ACvBA;EDGE;EACA;EACA;EACA;EACA;EACA;EACA;ERDA;EACA;EAIA;EACA;ECdA,eCFO;EDMP;;AOaA;ECjBF;IDkBI;;;;ACfJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACCE;EACE,WCPa;;ADUf;EACE;EAEA,aATmB;EAUnB;EACA;EACA;;AETJ;ECDI,WFgDS;EEhDT,aFgDS;EEhDT,aFgDS;EEhDT,gBFgDS;;;AC1CX;ECNE,WDO2B;ECP3B,aDO2B;ECP3B,aDO2B;ECP3B,gBDO2B;;;AAD7B;ECNE,WDO2B;ECP3B,aDO2B;ECP3B,aDO2B;ECP3B,gBDO2B;;;AAD7B;ECNE,WDO2B;ECP3B,aDO2B;ECP3B,aDO2B;ECP3B,gBDO2B;;;AAD7B;ECNE,WDO2B;ECP3B,aDO2B;ECP3B,aDO2B;ECP3B,gBDO2B;;;AAD7B;ECNE,WDO2B;ECP3B,aDO2B;ECP3B,aDO2B;ECP3B,gBDO2B;;;AAD7B;ECNE,WDO2B;ECP3B,aDO2B;ECP3B,aDO2B;ECP3B,gBDO2B;;;AAI/B;ECXI,WFiGM;EEjGN,aFiGM;EEjGN,aFiGM;EEjGN,gBFiGM;;;AClFV;ECfI,WFwGM;EExGN,aFwGM;EExGN,aFwGM;EExGN,gBFwGM;;;AG7GV;AAAA;AAAA;AAAA;AAAA;AASA;EdAE;EACA;EAIA;EACA;EGbA;EACA;;;AWYF;EdNE;EACA;EAIA;EACA;EGbA;EACA;;;AYCF;AAAA;AAAA;AAAA","file":"green-chlorophyll.css"} \ No newline at end of file diff --git a/packages/chlorophyll-storybook/src/stories/css/button/Button.stories.svelte b/packages/chlorophyll-storybook/src/stories/css/button/Button.stories.svelte index 13cf6edecc..b5e8089ef2 100644 --- a/packages/chlorophyll-storybook/src/stories/css/button/Button.stories.svelte +++ b/packages/chlorophyll-storybook/src/stories/css/button/Button.stories.svelte @@ -11,7 +11,7 @@ type: { control: { type: "select", options: ["primary", "secondary"] }, } - }} + }} /> @@ -19,11 +19,10 @@ `} - name="Primary" - args={{ + source={``} + name="Primary" + args={{ type: "primary", label: "Primary", }} diff --git a/packages/chlorophyll-storybook/src/stories/css/button/Index.stories.mdx b/packages/chlorophyll-storybook/src/stories/css/button/Index.stories.mdx index 5eaf2ee690..01982e7b54 100644 --- a/packages/chlorophyll-storybook/src/stories/css/button/Index.stories.mdx +++ b/packages/chlorophyll-storybook/src/stories/css/button/Index.stories.mdx @@ -6,8 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; Lorem ipsum buttons - - - + + diff --git a/packages/chlorophyll-storybook/src/stories/css/playground/Playground.stories.svelte b/packages/chlorophyll-storybook/src/stories/css/playground/Playground.stories.svelte index 4a61398e67..979c3956ba 100644 --- a/packages/chlorophyll-storybook/src/stories/css/playground/Playground.stories.svelte +++ b/packages/chlorophyll-storybook/src/stories/css/playground/Playground.stories.svelte @@ -4,11 +4,10 @@ - diff --git a/packages/chlorophyll-storybook/src/stories/css/playground/Playground.svelte b/packages/chlorophyll-storybook/src/stories/css/playground/Playground.svelte index 156f9c52e5..feb18afd4e 100644 --- a/packages/chlorophyll-storybook/src/stories/css/playground/Playground.svelte +++ b/packages/chlorophyll-storybook/src/stories/css/playground/Playground.svelte @@ -14,5 +14,3 @@
-

h1

-

h2

diff --git a/packages/chlorophyll-storybook/src/stories/css/typography/Typography.stories.svelte b/packages/chlorophyll-storybook/src/stories/css/typography/Typography.stories.svelte index 5ff354c173..2171150d73 100644 --- a/packages/chlorophyll-storybook/src/stories/css/typography/Typography.stories.svelte +++ b/packages/chlorophyll-storybook/src/stories/css/typography/Typography.stories.svelte @@ -1,18 +1,18 @@ diff --git a/packages/chlorophyll/src/scss/classes/_index.scss b/packages/chlorophyll/src/scss/classes/_index.scss index 13d51c8cfc..9e054f226c 100644 --- a/packages/chlorophyll/src/scss/classes/_index.scss +++ b/packages/chlorophyll/src/scss/classes/_index.scss @@ -6,6 +6,7 @@ }*/ @use 'button'; @use 'input'; + @use 'typography'; .size-sm { @include utility.padding-horizontal('xs'); diff --git a/packages/chlorophyll/src/scss/classes/typography/_index.scss b/packages/chlorophyll/src/scss/classes/typography/_index.scss index e69de29bb2..5fb5f0da4d 100644 --- a/packages/chlorophyll/src/scss/classes/typography/_index.scss +++ b/packages/chlorophyll/src/scss/classes/typography/_index.scss @@ -0,0 +1,24 @@ +@use "../../mixins/typography" as mixins; +@use "../../scss-tokens/typography" as tokens; + +body { + @include mixins.reset() +} + +.display-01 { + @include mixins.properties(tokens.$display-01); +} + +@for $i from 1 through 6 { + h#{$i} { + @include mixins.properties(map-get(tokens.$headings, $i)); + } +} + +p { + @include mixins.properties(tokens.$body-01); +} + +p.small { + @include mixins.properties(tokens.$body-02); +} \ No newline at end of file diff --git a/packages/chlorophyll/src/scss/mixins/typography/_index.scss b/packages/chlorophyll/src/scss/mixins/typography/_index.scss index e69de29bb2..ff03a09a2d 100644 --- a/packages/chlorophyll/src/scss/mixins/typography/_index.scss +++ b/packages/chlorophyll/src/scss/mixins/typography/_index.scss @@ -0,0 +1,13 @@ +@use "../../scss-tokens/typography"; + +@forward "reset"; + +@mixin properties($map) { + @each $name, $value in $map { + #{$name}: $value; + } +} + +@mixin header-margin() { + +} \ No newline at end of file diff --git a/packages/chlorophyll/src/scss/mixins/typography/_reset.scss b/packages/chlorophyll/src/scss/mixins/typography/_reset.scss index e69de29bb2..87a6102ac4 100644 --- a/packages/chlorophyll/src/scss/mixins/typography/_reset.scss +++ b/packages/chlorophyll/src/scss/mixins/typography/_reset.scss @@ -0,0 +1,23 @@ +@use "../../scss-tokens/typography" as tokens; + +@mixin reset( + $base-font-size: tokens.$base-font-size, + $body-font-family: tokens.font-family('sans') +) { + html { + font-size: $base-font-size; + } + + body { + font-weight: tokens.font-weight('regular'); + + font-family: $body-font-family; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + } + + strong { + font-weight: tokens.font-weight('semibold'); + } +} \ No newline at end of file diff --git a/packages/chlorophyll/src/scss/mixins/utility/_typography.scss b/packages/chlorophyll/src/scss/mixins/utility/_typography.scss index b0c93137b7..3b2bce8e0e 100644 --- a/packages/chlorophyll/src/scss/mixins/utility/_typography.scss +++ b/packages/chlorophyll/src/scss/mixins/utility/_typography.scss @@ -1,9 +1,10 @@ @use '../../scss-tokens'; + @mixin font-size($size) { font-size: map-get(scss-tokens.$font-size, $size); line-height: map-get(scss-tokens.$line-height, $size); } @mixin font-weight($weight) { - font-weight: map-get(scss-tokens.$font-weight, $weight); + font-weight: map-get(scss-tokens.$font-weights, $weight); } diff --git a/packages/chlorophyll/src/scss/scss-tokens/_typography.scss b/packages/chlorophyll/src/scss/scss-tokens/_typography.scss index e5658d587b..a75b099472 100644 --- a/packages/chlorophyll/src/scss/scss-tokens/_typography.scss +++ b/packages/chlorophyll/src/scss/scss-tokens/_typography.scss @@ -1,3 +1,5 @@ +$base-font-size: 16px !default; + $font-size: ( 's': 0.75rem, 'm': 1rem, @@ -6,15 +8,118 @@ $font-size: ( 'xxl': 3rem, ); +$font-scale: ( + 1: 0.75rem, // 12px + 2: 0.875rem, // 14px + 3: 1rem, // 16px + 4: 1.25rem, // 20px + 5: 1.5rem, // 24px + 6: 2rem, // 32px + 7: 2.5rem, // 40px + 8: 3rem, // 48px + 9: 4rem, // 64px + 10: 6rem // 92px +); + $line-height: ( 's': 1, 'm': 1.25, 'l': 1.3, ); -$font-weight: ( +@function font-scale($step) { + @return map-get($font-scale, $step); +} + +$font-weights: ( 'light': 300, 'regular': 400, 'medium': 500, 'bold': 800, ); + +@function font-weight($weight) { + @return map-get($font-weights, $weight); +} + +$font-family-sans-serif: "'SEBSansSerif',Arial,sans-serif"; + +$font-families: ( + 'sans': unquote($font-family-sans-serif) +); + +@function font-family($family) { + @return map-get($font-families, $family); +} + +$display-01: ( + font-size: font-scale(8), + font-weight: font-weight('bold'), + line-height: 56px, + letter-spacing: 0 +); + +$heading-01: ( + font-size: font-scale(6), + font-weight: font-weight('bold'), + line-height: 40px, + letter-spacing: 0 +); + +$heading-02: ( + font-size: font-scale(5), + font-weight: font-weight('bold'), + line-height: 32px, + letter-spacing: 0 +); + +$heading-03: ( + font-size: font-scale(4), + font-weight: font-weight('bold'), + line-height: 28px, + letter-spacing: 0 +); + +$heading-04: ( + font-size: font-scale(4), + font-weight: font-weight('bold'), + line-height: 28px, + letter-spacing: 0 +); + +$heading-05: ( + font-size: font-scale(3), + font-weight: font-weight('bold'), + line-height: 24px, + letter-spacing: 0 +); + +$heading-06: ( + font-size: font-scale(2), + font-weight: font-weight('bold'), + line-height: 20px, + letter-spacing: 0 +); + +$body-01: ( + font-size: font-scale(3), + font-weight: font-weight('regular'), + line-height: 24px, + letter-spacing: 0 +); + +$body-02: ( + font-size: font-scale(1), + font-weight: font-weight('regular'), + line-height: 20px, + letter-spacing: 0 +); + +$headings: ( + 1: $heading-01, + 2: $heading-02, + 3: $heading-03, + 4: $heading-04, + 5: $heading-05, + 6: $heading-06, +);