Lkt-theme NPM | npm.io

LKT Theme

The semantic themes tool!

This package can help handling most common and reusable theme props and in a sharable and collaborative way with the rest of the team.

Colors

Available colors

Color	Use case
primary	This is your brand main color
secondary	If your brand has a secondary color, this is the place
info	Give the user some info
warning	Warn the user
success	Everything is ok
danger	Something bad could happen
alert	Something bad happened
target	Goals
focus	Focus inputs
notice	Another informative color
important	For important stuff
text	Main text color. I recommend using this alternative color as main background
gray	Your grayscale colors

Available Colors Modifiers

Modifiers	Use case
contrast	Contrast color. For example, the default background for this color in a button
light	A light version of the color
lighter	A lighter version of the color
dark	A dark version of the color
darker	A darker version of the color

Methods

Each color has a configuration mixin with this structure:

lkt-theme.set-<colorName>-color(color, contrast)

// For example:

lkt-theme.set-secondary-color(...)
lkt-theme.set-alert-color(...)
lkt-theme.set-warning-color(...)
...

Colors configuration

@use "node_modules/lkt-theme/lkt-theme";

@include lkt-theme.set-primary-color(#ff0000, #ffffff);
@include lkt-theme.set-secondary-color(blue, green);

Colors usage

@use "node_modules/lkt-theme/lkt-theme";

body {
  color: lkt-theme.$text-color;
  background: lkt-theme.$text-color-contrast;
}

button.success {
  color: lkt-theme.$success-color;
  background: lkt-theme.$success-color-contrast;
}

button.success-light {
  color: lkt-theme.$success-color-light;
  background: lkt-theme.$success-color-light-contrast;
}

Advanced colors usage

There is a function named get-color-map which will return a map of maps with all the colors. The map structure it's like following:

(
    name1: (color: name1-color, contrast: name1-color),
    name2: (color: name2-color, contrast: name2-color),
    ...
    nameN: (color: nameN-color, contrast: nameN-color),
)

For example:

@include lkt-theme.set-primary-color(#ff0000, #ffffff);
@include lkt-theme.set-primary-color-dark(#ff0022, #ffffff);
@include lkt-theme.set-gray-color(#cccccc, #ffffff);

$colors: lkt-theme.get-color-map();

// $colors content:

(
    primary: (color: #ff0000, contrast: #ffffff),
    primary-dark: (color: #ff0022, contrast: #ffffff),
    primary-gray: (color: #cccccc, contrast: #ffffff),
)

This is useful to iterate and generate modifiers to existing CSS selectors:

.item {
  @each $code, $palette in $colors {
    $color: map-get($palette, color);
    $contrast: map-get($palette, contrast);
      
    &.#{$code} {
      color: $color;
      background: $contrast;
    }
  }
}

// Will generate the following output:
.item.primary {
  color: #ff0000;
  background: #ffffff; }
.item.primary-dark {
  color: #ff0022;
  background: #ffffff; }
.item.gray {
  color: #cccccc;
  background: #ff0000; }

Border radius

Available border radius

Color	Use case
primary	The main border radius in your project
secondary	Additional border radius
tertiary	Another one just in case

Methods

There is a mixin to configure all three border radius

lkt-theme.set-border-radius(primary, secondary, tertiary)

Border radius configuration

@use "node_modules/lkt-theme/lkt-theme";

@include lkt-theme.set-border-radius(1px, 2px, 4px);

Border radius usage

@use "node_modules/lkt-theme/lkt-theme";


button.success {
  border-radius: lkt-theme.$primary-border-radius;
}

Transitions

Available transitions

Color	Use case
primary	The main transition in your project
secondary	Additional transition
tertiary	Another one just in case

Methods

There is a mixin to configure all three transitions

lkt-theme.set-transition(primary, secondary, tertiary)

Transition configuration

@use "node_modules/lkt-theme/lkt-theme";

@include lkt-theme.set-transition(200ms all linear, false, 5s color linear);

Border transition

@use "node_modules/lkt-theme/lkt-theme";


button.success {
  transition: lkt-theme.$primary-transition;
}

Font sizes

Available font sizes

Color	Use case
primary	The main font-size in your project
secondary	Additional font-size
tertiary	Another one just in case

Methods

There is a mixin to configure all three font-sizes

lkt-theme.set-font-size(primary, secondary, tertiary)

Font-size configuration

@use "node_modules/lkt-theme/lkt-theme";

@include lkt-theme.set-font-size(16px, 20px, 17px); // Sample

Font-size usage

@use "node_modules/lkt-theme/lkt-theme";


button.success {
  font-size: lkt-theme.$primary-font-size;
}

Font families

Available font families

Color	Use case
primary-header	The main font-family (for headers) in your project
secondary-header	Additional font-family (for headers)
tertiary-header	Another one just in case (for headers)
primary-text	The main font-family in your project (for text)
secondary-text	Additional font-family (for text)
tertiary-text	Another one just in case (for text)
primary-button	The main font-family in your project (for buttons)
secondary-button	Additional font-family (for buttons)
tertiary-button	Another one just in case (for buttons)

Methods

There are three mixins to configure all font families

lkt-theme.set-header-font-family(primary, secondary, tertiary)
lkt-theme.set-text-font-family(primary, secondary, tertiary)
lkt-theme.set-button-font-family(primary, secondary, tertiary)

Font-family configuration

@use "node_modules/lkt-theme/lkt-theme";

@include lkt-theme.set-button-font-family(Arial); // Sample

Font-family usage

@use "node_modules/lkt-theme/lkt-theme";


button.success {
  font-family: lkt-theme.$primary-button-font-family;
}

lkt lkt-web-tech scss

@infinitebrahmanuniverse/nolb-lk @everything-registry/sub-chunk-2089 @zalastax/nolb-lk

2 years ago

3 years ago

3 years ago

3 years ago