From 2d4c143f99d1723f5989bc79d494083407e9bd34 Mon Sep 17 00:00:00 2001
From: Alicia Marin <56824367+AliciaSymphony@users.noreply.github.com>
Date: Tue, 22 Jun 2021 12:05:28 +0200
Subject: [PATCH] APP-4244 - Export var and create utils class (#103)
---
src/utils/colors/_bg-colors.scss | 14 ---
src/utils/colors/_colors.scss | 44 +++----
src/utils/colors/_index.scss | 2 +-
src/utils/colors/_variables.scss | 11 ++
src/variables/colors/_statics.scss | 182 ++++++++++++++++-------------
stories/colorVariables.stories.js | 66 +++++++++++
stories/text.stories.js | 10 +-
stories/utils.stories.js | 18 ++-
8 files changed, 214 insertions(+), 133 deletions(-)
delete mode 100644 src/utils/colors/_bg-colors.scss
create mode 100644 src/utils/colors/_variables.scss
create mode 100644 stories/colorVariables.stories.js
diff --git a/src/utils/colors/_bg-colors.scss b/src/utils/colors/_bg-colors.scss
deleted file mode 100644
index 96db0a9e..00000000
--- a/src/utils/colors/_bg-colors.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.tk-bg-color {
- &--warning {
- background-color: $scolor-red !important;
- }
- &--ok {
- background-color: $scolor-green !important;
- }
- &--attention {
- background-color: $scolor-orange !important;
- }
- &--primary {
- background-color: $scolor-electricity !important;
- }
-}
diff --git a/src/utils/colors/_colors.scss b/src/utils/colors/_colors.scss
index 58b08d7e..288ac1a2 100644
--- a/src/utils/colors/_colors.scss
+++ b/src/utils/colors/_colors.scss
@@ -1,31 +1,25 @@
-.tk-color-action-primary {
- color: $scolor-electricity !important;
-}
-.tk-color-action-ok {
- color: $scolor-green !important;
-}
+$colorMap: (
+ "primary": $scolor-electricity,
+ "ok": $scolor-green,
+ "attention": $scolor-orange,
+ "warning": $--tk-color-error,
+);
-.tk-color-action-attention {
- color: $scolor-orange !important;
-}
-
-.tk-color-action-warning {
- color: $--tk-color-error !important;
+@each $name, $color in $colorMap {
+ .tk-color-action-#{$name} {
+ color: $color !important;
+ }
+ .tk-text-color-#{$name} { // deprecated
+ color: $color !important;
+ }
+ .tk-text-color--#{$name} {
+ color: $color !important;
+ }
+ .tk-bg-color--#{$name} {
+ background-color: $color !important;
+ }
}
.tk-text-color {
color: $--tk-main-text-color;
-
- &--warning {
- @extend .tk-color-action-warning;
- }
- &--ok {
- @extend .tk-color-action-ok;
- }
- &--attention {
- @extend .tk-color-action-attention;
- }
- &--primary {
- @extend .tk-color-action-primary;
- }
}
diff --git a/src/utils/colors/_index.scss b/src/utils/colors/_index.scss
index f3d18ca3..b9c9c727 100644
--- a/src/utils/colors/_index.scss
+++ b/src/utils/colors/_index.scss
@@ -1,2 +1,2 @@
@import './colors';
-@import './bg-colors';
+@import './variables';
diff --git a/src/utils/colors/_variables.scss b/src/utils/colors/_variables.scss
new file mode 100644
index 00000000..21f81ad0
--- /dev/null
+++ b/src/utils/colors/_variables.scss
@@ -0,0 +1,11 @@
+body {
+ @each $name, $map in $colors {
+ @each $scale, $color in $map {
+ @if $scale != '' {
+ --tk-color-#{$name}-#{$scale}: #{$color};
+ } @else {
+ --tk-color-#{$name}: #{$color};
+ }
+ }
+ }
+}
diff --git a/src/variables/colors/_statics.scss b/src/variables/colors/_statics.scss
index aff99984..74aaae10 100644
--- a/src/variables/colors/_statics.scss
+++ b/src/variables/colors/_statics.scss
@@ -1,88 +1,104 @@
+@use "sass:map";
/** ======== Color palette from SDS ======== */
-// Graphite
-$scolor-graphite-05: #f1f1f3;
-$scolor-graphite-10: #e3e5e7;
-$scolor-graphite-20: #cdcfd4;
-$scolor-graphite-30: #b0b3ba;
-$scolor-graphite-40: #8f959e;
-$scolor-graphite-50: #717681;
-$scolor-graphite-60: #52565e;
-$scolor-graphite-70: #3a3d43;
-$scolor-graphite-80: #27292c;
-$scolor-graphite-90: #141618;
-
-// Midnight
-$scolor-midnight-05: #f1f1f3; // Same as $scolor-graphite-05
-$scolor-midnight-10: #e3e5e7; // Same as $scolor-graphite-10
-$scolor-midnight-20: #ceced5;
-$scolor-midnight-30: #b2b2be;
-$scolor-midnight-40: #9393a4;
-$scolor-midnight-50: #75758a;
-$scolor-midnight-60: #55556f;
-$scolor-midnight-70: #3b3b59;
-$scolor-midnight-80: #252547;
-$scolor-midnight-90: #111136;
-
-// Electricity
-$scolor-electricity-05: #e9f2f9;
-$scolor-electricity-10: #d6e7f7;
-$scolor-electricity-20: #aad4f8;
-$scolor-electricity-30: #6eb9fd;
-$scolor-electricity-40: #2996fd;
-$scolor-electricity-50: #0277d6;
-$scolor-electricity-60: #27588e;
-$scolor-electricity-70: #253f5d;
-$scolor-electricity-80: #1c2a3a;
-$scolor-electricity-90: #10151d;
-
-// Green
-$scolor-green-05: #eaf4ea;
-$scolor-green-10: #d6ebd5;
-$scolor-green-20: #aadba6;
-$scolor-green-30: #65c862;
-$scolor-green-40: #2eaa35;
-$scolor-green-50: #378535;
-$scolor-green-60: #32602f;
-$scolor-green-70: #294425;
-$scolor-green-80: #1d2d1b;
-$scolor-green-90: #10170e;
-
-// Yellow
-$scolor-yellow-05: #f8f2d7;
-$scolor-yellow-10: #f6e5a6;
-$scolor-yellow-20: #f7ca3b;
-$scolor-yellow-30: #e7a800;
-$scolor-yellow-40: #c98700;
-$scolor-yellow-50: #9c6c1a;
-$scolor-yellow-60: #70511f;
-$scolor-yellow-70: #4d391c;
-$scolor-yellow-80: #322715;
-$scolor-yellow-90: #1a150c;
-
-// Red
-$scolor-red-05: #fbeeed;
-$scolor-red-10: #fadfdc;
-$scolor-red-20: #fcc1b9;
-$scolor-red-30: #ff9789;
-$scolor-red-40: #ff5d50;
-$scolor-red-50: #dd342e;
-$scolor-red-60: #99342c;
-$scolor-red-70: #662a24;
-$scolor-red-80: #411f1a;
-$scolor-red-90: #21110e;
-
-// Main brand colors
-$scolor-electricity: #008eff;
-$scolor-midnight: #000028;
-
-// Additional brand colors
-$scolor-white: #ffffff;
-$scolor-orange: #ff7a00;
-$scolor-lime: #9fea00;
-$scolor-plum: #c704ff;
-$scolor-rose: #ff49a0;
-$scolor-black: #000000;
+$graphite: (
+ '05': #f1f1f3,
+ '10': #e3e5e7,
+ '20': #cdcfd4,
+ '30': #b0b3ba,
+ '40': #8f959e,
+ '50': #717681,
+ '60': #52565e,
+ '70': #3a3d43,
+ '80': #27292c,
+ '90': #141618,
+);
+
+$midnight: (
+ '05': #f1f1f3,
+ '10': #e3e5e7,
+ '20': #ceced5,
+ '30': #b2b2be,
+ '40': #9393a4,
+ '50': #75758a,
+ '60': #55556f,
+ '70': #3b3b59,
+ '80': #252547,
+ '90': #111136,
+ '': #000028,
+);
+
+$electricity: (
+ '05': #e9f2f9,
+ '10': #d6e7f7,
+ '20': #aad4f8,
+ '30': #6eb9fd,
+ '40': #2996fd,
+ '50': #0277d6,
+ '60': #27588e,
+ '70': #253f5d,
+ '80': #1c2a3a,
+ '90': #10151d,
+ '': #008eff,
+);
+
+$green: (
+ '05': #eaf4ea,
+ '10': #d6ebd5,
+ '20': #aadba6,
+ '30': #65c862,
+ '40': #2eaa35,
+ '50': #378535,
+ '60': #32602f,
+ '70': #294425,
+ '80': #1d2d1b,
+ '90': #10170e,
+);
+
+$yellow: (
+ '05': #f8f2d7,
+ '10': #f6e5a6,
+ '20': #f7ca3b,
+ '30': #e7a800,
+ '40': #c98700,
+ '50': #9c6c1a,
+ '60': #70511f,
+ '70': #4d391c,
+ '80': #322715,
+ '90': #1a150c,
+);
+
+$red: (
+ '05': #fbeeed,
+ '10': #fadfdc,
+ '20': #fcc1b9,
+ '30': #ff9789,
+ '40': #ff5d50,
+ '50': #dd342e,
+ '60': #99342c,
+ '70': #662a24,
+ '80': #411f1a,
+ '90': #21110e,
+);
+
+$colors: (
+ 'graphite': $graphite,
+ 'midnight': $midnight,
+ 'electricity': $electricity,
+ 'green': $green,
+ 'yellow': $yellow,
+ 'red': $red,
+ 'white': ('': #ffffff),
+ 'orange': ('': #ff7a00),
+ 'lime': ('': #9fea00),
+ 'plum': ('': #c704ff),
+ 'rose': ('': #ff49a0),
+ 'black': ('': #000000),
+);
+
+@function getColor($color, $num) {
+ @return map-get($color, $num);
+}
/** ======== Former UIToolkit color palette. ======== */
/** This will be deprecated, use the SDS color palette. */
diff --git a/stories/colorVariables.stories.js b/stories/colorVariables.stories.js
new file mode 100644
index 00000000..35d92256
--- /dev/null
+++ b/stories/colorVariables.stories.js
@@ -0,0 +1,66 @@
+export default {
+ title: 'Utils/Color\ Variables',
+};
+
+const colors = [
+ 'graphite',
+ 'midnight',
+ 'electricity',
+ 'green',
+ 'yellow',
+ 'red',
+];
+
+const mainColors = [
+ 'midnight',
+ 'electricity',
+ 'white',
+ 'orange',
+ 'lime',
+ 'plum',
+ 'rose',
+ 'black',
+];
+
+const scales = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90'];
+
+export const ColorVariables = () => {
+ return ` Main colors
+
Click to copy the variable to your clipboard
+ ${mainColors.map((color) => {
+ const hex = getHex(`--tk-color-${color}`);
+
+ return `
+
+ --tk-color-${color} ${hex} --tk-color-${color} ${hex}
+
+
`;
+ }).join('
')}
+ ${colors.map(
+ (color) =>
+ `
${color.toUpperCase()}
+
Click to copy the variable to your clipboard
+ ${scales.map((scale) => {
+ const hex = getHex(`--tk-color-${color}-${scale}`);
+ return `
+
+ --tk-color-${color}-${scale} ${hex} --tk-color-${color}-${scale} ${hex}
+
+
`;
+ }).join('
')}
+
`
+ ).join('
')}
+
+
`;
+};
+
+const getHex = (string) =>
+ getComputedStyle(document.querySelector('#root')).getPropertyValue(string);
diff --git a/stories/text.stories.js b/stories/text.stories.js
index 60a96fe6..8578ec14 100644
--- a/stories/text.stories.js
+++ b/stories/text.stories.js
@@ -1,8 +1,8 @@
export default {
- title: 'Utils/Text',
+ title: 'Utils/Label',
};
-export const Text = () => `
-
-
-`;
+export const Label = () => `
+
+
+`;
diff --git a/stories/utils.stories.js b/stories/utils.stories.js
index 01fa68d4..02b0d105 100644
--- a/stories/utils.stories.js
+++ b/stories/utils.stories.js
@@ -5,13 +5,21 @@ export default {
export const TextColors = () =>
`
Text colors
-
Default text color
-
Primary text color
-
Warning text color
-
Ok text color
-
Attention text color
+
Default text color .tk-text-color
+
Primary text color .tk-text-color--primary
+
Warning text color .tk-text-color--warning
+
Ok text color .tk-text-color--ok
+
Attention text color .tk-text-color--attention
`;
+ export const BackgroundColors = () =>
+ `
+
Text colors
+
Primary background color .tk-bg-color--primary
+
Warning background color .tk-bg-color--warning
+
Ok background color .tk-bg-color--ok
+
Attention background color .tk-bg-color--attention
+