forked from M3-Academy/desafio-react-e-typescript
feat(workspace): added initial styles variables
This commit is contained in:
parent
e5c578a9ba
commit
45101f965a
@ -0,0 +1,40 @@
|
||||
@use '../utils/resources/colors' as var;
|
||||
@use '../utils/resources/fonts' as fonts;
|
||||
|
||||
:root {
|
||||
@each $name, $value in var.$clr-common {
|
||||
--clr-common-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
--clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')};
|
||||
|
||||
@each $name, $value in var.$clr-gray {
|
||||
--clr-gray-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
--font-family-100: #{fonts.$font-family-100};
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-100);
|
||||
}
|
||||
|
||||
body {
|
||||
--txt-xxs: 10px;
|
||||
--txt-xs: 12px;
|
||||
--txt-small: 13px;
|
||||
--txt-normal: 14px;
|
||||
--txt-medium: 16px;
|
||||
--txt-large: 18px;
|
||||
--txt-xl: 24px;
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
--txt-xxs: 20px;
|
||||
--txt-xs: 24px;
|
||||
--txt-small: 26px;
|
||||
--txt-normal: 28px;
|
||||
--txt-medium: 32px;
|
||||
--txt-large: 36px;
|
||||
--txt-xl: 48px;
|
||||
}
|
||||
}
|
@ -0,0 +1,22 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li,
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
@ -0,0 +1,2 @@
|
||||
@import './global/exports.scss';
|
||||
@import './utils/exports.scss';
|
@ -1,4 +1,4 @@
|
||||
@import './resources/colors.scss';
|
||||
@import './resources/fonts.scss';
|
||||
@import './resources/colors';
|
||||
@import './resources/fonts';
|
||||
@import './helpers/mixin';
|
||||
@import './helpers/functions';
|
||||
|
24
src/settings/styles/utils/resources/_colors.scss
Normal file
24
src/settings/styles/utils/resources/_colors.scss
Normal file
@ -0,0 +1,24 @@
|
||||
$clr-common: (
|
||||
'black': #000,
|
||||
'white': #fff,
|
||||
'red': #ff0000,
|
||||
'green': hsl(120, 100%, 25%),
|
||||
);
|
||||
|
||||
$clr-primary-purple: (
|
||||
'500': #5200ff,
|
||||
);
|
||||
|
||||
$clr-gray: (
|
||||
'100': hsl(0, 0%, 98%),
|
||||
'200': hsl(0, 0%, 95%),
|
||||
'300': hsl(0, 0%, 78%),
|
||||
'400': hsl(0, 0%, 77%),
|
||||
'450': hsl(0, 1%, 72%),
|
||||
'500': hsl(0, 0%, 57%),
|
||||
'600': hsl(0, 0%, 49%),
|
||||
'700': hsl(0, 0%, 37%),
|
||||
'800': hsl(0, 0%, 19%),
|
||||
'900': hsl(0, 0%, 16%),
|
||||
'1000': hsl(340, 10%, 6%),
|
||||
);
|
1
src/settings/styles/utils/resources/_fonts.scss
Normal file
1
src/settings/styles/utils/resources/_fonts.scss
Normal file
@ -0,0 +1 @@
|
||||
$font-family-100: 'Roboto', Arial, Helvetica, sans-serif;
|
Loading…
Reference in New Issue
Block a user