IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Componemts:Themes:Update Colors button in Themes

Browse Source
This commit is contained in:
Akmal Isomadinov 2022-11-04 12:44:47 +05:00
parent 9914d45468
commit 74c00d2226
2 changed files with 55 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/components/themes/base.js
View File

@ -18,6 +18,12 @@ const {
blueDisabled, blueDisabled,
blueCharcoal, blueCharcoal,
buttonLightPrimaryDefault,
buttonLightPrimaryHover,
buttonLightPrimaryPressed,
buttonLightPrimaryDisabled,
buttonLightPrimaryLoader,
orangeMain, orangeMain,
orangeHover, orangeHover,
orangePressed, orangePressed,
@ -132,7 +138,7 @@ const Base = {
base: black, base: black,
baseHover: black, baseHover: black,
baseActive: black, baseActive: black,
baseDisabled: grayLightMid, baseDisabled: grayMid,
primary: white, primary: white,
primaryHover: white, primaryHover: white,
primaryActive: white, primaryActive: white,
@ -144,25 +150,31 @@ const Base = {
baseHover: white, baseHover: white,
baseActive: grayLightMid, baseActive: grayLightMid,
baseDisabled: grayLight, baseDisabled: grayLight,
primary: blueMain, baseLoading: grayLight,
primaryHover: blueHover, //primary color
primaryActive: blueActive, primary: buttonLightPrimaryDefault,
primaryDisabled: blueDisabled, primaryHover: buttonLightPrimaryHover,
primaryActive: buttonLightPrimaryPressed,
primaryDisabled: buttonLightPrimaryDisabled,
primaryLoading: buttonLightPrimaryLoader,
}, },
border: { border: {
base: `1px solid ${globalColors.grayMid}`, base: `1px solid ${globalColors.grayMid}`,
baseHover: `1px solid ${globalColors.blueMain}`, baseHover: `1px solid ${globalColors.buttonLightPrimaryDefault}`,
baseActive: `1px solid ${globalColors.blueMain}`, baseActive: `1px solid ${globalColors.grayMid}`,
baseDisabled: `1px solid ${globalColors.grayLightMid}`, baseDisabled: `1px solid ${globalColors.grayLightMid}`,
primary: `1px solid ${globalColors.blueMain}`, baseLoading: `1px solid ${globalColors.grayLightMid}`,
primaryHover: `1px solid ${globalColors.blueHover}`,
primaryActive: `1px solid ${globalColors.blueActive}`, primary: `1px solid ${globalColors.buttonLightPrimaryDefault}`,
primaryDisabled: `1px solid ${globalColors.blueDisabled}`, primaryHover: `1px solid ${globalColors.buttonLightPrimaryHover}`,
primaryActive: `1px solid ${globalColors.buttonLightPrimaryPressed}`,
primaryDisabled: `1px solid ${globalColors.buttonLightPrimaryDisabled}`,
primaryLoading: `1px solid ${globalColors.buttonLightPrimaryLoader}`,
}, },
loader: { loader: {
base: black, base: buttonLightPrimaryDefault,
primary: white, primary: white,
}, },
}, },

55
packages/components/themes/dark.js
View File

@ -98,7 +98,7 @@ const Dark = {
height: { height: {
extraSmall: "24px", extraSmall: "24px",
small: "32px", small: "32px",
normalDesktop: "36px", normalDesktop: "40px",
normalTouchscreen: "40px", normalTouchscreen: "40px",
medium: "44px", medium: "44px",
}, },
@ -128,41 +128,48 @@ const Dark = {
}, },
color: { color: {
base: "#CCCCCC", base: "#FFFFFF",
baseHover: "#FAFAFA", baseHover: "#FFFFFF",
baseActive: "#858585", baseActive: "#FFFFFF",
baseDisabled: "#545454", baseDisabled: "#474747",
primary: "#FFFFFF", primary: "#FFFFFF",
primaryHover: "#FFFFFF", primaryHover: "#FFFFFF",
primaryActive: "#FFFFFF", primaryActive: "#FFFFFF",
primaryDisabled: black, primaryDisabled: "#FFFFFF",
}, },
backgroundColor: { backgroundColor: {
base: "transparent", base: "#333333",
baseHover: black, baseHover: "#333333",
baseActive: "#292929", baseActive: "#282828",
baseDisabled: "#474747", baseDisabled: "#282828",
primary: "#CCCCCC", baseLoading: "#282828",
primaryHover: "#FAFAFA",
primaryActive: "#858585", primary: "#5299E0",
primaryDisabled: "#545454", primaryHover: "rgba(82, 153, 224, 0.85)",
primaryActive: "#427CB7",
primaryDisabled: "rgba(82, 153, 224, 0.6)",
primaryLoading: "#45709B",
}, },
border: { border: {
base: `1px solid #CCCCCC`, base: `1px solid #474747`,
baseHover: `1px solid #FAFAFA`, baseHover: `1px solid #858585`,
baseActive: `1px solid #FAFAFA`, baseActive: `1px solid #CCCCCC`,
baseDisabled: `1px solid #545454`, baseDisabled: `1px solid #474747`,
primary: `1px solid #CCCCCC`, baseLoading: `1px solid #474747`,
primaryHover: `1px solid #FAFAFA`,
primaryActive: `1px solid #FAFAFA`, primary: `1px solid #5299E0`,
primaryDisabled: `1px solid #545454`, primaryHover: `1px solid rgba(82, 153, 224, 0.85)`,
primaryActive: `1px solid #427CB7`,
primaryDisabled: `1px solid #45709B`,
primaryLoading: `1px solid #45709B`,
}, },
loader: { loader: {
base: grayMaxLight, base: white,
primary: black, primary: white,
}, },
}, },