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,