ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove typey lib, will replace with internal mixins and modern css.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-01-25 09:52:39 +01:00
commit e59b75bce5
18 changed files with 0 additions and 1074 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/sass/lib/typey/stylesheets/_typey.scss
View file

@ -1,17 +0,0 @@
@import "typey/functions/helpers";
@import "typey/functions/validators";
@import "typey/functions/em-calculators";
@import "typey/functions/outputters";
@import "typey/functions/sizers";
@import "typey/functions/extras";
@import "typey/functions/depreciated";
@import "typey/font-stacks";
@import "typey/defaults";
@import "typey/mixins/debug";
@import "typey/mixins/define-type-sizing";
@import "typey/mixins/font-size";
@import "typey/mixins/line-height";
@import "typey/mixins/spacing";
@import "typey/mixins/typeface";
@import "typey/mixins/typeset";
@import "typey/mixins/type-layout";

181
assets/sass/lib/typey/stylesheets/typey/_defaults.scss
View file

@ -1,181 +0,0 @@
// The browser font size default. No need to change this.
// Allowed units: px
$browser-font-size: 16px !default;
// Allowed units: rem, em or px
$base-unit: rem !default;
// The base font size will be used for most calculations involving font-size.
// Allowed units: px
$base-font-size: 16px !default;
// The base line height will be used for most calculations involving height.
// Allowed units: px
$base-line-height: 24px !default;
// The method to calculate line-height. Allowed values: rhythm or ratio.
// Rhytm uses a vertical rhythm approach where line-height is specified as
// a multiple of the $base-line-height.
// Ratio uses a ratio approach where line-height is specified as a ratio
// of the elements font-size.
$line-height-method: rhythm !default;
// The default ratio of line-height to font-size.
$base-line-height-ratio: 1.5 !default;
// By default we will provide fallbacks when rem is the base unit.
$rem-fallback: true !default;
// By default, when rem or em are the base unit we will output a print suitable
// media query with the define-type-sizing() mixin. This will take care of all
// print media type sizing effortlessly.
$auto-print-sizing: true !default;
// The pt font-size to be used with the print media query when
// $auto-print-sizing is enabled.
// Allowed units: pt
$print-font-size: 12pt !default;
// Default font sizes
// Once you redefine the $font-size map it will overwrite all sizes here.
// Allowed units: px
$font-size: (
xxxl: 60px,
xxl: 46px,
xl: 32px,
l: 24px,
m: 16px,
s: 14px,
xs: 12px
) !default;
// Default font weights
// This map and accompanying function help provide granular control over
// setting and retrieving static font weights.
$font-weight: (
bold: 700,
normal: 400,
lighter: 200
) !default;
// Declare typefaces
// These can use any key you like, and allow you to set global letter-spacing,
// weight and case for font-families. You can then use the
// font-family mixin to embed your font families anywhere you like.
//
// Each key in the $typefaces map can either be a keyed map of settings
// using any combination of the keys below, or it can be a shorthand list
// of each property value. When using shorthand it doesn't matter what order
// each value is arranged in, but best practice is to do it in the order:
// [font-family] [letter-spacing] [weight] [case]
//
// @setting list font-family
// Any standard CSS font-family. Use typey pre-written stacks or roll your own.
// @setting number letter-spacing
// CSS letter-spacing. Specified as a px value when font-size is the
// $base-font-size.
// @setting string weight
// A key from the $font-weight map. Only specify this if you want a consistant
// font-weight used accross the board with this typeface.
// @setting string case
// A value for CSS text-transform. Only specify this if you want a consistant
// case used accross the board with this typeface.
$typefaces: () !default;
// Declare typestyles
// These can use any key you like, and allow you to set an easily reusable type
// style. They can be as simple as a font-size and line-height, or can go on
// to encompass a full range of css type properties.
//
// Each key in the $typestyles map can either be a keyed map of settings
// using any combination of the keys below, or it can be a shorthand list
// of each property value. When using shorthand for $typestyles, the first value
// must always be font-size. After that it doesn't matter what order each value
// is arranged in, but best practice is to do it in the order:
// [font-size] [line-height] [weight] [case]
//
// @setting number|string font-size
// A size from the $font-size map or px value to be converted
// @setting number $x line-height
// Multiple of line height, ratio or px value to be converted.
// @setting string weight
// A key from the $font-weight map.
// @setting string case
// A value for CSS text-transform.
$typestyles: () !default;
// Debug grid
// Shows horizontal lines for each elements line height.
$typey-debug: false !default;
// Debug grid coloring
$typey-debug-color: #4affff !default;
// Lets store the allowed values for text-transform and font-style so we can
// make shorthand work a little better.
$text-transform-values: (
lowercase,
uppercase,
capitalize
) !default;
$font-style-values: (
normal,
italic,
oblique
) !default;
// Warnings for $base-unit.
@if $base-unit != px and $base-unit != rem and $base-unit != em {
@error "$base-unit must be one of the following unit types: rem, em or px";
}
// Warnings for $base-font-size and $base-line-height.
@if unit($base-font-size) != px {
@error "$base-font-size must be in px";
}
@if unit($base-line-height) != px {
@error "$base-line-height must be in px";
}
// Warnings for $print-font-size.
@if unit($print-font-size) != pt {
@error "$print-font-size must be in pt";
}
// Warnings for $font-size.
@each $key, $size in $font-size {
@if unit($size) != px {
@error "Size '#{$key}' in $font-size map is not specified in px";
}
}
// Warnings for $font-weight.
$typey-text-transform-properties: none capitalize uppercase lowercase initial inherit;
@each $property in $typey-text-transform-properties {
@if map-has-key($font-weight, $property) {
@warn "'#{$property}' used in $font-weight map is a potential value of the text-transform property and will conflict when using typey shorthand";
}
}
// Warnings for $typefaces.
@each $key, $typeface in $typefaces {
@if type-of($typeface) != "map" and type-of($typeface) != "list" {
@error "Typeface '#{$key}' in $typefaces map must be a keyed map or a shorthand list in the format: [font-family] [letter-spacing] [weight] [case]";
}
}
// Warnings for $typestyles.
@each $key, $typestyle in $typestyles {
@if type-of($typestyle) == "list" {
@each $value in $typestyle {
@if index($typestyle, $value) == 1 {
$allowed-types: "font-size", "px";
$type: typey-check-value($value);
@if index($allowed-types, $type) == null {
@error "Incorrect shorthand format used in '#{$key}' in $typestyles map: [font-size] must appear first";
}
}
}
}
}

