Skip to content

Commit

Permalink
APP-4244 - Export var and create utils class (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AliciaSymphony
AliciaSymphony authored Jun 22, 2021
1 parent a4cd942 commit 2d4c143
Show file tree
Hide file tree
Showing 8 changed files with 214 additions and 133 deletions.
14 changes: 0 additions & 14 deletions src/utils/colors/_bg-colors.scss
View file

This file was deleted.

44 changes: 19 additions & 25 deletions src/utils/colors/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
2 changes: 1 addition & 1 deletion src/utils/colors/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
@import './colors';
@import './bg-colors';
@import './variables';
11 changes: 11 additions & 0 deletions src/utils/colors/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -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};
}
}
}
}
182 changes: 99 additions & 83 deletions src/variables/colors/_statics.scss
View file
Original file line number Diff line number Diff line change
@@ -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. */
Expand Down
66 changes: 66 additions & 0 deletions stories/colorVariables.stories.js
View file
Original file line number Diff line number Diff line change
@@ -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 `<div> <h2>Main colors</h2>
<p>Click to copy the variable to your clipboard</p>
${mainColors.map((color) => {
const hex = getHex(`--tk-color-${color}`);
return `<div
class="tk-card"
style="background-color: var(--tk-color-${color}); cursor: pointer; max-width: 30rem;"
onclick="navigator.clipboard.writeText('--tk-color-${color}')"
>
<div class="tk-m-1" style="display: flex; justify-content: space-between">
<span style="color: #000"> --tk-color-${color} ${hex}</span> <span style="color: #fff">--tk-color-${color} ${hex}</<span>
</div>
</div>`;
}).join('<br/>')}
${colors.map(
(color) =>
`<div><h2>${color.toUpperCase()}</h2>
<p>Click to copy the variable to your clipboard</p>
${scales.map((scale) => {
const hex = getHex(`--tk-color-${color}-${scale}`);
return `<div
class="tk-card"
style="background-color: var(--tk-color-${color}-${scale}); cursor: pointer; max-width: 30rem;"
onclick="navigator.clipboard.writeText('--tk-color-${color}-${scale}')"
>
<div class="tk-m-1" style="display: flex; justify-content: space-between">
<span style="color: #000"> --tk-color-${color}-${scale} ${hex}</span> <span style="color: #fff">--tk-color-${color}-${scale} ${hex}</<span>
</div>
</div>`;
}).join('<br/>')}
</div>`
).join('<br/>')}
</div>`;
};

const getHex = (string) =>
getComputedStyle(document.querySelector('#root')).getPropertyValue(string);
10 changes: 5 additions & 5 deletions stories/text.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export default {
title: 'Utils/Text',
title: 'Utils/Label',
};

export const Text = () => `<label class="tk-label">Default label</label>
<label class="tk-label tk-label--error">Error label</label>
<label class="tk-label tk-label--required">Required label</label>
<label class="tk-label tk-label--disabled">Disabled label</label>`;
export const Label = () => `<label class="tk-label">Default label .tk-label</label>
<label class="tk-label tk-label--error">Error label .tk-label--error</label>
<label class="tk-label tk-label--required">Required label .tk-label--required</label>
<label class="tk-label tk-label--disabled">Disabled label .tk-label--disabled</label>`;
18 changes: 13 additions & 5 deletions stories/utils.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,21 @@ export default {
export const TextColors = () =>
`<div class="tk-ml-2">
<h1>Text colors</h1>
<div class="tk-mb-2 tk-text-color">Default text color</div>
<div class="tk-mb-2 tk-text-color--primary">Primary text color</div>
<div class="tk-mb-2 tk-text-color--warning">Warning text color</div>
<div class="tk-mb-2 tk-text-color--ok">Ok text color</div>
<div class="tk-mb-2 tk-text-color--attention">Attention text color</div>
<div class="tk-mb-2 tk-text-color">Default text color .tk-text-color</div>
<div class="tk-mb-2 tk-text-color--primary">Primary text color .tk-text-color--primary</div>
<div class="tk-mb-2 tk-text-color--warning">Warning text color .tk-text-color--warning</div>
<div class="tk-mb-2 tk-text-color--ok">Ok text color .tk-text-color--ok</div>
<div class="tk-mb-2 tk-text-color--attention">Attention text color .tk-text-color--attention</div>
</div>`;

export const BackgroundColors = () =>
`<div class="tk-ml-2">
<h1>Text colors</h1>
<div class="tk-mb-2 tk-bg-color--primary">Primary background color .tk-bg-color--primary</div>
<div class="tk-mb-2 tk-bg-color--warning">Warning background color .tk-bg-color--warning</div>
<div class="tk-mb-2 tk-bg-color--ok">Ok background color .tk-bg-color--ok</div>
<div class="tk-mb-2 tk-bg-color--attention">Attention background color .tk-bg-color--attention</div>
</div>`;

export const spacing = () =>
`
Expand Down

0 comments on commit 2d4c143

Please sign in to comment.