[DESIGN TOKENS] Revisar e ajustar ao novo layout

daphnemartinsba commented 8 months ago

Styleguide: https://www.figma.com/file/ZVvIybXICJvCLB7sVbEWY5/M%C3%ADdia-NINJA-UI-V2?type=design&node-id=1-3&mode=design&t=I2vlWLtDC59ec7za-0 Componentes: https://www.figma.com/file/ZVvIybXICJvCLB7sVbEWY5/M%C3%ADdia-NINJA-UI-V2?type=design&node-id=1-2&mode=design&t=I2vlWLtDC59ec7za-0

O design token foi feito com base no antigo layout, portanto:

[ ] Adequar o design token às especificações do novo layout disponíveis nos links acima

daphnemartinsba commented 7 months ago

[x] Aplicar tamanho, line height e weight no Título H5: Manrope 20 px 500 weight 30 px line height
[ ] Aplicar para parágrafo: cor #111111, manrope 16px, 500 weight, 16 px line height
[ ] Aplicar para Título H6: cor #111111, manrope 13 px, 500 weight, 18.85 line height
[ ] Avaliar o styleguide e validar se todas as configurações foram realizadas

everaldomatias commented 7 months ago

@daphnemartinsba aqui para essa issue estamos aguardando a atualização do brand tokens no figma, certo?

daphnemartinsba commented 7 months ago

@daphnemartinsba aqui para essa issue estamos aguardando a atualização do brand tokens no figma, certo?

Brand tokens Atualizado

Como não precisou de tantos headings, os retornos sobre h5 e h6 podem ser desconsiderados

pivapedro commented 7 months ago

@daphnemartinsba durante a conversa com o Pedro Lucas, identifiquei algumas inconsistências entre os tokens no Figma e o código atual. Seria importante mapear os impactos das alterações nos componentes já desenvolvidos, especialmente aqueles que estão utilizando os tokens atuais. Vide um exemplo:

daphnemartinsba commented 7 months ago

@daphnemartinsba durante a conversa com o Pedro Lucas, identifiquei algumas inconsistências entre os tokens no Figma e o código atual. Seria importante mapear os impactos das alterações nos componentes já desenvolvidos, especialmente aqueles que estão utilizando os tokens atuais. Vide um exemplo:

@pivapedro você poderia em primeiro momento mapear todas essas inconsistências? Teria alguma sugestão de como mapear esses impactos?

pivapedro commented 7 months ago

- Cores sem variaveis