4
assets/sass/lib/typey/stylesheets/typey/_font-stacks.scss
View file

@ -1,4 +0,0 @@
// Three standard do-all stacks.
$serif-stack: "Calisto MT", "Book Antiqua", serif !default;
$sans-serif-stack: "Helvetica Neue", Helvetica, sans-serif !default;
$monospace-stack: Consolas, "Lucida Console", monospace, monospace !default;

55
assets/sass/lib/typey/stylesheets/typey/functions/_depreciated.scss
View file

@ -1,55 +0,0 @@
// DEPRECIATED FUNCTIONS
// The names of these functions have been refined and namespaced (above) to avoid
// potential confusion with functions from other libraries.
// (Depreciated) Output a number in the $base-unit..
//
// @param string $weight
// A weight from the $font-weight map.
//
// @return string
// The selected font-weight.
@function output-unit($number) {
@warn "output-unit() is depreciated. Please use typey-output-in-base-unit() instead";
@return typey-output-in-base-unit($number);
}
// (Depreciated) Remove the unit from a number.
//
// @param number $number
// The number (with unit) to convert. Allowed units: any
//
// @return number
// The number without the unit.
@function strip-unit($number) {
@warn "strip-unit() is depreciated. Please use typey-strip-unit() instead";
@return typey-strip-unit($number);
}
// (Depreciated) Convert px to the $base-unit.
//
// @param number $number
// The number (with unit) to convert. Allowed units: px
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
//
// @return number
// The number converted to the base unit.
@function convert-unit($number, $context: $base-font-size) {
@warn "convert-unit() is depreciated. Please use output-from-px() instead";
@return output-from-px($number, $context);
}
// (Depreciated) Retrieve a font weight.
//
// @param string $weight
// A weight from the $font-weight map.
//
// @return string
// The selected font-weight.
@function font-weight($weight) {
@warn "font-weight() is depreciated. Please use weight() instead";
@return weight($weight);
}

