Skip to content

Commit

Permalink
Create mixin for dark status
Browse files Browse the repository at this point in the history
  • Loading branch information
ASPhillips8 committed Dec 2, 2024
1 parent 840e62a commit 5bb87a2
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 29 deletions.
27 changes: 14 additions & 13 deletions playbook/app/pb_kits/playbook/pb_body/_body.scss
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
@import "./body_mixins";
@import "../tokens/titles";

[class^=pb_body_kit]{
[class^="pb_body_kit"] {
@include pb_body($text_lt_default);
@each $color_name, $color_value in $pb_body_colors {
&[class*=_#{"" + $color_name}] {
@include pb_body($color_value);
}
@each $status_name, $status_value in $pb_body_status {
&[class*=_default_#{$status_name}] {
&[class*="_default_#{$status_name}"] {
@include pb_body($status_value);
}
}
}
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
&[class*=_#{$dark_color_name}][class*=dark]{
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
&[class*="_#{$dark_color_name}"][class*="dark"] {
@include pb_body($dark_color_value);
}
}
b, strong {
b,
strong {
font-weight: $bold;
}

Expand All @@ -29,7 +30,8 @@
}
}

em, i {
em,
i {
font-style: italic;
}

Expand All @@ -39,26 +41,25 @@
}

@each $status_name, $status_value in $pb_body_status {
&[class*=#{$status_name}] {
&[class*="#{$status_name}"] {
@include pb_body($status_value);
}
}

&[class*=dark] {
&[class*="dark"] {
a {
color: $active_dark;
}
@include pb_body_dark();
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
&[class*=_#{$dark_color_name}][class*=dark]{
@each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
&[class*="_#{$dark_color_name}"][class*="dark"] {
@include pb_body($dark_color_value);
}
}
@each $status_name, $status_value in $pb_body_status {
&[class*=_#{$status_name}] {
@each $status_name, $status_value in $pb_dark_body_status {
&[class*="_#{$status_name}"] {
@include pb_body($status_value);
}
}
}

}
38 changes: 22 additions & 16 deletions playbook/app/pb_kits/playbook/pb_body/_body_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,35 @@
@import "../tokens/typography";

$pb_body_colors: (
default: $text_lt_default,
light: $text_lt_light,
lighter: $text_lt_lighter,
link: $primary,
error: $error,
success: $text_lt_success_sm,
default: $text_lt_default,
light: $text_lt_light,
lighter: $text_lt_lighter,
link: $primary,
error: $error,
success: $text_lt_success_sm,
);

$pb_dark_body_colors: (
default: $text_dk_default,
light: $text_dk_light,
lighter: $text_dk_lighter,
link: $active_dark,
error: $error,
success: $text_dk_success_sm,
default: $text_dk_default,
light: $text_dk_light,
lighter: $text_dk_lighter,
link: $active_dark,
error: $error,
success: $text_dk_success_sm,
);

// Order is important here!
$pb_body_status: (
default: $text_lt_default,
negative: $error,
dark_error: $error_dark_body,
positive: $text_lt_success_sm,
default: $text_lt_default,
negative: $error,
dark_error: $error_dark_body,
positive: $text_lt_success_sm,
);

$pb_dark_body_status: (
default: $text_dk_default,
negative: $error_dark,
positive: $text_dk_success_sm,
);

@mixin pb_body($color: $text_lt_default) {
Expand Down

0 comments on commit 5bb87a2

Please sign in to comment.