Merge pull request #359 from nginformatica/feat/design-system-colors

Feat/design system colors

Author: KarineBrandelli

.storybook/main.ts

@@ -10,7 +10,7 @@ const config: StorybookConfig = {
     features: {
         storyStoreV7: false
     },
-    addons: ['@storybook/addon-essentials', '@storybook/addon-styling-webpack'],
+    addons: ['@storybook/addon-essentials'],
     docs: {
         autodocs: true
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.34.6",
+    "version": "0.34.7",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -10,9 +10,6 @@
         "type": "git",
         "url": "https://github.com/nginformatica/flipper-ui.git"
     },
-    "resolutions": {
-        "wrap-ansi": "7.0.0"
-    },
     "scripts": {
         "start": "storybook dev -p 6006",
         "build": "yarn clean && yarn build:ts && yarn build:babel",
@@ -35,50 +32,50 @@
     "dependencies": {
         "@emotion/react": "11.13.3",
         "@emotion/styled": "11.13.0",
-        "@mui/icons-material": "6.0.2",
-        "@mui/material": "6.0.2",
-        "@mui/styles": "6.0.2",
-        "@mui/x-date-pickers": "7.15.0",
+        "@mui/icons-material": "6.1.2",
+        "@mui/material": "6.1.2",
+        "@mui/styles": "6.1.2",
+        "@mui/system": "6.1.2",
+        "@mui/x-date-pickers": "7.18.0",
         "date-fns": "2.30.0",
         "ramda": "0.30.1",
-        "react-loading-skeleton": "3.4.0",
-        "react-number-format": "5.4.1",
+        "react-loading-skeleton": "3.5.0",
+        "react-number-format": "5.4.2",
         "sprintf-js": "1.1.3",
         "uuid": "10.0.0"
     },
     "devDependencies": {
-        "@babel/cli": "7.25.6",
-        "@babel/core": "7.25.2",
-        "@babel/plugin-transform-runtime": "7.25.4",
-        "@babel/preset-env": "7.25.4",
-        "@babel/preset-typescript": "7.24.7",
-        "@faker-js/faker": "8.4.1",
+        "@babel/cli": "7.25.7",
+        "@babel/core": "7.25.7",
+        "@babel/plugin-transform-runtime": "7.25.7",
+        "@babel/preset-env": "7.25.7",
+        "@babel/preset-typescript": "7.25.7",
+        "@faker-js/faker": "9.0.3",
         "@storybook/addon-essentials": "7.6.17",
-        "@storybook/addon-styling-webpack": "1.0.0",
         "@storybook/react": "7.6.17",
         "@storybook/react-webpack5": "7.6.17",
-        "@stylistic/eslint-plugin": "2.7.2",
+        "@stylistic/eslint-plugin": "2.8.0",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.5.0",
         "@testing-library/react": "16.0.1",
         "@testing-library/user-event": "14.5.2",
-        "@types/jest": "29.5.12",
-        "@types/node": "22.5.3",
+        "@types/jest": "29.5.13",
+        "@types/node": "22.7.4",
         "@types/ramda": "0.30.2",
-        "@types/react": "18.3.5",
+        "@types/react": "18.3.11",
         "@types/sprintf-js": "1.1.4",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.4.0",
-        "@typescript-eslint/parser": "8.4.0",
-        "babel-loader": "9.1.3",
+        "@typescript-eslint/eslint-plugin": "8.8.0",
+        "@typescript-eslint/parser": "8.8.0",
+        "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-import-resolver-typescript": "3.6.3",
-        "eslint-plugin-import": "2.30.0",
+        "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.35.2",
+        "eslint-plugin-react": "7.37.1",
         "eslint-plugin-react-hooks": "4.6.2",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
@@ -91,8 +88,8 @@
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
-        "typescript": "5.5.4",
-        "webpack": "5.94.0"
+        "typescript": "5.6.2",
+        "webpack": "5.95.0"
     },
     "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0",

src/core/data-display/advertise/styles.ts

@@ -3,11 +3,11 @@ import Typography from '@/core/data-display/typography'
 import Paper from '@/core/surfaces/paper'
 import { theme } from '@/theme'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 export const AdvertiseTypography = styled(Typography)`
     && {
-        border-left: 1px solid ${grays.g5};
+        border-left: 1px solid ${gray[400]};
     }
 `
 

src/core/data-display/chapter/styles.ts

@@ -2,15 +2,15 @@ import { default as styled } from 'styled-components'
 import type { LineProps } from '.'
 import { theme } from '@/theme'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 export const Line = styled.div<LineProps>`
     height: 1px;
     flex: 1;
     min-height: 0.75px;
     max-height: 3px;
     align-self: center;
-    background-color: ${props => (props.primary ? grays.g4 : grays.g6)};
+    background-color: ${props => (props.primary ? gray[500] : gray[300])};
 `
 
 export const Container = styled.div`

src/core/data-display/line/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { DefaultProps } from '../../types'
 import { theme } from '@/theme'
 
-const { grays, secondary } = theme.colors
+const { gray, secondary } = theme.colors
 
 export interface LineProps extends DefaultProps {
     primary?: boolean
@@ -21,7 +21,7 @@ const Line = ({
             flex: 1,
             padding,
             margin,
-            border: `1px solid ${primary ? secondary.light : grays.g6}`,
+            border: `1px solid ${primary ? secondary.light : gray[300]}`,
             ...style
         }}
         {...otherProps}

src/core/data-display/line/line.spec.tsx

@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react'
 import Line from '.'
 import { theme } from '@/theme'
 
-const { grays, secondary } = theme.colors
+const { gray, secondary } = theme.colors
 
 describe('Line', () => {
     it('should render closed', () => {
@@ -32,7 +32,7 @@ describe('Line', () => {
         expect(element).toHaveProperty('style.padding', '5px')
         expect(element).toHaveProperty(
             'style.border',
-            `1px solid ${grays.g6.toLowerCase()}`
+            `1px solid ${gray[300].toLowerCase()}`
         )
     })
 

src/core/data-display/list/index.tsx

@@ -5,7 +5,7 @@ import { createStyles, makeStyles } from '@mui/styles'
 import type { DefaultProps } from '../../types'
 import { theme } from '@/theme'
 
-const { app } = theme.colors
+const { neutral } = theme.colors
 
 export interface ListProps extends DefaultProps {
     title?: string
@@ -16,7 +16,7 @@ export interface ListProps extends DefaultProps {
 const useStyles = makeStyles(() =>
     createStyles({
         default: {
-            backgroundColor: app.background.main
+            backgroundColor: neutral[100]
         },
         inherit: {
             backgroundColor: 'inherit',

src/core/data-display/table/index.tsx

@@ -4,7 +4,7 @@ import type { DefaultProps } from '../../types'
 import type { TableProps } from '@mui/material/Table'
 import { theme } from '@/theme'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 export interface ITableProps extends DefaultProps, Omit<TableProps, 'padding'> {
     spacing?: 'normal' | 'checkbox' | 'none'
@@ -22,7 +22,7 @@ const Table = ({
         {...otherProps}
         padding={spacing}
         style={{
-            border: `1px solid ${grays.g6}`,
+            border: `1px solid ${gray[300]}`,
             padding,
             margin,
             ...style

src/core/data-display/table/table-footer.tsx

@@ -4,7 +4,7 @@ import type { DefaultProps } from '../../types'
 import type { TableFooterProps } from '@mui/material/TableFooter'
 import { theme } from '@/theme'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 export interface ITableFooterProps extends DefaultProps, TableFooterProps {}
 
@@ -16,7 +16,7 @@ const TableFooter = ({
 }: ITableFooterProps) => (
     <MuiTableFooter
         style={{
-            borderColor: grays.g7,
+            borderColor: gray[200],
             margin,
             padding,
             ...style

src/core/data-display/table/table-pagination.tsx

@@ -4,7 +4,7 @@ import MuiTablePagination from '@mui/material/TablePagination'
 import type { TablePaginationProps } from '@mui/material/TablePagination'
 import { theme } from '@/theme'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 interface ITablePaginationProps
     extends Omit<
@@ -54,12 +54,12 @@ const TablePagination = ({
                 return `${from}-${to} de ${count !== -1 ? count : `mais que ${to}`}`
             }}
             style={{
-                borderColor: grays.g7,
+                borderColor: gray[200],
                 padding,
                 ...style
             }}
             sx={{
-                borderBottom: `1px solid ${grays.g7} !important;`
+                borderBottom: `1px solid ${gray[200]} !important;`
             }}
             onPageChange={onPageChange}
             onRowsPerPageChange={onRowsPerPageChange}

src/core/data-display/table/table-row.tsx

@@ -5,7 +5,7 @@ import type { DefaultProps } from '../../types'
 import type { TableRowProps } from '@mui/material/TableRow'
 import { theme } from '@/theme'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 export interface ITableRowProps extends DefaultProps, TableRowProps {
     selected?: boolean
@@ -26,7 +26,7 @@ const TableRow = ({
         {...otherProps}
         style={{
             background,
-            borderColor: grays.g7,
+            borderColor: gray[200],
             margin,
             padding,
             ...style

src/core/feedback/progress/progress.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryFn } from '@storybook/react'
 import Progress from '.'
 import { theme } from '@/theme'
 
+const { deepOrange } = theme.colors
+
 export default {
     title: 'Feedback/Progress',
     component: Progress
@@ -85,6 +87,6 @@ LinearWithCustom.args = {
     variant: 'determinate',
     value: 75,
     valueBuffer: 100,
-    primaryColor: `${theme.colors.graphic.red.main}80`,
-    barPrimaryColor: theme.colors.graphic.red.main
+    primaryColor: `${deepOrange[600]}80`,
+    barPrimaryColor: deepOrange[600]
 }

src/core/feedback/skeleton/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import type { SkeletonProps } from 'react-loading-skeleton'
 import SkeletonLoading from 'react-loading-skeleton'
-import 'react-loading-skeleton/dist/skeleton.css'
 import { theme } from '@/theme'
+import 'react-loading-skeleton/dist/skeleton.css'
 
-const { grays } = theme.colors
+const { gray } = theme.colors
 
 const Skeleton = (props: SkeletonProps) => (
     <SkeletonLoading
         containerTestId='skeleton-container'
-        baseColor={grays.g7}
-        highlightColor={grays.g6}
+        baseColor={gray[200]}
+        highlightColor={gray[300]}
         {...props}
     />
 )

src/core/feedback/snackbar/index.tsx

@@ -7,12 +7,14 @@ import {
     Info as IconInfo,
     Warning as IconWarning
 } from '@mui/icons-material'
-import { amber, blue, green, red } from '@mui/material/colors'
 import MuiSnackbar from '@mui/material/Snackbar'
 import MuiSnackbarContent from '@mui/material/SnackbarContent'
 import type { DefaultProps } from '../../types'
 import type { TransitionProps } from '@mui/material/transitions'
 import IconButton from '@/core/inputs/icon-button'
+import { theme } from '@/theme'
+
+const { blue, green, orange, red } = theme.colors
 
 export interface SnackBarProps extends DefaultProps {
     autoHide?: number
@@ -39,19 +41,19 @@ export interface SnackBarProps extends DefaultProps {
 
 const variants = {
     error: {
-        color: red[700],
+        color: red[500],
         icon: IconError
     },
     info: {
-        color: blue[500],
+        color: blue[600],
         icon: IconInfo
     },
     success: {
-        color: green[700],
+        color: green[400],
         icon: IconCheck
     },
     warning: {
-        color: amber[700],
+        color: orange[600],
         icon: IconWarning
     }
 }