feat(colors): improve colors definitions

glrodasz · Jul 17, 2021 · d8e84b7 · d8e84b7
1 parent ffc6a43
commit d8e84b7
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 8 deletions.
diff --git a/atoms/Card/Card.module.css b/atoms/Card/Card.module.css
@@ -34,7 +34,7 @@
 
 .color-base {
   border: var(--border-width-thin) solid var(--color-gray-400);
-  background: var(--color-primary-inverted);
+  background: var(--background-color-primary-highlight);
 }
 
 .is-clickable {

diff --git a/atoms/Heading/Heading.module.css b/atoms/Heading/Heading.module.css
@@ -10,7 +10,7 @@
 }
 
 .color-inverted {
-  color: var(--color-font-inverted);
+  color: var(--color-primary-inverted);
 }
 
 .color-primary {

diff --git a/atoms/Icon/Icon.module.css b/atoms/Icon/Icon.module.css
@@ -62,7 +62,7 @@
 
 .background-inverted {
   border: var(--picture-border);
-  background: var(--color-primary-inverted);
+  background: var(--color-font-inverted);
   border-radius: var(--border-radius-full);
   box-shadow: var(--box-shadow-sm);
 }
@@ -74,7 +74,7 @@
 }
 
 .background-fulfilled {
-  background: var(--color-font-base);
+  background: var(--color-primary-muted);
   border-radius: var(--border-radius-full);
   box-shadow: var(--box-shadow-sm);
 }

diff --git a/styles/tokens.css b/styles/tokens.css
@@ -304,6 +304,7 @@
   --box-shadow-sm: 0px 4px 5px rgba(0, 0, 0, 0.07);
 
   --border-radius-none: 0;
+  --border-radius-xs: 4px;
   --border-radius-sm: 10px;
   --border-radius-md: 20px;
   --border-radius-lg: 30px;
@@ -337,9 +338,11 @@
   --color-font-inverted: #fff;
   --color-secondary: #eb2d52;
   --color-secondary-muted: #eb4e58;
+  --color-secondary-highlight: #fecdd3;
   --color-secondary-inverted: #fff;
   --color-tertiary: #00e5a8;
-  --color-tertiary-muted: #22c55e;
+  --color-tertiary-muted: #34d399;
+  --color-tertiary-highlight: #a7f3d0;
   --color-tertiary-inverted: #fff;
 
   --background-color-primary: #f9f9f9;

diff --git a/tokens/Token/components/Color.stories.js b/tokens/Token/components/Color.stories.js
@@ -45,11 +45,10 @@ Brand.parameters = {
 
 export const Decisions = ListTemplate.bind({})
 Decisions.args = {
-  __sb: { mh: 300 },
   items: getDecisionItems(),
 }
 Decisions.parameters = {
-  __sb: { mh: 300 },
+  __sb: { mh: 400 },
 }
 
 export const Backgrounds = ListTemplate.bind({})

diff --git a/tokens/index.js b/tokens/index.js
@@ -360,6 +360,7 @@ const choices = {
   },
   borderRadius: {
     none: '0',
+    xs: '4px',
     sm: '10px',
     md: '20px',
     lg: '30px',
@@ -400,9 +401,11 @@ const decisions = {
     fontInverted: choices.color.base.white,
     secondary: choices.color.brand.amaranth,
     secondaryMuted: choices.color.brand.mandy,
+    secondaryHighlight: choices.color.rose[200],
     secondaryInverted: choices.color.base.white,
     tertiary: choices.color.brand.mediumSpringGreen,
-    tertiaryMuted: choices.color.green[500],
+    tertiaryMuted: choices.color.emerald[400],
+    tertiaryHighlight: choices.color.emerald[200],
     tertiaryInverted: choices.color.base.white,
   },
   backgroundColor: {