Skip to content

Commit

Permalink
fix(styles-dictionary): refactor typography (#94)
Browse files Browse the repository at this point in the history 
* fix(styles-dictionary): refactor typography sd to better support client usage

remove duplicated properties, utilize font shorthand where possible

* refactor(styles-dictionary): add global font family and reference interally
  • Loading branch information
@mdjmoore
mdjmoore authored Dec 3, 2021
1 parent 2b072b5 commit a966ab9
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 419 deletions.
171 changes: 32 additions & 139 deletions src/common/styles-dictionary/css/variables.css
View file
Original file line number Diff line number Diff line change
@@ -1,150 +1,43 @@
/**
* Do not edit directly
* Generated on Tue, 16 Nov 2021 17:46:56 GMT
* Generated on Fri, 03 Dec 2021 21:05:51 GMT
*/

:root {
--sds-font-body-xxxs-400-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-xxxs-400-font-size: 11px;
--sds-font-body-xxxs-400-letter-spacing: 0.3px;
--sds-font-body-xxxs-400-line-height: 16px;
--sds-font-body-xxxs-400-font-weight: 400;
--sds-font-body-xxxs-400-color: black;
--sds-font-body-xxxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-body-xxxs-600-font-size: 11px;
--sds-font-body-xxxs-600-letter-spacing: 0.3px;
--sds-font-body-xxxs-600-line-height: 16px;
--sds-font-body-xxxs-600-font-weight: 600;
--sds-font-body-xxxs-600-color: black;
--sds-font-body-xxs-400-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-xxs-400-font-size: 12px;
--sds-font-body-xxs-400-letter-spacing: 0.3px;
--sds-font-body-xxs-400-line-height: 18px;
--sds-font-body-xxs-400-font-weight: 400;
--sds-font-body-xxs-400-color: black;
--sds-font-body-xxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-body-xxs-600-font-size: 12px;
--sds-font-body-xxs-600-letter-spacing: 0.3px;
--sds-font-body-xxs-600-line-height: 18px;
--sds-font-body-xxs-600-font-weight: 600;
--sds-font-body-xxs-600-color: black;
--sds-font-body-xs-400-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-xs-400-font-size: 13px;
--sds-font-body-xs-400-letter-spacing: 0.3px;
--sds-font-body-xs-400-line-height: 20px;
--sds-font-body-xs-400-font-weight: 400;
--sds-font-body-xs-400-color: black;
--sds-font-body-xs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-body-xs-600-font-size: 13px;
--sds-font-body-xs-600-letter-spacing: 0.3px;
--sds-font-body-xs-600-line-height: 20px;
--sds-font-body-xs-600-font-weight: 600;
--sds-font-body-xs-600-color: black;
--sds-font-body-s-400-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-s-400-font-size: 14px;
--sds-font-body-s-400-letter-spacing: 0.3px;
--sds-font-body-s-400-line-height: 24px;
--sds-font-body-s-400-font-weight: 400;
--sds-font-body-s-400-color: black;
--sds-font-body-s-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-body-s-600-font-size: 14px;
--sds-font-body-s-600-letter-spacing: 0.3px;
--sds-font-body-s-600-line-height: 24px;
--sds-font-body-s-600-font-weight: 600;
--sds-font-body-s-600-color: black;
--sds-font-body-m-400-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-m-400-font-size: 16px;
--sds-font-body-m-400-letter-spacing: 0.3px;
--sds-font-body-m-400-line-height: 26px;
--sds-font-body-m-400-font-weight: 400;
--sds-font-body-m-400-color: black;
--sds-font-body-m-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-body-m-600-font-size: 16px;
--sds-font-body-m-600-letter-spacing: 0.3px;
--sds-font-body-m-600-line-height: 26px;
--sds-font-body-m-600-font-weight: 600;
--sds-font-body-m-600-color: black;
--sds-font-body-l-400-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-l-400-font-size: 18px;
--sds-font-body-l-400-letter-spacing: 0.3px;
--sds-font-body-l-400-line-height: 28px;
--sds-font-body-l-400-font-weight: 400;
--sds-font-body-l-400-color: black;
--sds-font-body-l-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-body-l-600-font-size: 18px;
--sds-font-body-l-600-letter-spacing: 0.3px;
--sds-font-body-l-600-line-height: 28px;
--sds-font-body-l-600-font-weight: 600;
--sds-font-body-l-600-color: black;
--sds-font-caps-xxxxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-caps-xxxxs-600-font-size: 10px;
--sds-font-caps-xxxxs-600-letter-spacing: 1px;
--sds-font-caps-xxxxs-600-line-height: 14px;
--sds-font-caps-xxxxs-600-font-weight: 600;
--sds-font-letter-spacing-default: 0.3px;
--sds-font-letter-spacing-caps: 1px;
--sds-font-color: black;
--sds-font-font-family: "Open Sans", "OpenSans-Regular";
--sds-font-body-xxxs-400-font: 400, 11px/16px "Open Sans", "OpenSans-Regular";
--sds-font-body-xxxs-600-font: 600, 11px/16px "Open Sans", "OpenSans-SemiBold";
--sds-font-body-xxs-400-font: 400, 12px/18px "Open Sans", "OpenSans-Regular";
--sds-font-body-xxs-600-font: 600, 12px/18px "Open Sans", "OpenSans-SemiBold";
--sds-font-body-xs-400-font: 400, 13px/20px "Open Sans", "OpenSans-Regular";
--sds-font-body-xs-600-font: 600, 13px/20px "Open Sans", "OpenSans-SemiBold";
--sds-font-body-s-400-font: 400, 14px/24px "Open Sans", "OpenSans-Regular";
--sds-font-body-s-600-font: 600, 14px/24px "Open Sans", "OpenSans-SemiBold";
--sds-font-body-m-400-font: 400, 16px/26px "Open Sans", "OpenSans-Regular";
--sds-font-body-m-600-font: 600, 16px/26px "Open Sans", "OpenSans-SemiBold";
--sds-font-body-l-400-font: 400, 18px/28px "Open Sans", "OpenSans-Regular";
--sds-font-body-l-600-font: 600, 18px/28px "Open Sans", "OpenSans-SemiBold";
--sds-font-caps-xxxxs-600-font: 600, 10px/14px "Open Sans",
"OpenSans-SemiBold";
--sds-font-caps-xxxxs-600-text-transform: uppercase;
--sds-font-caps-xxxxs-600-color: black;
--sds-font-caps-xxxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-caps-xxxs-600-font-size: 11px;
--sds-font-caps-xxxs-600-letter-spacing: 1px;
--sds-font-caps-xxxs-600-line-height: 16px;
--sds-font-caps-xxxs-600-font-weight: 600;
--sds-font-caps-xxxs-600-font: 600, 11px/16px "Open Sans", "OpenSans-SemiBold";
--sds-font-caps-xxxs-600-text-transform: uppercase;
--sds-font-caps-xxxs-600-color: black;
--sds-font-caps-xxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-caps-xxs-600-font-size: 12px;
--sds-font-caps-xxs-600-letter-spacing: 1px;
--sds-font-caps-xxs-600-line-height: 18px;
--sds-font-caps-xxs-600-font-weight: 600;
--sds-font-caps-xxs-600-font: 600, 12px/18px "Open Sans", "OpenSans-SemiBold";
--sds-font-caps-xxs-600-text-transform: uppercase;
--sds-font-caps-xxs-600-color: black;
--sds-font-header-xxxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xxxs-600-font-size: 11px;
--sds-font-header-xxxs-600-letter-spacing: 0.3px;
--sds-font-header-xxxs-600-line-height: 16px;
--sds-font-header-xxxs-600-font-weight: 600;
--sds-font-header-xxxs-600-color: black;
--sds-font-header-xxs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xxs-600-font-size: 12px;
--sds-font-header-xxs-600-letter-spacing: 0.3px;
--sds-font-header-xxs-600-line-height: 18px;
--sds-font-header-xxs-600-font-weight: 600;
--sds-font-header-xxs-600-color: black;
--sds-font-header-xs-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xs-600-font-size: 13px;
--sds-font-header-xs-600-letter-spacing: 0.3px;
--sds-font-header-xs-600-line-height: 18px;
--sds-font-header-xs-600-font-weight: 600;
--sds-font-header-xs-600-color: black;
--sds-font-header-s-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-s-600-font-size: 14px;
--sds-font-header-s-600-letter-spacing: 0.3px;
--sds-font-header-s-600-line-height: 20px;
--sds-font-header-s-600-font-weight: 600;
--sds-font-header-s-600-color: black;
--sds-font-header-m-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-m-600-font-size: 16px;
--sds-font-header-m-600-letter-spacing: 0.3px;
--sds-font-header-m-600-line-height: 22px;
--sds-font-header-m-600-font-weight: 600;
--sds-font-header-m-600-color: black;
--sds-font-header-l-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-l-600-font-size: 18px;
--sds-font-header-l-600-letter-spacing: 0.3px;
--sds-font-header-l-600-line-height: 24px;
--sds-font-header-l-600-font-weight: 600;
--sds-font-header-l-600-color: black;
--sds-font-header-xl-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xl-600-font-size: 22px;
--sds-font-header-xl-600-letter-spacing: 0.3px;
--sds-font-header-xl-600-line-height: 30px;
--sds-font-header-xl-600-font-weight: 600;
--sds-font-header-xl-600-color: black;
--sds-font-header-xxl-600-font-family: "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xxl-600-font-size: 26px;
--sds-font-header-xxl-600-letter-spacing: 0.3px;
--sds-font-header-xxl-600-line-height: 34px;
--sds-font-header-xxl-600-font-weight: 600;
--sds-font-header-xxl-600-color: black;
--sds-font-header-xxxs-600-font: 600, 11px/16px "Open Sans",
"OpenSans-SemiBold";
--sds-font-header-xxs-600-font: 600, 12px/18px "Open Sans",
"OpenSans-SemiBold";
--sds-font-header-xs-600-font: 600, 13px/18px "Open Sans", "OpenSans-SemiBold";
--sds-font-header-s-600-font: 600, 14px/20px "Open Sans", "OpenSans-SemiBold";
--sds-font-header-m-600-font: 600, 16px/22px "Open Sans", "OpenSans-SemiBold";
--sds-font-header-l-600-font: 600, 18px/24px "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xl-600-font: 600, 22px/30px "Open Sans", "OpenSans-SemiBold";
--sds-font-header-xxl-600-font: 600, 26px/34px "Open Sans",
"OpenSans-SemiBold";
--sds-color-beta-100: #f4f0f9;
--sds-color-beta-200: #f0ebf6;
--sds-color-beta-400: #7a41ce;
Expand Down
167 changes: 28 additions & 139 deletions src/common/styles-dictionary/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,148 +1,37 @@

// Do not edit directly
// Generated on Tue, 16 Nov 2021 17:46:56 GMT
// Generated on Fri, 03 Dec 2021 21:05:51 GMT

$sds-font-body-xxxs-400-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xxxs-400-font-size: 11px;
$sds-font-body-xxxs-400-letter-spacing: 0.3px;
$sds-font-body-xxxs-400-line-height: 16px;
$sds-font-body-xxxs-400-font-weight: 400;
$sds-font-body-xxxs-400-color: black;
$sds-font-body-xxxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-xxxs-600-font-size: 11px;
$sds-font-body-xxxs-600-letter-spacing: 0.3px;
$sds-font-body-xxxs-600-line-height: 16px;
$sds-font-body-xxxs-600-font-weight: 600;
$sds-font-body-xxxs-600-color: black;
$sds-font-body-xxs-400-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xxs-400-font-size: 12px;
$sds-font-body-xxs-400-letter-spacing: 0.3px;
$sds-font-body-xxs-400-line-height: 18px;
$sds-font-body-xxs-400-font-weight: 400;
$sds-font-body-xxs-400-color: black;
$sds-font-body-xxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-xxs-600-font-size: 12px;
$sds-font-body-xxs-600-letter-spacing: 0.3px;
$sds-font-body-xxs-600-line-height: 18px;
$sds-font-body-xxs-600-font-weight: 600;
$sds-font-body-xxs-600-color: black;
$sds-font-body-xs-400-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xs-400-font-size: 13px;
$sds-font-body-xs-400-letter-spacing: 0.3px;
$sds-font-body-xs-400-line-height: 20px;
$sds-font-body-xs-400-font-weight: 400;
$sds-font-body-xs-400-color: black;
$sds-font-body-xs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-xs-600-font-size: 13px;
$sds-font-body-xs-600-letter-spacing: 0.3px;
$sds-font-body-xs-600-line-height: 20px;
$sds-font-body-xs-600-font-weight: 600;
$sds-font-body-xs-600-color: black;
$sds-font-body-s-400-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-s-400-font-size: 14px;
$sds-font-body-s-400-letter-spacing: 0.3px;
$sds-font-body-s-400-line-height: 24px;
$sds-font-body-s-400-font-weight: 400;
$sds-font-body-s-400-color: black;
$sds-font-body-s-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-s-600-font-size: 14px;
$sds-font-body-s-600-letter-spacing: 0.3px;
$sds-font-body-s-600-line-height: 24px;
$sds-font-body-s-600-font-weight: 600;
$sds-font-body-s-600-color: black;
$sds-font-body-m-400-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-m-400-font-size: 16px;
$sds-font-body-m-400-letter-spacing: 0.3px;
$sds-font-body-m-400-line-height: 26px;
$sds-font-body-m-400-font-weight: 400;
$sds-font-body-m-400-color: black;
$sds-font-body-m-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-m-600-font-size: 16px;
$sds-font-body-m-600-letter-spacing: 0.3px;
$sds-font-body-m-600-line-height: 26px;
$sds-font-body-m-600-font-weight: 600;
$sds-font-body-m-600-color: black;
$sds-font-body-l-400-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-l-400-font-size: 18px;
$sds-font-body-l-400-letter-spacing: 0.3px;
$sds-font-body-l-400-line-height: 28px;
$sds-font-body-l-400-font-weight: 400;
$sds-font-body-l-400-color: black;
$sds-font-body-l-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-l-600-font-size: 18px;
$sds-font-body-l-600-letter-spacing: 0.3px;
$sds-font-body-l-600-line-height: 28px;
$sds-font-body-l-600-font-weight: 600;
$sds-font-body-l-600-color: black;
$sds-font-caps-xxxxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxxxs-600-font-size: 10px;
$sds-font-caps-xxxxs-600-letter-spacing: 1px;
$sds-font-caps-xxxxs-600-line-height: 14px;
$sds-font-caps-xxxxs-600-font-weight: 600;
$sds-font-letter-spacing-default: 0.3px;
$sds-font-letter-spacing-caps: 1px;
$sds-font-color: black;
$sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xxxs-400-font: 400, 11px/16px 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xxxs-600-font: 600, 11px/16px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-xxs-400-font: 400, 12px/18px 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xxs-600-font: 600, 12px/18px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-xs-400-font: 400, 13px/20px 'Open Sans', 'OpenSans-Regular';
$sds-font-body-xs-600-font: 600, 13px/20px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-s-400-font: 400, 14px/24px 'Open Sans', 'OpenSans-Regular';
$sds-font-body-s-600-font: 600, 14px/24px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-m-400-font: 400, 16px/26px 'Open Sans', 'OpenSans-Regular';
$sds-font-body-m-600-font: 600, 16px/26px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-body-l-400-font: 400, 18px/28px 'Open Sans', 'OpenSans-Regular';
$sds-font-body-l-600-font: 600, 18px/28px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxxxs-600-font: 600, 10px/14px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxxxs-600-text-transform: uppercase;
$sds-font-caps-xxxxs-600-color: black;
$sds-font-caps-xxxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxxs-600-font-size: 11px;
$sds-font-caps-xxxs-600-letter-spacing: 1px;
$sds-font-caps-xxxs-600-line-height: 16px;
$sds-font-caps-xxxs-600-font-weight: 600;
$sds-font-caps-xxxs-600-font: 600, 11px/16px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxxs-600-text-transform: uppercase;
$sds-font-caps-xxxs-600-color: black;
$sds-font-caps-xxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxs-600-font-size: 12px;
$sds-font-caps-xxs-600-letter-spacing: 1px;
$sds-font-caps-xxs-600-line-height: 18px;
$sds-font-caps-xxs-600-font-weight: 600;
$sds-font-caps-xxs-600-font: 600, 12px/18px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-caps-xxs-600-text-transform: uppercase;
$sds-font-caps-xxs-600-color: black;
$sds-font-header-xxxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xxxs-600-font-size: 11px;
$sds-font-header-xxxs-600-letter-spacing: 0.3px;
$sds-font-header-xxxs-600-line-height: 16px;
$sds-font-header-xxxs-600-font-weight: 600;
$sds-font-header-xxxs-600-color: black;
$sds-font-header-xxs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xxs-600-font-size: 12px;
$sds-font-header-xxs-600-letter-spacing: 0.3px;
$sds-font-header-xxs-600-line-height: 18px;
$sds-font-header-xxs-600-font-weight: 600;
$sds-font-header-xxs-600-color: black;
$sds-font-header-xs-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xs-600-font-size: 13px;
$sds-font-header-xs-600-letter-spacing: 0.3px;
$sds-font-header-xs-600-line-height: 18px;
$sds-font-header-xs-600-font-weight: 600;
$sds-font-header-xs-600-color: black;
$sds-font-header-s-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-s-600-font-size: 14px;
$sds-font-header-s-600-letter-spacing: 0.3px;
$sds-font-header-s-600-line-height: 20px;
$sds-font-header-s-600-font-weight: 600;
$sds-font-header-s-600-color: black;
$sds-font-header-m-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-m-600-font-size: 16px;
$sds-font-header-m-600-letter-spacing: 0.3px;
$sds-font-header-m-600-line-height: 22px;
$sds-font-header-m-600-font-weight: 600;
$sds-font-header-m-600-color: black;
$sds-font-header-l-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-l-600-font-size: 18px;
$sds-font-header-l-600-letter-spacing: 0.3px;
$sds-font-header-l-600-line-height: 24px;
$sds-font-header-l-600-font-weight: 600;
$sds-font-header-l-600-color: black;
$sds-font-header-xl-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xl-600-font-size: 22px;
$sds-font-header-xl-600-letter-spacing: 0.3px;
$sds-font-header-xl-600-line-height: 30px;
$sds-font-header-xl-600-font-weight: 600;
$sds-font-header-xl-600-color: black;
$sds-font-header-xxl-600-font-family: 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xxl-600-font-size: 26px;
$sds-font-header-xxl-600-letter-spacing: 0.3px;
$sds-font-header-xxl-600-line-height: 34px;
$sds-font-header-xxl-600-font-weight: 600;
$sds-font-header-xxl-600-color: black;
$sds-font-header-xxxs-600-font: 600, 11px/16px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xxs-600-font: 600, 12px/18px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xs-600-font: 600, 13px/18px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-s-600-font: 600, 14px/20px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-m-600-font: 600, 16px/22px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-l-600-font: 600, 18px/24px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xl-600-font: 600, 22px/30px 'Open Sans', 'OpenSans-SemiBold';
$sds-font-header-xxl-600-font: 600, 26px/34px 'Open Sans', 'OpenSans-SemiBold';
$sds-color-beta-100: #f4f0f9;
$sds-color-beta-200: #f0ebf6;
$sds-color-beta-400: #7a41ce;
Expand Down
Loading

0 comments on commit a966ab9

Please sign in to comment.