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;
}