41
assets/sass/lib/typey/stylesheets/typey/functions/_em-calculators.scss
View file

@ -1,41 +0,0 @@
// Calculate relative sizing for em when a px value is used.
//
// @param number $number
// The px value
// @param number|string $context
// The relative value to perform the calculation.
//
// @return number
// The calculated value in the base unit.
@function calculate-em-px($x, $context) {
$allowed-types: "font-size", "px";
$type: typey-validator($context, $allowed-types);
@if $type == "font-size" {
$context-map-size: map-get($font-size, $context);
@return typey-output-in-unit(($x / $context-map-size), em);
}
@if $type == "px" {
@return typey-output-in-unit(($x / $context), em);
}
}
// Calculate relative sizing for em when a multiplier is used.
//
// @param number $number
// Multiple of line height to be used.
// @param number|string $context
// The relative value to perform the calculation.
//
// @return number
// The calculated value in the base unit.
@function calculate-em-multiplier($x, $context) {
$allowed-types: "font-size", "px";
$type: typey-validator($context, $allowed-types);
@if $type == "font-size" {
$context-map-size: map-get($font-size, $context);
@return typey-output-in-unit(($x * $base-line-height) / $context-map-size, em);
}
@if $type == "px" {
@return typey-output-in-unit(($x * $base-line-height) / $context, em);
}
}

34
assets/sass/lib/typey/stylesheets/typey/functions/_extras.scss
View file

@ -1,34 +0,0 @@
// Retrieve a font weight.
//
// @param string $weight
// A weight from the $font-weight map.
//
// @return string
// The selected font-weight.
@function weight($weight) {
@if type-of($weight) == "string" {
@if map-has-key($font-weight, $weight) {
@return map-get($font-weight, $weight);
}
@else {
@error "'#{$weight}' not found in $font-weight map";
}
}
@else {
@error "Weight specified for weight() is not a string";
}
}
// Extend a font by adding a web-safe stack to it.
//
// Example usage:
// $new-font-stack: extend-font-stack("Open sans", $sans-serif-stack);
//
// @param string $font
// The name of the font. Use inverted commas if there are spaces in the font
// name. i.e "Open sans"
// @param list $font-stack
// The font stack variable to extend.
@function extend-font-stack($font, $font-stack) {
@return join($font, $font-stack, $separator: comma);
}

59
assets/sass/lib/typey/stylesheets/typey/functions/_helpers.scss
View file

@ -1,59 +0,0 @@
// Output a number in the $base-unit.
//
// @param number $number
// The number (without unit) to output.
//
// @return number
// The number with the base unit
@function typey-output-in-base-unit($number) {
@if $number == 0 {
@return 0;
}
@if $base-unit == rem {
@return $number * 1rem;
}
@if $base-unit == px {
@return $number * 1px;
}
@if $base-unit == em {
@return $number * 1em;
}
}
// Output a number in a chosen unit.
//
// @param number $number
// The number (without unit) to output.
// @param string $unit
// (optional) The unit to output, either em, px or rem.
//
// @return number
// The number with the base unit
@function typey-output-in-unit($number, $unit: $base-unit) {
@if $number == 0 {
@return 0;
}
@if $unit == rem {
@return $number * 1rem;
}
@if $unit == px {
@return $number * 1px;
}
@if $unit == em {
@return $number * 1em;
}
}
// Remove the unit from a number.
//
// @param number $number
// The number (with unit) to convert. Allowed units: any
//
// @return number
// The number without the unit.
@function typey-strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}

