From 960356d903cb9b58888e6cd18c4eda1573625cb5 Mon Sep 17 00:00:00 2001 From: Zander Martineau Date: Sun, 14 May 2017 21:09:24 +0100 Subject: [PATCH 01/40] :fire: remove --- assets/src/scss/components/_scrollbars.scss | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 assets/src/scss/components/_scrollbars.scss diff --git a/assets/src/scss/components/_scrollbars.scss b/assets/src/scss/components/_scrollbars.scss deleted file mode 100644 index bf2eb99b..00000000 --- a/assets/src/scss/components/_scrollbars.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Scrollbar styling (only in webkit) - * ================================= - */ - -::-webkit-scrollbar { - width: 10px; - height: 10px; - background-color: darken($color-bg, 10%); -} - -::-webkit-scrollbar-thumb { - background: darken($color-bg, 40%); - cursor: pointer; -} From bc832f7589108ca67da02891e8b3da5d4aad6bfa Mon Sep 17 00:00:00 2001 From: Zander Martineau Date: Tue, 16 May 2017 08:01:36 +0100 Subject: [PATCH 02/40] update the browserslist to be more relevant --- .kickoff/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.kickoff/config.js b/.kickoff/config.js index 0f7a0378..cc299969 100644 --- a/.kickoff/config.js +++ b/.kickoff/config.js @@ -24,7 +24,7 @@ const ConfigOptions = function () { // We are supporting the last 2 browsers, any browsers with >5% market share, // and ensuring we support IE9+ with prefixes - browsers: ['> 5%', 'last 2 versions', 'ie > 8'], // config.css.browsers + browsers: ['> 1%', 'last 1 versions', 'ie > 9', 'not ie <= 8', 'edge >= 12'], // config.css.browsers }; // Javascript-related vars From 8b55fc81e164c511f44ce0c2b3a34526264f3f38 Mon Sep 17 00:00:00 2001 From: Zander Martineau Date: Tue, 16 May 2017 08:03:26 +0100 Subject: [PATCH 03/40] :bug: move invalid package.json `repo` to be `repository.page` --- .kickoff/config.js | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.kickoff/config.js b/.kickoff/config.js index cc299969..9a4f8d60 100644 --- a/.kickoff/config.js +++ b/.kickoff/config.js @@ -78,7 +78,7 @@ const ConfigOptions = function () { * ╚═╝ ╚═╝╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ * ${pkg.title} v${pkg.version} * ${pkg.homepage} - * ${pkg.repo} + * ${pkg.repository.page} */ `, diff --git a/package.json b/package.json index bb57eae7..9cc386c8 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "description": "A lightweight front-end framework for creating scalable, responsive websites", "version": "8.0.0", "homepage": "http://trykickoff.com", - "repo": "https://github.com/TryKickoff/kickoff/", "authors": [ { "name": "Zander Martineau", @@ -47,7 +46,8 @@ }, "repository": { "type": "git", - "url": "git://github.com/TryKickoff/kickoff.git" + "url": "git://github.com/TryKickoff/kickoff.git", + "page": "https://github.com/TryKickoff/kickoff/" }, "bugs": { "url": "https://github.com/TryKickoff/kickoff/issues" From 6e6af3f321b695c0952487603b752669c53bc550 Mon Sep 17 00:00:00 2001 From: Zander Martineau Date: Tue, 16 May 2017 08:05:30 +0100 Subject: [PATCH 04/40] :sparkles: use sass map for color main color-palette so we can make it easier to add variants of each color --- assets/src/scss/_color-palette.scss | 103 ++++++++++++++++------------ 1 file changed, 59 insertions(+), 44 deletions(-) diff --git a/assets/src/scss/_color-palette.scss b/assets/src/scss/_color-palette.scss index 0c5ec103..72be6f3c 100644 --- a/assets/src/scss/_color-palette.scss +++ b/assets/src/scss/_color-palette.scss @@ -6,55 +6,70 @@ * - Common colors * - Links * - Text selection - * -
* - Any others.. */ -// Generic colors -$blue : #288ad6; -$green : #16c98d; -$red : #fa5e5b; -$yellow : #feef6d; -$orange : #fe7c08; -$pink : #ff708e; -$purple : #8e44ad; -$gray : #95a5a6; - -$dark : #000; -$bright : #fff; - -$color-kickoff-blue : #181830; -$color-kickoff-orange : #fe7c08; - -// Color Scheme -$color-primary : #181830; -$color-secondary : $orange; -$color-highlight : $blue; - -// Common colors -$color-text : #444; -$color-bg : #f1f1f1; -$color-border : #ddd; - - -// Links -$color-link-default : $color-highlight; -$color-link-visited : $color-link-default; -$color-link-hover : darken($color-link-default, 20%); -$color-link-active : darken($color-link-default, 20%); +$color-palette: ( + bright: ( + base: #F9FAFB, + dark: #F4F6F8, + darker: #DFE4E8 + ), -// Text Selection -$color-selection : #fff; -$color-selection-bg : $color-primary; + dark: ( + base: #212B35, + light: #454F5B, + lighter: #637381 + ), + + primary: ( + base: #181830, + light: #292952, + dark: #0d0d19 + ), + + secondary: ( + base: #fe7c08, + light: #fea04c, + dark: #d26401 + ), + + text: ( + base: #212B35, + light: #454F5B + ), + background: ( + base: #f1f1f1 + ), -//
border color -$hr-color : lighten(#000, 70%); + link: ( + base: #fe7c08, + over: #fea04c + ) +); + +// Generic colors +$blue: #288ad6; +$green: #16c98d; +$red: #fa5e5b; +$yellow: #feef6d; +$orange: #fe7c08; +$pink: #ff708e; +$purple: #8e44ad; +$gray: #95a5a6; + +$color-kickoff-blue: #181830; +$color-kickoff-orange: #fe7c08; + +// Text Selection +$color-selection: ko-color(bright); +$color-selection-bg: ko-color(primary); // 3rd party brand colors - find more at brandcolors.net -$color-twitter : #55acee; -$color-facebook : #3b5998; -$color-youtube : #cd201f; -$color-pinterest : #bd081c; -$color-instagram : #e4405f; -$color-whatsapp : #25d366; +$color-twitter: #55acee; +$color-facebook: #3b5998; +$color-youtube: #cd201f; +$color-pinterest: #bd081c; +$color-instagram: #e4405f; +$color-whatsapp: #25d366; From 66cfcfedfc965501b7695b89ea9f0a93dd77b1a9 Mon Sep 17 00:00:00 2001 From: Zander Martineau Date: Tue, 16 May 2017 08:08:16 +0100 Subject: [PATCH 05/40] :sparkles: improve global sass vars - `$z-index` now a sass map - `$type` & `$breakpoint`'s keys now use t-shirt sizing to make it easier to remember them - new `$font-family` sass map to allow easy selection of common font-stacks e.g. `ko-font(sans)` --- assets/src/scss/_variables.scss | 124 ++++++++++++++++---------------- 1 file changed, 63 insertions(+), 61 deletions(-) diff --git a/assets/src/scss/_variables.scss b/assets/src/scss/_variables.scss index ffe4f282..858fa04a 100644 --- a/assets/src/scss/_variables.scss +++ b/assets/src/scss/_variables.scss @@ -3,13 +3,10 @@ * ================================= * - Typography * - Breakpoints - * - Paths * - Layout & Grid * - App-specific */ -/* stylelint-disable indentation */ - /** * Typography * ================================= @@ -18,41 +15,48 @@ * Set this in pixels (but do not add px), * the font-size mixin will convert to REMS */ -$font-size-base : 20; -$font-size-base-px : $font-size-base * 1px; -$font-size-base-narrow : $font-size-base - 2; -$font-size-base-narrow-px : $font-size-base-narrow * 1px; - -$leading-base : 1.4; -$line-height-base : round($font-size-base * $leading-base); // 20 * 1.4 -$baseline : $line-height-base * 1px; +$font-size-base: 20; +$leading-base: 1.4; +$line-height-base: round($font-size-base * $leading-base); // 20 * 1.4 +$baseline: $line-height-base * 1px; -$type-scale : 1.25; // Major third +$type-scale: 1.25; // 1.25 === Major third. See modularscale.com +/** + * Type sizes + * ================================= + * Set using a modular scale by default. + * Values can be changed to px, rem etc if needed + * + * Usage: ko-type(s), ko-type(m) + */ $type: ( - micro : ko-ms(-2), - small : ko-ms(-1), // h5, h6 - base : ko-ms(0), // p, h4 - mid : ko-ms(1), // h3 - large : ko-ms(2), // h2 - jumbo : ko-ms(3) // h1 + xs: ko-ms(-2), + s: ko-ms(-1), // h5, h6 + m: ko-ms(0), // [default] p, h4 + l: ko-ms(1), // h3 + xl: ko-ms(2), // h2 + xxl: ko-ms(3) // h1 ); -// Useful to set here when bold webfonts come as 400 font-weight. -$font-weight-bold : bold; - -// Font stacks -$font-family-system : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; -$font-family-sans : "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif : Georgia, "Times New Roman", Times, serif; -$font-family-mono : Menlo, Monaco, "Courier New", monospace; - -$font-family-base : $font-family-system; -$font-family-alt : $font-family-serif; +/** + * Font stacks + * ================================= + * + * Usage: ko-font(system), ko-font(sans) + */ +$font-family: ( + system: #{-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans"}, + sans: #{"Helvetica Neue", Helvetica, Arial, sans-serif}, + serif: #{Georgia, "Times New Roman", Times, serif}, + mono: #{Menlo, Monaco, "Courier New", monospace} +); -$font-family-headings : $font-family-base; // using inherit will use $font-family-base for all headings -$font-weight-headings : bold; // instead of browser default, bold -$line-height-headings : 1.1; +$font-family-base: ko-font(system); +$font-family-headings: ko-font(serif); +$line-height-headings: 1.1; +$font-weight-bold: bold; // Useful to set here when bold webfonts come as 400 font-weight. +$font-weight-headings: bold; // instead of browser default, bold /** @@ -62,21 +66,22 @@ $line-height-headings : 1.1; * You'll need to define your own breakpoints to suit your design * Add your breakpoints to this Sass map * Used in the Kickoff grid + * Usage: ko-bp(100) */ $breakpoints: ( - narrow : 400px, - mid : 750px, - wide : 1000px, - huge : 1250px + s: 400px, + m: 750px, + l: 1000px, + xl: 1250px ); // Setup layout max-width -$layout-margin : 0; // [in pixels] Space outside the grid -$layout-max-width : 1000; // [in pixels] -$layout-min-width : 960; // [in pixels] Minimum width for layout in Date: Tue, 16 May 2017 08:09:46 +0100 Subject: [PATCH 06/40] :hammer: update other sass files to use new functions etc --- assets/src/scss/components/_buttons.scss | 16 ++-- assets/src/scss/components/_code.scss | 12 +-- assets/src/scss/components/_icons.scss | 2 + assets/src/scss/components/_links.scss | 18 ++-- assets/src/scss/components/_tables.scss | 14 +-- .../forms/_form-theme-material.scss | 31 ++++--- .../forms/_form-theme-standard.scss | 35 ++++---- .../forms/_forms-custom-radioscheckboxes.scss | 9 +- .../forms/_forms-custom-select.scss | 2 +- .../{ => components}/styleguide/_swatch.scss | 34 +++---- assets/src/scss/kickoff.scss | 3 +- assets/src/scss/styleguide.scss | 80 ++++++++--------- styleguide/index.html | 88 +++++++++---------- 13 files changed, 169 insertions(+), 175 deletions(-) rename assets/src/scss/{ => components}/styleguide/_swatch.scss (67%) diff --git a/assets/src/scss/components/_buttons.scss b/assets/src/scss/components/_buttons.scss index 0e6a70f5..e0dc8813 100644 --- a/assets/src/scss/components/_buttons.scss +++ b/assets/src/scss/components/_buttons.scss @@ -12,12 +12,12 @@ /** * Define associated Button variables */ -$btn-borderRadius : 5px; -$btn-default-bgColor : $gray; -$btn-default-bgColor--highlight : darken($btn-default-bgColor, 10%); +$btn-borderRadius: 5px; +$btn-default-bgColor: $gray; +$btn-default-bgColor--highlight: darken($btn-default-bgColor, 10%); -$btn-primary-bgColor : $color-link-default; -$btn-primary-bgColor--highlight : darken($btn-primary-bgColor, 10%); +$btn-primary-bgColor: ko-color(link); +$btn-primary-bgColor--highlight: darken($btn-primary-bgColor, 10%); /** @@ -49,7 +49,7 @@ $btn-primary-bgColor--highlight : darken($btn-primary-bgColor, 10%); padding-top: 0; /* [6] */ padding-bottom: 0; /* [6] */ line-height: 2.5; /* [7] */ - height: 2.5em; /* [7] */ + height: 2.5em; /* [7] */ padding-right: 1.5em; /* [7] */ padding-left: 1.5em; /* [7] */ overflow: visible; /* [8] */ @@ -63,7 +63,7 @@ $btn-primary-bgColor--highlight : darken($btn-primary-bgColor, 10%); &, &:link, &:visited { - color: #fff; + color: ko-color(bright); } &:hover, @@ -102,7 +102,7 @@ $btn-primary-bgColor--highlight : darken($btn-primary-bgColor, 10%); &, &:link, &:visited { - color: #fff; + color: ko-color(bright); } &:hover, diff --git a/assets/src/scss/components/_code.scss b/assets/src/scss/components/_code.scss index 348b78d3..afa9da65 100644 --- a/assets/src/scss/components/_code.scss +++ b/assets/src/scss/components/_code.scss @@ -7,17 +7,17 @@ /** * Define associated Code variables */ -$code-textColor : #444; -$code-bgColor : #ddd; -$pre-textColor : #444; -$pre-bgColor : #ddd; +$code-textColor: #444; +$code-bgColor: #ddd; +$pre-textColor: #444; +$pre-bgColor: #ddd; // Inline and block code styles code, pre { padding: 0 3px 2px; - font-family: $font-family-mono; - @include ko-font-size(small); + font-family: ko-font(mono); + font-size: ko-rem(s); color: $code-textColor; border-radius: 3px; tab-size: 3; diff --git a/assets/src/scss/components/_icons.scss b/assets/src/scss/components/_icons.scss index 076ce5ff..fba62749 100644 --- a/assets/src/scss/components/_icons.scss +++ b/assets/src/scss/components/_icons.scss @@ -36,10 +36,12 @@ .icon--youtube { color: $color-youtube; } .icon--whatsapp { color: $color-whatsapp; } .icon--email { color: $blue; } + .icon--kickoff { fill: $color-kickoff-blue; color: $color-kickoff-orange; } + .icon--tmw { color: #ef7521; fill: #8a8b8c; diff --git a/assets/src/scss/components/_links.scss b/assets/src/scss/components/_links.scss index cc14e918..c360be8f 100644 --- a/assets/src/scss/components/_links.scss +++ b/assets/src/scss/components/_links.scss @@ -6,23 +6,19 @@ a { transition: $default-transition; - &, &:link { - color: $color-link-default; - text-decoration: none; - } - + &, + &:link, &:visited { - color: $color-link-visited; + color: ko-color(link); text-decoration: none; } - &:hover, &:focus { - color: $color-link-hover; - //text-decoration: underline; + &:hover, + &:focus { + color: ko-color(link, over); } &:active { - color: $color-link-active; - //text-decoration: underline; + color: ko-color(link, over); } } diff --git a/assets/src/scss/components/_tables.scss b/assets/src/scss/components/_tables.scss index 6df4605f..5d23194c 100644 --- a/assets/src/scss/components/_tables.scss +++ b/assets/src/scss/components/_tables.scss @@ -11,15 +11,15 @@ /** * Define associated Table variables */ -$table-bgColor : $color-bg !default; // Default background color used for all tables. -$table-bgColor--accent : #f9f9f9 !default; // Background color used for `.table-striped`. -$table-bgColor--hover : inherit !default; // Background color used for `.table-hover` – set to 'inherit' by default (so no hover effect) -$table-borderColor : #ccc !default; // Border color for table and cell borders. +$table-bgColor: ko-color(background) !default; // Default background color used for all tables. +$table-bgColor--accent: #f9f9f9 !default; // Background color used for `.table-striped`. +$table-bgColor--hover: inherit !default; // Background color used for `.table-hover` – set to 'inherit' by default (so no hover effect) +$table-borderColor: #ccc !default; // Border color for table and cell borders. /** * Customizes the `.table` component with basic values, each used across all table variations. */ -$table-cell-padding : 8px !default; // Padding for ``s and ``s. +$table-cell-padding: 8px !default; // Padding for ``s and ``s. // Baseline styles @@ -83,7 +83,7 @@ table { // Nesting & table, & .table { - background-color: $color-bg; + background-color: ko-color(background); } } @@ -112,7 +112,7 @@ th { * https://github.com/filamentgroup/tablesaw */ .responsiveTable { - @include media('mid') { +@include media('>m') { /** * Horizontal-specific styles * ================================= diff --git a/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss b/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss index 6cab92ef..2b4e96f6 100644 --- a/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss +++ b/assets/src/scss/components/forms/_forms-custom-radioscheckboxes.scss @@ -24,13 +24,12 @@ * * * ================================= */ -// $custom-input-color: $color-primary; -$custom-input-color: $color-primary; -$custom-input-selected-color: $color-bg; +$custom-input-color: ko-color(primary); +$custom-input-selected-color: ko-color(background); $custom-input-length: 1.3em; $custom-input-border-width: 1px; $custom-input-borderColor: #ccc !default; -$custom-input-borderColor--focus: $color-primary !default; +$custom-input-borderColor--focus: ko-color(primary) !default; $checkbox-indicator-width: 0.1em; .control--custom { @@ -73,7 +72,7 @@ $checkbox-indicator-width: 0.1em; // :focus styles .control--custom-input:focus ~ .control-indicator { - box-shadow: 0 0 0 2px $color-bg, 0 0 0 3px $custom-input-borderColor--focus; + box-shadow: 0 0 0 2px ko-color(background), 0 0 0 3px $custom-input-borderColor--focus; } // Checkbox modifiers diff --git a/assets/src/scss/components/forms/_forms-custom-select.scss b/assets/src/scss/components/forms/_forms-custom-select.scss index 25b41bc1..33be5550 100644 --- a/assets/src/scss/components/forms/_forms-custom-select.scss +++ b/assets/src/scss/components/forms/_forms-custom-select.scss @@ -22,7 +22,7 @@ /* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select */ &:after { - color: $color-primary; + color: ko-color(primary); content: "\25BC"; font-size: .7em; padding: 0; diff --git a/assets/src/scss/styleguide/_swatch.scss b/assets/src/scss/components/styleguide/_swatch.scss similarity index 67% rename from assets/src/scss/styleguide/_swatch.scss rename to assets/src/scss/components/styleguide/_swatch.scss index fceba73e..4228fd5e 100644 --- a/assets/src/scss/styleguide/_swatch.scss +++ b/assets/src/scss/components/styleguide/_swatch.scss @@ -2,7 +2,7 @@ * Colour swatches */ .sg-swatch { - border: 1px solid rgba(#000, .2); + border: 1px solid rgba(ko-color(dark), 0.2); border-radius: 4px; padding: 15px; margin: 15px; @@ -11,7 +11,7 @@ cursor: pointer; &:hover { - border-color: rgba(#000, .6); + border-color: rgba(ko-color(dark), 0.6); } &.is-active { @@ -43,7 +43,7 @@ .sg-swatch-var { width: 100%; - font-family: $font-family-mono; + font-family: ko-font(mono); margin-top: 15px; font-size: 12px; display: block; @@ -68,27 +68,29 @@ } } -.sg-color-link-hover { - @include ko-swatch($color-link-hover); +.sg-color-bright { + @include ko-swatch(ko-color(bright)); } + +.sg-color-dark { + @include ko-swatch(ko-color(dark)); +} + .sg-color-primary { - @include ko-swatch($color-primary); + @include ko-swatch(ko-color(primary)); } .sg-color-secondary { - @include ko-swatch($color-secondary); -} -.sg-color-highlight { - @include ko-swatch($color-highlight); + @include ko-swatch(ko-color(secondary)); } .sg-color-text { - @include ko-swatch($color-text, $color-bg); + @include ko-swatch(ko-color(text)); } .sg-color-background { - @include ko-swatch($color-bg); -} -.sg-color-border { - @include ko-swatch($color-border); + @include ko-swatch(ko-color(background)); } .sg-color-link { - @include ko-swatch($color-link-default); + @include ko-swatch(ko-color(link)); +} +.sg-color-link-over { + @include ko-swatch(ko-color(link, over)); } diff --git a/assets/src/scss/kickoff.scss b/assets/src/scss/kickoff.scss index 084b0f76..978e7ea0 100644 --- a/assets/src/scss/kickoff.scss +++ b/assets/src/scss/kickoff.scss @@ -36,7 +36,7 @@ /* * Mixins, helpers and functions */ -@import "kickoff-utils"; // From github.com/mrmartineau/kickoff-utils.scss +@import "kickoff-utils"; // From github.com/TryKickoff/kickoff-utils.scss @import "include-media"; // From include-media.com @@ -78,7 +78,6 @@ @import "components/skip-navigation"; @import "components/code"; @import "components/tables"; -// @import "components/scrollbars"; // yo:start -- component // yo:end -- component diff --git a/assets/src/scss/styleguide.scss b/assets/src/scss/styleguide.scss index eaa0f49d..9be84a0e 100644 --- a/assets/src/scss/styleguide.scss +++ b/assets/src/scss/styleguide.scss @@ -8,10 +8,10 @@ @import "variables"; @import "kickoff-grid"; // https://github.com/mrmartineau/kickoff-grid.css -$styleguide-color-primary: $color-primary; -$styleguide-type: $font-family-system; +$styleguide-color-primary: ko-color(primary); +$styleguide-type: ko-font(system); -@import "styleguide/swatch"; +@import "components/styleguide/swatch"; /** * Styleguide styles @@ -66,8 +66,8 @@ body { color: #fff; padding: 30px; margin-top: 30px; - font-family: $font-family-mono; - @include ko-font-size(12); + font-family: ko-font(mono); + font-size: ko-rem(12); h1 { margin-bottom: 0.2em; @@ -96,11 +96,13 @@ body { .sg-logo { padding: 1em; text-align: center; - color: $color-primary; + color: ko-color(primary); + fill: ko-color(dark, lighter); &--dark { - background-color: #000; + background-color: ko-color(dark); color: #fff; + fill: ko-color(secondary); } svg { @@ -120,7 +122,7 @@ body { code { border: 0; background-color: transparent; - @include ko-font-size(12); + font-size: ko-rem(12); } [data-copy] { @@ -134,29 +136,25 @@ code { @mixin ko-sgTypeTest($size) { .sg-type-item { - @include ko-font-size($size); + font-size: ko-rem($size); &::after { - content: 'Name: #{$size} // Size: #{ko-getValue($size, $type)}px // Use: @include ko-font-size(#{$size}) '; - @include ko-font-size(micro); + content: 'Name: #{$size} // Size: #{ko-getValue($size, $type)}px // Use: font-size: ko-rem(#{$size}) '; + font-size: ko-rem(s); display: block; font-weight: normal; - font-family: $font-family-mono; + font-family: ko-font(mono); opacity: 0.6; } } } - -.sg-type-micro { @include ko-sgTypeTest(micro); } -.sg-type-smallest { @include ko-sgTypeTest(smallest); } -.sg-type-smaller { @include ko-sgTypeTest(smaller); } -.sg-type-small { @include ko-sgTypeTest(small); } -.sg-type-base { @include ko-sgTypeTest(base); } -.sg-type-mid { @include ko-sgTypeTest(mid); } -.sg-type-large { @include ko-sgTypeTest(large); } -.sg-type-largest { @include ko-sgTypeTest(largest); } -.sg-type-jumbo { @include ko-sgTypeTest(jumbo); } +.sg-type-xs { @include ko-sgTypeTest(xs); } +.sg-type-s { @include ko-sgTypeTest(s); } +.sg-type-m { @include ko-sgTypeTest(m); } +.sg-type-l { @include ko-sgTypeTest(l); } +.sg-type-xl { @include ko-sgTypeTest(xl); } +.sg-type-xxl { @include ko-sgTypeTest(xxl); } .sg-typeSpecimen { margin-bottom: 0; @@ -168,28 +166,28 @@ code { display: block; @extend .sg-interfaceType; @extend .sg-interfaceType--subtle; - @include ko-font-size(16); + font-size: ko-rem(m); margin-top: 5px; border-top: 1px solid #ddd; font-weight: normal; } } -// h1.typeSpecimen::after { content: "Font stack: #{$font-family-headings}"; } -// p.typeSpecimen::after { content: "Font stack: #{$font-family-base}"; } +// h1.typeSpecimen::after { content: "Font stack: #{ko-font(headings)}"; } +// p.typeSpecimen::after { content: "Font stack: #{ko-font(base)}"; } -.sg-typeSpecimen--primary { - @include ko-font-size(30); +.sg-typeSpecimen--body { + font-size: ko-rem(30); font-family: $font-family-base; } -.sg-typeSpecimen--secondary { - @include ko-font-size(30); - font-family: $font-family-alt; +.sg-typeSpecimen--headings { + font-size: ko-rem(30); + font-family: $font-family-headings; } .sg-typeSpecimen--giant { - @include ko-font-size(120); + font-size: ko-rem(120); line-height: 1; } @@ -217,19 +215,19 @@ code { .sg-hr { height: 3px; - margin: ($baseline * 2) 0; + margin: ko-multiply($baseline, 2) 0; } .sg-hr--subtle { height: 3px; - background-color: fade-out($hr-color, 0.6); + background-color: fade-out(ko-color(dark, light), 0.6); } @mixin ko-sgVar($var) { line-height: 2; - font-family: $font-family-mono; + font-family: ko-font(mono); border-bottom: 1px solid rgba(#000, 0.1); - @include ko-font-size(12); + font-size: ko-rem(12); strong { opacity: 0.6; @@ -237,7 +235,7 @@ code { display: block; user-select: none; - @include media('>mid') { + @include media('>m') { width: 20%; display: inline-block; } @@ -249,7 +247,7 @@ code { } .sg-var-item { - color: $color-secondary; + color: ko-color(secondary); margin-right: 10px; display: inline-block; } @@ -267,19 +265,19 @@ code { } .sg-var--fontFamilyMono { - @include ko-sgVar($font-family-mono); + @include ko-sgVar(ko-font(mono)); } .sg-var--fontFamilySystem { - @include ko-sgVar($font-family-system); + @include ko-sgVar(ko-font(system)); } .sg-var--fontFamilySans { - @include ko-sgVar($font-family-sans); + @include ko-sgVar(ko-font(sans)); } .sg-var--fontFamilySerif { - @include ko-sgVar($font-family-serif); + @include ko-sgVar(ko-font(serif)); } .sg-var--breakpoints { diff --git a/styleguide/index.html b/styleguide/index.html index a0e41c9c..75a7df28 100644 --- a/styleguide/index.html +++ b/styleguide/index.html @@ -37,7 +37,7 @@

Styleguide

Logo

-
+