Skip to content

Commit

Permalink
style: update color token name 3 digits (#1955)
Browse files Browse the repository at this point in the history 
* fix(frame): add box shadow to bordered frame (#1958)

* style: remove border from box like elements with box shadows (#1967)

* style: add shadow to frame

* style: remove border from box-like elements

* chore: remove white space for linter

* fix: change legacy colors to mapped values ie red 500 to red 95

* fix: remove old 100 tokens

* fix: add 0 to make token 3 digits

* fix: add red color classes

* fix: add 0 to green color token names

* fix: add 0 to blue color token names

* fix: add 0 to mercury color token names

* fix: add 0 to yellow color token names

* fix: add 0 to purple color token names

* fix: update grey color token names to 3 digits

* fix: update react green colors

* fix: update react purple colors

* fix: update red in jsx and erb

* fix: update orange color token to mercury

* fix: update charcoal color token to upper greys

* fix: update grey color token to lower greys

* fix: add options for default color values

* chore: remove whitespace

* fix: self review fix grey 300 and grey 400 in css

* Revert "fix: self review fix grey 300 and grey 400 in css"

This reverts commit 2ae5967.

* Revert "fix: update grey color token to lower greys"

This reverts commit 69f8706.

* fix: update grey color token to lower greys

* Revert "fix: update grey color token to lower greys"

This reverts commit 2f43f1d.

* style: update purple color token to use three digits

* style: update additional 2 digit token value to 3 digit token values

* style: added zero to mercury 30

* style: update templating to wrap 050 values in single-quotes

* style(breadcrumbs): change charcoal 400 to grey 900

* fix: update gray to grey instances

---------

Co-authored-by: Julian Skinner <[email protected]>
  • Loading branch information
@QuintonJason @kajabi-bot
QuintonJason and kajabi-bot committed Oct 16, 2024
1 parent 0c16340 commit 3098391
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 1,163 deletions.
240 changes: 0 additions & 240 deletions docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -609,66 +609,6 @@ module SageDictionary
},
},
"YELLOW": {
"5": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_5_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_5_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_5_CLASSNAME,
},
"10": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_10_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_10_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_10_CLASSNAME,
},
"15": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_15_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_15_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_15_CLASSNAME,
},
"20": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_20_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_20_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_20_CLASSNAME,
},
"30": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_30_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_30_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_30_CLASSNAME,
},
"40": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_40_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_40_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_40_CLASSNAME,
},
"50": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME,
},
"60": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_60_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_60_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_60_CLASSNAME,
},
"70": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_70_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_70_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_70_CLASSNAME,
},
"80": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_80_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_80_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_80_CLASSNAME,
},
"90": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_90_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_90_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_90_CLASSNAME,
},
"95": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_95_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_95_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_95_CLASSNAME,
},
"100": {
"HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX,
"CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE,
Expand Down Expand Up @@ -731,66 +671,6 @@ module SageDictionary
},
},
"RED": {
"5": {
"HEX": SD_SAGE_COLOR_BASE_RED_5_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_5_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_5_CLASSNAME,
},
"10": {
"HEX": SD_SAGE_COLOR_BASE_RED_10_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_10_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_10_CLASSNAME,
},
"15": {
"HEX": SD_SAGE_COLOR_BASE_RED_15_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_15_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_15_CLASSNAME,
},
"20": {
"HEX": SD_SAGE_COLOR_BASE_RED_20_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_20_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_20_CLASSNAME,
},
"30": {
"HEX": SD_SAGE_COLOR_BASE_RED_30_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_30_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_30_CLASSNAME,
},
"40": {
"HEX": SD_SAGE_COLOR_BASE_RED_40_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_40_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_40_CLASSNAME,
},
"50": {
"HEX": SD_SAGE_COLOR_BASE_RED_50_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_50_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME,
},
"60": {
"HEX": SD_SAGE_COLOR_BASE_RED_60_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_60_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_60_CLASSNAME,
},
"70": {
"HEX": SD_SAGE_COLOR_BASE_RED_70_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_70_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_70_CLASSNAME,
},
"80": {
"HEX": SD_SAGE_COLOR_BASE_RED_80_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_80_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_80_CLASSNAME,
},
"90": {
"HEX": SD_SAGE_COLOR_BASE_RED_90_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_90_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_90_CLASSNAME,
},
"95": {
"HEX": SD_SAGE_COLOR_BASE_RED_95_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_95_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_RED_95_CLASSNAME,
},
"100": {
"HEX": SD_SAGE_COLOR_BASE_RED_100_HEX,
"CODE": SD_SAGE_COLOR_BASE_RED_100_CODE,
Expand Down Expand Up @@ -880,66 +760,6 @@ module SageDictionary
},
},
"PURPLE": {
"5": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_5_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_5_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_5_CLASSNAME,
},
"10": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_10_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_10_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_10_CLASSNAME,
},
"15": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_15_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_15_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_15_CLASSNAME,
},
"20": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_20_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_20_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_20_CLASSNAME,
},
"30": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_30_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_30_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_30_CLASSNAME,
},
"40": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_40_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_40_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_40_CLASSNAME,
},
"50": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME,
},
"60": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_60_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_60_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_60_CLASSNAME,
},
"70": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_70_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_70_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_70_CLASSNAME,
},
"80": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_80_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_80_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_80_CLASSNAME,
},
"90": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_90_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_90_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_90_CLASSNAME,
},
"95": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_95_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_95_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_95_CLASSNAME,
},
"100": {
"HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX,
"CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE,
Expand Down Expand Up @@ -1029,66 +849,6 @@ module SageDictionary
},
},
"GREY": {
"5": {
"HEX": SD_SAGE_COLOR_BASE_GREY_5_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_5_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_5_CLASSNAME,
},
"10": {
"HEX": SD_SAGE_COLOR_BASE_GREY_10_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_10_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_10_CLASSNAME,
},
"15": {
"HEX": SD_SAGE_COLOR_BASE_GREY_15_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_15_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_15_CLASSNAME,
},
"20": {
"HEX": SD_SAGE_COLOR_BASE_GREY_20_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_20_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_20_CLASSNAME,
},
"30": {
"HEX": SD_SAGE_COLOR_BASE_GREY_30_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_30_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_30_CLASSNAME,
},
"40": {
"HEX": SD_SAGE_COLOR_BASE_GREY_40_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_40_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_40_CLASSNAME,
},
"50": {
"HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME,
},
"60": {
"HEX": SD_SAGE_COLOR_BASE_GREY_60_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_60_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_60_CLASSNAME,
},
"70": {
"HEX": SD_SAGE_COLOR_BASE_GREY_70_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_70_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_70_CLASSNAME,
},
"80": {
"HEX": SD_SAGE_COLOR_BASE_GREY_80_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_80_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_80_CLASSNAME,
},
"90": {
"HEX": SD_SAGE_COLOR_BASE_GREY_90_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_90_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_90_CLASSNAME,
},
"95": {
"HEX": SD_SAGE_COLOR_BASE_GREY_95_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_95_CODE,
"CLASSNAME": SD_SAGE_COLOR_BASE_GREY_95_CLASSNAME,
},
"100": {
"HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX,
"CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE,
Expand Down
20 changes: 10 additions & 10 deletions packages/sage-assets/lib/stylesheets/components/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,16 +48,16 @@ $-alert-border-colors: (
);

$-alert-border-colors: (
default: sage-color(grey, 30),
draft: sage-color(grey, 30),
info: sage-color(blue, 30),
published: sage-color(green, 30),
success: sage-color(green, 30),
warning: sage-color(yellow, 30),
approaching: sage-color(yellow, 30),
reached: sage-color(mercury, 30),
exceeded: sage-color(red, 30),
danger: sage-color(red, 30),
default: sage-color(grey, 300),
draft: sage-color(grey, 300),
info: sage-color(blue, 300),
published: sage-color(green, 300),
success: sage-color(green, 300),
warning: sage-color(yellow, 300),
approaching: sage-color(yellow, 300),
reached: sage-color(mercury, 300),
exceeded: sage-color(red, 300),
danger: sage-color(red, 300),
);

.sage-alert {
Expand Down
2 changes: 1 addition & 1 deletion packages/sage-assets/lib/stylesheets/components/_page_heading.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px);
grid-area: image;
overflow: hidden;
min-height: $-page-heading-image-height-min;
background: sage-color(grey, 30);
background: sage-color(grey, 300);
border-radius: sage-border(radius);
border: sage-border();

Expand Down
Loading

0 comments on commit 3098391

Please sign in to comment.