83
assets/sass/lib/typey/stylesheets/typey/functions/_outputters.scss
View file

@ -1,83 +0,0 @@
// Take a px value and output converted value.
//
// @param number $number
// A px value to convert.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
//
// @return number
// The number converted to the base unit.
@function output-from-px($number, $context: $base-font-size) {
@if $base-unit == rem {
@return typey-output-in-base-unit(($number / $base-font-size));
}
@if $base-unit == px {
@return typey-output-in-base-unit(typey-strip-unit($number));
}
@if $base-unit == em {
@return calculate-em-px($number, $context);
}
}
// Take a key from the $font-size map and output converted value.
//
// @param string $size
// A size from the $font-size map.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the parent
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
//
// @return number
// The selected font-size in $base-unit.
@function output-from-font-size-map($size, $context: $base-font-size) {
$map-size: map-get($font-size, $size);
@if $base-unit == rem {
@return typey-output-in-base-unit(($map-size / $base-font-size));
}
@if $base-unit == px {
@return typey-output-in-base-unit(typey-strip-unit($map-size));
}
@if $base-unit == em {
@return calculate-em-px($map-size, $context);
}
}
// Take a line-height multipler and output converted value.
//
// @param number $number
// Multiple of line height to be used.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
//
// @return number
// The value of the line-height multiple converted to the base unit.
@function output-from-multiplier($x, $context: $base-font-size) {
@if $base-unit == rem {
@return typey-output-in-base-unit(($x * $base-line-height) / $base-font-size);
}
@if $base-unit == px {
@return typey-output-in-base-unit(typey-strip-unit($x * $base-line-height));
}
@if $base-unit == em {
@return calculate-em-multiplier($x, $context);
}
}
// Take a line-height ratio and output as em.
//
// @param number $ratio
// Multiple of the $font-size to be used.
// @param number|string $context
// (optional) used to ensure function outputs the ratio regardless of whether
// it is the same as the $base-line-height-ratio.
//
// @return number
// The ratio in em.
@function output-from-ratio($ratio: $base-line-height-ratio) {
@return $ratio;
}

91
assets/sass/lib/typey/stylesheets/typey/functions/_sizers.scss
View file

@ -1,91 +0,0 @@
// Takes a sizing from the $font-size map (m, xl, xxl, etc) and convert it to
// the base unit. Alternatively convert a px font-size into the base unit.
//
// @param number|string $size
// A size from the $font-size map or px value to be converted
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the parent
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
//
// @return number
// The selected font-size in $base-unit.
@function font-size($size, $context: $base-font-size) {
$allowed-types: "font-size", "px";
$type: typey-validator($size, $allowed-types);
@if $type == "font-size" {
@return output-from-font-size-map($size, $context);
}
@if $type == "px" {
@return output-from-px($size, $context);
}
}
// Generate a value to be used as line-height from either:
// a) a multiple of $base-line-height
// b) a static px value
// c) a ratio of the font-size
//
// Example usage with multiple:
// line-height: line-height(2);
// Example usage with static value:
// line-height: line-height(18px);
// Example usage with ratio:
// line-height: line-height(1.5);
//
// @param number $x
// Multiple of $base-line-height to be used, px value to be converted, or ratio of
// font-size.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the
// elements/parents font-size if it differs from $base-font-size.
// Specified as a t-shirt size or value in px.
// @return number
// The calculated height in $base-unit.
@function line-height($x, $context: $base-font-size) {
$allowed-types: "multiplier", "px";
$type: typey-validator($x, $allowed-types);
@if $type == "multiplier" {
@if ($line-height-method == "ratio") {
@return output-from-ratio($x);
}
@else {
@return output-from-multiplier($x, $context);
}
}
@if $type == "px" {
@return output-from-px($x, $context);
}
}
// Generate a value to be used as some form of height or spacing from either:
// a) a multiple of $base-line-height
// b) a static px value
//
// Example usage with multiple:
// height: spacing(2);
// Example usage with static value:
// margin-bottom: spacing(18px);
//
// @param number $x
// Multiple of $base-line-height to be used or px value to be converted.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
//
// @return number
// The calculated spacing in $base-unit.
@function spacing($x, $context: $base-font-size) {
$allowed-types: "multiplier", "px", "auto";
$type: typey-validator($x, $allowed-types);
@if $type == "multiplier" {
@return output-from-multiplier($x, $context);
}
@if $type == "px" {
@return output-from-px($x, $context);
}
@if $type == "auto" {
@return auto;
}
}

