npm.io
21.2.4 • Published 2 months ago

@talenra/stylebox

Licence
ISC
Version
21.2.4
Deps
1
Size
24 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

Talenra – Stylebox library for Sass

SCSS-flavoured ready-to-use design basics and style presets for Talenra Workspace

Contents

Installation

Add the @talenra registry to your .npmrc.

npm config set @talenra:registry=https://registry.npmjs.org/
npm login --scope=@talenra

Install the package.

npm i @talenra/stylebox

If you plan to use the typographic features of this library, you have to implement the required fonts in your app.

<!-- Place these lines in the header section of the index.html at the root of your app to load the required fonts. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet" />

Usage

Import the complete toolbox in your project.

// Import stylebox
@use '@talenra/stylebox';
Breakpoints
bp-get($name)
// Import stylebox
@use '@talenra/stylebox';

@media screen
and (max-width: #{stylebox.bp-get($name: "use-overlay-until") - 0.1px}) {
  // Styles for "overlay layout"
}

For media queries like above you might want to use the included and pre-configured media query manager (sass-mq). This is how the media query from the example above is written using sass-mq:

// Import stylebox
@use '@talenra/stylebox';

@include stylebox.mq($until: 'use-overlay-until') {
  // Styles for "overlay layout"
}
Parameters
Param Default Value Description
str $name null Breakpoint name, e.g. use-overlay-until

The table below shows all supported breakpoint names.

Breakpoint Name Value Description
use-overlay-until 1200px Use overlay-style layout for side-navigation and panels for viewports < use-overlay-until.
use-panel-medium-from 1588px Use medium-sized panels for viewports >= use-panel-medium-from.
use-panel-max-from 1834px Use max-sized panels for viewports >= use-panel-max-from.
use-sidenav-medium-from 1217px Use medium-sized side-navigation for viewports >= use-sidenav-medium-from.
use-sidenav-max-from 1687.5px Use max-sized side-navigation for viewports >= use-sidenav-max-from.

Note that the suffix -until excludes the given boundary while -from includes it (e.g. overlay-style is used for viewports smaller 1200px while medium-sized panels are used for viewports of 1588px width).

Colors
color-get($name, $tint)
// Import stylebox
@use '@talenra/stylebox';

.title {
  // Use stylebox-color in your stylesheet
  color: stylebox.color-get('black', 80); // #333333
  color: stylebox.color-get('black', 80, 'RGB'); // 51, 51, 51
  color: stylebox.color-get('black', $model: 'RGB'); // 0, 0, 0
}
Parameters
Param Default Value Description
str $name null Color name, e.g. 'black'
int $tint 100 Tint, e.g. 80
enum $model HEX Color format of the value returned ('HEX' or 'RGB')

The table below shows all supported color names and tints.

Color Name Tint Swatch
black 100 #000000
80 #333333
70 #4D4D4D
60 #666666
50 #808080
40 #999999
30 #B3B3B3
20 #CCCCCC
10 #E6E6E6
5 #F2F2F2
2 #F8FBFF
white #FFFFFF
petrol-dark 100 #005F71
5 #F4F6F7
petrol 100 #0099A8
20 #D8EBEE
10 #EAF4F6
denim-dark 100 #04466A
5 #F4F6F7
denim 100 #0069A3
20 #CCE1ED
10 #E5F0F6
status-green 100 #00d000
status-red 100 #E20057
status-orange 100 #E26000
status-violet 100 #B103C7
Return Value

Returns the HEX value of the given color/tint. The function will warn you about invalid color names and tints and return a fancy replacement color (deeppink).

Effects
Border radius

Presets for border-radiuses used for rounded corners.

name value
s* 3px
m 6px

*) Default value used if parameter $preset is omitted.

effect-get-border-radius()
// Import stylebox
@use '@talenra/stylebox';

.pane {
  // Use default border-radius default value in your stylesheet
  border-radius: stylebox.effect-get-border-radius();
}

.rounded {
  // Use with a non-default preset
  border-radius: stylebox.effect-get-border-radius('m');
}
Parameters

