diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png index bcf10d60e6..bd3b1796b0 100644 Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Box_Plain_Text_Text_colors.png differ diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png b/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png index 209503e457..f4d8744ecc 100644 Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png and b/packages/fuselage/.loki/reference/chrome_laptop_Box_Plain_Text_Text_colors.png differ diff --git a/packages/fuselage/src/components/Avatar/styles.scss b/packages/fuselage/src/components/Avatar/styles.scss index fb604c5fd9..7d9a2c0e58 100644 --- a/packages/fuselage/src/components/Avatar/styles.scss +++ b/packages/fuselage/src/components/Avatar/styles.scss @@ -1,7 +1,7 @@ @use '../../styles/colors.scss'; @use '../../styles/lengths.scss'; -$avatar-stack-background-color: theme('avatar-background-color', colors.paper()); +$avatar-stack-background-color: theme('avatar-background-color', colors.surface()); .rcx-avatar { display: inline-flex; diff --git a/packages/fuselage/src/components/Box/PlainText.stories.mdx b/packages/fuselage/src/components/Box/PlainText.stories.mdx index baba92ed06..0ad541de39 100644 --- a/packages/fuselage/src/components/Box/PlainText.stories.mdx +++ b/packages/fuselage/src/components/Box/PlainText.stories.mdx @@ -35,7 +35,6 @@ import { Box } from '../..'; Default Info Hint - Disabled label Disabled Alternative Primary diff --git a/packages/fuselage/src/components/Box/index.js b/packages/fuselage/src/components/Box/index.js index 45f0281315..0af7e4776f 100644 --- a/packages/fuselage/src/components/Box/index.js +++ b/packages/fuselage/src/components/Box/index.js @@ -41,7 +41,7 @@ Box.propTypes = { richText: PropTypes.oneOf(['inline', 'block']), style: PropTypes.object, textColor: PropTypes.oneOf([ - 'default', 'info', 'hint', 'disabled-label', 'disabled', 'alternative', + 'default', 'info', 'hint', 'disabled', 'alternative', 'primary', 'success', 'danger', 'warning', ]), textStyle: PropTypes.oneOf([ diff --git a/packages/fuselage/src/components/Tabs/styles.scss b/packages/fuselage/src/components/Tabs/styles.scss index 2b8bbd3dbe..0fbd57c0ff 100644 --- a/packages/fuselage/src/components/Tabs/styles.scss +++ b/packages/fuselage/src/components/Tabs/styles.scss @@ -1,4 +1,17 @@ @use '../../styles/lengths.scss'; +@use '../../styles/colors.scss'; + +$tabs-background-color: theme('tabs-background-color', transparent); +$tabs-border-color: theme('tabs-border-color', transparent); +$tabs-color: theme('tabs-color', colors.neutral(600)); +$tabs-delimiter-color: theme('tabs-color', colors.neutral(400)); +$tabs-selected-color: theme('tabs-selected-color', colors.primary(500)); +$tabs-selected-border-color: theme('tabs-selected-border-color', colors.primary(500)); +$tabs-hover-color: theme('tabs-hover-border-color', colors.neutral(700)); +$tabs-active-color: theme('tabs-active-color', colors.neutral(800)); +$tabs-focus-border-color: theme('tabs-focus-border-color', colors.primary(500)); +$tabs-focus-shadow-color: theme('tabs-focus-shadow-color', colors.primary(100)); +$tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500)); // TODO: Indication that there are more tab__items left to scroll (some sort of shadow maybe) .rcx-tabs { diff --git a/packages/fuselage/src/components/Tag/styles.scss b/packages/fuselage/src/components/Tag/styles.scss index 513df3518c..999f35d426 100644 --- a/packages/fuselage/src/components/Tag/styles.scss +++ b/packages/fuselage/src/components/Tag/styles.scss @@ -1,5 +1,21 @@ +@use '../../styles/colors.scss'; @use '../../styles/lengths.scss'; +$tag-colors-secondary-color: theme('tag-colors-secondary-color', colors.foreground(primary)); +$tag-colors-secondary-background-color: theme('tag-colors-secondary-background-color', colors.primary(100)); + +$tag-colors-primary-color: theme('tag-colors-primary-color', colors.foreground(alternative)); +$tag-colors-primary-background-color: theme('tag-colors-primary-background-color', colors.primary(500)); + +$tag-colors-danger-color: theme('tag-colors-danger-color', colors.foreground(alternative)); +$tag-colors-danger-background-color: theme('tag-colors-danger-background-color', colors.danger(500)); + +$tag-colors-ghost-color: theme('tag-colors-ghost-color', colors.foreground(alternative)); +$tag-colors-ghost-background-color: theme('tag-colors-ghost-background-color', colors.neutral(700)); + +$tag-colors-disabled-color: theme('tag-colors-disabled-color', colors.foreground(hint)); +$tag-colors-disabled-background-color: theme('tag-colors-disabled-background-color', colors.neutral(400)); + .rcx-tag { display: inline-block; diff --git a/packages/fuselage/src/components/Tooltip/styles.scss b/packages/fuselage/src/components/Tooltip/styles.scss index 22803f5de7..62f33125a9 100644 --- a/packages/fuselage/src/components/Tooltip/styles.scss +++ b/packages/fuselage/src/components/Tooltip/styles.scss @@ -2,7 +2,7 @@ @use '../../styles/lengths.scss'; $tooltip-background-color: theme('tooltip-background-color', colors.neutral(900)); -$tooltip-text-color: theme('tooltip-text-color', colors.paper()); +$tooltip-text-color: theme('tooltip-text-color', colors.surface()); @mixin triangle-direction($direction) { &::after { diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss index 86d775b307..7339b07dca 100644 --- a/packages/fuselage/src/styles/colors.scss +++ b/packages/fuselage/src/styles/colors.scss @@ -43,18 +43,6 @@ @return var(_get-varname(primary, $grade, $alpha), _get-color(b, $grade, $alpha)); } -@function link($grade, $alpha: null) { - @return var(_get-varname(link, $grade, $alpha), _get-color(b, $grade, $alpha)); -} - -@function visited-link($grade, $alpha: null) { - @return var(_get-varname(visited-link, $grade, $alpha), _get-color(p, $grade, $alpha)); -} - -@function active-link($grade, $alpha: null) { - @return var(_get-varname(active-link, $grade, $alpha), _get-color(r, $grade, $alpha)); -} - @function info($grade, $alpha: null) { @return var(_get-varname(info, $grade, $alpha), _get-color(b, $grade, $alpha)); } @@ -71,10 +59,47 @@ @return var(_get-varname(danger, $grade, $alpha), _get-color(r, $grade, $alpha)); } -@function paper($alpha: null) { - @if $alpha != null { - @return var(--rcx-color-paper-#{ $alpha * 100 }, rgba(255, 255, 255, $alpha)); +@function surface() { + @return var(--rcx-color-surface, white); +} + +@function foreground($type) { + @if $type == 'default' { + @return var(--rcx-color-foreground-default, map-get(token-colors.$colors, n800)); + } + @else if $type == 'info' { + @return var(--rcx-color-foreground-info, map-get(token-colors.$colors, n700)); + } + @else if $type == 'hint' { + @return var(--rcx-color-foreground-hint, map-get(token-colors.$colors, n600)); + } + @else if $type == 'disabled' { + @return var(--rcx-color-foreground-disabled, map-get(token-colors.$colors, n400)); + } + @else if $type == 'alternative' { + @return var(--rcx-color-foreground-alternative, white); + } + @else if $type == 'primary' { + @return var(--rcx-color-foreground-primary, map-get(token-colors.$colors, b500)); + } + @else if $type == 'success' { + @return var(--rcx-color-foreground-success, map-get(token-colors.$colors, g500)); + } + @else if $type == 'danger' { + @return var(--rcx-color-foreground-danger, map-get(token-colors.$colors, r500)); + } + @else if $type == 'warning' { + @return var(--rcx-color-foreground-warning, map-get(token-colors.$colors, y700)); + } + @else if $type == 'link' { + @return var(--rcx-color-foreground-link, map-get(token-colors.$colors, b500)); + } + @else if $type == 'visited-link' { + @return var(--rcx-color-foreground-visited-link, map-get(token-colors.$colors, p500)); + } + @else if $type == 'active-link' { + @return var(--rcx-color-foreground-active-link, map-get(token-colors.$colors, r500)); } - @return var(--rcx-color-paper, white); + @error 'invalid foreground type'; } diff --git a/packages/fuselage/src/styles/primitives/rich-text.scss b/packages/fuselage/src/styles/primitives/rich-text.scss index 09601ccc5a..ed85bd5c1a 100644 --- a/packages/fuselage/src/styles/primitives/rich-text.scss +++ b/packages/fuselage/src/styles/primitives/rich-text.scss @@ -32,17 +32,17 @@ &:link { text-decoration: none; - color: colors.link(500); + color: colors.foreground(link); } &:visited, &.is-visited { - color: colors.visited-link(500); + color: colors.foreground(visited-link); } &:active, &.is-active { - color: colors.active-link(500); + color: colors.foreground(active-link); } &:hover, diff --git a/packages/fuselage/src/styles/primitives/tile.scss b/packages/fuselage/src/styles/primitives/tile.scss index 644605e0de..36119ea153 100644 --- a/packages/fuselage/src/styles/primitives/tile.scss +++ b/packages/fuselage/src/styles/primitives/tile.scss @@ -3,19 +3,19 @@ %tile-0 { border-radius: lengths.border-radius(2); - background-color: colors.paper(); + background-color: colors.surface(); @include use-no-shadow; } %tile-1 { border-radius: lengths.border-radius(2); - background-color: colors.paper(); + background-color: colors.surface(); box-shadow: 0 0 to-rem(12) 0 rgba(47, 52, 61, 0.1); } %tile-2 { border-radius: lengths.border-radius(2); - background-color: colors.paper(); + background-color: colors.surface(); box-shadow: 0 0 to-rem(2) 0 rgba(47, 52, 61, 0.08), 0 0 to-rem(12) 0 rgba(47, 52, 61, 0.12); diff --git a/packages/fuselage/src/styles/variables/all.scss b/packages/fuselage/src/styles/variables/all.scss index e0793e2a2a..9b3636fe9b 100644 --- a/packages/fuselage/src/styles/variables/all.scss +++ b/packages/fuselage/src/styles/variables/all.scss @@ -3,5 +3,3 @@ @import './input-colors.scss'; @import './text-colors.scss'; @import './text-styles.scss'; -@import './tabs-colors.scss'; -@import './tag-colors.scss'; diff --git a/packages/fuselage/src/styles/variables/button-colors.scss b/packages/fuselage/src/styles/variables/button-colors.scss index 0338daee8a..a1d54118d6 100644 --- a/packages/fuselage/src/styles/variables/button-colors.scss +++ b/packages/fuselage/src/styles/variables/button-colors.scss @@ -2,7 +2,7 @@ $button-colors-primary-background-color: theme('button-colors-primary-background-color', colors.primary(500)); $button-colors-primary-border-color: theme('button-colors-primary-border-color', colors.primary(500)); -$button-colors-primary-color: theme('button-colors-primary-color', colors.paper()); +$button-colors-primary-color: theme('button-colors-primary-color', colors.foreground(alternative)); $button-colors-primary-hover-background-color: theme('button-colors-primary-hover-background-color', colors.primary(600)); $button-colors-primary-hover-border-color: theme('button-colors-primary-hover-border-color', colors.primary(600)); $button-colors-primary-active-background-color: theme('button-colors-primary-active-background-color', colors.primary(700)); @@ -12,7 +12,7 @@ $button-colors-primary-focus-border-color: theme('button-colors-primary-focus-bo $button-colors-primary-focus-shadow-color: theme('button-colors-primary-focus-shadow-color', colors.primary(100)); $button-colors-primary-disabled-background-color: theme('button-colors-primary-disabled-background-color', colors.primary(200)); $button-colors-primary-disabled-border-color: theme('button-colors-primary-disabled-border-color', colors.primary(200)); -$button-colors-primary-disabled-color: theme('button-colors-primary-disabled-color', colors.paper()); +$button-colors-primary-disabled-color: theme('button-colors-primary-disabled-color', colors.foreground(alternative)); $button-colors-secondary-background-color: theme('button-colors-secondary-background-color', colors.neutral(300)); $button-colors-secondary-border-color: theme('button-colors-secondary-border-color', colors.neutral(300)); @@ -30,7 +30,7 @@ $button-colors-secondary-disabled-color: theme('button-colors-secondary-disabled $button-colors-danger-background-color: theme('button-colors-danger-background-color', colors.danger(500)); $button-colors-danger-border-color: theme('button-colors-danger-border-color', colors.danger(500)); -$button-colors-danger-color: theme('button-colors-danger-color', colors.paper()); +$button-colors-danger-color: theme('button-colors-danger-color', colors.foreground(alternative)); $button-colors-danger-hover-background-color: theme('button-colors-danger-hover-background-color', colors.danger(600)); $button-colors-danger-hover-border-color: theme('button-colors-danger-hover-border-color', colors.danger(600)); $button-colors-danger-active-background-color: theme('button-colors-danger-active-background-color', colors.danger(700)); @@ -40,25 +40,25 @@ $button-colors-danger-focus-border-color: theme('button-colors-danger-focus-bord $button-colors-danger-focus-shadow-color: theme('button-colors-danger-focus-shadow-color', colors.danger(100)); $button-colors-danger-disabled-background-color: theme('button-colors-danger-disabled-background-color', colors.danger(200)); $button-colors-danger-disabled-border-color: theme('button-colors-danger-disabled-border-color', colors.danger(200)); -$button-colors-danger-disabled-color: theme('button-colors-danger-disabled-color', colors.paper()); +$button-colors-danger-disabled-color: theme('button-colors-danger-disabled-color', colors.foreground(alternative)); -$button-colors-empty-background-color: theme('button-colors-empty-background-color', colors.paper()); +$button-colors-empty-background-color: theme('button-colors-empty-background-color', colors.surface()); $button-colors-empty-border-color: theme('button-colors-empty-border-color', colors.neutral(400)); -$button-colors-empty-color: theme('button-colors-empty-color', colors.paper()); -$button-colors-empty-hover-background-color: theme('button-colors-empty-hover-background-color', colors.paper()); +$button-colors-empty-color: theme('button-colors-empty-color', colors.foreground(alternative)); +$button-colors-empty-hover-background-color: theme('button-colors-empty-hover-background-color', colors.surface()); $button-colors-empty-hover-border-color: theme('button-colors-empty-hover-border-color', colors.neutral(500)); -$button-colors-empty-active-background-color: theme('button-colors-empty-active-background-color', colors.paper()); +$button-colors-empty-active-background-color: theme('button-colors-empty-active-background-color', colors.surface()); $button-colors-empty-active-border-color: theme('button-colors-empty-active-border-color', colors.neutral(600)); -$button-colors-empty-focus-background-color: theme('button-colors-empty-focus-background-color', colors.paper()); +$button-colors-empty-focus-background-color: theme('button-colors-empty-focus-background-color', colors.surface()); $button-colors-empty-focus-border-color: theme('button-colors-empty-focus-border-color', colors.primary(500)); $button-colors-empty-focus-shadow-color: theme('button-colors-empty-focus-shadow-color', colors.primary(100)); $button-colors-empty-disabled-background-color: theme('button-colors-empty-disabled-background-color', colors.neutral(200)); $button-colors-empty-disabled-border-color: theme('button-colors-empty-disabled-border-color', colors.neutral(200)); -$button-colors-empty-disabled-color: theme('button-colors-empty-disabled-color', colors.paper()); +$button-colors-empty-disabled-color: theme('button-colors-empty-disabled-color', colors.foreground(alternative)); $button-colors-off-background-color: theme('button-colors-off-background-color', colors.neutral(400)); $button-colors-off-border-color: theme('button-colors-off-border-color', colors.neutral(400)); -$button-colors-off-color: theme('button-colors-off-color', colors.paper()); +$button-colors-off-color: theme('button-colors-off-color', colors.foreground(alternative)); $button-colors-off-hover-background-color: theme('button-colors-off-hover-background-color', colors.neutral(500)); $button-colors-off-hover-border-color: theme('button-colors-off-hover-border-color', colors.neutral(500)); $button-colors-off-active-background-color: theme('button-colors-off-active-background-color', colors.neutral(600)); diff --git a/packages/fuselage/src/styles/variables/input-colors.scss b/packages/fuselage/src/styles/variables/input-colors.scss index c3fb2464df..3379849b7c 100644 --- a/packages/fuselage/src/styles/variables/input-colors.scss +++ b/packages/fuselage/src/styles/variables/input-colors.scss @@ -1,6 +1,6 @@ @use '../colors.scss'; -$input-colors-background-color: theme('input-colors-background-color', colors.paper()); +$input-colors-background-color: theme('input-colors-background-color', colors.surface()); $input-colors-border-color: theme('input-colors-border-color', colors.neutral(500)); $input-colors-color: theme('input-colors-color', colors.neutral(800)); $input-colors-placeholder-color: theme('input-colors-placeholder-color', colors.neutral(600)); @@ -15,7 +15,7 @@ $input-colors-disabled-background-color: theme('input-colors-disabled-background $input-colors-disabled-border-color: theme('input-colors-disabled-border-color', colors.neutral(500)); $input-colors-disabled-color: theme('input-colors-disabled-color', colors.neutral(800)); -$input-colors-invalid-background-color: theme('input-colors-invalid-background-color', colors.paper()); +$input-colors-invalid-background-color: theme('input-colors-invalid-background-color', colors.surface()); $input-colors-invalid-border-color: theme('input-colors-invalid-border-color', colors.danger(500)); $input-colors-invalid-color: theme('input-colors-invalid-color', colors.danger(500)); $input-colors-invalid-placeholder-color: theme('input-colors-invalid-placeholder-color', colors.neutral(600)); diff --git a/packages/fuselage/src/styles/variables/tabs-colors.scss b/packages/fuselage/src/styles/variables/tabs-colors.scss deleted file mode 100644 index 07f3ce8c11..0000000000 --- a/packages/fuselage/src/styles/variables/tabs-colors.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '../colors.scss'; - -$tabs-background-color: theme('tabs-background-color', transparent); -$tabs-border-color: theme('tabs-border-color', transparent); -$tabs-color: theme('tabs-color', colors.neutral(600)); -$tabs-delimiter-color: theme('tabs-color', colors.neutral(400)); -$tabs-selected-color: theme('tabs-selected-color', colors.primary(500)); -$tabs-selected-border-color: theme('tabs-selected-border-color', colors.primary(500)); -$tabs-hover-color: theme('tabs-hover-border-color', colors.neutral(700)); -$tabs-active-color: theme('tabs-active-color', colors.neutral(800)); -$tabs-focus-border-color: theme('tabs-focus-border-color', colors.primary(500)); -$tabs-focus-shadow-color: theme('tabs-focus-shadow-color', colors.primary(100)); -$tabs-disabled-color: theme('tabs-disabled-color', colors.neutral(500)); diff --git a/packages/fuselage/src/styles/variables/tag-colors.scss b/packages/fuselage/src/styles/variables/tag-colors.scss deleted file mode 100644 index 017acc68d2..0000000000 --- a/packages/fuselage/src/styles/variables/tag-colors.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use '../colors.scss'; - -$tag-colors-secondary-color: theme('tag-colors-secondary-color', colors.primary(500)); -$tag-colors-secondary-background-color: theme('tag-colors-secondary-background-color', colors.primary(100)); - -$tag-colors-primary-color: theme('tag-colors-primary-color', colors.paper()); -$tag-colors-primary-background-color: theme('tag-colors-primary-background-color', colors.primary(500)); - -$tag-colors-danger-color: theme('tag-colors-danger-color', colors.paper()); -$tag-colors-danger-background-color: theme('tag-colors-danger-background-color', colors.danger(500)); - -$tag-colors-ghost-color: theme('tag-colors-ghost-color', colors.paper()); -$tag-colors-ghost-background-color: theme('tag-colors-ghost-background-color', colors.neutral(700)); - -$tag-colors-disabled-color: theme('tag-colors-disabled-color', colors.neutral(600)); -$tag-colors-disabled-background-color: theme('tag-colors-disabled-background-color', colors.neutral(400)); diff --git a/packages/fuselage/src/styles/variables/text-colors.scss b/packages/fuselage/src/styles/variables/text-colors.scss index c066dfcce2..543d21b856 100644 --- a/packages/fuselage/src/styles/variables/text-colors.scss +++ b/packages/fuselage/src/styles/variables/text-colors.scss @@ -1,21 +1,19 @@ @use '../colors.scss'; -$text-colors-default: theme('text-colors-default', colors.neutral(800)); -$text-colors-info: theme('text-colors-info', colors.neutral(700)); -$text-colors-hint: theme('text-colors-hint', colors.neutral(600)); -$text-colors-disabled-label: theme('text-colors-disabled-label', colors.neutral(500)); -$text-colors-disabled: theme('text-colors-disabled', colors.neutral(400)); -$text-colors-alternative: theme('text-colors-alternative', colors.paper()); -$text-colors-primary: theme('text-colors-primary', colors.primary(500)); -$text-colors-success: theme('text-colors-success', colors.success(500)); -$text-colors-danger: theme('text-colors-danger', colors.danger(500)); -$text-colors-warning: theme('text-colors-warning', colors.warning(700)); +$text-colors-default: theme('text-colors-default', colors.foreground(default)); +$text-colors-info: theme('text-colors-info', colors.foreground(info)); +$text-colors-hint: theme('text-colors-hint', colors.foreground(hint)); +$text-colors-disabled: theme('text-colors-disabled', colors.foreground(disabled)); +$text-colors-alternative: theme('text-colors-alternative', colors.foreground(alternative)); +$text-colors-primary: theme('text-colors-primary', colors.foreground(primary)); +$text-colors-success: theme('text-colors-success', colors.foreground(success)); +$text-colors-danger: theme('text-colors-danger', colors.foreground(danger)); +$text-colors-warning: theme('text-colors-warning', colors.foreground(warning)); $text-colors: ( default: $text-colors-default, info: $text-colors-info, hint: $text-colors-hint, - disabled-label: $text-colors-disabled-label, disabled: $text-colors-disabled, alternative: $text-colors-alternative, primary: $text-colors-primary,