82
assets/sass/lib/typey/stylesheets/typey/functions/_validators.scss
View file

@ -1,82 +0,0 @@
// Takes a value and checks to ensure it's expressed correctly then returns
// the type.
//
// @param number|string|list $x
// A multiple of $base-line-height.
// A px value.
// A size from the $font-size map.
// A space seperated list container multiples and/or px values.
//
// @return string
// multiplier, px, font-size, list
@function typey-check-value($x) {
@if type-of($x) == "number" {
@if unitless($x) {
@return "multiplier";
}
@if not unitless($x) {
@if unit($x) == px {
@return "px";
}
@else {
@error "All units must be expressed in px";
}
}
}
@if type-of($x) == "string" {
@if $x == "auto" {
@return "auto";
}
@if map-has-key($font-size, $x) {
@return "font-size";
}
@else {
@error "'#{$x}' not found in $font-size map";
}
}
@if type-of($x) == "list" {
@if list-separator($x) == space {
@each $value in $x {
@if type-of($value) == "number" or $value == "auto" {
@if type-of($value) == "number" {
@if not unitless($value) and unit($value) != px {
@error "All units must be expressed in px";
}
}
}
@else {
@error "Values specified inside lists must be a number or 'auto'";
}
}
@return "list";
}
@else {
@error "All lists must use a space as their seperator";
}
}
@else {
@return type-of($x);
}
}
// Takes a value and validates it against a specified type.
//
// @param number|string|list $x
// A multiple of $base-line-height.
// A px value.
// A size from the $font-size map.
// A space seperated list container multiples and/or px values.
// @param string|list $allowed-types
// Either multiplier, px, font-size, list, or a comibation specified in a list.
//
// @return string
// The values type.
@function typey-validator($x, $allowed-types) {
$type: typey-check-value($x);
@if index($allowed-types, $type) != null {
@return $type;
}
@else {
@error "'#{$type}' is not a valid type for this function (allowed types are: #{$allowed-types})";
}
}

41
assets/sass/lib/typey/stylesheets/typey/mixins/_debug.scss
View file

@ -1,41 +0,0 @@
// Output a horizontal grid to help with debugging typography.
//
// @param number $line-height
// Multiple of line height to be used, line-height ratio or px value to be converted.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the
// elements/parents font-size if it differs from $base-font-size.
// Specified as a t-shirt size or value in px.
// @param string $color
// (optional) Use a custom grid color.
@mixin typey-debug-grid($line-height: $base-line-height, $context: $base-font-size, $color: $typey-debug-color) {
@if $typey-debug == true {
$allowed-types: "multiplier", "px";
$type: typey-validator($line-height, $allowed-types);
$grid-height: 0;
@if $line-height-method == "rhythm" {
$grid-height: line-height($line-height, $context);
}
@if $line-height-method == "ratio" {
@if $line-height == $base-line-height {
$grid-height: line-height($base-line-height-ratio, $context) * 1em;
}
@else {
$grid-height: line-height($line-height, $context) * 1em;
}
}
position: relative;
background-image: repeating-linear-gradient(180deg, $color, $color 1px, transparent 1px, transparent $grid-height);
&:after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
height: 1px;
width: 100%;
background-color: $color;
}
}
}

