From 07a2161bec2051be3cf5fd00f9f271640be98d45 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Wed, 27 Nov 2024 15:00:11 -0500 Subject: [PATCH 1/3] Add dark mode colors for titles --- .../app/pb_kits/playbook/pb_title/_title.scss | 22 ++++++++++++++++--- .../app/pb_kits/playbook/tokens/_titles.scss | 22 ++++++++++++++++--- 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_title/_title.scss b/playbook/app/pb_kits/playbook/pb_title/_title.scss index ebe4e87ff4..f0e471108a 100755 --- a/playbook/app/pb_kits/playbook/pb_title/_title.scss +++ b/playbook/app/pb_kits/playbook/pb_title/_title.scss @@ -49,10 +49,26 @@ } &.dark { - @include pb_title_dark; + @include pb_title_dark; } - &.dark[class*=_link] { - @include pb_title_dark_link; + &.dark[class*=_light] { + @include pb_title_dark_light; + } + + &.dark[class*=_lighter] { + @include pb_title_dark_lighter; + } + + &.dark[class*=_link] { + @include pb_title_dark_link; + } + + &.dark[class*=_error] { + @include pb_title_dark_error; + } + + &.dark[class*=_success] { + @include pb_title_dark_success; } } diff --git a/playbook/app/pb_kits/playbook/tokens/_titles.scss b/playbook/app/pb_kits/playbook/tokens/_titles.scss index fad0b3091d..2f8a34d8d4 100755 --- a/playbook/app/pb_kits/playbook/tokens/_titles.scss +++ b/playbook/app/pb_kits/playbook/tokens/_titles.scss @@ -33,16 +33,32 @@ @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal); } +@mixin pb_title_bold { + font-weight: $bolder; +} + @mixin pb_title_dark { color: $text_dk_default; -} +} @mixin pb_title_dark_link { color: $active_dark; } -@mixin pb_title_bold { - font-weight: $bolder; +@mixin pb_title_dark_light { + color: $text_dk_light; +} + +@mixin pb_title_dark_lighter { + color: $text_dk_light; +} + +@mixin pb_title_dark_error { + color: $error_dark; +} + +@mixin pb_title_dark_success { + color: $success; } @mixin pb_title_thin { From 51132aeb320863075aa091e9ef9ba05e455780e4 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Wed, 27 Nov 2024 15:19:18 -0500 Subject: [PATCH 2/3] add dark mode colors for captions --- playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss b/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss index 895f9bfb56..01b5c8b7fa 100755 --- a/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +++ b/playbook/app/pb_kits/playbook/pb_caption/_caption_mixin.scss @@ -13,9 +13,10 @@ $pb_caption_colors: ( $pb_dark_caption_colors: ( default: $text_dk_default, light: $text_dk_light, + lighter: $text_dk_lighter, link: $active_dark, success: $text_dk_success_sm, - error: $error, + error: $error_dark, ); From 604476dc10eaa51597d7358b5dbe0684e7760fa8 Mon Sep 17 00:00:00 2001 From: Liam Simmons Date: Wed, 4 Dec 2024 09:31:42 -0500 Subject: [PATCH 3/3] Move dark colors from token file to title_mixin file --- .../app/pb_kits/playbook/pb_title/_title.scss | 27 +++++-------------- .../playbook/pb_title/_title_mixin.scss | 13 +++++++++ .../app/pb_kits/playbook/tokens/_titles.scss | 24 ----------------- 3 files changed, 19 insertions(+), 45 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_title/_title.scss b/playbook/app/pb_kits/playbook/pb_title/_title.scss index f0e471108a..ef42657280 100755 --- a/playbook/app/pb_kits/playbook/pb_title/_title.scss +++ b/playbook/app/pb_kits/playbook/pb_title/_title.scss @@ -49,26 +49,11 @@ } &.dark { - @include pb_title_dark; - } - - &.dark[class*=_light] { - @include pb_title_dark_light; - } - - &.dark[class*=_lighter] { - @include pb_title_dark_lighter; - } - - &.dark[class*=_link] { - @include pb_title_dark_link; - } - - &.dark[class*=_error] { - @include pb_title_dark_error; - } - - &.dark[class*=_success] { - @include pb_title_dark_success; + @include title_dark; + @each $name, $color in $pb_dark_title_colors { + &[class*="_#{$name}"] { + color: $color; + } + } } } diff --git a/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss b/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss index 46b8935686..8fc0714bb7 100755 --- a/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss +++ b/playbook/app/pb_kits/playbook/pb_title/_title_mixin.scss @@ -9,6 +9,15 @@ $pb_title_colors: ( link: $primary ); +$pb_dark_title_colors: ( + default: $text_dk_default, + light: $text_dk_light, + lighter: $text_dk_lighter, + success: $success, + error: $error_dark, + link: $active_dark +); + @mixin title_colors { @each $name, $color in $pb_title_colors { &[class*=_#{$name}] { @@ -16,3 +25,7 @@ $pb_title_colors: ( } } } + +@mixin title_dark { + color: $text_dk_default; +} diff --git a/playbook/app/pb_kits/playbook/tokens/_titles.scss b/playbook/app/pb_kits/playbook/tokens/_titles.scss index 2f8a34d8d4..ef180c328f 100755 --- a/playbook/app/pb_kits/playbook/tokens/_titles.scss +++ b/playbook/app/pb_kits/playbook/tokens/_titles.scss @@ -37,30 +37,6 @@ font-weight: $bolder; } -@mixin pb_title_dark { - color: $text_dk_default; -} - -@mixin pb_title_dark_link { - color: $active_dark; -} - -@mixin pb_title_dark_light { - color: $text_dk_light; -} - -@mixin pb_title_dark_lighter { - color: $text_dk_light; -} - -@mixin pb_title_dark_error { - color: $error_dark; -} - -@mixin pb_title_dark_success { - color: $success; -} - @mixin pb_title_thin { font-weight: $lighter; letter-spacing: $lspace_tight;