none

Return Value

Returns the border-radius default value. Get the value if you need it for further calculations. If you only need to apply the border-radius you should use effect-use-border-radius.

effect-use-border-radius()
// Import stylebox
@use '@talenra/stylebox';

.pane {
  // Apply border-radius in your stylesheet
  @include stylebox.effect-use-border-radius();
}

.rounded {
  // Use with a non-default preset
  @include stylebox.effect-use-border-radius('m');
}
Parameters

none

Return Value

Applies the default border-radius definition.

effect-use-drop-shadow()
// Import stylebox
@use '@talenra/stylebox';

.pane {
  // Apply drop-shadow in your stylesheet
  @include stylebox.effect-use-drop-shadow();
}
Parameters

none

Return Value

Applies the default box-shadow definition.

Typography
type-get-font()
// Import stylebox
@use '@talenra/stylebox';
@use '~other-lib' with (
  $font: stylebox.type-get-font()
);
Parameters

none

Return Value

Returns the default font-family.

type-use-font()
// Import stylebox
@use '@talenra/stylebox';

body {
  // Set default font and basic global typographic settings
  @include stylebox.type-use-font();
  // font-family: cfg.$font-family;
  // font-feature-settings: 'liga' 1, 'kern' 1;
  // -webkit-font-smoothing: antialiased;
}
Parameters

none

Return Value

Applies the default font-family and basic global typographic settings.

type-use($preset, $weight, $style, $flowtext, $suppress)
// Import stylebox
@use '@talenra/stylebox';

.shortcut {
  // Use typographic preset in your stylesheet
  @include stylebox.type-use('xxs');
  // font-size: 0.625rem;
  // line-height: 0.75rem;
  // font-weight: 300;
  // letter-spacing: 0.02em;
}
Parameters

All parameters are optional

Param Default Value Description
enum $preset m Supported values: xxs, xs, s, m, l, h-s, h-m, h-l, h-xxl
enum $weight null Supported values: light, regular, medium
enum $style null Supported values: normal
bool $flowtext false Optimize preset for flowtext (multi-line text)
list $suppress null Suppress a given CSS property. Currently only supports line-height

The table below shows all supported typographic presets.

preset weight style size Notes
xxs light* normal* 10px Used for shortcuts only (e.g. "alt-Y")
xs regular*, light normal* 12px
s medium, regular*, light normal* 14px
m* medium, regular*, light normal* 16px
l medium, regular*, light normal* 18px
h-s regular* normal* 20px
h-m regular* normal* 24px
h-l regular* normal* 27px Used for app header only.
h-l medium normal* 28px Used for app header only. Weight medium uses bigger font-size.
h-xxl regular* normal* 40px Used on login screen only.

*) Default: Fallback value if param omitted (type-use() equals type-use($preset: 'm', $weight: 'regular', $style: 'normal', $flowtext: false))

Notes:

  • Preset h-xl is currently not available.
  • Presets with prefix h- are mainly used for headings.
Return Value

Applies declarations for font-size, line-height, font-weight, font-style and letter-spacing.

If you need to suppress a property, add it to the map passed in parameter $suppress.

.button {
  // Suppress `line-height`(e.g. for buttons and one-liners)
  @include stylebox.type-use('h-l', $suppress: ('line-height'));
  // font-size: 1.6875rem;
  // font-weight: 400;
  // font-style: normal;
  // letter-spacing: 0;
}

If you omit a parameter, the mixin will fallback to the default value. Same with invalid parameter values. The mixin will warn you about invalid parameter values.

Sassbox

@talenra/stylebox exposes the complete sassbox API.

@use '@talenra/stylebox';

.foo {
  margin-top: stylebox.px-to-rem(24);
}

Contributing

Contributions welcome. Please submit a pull request.

Versioning

We use SemVer for versioning.

License

This project is licensed under the ISC License - see the LICENSE file for details.

Contact

Talenra Workspace
workspace@talenra.com

Keywords

SCSSCSSstyledesignpresetutil