45
assets/sass/lib/typey/stylesheets/typey/mixins/_define-type-sizing.scss
View file

@ -1,45 +0,0 @@
// Define defaults (use this in the HTML element).
//
// @param number $size
// (optional) The font-size. Use to set to anything other than $base-font-size.
// @param number $line-height
// (optional) The line-height. Use to set to anything other than $base-line-height.
// Set to a ratio when $line-height-as-ratio is true. Will default to $base-line-height-ratio.
// Set to false if you do not want to change a ratio of line-height already set.
@mixin define-type-sizing($size: $base-font-size, $line-height: $base-line-height) {
@if $base-unit == rem or $base-unit == em {
font-size: $size / $browser-font-size * 100%;
}
@if $base-unit == px {
font-size: $size;
}
@if $line-height != false {
@if $line-height-method == "ratio" {
@if $line-height == $base-line-height {
$line-height: $base-line-height-ratio;
}
line-height: $line-height;
}
@else {
@if $base-unit == rem or $base-unit == em {
// In the html element, rem means relative to browser default font size; em means relative to html's font size.
line-height: calculate-em-px($line-height, $size);
}
@if $base-unit == px {
line-height: $line-height;
}
}
}
@if $auto-print-sizing == true {
@if $base-unit == rem or $base-unit == em {
@media print {
font-size: $print-font-size;
}
}
@else {
@warn "As you are not using a relative base unit (rem or em) automatic print media sizing will not work. Set $auto-print-sizing to false to hide this warning"
}
}
}

24
assets/sass/lib/typey/stylesheets/typey/mixins/_font-size.scss
View file

@ -1,24 +0,0 @@
// Define font-size (with fallback)
//
// @param number|string $size
// A size from the $font-size map or px value to be converted
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
@mixin font-size($size, $context: $base-font-size) {
$allowed-types: "font-size", "px";
$type: typey-validator($size, $allowed-types);
@if $base-unit == rem {
@if $rem-fallback == true {
@if $type == "font-size" {
$map-size: map-get($font-size, $size);
font-size: $map-size;
}
@if $type == "px" {
font-size: $size;
}
}
}
font-size: font-size($size, $context);
}

23
assets/sass/lib/typey/stylesheets/typey/mixins/_line-height.scss
View file

@ -1,23 +0,0 @@
// Define line-height (with fallback).
//
// @param number $x
// Multiple of line height to be used or px value to be converted.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the
// elements/parents font-size if it differs from $base-font-size.
// Specified as a t-shirt size or value in px.
@mixin line-height($x, $context: $base-font-size) {
$allowed-types: "multiplier", "px";
$type: typey-validator($x, $allowed-types);
@if $base-unit == rem and $line-height-method == "rhythm" {
@if $rem-fallback == true {
@if $type == "multiplier" {
line-height: $x * $base-line-height;
}
@if $type == "px" {
line-height: $x;
}
}
}
line-height: line-height($x, $context);
}

89
assets/sass/lib/typey/stylesheets/typey/mixins/_spacing.scss
View file