themes/midia-ninja-theme/assets/scss/6-pages/_p-single.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-page.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-page-anchor.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-home.scss themes/midia-ninja-theme/assets/scss/5-blocks/_b-latest-vertical-posts.scss themes/midia-ninja-theme/assets/scss/4-layout/_l-header.scss themes/midia-ninja-theme/assets/scss/4-layout/_l-footer.scss themes/midia-ninja-theme/assets/scss/3-components/_c-share.scss themes/midia-ninja-theme/assets/scss/3-components/_c-list-terms.scss themes/midia-ninja-theme/assets/scss/3-components/_c-main-menu.scss ?? color: var(--Primary-dark, var(--DARK, #111)); line 55

- Cores trocadas pelo caminho

assets/scss/1-settings/_s-variables.scss --c-primary: #{$c_blue_primary} ;

plugins/hacklab-blocks/assets/variables.scss --c-primary: #{$c_red_primary};

$c_blue_primary: #035299; --c-primary: #{$c_blue_primary}; assets/scss/3-components/_c-slider.scss

- Cores e onde elas aparecem

$c_blue_secondary: #B1D3E5; themes/midia-ninja-theme/assets/scss/3-components/_c-slider.scss themes/midia-ninja-theme/assets/scss/3-components/_c-title.scss

--c-gray--darker: #{$c_gray_darker}; assets/scss/2-atoms/_a-typography.scss themes/midia-ninja-theme/assets/scss/3-components/_c-title.scss themes/midia-ninja-theme/assets/scss/3-components/_c-pagination.scss themes/midia-ninja-theme/assets/scss/4-layout/_l-header.scss themes/midia-ninja-theme/assets/scss/4-layout/_l-sidebar.scss themes/midia-ninja-theme/assets/scss/5-blocks/_b-timeline.scss themes/midia-ninja-theme/assets/scss/7-parts/_p-content-post.scss themes/midia-ninja-theme/assets/scss/8-optional/_c-top-menu.scss

$c_primary assets/scss/3-components/_c-button.scss assets/scss/3-components/_c-carousel-posts.scss assets/scss/3-components/_c-newsletter.scss assets/scss/4-layout/_l-comments.scss

$c_gray__darker assets/scss/3-components/_c-card.scss

$c_gray assets/scss/3-components/_c-carousel-posts.scss assets/scss/3-components/_c-follow-us.scss assets/scss/3-components/_c-forms.scss

--c-primary themes/midia-ninja-theme/assets/scss/3-components/_c-main-menu.scss themes/midia-ninja-theme/assets/scss/3-components/_c-pagination.scss themes/midia-ninja-theme/assets/scss/3-components/_c-slider.scss themes/midia-ninja-theme/assets/scss/3-components/_c-title.scss themes/midia-ninja-theme/assets/scss/3-components/_c-wpml-language-menu.scss themes/midia-ninja-theme/assets/scss/4-layout/_l-sidebar.scss themes/midia-ninja-theme/assets/scss/5-blocks/_b-cover.scss themes/midia-ninja-theme/assets/scss/5-blocks/_b-timeline.scss themes/midia-ninja-theme/assets/scss/7-parts/_p-content-post.scss

$c_blue_primary themes/midia-ninja-theme/assets/scss/3-components/_c-slider.scss themes/midia-ninja-theme/assets/scss/3-components/_c-title.scss

--wp--preset--color** plugins/hacklab-blocks/blocks/flickr-album-gallery/style.scss plugins/hacklab-blocks/blocks/video-playlist/style.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-author.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-editor.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-home.scss themes/midia-ninja-theme/assets/scss/6-pages/_p-tutorstarter.scss themes/midia-ninja-theme/assets/scss/7-parts/_p-filter-posts.scss themes/midia-ninja-theme/library/blocks/src/latest-horizontal-posts/style.scss

pivapedro commented 7 months ago

Relatório atualizado:

/home/piva/hacklab/ninja-wp-theme/plugins/hacklab-blocks/assets/mixins.scss 105,25: @function size($target, $context: $base-size) {

/home/piva/hacklab/ninja-wp-theme/plugins/hacklab-blocks/assets/variables.scss 9,1: $s_html: 16px; 11,1: $s_p: 1rem; 12,1: $s_span: 1rem; 14,1: $s_h1: 4rem; //equivalente a 64px 15,1: $s_h2: 2rem; //equivalente a 32px 16,1: $s_h3: 1.5rem; //equivalente a 24px 17,1: $s_h4: 1.25rem; //equivalente a 20px 18,1: $s_h5: 1rem; //equivalente a 16px 19,1: $s_h6: 0.875rem; //equivalente a 14px 22,1: $s_h1_mt: 1em; 23,1: $s_h1_mb: 1em; 25,1: $s_h2_mt: 0.75em; 26,1: $s_h2_mb: 0.75em; 28,1: $s_h3_mt: 0.585em; 29,1: $s_h3_mb: 0.585em; 31,1: $s_h4_mt: 0.5em; 32,1: $s_h4_mb: 0.5em; 35,1: $c_blue_primary: #035299; 36,1: $c_red_primary: #7C001D; 37,1: $c_blue_secondary: #B1D3E5; 39,1: $c_yellow_primary: #FBF6C0; 40,1: $c_yellow_secondary: #F2EB72; 42,1: $c_green_primary: #93C278; 43,1: $c_green_secondary: #B3D9BE; 45,1: $c_bege: #D8D3BC; 46,1: $c_gray_darker: #333333; 47,1: $c_gray_grabois: #646464; 48,1: $c_green_grabois: #006940; 49,1: $c_gray_cdm_block: #F5F5F5; 50,1: $c_gray_cdm_block_hover: #D2D2D2; 54,1: $p_theme: '/wp-content/themes/grabois-theme'; 55,1: $p_theme_assets: $p_theme + '/assets'; 58,1: $f_body: 'Roboto', sans-serif; 59,1: $f_title: 'Roboto', sans-serif; 60,1: $s_meta: .875rem; //equivalente 14px 63,1: $s_small: 20px; 64,1: $s_large: 40px; 69,5: $s_span: $s_p; 98,13: --c-gray--darker: #{$c_gray_darker};

/home/piva/hacklab/ninja-wp-theme/plugins/hacklab-blocks/blocks/fetch-tainacan-api/style.scss 3,1: $p_theme_assets: '/wp-content/themes/base-theme-slug/assets/';

/home/piva/hacklab/ninja-wp-theme/plugins/hacklab-blocks/blocks/flickr-album-gallery/style.scss 235,25: background-color: var(--wp--preset--color--dark);

/home/piva/hacklab/ninja-wp-theme/plugins/hacklab-blocks/blocks/video-playlist/style.scss 106,31: background-color: var(--wp--preset--color--red); 124,24: color: var(--wp--preset--color--red);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/1-settings/_s-variables.scss 10,1: $s_html: 16px; //equivalente a 16px 11,1: $s_h1: 6.4rem; //equivalente a 64px 12,1: $s_h2: 4.8rem; //equivalente a 48px 13,1: $s_h3: 4rem; //equivalente a 32px 14,1: $s_h4: 2rem; //equivalente a 44px 15,1: $s_h5: 1.25rem; //equivalente a 20px 16,1: $s_h6: 0.875em; //equivalente a 14px 19,1: $c_blue_primary: #035299; 20,1: $c_blue_secondary: #b1d3e5; 23,1: $p_theme: "/wp-content/themes/midia-ninja-theme"; 24,1: $p_theme_assets: $p_theme + "/assets"; 27,1: $f_body: "Manrope", sans-serif; 28,1: $f_title: "Manrope", sans-serif; 29,1: $f_ninja: "MidiaNinja", sans-serif; 30,1: $s_meta: 0.875rem; //equivalente 14px 33,1: $s_small: 0.938rem; 34,1: $s_medium: 1.875rem; 35,1: $s_large: 2.813rem;

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/2-atoms/_a-mixins.scss 116,25: @function size($target, $context: $base-size) {

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/2-atoms/_a-typography.scss 11,20: font-size: var(--wp--preset--font-size--really-large); 17,20: font-size: var(--wp--preset--font-size--large); 23,20: font-size: var(--wp--preset--font-size--medium); 29,20: font-size: var(--wp--preset--font-size--intermediate-standard);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/3-components/_c-newsletter.scss 1,1: $c_green: #00704b;

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/3-components/_c-slider.scss 1,1: $p_theme_assets: '/wp-content/themes/midia-ninja-theme/assets';

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/5-blocks/_b-timeline.scss 1,1: $p_theme_assets: "/wp-content/themes/midia-ninja-theme/assets";

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/6-pages/_p-author.scss 24,27: color:var(--wp--preset--color--white);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/6-pages/_p-editor.scss 33,67: background-color: var(--wp--preset--color--laranja-dark); // @todo - make dynamic 34,56: color: var(--wp--preset--color--secondary-light); 36,60: font-size: var(--wp--preset--font-size--small); 45,52: color: var(--wp--preset--color--primary-pure); 46,56: font-size: var(--wp--preset--font-size--default); 54,52: color: var(--wp--preset--color--primary-light); 71,59: background-color: var(--wp--preset--color--primary-pure); 123,52: color: var(--wp--preset--color--secondary-light); 143,56: color: var(--wp--preset--color--secondary-light); 153,56: color: var(--wp--preset--color--secondary-light); 154,60: font-size: var(--wp--preset--font-size--medium); 162,55: background-color: var(--wp--preset--color--primary-pure); 164,44: color: var(--wp--preset--color--primary-light); 182,52: color: var(--wp--preset--color--secondary-light); 204,60: color: var(--wp--preset--color--primary-pure); 205,64: font-size: var(--wp--preset--font-size--small);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/6-pages/_p-home.scss 42,47: background-color: var(--wp--preset--color--highlight-pure); // @todo - make dynamic 44,36: color: var(--wp--preset--color--primary-pure); 46,40: font-size: var(--wp--preset--font-size--small); 63,32: color: var(--wp--preset--color--primary-pure); 64,36: font-size: var(--wp--preset--font-size--default); 71,32: color: var(--wp--preset--color--primary-light); 134,55: background-color: var(--wp--preset--color--laranja-dark); // @todo - make dynamic 135,44: color: var(--wp--preset--color--secondary-light); 137,48: font-size: var(--wp--preset--font-size--small); 147,40: color: var(--wp--preset--color--primary-light); 156,50: border-bottom: 1px solid var(--wp--preset--color--primary-pure); 187,39: background-color: var(--wp--preset--color--primary-pure); 239,32: color: var(--wp--preset--color--secondary-light); 259,36: color: var(--wp--preset--color--secondary-light); 273,36: color: var(--wp--preset--color--secondary-light); 274,40: font-size: var(--wp--preset--font-size--medium); 287,35: background-color: var(--wp--preset--color--primary-pure); 289,24: color: var(--wp--preset--color--primary-light); 318,32: color: var(--wp--preset--color--primary-light); 345,40: color: var(--wp--preset--color--primary-pure);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/6-pages/_p-page.scss 33,32: font-size: var(--wp--preset--font-size--default); 73,36: font-size: var(--wp--preset--font-size--default);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/6-pages/_p-search.scss 4,1: $p_theme_assets: '/wp-content/themes/midia-ninja-theme/assets';

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/6-pages/_p-tutorstarter.scss 16,20: color: var(--wp--preset--color--high-pure); 27,24: color: var(--wp--preset--color--high-pure); 83,27: background-color: var(--wp--preset--color--primary-pure); 92,20: color: var(--wp--preset--color--high-pure) !important;

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/assets/scss/7-parts/_p-filter-posts.scss 17,20: color: var(--wp--preset--color--low-pure); 43,35: background-color: var(--wp--preset--color--high-pure); 44,35: border: 1px solid var(--wp--preset--color--low-pure); 46,24: color: var(--wp--preset--color--low-dark);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/library/blocks/src/latest-horizontal-posts/style.scss 359,25: background-color: var(--wp--preset--color--dark-pure); 493,15: color: var(--wp--preset--color--secondary-light);

/home/piva/hacklab/ninja-wp-theme/themes/midia-ninja-theme/library/blocks/src/latest-vertical-posts/style.scss 21,20: font-size: var(--wp--preset--font-size--default);

daphnemartinsba commented 6 months ago

blocked: aguardando aceite do PR

daphnemartinsba commented 6 months ago

[ ] Alterar cor da fonte h1, h2, h3, h4 para #111111, no momento está #262626
[ ] alterar h2 para: font-size: 32px; font-weight: 800; line-height: 38.4px; letter-spacing: -0.02em; text-align: left;

na single de posts no staging:

[ ] alterar h3 para: font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: -0.01em; text-align: left;

na single de posts no staging:

[ ] alterar h4 para:

font-size: 20px; font-weight: 700; line-height: 26px; text-align: left;

na single de posts do staging:

[ ] Aplicar fontes h5 e h6

daphnemartinsba commented 6 months ago

retorno na issue #88

midianinja / ninja-wp-theme