@ -1,89 +0,0 @@
// Define spacing (with fallbacks).
//
// @param string $type
// The type of spacing: margin, padding, margin-top, etc.
// @param number|list|string $spacing
// Multiple of $base-line-height to be used or px value to be converted.
// Can be a SASS list using the same parameters as the CSS margin property:
// i.e. top right bottom left, 1 0 2 0.
// Can also be the string "auto" when used as margin.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
@mixin spacing($property, $spacing, $context: $base-font-size) {
$allowed-types: "multiplier", "px", "list";
$type: typey-validator($spacing, $allowed-types);
$px-fallback-list: ();
$converted-list: ();
@each $x in $spacing {
@if $base-unit == rem {
$allowed-types: "multiplier", "px", "auto";
$type: typey-validator($x, $allowed-types);
@if $type == "multiplier" {
$spacing: $x * $base-line-height;
$px-fallback-list: join($px-fallback-list, $spacing, $separator: space);
}
@if $type == "px" {
$px-fallback-list: join($px-fallback-list, $x, $separator: space);
}
@if $type == "auto" {
$px-fallback-list: join($px-fallback-list, $x, $separator: space);
}
}
$spacing: spacing($x, $context);
$converted-list: join($converted-list, $spacing, $separator: space);
}
@if $base-unit == rem {
@if $rem-fallback == true {
#{$property}: $px-fallback-list;
}
}
#{$property}: $converted-list;
}
// Wrapper mixins for various spacing properties.
// These can be used to provide easily sized spacing in the base unit.
//
// @param number|list|string $x
// Multiple of $base-line-height to be used or px value to be converted.
// Can be a SASS list using the same parameters as the CSS margin property:
// i.e. top right bottom left, 1 0 2 0.
// Can also be the string "auto" when used as margin.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the elements/parents
// font-size if it differs from $base-font-size. Specified as a t-shirt size or
// value in px.
@mixin margin($x, $context: $base-font-size) {
@include spacing(margin, $x, $context);
}
@mixin margin-top($x, $context: $base-font-size) {
@include spacing(margin-top, $x, $context);
}
@mixin margin-bottom($x, $context: $base-font-size) {
@include spacing(margin-bottom, $x, $context);
}
@mixin margin-left($x, $context: $base-font-size) {
@include spacing(margin-left, $x, $context);
}
@mixin margin-right($x, $context: $base-font-size) {
@include spacing(margin-right, $x, $context);
}
@mixin padding($x, $context: $base-font-size) {
@include spacing(padding, $x, $context);
}
@mixin padding-top($x, $context: $base-font-size) {
@include spacing(padding-top, $x, $context);
}
@mixin padding-bottom($x, $context: $base-font-size) {
@include spacing(padding-bottom, $x, $context);
}
@mixin padding-left($x, $context: $base-font-size) {
@include spacing(padding-left, $x, $context);
}
@mixin padding-right($x, $context: $base-font-size) {
@include spacing(padding-right, $x, $context);
}

15
assets/sass/lib/typey/stylesheets/typey/mixins/_type-layout.scss
View file

@ -1,15 +0,0 @@
// Define a type layout (font-size and line-height).
//
// @param number|string $size
// A size from the $font-size map or a px value.
// @param number $line-height
// Multiple of line height to be used or px value to be converted.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the
// elements/parents font-size if it differs from $base-font-size.
// Specified as a t-shirt size or value in px.
@mixin type-layout($size, $line-height, $context: $base-font-size) {
@include font-size($size, $context);
@include line-height($line-height, $size);
@include typey-debug-grid($line-height, $size);
}

90
assets/sass/lib/typey/stylesheets/typey/mixins/_typeface.scss
View file

@ -1,90 +0,0 @@
// Embed a typeface.
//
// @param string $typeface
// A font family from the $typefaces map.
@mixin typeface($typeface) {
$typeface-name: $typeface;
$typeface: map-get($typefaces, $typeface);
$font-family: false;
$letter-spacing: false;
$weight: false;
$style: false;
$case: false;
// Assign values to variables when $typeface is a keyed map.
@if type-of($typeface) == "map" {
@if map-has-key($typeface, font-family) {
$font-family: map-get($typeface, font-family);
}
@if map-has-key($typeface, letter-spacing) {
$letter-spacing: map-get($typeface, letter-spacing);
}
@if map-has-key($typeface, weight) {
$weight: map-get($typeface, weight);
}
@if map-has-key($typeface, style) {
$style: map-get($typeface, style);
}
@if map-has-key($typeface, case) {
$case: map-get($typeface, case);
}
}
// Assign values to variables when $typeface is shorthand.
@if type-of($typeface) == "list" {
@if (list-separator($typeface) == "comma") {
// This shorthand is just a list of fonts.
$font-family: $typeface;
}
@else {
@each $value in $typeface {
// This is a font-family.
@if type-of($value) == "list" {
$font-family: $value;
}
// This is a letter-spacing value.
@if type-of($value) == "number" {
$letter-spacing: $value;
}
// This is a font-weight value.
@if map-has-key($font-weight, $value) {
$weight: $value;
}
// This is a case value.
@else if type-of($value) == "string" and index($text-transform-values, $value) != null {
$case: $value;
}
// This is a style value.
@else if type-of($value) == "string" and index($font-style-values, $value) != null {
$style: $value;
}
}
}
}
// Output properties.
@if $font-family {
font-family: $font-family;
}
@else {
@error "Typeface '#{$typeface-name}' does not have a font-family";
}
@if $letter-spacing {
@if ($letter-spacing == 0) {
letter-spacing: 0;
}
@else {
letter-spacing: calculate-em-px($letter-spacing, $base-font-size);
}
}
@if $weight {
font-weight: weight($weight);
}
@if $style {
font-style: $style;
}
@if $case {
text-transform: $case;
}
}

100
assets/sass/lib/typey/stylesheets/typey/mixins/_typeset.scss
View file

@ -1,100 +0,0 @@
// Typeset your type.
//
// @param string $typestyle
// A type style from the $typestyles map.
// @param number|string $context
// (optional) Only used if em is the $base-unit. The value of the
// elements/parents font-size if it differs from $base-font-size.
// Specified as a t-shirt size or value in px.
@mixin typeset($typestyle, $context: $base-font-size) {
$typestyle: map-get($typestyles, $typestyle);
$font-size: false;
$line-height: false;
$weight: false;
$style: false;
$case: false;
$letter-spacing: false;
// Assign values to variables when $typestyle is a keyed map.
@if type-of($typestyle) == "map" {
@if map-has-key($typestyle, font-size) {
$font-size: map-get($typestyle, font-size);
}
@if map-has-key($typestyle, line-height) {
$line-height: map-get($typestyle, line-height);
}
@if map-has-key($typestyle, weight) {
$weight: map-get($typestyle, weight);
}
@if map-has-key($typestyle, style) {
$style: map-get($typestyle, style);
}
@if map-has-key($typestyle, case) {
$case: map-get($typestyle, case);
}
@if map-has-key($typestyle, letter-spacing) {
$letter-spacing: map-get($typestyle, letter-spacing);
}
}
// Assign values to variables when $typestyle is shorthand.
@if type-of($typestyle) == "list" {
@each $value in $typestyle {
// The first value is always font-size.
@if index($typestyle, $value) == 1 {
$font-size: $value;
}
// This is a line-height value.
@else if type-of($value) == "number" and index($typestyle, $value) == 2 {
$line-height: $value;
}
// This is a font-weight value.
@else if map-has-key($font-weight, $value) {
$weight: $value;
}
// This is a case value.
@else if type-of($value) == "string" and index($text-transform-values, $value) != null {
$case: $value;
}
// This is a style value.
@else if type-of($value) == "string" and index($font-style-values, $value) != null {
$style: $value;
}
// This is a letter-spacing value.
@else if type-of($value) == "number" and index($typestyle, $value) != 2 and index($typestyle, $value) != 1 {
$letter-spacing: $value;
}
}
}
// $typestyle may also be a solitary font-size.
@if type-of($typestyle) != "map" and type-of($typestyle) != "list" {
$font-size: $typestyle;
}
// Output properties.
@if $font-size {
@include font-size($font-size, $context);
}
@if $line-height {
@include typey-debug-grid($line-height, $font-size);
@include line-height($line-height, $font-size);
}
@else {
// Using default line-height so set debug grid accordingly.
@include typey-debug-grid($base-line-height, $font-size);
}
@if $weight {
font-weight: weight($weight);
}
@if $style {
font-style: $style;
}
@if $case {
text-transform: $case;
}
@if $letter-spacing {
letter-spacing: calculate-em-px($letter-spacing, $font-size);
}
}